@font-face{font-family:Silkscreen;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/silkscreen-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Silkscreen;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/silkscreen-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plexmono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plexmono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


.bl{animation:bl 1s steps(1,end) infinite}
.bl2{animation:bl .5s steps(1,end) infinite}
@keyframes bl{0%{opacity:1}50%{opacity:0}}
.vr{animation:vr 5s steps(1,end) infinite}
@keyframes vr{0%{opacity:1}45%{opacity:0}75%{opacity:1}}
.st{animation:st .7s steps(1,end) infinite}
@keyframes st{0%{opacity:1}25%{opacity:0}50%{opacity:.5}75%{opacity:0}}
.dr{animation:dr 4s steps(1,end) infinite}
@keyframes dr{0%{transform:translate(0,0)}25%{transform:translate(8px,0)}50%{transform:translate(8px,8px)}75%{transform:translate(0,8px)}}
.as{animation:as 4s steps(1,end) infinite}
@keyframes as{0%{opacity:0}40%{opacity:1}85%{opacity:0}}
.ds{animation:ds 4s steps(1,end) infinite}
@keyframes ds{0%{opacity:1}40%{opacity:0}85%{opacity:1}}
.tp{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:tp 4s steps(22,end) infinite}
@keyframes tp{0%{width:0}60%{width:22ch}100%{width:22ch}}
.gl{animation:gl 2.5s steps(1,end) infinite}
@keyframes gl{0%{transform:translateX(0)}86%{transform:translateX(16px)}88%{transform:translateX(-8px)}90%{transform:translateX(24px)}92%{transform:translateX(0)}}
.gl2{animation:gl 2.5s steps(1,end) infinite;animation-delay:-.08s}
.tr{animation:tr 3s steps(16,end) infinite}
@keyframes tr{0%{width:0}70%{width:100%}100%{width:100%}}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
@media (prefers-reduced-motion: reduce){*{animation:none !important}}

html,body{margin:0;background:#000;color:#fff}
body{-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;font-family:"IBM Plex Mono",monospace}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#bg,#fx{position:fixed;inset:0;width:100%;height:100%;display:none;pointer-events:none}
#bg{image-rendering:pixelated;z-index:0}
#fx{z-index:2}
#stage{position:relative;z-index:1}
#hud{display:none}
a:focus-visible{outline:4px solid #fff;outline-offset:4px}
.frame{-webkit-user-select:text;user-select:text}
.mask{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;z-index:5}
/* ---------- flow mode (no-js / reduced motion) ---------- */
.scene{position:relative;overflow:hidden;background:#000}
.scene[data-inv="1"]{background:#fff}
.v{margin:0 auto}
.v-m{display:none}
@media (max-width:700px),(max-aspect-ratio:4/5){.v-d{display:none}.v-m{display:block}}
body.flow .v{transform-origin:top left}
/* ---------- stage mode ---------- */
body.stage #bg,body.stage #fx{display:block}
body.stage #stage{position:fixed;inset:0;overflow:hidden}
body.stage .scene{position:absolute;inset:0;background:transparent;opacity:0;pointer-events:none}
body.stage .scene.on{opacity:1}
body.stage .scene.live{pointer-events:auto}
body.stage .scene:not(.on) *{animation-play-state:paused}
body.stage .v{position:absolute;left:50%;top:50%;margin:0}
body.stage .v-d{transform:translate(-50%,-50%) scale(var(--sd,1))}
body.stage .v-m{transform:translate(-50%,-50%) translateY(var(--my,0px)) scale(var(--sm,1))}
body.stage #hud{display:block;position:fixed;inset:0;z-index:3;pointer-events:none;color:#fff;font-family:Silkscreen,monospace}
body.stage.inv #hud{color:#000}
.hud-d{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform:translate(-50%,-50%) scale(var(--sd,1))}
.hud-d .hud-ch{position:absolute;left:64px;top:24px;font-size:14px;line-height:24px}
.hud-d .hud-n{position:absolute;right:64px;top:24px;font-size:14px;line-height:24px}
.hud-d .hud-p{position:absolute;right:28px;top:228px;display:flex;flex-direction:column;gap:4px}
.hud-p i{display:block;width:8px;height:8px;box-sizing:border-box;border:2px solid currentColor}
.hud-p i.done{background:currentColor}
.hud-p i.now{background:currentColor;animation:bl 1s steps(1,end) infinite}
.hud-m{display:none;position:absolute;left:0;right:0;top:0;height:64px;background:#000;transform-origin:top left}
body.inv .hud-m{background:#fff}
.hud-m .hud-ch{position:absolute;left:24px;top:20px;font-size:11px;line-height:16px}
.hud-m .hud-n{position:absolute;right:24px;top:20px;font-size:11px;line-height:16px}
.hud-m .hud-p{position:absolute;left:24px;top:44px;display:flex;gap:4px}
@media (max-width:700px),(max-aspect-ratio:4/5){.hud-d{display:none}.hud-m{display:block;width:390px;transform:scale(var(--sm,1))}}
body.hud-hide #hud{opacity:0}
.hud-ok{position:absolute;width:8px;height:8px;background:currentColor;visibility:hidden}
.hud-d .hud-ok{right:44px;top:32px}
.hud-m .hud-ok{right:8px;top:24px}
.hud-ok.on{visibility:visible}
.hud-ok.flash{animation:bl .2s steps(1,end) 3}
#hud{transition:none}
@media (prefers-reduced-motion: reduce){.hud-p i.now{animation:none}}

/* ---------- info-icoon (altijd aanwezig) ---------- */
.info{--fg:#fff;--bg:#000;position:fixed;z-index:10;font-family:Silkscreen,monospace;color:var(--fg);transform-origin:top right;transform:scale(var(--sd,1));right:calc((100% - 1280px*var(--sd,1))/2 + 12px*var(--sd,1));top:calc((100vh - 720px*var(--sd,1))/2 + 24px*var(--sd,1))}
body.inv .info{--fg:#000;--bg:#fff}
.info details{position:relative}
.info summary{list-style:none;position:relative;width:24px;height:24px;box-sizing:border-box;border:2px solid var(--fg);background:var(--bg);color:var(--fg);font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:15px;line-height:20px;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none}
.info summary::-webkit-details-marker{display:none}
.info summary::after{content:"";position:absolute;inset:-10px}
.info summary:hover,.info details[open] summary{background:var(--fg);color:var(--bg)}
.info summary:focus-visible{outline:4px solid var(--fg);outline-offset:4px;box-shadow:0 0 0 4px var(--bg)}
.info-p{position:absolute;right:0;top:calc(100% + 8px);width:340px;box-sizing:border-box;background:var(--bg);color:var(--fg);border:4px solid var(--fg);padding:16px;display:flex;flex-direction:column;gap:12px;text-align:left}
.info-p p{margin:0}
.info-t{font-size:13px;line-height:1.3;text-transform:uppercase}
.info-x{font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.5}
.info-p a{display:block;box-sizing:border-box;border:4px solid var(--fg);padding:12px;font-size:12px;line-height:1.3;text-transform:uppercase}
.info-a{background:var(--fg);color:var(--bg)}
.info-b{background:var(--bg);color:var(--fg)}
.info-p a:hover{background:var(--fg);color:var(--bg)}
.info-p a.info-a:hover{background:var(--bg);color:var(--fg)}
.info-p a:focus-visible{outline:4px solid var(--fg);outline-offset:2px}
@media (max-width:700px),(max-aspect-ratio:4/5){.info{transform:scale(var(--sm,1));right:calc((100% - 390px*var(--sm,1))/2 + 24px*var(--sm,1));top:calc(42px*var(--sm,1))}.info summary{width:20px;height:20px;font-size:12px;line-height:16px}.info summary::after{inset:-12px}}