/* SIS Technology Faculty.
   Top: the school bar and menu — the Booking Manager's header and tab row, value for value
   (hardware-booking web/styles.css .bar/.logo/.app-name/.tabs/.tab), identical to the landing page.
   They are white and grey in BOTH themes on purpose: the logo is only ever shown on white, so their
   colours are literals, not theme variables.
   Below: the Year 7 Digital Engineering style, light by default, dark on request. */
:root { --bg:#F4F3EE; --panel:#EAE7DF; --line:#D6D1C4; --fg:#14181F; --dim:#5C6B80;
        --a1:#5e772f; --a2:#af552f; --a3:#244572; --a4:#996418; --card:#244572; --cardfg:#F4F3EE; --divider:#244572; }
        /* logo palette as text colours (Kiers via Core, 11 Oct 2026; Core tokens.css --green-t etc., 4.5:1 on --bg); no near-black fills */
html[data-theme="dark"] { --bg:#0A0C11; --panel:#12161F; --line:#232A38; --fg:#F2F5F8; --dim:#93A0B4;
        --a1:#9fbd5f; --a2:#e8875c; --a3:#7fa3d8; --a4:#f0c070; --card:#fff; --cardfg:#0A0C11; --divider:#fff; }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--fg);
       font-family:Barlow,"Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased }
a { color:inherit }
.wrap { max-width:1000px; margin:0 auto; padding:0 20px }

/* ── breadcrumbs: quiet ─────────────────────────────────────────────────────── */
.crumbs { font-size:12.5px; line-height:1; color:var(--dim); border-bottom:1px solid var(--line) }
.crumbs .wrap { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:34px; padding-top:8px; padding-bottom:8px }
.crumbs a { color:var(--dim); text-decoration:none }
.crumbs a:hover { color:var(--fg); text-decoration:underline }
.crumbs .sep { opacity:.5 }
.crumbs .here { color:var(--fg); opacity:.8 }

/* ── the page title ─────────────────────────────────────────────────────────── */
.hero { padding:30px 0 34px; position:relative }  /* plain: no gradient (Kiers, 25 Sep) */
.hero .wrap { position:relative }
.eyebrow { letter-spacing:3px; text-transform:uppercase; font-size:12px; color:var(--a1); font-weight:700; max-width:720px }
h1 { margin:8px 0 6px; font-size:54px; line-height:1; font-weight:800; max-width:760px }
.sub { font-size:22px; color:var(--dim); font-style:italic }

/* The lesson video: a section of its own, straight after the title. */
.video { --c:var(--a2) }
.vids { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.vid { display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--fg); background:var(--panel);
       border:1px solid var(--c); border-radius:14px; padding:14px 18px; transition:.15s }
.vid:hover { transform:translateY(-2px) }
.vid.main { grid-column:1 / -1; padding:22px 24px }
.play { flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--c); color:#fff;
        display:flex; align-items:center; justify-content:center; font-size:16px; padding-left:3px }
.vid.main .play { width:64px; height:64px; font-size:22px }
.vid.main .fn { font-size:22px }
html[data-theme="dark"] .play { color:#0A0C11 }

/* ── sections and cards ─────────────────────────────────────────────────────── */
section { padding:34px 0; border-top:5px solid var(--divider) }
h2 { font-size:21px; letter-spacing:2.5px; text-transform:uppercase; margin:0; color:var(--c) }
.h2it { font-size:16px; font-style:italic; color:var(--dim); margin:8px 0 16px }
.grid { display:grid; gap:12px }
.intro { font-size:17px; line-height:1.45; max-width:760px; margin:-4px 0 18px }
.weeks { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
/* A group heading inside a faculty's staff tools (staffTools group, 20 Oct 2026). Quiet: it
   separates Art from Drama without competing with the section's own heading above it. */
.tgrp{margin:18px 0 10px;font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.tgrp:first-child{margin-top:4px}
.subjects { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.files { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.grp { margin-bottom:30px }
.grp:last-of-type { margin-bottom:10px }

.wk, .big { display:flex; flex-direction:column; text-decoration:none; color:var(--fg); background:var(--panel);
            border:1px solid var(--c); border-left:5px solid var(--c); border-radius:14px;
            padding:14px 16px; transition:.15s }
.big { padding:24px 22px }
a.wk:hover, a.big:hover { border-color:var(--c); transform:translateY(-3px) }
.wn { font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:800; color:var(--c) }
.wt { font-size:19px; font-weight:700; margin-top:6px; line-height:1.2 }
.bt { font-size:32px; font-weight:800; margin-top:6px; line-height:1.1 }
.wd { font-size:13px; color:var(--dim); margin-top:4px }
/* What is inside: listed, not clickable — the whole card opens the next level. */
.inside { margin:10px 0 0; padding:10px 0 0 20px; border-top:1px solid color-mix(in srgb, var(--c) 35%, transparent); font-size:14.5px; line-height:1.35 }
.inside li { margin:3px 0; color:var(--fg) }
.inside b { display:block; font-weight:700 }
.inside b.need { margin-top:6px; color:var(--c) }
.inside .cd { display:block; color:var(--dim); font-size:13.5px; line-height:1.3 }
.inside li::marker { color:var(--dim); font-size:12px }
.wgo { margin-top:auto; padding-top:12px; font-size:12.5px; font-weight:800; letter-spacing:1.5px;
       text-transform:uppercase; color:var(--c); text-decoration:none }
a.wgo:hover { text-decoration:underline }

/* A year card on a subject page: its units, each with an arrow that opens the unit's lessons. */
.yr { cursor:default }
.units { list-style:none; margin:10px 0 0; padding:10px 0 0; border-top:1px solid color-mix(in srgb, var(--c) 35%, transparent) }
.units > li { margin:2px 0 }
.acc { display:flex; align-items:flex-start; gap:8px; width:100%; text-align:left; background:none; border:0;
       padding:5px 4px; border-radius:6px; font:inherit; font-size:15px; font-weight:600; line-height:1.3;
       color:var(--fg); cursor:pointer }
.acc:hover { background:color-mix(in srgb, var(--c) 10%, transparent) }
.acc:focus-visible { outline:2px solid var(--c); outline-offset:1px }
.arr { flex:0 0 auto; width:14px; color:var(--c); transition:transform .15s }
.acc[aria-expanded="true"] .arr { transform:rotate(90deg) }
.ls { margin:2px 0 8px; padding:0 0 0 44px; font-size:14px; line-height:1.35 }
.ls li { margin:4px 0 }
.ls li::marker { color:var(--dim); font-size:12px }
.ls a { color:var(--fg); text-decoration:none; border-bottom:1px solid transparent }
.ls a:hover { color:var(--c); border-bottom-color:var(--c) }

.file { display:flex; align-items:center; gap:12px; text-decoration:none; background:var(--panel);
        color:var(--fg); border:1px solid var(--c); border-radius:14px; padding:14px 16px; transition:.15s }
.file:hover { transform:translateY(-2px) }
.fk { font-size:11px; letter-spacing:1.5px; font-weight:800; background:var(--c); color:#fff;
      padding:3px 8px; border-radius:999px; flex:0 0 auto }
html[data-theme="dark"] .fk { color:#0A0C11 }
.ft { display:flex; flex-direction:column; gap:3px; min-width:0 }
.fn { font-size:16px; font-weight:700; line-height:1.2 }
.fd { font-size:13.5px; line-height:1.3; color:var(--dim) }
.chips { display:flex; flex-wrap:wrap; gap:8px }
.chip { background:var(--panel); border:1px solid var(--c); border-left:4px solid var(--c); border-radius:10px;
        padding:8px 14px; font-weight:700; font-size:15px }
.equip { font-size:16px; line-height:1.45; max-width:760px; margin:0 0 8px }

/* ── about this lesson ─────────────────────────────────────────────────────── */
.about { --c:var(--a2) }
.infogrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px }
.info { background:var(--panel); border:1px solid var(--c); border-radius:14px; padding:16px 18px }
.info h3 { margin:0 0 8px; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--c) }
.info p, .info li, .info dd { font-size:15.5px; line-height:1.45; margin:0 0 6px }
.info ol, .info ul { margin:0; padding-left:20px }
.info .aim { font-size:18px; font-weight:600 }
.kw { margin:0 }
.kw dt { font-weight:800; margin-top:8px }
.kw dt:first-child { margin-top:0 }
.kw dd { margin:0; color:var(--dim) }
.mis { border-left:3px solid var(--c); padding:2px 0 2px 12px; margin:0 0 12px }
.mis .m { font-weight:700 }
.mis .r { color:var(--dim) }

/* ── quizzes, with their answers ────────────────────────────────────────────── */
.quiz { margin:0; padding-left:24px }
.quiz .q { background:var(--panel); border:1px solid var(--c); border-radius:12px; padding:12px 16px; margin:0 0 10px }
.quiz .q::marker { font-weight:800; color:var(--c) }
.qstem { font-weight:700; font-size:16px; line-height:1.35; display:flex; flex-direction:column; gap:8px }
.opts { margin:8px 0 0; padding-left:20px; font-size:15px; line-height:1.4 }
.opts li { margin:3px 0; color:var(--dim) }
.opts li span { display:inline }
.opts li.ok { color:var(--fg); font-weight:700 }
.match { border-collapse:collapse; margin-top:8px; font-size:15px }
.match td { padding:4px 8px; vertical-align:top }
.match td:nth-child(2) { color:var(--dim) }
.acc-ans { margin:8px 0 0; font-size:15px }
.qnote { margin:6px 0 0; font-size:14px; color:var(--dim) }
.qimg { display:block; max-width:min(100%, 420px); max-height:320px; border-radius:8px; border:1px solid var(--line); background:#fff; margin:4px 0 }
.opts .qimg { max-width:220px; max-height:180px; display:inline-block; vertical-align:middle }

/* ── transcript ─────────────────────────────────────────────────────────────── */
.tx { background:var(--panel); border:1px solid var(--c); border-radius:12px; padding:12px 16px }
.tx summary { cursor:pointer; font-weight:700 }
.tx p { font-size:15px; line-height:1.5; margin:6px 0; max-width:760px }

footer { border-top:1px solid var(--line); padding:22px 0 40px; font-size:14px; color:var(--dim) }
footer a { color:var(--dim) }


/* Home: one card per year; only the class links on it are clickable, and every card in a row is
   the height of the tallest (Year 7, with two links). */
.big.year .links { margin-top:auto; padding-top:12px; display:flex; flex-direction:column; gap:8px }
.big.year .links .wgo { margin-top:0; padding-top:0; text-decoration:none; color:var(--c) }
.big.year .it-name { font-weight:600; color:var(--dim) }
.yrs { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }

/* The calendar: one list per term — date, what (with the Italian), and who it is for. */
.cal { list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.cal li { display:grid; grid-template-columns:200px 1fr 190px; gap:14px; align-items:baseline;
          padding:12px 4px; border-bottom:1px solid var(--line) }
.cal .cw { font-weight:800; font-size:15px; color:var(--c) }
.cal .cx b { display:block; font-size:16.5px; font-weight:700 }
.cal .cx i { display:block; font-size:14px; color:var(--dim); margin-top:5px }
.cal .cy { font-size:13px; color:var(--dim); text-align:right }
/* Row colours (Kiers, 25 Sep): assessments and reports light orange, breaks and closures light blue,
   conferences light purple, events light pink; the start and end of term plain. */
.cal li { border-radius:8px; margin:4px 0; border-bottom:0; padding:12px 12px }
.cal { border-top:0 }
.cal li.cal-tech, .cal li.cal-reports { background:#FBE3CC }
.cal li.cal-break { background:#DCEBF8 }
.cal li.cal-parents { background:#E9E0F7 }
.cal li.cal-event { background:#F9DDEA }
.cal li.cal-term { background:transparent; border:1px solid var(--line) }
html[data-theme="dark"] .cal li.cal-tech, html[data-theme="dark"] .cal li.cal-reports { background:#3A2614 }
html[data-theme="dark"] .cal li.cal-break { background:#16283A }
html[data-theme="dark"] .cal li.cal-parents { background:#2A2140 }
html[data-theme="dark"] .cal li.cal-event { background:#3A1828 }
.cal .cx .cd { display:block; font-size:14px; line-height:1.4; margin-top:4px; color:var(--fg); opacity:.85 }
@media (max-width:640px) { .cal li { grid-template-columns:1fr; gap:2px } .cal .cy { text-align:left } }

/* Year plans: the projects, then the year week by week (assessments marked, holidays quiet). */
.pd { font-size:15.5px; line-height:1.45; margin:10px 0 0 }
.plcols { display:grid; gap:18px }
.plcols.n2 { grid-template-columns:repeat(auto-fit,minmax(360px,1fr)) }
.plh { font-size:15px; margin:0 0 8px; color:var(--c) }
.plan { list-style:none; margin:0; padding:0 }
.plan li { display:grid; grid-template-columns:110px 1fr auto; gap:12px; align-items:baseline; padding:10px 12px;
           margin:4px 0; border-radius:8px; background:var(--panel) }
.plan .pw { font-weight:800; font-size:14px; color:var(--c) }
.plan .pw small { display:block; font-weight:500; font-size:12.5px; color:var(--dim) }
.plan .pt span { display:block; font-size:15px; line-height:1.35 }
.plan .pl { font-size:12px; color:var(--dim); white-space:nowrap }
.plan li.pl-assess { background:#FBE3CC }
html[data-theme="dark"] .plan li.pl-assess { background:#3A2614 }
.plan .pa { display:inline-block; margin-top:4px; font-style:normal; font-size:11px; font-weight:800; letter-spacing:1.5px;
            text-transform:uppercase; color:#9A3412 }
html[data-theme="dark"] .plan .pa { color:#FDBA74 }
.plan li.pl-off { background:#DCEBF8; grid-template-columns:110px 1fr; padding:7px 12px }
html[data-theme="dark"] .plan li.pl-off { background:#16283A }
.plan li.pl-off .pw { font-weight:600; font-size:12.5px; color:var(--dim) }
.plan li.pl-off .pt { font-size:14px; color:var(--dim) }
@media (max-width:560px) { .plan li { grid-template-columns:1fr } .plan .pl { display:none } }
/* Lessons: the newest first, and marked. */
.wk.latest { border-width:2px }
.wk .herelab { align-self:flex-start; font-size:11px; letter-spacing:2px; font-weight:800; text-transform:uppercase;
               background:var(--c); color:#fff; padding:2px 8px; border-radius:999px; margin-bottom:6px }
.wi { font-size:13.5px; font-style:italic; color:var(--dim); margin-top:7px; line-height:1.4 }  /* Italian: set a little apart */

/* A picture on every Middle School card, above its text. Drawings (PNG) sit whole on white. */
.pic .cimg { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; margin:0 0 12px;
             background:#fff; border:1px solid var(--line) }
.pic .cimg[src$=".png"] { object-fit:contain; padding:8px }
.wd2 { font-size:15px; line-height:1.4; margin-top:6px }
.wk .due { align-self:flex-start; margin-top:12px; font-size:12px; font-weight:800; background:var(--c); color:#fff;
           padding:3px 10px; border-radius:999px }

/* Today's lesson: the button a pupil is meant to press first, so it pulses — clearly. */
.todays { display:flex; flex-wrap:wrap; gap:14px; margin-top:22px }
.today-btn { display:inline-flex; flex-direction:column; text-decoration:none; background:var(--a2); color:#fff;
             font-size:26px; font-weight:800; line-height:1.1; padding:16px 26px; border-radius:16px;
             animation:tf-pulse 1.6s ease-out infinite }
.today-btn span { font-size:13px; font-weight:600; opacity:.9; margin-top:6px }
.today-btn:hover { transform:translateY(-2px) }
@keyframes tf-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--a2) 70%, transparent) }
                      70% { box-shadow:0 0 0 22px color-mix(in srgb, var(--a2) 0%, transparent) }
                      100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--a2) 0%, transparent) } }
@media (prefers-reduced-motion: reduce) { .today-btn { animation:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--a2) 35%, transparent) } }

/* Digital Engineering documents: long reading, so a comfortable measure, and real tables. */
.doc { max-width:820px; font-size:16.5px; line-height:1.6 }
.doc h1 { font-size:30px; margin:34px 0 10px; line-height:1.15 }
.doc > h1:first-child { display:none }  /* the title is already the page heading */
.doc h2 { font-size:21px; letter-spacing:0; text-transform:none; color:var(--fg); margin:28px 0 8px }
.doc h3 { font-size:17px; margin:22px 0 6px }
.doc table { border-collapse:collapse; width:100%; margin:14px 0; font-size:14.5px; line-height:1.4; display:block; overflow-x:auto }
.doc th, .doc td { border:1px solid var(--line); padding:7px 9px; text-align:left; vertical-align:top }
.doc th { background:var(--panel) }
.doc blockquote { margin:14px 0; padding:10px 16px; border-left:4px solid var(--a2); background:var(--panel); border-radius:0 8px 8px 0 }
.doc code { font-size:.9em; background:var(--panel); padding:1px 5px; border-radius:4px }
.doc a { color:var(--a2) }
.src { margin-top:30px; font-size:13px; color:var(--dim) }

/* A link inside a card: an arrow before it and an underline — no "Open" (Kiers, 25 Sep). */
a.go { display:block; font-size:15px; font-weight:700; color:var(--c); text-decoration:underline; text-underline-offset:3px }
a.go::before { content:"→ "; text-decoration:none; display:inline-block; margin-right:4px }
a.go:hover { text-decoration-thickness:2px }

/* Primary year plans: the lesson, what the child can do, and the words (English / Italian). */
.plan .plt { display:block; font-size:15.5px; font-weight:700 }
.plan .obj { display:block; font-size:14.5px; line-height:1.4; margin-top:3px }
.plan .terms { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px }
.plan .terms span { display:inline; font-size:12px; line-height:1.3; padding:2px 8px; border-radius:999px;
                    background:var(--bg); border:1px solid var(--line); color:var(--dim) }

/* Hardware: every machine on one page, a contents list at the top. */
.hw-toc { display:flex; flex-wrap:wrap; gap:10px 28px }
.hw-body { display:grid; grid-template-columns:minmax(0,1fr); gap:18px }
.hw-img { width:100%; max-width:520px; aspect-ratio:16/9; object-fit:cover; border-radius:10px; border:1px solid var(--line) }
.hw .doc h3 { font-size:20px; margin-top:26px }
.hw .doc h4 { font-size:17px }
section.hw { scroll-margin-top:var(--tfh, 160px) }

/* The pathway: years (or projects) left to right, each project a box that opens its page. */
.pflow { display:flex; gap:10px; align-items:stretch; overflow-x:auto; padding:6px 2px 12px }
.pcol { flex:1 1 0; min-width:220px; display:flex; flex-direction:column; gap:10px }
.py { font-size:22px; font-weight:800 }
.ps { font-size:13.5px; color:var(--dim); font-style:italic; margin-top:-6px }
.parrow { align-self:center; font-size:28px; color:var(--a2); font-weight:800; padding:0 2px }
.pnode { display:flex; flex-direction:column; gap:3px; text-decoration:none; color:var(--fg); background:var(--panel);
         border:1px solid var(--a2); border-left:5px solid var(--a2); border-radius:12px; padding:12px 14px; transition:.15s }
.pnode:hover { transform:translateY(-2px) }
.pnode .pn { font-size:11.5px; letter-spacing:2px; text-transform:uppercase; font-weight:800; color:var(--a2) }
.pnode b { font-size:18px; line-height:1.2; text-decoration:underline; text-underline-offset:3px }
.pnode .pw2 { font-size:12.5px; color:var(--dim) }
.pnode .pl2 { font-size:14px; line-height:1.35; margin-top:4px }
.pnode .now, .pnode .later { align-self:flex-start; margin-top:6px; font-size:11px; font-weight:800; letter-spacing:1px;
         text-transform:uppercase; padding:2px 8px; border-radius:999px }
.pnode .now { background:var(--a2); color:#fff }
.pnode .later { border:1px solid var(--line); color:var(--dim) }
.pflow.ks2 .pnode { flex:1 1 0; min-width:170px }
.tylinks { display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:6px }
.ty { display:flex; flex-direction:column; gap:4px }
.ty b { font-size:15px }
.units { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; font-size:14.5px }
.ideas { columns:2; max-width:560px }
section.toc { padding:18px 0; border-top:0 }
.doc h3 { font-size:21px; margin:30px 0 8px }
.doc h4 { font-size:17px; margin:22px 0 6px }
@media (max-width:760px) { .pflow { flex-direction:column } .parrow { transform:rotate(90deg) } .ideas { columns:1 } }
.doc:has(.pflow), .doc:has(.tylinks) { max-width:none }
.doc a.pnode { color:var(--fg) }
.doc a.pnode b { color:var(--a2) }
.pflow.ks2 .pnode { min-width:130px }
.pflow.ks2 .pl2 { font-size:13.5px }
/* KS2: six projects in two rows of three */
.pflow.ks2 { flex-wrap:wrap; row-gap:16px; overflow:visible }
.pflow.ks2 .pnode { flex:1 1 calc(33.33% - 44px); min-width:200px }
.pflow.ks2 .parrow:nth-of-type(3) { display:none }

/* In-page navigation: stays under the top bar while the page scrolls. */
nav.toc { position:sticky; top:var(--tfh, 150px); z-index:50; background:var(--bg); border-bottom:1px solid var(--line); padding:10px 0 }
nav.toc .hw-toc { gap:6px 22px; font-size:14px }
nav.toc a.go { font-size:14px }
section.hw { scroll-margin-top:calc(var(--tfh, 150px) + 60px) }

/* The design cycle: stages A to D side by side. */
.doc:has(.stages) { max-width:none }
.stages { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-top:18px }
.stage { background:var(--panel); border:1px solid var(--line); border-top:5px solid var(--a2); border-radius:12px; padding:14px 16px;
         font-size:14.5px; line-height:1.45 }
.stage .sl { font-size:34px; font-weight:800; color:var(--a2); line-height:1 }
.stage h3 { font-size:17px; margin:6px 0 10px }
.stage h4, .stage h5 { font-size:15px; margin:14px 0 4px }
.stage ul { padding-left:18px; margin:6px 0 }
.stage table { font-size:13px }
@media (max-width:1000px) { .stages { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width:600px) { .stages { grid-template-columns:1fr } }
/* In-page navigation, in columns (Kiers, 26 Sep): the links run down, then across. */
nav.toc { position:static; border-bottom:0; padding:18px 0 6px }
nav.toc .hw-toc, .hw-toc { display:block; columns:3 220px; column-gap:34px }
.hw-toc a.go { display:block; break-inside:avoid; padding:4px 0; font-size:15px }

/* The header: the introduction on the left, "On this page" on the right (every page). */
.hero2 { display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:40px; align-items:start }
.hero .lead { margin-top:16px; max-width:720px }
.hero .lead .intro { margin:0 0 12px }
.toc2 { display:flex; flex-direction:column; gap:2px; border-left:3px solid var(--a2); padding:4px 0 4px 16px; font-size:14.5px }
.toc2-h { font-size:11.5px; letter-spacing:2px; text-transform:uppercase; font-weight:800; color:var(--dim); margin-bottom:6px }
.toc2 a { color:var(--fg); text-decoration:none; padding:3px 0; line-height:1.3 }
.toc2 a:hover { color:var(--a2); text-decoration:underline; text-underline-offset:3px }
section[id] { scroll-margin-top:calc(var(--tfh, 150px) + 12px) }
@media (max-width:860px) { .hero2 { grid-template-columns:1fr; gap:18px } .toc2 { border-left:0; border-top:3px solid var(--a2); padding:12px 0 0 } }

/* Combined: our lesson, then the library lessons that teach the same thing. */
.cm-list { list-style:none; margin:14px 0 0; padding:0 }
.cm-list > li { padding:12px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:18px }
.cm-ours b { color:var(--a2); margin-right:6px; font-size:13px }
.cm-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.cm-links li { padding-left:12px; border-left:4px solid var(--line) }
.cm-links li.cm-strong { border-left-color:#16A34A }
.cm-links li.cm-partial { border-left-color:#E2A145 }
.cm-links a { font-weight:700; color:var(--fg) }
.cm-meta, .cm-why { display:block; font-size:12.5px; color:var(--dim) }
.cm-why { font-style:italic }
.cm-none { font-size:13.5px; color:var(--dim); font-style:italic }
.cm-units { display:flex; flex-direction:column; gap:3px; margin:6px 0 4px }
.cm-key i { display:inline-block; width:12px; height:12px; border-radius:3px; margin:0 4px 0 12px; vertical-align:-1px }
.cm-key i.cm-strong { background:#16A34A } .cm-key i.cm-partial { background:#E2A145 }
.cm-years { list-style:none; padding:0; margin:0 } .cm-years li { padding:8px 0; border-top:1px solid var(--line) }
@media (max-width:760px) { .cm-list > li { grid-template-columns:1fr; gap:8px } }
.hero2 { margin-top:4px }
.hero2 .hl > .sub:first-child { margin-top:0 }
.toc2 { margin-top:4px }

/* Pathway cards: the project number, big, in a rounded square top right (Kiers, 26 Sep). */
.pnode { position:relative; padding-right:62px }
.pnode .pbox { position:absolute; top:10px; right:10px; width:42px; height:42px; border-radius:11px; background:var(--a2);
               color:#fff; font-size:26px; font-weight:800; line-height:42px; text-align:center }

/* SIS Combined overview: every year, project and lesson at a glance. */
.ov-grid { display:grid; gap:14px; margin:12px 0 16px }
.ov-grid.n1 { grid-template-columns:1fr } .ov-grid.n2 { grid-template-columns:repeat(2, minmax(0, 1fr)) }
.ov-grid.n3 { grid-template-columns:repeat(3, minmax(0, 1fr)) }
.ov-p { background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--a2); border-radius:10px; padding:10px 12px }
.ov-p h3 { font-size:15px; margin:0 0 8px; line-height:1.25 }
.ov-p ol { margin:0; padding-left:20px; font-size:13px; line-height:1.3 }
.ov-p li { margin:0 0 7px }
.ov-l { display:block; font-weight:600; color:var(--fg) }
.ov-o { display:block; color:var(--dim); text-decoration:none; padding-left:10px; border-left:3px solid var(--line); margin-top:2px }
.ov-o:hover { color:var(--fg); text-decoration:underline }
.ov-o.ov-strong { border-left-color:#16A34A } .ov-o.ov-partial { border-left-color:#E2A145 }
.ov-o i { font-style:normal; font-weight:800; font-size:10.5px; margin-right:5px; color:var(--fg) }
.ov-own { display:block; font-style:italic; color:var(--dim); padding-left:10px; border-left:3px solid transparent }
.ov-rules { margin:6px 0 0; padding-left:20px; max-width:900px } .ov-rules li { margin:0 0 8px }
@media (max-width:900px) { .ov-grid.n2, .ov-grid.n3 { grid-template-columns:1fr } }

/* SIS Combined plan */
.pc-over { max-width:900px; margin:4px 0 12px; font-size:15px; line-height:1.45 }
.ov-p { position:relative }
.pc-n { position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:8px; background:var(--a2); color:#fff;
        font-weight:800; font-size:17px; line-height:30px; text-align:center }
.ov-p h3 { padding-right:38px }
.pc-span { font-size:12px; color:var(--dim); margin:-4px 0 6px }
.pc-b { font-size:13px; line-height:1.35; margin:0 0 8px; color:var(--fg) }
.pc-list { margin:0; padding-left:0 !important; list-style:none; font-size:12.5px; line-height:1.3 }
.pc-list li { margin:0 0 7px; padding-top:6px; border-top:1px solid var(--line) }
.pc-d { display:inline-block; min-width:48px; font-weight:700; color:var(--a2); font-size:11.5px }
.pc-list .ov-l { display:inline }
.pc-o { display:block; color:var(--dim); text-decoration:none; padding-left:8px; border-left:3px solid #16A34A; margin-top:2px }
.pc-o:hover { color:var(--fg); text-decoration:underline }
.pc-o i { font-style:normal; font-weight:800; font-size:10.5px; margin-right:5px; color:var(--fg) }
.pc-new { display:inline-block; margin-top:3px; font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
          padding:1px 7px; border-radius:999px; background:#E9E0F7; color:#5B21B6 }
.pc-t { display:inline-block; margin-left:5px; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:1px 6px; border-radius:999px; vertical-align:1px }
.pc-out { background:#DCEBF8; color:#1E4E7A } .pc-chk { background:#FBE3CC; color:#9A3412 } .pc-ass { background:#F9DDEA; color:#9D174D }
html[data-theme="dark"] .pc-new { background:#2A2140; color:#D8B4FE } html[data-theme="dark"] .pc-out { background:#16283A; color:#93C5FD }
html[data-theme="dark"] .pc-chk { background:#3A2614; color:#FDBA74 } html[data-theme="dark"] .pc-ass { background:#3A1828; color:#F9A8D4 }
.pc-facts { display:grid; grid-template-columns:160px 1fr; gap:6px 16px; margin:10px 0 14px; max-width:980px }
.pc-facts dt { font-weight:700; font-size:13.5px } .pc-facts dd { margin:0; font-size:14.5px; line-height:1.4 }
.pc-table { width:100%; border-collapse:collapse; margin-top:12px; font-size:14px }
.pc-table th, .pc-table td { text-align:left; vertical-align:top; padding:8px 10px; border-top:1px solid var(--line) }
.pc-table th { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--dim) }
.pc-table td:first-child { white-space:nowrap; width:120px }
.pc-f { font-size:13.5px; color:var(--dim); margin-top:3px } .pc-k { font-size:12px; color:var(--dim); font-style:italic; margin-top:2px }
.pc-sum { border-collapse:collapse; margin-top:14px; font-size:14px } .pc-sum td, .pc-sum th { padding:5px 14px 5px 0; text-align:left; border-top:1px solid var(--line) }
.pc-left { padding-left:18px } .pc-left li { margin:0 0 6px }
@media (max-width:760px) { .pc-facts { grid-template-columns:1fr } .pc-table td:last-child { width:auto } }

/* Breathing room, site-wide (Kiers, 26 Sep): a little more space between paragraphs, under headings and before
   tables — not a lot. */
body { line-height:1.5 }
p { margin:0 0 14px }
section h2 { margin-bottom:10px }
.h2it { margin:8px 0 18px }
.doc { line-height:1.62 }
.doc p { margin:0 0 16px }
.doc h2, .doc h3 { margin-top:30px; margin-bottom:12px }
.doc h4, .doc h5 { margin-top:22px; margin-bottom:8px }
.doc ul, .doc ol { margin:0 0 16px }
.doc li { margin:0 0 6px }
.doc table, table { margin-top:18px; margin-bottom:18px }
.doc blockquote { margin:18px 0 }
.hero .sub { margin-top:6px }
.intro { margin-bottom:16px }
.ov-rules li, .pc-facts dd { margin-bottom:8px }
.pc-table { margin-top:18px }
.cm-units { margin:10px 0 12px }

/* Cards: consistent inner spacing everywhere (Kiers, 26 Sep). */
.doc a.file, .doc a.wk, .doc a.big, .doc a.pnode { color:var(--fg); text-decoration:none }
.file { padding:14px 18px; gap:14px; align-items:center }
.file .ft { gap:4px }
.file .fn { color:var(--a2) }
.wk, .big { gap:4px }
.wk .wt, .big .bt { margin-top:4px }
.wk .wd, .wk .wd2, .wk .wi, .big .wd, .big .wd2 { margin-top:4px }
.wk .cimg, .big .cimg { margin-bottom:12px }
.grid { gap:16px }
.pc-taught { display:inline-block; margin-top:3px; font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
             padding:1px 7px; border-radius:999px; background:#DCFCE7; color:#166534 }
html[data-theme="dark"] .pc-taught { background:#14331F; color:#86EFAC }
.ov-p.pc-intro { border-top-color:#16A34A }
.ov-p.pc-intro .pc-n { background:#16A34A }
/* Bolt's scenes are drawn edge to edge: shown whole, on the scene's own cream. */
.pic .cimg[src*="/lessons/e"] { object-fit:contain; background:#FDF8EC; padding:0 }

/* Archived pages: a quiet note under the header. */
.archived-note { background:#FBE3CC; color:#7C2D12; font-size:14px; padding:9px 0; border-bottom:1px solid #F5C9A0 }
html[data-theme="dark"] .archived-note { background:#3A2614; color:#FDBA74; border-bottom-color:#5A3A1E }
.archived-note a { color:inherit; font-weight:700 }
/* The June block in a plan */
.ov-p.pc-end { border-top-color:#E2A145 } .pc-endn { background:#E2A145 !important }
.pc-lib { display:block }
.pc-taughtt { background:#DCFCE7; color:#166534 }

/* ── Design pass (Kiers, 26 Sep: "professional and stylish") ─────────────────────────────────────
   Quiet dividers instead of heavy black bands; more air between sections; a readable measure for text. */
section { padding:44px 0; border-top:1px solid var(--line) }
.hero { padding:34px 0 38px; border-bottom:0 }
.hero + section, .archived-note + section { border-top:1px solid var(--line) }
section h2 { margin:0 0 14px; font-size:19px; letter-spacing:2.2px }
.h2it { margin:-6px 0 20px }
.hero h1 { letter-spacing:-.5px }
.hero .sub { font-size:19px }
.hero .lead { font-size:16px; line-height:1.6 }
.intro { max-width:760px; line-height:1.6 }
.doc { max-width:780px }
.doc:has(.pflow), .doc:has(.tylinks), .doc:has(.stages), .doc:has(.grid) { max-width:none }
.grid { gap:18px }
.big, .wk { border-radius:14px; box-shadow:0 1px 2px rgba(20,24,31,.05) }
.big:hover, a.wk:hover { box-shadow:0 6px 18px rgba(20,24,31,.10) }
.pc-over, .about { max-width:780px; font-size:16px; line-height:1.65; color:var(--fg) }
.pc-table { border-collapse:collapse }
.pc-table tr:first-child th { border-top:0 }
.pc-table td { padding:14px 12px }
.pc-table b { font-size:15.5px }
.pc-facts { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px; max-width:none }
.ov-grid { gap:16px }
.ov-p { padding:14px 16px }
footer { margin-top:0; padding:28px 0 44px; border-top:1px solid var(--line) }
.toc2 { padding-left:18px }
.toc2 a { font-size:14px }
/* In the at-a-glance columns, a project's brief is a teaser (four lines); the year page has it in full. */
.ov-p .pc-b { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden }
/* year page: the student intro and its lists; a project's blurb and lesson jump; staff preparation */
.yr-lists{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:22px}
.yr-lists h3{font-size:15px;margin:0 0 8px}
.yr-lists ul{margin:0;padding-left:18px}
.yr-lists li{margin:4px 0;line-height:1.45}
@media(max-width:800px){.yr-lists{grid-template-columns:1fr;gap:16px}}
.pc-blurb{font-size:17px;line-height:1.55;max-width:70ch;margin:10px 0 16px}
.pc-sb{font-size:14px;color:var(--mut,#666);max-width:80ch}
.pc-jump{font:inherit;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg,#fff);max-width:100%}
.pc-table tr:target td{background:rgba(255,200,0,.14)}
.pc-table tr[id]{scroll-margin-top:90px}
.pc-prep{margin-top:8px;padding:8px 12px;border-left:3px solid var(--a2,#999);background:rgba(0,0,0,.03);font-size:14px}
.pc-prep ul{margin:4px 0 0;padding-left:18px}
/* SIS lesson pages (sis_lessons.py) */
.ls-obj li,.ls-c li,.ls-mis li{margin:6px 0;line-height:1.45}
.ls-kw{border-collapse:collapse;width:100%;max-width:900px}
.ls-kw th,.ls-kw td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.ls-kw th{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
.ls-it{color:var(--a2);font-style:italic}
.ls-steps{padding-left:22px;max-width:820px}.ls-steps li{margin:0 0 12px}
.ls-min{margin-left:10px;font-size:13px;color:var(--dim)}
.ls-two{display:grid;grid-template-columns:1fr 1fr;gap:28px}@media(max-width:760px){.ls-two{grid-template-columns:1fr}}
.ls-dls{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 16px}
.ls-dl{display:flex;flex-direction:column;min-width:180px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--fg);background:var(--panel)}
.ls-dl span{font-size:13px;color:var(--dim)}.ls-dl:hover{border-color:var(--a2)}
.ls-q>li{margin:0 0 12px}.ls-q ol{list-style:upper-alpha;margin:4px 0}.ls-q li.ok{font-weight:700;color:var(--a2)}
.ls-mis div{color:var(--dim)}
/* quizzes on lesson pages (src/tf/quiz.js) */
.qz{max-width:880px}.qz-me{font-weight:700;margin:0 0 14px;font-size:18px}.qz-me span{font-size:26px}
.qz-ask{font-size:20px;font-weight:700}
.qz-animals{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.qz-animal{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:2px solid var(--line);border-radius:14px;background:var(--panel);color:var(--fg);font:inherit;cursor:pointer}
.qz-animal span{font-size:40px;line-height:1.1}.qz-animal i{font-size:12px;color:var(--a2)}.qz-animal:hover{border-color:var(--a2)}
.qz-animal:disabled{opacity:.3;cursor:not-allowed}
.qz-q{margin:0 0 22px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.qz-h{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:18px;margin-bottom:10px}
.qz-n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--tf-green,#617b30);color:#fff;display:grid;place-items:center;font-size:14px}
.qz-t{flex:1}.qz-say{border:0;background:none;font-size:26px;cursor:pointer;margin-left:.4em}
.qz-os{display:grid;grid-template-columns:1fr 1fr;gap:10px}.qz-os.n3{grid-template-columns:repeat(3,1fr)}.qz-os.n2{grid-template-columns:1fr 1fr}
@media(max-width:640px){.qz-os,.qz-os.n3{grid-template-columns:1fr}}
.qz-o{display:flex;gap:10px;align-items:center;text-align:left;padding:12px 14px;border:2px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg);font:inherit;cursor:pointer}
.qz-o span{flex:none;font-weight:700;color:var(--dim)}.qz-o b{font-weight:500}
.qz-o.on{border-color:var(--a2);background:rgba(190,24,93,.08)}
.qz-p .qz-o{padding:18px;font-size:20px}.qz-p .qz-h{font-size:22px}
.qz-done .qz-o{cursor:default}.qz-o.right{border-color:#15803d;background:rgba(21,128,61,.12)}.qz-o.wrong{border-color:#b91c1c;background:rgba(185,28,28,.1)}
.qz-why{margin-top:8px;font-size:14px;color:var(--dim)}
.qz-foot{display:flex;gap:14px;align-items:center}.qz-send{font:inherit;font-weight:700;padding:12px 26px;border:0;border-radius:24px;background:var(--a2);color:#fff;cursor:pointer}
.qz-send:disabled{opacity:.4;cursor:not-allowed}.qz-score{font-size:22px;margin-right:8px}
.qz-colours{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-bottom:18px}
.qz-colour{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border:2px solid var(--line);border-radius:14px;background:var(--panel);color:var(--fg);font:inherit;cursor:pointer}
.qz-colour span{width:44px;height:44px;border-radius:50%;border:2px solid rgba(0,0,0,.15)}.qz-colour i{font-size:12px;color:var(--a2)}
.qz-colour.on{border-color:var(--fg);box-shadow:0 0 0 2px var(--fg)}
.qz-animals .qz-animal{border-color:var(--qc,var(--line));border-width:3px}
.qz-dot{display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:middle;margin-right:6px}
/* Primary quizzes: coloured, shaped answer tiles; Italian lines; stars (Kiers, 26 Sep: E1–E2 icons, pictures, colours, animation) */
.qz-t i,.qz-o i{display:block;font-size:.85em;font-style:italic;color:var(--a2);font-weight:400}
.qz-p .qz-o{color:#fff;border:0;font-weight:700;min-height:74px;position:relative;transition:transform .12s}
.qz-p .qz-o i{color:#fff;opacity:.9}.qz-p .qz-o span{color:#fff;font-size:28px}
.qz-p .qz-o[data-i="0"]{background:#dc2626}.qz-p .qz-o[data-i="1"]{background:#2563eb}.qz-p .qz-o[data-i="2"]{background:#ca8a04}.qz-p .qz-o[data-i="3"]{background:#16a34a}
.qz-p .qz-o:active{transform:scale(.96)}.qz-p .qz-o.on{outline:5px solid var(--fg);outline-offset:2px;background-blend-mode:normal}
.qz-p.qz-done .qz-o:not(.right):not(.wrong){opacity:.35}
.qz-p .qz-o.right{outline:5px solid #15803d;animation:qz-bounce .6s 2}.qz-p .qz-o.wrong{outline:5px dashed #b91c1c}
@keyframes qz-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px) scale(1.04)}}
.qz{position:relative}.qz-star{position:absolute;top:0;font-size:32px;pointer-events:none;animation:qz-fall 2.4s ease-in forwards}
@keyframes qz-fall{0%{transform:translateY(-20px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(520px) rotate(360deg);opacity:0}}
.qz-p .qz-say{font-size:34px;animation:qz-pulse 1.8s infinite}@keyframes qz-pulse{50%{transform:scale(1.15)}}
.ls-ic{font-size:26px;margin-right:8px;vertical-align:middle}
.qz.caps,.qz.caps button,body[data-caps] .qz button{text-transform:uppercase}
/* home page (Kiers, 26 Sep): a short picture of the department */
.home h2{margin-bottom:18px}
.home-two{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:start}.home-two.rev{grid-template-columns:1fr 1.6fr}
.home-img{width:100%;border-radius:14px;display:block;aspect-ratio:4/3;object-fit:cover}
@media(max-width:820px){.home-two,.home-two.rev{grid-template-columns:1fr}}
.home-ks{list-style:none;padding:0;margin:0}.home-ks li{padding:10px 0;border-bottom:1px solid var(--line);line-height:1.45}
.home-ks b{display:block;font-size:17px}.home-ks span{display:block;font-size:13px;color:var(--a2);margin-bottom:2px}
.home-fw{font-size:14px;color:var(--dim);margin-top:14px}
.home-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
.home-cols h3{font-size:15px;margin:0 0 6px}.home-cols ul{margin:0;padding-left:18px;font-size:14px}.home-cols li{margin:3px 0}
@media(max-width:820px){.home-cols{grid-template-columns:1fr}}
.home-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.home-steps li{position:relative;padding:16px 16px 14px;border-radius:12px;background:var(--panel);font-size:14px;line-height:1.45;border-top:4px solid var(--a1)}
.home-steps li:nth-child(2){border-color:var(--a2)}.home-steps li:nth-child(3){border-color:var(--a3)}.home-steps li:nth-child(4){border-color:var(--a4)}
.home-steps b{display:block;font-size:16px}.home-steps span{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
@media(max-width:820px){.home-steps{grid-template-columns:1fr 1fr}}
/* This week */
.wk-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:820px){.wk-list{grid-template-columns:1fr}}
.wk{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.wk h3{margin:0 0 6px;font-size:18px}.wk h3 span{display:block;font-size:13px;font-weight:400;color:var(--a2);margin-top:2px}
.wk p{margin:0 0 12px;line-height:1.5;font-size:15px}
.wk-go{display:inline-block;padding:8px 16px;border-radius:20px;background:var(--tf-green,#617b30);color:#fff;text-decoration:none;font-weight:700;font-size:14px}
.home-cols.two{grid-template-columns:1fr 1fr;gap:32px}.home-cols.two p{font-size:15px;line-height:1.55;margin:0}@media(max-width:820px){.home-cols.two{grid-template-columns:1fr}}
.wk p.wk-pr,.wk p.wk-ls{margin:0 0 6px}.wk p.wk-obj{margin:0 0 12px}
.home-pair{display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid var(--line)}
.home-pair>section{border-top:0}.home-pair>section>.wrap{max-width:none;padding:0}.home-pair p{font-size:15px;line-height:1.55;margin:0}
@media(max-width:820px){.home-pair{grid-template-columns:1fr;gap:0}}
.home-pair{border-top:0}.home-row{border-top:1px solid var(--line)}
/* Pedagogy pages */
sup.cite{font-size:.72em;line-height:0}sup.cite a{text-decoration:none;color:var(--a2)}
.refs{font-size:14px;line-height:1.5}.refs li{margin:6px 0;scroll-margin-top:90px}.refs li:target{background:rgba(190,24,93,.1)}
.refs a{word-break:break-all;color:var(--dim)}
.ped-t{border-collapse:collapse;width:100%;margin:10px 0;font-size:14.5px}.ped-t th,.ped-t td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.ped-t th{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}.ped-t td:first-child{width:120px}
.ped-list li{margin:8px 0}
/* Python editor (src/tf/python.js) */
.py-ed{max-width:960px}.py-code{width:100%;min-height:260px;box-sizing:border-box;font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:12px 14px;border:1px solid var(--line);border-radius:10px 10px 0 0;background:#14181f;color:#f4f3ee;tab-size:4;resize:vertical}
.py-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px;background:var(--panel);border:1px solid var(--line);border-top:0}
.py-bar button{font:inherit;font-weight:700;padding:7px 14px;border-radius:18px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.py-bar .py-run{background:#15803d;color:#fff;border:0}.py-bar button:disabled{opacity:.4;cursor:default}.py-msg{font-size:13px;color:var(--dim)}
.py-out{min-height:120px;max-height:360px;overflow:auto;margin:0;padding:12px 14px;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;background:var(--bg);font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap}
.py-err{color:#b91c1c}.py-help{color:var(--a2);font-family:inherit}.py-note{color:var(--dim)}.py-typed{color:#2563eb}
.py-in{font:inherit;border:0;border-bottom:2px solid #2563eb;background:transparent;color:var(--fg);outline:none;min-width:200px}
/* one picture on each page (images.py): natural shape, modest size */
.hero-pic{margin:26px 0 0;display:inline-block;max-width:100%}
.hero-pic img{display:block;max-width:min(560px,100%);max-height:300px;width:auto;height:auto;border-radius:12px}
.hero-pic figcaption{font-size:11px;color:var(--dim);margin-top:4px}.hero-pic figcaption a{color:inherit}
/* Our hardware */
.hw-item{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:start;max-width:1000px}
.hw-item p{line-height:1.6;margin:0 0 12px}.hw-who{font-size:14px;color:var(--a2);font-weight:600}
.hw-pic{margin:0}.hw-pic img{display:block;max-width:100%;max-height:280px;width:auto;border-radius:12px;background:#fff}
.hw-pic figcaption{font-size:11px;color:var(--dim);margin-top:4px}.hw-pic figcaption a{color:inherit}
@media(max-width:760px){.hw-item{grid-template-columns:1fr}}
/* page pictures sit on the right of one block of text, and the text flows round them (Kiers, 26 Sep) */
.side-pic{float:right;margin:4px 0 14px 32px;max-width:42%}
.side-pic img{display:block;max-width:100%;max-height:280px;width:auto;height:auto;border-radius:12px}
.side-pic figcaption{font-size:11px;color:var(--dim);margin-top:4px;text-align:right}.side-pic figcaption a{color:inherit}
section .wrap::after{content:"";display:block;clear:both}
.hw-item{display:block;max-width:1000px}
@media(max-width:700px){.side-pic{float:none;margin:0 0 14px;max-width:100%}}
/* a picture beside one paragraph; what follows runs full width (Kiers, 26 Sep) */
.pic-row{display:flex;gap:32px;align-items:flex-start;margin:0 0 16px}
.pic-row .pic-txt{flex:1 1 55%;min-width:0}.pic-row .pic-txt>p:first-child{margin-top:0}
.pic-row .side-pic{float:none;margin:0;flex:0 1 40%;max-width:40%}
.pic-row .side-pic img{max-height:300px}
@media(max-width:700px){.pic-row{flex-direction:column}.pic-row .side-pic{max-width:100%}}
.side-pic.solo{float:none;display:block;margin:0 0 18px;max-width:min(420px,100%)}
/* build list */
.bl-card{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 16px;background:var(--panel)}
.bl-h{font-size:16px;margin-bottom:6px}.bl-h a{font-size:13px;margin-left:8px}
.bl-s{font-size:11px;text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:10px;margin-left:6px}
.bl-written{background:#dcfce7;color:#15803d}.bl-not-written{background:#fee2e2;color:#b91c1c}
.bl-card h4{margin:12px 0 4px;font-size:14px}.bl{list-style:none;padding:0;margin:0}.bl li{margin:4px 0;font-size:14px;line-height:1.4}
.bl input{margin-right:6px}
/* lesson materials on the page: targets, jobs, flashcards (screen-first) */
.ls-check{display:flex;flex-wrap:wrap;gap:12px}.ls-check label{display:flex;gap:10px;align-items:center;padding:14px 18px;border:2px solid var(--line);border-radius:12px;background:var(--panel);font-size:18px;font-weight:700;cursor:pointer}
.ls-check input{width:26px;height:26px}
.ls-roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ls-role{padding:14px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}.ls-role span{font-size:34px;display:block}.ls-role i{display:block;color:var(--a2);font-size:13px}.ls-role p{margin:6px 0 0;font-size:14px}
.ls-fcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.ls-fc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px;min-height:150px;border:2px solid var(--line);border-radius:14px;background:var(--bg);color:var(--fg);font:inherit;cursor:pointer}
.ls-fc img{max-width:100%;max-height:90px;border-radius:8px}.ls-fc b{font-size:22px}.ls-fc i{color:var(--a2)}.ls-fc span{display:none;font-size:13px;color:var(--dim)}
.ls-fc.flip span{display:block}.ls-fc.flip{border-color:var(--a2)}
/* My work (KS3) */
.wk2{max-width:880px}.wk2 h3{margin:18px 0 8px}.wk2-who{font-size:14px;color:var(--dim)}
.wk2-task{display:block;margin:0 0 12px;line-height:1.45}.wk2 textarea{display:block;width:100%;box-sizing:border-box;margin-top:4px;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}
.wk2-files ul{padding-left:18px}.wk2-status{margin-top:10px;font-size:13px;color:var(--dim)}
.wk2-fb{padding:10px 14px;border-left:4px solid var(--a2);background:var(--panel);border-radius:8px;margin:8px 0 14px}
.ls-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.ls-card{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:12px;border:1px dashed var(--line);border-radius:10px;background:var(--panel);font-size:15px}
.ls-card img{max-width:100%;max-height:80px}
/* Primary on the tablet (Kiers, 27 Sep): the QR code for the board, "Who are you?", and picture cards to tap when found */
.pp-top{padding-top:18px}.pp-in{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.pp-qr{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px;color:#14181f}
.pp-qr svg{width:170px;height:170px;display:block}
.pp-me{flex:1;min-width:260px}.pp-badge{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:bold;padding:12px 16px;border:2px solid var(--line);border-radius:14px;background:var(--panel)}
.pp-badge .e{font-size:40px}.pp-badge i{font-weight:normal;font-size:16px;color:var(--a2)}.pp-badge button{margin-left:auto;font-size:13px}
.ls-cards button.ls-card{font:inherit;color:inherit;cursor:pointer;position:relative;min-height:150px;font-size:20px;font-weight:bold}
.ls-cards button.ls-card img{max-height:120px}
.ls-card.got{border:3px solid #16a34a;background:#dcfce7}.ls-card.got:after{content:"✓";position:absolute;top:6px;right:10px;font-size:34px;color:#16a34a}
/* Lesson pages (Kiers, 27 Sep): numbered steps, code on cards, the flashcard app, the video, the project introduction */
.ls-steps{list-style:none;counter-reset:st;padding-left:0}.ls-steps li{counter-increment:st;position:relative;padding:10px 12px 10px 62px;margin:0 0 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.ls-steps li:before{content:counter(st);position:absolute;left:12px;top:10px;width:38px;height:38px;border-radius:50%;background:var(--a2);color:#fff;font-weight:bold;font-size:20px;display:flex;align-items:center;justify-content:center}
.ls-steps li b{font-size:17px;margin-right:8px}
.ls-cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.ls-card img{max-height:150px}
.ls-card code,.py-exp code{font-family:ui-monospace,Menlo,Consolas,monospace;background:#1e1e1e;color:#f5f5f5;padding:8px 10px;border-radius:8px;font-size:16px;white-space:pre-wrap;display:block;text-align:left;width:100%;box-sizing:border-box}
.py-exp code{display:inline-block;width:auto;font-size:14px}.py-exp{border-collapse:collapse;max-width:880px;width:100%}.py-exp td{border:1px solid var(--line);padding:8px 10px;vertical-align:top}
.py-task{font-size:17px;line-height:1.5}.py-task li{margin:0 0 6px}
.fc-app{max-width:560px;margin:0 auto;text-align:center}.fc-prog{font-size:14px;color:var(--dim);margin-bottom:8px}
.fc-card{width:100%;min-height:280px;border:2px solid var(--line);border-radius:18px;background:var(--bg);color:var(--fg);font:inherit;cursor:pointer;padding:22px;display:flex;align-items:center;justify-content:center}
.fc-card img{max-height:150px;max-width:100%;border-radius:10px;display:block;margin:0 auto 10px}.fc-card b{display:block;font-size:34px}.fc-card small{display:block;color:var(--dim);margin-top:10px}
.fc-card .fc-back{display:none}.fc-card.flip .fc-front{display:none}.fc-card.flip .fc-back{display:block}.fc-card.flip{border-color:var(--a2)}
.fc-back i{display:block;color:var(--a2);font-size:20px;margin:4px 0 12px}.fc-back p{font-size:18px;margin:0}
.fc-bar{display:flex;gap:12px;justify-content:center;margin-top:12px}.fc-bar button{font:inherit;font-size:17px;font-weight:bold;padding:12px 18px;border-radius:12px;border:0;cursor:pointer;color:#fff}
.fc-yes{background:#16a34a}.fc-no{background:#dc2626}
.ls-vid{position:relative;max-width:880px;aspect-ratio:16/9}.ls-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px}
.pi-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px;align-items:center}.pi-pic svg{width:100%;height:auto;background:#fff;border-radius:12px;border:1px solid var(--line)}
@media (max-width:700px){.pi-top{grid-template-columns:1fr}}
.pi-cycle{list-style:none;counter-reset:cy;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pi-cycle li{counter-increment:cy;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel)}.pi-cycle li:before{content:counter(cy) " ›";color:var(--a2);font-weight:bold;margin-right:4px}
.pi-cycle b{font-size:17px}.pi-cycle span{display:block;font-size:14px;color:var(--dim);margin-top:4px}
.wk2-part{border:2px solid var(--line);border-radius:14px;padding:4px 16px 14px;margin:0 0 16px}.wk2-part>p{color:var(--dim);margin-top:0}
.fc-bar[hidden]{display:none}
/* Colour-coded sections of a lesson page (Kiers, 27 Sep). Each colour: --k (strong) for tags and edges.
   Primary (data-stage="p"): bright cells with a thick edge. KS3 (data-stage="s"): a light tint and a thin edge. */
section[data-c="purple"]{--k:#7c3aed}section[data-c="blue"]{--k:#2563eb}section[data-c="teal"]{--k:#0d9488}section[data-c="green"]{--k:#16a34a}
section[data-c="orange"]{--k:#ea580c}section[data-c="yellow"]{--k:#ca8a04}section[data-c="red"]{--k:#dc2626}section[data-c="grey"]{--k:#64748b}
section[data-c="pink"]{--k:#db2777}section[data-c="brown"]{--k:#92400e}
section[data-c]>.wrap{border-radius:18px;padding:18px 22px 22px;border:2px solid color-mix(in srgb,var(--k) 45%,transparent);background:color-mix(in srgb,var(--k) 9%,var(--bg))}
body[data-stage="p"] section[data-c]>.wrap{border:4px solid var(--k);background:color-mix(in srgb,var(--k) 20%,var(--bg))}
body[data-stage="s"] section[data-c]>.wrap{border-left-width:6px;border-left-color:var(--k)}
section[data-c] h2{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cs-tag{font-size:12px;letter-spacing:.5px;text-transform:none;font-weight:bold;padding:3px 10px;border-radius:999px;border:2px solid var(--k);color:var(--k);background:var(--bg)}
body[data-stage="p"] .cs-tag{background:var(--k);color:#fff;font-size:14px}
.cs-purple{--k:#7c3aed}.cs-blue{--k:#2563eb}.cs-teal{--k:#0d9488}.cs-green{--k:#16a34a}.cs-orange{--k:#ea580c}.cs-yellow{--k:#ca8a04}.cs-red{--k:#dc2626}.cs-grey{--k:#64748b}.cs-pink{--k:#db2777}.cs-brown{--k:#92400e}
/* Bolt (Primary) */
.bolt{position:relative;border:0;background:none;padding:40px 0 0;cursor:pointer;width:170px;flex:none}
.bolt img{width:150px;display:block;margin:0 auto;animation:bolt-bob 2.4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes bolt-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.bolt-say{position:absolute;top:-6px;left:0;right:-30px;background:#fff;color:#14181f;border:2px solid #14181f;border-radius:14px;padding:6px 10px;font-size:14px;font-weight:bold;line-height:1.25;z-index:1}
.bolt-say:after{content:"";position:absolute;left:60px;bottom:-9px;width:14px;height:14px;background:#fff;border-right:2px solid #14181f;border-bottom:2px solid #14181f;transform:rotate(45deg)}
.bolt-say.pop{animation:bolt-pop .35s ease-out}@keyframes bolt-pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.pi-pic img{width:100%;border-radius:12px}
@media (prefers-reduced-motion:reduce){.bolt img{animation:none}}
/* ===== The kids' app (Primary, on the tablet) — src/tf/kidapp.js ===== */
body.kid>*:not(.kid-app):not(.kid-reward):not(.kid-star):not(.kid-switch):not(.bp):not(.bp-later):not(.tf-mini):not(.kid-qr-btn):not(.kid-qr-ov):not(.kid-recon):not(.tf-hush):not(.ls-ghost):not(.tf-piano):not(.bc-clp):not(.bc-clk){display:none!important}
body.kid{background:#fef6e4;overflow-x:hidden}
.kid-app{min-height:100vh;display:flex;flex-direction:column;font-size:24px;color:#14181f;font-family:inherit}
.kid-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:10px 16px;background:#fff;border-bottom:4px solid #14181f}
.kid-bolt-s{width:54px;animation:bolt-bob 2.4s ease-in-out infinite}
.kid-me{display:flex;align-items:center;gap:8px;font-weight:bold;font-size:22px;padding:6px 14px 6px 6px;border-radius:999px;border:3px solid var(--c)}
.kid-me span{width:40px;height:40px;border-radius:50%;background:var(--c);display:flex;align-items:center;justify-content:center;font-size:26px}
.kid-prog{flex:1;height:18px;border-radius:999px;background:#e5e7eb;overflow:hidden;border:2px solid #14181f}.kid-prog span{display:block;height:100%;background:#16a34a;transition:width .6s}
.kid-stage{flex:1;padding:18px 16px 130px}
.kid-screen{max-width:980px;margin:0 auto;animation:kid-in .35s ease-out}
@keyframes kid-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.kid-nav{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:12px;background:#fff;border-top:4px solid #14181f}
.kid-nb{width:72px;height:72px;border-radius:20px;border:4px solid #14181f;background:#fde68a;font-size:36px;cursor:pointer;box-shadow:0 5px 0 #14181f;transition:transform .1s}
.kid-nb:active{transform:translateY(4px);box-shadow:0 1px 0 #14181f}.kid-nb.on{background:#60a5fa;transform:scale(1.08)}.kid-nb.ok{background:#86efac}
.kid-nb:disabled{background:#e5e7eb;opacity:.7;box-shadow:none;cursor:not-allowed}
.kid-hello{display:flex;align-items:center;gap:18px;margin:6px 0 18px}.kid-bolt-l{width:170px;flex:none;animation:bolt-bob 2.4s ease-in-out infinite}
.kid-bolt-l.dance{animation:kid-dance 1s ease-in-out infinite}
.kid-bubble{position:relative;background:#fff;border:4px solid #14181f;border-radius:24px;padding:16px 22px;font-size:30px;line-height:1.25}
.kid-bubble b{display:block}.kid-bubble i{display:block;font-size:24px;color:#be185d;font-style:normal;margin-top:4px}
.kid-h{font-size:30px;text-align:center;margin:10px 0 16px}
.kid-credit{font-size:12px;color:#5c6b80;margin:10px 0 0;text-align:right;text-transform:none}.kid-credit a{color:inherit}
.kid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.kid-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:4px solid #14181f;border-radius:22px;background:#fff;cursor:pointer;font:inherit;box-shadow:0 5px 0 #14181f}
.kid-card span{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:58px}
.kid-card b{font-size:20px}.kid-card i{font-size:15px;color:#555;font-style:normal}.kid-card.on{background:#dcfce7}
.kid-steps{list-style:none;padding:0;counter-reset:ks}.kid-steps li{counter-increment:ks;display:flex;align-items:center;gap:16px;background:#fff;border:4px solid #14181f;border-radius:22px;padding:14px 18px;margin:0 0 14px}
.kid-steps li:before{content:counter(ks);flex:none;width:52px;height:52px;border-radius:50%;background:#db2777;color:#fff;font-weight:bold;font-size:28px;display:flex;align-items:center;justify-content:center}
.kid-steps .ic{font-size:44px}.kid-steps b{display:block;font-size:28px}.kid-steps i{display:block;font-size:22px;color:#be185d;font-style:normal}
.kid-done{display:block;margin:24px auto 0;font:inherit;font-size:30px;font-weight:bold;padding:18px 34px;border-radius:24px;border:4px solid #14181f;background:#22c55e;color:#fff;cursor:pointer;box-shadow:0 6px 0 #14181f}
.kid-done:active{transform:translateY(5px);box-shadow:0 1px 0 #14181f}
.kid-line{font-size:28px;font-weight:bold;margin:4px 0 16px}.kid-line i{display:block;font-size:22px;color:#be185d;font-style:normal;font-weight:normal}
/* the page's sections inside the app: bigger, only what the child needs */
.kid-screen section{padding:0!important}.kid-screen section>.wrap{max-width:none}
.kid-screen h2{font-size:32px}.kid-screen .cs-tag{font-size:16px}
.kid-screen .ls-card{font-size:26px!important;min-height:220px!important}.kid-screen .ls-card img{max-height:170px!important}
.kid-screen .ls-check label{font-size:28px;padding:14px;display:flex;gap:14px;align-items:center}.kid-screen .ls-check input{width:36px;height:36px}
.kid-screen .ls-role{font-size:22px}.kid-screen .pc-k,.kid-screen .for-teacher{display:none}
.kid-screen .qz-t{font-size:28px}.kid-screen .qz-o{font-size:24px}
.kid-reward{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(254,246,228,.85);animation:kid-in .2s}
.kid-reward img{width:260px;animation:kid-dance .5s ease-in-out infinite}.kid-reward .kid-bubble{font-size:40px;text-align:center}
.kid-reward.out{opacity:0;transition:opacity .4s}
@keyframes kid-dance{0%,100%{transform:rotate(-12deg) translateY(0)}25%{transform:rotate(0) translateY(-30px) scale(1.05)}50%{transform:rotate(12deg) translateY(0)}75%{transform:rotate(0) translateY(-30px) scale(1.05)}}
.kid-star{position:fixed;top:-40px;z-index:21;font-size:40px;animation:kid-fall 2.2s ease-in forwards;pointer-events:none}
@keyframes kid-fall{to{transform:translateY(110vh) rotate(360deg)}}
.kid-switch{position:fixed;right:14px;bottom:14px;z-index:30;font:inherit;font-size:15px;font-weight:bold;padding:10px 16px;border-radius:999px;border:2px solid #14181f;background:#fde68a;cursor:pointer;box-shadow:0 3px 0 #14181f}
body.kid .kid-switch{bottom:110px}
.for-teacher{border:2px dashed #64748b;border-radius:12px;padding:10px 14px;margin:10px 0;background:rgba(100,116,139,.08)}.for-teacher p{margin:4px 0 0}
/* Primary website view: bigger text too */
body[data-stage="p"] section[data-c] .about,body[data-stage="p"] section[data-c] li,body[data-stage="p"] section[data-c] p{font-size:20px}
@media (max-width:600px){.kid-bolt-l{width:110px}.kid-bubble{font-size:24px}.kid-nb{width:58px;height:58px;font-size:28px}}
@media (prefers-reduced-motion:reduce){.kid-bolt-l,.kid-bolt-s,.kid-reward img{animation:none}}
/* flashcards v2: fixed height, a real flip, a slide between cards (Kiers, 28 Sep: "the height keeps changing") */
.fc-card{height:340px;min-height:0;perspective:1200px;background:none;border:0;padding:0;display:block;overflow:visible}
.fc-in{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.3,.7,.3,1.2);transform-style:preserve-3d}
.fc-card.flip .fc-in{transform:rotateY(180deg)}
.fc-front,.fc-back{position:absolute;inset:0;display:flex!important;flex-direction:column;align-items:center;justify-content:center;padding:22px;
  border:3px solid var(--line);border-radius:22px;background:var(--bg);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box}
.fc-back{transform:rotateY(180deg);border-color:var(--a2);background:color-mix(in srgb,var(--a2) 8%,var(--bg))}
.fc-card.flip .fc-front{display:flex!important}.fc-card .fc-back{display:flex!important}
.fc-card.fc-leave{transition:transform .28s ease-in,opacity .28s;transform:translateX(-60%) rotate(-8deg);opacity:0}
.fc-card.fc-enter{animation:fc-in .35s ease-out}@keyframes fc-in{from{transform:translateX(60%) rotate(8deg);opacity:0}to{transform:none;opacity:1}}
.fc-bar{min-height:58px}.fc-bar.fc-wait button{visibility:hidden}
body[data-stage="p"] .fc-card b{font-size:44px}body[data-stage="p"] .fc-back p{font-size:24px}
.qz-rev{display:block;font-size:13px;font-weight:bold;color:#0d9488;margin-top:4px}
.kid-pal{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.kid-col{width:52px;height:52px;border-radius:50%;border:3px solid #14181f;cursor:pointer}
.kid-col.on{outline:4px solid #2563eb;outline-offset:2px}.kid-size{min-width:52px;height:52px;border-radius:14px;border:3px solid #14181f;background:#fff;font-size:22px;cursor:pointer}
.kid-canvas{width:100%;aspect-ratio:3/2;background:#fff;border:4px solid #14181f;border-radius:16px;touch-action:none;display:block}
/* 🗑️ Clear all on the drawing screen (Kiers, 1 Oct): logo green; amber while it waits for the second tap */
.kid-clear{display:block;margin:12px auto 0;min-height:64px;padding:10px 26px;border-radius:18px;border:4px solid var(--tf-green,#617b30);background:#fff;color:var(--tf-green,#617b30);font:inherit;font-size:24px;font-weight:700;cursor:pointer;box-shadow:0 5px 0 #4d6226;touch-action:manipulation}
.kid-clear:active{transform:translateY(4px);box-shadow:0 1px 0 #4d6226}
.kid-clear.arm{background:#f59e0b;border-color:#b45309;color:#fff;box-shadow:0 5px 0 #b45309;animation:kid-clear-p .5s ease-in-out infinite alternate}
@keyframes kid-clear-p{to{transform:scale(1.05)}}
.ls-art svg{width:100%;max-height:150px}
/* ===== The teacher's live dashboard (src/tf/live.js) ===== */
#live{max-width:1200px}#live h1{margin-bottom:2px}
.lv-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:10px 0}
.lv-bar button,.lv-vals button,.lv-btns button,.lv-alert button,.lv-let{font:inherit;font-size:14px;font-weight:bold;padding:8px 12px;border-radius:10px;border:2px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.lv-bar button.on{background:var(--tf-green,#617b30);color:#fff;border-color:var(--tf-green,#617b30)}.lv-go{background:#16a34a!important;color:#fff!important;border-color:#16a34a!important}
.lv-sep{width:1px;height:26px;background:var(--line);margin:0 6px}.lv-timer{font-size:20px;color:#b45309}
.lv-alert{padding:12px 14px;border-radius:12px;background:#fff7ed;border:3px solid #f97316;color:#7c2d12;margin:10px 0;animation:lv-pulse 1.2s ease-in-out infinite}
@keyframes lv-pulse{50%{box-shadow:0 0 0 6px rgba(249,115,22,.25)}}
.lv-pts{padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin:10px 0}.lv-vals{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lv-vals button{border-color:var(--v);color:var(--v)}.lv-vals button.on{background:var(--v);color:#fff}.lv-msg{color:#b91c1c;font-weight:bold;min-height:1.2em;margin-top:6px}
.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.lv-kid{border:2px solid var(--line);border-radius:14px;padding:10px;background:var(--bg)}.lv-top{display:flex;justify-content:space-between;gap:6px}
.lv-sc{font-size:13px;color:var(--dim)}.lv-on{border-color:#16a34a}.lv-off{opacity:.65}.lv-wait{border-color:#f97316;background:#fff7ed;animation:lv-pulse 1.2s ease-in-out infinite}
.lv-let{display:block;width:100%;margin:8px 0;background:#f97316!important;color:#fff!important;border-color:#f97316!important}
.lv-dots{min-height:22px;margin:6px 0}.lv-dots i{display:inline-block;width:16px;height:16px;border-radius:50%;margin-right:3px;vertical-align:middle}
.lv-btns{display:flex;gap:6px;align-items:center}.lv-btns small{margin-left:auto;color:var(--dim)}
.kid-timer{position:sticky;top:78px;z-index:4;margin:10px auto 0;max-width:980px;background:#fde68a;border:4px solid #14181f;border-radius:18px;padding:10px 16px;font-size:24px;display:flex;align-items:center;gap:12px}
.kid-timer b{font-size:34px}.kid-timer b+b,.kid-timer i{font-size:20px}.kid-timer i{color:#be185d;font-style:normal}
.kid-stars{font-size:22px;font-weight:bold;padding:4px 12px;border-radius:999px;background:#fef3c7;border:3px solid #ca8a04;white-space:nowrap}
.kid-star-big{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:72px;margin:-30px 0 10px;border:5px solid #fff;box-shadow:0 0 0 5px #14181f;animation:kid-spin 1s ease-out}
@keyframes kid-spin{from{transform:scale(.2) rotate(-180deg)}to{transform:none}}
.kid-wait .kid-canvas{aspect-ratio:9/5}
/* KS3: my points (src/tf/points.js) */
.pt-chip{position:fixed;left:14px;bottom:14px;z-index:30;font:inherit;font-size:15px;font-weight:bold;padding:10px 16px;border-radius:999px;border:2px solid #ca8a04;background:#fef3c7;color:#14181f;cursor:pointer;box-shadow:0 3px 0 #ca8a04}
.pt-panel{position:fixed;left:14px;bottom:66px;z-index:30;width:260px;padding:12px 16px;border-radius:14px;border:2px solid var(--line);background:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.pt-dots{display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px}.pt-dot{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid #fff}
.pt-panel h3{margin:0 0 8px}.pt-row{display:flex;align-items:center;gap:8px;margin:4px 0}.pt-row span{width:14px;height:14px;border-radius:50%}.pt-row b{margin-left:auto}
.pt-toast{position:fixed;left:50%;top:90px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:12px;padding:14px 22px;border-radius:18px;background:#fff;color:#14181f;border:3px solid #14181f;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:18px;animation:pt-in .4s cubic-bezier(.3,.7,.3,1.4)}
.pt-toast span{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px}.pt-toast b{display:block;font-size:22px}
.pt-toast.out{opacity:0;transition:opacity .4s}@keyframes pt-in{from{transform:translate(-50%,-40px) scale(.7);opacity:0}to{transform:translateX(-50%);opacity:1}}
.kid-timer[hidden]{display:none}
.kid-tool.on{background:#bfdbfe}
.lv-sticky{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:10px 14px;margin:0 0 8px;border-radius:0 0 14px 14px;background:var(--tf-green,#617b30);color:#fff}
.lv-eq{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px;padding:10px 14px;border-radius:14px;border:3px solid #e2a145;background:#fdf6e9;color:#2b3340;font-size:18px}
.lv-eq button{font:inherit;font-weight:700;min-height:44px;padding:6px 14px;border-radius:12px;border:2px solid #617b30;background:#fff;color:#4d6226;cursor:pointer}.lv-eq button[data-eq="go"]{background:#617b30;color:#fff}
.lv-sticky b{font-size:24px}.lv-sticky small{opacity:.75}.lv-end{margin-left:auto}.lv-late b{color:#fca5a5}
.lv-endin{font:inherit;font-size:14px;padding:4px 6px;border-radius:8px;border:0;margin-left:6px}
.lv-csv{cursor:pointer;padding:6px 12px;border:2px solid #fff;border-radius:999px;font-weight:bold;font-size:14px}
/* the design cycle (KS3) */
.dc-sec{padding-top:14px!important;padding-bottom:0!important}.dc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.dc-t{font-weight:bold;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
.dc{list-style:none;display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:0}
.dc li{position:relative;padding:8px 18px 8px 22px;background:color-mix(in srgb,var(--dc) 14%,var(--bg));color:var(--dc);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);font-size:15px}
.dc li:first-child{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);padding-left:14px}
.dc li.on{background:var(--dc);color:#fff;transform:scale(1.08)}.dc-now{font-weight:bold}
.dc-chip{display:inline-block;margin:0 6px;padding:2px 10px;border-radius:999px;background:var(--dc);color:#fff;font-size:12px;font-weight:bold;vertical-align:middle}
.pi-cycle li[style]{border-top:6px solid var(--dc)}.pi-cycle li[style] b{color:var(--dc)}
.si-sec{padding-top:12px!important;padding-bottom:0!important}.si{padding:12px 16px;border-radius:12px;border:2px solid #2563eb;background:color-mix(in srgb,#2563eb 8%,var(--bg));font-size:16px}
.si-ok{border-color:#16a34a;background:color-mix(in srgb,#16a34a 8%,var(--bg));font-size:14px;padding:8px 14px}
/* learning objectives first; where you work (KS3) */
.lo-sec .wrap{border-left:6px solid #2563eb}.ls-obj.lo li{font-size:19px;margin:6px 0}body[data-stage="p"] .ls-obj.lo li{font-size:24px}
.ww{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;counter-reset:ww}
.ww li{counter-increment:ww;display:flex;gap:10px;align-items:flex-start;padding:12px;border:2px solid var(--line);border-radius:12px;background:var(--bg)}
.ww-i{font-size:28px}.ww b{display:block;font-size:17px}.ww b:before{content:counter(ww) " · ";color:var(--a2)}.ww span{font-size:14px;color:var(--dim)}
.pi-imgs{display:flex;flex-direction:column;gap:10px}.pi-photo{margin:0}.pi-photo img{width:100%;border-radius:12px}.pi-photo figcaption{font-size:13px;color:var(--dim);margin-top:4px}
.pc-obj{margin:4px 0 6px;padding-left:18px;font-size:14px}
.kid-lo{background:#fff;border:4px solid #2563eb;border-radius:22px;padding:12px 20px;margin:0 0 16px}.kid-lo h3{margin:0 0 6px;font-size:24px;color:#2563eb}
.kid-lo ul{list-style:none;padding:0;margin:0}.kid-lo li{font-size:26px;font-weight:bold;margin:6px 0}
/* section intros; jobs you tap; the code a task asks about; Python in two columns; My lesson so far */
.sec-intro{font-size:17px;font-weight:bold;margin:0 0 14px;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,var(--k,#2563eb) 10%,var(--bg))}
.sec-intro i{display:block;font-weight:normal;color:var(--a2);margin-top:2px}body[data-stage="p"] .sec-intro{font-size:22px}
button.ls-role{font:inherit;color:inherit;text-align:left;cursor:pointer;border:2px solid var(--line)}button.ls-role.on{border:3px solid #16a34a;background:#dcfce7}
button.ls-role.on:after{content:"✓ My job";display:block;color:#16a34a;font-weight:bold;margin-top:4px}.role-note{font-weight:bold;color:#16a34a}
.wk2-show{background:#1e1e1e;color:#f5f5f5;padding:10px 12px;border-radius:8px;font-size:14px;white-space:pre-wrap;margin:6px 0}
.py-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.py-side{position:sticky;top:70px;max-height:calc(100vh - 90px);overflow:auto;padding:12px;border:2px solid var(--line);border-radius:14px;background:var(--panel)}
.py-side .wk2-ws h3{margin-top:0}.py-expd summary{font-weight:bold;cursor:pointer;margin:10px 0}
@media (max-width:900px){.py-grid{grid-template-columns:1fr}.py-side{position:static;max-height:none}}
.ms-btn{position:fixed;right:14px;bottom:14px;z-index:30;font:inherit;font-size:15px;font-weight:bold;padding:10px 16px;border-radius:999px;border:2px solid #2563eb;background:#dbeafe;color:#14181f;cursor:pointer;box-shadow:0 3px 0 #2563eb}
.ms-panel{position:fixed;right:14px;bottom:66px;z-index:30;width:320px;max-width:calc(100vw - 28px);padding:12px 16px;border-radius:14px;border:2px solid var(--line);background:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.ms-panel h3{margin:0 0 8px}.ms-panel ul{list-style:none;padding:0;margin:0}.ms-panel li{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line)}
.ms-panel li span{width:18px;color:var(--dim)}.ms-panel li.ok span{color:#16a34a;font-weight:bold}.ms-panel li i{margin-left:auto;font-size:13px;color:var(--dim);font-style:normal}
.lv-names{border:2px solid #2563eb;border-radius:14px;padding:12px 16px;margin:10px 0;background:var(--bg)}.lv-names h3{margin:0 0 4px}
.lv-ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px;margin:10px 0}
.lv-ngrid label{display:flex;align-items:center;gap:8px}.lv-ngrid span{flex:1;font-weight:bold;font-size:14px}.lv-ngrid input{flex:1;font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:8px}
.lv-sticky button.lv-csv{background:none;color:#fff;font:inherit;font-weight:bold;font-size:14px}
.lv-new{outline:3px solid #16a34a;border-radius:8px;padding:2px}.lv-print{text-decoration:none;font-size:13px;font-weight:bold;color:#4d6226;border:1.5px solid #617b30;border-radius:999px;padding:3px 10px;white-space:nowrap}
/* read aloud: a big 🔊 on every text in the kids' app */
.kid-say{flex:none;width:52px;height:52px;margin-left:16px;border-radius:50%;border:3px solid #14181f;background:#fde68a;font-size:26px;cursor:pointer;vertical-align:middle;box-shadow:0 3px 0 #14181f;padding:0;line-height:1}
.kid-say:active{transform:translateY(2px);box-shadow:0 1px 0 #14181f}
.kid-steps li .kid-say,.kid-bubble .kid-say{margin-left:auto}.kid-bubble{display:flex;align-items:center;gap:10px}.kid-bubble>b,.kid-bubble>i{flex:none}
.kid-bubble{flex-wrap:wrap}.ls-card .kid-say,.ls-role .kid-say{position:absolute;top:6px;left:6px;width:44px;height:44px;font-size:22px}
.kid-screen .ls-role{position:relative;padding-top:48px}.kid-screen .ls-card{padding-top:52px}
.sec-intro .kid-say,.kid-line .kid-say,.kid-lo li .kid-say{float:right}
.kid-lo li,.kid-line,.sec-intro{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.kid-lo li .kid-say,.kid-line .kid-say,.sec-intro .kid-say{float:none;margin-left:auto}
.kid-line i,.sec-intro i{flex-basis:100%;order:2}
/* emojis twice as big in the kids' app (Kiers, 28 Sep) */
.kid-steps .ic{font-size:88px;line-height:1}.kid-emo{font-size:52px;line-height:1;margin-right:6px}
.kid-screen .ls-role>span{font-size:64px;line-height:1}.kid-screen .ls-check label{font-size:32px}
.kid-nb{font-size:44px}.kid-card span{width:120px;height:120px;font-size:84px}
.kid-screen .ls-card span,.kid-screen .ls-check span{font-size:30px}
/* one step per screen; self-marking */
.kid-step-h{display:flex;align-items:center;gap:14px;margin:4px 0 16px}.kid-step-n{font-weight:bold;font-size:20px;color:#fff;background:#db2777;border-radius:999px;padding:6px 14px}
.kid-step-ic{font-size:96px;line-height:1}.kid-step-h .kid-bubble{font-size:34px}
.kid-self-r{background:#fff;border:4px solid #14181f;border-radius:22px;padding:12px 16px;margin:0 0 14px}.kid-self-t{font-size:28px;font-weight:bold;display:flex;align-items:center}
.kid-self-b{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.kid-face{font:inherit;display:flex;flex-direction:column;align-items:center;padding:10px;border:3px solid #14181f;border-radius:18px;background:#f8fafc;cursor:pointer}
.kid-face span{font-size:64px;line-height:1}.kid-face b{font-size:20px}.kid-face i{font-size:15px;color:#be185d;font-style:normal}.kid-face.on{background:#bbf7d0;transform:scale(1.05)}
.kid-nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.kid-nav::-webkit-scrollbar{display:none}.kid-nb{flex:none;width:64px;height:64px}@media (min-width:1000px){.kid-nav{justify-content:center}}
.go-to{display:inline-block;margin-left:8px;font-weight:bold;font-size:14px;white-space:nowrap}.to-top{margin:14px 0 0;text-align:right}.to-top a{font-weight:bold;font-size:14px}
/* the quiz countdown */
.qz-timer{position:sticky;top:8px;z-index:5;display:inline-block;margin:0 0 12px;padding:8px 16px;border-radius:999px;background:var(--tf-green,#617b30);color:#fff;font-size:18px}
.qz-timer b{font-size:24px}.qz-timer i{opacity:.75;font-size:14px}.qz-timer.qz-late{background:#dc2626;animation:lv-pulse 1s infinite}
body[data-stage="p"] .qz-timer{font-size:24px}body[data-stage="p"] .qz-timer b{font-size:34px}
.task-n{display:inline-block;margin-right:8px;padding:2px 10px;border-radius:999px;background:var(--tf-green,#617b30);color:#fff;font-size:.7em;vertical-align:middle;text-transform:none;letter-spacing:0}
/* line numbers: the editor and the code under a question */
.py-lnwrap{display:flex;align-items:stretch}.py-ln{margin:0;padding:10px 8px;min-width:2.6em;text-align:right;color:#8a8f98;background:#15171b;overflow:hidden;user-select:none;border-radius:8px 0 0 8px}
.py-lnwrap .py-code{flex:1;border-radius:0 8px 8px 0}
.py-ln,.py-lnwrap .py-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.5}
.wk2-show .ln{display:inline-block;width:2.4em;margin-right:10px;text-align:right;color:#8a8f98;user-select:none}
.py-lnwrap .py-code{white-space:pre;overflow-x:auto;padding-top:12px}.py-ln{padding-top:12px}
.lv-give{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:6px 0}.lv-give button{font:inherit;font-size:12px;font-weight:bold;padding:6px 4px;border-radius:8px;border:2px solid var(--v);background:var(--bg);color:var(--v);cursor:pointer}
.lv-give button.on{background:var(--v);color:#fff}.lv-give button:last-child{grid-column:span 2}
/* Python in parts: goal, steps, editor | questions */
.p-goal{font-size:19px;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,#16a34a 12%,var(--bg));border-left:6px solid #16a34a}
.p-steps{font-size:17px;line-height:1.6;margin:8px 0 14px}.p-steps li{margin:2px 0}
.pq{display:block;margin:0 0 14px}.pq-n{display:inline-block;background:var(--tf-green,#617b30);color:#fff;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:bold;margin-bottom:4px}
.pq-t{display:block;font-size:16px;font-weight:bold;margin-bottom:6px}.pq textarea{width:100%;box-sizing:border-box;min-height:110px;font:inherit;font-size:16px;padding:10px;border:2px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);resize:vertical}
.p-hints{margin:10px 0}.p-hints summary{cursor:pointer;font-weight:bold}.p-refs{margin:10px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ref-l{display:inline-block;padding:4px 12px;border-radius:999px;border:2px solid #2563eb;font-weight:bold;font-size:14px;text-decoration:none}
/* Reference pages */
.rf-nav{display:flex;justify-content:space-between;gap:10px;max-width:1100px;margin:14px auto;padding:0 20px;font-weight:bold}
.rf-what{font-size:19px}.rf-it{color:var(--a2)}
.rf-code,.rf-out,.rf-mis pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:1.5;background:#14181f;color:#f4f3ee;padding:12px 14px;border-radius:10px;white-space:pre;overflow-x:auto}
.rf-out{background:#0b3d2e;color:#d1fae5}.rf-code .ln{display:inline-block;width:2em;margin-right:12px;text-align:right;color:#8a8f98;user-select:none}
.rf-two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}@media (max-width:800px){.rf-two{grid-template-columns:1fr}}
.rf-exp{border-collapse:collapse;width:100%}.rf-exp td{border-bottom:1px solid var(--line);padding:6px 10px;vertical-align:top}.rf-exp td:first-child{white-space:nowrap;font-weight:bold;width:5em}
.rf-mis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}.rf-mis p{grid-column:span 2;margin:0}.rf-bad{color:#dc2626;font-weight:bold}.rf-ok{color:#16a34a;font-weight:bold}
.rf-list li{margin:0 0 10px;font-size:17px}.rf-words li{font-size:17px}
.kid-nb{position:relative}.kid-nb-n{position:absolute;top:-8px;right:-8px;min-width:24px;height:24px;padding:0 4px;border-radius:999px;background:#db2777;color:#fff;font-size:14px;font-weight:bold;line-height:24px;border:2px solid #14181f;box-sizing:border-box}
.kid-step-n{display:flex;flex-direction:column;align-items:center;font-size:20px;line-height:1.1;padding:8px 14px;border-radius:14px}.kid-step-n i{font-style:normal;font-size:14px;opacity:.9}
.kid-nav{padding-top:16px}
.kid-screen .task-n,.kid-screen .task-of,.kid-screen .to-top{display:none}
/* E1 (Year 2): near to no text — pictures, emoji and sound (the text stays in the page, hidden, so 🔊 can read it) */
.kid-y2 .kid-app i,.kid-y2 .kid-lo,.kid-y2 .sec-intro>:not(.kid-say),.kid-y2 .kid-line>:not(.kid-say),.kid-y2 .kid-screen h2,.kid-y2 .kid-h,
.kid-y2 .kid-face b,.kid-y2 .kid-card i,.kid-y2 .ls-role p,.kid-y2 .pc-k{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.kid-y2 .sec-intro,.kid-y2 .kid-line{font-size:0;padding:0;background:none;justify-content:center}.kid-y2 .sec-intro .kid-say,.kid-y2 .kid-line .kid-say{width:84px;height:84px;font-size:44px}
.kid-y2 .kid-step-n{font-size:0;width:64px;height:64px;padding:0;border-radius:50%;justify-content:center}.kid-y2 .kid-step-n::before{content:attr(data-n);font-size:40px}
.kid-y2 .kid-done{font-size:0;width:120px;height:120px;border-radius:50%;padding:0}.kid-y2 .kid-done::before{content:"✓";font-size:72px}
.kid-y2 .kid-face span{font-size:90px}.kid-y2 .kid-bubble b{font-size:40px}.kid-y2 .kid-step-ic{font-size:120px}
/* 🔊 on every text (src/tf/listen.js) */
.ls-say{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:12px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);font-size:13px;line-height:1;cursor:pointer;vertical-align:middle;opacity:.75}
.ls-say:hover{opacity:1;border-color:var(--a2)}h1 .ls-say,h2 .ls-say{width:30px;height:30px;font-size:15px;margin-left:16px}
body[data-stage="p"] .ls-say{width:40px;height:40px;font-size:20px;opacity:1}
.kid-qr{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto 18px;padding:16px;background:#fff;border:4px solid #14181f;border-radius:22px;width:max-content}.kid-qr svg{width:300px;height:300px}.kid-qr b{font-size:28px}
.kid-card-t{border-style:dashed;background:#f3f4f6}
.kid-pair{display:flex;justify-content:center;align-items:center;gap:14px;margin:6px 0 4px;flex-wrap:wrap}.kid-pair .kid-card{width:190px}
.kid-slot{border-style:dashed;background:#f8fafc;box-shadow:none;cursor:default}.kid-slot span{background:#e5e7eb}
.kid-plus{font-size:48px;font-weight:800}.kid-pair-k{text-align:center}
.kid-done[hidden]{display:none!important}
.kid-lo li>span:not(.kid-emo){display:flex;flex-direction:column}.kid-lo li i{font-size:20px;color:#be185d;font-style:normal;font-weight:normal}
.fc-back .fc-defit{color:#be185d;margin-top:6px!important}
/* the current step: a bouncing arrow over its button (Kiers, 28 Sep) */
.kid-nb.on::after{content:"⬇";position:absolute;left:50%;top:-44px;transform:translateX(-50%);font-size:34px;animation:kid-arrow .8s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 2px 0 #fff)}
@keyframes kid-arrow{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-10px)}}
.kid-nav{overflow:visible;padding-top:44px;background:linear-gradient(transparent 40px,#fff 40px)}.kid-nb{overflow:visible}
/* the quiz (Kiers, 28 Sep): the choice you made is obvious; Send shows right and wrong at once */
.qz-o{position:relative;transition:transform .12s}
.qz-o.on{transform:scale(1.05);box-shadow:0 0 0 6px #facc15,0 0 0 9px #14181f!important}
.qz-o.on::after{content:"✓";position:absolute;top:-12px;right:-12px;width:34px;height:34px;border-radius:50%;background:#facc15;color:#14181f;font-weight:bold;font-size:22px;display:flex;align-items:center;justify-content:center;border:3px solid #14181f}
.qz-done .qz-o:not(.right):not(.wrong){opacity:.4;transform:none;box-shadow:none!important}.qz-done .qz-o:not(.right):not(.wrong)::after{display:none}
.qz-done .qz-o.right{box-shadow:0 0 0 6px #16a34a!important;opacity:1}.qz-done .qz-o.right::after{content:"✓";background:#16a34a;color:#fff;display:flex}
.qz-done .qz-o.wrong{box-shadow:0 0 0 6px #dc2626!important;opacity:1}.qz-done .qz-o.wrong::after{content:"✗";background:#dc2626;color:#fff;display:flex}
.qz-why{font-weight:bold;margin-top:8px}.kid-screen .qz-msg{font-size:26px;font-weight:bold;display:block;margin-top:10px}.kid-screen .qz-score{font-size:40px}
/* finished tasks are greyed; pointing at one shows it (Kiers, 28 Sep) */
.kid-nb.ok:not(.on){filter:grayscale(1);opacity:.45;transition:filter .2s,opacity .2s}.kid-nb.ok:not(.on):hover,.kid-nb.ok:not(.on):focus-visible{filter:none;opacity:1}
.kid-restart{margin-left:8px;font:inherit;font-size:14px;font-weight:bold;padding:6px 12px;border-radius:999px;border:2px dashed #6b7280;background:#f3f4f6;cursor:pointer}
/* E5, 2 Oct (Kiers: "↺ S… is cut off and under 📱 QR" on the board): the top bar leaves room for the fixed QR button, the
   button keeps its words; on the board the floating teacher panel no longer covers the screen's right edge */
.kid-restart{flex:none;white-space:nowrap}
body.kid:has(> .kid-qr-btn) .kid-top{padding-right:132px}
@media (min-width:1000px){body.kid:has(> #tf-bc-float) .kid-stage{padding-right:290px}}
/* the current task: a big bright arrow and a glowing button (Kiers, 28 Sep: "too subtle") */
.kid-nb.on::after{content:"▼";top:-58px;font-size:52px;color:#facc15;-webkit-text-stroke:3px #14181f;filter:none;animation:kid-arrow .6s ease-in-out infinite}
@keyframes kid-arrow{0%,100%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-50%,-14px) scale(1.15)}}
.kid-nb.on{box-shadow:0 0 0 6px #facc15,0 0 0 9px #14181f,0 5px 0 9px #14181f;animation:kid-glow 1.2s ease-in-out infinite}
@keyframes kid-glow{50%{box-shadow:0 0 0 12px #fde047,0 0 0 15px #14181f}}
.kid-nav{padding-top:64px;background:linear-gradient(transparent 60px,#fff 60px)}
.lv-push{font-size:18px!important;padding:10px 20px!important}
.kid-nb-t{position:absolute;bottom:-10px;left:-8px;font-size:18px;background:#fff;border-radius:50%;border:2px solid #14181f;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.kid-nav{border-top:0;background:linear-gradient(transparent 60px,var(--tf-green,#617b30) 60px,var(--tf-green,#617b30) 64px,#fff 64px);pointer-events:none}.kid-nav>*{pointer-events:auto}
/* signed-in staff: the content fills the big screen (Kiers, 28 Sep: empty spaces on each side of the board) */
html.tf-wide .wrap{max-width:min(1680px,94vw)}html.tf-wide .kid-screen{max-width:min(1600px,94vw)}html.tf-wide .kid-timer{max-width:min(1600px,94vw)}
html.tf-wide .ls-steps,html.tf-wide .fc-app{max-width:none}html.tf-wide .fc-app{max-width:760px}
/* the teacher view: task thumbnails down the left (Kiers, 28 Sep) */
.lv-cols{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:16px;align-items:start}@media (max-width:900px){.lv-cols{grid-template-columns:1fr}}
.lv-thumbs{position:sticky;top:50px;max-height:calc(100vh - 70px);overflow:auto;display:flex;flex-direction:column;gap:8px}
.lv-th{border:2px solid var(--line);border-left:8px solid #16a34a;border-radius:12px;padding:8px 10px;background:var(--bg)}.lv-th.stop{border-left-color:#dc2626}
.lv-th-h{display:flex;align-items:center;gap:8px}.lv-th-n{min-width:24px;height:24px;border-radius:50%;background:#db2777;color:#fff;font-weight:bold;font-size:13px;display:flex;align-items:center;justify-content:center}
.lv-th-n:empty{visibility:hidden}.lv-th-i{font-size:24px}.lv-th-h b{flex:1;font-size:14px}
.lv-gate{font:inherit;font-size:12px;font-weight:bold;padding:3px 8px;border-radius:999px;border:2px solid var(--line);background:#fff;cursor:pointer}
.lv-th.stop .lv-gate{border-color:#dc2626;color:#dc2626}.lv-th:not(.stop) .lv-gate{border-color:#16a34a;color:#16a34a}
.lv-th-k{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.lv-tk{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 8px 2px 2px;border-radius:999px;background:#f1f5f9}
.lv-tk i{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal}.lv-tk.idle{background:#fee2e2;color:#991b1b}.lv-tk.wait{outline:2px solid #f97316}
.lv-here{font:inherit;font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);cursor:pointer}
/* the Python editor (Kiers, 28 Sep): labelled, a red RUN, the output green when it works and red on an error */
.py-label{font-weight:bold;font-size:15px;letter-spacing:.5px;padding:6px 12px;border-radius:10px 10px 0 0;background:var(--tf-green,#617b30);color:#fff;display:inline-block;margin-top:10px}
.py-outlabel{background:#475569}.py-outlabel.py-ok{background:#15803d}.py-outlabel.py-bad{background:#b91c1c}
.py-run{background:#dc2626!important;color:#fff!important;font-size:20px!important;font-weight:900!important;padding:12px 28px!important;border-radius:12px!important;border:3px solid #7f1d1d!important;box-shadow:0 4px 0 #7f1d1d;letter-spacing:1px}
.py-run:active{transform:translateY(3px);box-shadow:0 1px 0 #7f1d1d}.py-run:disabled{opacity:.6}
.py-out{min-height:140px;border:3px solid #475569;border-radius:0 10px 10px 10px!important;transition:background .3s,border-color .3s}
.py-out.py-ok{background:#052e16!important;border-color:#16a34a;color:#dcfce7}.py-out.py-bad{background:#450a0a!important;border-color:#dc2626;color:#fee2e2}
.py-lnwrap .py-code{min-height:520px}
/* one Python program: the editor left (it scrolls by itself), the questions alongside */
.py-one{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:20px;align-items:start}
.py-one-ed{position:sticky;top:50px}.py-one-ed .py-lnwrap{max-height:62vh;overflow:auto;border-radius:0 10px 10px 10px}
.py-one-ed .py-lnwrap .py-code{min-height:62vh;overflow:visible}
.py-one-q{border:2px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--panel)}.py-one-q h3{margin-top:0}
@media (max-width:900px){.py-one{grid-template-columns:1fr}.py-one-ed{position:static}}
.py-lnwrap .py-code{overflow-y:hidden}.py-ln{overflow:visible}
/* Full screen for the lesson's Python task (Kiers, 11 Oct 2026: "should run full screen so there is more space"):
   src/tf/python.js puts py-fs on the task (.py-one / .py-grid) and py-fs-on on <html>. Wide: code | output | questions;
   narrow: one under the other. Same tab, same elements: nothing is copied, so nothing is lost. */
.py-edhead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
.py-fsb{font:inherit;font-weight:bold;cursor:pointer;background:#617b30;border:3px solid #4d6226;color:#fff;font-size:18px;padding:10px 22px;min-height:54px;border-radius:12px;margin:6px 0 4px;touch-action:manipulation}
.py-fsb:hover{background:#4d6226}.py-fsb:focus-visible{outline:3px solid #244572;outline-offset:2px}
.py-fsb.py-fsx{background:#c56035;border-color:#a54f2b;font-size:20px;min-height:60px;padding:10px 26px}
.py-fsb.py-fsx:hover{background:#a54f2b}
.py-bar button{min-height:44px}
html.py-fs-on,html.py-fs-on body{overflow:hidden}
.py-fs{position:fixed!important;inset:0;z-index:2050;margin:0!important;background:var(--bg);color:var(--fg);padding:10px 14px;box-sizing:border-box;
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(280px,25%)!important;gap:14px;align-items:stretch!important;overflow:hidden}
.py-fs{grid-template-rows:minmax(0,1fr) auto auto}
.py-ed.py-fs{max-width:none;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)}  /* an editor alone (/python/) */
.py-fs .p-refs{max-height:min(150px,22vh);overflow:auto;padding:6px 8px!important;border:2px solid var(--line);border-radius:12px;background:var(--panel)}.py-fs .p-refs .ref-l{font-size:13px}
.py-fs .p-hints{padding:2px 4px}
.py-fs>.py-one-ed,.py-fs>.py-main{display:contents}
.py-fs>.py-one-ed>.py-ed,.py-fs>.py-main>.py-ed{grid-column:1;grid-row:1/span 3}
.py-fs>.py-one-ed>:not(.py-ed),.py-fs>.py-main>:not(.py-ed){grid-column:2;font-size:14px;margin:0}
.py-fs>.py-one-q,.py-fs>.py-side{position:static!important;max-height:none!important;overflow:auto;min-height:0;grid-column:2;grid-row:1}
.py-fs .py-ed{max-width:none;min-height:0;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:12px}
.py-fs .py-col{display:flex;flex-direction:column;min-height:0}
.py-fs .py-label{margin-top:0;align-self:flex-start}.py-fs .py-edhead{flex:none}.py-fs .py-edhead .py-fsb{margin-top:0}
.py-fs .py-col-out{padding-top:32px}
.py-fs .py-lnwrap{flex:1;min-height:0;max-height:none!important;overflow:auto;border-radius:0 10px 10px 10px}
.py-fs .py-lnwrap .py-code{min-height:100%!important;resize:none}
.py-fs .py-ln,.py-fs .py-lnwrap .py-code{font-size:clamp(16px,1.1vw,22px)}
.py-fs .py-out{flex:1;min-height:0;max-height:none;font-size:clamp(16px,1.1vw,22px)}
.py-fs .py-turtle{flex:none;margin-top:8px;overflow:hidden}
@media (max-width:900px){
  .py-fs{display:block!important;overflow:auto}
  .py-fs>.py-one-ed>:not(.py-ed),.py-fs>.py-one-q,.py-fs>.py-side{margin:10px 0 0!important}
  .py-fs .py-ed{display:block}
  .py-fs .py-lnwrap{flex:none;max-height:55vh!important}.py-fs .py-lnwrap .py-code{min-height:50vh!important}
  .py-fs .py-out{flex:none;min-height:160px;max-height:40vh}
}
.sm-r{border:2px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 10px;background:var(--bg)}.sm-t{font-weight:bold;font-size:17px;margin-bottom:8px}
.sm-b{display:flex;gap:8px;flex-wrap:wrap}.sm-b button{font:inherit;font-weight:bold;padding:8px 14px;border-radius:999px;border:2px solid var(--line);background:var(--panel);cursor:pointer}
.sm-b button[data-k="0"].on{background:#16a34a;color:#fff;border-color:#16a34a}.sm-b button[data-k="1"].on{background:#f59e0b;color:#fff;border-color:#f59e0b}.sm-b button[data-k="2"].on{background:#dc2626;color:#fff;border-color:#dc2626}
/* KS3 stoppers: a locked task */
section.tf-locked{position:relative}section.tf-locked>.wrap{filter:blur(5px);pointer-events:none;user-select:none;opacity:.5}
.tf-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:60px;gap:6px;z-index:3}
.tf-lock b{font-size:24px;background:var(--tf-green,#617b30);color:#fff;padding:14px 24px;border-radius:14px}.tf-lock i{font-style:normal;color:var(--a2);font-size:18px}
.task-of{font-size:.55em;color:var(--dim);font-weight:bold;margin-right:8px;vertical-align:middle}
/* KS3: the teacher's countdown on every student's page */
.tf-cd{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:2100;padding:10px 24px;border-radius:999px;background:var(--tf-green,#617b30);color:#fff;font-size:20px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.tf-cd b{font-size:30px;font-variant-numeric:tabular-nums}.tf-cd i{opacity:.75;font-size:15px}.tf-cd-late{background:#dc2626;animation:lv-pulse 1s infinite}.tf-cd-up{background:#16a34a}
.kid-with{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 16px;padding:14px;border-radius:20px;border:4px dashed #14181f;background:#fef9c3;font-size:30px}
.kid-with b{font-size:32px}.kid-with i{font-size:22px;color:#be185d;font-style:normal}.kid-with-group{background:#dbeafe}
.tf-nn{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:29;max-width:calc(100% - 260px);padding:8px 16px;border-radius:999px;background:var(--tf-green,#617b30);color:#fff;font-size:14px;line-height:1.35;box-shadow:0 4px 14px rgba(0,0,0,.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-nn span{opacity:.7}.tf-nn i{font-style:normal;opacity:.8}.tf-nn-a{margin:0 6px;opacity:1!important;color:#facc15}
@media (max-width:700px){.tf-nn{max-width:calc(100% - 32px);bottom:64px;white-space:normal}}
.kid-next{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:-6px 0 14px;font-size:18px;color:#475569}
.kid-next span{font-weight:bold;text-transform:uppercase;letter-spacing:.04em}.kid-next em{font-style:normal;font-size:26px}.kid-next b{font-weight:600}.kid-next i{font-style:normal;color:#be185d;margin-left:4px}
.lv-nn{margin:10px 0;padding:10px 14px;border-radius:12px;background:#f1f5f9;border-left:6px solid var(--tf-green,#617b30);font-size:17px}.lv-nn-a{margin:0 8px;color:#ca8a04;font-weight:bold}
.gc-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:8px 0 12px}
.gc-gallery figure{margin:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px;text-align:center}
.gc-gallery img{width:100%;height:170px;object-fit:contain}.gc-gallery figcaption{font-size:14px;margin-top:6px}
.gc-steps li{margin-bottom:8px}
.lv-safe{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}.lv-safe button{font:inherit;font-weight:bold;padding:6px 14px;border-radius:999px;border:2px solid #0d9488;background:#fff;color:#0f766e;cursor:pointer}
.lv-safe.on{padding:10px 14px;border-radius:12px;background:#ccfbf1}.lv-safe.on button{background:#0d9488;color:#fff}
.ln-box{max-width:1100px;margin:24px auto;padding:16px 20px;border-radius:14px;background:#fffbeb;border:2px solid #fcd34d}
.ln-box h2{font-size:20px;margin:0 0 4px}.ln-row{display:flex;gap:10px;align-items:stretch}.ln-row textarea{flex:1;font:inherit;font-size:16px;padding:8px;border-radius:8px;border:1px solid #d6d3d1}
.ln-mic{font:inherit;font-weight:bold;padding:8px 14px;border-radius:10px;border:2px solid #14181f;background:#fff;cursor:pointer}.ln-mic.on{background:#dc2626;color:#fff;border-color:#dc2626;animation:lv-pulse 1s infinite}
.ln-save{font:inherit;font-weight:bold;padding:6px 16px;border-radius:999px;border:0;background:var(--tf-green,#617b30);color:#fff;cursor:pointer}.ln-n{border-top:1px solid #fde68a;padding:6px 0}.ln-n p{margin:2px 0}
.hw-facts{border-collapse:collapse;width:100%}.hw-facts th,.hw-facts td{text-align:left;padding:8px 10px;border-bottom:1px solid #e5e7eb;vertical-align:top}.hw-facts th{width:36%;color:#5c6b80;font-weight:600}
/* a task and its materials as one group (Kiers, 29 Sep): big title outside the cards, one background for the whole
   group, alternating between tasks; the cards inside share that background and are told apart by a thin line */
.task-grp{margin:26px 0;padding:6px 0 18px;border-radius:0}
.task-grp.tg-a{background:#eef4ff}.task-grp.tg-b{background:#fff7e6}
.tg-head{padding:22px 0 4px}.tg-head .wrap{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.tg-n{font-size:30px;font-weight:800;letter-spacing:.5px}.tg-of{font-size:18px;color:var(--dim)}.tg-t{font-size:30px;font-weight:800}
.task-grp section{border-top:0;padding:10px 0;background:transparent}
.task-grp section[data-c]>.wrap,body[data-stage="s"] .task-grp section[data-c]>.wrap{background:transparent;border:1px solid rgba(20,24,31,.14);border-left:1px solid rgba(20,24,31,.14);border-radius:14px}
.task-grp section h2 .task-n,.task-grp section h2 .task-of{display:none}
.task-grp section[data-c] h2{font-size:17px}
html[data-theme="dark"] .task-grp.tg-a{background:#16213a}html[data-theme="dark"] .task-grp.tg-b{background:#2a2112}
.task-grp.tg-a section[data-c]{--k:#2563eb}.task-grp.tg-b section[data-c]{--k:#b45309}
.task-grp .sec-intro{background:rgba(255,255,255,.6)!important;border-color:rgba(20,24,31,.12)!important}
/* a light grey line, with space around it, between two tasks (Kiers, 29 Sep) */
.task-grp{margin:0}.task-grp+.task-grp{margin-top:64px;position:relative}
.task-grp+.task-grp::before{content:"";position:absolute;left:24px;right:24px;top:-33px;height:2px;background:#d1d5db;border-radius:2px}
/* Thinking More */
.tm-strands{list-style:none;padding:0}.tm-strands li{margin:6px 0}.tm-ic{display:inline-block;width:30px}
.tm-l{border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 12px;background:var(--bg)}
.tm-l-h{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}.tm-n{font-size:13px;font-weight:bold;padding:2px 10px;border-radius:999px;background:#ede9fe;color:#5b21b6}
.tm-l p{margin:6px 0 0}.tm-w{font-size:14.5px}.tm-w i{color:#be185d}.tm-q{color:var(--dim);font-style:italic}
/* Thinking More board pages */
.tm-it{display:block;font-style:normal;color:#be185d;font-size:.9em;margin-top:2px}
.tm-obj{font-size:24px;font-weight:700}.tm-catch{font-size:19px;padding:10px 14px;border-radius:12px;background:var(--tf-green-d,#4d6226);color:#fff}.tm-catch .tm-it{color:#fde68a}
.tm-t{font-size:20px}.tm-steps{font-size:18px}
.tm-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tm-wc{font:inherit;min-height:120px;border-radius:16px;border:3px solid #1e3a8a;background:#fff;cursor:pointer;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.tm-wc b{font-size:26px}.tm-back{display:none;flex-direction:column;gap:4px}.tm-wc.on .tm-back{display:flex}.tm-wc.on{background:#eff6ff}.tm-back i{font-style:normal;color:#be185d;font-size:20px}.tm-back small{font-size:15px;color:#374151}
.tm-vote{margin:14px 0;padding:14px 18px;border-radius:14px;background:#fff;border:1px solid rgba(20,24,31,.14)}.tm-q{font-size:21px;margin:0 0 8px}
.tm-vote ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px}.tm-vote li{font-size:20px;padding:10px 16px;border-radius:12px;border:2px solid #cbd5e1;display:flex;gap:10px;align-items:center}
.tm-f{display:inline-flex;width:34px;height:34px;border-radius:50%;background:#1e3a8a;color:#fff;font-weight:800;align-items:center;justify-content:center}
.tm-vote.shown li[data-ok="1"]{border-color:#16a34a;background:#dcfce7}.tm-vote.shown li[data-ok="0"]{opacity:.45}
.tm-show{font:inherit;font-weight:bold;padding:8px 16px;border-radius:999px;border:2px solid #1e3a8a;background:#fff;cursor:pointer}.tm-why{font-size:18px;font-weight:600;color:#166534}
.tm-case{padding:14px 18px;border-radius:14px;background:#fef3c7;border-left:6px solid #b45309;margin:12px 0;font-size:18px}.tm-case ul{margin:6px 0}.tm-case small{display:block;color:#6b7280;margin-top:6px}
.tm-scene{padding:14px 18px;border-radius:18px;background:#e0f2fe;font-size:21px;margin:12px 0;max-width:640px}.tm-scene p{margin:4px 0}
.tm-img img{max-width:min(100%,560px);border-radius:12px;border:1px solid #e5e7eb}
.tm-frames{font-size:20px}.tm-frames li{margin:6px 0}.tm-list{font-size:19px}
.tm-clock{position:fixed;right:10px;bottom:10px;z-index:45;font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(77,98,38,.7);color:#fff;font-variant-numeric:tabular-nums}.tm-clock.late{background:rgba(185,28,28,.85)}
.kid-qr-btn{position:fixed;top:10px;right:10px;z-index:3000;font:inherit;font-size:18px;font-weight:800;padding:10px 16px;border-radius:999px;border:3px solid #14181f;background:#fff;cursor:pointer;box-shadow:0 3px 0 #14181f}
.kid-qr-ov{position:fixed;inset:0;z-index:3001;background:rgba(20,24,31,.6);display:flex;align-items:center;justify-content:center}.kid-qr-ov[hidden]{display:none}
.kid-qr-ov .kid-qr svg{width:min(70vh,70vw);height:min(70vh,70vw)}
/* This week as a timetable (Kiers, 29 Sep): five days across the page */
.wg-sec .wrap{max-width:none}.wg-wrap{overflow-x:auto}
.wg{width:100%;border-collapse:separate;border-spacing:6px;table-layout:fixed;min-width:760px}
.wg thead th{font-size:17px;text-align:left;padding:6px 8px}.wg thead th span{display:block;font-size:13px;color:var(--dim);font-weight:normal}
.wg th.wg-b{width:110px;font-size:12.5px;text-align:left;color:var(--dim);vertical-align:top;padding-top:10px;font-weight:600}
.wg td{vertical-align:top;background:rgba(20,24,31,.03);border-radius:10px;padding:6px;min-height:40px}
.wg-c{display:block;padding:8px 10px;margin:0 0 6px;border-radius:10px;background:#fff;border:1px solid #e5e7eb;text-decoration:none;color:inherit}
a.wg-c:hover{border-color:#1e3a8a}.wg-c b{display:block;font-size:15px}.wg-c span{display:block;font-size:12.5px;color:var(--dim)}.wg-c i{display:block;font-style:normal;font-size:13.5px;margin-top:3px;color:#1e3a8a}
.wg-c i.wg-no{color:var(--dim)}.wg-x{background:#fffbeb;border-color:#fde68a}
.kid-recon{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:3002;padding:8px 16px;border-radius:999px;background:#fef3c7;border:2px solid #b45309;font-weight:800}.kid-recon[hidden]{display:none}
.wg-a{display:block;text-decoration:none;color:inherit}.wg-c em{display:block;font-style:normal;font-size:12px;color:var(--dim);margin-top:3px}
.wg-t{display:flex;gap:6px;margin-top:6px}.wg-t[hidden]{display:none}.wg-t a{font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;border:1px solid #cbd5e1;text-decoration:none;color:#16191d;background:#f8fafc}.wg-t a:hover{border-color:#1e3a8a}
.wg tr.wg-brk td{background:rgba(20,24,31,.1);height:18px;padding:3px}.wg tr.wg-brk th.wg-b{padding-top:4px;color:#374151}
/* two pictures side by side (the photo from above and our plan) */
.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 6px}.cmp2 img{width:100%;height:auto;border-radius:10px;border:1px solid #e5e7eb;background:#fff}
@media (max-width:760px){.cmp2{grid-template-columns:1fr}}.cmp2-c{font-size:15px;color:var(--dim);margin:0 0 12px}.cmp2-c i{display:block}.dl2{margin:6px 0 16px}
/* Reveal (Kiers, 29 Sep) */
.qz-sent{color:#166534;margin-right:6px}.qz-blank{color:#92400e}
.qz-tp{margin-top:14px;padding:10px 12px;border-radius:12px;background:#fef9c3;border:1px solid #fde68a}
.qz-tp-h{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.qz-tp-h a{font-size:14px}
.qz-rv{font:inherit;font-weight:800;padding:8px 16px;border-radius:999px;border:2px solid var(--tf-green,#617b30);background:#fff;color:var(--tf-green-d,#4d6226);cursor:pointer}.qz-rv:hover{background:#eef3e4}.qz-rv.on{background:var(--tf-green,#617b30);color:#fff}.qz-rv.on:hover{background:var(--tf-green-d,#4d6226)}
.qz-cnt{display:flex;gap:10px;font-size:14px;font-weight:700;margin-top:6px}.qz-cnt .r{color:#166534}.qz-cnt .w{color:#b91c1c}.qz-cnt .b{color:#6b7280}.qz-cnt[hidden]{display:none}
.qz-o.key{outline:3px solid #16a34a;outline-offset:2px}
.wk2-model{margin:4px 0 14px;padding:8px 12px;border-radius:10px;background:#dcfce7;border:1px solid #86efac;font-size:15px}.wk2-model[hidden]{display:none}
.lv-game{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0;padding:10px 12px;border-radius:12px;background:#244572;color:#fff}
.lv-gb{font:inherit;font-weight:900;padding:8px 16px;border-radius:999px;border:2px solid #ff2bd6;background:#ff2bd6;color:#fff;cursor:pointer}.lv-game .pc-k{color:#c7b8ff}
.lv-gs{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}.lv-gs span{background:rgba(255,255,255,.1);padding:3px 10px;border-radius:999px;font-size:14px}

/* Stop and listen (Kiers, 30 Sep): a calm cover over everything, above the arcade */
.tf-hush{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;padding:16px;background:#e8f1f8;color:#1e3a5f;text-align:center;animation:tfHushIn .6s ease}
.tf-hush[hidden]{display:none}
.tf-hush-in{max-width:760px}
.tf-hush-i{font-size:clamp(64px,12vw,120px);line-height:1;animation:tfHushB 3.5s ease-in-out infinite}
.tf-hush-en{margin:18px 0 4px;font-size:clamp(40px,8vw,84px);font-weight:800;letter-spacing:-.01em}
.tf-hush-it{margin:0 0 26px;font-size:clamp(28px,5.5vw,56px);font-style:italic;color:#3b6b96}
.tf-hush-s{margin:0;font-size:clamp(17px,2.4vw,24px);line-height:1.5;color:#43607e}
html.tf-hushed,html.tf-hushed body{overflow:hidden!important}
@keyframes tfHushIn{from{opacity:0}to{opacity:1}}
@keyframes tfHushB{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.tf-hush,.tf-hush-i{animation:none}}
.lv-listen{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0;padding:10px 12px;border-radius:12px;background:#e8f1f8;border:2px solid #9cc0de}
.lv-listen.on{background:#244572;border-color:#244572;color:#fff}.lv-listen.on .pc-k{color:#cfe0ef}
.lv-lb{font:inherit;font-weight:900;padding:8px 16px;border-radius:999px;border:2px solid #244572;background:#244572;color:#fff;cursor:pointer}
.lv-listen.on .lv-lb{background:#fff;color:#244572;border-color:#fff}

/* Library · Tinkercad activities (Kiers, 30 Sep) */
.tc-tip{padding:10px 14px;border-radius:10px;background:var(--panel);border-left:4px solid var(--a1)}
.tc-toc{columns:2;column-gap:28px;padding-left:1.2em}.tc-toc li{margin:4px 0;break-inside:avoid}@media (max-width:700px){.tc-toc{columns:1}}
.tc-list{display:grid;gap:18px}
.tc-act{border:2px solid var(--line);border-radius:16px;padding:16px 20px;background:var(--bg);scroll-margin-top:270px}
.tc-act.done{border-color:#16a34a}
.tc-act header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.tc-act h2{margin:0;flex:1;min-width:200px;font-size:24px}.tc-act h2 .h2it{display:block;font-size:16px;font-weight:normal;font-style:italic;color:var(--dim)}
.tc-num{font-weight:900;font-size:20px;min-width:52px;height:52px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--card);color:var(--cardfg);padding:0 8px}
.tc-done{font:inherit;font-weight:800;padding:7px 14px;border-radius:999px;border:2px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.tc-done.on{background:#16a34a;border-color:#16a34a;color:#fff}
.tc-goal{font-size:18px;margin:6px 0 12px}
.tc-step{display:flex;gap:12px;align-items:flex-start;margin:10px 0;font-size:17px}
.tc-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--a1);color:#fff;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.tc-en{color:var(--dim);font-size:15px;margin-top:2px}
.tc-check{margin-top:14px;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,#16a34a 12%,var(--bg));border:2px solid color-mix(in srgb,#16a34a 45%,transparent);font-weight:600}
.tc-checks{list-style:none;padding:0;margin:8px 0}.tc-checks li{margin:6px 0;padding-left:28px;position:relative}.tc-checks li::before{content:"☐";position:absolute;left:4px}

/* "My idea" sentence tiles (Kiers, 30 Sep): Primary, tap or drag a word into its gap */
.ls-cards>.ls-sent{grid-column:1/-1}
.ls-sent{display:grid;gap:14px}
.ls-sent-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:clamp(22px,4vw,32px);font-weight:900;line-height:1.3}
.ls-gap{min-width:120px;padding:6px 14px;border:3px dashed var(--a1);border-radius:14px;text-align:center;color:var(--dim);cursor:pointer}
.ls-gap.full{border-style:solid;background:color-mix(in srgb,var(--a1) 14%,var(--bg));color:var(--fg)}
.ls-sent.done .ls-gap.full{border-color:#16a34a;background:color-mix(in srgb,#16a34a 14%,var(--bg))}
.ls-sent-it{font-size:clamp(18px,3vw,24px);font-style:italic;color:var(--dim);min-height:1.4em}
.ls-bank{display:flex;flex-wrap:wrap;gap:10px;padding:10px;border-radius:14px;background:var(--panel)}
.ls-tile{font:inherit;font-size:20px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:14px;border:3px solid var(--line);background:var(--bg);color:var(--fg);cursor:grab;touch-action:none;user-select:none}
.ls-tile .ls-art svg{width:44px;height:34px}.ls-tile[hidden]{display:none}
.ls-ghost{position:fixed;z-index:4000;pointer-events:none;transform:translate(-50%,-50%) rotate(-3deg);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.lv-del{border:1.5px solid #c56035;background:none;color:#c56035;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;font-weight:bold;padding:3px 10px;white-space:nowrap;opacity:.8}.lv-del:hover{opacity:1}
.lv-build{margin:12px 0;padding:12px;border:2px solid var(--a1);border-radius:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lv-build select{font:inherit;padding:6px 8px;border-radius:8px}.lv-build .pc-k{flex-basis:100%;margin:0}

/* each pupil's own Word and PowerPoint for the project (Kiers, 30 Sep) */
.tf-myfiles{max-width:1100px;margin:14px auto;padding:12px 16px;border-radius:14px;border:2px solid #2563eb;background:color-mix(in srgb,#2563eb 8%,var(--bg));display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tf-mf-h{font-weight:900;margin-right:6px}.tf-mf{display:inline-flex;gap:6px;align-items:center;padding:8px 14px;border-radius:999px;background:#2563eb;color:#fff;text-decoration:none;font-size:17px}
.tf-mf i{opacity:.85;font-size:14px}.tf-mf.off{background:var(--panel);color:var(--dim)}.tf-mf-n{flex-basis:100%;font-size:13px;color:var(--dim)}
@media (max-width:700px){.tf-myfiles{margin:10px 16px}}
/* read-aloud buttons are the teacher's only (Kiers, 30 Sep): pupils never see them */
html:not(.tf-staff) .ls-say,html:not(.tf-staff) .kid-say,html:not(.tf-staff) .qz-say,html:not(.tf-staff) .fc-say{display:none!important}

/* 🎹 the teacher's piano music (Kiers, 30 Sep) */
.tf-piano-b{font:inherit;padding:6px 12px;border-radius:999px;border:1px solid #d6d1c4;background:#fff;cursor:pointer;margin-right:6px}
.tf-piano-b.on{background:#1e3a5f;color:#fff;border-color:#1e3a5f}
.tf-piano{position:fixed;left:16px;bottom:16px;z-index:2147483000;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;border-radius:14px;background:#fff;color:#14181f;border:2px solid #1e3a5f;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:15px;max-width:calc(100vw - 32px)}
.tf-piano[hidden]{display:none}.tf-piano button,.tf-piano select{font:inherit;padding:5px 10px;border-radius:999px;border:1px solid #c9c4b8;background:#fff;cursor:pointer}
.tf-piano .tfp-go.on{background:#1e3a5f;color:#fff}.tf-piano input[type=range]{vertical-align:middle;width:110px}
.tf-piano .tfp-t{display:flex;flex-direction:column;line-height:1.3;margin-right:6px;min-width:0;max-width:340px}
.tf-piano .tfp-now{display:flex;flex-direction:column;font-size:13px;color:#1e3a5f}.tf-piano .tfp-now span{font-weight:600;font-size:15px;color:#14181f}
.tf-piano .tfp-now small{color:#5c6b80;font-size:11.5px}.tf-piano .tfp-now small a{color:inherit}.tf-piano .tfp-now .tfp-n{color:#94a3b8}
.tf-piano .tfp-b{display:flex;gap:6px}.tf-piano .tfp-v{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.tf-piano .tfp-msg{color:#b45309;font-size:13px}.tf-piano .tfp-msg:empty{display:none}

/* Secondary step by step (Kiers, 30 Sep): one screen at a time, moved with the bar at the bottom */
.tf-off{display:none!important}
html.tf-stepping body{padding-bottom:84px}
.tf-steps{position:fixed;left:0;right:0;bottom:0;z-index:2000;display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--tf-green,#617b30);color:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.2)}
.tf-steps button{font:inherit;font-weight:800;font-size:17px;padding:10px 18px;border-radius:999px;border:0;cursor:pointer;background:#fff;color:#14181f}
.tf-steps button:disabled{opacity:.35;cursor:default}
.tf-steps .tf-sf{background:#16a34a;color:#fff;margin-left:auto}
.tf-steps .tf-slock{background:#6b7280;color:#fff}
.tf-steps .tf-sn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.tf-steps .tf-sdone{margin-left:auto;font-weight:800}
@media (max-width:600px){.tf-steps .tf-sn{font-size:13px}.tf-steps button{padding:8px 12px;font-size:15px}}

/* question cards (Kiers, 30 Sep): each question with its own answer boxes */
.wk2-card{border:2px solid var(--line,#d6d1c4);border-radius:16px;padding:16px 18px;margin:0 0 16px;background:var(--bg,#fff)}
.wk2-q{display:flex;gap:12px;align-items:flex-start;font-size:18px}.wk2-q i{display:block;color:var(--dim,#5c6b80);font-size:16px}
.wk2-n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--tf-green,#617b30);color:#fff;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.wk2-cues{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
.wk2-cues li{display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,#2563eb 8%,transparent);font-size:19px}
.wk2-cues li i{display:block;font-size:16px;color:var(--dim,#5c6b80)}.wk2-ci{font-size:30px;flex:none}
.wk2-pic img{max-width:100%;border-radius:10px;margin:8px 0}
.wk2-card textarea{width:100%;box-sizing:border-box;margin-top:10px;font:inherit;padding:10px;border-radius:10px;border:2px solid #9ca3af}
.wk2-fields{display:grid;gap:10px;margin-top:12px}
.wk2-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.wk2-f>span{min-width:220px}.wk2-f i{display:block;font-size:14px;color:var(--dim,#5c6b80)}
.wk2-in{font:inherit;font-size:18px;padding:8px 10px;border-radius:10px;border:2px solid #9ca3af;width:140px}
.wk2-u{font-size:17px}
.wk2-sent{margin-top:12px;font-size:19px;line-height:2.4}.wk2-sent .wk2-gap{width:110px;margin:0 6px;text-align:center}
.wk2-sent-it{display:block;color:var(--dim,#5c6b80)}

/* the floating task panel (Kiers, 30 Sep): pupils and the board; the page is narrower so it never covers text */
.tf-side{position:fixed;right:12px;top:140px;bottom:90px;width:220px;z-index:1900;overflow:auto;background:var(--bg,#fff);border:2px solid var(--tf-green,#617b30);border-radius:16px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.tf-side-h{display:block;font-size:14px;margin:4px 0 8px}
.tf-side ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tf-side button{font:inherit;font-size:14px;width:100%;text-align:left;display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:10px;border:0;background:transparent;color:var(--fg,#14181f);cursor:pointer}
.tf-side-n{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:#e5e7eb}
.tf-side-now button{background:var(--tf-green,#617b30);color:#fff;font-weight:800}.tf-side-now .tf-side-n{background:#fff;color:var(--tf-green-d,#4d6226)}
.tf-side-done .tf-side-n{background:#16a34a;color:#fff}
.tf-side-later button{opacity:.4;cursor:default}
.tf-side-f{display:block;margin-bottom:10px;padding:10px 12px;border-radius:12px;background:#2563eb;color:#fff;text-decoration:none;font-weight:800}.tf-side-f i{display:block;font-weight:400;font-size:13px}
@media (min-width:860px){html.tf-stepping body>*:not(.tf-side):not(.tf-steps):not(.tf-top):not(.tf-clock):not(.tf-mini){margin-right:244px}}
@media (max-width:859px){.tf-side{display:none}}
.tf-steps .tf-scont{background:#f97316;color:#fff}

/* lesson page tidy (Kiers, 30 Sep) */
.pi-it{display:block;color:var(--dim,#5c6b80);margin-top:4px}.pi-cap{font-size:14px;color:var(--dim,#5c6b80);margin-top:6px;text-align:center}
.pi-lines{display:grid;gap:8px}.pi-lines li{display:block}.pi-lines li span{display:block}.pi-lines li i{display:block;color:var(--dim,#5c6b80)}
.pi-steps{padding-left:1.4em}.pi-steps li{margin:4px 0}
p.about.ln{margin:4px 0}.ln-it p{margin:2px 0;color:var(--dim,#5c6b80)}
.tf-mat-off{display:none!important}
/* question card: a button to a site tool (30 Sep) */
.wk2-link{margin:10px 0}.wk2-link .tf-btn{display:inline-block;background:#0f766e;color:#fff;border-color:#0f766e;font-weight:bold;padding:9px 18px}

/* ==========================================================================
   Laser drawing tool (Kiers, 30 Sep 2026): the old tool's look, kept for shared classes; the one tool (src/tf/laser/, 9 Oct) carries its own copy in laser.css.
   Uses the site tokens (--bg --panel --line --fg --dim --a1 --a2). The laser bed stays card-coloured in both
   themes so red (cut), blue (score) and black (engrave) always read true.
   ========================================================================== */
.lz-sec{padding-top:18px}
.lz-help .rf-what{margin:0 0 8px}
.lz-legend-top{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:16px}
.lz-legend-top li,.lz-legend li{display:flex;align-items:center;gap:8px}
.lz-sw{display:inline-block;width:26px;height:0;border-top:4px solid #FF0000;flex:none}
.lz-sw.lz-score{border-top-color:#0000FF;border-top-style:dashed}
.lz-sw.lz-engrave{height:12px;border:0;background:#000;outline:1px solid var(--line)}
.lz [hidden]{display:none!important}
.lz{max-width:1600px;margin:0 auto;padding:0 12px;font-size:15px;color:var(--fg)}
.lz i{color:var(--dim)}
.lz-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;border:2px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--fg);font:inherit;font-weight:600;cursor:pointer;text-align:left;touch-action:manipulation}
.lz-b:hover{border-color:var(--a1)}.lz-b:disabled{opacity:.4;cursor:default}
.lz-b.on,.lz-b[aria-pressed="true"]{border-color:var(--a1);background:var(--bg);box-shadow:inset 0 0 0 2px var(--a1)}
.lz-go{background:var(--tf-green,#617b30);color:#fff;border-color:var(--tf-green,#617b30)}.lz-go:hover{background:var(--tf-green-d,#4d6226);border-color:var(--tf-green-d,#4d6226)}.lz-go i{color:inherit;opacity:.8}
.lz-wide{width:100%;margin-top:8px}
.lz-ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lz-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:8px 0}
.lz-name{display:flex;flex-direction:column;gap:4px;font-weight:600}
.lz-name input{font:inherit;font-size:18px;padding:8px 10px;border:2px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);min-width:220px}
.lz-topb{display:flex;flex-wrap:wrap;gap:8px}
.lz-status{flex:1 1 260px;min-height:24px;font-weight:600;color:#15803d}.lz-status.bad{color:#b91c1c}
.lz-signin{margin:0 0 8px;padding:8px 12px;border-left:4px solid var(--a1);background:var(--panel);border-radius:8px;font-weight:600}
.lz-tpl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.lz-tpl-h{font-weight:700;margin-right:4px}
.lz-tb{display:flex;flex-direction:column;align-items:center;gap:4px;width:120px;padding:6px;border:2px solid var(--line);border-radius:12px;background:var(--panel);
  color:var(--fg);font:inherit;font-size:14px;font-weight:600;cursor:pointer;touch-action:manipulation}
.lz-tb:hover{border-color:var(--a1)}
.lz-thumb{width:100%;height:62px;background:#fffdf5;border-radius:8px}
.lz-main{display:grid;grid-template-columns:150px minmax(0,1fr) 320px;gap:10px;align-items:start}
.lz-tools{display:flex;flex-direction:column;gap:6px}
.lz-tools .lz-b{justify-content:flex-start;font-size:14px;padding:6px 8px}
.lz-tools hr{width:100%;border:0;border-top:1px solid var(--line);margin:4px 0}
.lz-chk{display:flex;align-items:center;gap:8px;font-weight:600;margin:6px 0;cursor:pointer}
.lz-chk input{width:22px;height:22px;flex:none}
.lz-stage{position:relative;height:min(72vh,760px);min-height:380px;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.lz-corner{position:absolute;left:0;top:0;width:28px;height:24px;font-size:10px;display:grid;place-items:center;color:var(--dim);background:var(--bg);border-right:1px solid var(--line);border-bottom:1px solid var(--line);z-index:2}
.lz-rt{position:absolute;left:28px;right:0;top:0;height:24px;width:calc(100% - 28px);background:var(--bg);border-bottom:1px solid var(--line)}
.lz-rl{position:absolute;left:0;top:24px;bottom:0;width:28px;height:calc(100% - 24px);background:var(--bg);border-right:1px solid var(--line)}
.lz-svg{position:absolute;left:28px;top:24px;width:calc(100% - 28px);height:calc(100% - 24px);touch-action:none;cursor:crosshair;display:block;user-select:none;-webkit-user-select:none}
.lz-bedr{fill:#fffdf5}
.lz-bedo{fill:none;stroke:#8a7f66;stroke-width:1.5}
.lz-g1{fill:none;stroke:#e9e4d6;stroke-width:.5}
.lz-g10{fill:none;stroke:#d3cbb6;stroke-width:1}
.lz-shape{cursor:pointer}
.lz-selr{fill:none;stroke:var(--a1);stroke-width:2;stroke-dasharray:6 4}
.lz-selall{fill:none;stroke:var(--a2);stroke-width:1.5;stroke-dasharray:2 4}
.lz-bad{fill:rgba(245,158,11,.12);stroke:#f59e0b;stroke-width:2;stroke-dasharray:3 3}
.lz-marq{fill:rgba(180,83,9,.08);stroke:var(--a1);stroke-width:1.5;stroke-dasharray:4 3}
.lz-draft{opacity:.7}
.lz-hint{position:absolute;left:36px;right:10px;bottom:8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;pointer-events:none;font-size:14px}
.lz-hint>span{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:4px 8px;opacity:.95}
.lz-hint .lz-b{pointer-events:auto}
.lz-pos{position:absolute;right:8px;top:30px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:12px;color:var(--dim);pointer-events:none}
.lz-side{display:flex;flex-direction:column;gap:8px;max-height:calc(min(72vh,760px) + 4px);overflow:auto;padding-right:2px}
.lz-panel{border:2px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg)}
.lz-panel h3,.lz-panel summary{margin:0 0 8px;font-size:16px;font-weight:700;cursor:default}
.lz-panel summary{cursor:pointer;margin:0;min-height:28px;display:list-item}
.lz-panel[open] summary{margin-bottom:8px}
.lz-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lz-mode{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;min-height:74px;border:3px solid var(--line);border-radius:12px;background:var(--panel);
  color:var(--fg);font:inherit;font-size:14px;font-weight:700;text-align:center;cursor:pointer;touch-action:manipulation}
.lz-mode[data-mode="cut"].on{border-color:#FF0000;background:#fff1f1;color:#14181F}
.lz-mode[data-mode="score"].on{border-color:#0000FF;background:#eef0ff;color:#14181F}
.lz-mode[data-mode="engrave"].on{border-color:#000;background:#ecebe6;color:#14181F}
.lz-mode.on i{color:#444}
.lz-mi{width:40px;height:24px}
.lz-legend{list-style:none;padding:0;margin:8px 0 0;font-size:14px;display:grid;gap:4px}
.lz-small{font-size:13px;color:var(--dim);margin:6px 0 0}
.lz-f{display:grid;grid-template-columns:1fr 92px 26px;align-items:center;gap:6px;margin:5px 0;font-size:14px}
.lz-f input,.lz-f select{font:inherit;font-size:16px;padding:6px 8px;border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);width:100%;box-sizing:border-box}
.lz-f select{grid-column:2 / span 2}
.lz-f b{font-weight:600;color:var(--dim);font-size:13px}
.lz-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
.lz-kinds .lz-b{flex-direction:column;gap:0;font-size:13px;padding:6px 4px;text-align:center}
.lz-radio{display:grid;gap:6px;margin:8px 0;font-size:14px}.lz-radio label{display:flex;gap:8px;align-items:center;cursor:pointer}
.lz-radio input{width:20px;height:20px;flex:none}
.lz-two{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.lz-two .lz-b{font-size:13px;padding:6px}
.lz-arr{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.lz-arrh{font-weight:700;margin:6px 0 4px;font-size:14px}
.lz-row6{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lz-sq{flex-direction:column;gap:2px;font-size:12px;padding:4px;text-align:center}
.lz-sc{margin:6px 0 10px}
.lz-work{font-size:14px;padding:4px 8px;background:var(--panel);border-radius:6px}
.lz-warn{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}
.lz-warn button{width:100%;text-align:left;font:inherit;background:#fff7e6;color:#7c2d12;border:2px solid #f59e0b;border-radius:8px;padding:6px 8px;cursor:pointer}
.lz-warn button i{color:#9a3412}
.lz-ok{color:#15803d;font-weight:600}
.lz-dlg{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}
.lz-dlg[hidden]{display:none}
.lz-dlgin{background:var(--bg);color:var(--fg);border-radius:14px;padding:18px 20px;width:min(640px,100%);max-height:85vh;overflow:auto}
.lz-dlgin h3{margin:0 0 10px}.lz-dlgin h4{margin:12px 0 6px}
.lz-files{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px}
.lz-files li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.lz-files li b{flex:1 1 160px}.lz-files li span{color:var(--dim);font-size:13px}
.lz-del{border-color:#fca5a5}
@media (max-width:1180px){
  .lz-main{grid-template-columns:minmax(0,1fr) 300px}
  .lz-tools{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .lz-tools hr{display:none}
}
@media (max-width:820px){
  .lz-main{grid-template-columns:minmax(0,1fr)}
  .lz-side{max-height:none}
  .lz-stage{height:62vh}
  .lz-tb{width:96px}
}
.lz-selr,.lz-selall,.lz-bad,.lz-marq,.lz-draft{pointer-events:none}
/* drag handles: squares resize, round ones move an end or corner point; sized in screen pixels by laser.js */
.lz-hhit{fill:transparent;cursor:pointer}
.lz-hv{fill:#fff;stroke:var(--a1);stroke-width:2;pointer-events:none}
.lz-h:hover .lz-hv{fill:var(--a1)}
.lz-h[data-h="nw"] .lz-hhit,.lz-h[data-h="se"] .lz-hhit{cursor:nwse-resize}
.lz-h[data-h="ne"] .lz-hhit,.lz-h[data-h="sw"] .lz-hhit{cursor:nesw-resize}
.lz-h[data-h="n"] .lz-hhit,.lz-h[data-h="s"] .lz-hhit{cursor:ns-resize}
.lz-h[data-h="e"] .lz-hhit,.lz-h[data-h="w"] .lz-hhit{cursor:ew-resize}
.lz-h:not([data-h^="n"]):not([data-h^="s"]):not([data-h="e"]):not([data-h="w"]) .lz-hhit{cursor:move}
/* ---------- end of Laser drawing tool ---------- */

/* ---------- lesson screens, Kiers's review (30 Sep) ---------- */
/* the floating task panel is the pupil's dashboard: wider, more room inside, the countdowns at its top; the page sits
   closer to it (never under it) */
.tf-side{width:292px;padding:16px 16px 18px;right:12px;box-sizing:border-box}
.tf-side button{font-size:15px;padding:8px 10px}
.tf-side-h{font-size:15px;margin:2px 0 10px}
.tf-side-tm{position:sticky;top:-16px;z-index:1;margin:-4px -4px 12px;display:grid;gap:8px;background:var(--bg,#fff);padding-top:4px}
.tf-side-tm[hidden]{display:none}
.tf-tm{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:var(--tf-green,#617b30);color:#fff}
.tf-tm-k{font-weight:800;font-size:15px;line-height:1.25;color:#fff}.tf-tm-k i{display:block;font-weight:400;font-size:13px;opacity:.8}
.tf-tm-t{font-size:40px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tf-tm-late{background:#dc2626;animation:lv-pulse 1s infinite}.tf-tm-up{background:#16a34a}
@media (prefers-reduced-motion:reduce){.tf-tm-late{animation:none}}
@media (min-width:960px){
  html.tf-stepping body>*:not(.tf-side):not(.tf-steps):not(.tf-top):not(.tf-clock):not(.tf-mini){margin-right:320px}
  html.tf-stepping .wrap{max-width:1180px}
  html.tf-stepping.tf-wide .wrap{max-width:min(1680px,100%)}
  html.tf-stepping .tf-cd{display:none}        /* the countdown is in the panel, big: not twice on the screen */
}
@media (max-width:959px){.tf-side{display:none}html.tf-stepping body>*:not(.tf-side):not(.tf-steps):not(.tf-top):not(.tf-clock):not(.tf-mini){margin-right:0}}

/* the vocab test: no Italian in the question or the answers until the quiz is marked (it gives the answer away) */
.qz:not(.qz-marked) .qz-vocab i[lang=it]{display:none!important}

/* flashcards: the front is the word (and its Italian) on the left, the picture the full height of the card on the right */
.fc-app{max-width:680px}html.tf-wide .fc-app{max-width:820px}
.fc-card{height:360px}
.fc-front.fc-has-img{flex-direction:row;align-items:stretch;justify-content:flex-start;padding:0;overflow:hidden}
.fc-fw{flex:1 1 42%;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:22px 18px 22px 26px}
.fc-front:not(.fc-has-img) .fc-fw{align-items:center;text-align:center;padding:0}
.fc-fw b{font-size:36px;line-height:1.1;overflow-wrap:anywhere}.fc-fw i{display:block;color:var(--a2);font-size:20px;margin-top:6px}
.fc-fw small{margin-top:14px}
.fc-fp{flex:1 1 58%;min-width:0;display:flex;align-items:center;justify-content:center;background:#fff;border-left:3px solid var(--line);padding:12px}
.fc-card .fc-fp img{width:100%;height:100%;max-height:none;max-width:none;object-fit:contain;margin:0;border-radius:8px}
body[data-stage="p"] .fc-fw b{font-size:44px}
@media (max-width:560px){
  .fc-card{height:420px}
  .fc-front.fc-has-img{flex-direction:column-reverse}
  .fc-fp{flex:1 1 auto;border-left:0;border-bottom:3px solid var(--line);min-height:0}
  .fc-fw{flex:none;align-items:center;text-align:center;padding:14px 16px}.fc-fw b{font-size:30px}
}

/* the job cards: every card has the same rows, and the rows line up across the cards (subgrid) */
.ls-roles{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));column-gap:14px;row-gap:0}
.ls-role{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;align-content:start;margin-bottom:14px;padding:16px 18px}
.ls-role>*{grid-column:1;min-width:0}
.ls-role>.ls-role-ic{grid-row:1;font-size:52px;line-height:1.1;display:block;align-self:start;margin-bottom:6px}
.ls-role>b{grid-row:2;font-size:20px;align-self:end}
.ls-role>i{grid-row:3;align-self:start;margin-top:2px}
.ls-role>.ls-role-job{grid-row:4;margin:10px 0 0;align-self:start}
.ls-role>.ls-role-it{grid-row:5;margin:6px 0 0;align-self:start;font-style:italic;color:#be185d}
.ls-role>.ls-role-ph{grid-row:6;margin:10px 0 0;padding-left:18px;align-self:start;font-size:14px}.ls-role-ph i{display:block;color:var(--dim,#5c6b80)}
.ls-role>.ls-role-it:empty,.ls-role>.ls-role-ph:empty{display:none}
button.ls-role.on:after{grid-row:7;grid-column:1}
.ls-role>.kid-say{grid-row:auto}
/* one numbering while stepping: the screen's number (as in the panel and the bar), not "Task n of m" or card numbers */
.tg-scr{display:none}
html.tf-stepping .tg-scr{display:inline-block;align-self:center;padding:3px 12px;border-radius:999px;background:var(--tf-green,#617b30);color:#fff;font-size:18px;font-weight:800;margin-right:10px;vertical-align:middle;font-variant-numeric:tabular-nums}
html.tf-stepping .tg-n,html.tf-stepping .tg-of,html.tf-stepping .task-n,html.tf-stepping .task-of,html.tf-stepping .wk2-n{display:none!important}
/* the teacher's time cues: small and faint (staff only, src/tf/stops.js) */
.tf-cue{margin:0 2px 10px;font-size:12px;line-height:1.45;color:#b4bac4;font-variant-numeric:tabular-nums}
.tf-cue[hidden]{display:none}
.tf-cue-do{display:block}
.tf-cue-fix{position:fixed;left:12px;bottom:10px;z-index:30;max-width:300px;margin:0;pointer-events:none}
html.tf-has-cue .tf-mini{display:none}
.fc-fp.fc-photo{padding:0}.fc-card .fc-fp.fc-photo img{object-fit:cover;border-radius:0}   /* a photo fills its half; a line drawing is shown whole */
/* no black fills (Kiers, 30 Sep: "black is not one of the colours I want"): the logo's green, a darker green for
   hover / pressed; white text on it (4.8:1). Black text, the code editor and the laser's engrave swatch stay. */
:root{--tf-green:#617b30;--tf-green-d:#4d6226}
.tf-steps .tf-sf{background:#fff;color:var(--tf-green-d)}.tf-steps .tf-sf:hover{background:#eef3e4}
.tf-steps .tf-sb{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}.tf-steps .tf-sb:hover:not(:disabled){background:var(--tf-green-d)}
.tf-steps .tf-slock{background:var(--tf-green-d);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.tf-side-now button:hover{background:var(--tf-green-d)}
.tf-side button:not(:disabled):hover{background:#eef3e4}.tf-side-now button:not(:disabled):hover{background:var(--tf-green-d)}
.lv-bar button.on:hover{background:var(--tf-green-d);border-color:var(--tf-green-d)}
.wk-go:hover,.ln-save:hover{background:var(--tf-green-d)}
.tm-catch .tm-it{color:#fde68a}
.tf-tm .tf-tm-k i{color:#fff}
/* a question card's "show" text in a lesson that is not about code: a light panel in the site's font, line breaks kept */
.wk2-note{margin:8px 0;padding:12px 16px;border-radius:12px;background:#f3f6ec;border-left:5px solid var(--tf-green,#617b30);color:var(--fg);font-size:16px;line-height:1.55;white-space:pre-line}
html[data-theme="dark"] .wk2-note{background:color-mix(in srgb,var(--tf-green,#617b30) 18%,var(--bg))}
html[data-theme="dark"] .tf-side button:not(:disabled):hover,html[data-theme="dark"] .qz-rv:hover{background:#2c3a1a}
html[data-theme="dark"] .tf-side-now button:not(:disabled):hover{background:var(--tf-green-d)}
.tf-steps .tf-sf.tf-scont{background:#244572;color:#fff}.tf-steps .tf-sf.tf-scont:hover{background:#1b3557}.tf-steps .tf-sf.tf-scont:active{background:#142844}   /* Continue: the logo's dark blue, white text 9.7:1 (Kiers, 2 Oct; was the logo orange) */
/* 1 Oct (Kiers): timers in the panel far smaller; the teacher's time cues small and grey in the header; Start-timer button */
.tf-side .tf-tm{padding:5px 10px;border-radius:9px;gap:6px}
.tf-side .tf-tm-t{font-size:18px!important}
.tf-side .tf-tm-k{font-size:12px!important}.tf-side .tf-tm-k i{font-size:10px!important}
.tf-cue-hd{align-self:center;margin:0 14px 0 0;font-size:12.5px;line-height:1.3;color:#9aa3ad;white-space:nowrap;text-align:right;background:none!important;border:0!important;padding:0!important;position:static!important}
.tf-cue-hd .tf-cue-do{display:block;font-size:11.5px;color:#a8b0b9}
.qz-start{display:inline-block;margin:0 0 10px;padding:6px 14px;border-radius:999px;border:1.5px solid #617b30;background:#fff;color:#4d6226;font:inherit;font-weight:700;cursor:pointer}
.qz-start.on{background:#617b30;color:#fff}
/* the quiz record on the dashboard and the count on the board (Kiers, 1 Oct) */
.lv-qz{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:10px 0}
.lv-qz-c{border:1px solid #d6d1c4;border-radius:12px;padding:10px 14px;background:#fff}
.lv-qz-h{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}.lv-qz-h span{color:#5c6b80}
.lv-qz ul{list-style:none;margin:0;padding:0;columns:2 180px;column-gap:16px}
.lv-qz li{padding:2px 0;break-inside:avoid;font-size:15px}.lv-qz small{color:#5c6b80}
.lv-qz-m{display:inline-block;width:1.3em;font-weight:bold}.lv-qz-y .lv-qz-m{color:#16a34a}.lv-qz-n{color:#5c6b80}.lv-qz-n .lv-qz-m{color:#ca8a04}
.tf-side-qz{margin:0 0 10px;display:grid;gap:4px}.tf-side-qz[hidden]{display:none}
.tf-qc{padding:6px 10px;border-radius:10px;background:#fef9c3;border:1px solid #fde68a;font-size:14px;line-height:1.3}
.tf-qc-all{background:#dcfce7;border-color:#bbf7d0}
.lv-bar .lv-goend{font-weight:bold}.lv-bar .lv-arm{background:#fde68a;border-color:#ca8a04}
/* the design cycle (Kiers, 1 Oct): the full width of its card, today's stage unmistakable */
.dc-bar{flex-wrap:nowrap;align-items:stretch}
.dc-t{align-self:center;flex:none}
.dc{flex:1 1 auto;flex-wrap:nowrap;gap:3px}
.dc li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 14px 10px 20px;opacity:.55;font-size:16px}
.dc li:first-child{padding-left:12px}
.dc li.on{opacity:1;transform:none;font-size:18px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.18)}
.dc li small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin-top:2px}
@media (max-width:700px){.dc-bar{flex-wrap:wrap}.dc{flex-wrap:wrap}.dc li{flex:1 1 30%}}
/* Board view: bigger and wider lesson content (Kiers, 1 Oct: "text in the board view is far too small … a lot of wasted
   space"). The smallest content text is at least the project title's size (the "Our project" heading, 19px): the
   lesson's own blocks are scaled by 1.2 (16px → 19.2px) and the small print (captions, Italian lines, notes) is raised to
   16px before scaling. Only the lesson content: the header bar, menus, the floating panel and the step bar keep their
   size. The content uses the width left of the panel; worksheet cards are no longer held to 880px. */
@media (min-width:960px){
  html.as-pupil.tf-stepping{--bz:1.2}
  html.as-pupil.tf-stepping body>header.hero,html.as-pupil.tf-stepping body>section,html.as-pupil.tf-stepping body>.task-grp{zoom:var(--bz);margin-right:calc(320px / var(--bz))}
  html.as-pupil.tf-stepping .wrap{max-width:none}
  html.as-pupil.tf-stepping .wk2{max-width:none}
  html.as-pupil.tf-stepping p.about,html.as-pupil.tf-stepping .pi-it{max-width:62em}
  html.as-pupil.tf-stepping :is(section,.task-grp,header.hero) :is(figcaption,small,.pi-it,.wk2-who,p i,li i,label i,td i,.qz-o i,.qz-why,.ls-say,.dc li small){font-size:max(1em,16px)}
  html.as-pupil.tf-stepping :is(section,.task-grp,header.hero) :is(.eyebrow,.dc-t,.pi-cap,.ls-min,.dc-chip,.qz-rev,.qz-n,.fc-prog,.ls-role-job,.ls-role-it,.pc-k,th){font-size:16px}
  html.as-pupil.tf-stepping :is(section,.task-grp,header.hero) :is(i,a,span:not([class])){font-size:max(1em,16px)}
  html.as-pupil.tf-stepping :is(section,.task-grp,header.hero) img{max-width:100%;height:auto}
}

/* 🤷 I don't know (Kiers, 2 Oct; src/tf/quiz.js): after the real options, grey, the whole row; kept apart from a wrong answer */
.qz-os .qz-o.qz-dk{grid-column:1/-1;background:#f3f2ee;border:2px dashed #9ca3af;color:#4b5563}
.qz-os .qz-o.qz-dk span{color:#4b5563}.qz-os .qz-o.qz-dk i{color:#6b7280}
.qz-os .qz-o.qz-dk.on{border:2px solid #6b7280;background:#e5e7eb}
.qz-p .qz-os .qz-o.qz-dk{background:#8b929c;color:#fff;border:0}.qz-p .qz-os .qz-o.qz-dk :is(span,i){color:#fff}
.qz-done .qz-o.on:not(.right):not(.wrong){opacity:1}   /* the pupil's own answer stays clear: sent and waiting, or 🤷 */
/* ✏️ Change my answers, until the teacher reveals them */
.qz-edit{margin:6px 0 0 8px;min-height:44px;padding:8px 16px;border:2px solid #617b30;border-radius:999px;background:#fff;color:#4d6226;font:inherit;font-weight:700;cursor:pointer}
.qz-edit:hover{background:#eef3e4}.qz-edit i{color:inherit}
.qz-cnt .d{color:#6b7280}
/* a pupil on a quiz screen: no Back / Next, the teacher moves the class on (src/tf/stops.js) */
.tf-steps .tf-swait{margin-left:auto;font-weight:700}.tf-steps .tf-swait i{font-weight:400;opacity:.9}
/* the pupil's Next (Kiers, 2 Oct: "the NEXT button for students is not very clear … when I RELEASE THE CLASS, this
   button must POP and then PULSE until it is clicked"): bigger, white on the logo-green bar with the logo's green text
   and a white ring; released while the pupil is still on the screen (src/tf/stops.js S.pulse): one pop, then a gentle
   glow and grow until it is tapped. Reduced motion: no movement — the button turns orange with a thick ring instead. */
.tf-steps .tf-sf.tf-snext{min-height:54px;padding:10px 30px;font-size:21px;background:#fff;color:var(--tf-green-d);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 3px 0 rgba(0,0,0,.18)}
.tf-steps .tf-sf.tf-snext i{font-weight:700;font-style:normal;opacity:.85}
.tf-steps .tf-sf.tf-snext.tf-spulse{transform-origin:80% 50%;margin-right:12px;background:#fff;color:var(--tf-green-d);animation:tf-npop .55s cubic-bezier(.2,1.6,.4,1) both,tf-npulse 1.4s ease-in-out .55s infinite}
@keyframes tf-npop{0%{transform:scale(1)}45%{transform:scale(1.32)}70%{transform:scale(.94)}100%{transform:scale(1.06)}}
@keyframes tf-npulse{0%,100%{transform:scale(1.06);box-shadow:0 0 0 4px #fff,0 0 0 8px rgba(255,214,10,.0),0 3px 0 rgba(0,0,0,.18)}50%{transform:scale(1.14);box-shadow:0 0 0 4px #fff,0 0 0 14px rgba(255,214,10,.75),0 3px 0 rgba(0,0,0,.18)}}
@media (prefers-reduced-motion:reduce){.tf-steps .tf-sf.tf-snext.tf-spulse{animation:none;background:#f08c00;color:#fff;box-shadow:0 0 0 5px #fff,0 0 0 10px #ffd60a}}
@media (max-width:600px){.tf-steps .tf-sf.tf-snext{padding:8px 16px;font-size:17px;min-height:48px}}

/* ==========================================================================
   Global fixes (Kiers, 4 Oct 2026, after reviewing the week's lessons)
   ========================================================================== */
/* the design cycle table (project intro): six equal columns across the card, the stage's colour on top; today's stage in
   full colour, raised, with a "Today" arrow above it; the others quiet */
.pi-cycle.dct{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:28px 0 8px;padding:0;list-style:none;counter-reset:none}
.pi-cycle.dct li{position:relative;counter-increment:none;display:flex;flex-direction:column;gap:6px;padding:12px 12px 14px;border:1px solid color-mix(in srgb,var(--dc) 30%,#d6d1c4);border-top:6px solid var(--dc);border-radius:12px;background:#fff;opacity:.8}
.pi-cycle.dct li:before{content:none}
.pi-cycle.dct li b{font-size:18px;color:var(--dc)}
.pi-cycle.dct li .dct-en{display:block;font-size:14.5px;line-height:1.35;color:#2b2f36;margin:0}
.pi-cycle.dct li i{display:block;font-size:13px;line-height:1.3;color:#5c6b80}
.pi-cycle.dct li .ls-say{display:none}
.pi-cycle.dct li.dct-now{opacity:1;background:var(--dc);border-color:var(--dc);transform:translateY(-4px);box-shadow:0 8px 18px color-mix(in srgb,var(--dc) 35%,transparent)}
.pi-cycle.dct li.dct-now b,.pi-cycle.dct li.dct-now .dct-en,.pi-cycle.dct li.dct-now i{color:#fff}
.dct-arrow{position:absolute;left:50%;top:-30px;transform:translateX(-50%);white-space:nowrap;padding:2px 10px;border-radius:999px;background:var(--dc);color:#fff;font-size:13px;font-weight:800;letter-spacing:.3px}
@media (max-width:900px){.pi-cycle.dct{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}}
@media (max-width:560px){.pi-cycle.dct{grid-template-columns:1fr 1fr}}
.dc li:not(.on){opacity:.45}
.dc li.on small{font-size:12.5px}

/* Today: numbered steps */
.ls-today{list-style:none;counter-reset:td;padding:0;margin:6px 0;display:grid;gap:8px}
.ls-today li{counter-increment:td;position:relative;padding:10px 14px 10px 58px;border-radius:12px;background:#fff;border:1px solid var(--line,#d6d1c4);font-size:18px;line-height:1.4}
.ls-today li:before{content:counter(td);position:absolute;left:12px;top:8px;width:34px;height:34px;border-radius:50%;background:#617b30;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.ls-today li i{display:block;color:#5c6b80;font-size:.9em}

/* a picture and the text about it: one block on light grey; portrait = text beside, landscape = text below */
.ls-fig{margin:12px 0;padding:12px;border-radius:14px;background:#eef0f2;border:1px solid #dde1e6;display:grid;gap:12px;align-items:start}
.ls-fig-landscape{grid-template-columns:1fr}
.ls-fig-portrait{grid-template-columns:minmax(0,38%) 1fr}
.ls-fig-only{grid-template-columns:1fr}
.ls-fig-m img,.ls-fig-m svg{display:block;max-width:100%;height:auto;border-radius:10px;margin:0 auto}
.ls-fig-portrait .ls-fig-m img{max-height:520px;width:auto}
.ls-fig-landscape .ls-fig-m img{max-height:460px;width:auto}
.ls-fig-t{font-size:16px;line-height:1.4;color:#2b2f36}
.ls-fig-t .wk2-cues,.ls-fig-t .wk2-note{margin:0}
.ls-fig .pi-cap{display:block;color:#3b4350;text-align:left}
.ls-fig .cmp2{margin:0}
.wk2-fig .wk2-pic{margin:0}
@media (max-width:640px){.ls-fig-portrait{grid-template-columns:1fr}}

/* This week's keywords */
.kw-table{margin-top:16px}.kw-table summary{cursor:pointer;font-weight:700;color:#4d6226}
.fc-held{max-width:880px}
.fc-stop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 20px;border-radius:20px;background:#244572;color:#fff;text-align:center}
.fc-stop-i{font-size:54px;line-height:1}
.fc-stop b{font-size:40px;letter-spacing:.06em}.fc-stop>i{font-size:24px;letter-spacing:.04em;color:#cfe0ef;font-style:normal}
.fc-stop span{font-size:18px;max-width:640px}.fc-stop span i{color:#cfe0ef}
.fc-app.fc-board{max-width:none;display:grid;grid-template-columns:minmax(220px,30%) 1fr;gap:18px;text-align:left;align-items:start}
.fcb-side{border:2px solid #d6d1c4;border-radius:16px;background:#fff;padding:10px 12px}
.fcb-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;margin-bottom:6px}.fcb-h b{font-size:1.05em}
.fcb-k{font-size:.8em;font-weight:700}
.fcb-y{color:#15803d}.fcb-n{color:#b91c1c}
.fcb-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.fcb-list button{width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;text-align:left;padding:6px 8px;border:1px solid transparent;border-radius:10px;background:none;font:inherit;cursor:pointer;color:inherit}
.fcb-list .fcb-at button{background:#eef3e4;border-color:#9fb87a}
.fcb-w{font-weight:700;overflow-wrap:anywhere}.fcb-c{display:flex;gap:10px}.fcb-c b{min-width:1.6em;text-align:right}
.fcb-bar2{grid-column:1/-1;height:6px;border-radius:3px;background:#f3d6d6;overflow:hidden}.fcb-bar2 i{display:block;height:100%;background:#16a34a}
.fcb-tot{margin:8px 0 0;font-size:.8em;color:#5c6b80}
.fcb-main{text-align:center;min-width:0}
.fcb-bar{display:flex;justify-content:center;gap:10px;margin-top:12px}
.fcb-bar button,.fcb-go{font:inherit;font-weight:800;min-height:52px;padding:8px 20px;border-radius:14px;border:2px solid #617b30;background:#fff;color:#4d6226;cursor:pointer}
.fcb-rel{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:14px}
.fcb-go{background:#617b30;color:#fff}.fcb-go.on{background:#fff;color:#b91c1c;border-color:#b91c1c}
.fcb-st{font-size:.85em;color:#5c6b80}
@media (max-width:760px){.fc-app.fc-board{grid-template-columns:1fr}}

/* the vocab test and the exit quiz (Secondary): a darker background so the question boxes stand out; a quiet style lift */
.qz:not(.qz-p){max-width:none;padding:18px 18px 14px;border-radius:20px;background:linear-gradient(180deg,#244572,#1d3a61);color:#fff;box-shadow:0 6px 18px rgba(36,69,114,.25)}
.qz:not(.qz-p) .qz-me{color:#fff}
.qz:not(.qz-p) .qz-q{background:#fff;color:#1d2430;border:0;border-radius:16px;padding:16px 18px;box-shadow:0 3px 0 rgba(0,0,0,.12);margin:0 0 16px}
.qz:not(.qz-p) .qz-h{align-items:center;gap:12px}
.qz:not(.qz-p) .qz-n{width:34px;height:34px;font-size:16px;background:#c56035}
.qz:not(.qz-p) .qz-os{gap:12px}
.qz:not(.qz-p) .qz-o{gap:14px;padding:12px 16px;min-height:58px;border:2px solid #d5dbe3;border-radius:12px;background:#f6f8fb;line-height:1.3}
.qz:not(.qz-p) .qz-o>span{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid #9fb0c6;color:#244572;font-weight:800;font-size:15px}
.qz:not(.qz-p) .qz-o>b{flex:1;min-width:0}
.qz:not(.qz-p) .qz-o:hover:not(:disabled){border-color:#244572}
.qz:not(.qz-p) .qz-o.on{border-color:#244572;background:#e6eef8;transform:none;box-shadow:0 0 0 3px #e2a145!important}
.qz:not(.qz-p) .qz-o.on>span{background:#244572;border-color:#244572;color:#fff}
.qz:not(.qz-p) .qz-o.on::after{content:none}
/* while answering: only "I don't know" is red */
.qz .qz-os .qz-o.qz-dk{background:#f4f4f2;border:2px dashed #9ca3af;color:#4b5563}
.qz .qz-os .qz-o.qz-dk.on{border:2px solid #b91c1c;background:#fde8e8;color:#991b1b;box-shadow:0 0 0 3px #f5b5b5!important}
.qz .qz-os .qz-o.qz-dk.on>span{background:#b91c1c;border-color:#b91c1c;color:#fff}
/* after the answers are shown: right answers green; wrong answers and "I don't know" red */
.qz.qz-marked:not(.qz-p) .qz-o.right{background:#dcfce7;border:2px solid #15803d;box-shadow:0 0 0 3px #86efac!important;opacity:1}
.qz.qz-marked:not(.qz-p) .qz-o.right>span{background:#15803d;border-color:#15803d;color:#fff}
.qz.qz-marked .qz-o.wrong,.qz.qz-marked .qz-os .qz-o.qz-dk.wrong{background:#fde8e8;border:2px solid #b91c1c;box-shadow:0 0 0 3px #f5b5b5!important;opacity:1;color:#7f1d1d}
.qz.qz-marked:not(.qz-p) .qz-o.wrong>span{background:#b91c1c;border-color:#b91c1c;color:#fff}
.qz.qz-marked:not(.qz-p) .qz-o.right::after,.qz.qz-marked:not(.qz-p) .qz-o.wrong::after{content:none}
.qz:not(.qz-p) .qz-why{color:#33415a}
.qz:not(.qz-p) .qz-foot{margin-top:4px;color:#fff}
.qz:not(.qz-p) .qz-send{background:#e2a145;color:#1d2430;font-size:18px;padding:12px 30px}
.qz:not(.qz-p) .qz-msg{color:#fff}.qz:not(.qz-p) .qz-msg i{color:#cfe0ef}
.qz:not(.qz-p) .qz-edit{background:#fff}
.qz-total{display:inline-flex;align-items:center;gap:12px;margin:6px 12px 6px 0;padding:8px 18px;border-radius:14px;background:#fff;color:#1d2430}
.qz-total>span{font-weight:700}.qz-total i{color:#5c6b80}.qz-total .qz-score{font-size:30px;color:#15803d;margin:0}
.qz:not(.qz-p) .qz-rev{color:#7cc6bf}
/* the teacher (board or lesson view): the class's questions, no Send, no own marks; the panel on top */
.qz-teacher .qz-o{cursor:default}
.qz-teacher .qz-me,.qz-teacher .qz-foot{display:none!important}
.qz-teacher .qz-o.key{background:#dcfce7;border-color:#15803d;outline:none;box-shadow:0 0 0 3px #86efac!important}
.qz-teacher .qz-o.key>span{background:#15803d;border-color:#15803d;color:#fff}
.qz-tp.qz-tp-t{margin:0 0 14px;background:#fff;border:0;color:#1d2430;border-radius:14px}
.qz-tp-t .qz-tp-h{gap:14px}.qz-tp-t .qz-tp-n{font-weight:700}
.qz-tp-t .qz-start{margin:0 0 0 auto}
.qz-cnt{gap:14px;font-size:15px;font-weight:600;margin-top:10px;padding-top:8px;border-top:1px solid #e5e7eb}
.qz-cnt b{font-size:1.15em}.qz-cnt .r{color:#15803d}.qz-cnt .w,.qz-cnt .d{color:#b91c1c}

/* "In 10 seconds you will all move to the next section" */
.tf-gocd{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:9500;width:min(92vw,820px);animation:tf-gocd-in .25s ease-out}
.tf-gocd-in{display:flex;align-items:center;gap:22px;padding:22px 28px;border-radius:22px;background:#244572;color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.tf-gocd-n{flex:none;display:flex;align-items:center;justify-content:center;width:110px;height:110px;border-radius:50%;background:#e2a145;color:#1d2430;font-size:60px;font-weight:900;font-variant-numeric:tabular-nums}
.tf-gocd-in span b{display:block;font-size:30px;line-height:1.2}.tf-gocd-in span i{display:block;margin-top:6px;font-size:22px;color:#cfe0ef}
@keyframes tf-gocd-in{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translateX(-50%)}}

/* the class graph (src/tf/boardgraph.js) */
.bgraph{margin:14px 0;padding:14px;border-radius:16px;background:#f4f6f1;border:2px solid #c9d1bd}
.bg-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:8px}.bg-h b{font-size:1.15em}.bg-h i{color:#5c6b80}
.bg-n{margin-left:auto;font-weight:700;color:#4d6226}
.bg-grid{display:grid;grid-template-columns:minmax(240px,30%) 1fr;gap:16px;align-items:start}
@media (max-width:760px){.bg-grid{grid-template-columns:1fr}}
.bg-disp{min-height:64px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#fff;border:2px solid #617b30;font-size:2em;font-weight:800;font-variant-numeric:tabular-nums}
.bg-ph{font-size:.5em;color:#8a94a3;font-weight:600}
.bg-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.bg-keys button,.bg-add,.bg-tch button{font:inherit;font-weight:800;min-height:56px;border-radius:12px;border:2px solid #c9d1bd;background:#fff;cursor:pointer;font-size:1.2em;touch-action:manipulation}
.bg-add{width:100%;background:#617b30;border-color:#617b30;color:#fff}.bg-add:disabled{opacity:.45}
.bg-tch{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.bg-tch button{flex:1 1 30%;font-size:.85em;min-height:48px}
.bg-tch .bg-arm{background:#f59e0b;border-color:#d97706;color:#fff}
.bg-msg{color:#b91c1c;font-weight:700}
.bg-svg{width:100%;height:auto;display:block;background:#fff;border-radius:12px}
.bg-ax{stroke:#5c6b80;stroke-width:2}.bg-tk{font:600 16px sans-serif;fill:#5c6b80;text-anchor:middle}.bg-unit{font:700 15px sans-serif;fill:#5c6b80;text-anchor:end}
.bg-dot{fill:#244572;stroke:#fff;stroke-width:2}.bg-bar{fill:#244572}
.bg-mk{stroke-width:4;stroke-dasharray:8 6}.bg-ml{font:800 18px sans-serif;text-anchor:middle}
.bg-lo{stroke:#2563eb;fill:#2563eb}.bg-av{stroke:#c56035;fill:#c56035}.bg-hi{stroke:#15803d;fill:#15803d}
.bg-ask{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:#fff7e6;border:2px solid #e2a145}.bg-ask i{display:block;color:#5c6b80}
.bg-res{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.bg-r{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:12px;background:#fff;border:2px solid #d6d1c4}
.bg-r small{font-size:.75em;font-weight:700;color:#5c6b80}.bg-r b{font-size:1.5em}
.bg-r.on.bg-r-lo{border-color:#2563eb}.bg-r.on.bg-r-av{border-color:#c56035}.bg-r.on.bg-r-hi{border-color:#15803d}

/* the teacher's dashboard: data only */
.dg-h2{margin:22px 0 8px;font-size:20px}
.dg-sum{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.dg-chip{padding:6px 12px;border-radius:999px;background:#f1f3ef;border:1px solid #d6dccc;font-size:14px}.dg-chip b{font-size:18px}
.dg-chip.dg-warn{background:#fff4e5;border-color:#e2a145;color:#7a4300}
.dg-wrap{overflow-x:auto;border:1px solid #e1e4e8;border-radius:12px;background:#fff}
.dg{border-collapse:collapse;width:100%;font-size:14px}
.dg th,.dg td{border-bottom:1px solid #eceef1;padding:5px 7px;text-align:center;white-space:nowrap}
.dg thead th{position:sticky;top:0;background:#f7f8f6;font-size:12.5px;color:#4b5563;z-index:1}
.dg .dg-name{text-align:left;position:sticky;left:0;background:#fff;z-index:2;font-weight:700;min-width:170px}
.dg thead .dg-name{background:#f7f8f6;z-index:3}
.dg-sc span{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#e5e7eb}
.dg-sc.dg-open span{background:#617b30;color:#fff}
.dg-c{width:28px;padding:3px!important}
.dg-c b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font-size:13px}
.dg-done b,.dg-k.dg-done{background:#dcfce7;color:#15803d}
.dg-here b,.dg-k.dg-here{background:#244572;color:#fff}
.dg-k{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;font-size:12px;margin-right:4px}
.dg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:#cbd5e1;vertical-align:middle}
.dg-on .dg-dot{background:#16a34a}.dg-wait .dg-dot{background:#f97316}.dg-idle .dg-dot{background:#e2a145}
.dg-off{color:#8a94a3}.dg-wait{background:#fff7ed}.dg-wait .dg-name{background:#fff7ed}
.dg-tag{font-style:normal;font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:#fde7cf;color:#9a4b00;margin-left:4px}
.dg-tag-off{background:#eef0f2;color:#6b7280}
.dg-let{font:inherit;font-size:12px;font-weight:700;padding:2px 8px;border-radius:8px;border:1.5px solid #f97316;background:#fff;color:#c2410c;cursor:pointer}
.dg-mk{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle}
.dg-mk i,.dg-key i,.dg-self i{display:inline-block;width:9px;height:9px;border-radius:2px;background:#d1d5db}
.dg-m-r{background:#16a34a!important}.dg-m-w{background:#dc2626!important}.dg-m-d{background:#f59e0b!important}.dg-m-b{background:#d1d5db!important}
.dg-self{display:inline-flex;gap:3px}.dg-self i{width:12px;height:12px;border-radius:50%}
.dg-s0{background:#16a34a!important}.dg-s1{background:#e2a145!important}.dg-s2{background:#dc2626!important}
.dg-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:#5c6b80;margin:6px 0 4px}.dg-key i{margin-right:4px}
.dg-y{color:#15803d;font-weight:700}.dg-n{color:#b91c1c;font-weight:700}.dg-d{color:#b45309;font-weight:700}
.dg-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:14px;margin:14px 0}
.dg-p{border:1px solid #e1e4e8;border-radius:12px;background:#fff;padding:10px 12px}
.dg-ph{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:6px}.dg-ph b{font-size:16px}.dg-ph span{color:#5c6b80;font-size:14px}
.dg-rv{margin-left:auto;font:inherit;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;border:2px solid #617b30;background:#fff;color:#4d6226;cursor:pointer}
.dg-rv.on{background:#617b30;color:#fff}
.dg-qt{border-collapse:collapse;width:100%;font-size:13.5px}.dg-qt th,.dg-qt td{border-bottom:1px solid #f0f1f3;padding:4px 6px;text-align:left}
.dg-qt td:nth-child(n+3){text-align:center}
.dg-bar{display:inline-block;width:80px;height:8px;border-radius:4px;background:#fde2e2;overflow:hidden;vertical-align:middle}.dg-bar i{display:block;height:100%;background:#16a34a}
.dg-ctl{margin:18px 0;border:1px solid #e1e4e8;border-radius:12px;padding:8px 12px;background:#fafbf9}.dg-ctl summary{cursor:pointer;font-weight:700;color:#4d6226}

/* This week (the teacher's page) */
.tw-day h2{margin:0 0 8px}
.tw-row{display:grid;grid-template-columns:120px 1fr auto;gap:8px 18px;align-items:center;padding:12px 14px;margin:0 0 8px;border:1px solid #e1e4e8;border-radius:12px;background:#fff}
.tw-x{background:#f8f9f6}
.tw-when b{display:block;font-size:16px}.tw-when span{color:#5c6b80;font-size:14px}
.tw-cls{font-weight:800;font-size:17px}.tw-ttl{font-size:16px;margin-top:2px}.tw-pr{color:#5c6b80;font-size:14px}.tw-obj{font-size:14px;color:#3b4350;margin-top:4px}
.tw-go{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tw-b{display:inline-block;padding:7px 14px;border-radius:999px;border:2px solid #617b30;color:#4d6226;font-weight:700;text-decoration:none;font-size:14px;background:#fff}
.tw-b:hover{background:#eef3e4}.tw-board{background:#617b30;color:#fff}.tw-board:hover{background:#4d6226}
@media (max-width:760px){.tw-row{grid-template-columns:1fr}.tw-go{justify-content:flex-start}}
.bg-ms{display:inline-flex;gap:4px}.bg-ms button{font:inherit;font-weight:800;min-width:44px;min-height:40px;border-radius:10px;border:2px solid #c9d1bd;background:#fff;cursor:pointer}.bg-ms button.on{background:#244572;border-color:#244572;color:#fff}
.bg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.bg-chips small{flex-basis:100%;color:#5c6b80}
.bg-chip{font:inherit;font-size:.85em;font-weight:700;padding:4px 10px;border-radius:999px;border:1.5px solid #9fb0c6;background:#fff;cursor:pointer}.bg-chip-m{border-color:#e2a145}
.bg-r em{font-style:normal;font-size:.7em;color:#5c6b80;margin-top:2px;text-align:center}
.wk2-blink{margin:10px 0}.wk2-blink .tf-btn{display:inline-block;padding:14px 26px;font-size:20px;font-weight:800;border-radius:16px;background:#244572;color:#fff;border-color:#244572;text-decoration:none}
.wk2-blink small{display:block;margin-top:4px;color:#5c6b80}
.dg-links{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}.dg-links a{padding:8px 16px;border-radius:999px;background:#244572;color:#fff;font-weight:700;text-decoration:none}
/* one title per screen (Kiers, 4 Oct 2026: "Vocab test" was shown again and again): the task's group title says it */
.task-grp :is(#quiz-starter,#quiz-exit,#keywords)>.wrap>h2{display:none}
/* the Italian of an option sits under its English, never as a third column */
.qz:not(.qz-p) .qz-o{flex-wrap:wrap;row-gap:2px}
.qz:not(.qz-p) .qz-o>i{flex:1 0 100%;padding-left:46px;text-align:left;font-size:.85em}
html.tf-stepping .task-grp :is(#my-work,#my-work-2)>.wrap>h2{display:none}
html.as-pupil .wk2-who{display:none}
/* flashcards: every card's audio, English and Italian (Kiers, 5 Oct 2026; src/tf/cards.js) */
.fc-say{display:flex;gap:10px;justify-content:center;margin-top:10px}.fc-say[hidden]{display:none}
.fc-say-b{font:inherit;font-size:16px;font-weight:700;min-height:44px;padding:8px 18px;border-radius:999px;border:2px solid #617b30;background:#fff;color:#4d6226;cursor:pointer}
.fc-say-b:hover{background:#eef3e4}.fc-say-it{border-color:#244572;color:#244572}.fc-say-it:hover{background:#e8edf5}
body[data-stage="p"] .fc-say-b{font-size:20px;min-height:56px;padding:10px 24px}
html[data-theme="dark"] .fc-say-b{background:transparent;color:#cfe0a8}html[data-theme="dark"] .fc-say-it{color:#bcd0ec}
/* the pupil's lesson panel folds away (Kiers, 5 Oct 2026; src/tf/stops.js sideTab): a small arrow tab on its left
   edge; folded, the panel slides off to the right and the lesson takes the room back. The panel never sits on the
   lesson: the lesson keeps a right margin the panel's width (open) or the tab's (folded). */
.tf-side-tab{display:none}
html.tf-pside .tf-side-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:fixed;z-index:1901;top:calc(50% - 40px);right:302px;
  min-width:34px;min-height:80px;padding:6px 4px;border:2px solid var(--tf-green,#617b30);border-right:0;border-radius:12px 0 0 12px;background:var(--tf-green,#617b30);color:#fff;
  font:inherit;font-size:16px;font-weight:800;cursor:pointer;box-shadow:-3px 4px 12px rgba(0,0,0,.15);transition:right .25s ease}
html.tf-pside .tf-side-tab{margin:0!important}html.tf-pside .tf-side-tab:hover{background:var(--tf-green-d,#4d6226)}
.tf-side-tab-t{font-size:13px;font-variant-numeric:tabular-nums;writing-mode:vertical-rl;transform:rotate(180deg)}.tf-side-tab-t.late{color:#fde68a}
html.tf-pside .tf-side{transition:transform .25s ease,visibility .25s}
html.tf-pside.tf-pside-min .tf-side{transform:translateX(calc(100% + 24px));visibility:hidden}
html.tf-pside.tf-pside-min .tf-side-tab{right:0}
@media (min-width:960px){
  html.tf-pside.tf-pside-min.tf-stepping body>*:not(.tf-side):not(.tf-steps):not(.tf-top):not(.tf-clock):not(.tf-mini):not(.tf-side-tab){margin-right:48px}
  html.tf-pside.tf-stepping body>*:not(.tf-side):not(.tf-steps):not(.tf-top):not(.tf-clock):not(.tf-mini):not(.tf-side-tab){transition:margin-right .25s ease}
  html.tf-pside:not(.tf-pside-min).tf-stepping body>*:not(.tf-side):not(.tf-steps):not(.tf-top):not(.tf-clock):not(.tf-mini):not(.tf-side-tab){margin-right:348px}
}
/* a narrow screen: the panel opens over the lesson (folded by default), the tab keeps a small strip */
@media (max-width:959px){
  html.tf-pside:not(.tf-pside-min) .tf-side{display:block;width:min(292px,82vw)}
  html.tf-pside:not(.tf-pside-min) .tf-side-tab{right:calc(min(292px,82vw) + 12px)}
  html.tf-pside.tf-stepping body>*:not(.tf-side):not(.tf-steps):not(.tf-top):not(.tf-clock):not(.tf-mini):not(.tf-side-tab){margin-right:40px}
}
@media (prefers-reduced-motion:reduce){html.tf-pside .tf-side,html.tf-pside .tf-side-tab{transition:none}}
.dg-act td.dg-act-who{text-align:left!important;font-size:13px;line-height:1.6}.dg-act tr.dg-act-later td{color:#9aa3ad}.dg-act td:nth-child(2){min-width:180px}   /* the activities table (Kiers, 5 Oct 2026) */
html.tf-pside .tf-side .ms-btn{position:static;display:block;width:100%;margin:12px 0 0;text-align:center;box-shadow:none}
html.tf-pside .ms-panel{bottom:96px;max-height:calc(100vh - 260px);overflow:auto}
/* Bolt's line wraps inside its bubble (Kiers, 5 Oct 2026, E3 on the board: it ran outside and under the teacher panel);
   on the board the bubble stops before the floating teacher panel (.bc-float, src/tf/boardctl.js) */
.kid-hello,.kid-step-h{min-width:0}
.kid-hello .kid-bubble,.kid-step-h .kid-bubble{flex:1 1 auto;min-width:0}
.kid-bubble>b,.kid-bubble>i{flex:1 1 calc(100% - 80px);min-width:0;overflow-wrap:break-word}
body.kid:has(.bc-float) .kid-hello,body.kid:has(.bc-float) .kid-step-h,body.kid:has(.bc-float) .kid-next{margin-right:min(280px,16vw)}
/* Blocks open over the kids' app: the board's floating ❓ (src/tf/boardvote.js) and 📱 QR stay out of its way (Kiers, 5 Oct 2026) */
body.kid:has(.kid-blk-ov) > #bv-fab,body:has(.kid-blk-ov) .bv-fab,body:has(.kid-blk-ov) .kid-qr-btn{display:none!important}
/* Bolt's "well done" pop-up (src/tf/kidapp.js reward): English and Italian side by side on ONE line, scaled to the screen
   (Kiers, 5 Oct 2026, E3: "YES message after flashcards is not all on one line") */
.kid-reward .kid-bubble{flex-wrap:nowrap;justify-content:center;align-items:baseline;gap:.45em;white-space:nowrap;max-width:94vw;box-sizing:border-box;font-size:clamp(18px,3.6vw,46px);padding:.4em .7em}
.kid-reward .kid-bubble>b,.kid-reward .kid-bubble>i{flex:none;min-width:0;display:inline}
.kid-reward .kid-bubble>i{font-size:.8em;margin:0}
.kid-reward .kid-bubble>i::before{content:"· ";color:#9aa3ad}
/* the board's screen icons send the whole class (src/tf/kidapp.js drawNav, Kiers 5 Oct 2026): big for a 2.5 m touch
   board; the class's screen has a thick green ring and 👥 on its corner */
html.as-pupil body.kid .kid-nb{width:96px;height:96px;font-size:54px;border-radius:24px}
html.as-pupil body.kid .kid-nav{gap:16px}
.kid-nb.cls{outline:7px solid #617b30;outline-offset:5px}
.kid-nb-c{position:absolute;left:-14px;top:-14px;font-size:20px;line-height:1;background:#fff;border:2px solid #617b30;border-radius:999px;padding:2px 6px;pointer-events:none}
html.as-pupil body.kid .kid-nav{padding-bottom:16px}
html.as-pupil body.kid .kid-stage{padding-bottom:200px}
/* Blocks in the lesson (src/tf/kidapp.js blkPic, openBlk; Kiers 6 Oct 2026: "must appear to be embedded in the page … the
   CLOSE button much more visible"): a picture to tap; the frame sits in the content area between the app's header and the
   screen icons, with the step's title and a big orange Close on its top edge */
.kid-blk-pic{position:relative;display:block;width:100%;max-width:760px;margin:6px auto 18px;padding:0;border:4px solid #617b30;border-radius:20px;overflow:hidden;background:#fff;cursor:pointer;touch-action:manipulation;box-shadow:0 6px 18px rgba(36,69,114,.18)}
.kid-blk-pic img{display:block;width:100%;height:auto;opacity:.92}
.kid-blk-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;padding:14px 26px;border-radius:999px;background:#617b30;color:#fff;font-size:26px;box-shadow:0 6px 20px rgba(0,0,0,.25);white-space:nowrap}
.kid-blk-play b{color:#fff}.kid-blk-play i{font-style:normal;color:#fdf3dc;margin-left:8px;font-weight:600}
.kid-blk-tri{font-size:40px;line-height:1}
.kid-blk-pic:active .kid-blk-play{background:#4d6226}
.kid-blk-ov{position:fixed;left:12px;right:12px;top:90px;bottom:120px;z-index:7;display:flex;flex-direction:column;background:#fff;border:5px solid #617b30;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(36,69,114,.25)}
@media (min-width:1000px){body.kid:has(> #tf-bc-float) .kid-blk-ov{right:290px}}
.kid-blk-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 8px 6px 16px;background:#eef3e4;border-bottom:3px solid #617b30;color:#244572;font-size:22px;box-sizing:border-box}
.kid-blk-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}.kid-blk-ic{font-size:34px;line-height:1}
.kid-blk-t b{color:#244572}.kid-blk-t i{font-style:normal;color:#be185d;margin-left:8px;font-weight:600}
.kid-blk-back{flex:none;min-height:64px;padding:6px 26px;border-radius:16px;border:0;background:#c56035;color:#fff;font:inherit;font-size:22px;font-weight:800;cursor:pointer;touch-action:manipulation;display:flex;align-items:center;gap:12px;box-shadow:0 4px 0 #8f4424}
.kid-blk-back b{color:#fff}.kid-blk-back i{font-style:normal;color:#fff;opacity:.9;margin-left:6px;font-weight:600}
.kid-blk-x{font-size:30px;line-height:1}
.kid-blk-back:active{transform:translateY(3px);box-shadow:0 1px 0 #8f4424}
.kid-blk-back.locked{background:#9aa3ad;box-shadow:none;cursor:default}
html.as-pupil .kid-blk-bar{font-size:28px}html.as-pupil .kid-blk-back{min-height:84px;font-size:28px;padding:8px 34px}html.as-pupil .kid-blk-x{font-size:38px}
/* "tick" and "rank" worksheet cards (Kiers, 6 Oct 2026; src/tf/work.js choices) */
.wk2-chk{margin:10px 0 6px;color:#4d6226;font-weight:600}
.wk2-chs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:8px 0}
.wk2-ch{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border:2px solid #d6d1c4;border-radius:14px;background:#fff;color:#14181f;font:inherit;font-size:17px;text-align:left;cursor:pointer;touch-action:manipulation}
.wk2-ch b{display:block;font-weight:600}.wk2-ch i{display:block;color:#5c6b80;font-size:15px}
.wk2-chb{flex:0 0 40px;height:40px;border-radius:50%;border:2px solid #d6d1c4;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#fff}
.wk2-ch.on{border-color:#617b30;background:#f3f6ec}.wk2-ch.on .wk2-chb{background:#617b30;border-color:#617b30}
.wk2-rk.on .wk2-chb{background:#c56035;border-color:#c56035}.wk2-rk.on{border-color:#c56035;background:#fdf1ec}
.wk2-ch.wk2-full{animation:wk2shake .3s}@keyframes wk2shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.wk2-tally{margin-top:14px;padding:12px 14px;border-radius:12px;background:#f4f3ee;border-left:5px solid #244572}
.wk2-th{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}.wk2-th span{color:#5c6b80}
.wk2-tr{display:grid;grid-template-columns:minmax(120px,38%) 1fr 42px;gap:8px;align-items:center;margin:4px 0;font-size:16px}
.wk2-tb{height:18px;border-radius:9px;background:#e5e1d6;overflow:hidden}.wk2-tb i{display:block;height:100%;background:#e2a145;border-radius:9px}
.wk2-tr b{text-align:right}.wk2-tr small{grid-column:1/-1;color:#4d6226;margin:-2px 0 4px}
/* ATTENTION buttons in bright yellow (Kiers, 6 Oct 2026, after E4: "The brand colours are poor choices for buttons and
   menu bars that need to draw attention: use a bright yellow, don't hide"): Done ✓, Open Blocks, Close · Back to the
   lesson, the current step, Next. Bright yellow, dark navy text, a strong border; green and orange stay for the rest. */
:root{--att:#FFD60A;--att-ink:#1b2a4a;--att-dk:#c9a500}
.kid-done,.kid-done.bcx-open{background:var(--att)!important;color:var(--att-ink)!important;border:5px solid var(--att-ink)!important;box-shadow:0 6px 0 var(--att-ink)!important;min-height:76px}
.kid-done b,.kid-done i{color:var(--att-ink)!important}
.kid-nb.on{background:var(--att)!important;border-color:var(--att-ink)!important}
.kid-blk-play{background:var(--att)!important;color:var(--att-ink)!important;border:5px solid var(--att-ink)}.kid-blk-play b,.kid-blk-play i{color:var(--att-ink)!important}
.kid-blk-pic{border-color:var(--att-ink)}
.kid-blk-back{background:var(--att)!important;color:var(--att-ink)!important;border:5px solid var(--att-ink)!important;box-shadow:0 5px 0 var(--att-ink)!important;min-height:76px}
.kid-blk-back b,.kid-blk-back i{color:var(--att-ink)!important}
.kid-blk-back.locked{background:#d6dbe1!important;color:#3b4656!important;border-style:dashed!important;box-shadow:none!important}.kid-blk-back.locked b,.kid-blk-back.locked i{color:#3b4656!important}
.kid-blk-bar{background:#fff7cc;border-bottom:4px solid var(--att-ink)}
/* tablets: Blocks over the whole screen (fullscreen when allowed), the Close bar always on top */
.kid-blk-ov.kid-blk-full{left:0!important;right:0!important;top:0!important;bottom:0!important;border:0;border-radius:0;z-index:2147480000}
.kid-blk-ov:fullscreen{background:#fff}
/* the draw steps are led from the board now: the sentence frame big on the board; "Look at the board" on a tablet */
.kid-frame{font-size:44px;line-height:1.25;text-align:center;background:#fff;border:5px solid var(--att-ink);border-radius:24px;padding:24px 28px;margin:10px 0}
.kid-frame i{font-size:36px}.kid-frame-how{text-align:center;font-size:28px}
.kid-look{display:flex;flex-direction:column;align-items:center;gap:4px;margin:10px auto;padding:14px 30px;max-width:640px;background:var(--att);color:var(--att-ink);border:5px solid var(--att-ink);border-radius:26px;font-size:40px;text-align:center}
.kid-look b,.kid-look i{color:var(--att-ink)!important}.kid-look-i{font-size:56px;line-height:1}.kid-look~.kid-done{margin-top:12px}
.kid-frame-s{text-align:center;font-size:22px;color:#475569}

/* Thinking More · read aloud (Kiers, 6 Oct 2026). Big enough to hit on a 2.5 m board without aiming. */
.tm-say{display:inline-flex;gap:6px;margin-left:10px;vertical-align:middle}
.tm-say-b{font:inherit;font-size:15px;font-weight:700;line-height:1;cursor:pointer;
  border:2px solid #c7cdd6;background:#fff;color:#244572;border-radius:999px;padding:6px 12px;min-height:34px}
.tm-say-b:hover{border-color:#244572;background:#f2f6fb}
.tm-say-b:active{transform:translateY(1px)}
.tm-say-it{color:#c56035;border-color:#e6c4b4}
.tm-say-it:hover{border-color:#c56035;background:#fdf3ee}
.tm-wc .tm-say{display:flex;margin:8px 0 0;justify-content:center}
@media print{.tm-say{display:none}}
/* every screen ends well above the step bar (src/tf/kidapp.js navRoom: --kid-navh is the bar's height) */
body.kid .kid-stage{padding-bottom:calc(var(--kid-navh,170px) + 40px)!important}
/* one-word tablet buttons (src/tf/kidapp.js lbl): the icon, the word, the Italian smaller underneath */
.kid-1w{display:inline-flex!important;align-items:center;justify-content:center;gap:14px;text-align:left}
.kid-done.kid-1w{display:flex!important;margin-left:auto;margin-right:auto;min-width:240px}
.kid-1w .kid-bi{font-size:1.4em;line-height:1}
.kid-1w .kid-bw{display:flex;flex-direction:column;line-height:1.05}
.kid-1w .kid-bw b{font-size:1em}.kid-1w .kid-bw i{font-size:.62em;font-style:normal;font-weight:600;opacity:.85}
.kid-y2 .kid-done.kid-1w{min-width:0}
/* tick and rank cards: compact (Kiers, 7 Oct 2026) */
.wk2-chs{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.wk2-ch{min-height:46px;padding:6px 10px;gap:8px;font-size:15px;border-radius:10px}
.wk2-ch i{font-size:13px}.wk2-chb{flex:0 0 30px;height:30px;font-size:16px}
.wk2-chk{font-size:15px;margin:6px 0 4px}.wk2-tr{font-size:14px}

/* One tab (Kiers, 7 Oct 2026; data/sis-lessons/RULES.md G): a tool inside a lesson card's frame (lesson.json worksheet
   task "embed", src/tf/work.js). The tool page opened with ?embed=1 shows only the tool: no bar, menu, crumbs, title
   or footer (build.py page() sets html.tf-embed; bar.js stops there). */
html.tf-embed .tf-top,html.tf-embed .tf-bar,html.tf-embed .tf-tabs,html.tf-embed .crumbs,html.tf-embed header.hero,
html.tf-embed body>footer,html.tf-embed nav.toc2,html.tf-embed .toc2,html.tf-embed .tf-clock,html.tf-embed .tf-mini{display:none!important}
html.tf-embed body{padding:0!important;margin:0}
html.tf-embed body>section{padding-top:8px;padding-bottom:8px}
.wk2-embed{margin:12px 0 14px;border:3px solid #617b30;border-radius:16px;overflow:hidden;background:var(--panel,#f6f7f2)}
.wk2-embar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;background:#eef3e4;color:#4d6226}
html[data-theme="dark"] .wk2-embar{background:#26301a;color:#dfe9c8}
.wk2-embar b{font-size:1.1em}.wk2-embar i{font-weight:normal}
.wk2-embar .wk2-full{margin-left:auto;min-height:52px;padding:8px 20px;font-size:1.1em;font-weight:bold;border-radius:12px;border:4px solid var(--att-ink,#1b2a4a);background:var(--att,#FFD60A);color:var(--att-ink,#1b2a4a);box-shadow:0 4px 0 var(--att-ink,#1b2a4a);cursor:pointer}
.wk2-embar .wk2-full i{color:var(--att-ink,#1b2a4a)}
.wk2-embed iframe{display:block;width:100%;border:0;background:var(--bg,#fff)}
.wk2-embed iframe:fullscreen{height:100vh!important}
/* a card with a tool inside uses the whole width of the lesson column */
.wk2:has(.wk2-embed){max-width:none}
/* the vector design tool inside a card: the drawing area fills the frame; the long help and the pop-up row stay on the full page */
html.tf-embed .lz-help,html.tf-embed .lz-tpl-pop{display:none}
html.tf-embed .lz-sec>.wrap,html.tf-embed .lz-sec{max-width:none}
html.tf-embed .lz-stage{height:calc(100vh - 24px)}html.tf-embed .lz-side{max-height:calc(100vh - 20px)}
/* research inside the card (lesson.json worksheet task "search", src/tf/work.js searchPanel; Kiers 7 Oct 2026) */
.wk2-srch{margin:12px 0 14px;border:3px solid #244572;border-radius:16px;padding:12px 14px;background:color-mix(in srgb,#244572 5%,var(--bg,#fff))}
.wk2-srh{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:8px;color:#244572;font-size:1.1em}
html[data-theme="dark"] .wk2-srh{color:#c7d6ee}.wk2-srh i{font-size:.85em;color:var(--dim)}
.wk2-srt{margin-left:auto;font-weight:bold;background:var(--att,#FFD60A);color:var(--att-ink,#1b2a4a);border-radius:999px;padding:2px 12px}
.wk2-srl,.wk2-srs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.wk2-srl button,.wk2-srs button,.wk2-srb,.wk2-srm,.wk2-sru{font:inherit;min-height:44px;padding:6px 14px;border-radius:10px;border:2px solid var(--line,#cbd5e1);background:var(--bg,#fff);color:var(--fg);cursor:pointer}
.wk2-srl button[aria-pressed="true"]{background:#244572;border-color:#244572;color:#fff}.wk2-srl button[aria-pressed="true"] i{color:#dbe5f2}
.wk2-srs button{min-height:40px;border-style:dashed}
.wk2-srf{display:flex;gap:8px;margin:0 0 10px}
.wk2-srq{flex:1;min-width:0;font:inherit;font-size:1.1em;min-height:48px;padding:6px 12px;border-radius:10px;border:2px solid #244572;background:var(--bg,#fff);color:var(--fg)}
.wk2-srgo{font:inherit;font-weight:bold;min-height:48px;padding:6px 18px;border-radius:12px;border:4px solid var(--att-ink,#1b2a4a);background:var(--att,#FFD60A);color:var(--att-ink,#1b2a4a);cursor:pointer}
.wk2-srgo i{color:var(--att-ink,#1b2a4a)}
.wk2-srr{list-style:none;margin:0;padding:0;display:grid;gap:6px}.wk2-srr li{padding:8px 10px;border-radius:10px;background:var(--panel,#f4f6f9)}
.wk2-srr li span{display:block;font-size:.9em;color:var(--dim);margin-top:2px}
.wk2-srh2{font:inherit;font-weight:bold;font-size:1.05em;color:#244572;background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;min-height:36px}
html[data-theme="dark"] .wk2-srh2{color:#9ec1ff}
.wk2-sra{max-height:60vh;overflow:auto;padding:4px 6px 8px;line-height:1.5}.wk2-sra h4{font-size:1.3em;margin:8px 0}
.wk2-sra img{float:right;max-width:min(45%,300px);margin:0 0 8px 12px;border-radius:10px}
.wk2-srbtns{clear:both;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.wk2-srm{font-weight:bold;border-color:#244572}.wk2-sru{border-color:#617b30;color:#4d6226;font-weight:bold}
.wk2-srcr{font-size:.8em;color:var(--dim)}
.wk2-srx b,.wk2-srx i{display:block}.wk2-srx{border:3px solid #c56035;border-radius:12px;padding:10px 12px}
/* the model answer on each card, the teacher's button and the "why" (8 Oct 2026; src/tf/work.js) */
.wk2-mbtn{display:inline-block;margin:10px 0 0;padding:8px 16px;border-radius:999px;border:2px solid #244572;background:#fff;color:#244572;font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.wk2-why{margin-top:6px;padding-top:6px;border-top:1px dashed #b9c3d0;color:#244572}
/* "For the teacher" (8 Oct 2026; src/tf/forteacher.js): a box that opens with a tap; on the kids' app screens only for a
   signed-in teacher (html.tf-tch: the text was fetched), never on a pupil's tablet */
details.for-teacher>summary{cursor:pointer;font-weight:700;color:#244572;list-style:none;min-height:40px;display:flex;align-items:center;gap:8px}
details.for-teacher>summary::before{content:"▸";font-size:1.1em}details.for-teacher[open]>summary::before{content:"▾"}
details.for-teacher>summary::-webkit-details-marker{display:none}
html.tf-tch .kid-screen details.for-teacher:not([hidden]),html.as-pupil.tf-tch .kid-screen details.for-teacher:not([hidden]){display:block!important;max-width:60em;font-size:16px;background:#fffbea;border-color:#e2a145}
/* a lesson that has taken place, at home without a card (8 Oct 2026; src/tf/kidapp.js) */
.kid-guest{display:block;margin:14px auto 18px;padding:16px 28px;min-height:64px;border-radius:999px;border:4px solid #244572;background:#FFD60A;color:#244572;font:inherit;font-size:24px;font-weight:800;cursor:pointer}
/* click to play (8 Oct 2026; src/tf/ytplay.js): nothing from YouTube until the tap */
.ls-vidc .ls-vplay{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;
  border:0;border-radius:12px;background:#244572;color:#fff;font:inherit;cursor:pointer;text-align:center}
.ls-vidc .ls-vtri{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:#FFD60A;color:#244572;font-size:48px;padding-left:8px;box-sizing:border-box}
.ls-vidc .ls-vplay b{font-size:1.2em}.ls-vidc .ls-vplay small{opacity:.85;font-size:.8em;max-width:40em}
/* quiz options keep their light cards in every style, so their text is always dark (Kiers, 8 Oct 2026: "black style
   hides the text in the test answers"): dark mode used the light page text on these light cards */
.qz:not(.qz-p) .qz-o,.qz:not(.qz-p) .qz-o>b{color:#14181f}
.qz:not(.qz-p) .qz-o i{color:#a3154f}
.qz:not(.qz-p) .qz-o>span{color:#244572!important;background:#fff!important}
.qz:not(.qz-p) .qz-o.on>span{color:#fff!important;background:#244572!important}
.qz .qz-os .qz-o.qz-dk,.qz .qz-os .qz-o.qz-dk>b{color:#374151}
.qz .qz-os .qz-o.qz-dk.on,.qz .qz-os .qz-o.qz-dk.on>b{color:#991b1b}
/* the question's Italian line and "From last week" sit on the white question card too (9 Oct 2026 check: dark mode gave
   pink #ff2d95 on white, 3.5:1; the teal label was 2:1 in every style) */
.qz:not(.qz-p) .qz-q .qz-t i{color:#a3154f}
.qz:not(.qz-p) .qz-q .qz-rev{color:#0f766e}
html[data-theme="dark"] .qz:not(.qz-p) .qz-o.right{background:#d9f2e0}html[data-theme="dark"] .qz:not(.qz-p) .qz-o.wrong{background:#fbe0e0}