/* Kim Agent - isometric pixel 2:1 (Habbo / SimCity 2000). One art pixel = var(--px) css px everywhere: sprites, tiles,
   borders, depth. Flat fills only. Red = seal / torn only. */
@font-face { font-family: "Jersey 15"; src: url("/assets/fonts/Jersey15.ttf") format("truetype"); font-display: swap; }
:root {
  --carpet-lt: #8E9BD6; --carpet-ln: #8592CF; --carpet: #6C79B8; --carpet-dk: #4E5A93;
  --outline: #1B1A2E; --wall: #E4E1D3; --wall-sh: #BDB9A8; --paper: #FBF8EE; --paper-sh: #D9D3BF; --paper-ln: #9C9682;
  --ink: #23305C; --wood-dk: #5A3523; --wood: #8C5A36; --wood-lt: #B9834F; --brass: #C99A2E; --brass-lt: #EFCB62;
  --wax-dk: #6E1020; --wax: #B21F2E; --wax-lt: #E0525A; --green-dk: #2F5D3A; --green: #4F8A4A;
  --metal: #8A90A0; --metal-lt: #C3C8D2; --screen: #2A2E3A;
  --px: 2px;
  --disp: "Jersey 15", "VT323", monospace; --type: "VT323", monospace; --num: "IBM Plex Mono", ui-monospace, monospace;
  --hdr: 64px;
}
@media (min-width: 820px) { :root { --px: 3px; --hdr: 72px; } }
@media (min-width: 1240px) { :root { --px: 4px; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--outline); font: 24px/1.15 var(--type);
  background: var(--carpet-lt) url(/assets/art/carpet.png) 0 0 / calc(32 * var(--px)) calc(16 * var(--px)) repeat;
  image-rendering: pixelated; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale;
  cursor: url(/assets/art/cur-pen.png) 2 28, auto; overflow-x: hidden;
}
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
img.spr { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); max-width: none; }
a, button, [role=button], summary, label, .ca, select { cursor: url(/assets/art/cur-stamp.png) 16 30, pointer; }
a { color: var(--ink); }
.num { font-family: var(--num); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.mono { font-family: var(--num); font-size: 14px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--brass-lt); color: var(--outline); }
:focus-visible { outline: var(--px) solid var(--ink); outline-offset: var(--px); }
[hidden] { display: none !important; }

/* ---------- 9-slice pieces */
.panel { border: solid transparent; border-width: calc(2 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px)); border-image: url(/assets/art/panel.png) 2 2 3 2 fill / calc(2 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px)) stretch; }
.note { border: solid transparent; border-width: calc(2 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px)); border-image: url(/assets/art/note.png) 2 2 3 2 fill / calc(2 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px)) stretch; }
.plank { border: solid transparent; border-width: calc(2 * var(--px)) calc(2 * var(--px)) calc(4 * var(--px)); border-image: url(/assets/art/plank.png) 2 2 4 2 fill / calc(2 * var(--px)) calc(2 * var(--px)) calc(4 * var(--px)) stretch; color: var(--paper); }
.inkp { border: solid transparent; border-width: calc(2 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px)); border-image: url(/assets/art/ink.png) 2 2 3 2 fill / calc(2 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px)) stretch; color: var(--paper); }

