/* ============================================================
   VINYL INK — the controls, and the names
   The controls of the house are not laid on the rooms, they are printed in them: in the ink of the ground, so that the only difference is that
   a glossy ink stands against a matt one. They can hardly be seen. They come forward while a hand is moving (html[data-attn]), and go back into
   the ground when it stops. Where the pointer is, the ink shines. The names of the stages are cut vinyl, raised, and the light runs over them.
   ============================================================ */
:root{ --vy-tone:236,234,229; --vy-hi:255,255,255; --va:.30; }
html[data-attn]{ --va:1; }
body[data-tone="light"]{ --vy-tone:23,22,20; --vy-hi:23,22,20; }
body[data-safelight="on"]{ --vy-tone:214,96,82; --vy-hi:255,142,118; }
body[data-uv="on"]{ --vy-tone:184,168,255; --vy-hi:222,212,255; }
.pidx[data-tone="light"]{ --vy-tone:23,22,20; --vy-hi:23,22,20; }
.pidx[data-tone="dark"]{ --vy-tone:236,234,229; --vy-hi:255,255,255; }

.sr-only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* the ink: two tones, a horizon of gloss across each letter; a slow band of light that passes when the hand comes; the pointer's own light */
.vy{
  display:inline-block;
  color:transparent; -webkit-text-fill-color:transparent;
  background-color:transparent;
  background-image:
    radial-gradient(circle 150px at var(--px,-999px) var(--py,-999px), rgba(var(--vy-hi),.95) 0%, rgba(var(--vy-hi),.34) 46%, rgba(var(--vy-hi),0) 100%),
    linear-gradient(103deg, rgba(var(--vy-hi),0) 34%, rgba(var(--vy-hi),.85) 50%, rgba(var(--vy-hi),0) 66%),
    linear-gradient(180deg, rgba(var(--vy-tone),.86) 0 47%, rgba(var(--vy-tone),.52) 53% 100%);
  background-attachment:fixed, scroll, scroll;
  background-size:auto, 340% 100%, auto;
  background-repeat:no-repeat;
  background-position:0 0, 140% 0, 0 0;
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 -.6px 0 rgba(var(--vy-hi),.12)) drop-shadow(0 .8px 0 rgba(0,0,0,.5));
  opacity:var(--va,.3);
  transition:opacity 1.4s cubic-bezier(.3,.7,.2,1);
}
html[data-attn] .vy{ transition-duration:.45s; animation:vy-glint 1.9s cubic-bezier(.3,.6,.2,1) both; }
@keyframes vy-glint{ from{ background-position:0 0, 140% 0, 0 0; } to{ background-position:0 0, -40% 0, 0 0; } }
/* what is chosen is printed with more ink */
.vy-on{ background-image:
    radial-gradient(circle 150px at var(--px,-999px) var(--py,-999px), rgba(var(--vy-hi),1) 0%, rgba(var(--vy-hi),.4) 46%, rgba(var(--vy-hi),0) 100%),
    linear-gradient(103deg, rgba(var(--vy-hi),0) 34%, rgba(var(--vy-hi),.9) 50%, rgba(var(--vy-hi),0) 66%),
    linear-gradient(180deg, rgba(var(--vy-tone),1) 0 47%, rgba(var(--vy-tone),.78) 53% 100%); }
.vy:hover, .vy:focus-visible{ opacity:1; }
@media (prefers-reduced-motion:reduce){ html[data-attn] .vy{ animation:none; } .vy{ transition-duration:.01s; } }

