@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../../fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("../../fonts/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("../../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Layout: one full-bleed canvas stage. Title top-left, big exponent readout bottom-left,
   the scale ruler along the bottom doubles as the scrub bar. The accent hue travels with the zoom. */
:root{
  --bg:#06070b; --ink:#f2ede5; --mute:rgba(242,237,229,.58); --faint:rgba(242,237,229,.30);
  --line:rgba(242,237,229,.16); --accent-h:190;
  --accent:hsl(var(--accent-h) 78% 68%);
  --serif:'Cormorant','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --gx:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;
  -webkit-font-smoothing:antialiased;touch-action:manipulation}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block}
.vignette{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,transparent 52%,rgba(3,4,8,.62) 100%),
             linear-gradient(to top,rgba(4,5,9,.82),transparent 38%),
             linear-gradient(to bottom,rgba(4,5,9,.5),transparent 18%)}

/* top row */
.top{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:calc(16px + env(safe-area-inset-top,0px)) var(--gr) 0 var(--gx);pointer-events:none;
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.top b{font-weight:500;color:var(--ink)}
.top .idx{font-variant-numeric:tabular-nums}
.top .idx i{font-style:normal;color:var(--accent)}

body:not(.run) .top,body:not(.run) .hud{opacity:0;pointer-events:none}
body:not(.run) .hud>*{pointer-events:none}
.top,.hud{transition:opacity .9s ease}
/* readout */
.hud{position:fixed;left:0;right:0;bottom:0;display:grid;gap:14px;
  padding:0 var(--gr) calc(12px + env(safe-area-inset-bottom,0px)) var(--gx);pointer-events:none}
.hud>*{pointer-events:auto}
.read{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);column-gap:clamp(20px,4vw,64px);align-items:end;pointer-events:none}
.power{font:300 clamp(64px,13vw,168px)/.84 var(--serif);letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums;display:flex;align-items:flex-start}
.power .ten{font-weight:300}
.power sup{font-style:italic;font-weight:300;font-size:.48em;line-height:1;color:var(--accent);
  margin:.06em 0 0 .06em;display:inline-block;min-width:3.1ch;vertical-align:top;transition:color .4s}
.power .unit{font:500 clamp(12px,1.3vw,15px)/1 var(--mono);letter-spacing:.14em;color:var(--mute);align-self:flex-end;margin:0 0 .5em .5em}
.cap{min-width:0;max-width:46ch;padding-bottom:6px;transition:opacity .25s linear}
.cap .fov{font:400 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 10px;font-variant-numeric:tabular-nums}
.cap h2{margin:0;font:300 clamp(30px,4.6vw,56px)/1 var(--serif);text-wrap:balance;letter-spacing:-.005em}
.cap .sz{display:inline-block;margin-top:10px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);transition:color .4s}
.cap p{margin:10px 0 0;font:400 clamp(13px,1.15vw,15px)/1.55 var(--sans);color:var(--mute);text-wrap:pretty}

