:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#dde8f0;background:#101923;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1440px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #395065;padding-bottom:22px}h1{font-size:clamp(25px,3.5vw,44px);letter-spacing:-1.6px;margin:12px 0}h1 span{color:#f6df8e;margin-left:20px}.eyebrow{font-size:11px;letter-spacing:3px;color:#81bcbf}p{color:#adc1ce;line-height:1.65;font-size:14px}h2{font-size:18px}h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-top:27px}button{background:#223345;color:#e6eff5;border:1px solid #4b647a;border-radius:7px;padding:10px 13px;cursor:pointer;font:inherit;font-size:12px;margin:4px}button:hover{background:#345168}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ffd77a;outline-offset:3px}nav{padding:18px 0;display:flex;flex-wrap:wrap}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px}.stage{background:radial-gradient(ellipse at 50% 30%,#21354b,#13202e 65%);border:1px solid #34485e;border-radius:14px;padding:22px;min-width:0}.stagehead{display:flex;justify-content:space-between;gap:12px;font-size:13px}.stagehead span{color:#f8e7a6}.viewport{height:400px;width:100%;display:grid;place-items:center;color:#a6bbc8}.viewport canvas{max-width:100%;display:block}.scrub{display:grid;grid-template-columns:1fr 135px;gap:28px}.scrub output{float:right;color:#f8e7a6}.legend{font-size:11px;color:#a0b8c8;margin:16px 0 28px}.legend i{display:inline-block;width:8px;height:8px;background:#ffef9a;margin:0 6px}.legend i.selected{background:#6ce2de}label{display:block;font-size:12px;color:#b9cad8;margin:14px 0}input,select,textarea{display:block;width:100%;margin-top:8px;padding:9px;background:#101c29;border:1px solid #4b6277;border-radius:5px;color:#eef6fa;font:inherit}input[type=range]{padding:0;accent-color:#efd58c}aside{padding:0 4px}.small{font-size:11px}.formula{border-left:2px solid #d8bf79;padding:12px;font-size:12px;background:#192636}.timingrow{display:flex;align-items:center;font-size:10px;height:17px}.timingrow>span{width:58px;flex-shrink:0}.timingrow>div{display:flex;flex:1;gap:1px}.timingrow b{flex:1;height:7px;background:#2a3a4a}.timingrow b.on{background:#f7db84}.axis{display:flex;justify-content:space-between;font-size:10px;color:#9ab1c4;padding-left:58px;margin-top:8px}.bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid #395065;margin-top:32px;padding-top:20px}textarea{height:190px;font-family:monospace;font-size:12px;resize:vertical}footer{position:sticky;bottom:0;background:#172737;border:1px solid #416179;padding:13px;margin-top:24px;font-size:12px;overflow-wrap:anywhere}.error{color:#ffc3ad}@media(max-width:760px){main{padding:18px}.layout,.bottom{grid-template-columns:1fr}.viewport{height:300px}header{align-items:flex-start}.scrub{gap:12px;grid-template-columns:1fr 105px}.stage{padding:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}