@media (min-width: 761px) { html { zoom: .85; } }

:root {
  --night:      #08070b;
  --night-2:    #100c0a;
  --wood:       #221709;
  --wood-2:     #150e06;
  --board:      #3d3325;
  --board-2:    #2b2318;
  --board-hi:   #574a37;
  --vellum:     #ece0be;
  --vellum-lit: #f6ecd2;
  --vellum-dk:  #bda887;
  --iron:       #2b1b09;
  --iron-2:     rgba(43, 27, 9, .82);
  --iron-3:     rgba(43, 27, 9, .6);
  --rubric:     #8c2412;
  --lamp:       #ffcd83;
  --phosphor:   #74dda5;
  --phosphor-2: #4a9a70;
  --edge:       rgba(120, 88, 44, .32);
  --bar-h:      clamp(52px, 4.4vw, 74px);
  --foot-h:     clamp(26px, 2.2vw, 36px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--vellum);
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 15px;
  line-height: 1.6;
  overflow: hidden;
}

.grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 210, 140, .013) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(180, 110, 20, .009) 8px 9px);
}

.lamp {
  position: absolute; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center,
    rgba(255, 208, 138, .16) 0%, rgba(255, 178, 88, .06) 38%, transparent 72%);
  animation: lampBreathe 7.5s ease-in-out infinite;
}
.lamp-home { inset: -18% 30% 20% -18%; }
.lamp-desk { inset: 4% 22% 26% 26%; z-index: 1; }
@keyframes lampBreathe {
  0%, 100% { opacity: .92; transform: scale(1); }
  38%      { opacity: 1;   transform: scale(1.03); }
  61%      { opacity: .87; transform: scale(.995); }
  72%      { opacity: .97; }
}

.motes { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.mote {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(255, 214, 156, .5);
  animation: drift linear infinite;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: .7; }
  80%  { opacity: .5; }
  to   { transform: translate3d(38px, -190px, 0); opacity: 0; }
}

.bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--bar-h); z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(18px, 2vw, 40px); background: #07050a;
  border-bottom: 1px solid rgba(140, 100, 46, .3);
}
.brand { display: flex; align-items: baseline; gap: clamp(9px, .9vw, 14px); text-decoration: none; }
.brand-mark { color: #b8351a; font-size: clamp(17.28px, 1.51vw, 23.4px); line-height: 1; }
.brand-name {
  font-family: 'Old Standard TT', Georgia, serif; font-size: clamp(22.68px, 2.14vw, 23.4px);
  letter-spacing: 2.4px; color: var(--vellum);
}
.brand-sub { font-size: 11.5px; letter-spacing: 1.4px; color: rgba(214, 168, 92, .82); }
.nav { display: flex; gap: clamp(3px, .5vw, 10px); flex-wrap: nowrap; align-items: center; }
.nav a {
  padding: clamp(6px, .6vw, 10px) clamp(11px, 1.1vw, 18px);
  text-decoration: none; white-space: nowrap;
  color: rgba(232, 220, 186, .78); font-size: clamp(14.04px, 1.32vw, 23.4px); letter-spacing: .6px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--lamp); }
body[data-open-room="journal"]  .nav a[data-nav="journal"],
body[data-open-room="guard"]    .nav a[data-nav="guard"],
body[data-open-room="alice"]    .nav a[data-nav="alice"],
body[data-open-room="org"]      .nav a[data-nav="org"],
body[data-open-room="partners"] .nav a[data-nav="partners"],
body[data-open-room="join"]     .nav a[data-nav="join"] {
  color: var(--vellum); border-bottom-color: rgba(214, 168, 92, .82);
}

.nav-key {
  margin-left: clamp(8px, 1vw, 18px);
  padding: clamp(6px, .6vw, 11px) clamp(13px, 1.3vw, 22px) !important;
  color: var(--lamp) !important; border: 1px solid rgba(255, 205, 131, .5);
  border-bottom-color: rgba(255, 205, 131, .42) !important;
}
.nav-key:hover { background: rgba(255, 205, 131, .14); }

.room {
  position: fixed; inset: var(--bar-h) 0 var(--foot-h) 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .5s ease;
}
.room.is-open { opacity: 1; visibility: visible; }

