:root {
  --desk: #26241f;
  --desk-2: #1d1c18;
  --paper: #f2ede1;
  --paper-2: #e9e2d2;
  --ink: #1c1a16;
  --dim: #77705f;
  --rule: #d8cfbb;
  --margin: #b8433a;
  --stamp: #a8281f;
  --pencil: #2f4d7c;
  --c-creator: #5e1510;
  --c-bundle: #a8281f;
  --c-sniper: #d0745d;
  --c-linked: #e6b3a3;
  --c-outside: #b9b09c;
  --pos: #2c5a34;
  --mono: 'Courier Prime', 'Courier New', monospace;
  --sans: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --lh: 26px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 30% 0%, #312e27 0%, var(--desk) 45%, var(--desk-2) 100%);
  color: var(--paper);
  font-family: var(--sans);
  display: flex; flex-direction: column;
  min-height: 100vh;
}
button, input { font: inherit; }

/* top bar */
.bar { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid #3a372f; }
.seal {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--paper);
  display: grid; place-items: center; font: 700 15px var(--mono); flex: none;
  box-shadow: inset 0 0 0 3px var(--desk), inset 0 0 0 4px var(--paper);
}
.bar-title { font: 600 15px var(--sans); letter-spacing: 0.16em; white-space: nowrap; }
.bar-title span { font-weight: 400; color: #a59e8b; letter-spacing: 0.06em; }
.docket { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.docket label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #a59e8b; white-space: nowrap; }
.docket input {
  width: 360px; max-width: 40vw; background: transparent; color: var(--paper); border: 0; border-bottom: 1px solid #6c665a;
  font: 13px var(--mono); padding: 6px 2px; outline: none;
}
.docket input:focus { border-color: var(--paper); }
.docket button, .tools button, .oath button, .cross button {
  background: var(--paper); color: var(--ink); border: 0; padding: 7px 14px; font: 600 12px var(--sans);
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border-radius: 1px;
}
button:disabled { opacity: 0.45; cursor: default; }
button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* the room */
.room { flex: 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(470px, 1.1fr); gap: 28px; padding: 24px 22px 28px; min-height: 0; }

/* transcript sheet */
.sheet {
  background: var(--paper); color: var(--ink); position: relative; display: flex; flex-direction: column;
  box-shadow: 0 1px 0 #fff8 inset, 0 30px 60px -20px #000c, 0 2px 4px #0006;
  height: calc(100vh - 110px); min-height: 520px;
  background-image: linear-gradient(transparent 0 0), radial-gradient(140% 100% at 50% 0%, #0000 60%, #00000010 100%);
}
.caption {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-bottom: 3px double var(--ink); margin: 26px 34px 0 74px;
  font-family: var(--mono); font-size: 13px;
}
.cap-left { border-right: 1px solid var(--ink); padding: 0 14px 14px 0; }
.cap-right { padding: 0 0 14px 16px; line-height: 1.75; }
.cap-small, .k { font: 600 11px var(--sans); letter-spacing: 0.14em; color: var(--dim); }
.cap-token { display: flex; align-items: center; gap: 10px; font: 700 clamp(20px, 2.2vw, 30px) var(--mono); margin: 6px 0 4px; overflow-wrap: anywhere; }
.cap-token img { width: 34px; height: 34px; border-radius: 2px; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.cap-mint { font-size: 12px; color: var(--dim); word-break: break-all; }

.transcript { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; margin-top: 10px; scrollbar-width: thin; }
.transcript::before, .transcript::after { content: ''; position: absolute; top: 0; bottom: 0; pointer-events: none; }
.gutter {
  position: absolute; left: 0; top: 0; width: 58px; font: 12px/var(--lh) var(--mono); color: #a69c86; text-align: right; padding-right: 10px;
  border-right: 1px solid var(--margin); box-shadow: 3px 0 0 -2px var(--margin);
}
.gutter span { display: block; height: var(--lh); }
.gutter span.page { color: var(--margin); }
.lines { margin-left: 74px; margin-right: 34px; font: 15px/var(--lh) var(--mono); padding-bottom: var(--lh); }
.lines p { margin: 0; }
.qa { margin-bottom: var(--lh); }
.qa .stamp-t { color: var(--dim); font-size: 12px; }
.qa .who { font-weight: 700; display: inline-block; width: 3ch; }
.qa .q { padding-left: 3ch; text-indent: -3ch; }
.qa .a { padding-left: 3ch; text-indent: -3ch; }
.qa .a .text.typing::after { content: '▍'; animation: blink 1s steps(1) infinite; }
.qa .exr { color: var(--stamp); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.qa.hot .q { font-weight: 700; }
.qa.gallery .q { color: var(--pencil); }
.docket-list { display: grid; gap: 0; margin: 0 0 var(--lh); border-top: 1px solid var(--ink); }
.docket-list a { display: flex; justify-content: space-between; gap: 12px; padding: 0 1ch; line-height: var(--lh); color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--rule); }
.docket-list a:hover { background: #0000000a; }
.docket-list a span { color: var(--dim); }
.qa.future { opacity: 0.22; transition: opacity 0.2s; }
.qa.note { color: var(--dim); font-style: italic; text-align: center; }
.qa.note p { padding: 0 2ch; }
@keyframes blink { 50% { opacity: 0; } }

.cross { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--ink); margin: 0 34px 18px 74px; padding-top: 12px; font-family: var(--mono); }
.cross .who { font-weight: 700; }
.cross input { flex: 1; border: 0; background: transparent; font: 15px var(--mono); color: var(--pencil); outline: none; border-bottom: 1px dotted var(--dim); padding: 4px 0; min-width: 0; }
.cross button { background: var(--ink); color: var(--paper); }

/* oath */
.oath { border: 1px solid var(--ink); padding: calc(var(--lh) * 0.5) 2ch; margin-bottom: var(--lh); font-family: var(--mono); }
.oath-t { font-weight: 700; }
.oath-d { color: var(--dim); font-size: 13px; line-height: 1.6; margin: 6px 0 12px !important; }
.oath-b { display: flex; flex-wrap: wrap; gap: 8px; }
.oath button { background: var(--ink); color: var(--paper); }
.oath button.ghost { background: transparent; color: var(--ink); }
.oath-p { margin-top: 12px; font-size: 12px; color: var(--dim); }
.oath-bar { height: 6px; border: 1px solid var(--ink); margin-bottom: 6px; }
.oath-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 8px); transition: width 0.3s; }

/* desk */
.desk { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; height: calc(100vh - 110px); min-height: 520px; overflow-y: auto; padding: 0 8px 12px 0; scrollbar-width: thin; scrollbar-color: #5a554a transparent; }
.card { background: var(--paper-2); color: var(--ink); margin: 0; padding: 12px 14px; box-shadow: 0 14px 30px -12px #000b, 0 1px 2px #0005; }
.card figcaption, .ex-head { font: 500 12px var(--sans); letter-spacing: 0.06em; color: var(--dim); display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.card figcaption span, .ex-head { font-weight: 600; color: var(--ink); letter-spacing: 0.14em; }
.card figcaption em { margin-left: auto; font-style: normal; color: var(--stamp); font-size: 11px; }
.board canvas { width: 100%; height: 300px; display: block; cursor: crosshair; }
.custody canvas { width: 100%; height: 150px; display: block; }
.card { flex: none; }

.clock { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); font: 11px var(--mono); }
.clock label { font: 600 11px var(--sans); letter-spacing: 0.14em; color: var(--stamp); }
.clock output { min-width: 7ch; text-align: right; font-weight: 700; }
.clock input[type=range] { -webkit-appearance: none; appearance: none; height: 18px; background: transparent; width: 100%; }
.clock input[type=range]::-webkit-slider-runnable-track { height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 8px), var(--rule); }
.clock input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 18px; margin-top: -8px; background: var(--stamp); border: 0; }
.clock input[type=range]::-moz-range-track { height: 2px; background: var(--rule); }
.clock input[type=range]::-moz-range-thumb { width: 10px; height: 18px; background: var(--stamp); border: 0; border-radius: 0; }
button.mini { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); border: 0; padding: 4px 9px; font: 600 10px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }

/* verdict + worksheet */
.verdict { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 16px; align-items: start; }
.stamp-slot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 6px; }
.worksheet { border-left: 1px solid var(--rule); padding-left: 14px; }
.ws-head { font: 600 11px var(--sans); letter-spacing: 0.14em; margin-bottom: 6px; }
.ws-line { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; gap: 6px; align-items: baseline; font: 11.5px/1.7 var(--mono); }
.ws-line span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-line i { border-bottom: 1px dotted var(--dim); transform: translateY(-3px); }
.ws-line b { min-width: 4ch; text-align: right; }
.ws-line.base { color: var(--dim); }
.ws-line.total { border-top: 1px solid var(--ink); margin-top: 4px; padding-top: 4px; font-weight: 700; }
.pos { color: var(--pos); }
.neg { color: var(--stamp); }

