.floating-lines-container{width:100%;height:100%;position:relative;overflow:hidden}:root{--bg: #0f1115;--bg-soft: #171a21;--surface: #1d2129;--border: #2a2f3a;--text: #e8eaed;--text-dim: #9aa0ac;--accent: #ffb347;--accent-2: #6cc4ff;--good: #5ad17a;--bad: #ff6b6b;--radius: 14px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 600px at 50% -10%,#1a1f2b 0%,var(--bg) 60%);color:var(--text);-webkit-font-smoothing:antialiased}.app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}.hero{position:relative;width:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center}.hero-bg{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:0;opacity:.65;-webkit-mask-image:radial-gradient(150% 120% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(150% 120% at 50% 50%,#000 55%,transparent 100%)}.hero-vignette{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:radial-gradient(60% 50% at 50% 45%,rgba(255,179,71,.08),transparent 70%),radial-gradient(80% 80% at 50% 50%,transparent 40%,rgba(15,17,21,.75) 100%)}.hero-stage{position:relative;z-index:2;width:100%;max-width:720px;padding:24px;transform-style:preserve-3d;--rx: 0deg;--ry: 0deg}.floaters{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;transform-style:preserve-3d}.floater{position:absolute;transform-style:preserve-3d;transition:transform .25s ease-out}.floater-card{padding:10px;border-radius:16px;background:linear-gradient(160deg,#282e3a8c,#14182059);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 18px 50px #00000073;opacity:.85;animation:floaty 7s ease-in-out infinite}@keyframes floaty{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}.hero-card{position:relative;z-index:3;text-align:center;padding:44px 40px 36px;border-radius:26px;background:linear-gradient(165deg,#212631b8,#12151c8c);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 30px 80px #0000008c,inset 0 1px #ffffff1f;animation:card-in .8s ease both}@keyframes card-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:#00000040;margin-bottom:22px;animation:rise .7s ease .05s both}.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good);animation:pulse-dot 1.8s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.35}}.hero-title{margin:0 0 16px;font-size:clamp(2.6rem,7vw,4.6rem);font-weight:900;letter-spacing:-2px;line-height:1}.hero-title-line{display:inline-block;animation:rise .7s ease .12s both}.shine{background:linear-gradient(100deg,#ffb347,#ff7eb6 30%,#6cc4ff,#ffb347 80%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .7s ease .12s both,shine-move 5s linear infinite}@keyframes shine-move{to{background-position:250% center}}.hero-tagline{color:var(--text-dim);font-size:clamp(1rem,2.4vw,1.2rem);line-height:1.5;max-width:460px;margin:0 auto 30px;animation:rise .7s ease .2s both}.accent-text{color:var(--accent);font-weight:600}.hero-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;animation:rise .7s ease .28s both}.hero-input-wrap{position:relative;flex:1 1 300px;display:flex;align-items:center}.hero-input-icon{position:absolute;left:16px;color:var(--accent-2);font-size:.85rem;pointer-events:none}.hero-input{width:100%;padding:15px 16px 15px 38px;font-size:1rem;background:#0a0c10a6;border:1px solid var(--border);border-radius:14px;color:var(--text);outline:none;transition:border-color .2s ease,box-shadow .2s ease}.hero-input::placeholder{color:#6b7280}.hero-input:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px #6cc4ff2e}.hero-cta{position:relative;display:inline-flex;align-items:center;gap:8px;padding:15px 28px;font-size:1rem;font-weight:700;color:#1a1205;border:none;border-radius:14px;cursor:pointer;background:linear-gradient(110deg,#ffb347,#ffcf85);box-shadow:0 8px 24px #ffb34759;overflow:hidden;transition:transform .1s ease,box-shadow .2s ease,filter .2s ease}.hero-cta:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent);transform:translate(-130%);animation:cta-sheen 3.2s ease-in-out infinite}@keyframes cta-sheen{0%,60%{transform:translate(-130%)}to{transform:translate(130%)}}.hero-cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px #ffb34780;filter:brightness(1.04)}.hero-cta:active:not(:disabled){transform:translateY(0)}.hero-cta:disabled{opacity:.55;cursor:not-allowed}.hero-cta-arrow{transition:transform .2s ease}.hero-cta:hover:not(:disabled) .hero-cta-arrow{transform:translate(4px)}.hero-features{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px;animation:rise .7s ease .36s both}.hero-feature{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text-dim);padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:#0003}.hero-feature-icon{font-size:.95rem}.hero-disclaimer{color:var(--text-dim);font-size:.75rem;margin:22px 0 0;opacity:.7;animation:rise .7s ease .44s both}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.error-msg{color:var(--bad);margin-top:16px}.disclaimer{color:var(--text-dim);font-size:.8rem;margin-top:28px}@media (max-width: 560px){.floaters{display:none}.hero-card{padding:34px 22px 28px}}@media (prefers-reduced-motion: reduce){.floater-card,.hero-badge-dot,.shine,.hero-cta:after{animation:none}.hero-card,.hero-title-line,.hero-tagline,.hero-form,.hero-features,.hero-disclaimer,.hero-badge{animation:none}}.processing{position:relative;text-align:center;max-width:480px;width:100%}.processing h2{margin-bottom:24px}.processing-bg{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:0;opacity:.5;pointer-events:none;-webkit-mask-image:radial-gradient(140% 110% at 50% 45%,#000 60%,transparent 100%);mask-image:radial-gradient(140% 110% at 50% 45%,#000 60%,transparent 100%)}.processing-content{position:relative;z-index:1}.eq{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:44px;margin-bottom:18px}.eq-bar{width:6px;border-radius:3px;background:linear-gradient(to top,var(--accent),var(--accent-2));animation:eq-bounce 1s ease-in-out infinite}@keyframes eq-bounce{0%,to{height:8px;opacity:.55}50%{height:40px;opacity:1}}.stage-list{display:flex;flex-direction:column;gap:16px;text-align:left}.stage{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;color:var(--text-dim);transition:color .3s ease}.stage.active{color:var(--text)}.stage.done{color:var(--good)}.stage-icon{font-size:1.1rem;text-align:center;display:flex;align-items:center;justify-content:center}.stage-text{display:flex;flex-direction:column;gap:2px}.stage-label{line-height:1.2}.stage-sub{font-size:.78rem;color:var(--text-dim)}.stage-spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.stage-bar{grid-column:2;height:6px;background:var(--surface);border-radius:999px;overflow:hidden;margin-top:8px;position:relative}.stage-bar-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease;position:relative;overflow:hidden}.stage-bar-fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translate(-100%);animation:shimmer 1.4s ease-in-out infinite}@keyframes shimmer{to{transform:translate(100%)}}.warmup{margin-top:30px;padding-top:24px;border-top:1px solid var(--border)}.warmup-eyebrow{display:block;font-size:.75rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px}.warmup-card{display:flex;align-items:center;justify-content:center;gap:22px;animation:warmup-in .5s ease}@keyframes warmup-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}.warmup-meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.warmup-chord{font-size:2.6rem;font-weight:800;color:var(--accent);line-height:1}.warmup-instr{font-size:.85rem;color:var(--text-dim)}.warmup-tip{margin:18px auto 0;max-width:400px;font-size:.88rem;line-height:1.5;color:var(--text-dim);min-height:2.6em;animation:warmup-in .5s ease}@media (prefers-reduced-motion: reduce){.eq-bar,.stage-spinner,.stage-bar-fill:after,.warmup-card,.warmup-tip{animation:none}.eq-bar{height:24px}}.player-page{position:relative;width:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center}.player{width:100%;max-width:760px;text-align:left;padding:26px 28px 22px;animation:card-in .6s ease both}.player-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}.player-title{font-size:1.15rem;font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.link-btn{display:inline-flex;align-items:center;gap:4px;background:#00000040;border:1px solid var(--border);color:var(--accent-2);cursor:pointer;font-size:.82rem;padding:7px 14px;border-radius:999px;white-space:nowrap;transition:border-color .2s ease,background .2s ease}.link-btn:hover{border-color:var(--accent-2);background:#6cc4ff1f}.chord-display{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:radial-gradient(120% 140% at 0% 0%,rgba(255,179,71,.08),transparent 55%),linear-gradient(160deg,#1c212bb3,#10131a80);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:30px;margin:0 0 18px;box-shadow:inset 0 1px #ffffff0f}.chord-current{display:flex;flex-direction:column;align-items:center}.chord-name{font-size:5.2rem;font-weight:900;line-height:1;letter-spacing:-2px;background:linear-gradient(100deg,#ffb347,#ff7eb6 35%,#6cc4ff,#ffb347 85%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine-move 5s linear infinite}.chord-confidence{color:var(--text-dim);font-size:.8rem;margin-top:10px}.chord-next{display:flex;flex-direction:column;align-items:center;min-width:140px;padding-left:24px;border-left:1px solid var(--border)}.chord-next-label{color:var(--text-dim);font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px}.chord-next-eta{color:var(--accent-2);font-variant-numeric:tabular-nums}.chord-next-name{font-size:2.1rem;font-weight:800;margin:8px 0;color:var(--text)}.chord-next-name.dim{color:var(--text-dim)}.chord-diagram{color:var(--text)}.chord-diagram.empty,.chord-diagram.fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--border);border-radius:10px;color:var(--text-dim)}.chord-diagram-name{font-size:1.6rem;font-weight:700;color:var(--text)}.chord-diagram-hint{font-size:.7rem}.diagram-line{stroke:var(--text-dim);stroke-width:1.4}.diagram-dot{fill:var(--accent)}.diagram-finger{fill:#1a1205;font-size:11px;text-anchor:middle;font-weight:700}.diagram-open{fill:none;stroke:var(--text);stroke-width:1.5}.diagram-mute{fill:var(--text-dim);font-size:13px;text-anchor:middle}.diagram-fretlabel{fill:var(--text-dim);font-size:12px;text-anchor:end}.seekbar{display:flex;align-items:center;gap:12px;margin:0 0 16px}.seek-time{color:var(--text-dim);font-size:.8rem;width:40px;text-align:center;font-variant-numeric:tabular-nums}.seek-track{position:relative;flex:1;height:10px;background:#0a0c10b3;border:1px solid var(--border);border-radius:999px;cursor:pointer}.seek-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#ffb347,#ff7eb6,#6cc4ff);border-radius:999px}.seek-thumb{position:absolute;top:50%;width:16px;height:16px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 4px #ffffff1f,0 2px 8px #00000080}.seek-marker{position:absolute;top:0;bottom:0;width:2px;background:#ffb34773;transform:translate(-1px)}.controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:4px}.play-btn{width:60px;height:60px;border-radius:50%;border:none;background:linear-gradient(135deg,#ffb347,#ffcf85);color:#1a1205;font-size:1.5rem;cursor:pointer;box-shadow:0 8px 24px #ffb34766;transition:transform .12s ease,box-shadow .2s ease,filter .2s ease}.play-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px #ffb3478c;filter:brightness(1.05)}.play-btn:active{transform:translateY(0)}.speed-group{display:flex;gap:6px}.speed-btn{padding:9px 13px;background:#00000040;border:1px solid var(--border);border-radius:10px;color:var(--text-dim);cursor:pointer;font-size:.85rem;transition:border-color .15s ease,color .15s ease,background .15s ease}.speed-btn:hover{color:var(--text);border-color:var(--accent-2)}.speed-btn.active{background:linear-gradient(135deg,#6cc4ff,#9ad6ff);color:#04141f;border-color:transparent;font-weight:700;box-shadow:0 4px 14px #6cc4ff59}@media (max-width: 560px){.chord-display{grid-template-columns:1fr}.chord-next{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:16px}.chord-name{font-size:3.6rem}}