.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:var(--r-md);padding:10px 18px;font-weight:700;font-size:15px;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);-webkit-user-select:none;user-select:none;white-space:nowrap}.btn:hover{transform:translateY(-1px);border-color:var(--border-strong)}.btn:active{transform:translateY(0) scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn--primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--accent-2)));border-color:transparent;color:#fff;box-shadow:var(--shadow-glow),var(--shadow-1)}.btn--primary:hover{box-shadow:0 0 50px -6px var(--glow),var(--shadow-2)}.btn--ghost{background:transparent}.btn--icon{padding:10px;width:42px;height:42px;border-radius:var(--r-md)}.btn--lg{padding:14px 26px;font-size:16px;border-radius:var(--r-lg)}.btn--block{width:100%}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:var(--shadow-1)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:var(--shadow-1)}.panel__title{display:flex;align-items:center;gap:var(--sp-2);font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--text-muted);margin-bottom:var(--sp-4);text-transform:none}.panel__title:before{content:"";width:6px;height:18px;border-radius:var(--r-full);background:linear-gradient(var(--accent),var(--accent-2))}.slider{display:block}.slider__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp-2);gap:var(--sp-3)}.slider__label{font-size:14px;font-weight:700;color:var(--text)}.slider__value{font-size:14px;font-weight:800;color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent-2) 25%,transparent);border-radius:var(--r-sm);padding:2px 10px}.slider__value small{color:var(--text-faint);font-weight:700;margin-inline-start:3px}.slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);outline:none;cursor:pointer}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));border:3px solid var(--surface-solid);box-shadow:var(--shadow-glow),var(--shadow-1);transition:transform var(--dur) var(--ease)}.slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));border:3px solid var(--surface-solid);box-shadow:var(--shadow-glow)}.stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden;transition:border-color var(--dur) var(--ease)}.stat:after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--stat-accent, var(--accent));opacity:.9}.stat__label{font-size:12px;color:var(--text-muted);font-weight:700}.stat__value{font-size:22px;font-weight:800;color:var(--text);line-height:1.2}.stat__unit{font-size:13px;color:var(--text-faint);font-weight:700;margin-inline-start:4px}.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted)}.segmented{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:4px;gap:4px}.segmented button{border:none;background:transparent;color:var(--text-muted);font-weight:700;font-size:14px;padding:7px 16px;border-radius:10px;transition:all var(--dur) var(--ease)}.segmented button[data-active=true]{background:var(--elevated);color:var(--text);box-shadow:var(--shadow-1)}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) clamp(var(--sp-4),4vw,var(--sp-7));background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:var(--sp-3);font-weight:800}.brand__logo{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow-glow);flex-shrink:0}.brand__text{display:flex;flex-direction:column;line-height:1.15}.brand__text b{font-size:16px}.brand__text span{font-size:12px;color:var(--text-muted);font-weight:700}.topbar__actions{display:flex;align-items:center;gap:var(--sp-2)}.container{width:100%;max-width:1280px;margin:0 auto;padding:clamp(var(--sp-5),4vw,var(--sp-7)) clamp(var(--sp-4),4vw,var(--sp-7))}.hero{text-align:center;padding:clamp(var(--sp-6),6vw,var(--sp-8)) 0 var(--sp-6)}.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);padding:6px 14px;border-radius:var(--r-full);margin-bottom:var(--sp-4)}.hero__dot{width:8px;height:8px;border-radius:50%;background:var(--accent-green);box-shadow:0 0 10px var(--accent-green)}.hero h1{font-size:clamp(30px,5vw,52px);font-weight:800;line-height:1.15;letter-spacing:-.01em;margin-bottom:var(--sp-3)}.hero h1 .grad{background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero p{font-size:clamp(15px,2vw,19px);color:var(--text-muted);max-width:640px;margin:0 auto}.section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin:var(--sp-6) 0 var(--sp-4)}.section-head h2{font-size:22px;font-weight:800}.section-head .count{color:var(--text-faint);font-weight:700;font-size:14px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-4)}.gcard{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);overflow:hidden;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.gcard:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(340px 180px at 90% 0%,var(--card-glow),transparent 70%);opacity:.6;pointer-events:none;transition:opacity var(--dur) var(--ease)}.gcard:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow-2)}.gcard:hover:before{opacity:1}.gcard--soon{opacity:.62}.gcard__icon{width:54px;height:54px;border-radius:var(--r-md);display:grid;place-items:center;font-size:28px;background:var(--card-icon-bg);border:1px solid var(--border);position:relative;z-index:1}.gcard__title{font-size:19px;font-weight:800;position:relative;z-index:1}.gcard__sub{font-size:14px;color:var(--text-muted);position:relative;z-index:1;flex:1}.gcard__meta{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}.gcard__footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-2);position:relative;z-index:1}.gcard__lesson{font-size:12px;font-weight:800;color:var(--text-faint)}.gcard__cta{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;color:var(--card-accent, var(--accent))}.soon-tag{position:absolute;inset-inline-end:var(--sp-4);top:var(--sp-4);font-size:11px;font-weight:800;padding:4px 10px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);z-index:2}.footer{margin-top:auto;padding:var(--sp-6);text-align:center;color:var(--text-faint);font-size:13px;border-top:1px solid var(--border)}.gamepage{display:flex;flex-direction:column;min-height:100vh}.gamepage__head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}.gamepage__title h1{font-size:clamp(22px,3vw,30px);font-weight:800}.gamepage__title p{color:var(--text-muted);font-size:14px}.back-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--text-muted);padding:8px 14px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-2);transition:all var(--dur) var(--ease)}.back-link:hover{color:var(--text);border-color:var(--border-strong)}.notfound{display:grid;place-items:center;gap:var(--sp-4);min-height:60vh;text-align:center}:root{--r-sm: 10px;--r-md: 14px;--r-lg: 20px;--r-xl: 28px;--r-full: 999px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--sp-8: 64px;--font: "Almarai", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;--ease: cubic-bezier(.22, 1, .36, 1);--dur: .22s;--accent: #7c5cff;--accent-2: #22d3ee;--accent-warm: #f59e0b;--accent-rose: #fb7185;--accent-green: #34d399}:root,:root[data-theme=dark]{color-scheme:dark;--bg: #0b1020;--bg-deep: #070b16;--surface: rgba(22, 28, 48, .72);--surface-solid: #141a2e;--surface-2: rgba(34, 42, 68, .6);--elevated: rgba(30, 38, 64, .9);--border: rgba(140, 160, 210, .14);--border-strong: rgba(150, 170, 220, .28);--text: #eef1fb;--text-muted: #a9b2cf;--text-faint: #6b7699;--glow: rgba(124, 92, 255, .45);--shadow-1: 0 2px 8px rgba(0, 0, 0, .3);--shadow-2: 0 12px 40px rgba(0, 0, 0, .45);--shadow-glow: 0 0 40px -8px var(--glow);--grid-line: rgba(140, 160, 210, .08);--app-gradient: radial-gradient(1200px 700px at 85% -10%, rgba(124, 92, 255, .18), transparent 60%), radial-gradient(1000px 600px at 5% 0%, rgba(34, 211, 238, .12), transparent 55%), linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%)}:root[data-theme=light]{color-scheme:light;--bg: #f5f7fe;--bg-deep: #eaeefb;--surface: rgba(255, 255, 255, .82);--surface-solid: #ffffff;--surface-2: rgba(240, 243, 253, .9);--elevated: rgba(255, 255, 255, .95);--border: rgba(30, 45, 90, .1);--border-strong: rgba(30, 45, 90, .2);--text: #141a2e;--text-muted: #4b5573;--text-faint: #8b94b0;--glow: rgba(124, 92, 255, .3);--shadow-1: 0 2px 8px rgba(30, 45, 90, .08);--shadow-2: 0 16px 48px rgba(30, 45, 90, .14);--shadow-glow: 0 0 40px -10px var(--glow);--grid-line: rgba(30, 45, 90, .06);--app-gradient: radial-gradient(1200px 700px at 85% -10%, rgba(124, 92, 255, .14), transparent 60%), radial-gradient(1000px 600px at 5% 0%, rgba(34, 211, 238, .12), transparent 55%), linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%)}.game-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-4);align-items:start}@media (max-width: 900px){.game-grid{grid-template-columns:minmax(0,1fr)}}.game-stage-wrap{display:flex;flex-direction:column;gap:var(--sp-4)}.game-stage{position:relative;aspect-ratio:16 / 10;min-height:320px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-2)}.game-stage>canvas{position:absolute;top:0;right:0;bottom:0;left:0}.game-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}@media (max-width: 560px){.game-stats{grid-template-columns:repeat(2,1fr)}}.game-controls{display:flex;flex-direction:column;gap:var(--sp-4)}.game-sliders{display:flex;flex-direction:column;gap:var(--sp-5)}.game-actions{display:flex;gap:var(--sp-2)}.game-toggles{display:flex;flex-direction:column;gap:var(--sp-3)}.game-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-size:14px;font-weight:700}.game-hint{font-size:13px;line-height:1.7;color:var(--text-muted)}.game-hint b{color:var(--text)}.game-formula{direction:ltr;text-align:center;font-family:"Cambria Math",Georgia,serif;font-size:15px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px;margin-top:var(--sp-2);color:var(--text)}.game-badge-tl{position:absolute;top:var(--sp-3);inset-inline-start:var(--sp-3);z-index:3;display:flex;gap:var(--sp-2)}.game-chip{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border)}.game-chip b{font-size:17px;font-weight:800;line-height:1}.game-chip span{font-size:11px;color:var(--text-muted);font-weight:700}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html,body,#root{height:100%}html{-webkit-text-size-adjust:100%}body{font-family:var(--font);background:var(--bg-deep);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}#root{min-height:100%;background:var(--app-gradient);background-attachment:fixed}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}input,button,textarea,select{font:inherit;color:inherit}::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full);border:2px solid transparent;background-clip:content-box}.glass{background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}