:root{--bg-deep: #070b14;--bg-mid: #0f172a;--bg-glow: #132238;--ink: #f8fafc;--ink-muted: #94a3b8;--accent: #5eead4;--on-pitch: #4ade80;--off-pitch: #fb923c;--danger: #f87171;--panel: rgba(15, 23, 42, .92);--panel-border: rgba(148, 163, 184, .22);--font-display: "Fraunces", Georgia, serif;--font-body: "Manrope", system-ui, sans-serif;--control-h: 48px;--radius: 14px}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);color:var(--ink);background:var(--bg-deep);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.app-shell{min-height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 70% -10%,rgba(45,212,191,.12),transparent 55%),radial-gradient(900px 500px at 10% 100%,rgba(251,146,60,.08),transparent 50%),linear-gradient(165deg,var(--bg-mid),var(--bg-deep) 55%,#05080f)}.app-shell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(148,163,184,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.04) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);pointer-events:none;animation:drift 28s linear infinite}@media (prefers-reduced-motion: reduce){.app-shell:before{animation:none}}@keyframes drift{0%{transform:translateZ(0)}to{transform:translate3d(-48px,-48px,0)}}.practice-stage{position:relative;z-index:1;flex:1;display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh;padding:1rem 1.25rem 1.25rem;gap:.75rem}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.brand{display:flex;flex-direction:column;gap:.15rem}.brand__name{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:.95;margin:0;background:linear-gradient(120deg,#f8fafc 20%,#5eead4 80%);-webkit-background-clip:text;background-clip:text;color:transparent}.brand__tag{margin:0;color:var(--ink-muted);font-size:.95rem}.canvas-wrap{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--panel-border);box-shadow:inset 0 0 80px #00000059;background:#0206178c;min-height:52vh}.pitch-canvas{width:100%;height:100%;display:block;min-height:52vh;touch-action:none}.pitch-canvas--review{cursor:grab}.pitch-canvas--review:active{cursor:grabbing}.session-chip{position:absolute;top:1rem;left:1rem;padding:.35rem .75rem;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#020617b8;border:1px solid var(--panel-border);color:var(--accent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.save-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:#020617a6;display:flex;align-items:center;justify-content:center;padding:1rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.save-dialog{width:min(420px,100%);background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.85rem;box-shadow:0 24px 60px #00000073}.save-dialog h2{font-family:var(--font-display);margin:0;font-size:1.45rem}.save-dialog p{margin:0;color:var(--ink-muted);font-size:.95rem;line-height:1.45}.save-dialog__actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.35rem}.save-dialog__busy{color:var(--accent)!important;font-weight:600}.hud{position:absolute;top:1rem;right:1rem;display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;padding:.75rem 1rem;border-radius:12px;background:#020617b8;border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);min-width:9rem}.hud__note{font-family:var(--font-display);font-size:1.75rem;font-weight:700;line-height:1}.hud__status{font-size:.85rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.hud__status--on{color:var(--on-pitch)}.hud__status--off{color:var(--off-pitch)}.hud__status--none{color:var(--ink-muted)}.hud__cents{font-size:.8rem;color:var(--ink-muted)}.view-hint{position:absolute;left:50%;transform:translate(-50%);font-size:1.5rem;color:var(--accent);opacity:.85;pointer-events:none}.view-hint--above{top:.5rem}.view-hint--below{bottom:.5rem}.bottom-bar,.status-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}.status-bar{justify-content:stretch}.controls{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;margin-left:auto}.btn{height:var(--control-h);padding:0 1.25rem;border-radius:999px;border:1px solid transparent;cursor:pointer;font-weight:600;transition:transform .15s ease,background .15s ease,border-color .15s ease}.btn:active{transform:scale(.98)}.btn--primary{background:linear-gradient(135deg,#2dd4bf,#14b8a6);color:#042f2e}.btn--primary:disabled{opacity:.45;cursor:not-allowed}.btn--ghost{background:transparent;border-color:var(--panel-border);color:var(--ink)}.btn--danger{background:#f8717126;border-color:#f8717173;color:#fecaca}.error-banner{width:100%;padding:.85rem 1rem;border-radius:var(--radius);background:#7f1d1d73;border:1px solid rgba(248,113,113,.4);color:#fecaca;font-size:.95rem}.paused-banner{width:100%;padding:.75rem 1rem;border-radius:var(--radius);background:#1e293bd9;border:1px solid var(--panel-border);color:var(--ink-muted)}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#0206178c;display:flex;justify-content:flex-end;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.settings-panel{width:min(420px,100%);height:100%;background:var(--panel);border-left:1px solid var(--panel-border);padding:1.25rem 1.35rem 2rem;overflow:auto;display:flex;flex-direction:column;gap:1rem}.settings-panel h2{font-family:var(--font-display);margin:0;font-size:1.6rem}.settings-panel p{margin:0;color:var(--ink-muted);font-size:.9rem}.field{display:flex;flex-direction:column;gap:.35rem}.field label{font-size:.85rem;font-weight:600;color:var(--ink-muted)}.field input[type=range]{width:100%}.field__value{font-variant-numeric:tabular-nums;color:var(--accent);font-size:.9rem}.field__hint{font-size:.75rem;color:var(--ink-muted)}.settings-actions{display:flex;gap:.6rem;margin-top:auto}@media (max-width: 640px){.practice-stage{padding:.75rem}.top-bar{align-items:stretch}.controls{width:100%;margin-left:0}.btn{flex:1;min-height:52px}.hud{top:.6rem;right:.6rem;min-width:7.5rem}}