:root{color-scheme:dark;--green:#082b24;--white:#fffdf6}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:var(--green);color:var(--white);font-family:Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}
#story{height:100%;height:100svh;position:relative;isolation:isolate}
.scene{z-index:1;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .7s}
.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
#words-wrap{width:min(880px,calc(100% - 80px));transform-origin:18% 10%;will-change:transform,opacity}
#words{margin:0;text-align:center;font-size:clamp(32px,5.4vw,66px);line-height:1.32;font-weight:400;letter-spacing:-.035em;white-space:pre-wrap;overflow-wrap:anywhere}
.typing:after{content:'';display:inline-block;vertical-align:-.08em;width:2px;height:.86em;margin-left:7px;background:var(--white);animation:blink 1s steps(1) infinite}
.typing.finished:after{display:none}
#words-scene.overflowing{align-items:flex-start;padding-top:clamp(110px,20vh,200px)}
#words-scene.overflowing #words{text-align:left}
#love-scene{align-items:flex-start;padding:clamp(24px,5svh,48px) 24px}
#love-letter{width:min(800px,100%);max-height:100%;overflow:auto;scrollbar-width:none}
#love-letter::-webkit-scrollbar{display:none}
#love-text{margin:0;font-size:clamp(18px,min(3vw,3.8svh),30px);line-height:1.5;letter-spacing:-.015em;white-space:pre-wrap;overflow-wrap:break-word}
#eigen-scene{padding:clamp(24px,5svh,48px) 24px}
#eigen-content{width:min(850px,100%);max-height:100%;overflow:auto;scrollbar-width:none;text-align:center}
#eigen-content::-webkit-scrollbar{display:none}
#eigen-question{margin:0 0 32px;font-size:clamp(24px,4.5vw,42px);font-weight:400;line-height:1.25;min-height:1.25em}
.eigen-equation{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(12px,3vw,28px);font-size:clamp(18px,3.8vw,28px);min-height:3em;margin-bottom:28px}
#eigen-matrix{display:grid;grid-template-columns:repeat(2,1em);gap:.2em .4em;padding:.15em .5em;position:relative;line-height:1.3}
#eigen-matrix:before,#eigen-matrix:after{content:'';position:absolute;top:0;bottom:0;width:.38em;border:1.5px solid var(--white);border-radius:50%}
#eigen-matrix:before{left:0;border-right:0}
#eigen-matrix:after{right:0;border-left:0}
.matrix-cell{min-height:1.3em}
#heart-scene{flex-direction:column;gap:clamp(28px,6vh,56px);padding:24px}
.heart-equation{margin:0;font-size:clamp(16px,4.8vw,34px);line-height:1.5;white-space:nowrap;min-height:1.5em;opacity:1}
.heart-equation sup{font-size:.65em;line-height:0;vertical-align:super}
.big-heart{width:clamp(200px,32vw,320px);max-width:75vw;max-height:48svh;overflow:visible}
.big-heart path{stroke:var(--white);stroke-width:.015;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.draw-heart .big-heart path{animation:draw 3s ease .25s forwards}
.moon-composition{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
#anniversary{position:absolute;bottom:calc(100% + 28px);width:100%;transition:opacity 1s,transform 1s}
.eyebrow{font-size:clamp(14px,1.8vw,18px);font-style:normal;margin:0 0 14px;color:#ffffff;min-height:25px}
h1{font-size:clamp(46px,7vw,80px);font-weight:400;letter-spacing:-.04em;margin:0;min-height:1.2em}
#moon-window{width:clamp(200px,29vw,320px);height:clamp(220px,31vw,340px);position:relative;overflow:visible;margin-top:0}
#moon{width:90%;aspect-ratio:1;position:absolute;left:5%;top:14px;transform:translateX(110vw);opacity:0;border-radius:50%;overflow:hidden;will-change:transform,opacity}
#moon img{position:absolute;width:120.6%;height:auto;max-width:none;left:-10.3%;top:-8.4%;display:block;filter:sepia(.38) saturate(.8) brightness(1.3) contrast(1.03)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.no-script{position:fixed;inset:0;display:grid;place-content:center;text-align:center;background:var(--green);font-size:clamp(24px,5vw,44px);padding:28px;line-height:1.5;z-index:10}
@keyframes blink{50%{opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@media(max-width:600px){#words-wrap{width:calc(100% - 56px)}#words-scene.overflowing{padding-top:130px}#moon-window{margin-top:0}}
@media(max-height:550px){#moon-window{width:150px;height:160px;margin-top:0}h1{font-size:38px}#anniversary{bottom:calc(100% + 12px)}#words-scene.overflowing{padding-top:75px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.typing:after{animation:none}}

#terminal-scene{padding:clamp(24px,6vh,64px) clamp(20px,6vw,80px);align-items:stretch}
#terminal-screen{width:min(960px,100%);height:100%;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:clamp(13px,2.1vw,20px);line-height:1.65;text-align:left}
#terminal-screen pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;letter-spacing:0}
#terminal-command{padding-bottom:1.3em}
#terminal-screen #terminal-error:not(:empty){margin-top:1.2em;padding-bottom:.3em}
#terminal-screen .typing:after{width:.55em;height:1em;margin-left:3px;vertical-align:-.16em}

.photon-composition{width:min(380px,calc(100% - 64px));position:relative}
#photon-equation{position:absolute;bottom:calc(100% + 26px);width:100%;margin:0;text-align:center;font-size:clamp(30px,5vw,46px);font-style:italic;line-height:1.3;min-height:1.3em}
#photon-wave{display:block;width:100%;height:auto;overflow:visible}
#photon-wave-path{stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#photon-message{position:absolute;top:calc(100% + 28px);left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 48px));margin:0;text-align:center;font-size:clamp(24px,4vw,34px);line-height:1.4;min-height:1.4em}