/* =========================================================
   ОйLA! — interactive task blocks
   ========================================================= */
.blk { position: relative; display: grid; gap: .6em; }
.blk-label { font-family: var(--font-display); font-weight: 700; font-size: .98em; color: var(--navy); display: flex; align-items: center; gap: .5em; }
.blk-label::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--sc, var(--blue)); flex: none; }
.blk.is-ok > .blk-label::after { content: "✓"; color: var(--green); font-weight: 900; }
.m-help { font-size: .76em; color: var(--muted); font-weight: 600; margin-bottom: .2em; }
.blk-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5em; }
.blk-foot .btn { font-size: .82em; }
.blk.shake { animation: shake .45s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

.fb { display: none; }
.fb.show { display: flex; align-items: flex-start; gap: .6em; padding: .7em .9em; border-radius: .9em; font-size: .9em; line-height: 1.45; animation: popIn .3s var(--ease) both; flex-wrap: wrap; }
.fb .i { width: 1.3em; height: 1.3em; flex: none; margin-top: .05em; }
.fb > span { flex: 1; min-width: 0; }
.fb.ok { background: var(--green-soft); color: #0E6B44; }
.fb.bad { background: #FFF4E5; color: #8A4B00; }
.fb-explain { width: 100%; margin-left: 1.9em; padding-top: .3em; border-top: 1px dashed rgba(14,107,68,.25); font-family: var(--font-read); color: #1F5A3D; }

.burst { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 5; }
.burst i { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: burst .8s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes burst { from { transform: translate(0,0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.4) rotate(220deg); opacity: 0; } }

/* hints */
.hint-btn { gap: .4em; padding-left: .5em; }
.hint-btn .hint-oi { width: 1.9em; height: 1.9em; margin: -.3em 0; }
.hint-bubble { display: flex; gap: .7em; align-items: flex-start; background: var(--sky-3); border-radius: 1.1em; padding: .8em .9em; box-shadow: inset 0 0 0 1.5px var(--sky); }
.hint-bubble.bump { animation: popIn .35s var(--ease) both; }
.hint-mascot { width: 3.2em; height: 3.2em; flex: none; }
.hint-text p { margin: .15em 0 .3em; line-height: 1.5; font-size: .92em; }
.hint-kicker { font-size: .68em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }

/* teacher marks */
.t-marks { display: flex; flex-wrap: wrap; gap: .4em; }
.t-mark { font-size: .72em; font-weight: 800; padding: .25em .6em; border-radius: 999px; }
.t-mark.ok { background: var(--green-soft); color: #13834F; }
.t-mark.bad { background: var(--coral-soft); color: #B4382B; }
.t-mark.hint { background: var(--sky-2); color: var(--blue-2); }

/* notes */
.note { display: flex; gap: .6em; padding: .7em .9em; border-radius: .9em; background: var(--sky-3); color: var(--ink-2); font-size: .88em; line-height: 1.5; }
.note .i { width: 1.3em; height: 1.3em; flex: none; color: var(--blue); margin-top: .1em; }
.note-fix { background: #FFF7DD; color: #6A4A00; box-shadow: inset 0 0 0 1.5px #FFE29A; }
.note-fix .i { color: var(--yellow-2); }

/* ---------- reading ---------- */
.reading { background: linear-gradient(180deg, #FFFDF6, #FFFBF0); border-radius: 1.1em; padding: 1em 1.15em 1.1em; box-shadow: inset 0 0 0 1.5px #F1E8D2, 0 6px 16px -12px rgba(120,90,30,.4); position: relative; }
.reading-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .7em; margin-bottom: .5em; }
.reading-kicker { width: 100%; font-size: .66em; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #B08A3A; }
.reading-title { font-family: var(--font-read); font-weight: 600; font-size: 1.25em; color: var(--navy); margin: 0; }
.badge-added { font-size: .66em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A5A00; background: var(--yellow-soft); padding: .3em .6em; border-radius: 999px; cursor: help; }
.reading-body p { font-family: var(--font-read); font-size: 1.04em; line-height: 1.75; margin: 0 0 .5em; text-indent: 1.4em; color: #23304F; }
.reading-body p:first-child { text-indent: 0; }
.reading-body p:first-child::first-letter { font-size: 2.6em; float: left; line-height: .9; padding: .06em .1em 0 0; font-weight: 600; color: var(--accent); }
.reading-body p:last-child { margin-bottom: 0; }
.w { font: inherit; color: inherit; border: 0; background: transparent; padding: 0 .08em; margin: 0 -.08em; border-radius: .25em; cursor: pointer; line-height: inherit; transition: background .15s; text-indent: 0; }
.w:not([disabled]):hover { background: rgba(30,107,255,.08); }
.w.tagged { background: var(--tag); box-shadow: 0 0 0 1px rgba(0,0,0,.04); }
.w.bad { outline: 2px dashed var(--coral); outline-offset: 1px; }
.w[disabled] { cursor: default; }
.tag-palette { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.tp-label { width: 100%; font-weight: 700; font-size: .86em; color: var(--ink-2); }
.tp-chip { border: 0; border-radius: 999px; padding: .4em .8em; font-weight: 700; font-size: .82em; background: color-mix(in srgb, var(--tag) 55%, #fff); color: var(--ink); box-shadow: inset 0 0 0 1.5px transparent; }
.tp-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--navy); background: var(--tag); }
.tp-chip.static { cursor: default; }
.tp-chip.erase { background: #F1F4FA; color: var(--muted); }
.tp-chip.syn { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.tp-chip.syn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--kaz); background: var(--kaz-soft); }

/* syntax underline conventions (Kazakh school): бастауыш ‒, баяндауыш =, анықтауыш ~, толықтауыш - - -, пысықтауыш -·-· */
.u-bas, .u-bayan, .u-anyq, .u-tolyq, .u-pysyq { --u: var(--kaz); }
.w.u-bas, .tp-chip.u-bas .tp-sample { text-decoration: underline solid var(--u); text-decoration-thickness: 2px; text-underline-offset: .28em; }
.w.u-bayan, .tp-chip.u-bayan .tp-sample { text-decoration: underline double var(--u); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.w.u-anyq, .tp-chip.u-anyq .tp-sample { text-decoration: underline wavy var(--u); text-decoration-thickness: 1.5px; text-underline-offset: .28em; }
.w.u-tolyq, .tp-chip.u-tolyq .tp-sample { text-decoration: underline dashed var(--u); text-decoration-thickness: 2px; text-underline-offset: .28em; }
.w.u-pysyq, .tp-chip.u-pysyq .tp-sample { text-decoration: none; background-image: linear-gradient(90deg, var(--u) 0 7px, transparent 7px 10px, var(--u) 10px 12px, transparent 12px 15px); background-size: 15px 2px; background-repeat: repeat-x; background-position: 0 100%; padding-bottom: .12em; }
.w.tagged[class*="u-"] { background-color: var(--kaz-soft); }
.tagger { display: grid; gap: .6em; }
.tg-instr { font-weight: 700; font-size: .88em; color: var(--ink-2); }
.tg-sources { display: grid; gap: .35em; }
.src { text-align: left; border: 0; border-radius: .8em; padding: .55em .8em; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); font-family: var(--font-read); font-size: .95em; line-height: 1.45; }
.src[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--kaz); background: var(--kaz-soft); }
.tg-hint, .tg-empty { font-size: .82em; color: var(--muted); }
.tg-sentence { font-family: var(--font-read); font-size: 1.12em; line-height: 2.1; padding: .7em .9em; border-radius: .9em; background: #FFFDF6; box-shadow: inset 0 0 0 1.5px #F1E8D2; min-height: 3em; }
.syn-legend { display: flex; flex-wrap: wrap; gap: .3em 1em; font-size: .78em; color: var(--muted); font-weight: 600; }
.syn-legend .w { cursor: default; font-family: var(--font-read); color: var(--ink); }

/* ---------- writing ---------- */
.textarea.lined, .lined-input {
  font-family: var(--font-read); font-size: 1.02em; color: #1B2850;
}
.textarea.lined {
  line-height: 2em; padding: .2em .9em .5em; background-color: #fff;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(2em - 1px), #DCE7F7 calc(2em - 1px) 2em);
  background-position: 0 .2em; background-attachment: local; min-height: 6.4em; overflow: hidden;
}
.textarea.small { min-height: 3.2em; font-size: .95em; }
.lined-input { border: 0; border-bottom: 1.5px solid #CFDCF0; border-radius: 0; background: transparent; padding: .45em .2em; }
.lined-input:focus { box-shadow: none; border-bottom-color: var(--blue); background: linear-gradient(180deg, transparent 60%, rgba(30,107,255,.05)); }
.write-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
.counter { font-size: .78em; font-weight: 800; padding: .25em .65em; border-radius: 999px; background: #F1F4FA; color: var(--muted); }
.counter.done { background: var(--green-soft); color: #13834F; }
.must-use { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; }
.mu-label { font-size: .76em; font-weight: 700; color: var(--muted); }
.mu { font-size: .78em; font-weight: 700; padding: .22em .6em; border-radius: 999px; background: #F1F4FA; color: var(--ink-2); transition: all .2s var(--ease); }
.mu.on { background: var(--green); color: #fff; }
.mu.on::before { content: "✓ "; }
.sent-list, .num-list { margin: 0; padding-left: 1.6em; display: grid; gap: .25em; }
.sent-list li::marker, .num-list li::marker { font-family: var(--font-display); font-weight: 800; color: var(--sc, var(--blue)); }
.checklist { display: grid; gap: .3em; padding: .7em .9em; border-radius: .9em; background: #F8FAFE; }
.cl-title { font-size: .76em; font-weight: 800; color: var(--muted); letter-spacing: .06em; }
.cl-item { display: flex; gap: .5em; align-items: center; font-size: .88em; cursor: pointer; }
.cl-item input { width: 1.1em; height: 1.1em; accent-color: var(--green); }
.fields { display: grid; gap: .55em; }
.fld { display: grid; grid-template-columns: auto 1fr; gap: .2em .6em; align-items: center; }
.fld-n { width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: var(--sc-soft, var(--sky-2)); color: var(--sc, var(--blue)); font-weight: 800; font-size: .8em; }
.fld-l { font-weight: 700; font-size: .9em; color: var(--navy); }
.fld .textarea { grid-column: 1 / -1; }

/* ---------- math ---------- */
.math { display: grid; gap: .6em; background: #F7FBFF; border-radius: 1em; padding: .9em; box-shadow: inset 0 0 0 1.5px #E0EEFB;
  background-image: linear-gradient(rgba(14,155,232,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14,155,232,.06) 1px, transparent 1px); background-size: 1.2em 1.2em; }
.m-row { display: grid; grid-template-columns: 6.2em 1fr; align-items: center; gap: .6em; }
.m-lab { font-weight: 800; font-size: .82em; color: #0A6FA6; letter-spacing: .03em; }
.expr-wrap { position: relative; }
.expr { font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; padding-right: 4.5em; font-variant-numeric: tabular-nums; }
.expr-res { position: absolute; right: .9em; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 700; color: #0A7FC0; pointer-events: none; }
.op-keys { display: flex; flex-wrap: wrap; gap: .35em; margin-left: calc(6.2em + .6em); }
.op { width: 2.3em; height: 2.3em; border-radius: .7em; border: 0; background: #fff; box-shadow: inset 0 0 0 1.5px #D6E7F8, 0 2px 0 #D6E7F8; font-family: var(--font-display); font-weight: 700; font-size: 1em; color: #0A6FA6; transition: transform .1s; }
.op:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px #D6E7F8; }
.ans-wrap { display: flex; gap: .5em; align-items: center; }
.ans { font-family: var(--font-display); font-weight: 700; font-size: 1.1em; max-width: 9em; font-variant-numeric: tabular-nums; }
.unit { width: auto; min-width: 6.5em; font-weight: 700; }
.unit-fixed { font-weight: 700; color: var(--ink-2); }
.m-field.ok .ans { border-color: var(--green); background: #F2FBF6; }
.m-field.bad .ans { border-color: #FFB4A8; }

/* ---------- sorting ---------- */
.sorter { display: grid; gap: .8em; }
.pool-label { font-size: .76em; font-weight: 700; color: var(--muted); margin-bottom: .35em; }
.pool { display: flex; flex-wrap: wrap; gap: .45em; min-height: 3em; padding: .6em; border-radius: 1em; border: 2px dashed #D3DEEF; background: #FAFCFF; transition: background .2s, border-color .2s; }
.pool.empty { min-height: 2.4em; }
.pool.empty::after { content: "Барлығы орналастырылды!"; font-size: .8em; color: var(--green); font-weight: 700; align-self: center; }
.groups { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: .6em; }
.zone { border-radius: 1em; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); padding: .5em; display: flex; flex-direction: column; gap: .45em; min-height: 6.5em; transition: box-shadow .2s, background .2s; cursor: default; }
.zone-head { font-weight: 800; font-size: .8em; text-align: center; color: var(--sc, var(--blue)); background: var(--sc-soft, var(--sky-2)); border-radius: .7em; padding: .45em .4em; letter-spacing: .02em; }
.zone-items { display: flex; flex-wrap: wrap; gap: .4em; align-content: flex-start; flex: 1; }
.zone-put { border: 0; border-radius: .7em; padding: .4em; background: var(--blue); color: #fff; font-weight: 700; font-size: .78em; }
.zone.over, .pool.over { box-shadow: inset 0 0 0 2.5px var(--blue); background: var(--sky-3); }
.sorter.selecting .zone { box-shadow: inset 0 0 0 2px var(--sky); cursor: pointer; }
.chip-item { touch-action: none; user-select: none; -webkit-user-select: none; border: 0; border-radius: .75em; padding: .5em .8em; background: #fff; font-weight: 650; font-size: .9em; color: var(--ink);
  box-shadow: 0 1px 0 #E3EAF6, 0 4px 10px -6px rgba(11,42,111,.35), inset 0 0 0 1.5px #E3EAF6; cursor: grab; transition: transform .15s var(--ease), box-shadow .2s, opacity .2s; }
.chip-item:hover { transform: translateY(-1px); }
.chip-item[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--blue), 0 6px 14px -6px rgba(30,107,255,.6); background: var(--sky-3); }
.chip-item.dragging { opacity: .35; }
.chip-item.ok { box-shadow: inset 0 0 0 2px var(--green); background: #F2FBF6; }
.chip-item.bad { box-shadow: inset 0 0 0 2px #FF9C8F; background: #FFF5F3; }
.chip-item[disabled] { cursor: default; }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: rotate(-3deg) scale(1.05); box-shadow: 0 16px 30px -10px rgba(11,42,111,.5), inset 0 0 0 2px var(--blue); background: #fff; }

/* ---------- ordering ---------- */
.ord-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45em; }
.ord-item { display: flex; align-items: center; gap: .6em; padding: .45em .5em .45em .45em; border-radius: .9em; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2), 0 3px 10px -8px rgba(11,42,111,.4); transition: box-shadow .2s, background .2s; }
.ord-item.dragging { z-index: 3; position: relative; box-shadow: 0 14px 28px -10px rgba(11,42,111,.45), inset 0 0 0 2px var(--blue); }
.ord-n { width: 1.9em; height: 1.9em; border-radius: .6em; display: grid; place-items: center; background: var(--sc-soft, var(--sky-2)); color: var(--sc, var(--blue)); font-family: var(--font-display); font-weight: 800; font-size: .9em; flex: none; }
.ord-grip { color: #B9C6DD; cursor: grab; touch-action: none; display: grid; place-items: center; width: 1.4em; }
.ord-grip .i { width: 1.2em; height: 1.2em; }
.ord-text { flex: 1; font-weight: 600; font-size: .93em; }
.ord-btns { display: flex; gap: .2em; }
.ord-b { width: 2em; height: 2em; border-radius: .6em; border: 0; background: #F3F6FB; color: var(--ink-2); display: grid; place-items: center; }
.ord-b .i { width: 1.1em; height: 1.1em; }
.ord-b:hover:not(:disabled) { background: var(--sky-2); color: var(--blue); }
.ord-b:disabled { opacity: .3; }
.ord-item.ok { box-shadow: inset 0 0 0 2px var(--green); }
.ord-item.bad { box-shadow: inset 0 0 0 2px #FF9C8F; }

/* ---------- matching ---------- */
.matcher { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .5em 3.2em; }
.m-col { display: grid; gap: .45em; align-content: start; position: relative; z-index: 1; }
.m-lines { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.m-lines path { fill: none; stroke-width: 2.5; stroke-linecap: round; opacity: .75; }
.m-left, .m-right { display: flex; align-items: center; gap: .55em; border: 0; border-radius: .9em; padding: .55em .7em; background: #fff; text-align: left; font-weight: 600; font-size: .9em;
  box-shadow: inset 0 0 0 1.5px var(--line-2), 0 3px 10px -8px rgba(11,42,111,.4); transition: box-shadow .2s, transform .15s; min-height: 2.8em; }
.m-left { font-weight: 800; color: var(--navy); }
.m-right { flex-direction: row; }
.m-left .m-dot { order: 2; margin-left: auto; }
.m-dot { width: .85em; height: .85em; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px #C9D6EA; background: #fff; transition: all .2s; }
.m-left.linked .m-dot, .m-right.linked .m-dot { background: var(--mc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 25%, transparent); }
.m-left.linked, .m-right.linked { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mc) 45%, #fff); }
.m-left[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--blue), 0 8px 18px -10px rgba(30,107,255,.7); transform: translateX(3px); }
.matcher.picking .m-right:not([disabled]) { box-shadow: inset 0 0 0 1.5px var(--sky); cursor: pointer; }
.matcher.picking .m-right:not([disabled]):hover { box-shadow: inset 0 0 0 2px var(--blue); }
.m-left.ok { box-shadow: inset 0 0 0 2px var(--green); }
.m-left.bad { box-shadow: inset 0 0 0 2px #FF9C8F; }
.m-t { min-width: 0; line-height: 1.3; }
@container page (max-width: 430px) { .matcher { grid-template-columns: 1fr; gap: .45em; } .m-rights { margin-top: .6em; } }

/* ---------- choice ---------- */
.opts { display: grid; gap: .4em; }
.opt { display: flex; align-items: center; gap: .7em; text-align: left; border: 0; border-radius: .9em; padding: .6em .8em; background: #fff; font-weight: 600; font-size: .93em;
  box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .2s, background .2s; }
.opt:hover:not([disabled]) { box-shadow: inset 0 0 0 1.5px var(--sky); }
.opt-box { width: 1.45em; height: 1.45em; border: 2px solid #C5D4EC; display: grid; place-items: center; color: transparent; flex: none; transition: all .2s var(--ease); }
.opt-box.sq { border-radius: .4em; }
.opt-box.rd { border-radius: 50%; }
.opt-box .i { width: .95em; height: .95em; }
.opt[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--blue); background: var(--sky-3); }
.opt[aria-checked="true"] .opt-box { background: var(--blue); border-color: var(--blue); color: #fff; }
.opt.ok { box-shadow: inset 0 0 0 2px var(--green); background: #F2FBF6; }
.opt.ok .opt-box { background: var(--green); border-color: var(--green); }
.opt.bad { box-shadow: inset 0 0 0 2px #FF9C8F; background: #FFF5F3; }
.opt.bad .opt-box { background: var(--coral); border-color: var(--coral); }

/* ---------- grid & tables ---------- */
.grid-scroll { overflow-x: auto; border-radius: 1em; box-shadow: inset 0 0 0 1.5px var(--line-2); background: #fff; }
.grid-t, .obs-t { border-collapse: collapse; width: 100%; font-size: .88em; }
.grid-t th, .obs-t th { font-weight: 800; color: var(--navy); padding: .55em .5em; text-align: center; background: #F6F9FE; font-size: .9em; }
.grid-t th[scope="row"], .obs-t th[scope="row"] { text-align: left; white-space: nowrap; padding-left: .8em; }
.grid-t td, .obs-t td { border-top: 1px solid var(--line-2); padding: .3em; text-align: center; }
.grid-t td + td, .obs-t td + td, .obs-t th + td, .grid-t th + td { border-left: 1px solid var(--line-2); }
.g-cell { width: 2.4em; height: 2.4em; border-radius: .7em; border: 0; background: #F4F7FC; display: inline-grid; place-items: center; transition: transform .15s var(--ease), background .2s; }
.g-cell .i { width: 1.2em; height: 1.2em; }
.g-cell[data-v="1"] { background: var(--green); color: #fff; }
.g-cell[data-v="0"] { background: #FFE3DE; color: #C6402F; }
.g-cell:active { transform: scale(.92); }
.g-cell.bad { outline: 2px dashed var(--coral); outline-offset: 1px; }
.cell-in { width: 100%; min-width: 5em; border: 0; background: transparent; padding: .5em .4em; font: inherit; text-align: center; border-radius: .5em; }
.cell-in:focus { outline: none; background: var(--sky-3); }

/* ---------- reflect ---------- */
.reflect { display: grid; gap: .7em; }
.hard > span { font-size: .8em; }
.self-title { font-weight: 800; font-size: .8em; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.self-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.self { border: 0; border-radius: 1em; padding: .7em .4em .6em; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; justify-items: center; gap: .15em; text-align: center; transition: transform .15s var(--ease), box-shadow .2s, background .2s; }
.self:hover:not([disabled]) { transform: translateY(-2px); }
.self-stars { display: flex; gap: .1em; color: var(--yellow); }
.self-stars svg { width: 1.15em; height: 1.15em; }
.self-l { font-weight: 800; font-size: .86em; color: var(--navy); }
.self-h { font-size: .68em; color: var(--muted); line-height: 1.25; }
.self[aria-checked="true"] { box-shadow: inset 0 0 0 2.5px var(--yellow-2); background: #FFFAEB; }
.self.lv-practice .self-stars { color: var(--azure); }
.self.lv-practice[aria-checked="true"] { box-shadow: inset 0 0 0 2.5px var(--azure); background: var(--sky-3); }

/* ---------- drawing ---------- */
.draw { display: grid; gap: .5em; }
.draw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; }
.draw-tools .sep { width: 1px; height: 1.6em; background: var(--line); margin: 0 .2em; }
.sw { width: 1.8em; height: 1.8em; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); transition: transform .15s; }
.sw[aria-pressed="true"] { transform: scale(1.12); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.tool { width: 2.2em; height: 2.2em; border-radius: .7em; border: 0; background: #F3F6FB; color: var(--ink-2); display: grid; place-items: center; }
.tool .i { width: 1.15em; height: 1.15em; }
.tool[aria-pressed="true"] { background: var(--sky-2); color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--sky); }
.tool.flip .i { transform: scaleX(-1); }
.tool.danger:hover, .tool.armed { background: var(--coral-soft); color: #B4382B; }
.tool .dot { border-radius: 50%; background: currentColor; display: block; }
.tool .dot.s { width: .4em; height: .4em; }
.tool .dot.l { width: .85em; height: .85em; }
.draw-stage { position: relative; border-radius: 1em; overflow: hidden; background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); touch-action: none; }
.draw-stage.bg-grid { background-image: linear-gradient(#E9F1FC 1px, transparent 1px), linear-gradient(90deg, #E9F1FC 1px, transparent 1px); background-size: 20px 20px; }
.draw-stage.bg-lines { background-image: repeating-linear-gradient(180deg, transparent 0 27px, #E3ECF8 27px 28px); }
.draw-c { display: block; width: 100%; cursor: crosshair; touch-action: none; position: relative; z-index: 1; }
.draw-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #B3C1D9; font-weight: 700; font-size: .9em; pointer-events: none; }

/* ---------- sims ---------- */
.sim { display: grid; gap: .55em; }
.sim svg { width: 100%; height: auto; border-radius: 1em; }
.sim-kicker { font-size: .68em; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--violet); }
.sim-ctl { display: flex; align-items: center; gap: .6em; font-weight: 700; font-size: .85em; color: var(--ink-2); }
.sim-ctl .ends { font-size: .8em; color: var(--muted); }
.range { flex: 1; accent-color: var(--yellow-2); }
.sim-q { margin: 0; font-size: .88em; color: var(--ink-2); }
.float-btns { display: flex; flex-wrap: wrap; gap: .4em; }
.float-btns .btn { font-size: .8em; }
.float-res { display: flex; flex-wrap: wrap; gap: .4em; }
.fr { font-size: .8em; padding: .3em .7em; border-radius: 999px; font-weight: 600; }
.fr.float { background: var(--sky-2); color: var(--blue-2); }
.fr.sink { background: #F1F4FA; color: var(--ink-2); }

/* keep grid children from overflowing narrow pages */
.lesson-sec, .sec, .blk, .math, .sorter, .tagger, .reflect, .draw, .sim, .opener, .fields, .opts, .ord-list, .rules, .submit, .sub-sum { grid-template-columns: minmax(0, 1fr); }
.lesson-sec > *, .sec > *, .blk > *, .opener > * { min-width: 0; }
.m-row { grid-template-columns: 6.2em minmax(0, 1fr); }
@container page (max-width: 470px) {
  .m-row { grid-template-columns: minmax(0, 1fr); gap: .3em; }
  .op-keys { margin-left: 0; }
  .self-levels { grid-template-columns: 1fr; }
  .self { grid-template-columns: auto auto 1fr; justify-items: start; text-align: left; align-items: center; gap: .6em; padding: .6em .8em; }
  .groups { grid-template-columns: repeat(min(var(--cols, 2), 2), minmax(0, 1fr)); }
}
.code-in::placeholder { text-transform: none; letter-spacing: normal; font-family: var(--font-ui); font-weight: 400; }