/* ---------- the choice: the word that is chosen, and the words on either side of it ---------- */
.pj-dials{ left:50%; right:auto; top:auto; bottom:clamp(20px,3.6vh,34px); transform:translateX(-50%); display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(34px,7vw,110px); width:max-content; max-width:calc(100vw - 2*var(--gutter) - 340px); pointer-events:none; }
.pj-dial-slot{ margin:0 !important; }
.pj-dial-slot.is-on{ pointer-events:auto; }
.pj-dial-slot.is-right, .pj-dial-slot.is-left{ text-align:center; }
.sw{ display:grid; justify-items:center; gap:6px; text-align:center; user-select:none; -webkit-user-select:none; }
.sw-label{ margin:0; font-size:8px; letter-spacing:.44em; padding-left:.44em; }
.sw-row{ display:flex; align-items:baseline; justify-content:center; gap:clamp(12px,1.8vw,26px); outline:none; touch-action:pan-y; }
.sw-row:focus-visible{ outline:1px solid rgba(var(--vy-tone),.4); outline-offset:8px; border-radius:2px; }
.sw-side, .sw-cur{ border:0; margin:0; cursor:pointer; font-family:var(--display); font-style:italic; font-weight:400; white-space:nowrap; }
.sw-side{ font-size:13px; line-height:1.2; padding:6px 2px; max-width:8.5em; overflow:hidden; text-overflow:ellipsis; }
.sw-side[hidden]{ display:none; }
.sw-cur{ font-size:clamp(18px,1.55vw,23px); line-height:1.15; padding:3px 2px; letter-spacing:-.005em; }
.sw-spec{ margin:0; font-size:7.5px; letter-spacing:.24em; min-height:1.3em; }
.sw.is-fwd .sw-row{ animation:sw-f .62s var(--swift) both; }
.sw.is-back .sw-row{ animation:sw-b .62s var(--swift) both; }
@keyframes sw-f{ from{ transform:translateX(14px); } to{ transform:none; } }
@keyframes sw-b{ from{ transform:translateX(-14px); } to{ transform:none; } }
@media (max-width:759px){
  .pj-dials{ max-width:calc(100vw - 24px); bottom:clamp(74px,11vh,96px); gap:22px; }
  .sw-side{ font-size:11px; max-width:5.4em; } .sw-cur{ font-size:16px; } .sw-spec{ display:none; }
}

/* ---------- the counter at the foot: which of the eight this is, on black dials that roll ---------- */
.pidx{ left:var(--gutter); right:auto; bottom:clamp(16px,3vh,30px); transform:none; gap:16px; max-width:calc(100vw - 24px); text-shadow:none; align-items:center; }
.pidx, .pidx a{ text-shadow:none; }
button.pidx-counter{ display:block; padding:0; gap:0; cursor:pointer; border-radius:7px; }
button.pidx-counter:focus-visible{ outline:1px solid rgba(var(--vy-tone),.6); outline-offset:5px; }
.pidx-window{ display:block; background:none; box-shadow:none; width:auto; height:auto; overflow:visible; }
.pidx-drum .ct-col{ font-size:21px; }
.pidx-drum .ct-strip{ transition-duration:1.1s; }
.pidx-name{ margin:0; font-family:var(--display); font-style:italic; font-size:17px; letter-spacing:0; text-transform:none; line-height:1.1; min-width:8em; }
@media (max-width:759px){ .pidx{ left:12px; bottom:14px; } .pidx-drum .ct-col{ font-size:17px; } .pidx-name{ display:none; } }
body[data-safelight="on"] .pidx{ color:inherit; text-shadow:none; }

