/* Visual lessons: the player (.vl) as its own page (.vl-page: centered column, a bottom bar that
   turns green or red with the feedback) or in the lesson page's Interactive tab (.vl-pane), plus the
   list of lessons and the lesson page's invitation card. Everything of the player is under .vl, so
   nothing leaks into the lesson page. */
html:has(body.visual-page), .visual-page { background: #fbfbfd; }
.visual-page { min-height: 100vh; }
.vl { --cell: 54px; --gap: 8px; }

/* ---- Top: close (page), progress, count ---------------------------------------------- */
.vl .v-top { display: flex; align-items: center; gap: 16px; }
.vl .v-close { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #6b7486; }
.vl .v-close:hover { background: #f1f4f8; color: #2a3243; }
.vl .v-progress { flex: 1; display: flex; gap: 5px; max-width: 720px; margin: 0 auto; }
.vl .v-progress .seg { flex: 1; height: 9px; padding: 0; border-radius: 5px; background: #e6e9ef; transition: background .3s; }
.vl .v-progress .seg.full { background: #3d6fe0; }
.vl .v-progress .seg.now { background: #9db7ef; }
.vl .v-progress .seg:not(:disabled):hover { background: #2c58c0; }
.vl .v-progress .seg:disabled { cursor: default; }
.vl .v-count { min-width: 52px; text-align: right; font: 600 13px var(--mono); color: #8a93a3; }
.vl .v-restart { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; margin-left: -8px; border-radius: 9px; color: #8a93a3; }
.vl .v-restart:hover { background: #f1f4f8; color: #2a3243; }
.vl .v-restart .icon { width: 17px; height: 17px; }

/* ---- Step ----------------------------------------------------------------------------- */
.vl .v-stage { max-width: 720px; margin: 0 auto; }
.vl .v-stage.in { animation: v-in .35s ease-out; }
@keyframes v-in { from { opacity: 0; transform: translateY(10px); } }
/* The thinking move a step practises (the Bulletproof Formula's pillars). */
.vl .v-move { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: #f1edff; color: #5b47c9; font-size: 12px; font-weight: 700; letter-spacing: .2px; }
.vl .v-text a { color: #245bd6; text-decoration: underline; text-underline-offset: 3px; }
.vl .v-title { font-size: 29px; line-height: 1.25; font-weight: 700; letter-spacing: -.5px; color: #1b2130; margin-bottom: 12px; }
.vl .v-text { font-size: 18px; line-height: 1.65; color: #394050; }
.vl .v-text p { margin: 0 0 10px; }
.vl .v-text strong, .vl .v-caption strong, .vl .v-prompt strong, .vl .v-fb-text strong { color: #1b2130; }
.vl .v-text, .vl .v-prompt, .vl .v-opt-text, .vl .v-fb-text, .vl .v-mini-caption { overflow-wrap: anywhere; }
.vl .v-text code, .vl .v-caption code, .vl .v-prompt code, .vl .v-opt code, .vl .v-fb-text code { font: 600 .88em var(--mono); background: #eef2f8; border: 1px solid #e0e6ef; border-radius: 5px; padding: 0 5px; color: #24406f; }

.vl .v-board { display: flex; flex-wrap: wrap; justify-content: center; justify-content: safe center; align-items: flex-start; gap: 28px 40px; margin: 24px 0 6px; padding: 26px 22px; background: #fff; border: 1px solid #e5e9f0; border-radius: 20px; box-shadow: 0 1px 2px #14203008, 0 10px 30px -18px #14203040; overflow-x: auto; }
.vl .w { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }
.vl .w-label { font: 600 13px var(--mono); color: #6b7486; }
.vl .w-empty { margin-top: -2px; font-size: 13px; font-style: italic; color: #9aa3b2; }

/* Tones: each picture's parts read these colours (border, fill, text). */
.vl .land { --tb: #c5d9a0; --tbg: #e6f0d3; --tc: #5a7a26; }
.vl .water { --tb: #cfe0f5; --tbg: #e8f1fc; --tc: #86a4c8; }
.vl .t-active { --tb: #3d6fe0; --tbg: #eaf1ff; --tc: #1d3f91; }
.vl .t-focus { --tb: #e3a41c; --tbg: #fff4d6; --tc: #7a5300; }
.vl .t-match, .vl .chosen { --tb: #2f9a5c; --tbg: #e2f5e9; --tc: #1b6a3c; }
.vl .t-wrong, .vl .nope { --tb: #d0573b; --tbg: #fdebe6; --tc: #9a3520; }
.vl .t-done { --tb: #e6e9ee; --tbg: #f4f5f7; --tc: #a3abb8; }
.vl .t-g1 { --tb: #2a9d8f; --tbg: #dcf3f0; --tc: #146c62; }
.vl .t-g2 { --tb: #7b61d1; --tbg: #eee9ff; --tc: #4f3aa5; }
.vl .t-g3 { --tb: #e07b24; --tbg: #ffecda; --tc: #9a4e0e; }
.vl .t-g4 { --tb: #d0498a; --tbg: #fde5f0; --tc: #95285c; }

/* Array: boxes with their indices, pointers sliding underneath, a dashed window. */
.vl .arr { position: relative; }
.vl .arr-cells { position: relative; z-index: 1; display: flex; gap: var(--gap); }
.vl .cell { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.vl .box { display: grid; place-items: center; width: var(--cell); height: var(--cell); border: 2px solid var(--tb, #d8dfe9); border-radius: 13px; background: var(--tbg, #fff); color: var(--tc, #222b3a); font: 650 20px var(--mono); transition: background .3s, border-color .3s, color .3s, transform .3s, box-shadow .3s; }
.vl .cell.t-active .box { transform: translateY(-5px); box-shadow: 0 8px 16px -8px #3d6fe0aa; }
.vl .ci { font: 500 11.5px var(--mono); color: #9aa3b2; }
.vl .cell.ghost .box { border-style: dashed; border-color: #cfd6e1; background: transparent; }
.vl .w-array.tight .box { font-size: 14px; border-radius: 8px; border-width: 1.5px; }
.vl .w-array.tight .ci { font-size: 10px; }
.vl .w-array.tight .ptr { font-size: 11px; padding: 1px 5px; }
.vl .arr-range { position: absolute; z-index: 0; top: -7px; left: calc(var(--from) * (var(--cell) + var(--gap)) - 7px); width: calc((var(--to) - var(--from) + 1) * (var(--cell) + var(--gap)) - var(--gap) + 14px); height: calc(var(--cell) + 14px); border: 2px dashed #7f9fe0; border-radius: 16px; background: #3d6fe00d; transition: left .4s cubic-bezier(.3, .7, .25, 1), width .4s cubic-bezier(.3, .7, .25, 1); }
.vl .arr-ptrs { position: relative; height: calc(var(--levels, 0) * 27px + 4px); }
.vl .w-array.wrap .arr-cells { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
/* A wide picture scrolls inside its own box: it may not grow past the board (min-width: 0 lets the
   flex item shrink below its content), and the row scrolls from its first box. */
.vl .w-array.scroll { align-self: stretch; min-width: 0; max-width: 100%; }
.vl .w-array.scroll .arr { overflow-x: auto; max-width: 100%; padding: 9px 9px 2px; scrollbar-width: thin; }
.vl .ptr { position: absolute; top: calc(var(--level) * 27px + 9px); left: calc(var(--at) * (var(--cell) + var(--gap)) + var(--cell) / 2); transform: translateX(-50%); min-width: 24px; padding: 1px 8px; border-radius: 7px; text-align: center; background: #3d6fe0; color: #fff; font: 700 12.5px var(--mono); white-space: nowrap; transition: left .45s cubic-bezier(.3, .7, .25, 1), top .3s; }
.vl .ptr::before { content: ''; position: absolute; left: 50%; top: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top: 0; }
.vl .ptr[data-color="0"] { background: #3d6fe0; } .vl .ptr[data-color="0"]::before { border-bottom-color: #3d6fe0; }
.vl .ptr[data-color="1"] { background: #7b61d1; } .vl .ptr[data-color="1"]::before { border-bottom-color: #7b61d1; }
.vl .ptr[data-color="2"] { background: #e07b24; } .vl .ptr[data-color="2"]::before { border-bottom-color: #e07b24; }
.vl .ptr[data-color="3"] { background: #2a9d8f; } .vl .ptr[data-color="3"]::before { border-bottom-color: #2a9d8f; }

/* Hash map: a two-column table whose new rows slide in. */
.vl .map { border-collapse: separate; border-spacing: 0; min-width: 176px; border: 1px solid #e3e7ee; border-radius: 13px; overflow: hidden; }
.vl .map th { padding: 7px 16px; background: #f6f8fb; font: 600 11px var(--mono); letter-spacing: .5px; text-transform: uppercase; color: #7a8394; text-align: left; }
.vl .map td { padding: 8px 16px; border-top: 1px solid #eef1f5; background: var(--tbg, #fff); color: var(--tc, #222b3a); font: 650 17px var(--mono); transition: background .3s, color .3s; }
.vl .map tr.enter td { animation: v-row .55s ease-out; }
@keyframes v-row { from { background: #fff1bf; opacity: 0; transform: translateY(-6px); } }

/* Variables: name = value chips. */
.vl .vars { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vl .var { display: inline-flex; align-items: baseline; gap: 9px; padding: 7px 13px; border: 2px solid var(--tb, #e1e6ee); border-radius: 11px; background: var(--tbg, #fff); transition: background .3s, border-color .3s; }
.vl .vn { font: 600 13px var(--mono); color: #6b7486; }
.vl .vn::after { content: ' ='; color: #a3abb8; }
.vl .vv { font: 700 18px var(--mono); color: var(--tc, #222b3a); }
.vl .var.enter { animation: v-pop .35s ease-out; }

/* Grid: matrices, and land and water for island problems. */
.vl .w-grid { --gc: 44px; --gg: 5px; }
.vl .w-grid .gcell { font-size: min(15px, calc(var(--gc) * .42)); }
.vl .gwrap { display: grid; grid-template-columns: auto auto; gap: 4px 6px; }
.vl .grid { display: grid; grid-template-columns: repeat(var(--cols), var(--gc)); gap: var(--gg); }
.vl .gcell { display: grid; place-items: center; width: var(--gc); height: var(--gc); border: 2px solid var(--tb, #dfe5ee); border-radius: 9px; background: var(--tbg, #fff); color: var(--tc, #4a5568); font: 650 15px var(--mono); transition: background .3s, border-color .3s, color .3s; }
.vl .g-cols { display: grid; grid-template-columns: repeat(var(--cols), var(--gc)); gap: var(--gg); }
.vl .g-rows { display: grid; grid-template-rows: repeat(var(--rows), var(--gc)); gap: var(--gg); }
.vl .g-cols span, .vl .g-rows span { display: grid; place-items: center; font: 500 11.5px var(--mono); color: #9aa3b2; }
.vl .g-rows span { padding-right: 2px; }
.vl .g-corner { display: grid; align-content: end; justify-items: end; gap: 0; padding: 0 2px 2px 0; font: 600 9.5px/1.25 var(--mono); color: #8a93a3; white-space: nowrap; }
.vl .g-corner i { font-style: normal; }

/* Stack: top first. */
.vl .stack { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 3px solid #d8dfe9; min-width: 120px; }
.vl .sitem { position: relative; display: grid; place-items: center; width: 112px; height: 42px; border: 2px solid var(--tb, #d8dfe9); border-radius: 10px; background: var(--tbg, #fff); color: var(--tc, #222b3a); font: 650 17px var(--mono); }
.vl .sitem.top::after { content: 'top'; position: absolute; left: calc(100% + 10px); font: 600 11px var(--mono); color: #8a93a3; }
.vl .sitem.enter { animation: v-drop .4s cubic-bezier(.3, .7, .25, 1); }
@keyframes v-drop { from { opacity: 0; transform: translateY(-18px); } }

/* Trees and graphs: round nodes over their edges (visual.js drawShape sets the size). */
.vl .shape { --size: 44px; position: relative; flex-shrink: 0; }
.vl .shape-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vl .shape-edges line { stroke: var(--tb, #cfd6e1); stroke-width: 2.5; stroke-linecap: round; transition: stroke .3s, stroke-width .3s; }
.vl .shape-edges polygon { fill: var(--tb, #b5bfcd); transition: fill .3s; }
.vl .shape-edges g[class*="t-"]:not(.t-done) line { stroke-width: 4.5; }
.vl .snode { position: absolute; display: grid; place-items: center; width: var(--size); height: var(--size); transform: translate(-50%, -50%); border: 2px solid var(--tb, #cbd3df); border-radius: 50%; background: var(--tbg, #fff); color: var(--tc, #222b3a); font: 650 calc(var(--size) * .36) var(--mono); transition: left .35s, top .35s, background .3s, border-color .3s, color .3s, box-shadow .3s; }
.vl .snode.t-active { box-shadow: 0 0 0 4px #3d6fe02e; }
.vl .snode.enter { animation: v-pop .35s ease-out; }
@keyframes v-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.vl .snote { position: absolute; left: calc(100% - 9px); top: -9px; padding: 0 5px; border: 1.5px solid #c9b8f5; border-radius: 999px; background: #f6f2ff; color: #4f3aa5; font: 700 10.5px/15px var(--mono); white-space: nowrap; }

/* Code: the lesson editor's dark colours. */
.vl .w-code { align-self: stretch; align-items: stretch; }
.vl .code { margin: 0; padding: 12px 0; min-width: min(560px, 100%); overflow-x: auto; background: #12172a; border-radius: 13px; color: #d7dce7; font: 14.5px/1.75 var(--mono); text-align: left; }
.vl .cl { display: flex; border-left: 3px solid transparent; padding-right: 18px; transition: background .25s; }
.vl .ln { flex-shrink: 0; width: 40px; padding-right: 14px; text-align: right; color: #5d6680; user-select: none; }
.vl .ct { white-space: pre; }
.vl .cl.lit { background: #86aafa24; border-left-color: #86aafa; }
.vl .w-code .t-active, .vl .w-code .t-focus { background: #3d6fe047; border-left-color: #86aafa; }
.vl .w-code .t-match, .vl .w-code .chosen { background: #2f9a5c4d; border-left-color: #5ccb8a; }
.vl .w-code .t-wrong, .vl .w-code .nope { background: #d0573b4d; border-left-color: #f08a70; }
.vl .tk-k { color: #c792ea; } .vl .tk-s { color: #c3e88d; } .vl .tk-n { color: #f78c6c; } .vl .tk-c { color: #6c7499; font-style: italic; } .vl .tk-f { color: #82aaff; }

/* Output: what print shows, in the console's colours. */
.vl .w-output { align-items: stretch; }
.vl .console { margin: 0; min-width: 200px; max-width: 100%; padding: 10px 14px; overflow-x: auto; background: #12172a; border-radius: 12px; color: #d7dce7; font: 14.5px/1.6 var(--mono); text-align: left; }
.vl .console:empty::before { content: 'nothing printed yet'; color: #6c7499; font-style: italic; }
.vl .ol { white-space: pre; border-left: 3px solid transparent; margin-left: -14px; padding-left: 11px; }
.vl .ol.enter { animation: v-row .45s ease-out; }
.vl .w-output .t-active, .vl .w-output .t-focus { background: #3d6fe047; border-left-color: #86aafa; }
.vl .w-output .t-match { background: #2f9a5c4d; border-left-color: #5ccb8a; }
.vl .w-output .t-wrong { background: #d0573b4d; border-left-color: #f08a70; }

/* Tapping the picture. */
.vl .w.tappable { outline: 2px dashed #9db7ef; outline-offset: 6px; border-radius: 12px; }
.vl .tappable .cell, .vl .tappable tbody tr, .vl .tappable .gcell, .vl .tappable .snode, .vl .tappable .sitem, .vl .tappable .cl { cursor: pointer; }
.vl .tappable .cell:hover .box, .vl .tappable .gcell:hover, .vl .tappable .snode:hover, .vl .tappable .sitem:hover { border-color: #9db7ef; transform: translateY(-2px); }
.vl .tappable .snode:hover { transform: translate(-50%, calc(-50% - 2px)); }
.vl .tappable .cl:hover { background: #ffffff12; }
.vl .tappable tbody tr:hover td { background: #f3f7ff; }
.vl .cell.picked .box, .vl .gcell.picked, .vl .snode.picked, .vl .sitem.picked { border-color: #3d6fe0; background: #eaf1ff; box-shadow: 0 0 0 4px #3d6fe036; }
.vl .w-map tr.picked td { background: #eaf1ff; }
.vl .cl.picked { background: #3d6fe059; border-left-color: #86aafa; }
.vl .tappable [role="button"]:focus-visible { outline: 3px solid #7299f0; outline-offset: 3px; }

/* ---- Frames: a caption between back and next, and dots ----------------------------------- */
.vl .v-frames { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.vl .v-caption { flex: 1; min-width: 0; overflow-wrap: anywhere; min-height: 52px; display: flex; align-items: center; padding: 10px 16px; border-radius: 13px; background: #f1f5fc; font-size: 16px; line-height: 1.5; color: #2b3445; }
.vl .v-fbtn { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid #d5dce7; border-radius: 50%; background: #fff; color: #3a4a66; }
.vl .v-fbtn:hover:not(:disabled) { background: #f1f5fc; border-color: #9db7ef; }
.vl .v-fbtn:disabled { opacity: .35; }
.vl .v-fnum { flex-shrink: 0; align-self: center; margin-right: 10px; padding: 1px 7px; border-radius: 6px; background: #dfe8fb; color: #2c58c0; font: 650 12px var(--mono); white-space: nowrap; }
.vl .v-fnext.go { background: #3d6fe0; border-color: #3d6fe0; color: #fff; animation: v-nudge 1.8s ease-out infinite; }
.vl .v-fnext.go:hover { background: #2c58c0; border-color: #2c58c0; }
@keyframes v-nudge { 0% { box-shadow: 0 0 0 0 #3d6fe066; } 70%, 100% { box-shadow: 0 0 0 9px #3d6fe000; } }
.vl .v-flow { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; }
.vl .v-play { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border: 1px solid #c9d7f3; border-radius: 999px; background: #fff; color: #2c58c0; font-size: 13px; font-weight: 600; }
.vl .v-play:hover { background: #f1f5fc; border-color: #9db7ef; }
.vl .v-play .icon { width: 14px; height: 14px; }
.vl .v-pause { display: inline-flex; gap: 3px; width: 14px; justify-content: center; }
.vl .v-pause i { width: 3px; height: 11px; border-radius: 1px; background: currentColor; }
.vl .v-dots { display: flex; justify-content: center; gap: 6px; }
.vl .v-dots button { width: 8px; height: 8px; padding: 0; border-radius: 4px; background: #d6dce6; transition: width .25s, background .25s; }
.vl .v-dots button.seen { background: #9db7ef; }
.vl .v-dots button.on { width: 22px; background: #3d6fe0; }

/* ---- Questions ------------------------------------------------------------------------ */
.vl .v-ask { margin-top: 28px; }
.vl .v-prompt { margin-bottom: 14px; font-size: 18.5px; line-height: 1.5; font-weight: 650; color: #1b2130; }
.vl .v-options { display: grid; gap: 11px; }
.vl .v-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 2px solid #dfe4ec; border-radius: 15px; background: #fff; box-shadow: 0 3px 0 #e3e7ee; color: #283041; font-size: 16.5px; line-height: 1.45; text-align: left; transition: border-color .15s, background .15s, box-shadow .15s, transform .1s; }
.vl .v-opt:hover:not(:disabled) { border-color: #b6c5e2; background: #fafcff; }
.vl .v-opt:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #e3e7ee; }
.vl .v-opt:disabled { cursor: default; }
.vl .v-key { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: #f1f4f8; color: #6b7486; font: 700 13px var(--mono); transition: background .15s, color .15s; }
.vl .v-opt.picked { border-color: #3d6fe0; background: #f1f6ff; box-shadow: 0 3px 0 #3d6fe0; }
.vl .v-opt.picked .v-key { background: #3d6fe0; color: #fff; }
.vl .v-opt.right { border-color: #2f9a5c; background: #eaf7ef; box-shadow: 0 3px 0 #2f9a5c; }
.vl .v-opt.right .v-key { background: #2f9a5c; color: #fff; }
.vl .v-opt.wrong { border-color: #e2a597; background: #fdf3f0; box-shadow: 0 3px 0 #e2a597; color: #7d4a3f; }
.vl .v-opt.wrong .v-key { background: #d0573b; color: #fff; }
.vl .v-opt:disabled:not(.right):not(.wrong) { opacity: .6; }
.vl .v-tap-note { font-size: 14px; color: #6b7486; }
.vl .v-number { width: 230px; max-width: 100%; padding: 11px 16px; border: 2px solid #dfe4ec; border-radius: 13px; background: #fff; color: #1b2130; font: 650 22px var(--mono); outline: none; transition: border-color .15s, box-shadow .15s; }
.vl .v-number:focus { border-color: #3d6fe0; box-shadow: 0 0 0 4px #3d6fe024; }
.vl .v-number.right { border-color: #2f9a5c; background: #eaf7ef; color: #1b6a3c; }

/* ---- Bottom bar: back, feedback, the one button ----------------------------------------- */
.vl .v-bar { background: #fff; border-top: 1px solid #e6e9ef; transition: background .25s, border-color .25s; }
.vl .v-bar-in { display: flex; align-items: center; gap: 16px; max-width: 720px; margin: 0 auto; }
.vl .v-back { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border: 1px solid #d5dce7; border-radius: 13px; background: #fff; color: #4a5568; }
.vl .v-back:hover:not(:disabled) { background: #f3f5f9; }
.vl .v-back:disabled { opacity: .35; }
.vl .v-feedback { flex: 1; display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.vl .v-feedback:empty { visibility: hidden; }
.vl .v-fb-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; color: #fff; animation: v-pop .35s ease-out; }
.vl .v-fb-icon .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.vl .v-fb-text { min-width: 0; }
.vl .v-fb-text > strong { display: block; font-size: 16.5px; }
.vl .v-fb-text p { margin-top: 2px; font-size: 15px; line-height: 1.5; color: #394050; }
.vl .v-reveal { margin-top: 6px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: #9a3520; }
.vl .v-primary { flex-shrink: 0; margin-left: auto; min-width: 160px; height: 52px; padding: 0 28px; border-radius: 15px; background: #245bd6; box-shadow: 0 4px 0 #1a45a6; color: #fff; font-size: 16.5px; font-weight: 700; transition: background .2s, box-shadow .2s, transform .08s; }
.vl .v-primary:hover:not(:disabled) { background: #1f52c4; }
.vl .v-primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #1a45a6; }
.vl .v-primary:disabled { background: #e6e9ef; box-shadow: 0 4px 0 #d6dbe3; color: #8d96a5; }
.vl .v-bar[data-state="right"] { background: #eaf7ef; border-top-color: #c5e7d1; }
.vl .v-bar[data-state="right"] .v-fb-icon { background: #2f9a5c; }
.vl .v-bar[data-state="right"] .v-fb-text > strong { color: #1b6a3c; }
.vl .v-bar[data-state="right"] .v-primary { background: #2f9a5c; box-shadow: 0 4px 0 #237a48; }
.vl .v-bar[data-state="wrong"] { background: #fdf0ec; border-top-color: #f3d1c7; }
.vl .v-bar[data-state="wrong"] .v-fb-icon { background: #d0573b; }
.vl .v-bar[data-state="wrong"] .v-fb-text > strong { color: #9a3520; }
.vl .v-bar[data-state="reveal"] { background: #fff8e6; border-top-color: #f1e1b3; }
.vl .v-bar[data-state="reveal"] .v-fb-icon { background: #d39b16; }
.vl .v-bar[data-state="reveal"] .v-fb-text > strong { color: #7a5300; }

/* ---- End -------------------------------------------------------------------------------- */
.vl .v-end { padding-top: 34px; text-align: center; }
.vl .v-end-badge { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 20px; border-radius: 50%; background: #e2f5e9; color: #2f9a5c; animation: v-pop .5s cubic-bezier(.3, 1.5, .5, 1); }
.vl .v-end-badge .icon { width: 44px; height: 44px; stroke-width: 2.4; }
.vl .v-end .v-text { max-width: 540px; margin: 0 auto; }
.vl .v-end-score { margin-top: 8px; font-size: 15.5px; color: #4a5568; }
.vl .v-end-score strong { font-size: 18px; color: #1b6a3c; }
.vl .v-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.vl .v-again { margin-top: 18px; font-size: 14px; color: #6b7486; text-decoration: underline; text-underline-offset: 3px; }
.vl .v-again:hover { color: #2a3243; }

/* ---- Motion ------------------------------------------------------------------------------- */
@keyframes v-pop { from { opacity: 0; transform: scale(.6); } }
.vl .bump { animation: v-bump .45s ease-out; }
@keyframes v-bump { 30% { transform: scale(1.18); color: #3d6fe0; } }
.vl .shake { animation: v-shake .4s; }
@keyframes v-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .vl *, .vl *::before { animation: none !important; transition: none !important; } }

/* ---- As its own page ------------------------------------------------------------------------ */
.vl-page .v-top { position: sticky; top: 0; z-index: 30; height: 58px; padding: 0 20px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border-bottom: 1px solid #eceff4; }
.vl-page .v-scroll { padding: 36px 20px 190px; }
.vl-page .v-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }

/* ---- In the lesson page's Interactive tab ---------------------------------------------------- */
.lesson-pane.interactive-open .pane-step { display: none !important; }
.lesson-page .pane-visual { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vl-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; --cell: 46px; --gap: 6px; }
.vl-pane .v-top { padding: 10px 18px; border-bottom: 1px solid var(--line); }
.vl-pane .v-progress { gap: 4px; }
.vl-pane .v-progress .seg { height: 7px; }
.vl-pane .v-count { min-width: 44px; font-size: 12px; }
.vl-pane .v-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 22px; scrollbar-width: thin; }
.vl-pane .v-title { font-size: 21px; margin-bottom: 6px; }
.vl-pane .v-text { font-size: 15.5px; line-height: 1.6; }
.vl-pane .v-text p { margin-bottom: 6px; }
.vl-pane .v-board { gap: 18px 26px; margin: 12px 0 4px; padding: 16px 12px; border-radius: 16px; }
.vl-pane .box { font-size: 17px; border-radius: 11px; }
.vl-pane .v-frames { margin-top: 10px; gap: 10px; }
.vl-pane .v-caption { font-size: 14.5px; min-height: 42px; padding: 8px 14px; }
.vl-pane .v-flow { margin-top: 8px; }
.vl-pane .v-fbtn { width: 38px; height: 38px; }
.vl-pane .v-ask { margin-top: 16px; }
.vl-pane .v-prompt { margin-bottom: 10px; }
.vl-pane .v-prompt { font-size: 16.5px; }
.vl-pane .v-opt { padding: 11px 14px; font-size: 15px; border-radius: 13px; }
.vl-pane .v-key { width: 26px; height: 26px; }
.vl-pane .code { font-size: 13px; }
.vl-pane .v-bar { padding: 10px 14px; }
.vl-pane .v-bar-in { flex-wrap: wrap; gap: 10px 12px; }
.vl-pane .v-feedback { order: -1; flex-basis: 100%; }
.vl-pane .v-feedback:empty { display: none; }
.vl-pane .v-fb-icon { width: 30px; height: 30px; }
.vl-pane .v-fb-text p { font-size: 14px; }
.vl-pane .v-back { width: 42px; height: 42px; }
.vl-pane .v-primary { min-width: 140px; height: 46px; font-size: 15.5px; border-radius: 13px; }
.vl-pane .v-end { padding-top: 16px; }
.vl-pane .v-end-badge { width: 72px; height: 72px; }
.vl-pane .v-end-badge .icon { width: 34px; height: 34px; }

/* The step card's picture: what the current coding step does, while the learner codes (lesson.js). */
.step-picture { margin-top: 8px; border: 1px solid #d8e2f4; border-radius: 10px; background: #fff; overflow: hidden; }
.step-picture-near { display: none; }
.step-picture-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; font-size: 13px; color: #3d4552; text-align: left; }
.step-picture-toggle:hover { background: #f4f7fd; }
.step-picture-toggle > .icon { flex-shrink: 0; width: 15px; height: 15px; color: #3d6fe0; }
.step-picture-summary { flex: 1; min-width: 0; line-height: 1.45; }
.step-picture-more { flex-shrink: 0; font-size: 12px; font-weight: 600; color: #355788; }
.step-picture-toggle .chev { flex-shrink: 0; width: 14px; height: 14px; color: #355788; transition: transform .2s; }
.step-picture.grow .step-picture-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.step-picture-summary strong { font-weight: 650; color: #2a3243; }
.step-picture-adds { padding: 1px 8px; border-radius: 999px; background: #e2f5e9; color: #1b6a3c; font-size: 12px; font-weight: 600; }
.step-picture.closed .step-picture-body { display: none; }
.step-picture.closed .chev { transform: rotate(-90deg); }
/* At the top of the Lesson tab, right under the pinned step card (lesson.php): it scrolls away with the lesson. */
.pane-scroll > .step-picture { margin: 0 0 14px; }
/* Before they start, the invitation comes first, above the step card (lesson.js); on the Lesson tab only. */
.pane-step > .visual-invite { margin: 12px 0 0; }
.lesson-pane:not([data-showing="lesson"]) .pane-step > .visual-invite { display: none; }

/* ---- The start card (a test, ac_start_card; lesson.js) -------------------------------------------
   A problem not started yet: the left pane shows just the problem, and the editor waits, dimmed, under
   the two ways to begin. */
.ide.not-started .pane-step, .ide.not-started .pane-scroll > .step-picture, .ide.not-started .visual-invite,
.ide.not-started .step-dock-near, .ide.not-started .step-picture-near { display: none !important; }
.code-pane { position: relative; }
.start-shade { position: absolute; inset: 46px 0 0; z-index: 6; display: grid; place-items: center; padding: 20px; background: rgba(9, 13, 23, .62); backdrop-filter: blur(1.5px); cursor: pointer; }
.start-card { width: min(430px, 100%); padding: 22px 20px 18px; border-radius: 14px; background: #fff; color: #20242c; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); cursor: default; }
.start-card h2 { margin: 0 0 14px; font-size: 18px; font-weight: 650; letter-spacing: -.3px; }
.start-choice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 1px solid #d6dce6; border-radius: 12px; background: #fff; text-align: left; color: #2a3243; }
.start-choice + .start-choice { margin-top: 10px; }
.start-choice:hover { border-color: #8fa9e6; box-shadow: 0 6px 18px -12px #3d6fe080; }
.start-choice.lead { border-color: #c9d7f3; background: linear-gradient(90deg, #f1f6ff, #f8f5ff); }
/* "Learning the idea": the interactive lesson is open on the left (lesson.js syncStartCard). */
.start-choice:disabled { border-style: dashed; background: #fafbfd; color: #5b6576; cursor: default; box-shadow: none; }
.start-choice:disabled .visual-invite-art { opacity: .7; }
.start-choice strong { display: block; font-size: 15px; line-height: 1.35; }
.start-choice small { display: block; font-size: 12.5px; line-height: 1.4; color: #5b6576; }
.start-choice > .icon { flex-shrink: 0; margin-left: auto; color: #3d6fe0; }
.start-code-icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: #eef1f6; color: #3d4a63; }
.start-code-icon .icon { width: 18px; height: 18px; }
.vl-mini { --cell: 34px; --gap: 5px; padding: 0 10px 10px; }
.vl-mini .v-board { margin: 0; padding: 10px 8px; gap: 12px 18px; border-radius: 10px; border-color: #edf0f5; background: #fbfcfe; box-shadow: none; }
.vl-mini .w { gap: 6px; }
.vl-mini .w-label { font-size: 11px; }
.vl-mini .box { font-size: 14px; border-radius: 8px; border-width: 1.5px; }
.vl-mini .cell.t-active .box { transform: translateY(-3px); }
.vl-mini .ci { font-size: 10px; }
.vl-mini .w-grid { --gc: 28px; --gg: 3px; }
.vl-mini .g-corner { visibility: hidden; }
.vl-mini .gcell { font-size: 12px; border-width: 1.5px; border-radius: 7px; }
.vl-mini .arr-ptrs { height: calc(var(--levels, 0) * 22px + 2px); }
.vl-mini .ptr { top: calc(var(--level) * 22px + 7px); padding: 0 6px; font-size: 10.5px; }
.vl-mini .map { min-width: 120px; border-radius: 9px; }
.vl-mini .map th { padding: 3px 10px; font-size: 10px; }
.vl-mini .map td { padding: 3px 10px; font-size: 13.5px; }
.vl-mini .var { padding: 3px 9px; border-width: 1.5px; }
.vl-mini .vn { font-size: 11px; }
.vl-mini .vv { font-size: 14px; }
.vl-mini .v-mini-caption { margin: 7px 2px 0; font-size: 13px; line-height: 1.5; color: #3d4552; }
.vl-mini .v-mini-caption .v-fnum { margin-right: 7px; padding: 0 5px; font-size: 10.5px; }

/* The lesson tab's invitation to the interactive lesson. */
.visual-invite { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 18px; padding: 12px 14px; border: 1px solid #c9d7f3; border-radius: 12px; background: linear-gradient(90deg, #f1f6ff, #f8f5ff); text-align: left; color: #2a3243; }
.visual-invite:hover { border-color: #8fa9e6; box-shadow: 0 6px 18px -12px #3d6fe080; }
.visual-invite > .icon { margin-left: auto; color: #3d6fe0; }
.visual-invite-art { display: grid; grid-template-columns: repeat(2, 12px); gap: 3px; flex-shrink: 0; padding: 7px; border-radius: 10px; background: #fff; }
.visual-invite-art i { width: 12px; height: 12px; border-radius: 4px; border: 2px solid #3d6fe0; background: #eaf1ff; }
.visual-invite-art i:nth-child(n + 3) { border-color: #2f9a5c; background: #e2f5e9; }
.visual-invite strong { display: block; font-size: 14.5px; }
.visual-invite small { display: block; font-size: 12.5px; color: #5b6576; }
/* After the first check: one line (lesson.js shrinkInvite). */
.visual-invite.compact { gap: 10px; margin-bottom: 14px; padding: 7px 12px; border-radius: 10px; }
.visual-invite.compact .visual-invite-art { grid-template-columns: repeat(2, 7px); gap: 2px; padding: 4px; border-radius: 6px; }
.visual-invite.compact .visual-invite-art i { width: 7px; height: 7px; border-width: 1.5px; border-radius: 2px; }
.visual-invite.compact strong { font-size: 13.5px; font-weight: 600; }
.visual-invite.compact small { display: none; }

/* ---- The list of lessons ------------------------------------------------------------------- */
.v-app-title { font-size: 15px; color: #2a3243; }
.v-badge { padding: 3px 8px; border-radius: 999px; background: #f1edff; color: #5b47c9; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.v-home { max-width: 980px; margin: 0 auto; padding: 44px 20px 60px; }
.v-hero h1 { font-size: 34px; line-height: 1.2; letter-spacing: -.8px; color: #1b2130; }
.v-hero p { max-width: 620px; margin-top: 10px; font-size: 17.5px; line-height: 1.6; color: #4a5263; }
.v-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 30px; }
.v-card { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid #e3e7ee; border-radius: 18px; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.v-card:hover { border-color: #b6c5e2; box-shadow: 0 10px 26px -18px #14203060; transform: translateY(-2px); }
.v-card > .icon { color: #8a93a3; }
.v-card-art { display: grid; grid-template-columns: repeat(2, 16px); gap: 4px; flex-shrink: 0; padding: 10px; border-radius: 14px; background: #f3f6fb; }
.v-card-art i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid #3d6fe0; background: #eaf1ff; }
.v-card-art i:nth-child(n + 3) { border-color: #2f9a5c; background: #e2f5e9; }
.v-card-body { display: grid; gap: 3px; min-width: 0; }
.v-card-body strong { font-size: 17px; color: #1b2130; }
.v-card-body span { font-size: 14px; line-height: 1.5; color: #586174; }
.v-card-body small { font-size: 12.5px; color: #8a93a3; }

/* ---- Narrow screens -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  /* Stacked lesson page: the tab fills the screen from the tabs down, like the AI tutor. */
  .lesson-page .pane-visual { flex: none; height: calc(100vh - var(--appbar) - 54px); height: calc(100dvh - var(--appbar) - 54px); min-height: 480px; }
  .lesson-pane .step-picture { display: none; }
  .step-picture-near { display: block; margin: 0 0 8px; }
}
@media (max-width: 640px) {
  /* Four tabs on a phone: one row that scrolls sideways (this file loads only on lessons with the tab). */
  .lesson-page .pane-tabs { gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .lesson-page .pane-tab { flex-shrink: 0; white-space: nowrap; }
  .vl { --cell: 42px; --gap: 6px; }
  .vl-page .v-top { gap: 10px; padding: 0 10px; }
  .vl .v-count { min-width: 40px; font-size: 12px; }
  .vl-page .v-scroll { padding: 22px 14px 230px; }
  .vl .v-title { font-size: 23px; }
  .vl .v-text { font-size: 16.5px; }
  .vl .v-board { gap: 22px 26px; padding: 18px 12px; border-radius: 16px; }
  .vl .box { font-size: 17px; border-radius: 11px; }
  .vl .w-grid { --gc: 34px; --gg: 4px; }
  .vl .gcell { font-size: 13px; }
  .vl .code { font-size: 12.5px; }
  .vl .v-prompt { font-size: 17px; }
  .vl .v-opt { padding: 12px 14px; font-size: 15.5px; }
  .vl-page .v-bar { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .vl .v-bar-in { flex-wrap: wrap; gap: 10px 12px; }
  .vl .v-feedback { order: -1; flex-basis: 100%; }
  .vl .v-feedback:empty { display: none; }
  .vl .v-primary { flex: 1; min-width: 0; }
  .vl-pane .v-scroll { padding: 16px 14px 24px; }
  .v-hero h1 { font-size: 27px; }
}