:root{color-scheme:light;--paper:#f4f0e7;--ink:#354b42;--muted:#607064;--line:#c4cabb}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.75 "Segoe UI",Verdana,sans-serif}
header,main,footer{max-width:1120px;margin:auto;padding:28px 40px}header{display:flex;align-items:baseline;justify-content:space-between;gap:24px}.brand{font:28px/1.2 Georgia,serif;text-decoration:none}nav{display:flex;gap:24px;font-size:14px}nav a{text-decoration:none}nav [aria-current]{text-decoration:underline;text-underline-offset:6px}
a{color:inherit;text-underline-offset:3px}a:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.opening{max-width:720px;margin:50px auto 100px}.eyebrow{font-size:14px;color:var(--muted);margin-bottom:24px}h1{font:64px/1.08 Georgia,serif;letter-spacing:-1.6px;color:#26382e;margin:0 0 32px}.intro{font:22px/1.65 Georgia,serif;max-width:600px}.reading-note{font-size:15px;color:var(--muted);margin-top:26px}
p{margin:0 0 20px}.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:64px;align-items:start;margin:0 0 112px}.step-copy{padding-top:46px}.step:first-child .step-copy{padding-top:0}.step-number{font:22px/1 Georgia,serif;color:#89947d;display:block;margin-bottom:22px}h2{font:32px/1.2 Georgia,serif;font-weight:400;color:#26382e;margin:0 0 26px}.step-copy p{font-size:16px;line-height:1.8}.step-copy p:last-child{margin-bottom:0}
figure{margin:0;min-width:0}figure svg,figure canvas{display:block;width:100%;height:auto;aspect-ratio:3/4;background:#eee7da}.measurements{padding-top:16px}.measurements svg{aspect-ratio:9/5}#measurements-diagram text{font-size:36px}figcaption,.caption{font-size:13px;line-height:1.65;color:var(--muted);margin-top:14px;max-width:520px}
.film-inspiration{margin:100px 0 72px}.film-inspiration>p{max-width:700px;margin-left:auto;margin-right:auto;font-size:16px}.film-inspiration>h2{max-width:700px;margin-left:auto;margin-right:auto}.film-studies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:32px 0 22px;align-items:start}.film-studies img{display:block;width:100%;height:auto}.film-studies figcaption{font-size:13px}.film-inspiration .reference-credit{font-size:12px;color:var(--muted)}@media(max-width:760px){.film-inspiration{margin:56px 0}.film-studies{grid-template-columns:1fr;gap:28px;max-width:499px;margin-left:auto;margin-right:auto}}
.afterword{max-width:700px;margin:0 auto 30px}.afterword>p:first-child{font:21px/1.65 Georgia,serif}.inspiration{font-size:14px;color:var(--muted);margin:28px 0 36px}
details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 0 2px}summary{min-height:52px;padding:13px 0;cursor:pointer;font-size:15px}details p{font-size:15px}pre{overflow:auto;max-width:100%;padding:16px;background:#e9e7dd;font:13px/1.6 Consolas,monospace;tab-size:2}code{font-family:Consolas,monospace;font-size:.91em}h3{font-size:16px;font-weight:600;margin:28px 0 12px}.equation{font:14px/1.8 Consolas,monospace;overflow-wrap:anywhere;margin:20px 0}#growth-diagram{display:block;width:100%;height:auto;margin:24px 0 0}footer{font-size:15px;padding-bottom:60px}
@media(max-width:760px){header,main,footer{padding:22px 24px}header{flex-direction:column;gap:18px}.brand{font-size:27px}.opening{margin:36px 0 66px}h1{font-size:46px;letter-spacing:-1px}.intro{font-size:21px}.step{grid-template-columns:1fr;gap:28px;margin-bottom:72px;max-width:480px;margin-left:auto;margin-right:auto}.step-copy,.step:first-child .step-copy{padding-top:0}.step-number{font-size:20px;margin-bottom:14px}h2{font-size:30px;margin-bottom:20px}.step-copy p{font-size:16px}.measurements{padding-top:0}#measurements-diagram text{font-size:44px}#growth-diagram text{font-size:32px}.afterword>p:first-child{font-size:20px}pre{font-size:12px}.equation{font-size:12px}}
@media(max-width:360px){header,main,footer{padding-left:20px;padding-right:20px}h1{font-size:40px}}

.story-ready{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-areas:"copy frame" "controls frame";column-gap:64px;align-items:start;margin-bottom:64px}
.story-copy{grid-area:copy;min-height:360px;padding-top:36px}.story-copy .step-copy{padding:0}.story-frame{grid-area:frame;width:100%;max-width:480px;justify-self:end;aspect-ratio:3/4;position:relative;background:#eee7da}.story-frame figure{position:absolute;inset:0}.story-frame svg,.story-frame canvas{width:100%;height:100%;aspect-ratio:3/4}.story-frame .measurements{padding:0}.story-frame svg{background:#f5f2e9}.story-frame figcaption{position:absolute;top:100%;left:0;right:0;margin-top:12px;font-size:12px}.story-ready [hidden]{display:none}
.story-controls{grid-area:controls;align-self:end;padding:24px 0 40px}.story-buttons{display:flex;align-items:center;gap:18px}.story-buttons button{font:inherit;font-size:15px;padding:10px 18px;min-height:44px;border:1px solid #9fae9d;border-radius:2px;background:transparent;color:var(--ink);cursor:pointer}.story-buttons button:last-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}.story-buttons button:disabled{opacity:.35;cursor:default}.story-count{font-size:14px;margin:0;min-width:56px;text-align:center;font-variant-numeric:tabular-nums}.story-motion{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:13px;color:var(--muted);min-height:30px}.story-motion input{width:17px;height:17px;accent-color:var(--ink)}button:focus-visible,input:focus-visible,.step-copy h2:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.story-ready+.afterword{margin-top:100px}.opening{margin-top:24px;margin-bottom:48px}h1{font-size:54px}.reading-note{margin-bottom:0}.story-frame #measurements-diagram text{font-size:36px}
@media(max-width:760px){.opening{margin:16px 0 28px}.opening .eyebrow{margin-bottom:14px}h1{font-size:34px;margin-bottom:20px}.intro{font-size:18px}.reading-note{font-size:13px;line-height:1.6;margin-top:18px}.story-ready{grid-template-columns:1fr;grid-template-areas:"frame" "controls" "copy";gap:0;max-width:480px;margin:0 auto 40px}.story-frame{justify-self:center;max-width:400px}.story-frame{margin-bottom:64px}.story-frame figcaption{position:absolute;display:block;font-size:12px}.story-copy{min-height:300px;padding-top:0}.story-controls{padding:22px 0 24px}.story-buttons{justify-content:space-between;gap:12px}.story-motion{margin-top:12px}.story-ready+.afterword{margin-top:0}.story-copy h2{margin-bottom:16px}.story-frame #measurements-diagram text{font-size:44px}}
@media(prefers-reduced-motion:reduce){.story-frame *{animation:none!important;transition:none!important}}