.room-home {
  display: flex; align-items: center; justify-content: center;

  overflow-y: auto;
}
.home-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
}
.home-bg.is-live { opacity: .34; }
.home-veil {
  position: absolute; inset: 0;
  background:

    linear-gradient(90deg, rgba(6, 5, 7, .9) 0%, rgba(6, 5, 7, .74) 38%, rgba(6, 5, 7, .3) 62%, transparent 80%),
    radial-gradient(ellipse 76% 64% at 44% 46%, transparent 0%, rgba(8, 6, 8, .8) 78%),
    linear-gradient(180deg, rgba(8, 6, 8, .68) 0%, rgba(8, 6, 8, .42) 28%, rgba(8, 6, 8, .88) 100%);
}
.home-inner {
  position: relative; z-index: 3;
  width: min(1560px, 90vw); padding: clamp(30px, 4vh, 60px) 0;
  display: grid; gap: clamp(32px, 4vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
}
@media (max-width: 1000px) {
  .home-inner { grid-template-columns: 1fr; width: min(680px, 92vw); gap: 30px; align-items: start; }
}
.home-logo {
  display: block; width: clamp(180px, min(22vw, 34vh), 360px);
  margin-bottom: clamp(10px, 1.8vh, 24px); opacity: .96;
}

.home-card {
  padding: clamp(18px, 2.4vmin, 34px);
  border: 1px solid var(--edge);
  backdrop-filter: blur(3px);
  background:
    linear-gradient(168deg, rgba(255, 226, 170, .06), transparent 60%),
    rgba(9, 7, 5, .82);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.home-card-cap {
  margin: 0 0 12px; font-size: clamp(12.42px, 1.01vw, 18.3px); letter-spacing: 2px;
  text-transform: uppercase; color: rgba(214, 168, 92, .88);
}
.home-hire {
  margin: 0 0 clamp(18px, 1.8vw, 26px); padding-bottom: clamp(16px, 1.6vw, 24px);
  font-family: 'Old Standard TT', Georgia, serif;
  font-size: clamp(18.36px, 1.57vw, 23.4px); line-height: 1.52;
  color: var(--vellum-lit); border-bottom: 1px solid var(--edge);
}
.home-stamp {
  display: inline-block; margin-bottom: clamp(12px, 1.6vmin, 22px); padding: 4px 14px;
  font-family: 'Old Standard TT', Georgia, serif;
  font-size: clamp(13.5px, 1.07vw, 20.9px); letter-spacing: 2px;
  color: rgba(160, 48, 24, .72); border: 1.5px solid rgba(160, 48, 24, .44);
  transform: rotate(-2.2deg);
}
.home-title {
  margin: 0 0 clamp(14px, 2vmin, 26px); font-family: 'Old Standard TT', Georgia, serif; font-weight: 400;
  font-size: clamp(27px, min(3.78vw, 6.1vh), 59.4px); line-height: 1.2; color: var(--vellum-lit);
}
.home-title em { font-style: italic; color: var(--lamp); }
.home-lede {
  margin: 0; max-width: 54ch; color: rgba(224, 210, 172, .76);
  font-size: clamp(15px, min(1.51vw, 2.45vh), 23.4px); line-height: 1.72;
}
.home-meta { margin: 0 0 clamp(14px, 2vmin, 26px); }
.home-meta > div {
  display: flex; align-items: baseline; gap: 14px;
  padding: clamp(5px, .9vmin, 11px) 0; border-bottom: 1px dotted rgba(120, 88, 44, .3);
}
.home-meta dt {
  flex: 0 0 clamp(96px, 8vw, 130px);
  font-size: clamp(12.42px, 1.03vw, 18.9px); color: rgba(214, 168, 92, .84);
}
.home-meta dd {
  margin: 0; font-family: 'Old Standard TT', Georgia, serif;
  font-size: clamp(16.74px, 1.45vw, 23.4px); color: var(--vellum-lit);
}
.home-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.home-card .act { flex: 1 1 auto; text-align: center; }
.act {
  display: inline-block; padding: clamp(11px, .95vw, 17px) clamp(19px, 1.6vw, 30px);
  text-decoration: none; font-family: 'Old Standard TT', Georgia, serif;
  font-size: clamp(16.2px, 1.45vw, 23.4px);
  color: var(--vellum); border: 1px solid var(--edge);
  transition: background .25s, color .25s, border-color .25s;
}
.act:hover { background: rgba(255, 205, 131, .12); border-color: rgba(255, 205, 131, .5); }
.act-key { background: var(--vellum); color: #1a1006; border-color: var(--vellum); }
.act-key:hover { background: var(--lamp); border-color: var(--lamp); color: #1a1006; }
.home-play {
  margin-top: clamp(16px, 1.6vw, 24px); padding: 0; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: clamp(12.96px, 1.07vw, 19.6px); color: rgba(224, 210, 172, .58);
  border-bottom: 1px dotted rgba(224, 210, 172, .44);
}
.home-play:hover { color: var(--phosphor); border-bottom-color: var(--phosphor); }

.room-journal {

  overflow: hidden;
  background: linear-gradient(180deg, #05070a 0%, #0a0f12 42%, #0d1417 100%);
}

.jr-room {

  position: relative; height: 100%; overflow: hidden;
  --ar: 2.3562;
  --rw: 100vw;
  --rh: calc(100vh - var(--bar-h) - var(--foot-h));
  --cap: 2.4;
  --pw: max(var(--rw), min(calc(var(--rh) * var(--ar)), calc(var(--rw) * var(--cap))));
  --ph: calc(var(--pw) / var(--ar));
  --bx: 0px; --by: 0px; --bs: .42;
}
@supports (height: 100dvh) {
  .jr-room { --rh: calc(100dvh - var(--bar-h) - var(--foot-h)); }
}

@media (max-aspect-ratio: 1 / 1) {
  .jr-room { --cap: 2.35; }

  .jr-hit { align-items: flex-start; justify-content: center; padding: 14% 0 0; }
  .jr-nav { bottom: auto; top: 12%; }
}

.jr-plate {
  position: absolute; bottom: 0; left: 50%;
  width: var(--pw); height: var(--ph);
  transform: translateX(calc(-50% + var(--pdx, 0px)));
}

.jr-desk {
  z-index: 0; container-type: inline-size;
  background: url(media/desk.jpg) center / 100% 100% no-repeat;

  transition: filter 1.1s cubic-bezier(.48, .02, .24, 1), transform 1.4s cubic-bezier(.48, .02, .24, 1);
}
.jr-vig {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    radial-gradient(ellipse 66% 54% at 42% 72%, transparent 0%, rgba(4, 5, 8, .52) 82%),
    linear-gradient(180deg, #0a0f12 0%, rgba(9, 14, 17, .82) 5%, rgba(6, 9, 12, .3) 14%,
                    transparent 26%, transparent 74%, rgba(4, 5, 8, .3) 100%);
}
.jr-room.is-open .jr-desk { filter: blur(8px) brightness(.36) saturate(.6); transform: translateX(calc(-50% + var(--pdx, 0px))) scale(1.06); }

.scr {
  position: absolute; z-index: 2; pointer-events: none;
  display: grid; place-items: center;
}
.scr i {
  font-family: 'Old Standard TT', Georgia, serif; font-style: normal;
  font-size: 1em; line-height: 1; color: #d8f2ff;
  transition: color .25s;
  text-shadow:
    0 0 .1em rgba(216, 242, 255, .9),
    0 0 .3em #7fd4ff,
    0 0 .7em #2f9ce0,
    0 0 1.5em rgba(47, 156, 224, .8);
}
.scr::after {
  content: ''; position: absolute; inset: -55% -40%;
  background: radial-gradient(ellipse at center, rgba(74, 168, 226, .3), transparent 64%);
  mix-blend-mode: screen; border-radius: 50%;
  pointer-events: none;
}

.scr1 { left: 19.0%; top: 43.9%; width: 10.1%; height: 17.7%;
        font-size: 4.4cqw; transform: rotate(-1.2deg) skewX(-2deg); }
.scr2 { left: 37.3%; top: 40.5%; width: 7.5%;  height: 13.1%;
        font-size: 3.2cqw; transform: rotate(-.6deg); }
.scr3 { left: 69.5%; top: 46.0%; width: 10.1%; height: 22.7%;
        font-size: 5.2cqw; transform: rotate(1.4deg) skewX(2.4deg); }

.scr i { animation: crtA 7.3s steps(1, end) infinite; }
.scr2 i { animation: crtB 9.1s steps(1, end) infinite -2.1s; }
.scr3 i { animation-duration: 11.4s; animation-delay: -3.7s; }
.scr1::after { animation: halo 4.1s ease-in-out infinite; }
.scr2::after { animation: halo 5.7s ease-in-out infinite -1.4s; }
.scr3::after { animation: halo 6.6s ease-in-out infinite -2.9s; }

@keyframes crtA {
  0%, 21%   { opacity: .92; }
  22%       { opacity: .18; }
  23%       { opacity: 1; }
  24%, 58%  { opacity: .86; }
  59%       { opacity: .1; }
  60%       { opacity: .96; }
  61%, 100% { opacity: .92; }
}
@keyframes crtB {
  0%, 44%   { opacity: .9; }
  45%       { opacity: .14; }
  46%       { opacity: 1; }
  47%, 83%  { opacity: .84; }
  84%       { opacity: .4; }
  85%, 100% { opacity: .9; }
}
@keyframes halo { 0%, 100% { opacity: .45; } 44% { opacity: .95; } 71% { opacity: .6; } }

.jr-clock-layer { z-index: 5; pointer-events: none; transition: opacity .6s ease 1.3s; }
.jr-room.is-open .jr-clock-layer { opacity: 0; transition: opacity .18s ease; }

.nix {
  position: absolute;
  left: var(--nix-x, 66%); top: var(--nix-y, 62%);
  width: var(--nix-w, 15%);
  transform: translate(-50%, -50%) rotateX(var(--nix-rx, 8deg)) rotateZ(var(--nix-rz, -2deg));
  transform-style: preserve-3d;
}
.nix {

  filter:
    blur(.4px)
    drop-shadow(-2px 3px 3px rgba(10, 6, 2, .7))
    drop-shadow(-6px 10px 16px rgba(8, 5, 2, .5));
}
.nix-tubes {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 2.5%; padding: 0 4%;
}
.nix-tube {
  position: relative; flex: 1 1 0;
  aspect-ratio: 1 / 2.7;
  border-radius: 48% 48% 12% 12% / 20% 20% 5% 5%;
  background:
    linear-gradient(100deg,
      rgba(150, 136, 112, .26) 0%, rgba(206, 198, 180, .22) 9%,
      rgba(36, 28, 18, .58) 30%, rgba(22, 16, 9, .62) 60%,
      rgba(168, 154, 130, .18) 90%, rgba(92, 78, 55, .3) 100%);
  box-shadow:
    inset 0 0 14px rgba(255, 190, 120, .14),
    inset 0 -8px 14px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(226, 206, 170, .22),
    0 2px 6px rgba(0, 0, 0, .5);
  overflow: hidden;
}

@container (max-width: 17px) {
  .nix-tube::before, .nix-tube::after { display: none; }
}
.nix-tube::before {
  content: ''; position: absolute; inset: 8% 14% 16%;
  background-image:
    repeating-linear-gradient(60deg, rgba(255, 150, 70, .16) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-60deg, rgba(255, 150, 70, .13) 0 1px, transparent 1px 5px);
  border-radius: 40% 40% 10% 10% / 16% 16% 6% 6%;
}

.nix-tube::after {
  content: ''; position: absolute; left: 10%; top: 4%; width: 20%; height: 66%;
  border-radius: 50%;
  background: linear-gradient(170deg, rgba(255, 248, 232, .46), rgba(255, 240, 215, .12) 40%, transparent 74%);
  filter: blur(.6px);
}
.nix-digit {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  font-family: 'IBM Plex Mono', monospace; font-weight: 400;
  font-size: 112cqw; line-height: 1; letter-spacing: -.02em;
  color: #f0a765;
  text-shadow:
    0 0 .05em rgba(255, 226, 190, .9),
    0 0 .14em rgba(255, 150, 70, .85),
    0 0 .34em rgba(240, 100, 20, .8),
    0 0 .8em rgba(220, 70, 0, .6);
  animation: nixFlicker 5.5s steps(1) infinite;
}
.nix-tube { container-type: inline-size; }
@keyframes nixFlicker {
  0%, 91%  { opacity: 1; }
  92%      { opacity: .82; }
  93%      { opacity: 1; }
  97%      { opacity: .9; }
  98%      { opacity: 1; }
}

.nix-tube-cap {
  position: absolute; left: -5%; right: -5%; bottom: -3%; height: 11%;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #8e6f3f 0%, #614727 30%, #3a2915 70%, #1d1409 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(240, 208, 156, .26);
}
.nix-sep {
  flex: 0 0 auto; align-self: center;
  width: 2.2%; height: 30%;
  display: flex; flex-direction: column; justify-content: space-around;
}
.nix-sep i {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: #ffb464;
  box-shadow: 0 0 .25em #ff8c28, 0 0 .7em rgba(255, 90, 0, .8), 0 0 1.4em rgba(255, 70, 0, .5);
  animation: nixBlink 2s steps(1) infinite;
}
@keyframes nixBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .18; } }

.nix-base {
  position: relative; z-index: 1; margin-top: -1.5%;
  height: 0; padding-bottom: 13%;
  border-radius: 2px 2px 4px 4px;
  background:
    linear-gradient(180deg,
      #6e5433 0%, #5b4327 7%,
      #3a2818 9%, #2f2013 40%, #221709 76%, #150e06 100%);
  box-shadow:
    inset 0 1px 0 rgba(238, 202, 150, .3),
    inset 0 -4px 8px rgba(0, 0, 0, .7),
    0 3px 8px rgba(0, 0, 0, .75);
}
.nix-base::before {
  content: ''; position: absolute; inset: 7% 3% auto; height: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(255, 226, 172, .34) 0 2px, transparent 2px 13px);
}
.nix-glow {
  position: absolute; left: 50%; bottom: -8%; width: 190%; height: 0;
  padding-bottom: 42%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(240, 96, 16, .26), transparent 62%);
  mix-blend-mode: screen; pointer-events: none;
  animation: halo 4.6s ease-in-out infinite;
}
.nix-dead .nix-digit { color: #8a5a34; text-shadow: none; opacity: .5; }

.jr-spots { z-index: 6; pointer-events: none; }
.jr-room.is-open .jr-spots { opacity: 0; pointer-events: none; }
.jr-spots { transition: opacity .5s ease; }
.spot {
  position: absolute; pointer-events: auto; cursor: pointer;
  display: grid; place-items: center; text-decoration: none;
}

.spot::after {
  content: ''; position: absolute; inset: -30% -22%;
  background: radial-gradient(ellipse at center, rgba(120, 210, 255, .3), transparent 62%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .3s;
  pointer-events: none; border-radius: 50%;
}
.spot:hover::after, .spot:focus-visible::after { opacity: 1; }
.spot:focus-visible { outline: none; }
.spot b {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  padding: 4px 11px; white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 400;
  letter-spacing: 1.4px; color: #d6f6ff;
  background: rgba(4, 10, 16, .86); border: 1px solid rgba(110, 200, 250, .45);
  opacity: 0; transition: opacity .25s;
}
.spot:hover b, .spot:focus-visible b { opacity: 1; }
.spot1 { left: 19.0%; top: 43.9%; width: 10.1%; height: 17.7%; }
.spot2 { left: 37.3%; top: 40.5%; width: 7.5%;  height: 13.1%; }
.spot3 { left: 69.5%; top: 46.0%; width: 10.1%; height: 22.7%; }

.lampcone, .lamppool { position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.lampcone {
  left: 34%; top: 46%; width: 30%; height: 40%;
  transform-origin: 70% 4%; transform: rotate(15deg) skewX(-8deg);
  background:
    radial-gradient(ellipse 34% 96% at 68% 2%,
      rgba(255, 210, 146, .3) 0%, rgba(255, 194, 116, .12) 40%, transparent 72%);
  filter: blur(14px);
}
.lampglow {
  position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  left: 51.5%; top: 43%; width: 9%; height: 12%;
  background: radial-gradient(ellipse at center, rgba(255, 224, 168, .58), rgba(255, 190, 110, .16) 44%, transparent 74%);
  filter: blur(5px);
}
.lamppool {
  left: 18%; top: 70%; width: 44%; height: 30%;
  background: radial-gradient(ellipse 44% 48% at 48% 48%,
    rgba(255, 212, 152, .58), rgba(255, 186, 106, .18) 46%, transparent 76%);
  filter: blur(12px);
}
.lampcone, .lamppool, .lampglow { animation: lampFlick 6.7s steps(1, end) infinite; }
@keyframes lampFlick {
  0%, 26%   { opacity: 1; }
  27%       { opacity: .42; }
  28%       { opacity: 1.05; }
  29%, 63%  { opacity: .94; }
  64%       { opacity: .3; }
  65%       { opacity: .6; }
  66%       { opacity: 1; }
  67%, 88%  { opacity: .97; }
  89%       { opacity: .68; }
  90%, 100% { opacity: 1; }
}

.vial {
  position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  left: 45.5%; top: 56%; width: 13%; height: 26%;
  background: radial-gradient(ellipse at 50% 58%, rgba(176, 98, 232, .5), rgba(120, 60, 190, .16) 44%, transparent 74%);
  filter: blur(6px);
  animation: halo 3.4s ease-in-out infinite;
}

.vent { position: absolute; z-index: 3; pointer-events: none; }
.pl {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;
  background: center bottom / 100% 100% no-repeat;
  mix-blend-mode: screen; opacity: 0;
  transform-origin: 50% 100%;
  animation: rise 12s linear infinite;

  -webkit-mask-image: radial-gradient(ellipse 58% 72% at 50% 76%,
    #000 0 34%, rgba(0, 0, 0, .55) 62%, transparent 88%);
  mask-image: radial-gradient(ellipse 58% 72% at 50% 76%,
    #000 0 34%, rgba(0, 0, 0, .55) 62%, transparent 88%);
}
.pa { background-image: url(media/steam1.png); }
.pb { background-image: url(media/steam2.png); animation-duration: 15s; animation-delay: -7s; }

.v1 { left: 15.6%; top: 0%;  width: 10%;  height: 36%; }
.v2 { left: 75.4%; top: -2%; width: 10%;  height: 37%; }
.v3 { left: 85%;   top: 2%;  width: 8.6%; height: 29%; }
.v4 { left: .6%;   top: 28%; width: 9%;   height: 34%; }
.v5 { left: 40.4%; top: 28%; width: 7.4%; height: 28%; }
.v2 .pa { animation-duration: 14s; animation-delay: -3.5s; }
.v2 .pb { animation-duration: 17s; animation-delay: -10s; }
.v3 .pa { animation-duration: 10.5s; animation-delay: -5s; }
.v3 .pb { animation-duration: 13s; animation-delay: -1.5s; }
.v4 .pa { animation-duration: 16s; animation-delay: -8s; }
.v4 .pb { animation-duration: 12.5s; animation-delay: -2.5s; }
.v5 .pa { animation-duration: 9s; animation-delay: -4s; }

@keyframes rise {
  0%   { opacity: 0;   transform: translateY(6%)   scale(.72, .6)  rotate(-2deg); }
  16%  { opacity: .9; }
  50%  { opacity: .74; transform: translateY(-28%) scale(1, 1)     rotate(2.5deg); }
  80%  { opacity: .32; }
  100% { opacity: 0;   transform: translateY(-64%) scale(1.34, 1.4) rotate(-3deg); }
}

.jr-scene {
  position: absolute; top: 50%; left: 50%; z-index: 4;
  width: min(1560px, 94vw); height: min(880px, calc(var(--rh) - 96px));
  transform: translate(-50%, -50%);

  perspective: 2400px;
  perspective-origin: 50% 48%;
}
.jr-stage {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  transform: translate(var(--bx), var(--by)) rotateX(var(--brx, 64deg)) rotateZ(var(--brz, -3deg)) scale(var(--bs));

  transition: none;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .8));
}
.jr-room.is-ready .jr-stage { transition: transform 1.4s cubic-bezier(.48, .02, .24, 1); }
.jr-room.is-open .jr-stage { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .78)); }
.jr-room.is-back .jr-stage { filter: blur(.45px) drop-shadow(-3px 5px 4px rgba(12, 7, 2, .78)) drop-shadow(-9px 16px 22px rgba(10, 6, 2, .5)); }
.jr-room.is-open .jr-stage { transform: none; }

.jr-room.is-back:not(.is-portrait) .jr-stage {
  transform: translate(var(--bx), var(--by)) rotateX(var(--brx, 64deg)) rotateZ(var(--brz, -3deg))
             scale(var(--bs)) translateX(50%);
}

.jr-hit {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0 9% 18px 0;
  background: none; border: 0; font: inherit;
  transition: opacity .45s ease;
}
.jr-tip {
  position: fixed; z-index: 7; pointer-events: none;
  padding: 7px 16px; white-space: nowrap; font-style: normal;
  font-family: 'IBM Plex Mono', monospace; font-size: clamp(12px, .95vw, 16px);
  letter-spacing: 1.6px; color: #ffe3b8;
  background: rgba(14, 9, 4, .88); border: 1px solid rgba(255, 205, 131, .45);
  transform: translate(-50%, -140%);
  opacity: 0; transition: opacity .22s;
}
.jr-room.is-over .jr-tip { opacity: 1; }

.jr-hit { cursor: default; }
.jr-room.is-over .jr-hit { cursor: pointer; }

.jr-hit span {
  cursor: pointer; padding: 8px 18px; font-family: 'Old Standard TT', Georgia, serif; font-size: 15px;
  color: var(--lamp); background: rgba(14, 9, 4, .62);
  border: 1px solid rgba(255, 205, 131, .34);
}
.jr-hit:hover span { background: rgba(255, 205, 131, .18); }
.jr-room.is-open .jr-hit { opacity: 0; pointer-events: none; }

.pg {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background-color: #e6d9b3; background-size: cover; background-position: center;
  color: var(--iron); font-family: 'Old Standard TT', Georgia, serif;
  font-size: clamp(17px, 1.22vw, 23.4px); line-height: 1.72;
}
.pg-a { background-image: url(media/page-a.jpg); }
.pg-b { background-image: url(media/page-b.jpg); }
.pg-c { background-image: url(media/page-c.jpg); }
.pg-d { background-image: url(media/page-d.jpg); }

.pg-rule {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(28, 56, 104, .3) 23px 24px);
  opacity: .55;
}
.pg-body { position: relative; z-index: 2; height: 100%; overflow: hidden; }

.pg-verso { padding: clamp(34px, 3vw, 56px) clamp(46px, 4vw, 74px) clamp(30px, 2.6vw, 48px) clamp(34px, 3vw, 54px); }
.pg-recto { padding: clamp(34px, 3vw, 56px) clamp(32px, 2.8vw, 52px) clamp(30px, 2.6vw, 48px) clamp(48px, 4.2vw, 78px); }
.pg-verso::after, .pg-recto::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
.pg-verso::after {
  background:
    linear-gradient(270deg, rgba(38, 21, 4, .46) 0%, rgba(38, 21, 4, .12) 5%, transparent 13%),
    linear-gradient(90deg, rgba(52, 32, 8, .3) 0%, transparent 4%);
}
.pg-recto::after {
  background:
    linear-gradient(90deg, rgba(38, 21, 4, .46) 0%, rgba(38, 21, 4, .12) 5%, transparent 13%),
    linear-gradient(270deg, rgba(52, 32, 8, .3) 0%, transparent 4%);
}
.jr-room.is-portrait .pg-verso::after,
.jr-room.is-portrait .pg-recto::after { background: none; }

.pg-margin { position: absolute; top: 0; bottom: 0; width: 1px; z-index: 1;
  background: rgba(150, 40, 22, .34); mix-blend-mode: multiply; }
.pg-verso .pg-margin { right: 30px; opacity: .5; }
.pg-recto .pg-margin { left: 34px; }
.pg-fol { position: absolute; bottom: 18px; z-index: 3; font-size: clamp(14px, 0.99vw, 17.1px); color: var(--iron-3); }
.pg-verso .pg-fol { left: 26px; }
.pg-recto .pg-fol { right: 26px; }

.pg-cover {
  background-image: url(media/cover.jpg); background-color: #2a2216;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .42);
  display: grid; place-items: center; padding: 0 !important;
}
.pg-cover::after {
  content: ''; position: absolute; inset: 0;
  background:

    radial-gradient(circle 42px at 100% 0%, rgba(152, 132, 96, .2), transparent 70%),
    radial-gradient(circle 50px at 100% 100%, rgba(152, 132, 96, .16), transparent 72%),
    radial-gradient(circle 34px at 0% 100%, rgba(140, 120, 86, .11), transparent 72%),

    linear-gradient(0deg, rgba(178, 150, 102, .2) 0 .5%, transparent 1.3%),
    linear-gradient(180deg, rgba(188, 160, 110, .24) 0 .5%, transparent 1.4%),
    linear-gradient(270deg, rgba(172, 146, 100, .17) 0 .4%, transparent 1.1%),

    linear-gradient(90deg, rgba(14, 10, 5, .82) 0%, rgba(20, 15, 8, .32) 4.5%, transparent 11%),
    linear-gradient(0deg, rgba(10, 7, 3, .3) 0%, transparent 6%),

    radial-gradient(ellipse 86% 74% at 66% 18%, rgba(255, 206, 142, .07), transparent 64%);
}

.pg-cover::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(270deg,
      rgba(168, 146, 102, .82) 0 1.1%, rgba(104, 86, 54, .78) 1.1% 1.7%,
      rgba(154, 132, 92, .8) 1.7% 2.3%, rgba(84, 68, 42, .72) 2.3% 2.8%,
      rgba(28, 18, 6, .6) 2.8% 3.4%, transparent 3.4%),
    linear-gradient(0deg,
      rgba(160, 140, 98, .8) 0 1.5%, rgba(100, 84, 54, .74) 1.5% 2.3%,
      rgba(150, 130, 90, .76) 2.3% 3.1%, rgba(26, 17, 6, .55) 3.1% 3.9%, transparent 3.9%);
}
.pg-back {
  background-image: url(media/cover.jpg); background-color: #2a2216;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .5);
}
.pg-back::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle 46px at 0% 0%, rgba(168, 150, 116, .26), transparent 72%),
    radial-gradient(circle 54px at 0% 100%, rgba(168, 150, 116, .22), transparent 74%),
    linear-gradient(270deg, rgba(14, 10, 5, .8) 0%, rgba(20, 15, 8, .3) 4.5%, transparent 11%),
    linear-gradient(0deg, rgba(10, 7, 3, .34) 0%, transparent 7%),
    radial-gradient(ellipse 80% 70% at 38% 22%, rgba(255, 206, 142, .13), transparent 68%);
}
.pg-back::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(168, 146, 102, .82) 0 1.1%, rgba(104, 86, 54, .78) 1.1% 1.7%,
      rgba(154, 132, 92, .8) 1.7% 2.3%, rgba(84, 68, 42, .72) 2.3% 2.8%,
      rgba(28, 18, 6, .6) 2.8% 3.4%, transparent 3.4%),
    linear-gradient(0deg,
      rgba(160, 140, 98, .8) 0 1.5%, rgba(100, 84, 54, .74) 1.5% 2.3%,
      rgba(150, 130, 90, .76) 2.3% 3.1%, rgba(26, 17, 6, .55) 3.1% 3.9%, transparent 3.9%);
}
.cov-label {
  position: relative; z-index: 2; width: 74%;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding: 22px 18px 24px; text-align: center; transform: rotate(-1deg);
  background-image: url(media/label.jpg); background-size: cover;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .6), inset 0 0 26px rgba(90, 62, 22, .24);
  color: var(--iron);
}
.cov-t { font-size: clamp(19.44px, 2.9vw, 23.4px); letter-spacing: 1.4px; }
.cov-s { font-size: 13.5px; color: var(--iron-2); }
.cov-n { margin-top: 3px; padding-top: 8px; font-size: 12.5px; color: var(--iron-3);
  border-top: 1px solid rgba(90, 56, 16, .32); width: 78%; }
