/* Vonk — the digital lab. Shared by /lab/ and every activity inside it.
 *
 * The lab is a working area for the digital track (DIGITAL-TRACK.md): each
 * activity lands here as it is built, so it can be tried before it is ever
 * linked from the site. Tool pages use a slim bar instead of the canonical
 * header so the working area gets the screen on a projector. */
:root{
  --navy:#052950; --teal:#0C818C; --gold:#F2AD20; --orange:#ED6229; --rust:#C83B14;
  --ink:#243244; --muted:#5C6572; --paper:#FFFFFF; --warm:#FBF7F0; --line:#ECE6DA;
  --font-display:'Fraunces', Georgia, serif; --font-body:'Inter', system-ui, sans-serif;
  --pill:999px; --radius:16px;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{margin:0; background:var(--warm); color:var(--ink); font-family:var(--font-body);
     font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;}
button{font:inherit;}

/* The canonical topbar is the ONLY header, on every lab page (owner,
   2026-10-09: "the logo and nav bar identical across all pages as a rule").
   Everything the old slim bar carried - back arrow, title, crumbs, the red
   close - lives in the .pagebar row inside the page instead. */
  /* ---- the canonical topbar (byte-for-byte with kennisbank.html, minus the
     page-width wrap): the lab index carries the standard nav; only activity
     pages keep the slim bar so the working area gets the screen. ---- */
  .topbar{display:flex; justify-content:flex-start; align-items:center;
          gap:clamp(14px,1.9vw,32px); padding:22px clamp(28px,6vw,92px); background:var(--paper); border-bottom:1px solid var(--line);}
  .topbar img{width:min(124px,52vw); height:auto; display:block;}
  .topbar nav{display:flex; gap:clamp(12px,1.5vw,24px); margin-right:clamp(6px,1.6vw,28px);
              font-size:14.5px; font-weight:500; white-space:nowrap;}
  .topbar nav a{color:var(--navy); text-decoration:none; opacity:.85;}
  .topbar nav a:hover{opacity:1; color:var(--orange);}
  .topbar nav a.is-here{color:var(--orange); opacity:1;}
  .toggles{display:inline-flex; align-items:center; gap:8px;}
  .sidetoggle{display:inline-flex; gap:2px; padding:3px;
              border:1.5px solid var(--line); border-radius:var(--pill); background:transparent;}
  .side{display:inline-flex; align-items:center; font-family:var(--font-body);
        font-size:11.5px; font-weight:700; letter-spacing:.03em; padding:0 9px;
        min-height:var(--toggle-h,29px); line-height:1;
        border-radius:var(--pill); text-decoration:none;
        color:var(--side-fg,var(--muted)); transition:background .16s, color .16s;}
  .side:hover{color:var(--navy); background:var(--side-hover,rgba(5,41,80,.08));}
  .side.is-here, .side.is-here:hover{background:var(--side-on-bg,#052950);
                color:var(--side-on-fg,#FFFFFF);}
  .langtoggle{margin-left:0; display:inline-flex; gap:2px; padding:3px;
              border:1.5px solid var(--line); border-radius:var(--pill); background:transparent;}
  .langtoggle .lang-btn{border:none; background:none; cursor:pointer; font-family:var(--font-body);
            font-size:12.5px; font-weight:600; letter-spacing:.04em; padding:0 12px;
            min-height:var(--toggle-h,29px); display:inline-flex; align-items:center; line-height:1;
            border-radius:var(--pill); color:var(--muted); transition:background .16s, color .16s;}
  .langtoggle .lang-btn:hover{color:var(--navy);}
  .langtoggle .lang-btn.is-on{background:var(--navy); color:#fff;}
  html.is-arriving::after{content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
        background:var(--shift-from,#0F1B2D); animation:sides-arrive .45s ease forwards;}
  @keyframes sides-arrive{from{opacity:1;} to{opacity:0;}}
  /* The toggle sends the landing's waves across the page INDIVIDUALLY,
     like the swell - and each wave DRAGS ITS COLOUR behind it: five full
     sheets (sides.js builds .sideswash with five children on click), each
     a crest sampled from the hero's own two-sine formula with its colour
     filling solid behind, each covering the one before, the floor colour
     last and on top for the handoff - one flat opaque colour, or it blinks
     a shade. EDU -> PLT travels left-to-right, PLT -> EDU right-to-left
     (#inr/#inl carry the direction on to the destination). */
  .sideswash{position:fixed; inset:0; z-index:9999; pointer-events:none;}
  .sideswash i{position:absolute; top:0; height:100vh; display:block;}
  @keyframes swash{to{transform:translateX(var(--tx));}}
  .sideswash.to-eng i:nth-child(1){left:calc(-100vw - 600px); width:calc(100vw + 600px); --tx:calc(100vw + 600px);
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 1440' preserveAspectRatio='none'%3E%3Cpath d='M85 0 L102 40 L116 80 L126 120 L131 160 L131 200 L128 240 L124 280 L120 320 L119 360 L120 400 L124 440 L128 480 L131 520 L131 560 L126 600 L116 640 L102 680 L85 720 L68 760 L54 800 L44 840 L39 880 L39 920 L42 960 L46 1000 L50 1040 L51 1080 L50 1120 L46 1160 L42 1200 L39 1240 L39 1280 L44 1320 L54 1360 L68 1400 L85 1440 L0 1440 L0 0 Z' fill='%239FC6F4'/%3E%3Cpath d='M75 0 L92 40 L106 80 L116 120 L121 160 L121 200 L118 240 L114 280 L110 320 L109 360 L110 400 L114 440 L118 480 L121 520 L121 560 L116 600 L106 640 L92 680 L75 720 L58 760 L44 800 L34 840 L29 880 L29 920 L32 960 L36 1000 L40 1040 L41 1080 L40 1120 L36 1160 L32 1200 L29 1240 L29 1280 L34 1320 L44 1360 L58 1400 L75 1440 L0 1440 L0 0 Z' fill='%237FB3F0'/%3E%3C/svg%3E") right center/150px 1440px repeat-y,
        linear-gradient(#7FB3F0,#7FB3F0) left center/calc(100% - 149px) 100% no-repeat;
        animation:swash 2.0s cubic-bezier(.45,.1,.3,1) 0.00s both;}
  .sideswash.to-eng i:nth-child(2){left:calc(-100vw - 600px); width:calc(100vw + 600px); --tx:calc(100vw + 600px);
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 1440' preserveAspectRatio='none'%3E%3Cpath d='M113 0 L119 40 L125 80 L130 120 L133 160 L135 200 L133 240 L129 280 L121 320 L111 360 L99 400 L85 440 L72 480 L58 520 L47 560 L37 600 L31 640 L28 680 L28 720 L32 760 L37 800 L45 840 L53 880 L62 920 L70 960 L77 1000 L83 1040 L87 1080 L90 1120 L92 1160 L94 1200 L95 1240 L97 1280 L99 1320 L103 1360 L108 1400 L113 1440 L0 1440 L0 0 Z' fill='%237BABE0'/%3E%3Cpath d='M103 0 L109 40 L115 80 L120 120 L123 160 L125 200 L123 240 L119 280 L111 320 L101 360 L89 400 L75 440 L62 480 L48 520 L37 560 L27 600 L21 640 L18 680 L18 720 L22 760 L27 800 L35 840 L43 880 L52 920 L60 960 L67 1000 L73 1040 L77 1080 L80 1120 L82 1160 L84 1200 L85 1240 L87 1280 L89 1320 L93 1360 L98 1400 L103 1440 L0 1440 L0 0 Z' fill='%234F8FD6'/%3E%3C/svg%3E") right center/150px 1440px repeat-y,
        linear-gradient(#4F8FD6,#4F8FD6) left center/calc(100% - 149px) 100% no-repeat;
        animation:swash 2.0s cubic-bezier(.45,.1,.3,1) 0.18s both;}
  .sideswash.to-eng i:nth-child(3){left:calc(-100vw - 600px); width:calc(100vw + 600px); --tx:calc(100vw + 600px);
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 1440' preserveAspectRatio='none'%3E%3Cpath d='M106 0 L100 40 L97 80 L95 120 L93 160 L89 200 L83 240 L74 280 L62 320 L48 360 L36 400 L26 440 L20 480 L20 520 L25 560 L34 600 L45 640 L55 680 L64 720 L70 760 L73 800 L75 840 L77 880 L81 920 L87 960 L96 1000 L108 1040 L122 1080 L134 1120 L144 1160 L150 1200 L150 1240 L145 1280 L136 1320 L125 1360 L115 1400 L106 1440 L0 1440 L0 0 Z' fill='%23919FB2'/%3E%3Cpath d='M96 0 L90 40 L87 80 L85 120 L83 160 L79 200 L73 240 L64 280 L52 320 L38 360 L26 400 L16 440 L10 480 L10 520 L15 560 L24 600 L35 640 L45 680 L54 720 L60 760 L63 800 L65 840 L67 880 L71 920 L77 960 L86 1000 L98 1040 L112 1080 L124 1120 L134 1160 L140 1200 L140 1240 L135 1280 L126 1320 L115 1360 L105 1400 L96 1440 L0 1440 L0 0 Z' fill='%236C7F99'/%3E%3C/svg%3E") right center/150px 1440px repeat-y,
        linear-gradient(#6C7F99,#6C7F99) left center/calc(100% - 149px) 100% no-repeat;
        animation:swash 2.0s cubic-bezier(.45,.1,.3,1) 0.36s both;}
  .sideswash.to-eng i:nth-child(4){left:calc(-100vw - 600px); width:calc(100vw + 600px); --tx:calc(100vw + 600px);
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 1440' preserveAspectRatio='none'%3E%3Cpath d='M57 0 L47 40 L39 80 L34 120 L32 160 L33 200 L36 240 L42 280 L49 320 L57 360 L64 400 L71 440 L78 480 L83 520 L86 560 L89 600 L91 640 L92 680 L94 720 L97 760 L100 800 L104 840 L109 880 L115 920 L120 960 L126 1000 L130 1040 L132 1080 L132 1120 L130 1160 L124 1200 L116 1240 L106 1280 L94 1320 L82 1360 L69 1400 L57 1440 L0 1440 L0 0 Z' fill='%235B81BC'/%3E%3Cpath d='M47 0 L37 40 L29 80 L24 120 L22 160 L23 200 L26 240 L32 280 L39 320 L47 360 L54 400 L61 440 L68 480 L73 520 L76 560 L79 600 L81 640 L82 680 L84 720 L87 760 L90 800 L94 840 L99 880 L105 920 L110 960 L116 1000 L120 1040 L122 1080 L122 1120 L120 1160 L114 1200 L106 1240 L96 1280 L84 1320 L72 1360 L59 1400 L47 1440 L0 1440 L0 0 Z' fill='%232457A6'/%3E%3C/svg%3E") right center/150px 1440px repeat-y,
        linear-gradient(#2457A6,#2457A6) left center/calc(100% - 149px) 100% no-repeat;
        animation:swash 2.0s cubic-bezier(.45,.1,.3,1) 0.54s both;}
  .sideswash.to-eng i:nth-child(5){left:calc(-100vw - 600px); width:calc(100vw + 600px); --tx:calc(100vw + 600px);
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 1440' preserveAspectRatio='none'%3E%3Cpath d='M43 0 L39 40 L37 80 L39 120 L44 160 L54 200 L66 240 L80 280 L94 320 L105 360 L113 400 L117 440 L118 480 L118 520 L117 560 L117 600 L119 640 L122 680 L127 720 L131 760 L133 800 L131 840 L126 880 L116 920 L104 960 L90 1000 L76 1040 L65 1080 L57 1120 L53 1160 L52 1200 L52 1240 L53 1280 L53 1320 L51 1360 L48 1400 L43 1440 L0 1440 L0 0 Z' fill='%23474D58'/%3E%3Cpath d='M33 0 L29 40 L27 80 L29 120 L34 160 L44 200 L56 240 L70 280 L84 320 L95 360 L103 400 L107 440 L108 480 L108 520 L107 560 L107 600 L109 640 L112 680 L117 720 L121 760 L123 800 L121 840 L116 880 L106 920 L94 960 L80 1000 L66 1040 L55 1080 L47 1120 L43 1160 L42 1200 L42 1240 L43 1280 L43 1320 L41 1360 L38 1400 L33 1440 L0 1440 L0 0 Z' fill='%230A1220'/%3E%3C/svg%3E") right center/150px 1440px repeat-y,
        url("/vonk-logo-eng-wash.png") calc(50vw - min(140px, 28vw)) center/min(280px, 56vw) auto no-repeat,
        linear-gradient(#0A1220,#0A1220) left center/calc(100% - 149px) 100% no-repeat;
        animation:swash 2.0s cubic-bezier(.45,.1,.3,1) 0.72s both;}
  .sideswash.to-edu i:nth-child(1){left:100vw; width:calc(100vw + 600px); --tx:calc(-100vw - 600px);
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 1440' preserveAspectRatio='none'%3E%3Cpath d='M65 0 L48 40 L34 80 L24 120 L19 160 L19 200 L22 240 L26 280 L30 320 L31 360 L30 400 L26 440 L22 480 L19 520 L19 560 L24 600 L34 640 L48 680 L65 720 L82 760 L96 800 L106 840 L111 880 L111 920 L108 960 L104 1000 L100 1040 L99 1080 L100 1120 L104 1160 L108 1200 L111 1240 L111 1280 L106 1320 L96 1360 L82 1400 L65 1440 L150 1440 L150 0 Z' fill='%2349A0A9'/%3E%3Cpath d='M75 0 L58 40 L44 80 L34 120 L29 160 L29 200 L32 240 L36 280 L40 320 L41 360 L40 400 L36 440 L32 480 L29 520 L29 560 L34 600 L44 640 L58 680 L75 720 L92 760 L106 800 L116 840 L121 880 L121 920 L118 960 L114 1000 L110 1040 L109 1080 L110 1120 L114 1160 L118 1200 L121 1240 L121 1280 L116 1320 L106 1360 L92 1400 L75 1440 L150 1440 L150 0 Z' fill='%230C818C'/%3E%3C/svg%3E") left center/150px 1440px repeat-y,
        linear-gradient(#0C818C,#0C818C) right center/calc(100% - 149px) 100% no-repeat;
        animation:swash 2.0s cubic-bezier(.45,.1,.3,1) 0.00s both;}
  .sideswash.to-edu i:nth-child(2){left:100vw; width:calc(100vw + 600px); --tx:calc(-100vw - 600px);
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 1440' preserveAspectRatio='none'%3E%3Cpath d='M37 0 L31 40 L25 80 L20 120 L17 160 L15 200 L17 240 L21 280 L29 320 L39 360 L51 400 L65 440 L78 480 L92 520 L103 560 L113 600 L119 640 L122 680 L122 720 L118 760 L113 800 L105 840 L97 880 L88 920 L80 960 L73 1000 L67 1040 L63 1080 L60 1120 L58 1160 L56 1200 L55 1240 L53 1280 L51 1320 L47 1360 L42 1400 L37 1440 L150 1440 L150 0 Z' fill='%23F5C258'/%3E%3Cpath d='M47 0 L41 40 L35 80 L30 120 L27 160 L25 200 L27 240 L31 280 L39 320 L49 360 L61 400 L75 440 L88 480 L102 520 L113 560 L123 600 L129 640 L132 680 L132 720 L128 760 L123 800 L115 840 L107 880 L98 920 L90 960 L83 1000 L77 1040 L73 1080 L70 1120 L68 1160 L66 1200 L65 1240 L63 1280 L61 1320 L57 1360 L52 1400 L47 1440 L150 1440 L150 0 Z' fill='%23F2AD20'/%3E%3C/svg%3E") left center/150px 1440px repeat-y,
        linear-gradient(#F2AD20,#F2AD20) right center/calc(100% - 149px) 100% no-repeat;
        animation:swash 2.0s cubic-bezier(.45,.1,.3,1) 0.18s both;}
  .sideswash.to-edu i:nth-child(3){left:100vw; width:calc(100vw + 600px); --tx:calc(-100vw - 600px);
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 1440' preserveAspectRatio='none'%3E%3Cpath d='M44 0 L50 40 L53 80 L55 120 L57 160 L61 200 L67 240 L76 280 L88 320 L102 360 L114 400 L124 440 L130 480 L130 520 L125 560 L116 600 L105 640 L95 680 L86 720 L80 760 L77 800 L75 840 L73 880 L69 920 L63 960 L54 1000 L42 1040 L28 1080 L16 1120 L6 1160 L0 1200 L0 1240 L5 1280 L14 1320 L25 1360 L35 1400 L44 1440 L150 1440 L150 0 Z' fill='%23F2895E'/%3E%3Cpath d='M54 0 L60 40 L63 80 L65 120 L67 160 L71 200 L77 240 L86 280 L98 320 L112 360 L124 400 L134 440 L140 480 L140 520 L135 560 L126 600 L115 640 L105 680 L96 720 L90 760 L87 800 L85 840 L83 880 L79 920 L73 960 L64 1000 L52 1040 L38 1080 L26 1120 L16 1160 L10 1200 L10 1240 L15 1280 L24 1320 L35 1360 L45 1400 L54 1440 L150 1440 L150 0 Z' fill='%23ED6229'/%3E%3C/svg%3E") left center/150px 1440px repeat-y,
        linear-gradient(#ED6229,#ED6229) right center/calc(100% - 149px) 100% no-repeat;
        animation:swash 2.0s cubic-bezier(.45,.1,.3,1) 0.36s both;}
  .sideswash.to-edu i:nth-child(4){left:100vw; width:calc(100vw + 600px); --tx:calc(-100vw - 600px);
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 1440' preserveAspectRatio='none'%3E%3Cpath d='M93 0 L103 40 L111 80 L116 120 L118 160 L117 200 L114 240 L108 280 L101 320 L93 360 L86 400 L79 440 L72 480 L67 520 L64 560 L61 600 L59 640 L58 680 L56 720 L53 760 L50 800 L46 840 L41 880 L35 920 L30 960 L24 1000 L20 1040 L18 1080 L18 1120 L20 1160 L26 1200 L34 1240 L44 1280 L56 1320 L68 1360 L81 1400 L93 1440 L150 1440 L150 0 Z' fill='%23D66C4F'/%3E%3Cpath d='M103 0 L113 40 L121 80 L126 120 L128 160 L127 200 L124 240 L118 280 L111 320 L103 360 L96 400 L89 440 L82 480 L77 520 L74 560 L71 600 L69 640 L68 680 L66 720 L63 760 L60 800 L56 840 L51 880 L45 920 L40 960 L34 1000 L30 1040 L28 1080 L28 1120 L30 1160 L36 1200 L44 1240 L54 1280 L66 1320 L78 1360 L91 1400 L103 1440 L150 1440 L150 0 Z' fill='%23C83B14'/%3E%3C/svg%3E") left center/150px 1440px repeat-y,
        linear-gradient(#C83B14,#C83B14) right center/calc(100% - 149px) 100% no-repeat;
        animation:swash 2.0s cubic-bezier(.45,.1,.3,1) 0.54s both;}
  .sideswash.to-edu i:nth-child(5){left:100vw; width:calc(100vw + 600px); --tx:calc(-100vw - 600px);
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 1440' preserveAspectRatio='none'%3E%3Cpath d='M107 0 L111 40 L113 80 L111 120 L106 160 L96 200 L84 240 L70 280 L56 320 L45 360 L37 400 L33 440 L32 480 L32 520 L33 560 L33 600 L31 640 L28 680 L23 720 L19 760 L17 800 L19 840 L24 880 L34 920 L46 960 L60 1000 L74 1040 L85 1080 L93 1120 L97 1160 L98 1200 L98 1240 L97 1280 L97 1320 L99 1360 L102 1400 L107 1440 L150 1440 L150 0 Z' fill='%23486B92'/%3E%3Cpath d='M117 0 L121 40 L123 80 L121 120 L116 160 L106 200 L94 240 L80 280 L66 320 L55 360 L47 400 L43 440 L42 480 L42 520 L43 560 L43 600 L41 640 L38 680 L33 720 L29 760 L27 800 L29 840 L34 880 L44 920 L56 960 L70 1000 L84 1040 L95 1080 L103 1120 L107 1160 L108 1200 L108 1240 L107 1280 L107 1320 L109 1360 L112 1400 L117 1440 L150 1440 L150 0 Z' fill='%230B3A6E'/%3E%3C/svg%3E") left center/150px 1440px repeat-y,
        url("/vonk-logo-edu-wash.png") calc(50vw + 600px - min(140px, 28vw)) center/min(280px, 56vw) auto no-repeat,
        linear-gradient(#0B3A6E,#0B3A6E) right center/calc(100% - 149px) 100% no-repeat;
        animation:swash 2.0s cubic-bezier(.45,.1,.3,1) 0.72s both;}
  @media (max-width:1060px){
    .topbar{flex-wrap:wrap; row-gap:14px; padding-left:20px; padding-right:20px;}
    .topbar img{width:min(128px,44vw);}
    .toggles{margin-left:auto;}
    .topbar nav{order:3; flex-basis:100%; flex-wrap:wrap; white-space:normal;
                gap:10px 18px; font-size:15px;}
    .topbar nav a{padding:2px 0;}
  }
  @media (max-width:420px){
    .topbar nav{gap:8px 14px; font-size:14.5px;}
    .topbar img{width:112px;}
    .langtoggle .lang-btn{padding:0 10px;}
    .side{padding:0 9px; letter-spacing:.03em;} .toggles{gap:8px;}
  }

/* the honest strip: everything here is in development */
.devnote{background:rgba(242,173,32,.16); color:#6B5415; font-size:13px; font-weight:600;
         text-align:center; padding:8px clamp(16px,3vw,40px); border-bottom:1px solid rgba(242,173,32,.3);}

.pagebar{display:flex; align-items:center; gap:14px; max-width:1400px; margin:0 auto;
         padding:16px clamp(16px,3vw,40px) 0;}
.pagebar h1{font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2.2vw,26px);
            color:var(--navy); margin:0; flex:1; min-width:0; display:flex; align-items:center; gap:9px;}
.pagebar .crumb{font-size:14px; font-weight:600; color:var(--navy); text-decoration:none; opacity:.8;
                display:inline-flex; align-items:center; gap:6px;}
.pagebar .crumb:hover{opacity:1; color:var(--orange);}
.bolt{width:.8em; height:.8em; flex:none; fill:var(--orange);}
.bback{width:30px; height:30px; flex:none; border-radius:50%; background:var(--paper); color:var(--navy);
         display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:800;
         text-decoration:none; line-height:1; box-shadow:inset 0 0 0 1.5px var(--line);}
.bback:hover, .bback:focus-visible{color:#fff; background:var(--navy); box-shadow:none;}
main > .bback{margin-bottom:12px;}
.pagebar .gclose{width:28px; height:28px; flex:none; border-radius:50%; background:#E5484D; color:#fff;
         display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
         text-decoration:none; line-height:1; box-shadow:0 2px 8px rgba(200,50,58,.35);}
.pagebar .gclose:hover, .pagebar .gclose:focus-visible{background:#C8323A;}

main{padding:clamp(16px,3vw,40px); max-width:1400px; margin:0 auto;}

footer{padding:24px clamp(16px,3vw,40px) 40px; color:var(--muted); font-size:14px; max-width:1400px; margin:0 auto;}
footer a{color:var(--navy);}

/* ---------- About an activity: the honest account for teachers ----------
 * Every live activity gets a lab/<name>-about.html in this shape: what pupils
 * do, what it teaches, how the machine inside actually works, how that
 * compares with real systems, what was simplified and why, and sources.
 * The comparison is the point: a toy model is only honest if it says where
 * it is a toy. */
.about{max-width:860px;}
.about .kicker{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0;}
.about h2{font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:clamp(21px,2.1vw,27px); margin:38px 0 10px;}
.about .lead{font-size:clamp(18px,1.8vw,21px); margin:8px 0 14px;}
.about .facts{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 6px; list-style:none;}
.about .facts li{background:var(--paper); border:1px solid var(--line); border-radius:var(--pill); padding:4px 12px; font-size:14px;}
.about .cta{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0;}
.about .btn{display:inline-block; background:var(--orange); color:#fff; font-weight:600; font-size:15px; padding:9px 18px;
            border-radius:var(--pill); text-decoration:none; box-shadow:0 4px 14px rgba(237,98,41,.28);}
.about .btn.ghost{background:none; color:var(--navy); border:1.5px solid var(--navy); box-shadow:0 4px 14px rgba(5,41,80,.12);}
.about ol.steps, .about ul.points{padding-left:1.2em; margin:6px 0;}
.about ol.steps li, .about ul.points li{margin:6px 0;}
.about .card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin:12px 0;}
.about .card.how{border-left:5px solid var(--teal);}
.about table.vs{width:100%; border-collapse:collapse; background:var(--paper); border-radius:var(--radius); overflow:hidden;
                border:1px solid var(--line); font-size:15.5px;}
.about table.vs th, .about table.vs td{padding:10px 14px; text-align:left; vertical-align:top; border-top:1px solid var(--line);}
.about table.vs thead th{background:var(--navy); color:#fff; border-top:none; font-size:14px;}
.about table.vs tbody th{font-weight:600; color:var(--navy); width:22%;}
.about table.vs td.toy{background:#FFF6EF;}
.about .note{color:var(--muted); font-size:14.5px;}
.about ol.src{font-size:14.5px; padding-left:1.3em;}
.about ol.src li{margin:5px 0;}
@media (max-width:640px){
  .about table.vs thead{display:none;}
  .about table.vs, .about table.vs tbody, .about table.vs tr, .about table.vs th, .about table.vs td{display:block; width:auto;}
  .about table.vs tr{border-top:1px solid var(--line); padding:6px 0;}
  .about table.vs th, .about table.vs td{border:none; padding:4px 14px;}
  .about table.vs td::before{content:attr(data-col); display:block; font-size:12px; font-weight:600; color:var(--muted);
                             text-transform:uppercase; letter-spacing:.05em;}
}

/* ---------------- "How to play" (lab/tutorial.js) ----------------
   Every lab game opens with one. A dialog over the whole page: a demo stage
   drawn with the game's own pieces, a heading, a sentence or two, and Skip /
   Back / Next. Sized to fit a 1366×660 laptop and a phone. */
.tut{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px;
     background:rgba(3,24,47,.72); animation:tutIn .25s ease;}
.tut-card{width:min(680px,100%); max-height:calc(100dvh - 32px); overflow:auto; background:var(--warm); border-radius:20px;
          padding:16px 20px 16px; box-shadow:0 0 0 3px var(--gold), 0 20px 60px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:10px;}
.tut-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.tut-kicker{font:800 11px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.12em; text-transform:uppercase; color:#8A6400;}
.tut-skip{border:none; background:none; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; padding:6px 8px; border-radius:8px; text-decoration:underline; text-underline-offset:3px;}
.tut-skip:hover, .tut-skip:focus-visible{color:var(--navy); background:#fff;}
.tut-stage{position:relative; flex:none; min-height:200px; background:#fff; border-radius:14px; box-shadow:0 0 0 2px var(--line); padding:14px;
           display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; overflow:hidden;}
.tut-stage.hands{box-shadow:0 0 0 3px var(--orange), 0 0 18px rgba(237,98,41,.25); padding-top:32px;}
.tut-try{position:absolute; top:8px; left:10px; font:800 10px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.12em; text-transform:uppercase;
         color:#fff; background:var(--orange); padding:4px 7px; border-radius:6px;}
.tut h2{font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:clamp(21px,2.4vw,27px); line-height:1.2; margin:2px 0 0;}
.tut-p{margin:0; font-size:16px; line-height:1.5;}
.tut-nav{display:flex; align-items:center; gap:10px; margin-top:2px;}
.tut-dots{display:flex; gap:6px; margin-right:auto;}
.tut-dots i{width:9px; height:9px; border-radius:50%; background:var(--line);}
.tut-dots i.past{background:#C9B98F;} .tut-dots i.on{background:var(--orange); width:22px; border-radius:5px;}
.tut-back, .tut-next{border:none; border-radius:999px; padding:10px 18px; font-weight:700; font-size:15px; cursor:pointer;}
.tut-back{background:transparent; color:var(--navy); box-shadow:inset 0 0 0 2px var(--line);}
.tut-next{background:var(--orange); color:#fff; box-shadow:0 3px 0 #A8431A;}
.tut-next:active{transform:translateY(2px); box-shadow:0 1px 0 #A8431A;}
.tut-next.bounce{animation:tutHop 1.6s ease-in-out infinite;}
@keyframes tutHop{0%,40%,100%{transform:none;} 12%{transform:translateY(-6px);} 22%{transform:none;} 30%{transform:translateY(-3px);}}
@keyframes tutIn{from{opacity:0;} to{opacity:1;}}
/* the "How to play" button that sits on a game's console bar */
.tut-btn{display:inline-flex; align-items:center; gap:6px; border:none; border-radius:999px; padding:5px 11px 5px 8px; cursor:pointer;
         font:700 11.5px/1 ui-monospace, Menlo, Consolas, monospace; color:#BFE3C8; background:rgba(191,227,200,.1); box-shadow:inset 0 0 0 1.5px rgba(191,227,200,.4);}
.tut-btn:hover, .tut-btn:focus-visible{color:#03182F; background:#BFE3C8;}
@media (max-width:600px){ .tut-card{padding:12px 14px;} .tut-stage{min-height:170px; padding:12px 8px;} .tut-p{font-size:15px;} .tut-back, .tut-next{padding:9px 14px;} }
@media (prefers-reduced-motion:reduce){ .tut, .tut-next.bounce{animation:none;} }

/* "What this means for real AI": a misconception and what is really true */
.tut-mf{display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; align-self:stretch;}
.tut-myth, .tut-fact{border-radius:12px; padding:12px 14px;}
.tut-myth{background:#FDECEC; box-shadow:inset 0 0 0 2px #F3B7B9;}
.tut-fact{background:#E3F4EC; box-shadow:inset 0 0 0 2px #9ED8B7;}
.tut-myth b, .tut-fact b{display:block; font:800 11px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px;}
.tut-myth b{color:#B4232A;} .tut-fact b{color:#137A47;}
.tut-myth p{margin:0; font-size:17px; font-weight:650; color:var(--navy); line-height:1.35;}
.tut-fact p{margin:0; font-size:15px; line-height:1.45;}
@media (max-width:600px){ .tut-mf{grid-template-columns:1fr;} }

/* the welcome screen's "How to play" invitation (VonkTutorial.invite) */
.tut-invite{display:flex; flex-direction:column; align-items:center; gap:6px; margin:4px auto 16px;}
.tut-invite-btn{display:inline-flex; align-items:center; gap:10px; border:none; border-radius:999px; padding:12px 22px 12px 14px; cursor:pointer;
                font:700 18px/1 var(--font-body); color:#fff; background:var(--teal); box-shadow:0 4px 0 #075A62, 0 8px 22px rgba(12,129,140,.35);
                animation:tutWiggle 3.2s ease-in-out infinite; transform-origin:50% 100%;}
.tut-invite-btn svg{flex:none;} .tut-invite-btn svg circle{fill:#fff;} .tut-invite-btn svg path{fill:var(--teal);}
.tut-invite-btn:hover, .tut-invite-btn:focus-visible{background:#0A6E78; animation-play-state:paused;}
.tut-invite-btn:active{transform:translateY(3px); box-shadow:0 1px 0 #075A62;}
.tut-invite-hint{font-size:13px; color:var(--muted);}
@keyframes tutWiggle{
  0%,62%,100%{transform:none;}
  68%{transform:translateY(-8px);} 74%{transform:translateY(0);} 78%{transform:translateY(-3px);} 82%{transform:none;}
  86%{transform:rotate(-3deg);} 89%{transform:rotate(3deg);} 92%{transform:rotate(-2deg);} 95%{transform:rotate(1deg);}
}
@media (prefers-reduced-motion:reduce){ .tut-invite-btn{animation:none;} }

/* Fixed-height mode (body.fit, set by each game below 900px wide / 560px
   tall it is off). The pages lay the body out as two grid rows, bar + game,
   so the game takes the rest of the screen. Since the full site header and
   the work-in-progress strip arrived (2026-10-09) there are three bars, and
   the game row fell back to its content height and pushed the page past the
   screen. A column with the game flexing into what is left works for any
   number of bars. `html body.fit` outranks each page's own body.fit rule. */
html body.fit{display:flex; flex-direction:column;}
html body.fit > .machine, html body.fit > .sort1{flex:1 1 auto; min-height:0;}
/* SORT-1's memory bank grew past its grid row instead of scrolling inside it */
html body.fit .sort1 > .side > .bank{max-height:100%;}

/* Short laptop screens (1366x660 and the like). The Lab pages carry the full
   site header and the work-in-progress strip since 2026-10-09, which took
   ~60px from every game's screen, and the welcome screens no longer fit.
   They tighten here, once for every game, instead of page by page. `body.fit`
   is the chassis's fixed-height mode, so this never touches phones or tall
   screens. Measure every game's welcome .screen after changing it. */
@media (min-width:900px) and (max-height:780px){
  body.fit .welcome{padding:2px 4px;}
  body.fit .welcome h2{font-size:clamp(21px,2vw,27px); margin:0 0 4px;}
  body.fit .welcome .lead{font-size:14.5px; line-height:1.4; margin:0 auto 8px;}
  body.fit .tut-invite{margin:0 auto 5px; gap:3px;}
  body.fit .tut-invite-btn{padding:8px 18px 8px 11px; font-size:16px;}
  body.fit .tut-invite-hint{font-size:12px;}
  body.fit .lvcards{gap:10px;}
  body.fit .lvcard{padding:9px 11px 8px;}
  body.fit .lvcard h3{font-size:16px; margin:0 0 3px;}
  body.fit .lvcard b{margin-bottom:4px;}
  body.fit .lvcard p{font-size:12.5px; line-height:1.3;}
  body.fit .welcome .lead{line-height:1.35;}
  body.fit .welcome .small{margin:6px auto 0; font-size:11.5px; line-height:1.35;}
  body.fit .pagebar{padding-top:8px;}
  body.fit .machine, body.fit .sort1{margin-top:6px; margin-bottom:8px; padding:8px;}
  body.fit .devnote{padding-top:4px; padding-bottom:4px;}
  body.fit .view{padding:6px;}
}

/* Each game's chat column is called .side, and so are the header's EDU/ENG
   toggle buttons (the canonical SIDES rules above, which must stay as they
   are). Since the full header came to the Lab (2026-10-09) the toggle's look
   landed on the column too: align-items:center squeezed the chat into the
   middle at half height, plus a small bold font, padding and a hover tint.
   Undo it on the game columns only; the pages set their own layout. */
.machine > .side, .sort1 > .side, .machine > .side:hover, .sort1 > .side:hover{
  align-items:stretch; font:inherit; letter-spacing:normal; line-height:inherit;
  padding:0; border-radius:0; text-decoration:none; color:inherit; background:none; transition:none;}

/* Bigger chat text, for reading on a laptop or a projector (owner,
   2026-10-09: "increase the text size for easier readability"). */
.chatbox .msg{font-size:15px;}
.chatbox .msg.u{font-size:15px;}
.chatbox .msg.t{font-size:14.5px; line-height:1.45;}
.chatbox .msg.m.log{font-size:12.5px;}
.chatbox .msg.m::before{font-size:10.5px;}
.chatbox .msg.t::before{font-size:10px;}
.replies .reply{font-size:13.5px;}

/* "In your computer" (owner, 2026-10-09: "tie every step back to computing
   and digital literacy ... what function does it serve in a computer, why
   does the student care?"). After each round's result a game posts one
   Vonk card with kind "real": what this step does in real computers, with
   an example a pupil knows. Its own colour so it reads as the takeaway. */
.chatbox .msg.t.real{background:#E6F4F1; border-left-color:#137A6B; color:#0B3B36;}
.chatbox .msg.t.real::before{color:#137A6B;}

/* the comparison pane (VonkLab.compare): two moments side by side, the
   numbers that moved in a table under them, one sentence on what it means */
.cmp{background:#fff; border:2px solid #052950; border-radius:12px; padding:10px 13px; color:#1B2433; font-size:14px; line-height:1.4;}
.cmp p{margin:0;}
.cmp-l{display:block; font:800 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; color:#0C818C; margin-bottom:5px;}
.cmp-t{font-weight:700; font-size:15px; margin-bottom:8px !important;}
.cmp-two{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.cmp-side{border-radius:9px; padding:7px 9px; background:#F3F5F8; min-width:0;}
.cmp-b.cmp-side{background:#FFF1E9; box-shadow:inset 0 0 0 2px #ED6229;}
.cmp-h{display:block; font-size:12.5px; color:#052950; margin-bottom:4px;}
.cmp-body{min-width:0;} .cmp-body svg{display:block; width:100%; height:auto;}
.cmp-rows{width:100%; border-collapse:collapse; margin-top:8px; font-variant-numeric:tabular-nums;}
.cmp-rows th{text-align:left; font-weight:600; color:#5C6572; padding:3px 6px 3px 0;}
.cmp-rows td{padding:3px 4px; text-align:right;} .cmp-rows .cmp-arrow{color:#9AA6B2; text-align:center; width:1.4em;}
.cmp-rows td.cmp-b.moved{font-weight:800; color:#C83B14;}
.cmp-note{margin-top:8px !important; font-weight:600; color:#052950;}
.cmp-stack .cmp-two{grid-template-columns:1fr; gap:6px;}
@media (max-width:520px){ .cmp-two{grid-template-columns:1fr;} }
.cmp-mini{border-collapse:collapse; width:100%; font:13px/1.3 ui-monospace, Menlo, monospace; font-variant-numeric:tabular-nums; background:#fff;}
.cmp-mini th, .cmp-mini td{border:1px solid #D5DBE3; padding:2px 6px; text-align:left; white-space:nowrap;}
.cmp-mini th{background:#E9EDF2; font-weight:700; color:#052950;}
.cmp-mini td.hi{background:#FFE3D3; font-weight:800; color:#C83B14;}