@font-face { font-family: CohabyteTerminal; src: url("assets/terminal.woff") format("woff"); font-weight: 400; font-display: block; }
@font-face { font-family: CohabyteTerminal; src: url("assets/terminal_bold.woff") format("woff"); font-weight: 700; font-display: block; }

:root {
  --bg:         #07070d;
  --surface:    #1b1b20;
  --surface-hi: #27272c;
  --border:     #204e64;
  --border-hi:  #7EC8E3;
  --accent:     #7EC8E3;
  --text:       #c8c8e8;
  --text-hi:    #ffffff;
  --dim:        #888aaa;
  --faint:      #606064;
  --primary:    #1c3d52;
  --primary-hi: #254e66;
  --key:        #07070d;
  --gold:       #FFC72C;
  --red:        #FF6B6B;

  --font: CohabyteTerminal, Consolas, "Cascadia Mono", "DejaVu Sans Mono", Menlo, monospace;
  --page: 1040px;
  --gutter: 16px;
  --chamfer: 10px;
  --pull: 1.2s;
  --open: 1.2s;
  --dolly: cubic-bezier(0.45, 0.05, 0.15, 1);
  --fold: 0.6s;
  --walk: 2.4s;
  --cool: 0.35s;
  --paper: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text-hi); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { color: var(--text-hi); margin: 0; line-height: 1.15; }
p { margin: 0; }

.fine { color: var(--dim); font-size: 13px; }

.key, .door {
  cursor: pointer;
  display: inline-block;
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--key);
  color: var(--text-hi);
  border: 1px solid var(--border);
  border-bottom-width: 3px;
  line-height: 1.3;
  white-space: nowrap;
}
.key:hover, .door:hover { background: var(--surface-hi); border-color: var(--border-hi); color: var(--text-hi); }
.key:active, .door:active { border-bottom-width: 1px; transform: translateY(2px); }

.key-primary { background: var(--primary); border-color: var(--primary-hi); }
.key-primary:hover { background: var(--primary-hi); border-color: #2f6180; }

.key-inert { color: var(--dim); cursor: default; }
.key-inert:hover { background: var(--key); border-color: var(--border); color: var(--dim); }
.key-inert:active { border-bottom-width: 3px; transform: none; }

.door {
  min-width: 9em;
  text-align: center;
  letter-spacing: 0.06em;
}
.door:hover { box-shadow: 0 0 18px rgba(126, 200, 227, 0.25); border-color: var(--accent); }

body.core {
  overflow: clip;
  background: var(--bg);
}
html:has(> body.core), html:has(> body.room) { overflow: clip; overscroll-behavior: none; }
body.core > .page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

.stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1600px;
  height: 900px;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transform-origin: center;
  --u: 13.5px;
}

#core {
  position: absolute;
  inset: 0;
  animation: reveal 1s ease-out both;
}

.consoles { display: contents; }
.console {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 15em;
  padding: 1em 1.3em 0.9em;
  background: rgba(42, 109, 138, 0.7);
  clip-path: var(--paper);
  color: var(--dim);
  font-size: max(12px, calc(var(--u) * 0.9));
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.console::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg);
  clip-path: var(--paper);
}

.console[data-slot^="l"] { left: 210px; }
.console[data-slot^="r"] { left: calc(100% - 210px); }
.console[data-slot$="1"] { top: 20%; }
.console[data-slot$="2"] { top: 40%; }
.console[data-slot$="3"] { top: 60%; }
.console[data-slot$="4"] { top: 80%; }
.console { transition: background var(--cool) ease-out, color var(--cool) ease-out; }
.console h2::before { transition: background var(--cool) ease-out, box-shadow var(--cool) ease-out; }

.console:hover, .console:focus-visible { background: var(--accent); color: var(--text); }
.console:active { transform: translate(-50%, calc(-50% + 1px)); }
.console h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.console h2::before {
  content: "";
  flex: none;
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.console:hover h2::before, .console:focus-visible h2::before { background: var(--text-hi); box-shadow: 0 0 12px var(--text-hi); }
.console.check h2::before { background: var(--text-hi); box-shadow: 0 0 8px var(--text-hi); }
.console.check .stat { color: var(--text-hi); }
.console.off h2::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.console.off .stat { color: var(--gold); }
.console.red h2::before { background: var(--red); box-shadow: 0 0 10px var(--red); }
.console.red { background: rgba(255, 107, 107, 0.7); }
.console.red .stat { color: var(--red); }
.console .stat { display: block; margin-top: 4px; padding-left: 18px; }

.name {
  position: absolute;
  left: 50%; top: 8%;
  transform: translateX(-50%);
  font-size: max(28px, calc(var(--u) * 2.9));
  -webkit-text-stroke: 0.035em currentColor;
  paint-order: stroke fill;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.name .mark {
  width: 1.3em; height: 1.3em;
}

.corner {
  position: absolute;
  right: 40px; top: 40px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.login {
  padding: 4px 6px;
  color: var(--dim);
  font-size: max(11px, calc(var(--u) * 0.8));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity var(--cool) ease-out, color var(--cool) ease-out;
}
.login:hover, .login:focus-visible, .login.hot { opacity: 1; color: var(--text-hi); }

.console[data-slot="b"] { left: 41%; top: 88%; }
.console[data-slot="bb"] { left: 59%; top: 88%; }

.motto {
  position: absolute;
  left: 50%; top: 17.5%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  text-align: center;
  color: var(--text);
  font-size: max(15px, calc(var(--u) * 1.3));
}

.reveal, .console { animation: reveal 1s ease-out both; }

@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }

.returning .reveal, .returning .console, .returning #core { animation: none; }

@media (max-width: 760px), ((max-width: 1000px) and (max-height: 520px)) {
  .stage { position: relative; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; transform: none; --u: min(1vw, 1.5vh); }
  .name  { top: 5%; font-size: 24px; }
  .motto { top: 10.5%; font-size: 14px; }
  .corner { right: 12px; top: 12px; flex-direction: column; align-items: flex-end; gap: 6px; }
  .console[data-slot="b"], .console[data-slot="bb"] { top: 86%; }
  .console[data-slot="b"] { left: 32%; } .console[data-slot="bb"] { left: 68%; }
  .login { font-size: 10px; }
  .download-key { font-size: 11px; padding: 6px 10px; }
  .console { font-size: 11px; padding: 0.8em 1.1em 0.7em; }

  .console[data-slot^="l"] { left: 22%; }
  .console[data-slot^="r"] { left: 78%; }
  .console[data-slot$="1"] { top: 16%; }
  .console[data-slot$="2"] { top: 27%; }
  .console[data-slot$="3"] { top: 75%; }
  .console[data-slot$="4"] { top: 86%; }
}

@media (max-width: 760px) and (orientation: portrait) {
  .corner { top: auto; bottom: 16px; right: 50%; transform: translateX(50%); flex-direction: row; align-items: center; gap: 14px; }
  .console[data-slot="b"], .console[data-slot="bb"] { top: 76%; }
}

@media (max-width: 1000px) and (max-height: 520px) and (orientation: landscape) {
  .name  { top: 10px; font-size: 20px; }
  .motto { top: 40px; font-size: 12px; }
  .console[data-slot^="l"] { left: 14%; }
  .console[data-slot^="r"] { left: 86%; }
  .console[data-slot$="1"] { top: 22%; }
  .console[data-slot$="2"] { top: 44%; }
  .console[data-slot$="3"] { top: 66%; }
  .console[data-slot$="4"] { top: 88%; }
}

body.room .page, .roomview .page, .preview .page, .primer .page {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}
body.room { overflow: clip; }

.roomstage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1600px; height: 900px;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transform-origin: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 760px) { .roomstage { width: 480px; height: 1040px; } .badge.worn { font-size: 7px; right: 10px; bottom: 10px; } }

@media (max-width: 1000px) and (max-height: 520px) and (orientation: landscape) {
  .roomstage { width: 1040px; height: 480px; }
  .roomstage .roomhead { padding: 12px var(--gutter); }
  .roomstage .roombody { padding: 20px var(--gutter) 28px; }
}

.console .preview, .door-back .preview {
  position: absolute;
  inset: 1px;
  z-index: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}
.console .preview.on, .door-back .preview.on { opacity: 1; }
.console .preview { clip-path: var(--paper); }
.console .preview .page { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; min-height: 0; transform-origin: 0 0; }

.primer { position: fixed; left: -4000px; top: 0; width: 1600px; height: 900px; overflow: hidden; visibility: hidden; pointer-events: none; }
.primer .page { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; min-height: 0; }
.console .preview::after, .door-back .preview::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 7, 13, 0.2), rgba(7, 7, 13, 0.8));
}
.console h2, .console .stat { position: relative; z-index: 1; }

