:root{color-scheme:dark;--accent:#2dd4bf;--muted:#9fb0bb;--grad:linear-gradient(92deg,#2ee6a6,#38bdf8 60%,#818cf8)}*{box-sizing:border-box}body{background:radial-gradient(1100px 700px at 50% -10%,#0c1320 0,transparent 55%),#05070a;color:#e8edf1;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;min-height:100vh;-webkit-font-smoothing:antialiased}.spectro{margin:0 auto;max-width:1080px;padding:24px 16px 56px}.spectro__bar{align-items:center;display:flex;gap:14px;margin-bottom:18px}.spectro__title{background:var(--grad);-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0;-webkit-text-fill-color:transparent}.spectro__back{margin-right:auto}.spectro__back,.spectro__home{color:var(--muted);font-size:15px;font-weight:600;text-decoration:none}.spectro__home{margin-left:auto}.spectro__back:hover,.spectro__home:hover{color:#67e8f9}.spectro__stage{border:1px solid hsla(0,0%,100%,.1);border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.4);overflow:hidden;position:relative}.spectro__canvas{display:block;width:100%}.spectro__canvas--main{background:#070b11;height:clamp(220px,46vh,460px)}.spectro__canvas--bars{background:#070b11;border:1px solid hsla(0,0%,100%,.1);border-radius:12px;height:120px;margin-top:12px}.spectro__axis{color:rgba(159,176,187,.85);font-size:10.5px;font-weight:600;left:8px;letter-spacing:.04em;pointer-events:none;position:absolute;text-shadow:0 1px 2px rgba(0,0,0,.8)}.spectro__axis--top{top:7px}.spectro__axis--bottom{bottom:7px}.spectro__time{bottom:7px;color:rgba(159,176,187,.7);font-size:10.5px;font-weight:600;pointer-events:none;position:absolute;right:8px;text-shadow:0 1px 2px rgba(0,0,0,.8)}.spectro__overlay{align-items:center;backdrop-filter:blur(3px);background:radial-gradient(420px 320px at 50% 42%,rgba(8,16,26,.62),rgba(5,7,10,.88));display:flex;inset:0;justify-content:center;padding:20px;position:absolute;z-index:4}.spectro__overlay[hidden]{display:none}.spectro__card{background:linear-gradient(180deg,rgba(21,29,40,.86),rgba(12,17,24,.86));border:1px solid hsla(0,0%,100%,.12);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.5);max-width:340px;padding:22px 22px 20px;text-align:center}.spectro__card-msg{color:#d4dde4;font-size:14px;line-height:1.55;margin:0 0 16px}.spectro__controls{align-items:flex-end;display:flex;flex-wrap:wrap;gap:14px 16px;margin-top:16px}.spectro__btns{display:flex;flex:0 0 auto;gap:10px}.btn{background:rgba(45,212,191,.13);border:1px solid rgba(45,212,191,.42);border-radius:9px;color:#d6fbf3;cursor:pointer;font:inherit;font-size:13px;font-weight:700;padding:9px 16px;transition:background .14s,border-color .14s,opacity .14s}.btn:hover{background:rgba(45,212,191,.24)}.btn:disabled{cursor:not-allowed;opacity:.42}.btn--accent{border-color:transparent;color:#04221c}.btn--accent,.btn--accent:hover{background:linear-gradient(92deg,#2ee6a6,#38bdf8 130%)}.btn--accent:hover{filter:brightness(1.07)}.btn--ghost{background:hsla(0,0%,100%,.04);border-color:hsla(0,0%,100%,.16);color:#b9c6cf}.btn--ghost:hover{background:hsla(0,0%,100%,.09)}.btn.is-active{background:linear-gradient(92deg,#fbbf24,#f59e0b);border-color:transparent;color:#1a1206}.ctl{display:flex;flex:1 1 150px;flex-direction:column;gap:7px;max-width:232px;min-width:138px}.ctl__lbl{color:#8aa0ad;display:flex;font-size:10.5px;font-weight:700;gap:8px;justify-content:space-between;letter-spacing:.08em;text-transform:uppercase}.ctl__lbl em{color:#b9d4dd;font-style:normal;font-variant-numeric:tabular-nums}.sel{background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.16);border-radius:8px;color:#e8edf1;font:inherit;font-size:13px;padding:8px 9px}.rng,.sel{accent-color:var(--accent);width:100%}.rng{cursor:pointer}.spectro__readout{align-items:center;display:flex;flex-wrap:wrap;font-size:13px;gap:8px 16px;margin-top:16px}.spectro__status{color:var(--muted)}.spectro__peak{color:#cdeee7;font-variant-numeric:tabular-nums;font-weight:700;margin-left:auto}.spectro__legend{align-items:center;color:#7d909c;display:flex;font-size:11.5px;gap:10px;margin-top:14px}.spectro__ramp{background:linear-gradient(90deg,#05070e,#0a3440 16%,#2dd4bf 36%,#38bdf8 58%,#818cf8 78%,#f0f8ff);border:1px solid hsla(0,0%,100%,.12);border-radius:6px;flex:1 1 auto;height:9px;max-width:260px}.spectro__hint{color:#71808a;font-size:12.5px;line-height:1.7;margin-top:18px}.spectro__hint strong{color:#aab8c1;font-weight:700}@media (max-width:480px){.spectro__btns{flex:1 1 100%}.spectro__btns .btn{flex:1 1 auto}.ctl{max-width:none}.spectro__peak{flex:1 1 100%;margin-left:0}}