@font-face{font-family:Literata;src:url(/fonts/literata-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:Literata;src:url(/fonts/literata-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plexmono-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:block}

:root{--bg:#1A2344;--red:#C4524E;--ink:#EDE6DA;--mute:#8590B8;--dim:rgba(237,230,218,.56);--e:cubic-bezier(.4,0,.2,1);--lh:1.62}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font:400 clamp(17px,1.25vw,21px)/var(--lh) Literata,Georgia,serif;font-kerning:normal;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color 1.2s var(--e)}
body.off{background:#050506}
main{display:block}
p{margin:0}
::selection{background:var(--red);color:var(--ink)}
a,button{touch-action:manipulation}

.corner{position:fixed;top:18px;left:22px;z-index:10;font-size:14px;line-height:1;letter-spacing:.02em;color:var(--mute);text-decoration:none;background:var(--bg);box-shadow:0 0 12px 9px var(--bg);transition:color .25s var(--e)}
.corner:hover,.corner:focus-visible{color:var(--ink)}
.corner:focus-visible{outline:1px solid currentColor;outline-offset:5px}

.stage{position:fixed;inset:0;display:grid;place-items:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stage>*{grid-area:1/1}
.mono{display:flex;gap:.14em;font:400 clamp(120px,15vw,230px)/1 Literata,serif;color:var(--red);perspective:1100px;cursor:pointer;opacity:0;transition:opacity .9s var(--e)}
.ready .mono,.mono.still{opacity:1}
.mono.still{cursor:default}
.mono:focus{outline:none}
.L1,.L2{display:block;will-change:transform,opacity}
.L1{transform-origin:0 50%}
.L2{transform-origin:100% 50%}
.L2>span{display:block;transform:scaleX(-1)}
.word{display:block;width:clamp(260px,40vw,660px);max-width:calc(100vw - 48px);height:auto;overflow:visible;opacity:0;pointer-events:none}
.word text{font-family:Literata,serif;font-weight:400;font-size:1000px;fill:var(--red)}
.logo{position:relative;pointer-events:none}
.tagline{position:absolute;top:100%;left:50%;margin-top:.9em;transform:translateX(-50%);font:italic 400 clamp(13px,1.05vw,17px)/1.4 Literata,Georgia,serif;color:rgba(237,230,218,.56);white-space:nowrap;opacity:0}
.word .ghost{fill:transparent}
.word path{fill:var(--red)}

.intro{padding:16vh 24px 20vh;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.intro-col{width:max-content;max-width:100%;margin:0 auto}
.intro-text{padding-bottom:.3em;--y:0px;--f:72px;-webkit-mask-image:linear-gradient(180deg,#000 calc(var(--y) - var(--f)),transparent var(--y));mask-image:linear-gradient(180deg,#000 calc(var(--y) - var(--f)),transparent var(--y))}
.intro-text p,.soul-text p,.letter-text p{min-height:calc(var(--lh) * 1em);padding-left:1em;text-indent:-1em;text-wrap:pretty}
.choices{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3em 3em;margin-top:2.2em;color:var(--red);opacity:0}
.choices span{white-space:nowrap}
.choices span:last-child{margin-left:auto}

.ego{position:fixed;inset:0;overflow:hidden;font:400 clamp(14px,1.08vw,17px)/1.65 "IBM Plex Mono",ui-monospace,monospace}
.ego-block{position:absolute;top:50%;left:clamp(20px,7.8vw,160px);right:clamp(20px,7.8vw,160px);transition:transform .5s var(--e)}
.ego-block p{min-height:1.65em;padding-left:2ch;text-indent:-2ch}
.ego .q{font-style:italic}
.ego .src{color:var(--dim)}
.cursor{display:inline-block;width:.6em;height:1.2em;margin-left:1px;vertical-align:-.24em;background:var(--ink)}
.cursor.blink{animation:blink 1.06s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

.enter-row{opacity:0}
.ego .enter-row{margin-top:1.65em}
.enter{display:inline;padding:0;border:0;background:none;font:inherit;color:var(--red);text-decoration:none;cursor:pointer;transition:color .25s var(--e)}
.enter:hover{color:#D86A65}
.enter:focus{outline:none}
.enter:focus-visible{outline:1px solid var(--red);outline-offset:5px}

.dark{position:fixed;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font:400 clamp(14px,1.08vw,17px)/1.95 "IBM Plex Mono",ui-monospace,monospace;color:var(--dim);cursor:default;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dark p{opacity:0}

.soul{--lh:1.68;padding:15vh 24px 22vh max(24px,10vw);line-height:var(--lh)}
.soul-text p{width:max-content;max-width:100%;padding-right:.4em;-webkit-mask-image:linear-gradient(transparent,transparent);mask-image:linear-gradient(transparent,transparent)}
.soul .q{font-style:italic}
.soul .src{color:var(--dim);font-size:.86em;min-height:calc(var(--lh) * 1em / .86)}
.soul .enter-row{margin-top:calc(var(--lh) * 1em)}

.letter{display:flex;flex-direction:column;align-items:center;min-height:100dvh;padding:9vh 24px 14vh}
.letter-fig{width:min(41vh,509px,100%);margin:0;opacity:0}
.letter-fig img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 26px 70px rgba(6,9,22,.6)}
.letter-text{max-width:100%;margin-top:2.6em;opacity:0}
.letter-text .sum{padding-left:0;text-indent:0;font:400 .72em/1.7 "IBM Plex Mono",ui-monospace,monospace}
.sum-label{display:block;color:var(--dim);white-space:pre-wrap}
.sum-hash{display:block;font:inherit;color:var(--ink);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}

.doc{max-width:40rem;margin:0 auto;padding:15vh 24px 14vh;line-height:1.7}
.doc h1{margin:0 0 1.4em;font-size:1.9em;font-weight:400;line-height:1.2;color:var(--red)}
.doc h2{margin:2.2em 0 .5em;font-size:1em;font-weight:400;font-style:italic}
.doc p{margin:0 0 .2em}
.doc .gap{margin-top:2.4em;color:var(--dim)}
.doc a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--mute);text-underline-offset:.18em}
.doc a:hover{text-decoration-color:var(--ink)}

.lost{position:fixed;inset:0;display:grid;place-items:center}

@media (hover:none) and (pointer:coarse){
body::before{content:"";position:fixed;top:0;left:0;right:0;z-index:9;height:58px;background:linear-gradient(var(--bg) 66%,rgba(26,35,68,0));pointer-events:none}
body.off::before{display:none}
.corner{top:10px;left:10px;padding:8px 12px;font-size:15px;background:none;box-shadow:none}
.word{max-width:calc(100vw - 40px)}
.tagline{width:max-content;max-width:calc(100vw - 40px);white-space:normal;text-align:center}
.intro{min-height:100dvh;padding-left:20px;padding-right:20px;touch-action:pan-y pinch-zoom}
.choices span{margin:-.5em 0;padding:.5em 0;cursor:pointer;touch-action:manipulation}
.ego,.dark{font-size:16px}
.soul{padding-left:max(20px,10vw);padding-right:20px}
.soul .src{font-size:16px}
.letter{padding-left:20px;padding-right:20px}
.letter-text .sum{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important;animation:none!important}
}