body.core .console, .roomstage .console { transform: none; width: auto; padding: 0; background: transparent; clip-path: none; font-size: 12px; color: transparent; z-index: 1; }

.roomstage .console { position: absolute; }
.roomstage .console::before, .roomstage .console h2::before { display: none; }
.roomstage .console h2, .roomstage .console .stat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.roomstage .console:hover, .roomstage .console:focus-visible, .roomstage .console.hot, .roomstage .console.red { background: transparent; box-shadow: none; }

body.core #core { pointer-events: none; z-index: 2; }
body.core .console::before { display: none; }
body.core .console:hover, body.core .console:focus-visible, body.core .console.hot, body.core .console.red { background: transparent; box-shadow: none; }
body.core .console:active { transform: none; }
body.core .console h2, body.core .console .stat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.core .console h2::before { display: none; }
body.core .console .preview { inset: 0; clip-path: none; }
body.core .console .preview::after { background: linear-gradient(180deg, rgba(7, 7, 13, 0.1), rgba(7, 7, 13, 0.5)); }
body.core .stage > .roomhead { z-index: 3; }
body.core .name, body.core .motto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; animation: none; }

.door-back { position: relative; overflow: hidden; }
.door-back .preview { border-radius: 6px; }
.door-back .preview canvas { position: absolute; left: 0; top: 0; }
.door-back .preview::after { background: linear-gradient(180deg, rgba(7, 7, 13, 0.25), rgba(7, 7, 13, 0.6)); }
.door-back > span { position: relative; z-index: 1; }

.scene { position: absolute; inset: 0; z-index: 0; }
.backdrop { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.over { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
body.room .page > .roomstage, .roomview .page > .roomstage { z-index: 1; }
.roomhead, .roombody { position: relative; z-index: 2; }

.roomhead { pointer-events: none; }
.roomhead a, .roomhead button, .roomhead .key { pointer-events: auto; }

.stage > .roomhead { position: absolute; left: 0; right: 0; top: 0; z-index: 3; }
.roomhead {
  max-width: var(--page);
  width: 100%;
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--border);
}
.roomhead h1 {
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.roomhead .crumb { color: var(--faint); }
.roomhead .crumb::after { content: "  /  "; white-space: pre; }
.door-back { min-width: 0; }
.door-back.drawn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.door-back > span::before { content: "\2190\00a0"; }

.roombody {
  max-width: var(--page);
  width: 100%;
  margin: 0 auto;
  padding: 40px var(--gutter) 56px;
}

body.room .roombody, .roomview .roombody, .preview .roombody, .primer .roombody { flex: 0 0 auto; margin-top: auto; margin-bottom: auto; }

.about {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.about img { width: 96px; flex: none; }
.about h2 { font-size: 22px; }
.about p:last-child { max-width: 62ch; margin-top: 12px; }

.sheet {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  clip-path: var(--paper);
}
.sheet > div { background: var(--surface); padding: 18px 20px; }
.sheet dt { color: var(--accent); font-weight: bold; margin-bottom: 4px; }
.sheet dd.check, .sheet dd .check { color: var(--text-hi); }
.sheet dd.off, .sheet dd .off { color: var(--gold); }
.sheet dd.red, .sheet dd .red { color: var(--red); }
.sheet dd { margin: 0; }

.sheet.compact { grid-template-columns: 1fr; }
.sheet.compact > div { display: grid; grid-template-columns: 18ch 1fr; gap: 12px; padding: 12px 18px; }
.sheet.compact dt { margin: 0; }

.sheet.screen {
  position: relative;
  width: 520px;
  max-width: 100%;
  gap: 0;
  clip-path: none;
  border-radius: 4px;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 50% 45%, #0e1a22 0, #080d13 65%, #05080c 100%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.8), inset 0 0 2px rgba(126, 200, 227, 0.25);
}
.sheet.screen > div { background: transparent; }
.sheet.screen > div + div { border-top: 1px solid rgba(126, 200, 227, 0.09); }
.sheet.screen dt { text-shadow: 0 0 2px rgba(126, 200, 227, 0.27); }
.sheet.screen dd { text-shadow: 0 0 2px rgba(232, 232, 240, 0.21); }
.sheet.screen dd.off { text-shadow: 0 0 2px rgba(255, 199, 44, 0.30); }
.sheet.screen dd.red { text-shadow: 0 0 2px rgba(255, 107, 107, 0.30); }
.sheet.screen::after, .desk::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 38%, rgba(126, 200, 227, 0.045) 46%, rgba(126, 200, 227, 0.07) 50%, rgba(126, 200, 227, 0.045) 54%, transparent 62%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0 1px, transparent 1px 3px);
}

.desk::after, .leaflet-sheet::after { background-size: auto, auto 6px; animation: phosphor 0.2s linear infinite; }
.desk::after { background-image:
    linear-gradient(115deg, transparent 38%, rgba(126, 200, 227, 0.045) 46%, rgba(126, 200, 227, 0.07) 50%, rgba(126, 200, 227, 0.045) 54%, transparent 62%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0 1px, transparent 1px 6px); }
@keyframes phosphor { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 6px; } }

