/* MÉTIER UI (spec §6.4): a ledger notebook. Cream paper with ruled lines, a red margin rule, a 3 px ink border with
   notched square corners, headings in small capitals, money in right-aligned columns, positive ink, negative brick.
   Colours are the art palette only. No gradient fill, no rounded card, no shadow blur. */
@font-face { font-family: 'Pixelify Sans'; src: url('fonts/PixelifySans-Medium.woff') format('woff'); font-weight: 400 700; font-display: swap; }
:root {
  --ink: #1f1a24; --plum: #3a2f3f; --mauve: #5a4651; --walnut: #7d5c4b; --oak: #a7795a; --sand: #d4a77a; --cream: #f2dcb3; --paper: #fff6e3;
  --pine: #2f4a3a; --moss: #4f7a4a; --leaf: #86a85a; --night: #23384f; --lake: #3f6a8a; --sky: #6fa3b8; --mist: #b8dde0;
  --brick: #8e3b46; --terra: #c95b4a; --apricot: #e89a52; --sun: #f4cf6a; --violet: #6b5ca5; --teal: #3e8f86; --steel: #9aa0a8;
  --fs: 16px; --line: 24px; --notch: 4px; --bar: 64px;
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
}
html.large { --fs: 20px; --line: 28px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); overflow: hidden; }
body { font: var(--fs)/1.35 'Pixelify Sans', ui-monospace, monospace; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0, 'calt' 0, 'dlig' 0; color: var(--ink); -webkit-font-smoothing: none; font-smooth: never; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
#stage { position: fixed; inset: 0; }
#view { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; display: block; }
img { image-rendering: pixelated; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
a.link { color: var(--lake); text-decoration-thickness: 2px; }

/* paper panels: ruled lines, red margin, ink border with notched corners */
.paper {
  position: relative; background-color: var(--cream);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 2px), rgba(212, 167, 122, 0.55) calc(var(--line) - 2px) var(--line));
  border: 3px solid var(--ink);
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, calc(100% - var(--notch)) var(--notch), 100% var(--notch), 100% calc(100% - var(--notch)), calc(100% - var(--notch)) calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, var(--notch) 100%, var(--notch) calc(100% - var(--notch)), 0 calc(100% - var(--notch)), 0 var(--notch), var(--notch) var(--notch));
}
.paper::before { content: ''; position: absolute; top: 0; bottom: 0; left: 22px; width: 2px; background: var(--brick); opacity: 0.75; pointer-events: none; }
.hd { font-weight: 700; font-variant: small-caps; letter-spacing: 1px; margin: 0; font-size: calc(var(--fs) * 1.3); line-height: 1.1; }
h4 { margin: 14px 0 4px; font-variant: small-caps; letter-spacing: 1px; font-size: var(--fs); color: var(--walnut); border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
p { margin: 6px 0; }
.hint { color: var(--mauve); }
.disc { font-size: calc(var(--fs) * 0.85); color: var(--plum); }
.note { color: var(--brick); }

/* buttons: square, ink outline, a pixel step underneath */
.btn, .chip, .act, button, input, .pcard, .token, .mission, .postcard, .shopfront, .lencard, .barbtn, .person, .shelfitem { font-variant-ligatures: none !important; font-feature-settings: 'liga' 0, 'clig' 0, 'calt' 0 !important; }
.btn { font: inherit; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--walnut); padding: 8px 14px; min-height: 44px; cursor: pointer; letter-spacing: 0.5px; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--walnut); }
.btn:focus-visible, .act:focus-visible, .chip:focus-visible, .barbtn:focus-visible, button:focus-visible { outline: 3px solid var(--lake); outline-offset: 2px; }
.btn.primary { background: var(--sun); }
.btn.big { min-height: 52px; font-size: calc(var(--fs) * 1.15); width: 100%; }
.btn.small { min-height: 36px; padding: 4px 10px; font-size: calc(var(--fs) * 0.85); }
.btn.danger { background: var(--terra); color: var(--paper); margin-top: 16px; }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn small { display: block; font-size: calc(var(--fs) * 0.75); color: var(--plum); }
.chip { font: inherit; background: var(--paper); border: 2px solid var(--ink); min-height: 40px; min-width: 40px; padding: 4px 10px; margin: 2px; cursor: pointer; }
.chip.on { background: var(--sun); box-shadow: inset 0 -3px 0 var(--apricot); }
.chip.ro { cursor: default; min-height: 28px; display: inline-block; font-size: calc(var(--fs) * 0.85); }
.ic { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; }
.ic.big { width: 24px; height: 24px; }
.ic.pip { width: 10px; height: 10px; margin: 0; }
.ic.cup { width: 14px; height: 14px; margin: 0 1px 0 0; }
.ic.seal { position: absolute; top: 2px; right: 8px; width: 18px; height: 18px; }

