*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}:root{--cyan: #26C0FF;--blue: #4A78FF;--violet: #8E51FF;--grad: linear-gradient(135deg, #26C0FF 0%, #4A78FF 45%, #8E51FF 100%);--grad-h: linear-gradient(135deg, #46CCFF 0%, #6690FF 45%, #A06BFF 100%);--navy: #0D0F2B;--navy-2: #161839;--navy-3: #1E2048;--navy-card: rgba(255,255,255,.05);--page-bg: #F4F7FF;--card-bg: #FFFFFF;--text: #0D0F2B;--text-2: #4A5068;--text-3: #8A91B0;--border: rgba(74,120,255,.12);--border-2: rgba(74,120,255,.2);--shadow-xs: 0 1px 3px rgba(13,15,43,.06), 0 1px 2px rgba(13,15,43,.04);--shadow-sm: 0 4px 12px rgba(13,15,43,.06), 0 2px 6px rgba(13,15,43,.04);--shadow-md: 0 8px 28px rgba(13,15,43,.08), 0 4px 12px rgba(13,15,43,.05);--shadow-lg: 0 20px 56px rgba(13,15,43,.12), 0 8px 24px rgba(13,15,43,.07);--shadow-glow: 0 0 0 1px rgba(74,120,255,.18), 0 8px 32px rgba(74,120,255,.14);--font-ui: "Switzer", ui-sans-serif, system-ui, sans-serif;--font-head: "Basier Circle", ui-sans-serif, system-ui, sans-serif;--r-sm: 8px;--r-md: 14px;--r-lg: 20px;--r-xl: 28px;--r-2xl: 36px;--r-pill: 999px}body{font-family:var(--font-ui);font-size:14px;line-height:1.5;color:var(--text);background:var(--page-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes spin{to{transform:rotate(360deg)}}@keyframes orb-drift{0%,to{transform:translate(0) scale(1)}50%{transform:translate(30px,-20px) scale(1.08)}}@keyframes orb-drift2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-20px,30px) scale(1.05)}}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes logo-pulse{0%,to{filter:drop-shadow(0 0 20px rgba(38,192,255,.35)) drop-shadow(0 0 40px rgba(142,81,255,.18))}50%{filter:drop-shadow(0 0 32px rgba(38,192,255,.55)) drop-shadow(0 0 64px rgba(142,81,255,.28))}}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{position:relative;text-align:center;padding:18px 24px 14px;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.06)}.app-back-btn{position:absolute;left:18px;top:18px;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);background:#ffffff0a;color:#ffffffb8;font-family:var(--font-ui);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.app-back-btn:hover{background:#26c0ff1a;border-color:#26c0ff52;color:#fff}.app-brand-logo{display:block;width:min(220px,60vw);height:auto;margin:0 auto}.app-sub{color:#ffffff70;margin-top:7px;font-size:13px}.language-select{position:absolute;top:18px;right:18px;z-index:5;display:inline-flex;align-items:center;gap:8px;color:#ffffff8f;font-family:var(--font-ui);font-size:11px;font-weight:600}.language-select-label{text-transform:uppercase;letter-spacing:.06em}.language-select select{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:116px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);padding:8px 28px 8px 12px;color:#ffffffdb;background:linear-gradient(45deg,transparent 50%,currentColor 50%) right 13px center / 5px 5px no-repeat,linear-gradient(135deg,currentColor 50%,transparent 50%) right 9px center / 5px 5px no-repeat,#ffffff0d;font:inherit;cursor:pointer}.language-select select:focus{outline:none;border-color:#26c0ff85;box-shadow:0 0 0 3px #26c0ff24}.language-select option{color:#111827;background:#fff}.language-select--compact{top:16px;right:18px}.app-main{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:32px 16px 56px;background:linear-gradient(180deg,#E9EFFF 0,var(--page-bg) 132px),var(--page-bg)}.app--game{--text: #f7f8ff;--sub: rgba(220,229,255,.66);height:100vh;overflow:hidden;position:relative;isolation:isolate;background:linear-gradient(180deg,#03020133,#030201d1),radial-gradient(circle at 50% 24%,rgba(255,203,113,.1),transparent 44%)}.app--game:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;background:linear-gradient(90deg,#000000bd,#0000002e 34%,#0000002e 66%,#000000bd),linear-gradient(180deg,#00000070,#0000002e 42%,#000000c7),url(/assets/mechanical-piano-prototype-CEp4Xdj2.png) center 44%/cover no-repeat;opacity:.34;filter:blur(1.5px) saturate(.9) brightness(.72);transform:scale(1.03)}.app--game:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,219,151,.03) 0 1px,transparent 1px 78px),radial-gradient(circle at 50% 92%,rgba(255,196,101,.08),transparent 34%),linear-gradient(180deg,#05030200,#0503025c)}.app--game .app-header{padding:10px 16px 6px;flex-shrink:0;position:relative;z-index:2;background:#040302b8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,220,150,.1)}.app--game .app-brand-logo{width:min(150px,48vw)}.app--game .app-main{overflow:hidden;padding:4px 12px 8px;min-height:0}.home-wrap{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#E9EFFF 0,var(--page-bg) 190px),var(--page-bg)}.home-hero{position:relative;overflow:hidden;background:var(--navy);display:flex;flex-direction:column;align-items:center;padding:52px 24px 80px;min-height:88vh;justify-content:center}.home-hero .language-select{position:static}.home-topbar{position:absolute;top:20px;right:24px;z-index:5;display:flex;align-items:center;gap:10px}.home-account{display:inline-flex;align-items:center;gap:8px}.home-account-email{color:#ffffff8a;font-size:12px;font-weight:600}.home-account-avatar{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,.18);background:linear-gradient(#ffffff14,#ffffff08) padding-box,var(--grad) border-box;color:#ffffffe0;font-size:12px;font-weight:800;letter-spacing:.02em;box-shadow:0 8px 18px #0000001f}.home-account-btn{border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);padding:8px 14px;color:#ffffffc7;background:#ffffff0d;font-family:var(--font-ui);font-size:12px;font-weight:700;cursor:pointer;transition:transform .15s,background .15s,border-color .15s,color .15s}.home-account-btn:hover{transform:translateY(-1px);color:#fff;border-color:#26c0ff6b;background:#26c0ff1a}.home-account-btn--primary{border-color:#ffffff3d;color:#fff;background:var(--grad);box-shadow:0 4px 18px #4a78ff42}.hero-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px);opacity:.55}.hero-orb--cyan{width:560px;height:560px;background:radial-gradient(circle,rgba(38,192,255,.4),transparent 70%);top:-180px;left:-140px;animation:orb-drift 16s ease-in-out infinite}.hero-orb--violet{width:500px;height:500px;background:radial-gradient(circle,rgba(142,81,255,.36),transparent 70%);bottom:-160px;right:-120px;animation:orb-drift2 20s ease-in-out infinite}.hero-orb--blue{width:360px;height:360px;background:radial-gradient(circle,rgba(74,120,255,.28),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:orb-drift 24s ease-in-out infinite reverse}.hero-notes-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 72%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 72%,transparent 100%)}.hero-fold{position:absolute;bottom:-1px;left:0;right:0;line-height:0;pointer-events:none}.hero-fold svg{width:100%;height:140px;display:block}.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;max-width:680px}.home-logo{width:min(280px,70vw);height:auto;display:block;animation:logo-pulse 4s ease-in-out infinite}.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:var(--r-pill);border:1px solid rgba(38,192,255,.3);background:#26c0ff14;color:#ffffffb3;font-size:12px;font-weight:500;letter-spacing:.04em}.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.hero-title{font-family:var(--font-head);font-size:clamp(3rem,8vw,5rem);font-weight:600;line-height:1.02;letter-spacing:-.045em;color:#fff;margin:0}.hero-title-grad{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-sub{color:#ffffff85;font-size:15px;line-height:1.65;max-width:480px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.hero-free-note{margin-top:-6px;color:#ffffff75;font-size:12px;line-height:1.45}.hero-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:-4px}.hero-pill{font-size:12px;color:#ffffff5c;font-weight:500}.hero-pill-dot{color:#ffffff2e}.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:var(--r-pill);border:none;background:var(--grad);color:#fff;font-family:var(--font-ui);font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:0 4px 20px #4a78ff59,0 1px 4px #4a78ff40;white-space:nowrap}.btn-primary:hover{background:var(--grad-h);transform:translateY(-2px);box-shadow:0 8px 32px #4a78ff73,0 2px 8px #4a78ff4d}.btn-primary:active{transform:translateY(0)}.btn-primary--sm{padding:10px 22px;font-size:14px}.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--r-pill);border:1px solid var(--border-2);background:transparent;color:var(--blue);font-family:var(--font-ui);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}.btn-ghost:hover{background:#4a78ff0f;border-color:#4a78ff59}.home-library{display:flex;flex-direction:column;gap:20px;padding:48px 24px 72px;max-width:860px;width:100%;margin:0 auto}.library-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.library-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:5px}.library-title{font-family:var(--font-head);font-size:28px;font-weight:600;letter-spacing:-.03em;color:var(--text);line-height:1.1}.project-grid{display:flex;flex-direction:column;gap:10px}.project-card{display:flex;align-items:center;gap:16px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 20px;cursor:pointer;box-shadow:var(--shadow-xs);transition:border-color .18s,box-shadow .18s,transform .18s;position:relative}.project-card:hover{border-color:var(--border-2);box-shadow:var(--shadow-glow);transform:translateY(-2px)}.project-card:before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:0 3px 3px 0;background:var(--grad);opacity:0;transition:opacity .18s}.project-card:hover:before{opacity:1}.project-card-thumb{width:44px;height:44px;border-radius:var(--r-md);background:linear-gradient(135deg,#26c0ff1f,#8e51ff1f);border:1px solid rgba(74,120,255,.14);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;color:var(--blue)}.project-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.project-card-title{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-card-input{width:100%;background:#4a78ff0f;border:1px solid rgba(74,120,255,.3);border-radius:6px;color:var(--text);font-family:var(--font-ui);font-size:14px;font-weight:600;outline:none;padding:3px 8px}.project-card-meta{font-size:12px;color:var(--text-3)}.project-card-date{font-size:11px;color:#0d0f2b4d}.project-card-actions{display:flex;gap:4px;flex-shrink:0}.project-card-btn{background:none;border:none;width:30px;height:30px;border-radius:var(--r-sm);color:var(--text-3);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.project-card-btn:hover{background:#4a78ff14;color:var(--blue)}.project-card-btn--del:hover{background:#ff3c3c14;color:#e53e3e}.library-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:56px 24px;border-radius:var(--r-xl);border:1.5px dashed var(--border-2);background:#4a78ff08;text-align:center}.library-empty-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#26c0ff26,#8e51ff26);border:1px solid rgba(74,120,255,.18);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--blue)}.library-empty-title{font-family:var(--font-head);font-size:17px;font-weight:600;color:var(--text);letter-spacing:-.02em}.library-empty-sub{font-size:13px;color:var(--text-2);max-width:380px;line-height:1.6}.library-empty--signup{border-style:solid;background:linear-gradient(180deg,#ffffffe0,#fffffff5),linear-gradient(135deg,#26c0ff1a,#8e51ff1a);box-shadow:var(--shadow-xs)}.signup-benefits{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:2px 0 4px}.signup-benefits span{padding:7px 10px;border-radius:var(--r-pill);border:1px solid rgba(74,120,255,.14);background:#ffffffbd;color:var(--blue);font-size:11px;font-weight:600}.auth-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:#06081a75;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.auth-modal{position:relative;width:min(430px,100%);border-radius:var(--r-xl);background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:1px solid transparent;padding:28px;box-shadow:var(--shadow-lg)}.auth-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:1px solid rgba(74,120,255,.14);border-radius:50%;background:#4a78ff0a;color:var(--text-2);cursor:pointer;font-size:20px;line-height:1}.auth-close:hover{color:var(--text);background:#4a78ff14}.auth-eyebrow{color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}.auth-title{font-family:var(--font-head);font-size:32px;font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--text);margin-bottom:8px}.auth-subtitle{max-width:340px;color:var(--text-2);font-size:14px;line-height:1.55}.auth-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;border:1px solid rgba(13,15,43,.12);border-radius:var(--r-pill);padding:12px 16px;color:var(--text);background:#fff;font-family:var(--font-ui);font-size:14px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-xs);transition:transform .15s,border-color .15s,box-shadow .15s}.auth-google:hover{transform:translateY(-1px);border-color:#4a78ff47;box-shadow:var(--shadow-sm)}.auth-google:disabled{opacity:.58;cursor:wait}.auth-google-mark{width:22px;height:22px;display:block;flex-shrink:0}.auth-divider{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--text-3);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.auth-form{display:flex;flex-direction:column;gap:14px;margin-top:16px}.auth-field{display:flex;flex-direction:column;gap:6px;color:var(--text-2);font-size:12px;font-weight:700}.auth-field input{width:100%;border:1px solid var(--border-2);border-radius:var(--r-md);padding:12px 13px;color:var(--text);background:#fff;font-family:var(--font-ui);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}.auth-field input:focus{border-color:#4a78ff85;box-shadow:0 0 0 4px #4a78ff1f}.auth-error,.auth-message{border-radius:var(--r-md);padding:10px 12px;font-size:13px;line-height:1.45}.auth-error{color:#9f1d1d;background:#ff3c3c14;border:1px solid rgba(255,60,60,.16)}.auth-message{color:#085737;background:#00cc3d14;border:1px solid rgba(0,204,61,.18)}.auth-confirmation{display:grid;gap:14px;margin-top:20px;padding:18px;border:1px solid rgba(8,48,76,.1);border-radius:var(--r-lg);background:linear-gradient(135deg,#e8f1ffeb,#fffffffa),#fff;box-shadow:var(--shadow-card)}.auth-confirmation-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--grad);font-size:20px;font-weight:900;box-shadow:0 8px 20px #4a78ff3d}.auth-confirmation h3{margin:0;color:var(--text);font-family:var(--font-display);font-size:22px;line-height:1.1;letter-spacing:-.02em}.auth-confirmation p{margin:0;color:var(--text-2);font-size:14px;line-height:1.5}.auth-submit{width:100%;border:none;border-radius:var(--r-pill);padding:13px 18px;color:#fff;background:var(--grad);font-family:var(--font-ui);font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 4px 20px #4a78ff4d}.auth-submit:disabled{opacity:.58;cursor:wait}.auth-switch{width:100%;margin-top:14px;border:none;background:transparent;color:var(--blue);font-family:var(--font-ui);font-size:13px;font-weight:700;cursor:pointer}.uploader-wrap{width:100%;max-width:540px;display:flex;flex-direction:column;gap:0}.url-form{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--r-xl);background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--shadow-sm)}.url-input-wrap{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--page-bg);transition:border-color .2s,box-shadow .2s}.url-input-wrap.focused{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px #4a78ff1f}.url-icon{font-size:.95rem;flex-shrink:0;opacity:.5}.url-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font-ui);font-size:14px;min-width:0}.url-input::placeholder{color:var(--text-3)}.url-btn-full{background:var(--grad);border:none;color:#fff;padding:12px 24px;border-radius:var(--r-pill);width:100%;font-family:var(--font-ui);font-size:14px;font-weight:600;cursor:pointer;transition:transform .12s,box-shadow .15s,opacity .15s;box-shadow:0 4px 16px #4a78ff4d}.url-btn-full:disabled{opacity:.3;cursor:default;box-shadow:none}.url-btn-full:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 24px #4a78ff6b}.url-btn-full:not(:disabled):active{transform:translateY(0)}.url-agree-wrap{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .25s ease,opacity .25s ease}.url-agree-wrap.visible{grid-template-rows:1fr;opacity:1}.url-agree-wrap>label{overflow:hidden}.url-agree{display:flex;align-items:flex-start;gap:9px;cursor:pointer;padding:6px 0 2px}.url-agree input[type=checkbox]{width:14px;height:14px;flex-shrink:0;accent-color:var(--blue);cursor:pointer;margin-top:2px}.url-agree span{font-size:11px;color:var(--text-3);line-height:1.45;-webkit-user-select:none;user-select:none}.url-agree:hover span{color:var(--text-2)}.url-warning{margin:-2px 0 0;font-size:11px;line-height:1.4;color:#9b3a12;text-align:center}.url-hint{font-size:11px;color:var(--text-3);text-align:center}.divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--text-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.divider:before,.divider:after{content:"";flex:1;height:1px;background:#0d0f2b14}.dropzone{border:none;border-radius:var(--r-xl);padding:48px 32px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;background:linear-gradient(var(--card-bg),var(--card-bg)) padding-box,var(--grad) border-box;border:2px solid transparent;box-shadow:var(--shadow-sm),0 0 #4a78ff00}.dropzone:hover,.dropzone.dragging{transform:translateY(-3px);box-shadow:var(--shadow-md),0 0 0 4px #4a78ff14}.dropzone-brand-symbol{width:52px;height:52px;object-fit:contain}.uploader-text{font-family:var(--font-head);font-size:16px;font-weight:600;color:var(--text);letter-spacing:-.01em}.uploader-sub{font-size:13px;color:var(--text-3)}.uploader.loading{border:2px solid transparent;border-radius:var(--r-xl);background:linear-gradient(var(--card-bg),var(--card-bg)) padding-box,var(--grad) border-box;padding:52px 32px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:var(--shadow-md)}.loading-ring-wrap{position:relative;width:84px;height:84px;display:flex;align-items:center;justify-content:center}.loading-ring{position:absolute;top:0;left:0;transform:rotate(-90deg)}.ring-track{fill:none;stroke:#0d0f2b14;stroke-width:5}.ring-fill{fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .6s ease}.loading-pct{font-family:var(--font-head);font-size:1.05rem;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums;position:relative}.error-box{margin-top:16px;background:#fff7f7;border:1px solid rgba(220,60,60,.18);border-radius:var(--r-md);padding:16px 20px;display:flex;align-items:center;gap:14px;color:#c0392b;max-width:520px;width:100%;font-size:13px}.error-box button{margin-left:auto;background:transparent;border:1px solid rgba(192,57,43,.25);color:#c0392b;padding:6px 14px;border-radius:var(--r-sm);cursor:pointer;font-family:var(--font-ui);font-size:13px;transition:background .15s}.error-box button:hover{background:#c0392b0f}.game-wrap{width:100%;max-width:none;display:flex;flex-direction:column;gap:10px;padding:8px;border:1px solid rgba(230,170,86,.18);border-radius:18px;background:linear-gradient(180deg,#180f098a,#030201b8),radial-gradient(circle at 50% 0%,rgba(255,205,121,.1),transparent 42%);box-shadow:0 28px 90px #0000007a,inset 0 1px #ffe2a314,inset 0 0 0 1px #2a180ab3}.app--game .game-wrap{height:100%}.game-header{display:grid;grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr);align-items:center;gap:12px;flex-shrink:0;min-height:58px;padding:0 8px}.btn-reset{background:linear-gradient(180deg,#ffdc971f,#2c190a9e),#070504c7;border:1px solid rgba(229,171,88,.3);color:#ffe5b7;padding:7px 12px;border-radius:999px;cursor:pointer;font-size:1.05rem;transition:background .15s,transform .15s;justify-self:start;box-shadow:inset 0 1px #ffeec41f,0 10px 24px #0000003d}.btn-reset:hover{background:linear-gradient(180deg,#ffe2a62b,#361f0cb3),#070504e0;border-color:#f2c0697a;transform:translateY(-1px)}.game-title{color:#f6e1beb3;font-weight:600;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-self:end;max-width:42vw;text-shadow:0 1px 8px rgba(0,0,0,.4)}.chord-badge{grid-column:2;justify-self:center;min-width:148px;height:58px;padding:8px 18px 10px;border:1px solid rgba(238,178,90,.58);border-radius:14px;background:linear-gradient(180deg,#130d09f0,#050403fa),radial-gradient(circle at 50% 0%,rgba(255,214,131,.18),transparent 68%);box-shadow:inset 0 1px #ffe29e2e,inset 0 -10px 24px #00000038,0 0 0 1px #3d230da8,0 18px 34px #00000057;display:flex;flex-direction:column;justify-content:center;flex-shrink:0;position:relative}.chord-badge-label{display:none;color:#dcc8b480;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}.chord-badge:after{content:"";position:absolute;left:15px;bottom:8px;width:78px;height:7px;background:radial-gradient(circle at 4px 50%,#9ee8c5 0 4px,transparent 4.5px),radial-gradient(circle at 22px 50%,#f0d85b 0 4px,transparent 4.5px),radial-gradient(circle at 40px 50%,#ffd05c 0 4px,transparent 4.5px),radial-gradient(circle at 58px 50%,#ffb566 0 4px,transparent 4.5px),radial-gradient(circle at 76px 50%,#f59ba0 0 4px,transparent 4.5px);opacity:.95;pointer-events:none}.chord-badge-value{color:#ffe6b5;font-family:Avenir Next,Inter,system-ui,sans-serif;font-size:1.72rem;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,216,145,.22);transform:translateY(-4px)}.chord-badge-value.empty{color:#ffffff3d;font-weight:600}.stage{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.game-stage-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(92px,126px);gap:12px;flex:1;min-height:0;align-items:stretch}.side-rail{display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:0;padding:12px 9px;border:1px solid rgba(224,161,79,.26);border-radius:16px;background:linear-gradient(180deg,#2f1d0fc2,#080605f0),radial-gradient(circle at 50% 0%,rgba(255,213,132,.12),transparent 58%);box-shadow:inset 0 1px #ffe7b31a,inset 0 -20px 38px #00000038,0 18px 44px #00000057;position:relative;overflow:hidden}.side-rail:before{content:"";position:absolute;top:7px;right:7px;bottom:7px;left:7px;border:1px solid rgba(255,220,151,.08);border-radius:12px;pointer-events:none}.side-rail:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,239,198,.05),transparent 18%,transparent 82%,rgba(255,239,198,.04)),repeating-linear-gradient(180deg,rgba(255,220,151,.018) 0 1px,transparent 1px 24px)}.side-rail--right{align-items:stretch}.stage.has-video{flex-direction:column;align-items:stretch}.video-panel{position:absolute;right:clamp(18px,3.2vw,46px);top:clamp(18px,3vw,38px);width:min(22vw,300px);aspect-ratio:16/9;padding:10px;border:1px solid rgba(236,177,91,.56);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#402814e0,#060504f5);display:flex;align-items:center;justify-content:center;opacity:.76;box-shadow:0 0 0 1px #351d0ad1,0 22px 54px #0000007a;pointer-events:none;z-index:2}.video-panel--phone{width:min(12vw,128px);aspect-ratio:9/16;padding:12px 7px 10px;border-radius:22px}.video-panel--tablet{width:min(24vw,340px);aspect-ratio:16/10;padding:9px 12px;border-radius:18px}.video-panel:before{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border:1px solid rgba(255,214,139,.26);border-radius:13px;pointer-events:none;z-index:1}.video-panel--phone:before{border-radius:17px;box-shadow:inset 0 13px #00000057}.video-panel--tablet:before{border-radius:13px}.video-panel:after{content:"";position:absolute;top:9px;right:9px;bottom:9px;left:9px;border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 35%);mix-blend-mode:screen;pointer-events:none;z-index:3}.video-panel--phone:after{top:12px;right:7px;bottom:10px;left:7px;border-radius:14px}.video-panel--phone .video-player{border-radius:14px}.video-player{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px;opacity:.78;filter:saturate(.85) contrast(1.05) brightness(.82) sepia(.1)}.video-player-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.canvas-container{position:relative;flex:1;min-height:0;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 18%,rgba(197,133,58,.18),transparent 42%),linear-gradient(180deg,#140c076b,#050302eb),#070403;box-shadow:0 0 0 1px #e2a55357,0 24px 72px #0000008f,inset 0 1px #ffe5a61f,inset 0 0 0 8px #0c070457}.canvas-container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffdd9714,inset 0 0 56px #0000004d}.video-backdrop{position:absolute;top:-4%;right:-4%;bottom:-4%;left:-4%;width:108%;height:108%;object-fit:cover;opacity:.3;filter:blur(3px) saturate(.86) contrast(1.05) brightness(.58);transform:scale(1.02);pointer-events:none;z-index:0}.stage.has-video .canvas-container:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 18%,rgba(255,196,102,.09),transparent 42%),linear-gradient(180deg,#04070c14,#00000057)}.stage:not(.has-video) .canvas-container{width:100%}.canvas-container canvas{display:block;width:100%;height:100%;position:relative;z-index:3}.progress-dock{display:flex;align-items:center;gap:12px;width:min(1180px,94vw);align-self:center;flex-shrink:0;padding:10px 14px;border:1px solid rgba(226,165,83,.26);border-radius:22px;background:linear-gradient(180deg,#27180dd1,#050403e0),radial-gradient(circle at 50% 0%,rgba(255,216,143,.1),transparent 72%);box-shadow:inset 0 1px #ffe0a41a,0 12px 32px #00000042}.transport-cluster{display:flex;align-items:center;gap:12px;flex-shrink:0}.controls{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#19110cfa,#070605fa);border:1px solid rgba(205,143,70,.2);border-radius:10px;padding:8px 12px;flex-shrink:0;flex-wrap:nowrap;overflow-x:auto;box-shadow:inset 0 1px #ffe0a414}.btn-play{background:radial-gradient(circle at 50% 20%,rgba(255,246,207,.64),transparent 34%),linear-gradient(180deg,#f4ce83,#b87532 56%,#5b2d12);border:1px solid rgba(255,230,166,.44);color:#110906;width:58px;height:58px;border-radius:50%;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s,transform .15s;box-shadow:0 0 28px #da9b4842,0 12px 24px #00000047,inset 0 1px #fff5cd9e;touch-action:manipulation}.btn-play:hover{opacity:.9;transform:translateY(-1px)}.play-icon{display:block;width:0;height:0;margin-left:4px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid currentColor}.play-icon--pause{width:16px;height:20px;margin-left:0;border:none;background:linear-gradient(currentColor,currentColor) left center / 5px 20px no-repeat,linear-gradient(currentColor,currentColor) right center / 5px 20px no-repeat}.progress-bar{flex:1;height:24px;display:flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;min-width:60px;overflow:visible;border-radius:999px;touch-action:none}.progress-bar.dragging{cursor:grabbing}.progress-bar:before{content:"";position:absolute;left:0;right:0;height:7px;background:linear-gradient(90deg,#6a411b9e,#ffda911a,#6a411b9e);border:1px solid rgba(255,218,145,.08);border-radius:999px;pointer-events:none}.progress-fill{position:absolute;left:0;height:7px;background:linear-gradient(90deg,#58decf,#f3cc72,#ff7d96);border-radius:999px;pointer-events:none;max-width:100%;z-index:2}.loop-range{position:absolute;height:14px;border-radius:999px;background:#ffcc7029;border:1px solid rgba(255,214,139,.36);pointer-events:none;z-index:3}.loop-range.active{background:#58decf26;border-color:#58decf61}.loop-handle{position:absolute;top:50%;width:16px;height:24px;border-radius:999px;border:1px solid rgba(255,229,166,.72);background:linear-gradient(180deg,#fff1bd,#d5913d 55%,#7c461e);box-shadow:0 0 0 2px #00000042;cursor:ew-resize;transform:translate(-50%,-50%);z-index:4}.loop-handle{touch-action:none}.loop-handle:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-left:1px solid rgba(53,29,10,.58);border-right:1px solid rgba(53,29,10,.58);pointer-events:none}.loop-handle:hover{border-color:#fff4cdf2}.time-display{font-size:.78rem;color:#dcd2be80;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.speed-control{display:flex;align-items:center;gap:3px;flex-shrink:0;border-left:1px solid rgba(205,143,70,.2);padding-left:10px}.speed-control--rail{flex-direction:column;border-left:none;padding-left:0;width:100%}.speed-control--dock{border-left:1px solid rgba(226,165,83,.18);padding-left:12px}.loop-control{display:flex;align-items:center;gap:7px;width:auto;padding:0;border:none}.loop-label{display:flex;flex-direction:column;gap:2px;padding:2px 2px 4px;color:#efd9b77a;font-size:.62rem;line-height:1.1;text-align:center;min-width:88px}.loop-label strong{color:#ffe0a4;font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums}.loop-toggle-btn{min-width:56px}.sound-toggle{display:flex;gap:3px;border-left:1px solid rgba(205,143,70,.2);padding-left:10px;flex-shrink:0}.sound-toggle--rail{flex-direction:column;border-left:none;padding-left:0}.speed-btn{background:linear-gradient(180deg,#ffe2a417,#25160a75);border:1px solid rgba(226,165,83,.14);color:#f6e1be94;font-size:.73rem;padding:6px 8px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.speed-btn:hover{background:linear-gradient(180deg,#ffe2a426,#2d1a0c8f);color:#f7f8ff;border-color:#e2a5534d}.speed-btn.active{background:radial-gradient(circle at 50% 0%,rgba(255,232,178,.22),transparent 62%),linear-gradient(180deg,#da9f4f57,#432610b3);border-color:#ecb865b3;color:#ffd58f;font-weight:600}.speed-btn:disabled{opacity:.4;cursor:default}@media (max-width: 700px){.app-header{padding-top:58px}.app-back-btn{top:14px}.language-select,.language-select--compact,.home-hero .language-select{top:14px;right:14px}.language-select-label{display:none}.language-select select{min-width:104px;padding-top:7px;padding-bottom:7px}.home-topbar{top:14px;right:14px;left:14px;justify-content:space-between;gap:8px}.home-account{flex:1;justify-content:flex-end;min-width:0}.home-account-email{max-width:150px}.home-account-btn{min-height:40px;padding:9px 12px;font-size:11px}.home-hero{min-height:100svh;padding:44px 20px 80px}.home-logo{margin-top:38px}.hero-title{font-size:clamp(2.6rem,10vw,3.8rem)}.auth-modal{padding:24px 20px;border-radius:24px}.auth-title{font-size:28px}.home-library{padding:36px 16px 56px}.game-header{grid-template-columns:auto 1fr auto;gap:8px}.game-title{display:none}.chord-badge{min-width:86px;height:36px;padding:4px 9px}.chord-badge-value{font-size:.95rem}.game-stage-row{grid-template-columns:1fr;gap:6px}.side-rail{flex-direction:row;justify-content:center;padding:6px}.stage{order:1}.side-rail--right{order:2}.speed-control--rail,.sound-toggle--rail{flex-direction:row;width:auto}.progress-dock{flex-wrap:wrap;justify-content:center;width:100%;border-radius:18px}.transport-cluster{width:100%;justify-content:center}.speed-control--dock{border-left:none;padding-left:0;order:3}.progress-bar{order:2;flex-basis:100%}.time-display{order:4}.loop-control{flex-direction:row;align-items:center;width:auto;border:none;padding:0}.loop-label{min-width:86px;padding:0 4px}.loop-toggle-btn{width:auto}.btn-play{width:40px;height:40px;font-size:1rem}.stage.has-video{flex-direction:column}.video-panel{height:auto;right:10px;top:10px;opacity:.62;padding:5px}.video-panel--phone{width:min(22vw,92px)}.video-panel--tablet{width:min(34vw,160px)}.speed-btn{font-size:.68rem;padding:2px 5px}}.game-wrap--immersive{position:relative;gap:6px;padding:8px;border-color:#de912c57;border-radius:26px;background:radial-gradient(circle at 50% 16%,rgba(204,130,33,.14),transparent 42%),linear-gradient(180deg,#050605fa,#000000fa);box-shadow:0 32px 100px #0000009e,inset 0 1px #ffdf8e1f,inset 0 0 0 1px #683c0f73}.game-wrap--immersive .game-header{position:absolute;top:12px;left:12px;right:12px;z-index:5;min-height:68px;grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr);padding:0 18px;pointer-events:none}.game-wrap--immersive .btn-reset{visibility:visible;pointer-events:auto;min-width:68px;height:34px;padding:0 13px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.72}.game-wrap--immersive .game-title{position:fixed;top:18px;right:clamp(28px,5vw,74px);left:auto;z-index:8;max-width:min(34vw,460px);padding:7px 13px;border:1px solid rgba(226,165,83,.18);border-radius:999px;color:#ffe0a6bd;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;pointer-events:none;background:linear-gradient(180deg,#16120d6b,#0303034d)}.game-wrap--immersive .chord-badge{pointer-events:auto;grid-column:2;justify-self:center;min-width:164px;height:72px;border-radius:18px;border-color:#eca030a3;background:radial-gradient(circle at 50% 0%,rgba(255,220,148,.16),transparent 58%),linear-gradient(180deg,#15120dfa,#030303fa);box-shadow:inset 0 1px #ffe7ac33,0 16px 38px #00000075}.game-wrap--immersive .chord-badge-label{display:block;color:#ffe0a570;letter-spacing:.2em;text-align:center}.game-wrap--immersive .chord-badge:after{display:none}.game-wrap--immersive .game-stage-row{grid-template-columns:minmax(0,1fr);gap:0;flex:1.12;transition:flex .18s ease}.game-wrap--immersive.game-wrap--dock-expanded .game-stage-row{flex:1.12}.game-wrap--immersive .canvas-container{position:relative;z-index:1;border-radius:22px;background:radial-gradient(circle at 50% 0%,rgba(201,131,36,.14),transparent 46%),linear-gradient(180deg,#060706,#010101);box-shadow:0 0 0 1px #e69c365c,0 22px 68px #0000009e,inset 0 1px #ffe5a61f}.game-wrap--immersive .progress-dock{position:relative;z-index:20;width:min(1160px,94vw);display:grid;grid-template-columns:minmax(160px,1fr) auto minmax(160px,1fr);grid-template-rows:8px 52px;align-items:center;gap:6px 14px;padding:9px 16px 10px;border-radius:22px;border-color:#df912a24;background:radial-gradient(circle at 50% 0%,rgba(255,219,144,.05),transparent 62%),linear-gradient(180deg,#0f0e0b85,#010101ad);isolation:isolate}.game-wrap--immersive .progress-dock:before{content:"";grid-column:1/-1;grid-row:1;align-self:center;height:1px;background:linear-gradient(90deg,transparent,rgba(255,192,88,.18),transparent)}.game-wrap--immersive .progress-bar{grid-column:1/-1;grid-row:1;align-self:center;height:8px;z-index:2}.game-wrap--immersive .transport-cluster{grid-column:2;grid-row:2;justify-self:center;z-index:4;gap:18px}.game-wrap--immersive .speed-control--dock{grid-column:1;grid-row:2;justify-self:end;border-left:none;padding-left:0;transform:none;z-index:5}.speed-control--immersive{position:relative}.speed-control--immersive .speed-btn--current,.immersive-sound-control .speed-btn--sound{min-width:74px;text-align:center}.immersive-sound-control{position:relative}.immersive-sound-control .speed-btn--sound{min-width:142px}.speed-popover,.sound-popover{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translate(-50%);z-index:40;display:flex;align-items:center;gap:6px;padding:8px;border:1px solid rgba(231,159,57,.34);border-radius:999px;background:radial-gradient(circle at 50% 0%,rgba(255,222,149,.14),transparent 58%),linear-gradient(180deg,#12100cfa,#020202fa);box-shadow:inset 0 1px #ffe8aa24,0 16px 34px #00000061}.sound-popover{min-width:190px;border-radius:18px;flex-direction:column;align-items:stretch}.game-wrap--immersive .time-display{display:none}.immersive-dock-group{display:flex;align-items:center;gap:8px;min-width:0}.immersive-dock-group--right{grid-column:3;grid-row:2;justify-self:start;transform:none;z-index:5}.game-wrap--immersive .btn-play{width:48px;height:48px;color:#fff1c9;font-size:1.36rem;background:radial-gradient(circle at 50% 24%,rgba(255,248,209,.88),rgba(255,209,111,.26) 34%,transparent 45%),linear-gradient(180deg,#211a10,#080705)}.game-wrap--immersive .progress-bar:before{background:linear-gradient(90deg,#4d2f0f4d,#ffdd8e1a,#4d2f0f4d);height:3px}.game-wrap--immersive .progress-fill{background:linear-gradient(90deg,#54fff2,#ffd45f,#ff8a3e,#ff5fa2);height:3px}.game-wrap--immersive .speed-btn.active{color:#191006;border-color:#ffdb8dc2;background:radial-gradient(circle at 50% 12%,rgba(255,247,207,.66),transparent 44%),linear-gradient(180deg,#f3c76d,#8b541b)}.game-wrap--immersive .speed-btn{min-height:28px;padding:5px 10px}.immersive-loop-btn{min-width:68px;height:32px;padding:0 14px;border-radius:999px;border:1px solid rgba(231,159,57,.34);color:#ffe6b3;cursor:pointer;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:radial-gradient(circle at 50% 18%,rgba(255,234,178,.14),transparent 46%),linear-gradient(180deg,#12110df5,#020202fa)}.immersive-loop-btn:hover{border-color:#ffc2569e;color:#fff2ce}.immersive-loop-btn.active{color:#191006;border-color:#ffdb8dc2;background:radial-gradient(circle at 50% 12%,rgba(255,247,207,.66),transparent 44%),linear-gradient(180deg,#f3c76d,#8b541b)}.game-wrap--immersive .controls-hint{display:none}.game-wrap--jazzClub{border-color:#5f85b857;background:radial-gradient(circle at 16% 14%,rgba(255,177,80,.16),transparent 30%),radial-gradient(circle at 74% 18%,rgba(75,120,184,.2),transparent 42%),linear-gradient(180deg,#050f1dfa,#02060cfa);box-shadow:0 32px 100px #0000009e,inset 0 1px #abcfff1a,inset 0 0 0 1px #203d658f}.game-wrap--jazzClub .canvas-container{background:radial-gradient(circle at 16% 16%,rgba(255,176,79,.12),transparent 34%),linear-gradient(180deg,#08182d,#030814);box-shadow:0 0 0 1px #6994cf42,0 22px 68px #0000009e,inset 0 1px #aed0ff1a}.game-wrap--jazzClub .chord-badge{border-color:#77a0db8a;background:radial-gradient(circle at 50% 0%,rgba(122,169,238,.18),transparent 58%),linear-gradient(180deg,#081426f5,#02070efa)}.game-wrap--jazzClub .chord-badge-label{color:#b8d3ff7a}.game-wrap--jazzClub .chord-badge-value{color:#f9d692}.game-wrap--jazzClub .game-title{border-color:#7099d638;color:#cfe1ffbd;background:linear-gradient(180deg,#0a182b75,#02070e52)}.game-wrap--jazzClub .btn-reset,.game-wrap--jazzClub .speed-btn,.game-wrap--jazzClub .btn-play{border-color:#7399cd4d;color:#dceaff;background:radial-gradient(circle at 50% 18%,rgba(178,209,255,.14),transparent 45%),linear-gradient(180deg,#0c1829f5,#02060cfa)}.game-wrap--jazzClub .speed-btn:hover{border-color:#ffb9547a;color:#ffe0a2}.game-wrap--jazzClub .speed-btn.active{color:#07101d;border-color:#ffcf7cbd;background:radial-gradient(circle at 50% 12%,rgba(255,246,205,.62),transparent 44%),linear-gradient(180deg,#f4bd62,#a86016)}.game-wrap--jazzClub .progress-dock{border-color:#668ec729;background:radial-gradient(circle at 50% 0%,rgba(122,169,238,.06),transparent 62%),linear-gradient(180deg,#0712218a,#01040ab8)}.game-wrap--jazzClub .progress-dock:before{background:linear-gradient(90deg,transparent,rgba(126,166,224,.18),transparent)}.game-wrap--jazzClub .progress-bar:before{background:linear-gradient(90deg,#2f4b7057,#ffc7671a,#2f4b7057)}.game-wrap--jazzClub .progress-fill{background:linear-gradient(90deg,#82b4ff,#ffd073,#f29a22)}.game-wrap--jazzClub .btn-play{color:#fff4ce;background:radial-gradient(circle at 50% 24%,rgba(255,248,209,.86),rgba(255,192,95,.24) 34%,transparent 45%),linear-gradient(180deg,#1b2636,#050912)}.game-wrap--jazzClub .btn-skip,.game-wrap--jazzClub .immersive-loop-btn{border-color:#7399cd4d;color:#dceaff;background:radial-gradient(circle at 50% 18%,rgba(178,209,255,.12),transparent 46%),linear-gradient(180deg,#0c1829f5,#02060cfa)}.game-wrap--jazzClub .immersive-loop-btn.active{color:#08101c;border-color:#ffcf7cc2;background:radial-gradient(circle at 50% 12%,rgba(255,246,207,.62),transparent 44%),linear-gradient(180deg,#f2bd61,#a45c13)}.game-wrap--jazzClub .speed-popover,.game-wrap--jazzClub .sound-popover{border-color:#7399cd57;background:radial-gradient(circle at 50% 0%,rgba(122,169,238,.12),transparent 58%),linear-gradient(180deg,#081424fa,#02060cfa)}.game-wrap{--gc-bg: rgba(13, 15, 43, .82);--gc-border: rgba(38, 192, 255, .18);--gc-border-h: rgba(38, 192, 255, .38);--gc-text: rgba(255, 255, 255, .88);--gc-muted: rgba(255, 255, 255, .4);--gc-grad: linear-gradient(135deg, #26C0FF 0%, #4A78FF 45%, #8E51FF 100%)}.app--game .app-header{background:#0a0c20cc;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(38,192,255,.12)}.game-wrap .btn-reset{background:#0d0f2bb3;border:1px solid var(--gc-border);color:var(--gc-text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 12px #0000003d;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:1}.game-wrap .btn-reset:hover{background:#26c0ff1f;border-color:var(--gc-border-h);color:#fff;transform:translateY(-1px)}.game-wrap .game-title{color:#fff9;font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;background:#0d0f2b80;border:1px solid rgba(38,192,255,.1);border-radius:var(--r-pill);padding:5px 14px;text-shadow:none}.game-wrap .chord-badge{background:#0d0f2bd1;border:1px solid rgba(38,192,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px #0d0f2b99,0 16px 40px #0006,0 0 28px #26c0ff14}.game-wrap .chord-badge:after{display:none}.game-wrap .chord-badge-value{background:linear-gradient(135deg,#26c0ff,#4a78ff,#8e51ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2rem;font-weight:600;text-shadow:none;transform:none;text-align:center;font-family:var(--font-head);letter-spacing:-.03em}.game-wrap .chord-badge-value.empty{background:none;-webkit-text-fill-color:rgba(255,255,255,.22);color:#ffffff38}.game-wrap .progress-dock{background:#0a0c20c7;border:1px solid rgba(38,192,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 8px 32px #00000047,inset 0 1px #ffffff0a}.game-wrap .progress-bar:before{background:#ffffff14;border:none;height:4px}.game-wrap .progress-fill{background:linear-gradient(90deg,#26c0ff,#4a78ff,#8e51ff);height:4px;box-shadow:0 0 10px #4a78ff66}.game-wrap .loop-range.active{background:#26c0ff26;border-color:#26c0ff66}.game-wrap .loop-handle{background:linear-gradient(180deg,#26c0ff,#4a78ff);border-color:#ffffff80;box-shadow:0 0 0 2px #0000004d,0 0 14px #26c0ff4d}.game-wrap .loop-handle:after{border-color:#ffffff4d}.game-wrap .btn-play{background:linear-gradient(135deg,#26c0ff,#4a78ff 45%,#8e51ff);border:none;color:#fff;box-shadow:0 0 28px #4a78ff66,0 8px 20px #0000004d,inset 0 1px #fff3;font-size:1.1rem}.game-wrap .btn-play:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 0 40px #4a78ff8c,0 12px 28px #00000059,inset 0 1px #ffffff38}.game-wrap .btn-skip{background:#0d0f2bb3;border:1px solid var(--gc-border);color:var(--gc-text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:none;cursor:pointer;touch-action:manipulation}.game-wrap .btn-skip:hover{background:#26c0ff1a;border-color:var(--gc-border-h);color:#fff}.game-wrap .speed-btn{background:#0d0f2ba6;border:1px solid rgba(38,192,255,.14);color:var(--gc-muted);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.game-wrap .speed-btn:hover{background:#26c0ff1a;border-color:var(--gc-border-h);color:#fff}.game-wrap .speed-btn.active{background:#4a78ff33;border-color:#26c0ff80;color:#fff;font-weight:600;box-shadow:0 0 12px #26c0ff26}.game-wrap .game-loop-btn{background:#0d0f2bb3;border:1px solid var(--gc-border);color:var(--gc-muted);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.game-wrap .game-loop-btn:hover{background:#26c0ff1a;border-color:var(--gc-border-h);color:#fff}.game-wrap .game-loop-btn.active{background:linear-gradient(135deg,#26c0ff40,#8e51ff40);border-color:#4a78ff8c;color:#fff;box-shadow:0 0 14px #4a78ff38}.game-wrap .speed-popover,.game-wrap .sound-popover{z-index:40}.game-wrap .time-display{color:var(--gc-muted)}.game-wrap .controls-hint{color:#ffffff24}@media (max-width: 760px){.game-wrap--immersive .progress-dock{width:100%;grid-template-columns:1fr auto 1fr;grid-template-rows:8px 44px 38px;gap:6px 8px;padding:8px 10px 10px}.game-wrap--immersive .transport-cluster{grid-column:2;grid-row:2;gap:10px}.game-wrap--immersive .speed-control--dock{grid-column:1;grid-row:3;justify-self:end}.game-wrap--immersive .immersive-dock-group--right{grid-column:3;grid-row:3;justify-self:start}.game-wrap--immersive .speed-popover{left:0;transform:none;max-width:min(92vw,360px);flex-wrap:wrap;border-radius:18px;justify-content:center}.game-wrap--immersive .sound-popover{left:auto;right:0;transform:none}.game-wrap--immersive.game-wrap--dock-expanded .game-stage-row{flex:1.12}}@media (max-width: 900px) and (orientation: portrait){.app--game{width:100svw;height:100svh;min-height:100svh;overflow:hidden}.app--game .app-header{display:none}.app--game .app-main{width:100svw;height:100svh;padding:0;overflow:hidden;background:#02040c}.app--game .game-wrap{position:fixed;left:50%;top:50%;width:100svh;height:100svw;min-width:100svh;min-height:100svw;max-width:none;gap:4px;padding:0;border:none;border-radius:0;box-shadow:none;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center}.app--game .game-wrap--immersive .game-header{top:5px;left:5px;right:5px;min-height:48px;padding:0 8px}.app--game .game-wrap--immersive .btn-reset{min-width:44px;height:28px;padding:0 9px;font-size:.62rem}.app--game .game-wrap--immersive .chord-badge{min-width:104px;height:48px;padding:6px 12px;border-radius:14px}.app--game .game-wrap--immersive .chord-badge-value{font-size:1.2rem;transform:translateY(-2px)}.app--game .game-wrap--immersive .canvas-container{border-radius:0;box-shadow:none}.app--game .game-wrap--immersive .game-stage-row{flex:1.12}.app--game .game-wrap--immersive .progress-dock{width:100%;border-radius:0;border-left:none;border-right:none}.app--game .game-wrap--jazzClub .btn-skip{color:#fff4ce}}@media (max-width: 900px) and (orientation: landscape){.app--game{width:100svw;height:100svh;min-height:100svh;overflow:hidden}.app--game .app-header{display:none}.app--game .app-main{width:100svw;height:100svh;padding:0;overflow:hidden;background:#02040c}.app--game .game-wrap{height:100svh;max-width:none;gap:4px;padding:0;border:none;border-radius:0;box-shadow:none}.app--game .game-wrap--immersive .game-stage-row{flex:1.12}.app--game .game-wrap--immersive .canvas-container{border-radius:0;box-shadow:none}.app--game .game-wrap--immersive .progress-dock{width:100%;border-radius:0;border-left:none;border-right:none}.app--game .game-wrap--jazzClub .btn-skip{color:#fff4ce}}