:root{--bg-0: #0a0f1f;--bg-1: #111a35;--bg-spot-1: #1d2a55;--bg-spot-2: #24206a;--card: rgba(18, 27, 54, .75);--text: #e8efff;--muted: #8ea6db;--neon-blue: #43d0ff;--neon-purple: #7a6bff;--ok: #2ff596;--danger: #ff5f7d;--control-bg: rgba(13, 21, 45, .82);--control-border: rgba(120, 166, 255, .35);--soft-bg: rgba(255, 255, 255, .05);--soft-bg-2: rgba(255, 255, 255, .03);--chip-bg: rgba(67, 208, 255, .12);--surface-bg: rgba(10, 17, 36, .98);--surface-border: rgba(120, 166, 255, .3);--surface-shadow: 0 10px 28px rgba(0, 0, 0, .4);--overlay-bg: rgba(4, 8, 18, .65);--bubble-bg: rgba(18, 33, 68, .99);--bubble-border: rgba(140, 205, 255, .72);--theme-panel-bg: rgba(255, 255, 255, .02);--theme-panel-border: rgba(120, 166, 255, .24);--plan-column-bg: rgba(255, 255, 255, .03);--plan-column-border: rgba(120, 166, 255, .25);--plan-premium-border: rgba(67, 208, 255, .5);--plan-premium-inset: 0 0 0 1px rgba(67, 208, 255, .2) inset;--border-soft: rgba(120, 166, 255, .25);--border-soft-2: rgba(120, 166, 255, .2);--border-strong: rgba(120, 166, 255, .55);--border-accent: rgba(67, 208, 255, .65);--border-danger: rgba(255, 95, 125, .75);--border-ok: rgba(47, 245, 150, .45);--pane-border: rgba(122, 107, 255, .28);--inset-accent: inset 0 0 0 1px rgba(67, 208, 255, .4);--avatar-bg: rgba(67, 208, 255, .2);--avatar-border: rgba(67, 208, 255, .5);--accent-primary: var(--neon-blue);--accent-secondary: var(--neon-purple);--accent-contrast: var(--bg-0);--focus-ring: var(--neon-blue);--success-bg: color-mix(in srgb, var(--ok) 10%, transparent);--danger-bg: color-mix(in srgb, var(--danger) 10%, transparent);--interactive-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 40%, transparent), 0 0 18px color-mix(in srgb, var(--accent-primary) 25%, transparent);--progress-glow: 0 0 16px color-mix(in srgb, var(--accent-primary) 60%, transparent);--placed-token-text: var(--text);--placed-token-bg: color-mix(in srgb, var(--accent-primary) 12%, transparent);--media-bg: var(--bg-0);--danger-contrast: var(--bg-0)}[data-theme=sunset]{--bg-0: #1f0f16;--bg-1: #3a1f2d;--bg-spot-1: #5d2232;--bg-spot-2: #59244e;--card: rgba(54, 25, 40, .76);--text: #fff2ea;--muted: #d8b7a8;--neon-blue: #ff8a5b;--neon-purple: #ff5fa2;--ok: #6fffb0;--danger: #ff7f8f;--control-bg: rgba(54, 21, 36, .86);--control-border: rgba(255, 160, 132, .42);--soft-bg: rgba(255, 196, 170, .1);--soft-bg-2: rgba(255, 196, 170, .06);--chip-bg: rgba(255, 138, 91, .18);--surface-bg: rgba(50, 20, 34, .97);--surface-border: rgba(255, 160, 132, .42);--surface-shadow: 0 10px 28px rgba(40, 12, 20, .52);--overlay-bg: rgba(38, 10, 21, .62);--bubble-bg: rgba(73, 28, 47, .99);--bubble-border: rgba(255, 187, 156, .72);--theme-panel-bg: rgba(255, 196, 170, .06);--theme-panel-border: rgba(255, 160, 132, .35);--plan-column-bg: rgba(255, 196, 170, .06);--plan-column-border: rgba(255, 160, 132, .35);--plan-premium-border: rgba(255, 95, 162, .52);--plan-premium-inset: 0 0 0 1px rgba(255, 95, 162, .22) inset;--border-soft: rgba(255, 160, 132, .35);--border-soft-2: rgba(255, 160, 132, .3);--border-strong: rgba(255, 160, 132, .5);--border-accent: rgba(255, 95, 162, .62);--border-danger: rgba(255, 127, 143, .78);--border-ok: rgba(111, 255, 176, .48);--pane-border: rgba(255, 95, 162, .34);--inset-accent: inset 0 0 0 1px rgba(255, 95, 162, .38);--avatar-bg: rgba(255, 138, 91, .24);--avatar-border: rgba(255, 160, 132, .56)}[data-theme=forest]{--bg-0: #0d1b16;--bg-1: #152c25;--bg-spot-1: #1e4f3f;--bg-spot-2: #1f604e;--card: rgba(21, 42, 36, .78);--text: #eafff6;--muted: #99c4b3;--neon-blue: #4dd7a7;--neon-purple: #49b98e;--ok: #7bffbf;--danger: #ff7b9b;--control-bg: rgba(18, 45, 37, .86);--control-border: rgba(96, 201, 163, .45);--soft-bg: rgba(127, 230, 188, .1);--soft-bg-2: rgba(127, 230, 188, .06);--chip-bg: rgba(77, 215, 167, .2);--surface-bg: rgba(16, 38, 31, .97);--surface-border: rgba(96, 201, 163, .42);--surface-shadow: 0 10px 28px rgba(8, 24, 19, .52);--overlay-bg: rgba(8, 26, 20, .62);--bubble-bg: rgba(24, 58, 47, .99);--bubble-border: rgba(124, 233, 191, .72);--theme-panel-bg: rgba(127, 230, 188, .06);--theme-panel-border: rgba(96, 201, 163, .35);--plan-column-bg: rgba(127, 230, 188, .06);--plan-column-border: rgba(96, 201, 163, .35);--plan-premium-border: rgba(77, 215, 167, .52);--plan-premium-inset: 0 0 0 1px rgba(77, 215, 167, .22) inset;--border-soft: rgba(96, 201, 163, .35);--border-soft-2: rgba(96, 201, 163, .3);--border-strong: rgba(96, 201, 163, .5);--border-accent: rgba(77, 215, 167, .62);--border-danger: rgba(255, 123, 155, .76);--border-ok: rgba(123, 255, 191, .5);--pane-border: rgba(73, 185, 142, .34);--inset-accent: inset 0 0 0 1px rgba(77, 215, 167, .36);--avatar-bg: rgba(77, 215, 167, .24);--avatar-border: rgba(96, 201, 163, .56)}[data-theme=mono]{--bg-0: #111214;--bg-1: #1b1d22;--bg-spot-1: #2a2f3d;--bg-spot-2: #323845;--card: rgba(30, 32, 38, .82);--text: #f0f3f8;--muted: #a2aab9;--neon-blue: #8fa3c9;--neon-purple: #a8b2c7;--ok: #8ee7b8;--danger: #ff8da1;--control-bg: rgba(28, 30, 36, .88);--control-border: rgba(168, 178, 199, .4);--soft-bg: rgba(200, 209, 226, .08);--soft-bg-2: rgba(200, 209, 226, .05);--chip-bg: rgba(143, 163, 201, .18);--surface-bg: rgba(28, 30, 36, .97);--surface-border: rgba(168, 178, 199, .4);--surface-shadow: 0 10px 28px rgba(8, 10, 14, .55);--overlay-bg: rgba(10, 12, 16, .66);--bubble-bg: rgba(44, 48, 58, .99);--bubble-border: rgba(208, 216, 232, .68);--theme-panel-bg: rgba(200, 209, 226, .05);--theme-panel-border: rgba(168, 178, 199, .32);--plan-column-bg: rgba(200, 209, 226, .05);--plan-column-border: rgba(168, 178, 199, .32);--plan-premium-border: rgba(143, 163, 201, .48);--plan-premium-inset: 0 0 0 1px rgba(143, 163, 201, .2) inset;--border-soft: rgba(168, 178, 199, .3);--border-soft-2: rgba(168, 178, 199, .25);--border-strong: rgba(168, 178, 199, .42);--border-accent: rgba(143, 163, 201, .58);--border-danger: rgba(255, 141, 161, .74);--border-ok: rgba(142, 231, 184, .46);--pane-border: rgba(143, 163, 201, .32);--inset-accent: inset 0 0 0 1px rgba(143, 163, 201, .34);--avatar-bg: rgba(143, 163, 201, .24);--avatar-border: rgba(168, 178, 199, .52)}[data-theme=light]{--bg-0: #f5f7fb;--bg-1: #ffffff;--bg-spot-1: #e8eef8;--bg-spot-2: #eef2fa;--card: rgba(255, 255, 255, .94);--text: #101418;--muted: #4f6277;--neon-blue: #2563eb;--neon-purple: #1d4ed8;--ok: #16a34a;--danger: #dc2626;--control-bg: rgba(255, 255, 255, .95);--control-border: rgba(59, 93, 138, .32);--soft-bg: rgba(15, 23, 42, .06);--soft-bg-2: rgba(15, 23, 42, .04);--chip-bg: rgba(37, 99, 235, .12);--surface-bg: rgba(255, 255, 255, .98);--surface-border: rgba(59, 93, 138, .32);--surface-shadow: 0 10px 28px rgba(22, 38, 61, .18);--overlay-bg: rgba(15, 23, 42, .25);--bubble-bg: rgba(255, 255, 255, 1);--bubble-border: rgba(37, 99, 235, .52);--theme-panel-bg: rgba(15, 23, 42, .03);--theme-panel-border: rgba(59, 93, 138, .28);--plan-column-bg: rgba(15, 23, 42, .03);--plan-column-border: rgba(59, 93, 138, .28);--plan-premium-border: rgba(37, 99, 235, .45);--plan-premium-inset: 0 0 0 1px rgba(37, 99, 235, .18) inset;--border-soft: rgba(59, 93, 138, .26);--border-soft-2: rgba(59, 93, 138, .22);--border-strong: rgba(59, 93, 138, .4);--border-accent: rgba(37, 99, 235, .5);--border-danger: rgba(220, 38, 38, .58);--border-ok: rgba(22, 163, 74, .45);--pane-border: rgba(59, 93, 138, .3);--inset-accent: inset 0 0 0 1px rgba(37, 99, 235, .32);--avatar-bg: rgba(37, 99, 235, .14);--avatar-border: rgba(37, 99, 235, .4)}[data-theme=gray]{--bg-0: #d8dde6;--bg-1: #c7ced9;--bg-spot-1: #cfd6e0;--bg-spot-2: #bfc7d3;--card: rgba(235, 239, 245, .9);--text: #1d232c;--muted: #4f5d6f;--neon-blue: #5b6f8f;--neon-purple: #4f607a;--ok: #2f7a58;--danger: #b14e5a;--control-bg: rgba(242, 245, 250, .95);--control-border: rgba(79, 93, 111, .34);--soft-bg: rgba(29, 35, 44, .08);--soft-bg-2: rgba(29, 35, 44, .05);--chip-bg: rgba(91, 111, 143, .16);--surface-bg: rgba(237, 241, 247, .98);--surface-border: rgba(79, 93, 111, .34);--surface-shadow: 0 10px 28px rgba(43, 52, 64, .2);--overlay-bg: rgba(29, 35, 44, .35);--bubble-bg: rgba(248, 250, 253, 1);--bubble-border: rgba(79, 93, 111, .52);--theme-panel-bg: rgba(29, 35, 44, .04);--theme-panel-border: rgba(79, 93, 111, .28);--plan-column-bg: rgba(29, 35, 44, .04);--plan-column-border: rgba(79, 93, 111, .28);--plan-premium-border: rgba(91, 111, 143, .46);--plan-premium-inset: 0 0 0 1px rgba(91, 111, 143, .2) inset;--border-soft: rgba(79, 93, 111, .27);--border-soft-2: rgba(79, 93, 111, .22);--border-strong: rgba(79, 93, 111, .42);--border-accent: rgba(91, 111, 143, .54);--border-danger: rgba(177, 78, 90, .62);--border-ok: rgba(47, 122, 88, .46);--pane-border: rgba(79, 93, 111, .3);--inset-accent: inset 0 0 0 1px rgba(91, 111, 143, .34);--avatar-bg: rgba(91, 111, 143, .18);--avatar-border: rgba(79, 93, 111, .42)}*{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,Avenir Next,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(circle at 10% 0%,var(--bg-spot-1) 0%,transparent 40%),radial-gradient(circle at 90% 10%,var(--bg-spot-2) 0%,transparent 35%),linear-gradient(160deg,var(--bg-0),var(--bg-1));min-height:100vh}.app-shell{max-width:1200px;margin:0 auto;padding:24px}.site-footer{margin-top:56px;padding:22px 0 4px;border-top:1px solid var(--border-soft-2);color:var(--muted);display:grid;gap:14px}.site-footer-brand{display:grid;gap:4px}.site-footer-brand strong{color:var(--text);font-size:1.05rem}.site-footer-links{display:flex;flex-wrap:wrap;gap:8px;font-size:.88rem}.site-footer-separator{color:var(--muted)}.site-footer a{color:var(--muted);text-decoration:none}.site-footer a:hover,.site-footer a:focus-visible{color:var(--text);text-decoration:underline;text-underline-offset:3px}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay-bg);z-index:80;pointer-events:none}.tutorial-bubble{position:fixed;width:min(280px,calc(100vw - 32px));border-radius:14px;border:1px solid var(--bubble-border);background:var(--bubble-bg);padding:14px;pointer-events:auto}.tutorial-bubble p{margin:0}.tutorial-bubble:before{content:"";position:absolute;width:14px;height:14px;background:var(--bubble-bg);border-left:1px solid var(--bubble-border);border-top:1px solid var(--bubble-border);left:var(--tutorial-arrow-left, 26px)}.tutorial-bubble-top:before{top:-8px;transform:rotate(45deg)}.tutorial-bubble-bottom:before{bottom:-8px;transform:rotate(225deg)}.tutorial-actions{margin-top:10px;display:flex;justify-content:flex-end;gap:8px}.flying-chip{position:fixed;left:var(--from-x);top:var(--from-y);z-index:9999;border:1px solid var(--border-strong);background:var(--chip-bg);color:var(--text);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;pointer-events:none;animation:flyWordToBuilder .38s ease-in-out forwards}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.account-menu{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.account-hints-btn{white-space:nowrap}.account-trigger{display:inline-flex;align-items:center;gap:10px;max-width:320px}.account-avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--avatar-bg);border:1px solid var(--avatar-border);font-weight:700}.account-avatar-image{object-fit:cover;display:inline-block}.account-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-dropdown{position:absolute;right:0;top:calc(100% + 8px);width:min(360px,85vw);padding:10px;border-radius:12px;border:1px solid var(--surface-border);background:var(--surface-bg);box-shadow:var(--surface-shadow);z-index:20;display:grid;gap:8px}.account-dropdown input,.account-dropdown button{width:100%}.auth-provider-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}.theme-switcher{border:1px solid var(--theme-panel-border);border-radius:10px;padding:8px;background:var(--theme-panel-bg)}.theme-switcher>span{display:block;margin-bottom:6px;color:var(--muted);font-size:.82rem}.theme-switcher-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.theme-switcher-buttons button{padding:7px 8px;font-size:.82rem}.theme-switcher-buttons button.active{border-color:var(--border-accent);box-shadow:var(--inset-accent)}.account-note{font-size:.84rem;color:var(--muted)}.account-note.ok{color:var(--ok)}.account-note.error{color:var(--danger)}.danger-zone{display:grid;gap:8px;padding:10px;border:1px solid var(--border-danger);border-radius:10px;background:color-mix(in srgb,var(--danger) 8%,transparent)}.danger-zone-label{color:var(--muted);font-size:.82rem;font-weight:700;text-transform:uppercase}.danger-text-button{color:var(--danger);border-color:var(--border-danger);background:transparent}.danger-text-button:hover:not(:disabled),.danger-text-button:focus-visible:not(:disabled){background:color-mix(in srgb,var(--danger) 12%,transparent)}.delete-confirm-label{display:block;margin:12px 0 6px;color:var(--text);font-size:.9rem;font-weight:700}.danger-action{color:var(--danger);border-color:var(--border-danger);background:transparent}.danger-action:hover:not(:disabled),.danger-action:focus-visible:not(:disabled){background:color-mix(in srgb,var(--danger) 12%,transparent)}.danger-action:active:not(:disabled){color:var(--danger-contrast);background:var(--danger)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay-bg);display:flex;align-items:center;justify-content:center;z-index:50;padding:18px}.modal-card{width:min(420px,100%);border-radius:14px;border:1px solid var(--surface-border);background:var(--surface-bg);padding:14px}.modal-card h3{margin:0 0 10px}.plan-compare-subtitle{margin:0 0 12px;color:var(--muted);font-size:.9rem}.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.plan-column{border:1px solid var(--plan-column-border);border-radius:10px;background:var(--plan-column-bg);padding:10px}.plan-column.premium{border-color:var(--plan-premium-border);box-shadow:var(--plan-premium-inset)}.plan-column h4{margin:0 0 8px}.plan-column ul{margin:0;padding-left:18px;color:var(--muted)}.plan-column li+li{margin-top:4px}.faq-modal{width:min(720px,100%)}.faq-content{display:grid;gap:14px;max-height:min(62vh,560px);overflow:auto;padding-right:4px}.faq-content section{border-bottom:1px solid var(--surface-border);padding-bottom:12px}.faq-content section:last-child{border-bottom:0;padding-bottom:0}.faq-content h4{margin:0 0 5px;font-size:.98rem}.faq-content p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}.history-list{display:grid;gap:8px;max-height:300px;overflow:auto}.history-item{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--plan-column-border);border-radius:10px;background:var(--plan-column-bg)}.history-item span{color:var(--muted);font-size:.84rem}.playlist-item-actions{display:flex;gap:8px}.playlist-link-btn{padding:0;border:0;background:transparent;color:var(--text);text-align:left}.modal-email-input{width:100%}.modal-actions{margin-top:10px;display:flex;gap:8px}.modal-action-btn{flex:1}h1{margin:0;font-size:2rem;letter-spacing:.02em}.topbar p{margin:6px 0 0;color:var(--muted)}.promo-hero{min-height:clamp(520px,calc(100vh - 110px),760px);display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.78fr);gap:34px;align-items:center;padding:58px 0 40px}.promo-copy{max-width:680px}.promo-kicker{display:inline-flex;margin-bottom:14px;color:var(--neon-blue);font-size:.82rem;font-weight:700;text-transform:uppercase}.promo-copy h2{margin:0;max-width:680px;font-size:clamp(2.6rem,7vw,5.8rem);line-height:.96}.promo-copy p{max-width:560px;margin:22px 0 0;color:var(--muted);font-size:clamp(1.05rem,2vw,1.36rem);line-height:1.45}.promo-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.primary-cta,.secondary-cta{min-height:46px;font-weight:800}.primary-cta{border-color:var(--border-accent);background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple));color:var(--bg-0);box-shadow:0 12px 34px color-mix(in srgb,var(--neon-blue) 24%,transparent)}.secondary-cta{background:var(--control-bg)}.hero-main-cta{min-height:52px;padding:0 26px;border-radius:14px;font-size:1rem}.hero-lesson-status,.final-lesson-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px}.hero-lesson-status.secondary-cta{color:var(--muted);border-color:var(--border-accent)}.secondary-link-cta{min-height:58px;border:0;background:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:4px;box-shadow:none;font-weight:800}.secondary-link-cta:hover,.secondary-link-cta:focus-visible{color:var(--text);transform:none;box-shadow:none}.cta-proof{margin-top:10px!important;font-size:.92rem!important;line-height:1.35!important}.promo-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;color:var(--muted);font-size:.9rem}.promo-steps span{padding:8px 10px;border:1px solid var(--border-soft);border-radius:999px;background:var(--soft-bg-2)}.mini-demo{position:relative;border:1px solid var(--border-accent);border-radius:18px;background:linear-gradient(160deg,var(--soft-bg),var(--soft-bg-2)),var(--card);padding:22px;box-shadow:var(--surface-shadow);overflow:hidden;cursor:pointer}.mini-demo:hover,.mini-demo:focus-visible{box-shadow:var(--surface-shadow),0 0 0 2px color-mix(in srgb,var(--neon-blue) 50%,transparent)}.mini-demo:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0 11px,var(--soft-bg) 11px 12px,transparent 12px 100%),linear-gradient(180deg,transparent 0 11px,var(--soft-bg) 11px 12px,transparent 12px 100%);background-size:24px 24px;opacity:.28;pointer-events:none}.mini-demo-label,.mini-line,.mini-chips{position:relative}.mini-demo-label{color:var(--muted);font-size:.82rem;font-weight:700;text-transform:uppercase}.mini-line{margin-top:22px;font-size:clamp(1.55rem,3vw,2.6rem);font-weight:800}.mini-line span{color:var(--neon-blue)}.mini-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.mini-chips span{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border:1px solid var(--border-accent);border-radius:999px;background:var(--chip-bg);font-weight:700}.practice-workspace{padding-top:18px}.config-panel,.player-panel{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.settings-panel{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field span{color:var(--muted);font-size:.86rem}.mode-help{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--border-soft);background:var(--soft-bg-2);color:var(--muted)}.mode-help strong{color:var(--text);margin-right:6px}.stats-panel{margin-top:12px;padding:12px;border-radius:12px;border:1px solid var(--border-soft);background:var(--soft-bg-2)}.stats-panel h3{margin:0 0 10px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.stats-grid div{border-radius:10px;padding:8px 10px;background:var(--soft-bg-2);border:1px solid var(--border-soft-2)}.stats-grid span{display:block;font-size:.78rem;color:var(--muted)}.stats-grid strong{display:block;margin-top:2px;font-size:1.02rem}.stats-detailed{margin-top:12px;border-top:1px solid var(--border-soft-2);padding-top:10px;display:grid;gap:8px}.stats-detailed-row{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}.stats-detailed-row strong{color:var(--text)}input,select,textarea,button{border:1px solid var(--control-border);background:var(--control-bg);color:var(--text);border-radius:12px;padding:10px 12px;font-size:.95rem}button{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}button:hover{transform:translateY(-1px);box-shadow:var(--interactive-shadow)}.song-info{margin-top:18px;display:flex;align-items:baseline;gap:10px}.song-info h2{margin:0;font-size:1.3rem}.song-info span{color:var(--muted)}.progress-wrap{min-width:240px}.progress-label{font-size:.9rem;color:var(--muted);text-align:right}.progress-wave{margin-top:8px;height:8px;border-radius:999px;background:var(--soft-bg);overflow:hidden}.progress-wave span{display:block;height:100%;background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple));box-shadow:var(--progress-glow)}.builder-progress{min-width:0;margin-bottom:12px}.builder-progress .progress-label{text-align:left;font-size:.82rem}.builder-progress .progress-wave{height:6px;margin-top:6px}.audio{width:100%;margin-top:10px}.audio-hint{margin-top:10px;padding:10px 12px;border-radius:10px;color:var(--muted);background:var(--soft-bg)}.input-area{margin-top:14px}.input-area label{display:block;margin-bottom:8px;color:var(--muted)}textarea{width:100%;resize:vertical}.board{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.share-result{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-radius:14px;border:1px solid var(--border-ok);background:color-mix(in srgb,var(--ok) 10%,var(--card))}.share-result div{display:grid;gap:4px}.share-result strong{font-size:1.08rem}.share-result span{color:var(--muted)}.pane{border-radius:16px;background:var(--card);border:1px solid var(--pane-border);padding:16px;min-height:260px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.pane h3{margin-top:0}.chips{display:flex;flex-wrap:wrap;column-gap:8px;row-gap:18px;margin-top:28px;padding-top:24px}.chip-menu{position:relative;display:inline-flex}.chip-menu .chip{position:relative;z-index:1}.chip-popover{position:absolute;left:50%;bottom:calc(100% + 12px);display:block;transform:translate(-50%) translateY(6px);opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:20}.chip-menu:hover .chip-popover,.chip-menu:focus-within .chip-popover,.chip-menu-open .chip-popover{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0)}.chip-popover-arrow{position:absolute;top:100%;left:50%;width:14px;height:14px;background:var(--bubble-bg);border-right:1px solid var(--bubble-border);border-bottom:1px solid var(--bubble-border);box-shadow:var(--surface-shadow);transform:translate(-50%,-8px) rotate(45deg)}.chip-popover-btn{position:relative;display:block;min-width:112px;padding:8px 12px;border-radius:14px;font-size:.78rem;white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bubble-bg);border:1px solid var(--bubble-border)!important;color:var(--text);box-shadow:var(--surface-shadow)}.chip-popover-btn:hover,.chip-popover-btn:focus{transform:none;background:var(--bubble-bg);border-color:var(--bubble-border);box-shadow:var(--surface-shadow)}.chip{border-radius:999px;background:var(--chip-bg)}.chip-moving{animation:chipMoveOut .28s ease}.chip-wrong{animation:chipWrongShake .3s ease;border-color:var(--border-danger)}.builder{transition:box-shadow .2s ease}.builder:hover{box-shadow:var(--inset-accent)}.hint{color:var(--muted);margin-top:0}.builder-line{margin-top:14px;line-height:1.35;font-size:1.08rem;min-height:80px;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:8px}.builder-lines{display:grid;gap:18px;margin-top:14px}.builder-line-row{position:relative}.builder-line-row .builder-line{margin-top:0;min-height:0}.builder-line-popover{position:absolute;left:16px;bottom:calc(100% + 12px);display:block;transform:translateY(6px);opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:20}.builder-line-row:hover .builder-line-popover,.builder-line-row:focus-within .builder-line-popover,.builder-line-row-open .builder-line-popover{opacity:1;pointer-events:auto;transform:translateY(0)}.builder-line-popover-arrow{position:absolute;top:100%;left:28px;width:14px;height:14px;background:var(--bubble-bg);border-right:1px solid var(--bubble-border);border-bottom:1px solid var(--bubble-border);box-shadow:var(--surface-shadow);transform:translateY(-8px) rotate(45deg)}.builder-line-popover-btn{position:relative;display:block;min-width:118px;padding:8px 12px;border-radius:14px;font-size:.78rem;white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bubble-bg);border:1px solid var(--bubble-border)!important;color:var(--text);box-shadow:var(--surface-shadow)}.builder-line-popover-btn:hover,.builder-line-popover-btn:focus{transform:none;background:var(--bubble-bg);border-color:var(--bubble-border);box-shadow:var(--surface-shadow)}.builder-token{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px}.builder-token>span{display:inline-flex;align-items:center}.builder-token.placeholder{color:var(--muted)}.builder-token.placed{color:var(--placed-token-text);background:var(--placed-token-bg)}.builder-token.placed-fresh{animation:placedWordIn .22s ease}.complete{box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 50%,transparent),0 0 24px color-mix(in srgb,var(--ok) 28%,transparent)}.success{margin-top:12px;color:var(--ok)}.final-complete-banner{margin-bottom:12px;padding:8px 10px;border-radius:10px;color:var(--ok);border:1px solid var(--border-ok);background:var(--success-bg);font-weight:600}.builder-header{display:flex;justify-content:space-between;align-items:center;gap:10px}.builder-header h3{margin:0}.builder-reset-btn{padding:6px 12px;font-size:.9rem}.mistake-stats{margin-top:8px;display:flex;gap:14px;color:var(--muted);font-size:.88rem}@keyframes chipMoveOut{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(18px) scale(.94);opacity:.45}}@keyframes chipWrongShake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-3px)}}@keyframes placedWordIn{0%{transform:translateY(-6px) scale(.94);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes flyWordToBuilder{0%{transform:translate(0) scale(1);opacity:.98}to{transform:translate(calc(var(--to-x) - var(--from-x)),calc(var(--to-y) - var(--from-y))) scale(.95);opacity:.2}}@media (max-width: 860px){.topbar{flex-direction:column}.promo-hero{min-height:auto;grid-template-columns:1fr;padding:34px 0 26px}.promo-copy h2{font-size:clamp(2.35rem,13vw,3.8rem)}.promo-actions{flex-direction:column}.promo-actions button{width:100%}.plan-grid,.board{grid-template-columns:1fr}.share-result{align-items:stretch;flex-direction:column}}.input-header-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.input-header-row label{margin-bottom:0}.input-actions{display:flex;gap:8px;flex-wrap:wrap}.input-actions button{padding:8px 12px}.lyrics-hidden-note{padding:12px;border-radius:10px;color:var(--muted);background:var(--soft-bg);border:1px solid var(--border-soft)}@media (max-width: 860px){.input-header-row{flex-direction:column;align-items:flex-start}}.video-wrap{margin-top:10px}.video{width:100%;aspect-ratio:16 / 9;border:0;border-radius:12px;background:var(--media-bg)}button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.landing-page{display:grid;gap:72px}.mini-lesson,.practice-setup-card,.practice-stage,.landing-final-cta{border:1px solid var(--border-soft);border-radius:18px;background:linear-gradient(160deg,var(--soft-bg),var(--soft-bg-2)),var(--card);box-shadow:var(--surface-shadow)}.mini-lesson{padding:24px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.mini-lesson--idle{opacity:.72}.mini-lesson--active{border-color:var(--border-accent);background:linear-gradient(160deg,var(--placed-token-bg),var(--soft-bg-2)),var(--card);box-shadow:var(--interactive-shadow),var(--surface-shadow)}.mini-lesson--completed{border-color:var(--border-ok);background:linear-gradient(160deg,var(--success-bg),var(--soft-bg-2)),var(--card)}.mini-lesson-topline,.practice-setup-heading,.practice-stage-header,.mini-lesson-actions,.practice-setup-actions,.completion-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.mini-lesson-progress,.section-kicker,.product-preview-label{color:var(--neon-blue);font-size:.8rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.mini-lesson-progress-track{height:6px;margin-top:12px;overflow:hidden;border-radius:999px;background:var(--control-bg)}.mini-lesson-progress-track span{display:block;height:100%;border-radius:inherit;background:var(--accent-primary);box-shadow:var(--progress-glow);transition:width .18s ease}.mini-lesson h3{margin:20px 0 0;font-size:1.35rem}.mini-lesson-instruction{min-height:1.4em;margin:8px 0 0;color:var(--muted)}.mini-lesson-line{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;font-size:1.45rem;font-weight:800}.mini-lesson-word{min-width:48px;color:var(--muted);border-bottom:2px solid var(--border-strong)}.mini-lesson-word.placed{color:var(--text);border-color:var(--neon-blue)}.mini-lesson-options,.landing-benefit-list,.product-preview>div:last-child{display:flex;flex-wrap:wrap;gap:9px}.mini-lesson-chip,.product-preview>div:last-child span,.landing-benefit-list span{border-radius:999px;background:var(--chip-bg);border:1px solid var(--border-accent);padding:9px 12px;font-weight:700}.mini-lesson-chip:disabled{cursor:not-allowed;opacity:.48}.mini-lesson-chip.is-incorrect{border-color:var(--border-danger);color:var(--danger);background:var(--danger-bg);animation:mini-lesson-nudge .26s ease-in-out}@keyframes mini-lesson-nudge{0%,to{transform:translate(0)}35%{transform:translate(-3px)}70%{transform:translate(3px)}}.mini-lesson-feedback,.exercise-feedback{min-height:1.4em;margin:14px 0 0;color:var(--muted)}.mini-lesson-actions{margin-top:18px}.text-action{border:0;background:transparent;color:var(--muted);padding:8px 4px;text-decoration:underline;text-underline-offset:4px;box-shadow:none}.text-action:hover,.text-action:focus-visible{color:var(--text);transform:none;box-shadow:none}.landing-section{display:grid;gap:18px}.landing-section h2,.landing-final-cta h2,.practice-setup-heading h2,.practice-stage-header h2{margin:0;max-width:760px;font-size:clamp(1.85rem,4vw,3rem);line-height:1.05}.landing-section>p,.landing-preview p,.landing-final-cta p{margin:0;color:var(--muted);line-height:1.55}.landing-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.landing-steps article{min-height:190px;padding:20px;border:1px solid var(--border-soft);border-radius:14px;background:var(--soft-bg-2)}.landing-steps strong{color:var(--neon-blue)}.landing-steps h3{margin:22px 0 8px}.landing-steps p{margin:0;color:var(--muted);line-height:1.5}.landing-preview{grid-template-columns:1fr minmax(280px,.8fr);align-items:center;padding:28px;border:1px solid var(--border-soft);border-radius:18px;background:var(--soft-bg-2)}.product-preview{display:grid;gap:18px;padding:20px;border:1px solid var(--border-accent);border-radius:14px;background:var(--card)}.product-preview-player{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:.9rem}.product-preview p{margin:0;font-size:1.25rem}.product-preview i{color:var(--neon-blue);font-style:normal}.landing-final-cta{padding:28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.practice-workspace{display:grid;gap:22px;padding-top:26px}.practice-setup-card,.practice-stage{padding:22px}.practice-setup-heading{margin-bottom:18px}.practice-setup-actions{margin-top:18px}.practice-setup-actions span{color:var(--muted);font-size:.9rem}.practice-stage-header{margin-bottom:14px}.practice-stage-header>div{display:grid;gap:5px}.practice-stage-header>div>span:last-child{color:var(--muted)}.media-panel-compact .player-panel{grid-template-columns:repeat(5,minmax(0,1fr))}.video-wrap-collapsible{padding:10px 0 0}.video-wrap-collapsible summary{cursor:pointer;color:var(--muted);font-weight:700}.practice-board{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);align-items:stretch}.practice-board .builder{order:1}.practice-board .word-bank{order:2}.builder-progress .progress-label{display:flex;justify-content:space-between;gap:10px}.total-progress{opacity:.72}.completion-actions{justify-content:flex-end}.stats-panel-compact{margin-top:0}.stats-empty{margin:0;color:var(--muted)}@media (max-width: 860px){.landing-page{gap:48px}.landing-steps,.landing-preview,.practice-board{grid-template-columns:1fr}.media-panel-compact .player-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-final-cta{align-items:stretch;flex-direction:column}.landing-final-cta .primary-cta{width:100%}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.flying-chip{display:none}}