:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#22c55e;
  --accent-2:#2563eb;
  --a:#3b82f6;
  --b:#f59e0b;
  --rest:#ef4444;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto;
  color:var(--text); background:radial-gradient(1200px circle at 20% -20%, #fff 0, var(--bg) 60%), var(--bg);
}
.container{max-width:960px; margin:0 auto; padding:24px}
.site-header{padding:24px 24px 0; display:flex; flex-direction:column; align-items:center}
.site-header h1{margin:0; font-size:30px; background:linear-gradient(90deg,#fb7185,#f59e0b,#22c55e,#3b82f6); -webkit-background-clip:text; background-clip:text; color:transparent}
.subtitle{margin:4px 0 0; color:var(--muted)}
.top-nav{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.top-nav a{display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:#ffffff; color:var(--accent-2); text-decoration:none; box-shadow:0 4px 10px rgba(31,41,55,.06); transition:transform .08s ease, box-shadow .2s, border-color .2s}
.top-nav a:hover{border-color:#93c5fd; box-shadow:0 6px 16px rgba(37,99,235,.18)}
.top-nav a:active{transform:scale(.98)}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; margin:20px 0; box-shadow:0 10px 24px rgba(31,41,55,.08)}
.concepts{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.pairs summary{cursor:pointer}
.pairs-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:10px}
.pairs-grid span{background:#f9fafb; border:1px solid var(--border); border-radius:8px; padding:6px 8px; text-align:center}

.inputs{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.inputs input,.inputs select{padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:#ffffff; color:var(--text); transition:border-color .2s, box-shadow .2s}
.inputs input:focus,.inputs select:focus{outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,.35)}
.inputs button{padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:#ffffff; color:var(--text); cursor:pointer; transition:transform .08s ease, box-shadow .2s, border-color .2s}
.inputs button:hover{border-color:#93c5fd; box-shadow:0 6px 16px rgba(37,99,235,.18)}
.inputs button:active{transform:scale(.98)}

.info-chips{margin-top:8px; display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#ffffff; box-shadow:0 4px 10px rgba(31,41,55,.06); font-size:14px}
.chip.need b{color:var(--accent-2)}
.chip.used b{color:var(--b)}
.chip.rest b{color:var(--rest)}

.tenframe-wrap{display:flex; gap:24px; align-items:flex-start; margin-top:12px}
.tenframe{display:grid; grid-template-columns:repeat(5,38px); grid-template-rows:repeat(2,38px); gap:10px; padding:14px; background:#ffffff; border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 20px rgba(31,41,55,.08)}
.cell{width:38px; height:38px; border-radius:50%; border:1px dashed var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; color:#64748b; background:#f9fafb; opacity:.35; transform:scale(.92); transition:transform .25s cubic-bezier(.2,.7,.2,1), opacity .25s, box-shadow .25s}
.cell.filled.a{background:var(--a); border-color:var(--a); color:white}
.cell.filled.b{background:var(--b); border-color:var(--b); color:white}
.cell.filled.rest{background:var(--rest); border-color:var(--rest); color:white}
.cell.filled{opacity:1; transform:scale(1); box-shadow:0 4px 10px rgba(0,0,0,.12)}
.cell.highlight{box-shadow:0 0 0 3px rgba(59,130,246,.35), 0 4px 10px rgba(0,0,0,.12)}
.legend .dot{display:inline-block; padding:4px 8px; border-radius:999px; margin-right:8px; font-size:12px}
.legend .dot.a{background:var(--a); color:#002e3b}
.legend .dot.b{background:var(--b); color:#3d2800}
.legend .dot.rest{background:var(--rest); color:#3d0000}

.steps{margin-top:12px; display:grid; gap:8px}
.step{background:#ffffff; border:1px solid var(--border); border-radius:10px; padding:10px; box-shadow:0 6px 14px rgba(31,41,55,.06); animation:fadeSlideIn .4s ease both}
.step strong{color:var(--accent)}

.caption{margin-top:12px; background:#ffffff; border:1px solid var(--border); border-radius:10px; padding:10px; box-shadow:0 6px 14px rgba(31,41,55,.06)}

.practice .num{display:inline-block; min-width:36px; text-align:center; font-weight:700}
.practice .plus,.practice .eq{margin:0 8px}
.ans{width:90px}
.feedback{margin-top:8px; color:var(--accent)}
.feedback.err{color:#f87171; animation:shake .4s linear}
.hint summary{cursor:pointer}
.hint-text{margin-top:8px; color:var(--muted)}

.site-footer{padding:8px 0; text-align:center; color:var(--muted)}
.site-footer a{color:inherit; text-decoration:none}

@media (max-width:720px){
  .concepts{grid-template-columns:1fr}
}

/* Fun & subtle animations */
@keyframes fadeSlideIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
@keyframes pulse{0%{transform:scale(1)} 50%{transform:scale(1.03)} 100%{transform:scale(1)}}
.tenframe.pulse{animation:pulse .45s ease}
@keyframes shake{0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)}}

/* Confetti */
.conf{position:fixed; top:-16px; left:var(--left,50%); z-index:9999; font-size:20px; animation:fallDown 1.4s ease-in forwards; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
@keyframes fallDown{to{transform:translateY(110vh) rotate(360deg); opacity:.9}}
/* Brand & Logo */
.brand{display:flex; align-items:center; gap:12px}
.brand-text{display:flex; flex-direction:column}
.logo{width:44px; height:44px; flex:0 0 auto; filter:drop-shadow(0 3px 6px rgba(31,41,55,.15)); transition:transform .25s ease}
.logo:hover{transform:rotate(-6deg) scale(1.03)}