:root{--bg:#0b0a10;--bg-deep:#07060a;--panel:#15131d;--panel-raised:#1e1b29;--line:#3a3548;--text:#ece6da;--muted:#bdb5c9;--crimson:#9b1b30;--gold:#b8860b;--teal:#1f6e6e;--crimson-lit:#ef5d76;--gold-lit:#e8bb45;--teal-lit:#4cc4bc;--focus:#ffd866;--radius:14px;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-display:"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--font-mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{font-size:112.5%}body{background:radial-gradient(1200px 600px at 15% -10%, #9b1b3038, transparent 60%), radial-gradient(900px 500px at 100% 0%, #1f6e6e33, transparent 60%), radial-gradient(800px 600px at 50% 120%, #b8860b1f, transparent 60%), var(--bg);min-height:100vh;color:var(--text);font-family:var(--font-body);margin:0;line-height:1.5}:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}[hidden]{display:none!important}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.skip-link{z-index:100;background:var(--gold-lit);color:#120f08;border-radius:8px;padding:.6rem 1rem;font-weight:700;position:absolute;top:-4rem;left:1rem}.skip-link:focus{top:1rem}.site-header{border-bottom:1px solid var(--line);background:linear-gradient(#07060ae6,#07060a66);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem clamp(1rem,3vw,2rem);display:flex;position:relative}.site-header:after{content:"";background:linear-gradient(90deg, var(--crimson-lit), var(--gold-lit) 50%, var(--teal-lit));opacity:.85;height:3px;position:absolute;inset:auto 0 -1px}.brand{align-items:center;gap:.85rem;display:flex}.rose{filter:drop-shadow(0 0 10px #e8bb4559);flex:none;width:3rem;height:3rem}.brand h1{font-family:var(--font-display);letter-spacing:.04em;color:var(--text);margin:0;font-size:clamp(1.8rem,4vw,2.4rem);font-weight:600;line-height:1}.byline{font-family:var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lit);margin:.2rem 0 0;font-size:.8rem}.header-actions{flex-wrap:wrap;gap:.6rem;display:flex}.btn{border:2px solid var(--line);background:var(--panel-raised);min-height:2.75rem;color:var(--text);font:inherit;cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:.45rem;padding:.5rem 1.1rem;font-weight:600;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--gold-lit);background:#282436}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--crimson);border-color:var(--crimson-lit);color:#fff}.btn-primary:hover:not(:disabled){background:#b5223b}.btn-round{width:3.25rem;height:3.25rem;padding:0;font-size:1.15rem}.btn-play{background:radial-gradient(circle at 35% 30%, #c22a45, var(--crimson) 70%);border-color:var(--gold-lit);color:#fff;width:4.25rem;height:4.25rem;font-size:1.5rem;box-shadow:0 0 22px #ef5d7659}.btn-small{min-height:2.75rem;font-size:.9rem}.btn-round.btn-small{width:2.75rem;height:2.75rem;font-size:1.3rem}.btn-toggle[aria-pressed=true]{border-color:var(--teal-lit);background:#123232}.btn-toggle .state{font-family:var(--font-mono);border:1px solid;border-radius:4px;padding:.1rem .45rem;font-size:.8rem}.btn-toggle[aria-pressed=true] .state{color:var(--teal-lit)}.layout{grid-template-columns:minmax(0,1fr);gap:1.25rem;max-width:1400px;margin:0 auto;padding:1.25rem clamp(1rem,3vw,2rem) 2rem;display:grid}.col{flex-direction:column;gap:1.25rem;min-width:0;display:flex}@media (width>=1240px){.layout{grid-template-columns:minmax(0,1fr) 600px;align-items:start}.col-side .classic{order:-1}}.panel{background:linear-gradient(to bottom, var(--panel-raised), var(--panel) 120px);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem 1.25rem;position:relative;box-shadow:0 10px 40px #00000059}.panel:focus{outline:none}.panel-title{font-family:var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lit);align-items:center;gap:.6rem;margin:0 0 .8rem;font-size:.85rem;font-weight:700;display:flex}.panel-title:before{content:"";background:var(--crimson-lit);width:.6rem;height:.6rem;box-shadow:0 0 8px var(--crimson-lit);transform:rotate(45deg)}.visuals .panel-title:before{background:var(--teal-lit);box-shadow:0 0 8px var(--teal-lit)}.playlist .panel-title:before,.classic .panel-title:before{background:var(--gold-lit);box-shadow:0 0 8px var(--gold-lit)}.muted{color:var(--muted)}.small{font-size:.85rem}.now{background:var(--bg-deep);border:1px solid var(--line);border-radius:10px;margin-bottom:1rem;padding:.8rem 1rem}.now-label{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--teal-lit);margin:0;font-size:.75rem}.now-title{overflow-wrap:anywhere;margin:.15rem 0;font-size:1.35rem;font-weight:700}.now-status{color:var(--muted);margin:0}.seek-row,.volume-row{align-items:center;gap:.8rem;display:flex}.time,.volume-row output{font-family:var(--font-mono);font-variant-numeric:tabular-nums;min-width:3.4rem;color:var(--gold-lit)}.seek-row .time:last-child{text-align:right}.volume-row label{min-width:4.5rem;font-weight:600}.slider{min-width:0;height:2.75rem;accent-color:var(--gold-lit);cursor:pointer;background:0 0;flex:1}.slider:disabled{opacity:.5;cursor:not-allowed}.transport{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin:.8rem 0 .4rem;display:flex}@media (width<=480px){.panel{padding-inline:.9rem}.transport{gap:.3rem}.transport .btn-round{width:2.5rem;height:2.5rem;font-size:.95rem}.transport .btn-play{width:3.25rem;height:3.25rem;font-size:1.2rem}}.player-msg{text-align:center;min-height:1.5em;color:var(--gold-lit);margin:0 0 .6rem;font-weight:600}.stage{aspect-ratio:16/9;background:radial-gradient(circle at 50% 45%, #9b1b3059, transparent 55%), radial-gradient(circle at 30% 70%, #1f6e6e4d, transparent 50%), var(--bg-deep);border:1px solid var(--line);border-radius:10px;position:relative;overflow:hidden}.stage canvas{opacity:0;width:100%;height:100%;transition:opacity .8s;display:block}.stage.is-live canvas{opacity:1}.stage-note{color:var(--text);text-align:center;background:linear-gradient(#0000,#07060ae6);margin:0;padding:.8rem 1rem;position:absolute;inset:auto 0 0}.stage-note:empty{display:none}.stage:fullscreen{aspect-ratio:auto;border:0;border-radius:0}.preset-row{flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.9rem;display:flex}.preset-pick{flex:12rem;display:flex}.preset-pick select{border:2px solid var(--line);background:var(--bg-deep);min-height:2.75rem;color:var(--text);font:inherit;border-radius:10px;flex:1;padding:.4rem .8rem}.preset-credit{color:var(--muted);overflow-wrap:anywhere;margin:.6rem 0 0;font-size:.85rem}.render-form{gap:.9rem;display:grid}.shape-pick{border:1px solid var(--line);border-radius:10px;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0;padding:.7rem 1rem .9rem;display:flex}.shape-pick legend{padding:0 .4rem;font-weight:600}.shape-pick label{cursor:pointer;align-items:center;gap:.45rem;min-height:2.75rem;display:flex}.shape-pick input,.render-size select{accent-color:var(--gold-lit)}.shape-pick input{width:1.25rem;height:1.25rem}.render-row{flex-wrap:wrap;align-items:center;gap:.8rem;display:flex}.render-size{align-items:center;gap:.5rem;font-weight:600;display:flex}.render-size select{border:2px solid var(--line);background:var(--bg-deep);min-height:2.75rem;color:var(--text);font:inherit;border-radius:10px;padding:.4rem .8rem}.render-progress{gap:.5rem;margin-top:1rem;display:grid}.render-progress label{font-weight:600}.render-progress progress{width:100%;height:1.1rem;accent-color:var(--gold-lit)}.render-progress .btn{justify-self:start}.render-done{flex-wrap:wrap;align-items:center;gap:.8rem;margin:1rem 0 0;display:flex}.render-done .btn{text-decoration:none}.track-list{max-height:22rem;margin:0;padding:0;list-style:none;overflow-y:auto}.track-list li+li{margin-top:.3rem}.track{width:100%;min-height:2.75rem;color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:2px solid #0000;border-radius:8px;grid-template-columns:auto 1fr auto;gap:.6rem;padding:.45rem .7rem;display:grid}.track:hover{background:var(--panel-raised);border-color:var(--line)}.track-num,.track-time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted)}.track-name{overflow-wrap:anywhere}.track[aria-current=true]{border-color:var(--crimson-lit);background:#9b1b3047;font-weight:700}.track[aria-current=true] .track-num:before{content:"▶ ";color:var(--gold-lit)}.badge{border:1px solid var(--teal-lit);color:var(--teal-lit);letter-spacing:.12em;border-radius:999px;margin-left:.3rem;padding:.05rem .5rem;font-size:.7rem}.shaped-pick{border:0;flex-wrap:wrap;gap:.3rem 1.4rem;margin:0 0 .4rem;padding:0;display:flex}.shaped-pick label{cursor:pointer;align-items:center;gap:.45rem;min-height:2.75rem;font-weight:600;display:flex}.shaped-pick input{width:1.25rem;height:1.25rem;accent-color:var(--gold-lit)}.shaped-stage{-webkit-user-select:none;user-select:none;touch-action:none;width:100%;max-width:560px;margin:.4rem auto 0;position:relative}.sh-art{filter:drop-shadow(0 14px 26px #000000a6);pointer-events:none;width:100%;height:100%;display:block}.sh-ctl,.sh-screen,.sh-led{position:absolute}.sh-btn,.sh-knob,.sh-screen.is-round,.sh-led{aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}.sh-btn{cursor:pointer;background:0 0;border:0;padding:0;transition:box-shadow .12s,background .12s}.sh-btn:hover:not(:disabled){background:radial-gradient(circle,#ffd69647,#0000 70%);box-shadow:0 0 0 2px #ffbe5acc,0 0 18px #ffa03cb3}.sh-btn:active:not(:disabled){background:#00000061;box-shadow:inset 0 3px 9px #000c}.sh-btn:disabled{cursor:not-allowed}.sh-btn[aria-pressed=true]{box-shadow:0 0 0 3px var(--teal-lit), 0 0 16px var(--teal-lit)}.sh-btn[aria-pressed=true]:after{content:"";aspect-ratio:1;background:var(--teal-lit);border:2px solid var(--bg-deep);border-radius:50%;width:26%;position:absolute;top:-2px;right:-2px}.sh-ctl:focus-visible{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 20px #ffd866bf}.sh-slider{cursor:pointer;background:linear-gradient(#0e0304,#2a0809);border-radius:999px;box-shadow:inset 0 2px 5px #000000e6}.sh-slider[aria-disabled=true]{cursor:not-allowed}.sh-fill{background:linear-gradient(90deg,#ff7a1a,#ffb347);border-radius:999px;position:absolute;box-shadow:0 0 10px #ff8c28b3}.sh-slider.is-horizontal .sh-fill{top:25%;bottom:25%}.sh-slider.is-vertical .sh-fill{background:linear-gradient(#ffb347,#ff7a1a);left:25%;right:25%}.sh-thumb{background:linear-gradient(#f4f1ea,#9a9590 55%,#d8d4cc);border:1px solid #2a2626;border-radius:4px;position:absolute;box-shadow:0 2px 4px #000000b3}.sh-slider.is-horizontal .sh-thumb{width:7%;top:-20%;bottom:-20%;transform:translate(-50%)}.sh-slider.is-vertical .sh-thumb{height:11%;left:-25%;right:-25%;transform:translateY(-50%)}.sh-knob{cursor:grab;--turn:-135deg;--amount:0deg}.sh-knob-dot{transform:rotate(var(--turn));position:absolute;inset:0}.sh-knob-dot:before{content:"";aspect-ratio:1;background:#ffd166;border-radius:50%;width:12%;position:absolute;top:8%;left:50%;transform:translate(-50%);box-shadow:0 0 8px #ffb347}.sh-ring-arc{background:conic-gradient(from -135deg, #ff96328c var(--amount), transparent 0);pointer-events:none;border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 60%,#000 61% 70%,#0000 71%);mask:radial-gradient(circle,#0000 60%,#000 61% 70%,#0000 71%)}.sh-knob.is-ring .sh-knob-dot:before{top:31%}.sh-screen{pointer-events:none;border-radius:6px}.sh-led{pointer-events:none;background:0 0;transition:box-shadow .2s,background .2s}.sh-led.is-on{background:radial-gradient(circle,#fff3c4,#ffa53a 60%,#0000 75%);box-shadow:0 0 14px 4px #ffa53acc}.classic-host{width:275px;height:406px;margin:.6rem auto 0;position:relative}.classic .muted{margin-top:0}.skin-row{flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.6rem;display:flex}.skin-pick{flex:14rem;align-items:center;gap:.5rem;font-weight:600;display:flex}.skin-pick select{border:2px solid var(--line);background:var(--bg-deep);min-height:2.75rem;color:var(--text);font:inherit;border-radius:10px;flex:1;padding:.4rem .8rem}.skin-museum a{color:var(--teal-lit);text-underline-offset:3px}.site-footer{text-align:center;color:var(--muted);border-top:1px solid var(--line);padding:1.5rem clamp(1rem,3vw,2rem) 2.5rem}.site-footer p{margin:.3rem 0}.drop-zone{z-index:50;pointer-events:none;border:4px dashed var(--gold-lit);background:#07060abf;place-items:center;display:grid;position:fixed;inset:0}.drop-zone[hidden]{display:none}.drop-zone p{font-family:var(--font-display);color:var(--gold-lit);font-size:clamp(1.5rem,4vw,2.5rem)}.notice{border:2px solid var(--crimson-lit);background:var(--panel);border-radius:10px;margin:1rem;padding:1rem}.about{border:1px solid var(--gold);border-radius:var(--radius);background:var(--panel);max-width:min(40rem,100vw - 2rem);max-height:calc(100vh - 2rem);color:var(--text);padding:1.5rem 1.75rem;box-shadow:0 20px 80px #0009}.about::backdrop{background:#07060acc}.about h2{font-family:var(--font-display);color:var(--gold-lit);margin-top:0;font-size:1.8rem}.about h3{font-family:var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--teal-lit);font-size:.85rem}.about a{color:var(--teal-lit);text-underline-offset:3px}.credits li+li{margin-top:.5rem}.about-actions{text-align:right;margin-top:1.25rem}@media (prefers-reduced-motion:reduce){*{transition:none!important}}