/* buttons: paper tabs with a 2-px wood base; hover lifts one art pixel, press sinks to the floor */
.btn {
  --bi: url(/assets/art/btn.png);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; position: relative;
  font: 30px/1 var(--disp); color: var(--outline); text-decoration: none; white-space: nowrap; background: none;
  border: solid transparent; border-width: calc(2 * var(--px)) calc(2 * var(--px)) calc(4 * var(--px));
  border-image: var(--bi) 2 2 4 2 fill / calc(2 * var(--px)) calc(2 * var(--px)) calc(4 * var(--px)) stretch;
  padding: 4px 14px 2px; transition: transform 0s; user-select: none;
}
.btn:hover { --bi: url(/assets/art/btn-hi.png); transform: translateY(calc(-1 * var(--px))); }
.btn:active { --bi: url(/assets/art/btn-press.png); transform: translateY(calc(2 * var(--px))); }
.btn[disabled], .btn.off { --bi: url(/assets/art/btn-off.png); color: rgba(27, 26, 46, .5); transform: none; cursor: not-allowed; }
.btn.brass { --bi: url(/assets/art/brass.png); }
.btn.brass:active { --bi: url(/assets/art/brass-press.png); }
.btn.primary::after { content: ""; width: calc(2 * var(--px)); height: calc(2 * var(--px)); background: var(--wax); box-shadow: 0 0 0 var(--px) var(--wax-dk); margin-left: 6px; }
.btn.sm { font-size: 22px; min-height: 40px; padding: 2px 10px 0; }
.btn svg { width: 20px; height: 20px; }
.btn.pump { gap: 0; }
.btn.busy { pointer-events: none; }
.btn.busy::before { content: ""; width: calc(2 * var(--px)); height: calc(2 * var(--px)); background: var(--ink); animation: blink .5s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lnk { font: 22px var(--type); color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; background: none; border: 0; padding: 0; }
.lnk:hover { color: var(--wood); }

/* typewriter slots */
.slot { display: grid; gap: 2px; }
.slot > span { font: 20px var(--type); color: var(--paper-ln); text-transform: uppercase; letter-spacing: .04em; }
.slot input, .slot select, .slot textarea {
  width: 100%; min-width: 0; font: 28px/1.1 var(--type); color: var(--ink); background: transparent url(/assets/art/dots.png) 0 100% / calc(2 * var(--px)) var(--px) repeat-x;
  border: 0; padding: 4px 2px calc(4px + var(--px)); caret-color: var(--ink); border-radius: 0; outline: none; appearance: none;
}
.slot input:focus { background-image: none; box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ink); }
.slot input.mono { font: 15px var(--num); padding-top: 8px; }
.slot .hint { font: 18px var(--type); color: var(--paper-ln); }
.slot.bad input { box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--wax); }
.strike { display: inline-block; animation: strike .12s steps(2) 1; }
@keyframes strike { 0% { transform: translateY(calc(-1 * var(--px))); } 100% { transform: none; } }

/* rocker switch (2 frames) */
.rock { display: inline-flex; gap: 0; align-items: stretch; }
.rock button { font: 22px/1 var(--disp); padding: 8px 10px 6px; min-height: 40px; color: var(--paper-ln); background: var(--paper-sh); border: var(--px) solid var(--outline); }
.rock button + button { border-left: 0; }
.rock button[aria-pressed=true] { background: var(--paper); color: var(--outline); box-shadow: inset 0 calc(-2 * var(--px)) 0 var(--wood-dk); }

/* ---------- header: a paper strip pinned to the carpet */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--paper); box-shadow: 0 var(--px) 0 var(--paper-sh), 0 calc(2 * var(--px)) 0 var(--outline); }
.hdr .home { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--outline); flex: none; }
.hdr .home img { width: 45px; height: 45px; }
.hdr .home b { font: 400 30px/1 var(--disp); white-space: nowrap; }
.hdr nav { display: flex; gap: 18px; margin-left: 18px; }
.hdr nav a { font: 24px var(--type); text-decoration: none; color: var(--ink); padding: 6px 0; }
.hdr nav a[aria-current=page] { box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--wax); }
.hdr .side { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.hdr .btn { font-size: 22px; min-height: 40px; padding: 2px 10px 0; }
.hdr .tk { font: 22px var(--disp); color: var(--wood); }
.burger { display: none; }
@media (max-width: 1100px) { .hdr nav { display: none; } .burger { display: inline-flex; } }
@media (max-width: 560px) { .hdr .home b { display: none; } .hdr { padding: 0 10px; gap: 6px; } .hdr .side { gap: 6px; } .hdr .pump .lg { display: none; } }
.menu { position: fixed; top: calc(var(--hdr) + 8px); right: 10px; z-index: 60; display: grid; gap: 4px; padding: 14px 18px; min-width: 220px; }
.menu a { font: 30px var(--disp); color: var(--outline); text-decoration: none; padding: 4px 0; }

/* CA slip: always the full address, wraps, copies */
.ca { display: grid; gap: 2px; text-align: left; font: inherit; color: var(--outline); background: none; padding: 0; border: 0; }
.ca .cl { font: 20px var(--disp); color: var(--wood); letter-spacing: .04em; }
.ca .cv { font: 500 14px/1.35 var(--num); overflow-wrap: anywhere; word-break: break-all; }
.ca .cs { font: 18px var(--type); color: var(--paper-ln); }
.ca.done .cs { color: var(--green); }
.ca.pre .cv { font: 24px var(--type); color: var(--paper-ln); word-break: normal; }

/* toasts = paper notes with a brass pin */
.toasts { position: fixed; z-index: 90; right: 16px; bottom: 16px; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 32px)); }
.toast { font: 22px/1.15 var(--type); padding: 10px 14px 10px 28px; position: relative; }
.toast::before { content: ""; position: absolute; left: 8px; top: 10px; width: calc(2 * var(--px)); height: calc(2 * var(--px)); background: var(--brass); box-shadow: 0 0 0 var(--px) var(--outline); }
.toast.err::before { background: var(--wax); }
.toast a { word-break: break-all; }