/* HUD strip */
.hud { position: absolute; top: calc(var(--st) + 6px); left: calc(var(--sl) + 6px); right: calc(var(--sr) + 6px); padding: 4px 8px 4px 30px; font-size: calc(var(--fs) * 0.85); pointer-events: none; }
.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; flex-wrap: wrap; }
.hud .when b { font-variant: small-caps; margin-right: 8px; }
.hud .clock { white-space: nowrap; }
.hud .cash { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud .cash small { color: var(--walnut); margin-right: 4px; }
.hud .neg { color: var(--brick); }
.pips { display: inline-flex; gap: 1px; flex-wrap: wrap; }
.kettle.hot { color: var(--brick); }
.metrics .met { display: inline-flex; gap: 4px; align-items: baseline; }
.metrics small { color: var(--walnut); }

/* bottom bar: five square buttons */
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--bar) + var(--sb)); padding: 4px calc(var(--sr) + 4px) calc(var(--sb) + 4px) calc(var(--sl) + 4px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; background: var(--walnut); border-top: 3px solid var(--ink); }
.barbtn { position: relative; font: inherit; font-size: calc(var(--fs) * 0.75); background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: inset 0 -3px 0 var(--sand); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; padding: 0; min-height: 44px; }
.barbtn:active { box-shadow: inset 0 3px 0 var(--sand); }
@media (orientation: landscape) and (max-height: 520px) {
  .bar { top: 0; left: auto; width: calc(84px + var(--sr)); height: auto; grid-template-columns: 1fr; grid-template-rows: repeat(5, 1fr); border-top: 0; border-left: 3px solid var(--ink); padding: calc(var(--st) + 4px) calc(var(--sr) + 4px) 4px 4px; }
  .hud { right: calc(var(--sr) + 96px); }
  .sheet { right: calc(var(--sr) + 88px) !important; bottom: 0 !important; }
}

/* action sheet */
.sheet { position: absolute; left: calc(var(--sl) + 4px); right: calc(var(--sr) + 4px); bottom: calc(var(--bar) + var(--sb) + 4px); max-height: 68vh; overflow-y: auto; }
.sheetbox { padding: 10px 12px 12px 34px; }
.sheet-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.sheet-head .scene { width: 96px; height: 48px; border: 2px solid var(--ink); }
.sheet-head > div { flex: 1; }
.acts { display: grid; gap: 6px; margin-top: 8px; }
.act { font: inherit; text-align: left; background: var(--paper); border: 3px solid var(--ink); min-height: 48px; padding: 6px 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; cursor: pointer; color: var(--ink); }
.act:active { background: var(--sun); }
.act.off { background: var(--cream); color: var(--mauve); cursor: default; border-style: dashed; }
.act .an { font-weight: 700; }
.act .ac { display: inline-flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.act .why { grid-column: 1 / -1; font-size: calc(var(--fs) * 0.8); color: var(--brick); }
.people { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.person { font: inherit; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 6px; background: var(--paper); border: 2px solid var(--ink); padding: 4px 8px; cursor: pointer; min-height: 44px; }
.person .cups { grid-column: 2; }
.por { width: 36px; height: 36px; }
.por.big { width: 54px; height: 54px; }
.say { font-size: calc(var(--fs) * 1.05); margin: 10px 0; }

/* layers */
.screen { position: absolute; inset: 0; overflow-y: auto; padding: calc(var(--st) + 10px) calc(var(--sr) + 10px) calc(var(--sb) + 10px) calc(var(--sl) + 10px); background: rgba(31, 26, 36, 0.6); }
.page { max-width: 600px; margin: 0 auto; padding: 12px 14px 16px 36px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 3px double var(--ink); padding-bottom: 6px; margin-bottom: 6px; }
.page-head .pg { color: var(--walnut); font-size: calc(var(--fs) * 0.85); }
.dialog { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--st) + 12px) 10px calc(var(--sb) + 12px); background: rgba(31, 26, 36, 0.55); overflow-y: auto; }
.dialog > * { width: min(560px, 100%); max-height: 100%; overflow-y: auto; }
.letter { padding: 14px 14px 14px 36px; }
.letter .from { display: flex; align-items: center; gap: 10px; color: var(--walnut); font-variant: small-caps; }
.letter .body { font-size: calc(var(--fs) * 1.08); }
.choices { display: grid; gap: 8px; margin-top: 12px; }
.btn.choice { text-align: left; }
#toast { position: absolute; left: 50%; bottom: calc(var(--bar) + var(--sb) + 14px); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 8px 14px; border: 2px solid var(--sun); opacity: 0; pointer-events: none; max-width: 90vw; text-align: center; transition: opacity 0.2s; z-index: 30; }
#toast.on { opacity: 1; }
html.reduced #toast { transition: none; }