/* ---------- the odometer: black dials, each digit a column of 0 to 9 behind a window, rolled to its value from the right ---------- */
.ct, .pidx-drum{ flex-direction:row !important; }
.ct{ position:relative; display:inline-flex; gap:3px; padding:5px; border-radius:6px; vertical-align:middle;
  background:linear-gradient(#171614,#22201d); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -8px 12px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.6); }
.ct::before, .ct::after{ display:none; }
.ct-col{ position:relative; display:block; width:.80em; height:1.32em; overflow:hidden; border-radius:3px; background:#0d0c0b; box-shadow:inset 0 0 7px #000;
  font-family:var(--mono); font-weight:400; line-height:1.32em; text-shadow:none; }
.ct-col::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:3px;
  background:linear-gradient(rgba(0,0,0,.55), transparent 28%, transparent 72%, rgba(0,0,0,.6)); }
.ct-strip{ display:block; transform:translateY(calc(var(--d,0) * -1.32em)); transition:transform 1.7s cubic-bezier(.14,.82,.2,1); will-change:transform; }
.ct-strip i{ display:block; height:1.32em; line-height:1.32em; text-align:center; font-style:normal; color:#F3F0E9; transform:none; }
@media (prefers-reduced-motion:reduce){ .ct-strip{ transition:none; } }

/* ---------- the record, and the count on the title ---------- */
.pj-tab{ display:flex; align-items:baseline; gap:12px; border:0; font-size:9px; letter-spacing:.34em; padding:8px 2px; }
.pj-tab::after, .pj-tab::before{ display:none !important; }
.pj-tab .pj-tab-a{ display:inline-block; -webkit-text-fill-color:transparent; }
.pj-no{ display:inline-block; font-size:9.5px; letter-spacing:.34em; margin:0; }
.pj-no .ct, .pj-no .pj-no-of{ display:none; }

/* ---------- the loupe in the nav: eight circles round the glass, and the ninth at its heart ---------- */
.nav-dots{ position:relative; display:block; width:22px; height:22px; padding:0; border-radius:50%; margin-right:2px; flex:none;
  box-shadow:inset 0 0 0 1px rgba(236,234,229,.4), inset 0 1px 0 rgba(255,255,255,.22); }
.nav-dots i{ position:absolute; left:50%; top:50%; width:2.4px; height:2.4px; margin:-1.2px 0 0 -1.2px; border-radius:50%; background:currentColor; opacity:.55; grid-column:auto; }
.nav-dots i:nth-child(1){ transform:rotate(0deg) translateY(-7.4px); }
.nav-dots i:nth-child(2){ transform:rotate(45deg) translateY(-7.4px); }
.nav-dots i:nth-child(3){ transform:rotate(90deg) translateY(-7.4px); }
.nav-dots i:nth-child(4){ transform:rotate(135deg) translateY(-7.4px); }
.nav-dots i:nth-child(5){ transform:rotate(180deg) translateY(-7.4px); }
.nav-dots i:nth-child(6){ transform:rotate(225deg) translateY(-7.4px); }
.nav-dots i:nth-child(7){ transform:rotate(270deg) translateY(-7.4px); }
.nav-dots i:nth-child(8){ transform:rotate(315deg) translateY(-7.4px); }
.nav-dots i:nth-child(9){ transform:none; }
.nav-dots i.is-at{ opacity:1; box-shadow:0 0 6px currentColor; }
.nav-dots i:nth-child(1).is-at{ transform:rotate(0deg) translateY(-7.4px) scale(1.7); } .nav-dots i:nth-child(2).is-at{ transform:rotate(45deg) translateY(-7.4px) scale(1.7); }
.nav-dots i:nth-child(3).is-at{ transform:rotate(90deg) translateY(-7.4px) scale(1.7); } .nav-dots i:nth-child(4).is-at{ transform:rotate(135deg) translateY(-7.4px) scale(1.7); }
.nav-dots i:nth-child(5).is-at{ transform:rotate(180deg) translateY(-7.4px) scale(1.7); } .nav-dots i:nth-child(6).is-at{ transform:rotate(225deg) translateY(-7.4px) scale(1.7); }
.nav-dots i:nth-child(7).is-at{ transform:rotate(270deg) translateY(-7.4px) scale(1.7); } .nav-dots i:nth-child(8).is-at{ transform:rotate(315deg) translateY(-7.4px) scale(1.7); }
.nav-dots i:nth-child(9).is-at{ transform:scale(1.7); }
.nav-menu:hover .nav-dots{ box-shadow:inset 0 0 0 1px rgba(236,234,229,.8), inset 0 1px 0 rgba(255,255,255,.3), 0 0 12px rgba(236,234,229,.16); }

/* ---------- the names of the stages: cut vinyl, raised from the ground, larger; the light runs over the letters ---------- */
.pj-open .pj-name{ font-size:min(24vw, calc(90vw/(var(--len,8)*.375))) !important; letter-spacing:-.024em; margin-left:-.05em; }
@media (max-width:759px){ .pj-open .pj-name{ font-size:min(22vw, calc(92vw/(var(--len,8)*.44))) !important; } }
body:not([data-safelight="on"]) .pj-open .pj-name{
  background-image:
    linear-gradient(100deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(var(--ts,0)*150% - 44%), rgba(255,255,255,.62) calc(var(--ts,0)*150% - 26%), rgba(0,0,0,0) calc(var(--ts,0)*150% - 6%), rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(255,253,246,.98) 0%, rgba(226,222,212,.98) 36%, rgba(176,172,163,.98) 58%, rgba(206,202,192,.98) 100%);
  filter:drop-shadow(-1px -1.2px 0 rgba(255,255,255,.46)) drop-shadow(1.4px 2.2px 0 rgba(0,0,0,.78)) drop-shadow(0 12px 26px rgba(0,0,0,.5)); }
body:not([data-safelight="on"]) .pj-open[data-title="light"] .pj-name{
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) calc(var(--ts,0)*150% - 44%), rgba(255,255,255,.55) calc(var(--ts,0)*150% - 26%), rgba(255,255,255,0) calc(var(--ts,0)*150% - 6%), rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(58,55,49,.98) 0%, rgba(30,28,25,.98) 42%, rgba(14,13,12,.98) 100%);
  filter:drop-shadow(1px 1.4px 0 rgba(255,255,255,.85)) drop-shadow(-1px -1px 0 rgba(0,0,0,.35)) drop-shadow(0 10px 24px rgba(255,255,255,.4)); }


