@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;600;700&family=Inter:wght@400;500;600;700&display=swap');
@font-face{font-family:'TWK Lausanne';src:url('assets/fonts/TWKLausanne-400.otf') format('opentype');font-weight:400;font-display:swap}@font-face{font-family:'TWK Lausanne';src:url('assets/fonts/TWKLausanne-700.otf') format('opentype');font-weight:700;font-display:block}
:root{--olive:#5e540e;--paper:#f8f8f4;--solar:#e4f222;--nav:134px;--scale:.5;color:#191919;font-family:Inter,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--nav);scroll-snap-type:none;overflow-x:clip}body{margin:0;background:var(--paper);overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--solar);outline-offset:4px}.skip{position:fixed;top:-100px;left:15px;z-index:100;background:white;padding:14px}.skip:focus{top:10px}
header{position:fixed;inset:0 0 auto;z-index:30;background:rgba(248,248,244,.97);backdrop-filter:blur(18px)}.masthead{height:68px;display:flex;align-items:center;justify-content:space-between;padding:13px 36px 8px}.wordmark img{display:block;width:132px;height:auto}.collection{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font:11px 'IBM Plex Mono',monospace;letter-spacing:1.3px}.header-actions{display:flex;align-items:center;gap:15px}.header-actions button{border:0;background:transparent;color:#62645e;font:11px 'IBM Plex Mono',monospace;padding:7px}.header-actions #reset-collage{border:1px solid #c8cdc4;border-radius:0;color:var(--olive)}#reset-collage:disabled{opacity:.45;cursor:default}nav{display:flex;justify-content:center;gap:8px;overflow:auto;padding:8px 20px 16px;scrollbar-width:none}nav button{white-space:nowrap;border:1px solid #cfd2c9;border-radius:0;background:transparent;padding:10px 20px;font-size:13px;transition:background .2s,color .2s}nav button:hover{background:#ebece5}nav button.selected{background:var(--olive);border-color:var(--olive);color:white}.progress{height:2px;background:#e2e4dd}.progress i{display:block;width:100%;height:100%;background:var(--olive);transform:scaleX(0);transform-origin:left}
#grid{position:fixed;inset:var(--nav) 0 0;z-index:-1;pointer-events:none;background-color:var(--paper);background-image:linear-gradient(to right,#6c6b5c39 1px,transparent 1px),linear-gradient(to bottom,#6c6b5c33 1px,transparent 1px);background-size:calc(154px * var(--scale)) calc(50.2px * var(--scale));background-position:var(--grid-x) var(--grid-y)}#grid::after{content:'';position:absolute;left:var(--spine-x);top:0;bottom:0;width:1px;background-image:repeating-linear-gradient(to bottom,#6c6b5c39 0 6px,transparent 6px 12px);background-position-y:var(--dash-y)}
main{padding-top:var(--nav);overflow-x:clip}.opening{height:calc(100svh - var(--nav) + 32px);min-height:560px}.reduced .opening{height:calc(100svh - var(--nav))}.title-card{height:calc(100svh - var(--nav));background:var(--olive);color:var(--paper);position:relative;display:grid;place-items:center;transform-origin:center;will-change:transform}.title-card h1,.closing h2{font:700 clamp(58px,9vw,142px)/1 'TWK Lausanne',Inter,sans-serif;letter-spacing:-.04em;margin:0}.hero-meta,.hero-foot{position:absolute;left:40px;right:40px;display:flex;justify-content:space-between}.hero-meta{top:28px;font:11px 'IBM Plex Mono',monospace;letter-spacing:1px}.hero-foot{bottom:28px;font:400 14px 'TWK Lausanne',Inter,sans-serif}.hero-foot a{display:flex;align-items:center;gap:22px}.hero-foot a span{font-size:24px}
.chapter{height:calc(1807.2px * var(--scale));min-height:0;position:relative}.chapter-pin{padding-top:calc(100.4px * var(--scale));display:flex;align-items:flex-start;justify-content:center}.frame-shell{width:calc(1920px * var(--scale));height:calc(1512px * var(--scale));position:relative;flex:none}.frame{width:1920px;height:1512px;position:absolute;left:0;top:0;transform:scale(var(--scale));transform-origin:top left;font-family:'IBM Plex Mono',monospace;isolation:isolate;overflow:visible}.panel{position:absolute;background:var(--paper);clip-path:inset(calc(1px / var(--scale)) 0 0 calc(1px / var(--scale)));z-index:7}.title-back{left:190px;top:54.2px;width:1278.2px;height:100.4px}.copy-back{left:190px;top:154.6px;width:1386px;height:401.6px}.frame h2{position:absolute;left:230px;top:81px;margin:0;font-size:44px;line-height:1;font-weight:700;letter-spacing:-.44px;z-index:8}.frame .copy{position:absolute;left:230px;top:193px;width:1332px;margin:0;font-size:43.5px;line-height:1.38;font-weight:300;z-index:8}.spine-dot{position:absolute;left:174px;top:88px;width:32px;height:32px;border-radius:50%;background:var(--solar);z-index:9}.piece,.accent,.label,.code-wall,.floating-text{position:absolute}.piece{z-index:2;translate:var(--drag-x,0px) var(--drag-y,0px);cursor:grab;touch-action:none;user-select:none}.piece img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}.piece.cover img{object-fit:cover}.piece.is-dragging{cursor:grabbing}.accent{background:var(--solar);z-index:1}.accent.olive{background:var(--olive)}.label{z-index:5;padding:8px 18px;font:300 25px/1.15 'IBM Plex Mono',monospace;white-space:nowrap}.label.olive{background:var(--olive);color:white}.label.solar{background:var(--solar);color:#161616}.label.paper{background:var(--paper)}.code-wall{z-index:1;color:#1d1d1d;font:29px/1.43 'IBM Plex Mono',monospace;white-space:pre;overflow:hidden;opacity:.84}.floating-text{font:300 25px 'IBM Plex Mono',monospace;color:#68685f;z-index:2}.circle{border-radius:50%}.scribble{position:absolute;z-index:3;pointer-events:none}.mobile-copy{display:none}
.chapter-index{position:fixed;left:25px;top:55%;display:flex;flex-direction:column;gap:17px;z-index:21}.chapter-index a{width:8px;height:8px;border-radius:50%;background:#a29f85;display:block;transition:transform .2s,background .2s}.chapter-index a.active{background:var(--olive);transform:scale(1.8)}.position{position:fixed;left:38px;right:38px;bottom:19px;z-index:22;display:flex;justify-content:space-between;font:10px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#5b5b43;pointer-events:none}.closing{height:calc(100svh - var(--nav));min-height:560px;background:var(--olive);color:var(--paper);display:grid;place-items:center}.ending-panel{position:relative;width:100%;height:100%;display:grid;place-items:center}.ending-actions{position:absolute;bottom:29px;left:30px;right:30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.ending-actions button{background:transparent;color:var(--paper);border:1px solid #f8f8f488;border-radius:0;padding:12px 17px;font-size:11px;transition:background-color .2s,border-color .2s,color .2s}.ending-actions button:first-child{justify-self:start}.ending-actions button:last-child{justify-self:end}.ending-actions button:hover,.ending-actions button:focus-visible{background:var(--solar);border-color:var(--solar);color:var(--olive)}body.at-end .position,body.at-end .chapter-index{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{border:1px solid #c9c9bd;background:var(--paper);padding:55px 42px 38px;width:min(480px,90vw)}dialog::backdrop{background:#25240ed0;backdrop-filter:blur(7px)}dialog h2{font-size:38px}dialog #close-dialog{position:absolute;right:15px;top:8px;font-size:30px;background:none;border:0}dialog #return-notion{background:var(--olive);color:white;padding:13px 20px;border:0}.eyebrow{font:11px 'IBM Plex Mono',monospace;letter-spacing:1px}
/* Small held-frame movements from the reference film. Only the visible chapter runs. */
.motion-active .float-a{animation:float-a 3.8s steps(1,end) infinite}.motion-active .float-b{animation:float-b 4.6s steps(1,end) infinite}.motion-active .pulse{animation:pulse 4s steps(1,end) infinite}.motion-active .signal-one{animation:signal-one 5.8s steps(1,end) infinite}.motion-active .signal-two{animation:signal-two 5.8s steps(1,end) infinite}.motion-active .lego-drop{animation:lego-drop 4.8s steps(1,end) infinite}.motion-active .mouse-slide{animation:mouse-slide 4s steps(1,end) infinite}@keyframes float-a{0%,100%{transform:translate(0,0) rotate(-.3deg)}35%{transform:translate(11px,-7px) rotate(.2deg)}70%{transform:translate(-5px,3px) rotate(-.1deg)}}@keyframes float-b{0%,100%{transform:translate(0,0)}40%{transform:translate(-12px,8px)}75%{transform:translate(4px,-6px)}}@keyframes pulse{0%,100%{opacity:1}45%{opacity:.45}70%{opacity:1}}@keyframes signal-one{0%,8%,68%,100%{opacity:0}9%,67%{opacity:1}}@keyframes signal-two{0%,29%,94%,100%{opacity:0}30%,93%{opacity:1}}@keyframes lego-drop{0%,15%{transform:translate(0,-70px);opacity:0}16%,100%{transform:translate(0,0);opacity:1}}@keyframes mouse-slide{0%,100%{transform:translateX(0)}30%{transform:translateX(24px)}60%{transform:translateX(-10px)}}body.reduced .float-a,body.reduced .float-b,body.reduced .pulse,body.reduced .signal-one,body.reduced .signal-two,body.reduced .lego-drop,body.reduced .mouse-slide{animation:none;opacity:1;transform:none}
@media(max-width:700px){:root{--nav:111px}.masthead{height:55px;padding:12px 16px 4px}.wordmark img{width:100px}.collection{display:none}.header-actions{gap:4px}.header-actions button{font-size:9px;padding:5px}.header-actions #reset-collage{padding:5px 6px}nav{justify-content:flex-start;padding:8px 14px 11px;gap:5px}nav button{padding:9px 12px;font-size:11px}.hero-meta,.hero-foot{left:20px;right:20px;font-size:9px}.title-card h1,.closing h2{font-size:clamp(58px,16vw,82px)}.opening,.closing{min-height:0}.chapter{height:auto;padding:55px 0 90px}.chapter-pin{padding:0;display:flex;flex-direction:column;align-items:center;gap:22px}.mobile-copy{display:block;width:calc(100% - 74px);font-family:'IBM Plex Mono',monospace}.mobile-copy h2{font-size:20px;line-height:1.25;margin:0 0 13px}.mobile-copy h2::before{content:'';width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--solar);margin-right:9px}.mobile-copy p{font-size:14px;font-weight:300;line-height:1.55;margin:0}.frame-shell{height:calc(1060px * var(--scale));overflow:hidden}.frame{top:calc(-452px * var(--scale))}.frame h2,.frame .copy,.panel,.spine-dot{display:none}.chapter-index{left:10px;gap:13px}.position{left:16px;right:16px;font-size:8px}.ending-actions{left:10px;right:10px;gap:5px}.ending-actions button{font-size:9px;padding:8px 6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.film-portrait{background:url('assets/notion-film-ivan.png') -960px -897px / 1920px 1512px no-repeat;mask-image:radial-gradient(ellipse 63% 83% at 51% 65%,#000 58%,transparent 79%)}
.film-brain img{object-fit:contain}
/* Rebuilt as independent collage layers from the 20–30s reference. */
#taste .frame-shell{top:0}
#taste .frame{overflow:hidden}
#taste .spine-dot{background:#8d8426}
#taste .title-back{left:190px;top:48.2px;width:616px;height:100.4px}
#taste .copy-back{left:190px;top:148.6px;width:1540px;height:301.2px}
#taste .frame h2{left:236px;top:75.2px}
#taste .frame .copy{left:236px;top:184.6px;width:1411px;line-height:1.2;font-size:43.5px}
#taste .spine-dot{top:82.2px}
#taste .taste-rail,#taste .taste-code-window{position:absolute;z-index:1;overflow:hidden;pointer-events:none;color:#686760}
#taste .taste-rail{left:68px;top:0;width:520px;height:405px}
#taste .taste-code-window{left:0;top:405px;width:1920px;height:1107px}
#taste .taste-rail pre,#taste .taste-code-window pre{position:absolute;margin:0;font:300 28px/50.2px 'IBM Plex Mono',monospace;white-space:pre;opacity:.8;will-change:transform}
#taste .taste-rail pre{left:0;top:10px}
#taste .taste-code-window pre{left:70px;top:95px}
#taste .taste-code-line{display:block;width:max-content;height:50.2px;white-space:pre;clip-path:inset(0 100% 0 0)}
#taste.taste-running .taste-code-line{animation:taste-write .28s steps(18,end) var(--line-delay) both}
#taste.taste-running .taste-rail pre{animation:taste-rail-scroll 20s steps(33,end) forwards}
#taste.taste-running .taste-code-window pre{animation:taste-code-scroll 20s steps(33,end) forwards}
@keyframes taste-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes taste-rail-scroll{from{transform:translateY(0)}to{transform:translateY(-1656.6px)}}
@keyframes taste-code-scroll{from{transform:translateY(0)}to{transform:translateY(-1656.6px)}}
#taste .taste-browser{position:absolute;z-index:2;left:806px;top:700.8px;width:770px;height:502px;background:#f5f5f1e8;clip-path:inset(calc(1px / var(--scale)));box-shadow:inset 0 0 0 2px #888982;pointer-events:none;color:#4d4d49;opacity:.76;font:300 20px/1.2 'IBM Plex Mono',monospace}
#taste .taste-browser-bar{height:50.2px;border-bottom:2px solid #a7a8a1;display:flex;align-items:center;gap:26px;padding:0 20px;color:#777872}
#taste .taste-browser-dots{font-size:16px;letter-spacing:2px}
#taste .taste-browser-address{height:30px;min-width:260px;padding:4px 14px;background:#e9e9e5;border:1px solid #c6c7c1;display:flex;align-items:center}
#taste .taste-browser-page{padding:26px 34px}
#taste .taste-browser-heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:19px;border-bottom:2px solid #b7b8b1;font-size:20px}
#taste .taste-browser-heading strong{font-weight:600;font-size:27px;letter-spacing:-1px}
#taste .taste-browser-heading span{font-size:15px}
#taste .taste-browser-content{display:grid;grid-template-columns:1.7fr 1fr;gap:25px;padding-top:23px}
#taste .taste-browser-art{height:320.4px;display:flex;gap:13px}
#taste .taste-browser-art i{display:block;flex:1;background:linear-gradient(148deg,#b4b5af 0 34%,#deded9 34% 52%,#a5a6a0 52% 100%)}
#taste .taste-browser-art i+ i{background:linear-gradient(22deg,#a1a29c 0 40%,#d4d5cf 40% 71%,#bcbdb7 71% 100%)}
#taste .taste-browser-notes{display:flex;flex-direction:column;gap:14px;padding-top:4px}
#taste .taste-browser-notes strong{font-weight:400;font-size:18px}
#taste .taste-browser-notes span{height:10px;background:#c6c7c1}
#taste .taste-browser-notes span:nth-of-type(2){width:85%}
#taste .taste-browser-notes span:nth-of-type(3){width:61%}
#taste .taste-browser-notes small{margin-top:auto;color:#858680;font-size:16px}
#taste .taste-disc{position:absolute;z-index:2;left:1036px;top:1095px;width:770px;height:770px;border-radius:50%;background:var(--olive);clip-path:inset(0 0 303px)}
#taste .taste-ivan{z-index:3}
#taste .taste-mouse{z-index:4}
#taste .taste-mouse img{transform:scaleX(-1)}
#taste.taste-running .taste-mouse{animation:taste-hand-drift 10s ease-in-out infinite;will-change:transform}
@keyframes taste-hand-drift{0%,100%{transform:translate(0,0)}20%{transform:translate(24px,-18px)}42%{transform:translate(52px,-54px)}55%{transform:translate(56px,-58px)}78%{transform:translate(10px,-5px)}}
body.reduced #taste .taste-mouse{animation:none;transform:none}
#taste .taste-chip{position:absolute;z-index:5;width:154px;height:50.2px;padding:calc(3px + 1px / var(--scale)) 11px 3px;background:var(--solar);clip-path:inset(calc(1px / var(--scale)) 0 0 calc(1px / var(--scale)));display:flex;align-items:center;justify-content:center;color:#5e5d4f;font:300 25px/1 'IBM Plex Mono',monospace;white-space:nowrap}
#taste .taste-chip.wide{width:308px}
body.reduced #taste .taste-code-line{clip-path:none}
body.reduced #taste .taste-rail pre,body.reduced #taste .taste-code-window pre{animation:none;transform:none}
/* The third chapter follows the individual layer slots in the Figma frame. */
#lego .frame{overflow:hidden}
#lego .title-back{left:190px;top:49.2px;width:616px;height:100.4px}
#lego .copy-back{left:190px;top:149.6px;width:1540px;height:301.2px}
#lego .frame h2{left:236px;top:77.4px}
#lego .frame .copy{left:236px;top:188.2px;width:1461px;line-height:1.3}
#lego .spine-dot{top:83.4px;background:var(--olive)}
#lego .lego-founders img{object-fit:cover;object-position:center}
#lego .lego-founder-hotspot{position:absolute;display:block;background:transparent;cursor:inherit}
#lego .lego-founder-ivan{left:25px;top:40px;width:585px;height:825px}
#lego .lego-founder-simon{left:620px;top:65px;width:560px;height:640px}
#lego .lego-hand img{object-fit:cover;object-position:center bottom}
#lego .lego-brick-left,#lego .lego-hand{z-index:9}
#lego.motion-active .lego-brick-center{animation:lego-brick-hover 4.8s steps(1,end) infinite}
@keyframes lego-brick-hover{0%,100%{transform:translateY(-12px)}40%{transform:translateY(0)}75%{transform:translate(-4px,8px)}}
/* Kyoto layers follow the Figma frame; the text panels keep the story grid visible. */
#rebuilt .frame{overflow:hidden}
#rebuilt .title-back{left:190px;top:49.2px;width:616px;height:100.4px}
#rebuilt .copy-back{left:190px;top:149.6px;width:1540px;height:301.2px}
#rebuilt .frame h2{left:236px;top:77.4px}
#rebuilt .frame .copy{left:236px;top:188.2px;width:1461px;line-height:1.3}
#rebuilt .spine-dot{top:83.4px;background:var(--olive)}
#rebuilt .rebuilt-code{font-size:28px;line-height:50.2px;color:#686760}
#rebuilt .rebuilt-code-track{position:absolute;left:0;top:10px;margin:0;font:300 28px/50.2px 'IBM Plex Mono',monospace;white-space:pre;will-change:transform}
#rebuilt .taste-code-line{display:block;width:max-content;height:50.2px;white-space:pre;clip-path:inset(0 100% 0 0)}
#rebuilt.rebuilt-running .taste-code-line{animation:taste-write .28s steps(18,end) var(--line-delay) both}
#rebuilt.rebuilt-running .rebuilt-code-track{animation:taste-code-scroll 20s steps(33,end) forwards}
body.reduced #rebuilt .taste-code-line{clip-path:none}
body.reduced #rebuilt .rebuilt-code-track{animation:none;transform:none}
#rebuilt .rebuilt-river img{object-fit:cover;transform:scaleX(-1)}
#rebuilt .rebuilt-pagoda img{object-fit:cover}
#rebuilt .rebuilt-disc{z-index:3}
#rebuilt .rebuilt-gate{z-index:4}
#rebuilt .rebuilt-tower{z-index:9;overflow:hidden}
#rebuilt .rebuilt-tower img{position:absolute;left:-720px;top:-59px;width:1736px;height:1736px;max-width:none;object-fit:fill}
#rebuilt .rebuilt-pin{z-index:8}
#rebuilt .rebuilt-pin img{object-fit:contain}
#rebuilt .rebuilt-marker{z-index:9;pointer-events:none;transform:rotate(-7deg)}
#rebuilt .rebuilt-label{z-index:7;padding:0;display:flex;align-items:center;justify-content:center;font-size:25px;line-height:1;clip-path:inset(calc(1px / var(--scale)) 0 0 calc(1px / var(--scale)))}
#rebuilt .rebuilt-kyoto{z-index:6;padding-left:24px}
#thinking .frame{overflow:visible}
#thinking .title-back{left:190px;top:49.2px;width:616px;height:100.4px}
#thinking .copy-back{left:190px;top:149.6px;width:1540px;height:301.2px}
#thinking .frame h2{left:236px;top:77.4px}
#thinking .audio-toggle,#finance .audio-toggle{display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:50%;background:transparent;color:#1a1919;padding:0;cursor:pointer;transition:background-color .18s ease,transform .18s ease}
#thinking .audio-toggle:hover,#finance .audio-toggle:hover{background:#e9e7d9;transform:scale(1.06)}
#thinking .audio-toggle[aria-pressed="true"],#finance .audio-toggle[aria-pressed="true"]{background:var(--olive)}
#thinking .audio-toggle[aria-pressed="true"] img,#finance .audio-toggle[aria-pressed="true"] img{filter:invert(1)}
#thinking .audio-toggle img,#finance .audio-toggle img{display:block;width:40px;height:40px;pointer-events:none}
#thinking .frame-audio{position:absolute;left:714px;top:69px;width:68px;height:68px;z-index:14}
#finance .frame-audio{position:absolute;left:1040px;top:69px;width:68px;height:68px;z-index:14}
#thinking .mobile-audio,#finance .mobile-audio{display:none}
@media(max-width:700px){#thinking .frame-audio,#finance .frame-audio{display:none}#thinking .mobile-audio,#finance .mobile-audio{display:inline-flex;width:44px;height:44px;vertical-align:middle;margin-bottom:12px}#thinking .mobile-audio img,#finance .mobile-audio img{width:24px;height:24px}}
#thinking .frame .copy{left:236px;top:188.2px;width:1461px;line-height:1.3}
#thinking .spine-dot{top:83.4px;background:var(--olive)}
#thinking .thinking-legal{z-index:1;pointer-events:none;cursor:auto}
#thinking .thinking-legal img{object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.12);opacity:.65}
#thinking .thinking-lines{position:absolute;inset:0;width:1920px;height:1512px;fill:none;stroke:#242424;stroke-width:2;z-index:3;pointer-events:none}
#thinking .thinking-workspace,#thinking .thinking-menu{z-index:4}
#thinking .thinking-workspace::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.05);border-radius:12px;pointer-events:none}
#thinking .thinking-menu img{object-fit:fill}
#thinking .thinking-tag{z-index:5;padding:0;display:flex;align-items:center;justify-content:center;font-size:25px;line-height:1;clip-path:inset(calc(1px / var(--scale)) 0 0 calc(1px / var(--scale)))}
#thinking .thinking-policy{z-index:2;color:#62625e;background:var(--paper);display:flex;align-items:center;justify-content:center;clip-path:inset(calc(1px / var(--scale)) 0 0 calc(1px / var(--scale)))}
#thinking .thinking-months{position:absolute;left:806px;top:1411.6px;width:1078px;display:grid;grid-template-columns:repeat(7,1fr);text-align:center;color:#68685f;font:300 25px/1.2 'IBM Plex Mono',monospace;z-index:4}
#thinking .thinking-signal{z-index:5}
@media(min-width:701px){#promise .chapter-pin{padding-top:calc(109.8px * var(--scale))}}
/* The first chapter follows the source film's 154 × 50.2 grid. */
#promise .spine-dot{background:var(--olive)}
#promise .title-back{top:38.8px;width:924px}
#promise .copy-back{top:139.2px;height:351.4px}
#promise .frame h2{top:65.6px}
#promise .frame .copy{top:177.6px}

/* The final chapter uses the same 154 × 50.2 grid as the preceding chapters. */
#finance .title-back{left:190px;top:49.2px;width:1078px;height:100.4px}
#finance .copy-back{left:190px;top:149.6px;width:1386px;height:251px}
#finance .frame h2{left:236px;top:77.4px}
#finance .frame .copy{left:236px;top:185px;width:1294px;font-size:43.5px;line-height:1.2}
#finance .spine-dot{top:83.4px;background:var(--olive)}
#finance .finance-account{z-index:1;opacity:1;overflow:hidden}
#finance .finance-account img{position:absolute;left:-113px;top:0;width:1710px;height:1154.6px;max-width:none;object-fit:cover;object-position:left top;filter:grayscale(1) contrast(.35) brightness(1.52)}
#finance .finance-phone img{position:absolute;left:0;top:-151px;width:1417px;height:1205px;max-width:none;object-fit:fill;filter:grayscale(1)}
#finance .finance-receipt{z-index:3;overflow:hidden}
#finance .finance-receipt img{position:absolute;left:-155px;top:-124px;width:675px;height:1024px;max-width:none;object-fit:fill}
#finance .finance-phone{z-index:5}
#finance .finance-cursor{z-index:4}
#finance .finance-cursor img{width:98px;height:96px;object-fit:contain}
#finance .finance-cursor span{position:absolute;left:52px;top:66px;min-width:94px;height:39px;box-sizing:border-box;padding:0 12px;border-radius:20px;background:#1c1b17;color:#fff;display:flex;align-items:center;justify-content:center;font:400 22px/1 Arial,sans-serif}
#finance .finance-lines{position:absolute;inset:0;width:1920px;height:1512px;fill:none;stroke:#242424;stroke-width:2;z-index:2;pointer-events:none}
#finance .finance-tag{z-index:4;box-sizing:border-box;padding:0 12px;display:flex;align-items:center;justify-content:center;font-size:25px;line-height:1;clip-path:inset(calc(1px / var(--scale)) 0 0 calc(1px / var(--scale)))}
#finance .finance-invoice{z-index:2}
#finance .finance-invoice img{object-fit:fill}
#finance .finance-number{position:absolute;width:154px;height:154px;border-radius:50%;background:var(--solar);overflow:hidden;color:#171717;text-align:center;font:300 61px/.92 'IBM Plex Mono',monospace;z-index:3;pointer-events:none}
#finance .finance-number-track{transform:translateY(-24px)}
#finance .finance-number-line{height:56px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
#finance .finance-number-line span{display:block}
#finance .finance-number-a{left:267px;top:852px}
#finance .finance-number-b{left:421px;top:1103px}
#finance .finance-number-c{left:1125px;top:433px}
#finance .finance-progress{position:absolute;width:308px;height:50.2px;color:#777;font:300 25px/1 'IBM Plex Mono',monospace;z-index:3}
#finance .finance-progress span{position:absolute;left:0;top:11px}
#finance .finance-progress::before{content:'';position:absolute;left:0;right:0;bottom:0;height:10px;background:#ededed}
#finance .finance-progress i{position:absolute;left:0;bottom:0;height:10px;background:var(--olive);display:block;transform-origin:left center}
#finance .finance-progress-one{left:344px;top:1358.2px}
#finance .finance-progress-one i{width:15%}
#finance .finance-progress-two{left:190px;top:1408.4px}
#finance .finance-progress-two i{width:85%}
#finance .finance-generating{position:absolute;left:1176px;top:1010px;width:489px;height:258px;box-sizing:border-box;border-radius:15px;background:var(--olive);color:white;display:flex;align-items:center;justify-content:center;gap:10px;font:400 25px/1.15 'IBM Plex Mono',monospace;z-index:6;pointer-events:none}
#finance .finance-spinner{width:26.5px;height:26.5px;object-fit:contain;display:block;flex:none}
#finance.motion-active .finance-number-track{animation:finance-count 7s linear infinite}
#finance.motion-active .finance-number-line span{animation:finance-sway 3.5s ease-in-out infinite alternate}
#finance.motion-active .finance-number-line.reverse span{animation-direction:alternate-reverse}
#finance.motion-active .finance-cursor{animation:finance-cursor 6s ease-in-out infinite}
#finance.motion-active .finance-receipt{animation:finance-receipt 6s steps(1,end) infinite}
#finance.motion-active .finance-progress i{animation:finance-fill 6s ease-in-out infinite}
#finance.motion-active .finance-spinner{animation:finance-spin 2s linear infinite}
@keyframes finance-count{from{transform:translateY(-24px)}to{transform:translateY(calc(-24px - var(--finance-loop)))}}
@keyframes finance-sway{from{transform:translateX(-16px)}to{transform:translateX(16px)}}
@keyframes finance-cursor{0%,100%{transform:translate(0,0)}50%{transform:translate(62px,-30px)}}
@keyframes finance-receipt{0%,100%{transform:translateY(0)}25%{transform:translateY(8px)}50%{transform:translateY(17px)}75%{transform:translateY(9px)}}
@keyframes finance-fill{0%{transform:scaleX(.16)}65%,100%{transform:scaleX(1)}}
@keyframes finance-spin{to{transform:rotate(360deg)}}
body.reduced #finance .finance-number-track,body.reduced #finance .finance-number-line span,body.reduced #finance .finance-cursor,body.reduced #finance .finance-receipt,body.reduced #finance .finance-progress i,body.reduced #finance .finance-spinner{animation:none}
#promise .spine-dot{top:72.6px}
#promise .promise-portrait{z-index:3}
#promise .promise-portrait img{object-fit:contain;object-position:right bottom}
#promise .promise-face{z-index:1;overflow:hidden}
#promise .promise-face img{height:566px;position:relative;top:-11.4px}
#promise .promise-handwriting img{filter:url(#promise-paper-warp)}
#promise .promise-seated img{object-fit:contain}
.captioned-image:focus-visible{outline:3px solid var(--olive);outline-offset:5px}
.image-caption{position:fixed;z-index:40;width:max-content;max-width:min(260px,calc(100vw - 24px));padding:14px;background:var(--olive);color:#fff;font:14px/1.45 'IBM Plex Mono',monospace;letter-spacing:.01em;white-space:pre-line;overflow-wrap:anywhere;box-shadow:0 8px 24px #29230026;pointer-events:none}
.image-caption em{font-style:italic}
.image-caption[hidden]{display:none}
#promise .promise-archive{position:absolute;left:498px;top:540.8px;width:770px;height:251px;z-index:1;background:var(--paper);clip-path:inset(calc(1px / var(--scale)) 0 0 calc(1px / var(--scale)));overflow:hidden}
#promise .promise-archive-track{animation:archive-loop 18s linear infinite;animation-play-state:paused;will-change:transform}
#promise .promise-archive-page{box-sizing:border-box;margin:0;padding:9px 20px 16px;color:#8d8d88;font:24px/1.32 'IBM Plex Mono',monospace;letter-spacing:.1px;white-space:pre}
#promise.motion-active .promise-archive-track{animation-play-state:running}
#promise .promise-notations{position:absolute;inset:0;width:1920px;height:1512px;z-index:2;pointer-events:none}
@keyframes archive-loop{from{transform:translateY(0)}to{transform:translateY(-50%)}}
body.reduced #promise .promise-archive-track{animation:none;transform:none}
body.reduced #promise .promise-handwriting img{filter:none}
/* White page and neutral-panel preview. */
:root{--paper:#fff}
header{background:#fff}
.ending-actions button{border-color:#ffffff88}
/* Keep the olive spine dashed by covering the coincident solid grid column. */
#grid::before{content:'';position:absolute;left:calc(var(--spine-x) - .5px);top:0;bottom:0;width:2px;background:var(--paper)}

/* The closing card enters with the page and expands like the intro in reverse. */
.closing{display:block;position:relative;height:calc(100svh - var(--nav));min-height:0;padding:0;background:transparent;scroll-snap-align:none}
.ending-stage{position:relative;width:100%;height:100%;z-index:19;visibility:hidden;pointer-events:none;overflow:hidden}
.ending-stage.visible{visibility:visible}
.ending-panel{position:absolute;inset:0;width:auto;height:auto;background:var(--olive);color:var(--paper);transform-origin:center;will-change:transform}
.ending-actions{pointer-events:auto}
.ending-actions[hidden]{display:none}

/* Keep the founders’ designed crop attached to their draggable layer. */
#lego .lego-founders{clip-path:inset(0 0 78px 0)}

/* Preserve the river crop independently of the frame while dragging. */
#rebuilt .rebuilt-river{clip-path:inset(0 0 190px 49px)}