/* « En vrai » index card */
.card { background: var(--paper); border: 3px solid var(--ink); padding: 12px 14px 14px; position: relative; background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 2px), rgba(111, 163, 184, 0.45) calc(var(--line) - 2px) var(--line)); border-top: 10px solid var(--terra); }
.card.slide { animation: slidein 0.28s steps(5) both; }
@keyframes slidein { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.card-head { display: flex; align-items: center; gap: 8px; }
.card-head .stamp { margin-left: auto; border: 2px solid var(--brick); color: var(--brick); padding: 0 6px; transform: rotate(-4deg); font-weight: 700; }
.shield { width: 24px; height: 28px; }
.shield.sm { width: 10px; height: 12px; }
.card .fact { font-size: calc(var(--fs) * 1.05); }
.card .src { font-family: ui-monospace, 'Courier New', monospace; font-size: calc(var(--fs) * 0.82); color: var(--plum); border-top: 2px dashed var(--sand); padding-top: 6px; }
.card .note { font-variant: small-caps; color: var(--brick); }

/* night ledger */
.ledger { padding: 12px 14px 16px 36px; }
.ledger .cols { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ledger .cols { grid-template-columns: 1fr 1fr; } }
.lrow { display: flex; justify-content: space-between; gap: 10px; min-height: var(--line); align-items: center; }
#dialog:not([hidden]) ~ #toast, #screen:not([hidden]) ~ #toast { bottom: calc(var(--sb) + 14px); }
.lrow > span:last-child { text-align: right; white-space: nowrap; }
.lrow .amt { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.amt.neg { color: var(--brick); }
.lrow.tot { border-top: 2px solid var(--ink); font-weight: 700; }
.approx { font-size: calc(var(--fs) * 0.8); color: var(--walnut); }
.review { font-weight: 700; color: var(--lake); }
.warn { color: var(--brick); }
.statrow { display: flex; flex-wrap: wrap; gap: 4px; }
.diary { font-style: italic; color: var(--plum); margin-top: 12px; }

/* meters and lists */
.meter, .axis { display: grid; grid-template-columns: 7.5em 1fr 3em; gap: 8px; align-items: center; min-height: var(--line); }
.meter b, .axis b { text-align: right; font-variant-numeric: tabular-nums; }
.mbar { height: 12px; border: 2px solid var(--ink); background: var(--paper); position: relative; }
.mbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--apricot); }
.peoplegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pg-cell { display: grid; grid-template-columns: auto 1fr; gap: 0 6px; align-items: center; border: 2px solid var(--ink); background: var(--paper); padding: 4px; }
.pg-cell small, .pg-cell .cups { grid-column: 2; font-size: calc(var(--fs) * 0.75); color: var(--walnut); }
.calgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0 10px; }
.cell { border: 2px solid var(--ink); background: var(--paper); min-height: 64px; padding: 4px; font-size: calc(var(--fs) * 0.8); display: flex; flex-direction: column; gap: 2px; }
.cell.today { background: var(--sun); }
.cell.past { opacity: 0.55; }
.due { border-left: 4px solid var(--brick); padding-left: 3px; }
.due.auto { border-left-color: var(--lake); }
.due.done { text-decoration: line-through; border-left-color: var(--moss); }
.switchbox { margin-top: 14px; display: grid; gap: 4px; }
.msg { display: grid; grid-template-columns: auto 1fr; gap: 8px; border-bottom: 2px solid var(--sand); padding: 6px 0; }
.almgroup { margin-bottom: 8px; }
.almrow { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; }
.almcards { grid-column: 1 / -1; display: grid; gap: 4px; }
.almcard { border: 2px solid var(--ink); background: var(--paper); padding: 4px 8px; }
.almlocked { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.almcard.locked { border-style: dashed; color: var(--sand); width: 28px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--cream); }
.srcrow { border-bottom: 2px solid var(--sand); padding: 6px 0; }
.url { display: block; font-size: calc(var(--fs) * 0.75); word-break: break-all; }