/* ============================================================
   THE MAROON ROOM
   A safelight is not a red that is put over a picture. It is the only light in the room, and it is a deep one: what it falls on comes back the
   colour of old wine, the whites are the pink of the inside of a lip, and everything it does not reach is nearly black. So the room is dark, and the
   light is a pool; and because it is the only light there is, it lights the page as well, the words, the controls and the names of the stages.
   ============================================================ */
.dk-red{ background:radial-gradient(74% 82% at var(--bx,50%) var(--by,46%), rgb(146,54,54) 0%, rgb(106,32,38) 22%, rgb(66,18,26) 46%, rgb(30,7,12) 72%, rgb(10,2,5) 100%); }
.dk-glow{ background:
    radial-gradient(38% 34% at var(--bx,50%) var(--by,46%), rgba(196,56,48,.22) 0%, rgba(128,28,30,.11) 46%, rgba(128,28,30,0) 80%),
    radial-gradient(120% 100% at 50% 50%, rgba(84,12,18,.16) 0%, rgba(84,12,18,0) 70%); }
.dk-bloom{ background:
    radial-gradient(40% 36% at var(--bx,50%) var(--by,46%), rgba(204,74,62,.15) 0%, rgba(150,40,38,.08) 46%, rgba(150,40,38,0) 100%),
    radial-gradient(96% 84% at var(--bx,50%) var(--by,46%), rgba(150,36,34,.07), rgba(150,36,34,0) 72%); }
.dk-ember{ background:radial-gradient(80% 66% at var(--bx,50%) 34%, rgba(214,92,56,.38), rgba(160,50,30,.13) 52%, rgba(160,50,30,0) 76%); }
.dk-torch::before{ background:radial-gradient(circle, rgba(214,100,86,.46) 0%, rgba(150,44,40,.22) 24%, rgba(120,30,30,.07) 50%, rgba(120,30,30,0) 70%); }
.dk-motes{ opacity:.8; }
.dk-bulb{ box-shadow:0 0 calc(44px*var(--warm,0)) calc(12px*var(--warm,0)) rgba(170,36,30,calc(.62*var(--warm,0))), 0 0 calc(150px*var(--warm,0)) calc(44px*var(--warm,0)) rgba(130,24,26,calc(.30*var(--warm,0))); }
.pj-stage.is-safe .dk-neg canvas, body[data-safelight="on"] .dk-neg canvas{ filter:sepia(.9) saturate(2.4) hue-rotate(-42deg) brightness(.66) contrast(1.08); }
/* the whole page is in it: one grade over everything, as deep as the lamp is lit */
body[data-safelight="on"]::after{ content:""; position:fixed; inset:0; z-index:9800; pointer-events:none; mix-blend-mode:multiply; opacity:var(--sl-warm,0);
  background:radial-gradient(120% 110% at 50% 46%, rgb(255,206,198) 0%, rgb(226,132,122) 48%, rgb(150,54,58) 82%, rgb(86,22,28) 100%); }
