:root{--pad:clamp(20px,4vw,48px);--mono:"IBM Plex Mono",ui-monospace,monospace;--line:1px solid var(--color-divider)}
*{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
#bgnet{position:absolute;left:0;top:0;width:100%;z-index:0;pointer-events:none;overflow:visible}
#bgnet .bt{fill:none;stroke:#313441;stroke-width:1;opacity:1;stroke-dasharray:1 0}
#bgnet .bn{fill:var(--color-bg);stroke:var(--color-neutral-700);stroke-width:1;opacity:.6}
#bgnet .bn.on{stroke:var(--color-accent-600);transition:stroke .3s}
#bgnet .bn{transition:stroke 1.6s}
#bgnet .hb{transition:opacity .4s}
/* night sky open: lines over the sky scene only drop to ~1 % (rect set from JS as --sx/--sy/--sw/--sh) */
.fib.dim:not(.sky) > svg{--mL:linear-gradient(#000,#000);
  -webkit-mask-size:100% var(--sy),100% calc(100% - var(--sy) - var(--sh)),var(--sx) 100%,calc(100% - var(--sx) - var(--sw)) 100%,100% 100%;mask-size:100% var(--sy),100% calc(100% - var(--sy) - var(--sh)),var(--sx) 100%,calc(100% - var(--sx) - var(--sw)) 100%,100% 100%;
  -webkit-mask-position:0 0,0 100%,0 0,100% 0,0 0;mask-position:0 0,0 100%,0 0,100% 0,0 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-over;mask-composite:add}
.fib.dim:not(.sky) > svg:not(#fibnet){-webkit-mask-image:var(--mL),var(--mL),var(--mL),var(--mL),linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28));mask-image:var(--mL),var(--mL),var(--mL),var(--mL),linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28))}
.fib.dim:not(.sky) #fibnet{-webkit-mask-image:var(--mL),var(--mL),var(--mL),var(--mL),linear-gradient(rgba(0,0,0,.11),rgba(0,0,0,.11));mask-image:var(--mL),var(--mL),var(--mL),var(--mL),linear-gradient(rgba(0,0,0,.11),rgba(0,0,0,.11))}
.fib.sky > svg{--mL:linear-gradient(#000,#000);
  -webkit-mask-size:100% var(--sy),100% calc(100% - var(--sy) - var(--sh)),var(--sx) 100%,calc(100% - var(--sx) - var(--sw)) 100%,100% 100%;mask-size:100% var(--sy),100% calc(100% - var(--sy) - var(--sh)),var(--sx) 100%,calc(100% - var(--sx) - var(--sw)) 100%,100% 100%;
  -webkit-mask-position:0 0,0 100%,0 0,100% 0,0 0;mask-position:0 0,0 100%,0 0,100% 0,0 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-over;mask-composite:add}
.fib.sky > svg:not(#fibnet){-webkit-mask-image:var(--mL),var(--mL),var(--mL),var(--mL),linear-gradient(rgba(0,0,0,0.056),rgba(0,0,0,0.056));mask-image:var(--mL),var(--mL),var(--mL),var(--mL),linear-gradient(rgba(0,0,0,0.056),rgba(0,0,0,0.056))}
.fib.sky #fibnet{-webkit-mask-image:var(--mL),var(--mL),var(--mL),var(--mL),linear-gradient(rgba(0,0,0,0.022),rgba(0,0,0,0.022));mask-image:var(--mL),var(--mL),var(--mL),var(--mL),linear-gradient(rgba(0,0,0,0.022),rgba(0,0,0,0.022))}
/* shelf → Literature line: fades out while the night sky is open */
#bgnet .litline,#fibnet .litline{transition:opacity 2.6s ease}
body.atsky #bgnet .litline,body.atsky #fibnet .litline{opacity:0!important}
/* shelf → Berlin line: only shown while the night sky is open */
#bgnet .bt.skyonly,#fibnet .bt.skyonly{opacity:0;transition:opacity 2.6s ease}
body.atsky #bgnet .bt.skyonly,body.atsky #fibnet .bt.skyonly{transition:opacity .2s ease}
body.atsky #bgnet .bt.skyonly{opacity:1}
body.atsky #fibnet .bt.skyonly{opacity:1}
/* beta v2: progressive reveal */
#bgnet .hid,#fibnet .hid{opacity:0!important;transition:none!important}
#bgnet:not(.ready),#fibnet:not(.ready){visibility:hidden}
#bgnet .litline.hid,#fibnet .litline.hid{transition:none!important}
button.sq.city{border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;height:100%}
button.sq.travel::after{display:none}
/* beta v2: hobby squares */
button.sq.photo{border:0;padding:0;cursor:pointer;width:100%;height:100%;font:inherit;background:var(--color-surface)}
.sq.photo span{position:absolute;inset:0;display:grid;place-items:center;font:500 clamp(28px,4vw,56px) var(--font-body);transition:opacity .5s ease}
.sq.photo .ph-a{background:var(--color-neutral-800);color:var(--color-neutral-400)}
.sq.photo .ph-b{background:var(--color-accent-900);color:var(--color-accent-300);opacity:0}
.sq.photo.b .ph-a{opacity:0}.sq.photo.b .ph-b{opacity:1}
.skate.fan rect.red{fill:oklch(0.55 0.15 25);stroke:var(--color-neutral-300)}
.skate.fan rect.black{fill:var(--color-neutral-900);stroke:var(--color-neutral-300)}
#fibnet{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
#fibnet .bt{fill:none;stroke:#313441;stroke-width:1;opacity:1}
#fibnet .ghost,#bgnet .gh{fill:none;stroke:none}
#fibnet .bn{fill:var(--color-surface);stroke:var(--color-neutral-600);stroke-width:1;opacity:.7}
#bgnet .bs.faint,#fibnet .bs.faint{fill:var(--color-neutral-400);filter:none}
#fibnet .bs{fill:var(--color-accent-300);filter:drop-shadow(0 0 2px rgba(145,132,217,.6))}
#bgnet .wb{transition:opacity .4s}
#bgnet:not(.work) .wb{opacity:0!important}
body > .dw{pointer-events:auto;cursor:pointer;z-index:50}
.gsvg .g-bln{fill:var(--color-accent-200);opacity:.75;filter:drop-shadow(0 0 .4px rgba(184,176,232,.7))}
html{overflow-x:clip} /* planes leaving the screen never add a side scroll */
.sq.hob.dice-off{cursor:default}
.sq.travel.dice-off:hover{background:var(--color-surface)!important;color:var(--color-accent-200)!important;box-shadow:none!important}
.sq.hob.dice-off:hover{background:var(--color-surface)!important;color:var(--color-neutral-200)!important;box-shadow:none!important}
.sq.hob.dice-off:hover i,.sq.hob.dice-off:hover svg{transform:none!important}
/* Traveling: first click, the plane flies once around a small globe */
.tv-ic{position:relative;display:grid;place-items:center}
.tv-ic .globe{position:absolute;left:50%;top:50%;width:1.25em;height:1.25em;margin:-.625em 0 0 -.625em;font-size:clamp(26px,3vw,40px);border:1px solid var(--color-accent-500);border-radius:50%;opacity:0;transform:scale(.6);pointer-events:none}
/* globe lives in the Berlin box (top-right), the plane flies over to it */
#sq-berlin .globe{position:absolute;left:50%;top:40%;height:58%;aspect-ratio:1;max-width:58%;transform:translate(-50%,-50%);pointer-events:none;opacity:.85}
#sq-berlin .gsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#sq-berlin .g-oc{fill:var(--color-neutral-900)}
#sq-berlin .g-gr{fill:none;stroke:var(--color-accent-800);stroke-width:.6}
#sq-berlin .g-ld{fill:var(--color-accent-700);stroke:var(--color-accent-500);stroke-width:.5;stroke-linejoin:round}
#sq-berlin .g-rim{fill:none;stroke:var(--color-accent-500);stroke-width:1}
#sq-berlin .big,#sq-berlin .val{position:relative;z-index:1}
.sq.hob .skate.fan{overflow:visible}
.skate-fly{position:fixed;z-index:1200;transform-style:preserve-3d;pointer-events:none;fill:none;stroke:var(--color-accent-300);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transform-origin:50% 50%;will-change:transform}
.sq.hob.riding .skate{visibility:hidden}
.plane-fly{position:fixed;z-index:1200;pointer-events:none;fill:none;stroke:var(--color-accent-300);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transform-origin:50% 50%;will-change:transform,opacity}
.plane-fly .body{fill:var(--color-surface)}
.plane-fly .wing-far{opacity:.55}
.sq.travel.flying .plane{visibility:hidden}
.tv-ic .globe{border:0!important}
/* Games: two dice rolled inside the box */
.dice2{position:absolute;inset:0;pointer-events:none}
.dice2{perspective:600px}
.dice2 .dw{position:absolute;left:0;top:0;width:var(--ds);height:var(--ds);transform-style:preserve-3d;will-change:transform}
.dice2{--ds:clamp(16px,1.7vw,24px)}
.dice2 .cube{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.dice2 .cf{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:14%;border-radius:18%;background:var(--color-accent-900);box-shadow:inset 0 0 0 1px var(--color-accent-500);backface-visibility:hidden}
.sq.hob .dice2 .cf i,.sq.hob:hover .dice2 .cf i,.dice-layer .cf i{width:72%;height:72%;margin:auto;border-radius:50%;background:var(--color-accent-200);transform:none!important;transition:none!important;font-size:0}
.dice2 .f-fr{transform:translateZ(calc(var(--ds) / 2))}
.dice2 .f-bk{transform:rotateY(180deg) translateZ(calc(var(--ds) / 2))}
.dice2 .f-rt{transform:rotateY(90deg) translateZ(calc(var(--ds) / 2))}
.dice2 .f-lt{transform:rotateY(-90deg) translateZ(calc(var(--ds) / 2))}
.dice2 .f-tp{transform:rotateX(90deg) translateZ(calc(var(--ds) / 2))}
.dice2 .f-bt{transform:rotateX(-90deg) translateZ(calc(var(--ds) / 2))}
/* Games + Traveling: icon only (label kept for screen readers), no "+" marker */
.f2.hob .hl,.f3.hob.travel .hl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.f2.hob::after,.f3.hob.travel::after{display:none!important}
.tv-ic .gsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tv-ic .g-oc{fill:var(--color-neutral-900)}
.tv-ic .g-gr{fill:none;stroke:var(--color-accent-800);stroke-width:.6}
.tv-ic .g-ld{fill:var(--color-accent-700);stroke:var(--color-accent-500);stroke-width:.5;stroke-linejoin:round}
.tv-ic .g-rim{fill:none;stroke:var(--color-accent-500);stroke-width:1}
.sq.travel .plane{position:relative;z-index:1;width:1.15em;height:1.15em;font-size:clamp(26px,3vw,40px);fill:none;stroke:var(--color-accent-300);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:transform .3s}
.sq.travel .plane .body{fill:var(--color-surface)}
.sq.travel .plane .wing-far{opacity:.55}
.sq.travel:hover .plane{transform:translateY(-2px)}
.tv-ic .globe{z-index:0}
#bgnet.work .nw{opacity:0!important}
#layer-work .pulse{display:none}
/* Selected work lines: same look as the background network */
#layer-work .trace{stroke:#313441;stroke-width:1;vector-effect:non-scaling-stroke;opacity:1}
#bgnet path,#bgnet circle{transition:opacity .4s}
#bgnet .bs{fill:var(--color-accent-300);filter:drop-shadow(0 0 2px rgba(145,132,217,.6))}
header,main,footer{position:relative;z-index:1}
body{position:relative;background:var(--color-bg);color:var(--color-text);font:400 15px/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--color-accent-300);text-underline-offset:3px}
a:hover{color:var(--color-accent-200)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.lbl{font:400 11.5px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--color-neutral-400)}
.fade{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--color-divider) 48px,var(--color-divider) calc(100% - 48px),transparent)}

/* header */
header#hdr{position:fixed;top:14px;right:14px;z-index:60}
.hbar{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid var(--color-neutral-700);border-radius:999px;background:color-mix(in oklch,var(--color-bg) 82%,transparent);backdrop-filter:blur(8px);box-shadow:var(--shadow-md)}
#h-toggle{width:34px;height:34px;flex:none;display:grid;place-items:center;padding:0;line-height:1;border:0;border-radius:999px;background:none;color:var(--color-neutral-200);cursor:pointer;font-size:17px;transition:background .2s,color .2s}
#h-toggle:hover{background:color-mix(in oklch,var(--color-accent) 16%,transparent);color:var(--color-accent-200)}
#h-toggle i{grid-area:1/1;display:block;width:1em;height:1em;line-height:1;transition:opacity .2s,transform .25s}
#h-toggle i::before{display:block;line-height:1}
.hbar .lang{border-radius:999px;margin-right:2px}
#hdr.collapsed #h-toggle .ph-x,#hdr:not(.collapsed) #h-toggle .ph-list{opacity:0;transform:rotate(-90deg)}
#h-panel{display:flex;align-items:center;gap:18px;overflow:hidden;max-width:560px;opacity:1;padding-right:6px;transition:max-width .35s cubic-bezier(.4,0,.2,1),opacity .25s,padding .35s}
#hdr.collapsed #h-panel{max-width:0;opacity:0;padding-right:0;pointer-events:none}
header nav{display:flex;gap:18px;align-items:center;white-space:nowrap}
header nav a{text-decoration:none;font:400 11.5px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--color-neutral-400)}
header nav a:hover{color:var(--color-accent-300)}
@media (max-width:720px){#h-panel{flex-direction:column;align-items:flex-start;gap:12px}
  .hbar{align-items:flex-start;border-radius:18px}
  #hdr:not(.collapsed) #h-panel{padding:8px 10px 8px 0}
  header nav{flex-direction:column;align-items:flex-start;gap:12px}}
.lang{display:flex;border:var(--line);border-radius:var(--radius-md);overflow:hidden}
.lang button{background:none;border:0;font:400 11.5px var(--mono);padding:5px 9px;cursor:pointer;color:var(--color-neutral-400)}
.lang button:hover{color:var(--color-text)}
.lang button[aria-pressed="true"]{background:var(--color-accent-900);color:var(--color-accent-200)}
@media (max-width:720px){header nav a{display:none}}

/* hero */
.hero{padding:clamp(76px,8vw,96px) 0 clamp(40px,6vw,72px);background:radial-gradient(ellipse 70% 60% at 15% 0%,#1d2038 0%,transparent 70%)}
.hero h1{font-weight:500;font-size:clamp(44px,7.5vw,88px);line-height:.95;letter-spacing:-.035em}
.hero-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px clamp(16px,3vw,48px)}
.hero-head h1{flex:none}
.hero .desc{flex:0 1 26rem;margin:0 0 .35em;max-width:26rem;text-align:right;color:var(--color-neutral-300);font-size:clamp(15px,1.6vw,17px);line-height:1.55;text-wrap:pretty}
#board{position:relative;max-width:980px;margin:clamp(8px,2vw,20px) auto 0}
.hero .fib{margin-top:clamp(20px,3vw,36px)}
#board svg{width:100%;height:auto;display:block;overflow:visible}
.trace{fill:none;stroke:#313441;stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .4s}
.trace.live{stroke:var(--color-neutral-600)}
.trace.hot{stroke:var(--color-accent)}
.pulse{fill:none;stroke:var(--color-accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:14 470;filter:drop-shadow(0 0 4px rgba(145,132,217,.8))}
.pulse{animation:charge 6s linear infinite}
@media (prefers-reduced-motion:reduce){.pulse{animation-duration:11s}}
@keyframes charge{from{stroke-dashoffset:484}to{stroke-dashoffset:0}}
.sig{fill:var(--color-neutral-400);opacity:.22;pointer-events:none}
.spike{fill:var(--color-accent-200);filter:drop-shadow(0 0 5px var(--color-accent))}
.node{cursor:pointer;transition:opacity .25s}
.node .pad{fill:var(--color-surface);stroke:var(--color-neutral-700);stroke-width:1;rx:8;transition:fill .2s,stroke .2s}
.node text{font-family:var(--font-body);font-size:14.5px;font-weight:500;fill:var(--color-text)}
.node:hover .pad{stroke:var(--color-accent-500)}
.node.focal .pad{fill:var(--color-accent-900);stroke:var(--color-accent-700)}
.node.focal text{fill:var(--color-accent-200)}
.node.apart .pad{fill:var(--color-bg);stroke-dasharray:4 4;stroke:var(--color-neutral-600)}
.node .pad{pointer-events:visible}
.layer.off,.layer.off *{pointer-events:none!important}
.node text{pointer-events:none}
.trace.dashed{stroke-dasharray:4 5;stroke:#313441}
.node.apart text{fill:var(--color-neutral-400)}
.node.is-on .pad{stroke:var(--color-accent);stroke-width:1.5;filter:drop-shadow(0 0 14px rgba(145,132,217,.45))}
.node:focus{outline:none}
.node:focus-visible .pad{stroke:var(--color-accent);stroke-width:2}
#board.has-sel .node:not(.is-on){opacity:.35}
.axis{font:400 10.5px var(--mono);fill:var(--color-neutral-600);letter-spacing:.04em;text-transform:uppercase}
.nodelist{display:none;list-style:none}
.nodelist button{width:100%;text-align:left;background:none;border:0;border-bottom:var(--line);padding:14px 0;font:500 16px var(--font-body);color:var(--color-text);cursor:pointer;display:flex;justify-content:space-between}
.nodelist button::after{content:"+";font-family:var(--mono);color:var(--color-neutral-500)}
.nodelist button.is-on{color:var(--color-accent-300)}
.nodelist button.is-on::after{content:"–"}
@media (max-width:720px){#board svg{display:none}.nodelist{display:block}}

.pop{position:absolute;z-index:10;width:300px;background:var(--color-surface);border:1px solid var(--color-accent-700);border-radius:var(--radius-md);padding:16px 18px 18px;box-shadow:var(--shadow-lg)}
.pop[hidden]{display:none}
.pop.sheet{position:fixed;left:16px!important;right:16px;bottom:16px;top:auto!important;width:auto}
.pop h2{font-weight:500;font-size:20px;letter-spacing:-.015em;line-height:1.2;margin-bottom:8px;padding-right:24px;color:var(--color-accent-200)}
.pop p{font-size:14px;line-height:1.55;color:var(--color-neutral-300)}
.pop .x{position:absolute;top:8px;right:8px;width:28px;height:28px;background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;font:300 20px/1 var(--font-body);color:var(--color-neutral-400)}
.pop .x:hover{color:var(--color-text);background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.pop:focus{outline:none}
#p-link{margin-top:14px;min-height:34px;font-size:13px}
#p-link[hidden]{display:none}
.layer{transition:opacity .45s ease,visibility 0s}

.layer.off{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.node text.sub{font:400 10.5px var(--mono);fill:var(--color-neutral-400);letter-spacing:.03em}
#p-list{list-style:none;display:grid;gap:2px;margin-top:4px}
#p-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;padding:9px 0;border-top:var(--line)}
#p-list .n{font:400 11px var(--mono);color:var(--color-neutral-500);padding-top:2px}
#p-list b{display:block;font-weight:500;font-size:14px;color:var(--color-text);line-height:1.3}
#p-list a{text-decoration:none}
#p-list a b{color:var(--color-accent-200)}
#p-list a:hover b{text-decoration:underline}
#p-list .k{font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--color-neutral-400)}

/* sections */
section.sec{padding:clamp(40px,6vw,72px) 0;scroll-margin-top:8px}
.sechead{display:flex;align-items:center;gap:10px;margin-bottom:clamp(24px,4vw,40px)}
.sechead::before{content:"";width:18px;height:1px;background:var(--color-accent)}

/* fibonacci */
.fib{position:relative;display:grid;grid-template-columns:repeat(21,minmax(0,1fr));grid-template-rows:repeat(13,minmax(0,1fr));aspect-ratio:21/13;gap:2px}
.f13{grid-column:1/14;grid-row:1/14}.f8{grid-column:14/22;grid-row:1/9}.f5{grid-column:17/22;grid-row:9/14}
.f3{grid-column:14/17;grid-row:11/14}.f2{grid-column:14/16;grid-row:9/11}.f1a{grid-column:16/17;grid-row:9/10}.f1b{grid-column:16/17;grid-row:10/11}
.sq{background:var(--color-surface);border-radius:var(--radius-sm);position:relative;overflow:hidden;min-width:0;min-height:0}
.sq > .lbl{position:absolute;left:10px;top:8px;z-index:2;font-size:clamp(8px,.85vw,10px);pointer-events:none;color:var(--color-neutral-700)}
.sqhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.sqhead .lbl{color:var(--color-neutral-700)}
.sqhead .lbl b{font-weight:400;color:var(--color-neutral-300)}
a.sq.city{color:inherit;text-decoration:none;cursor:pointer;transition:box-shadow .2s}
a.sq.city:hover{box-shadow:inset 0 0 0 1px var(--color-accent-700)}
.sq.city{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(10px,1.6vw,20px);background:radial-gradient(circle at 80% 20%,#262a48 0%,var(--color-surface) 65%)}
.sq.city .big{font-size:clamp(24px,3.4vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1}
.sq.city .val{font:400 clamp(10px,1vw,12.5px) var(--mono);color:var(--color-accent-300);margin-top:8px}
.sq.icons{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:var(--color-bg)}
.sq.icons > div{background:var(--color-surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--color-accent-300);transition:background .2s}
.sq.icons > div:hover{background:#2a2c3b}
.sq.icons i{font-size:clamp(16px,2vw,26px)}
.sq.icons .lbl{font-size:clamp(7px,.75vw,10px);color:var(--color-neutral-400)}
.sq.glyph{display:grid;place-items:center;font-size:clamp(14px,1.8vw,22px);font-weight:300;color:var(--color-accent-200)}
.fib > svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.fib > svg:not(#fibnet) path{fill:none;stroke:var(--color-neutral-500);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.18}

/* hobby squares */
button.sq.hob{border:0;font:inherit;cursor:pointer;width:100%;height:100%;padding:0}
button.sq.hob::after{content:"+";position:absolute;right:8px;bottom:5px;font:400 11px var(--mono);color:var(--color-neutral-600);transition:color .2s}
button.sq.hob:hover::after,button.sq.hob[aria-expanded="true"]::after{color:var(--color-accent-300)}
button.sq.hob[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--color-accent-700);background:#2a2c3b}
.f1a.hob::after,.f1b.hob::after{display:none}
.f1b .dice2,.dice-layer{--ds:clamp(9px,.95vw,14px)}
.dice-layer{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:visible;perspective:600px}
body > .dw{z-index:900;pointer-events:none;--ds:clamp(9px,.95vw,14px)}
body > .dw .cf{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:14%;border-radius:18%;background:var(--color-accent-900);box-shadow:inset 0 0 0 1px var(--color-accent-500);backface-visibility:hidden}
body > .dw .cf i{width:72%;height:72%;margin:auto;border-radius:50%;background:var(--color-accent-200)}
body > .dw,body > .dw .cube{transform-style:preserve-3d}body > .dw{position:absolute;left:0;top:0;width:var(--ds);height:var(--ds)}body > .dw .cube{position:absolute;inset:0}
body > .dw .f-fr{transform:translateZ(calc(var(--ds) / 2))}body > .dw .f-bk{transform:rotateY(180deg) translateZ(calc(var(--ds) / 2))}body > .dw .f-rt{transform:rotateY(90deg) translateZ(calc(var(--ds) / 2))}body > .dw .f-lt{transform:rotateY(-90deg) translateZ(calc(var(--ds) / 2))}body > .dw .f-tp{transform:rotateX(90deg) translateZ(calc(var(--ds) / 2))}body > .dw .f-bt{transform:rotateX(-90deg) translateZ(calc(var(--ds) / 2))}
.f2.hob .skate.fan{width:clamp(30px,3.4vw,46px);height:clamp(30px,3.4vw,46px)}
.mapbox:has(.fw-layer) > #m-up{visibility:hidden} /* the base map's Reset peeked 2px over the Fold the World edge */
.skate .sk-classic{display:none}.skate .sk-mono{display:inline} /* the monochrome board is the only board; Dev › board colour tints it */
.skate.fan{stroke-width:12}
.skate.fan rect{fill:url(#deckBack);stroke:var(--color-neutral-300)} /* one of 3 deck backs, picked per page load */
.sq.hob{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--color-neutral-200);text-decoration:none;transition:background .2s}
.sq.hob:hover{background:#2a2c3b;color:var(--color-text)}
.sq.hob i{color:var(--color-accent-300);font-size:26px;transition:transform .3s}
.sq.hob .skate{width:26px;height:26px;fill:none;stroke:var(--color-accent-300);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.sq.hob:hover i,.sq.hob:hover .skate{transform:translateY(-2px)}
.sq.hob .hl{font-size:12px;line-height:1.2}
.f3.hob i{font-size:clamp(26px,3vw,40px)}
.f3.hob .hl{font-size:clamp(12px,1.2vw,14px)}
.sq.travel{color:var(--color-accent-200)}
.sq.travel:hover{color:var(--color-accent-100);box-shadow:inset 0 0 0 1px var(--color-accent-700)}
.sq.travel em{position:absolute;left:auto;top:auto;right:10px;bottom:8px;font-style:normal;font-size:10px;color:var(--color-accent-400)}
.f1a.hob .hl,.f1b.hob .hl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.f1a.hob i,.f1b.hob i{font-size:clamp(14px,1.6vw,22px)}
.f1a.hob .skate{width:clamp(14px,1.6vw,22px);height:clamp(14px,1.6vw,22px)}

/* TEST speed bar */
.speed[hidden],#b-test[hidden],#b-return[hidden]{display:none !important}
.speed{display:inline-flex;border:1px solid var(--color-neutral-700);border-radius:999px;overflow:hidden}
.skyctl{display:inline-flex;align-items:center}
.devwrap{position:fixed;right:18px;bottom:18px;z-index:1300}
.dv-rng{display:inline-flex;align-items:center;gap:6px;font:400 10px var(--mono);color:var(--color-neutral-300);padding:2px 8px;border:1px solid var(--color-neutral-700);border-radius:999px}
.dv-rng input{width:70px;accent-color:var(--color-accent)}
.dv-rng output{min-width:2.4em;color:var(--color-accent-200)}
.devtip{position:absolute;right:0;bottom:calc(100% + 8px);width:max-content;max-width:min(300px,calc(100vw - 36px));display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:8px;background:#1d1f2e;border:1px solid #33354a;box-shadow:var(--shadow-md);font:400 11px/1.4 var(--mono);color:var(--color-neutral-300);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s,transform .15s}
.dv-sec{display:flex;flex-direction:column;gap:6px;padding-top:9px;margin-top:6px;border-top:1px solid #33354a}
.dv-k{color:var(--color-neutral-500);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.dv-tl{display:flex;align-items:center;gap:10px}
.dv-tl input{flex:1;min-width:150px;accent-color:var(--color-accent);height:14px;margin:0;cursor:pointer}
.dv-tl input:disabled{opacity:.45;cursor:default}
.dv-t{font-variant-numeric:tabular-nums;color:var(--color-neutral-200);white-space:nowrap}
.dv-btn{all:unset;cursor:pointer;align-self:flex-start;font:400 10px var(--mono);padding:2px 8px;border:1px solid #33354a;border-radius:999px;color:var(--color-neutral-200);transition:background .2s,border-color .2s}
.dv-btn:hover{background:#2a2c3b;border-color:var(--color-accent-700)}
.dv-btn[aria-pressed="true"]{background:var(--color-accent-900);border-color:var(--color-accent);color:var(--color-accent-200)}
.dv-sel{appearance:none;cursor:pointer;font:400 10px var(--mono);padding:2px 20px 2px 8px;border:1px solid #33354a;border-radius:999px;color:var(--color-neutral-200);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%239184d9' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 8px center}
.dv-sel:hover{background-color:#2a2c3b;border-color:var(--color-accent-700)}
.dv-sel:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.dv-sel option{background:var(--color-bg);color:var(--color-text)}
#dv-pplean{min-width:0;flex:1 1 0}
.dv-dual{position:relative;flex:1 1 0;min-width:0;height:11px}
.dv-dual::before{content:"";position:absolute;left:2px;right:2px;top:2.5px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--color-neutral-700) var(--lo,0%),var(--color-accent) var(--lo,0%),var(--color-accent) var(--hi,50%),var(--color-neutral-700) var(--hi,50%))}
#dv-pplean{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;margin:5px 0;background:linear-gradient(90deg,var(--color-neutral-700) var(--lo,0%),var(--color-accent) var(--lo,0%),var(--color-accent) var(--hi,50%),var(--color-neutral-700) var(--hi,50%))}
#dv-pplean::-webkit-slider-runnable-track{background:transparent;height:6px}#dv-pplean::-moz-range-track{background:transparent}#dv-pplean::-moz-range-progress{background:transparent}
#dv-pplean::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-5px;width:11px;height:11px;border-radius:50%;background:var(--color-accent);border:0;cursor:pointer}#dv-pplean::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--color-accent);border:0;cursor:pointer}
.dv-dual input{position:absolute;inset:0;width:100%;min-width:0;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.dv-dual input::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--color-accent);border:0;cursor:pointer}.dv-dual input::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--color-accent);border:0;cursor:pointer}.dv-dual input::-webkit-slider-runnable-track{background:transparent}.dv-dual input::-moz-range-track{background:transparent}.dv-dual input::-moz-range-progress{background:transparent}
.dv-dual input::-webkit-slider-thumb{pointer-events:auto}.dv-dual input::-moz-range-thumb{pointer-events:auto}
.dv-dual input + input::-webkit-slider-runnable-track{background:transparent}.dv-dual input + input::-moz-range-track{background:transparent}
.dv-tl:has(.dv-dual) .dv-bkl,.dv-tl:has(#dv-pplean) .dv-bkl{white-space:nowrap}
.dv-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.dv-btn:disabled{opacity:.45;cursor:default}
.dv-note{color:var(--color-neutral-400)}
.dv-row{display:flex;flex-wrap:wrap;gap:6px}
.dv-bkl{width:84px;flex:none;color:var(--color-neutral-300)}
#dv-books .dv-tl input{min-width:110px}
#dv-books .dv-t{width:3.4em;text-align:right}
.dv-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dv-pane .dv-hd .dv-k{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;color:var(--color-neutral-500);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.dv-pane .dv-hd .dv-k:hover{color:var(--color-neutral-200)}
.dv-pane .dv-hd .dv-k:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.dv-pane .dv-hd .dv-k::before{content:"›";display:inline-block;width:8px;font-size:13px;line-height:1;text-align:center;transform:rotate(90deg);transition:transform .15s}
.dv-pane .dv-sec.col .dv-hd .dv-k::before{transform:none}
.dv-pane .dv-sec.col > :not(.dv-hd){display:none!important}
.dv-reset{all:unset;cursor:pointer;font:400 10px var(--mono);padding:1px 6px;border:1px dashed oklch(0.55 0.12 25);border-radius:4px;color:oklch(0.78 0.1 25);transition:background .2s}
.dv-reset:hover{background:oklch(0.3 0.06 25)}
.dv-reset:active{background:oklch(0.38 0.08 25)}
.dv-reset:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.dv-phases{gap:4px}
.dv-div{display:block;height:1px;margin:6px 0;background:linear-gradient(90deg,transparent,var(--color-neutral-700) 20%,var(--color-neutral-700) 80%,transparent)}
.dv-k em{font-style:normal;color:var(--color-accent-300)}
.dv-ph{position:relative;display:inline-flex}
.dv-ph > .dv-btn[aria-pressed="true"],.dv-sub button[aria-pressed="true"]{border-color:var(--color-accent);color:var(--color-accent-200);background:var(--color-accent-900)}
.dv-sub{position:absolute;left:0;bottom:100%;z-index:5;display:none;flex-direction:column;min-width:96px;padding:4px;margin-bottom:4px;border:1px solid var(--color-neutral-700);border-radius:var(--radius-md,8px);background:var(--color-surface,#1d2030);box-shadow:var(--shadow-md)}
.dv-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px}
.dv-ph:hover > .dv-sub,.dv-ph:focus-within > .dv-sub{display:flex}
.dv-sub button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:10px;padding:3px 7px;border:1px solid transparent;border-radius:4px;font:400 10px var(--mono);color:var(--color-neutral-200)}
.dv-sub button:hover{background:var(--color-accent-900);color:var(--color-text)}
.dv-sub button:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}
.dv-ph:hover > .dv-sub2,.dv-ph:focus-within > .dv-sub2{flex-direction:row;gap:4px}.dv-col{display:flex;flex-direction:column}.dv-col + .dv-col{padding-left:4px;border-left:1px solid var(--color-neutral-700)}
.dv-sub b{font-weight:400}.dv-sub i{font-style:normal;color:var(--color-neutral-400)}
.dv-info{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;color:var(--color-neutral-200)}
.dv-info i{font-style:normal;color:var(--color-neutral-500)}
.devtip .speed{align-self:flex-start}
.devtip b{font-weight:500;color:var(--color-text);margin-bottom:2px}
.devtip code{color:var(--color-accent-200)}
.devwrap.on .dv-rng{display:inline-flex;align-items:center;gap:6px;font:400 10px var(--mono);color:var(--color-neutral-300);padding:2px 8px;border:1px solid var(--color-neutral-700);border-radius:999px}
.dv-rng input{width:70px;accent-color:var(--color-accent)}
.dv-rng output{min-width:2.4em;color:var(--color-accent-200)}
.devwrap:not(.on) .devtip{display:none}
.dv-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dv-top b{margin:0}
.dv-tabs{display:inline-flex;border:1px solid var(--color-neutral-700);border-radius:999px;overflow:hidden}
.dv-tab{all:unset;cursor:pointer;font:400 10px var(--mono);padding:2px 8px;color:var(--color-neutral-400)}
.dv-tab+.dv-tab{border-left:1px solid var(--color-neutral-700)}
.dv-tab:hover{color:var(--color-text);background:var(--color-neutral-800)}
.dv-tab[aria-selected="true"]{color:var(--color-accent-100);background:var(--color-accent-900)}
.dv-tab:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.dv-pane{display:flex;flex-direction:column;gap:3px}
.dv-pane[hidden]{display:none}
body.dv-lines #bgnet .hid,body.dv-lines #fibnet .hid{opacity:1!important}
body.dv-lines #bgnet:not(.work) .wb{opacity:0!important}
body > .dw{pointer-events:auto;cursor:pointer;z-index:50}
.gsvg .g-bln{fill:var(--color-accent-200);opacity:.75;filter:drop-shadow(0 0 .4px rgba(184,176,232,.7))}
html{overflow-x:clip} /* planes leaving the screen never add a side scroll */
.sq.hob.dice-off{cursor:default}
.sq.travel.dice-off:hover{background:var(--color-surface)!important;color:var(--color-accent-200)!important;box-shadow:none!important}
.sq.hob.dice-off:hover{background:var(--color-surface)!important;color:var(--color-neutral-200)!important;box-shadow:none!important}
.sq.hob.dice-off:hover i,.sq.hob.dice-off:hover svg{transform:none!important}
.devwrap.on .devtip{opacity:1;transform:none;pointer-events:auto}
.dv-rng{display:inline-flex;align-items:center;gap:6px;font:400 10px var(--mono);color:var(--color-neutral-300);padding:2px 8px;border:1px solid var(--color-neutral-700);border-radius:999px}
.dv-rng input{width:70px;accent-color:var(--color-accent)}
.dv-rng output{min-width:2.4em;color:var(--color-accent-200)}
.devtip{max-height:calc(100vh - 80px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.devtip .dv-sub{position:fixed;bottom:auto;margin:0}
.dv-ci{position:relative;display:flex}
.dv-ci > button{flex:1}
.devtip .dv-sub .dv-sub2{display:none}
.devtip .dv-ci:hover > .dv-sub2,.devtip .dv-ci:focus-within > .dv-sub2,.devtip .dv-ci.open > .dv-sub2{display:flex}
.devtip .dv-sub:has(> .dv-ci:hover) > .dv-ci:not(:hover) > .dv-sub2{display:none}
.devfab{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--color-neutral-700);background:var(--color-surface);color:var(--color-neutral-300);font:400 11px var(--mono);letter-spacing:.06em;cursor:pointer;box-shadow:var(--shadow-md);transition:border-color .2s,color .2s,background .2s}
.devfab:hover{border-color:var(--color-accent-500);color:var(--color-text)}
.devfab:active{background:color-mix(in oklch,var(--color-accent-400) 20%,var(--color-surface))}
.devfab:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.devfab i{width:7px;height:7px;border-radius:50%;background:var(--color-neutral-600)}
.devfab[aria-pressed="true"]{border-color:oklch(.62 .19 25);background:oklch(.3 .09 25);color:oklch(.95 .04 25)}
.devfab[aria-pressed="true"] i{background:oklch(.66 .22 25);box-shadow:0 0 6px oklch(.66 .22 25)}
.sqright{display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.skyctl:not(:has(> :not([hidden]))){display:none}
.egg{display:inline-flex;gap:6px}.egg[hidden]{display:none}
/* night sky: the pile box becomes an info + control panel */
#skypanel{display:none}
body.atsky #pile{display:none}
body.atsky #skypanel{display:grid;flex:1;min-width:0;height:90px;overflow:hidden;grid-template:minmax(0,1fr) minmax(0,1fr) / max-content minmax(0,1fr);gap:4px;font:400 10px/1.25 var(--font-body);color:var(--color-neutral-300)}
.skyp .sp-box{min-width:0;min-height:0;overflow:hidden;padding:5px 8px;border:1px solid color-mix(in oklch,var(--color-neutral-700) 55%,transparent);border-radius:var(--radius-sm);background:transparent}
.skyp .sp-ov,.skyp .sp-ctl{display:flex;flex-direction:column;justify-content:space-between;border-color:color-mix(in oklch,var(--color-neutral-700) 28%,transparent)}
.skyp .sp-ov .sp-line,.skyp .sp-ctl .sp-line{margin-top:0;height:17px}
.skyp .sp-ov,.skyp .sp-ctl{justify-content:flex-start;gap:4px}
.skyp .sp-k{display:block;font:400 8.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-500)}
.skyp .sp-line{display:flex;align-items:center;gap:8px;margin-top:2px;min-width:0;white-space:nowrap}
.skyp .sp-line > span:not(.sp-time){overflow:hidden;text-overflow:ellipsis}
.skyp .sp-time{font:500 13px/1 var(--mono);color:var(--color-text)}
.skyp .sp-ov #sp-season{color:var(--color-neutral-400)}
.skyp .sp-ctl .egd-b{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;gap:6px;font:400 10px var(--mono);line-height:13px;padding:1px 8px;border:1px solid var(--color-accent-700);border-radius:999px;color:var(--color-accent-200);white-space:nowrap}
.skyp .sp-ctl .egd-b:hover:not(:disabled){background:var(--color-accent-900);border-color:var(--color-accent-500)}
.skyp .sp-ctl .egd-b[aria-expanded="true"]{background:var(--color-accent-900);border-color:var(--color-accent-500)}
.skyp .sp-ctl .egd-b:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.skyp .sp-ctl .egd-b:disabled{cursor:default;opacity:.45}
.skyp .sp-lock{font:400 8.5px var(--mono);color:var(--color-neutral-500)}
.skyp .sp-lock[hidden]{display:none}
.skyp .sp-cn{grid-column:2;grid-row:1 / span 2}
/* controls not unlocked yet: no Controls box; the Berlin night sky box takes the full height, its lines stacked so it sits narrower */
.skyp:not(.locked) .sp-ov{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.skyp:not(.locked) .sp-ctl{border-top-color:transparent;border-top-left-radius:0;border-top-right-radius:0;position:relative}
.skyp:not(.locked) .sp-ctl::before{content:"";position:absolute;left:8px;right:8px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--color-neutral-200) 18%,var(--color-neutral-200) 82%,transparent)} /* one box: the divider fades out at both ends */
.skyp.locked .sp-ctl{display:none}
.skyp.locked .sp-ov{grid-row:1 / span 2;padding:5px 7px}
.skyp.locked .sp-ov .sp-line{flex-direction:column;align-items:flex-start;height:auto;gap:3px}
.skyp .sp-cn strong{display:block;margin-top:2px;font-size:12px}
.skyp .sp-cn p{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-top:2px}
.skyp strong{font-weight:500;color:var(--color-text);font-size:11px}
.skyp strong small{font-size:.8em;font-weight:400;color:var(--color-neutral-400)}
.skyp p{margin:1px 0 0;font-size:9.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skyp .sp-ev{color:var(--color-accent-200)}
.skyp .sp-ev[hidden]{display:none}
.skyp .sp-i:has(.sp-ev:not([hidden])) #sp-md{display:none}
@media (max-width:720px){body.atsky #skypanel{height:auto;grid-template:auto / minmax(0,1fr)}.skyp p{white-space:normal}}
.egd-b i{font-style:normal;display:inline-block;transition:transform .2s}
.egd-b[aria-expanded="true"]{background:var(--color-accent-900);border-color:var(--color-accent-500)}
.egd-b[aria-expanded="true"] i{transform:rotate(180deg)}
.egm{position:fixed;z-index:1250;display:flex;align-items:flex-start;gap:6px;font:400 11px var(--mono)}
.egm[hidden]{display:none}
.egm .col{display:flex;flex-direction:column;gap:1px;min-width:120px;padding:6px;background:var(--color-surface,#1d1f2e);border:1px solid var(--color-neutral-700);border-radius:var(--radius-md,8px);box-shadow:var(--shadow-md)}
.egm button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:5px 8px;border-radius:6px;color:var(--color-neutral-200)}
.egm button:hover:not(:disabled),.egm button[aria-current="true"]{background:var(--color-accent-900);color:var(--color-accent-100)}
.egm button:active:not(:disabled){background:color-mix(in oklch,var(--color-accent-400) 25%,transparent)}
.egm button:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
.egm button:disabled{cursor:default;opacity:.45}
.egm button.off{color:var(--color-neutral-500)}
.egm button em{font-style:normal;color:var(--color-neutral-500)}
.egm .hint{padding:5px 8px;color:var(--color-neutral-500)}
.egg button{all:unset;cursor:pointer;font:400 10px var(--mono);line-height:13px;padding:1px 8px;border:1px solid var(--color-accent-700);border-radius:999px;color:var(--color-accent-200);transition:background .2s,border-color .2s}
.egg button:hover{background:var(--color-accent-900);border-color:var(--color-accent-500)}
.egg button:active{background:color-mix(in oklch,var(--color-accent-400) 25%,transparent)}
.egg button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.speed button{all:unset;cursor:pointer;font:400 10px var(--mono);line-height:13px;padding:1px 8px;color:var(--color-neutral-400)}
.speed button + button{border-left:1px solid var(--color-neutral-700)}
.speed button:hover{color:var(--color-text);background:var(--color-neutral-800)}
.speed button[aria-pressed="true"]{color:var(--color-accent-200);background:color-mix(in oklch,var(--color-accent) 18%,transparent)}
.speed button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.nd{all:unset;cursor:pointer;font:400 10px var(--mono);padding:2px 8px;border:1px solid var(--color-neutral-700);border-radius:999px;color:var(--color-neutral-300)}
.nd:hover{color:var(--color-text);background:var(--color-neutral-800)}
.nd:active{color:var(--color-accent-200)}
.nd:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
/* hidden niche + lever, top-right corner of the shelf */
.niche{position:absolute;right:4px;bottom:0;z-index:3;width:clamp(16px,1.6vw,24px);height:58%;overflow:hidden;border-radius:2px;pointer-events:none}
.niche.open{pointer-events:auto}
.nback{position:absolute;inset:0;background:linear-gradient(180deg,#0c0d14,#14151f);box-shadow:inset 0 0 6px rgba(0,0,0,.8)}
.ndoor{position:absolute;inset:0;z-index:2;transition:transform .9s cubic-bezier(.45,0,.2,1);background:inherit}
.niche.open .ndoor{transform:translateY(-101%)}
.nlever{all:unset;position:absolute;inset:10% 0 8%;cursor:pointer}
.nlever::before{content:"";position:absolute;left:50%;top:50%;width:62%;height:16%;transform:translate(-50%,-50%);border-radius:2px;background:linear-gradient(180deg,#2a2c3c,#16171f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.6)}
.nlever::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--color-neutral-500);z-index:2}
.nlever i{position:absolute;left:50%;bottom:50%;width:3px;height:44%;margin-left:-1.5px;border-radius:1.5px;background:linear-gradient(90deg,var(--color-neutral-400),var(--color-neutral-200),var(--color-neutral-400));transform-origin:50% 100%;transition:transform .5s cubic-bezier(.5,-.2,.3,1.2);z-index:1}
.nlever i::after{content:"";position:absolute;left:50%;top:-4px;width:10px;height:7px;margin-left:-5px;border-radius:3px;background:linear-gradient(180deg,var(--color-accent-200),var(--color-accent-400));box-shadow:0 0 6px color-mix(in oklch,var(--color-accent) 60%,transparent)}
.nlever:hover i::after{background:linear-gradient(180deg,var(--color-accent-100),var(--color-accent-300))}
.nlever.down i{transform:scaleY(-1)}
.nlever:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
/* 13: bookshelf */
.shelfsq{padding:clamp(12px,1.8vw,24px);display:flex;flex-direction:column}
#shelves{flex:1;min-height:0;display:grid;grid-auto-rows:minmax(0,1fr);overflow:hidden;border:6px solid #2b2e42;border-top-width:8px;border-radius:4px;background:linear-gradient(180deg,#191b28,#1d1f2e);box-shadow:inset 0 0 28px rgba(0,0,0,.45),0 10px 24px -12px rgba(0,0,0,.6)}
.shelfrow{display:grid;grid-template-columns:30px minmax(0,1fr);min-height:0;position:relative;border-bottom:7px solid #34374d}
.shelfrow:last-child{border-bottom-width:8px;border-bottom-color:#2b2e42}
.shelfrow::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%);pointer-events:none}
.shelfrow:not(:last-child)::before{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(0deg,rgba(0,0,0,.35),transparent);pointer-events:none}
.rowhead{display:flex;align-items:center;justify-content:center;padding:6px 0;border-right:6px solid #2b2e42;background:#20222f;min-width:0;overflow:hidden}
.rowhead .lbl{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9.5px;line-height:1;white-space:nowrap;color:var(--color-neutral-300);overflow:hidden;text-overflow:ellipsis;max-height:100%}
.rowhead .lbl b{font-weight:400;color:var(--color-neutral-500)}
.shelf{display:flex;align-items:flex-end;gap:2px;padding:8px 8px 0;overflow:hidden;min-width:0}
.spine{flex:none;border:0;cursor:pointer;border-radius:2px 2px 0 0;display:flex;align-items:center;justify-content:center;padding:10px 2px;transition:transform .25s;
  background-image:linear-gradient(180deg,transparent 7%,rgba(255,255,255,.1) 7%,rgba(255,255,255,.1) 9%,transparent 9%,transparent calc(100% - 10px),rgba(255,255,255,.1) calc(100% - 10px),rgba(255,255,255,.1) calc(100% - 8px),transparent calc(100% - 8px));
  box-shadow:inset -3px 0 0 rgba(0,0,0,.22),inset 2px 0 0 rgba(255,255,255,.05)}
.spine span{writing-mode:vertical-rl;transform:rotate(180deg);font:500 clamp(8px,.75vw,10.5px)/1.15 var(--font-body);overflow:hidden;max-height:100%;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.spine.t0{background-color:#2e3045;color:var(--color-neutral-200)}
.spine.t1{background-color:#2e3045;color:var(--color-neutral-200)}
.spine.t2{background-color:#2e3045;color:var(--color-neutral-200)}
.spine.t3{background-color:#2e3045;color:var(--color-neutral-200)}
.spine.t4{background-color:#2e3045;color:var(--color-neutral-200)}
.spine.sug{background:transparent;border:1.5px dashed var(--color-accent-600);border-bottom:0;color:var(--color-accent-300);box-shadow:none}
.spine.lean{transform:rotate(9deg);transform-origin:bottom left;margin-left:6px}
.spine:hover,.spine:focus-visible{transform:translateY(-6px)}
.spine.lean:hover,.spine.lean:focus-visible{transform:rotate(9deg) translateY(-6px)}
.shelfsq{position:relative}
.vault{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:4px}
.vault #shelves{position:relative;z-index:2;transition:transform 2.2s cubic-bezier(.65,0,.3,1)}
.vault.shake #shelves{animation:vshake .5s linear}
@keyframes vshake{0%,100%{transform:none}20%{transform:translateX(-2px)}40%{transform:translateX(2px) translateY(-1px)}60%{transform:translateX(-1px)}80%{transform:translateX(1px)}}
.vault.open #shelves{transform:translateX(calc(100% + 12px));box-shadow:-18px 0 30px rgba(0,0,0,.5)}
.spine.lever{transform:rotate(-13deg) translateY(-3px);transform-origin:bottom right;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}

.vault{container-type:inline-size}
.shelfbtns{flex:none;display:flex;flex-direction:column;gap:4px;height:90px;box-sizing:border-box}
.shelfbtns > *,.shelfbtns > #b-clean{flex:1 1 0!important;min-height:0!important;box-sizing:border-box}
#b-test,#b-return{min-height:0;font-size:11.5px;padding:0 12px;border:1px solid var(--color-neutral-700);border-radius:999px;gap:6px}
#b-clean{min-height:30px}
#b-test{border-color:var(--color-accent-700);background:var(--color-accent-900);color:var(--color-accent-200)}
#b-test:hover{border-color:var(--color-accent-500)!important;background:var(--color-accent-900)!important}
#b-test:disabled{opacity:.45;cursor:default;pointer-events:none}
#b-test:hover,#b-return:hover{border-color:var(--color-accent-700);background:color-mix(in oklch,var(--color-accent) 12%,transparent)}
#b-return:disabled{opacity:.45;cursor:default;pointer-events:none}
.scene{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:4px;background:#0c0d14}
.scene[hidden]{display:none}
.scene i{font-style:normal}
.hall{position:absolute;inset:0;z-index:3;transform-origin:50% 58%;transition:transform 1.5s cubic-bezier(.6,0,.85,.4),opacity .5s ease 1.05s}
.hall.zoom{transform:scale(7.5);opacity:0}
.hall.gone{visibility:hidden}
.hall > span{position:absolute;inset:0}
.h-ceil{clip-path:polygon(0 0,100% 0,64% 26%,36% 26%);background:repeating-linear-gradient(180deg,transparent 0 9%,rgba(0,0,0,.25) 9% 9.6%),linear-gradient(180deg,#12131c,#1c1d2b)}
.h-wl,.h-wr{background:repeating-linear-gradient(90deg,transparent 0 10%,rgba(0,0,0,.22) 10% 10.4%),linear-gradient(90deg,#1b1c29,#2a2b3e 75%,#1f2030)}
.h-wl{clip-path:polygon(0 0,36% 26%,36% 78%,0 100%)}
.h-wr{clip-path:polygon(0 0,36% 26%,36% 78%,0 100%);transform:scaleX(-1)}
.h-floor{clip-path:polygon(36% 78%,64% 78%,100% 100%,0 100%);background:linear-gradient(180deg,#191a24,#272834)}
.h-floor::after{content:"";position:absolute;inset:0;background:radial-gradient(28% 22% at 50% 80%,color-mix(in oklch,var(--color-accent-300) 55%,transparent),transparent 75%);opacity:0;transition:opacity 1.1s ease .2s}
.runner{position:absolute;inset:0;clip-path:polygon(47% 78%,53% 78%,67% 100%,33% 100%);background:linear-gradient(90deg,var(--color-accent-700) 0 4%,var(--color-accent-900) 4% 96%,var(--color-accent-700) 96%)}
.sc{position:absolute;width:1.6cqw;height:3.8cqw;border-radius:.4cqw;background:linear-gradient(var(--color-neutral-200),var(--color-neutral-600))}
.sc::after{content:"";position:absolute;left:50%;top:30%;width:24cqw;height:24cqw;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,oklch(.8 .07 75 / .32),transparent);pointer-events:none}
.sc.s1{left:9%;top:36%}
.sc.s2{left:25%;top:40%;transform:scale(.6)}
.hall > .h-end{inset:26% 36% 22% 36%;background:linear-gradient(180deg,#20212f,#272839);display:flex;align-items:flex-end;justify-content:center}
.dframe{position:relative;width:54%;height:82%;perspective:60cqw;border:.7cqw solid #3d3f58;border-bottom:0;border-radius:.3cqw .3cqw 0 0;box-shadow:0 0 0 .3cqw #1a1b28;transition:box-shadow 1.2s}
.dframe::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--color-accent-200);box-shadow:0 0 1cqw .2cqw var(--color-accent);opacity:.7}
.dlight{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 72%,var(--color-accent-100),var(--color-accent-300) 45%,var(--color-accent-600))}
.door{position:absolute;inset:0;transform-origin:0 50%;transition:transform 1.25s cubic-bezier(.45,0,.2,1);background:linear-gradient(90deg,#3a2a24,#4c372c 50%,#3a2a24);box-shadow:inset 0 0 0 .3cqw rgba(0,0,0,.3)}
.pn{position:absolute;left:16%;right:16%;border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 0 .6cqw rgba(0,0,0,.45)}
.pn.p1{top:8%;height:38%}.pn.p2{top:54%;height:38%}
.knob{position:absolute;right:11%;top:52%;width:1cqw;height:1cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,oklch(.85 .06 85),oklch(.55 .06 70))}
.hall.dooropen .door{transform:rotateY(-104deg)}
.hall.dooropen .dframe{box-shadow:0 0 0 .3cqw #1a1b28,0 0 6cqw 1cqw color-mix(in oklch,var(--color-accent) 45%,transparent)}
.hall.dooropen .h-floor::after{opacity:1}
.room{position:absolute;inset:0;z-index:1;transform:scale(1.35);transition:transform 1.9s cubic-bezier(.2,.7,.2,1)}
.room.arrive{transform:none}
.rv,.skyv{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.65,0,.25,1),opacity .9s ease}
.room.up .rv{transform:translateY(60%) scale(1.15);opacity:0;pointer-events:none}
.rv > span,.rv > .ceil{position:absolute;inset:0}
.ceil{clip-path:polygon(0 0,100% 0,84% 18%,16% 18%);border:0;padding:0;margin:0;cursor:pointer;background:linear-gradient(180deg,#0c0d17,#18162c);transition:filter .3s}
.ceil::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in oklch,var(--color-accent) 16%,transparent));pointer-events:none}
.ceil:hover,.ceil:focus-visible{filter:brightness(1.45)}
.ceil-hint{position:absolute;left:50%;top:4%;transform:translateX(-50%);white-space:nowrap;color:var(--color-neutral-300);opacity:.55;transition:opacity .3s}
.ceil:hover .ceil-hint,.ceil:focus-visible .ceil-hint{opacity:1}
.wl,.wr{background:radial-gradient(circle,rgba(255,255,255,.04) 0 1px,transparent 1.5px) 0 0/3.6cqw 3.6cqw,linear-gradient(90deg,color-mix(in oklch,var(--color-accent-900) 65%,#000),color-mix(in oklch,var(--color-accent-800) 75%,var(--color-accent-900)))}
.wl,.wr{clip-path:polygon(0 0,16% 18%,16% 76%,0 100%)}
.wr{transform:scaleX(-1)}
.sconce{position:absolute;left:7%;top:38%;width:1.3cqw;height:3.4cqw;border-radius:.4cqw;background:linear-gradient(var(--color-neutral-100),var(--color-neutral-500))}
.sconce::after{content:"";position:absolute;left:50%;top:20%;width:22cqw;height:22cqw;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,oklch(.82 .07 75 / .3),transparent);animation:glw 3s ease-in-out infinite alternate}
.floor{clip-path:polygon(16% 76%,84% 76%,100% 100%,0 100%);background:repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 1px,transparent 1px 5.5%),linear-gradient(180deg,oklch(.24 .025 40),oklch(.32 .03 40))}
.rug{position:absolute;inset:0;clip-path:polygon(27% 81%,73% 81%,83% 97%,17% 97%);background:var(--color-accent-700)}
.rug::after{content:"";position:absolute;inset:0;clip-path:polygon(29.5% 82.5%,70.5% 82.5%,79.5% 95.5%,20.5% 95.5%);background:radial-gradient(ellipse at 50% 89%,color-mix(in oklch,var(--color-accent-700) 70%,transparent) 0 18%,transparent 19% 30%,color-mix(in oklch,var(--color-accent-700) 40%,transparent) 31% 33%,transparent 34%),var(--color-accent-900)}
.rv > .back{inset:18% 16% 24% 16%;background:radial-gradient(circle,rgba(255,255,255,.05) 0 1px,transparent 1.6px) 0 0/3.2cqw 3.2cqw,repeating-linear-gradient(90deg,transparent 0 7.6%,rgba(255,255,255,.03) 7.6% 8%),linear-gradient(180deg,var(--color-accent-800),color-mix(in oklch,var(--color-accent-800) 55%,var(--color-accent-900)))}
.back::after{content:"";position:absolute;inset:0;background:radial-gradient(42% 46% at 31% 92%,oklch(.72 .12 60 / .26),transparent 70%);animation:glw 2.2s ease-in-out infinite alternate;pointer-events:none}
.wains{position:absolute;left:0;right:0;bottom:0;height:30%;background:var(--color-accent-900);border-top:.6cqw solid color-mix(in oklch,var(--color-accent-700) 70%,var(--color-accent-800));box-shadow:inset 0 .3cqw 0 rgba(255,255,255,.04)}
.wains::before{content:"";position:absolute;left:0;right:0;top:18%;bottom:20%;background:repeating-linear-gradient(90deg,transparent 0 1.6%,rgba(255,255,255,.05) 1.6% 1.9%,rgba(0,0,0,.18) 1.9% 11.2%,rgba(255,255,255,.05) 11.2% 11.5%,transparent 11.5% 12.5%)}
.bwin{position:absolute;right:8%;top:9%;width:15%;height:50%;border-radius:999px 999px .3cqw .3cqw;border:.7cqw solid #3a3452;background:radial-gradient(circle at 66% 26%,var(--color-neutral-100) 0 .8cqw,transparent 1.2cqw),radial-gradient(circle at 66% 26%,rgba(233,233,237,.18),transparent 30%),linear-gradient(180deg,#232a4c,#10132a);box-shadow:inset 0 0 2cqw rgba(0,0,0,.6),0 1cqw 0 -.2cqw #2b2640}
.bwin::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(50% - .25cqw),#3a3452 calc(50% - .25cqw) calc(50% + .25cqw),transparent calc(50% + .25cqw)),linear-gradient(180deg,transparent 52%,#3a3452 52% calc(52% + .5cqw),transparent calc(52% + .5cqw))}
.fire{position:absolute;left:8%;width:46%;bottom:0;height:62%}
.fire::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-6%;height:6%;background:linear-gradient(#4a4860,#2e2d3d);border-radius:.2cqw}
.frame{position:absolute;left:28%;width:44%;bottom:calc(100% + 6cqw);height:42%;border:.8cqw solid oklch(.55 .05 80);background:radial-gradient(circle at 70% 30%,var(--color-neutral-200) 0 .6cqw,transparent .9cqw),linear-gradient(170deg,#2c2c48,#141526 70%,#1d1a2e);box-shadow:inset 0 0 0 .25cqw rgba(0,0,0,.45),0 .6cqw 1.2cqw rgba(0,0,0,.45)}
.frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(160deg,transparent 40%,#0f1019 41%),linear-gradient(200deg,transparent 45%,#0f1019 46%)}
.mantel{position:absolute;left:-7%;right:-7%;top:0;height:9%;background:linear-gradient(#6c6884,#423f55);border-radius:.25cqw;box-shadow:0 .5cqw .8cqw rgba(0,0,0,.45);z-index:2}
.cdl{position:absolute;bottom:100%;width:.9cqw;height:2.8cqw;border-radius:.15cqw .15cqw 0 0;background:linear-gradient(90deg,var(--color-neutral-300),var(--color-neutral-100),var(--color-neutral-300))}
.cdl.l{left:10%}.cdl.r{right:10%;height:2.2cqw}
.cdl::after{content:"";position:absolute;left:50%;bottom:calc(100% + .1cqw);width:.6cqw;height:1.1cqw;margin-left:-.3cqw;border-radius:50% 50% 50% 50%/65% 65% 35% 35%;background:radial-gradient(ellipse at 50% 80%,oklch(.97 .06 95),oklch(.8 .14 70) 60%,transparent 72%);box-shadow:0 0 1.4cqw .4cqw oklch(.8 .12 70 / .45);transform-origin:50% 100%;animation:flk .9s ease-in-out infinite alternate}
.cdl.r::after{animation-delay:-.45s}
.clock{position:absolute;bottom:100%;left:50%;width:4.4cqw;height:5cqw;margin-left:-2.2cqw;border-radius:2.2cqw 2.2cqw .2cqw .2cqw;background:linear-gradient(90deg,#3d2a22,#5a3e30,#3d2a22)}
.clock::after{content:"";position:absolute;left:18%;right:18%;top:14%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 30deg,#3a3448 30deg 33deg,transparent 33deg 120deg,#3a3448 120deg 123deg,transparent 123deg),var(--color-neutral-100);box-shadow:inset 0 0 0 .2cqw oklch(.65 .06 80)}
.hearth{position:absolute;left:0;right:0;top:9%;bottom:0;background:repeating-linear-gradient(180deg,transparent 0 15%,rgba(0,0,0,.18) 15% 16%),linear-gradient(90deg,#3e3c50,#56536b 50%,#3e3c50);box-shadow:inset 0 0 0 .3cqw rgba(0,0,0,.2)}
.box{position:absolute;left:20%;right:20%;bottom:0;height:68%;overflow:hidden;border-radius:45% 45% 0 0/30% 30% 0 0;background:radial-gradient(ellipse at 50% 100%,oklch(.42 .1 45),#120d0f 72%);box-shadow:inset 0 0 2.4cqw #000}
.logs{position:absolute;left:16%;right:16%;bottom:6%;height:13%;border-radius:1cqw;background:linear-gradient(#3e2819,#1f140c);z-index:2}
.logs::after{content:"";position:absolute;left:12%;right:-6%;bottom:60%;height:90%;border-radius:1cqw;background:linear-gradient(#4a2f1d,#24170e);transform:rotate(-8deg)}
.fl{position:absolute;bottom:12%;width:24%;height:56%;border-radius:50% 50% 45% 45%/65% 65% 35% 35%;background:radial-gradient(ellipse at 50% 88%,oklch(.97 .07 95),oklch(.82 .15 72) 35%,oklch(.62 .18 42) 66%,transparent 72%);transform-origin:50% 100%;animation:flk 1.1s ease-in-out infinite alternate;mix-blend-mode:screen;z-index:1}
.fl.f1{left:22%}.fl.f2{left:38%;height:72%;animation-delay:-.4s;animation-duration:.85s}.fl.f3{left:54%;height:50%;animation-delay:-.75s}
@keyframes flk{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.9,1.12) skewX(3deg)}100%{transform:scale(1.06,.9) skewX(-3deg)}}
@keyframes glw{from{opacity:.7}to{opacity:1}}
.glowfloor{background:radial-gradient(26% 14% at 36% 79%,oklch(.72 .13 55 / .3),transparent 70%);animation:glw 2.4s ease-in-out infinite alternate;mix-blend-mode:screen;pointer-events:none}
.rv > .beam{left:62%;right:auto;width:22cqw;top:0;bottom:38%;transform:translateX(-50%);z-index:2;background:linear-gradient(0deg,color-mix(in oklch,var(--color-accent-200) 40%,transparent),transparent);clip-path:polygon(32% 100%,68% 100%,100% 0,0 0);opacity:0;transition:opacity 1.6s ease .5s;mix-blend-mode:screen;pointer-events:none}
.room.won .beam{opacity:1}
.altar{position:absolute;left:62%;bottom:4%;width:23cqw;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:3}
.altar::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-1.6cqw;height:3.6cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:-1}
.ped{display:flex;flex-direction:column;align-items:center;width:100%}
.ped i{display:block}
.ped .cap{width:100%;height:2.4cqw;border-radius:.3cqw;background:linear-gradient(#8a86a0,#55526a);box-shadow:0 .5cqw .6cqw rgba(0,0,0,.35),inset 0 -.5cqw 0 rgba(0,0,0,.15)}
.ped .shaft{width:72%;height:15cqw;background:repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 .25cqw,rgba(255,255,255,.04) .25cqw .45cqw,transparent .45cqw 2.3cqw),linear-gradient(90deg,#45435a,#76738d 38%,#55526a 70%,#3a384c)}
.ped .foot{width:100%;height:3cqw;border-radius:.3cqw .3cqw 0 0;background:linear-gradient(#6c6984,#3c3a4d);box-shadow:inset 0 .4cqw 0 rgba(255,255,255,.06)}
.chest{position:relative;width:86%;height:12cqw;border:0;padding:0;margin:0 0 -.1cqw;background:none;cursor:pointer;perspective:40cqw;transition:transform .25s,filter .25s}
.chest:hover,.chest:focus-visible{transform:translateY(-.4cqw);filter:brightness(1.12)}
.chest > span{position:absolute;display:block}
.chest .body{left:0;right:0;bottom:0;height:58%;border-radius:.25cqw;background:repeating-linear-gradient(180deg,transparent 0 31%,rgba(0,0,0,.35) 31% 33.3%),linear-gradient(90deg,#4a2f22,#6e4832 50%,#4a2f22);box-shadow:inset 0 0 0 .35cqw #2b1b13,0 .4cqw .8cqw rgba(0,0,0,.45)}
.chest .lid{left:-2%;right:-2%;top:0;height:44%;z-index:2;border-radius:45% 45% .3cqw .3cqw/85% 85% .3cqw .3cqw;background:repeating-linear-gradient(90deg,transparent 0 24%,rgba(0,0,0,.18) 24% 25%),linear-gradient(180deg,#7d553a,#55382a);box-shadow:inset 0 0 0 .35cqw #2b1b13,inset 0 -.6cqw 0 rgba(0,0,0,.3);transform-origin:50% 100%;transition:transform 1.2s cubic-bezier(.3,1.35,.5,1)}
.chest .band{position:absolute;top:0;bottom:0;width:8%;background:radial-gradient(circle,#c9c7d6 0 .25cqw,transparent .3cqw) 50% 20%/100% 33% repeat-y,linear-gradient(90deg,#55566a,#a3a3b8 50%,#55566a)}
.chest .lid .band{border-radius:40% 40% 0 0/30% 30% 0 0}
.chest .b1{left:13%}.chest .b2{right:13%}
.lockp{position:absolute;left:41%;width:18%;top:-22%;height:56%;z-index:3;border-radius:.3cqw .3cqw 40% 40%;background:linear-gradient(#c3c0d3,#6f6d85);box-shadow:0 .2cqw .4cqw rgba(0,0,0,.5)}
.kh{position:absolute;left:50%;top:30%;width:.9cqw;height:.9cqw;margin-left:-.45cqw;border-radius:50%;background:var(--color-accent-200);box-shadow:0 0 1cqw var(--color-accent);animation:glw 1.6s ease-in-out infinite alternate}
.kh::after{content:"";position:absolute;left:30%;right:30%;top:70%;height:1cqw;background:var(--color-accent-200)}
.chest .inner{left:5%;right:5%;top:22%;height:30%;z-index:1;border-radius:50%;background:radial-gradient(ellipse at 50% 100%,var(--color-accent-100),var(--color-accent) 45%,transparent 72%);opacity:0;transition:opacity .9s ease .35s;filter:blur(.3cqw)}
.chest.opened{cursor:default}
.chest.opened .lid{transform:rotateX(72deg) translateY(-8%)}
.chest.opened .inner{opacity:1}
.chest.opened .lockp{animation:lockoff .8s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes lockoff{30%{transform:rotate(-25deg)}100%{transform:translateY(260%) rotate(-70deg);opacity:0}}
.rv > .sparks{z-index:4;pointer-events:none}
.sparks b{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--color-accent-100);box-shadow:0 0 6px var(--color-accent)}
.skyv{display:block;border:0;padding:0;margin:0;cursor:pointer;overflow:hidden;opacity:0;transform:translateY(-45%) scale(1.1);pointer-events:none;background:radial-gradient(70% 50% at 35% 35%,color-mix(in oklch,var(--color-accent-800) 45%,transparent),transparent),radial-gradient(120% 90% at 50% 50%,#141329,#0b0c16 75%);box-shadow:inset 0 0 0 1.2cqw #241f3a,inset 0 0 0 1.5cqw #3b3357,inset 0 0 9cqw rgba(0,0,0,.7)}
.room.up .skyv{opacity:1;transform:none;pointer-events:auto}
.summit{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity 2.4s ease .6s,transform 4s cubic-bezier(.2,.7,.2,1) .6s;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#07080f 0%,#0d0f1e 45%,color-mix(in srgb,#1b1a33 5%,#101225) 72%,color-mix(in srgb,#2a2546 5%,#121427) 82%,#121427 100%)}
.skydark{position:absolute;left:0;right:0;top:0;height:100%;z-index:0;pointer-events:none;transform-origin:50% 0;transform:scaleY(.45);will-change:transform,opacity;
  background:linear-gradient(180deg,#07080f 0%,#0d0f1e 100%)}
.skyeven{position:absolute;inset:0;background:#07080f;opacity:0}
.skyglow{position:absolute;left:0;right:0;top:45%;height:55%;z-index:0;pointer-events:none;will-change:transform;
  background:linear-gradient(180deg,#0d0f1e 0%,color-mix(in srgb,#1b1a33 5%,#101225) 49%,color-mix(in srgb,#2a2546 5%,#121427) 67%,#121427 100%)}

.summit > i{position:absolute;display:block}
#sky-summit{z-index:1}
.summit > .ridge,.summit > .mist,.summit > .ledge,.summit > .horizon{z-index:2}
.nc{position:absolute;inset:0;pointer-events:none;overflow:visible}
.nc circle{fill:var(--color-neutral-100);filter:drop-shadow(0 0 2px rgba(233,233,237,.55))}
.nc circle{opacity:0;transition:opacity 5s ease-in-out}
.nc g.stars circle{opacity:1}
.nc line{stroke:var(--color-neutral-200);stroke-width:.8;stroke-linecap:round;opacity:.15;stroke-dasharray:1;stroke-dashoffset:1;transition:opacity 5s ease-in-out}
.nc g.out circle,.nc g.out line{opacity:0;transition-duration:8s}
.nc.dawn circle,.nc.dawn line{opacity:0;transition-duration:12s}
.nc{transition:opacity 5s ease-in-out}
.nc.gone{opacity:0}
.twi{inset:0;z-index:1;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,oklch(0.36 0.05 265) 0%,oklch(0.46 0.07 290) 42%,oklch(0.6 0.08 330) 66%,oklch(0.72 0.09 45) 80%)}
.moon{z-index:0;left:0;top:0;width:clamp(26px,5.5%,64px);aspect-ratio:1;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle at 38% 34%,var(--color-neutral-100),var(--color-neutral-200) 55%,var(--color-neutral-300) 100%);
  box-shadow:0 0 18px 4px rgba(233,233,237,.22),0 0 60px 18px rgba(184,176,232,.12)}
.moon{background:none !important;box-shadow:none !important;overflow:visible}
.moon::before,.moon::after{display:none !important}
.moon svg{position:absolute;left:-30%;top:-30%;width:160%;height:160%;overflow:visible}
#sky-summit .moon{position:absolute}
#sky-summit .moon::before{content:"";display:block !important;position:absolute;left:18.75%;top:18.75%;width:62.5%;height:62.5%;border-radius:50%;background:#000;opacity:1;box-shadow:none}
#moonwash,.moonwash{display:none !important}
.moon .mlit{filter:drop-shadow(0 0 calc(2px + 5px * var(--glow,.5)) rgba(233,233,237,calc(.15 + .35 * var(--glow,.5)))) drop-shadow(0 0 calc(6px + 16px * var(--glow,.5)) rgba(184,196,232,calc(.1 + .2 * var(--glow,.5))))}
.moonwash{position:absolute;left:0;top:0;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen;will-change:transform,opacity;border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,172,225,.2),rgba(120,142,205,.09) 30%,rgba(100,120,190,.035) 60%,transparent 100%)}
.moon.ecl-red .mlit{filter:none}
.moon.ecl-red svg{filter:none !important}
.moon.ecl-red .mlit{filter:none !important}
#sky-summit.ecl-red-on .moonwash{opacity:0 !important}
.moon.ecl-pen .mlit{filter:drop-shadow(0 0 5px rgba(233,233,237,.32)) drop-shadow(0 0 16px rgba(184,196,232,.18))}
#sky-summit .consts{z-index:1}#sky-summit .moon{z-index:2}#sky-summit .sf-comet,#sky-summit .meteor{z-index:3}
.sunglow{z-index:0;left:-15%;bottom:8%;width:60%;height:45%;opacity:0;pointer-events:none;
  background:radial-gradient(50% 50% at 30% 100%,oklch(0.72 0.12 55 / .55),oklch(0.55 0.1 30 / .2) 50%,transparent 75%)}
.moon::before,.moon::after{content:"";position:absolute;border-radius:50%;background:var(--color-neutral-300);opacity:.45}
.moon::before{width:24%;height:24%;left:52%;top:28%}
.moon::after{width:15%;height:15%;left:30%;top:58%}
.milky{left:-20%;top:-10%;width:140%;height:70%;transform:rotate(-24deg);opacity:.55;filter:blur(1.4cqw);mix-blend-mode:screen;
  background:radial-gradient(50% 18% at 50% 50%,color-mix(in oklch,var(--color-accent-200) 45%,transparent),transparent 70%),radial-gradient(30% 8% at 42% 52%,rgba(233,233,237,.22),transparent 70%),radial-gradient(18% 6% at 62% 47%,rgba(233,233,237,.16),transparent 70%)}
.horizon{display:none;left:0;right:0;top:52%;height:30%;background:radial-gradient(60% 50% at 50% 100%,color-mix(in oklch,var(--color-accent-500) 30%,transparent),transparent 70%)}
.ridge{left:0;right:0;bottom:0;top:0}
.ridge.r3{clip-path:polygon(0 72%,8% 66%,15% 69%,24% 60%,31% 64%,40% 57%,47% 62%,55% 55%,63% 61%,71% 58%,80% 64%,88% 59%,100% 66%,100% 100%,0 100%);background:linear-gradient(180deg,#2c2848,#1b1a2f 40%)}
.ridge.r2{clip-path:polygon(0 78%,10% 71%,18% 75%,27% 67%,36% 73%,45% 69%,52% 74%,61% 66%,70% 72%,79% 68%,90% 75%,100% 71%,100% 100%,0 100%);background:linear-gradient(180deg,#1d1b31,#121220 40%)}
.ridge.r1{clip-path:polygon(0 85%,12% 79%,22% 83%,33% 77%,44% 82%,58% 78%,68% 83%,80% 79%,92% 84%,100% 81%,100% 100%,0 100%);background:linear-gradient(180deg,#121220,#0b0b14 40%)}
.mist{display:none;left:0;right:0;top:66%;height:20%;background:linear-gradient(180deg,transparent,color-mix(in oklch,var(--color-accent-300) 10%,transparent) 50%,transparent);filter:blur(.8cqw)}
.ledge{left:-5%;right:-5%;bottom:0;height:24%;clip-path:polygon(0 40%,14% 30%,26% 46%,38% 22%,50% 12%,60% 24%,72% 18%,84% 38%,100% 30%,100% 100%,0 100%);
  background:linear-gradient(180deg,#1a1824,#08080d 55%)}
/* from the title's start to the box's right edge: phase centred in the first 50%, event centred in the last 42% */
.sqhead > .lbl:first-child{flex:1;min-width:0}
#day-lbl{cursor:pointer;border-radius:4px;padding:1px 4px;margin:-1px -4px;transition:background .2s,color .2s;flex:1;min-width:0;display:grid;grid-template-columns:50% 8% 42%;align-items:center;white-space:nowrap;line-height:inherit}
#day-lbl[hidden]{display:none}
#day-lbl .dl-ph{grid-column:1;justify-self:center}
#day-lbl .dl-ev{grid-column:3;justify-self:center;color:var(--color-accent-300)}
#b-title,.egg button,.speed button{white-space:nowrap}
#day-lbl:hover,#day-lbl.pinned{background:#2a2c3b;color:var(--color-accent-200)}
#day-lbl:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.dv-k2{opacity:.75;font-size:.92em}
.dv-head .dv-k{color:#e5484d}
.di-sub{font-size:.78em;font-weight:400;color:var(--color-neutral-300)}
.di-s{display:block;margin:-2px 0 6px;font:400 11px var(--mono);color:var(--color-neutral-400)}
.dinfo{position:absolute;z-index:1200;width:min(280px,calc(100vw - 24px));padding:12px 14px;border-radius:8px;background:#1d1f2e;border:1px solid #33354a;box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:13px;line-height:1.45;color:var(--color-neutral-200)}
.dinfo[hidden]{display:none}
.dinfo .di-k{display:block;font:400 10.5px var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-400);margin-bottom:4px}
.dinfo strong{display:block;font-weight:500;color:var(--color-text);font-size:14px}
.dinfo p{margin:4px 0 0;text-wrap:pretty}
.dinfo hr{border:0;height:1px;background:#33354a;margin:10px 0}
.dinfo #di-et{color:var(--color-accent-200)}
.summit > svg.city{position:absolute;left:0;top:0;width:100%;height:100%;display:block;z-index:50;opacity:1;mix-blend-mode:normal;pointer-events:none}
.summit > svg.city *{opacity:1}
.city .wins rect{opacity:0!important;transition:opacity var(--fd,1.2s) cubic-bezier(.4,0,.3,1)}
.city .wins rect.on{opacity:calc(var(--b,1) * .6)!important}.city .wins rect.on.w2{opacity:calc(var(--b,1) * .45)!important}.city .beacon{animation-name:beacon}
.city .c3{fill:#25223d}
.city .tv{fill:#2b2946}
.city .tv .sph{fill:url(#sph)}
.city .tv .band{stroke:#3a3858;stroke-width:1;fill:none}
.city .tv .ring rect{fill:color-mix(in oklch,var(--color-accent-200) 60%,transparent)}
.city .beacon{fill:#e0565b;animation:beacon 2.4s ease-in-out infinite;filter:drop-shadow(0 0 3px #e0565b)}
@keyframes beacon{0%,100%{opacity:.12}50%{opacity:.5}}
.city .trees circle{fill:#121424}
.city .c2{fill:#15142a}
.city .c1b{fill:#0d0d18}
.city .c1{fill:#07070c}
.city .c3,.city .c2,.city .c1b{stroke:#b8b0e8;stroke-opacity:.04;stroke-width:.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.city .c3{stroke-opacity:.03}
.city .roof{stroke-opacity:1;stroke-width:1.2}
.city .c2.roof{stroke:#15142a}
.city .c1b.roof{stroke:#0d0d18}
.city .aer{stroke:#07070c;stroke-width:1.4;fill:none}
.city .wins rect{fill:#d9c9a0}
.city .wins rect.w2{fill:var(--color-accent-200)}
.city .wins.far rect.on{opacity:.38!important}
.city .wins rect{opacity:0!important;transition:opacity var(--fd,1.2s) cubic-bezier(.4,0,.3,1)}
.city .wins rect.on{opacity:calc(var(--b,1) * .6)!important}.city .wins rect.on.w2{opacity:calc(var(--b,1) * .45)!important}.city .beacon{animation-name:beacon}
.city .c3{fill:#26233f}
.city .tv{fill:#1d1b31}
.city .tv .band{stroke:#2c2848;stroke-width:1.2;fill:none}
@property --tvk{syntax:"<number>";inherits:true;initial-value:1}
.city .tv .ring rect{fill:#d9c9a0;opacity:calc(.6 * var(--tvk,1) * var(--dk,1));transition:opacity 1s linear}
.city .beacon{fill:#e0565b;animation:beacon 2.4s ease-in-out infinite;filter:drop-shadow(0 0 3px #e0565b)}
@keyframes beacon{0%,100%{opacity:.12}50%{opacity:.5}}
.city .c2{fill:#16152a}
.city .c1{fill:#0b0b14}
.city .wins rect{fill:#d9c9a0;opacity:.45}
.city .wins rect.w2{fill:var(--color-accent-200);opacity:.35}
.ledge::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(184,176,232,.08) 50%,transparent 70%)}
.room.atsummit .summit{opacity:1;transform:none;pointer-events:auto}
.room.atsummit .rv{opacity:0;transform:scale(1.3);filter:blur(4px);pointer-events:none;transition:opacity 2.2s ease,transform 3s cubic-bezier(.4,0,.2,1),filter 2.2s}
.room.atsummit .skyv{display:none}
.room.atsummit .rv{display:none}
.room.atsummit .summit{transition:none}
#vault .hall{transition:transform 5s cubic-bezier(.4,0,.75,.6),opacity .9s ease 4.2s}
#vault .door{transform-origin:0 50%;transition:transform 2.4s cubic-bezier(.55,0,.3,1) 1.2s}
#vault .h-floor::after{transition:opacity 2.4s ease .6s}
#vault .room{transition:transform 2.6s cubic-bezier(.2,.7,.2,1) 3.4s}
.sf-comet.big{height:1.5px;background:linear-gradient(90deg,rgba(233,233,237,0),rgba(184,176,232,.18) 40%,rgba(233,233,237,.55) 90%,rgba(233,233,237,.9))}
.sf-comet.big::after{width:3px;height:3px;top:-.75px;right:-1px}
#vault .sf-far .sf-field{--dur:3000s}#vault .sf-mid .sf-field{--dur:2100s}#vault .sf-near .sf-field{--dur:1500s}
#vault .dlight{background:
  radial-gradient(1px 1px at 28% 14%,var(--color-neutral-100),transparent),radial-gradient(1px 1px at 70% 9%,var(--color-neutral-200),transparent),
  linear-gradient(180deg,oklch(0.3 0.05 265) 0%,oklch(0.42 0.07 290) 30%,oklch(0.58 0.08 330) 48%,oklch(0.7 0.09 45) 80%)}

/* concrete stairwell */
#vault .hall{transform-origin:50% 34%}
#vault .h-ceil{background:linear-gradient(180deg,#191a1f,#24252b);clip-path:polygon(0 0,100% 0,62% 14%,38% 14%)}
#vault .h-wl{clip-path:polygon(0 0,38% 14%,38% 48%,0 100%)}
#vault .h-wr{clip-path:polygon(100% 0,62% 14%,62% 48%,100% 100%);transform:none}
#vault .h-floor{clip-path:polygon(38% 48%,62% 48%,100% 100%,0 100%)}
#vault .hall > .h-end{inset:14% 38% 52% 38%}
#vault .h-wl,#vault .h-wr{background:#2e2f34}
#vault .h-floor{background:#1d1e23}
#vault .st{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.25),transparent 12%,transparent 88%,rgba(0,0,0,.25)),
  linear-gradient(180deg,#9b9ca3 var(--y0),#8c8d94 calc(var(--y0) + (var(--y1) - var(--y0)) * 0.06),#6f7077 calc(var(--y0) + (var(--y1) - var(--y0)) * 0.16),#16171a calc(var(--y0) + (var(--y1) - var(--y0)) * 0.2),#1d1e22 calc(var(--y0) + (var(--y1) - var(--y0)) * 0.5),#27282d var(--y1))}
#vault .wl{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:oklch(.96 .02 85);box-shadow:0 0 calc(var(--s) * 1.4) calc(var(--s) * .5) oklch(.85 .05 85 / .45);z-index:2}
#vault .skirt{position:absolute;inset:0;background:#18191c;z-index:1}
#vault .sk-l{clip-path:polygon(0% 100%,0% 94.23%,4.79% 93.44%,4.79% 87.95%,9.35% 87.2%,9.35% 82%,13.67% 81.29%,13.67% 76.4%,17.73% 75.74%,17.73% 71.17%,21.52% 70.55%,21.52% 66.33%,25.02% 65.76%,25.02% 61.91%,28.22% 61.39%,28.22% 57.94%,31.08% 57.47%,31.08% 54.47%,33.57% 54.06%,33.57% 51.57%,35.64% 51.23%,35.64% 49.36%,37.19% 49.1%,37.19% 48.13%,38% 48%,38% 48.67%,37.19% 48.81%,37.19% 49.81%,35.64% 50.08%,35.64% 52.02%,33.57% 52.38%,33.57% 54.96%,31.08% 55.38%,31.08% 58.49%,28.22% 58.98%,28.22% 62.55%,25.02% 63.1%,25.02% 67.09%,21.52% 67.68%,21.52% 72.06%,17.73% 72.7%,17.73% 77.44%,13.67% 78.13%,13.67% 83.2%,9.35% 83.93%,9.35% 89.32%,4.79% 90.1%,4.79% 95.8%,0% 96.61%,0% 102.6%)}
#vault .sk-r{clip-path:polygon(100% 100%,100% 94.23%,95.21% 93.44%,95.21% 87.95%,90.65% 87.2%,90.65% 82%,86.33% 81.29%,86.33% 76.4%,82.27% 75.74%,82.27% 71.17%,78.48% 70.55%,78.48% 66.33%,74.98% 65.76%,74.98% 61.91%,71.78% 61.39%,71.78% 57.94%,68.92% 57.47%,68.92% 54.47%,66.43% 54.06%,66.43% 51.57%,64.36% 51.23%,64.36% 49.36%,62.81% 49.1%,62.81% 48.13%,62% 48%,62% 48.67%,62.81% 48.81%,62.81% 49.81%,64.36% 50.08%,64.36% 52.02%,66.43% 52.38%,66.43% 54.96%,68.92% 55.38%,68.92% 58.49%,71.78% 58.98%,71.78% 62.55%,74.98% 63.1%,74.98% 67.09%,78.48% 67.68%,78.48% 72.06%,82.27% 72.7%,82.27% 77.44%,86.33% 78.13%,86.33% 83.2%,90.65% 83.93%,90.65% 89.32%,95.21% 90.1%,95.21% 95.8%,100% 96.61%,100% 102.6%)}
#vault .rail{position:absolute;inset:0;background:linear-gradient(180deg,#6a6c78,#3b3d46)}
#vault .rl{clip-path:polygon(0 66%,38% 37%,38% 37.7%,0 68.4%)}
#vault .rr{clip-path:polygon(100% 66%,62% 37%,62% 37.7%,100% 68.4%)}
#vault .sc{width:2.2cqw;height:1.6cqw;border-radius:.3cqw;background:repeating-linear-gradient(90deg,#5c5e68 0 .25cqw,oklch(.82 .05 85) .25cqw .7cqw);left:14%;top:24%}
#vault .sc::after{width:20cqw;height:20cqw;background:radial-gradient(closest-side,oklch(.8 .05 85 / .18),transparent)}
#vault .h-end{background:linear-gradient(180deg,#2a2b31,#33343a)}
#vault .hdark{position:absolute;inset:0;z-index:3;background:#050507;opacity:.86;pointer-events:none}
#vault.open .hdark{animation:hallDark 1.7s linear 1.6s both}
#vault.open .ovh{animation:lampOn 1.7s linear 1.6s both}
@keyframes hallDark{0%{opacity:.86}14%{opacity:.35}22%{opacity:.86}50%{opacity:.86}58%{opacity:.2}64%{opacity:.5}100%{opacity:0}}
@keyframes lampOn{0%{filter:brightness(.25);box-shadow:none}14%{filter:brightness(1.1)}22%{filter:brightness(.25);box-shadow:none}50%{filter:brightness(.25);box-shadow:none}58%{filter:brightness(1.15)}64%{filter:brightness(.7)}100%{filter:none}}
#vault .ovh{filter:brightness(.25);box-shadow:none}
#vault.open .ovh{box-shadow:0 0 1.5cqw .4cqw oklch(.85 .05 85 / .35)}
#vault .ovh::after{opacity:0}
#vault.open .ovh::after{animation:lampGlow 1.7s linear 1.6s both}
@keyframes lampGlow{0%,50%{opacity:0}14%{opacity:.8}22%{opacity:0}58%{opacity:1}64%{opacity:.6}100%{opacity:1}}
#vault .ovh{position:absolute;left:50%;top:5.2%;width:11%;height:2.6%;transform:translateX(-50%);border-radius:50%;z-index:2;background:radial-gradient(ellipse at 50% 40%,oklch(.95 .03 85),oklch(.78 .05 85) 60%,#5a5c64 100%);box-shadow:0 0 1.5cqw .4cqw oklch(.85 .05 85 / .35)}
#vault .ovh::after{content:"";position:absolute;left:50%;top:50%;width:70cqw;height:55cqw;transform:translate(-50%,-8%);background:radial-gradient(50% 50% at 50% 0,oklch(.85 .05 85 / .16),transparent 70%);pointer-events:none}
#vault .blk{position:absolute;left:50%;top:3%;width:12%;height:6%;transform:translateX(-50%);border-radius:.3cqw;background:repeating-linear-gradient(90deg,#55575f 0 .3cqw,oklch(.84 .05 85) .3cqw .8cqw);box-shadow:0 0 4cqw 1cqw oklch(.8 .05 85 / .14)}
#vault .dframe{border-color:#4a4c55;box-shadow:0 0 0 .3cqw #1c1d22,0 0 0 0 transparent;transition:box-shadow .2s}
#vault .hall.dooropen .dframe{transition:box-shadow 1.6s ease 2.4s}
#vault .door{background:linear-gradient(90deg,#4b4e58,#6a6d78 45%,#545762 70%,#454852);box-shadow:inset 0 0 0 .25cqw rgba(0,0,0,.35),inset 0 0 0 .5cqw rgba(255,255,255,.04)}
#vault .door i{position:absolute;display:block}
#vault .door{transform-style:preserve-3d}
#vault .dedge{right:0;top:0;bottom:0;width:2.4cqw;transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,#2c2e35,#8a8d98 40%,#5a5d67)}
#vault .door::after{content:"";position:absolute;inset:0;transform:translateZ(-2.4cqw);background:linear-gradient(90deg,#3a3c45,#50535d);box-shadow:inset 0 0 0 .25cqw rgba(0,0,0,.35)}
#vault .pbar{left:12%;right:12%;top:50%;height:4%;border-radius:.4cqw;background:linear-gradient(180deg,#9a9da8,#5d606a);box-shadow:0 .3cqw .5cqw rgba(0,0,0,.4)}
#vault .louv{left:22%;right:22%;bottom:6%;height:14%;background:repeating-linear-gradient(180deg,#2a2c33 0 .35cqw,#5c5f69 .35cqw .7cqw);border-radius:.15cqw}
#vault .dsign{left:22%;right:22%;white-space:nowrap;top:12%;padding:.3cqw 0;text-align:center;font:600 1cqw/1 var(--mono,monospace);letter-spacing:.15em;color:#1d1e23;background:#c9cbd2;border-radius:.15cqw}
#vault .hinge{left:-.2%;width:3%;height:7%;background:#2f3138;border-radius:.2cqw}
#vault .hinge.h1{top:14%}#vault .hinge.h2{bottom:14%}
#vault .dframe::after{display:none}
#vault .hall.dooropen .dframe{box-shadow:0 0 0 .3cqw #1a1b28,0 0 5cqw .8cqw oklch(0.6 0.08 330 / .35)}
#vault .h-floor::after{background:radial-gradient(28% 22% at 50% 80%,rgba(160,170,220,.12),transparent 75%)}
.meteor{position:absolute;left:0;top:0;height:1.2px;opacity:0;transform-origin:100% 50%;pointer-events:none;background:linear-gradient(90deg,rgba(233,233,237,0),rgba(184,176,232,.22) 45%,rgba(233,233,237,.95));filter:drop-shadow(0 0 2px rgba(184,176,232,calc(var(--g,.6) * .6)))}
.meteor::after{content:"";position:absolute;right:-1.2px;top:-1px;width:2.6px;height:2.6px;border-radius:50%;background:var(--color-neutral-100);box-shadow:0 0 var(--gb,6px) 1.5px rgba(233,233,237,var(--g,.6))}
.stars{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.sf-plane{position:absolute;inset:0;animation:sf-pulse var(--pulse) ease-in-out var(--delay,0s) infinite alternate}
.sf-field{position:absolute;left:0;top:0;border-radius:50%;animation:sf-drift var(--dur) linear infinite}
.sf-far{--lo:.25;--hi:.45;--pulse:7s}.sf-mid{--lo:.3;--hi:.6;--pulse:10s;--delay:-4s}.sf-near{--lo:.35;--hi:.75;--pulse:14s;--delay:-7s}
.sf-far .sf-field{width:1px;height:1px;--dur:300s}.sf-mid .sf-field{width:1.5px;height:1.5px;--dur:210s}.sf-near .sf-field{width:2px;height:2px;--dur:150s}
@keyframes sf-pulse{from{opacity:var(--lo)}to{opacity:var(--hi)}}
@keyframes sf-drift{to{transform:translate3d(0,calc(var(--h) * -1),0)}}
.sf-star{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--color-neutral-100);box-shadow:0 0 5px 1px rgba(233,233,237,.45);opacity:0;animation:sf-tw var(--d) ease-in-out var(--delay) infinite}
.sf-star.sf-acc{background:var(--color-accent-200);box-shadow:0 0 6px 1px rgba(145,132,217,.6)}
@keyframes sf-tw{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:.8;transform:scale(1)}}
.sf-comet{position:absolute;left:0;top:0;height:1px;opacity:0;transform-origin:100% 50%;background:linear-gradient(90deg,rgba(233,233,237,0),rgba(184,176,232,.1) 45%,rgba(233,233,237,.35) 92%,rgba(233,233,237,.6))}
.sf-comet::after{content:"";position:absolute;right:-.5px;top:-.5px;width:2px;height:2px;border-radius:50%;background:var(--color-neutral-100);box-shadow:0 0 var(--glow-blur,4px) 1px rgba(233,233,237,var(--glow,.3))}
.consts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.consts path{fill:none;stroke:var(--color-neutral-400);stroke-width:.22;stroke-dasharray:.7 .9;opacity:.55;transition:stroke .8s,opacity .8s}
.consts circle{fill:var(--color-neutral-100);animation:cst 3.6s ease-in-out infinite alternate}
.consts .cst:nth-child(2) circle{animation-delay:-1.2s}.consts .cst:nth-child(3) circle{animation-delay:-2.4s}
@keyframes cst{from{opacity:.6}to{opacity:1}}
.consts .cst.lit path{stroke:var(--color-accent-200);stroke-dasharray:none;opacity:1}
.consts .cst.lit circle{fill:var(--color-accent-100)}
.sky-hint{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);white-space:nowrap;color:var(--color-neutral-300)}

.starmap{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;
  background:radial-gradient(closest-side,rgba(18,19,30,.96),rgba(10,11,17,.97));animation:smin .5s cubic-bezier(.2,.8,.2,1)}
.starmap[hidden]{display:none}
@keyframes smin{from{opacity:0;transform:scale(.94)}}
#sky{flex:1;min-height:0;width:100%;max-width:100%;aspect-ratio:1}
#sky .plate{fill:#11121b;stroke:var(--color-neutral-700);stroke-width:.4}
#sky .ring{fill:none;stroke:var(--color-neutral-800);stroke-width:.25}
#sky .ln{stroke:var(--color-accent-400);stroke-width:.55;stroke-linecap:round}
#sky .ln.done{stroke:var(--color-accent-200);filter:drop-shadow(0 0 1.2px var(--color-accent))}
#sky .st{cursor:pointer;outline:none}
#sky .st .hit{fill:transparent}
#sky .st .dot{fill:var(--color-neutral-200);transition:fill .2s}
#sky .st .halo{fill:none;stroke:var(--color-accent-300);stroke-width:.4;opacity:0;transition:opacity .2s}
#sky .st:hover .dot,#sky .st:focus-visible .dot{fill:var(--color-text)}
#sky .st:hover .halo,#sky .st:focus-visible .halo{opacity:.5}
#sky .st.sel .halo{opacity:1}
#sky .st.sel .dot,#sky .st.done .dot{fill:var(--color-accent-100)}
.sm-hint{margin:0;color:var(--color-neutral-300);text-align:center}
.sm-bar{display:flex;gap:8px}
.sm-bar .btn{min-height:30px;font-size:12px}
.spine.ghosted{visibility:hidden}
.spine{position:relative}
.spine .bd,#pile .pi .bd{display:flex;align-items:center;justify-content:center;min-width:12px;max-width:calc(100% - 4px);height:10px;padding:0 2px;border-radius:2px;font:500 6.5px/1 var(--mono);font-style:normal;color:var(--color-neutral-300);background:rgba(0,0,0,.25);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;pointer-events:none}
.strap{position:absolute;left:0;right:0;top:0;height:5px;border-radius:2px 2px 0 0;pointer-events:none}
.strap.g0{background:oklch(.74 .08 45)}.strap.g1{background:oklch(.76 .07 160)}.strap.g2{background:oklch(.75 .07 260)}
.bd.g0{--sc:oklch(.74 .08 45)}.bd.g1{--sc:oklch(.76 .07 160)}.bd.g2{--sc:oklch(.75 .07 260)}
.spine .bd,#pile .pi .bd{box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--sc,transparent) 60%,transparent)}
.spine{padding-top:12px}
.spine .bd{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);line-height:10px;text-align:center;min-width:0;padding:0 3px}
.spine .bd::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--spbg,transparent)}
.spine .bd{isolation:isolate}
.spine{padding-bottom:17px}

.rowhead{flex-direction:column;gap:6px}
.rowhead .strap{position:static;width:12px;height:5px;flex:none;border-radius:1px;transition:box-shadow .3s}
.shelfrow.ok .rowhead .strap{box-shadow:0 0 0 2px #20222f,0 0 0 3px var(--color-neutral-200)}
.shelfrow.ok .rowhead .lbl{color:var(--color-text)}
.spine.gap{background:none;box-shadow:none;border:1px solid transparent;border-bottom:0;cursor:default;pointer-events:none;transform:none}
.spine.gap.next{border-color:transparent}
#pile .pi .bd{position:absolute;left:50%;bottom:4px;transform:translateX(-50%)}
.shelfsq.solved #b-info .bk-t{color:var(--color-accent-200)}
.bk3d{position:absolute;z-index:6;perspective:1400px;pointer-events:none;will-change:transform}
.bk3d .pg{position:absolute;inset:2% 0 2% 0;border-radius:0 3px 3px 0;background:linear-gradient(90deg,rgba(0,0,0,.14),transparent 9%),var(--color-neutral-100);
  box-shadow:1px 0 0 var(--color-neutral-300),2px 0 0 var(--color-neutral-100),3px 0 0 var(--color-neutral-300),4px 1px 0 var(--color-neutral-200),var(--shadow-lg);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5em;padding:12%;text-align:center;color:var(--color-neutral-900)}
.bk3d .pg .k{font:400 .62em var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-600)}
.bk3d .pg .t{font-weight:500;font-size:1.25em;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.bk3d .pg .r{width:2em;height:1px;background:var(--color-neutral-400);margin:.2em 0}
.bk3d .pg .a{font-size:.85em;color:var(--color-neutral-700)}
.bk3d .pg .y{font:400 .66em var(--mono);color:var(--color-neutral-600);margin-top:auto}
.bk3d .cv{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;border-radius:2px 4px 4px 2px}
.bk3d .cv > div{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;gap:.5em;padding:12%;text-align:center}
.bk3d .cv .fr{box-shadow:inset 5px 0 0 rgba(0,0,0,.22),inset 6px 0 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.08),var(--shadow-lg)}
.bk3d .cv .fr b{font-weight:500;font-size:1.15em;line-height:1.2;color:var(--color-text);text-wrap:balance}
.bk3d .cv .fr i{font:400 .7em var(--mono);font-style:normal;color:var(--color-neutral-200)}
.bk3d .cv .bk{transform:rotateY(180deg);box-shadow:inset 0 0 0 6px rgba(0,0,0,.18)}
.pilewrap{display:flex;align-items:stretch;gap:10px;flex:1;min-width:0}
#pile{position:relative;flex:1;min-width:0;height:auto;min-height:90px;border:1px solid var(--color-neutral-700);border-radius:var(--radius-sm);background:var(--color-bg);overflow:hidden}
#pile:empty::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:44px;margin:-22px 0 0 -15px;border:1px dashed var(--color-neutral-700);border-radius:2px}
#pile .pi span{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font:500 8px/1.15 var(--font-body);text-align:center;text-wrap:balance;word-break:normal;overflow-wrap:normal;hyphens:manual;pointer-events:none}
#pile .pi{display:flex;align-items:center;justify-content:center;padding:5px 4px 5px 6px;position:absolute;left:50%;top:50%;width:46px;height:66px;margin:-33px 0 0 -23px;border:0;padding:0;border-radius:1px 3px 3px 1px;box-shadow:inset 3px 0 0 rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.5);pointer-events:none;cursor:pointer}
#pile .pi{pointer-events:auto}
#pile .pi:hover{filter:brightness(1.2)}
#pile .pi.open{width:84px;height:62px;margin:-31px 0 0 -42px;padding:0;gap:0;display:grid;align-items:stretch;justify-content:stretch;grid-template-rows:1fr;grid-template-columns:1fr 1fr;background:var(--cv);border-radius:2px;padding:2px;box-shadow:0 1px 3px rgba(0,0,0,.5)}
#pile .pi.open i{min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--color-neutral-100) 80%,var(--color-neutral-300));border-radius:1px 0 0 1px;font-style:normal}
#pile .pi.open i + i{background:linear-gradient(90deg,var(--color-neutral-300),var(--color-neutral-100) 20%);border-radius:0 1px 1px 0;color:var(--color-neutral-900);padding:4px}
#pile .pi.open i span{font-size:6.5px;-webkit-line-clamp:5}
.shelffoot{padding-top:10px;display:flex}
#b-clean{flex:none;min-height:32px;font-size:12.5px;padding:0 14px;border:1px solid var(--color-neutral-700);border-radius:999px;gap:6px}
#b-clean:hover{border-color:var(--color-accent-700);background:color-mix(in oklch,var(--color-accent) 12%,transparent)}
#b-clean:disabled{opacity:.45;cursor:default;pointer-events:none}
#b-info .bk-t{display:block;color:var(--color-text);font-weight:500;font-size:14px;line-height:1.3}
#b-info .bk-m{display:block;font:400 11.5px var(--mono);color:var(--color-neutral-400);margin-top:3px}
#b-info{min-width:0;color:var(--color-neutral-400);font-size:13.5px;overflow:hidden}
#b-info .bk-t,#b-info .bk-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#b-info strong{color:var(--color-text);font-weight:500}
#b-form{display:flex;gap:8px;margin-top:8px}
#b-form .input{background:var(--color-bg);min-height:36px}
#b-form .btn{min-height:36px;white-space:nowrap}
.bmsg{margin-top:6px;font-size:12.5px;min-height:1.2em}
.bmsg.err{color:#e4a3a3}.bmsg.ok{color:var(--color-accent-300)}

@media (max-width:980px){
  .fib{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;aspect-ratio:auto}
  .f13,.f8,.f5{grid-column:1/-1;grid-row:auto}
  .f3,.f2,.f1a,.f1b{grid-column:auto;grid-row:auto;aspect-ratio:1}
  .f5{min-height:160px}
  .shelfsq #shelves{min-height:480px}
  .fib > svg{display:none}
  .f8{aspect-ratio:3/2}
  .f1a.hob .hl,.f1b.hob .hl{position:static;width:auto;height:auto;clip:auto}
  .sq.hob i,.f1a.hob i,.f1b.hob i{font-size:34px}.sq.hob .skate,.f1a.hob .skate{width:34px;height:34px}
  .f1b .dice2,.dice-layer,body > .dw{--ds:30px}.f2.hob .skate.fan{width:40px;height:40px}
}

/* map */
.mapbox{background:var(--color-surface);padding:12px;margin-top:2px}
#map{width:100%;height:auto;display:block;touch-action:none;cursor:grab}
#map:active{cursor:grabbing}
.sea{fill:transparent;cursor:zoom-out}
.cty{fill:#252837;stroke:var(--color-bg);stroke-width:.5;vector-effect:non-scaling-stroke;transition:fill .35s,opacity .35s}
.cty.c-tint{fill:#2c2f43}
.cty.vis{fill:#48446d}
.cty.c-in{fill:#33364d}
.cty.c-in.vis{fill:#5b558c}
.cty.quiet{fill:#433f64}
.cty.sel{fill:var(--color-accent-600)}
.cty.hov{fill:#3b3e58}
.cty.vis.hov{fill:#6c64a6}
.cty.sel.hov{fill:var(--color-accent-600)}
.cty.dim{opacity:.4}
.cty.clk{cursor:pointer}
.ring{fill:none;stroke:var(--color-neutral-100);stroke-width:.75;opacity:.9;pointer-events:none}
.dot.home .pt,.dot.home.on .pt{fill:var(--color-neutral-100);stroke:var(--color-neutral-100)}
.dot.home.on .pt{filter:drop-shadow(0 0 6px rgba(233,233,237,.6))}
.dot{cursor:pointer;transition:opacity .35s}
.dot .hit{fill:transparent}
.dot .pt{fill:var(--color-bg);stroke:var(--color-accent-300);stroke-width:1.5;transition:r .15s}
.dot.lit .pt{fill:var(--color-accent-800);stroke:var(--color-accent-100);r:5.5}
.dot.on .pt{fill:var(--color-accent);stroke:var(--color-accent-200);r:6;filter:drop-shadow(0 0 6px rgba(145,132,217,.9))}
.dot.dim{opacity:.25}
.dot:hover .pt{r:6.5}
.dot:focus{outline:none}
.dot:focus-visible .hit{stroke:var(--color-accent);stroke-width:1.5;stroke-dasharray:2 3}
.mapdesc{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;color:var(--color-neutral-400);font-size:13.5px}
.mapbox{position:relative}
#m-up{position:absolute;top:10px;right:10px;z-index:2;min-height:30px;font-size:12.5px;padding:0 12px;gap:6px;border:1px solid var(--color-neutral-700);border-radius:999px;background:color-mix(in oklch,var(--color-bg) 80%,transparent);backdrop-filter:blur(4px)}
#m-up:hover{border-color:var(--color-accent-700);background:color-mix(in oklch,var(--color-accent) 14%,var(--color-bg))}
#m-up:disabled{opacity:.45;cursor:default;pointer-events:none}
.filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:2px;border-radius:var(--radius-md) var(--radius-md) 0 0;overflow:hidden}
.filters label{display:block;background:var(--color-surface);padding:10px 14px 12px;position:relative;transition:box-shadow .3s}
.filters label.act{box-shadow:inset 0 0 0 1px var(--color-accent-700)}
.filters label.act::after{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;background:var(--color-accent);box-shadow:0 0 10px rgba(145,132,217,.8);border-radius:0 0 2px 2px}
.filters label.act .lbl{color:var(--color-accent-300)}
.filters label.act select{border-color:var(--color-accent-700)}
.filters label.done .lbl{color:var(--color-neutral-200)}
.filters select:disabled{opacity:.45;cursor:not-allowed}
.filters select{display:block;width:100%;margin-top:6px;background:var(--color-bg);color:var(--color-text);border:var(--line);border-radius:var(--radius-sm);font:400 14px var(--font-body);padding:7px 30px 7px 10px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239184d9' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.filters select:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent)}
.filters .count{background:var(--color-surface);padding:8px 14px;display:flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box}
#m-count{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;line-height:1.3}
.filters .count.one{padding:10px 14px;align-items:center;justify-content:center}
.filters .count.one #m-count{display:block}
.detail dl > div{display:grid;grid-template-rows:auto 1fr}
.detail dl > div > dd{align-self:center;margin:0}
#d-city.flap{padding-bottom:0}
.detail dl{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,.9fr);gap:2px;margin-top:2px}
@media (max-width:720px){.detail dl{grid-template-columns:repeat(3,minmax(0,1fr))}.detail dl > div:first-child{grid-column:1 / -1}}
.detail dl div{background:var(--color-surface);padding:14px 16px}
.detail dl div:last-child{border-radius:0 0 var(--radius-md) 0}
.detail dl div:first-child{border-radius:0 0 0 var(--radius-md)}
.detail dt{margin-bottom:4px}
.detail dd{font-size:15px;color:var(--color-neutral-200)}
#d-city{position:relative;display:inline-block;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em;font-weight:500;line-height:1.1;color:var(--color-accent-100);padding-bottom:6px;text-shadow:0 0 18px rgba(145,132,217,.45)}
#d-city::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;border-radius:2px;background:var(--color-accent)}
#d-city.empty::after{display:none}
#d-city.flap{display:grid;grid-template-columns:repeat(var(--n,16),minmax(0,1fr));gap:2px;width:100%;max-width:calc(var(--n,16) * 26px);padding-bottom:8px;container-type:inline-size;text-shadow:none;letter-spacing:0}
#d-city.flap::after{display:none}
#d-city.flap{max-width:calc(var(--n,16) * 30px)}
#d-city .ft{font-size:max(11px, calc(100cqw / var(--n,16) * .78))}
#d-hint{display:block;margin-top:6px;font-size:13px;color:var(--color-neutral-500)}
#d-hint[hidden]{display:none}
#d-city .ft{position:relative;display:grid;place-items:center;aspect-ratio:.8;perspective:120px;transform-origin:50% 50%;backface-visibility:hidden;border-radius:2px;background:#12131a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);font:500 calc(100cqw / var(--n,16) * .78)/1 var(--mono);color:var(--color-accent-100)}
#d-city .ft.on{text-shadow:0 0 8px rgba(145,132,217,.45)}
#d-city .ft::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55)}
#d-city.empty{font-size:15px;font-weight:400;color:var(--color-neutral-500);letter-spacing:0;text-shadow:none;padding-bottom:0}
#d-coords{font:400 13px var(--mono)}
.hint{margin-top:12px;color:var(--color-neutral-500);font-size:12.5px}
@media (max-width:860px){.filters{grid-template-columns:1fr}.detail dl{grid-template-columns:repeat(2,minmax(0,1fr))}.detail dl div:first-child,.detail dl div:last-child{grid-column:1/-1;border-radius:0}}

/* contact */
.contact .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:860px){.contact .grid{grid-template-columns:1fr}}
.contact h2{font-weight:500;font-size:clamp(36px,5vw,56px);letter-spacing:-.03em;line-height:1}
.contact .sub{color:var(--color-neutral-400);margin:16px 0 32px;max-width:26rem}
.direct{display:grid;gap:2px;max-width:24rem}
.direct a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:var(--color-text);background:var(--color-surface);padding:12px 14px;border-radius:var(--radius-sm)}
.direct a span:last-child{color:var(--color-accent-300);font-family:var(--mono);font-size:12px}
.direct a:hover{background:#2a2c3b;color:var(--color-text)}
.formcard{background:var(--color-surface);border-radius:var(--radius-lg,12px);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
form{display:grid;gap:20px}
.field > label{font:400 11.5px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--color-neutral-400);margin-bottom:8px}
.field .input{background:var(--color-bg);font-size:15px;min-height:44px;padding:10px 12px}
.field textarea.input{min-height:160px}
.field .input[aria-invalid="true"]{border-color:#d98484}
.meta{display:flex;justify-content:space-between;gap:12px;margin-top:6px;min-height:1.2em}
.err{font-size:12.5px;color:#e4a3a3}
.chars{font:400 11.5px var(--mono);color:var(--color-neutral-500)}
.actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.actions .btn{min-height:42px;padding:0 20px;font-size:14px}
#sent{text-align:left;padding:12px 0}
#sent .ok{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--color-accent);display:grid;place-items:center;color:var(--color-accent-200);margin-bottom:18px;box-shadow:0 0 18px rgba(145,132,217,.35)}
#sent p{font-size:20px;font-weight:500;margin-bottom:14px}
#sent p:focus{outline:none}
footer{margin-top:clamp(40px,6vw,72px);background:color-mix(in oklch,var(--color-surface) 35%,var(--color-bg))}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:22px;padding-bottom:26px}
.f-name{font-weight:500;font-size:14px;color:var(--color-neutral-200);letter-spacing:-.005em}
.f-sep{color:var(--color-neutral-600);margin:0 .25em}
.f-links{display:flex;align-items:center;gap:20px}
.f-link{background:none;border:0;padding:0;cursor:pointer;font:400 11.5px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--color-neutral-400)}
.f-link:hover{color:var(--color-accent-300)}
#imp[hidden]{display:none}
#imp{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
#imp .dialog{position:relative;max-width:440px;width:100%}
#imp .dialog-body{display:grid;gap:6px}
#imp .dialog-body .lbl{margin-top:10px}
#imp .dialog-body p:not(.lbl){color:var(--color-neutral-200);font-size:14px;line-height:1.5}
#imp .x{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:999px;background:none;color:var(--color-neutral-400);font-size:20px;cursor:pointer}
#imp .x:hover{background:color-mix(in oklch,var(--color-accent) 16%,transparent);color:var(--color-text)}
.dv-dual input{height:11px}.dv-dual input::-webkit-slider-runnable-track{height:11px}.dv-dual input::-webkit-slider-thumb{margin-top:0}