/* bar */
.bar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.btns{display:flex;gap:6px;align-items:center}
.btn{appearance:none;border:1px solid var(--line);background:rgba(8,9,14,.55);color:var(--ink);width:40px;height:40px;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;font:500 11px/1 var(--mono);letter-spacing:.04em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .2s,color .2s,background .2s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:focus-visible,.go:focus-visible,#ruler:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.btn.main{width:46px;height:46px;background:var(--ink);color:#07080c;border-color:var(--ink)}
.btn.main:hover{background:var(--accent);border-color:var(--accent);color:#07080c}
.btn.main svg{fill:currentColor;stroke:none}
#ruler{display:block;width:100%;height:58px;cursor:ew-resize;touch-action:none;border-radius:2px}

/* intro + coda */
.intro,.coda{position:fixed;inset:0;display:grid;align-content:center;justify-items:start;
  padding:calc(32px + env(safe-area-inset-top,0px)) var(--gr) calc(32px + env(safe-area-inset-bottom,0px)) max(24px,var(--gx));
  transition:opacity .9s ease,visibility .9s}
.intro{background:linear-gradient(100deg,rgba(5,6,10,.94) 0%,rgba(5,6,10,.78) 44%,rgba(5,6,10,0) 78%);z-index:5}
.intro[hidden]{display:none!important}
.intro.off{opacity:0;visibility:hidden;pointer-events:none}
.intro .eye{font:500 11px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 22px}
.intro h1{margin:0;font:300 clamp(54px,11vw,150px)/.88 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.intro h1 em{font-style:italic;font-weight:300;color:var(--accent)}
.intro .lede{max-width:44ch;margin:26px 0 34px;font:400 clamp(15px,1.5vw,18px)/1.6 var(--sans);color:var(--mute);text-wrap:pretty}
.go{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:14px;padding:16px 26px 16px 22px;
  border-radius:999px;background:var(--ink);color:#07080c;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;transition:background .2s,transform .2s}
.go:hover{background:var(--accent)}
.go:active{transform:scale(.98)}
.go svg{width:14px;height:14px;fill:currentColor}
.intro .hint{margin:18px 0 0;font:400 11px/1.5 var(--mono);letter-spacing:.08em;color:var(--faint)}
.coda{z-index:4;justify-items:start;align-content:start;text-align:left;opacity:0;visibility:hidden;pointer-events:none;
  padding-top:calc(64px + env(safe-area-inset-top,0px))}
.coda.on{opacity:1;visibility:visible}
.coda p{margin:0;max-width:12ch;font:italic 300 clamp(30px,4.4vw,62px)/1.04 var(--serif);text-wrap:balance;text-shadow:0 2px 24px rgba(4,5,9,.9)}
.coda button{pointer-events:auto;margin-top:26px}
.coda.on button{pointer-events:auto}
.coda:not(.on) button{pointer-events:none}
@media (max-width:640px){
  .read{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .power{font-size:clamp(58px,19vw,96px)}
  .cap{max-width:none}
  .cap p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .intro{background:linear-gradient(to top,rgba(5,6,10,.94) 30%,rgba(5,6,10,.5) 70%,rgba(5,6,10,.1) 100%);align-content:end}
  .bar{grid-template-columns:minmax(0,1fr)}
  #ruler{height:52px}
  .top .brand{display:none}
  .coda{padding-top:calc(48px + env(safe-area-inset-top,0px))}
  .coda p{font-size:clamp(26px,8vw,38px)}
}

/* explore mode: dwell on a level, zoom, hotspots + info panel */
.btn.pill{width:auto;padding:0 16px 0 13px;border-radius:999px;display:inline-flex;gap:8px;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.btn.pill svg{width:15px;height:15px}
.btn:disabled{opacity:.3;cursor:default;pointer-events:none}
body.ex #stage{touch-action:none;cursor:grab}
body.ex #stage:active{cursor:grabbing}
body.ex .cap{opacity:0!important;pointer-events:none}

.marks{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.mk{position:absolute;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;padding:0;border-radius:50%;border:1.5px solid var(--accent);
  background:rgba(6,8,12,.7);color:var(--ink);font:500 11px/1 var(--mono);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;
  will-change:transform;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .3s,background .2s,color .2s,box-shadow .2s}
.mk.show{pointer-events:auto}
.mk::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.mk:hover{background:var(--accent);color:#07080c}
.mk.on{background:var(--accent);color:#07080c;box-shadow:0 0 0 4px rgba(242,237,229,.14)}
.mk:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mk .lab{position:absolute;left:36px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:6px 11px;border-radius:999px;background:rgba(6,8,12,.88);
  border:1px solid var(--line);color:var(--ink);font:500 12px/1 var(--sans);opacity:0;pointer-events:none;transition:opacity .2s}
.mk.flip .lab{left:auto;right:36px}
.mk:hover .lab,.mk:focus-visible .lab,.mk.on .lab{opacity:1}
@media (pointer:coarse){.mk{width:34px;height:34px;margin:-17px 0 0 -17px;font-size:12px}.mk .lab{left:42px}.mk.flip .lab{left:auto;right:42px}}

.zoomc{position:fixed;z-index:5;left:var(--gx);top:calc(54px + env(safe-area-inset-top,0px));display:grid;gap:6px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
body.ex .zoomc{opacity:1;visibility:visible}
body.tall .zoomc,body.tall .tip{opacity:0;visibility:hidden}
.tip{position:fixed;z-index:5;left:50%;top:calc(52px + env(safe-area-inset-top,0px));transform:translate(-50%,-6px);width:max-content;max-width:min(460px,calc(100vw - 32px));
  padding:10px 16px;border-radius:14px;background:rgba(8,9,14,.84);border:1px solid var(--line);color:var(--ink);font:400 12.5px/1.5 var(--sans);text-align:center;
  opacity:0;pointer-events:none;transition:opacity .5s,transform .5s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tip.on{opacity:1;transform:translate(-50%,0)}

.panel{position:fixed;z-index:6;display:flex;flex-direction:column;background:rgba(8,9,14,.86);color:var(--ink);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),visibility .55s,height .35s ease}
.panel[aria-hidden="true"]{visibility:hidden;pointer-events:none}
.ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 6px 22px;flex:none}
.pk{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.pk b{font-weight:500;color:var(--accent)}
.ph .tools{display:flex;gap:6px}
.btn.sm{width:34px;height:34px}
.pbody{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:6px 22px 26px;scrollbar-width:thin;scrollbar-color:rgba(242,237,229,.25) transparent}
.pbody h3{margin:8px 0 0;font:300 clamp(34px,3.4vw,46px)/1 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.psz{display:block;margin-top:10px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.plead{margin:16px 0 0;font:400 15px/1.6 var(--sans);color:var(--ink);text-wrap:pretty}
.pbody h4{margin:28px 0 10px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.stats{margin:18px 0 0;border-top:1px solid var(--line)}
.stats div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline}
.stats dt{font:400 12.5px/1.4 var(--sans);color:var(--mute)}
.stats dd{margin:0;font:500 12.5px/1.45 var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.spots{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sp{appearance:none;box-sizing:border-box;width:100%;display:flex;gap:12px;align-items:center;text-align:left;background:transparent;border:1px solid transparent;border-radius:12px;
  padding:9px 10px;margin:0;color:var(--ink);cursor:pointer;font:500 14px/1.3 var(--sans);transition:background .2s,border-color .2s}
.sp:hover{background:rgba(242,237,229,.06)}
.sp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sp .n{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--accent);display:grid;place-items:center;font:500 11px/1 var(--mono);color:var(--ink);transition:background .2s,color .2s}
.spots li.open .sp{background:rgba(242,237,229,.07);border-color:var(--line)}
.spots li.open .sp .n{background:var(--accent);color:#07080c}
.spots .d{display:none;margin:4px 6px 12px 46px;font:400 14px/1.6 var(--sans);color:var(--mute);text-wrap:pretty}
.spots .d p{margin:0 0 10px}
.zf{appearance:none;background:transparent;border:1px solid var(--line);color:var(--accent);border-radius:999px;padding:8px 13px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,background .2s}
.zf:hover{border-color:var(--accent);background:rgba(242,237,229,.05)}
.spots li.open .d{display:block}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.facts li{position:relative;padding-left:18px;font:400 14px/1.6 var(--sans);color:var(--mute);text-wrap:pretty}
.facts li::before{content:'';position:absolute;left:0;top:.8em;width:8px;height:1px;background:var(--accent)}
.pf{flex:none;display:flex;align-items:center;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px)) 22px;border-top:1px solid var(--line);background:rgba(6,7,11,.55)}
.pf .go{flex:1;justify-content:center;padding:14px 18px;font-size:11.5px}
.go.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.go.ghost:hover{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cta{display:flex;flex-wrap:wrap;gap:12px}

@media (min-width:720px) and (min-aspect-ratio:11/10){
  :root{--pw:clamp(320px,31vw,440px)}
  .panel{top:0;right:0;bottom:0;width:var(--pw);border-left:1px solid var(--line);transform:translateX(104%);padding-top:env(safe-area-inset-top,0px)}
  body.ex .panel{transform:none}
  body.ex .hud{padding-right:calc(var(--pw) + 24px)}
  .ptall{display:none}
  .tip{left:calc((100vw - var(--pw)) / 2)}
}
@media not all and (min-width:720px) and (min-aspect-ratio:11/10){
  .panel{left:0;right:0;bottom:0;height:min(48vh,440px);border-top:1px solid var(--line);border-radius:18px 18px 0 0;transform:translateY(104%)}
  .panel.tall{height:min(84vh,760px)}
  .panel .ph{position:relative;padding-top:20px}
  .panel .ph::before{content:'';position:absolute;left:50%;top:8px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgba(242,237,229,.22)}
  body.ex .panel{transform:none}
  body.ex .hud{opacity:0;pointer-events:none}
  body.ex .hud>*{pointer-events:none}
  .ptall[aria-expanded="true"] svg{transform:rotate(180deg)}
  .tip{left:72px;right:16px;width:auto;max-width:none;transform:translateY(-6px);text-align:left}
  .tip.on{transform:none}
}
@media (max-width:370px){.btn.pill span{display:none}.btn.pill{padding:0;width:40px;justify-content:center}}
@media (prefers-reduced-motion:reduce){.intro,.coda,.cap,.panel,.tip,.zoomc{transition:none}.mk::after{animation:none}}

.back{position:fixed;z-index:7;right:var(--gr);top:calc(14px + env(safe-area-inset-top,0px));font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-decoration:none;padding:6px 0}
.back:hover,.back:focus-visible{color:var(--accent)}
body.ex .back{display:none}
.top .idx{margin-right:0}
body.run .top .idx{padding-right:150px}