@font-face{font-display:swap;font-family:"Caveat";font-style:normal;font-weight:normal;src:url("/static/font/Caveat.ttf") format("truetype")}@font-face{font-display:swap;font-family:"Playwrite FR Trad";font-style:normal;font-weight:normal;src:url("/static/font/PlaywriteFRTrad-Light.ttf") format("truetype")}@font-face{font-display:swap;font-family:"Strichpunkt Sans";font-style:normal;font-weight:normal;src:url("/static/font/StrichpunktSans_Expanded-Regular.ttf") format("truetype")}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;color:#1a1a1a;background:#ffffff}#hero{display:flex;flex-direction:row;height:100dvh;overflow:hidden;position:relative}#scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:rgba(0,0,0,0.65);animation:hint-bounce 1.8s ease-in-out infinite;transition:opacity 0.6s ease;pointer-events:none;user-select:none}#scroll-hint svg{width:clamp(30px, 3vw, 40px);height:clamp(30px, 3vw, 40px);display:block}#scroll-hint.hidden{opacity:0}@keyframes hint-bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}#left-panel{width:60%;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:60px;border-right:1px solid rgba(0,0,0,0.06)}#left-panel h1{font-family:"Caveat", serif;font-weight:300;font-size:clamp(14px, 2.2vw, 42px);line-height:2.4;text-align:center;color:#444;user-select:none}#right-panel{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:60px 60px 60px 160px;position:relative;overflow:hidden}#stage{width:100%;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}#grid{--cell: clamp(14px, 1.7vw, 20px);display:grid;gap:clamp(3px, 0.5vw, 5px);grid-auto-rows:var(--cell);width:fit-content;margin:0 auto}.cell{width:var(--cell);height:var(--cell);background:transparent;opacity:0.85;border-radius:1px;display:flex;align-items:center;justify-content:center;line-height:1;font-size:calc(var(--cell) * 0.78);overflow:hidden;transition:opacity .25s ease, background .25s ease}.cell.lived{opacity:1}.cell.now{opacity:1;font-size:calc(var(--cell) * 0.9)}@keyframes now-shake{0%{transform:translateX(0) rotate(0deg)}15%{transform:translateX(-3px) rotate(-6deg)}35%{transform:translateX(3px) rotate(6deg)}55%{transform:translateX(-2px) rotate(-4deg)}75%{transform:translateX(2px) rotate(4deg)}90%{transform:translateX(-1px) rotate(-2deg)}100%{transform:translateX(0) rotate(0deg)}}.cell.now-shake{animation:now-shake 0.45s ease-in-out}@keyframes now-pop{0%{transform:scale(1) rotate(0deg)}40%{transform:scale(1.6) rotate(10deg)}100%{transform:scale(1) rotate(0deg)}}.cell.now-reveal{animation:now-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards}#ruler{position:absolute;pointer-events:none;width:0}#ruler::after{content:'';position:absolute;top:0;left:0;bottom:0;width:1px;background:rgba(0,0,0,0.15)}.tick{position:absolute;left:0;transform:translateX(-100%) translateY(-50%);display:flex;flex-direction:row-reverse;align-items:center}.tick::before{content:'';display:block;width:5px;height:1px;background:rgba(0,0,0,0.3);flex-shrink:0}.tick-label{font-family:"Strichpunkt Sans", sans-serif;font-size:clamp(10px, 0.9vw, 13px);color:rgba(0,0,0,0.4);letter-spacing:0;white-space:nowrap;padding-right:3px;line-height:1}#stats{flex-shrink:0;margin-top:1.5em;font-family:"Strichpunkt Sans", sans-serif;font-size:clamp(10px, 0.78vw, 12px);color:rgba(0,0,0,0.4);letter-spacing:0.4px;text-align:center;font-variant-numeric:tabular-nums}#stats b{font-weight:600}.stat-lived{color:#1a1a1a}.stat-remaining{color:rgba(0,0,0,0.55)}#letter{display:none}#letter-content{max-width:680px;width:100%;font-family:"Caveat", serif;font-weight:300;font-size:clamp(15px, 1.4vw, 20px);line-height:2.2;color:#444}#letter-content h1{font-family:"Playwrite FR Trad", serif;font-weight:300;font-size:clamp(14px, 2.2vw, 42px);text-align:center;line-height:2.4;color:inherit;margin-top:2em;margin-bottom:1em}#letter-content p{font-family:"Caveat", serif;font-size:clamp(20px, 2vw, 28px);font-weight:300}#letter-content p+p{margin-top:1.5em}#portfolio{border-top:1px solid rgba(0,0,0,0.06)}#portfolio .portfolio-inner{max-width:960px;margin:0 auto;padding:100px 60px}#portfolio *{font-family:"Caveat", serif;font-weight:400}#portfolio h1{font-size:clamp(32px, 4vw, 52px);line-height:1.7;color:#1a1a1a}#portfolio p{font-size:clamp(16px, 2vw, 32px);line-height:1.8;margin-top:0.75em;color:#444}#portfolio a{color:#444;text-decoration:none;background-image:linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.06));background-size:0% 35%;background-repeat:no-repeat;background-position:left 90%;transition:background-size 0.55s ease, background-image 0.2s ease, color 0.2s ease}#portfolio a:hover{color:#1a1a1a;background-image:linear-gradient(90deg, #FEFDBA, #FEFDBA);background-size:100% 35%}#portfolio a.hl{background-size:100% 35%}#portfolio .portfolio-posts{padding-left:4em;margin-top:0.75em}#portfolio .portfolio-posts li{font-size:clamp(16px, 2vw, 32px);line-height:1.8}#portfolio .portfolio-divider{border:none;border-top:1px solid rgba(0,0,0,0.06);margin:100px 0}#portfolio .portfolio-links{display:flex;justify-content:center;gap:48px;margin-top:3.5em}#portfolio .portfolio-links a{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;color:#444}#portfolio .portfolio-links a:hover{color:#1a1a1a}#portfolio .portfolio-links a.hl{background:none}#portfolio .portfolio-links img{width:32px;height:32px;display:block}#portfolio .portfolio-links span{font-family:"Caveat", serif;font-size:clamp(14px, 1.4vw, 20px)}body.deceased{background:#000;color:#fff}body.deceased #left-panel{border-right-color:#333}body.deceased #left-panel h1{color:#fff}body.deceased #scroll-hint{color:rgba(255,255,255,0.2)}body.deceased #stats{color:#fff}body.deceased .stat-lived{color:#fff}body.deceased .stat-remaining{color:#fff}body.deceased #ruler::after{background:rgba(255,255,255,0.15)}body.deceased .tick::before{background:rgba(255,255,255,0.3)}body.deceased .tick-label{color:#fff}body.deceased #letter{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:80px 60px;border-top:1px solid #333}body.deceased #letter-content{color:#fff}body.deceased #portfolio{border-top-color:#333}body.deceased #portfolio h1,body.deceased #portfolio p,body.deceased #portfolio li{color:#fff}body.deceased #portfolio a{color:#fff;background-image:linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25))}body.deceased #portfolio a:hover{color:#fff}body.deceased #portfolio a.hl{background-size:100% 35%}body.deceased #portfolio .portfolio-divider{border-top-color:#333}body.deceased #portfolio .portfolio-links img{filter:invert(1)}body.deceased #portfolio .portfolio-links a{background:none;color:#fff}body.deceased #portfolio .portfolio-links a:hover{color:#fff}body.deceased #portfolio .portfolio-links a.hl{background:none}@media (max-width: 768px){#scroll-hint{display:none}#hero{flex-direction:column;overflow:auto}#left-panel{display:none}#right-panel{flex:1;justify-content:center;align-items:center;padding:32px 24px}#stage{display:none}#ruler{display:none}#stats{margin-top:0;line-height:2}#letter{padding:60px 32px}#portfolio .portfolio-inner{padding:60px 24px}}