@font-face{font-family:Inter;src:url(/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/instrument-serif.woff2) format("woff2");font-weight:400;font-display:swap}
:root{color-scheme:dark;--ground:#141320;--card:#1b192a;--ink:#fff9f2;--muted:#c4b9d3;--line:#40384f;--pink:#ffabc0;--violet:#bfb2fc;--sans:Inter,system-ui,sans-serif;--serif:"Instrument Serif",Georgia,serif;--mono:ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--ground);color:var(--ink);font:14px/1.55 var(--sans)}a{color:var(--pink);text-underline-offset:.25em}a:hover{text-decoration-thickness:2px}input,button,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid #675574;background:#272137;padding:.42rem .72rem;border-radius:7px;font-weight:670;white-space:nowrap}button:hover{border-color:#dc9aaf;background:#362842}button:disabled{opacity:.47;cursor:default}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--pink);outline-offset:3px}.wrap{width:min(1120px,calc(100% - 66px));margin:auto}.top{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0;border-bottom:1px solid var(--line);gap:1rem;font-size:.82rem}.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);font-weight:750;letter-spacing:-.055em;font-size:1.18rem}.mark{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;color:#22182b;background:var(--pink);font:700 1.7rem/1 var(--serif)}.hero{display:grid;grid-template-columns:1fr minmax(225px,338px);gap:1.6rem;align-items:end;padding:2.5rem 0 1.8rem}.hero h1,.guide h1{font:400 clamp(4.25rem,9.8vw,8.9rem)/.82 var(--serif);letter-spacing:-.035em;margin:0}.hero em{font-weight:400;color:var(--pink)}.hero p{font-size:1rem;color:var(--muted);margin:0;max-width:36ch}
.workspace{display:grid;grid-template-columns:minmax(0,1.44fr) minmax(270px,.9fr);gap:.8rem;align-items:stretch}.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;min-width:0;padding:1rem 1.15rem}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.76rem}.panel-heading h2{font-size:1rem;letter-spacing:-.025em;margin:0}.legend{display:flex;gap:.7rem;font-size:.72rem;color:var(--muted)}.legend span{display:flex;align-items:center;gap:.35rem}.legend span:before{content:"";display:block;width:.75rem;height:2px;background:var(--pink)}.legend span+span:before{background:var(--violet)}figure{margin:0}.chart-frame{overflow:hidden;background:#11111c;border:1px solid #393147;border-radius:8px}.chart-frame canvas{display:block;width:100%;height:296px;touch-action:pan-y;cursor:crosshair}.chart-frame canvas.dragging{cursor:grabbing;touch-action:none}figcaption{padding-top:.55rem;color:var(--muted);font-size:.76rem}.group{font-size:.74rem;color:var(--muted);display:grid;gap:.3rem;font-weight:650}.controls input,.controls select{width:100%;min-width:0;background:#141320;border:1px solid #554961;border-radius:6px;padding:.36rem .47rem;height:34px}.coordinates,.paired{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:.72rem 0}.coordinates fieldset{min-width:0;margin:0;border:1px solid #51435d;border-radius:7px;display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.45rem}.coordinates legend{padding:0 .35rem;color:var(--muted);font-size:.76rem}.coordinates label{font-size:.75rem;display:grid;gap:.15rem;color:var(--muted)}.coordinates input{font-family:var(--mono);padding:.3rem .39rem;appearance:textfield}.coordinates input::-webkit-inner-spin-button{appearance:none}.code-head{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem}.code-head h3{margin:0;font:700 .8rem var(--mono)}.primary{background:var(--pink);color:#28182b;border-color:var(--pink)}.primary:hover{background:#ffc3d2;color:#28182b;border-color:#ffc3d2}.controls pre,.guide pre{overflow:auto;background:#11111c;color:#e8dbff;border:1px solid #40354e;border-radius:8px;padding:.65rem .72rem;font:.74rem/1.48 var(--mono);margin:.5rem 0 0;min-height:5em}.error{color:#ffc1b5;font-size:.78rem;margin:.4rem 0}.notice{color:var(--muted);font-size:.76rem;margin:.45rem 0 0;overflow-wrap:anywhere}.notice:empty{display:none}.controls textarea{margin-top:.5rem;width:100%;color:var(--ink);background:#11111c;border:1px solid var(--line);border-radius:6px;min-height:5rem;font:.78rem var(--mono)}
.preview{grid-column:1/-1}.preview .panel-heading p{margin:.24rem 0 0;font-size:.76rem;color:var(--muted)}.lanes{display:grid;gap:.52rem}.lane{display:grid;grid-template-columns:88px minmax(0,1fr) 58px;align-items:center;gap:.55rem;color:var(--muted);font-size:.78rem;font-weight:620}.lane output{text-align:right;font-family:var(--mono);color:var(--pink)}.lane.reference output{color:var(--violet)}.track{position:relative;overflow:hidden;height:24px;border-radius:5px;background:#151423;border:1px solid #443a51;--edge:12%;--span:76%}.track:before{content:"";display:block;position:absolute;inset:0 var(--edge);border-inline:1px solid #68617a;background:repeating-linear-gradient(to right,#423953 0 1px,transparent 1px 25%);opacity:.67}.track i{position:absolute;top:50%;left:var(--marker,12%);width:12px;height:12px;transform:translate(-50%,-50%);border-radius:4px;background:var(--pink);box-shadow:0 0 13px #ffabc090}.lane.reference .track i{background:var(--violet);box-shadow:0 0 13px #bfb2fc80}.scrub{display:flex;align-items:center;gap:.75rem;margin:.65rem 0 0;font-size:.76rem}.scrub span{flex:none;color:var(--muted)}.scrub output{font-family:var(--mono);display:inline-block;min-width:3ch;color:var(--ink)}.scrub input{flex:1;min-width:70px;accent-color:var(--pink);height:24px}
.next{margin:2.25rem 0 2.5rem;max-width:62ch}.next h2{font:400 2.35rem/.95 var(--serif);margin:0}.next p{color:var(--muted);margin:.6rem 0}.footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:1rem 0 1.6rem;gap:1rem;font-size:.8rem}.skip{position:absolute;top:.5rem;left:.5rem;transform:translateY(-200%);background:var(--card);padding:.6rem;z-index:5}.skip:focus{transform:none}.guide{width:min(710px,calc(100% - 66px));padding:3rem 0}.guide h1{font-size:clamp(4rem,9vw,6.6rem);line-height:.88}.guide h2{font:400 2.15rem/1 var(--serif);margin:2rem 0 .65rem}.guide p{color:var(--muted)}.guide .lead{font-size:1.12rem;max-width:52ch}.guide-cta{display:inline-block;background:var(--pink);color:#28182b;font-weight:700;text-decoration:none;border-radius:7px;padding:.5rem .75rem}
@media(max-width:760px){.wrap{width:calc(100% - 34px)}.hero{grid-template-columns:1fr;padding-top:2rem;gap:.85rem}.hero p{max-width:49ch}.workspace{grid-template-columns:minmax(0,1.15fr) minmax(235px,1fr)}.panel{padding:.76rem}.chart-frame canvas{height:280px}}
@media(max-width:590px){.wrap{width:calc(100% - 24px)}.top{padding:.85rem 0}.hero h1{font-size:clamp(4.1rem,14vw,6.4rem);line-height:.88}.workspace{display:flex;flex-direction:column}.chart-frame canvas{height:232px}.lane{grid-template-columns:68px minmax(0,1fr) 49px;gap:.4rem}.panel{border-radius:9px}.guide{padding-top:2.3rem}}
.chart-frame canvas,.chart-frame canvas.dragging{touch-action:pinch-zoom}.track:before{inset:0 auto 0 var(--edge);width:var(--span)}

.graph{grid-column:1;grid-row:1}.controls{grid-column:2;grid-row:1}.preview{grid-row:2}.controls pre{white-space:pre-wrap;overflow-wrap:anywhere}@media(min-width:761px){.chart-frame canvas{height:328px}}