@font-face{font-family:Danidin;src:url(fonts/Danidin-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Danidin;src:url(fonts/Danidin-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Danidin;src:url(fonts/Danidin-Heavy.woff2) format("woff2");font-weight:800;font-display:block}

:root{
  --ink:#071030;
  --paper:#fbf5e6;
  --amber:#ffb53d;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font-family:Danidin,system-ui,sans-serif;overflow-x:hidden}

#exp{position:relative;height:1150vh}
#stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}

.grain{position:absolute;inset:-60px;pointer-events:none;opacity:.06;mix-blend-mode:overlay;animation:gr .9s steps(5) infinite}
@keyframes gr{0%{transform:translate(0,0)}20%{transform:translate(-22px,14px)}40%{transform:translate(16px,-26px)}60%{transform:translate(-12px,-10px)}80%{transform:translate(24px,18px)}100%{transform:translate(0,0)}}

#hero{position:absolute;inset-inline:0;top:clamp(36px,8.5vh,96px);text-align:center;pointer-events:none;will-change:transform,opacity}
#hero h1{font-family:Danidin,sans-serif;color:var(--paper);padding-inline:16px}
#hero h1 span{display:block;font-weight:600;font-size:clamp(25px,min(3.5vw,6.2vh),62px);line-height:1}
#hero h1 em{display:block;font-style:normal;font-weight:800;color:var(--amber);font-size:clamp(104px,min(16vw,27vh),300px);line-height:.92;letter-spacing:-.01em}
#heroFind{position:absolute;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--paper);font:400 clamp(15px,1.15vw,18px)/1.2 Danidin,sans-serif;cursor:pointer;white-space:nowrap}
#heroFind:hover{text-decoration:underline;text-underline-offset:3px}
#heroFind:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

#end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(24px,5vh,60px) 20px 22px;text-align:center;pointer-events:none;opacity:0;visibility:hidden}
#end h2{font-family:Danidin,sans-serif;font-weight:800;font-size:clamp(44px,min(6vw,10.5vh),112px);line-height:.98;letter-spacing:-.01em}
#endCount{font-size:clamp(18px,1.5vw,24px);line-height:1.2;margin-top:10px;min-height:1.2em}
#end h2 em{font-style:normal;color:var(--amber)}
.pill{display:inline-flex;align-items:center;gap:14px;border:0;border-radius:999px;padding:8px 8px 8px 24px;font:600 clamp(17px,1.25vw,20px)/1.2 Danidin,sans-serif;cursor:pointer;text-decoration:none;flex-direction:row}
.pill.solid{background:var(--paper);color:var(--ink)}
.pill.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(251,245,230,.5);padding:13px 24px}
.pill i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--paper);transition:transform .35s cubic-bezier(.2,.8,.2,1);order:-1;margin-inline-start:0}
.pill:hover i{transform:translateX(-3px)}
.pill:focus-visible,.txt:focus-visible,#snd:focus-visible,#fClose:focus-visible,#fMap:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.pill:disabled{opacity:.45;cursor:default}
#endFind{pointer-events:auto;margin-top:auto}
#end .credit{opacity:.9}
#enter,#findBtn{position:absolute;bottom:max(clamp(12px,2.4vh,26px),env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);white-space:nowrap}
#findBtn{visibility:hidden;opacity:0}
#snd{position:absolute;top:max(14px,env(safe-area-inset-top,0px));left:max(14px,env(safe-area-inset-left,0px));width:44px;height:44px;border-radius:50%;border:0;background:rgba(7,16,48,.62);color:var(--paper);display:grid;place-items:center;cursor:pointer}
#snd .w{opacity:.28;transition:opacity .3s}
#snd.on .w{opacity:1}
#end .credit{margin-top:16px;font-size:14px;line-height:1.2;opacity:.72;display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;direction:rtl}
#end .credit span{width:1px;height:13px;background:currentColor;opacity:.5;margin:0 7px}
#madeBy{pointer-events:auto;color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:7px;padding:8px 0}
#madeBy:hover{text-decoration:underline;text-underline-offset:3px}
#madeBy:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
#end .credit img{height:13px;width:auto;display:inline-block}

#flat{display:none}
.nogl #exp{height:auto}
.nogl #stick{position:relative;height:auto;padding:clamp(36px,8vh,96px) 16px;display:grid;gap:clamp(18px,4vh,40px)}
.nogl #gl,.nogl #end,.nogl #heroFind,.nogl #enter,.nogl #findBtn,.nogl #snd,.nogl .grain{display:none}
.nogl #hero{position:static}
.nogl #flat{display:block;width:100%;height:auto}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

