/* Lab 3 map workshop: real Construct screenshots, one scene at a time. Colours are explicit because the course panel sets its own. */
.c3w{--c3w-ground:#0b0d14;--c3w-panel:#11141d;--c3w-hair:rgba(255,255,255,.1);--c3w-hair2:rgba(255,255,255,.18);--c3w-ink:#f5f5ef;--c3w-soft:#b9c2cc;--c3w-yellow:#ffd23f;--c3w-accent:#c6f58d;margin:22px 0 30px;border:1px solid var(--c3w-hair2);border-radius:12px;background:var(--c3w-ground);color:var(--c3w-ink);overflow:hidden;text-align:left}
.studio .c3w :is(p,li,h4,b,i,strong,figcaption,summary){color:inherit}
.c3w a{color:var(--c3w-yellow)}
.c3w-head{padding:20px 24px 4px}
.studio .c3w .eyebrow{color:var(--c3w-yellow);margin:0 0 6px}
.c3w-intro{margin:0;font-size:16px;line-height:1.55;color:var(--c3w-soft)!important;max-width:70ch}

/* Scene tabs */
.c3w-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 24px 16px;border-bottom:1px solid var(--c3w-hair)}
.c3w-tabs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.c3w-tabs a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:5px 11px 5px 6px;border:1px solid var(--c3w-hair2);border-radius:6px;color:var(--c3w-soft);font:600 14px/1.2 'Segoe UI',Arial,sans-serif;text-decoration:none;background:transparent}
.c3w-tabs a span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:4px;background:rgba(255,255,255,.08);font:700 12px/1 Consolas,monospace;color:var(--c3w-ink)}
.c3w-tabs a.is-seen span{background:transparent;color:var(--c3w-accent)}
.c3w-tabs a.is-seen span::before{content:'✓'}
.c3w-tabs a.is-seen span{font-size:0}
.c3w-tabs a.is-seen span::before{font-size:13px}
.c3w-tabs a[aria-current=step]{background:var(--c3w-yellow);border-color:var(--c3w-yellow);color:#14120a}
.c3w-tabs a[aria-current=step] span{background:#14120a;color:var(--c3w-yellow)}
.c3w-tabs-label{margin:0!important;font:11px/1.4 Consolas,monospace;letter-spacing:.1em;color:var(--c3w-soft)!important;text-transform:uppercase}
.c3w-levels a{padding-left:11px;border-style:dashed}

/* A scene */
.c3w-stage{padding:22px 24px 8px}
.c3w-scene+.c3w-scene{margin-top:40px;padding-top:30px;border-top:1px solid var(--c3w-hair)}
.c3w-js .c3w-scene+.c3w-scene{margin-top:0;padding-top:0;border-top:0}
.c3w-scene[hidden]{display:none}
.c3w-count{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 4px!important;font:11px/1.4 Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--c3w-soft)!important}
.c3w-new{padding:3px 7px;border:1px solid var(--c3w-accent);border-radius:4px;color:var(--c3w-accent);letter-spacing:.06em}
.c3w-scene h4{margin:0 0 6px;font:600 clamp(24px,3vw,34px)/1.15 system-ui,'Segoe UI',Arial,sans-serif;letter-spacing:-.01em}
.c3w-story{margin:0 0 20px!important;font:italic 18px/1.5 system-ui,'Segoe UI',Arial,sans-serif;color:var(--c3w-soft)!important;max-width:62ch}
.c3w-grid{display:grid;grid-template-columns:minmax(260px,5fr) minmax(0,7fr);gap:26px;align-items:start}
.c3w-label{margin:0 0 8px!important;font:11px/1.4 Consolas,monospace;letter-spacing:.13em;color:var(--c3w-yellow)!important}
.c3w-do ol{margin:0 0 22px;padding:0;list-style:none;counter-reset:c3w}
.c3w-do li{position:relative;counter-increment:c3w;padding:0 0 12px 38px;font-size:17px;line-height:1.55}
.c3w-do li::before{content:counter(c3w);position:absolute;left:0;top:1px;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--c3w-hair2);border-radius:5px;font:700 13px/1 Consolas,monospace;color:var(--c3w-ink)}
.c3w-do b{color:var(--c3w-ink)}
.c3w-ref{font-size:14px;color:var(--c3w-yellow)}
.c3w-see{margin:0 0 16px!important;padding:12px 14px;border-left:3px solid var(--c3w-accent);background:rgba(198,245,141,.06);font-size:16px;line-height:1.55;max-width:none!important}
.c3w-tip{margin:0 0 14px!important;font-size:15px;line-height:1.55;color:var(--c3w-soft)!important}
.c3w-tip b{color:var(--c3w-ink)}

/* Screenshots */
.c3w-shots{display:flex;flex-direction:column;gap:16px;min-width:0}
.c3w-shot{margin:0}
.c3w-shot a{display:block;border:1px solid var(--c3w-hair2);border-radius:8px;overflow:hidden;background:#000;line-height:0}
.c3w-shot img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;object-position:left top}
.c3w-shot a:hover{border-color:var(--c3w-yellow)}
.c3w-shot figcaption{margin-top:6px;font-size:13px;line-height:1.5;color:var(--c3w-soft)}
.c3w-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.c3w-do .c3w-pair .c3w-shot img{max-height:none}

.c3w-help{margin:6px 0 14px!important;border:1px solid var(--c3w-hair2)!important;border-radius:8px!important;background:transparent!important}
.c3w-help summary{padding:10px 14px!important;min-height:0!important;font-size:15px!important;cursor:pointer}
.c3w-help ul{margin:10px 14px 12px;padding-left:18px}
.c3w-help li{font-size:15px;line-height:1.5;padding-bottom:6px}

.c3w-levelup{margin-top:34px;padding-top:24px;border-top:1px dashed var(--c3w-hair2)}
.c3w-js .c3w-levelup{margin-top:0;padding-top:0;border-top:0}
.c3w-levelup .eyebrow[hidden]{display:none}

