:root{--ink: #1a2420;--paper: #e8e0d0;--mist: #c5d0c8;--copper: #c45c26;--teal: #2a6f6a;--wine: #8b3a4a;--slate: #3d5a80;--line: rgba(26, 36, 32, .14);--panel: rgba(232, 224, 208, .78);--panel-solid: #ddd4c2;--glow-soft: rgba(42, 111, 106, .18);--font-display: "Syne", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--ink);font-family:var(--font-mono);font-size:13px;background:#0f1614}body{overflow-x:hidden}.atmosphere{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 90% 60% at 10% -10%,rgba(196,92,38,.28),transparent 55%),radial-gradient(ellipse 70% 50% at 95% 20%,rgba(42,111,106,.35),transparent 50%),radial-gradient(ellipse 50% 40% at 50% 100%,rgba(61,90,128,.25),transparent 55%),linear-gradient(165deg,#1c2a26,#121a18 45%,#0c1210)}.atmosphere:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}#app{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:1.5rem 1.25rem 3rem}.hero{display:grid;gap:.75rem;margin-bottom:1.75rem;animation:rise .9s cubic-bezier(.22,1,.36,1) both}.brand{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,7vw,4.4rem);letter-spacing:-.04em;line-height:.92;color:var(--paper);margin:0}.brand span{display:block;color:var(--copper)}.tagline{max-width:36rem;margin:0;color:var(--mist);font-size:.85rem;line-height:1.55;letter-spacing:.01em}.transport{display:flex;flex-wrap:wrap;align-items:end;gap:1rem 1.5rem;margin-top:.5rem;padding:1rem 1.1rem;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);animation:rise 1s .1s cubic-bezier(.22,1,.36,1) both}.btn{font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;border:none;cursor:pointer;padding:.85rem 1.4rem;background:var(--ink);color:var(--paper);transition:transform .15s ease,background .2s ease}.btn:hover{transform:translateY(-1px)}.btn.playing{background:var(--copper);color:#1a120c;animation:pulse-btn 1.2s ease-in-out infinite}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}.control{display:flex;flex-direction:column;gap:.35rem;min-width:7rem}.control label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}.control input[type=range]{width:100%;accent-color:var(--teal)}.control select,.control input[type=number]{font-family:var(--font-mono);font-size:.8rem;padding:.35rem .4rem;border:1px solid var(--line);background:#ffffff59;color:var(--ink)}.value{font-variant-numeric:tabular-nums;font-size:.75rem}.export-panel{margin-top:1rem;padding:1rem 1.1rem;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);animation:rise 1s .15s cubic-bezier(.22,1,.36,1) both}.export-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin:0 0 .35rem}.export-copy{margin:0 0 .85rem;max-width:46rem;color:#1a2420bf;font-size:.75rem;line-height:1.5}.export-copy code{font-size:.7rem;background:#1a242014;padding:.05rem .25rem}.export-controls{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem 1rem}.export-status{font-size:.72rem;opacity:.75;min-height:1em;align-self:center}.btn:disabled{opacity:.45;cursor:wait;transform:none}.voices{display:grid;gap:1rem;margin-top:1.25rem}@media(min-width:960px){.voices{grid-template-columns:1fr 1fr}}.voice{--accent: var(--copper);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-left:4px solid var(--accent);padding:1rem 1rem 1.1rem;animation:rise .85s cubic-bezier(.22,1,.36,1) both}.voice:nth-child(1){--accent: #c45c26;animation-delay:.12s}.voice:nth-child(2){--accent: #2a6f6a;animation-delay:.18s}.voice:nth-child(3){--accent: #8b3a4a;animation-delay:.24s}.voice:nth-child(4){--accent: #3d5a80;animation-delay:.3s}.voice-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.85rem}.voice-title{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin:0;display:flex;align-items:center;gap:.55rem}.activity{width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);opacity:.25;transition:opacity .08s linear,transform .08s linear}.activity.on{opacity:1;transform:scale(1.35);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent)}.toggle{display:flex;align-items:center;gap:.4rem;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle input{accent-color:var(--accent)}.section-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;opacity:.55;margin:.85rem 0 .45rem;padding-top:.55rem;border-top:1px solid var(--line)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.65rem .85rem}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.65rem .75rem}.intervals{display:flex;flex-wrap:wrap;gap:.35rem}.chip{font-size:.68rem;padding:.28rem .45rem;border:1px solid var(--line);background:#fff3;cursor:pointer;transition:background .15s ease,color .15s ease}.chip.on{background:var(--accent);color:#fff;border-color:transparent}.step-strip{display:grid;grid-template-columns:repeat(16,1fr);gap:2px;margin-top:.75rem;height:1.1rem}.step{background:#1a24201f;transition:background .05s linear}.step.lit{background:var(--accent)}.step.playhead{outline:1px solid var(--ink);outline-offset:-1px}.hint{margin-top:1.5rem;color:var(--mist);font-size:.72rem;line-height:1.5;max-width:42rem;opacity:.85;animation:rise 1.1s .2s cubic-bezier(.22,1,.36,1) both}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes pulse-btn{0%,to{filter:brightness(1)}50%{filter:brightness(1.08)}}@media(max-width:640px){.grid-3{grid-template-columns:1fr 1fr}.transport{flex-direction:column;align-items:stretch}.btn{width:100%}}