:root{--paper:#080808;--ink:#f2f2f2;--muted:#adb1b6;--wall:#262a2e;--orange:#e57b45;--green:#e57b45;--terminal-line:#34383d;--panel:#101214;--maze-edge:#464d54;--metal:#171a1d;--secondary:#818990;--person:#e57b45;--machine:#7693ad;--mono:SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
body{font-family:var(--mono);background:var(--paper)}
body::before{content:"";position:fixed;inset:14px;border:1px solid var(--terminal-line);pointer-events:none;z-index:20}
header{inset:15px 15px auto;padding:20px calc(5vw - 15px);border-bottom:1px solid var(--terminal-line);background:rgba(8,8,8,.97)}
.brand{font-family:var(--mono);font-size:21px;letter-spacing:-1px;font-weight:700;gap:12px}.brand svg{width:24px;height:24px}
nav{font-family:var(--mono);font-size:14px;font-weight:400;gap:24px}nav>a{color:var(--muted)}nav>a:hover{color:var(--orange)}nav .pill{border:1px solid var(--orange);padding:10px 14px;background:transparent;color:var(--orange);box-shadow:none}nav .pill:hover{background:var(--orange);color:var(--paper)}
h1,h2,#idea h2,#play h2{font-family:var(--mono);font-weight:600;text-transform:none;letter-spacing:-.07em;line-height:1.12;font-size:clamp(28px,3.2vw,48px);margin-bottom:30px}
h1 .punch{font-family:var(--mono);font-weight:600;font-size:clamp(34px,4.4vw,64px);letter-spacing:-.075em;line-height:1.12;margin-top:18px}
h1 .terminal-line{font-family:var(--mono);font-size:clamp(18px,1.85vw,27px);padding:0;border:0;background:none;letter-spacing:-.06em}
h1 .terminal-line .terminal-prompt{margin-right:.15ch}.terminal-message{color:var(--ink)}
.copy,#idea .copy,#play .copy{border-left:0;padding:7px 0 7px 24px;background:linear-gradient(90deg,rgba(8,8,8,.9),rgba(8,8,8,.25) 75%,transparent);max-width:680px}
h2::before{content:"> ";color:#818990;font-weight:400}
p,#idea p,#play p{font-family:var(--mono);font-size:17px;font-weight:400;letter-spacing:-.035em;line-height:1.7;color:var(--muted);max-width:40ch;margin-bottom:30px}
.button{font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:-.045em;padding:14px 18px;gap:25px;background:transparent;border:1px solid var(--orange);color:var(--orange);box-shadow:none;clip-path:none}
.button::before{content:"[";color:var(--orange)}.button::after{content:"]";color:var(--orange)}.button:hover{background:var(--orange);color:var(--paper)}.button:hover::before,.button:hover::after{color:var(--paper)}
.button span{font-family:var(--mono);font-size:19px}
.layout::after{background:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.98) 15%,rgba(8,8,8,.88) 31%,rgba(8,8,8,.5) 46%,rgba(8,8,8,.08) 64%,transparent 80%)}
.maze-wall{fill:var(--wall);stroke:#464d54;stroke-width:.6}.route-live{stroke:var(--orange);stroke-width:5;filter:none}
svg [fill="#111115"],svg [fill="#17172b"]{fill:var(--paper)}
svg [fill="#d6ff3f"]{fill:var(--orange)}svg [stroke="#d6ff3f"]{stroke:var(--orange)}
svg [fill="#3737d0"]{fill:#262a2e}svg [stroke="#3737d0"]{stroke:#596269}
svg [fill="#25256b"]{fill:#171a1d}svg [stroke="#7878ff"]{stroke:#818990}svg [stroke="#7777f7"]{stroke:#a5adb3}
svg [stroke="#6565ff"],svg [stroke="#7575d9"]{stroke:#747e86}svg [fill="#7272b9"]{fill:#818990}
.progress{font-family:var(--mono);font-size:13px;background:var(--paper);border:1px solid var(--terminal-line);color:var(--muted);right:28px;bottom:28px;padding:11px 13px}.progress-track{height:4px;width:70px;background:#262a2e}.progress-track i{background:var(--orange)}
footer{font-family:var(--mono);font-size:14px;bottom:82px;color:var(--muted)}
.version-switch{position:fixed;left:5vw;bottom:28px;z-index:21;font-family:var(--mono);font-size:14px}
.version-switch a{display:block;padding:10px 13px;border:1px solid var(--terminal-line);background:var(--paper);color:var(--muted)}.version-switch a:hover{border-color:var(--orange);color:var(--orange)}
@media(max-width:1100px) and (min-width:801px){#idea h2,#play h2{font-size:30px}#idea p,#play p{font-size:16px}.copy,#idea .copy,#play .copy{padding-left:18px}}
@media(max-width:800px){body::before{inset:9px}header{inset:10px 10px auto;padding:18px calc(6vw - 10px)}.brand{font-size:18px;letter-spacing:-1px;gap:8px}.brand svg{width:20px;height:20px}nav .pill{font-size:12px;box-shadow:none;padding:9px 10px}
.copy,#idea .copy,#play .copy{padding:4px 0 4px 16px;background:linear-gradient(90deg,rgba(8,8,8,.94),rgba(8,8,8,.55) 75%,transparent)}
h1 .terminal-line{font-size:clamp(14px,3.7vw,22px)}h1 .punch{font-size:clamp(30px,6.2vw,45px)}h2,#idea h2,#play h2{font-size:clamp(27px,5.8vw,40px)}p,#idea p,#play p{font-size:16px;line-height:1.65;max-width:37ch}
.layout::after{background:linear-gradient(90deg,#080808,rgba(8,8,8,.94) 24%,rgba(8,8,8,.62) 48%,transparent 95%)}.maze-wall{opacity:.6}
.progress{bottom:22px;right:20px;font-size:11px;padding:9px}.progress-track{width:40px}.version-switch{left:6vw;bottom:22px;font-size:12px}.version-switch a{padding:9px}footer{bottom:80px}}

/* Keep both scroll sequences active in a narrow browser as well. */
h1 .terminal-line{font-size:clamp(20px,2.15vw,31px);gap:.5ch;font-weight:600}
.terminal-name{background:var(--orange);width:9.5ch;padding:0 .3ch;color:var(--paper);animation:terminal-word-width 12s linear infinite}
@keyframes terminal-word-width{0%,14%{width:9.5ch}16%,40%{width:15ch}42%,60%{width:9.5ch}62%,74%{width:7.5ch}76%,100%{width:9.5ch}}
@media(prefers-reduced-motion:reduce){.terminal-name{animation:none;width:9.5ch}}
.terminal-names>span{color:var(--paper);font-weight:700}
@media(max-width:800px){
 h1 .terminal-line{font-size:clamp(16px,4.2vw,25px)}
 #idea,#play{height:1800px;min-height:1800px;padding:0 6vw;display:block}
 #idea .copy,#play .copy{position:relative;top:0;margin:110px 0 100px;width:95%;padding-left:16px}
 #idea p,#play p{font-size:15px;line-height:1.5;max-width:none}
 #play h2{font-size:27px;margin-bottom:22px}
 #play h2 br{display:none}#play h2 span::before{content:" "}
}
@media(max-width:440px){#idea p,#play p{font-size:14px}#idea .copy,#play .copy{margin-top:105px}}
@media(prefers-reduced-motion:reduce){#idea,#play{height:auto;min-height:900px}}
@media(max-width:800px){#idea,#play{display:flow-root}}

/* An automatic opening beat, with space reserved so the maze never jumps. */
.hero{align-items:flex-start;padding-top:clamp(140px,18vh,190px)}
.hero .copy{width:100%;max-width:none;margin-top:0;border:0;padding:0;background:none}
.hero h1{margin-bottom:26px}
.hero h1 .terminal-line{font-size:clamp(22px,2.8vw,40px);animation:intro-arrive .65s both}
.hero h1 .punch{font-size:clamp(38px,8.2vw,128px);line-height:1.05;letter-spacing:-.085em;margin-top:24px;white-space:nowrap;animation:intro-arrive .85s cubic-bezier(.16,1,.3,1) 3.2s both}
.hero p,.hero .button{animation:intro-arrive .75s cubic-bezier(.16,1,.3,1) 3.65s both}
.hero p{max-width:40ch}
@keyframes intro-arrive{from{opacity:0;transform:translateY(18px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(max-width:800px){
 .hero{padding-top:clamp(140px,21vh,180px)}
 .hero .copy{width:100%;padding:0;margin:0}
 .hero h1 .terminal-line{font-size:clamp(17px,4.4vw,30px)}
 .hero h1 .punch{font-size:clamp(30px,8.2vw,65px);margin-top:24px}
 .hero p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.hero h1 .terminal-line,.hero h1 .punch,.hero p,.hero .button{animation:none}}

/* Full-screen opening, then a shared move into the reading layout. */
.hero h1 .terminal-line,.hero h1 .punch,.hero p,.hero .button{animation:none;transform-origin:0 0}
header,.maze-world,#journeyActor,#carriedObstacle,#obstacleGround,.progress,.version-switch,.hero p,.hero .button{transition:opacity .7s ease}
.intro-active header,.intro-active .maze-world,.intro-active #journeyActor,.intro-active #carriedObstacle,.intro-active #obstacleGround,.intro-active .progress,.intro-active .version-switch,.intro-active .hero p,.intro-active .hero .button{opacity:0;pointer-events:none}
.intro-active .hero h1 .punch{opacity:0}
.intro-active .hero h1 .terminal-line,.intro-active .hero h1 .punch{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){header,.maze-world,#journeyActor,#carriedObstacle,#obstacleGround,.progress,.version-switch,.hero p,.hero .button{transition:none}}

.hero h1 .punch{width:max-content}

/* Autonomous film: one camera, two room interactions, then the readable page. */
.film-loading .layout,.film-loading header,.film-loading .progress,.film-loading .version-switch{opacity:0}
.film-playing{overflow:hidden}
.film-playing>.layout,.film-playing>header,.film-playing>#journeyActor,.film-playing>#carriedObstacle,.film-playing>#obstacleGround,.film-playing>.progress,.film-playing>.version-switch{visibility:hidden}
.maze-film{position:fixed;inset:0;z-index:50;width:100%;height:100dvh;min-height:0;padding:0;display:block;background:var(--paper);overflow:hidden;transition:opacity .8s ease;outline:0}
.maze-film.film-out{opacity:0;pointer-events:none}
.film-stage{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.film-stage .maze-wall{opacity:.75}
.film-stage .route-live{stroke-width:4;filter:none}
.film-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,8,.98),rgba(8,8,8,.85) 25%,rgba(8,8,8,.2) 54%,transparent 75%);pointer-events:none}
.film-opening{position:absolute;inset:0;margin:0;pointer-events:none}
.film-opening .terminal-line{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-size:clamp(24px,6.6vw,96px);padding:0;border:0;background:none;gap:.5ch;letter-spacing:-.06em}
.film-opening .punch{position:absolute;top:55%;left:0;width:100%;text-align:center;margin:0;font-size:clamp(38px,8.2vw,128px);letter-spacing:-.085em;opacity:0}
.film-caption{position:absolute;left:7vw;top:21vh;width:47%;pointer-events:none}
.film-caption h2{font-size:clamp(32px,4.1vw,67px);line-height:1.12;letter-spacing:-.075em;font-weight:600;margin:0 0 24px}
.film-caption h2::before{content:none}
.film-caption h2 span{color:var(--orange)}
.film-caption p{font-size:clamp(16px,1.4vw,21px);line-height:1.5;margin:24px 0 0;max-width:28ch}
.film-controls{position:absolute;right:5vw;top:32px;display:flex;gap:20px;animation:film-controls-in .6s 3.5s both}
.film-controls button,.version-switch button{font:inherit;font-family:var(--mono);font-size:14px;color:var(--muted);border:1px solid var(--terminal-line);background:var(--paper);padding:10px 14px;cursor:pointer}
.film-controls button:hover,.version-switch button:hover{color:var(--orange);border-color:var(--orange)}
.film-controls button:focus-visible,.version-switch button:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.film-time{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--terminal-line)}
.film-time i{display:block;background:var(--orange);height:100%;transform-origin:left;transform:scaleX(0)}
@keyframes film-controls-in{from{opacity:0}to{opacity:1}}
@media(max-width:700px){
 .film-opening .terminal-line{font-size:6.6vw}
 .film-opening .punch{font-size:8.2vw;top:54%}
 .film-caption{left:7vw;top:16vh;width:87%}
 .film-caption h2{font-size:clamp(30px,7.8vw,48px)}
 .film-caption p{font-size:15px;margin-top:17px;max-width:32ch}
 .film-shade{background:linear-gradient(180deg,var(--paper) 8%,rgba(8,8,8,.94) 24%,rgba(8,8,8,.3) 43%,transparent 65%)}
 .film-controls{top:24px;right:6vw;gap:10px}.film-controls button{font-size:12px;padding:9px}
}
@media(prefers-reduced-motion:reduce){.maze-film{transition:none}.film-controls{animation:none}}
/* Shorter reading route matches the compact film. */
#idea,#play{height:1300px;min-height:1300px}
@media(prefers-reduced-motion:reduce){#idea,#play{height:auto;min-height:900px}}
/* Film and scrolling now render one shared story, including camera and performers. */
.layout{z-index:2;pointer-events:none}.layout a,.layout button{pointer-events:auto}.layout::after{display:none}
.maze-world,body>#journeyActor,body>#carriedObstacle,body>#obstacleGround{visibility:hidden!important}
.scroll-story{position:fixed;inset:0;z-index:1;height:100dvh;min-height:0;padding:0;display:block;pointer-events:none;overflow:hidden}
.scroll-story .film-opening,.scroll-story .film-caption,.scroll-story .film-controls,.scroll-story .film-time{display:none}
.film-playing>.scroll-story{visibility:hidden}
#idea,#thinking,#play{height:900px;min-height:100svh;padding:0 5vw;display:flow-root}
#idea .copy,#thinking .copy,#play .copy{position:relative;top:0;margin:145px 0 100px;width:47%;max-width:650px;will-change:transform;transition:opacity .3s}
#idea h2,#thinking h2,#play h2{font-size:clamp(28px,3.2vw,48px);line-height:1.12;letter-spacing:-.07em}
#idea h2::before,#thinking h2::before,#play h2::before{content:none}
#idea p,#thinking p,#play p{font-size:17px;line-height:1.7;max-width:32ch}
@media(max-width:800px){
 #idea,#thinking,#play{padding:0 6vw}
 #idea .copy,#thinking .copy,#play .copy{width:95%;margin-top:110px}
 #idea h2,#thinking h2,#play h2{font-size:clamp(27px,5.8vw,40px)}
 #play h2 br{display:initial}#play h2 span::before{content:none}
 #idea p,#thinking p,#play p{font-size:15px;max-width:35ch}
}

/* Navy supplies depth; gold marks the path and the moments of progress. */
svg [fill="#fafafa"]{fill:var(--ink)}
svg [stroke="#7777f7"]{stroke:#a5adb3}

/* Offset second faces give every button a tactile, pixel-edged depth. */
.button,nav .pill,.film-controls button,.version-switch button{
 position:relative;border:1px solid var(--orange);border-radius:0;
 background:var(--paper);color:var(--orange);
 box-shadow:4px 4px 0 var(--paper),5px 5px 0 var(--orange);
 transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease,color .15s ease;
}
.button:hover,nav .pill:hover,.film-controls button:hover,.version-switch button:hover{
 background:var(--orange);color:var(--paper);
 box-shadow:4px 4px 0 var(--paper),5px 5px 0 var(--orange);
 transform:translate(-1px,-1px);
}
.button:active,nav .pill:active,.film-controls button:active,.version-switch button:active{
 transform:translate(4px,4px);box-shadow:0 0 0 var(--paper),1px 1px 0 var(--orange);
}
@media(prefers-reduced-motion:reduce){.button,nav .pill,.film-controls button,.version-switch button{transition:none}}

/* Two characters, two colours: human effort in gold; automation in cyan. */
[data-role="physical-machine"],[data-role="ai-terminal"],[data-role="ai-robot"]{
 --orange:var(--machine);--ink:var(--machine);--secondary:#536b80;--maze-edge:#536b80;--metal:#11161b;--panel:#0e1318;
}
[data-role="person"],[data-role="phone-scroller"],[data-role="bench-press"],[data-role="human-thoughts"],[data-role="realization"]{
 --orange:var(--person);--ink:var(--person);--secondary:#9d5c3e;--metal:#080808;--panel:#15110e;
}
svg [fill="#3737d0"]{fill:var(--metal)}
svg [stroke="#3737d0"],svg [stroke="#7878ff"],svg [stroke="#7777f7"],svg [stroke="#6565ff"],svg [stroke="#7575d9"]{stroke:var(--secondary)}
svg [fill="#25256b"]{fill:var(--paper)}
svg [fill="#7272b9"]{fill:var(--secondary)}
.terminal-name{background:var(--machine)}
h1 .terminal-line .terminal-prompt{color:var(--machine)}
.terminal-cursor{background:var(--machine)}
#idea h2 span,#thinking h2 span{color:var(--machine)}

/* The introduction sits above the map. A tiny spark leads only during scroll travel. */
.scroll-story{mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.journey-spark-rays{transform-box:fill-box;transform-origin:center;animation:journey-sparkle 1.2s ease-in-out infinite}
@keyframes journey-sparkle{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.journey-spark-rays{animation:none}}

/* Let the copy stand on its own, without decorative vertical rules. */
.copy,#idea .copy,#thinking .copy,#play .copy{border-left:0;padding-left:0}

/* A full-height L frames the story copy, like a turn in the maze. */
#idea .copy,#thinking .copy,#play .copy,#finish .copy{position:relative}
#idea h2::before,#thinking h2::before,#play h2::before,#finish h2::before,.film-caption h2::before{content:none}
#idea .copy::before,#thinking .copy::before,#play .copy::before,#finish .copy::before,.film-caption::before{content:"";display:block;position:absolute;left:-24px;top:0;bottom:-18px;width:32px;border-left:2px solid var(--machine);border-bottom:2px solid var(--machine);pointer-events:none}
#play .copy::before,#finish .copy::before,.film-caption::before{border-color:var(--person)}
.film-caption[data-scene="machines"]::before,.film-caption[data-scene="thinking"]::before{border-color:var(--machine)}
@media(max-width:800px){#idea .copy::before,#thinking .copy::before,#play .copy::before,#finish .copy::before,.film-caption::before{left:-16px;bottom:-14px;width:24px}}

/* A quieter map keeps the story readable; the pointer reveals nearby walls. */
.film-stage .maze-wall{opacity:.44}
.maze-wall-highlight{fill:#82909b;stroke:#82909b;stroke-width:.6;opacity:.65}

/* A compact guide to the extension and its puzzles. */
#how{height:auto;min-height:100svh;padding:150px 5vw 110px;align-items:center}
#how .how-copy{width:100%;max-width:1200px;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:clamp(40px,6vw,100px);align-items:center;background:none;padding:0}
.how-kicker,.quiz-count,.quiz-position{font:12px var(--mono);letter-spacing:.08em;color:var(--machine)}
#how h2{margin:22px 0 28px;font-size:clamp(32px,4vw,56px)}
#how h2 span{color:var(--person)}
#how p{max-width:45ch;font-size:15px;line-height:1.7;margin:0 0 18px}
.quiz-carousel{border:1px solid var(--terminal-line);background:rgba(8,8,8,.94);padding:24px;pointer-events:auto}
.quiz-card{min-height:290px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.quiz-art{min-height:190px;display:grid;place-content:center;text-align:center;white-space:nowrap;font:clamp(19px,2vw,27px)/1.55 var(--mono);letter-spacing:.05em;color:var(--person);background:#111416;border:1px solid #30363a}
.quiz-info h3{font:600 23px var(--mono);letter-spacing:-.06em;margin:15px 0}
#how .quiz-info p{font-size:14px;line-height:1.6;margin:0}
.quiz-controls{display:flex;justify-content:flex-end;align-items:center;gap:18px;border-top:1px solid var(--terminal-line);padding-top:18px}
.quiz-controls button{font:20px var(--mono);color:var(--person);background:none;border:1px solid var(--person);width:42px;height:38px;cursor:pointer}
.quiz-controls button:hover{color:var(--paper);background:var(--person)}
.quiz-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:800px){#how{padding:130px 7vw 90px;min-height:100svh}#how .how-copy{width:100%;margin:0;display:block}#how h2{font-size:clamp(30px,7vw,44px)}#how p{font-size:14px}.quiz-carousel{margin-top:32px;padding:16px}.quiz-card{min-height:210px;gap:16px}.quiz-art{min-height:150px;font-size:16px}.quiz-info h3{font-size:19px}.quiz-controls{padding-top:14px}}
@media(max-width:380px){.quiz-card{grid-template-columns:1fr}.quiz-art{min-height:110px}.quiz-info{padding-bottom:18px}}
/* The carousel contains the real, locally running extension puzzles. */
#how{min-height:1100px}
.quiz-demo-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px;color:var(--muted);font:10px var(--mono);letter-spacing:.08em}
.quiz-demo{display:block;width:100%;height:560px;border:0;background:#101214;color-scheme:dark}
.quiz-controls{margin-top:14px}
@media(max-width:800px){#how{min-height:0}.quiz-demo{height:580px}}
#how{min-height:100svh}
.quiz-demo{height:450px}
@media(max-width:800px){.quiz-demo{height:470px}}

/* The iframe grows with the puzzle so the page owns scrolling. */
.quiz-demo{height:450px;overflow:hidden}

/* The playable puzzle occupies a maze room that travels with the page. */
.quiz-carousel{position:relative;isolation:isolate;border:6px solid var(--maze-edge);background:var(--paper);padding:24px}
.quiz-carousel::before,.quiz-carousel::after{content:"";position:absolute;z-index:2;top:calc(50% - 20px);width:6px;height:40px;background:var(--paper);pointer-events:none}
.quiz-carousel::before{left:-6px}.quiz-carousel::after{right:-6px}
@media(max-width:800px){.quiz-carousel{padding:16px}}