.cov-blot {
  position: absolute; right: 15%; bottom: 13%; z-index: 2;
  width: 52px; height: 38px; transform: rotate(16deg);
  border-radius: 62% 38% 50% 50% / 56% 62% 38% 44%;
  background: radial-gradient(ellipse at 42% 40%, rgba(9, 7, 18, .62), rgba(9, 7, 18, .12) 74%, transparent);
}

.p-chap { margin: 0 0 14px; font-size: clamp(13.5px, 0.99vw, 18.0px); letter-spacing: 1.4px; color: rgba(140, 36, 18, .85); }
.p-date {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 0 0 15px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(90, 56, 16, .38);
  font-family: 'IBM Plex Mono', monospace; font-size: clamp(13.5px, 1.2vw, 22.1px); letter-spacing: .4px;
  color: rgba(126, 32, 16, .92);
}
.p-date i { font-style: normal; font-size: clamp(13px, 0.95vw, 17.1px); color: var(--iron-2); letter-spacing: 1px; }
.p-title { margin: 0 0 20px; font-size: clamp(26px, 2.34vw, 41.4px); font-weight: 400; line-height: 1.18; color: #23150a; }
.pg-body p { margin: 0 0 14px; }
.p-small { font-size: clamp(15.66px, 1.26vw, 23.4px); color: var(--iron-2); }
.p-hr { height: 1px; margin: 15px 0; background: linear-gradient(90deg, rgba(90, 56, 16, .42), rgba(90, 56, 16, .04)); }
.p-hand { font-family: 'Caveat', cursive; font-size: clamp(26px, 1.98vw, 36.0px); line-height: 1.45; color: rgba(22, 40, 96, .92); }
.p-hand-note { margin-top: 16px; color: rgba(122, 32, 16, .82); transform: rotate(-1.2deg); }
.p-rule-big { margin: 20px 0; font-family: 'Caveat', cursive; font-size: clamp(36px, 2.88vw, 54.0px); line-height: 1.28; color: rgba(18, 32, 84, .96); transform: rotate(-.7deg); }
.p-mono { font-family: 'IBM Plex Mono', monospace; font-size: clamp(14.04px, 1.23vw, 23.4px); line-height: 1.74; }
.p-box { margin: 14px 0; padding: 11px 14px; border: 1px solid rgba(90, 56, 16, .34); background: rgba(206, 182, 128, .22); }
.p-box-cap { font-size: clamp(13px, 0.9vw, 16.2px); color: var(--iron-2); margin-bottom: 6px; }
.p-cur { animation: blink 1.15s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.p-quote { margin: 12px 0; padding-left: 14px; border-left: 2px solid rgba(140, 36, 18, .42); font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: rgba(126, 32, 16, .92); }
.p-quote-dim { color: var(--iron-3); border-left-color: rgba(90, 56, 16, .3); }
.p-list { list-style: none; margin: 12px 0; padding: 0; }
.p-list li { padding: 7px 0; border-bottom: 1px dotted rgba(90, 56, 16, .3); }
.p-list b { display: block; font-weight: 400; font-size: clamp(18.36px, 1.57vw, 23.4px); }
.p-list span { font-size: clamp(15.12px, 1.26vw, 23.4px); color: var(--iron-2); }
.p-mark { margin: 16px 0; text-align: center; transform: rotate(-1.8deg); font-size: clamp(30px, 3.78vw, 55.8px); letter-spacing: 7px; color: rgba(150, 24, 12, .9); }
.p-stamp {
  display: inline-block; margin-top: 14px;
  padding: clamp(6px, .7vw, 13px) clamp(14px, 1.4vw, 28px);
  font-size: clamp(15px, 1.22vw, 23.4px); letter-spacing: 1.6px;
  transform: rotate(-2.4deg); border: 2px solid;
}
.p-stamp-red { color: rgba(134, 22, 14, .84); border-color: rgba(134, 22, 14, .6); }
.p-stamp-green { color: rgba(20, 92, 42, .88); border-color: rgba(20, 92, 42, .58); }
.p-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 6px; }
.p-act { padding: 7px 14px; text-decoration: none; font-size: 14px; color: #2a1a06; border: 1px solid rgba(90, 56, 16, .44); }
.p-act:hover { background: rgba(90, 56, 16, .12); }
.p-act-key { background: #2a1a06; color: var(--vellum); border-color: #2a1a06; }
.p-act-key:hover { background: #3d2810; }

.jr-nav {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 14px;
  opacity: 0; pointer-events: none; transition: opacity .5s ease 1.1s;
}
.jr-room.is-open .jr-nav { opacity: 1; pointer-events: auto; }
.jr-btn {
  min-width: 32px; height: 30px; padding: 0 9px; cursor: pointer;
  background: rgba(10, 7, 4, .6); border: 1px solid var(--edge); color: var(--vellum);
  font-family: inherit; font-size: 12px;
}
.jr-btn:hover:not(:disabled) { border-color: var(--lamp); color: var(--lamp); }
.jr-btn:disabled { opacity: .2; cursor: default; }
.jr-btn-shut { margin-left: 6px; }
.jr-dots { display: flex; gap: 7px; }
.jr-dot { width: 7px; height: 7px; border-radius: 50%; cursor: pointer; border: 0; padding: 0; background: rgba(224, 210, 172, .46); }
.jr-dot.is-on { background: var(--lamp); }

.stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); touch-action: pan-y; }
.sft__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

.room-guard { background: #07090a; padding: 28px 18px 34px; }
.gd-head { width: min(1680px, 94vw); margin: 0 auto clamp(18px, 2vw, 30px); }
.gd-head h2 {
  margin: 0 0 8px; font-family: 'Old Standard TT', Georgia, serif; font-weight: 400;
  font-size: clamp(30px, 2.7vw, 45.0px); letter-spacing: 1px; color: var(--phosphor);
}
.gd-head p {
  margin: 0 0 10px; max-width: 70ch;
  font-size: clamp(16.2px, 1.45vw, 23.4px); line-height: 1.7; color: rgba(224, 210, 172, .74);
}
.gd-clock { font-size: clamp(14.04px, 1.26vw, 23.4px); letter-spacing: 1.4px; color: rgba(116, 221, 165, .72); }
.gd-clock span { color: #7fe0ac; }

.gd-wall {
  width: min(1680px, 94vw); margin: 0 auto;
  display: grid; gap: clamp(10px, .8vw, 16px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 15vw, 300px), 1fr));
}
.gd-tile {
  position: relative; margin: 0; padding: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid rgba(88, 196, 141, .16); background: #050708;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  animation: camFlicker 5s steps(1) infinite;
  transition: border-color .2s;
}
.gd-tile:hover, .gd-tile:focus-visible { border-color: rgba(88, 196, 141, .55); outline: none; }
.gd-tile:focus-visible { box-shadow: 0 0 0 2px rgba(88, 196, 141, .35); }
@keyframes camFlicker {
  0%, 96%  { opacity: 1; }
  97%      { opacity: .82; }
  98%      { opacity: 1; }
  99%      { opacity: .9; }
}
.gd-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.7) contrast(1.06); transition: filter .3s, transform .6s;
}
.gd-tile:hover img, .gd-tile:focus-visible img { filter: saturate(1) contrast(1.14); transform: scale(1.03); }

