.graphing-tool{width:min(calc(100% - 48px), var(--max));margin:0 auto;padding:clamp(42px,7vw,82px) 0 72px}.graphing-tool__intro{grid-template-columns:minmax(220px,.7fr) minmax(300px,1.3fr);align-items:end;column-gap:clamp(32px,7vw,92px);margin-bottom:30px;display:grid}.graphing-tool__intro h2,.graphing-values h3{font-family:var(--font-display);letter-spacing:-.035em;margin:0;font-weight:520}.graphing-tool__intro h2{font-size:clamp(2.2rem,4.5vw,4.6rem);line-height:.96}.graphing-tool__intro>p:last-child{max-width:52ch;color:var(--ink-soft);margin:0}.graphing-tool__label{color:var(--cobalt);letter-spacing:.1em;text-transform:uppercase;margin:0 0 9px;font-size:.7rem;font-weight:800}.graphing-form{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);grid-template-columns:minmax(280px,1fr) auto auto;align-items:end;gap:20px;padding:25px 0;display:grid}.graphing-form label{color:var(--ink);letter-spacing:.04em;text-transform:uppercase;font-size:.74rem;font-weight:780}.graphing-form input{border:1px solid var(--rule);min-height:48px;color:var(--ink);background:var(--paper-bright);border-radius:0}.graphing-form input:focus{border-color:var(--cobalt);box-shadow:var(--shadow-focus);outline:0}.graphing-form__expression input{width:100%;font-family:var(--font-display);margin-top:7px;padding:10px 14px;font-size:1.28rem}.graphing-form__expression p{color:var(--ink-soft);margin:7px 0 0;font-size:.72rem}.graphing-form__range{grid-template-columns:auto 74px;align-items:center;gap:7px 10px;display:grid}.graphing-form__range input{width:74px;padding:8px}.graphing-form>button{border:1px solid var(--cobalt);color:#fff;background:var(--cobalt);cursor:pointer;min-height:48px;padding:10px 20px;font-weight:780}.graphing-form>button:hover{background:var(--cobalt-dark)}.graphing-form__error{color:var(--danger);grid-column:1/-1;margin:0;font-size:.82rem}.graphing-examples{color:var(--ink-soft);flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0;font-size:.76rem;display:flex}.graphing-examples>span{margin-right:3px;font-weight:750}.graphing-examples button{border:1px solid var(--rule);min-height:40px;color:var(--ink);cursor:pointer;background:0 0;padding:6px 11px}.graphing-examples button:hover{border-color:var(--cobalt);color:var(--cobalt)}.graphing-status{color:var(--ink-soft);margin:22px 0 11px;font-size:.78rem}.graphing-output{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);grid-template-columns:minmax(0,1fr) 230px;display:grid}.graphing-figure{border-right:1px solid var(--rule);min-width:0;padding:18px 20px 12px 0}.graphing-figure svg{width:100%;height:auto;min-height:310px;display:block}.graphing-svg__paper{fill:#fffaf07a}.graphing-svg__grid,.graphing-svg__axis,.graphing-svg__curve{vector-effect:non-scaling-stroke}.graphing-svg__grid{stroke:#d8d0c2;stroke-width:1px}.graphing-svg__axis{stroke:var(--ink);stroke-width:1.25px}.graphing-svg__curve{fill:none;stroke:var(--cobalt);stroke-linecap:round;stroke-linejoin:round;stroke-width:3px}.graphing-svg__tick,.graphing-svg__axis-label{fill:var(--ink-soft);font-family:var(--font-sans);font-size:12px}.graphing-svg__axis-label{fill:var(--ink);font-size:14px;font-weight:800}.graphing-values{flex-direction:column;min-width:0;padding:28px 0 20px 24px;display:flex}.graphing-values h3{font-size:1.32rem}.graphing-values__scroll{margin-top:22px;overflow-x:auto}.graphing-values__scroll:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}.graphing-values table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.graphing-values th,.graphing-values td{border-bottom:1px solid var(--rule);text-align:right;padding:7px 5px}.graphing-values th{color:var(--cobalt);letter-spacing:.06em;text-transform:uppercase;font-size:.68rem}.graphing-values td{font-family:var(--font-display);font-size:.9rem}@media (width<=840px){.graphing-tool__intro,.graphing-output{grid-template-columns:1fr}.graphing-tool__intro>p:last-child{margin-top:18px}.graphing-form{grid-template-columns:1fr auto}.graphing-form__expression,.graphing-form__error{grid-column:1/-1}.graphing-figure{border-right:0;border-bottom:1px solid var(--rule);padding-right:0}.graphing-values{padding-left:0}.graphing-values__scroll{margin-top:14px}.graphing-values table{min-width:420px}}@media (width<=560px){.graphing-tool{width:min(calc(100% - 32px), var(--max))}.graphing-form{grid-template-columns:1fr}.graphing-form__expression,.graphing-form__error{grid-column:auto}.graphing-form__range{grid-template-columns:1fr 1fr}.graphing-form__range input,.graphing-form>button{width:100%}.graphing-figure svg{min-height:240px}}
