:root {
    --ink: #1c1915;
    --paper: #efe6d4;
    --paper2: #e5d8c2;
    --bg: #0e0e0c;
    --bg-2: #14120e;
    --text: #efe6d4;
    --muted: #8a8174;
    --line: #2a261f;
    --up: #c6ff4a;
    --green: #1c6b2c;
    --acid: #c6ff4a;
    --red: #c4313e;
    --dim: #8a8174;
    --bezel: #100e0c;
    --chip: #14120e;
    --line: #2a261f;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--bezel); color: var(--ink); }
  body {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
  }
  #bezel {
    min-height: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding-top: var(--top-band, 0px);
    padding-bottom: var(--pad-space, 0px);
    background:
      radial-gradient(1200px 600px at 50% 40%, #1c1914 0%, #100e0c 70%);
  }
  #stage {
    position: relative;
    width: 960px;
    height: 544px;
    background: #0e1218;
    box-shadow: 0 0 0 2px #000;
    transform-origin: center center;
    visibility: hidden;
  }
  #stage.live { visibility: visible; }
  canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
  }
  #hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  #topbar {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    pointer-events: none;
  }
  #readout {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-width: 0;
    height: 36px;
    background: #0e0e0c;
    border-bottom: 2px solid #000;
  }
  #below {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
  }
  #below:not(:has(.chip:not([hidden]))) { display: none; }
  .chip {
    background: var(--chip);
    color: var(--paper);
    border: 2px solid #000;
    box-shadow: 0 3px 0 #000;
    padding: 6px 8px 5px;
    line-height: 1;
    pointer-events: none;
    max-width: 100%;
    min-width: 0;
  }
  #hpChip, #pkChip, #dayChip, #whereChip {
    position: static;
    flex: 1 1 0;
    align-self: stretch;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  #hpChip { display: flex; align-items: center; gap: 8px; min-height: 0; padding: 0 10px; }
  #readout .chip + .chip { border-left: 1px solid #2a261f; }
  #hpChip .unit {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--red);
  }
  #hpChip .bar { width: 72px; height: 8px; background: #2a201c; border: 1px solid #000; flex: 0 0 auto; }
  #hpChip .bar > i { display: block; height: 100%; background: var(--red); width: 100%; }
  #hpChip b {
    color: var(--paper);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  #pkChip {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 12px;
  }
  #pkChip .moneyrow { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  #pkChip .unit {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--dim);
  }
  #pkChip b {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--paper);
    white-space: nowrap;
  }
  #pkChip .moneyrow:first-child .unit,
  #pkChip .moneyrow:first-child b { color: var(--acid); }
  #whereChip {
    flex: 1.4 1 0;
    min-width: 0;
    min-height: 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #whereChip b {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  #starChip .k, #linkChip .k { color: var(--dim); font-size: 10px; letter-spacing: .12em; }
  #dayChip { text-align: right; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; gap: 1px; }
  #dayChip .sess { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; letter-spacing: .14em; font-size: 13px; white-space: nowrap; }
  #dayChip .meta { margin-top: 0; color: var(--dim); font-size: 11px; display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
  #dayChip .pips { letter-spacing: 2px; color: var(--paper); white-space: nowrap; }
  #hudBtns {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    border-left: 1px solid #2a261f;
    pointer-events: auto;
  }
  #hudBtns button {
    width: 40px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #efe6d4;
    box-shadow: none;
    display: grid;
    place-items: center;
  }
  #hudBtns button + button { border-left: 1px solid #2a261f; }
  #hudBtns #hudPhone { color: #c6ff4a; }
  #hudBtns svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  #hudBtns button:active { background: #2a261f; color: #c6ff4a; }
  #starChip, #objChip, #linkChip {
    position: static;
    max-width: min(100%, 280px);
  }
  #objChip {
    text-align: right;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.35;
  }
  #objChip .k { color: #5c564c; font-size: 10px; letter-spacing: .12em; }
  #objChip .v { font-size: 12px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
  #headChip {
    position: absolute;
    left: 12px;
    bottom: var(--hud-lift, 12px);
    max-width: min(260px, 28%);
    background: var(--paper);
    color: var(--ink);
    font-size: 13px;
    padding: 8px 12px;
    letter-spacing: 0;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
  }
  #headChip em { font-style: normal; color: var(--green); font-weight: 600; }
  #prompt {
    position: absolute; left: 50%; bottom: var(--hud-lift, 16px); transform: translateX(-50%);
    background: var(--paper); color: var(--ink);
    border: 2px solid #000; box-shadow: 0 3px 0 #000;
    padding: 7px 12px; font-size: 12px; font-weight: 600;
    pointer-events: none; white-space: normal; overflow-wrap: anywhere;
    max-width: min(340px, calc(100% - 24px));
    max-height: 4.8em; overflow: auto;
    text-align: center; line-height: 1.35; z-index: 3;
  }
  #prompt.aim { color: #5c564c; font-weight: 500; }
  #pips i, #dayChip .pips i { font-style: normal; color: var(--acid); letter-spacing: 0; }
  #prompt i {
    display: inline-block; border: 2px solid #000; padding: 0 5px; margin-right: 6px;
    font-style: normal; background: var(--ink); color: var(--paper); font-weight: 700;
  }
  #toast {
    position: absolute; top: auto; bottom: calc(var(--hud-lift, 16px) + 76px); left: 50%; transform: translateX(-50%);
    background: var(--paper); border: 2px solid #000; box-shadow: 0 3px 0 #000;
    padding: 6px 10px; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .2s;
    pointer-events: none; max-width: min(340px, calc(100% - 32px)); text-align: center; z-index: 9;
    overflow-wrap: anywhere;
  }
  #toast.on { opacity: 1; }
  #ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  #ui, #ui * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  #ui input, #ui textarea { user-select: text; -webkit-user-select: text; }
  #ui.on { pointer-events: auto; }
  .scrim { position: absolute; inset: 0; background: rgba(10,8,6,.46); }
  .paper {
    background: var(--paper);
    color: var(--ink);
    border: 2px solid #000;
    box-shadow: 0 6px 0 #000;
  }
  .card {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
    width: min(780px, calc(100% - 24px));
    max-height: calc(100% - 24px - var(--hud-lift, 0px));
    overflow: auto;
    padding: 18px;
    container-type: inline-size;
    container-name: panel;
  }
  .card.slim { width: min(460px, calc(100% - 24px)); padding: 16px; }
  h1, h2, h3 { font-family: Syne, sans-serif; margin: 0; letter-spacing: -0.03em; }
  h1 { font-size: 64px; line-height: .85; font-weight: 800; }
  h1.brand { font-size: 44px; letter-spacing: -0.045em; text-align: center; }
  h2 + .mini, h1 + .sub { display: block; }
  .sub { margin: 8px 0 0; font-size: 13px; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--dim); }
  .rule { height: 2px; background: #000; border: 0; margin: 14px 0; }
  p.lead { margin: 0 0 12px; font-size: 13px; }
  p.lead, .fine, .slip .body, #headChip, #toast {
    letter-spacing: 0;
    line-height: 1.45;
    word-spacing: normal;
    text-align-last: auto;
  }
  .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; min-width: 0; max-width: 100%; }
  .row > button, .row > .btn {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    min-width: min(100%, max-content);
    white-space: nowrap;
  }
  .row > input, .row > select, .row > textarea {
    flex: 1 1 8em;
    min-width: 0;
    width: auto;
    max-width: 100%;
  }
  button, .btn {
    font-family: Syne, sans-serif;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #f4efe4;
    color: var(--ink);
    border: 2px solid #000;
    box-shadow: 0 3px 0 #000, inset 0 1px 0 #fff;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.1;
  }
  button.primary { background: var(--acid); }
  button.danger { background: #f0c7c4; }
  button.leave { background: #efe6d4; letter-spacing: .08em; }
  button:disabled { opacity: .38; cursor: not-allowed; box-shadow: 0 0 0 #000; }
  button:active {
    transform: none;
    background: #e4dcc8;
    box-shadow: 0 0 0 #000, inset 0 2px 0 rgba(0, 0, 0, .22);
  }
  button.primary:active { background: #d4f56a; }
  @media (hover: hover) and (pointer: fine) {
    button:hover { transform: none; background: #fffaf0; box-shadow: 0 3px 0 #000, inset 0 1px 0 #fff; }
    button.primary:hover { background: #d4f56a; }
  }
  button.tiny { padding: 8px 12px; font-size: 14px; }
  input[type="text"], input[type="number"] {
    font-family: "IBM Plex Mono", monospace;
    border: 2px solid #000;
    color: var(--ink);
    padding: 8px 10px;
    font-size: 14px;
    width: 100%;
    min-height: 44px;
    background: #f4efe4;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .12);
  }
  label.field { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #5c564c; margin: 8px 0 4px; }
  .swatches { display: flex; flex-wrap: wrap; gap: 8px; }
  .swatch {
    width: 28px; height: 28px; border: 2px solid #000; cursor: pointer; box-shadow: 2px 2px 0 #000;
  }
  .swatch.on { outline: 3px solid #000; outline-offset: 2px; }
  .starts { display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px; }
  .start {
    display: block;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.35;
    background: #f7f1e4;
    box-shadow: none;
    white-space: normal;
  }
  .start b {
    display: block;
    font-family: Syne, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: none;
  }
  .start span { display: block; margin-top: 2px; color: var(--ink); }
  .start.on { background: var(--acid); }
  .start:hover, .start:active { box-shadow: none; }
  .card.scroll {
    top: 12px;
    transform: translateX(-50%);
    max-height: calc(100% - 24px - var(--hud-lift, 0px));
    overflow: auto;
  }
  .card.scroll .row:last-child {
    position: static;
    background: var(--paper);
    margin-top: 12px;
    padding-top: 8px;
  }
  .slip {
    width: min(520px, calc(100% - 40px));
    padding: 16px 16px 14px;
  }
  .slip .who { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #5c564c; }
  .slip .body { font-size: 15px; line-height: 1.45; margin: 8px 0 12px; }
  .slip.good { box-shadow: 0 6px 0 #000, inset 6px 0 0 var(--green); }
  .slip.bad { box-shadow: 0 6px 0 #000, inset 6px 0 0 var(--red); }
  .slip.ink { box-shadow: 0 6px 0 #000, inset 6px 0 0 #000; }
  .talk .who { font-family: Syne, sans-serif; font-size: 22px; letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px; }
  .dot { width: 14px; height: 14px; border: 2px solid #000; border-radius: 50%; display: inline-block; }
  .choices { display: flex; flex-direction: column; gap: 8px; }
  .choices button { width: 100%; text-align: left; text-transform: none; letter-spacing: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 13px; }
  .tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5em), 1fr));
    gap: 0;
    margin: 0 0 12px;
    border: 2px solid #000;
    background: var(--paper);
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-width: 0;
  }
  .tabs button {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 6px;
    border: 0;
    border-right: 2px solid #000;
    border-radius: 0;
    box-shadow: none;
    background: #f7f1e4;
    font-family: Syne, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .tabs button:last-child { border-right: 0; }
  .tabs button:hover,
  .tabs button:active { transform: none; box-shadow: none; }
  .tabs button.on { background: var(--acid); }
  .card.sheet {
    display: flex;
    flex-direction: column;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100% - 24px));
    max-height: calc(100% - 16px);
    padding: 14px 16px 12px;
    overflow: hidden;
  }
  .card.sheet.wide { width: min(860px, calc(100% - 24px)); }
  .card.sheet > h2 {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    min-width: 0;
    max-width: 100%;
    font-size: 26px;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }
  .sheetbody {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sheetbody > * { min-width: 0; max-width: 100%; }
  .sheetfoot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    background: var(--paper);
  }
  .sheetfoot > button,
  .sheetfoot .choices { width: 100%; }
  .sheetfoot .row { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .sheetfoot .row > button {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    min-width: min(100%, max-content);
    white-space: nowrap;
  }
  .card.sheet.slip.good { box-shadow: 0 6px 0 #000, inset 6px 0 0 var(--green); }
  .card.sheet.slip.bad { box-shadow: 0 6px 0 #000, inset 6px 0 0 var(--red); }
  .card.sheet.slip.ink { box-shadow: 0 6px 0 #000, inset 6px 0 0 #000; }
  .firms { border-top: 2px solid #000; margin-top: 0; }
  .townsplit { min-width: 0; }
  .townside { min-width: 0; }
  .townside > .mini, .blotter > .mini { display: block; margin: 0 0 6px; }
  .card.sheet.talk > h2 .dot { flex: 0 0 14px; }
  @container panel (min-width: 680px) {
    .townsplit {
      display: grid;
      grid-template-columns: minmax(210px, 0.82fr) minmax(0, 1.18fr);
      gap: 8px 22px;
      align-items: start;
    }
    .townside { position: sticky; top: 0; }
  }
  .firm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px 4px;
    min-height: 52px;
    border: 0;
    border-bottom: 1px solid #d9d0c0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: var(--ink);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 500;
    font-size: 13px;
  }
  .firm > span { flex: 1 1 8em; min-width: min(100%, 6em); }
  .firm b { display: block; font-size: 14px; }
  .firm span { min-width: 0; }
  .firm i { display: block; margin-top: 2px; font-style: normal; color: #5c564c; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; white-space: normal; }
  .firm .num { flex: 0 0 auto; font-size: 13px; white-space: nowrap; }
  .firm > b.num:first-of-type { margin-left: auto; }
  .firm:hover, .firm:active { transform: none; box-shadow: none; background: #f4efe4; }
  .firm.on, .firm.on:hover, .firm.on:active { background: var(--acid); }
  .firm.on i { color: #1c1915; }
  button.wipe { margin-top: 16px; }
  .apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: 8px; margin-top: 10px; }
  .apps button.appkey {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 10px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    background: #f4efe4;
    box-shadow: 0 3px 0 #000, inset 0 1px 0 #fff;
  }
  .apps button.appkey i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: #14120e;
    color: #c6ff4a;
    border: 2px solid #000;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0;
  }
  .apps button.appkey b {
    display: block;
    font-family: Syne, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .apps button.appkey small {
    display: inline-block;
    margin-top: 4px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0;
    color: #5c564c;
  }
  .apps button.appkey small.new {
    color: #1c1915;
    background: var(--acid);
    border: 1px solid #000;
    padding: 0 4px;
  }
  .apps button.appkey:active { background: #e4dcc8; box-shadow: 0 0 0 #000, inset 0 2px 0 rgba(0, 0, 0, .22); }
  .thread {
    width: 100%; min-height: 52px; margin: 0 0 8px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    text-align: left; text-transform: none; letter-spacing: 0;
    font-family: Syne, sans-serif; font-weight: 800;
    background: #f4efe4;
    box-shadow: inset 4px 0 0 #14120e;
  }
  .thread span {
    display: block; margin-top: 2px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 500; font-size: 11px; letter-spacing: 0; color: #5c564c;
  }
  .thread.on { box-shadow: inset 4px 0 0 #c6ff4a; }
  .thread:active { box-shadow: inset 4px 0 0 #c6ff4a; background: #e4dcc8; }
  .term {
    background: #14120e; color: #c6ff4a;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px; line-height: 1.45; padding: 10px;
    min-height: 96px; max-height: 140px; overflow: auto; white-space: pre-wrap; margin: 0 0 8px;
    border: 2px solid #000;
  }
  #ledger.sheet {
    width: min(860px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    overflow: hidden;
    padding: 16px;
    transform: translateX(-50%);
    top: 12px;
  }
  .booktop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; min-width: 0; }
  .booktop h2 { font-size: 28px; }
  .nets { display: flex; gap: 14px; font-size: 12px; }
  .nets b { display: block; font-size: 16px; }
  .nets .up { color: var(--green); }
  .nets .down { color: var(--red); }
  table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
  th { text-align: left; font-size: 10px; letter-spacing: .12em; color: #5c564c; font-weight: 500; padding: 4px; border-bottom: 2px solid #000; }
  td { padding: 5px 4px; border-bottom: 1px solid #d9d0c0; vertical-align: middle; }
  tr.sel td { background: #f7f1e4; }
  tr { cursor: pointer; }
  canvas.spark { width: 72px; height: 22px; image-rendering: pixelated; background: #17140f; }
  .trade {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 10px;
  }
  .blotter { font-size: 12px; line-height: 1.45; }
  .blotter .px { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: 22px; font-variant-numeric: tabular-nums; }
  .blotter canvas.spark { width: 100%; height: 36px; display: block; margin: 6px 0; image-rendering: pixelated; background: #17140f; }
  .sheetfoot .row input { flex: 1 1 auto; min-width: 0; width: auto; }
  .apps button.appkey span { min-width: 0; }
  .ghost {
    margin-top: 8px; padding: 8px; border: 2px solid #000; background: #f7f1e4; font-size: 12px;
    box-shadow: inset 4px 0 0 var(--acid);
  }
  .stamps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 6px;
    margin-top: 0;
  }
  .stamp {
    border: 2px solid #000;
    padding: 6px 4px;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    line-height: 1.25;
    opacity: .4;
    overflow-wrap: anywhere;
  }
  .stamp.on { opacity: 1; background: var(--ink); color: var(--paper); }
  .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
  .statline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    border-bottom: 1px solid #d9d0c0;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.35;
    min-width: 0;
    max-width: 100%;
  }
  .statline > span {
    flex: 1 1 8em;
    min-width: min(100%, 5em);
    overflow-wrap: anywhere;
  }
  .statline > b { flex: 0 0 auto; margin-left: auto; max-width: 100%; text-align: right; }
  .statline > b i, .shoprow > .num i, .listrow > .num i, .bookhead .mark i, .move b i, .hold-sub b i {
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .04em;
    color: #8a8174;
    margin-right: 4px;
  }
  .bookhead .mark i { font-size: 12px; }
  .shoprow, .listrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    border-bottom: 1px solid #d9d0c0;
    padding: 8px 0;
    font-size: 13px;
    line-height: 1.45;
    min-width: 0;
    max-width: 100%;
  }
  .shoprow > :first-child,
  .listrow > span {
    flex: 1 1 10em;
    min-width: min(100%, 8em);
    overflow-wrap: anywhere;
  }
  .shoprow > .num, .listrow > .num { flex: 0 0 auto; margin-left: auto; }
  .shoprow > button, .listrow > button { flex: 0 0 auto; max-width: 100%; }
  .sheetbody > .mini { display: block; margin: 14px 0 6px; }
  .sheetbody > .mini:first-child { margin-top: 0; }
  .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .num.up, .up { color: var(--green); }
  .num.down, .down { color: var(--red); }
  button.leave { display: block; width: 100%; }
  #duelPic { width: 100%; height: 168px; display: block; background: #14120e; border: 2px solid #000; margin: 0 0 10px; image-rendering: pixelated; }
  .duelstage { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .duelwho { flex: 1 1 140px; min-width: 0; }
  .duelwho .tick { height: 4px; background: #17140f; border: 1px solid #000; margin-top: 4px; }
  .duelwho .tick i { display: block; height: 100%; width: 100%; background: var(--acid); }
  .duelwho.foe .tick i { margin-left: auto; }
  .duelwho.hurt b { color: var(--red); }
  .barwrap { height: 22px; background: #17140f; border: 2px solid #000; position: relative; margin: 10px 0; }
  .zone { position: absolute; top: 0; bottom: 0; background: var(--acid); }
  .zone::after { content: ""; position: absolute; top: 0; bottom: 0; left: 28%; width: 44%; background: rgba(28, 25, 21, .28); }
  .needle { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #fff; border: 1px solid #000; }
  .needle.in { background: var(--acid); }
  .duel-acts button { flex: 1; min-height: 44px; }
  .duelstage > div:last-child, .foe { text-align: right; }
  .mini {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5c564c;
  }
  .closeX { position: absolute; top: 8px; right: 8px; }
  .fine { font-size: 11px; color: var(--dim); line-height: 1.45; }
  .copy {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0;
    overflow-wrap: break-word;
  }
  .copy + .copy { margin-top: 8px; }
  .copy.dim { color: #5c564c; font-size: 13px; }
  .sheetbody > .copy.dim { margin-bottom: 12px; }
  .block { margin: 0 0 10px; }
  .block:last-child { margin-bottom: 0; }
  .block > .mini { display: block; margin: 0 0 6px; }
  .blotter .block { margin-top: 12px; }
  .talk .copy { margin-top: 10px; }
  #preview { margin-top: 8px; }
  .report td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #linkChip { right: 12px; bottom: var(--hud-lift, 12px); text-align: right; }
  #linkChip .v { color: var(--paper); font-size: 13px; font-weight: 600; margin-top: 3px; }
  #starChip { top: 58px; left: 12px; }
  #starChip .v { color: var(--paper); font-size: 14px; letter-spacing: 2px; margin-top: 3px; }
  #chat {
    position: absolute; left: 50%; bottom: var(--hud-lift, 16px); transform: translateX(-50%);
    width: min(440px, 78%); z-index: 4; pointer-events: auto;
  }
  #chat input {
    width: 100%; background: #14120e; color: #efe6d4; border: 2px solid #efe6d4;
    font: 14px "IBM Plex Mono", ui-monospace, monospace; padding: 8px 10px; outline: none;
    min-height: 44px;
  }
  #err {
    position: fixed; left: 8px; bottom: 8px; color: #ffb4b4; font-size: 11px; z-index: 9; max-width: 70%;
  }
  #ui, .card, input, textarea, select { touch-action: auto; }
  #pad {
    display: none;
    position: fixed;
    z-index: 6;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px calc(10px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
    pointer-events: none;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
  }
  #pad .well {
    width: 108px; height: 108px; border-radius: 50%;
    border: 2px solid #000; background: rgba(20, 18, 14, .78);
    box-shadow: 0 3px 0 #000; position: relative;
    pointer-events: auto; touch-action: none; flex: 0 0 auto;
  }
  #pad .knob {
    position: absolute; left: 50%; top: 50%; width: 46px; height: 46px;
    margin: -23px 0 0 -23px; border-radius: 50%;
    background: var(--paper); border: 2px solid #000; pointer-events: none;
  }
  #pad .acts { display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
  #pad button {
    padding: 0; font-family: Syne, sans-serif; font-weight: 800;
    background: #f4efe4; color: var(--ink); border: 2px solid #000;
    box-shadow: 0 3px 0 #000, inset 0 1px 0 #fff;
    touch-action: none; user-select: none;
    pointer-events: auto;
  }
  #pad button:active { box-shadow: 0 0 0 #000, inset 0 2px 0 rgba(0, 0, 0, .25); background: #e4dcc8; }
  #pad .verb {
    width: 112px; min-height: 72px; height: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: var(--acid); line-height: 1.05; padding: 6px;
    box-shadow: 0 3px 0 #000, inset 0 4px 0 #14120e;
  }
  #pad .verb:active { background: #d4f56a; box-shadow: 0 0 0 #000, inset 0 4px 0 #14120e; }
  #pad .verb b { font-size: 16px; letter-spacing: .04em; }
  #pad .verb i { display: none; }
  #pad svg {
    width: 22px; height: 22px; display: block;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  #pad .verb svg, #pad .fist svg { width: 28px; height: 28px; }
  #pad .verb.off { background: #efe6d4; opacity: 1; color: #8a8174; box-shadow: 0 3px 0 #000, inset 0 4px 0 #cfc6b4; }
  #pad .fist {
    width: 72px; height: 72px; font-size: 13px;
    display: grid; place-items: center;
    background: #14120e; color: #efe6d4;
    box-shadow: 0 3px 0 #000, inset 0 4px 0 #c6ff4a;
  }
  #pad .fist:active { background: #1c1915; color: #c6ff4a; }
  #pad .pair {
    display: flex; gap: 0; padding: 3px;
    background: #14120e; border: 2px solid #000;
    box-shadow: 0 3px 0 #000;
  }
  #pad .say, #pad .menu, #pad .phone {
    height: 40px; width: 44px; min-width: 44px; padding: 0; font-size: 13px;
    display: grid; place-items: center;
    border: 0; box-shadow: none; background: transparent; color: #efe6d4;
  }
  #pad .map {
    height: 40px; width: 44px; min-width: 44px; padding: 0; font-size: 13px;
    display: grid; place-items: center;
    background: #f4efe4; color: #1c1915; border: 2px solid #000;
    box-shadow: 0 3px 0 #000, inset 0 1px 0 #fff;
  }
  #pad .phone { color: #c6ff4a; }
  #pad .say:active, #pad .menu:active, #pad .phone:active {
    background: #2a261f; box-shadow: none; color: #c6ff4a;
  }
  html.tight #pad .say, html.tight #pad .menu, html.tight #pad .map {
    position: fixed; top: calc(6px + env(safe-area-inset-top));
  }
  html.tight #pad .menu { right: calc(8px + env(safe-area-inset-right)); }
  html.tight #pad .say { right: calc(86px + env(safe-area-inset-right)); }
  html.tight #pad .phone {
    position: fixed; top: calc(6px + env(safe-area-inset-top));
    right: calc(164px + env(safe-area-inset-right));
  }
  html.tight #pad .pair {
    position: fixed; z-index: 6;
    top: calc(6px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    display: flex; gap: 0; pointer-events: none;
  }
  html.tight #pad .pair .say,
  html.tight #pad .pair .menu,
  html.tight #pad .pair .phone {
    position: static; top: auto; right: auto; left: auto;
  }
  html.phone.tight #pad .phone { position: static; top: auto; right: auto; }
  #pad .map { display: none; }
  html.phone #pad .map { display: grid; }
  html.tight.map-tuck #pad .map { left: calc(8px + env(safe-area-inset-left)); }
  #pad button[hidden] { display: none !important; }
  @media (pointer: coarse), (max-width: 800px) {
    #pad { display: flex; }
  }
  @media (max-height: 420px), (orientation: landscape) and (max-height: 500px) {
    #pad .well { width: 88px; height: 88px; }
    #pad .verb, #pad .fist { min-height: 56px; height: 56px; width: 96px; }
    #pad .fist { width: 64px; }
  }
  #pad[hidden] { display: none !important; }
  #stage { overflow: hidden; }
  .figures {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    min-width: 0;
    max-width: 100%;
  }
  .figures > div {
    flex: 1 1 148px;
    min-width: min(100%, max-content);
    max-width: 100%;
    border: 2px solid #000;
    padding: 6px 8px 8px;
  }
  .figures span { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
  .figures b {
    display: block;
    margin-top: 4px;
    font-size: clamp(14px, 4.2cqi, 18px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: left;
    letter-spacing: -0.03em;
  }
  .figures b i {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0;
    color: var(--dim);
    margin-right: 4px;
  }
  .hand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; min-width: 0; }
  .hand > :first-child { flex: 0 0 auto; }
  .handcards { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 120px; min-width: 0; }
  .pip {
    width: 40px; height: 52px; border: 2px solid #000; background: #f4efe4;
    box-shadow: 0 3px 0 #000; display: grid; place-items: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-style: normal; font-weight: 600; font-size: 16px; color: var(--ink);
  }
  .pip.hole { background: #14120e; color: transparent; box-shadow: 0 3px 0 #000, inset 0 0 0 6px #c6ff4a; }
  .bookhead { background: #14120e; color: #efe6d4; padding: 8px 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 12px; margin: 0 0 8px; min-width: 0; }
  .bookhead > div { min-width: 0; max-width: 100%; }
  .bookhead .mini { color: var(--dim); }
  .bookhead .mark { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: clamp(16px, 5cqi, 22px); font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; }
  .bookhead .mark span { color: var(--acid); }
  .bookhead .fine, .bookhead .copy { color: #cfc6b4; flex: 1 0 100%; max-width: none; text-align: left; line-height: 1.4; letter-spacing: 0; margin: 0; }
  .bookcols { margin-top: 8px; }
  .card:has(.closeX) { padding-top: 48px; }
  #ledger .closeX { z-index: 2; }
  .statline b, table td, table th { font-variant-numeric: tabular-nums; }
  table td:not(:first-child), table th:not(:first-child) { text-align: right; }
  .duelstage > div:last-child, .foe { text-align: right; }
  .choices button { width: 100%; }
  .trade .row { align-items: center; }
  .trade .row .qty { width: auto; flex: 1 1 72px; min-width: 0; max-width: 120px; }
  .trade .row button.tiny { min-width: min(100%, max-content); }
  .ghost button { margin-top: 8px; max-width: 100%; }
  .fine.floats { margin-top: 8px; }
  .bets > button { flex: 1 1 auto; min-width: min(100%, max-content); max-width: 100%; }
  @media (max-width: 720px) {
    h1 { font-size: 46px; }
    h1.brand { font-size: 34px; }
    button, .btn { min-height: 44px; }
    .swatch { width: 44px; height: 44px; }
    td { padding: 10px 4px; }
    .card, .card.slim, #ledger { width: calc(100% - 24px); }
  }
  html.tight #hpChip { top: 6px; left: 6px; min-width: 0; min-height: 28px; padding: 4px 6px; }
  html.tight #hpChip .bar { width: 52px; }
  html.tight #dayChip { top: 6px; right: 6px; min-width: 0; padding: 4px 6px; }
  html.tight #dayChip .meta { margin-top: 2px; font-size: 10px; }
  html.tight #pkChip { left: 6px; top: 40px; min-width: 0; padding: 4px 6px; }
  html.tight #whereChip {
    top: 40px; left: auto; right: 6px; transform: none;
    max-width: 46%; min-height: 28px; padding: 4px 6px;
  }
  html.tight #whereChip b {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 12px;
  }
  html.tight #starChip { top: 78px; left: 6px; padding: 3px 6px; }
  html.tight #objChip { top: 78px; right: 6px; max-width: 50%; padding: 3px 6px; }
  html.tight #toast { top: 46%; }
  html.tight #prompt { display: none; }
  html.tight #headChip { left: 6px; bottom: 6px; max-width: 46%; }
  html.tight #linkChip { right: 6px; bottom: 56px; max-width: 40%; }
  html.phone #bezel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  html.phone #stage { box-shadow: none; overflow: hidden; border-bottom: 2px solid #000; }
  html.phone::after {
    content: "";
    position: fixed;
    z-index: 4;
    left: 0;
    right: 0;
    top: calc(var(--top-band) + var(--stage-h));
    bottom: 0;
    background: #141210;
    pointer-events: none;
  }
  html.phone #topbar {
    position: static;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    max-width: none;
  }
  html.phone #hud {
    position: fixed;
    z-index: 5;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    inset: auto;
    left: 8px;
    right: 8px;
    top: calc(62px + env(safe-area-inset-top));
    bottom: auto;
  }
  html.phone #hud[hidden],
  html.phone #prompt[hidden],
  html.phone #chat[hidden] { display: none !important; }
  html.phone #readout {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: stretch;
    height: auto;
    min-width: 0;
    background: #14120e;
    border: 2px solid #000;
    box-shadow: 0 3px 0 #000;
  }
  html.phone #hud .chip {
    position: static;
    transform: none;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    max-width: none;
    min-width: 0;
    min-height: 0;
    width: auto;
    box-shadow: none;
  }
  html.phone #readout .chip {
    flex: 1 1 0;
    overflow: hidden;
    height: 44px;
    border: 0;
    background: transparent;
    padding: 0 8px;
    display: flex;
    align-items: center;
    margin-left: 0;
  }
  html.phone #readout .chip + .chip { border-left: 1px solid #2a261f; }
  html.phone #readout #pkChip {
    flex: 1.6 1 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
  html.phone #hpChip .bar { width: 36px; flex: 0 0 auto; }
  html.phone #pkChip .moneyrow { gap: 4px; }
  html.phone #pkChip .unit, html.phone #hpChip .unit { font-size: 9px; letter-spacing: .08em; }
  html.phone #pkChip b, html.phone #hpChip b {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.phone #readout #dayChip {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    text-align: right;
    margin-left: 0;
  }
  html.phone #dayChip .sess { font-size: 11px; letter-spacing: .08em; }
  html.phone #dayChip .meta { margin: 0; font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.phone #readout #whereChip {
    flex: 1 0 100%;
    order: 5;
    width: 100%;
    height: 26px;
    min-width: 0;
    max-width: none;
    padding: 0 8px;
    border: 0;
    border-top: 1px solid #2a261f;
    background: transparent;
    justify-content: flex-start;
    margin-left: 0;
  }
  html.phone #whereChip b {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: 12px;
  }
  html.phone #below,
  html.phone #hud #headChip { display: none; }
  html.phone #prompt {
    display: block;
    position: fixed;
    left: 16px;
    right: 16px;
    top: calc(var(--top-band) + var(--stage-h) + 8px);
    bottom: auto;
    transform: none;
    max-width: none;
    max-height: 64px;
    overflow: auto;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    z-index: 6;
  }
  html.phone #toast {
    position: fixed;
    top: calc(var(--top-band) + 8px);
    bottom: auto;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    height: auto;
    transform: none;
    text-align: center;
    letter-spacing: 0;
    word-spacing: normal;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    z-index: 6;
  }
  html.phone #chat {
    position: fixed;
    left: 8px;
    right: 8px;
    top: calc(var(--top-band) + var(--stage-h) + 8px);
    bottom: auto;
    width: auto;
    transform: none;
    z-index: 8;
  }
  html.phone #pad .pair {
    position: fixed;
    z-index: 6;
    top: calc(8px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    display: flex;
    gap: 0;
    pointer-events: none;
  }
  html.phone #pad .map {
    position: fixed;
    z-index: 6;
    top: calc(8px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    right: auto;
    min-width: 44px;
  }
  html.phone.tight #pad .say,
  html.phone.tight #pad .menu {
    position: static;
    top: auto;
    right: auto;
    left: auto;
  }
  html.phone #pad .verb.off { opacity: 1; }
  html.phone #pad .well { width: 96px; height: 96px; }
  html.phone #pad .verb { width: 112px; min-height: 64px; }
  html.phone #pad .fist { width: 64px; height: 64px; }
  html.narrow #ui.on {
    position: fixed;
    inset: 0;
    z-index: 8;
    overflow: hidden;
  }
  html.narrow #ui.on .card,
  html.narrow #ui.on #ledger {
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100% - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    top: calc(8px + env(safe-area-inset-top));
    transform: translateX(-50%);
    overflow: auto;
  }
  html.narrow .statline > span,
  html.narrow .listrow > span,
  html.narrow .shoprow > div:first-child {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    min-width: min(100%, 8em);
  }
  html.narrow #ui.on #ledger.sheet,
  html.narrow #ui.on .card.sheet {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 24px));
  }
  html.narrow #ui.on .card.sheet.wide,
  html.narrow #ui.on #ledger.sheet { width: min(860px, calc(100vw - 24px)); }
  html.narrow .listrow > span,
  html.narrow .statline > span {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
  }
  html.narrow .listrow > button,
  html.narrow .shoprow > button { width: auto; max-width: 100%; min-width: min(100%, max-content); }
  html.narrow .num { white-space: nowrap; }
  html.narrow .figures b { white-space: nowrap; }
  html.narrow input, html.narrow textarea { font-size: 16px; }
  html.narrow button, html.narrow .btn { min-height: 44px; }
  @media (pointer: coarse) {
    .swatch { width: 44px; height: 44px; }
    td { padding: 10px 4px; }
  }
  .os {
    position: absolute;
    inset: 8px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: #efe6d4;
    background:
      radial-gradient(520px 280px at 12% 0%, #243228 0%, transparent 60%),
      linear-gradient(180deg, #1a2218 0%, #10120e 100%);
    border: 2px solid #000;
    box-shadow: 0 6px 0 #000;
    container-type: inline-size;
    container-name: os;
  }
  .os-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    min-width: 0;
    padding: 0 8px;
    background: #0e0e0c;
    border-bottom: 2px solid #000;
  }
  .os-mark {
    flex: 0 0 auto;
    font-family: Syne, sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.04em;
  }
  .os-mid {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #cfc6b4;
  }
  .os-cash {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: #c6ff4a;
  }
  .os-cash i { font-style: normal; color: #8a8174; margin-right: 4px; font-size: 10px; }
  .os button.os-leave,
  .os button.os-x,
  .os button.os-back {
    min-height: 28px;
    height: 28px;
    padding: 0 8px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
  }
  .os button.os-leave {
    flex: 0 0 auto;
    background: #1c1915;
    color: #efe6d4;
    box-shadow: none;
  }
  .os button.os-leave:hover,
  .os button.os-leave:active { background: #2a261f; color: #c6ff4a; box-shadow: none; }
  .os-desk {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    background-image: radial-gradient(rgba(239, 230, 212, .14) 1px, transparent 1px);
    background-size: 18px 18px;
  }
  .os-icons {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }
  .os button.os-icon,
  .os button.os-dockbtn {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 1.1;
  }
  .os button.os-icon {
    width: 76px;
    min-height: 0;
    padding: 2px;
    background: transparent;
    color: #efe6d4;
    border: 0;
    box-shadow: none;
  }
  .os button.os-icon:hover,
  .os button.os-icon:active { background: transparent; box-shadow: none; }
  .os-icon i, .os-dockbtn i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border-radius: 12px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 46%),
      var(--tint, #14120e);
    color: #14120e;
    border: 2px solid #000;
    box-shadow: 0 3px 0 #000;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
  }
  .os-icon i svg, .os-dockbtn i svg { width: 22px; height: 22px; display: block; }
  .os-icon.on i, .os-dockbtn.on i { color: #14120e; box-shadow: 0 0 0 2px #fff, 0 3px 0 #000; }
  .os-icon b {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: #efe6d4;
    text-shadow: 0 1px 0 #000;
    overflow-wrap: anywhere;
  }
  .os-widget {
    position: absolute;
    top: 14px;
    right: 16px;
    text-align: left;
    pointer-events: none;
    color: #efe6d4;
    min-width: 220px;
    padding: 12px 14px 10px;
    background: rgba(14, 14, 12, .78);
    border: 2px solid #000;
  }
  .os-widget b {
    display: block;
    font-family: Syne, sans-serif;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: .85;
  }
  .os-widget span { display: block; margin-top: 4px; font-size: 12px; color: #cfc6b4; }
  .os-desk:has(.os-win) .os-widget { display: none; }
  .os-win {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 96px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid #000;
    box-shadow: 0 6px 0 #000;
    overflow: hidden;
  }
  .os-win.os-drag { right: auto; bottom: auto; }
  .os-winbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 6px;
    background: #14120e;
    color: #efe6d4;
    cursor: grab;
    touch-action: none;
  }
  .os-winbar b {
    min-width: 0;
    text-align: center;
    font-family: Syne, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .os button.os-x {
    width: 28px;
    padding: 0;
    background: #c4313e;
    color: #fff;
    border-color: #000;
    box-shadow: none;
  }
  .os button.os-x:hover, .os button.os-x:active { background: #a12832; color: #fff; box-shadow: none; }
  .os button.os-back { background: #efe6d4; color: #1c1915; box-shadow: none; }
  .os button.os-back:hover, .os button.os-back:active { background: #fffaf0; box-shadow: none; }
  span.os-back { display: block; width: 36px; }
  .os-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    padding: 8px 10px;
    background: var(--paper);
    color: var(--ink);
    container-type: inline-size;
    container-name: win;
  }
  .os-body:has(.os-split),
  .os-win.termwin .os-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
  .os-split {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(140px, 0.85fr) minmax(0, 1.2fr);
  }
  .os-side, .os-main { min-width: 0; min-height: 0; overflow: auto; }
  .os-side { background: #f4efe4; border-right: 2px solid #000; }
  .os-side .thread {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #d9d0c0;
    box-shadow: none;
  }
  .os-side .thread.on { box-shadow: inset 4px 0 0 #c6ff4a; }
  .os-side .thread .who {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
  }
  .os-side .thread .who > span {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .os-main { padding: 12px; }
  .os-win.termwin { background: #10140e; }
  .os-win.termwin .os-body { background: #10140e; color: #c6ff4a; }
  .os-win.termwin .term {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .os-winfoot {
    flex: 0 0 auto;
    background: #10140e;
    border-top: 2px solid #000;
    color: #c6ff4a;
  }
  .os-hint {
    margin: 0;
    padding: 6px 8px 0;
    font-size: 11px;
    line-height: 1.35;
    color: #8a9a78;
  }
  .os-cmd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 8px;
  }
  .os-cmd span { flex: 0 0 auto; font-size: 12px; color: #c6ff4a; white-space: nowrap; }
  .os-cmd input {
    flex: 1 1 120px;
    min-width: 0;
    width: auto;
    background: #10140e;
    color: #c6ff4a;
    border-color: #314028;
  }
  .os-cmd button { flex: 0 0 auto; min-width: min(100%, max-content); }
  .os-dock {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: rgba(0, 0, 0, .55);
    border-top: 2px solid #000;
  }
  .os button.os-dockbtn {
    position: relative;
    width: 56px;
    min-height: 48px;
    padding: 4px 4px 8px;
    background: transparent;
    color: #efe6d4;
    border: 0;
    box-shadow: none;
  }
  .os button.os-dockbtn:hover,
  .os button.os-dockbtn:active { background: transparent; box-shadow: none; }
  .os-dockbtn.on::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 5px;
    height: 5px;
    margin-left: -2px;
    background: #c6ff4a;
    border-radius: 50%;
  }
  @container os (max-width: 560px) {
    .os-desk:not(:has(.os-win)) {
      display: flex;
      flex-direction: column;
    }
    .os-desk:not(:has(.os-win)) .os-icons {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      justify-items: center;
      width: 100%;
      padding: 8px 10px 12px;
    }
    .os-desk:has(.os-win) .os-icons { display: none; }
    .os-widget { position: static; text-align: left; min-width: 0; max-width: 100%; padding: 12px 14px; }
    .os-widget b { font-size: 32px; }
    .os-win { left: 0; right: 0; top: 0; bottom: 0; box-shadow: none; }
  }
  @container win (max-width: 460px) {
    .os-split { grid-template-columns: 1fr; }
    .os-split.has-id .os-side { display: none; }
    .os-split:not(.has-id) .os-main { display: none; }
    .os-side { border-right: 0; }
  }
  html.narrow #ui.on .os {
    inset: 0;
    border: 0;
    box-shadow: none;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .skills { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; min-width: 0; }
  .skill {
    display: grid;
    grid-template-columns: 72px 32px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
  }
  .skill span {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dim);
    white-space: nowrap;
  }
  .skill b {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    line-height: 1;
  }
  .skill i {
    display: block;
    height: 8px;
    background: #e4dccb;
    border: 1px solid #000;
    min-width: 0;
  }
  .skill i em { display: block; height: 100%; width: 0; background: #1c1915; }
  .os-widget .skills { margin-top: 12px; min-width: 200px; text-align: left; }
  .os-widget .skill span { display: block; margin: 0; font-size: 10px; color: #cfc6b4; }
  .os-widget .skill b {
    display: block;
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    color: #efe6d4;
  }
  .os-widget .skill i { background: rgba(0, 0, 0, .45); }
  .os-widget .skill i em { background: #c6ff4a; }
  .drill .row { flex-wrap: wrap; }
  .drill .row button { flex: 1 1 72px; min-width: min(100%, max-content); }
  .thread b {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 800;
  }
  .thread em.pill {
    flex: 0 0 auto;
    font-style: normal;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid #000;
    padding: 1px 5px;
    background: #efe6d4;
  }
  .thread em.pill.on { background: #c6ff4a; }
  .thread-view { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 8px; }
  .bubble {
    align-self: flex-start;
    max-width: min(100%, 340px);
    padding: 8px 10px;
    background: #f4efe4;
    border: 2px solid #000;
  }
  .bubble.me { align-self: flex-end; background: #e7f6c4; }
  .bubble p { margin: 0; font-size: 13px; line-height: 1.4; }
  .bubble i {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5c564c;
  }
  .letter {
    border: 2px solid #000;
    background: #fffaf0;
    padding: 12px;
  }
  .letter-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding-right: 48px;
    font-size: 11px;
    color: #5c564c;
  }
  .letter h3 { margin: 8px 0; font-size: 20px; line-height: 1.1; }
  .balcard {
    margin-bottom: 8px;
    padding: 12px;
    background: #14120e;
    color: #efe6d4;
    border: 2px solid #000;
  }
  .balcard > span {
    display: block;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #cfc6b4;
  }
  .balcard > b {
    display: block;
    margin-top: 4px;
    font-family: Syne, sans-serif;
    font-size: 28px;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .balcard > b i { font-style: normal; font-size: 12px; color: #8a8174; margin-right: 4px; }
  .balcard > i {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: 11px;
    color: #cfc6b4;
  }
  .move {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #e4dccb;
  }
  .move span { min-width: 0; overflow-wrap: anywhere; }
  .move b { white-space: nowrap; }
  .hold {
    margin-bottom: 8px;
    padding: 10px;
    border: 2px solid #000;
    background: #fffaf0;
  }
  .hold-top, .hold-sub { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  .hold-top span, .hold-sub span { color: #5c564c; font-size: 12px; }
  .hold .px { font-family: Syne, sans-serif; font-size: 26px; letter-spacing: -0.03em; line-height: 1; margin: 4px 0; }
  .hold canvas.spark { width: 100%; height: 36px; display: block; margin-top: 6px; }
  .lockapp { display: flex; flex-direction: column; gap: 8px; }
  .lock-top { display: flex; gap: 8px; }
  .lock-top > div {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px;
    border: 2px solid #314028;
    background: #10140e;
    color: #c6ff4a;
  }
  .lock-top span { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8a9a78; }
  .lock-top b {
    display: block;
    margin-top: 2px;
    font-family: Syne, sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #c6ff4a;
  }
  .lock-bar { height: 8px; border: 2px solid #314028; background: #10140e; }
  .lock-bar i { display: block; height: 100%; background: #c6ff4a; }
  .lockface { padding: 12px; background: #14120e; color: #c6ff4a; border: 2px solid #000; }
  .lockface .mini { color: #8a9a78; }
  .lockface p { margin: 6px 0 10px; font-family: Syne, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #efe6d4; }
  .lock-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .os-win.app-hack .os-body .lock-top > div {
    background: #0c100a;
    border-color: #3d5230;
    color: #d6ff6a;
  }
  .os-win.app-hack .os-body .lock-top span { color: #9aaf86; }
  .os-win.app-hack .os-body .lock-top b { color: #d6ff6a; }
  .os-win.app-hack .os-body .lock-bar { background: #0c100a; border-color: #3d5230; }
  .os-win.app-hack .os-body .lock-bar i { background: #d6ff6a; }
  .os-win.app-hack .os-body .lockface { background: #141810; border-color: #3d5230; }
  .os-win.app-hack .os-body .lockface p { color: #f6f1e6; font-size: 28px; margin: 0 0 12px; }
  .os button.lock-key {
    flex: 1 1 72px;
    min-height: 64px;
    background: #0c100a;
    color: #d6ff6a;
    border-color: #3d5230;
    box-shadow: none;
    font-size: 22px;
  }
  .os button.lock-key:hover, .os button.lock-key:active { background: #1c2814; color: #c6ff4a; box-shadow: none; }
  .face {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 2px solid #000;
    border-radius: 50%;
    background: var(--face, #d9d3c5);
    color: #14120e;
    font-family: Syne, sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    text-transform: none;
  }
  .chat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
  }
  .chat-head b { display: block; font-size: 16px; line-height: 1.1; }
  .chat-head i {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 11px;
    color: #5c564c;
  }
  .os-win.app-texts .os-main { background: #e7f0e4; }
  .os-win.app-texts .bubble { background: #fffaf0; }
  .pin-card {
    border: 2px solid #000;
    background: #fffaf0;
    padding: 12px;
  }
  .pin-card b { display: block; margin: 4px 0; font-size: 22px; line-height: 1.1; }
  .letter { position: relative; }
  .seal {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid #a12832;
    border-radius: 50%;
    color: #a12832;
    font-family: Syne, sans-serif;
    font-size: 11px;
    font-weight: 800;
    transform: rotate(-8deg);
    background: rgba(255, 250, 240, .9);
  }
  .letter h3 { padding-right: 48px; }
  .letter p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
  .letter .sign { margin: 12px 0 0; font-family: Syne, sans-serif; font-weight: 800; }
  .plastic {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 148px;
    margin-bottom: 10px;
    padding: 14px;
    color: #efe6d4;
    background: linear-gradient(145deg, #3a342c 0%, #14120e 48%, #2a2618 100%);
    border: 2px solid #000;
    box-shadow: 0 4px 0 #000;
  }
  .plastic-top, .plastic-bot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #cfc6b4;
  }
  .chip {
    width: 34px;
    height: 26px;
    border: 2px solid #c6a15a;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg, #e6c27a 0 4px, #b8893a 4px 7px);
  }
  .plastic > b {
    font-family: Syne, sans-serif;
    font-size: 28px;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .plastic > b i { font-style: normal; font-size: 12px; color: #8a8174; margin-right: 4px; }
  .move i {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: #cfc6b4;
  }
  .move i.up { background: #1f6b4a; }
  .move i.down { background: #c4313e; }
  .quote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px auto;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #e4dccb;
  }
  .quote-id { min-width: 0; }
  .quote-id b { display: block; font-size: 14px; line-height: 1.1; }
  .quote-id span, .quote-px span {
    display: block;
    color: #5c564c;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .quote canvas.spark { width: 88px; height: 32px; display: block; }
  .quote-px { text-align: right; }
  .quote-px b {
    display: block;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    white-space: nowrap;
  }
  .os-win.app-hack .os-body { background: #10140e; color: #efe6d4; }
  .os-win.app-hack .copy, .os-win.app-hack .copy.dim { color: #cfc6b4; }
  .lock-ico {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    color: #c6ff4a;
  }
  .lock-ico svg { width: 28px; height: 28px; display: block; }
  .os button.lock-key { text-transform: none; }
  .os button.lock-key b { font-size: 28px; font-weight: 800; letter-spacing: 0; color: #d6ff6a; }
  @container win (max-width: 460px) {
    .quote { grid-template-columns: minmax(0, 1fr) auto; }
    .quote canvas.spark { display: none; }
  }

  .bookos {
    position: absolute;
    inset: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    height: auto;
    z-index: 4;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: #efe6d4;
    background: #0e0e0c;
    border: 2px solid #000;
    box-shadow: 0 6px 0 #000;
  }
  .bookos .os-bar { background: #0e0e0c; }
  .bookos button.os-leave {
    flex: 0 0 auto;
    min-height: 28px;
    height: 28px;
    padding: 0 8px;
    background: #1c1915;
    color: #efe6d4;
    box-shadow: none;
    text-transform: none;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
  }
  .booktabs {
    display: flex;
    flex: 0 0 auto;
    background: #0e0e0c;
    border-bottom: 2px solid #000;
  }
  .booktabs button {
    flex: 1;
    min-height: 32px;
    background: transparent;
    color: #8a9a78;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .booktabs button.on { color: #c6ff4a; background: #141a12; }
  .bookos .bookwin {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #10140e;
  }
  .bookos .sheetbody {
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 12px 14px;
    color: #efe6d4;
  }
  .bookos .sheetfoot { background: #0e0e0c; padding: 8px 12px 12px; }
  .bookos .sheetfoot button { width: 100%; }
  .bookos .sheetfoot .row { width: 100%; }
  .bookos .sheetfoot .row button { width: auto; }
  .bookos .sheetbody button,
  .bookos .sheetfoot button {
    background: #14120e;
    color: #efe6d4;
    border: 2px solid #000;
    box-shadow: none;
    text-transform: none;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 600;
    letter-spacing: 0;
  }
  .bookos button.primary {
    background: #c6ff4a;
    color: #0e0e0c;
  }
  .bookos .statline { border-bottom-color: #1e2a1c; color: #efe6d4; }
  .bookos .copy, .bookos .fine, .bookos .mini { color: #cfc6b4; }
  .bookos .copy.dim, .bookos label.field { color: #8a9a78; }
  .bookos .hours {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a261f;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .bookos .hours span { color: #8a9a78; }
  .bookos .hours b { color: #c6ff4a; font-weight: 600; }
  .bookos .hours b.off { color: #ff6b6b; }
  .bookos .figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
  }
  .bookos .figures > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    height: auto;
    overflow: visible;
    padding: 8px 10px 10px;
    background: #14120e;
    border: 1px solid #2a261f;
  }
  .bookos .figures span {
    display: block;
    height: auto;
    margin: 0 0 6px;
    overflow: visible;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a9a78;
  }
  .bookos .figures b {
    display: block;
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
  }
  .bookos input[type="text"],
  .bookos input[type="number"] {
    background: #14120e;
    color: #efe6d4;
    border: 1px solid #2a261f;
    box-shadow: none;
    min-height: 40px;
    margin-top: 4px;
  }
  .bookos .acts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
  }
  .bookos .acts button {
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 8px 6px;
    white-space: normal;
    line-height: 1.2;
  }
  .bookos input[type="number"]::-webkit-outer-spin-button,
  .bookos input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .bookos input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
  .bookos .fills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
  }
  .bookos .fills button {
    min-height: 32px;
    margin: 0;
    padding: 6px 8px;
    background: transparent;
    color: #8a9a78;
    border: 1px solid #2a261f;
    box-shadow: none;
    font-size: 12px;
  }
  .bookos .fills button:hover,
  .bookos .fills button:active { background: transparent; color: #c6ff4a; box-shadow: none; }
  .bookos .fine { display: block; margin: 8px 0 0; font-size: 12px; }
  .bookos .listrow { border-bottom-color: #2a261f; }
  .bookos .listrow .fine { margin: 2px 0 0; color: #8a9a78; }
  .bookos .block { margin-top: 14px; }
  html.narrow #ui.on .bookos {
    inset: auto;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    height: auto;
    border: 2px solid #000;
    box-shadow: 0 6px 0 #000;
    padding: 0;
  }
  .phone-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 14px; }
  .phone-tabs {
    display: flex;
    flex: 0 0 auto;
    border-top: 2px solid #000;
    background: #0e0e0c;
  }
  .phone-tabs button {
    flex: 1;
    min-height: 36px;
    background: transparent;
    color: #8a9a78;
    border: 0;
    box-shadow: none;
  }
  .phone-tabs button.on { color: #c6ff4a; }
  .scrim.soft { background: rgba(0, 0, 0, .4); }
  .receipt {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: min(360px, calc(100% - 32px));
    background: #0e0e0c;
    color: #efe6d4;
    border: 2px solid #000;
    box-shadow: 0 6px 0 #000;
    padding: 16px 16px 12px;
    z-index: 5;
    animation: receiptIn .08s ease .12s both;
  }
  @keyframes receiptIn {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
  .receipt h2 {
    font-family: Syne, sans-serif;
    font-size: 28px;
    line-height: 1.05;
    margin: 0;
    color: #efe6d4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .receipt h2.long {
    white-space: normal;
    font-size: 20px;
    line-height: 1.15;
  }
  .receipt h2.up { color: #c6ff4a; }
  .receipt h2.down { color: #ff6b6b; }
  .receipt .sub {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 6px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    color: #efe6d4;
  }
  .receipt .sub i { font-style: normal; color: #8a9a78; }
  .receipt p { margin: 8px 0 0; font-size: 14px; line-height: 1.35; color: #efe6d4; }
  .receipt .next {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #1e2a1c;
    color: #8a9a78;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.35;
  }
  .receipt .next b { flex: 0 0 auto; font-weight: 600; color: #8a9a78; }
  .receipt .next span { min-width: 0; }
  .receipt .rank { margin-top: 8px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: #efe6d4; }
  .receipt .rank em { display: block; height: 3px; margin-top: 4px; background: #1e2a1c; }
  .receipt .rank em i { display: block; height: 100%; background: #c6ff4a; }
  .receipt .rows { margin-top: 8px; }
  .receipt .statline {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #1e2a1c;
    color: #efe6d4;
    padding: 4px 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
  }
  .receipt button {
    margin-top: 12px;
    width: 100%;
    min-height: 36px;
    background: #c6ff4a;
    color: #14120e;
    border: 2px solid #000;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
  }
  .receipt .row { margin-top: 12px; flex-direction: column; gap: 6px; }
  .receipt .row button { margin-top: 0; width: 100%; text-align: left; white-space: normal; }
  .receipt .row button:not(.primary) { background: #14120e; color: #efe6d4; }
  .receipt.talk { padding: 14px 14px 10px; }
  .receipt.talk .who {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a9a78;
  }
  .receipt.talk .who i { width: 8px; height: 8px; flex: 0 0 8px; }
  .receipt.talk .bubble {
    margin-top: 10px;
    padding: 10px 12px;
    background: #161814;
    border: 1px solid #1e2a1c;
  }
  .receipt.talk .bubble p {
    margin: 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    overflow-wrap: break-word;
    color: #efe6d4;
  }
  .receipt.talk .you {
    margin: 12px 0 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a9a78;
  }
  .receipt.talk .replies { margin-top: 4px; }
  .receipt.talk .replies button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 9px 2px;
    background: transparent;
    color: #efe6d4;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .receipt.talk .replies button.out { color: #8a9a78; }
  .receipt.talk .replies button:hover,
  .receipt.talk .replies button:active {
    background: transparent;
    color: #c6ff4a;
    box-shadow: none;
    transform: none;
  }
  .receipt.talk > button {
    margin-top: 14px;
    box-sizing: border-box;
    white-space: normal;
  }
  #gymset, #jobrail {
    position: absolute;
    left: 50%;
    bottom: calc(var(--hud-lift, 16px) + 28px);
    transform: translateX(-50%);
    width: min(280px, calc(100% - 32px));
    height: 14px;
    display: flex;
    gap: 3px;
    z-index: 4;
    pointer-events: auto;
    background: #0e0e0c;
    border: 2px solid #000;
    box-sizing: border-box;
  }
  #gymset span, #jobrail span { position: relative; flex: 1; background: #1e2a1c; overflow: hidden; }
  #gymset span.on, #jobrail span.on { background: #c6ff4a; }
  #gymset span.bad, #jobrail span.bad { background: #ff6b6b; }
  #gymset span b, #jobrail span b { position: absolute; top: 0; bottom: 0; background: rgba(198, 255, 74, .7); }
  #gymset span i, #jobrail span i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #efe6d4; }

  /* Shared panels. Same tokens as the header and the phone. No paper. */
  #ui .paper {
    background: #0e0e0c;
    color: #efe6d4;
    border: 2px solid #000;
    box-shadow: 0 6px 0 #000;
  }
  #ui .paper .sub,
  #ui .paper .mini,
  #ui .paper .fine,
  #ui .paper .copy.dim,
  #ui .paper label.field,
  #ui .paper .firm i { color: #8a8174; }
  #ui .paper .copy { color: #efe6d4; }
  #ui .card.scroll .row:last-child { background: transparent; }
  #ui .paper button {
    background: #14120e;
    color: #efe6d4;
    border: 2px solid #000;
    box-shadow: none;
  }
  #ui .paper button.primary {
    background: #c6ff4a;
    color: #0e0e0c;
  }
  #ui .paper button.danger {
    background: #14120e;
    color: #ff6b6b;
  }
  #ui .paper button:hover,
  #ui .paper button:active { background: #1c1915; color: #efe6d4; box-shadow: none; }
  #ui .paper button.primary:hover,
  #ui .paper button.primary:active { background: #d4f56a; color: #0e0e0c; }
  #ui .paper button:disabled { background: #14120e; color: #5c564c; opacity: 1; }
  #ui .paper input[type="text"],
  #ui .paper input[type="number"] {
    background: #14120e;
    color: #efe6d4;
    border-color: #2a261f;
    box-shadow: none;
  }
  #ui .paper .tabs { background: #0e0e0c; border-color: #000; }
  #ui .paper .tabs button {
    background: transparent;
    color: #8a8174;
    border-right-color: #2a261f;
  }
  #ui .paper .tabs button.on { background: #141a12; color: #c6ff4a; }
  #ui .paper .start { background: #14120e; color: #efe6d4; }
  #ui .paper .start span { color: #8a8174; }
  #ui .paper .start.on { background: #c6ff4a; color: #0e0e0c; }
  #ui .paper .start.on span { color: #0e0e0c; }
  .bookos .sheetbody .start {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 12px;
    overflow: visible;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
    text-transform: none;
  }
  .bookos .sheetbody .start b,
  .bookos .sheetbody .start span {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
  }
  .bookos .sheetbody .start span { color: #d4cbb8; font-size: 12px; font-weight: 500; margin-top: 4px; line-height: 1.35; }
  .bookos .sheetbody .start.on { background: #c6ff4a; color: #0e0e0c; }
  .bookos .sheetbody .start.on span { color: #1c1915; }
  #ui .paper .figures > div,
  #ui .paper .hold { background: #14120e; border-color: #000; }
  #ui .paper .statline,
  #ui .paper .listrow,
  #ui .paper .shoprow,
  #ui .paper .firm,
  #ui .paper .move { border-bottom-color: #2a261f; color: #efe6d4; }
  #ui .paper .firm.on { background: #141a12; color: #c6ff4a; }
  #prompt, #toast, #headChip {
    background: #0e0e0c;
    color: #efe6d4;
  }
  #prompt i { background: #c6ff4a; color: #0e0e0c; border-color: #000; }

  /* Computer windows. Same tokens. The desktop chrome stays. */
  .os-win:not(.termwin),
  .os-win:not(.termwin) .os-body {
    background: var(--bg);
    color: var(--text);
  }
  .os-side { background: var(--bg-2); }
  .os-side .thread,
  .os .thread,
  .os .quote,
  .os .hold,
  .os .letter,
  .os .pin-card,
  .os .bubble,
  .os table td,
  .os table th { border-color: var(--line); color: var(--text); }
  .os .thread,
  .os .hold,
  .os .letter,
  .os .pin-card,
  .os .bubble { background: var(--bg-2); }
  .os .bubble.me { background: #1a2610; }
  .os .thread em.pill { background: var(--bg); color: var(--muted); }
  .os .thread em.pill.on { background: var(--up); color: var(--bg); }
  .os button.os-back,
  .os button.os-back:hover,
  .os button.os-back:active { background: var(--bg-2); color: var(--text); }
  .os-win.app-texts .os-main { background: var(--bg); }
  .os .quote-id span,
  .os .quote-px span,
  .os .letter-top,
  .os .hold-top span,
  .os .hold-sub span,
  .os .bubble i,
  .os .chat-head i,
  .os th { color: var(--muted); }
  .os tr.sel td { background: #141a12; }
  .os .move { border-bottom-color: var(--line); }