.desk > form, .leaflet-head, .leaflet-body { position: relative; z-index: 1; }
.desk > .desk-clock { z-index: 1; }
.sheet.screen { margin: 0 auto; }
.roombody[data-room="units"] .sheet.screen   { width: 420px; margin-bottom: 44px; }
.roombody[data-room="sound"] .sheet.screen   { width: 440px; }

.roombody[data-room="fabrication"] .sheet.screen, .roombody[data-room="programming"] .sheet.screen, .roombody[data-room="testing"] .sheet.screen, .roombody[data-room="storage"] .sheet.screen, .roombody[data-room="shipping"] .sheet.screen { width: 440px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 761px) { .roomstage .roombody[data-room="testing"] .sheet.screen { transform: translateX(-260px); } }
@media (min-width: 761px) { .roomstage .roombody[data-room="shipping"] .sheet.screen { transform: translateX(340px); } }
.roombody[data-room="fabrication"] .sheet.compact > div, .roombody[data-room="programming"] .sheet.compact > div, .roombody[data-room="testing"] .sheet.compact > div, .roombody[data-room="storage"] .sheet.compact > div, .roombody[data-room="shipping"] .sheet.compact > div { grid-template-columns: 1fr; gap: 2px; padding: 9px 16px; }
body.room .roombody[data-room="fabrication"], .roomview .roombody[data-room="fabrication"], .preview .roombody[data-room="fabrication"], .primer .roombody[data-room="fabrication"], body.room .roombody[data-room="programming"], .roomview .roombody[data-room="programming"], .preview .roombody[data-room="programming"], .primer .roombody[data-room="programming"], body.room .roombody[data-room="testing"], .roomview .roombody[data-room="testing"], .preview .roombody[data-room="testing"], .primer .roombody[data-room="testing"], body.room .roombody[data-room="storage"], .roomview .roombody[data-room="storage"], .preview .roombody[data-room="storage"], .primer .roombody[data-room="storage"], body.room .roombody[data-room="shipping"], .roomview .roombody[data-room="shipping"], .preview .roombody[data-room="shipping"], .primer .roombody[data-room="shipping"] { margin-bottom: 0; padding-bottom: 28px; }

.roombody[data-room="showroom"] .sheet.screen { width: 440px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.roombody[data-room="showroom"] .sheet.compact > div { grid-template-columns: 1fr; gap: 2px; padding: 9px 16px; }
@media (min-width: 761px) { .roombody[data-room="showroom"] .sheet.screen { position: relative; left: -150px; } }
body.room .roombody[data-room="showroom"], .roomview .roombody[data-room="showroom"], .preview .roombody[data-room="showroom"], .primer .roombody[data-room="showroom"] { margin-bottom: 0; padding-bottom: 28px; }

.poses {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.poses li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.poses img { width: 150px; }
.poses span { color: var(--dim); }

.bays {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
  gap: 16px;
}
.bay {
  position: relative;
  padding: 36px 18px 18px;
  background: var(--surface);
  clip-path: var(--paper);
}

.bay.lit {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  align-items: start;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
}
.bay.lit img { width: 150px; align-self: center; }
.bay.lit h2 { font-size: 20px; }

.bay.dark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  color: var(--dim);
}
.bay.dark h2 { font-size: 12px; color: var(--faint); letter-spacing: 0.1em; margin-top: 8px; }
.bay.dark:only-of-type, .bays .bay.dark { min-height: 180px; }

.spec {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 14px;
}
.spec th, .spec td { text-align: left; vertical-align: top; padding: 5px 0; border-top: 1px solid var(--border); }
.spec th { color: var(--dim); font-weight: normal; width: 15ch; padding-right: 12px; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 1px solid var(--border); }

.lock {
  position: relative;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--border);
}
.lock::before {
  content: "";
  position: absolute;
  left: 14px; top: 8px;
  width: 12px; height: 13px;
  border: 3px solid var(--faint);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}
.lock::after {
  content: "";
  position: absolute;
  left: 11px; top: 21px;
  width: 22px; height: 15px;
  background: var(--faint);
  border-radius: 3px;
}

.download-key { white-space: nowrap; padding: 8px 16px; }
.roomhead .download-key { margin-left: auto; font-size: 13.5px; }
.download-key.global { position: fixed; top: 28px; right: 36px; z-index: 92; font-size: 13.5px; transition: opacity var(--cool) ease-out; }
html.leaving .download-key.global { opacity: 0; pointer-events: none; }

.download-key { display: inline-grid; text-align: center; }
.download-key > span { grid-area: 1 / 1; transition: opacity var(--cool) ease-out; }
.download-key > .else { opacity: 0; }
.download-key:hover > span { opacity: 0; }
.download-key:hover > .else { opacity: 1; }

.door-back, .download-key {
  position: relative;
  isolation: isolate;
  background: rgba(42, 109, 138, 0.7);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--paper);
  transition: background var(--cool) ease-out, color var(--cool) ease-out;
}
.door-back::before, .download-key::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--bg);
  clip-path: var(--paper);
}
.door-back:hover, .door-back:focus-visible { background: var(--accent); box-shadow: none; border: 0; }
.door-back:active { transform: translateY(1px); border: 0; }
.door-back.hot { background: var(--text-hi); box-shadow: none; border: 0; }
.download-key, .download-key:hover, .download-key:active { background: rgba(42, 109, 138, 0.45); color: var(--dim); border: 0; transform: none; }
.door-back .preview { border-radius: 0; z-index: 0; }

body.core .console.door-back { position: absolute; display: block; background: transparent; clip-path: none; }
body.core .console.door-back::before { display: none; }

