:root{--ink:#3d3a44;--soft:rgba(61,58,68,.45);--paper:#f3ece4}
html,body,#root{height:100%;margin:0;overflow:hidden}
body{font-family:'Fraunces',serif;color:var(--ink);background:var(--paper);-webkit-user-select:none;user-select:none}
.mono{font-family:'IBM Plex Mono',monospace}
.void{position:fixed;inset:0;background:
 radial-gradient(60vmax 60vmax at 20% 30%,#d9cfe6 0%,transparent 60%),
 radial-gradient(60vmax 60vmax at 80% 70%,#f4d6c4 0%,transparent 60%),
 radial-gradient(50vmax 50vmax at 60% 10%,#d3e0cf 0%,transparent 60%),#efe8df;
 background-size:200% 200%;animation:drift 60s ease-in-out infinite}
@keyframes drift{0%,100%{background-position:0% 0%}33%{background-position:100% 40%}66%{background-position:30% 100%}}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.orb{position:absolute;left:50%;top:50%;border-radius:50%;filter:blur(40px);
 background:radial-gradient(circle,#fff8 0%,#f7d9c9aa 40%,transparent 70%);
 transform:translate(-50%,-50%);animation:breathe 8s ease-in-out infinite;transition:width 3s,height 3s,opacity 3s}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(.85)}50%{transform:translate(-50%,-50%) scale(1.1)}}
.timer{font-weight:100;font-variation-settings:'opsz' 144;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fade{transition:opacity 1.6s ease,transform 1.6s ease}
.ripple{animation:ripple 1.2s ease-out}
@keyframes ripple{0%{filter:blur(6px) saturate(2);transform:scale(1.03)}100%{filter:none;transform:none}}
.nocursor,.nocursor *{cursor:none!important}
.drawer{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
a{color:inherit}