main{max-width:1120px;margin:3rem auto;padding:0 24px 48px}h1{font-size:clamp(2.5rem,6vw,4.4rem);letter-spacing:-.045em;margin:.6em 0 .2em}header p,.reference{color:var(--muted);line-height:1.6}section{margin:2.5rem 0}.heading{display:flex;justify-content:space-between;align-items:center;gap:12px}h2{font-size:1.2rem;font-weight:550}canvas{display:block;width:100%;height:360px;background:#06090e;border-radius:12px}.transport{display:flex;align-items:center;gap:12px;margin-top:16px}.time{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.time input{width:100%}input[type=range]{accent-color:var(--accent);cursor:pointer;height:30px;min-width:0}button{font:inherit;cursor:pointer;border:1px solid var(--rule);border-radius:7px;padding:9px 16px;background:#fff;min-width:80px}button:hover{background:#f2f1f8}output{white-space:nowrap;font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--muted)}.options{display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);margin-top:8px}.options label{display:flex;align-items:center;gap:10px}.options input[type=range]{width:125px}.reference{font-size:.9rem;border-top:1px solid var(--rule);padding-top:1.2rem}a{overflow-wrap:anywhere}details{margin:2.5rem 0}summary{cursor:pointer}details>label{display:block;margin:1.2rem 0 .5rem}textarea{display:block;width:100%;font:14px/1.6 monospace;padding:14px;border:1px solid var(--rule);border-radius:8px;margin:0 0 12px;resize:vertical}#status:empty{display:none}#status[data-error=true]{color:#a12b3b}
@media(max-width:500px){main{padding:0 16px 32px;margin:1.5rem auto}section{margin:2rem 0}canvas{height:340px}.transport{flex-wrap:wrap}.time{min-width:100%;order:1}.options{gap:8px 18px}.options input[type=range]{width:95px}}

.hint{font-size:.9rem;color:var(--muted);line-height:1.6}.options i{min-width:10px}.options output{min-width:30px}