@font-face{font-family:Inter;src:url('/inter.woff2') format('woff2');font-display:swap;font-weight:100 900}
:root{color-scheme:light;--paper:#f2f2fb;--white:#fdfdff;--ink:#1d1d35;--soft:#565674;--a:#5534aa;--b:#b24349;--line:#d1cee5;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:500 1rem/1.5 Inter,system-ui,sans-serif}a{color:var(--a);text-underline-offset:4px}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.56}:focus-visible{outline:2px solid var(--a);outline-offset:3px}
.wrap{width:min(1160px,calc(100% - 48px));margin:auto}.top,.bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.84rem}.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:800;text-decoration:none}.brand span{width:25px;height:25px;border-radius:6px;background:var(--a);position:relative}.brand span::before{position:absolute;content:'';width:15px;height:7px;border-left:2px solid #fff;border-bottom:2px solid #fff;border-radius:0 0 0 6px;transform:rotate(-35deg);left:4px;top:7px}
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr);gap:22px;align-items:end;padding:clamp(36px,7vw,82px) 0 28px}.hero h1,.guide h1{font-size:clamp(3.2rem,8.2vw,7.2rem);letter-spacing:-.086em;line-height:.88;font-weight:800;margin:0}.hero h1 span{color:var(--a)}.hero p{max-width:48ch;margin:16px 0 0;color:var(--soft)}.hero-note{border-left:1px solid #9289b5;padding:9px 13px;color:var(--a);display:grid;justify-self:end;gap:4px;font-size:.78rem}.hero-note code{font:650 clamp(.76rem,1.9vw,1.08rem)/1.4 var(--mono);overflow-wrap:anywhere}
.workspace{display:grid;grid-template-columns:minmax(0,1.52fr) minmax(0,1fr);gap:12px}.panel{padding:clamp(13px,2.3vw,23px);border:1px solid var(--line);border-radius:11px;background:var(--white);min-width:0}.stage{background:#e9e7f8}h2{margin:0 0 9px;font-size:1.06rem;letter-spacing:-.02em}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.section-head output,.lane output{color:var(--soft);font:700 .8rem var(--mono)}.lanes{display:grid;gap:7px}.lane{display:grid;grid-template-columns:20px minmax(0,1fr) 48px;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--white)}.lane label{font-weight:790;color:var(--color)}.lane output{text-align:right;white-space:nowrap}.lane.left{--color:var(--a)}.lane.right{--color:var(--b)}.track{position:relative;height:18px;border-radius:12px;background:#f1eef8;overflow:hidden}.track .start,.track .end{position:absolute;top:1px;bottom:1px;width:1px;background:#9588b3}.track .start{left:13%}.track .end{left:87%}.track i{width:11px;height:11px;position:absolute;top:3.5px;left:13%;transform:translateX(-50%);border-radius:50%;background:var(--color)}
.playback{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin:8px 0 10px}.playback .scrub{flex:1 1 144px}label{display:grid;gap:3px;color:var(--soft);font-size:.78rem;font-weight:735}input,select{min-width:0;width:100%;color:var(--ink);border:1px solid #a9a1c3;background:#fbfaff;border-radius:6px;padding:7px;font-size:.84rem;min-height:36px}input[type=range]{accent-color:var(--a);height:36px}input[type=text]{font-family:var(--mono)}.panel button{min-height:35px;border:1px solid #a79cc8;color:var(--a);background:#fbfaff;border-radius:6px;padding:6px 10px;font-size:.78rem;font-weight:760}.panel button:hover:not(:disabled){background:#ede9fb}.panel .primary{background:var(--a);color:white;border-color:var(--a)}.panel button.primary:hover:not(:disabled){background:#452593}
#curve-chart{display:block;width:100%;height:clamp(205px,28vw,308px);background:var(--white);border:1px solid var(--line);border-radius:8px}.curve-field{border-left:3px solid var(--curve-color);padding:8px 11px;margin-top:10px;display:grid;gap:6px;background:#f6f3fb;border-radius:6px}.curve-field.a{--curve-color:var(--a)}.curve-field.b{--curve-color:var(--b)}.curve-field button{justify-self:start}.hint,.status{margin:5px 0 0;font-size:.77rem;color:var(--soft);overflow-wrap:anywhere}.status:empty{display:none}.problem{color:#a33b40}.learn,.bottom{border-top:1px solid var(--line)}.learn{margin-top:24px;padding:15px 0}.learn p{color:var(--soft);margin:5px 0 9px;max-width:66ch}.bottom{border-bottom:0;margin-top:8px}.guide{width:min(730px,100%);margin:42px auto}.guide h1{font-size:clamp(2.8rem,7vw,5.6rem);margin:15px 0 20px}.guide h2{margin:25px 0 6px}.guide p{color:var(--soft)}.guide code{font-family:var(--mono);overflow-wrap:anywhere}
@media(max-width:760px){.workspace{grid-template-columns:1fr}.hero{grid-template-columns:minmax(0,1fr);gap:10px}.hero-note{display:none}}@media(max-width:425px){.wrap{width:calc(100% - 24px)}.hero h1{font-size:clamp(2.9rem,12vw,4.25rem)}.top,.bottom{font-size:.75rem}.panel{padding:12px}}