.student-grid{--sg-bg:#f7fafb;--sg-paper:#fff;--sg-ink:#193c48;--sg-muted:#4b6570;--sg-line:#aac2ca;--sg-green:#d8eee2;--sg-accent:#175d82;--sg-chip:#176494;box-sizing:border-box;min-width:0;margin:1rem 0;border:1px solid var(--sg-line);border-radius:18px;background:var(--sg-bg);padding:1rem;color:var(--sg-ink)}
.student-grid p{line-height:1.55}.student-grid h4{font-size:1.2rem;margin:.3rem 0}.student-grid-rule,.student-grid-proof-note{font-size:.92rem;color:var(--sg-muted)}.student-grid-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:.65rem 0}.student-grid button,.student-grid select{font:inherit;font-size:.95rem;min-height:44px;max-width:100%;border:1px solid var(--sg-line);border-radius:10px;background:var(--sg-paper);color:var(--sg-ink);padding:.55rem .8rem;box-sizing:border-box;touch-action:manipulation}.student-grid button:not(:disabled){cursor:pointer}.student-grid button:disabled,.student-grid select:disabled{opacity:.45;cursor:default}.student-grid button:focus-visible,.student-grid select:focus-visible,.student-grid summary:focus-visible{outline:3px solid var(--sg-accent);outline-offset:3px}.student-grid-modes{display:grid;grid-template-columns:1fr 1fr;gap:6px}.student-grid-modes button[aria-pressed=true]{background:var(--sg-accent);border-color:var(--sg-accent);color:#fff;font-weight:650}.student-grid-context{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}.student-grid-badge{font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;color:var(--sg-muted);font-weight:700}.student-grid-instruction{min-height:3.1em;font-weight:550}.student-grid-workbench{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}.student-grid-viewport{min-width:0;width:100%;max-width:440px;margin:auto;box-sizing:border-box}.student-grid-board{position:relative;width:100%;aspect-ratio:var(--grid-cols)/var(--grid-rows);min-height:calc(var(--grid-rows) * 44px + 2px);isolation:isolate;border:1px solid var(--sg-line);border-radius:12px;box-shadow:0 8px 24px #183f4a12;overflow:hidden}.student-grid-cells{position:relative;display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));grid-template-rows:repeat(var(--grid-rows),1fr);height:100%}html[data-design="v2"] .student-grid .student-grid-cell{position:relative;min-width:0;min-height:44px;width:100%;height:100%;padding:0;border:0;border-right:1px solid var(--sg-line);border-bottom:1px solid var(--sg-line);border-radius:0;font-size:clamp(18px,4.5vw,24px);font-variant-numeric:tabular-nums;background:var(--sg-paper);color:var(--sg-ink);transition:background .16s}html[data-design="v2"] .student-grid .student-grid-cell:nth-child(6n){border-right:0}html[data-design="v2"] .student-grid .student-grid-cell:nth-last-child(-n+6){border-bottom:0}html[data-design="v2"] .student-grid .student-grid-cell.selected{background:#cee8f7;box-shadow:inset 0 0 0 3px var(--sg-accent)}html[data-design="v2"] .student-grid .student-grid-cell.visited{background:var(--sg-green)}html[data-design="v2"] .student-grid .student-grid-cell.neighbour:not(.visited){background:color-mix(in srgb,var(--sg-paper),var(--sg-accent) 7%)}html[data-design="v2"] .student-grid .student-grid-cell.attempt{box-shadow:inset 0 0 0 3px #c67a32}html[data-design="v2"] .student-grid .student-grid-cell.expected{box-shadow:inset 0 0 0 3px #24835c}.student-grid-digit{position:relative;z-index:3;display:inline-flex;line-height:1.3;justify-content:center;align-items:center;min-width:1.3em;background:inherit}.student-grid-order{position:absolute;top:2px;left:4px;font-size:10px;line-height:1.1;color:var(--sg-muted);z-index:3}.student-grid-lines,.student-grid-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.student-grid-route polyline{fill:none;stroke:#3c9a70;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.45}.student-grid-chip{position:absolute;z-index:5;width:calc(100% / var(--grid-cols) * .62);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 30% 25%,#4eafe0,var(--sg-chip) 65%);border:2px solid #b7e5fa;box-shadow:0 3px 8px #102d5060,inset 0 -3px 3px #07365760;color:#fff;font-weight:700;font-size:clamp(17px,4vw,22px);transition:left .36s ease,top .36s ease}.student-grid-chip span{line-height:1}.student-grid-score{display:flex;gap:.5rem;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--sg-paper);border:1px solid var(--sg-line);border-radius:12px;padding:.65rem;font-size:.82rem}.student-grid-score strong{font-size:1.9rem;line-height:1.1;color:var(--sg-accent)}.student-grid-count-caption{color:var(--sg-muted)}.student-grid-walk .student-grid-actions,.student-grid-edit>.student-grid-actions{display:grid;grid-template-columns:1fr 1fr}.student-grid [data-grid-action=play],.student-grid [data-grid-action=run]{background:var(--sg-accent);border-color:var(--sg-accent);color:#fff;font-weight:650}.student-grid-legend,.student-grid-neighbours{font-size:.84rem;color:var(--sg-muted);margin:.5rem 0}.student-grid-status{min-height:3.1em;padding:.8rem;border-radius:10px;border-left:3px solid #409a78;background:var(--sg-paper);color:var(--sg-ink)}.student-grid-values{font-size:.88rem;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.student-grid-example,.student-grid-exact{border-top:1px solid var(--sg-line);padding-top:.4rem;margin-top:.6rem}.student-grid summary{cursor:pointer;min-height:44px;box-sizing:border-box;padding:.6rem 0;font-weight:600}.student-grid-example p,.student-grid-exact p{font-size:.88rem}.student-grid-number{display:flex;gap:.5rem;align-items:end;flex-wrap:wrap}.student-grid-number label{display:grid;gap:.3rem;font-size:.84rem;flex:1}.student-grid-number select{width:100%}.student-grid .blocks .student-grid-cell:nth-child(6n+2),.student-grid .blocks .student-grid-cell:nth-child(6n+4){border-right:3px solid var(--sg-accent)}.student-grid .blocks .student-grid-cell:nth-child(n+7):nth-child(-n+12),.student-grid .blocks .student-grid-cell:nth-child(n+19):nth-child(-n+24){border-bottom:3px solid var(--sg-accent)}.student-grid [hidden]{display:none!important}
html[data-theme=dark] .student-grid{--sg-bg:#142b33;--sg-paper:#203b46;--sg-ink:#e0edf0;--sg-muted:#b4cbd2;--sg-line:#4b6a77;--sg-green:#245342;--sg-accent:#2886b8;--sg-chip:#175d82}html[data-theme=dark] .student-grid .student-grid-cell.selected{background:#295a71}
@media(prefers-color-scheme:dark){html:not([data-theme=light]) .student-grid{--sg-bg:#142b33;--sg-paper:#203b46;--sg-ink:#e0edf0;--sg-muted:#b4cbd2;--sg-line:#4b6a77;--sg-green:#245342;--sg-accent:#2886b8;--sg-chip:#175d82}html:not([data-theme=light]) .student-grid .student-grid-cell.selected{background:#295a71}}
@media(min-width:720px){.student-grid-workbench{grid-template-columns:minmax(280px,1.35fr) minmax(220px,1fr)}.student-grid-beside{padding-top:.15rem}.student-grid-score{flex-direction:column;gap:.2rem}.student-grid-score strong{font-size:2.5rem}}
@media(max-width:420px){.student-grid{padding:.45rem;border-radius:12px}.student-grid-modes button{font-size:.85rem;padding:.45rem .3rem}.student-grid .student-grid-cell{font-size:18px}.student-grid-actions button{font-size:.88rem;padding:.45rem .4rem}.student-grid-status{padding:.65rem}.student-grid-instruction{font-size:.92rem}}
@media(prefers-reduced-motion:reduce){.student-grid *{transition:none!important;scroll-behavior:auto!important}}