#load{position:fixed;inset:0;background:var(--ink);z-index:9;display:grid;place-items:center;transition:opacity .7s;pointer-events:none}
#load b{display:block;width:min(240px,50vw);height:1px;background:rgba(251,245,230,.22);position:relative}
#load b::after{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleX(var(--l,0));transform-origin:right;transition:transform .3s}

html.gate,html.gate body{overflow:hidden}
@keyframes nudge{0%,100%{transform:translateX(-50%) scale(1)}45%{transform:translateX(-50%) scale(1.07)}}
#enter.nudge{animation:nudge .45s cubic-bezier(.3,.7,.3,1)}
#scrollCue{position:absolute;top:50%;right:clamp(28px,11vw,190px);transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--paper);font:800 clamp(24px,2.5vw,42px)/1 Danidin,sans-serif;opacity:0;visibility:hidden;pointer-events:none}
#scrollCue svg{animation:cueDown 1.4s ease-in-out infinite}
@keyframes cueDown{0%,100%{transform:translateY(-4px)}50%{transform:translateY(8px)}}
@media (max-aspect-ratio:9/10){#scrollCue{top:auto;right:50%;bottom:max(24px,env(safe-area-inset-bottom,0px));transform:translateX(50%);background:rgba(7,16,48,.82);padding:12px 22px;border-radius:22px}}
@media (prefers-reduced-motion:reduce){#scrollCue svg{animation:none}}
#tiltHint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(max(clamp(12px,2.4vh,26px),env(safe-area-inset-bottom,0px)) + 70px);display:flex;align-items:center;gap:7px;white-space:nowrap;background:rgba(7,16,48,.82);color:var(--paper);border-radius:999px;padding:8px 16px;font:600 16px/1.2 Danidin,sans-serif;opacity:0;visibility:hidden;pointer-events:none}
[hidden]{display:none!important}

#find{position:fixed;inset:0;z-index:20;background:var(--ink);color:var(--paper)}
#fc{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;display:block}
.fbar{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:16px;padding:max(12px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 26px max(16px,env(safe-area-inset-left,0px));background:linear-gradient(rgba(7,16,48,.94) 55%,rgba(7,16,48,0));pointer-events:none}
.fbar>*{pointer-events:auto}
#fClose{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(251,245,230,.14);color:var(--paper);display:grid;place-items:center;cursor:pointer}
.ft{min-width:0;pointer-events:none}
#fTitle{font:800 clamp(24px,2.6vw,38px)/1 Danidin,sans-serif}
#fCount{font-size:clamp(14px,1.05vw,16px);line-height:1.2;margin-top:3px;opacity:.8}
.panel{position:absolute;inset-inline-start:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));width:min(380px,calc(100vw - 32px));max-height:calc(100svh - 110px);overflow:auto;background:var(--ink);border-radius:26px;padding:22px;box-shadow:0 18px 60px rgba(0,0,0,.42)}
.panel h3{font:800 clamp(28px,2.5vw,36px)/1.02 Danidin,sans-serif;margin-bottom:12px}
#fPeek{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
#fPeekT{font:800 clamp(26px,2.3vw,34px)/1.05 Danidin,sans-serif}
.fld{position:relative;margin-top:12px}
.fld input{width:100%;background:none;border:0;border-bottom:1.5px solid rgba(251,245,230,.42);color:var(--paper);font:400 20px/1.2 Danidin,sans-serif;padding:20px 0 7px;outline:0;border-radius:0}
.fld input:focus{border-bottom-color:var(--amber)}
.fld label{position:absolute;inset-inline-start:0;top:20px;font-size:19px;line-height:1.2;opacity:.72;transition:transform .2s,font-size .2s;pointer-events:none}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label{transform:translateY(-20px);font-size:14px}
.mapq{font-weight:600;font-size:18px;line-height:1.2;margin-top:18px}
#fMap{display:block;width:100%;margin-top:8px;cursor:crosshair}
.note{font-size:14px;line-height:1.3;opacity:.72;margin-top:8px}
#fErr{color:var(--amber);font-size:15px;line-height:1.3;min-height:0}
.row{display:flex;align-items:center;gap:16px;margin-top:14px}
.row.wrap{flex-wrap:wrap;gap:10px}
.txt{background:none;border:0;color:var(--paper);font:400 16px/1.2 Danidin,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 2px}
#fCard{display:block;height:min(46svh,380px);width:auto;max-width:100%;border-radius:14px;margin:0 auto}
@media (max-width:720px){
  .fbar{flex-wrap:wrap;gap:10px}
  .panel{inset-inline:16px;width:auto;bottom:max(12px,env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}