body[data-safelight="on"]{ --paper:#E9B4A8; --silver:rgba(226,150,138,.78); }
/* the names: raised vinyl, and the lamp is what they are cut in — maroon, lit at the edge that faces it, with the light spilling off them */
body[data-safelight="on"] .pj-open .pj-name{
  background-image:
    linear-gradient(100deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(var(--ts,0)*150% - 44%), rgba(255,164,144,.55) calc(var(--ts,0)*150% - 26%), rgba(0,0,0,0) calc(var(--ts,0)*150% - 6%), rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgb(222,112,96) 0%, rgb(176,66,60) 38%, rgb(104,26,30) 60%, rgb(150,52,48) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; text-shadow:none;
  filter:drop-shadow(-1px -1.2px 0 rgba(255,176,156,calc(.18 + var(--lit,.6)*.34))) drop-shadow(1.4px 2.2px 0 rgba(12,0,2,.9)) drop-shadow(0 0 calc(10px + var(--lit,.6)*38px) rgba(190,38,34,calc(var(--lit,.6)*.5))) drop-shadow(0 12px 26px rgba(0,0,0,.6)); }
body[data-safelight="on"] .pj-tape{ --tc:232,140,124; }
body[data-safelight="on"] .pj-say-b .w{ -webkit-text-stroke:.6px rgba(30,0,4,.55); text-shadow:0 0 calc(30px*var(--sl-warm,0)) rgba(196,40,36,calc(.6*var(--sl-warm,0))), 0 -1px 0 rgba(255,176,156,calc(.28*var(--sl-warm,0))), 0 2px 3px rgba(16,0,2,.65); }
body[data-safelight="on"] .pj-no, body[data-safelight="on"] .pj-role{ color:rgba(206,104,92,.9); text-shadow:0 0 12px rgba(150,24,26,.5); }
body[data-safelight="on"] .pj-numeral span{ -webkit-text-stroke:1px rgba(196,84,74,.26); color:rgba(120,30,32,.05); }
body[data-safelight="on"] #nav, body[data-safelight="on"] #nav a, body[data-safelight="on"] .nav-menu{ color:#D89A90; text-shadow:0 0 12px rgba(150,24,26,.4); }
body[data-safelight="on"] .st-04 .pj-col{ --fg:#DFA093; --fg2:#B2635B; --fg3:rgba(223,160,147,.4); --rule:rgba(223,160,147,.24); }
@media print{ body[data-safelight="on"]::after{ display:none; } }

/* ============================================================
   THE VAULT — a door, a dial, and a message that has to be found
   ============================================================ */
.vt4{ position:relative; min-height:100vh; min-height:100svh; background:#040302; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:calc(var(--nav-h) + 7vh) var(--gutter) clamp(30px,6vh,60px); --near:0; --breath:1; --peer:0; }
.vt4-glow{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(34% 30% at 50% 52%, rgba(255,176,84,calc(.10 + .22*var(--near))) 0%, rgba(255,150,60,0) 72%),
    radial-gradient(60% 18% at 50% 96%, rgba(255,176,84,calc(.05 + .14*var(--near)*var(--breath))) 0%, rgba(255,150,60,0) 72%); }
.vt4-motes{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.vt4-k{ position:absolute; top:calc(var(--nav-h) + clamp(28px,6vh,64px)); left:0; right:0; text-align:center; margin:0; font-size:10.5px; letter-spacing:.9em; padding-left:.9em; color:rgba(236,232,222,.55); }
.vt4-door{ position:relative; width:min(18vh,168px); height:min(50vh,450px); margin-top:2vh; display:flex; justify-content:center; box-shadow:0 0 0 1px rgba(255,236,208,.13), 0 0 0 calc(1px + 0px) rgba(0,0,0,.7), 0 40px 90px -30px rgba(0,0,0,.9); }
.vt4-leaf{ position:relative; flex:1 1 0; min-width:0; background:linear-gradient(90deg,#171512 0%,#0d0c0a 100%), repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); background-blend-mode:normal; transition:transform .9s var(--swift); }
.vt4-l{ background:linear-gradient(90deg,#0b0a08 0%,#191714 100%); box-shadow:inset -1px 0 0 rgba(255,214,150,calc(.18 + .5*var(--near))); }
.vt4-r{ background:linear-gradient(270deg,#0b0a08 0%,#191714 100%); box-shadow:inset 1px 0 0 rgba(255,214,150,calc(.18 + .5*var(--near))); }
.vt4-l::before, .vt4-r::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px); pointer-events:none; }
.vt4-slit{ position:relative; flex:none; width:calc(2px + var(--near)*26px); overflow:hidden; background:#000; transition:width .05s linear; box-shadow:0 0 calc(18px + var(--near)*60px) calc(2px + var(--near)*10px) rgba(255,168,72,calc(.34*var(--breath) + .3*var(--near))); }
.vt4-img{ position:absolute; top:0; left:50%; height:100%; width:auto; max-width:none; transform:translateX(calc(-50% + var(--peer)*-40px)); filter:sepia(.55) saturate(.9) brightness(calc(.42 + .30*var(--near))) blur(1.6px); }
.vt4-slit-warm{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,196,110,.28), rgba(255,150,60,.10) 60%, rgba(255,150,60,.34)); mix-blend-mode:screen; }
.vt4-mark{ position:absolute; left:0; right:0; top:5.5%; text-align:center; font-style:normal; font-family:var(--display); font-size:clamp(20px,2.6vh,32px); color:rgba(236,232,222,.28); pointer-events:none; }
.vt4-line{ margin:clamp(20px,4.2vh,42px) 0 0; font-size:clamp(24px,3vw,44px); line-height:1; font-style:italic; letter-spacing:-.01em; color:rgba(243,240,232,.9); text-align:center; text-shadow:0 1px 0 rgba(255,255,255,.08), 0 -1px 1px rgba(0,0,0,.6); }
.vt4-form{ display:flex; align-items:center; gap:12px; margin-top:clamp(14px,2.4vh,26px); width:min(320px,86vw); border-bottom:1px solid rgba(236,232,222,.26); transition:border-color .5s var(--ease); }
.vt4-form:focus-within{ border-bottom-color:rgba(255,214,150,.8); }
.vt4-in{ flex:1; min-width:0; background:none; border:0; outline:none; padding:10px 2px; font-size:10.5px; letter-spacing:.32em; color:#F3F0E8; text-transform:uppercase; }
.vt4-in::placeholder{ color:rgba(236,232,222,.34); }
.vt4-go{ width:32px; height:32px; flex:none; display:grid; place-items:center; color:rgba(236,232,222,.7); font-size:15px; transition:color .3s, transform .5s var(--swift); }
.vt4-go:hover, .vt4-go:focus-visible{ color:#FFD9A0; transform:translateX(3px); outline:none; }
.vt4-answer{ margin:14px 0 0; min-height:1.2em; font-size:9.5px; letter-spacing:.28em; color:rgba(255,214,150,.9); opacity:0; transform:translateY(4px); transition:opacity .6s var(--ease), transform .6s var(--swift); text-align:center; }
.vt4-answer.is-on{ opacity:1; transform:none; }
.vt4-whisper{ position:absolute; left:0; right:0; bottom:clamp(20px,4.5vh,46px); margin:0; text-align:center; font-size:clamp(15px,1.5vw,20px); font-style:italic; color:rgba(236,232,222,.42); opacity:0; transition:opacity 2.4s var(--ease); pointer-events:none; }
.vt4.is-whispering .vt4-whisper{ opacity:1; }
.vt4.is-knock .vt4-door{ animation:vt4-knock .7s var(--swift); }
@keyframes vt4-knock{ 0%{ transform:none; } 12%{ transform:translateX(-3px); } 28%{ transform:translateX(2.4px); } 46%{ transform:translateX(-1.4px); } 64%{ transform:translateX(.8px); } 100%{ transform:none; } }
@media (max-width:759px){ .vt4-door{ width:min(24vh,150px); height:min(54vh,420px); } .vt4-k{ letter-spacing:.7em; } }
/* --- the door is larger, so that a dial can stand on it, and a slot under the dial --- */
.vt4{ padding:calc(var(--nav-h) + 3vh) var(--gutter) clamp(22px,4vh,44px); }
.vt4-k{ color:rgba(236,232,222,.20); }
.vt4-door{ width:min(25vh,240px); height:min(54vh,470px); margin-top:0; }
.vt4-mark{ top:3.6%; }
.vt4-slit{ width:calc(3px + var(--near)*22px); }
.vt4-leaf{ overflow:hidden; }
.vt4-leaf::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(240px 240px at var(--lx,-400px) var(--ly,-400px), rgba(255,206,140,.05), rgba(255,206,140,0) 100%); }

/* what the door is for: cut into the left leaf and printed in the leaf's own ink; it is there, and nothing shows it but a light */
.vt4-eng{ position:absolute; left:50%; top:5%; margin:0; transform:translateX(-50%) rotate(180deg); writing-mode:vertical-rl; white-space:nowrap; font-size:8.6px; letter-spacing:.2em; line-height:1; pointer-events:none; }
.vt4 .c{ --r:0; display:inline-block; color:rgba(238,226,204,calc(.04 + var(--r)*.86)); text-shadow:0 1px 0 rgba(0,0,0,.72), 0 -1px 0 rgba(255,232,196,calc(.02 + var(--r)*.36)); transition:color .3s; }

/* the dial: a knurled wheel of dark metal, with its words round the rim */
.vt4-dial{ position:absolute; left:50%; top:56%; width:min(21.5vh,208px); aspect-ratio:1/1; transform:translate(-50%,-50%) rotate(0deg); border-radius:50%; cursor:grab; touch-action:none; outline:none; user-select:none; -webkit-user-select:none;
  background:radial-gradient(circle at 34% 28%, #2b2824 0%, #14120f 46%, #080706 100%);
  box-shadow:inset 0 1px 0 rgba(255,232,196,.16), inset 0 -2px 6px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.9), 0 0 0 2px rgba(255,236,208,.10), 0 18px 34px -8px rgba(0,0,0,.9), 0 0 calc(30px*var(--near,0)) rgba(255,180,100,calc(.14*var(--near,0))); }
.vt4-dial.is-held{ cursor:grabbing; }
.vt4-dial:focus-visible{ box-shadow:inset 0 1px 0 rgba(255,232,196,.16), 0 0 0 2px rgba(255,214,150,.7), 0 18px 34px -8px rgba(0,0,0,.9); }
.vt4-knurl{ position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.075) 0deg 1.4deg, rgba(0,0,0,.25) 1.4deg 3deg);
  -webkit-mask-image:radial-gradient(circle, transparent 0 84%, #000 85% 100%); mask-image:radial-gradient(circle, transparent 0 84%, #000 85% 100%); }
.vt4-ring{ position:absolute; left:50%; top:50%; width:0; height:0; }
.vt4-ring .c{ position:absolute; left:0; top:0; font-family:var(--mono); font-size:clamp(7px,.9vh + 2px,9.5px); letter-spacing:0; will-change:transform; }
.vt4-hub{ position:absolute; left:50%; top:50%; width:34%; aspect-ratio:1/1; margin:0; transform:translate(-50%,-50%); border-radius:50%; display:grid; place-items:center; pointer-events:none; font-style:normal;
  background:radial-gradient(circle at 36% 30%, #34302a 0%, #16140f 58%, #0a0908 100%); box-shadow:inset 0 1px 0 rgba(255,232,196,.2), inset 0 -1px 3px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.8), 0 3px 8px rgba(0,0,0,.6); }
.vt4-hub b{ font-family:var(--display); font-weight:400; font-size:clamp(20px,3.4vh,34px); color:rgba(238,226,204,.30); text-shadow:0 1px 0 rgba(0,0,0,.8), 0 -1px 0 rgba(255,232,196,.18); }
.vt4-pip{ position:absolute; left:50%; top:3.5%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:rgba(255,214,150,.18); pointer-events:none; transition:background .3s, box-shadow .3s; }
.vt4-pip.is-t{ animation:vt4-pip .28s ease-out; }
@keyframes vt4-pip{ 0%{ background:#FFE2AE; box-shadow:0 0 10px rgba(255,200,120,.9); } 100%{ background:rgba(255,214,150,.18); box-shadow:none; } }
.vt4.is-known .vt4-pip{ background:rgba(255,206,130,.8); box-shadow:0 0 8px rgba(255,190,110,.6); }

/* the slot under the dial: nothing is in it, until everything has been read; then a certificate comes a little way out */
.vt4-slot{ position:absolute; left:8%; right:8%; top:calc(89% - 118px); height:118px; pointer-events:none; }
.vt4-slot-in{ position:absolute; inset:0 0 6px 0; overflow:hidden; }
.vt4-lip{ position:absolute; left:-3%; right:-3%; bottom:0; height:6px; border-radius:3px; background:linear-gradient(180deg,#000 0%,#0c0b09 100%); box-shadow:0 1px 0 rgba(255,232,196,.16), 0 -1px 0 rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.7); }
.vt4-cert{ position:absolute; left:2%; right:2%; top:0; height:130px; transform:translateY(120px) rotate(-.4deg); border-radius:2px; padding:12px 12px 0;
  background:linear-gradient(180deg,#EBE7DC 0%,#DEDACE 100%); box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 -6px 18px -6px rgba(255,214,150,.22); display:grid; align-content:start; gap:5px; color:#1B1A17;
  transition:transform 2.6s cubic-bezier(.22,.9,.24,1); }
.vt4.is-known .vt4-cert{ transform:translateY(20px) rotate(-.4deg); }
.vt4-cert-k{ font-size:5.6px; letter-spacing:.3em; color:rgba(27,26,23,.62); }
.vt4-cert-n{ font-size:16px; line-height:1; font-style:italic; color:#151412; }
.vt4-cert-r{ position:relative; display:flex; gap:8px; align-items:baseline; margin-top:3px; font-size:6.4px; letter-spacing:.2em; color:rgba(27,26,23,.62); }
.vt4-cert-r b{ font-weight:500; font-size:8.4px; letter-spacing:.14em; color:#151412; }
.vt4-cert-o{ position:absolute; left:34%; right:0; top:40px; height:25px; pointer-events:none; opacity:0; transition:opacity 1.2s ease 1.9s; }
.vt4-cert-o svg{ display:block; width:100%; height:100%; }
.vt4.is-known .vt4-cert-o{ opacity:1; }

/* the line under the door says it, once it has been found out */
.vt4-line{ margin:clamp(14px,2.6vh,26px) 0 0; max-width:min(680px,88vw); font-size:clamp(20px,2.3vw,34px); line-height:1.08; font-style:italic; letter-spacing:-.01em; text-align:center; color:rgba(243,240,232,.92); opacity:0; transform:translateY(8px); transition:opacity 2.2s ease .6s, transform 2.2s ease .6s; }
.vt4.is-known .vt4-line{ opacity:1; transform:none; }
.vt4-form{ opacity:.18; transition:opacity 1.6s ease, border-color .4s; }
.vt4.is-known .vt4-form, .vt4-form:focus-within{ opacity:1; }
.vt4-in::placeholder{ color:rgba(236,232,222,.5); }
@media (max-width:759px){ .vt4-door{ width:min(50vw,230px); height:min(56vh,470px); } .vt4-dial{ width:min(44vw,204px); } .vt4-k{ letter-spacing:.7em; } }
@media (prefers-reduced-motion:reduce){ .vt4-cert{ transition-duration:.01s; } }

/* ============================================================
   THE NINE — the way along the strip, and the name carried through the door
   Nothing here is a word. A chevron at each rim of the glass and the nine points of the marker are what invite the hand along the strip; they are
   printed in the ink of the room they stand on and they come forward with the pointer. The name of the stage rides the door open (.nn-ghost) and
   then stands over the first frame of the page as its own title (.nn-card), which is the page's own markup.
   ============================================================ */
.nn-nav{ --ink:243,240,232; --shade:0,0,0; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; visibility:hidden; }
.nn-nav[data-tone="light"]{ --ink:20,19,17; --shade:255,255,255; }
.nn-nav button{ position:absolute; padding:0; border:0; background:none; pointer-events:none; -webkit-tap-highlight-color:transparent; }
.nn-nav.is-live button{ pointer-events:auto; }
.nn-nav .nn-chev{ width:40px; height:64px; margin:-32px 0 0 -20px; display:grid; place-items:center; cursor:pointer; color:rgb(var(--ink)); border-radius:20px;
  opacity:calc(.24 + .30*var(--va,.3) + .42*var(--near,0)); transition:opacity .35s var(--ease, ease); }
.nn-chev svg{ display:block; width:13px; height:34px; overflow:visible; transition:transform .5s var(--swift, ease);
  filter:drop-shadow(0 .8px 0 rgba(var(--shade),.34)) drop-shadow(0 -.6px 0 rgba(var(--ink),.14)); }
.nn-chev polyline{ fill:none; stroke:currentColor; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.nn-chev-l:hover svg, .nn-chev-l:focus-visible svg{ transform:translateX(-3px); }
.nn-chev-r:hover svg, .nn-chev-r:focus-visible svg{ transform:translateX(3px); }
.nn-chev:hover, .nn-chev:focus-visible{ opacity:.96; }
.nn-chev:focus-visible{ outline:1px solid rgba(var(--ink),.5); outline-offset:-4px; }
.nn-chev.is-off{ opacity:0 !important; pointer-events:none !important; }
@media (hover:none){ .nn-nav .nn-chev{ opacity:.5; } }
/* the nine points of the marker: nothing is drawn on them, the glass draws the points; these are only where a press lands */
.nn-nav .nn-dot{ width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; cursor:pointer; }
.nn-dot:hover{ box-shadow:0 0 0 1px rgba(236,234,229,.34); }
.nn-dot:focus-visible{ outline:1px solid rgba(236,234,229,.7); outline-offset:1px; }
@media (max-width:759px){
  .nn-nav .nn-chev{ width:32px; height:52px; margin:-26px 0 0 -16px; }
  .nn-chev svg{ width:10px; height:26px; }
}
/* the name in the glass, taken out of the circle so that it can grow with the door */
.nn-ghost{ z-index:3; pointer-events:none; will-change:auto; }
/* the name on the first frame of the page: the page's own title, laid over it until the page has gone on */
.nn-card{ position:fixed; left:0; top:0; width:100%; height:100vh; height:100svh; min-height:0; margin:0; z-index:47; pointer-events:none; transform-origin:0 82%; }