:root{
  --bg:#020617;--bg2:#0b1220;--panel:#0f172a;--panel2:#111827;--line:#334155;
  --text:#e5eefc;--muted:#94a3b8;--primary:#22d3ee;--success:#16a34a;--danger:#dc2626;
  --gold:#f59e0b;--violet:#a78bfa;--pink:#fb7185;--green:#34d399;--white:#fff;
  --header-bg: radial-gradient(circle at top, rgba(34,211,238,.12), transparent 28%),
               radial-gradient(circle at bottom, rgba(167,139,250,.10), transparent 24%),
               linear-gradient(180deg,var(--bg),var(--bg2));
  --card-bg: rgba(15,23,42,.94);
  --surface:#091121;
}
body.light{
  --bg:#eaf2ff; --bg2:#dfe8fb; --panel:#ffffff; --panel2:#ffffff; --line:#c9d7ee;
  --text:#0f172a; --muted:#475569; --primary:#0284c7; --success:#15803d; --danger:#b91c1c;
  --header-bg: linear-gradient(180deg,#eef5ff,#dfeeff);
  --card-bg: rgba(255,255,255,.96);
  --surface:#f6faff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);font-family:Arial,Helvetica,sans-serif;background:var(--header-bg);
}
.wrap{max-width:1280px;margin:auto;padding:0 18px}
.site-header{padding:34px 0 20px;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
h1,h2,h3,p,ul,ol{margin:0 0 12px}
h1{font-size:clamp(34px,6vw,64px);line-height:1}
h2{font-size:clamp(24px,3vw,36px)}
.h3{font-size:22px}
.lead{font-size:18px;line-height:1.7;max-width:920px}
.muted{color:var(--muted)}
.mt12{margin-top:12px}.mt14{margin-top:14px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}
.pill{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25);color:#67e8f9;font-size:13px;font-weight:700}
body.light .pill{color:#0369a1}
.gradient{background:linear-gradient(90deg,#67e8f9,#93c5fd,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
button,select,input,label{font:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,.upload-btn:focus-visible{
  outline:3px solid rgba(96,165,250,.85);outline-offset:2px;
}
.tab-btn,.btn,.choice-btn,.upload-btn{
  border:1px solid var(--line);background:#162033;color:var(--text);padding:11px 16px;border-radius:14px;cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
}
body.light .tab-btn, body.light .btn, body.light .choice-btn, body.light .upload-btn{background:#fff}
.tab-btn.active,.btn.primary{background:#fff;color:#07111f;border-color:#fff}
body.light .tab-btn.active, body.light .btn.primary{background:#0f172a;color:#fff;border-color:#0f172a}
.btn.small,.upload-btn{padding:8px 12px;border-radius:10px;font-size:14px}
.btn.good{background:rgba(22,163,74,.14);border-color:rgba(22,163,74,.35);color:#bbf7d0}
.btn.danger{background:rgba(220,38,38,.14);border-color:rgba(220,38,38,.35);color:#fecaca}
.card{
  background:var(--card-bg);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 12px 36px rgba(0,0,0,.14)
}
.inset{background:transparent;box-shadow:none;padding:16px;border-style:dashed}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.span-2{grid-column:span 2}
.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stats-large{grid-template-columns:repeat(4,minmax(0,1fr))}
.mini-stats{margin-top:12px}
.top-stats{margin-top:4px}
.stat{background:var(--surface);border:1px solid var(--line);padding:14px;border-radius:16px;text-align:center}
.stat strong{display:block;font-size:24px;margin-top:6px}
.hidden{display:none!important}
.tab-section{padding:24px 0}
.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.compact-toolbar{align-items:flex-end}
.button-row,.button-col{display:flex;gap:10px;flex-wrap:wrap}
.button-col{flex-direction:column}
.input,.select{
  width:100%;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:14px
}
.compact-select{min-width:160px}
.question-box{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:16px;font-size:clamp(22px,3vw,34px);font-weight:800;margin:14px 0;text-align:center
}
.math-ltr{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:center;
  display:block;
  width:100%;
}
.math-inline{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}
.feedback{padding:14px;border-radius:14px;margin-top:12px}
.feedback.ok{background:rgba(22,163,74,.14);border:1px solid rgba(22,163,74,.35)}
.feedback.bad{background:rgba(220,38,38,.14);border:1px solid rgba(220,38,38,.35)}
.feedback.info{background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.35)}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choice-btn.correct{background:rgba(22,163,74,.22);border-color:rgba(22,163,74,.5)}
.choice-btn.wrong{background:rgba(220,38,38,.22);border-color:rgba(220,38,38,.5)}
.lesson-tag{display:inline-block;padding:6px 10px;border-radius:999px;background:#082f49;color:#a5f3fc;font-size:12px}
body.light .lesson-tag{background:#dbeafe;color:#075985}
.lesson-example{background:var(--surface);border:1px solid var(--line);padding:14px;border-radius:14px;margin:12px 0;font-size:20px;font-weight:800;text-align:center}
.pizza-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pizza{width:124px;height:124px;border-radius:50%;position:relative;overflow:hidden;border:5px solid #fde68a;background:#fef3c7}
canvas{width:100%;height:320px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.ach{padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.ach.unlocked{background:rgba(22,163,74,.14);border-color:rgba(22,163,74,.35)}
.footer{padding:32px 0 42px;color:var(--muted);text-align:center}
.progress{height:12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);overflow:hidden;margin:12px 0 14px}
.progress > div{height:100%;background:linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa);width:0}
.compact-grid{align-items:end}
.mission-box{max-width:360px;background:var(--surface);border:1px solid var(--line);padding:12px 14px;border-radius:16px}
.title-md{font-size:20px;font-weight:800;margin-bottom:6px}
.activity-list{display:grid;gap:10px}
.activity-item{padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.memory-btn{height:84px;font-size:28px}
.memory-btn.active-flash{box-shadow:0 0 0 3px rgba(96,165,250,.55) inset;background:#1d4ed8;color:#fff}
.lesson-done{opacity:.92}
.lesson-done .lesson-tag{background:rgba(22,163,74,.18);color:#bbf7d0}
.lesson-done-btn{pointer-events:none;opacity:.8}
.top-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.nice-list{padding-right:18px;line-height:1.9}
code{background:var(--surface);padding:2px 8px;border-radius:8px}
@media (max-width:980px){
  .hero,.grid-3,.grid-2,.stats-row,.stats-large{grid-template-columns:1fr}
  .span-2{grid-column:auto}
}
@media (max-width:700px){
  .choices{grid-template-columns:1fr}
  .compact-select{min-width:unset;width:100%}
  .stack-sm-mobile{align-items:stretch}
  .button-row{width:100%}
  .btn,.upload-btn,.tab-btn{min-height:44px}
}
.compare-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:88px}
.compare-symbol{font-size:24px;font-weight:900;line-height:1}
.compare-text{font-size:12px;color:var(--muted);line-height:1.1}
body.light .compare-text{color:#334155}


.compare-ultra-card{overflow:hidden}
.compare-header-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.timer-wrap{margin:10px 0 18px}
.timer-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;color:var(--muted)}
.timer-bar{height:14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
#compareTimerBar{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#eab308,#ef4444);transition:width .18s linear}
.compare-stage{display:grid;grid-template-columns:1fr 130px 1fr;align-items:center;gap:16px;margin:18px 0}
.compare-number{font-size:56px;font-weight:900;text-align:center;direction:ltr}
.compare-caption{font-size:18px}
.compare-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;direction:ltr}
.compare-btn{min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.compare-symbol{font-size:34px;font-weight:900;line-height:1}
.compare-text{font-size:16px;font-weight:800}
.compare-footnote{margin-top:10px;text-align:center}
.croc-wrap{display:flex;justify-content:center;align-items:center;min-height:120px}
.crocodile{position:relative;width:94px;height:94px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.25));transition:transform .25s ease}
.crocodile .jaw{position:absolute;left:10px;width:74px;height:34px;background:linear-gradient(135deg,#22c55e,#15803d);border-radius:12px}
.crocodile .jaw.top{top:12px;transform-origin:left center;clip-path:polygon(0 50%,100% 0,100% 100%)}
.crocodile .jaw.bottom{bottom:12px;transform-origin:left center;clip-path:polygon(0 50%,100% 0,100% 100%)}
.crocodile .eye{position:absolute;left:22px;top:18px;width:10px;height:10px;background:#fff;border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.15) inset}
.crocodile.neutral .top{transform:rotate(-12deg)}
.crocodile.neutral .bottom{transform:rotate(12deg)}
.crocodile.left{transform:scaleX(-1)}
.crocodile.left .top{transform:rotate(-30deg)}
.crocodile.left .bottom{transform:rotate(30deg)}
.crocodile.right .top{transform:rotate(-30deg)}
.crocodile.right .bottom{transform:rotate(30deg)}
.crocodile.equal .top{transform:rotate(-4deg)}
.crocodile.equal .bottom{transform:rotate(4deg)}
.crocodile.chomp{animation:chomp .45s ease 2}
@keyframes chomp{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:720px){
  .compare-header-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compare-stage{grid-template-columns:1fr;gap:10px}
  .compare-number{font-size:44px}
  .compare-buttons{grid-template-columns:1fr}
}