/* title */
.title-screen { background: transparent; display: flex; flex-direction: column; justify-content: space-between; }
.title { max-width: 440px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 10px; min-height: 100%; padding-top: 4vh; }
.logo-sign { align-self: center; background: var(--oak); border: 4px solid var(--ink); box-shadow: inset 0 -6px 0 var(--walnut), inset 0 4px 0 var(--sand); padding: 12px 16px 16px; position: relative; margin-top: 18px; }
.logo-sign::before, .logo-sign::after { content: ''; position: absolute; top: -22px; width: 4px; height: 20px; background: var(--ink); }
.logo-sign::before { left: 22px; } .logo-sign::after { right: 22px; }
.logo { display: block; width: min(300px, 70vw); height: auto; }
.tag { text-align: center; color: var(--paper); background: var(--ink); padding: 4px 8px; align-self: center; border: 2px solid var(--sun); }
.menu { display: grid; gap: 8px; margin-top: auto; }
.menu .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.title .disc { background: var(--cream); border: 2px solid var(--ink); padding: 6px 8px; }
.title .foot { text-align: center; color: var(--paper); background: var(--ink); padding: 4px; align-self: center; border: 2px solid var(--walnut); }
.title .foot a { color: var(--sun); }

/* setup */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.postcard, .shopfront, .lencard { font: inherit; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-height: 44px; }
.postcard.on, .shopfront.on, .lencard.on { background: var(--sun); box-shadow: inset 0 -4px 0 var(--apricot); }
.pcimg { width: 100%; height: auto; border: 2px solid var(--ink); }
.postcard small { color: var(--plum); font-size: calc(var(--fs) * 0.75); }
.check { display: flex; gap: 8px; align-items: center; margin-top: 12px; min-height: 44px; }
.check input { width: 24px; height: 24px; accent-color: var(--lake); }
.paths { display: grid; gap: 6px; }
.shopfront { flex-direction: row; text-align: left; align-items: center; }
.sfimg { width: 48px; height: 72px; flex: none; }
.sft { display: flex; flex-direction: column; }
.sft .pc { font-size: calc(var(--fs) * 0.78); color: var(--walnut); }
.sf-employee { border-left: 10px solid var(--lake); } .sf-startup { border-left: 10px solid var(--violet); } .sf-esn { border-left: 10px solid var(--teal); } .sf-shop { border-left: 10px solid var(--terra); } .sf-solo { border-left: 10px solid var(--sun); }
.cards2 { display: grid; gap: 8px; }
.lencard b { font-size: calc(var(--fs) * 1.2); }
.navrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 14px; }
.navrow .steps { text-align: center; color: var(--walnut); }
.charform { display: grid; gap: 4px; }
.charprev { display: flex; justify-content: center; }
.charimg { width: 96px; height: 144px; }
.optrow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 44px; }
.optrow .lbl { width: 6.5em; color: var(--walnut); }
.field { font: inherit; border: 3px solid var(--ink); background: var(--paper); padding: 6px 8px; min-height: 44px; flex: 1; user-select: text; -webkit-user-select: text; }
.sw { display: inline-block; width: 22px; height: 22px; border: 2px solid var(--ink); }
.sk0 { background: var(--cream); } .sk1 { background: var(--sand); } .sk2 { background: var(--oak); } .sk3 { background: var(--walnut); }
.hc0 { background: var(--ink); } .hc1 { background: var(--walnut); } .hc2 { background: var(--oak); } .hc3 { background: var(--brick); } .hc4 { background: var(--sun); } .hc5 { background: var(--steel); }

