@font-face{font-family:Fraunces;src:url('./fonts/fraunces.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'DM Sans';src:url('./fonts/dm-sans.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--night:#0d171b;--warm:#fffdf7;--mist:#d9e7df;--serif:Fraunces,Georgia,serif;--sans:'DM Sans',sans-serif}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--night)}
body{font-family:var(--sans);color:var(--warm);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
::selection{background:#7ad5c8;color:#0d171b}
.experience{position:fixed;inset:0;isolation:isolate;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;background:var(--night);outline:none}
.experience:focus-visible:after{content:'';position:absolute;inset:4px;z-index:8;border:1px solid #fffdf7a8;border-radius:2px;pointer-events:none}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#pigment-field{z-index:-3;filter:saturate(1.08) brightness(.84) contrast(1.04)}
#word-field{z-index:-1}
.atmosphere{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#07110e4d 0,transparent 25%,transparent 66%,#070d0c80 100%)}
.brand{position:absolute;z-index:3;top:max(22px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));display:flex;align-items:center;gap:10px;pointer-events:none}
.brand-mark{width:10px;height:10px;border-radius:50%;background:#f4eee2;box-shadow:0 2px 16px #398f88,10px 5px 26px #9f4335,-8px 7px 24px #5f478f;animation:pulse 4.8s cubic-bezier(.16,1,.3,1) infinite}
.brand-name{font:450 19px/1 var(--serif);letter-spacing:-.025em;text-shadow:0 2px 20px #07110da8}
.hint{position:absolute;z-index:3;left:max(22px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));margin:0;color:#e4eee8d6;font:450 11px/1.4 var(--sans);letter-spacing:.01em;text-shadow:0 2px 16px #07110dc9;pointer-events:none}
.status{position:absolute;z-index:4;left:50%;bottom:max(54px,calc(env(safe-area-inset-bottom) + 54px));transform:translateX(-50%);width:min(88vw,430px);margin:0;color:#fffdf7;text-align:center;font-size:12px;line-height:1.5;pointer-events:none}
.status:empty{display:none}
@keyframes pulse{0%,100%{transform:scale(.86);opacity:.7}38%{transform:scale(1.12);opacity:1}62%{transform:scale(.98);opacity:.88}}
@media(min-width:760px){.brand{top:max(30px,env(safe-area-inset-top));left:max(32px,env(safe-area-inset-left))}.brand-name{font-size:21px}.hint{left:max(32px,env(safe-area-inset-left));bottom:max(30px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.brand-mark{animation:none}.hint{display:none}}