@font-face{font-family:Fraunces;font-style:italic;font-weight:300 700;font-display:swap;src:url(/fonts/fraunces-italic-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:Fraunces;font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fraunces-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/ibm-plex-mono-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:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-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}@property --bg{syntax:"*";inherits:false;initial-value:#efe9dc}:root{--bg:#efe9dc;--card:#f8f4ea;--ink:#1c1a17;--muted:#6d665a;--accent:#e2502b;--tint:#f4d2c3;--grain-op:.11;--grain-blend:multiply}:root[data-theme=dark]{--bg:#151412;--card:#1f1d1a;--ink:#efe8d8;--muted:#9a917f;--accent:#ff7a4d;--tint:#4a2a1f;--grain-op:.07;--grain-blend:screen}body,.paper,#tipSvg,#e1,#e2,#tBlob.lens #bBody{--bg:#efe9dc}:root[data-theme=dark] body,:root[data-theme=dark] .paper,:root[data-theme=dark] #tipSvg,:root[data-theme=dark] #e1,:root[data-theme=dark] #e2,:root[data-theme=dark] #tBlob.lens #bBody{--bg:#151412}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#151412;--card:#1f1d1a;--ink:#efe8d8;--muted:#9a917f;--accent:#ff7a4d;--tint:#4a2a1f;--grain-op:.07;--grain-blend:screen}:root:not([data-theme=light]) body,:root:not([data-theme=light]) .paper,:root:not([data-theme=light]) #tipSvg,:root:not([data-theme=light]) #e1,:root:not([data-theme=light]) #e2,:root:not([data-theme=light]) #tBlob.lens #bBody{--bg:#151412}}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);transition:background .4s,color .4s}body{font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden}.mono{font-family:IBM Plex Mono,monospace;font-variation-settings:normal}.grain{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);background-size:220px 220px}header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;z-index:40;font-size:13px}header nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:flex-end}header a,header button{color:var(--ink);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:0;border-bottom:1px solid transparent}header a:hover,header button:hover,header button.on{border-bottom-color:var(--ink)}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}header .tips{color:var(--muted)}svg.line{position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible;pointer-events:none}svg path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.intro,.scene,.outro{position:relative;z-index:1}.intro{height:210vh}.hero{height:100vh;display:flex;flex-direction:column;justify-content:flex-start;padding:17vh 8vw 0}.hero h1{font-size:clamp(56px,11vw,150px);font-weight:400;line-height:.9;margin:0;letter-spacing:-.02em}.hero h1 span{display:inline-block}.hero p{max-width:30ch;font-size:clamp(18px,2vw,24px);line-height:1.35;margin:42px 0 0;color:var(--muted)}.hero .hint{position:absolute;top:calc(100vh - 44px);left:8vw;font-size:12px;color:var(--muted)}.quote{position:absolute;top:128vh;left:8vw;font-size:clamp(28px,4.4vw,56px);font-style:italic;font-weight:300;max-width:14ch;line-height:1.05}.scene{height:500vh}.scene.short{height:300vh}.stage{position:sticky;top:0;height:100vh;overflow:hidden}.paper{position:absolute;background:color-mix(in srgb,var(--bg) 86%,transparent);border-radius:4px;opacity:0}.ink{position:absolute;background:var(--card);border-radius:6px;clip-path:circle(0% at 50% 45%);overflow:hidden}.ink .rep{position:absolute;top:0;right:0;bottom:0;left:0;padding:22px 22px 20px;display:flex;flex-direction:column;gap:9px;opacity:0;transition:opacity .35s}.rep h2{margin:0;font-size:30px;line-height:1.05;font-weight:450}.rep .desc{margin:0;font-size:12.5px;line-height:19px;color:var(--muted)}.rep .stack{margin:0;font-size:11px;color:var(--accent)}.rep ul{list-style:none;margin:2px 0 0;padding:0;font-size:12px}.rep li{padding:5px 0;border-top:1px dashed color-mix(in srgb,var(--muted) 45%,transparent)}.rep li:before{content:"→ ";color:var(--accent)}.rep li a{color:inherit}.rep li .sub{display:block;color:var(--muted);font-size:10.5px;padding-left:1.4em}.stage svg .lv-card{fill:var(--card);stroke:var(--accent);stroke-width:1.3}.stage svg .lv-muted{font-family:IBM Plex Mono,monospace;font-size:10px;fill:var(--muted)}.stage svg .card{transition:opacity .35s}.rep ul{min-height:0;overflow:hidden;flex:0 1 auto}.rep .btns{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}.rep .btn{background:var(--accent);color:#fff;border-radius:20px;padding:9px 16px;font-size:12.5px;text-decoration:none}.rep .btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.4px var(--ink)}.stage svg.line{z-index:2}.stage svg path.ghost{stroke:none}.stage svg path.hot{stroke:var(--accent)}.stage svg text.issue,.stage svg text.note{font-family:IBM Plex Mono,monospace;font-size:11px;opacity:0;transition:opacity .3s}.stage svg text.issue{fill:var(--accent)}.stage svg text.note{fill:var(--muted)}.stage svg .lv-line{stroke:var(--ink);stroke-width:1.6;fill:none}.stage svg .lv-acc{stroke:var(--accent);stroke-width:2;fill:none}.stage svg .lv-dot{fill:var(--accent);stroke:none}.stage svg .lv-fill,.stage svg .lv-fillp{fill:var(--ink);stroke:none}.stage svg .lv-bub{fill:var(--card);stroke:var(--ink);stroke-width:1.1}.stage svg .lv-bubacc{fill:var(--tint);stroke:var(--accent);stroke-width:1.3}.stage svg .lv-text{font-family:IBM Plex Mono,monospace;font-size:10.5px;fill:var(--ink)}.stage svg .lv-acctext{font-family:IBM Plex Mono,monospace;font-size:11px;fill:var(--accent)}.stage svg .lv-mark{font-family:IBM Plex Mono,monospace;font-size:13px;fill:var(--accent)}.stage svg .lv-note{font-size:17px;fill:var(--accent)}.stage svg .lv-flag{fill:var(--accent);stroke:none}.stage svg .lv-page{fill:var(--card);stroke:var(--ink);stroke-width:1.4}.stage svg .lv-stamp{fill:none;stroke:var(--accent);stroke-width:1.6}.stage svg .stamp{transition:opacity .3s}.caption{position:absolute;z-index:3;font-size:12px;color:var(--muted);text-align:right}.caption b{color:var(--accent);font-weight:500}.outro{height:130vh}.outro .end{position:absolute;top:42vh;left:0;right:0;text-align:center;padding:0 24px}.outro .end p{margin:0}.outro .big{font-size:clamp(28px,4vw,52px);font-style:italic;font-weight:300}.outro .links{margin-top:16px!important;font-size:13px}.outro .links a{color:var(--accent)}.outro .plist{list-style:none;padding:0;margin:34px auto 0;max-width:420px;text-align:left;font-size:12.5px}.outro .plist li{padding:7px 0;border-top:1px dashed color-mix(in srgb,var(--muted) 45%,transparent);display:flex;justify-content:space-between;gap:12px}.outro .plist a{color:var(--ink)}.outro .plist span{color:var(--muted)}#sceneCv{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.8}#tipSvg{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:45;overflow:visible;transition:opacity .2s;opacity:0}#tipSvg #bHandle{stroke-width:3.4}#bBody{fill:var(--ink)}#e1,#e2{fill:var(--bg)}#tBlob.lens #bBody{fill:var(--bg);stroke:var(--ink);stroke-width:2.4}#tBlob.lens #e1,#tBlob.lens #e2{fill:var(--ink)}@media (max-width:760px){.rep h2{font-size:22px}.rep .desc{font-size:11px;line-height:16px}.rep ul{font-size:11px}.rep li{padding:3px 0}.ink .rep{padding:14px;gap:6px}.rep .btn{padding:7px 12px}header{padding:12px 14px;font-size:11px}header nav{gap:10px}}
