:root{
  --bg:#f4f5f9; --card:#fff; --ink:#1b1f3a; --muted:#69708a; --line:#e2e5ee;
  --accent:#2457d6; --accent-soft:#e8eefc; --ok:#18925a; --ok-soft:#e3f5ec; --bad:#d62f2f; --bad-soft:#fdeaea;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:120px}
html.ink-all, html.ink-all body{touch-action:none; overscroll-behavior:none}
body{margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg);
  -webkit-text-size-adjust:100%; padding-bottom:110px}
code,pre,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code{background:#eef0f6; padding:1px 5px; border-radius:5px; font-size:.92em}
pre{background:#1b1f3a; color:#e8ebff; padding:12px 14px; border-radius:10px; overflow-x:auto; font-size:.88em}

.top{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top-inner{max-width:980px; margin:0 auto; padding:10px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px}
.brand{font-weight:800; font-size:1.15rem; display:flex; align-items:center; gap:8px}
.brand small{font-weight:500; color:var(--muted); font-size:.8rem}
.logo{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--accent); color:#fff}
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tabs button{border:0; background:transparent; padding:8px 12px; border-radius:10px; font:inherit; font-weight:600; color:var(--muted); cursor:pointer}
.tabs button.active{background:var(--accent-soft); color:var(--accent)}

.wrap{max-width:980px; margin:0 auto; padding:16px; position:relative}
.tab{display:none}
.tab.active{display:block}
.card{background:var(--card); border-radius:var(--radius); padding:18px 20px; margin:0 0 16px; box-shadow:0 1px 2px rgba(20,30,70,.06),0 4px 16px rgba(20,30,70,.05)}
.card h2{margin:0 0 10px; font-size:1.25rem}
.card h3{margin:14px 0 6px}
table{border-collapse:collapse; width:100%; margin:8px 0 12px; font-size:.95em}
th,td{border-bottom:1px solid var(--line); padding:7px 8px; text-align:left; vertical-align:top}
th{background:#f7f8fc; font-weight:700}
.scroll-x{overflow-x:auto}
.colors i{display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:8px; border:1px solid #ccd; vertical-align:-2px}
.mix div{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:6px 0}
.mix b{width:44px}
.sw{padding:4px 10px; border-radius:8px; font-size:.9em; font-weight:600; color:#000}
.sw.light{color:#fff}
.formula{background:var(--accent-soft); color:#173a92; padding:8px 12px; border-radius:10px; font-weight:700; display:inline-block}
.formula-inline{background:var(--accent-soft); padding:1px 6px; border-radius:6px; font-weight:700}
.rule{background:#fff8e1; border-left:4px solid #f0b400; padding:8px 12px; border-radius:8px}
.warn{background:var(--bad-soft); border-left:4px solid var(--bad); padding:8px 12px; border-radius:8px}
.hint{background:var(--accent-soft); border-radius:var(--radius); padding:12px 14px; margin-bottom:14px; position:relative; padding-right:60px}
.hint .x{position:absolute; right:10px; top:10px; border:0; background:var(--accent); color:#fff; border-radius:8px; padding:4px 10px; font-weight:700; cursor:pointer}
.toc{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px}
.toc a{background:#fff; border:1px solid var(--line); color:var(--ink); text-decoration:none; padding:4px 10px; border-radius:999px; font-size:.85rem}
.small{font-size:.88rem} .muted{color:var(--muted)}
table.mono td{font-family:ui-monospace,Menlo,Consolas,monospace}
table.mono u{text-decoration:none; background:#ffe48a; padding:0 2px}

.btn{border:0; background:var(--accent); color:#fff; font:inherit; font-weight:700; padding:10px 16px; border-radius:10px; cursor:pointer}
.btn.ghost{background:#fff; color:var(--accent); border:1px solid #c9d5f5}
.btn.ok{background:var(--ok)}
.btn:disabled{opacity:.5}
.row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px}
.spacer{flex:1}
.quizbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.chips.inline{margin:0}
.chips button{border:1px solid var(--line); background:#fff; padding:7px 12px; border-radius:999px; font:inherit; font-size:.9rem; cursor:pointer; color:var(--ink)}
.chips button.active{background:var(--accent); color:#fff; border-color:var(--accent)}

.q-prompt{font-size:1.15rem; font-weight:700; margin:4px 0 14px}
.opts{display:grid; gap:8px}
.opt{text-align:left; border:2px solid var(--line); background:#fff; padding:12px 14px; border-radius:12px; font:inherit; cursor:pointer; color:var(--ink)}
.opt:hover{border-color:#b9c7ef}
.opt.correct{border-color:var(--ok); background:var(--ok-soft)}
.opt.wrong{border-color:var(--bad); background:var(--bad-soft)}
.feedback{margin-top:12px; padding:10px 12px; border-radius:10px}
.feedback.ok{background:var(--ok-soft)} .feedback.bad{background:var(--bad-soft)}

.ex-prompt{font-size:1.05rem}
.ex-prompt .big{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.35rem; font-weight:700; letter-spacing:.06em; background:#f3f5fb; padding:6px 10px; border-radius:8px; display:inline-block; word-break:break-all}
.fields{display:grid; gap:10px; margin-top:12px}
.field label{display:block; font-weight:600; font-size:.9rem; margin-bottom:4px}
.field input{width:100%; max-width:420px; font:inherit; font-size:1.05rem; padding:10px 12px; border:2px solid var(--line); border-radius:10px; font-family:ui-monospace,Menlo,Consolas,monospace}
.field input:focus{outline:none; border-color:var(--accent)}
.field input.ok{border-color:var(--ok); background:var(--ok-soft)}
.field input.bad{border-color:var(--bad); background:var(--bad-soft)}
.codes{display:flex; flex-wrap:wrap; gap:10px}
.codes .field input{width:120px}
.solution{margin-top:14px; border-top:1px dashed var(--line); padding-top:12px}
.solution table{max-width:560px}
.tree{overflow-x:auto}
.tree svg{display:block; margin:6px 0}
.score{font-weight:700}

.paper{height:3200px; background-color:#fff; border-radius:var(--radius);
  background-image:linear-gradient(#e7ebf5 1px,transparent 1px),linear-gradient(90deg,#e7ebf5 1px,transparent 1px);
  background-size:28px 28px; box-shadow:0 1px 2px rgba(20,30,70,.06)}

/* Stift */
#ink{position:fixed; left:0; top:0; width:100vw; height:100vh; pointer-events:none; z-index:30}
html.ink-all #ink{cursor:crosshair}
.inkbar{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom)); z-index:40;
  display:flex; align-items:center; gap:4px; background:#fff; border-radius:16px; padding:6px; box-shadow:0 6px 24px rgba(20,30,70,.18); max-width:calc(100vw - 16px); overflow-x:auto}
.ink-tools{display:flex; gap:4px; align-items:center}
.inkbar.off .ink-tools{display:none}
.ib{flex:0 0 auto; width:42px; height:42px; border:0; border-radius:11px; background:transparent; font-size:1.15rem; cursor:pointer; display:grid; place-items:center; color:var(--ink); touch-action:manipulation}
.ib.active{background:var(--accent-soft); outline:2px solid var(--accent)}
.ib.on{background:var(--accent); }
.inkbar.off .ib.on{background:#eef0f6; opacity:.7}
.ib.sw::after{content:""; width:20px; height:20px; border-radius:50%; background:var(--c)}
.ib.size{font-size:1.4rem; line-height:1}
.toast{position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:#1b1f3a; color:#fff; padding:8px 14px; border-radius:10px; font-size:.9rem; opacity:0; transition:opacity .2s; z-index:50; pointer-events:none}
.toast.show{opacity:1}
@media (max-width:600px){
  .card{padding:14px} th,td{padding:6px 5px} .ib{width:38px; height:38px}
  .brand small{display:none}
}
@media print{.inkbar,.top,.toast{display:none} #ink{display:none}}