.access { display: grid; gap: 14px; justify-items: start; margin-top: 28px; max-width: 420px; }
.access label { display: grid; gap: 6px; width: 100%; }
.access label > span { color: var(--accent); font-weight: bold; font-size: 13px; letter-spacing: 0.06em; }
.access input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-hi);
  border: 1px solid var(--border);
  font: inherit;
}
.access input:focus { outline: none; border-color: var(--accent); }
.access-aside { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.access-word { min-height: 1.4em; letter-spacing: 0.08em; font-size: 13px; }
.access-word.check { color: var(--text-hi); }
.access-word.red { color: var(--red); }
.access button { cursor: pointer; font: inherit; }

.clock { display: grid; gap: 12px; justify-items: stretch; width: 260px; margin: 0 auto; padding: 4px; }
.clock-readout {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--border);
  letter-spacing: 0.08em;
}
.clock-state { color: var(--text-hi); font-weight: bold; font-size: 14px; }
.clock-state.check { color: var(--accent); }
.clock-state.red { color: var(--red); }
.clock-time { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.clock-pin { min-height: 1.2em; text-align: center; color: var(--accent); letter-spacing: 0.5em; font-size: 18px; }
.clock-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.clock-pad button {
  font: inherit; cursor: pointer; padding: 12px 0; color: var(--text-hi);
  background: var(--key); border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 8px;
}
.clock-pad button:hover { background: var(--surface-hi); border-color: var(--border-hi); }
.clock-pad button:active { border-bottom-width: 1px; transform: translateY(2px); }
.clock-pad .clock-clear { color: var(--dim); }
.clock-pad .clock-enter { background: var(--primary); border-color: var(--primary-hi); letter-spacing: 0.05em; }
.clock-pad .clock-enter:hover { background: var(--primary-hi); }
.clock-punch { display: flex; gap: 18px; justify-content: center; }
.clock-punch label { display: flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.clock-punch input { accent-color: var(--accent); }

.desk {
  position: relative;
  width: 440px;
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 18px 12px;
  border-radius: 4px;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 50% 45%, #0e1a22 0, #080d13 65%, #05080c 100%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.8), inset 0 0 2px rgba(126, 200, 227, 0.25);
  display: grid;
}

.desk > form { grid-area: 1 / 1; display: grid; gap: 8px; transition: opacity var(--fold) ease-out, visibility 0s linear; }
.desk:not(.login) > .desk-access, .desk.login > .desk-form { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--fold) ease-out, visibility 0s linear var(--fold); }
.desk-access .desk-line { gap: 8px; }
.desk-access .desk-label { font-size: 11px; white-space: nowrap; }
.desk .desk-access input { flex: 1 1 0; min-width: 0; width: 0; padding: 5px 8px; font-size: 11px; }
.desk-access .access-word { font-size: 12px; font-weight: bold; letter-spacing: 0.14em; line-height: 16px; }
.desk-access .desk-key { padding: 5px 10px; font-size: 11px; }
.desk-access .desk-back { white-space: nowrap; }
.desk-line { display: flex; align-items: center; gap: 14px; min-height: 36px; }
.desk-row { height: 16px; line-height: 16px; }
.desk-line[hidden] { display: none; }
.desk-label { color: var(--accent); font-weight: bold; font-size: 13px; letter-spacing: 0.08em; text-shadow: 0 0 2px rgba(126, 200, 227, 0.27); white-space: nowrap; }
.desk input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-hi);
  border: 1px solid rgba(126, 200, 227, 0.25);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 0 2px rgba(232, 232, 240, 0.21);
}
.desk input::placeholder { color: var(--dim); text-transform: none; letter-spacing: 0; }
.desk input:focus { outline: none; border-color: var(--accent); }
.desk-who { flex: 1 1 auto; color: var(--text-hi); font-size: 12px; letter-spacing: 0.06em; white-space: pre-wrap; text-shadow: 0 0 2px rgba(232, 232, 240, 0.21); }
.desk-key {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 4px;
  background: var(--primary);
  border: 1px solid var(--primary-hi);
  color: var(--text-hi);
  font: inherit;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.desk-key:hover { background: var(--primary-hi); }
.desk-out { background: var(--surface); border-color: var(--border); }
.desk-out:hover { background: var(--surface-hi); }
.desk-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.desk-clock { position: absolute; right: 18px; bottom: 12px; display: inline-flex; align-items: baseline; gap: 8px; color: var(--accent); text-shadow: 0 0 2px rgba(126, 200, 227, 0.27); }
.desk-foot { padding-right: 130px; }
.desk-time { font-size: 15px; font-weight: bold; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.desk-zone { font-size: 11px; letter-spacing: 0.14em; color: var(--accent); opacity: 0.8; }
.desk-login { padding: 3px 0; opacity: 0.7; }

.desk-form .desk-line { gap: 0; padding: 1px 1px 1px 12px; border: 1px solid var(--primary-hi); border-radius: 4px; background: rgba(126, 200, 227, 0.05); }

.desk-form .desk-line .desk-key { margin-left: auto; padding: 5px 12px; }
.desk-guest { margin-right: 0.6em; letter-spacing: 0.1em; }

.desk-ask { color: var(--accent); font-size: 11px; font-weight: bold; letter-spacing: 0.14em; white-space: nowrap; text-shadow: 0 0 2px rgba(126, 200, 227, 0.27); opacity: 1; transition: opacity 1s ease-in-out; }
.desk-ask.ask-dim { opacity: 0.35; }
.desk-form .desk-line:has(.desk-note) .desk-ask, .desk-form .desk-line:has(.desk-note) .desk-label { display: none; }
.desk-form .desk-line .desk-note { margin: 0; font-size: 11px; }

.desk-own .desk-label { font-size: 11px; letter-spacing: 0.14em; }
.desk-form .desk-out { background: var(--primary); border-color: var(--primary-hi); }
.desk-form .desk-out:hover { background: var(--primary-hi); }
.desk-row .desk-who { display: block; text-align: center; white-space: pre; font-size: 11px; line-height: 16px; }
.desk-own[hidden] ~ .desk-row .desk-who { display: none; }

.desk-key[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.desk-key[aria-disabled="true"]:hover { background: var(--primary); }
.desk-note { flex: 0 0 auto; margin: 0 auto; white-space: nowrap; text-align: center; color: var(--accent); font-size: 12px; font-weight: bold; letter-spacing: 0.14em; text-shadow: 0 0 2px rgba(126, 200, 227, 0.36); transition: color 0.7s ease-in-out, text-shadow 0.7s ease-in-out; }
.desk-row .desk-note { display: block; margin: 0; text-align: left; line-height: 16px; }
.desk-note.dim { color: rgba(126, 200, 227, 0.35); text-shadow: none; }
.roomview.leaving .page, body.room > .page.leaving { opacity: 0; transition: opacity var(--fold) ease-out; }
body[data-room="lobby"] .roomhead h1 { margin-left: 0; }

.entrance { display: none; position: fixed; inset: 0; z-index: 95; overflow: hidden; pointer-events: none; }
html.doors .entrance { display: block; }
.entrance-leaf { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden;
  background: linear-gradient(90deg, #0b0e15, #10151d 50%, #0b0e15), repeating-linear-gradient(180deg, transparent 0 118px, rgba(126, 200, 227, 0.16) 118px 119px, transparent 119px 120px);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8);
  transition: transform 1.6s var(--dolly), box-shadow 2.2s ease-out, border-color 2.2s ease-out; }
.entrance-left { left: 0; border-right: 1px solid rgba(126, 200, 227, 0.55); }
.entrance-right { right: 0; border-left: 1px solid rgba(126, 200, 227, 0.55); }
.entrance-leaf::before { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(126, 200, 227, 0.22); pointer-events: none; }
.entrance-mark { position: absolute; top: 50%; width: 46vmin; height: 46vmin; margin-top: -23vmin; background: url("assets/mark.svg") center / contain no-repeat;
  filter: grayscale(1) brightness(1.6) contrast(0.9); opacity: 0.16; }
.entrance-left .entrance-mark { right: -23vmin; }
.entrance-right .entrance-mark { left: -23vmin; }
.entrance-light { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 40% 100% at 50% 50%, #ffffff 0, rgba(255, 255, 255, 0.92) 30%, rgba(200, 235, 250, 0.6) 60%, rgba(126, 200, 227, 0) 100%);
  transition: opacity 0.2s ease-out; }
html.doors-lit .entrance-light { opacity: 1; }
html.doors-lit .entrance-left { border-right-color: #ffffff; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8), 4px 0 30px rgba(255, 255, 255, 0.9); }
html.doors-lit .entrance-right { border-left-color: #ffffff; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8), -4px 0 30px rgba(255, 255, 255, 0.9); }
html.doors-open .entrance-left { transform: translateX(-102%); }
html.doors-open .entrance-right { transform: translateX(102%); }
html.doors-open .entrance-light { opacity: 0; transition: opacity 2.6s ease-out; }
html.doors-open .entrance-left, html.doors-open .entrance-right { border-color: rgba(126, 200, 227, 0.2); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8), 0 0 0 rgba(255, 255, 255, 0); }
.entrance-steam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.roomdoor { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #05070b; transition: background-color 1.2s var(--dolly); }
.roomdoor.open { pointer-events: none; background: rgba(5, 7, 11, 0); }
.roomdoor-frame { position: absolute; inset: 0; box-sizing: border-box; overflow: hidden; border: calc(var(--dl, 1px) * 1.5) solid rgba(126, 200, 227, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.5); transition: border-color 1.2s var(--dolly), box-shadow 1.2s var(--dolly); }
.roomdoor.open .roomdoor-frame { border-color: rgba(126, 200, 227, 0); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0), inset 0 0 40px rgba(0, 0, 0, 0); }
.roomdoor-page { position: fixed; z-index: 96; background: transparent; }
.roomdoor-page .roomdoor-frame { box-shadow: 0 0 0 4000px #05070b, inset 0 0 40px rgba(0, 0, 0, 0.5); }
.roomdoor-page.open .roomdoor-frame { box-shadow: 0 0 0 4000px rgba(5, 7, 11, 0), inset 0 0 40px rgba(0, 0, 0, 0); }
.roomdoor-page.aperture { opacity: 0; transition: clip-path 0.9s var(--dolly), opacity 0.25s ease-out 0.9s; }
.roomdoor-page.aperture.on { opacity: 1; }

.roomdoor-face { position: absolute; top: calc(var(--dl, 1px) * -1.5); left: calc(var(--dl, 1px) * -1.5); width: calc(200% + var(--dl, 1px) * 3); max-width: none; height: calc(100% + var(--dl, 1px) * 3); display: block; pointer-events: none; }
.roomdoor-right .roomdoor-face { left: calc(-100% - var(--dl, 1px) * 1.5); }
.roomdoor-one .roomdoor-face { width: calc(100% + var(--dl, 1px) * 3); }
.roomdoor.drawn .roomdoor-leaf { border-width: 0; background: var(--bg); }
.roomdoor.drawn .roomdoor-leaf::before, .roomdoor.drawn .roomdoor-leaf::after, .roomdoor.drawn .roomdoor-handle { display: none; }
.roomdoor.drawn .roomdoor-plate { z-index: 1; }
.roomdoor.roomdoor-glass .roomdoor-leaf, .roomdoor.roomdoor-glass.drawn .roomdoor-leaf { background: rgba(12, 22, 30, 0.5); }
html.door-shut body { visibility: hidden; }

html.door-shut { background: #05070b; }
html.door-shut::before { content: ""; position: fixed; inset: var(--door-inset, 0); z-index: 99; box-sizing: border-box; border: calc(var(--dl, 1px) * 1.5) solid rgba(126, 200, 227, 0.9); background: linear-gradient(90deg, rgba(126, 200, 227, 0) calc(50% - 14px), rgba(126, 200, 227, 0.45) 50%, rgba(126, 200, 227, 0) calc(50% + 14px)), var(--bg); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.5); }
html.door-shut::before { z-index: 100; background-color: transparent; }

.roomdoor-leaf { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden;
  background: linear-gradient(rgba(126, 200, 227, 0.06), rgba(126, 200, 227, 0.06)), var(--bg);
  border: var(--dl, 1px) solid rgba(126, 200, 227, 0.9); box-sizing: border-box;
  transition: transform 1.2s var(--dolly), box-shadow 1.4s ease-out, border-color 1.4s ease-out; }
.roomdoor-leaf::before { content: ""; position: absolute; top: 9%; bottom: 19%; left: 13%; right: 13%; border: var(--dl, 1px) solid rgba(126, 200, 227, 0.5); pointer-events: none; }
.roomdoor-leaf::after { content: ""; position: absolute; bottom: 3%; height: 11%; left: 9%; right: 9%; border: var(--dl, 1px) solid rgba(126, 200, 227, 0.6); background: rgba(126, 200, 227, 0.12); pointer-events: none; }
.roomdoor-handle { position: absolute; top: 41%; height: 18%; width: 4.4%; border: var(--dl, 1px) solid rgba(126, 200, 227, 0.9); background: rgba(126, 200, 227, 0.4); }
.roomdoor-left .roomdoor-handle { right: 15.5%; }
.roomdoor-one .roomdoor-handle { left: 15.5%; }
.roomdoor-right .roomdoor-handle { left: 15.5%; }
.roomdoor-left { left: 0; border-right: var(--dl, 1px) solid rgba(126, 200, 227, 0.5); }
.roomdoor-right { right: 0; border-left: var(--dl, 1px) solid rgba(126, 200, 227, 0.5); }
.roomdoor-one { left: 0; width: 100%; border-right: 1px solid rgba(126, 200, 227, 0.5); }
.roomdoor-plate, html.door-shut::after { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); width: max-content; padding: 12px 34px; border: 1px solid rgba(126, 200, 227, 0.9);
  background: linear-gradient(rgba(126, 200, 227, 0.07), rgba(126, 200, 227, 0.07)), var(--bg); color: var(--accent); font-size: 22px; font-weight: bold; letter-spacing: 0.04em; white-space: nowrap; box-shadow: 0 7px 0 rgba(0, 0, 0, 0.5); font-family: var(--font); }
html.door-shut::after { content: var(--door-word, ""); position: fixed; z-index: 100; top: var(--door-plate-top, 5%); left: var(--door-plate-x, 50%); }
.roomdoor-plate::before, .roomdoor-plate::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(126, 200, 227, 0.55); }
.roomdoor-plate::before { left: 8px; top: 8px; }
.roomdoor-plate::after { right: 8px; bottom: 8px; }
.roomdoor-left .roomdoor-plate { left: 100%; }
.roomdoor-right .roomdoor-plate { left: 0; }
.roomdoor-one .roomdoor-plate { left: 50%; }
.roomdoor-strip { position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; background: #0a0d13; border-bottom: 1px solid rgba(126, 200, 227, 0.5);
  color: var(--accent); font-size: 11px; letter-spacing: 0.2em; transition: opacity 0.6s ease-out; }
.roomdoor-lamp { width: 8px; height: 8px; border-radius: 50%; background: rgba(126, 200, 227, 0.35); box-shadow: 0 0 6px rgba(126, 200, 227, 0.3); transition: background 0.3s, box-shadow 0.3s; }
.roomdoor-lift .roomdoor-leaf { background: linear-gradient(90deg, #0d1118, #141a24 50%, #0d1118), repeating-linear-gradient(90deg, transparent 0 3px, rgba(126, 200, 227, 0.05) 3px 4px); top: 0; }
.roomdoor-lift .roomdoor-leaf::before { inset: 18px 12px; }
.roomdoor.lit .roomdoor-left, .roomdoor.lit .roomdoor-one { border-right-color: var(--accent); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8), 3px 0 22px rgba(126, 200, 227, 0.7); }
.roomdoor.lit .roomdoor-right { border-left-color: var(--accent); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8), -3px 0 22px rgba(126, 200, 227, 0.7); }
.roomdoor.lit .roomdoor-lamp { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.roomdoor.open .roomdoor-left { transform: translateX(-102%); }
.roomdoor.open .roomdoor-right { transform: translateX(102%); }
.roomdoor.open .roomdoor-one { transform: translateX(102%); }
.roomdoor.roomdoor-flip.open .roomdoor-one { transform: translateX(-102%); }
.roomdoor-flip .roomdoor-one { border-right: 0; border-left: 1px solid rgba(126, 200, 227, 0.5); }
.roomdoor-flip .roomdoor-one .roomdoor-handle { left: auto; right: 15.5%; }
.roomdoor.open .roomdoor-strip { opacity: 0; transition-delay: 0.6s; }
.roomdoor.open .roomdoor-left, .roomdoor.open .roomdoor-right, .roomdoor.open .roomdoor-one { border-color: rgba(126, 200, 227, 0.2); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8), 0 0 0 rgba(126, 200, 227, 0); }

.badge {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 14.8em; height: 6.4em;
  z-index: 92;
  box-sizing: border-box;
  padding: 1em 1em 0.6em 1.2em;
  border-radius: 0.3em;
  background: #e9e6dc;
  color: #1b1b20;
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.5);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  align-content: start;
  pointer-events: none;
  user-select: none;
}
.badge-clip { position: absolute; left: 50%; top: -0.3em; width: 2.2em; height: 0.6em; margin-left: -1.1em; border-radius: 0.3em; background: #7a8088; box-shadow: inset 0 -0.1em 0 rgba(0, 0, 0, 0.4); }
.badge-kind { grid-column: 1; grid-row: 1; font-weight: bold; font-size: 0.9em; letter-spacing: 0.18em; color: #3a3f46; }
.badge-no { grid-column: 2; grid-row: 1; font-size: 0.9em; color: #6a7078; }
.badge-name { grid-column: 1 / 3; grid-row: 2; font-weight: bold; font-size: 1.2em; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.25em; }
.badge-stamp { grid-column: 1; grid-row: 3; font-size: 0.9em; color: #4a5058; }
.badge-chip { grid-column: 2; grid-row: 2 / 4; align-self: end; justify-self: end; width: 1.8em; height: 1.3em; border-radius: 0.25em; background: linear-gradient(135deg, #d8b45a, #b8902e); box-shadow: inset 0 0 0 0.08em rgba(0, 0, 0, 0.25); position: relative; }
.badge-chip::before { content: ""; position: absolute; left: 0.3em; right: 0.3em; top: 0.4em; height: 0.08em; background: rgba(0, 0, 0, 0.3); box-shadow: 0 0.3em 0 rgba(0, 0, 0, 0.3); }
.badge.worn { pointer-events: auto; cursor: pointer; transition: right 0.45s var(--dolly), bottom 0.45s var(--dolly), font-size 0.45s var(--dolly), box-shadow 0.45s ease-out; }
.badge.worn.big { font-size: 30px; right: calc(50% - 7.4em); bottom: calc(50% - 3.2em); z-index: 96; box-shadow: 0 1em 3em rgba(0, 0, 0, 0.7), 0 0 0 0.1em rgba(126, 200, 227, 0.4); cursor: default; }
.badge.none { background: #2a2d33; color: var(--dim); display: flex; align-items: center; justify-content: center; box-shadow: none; border: 1px dashed var(--border); }
.badge.none .badge-clip { background: #4a5058; }
.badge-none { font-size: 0.9em; letter-spacing: 0.18em; }

.card { z-index: 93; transition: none; }
.card.printing { transform: translateY(14.8em) rotate(90deg); clip-path: inset(0 100% 0 0); }
.card.printing.out { transform: rotate(90deg); clip-path: inset(0 0 0 0); transition: transform 1.2s linear, clip-path 1.2s linear; }
.card.ready { transform: rotate(90deg); pointer-events: auto; cursor: pointer; box-shadow: 0 0 0 0.2em rgba(126, 200, 227, 0.55), 0 0 1.6em 0.4em rgba(126, 200, 227, 0.5), 0 0.2em 1em rgba(0, 0, 0, 0.5); transition: box-shadow 0.6s ease-in-out; }
.card.ready.lit { box-shadow: 0 0 0 0.3em rgba(126, 200, 227, 0.95), 0 0 2.4em 0.8em rgba(126, 200, 227, 0.85), 0 0.2em 1em rgba(0, 0, 0, 0.5); }
.card.ready.nudge { transform: translateY(-0.9em) rotate(90deg); transition: transform 0.18s ease-out, box-shadow 0.6s ease-in-out; }
.card.lifting { transform: none; transition: left 1.5s var(--dolly), top 1.5s var(--dolly), font-size 1.5s var(--dolly), transform 1.5s var(--dolly), box-shadow 1.5s ease-out; }
.card.lifting.back { transform: rotate(90deg); }

.leaflet {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 7, 13, 0.55);
  opacity: 0; transition: opacity 0.4s ease-out;
}
.leaflet.on { opacity: 1; }
.leaflet-sheet {
  position: relative;
  width: min(680px, 88%); max-height: 84%;
  overflow: auto;
  background: radial-gradient(ellipse 70% 80% at 50% 45%, #0e1a22 0, #080d13 65%, #05080c 100%);
  color: var(--text);
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), inset 0 0 18px rgba(0, 0, 0, 0.8), inset 0 0 2px rgba(126, 200, 227, 0.25);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.4s var(--dolly);
}
.leaflet-sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(126, 200, 227, 0.045) 46%, rgba(126, 200, 227, 0.07) 50%, rgba(126, 200, 227, 0.045) 54%, transparent 62%), repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0 1px, transparent 1px 6px); background-size: auto, auto 6px; animation: phosphor 0.2s linear infinite; }
.leaflet.on .leaflet-sheet { transform: none; }
.leaflet-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid rgba(126, 200, 227, 0.12); }
.leaflet-title { font-weight: bold; letter-spacing: 0.14em; font-size: 12px; color: var(--accent); text-shadow: 0 0 2px rgba(126, 200, 227, 0.27); }
.leaflet-back { font: inherit; font-size: 11px; letter-spacing: 0.06em; padding: 5px 10px; border: 1px solid var(--border-hi); border-radius: 3px; background: var(--surface); color: var(--text-hi); cursor: pointer; }
.leaflet-back:hover { background: var(--surface-hi); }
.leaflet-body { padding: 22px 26px 30px; font-size: 13px; line-height: 1.7; color: var(--text-hi); text-shadow: 0 0 2px rgba(232, 232, 240, 0.15); }
.leaflet-body h2 { display: none; }
.leaflet-body p { margin: 0 0 1em; }

body.paper .roombody { display: grid; justify-items: center; }
.paper { position: relative; overflow: hidden; width: min(680px, 100%); padding: 24px 28px 30px; border-radius: 4px; border: 1px solid var(--border-hi); background: radial-gradient(ellipse 70% 80% at 50% 45%, #0e1a22 0, #080d13 65%, #05080c 100%); color: var(--text-hi); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), inset 0 0 18px rgba(0, 0, 0, 0.8), inset 0 0 2px rgba(126, 200, 227, 0.25); font-size: 13px; line-height: 1.7; text-shadow: 0 0 2px rgba(232, 232, 240, 0.15); }
.paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(126, 200, 227, 0.045) 46%, rgba(126, 200, 227, 0.07) 50%, rgba(126, 200, 227, 0.045) 54%, transparent 62%), repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0 1px, transparent 1px 3px); }
.paper h2 { margin: 0 0 16px; font-size: 12px; letter-spacing: 0.16em; color: var(--accent); text-shadow: 0 0 2px rgba(126, 200, 227, 0.27); }
.paper p { margin: 0 0 1em; }
.paper p.signed, .leaflet-body p.signed { margin: 0.6em 4px 0 0; text-align: right; font: italic 400 24px 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', cursive; letter-spacing: 0; text-transform: none; color: var(--accent); text-shadow: 0 0 2px rgba(126, 200, 227, 0.27); }
.paper p:has(> b), .leaflet-body p:has(> b) { display: grid; grid-template-columns: 9.5em 1fr; column-gap: 0.6em; align-items: start; }
.paper p > b, .leaflet-body p > b { color: var(--accent); font-size: 11px; letter-spacing: 0.14em; line-height: 1.9; text-shadow: 0 0 2px rgba(126, 200, 227, 0.27); }

html.instant .page, html.instant .roomview, html.instant .roomview .page, html.instant .roomview::after, html.instant .pull, html.instant .console, html.instant .login { transition: none !important; }

@media (max-width: 820px) {
  .poses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .roomhead { gap: 14px; padding: 14px var(--gutter); flex-wrap: wrap; }
  .roomhead .crumb { display: none; }
  .sheet { grid-template-columns: 1fr; }
  .sheet.compact > div { grid-template-columns: 1fr; gap: 2px; }
  .poses img { width: 110px; }
  .bays { grid-template-columns: 1fr; }
  .bay.lit { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; justify-items: center; }
  .spec th { width: 12ch; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .console, #core { animation: none; }
  .key:active, .door:active { transform: none; }
  body, .page, .pull, .window, .roomview, .console, .console h2::before { animation: none !important; transition: none !important; }
  .window { display: none !important; }
  .card, .leaflet, .leaflet-sheet, .leaf, .badge { transition: none !important; }
  .desk::after, .leaflet-sheet::after { animation: none !important; }
}

.page { position: relative; }
body.core > .page { transition: transform var(--pull) var(--dolly); }
body.room[data-room="lobby"] > .page { transition: transform var(--pull) var(--dolly), opacity var(--fold) ease-out; }
.pull {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pull) var(--dolly);
}
.pull.on { opacity: 1; }
.console.hot, .door.hot {
  z-index: 60;
  border-color: var(--accent);
  box-shadow: 0 0 26px rgba(126, 200, 227, 0.45);
}
.console.hot { background: var(--text-hi); box-shadow: none; }
.door.hot { position: relative; }
.login.hot { z-index: 60; }
.console.hot h2::before { background: var(--text-hi); box-shadow: 0 0 12px var(--text-hi); }

.console.covered { visibility: hidden; }
.leaving body > .page { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--zoom, 1.25)); }

.leaving body > .page, .roomview .page, .arriving .page, .entering .page, .folding .page { will-change: transform; backface-visibility: hidden; }

.roomview {
  --c: var(--chamfer);
  --l: 1px;
  position: fixed;
  z-index: 90;
  overflow: hidden;
  top: var(--wy); left: var(--wx);
  right: calc(100vw - var(--wx) - var(--ww));
  bottom: calc(100vh - var(--wy) - var(--wh));
  background: var(--bg);
  clip-path: polygon(
    var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.roomview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--accent);

  clip-path: polygon(evenodd,
    var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c), var(--c) 0,
    calc(var(--c) + var(--l)) var(--l), calc(100% - var(--c) - var(--l)) var(--l),
    calc(100% - var(--l)) calc(var(--c) + var(--l)), calc(100% - var(--l)) calc(100% - var(--c) - var(--l)),
    calc(100% - var(--c) - var(--l)) calc(100% - var(--l)), calc(var(--c) + var(--l)) calc(100% - var(--l)),
    var(--l) calc(100% - var(--c) - var(--l)), var(--l) calc(var(--c) + var(--l)), calc(var(--c) + var(--l)) var(--l));
}
.roomview.shaped { --c: 0px; }
.roomview.shaped::after { display: none; }
.roomview.off::after { background: var(--gold); }
.roomview.red::after { background: var(--red); }
.roomview .page {
  position: absolute;
  width: 100vw; height: 100vh;
  left: var(--ox, 0); top: var(--oy, 0);
  transform-origin: 0 0;
  transform: scale(var(--s0, 0.25));
}
.roomview.open {
  --c: calc(var(--chamfer) * var(--zoom, 4));
  --l: calc(1px * var(--zoom, 4));
  inset: calc(-1 * var(--c));
  transition: inset var(--pull) var(--dolly), clip-path var(--pull) var(--dolly);
}
.roomview.open::after { transition: clip-path var(--pull) var(--dolly); }
.roomview.closing::after { transition: clip-path var(--pull) var(--dolly); }
.roomview.open .page { left: var(--c); top: var(--c); transform: none; transition: transform var(--pull) var(--dolly), left var(--pull) var(--dolly), top var(--pull) var(--dolly); }
.roomview.shaped.open { --c: 0px; }
.roomview.cut, .roomview.cut .page, .roomview.cut::after { transition: none !important; }
.roomview.closing { transition: inset var(--pull) var(--dolly), clip-path var(--pull) var(--dolly); }
.roomview.closing .page { transition: transform var(--pull) var(--dolly), left var(--pull) var(--dolly), top var(--pull) var(--dolly); }

.arriving body, .entering body {
  clip-path: inset(var(--wy) calc(100vw - var(--wx) - var(--ww)) calc(100vh - var(--wy) - var(--wh)) var(--wx));
}
.arriving .page { transform-origin: 0 0; transform: translate(var(--wx), var(--wy)) scale(var(--s0, 0.25)); }
.entering body  { clip-path: inset(0 0 0 0); transition: clip-path var(--open) var(--dolly); }
.entering .page { transform-origin: 0 0; transform: none; transition: transform var(--open) var(--dolly); }

.window {
  display: none;
  position: fixed;
  z-index: 100;
  pointer-events: none;
  top: var(--wy); left: var(--wx);
  right: calc(100vw - var(--wx) - var(--ww));
  bottom: calc(100vh - var(--wy) - var(--wh));
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 0 28px rgba(126, 200, 227, 0.5), inset 0 0 18px rgba(126, 200, 227, 0.25);
}
.arriving .window, .entering .window { display: block; }
.entering .window {
  inset: -10px;
  opacity: 0;
  transition: inset var(--open) ease-out, opacity 0.15s ease-out calc(var(--open) - 0.1s);
}

.framed body  { clip-path: inset(0 0 0 0); }
.framed .window { display: block; inset: -10px; opacity: 1; }
.folding body {
  clip-path: inset(var(--wy) calc(100vw - var(--wx) - var(--ww)) calc(100vh - var(--wy) - var(--wh)) var(--wx));
  transition: clip-path var(--fold) ease-in;
}
.folding .page { transform-origin: 0 0; transform: translate(var(--wx), var(--wy)) scale(var(--s0, 0.25)); transition: transform var(--fold) ease-in; }
.folding .window {
  top: var(--wy); left: var(--wx);
  right: calc(100vw - var(--wx) - var(--ww));
  bottom: calc(100vh - var(--wy) - var(--wh));
  transition: inset var(--fold) ease-in;
}

.arriving-back .window, .entered-back .window { display: block; }
.entered-back .window { opacity: 0; transition: opacity var(--cool) ease-out; }

.paper.wide { width: min(1120px, 100%); }

.about-head { display: flex; align-items: center; gap: 12px; padding: 4px 8px 6px; }
.about-mark { width: 64px; height: 64px; flex: 0 0 auto; }
.about-info { display: flex; flex-direction: column; }
.about-name { font-size: 15px; font-weight: bold; letter-spacing: 0.08em; color: var(--text-hi); }
.about-fine { font-size: 10px; color: var(--dim); }
.about-strap { margin-top: 4px; font-size: 13px; font-style: italic; color: var(--accent); }
.about-rule { border: 0; border-top: 1px solid var(--border); margin: 8px 0 14px; }
.about-sub { margin: 0 0 8px; font-size: 13px; font-weight: bold; color: var(--accent); }
.about-tag { text-align: center; font-size: 11px; font-style: italic; color: var(--dim); margin: 28px 0 0; }
.about-plate { margin: 16px 0 0; }
.about-kit { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; border: 1px solid var(--border); }
.about-kit-labels text { font-family: var(--font); }
.about-plate figcaption { margin-top: 6px; font-size: 11px; color: var(--dim); white-space: pre; }
.leaflet-body .about-service, .paper .about-service { margin: 12px 0 0; }

body.paper.wide { width: min(1180px, 100%); }
.leaflet.wide .leaflet-sheet { width: min(1120px, 94%); }
.plan { display: block; width: 100%; height: auto; }
.plan text { font-family: var(--font); fill: var(--accent); font-size: 10px; letter-spacing: 0.04em; }
.plan .head { font-size: 12px; font-weight: bold; letter-spacing: 0.16em; }
.plan .lbl.big { font-size: 11px; font-weight: bold; letter-spacing: 0.12em; }
.plan .lbl.sm { font-size: 8px; fill: rgba(126, 200, 227, 0.7); }
.plan .lbl.xs { font-size: 6.5px; fill: rgba(126, 200, 227, 0.7); }
.plan .paper { fill: rgba(7, 7, 13, 0.6); }
.plan .grid { stroke: rgba(126, 200, 227, 0.06); stroke-width: 1; }
.plan .wall { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.plan .strip { fill: rgba(126, 200, 227, 0.07); stroke: none; }
.plan .void { stroke: none; }
.plan .hatchline { stroke: rgba(126, 200, 227, 0.16); stroke-width: 1; }
.plan .rail { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
.plan .over { fill: none; stroke: rgba(126, 200, 227, 0.55); stroke-width: 1; stroke-dasharray: 2 3; }
.plan .well { fill: rgba(0, 0, 0, 0.6); stroke: var(--accent); stroke-width: 1; }
.plan .router { fill: rgba(126, 200, 227, 0.15); stroke: var(--accent); stroke-width: 1; }
.plan .door { fill: var(--bg); stroke: var(--accent); stroke-width: 1; }
.plan .reader { fill: var(--accent); }
.plan .counter, .plan .lift { fill: rgba(126, 200, 227, 0.1); stroke: var(--accent); stroke-width: 1; }
.plan .stair { stroke: var(--accent); stroke-width: 1; }
.plan .block { fill: none; stroke: var(--accent); stroke-width: 1; }
.plan .exit { fill: rgba(255, 107, 107, 0.12); stroke: #ff6b6b; stroke-width: 1; }
.plan .exitlbl { fill: #ff6b6b; font-size: 7px; font-weight: bold; letter-spacing: 0.12em; }
.plan .pin { display: none; }
.plan .pin.on { display: block; }
.plan .pinhalo { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
.plan .pindot { fill: #fff; filter: drop-shadow(0 0 4px #fff); }
.plan .pinlbl { fill: #fff; font-size: 9px; font-weight: bold; letter-spacing: 0.12em; }
.leaflet[data-here="production"] .plan .pin-production, .leaflet[data-here="wing"] .plan .pin-wing, .leaflet[data-here="lobby"] .plan .pin-lobby, .leaflet[data-here="offices"] .plan .pin-offices, .leaflet[data-here="plant"] .plan .pin-plant, .leaflet[data-here="concourse"] .plan .pin-concourse { display: block; }
.plan .flow { fill: none; stroke: #f0c060; stroke-width: 1; stroke-dasharray: 3 2; }
.plan .flowhead { fill: none; stroke: #f0c060; stroke-width: 1; }
.plan .window { fill: none; stroke: rgba(126, 200, 227, 0.7); stroke-width: 1.2; }