/* tooltip notes */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: max-content; max-width: 260px; white-space: normal; font: 20px/1.1 var(--type); color: var(--outline); background: var(--paper); padding: 6px 10px; box-shadow: 0 0 0 var(--px) var(--outline), 0 calc(2 * var(--px)) 0 var(--px) var(--paper-sh); z-index: 30; text-align: left; }

/* ---------- dialogs */
dialog.dlg { border: 0; padding: 22px 22px 18px; width: min(460px, calc(100vw - 24px)); background: var(--paper); color: var(--outline); box-shadow: 0 0 0 var(--px) var(--outline), 0 calc(3 * var(--px)) 0 var(--px) var(--paper-sh); font: 24px var(--type); }
dialog.dlg::backdrop { background: rgba(78, 90, 147, .55); }
dialog.dlg h2 { font: 400 45px/1 var(--disp); margin: 0 0 12px; }
.dlg-x { position: absolute; right: 8px; top: 6px; width: 44px; height: 44px; font: 36px/1 var(--disp); background: none; border: 0; color: var(--outline); }
.wp-list { display: grid; gap: 8px; margin: 8px 0 12px; }
.wp-item { display: flex; align-items: center; gap: 12px; font: 28px var(--disp); padding: 8px 12px; background: var(--paper); border: var(--px) solid var(--outline); box-shadow: 0 calc(2 * var(--px)) 0 var(--wood-dk); text-align: left; }
.wp-item:hover { transform: translateY(calc(-1 * var(--px))); }
.wp-item img { width: 32px; height: 32px; }
.wp-dot { width: 32px; height: 32px; background: var(--brass); box-shadow: inset 0 0 0 var(--px) var(--outline); }
.wp-get { display: flex; flex-wrap: wrap; gap: 14px; font-size: 20px; }
.wp-err { color: var(--wax); font-size: 20px; }
.wp-off { margin-top: 12px; }