/* Back / Next */
.c3w-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px 18px;border-top:1px solid var(--c3w-hair)}
.c3w-controls[hidden]{display:none}
.c3w-controls button{min-height:44px;padding:10px 16px;border-radius:8px;font:650 15px/1 'Segoe UI',Arial,sans-serif;cursor:pointer}
.c3w-controls [data-c3w-prev]{background:transparent;color:var(--c3w-ink);border:1px solid var(--c3w-hair2)}
.c3w-controls [data-c3w-prev]:disabled{opacity:.35;cursor:default}
.studio .c3w-controls [data-c3w-next]{background:var(--c3w-yellow);border:1px solid var(--c3w-yellow);color:#14120a}
.c3w-progress{margin:0!important;font:12px/1.4 Consolas,monospace;letter-spacing:.08em;color:var(--c3w-soft)!important}

@media (max-width:860px){
  .c3w-grid{grid-template-columns:1fr}
  .c3w-head,.c3w-tabs,.c3w-stage,.c3w-controls{padding-left:16px;padding-right:16px}
  .c3w-shot img{max-height:none}
}
@media (max-width:520px){
  .c3w-pair{grid-template-columns:1fr}
  .c3w-tabs a{padding-right:9px;font-size:13px}
  .c3w-progress{text-align:center}
}
@media (prefers-reduced-motion:reduce){.c3w *{transition:none!important;animation:none!important}}
.access-contrast .c3w{border-color:#fff}
.access-contrast .c3w-shot a{border-color:#fff}
@media print{.c3w-controls,.c3w-tabs{display:none!important}.c3w-scene[hidden]{display:block!important}}

/* The page styles lists, links and nav items itself; these win back the walkthrough's own layout. */
.studio .c3w .c3w-do ol{list-style:none!important;padding:0!important;margin:0 0 22px!important}
.studio .c3w .c3w-do li{list-style:none!important;padding:0 0 12px 40px!important;margin:0!important;max-width:none}
.studio .c3w .c3w-do li::marker{content:''}
.studio .c3w .c3w-tabs a{color:var(--c3w-ink)!important;opacity:1}
.studio .c3w .c3w-tabs a.is-seen{color:var(--c3w-soft)!important}
.studio .c3w .c3w-tabs a[aria-current=step]{color:#14120a!important}
.studio .c3w .c3w-tabs li{padding:0!important;margin:0!important;list-style:none!important}
.c3w-tabs{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 14px}
.c3w-tabs>ol:first-child{grid-column:1/-1}
@media (max-width:520px){.c3w-tabs{grid-template-columns:1fr}}
.c3w-shot a{display:inline-block;max-width:100%;vertical-align:top}
.c3w-shot img{width:auto;max-width:100%}

/* Part labels in the tab bar: one per row, the scene tabs underneath. */
.c3w-tabs{grid-template-columns:1fr}
.c3w-tabs>ol:first-child{grid-column:auto}
.c3w-tabs .c3w-tabs-label{margin-top:4px!important}
.c3w-scene--task h4{color:var(--c3w-yellow)}

/* Obligatory Task reminder: deliberately loud. */
.obligatory-banner{margin:18px 0 22px;padding:20px 22px;border:3px solid #ffd23f;border-radius:12px;background:#1c1a0f;color:#f5f5ef;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center}
.studio .obligatory-banner :is(p,h3,li,b){color:inherit}
.obligatory-kicker{grid-column:1/-1;margin:0!important;font:700 12px/1.4 Consolas,monospace;letter-spacing:.16em;color:#ffd23f!important}
.obligatory-banner h3{grid-column:1;margin:0;font:700 clamp(22px,2.8vw,32px)/1.2 system-ui,'Segoe UI',Arial,sans-serif}
.obligatory-banner h3 span{color:#ffd23f}
.obligatory-banner>p:not(.obligatory-kicker){grid-column:1;margin:0!important;font-size:17px;line-height:1.5}
.obligatory-keys{grid-column:1;display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 0!important;padding:0!important;list-style:none}
.studio .obligatory-keys li{list-style:none;font-size:15px!important;padding:0!important;color:#d9d2b0}
.obligatory-go{grid-column:2;grid-row:2/5;align-self:center;display:inline-flex;align-items:center;min-height:52px;padding:12px 20px;border-radius:8px;background:#ffd23f;color:#14120a!important;font:700 17px/1.2 'Segoe UI',Arial,sans-serif;text-decoration:none;white-space:nowrap}
.obligatory-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
.obligatory-check{display:block;margin-top:8px;padding:10px 12px;border:2px solid #ffd23f;border-radius:8px;font-weight:650}
@media (max-width:760px){.obligatory-banner{grid-template-columns:1fr}.obligatory-go{grid-column:1;grid-row:auto;justify-content:center;white-space:normal}}
@media print{.obligatory-banner{border-color:#000;background:#fff;color:#000}}
.studio .c3w .c3w-do a,.studio .c3w .c3w-see a{color:var(--c3w-yellow)!important;text-decoration:underline}

/* Door from Part 1 (lab page) to Part 2 (its own page). */
.c3w-nextpage{display:grid;gap:6px;margin:0 0 30px;padding:22px 24px;border:2px solid #ffd23f;border-radius:12px;background:#0b0d14;color:#f5f5ef!important;text-decoration:none!important}
.c3w-nextpage:hover{background:#14130c}
.c3w-nextpage-kicker{font:700 12px/1.4 Consolas,monospace;letter-spacing:.14em;color:#ffd23f}
.c3w-nextpage strong{font:700 clamp(22px,2.8vw,30px)/1.2 system-ui,'Segoe UI',Arial,sans-serif;color:#f5f5ef}
.c3w-nextpage span:last-child{font-size:17px;line-height:1.5;color:#b9c2cc}
.c3w-back{margin:10px 0 60px}
.c3w-back a{font-weight:650}
.studio a.c3w-nextpage strong{color:#f5f5ef!important}.studio a.c3w-nextpage span:last-child{color:#b9c2cc!important}.studio a.c3w-nextpage .c3w-nextpage-kicker{color:#ffd23f!important}

/* Own-project nudge, timing line and the human help line. */
.studio .c3w .c3w-own{margin:14px 0 6px!important;padding:12px 14px;border:1px solid var(--c3w-accent);border-radius:8px;font-size:16px;line-height:1.55;color:var(--c3w-ink)!important;max-width:none!important}
.studio .c3w .c3w-own b{color:var(--c3w-accent)}
.c3w-help-ask{margin:0 14px 12px!important;font-size:14px!important;line-height:1.5;color:var(--c3w-soft)!important}
.studio .c3w-when{display:inline-block;margin-top:6px;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:6px;font:13px/1.5 Consolas,monospace}

/* Help boxes sit inside the numbered step column: no numbering, readable colours. */
.studio .c3w .c3w-do .c3w-help ul{counter-reset:none;padding-left:18px!important;margin:12px 14px 10px!important;list-style:disc!important}
.studio .c3w .c3w-do .c3w-help li{counter-increment:none;padding:0 0 8px 0!important;list-style:disc!important;font-size:15px;line-height:1.5;color:var(--c3w-ink)!important}
.studio .c3w .c3w-do .c3w-help li::before{content:none!important}
.studio .c3w .c3w-do .c3w-help li b{color:var(--c3w-yellow)}
.studio .c3w .c3w-help summary{color:var(--c3w-yellow)!important;font-weight:650}
.studio .c3w .c3w-help a{color:var(--c3w-yellow)!important}

/* Mobile and spacing audit fixes (16 Oct). */
.studio .c3w .c3w-shot{margin:0!important}
.studio .c3w .c3w-tabs a{min-height:44px}
@media (max-width:560px){
  .c3w-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .c3w-controls .c3w-progress{grid-column:1/-1;grid-row:1;text-align:center;font-size:11px!important}
  .c3w-controls button{width:100%;padding:10px 8px;font-size:14px;white-space:normal;line-height:1.2}
  .c3w-scene h4{font-size:24px}
  .c3w-story{font-size:16px!important}
  .c3w-do li{font-size:16px}
  .c3w-tabs ol{gap:5px}
}

/* ---------- Checkpoints, progress and the Construct licence ---------- */
.c3w-meter{display:flex;align-items:center;gap:12px;margin:14px 0 4px}
.c3w-meter-bar{flex:1;max-width:360px;height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.c3w-meter-bar span{display:block;height:100%;width:0;background:var(--c3w-accent);transition:width .4s ease}
.studio .c3w .c3w-meter-text{margin:0!important;font:12px/1.4 Consolas,monospace;letter-spacing:.06em;color:var(--c3w-soft)!important}
.c3w-done-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:18px 0 4px;padding-top:16px;border-top:1px solid var(--c3w-hair)}
.studio .c3w .c3w-done{min-height:48px;padding:10px 18px;border-radius:8px;border:2px solid var(--c3w-accent);background:transparent;color:var(--c3w-accent);font:700 16px/1.2 'Segoe UI',Arial,sans-serif;cursor:pointer;box-shadow:none}
.studio .c3w .c3w-done[aria-pressed=true]{background:var(--c3w-accent);color:#14200c}
.c3w-done-row span{font-size:14px;color:var(--c3w-soft)}
.studio .c3w .c3w-tabs a.is-done{border-color:var(--c3w-accent);color:var(--c3w-accent)!important}
.studio .c3w .c3w-tabs a.is-done span{font-size:0;background:var(--c3w-accent);color:#14200c}
.studio .c3w .c3w-tabs a.is-done span::before{content:'✓';font-size:13px}
.studio .c3w .c3w-tabs a.is-done[aria-current=step]{color:#14120a!important}
.c3w-licence{margin:0 24px 24px;padding:22px 24px;border:2px solid var(--c3w-accent);border-radius:12px;background:#10160c}
.c3w-licence[hidden]{display:none}
.studio .c3w .c3w-licence-kicker{margin:0 0 6px!important;font:700 12px/1.4 Consolas,monospace;letter-spacing:.16em;color:var(--c3w-accent)!important}
.c3w-licence h4{margin:0 0 8px;font:700 clamp(22px,2.6vw,30px)/1.2 system-ui,'Segoe UI',Arial,sans-serif}
.c3w-licence p{margin:0 0 8px!important;font-size:16px}
.studio .c3w .c3w-licence ul{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px!important;padding:0!important;list-style:none}
.studio .c3w .c3w-licence li{padding:5px 10px!important;border:1px solid var(--c3w-hair2);border-radius:5px;font-size:14px!important;list-style:none}
.studio .c3w .c3w-licence .primary{background:var(--c3w-yellow);border-color:var(--c3w-yellow);color:#14120a!important;text-decoration:none!important}

/* ---------- Find it! game ---------- */
.c3w-game{margin:-4px 0 0;padding:14px 16px;border:1px dashed var(--c3w-hair2);border-radius:8px}
.studio .c3w .c3w-game-kicker{margin:0 0 4px!important;font:700 11px/1.4 Consolas,monospace;letter-spacing:.14em;color:var(--c3w-yellow)!important}
.studio .c3w .c3w-game-q{margin:0 0 10px!important;font-size:16px;line-height:1.5}
.studio .c3w .c3w-game-q b{color:var(--c3w-yellow)}
.studio .c3w .c3w-game-go{min-height:44px;padding:8px 16px;border-radius:8px;border:1px solid var(--c3w-yellow);background:var(--c3w-yellow);color:#14120a;font-weight:700;cursor:pointer;box-shadow:none}
.c3w-game-go[hidden]{display:none}
.c3w-shot a{position:relative}
.c3w-shot.is-playing a{cursor:crosshair;outline:3px solid var(--c3w-yellow);outline-offset:2px}
.c3w-hit{position:absolute;pointer-events:none;border:3px solid var(--c3w-accent);background:rgba(198,245,141,.18)}
.c3w-hit.is-miss{border-color:#f29bcd;background:rgba(242,155,205,.15)}

/* ---------- Screenshot viewer ---------- */
.c3w-lb{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:rgba(5,6,10,.97);color:#f5f5ef;padding:max(10px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.c3w-lb[hidden]{display:none}
html.c3w-lb-open{overflow:hidden}
.c3w-lb-bar{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.c3w-lb-count{flex:1;margin:0;font:12px/1.4 Consolas,monospace;letter-spacing:.08em;color:#b9c2cc}
.c3w-lb-full{color:#ffd23f;font-size:14px}
.c3w-lb-close{width:48px;height:48px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#f5f5ef;font-size:26px;line-height:1;cursor:pointer}
.c3w-lb-stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;touch-action:pinch-zoom pan-x pan-y}
.c3w-lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.c3w-lb-cap{margin:8px auto 6px;max-width:80ch;font-size:15px;line-height:1.5;text-align:center;color:#d8dde3}
.c3w-lb-nav{display:flex;justify-content:center;gap:10px}
.c3w-lb-nav button{min-height:48px;min-width:120px;padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#f5f5ef;font:650 15px/1 'Segoe UI',Arial,sans-serif;cursor:pointer}
.c3w-lb-nav button[hidden]{display:none}
@media (max-width:560px){.c3w-licence{margin:0 16px 16px;padding:18px 16px}.c3w-lb-nav button{flex:1;min-width:0}}
@media (prefers-reduced-motion:reduce){.c3w-meter-bar span{transition:none}}

/* Mobile: no stacked panel padding around the walkthrough, so screenshots get the width. */
@media (max-width:560px){
  .studio #mapping-first-contact.course-panel{padding:14px 0 0!important;border-left-width:0!important;border-right-width:0!important;border-radius:0!important;background:transparent!important}
  .studio #mapping-first-contact > :not(.c3w):not(.c3w-nextpage){margin-left:4px;margin-right:4px}
  .c3w{border-radius:10px}
  .c3w-head,.c3w-tabs,.c3w-stage,.c3w-controls{padding-left:12px!important;padding-right:12px!important}
  .c3w-licence{margin-left:12px;margin-right:12px}
}
.studio .c3w .c3w-game-kicker,.studio .c3w .c3w-progress{font-size:12px!important}

/* Viewer: solid backdrop above everything, zoom for small screens, calm buttons. */
.c3w-lb{z-index:1000;background:#05060a!important}
.c3w-lb-stage img{cursor:zoom-in}
.c3w-lb.is-zoom .c3w-lb-stage{display:block}
.c3w-lb.is-zoom .c3w-lb-stage img{max-width:none;max-height:none;width:240%;cursor:zoom-out}
@media (min-width:900px){.c3w-lb.is-zoom .c3w-lb-stage img{width:160%}}
.c3w-lb-hint{margin:0 0 8px;text-align:center;font-size:13px;color:#b9c2cc}
.studio .c3w-lb button{box-shadow:none!important;transform:none!important;text-shadow:none}
.studio .c3w-lb .c3w-lb-close{background:transparent!important;color:#f5f5ef!important;border:1px solid rgba(255,255,255,.3)!important}
.studio .c3w-lb .c3w-lb-nav button{background:transparent!important;color:#f5f5ef!important;border:1px solid rgba(255,255,255,.3)!important}
/* Done row now closes each scene, after the screenshots. */
.c3w-scene > .c3w-done-row{margin-top:22px}
.studio .c3w .c3w-licence li{margin:0!important;line-height:1.4!important}

/* ---------- One connected journey: SO FAR → NOW → DO THIS → YOU SHOULD SEE → NEXT UP ---------- */
.studio .c3w .c3w-from{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 10px!important;padding:10px 12px;border:1px solid var(--c3w-hair2);border-radius:8px;font-size:16px;line-height:1.5;color:var(--c3w-soft)!important;max-width:none!important}
.c3w-from span,.c3w-now,.c3w-nextup-label{font:700 12px/1.4 Consolas,monospace;letter-spacing:.14em}
.c3w-from span{color:var(--c3w-soft)}
.studio .c3w .c3w-now{display:inline-block;margin-right:10px;font-style:normal;color:var(--c3w-yellow)}
.c3w-nextup{margin-top:24px;padding:16px 18px;border:2px solid var(--c3w-yellow);border-radius:10px;background:#14130c}
.studio .c3w .c3w-nextup-label{margin:0 0 4px!important;color:var(--c3w-yellow)!important}
.studio .c3w .c3w-nextup-text{margin:0!important;font-size:17px;line-height:1.5;color:var(--c3w-ink)!important;max-width:none!important}
.studio .c3w .c3w-nextup-text b{color:var(--c3w-ink)}
.c3w-nextup .c3w-done-row{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,210,63,.25)}
.studio .c3w .c3w-nextup .c3w-done{border-color:var(--c3w-yellow);background:var(--c3w-yellow);color:#14120a}
.studio .c3w .c3w-nextup .c3w-done[aria-pressed=true]{background:transparent;color:var(--c3w-yellow)}
/* Tabs read as a path: one step leads to the next. */
.c3w-tabs ol{align-items:center}
.studio .c3w .c3w-tabs ol:not(.c3w-levels) li{display:flex;align-items:center;gap:6px}
.studio .c3w .c3w-tabs ol:not(.c3w-levels) li + li::before{content:'›';color:var(--c3w-soft);font-size:18px;line-height:1}

/* Mobile reading order: steps, then the pictures of those steps, then the check and help. */
@media (max-width:860px){
  .c3w-grid{display:flex;flex-direction:column;gap:0}
  .c3w-grid > .c3w-do{display:contents}
  .c3w-grid > .c3w-do > *{order:4}
  .c3w-grid > .c3w-do > .c3w-label:first-child{order:1}
  .c3w-grid > .c3w-do > ol{order:2}
  .c3w-grid > .c3w-shots{order:3;margin:0 0 22px}
}
@media (max-width:860px){.c3w-grid > .c3w-do > *{align-self:stretch;max-width:none}}

/* Paired layout: each picture sits under the step it shows. */
.c3w-grid.is-paired{display:block;max-width:860px}
.c3w-do li .c3w-step-shot{margin:12px 0 6px!important}
.c3w-do li > .c3w-pair{margin:12px 0 6px}
.c3w-do li .c3w-shot img{max-height:560px}
.studio .c3w .c3w-do li figcaption{font-size:14px;color:var(--c3w-soft)}
.c3w-do li .c3w-game{margin:10px 0 6px}

/* Live Sine preview built from the real Preview frame: the Star moves by Magnitude 50 (63 px of 1084). */
.c3w-anim{margin:4px 0 16px!important}
.c3w-anim-stage{position:relative;overflow:hidden;border:1px solid var(--c3w-hair2);border-radius:8px;line-height:0;background:#5e5e5e}
.c3w-anim-stage img{display:block;width:100%;height:auto}
.c3w-anim-patch{position:absolute;left:38.9%;top:26.5%;width:26.3%;height:46.7%;background:#5e5e5e}
.c3w-anim-star{position:absolute;left:37.08%;top:26.89%;width:25.83%;height:45.9%;border-radius:50%;
  background:url(construct-lab3/b14-preview-a.webp) 52.74% 49.7%/387.1% auto no-repeat;animation:c3w-sine 4s ease-in-out infinite}
@keyframes c3w-sine{0%,100%{transform:translateX(-22.5%)}50%{transform:translateX(22.5%)}}
.c3w-anim-badge{position:absolute;right:8px;top:8px;padding:3px 7px;border-radius:4px;background:rgba(0,0,0,.6);color:#c6f58d;font:700 12px/1.4 Consolas,monospace;letter-spacing:.1em}
.studio .c3w .c3w-anim figcaption{margin-top:8px;font-size:14px;line-height:1.5;color:var(--c3w-soft)}
@media (prefers-reduced-motion:reduce){.c3w-anim-star{animation-duration:12s}}
.access-no-motion .c3w-anim-star{animation:none}

/* Route cards: where you came from, and where you can jump ahead. */
.route-card{margin:18px 0;padding:18px 20px;border:2px solid #c6f58d;border-radius:12px;background:#0b0d14;color:#f5f5ef}
.route-card.route-ahead{border-style:dashed}
.studio .route-card :is(p,h4){color:inherit}
.studio .route-card .route-kicker{margin:0 0 4px!important;font:700 12px/1.4 Consolas,monospace;letter-spacing:.14em;color:#c6f58d!important}
.route-card h4{margin:0 0 6px;font:700 22px/1.25 system-ui,'Segoe UI',Arial,sans-serif}
.studio .route-card p:not(.route-kicker){margin:0 0 10px!important;font-size:16px;line-height:1.5;color:#b9c2cc!important;max-width:none}
.route-links{display:flex;flex-wrap:wrap;gap:8px}
.studio .route-card .route-links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#f5f5ef!important;text-decoration:none;font-weight:600;font-size:15px}
.studio .route-card .route-links a:hover{border-color:#ffd23f;color:#ffd23f!important}
@media (max-width:560px){.route-card{padding:16px 14px}.route-links a{flex:1 1 100%}}

/* ---------- Bridges between the labs: one project, five Fridays ---------- */
.bridge{margin:18px 0 22px;padding:20px 22px;border:2px solid #9cc7ff;border-radius:12px;background:#0b0d14;color:#f5f5ef;text-align:left}
.bridge.br-next{border-color:#ffd23f}
.studio .bridge :is(p,h4,li,b,small,figcaption,th,td){color:inherit}
.studio .bridge .br-kicker{margin:0 0 4px!important;font:700 12px/1.4 Consolas,monospace;letter-spacing:.14em;color:#9cc7ff!important}
.studio .bridge.br-next .br-kicker{color:#ffd23f!important}
.bridge h4{margin:0 0 8px;font:700 clamp(21px,2.5vw,27px)/1.25 system-ui,'Segoe UI',Arial,sans-serif}
.studio .bridge > p:not(.br-kicker){margin:0 0 14px!important;font-size:17px;line-height:1.55;color:#d6dbe1!important;max-width:68ch}
.studio .bridge b{color:#fff}
.studio .br-path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:6px 0 4px!important;padding:0!important;list-style:none;counter-reset:none}
.studio .br-path li{margin:0!important;padding:0!important;list-style:none}
.studio .br-path li::before{content:none!important}
.studio .br-path a{display:flex;flex-direction:column;gap:2px;height:100%;min-height:44px;padding:8px 10px;border:1px solid rgba(255,255,255,.18);border-radius:8px;color:#b9c2cc!important;text-decoration:none;font-size:13px;line-height:1.3}
.br-path a span{font:700 12px/1 Consolas,monospace;color:#b9c2cc}
.br-path a b{font-size:14px;color:#f5f5ef}
.br-path a small{font-size:12px;color:#8f9aa6}
.studio .br-path .is-done a{border-color:#c6f58d}
.studio .br-path .is-done span::after{content:' ✓';color:#c6f58d}
.studio .br-path .is-now a{background:#ffd23f;border-color:#ffd23f}
.studio .br-path .is-now a :is(span,b,small){color:#14120a!important}
.br-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.studio .bridge .br-links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid rgba(255,255,255,.22);border-radius:8px;color:#f5f5ef!important;text-decoration:none;font-weight:600;font-size:15px}
.studio .bridge .br-links a:hover{border-color:#ffd23f;color:#ffd23f!important}
.br-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center;margin:0 0 14px}
.studio .br-code{margin:0!important;padding:14px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:8px!important;background:#1e1e1e!important;color:#d4d4d4!important;font:14px/1.6 Consolas,monospace!important;white-space:pre-wrap;overflow-wrap:anywhere;max-width:none!important}
.br-code .br-c{color:#6a9955}
.br-shot{margin:0}
.br-shot img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.18);border-radius:8px}
.studio .br-shot figcaption{margin-top:6px;font-size:14px;color:#b9c2cc!important}
.br-table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:15px;line-height:1.45}
.br-table th,.br-table td{padding:9px 10px;border:1px solid rgba(255,255,255,.15);text-align:left;vertical-align:top}
.br-table thead th{background:#161a24;font:700 12px/1.4 Consolas,monospace;letter-spacing:.06em;color:#9cc7ff}
.br-table tbody th{font-weight:700;color:#fff;white-space:nowrap}
.br-table code,.br-mini code{font:13px/1.4 Consolas,monospace;padding:1px 5px;border-radius:4px;background:#1e1e1e;color:#ce9178;overflow-wrap:anywhere}
.br-mini{margin:4px 0 16px;padding:12px 14px;border-left:4px solid #9cc7ff;border-radius:0 8px 8px 0;background:#10151f}
.studio .c3w .br-mini .br-kicker{margin:0 0 4px!important;font:700 12px/1.4 Consolas,monospace;letter-spacing:.14em;color:#9cc7ff!important}
.studio .c3w .br-mini p:last-child{margin:0!important;font-size:15px;line-height:1.5;max-width:none}
.studio .br-new{margin:10px 0 14px!important;padding:10px 12px;border-left:4px solid #ffd23f;font-size:16px;line-height:1.5;max-width:44ch}
@media (max-width:760px){
  .bridge{padding:16px 14px}
  .studio .br-path{grid-template-columns:1fr}
  .studio .br-path a{flex-direction:row;align-items:center;gap:10px}
  .br-pair{grid-template-columns:1fr}
  .br-table thead{display:none}
  .br-table,.br-table tbody,.br-table tr,.br-table th,.br-table td{display:block;width:100%}
  .br-table tr{margin-bottom:10px;border:1px solid rgba(255,255,255,.15);border-radius:8px;overflow:hidden}
  .br-table th,.br-table td{border:0;border-top:1px solid rgba(255,255,255,.08)}
  .br-table tbody th{white-space:normal;background:#161a24}
  .br-table td:empty{display:none}
  .br-table td:nth-of-type(1)::before{content:'Lab 1: ';color:#9cc7ff;font-weight:700}
  .br-table td:nth-of-type(2)::before{content:'Lab 2: ';color:#9cc7ff;font-weight:700}
  .br-table td:nth-of-type(3)::before{content:'Construct: ';color:#9cc7ff;font-weight:700}
}
.route-card .br-path{margin:4px 0 12px!important}

/* ---------- Lab 4, Part 3: ready to hand in ---------- */
.l4-ready{margin:22px 0 30px;padding:22px 24px;border:2px solid #ffd23f;border-radius:12px;background:#0b0d14;color:#f5f5ef;text-align:left}
.studio .l4-ready :is(p,h4,li,b,span,label,small){color:inherit}
.studio .l4-ready .l4-ready-kicker{margin:0 0 6px!important;font:700 12px/1.4 Consolas,monospace;letter-spacing:.14em;color:#ffd23f!important}
.l4-ready h4{margin:0 0 16px;font:700 clamp(24px,3vw,32px)/1.15 system-ui,'Segoe UI',Arial,sans-serif}
.studio .l4-checks{list-style:none!important;margin:0 0 14px!important;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.studio .l4-checks li{margin:0!important;padding:0!important;list-style:none!important}
.studio .l4-checks li::before{content:none!important}
.l4-checks label{position:relative;display:grid;align-content:start;gap:8px;height:100%;box-sizing:border-box;padding:14px 12px;border:1px solid rgba(255,255,255,.18);border-radius:10px;cursor:pointer;transition:border-color .2s,background .2s}
.l4-checks label:hover{border-color:#ffd23f}
.l4-checks input{position:absolute;top:12px;right:12px;width:22px;height:22px;margin:0;accent-color:#c6f58d}
.l4-seal{display:grid;place-items:center;width:44px;height:44px;box-sizing:border-box;border:2px dashed rgba(255,255,255,.35);border-radius:50%;font:700 14px/1 Consolas,monospace;color:#b9c2cc}
.l4-txt{font-size:14px;line-height:1.45;color:#b9c2cc}
.studio .l4-checks .l4-txt b{display:block;font-size:17px;color:#fff;margin-bottom:2px}
.studio .l4-checks .l4-txt a{color:#ffd23f!important}
.l4-checks li.is-done label{border-color:#c6f58d;background:#10160c}
.l4-checks li.is-done .l4-seal{border:2px solid #c6f58d;background:#c6f58d;color:#10160c;animation:l4-pop .4s ease-out}
@keyframes l4-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.l4-meter{height:6px;max-width:360px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.l4-meter span{display:block;height:100%;width:0;background:#c6f58d;transition:width .3s}
.studio .l4-status{margin:6px 0 12px!important;font:12px/1.4 Consolas,monospace!important;letter-spacing:.06em;color:#b9c2cc!important}
.l4-done{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 12px;padding:14px 16px;border:2px solid #c6f58d;border-radius:10px}
.l4-done[hidden]{display:none}
.studio .l4-done p{margin:0!important;font-size:17px}
.studio .l4-done .primary{background:#ffd23f;border-color:#ffd23f;color:#14120a!important;text-decoration:none!important}
.studio .l4-ready .l4-official{margin:0!important;font-size:14px;line-height:1.5;color:#b9c2cc!important;max-width:none!important}
@media (max-width:560px){.l4-ready{padding:18px 14px}.studio .l4-checks{grid-template-columns:1fr 1fr}}

/* Lab 4: shorter scenes */
.studio .c3w .l4-mission{margin:0 0 18px!important;font-size:18px;line-height:1.45;color:var(--c3w-soft)!important;max-width:60ch}
.studio .c3w .l4-see span{margin-right:4px;font:700 12px/1.4 Consolas,monospace;letter-spacing:.12em;color:var(--c3w-accent)}
.studio .c3w .c3w-why p{margin:0 14px 12px!important;font-size:15px;line-height:1.5}

/* Lab 4: the live map */
.l4-hud{position:relative;margin:12px 0 14px;padding:14px 16px;border:1px solid var(--c3w-hair2);border-radius:10px;background:#0f1320}
.hud-top{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.studio .c3w .hud-top p{margin:0!important;font:12px/1.4 Consolas,monospace;letter-spacing:.1em;color:var(--c3w-soft)!important}
.studio .c3w .hud-top b{font:700 16px/1.2 system-ui,'Segoe UI',Arial,sans-serif;letter-spacing:0;color:var(--c3w-yellow)}
.hud-pop{position:absolute;right:0;top:-6px;font:700 14px/1 Consolas,monospace;color:var(--c3w-accent);animation:hud-pop 1.4s ease-out forwards;pointer-events:none}
@keyframes hud-pop{0%{opacity:0;transform:translateY(8px)}20%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
.hud-xpbar{height:6px;margin:8px 0 14px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.hud-xpbar span{display:block;height:100%;width:0;background:var(--c3w-yellow);transition:width .4s}
.hud-world{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:stretch}
.studio .c3w .hud-room{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:120px;margin:0;padding:12px;border:2px solid var(--c3w-hair2);border-radius:8px;background:#151a28;color:var(--c3w-ink);font:inherit;text-align:left;box-shadow:none}
button.hud-room{cursor:default}
.l4-hud.is-playable button.hud-room.is-here{cursor:pointer}
.l4-hud.is-playable button.hud-room.is-here:hover{background:#1b2133}
.studio .c3w .hud-room.is-here{border-color:var(--c3w-yellow)}
.hud-room[data-hud-room="2"]:not(.is-on){border-style:dashed;opacity:.45}
.hud-label{font:700 11px/1.3 Consolas,monospace;letter-spacing:.14em;color:var(--c3w-soft)}
.hud-place{font:700 16px/1.2 system-ui,'Segoe UI',Arial,sans-serif;color:var(--c3w-ink)}
.hud-item{max-width:100%;padding:3px 8px;box-sizing:border-box;border:1px dashed rgba(255,255,255,.25);border-radius:4px;font:13px/1.35 Consolas,monospace;color:rgba(255,255,255,.35);overflow-wrap:anywhere}
.hud-item.is-on{border:1px solid var(--c3w-accent);color:var(--c3w-accent);animation:l4-pop .4s ease-out}
.hud-counter.is-on{border-color:var(--c3w-yellow);color:var(--c3w-yellow)}
.hud-item.hud-thought{border:1px solid #9cc7ff;color:#9cc7ff}
.hud-thought[hidden]{display:none}
.hud-doors{display:flex;flex-direction:column;justify-content:center;gap:8px}
.studio .c3w .hud-door{display:grid;place-items:center;width:44px;height:44px;min-height:0;margin:0;padding:0;border:1px dashed rgba(255,255,255,.25);border-radius:8px;background:transparent;color:rgba(255,255,255,.35);font:700 20px/1 system-ui,sans-serif;cursor:pointer;box-shadow:none}
.studio .c3w .hud-door.is-on{border:2px solid var(--c3w-yellow);color:var(--c3w-yellow)}
.studio .c3w .hud-door:disabled{cursor:default}
.studio .c3w .hud-door.is-on:disabled{opacity:.35}
.studio .c3w .hud-msg{margin:10px 0 0!important;font-size:15px;line-height:1.45;color:var(--c3w-ink)!important;min-height:1.45em;max-width:none!important}
@media (max-width:560px){.studio .c3w .hud-room{min-height:100px;padding:10px}.hud-place{font-size:14px}.hud-item{font-size:12px}}
@media (prefers-reduced-motion:reduce){.l4-meter span,.hud-xpbar span,.l4-checks label{transition:none}.hud-item.is-on,.l4-checks li.is-done .l4-seal,.hud-pop{animation:none}}

/* Lab 4: side quests */
.side-quests{margin:30px 0;padding:20px 22px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:#0b0d14;color:#f5f5ef;text-align:left}
.studio .side-quests .sq-kicker{margin:0 0 4px!important;font:700 12px/1.4 Consolas,monospace;letter-spacing:.14em;color:#c6f58d!important}
.studio .side-quests h3{margin:0 0 14px!important;font:700 clamp(22px,2.6vw,28px)/1.2 system-ui,'Segoe UI',Arial,sans-serif;color:#f5f5ef!important}
.sq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.sq[open]{grid-column:1/-1}
.studio .side-quests .sq{margin:0!important;padding:0!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:10px!important;background:#11141d!important}
.studio .side-quests .sq>summary{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;min-height:0;padding:14px 16px!important;list-style:none;cursor:pointer;color:#f5f5ef!important;background:transparent!important}
.sq>summary::-webkit-details-marker{display:none}
.studio .side-quests .sq>summary::before,.studio .side-quests .sq>summary::after{content:none!important;display:none!important}
.sq-time{grid-column:1/-1;font:11px/1.3 Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:#b9c2cc}
.studio .side-quests .sq>summary b{font-size:19px;color:#f5f5ef}
.sq-desc{grid-column:1;font-size:14px;line-height:1.45;color:#b9c2cc}
.sq-go{grid-column:2;grid-row:2/4;padding:8px 14px;border:2px solid #ffd23f;border-radius:6px;font:700 14px/1 system-ui,sans-serif;color:#ffd23f}
.sq[open]>summary .sq-go{background:#ffd23f;color:#14120a}
.sq[open]>summary .sq-go::after{content:' ✕'}
.studio .side-quests .sq:hover{border-color:#ffd23f!important}
.sq-body{padding:0 12px 12px}
@media (max-width:560px){.side-quests{padding:16px 12px}.sq-body{padding:0 4px 8px}}

/* Lab 4: power-up tip cards */
.l4-power{margin:22px 0;padding:20px 22px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:#0b0d14;color:#f5f5ef;text-align:left}
.studio .l4-power :is(p,h4,li,b,i){color:inherit}
.studio .l4-power .pw-kicker{margin:0 0 4px!important;font:700 12px/1.4 Consolas,monospace;letter-spacing:.14em;color:#9cc7ff!important}
.l4-power h4{margin:0 0 14px;font:700 clamp(22px,2.6vw,28px)/1.2 system-ui,'Segoe UI',Arial,sans-serif}
.pw-decks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.pw-decks[hidden]{display:none}
.studio .l4-power .pw-decks button{min-height:40px;margin:0;padding:6px 14px;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:transparent;color:#b9c2cc;font:600 15px/1.2 system-ui,'Segoe UI',Arial,sans-serif;cursor:pointer;box-shadow:none}
.studio .l4-power .pw-decks button[aria-pressed=true]{border-color:#9cc7ff;background:#9cc7ff;color:#0b0d14}
.studio .l4-power .pw-cards{list-style:none!important;margin:0!important;padding:0!important;display:grid;gap:12px}
.studio .l4-power .pw-card{margin:0!important;padding:16px 18px!important;list-style:none!important;border:2px solid #9cc7ff;border-radius:10px;background:#10151f}
.studio .l4-power .pw-card::before{content:none!important}
.pw-card[hidden]{display:none}
.pw-js .pw-card{min-height:150px;animation:pw-in .25s ease-out}
@keyframes pw-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.studio .l4-power .pw-no{margin:0 0 6px!important;font:700 11px/1.4 Consolas,monospace;letter-spacing:.14em;color:#9cc7ff!important}
.studio .l4-power .pw-title{margin:0 0 6px!important;font:700 21px/1.25 system-ui,'Segoe UI',Arial,sans-serif;color:#fff!important}
.studio .l4-power .pw-txt{margin:0!important;font-size:17px;line-height:1.5;color:#d6dbe1!important;max-width:60ch}
.studio .l4-power .pw-txt a{color:#ffd23f!important}
.l4-power .c3w-shot{display:inline-block;max-width:100%;margin:12px 12px 0 0;vertical-align:top}
.l4-power .c3w-shot img{display:block;max-width:100%;height:auto;max-height:260px;border:1px solid rgba(255,255,255,.18);border-radius:6px}
.pw-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.pw-nav[hidden]{display:none}
.studio .l4-power .pw-nav button{min-height:44px;margin:0;padding:8px 16px;border:2px solid #9cc7ff;border-radius:6px;background:transparent;color:#9cc7ff;font:700 15px/1 system-ui,sans-serif;cursor:pointer;box-shadow:none}
.studio .l4-power .pw-nav button.primary{background:#9cc7ff;color:#0b0d14}
.studio .l4-power .pw-count{margin:0!important;font:12px/1.4 Consolas,monospace;letter-spacing:.06em;color:#b9c2cc!important;text-align:center}
@media (max-width:560px){.l4-power{padding:16px 12px}.studio .l4-power .pw-card{padding:14px!important}}
@media (prefers-reduced-motion:reduce){.pw-js .pw-card{animation:none}}

/* Lab 4: Turing's map room, the opening scene (same drawing style as Turing's laboratory) */
.l4-host{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;margin:20px 0 26px;padding:clamp(18px,3.5vw,34px);background:#12252b;border:5px solid #080e15;box-shadow:9px 9px 0 #080e15;color:#edf4dd;text-align:left}
.studio .l4-host :is(p,h3,b,label,span){color:inherit}
.studio .l4-host .l4-host-k{margin:0 0 8px!important;font:700 12px/1.4 Consolas,monospace;letter-spacing:.14em;color:#8cdec5!important}
.studio .l4-host h3{margin:0 0 14px!important;font:900 clamp(30px,4.4vw,52px)/1.03 system-ui,'Segoe UI',Arial,sans-serif;letter-spacing:-.04em;text-transform:none;color:#edf4dd!important}
.studio .l4-host .l4-host-copy>p{margin:0 0 14px!important;font-size:17px;line-height:1.55;max-width:46ch}
.l4-host-art{min-width:0;align-self:center;animation:l4h-arrive .5s ease-out both}
.l4h-scene{display:block;width:100%;height:auto;border:4px solid #080e15}
@keyframes l4h-arrive{from{opacity:0;transform:translateY(10px)}}
.l4h-mono{font:700 14px Consolas,monospace}
.l4h-small{font-size:11px}
.l4h-n{font:700 14px Consolas,monospace;fill:#ffd23f;opacity:0}
.l4h-cnt{fill:#c6f15b}
.l4h-n0{animation:l4h-n0 10s linear infinite}.l4h-n1{animation:l4h-n1 10s linear infinite}
.l4h-n2{animation:l4h-n2 10s linear infinite}.l4h-n3{animation:l4h-n3 10s linear infinite}
@keyframes l4h-n0{0%,7.9%{opacity:1}8%,100%{opacity:0}}
@keyframes l4h-n1{0%,7.9%{opacity:0}8%,17.9%{opacity:1}18%,100%{opacity:0}}
@keyframes l4h-n2{0%,17.9%{opacity:0}18%,27.9%{opacity:1}28%,100%{opacity:0}}
@keyframes l4h-n3{0%,27.9%{opacity:0}28%,100%{opacity:1}}
.l4h-visitor{animation:l4h-walk 10s ease-in-out infinite}
@keyframes l4h-walk{0%,6%{transform:translate(0,0)}8%{transform:translate(0,-10px)}10%,16%{transform:translate(0,0)}18%{transform:translate(0,-10px)}20%,26%{transform:translate(0,0)}28%{transform:translate(0,-10px)}30%,38%{transform:translate(0,0)}46%{transform:translate(72px,-30px);opacity:1}47%{opacity:0}48%{transform:translate(138px,-30px);opacity:0}49%{opacity:1}56%,70%{transform:translate(176px,0)}76%{transform:translate(138px,-30px);opacity:1}77%{opacity:0}78%{transform:translate(72px,-30px);opacity:0}79%{opacity:1}86%,100%{transform:translate(0,0)}}
.l4h-thought{opacity:0;transform-box:fill-box;transform-origin:left bottom;animation:l4h-thought 10s ease-out infinite}
@keyframes l4h-thought{0%,27.9%{opacity:0;transform:scale(.5)}31%,44%{opacity:1;transform:scale(1)}47%,100%{opacity:0;transform:scale(1)}}
.l4h-plus{font:700 15px Consolas,monospace;fill:#c6f15b;opacity:0;animation:l4h-plus 10s ease-out infinite}
@keyframes l4h-plus{0%,6%,16%,26%{opacity:0;transform:translateY(0)}8%,18%,28%{opacity:1;transform:translateY(-4px)}12%,22%,32%,100%{opacity:0;transform:translateY(-18px)}}
.l4h-still{opacity:0;animation:l4h-still 10s linear infinite}
@keyframes l4h-still{0%,53%{opacity:0}56%,73%{opacity:1}76%,100%{opacity:0}}
.l4h-arrow{transform-box:fill-box;transform-origin:center;animation:l4h-pulse 10s ease-in-out infinite}
@keyframes l4h-pulse{0%,40%,50%,70%,80%,100%{transform:scale(1)}45%,75%{transform:scale(1.25)}}
.l4h-blink{animation:l4h-blink 1.6s steps(2) infinite}.l4h-b2{animation-delay:.4s}.l4h-b3{animation-delay:.8s}
@keyframes l4h-blink{50%{opacity:.25}}
.l4h-point{transform-box:fill-box;transform-origin:100% 100%;animation:l4h-point 3s ease-in-out infinite}
@keyframes l4h-point{50%{transform:rotate(-4deg)}}
.l4h-head{transform-box:fill-box;transform-origin:center bottom;animation:l4h-bob 4s ease-in-out infinite}
@keyframes l4h-bob{50%{transform:rotate(-3deg) translateY(-2px)}}
.l4-pick[hidden],.l4-ask[hidden],.l4-plan button[hidden]{display:none}
.studio .l4-host .l4-pick-q{margin:6px 0 8px!important;font:700 12px/1.4 Consolas,monospace!important;letter-spacing:.12em;text-transform:uppercase;color:#e9ca85!important}
.l4-pick-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.studio .l4-host .l4-pick-row button,.studio .l4-host .l4-ask{min-height:44px;margin:0;padding:10px 14px;border:3px solid #080e15;border-radius:0;background:#edf4dd;color:#080e15!important;font:800 15px/1.2 system-ui,'Segoe UI',Arial,sans-serif;cursor:pointer;box-shadow:3px 3px 0 #080e15;transition:transform .12s}
.studio .l4-host .l4-pick-row button:hover,.studio .l4-host .l4-ask:hover{transform:translate(-1px,-1px)}
.studio .l4-host .l4-pick-row button[aria-pressed=true]{background:#ff5fd2;animation:l4-pop .35s ease-out}
.studio .l4-host .l4-ask{background:#e9ca85;margin:4px 0 12px}
.l4-pname{display:block;margin:0 0 12px;font-size:15px}
.l4-pname input{display:block;width:100%;max-width:340px;box-sizing:border-box;margin-top:6px;padding:10px 12px;border:3px solid #080e15;border-radius:0;background:#edf4dd;color:#080e15;font:16px/1.3 system-ui,'Segoe UI',Arial,sans-serif}
.studio .l4-host .l4-host-msg{margin:0!important;padding:12px;border-left:4px solid #8cdec5;background:#18353b;font:14px/1.6 Consolas,monospace!important;max-width:none}
.l4-host-msg.is-new{animation:l4-msg .35s ease-out}
@keyframes l4-msg{from{opacity:0;transform:translateY(6px)}}
@media (max-width:850px){.l4-host{grid-template-columns:1fr}.l4-host-art{order:-1}}
@media (max-width:560px){.l4-host{padding:14px;box-shadow:5px 5px 0 #080e15}}

/* Lab 4: Dr. Turing speaks in the live map */
.hud-talk{display:flex;align-items:center;gap:10px;margin-top:10px}
.studio .c3w .hud-talk .hud-msg{margin:0!important}
.hud-host{flex:none;width:44px;height:44px;border:2px solid #080e15;border-radius:50%;background:#2b1b6b}
.hud-talk.is-talking .hud-host{animation:l4-nod .5s ease-out}
@keyframes l4-nod{30%{transform:rotate(-8deg) translateY(-3px)}60%{transform:rotate(5deg)}}

/* Lab 4: what each new power does, as a small loop */
.l4-brief{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin:0 0 18px}
.studio .c3w .l4-brief .l4-mission{margin:0!important;flex:0 1 46ch}
.l4-concept{flex:0 0 auto;width:230px;margin:0;padding:8px 8px 6px;border:2px solid #080e15;background:#16124a;box-shadow:4px 4px 0 #080e15}
.l4-concept svg{display:block;width:100%;height:auto}
.studio .c3w .l4-concept figcaption{margin:4px 0 0;font:11px/1.35 Consolas,monospace;letter-spacing:.04em;color:#c6f15b;text-align:center}
.l4c-box{fill:#1b2363;stroke:#ffd23f;stroke-width:2.5}
.l4c-d{font:700 22px Consolas,monospace;fill:#ffd23f;text-anchor:middle}
.l4c-tag{font:700 12px Consolas,monospace;fill:#4fd1c5;text-anchor:middle}
.l4c-swing{transform-box:fill-box;transform-origin:center bottom;animation:l4c-swing 2.4s ease-in-out infinite}
@keyframes l4c-swing{50%{transform:rotate(-6deg) translateY(-2px)}}
.l4c-glint{fill:#fff;animation:l4h-blink 1.8s steps(2) infinite}
.l4c-d0,.l4c-d1,.l4c-d2,.l4c-d3{opacity:0;animation:6s linear infinite}
.l4c-d0{animation-name:l4c-q0}.l4c-d1{animation-name:l4c-q1}.l4c-d2{animation-name:l4c-q2}.l4c-d3{animation-name:l4c-q3}
@keyframes l4c-q0{0%,24.9%{opacity:1}25%,100%{opacity:0}}
@keyframes l4c-q1{0%,24.9%{opacity:0}25%,49.9%{opacity:1}50%,100%{opacity:0}}
@keyframes l4c-q2{0%,49.9%{opacity:0}50%,74.9%{opacity:1}75%,100%{opacity:0}}
@keyframes l4c-q3{0%,74.9%{opacity:0}75%,100%{opacity:1}}
.l4c-plus{font:700 15px Consolas,monospace;fill:#c6f15b;text-anchor:middle;opacity:0;animation:l4c-drop 6s ease-in infinite}
@keyframes l4c-drop{0%,14%,39%,64%{opacity:0;transform:translateY(-8px)}18%,43%,68%{opacity:1}24.9%,49.9%,74.9%{opacity:0;transform:translateY(16px)}100%{opacity:0}}
.l4c-chip{fill:#0b0b1e;stroke:#ff7a59;stroke-width:2}
.l4c-mono{font:700 13px Consolas,monospace;fill:#edf4dd;text-anchor:middle}
.l4c-amp{font:900 22px Consolas,monospace;fill:#ff5fd2;text-anchor:middle;animation:l4c-fade 4s ease-in-out infinite}
.l4c-left{animation:l4c-left 4s ease-in-out infinite}.l4c-right{animation:l4c-right 4s ease-in-out infinite}
@keyframes l4c-left{0%,10%{transform:translateX(0);opacity:1}40%{transform:translateX(30px);opacity:1}50%,100%{transform:translateX(30px);opacity:0}}
@keyframes l4c-right{0%,10%{transform:translateX(0);opacity:1}40%{transform:translateX(-30px);opacity:1}50%,100%{transform:translateX(-30px);opacity:0}}
@keyframes l4c-fade{0%,30%{opacity:1}45%,100%{opacity:0}}
.l4c-result{opacity:0;transform-box:fill-box;transform-origin:center;animation:l4c-result 4s ease-out infinite}
@keyframes l4c-result{0%,45%{opacity:0;transform:scale(.9)}55%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
.l4c-screen{fill:#06231f;stroke:#c6f15b;stroke-width:2.5}
.l4c-big{font:700 18px Consolas,monospace;fill:#c6f15b;text-anchor:middle}
.l4c-cmp{fill:#e9ca85}
.l4c-gate-frame{fill:#0b0b1e;stroke:#ff7a59;stroke-width:2.5}
.l4c-door{fill:#2d3a8c;stroke:#080e15;stroke-width:1.5;animation:6s ease-in-out infinite}
.l4c-door-l{animation-name:l4c-door-l}.l4c-door-r{animation-name:l4c-door-r}
@keyframes l4c-door-l{0%,75%{transform:translateX(0)}85%,95%{transform:translateX(-26px)}100%{transform:translateX(0)}}
@keyframes l4c-door-r{0%,75%{transform:translateX(0)}85%,95%{transform:translateX(26px)}100%{transform:translateX(0)}}
.l4c-msg{font:900 26px Consolas,monospace;fill:#ffd23f;text-anchor:middle;opacity:0;animation:l4c-msg 6s ease-out infinite}
@keyframes l4c-msg{0%,78%{opacity:0}84%,95%{opacity:1}100%{opacity:0}}
.l4c-room{fill:#2b1b6b;stroke:#080e15;stroke-width:2}.l4c-room2{fill:#12403a}
.l4c-small{font:700 11px Consolas,monospace;fill:#b9c2cc;text-anchor:middle}
.l4c-arrow{font:900 20px system-ui,sans-serif;fill:#ff7a59;text-anchor:middle}
.l4c-dot{fill:#ff5fd2;stroke:#080e15;stroke-width:2}
.l4c-go{animation:l4c-go 4s ease-in-out infinite}
@keyframes l4c-go{0%,15%{transform:translateX(0);opacity:1}45%{transform:translateX(44px);opacity:1}50%{opacity:0;transform:translateX(44px)}55%{opacity:0;transform:translateX(104px)}60%,90%{transform:translateX(125px);opacity:1}100%{transform:translateX(125px);opacity:0}}
.l4c-return{animation:l4c-return 5s ease-in-out infinite}
@keyframes l4c-return{0%,15%{transform:translateX(0);opacity:1}40%{transform:translateX(-36px);opacity:1}44%{opacity:0;transform:translateX(-36px)}48%{opacity:0;transform:translateX(-96px)}52%,92%{transform:translateX(-128px);opacity:1}100%{transform:translateX(-128px);opacity:0}}
.l4c-reset,.l4c-repaint{opacity:0;animation:5s linear infinite}
.l4c-reset{fill:#ff7a59;animation-name:l4c-reset}.l4c-repaint{fill:#c6f15b;animation-name:l4c-repaint}
@keyframes l4c-reset{0%,51.9%{opacity:0}52%,67.9%{opacity:1}68%,100%{opacity:0}}
@keyframes l4c-repaint{0%,67.9%{opacity:0}68%,96%{opacity:1}100%{opacity:0}}
@media (max-width:560px){.l4-concept{width:100%;max-width:300px}}

/* Lab 4: your project, under each scene and in the final gate */
[data-pt][hidden]{display:none}
.studio .c3w .l4-yours{margin:12px 0 14px!important;padding:10px 14px;border-left:4px solid #ff5fd2;background:#1d1026;font-size:16px;line-height:1.5;color:#f3e8f7!important;max-width:none}
.studio .c3w .l4-yours .l4-yours-k{display:block;margin-bottom:2px;font:700 11px/1.4 Consolas,monospace;letter-spacing:.14em;color:#ff5fd2}
.studio .c3w .l4-yours b{color:#fff}
.l4-plan{margin:4px 0 16px;padding:14px 16px;border:2px solid #ff5fd2;border-radius:10px;background:#140c1a}
.studio .l4-ready .l4-plan-k{margin:0 0 4px!important;font:700 11px/1.4 Consolas,monospace;letter-spacing:.14em;color:#ff5fd2!important}
.studio .l4-ready .l4-plan-h{margin:0 0 10px!important;font-size:18px;line-height:1.35}
.l4-plan-rows{display:grid;gap:8px}
.l4-plan-rows label{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:10px;font-size:15px;color:#b9c2cc}
.l4-plan-rows input{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:#0b0d14;color:#fff;font:16px/1.3 system-ui,'Segoe UI',Arial,sans-serif}
.l4-plan-rows input:focus{outline:2px solid #ff5fd2;outline-offset:1px}
.studio .l4-ready .l4-plan-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0!important;font-size:14px;color:#b9c2cc!important}
.studio .l4-ready .l4-plan button{min-height:40px;margin:0;padding:8px 14px;border:2px solid #ff5fd2;border-radius:6px;background:#ff5fd2;color:#140c1a;font:700 15px/1 system-ui,sans-serif;cursor:pointer;box-shadow:none}
@media (max-width:560px){.l4-plan-rows label{grid-template-columns:1fr;gap:4px}}

@media (prefers-reduced-motion:reduce){.l4-host *,.l4-concept *,.hud-talk *,.l4-host-art,.l4-host-msg{animation:none!important}.l4h-n3,.l4c-d3,.l4c-result,.l4c-msg,.l4c-repaint{opacity:1}.l4h-n0,.l4c-d0,.l4c-left,.l4c-right,.l4c-amp{opacity:0}.l4c-door-l{transform:translateX(-26px)}.l4c-door-r{transform:translateX(26px)}.l4c-go{transform:translateX(125px)}.l4c-return{transform:translateX(-128px)}}
.access-no-motion :is(.l4-host,.l4-concept,.hud-talk) *,.access-calm :is(.l4-host,.l4-concept,.hud-talk) *{animation:none!important}
.studio .c3w .l4-hud button.hud-room:hover{background:#151a28}.studio .c3w .l4-hud.is-playable button.hud-room.is-here:hover{background:#1b2133}
.studio .l4-host .l4-goal{margin:0 0 14px!important;padding:10px 12px;border:2px dashed #e9ca85;font-size:16px;line-height:1.5;max-width:46ch}
.studio .l4-host .l4-goal a{color:#e9ca85!important;font-weight:800}
/* Lab 4 check in: three lamps before the map room. */
.l4-boot{margin:10px 0 22px;padding:22px 24px;border:2px solid #ffd23f;border-radius:12px;background:#0b0d14;color:#f5f5ef}
.l4b-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.l4b-k{margin:0 0 6px!important;font:700 12px/1.4 Consolas,monospace;letter-spacing:.14em;color:#ffd23f!important}
.l4-boot h3{margin:0!important;font:800 clamp(24px,3vw,32px)/1.15 system-ui,'Segoe UI',Arial,sans-serif;color:#fff}
.l4b-art{width:220px;max-width:100%;height:auto}
.l4b-win{animation:l4b-slide 3.2s ease-in-out infinite alternate}
.l4b-right{animation-name:l4b-slide-r}
@keyframes l4b-slide{0%{transform:translateX(56px) scale(.9)}35%,100%{transform:none}}
@keyframes l4b-slide-r{0%{transform:translateX(-56px) scale(.9);opacity:.4}35%,100%{transform:none;opacity:1}}
.l4b-list{list-style:none!important;margin:18px 0 10px!important;padding:0!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.l4b-list li{margin:0!important;padding:0!important;list-style:none!important;display:grid;align-content:start;gap:6px}
.l4b-list li::before{content:none!important}
.l4b-list label{position:relative;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:14px 12px;border:1px solid rgba(255,255,255,.2);border-radius:10px;cursor:pointer}
.l4b-list label:hover{border-color:#ffd23f}
.l4b-list input{position:absolute;opacity:0;width:1px;height:1px}
.l4b-list input:focus-visible+.l4b-lamp{outline:3px solid #8cdec5;outline-offset:3px}
.l4b-lamp{width:30px;height:30px;border-radius:50%;border:3px solid #f5f5ef;background:#2b2f3a;transition:background .2s}
.l4b-list input:checked+.l4b-lamp{background:#ffd23f;animation:l4b-pop .35s ease-out}
.l4b-list input:checked~.l4b-txt b::after{content:' ✓';color:#c6f58d}
.l4b-txt{font-size:15px;line-height:1.45;color:#d9dde4}
.l4b-txt b{display:block;font-size:17px;color:#fff;margin-bottom:3px}
.l4b-link{margin:0 0 0 12px!important;font-size:15px}
.l4b-link a{color:#ffd23f}
.l4b-msg{margin:6px 0 0!important;font:700 14px/1.4 Consolas,monospace;color:#c6f58d!important}
@keyframes l4b-pop{0%{transform:scale(.6)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.studio .journey-next .mission-launch.l4b-ready{animation:l4b-nudge 1.4s ease-in-out 3}
@keyframes l4b-nudge{50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.l4b-win,.l4b-list input:checked+.l4b-lamp,.studio .journey-next .mission-launch.l4b-ready{animation:none}}
/* Lab 4: how one scene works, above the scene tabs. */
.l4-how{list-style:none!important;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px!important;padding:0!important}
.l4-how li{margin:0!important;padding:8px 12px!important;display:flex;align-items:center;gap:8px;border:1px dashed rgba(255,255,255,.3);border-radius:8px;font-size:15px;color:#f5f5ef;list-style:none!important}
.l4-how li::before{content:none!important}
.l4-how span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffd23f;color:#000;font:800 13px/1 system-ui}
.l4-pick-q span{display:block;font:400 13px/1.4 system-ui;letter-spacing:0;text-transform:none;color:#cfd6dc;margin-top:2px}