:root {
  --bg: #040716;
  --bg-2: #0a1030;
  --ink: #eef2ff;
  --ink-2: #b9c6f5;
  --ink-3: #8595d6;
  --cobalt: #3a63ff;
  --glow: #5b84ff;
  --neg: #ffb0c0;
  --paper: #f3f5ff;
  --paper-ink: #0b1440;
  --mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --hand: "Permanent Marker", "Segoe Print", "Comic Sans MS", cursive;
  --display: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --line: 1px solid color-mix(in srgb, var(--glow) 70%, transparent);
  --glow-shadow: 0 0 6px color-mix(in srgb, var(--glow) 55%, transparent), inset 0 0 6px color-mix(in srgb, var(--glow) 25%, transparent);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 14px; line-height: 1.45;
  font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.marker { font-family: var(--hand); letter-spacing: .01em; }

/* ---------- the stage: the whole desk, regions placed by app.js in % of the picture ---------- */
.stage {
  position: relative; width: 100%; max-width: 2400px; margin: 0 auto 7vw;
  aspect-ratio: 2560 / 1429; container-type: inline-size;
}
.art { position: absolute; inset: 0; overflow: hidden; }
.art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.scene, .scene-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-loop { opacity: 0; transition: opacity .8s; }
.scene-loop.on { opacity: 1; }
[data-r] { position: absolute; }

.sign {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: .9em; flex-wrap: wrap;
  font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1;
  font-size: clamp(18px, 2.35cqw, 52px); letter-spacing: .06em; color: #f4f7ff;
  text-shadow: 0 0 .12em #fff, 0 0 .35em var(--glow), 0 0 .9em var(--cobalt);
}
.sign-ticker { font-size: .52em; letter-spacing: .12em; color: var(--ink-2); text-shadow: 0 0 .3em var(--cobalt); }

/* the monitor screen */
.screen {
  display: flex; background: rgba(3, 6, 22, .86); border-radius: 2px; flex-direction: column; padding: 1.1cqw 1.3cqw 0.8cqw;
  font-size: clamp(11px, .86cqw, 16px); line-height: 1.4; overflow: hidden;
}
.rows { margin: 0 0 .6em; display: grid; grid-template-columns: auto 1fr; border-top: var(--line); }
.rows dt, .rows dd { margin: 0; padding: .28em 0; border-bottom: var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows dt { color: var(--ink-2); padding-right: 1.2em; }
.rows dd { text-align: right; font-weight: 700; text-transform: uppercase; }
.rows dd.lower { text-transform: none; }
.sheet-head { display: flex; justify-content: space-between; gap: 1em; color: var(--ink-2); margin-bottom: .3em; }
.sheet-head span:last-child { text-align: right; }
.sheet { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sheet li { padding: .32em 0; border-bottom: 1px dashed color-mix(in srgb, var(--glow) 35%, transparent); }
.sheet .t { color: var(--ink-3); margin-right: .6em; }
.sheet .act { font-weight: 700; margin-right: .5em; }
.sheet .act.buy { color: #fff; }
.sheet .act.sell, .sheet .act.stop { color: var(--neg); }
.sheet .act.pass, .sheet .act.note { color: var(--ink-2); }
.sheet .why { color: var(--ink-2); display: block; }
.sheet a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 2px; }
.sheet .empty { color: var(--ink-2); border: 0; }
.screen-more {
  align-self: flex-end; margin-top: .4em; min-height: 32px; padding: 0 .8em; background: transparent;
  border: var(--line); border-radius: 3px; color: var(--ink); font-size: inherit; box-shadow: var(--glow-shadow);
}
.screen-more:hover { background: color-mix(in srgb, var(--cobalt) 25%, transparent); }

/* whiteboard + cork: marker on the wall */
.board, .cork { padding: 1.4cqw 1.6cqw; font-size: clamp(12px, 1cqw, 19px); display: flex; flex-direction: column; }
.board-title, .cork-title { margin: 0 0 .4em; font-size: 1.35em; color: #fff; text-shadow: 0 0 .3em var(--cobalt); }
.days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.4em; }
.days li { display: flex; justify-content: space-between; gap: .5em; font-family: var(--hand); padding: .08em 0; color: var(--ink); }
.days li .d { color: var(--ink-2); }
.days li.today .d { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.days li .neg { color: var(--neg); }
.board-total { margin: .5em 0 .3em; font-size: 1.1em; }
.ink-btn {
  align-self: flex-start; margin-top: auto; min-height: 44px; padding: 0 .2em; background: none; border: 0;
  color: #fff; font-size: 1.05em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--glow);
}
.ink-btn:hover { text-shadow: 0 0 .4em var(--glow); }
.cork { align-items: stretch; }
.pins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.pins li { display: flex; }
.pin {
  position: relative; width: 100%; aspect-ratio: 320 / 493; padding: 0; border: 0; background: none;
  transition: transform .15s;
}
.pin:hover { transform: translateY(-3px); }
.pin img { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.pin .who {
  position: absolute; left: 14%; right: 14%; top: 58%; font-family: var(--hand); color: var(--paper-ink);
  font-size: clamp(11px, .8cqw, 15px); line-height: 1.05; text-align: center;
}
.pin .who small { display: block; font-family: var(--mono); font-size: .72em; margin-top: .25em; }
.cork-empty { margin: auto 0; text-align: center; color: var(--ink-2); font-size: 1.1em; }

/* stickies */
.sticky {
  margin: 0; display: grid; place-items: center; text-align: center; padding: 2px;
  color: var(--paper-ink); font-size: clamp(9px, .72cqw, 14px); line-height: 1.05; pointer-events: none;
}

/* hotspots on the desk objects */
.hot {
  display: flex; align-items: flex-end; justify-content: center; min-width: 48px; min-height: 48px;
  background: transparent; border: 0; border-radius: 10px; text-decoration: none; padding: 0;
}
.hot:hover, .hot:focus-visible { background: color-mix(in srgb, var(--cobalt) 16%, transparent); box-shadow: 0 0 0 1px var(--glow), 0 0 18px color-mix(in srgb, var(--glow) 45%, transparent); }
.hot-label {
  transform: translateY(125%); white-space: nowrap; font-size: clamp(13px, 1.05cqw, 20px);
  color: #fff; text-shadow: 0 0 .35em var(--cobalt), 0 1px 2px #000;
}
.tray .hot-label { transform: translateY(60%); }
.drawer { align-items: center; }
.drawer .hot-label { transform: none; }
.badge-x { align-items: center; }
.badge-x .xmark {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px;
  background: #000; box-shadow: 0 0 0 1px var(--glow), 0 0 14px var(--cobalt);
}
.badge-x .xmark img { width: 22px; height: auto; }
.badge-x .hot-label { position: absolute; top: 100%; transform: translateY(15%); }
.badge-x[aria-disabled="true"] { cursor: not-allowed; }
.badge-x[aria-disabled="true"] .xmark { opacity: .45; }

/* the asset tag */
.tag { display: block; aspect-ratio: 1200 / 404; }
.tag-art { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.tag-face {
  position: absolute; left: 7%; right: 7%; top: 16%; bottom: 14%;
  display: flex; flex-direction: column; justify-content: center; gap: .45em;
  color: var(--paper-ink); font-size: clamp(11px, .88cqw, 17px); line-height: 1.3;
}
.tag-head { margin: 0; text-transform: uppercase; letter-spacing: .06em; font-size: .86em; }
.tag-ca {
  margin: 0; font-weight: 700; word-break: break-all; user-select: all; -webkit-user-select: all;
  text-shadow: 0 0 2px #fff, 0 0 6px #fff;
}
.tag-ca.none { user-select: text; font-weight: 400; word-break: normal; }
.tag-actions { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; }
.tag-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; min-width: 48px; padding: 0 1em;
  background: var(--paper-ink); color: #fff; border: 0; border-radius: 6px; text-decoration: none; font-weight: 700;
  box-shadow: 0 2px 0 #000, 0 0 10px color-mix(in srgb, var(--cobalt) 60%, transparent);
  transition: transform .08s;
}
.tag-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #000; }
.tag-btn img { width: 22px; height: 22px; border-radius: 4px; }
.tag-btn.mark { padding: 0; width: 48px; }
.tag-btn[aria-disabled="true"], .tag-btn:disabled { opacity: .5; cursor: not-allowed; }
.tag-btn:not([aria-disabled="true"]):not(:disabled):hover { background: #16236a; }

/* ---------- dialogs: the reference's hairline HUD windows ---------- */
dialog.win {
  width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0;
  background: var(--bg); color: var(--ink); border: var(--line); border-radius: 6px;
  box-shadow: 0 0 0 1px #000, 0 0 30px color-mix(in srgb, var(--cobalt) 45%, transparent);
  overflow: hidden; display: none; flex-direction: column;
}
dialog.win[open] { display: flex; }
dialog.win.wide { width: min(1040px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(2, 4, 14, .78); }
.win-bar { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .6em .6em .6em 1em; border-bottom: var(--line); }
.win-bar h2 { margin: 0; font-size: 15px; letter-spacing: .04em; }
.x { min-height: 44px; padding: 0 1em; background: none; color: var(--ink); border: var(--line); border-radius: 4px; }
.x:hover { background: color-mix(in srgb, var(--cobalt) 25%, transparent); }
.win-body { padding: 1em; overflow: auto; overscroll-behavior: contain; font-size: 14px; }
.win-note { color: var(--ink-2); margin: 0 0 1em; }
.sheet.full { list-style: none; margin: 0; }
.sheet.full li { padding: .5em 0; }

.how h3 { margin: 1.1em 0 .4em; font-size: 14px; color: #fff; }
.how h3:first-child { margin-top: 0; }
.how p { margin: 0 0 .6em; color: var(--ink-2); }
.how dl { display: grid; grid-template-columns: auto 1fr; margin: 0; border-top: var(--line); }
.how dt, .how dd { margin: 0; padding: .4em 0; border-bottom: var(--line); }
.how dt { color: var(--ink-2); padding-right: 1em; }
.how dd { text-align: right; }

/* CVs: one column each, equal heights */
.cvs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.cv { display: flex; flex-direction: column; border: var(--line); border-radius: 4px; box-shadow: var(--glow-shadow); min-width: 0; }
.cv-head { padding: .8em 1em; border-bottom: var(--line); }
.cv-head h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 .3em var(--cobalt); }
.cv-head p { margin: .2em 0 0; color: var(--ink-2); }
.cv dl { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.cv dt, .cv dd { margin: 0; padding: .45em 1em; border-bottom: var(--line); }
.cv dt { color: var(--ink-2); padding-right: .4em; }
.cv dd { text-align: right; font-weight: 700; text-transform: uppercase; overflow-wrap: anywhere; }
.cv .stars { letter-spacing: .1em; font-weight: 400; }
.cv .stars b { font-weight: 400; color: #fff; text-shadow: 0 0 6px var(--glow); }
.cv .stars i { font-style: normal; color: var(--ink-3); opacity: .45; }
.cv-pitch { margin: 0; padding: .8em 1em; color: var(--ink); flex: 1 1 auto; }
.cv-foot { padding: .8em 1em; border-top: var(--line); display: flex; justify-content: space-between; align-items: center; gap: .6em; }
.cv-foot .w { color: var(--ink-2); }
.vote {
  min-height: 48px; padding: 0 1.2em; background: var(--ink); color: var(--paper-ink); border: 0; border-radius: 4px; font-weight: 700;
  box-shadow: 0 0 12px color-mix(in srgb, var(--glow) 60%, transparent); transition: transform .08s;
}
.vote:active { transform: translateY(2px); }
.vote:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.cvs .none { grid-column: 1 / -1; color: var(--ink-2); border: var(--line); padding: 2em 1em; text-align: center; border-radius: 4px; }

.exit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1em; }
.exit-clip { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: var(--line); border-radius: 4px; background: #000; }
.exit blockquote { margin: 0 0 1em; font-family: var(--hand); font-size: 20px; line-height: 1.3; color: #fff; }
.exit dl { display: grid; grid-template-columns: auto 1fr; margin: 0; border-top: var(--line); }
.exit dt, .exit dd { margin: 0; padding: .4em 0; border-bottom: var(--line); }
.exit dt { color: var(--ink-2); padding-right: 1em; }
.exit dd { text-align: right; }

.round { border: var(--line); border-radius: 4px; margin-bottom: 1em; }
.round h3 { margin: 0; padding: .6em 1em; border-bottom: var(--line); font-size: 14px; }
.round dl { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.round dt, .round dd { margin: 0; padding: .4em 1em; border-bottom: var(--line); }
.round dt { color: var(--ink-2); }
.round dd { text-align: right; overflow-wrap: anywhere; }
.round dl > :nth-last-child(-n+2) { border-bottom: 0; }
.round a, .win-body a { color: var(--ink); }
.claim h3 { margin: 1.2em 0 .5em; font-size: 14px; }
.claim-row { display: flex; gap: .6em; flex-wrap: wrap; align-items: center; }
.wallets { display: grid; gap: .6em; }
.wallets button { display: flex; align-items: center; gap: .8em; min-height: 52px; padding: 0 1em; background: var(--bg-2); border: var(--line); border-radius: 4px; color: var(--ink); text-align: left; }
.wallets button img { width: 28px; height: 28px; border-radius: 6px; }
.wallets button:hover { background: color-mix(in srgb, var(--cobalt) 25%, var(--bg-2)); }

/* ---------- phone: the tall desk cut into crops ---------- */
.phone { display: none; }
@media (max-width: 820px) {
  .stage { display: none; }
  .phone { display: block; padding: max(12px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom)); }
  .crop { position: relative; width: 100%; overflow: hidden; container-type: inline-size; }
  .crop > .crop-img { position: absolute; max-width: none; display: block; }
  .phone .sign { position: static; padding: 18px 16px 14px; font-size: clamp(20px, 6.4vw, 30px); }
  .phone .screen { font-size: 12px; padding: 10px 10px 8px; }
  .phone .rows dt, .phone .rows dd { padding: .22em 0; }
  .phone .board, .phone .cork { font-size: 16px; padding: 18px 16px; }
  .phone .sticky { font-size: 10.5px; }
  .phone .tag-wrap { position: relative; margin: 6px 16px 10px; container-type: inline-size; }
  .phone .tag { position: relative; width: 100%; }
  .phone .tag-face { left: 8%; right: 8%; top: 17%; bottom: 15%; gap: .3em; font-size: 12px; }
  .phone .tag-head { font-size: 10.5px; }
  .phone-actions { margin-top: 10px; display: grid; grid-template-columns: 1fr 48px; gap: 8px; }
  .phone-actions .buy { grid-column: 1 / -1; order: -1; }
  .phone .rows dd { white-space: normal; }
  .phone .hot-label { font-size: 16px; }
  .phone .pin .who { font-size: 12px; }
  .cvs { grid-template-columns: 1fr; }
  .exit { grid-template-columns: 1fr; }
  dialog.win, dialog.win.wide { width: calc(100vw - 16px); max-height: calc(100svh - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-loop { display: none; }
  * { transition: none !important; }
}