:root{--bg:#0a0e16;--bg-deep:#05070d;--text:#e8eef8;--muted:#8494ad;--muted-dim:#4a556c;--accent:#c8daf0;--accent-bright:#e8f0fc;--border:#c8dcf529;--font-display:"Bebas Neue", "Arial Narrow", Impact, sans-serif;--font-body:"DM Sans", "Segoe UI", sans-serif;font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text);background-color:var(--bg)}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(ellipse 90% 70% at 50% -10%, #121a2e 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 80% 90%, #0c1220 0%, transparent 50%), linear-gradient(180deg, #0c1018 0%, var(--bg-deep) 100%);min-width:320px}button{-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.beat-visual{pointer-events:none;z-index:0;transition:right .28s;position:absolute;inset:0;overflow:hidden}@media (width>=900px){.app.is-sidebar-open .beat-visual{right:calc(var(--sidebar-width) + 1.5rem)}}.beat-visual__glow{opacity:.55;background:radial-gradient(55% 45% at 50% 42%,#c8daf02e 0%,#c8daf00d 35%,#0000 70%),radial-gradient(80% 60% at 50% 100%,#05070de6 0%,#0000 55%);transition:opacity .4s;position:absolute;inset:-20%}.beat-visual--playing .beat-visual__glow{opacity:1}.beat-visual__ambient{opacity:0;filter:blur(2px);background:radial-gradient(70% 55%,#c8daf024 0%,#c8daf00f 38%,#0000 72%);width:min(90vmin,640px);height:min(48vmin,340px);transition:opacity .4s;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.beat-visual--playing .beat-visual__ambient{opacity:1}.beat-visual__bloom{opacity:0;will-change:opacity;filter:blur(1.5px);background:radial-gradient(65% 50%,#e8f0fc6b 0%,#c8daf02e 32%,#c8daf00d 58%,#0000 78%);width:min(90vmin,640px);height:min(48vmin,340px);position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.beat-visual__flash{opacity:0;will-change:opacity;background:radial-gradient(48% 36% at 50% 38%,#f2f6fc47 0%,#c8daf014 40%,#0000 68%);position:absolute;inset:0}.beat-visual__grain{opacity:.07;mix-blend-mode:overlay;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");background-size:180px 180px;position:absolute;inset:0}.bpm-control{justify-content:center;align-items:center;gap:1.25rem;display:flex}.bpm-control__step{border:1px solid var(--border);width:3.25rem;height:3.25rem;color:var(--text);font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;font-size:1.75rem;line-height:1;transition:background .15s,border-color .15s,color .15s}.bpm-control__step:hover{border-color:var(--accent);color:var(--accent);background:#c8daf014}.bpm-control__step:active{background:#c8daf029}.bpm-control__display{flex-direction:column;flex:none;align-items:center;min-width:7.5rem;display:flex}.bpm-control__value{box-sizing:content-box;width:3.35ch;min-width:0;font-family:var(--font-display);letter-spacing:.04em;color:var(--text);font-variant-numeric:tabular-nums;text-align:center;caret-color:var(--accent);cursor:text;background:0 0;border:none;border-radius:0;margin:0;padding:0;font-size:clamp(4.5rem,16vw,7.5rem);line-height:.9}.bpm-control__value:focus{color:var(--accent-bright);outline:none}.bpm-control__value:focus-visible{box-shadow:inset 0 -2px 0 var(--accent)}.bpm-control__unit{font-family:var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:.35rem;font-size:.75rem;font-weight:600}.practice{z-index:1;flex-direction:column;gap:1rem;width:100%;display:flex;position:relative}.practice__row{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.75rem;display:flex}.practice__row--sliders{gap:1.25rem}.practice__row--ramp{gap:.65rem}.practice__row--drone{gap:.55rem}.practice__notes{flex-wrap:wrap;flex:1;gap:.3rem;display:flex}.practice__chip--note{min-width:2.15rem;height:2.1rem;padding:0 .4rem;font-size:.75rem}.practice__octave{text-align:center;min-width:2.5rem;font-family:var(--font-body);letter-spacing:.04em;color:var(--accent);font-size:.9rem;font-weight:600}.practice__label{font-family:var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);min-width:3.25rem;font-size:.65rem;font-weight:600}.practice__segment{gap:.35rem;display:inline-flex}.practice__chip{border:1px solid var(--border);min-width:2.75rem;height:2.35rem;color:var(--text);font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:999px;padding:0 .7rem;font-size:.85rem;font-weight:600;transition:border-color .15s,background .15s,color .15s}.practice__chip.is-active{border-color:var(--accent);color:var(--accent);background:#c8daf01f}.practice__chip:disabled{opacity:.55;cursor:default}.practice__chip:hover:not(:disabled){border-color:var(--accent)}.practice__slider{flex:100%;align-items:center;gap:.55rem;max-width:none;display:flex}.practice__slider input[type=range]{accent-color:var(--accent);cursor:pointer;flex:1;height:.35rem}.practice__slider input[type=range]:disabled{opacity:.35;cursor:not-allowed}.practice__check{font-family:var(--font-body);letter-spacing:.04em;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;font-size:.8rem;font-weight:500;display:inline-flex}.practice__check input{accent-color:var(--accent);cursor:pointer;width:1rem;height:1rem}.practice__num{align-items:center;gap:.35rem;display:inline-flex}.practice__num input{border:1px solid var(--border);width:3.25rem;height:2.1rem;color:var(--text);font-family:var(--font-body);text-align:center;background:#c8dcf50a;border-radius:.4rem;font-size:.85rem;font-weight:600}.practice__num input:disabled{opacity:.35}.practice__suffix{font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-dim);font-size:.7rem;font-weight:600}.tap-tempo{border:1px solid var(--border);min-width:5.5rem;height:3.25rem;color:var(--text);font-family:var(--font-body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:0 0;border-radius:999px;padding:0 1.25rem;font-size:.85rem;font-weight:600;transition:border-color .15s,color .15s,background .15s}.tap-tempo:hover{border-color:var(--accent);color:var(--accent);background:#c8daf014}.tap-tempo:active{background:#c8daf02e}.transport{background:var(--accent);min-width:9.5rem;height:3.25rem;color:var(--bg-deep);font-family:var(--font-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:none;border-radius:999px;padding:0 1.75rem;font-size:.95rem;font-weight:700;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 8px 28px #c8daf047}.transport:hover{background:var(--accent-bright);transform:translateY(-1px)}.transport:active{transform:translateY(0)}.transport--playing{color:var(--accent);border:1px solid var(--accent);box-shadow:none;background:0 0}.transport--playing:hover{background:#c8daf01a}.app{--sidebar-width:min(22rem, 100vw);grid-template-rows:1fr;place-items:stretch stretch;min-height:100dvh;display:grid;position:relative;overflow:hidden auto}.app__main{z-index:1;grid-template-rows:auto auto auto auto;place-items:center stretch;min-height:100dvh;padding:clamp(1.25rem,3.5vw,2.5rem) clamp(1.25rem,4vw,2.5rem) clamp(1rem,2.5vw,1.75rem);transition:padding-right .28s;display:grid;position:relative}.app.is-sidebar-open .app__main{padding-right:calc(var(--sidebar-width) + 1.5rem)}.app__brand{z-index:1;text-align:center;position:relative}.app__logo{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin:0;font-size:clamp(2.5rem,8vw,4.25rem);font-weight:400;line-height:.95}.app__tagline{font-family:var(--font-body);letter-spacing:.08em;color:var(--muted);margin:.55rem 0 0;font-size:.85rem;font-weight:500}.app__stage{z-index:1;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:1.25rem 0 1.5rem;display:flex;position:relative}.app__controls{z-index:1;flex-wrap:wrap;justify-content:center;align-items:center;gap:.85rem;margin-bottom:1rem;display:flex;position:relative}.app__hint{z-index:1;text-align:center;font-family:var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dim);max-width:36rem;margin:0;font-size:.65rem;font-weight:500;line-height:1.5;position:relative}.app__secondary{z-index:1;flex-direction:column;justify-self:center;align-items:center;gap:.65rem;display:flex;position:relative}.app__sidebar-toggle{z-index:4;writing-mode:vertical-rl;transform-origin:50%;border:1px solid var(--border);min-height:7.5rem;color:var(--muted);font-family:var(--font-body);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#080c14b8;border-right:none;border-radius:.65rem 0 0 .65rem;justify-content:center;align-items:center;padding:.85rem .55rem;font-size:.7rem;font-weight:600;transition:color .15s,border-color .15s,opacity .2s,visibility .2s;display:inline-flex;position:fixed;top:50%;right:0;transform:translateY(-50%)}.app__sidebar-toggle:hover{color:var(--accent);border-color:#c8daf059}.app__sidebar-toggle.is-open{opacity:0;visibility:hidden;pointer-events:none}.app__sidebar-backdrop{z-index:5;cursor:pointer;background:#04060a73;border:none;padding:0;animation:.22s ease-out backdrop-in;position:fixed;inset:0}.app__sidebar{z-index:6;width:var(--sidebar-width);border-left:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:none;background:linear-gradient(#0e1420f0 0%,#080b12f7 100%);flex-direction:column;height:100dvh;transition:transform .28s;display:flex;position:fixed;top:0;right:0;transform:translate(100%)}.app__sidebar.is-open{pointer-events:auto;transform:translate(0)}.app__sidebar-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.25rem .85rem;display:flex}.app__sidebar-title{font-family:var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.7rem;font-weight:600}.app__sidebar-close{width:2rem;height:2rem;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:.4rem;justify-content:center;align-items:center;font-size:1.35rem;line-height:1;transition:color .15s,border-color .15s;display:inline-flex}.app__sidebar-close:hover{color:var(--accent);border-color:var(--border)}.app__sidebar-body{flex:1;padding:1.15rem 1.25rem 1.5rem;overflow-y:auto}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}@media (width>=900px){.app__sidebar-backdrop{display:none}}@media (width<=899px){.app.is-sidebar-open .app__main{padding-right:clamp(1.25rem,4vw,2.5rem)}}@media (width<=480px){.app__controls{width:100%}.app__controls .transport,.app__controls .tap-tempo{flex:auto}.app__hint-kbd{display:none}}