:root{--blue-50: #eff5ff;--blue-100: #dae9ff;--blue-200: #bed8ff;--blue-500: #3779fa;--blue-600: #215aef;--blue-700: #1a36a9;--blue-800: #1c358c;--blue-900: #13287d;--cyan-50: #e5f9ff;--cyan-300: #5bddff;--cyan-400: #2ed3ff;--cyan-700: #0a7fa6;--amber-100: #fef3c7;--amber-300: #fde68a;--amber-500: #f59e0b;--amber-700: #b45309;--amber-900: #78350f;--yellow-100: #fef9c3;--yellow-400: #facc15;--yellow-600: #ca8a04;--yellow-900: #713f12;--green-100: #dcfce7;--green-500: #18a84a;--green-600: #12803a;--green-800: #166534;--rose-100: #ffe4e6;--rose-500: #f43f5e;--rose-600: #e11d48;--rose-800: #be123c;--gray-0: #ffffff;--gray-50: #f7f7f7;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #99a1af;--gray-500: #6b7280;--gray-600: #4a5565;--gray-700: #374151;--gray-800: #1f1f1f;--gray-900: #101828;--red-500: #ef4444;--red-700: #b91c1c;--white-a12: rgba(255, 255, 255, .12);--white-a35: rgba(255, 255, 255, .35);--white-a55: rgba(255, 255, 255, .55);--white-a60: rgba(255, 255, 255, .6);--black-a04: rgba(0, 0, 0, .04);--black-a05: rgba(0, 0, 0, .05);--black-a06: rgba(0, 0, 0, .06);--black-a08: rgba(0, 0, 0, .08);--black-a15: rgba(0, 0, 0, .15);--black-a18: rgba(0, 0, 0, .18);--black-a20: rgba(0, 0, 0, .2);--blue-600-a20: rgba(33, 90, 239, .2);--blue-700-a00: rgb(26 54 169 / 0);--blue-700-a10: rgb(26 54 169 / .1);--blue-700-a18: rgba(26, 54, 169, .18);--blue-700-a22: rgba(26, 54, 169, .22);--blue-700-a28: rgb(26 54 169 / .28);--c-brand: var(--blue-700);--c-bg: var(--gray-0);--c-bg-app: var(--blue-50);--c-surface: var(--gray-0);--c-surface-muted: var(--gray-50);--c-surface-brand: var(--blue-50);--c-text: var(--gray-800);--c-heading: var(--gray-900);--c-text-muted: var(--gray-500);--c-text-disabled: var(--gray-400);--c-border: var(--gray-200);--c-border-strong: var(--gray-300);--c-scrim: rgba(16, 24, 40, .5);--c-device: #0b0d12;--c-on-tone: var(--gray-0);--c-piano-black: #000;--c-instr-nut: var(--gray-700);--c-instr-string: var(--gray-500);--c-instr-mute: var(--rose-500);--c-backdrop: radial-gradient(circle at 50% 15%, #edf3fc 0%, #d8e6fa 100%);--c-primary: var(--blue-500);--c-primary-d: var(--blue-700);--c-primary-s: var(--blue-50);--c-correct: var(--green-500);--c-correct-d: var(--green-600);--c-correct-s: var(--green-100);--c-correct-text: var(--green-800);--c-wrong: var(--rose-500);--c-wrong-d: var(--rose-600);--c-wrong-s: var(--rose-100);--c-listen: var(--cyan-400);--c-listen-d: var(--cyan-700);--c-listen-s: var(--cyan-50);--c-see: var(--blue-500);--c-see-d: var(--blue-700);--c-see-s: var(--blue-50);--c-major: var(--amber-500);--c-major-d: var(--amber-700);--c-major-s: var(--amber-100);--c-minor: var(--blue-500);--c-minor-d: var(--blue-700);--c-minor-s: var(--blue-50);--c-reward: var(--yellow-400);--c-reward-d: var(--yellow-600);--c-link: var(--blue-600);--c-selected: var(--blue-500);--c-selected-s: var(--blue-50);--c-focus: var(--blue-500);--c-wave-from: var(--cyan-400);--c-wave-to: var(--blue-500);--font: "Mona Sans", system-ui, sans-serif;--font-music: "Noto Music", serif;--font-mono: ui-monospace, "SF Mono", Menlo, monospace;--fw-body: 500;--fw-label: 700;--fw-heading: 800;--fs-xs: 12px;--fs-sm: 13px;--fs-md: 15px;--fs-base: 16px;--fs-lg: 18px;--fs-xl: 21px;--fs-2xl: 26px;--fs-3xl: 34px;--fs-4xl: 56px;--lh-tight: 1.2;--lh-body: 1.45;--ls-caps: .05em;--ic-xs: 14px;--ic-sm: 18px;--ic-md: 22px;--ic-lg: 28px;--ic-xl: 36px;--ic-2xl: 42px;--ic-3xl: 48px;--ic-4xl: 60px;--sp-0-5: 2px;--sp-1-5: 6px;--sp-2-5: 10px;--sp-3-5: 14px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-14: 56px;--screen-pad: 18px;--r-xs: 4px;--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 24px;--r-full: 999px;--bw: 2px;--depth-sm: 3px;--depth-md: 4px;--depth-lg: 6px;--shadow-device: 0 24px 60px rgba(26, 54, 169, .22);--shadow-phone: 0 24px 64px -12px var(--blue-700-a22), 0 0 1px 1px var(--black-a05);--tap-min: 48px;--tap-answer: 64px;--dur-press: 80ms;--dur-fast: .2s;--dur-base: .32s;--dur-slow: .6s;--ease-out: cubic-bezier(.2, .9, .3, 1);--ease-spring: cubic-bezier(.3, 1.6, .5, 1);--z-raised: 2;--z-feedback: 5;--z-scrim: 6;--z-sheet: 7;--z-toast: 8}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;min-height:100%;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--c-bg);font-family:var(--font);color:var(--c-text)}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}#root{min-height:100%;min-height:100dvh;display:flex;flex-direction:column}.tone-blue{--tone: var(--blue-500);--tone-d: var(--blue-700);--tone-s: var(--blue-50);--tone-on: var(--c-on-tone)}.tone-royal{--tone: var(--blue-700);--tone-d: var(--blue-900);--tone-s: var(--blue-100);--tone-on: var(--c-on-tone)}.tone-cyan{--tone: var(--cyan-400);--tone-d: var(--cyan-700);--tone-s: var(--cyan-50);--tone-on: var(--blue-800)}.tone-green{--tone: var(--green-500);--tone-d: var(--green-600);--tone-s: var(--green-100);--tone-on: var(--c-on-tone)}.tone-red{--tone: var(--rose-500);--tone-d: var(--rose-800);--tone-s: var(--rose-100);--tone-on: var(--c-on-tone)}.tone-amber{--tone: var(--amber-500);--tone-d: var(--amber-700);--tone-s: var(--amber-100);--tone-on: var(--amber-900)}.tone-yellow{--tone: var(--yellow-400);--tone-d: var(--yellow-600);--tone-s: var(--yellow-100);--tone-on: var(--yellow-900)}.tone-ink{--tone: var(--gray-800);--tone-d: var(--gray-900);--tone-s: var(--gray-50);--tone-on: var(--c-on-tone)}.device{flex:1;min-height:100vh;min-height:100dvh;width:100%;background:var(--c-bg);display:flex;justify-content:center;transition:background var(--dur-fast)}.app{position:relative;width:100%;max-width:520px;height:100vh;height:100dvh;background:var(--c-bg);overflow:hidden;display:flex;flex-direction:column;font-weight:var(--fw-body)}.screen{flex:1;min-height:0;display:flex;flex-direction:column;padding:calc(var(--screen-pad) + env(safe-area-inset-top,0px)) var(--screen-pad) calc(var(--sp-5) + env(safe-area-inset-bottom,0px));position:relative;overflow-y:auto}.tab-body{flex:1;min-height:0;display:flex;flex-direction:column}@media (min-width: 641px){body{background:var(--c-backdrop);background-attachment:fixed}.device{background:transparent;padding:var(--sp-6) var(--sp-4);align-items:center;box-sizing:border-box}.app{max-width:540px;height:min(92dvh,880px);border-radius:var(--r-xl);border:1px solid var(--c-border);box-shadow:var(--shadow-phone)}}@media (min-width: 1024px){.app{max-width:560px}}@media (min-width: 641px) and (min-height: 500px){body:has(.app:is(.is-pwa,.is-touch)){background:var(--c-bg)}.device:has(>.app:is(.is-pwa,.is-touch)){padding:0;align-items:stretch;background:var(--c-bg)}.app:is(.is-pwa,.is-touch){--tablet-zoom: 1.12;--tablet-col: 700px;zoom:var(--tablet-zoom);container-type:inline-size;--gutter: max(0px, calc((100cqw - var(--tablet-col)) / 2));max-width:none;height:calc(100dvh / var(--tablet-zoom));border:0;border-radius:0;box-shadow:none}.app:is(.is-pwa,.is-touch) .screen{padding-inline:calc(var(--gutter) + var(--screen-pad))}.app:is(.is-pwa,.is-touch) .screen.map,.app:is(.is-pwa,.is-touch) .screen.profile{padding-inline:0}.app:is(.is-pwa,.is-touch) .map-top,.app:is(.is-pwa,.is-touch) .map-scroll{padding-inline:calc(var(--gutter) + var(--screen-pad))}.app:is(.is-pwa,.is-touch) .screen.profile>:not(.pf-hero){margin-inline:var(--gutter)}.app:is(.is-pwa,.is-touch) .pf-name{left:calc(var(--gutter) + var(--screen-pad))}.app:is(.is-pwa,.is-touch) .pf-gear{right:calc(var(--gutter) + 10px)}.app:is(.is-pwa,.is-touch) .tabs{padding-inline:var(--gutter)}.app:is(.is-pwa,.is-touch) .sheet{max-width:var(--tablet-col);margin-inline:auto}.app:is(.is-pwa,.is-touch) .dialog{max-width:480px;margin-inline:auto}}@media (max-height: 700px) and (min-width: 641px){.device{padding:0;align-items:stretch}.app{height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none}}.h1{color:var(--c-heading);font-weight:var(--fw-heading);font-size:var(--fs-2xl);line-height:var(--lh-tight);margin:var(--sp-0-5) 0 0}.h1.mb{margin-bottom:var(--sp-4)}.h2{font-weight:var(--fw-heading);font-size:var(--fs-xl);line-height:1.2;margin:0}.h3{color:var(--c-heading);font-weight:var(--fw-heading);font-size:var(--fs-lg);line-height:var(--lh-tight);margin:0}.t-body{font-size:var(--fs-md);font-weight:var(--fw-body);line-height:var(--lh-body)}.t-caption{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--c-text-muted)}.t-num{font-size:var(--fs-3xl);font-weight:var(--fw-heading);line-height:1;font-variant-numeric:tabular-nums}.cap{font-size:var(--fs-xs);font-weight:var(--fw-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-text-muted)}.cap svg{font-size:var(--ic-sm);flex:none}.cap.listen{color:var(--c-listen-d)}.cap.see{color:var(--c-see-d)}.mute{color:var(--c-text-muted);margin:0}.small{font-size:var(--fs-sm)}.center{text-align:center}.row{display:flex;align-items:center}.row.gap{gap:var(--sp-2)}.col{display:flex;flex-direction:column;gap:var(--sp-1)}.mt-auto{margin-top:auto;padding-top:var(--sp-4)}.big-emoji{font-size:var(--fs-4xl);line-height:1}.b3{display:block;border-radius:var(--r-lg);text-align:center;font-weight:var(--fw-heading);font-size:var(--fs-md);letter-spacing:.05em;text-transform:uppercase;padding:var(--sp-3-5) var(--sp-3) var(--sp-3);min-height:var(--tap-min);background:var(--tone);color:var(--tone-on);border-bottom:var(--depth-md) solid var(--tone-d);transition:transform var(--dur-press),border-bottom-width var(--dur-press),filter var(--dur-fast);-webkit-user-select:none;user-select:none}@media (hover: hover){.b3:hover{filter:brightness(1.05)}}.b3:active{transform:translateY(var(--depth-md));border-bottom-width:0;margin-bottom:var(--depth-md)}.b3.full{width:100%}.b3.white{background:var(--c-surface);color:var(--c-link);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-md)}.b3.off,.b3:disabled{background:var(--c-border);border-color:var(--c-border-strong);color:var(--c-text-disabled);cursor:default;filter:none;transform:none}.b3.sm{font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-2-5) var(--sp-1-5);min-height:0;border-radius:var(--r-md)}.link{display:block;width:100%;text-align:center;font-weight:var(--fw-heading);font-size:var(--fs-md);letter-spacing:.05em;text-transform:uppercase;color:var(--c-link);padding:var(--sp-3) 0;border-radius:var(--r-md)}@media (hover: hover){.link:hover{background:var(--c-surface-muted)}}.link.red{color:var(--c-wrong-d)}.pill{display:inline-flex;align-items:center;gap:5px;border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-sm);border-radius:var(--r-md);padding:var(--sp-1-5) var(--sp-3);font-size:var(--fs-sm);font-weight:var(--fw-label);color:var(--c-link);background:var(--c-surface)}.pill.static{color:var(--c-text-muted);border-bottom-width:var(--bw)}.mini-play{position:relative;min-width:34px;height:32px;padding:0 var(--sp-2-5);border-radius:var(--r-md);background:var(--tone, var(--c-listen));border-bottom:var(--depth-sm) solid var(--tone-d, var(--c-listen-d));color:var(--tone-on, var(--c-on-tone));font-weight:var(--fw-heading);font-size:var(--fs-xs)}.mini-play:after{content:"";position:absolute;inset:calc(-1 * var(--sp-1-5))}.mini-play:active{transform:translateY(2px);border-bottom-width:1px}.tile{background:var(--c-surface);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-md);border-radius:var(--r-lg)}.tabs{display:grid;grid-template-columns:repeat(var(--tab-count, 3),1fr);border-top:var(--bw) solid var(--c-border);background:var(--c-surface);padding:var(--sp-2-5) 0 calc(var(--sp-3-5) + env(safe-area-inset-bottom))}.tabs button{display:flex;justify-content:center;color:var(--tone)}.tabs button span{display:grid;place-items:center;width:56px;height:46px;border:var(--bw) solid transparent;border-radius:var(--r-lg);font-size:var(--ic-lg);transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-press)}.tabs button:active span{transform:scale(.92)}.tabs .on span{background:var(--c-selected-s);border-color:var(--blue-200)}.tabs button:focus-visible{outline:none}.tabs button:focus-visible span{outline:3px solid var(--c-focus);outline-offset:2px}.map,.practice-screen{padding:0;--map-top-h: 56px;overflow:hidden}.map-top,.student-header{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);height:calc(var(--map-top-h, 56px) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--screen-pad) 0;border-bottom:var(--bw) solid var(--c-border);background:var(--c-surface);position:sticky;top:0;z-index:var(--z-raised)}.chip-stat{display:inline-flex;align-items:center;gap:var(--sp-1);height:34px;font-weight:var(--fw-heading);font-size:var(--fs-sm);padding:0 var(--sp-2-5);border-radius:var(--r-md);background:var(--c-surface-muted);border:var(--bw) solid var(--c-border);box-sizing:border-box}.map-scroll,.practice-scroll{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-2) var(--screen-pad) var(--sp-10)}.practice-scroll{padding-top:var(--sp-4)}.map .unit{position:sticky;top:var(--sp-2);z-index:var(--z-raised);box-shadow:0 calc(-1 * var(--sp-2) - 4px) 0 4px var(--c-bg);will-change:transform,opacity;transform-origin:center top}.unit{color:var(--tone-on);background:var(--tone);border-radius:var(--r-lg);border-bottom:5px solid var(--tone-d);display:flex;align-items:stretch;overflow:hidden;margin:var(--sp-2) 0 var(--sp-5)}.unit-text{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--sp-3) var(--sp-4);min-width:0}.unit-listen{flex:none;width:60px;display:grid;place-items:center;font-size:var(--ic-lg);color:var(--tone-on);border-left:var(--bw) solid color-mix(in srgb,var(--tone-d) 45%,transparent)}.unit-listen:active{background:color-mix(in srgb,var(--tone-d) 20%,transparent)}.unit small{font-size:var(--fs-xs);font-weight:var(--fw-heading);opacity:.85;text-transform:uppercase;letter-spacing:var(--ls-caps)}.unit b{font-size:var(--fs-lg);font-weight:var(--fw-heading);line-height:1.15}.path{display:flex;flex-direction:column;align-items:center;gap:var(--sp-14);padding:var(--sp-14) 0 var(--sp-8)}.node{position:relative;display:flex;flex-direction:column;align-items:center}.node-btn{width:72px;height:66px;border-radius:50%;background:var(--tone);box-shadow:0 7px 0 var(--tone-d);color:var(--tone-on);font-size:var(--ic-lg);font-weight:var(--fw-heading);display:grid;place-items:center;transition:transform var(--dur-press),box-shadow var(--dur-press)}.node-btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--tone-d)}.node.done .node-btn{background:var(--c-reward);box-shadow:0 7px 0 var(--c-reward-d);color:var(--yellow-900)}.node.locked .node-btn{background:var(--c-border);box-shadow:0 7px 0 var(--c-border-strong);font-size:var(--fs-2xl)}.node.current .node-btn{width:80px;height:74px;font-size:var(--ic-xl)}.node.current{margin-top:var(--sp-5)}.node.fresh .node-btn{animation:unlock .9s var(--ease-spring) both}.start-bubble{position:absolute;bottom:calc(100% + 14px);white-space:nowrap;background:var(--c-surface);border:var(--bw) solid var(--c-border);border-radius:var(--r-md);padding:var(--sp-1-5) var(--sp-3);font-weight:var(--fw-heading);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--tone-d);animation:bob 1.4s ease-in-out infinite}.start-bubble:after{content:"";position:absolute;left:50%;bottom:-8px;width:12px;height:12px;margin-left:calc(-1 * var(--sp-1-5));background:var(--c-surface);border-right:var(--bw) solid var(--c-border);border-bottom:var(--bw) solid var(--c-border);transform:rotate(45deg)}.node-stars{position:absolute;top:calc(100% + 10px);display:flex;gap:1px;font-size:var(--ic-xs);color:var(--c-border)}.node-stars i{font-style:normal}.node-stars i.on{color:var(--c-reward)}.map-end{text-align:center;color:var(--c-text-disabled);font-weight:var(--fw-label);font-size:var(--fs-sm)}.toast{position:absolute;left:var(--sp-4);right:var(--sp-4);bottom:96px;margin:0 auto;width:fit-content;max-width:calc(100% - var(--sp-8));display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-2-5) var(--sp-4);background:var(--c-surface);color:var(--c-heading);border:var(--bw) solid var(--c-border);border-bottom:var(--depth-sm) solid var(--c-border-strong);border-radius:var(--r-lg);box-shadow:0 8px 24px -4px var(--blue-700-a18),0 2px 6px var(--black-a04);font-size:var(--fs-sm);font-weight:var(--fw-label);line-height:var(--lh-tight);text-align:center;z-index:var(--z-toast)}.toast-success{background:var(--c-correct-s);color:var(--c-correct-text);border-color:var(--c-correct);border-bottom-color:var(--c-correct-d)}.toast-error{background:var(--c-wrong-s);color:var(--c-wrong-d);border-color:var(--c-wrong);border-bottom-color:var(--c-wrong-d)}.scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--c-scrim);z-index:var(--z-scrim);animation:fade var(--dur-fast) both}.sheet{position:absolute;left:0;right:0;bottom:0;z-index:var(--z-sheet);background:var(--c-surface);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--sp-2-5) var(--screen-pad) calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--sp-3);animation:slideUp var(--dur-fast) var(--ease-out) both;max-height:92%;overflow-y:auto}.grab{align-self:center;width:44px;height:5px;border-radius:var(--r-xs);background:var(--c-border);margin-bottom:var(--sp-1)}.dialog{position:absolute;left:22px;right:22px;top:50%;transform:translateY(-50%);z-index:var(--z-sheet);background:var(--c-surface);border-radius:var(--r-xl);padding:22px var(--screen-pad) var(--sp-2-5);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2-5);text-align:center}.sheet .cap{font-size:var(--fs-sm);font-weight:var(--fw-label);color:var(--blue-700)}.sheet .h2{font-size:var(--fs-xl);line-height:1.25;margin:var(--sp-0-5) 0 var(--sp-1)}.sheet p.mute.small{font-size:var(--fs-sm)}.lesson-meta{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-0-5)}.lesson-meta .pill{font-size:var(--fs-sm);padding:var(--sp-1) var(--sp-3)}.pool{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-1) 0}.pool-i{min-width:52px;padding:var(--sp-2) var(--sp-3-5);text-align:center;border-radius:var(--r-lg);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-md);font-weight:var(--fw-heading);font-size:var(--ic-sm)}.pool-i.new{border-color:var(--c-correct);background:var(--c-correct-s);color:var(--c-correct-d)}.kind-card{position:relative;width:100%;display:flex;flex-direction:column;text-align:left;border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--sp-3-5);color:var(--c-on-tone);border-bottom:var(--depth-lg) solid;transition:transform var(--dur-press);flex-shrink:0;min-height:fit-content}.kind-card:active{transform:translateY(var(--depth-md))}.kind-card.note{background:linear-gradient(140deg,var(--blue-600),var(--blue-500));border-color:var(--blue-700)}.kind-card.chord{background:linear-gradient(140deg,var(--blue-500),var(--cyan-400));border-color:var(--blue-700)}.kind-card.quality{background:linear-gradient(140deg,var(--amber-500),var(--red-500));border-color:var(--red-700)}.kc-art{height:132px;display:grid;place-items:center;background:var(--white-a12);padding:var(--sp-3) 18px;flex-shrink:0}.kc-emojis{display:flex;align-items:center;justify-content:center;gap:22px;width:100%}.kc-emoji-item{display:flex;flex-direction:column;align-items:center;font-size:var(--ic-3xl);line-height:1;filter:drop-shadow(0 4px 6px var(--black-a15))}.kc-emoji-item i{font-style:normal;font-size:var(--fs-md);font-weight:var(--fw-heading);margin-top:var(--sp-1-5);letter-spacing:.02em}.kc-emoji-divider{font-size:var(--fs-md);font-weight:var(--fw-heading);text-transform:uppercase;opacity:.85;background:var(--black-a18);border-radius:50%;width:32px;height:32px;display:grid;place-items:center}.kind-card .kc-art .staff line{stroke:var(--white-a55)}.kind-card .kc-art .clef{fill:var(--c-on-tone)}.kind-card.drum{background:linear-gradient(140deg,var(--cyan-700),var(--cyan-400));border-color:var(--cyan-700)}.kind-card .kc-art .drum-staff .perc-clef rect{fill:var(--gray-0)}.kind-card .kc-art .staff{--tone: var(--gray-0)}.kind-card.chord .kc-art .piano{width:100%;max-width:320px;min-width:0;height:102px;margin:0}.kc-body{padding:var(--sp-3) calc(var(--sp-10) + var(--sp-4)) var(--sp-4) var(--sp-4);display:flex;flex-direction:column;flex-shrink:0}.kc-body b{font-size:var(--fs-xl);font-weight:var(--fw-heading)}.kc-body span{font-size:var(--fs-sm);opacity:.95}.kc-body em{font-style:normal;margin-top:var(--sp-1-5);align-self:flex-start;background:var(--black-a18);border-radius:var(--r-sm);padding:3px var(--sp-2);font-size:var(--fs-sm);line-height:1.2}.kc-go{position:absolute;right:var(--sp-4);bottom:var(--sp-4);width:var(--sp-10);height:var(--sp-10);border-radius:50%;background:var(--c-surface);color:var(--c-text);display:grid;place-items:center;font-size:var(--fs-2xl);font-weight:var(--fw-heading)}.sense-pick{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2-5)}.sense-pick.single{grid-template-columns:1fr}.sense{padding:var(--sp-4) var(--sp-2-5) var(--sp-3);display:flex;flex-direction:column;align-items:center;gap:var(--sp-0-5);text-align:center}.sense .emo{font-size:var(--fs-3xl)}.sense b{font-size:var(--fs-lg);font-weight:var(--fw-heading)}.sense small{font-size:var(--fs-sm);color:var(--c-text-muted)}.sense.on{border-color:var(--c-selected);background:var(--c-selected-s)}.sense.on b{color:var(--c-link)}.quiz{padding-top:calc(var(--sp-3-5) + env(safe-area-inset-top,0px));overflow:hidden}@media (max-height: 500px){.quiz{overflow-y:auto}}.qtop{display:flex;align-items:center;gap:var(--sp-3);min-height:30px}.x{position:relative;font-size:26px;color:var(--c-text-disabled);font-weight:var(--fw-heading);width:28px;height:28px;border-radius:var(--r-sm);flex:none}.x:after{content:"";position:absolute;inset:calc(-1 * var(--sp-2))}.bar{flex:1;min-width:0;height:var(--sp-4);border-radius:var(--r-sm);background:var(--c-border);overflow:hidden}.bar i{display:block;height:100%;border-radius:var(--r-sm);background:var(--c-primary);box-shadow:inset 0 -5px 0 var(--black-a08),inset 0 4px 0 var(--white-a35);transition:width var(--dur-base) var(--ease-spring)}.qtop-action{flex:none;display:inline-flex;align-items:center;transition:opacity var(--dur-fast) ease,visibility var(--dur-fast) ease}.qtop-action.invisible{opacity:0;visibility:hidden;pointer-events:none}.freebar{flex:1;display:flex;justify-content:center;align-items:center;gap:var(--sp-4);font-weight:var(--fw-heading);font-size:var(--fs-lg);line-height:1}.freebar svg{font-size:var(--ic-md)}.streak{color:var(--c-text-disabled)}.streak.hot{color:var(--c-major);animation:bob 1s ease-in-out infinite}.cnt{color:var(--c-correct-d)}.qhead{margin:var(--sp-4) 0 var(--sp-1)}.stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:var(--sp-3-5);width:100%}.wave{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2-5);padding:18px var(--sp-5) var(--sp-3-5);border-radius:28px;background:var(--c-listen-s);border:var(--bw) solid var(--cyan-300);border-bottom-width:5px;transition:transform var(--dur-press)}.wave:active{transform:translateY(3px)}.wave-bars{display:flex;align-items:center;gap:5px;height:110px}.wave.md .wave-bars{height:70px;gap:var(--sp-1)}.wave-bars span{width:var(--sp-2);height:100%;border-radius:var(--r-xs);background:linear-gradient(180deg,var(--c-wave-from),var(--c-wave-to));transform:scaleY(.15);transform-origin:center;will-change:transform}.wave-hint{font-size:var(--fs-sm);color:var(--c-listen-d);font-weight:var(--fw-label)}.card-visual{width:100%;box-sizing:border-box;padding:var(--sp-3) var(--sp-3-5);border-radius:var(--r-xl);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-md);background:var(--c-surface);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}.card-visual.wide{width:100%}.card-visual .piano{width:100%;height:145px}.staff{display:block;max-width:100%;height:auto;overflow:visible}.staff line.sl{stroke:var(--c-border-strong)}.staff line.ledger{stroke:var(--gray-500)}.staff .clef{font-family:var(--font-music);font-size:80px;fill:var(--gray-400)}.staff .clef-f,.staff .clef-c{font-size:50px}.staff .nhead{fill:var(--tone);transition:fill var(--dur-fast)}.staff .stem{stroke:var(--tone)}.staff .nlabel{font-weight:var(--fw-heading);font-size:16px;fill:var(--tone-on)}.staff .nlabel-pill rect{fill:var(--tone)}.map-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-6) var(--screen-pad);text-align:center}.map-empty .h2,.map-empty p{margin:0}.drum-pad{padding:var(--sp-2) 0}.quiz.has-drum .stage{flex:0 0 auto;margin-top:var(--sp-4)}.quiz.has-drum .staff-card .staff{max-width:300px}@media (max-height: 720px){.quiz.has-drum .staff-card .staff{max-width:220px}.quiz.has-drum .pad-dock{min-height:104px}.quiz.has-drum .qhead{margin-top:var(--sp-2)}}.quiz.has-drum .drum-pad{flex:1 1 0;min-height:0;container-type:size;display:flex;align-items:flex-end;justify-content:center;padding-bottom:0}.quiz.has-drum .pad-dock.ask{justify-content:flex-start}.dp-kit{position:relative;width:min(100%,calc(100cqh / .92));max-width:420px;aspect-ratio:1 / .92;margin:0 auto;border-radius:var(--r-xl);background:radial-gradient(ellipse at 50% 60%,var(--blue-100),var(--blue-50) 70%)}.dp-piece{position:absolute;aspect-ratio:1;border-radius:var(--r-full);display:grid;place-items:center;padding:0;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform var(--dur-fast),filter var(--dur-fast)}.dp-piece:active{transform:scale(.95)}.dp-piece.ghost{opacity:.28;cursor:default;pointer-events:none}.dp-piece.drum{background:radial-gradient(circle,var(--gray-0) 0 58%,var(--gray-100) 59% 64%,var(--gray-0) 65%);border:calc(var(--sp-1) + var(--bw)) solid var(--blue-700);box-shadow:0 var(--depth-md) 0 var(--blue-900)}.dp-piece.cymbal{background:radial-gradient(circle,var(--amber-500) 0 11%,var(--amber-700) 12% 13%,transparent 14%),repeating-radial-gradient(circle,var(--amber-300) 0 6%,var(--amber-100) 6% 9%);border:var(--bw) solid var(--amber-700);box-shadow:0 var(--depth-sm) 0 var(--amber-900)}.dp-piece.drum.ok,.dp-piece.cymbal.ok{background:var(--c-correct-s);border-color:var(--c-correct-d)}.dp-piece.drum.no,.dp-piece.cymbal.no{background:var(--c-wrong-s);border-color:var(--c-wrong-d)}.dp-label{max-width:92%;font-size:var(--fs-xs);font-weight:var(--fw-heading);color:var(--c-heading);background:var(--c-surface);border-radius:var(--r-full);padding:0 calc(var(--sp-1) + var(--bw));line-height:1.5;text-align:center;white-space:nowrap}.dp-kick{left:33%;top:50%;width:36%;background:radial-gradient(circle,var(--cyan-50) 0 22%,var(--gray-0) 23% 60%,var(--gray-100) 61% 64%,var(--gray-0) 65%)}.dp-ftom{left:70%;top:50%;width:27%}.dp-tom1{left:29%;top:22%;width:19%}.dp-tom2{left:49%;top:21%;width:20%}.dp-snare{left:23%;top:46%;width:24%}.dp-crash{left:2%;top:1%;width:32%}.dp-ride{left:64%;top:2%;width:34%}.dp-piece.dp-hhp{left:5%;top:80%;width:18%;aspect-ratio:3 / 2;border-radius:var(--r-md);background:var(--gray-200);border:var(--bw) solid var(--blue-700);box-shadow:0 var(--depth-sm) 0 var(--blue-900)}.dp-hh{position:absolute;left:0%;top:40%;width:28%;aspect-ratio:1}.dp-hh .dp-piece.half{top:0;width:50%;height:100%;aspect-ratio:auto}.dp-hh .dp-piece.left{left:0;border-radius:var(--r-full) 0 0 var(--r-full);border-right-width:1px}.dp-hh .dp-piece.right{left:50%;border-radius:0 var(--r-full) var(--r-full) 0;border-left-width:1px}.dp-hh .dp-piece.left.cymbal{background:repeating-radial-gradient(circle at 100% 50%,var(--amber-300) 0 12%,var(--amber-100) 12% 18%)}.dp-hh .dp-piece.right.cymbal{background:repeating-radial-gradient(circle at 0% 50%,var(--amber-300) 0 12%,var(--amber-100) 12% 18%)}.dp-hh .dp-piece.left.ok,.dp-hh .dp-piece.right.ok{background:var(--c-correct-s)}.dp-hh .dp-piece.left.no,.dp-hh .dp-piece.right.no{background:var(--c-wrong-s)}.dp-hh-name{position:absolute;left:50%;top:100%;transform:translate(-50%,15%);font-size:var(--fs-xs);font-weight:var(--fw-heading);color:var(--blue-700);pointer-events:none}.drum-staff .perc-clef rect{fill:var(--gray-400)}.drum-staff .nhead ellipse{fill:var(--tone);transition:fill var(--dur-fast)}.drum-staff .nhead-x line,.drum-staff .nhead-x circle{stroke:var(--tone);transition:stroke var(--dur-fast)}.piano{position:relative;width:100%;min-width:100%;box-sizing:border-box;height:145px;margin:var(--sp-1) 0 var(--sp-1-5);touch-action:manipulation;-webkit-user-select:none;user-select:none}.wk{position:absolute;top:0;bottom:0;background:var(--c-surface);border:1.5px solid var(--c-border-strong);border-bottom:7px solid var(--gray-400);border-radius:0 0 var(--r-md) var(--r-md);margin-left:-1px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--sp-3);cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .08s ease,border-bottom-width .08s ease,background .12s ease}@media (hover: hover){.wk:hover{background:var(--blue-50)}}.wk:active,.wk.pressed{transform:translateY(4px);border-bottom-width:3px!important;background:var(--blue-100)!important;box-shadow:inset 0 3px 6px var(--black-a15)}.wk.on{background:var(--tone)!important;border-color:var(--tone-d);border-bottom-color:var(--tone-d)}.wk.on span{color:var(--tone-on)}.wk span{font-weight:var(--fw-heading);font-size:var(--fs-md);color:var(--gray-600);pointer-events:none}.bk{position:absolute;top:0;height:60%;background:var(--gray-800);border:1px solid var(--gray-900);border-bottom:6px solid var(--c-piano-black);border-radius:0 0 var(--r-sm) var(--r-sm);z-index:var(--z-raised);cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .08s ease,border-bottom-width .08s ease,filter .08s ease}@media (hover: hover){.bk:hover{background:var(--gray-700)}}.bk:active,.bk.pressed{transform:translateY(3px);border-bottom-width:3px!important;filter:brightness(1.4)}.ans{display:grid;gap:var(--sp-2);margin-top:var(--sp-3-5)}.ans.grid7{grid-template-columns:repeat(4,1fr)}.ans.two{grid-template-columns:1fr 1fr}.ans.three,.ans.six{grid-template-columns:repeat(3,1fr)}.answer-space{height:var(--sp-2);flex:none}.ans.pad{display:block}.piano-pad .piano{height:168px;margin:0}.piano-pad .wk span{font-size:var(--fs-lg)}.piano-pad .wk.ok{background:var(--c-correct-s)!important;border-color:var(--c-correct);border-bottom-color:var(--c-correct-d)}.piano-pad .wk.ok span{color:var(--c-correct-text)}.piano-pad .wk.no{background:var(--c-wrong-s)!important;border-color:var(--c-wrong);border-bottom-color:var(--c-wrong-d)}.piano-pad .wk.no span{color:var(--c-wrong-d)}.piano-pad .wk:disabled{background:var(--gray-100);cursor:default}.piano-pad .wk:disabled:active{transform:none;border-bottom-width:7px!important;box-shadow:none}.fret-pad{padding:var(--sp-2-5) var(--sp-1-5) var(--sp-1);border-radius:var(--r-lg);background:var(--gray-0);border:1.5px solid var(--c-border);touch-action:manipulation;-webkit-user-select:none;user-select:none}.fp-grid{display:grid;grid-auto-rows:42px}.fret-pad.bass .fp-grid{grid-auto-rows:48px}.fp-row{display:contents}.fp-name{grid-column:1;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-heading);color:var(--c-text-muted)}.fp-cell{position:relative;display:flex;align-items:center;justify-content:center;border-right:2px solid var(--gray-400)}.fp-cell.open{border-right:6px solid var(--gray-700)}.fp-cell:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--gray-500)}.fret-pad.bass .fp-cell:before{height:3px}.fp-dot{position:relative;z-index:var(--z-raised);width:36px;height:36px;border-radius:50%;background:var(--c-surface);border:2px solid var(--blue-200);border-bottom-width:4px;font-weight:var(--fw-heading);font-size:var(--fs-md);color:var(--gray-700);cursor:pointer;transition:transform var(--dur-press),border-bottom-width var(--dur-press),background var(--dur-fast)}.fp-dot:after{content:"";position:absolute;inset:calc(-1 * var(--sp-1))}@media (hover: hover){.fp-dot:hover{background:var(--blue-50)}}.fp-dot:active{transform:translateY(2px);border-bottom-width:2px;background:var(--blue-100)}.fp-dot.ok{background:var(--c-correct);border-color:var(--c-correct-d);color:var(--c-on-tone)}.fp-dot.no{background:var(--c-wrong-s);border-color:var(--c-wrong);color:var(--c-wrong-d)}.fp-dot:disabled{opacity:.35;cursor:default}.fp-frets{display:grid;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--c-text-muted);text-align:center}.opt{min-height:var(--tap-answer);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;transition:transform var(--dur-press),background var(--dur-fast)}@media (hover: hover){.opt:hover:not(:disabled){background:var(--c-surface-muted)}}.opt:active:not(:disabled){transform:translateY(3px);border-bottom-width:var(--bw)}.opt b{font-size:var(--fs-xl);font-weight:var(--fw-heading)}.opt small{font-size:var(--fs-xs);color:var(--c-text-muted);margin-top:3px;font-weight:var(--fw-label)}.opt:disabled{opacity:.3;background:var(--c-surface-muted);cursor:default}.opt.major b{color:var(--c-major-d)}.opt.minor b{color:var(--c-minor-d)}.opt.big{min-height:132px}.opt .emo{font-size:var(--ic-xl);margin-bottom:var(--sp-1)}.opt.vui{background:var(--c-major-s);border-color:var(--c-major);color:var(--c-major-d)}.opt.buon{background:var(--c-minor-s);border-color:var(--c-minor);color:var(--c-minor-d)}.opt.ok{background:var(--c-correct-s)!important;border-color:var(--c-correct)!important}.opt.ok b,.opt.ok small,.opt.ok{color:var(--c-correct-d)!important}.opt.no{background:var(--c-wrong-s)!important;border-color:var(--c-wrong)!important;opacity:.7}.opt.no b,.opt.no small,.opt.no{color:var(--c-wrong-d)!important}.bounce{animation:bounce .45s var(--ease-spring)}.shake{animation:shake .35s}.fb{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-4) var(--screen-pad) calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--sp-2-5);z-index:var(--z-feedback);background:var(--c-correct-s)}.fb.static{position:relative}.fb .t{display:flex;align-items:center;gap:var(--sp-2-5);font-size:var(--fs-xl);font-weight:var(--fw-heading);color:var(--c-correct-d)}.fb .ic,.fb-head .ic{width:36px;height:36px;border-radius:50%;background:var(--c-surface);display:grid;place-items:center;font-size:var(--fs-lg);flex:none}.fb .d{font-size:var(--fs-sm);color:var(--c-correct-text)}.fb-head{display:flex;align-items:center;gap:var(--sp-2-5);font-size:var(--fs-lg);font-weight:var(--fw-heading);color:var(--c-wrong-d)}.fb-head .ic{background:var(--c-wrong-s)}.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2-5)}.cmp{border-radius:var(--r-lg);border:var(--bw) solid;border-bottom-width:var(--depth-md);padding:var(--sp-2-5);display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}.cmp small{font-size:var(--fs-xs);font-weight:var(--fw-heading);text-transform:uppercase;letter-spacing:.05em}.cmp b{font-size:var(--fs-2xl);font-weight:var(--fw-heading)}.cmp.ok{border-color:var(--c-correct);background:var(--c-correct-s);color:var(--c-correct-d)}.cmp.no{border-color:var(--c-wrong);background:var(--c-wrong-s);color:var(--c-wrong-d)}.explain-visual{display:flex;justify-content:center;padding-top:var(--sp-2);width:100%;box-sizing:border-box}.explain-visual .piano{height:135px;width:100%}.tip{background:var(--c-surface-muted);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3-5);font-size:var(--fs-md);line-height:1.55}.intro .h1{margin-bottom:var(--sp-1);font-size:var(--fs-2xl)}.intro p.mute{font-size:var(--fs-md);line-height:1.5}.intro-visual{width:100%;box-sizing:border-box;margin:var(--sp-3-5) 0;padding:var(--sp-3-5);border-radius:var(--r-xl);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-md);display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}.intro-visual .piano{height:145px;width:100%}.intro-cards{display:grid;gap:var(--sp-2-5);grid-template-columns:repeat(3,1fr)}.intro-cards.n2{grid-template-columns:1fr 1fr}.intro-card{padding:var(--sp-3-5) var(--sp-1-5) var(--sp-2-5);display:flex;flex-direction:column;align-items:center}.intro-card b{font-size:var(--fs-2xl);font-weight:var(--fw-heading)}.intro-card small{font-size:var(--fs-sm);color:var(--c-link);font-weight:var(--fw-label)}.intro-card.on{border-color:var(--c-see);background:var(--c-see-s)}.intro-card.heard small{color:var(--c-correct-d)}.summary,.result{align-items:stretch}.sum-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-1-5);margin:26px 0 var(--sp-5)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}.st{border:var(--bw) solid var(--tone);border-radius:var(--r-lg);overflow:hidden;text-align:center}.st small{display:block;color:var(--tone-on);background:var(--tone);font-size:var(--fs-xs);font-weight:var(--fw-heading);text-transform:uppercase;padding:var(--sp-1) var(--sp-0-5);letter-spacing:.04em}.st b{display:block;background:var(--c-surface);padding:var(--sp-2-5) 0;font-size:var(--fs-xl);font-weight:var(--fw-heading)}.miss{margin-top:var(--sp-3-5);padding:var(--sp-3) var(--sp-3-5) var(--sp-1-5)}.row2{display:flex;align-items:center;gap:var(--sp-2-5);padding:var(--sp-2) 0;border-top:var(--bw) solid var(--c-surface-muted)}.row2:first-of-type{border-top:0}.miss-name{font-size:var(--fs-xl);font-weight:var(--fw-heading);min-width:44px}.row2 .mute{flex:1}.stars.big{display:flex;gap:var(--sp-1-5);align-items:flex-end}.stars.big i{font-style:normal;font-size:var(--ic-4xl);line-height:1;color:var(--c-border);animation:starPop .5s var(--ease-spring) both}.stars.big i:nth-child(2){font-size:72px}.stars.big i.on{color:var(--c-reward);text-shadow:0 4px 0 var(--c-reward-d)}.score-ring{align-self:center;width:156px;height:156px;border-radius:50%;background:conic-gradient(var(--tone) var(--pct),var(--c-border) 0);display:grid;place-items:center;margin-bottom:var(--sp-3-5)}.score-ring>div{width:124px;height:124px;border-radius:50%;background:var(--c-surface);display:flex;flex-direction:column;align-items:center;justify-content:center}.score-ring b{font-size:var(--fs-3xl);font-weight:var(--fw-heading)}.score-ring small{font-size:var(--fs-sm);color:var(--c-text-muted);text-align:center;line-height:1.2;padding:0 var(--sp-3)}.result .mt-auto,.result .sum-hero{position:relative;z-index:var(--z-raised)}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:1}.confetti i{position:absolute;top:-20px;width:10px;height:14px;border-radius:var(--r-xs);background:var(--tone);animation:fall linear both}.tools .soon{padding:28px var(--screen-pad);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1-5)}.tools .soon b{font-size:var(--fs-xl);font-weight:var(--fw-heading)}.metro{animation:tick 1s ease-in-out infinite;transform-origin:50% 90%}.pop-in{animation:popIn var(--dur-base) var(--ease-spring) both}.slide-up{animation:slideUp var(--dur-fast) var(--ease-out) both}@keyframes popIn{0%{transform:scale(.85);opacity:0}}@keyframes slideUp{0%{transform:translateY(100%)}}@keyframes fade{0%{opacity:0}}@keyframes bounce{50%{transform:scale(1.08)}}@keyframes shake{20%,60%{transform:translate(-7px)}40%,80%{transform:translate(7px)}}@keyframes pulse{50%{outline-offset:9px}}@keyframes bob{50%{transform:translateY(-4px)}}@keyframes unlock{0%{transform:scale(.4) rotate(-20deg);filter:grayscale(1)}60%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes starPop{0%{transform:scale(0) rotate(-40deg)}}@keyframes fall{to{transform:translateY(900px) rotate(540deg)}}@keyframes tick{0%,to{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}.app svg:not(.staff){flex:none}.cap,.pill,.chip-stat,.streak,.cnt,.map-end,.mini-play,.intro-card small,.fb-head,.st b{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1)}.map-end{display:flex}.toast svg{font-size:var(--ic-sm);color:var(--c-primary)}.toast-success svg{color:var(--c-correct-d)}.toast-error svg{color:var(--c-wrong-d)}.st b{display:flex}.x{display:grid;place-items:center}.ic-reward{color:var(--c-reward)}.ic-primary{color:var(--c-primary)}.ic-major{color:var(--c-major)}.chip-stat svg{font-size:var(--fs-lg)}.kc-go svg{font-size:var(--ic-md)}.sense .emo{color:var(--c-link);line-height:1}.sense:not(.on) .emo{color:var(--c-text-muted)}.fb-head .ic{color:var(--c-wrong-d)}.fb .ic{color:var(--c-correct-d)}.tip{display:flex;gap:var(--sp-2);align-items:flex-start}.tip svg{font-size:var(--fs-lg);margin-top:1px}.big-icon{font-size:76px;line-height:0;color:var(--c-primary)}.big-icon.trophy{color:var(--c-major)}.stars.big i.on{text-shadow:none}.stars.big i.on svg{filter:drop-shadow(0 4px 0 var(--c-reward-d))}.node-btn svg{font-size:32px}.node.locked .node-btn svg{font-size:var(--ic-lg)}.cap{justify-content:flex-start}.node.locked .node-btn{color:var(--c-text-disabled)}.screen,.sheet,.map-scroll{scrollbar-width:none;-ms-overflow-style:none}.screen::-webkit-scrollbar,.sheet::-webkit-scrollbar,.map-scroll::-webkit-scrollbar{display:none}.w-full{width:100%}.between{justify-content:space-between}.align-center{align-items:center}.my-2{margin-top:var(--sp-2);margin-bottom:var(--sp-2)}.mb-1{margin-bottom:var(--sp-1)}.mb-3{margin-bottom:var(--sp-3)}.mr-1{margin-right:var(--sp-1)}.song-card{background:linear-gradient(135deg,var(--blue-50),var(--cyan-50));border:1.5px dashed var(--blue-300);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0;display:flex;flex-direction:column;gap:var(--sp-2);text-align:left}.song-head{display:flex;align-items:center;justify-content:space-between;font-weight:var(--fw-heading);font-size:var(--fs-base);color:var(--blue-900)}.song-notes{font-size:var(--fs-md);color:var(--blue-800);font-family:var(--font);font-weight:var(--fw-label);letter-spacing:.03em;line-height:1.5}.lesson-obj{font-size:var(--fs-md);line-height:1.55;margin:var(--sp-2-5) 0;color:var(--c-heading);background:var(--c-surface-muted);padding:var(--sp-2-5) var(--sp-3-5);border-radius:var(--r-md);border:1px solid var(--c-border)}.lesson-tips-grid{display:flex;flex-direction:column;gap:var(--sp-2-5);margin:var(--sp-3) 0;text-align:left}.tip-box{background:var(--c-surface-muted);border-radius:var(--r-md);padding:var(--sp-2-5) var(--sp-3-5);font-size:var(--fs-md);line-height:1.55;display:flex;flex-direction:column;gap:var(--sp-1);border-left:4px solid var(--c-border-strong)}.tip-box.piano-tip{border-left-color:var(--blue-500);background:var(--blue-50)}.tip-box.guitar-tip{border-left-color:var(--amber-500);background:var(--amber-50)}.tip-title{font-weight:var(--fw-heading);display:inline-flex;align-items:center;gap:var(--sp-1-5);font-size:var(--fs-md)}.guitar-box-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);cursor:pointer;padding:var(--sp-1-5)}.guitar-chord-svg{display:block;overflow:visible}.tab-pill{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-label);background:var(--c-surface-muted);color:var(--c-text);padding:3px var(--sp-2-5);border-radius:var(--r-sm);border:1px solid var(--c-border)}.guitar-fret-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);cursor:pointer}.guitar-fret-svg{display:block;overflow:visible}.guitar-fret-info{font-size:var(--fs-md);color:var(--c-heading);font-weight:var(--fw-label)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.acc{gap:0}.acc-center{text-align:center}.acc-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-6) 0}.acc-logo{width:min(64%,240px);height:auto}.acc-tagline{max-width:280px;font-size:var(--fs-md);line-height:var(--lh-body)}.acc-actions{gap:var(--sp-3)}.acc-top{flex:none;display:flex;align-items:center;gap:var(--sp-3);min-height:40px;margin-bottom:var(--sp-5)}.acc-back{position:relative;width:36px;height:36px;display:grid;place-items:center;color:var(--c-text-disabled);font-size:var(--ic-md);border-radius:var(--r-md)}.acc-back:after{content:"";position:absolute;inset:calc(-1 * var(--sp-1))}@media (hover: hover){.acc-back:hover{background:var(--c-surface-muted)}}.acc-back-spacer{width:36px;flex:none}.acc-title{flex:1;text-align:center;font-size:var(--fs-lg);font-weight:var(--fw-heading);color:var(--c-text-muted)}.acc-q{margin-bottom:var(--sp-4)}.acc-sub{margin:calc(-1 * var(--sp-2)) 0 var(--sp-3)}.acc-note{font-size:var(--fs-sm);color:var(--c-text-muted);margin:var(--sp-2) 0 0;line-height:var(--lh-body)}.acc-gap{height:var(--sp-4)}.acc-stack{display:flex;flex-direction:column;gap:var(--sp-2)}.acc-label{font-size:var(--fs-sm);font-weight:var(--fw-label);color:var(--c-text);margin:var(--sp-4) 0 var(--sp-1-5)}.acc-field{position:relative;display:block}.acc-field input{width:100%;font:inherit;font-size:var(--fs-base);font-weight:var(--fw-body);color:var(--c-text);background:var(--c-surface-muted);border:var(--bw) solid var(--c-border);border-radius:var(--r-md);padding:13px var(--sp-4);outline:none;transition:border-color var(--dur-fast)}.acc-field input::placeholder{color:var(--c-text-disabled)}.acc-field input:focus{border-color:var(--c-focus);background:var(--c-surface)}.acc-field input:disabled{color:var(--c-text-muted)}.acc-field.err input{border-color:var(--c-wrong);background:var(--c-wrong-s)}.acc-field:has(.acc-eye) input{padding-right:48px}.acc-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;color:var(--c-primary);font-size:var(--ic-md);border-radius:var(--r-sm)}.acc-eye:after{content:"";position:absolute;inset:calc(-1 * var(--sp-1))}.acc-error{color:var(--c-wrong-d);font-size:var(--fs-sm);font-weight:var(--fw-label);margin:var(--sp-2) 0 0}.acc-fine{font-size:var(--fs-xs);color:var(--c-text-muted);text-align:center;margin:var(--sp-3) 0 0;line-height:var(--lh-body)}.acc-fine b{color:var(--c-text)}.acc-social{display:flex;flex-direction:column;gap:var(--sp-2-5)}.acc-or{display:flex;align-items:center;gap:var(--sp-3);color:var(--c-text-disabled);font-size:var(--fs-sm);font-weight:var(--fw-label);margin:var(--sp-2) 0 var(--sp-0-5)}.acc-or:before,.acc-or:after{content:"";flex:1;height:var(--bw);background:var(--c-border)}.acc-soc{display:flex;align-items:center;justify-content:center;gap:var(--sp-2-5);width:100%;min-height:var(--tap-min);padding:var(--sp-2-5) var(--sp-3);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-md);border-radius:var(--r-lg);background:var(--c-surface);color:var(--c-text);font-weight:var(--fw-heading);font-size:var(--fs-md)}.acc-soc svg{font-size:var(--ic-md)}.acc-soc:active:not(:disabled){transform:translateY(var(--depth-sm));border-bottom-width:var(--bw)}.acc-soc:disabled{opacity:.55;cursor:default}.acc-soc.filidy{border-style:dashed;border-bottom-style:dashed;color:var(--c-brand);opacity:.75}.acc-soc.filidy img{height:20px;width:auto}.soon{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-heading);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--amber-900);background:var(--amber-100);border-radius:var(--r-xs);padding:var(--sp-0-5) var(--sp-1-5);vertical-align:middle}.acc-badge{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;margin-bottom:var(--sp-2)}.acc-badge.ok{background:var(--c-primary);color:var(--c-on-tone);font-size:var(--ic-4xl);border-bottom:var(--depth-lg) solid var(--c-primary-d)}.acc-badge.err{background:var(--c-wrong);color:var(--c-on-tone);font-size:var(--ic-4xl);border-bottom:var(--depth-lg) solid var(--c-wrong-d)}.acc-badge.stars-badge{display:flex;align-items:center;justify-content:center;background:var(--c-surface-brand);color:var(--c-reward);font-size:var(--ic-xl);gap:0}.acc-badge.stars-badge svg:nth-child(2){font-size:var(--ic-3xl);margin-top:calc(-1 * var(--sp-3-5))}.acc-badge.danger{width:64px;height:64px;margin-bottom:0;background:var(--c-wrong-s);color:var(--c-wrong);font-size:var(--ic-lg)}.btn-inline{display:inline-flex;align-items:center;gap:var(--sp-1-5);white-space:nowrap}.is-clickable{cursor:pointer}ins.adsbygoogle{display:block}.sheet .credits-title{margin:var(--sp-1) 0 var(--sp-2)}.credits-intro{margin:0 0 var(--sp-4);line-height:var(--lh-body)}.credits-note{margin:var(--sp-3-5) 0 var(--sp-1);font-size:var(--fs-xs);line-height:var(--lh-body)}.credits-actions{margin:var(--sp-3) 0 var(--sp-1)}.dash-modal-container.del-dialog{max-width:380px;padding:var(--sp-6)}.del-body{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center}.del-title{color:var(--c-wrong-d);margin:0}.del-text{margin:0;line-height:var(--lh-body)}.del-actions{display:flex;flex-direction:column;gap:var(--sp-2-5);width:100%;margin-top:var(--sp-3)}.pill.del-cancel{justify-content:center;padding:var(--sp-2-5);width:100%}.acc-badge.stars-badge svg{filter:drop-shadow(0 3px 0 var(--c-reward-d))}.acc-pill{align-self:flex-start}.profile{padding:0 0 calc(var(--sp-5) + env(safe-area-inset-bottom,0px))}.pf-hero{position:relative;flex:none;height:calc(168px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:var(--c-surface-brand);display:flex;align-items:flex-end;justify-content:center}.pf-name{position:absolute;left:var(--screen-pad);top:calc(var(--sp-4) + env(safe-area-inset-top,0px));font-size:var(--fs-xl);font-weight:var(--fw-heading);color:var(--c-brand);max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pf-gear{position:absolute;right:10px;top:calc(var(--sp-2-5) + env(safe-area-inset-top,0px));width:40px;height:40px;display:grid;place-items:center;color:var(--c-brand);font-size:var(--ic-md);border-radius:var(--r-md)}.pf-gear:after{content:"";position:absolute;inset:calc(-1 * var(--sp-1))}@media (hover: hover){.pf-gear:hover{background:var(--white-a60)}}.pf-ava{flex:none;width:104px;height:104px;border-radius:50%;background:var(--blue-100);border:4px solid var(--c-surface);margin-bottom:calc(-1 * var(--sp-10));display:grid;place-items:center;font-size:var(--ic-2xl);font-weight:var(--fw-heading);color:var(--c-brand)}.pf-ava.empty{background:var(--c-surface);border:3px dashed var(--c-primary);color:var(--c-primary);font-size:var(--ic-xl)}.pf-ava.sm{width:84px;height:84px;margin:0 auto var(--sp-2);font-size:var(--ic-xl);border-color:var(--c-surface-brand)}.pf-body{padding:52px var(--screen-pad) 0;display:flex;flex-direction:column}.pf-meta{justify-content:center;text-align:center;text-transform:none;letter-spacing:0;font-size:var(--fs-sm)}.pf-cta{background:var(--c-surface-brand);border-color:var(--blue-100);padding:var(--sp-4) var(--sp-4) var(--sp-1);margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}.pf-cta>b{font-size:var(--fs-lg);font-weight:var(--fw-heading)}.pf-cta .mute{margin-bottom:var(--sp-1)}.pf-sec{margin:var(--sp-6) 0 var(--sp-3)}.pf-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2-5)}.pf-stat{padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-0-5)}.pf-stat b{display:flex;align-items:center;gap:var(--sp-1-5);font-size:var(--fs-xl);font-weight:var(--fw-heading);color:var(--c-heading)}.pf-stat i{display:grid;color:var(--tone);font-size:var(--ic-md)}.pf-stat small{font-size:var(--fs-sm);color:var(--c-text-muted)}.pf-link{margin-top:var(--sp-5);display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:var(--bw) dashed var(--c-brand);border-radius:var(--r-lg);color:var(--c-brand);opacity:.8}.pf-link img{width:52px;height:auto;flex:none}.pf-link div{flex:1;display:flex;flex-direction:column;gap:var(--sp-0-5)}.pf-link b{font-weight:var(--fw-heading);font-size:var(--fs-md)}.pf-link small{font-size:var(--fs-sm);color:var(--c-text-muted)}.pf-link>svg{font-size:var(--ic-md)}.splash{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:100;background:var(--c-brand);display:grid;place-items:center;transition:opacity .3s var(--ease-out)}.splash img{width:min(58%,230px);height:auto;animation:splashIn .6s var(--ease-spring) both}.splash.out{opacity:0;pointer-events:none}@keyframes splashIn{0%{opacity:0;transform:scale(.88)}}.acc-hint{margin-top:var(--sp-3)}.acc-suggest{font-size:var(--fs-sm);color:var(--c-text-muted);margin:var(--sp-3) 0 0}.acc-suggest button{font-weight:var(--fw-heading);color:var(--c-link);text-decoration:underline;text-underline-offset:2px}.acc-account-actions{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3)}.acc-del-btn{background:none;border:none;color:var(--c-wrong);font-size:var(--fs-xs);font-weight:var(--fw-label);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:var(--sp-1) var(--sp-2);opacity:.85;transition:opacity var(--dur-fast)}.acc-del-btn:hover{opacity:1}.dash-modal-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--c-scrim, rgba(15,23,42,.65));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-sheet, 50);display:grid;place-items:center;padding:var(--sp-4);animation:fade var(--dur-fast) both}.dash-modal-container{background:var(--c-surface);border-radius:var(--r-xl);border:var(--bw) solid var(--c-border);box-shadow:0 20px 48px var(--black-a20);width:100%;max-width:440px;max-height:90vh;max-height:90dvh;overflow-y:auto;display:flex;flex-direction:column;animation:slideUp var(--dur-fast) var(--ease-out) both}.pf-pwa-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--c-surface);border:var(--bw) solid var(--blue-200);border-bottom-width:var(--depth-md);border-radius:var(--r-lg);margin-top:var(--sp-4)}.pf-pwa-info{display:flex;flex-direction:column;gap:var(--sp-0-5);text-align:left}.pf-pwa-info b{font-size:var(--fs-md);font-weight:var(--fw-heading);color:var(--c-heading)}.pf-pwa-badge{text-align:center;padding:var(--sp-2) 0;color:var(--c-link);font-weight:var(--fw-label)}@media (max-width: 380px){:root{--screen-pad: 12px}.ans.grid7{gap:var(--sp-1-5)}.opt b{font-size:var(--fs-xl)}.opt{min-height:52px}.tabs button span{width:46px;height:42px;font-size:var(--ic-md)}.piano,.card-visual .piano{height:128px}.kc-art{height:118px;padding:var(--sp-2-5) var(--sp-3-5)}.kind-card.chord .kc-art .piano{height:92px}.kc-emoji-item{font-size:var(--ic-2xl)}.dialog{left:12px;right:12px;padding:18px var(--sp-3) var(--sp-2-5)}}@media (max-height: 680px){.stage{gap:var(--sp-2-5)}.wave{padding:var(--sp-3) var(--sp-4) var(--sp-2-5)}.wave-bars{height:80px}.piano,.card-visual .piano{height:120px}.card-visual{padding:var(--sp-2) var(--sp-2-5);gap:var(--sp-1)}.ans{margin-top:var(--sp-2)}.opt.big{min-height:96px}.opt .emo{font-size:var(--ic-lg);margin-bottom:var(--sp-0-5)}.path{gap:var(--sp-10);padding:var(--sp-8) 0 var(--sp-6)}}.ad-container{display:flex;flex-direction:column;position:relative;overflow:hidden;box-sizing:border-box;text-align:left}.ad-badge-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-1-5);line-height:1}.ad-label{font-size:var(--fs-xs);font-weight:var(--fw-label);text-transform:uppercase;letter-spacing:.05em;padding:var(--sp-0-5) var(--sp-1-5);border-radius:var(--r-xs);background:var(--gray-200);color:var(--gray-600)}.ad-provider{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);font-weight:var(--fw-label);color:var(--blue-600)}.ad-variant-banner{margin:var(--sp-1-5) var(--sp-3) var(--sp-3-5);padding:var(--sp-2) var(--sp-3);border-radius:var(--rad-tile);background:var(--c-surface);border:1px solid var(--c-border);box-shadow:0 1px 3px var(--black-a04)}.ad-placement-tabs{margin-bottom:var(--sp-5)}.ad-variant-card{margin:var(--sp-3-5) 0 var(--sp-4);padding:var(--sp-3) var(--sp-3-5);border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-border);box-shadow:0 2px 8px var(--black-a04)}.ad-variant-inline{margin:var(--sp-4) 0;padding:var(--sp-2)}.ad-test-box{background:linear-gradient(135deg,var(--gray-0) 0%,var(--blue-50) 100%);border:1px dashed var(--blue-500)}.ad-content-mockup{display:flex;align-items:center;gap:var(--sp-3)}.ad-mock-icon{width:38px;height:38px;border-radius:var(--r-md);background:var(--blue-700);color:var(--c-on-tone);display:flex;align-items:center;justify-content:center;font-size:var(--ic-sm);flex-shrink:0}.ad-mock-text{flex:1;min-width:0}.ad-mock-title{font-size:var(--fs-sm);font-weight:var(--fw-label);color:var(--c-heading);line-height:1.25;margin-bottom:var(--sp-0-5)}.ad-mock-desc{font-size:var(--fs-xs);color:var(--c-text-muted);line-height:1.35}.ad-mock-desc code{font-size:var(--fs-xs);background:var(--black-a06);padding:1px var(--sp-1);border-radius:var(--r-xs);color:var(--blue-700)}.ad-mock-cta{padding:var(--sp-1-5) var(--sp-3);border-radius:var(--r-sm);background:var(--blue-600);color:var(--c-on-tone);font-size:var(--fs-xs);font-weight:var(--fw-label);flex-shrink:0;box-shadow:0 2px 4px var(--blue-600-a20)}.device.is-pwa,.app.is-pwa .map-scroll,.app.is-pwa .practice-scroll,.app.is-pwa .screen{overscroll-behavior-y:contain}.ptr-wrapper{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;position:relative;overflow:hidden}.ptr-indicator{position:absolute;top:calc(env(safe-area-inset-top,0px) - 52px);left:0;right:0;display:flex;justify-content:center;align-items:center;pointer-events:none;z-index:var(--z-toast, 99);will-change:transform,opacity}.ptr-pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);background:var(--c-surface);border:var(--bw) solid var(--c-border);border-bottom:var(--depth-sm) solid var(--c-border-strong);border-radius:var(--r-full);box-shadow:0 8px 24px -4px var(--blue-700-a18),0 2px 6px var(--black-a04);color:var(--blue-600);transition:transform var(--dur-fast) var(--ease-spring),border-color var(--dur-fast),background var(--dur-fast)}.ptr-pill.ready{background:var(--blue-50);border-color:var(--blue-200);border-bottom-color:var(--blue-500);color:var(--blue-700);transform:scale(1.04)}.ptr-pill.refreshing{background:var(--c-surface);border-color:var(--blue-500);color:var(--blue-600)}.ptr-icon{font-size:var(--ic-sm);line-height:1;flex-shrink:0;transition:transform .1s linear}.ptr-icon.spin{animation:ptr-spin .75s linear infinite}.ptr-label{font-size:var(--fs-xs);font-weight:var(--fw-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-heading);white-space:nowrap}.ptr-pill.ready .ptr-label{color:var(--blue-700)}@keyframes ptr-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mascot{display:block;margin:0 auto;object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;transform-origin:50% 100%}.mascot-idle{animation:popIn var(--dur-base) var(--ease-spring) both,mascotBob 2.4s ease-in-out .4s infinite}.mascot-cheer{animation:mascotHop .7s var(--ease-spring) both}.mascot-love{animation:popIn var(--dur-base) var(--ease-spring) both,mascotSway 3s ease-in-out .4s infinite}.mascot-sad{animation:mascotDroop .6s var(--ease-out) both}.mascot.still{animation:none}@keyframes mascotBob{50%{transform:translateY(-6px)}}@keyframes mascotHop{0%{transform:scale(.6) translateY(10px);opacity:0}45%{transform:scale(1.05) translateY(-14px);opacity:1}70%{transform:scale(.97,1.03) translateY(0)}to{transform:none}}@keyframes mascotSway{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}@keyframes mascotDroop{0%{transform:translateY(-8px) scale(1.04);opacity:0}}@media (prefers-reduced-motion: reduce){.mascot{animation:none!important}}.acc-hero .mascot{margin-bottom:var(--sp-2)}.dialog .mascot,.sum-hero .mascot{margin-bottom:var(--sp-1)}.path-mascot{position:absolute;left:50%;top:-39px;transform:translate(calc(-50% + var(--dx, 0px)));pointer-events:none;z-index:0}.path-mascot:before{content:"";position:absolute;left:50%;bottom:-7px;width:70%;height:16px;transform:translate(-50%);border-radius:50%;background:radial-gradient(closest-side,var(--blue-700-a28),var(--blue-700-a10) 65%,var(--blue-700-a00))}.path-mascot .mascot{position:relative}.path-mascot .mascot-idle{animation:popIn var(--dur-base) var(--ease-spring) both,mascotSquish 2.4s ease-in-out .4s infinite}.path-mascot .mascot.still{animation:none}@keyframes mascotSquish{50%{transform:scale(1.04,.95)}}.node-btn{position:relative;z-index:1}.metronome{gap:0;align-items:stretch}.mt-seg{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1);padding:var(--sp-1);background:var(--c-surface-muted);border:var(--bw) solid var(--c-border);border-radius:var(--r-lg)}.mt-seg button{display:flex;align-items:center;justify-content:center;gap:var(--sp-1-5);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-1);font-weight:var(--fw-heading);font-size:var(--fs-sm);color:var(--c-text-muted)}.mt-seg button svg{font-size:var(--fs-lg)}.mt-seg button.on{background:var(--c-surface);color:var(--c-brand);box-shadow:0 1px 0 var(--c-border),0 0 0 var(--bw) var(--c-border)}.mt-bars{display:flex;align-items:center;gap:var(--sp-2);height:48px;margin-top:var(--sp-5)}.mt-bar{flex:1;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);font-weight:var(--fw-heading);font-size:var(--fs-md);transition:transform 70ms var(--ease-out),background 70ms,border-color 70ms,color 70ms;-webkit-user-select:none;user-select:none;touch-action:manipulation}.mt-bar:active{transform:translateY(2px);border-bottom-width:var(--bw)}.mt-bar.strong{background:var(--blue-100);border:var(--bw) solid var(--blue-300);border-bottom-width:var(--depth-md);color:var(--c-brand)}.mt-bar.normal{background:var(--cyan-50);border:var(--bw) solid var(--cyan-300);border-bottom-width:var(--depth-md);color:var(--cyan-700)}.mt-bar.mute{background:transparent;border:var(--bw) dashed var(--c-border-strong);border-bottom-width:var(--depth-md);color:var(--c-text-disabled)}.mt-bar.strong.on{background:var(--c-brand);border-color:var(--blue-900);color:var(--gray-0);transform:translateY(calc(-1 * var(--depth-sm)))}.mt-bar.normal.on{background:var(--c-listen);border-color:var(--c-listen-d);color:var(--blue-800);transform:translateY(calc(-1 * var(--depth-sm)))}.mt-bar.mute.on{border-color:var(--c-text-muted)}.mt-bars-hint{text-align:center;font-size:var(--fs-sm);color:var(--c-text-muted);margin:var(--sp-1-5) 0 0}.mt-dial{position:relative;align-self:center;width:min(76vw,36dvh,290px);aspect-ratio:1;margin:auto 0;padding-top:var(--sp-2)}.mt-dial svg{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none;overflow:visible}.mt-dial svg:focus-visible .track{stroke:var(--blue-200)}.mt-dial .ticks line{stroke:var(--c-border-strong);stroke-width:2;stroke-linecap:round}.mt-dial .ticks line.major{stroke:var(--c-text-disabled)}.mt-dial .track,.mt-dial .fill{fill:none;stroke-width:18;stroke-linecap:round}.mt-dial .track{stroke:var(--c-border)}.mt-dial .fill{stroke:var(--c-primary);transition:stroke-dashoffset 60ms linear}.mt-dial .knob-d{fill:var(--c-border-strong)}.mt-dial .knob{fill:var(--c-surface);stroke:var(--c-border);stroke-width:2}.mt-dial .pulse{fill:var(--c-surface-muted);transform-origin:140px 140px}.mt-dial .pulse.beat{animation:beatPulse .26s var(--ease-out);fill:var(--cyan-50)}.mt-dial .pulse.strong{animation:beatPulse .3s var(--ease-out);fill:var(--blue-100)}@keyframes beatPulse{0%{transform:scale(1.06)}}.mt-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:56%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-0-5)}.mt-center b{font-size:clamp(var(--fs-3xl),9dvh,72px);font-weight:var(--fw-heading);line-height:1;letter-spacing:-.02em;color:var(--c-heading);font-variant-numeric:tabular-nums;transition:color var(--dur-fast)}.mt-center.live b{color:var(--c-brand)}.mt-center small{font-size:var(--fs-sm);font-weight:var(--fw-label);color:var(--c-text-muted)}.mt-tempo{font-size:var(--fs-xs);font-weight:var(--fw-heading);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-listen-d);background:var(--c-listen-s);border-radius:var(--r-full);padding:3px var(--sp-2-5)}.mt-transport{display:flex;align-items:center;justify-content:center;gap:var(--sp-6);margin-top:var(--sp-2)}.mt-round{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-2xl);color:var(--c-primary);background:var(--c-surface);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-md);-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:transform var(--dur-press)}.mt-round:active{transform:translateY(2px);border-bottom-width:var(--bw)}.mt-play{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-3xl);background:var(--tone);color:var(--tone-on);border-bottom:var(--depth-lg) solid var(--tone-d);transition:transform var(--dur-press),border-bottom-width var(--dur-press),background var(--dur-fast)}.mt-play:active{transform:translateY(4px);border-bottom-width:2px}.mt-play svg{margin-left:var(--sp-0-5)}.mt-ios{margin-top:var(--sp-3);background:var(--yellow-100);color:var(--yellow-900);border:var(--bw) solid var(--yellow-400);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);font-weight:var(--fw-label);text-align:center}.mt-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-top:var(--sp-5)}.mt-presets button{display:flex;flex-direction:column;align-items:center;padding:var(--sp-1-5) 0 5px;border-radius:var(--r-md);background:var(--c-surface-muted);border:var(--bw) solid transparent}.mt-presets b{font-size:var(--fs-sm);font-weight:var(--fw-heading);color:var(--c-text)}.mt-presets small{font-size:var(--fs-xs);font-weight:var(--fw-label);color:var(--c-text-muted);font-variant-numeric:tabular-nums}.mt-presets button.on{background:var(--c-primary-s);border-color:var(--c-primary)}.mt-presets button.on b{color:var(--c-primary-d)}.mt-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-3)}.mt-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-0-5);padding:var(--sp-2-5) var(--sp-3-5) var(--sp-2);text-align:left;-webkit-user-select:none;user-select:none;touch-action:manipulation}.mt-card small{font-size:var(--fs-xs);font-weight:var(--fw-label);color:var(--c-text-muted);text-transform:uppercase;letter-spacing:var(--ls-caps)}.mt-card b{display:flex;align-items:center;gap:var(--sp-1-5);font-size:var(--fs-lg);font-weight:var(--fw-heading);color:var(--c-heading)}.mt-card b svg{font-size:var(--fs-md);color:var(--c-text-disabled)}.mt-card.tap b,.mt-card.tap b svg{color:var(--c-primary)}.mt-card.tap b svg{font-size:var(--fs-xl)}.mt-card.active{border-color:var(--c-primary);background:var(--c-primary-s);animation:tapFlash .14s var(--ease-out)}.mt-card.active small{color:var(--c-primary-d)}@keyframes tapFlash{0%{transform:translateY(3px);border-bottom-width:var(--bw)}}.mt-sheet-head{display:flex;align-items:center;justify-content:space-between;min-height:40px}.mt-sheet-head b{font-size:var(--fs-lg);font-weight:var(--fw-heading)}.mt-sheet-done{font-weight:var(--fw-heading);font-size:var(--fs-md);color:var(--c-link);text-transform:uppercase;letter-spacing:.05em;padding:var(--sp-2)}.mt-field{width:100%;text-align:center;font:inherit;font-size:var(--fs-4xl);font-weight:var(--fw-heading);color:var(--c-heading);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-md);border-radius:var(--r-lg);padding:var(--sp-2);background:var(--c-surface-muted);outline:none;font-variant-numeric:tabular-nums}.mt-field:focus{border-color:var(--c-primary);background:var(--c-surface)}.mt-field.bad{border-color:var(--c-wrong)}.mt-field-hint{text-align:center;font-size:var(--fs-sm);color:var(--c-text-muted);margin:0 0 var(--sp-2)}.mt-field-hint.bad{color:var(--c-wrong-d);font-weight:var(--fw-label)}.mt-meter-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-2)}.mt-meter-list button{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);text-align:left}.mt-meter-list b{font-size:var(--fs-xl);font-weight:var(--fw-heading);min-width:44px;font-variant-numeric:tabular-nums}.mt-meter-list span{font-size:var(--fs-sm);color:var(--c-text-muted)}.mt-meter-list button.on{border-color:var(--c-selected);background:var(--c-selected-s)}.mt-meter-list button.on b{color:var(--c-primary-d)}@media (max-height: 720px){.mt-bars{height:40px;margin-top:var(--sp-3)}.mt-bar{height:40px;font-size:var(--fs-sm)}.mt-bars-hint{display:none}.mt-dial{width:min(70vw,31dvh);padding-top:0}.mt-transport{margin-top:0}.mt-play{width:68px;height:68px;font-size:var(--fs-2xl)}.mt-round{width:48px;height:48px;font-size:var(--fs-xl)}.mt-presets{margin-top:var(--sp-3)}.mt-card{padding:var(--sp-1-5) var(--sp-3) var(--sp-1)}.mt-card b{font-size:var(--fs-md)}}.inst-pick{gap:var(--sp-4)}.inst-card-ic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r-md);background:var(--tone-s);color:var(--tone-d);font-size:var(--ic-lg)}.inst-card-txt{display:flex;flex-direction:column;gap:var(--sp-0-5);min-width:0}.inst-card-txt b{font-size:var(--fs-md);font-weight:var(--fw-heading);color:var(--c-heading);line-height:1.2}.inst-card-txt small{font-size:var(--fs-sm);color:var(--c-text-muted);font-weight:var(--fw-label)}.inst-chip{display:inline-flex;align-items:center;gap:var(--sp-1-5);height:34px;padding:0 var(--sp-2-5) 0 var(--sp-1);border-radius:var(--r-full);background:var(--c-surface-muted);border:var(--bw) solid var(--c-border);font-size:var(--fs-sm);color:var(--c-heading);margin-right:auto;box-sizing:border-box}.inst-chip:active{transform:translateY(1px)}.inst-chip-ic{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--tone);color:var(--tone-on);font-size:var(--ic-sm)}.inst-chip b{font-weight:var(--fw-heading)}.inst-chip>svg:last-child{font-size:var(--ic-xs);color:var(--c-text-muted)}.inst-list{display:flex;flex-direction:column;gap:var(--sp-2)}.inst-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2-5) var(--sp-3);border-radius:var(--r-lg);border:var(--bw) solid var(--c-border);background:var(--c-surface);text-align:left}.inst-row.on{background:var(--tone-s);border-color:var(--tone)}.inst-row.on .inst-card-ic{background:var(--tone);color:var(--tone-on)}.inst-row-check{margin-left:auto;color:var(--tone-d);font-size:var(--ic-md)}.drums-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-6) var(--screen-pad);text-align:center}.drums-empty .mute{max-width:280px}.drums-empty .b3{max-width:320px}.drums-empty-art{position:relative;margin-bottom:var(--sp-2)}.drums-empty-badge{position:absolute;right:-10px;bottom:4px;width:48px;height:48px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--tone);color:var(--tone-on);font-size:var(--ic-lg);border:3px solid var(--c-surface)}.practice-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-2)}.pf-inst{display:flex;flex-direction:column;padding:var(--sp-1) var(--sp-3) var(--sp-3)}.pf-inst-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;text-align:left;border-bottom:var(--bw) solid var(--c-border)}.pf-inst-row .inst-card-ic{background:var(--tone);color:var(--tone-on)}.pf-inst-row .inst-card-txt small{order:-1}.pf-inst-caret{margin-left:auto;color:var(--c-text-disabled)}.pf-clef{display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-3)}.pf-clef-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}.pf-clef-head small{font-size:var(--fs-sm);color:var(--c-text-muted);font-weight:var(--fw-label)}.pf-clef-head em{font-style:normal;font-size:var(--fs-sm);color:var(--blue-700);font-weight:var(--fw-label)}.pf-clef-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1-5);padding:var(--sp-1);border-radius:var(--r-md);background:var(--c-surface-muted)}.pf-clef-seg button{display:flex;align-items:center;justify-content:center;gap:var(--sp-1-5);min-height:44px;border-radius:calc(var(--r-md) - var(--sp-1));font-size:var(--fs-sm);font-weight:var(--fw-heading);color:var(--c-text-muted)}.pf-clef-seg button.on{background:var(--c-surface);color:var(--blue-700);box-shadow:0 1px 0 var(--c-border),0 0 0 var(--bw) var(--c-border)}.pf-clef-sym{font-family:var(--font-music);display:inline-flex;align-items:center;justify-content:center;line-height:1}.pf-clef-treble{font-size:24px}.pf-clef-bass,.pf-clef-alto{font-size:20px}.pf-credits-wrap{margin-top:var(--sp-6);display:flex;justify-content:center}.pf-credits-trigger{display:inline-flex;align-items:center;gap:var(--sp-1-5);padding:var(--sp-1-5) var(--sp-3-5);background:var(--c-surface);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-sm);border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:var(--fw-label);color:var(--c-text-muted);cursor:pointer;transition:all var(--dur-fast)}.pf-credits-trigger:hover{background:var(--c-surface-brand);color:var(--c-link);border-color:var(--blue-200)}.pf-credits-trigger:active{transform:translateY(var(--depth-sm));border-bottom-width:var(--bw)}.acc-credits-link{background:none;border:none;color:var(--c-text-disabled);font-size:var(--fs-xs);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:var(--sp-1) var(--sp-2);margin-top:var(--sp-1);transition:color var(--dur-fast)}.acc-credits-link:hover{color:var(--c-text-muted)}.app-version-label{font-size:var(--fs-xs);font-weight:var(--fw-body);font-family:var(--font-mono);color:var(--c-text-disabled);text-align:center;margin:var(--sp-2) 0 0}.credits-list{display:flex;flex-direction:column;gap:var(--sp-2-5);background:var(--c-surface-muted);border:var(--bw) solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-3-5)}.credits-item{display:flex;flex-direction:column;gap:var(--sp-0-5)}.credits-item:not(:last-child){padding-bottom:var(--sp-2);border-bottom:1px solid var(--c-border)}.credits-item b{color:var(--c-heading);font-size:var(--fs-sm)}.credits-item span{color:var(--c-text-muted);font-size:var(--fs-xs)}.inst-pick-hero{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}.inst-pick-hero .mascot{margin:0;flex:none}.inst-pick-bubble{position:relative;padding:var(--sp-3) var(--sp-4);border:var(--bw) solid var(--c-border);border-radius:var(--r-lg);background:var(--c-surface);font-size:var(--fs-lg);font-weight:var(--fw-heading);color:var(--c-heading);line-height:1.25}.inst-pick-bubble:before{content:"";position:absolute;left:-9px;top:50%;width:14px;height:14px;background:var(--c-surface);border-left:var(--bw) solid var(--c-border);border-bottom:var(--bw) solid var(--c-border);transform:translateY(-50%) rotate(45deg)}.inst-pick{gap:var(--sp-3)}.inst-pick>.inst-pick-hero{padding-top:var(--sp-4);margin-bottom:0}.inst-pick-bubble{margin:0}.pick-list,.pick-group{display:flex;flex-direction:column;gap:var(--sp-2-5)}.pick-group-title{margin:0;font-size:var(--fs-md);font-weight:var(--fw-heading);color:var(--c-heading)}.pick-row{display:flex;align-items:center;gap:var(--sp-3);min-height:60px;padding:var(--sp-2-5) var(--sp-3);text-align:left;transition:transform var(--dur-press),background var(--dur-fast),border-color var(--dur-fast)}.pick-row:active{transform:translateY(3px);border-bottom-width:var(--bw)}.pick-row b{font-size:var(--fs-md);font-weight:var(--fw-heading);color:var(--c-heading)}.pick-row-ic{width:40px;height:32px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--tone);color:var(--tone-on);font-size:var(--ic-md)}.pick-row.on{background:var(--blue-50);border-color:var(--blue-200);border-bottom-color:var(--blue-500)}.pick-row.on b{color:var(--blue-700)}.inst-art{width:1em;height:1em;display:block;object-fit:contain}.pick-row-ic,.inst-card-ic,.inst-row.on .inst-card-ic,.pf-inst-row .inst-card-ic{background:none}.pick-row-ic{width:44px;height:44px;font-size:var(--ic-2xl);border-radius:0}.inst-card-ic{font-size:var(--ic-2xl)}.inst-chip-ic{background:var(--c-surface);font-size:var(--ic-md)}.drums-empty-badge{background:var(--c-surface);border-color:var(--c-border);font-size:var(--ic-xl)}.inst-row.on{background:var(--blue-50);border-color:var(--blue-200)}.inst-row.on b{color:var(--blue-700)}.inst-row.on .inst-row-check{color:var(--blue-500)}.streak-chip{cursor:pointer;font:inherit;font-weight:var(--fw-heading);color:var(--c-text-muted)}.streak-chip .streak-chip-fire{color:var(--gray-400)}.streak-chip.is-lit{color:var(--amber-700)}.streak-chip.is-lit .streak-chip-fire{color:var(--amber-500)}.streak-chip .streak-chip-ice{color:var(--cyan-700);font-size:.9em}.streak-chip.is-urgent .streak-chip-fire{animation:streakUrgent 1.6s ease-in-out infinite}@keyframes streakUrgent{0%,to{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12);color:var(--amber-500)}}@media (prefers-reduced-motion: reduce){.streak-chip.is-urgent .streak-chip-fire{animation:none;color:var(--amber-500)}}.streak-screen{display:flex;flex-direction:column;background:var(--c-surface);padding:calc(var(--sp-6) + env(safe-area-inset-top,0px)) var(--screen-pad) calc(var(--sp-5) + env(safe-area-inset-bottom,0px))}.streak-screen-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);text-align:center}.streak-screen-foot{padding-top:var(--sp-4)}.streak-bubble{position:relative;max-width:300px;padding:var(--sp-3) var(--sp-4);border:var(--bw) solid var(--c-border);border-radius:var(--r-lg);background:var(--c-surface);font-weight:var(--fw-label);font-size:var(--fs-md);color:var(--c-heading)}.streak-bubble:after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;background:inherit;border-right:var(--bw) solid var(--c-border);border-bottom:var(--bw) solid var(--c-border);transform:translate(-50%) rotate(45deg)}.streak-hero{position:relative;display:grid;place-items:center;width:180px;height:150px}.streak-hero>*{grid-area:1 / 1}.streak-hero-fire{font-size:150px;color:var(--amber-500);opacity:.9;transform:translate(-34px,-6px);filter:drop-shadow(0 6px 16px rgba(245,158,11,.35))}.streak-hero .mascot{transform:translate(34px,12px)}.streak-milestone-badge{width:104px;height:112px;transform:translate(-36px,-4px);border-radius:var(--r-lg);background:var(--c-surface);border:3px solid var(--amber-500);border-bottom-width:7px;display:grid;grid-template-rows:26px 1fr;overflow:hidden;box-shadow:0 6px 18px #f59e0b4d}.streak-milestone-top{background:var(--amber-500)}.streak-milestone-badge b{display:grid;place-items:center;font-size:44px;font-weight:900;color:var(--amber-700)}.streak-count{display:flex;flex-direction:column;align-items:center;line-height:1}.streak-count-num{font-size:88px;font-weight:900;color:var(--amber-500);font-variant-numeric:tabular-nums;letter-spacing:-.02em}.streak-count-label{margin-top:var(--sp-1);font-size:var(--fs-xl);font-weight:var(--fw-heading);color:var(--amber-700)}.streak-note{margin:0;font-weight:var(--fw-label);color:var(--c-text-muted);display:inline-flex;align-items:center;gap:6px}.streak-note-ice{color:var(--cyan-700)}.streak-week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-2);width:100%;max-width:340px;margin-top:var(--sp-2)}.streak-week-day{display:flex;flex-direction:column;align-items:center;gap:6px}.streak-week-label{font-size:var(--fs-xs);font-weight:var(--fw-label);color:var(--c-text-muted)}.streak-week-label.is-today{color:var(--amber-700)}.streak-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:16px;color:#fff;background:var(--gray-100);border:2px solid var(--gray-200);box-sizing:border-box}.streak-dot.is-active{background:var(--amber-500);border-color:var(--amber-700)}.streak-dot.is-frozen{background:var(--cyan-400);border-color:var(--cyan-700)}.streak-dot.is-pending{background:var(--amber-100);border:2px dashed var(--amber-500)}.streak-screen.is-animated .streak-hero{animation:popIn var(--dur-slow) var(--ease-spring) both}.streak-screen.is-animated .streak-dot.is-today.is-active{animation:streakDotIn .42s var(--ease-spring) .9s both}@keyframes streakDotIn{0%{background:var(--gray-100);border-color:var(--gray-200);transform:scale(.6)}to{transform:scale(1)}}.streak-page{display:flex;flex-direction:column;gap:var(--sp-4);padding-top:var(--sp-2)}.streak-page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-lg);background:var(--amber-100);border:var(--bw) solid var(--amber-300)}.streak-page-head.is-pending,.streak-page-head.is-none{background:var(--c-surface-muted);border-color:var(--c-border)}.streak-page-head.is-broken{background:var(--gray-50);border-color:var(--c-border)}.streak-page-num{display:flex;align-items:center;gap:6px;font-size:52px;font-weight:900;line-height:1;color:var(--amber-500)}.streak-page-head:not(.is-done) .streak-page-num{color:var(--gray-500)}.streak-page-unit{font-weight:var(--fw-heading);color:var(--amber-700)}.streak-page-head:not(.is-done) .streak-page-unit{color:var(--c-text-muted)}.streak-page-status{margin:var(--sp-2) 0 0;font-weight:var(--fw-label);color:var(--c-heading)}.streak-perfect{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--yellow-100);color:var(--yellow-900);font-weight:var(--fw-heading)}.streak-perfect span{font-size:var(--fs-sm);font-weight:var(--fw-label);opacity:.8}.streak-cal{padding:var(--sp-3);border:var(--bw) solid var(--c-border);border-radius:var(--r-lg)}.streak-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}.streak-cal-nav button{position:relative;width:36px;height:36px;border-radius:var(--r-full);border:0;background:transparent;color:var(--c-text);font-size:18px;display:grid;place-items:center;cursor:pointer}.streak-cal-nav button:after{content:"";position:absolute;inset:calc(-1 * var(--sp-1))}.streak-cal-nav button:disabled{color:var(--c-text-disabled);cursor:default}.streak-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:6px;text-align:center}.streak-cal-head{font-size:var(--fs-xs);font-weight:var(--fw-label);color:var(--c-text-muted);padding-bottom:4px}.streak-cal-day{height:34px;display:grid;place-items:center;font-size:var(--fs-sm);font-weight:var(--fw-label);color:var(--c-text)}.streak-cal-day.is-future{color:var(--c-text-disabled)}.streak-cal-day.is-perfect{background-color:var(--yellow-100)}.streak-cal-day.is-active{color:#fff;font-weight:var(--fw-heading);background-image:radial-gradient(circle at center,var(--amber-500) 0 15px,transparent 15.5px)}.streak-cal-day.is-frozen{color:var(--cyan-700)}.streak-cal-day.is-today{box-shadow:inset 0 0 0 2px var(--amber-500);border-radius:var(--r-full)}.streak-cal-day.is-today.is-pending{color:var(--amber-700)}.streak-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}.streak-stat{display:flex;flex-direction:column;padding:var(--sp-3);border:var(--bw) solid var(--c-border);border-radius:var(--r-md)}.streak-stat b{font-size:var(--fs-2xl);color:var(--amber-500)}.streak-stat.is-ice b{color:var(--cyan-700)}.streak-stat span{font-size:var(--fs-sm);color:var(--c-text-muted);font-weight:var(--fw-label)}.streak-shield{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--cyan-50);border:var(--bw) solid var(--cyan-300)}.streak-shield>svg{font-size:26px;color:var(--cyan-700);flex:none}.streak-shield div{display:flex;flex-direction:column;gap:2px}.streak-shield span{font-size:var(--fs-sm);color:var(--c-text-muted)}.streak-goal{display:flex;flex-direction:column;gap:6px}.streak-goal-row{display:flex;justify-content:space-between;font-size:var(--fs-sm)}.streak-goal-row span{color:var(--c-text-muted);font-weight:var(--fw-label)}.streak-goal-bar{height:12px;border-radius:var(--r-full);background:var(--gray-100);overflow:hidden}.streak-goal-bar i{display:block;height:100%;border-radius:inherit;background:var(--amber-500);transition:width var(--dur-slow) var(--ease-out)}.streak-goal-ends{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--c-text-muted);font-weight:var(--fw-label)}.streak-record{display:flex;align-items:center;gap:6px;font-weight:var(--fw-label);color:var(--c-text-muted)}.streak-record svg{color:var(--yellow-600)}.streak-broken{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center}.streak-broken .h2,.streak-broken p{margin:0}.streak-broken-later{border:0;background:transparent;font:inherit;font-weight:var(--fw-label);color:var(--c-text-muted);padding:var(--sp-2);cursor:pointer}.saving-scrim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:95;cursor:progress}.card-visual.staff-card{flex:0 1 auto;min-height:0;justify-content:center;padding:0;border:0;background:none}.staff-card .staff{width:100%;max-width:400px;height:auto;max-height:100%}.staff-card .staff line.sl{stroke:var(--gray-400)}.quiz.has-pad .answer-space{display:none}.pad-dock{flex:none;min-height:140px;box-sizing:border-box;margin:var(--sp-3) calc(-1 * var(--screen-pad)) calc(-1 * var(--sp-5));padding:var(--sp-3) var(--screen-pad) calc(var(--sp-3-5) + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;gap:var(--sp-2-5);transition:background var(--dur-fast)}.pad-dock.ask{align-items:center;font-size:var(--fs-sm)}.pad-dock.ok{background:var(--c-correct-s)}.pad-dock.hint{background:var(--amber-100)}.pad-dock .pd-row{display:flex;align-items:center;gap:var(--sp-2-5);animation:popIn var(--dur-base) var(--ease-spring) both}.pad-dock .ic{width:36px;height:36px;border-radius:50%;background:var(--c-surface);display:grid;place-items:center;font-size:var(--fs-lg);flex:none;color:var(--c-correct-d)}.pad-dock .pd-txt{flex:1;min-width:0;display:flex;flex-direction:column}.pad-dock .pd-txt b{font-size:var(--fs-xl);font-weight:var(--fw-heading);color:var(--c-correct-d);line-height:1.2}.pad-dock .pd-txt small{font-size:var(--fs-sm);color:var(--c-correct-text)}.pad-dock.hint .pd-txt b,.pad-dock.hint .pd-txt small{color:var(--amber-900)}.pad-dock .pd-skip{font:inherit;font-weight:var(--fw-heading);color:var(--blue-700);text-decoration:underline;padding:0}.card-visual.staff-card{padding-top:var(--sp-4)}@media (max-height: 700px){.fp-grid{grid-auto-rows:36px}.fret-pad.bass .fp-grid{grid-auto-rows:40px}.fp-dot{width:32px;height:32px;font-size:14px}.piano-pad .piano{height:140px}}.not-found{min-height:100dvh;display:grid;place-items:center;padding:var(--sp-6);background:var(--c-bg)}.not-found-card{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2-5);padding:var(--sp-8) var(--sp-6);background:var(--c-surface);border:var(--bw) solid var(--c-border);border-radius:var(--r-xl)}.not-found-code{color:var(--c-primary)}.not-found-actions{width:100%;margin-top:var(--sp-3)}.auth-action{min-height:100dvh;display:grid;place-items:center;padding:var(--sp-6);background:var(--c-bg)}.auth-action-card{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);padding:var(--sp-8) var(--sp-6);background:var(--c-surface);border:var(--bw) solid var(--c-border);border-radius:var(--r-xl)}.auth-action-logo{height:var(--ic-xl);width:auto;margin-bottom:var(--sp-1)}.auth-action-icon{width:var(--sp-14);height:var(--sp-14);border-radius:50%;display:grid;place-items:center;background:var(--c-surface-muted);color:var(--c-primary);font-size:var(--ic-lg)}.auth-action-email{color:var(--c-text);font-weight:var(--fw-label);word-break:break-word}.auth-action-form{width:100%;display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-1);text-align:left}.auth-action-actions{width:100%;margin-top:var(--sp-2)}.consent-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--z-sheet);background:var(--c-scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--sp-3);animation:fade var(--dur-fast) both}.consent-overlay.preview{position:relative;min-height:100%}.consent-card{width:100%;max-height:100%;background:var(--c-surface);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-lg);border-radius:var(--r-xl);padding:var(--sp-5) var(--screen-pad) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3-5);overflow:hidden;box-shadow:var(--shadow-phone);animation:slideUp var(--dur-fast) var(--ease-out) both}.consent-header{display:flex;flex-direction:column;gap:var(--sp-2-5);flex:none}.consent-pill-row{display:flex;align-items:center}.consent-legal-pill{display:inline-flex;align-items:center;gap:var(--sp-1-5);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);background:var(--c-surface-brand);border:var(--bw) solid var(--blue-200);border-bottom-width:var(--depth-sm);color:var(--c-brand);font-size:var(--fs-sm);font-weight:var(--fw-heading);line-height:var(--lh-tight)}.consent-legal-pill svg{font-size:var(--ic-sm);flex:none}.consent-hero-row{display:flex;align-items:center;gap:var(--sp-3)}.consent-hero-row .mascot{margin:0;flex:none}.consent-hero-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}.consent-hero-txt .h2{color:var(--c-heading);font-size:var(--fs-xl);line-height:var(--lh-tight)}.consent-hero-txt .t-caption{margin:0;font-size:var(--fs-sm)}.consent-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-3);padding-right:var(--sp-0-5)}.consent-summary{background:var(--c-surface-brand);border:var(--bw) solid var(--blue-200);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-3-5);display:flex;flex-direction:column;gap:var(--sp-2)}.consent-summary-txt{margin:0;font-size:var(--fs-md);font-weight:var(--fw-body);line-height:var(--lh-body);color:var(--c-text)}.consent-read-btn{display:inline-flex;align-items:center;gap:var(--sp-1-5);font-size:var(--fs-md);font-weight:var(--fw-heading);color:var(--c-link);text-align:left;padding:var(--sp-1) 0}.consent-read-btn svg{font-size:var(--ic-sm);flex:none}@media (hover: hover){.consent-read-btn:hover{text-decoration:underline}}.consent-checks{display:flex;flex-direction:column;gap:var(--sp-2-5)}.consent-check{position:relative;display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3-5);border-radius:var(--r-lg);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-md);background:var(--c-surface);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast)}.consent-check.checked{border-color:var(--blue-200);border-bottom-color:var(--c-selected);background:var(--c-selected-s)}.consent-check-input{position:absolute;top:0;left:0;margin:0;opacity:0;width:1px;height:1px;pointer-events:none}.consent-check-box{width:var(--ic-md);height:var(--ic-md);border-radius:var(--r-sm);border:var(--bw) solid var(--c-border-strong);border-bottom-width:var(--depth-sm);background:var(--c-surface);color:var(--c-on-tone);display:grid;place-items:center;flex:none;margin-top:var(--sp-0-5);font-size:var(--ic-xs);transition:border-color var(--dur-fast),background var(--dur-fast)}.consent-check.checked .consent-check-box,.pf-privacy-toggle.checked .consent-check-box{border-color:var(--c-primary-d);background:var(--c-primary)}.consent-check-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}.consent-check-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2)}.consent-check-top b{font-size:var(--fs-md);font-weight:var(--fw-heading);color:var(--c-heading);line-height:var(--lh-tight)}.consent-check.checked .consent-check-top b{color:var(--c-brand)}.consent-check-body small{font-size:var(--fs-sm);font-weight:var(--fw-body);color:var(--c-text-muted);line-height:var(--lh-body)}.consent-tag{flex:none;font-size:var(--fs-xs);font-weight:var(--fw-heading);padding:var(--sp-0-5) var(--sp-2);border-radius:var(--r-full);background:var(--c-surface-muted);color:var(--c-text-muted);line-height:var(--lh-tight)}.consent-tag.req{background:var(--c-wrong-s);color:var(--c-wrong-d)}.consent-rights-note{display:flex;align-items:flex-start;gap:var(--sp-2);font-size:var(--fs-md);font-weight:var(--fw-body);color:var(--c-correct-text);background:var(--c-correct-s);border:var(--bw) solid var(--c-correct);padding:var(--sp-2-5) var(--sp-3);border-radius:var(--r-lg);line-height:var(--lh-body)}.consent-rights-note svg{flex:none;font-size:var(--ic-sm);margin-top:var(--sp-0-5)}.consent-actions{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);flex:none}.consent-declined{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);padding:var(--sp-4) 0 var(--sp-2)}.consent-declined .mascot{margin:0}.consent-declined-desc{max-width:340px}.consent-declined-box{width:100%;background:var(--c-wrong-s);border:var(--bw) solid var(--c-wrong);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-3-5)}.consent-declined-note{margin:0;font-size:var(--fs-md);font-weight:var(--fw-body);line-height:var(--lh-body);color:var(--c-wrong-d)}.consent-policy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2)}.consent-policy-title{margin:var(--sp-1) 0 0}.consent-close-ic{width:var(--sp-8);height:var(--sp-8);display:grid;place-items:center;border-radius:var(--r-full);background:var(--c-surface-muted);border:var(--bw) solid var(--c-border);color:var(--c-text-muted);font-size:var(--ic-sm);flex:none}.consent-policy-scroll{display:flex;flex-direction:column;gap:var(--sp-3);overflow-y:auto;max-height:58dvh}.consent-box{background:var(--c-surface-brand);border:var(--bw) solid var(--blue-200);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-3-5);display:flex;flex-direction:column;gap:var(--sp-1)}.consent-box-title{font-size:var(--fs-md);font-weight:var(--fw-heading);color:var(--c-brand)}.consent-section{display:flex;flex-direction:column;gap:var(--sp-2)}.consent-list{margin:0;padding-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-1-5);font-size:var(--fs-md);color:var(--c-text);line-height:var(--lh-body)}.consent-full-text{white-space:pre-wrap;font-size:var(--fs-md);font-weight:var(--fw-body);color:var(--c-text);line-height:var(--lh-body);background:var(--c-surface-muted);border:var(--bw) solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-3-5)}.consent-policy-foot{padding-top:var(--sp-1)}.acc-consent-box{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2-5)}.acc-consent-verified{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-3) var(--sp-3-5);border-radius:var(--r-lg);border:var(--bw) solid var(--c-correct);background:var(--c-correct-s);color:var(--c-correct-text);font-size:var(--fs-md);font-weight:var(--fw-body)}.acc-consent-verified button{color:var(--c-link);font-size:var(--fs-md);font-weight:var(--fw-heading);text-decoration:underline;flex:none}.acc-nav-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;min-height:var(--tap-min);padding:var(--sp-3) var(--sp-4);background:var(--c-surface-muted);border:var(--bw) solid var(--c-border);border-radius:var(--r-md);font-size:var(--fs-md);font-weight:var(--fw-label);color:var(--c-text);text-align:left;transition:border-color var(--dur-fast),background var(--dur-fast)}.acc-nav-row svg{flex:none;color:var(--c-text-muted);font-size:var(--ic-sm)}@media (hover: hover){.acc-nav-row:hover{border-color:var(--c-border-strong)}}.pf-privacy-toggle{position:relative;display:flex;align-items:center;gap:var(--sp-2-5);min-height:var(--tap-min);padding:var(--sp-1-5) 0;font-size:var(--fs-md);font-weight:var(--fw-body);color:var(--c-text);cursor:pointer}.pf-privacy-toggle .consent-check-box{margin-top:0}.pf-privacy-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-2-5)}.acc-tenant-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);padding:var(--sp-2) 0;color:var(--c-link);font-size:var(--fs-md);font-weight:var(--fw-label);text-align:left}.acc-tenant-toggle svg{flex:none;font-size:var(--ic-sm)}.acc-tenant-panel{margin-top:var(--sp-3);padding:var(--sp-3);background:var(--c-surface-muted);border:var(--bw) solid var(--c-border);border-radius:var(--r-md);display:flex;flex-direction:column;gap:var(--sp-2)}.acc-tenant-panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}.acc-tenant-panel-head .acc-label{margin:0}.acc-tenant-clear{font-size:var(--fs-sm);font-weight:var(--fw-label);color:var(--c-text-muted);text-decoration:underline;text-underline-offset:2px}.acc-tenant-row,.pf-set-name-row{display:flex;align-items:stretch;gap:var(--sp-2)}.acc-tenant-row .acc-field,.pf-set-name-row .acc-field{flex:1}.acc-tenant-row .b3,.pf-set-name-row .b3,.acc-tenant-check{flex:none;min-height:var(--tap-min);padding-inline:var(--sp-4);border-radius:var(--r-md);white-space:nowrap}.acc-tenant-ok{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);background:var(--c-correct-s);color:var(--c-correct-text);font-size:var(--fs-md);font-weight:var(--fw-body)}.acc-tenant-ok svg{flex:none;font-size:var(--ic-sm)}.acc-tenant-box{padding:var(--sp-4);background:var(--c-surface);border:var(--bw) solid var(--c-border);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:var(--sp-3)}.acc-tenant-current{display:flex;align-items:center;gap:var(--sp-3);color:var(--c-heading)}.acc-tenant-icon{flex:none;width:var(--sp-10);height:var(--sp-10);border-radius:var(--r-md);background:var(--c-surface-brand);color:var(--c-brand);display:grid;place-items:center}.acc-tenant-icon svg{font-size:var(--ic-md)}.acc-tenant-meta{display:flex;flex-direction:column;gap:var(--sp-0-5);min-width:0}.acc-tenant-meta small{font-size:var(--fs-xs);font-weight:var(--fw-label);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--c-text-muted)}.acc-tenant-meta b{font-size:var(--fs-md);font-weight:var(--fw-heading);color:var(--c-heading)}.acc-tenant-footer{border-top:var(--bw) solid var(--c-border);padding-top:var(--sp-2-5);display:flex;align-items:center}.acc-tenant-leave{display:inline-flex;align-items:center;gap:var(--sp-1-5);padding:var(--sp-1-5) var(--sp-2-5);margin-left:calc(-1 * var(--sp-2-5));border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:var(--fw-label);color:var(--c-wrong-d);transition:background var(--dur-fast)}.acc-tenant-leave svg{font-size:var(--ic-sm)}@media (hover: hover){.acc-tenant-leave:hover{background:var(--c-wrong-s)}}.acc-tenant-dest{margin:0;color:var(--c-text);line-height:var(--lh-body)}.acc-warn-callout{width:100%;padding:var(--sp-3);border-radius:var(--r-md);background:var(--c-wrong-s);border:var(--bw) solid var(--c-wrong);color:var(--c-wrong-d);font-size:var(--fs-md);font-weight:var(--fw-body);line-height:var(--lh-body);text-align:left}.pf-tenant-card{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-3-5);background:var(--c-surface-brand);border-color:var(--blue-100);display:flex;flex-direction:column;gap:var(--sp-1-5)}.pf-tenant-badge{display:inline-flex;align-items:center;gap:var(--sp-1-5);font-size:var(--fs-xs);font-weight:var(--fw-heading);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-brand)}.pf-tenant-badge svg{font-size:var(--ic-xs)}.pf-tenant-info{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}.pf-tenant-info b{font-size:var(--fs-md);font-weight:var(--fw-heading);color:var(--c-heading)}.pf-set{padding-bottom:calc(var(--sp-8) + env(safe-area-inset-bottom,0px))}.pf-set-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-1-5);padding:var(--sp-5) var(--sp-4);background:var(--c-surface-brand);border:var(--bw) solid var(--blue-100);border-radius:var(--r-lg)}.pf-set-ava{margin-bottom:var(--sp-1);border-color:var(--c-surface);box-shadow:0 var(--sp-1) var(--sp-3) var(--blue-700-a10)}.pf-set-name{font-size:var(--fs-lg);font-weight:var(--fw-heading);color:var(--c-heading);line-height:var(--lh-tight)}.pf-set-email{font-size:var(--fs-sm);font-weight:var(--fw-body);color:var(--c-text-muted);word-break:break-word}.pf-set-via{display:inline-flex;align-items:center;gap:var(--sp-1-5);margin-top:var(--sp-1);padding:var(--sp-1) var(--sp-2-5);border-radius:var(--r-full);background:var(--c-surface);border:var(--bw) solid var(--blue-100);font-size:var(--fs-xs);font-weight:var(--fw-label);color:var(--c-brand)}.pf-set-via svg{font-size:var(--ic-xs)}.pf-set-sec{margin:var(--sp-5) 0 var(--sp-2);color:var(--c-text-muted)}.pf-set-card{background:var(--c-surface);border:var(--bw) solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-4);display:flex;flex-direction:column}.pf-set-card.pf-set-list{padding:var(--sp-1-5) var(--sp-4)}.pf-set-label{font-size:var(--fs-sm);font-weight:var(--fw-label);color:var(--c-text);margin-bottom:var(--sp-1-5)}.pf-set-divider{height:var(--bw);background:var(--c-border);margin:var(--sp-3) 0}.pf-set-list .pf-set-divider{margin:0}.pf-set-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--tap-min);padding:var(--sp-2-5) 0;text-align:left;transition:opacity var(--dur-fast)}.pf-set-row:disabled{opacity:.6;cursor:default}.pf-set-row-ic{flex:none;width:var(--sp-10);height:var(--sp-10);border-radius:var(--r-md);background:var(--c-surface-brand);color:var(--c-brand);display:grid;place-items:center}.pf-set-row-ic svg{font-size:var(--ic-md)}.pf-set-row-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-0-5)}.pf-set-row-txt b{font-size:var(--fs-md);font-weight:var(--fw-heading);color:var(--c-heading);line-height:var(--lh-tight)}.pf-set-row-txt small{font-size:var(--fs-sm);font-weight:var(--fw-body);color:var(--c-text-muted);line-height:var(--lh-body)}.pf-set-row-caret{flex:none;color:var(--c-text-disabled);font-size:var(--ic-sm)}@media (hover: hover){.pf-set-row:hover:not(:disabled) .pf-set-row-caret{color:var(--c-brand)}}.pf-set-footer{margin-top:var(--sp-6);display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}.pf-set-logout{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;min-height:var(--tap-min);padding:var(--sp-3) var(--sp-4);background:var(--c-surface);border:var(--bw) solid var(--c-border);border-bottom-width:var(--depth-sm);border-radius:var(--r-lg);font-size:var(--fs-md);font-weight:var(--fw-heading);color:var(--c-wrong-d);transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-press)}.pf-set-logout svg{font-size:var(--ic-sm)}.pf-set-logout:active{transform:translateY(var(--depth-sm));border-bottom-width:var(--bw)}@media (hover: hover){.pf-set-logout:hover{background:var(--c-wrong-s);border-color:var(--c-wrong)}}.pf-set-del{display:inline-flex;align-items:center;gap:var(--sp-1-5)}.pf-set-del svg{font-size:var(--ic-xs)}