.gd-num {
  position: absolute; top: 7px; left: 8px; z-index: 3;
  padding: 2px 7px;
  font-family: 'IBM Plex Mono', monospace; font-size: clamp(14.58px, 1.45vw, 23.4px);
  font-weight: 500; letter-spacing: 1.2px; color: #e8fff4;
  background: rgba(4, 12, 8, .84); border: 1px solid rgba(88, 196, 141, .34);
  text-shadow: 0 0 6px rgba(88, 196, 141, .5);
}
.gd-seq {
  position: absolute; top: 7px; right: 8px; z-index: 3;
  font-family: 'IBM Plex Mono', monospace; font-size: clamp(12.96px, 1.2vw, 22.1px);
  letter-spacing: 1px; color: rgba(88, 196, 141, .62);
}
.gd-room {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 16px 9px 7px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .9) 62%);
  font-size: clamp(12.96px, 1.26vw, 23.4px); letter-spacing: .6px; color: rgba(224, 210, 172, .84);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gd-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .16) 2px 3px);
}
.gd-roll {
  position: absolute; left: 0; right: 0; height: 42%; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(140, 220, 180, .045), transparent);
  animation: rollDown 9s linear infinite;
}
@keyframes rollDown { from { top: -45%; } to { top: 105%; } }
.gd-tile.is-static img { filter: contrast(2.4) saturate(.1) brightness(1.5); }
.gd-tile.is-static .gd-scan {
  background: repeating-linear-gradient(0deg,
    rgba(255, 255, 255, .11) 0 1px, transparent 1px 2px, rgba(0, 0, 0, .3) 2px 4px);
}
.gd-dead {
  display: grid; place-items: center; cursor: default;
  border-style: dashed; border-color: rgba(150, 34, 22, .3); animation: none;
}
.gd-dead:hover { border-color: rgba(150, 34, 22, .4); }
.gd-dead span {
  font-size: 11px; letter-spacing: 2.2px; line-height: 1.9;
  color: rgba(170, 44, 28, .58); text-align: center; padding: 0 12px;
}
.gd-foot { width: min(1680px, 94vw); margin: 18px auto 0; font-size: clamp(13.5px, 1.13vw, 20.9px); color: rgba(224, 210, 172, .68); }

