@font-face{font-family:LanternSerif;src:url('./lantern-serif.ttf') format('truetype');font-weight:500;font-display:swap}
:root{color-scheme:light;--ink:#242421;--copper:#825638;--paper:#f3eee6}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper)}
body{min-height:100svh;color:var(--ink);font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--copper);outline-offset:7px}
.skip-link{position:fixed;left:20px;top:-80px;z-index:5;padding:12px;background:var(--paper)}
.skip-link:focus{top:12px}
.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.scene picture>img{width:100%;height:100%;object-fit:cover;object-position:center}
header{position:absolute;z-index:2;top:5.4vh;left:5.65vw}
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;color:var(--copper);font-family:Menlo,Consolas,'Liberation Mono',monospace;font-weight:700;font-variant-numeric:slashed-zero;font-feature-settings:'zero' 1;line-height:1}
.terminal{font-size:clamp(17px,1.8vw,28px);white-space:nowrap;letter-spacing:-.055em;display:flex;align-items:center;gap:.25em}
.prompt{font-size:.85em}
.cursor{display:inline-block;font-size:.95em;line-height:1;animation:blink 1.15s steps(1,end) infinite}
.wordmark{font-size:clamp(30px,3.1vw,48px);letter-spacing:-.06em;margin-top:5px;line-height:1}
.zero{font-size:1.23em}
main{position:absolute;z-index:1;left:5.65vw;top:34.4vh}
h1{font-family:LanternSerif,'Songti SC',serif;font-size:clamp(58px,6.65vw,110px);font-weight:500;line-height:1.4;letter-spacing:.015em;margin:0}
.project-link{display:inline-flex;align-items:center;gap:12px;font-size:clamp(16px,1.43vw,24px);margin-top:5.7vh;border-bottom:1px solid currentColor;padding-bottom:6px;transition:color .2s ease}
.project-link img{width:.8em;height:.8em;transition:transform .2s ease}
.project-link:hover{color:var(--copper)}
.project-link:hover img{transform:translate(2px,-2px)}
.separator{margin:0 4px}
footer{position:fixed;z-index:2;right:4.15vw;bottom:3.8vh;display:flex;align-items:center;gap:22px;color:#777570;font-size:clamp(10px,1vw,15px);white-space:nowrap}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
.petal{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:auto;opacity:0;will-change:transform,opacity;animation:fall var(--duration) linear var(--delay) infinite}
@keyframes blink{0%,48%,100%{opacity:1}49%,99%{opacity:0}}
@keyframes fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}10%{opacity:.65}45%{transform:translate3d(-38px,16vh,0) rotate(110deg);opacity:.65}85%{opacity:.4}100%{transform:translate3d(-100px,43vh,0) rotate(260deg);opacity:0}}
body.is-paused .petal,body.is-paused .cursor{animation-play-state:paused}
@media(min-aspect-ratio:17/10) and (min-width:701px){.scene picture>img{object-fit:cover;object-position:center}main{top:28vh}h1{font-size:min(6.1vw,12vh)}.project-link{margin-top:4vh}footer{bottom:3vh}}
@media(max-width:700px){
 body{min-height:100svh}
 .scene{position:absolute;height:100svh;min-height:720px}
 .scene picture>img{height:66%;width:100%;object-fit:cover;object-position:71% center}
 header{top:26px;left:25px}.terminal{font-size:17px}.wordmark{font-size:30px}
 main{top:57svh;left:7vw}h1{font-size:clamp(38px,10.7vw,64px);line-height:1.3;letter-spacing:0}
 .project-link{font-size:15px;gap:9px;margin-top:24px;padding-bottom:5px}
 footer{position:absolute;right:6vw;left:6vw;top:max(92svh,700px);bottom:auto;justify-content:flex-end;gap:7px;font-size:8px;letter-spacing:-.15px;padding-bottom:18px}
 .petal{max-width:12px}
}
@media(prefers-reduced-motion:reduce){.petal{display:none}.cursor{animation:none}.project-link,.project-link img{transition:none}}

/* Original identity: prominent time, quiet domain signature. */
.terminal{font-size:clamp(26px,2.65vw,42px);letter-spacing:-.04em;gap:.18em}
.wordmark{font-size:clamp(12px,1.05vw,17px);letter-spacing:.32em;margin-top:14px;margin-left:2px}
@media(max-width:700px){.terminal{font-size:27px}.wordmark{font-size:12px;margin-top:9px}}
/* Keep the signature discreet at the lower-right edge. */
@media(min-width:701px){footer{bottom:18px;font-size:12px;gap:18px}}
@media(min-width:701px){.project-link{margin-top:calc(5.7vh + 24px)}}
@media(max-width:700px){.scene picture>img{height:100%;object-position:30% center}}
@media(min-width:701px) and (max-aspect-ratio:17/10){main{top:33vh}h1{font-size:clamp(58px,7.35vw,116px);line-height:1.27}.project-link{margin-top:calc(7.1vh + 24px)}}

.scene picture{display:block;width:100%;height:100%}
@media(max-width:700px){.scene{position:fixed;min-height:0;height:100svh}.scene picture>img{object-position:center;object-fit:cover}main{top:61svh}footer{font-size:9px;letter-spacing:-.2px;right:18px;left:18px;gap:6px;top:auto;bottom:18px;padding:0}.terminal{font-size:25px}}