.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);background-color:var(--color-surface);box-shadow:var(--shadow-nav);padding-bottom:env(safe-area-inset-bottom,0px)}.bottom-nav__list{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--layout-max-width);margin:0 auto}.bottom-nav__link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);min-height:var(--layout-nav-height);padding:var(--space-2) var(--space-1);color:var(--color-text-muted);font-size:var(--font-size-xs);line-height:var(--line-height-tight);transition:color var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease)}.bottom-nav__link:hover{color:var(--color-primary);background-color:var(--color-surface-hover)}.bottom-nav__link--active{color:var(--color-primary);font-weight:var(--font-weight-medium)}.bottom-nav__label{letter-spacing:.02em}.app-shell{display:flex;flex-direction:column;min-height:100%;background-color:var(--color-bg)}.app-shell--with-nav{padding-bottom:calc(var(--layout-nav-height) + env(safe-area-inset-bottom,0px))}.app-shell__header{position:sticky;top:0;z-index:var(--z-sticky);background-color:var(--color-surface);border-bottom:1px solid var(--color-border)}.app-shell__header-inner{display:flex;align-items:center;gap:var(--space-3);height:var(--layout-header-height);max-width:var(--layout-max-width);margin:0 auto;padding:0 var(--space-4)}.app-shell__brand{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary);letter-spacing:.01em}.app-shell__title{font-size:var(--font-size-sm);color:var(--color-text-muted)}.app-shell__back{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:calc(var(--space-2) * -1);padding:0;color:var(--color-text);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer}.app-shell__back:hover{background-color:var(--color-surface-muted)}.app-shell__back:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.app-shell__main{flex:1 1 auto}.app-shell__content{max-width:var(--layout-max-width);margin:0 auto;padding:var(--space-5) var(--space-4)}.spotlight-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;pointer-events:none}.spotlight-mask{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.spotlight-highlight{position:absolute;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:3px solid var(--color-primary, #3b82f6);border-radius:12px;pointer-events:none;animation:spotlight-pulse 2s ease-in-out infinite;box-shadow:0 0 0 4px #3b82f633,0 0 24px #3b82f666}@keyframes spotlight-pulse{0%,to{box-shadow:0 0 0 4px #3b82f633,0 0 24px #3b82f666}50%{box-shadow:0 0 0 8px #3b82f64d,0 0 32px #3b82f699}}.spotlight-tooltip{position:absolute;background:var(--surface-raised, #1a1a1a);border:1px solid var(--border-default, #2a2a2a);border-radius:12px;padding:16px 20px;max-width:320px;box-shadow:0 8px 24px #0006;pointer-events:auto;animation:spotlight-tooltip-enter .3s ease-out}@keyframes spotlight-tooltip-enter{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}.spotlight-tooltip-text{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--text-default, #e5e5e5)}.spotlight-next-btn{width:100%;padding:10px 16px;background:var(--color-primary, #3b82f6);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.spotlight-next-btn:hover{background:var(--color-primary-hover, #2563eb)}.spotlight-next-btn:active{background:var(--color-primary-active, #1d4ed8)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--layout-touch-min);padding:0 var(--space-5);border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);border:1px solid transparent;transition:background-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn__icon{display:inline-flex;align-items:center}.btn--primary{background-color:var(--color-primary);color:var(--color-on-primary)}.btn--primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.btn--primary:active:not(:disabled){background-color:var(--color-primary-active)}.btn--secondary{background-color:var(--color-surface);color:var(--color-primary);border-color:var(--color-border-strong)}.btn--secondary:hover:not(:disabled){background-color:var(--color-primary-soft);border-color:var(--color-primary)}.btn--ghost{background-color:transparent;color:var(--color-text-muted)}.btn--ghost:hover:not(:disabled){background-color:var(--color-surface-hover);color:var(--color-primary)}.btn--danger{background-color:var(--color-danger);color:var(--color-text-invert)}.btn--danger:hover:not(:disabled){background-color:var(--color-danger);filter:brightness(.94)}.btn--sm{min-height:34px;padding:0 var(--space-3);font-size:var(--font-size-sm);border-radius:var(--radius-sm)}.btn--lg{min-height:52px;padding:0 var(--space-6);font-size:var(--font-size-lg);border-radius:var(--radius-lg)}.btn--full{width:100%}.card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-4)}.card--muted{background-color:var(--color-surface-muted);box-shadow:none}.card--flat{box-shadow:none}.card__header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}.card__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text)}.card__extra{font-size:var(--font-size-sm);color:var(--color-text-muted)}.card__body{display:flex;flex-direction:column;gap:var(--space-3);color:var(--color-text)}.card__footer{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-border)}.login-page{min-height:100%;display:flex;align-items:center;justify-content:center;padding:var(--space-5) var(--space-4);background-color:var(--color-bg)}.login-page__inner{width:100%;max-width:440px;display:grid;gap:var(--space-5)}.login-page__brand{text-align:center}.login-page__brand strong{color:var(--color-primary);font-size:var(--font-size-3xl)}.login-page__brand p{margin-top:var(--space-1);color:var(--color-text-muted)}.login-form{display:grid;gap:var(--space-4)}.login-field{display:grid;gap:var(--space-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.login-field input{min-height:var(--layout-touch-min);width:100%;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);padding:var(--space-3)}.login-field input:focus{border-color:var(--color-border-focus);outline:none;box-shadow:var(--shadow-focus)}.login-field input:disabled{background:var(--color-surface-muted);color:var(--color-text-muted)}.login-form__error{color:var(--color-danger);background:var(--color-danger-bg);border-radius:var(--radius-sm);padding:var(--space-3);font-size:var(--font-size-sm)}.login-form__hint{color:var(--color-text-muted);font-size:var(--font-size-xs);margin-top:var(--space-4);text-align:center}.session-loading{min-height:100%;display:grid;place-items:center;color:var(--color-text-muted)}@media (max-height: 520px){.login-page{align-items:flex-start}.login-page__brand{display:none}}.welcome-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;padding:24px;overflow:hidden;background:radial-gradient(circle at 78% 16%,rgba(255,255,255,.88),transparent 34%),radial-gradient(circle at 14% 86%,rgba(159,205,237,.38),transparent 30%),linear-gradient(145deg,var(--mist-50) 0%,var(--color-bg) 52%,var(--mist-200) 100%)}.welcome-page:before,.welcome-page:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.welcome-page:before{width:600px;height:600px;top:-200px;right:-200px;background:radial-gradient(circle,rgba(84,127,174,.12) 0%,transparent 70%);animation:float-glow 8s ease-in-out infinite}.welcome-page:after{width:400px;height:400px;bottom:-100px;left:-100px;background:radial-gradient(circle,rgba(159,205,237,.24) 0%,transparent 70%);animation:float-glow 6s ease-in-out infinite reverse}@keyframes float-glow{0%,to{transform:translateZ(0) scale(1);opacity:.8}50%{transform:translate3d(30px,-30px,0) scale(1.1);opacity:1}}.welcome-content{position:relative;z-index:1;width:100%;max-width:900px;text-align:center;animation:welcome-enter .6s ease-out}@keyframes welcome-enter{0%{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translateZ(0)}}.welcome-title{margin:0 0 16px;color:var(--mist-900);font-size:clamp(32px,5vw,48px);font-weight:700;letter-spacing:0;text-shadow:0 4px 24px rgba(84,127,174,.16)}.welcome-subtitle{margin:0 0 48px;color:var(--color-muted);font-size:clamp(16px,2.5vw,20px);font-weight:500}.welcome-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}.welcome-feature{padding:32px 24px;border:1px solid rgba(84,127,174,.16);border-radius:8px;background:#ffffffad;box-shadow:0 16px 36px #3b597e14;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.welcome-feature:hover{border-color:#547fae57;transform:translate3d(0,-4px,0);box-shadow:0 20px 44px #3b597e24}.welcome-feature-icon{margin-bottom:12px;font-size:40px}.welcome-feature h3{margin:0 0 8px;color:var(--mist-900);font-size:18px;font-weight:600}.welcome-feature p{margin:0;color:var(--color-muted);font-size:14px;line-height:1.5}.welcome-start-btn{width:100%;max-width:320px;padding:16px 32px;border:none;border-radius:8px;background:var(--mist-700);color:#fff;box-shadow:0 8px 24px #547fae47;cursor:pointer;font-size:18px;font-weight:600;transition:transform .25s ease,background .25s ease,box-shadow .25s ease}.welcome-start-btn:hover{background:var(--mist-800);transform:translate3d(0,-2px,0);box-shadow:0 12px 30px #547fae5c}.welcome-start-btn:active{transform:translateZ(0) scale(.98)}.welcome-start-btn:focus-visible{outline:3px solid rgba(84,127,174,.28);outline-offset:3px}@media (max-width: 768px){.welcome-features{grid-template-columns:1fr;gap:16px}.welcome-feature{padding:24px 20px}}:root{--demo-bg: #eaf4f8;--demo-bg-soft: #f7fbfc;--demo-page-bg: radial-gradient(120% 80% at 50% 0%, #f7fbfc 0%, #eaf4f8 55%, #dbebf0 100%);--demo-surface: rgba(255,255,255,.82);--demo-surface-solid: #fff;--demo-ink: #1a2e36;--demo-ink-secondary: #4a5f69;--demo-muted: #7a9099;--demo-primary: #416fae;--demo-primary-deep: #2d558a;--demo-primary-soft: #d8ebff;--demo-primary-rgb: 65,111,174;--demo-line: rgba(84,126,143,.16);--demo-line-strong: rgba(84,126,143,.22);--demo-shadow: rgba(38,72,88,.12);--demo-shadow-strong: rgba(38,72,88,.18);--demo-overlay-scrim: rgba(26,46,54,.38);--demo-highlight: rgba(255,255,255,.35);--demo-highlight-soft: rgba(255,255,255,.22);--demo-yellow: rgba(255,222,124,.9);--demo-yellow-edge: rgba(205,164,50,.92);--demo-blue: rgba(143,214,237,.9);--demo-blue-edge: rgba(66,156,187,.9);--demo-red: rgba(255,169,158,.9);--demo-red-edge: rgba(207,103,91,.9);--demo-green: rgba(181,229,143,.9);--demo-green-edge: rgba(103,168,61,.9);--demo-purple: rgba(211,177,233,.9);--demo-purple-edge: rgba(149,97,182,.9);--demo-stone: rgba(120,133,134,.92);--demo-stone-edge: #657477;--board-frame-border: #a9ccd5;--board-frame-bg: #84b3bf;--board-frame-lip: #84b3bf;--board-frame-border-width: 9px;--board-frame-radius: 20px;--board-frame-shadow: inset 0 8px 15px var(--demo-shadow), 0 7px 0 var(--board-frame-lip), 0 14px 24px var(--demo-shadow-strong);--board-grid-bg: linear-gradient(180deg, #dcebed, #cadfe4);--board-grid-line: rgba(62,111,126,.12);--board-glow: none;--block-ink: #304047;--block-ink-stone: #eef4f2;--block-badge-ink: #1e2527;--block-badge-shadow: 0 1px 0 rgba(255,255,255,.65);--block-bubble-bg: rgba(255,255,255,.96);--block-bubble-ink: #304753;--block-bubble-border: rgba(84,126,143,.22);--block-bubble-arrow-fill: %23ffffff;--block-bubble-arrow-stroke: %23547E8F;--demo-feed-halo: rgba(255,255,255,.75);--demo-on-primary: #fff;--demo-slot-lip: rgba(var(--demo-primary-rgb),.55);--demo-btn-lip: rgba(var(--demo-primary-rgb),.25);--demo-mastery-border: #d4a017;--demo-mastery-bg: linear-gradient(135deg, #f6c44c, #e8a82c);--demo-mastery-ring: rgba(246,196,76,.7);--demo-mastery-glow: rgba(246,196,76,.6);--demo-reward-border: rgba(255,193,7,.55);--demo-reward-bg: linear-gradient(135deg, rgba(255,248,225,.97), rgba(255,236,179,.95));--demo-reward-ink: #b8860b;--demo-reward-glow: rgba(255,193,7,.35)}:root[data-cosmetic-theme=theme_mint]{--demo-bg: #e8f5ef;--demo-bg-soft: #f4f9f7;--demo-page-bg: radial-gradient(120% 80% at 50% 0%, #f6fbf8 0%, #e8f5ef 55%, #d8ece3 100%);--demo-surface: rgba(255,255,255,.84);--demo-surface-solid: #f9fcfa;--demo-ink: #203832;--demo-ink-secondary: #4a6a61;--demo-muted: #7d968c;--demo-primary: #477b70;--demo-primary-deep: #2f5b53;--demo-primary-soft: #d2e7dd;--demo-primary-rgb: 71,123,112;--demo-line: rgba(71,123,112,.18);--demo-line-strong: rgba(71,123,112,.26);--demo-shadow: rgba(45,90,82,.12);--demo-shadow-strong: rgba(45,90,82,.18);--demo-overlay-scrim: rgba(28,56,49,.38);--demo-yellow: rgba(247,224,150,.92);--demo-yellow-edge: rgba(188,155,58,.92);--demo-blue: rgba(157,215,214,.92);--demo-blue-edge: rgba(72,150,150,.92);--demo-red: rgba(244,175,164,.92);--demo-red-edge: rgba(193,101,89,.92);--demo-green: rgba(178,225,168,.92);--demo-green-edge: rgba(90,157,96,.92);--demo-purple: rgba(199,187,229,.92);--demo-purple-edge: rgba(133,116,180,.92);--demo-stone: rgba(126,142,136,.92);--demo-stone-edge: #62736d;--board-frame-border: #b6d7c9;--board-frame-bg: #8ebfae;--board-frame-lip: #7bae9c;--board-grid-bg: linear-gradient(180deg, #dcefe6, #c9e3d8);--board-grid-line: rgba(63,116,103,.13);--block-ink: #2c433c;--block-badge-ink: #22322c;--block-bubble-bg: rgba(255,255,255,.96);--block-bubble-ink: #2c4a42;--block-bubble-border: rgba(71,123,112,.24);--block-bubble-arrow-fill: %23ffffff;--block-bubble-arrow-stroke: %23477B70}:root[data-cosmetic-theme=theme_neon]{--demo-bg: #0a0e1a;--demo-bg-soft: #0f1424;--demo-page-bg: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(34,211,238,.1), transparent 70%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(171,71,188,.09), transparent 70%), linear-gradient(180deg, #0f1424 0%, #0a0e1a 100%);--demo-surface: rgba(20,26,46,.82);--demo-surface-solid: #141a2e;--demo-ink: #e8ecf4;--demo-ink-secondary: #b3bdd0;--demo-muted: #8892a8;--demo-primary: #22d3ee;--demo-primary-deep: #67e8f9;--demo-primary-soft: #123544;--demo-primary-rgb: 34,211,238;--demo-line: rgba(255,255,255,.1);--demo-line-strong: rgba(103,232,249,.3);--demo-shadow: rgba(2,8,23,.5);--demo-shadow-strong: rgba(2,8,23,.62);--demo-overlay-scrim: rgba(4,8,18,.7);--demo-highlight: rgba(255,255,255,.18);--demo-highlight-soft: rgba(255,255,255,.12);--demo-yellow: rgba(255,213,79,.28);--demo-yellow-edge: #ffd54f;--demo-blue: rgba(79,195,247,.28);--demo-blue-edge: #4fc3f7;--demo-red: rgba(239,83,80,.28);--demo-red-edge: #ef5350;--demo-green: rgba(102,187,106,.28);--demo-green-edge: #66bb6a;--demo-purple: rgba(171,71,188,.28);--demo-purple-edge: #ab47bc;--demo-stone: rgba(58,61,78,.92);--demo-stone-edge: #4a4f66;--board-frame-border: rgba(255,255,255,.08);--board-frame-bg: #0d1120;--board-frame-lip: rgba(34,211,238,.16);--board-frame-border-width: 1px;--board-frame-radius: 12px;--board-frame-shadow: inset 0 0 60px rgba(2,8,23,.6), 0 0 0 1px rgba(103,232,249,.12), 0 0 40px rgba(2,8,23,.6), 0 0 26px rgba(34,211,238,.12);--board-grid-bg: radial-gradient(ellipse at 50% 100%, rgba(34,211,238,.06), transparent 70%), linear-gradient(180deg, #101529 0%, #0d1120 100%);--board-grid-line: rgba(255,255,255,.035);--board-glow: 0 0 18px rgba(34,211,238,.16);--block-ink: #f2f6ff;--block-ink-stone: #d4dae8;--block-badge-ink: #f8fbff;--block-badge-shadow: 0 0 6px rgba(2,8,23,.9);--block-bubble-bg: rgba(15,20,36,.94);--block-bubble-ink: #e8ecf4;--block-bubble-border: rgba(103,232,249,.34);--block-bubble-arrow-fill: %230F1424;--block-bubble-arrow-stroke: %2367E8F9;--demo-feed-halo: rgba(2,8,23,.85);--demo-on-primary: #07121c;--demo-slot-lip: rgba(34,211,238,.5);--demo-btn-lip: rgba(34,211,238,.22);--demo-mastery-border: #e8a82c;--demo-mastery-bg: linear-gradient(135deg, rgba(246,196,76,.22), rgba(232,168,44,.28));--demo-mastery-ring: rgba(246,196,76,.5);--demo-mastery-glow: rgba(246,196,76,.4);--demo-reward-border: rgba(255,193,7,.45);--demo-reward-bg: linear-gradient(135deg, rgba(15,20,36,.92), rgba(20,26,46,.9));--demo-reward-ink: #ffd54f;--demo-reward-glow: rgba(255,193,7,.28)}.demo-game-page{--page-gutter: clamp(10px, 3.5vw, 42px);--page-top: max(8px, env(safe-area-inset-top));--page-bottom: max(8px, env(safe-area-inset-bottom));--cell: var(--measured-cell, min(68px, calc((100dvh - 310px)*.1) , calc((100vw - (var(--page-gutter) * 2 + 18px)) / 6)));--board-w: calc(var(--cell) * 6);--board-h: calc(var(--cell) * 10);position:relative;box-sizing:border-box;height:100dvh;min-height:0;padding:var(--page-top) var(--page-gutter) var(--page-bottom);overflow-x:hidden;overflow-y:auto;color:var(--demo-ink);background:var(--demo-page-bg),var(--demo-bg)}.demo-game-screen{position:relative;display:flex;box-sizing:border-box;width:100%;max-width:1080px;min-height:100%;flex-direction:column;padding-bottom:max(16px,env(safe-area-inset-bottom));margin:0 auto;padding-top:0}.demo-game-topbar{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;min-height:52px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--demo-line);text-align:center}.demo-game-topbar .demo-icon-button{position:static}.demo-game-topbar .demo-icon-button:first-child{justify-self:start}.demo-game-topbar .demo-icon-button:last-child{justify-self:end}.demo-icon-button{display:grid;width:36px;height:36px;place-items:center;border:1px solid var(--demo-line);border-radius:12px;background:var(--demo-surface);color:var(--demo-ink-secondary);font-size:20px;line-height:1;box-shadow:0 2px 6px var(--demo-shadow)}.demo-icon-button:last-child{justify-self:end}.demo-icon-button:hover{border-color:rgba(var(--demo-primary-rgb),.4);background:var(--demo-surface-solid)}.demo-game-title{grid-column:2;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.demo-game-title strong{display:block;margin-top:3px;font-size:20px;font-weight:900;line-height:1.1}.demo-eyebrow{color:var(--demo-primary);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.demo-level-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(4px,calc(var(--cell) * .1),8px);width:var(--board-w);max-width:100%;margin:0 auto 12px}.demo-level-title,.demo-stat{display:flex;box-sizing:border-box;min-width:0;height:52px;padding:7px clamp(3px,calc(var(--cell) * .1),7px);flex-direction:column;align-items:center;justify-content:center;overflow:hidden;text-align:center;border:1px solid var(--demo-line);border-radius:12px;background:var(--demo-surface);box-shadow:0 3px 10px var(--demo-shadow),inset 0 1px #fffc}.demo-level-title{background:linear-gradient(145deg,var(--demo-primary),var(--demo-primary-deep));color:#fff}.demo-level-title small,.demo-stat small{display:block;width:100%;overflow:hidden;font-size:clamp(8px,calc(var(--cell) * .15),10px);font-weight:800;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}.demo-level-title small{color:#ffffffbf}.demo-level-title strong,.demo-stat strong{display:block;width:100%;max-width:100%;margin-top:4px;overflow:hidden;font-size:clamp(12px,calc(var(--cell) * .25),16px);font-weight:900;line-height:1;text-overflow:ellipsis;white-space:nowrap}.demo-stat strong{color:var(--demo-ink);font-variant-numeric:tabular-nums}.demo-stat small{color:var(--demo-muted)}.demo-stat--priority{background:var(--demo-primary);border-color:var(--demo-primary-deep)}.demo-stat--priority small,.demo-stat--priority strong{color:#fff}.demo-stat--next{background:color-mix(in srgb,var(--next-face, rgba(181,229,143,.9)) 45%,transparent);border-color:color-mix(in srgb,var(--next-edge, rgba(103,168,61,.9)) 50%,transparent)}.demo-stat--next strong{overflow:visible;font-size:15px;text-overflow:clip}.demo-play-surface{display:grid;flex:1 1 auto;align-content:start;justify-content:center;width:100%;min-height:0;padding:clamp(4px,1.2dvh,10px) 0 clamp(6px,1.6dvh,12px)}.demo-main-game{width:calc(var(--board-w) + 18px);min-width:0;margin:0 auto}.demo-game-column{width:100%}.demo-board-frame{position:relative;z-index:1;box-sizing:content-box;width:var(--board-w);height:var(--board-h);margin:0 auto;padding:0;border:var(--board-frame-border-width) solid var(--board-frame-border);border-radius:var(--board-frame-radius);background:var(--board-frame-bg);box-shadow:var(--board-frame-shadow),var(--board-glow);overflow:visible}.demo-board-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,var(--cell));grid-template-rows:repeat(10,var(--cell));width:var(--board-w);height:var(--board-h);overflow:visible;background:var(--board-grid-bg);background-image:linear-gradient(var(--board-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--board-grid-line) 1px,transparent 1px),var(--board-grid-bg);background-size:var(--cell) var(--cell),var(--cell) var(--cell),100% 100%}.demo-board-cell{position:relative;width:var(--cell);height:var(--cell);margin:0;padding:0;border:0;outline:0;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:none}.demo-board-cell:focus,.demo-board-cell:focus-visible{border:0;outline:0;box-shadow:none}.demo-board-cell--selectable{cursor:grab}.demo-board-cell--dragging{cursor:grabbing;opacity:.58}.demo-board-cell--landed .game-block:before{animation:demo-block-land .36s ease-out}.demo-board-cell--gravity-drop .game-block--gravity-moving{animation:demo-gravity-move var(--gravity-duration) cubic-bezier(.18,.78,.28,1.02) forwards}@keyframes demo-gravity-move{0%{transform:translateY(var(--gravity-offset))}to{transform:translateY(0)}}.game-block--eliminating:before{animation:demo-block-eliminate .42s ease-out var(--elim-delay, 0s) forwards}@keyframes demo-block-eliminate{0%{opacity:1;transform:scale(1)}70%{opacity:.8;transform:scale(1.08)}to{opacity:.12;transform:scale(.72)}}.game-block--eliminating .game-block__special{animation:demo-badge-eliminate .42s ease-out var(--elim-delay, 0s) forwards}@keyframes demo-badge-eliminate{0%{opacity:1}60%{opacity:.7}to{opacity:0}}@keyframes demo-gravity-drop{0%{transform:translateY(calc(var(--cell) * -1.2))}48%{transform:translateY(calc(var(--cell) * -.38))}78%{transform:translateY(5px)}91%{transform:translateY(-2px)}to{transform:translateY(0)}}.demo-board-cell--eliminating:before{content:"";position:absolute;z-index:85;top:3px;right:3px;bottom:3px;left:3px;border:2px solid rgba(255,255,255,.8);border-radius:8px;pointer-events:none;animation:demo-elim-ring .42s ease-out var(--elim-delay, 0s) forwards}.game-block--eliminating-color{animation:demo-color-glow .2s ease-out both}@keyframes demo-color-glow{0%{box-shadow:0 0 #ffd70000}40%{box-shadow:0 0 18px 4px #ffd700cc}to{box-shadow:0 0 22px 6px #ffd700e6}}.clear-particle-field{position:absolute;z-index:90;width:0;height:0;pointer-events:none}.clear-particle{position:absolute;left:50%;top:50%;border-radius:50%;transform-origin:center center;animation:clear-particle-burst 1.15s cubic-bezier(.16,.84,.28,1) forwards}.clear-particle:nth-child(3n){border-radius:35%;transform:rotate(18deg)}.clear-particle:nth-child(4n){border-radius:12%}@keyframes clear-particle-burst{0%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1) rotate(0)}28%{opacity:1;transform:translate3d(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y)),0) scale(.92) rotate(55deg)}68%{opacity:.78;transform:translate3d(calc(-50% + var(--mid-x)),calc(-50% + var(--mid-y)),0) scale(.62) rotate(120deg)}to{opacity:0;transform:translate3d(calc(-50% + var(--dx)),calc(-50% + var(--final-y)),0) scale(.18) rotate(210deg)}}@keyframes demo-block-land{0%{box-shadow:0 0 5px #416fae1f}32%{box-shadow:0 0 18px #416fae80}to{box-shadow:inset 0 1px #ffffff59,inset 0 -1px #2d3f431f,0 2px 2px #36525814}}@keyframes demo-elim-ring{0%{opacity:1;transform:scale(.74)}to{opacity:0;transform:scale(1.18)}}.demo-board-falling{position:absolute;z-index:80;top:calc(var(--fall-row) * var(--cell));left:calc(var(--fall-col) * var(--cell));width:var(--cell);height:var(--cell);pointer-events:none}.demo-board-drag-ghost{position:absolute;z-index:120;top:var(--ghost-y);left:var(--ghost-x);width:var(--cell);height:var(--cell);pointer-events:none;opacity:.82;transform:translate(-50%,-58%) rotate(-2deg) scale(1.04);filter:saturate(1.08)}.demo-board-drag-ghost:before{content:"";position:absolute;z-index:-1;top:-9px;right:-9px;bottom:-9px;left:-9px;border-radius:14px;background:#ffffff4d;box-shadow:0 0 0 1px #ffffff75,0 0 18px #416fae7a;opacity:.9}.demo-board-drag-ghost .game-block{filter:drop-shadow(0 11px 10px rgba(38,72,88,.28))}.game-block{--face: var(--demo-blue);--edge: var(--demo-blue-edge);position:relative;display:grid;width:var(--cell);height:calc(var(--cell) + 2px);padding:7px 5px 5px;place-items:center;color:var(--block-ink);text-align:center}.game-block:before{content:"";position:absolute;top:0;right:0;bottom:2px;left:0;border:1px solid var(--edge);border-radius:6px;background:var(--face);box-shadow:inset 0 1px var(--demo-highlight),inset 0 -1px #2d3f431f,0 2px 2px #36525814}.game-block:after{content:"";position:absolute;z-index:1;top:5px;right:7px;left:7px;height:16%;border-radius:50%;background:linear-gradient(180deg,var(--demo-highlight-soft),transparent)}.game-block--falling{z-index:70;animation:demo-block-float 1.7s ease-in-out infinite}.game-block--falling:before{background:var(--face);box-shadow:inset 0 1px var(--demo-highlight),inset 0 -1px #2d3f4321,0 0 0 2px var(--demo-surface-solid),0 0 0 3px var(--demo-primary),0 6px 14px var(--demo-shadow)}.demo-falling-bubble{position:absolute;z-index:110;top:calc(var(--bubble-row) * var(--cell) - 42px);left:calc((var(--bubble-col) + .5) * var(--cell));width:max-content;max-width:calc(var(--cell) * 2.5);min-height:28px;padding:5px 10px 6px;border:1px solid var(--block-bubble-border);border-radius:7px;color:var(--block-bubble-ink);background:var(--block-bubble-bg);box-shadow:0 4px 10px var(--demo-shadow),inset 0 1px var(--demo-highlight);font-family:var(--demo-font);font-size:clamp(12px,calc(var(--cell) * .23),16px);font-weight:800;line-height:1.1;white-space:nowrap;pointer-events:none;transform:translate(-50%)}.demo-falling-bubble--left-wall{left:8px;transform:translate(0)}.demo-falling-bubble--right-wall{right:8px;left:auto;transform:translate(0)}.demo-falling-bubble--left-wall:after{left:calc(var(--cell) / 2 - 8px)}.demo-falling-bubble--right-wall:after{right:calc(var(--cell) / 2 - 8px);left:auto;transform:none}.demo-falling-bubble:after{content:"";position:absolute;z-index:2;left:50%;bottom:-7px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--block-bubble-bg);transform:translate(-50%);filter:drop-shadow(0 1px 0 var(--block-bubble-border))}.game-block[data-block-skin=block_glass]{filter:saturate(.82) brightness(1.08)}.game-block[data-block-skin=block_arcade]{filter:saturate(1.35) contrast(1.08)}.game-block[data-block-skin=block_glass]:before{box-shadow:inset 0 1px #ffffffad,inset 0 -1px #2d3f431a,0 0 0 2px var(--demo-surface-solid),0 0 12px var(--block-color)}.game-block[data-block-skin=block_neon]{filter:saturate(1.18) contrast(1.08)}.game-block[data-block-skin=block_neon]:before{border-width:2px;border-radius:8px;background:linear-gradient(145deg,color-mix(in srgb,var(--face) 38%,transparent),color-mix(in srgb,var(--face) 22%,transparent));box-shadow:inset 0 1px #ffffff29,inset 0 -8px 14px #00000014,0 0 8px color-mix(in srgb,var(--edge) 64%,transparent),0 0 16px color-mix(in srgb,var(--edge) 32%,transparent)}.game-block[data-block-skin=block_neon]:after{top:4px;right:8px;left:8px;height:18%;background:linear-gradient(180deg,rgba(255,255,255,.34),transparent)}.game-block[data-block-skin=block_neon] .game-block__special{color:#f8fbff;text-shadow:0 0 6px var(--edge)}.game-block[data-block-skin=block_neon].game-block--falling:before{box-shadow:inset 0 1px #fff3,0 0 10px var(--edge),0 0 24px color-mix(in srgb,var(--edge) 56%,transparent)}.game-block[data-block-skin=block_neon].game-block--eliminating:before{box-shadow:inset 0 1px #ffffff4d,0 0 18px var(--edge),0 0 34px color-mix(in srgb,var(--edge) 64%,transparent)}.demo-board-cell--landed .game-block[data-block-skin=block_neon]:before{animation:neon-block-land .36s ease-out}@keyframes neon-block-land{0%{box-shadow:inset 0 1px #ffffff29,inset 0 -8px 14px #00000014,0 0 6px color-mix(in srgb,var(--edge) 48%,transparent)}32%{box-shadow:inset 0 1px #fff3,inset 0 -8px 14px #00000014,0 0 14px color-mix(in srgb,var(--edge) 72%,transparent),0 0 22px color-mix(in srgb,var(--edge) 40%,transparent)}to{box-shadow:inset 0 1px #ffffff29,inset 0 -8px 14px #00000014,0 0 8px color-mix(in srgb,var(--edge) 64%,transparent),0 0 16px color-mix(in srgb,var(--edge) 32%,transparent)}}.game-block--color-yellow{--face: var(--demo-yellow);--edge: var(--demo-yellow-edge)}.game-block--color-blue{--face: var(--demo-blue);--edge: var(--demo-blue-edge)}.game-block--color-red{--face: var(--demo-red);--edge: var(--demo-red-edge)}.game-block--color-purple{--face: var(--demo-purple);--edge: var(--demo-purple-edge)}.game-block--stone{--face: var(--demo-stone);--edge: var(--demo-stone-edge);color:var(--block-ink-stone)}.game-block__special{position:absolute;z-index:10;top:1px;right:2px;display:block;color:var(--block-badge-ink);font-size:clamp(13px,calc(var(--cell) * .22),18px);font-weight:900;line-height:1;text-shadow:var(--block-badge-shadow)}.game-block__special--bomb{color:#e34b3f;text-shadow:0 0 0 #f4bd35,1px 0 0 #f4bd35,-1px 0 0 #f4bd35}.game-block--special-pulse{animation:demo-special-breathe 2.8s ease-in-out infinite}@keyframes demo-special-breathe{0%,18%,to{filter:brightness(1);box-shadow:0 0 #fff0}42%,58%{filter:brightness(1.1) saturate(1.04);box-shadow:0 0 6px 2px #ffffff47,0 0 10px 3px color-mix(in srgb,var(--block-color) 28%,transparent)}80%{filter:brightness(1.03) saturate(1.01);box-shadow:0 0 2px 1px #ffffff1f}}.game-block--special-active .game-block__special{animation:special-mark-breathe .76s ease-in-out 2}@keyframes special-breathe{0%,to{filter:brightness(1);box-shadow:inset 0 1px #ffffff59,0 2px 2px #36525814}50%{filter:brightness(1.32) saturate(1.2);box-shadow:0 0 18px #ffe87bf2,inset 0 1px #ffffffb8}}@keyframes special-mark-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.34);color:#fff2a3}}@keyframes demo-block-float{0%,to{transform:translateY(-2px)}50%{transform:translateY(2px)}}.game-block[data-block-skin=block_happy_blink]:before{background:linear-gradient(145deg,var(--face),color-mix(in srgb,var(--face) 85%,transparent));background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><ellipse cx="8" cy="24" rx="4" ry="3" fill="%23ffb3ba" opacity="0.55"/><ellipse cx="40" cy="24" rx="4" ry="3" fill="%23ffb3ba" opacity="0.55"/><circle cx="16" cy="18" r="2.2" fill="%23334"/><circle cx="32" cy="18" r="2.2" fill="%23334"/><path d="M 15 27 Q 24 33 33 27" stroke="%23334" stroke-width="2" fill="none" stroke-linecap="round"/></svg>'),linear-gradient(145deg,var(--face),color-mix(in srgb,var(--face) 85%,transparent));background-size:75%,100%;background-position:center center;background-repeat:no-repeat;animation:happy-blink 3s ease-in-out infinite;animation-delay:calc(var(--blink-offset, 0) * 1s)}.game-block[data-block-skin=block_happy_blink].game-block--stone:before{background:linear-gradient(145deg,color-mix(in srgb,var(--face) 28%,#b0c5d0),color-mix(in srgb,var(--face) 22%,#9ab5c0));background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M 10 17 L 18 20 L 10 23" stroke="%23334" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M 38 17 L 30 20 L 38 23" stroke="%23334" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M 16 32 Q 18 30 20 31 Q 22 32 24 31 Q 26 30 28 31 Q 30 32 32 32" stroke="%23334" stroke-width="2.2" fill="none" stroke-linecap="round"/></svg>'),linear-gradient(145deg,color-mix(in srgb,var(--face) 28%,#b0c5d0),color-mix(in srgb,var(--face) 22%,#9ab5c0));background-size:76%,100%;background-position:center center;background-repeat:no-repeat;animation:none}@keyframes happy-blink{0%,8%,16%,to{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><ellipse cx="8" cy="24" rx="4" ry="3" fill="%23ffb3ba" opacity="0.55"/><ellipse cx="40" cy="24" rx="4" ry="3" fill="%23ffb3ba" opacity="0.55"/><circle cx="16" cy="18" r="2.2" fill="%23334"/><circle cx="32" cy="18" r="2.2" fill="%23334"/><path d="M 15 27 Q 24 33 33 27" stroke="%23334" stroke-width="2" fill="none" stroke-linecap="round"/></svg>'),linear-gradient(145deg,var(--face),color-mix(in srgb,var(--face) 85%,transparent))}12%{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><ellipse cx="8" cy="24" rx="4" ry="3" fill="%23ffb3ba" opacity="0.55"/><ellipse cx="40" cy="24" rx="4" ry="3" fill="%23ffb3ba" opacity="0.55"/><line x1="13" y1="18" x2="19" y2="18" stroke="%23334" stroke-width="2.2" stroke-linecap="round"/><line x1="29" y1="18" x2="35" y2="18" stroke="%23334" stroke-width="2.2" stroke-linecap="round"/><path d="M 15 27 Q 24 33 33 27" stroke="%23334" stroke-width="2" fill="none" stroke-linecap="round"/></svg>'),linear-gradient(145deg,var(--face),color-mix(in srgb,var(--face) 85%,transparent))}}.game-block[data-block-skin=block_chick_blink]:before{background:linear-gradient(145deg,var(--face),color-mix(in srgb,var(--face) 85%,transparent));background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><line x1="22" y1="7" x2="22" y2="11" stroke="%23664400" stroke-width="1.8" stroke-linecap="round"/><line x1="26" y1="7" x2="26" y2="11" stroke="%23664400" stroke-width="1.8" stroke-linecap="round"/><ellipse cx="8" cy="24" rx="4" ry="3.5" fill="%23ffb3ba" opacity="0.55"/><ellipse cx="40" cy="24" rx="4" ry="3.5" fill="%23ffb3ba" opacity="0.55"/><circle cx="18" cy="19" r="2.2" fill="%23334"/><circle cx="30" cy="19" r="2.2" fill="%23334"/><ellipse cx="24" cy="25" rx="4" ry="2.5" fill="%23ff8844" opacity="0.9"/></svg>'),linear-gradient(145deg,var(--face),color-mix(in srgb,var(--face) 85%,transparent));background-size:76%,100%;background-position:center center;background-repeat:no-repeat;animation:chick-blink 3s ease-in-out infinite;animation-delay:calc(var(--blink-offset, 0) * 1s)}.game-block[data-block-skin=block_chick_blink].game-block--stone:before{background:linear-gradient(145deg,color-mix(in srgb,var(--face) 28%,#c8c8c8),color-mix(in srgb,var(--face) 22%,#b8b8b8));background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><line x1="22" y1="7" x2="22" y2="11" stroke="%23888" stroke-width="1.8" stroke-linecap="round"/><line x1="26" y1="7" x2="26" y2="11" stroke="%23888" stroke-width="1.8" stroke-linecap="round"/><line x1="14" y1="16" x2="20" y2="22" stroke="%23334" stroke-width="2.5" stroke-linecap="round"/><line x1="20" y1="16" x2="14" y2="22" stroke="%23334" stroke-width="2.5" stroke-linecap="round"/><line x1="28" y1="16" x2="34" y2="22" stroke="%23334" stroke-width="2.5" stroke-linecap="round"/><line x1="34" y1="16" x2="28" y2="22" stroke="%23334" stroke-width="2.5" stroke-linecap="round"/><ellipse cx="24" cy="27" rx="4" ry="2.5" fill="%23999" opacity="0.7"/></svg>'),linear-gradient(145deg,color-mix(in srgb,var(--face) 28%,#c8c8c8),color-mix(in srgb,var(--face) 22%,#b8b8b8));background-size:78%,100%;background-position:center center;background-repeat:no-repeat;animation:none}@keyframes chick-blink{0%,8%,16%,to{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><line x1="22" y1="7" x2="22" y2="11" stroke="%23664400" stroke-width="1.8" stroke-linecap="round"/><line x1="26" y1="7" x2="26" y2="11" stroke="%23664400" stroke-width="1.8" stroke-linecap="round"/><ellipse cx="8" cy="24" rx="4" ry="3.5" fill="%23ffb3ba" opacity="0.55"/><ellipse cx="40" cy="24" rx="4" ry="3.5" fill="%23ffb3ba" opacity="0.55"/><circle cx="18" cy="19" r="2.2" fill="%23334"/><circle cx="30" cy="19" r="2.2" fill="%23334"/><ellipse cx="24" cy="25" rx="4" ry="2.5" fill="%23ff8844" opacity="0.9"/></svg>'),linear-gradient(145deg,var(--face),color-mix(in srgb,var(--face) 85%,transparent))}12%{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><line x1="22" y1="7" x2="22" y2="11" stroke="%23664400" stroke-width="1.8" stroke-linecap="round"/><line x1="26" y1="7" x2="26" y2="11" stroke="%23664400" stroke-width="1.8" stroke-linecap="round"/><ellipse cx="8" cy="24" rx="4" ry="3.5" fill="%23ffb3ba" opacity="0.55"/><ellipse cx="40" cy="24" rx="4" ry="3.5" fill="%23ffb3ba" opacity="0.55"/><line x1="15" y1="19" x2="21" y2="19" stroke="%23334" stroke-width="2.2" stroke-linecap="round"/><line x1="27" y1="19" x2="33" y2="19" stroke="%23334" stroke-width="2.2" stroke-linecap="round"/><ellipse cx="24" cy="25" rx="4" ry="2.5" fill="%23ff8844" opacity="0.9"/></svg>'),linear-gradient(145deg,var(--face),color-mix(in srgb,var(--face) 85%,transparent))}}.demo-board-frame--wrong{animation:demo-board-shake .35s ease}.demo-board-frame--eliminate:after{content:"";position:absolute;z-index:94;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;animation:demo-flash-eliminate .25s ease}.demo-board-frame--time-stop{box-shadow:0 0 26px #4fc3f757,inset 0 0 36px #4fc3f71c;animation:demo-time-stop-pulse 1s ease-in-out infinite alternate}.demo-board-frame--swap{box-shadow:0 0 26px #f6c44c5c,inset 0 0 36px #f6c44c1f;animation:demo-swap-pulse 1s ease-in-out infinite alternate}@keyframes demo-swap-pulse{0%{filter:saturate(1)}to{filter:saturate(1.12) brightness(1.03);box-shadow:0 0 36px #f6c44c80,inset 0 0 48px #f6c44c29}}.demo-special-trigger{position:absolute;z-index:93;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;--special-x: calc((var(--special-col) + .5) * 100% / 6);--special-y: calc((var(--special-row) + .5) * 100% / 10)}.demo-special-trigger i{position:absolute;display:block;background:var(--special-color, #fff4ac);box-shadow:0 0 12px var(--special-color, #ffec85);opacity:0}.demo-special-trigger--row i:nth-child(1),.demo-special-trigger--row i:nth-child(2){top:var(--special-y);height:3px;transform:translateY(-50%);animation:demo-special-row .35s ease-out both;animation-delay:var(--special-delay)}.demo-special-trigger--row i:nth-child(1){right:calc(100% - var(--special-x));left:0;transform-origin:right center}.demo-special-trigger--row i:nth-child(2){right:0;left:var(--special-x);transform-origin:left center}.demo-special-trigger--col i:nth-child(1),.demo-special-trigger--col i:nth-child(2){left:var(--special-x);width:3px;transform:translate(-50%);animation:demo-special-col .35s ease-out both;animation-delay:var(--special-delay)}.demo-special-trigger--col i:nth-child(1){top:0;bottom:calc(100% - var(--special-y));transform-origin:center bottom}.demo-special-trigger--col i:nth-child(2){top:var(--special-y);bottom:0;transform-origin:center top}.demo-special-trigger--bomb:before{content:"";position:absolute;left:var(--special-x);top:var(--special-y);width:22%;aspect-ratio:1;border:3px solid rgba(255,214,86,.9);border-radius:50%;transform:translate(-50%,-50%);animation:demo-special-bomb .7s ease-out both;animation-delay:var(--special-delay)}.demo-special-trigger--color i{--color-rotation: 0deg;left:var(--special-x);top:var(--special-y);width:100%;height:3px;transform-origin:left center;animation:demo-special-color .72s ease-out both;animation-delay:var(--special-delay)}.demo-special-trigger--color i:nth-child(2){--color-rotation: 90deg}.demo-special-trigger--color i:nth-child(3){--color-rotation: 45deg}.demo-special-trigger--color i:nth-child(4){--color-rotation: -45deg}@keyframes demo-special-row{0%{opacity:0;transform:translateY(-50%) scaleX(.08)}20%{opacity:1}to{opacity:0;transform:translateY(-50%) scaleX(1)}}@keyframes demo-special-col{0%{opacity:0;transform:translate(-50%) scaleY(.08)}20%{opacity:1}to{opacity:0;transform:translate(-50%) scaleY(1)}}@keyframes demo-special-bomb{0%{opacity:0;width:12%}24%{opacity:1}to{opacity:0;width:96%}}@keyframes demo-special-color{0%{opacity:0;transform:rotate(var(--color-rotation)) scaleX(.06)}20%{opacity:1}to{opacity:0;transform:rotate(var(--color-rotation)) scaleX(1)}}@keyframes demo-flash-correct{0%{background:#66bb6a29}to{background:#66bb6a00}}@keyframes demo-flash-wrong{0%{background:#ef535033}to{background:#ef535000}}@keyframes demo-flash-eliminate{0%{background:#ffffff1f}to{background:#fff0}}@keyframes demo-board-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@keyframes demo-time-stop-pulse{0%{filter:saturate(1)}to{filter:saturate(1.15) brightness(1.04);box-shadow:0 0 36px #4fc3f77a,inset 0 0 48px #4fc3f729}}@keyframes demo-particle-pop{0%{transform:translateZ(0) scale(1);opacity:1}to{transform:translate3d(var(--dx),var(--dy),0) scale(.35);opacity:0}}.demo-board-score-feed{position:absolute;z-index:96;top:44%;right:10%;color:var(--demo-primary-deep);font-size:24px;font-weight:900;text-align:center;text-shadow:0 0 12px rgba(var(--demo-primary-rgb),.45),0 2px 0 var(--demo-feed-halo);pointer-events:none;animation:demo-score-float .95s ease-out both}.demo-board-score-feed span{display:block;margin-top:2px;color:var(--demo-muted);font-size:9px;font-weight:700;text-shadow:none}.demo-board-combo-feed{position:absolute;z-index:95;top:50%;left:50%;display:flex;flex-direction:column;color:var(--demo-primary);text-align:center;transform:translate(-50%,-50%);text-shadow:0 0 16px rgba(var(--demo-primary-rgb),.55),0 2px 0 var(--demo-feed-halo);pointer-events:none;animation:demo-combo-pop .95s ease-out both}.demo-board-combo-feed b{font-size:46px;font-weight:900;line-height:.9}.demo-board-combo-feed small{font-size:12px;font-weight:800;letter-spacing:2px}.demo-board-combo-feed--answer{color:var(--demo-primary-deep);top:42%}@keyframes demo-score-float{0%{opacity:0;transform:translateY(8px) scale(.84)}18%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1;transform:translateY(-9px) scale(1)}to{opacity:0;transform:translateY(-20px) scale(.96)}}@keyframes demo-combo-pop{0%{opacity:0;transform:translate(-50%,-44%) scale(.72)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}42%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-58%) scale(.94)}}.demo-control-panel{width:min(100%,var(--board-w));margin:10px auto 0;padding:8px;border:1px solid var(--demo-line);border-radius:16px;background:var(--demo-surface);box-shadow:0 12px 28px var(--demo-shadow)}.demo-control-grid{display:grid;grid-template-columns:1.08fr .74fr 1.08fr 1.42fr 1.42fr;gap:5px}.demo-control-btn{min-height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid var(--demo-line);border-radius:9px;background:var(--demo-surface-solid);box-shadow:0 3px 0 var(--demo-btn-lip);color:var(--demo-ink)}.demo-control-btn span{font-size:9px;font-weight:800;line-height:1;white-space:nowrap}.demo-control-btn strong{color:var(--demo-primary-deep);font-size:16px;line-height:1}.demo-control-btn--primary{color:var(--demo-on-primary);background:var(--demo-primary);border-color:var(--demo-primary-deep);box-shadow:0 4px 0 var(--demo-primary-deep)}.demo-control-btn--primary strong,.demo-control-btn--primary span{color:var(--demo-on-primary)}.demo-control-btn:disabled{cursor:not-allowed;opacity:.42;filter:grayscale(.3)}.demo-control-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--demo-btn-lip)}.game-slots{display:grid;grid-template-columns:repeat(6,var(--cell));width:calc(var(--cell) * 6);margin:10px auto 0;padding-top:0}.game-slots--tutorial-highlight{position:relative;outline:2px solid var(--demo-primary);outline-offset:6px;border-radius:11px;animation:tutorial-slot-breathe 1.8s ease-in-out infinite}.game-slots--tutorial-highlight:before{content:attr(data-tutorial-label);position:absolute;right:0;bottom:calc(100% + 9px);padding:2px 7px;border-radius:5px;background:var(--demo-primary-deep);color:var(--demo-on-primary);font-size:9px;font-weight:800;line-height:1.4;pointer-events:none}.demo-stat[data-tutorial-highlight=true]{position:relative;z-index:1;border-color:var(--demo-primary);box-shadow:0 0 0 4px rgba(var(--demo-primary-rgb),.2),0 0 18px rgba(var(--demo-primary-rgb),.42);animation:tutorial-stat-breathe 1.8s ease-in-out infinite}@keyframes tutorial-slot-breathe{0%,to{box-shadow:0 0 rgba(var(--demo-primary-rgb),.14),0 0 7px rgba(var(--demo-primary-rgb),.18)}50%{box-shadow:0 0 0 7px rgba(var(--demo-primary-rgb),.3),0 0 24px rgba(var(--demo-primary-rgb),.58)}}@keyframes tutorial-stat-breathe{0%,to{box-shadow:0 0 0 4px rgba(var(--demo-primary-rgb),.16),0 0 12px rgba(var(--demo-primary-rgb),.28)}50%{box-shadow:0 0 0 8px rgba(var(--demo-primary-rgb),.3),0 0 24px rgba(var(--demo-primary-rgb),.56)}}.game-slot{position:relative;display:flex;min-width:0;height:48px;flex-direction:column;align-items:center;justify-content:flex-start;padding:4px 3px 5px;border-right:1px solid var(--demo-line);border-bottom:4px solid var(--demo-slot-lip);background:var(--demo-surface-solid);color:var(--demo-primary-deep);font-size:clamp(9px,calc(var(--cell) * .18),13px);font-weight:700;line-height:1.15;text-align:center;overflow-wrap:anywhere;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;cursor:grab}.game-slot:first-child{border-radius:11px 0 0 11px}.game-slot:last-child{border-right:0;border-radius:0 11px 11px 0}.game-slot--active{background:var(--demo-primary-soft)}.game-slot--dragging{z-index:5;cursor:grabbing;opacity:.3;transform:translateY(-3px) rotate(-2deg);box-shadow:0 8px 16px var(--demo-shadow)}.game-slot__drag-preview{position:fixed;z-index:1000;max-width:140px;padding:3px 6px;border:1px solid var(--demo-line-strong);border-radius:6px;background:var(--demo-surface);box-shadow:0 3px 8px var(--demo-shadow);color:var(--demo-primary-deep);font-size:inherit;font-weight:inherit;line-height:inherit;text-align:center;pointer-events:none;opacity:.78;transform:translate(-50%,-50%)}.game-slot--swapping{animation:demo-slot-swap .3s ease}@keyframes demo-slot-swap{0%,to{transform:scale(1);opacity:1}50%{transform:scale(.88);opacity:.6}}.demo-control-btn--active{color:var(--demo-on-primary);background:var(--demo-primary-deep);border-color:var(--demo-primary)}.demo-control-btn--active span,.demo-control-btn--active strong{color:var(--demo-on-primary)}.demo-control-btn--tutorial-highlight{position:relative;z-index:210;border-color:#f5c542;box-shadow:0 0 0 3px #f5c54247,0 0 18px #f5c542c7;animation:tutorial-skill-pulse 1.2s ease-in-out infinite}@keyframes tutorial-skill-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.game-slot__index{flex:0 0 10px;color:var(--demo-muted);font-size:7px;line-height:1}.game-slot__text{display:-webkit-box;width:100%;min-height:2.3em;overflow:hidden;overflow-wrap:anywhere;text-align:center;-webkit-box-orient:vertical;-webkit-line-clamp:2}.demo-overlay-card button{min-height:34px;padding:0 13px;border:1px solid var(--demo-line);border-radius:9px;background:var(--demo-surface-solid);color:var(--demo-ink-secondary);font-size:11px;font-weight:800}.demo-overlay-card button:hover{border-color:var(--demo-primary)}.demo-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:grid;place-items:center;padding:20px;background:var(--demo-overlay-scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.demo-overlay-card{width:min(100%,360px);padding:26px;border:1px solid var(--demo-line);border-radius:22px;background:var(--demo-surface);box-shadow:0 22px 54px var(--demo-shadow-strong);text-align:center}.demo-learning-card{width:min(360px,calc(100vw - 44px));padding:28px 26px 24px;border:1px solid var(--demo-line-strong);border-radius:18px;background:var(--demo-surface);box-shadow:0 22px 80px var(--demo-shadow-strong);text-align:center;animation:demo-learning-card-in .28s ease-out both}.demo-learning-card__eyebrow{display:block;color:var(--demo-primary);font-size:10px;font-weight:900;letter-spacing:.12em}.demo-learning-card strong{display:block;margin-top:10px;color:var(--demo-primary-deep);font-size:30px;line-height:1}.demo-learning-card__pronunciation{display:block;margin-top:8px;color:var(--demo-muted);font-size:13px}.demo-learning-card p{margin:16px 0 22px;color:var(--demo-ink);font-size:20px;font-weight:800}.demo-learning-card button{display:block;margin:0 auto;min-height:38px;padding:0 16px;border:1px solid var(--demo-primary);border-radius:9px;background:var(--demo-primary-soft);color:var(--demo-primary-deep);font:inherit;font-weight:800;cursor:pointer}@keyframes demo-learning-card-in{0%{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.demo-overlay-card h2{margin:8px 0;font-size:24px}.demo-overlay-card p{margin:0 0 18px;color:var(--demo-ink-secondary);font-size:13px}.demo-overlay-card button{min-height:42px;color:var(--demo-on-primary);background:var(--demo-primary);border-color:var(--demo-primary-deep)}.demo-board-toast{position:absolute;z-index:97;top:8px;left:50%;max-width:90%;padding:5px 14px;border:1px solid var(--demo-line-strong);border-radius:8px;background:var(--demo-surface);box-shadow:0 4px 12px var(--demo-shadow);color:var(--demo-ink);font-size:clamp(10px,calc(var(--cell) * .17),13px);font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transform:translate(-50%);animation:demo-toast-in .3s ease-out both,demo-toast-out .3s ease-in 1.3s both}@keyframes demo-toast-in{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes demo-toast-out{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-8px)}}.demo-board-mastery-stamp{position:absolute;z-index:98;left:calc((var(--mastery-col) + .5) * 100% / 6);top:calc((var(--mastery-row) + .5) * 100% / 10);display:flex;width:0;height:0;align-items:center;justify-content:center;pointer-events:none;transform:translate(-50%,-50%)}.demo-board-mastery-stamp span{display:block;color:var(--demo-mastery-border);font-size:clamp(14px,calc(var(--cell) * .22),18px);font-weight:900;letter-spacing:.1em;white-space:nowrap;text-shadow:0 0 14px var(--demo-mastery-glow),0 0 30px var(--demo-mastery-glow),0 2px 0 rgba(0,0,0,.45);animation:mastery-float .85s cubic-bezier(.22,1,.36,1) both}@keyframes mastery-float{0%{opacity:0;transform:translateY(6px) scale(.6)}30%{opacity:1;transform:translateY(-2px) scale(1.12)}65%{opacity:1;transform:translateY(-4px) scale(1)}to{opacity:0;transform:translateY(-22px) scale(.92)}}.mastery-particle-field{position:absolute;z-index:90;width:0;height:0;pointer-events:none}.mastery-particle{position:absolute;left:50%;top:50%;border-radius:50%;background:var(--demo-mastery-border);box-shadow:0 0 6px var(--demo-mastery-glow);transform-origin:center center;animation:mastery-particle-burst .9s cubic-bezier(.16,.84,.28,1) forwards}.mastery-particle:nth-child(3n){border-radius:35%;background:var(--demo-mastery-ring)}.mastery-particle:nth-child(5n){border-radius:12%}@keyframes mastery-particle-burst{0%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1) rotate(0)}28%{opacity:1;transform:translate3d(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y)),0) scale(.9) rotate(45deg)}65%{opacity:.7;transform:translate3d(calc(-50% + var(--mid-x)),calc(-50% + var(--mid-y)),0) scale(.55) rotate(110deg)}to{opacity:0;transform:translate3d(calc(-50% + var(--dx)),calc(-50% + var(--final-y)),0) scale(.15) rotate(200deg)}}.demo-board-reward-toast{position:absolute;z-index:98;top:22%;left:50%;display:flex;align-items:center;gap:6px;color:var(--demo-reward-ink);font-size:clamp(15px,calc(var(--cell) * .23),18px);font-weight:900;white-space:nowrap;pointer-events:none;text-shadow:0 0 14px var(--demo-reward-glow),0 0 26px var(--demo-reward-glow),0 2px 0 rgba(0,0,0,.5);transform:translate(-50%);animation:reward-pop-in .38s cubic-bezier(.34,1.56,.64,1) both,reward-float-out .5s ease-in 1.25s both}.demo-board-reward-icon{font-size:clamp(18px,calc(var(--cell) * .27),22px);filter:drop-shadow(0 0 6px var(--demo-reward-glow));animation:reward-icon-pop .4s cubic-bezier(.34,1.56,.64,1) both}@keyframes reward-pop-in{0%{opacity:0;transform:translate(-50%) translateY(10px) scale(.6)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@keyframes reward-float-out{0%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-26px) scale(.88)}}@keyframes reward-icon-pop{0%{transform:scale(0) rotate(-90deg)}65%{transform:scale(1.2) rotate(8deg)}to{transform:scale(1) rotate(0)}}.demo-board-combo-feed--cyan{color:#00897b;text-shadow:0 0 16px rgba(0,137,123,.55),0 2px 0 rgba(255,255,255,.76)}.demo-board-combo-feed--gold{color:#d4a017;text-shadow:0 0 18px rgba(246,196,76,.65),0 2px 0 rgba(255,255,255,.76)}.demo-board-combo-feed--red{color:#c62828;text-shadow:0 0 20px rgba(198,40,40,.65),0 2px 0 rgba(255,255,255,.76)}.demo-board-frame--combo-shake{animation:demo-board-shake .35s ease,demo-combo-glow .5s ease}@keyframes demo-combo-glow{0%,to{box-shadow:inset 0 8px 15px var(--demo-shadow),0 7px #84b3bf,0 14px 24px #2648582e}50%{box-shadow:inset 0 8px 15px #f6c44c26,0 7px #84b3bf,0 0 24px #f6c44c66}}.game-slot--drop-target{border-bottom-color:var(--demo-primary);background:#416fae1f}.game-slot--drag-over{z-index:4;box-shadow:0 0 0 2px var(--demo-primary),0 4px 10px #416fae40;transform:translateY(-1px)}.demo-flash-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;pointer-events:none;animation:demo-flash-full .35s ease-out both}.demo-flash-layer--correct{background:radial-gradient(circle,rgba(102,187,106,.18) 0%,transparent 70%)}.demo-flash-layer--wrong{background:radial-gradient(circle,rgba(239,83,80,.22) 0%,transparent 70%)}.demo-flash-layer--eliminate{background:radial-gradient(circle,rgba(246,196,76,.18) 0%,transparent 70%)}@keyframes demo-flash-full{0%{opacity:0}30%{opacity:1}to{opacity:0}}.demo-confetti-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:180;overflow:hidden;pointer-events:none}.demo-confetti-piece{position:absolute;top:-12px;border-radius:2px;animation:demo-confetti-fall var(--duration, 2.5s) ease-in var(--delay, 0ms) forwards;transform:rotate(var(--confetti-rotation, 0deg))}@keyframes demo-confetti-fall{0%{opacity:1;transform:translateY(-12px) rotate(var(--confetti-rotation, 0deg))}to{opacity:0;transform:translateY(100vh) translate(var(--confetti-drift, 0px)) rotate(calc(var(--confetti-rotation, 0deg) + 540deg))}}@media (max-height: 820px){.demo-game-page{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}.demo-game-topbar{margin-bottom:5px;padding-bottom:3px}.demo-level-strip{margin-bottom:6px}.demo-level-title,.demo-stat{height:46px;padding-top:4px;padding-bottom:4px}.demo-play-surface{padding-top:6px;padding-bottom:8px}.game-slots{margin-top:6px}.game-slot{height:44px}.demo-control-panel{margin-top:6px;padding:5px}.demo-control-btn{min-height:34px}}@media (max-width: 720px){.demo-game-page{--page-gutter: max(8px, env(safe-area-inset-left), env(safe-area-inset-right));--cell: var(--measured-cell, min(68px, calc((100dvh - 310px)*.1) , calc((100vw - (var(--page-gutter) * 2 + 18px)) / 6)));overflow-x:hidden}.demo-game-screen{min-height:100%}.demo-level-strip{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.demo-level-title,.demo-stat{padding-right:3px;padding-left:3px;border-radius:9px;text-align:center}.demo-level-title small,.demo-stat small{line-height:1.15}.demo-level-title strong,.demo-stat strong{margin-top:4px;line-height:1}.demo-main-game{width:100%}.demo-board-frame{border-width:5px;border-radius:12px}.demo-control-panel{border-radius:10px}.demo-control-btn{padding-right:2px;padding-left:2px}.demo-control-btn small{font-size:8px}}.game-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--space-5);background:color-mix(in srgb,var(--mist-900) 48%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.game-dialog__panel{width:min(100%,380px);padding:var(--space-6);border:1px solid color-mix(in srgb,var(--color-primary) 24%,var(--color-border));border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-surface) 96%,transparent);box-shadow:var(--shadow-raise);text-align:center;animation:game-dialog-enter var(--motion-md) var(--motion-ease) both}.game-dialog__eyebrow{color:var(--color-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold)}.game-dialog__panel h2{margin:var(--space-2) 0 var(--space-3);color:var(--color-text);font-size:var(--font-size-2xl);line-height:var(--line-height-tight);text-wrap:balance}.game-dialog__description{color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:var(--line-height-loose);text-wrap:pretty}.game-dialog__description p{margin:0}.game-dialog__error{margin:var(--space-4) 0 0;padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-danger-bg);color:var(--color-danger);font-size:var(--font-size-sm);line-height:var(--line-height-md)}.game-dialog__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-5)}.game-dialog__actions:has(>:only-child){grid-template-columns:1fr}.game-dialog__button{min-height:var(--layout-touch-min);padding:0 var(--space-4);border:1px solid transparent;border-radius:var(--radius-md);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);cursor:pointer;transition:transform var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}.game-dialog__button:hover:not(:disabled){transform:translateY(-1px)}.game-dialog__button:active:not(:disabled){transform:translateY(1px)}.game-dialog__button:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.game-dialog__button:disabled{cursor:wait;opacity:.64}.game-dialog__button--primary{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-primary)}.game-dialog__button--primary:hover:not(:disabled){background:var(--color-primary-hover)}.game-dialog__button--danger{border-color:var(--color-danger);background:var(--color-danger);color:var(--color-on-primary)}.game-dialog__button--secondary{border-color:var(--color-border-strong);background:var(--color-surface);color:var(--color-text)}.game-dialog__button--secondary:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-surface-hover)}@keyframes game-dialog-enter{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 480px){.game-dialog{padding:var(--space-4)}.game-dialog__panel{padding:var(--space-5)}.game-dialog__actions{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){.game-dialog__panel{animation:none}.game-dialog__button{transition:none}}.tutorial-overlay{position:absolute;top:0;left:0;right:0;z-index:200;pointer-events:none;display:flex;justify-content:center;align-items:center;padding-top:var(--page-top, max(8px, env(safe-area-inset-top)));height:calc(var(--page-top, max(8px, env(safe-area-inset-top))) + 52px);box-sizing:border-box}.tutorial-bubble{pointer-events:auto;display:flex;align-items:center;gap:10px;width:max-content;min-height:36px;max-width:min(920px,calc(100% - 32px));padding:0 16px;background:#ffffffeb;border:1px solid rgba(65,111,174,.22);border-radius:12px;box-shadow:0 2px 12px #2648581a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-sizing:border-box;animation:tutorial-bubble-in .25s ease}@keyframes tutorial-bubble-in{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.tutorial-step-badge{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#416fae;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#fff}.tutorial-text{flex:1;min-width:0;font-size:13px;line-height:1.35;color:#1a2e36;white-space:nowrap}.tutorial-bubble--long .tutorial-text{font-size:12.5px}.tutorial-bubble--very-long .tutorial-text{font-size:12px}@media (max-width: 720px){.tutorial-bubble{max-width:calc(100% - 20px);padding:5px 10px}.tutorial-text,.tutorial-bubble--long .tutorial-text,.tutorial-bubble--very-long .tutorial-text{font-size:12px;white-space:normal;overflow-wrap:anywhere}}.tutorial-skip-btn{flex-shrink:0;font-size:11px;color:#4a5f69;padding:3px 8px;border-radius:6px;border:1px solid rgba(65,111,174,.2);background:#d8ebff99;cursor:pointer;transition:all .15s;white-space:nowrap}.tutorial-skip-btn:hover{color:#2d558a;border-color:#416fae66;background:#d8ebff}.tutorial-preview-overlay{display:flex;align-items:center;justify-content:center;z-index:300}.tutorial-preview-card{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(420px,90%);padding:28px 24px 20px;background:#fffffff5;border:1px solid rgba(65,111,174,.16);border-radius:16px;box-shadow:0 8px 32px #26485824;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;animation:tutorial-preview-in .25s ease}@keyframes tutorial-preview-in{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}.tutorial-preview-card__eyebrow{color:#416fae;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.tutorial-preview-card strong{font-size:22px;font-weight:900;color:#1a2e36;line-height:1.2}.tutorial-preview-card__desc{font-size:13px;color:#4a5f69;margin:0 0 8px}.tutorial-preview-words{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin-bottom:16px}.tutorial-preview-word{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 18px;border-radius:10px;border:1px solid var(--demo-line, rgba(84, 126, 143, .16));background:#fffc}.tutorial-preview-word[data-theme=yellow]{border-color:#cda4324d;background:#ffde7c1f}.tutorial-preview-word[data-theme=blue]{border-color:#429cbb4d;background:#8fd6ed1f}.tutorial-preview-word[data-theme=red]{border-color:#cf675b4d;background:#ffa99e1f}.tutorial-preview-word[data-theme=green]{border-color:#67a83d4d;background:#b5e58f1f}.tutorial-preview-word[data-theme=purple]{border-color:#9561b64d;background:#d3b1e91f}.tutorial-preview-word__en{font-size:18px;font-weight:800;color:#1a2e36}.tutorial-preview-word__pron{font-size:11px;color:#7a9099}.tutorial-preview-word__zh{font-size:13px;color:#4a5f69;font-weight:600}.tutorial-preview-start-btn{padding:10px 32px;font-size:15px;font-weight:700;color:#fff;background:#416fae;border:none;border-radius:10px;cursor:pointer;transition:all .15s}.tutorial-preview-start-btn:hover{background:#2d558a;box-shadow:0 4px 12px #416fae4d}.rune-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);isolation:isolate;display:grid;place-items:center;padding:var(--space-5);overflow:hidden;background:color-mix(in srgb,var(--mist-900) 40%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:rune-modal-in var(--motion-md) var(--motion-ease) both}.rune-modal__ambient{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--color-primary-soft) 36%,transparent),transparent 42%)}.rune-modal__panel{position:relative;width:min(900px,100%);max-height:min(740px,calc(100dvh - 40px));padding:clamp(var(--space-5),4vw,var(--space-7));overflow:auto;border:1px solid color-mix(in srgb,var(--color-primary) 24%,var(--color-border));border-radius:var(--radius-xl);background:color-mix(in srgb,var(--color-surface) 97%,transparent);color:var(--color-text);box-shadow:var(--shadow-raise)}.rune-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5)}.rune-modal__eyebrow,.rune-modal__footer,.rune-choice__index,.rune-choice__rarity,.rune-card__back-label{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.rune-modal__eyebrow{color:var(--color-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold)}.rune-modal h2{margin:var(--space-2) 0 var(--space-1);color:var(--color-text);font-size:clamp(28px,4vw,40px);line-height:var(--line-height-tight);letter-spacing:-.02em}.rune-modal__header p{margin:0;color:var(--color-text-muted);font-size:var(--font-size-sm)}.rune-modal__seal{display:grid;flex:0 0 auto;width:52px;height:52px;place-items:center;border:1px solid var(--color-border-focus);border-radius:var(--radius-lg);background:var(--color-primary-soft);color:var(--color-primary);font-family:var(--font-mono);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);box-shadow:var(--shadow-card)}.rune-modal__rule{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-5) 0}.rune-modal__rule span{height:1px;flex:1;background:var(--color-border)}.rune-modal__rule i{width:6px;height:6px;border:1px solid var(--color-primary);transform:rotate(45deg)}.rune-modal__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(var(--space-3),2vw,var(--space-5));perspective:1300px}.rune-card{min-width:0;min-height:310px;perspective:1200px;opacity:0;transform:translateY(14px) scale(.98);animation:rune-card-arrive .56s var(--motion-ease) var(--rune-delay) forwards}.rune-card__inner{position:relative;width:100%;height:100%;min-height:310px;transform-style:preserve-3d;animation:rune-card-flip .76s cubic-bezier(.2,.78,.24,1) calc(var(--rune-delay) + .18s) both}.rune-card__face{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius-lg)}.rune-card__back{align-items:center;justify-content:center;flex-direction:column;gap:var(--space-4);border:1px solid var(--color-border-focus);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 7%,transparent) 0 1px,transparent 1px 10px),var(--color-primary-soft);color:var(--color-primary);transform:rotateY(180deg)}.rune-card__sigil{font-size:48px;line-height:1}.rune-card__back-label{color:var(--color-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold)}.rune-card__front{flex-direction:column;gap:var(--space-3);padding:var(--space-5);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);transform:rotateY(0);box-shadow:var(--shadow-card);transition:border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}.rune-card:hover .rune-card__front{border-color:var(--color-border-focus);box-shadow:var(--shadow-raise);transform:translateY(-2px)}.rune-choice__topline{display:flex;justify-content:space-between;align-items:center}.rune-choice__index{color:var(--color-text-muted);font-size:var(--font-size-xs)}.rune-choice__rarity{color:var(--color-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold)}.rune-choice__glyph{color:var(--color-primary);font-size:28px;line-height:1}.rune-card__front h3,.rune-card__front p{margin:0;overflow-wrap:anywhere}.rune-card__front h3{color:var(--color-text);font-size:var(--font-size-xl);line-height:var(--line-height-tight)}.rune-card__front p{flex:1;color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:var(--line-height-loose)}.rune-choice__actions{display:flex;gap:var(--space-2);margin-top:auto}.rune-choice__actions>*{flex:1}.rune-choice__actions button{min-height:var(--layout-touch-min)}.rune-choice__actions button:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.rune-modal__footer{margin-top:var(--space-5);color:var(--color-text-muted);font-size:var(--font-size-xs);text-align:center}.rune-badges{display:flex;flex-wrap:wrap;gap:var(--space-2)}.rune-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);font-size:var(--font-size-sm)}@keyframes rune-modal-in{0%{opacity:0}to{opacity:1}}@keyframes rune-card-arrive{to{opacity:1;transform:translateY(0) scale(1)}}@keyframes rune-card-flip{0%{transform:rotateY(180deg)}64%{transform:rotateY(-8deg)}to{transform:rotateY(0)}}@keyframes rune-card-refresh{0%{transform:rotateY(0)}40%{transform:rotateY(180deg)}60%{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}.rune-card--refreshed .rune-card__inner{animation:rune-card-refresh .86s cubic-bezier(.2,.78,.24,1) both}@media (prefers-reduced-motion: reduce){.rune-modal,.rune-card,.rune-card__inner{animation:none;opacity:1;transform:none}.rune-card__back{display:none}.rune-card__front{transition:none}}@media (max-width: 700px){.rune-modal{padding:var(--space-3)}.rune-modal__grid{grid-template-columns:1fr}.rune-card,.rune-card__inner{min-height:270px}.rune-modal__panel{max-height:calc(100dvh - 24px);padding:var(--space-5)}}.result-page{display:grid;min-height:100dvh;padding:clamp(24px,6vw,72px);place-items:center;color:var(--color-text);background:linear-gradient(125deg,color-mix(in srgb,var(--color-primary-soft) 70%,var(--color-bg)) 0%,var(--color-bg) 52%,color-mix(in srgb,var(--color-info-bg) 46%,var(--color-bg)) 100%)}.result-panel{width:min(100%,680px);padding:clamp(28px,5vw,56px);border:1px solid var(--color-border);border-radius:var(--radius-lg);background-color:color-mix(in srgb,var(--color-surface) 94%,transparent);box-shadow:var(--shadow-raise);text-align:center}.result-page--tutorial .result-panel{width:min(100%,820px)}.result-page--tutorial .result-panel h1{font-size:34px;line-height:1.2;white-space:nowrap}.result-kicker,.result-outcome{margin:0;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.08em;text-transform:uppercase}.result-kicker{color:var(--color-text-muted)}.result-outcome{margin-top:var(--space-5);color:var(--color-primary)}.result-outcome--failure{color:var(--color-danger)}.result-panel h1{margin-top:var(--space-2);font-size:clamp(32px,5vw,52px);letter-spacing:0}.result-description{max-width:420px;margin:var(--space-3) auto 0;color:var(--color-text-muted);font-size:var(--font-size-md)}.result-stars{display:flex;justify-content:center;gap:var(--space-2);margin:var(--space-5) 0}.result-stars__star{color:var(--color-border-strong);font-size:34px;line-height:1}.result-stars__star--active{color:var(--warning-500)}.result-check-quality{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--space-4);margin-top:var(--space-5);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface-muted);text-align:left}.result-check-quality>div{display:grid;align-content:center;gap:var(--space-1);border-right:1px solid var(--color-border)}.result-check-quality span,.result-check-quality dt{color:var(--color-text-muted);font-size:var(--font-size-xs)}.result-check-quality strong{font-size:clamp(32px,6vw,48px);line-height:1}.result-check-quality dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:0}.result-check-quality dd{margin:var(--space-1) 0 0;font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}.result-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;margin-top:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface-muted)}.result-stats>div{display:grid;min-width:0;min-height:92px;padding:var(--space-3);place-items:center;align-content:center;border-right:1px solid var(--color-border)}.result-stats>div:last-child{border-right:0}.result-stats span,.result-stats dt{color:var(--color-text-muted);font-size:var(--font-size-xs)}.result-stats strong,.result-stats dd{margin:var(--space-1) 0 0;color:var(--color-text);font-size:var(--font-size-lg);font-variant-numeric:tabular-nums}.result-stats--endless{display:block;padding:var(--space-5);background-color:var(--color-primary);border-color:var(--color-primary)}.result-stats--endless .result-score{min-height:auto;padding:0;border:0}.result-stats--endless .result-score span,.result-stats--endless .result-score strong{color:var(--color-on-primary)}.result-stats--endless .result-score strong{font-size:clamp(48px,9vw,80px);line-height:1}.result-stats--endless dl{display:grid;grid-template-columns:repeat(3,1fr);margin:var(--space-5) 0 0;padding-top:var(--space-4);border-top:1px solid color-mix(in srgb,var(--color-on-primary) 25%,transparent)}.result-stats--endless dl div{text-align:center}.result-stats--endless dt{color:color-mix(in srgb,var(--color-on-primary) 75%,transparent)}.result-stats--endless dd{color:var(--color-on-primary)}.result-process{margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}.result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);animation:result-actions-in .4s ease-out .8s both}.result-page--empty section{max-width:440px;text-align:center}.result-page--empty h1{margin:var(--space-2) 0}.result-page--empty section>p:not(.result-kicker){margin-bottom:var(--space-5);color:var(--color-text-muted)}@keyframes result-panel-in{0%{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.result-panel--animate{animation:result-panel-in .45s cubic-bezier(.16,1,.3,1) both}@keyframes result-actions-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes result-star-pop{0%{transform:scale(0) rotate(-40deg);opacity:0}50%{transform:scale(1.35) rotate(8deg);opacity:1}75%{transform:scale(.92) rotate(-3deg)}to{transform:scale(1) rotate(0);opacity:1}}.result-stars__star--active{color:var(--warning-500);text-shadow:0 0 12px color-mix(in srgb,var(--warning-500) 50%,transparent);animation:result-star-pop .5s cubic-bezier(.34,1.56,.64,1) both}@keyframes result-stat-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.result-stats>div{animation:result-stat-in .35s ease-out both}.result-stats>div:nth-child(1){animation-delay:.15s}.result-stats>div:nth-child(2){animation-delay:.25s}.result-stats>div:nth-child(3){animation-delay:.35s}.result-stats>div:nth-child(4){animation-delay:.45s}.result-stats>div:nth-child(5){animation-delay:.55s}.result-stats>div:nth-child(6){animation-delay:.65s}.result-stat-effective strong{color:var(--color-primary)}.result-stat-formula{display:block;margin-top:2px;color:var(--color-text-muted);font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.8}.result-stat-multiplier{display:block;margin-top:2px;color:var(--color-danger);font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.85}.result-stats strong{font-variant-numeric:tabular-nums}@media (max-width: 560px){.result-page{padding:var(--space-4)}.result-panel{padding:var(--space-5) var(--space-4)}.result-page--tutorial .result-panel h1{font-size:28px;white-space:normal}.result-check-quality{grid-template-columns:1fr}.result-check-quality>div{padding-bottom:var(--space-3);border-right:0;border-bottom:1px solid var(--color-border)}.result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.result-stats>div:nth-child(2){border-right:0}.result-stats>div:nth-child(-n+2){border-bottom:1px solid var(--color-border)}.result-stats--endless dl{gap:var(--space-2)}.result-actions{display:grid;grid-template-columns:1fr}}.home-page{--home-main-surface: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-elevated) 100%);--home-secondary-surface: linear-gradient(145deg, var(--color-surface) 0%, var(--color-bg-elevated) 100%);--home-support-surface: linear-gradient(145deg, var(--color-surface) 0%, var(--color-surface-muted) 100%);display:flex;flex-direction:column;gap:var(--space-4);padding-bottom:var(--space-6);animation:home-page-enter var(--motion-slow) var(--motion-ease) both}@keyframes home-page-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.home-page__header,.home-hero-card__meta,.home-hero-card__footer,.home-page__header-actions,.home-review-card,.home-review-card>div{display:flex;align-items:center}.home-page__header,.home-hero-card__meta,.home-hero-card__footer,.home-review-card{justify-content:space-between}.home-page__eyebrow,.home-hero-card__eyebrow,.home-section-label,.home-empty-hero__eyebrow{color:var(--color-text-subtle);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.06em;text-transform:uppercase}.home-page__header h1{margin-top:var(--space-1);font-size:var(--font-size-2xl);letter-spacing:-.025em}.home-page__header-actions{gap:var(--space-2)}.home-streak{color:var(--color-text-muted);font-size:var(--font-size-sm)}.home-settings-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);background:var(--color-surface);transition:color var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}.home-settings-btn:hover{color:var(--color-primary);background:var(--color-surface-hover);transform:translateY(-1px)}.home-hero-card{padding:var(--space-5);border:1px solid var(--color-border-focus);border-radius:var(--radius-xl);background:var(--home-main-surface);box-shadow:var(--shadow-raise)}.home-hero-card__meta{color:var(--color-text-muted);font-size:var(--font-size-xs)}.home-hero-card__main{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) 0}.home-ring-wrap{flex:0 0 88px;width:88px;height:88px}.home-ring{width:100%;height:100%}.home-ring__track{stroke:var(--color-surface-muted)}.home-ring__fill{stroke:var(--color-primary);transition:stroke-dashoffset var(--motion-slow) var(--motion-ease)}.home-ring__pct{fill:var(--color-text);font-size:14px;font-weight:var(--font-weight-bold)}.home-hero-card__copy{min-width:0}.home-hero-card__copy h2{margin:var(--space-1) 0;font-size:var(--font-size-xl);overflow-wrap:anywhere}.home-hero-card__copy p:last-child{color:var(--color-text-muted);font-size:var(--font-size-sm)}.home-hero-card__footer{padding-top:var(--space-4);border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--font-size-sm)}.home-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.home-stat-card{padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--home-secondary-surface);box-shadow:var(--shadow-card)}.home-stat-card span{color:var(--color-text-muted);font-size:var(--font-size-xs)}.home-stat-card strong{display:block;margin:var(--space-2) 0 var(--space-1);font-size:var(--font-size-xl);font-variant-numeric:tabular-nums}.home-stat-card small{color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular)}.home-stat-card p{color:var(--color-text-muted);font-size:var(--font-size-xs)}.home-review-card{gap:var(--space-4);padding:var(--space-4) var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--home-support-surface);box-shadow:var(--shadow-card)}.home-review-card>div{align-items:flex-start;flex-direction:column;gap:var(--space-1);min-width:0}.home-review-card h2{font-size:var(--font-size-md)}.home-review-card p{color:var(--color-text-muted);font-size:var(--font-size-sm)}.home-review-card__quiet{color:var(--color-success);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);white-space:nowrap}.home-secondary-link{align-self:flex-end;color:var(--color-text-link);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.home-secondary-link:hover{color:var(--color-primary-hover)}.home-empty-hero{padding:var(--space-7) var(--space-5);border:1px solid var(--color-border-focus);border-radius:var(--radius-xl);background:var(--home-main-surface);box-shadow:var(--shadow-card)}.home-empty-hero h2{margin:var(--space-2) 0;font-size:clamp(var(--font-size-xl),5vw,var(--font-size-3xl));letter-spacing:-.025em}.home-empty-hero p{margin-bottom:var(--space-5);color:var(--color-text-muted)}.home-empty-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.home-empty-notes>div{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);border-top:2px solid var(--color-primary);background:var(--color-surface-muted)}.home-empty-notes span{color:var(--color-text-muted);font-size:var(--font-size-xs)}@media (max-width: 560px){.home-hero-card{padding:var(--space-4)}.home-hero-card__main{gap:var(--space-3)}.home-ring-wrap{flex-basis:72px;width:72px;height:72px}.home-hero-card__copy h2{font-size:var(--font-size-lg)}.home-review-card{align-items:flex-start;flex-direction:column}.home-review-card>a,.home-review-card>span{align-self:flex-end}}.game-page{display:flex;flex-direction:column;gap:var(--space-5);padding-bottom:var(--space-6);animation:page-enter var(--motion-slow) var(--motion-ease) both}.game-page__header p{margin-bottom:var(--space-1);color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.06em}.game-page__header h1{font-size:var(--font-size-2xl);letter-spacing:-.02em}.game-page__header span{display:block;margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-sm)}.game-mode-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.game-mode-card{--mode-accent: var(--color-primary);--mode-surface: var(--color-surface);position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:start;gap:var(--space-3);min-height:180px;padding:var(--space-4);overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--mode-surface);box-shadow:var(--shadow-card);transition:transform var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}.game-mode-card:before{position:absolute;inset:0 auto 0 0;width:3px;content:"";background:var(--mode-accent)}.game-mode-card:hover{transform:translateY(-2px);border-color:var(--color-border-focus);box-shadow:var(--shadow-raise)}.game-mode-card:active{transform:translateY(1px) scale(.995)}.game-mode-card--campaign{--mode-accent: #5f91a4}.game-mode-card--free{--mode-accent: #7d9e91}.game-mode-card--endless{--mode-accent: #8a88a8}.game-mode-card--tutorial{--mode-accent: #b08f69}.game-mode-card__number{color:var(--mode-accent);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums}.game-mode-card__copy{display:flex;min-width:0;flex-direction:column}.game-mode-card__topline{display:flex;align-items:center;justify-content:space-between;min-height:24px;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-xs)}.game-mode-card__topline small{padding:3px 7px;border-radius:var(--radius-sm);color:var(--mode-accent);background:color-mix(in srgb,var(--mode-accent) 10%,var(--color-surface));font-weight:var(--font-weight-bold)}.game-mode-card h2{margin:var(--space-2) 0;font-size:var(--font-size-lg)}.game-mode-card p{color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:1.65}.game-mode-card strong{margin-top:auto;padding-top:var(--space-4);color:var(--color-text-subtle);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.game-mode-card__arrow{align-self:center;color:var(--mode-accent);font-size:var(--font-size-xl);transition:transform var(--motion-fast) var(--motion-ease)}.game-mode-card:hover .game-mode-card__arrow{transform:translate(3px)}@media (max-width: 640px){.game-mode-list{grid-template-columns:1fr}.game-mode-card{min-height:150px}}.profile-page{display:flex;flex-direction:column;gap:var(--space-5);padding-bottom:var(--space-6);animation:profile-enter var(--motion-slow) var(--motion-ease) both}@keyframes profile-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.profile-page__intro{display:flex;flex-direction:column;gap:var(--space-1)}.profile-page__eyebrow{color:var(--color-text-muted);font-size:var(--font-size-xs);letter-spacing:.08em}.profile-page__intro h1{font-size:var(--font-size-2xl);letter-spacing:-.02em}.profile-page__notice{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-focus);border-radius:var(--radius-md);color:var(--color-text-muted);background:var(--color-surface-muted)}.profile-identity-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--color-border-focus);border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-muted) 100%);box-shadow:var(--shadow-card)}.profile-identity-bar:focus,.profile-identity-bar:focus-visible{outline:none;box-shadow:var(--shadow-card);border-color:var(--color-border-focus)}.profile-identity-bar__balance{flex-shrink:0;padding:var(--space-1) var(--space-3);border:1px solid var(--color-border-focus);border-radius:var(--radius-full);color:var(--color-warning);background:var(--color-warning-bg);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums;white-space:nowrap}.profile-identity-bar__copy{min-width:0}.profile-identity-bar__copy h2{margin-top:var(--space-1);font-size:var(--font-size-xl);letter-spacing:-.015em}.profile-identity-bar__copy p{margin-top:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-section-label{color:var(--color-text-subtle);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.08em;text-transform:uppercase}.profile-avatar{position:relative;display:grid;flex:0 0 56px;place-items:center;width:56px;height:56px;border-radius:var(--radius-lg);color:var(--color-on-primary);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);box-shadow:0 2px 8px color-mix(in srgb,var(--color-primary) 40%,transparent),inset 0 1px #ffffff40;overflow:hidden}.profile-avatar:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(145deg,rgba(255,255,255,.18) 0%,transparent 60%);border-radius:inherit;pointer-events:none}.profile-avatar--leaf{background:linear-gradient(135deg,var(--color-success) 0%,color-mix(in srgb,var(--color-success) 80%,#000) 100%);box-shadow:0 2px 8px color-mix(in srgb,var(--color-success) 40%,transparent),inset 0 1px #ffffff40}.profile-avatar--amber{color:var(--color-text);background:linear-gradient(135deg,var(--color-warning) 0%,color-mix(in srgb,var(--color-warning) 80%,#c00) 100%);box-shadow:0 2px 8px color-mix(in srgb,var(--color-warning) 40%,transparent),inset 0 1px #ffffff40}.profile-avatar--ink{background:linear-gradient(135deg,var(--color-text) 0%,#2a2a3a 100%);box-shadow:0 2px 8px #0000004d,inset 0 1px #ffffff26}.profile-avatar[data-avatar-frame=frame_silver]{box-shadow:0 0 0 1px #fff6,0 0 0 3px #9ca3af,0 0 0 4px #9ca3af4d,0 3px 10px color-mix(in srgb,var(--color-primary) 35%,transparent),inset 0 1px #ffffff40}.profile-avatar[data-avatar-frame=frame_gold]{box-shadow:0 0 0 1px #ffffff80,0 0 0 3px #f59e0b,0 0 0 4px #f59e0b66,0 0 0 7px #fcd34d26,0 4px 14px #f59e0b66,inset 0 1px #ffffff4d}.profile-edit-form{display:grid;grid-column:2 / -1;gap:var(--space-4);min-width:0}.profile-edit-form__fields{display:grid;grid-template-columns:minmax(140px,.7fr) minmax(180px,1fr);gap:var(--space-3)}.profile-avatar-picker{min-width:0;padding:0;border:0}.profile-avatar-picker legend{margin-bottom:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.profile-avatar-picker__options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}.profile-avatar-option{display:grid;justify-items:center;gap:4px;min-width:0;padding:var(--space-2);border:0;border-radius:var(--radius-md);color:var(--color-text);background:transparent;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .18s ease}.profile-avatar-option:hover{background:var(--color-surface-muted);transform:translateY(-1px)}.profile-avatar-option:focus-visible{outline:3px solid color-mix(in srgb,var(--color-primary) 35%,transparent);outline-offset:2px}.profile-avatar-option.is-selected{background:transparent}.profile-avatar-option.is-selected .profile-avatar{box-shadow:0 0 0 3px var(--color-surface),0 0 0 5px var(--color-primary),0 0 18px color-mix(in srgb,var(--color-primary) 55%,transparent)}.profile-avatar-option.is-selected .profile-avatar-option__description{color:var(--color-primary);font-weight:var(--font-weight-bold)}.profile-avatar-option .profile-avatar{width:44px;height:44px;font-size:var(--font-size-sm)}.profile-avatar-option__label{overflow:hidden;max-width:100%;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);text-overflow:ellipsis;white-space:nowrap}.profile-avatar-option__description{color:var(--color-text-subtle);font-size:11px}.profile-edit-form__fields label{display:grid;gap:var(--space-2);min-width:0;color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.profile-edit-form__fields input,.profile-edit-form__fields select{width:100%;min-width:0;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.profile-edit-form__actions{display:flex;justify-content:flex-end;gap:var(--space-2)}.profile-overview{padding:var(--space-5);border:1px solid var(--color-border-focus);border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-muted) 100%);box-shadow:var(--shadow-card)}.profile-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}.profile-stat{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted)}.profile-stat span{display:block;color:var(--color-text-muted);font-size:var(--font-size-xs)}.profile-stat strong{display:block;margin-top:var(--space-1);font-size:var(--font-size-lg);font-variant-numeric:tabular-nums}.profile-entries{display:flex;flex-direction:column;gap:var(--space-3)}.profile-entry{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);min-height:72px;padding:var(--space-3) var(--space-4);background:linear-gradient(145deg,var(--color-surface) 0%,var(--color-surface-muted) 100%);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}.profile-entry:hover{border-color:var(--color-border-focus);box-shadow:var(--shadow-raise);transform:translateY(-2px)}.profile-entry:active{transform:translateY(1px) scale(.995)}.profile-entry--review .profile-entry__icon{color:var(--color-primary-hover);background-color:var(--color-primary-soft)}.profile-entry__icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-md);color:var(--color-warning);background-color:var(--color-warning-bg)}.profile-entry__copy{display:flex;min-width:0;flex-direction:column;gap:var(--space-1)}.profile-entry__copy strong{overflow:hidden;color:var(--color-text);font-size:var(--font-size-md);text-overflow:ellipsis;white-space:nowrap}.profile-entry__copy span{overflow:hidden;color:var(--color-text-muted);font-size:var(--font-size-xs);text-overflow:ellipsis;white-space:nowrap}.profile-entry__arrow{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--color-text-subtle);transition:transform var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease)}.profile-entry:hover .profile-entry__arrow{color:var(--color-primary);transform:translate(2px)}.profile-util-section{display:flex;align-items:center;justify-content:center;gap:var(--space-6);padding:var(--space-3) 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.profile-util-link{display:inline-flex;align-items:center;padding:0;background:none;border:none;color:var(--color-text-muted);font-size:var(--font-size-sm);cursor:pointer;transition:color var(--motion-fast) var(--motion-ease);text-decoration:none}.profile-util-link:hover{color:var(--color-primary)}.profile-danger-section{display:flex;justify-content:center;padding-top:var(--space-2);padding-bottom:var(--space-4)}.profile-entry:nth-child(2) .profile-entry__icon{color:var(--color-warning);background-color:var(--color-warning-bg)}.profile-entry:nth-child(3) .profile-entry__icon{color:var(--color-success);background-color:color-mix(in srgb,var(--color-success) 12%,transparent)}.profile-entry:nth-child(4) .profile-entry__icon{color:var(--color-text-muted);background-color:var(--color-surface-muted)}.profile-form{display:grid;gap:var(--space-4)}.profile-form>label{display:grid;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.profile-form input,.profile-form textarea,.profile-form select{width:100%;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.profile-form textarea{min-height:96px;resize:vertical}.profile-form input:focus,.profile-form textarea:focus,.profile-form select:focus{border-color:var(--color-border-focus);outline:none;box-shadow:var(--shadow-focus)}@media (max-width: 720px){.profile-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 560px){.profile-page{gap:var(--space-4)}.profile-identity-bar{grid-template-columns:auto minmax(0,1fr) auto;padding:var(--space-4);gap:var(--space-3)}.profile-identity-bar>button{grid-column:1 / -1;justify-self:stretch}.profile-identity-bar__copy p{white-space:normal}.profile-edit-form{grid-column:1 / -1}.profile-edit-form__fields{grid-template-columns:1fr}.profile-avatar-picker__options{grid-template-columns:repeat(4,minmax(64px,1fr));overflow-x:auto}.profile-edit-form__actions{justify-content:stretch}.profile-edit-form__actions>*{flex:1}.profile-overview{padding:var(--space-4)}.profile-stat{padding:var(--space-2) var(--space-3)}.profile-entry{min-height:64px;padding:var(--space-3)}.profile-entry__icon{width:36px;height:36px}.profile-actions{gap:var(--space-1)}}.shop-page{display:flex;flex-direction:column;gap:var(--space-5);padding-bottom:var(--space-6);animation:shop-enter var(--motion-slow) var(--motion-ease) both}@keyframes shop-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.shop-page__header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}.shop-page__header h1{margin-top:var(--space-1);font-size:var(--font-size-2xl);letter-spacing:-.02em}.shop-page__balance{flex-shrink:0;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-focus);border-radius:var(--radius-full);color:var(--color-warning);background:var(--color-warning-bg);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums}.shop-page__notice{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-focus);border-radius:var(--radius-md);color:var(--color-text-muted);background:var(--color-surface-muted)}.shop-error{display:grid;gap:var(--space-3)}.shop-catalog{display:flex;flex-direction:column;gap:var(--space-6)}.shop-section__title{margin-bottom:var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.08em}.shop-list{display:flex;flex-direction:column;gap:var(--space-2)}.shop-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card);transition:border-color var(--motion-fast) var(--motion-ease)}.shop-item:hover,.shop-item.is-equipped{border-color:var(--color-border-focus);background:var(--color-surface-muted)}.shop-item__preview{position:relative;display:grid;place-items:center;width:42px;height:42px;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-primary-soft)}.shop-item__preview span{display:block;width:22px;height:22px;border-radius:var(--radius-sm);background:var(--color-primary)}.shop-item__preview--theme span{width:30px;height:22px;border:1px solid rgba(255,255,255,.7);border-radius:4px;box-shadow:inset 0 -7px #ffffff85}.shop-item[data-cosmetic-id=theme_mint] .shop-item__preview{background:#e8f5ef}.shop-item[data-cosmetic-id=theme_mint] .shop-item__preview span{background:#477b70}.shop-item[data-cosmetic-id=theme_neon] .shop-item__preview{background:#0a0e1a;border-color:#27334c}.shop-item[data-cosmetic-id=theme_neon] .shop-item__preview span{background:#22d3ee;border-color:#67e8f97a;box-shadow:inset 0 -7px #171f35,0 0 8px #22d3ee80}.shop-item[data-cosmetic-id=theme_sunset] .shop-item__preview{background:#f8e6e3}.shop-item[data-cosmetic-id=theme_sunset] .shop-item__preview span{background:#c2503f}.shop-item__preview--block_skin span{border:1px solid color-mix(in srgb,var(--color-primary) 70%,var(--color-border));background:color-mix(in srgb,var(--color-primary) 36%,var(--color-surface));box-shadow:inset 0 1px #fff9,0 2px 4px color-mix(in srgb,var(--color-primary) 26%,transparent)}.shop-item[data-cosmetic-id=block_neon] .shop-item__preview{background:#0a0e1a;border-color:#27334c}.shop-item[data-cosmetic-id=block_neon] .shop-item__preview span{border:2px solid #22d3ee;background:linear-gradient(145deg,#22d3ee3d,#0a0e1ae6);box-shadow:inset 0 1px #fff3,0 0 8px #22d3eeb3}.shop-item[data-cosmetic-id=block_happy_blink] .shop-item__preview span{background:linear-gradient(145deg,#a8dab5,#8bc89d);background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><ellipse cx="8" cy="24" rx="4" ry="3" fill="%23ffb3ba" opacity="0.55"/><ellipse cx="40" cy="24" rx="4" ry="3" fill="%23ffb3ba" opacity="0.55"/><circle cx="16" cy="18" r="2.2" fill="%23334"/><circle cx="32" cy="18" r="2.2" fill="%23334"/><path d="M 15 27 Q 24 33 33 27" stroke="%23334" stroke-width="2" fill="none" stroke-linecap="round"/></svg>'),linear-gradient(145deg,#a8dab5,#8bc89d);background-size:72%,100%;background-position:center;background-repeat:no-repeat;border-color:#67a85d}.shop-item[data-cosmetic-id=block_chick_blink] .shop-item__preview span{background:linear-gradient(145deg,#ffe899,#ffd966);background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><line x1="22" y1="7" x2="22" y2="11" stroke="%23664400" stroke-width="1.8" stroke-linecap="round"/><line x1="26" y1="7" x2="26" y2="11" stroke="%23664400" stroke-width="1.8" stroke-linecap="round"/><ellipse cx="8" cy="24" rx="4" ry="3.5" fill="%23ffb3ba" opacity="0.55"/><ellipse cx="40" cy="24" rx="4" ry="3.5" fill="%23ffb3ba" opacity="0.55"/><circle cx="18" cy="19" r="2.2" fill="%23334"/><circle cx="30" cy="19" r="2.2" fill="%23334"/><ellipse cx="24" cy="25" rx="4" ry="2.5" fill="%23ff8844" opacity="0.9"/></svg>'),linear-gradient(145deg,#ffe899,#ffd966);background-size:74%,100%;background-position:center;background-repeat:no-repeat;border-color:#ca3}.shop-item__preview--avatar_frame span{border:2.5px solid var(--color-border-strong);border-radius:50%;background:linear-gradient(135deg,var(--color-primary-soft) 0%,var(--color-surface) 100%);box-shadow:inset 0 1px 2px #0000001a}.shop-item[data-cosmetic-id=frame_gold] .shop-item__preview{background:linear-gradient(135deg,#fcd34d40,#f59e0b14)}.shop-item[data-cosmetic-id=frame_gold] .shop-item__preview span{border-color:#f59e0b;border-width:3px;box-shadow:0 0 0 1px #fff6,0 0 0 2px #f59e0b4d,inset 0 1px 2px #f59e0b33}.shop-item[data-cosmetic-id=frame_silver] .shop-item__preview{background:linear-gradient(135deg,#9ca3af26,#9ca3af0d)}.shop-item[data-cosmetic-id=frame_silver] .shop-item__preview span{border-color:#9ca3af;border-width:2.5px;box-shadow:0 0 0 1px #ffffff4d,0 0 0 1px #9ca3af40,inset 0 1px 1px #9ca3af26}.shop-item__copy{min-width:0}.shop-item__copy strong,.shop-item__copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shop-item__copy span{margin-top:2px;color:var(--color-text-muted);font-size:var(--font-size-xs)}.shop-item__state{color:var(--color-success);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);white-space:nowrap}@media (max-width: 560px){.shop-page__header{align-items:flex-start;flex-direction:column;gap:var(--space-2)}}.achievements-page{display:flex;flex-direction:column;gap:var(--space-5);padding-bottom:var(--space-6);animation:achievements-enter var(--motion-slow) var(--motion-ease) both}@keyframes achievements-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.achievements-page__header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}.achievements-page__header h1{margin-top:var(--space-1);font-size:var(--font-size-2xl);letter-spacing:-.02em}.achievements-page__count{flex-shrink:0;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-focus);border-radius:var(--radius-full);color:var(--color-primary-hover);background:var(--color-primary-soft);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums}.achievements-page__notice{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-focus);border-radius:var(--radius-md);color:var(--color-text-muted);background:var(--color-surface-muted)}.achievements-page__hint{color:var(--color-warning);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.achievements-list{display:flex;flex-direction:column;gap:var(--space-2)}.achievement{display:grid;grid-template-columns:50px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-muted);background:var(--color-surface);box-shadow:var(--shadow-card)}.achievement.is-unlocked{border-color:var(--color-border-focus);color:var(--color-text);background:var(--color-surface-muted)}.achievement__mark{width:50px;height:50px;flex:0 0 50px;border-radius:var(--radius-md);background:var(--color-surface-muted);display:grid;place-items:center;color:var(--color-text-subtle);opacity:.58;filter:grayscale(1);transition:color .18s ease,background-color .18s ease,opacity .18s ease,filter .18s ease,transform .18s ease}.achievement__mark svg{width:36px;height:36px}.achievement.is-unlocked .achievement__mark{opacity:1;filter:none;transform:translateY(-1px)}.achievement.is-unlocked .achievement__mark--first{color:#2878a7;background:#e7f3f8}.achievement.is-unlocked .achievement__mark--streak{color:#c65a28;background:#fbece3}.achievement.is-unlocked .achievement__mark--study{color:#46765a;background:#e9f3ed}.achievement.is-unlocked .achievement__mark--master{color:#7258a6;background:#f0ebf8}.achievement.is-unlocked .achievement__mark--play{color:#9a6a20;background:#f8f0dc}.achievement__copy{min-width:0}.achievement__copy{min-width:0;overflow-wrap:anywhere}.achievement__copy strong,.achievement__copy span{display:block;overflow-wrap:anywhere}.achievement__copy span{margin-top:var(--space-1);font-size:var(--font-size-xs)}.achievement__state{color:var(--color-success);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);white-space:nowrap}@media (max-width: 560px){.achievement{grid-template-columns:50px minmax(0,1fr);align-items:start}.achievement>button,.achievement__state{grid-column:2;justify-self:start;margin-top:var(--space-1)}.achievements-page__header{align-items:flex-start;flex-direction:column;gap:var(--space-2)}}.ai-plan-page__intro{margin-bottom:var(--space-4);color:var(--color-text-muted)}.ai-plan-page__request-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:start}.ai-plan-page__request-field textarea{min-height:200px}.ai-plan-page__support-fields{display:grid;gap:var(--space-3)}.ai-plan-page textarea{width:100%;min-height:112px;resize:vertical;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);line-height:var(--line-height-md)}.ai-plan-page textarea:focus{border-color:var(--color-border-focus);outline:none;box-shadow:var(--shadow-focus)}.ai-plan-page__field-note,.ai-plan-page__counter{color:var(--color-text-subtle);font-size:var(--font-size-xs);font-weight:var(--font-weight-regular)}.ai-plan-page__counter{align-self:flex-end}.ai-plan-page__proficiency-field{border:none;padding:0;margin:0}.ai-plan-page__proficiency-field legend{padding:0;margin-bottom:var(--space-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text)}.ai-plan-page__proficiency-options{display:flex;flex-direction:column;gap:var(--space-1)}.ai-plan-page__proficiency-option{display:flex;flex-direction:column;gap:2px;padding:var(--space-2) var(--space-3);border:2px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-muted);cursor:pointer;text-align:left;transition:border-color .15s,background .15s,box-shadow .15s}.ai-plan-page__proficiency-option:hover:not(:disabled){border-color:var(--color-border-focus);background:var(--color-surface)}.ai-plan-page__proficiency-option[aria-pressed=true]{border-color:var(--color-primary);border-width:2px;background:var(--color-primary-soft);box-shadow:0 0 0 1px var(--color-primary) inset}.ai-plan-page__proficiency-option:disabled{cursor:default;opacity:.6}.ai-plan-page__proficiency-label{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text)}.ai-plan-page__proficiency-option[aria-pressed=true] .ai-plan-page__proficiency-label{color:var(--color-primary)}.ai-plan-page__proficiency-option[aria-pressed=true] .ai-plan-page__proficiency-label:before{content:"✓";font-weight:var(--font-weight-bold);font-size:var(--font-size-sm)}.ai-plan-page__proficiency-desc{font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.3}.ai-plan-page__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin:var(--space-3) 0}.ai-plan-page__stat{min-width:0;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted)}.ai-plan-page__stat span{display:block;color:var(--color-text-muted);font-size:var(--font-size-xs)}.ai-plan-page__stat strong{display:block;margin-top:var(--space-1);font-size:var(--font-size-md);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.ai-plan-page__daily-options{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-1)}.ai-plan-page__daily-options button{min-height:28px;padding:0 var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-muted);font-size:var(--font-size-xs);font-variant-numeric:tabular-nums;cursor:pointer}.ai-plan-page__daily-options button:hover:not(:disabled){border-color:var(--color-border-focus);color:var(--color-text)}.ai-plan-page__daily-options button[aria-pressed=true]{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary);font-weight:var(--font-weight-medium)}.ai-plan-page__daily-options button:disabled{cursor:default;opacity:.6}.ai-plan-page__warning,.ai-plan-page__error{margin-top:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border-focus);border-radius:var(--radius-md);background:var(--color-primary-soft);font-size:var(--font-size-sm)}.ai-plan-page__preview{margin-top:var(--space-4)}.ai-plan-page__preview h3{margin-bottom:var(--space-2);font-size:var(--font-size-md);display:flex;align-items:baseline;gap:var(--space-2)}.ai-plan-page__word-list{display:flex;flex-direction:column;gap:6px;height:min(54vh,520px);min-height:200px;overflow-y:auto;padding:4px 8px 4px 0;scrollbar-color:var(--color-border) transparent;scrollbar-width:thin}.ai-plan-page__word-item{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1.5fr);align-items:center;gap:10px;width:100%;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-muted);font-size:var(--font-size-sm)}.ai-plan-page__word-index{color:var(--color-text-subtle);font-variant-numeric:tabular-nums;font-size:var(--font-size-xs);text-align:right}.ai-plan-page__word-headword{color:var(--color-text);font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-plan-page__word-definition{color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-plan-page__analysis{margin:var(--space-3) 0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted);overflow:hidden}.ai-plan-page__analysis summary{padding:var(--space-2) var(--space-3);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);-webkit-user-select:none;user-select:none}.ai-plan-page__analysis summary:hover{background:var(--color-surface)}.ai-plan-page__analysis-body{padding:0 var(--space-3) var(--space-3);white-space:pre-wrap;word-break:break-word;font-size:var(--font-size-sm);line-height:var(--line-height-md);color:var(--color-text-muted)}.ai-plan-page__chat{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-2) 0}.ai-plan-page__chat-msg{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);max-width:85%}.ai-plan-page__chat-msg--ai{align-self:flex-start;background:var(--color-surface-muted);border:1px solid var(--color-border)}.ai-plan-page__chat-msg--user{align-self:flex-end;background:var(--color-primary-soft);border:1px solid var(--color-border-focus)}.ai-plan-page__chat-role{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-subtle);text-transform:uppercase;letter-spacing:.05em}.ai-plan-page__chat-content p{margin:0;font-size:var(--font-size-sm);line-height:var(--line-height-md);color:var(--color-text);overflow-wrap:anywhere}.ai-plan-page__chat-question{margin-top:var(--space-1)!important;color:var(--color-primary)!important;font-weight:var(--font-weight-medium)}.ai-plan-page__followup-textarea{width:100%;min-height:72px;resize:vertical;padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);line-height:var(--line-height-md);font-size:var(--font-size-sm)}.ai-plan-page__followup-textarea:focus{border-color:var(--color-border-focus);outline:none;box-shadow:var(--shadow-focus)}.ai-plan-page__followup{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.ai-plan-page__followup-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-2)}.ai-plan-page__loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-3);text-align:center}.ai-plan-page__loading-icon{width:36px;height:36px;border-radius:50%;border:3px solid var(--color-border);border-top-color:var(--color-primary);animation:ai-spin .8s linear infinite}.ai-plan-page__loading-text{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted);min-height:1.5em;transition:opacity .3s}.ai-plan-page__loading-bar{width:100%;max-width:240px;height:4px;border-radius:2px;background:var(--color-surface-muted);overflow:hidden}.ai-plan-page__loading-bar-fill{width:40%;height:100%;border-radius:2px;background:var(--color-primary);animation:ai-indeterminate 1.4s ease-in-out infinite}.btn__spinner{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:ai-spin .7s linear infinite;opacity:.8}@keyframes ai-spin{to{transform:rotate(360deg)}}@keyframes ai-indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}@media (max-width: 760px){.ai-plan-page__request-field textarea{min-height:220px}}@media (max-width: 680px){.ai-plan-page__stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 480px){.ai-plan-page__followup-row{grid-template-columns:1fr}.ai-plan-page__request-field textarea{min-height:260px}}.backlog-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--space-5);background:color-mix(in srgb,var(--mist-900) 48%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.backlog-dialog__panel{width:min(100%,400px);padding:var(--space-6);border:1px solid color-mix(in srgb,var(--color-primary) 24%,var(--color-border));border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-surface) 96%,transparent);box-shadow:var(--shadow-raise);animation:backlog-dialog-enter var(--motion-md) var(--motion-ease) both}.backlog-dialog__eyebrow{color:var(--color-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold)}.backlog-dialog__panel h2{margin:var(--space-2) 0 var(--space-3);color:var(--color-text);font-size:var(--font-size-xl);line-height:var(--line-height-tight);text-wrap:balance}.backlog-dialog__summary{margin:0 0 var(--space-4);color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:var(--line-height-loose);text-wrap:pretty}.backlog-dialog__options{display:flex;flex-direction:column;gap:var(--space-3)}.backlog-dialog__option{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);text-align:left;cursor:pointer;transition:border-color var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}.backlog-dialog__option:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-surface-hover);transform:translateY(-1px)}.backlog-dialog__option:active:not(:disabled){transform:translateY(1px)}.backlog-dialog__option:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.backlog-dialog__option:disabled{opacity:.64;cursor:wait}.backlog-dialog__option-name{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-text)}.backlog-dialog__option-detail{font-size:var(--font-size-sm);color:var(--color-text-muted)}.backlog-dialog__option-warning{font-size:var(--font-size-xs);color:var(--color-danger)}.backlog-dialog__actions{margin-top:var(--space-5);text-align:center}.backlog-dialog__button{min-height:var(--layout-touch-min);padding:0 var(--space-4);border:1px solid transparent;border-radius:var(--radius-md);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);cursor:pointer;transition:background var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}.backlog-dialog__button--secondary{border-color:var(--color-border-strong);background:var(--color-surface);color:var(--color-text)}.backlog-dialog__button--secondary:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-surface-hover)}.backlog-dialog__button:disabled{cursor:wait;opacity:.64}@keyframes backlog-dialog-enter{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 480px){.backlog-dialog{padding:var(--space-4)}.backlog-dialog__panel{padding:var(--space-5)}}@media (prefers-reduced-motion: reduce){.backlog-dialog__panel{animation:none}.backlog-dialog__option{transition:none}}.review-page{display:flex;flex-direction:column;gap:20px}.review-page__header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px 0 22px;border-bottom:1px solid var(--color-border)}.review-page__header p,.review-state>span,.review-action>span{color:var(--color-primary);font-size:12px;font-weight:800;text-transform:uppercase}.review-page__header h1{margin:7px 0 8px;font-size:clamp(28px,5vw,48px)}.review-page__header>div>span{color:var(--color-text-muted)}.review-page__count{flex:0 0 124px;padding-left:22px;border-left:1px solid var(--color-border)}.review-page__count strong{display:block;font-size:34px;line-height:1}.review-page__count span{color:var(--color-text-muted);font-size:12px}.review-notice,.review-sync{padding:13px 16px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface-muted);font-size:14px}.review-sync{display:flex;align-items:center;justify-content:space-between;gap:16px;border-left:4px solid var(--color-primary)}.review-sync strong,.review-sync span{display:block}.review-sync span{margin-top:3px;color:var(--color-text-muted);font-size:12px}.review-sync--conflict{border-left-color:var(--color-danger)}.review-workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:390px;border:1px solid var(--color-border);border-radius:8px;overflow:hidden;background:var(--color-surface)}.review-workspace__main{padding:24px}.review-progress{height:4px;margin-bottom:24px;background:var(--color-surface-muted)}.review-progress span{display:block;height:100%;background:var(--color-primary);transition:width .18s ease}.review-word-grid{display:flex;height:320px;min-height:0;flex-direction:column;gap:1px;overflow-y:auto;border:1px solid var(--color-border);background:var(--color-border)}.review-word{flex:0 0 auto;min-height:74px;padding:14px;background:var(--color-surface)}.review-word strong,.review-word span{display:block;overflow-wrap:anywhere}.review-word strong{font-size:17px}.review-word span{margin-top:5px;color:var(--color-text-muted);font-size:11px}.review-action{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:15px;padding:28px;border-left:1px solid var(--color-border);background:var(--color-surface-muted)}.review-action h2{font-size:22px}.review-action p{color:var(--color-text-muted);font-size:13px;line-height:1.7}.review-state{display:flex;min-height:420px;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;max-width:560px}.review-state h1{font-size:36px}.review-state p{color:var(--color-text-muted)}@media (max-width: 760px){.review-page__header{align-items:flex-start}.review-page__count{flex-basis:90px}.review-workspace{grid-template-columns:1fr}.review-action{border-top:1px solid var(--color-border);border-left:0}}@media (max-width: 460px){.review-page__header{flex-direction:column}.review-page__count{padding:0;border:0}.review-sync{align-items:flex-start;flex-direction:column}}.plan-edit-page{display:flex;flex-direction:column;gap:var(--space-4)}.plan-edit-page__field-note{margin-top:var(--space-1);color:var(--color-text-subtle);font-size:var(--font-size-xs);line-height:1.5}.plan-edit-page__estimate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted)}.plan-edit-page__estimate strong{display:block;margin-top:3px;color:var(--color-text);font-size:var(--font-size-md);font-variant-numeric:tabular-nums}.plan-edit-page__review-note{margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-sm)}.plan-edit-page .page-form-grid input:not([type=checkbox]),.plan-edit-page .page-form-grid select{color:var(--color-text);-webkit-text-fill-color:var(--color-text)}@media (max-width: 560px){.plan-edit-page__estimate{grid-template-columns:1fr}}.wordbook-library__search{display:flex;flex-direction:column;gap:var(--space-2)}.wordbook-library__search>label{color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.wordbook-library__search-control{display:flex;align-items:stretch;gap:var(--space-2)}.wordbook-library__search-control input{flex:1 1 auto;min-width:0}.wordbook-library__search-button{display:inline-grid;flex:0 0 44px;place-items:center;width:44px;min-height:44px;border:1px solid var(--color-primary);border-radius:var(--radius-md);color:var(--color-on-primary);background:var(--color-primary);cursor:pointer;transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}.wordbook-library__search-button:hover{border-color:var(--color-primary-hover);background:var(--color-primary-hover)}.wordbook-library__search-button:active{transform:translateY(1px) scale(.98)}.wordbook-library__search-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.wordbook-library__results{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--space-3);height:var(--wordbook-results-height, auto);max-height:var(--wordbook-results-height, none);overflow-y:auto;padding:2px var(--space-2) 2px 2px;overscroll-behavior:contain;scrollbar-gutter:stable}.wordbook-library__results .card{flex:0 0 auto}.wordbook-library-page{display:flex;flex-direction:column;gap:var(--space-4)}.wordbook-library-page__heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}.wordbook-library-page__heading h1{font-size:var(--font-size-2xl);letter-spacing:-.02em}.wordbook-library-page__heading p{margin-top:var(--space-1);color:var(--color-text-muted);font-size:var(--font-size-sm)}@media (max-height: 680px) and (min-width: 561px){.wordbook-library-page{gap:var(--space-3)}.wordbook-library__results{gap:var(--space-2)}.wordbook-library__results .card{padding:var(--space-3)}}@media (max-width: 560px){.wordbook-library-page__heading{align-items:flex-start;flex-direction:column;gap:var(--space-2)}}.game-free-page{--free-ink: var(--color-text);--free-muted: var(--color-text-muted);--free-line: var(--color-border);--free-accent: #e87547;--free-accent-soft: color-mix(in srgb, #e87547 8%, var(--color-bg));display:flex;width:100%;min-width:0;gap:10px}.free-page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.free-score-summary{display:flex;width:160px;min-width:160px;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--free-line);border-radius:10px;background:var(--color-bg-elevated);color:var(--free-muted)}.free-score-summary span{font-size:12px;font-weight:700}.free-score-summary strong{color:var(--free-ink);font-size:24px;line-height:1}.free-page-heading h1{margin:3px 0 5px}.free-page-heading p{margin:0}.free-page-kicker{color:var(--free-accent);font-size:11px;font-weight:800;letter-spacing:.08em}.free-best-score{display:block;color:var(--free-ink);font-size:26px;line-height:1}.free-config-stack{display:flex;min-width:0;flex-direction:column;gap:10px}.free-options-row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);align-items:end;gap:18px}.free-difficulty-group{display:flex;flex-direction:column;gap:8px}.free-difficulty-group>span{color:var(--free-ink);font-size:13px;font-weight:700}.free-config-stack>.card{min-width:0}.free-word-list-card .card__body{min-height:0}.free-selected-list{display:flex;height:clamp(220px,33vh,330px);min-width:0;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain;padding:3px 7px 3px 0;scrollbar-color:var(--color-border-strong) transparent;scrollbar-width:thin}.free-selected-word{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid transparent;border-radius:8px;color:var(--free-ink);background:var(--color-surface-hover);cursor:pointer;text-align:left;transition:border-color .15s ease,background .15s ease}.free-selected-word:hover{border-color:var(--color-border-strong);background:var(--color-bg-elevated)}.free-selected-copy,.free-search-result>span:first-child{display:flex;min-width:0;flex-direction:column;gap:3px}.free-selected-action,.free-result-action{flex:0 0 auto;color:var(--free-accent);font-size:11px;font-weight:800;white-space:nowrap}.free-empty-list,.free-empty-results{margin:auto;padding:24px;color:var(--free-muted);font-size:13px;line-height:1.6;text-align:center}.free-search-label,.free-word-count{display:flex;flex-direction:column;gap:8px}.free-search-label>span,.free-word-count>span{color:var(--free-ink);font-size:13px;font-weight:700}.free-search-row{display:flex;gap:8px;min-width:0}.free-search-input{min-width:0;flex:1;padding:6px 10px;border:1px solid var(--free-line);border-radius:7px;color:var(--free-ink);background:var(--color-bg-elevated);font-family:inherit;font-size:14px}.free-search-input:focus{border-color:var(--free-accent);outline:none;box-shadow:0 0 0 3px #e8754721}.free-search-hint{min-height:18px;margin:6px 0 4px;color:var(--free-muted);font-size:11px;line-height:1.35}.free-search-results{display:flex;max-height:92px;min-width:0;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain;padding-right:5px;scrollbar-color:var(--color-border-strong) transparent;scrollbar-width:thin}.free-search-result{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border:1px solid var(--free-line);border-radius:7px;background:var(--color-bg-elevated);cursor:pointer;text-align:left}.free-search-result:disabled{cursor:not-allowed;opacity:.52}.free-word-count-options{display:grid;grid-template-columns:repeat(7,minmax(36px,1fr));gap:6px}.free-count-btn{min-width:0;padding:7px 4px;border:1px solid var(--free-line);border-radius:6px;background:var(--color-bg-elevated);cursor:pointer;font-family:inherit;font-size:13px}.free-count-btn:hover,.free-count-btn--selected{border-color:var(--free-accent);background:var(--free-accent-soft)}.free-count-btn--selected{font-weight:700}.difficulty-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:0}.difficulty-option{min-width:0;padding:9px 7px;border:1px solid var(--free-line);border-radius:7px;background:var(--color-bg-elevated);cursor:pointer;font-family:inherit}.difficulty-option:hover,.difficulty-option--selected{border-color:var(--free-accent);background:var(--free-accent-soft)}.free-multiplier{margin:10px 0 0;font-size:12px}.free-page-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 14px;border:1px solid var(--free-line);border-radius:8px;background:var(--color-surface-hover)}.free-page-footer p{margin:0;color:var(--free-muted);font-size:12px;line-height:1.45}.free-page-footer .page-actions{flex:0 0 auto;margin:0}@media (max-width: 760px){.free-page-heading,.free-page-footer{align-items:stretch;flex-direction:column}.free-score-summary{width:100%;min-width:0}.free-options-row{grid-template-columns:1fr}.free-selected-list{height:240px}.free-page-footer .page-actions{align-self:flex-start}}@media (max-width: 480px){.free-search-row{align-items:stretch}.free-word-count-options{grid-template-columns:repeat(4,minmax(42px,1fr))}.free-selected-list{height:220px}}.free-word-workspace{--free-ink: var(--color-text);--free-muted: var(--color-text-muted);--free-line: var(--color-border);--free-accent: #ef8354;--free-accent-soft: color-mix(in srgb, #ef8354 8%, var(--color-bg))}.free-word-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.free-word-header h1{margin:4px 0 0;color:var(--free-ink)}.free-word-kicker{margin:0;color:var(--free-accent);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.free-word-count-badge{flex:0 0 auto;padding:8px 12px;border:1px solid var(--free-line);border-radius:999px;color:var(--free-ink);background:var(--color-bg-elevated);font-size:13px;font-weight:700}.free-word-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr);gap:16px;align-items:start}.free-selected-word-list{display:flex;flex-direction:column;gap:6px;height:min(54vh,520px);min-height:300px;overflow-y:auto;padding:4px 8px 4px 0;scrollbar-color:var(--color-border-strong) transparent;scrollbar-width:thin}.free-selected-word{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid transparent;border-radius:8px;color:var(--free-ink);background:var(--color-surface-hover);cursor:pointer;text-align:left;transition:border-color .16s ease,background .16s ease,transform .16s ease}.free-selected-word:hover{border-color:var(--color-border-strong);background:var(--color-bg-elevated);transform:translate(2px)}.free-selected-word--active{border-color:var(--free-accent);background:var(--free-accent-soft);box-shadow:inset 3px 0 0 var(--free-accent)}.free-selected-index{color:var(--color-text-subtle);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;font-weight:700}.free-selected-copy{display:flex;min-width:0;flex-direction:column;gap:3px}.free-selected-copy strong,.free-search-result strong{overflow:hidden;color:var(--free-ink);font-size:14px;text-overflow:ellipsis;white-space:nowrap}.free-selected-copy span,.free-search-result small{overflow:hidden;color:var(--free-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.free-selected-action,.free-result-action{color:var(--free-accent);font-size:11px;font-weight:700}.free-replace-panel{display:flex;min-height:300px;flex-direction:column}.free-search-label{display:flex;flex-direction:column;gap:8px}.free-search-label>span{color:var(--free-ink);font-size:13px;font-weight:700}.free-search-row{display:flex;gap:8px}.free-search-input{min-width:0;flex:1;padding:10px 12px;border:1px solid var(--free-line);border-radius:7px;color:var(--free-ink);background:var(--color-bg-elevated);font-family:inherit;font-size:14px}.free-search-input:focus{border-color:var(--free-accent);outline:none;box-shadow:0 0 0 3px #ef835424}.free-replace-hint{min-height:38px;margin:14px 0 10px;color:var(--free-muted);font-size:13px;line-height:1.5}.free-search-results{display:flex;min-height:180px;max-height:320px;flex-direction:column;gap:6px;overflow-y:auto;padding-right:4px}.free-search-result{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--free-line);border-radius:7px;background:var(--color-bg-elevated);cursor:pointer;text-align:left;transition:border-color .16s ease,background .16s ease}.free-search-result span:first-child{display:flex;min-width:0;flex-direction:column;gap:3px}.free-search-result:hover:not(:disabled){border-color:var(--free-accent);background:var(--free-accent-soft)}.free-search-result:disabled{cursor:not-allowed;opacity:.55}.free-empty-results{margin:auto 0;color:var(--free-muted);font-size:13px;text-align:center}.free-word-error{margin:0;color:var(--color-danger);font-size:13px}@media (max-width: 760px){.free-word-layout{grid-template-columns:1fr}.free-selected-word-list{height:360px}}.wordbook-options{display:flex;flex-direction:column;gap:8px;margin-top:12px}.wordbook-option{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);cursor:pointer;transition:border-color .15s,background .15s;text-align:left;font-family:inherit}.wordbook-option:hover,.wordbook-option--selected{border-color:var(--color-primary);background:var(--color-surface-hover)}.difficulty-options{display:flex;gap:8px;margin-top:12px}.difficulty-option{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);cursor:pointer;transition:border-color .15s,background .15s;font-family:inherit}.difficulty-option:hover,.difficulty-option--selected{border-color:var(--color-primary);background:var(--color-surface-hover)}.level-difficulties{display:flex;flex-direction:column;gap:8px;margin-top:12px}.level-difficulty-btn{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);cursor:pointer;transition:border-color .15s,background .15s;text-align:left;font-family:inherit}.level-difficulty-btn:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-surface-hover)}.level-difficulty-btn:disabled{opacity:.5;cursor:not-allowed}.level-difficulty-label{font-weight:600;font-size:14px;min-width:36px}.level-difficulty-stars{color:var(--color-warning);font-size:16px;letter-spacing:2px;min-width:60px}.level-difficulty-score{font-size:12px;color:var(--color-text-muted);min-width:50px}.level-difficulty-hint{font-size:12px;color:var(--color-text-subtle);margin-left:auto}:root[data-cosmetic-theme=theme_mint]{--theme-accent: var(--success-500);--theme-accent-soft: var(--success-100)}:root[data-cosmetic-theme=theme_sunset]{--theme-accent: var(--danger-500);--theme-accent-soft: var(--danger-100)}:root{--mist-50: #f4f7fb;--mist-100: #e6edf6;--mist-200: #cbd9e9;--mist-300: #a6bedb;--mist-400: #789cc4;--mist-500: #547fae;--mist-600: #3f6591;--mist-700: #325075;--mist-800: #263c58;--mist-900: #1b2b3f;--neutral-0: #ffffff;--neutral-50: #f7f8fa;--neutral-100: #eef0f4;--neutral-200: #dfe3ea;--neutral-300: #c4cad5;--neutral-500: #7b8598;--neutral-700: #47516280;--neutral-800: #2c3442;--neutral-900: #1a202b;--success-500: #3f9d6d;--success-100: #e3f3ea;--warning-500: #c98a2e;--warning-100: #f8efdc;--danger-500: #c2503f;--danger-100: #f8e6e3;--info-500: #4a86b8;--info-100: #e4eff7;--color-bg: #eaf4f8;--theme-accent: var(--mist-600);--theme-accent-soft: var(--mist-100);--color-bg-elevated: var(--neutral-0);--color-surface: var(--neutral-0);--color-surface-muted: var(--mist-100);--color-surface-hover: var(--mist-100);--color-primary: var(--mist-600);--color-primary-hover: var(--mist-700);--color-primary-active: var(--mist-800);--color-primary-soft: var(--mist-100);--color-on-primary: var(--neutral-0);--color-text: var(--neutral-900);--color-text-muted: var(--neutral-500);--color-text-subtle: var(--neutral-300);--color-text-invert: var(--neutral-0);--color-text-link: var(--mist-600);--color-border: var(--neutral-200);--color-border-strong: var(--neutral-300);--color-border-focus: var(--mist-500);--color-success: var(--success-500);--color-success-bg: var(--success-100);--color-warning: var(--warning-500);--color-warning-bg: var(--warning-100);--color-danger: var(--danger-500);--color-danger-bg: var(--danger-100);--color-info: var(--info-500);--color-info-bg: var(--info-100);--space-0: 0;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 999px;--shadow-card: 0 1px 2px rgba(27, 43, 63, .06), 0 4px 12px rgba(27, 43, 63, .06);--shadow-raise: 0 2px 4px rgba(27, 43, 63, .08), 0 12px 28px rgba(27, 43, 63, .1);--shadow-nav: 0 -1px 0 var(--color-border), 0 -8px 24px rgba(27, 43, 63, .06);--shadow-focus: 0 0 0 3px rgba(84, 127, 174, .28);--font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-md: 15px;--font-size-lg: 18px;--font-size-xl: 22px;--font-size-2xl: 28px;--font-size-3xl: 34px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 600;--line-height-tight: 1.25;--line-height-md: 1.5;--line-height-loose: 1.7;--z-base: 0;--z-sticky: 100;--z-nav: 200;--z-overlay: 300;--z-modal: 400;--z-toast: 500;--motion-fast: .12s;--motion-md: .2s;--motion-slow: .32s;--motion-ease: cubic-bezier(.2, .8, .2, 1);--layout-max-width: 720px;--layout-nav-height: 60px;--layout-header-height: 52px;--layout-touch-min: 44px}:root[data-cosmetic-theme=theme_mint]{--color-bg: #e8f5ef;--color-bg-elevated: #f4f9f7;--color-surface: #f9fcfa;--color-surface-muted: #d2e7dd;--color-surface-hover: #c5ded3;--color-primary: #477b70;--color-primary-hover: #315f57;--color-primary-active: #244b44;--color-primary-soft: #d2e7dd;--color-on-primary: #ffffff;--color-text: #203832;--color-text-muted: #5f786f;--color-text-subtle: #91a9a0;--color-text-invert: #ffffff;--color-text-link: #315f57;--color-border: #cfdfd8;--color-border-strong: #a2c9bd;--color-border-focus: #477b70;--theme-accent: #477b70;--theme-accent-soft: #d2e7dd;--shadow-card: 0 1px 2px rgba(49, 95, 87, .06), 0 4px 12px rgba(49, 95, 87, .08);--shadow-raise: 0 2px 4px rgba(49, 95, 87, .08), 0 12px 28px rgba(49, 95, 87, .12);--shadow-nav: 0 -1px 0 var(--color-border), 0 -8px 24px rgba(49, 95, 87, .08);--shadow-focus: 0 0 0 3px rgba(71, 123, 112, .32);--game-page-bg: #e0f0e8;--game-board-bg: #f2faf6;--game-board-border: #b8d4c8;--game-cell-line: rgba(71, 123, 112, .12);--game-cell-bg: rgba(249, 252, 250, .6);--game-hud-bg: rgba(249, 252, 250, .88);--game-hud-border: #cfdfd8;--game-hud-text: #203832;--game-hud-muted: #5f786f;--game-stat-label: #91a9a0;--game-stat-value: #244b44;--game-control-bg: rgba(255, 255, 255, .7);--game-control-border: #b8d4c8;--game-control-hover: rgba(255, 255, 255, .9);--game-overlay-bg: rgba(232, 245, 239, .96);--game-overlay-card: #ffffff;--game-bubble-bg: rgba(36, 75, 68, .94);--game-bubble-text: #ffffff;--game-bubble-arrow: rgba(36, 75, 68, .94);--demo-feed-halo: rgba(255, 255, 255, .9);--demo-on-primary: #ffffff;--demo-gold: #d4a745;--demo-gold-glow: rgba(212, 167, 69, .4);--demo-gold-bg: rgba(212, 167, 69, .12)}:root[data-cosmetic-theme=theme_neon]{color-scheme:dark;--color-bg: #0a0e1a;--color-bg-elevated: #141a2e;--color-surface: #0f1424;--color-surface-muted: #171f35;--color-surface-hover: #1c2740;--color-primary: #22d3ee;--color-primary-hover: #67e8f9;--color-primary-active: #0891b2;--color-primary-soft: #123544;--color-on-primary: #07121c;--color-text: #e8ecf4;--color-text-muted: #9aa6bd;--color-text-subtle: #667188;--color-text-invert: #0a0e1a;--color-text-link: #67e8f9;--color-border: #27334c;--color-border-strong: #3a4967;--color-border-focus: #22d3ee;--color-success: #55d6a5;--color-success-bg: #153b34;--color-warning: #ffd54f;--color-warning-bg: #43391b;--color-danger: #ff6b8a;--color-danger-bg: #401d2b;--color-info: #67e8f9;--color-info-bg: #123544;--theme-accent: #22d3ee;--theme-accent-soft: #123544;--shadow-card: 0 1px 0 rgba(103, 232, 249, .08), 0 8px 20px rgba(2, 8, 23, .36);--shadow-raise: 0 1px 0 rgba(103, 232, 249, .12), 0 16px 34px rgba(2, 8, 23, .48);--shadow-nav: 0 -1px 0 var(--color-border), 0 -10px 26px rgba(2, 8, 23, .46);--shadow-focus: 0 0 0 3px rgba(34, 211, 238, .3);--game-page-bg: #05080f;--game-board-bg: #0d1220;--game-board-border: #1a2538;--game-cell-line: rgba(34, 211, 238, .08);--game-cell-bg: rgba(15, 20, 36, .5);--game-hud-bg: rgba(20, 26, 46, .92);--game-hud-border: #27334c;--game-hud-text: #e8ecf4;--game-hud-muted: #9aa6bd;--game-stat-label: #667188;--game-stat-value: #67e8f9;--game-control-bg: rgba(20, 26, 46, .8);--game-control-border: #27334c;--game-control-hover: rgba(28, 39, 64, .95);--game-overlay-bg: rgba(10, 14, 26, .97);--game-overlay-card: #141a2e;--game-bubble-bg: rgba(20, 26, 46, .96);--game-bubble-text: #e8ecf4;--game-bubble-arrow: rgba(20, 26, 46, .96);--demo-feed-halo: rgba(34, 211, 238, .6);--demo-on-primary: #07121c;--demo-gold: #ffc947;--demo-gold-glow: rgba(255, 201, 71, .5);--demo-gold-bg: rgba(255, 201, 71, .08)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}html{overflow-y:scroll;scrollbar-gutter:stable}body{margin:0;font-family:var(--font-sans);font-size:var(--font-size-md);font-weight:var(--font-weight-regular);line-height:var(--line-height-md);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);color:var(--color-text)}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}h4,h5,h6{font-size:var(--font-size-md)}p{margin:0}ul,ol{margin:0;padding:0;list-style:none}a{color:var(--color-text-link);text-decoration:none}a:hover{color:var(--color-primary-hover)}button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}input,select,textarea{font:inherit;color:inherit}img,svg,canvas{display:block;max-width:100%}code,pre,kbd{font-family:var(--font-mono);font-size:var(--font-size-sm)}hr{border:none;border-top:1px solid var(--color-border);margin:var(--space-4) 0}:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}@media (max-width: 560px){.study-word-chips{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.page-stack{display:flex;flex-direction:column;gap:var(--space-4);animation:page-enter var(--motion-slow) var(--motion-ease) both}@keyframes page-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-stack>h1{font-size:var(--font-size-2xl);letter-spacing:-.02em}.page-stack>.card,.page-stack>section.card{border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.page-stack>.card:first-of-type{border-color:var(--color-border-focus)}.page-stack label{display:flex;flex-direction:column;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.page-stack input:not([type=checkbox]),.page-stack select{width:100%;min-height:44px;padding:0 var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.page-stack input:not([type=checkbox]):focus,.page-stack select:focus{border-color:var(--color-border-focus);outline:none;box-shadow:var(--shadow-focus)}.page-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.page-form-grid .form-check{flex-direction:row;align-items:center;align-self:end;min-height:44px}.page-form-grid .form-check input,.form-days input{accent-color:var(--color-primary)}.form-days{display:flex;flex-wrap:wrap;gap:var(--space-2)}.form-days label{flex-direction:row;align-items:center;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface-muted)}.wordbook-library__category{display:inline-flex;width:fit-content;padding:4px 9px;border-radius:var(--radius-sm);color:var(--color-primary-hover);background:var(--color-primary-soft);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold)}.wordbook-library__category+.page-actions{margin-top:var(--space-2)}.page-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}.text-muted{color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:var(--line-height-md)}.page-fullscreen{display:flex;flex-direction:column;min-height:100%;padding:var(--space-5) var(--space-4);max-width:var(--layout-max-width);margin:0 auto}.play-page{display:flex;flex-direction:column;min-height:100%;background-color:var(--color-bg)}.play-page__header{display:flex;align-items:center;gap:var(--space-3);height:var(--layout-header-height);padding:0 var(--space-4);border-bottom:1px solid var(--color-border);background-color:var(--color-surface)}.play-page__exit{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);color:var(--color-text-muted);flex-shrink:0}.play-page__exit:hover{color:var(--color-text);background-color:var(--color-surface-muted)}.play-page__title{flex:1;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-text)}.play-page__hint-badge{font-size:var(--font-size-xs);color:var(--color-text-muted);background-color:var(--color-surface-muted);padding:2px var(--space-2);border-radius:var(--radius-full);white-space:nowrap}.play-page__board{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-6) var(--space-4)}.play-page__placeholder{color:var(--color-text-muted);text-align:center;font-size:var(--font-size-sm)}.study-page{min-height:0}.study-page>.card{min-height:0}.study-page>.card:last-of-type{flex:0 0 auto}.study-goal-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.study-goal-summary__eyebrow,.study-preview-head{color:var(--color-text-subtle);font-size:var(--font-size-xs)}.study-goal-summary__eyebrow{margin:0 0 4px;font-weight:var(--font-weight-bold);letter-spacing:.04em;text-transform:uppercase}.study-goal-summary strong{display:block;font-size:var(--font-size-lg)}.study-goal-summary .text-muted{margin-top:6px}.study-goal-ring{display:grid;place-items:center;flex:0 0 72px;width:72px;height:72px;border:6px solid var(--color-primary-soft);border-right-color:var(--color-primary);border-radius:50%}.study-goal-ring strong{font-size:var(--font-size-md);line-height:1}.study-goal-ring span{margin-top:-22px;color:var(--color-text-subtle);font-size:9px}.study-preview-head{display:flex;justify-content:space-between;margin:var(--space-4) 0 var(--space-2);font-weight:var(--font-weight-bold)}.study-substages{display:flex;gap:var(--space-2);margin:var(--space-3) 0 0}.study-substage-dot{flex:1;display:grid;place-items:center;height:28px;border-radius:8px;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-text-subtle);background:var(--color-surface-raised);border:1px solid var(--color-border);transition:all .2s ease}.study-substage-dot--done{color:var(--color-primary);border-color:var(--color-primary-soft);background:var(--color-primary-soft)}.study-substage-dot--current{color:#fff;background:var(--color-primary);border-color:var(--color-primary)}.study-word-chips{display:grid;grid-template-columns:1fr;gap:var(--space-2);max-height:clamp(145px,18vh,190px);overflow-y:auto;padding:2px var(--space-2) 2px 2px;overscroll-behavior:contain;scrollbar-gutter:stable}@media (max-height: 820px) and (min-width: 561px){.study-word-chips{max-height:145px}}@media (max-height: 680px){.study-word-chips{max-height:145px}.study-word-chips .study-word-chip{min-height:50px}}.study-word-chip{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px var(--space-2);align-items:center;min-height:58px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(180deg,var(--color-surface),var(--color-surface-muted));box-shadow:var(--shadow-card)}.study-word-chip__index{grid-row:span 2;color:var(--color-text-subtle);font-family:var(--font-mono);font-size:var(--font-size-xs)}.study-word-chip strong{overflow-wrap:anywhere;font-size:var(--font-size-md)}.study-word-chip>span:last-child{color:var(--color-text-muted);font-size:var(--font-size-xs)}.study-level-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}.study-level-row:last-child{border-bottom:none}.study-level-info{display:flex;flex-direction:column;gap:var(--space-1)}.study-level-label{font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-text)}.wordbook-page{display:flex;flex-direction:column;gap:var(--space-5);padding-bottom:var(--space-6);animation:page-enter var(--motion-slow) var(--motion-ease) both}.wordbook-page__intro,.wordbook-section-heading,.wordbook-current__topline{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.wordbook-page__intro{align-items:flex-end}.wordbook-page__eyebrow{margin-bottom:var(--space-1);color:var(--color-text-muted);font-size:var(--font-size-xs);letter-spacing:.08em}.wordbook-page h1{font-size:var(--font-size-2xl);letter-spacing:-.02em}.wordbook-page h2{font-size:var(--font-size-xl);letter-spacing:-.015em}.wordbook-page__library-link,.wordbook-section-heading a{color:var(--color-text-link);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap}.wordbook-page__library-link:hover,.wordbook-section-heading a:hover{color:var(--color-primary-hover)}.wordbook-current{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-bg-elevated) 100%);border:1px solid var(--color-border-focus);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}.wordbook-status{display:inline-flex;align-items:center;min-height:26px;padding:0 var(--space-2);color:var(--color-primary-hover);background-color:var(--color-info-bg);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold)}.wordbook-current__progress{color:var(--color-text-muted);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}.wordbook-current__description{color:var(--color-text-muted);font-size:var(--font-size-sm)}.wordbook-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-2)}.wordbook-metric{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);min-height:72px;padding:var(--space-2);background-color:color-mix(in srgb,var(--color-surface) 78%,transparent);border:1px solid color-mix(in srgb,var(--color-surface) 70%,var(--color-border));border-radius:var(--radius-md);text-align:center}.wordbook-metric strong{color:var(--color-primary-hover);font-size:var(--font-size-lg);font-variant-numeric:tabular-nums}.wordbook-metric span{color:var(--color-text-muted);font-size:var(--font-size-xs)}.wordbook-current__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-2)}.wordbook-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--space-4);border:1px solid transparent;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);transition:transform var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}.wordbook-action:hover{transform:translateY(-1px)}.wordbook-action:active{transform:translateY(1px) scale(.99)}.wordbook-action--secondary{color:var(--color-text);background-color:var(--color-surface);border-color:var(--color-border)}.wordbook-action--secondary:hover{border-color:var(--color-border-strong);background-color:var(--color-surface-hover)}.wordbook-action--primary{color:var(--color-on-primary);background-color:var(--color-primary);box-shadow:var(--shadow-card)}.wordbook-action--primary:hover{color:var(--color-on-primary);background-color:var(--color-primary-hover)}.wordbook-recommendations{display:flex;flex-direction:column;gap:var(--space-3)}.wordbook-section-heading h2{font-size:var(--font-size-lg)}.wordbook-recommendations__list{display:flex;flex-direction:column;gap:var(--space-3)}.wordbook-recommendation{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);min-height:84px;padding:var(--space-3) var(--space-4);background:linear-gradient(145deg,var(--color-surface) 0%,var(--color-bg-elevated) 100%);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}.wordbook-recommendation:hover{border-color:var(--color-border-focus);box-shadow:var(--shadow-raise);transform:translateY(-2px)}.wordbook-recommendation:active{transform:translateY(1px) scale(.995)}.wordbook-recommendation__mark{display:inline-flex;align-items:center;justify-content:center;position:relative;width:36px;aspect-ratio:3 / 4;border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:4px 7px 7px 4px;box-shadow:inset 3px 0 color-mix(in srgb,currentColor 12%,transparent),var(--shadow-card);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium)}.wordbook-recommendation__mark--yellow{color:var(--warning-500);background-color:var(--warning-100)}.wordbook-recommendation__mark--blue{color:var(--info-500);background-color:var(--info-100)}.wordbook-recommendation__mark--rose{color:var(--danger-500);background-color:var(--danger-100)}.wordbook-recommendation__copy{display:flex;min-width:0;flex-direction:column;gap:var(--space-1)}.wordbook-recommendation__copy strong{overflow:hidden;color:var(--color-text);font-size:var(--font-size-md);text-overflow:ellipsis;white-space:nowrap}.wordbook-recommendation__copy span{overflow:hidden;color:var(--color-text-muted);font-size:var(--font-size-xs);text-overflow:ellipsis;white-space:nowrap}.wordbook-badge{padding:4px var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);white-space:nowrap}.wordbook-badge--blue{color:var(--info-500);background-color:var(--info-100)}.wordbook-badge--green{color:var(--success-500);background-color:var(--success-100)}.wordbook-badge--amber{color:var(--warning-500);background-color:var(--warning-100)}.wordbook-ai-entry{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5);color:var(--color-text-invert);background-color:var(--color-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-raise);transition:transform var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease)}.wordbook-ai-entry:hover{color:var(--color-text-invert);background-color:var(--color-primary-hover);transform:translateY(-2px)}.wordbook-ai-entry:active{transform:translateY(1px) scale(.995)}.wordbook-ai-entry__copy{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.wordbook-ai-entry__copy strong{font-size:var(--font-size-lg)}.wordbook-ai-entry__copy span{color:color-mix(in srgb,var(--color-text-invert) 82%,transparent);font-size:var(--font-size-sm)}.wordbook-ai-entry__action{flex-shrink:0;padding:var(--space-3) var(--space-4);color:var(--color-text-invert);background-color:color-mix(in srgb,var(--color-surface) 20%,transparent);border:1px solid color-mix(in srgb,var(--color-surface) 24%,transparent);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}@media (max-width: 560px){.wordbook-page__intro{align-items:flex-start;flex-direction:column;gap:var(--space-2)}.wordbook-current{padding:var(--space-4)}.wordbook-metric strong{font-size:var(--font-size-md)}.wordbook-recommendation{grid-template-columns:44px minmax(0,1fr) auto;padding:var(--space-3)}.wordbook-ai-entry{align-items:flex-start;flex-direction:column}.wordbook-ai-entry__action{width:100%;text-align:center}}.settings-page__heading{display:flex;align-items:end;justify-content:space-between;gap:var(--space-4)}.page-eyebrow{margin:0 0 var(--space-1);color:var(--color-text-muted);font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase}.settings-page__status{color:var(--color-success);font-size:var(--font-size-sm)}.settings-audio-list{display:grid;gap:var(--space-3)}.settings-audio-row{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(120px,1fr) 48px;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border-subtle)}.settings-audio-row:last-child{border-bottom:0}.settings-audio-row__name{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--font-weight-medium)}.settings-audio-row__range,.settings-field input[type=range]{width:100%;height:28px;margin:0;padding:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.settings-audio-row__range::-webkit-slider-runnable-track,.settings-field input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--radius-full);background:var(--color-surface-muted);border:1px solid var(--color-border)}.settings-audio-row__range::-webkit-slider-thumb,.settings-field input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px;border:2px solid var(--color-surface);border-radius:var(--radius-full);background:var(--color-primary);box-shadow:0 1px 4px color-mix(in srgb,var(--color-primary) 45%,transparent);transition:box-shadow var(--motion-fast) var(--motion-ease);-webkit-appearance:none;-moz-appearance:none;appearance:none}.settings-audio-row__range:hover::-webkit-slider-thumb,.settings-field input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 2px 6px color-mix(in srgb,var(--color-primary) 55%,transparent)}.settings-audio-row__range:active::-webkit-slider-thumb,.settings-field input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--color-primary-soft),0 1px 4px color-mix(in srgb,var(--color-primary) 45%,transparent)}.settings-audio-row__range:focus-visible::-webkit-slider-thumb,.settings-field input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--color-primary-soft)}.settings-audio-row__range::-moz-range-track,.settings-field input[type=range]::-moz-range-track{height:6px;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface-muted)}.settings-audio-row__range::-moz-range-progress,.settings-field input[type=range]::-moz-range-progress{height:6px;border-radius:var(--radius-full);background:var(--color-primary)}.settings-audio-row__range::-moz-range-thumb,.settings-field input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--color-surface);border-radius:var(--radius-full);background:var(--color-primary);box-shadow:0 1px 4px color-mix(in srgb,var(--color-primary) 45%,transparent)}.settings-audio-row__range:disabled,.settings-field input[type=range]:disabled{cursor:not-allowed;opacity:.5}.settings-audio-row__value{color:var(--color-text-muted);font-variant-numeric:tabular-nums;text-align:right}.settings-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle)}.settings-field{display:grid;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-sm)}.settings-field span{display:flex;justify-content:space-between;gap:var(--space-2)}.settings-field output{color:var(--color-text);font-variant-numeric:tabular-nums}.settings-field select{min-height:42px;padding:0 var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.settings-reset{margin-top:var(--space-4);color:var(--color-text-link);font-size:var(--font-size-sm)}.settings-reset:hover{text-decoration:underline}@media (max-width: 560px){.settings-page__heading{align-items:flex-start;flex-direction:column;gap:var(--space-2)}.settings-audio-row{grid-template-columns:minmax(0,1fr) 48px}.settings-audio-row__range{grid-column:1 / -1;grid-row:2}.settings-form-grid{grid-template-columns:1fr}}.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}