:root{
  --paper:#efeee8; --ink:#273c34; --night:#14130f; --gold:#c9a35b; --text:#efeee8; --muted:#c9c4b6;
  --serif:'Instrument Serif',serif; --sans:'Instrument Sans',sans-serif;
  --ease-out:cubic-bezier(0,0,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--night);color-scheme:dark}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--text);text-decoration:none}
a,button{-webkit-tap-highlight-color:transparent}
@media (hover:hover) and (pointer:fine){a:hover{color:#fff}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.pill:focus-visible,.pin:focus-visible{border-radius:999px}
.skip{position:fixed;left:16px;top:-80px;z-index:300;background:var(--paper);color:var(--ink);padding:12px 18px;border-radius:999px;font-weight:600;transition:top .2s var(--ease-out)}
.skip:focus{top:16px}

#gl,#still{position:fixed;inset:0;width:100%;height:100dvh;display:block;touch-action:pan-y;cursor:grab;z-index:0;object-fit:cover;background:var(--night)}
#gl.drag{cursor:grabbing}
#still[hidden]{display:none}
#scroller{position:relative;width:1px;height:calc(var(--journey,2000)*1dvh);pointer-events:none}
body.stills #scroller{height:100dvh}

#shade,#shade-bottom,#shade-right{position:fixed;inset:0;pointer-events:none;z-index:1;transition:opacity .6s var(--ease-out)}
#shade{background:radial-gradient(120% 90% at 30% 45%,rgba(20,19,15,0) 55%,rgba(10,9,7,.62) 100%)}
#shade-bottom{background:linear-gradient(to top,rgba(15,14,11,.82) 0%,rgba(15,14,11,0) 36%);opacity:0}
#shade-right{background:linear-gradient(to right,rgba(12,11,10,0) 36%,rgba(12,11,10,.86) 100%);opacity:0}
body[data-mode=hall] #shade-bottom,body[data-mode=end] #shade-bottom,body[data-mode=inside] #shade-bottom{opacity:1}
body[data-mode=world] #shade-right{opacity:1}
body[data-mode=vitrine] #shade-right{opacity:.85}
/* The decks wing: its column lists seven titles over bright vitrines, so it gets real ground.
   A gradient on the right edge of the screen, no card: clear until the vitrines end, dark behind the text. */
body[data-world=decks] #shade-right{background:linear-gradient(to right,rgba(12,11,10,0) 50%,rgba(12,11,10,.55) 60%,rgba(12,11,10,.9) 67%,rgba(12,11,10,.95) 100%)}
/* The opening frame is the one light scene: white type on the cream wall measured 1.4:1 to 2.3:1. The machine's own
   green-black, deeper and taller, brings it past 3:1 without a box behind the copy (copy-contrast.cjs). */
body[data-mode=inside] #shade-bottom{background:linear-gradient(to top,rgba(20,30,26,.8) 0%,rgba(20,30,26,.55) 30%,rgba(20,30,26,0) 58%)}
/* The hall headline lands on the lit skyline: its windows behind the letters measured a brightness spread of 23 to 26.
   A deeper, taller shade in the hall's own near-black calms it to 12 to 14 and leaves the vitrines above untouched. */
body[data-mode=hall] #shade-bottom{background:linear-gradient(to top,rgba(15,14,11,.88) 0%,rgba(15,14,11,.62) 26%,rgba(15,14,11,0) 52%)}

/* pills */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid transparent;background:none;color:var(--text);font:500 15px/1 var(--sans);cursor:pointer;white-space:nowrap;transition:background .2s var(--ease-out),border-color .2s var(--ease-out),transform .15s var(--ease-out)}
.pill svg{fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
.pill:active{transform:scale(.97)}
.pill.ghost:active{background:rgba(239,238,232,.12)}
.pill.ghost-dark:active{background:rgba(12,11,10,.8)}
.pill.solid:active{background:#d8b36b}
.pin:active{background:rgba(15,14,11,.86)}
.decks a:active{color:#fff;border-color:rgba(201,163,91,.7)}
.pill.ghost{border-color:rgba(239,238,232,.5);backdrop-filter:blur(2px);min-height:48px;padding:0 22px}
@media (hover:hover) and (pointer:fine){.pill.ghost:hover{background:rgba(239,238,232,.08)}}
.pill.ghost-dark{background:rgba(12,11,10,.55);border-color:rgba(239,238,232,.35)}
@media (hover:hover) and (pointer:fine){.pill.ghost-dark:hover{background:rgba(12,11,10,.8)}}
.pill.solid{background:var(--gold);color:var(--night);font-weight:600;min-height:48px;padding:0 22px}
@media (hover:hover) and (pointer:fine){.pill.solid:hover{background:#d8b36b;color:var(--night)}}

/* header */
#top{position:fixed;left:0;right:0;top:0;z-index:20;pointer-events:none;height:96px}
#top>*{pointer-events:auto}
/* The wordmark wears the same dark pill as Contact and Worlds. Without it the name sat bare on lit towers and the
   overhead gears, which made it the one header item hard to read. --paper (how much of the light cyclorama is behind
   the header, set from the 3D scene) deepens the pill a little over paper. */
.brand{position:absolute;left:44px;top:40px;display:flex;align-items:center;gap:14px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;font-size:16px;font-weight:600;letter-spacing:.01em;background:rgba(12,11,10,max(.55,calc(var(--paper,0)*.6)));border:1px solid rgba(239,238,232,.35);transition:opacity .4s var(--ease-out)}
.brand svg{fill:none;stroke:var(--text);stroke-width:1.8}
#back{position:absolute;left:56px;top:40px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility 0s .4s}
#topbtns{position:absolute;right:56px;top:40px;display:flex;gap:8px}
#back .sm{display:none}
body[data-mode=world] #back{opacity:1;visibility:visible;transition-delay:0s}
body[data-mode=world] .brand{opacity:0;pointer-events:none}

/* copy blocks */
.copy,#stepback,#card{position:fixed;z-index:10;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),visibility 0s .5s}
.copy{pointer-events:none}
.copy a,.copy button{pointer-events:auto}
.copy.on,#stepback.on,#card.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.copy h1,.copy h2{margin:0;font-family:var(--serif);font-weight:400;color:#f7f6f0;text-shadow:0 2px 30px rgba(20,30,26,.45)}
.copy em{font-style:italic}
.copy p{margin:0;font-size:19px;color:#e4e3dc;text-shadow:0 1px 16px rgba(20,30,26,.6)}
.copy[data-copy=inside]{left:56px;bottom:64px;max-width:640px;display:flex;flex-direction:column;gap:16px}
.copy p.who{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.25;color:#f7f6f0;text-wrap:balance}
.copy[data-copy=inside] h1{font-size:clamp(54px,6.4vw,92px);line-height:.95;letter-spacing:-.02em}
/* While the veil is up, the headline and the line on what Jash does sit above it from the first paint, so a cold
   desktop visit (about 5 s of shader warm-up) is not 5 s of nothing. The drag hint waits until the machine can turn.
   z-index drops 0.9 s after the veil starts its 0.8 s fade, so the text never slips behind it. */
body:has(#veil:not(.done):not(.fail):not(.dead)) .copy[data-copy=inside]{opacity:1;visibility:visible;transform:none;z-index:210;transition-delay:0s}
body:has(#veil:not(.done):not(.fail):not(.dead)) .copy[data-copy=inside] p:not(.who){opacity:0}
.copy[data-copy=inside]{transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),visibility 0s .5s,z-index 0s .9s}
.copy[data-copy=inside].on{transition-delay:0s,0s,0s,.9s}
.copy[data-copy=inside] p{transition:opacity .5s var(--ease-out)}
#stepback{right:56px;bottom:64px}
.copy[data-copy=vitrine]{right:64px;top:168px;max-width:520px;display:flex;flex-direction:column;gap:18px;text-align:right}
.copy[data-copy=vitrine] h2{font-size:clamp(40px,4.5vw,64px);line-height:1;letter-spacing:-.015em;color:#f2efe6}
.copy[data-copy=vitrine] p{font-size:18px;color:var(--muted)}
.copy[data-copy=hall]{left:56px;right:56px;bottom:52px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;pointer-events:none}
.copy[data-copy=hall] h2{font-size:clamp(44px,5vw,72px);line-height:.98;letter-spacing:-.02em;max-width:760px;color:#f2efe6}
.copy[data-copy=hall] p{font-size:18px;color:#d6d0c1;max-width:340px;text-align:right}
.copy[data-copy=end]{left:56px;bottom:64px;display:flex;flex-direction:column;gap:22px}
.copy[data-copy=end] h2{font-size:clamp(54px,6.4vw,92px);line-height:.95;letter-spacing:-.02em}
.copy .links{display:flex;gap:10px;flex-wrap:wrap}
.copy[data-copy=hall2]{display:none}

/* world card (U4) */
#card{right:64px;bottom:72px;width:430px;display:flex;flex-direction:column;gap:18px}
#cardTitle{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(46px,5.4vw,80px);line-height:.95;letter-spacing:-.02em;color:#f4efe4;text-shadow:0 2px 24px rgba(8,7,5,.6)}
#cardTitle em{font-style:italic;display:block}
#cardLine{margin:0;font-size:18px;line-height:1.5;color:#e6dfd0;text-shadow:0 1px 14px rgba(8,7,5,.75)}
.chip{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin:0;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(201,163,91,.55);font-size:14px;color:#e8e4d8}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.decks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.decks a{display:flex;align-items:center;min-height:36px;padding:2px 0;font-size:16px;color:#ddd5c6;border-bottom:1px solid rgba(239,238,232,.14)}
@media (hover:hover) and (pointer:fine){.decks a:hover{color:#fff;border-color:rgba(201,163,91,.7)}}
#card .row{display:flex;gap:10px;flex-wrap:wrap}
#card[hidden]{display:none}
#deckToggle{display:none}
#deckToggle[aria-expanded=true]{background:rgba(239,238,232,.1)}

/* pins (U3) */
#pins{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.pin{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;background:rgba(15,14,11,.62);border:1px solid rgba(201,163,91,.6);font-size:15px;color:var(--text);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;will-change:transform;transition:opacity .35s var(--ease-out),background .2s,visibility 0s .35s}
.pin.show{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
@media (hover:hover) and (pointer:fine){.pin:hover{background:rgba(15,14,11,.86);color:#fff}}
.pin .d{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}
.pin.perp .d{background:none;border:1.5px solid var(--gold)}
.pin.deck{font-size:13px;min-height:36px}

/* worlds list */
#worlds,#contact{position:fixed;right:56px;top:92px;z-index:30;width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 120px);overflow:auto;overscroll-behavior:contain;padding:10px;border-radius:18px;background:rgba(12,11,10,.9);border:1px solid rgba(239,238,232,.22);backdrop-filter:blur(10px)}
#contact{width:min(320px,calc(100vw - 32px))}
#worlds ul{list-style:none;margin:0;padding:0}
#worlds a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;font-size:16px}
#worlds a:focus-visible{background:rgba(239,238,232,.08)}
@media (hover:hover) and (pointer:fine){#worlds a:hover{background:rgba(239,238,232,.08)}}
#worlds a:active,.clink:active{background:rgba(239,238,232,.12)}
#worlds ul ul{margin:0 0 6px 14px;padding-left:10px;border-left:1px solid rgba(239,238,232,.16)}
#worlds ul ul a{font-size:14px;color:var(--muted);min-height:40px}
.sheethead{display:none}
.contactblock{margin-top:8px;padding:12px 4px 4px;border-top:1px solid rgba(239,238,232,.16)}
.contactblock h3{margin:0 10px 6px;font:400 24px/1.1 var(--serif);color:#f4efe4}
.clink{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:6px 14px;border-radius:12px;font-size:17px}
.clink:focus-visible{background:rgba(239,238,232,.08)}
@media (hover:hover) and (pointer:fine){.clink:hover{background:rgba(239,238,232,.08)}}
.clink small{font-size:13px;color:var(--muted)}
#worlds .clink,#contact .clink{align-items:flex-start;font-size:17px;min-height:56px}
.contact-links{display:contents}

/* Stop arrows: two quiet floating buttons, previous and next. No strip, no label (the Worlds sheet lists every stop).
   Phones and touch, and the reduced-motion stops. The button is a 48px hit area around a 38px circle. */
#stopbar{position:fixed;left:0;right:0;bottom:0;height:0;z-index:25;pointer-events:none}
#stopbar[hidden]{display:none}
#stopbar .arrow{position:absolute;bottom:max(4px,calc(env(safe-area-inset-bottom) - 6px));width:48px;height:48px;padding:0;margin:0;border:0;background:none;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .3s var(--ease-out),visibility 0s}
#prevStop{left:max(10px,calc(env(safe-area-inset-left) + 4px))}
#nextStop{right:max(10px,calc(env(safe-area-inset-right) + 4px))}
#stopbar .arrow::before{content:"";position:absolute;width:38px;height:38px;border-radius:50%;background:rgba(12,11,10,.16);border:1px solid rgba(239,238,232,.24);transition:background .15s var(--ease-out),transform .15s var(--ease-out)}
#stopbar .arrow svg{position:relative;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#stopbar .arrow:active::before{background:rgba(239,238,232,.16);transform:scale(.94)}
#stopbar .arrow:disabled{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease-out),visibility 0s .3s}
#stopbar .arrow:focus-visible{outline:none}
#stopbar .arrow:focus-visible::before{outline:2px solid var(--gold);outline-offset:2px}
@media (hover:hover) and (pointer:fine){#stopbar .arrow:hover:not(:disabled)::before{background:rgba(239,238,232,.1)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#stopStatus{position:fixed}
/* Copy that names the input: scroll wording by default, arrow wording when the arrows are shown. */
.t-arrows{display:none}
body.hasbar .t-scroll{display:none}
body.hasbar .t-arrows{display:inline}
body.hasbar #stepback{display:none}
body.hasbar #toast{bottom:calc(64px + env(safe-area-inset-bottom))}
@media (min-width:701px){
  #stopbar .arrow{bottom:16px}
  #prevStop{left:16px}
  #nextStop{right:16px}
}

#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,10px);z-index:40;padding:10px 18px;border-radius:999px;background:rgba(12,11,10,.7);border:1px solid rgba(239,238,232,.25);font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Command bar: desktop only, hidden until ":" or "/". The list opens upward from the field. */
#cmd{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:45;width:min(440px,calc(100vw - 32px));display:flex;flex-direction:column-reverse;gap:8px}
#cmdInput{width:100%;height:46px;padding:0 22px;border-radius:999px;border:1px solid rgba(239,238,232,.22);background:rgba(12,11,10,.9);backdrop-filter:blur(10px);color:var(--text);font:400 16px/1 var(--sans);caret-color:var(--gold)}
#cmdInput::placeholder{color:var(--muted);opacity:.8}
#cmdInput:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:999px}
#cmdList{list-style:none;margin:0;padding:6px;border-radius:18px;background:rgba(12,11,10,.9);border:1px solid rgba(239,238,232,.22);backdrop-filter:blur(10px)}
#cmdList li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:40px;padding:10px 14px;border-radius:12px;font-size:16px;line-height:1.25;cursor:pointer}
#cmdList li small{flex:none;font-size:13px;color:var(--muted)}
#cmdList li[aria-selected=true]{background:rgba(239,238,232,.1);color:#fff}
.cmdhint{margin:2px 14px 6px;font-size:13px;color:var(--muted)}
@media not all and (hover:hover) and (pointer:fine){#cmd,.cmdhint{display:none!important}}

dialog#renders{border:0;padding:20px;max-width:min(1100px,94vw);width:100%;background:#0f0e0b;color:var(--text);border-radius:20px}
dialog#renders::backdrop{background:rgba(8,7,5,.82)}
dialog#renders form{display:flex;justify-content:flex-end;margin:0 0 14px}
dialog#renders .gallery{display:grid;gap:14px}
dialog#renders img{width:100%;height:auto;border-radius:12px;display:block}

/* ink-mask transition and loading veil */
#ink,#ink2{position:fixed;inset:0;z-index:100;pointer-events:none;clip-path:circle(0px at 50% 50%);visibility:hidden}
#ink{background:#273c34}
#ink2{background:#14130f;z-index:101}
#veil{position:fixed;inset:0;z-index:200;background:var(--night);display:flex;align-items:center;justify-content:center;font:italic 30px/1.2 var(--serif);color:#c9c4b6;transition:opacity .8s var(--ease-out),visibility 0s .8s}
#veil.done{opacity:0;visibility:hidden;pointer-events:none}
/* Fully opaque, the veil hides the 3D canvas, so the compositor skips it, and the first time it is drawn cost a
   100 to 150 ms frame just as the veil lifted. At 99.5% it is drawn behind the veil from the start; nothing shows. */
#veil:not(.done){opacity:.995}
/* Shown only when the veil holds past 2 s, so a slow phone reads as working, not frozen. */
#veilBar{position:absolute;left:50%;top:calc(50% + 36px);width:168px;height:2px;margin-left:-84px;background:rgba(239,238,232,.16);border-radius:2px;overflow:hidden;opacity:0;transition:opacity .4s var(--ease-out)}
#veilBar b{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(.06);transition:transform .3s var(--ease-out)}
#veil.slow #veilBar{opacity:1}
#veil.fail #veilBar{display:none}
#veil.fail{align-items:flex-start;padding-top:18dvh}
/* Short screens: the first-screen text sits above the veil at the bottom, so the loading line and bar move up out of its way. */
@media (max-height:760px){#veil:not(.fail):not(.dead){align-items:flex-start;padding-top:14dvh}#veil:not(.fail):not(.dead) #veilBar{top:calc(14dvh + 52px)}}
#veil.dead>span,#veil.dead #veilBar{display:none}
#plain{position:fixed;left:0;right:0;top:18dvh;bottom:0;overflow-y:auto;z-index:250;padding:0 56px 40px;font-size:18px}
#plain p+ul+p{margin-top:28px}
#plain p+ul+p+ul{flex-direction:column;gap:6px}
#plain p+ul+p+ul a{line-height:1.3;padding:6px 0}
#plain[hidden]{display:none!important}
#plain ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
#plain a{display:inline-flex;align-items:center;min-height:44px;color:#efeee8;text-decoration:underline;text-underline-offset:4px}
.noscript{position:fixed;inset:0;z-index:300;background:var(--night);padding:56px;font-size:18px;overflow-y:auto}
.noscript li{margin:10px 0}

/* phone */
@media (max-width:700px){
  .brand{left:max(8px,env(safe-area-inset-left));top:calc(20px + env(safe-area-inset-top))}
  #back{left:max(16px,env(safe-area-inset-left));top:calc(20px + env(safe-area-inset-top))}
  #topbtns{right:max(16px,env(safe-area-inset-right));top:calc(20px + env(safe-area-inset-top))}
  #top .pill{padding:0 14px;font-size:14px}
  #back .lg{display:none}
  #back .sm{display:inline}
  #deckToggle{display:inline-flex}
  #card:not(.decks-open) #cardDecks{display:none}
  .decks a{min-height:44px}
  #worlds ul ul a{min-height:44px}
  #toast{bottom:calc(28px + env(safe-area-inset-bottom))}
  .copy[data-copy=inside]{left:20px;right:20px;bottom:calc(112px + env(safe-area-inset-bottom))}
  .copy[data-copy=inside] p{font-size:17px}
  .copy p.who{font-size:20px}
  #stepback{right:20px;bottom:calc(36px + env(safe-area-inset-bottom))}
  .copy[data-copy=vitrine]{left:20px;right:20px;top:auto;bottom:calc(36px + env(safe-area-inset-bottom));text-align:left;max-width:none}
  .copy[data-copy=hall]{left:20px;right:20px;bottom:calc(36px + env(safe-area-inset-bottom));flex-direction:column;align-items:flex-start;gap:12px}
  .copy[data-copy=hall] p{text-align:left;max-width:none;font-size:16px}
  .copy[data-copy=hall] h2{font-size:clamp(36px,10.6vw,44px)}
  .copy[data-copy=end]{left:20px;bottom:calc(36px + env(safe-area-inset-bottom))}
  #card{left:16px;right:16px;width:auto;bottom:calc(16px + env(safe-area-inset-bottom));gap:12px;padding:20px 20px 18px;border-radius:22px;background:rgba(12,11,10,.74);backdrop-filter:blur(12px);border:1px solid rgba(239,238,232,.16)}
  #cardTitle{font-size:44px}
  #cardTitle em{display:inline}
  #cardLine{font-size:16px}
  .pin{display:none}
  /* Worlds: a full-screen list. Contact: a bottom sheet. */
  #worlds{inset:0;width:auto;max-height:none;border-radius:0;border:0;background:rgba(12,11,10,.97);padding:0 14px calc(24px + env(safe-area-inset-bottom));z-index:60}
  #contact{left:0;right:0;top:auto;bottom:0;width:auto;max-height:80dvh;border-radius:22px 22px 0 0;padding:0 14px calc(18px + env(safe-area-inset-bottom));z-index:60}
  .sheethead{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;min-height:68px;padding:calc(8px + env(safe-area-inset-top)) 4px 8px;background:#0c0b0a}
  .sheettitle{font:400 30px/1 var(--serif);color:#f4efe4}
  #worlds a{min-height:52px;font-size:18px}
  .clink{min-height:60px}
  body.hasbar #card{bottom:calc(60px + env(safe-area-inset-bottom))}
  body.hasbar .copy[data-copy=inside]{bottom:calc(64px + env(safe-area-inset-bottom))}
  body.hasbar .copy[data-copy=vitrine],body.hasbar .copy[data-copy=hall],body.hasbar .copy[data-copy=end]{bottom:calc(60px + env(safe-area-inset-bottom))}
  #shade-right,body[data-world=decks] #shade-right{background:linear-gradient(to top,rgba(12,11,10,.8) 0%,rgba(12,11,10,0) 55%)}
}
@media (max-width:1100px) and (min-width:701px){
  #card{width:380px;right:40px}
  .brand{left:24px}
  #back{left:36px}
  #topbtns{right:36px}
  .copy[data-copy=inside],.copy[data-copy=end]{left:36px}
  .copy[data-copy=hall]{left:36px;right:36px}
  .copy[data-copy=vitrine]{right:40px}
  #stepback{right:36px}
}
/* Landscape phones (about 844x390, 740x360). Short and wide: the header sits tight to the top, the card is a
   compact right column that stops above the arrows, and the Worlds and Contact panels get a Close button. */
@media (orientation:landscape) and (max-height:500px){
  :root{--lx:max(24px,calc(env(safe-area-inset-left) + 8px)); --rx:max(24px,calc(env(safe-area-inset-right) + 8px))}
  #top{height:64px}
  .brand{left:var(--lx);top:calc(10px + env(safe-area-inset-top))}
  #back{left:var(--lx);top:calc(10px + env(safe-area-inset-top))}
  #topbtns{right:var(--rx);top:calc(10px + env(safe-area-inset-top))}
  #top .pill{padding:0 14px;font-size:14px}
  #back .lg{display:none}
  #back .sm{display:inline}
  #stopbar .arrow{bottom:max(6px,calc(env(safe-area-inset-bottom) - 6px))}
  #prevStop{left:max(14px,calc(env(safe-area-inset-left) + 4px))}
  #nextStop{right:max(14px,calc(env(safe-area-inset-right) + 4px))}
  .copy[data-copy=inside],.copy[data-copy=end]{left:var(--lx);bottom:64px}
  .copy[data-copy=inside] h1,.copy[data-copy=end] h2{font-size:clamp(40px,10vh,54px)}
  .copy[data-copy=inside]{gap:10px}
  .copy[data-copy=vitrine]{right:var(--rx);top:96px;max-width:min(420px,48vw);gap:12px}
  .copy[data-copy=vitrine] h2{font-size:clamp(30px,4.2vw,40px)}
  .copy[data-copy=hall]{left:var(--lx);right:var(--rx);bottom:64px;gap:12px}
  .copy[data-copy=hall] h2{font-size:clamp(32px,4.6vw,44px)}
  .copy[data-copy=hall] p{font-size:16px}
  .copy p{font-size:16px}
  .copy .links{gap:8px}
  .copy .pill.ghost,.copy .pill.solid{min-height:44px;padding:0 18px}
  #stepback{right:var(--rx);bottom:64px}
  /* The world card: smaller type, the seven decks behind a toggle, and a scroll as the last resort. */
  #card{right:var(--rx);bottom:62px;width:clamp(300px,44vw,380px);gap:10px;max-height:calc(100dvh - 126px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  #card::-webkit-scrollbar{display:none}
  #cardTitle{font-size:34px}
  #cardTitle em{display:inline}
  #cardLine{font-size:15px;line-height:1.4}
  #card .row{gap:8px}
  #card .pill.solid,#card .pill.ghost{min-height:44px;padding:0 18px}
  .chip{min-height:30px;font-size:13px}
  #deckToggle{display:inline-flex}
  #card:not(.decks-open) #cardDecks{display:none}
  #card.decks-open #cardLine{display:none}
  .decks a{min-height:44px}
  #worlds ul ul a{min-height:44px}
  .pin{min-height:40px;font-size:14px}
  /* Worlds and Contact: a panel with its own title and Close, inside the short viewport. */
  #worlds,#contact{top:calc(8px + env(safe-area-inset-top));right:var(--rx);bottom:8px;max-height:none;padding:0 10px 10px;background:rgba(12,11,10,.97);z-index:60}
  #contact{bottom:auto;max-height:calc(100dvh - 16px)}
  .sheethead{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;min-height:60px;padding:8px 4px;background:#0c0b0a}
  .sheettitle{font:400 28px/1 var(--serif);color:#f4efe4}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation:none!important}
}