/* ---------- generic page shell (all pages but the floor) */
.page { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 60px; }
.page h1 { font: 400 60px/1 var(--disp); margin: 0 0 8px; color: var(--paper); text-shadow: 0 calc(1 * var(--px)) 0 var(--carpet-dk), 0 calc(2 * var(--px)) 0 var(--outline); }
.page .lead { font: 26px/1.15 var(--type); color: var(--outline); margin: 0 0 22px; max-width: 760px; }
.sheet { padding: 20px 22px 18px; }
.sheet h2 { font: 400 45px/1 var(--disp); margin: 0 0 10px; }
.sheet h3 { font: 400 30px/1 var(--disp); margin: 18px 0 6px; }
.sheet p { margin: 0 0 10px; }
.grid2 { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline; }
.kv dt { font: 20px var(--type); color: var(--paper-ln); text-transform: uppercase; }
.kv dd { margin: 0; font: 500 16px var(--num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stamp { display: inline-block; font: 22px/1 var(--disp); padding: 4px 8px 2px; color: var(--wax); box-shadow: inset 0 0 0 var(--px) var(--wax); transform: rotate(-4deg); }
.stamp.green { color: var(--green-dk); box-shadow: inset 0 0 0 var(--px) var(--green); }
.stamp.grey { color: var(--paper-ln); box-shadow: inset 0 0 0 var(--px) var(--paper-ln); }
.demo { font: 18px/1 var(--disp); color: var(--paper); background: var(--ink); padding: 3px 6px 1px; letter-spacing: .05em; }
.err-line { color: var(--wax); font-size: 20px; min-height: 22px; }
.ok-line { color: var(--green-dk); font-size: 20px; }
.empty { text-align: center; padding: 26px 18px; }
.empty p { font-size: 24px; margin: 6px 0 14px; }
.links { display: flex; gap: 12px; flex-wrap: wrap; font: 20px var(--type); }

/* calendar strip (payroll): one tile per day */
.cal { display: grid; grid-template-columns: repeat(auto-fill, calc(9 * var(--px))); gap: var(--px); }
.cal i { width: calc(9 * var(--px)); height: calc(9 * var(--px)); background: var(--paper); box-shadow: inset 0 0 0 var(--px) var(--paper-ln); position: relative; }
.cal i.due { background: var(--paper); box-shadow: inset 0 0 0 var(--px) var(--ink); }
.cal i.paid { background: var(--paper); box-shadow: inset 0 0 0 var(--px) var(--outline); }
.cal i.paid::after { content: ""; position: absolute; inset: calc(2 * var(--px)); background: var(--brass); box-shadow: inset 0 calc(-1 * var(--px)) 0 #a3781e, inset calc(1 * var(--px)) calc(1 * var(--px)) 0 var(--brass-lt); }
.cal i.lost { background: var(--paper-sh); box-shadow: inset 0 0 0 var(--px) var(--paper-ln); }
.cal i.lost::after { content: ""; position: absolute; left: calc(4 * var(--px)); top: var(--px); bottom: var(--px); width: var(--px); background: var(--wax); transform: skewX(-20deg); }
.cal i.drop::after { animation: coin .36s steps(4) 1; }
@keyframes coin { 0% { transform: translateY(calc(-8 * var(--px))); } 100% { transform: none; } }

/* folders (scouting) */
.folders { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.folder { position: relative; padding: 18px 14px 12px; background: #E9D9A8; box-shadow: inset 0 0 0 var(--px) var(--outline), inset 0 calc(-2 * var(--px)) 0 calc(var(--px)) #C9B57E; margin-top: calc(7 * var(--px)); }
.folder::before { content: attr(data-tab); position: absolute; left: 0; top: calc(-7 * var(--px)); height: calc(7 * var(--px)); padding: 0 10px; font: 20px/calc(7 * var(--px)) var(--disp); color: var(--paper); background: var(--green); box-shadow: inset var(--px) var(--px) 0 var(--outline), inset calc(-1 * var(--px)) 0 0 var(--outline); }
.folder.larp::before { background: var(--metal); }
.folder .w { font: 500 14px var(--num); overflow-wrap: anywhere; }
.folder .big { font: 500 22px var(--num); font-variant-numeric: tabular-nums; }
.folder .lbl { font: 18px var(--type); color: #6d6248; text-transform: uppercase; }
.folder .stamp { position: absolute; right: 10px; top: 10px; }

/* contract paper (typewriter) */
.contract { position: relative; padding: 22px 24px 18px; }
.contract .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: var(--px) solid var(--paper-sh); padding-bottom: 8px; margin-bottom: 12px; }
.contract .hd b { font: 400 30px/1 var(--disp); }
.contract .clause { font: 24px/1.15 var(--type); color: var(--ink); }
.contract .fields { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contract .fields .wide { grid-column: 1 / -1; }
.contract .sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.sigline { position: relative; width: 240px; height: calc(22 * var(--px)); border-bottom: var(--px) solid var(--outline); }
.sigline canvas { position: absolute; left: 0; bottom: 0; }
.sigline small { position: absolute; left: 0; bottom: calc(-1 * var(--px) - 20px); font: 18px var(--type); color: var(--paper-ln); }
.sealdrop { position: absolute; pointer-events: none; z-index: 5; }
.sealdrop.go { animation: drop .5s steps(6) 1 both; }
@keyframes drop { 0% { transform: translateY(-160px); opacity: 1; } 70% { transform: translateY(0) scale(1.12, .84); } 85% { transform: translateY(0) scale(.96, 1.04); } 100% { transform: none; } }

/* the escrow strongbox meter */
.box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.box .num { white-space: nowrap; }
.meter { display: grid; grid-template-columns: repeat(10, calc(5 * var(--px))); gap: var(--px); }
.meter i { width: calc(5 * var(--px)); height: calc(3 * var(--px)); background: var(--paper-sh); box-shadow: inset 0 0 0 var(--px) var(--paper-ln); }
.meter i.on { background: var(--brass); box-shadow: inset 0 0 0 var(--px) var(--outline), inset 0 calc(-1 * var(--px)) 0 calc(var(--px)) #a3781e; }

/* list rows */
.rows { display: grid; gap: 12px; }
.rowc { padding: 14px 16px 12px; display: grid; gap: 8px; }
.rowc .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rowc .top b { font: 400 30px/1 var(--disp); }
.rowc .terms { font: 500 15px var(--num); font-variant-numeric: tabular-nums; color: var(--ink); }
.st { font: 20px var(--type); color: var(--ink); }
.st.bad { color: var(--wax); }
.st.good { color: var(--green-dk); }

/* footer: the doormat */
.mat { margin: 40px auto 30px; width: min(980px, calc(100% - 32px)); padding: 22px 26px 20px; display: grid; gap: 16px; grid-template-columns: 1fr; color: var(--paper); }
.mat .ca .cl { color: var(--brass-lt); } .mat .ca .cv { color: var(--paper); } .mat .ca .cs { color: var(--wood-lt); } .mat .ca.pre .cv { color: var(--wood-lt); }
.mat nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mat nav a { font: 26px var(--disp); color: var(--brass-lt); text-decoration: none; }
.mat nav a:hover { color: var(--paper); }
.mat .fine { font: 18px var(--type); color: var(--wood-lt); }
@media (min-width: 820px) { .mat { grid-template-columns: 1.2fr 1fr; align-items: center; } }

/* ---------- the floor (home) */
.floor { position: relative; }
.stop { position: relative; min-height: calc(100vh - var(--hdr)); display: flex; align-items: center; justify-content: center; padding: 36px 16px; scroll-snap-align: start; }
.room { position: relative; width: min(1180px, 100%); display: grid; gap: 22px; justify-items: center; }
body:not(.pan) .stage canvas.fl:not([data-on]) { display: none; }
body:not(.pan) .stage canvas.fl { position: absolute; left: 0; top: 0; z-index: 0; }
body:not(.pan) #lobby { z-index: 1; }
body:not(.pan) .floor { overflow: hidden; }
body.pan .floor { height: var(--floor-h, 600vh); }
body.pan .stage { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); overflow: hidden; }
body.pan .stage canvas.fl { display: block; position: absolute; left: 0; top: 0; }
body.pan .map { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; }
body.pan .stop { position: absolute; left: 0; top: 0; width: 100vw; height: calc(100vh - var(--hdr)); min-height: 0; padding: 20px 28px; pointer-events: auto; }
body.pan .flow-only { display: none; }
@media (max-width: 819px) { .stop { min-height: 0; padding: 40px 16px; } }

.plaque { border: solid transparent; border-width: calc(2 * var(--px)) calc(2 * var(--px)) calc(4 * var(--px)); border-image: url(/assets/art/brass.png) 2 2 4 2 fill / calc(2 * var(--px)) calc(2 * var(--px)) calc(4 * var(--px)) stretch; display: inline-block; padding: 8px 26px 2px; font: 400 45px/1 var(--disp); color: var(--outline); letter-spacing: .01em; position: relative; text-align: center; margin: 14px 0 0; }
@media (min-width: 820px) { .plaque { font-size: 60px; } }
@media (min-width: 1240px) { .plaque { font-size: 90px; } }
.plaque::before, .plaque::after { content: ""; position: absolute; top: calc(-10 * var(--px)); width: var(--px); height: calc(10 * var(--px)); background: var(--wood-dk); }
.plaque::before { left: 22%; } .plaque::after { right: 22%; }
.hook { font: 28px/1.1 var(--type); color: var(--outline); background: var(--paper); padding: 6px 14px 4px; box-shadow: 0 0 0 var(--px) var(--outline), 0 calc(2 * var(--px)) 0 var(--px) var(--paper-sh); text-align: center; }
.lobby { grid-template-columns: 1fr; text-align: center; }
.lobby .deskwrap { position: relative; }
.lobby .acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lobby .slip { max-width: 420px; padding: 12px 16px 10px; text-align: left; position: relative; }
.lobby .slip::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--px)); width: calc(3 * var(--px)); height: calc(3 * var(--px)); background: var(--brass); box-shadow: 0 0 0 var(--px) var(--outline); }
.lobby .base { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; justify-content: center; }
.lobby { gap: 16px; }
@media (min-width: 1100px) { body.pan .lobby .slip { position: absolute; right: 0; top: 34%; width: 300px; } }
@media (min-width: 1240px) { body.pan .lobby .slip { right: 0; width: 330px; } }
.figs { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.fig { display: grid; justify-items: center; gap: 0; }
.fig b { font: 500 26px var(--num); font-variant-numeric: tabular-nums; color: var(--outline); }
.fig span { font: 18px var(--type); color: var(--paper-ln); text-transform: uppercase; }
.figs.on-paper { padding: 10px 16px 8px; }
.demo-k { position: absolute; left: 0; top: 30%; display: grid; justify-items: start; gap: 6px; }
@media (max-width: 1099px) { .demo-k { display: none !important; } }
.room.split { grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .room.split { grid-template-columns: auto minmax(0, 560px); justify-content: center; gap: 46px; } }
.room .copy { display: grid; gap: 14px; justify-items: start; }
.room .copy h2 { font: 400 60px/1 var(--disp); margin: 0; color: var(--paper); text-shadow: 0 var(--px) 0 var(--carpet-dk), 0 calc(2 * var(--px)) 0 var(--outline); }
.room .copy p.one { font: 28px/1.12 var(--type); margin: 0; background: var(--paper); padding: 4px 10px 2px; box-shadow: 0 0 0 var(--px) var(--outline); }
.sprite-col { display: grid; justify-items: center; }
.end-stamp { position: fixed; left: 50%; top: 45%; z-index: 40; pointer-events: none; transform: translate(-50%, -50%); }
.floorlabel { font: 20px var(--disp); color: var(--carpet-dk); letter-spacing: .1em; }
.video-slot video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--screen); }

@media (prefers-reduced-motion: reduce) { .sealdrop.go, .cal i.drop::after, .strike { animation: none !important; } }
@media (max-width: 819px) {
  .page h1, .room .copy h2 { font-size: 45px; }
  .contract .fields { grid-template-columns: 1fr; }
  .sheet h2 { font-size: 36px; }
}

.bars { width: 18px; height: 14px; position: relative; display: block; }
.bars::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--outline); box-shadow: 0 6px 0 var(--outline), 0 12px 0 var(--outline); }
@media (max-width: 819px) {
  .hook { font-size: 24px; }
  .figs { gap: 10px 14px; }
  .fig b { font-size: 22px; }
  .fig span { font-size: 15px; }
  .figs.on-paper { padding: 8px 10px 6px; }
}

.links a, .mat nav a, .folder .w, .rowc .links a { display: inline-block; padding: 9px 0; min-height: 40px; }
.mat nav a { padding: 6px 0; min-height: 40px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; }
[data-payroll] .cal { grid-template-columns: repeat(auto-fill, calc(13 * var(--px))); }
[data-payroll] .cal i { width: calc(13 * var(--px)); height: calc(13 * var(--px)); }
[data-payroll] .cal i.paid::after { inset: calc(3 * var(--px)); }
[data-payroll] .cal i.lost::after { left: calc(6 * var(--px)); }
.prelaunch { max-width: 720px; margin: 0 auto; }
.prelaunch h2 { margin: 10px 0 0; }
.prelaunch .tiers { max-width: 420px; margin: 14px auto; text-align: left; }
.prelaunch .tiers dd { font-size: 20px; }