/* ending */
.ending .sub { color: var(--walnut); }
.epi p { margin: 2px 0; }
.profile { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
@media (max-width: 420px) { .profile { grid-template-columns: 1fr; justify-items: center; } .axes { width: 100%; } }
.penta { width: 200px; height: 200px; }
.moment.up::before { content: '+ '; color: var(--moss); } .moment.down::before { content: '- '; color: var(--brick); }

/* mini-games */
.mg { padding: 12px 14px 14px 36px; }
.mgstat { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; color: var(--walnut); }
.wants { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.pcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 8px 0; }
.pcard { font: inherit; background: var(--paper); border: 3px solid var(--ink); min-height: 64px; padding: 6px; cursor: pointer; color: var(--ink); }
.pcard span { display: flex; flex-direction: column; } .pcard small { color: var(--walnut); }
.pcard.on { background: var(--sun); } .pcard.used { opacity: 0.35; }
.tbar { position: relative; height: 22px; border: 3px solid var(--ink); background: var(--paper); margin: 10px 0; }
.tbar .tzone { position: absolute; left: 40%; width: 20%; top: 0; bottom: 0; background: var(--leaf); }
.tbar .tmark { position: absolute; top: -4px; bottom: -4px; width: 4px; background: var(--brick); z-index: 2; }
.slider { width: 100%; accent-color: var(--terra); min-height: 44px; }
.slrow { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; }
.queue { display: flex; gap: 6px; min-height: 120px; align-items: flex-end; border-bottom: 3px solid var(--ink); padding-bottom: 4px; }
.cust { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; opacity: 0.7; }
.cust.front { opacity: 1; }
.cimg { width: 32px; height: 48px; }
.bubble { background: var(--paper); border: 2px solid var(--ink); padding: 2px; order: -1; }
.pat { width: 34px; height: 6px; border: 1px solid var(--ink); background: var(--paper); position: relative; }
.pat .pfill, .timer .tfill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--moss); }
.timer { height: 10px; border: 2px solid var(--ink); background: var(--paper); position: relative; margin: 6px 0; }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.shelfitem { font: inherit; background: var(--oak); border: 3px solid var(--ink); min-height: 64px; position: relative; cursor: pointer; touch-action: none; box-shadow: inset 0 -6px 0 var(--walnut); }
.shelfitem.empty { background: var(--cream); }
.shelfitem.empty .itm { opacity: 0.25; }
.shelfitem .qty { position: absolute; right: 4px; bottom: 4px; color: var(--paper); font-weight: 700; }
.itm { width: 36px; height: 36px; }
.bubble .itm { width: 24px; height: 24px; }
.ticket { border: 3px solid var(--ink); background: var(--paper); padding: 10px; min-height: 64px; display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.ticket .ic { width: 36px; height: 36px; }
.ticket.none { opacity: 0.4; }
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.btn.lane { min-height: 56px; }
.tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.token, .mission { font: inherit; background: var(--paper); border: 3px solid var(--ink); padding: 4px 8px; min-height: 48px; cursor: pointer; }
.token span, .mission span { display: flex; flex-direction: column; } .token small, .mission small { color: var(--walnut); }
.token.on { background: var(--teal); color: var(--paper); }
.call { border: 2px solid var(--ink); background: var(--paper); padding: 6px 8px; margin: 6px 0; }
.call.r2 { border-left: 8px solid var(--moss); } .call.r1 { border-left: 8px solid var(--apricot); } .call.r0 { border-left: 8px solid var(--brick); }
.clocks { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }

/* crash panel */
.crash { position: fixed; left: 10px; right: 10px; top: 30%; padding: 16px 16px 16px 36px; z-index: 99; display: grid; gap: 10px; }
.doc { max-width: 680px; margin: 0 auto; padding: 16px; }
html.page, html.page body { overflow: auto; height: auto; background: var(--cream); }
html.page body { user-select: text; -webkit-user-select: text; }
.w0{width:0%}.w1{width:5%}.w2{width:10%}.w3{width:15%}.w4{width:20%}.w5{width:25%}.w6{width:30%}.w7{width:35%}.w8{width:40%}.w9{width:45%}.w10{width:50%}.w11{width:55%}.w12{width:60%}.w13{width:65%}.w14{width:70%}.w15{width:75%}.w16{width:80%}.w17{width:85%}.w18{width:90%}.w19{width:95%}.w20{width:100%}
/* desktop: the canvas fills the window, the ledger panels stay at a readable width */
@media (min-width: 820px) and (min-height: 521px) {
  .hud { right: auto; width: 560px; }
  .sheet { left: auto; right: 16px; width: 440px; bottom: calc(var(--bar) + 16px); max-height: calc(100vh - var(--bar) - 32px); }
  .bar { left: 50%; right: auto; width: 620px; transform: translateX(-50%); border: 3px solid var(--ink); border-bottom: 0; }
  #toast { bottom: calc(var(--bar) + 24px); }
}