/* money trail ledger */
.trail-t { font: 12px var(--mono); }
.trail-empty { font: 12px var(--mono); color: var(--dim); margin: 6px 0; }
.tr { display: grid; grid-template-columns: 10px 9ch 15.5ch 8.5ch 5.5ch 5.5ch 6.5ch minmax(60px, 1fr); gap: 5px; white-space: nowrap; gap: 6px; align-items: center; height: 24px; border-top: 1px dashed var(--rule); cursor: pointer; padding-right: 4px; }
.tr.head { cursor: default; border-top: 0; height: 20px; font: 600 10px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.tr:not(.head):hover { background: #0000000a; }
.tr.sel { background: #a8281f14; box-shadow: inset 2px 0 0 var(--stamp); }
.tr .n { text-align: right; }
.tr .fu { overflow: hidden; white-space: nowrap; color: var(--dim); }
.tr .fu em { font-style: normal; color: var(--stamp); margin-left: 4px; font-size: 10px; }
.tr .r { color: var(--stamp); }
.tr .wa { overflow: hidden; }
.tr .wa b { color: var(--stamp); font-size: 10px; display: inline-block; min-width: 4.6ch; }
.tr .hb { display: grid; grid-template-columns: 1fr 6ch; gap: 6px; align-items: center; }
.tr .hb b { height: 8px; background: #0000000d; position: relative; }
.tr .hb i { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.tr .hb em { font: 11px var(--mono); font-style: normal; text-align: right; }
.brk { align-self: stretch; position: relative; }
.brk.b-top::after, .brk.b-mid::after, .brk.b-bot::after { content: ''; position: absolute; left: 3px; width: 6px; border-left: 1.5px solid var(--stamp); }
.brk.b-top::after { top: 50%; bottom: -1px; border-top: 1.5px solid var(--stamp); }
.brk.b-mid::after { top: -1px; bottom: -1px; }
.brk.b-bot::after { top: -1px; bottom: 50%; border-bottom: 1.5px solid var(--stamp); }
.chip { font: 600 9.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; font-style: normal; padding: 1px 6px; border: 1px solid currentColor; }
.chip.creator { color: #fff; background: var(--c-creator); border-color: var(--c-creator); }
.chip.bundle { color: #fff; background: var(--c-bundle); border-color: var(--c-bundle); }
.chip.sniper { color: var(--c-creator); background: var(--c-sniper); border-color: var(--c-sniper); }
.chip.linked { color: var(--c-creator); background: var(--c-linked); border-color: var(--c-linked); }
.chip.outside { color: var(--dim); }

/* dossier */
.dossier { margin-top: 12px; border: 1px solid var(--ink); padding: 10px 12px; background: var(--paper); font: 12px var(--mono); }
.dz-head { display: flex; align-items: center; gap: 10px; }
.dz-k { font: 600 11px var(--sans); letter-spacing: 0.14em; }
.dz-head a { color: var(--ink); }
.dz-x { margin-left: auto; background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--dim); }
.dz-fund { color: var(--dim); margin: 6px 0 8px; }
.dz-fund .r { color: var(--stamp); }
.dz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; font: 500 10px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.dz-grid span { display: block; font: 700 15px var(--mono); color: var(--ink); text-transform: none; letter-spacing: 0; }
.dz-tape { width: 100%; height: 64px; display: block; margin: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.dz-ask { background: var(--ink); color: var(--paper); border: 0; padding: 7px 12px; font: 600 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.exhibits li { cursor: pointer; }

.verdict { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 10px; }
.stamp-slot { display: grid; place-items: center; min-height: 104px; }
.stamp-wait { font: 12px var(--mono); color: var(--dim); border: 1px dashed var(--dim); padding: 10px 12px; }
.stamp:not([hidden]) + .stamp-wait { display: none; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 10px; width: 100%; }
.fact { text-align: center; font: 500 11px var(--sans); letter-spacing: 0.06em; color: var(--dim); text-transform: uppercase; }
.fact span { display: block; font: 700 17px var(--mono); color: var(--ink); text-transform: none; letter-spacing: 0; }
.fact:nth-child(2n) { border-left: 1px solid var(--rule); }

.exhibits { max-height: 230px; overflow: auto; }
.ex-head span { margin-left: auto; color: var(--dim); }
.exhibits ol { list-style: none; margin: 0; padding: 0; font: 12px/1.5 var(--mono); }
.exhibits li { display: grid; grid-template-columns: 4.5ch 11ch 1fr; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--rule); cursor: default; }
.exhibits li b { color: var(--stamp); }
.exhibits li a { color: var(--ink); }
.exhibits li span { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exhibits li.hot { background: #a8281f14; }

.stamp {
  transform: rotate(-6deg);
  color: var(--stamp); border: 3px double var(--stamp); padding: 6px 14px 8px; text-align: center;
  font-family: var(--mono); mix-blend-mode: multiply;
}
.stamp-k { font: 600 10px var(--sans); letter-spacing: 0.2em; }
.stamp-v { font: 700 26px var(--mono); letter-spacing: 0.06em; line-height: 1.1; }
.stamp-s { font-size: 11px; }
.stamp.pop { animation: pop 0.5s ease-out; }
@keyframes pop { 0% { transform: rotate(-6deg) scale(1.6); opacity: 0; } 70% { transform: rotate(-6deg) scale(0.96); opacity: 1; } 100% { transform: rotate(-6deg) scale(1); } }

.tools { display: flex; gap: 8px; flex-wrap: wrap; }
.tools button { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px #6c665a; }
.tools button:hover { box-shadow: inset 0 0 0 1px var(--paper); }
.fine { font-size: 11.5px; line-height: 1.55; color: #9a937f; margin: 0; max-width: 60ch; }

@media (max-width: 900px) {
  .bar { flex-wrap: wrap; padding: 10px 16px; }
  .docket { margin-left: 0; width: 100%; }
  .docket label { display: none; }
  .bar-title span { display: none; }
  .docket input { flex: 1; max-width: none; width: auto; }
  .room { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
  .sheet { height: 78vh; min-height: 460px; }
  .desk { height: auto; overflow: visible; padding: 0; }
  .verdict { grid-template-columns: 1fr; }
  .worksheet { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 10px; }
  .tr { grid-template-columns: 8px 12ch 8ch 1fr 1fr 1.2fr; }
  .tr > :nth-child(2), .tr.head > :nth-child(2), .tr > :nth-child(6), .tr.head > :nth-child(6) { display: none; }
  .board canvas { height: 260px; }
  .custody canvas { height: 200px; }
  .clock { grid-template-columns: auto 1fr auto; }
  .clock .mini { grid-row: 2; }
  .caption { margin: 18px 16px 0 44px; grid-template-columns: 1fr; }
  .cap-left { border-right: 0; border-bottom: 1px solid var(--ink); padding: 0 0 10px; }
  .cap-right { padding: 10px 0 12px; }
  .cap-token { font-size: 24px; }
  .gutter { width: 34px; padding-right: 6px; font-size: 10px; }
  .lines { margin-left: 44px; margin-right: 16px; font-size: 13.5px; }
  .cross { margin: 0 16px 14px 44px; }
  .stamp-v { font-size: 20px; }
}