body.is-viewing { overflow: hidden; }

[hidden] { display: none !important; }
.gd-view {
  position: fixed; inset: 0; z-index: 850;
  display: grid; place-items: center; padding: 4vh 4vw;
  background: rgba(3, 6, 5, .9);
  animation: lineIn .25s ease both;
}
.gd-view-box {
  position: relative; max-width: min(1000px, 92vw); max-height: 86vh;
  border: 1px solid rgba(88, 196, 141, .34);
  background: #050708; box-shadow: 0 20px 70px rgba(0, 0, 0, .8);
}
.gd-view-box img {
  display: block; max-width: 100%; max-height: calc(86vh - 44px);
  object-fit: contain; filter: saturate(.85) contrast(1.08);
}
.gd-view-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 9px 14px; border-top: 1px solid rgba(88, 196, 141, .22);
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
}
.gd-view-cam { color: var(--phosphor); letter-spacing: 1.4px; }
.gd-view-room { color: rgba(224, 210, 172, .74); font-size: 12.5px; }
.gd-view-pos { margin-left: auto; color: var(--phosphor-2); font-size: 12px; }

.gd-view-nav, .gd-view-shut {
  position: absolute; cursor: pointer; font: inherit;
  background: rgba(4, 12, 8, .8); border: 1px solid rgba(88, 196, 141, .3);
  color: var(--phosphor);
}
.gd-view-nav {
  top: 50%; transform: translateY(-50%); width: 38px; height: 60px; font-size: 15px;
}
.gd-view-prev { left: -19px; }
.gd-view-next { right: -19px; }
.gd-view-shut { top: -16px; right: -16px; width: 32px; height: 32px; font-size: 13px; }
.gd-view-nav:hover, .gd-view-shut:hover { background: rgba(88, 196, 141, .18); border-color: var(--phosphor); }
.gd-view-nav:focus-visible, .gd-view-shut:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }

@media (max-width: 560px) {
  .gd-view { padding: 2vh 2vw; }
  .gd-view-prev { left: 4px; }
  .gd-view-next { right: 4px; }
  .gd-view-shut { top: 4px; right: 4px; }
}

.room-alice {
  background: #050b09; display: flex; align-items: stretch; justify-content: center;
  padding: clamp(18px, 2vw, 34px) clamp(18px, 3vw, 48px);
}
.al-frame {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  width: min(1720px, 100%); border: 1px solid rgba(88, 196, 141, .28);
  background: #071009; box-shadow: inset 0 0 70px rgba(88, 196, 141, .05);
}
.al-glitch {
  position: absolute; left: 0; right: 0; height: 16px; z-index: 3; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(88, 196, 141, .16), transparent);
  mix-blend-mode: screen; pointer-events: none;
}
.al-glitch.go { animation: glitchPass .5s linear; }
@keyframes glitchPass {
  0%   { opacity: 0;  top: 8%; }
  20%  { opacity: 1;  top: 22%; }
  60%  { opacity: .8; top: 61%; }
  100% { opacity: 0;  top: 88%; }
}
.al-head {
  display: flex; justify-content: space-between; gap: 12px;
  padding: clamp(11px, 1vw, 18px) clamp(16px, 1.6vw, 32px);
  border-bottom: 1px solid rgba(88, 196, 141, .22);
  font-size: clamp(14.04px, 1.32vw, 23.4px); letter-spacing: 1.4px; color: #7fe0ac;
}
.al-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: clamp(16px, 1.6vw, 32px);
  font-size: clamp(15.12px, 1.45vw, 23.4px); line-height: 1.85; color: #8fe8bb;
}
.al-log div { white-space: pre-wrap; animation: lineIn .5s ease both; }
@keyframes lineIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.al-void {
  margin: 22px 0; padding: clamp(18px, 1.8vw, 30px) 12px; text-align: center;
  border-top: 1px dashed rgba(88, 196, 141, .24); border-bottom: 1px dashed rgba(88, 196, 141, .24);
  color: var(--phosphor-2); letter-spacing: 1.8px; font-size: 12.5px;
}
.al-end { color: #6ec096; }
.al-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: clamp(12px, 1.1vw, 20px) clamp(16px, 1.6vw, 32px); border-top: 1px solid rgba(88, 196, 141, .2); }
.al-foot button {
  padding: clamp(9px, .95vw, 16px) clamp(15px, 1.5vw, 28px); cursor: pointer;
  font-family: inherit; font-size: clamp(14.04px, 1.32vw, 23.4px);
  background: none; border: 1px solid rgba(88, 196, 141, .28); color: var(--phosphor);
}
.al-foot button:hover:not(:disabled) { background: rgba(88, 196, 141, .1); }
.al-foot button:disabled { opacity: .3; cursor: default; }
.al-hint { margin-left: auto; font-size: clamp(13.5px, 1.26vw, 23.4px); color: #6fcb9c; }

.al-cmd {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: clamp(13px, 1.2vw, 22px) clamp(16px, 1.6vw, 32px); border-top: 1px solid rgba(88, 196, 141, .2);
}
.al-cmd label { font-size: clamp(14.04px, 1.32vw, 23.4px); letter-spacing: .6px; color: #6fcb9c; }
.al-cmd input {
  flex: 1 1 190px; min-width: 0; padding: clamp(8px, .8vw, 13px) clamp(10px, 1vw, 16px);
  font: inherit; font-size: clamp(15.12px, 1.39vw, 23.4px); letter-spacing: 1px;
  background: rgba(4, 12, 8, .85); color: var(--phosphor);
  border: 1px solid rgba(88, 196, 141, .28); border-radius: 0;
}
.al-cmd input::placeholder { color: rgba(47, 114, 80, .8); letter-spacing: .4px; }
.al-cmd input:focus { outline: none; border-color: var(--phosphor); }
.al-cmd button {
  padding: clamp(8px, .8vw, 13px) clamp(14px, 1.4vw, 24px); cursor: pointer;
  font: inherit; font-size: clamp(12.96px, 1.13vw, 20.9px);
  background: none; border: 1px solid rgba(88, 196, 141, .3); color: var(--phosphor);
}
.al-cmd button:hover:not(:disabled) { background: rgba(88, 196, 141, .12); }
.al-cmd button:disabled { opacity: .4; cursor: default; }
.al-say { flex: 1 0 100%; font-size: clamp(13.5px, 1.16vw, 20.9px); color: #6fcb9c; min-height: 1.2em; }
.al-say:empty { display: none; }
.al-say.bad { color: #d98a6a; }
.al-say.good { color: var(--phosphor); }

.al-unlocked {
  padding: clamp(14px, 1.4vw, 24px); border-top: 1px solid rgba(88, 196, 141, .34);
  background: rgba(88, 196, 141, .05);
  color: #8fe8bb; font-size: clamp(14.58px, 1.26vw, 23.4px); line-height: 1.75;
  animation: lineIn .6s ease both;
}
.ul-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.ul-lead { margin: 0; flex: 1 1 auto; }
.ul-shut {
  flex: 0 0 auto; width: 34px; height: 34px; cursor: pointer;
  font: inherit; font-size: 15px; line-height: 1;
  background: none; border: 1px solid rgba(88, 196, 141, .34); color: var(--phosphor);
}
.ul-shut:hover { background: rgba(88, 196, 141, .14); border-color: var(--phosphor); }
.ul-shut:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
.ul-block { margin: 12px 0; padding: 11px 13px; border: 1px solid rgba(88, 196, 141, .3); }
.ul-cap { font-size: clamp(12.96px, 1.13vw, 20.9px); color: #6fcb9c; margin-bottom: 7px; }
.ul-mono { font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.8; }
.ul-note { margin: 13px 0 0; font-size: clamp(12.96px, 1.13vw, 20.9px); color: #6fcb9c; }
.ul-note code { color: var(--phosphor); }

.room-partners {
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(18px, 2vw, 34px) clamp(16px, 3vw, 44px);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(126, 82, 26, .13), transparent 68%),
    linear-gradient(163deg, #241a0e 0%, #150f07 46%, #0b0704 100%);
}
.pt-leaf {
  position: relative; width: min(1720px, 100%); flex: 0 0 auto;
  display: flex; flex-direction: column;
  padding: clamp(34px, 3vw, 56px) clamp(30px, 3.4vw, 64px)
           clamp(34px, 3vw, 56px) clamp(38px, 4vw, 76px);
  color: var(--iron); font-family: 'Old Standard TT', Georgia, serif;
  background-color: #e6d9b3;
  background-image:
    repeating-linear-gradient(transparent 0 23px, rgba(28, 56, 104, .16) 23px 24px),
    url(media/page-b.jpg);
  background-size: auto, cover;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .75));
  transform: rotate(-.35deg);

  clip-path: polygon(
    1.4% 0%, 100% 0%, 100% 100%, 1.1% 100%,
    2.2% 96%, .9% 92%, 2.4% 88%, 1.2% 84%, 2.6% 80%, 1.0% 76%,
    2.3% 72%, .8% 68%, 2.5% 64%, 1.3% 60%, 2.1% 56%, .7% 52%,
    2.6% 48%, 1.1% 44%, 2.4% 40%, .9% 36%, 2.2% 32%, 1.4% 28%,
    2.5% 24%, .8% 20%, 2.3% 16%, 1.2% 12%, 2.6% 8%, 1.0% 4%);
}

.pt-leaf::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 30px; width: 1px;
  background: rgba(150, 40, 22, .3); mix-blend-mode: multiply;
}
.pt-stain {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 96px 82px at 88% 9%,
      rgba(118, 72, 20, .05) 0 60%, rgba(118, 72, 20, .24) 62% 69%, transparent 78%),
    radial-gradient(circle 7px at 12% 46%, rgba(26, 22, 62, .4) 0 52%, rgba(26, 22, 62, .12) 54%, transparent),
    radial-gradient(ellipse 150px 110px at 4% 96%, rgba(126, 88, 30, .12), transparent 74%),
    linear-gradient(255deg, rgba(84, 52, 12, .14) 0%, transparent 24%);
}
.pt-body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1 1 auto; }
.room-org .pt-leaf { width: min(1010px, 100%); }
.pt-title {
  margin: 0 0 10px; font-family: 'Caveat', cursive; font-weight: 600;
  font-size: clamp(38px, 3.9vw, 68px); line-height: 1.12;
  color: rgba(18, 32, 84, .96); transform: rotate(-.5deg); transform-origin: left center;
}
.pt-lead {
  margin: 0 0 clamp(22px, 2vw, 34px);
  font-family: 'Caveat', cursive; font-size: clamp(23px, 2.05vw, 38px);
  line-height: 1.4; color: rgba(22, 40, 96, .92);
}

.pt-grid {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(14px, 1.2vw, 22px);
}

.pt-grid li {
  position: relative;
  flex: 1 1 clamp(180px, 14vw, 260px); max-width: clamp(240px, 18vw, 300px);
  display: grid; place-items: center;
  min-height: clamp(96px, 8vw, 140px);
  padding: clamp(28px, 2.6vw, 40px) clamp(26px, 2.8vw, 42px) clamp(20px, 2vw, 30px);
  background-repeat: no-repeat; background-size: 100% 100%;
  filter: drop-shadow(2px 4px 7px rgba(40, 22, 4, .45));
}
.pt-grid li:nth-child(4n+1) { background-image: url(media/card-burn-1.png?v=2); }
.pt-grid li:nth-child(4n+2) { background-image: url(media/card-burn-2.png?v=2); }
.pt-grid li:nth-child(4n+3) { background-image: url(media/card-burn-3.png?v=2); }
.pt-grid li:nth-child(4n)   { background-image: url(media/card-burn-4.png?v=2); }
.pt-grid li:nth-child(4n)   { transform: rotate(.7deg); }
.pt-grid li:nth-child(4n+1) { transform: rotate(-.6deg); }
.pt-grid li:nth-child(4n+2) { transform: rotate(.35deg); }
.pt-grid li:nth-child(4n+3) { transform: rotate(-.25deg); }
.pt-grid li img {
  max-width: 88%; max-height: clamp(58px, 5vw, 86px); object-fit: contain;
  mix-blend-mode: multiply;
}

.pt-grid li.is-plain img { mix-blend-mode: normal; }

.pt-grid li.is-tall { min-height: clamp(132px, 11vw, 190px); }
.pt-grid li.is-tall img { max-height: clamp(104px, 9vw, 150px); }
.pt-grid li span {
  font-family: 'IBM Plex Mono', monospace; font-size: clamp(14.04px, 1.26vw, 23.4px);
  color: var(--iron-2); text-align: center; line-height: 1.4;
}
.pt-stamp { margin-top: auto; padding-top: clamp(22px, 2.4vw, 38px); align-self: flex-start; }

.room-join {
  display: flex; align-items: stretch; justify-content: center;
  padding: clamp(16px, 1.8vw, 30px) clamp(16px, 3vw, 44px);
  background:
    radial-gradient(ellipse 60% 50% at 50% 26%, rgba(30, 90, 70, .16), transparent 70%),
    linear-gradient(180deg, #060b09 0%, #040706 100%);
}
.tm { width: min(1560px, 100%); display: flex; min-height: 0; }
.tm-case {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: clamp(20px, 1.8vw, 34px) clamp(20px, 1.8vw, 34px) 0;
  border-radius: 26px 26px 8px 8px;
  background:
    linear-gradient(184deg, rgba(255, 226, 170, .1), transparent 30%),
    linear-gradient(160deg, #6b552f 0%, #493a20 42%, #2f2615 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 226, 170, .26),
    inset 0 -3px 10px rgba(0, 0, 0, .55),
    0 26px 70px rgba(0, 0, 0, .78);
}

.tm-case::before, .tm-case::after {
  content: ''; position: absolute; top: 12px; width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9c092, #6a563a 60%, #3a2f1c);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.tm-case::before { left: 12px; }
.tm-case::after { right: 12px; }
.tm-screen {
  position: relative; overflow: hidden; flex: 1 1 auto; min-height: 0;
  display: flex; border-radius: 16px; background: #050d0a;
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, .9),
    inset 0 0 24px rgba(88, 196, 141, .1),
    0 0 0 3px #1d1710, 0 0 0 4px rgba(255, 220, 160, .16);
  animation: tmOn .7s ease both;
}
@keyframes tmOn {
  0%   { opacity: 0; filter: brightness(3) contrast(.3); transform: scaleY(.004); }
  35%  { opacity: 1; filter: brightness(1.8) contrast(.7); transform: scaleY(.05); }
  100% { opacity: 1; filter: none; transform: scaleY(1); }
}

.tm-glass {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 16px;
  background:
    radial-gradient(ellipse 120% 90% at 50% 46%, transparent 52%, rgba(2, 8, 6, .72) 100%),
    linear-gradient(172deg, rgba(190, 255, 225, .07) 0%, transparent 26%);
}
.tm-scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px);
}
.tm-roll {
  position: absolute; left: 0; right: 0; height: 30%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(140, 220, 180, .045), transparent);
  animation: rollDown 11s linear infinite;
}
.tm-body {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: clamp(24px, 2.2vw, 42px) clamp(26px, 2.6vw, 54px);
  color: #8fe8bb; font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(15.66px, 1.45vw, 23.4px); line-height: 1.78;
  text-shadow: 0 0 5px rgba(88, 196, 141, .35);
}
.tm-cols {
  display: grid; gap: clamp(24px, 2.4vw, 52px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1100px) {
  .tm-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tm-col:last-child .tm-h3:first-child { margin-top: 0; }
}
.tm-head {
  margin: 0 0 20px; padding-bottom: 9px; font-size: clamp(13.5px, 1.2vw, 22.1px);
  letter-spacing: 1.4px; color: #6fcb9c; border-bottom: 1px solid rgba(88, 196, 141, .26);
}
.tm-line { margin: 0 0 8px; color: #6fcb9c; font-size: clamp(14.58px, 1.26vw, 23.4px); }
.tm-title {
  margin: 0 0 14px; font-family: 'Old Standard TT', Georgia, serif; font-weight: 400;
  font-size: clamp(30px, 3.06vw, 48.6px); letter-spacing: 1px; color: #d7ffe9;
  text-shadow: 0 0 10px rgba(88, 196, 141, .5);
}
.tm-hire {
  margin: 0 0 20px; padding: clamp(14px, 1.3vw, 22px) clamp(16px, 1.5vw, 26px); max-width: 72ch;
  font-size: clamp(16.2px, 1.57vw, 23.4px); line-height: 1.72; color: #d7ffe9;
  border-left: 2px solid var(--phosphor);
  background: rgba(88, 196, 141, .07);
}
.tm-lead {
  margin: 0 0 28px; max-width: 72ch; color: rgba(205, 245, 224, .92);
  font-size: clamp(16.2px, 1.51vw, 23.4px);
}

.tm-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px 26px; margin: 0 0 26px; padding: clamp(16px, 1.5vw, 24px) 0;
  border-top: 1px dashed rgba(88, 196, 141, .26);
  border-bottom: 1px dashed rgba(88, 196, 141, .26);
}
.tm-facts dt { font-size: clamp(12.96px, 1.13vw, 20.9px); letter-spacing: 1px; color: #6fcb9c; margin-bottom: 4px; }
.tm-facts dd { margin: 0; font-size: clamp(17.28px, 1.7vw, 23.4px); color: #d7ffe9; }

.tm-go {
  display: inline-block; padding: clamp(13px, 1.1vw, 20px) clamp(24px, 2.2vw, 44px);
  text-decoration: none; font-size: clamp(15.12px, 1.32vw, 23.4px);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: #04140d; background: var(--phosphor);
  border: 1px solid var(--phosphor); border-radius: 2px;
  box-shadow: 0 0 18px rgba(88, 196, 141, .34);
  transition: background .2s, box-shadow .2s;
}
.tm-go:hover { background: #7ee0ad; box-shadow: 0 0 26px rgba(88, 196, 141, .55); }
.tm-deadline { margin: 13px 0 0; font-size: clamp(14.58px, 1.26vw, 23.4px); color: #f0c69a; text-shadow: 0 0 6px rgba(200, 130, 60, .4); }

.tm-h3 {
  margin: 30px 0 14px; font-size: clamp(13.5px, 1.2vw, 22.1px); letter-spacing: 2px;
  text-transform: uppercase; color: #6fcb9c; padding-bottom: 7px;
  border-bottom: 1px solid rgba(88, 196, 141, .2);
}
.tm-bracket { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px dotted rgba(88, 196, 141, .2); }
.tm-roman {
  flex: 0 0 clamp(32px, 2.6vw, 42px); height: clamp(32px, 2.6vw, 42px);
  display: grid; place-items: center;
  font-size: clamp(12.96px, 1.13vw, 20.9px); color: var(--phosphor);
  border: 1px solid rgba(88, 196, 141, .4);
}
.tm-bracket b { display: block; font-weight: 500; font-size: clamp(16.74px, 1.64vw, 23.4px); color: #d7ffe9; margin-bottom: 4px; }
.tm-bracket span { font-size: clamp(14.58px, 1.32vw, 23.4px); color: rgba(205, 245, 224, .92); line-height: 1.6; }
.tm-guests { margin: 0; font-size: clamp(15.12px, 1.39vw, 23.4px); color: rgba(205, 245, 224, .9); }

.tm-links { list-style: none; margin: 0; padding: 0; }
.tm-links li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0; border-bottom: 1px dotted rgba(88, 196, 141, .2);
}
.tm-links a { font-size: clamp(16.2px, 1.57vw, 23.4px); color: var(--phosphor); text-decoration: none; border-bottom: 1px solid rgba(88, 196, 141, .4); }
.tm-links a:hover { color: #8ce9bb; border-bottom-color: #8ce9bb; }
.tm-links span { margin-left: auto; font-size: clamp(13.5px, 1.16vw, 20.9px); color: #6fcb9c; }
.tm-cursor { margin: 26px 0 0; color: #6fcb9c; font-size: clamp(14.04px, 1.2vw, 22.1px); }

.tm-plate {
  flex: 0 0 auto; padding: 9px 0 11px; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 3.4px;
  color: rgba(255, 226, 170, .5);
}

@media (max-width: 620px) {
  .pt-leaf { padding: 28px 20px 30px 30px; }
  .pt-grid { gap: 10px; }
  .pt-grid li { flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
  .pt-grid li { min-height: 84px; padding: 20px 16px 12px; }
  .pt-grid li img { max-height: 52px; }
  .tm-case { padding: 14px 14px 0; border-radius: 16px 16px 6px 6px; }
  .tm-case::before, .tm-case::after { display: none; }
  .tm-body { padding: 20px 16px 24px; font-size: 13px; }
  .tm-go { display: block; text-align: center; }
}

.foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 18px; background: rgba(7, 5, 8, .82);
  font-size: 11px; color: rgba(224, 210, 172, .58);
}
.foot-x { color: rgba(150, 34, 22, .34); font-size: 12px; }

@media (max-width: 860px) {
}
@media (max-width: 560px) {
  .gd-wall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
  .gd-head h2 { font-size: 24px; }
  .gd-num { font-size: 11.5px; padding: 2px 5px; }
  .gd-room { font-size: 10px; }
  .cs-sheet { padding: 32px 20px 24px; }
  .cs-table thead { display: none; }
  .cs-table td { display: block; padding: 3px 0; border: 0; }
  .cs-table tr { display: block; padding: 11px 0; border-bottom: 1px dotted rgba(90, 56, 16, .26); }
}
@media (max-width: 900px) {
  .brand-sub { display: none; }
  .bar { padding: 0 10px; }
  .nav a { padding: 6px 7px; font-size: 12px; }
  .nav-key { margin-left: 4px; padding: 5px 10px !important; }
  .brand-name { font-size: 18px; }
}
@media (max-width: 620px) {

  .nav a[data-nav="org"], .nav a[data-nav="partners"] { display: none; }
  .jn-sheet, .pt-sheet { padding: 30px 20px 26px; }
  .jn-sheet h2, .pt-sheet h2 { font-size: 25px; }
  .jn-go { display: block; text-align: center; }
  .pt-grid li { flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
}

@media (prefers-reduced-motion: reduce) {
  .lamp, .mote, .gd-tile, .gd-roll, .al-log div,
  .scr i, .scr::after, .vial, .lampcone, .lamppool, .lampglow, .pl { animation: none !important; }
  .home-bg { display: none; }
  .pl { opacity: .3; transform: none; }
}

html.is-booting, html.is-booting body { overflow: hidden; }
.boot {
  position: fixed; inset: 0; z-index: 950;
  display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 44%, rgba(126, 82, 26, .1), transparent 72%),
    #07060a;
  transition: opacity .6s ease;
}
.boot.is-gone { opacity: 0; pointer-events: none; }
.boot-inner { width: min(440px, 92vw); }
.boot-cap {
  margin: 0 0 22px; text-align: center;
  font-family: 'Old Standard TT', Georgia, serif; font-size: 15px; letter-spacing: 1.6px;
  color: rgba(214, 168, 92, .9);
}
.boot-list { list-style: none; margin: 0 0 22px; padding: 0; }
.boot-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.5;
  color: rgba(224, 210, 172, .38);
  transition: color .3s;
}
.boot-mark { flex: 0 0 12px; text-align: center; }
.boot-list li.is-now { color: var(--lamp); }
.boot-list li.is-now .boot-mark { animation: bootBlink .8s steps(2) infinite; }
.boot-list li.is-done { color: rgba(116, 221, 165, .8); }
.boot-list li.is-done .boot-mark::before { content: '+'; }
.boot-list li.is-done .boot-mark { font-size: 0; }
.boot-list li.is-done .boot-mark::before { font-size: 12.5px; }
@keyframes bootBlink { 50% { opacity: .25; } }

.boot-bar {
  height: 2px; background: rgba(224, 210, 172, .12); overflow: hidden;
}
.boot-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, rgba(255, 205, 131, .5), var(--lamp));
  transition: width .35s ease;
}
.boot-pc {
  margin: 10px 0 0; text-align: right;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: 1.2px;
  color: rgba(224, 180, 104, .9);
}

@media (prefers-reduced-motion: reduce) {
  .boot-list li.is-now .boot-mark { animation: none; }
}

.chat { display: flex; flex-direction: column; gap: 12px; }
.chat-log {
  max-height: min(420px, 46vh); overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding-right: 4px;
}
.chat-line {
  margin: 0; padding: clamp(11px, 1vw, 17px) clamp(14px, 1.3vw, 22px); max-width: 80%;
  font-size: clamp(15px, 1.12vw, 19.8px); line-height: 1.72;
  border-left: 2px solid;
}
.chat-a {
  align-self: flex-start; color: #a6f0cb;
  border-left-color: var(--phosphor); background: rgba(88, 196, 141, .08);
}
.chat-q {
  align-self: flex-end; color: rgba(214, 236, 255, .92);
  border-left-color: rgba(120, 190, 240, .7); background: rgba(90, 150, 210, .1);
}
.chat-line.is-wait { color: var(--phosphor-2); font-style: italic; }
.chat-ask { display: flex; flex-wrap: wrap; gap: 10px; }
.chat-ask input {
  flex: 1 1 220px; min-width: 0;
  padding: clamp(9px, .9vw, 15px) clamp(12px, 1.2vw, 18px);
  font: inherit; font-size: clamp(15px, 1.08vw, 18.9px);
  background: rgba(4, 12, 8, .85); color: var(--phosphor);
  border: 1px solid rgba(88, 196, 141, .3); border-radius: 0;
}
.chat-ask input::placeholder { color: rgba(74, 154, 112, .9); }
.chat-ask input:focus { outline: none; border-color: var(--phosphor); }
.chat-ask button {
  padding: clamp(9px, .9vw, 15px) clamp(16px, 1.6vw, 28px); cursor: pointer;
  font: inherit; font-size: clamp(14px, 0.99vw, 17.1px);
  background: none; border: 1px solid rgba(88, 196, 141, .34); color: var(--phosphor);
}
.chat-ask button:hover:not(:disabled) { background: rgba(88, 196, 141, .12); }
.chat-ask button:disabled { opacity: .4; cursor: default; }
.chat-note { margin: 0; font-size: clamp(13px, 0.9vw, 15.3px); color: #6fcb9c; min-height: 1.3em; }

@media (min-width: 1001px) and (max-height: 780px) {
  .home-inner { padding: 12px 0; gap: clamp(22px, 3vw, 40px); }
  .home-logo { width: clamp(170px, 20vmin, 260px); margin-bottom: 10px; }
  .home-stamp { margin-bottom: 10px; }
  .home-title { margin-bottom: 12px; }
  .home-card { padding: clamp(15px, 2vmin, 24px); }
  .home-hire { margin-bottom: 11px; padding-bottom: 11px; }
  .home-meta { margin-bottom: 11px; }
  .home-meta > div { padding: 4px 0; }
  .home-play { margin-top: 10px; }
}
@media (min-width: 1001px) and (max-height: 640px) {
  .home-logo { display: none; }
  .home-lede { display: none; }
}

.jr-mobile { display: none; }

@media (max-width: 760px) {

  .bar {
    height: auto; min-height: 48px; padding: 8px 12px;
    flex-wrap: wrap; row-gap: 6px;
  }
  .brand { flex: 0 0 auto; }
  .brand-name { font-size: 17px; letter-spacing: 1.6px; }
  .brand-sub { display: none; }
  .nav {
    order: 3; flex: 1 0 100%;
    justify-content: space-between; gap: 2px;
    flex-wrap: wrap; row-gap: 2px;
    padding-top: 6px; border-top: 1px solid rgba(140, 100, 46, .18);
  }
  .nav a { padding: 5px 6px; font-size: 12px; letter-spacing: 0; }
  .nav-key {
    order: 2; margin-left: auto;
    padding: 5px 12px !important; font-size: 12.5px;
  }
  .nav a[data-nav="org"], .nav a[data-nav="partners"] { display: inline-block; }

  .room {
    inset: auto 0 0 0; top: 0;
    padding-top: calc(var(--bar-real, 92px) + 16px); padding-bottom: 34px;
    -webkit-overflow-scrolling: touch;
  }
  .foot { position: static; }

  .room-home { display: block; padding-left: 16px; padding-right: 16px; }
  .home-inner {
    display: block; width: 100%; padding: 0;
  }
  .home-bg, .home-veil { position: fixed; }
  .home-logo { width: 150px; margin: 0 auto 14px; }
  .home-stamp { display: block; width: max-content; margin: 0 auto 14px; font-size: 12px; }
  .home-title {
    font-size: 27px; line-height: 1.24; text-align: center; margin-bottom: 14px;
  }
  .home-lede { font-size: 15px; line-height: 1.65; margin-bottom: 22px; }
  .home-card { padding: 18px 16px; backdrop-filter: none; }
  .home-card-cap { font-size: 11px; }
  .home-hire { font-size: 16px; margin-bottom: 14px; padding-bottom: 14px; }
  .home-meta dt { flex-basis: 88px; font-size: 11.5px; }
  .home-meta dd { font-size: 15px; }
  .home-acts { flex-direction: column; }
  .home-card .act { width: 100%; font-size: 15.5px; padding: 13px 16px; }

  .jr-desk, .jr-spots, .jr-scene, .jr-hit, .jr-nav-desktop { display: none !important; }
  .room-journal {
    overflow-y: auto;
    background: #0d0904;
    padding-left: 12px; padding-right: 12px;
  }
  .jr-room { display: block; height: auto; padding: 0; }
  .jr-mobile { display: block !important; }
  .jr-m-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-bottom: 12px;
  }
  .jr-m-title {
    margin: 0; font-family: 'Old Standard TT', Georgia, serif; font-weight: 400;
    font-size: 21px; color: var(--vellum-lit);
  }
  .jr-m-count { font-size: 12.5px; color: rgba(214, 168, 92, .82); }
  .jr-m-page {
    position: relative; overflow: hidden;
    padding: 26px 20px 30px;
    background-color: #e6d9b3; background-image: url(media/page-a.jpg);
    background-size: cover; background-position: center;
    color: var(--iron); font-family: 'Old Standard TT', Georgia, serif;
    font-size: 16.5px; line-height: 1.68;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
  }
  .jr-m-page + .jr-m-page { margin-top: 14px; }
  .jr-m-page:nth-child(4n+2) { background-image: url(media/page-b.jpg); }
  .jr-m-page:nth-child(4n+3) { background-image: url(media/page-c.jpg); }
  .jr-m-page:nth-child(4n) { background-image: url(media/page-d.jpg); }
  .jr-m-page .p-title { font-size: 22px; margin-bottom: 14px; }
  .jr-m-page .p-date { font-size: 13px; }
  .jr-m-page .p-small { font-size: 15.5px; }
  .jr-m-page .p-hand { font-size: 21px; }
  .jr-m-page .p-rule-big { font-size: 26px; }
  .jr-m-page .p-mono { font-size: 13.5px; }
  .jr-m-page .p-list b { font-size: 17px; }
  .jr-m-page .p-list span { font-size: 14.5px; }
  .jr-m-page .p-mark { font-size: 30px; letter-spacing: 4px; }

  .room-guard { padding-left: 12px; padding-right: 12px; }
  .gd-head { width: 100%; margin-bottom: 14px; }
  .gd-head h2 { font-size: 23px; }
  .gd-head p { font-size: 14px; line-height: 1.6; }
  .gd-clock { font-size: 12.5px; }
  .gd-wall { width: 100%; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gd-num { font-size: 12px; padding: 2px 6px; }
  .gd-seq { font-size: 11px; }
  .gd-room { font-size: 10.5px; padding: 12px 7px 6px; }
  .gd-foot { width: 100%; font-size: 12.5px; }

  .room-alice { display: block; padding-left: 12px; padding-right: 12px; }
  .al-frame { width: 100%; }
  .al-head { flex-wrap: wrap; gap: 4px; padding: 10px 12px; font-size: 12px; }
  .al-log { height: 46vh; min-height: 260px; padding: 12px; font-size: 12.5px; line-height: 1.7; }
  .al-foot { padding: 10px 12px; gap: 8px; }
  .al-foot button { font-size: 12.5px; padding: 8px 12px; }
  .al-hint { flex: 1 0 100%; margin-left: 0; font-size: 12px; }
  .al-cmd { padding: 12px; gap: 8px; }
  .al-cmd label { flex: 1 0 100%; font-size: 12.5px; }
  .al-cmd input { font-size: 15px; padding: 10px 12px; }
  .al-cmd button { font-size: 13px; padding: 10px 14px; }
  .chat-line { max-width: 92%; font-size: 14px; padding: 10px 12px; }
  .chat-log { max-height: 40vh; }
  .chat-ask input { font-size: 15px; }

  .room-join { display: block; padding-left: 12px; padding-right: 12px; }
  .tm { width: 100%; display: block; }
  .tm-case {
    display: block; padding: 0; border-radius: 0;
    background: none; box-shadow: none;
  }
  .tm-case::before, .tm-case::after { display: none; }
  .tm-screen {
    display: block; border-radius: 6px;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(88, 196, 141, .26);
  }
  .tm-glass { display: none; }
  .tm-body { display: block; height: auto; padding: 20px 16px 26px; font-size: 14.5px; }
  .tm-cols { display: block; }
  .tm-col + .tm-col { margin-top: 26px; }
  .tm-head { font-size: 12px; }
  .tm-title { font-size: 28px; }
  .tm-hire { font-size: 15px; padding: 13px 14px; }
  .tm-lead { font-size: 14.5px; }
  .tm-facts { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .tm-facts dd { font-size: 15px; }
  .tm-go { display: block; text-align: center; font-size: 14px; padding: 14px; }
  .tm-plate { display: none; }

  .room-partners { display: block; padding-left: 12px; padding-right: 12px; }
  .pt-leaf {
    width: 100%; display: block; padding: 24px 18px 26px;
    clip-path: none; transform: none;
  }
  .pt-leaf::before { left: 14px; }
  .pt-title { font-size: 34px; }
  .pt-lead { font-size: 22px; line-height: 1.32; }
  .pt-grid { gap: 10px; }
  .pt-grid li { flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
  .pt-grid li { min-height: 90px; padding: 22px 18px 14px; }
  .pt-grid li img { max-height: 56px; }
  .pt-grid li.is-tall { min-height: 108px; }
  .pt-grid li.is-tall img { max-height: 84px; }
  .pt-stamp { font-size: 14px; padding: 5px 12px; }

  .boot-inner { width: min(320px, 88vw); }
  .boot-list li { font-size: 12px; }
}

.dk { position: absolute; pointer-events: none; user-select: none; }
.dk-desk {
  z-index: 1;
  opacity: .22;
  filter: brightness(.5) saturate(.45) sepia(.35) blur(.4px);
}

@media (min-width: 761px) {
  .room-journal { zoom: calc(1 / .85); }
}