/* skins.css: the in-world looks. A module names one (skins.py) and app.js puts it on <body data-look="…">.
   ingot is app.css itself. Every other look is one block scoped to body[data-look="…"]: the variables first, then the chrome
   (bar, composer, drawer), then the turn (bubbles, prose), then the cards (dice, montage, envelopes), then the book.
   Texture lives in chrome and cards only; the GM's prose always sits on a flat, high-contrast ground.
   System fonts only (iOS/macOS), each stack with fallbacks. */

/* ---------------------------------------------------------------- shared by every look but ingot */
body[data-look]:not([data-look="ingot"]) .tabs .tab,
body[data-look]:not([data-look="ingot"]) .bar .ghost { min-height: 40px; }
/* a paper handout stays paper in every look: its title takes the paper's own face rather than the look's display font */
body[data-look]:not([data-look="ingot"]) .handout:is([data-kind="letter"], [data-kind="note"], [data-kind="clipping"], [data-kind="contract"], [data-kind="document"]) .handout-title { font-family: inherit; }
@keyframes skin-stamp { 0% { transform: scale(1.7); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ---------------------------------------------------------------- the swatches in the look picker (work under any look) */
.swatch[data-look="cockpit"] { background:
  linear-gradient(#5cf08a, #5cf08a) 6px 6px / 10px 2px no-repeat, linear-gradient(#5cf08a, #5cf08a) 6px 6px / 2px 10px no-repeat,
  linear-gradient(#5cf08a, #5cf08a) right 6px bottom 6px / 10px 2px no-repeat, linear-gradient(#5cf08a, #5cf08a) right 6px bottom 6px / 2px 10px no-repeat,
  linear-gradient(#ffb330, #ffb330) 14px 18px / 12px 3px no-repeat,
  repeating-linear-gradient(0deg, rgba(92, 240, 138, .13) 0 1px, transparent 1px 3px), #070b09; }
.swatch[data-look="phone"] { background:
  radial-gradient(ellipse 11px 6px at 25px 12px, #c8108c 96%, transparent) , radial-gradient(ellipse 11px 6px at 15px 27px, #2a2540 96%, transparent),
  radial-gradient(circle at 100% 0, rgba(255, 58, 216, .4), transparent 60%), radial-gradient(circle at 0 100%, rgba(61, 232, 255, .3), transparent 55%), #07060b; }
.swatch[data-look="grimoire"] { background:
  linear-gradient(#9a2c1c, #9a2c1c) 8px 8px / 9px 11px no-repeat,
  repeating-linear-gradient(#efe5cf 0 5px, #b9a47e 5px 6px) 20px 8px / 13px 12px no-repeat,
  repeating-linear-gradient(#efe5cf 0 5px, #b9a47e 5px 6px) 8px 22px / 25px 12px no-repeat,
  radial-gradient(circle at 50% 40%, #f4ebd8, #e2d1ae); }
.swatch[data-look="dash"] { background:
  radial-gradient(circle at 50% 68%, #0b0c0f 0 9px, transparent 9.5px),
  radial-gradient(circle at 50% 68%, transparent 0 15px, #121418 15.5px),
  conic-gradient(from 250deg at 50% 68%, #7fd3ff 0 130deg, #ff4136 130deg 220deg, #121418 220deg); }
.swatch[data-look="notebook"] { background:
  linear-gradient(rgba(255, 238, 88, .9), rgba(255, 238, 88, .9)) 13px 13px / 22px 7px no-repeat,
  linear-gradient(90deg, transparent 8px, #e57373 8px 9px, transparent 9px),
  repeating-linear-gradient(transparent 0 7px, #b9cdea 7px 8px), #fffefa; }
.swatch[data-look="console"] { background:
  linear-gradient(#ffb000, #ffb000) 7px 9px / 16px 3px no-repeat, linear-gradient(#b8872e, #b8872e) 7px 16px / 25px 3px no-repeat,
  linear-gradient(#8a6526, #8a6526) 7px 23px / 20px 3px no-repeat, linear-gradient(#ffb000, #ffb000) 7px 30px / 6px 3px no-repeat,
  repeating-linear-gradient(0deg, rgba(255, 176, 0, .1) 0 1px, transparent 1px 3px), #0d0a07; }
.swatch[data-look="fridge"] { background:
  radial-gradient(circle at 17px 11px, #e74c3c 0 3.5px, transparent 4px),
  linear-gradient(#fff4a8, #fff4a8) 7px 8px / 19px 19px no-repeat, linear-gradient(#ffd6e0, #ffd6e0) 18px 18px / 16px 15px no-repeat,
  linear-gradient(90deg, #dcece5, #fbfefd 40%, #dcece5); }
.swatch[data-look="crest"] { background: radial-gradient(circle at 50% 50%, #e0bb52 0 4px, transparent 4.5px),
  linear-gradient(#c9a441, #c9a441) 50% 11px / 16px 2px no-repeat, linear-gradient(#c9a441, #c9a441) 50% 27px / 16px 2px no-repeat, #0b1428;
  box-shadow: inset 0 0 0 3px #0b1428, inset 0 0 0 4.5px #e0bb52; }
.swatch[data-look="corkboard"] { background:
  radial-gradient(circle at 20px 11px, #c8321f 0 3px, transparent 3.5px),
  linear-gradient(#f1e3c2, #f1e3c2) 9px 9px / 22px 23px no-repeat,
  radial-gradient(circle at 30% 40%, rgba(70, 40, 12, .45) 0 .8px, transparent 1.3px) 0 0 / 5px 6px,
  radial-gradient(circle at 60% 70%, rgba(255, 230, 190, .3) 0 1px, transparent 1.5px) 0 0 / 7px 9px, #b4845a; }
.swatch[data-look="municipal"] { background:
  radial-gradient(circle at 27px 27px, transparent 0 6px, #b3261e 6.5px 8px, transparent 8.5px),
  linear-gradient(#1f2a22, #1f2a22) 6px 7px / 28px 2px no-repeat,
  repeating-linear-gradient(transparent 0 6px, #9aa68f 6px 7px) 6px 12px / 28px 22px no-repeat, #efe2b8; }

/* ================================================================ cockpit: Cold Start, a frame's HUD */
html:has(> body[data-look="cockpit"]) { background: #070b09; }
body[data-look="cockpit"] {
  --bg: #070b09; --panel: #0b120e; --panel2: #102019; --ink: #d3e2d7; --muted: #88a592; --line: #1e3a2b; --dim: #6f8e7b;
  --accent: #5cf08a; --accent-ink: #03140a; --user: #0d1a13; --red: #ff6b57; --green: #5cf08a;
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  --font-display: ui-monospace, "SF Mono", Menlo, monospace; --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --strong: #f2fff5; --user-ink: #d3e2d7; --gm-ink: #d3e2d7; --link: #5cf08a; --heading: #5cf08a;
  --die: #07110b; --pip: #5cf08a; --die-edge: #2b6b45;
  --clean: #5cf08a; --cost: #ffb330; --miss: #ff6b57; --disaster: #ff2e4d;
  --card: #0a130e; --card-line: #1e3a2b; --shadow: none; --radius: 2px;
  --hud: #5cf08a; --edge: #2b6b45;
  --scan: repeating-linear-gradient(0deg, rgba(92, 240, 138, .045) 0 1px, transparent 1px 3px);
  --brackets: linear-gradient(var(--hud), var(--hud)) top left / 10px 1px no-repeat, linear-gradient(var(--hud), var(--hud)) top left / 1px 10px no-repeat,
    linear-gradient(var(--hud), var(--hud)) top right / 10px 1px no-repeat, linear-gradient(var(--hud), var(--hud)) top right / 1px 10px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom left / 10px 1px no-repeat, linear-gradient(var(--hud), var(--hud)) bottom left / 1px 10px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom right / 10px 1px no-repeat, linear-gradient(var(--hud), var(--hud)) bottom right / 1px 10px no-repeat;
  background: radial-gradient(120% 70% at 50% 0%, #0c1711 0%, #070b09 70%);
}
body[data-look="cockpit"] .bar { background: var(--scan), linear-gradient(#0e1913, #09110d); border-bottom-color: var(--edge); }
body[data-look="cockpit"] .bar .title { font-family: var(--font-mono); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--hud); }
body[data-look="cockpit"] #play-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; text-transform: uppercase; }
body[data-look="cockpit"] .ghost { border-radius: 2px; border-color: var(--edge); font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
body[data-look="cockpit"] #back { font-size: 24px; }
body[data-look="cockpit"] #debt { background: repeating-linear-gradient(-45deg, #2a0c08 0 8px, #3a120b 8px 16px); color: #ffc2b8;
  border-bottom: 1px solid var(--red); font: 600 12px/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
body[data-look="cockpit"] #composer, body[data-look="cockpit"] .attachbar, body[data-look="cockpit"] .startbar { background: var(--scan), #0a120e; border-top-color: var(--edge); }
body[data-look="cockpit"] #input { background: #040806; border-color: var(--line); border-radius: 2px; caret-color: var(--hud); }
body[data-look="cockpit"] #input:focus { border-color: var(--hud); }
body[data-look="cockpit"] #input::placeholder { color: var(--dim); font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
body[data-look="cockpit"] #send { border-radius: 2px; background: rgba(92, 240, 138, .08); color: var(--hud); border: 1px solid var(--hud); }
body[data-look="cockpit"] #send:disabled { background: transparent; color: var(--dim); border-color: var(--line); }
body[data-look="cockpit"] .attach-chip, body[data-look="cockpit"] .pace-toggle, body[data-look="cockpit"] .startbar button,
body[data-look="cockpit"] .grit-spend { border-radius: 2px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
body[data-look="cockpit"] .grit-spend { font-size: 13px; }
body[data-look="cockpit"] .msg.user { background: var(--brackets), var(--user); border-radius: 0; padding: 10px 14px; }
body[data-look="cockpit"] .msg.user .tap { border-radius: 0; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
body[data-look="cockpit"] .prose h1, body[data-look="cockpit"] .prose h2, body[data-look="cockpit"] .prose h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
body[data-look="cockpit"] .prose h1::before, body[data-look="cockpit"] .prose h2::before, body[data-look="cockpit"] .prose h3::before { content: "› "; }
body[data-look="cockpit"] .prose blockquote { border-left: 2px solid var(--cost); color: #ecd9b0; }
body[data-look="cockpit"] .prose hr { border-top: 1px dashed var(--edge); }
body[data-look="cockpit"] .tool, body[data-look="cockpit"] .divider, body[data-look="cockpit"] .typing { font-family: var(--font-mono); font-size: 12px; }
body[data-look="cockpit"] .divider, body[data-look="cockpit"] .typing { letter-spacing: .06em; text-transform: uppercase; }
body[data-look="cockpit"] .typing { color: var(--hud); }
body[data-look="cockpit"] .divider::before { content: "[ "; } body[data-look="cockpit"] .divider::after { content: " ]"; }
body[data-look="cockpit"] .dice, body[data-look="cockpit"] .envelope { background: var(--brackets), var(--scan), var(--card); border-color: transparent; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(92, 240, 138, .1); }
body[data-look="cockpit"] .dice-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
body[data-look="cockpit"] .dice:not(.montage) .dice-what::before { content: "TGT › "; color: var(--hud); }
body[data-look="cockpit"] .die { border-radius: 3px; box-shadow: inset 0 0 8px rgba(92, 240, 138, .14); }
body[data-look="cockpit"] .die i.pip { box-shadow: 0 0 4px rgba(92, 240, 138, .7); }
body[data-look="cockpit"] .dice-math, body[data-look="cockpit"] .beat-total { font-family: var(--font-mono); }
body[data-look="cockpit"] .dice-math .eq { color: var(--hud); }
body[data-look="cockpit"] .dice-outcome .now { border-radius: 0; font-family: var(--font-mono); letter-spacing: .12em; }
body[data-look="cockpit"] .dice-body .now { font-size: 13px; }
body[data-look="cockpit"] :is(.dice, .beat)[data-outcome] .now { color: #03140a; }
body[data-look="cockpit"] :is(.dice, .beat)[data-outcome="disaster"] .now { background: repeating-linear-gradient(-45deg, #d6002a 0 5px, #8a0016 5px 10px); color: #fff; text-shadow: 0 1px 1px #000; }
body[data-look="cockpit"] .dice-outcome .was { font-family: var(--font-mono); }
body[data-look="cockpit"] .dice-foot .tag, body[data-look="cockpit"] .chip-s { border-radius: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
body[data-look="cockpit"] .grit-meter .lbl { font-family: var(--font-mono); text-transform: uppercase; }
body[data-look="cockpit"] .grit-meter b { border-radius: 0; }
body[data-look="cockpit"] .payoff { border-left-width: 2px; }
body[data-look="cockpit"] .env-about { font-family: var(--font); }
body[data-look="cockpit"] .handout { border-radius: 0; }
body[data-look="cockpit"] .handout:is([data-kind="message"], [data-kind="flyer"], [data-kind="job"], [data-kind="gift"]) { background: var(--brackets), var(--scan), var(--card); border: 1px solid #14271d; }
body[data-look="cockpit"] .handout[data-kind="job"] { border: 1px dashed var(--edge); }
body[data-look="cockpit"] .handout[data-kind="gift"] { border-color: var(--edge); box-shadow: 0 0 14px rgba(92, 240, 138, .12); }
body[data-look="cockpit"] .handout:is([data-kind="message"], [data-kind="flyer"], [data-kind="job"], [data-kind="gift"]) .handout-title { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--hud); }
body[data-look="cockpit"] .handout:is([data-kind="letter"], [data-kind="note"], [data-kind="clipping"], [data-kind="contract"], [data-kind="document"]) { box-shadow: 0 0 0 1px var(--edge), 0 0 18px rgba(92, 240, 138, .1); }
body[data-look="cockpit"] .handout-kind, body[data-look="cockpit"] .handout[data-kind="gift"]::before { font-family: var(--font-mono); }
body[data-look="cockpit"] .payoff-when, body[data-look="cockpit"] .env-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
body[data-look="cockpit"] .drawer-card { border-radius: 0; border-top: 1px solid var(--hud); }
body[data-look="cockpit"] .tabs { background: var(--scan); }
body[data-look="cockpit"] .tabs .tab { border-radius: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
body[data-look="cockpit"] .codex .entry { background: var(--brackets), var(--card); border-color: #14271d; border-radius: 0; }
body[data-look="cockpit"] .codex .entry.focus { border-color: var(--edge); box-shadow: 0 0 12px rgba(92, 240, 138, .12); }
body[data-look="cockpit"] .codex .ename { font-family: var(--font-mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--hud); }
body[data-look="cockpit"] .codex .tier { font-family: var(--font-mono); color: var(--hud); }
body[data-look="cockpit"] .sheet-pane { color: #bfe8cb; }
body[data-look="cockpit"] .menu { background: var(--scan), #0b140f; border-color: var(--edge); border-radius: 0; }
body[data-look="cockpit"] .menu button { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
body[data-look="cockpit"] .jump { border-radius: 0; border-color: var(--edge); box-shadow: none; }

/* ================================================================ phone: Payment Plan, a phone in your phone */
html:has(> body[data-look="phone"]) { background: #07060b; }
body[data-look="phone"] {
  --bg: #07060b; --panel: #0e0c15; --panel2: #1a1726; --ink: #ece8f6; --muted: #a39cba; --line: #2a2540; --dim: #8079a0;
  --accent: #ff3ad8; --accent-ink: #19001a; --user: linear-gradient(135deg, #c8108c, #7a26d9); --red: #ff4d6d; --green: #2bff9a;
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif; --font-display: var(--font);
  --strong: #ffffff; --user-ink: #ffffff; --gm-ink: #ece8f6; --link: #3de8ff; --heading: #3de8ff;
  --die: #151222; --pip: #3de8ff; --die-edge: #8a2b8f;
  --clean: #2bff9a; --cost: #ffd23a; --miss: #ff4d6d; --disaster: #a0103f;
  --card: linear-gradient(160deg, #1a1530, #100d19); --card-line: #2e2848; --shadow: 0 8px 24px rgba(0, 0, 0, .45); --radius: 18px;
  --bubble: #16131f; --send: linear-gradient(135deg, #c8108c, #7a26d9);
  background: radial-gradient(90% 45% at 100% 0%, rgba(255, 58, 216, .12), transparent 70%),
    radial-gradient(80% 40% at 0% 100%, rgba(61, 232, 255, .08), transparent 70%), #07060b;
}
body[data-look="phone"] .bar { background: #0e0c15; border-bottom-color: #231f35; }
body[data-look="phone"] #play .title-wrap { padding-left: 46px; min-height: 40px; justify-content: center; background:
  radial-gradient(circle at 50% 42%, #3de8ff 0 4px, transparent 4.5px) 0 50% / 38px 38px no-repeat,
  radial-gradient(circle, #231d38 0 13px, transparent 13.5px 16px, #0e0c15 16.5px) 0 50% / 38px 38px no-repeat,
  conic-gradient(#ff3ad8, #3de8ff, #ff3ad8) 0 50% / 38px 38px no-repeat; }
body[data-look="phone"] #play-title { font-size: 16px; }
body[data-look="phone"] #play-sub::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px;
  border-radius: 50%; background: #2bff9a; box-shadow: 0 0 6px #2bff9a; }
body[data-look="phone"] .ghost { border-radius: 999px; border-color: #2e2848; color: #3de8ff; }
body[data-look="phone"] #back { border-color: transparent; font-size: 32px; }
body[data-look="phone"] #debt { margin: 8px 10px 0; padding: 8px 12px 8px 40px; position: relative; border-radius: 14px; text-align: left;
  background: #1a0f1c; border: 1px solid rgba(255, 58, 216, .55); color: #ffc7f2; font-size: 13px; }
body[data-look="phone"] #debt::before { content: "!"; position: absolute; left: 11px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  border-radius: 6px; background: #ff3ad8; color: #19001a; font-weight: 800; line-height: 20px; text-align: center; }
body[data-look="phone"] #composer, body[data-look="phone"] .attachbar, body[data-look="phone"] .startbar { background: #0e0c15; border-top-color: #231f35; }
body[data-look="phone"] #composer { align-items: flex-end; }
body[data-look="phone"] #input { min-height: 44px; padding: 10px 16px; border-radius: 22px; background: var(--bubble); border-color: #2e2848; }
body[data-look="phone"] #input:focus { border-color: #ff3ad8; }
body[data-look="phone"] #send { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--send); color: #fff; box-shadow: 0 0 14px rgba(255, 58, 216, .4); }
body[data-look="phone"] #send:disabled { background: #231f35; color: #6f6887; box-shadow: none; }
body[data-look="phone"] .attach-chip { background: rgba(255, 58, 216, .14); color: #ff9bea; border: 1px solid rgba(255, 58, 216, .5); }
body[data-look="phone"] .pace-toggle { border-color: #2e2848; color: #b9b2cf; }
body[data-look="phone"] .pace-toggle.on, body[data-look="phone"] .startbar button, body[data-look="phone"] .grit-spend.picked,
body[data-look="phone"] .tabs .tab.active { background: var(--send); color: #fff; border-color: transparent; }
body[data-look="phone"] .startbar button { border-radius: 999px; }
body[data-look="phone"] .msg.user { border-radius: 20px 20px 6px 20px; box-shadow: 0 4px 18px rgba(200, 16, 140, .25); }
body[data-look="phone"] .msg.gm .prose:not(:empty) { background: var(--bubble); border: 1px solid #262139; border-radius: 20px 20px 20px 6px; padding: 12px 15px; }
body[data-look="phone"] .typing { display: inline-block; margin-top: 6px; padding: 7px 14px; border-radius: 18px 18px 18px 6px; background: var(--bubble); color: var(--muted); }
body[data-look="phone"] .msg.divider { align-self: center; padding: 3px 12px; border-radius: 999px; background: #14111d; font-size: 11px; }
body[data-look="phone"] .msg.divider::before, body[data-look="phone"] .msg.divider::after { content: none; }
body[data-look="phone"] .tool { font-size: 12px; }
body[data-look="phone"] .dice, body[data-look="phone"] .envelope { border-radius: 18px; }
body[data-look="phone"] .dice-id { color: #6fd9ea; }
body[data-look="phone"] .die { border-radius: 10px; box-shadow: 0 0 10px rgba(255, 58, 216, .22); }
body[data-look="phone"] .die i.pip { box-shadow: 0 0 5px #3de8ff; }
body[data-look="phone"] .dice-outcome .now { border-radius: 999px; }
body[data-look="phone"] :is(.dice, .beat)[data-outcome] .now { color: #0b0714; }
body[data-look="phone"] :is(.dice, .beat)[data-outcome="clean"] .now { box-shadow: 0 0 12px rgba(43, 255, 154, .35); }
body[data-look="phone"] :is(.dice, .beat)[data-outcome="cost"] .now { box-shadow: 0 0 12px rgba(255, 210, 58, .3); }
body[data-look="phone"] :is(.dice, .beat)[data-outcome="miss"] .now { box-shadow: 0 0 12px rgba(255, 77, 109, .35); }
body[data-look="phone"] :is(.dice, .beat)[data-outcome="disaster"] .now { color: #fff; box-shadow: 0 0 0 1px #ff4d6d, 0 0 14px rgba(255, 77, 109, .5);
  text-shadow: 1px 0 #3de8ff, -1px 0 #ff3ad8; }
body[data-look="phone"] .grit-meter b { border-radius: 50%; }
body[data-look="phone"] .grit-spend { border-radius: 14px; }
body[data-look="phone"] .payoff { border-left-color: #3de8ff; }
body[data-look="phone"] .payoff-when { color: #3de8ff; }
body[data-look="phone"] .handout { border-radius: 16px; }
body[data-look="phone"] .handout:is([data-kind="letter"], [data-kind="note"], [data-kind="clipping"], [data-kind="contract"], [data-kind="document"]) { border-radius: 4px; }
body[data-look="phone"] .handout[data-kind="message"] { background: var(--bubble); border-color: #262139; border-radius: 20px 20px 20px 6px; }
body[data-look="phone"] .handout[data-kind="message"] .handout-title { font-size: 12px; font-weight: 600; color: var(--muted); }
body[data-look="phone"] .handout[data-kind="flyer"] { border: 1px solid #ff3ad8; box-shadow: 0 0 18px rgba(255, 58, 216, .25), inset 0 0 22px rgba(61, 232, 255, .08); }
body[data-look="phone"] .handout[data-kind="flyer"] .handout-title { color: #3de8ff; text-shadow: 0 0 10px rgba(61, 232, 255, .55); }
body[data-look="phone"] .handout[data-kind="job"] { border: 1px dashed #3de8ff; }
body[data-look="phone"] .handout[data-kind="gift"] { box-shadow: 0 0 16px rgba(255, 58, 216, .25); }
body[data-look="phone"] .drawer-card { border-radius: 22px 22px 0 0; border-top: 1px solid #2e2848; }
body[data-look="phone"] .drawer-card::before { content: ""; flex: none; align-self: center; width: 36px; height: 5px; margin-top: 7px; border-radius: 3px; background: #3a3452; }
body[data-look="phone"] .drawer-card .bar, body[data-look="phone"] .tabs { border-bottom-color: #1e1a2d; }
body[data-look="phone"] .tabs .tab { border-color: #2e2848; }
body[data-look="phone"] .codex .entry { border-radius: 16px; background: #14111d; border-color: #262139; }
body[data-look="phone"] .codex .entry.focus { border-color: #3de8ff; box-shadow: 0 0 0 1px rgba(61, 232, 255, .25); }
body[data-look="phone"] .codex .ename::before { content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 9px; vertical-align: -6px;
  border-radius: 50%; background: radial-gradient(circle at 50% 38%, #0e0c15 0 4px, transparent 4.5px), linear-gradient(135deg, #ff3ad8, #3de8ff); }
body[data-look="phone"] .menu { border-radius: 14px; background: #1a1726; border-color: #2e2848; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
body[data-look="phone"] .jump { background: #1a1726; color: #3de8ff; border-color: #2e2848; }

/* ================================================================ grimoire: The Practice, the shop's grimoire */
html:has(> body[data-look="grimoire"]) { background: #eadcc0; }
body[data-look="grimoire"] {
  --bg: #efe5cf; --panel: #e5d6b6; --panel2: #dccaa5; --ink: #33261a; --muted: #67523c; --line: #bfa67c; --dim: #735e44;
  --accent: #9a2c1c; --accent-ink: #fbf3e2; --user: rgba(154, 118, 70, .1); --red: #a3321f; --green: #3f6a3a;
  --font: "Iowan Old Style", "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-display: "Hoefler Text", "Baskerville", "Iowan Old Style", Georgia, serif;
  --strong: #1e140b; --user-ink: #26314a; --gm-ink: #33261a; --link: #9a2c1c; --heading: #9a2c1c;
  --die: #f8f0de; --pip: #33261a; --die-edge: #a58c64;
  --clean: #3f6a3a; --cost: #85580f; --miss: #9a2c1c; --disaster: #2b1d12;
  --card: #ebdfc3; --card-line: #8f7650; --shadow: none; --radius: 3px;
  --ochre: #85580f; --rule: #9e845a;
  background: radial-gradient(130% 90% at 50% 30%, #f3ead6 0%, #eee3ca 60%, #e6d7b8 100%);
}
body[data-look="grimoire"] .bar { background: linear-gradient(#ebdec0, #e2d1ab); border-bottom: 3px double var(--rule); }
body[data-look="grimoire"] .bar .title { font-family: var(--font-display); font-size: 20px; font-weight: 400; font-variant: small-caps; letter-spacing: .05em; color: var(--accent); }
body[data-look="grimoire"] #play-sub { font-size: 13px; font-style: italic; }
body[data-look="grimoire"] .ghost { border-radius: 3px; border-color: #b39868; font-variant: small-caps; letter-spacing: .03em; }
body[data-look="grimoire"] #debt { background: var(--accent); color: #fbf3e2; font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; }
body[data-look="grimoire"] #composer, body[data-look="grimoire"] .attachbar, body[data-look="grimoire"] .startbar { background: linear-gradient(#e2d1ab, #e9dbbb); border-top: 3px double var(--rule); }
body[data-look="grimoire"] .attachbar + #composer { border-top: 0; }
body[data-look="grimoire"] #input { background: #f8f1e1; border-color: #b39868; border-radius: 3px; color: var(--user-ink); }
body[data-look="grimoire"] #input::placeholder { color: #8a7458; font-style: italic; }
body[data-look="grimoire"] #send { width: 46px; height: 46px; align-self: flex-end; border-radius: 50%; color: #fbe9d2;
  background: radial-gradient(circle at 35% 30%, #c0503a, #8e2616 60%, #6d1c10); box-shadow: 0 0 0 3px rgba(142, 38, 22, .16), inset 0 -2px 3px rgba(0, 0, 0, .25); }
body[data-look="grimoire"] #send:disabled { background: #d5c29c; color: #8a7458; box-shadow: none; }
body[data-look="grimoire"] .attach-chip, body[data-look="grimoire"] .pace-toggle, body[data-look="grimoire"] .startbar button { border-radius: 3px; font-variant: small-caps; font-size: 15px; }
body[data-look="grimoire"] .pace-toggle { border-color: #b39868; }
body[data-look="grimoire"] .msg.user { border-radius: 2px; border-left: 2px solid var(--accent); padding: 6px 12px; font-style: italic; }
body[data-look="grimoire"] .msg.user em { font-style: normal; }
body[data-look="grimoire"] .msg.user .tap { border-radius: 2px; font-style: normal; font-variant: small-caps; }
body[data-look="grimoire"] .msg.gm .prose { font-size: 16.5px; line-height: 1.6; }
body[data-look="grimoire"] .msg.gm .prose > p:first-child::first-letter { float: left; margin: 5px 2px 0 0; font-family: var(--font-display);
  font-size: 3.1em; line-height: .8; color: var(--accent); }
body[data-look="grimoire"] .prose h1, body[data-look="grimoire"] .prose h2, body[data-look="grimoire"] .prose h3 { font-size: 20px; font-weight: 400; font-variant: small-caps; letter-spacing: .04em; }
body[data-look="grimoire"] .prose blockquote { border-left: 1px solid var(--accent); color: #4a3826; font-style: italic; }
body[data-look="grimoire"] .prose hr { border: 0; margin: 16px 0; text-align: center; overflow: visible; }
body[data-look="grimoire"] .prose hr::after { content: "\2767"; color: var(--accent); font-size: 18px; }
body[data-look="grimoire"] .tool, body[data-look="grimoire"] .typing, body[data-look="grimoire"] .divider { font-style: italic; }
body[data-look="grimoire"] .divider::before { content: "\2E3A  "; } body[data-look="grimoire"] .divider::after { content: "  \2E3A"; }
body[data-look="grimoire"] .dice, body[data-look="grimoire"] .envelope { border-radius: 2px 7px 3px 6px / 6px 3px 7px 2px; padding: 12px 14px;
  box-shadow: inset 0 0 0 3px #efe5cf, inset 0 0 0 4px rgba(143, 118, 80, .55); }
body[data-look="grimoire"] .dice-head { font-size: 14px; font-style: italic; }
body[data-look="grimoire"] .dice-id { font-family: var(--font); font-size: 12px; font-style: italic; }
body[data-look="grimoire"] .die { border-radius: 6px; }
body[data-look="grimoire"] .dice-outcome .now { border-radius: 2px; font-family: var(--font-display); font-weight: 600; font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; }
body[data-look="grimoire"] .dice-body .now { font-size: 18px; padding: 1px 10px 3px; }
body[data-look="grimoire"] .montage .beat .now { font-size: 13px; }
body[data-look="grimoire"] :is(.dice, .beat)[data-outcome] .now { color: #fbf3e2; }
body[data-look="grimoire"] .dice-outcome .was { font-family: var(--font); font-style: italic; text-transform: none; }
body[data-look="grimoire"] .dice-foot .tag, body[data-look="grimoire"] .chip-s { border-radius: 2px; font-style: italic; }
body[data-look="grimoire"] .grit-meter b { border-radius: 50%; border-color: var(--muted); }
body[data-look="grimoire"] .grit-spend { border-radius: 3px; font-variant: small-caps; font-size: 17px; font-weight: 400; }
body[data-look="grimoire"] .payoff { border-left: 1px solid var(--accent); }
body[data-look="grimoire"] .payoff-when { font-style: italic; font-variant: small-caps; text-transform: none; letter-spacing: .04em; font-size: 14px; }
body[data-look="grimoire"] .handout { border-radius: 2px; box-shadow: 0 1px 3px rgba(60, 40, 20, .22); }
body[data-look="grimoire"] .handout:is([data-kind="letter"], [data-kind="contract"], [data-kind="document"]) { background: #f8f2e3; }
body[data-look="grimoire"] .handout[data-kind="flyer"] { border: 1px solid var(--card-line); box-shadow: inset 0 0 0 3px #efe5cf, inset 0 0 0 4px rgba(143, 118, 80, .55); }
body[data-look="grimoire"] .handout-kind, body[data-look="grimoire"] .handout[data-kind="gift"]::before { font-size: 14px; font-variant: small-caps; letter-spacing: .05em; text-transform: none; }
body[data-look="grimoire"] .drawer-card { background: linear-gradient(90deg, rgba(90, 60, 20, .08), transparent 16px), #efe5cf; border-radius: 4px 4px 0 0; }
body[data-look="grimoire"] .drawer-card .bar { border-bottom: 3px double var(--rule); }
body[data-look="grimoire"] .tabs { border-bottom-color: #cdb892; }
body[data-look="grimoire"] .tabs .tab { border-radius: 2px; border-color: #c9b189; font-size: 16px; font-variant: small-caps; }
body[data-look="grimoire"] .codex .entry { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
body[data-look="grimoire"] .codex .entry.focus { background: rgba(154, 44, 28, .05); box-shadow: inset 2px 0 0 var(--accent); }
body[data-look="grimoire"] .codex .ename { font-size: 19px; font-weight: 400; font-variant: small-caps; letter-spacing: .03em; color: var(--accent); }
body[data-look="grimoire"] .codex .fact .when { font-family: var(--font); font-size: 13px; font-style: italic; color: var(--accent); }
body[data-look="grimoire"] .codex .tier { font-family: var(--font-display); font-size: 15px; font-weight: 400; font-variant: small-caps; text-transform: none; color: var(--accent); }
body[data-look="grimoire"] .chip-s.disp.warm, body[data-look="grimoire"] .chip-s.disp.close, body[data-look="grimoire"] .chip-s.disp.loyal { color: var(--ochre); border-color: var(--ochre); }
body[data-look="grimoire"] .menu { background: #f5eddb; border-color: #b39868; border-radius: 3px; box-shadow: 0 8px 22px rgba(60, 40, 20, .25); }
body[data-look="grimoire"] .jump { background: #f5eddb; color: var(--accent); border-color: #b39868; box-shadow: 0 2px 6px rgba(60, 40, 20, .25); }

/* ================================================================ dash: Redline, a dashboard at night */
html:has(> body[data-look="dash"]) { background: #0b0c0f; }
body[data-look="dash"] {
  --bg: #0b0c0f; --panel: #121418; --panel2: #1a1d22; --ink: #e4e9ee; --muted: #95a0ab; --line: #262a31; --dim: #77838f;
  --accent: #ff4136; --accent-ink: #ffffff; --user: linear-gradient(#1b1f25, #15181d); --red: #ff4136; --green: #3ddc84;
  --font: "Avenir Next", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Avenir Next Condensed", "Futura", "Avenir Next", sans-serif;
  --strong: #ffffff; --user-ink: #e4e9ee; --gm-ink: #dfe5eb; --link: #7fd3ff; --heading: #7fd3ff;
  --die: #0d0f12; --pip: #7fd3ff; --die-edge: #3a4049;
  --clean: #3ddc84; --cost: #ffb020; --miss: #ff4136; --disaster: #7a0b05;
  --card: radial-gradient(120% 90% at 50% 0%, #1b1f25, #0e1013 70%); --card-line: #2a2f37; --shadow: 0 6px 18px rgba(0, 0, 0, .5); --radius: 16px;
  --ice: #7fd3ff; --redbtn: linear-gradient(#d42a1f, #a01c14);
  --carbon: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .25)),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 4px), #17191d;
  background: radial-gradient(120% 50% at 50% 115%, rgba(255, 65, 54, .08), transparent 60%), #0b0c0f;
}
body[data-look="dash"] .bar { background: var(--carbon); border-bottom: 2px solid #c8261d; }
body[data-look="dash"] .bar .title { font-family: var(--font-display); font-size: 19px; font-weight: 700; font-style: italic; letter-spacing: .05em; text-transform: uppercase; }
body[data-look="dash"] #play-sub { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ice); }
body[data-look="dash"] .ghost { border-radius: 8px; border-color: #30353d; background: linear-gradient(#23272d, #16191d); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
body[data-look="dash"] #back { color: var(--accent); }
body[data-look="dash"] #debt { background: linear-gradient(#2a0906, #1c0604); color: #ff9c94; border-bottom: 1px solid var(--red);
  font-family: var(--font-display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
body[data-look="dash"] #debt::before { content: "\25B2  "; color: var(--red); }
body[data-look="dash"] #composer, body[data-look="dash"] .attachbar, body[data-look="dash"] .startbar { background: var(--carbon); border-top-color: #000; }
body[data-look="dash"] #composer { align-items: flex-end; }
body[data-look="dash"] #input { background: #08090b; border-color: #2a2f37; border-radius: 10px; }
body[data-look="dash"] #input:focus { border-color: var(--ice); }
body[data-look="dash"] #send { width: 46px; height: 46px; margin: 0 3px 0 4px; flex: none; border-radius: 50%; color: #fff; font-size: 18px;
  background: radial-gradient(circle at 50% 35%, #ea3a2e, #9c1a12 72%); box-shadow: 0 0 0 2px #0b0c0f, 0 0 0 4px #474e58, 0 0 14px rgba(255, 65, 54, .35); }
body[data-look="dash"] #send:disabled { background: radial-gradient(circle at 50% 35%, #2a2f37, #16191d); color: var(--dim); box-shadow: 0 0 0 2px #0b0c0f, 0 0 0 4px #2a2f37; }
body[data-look="dash"] .attach-chip, body[data-look="dash"] .pace-toggle, body[data-look="dash"] .startbar button, body[data-look="dash"] .grit-spend,
body[data-look="dash"] .tabs .tab { font-family: var(--font-display); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
body[data-look="dash"] .attach-chip, body[data-look="dash"] .startbar button, body[data-look="dash"] .grit-spend.picked, body[data-look="dash"] .pace-toggle.on,
body[data-look="dash"] .tabs .tab.active { background: var(--redbtn); color: #fff; border-color: #ff4136; }
body[data-look="dash"] .attach-chip, body[data-look="dash"] .pace-toggle { border-radius: 6px; }
body[data-look="dash"] .msg.user { border: 1px solid #2a2f37; border-right: 3px solid var(--red); border-radius: 10px 3px 3px 10px; }
body[data-look="dash"] .msg.gm .prose { line-height: 1.55; }
body[data-look="dash"] .prose h1, body[data-look="dash"] .prose h2, body[data-look="dash"] .prose h3 { font-size: 20px; font-style: italic; letter-spacing: .04em; text-transform: uppercase; }
body[data-look="dash"] .prose blockquote { border-left-color: var(--ice); color: #bccad6; }
body[data-look="dash"] .prose hr { height: 3px; border: 0; border-radius: 2px; opacity: .7; background: linear-gradient(90deg, var(--ice) 0 58%, #ffb020 58% 80%, #ff4136 80%); }
body[data-look="dash"] .divider, body[data-look="dash"] .typing { font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
body[data-look="dash"] .typing { color: var(--ice); }
body[data-look="dash"] .dice { position: relative; padding-top: 18px; }
body[data-look="dash"] .dice::before { content: ""; position: absolute; left: 14px; right: 14px; top: 8px; height: 4px; border-radius: 2px; opacity: .8;
  background: repeating-linear-gradient(90deg, transparent 0 7px, #0e1013 7px 9px), linear-gradient(90deg, var(--ice) 0 58%, #ffb020 58% 80%, #ff4136 80%); }
body[data-look="dash"] .dice-head { font-family: var(--font-display); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
body[data-look="dash"] .dice-id { font-family: var(--font-display); font-size: 12px; }
body[data-look="dash"] .die { border-radius: 9px; box-shadow: inset 0 0 0 1px #000, 0 2px 0 #000; }
body[data-look="dash"] .die i.pip { box-shadow: 0 0 4px rgba(127, 211, 255, .8); }
body[data-look="dash"] .dice-math { font-family: var(--font-display); font-weight: 500; }
body[data-look="dash"] .dice-math .eq { font-size: 26px; font-style: italic; color: var(--ice); }
body[data-look="dash"] .dice-math .vs { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
body[data-look="dash"] .dice-outcome .now { border-radius: 6px; font-family: var(--font-display); font-style: italic; letter-spacing: .1em; }
body[data-look="dash"] .dice-body .now { font-size: 16px; }
body[data-look="dash"] :is(.dice, .beat)[data-outcome] .now { color: #0b0c0f; }
body[data-look="dash"] :is(.dice, .beat)[data-outcome="clean"] .now { box-shadow: 0 0 12px rgba(61, 220, 132, .45); }
body[data-look="dash"] :is(.dice, .beat)[data-outcome="cost"] .now { box-shadow: 0 0 12px rgba(255, 176, 32, .4); }
body[data-look="dash"] :is(.dice, .beat)[data-outcome="miss"] .now { box-shadow: 0 0 12px rgba(255, 65, 54, .45); }
body[data-look="dash"] :is(.dice, .beat)[data-outcome="disaster"] .now { color: #ffd6d2; box-shadow: inset 0 0 0 1px #ff4136, 0 0 14px rgba(255, 65, 54, .5);
  background: repeating-linear-gradient(-45deg, #7a0b05 0 6px, #520703 6px 12px); }
body[data-look="dash"] .dice-foot .tag { border-radius: 4px; font-family: var(--font-display); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
body[data-look="dash"] .dice-foot .tag.lining, body[data-look="dash"] .dice-foot .tag.grit-spent { color: var(--ice); border-color: var(--ice); }
body[data-look="dash"] .grit-meter .lbl { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
body[data-look="dash"] .grit-meter b { width: 14px; height: 7px; border-radius: 1px; transform: skewX(-18deg); }
body[data-look="dash"] .grit-meter b.on { background: var(--ice); border-color: var(--ice); }
body[data-look="dash"] .grit-spend { border-radius: 10px; border-style: solid; background: rgba(255, 65, 54, .08); color: #ff7a70; }
body[data-look="dash"] .envelope { border-radius: 12px; }
body[data-look="dash"] .payoff { border-left-color: var(--ice); }
body[data-look="dash"] .payoff-when { color: var(--ice); font-family: var(--font-display); }
body[data-look="dash"] .handout { border-radius: 12px; }
body[data-look="dash"] .handout:is([data-kind="letter"], [data-kind="note"], [data-kind="clipping"], [data-kind="contract"], [data-kind="document"]) { border-radius: 3px; }
body[data-look="dash"] .handout[data-kind="message"] { background: linear-gradient(#20242a, #16191d); border-color: #30353d; border-radius: 16px; }
body[data-look="dash"] .handout[data-kind="message"] .handout-title { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ice); }
body[data-look="dash"] .handout[data-kind="flyer"] { border: 2px solid var(--red); background: repeating-linear-gradient(-45deg, rgba(255, 65, 54, .07) 0 10px, transparent 10px 20px), #111317; }
body[data-look="dash"] .handout[data-kind="flyer"] .handout-title { font-size: 26px; font-style: italic; letter-spacing: .03em; }
body[data-look="dash"] .handout[data-kind="job"] { border-color: var(--red); }
body[data-look="dash"] .handout-kind, body[data-look="dash"] .handout[data-kind="gift"]::before { font-family: var(--font-display); }
body[data-look="dash"] .drawer-card { background: #101216; border-top: 2px solid #c8261d; }
body[data-look="dash"] .tabs .tab { border-radius: 6px; border-color: #2a2f37; background: linear-gradient(#1d2126, #14171b); font-size: 13px; }
body[data-look="dash"] .codex .entry { border-radius: 12px; background: linear-gradient(#15181d, #101216); }
body[data-look="dash"] .codex .entry.focus { border-color: var(--ice); }
body[data-look="dash"] .codex .ename { font-size: 18px; font-style: italic; letter-spacing: .03em; text-transform: uppercase; }
body[data-look="dash"] .codex .fact .when, body[data-look="dash"] .codex .yours { color: var(--ice); }
body[data-look="dash"] .chip-s.disp.warm, body[data-look="dash"] .chip-s.disp.close, body[data-look="dash"] .chip-s.disp.loyal { color: var(--cost); border-color: var(--cost); }
body[data-look="dash"] .codex .tier { font-family: var(--font-display); color: var(--ice); }
body[data-look="dash"] .menu { background: #15171b; border-color: #2a2f37; }
body[data-look="dash"] .menu button { font-family: var(--font-display); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
body[data-look="dash"] .jump { background: #15171b; color: var(--ice); border-color: #30353d; }

/* ================================================================ notebook: Late Bloom, a student's notebook */
html:has(> body[data-look="notebook"]) { background: #fbfaf5; }
body[data-look="notebook"] {
  --bg: #fbfaf5; --panel: #f4f2e8; --panel2: #eae7da; --ink: #27303c; --muted: #56606d; --line: #cdd8e8; --dim: #646d79;
  --accent: #2553b5; --accent-ink: #ffffff; --user: #fff4a3; --red: #c62828; --green: #2e7d32;
  --font: "Avenir Next", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  --font-display: "Noteworthy", "Bradley Hand", "Chalkboard SE", "Marker Felt", cursive;
  --strong: #1b222b; --user-ink: #27303c; --gm-ink: #27303c; --link: #2553b5; --heading: #27303c;
  --die: #ffffff; --pip: #27303c; --die-edge: #27303c;
  --clean: #2e7d32; --cost: #a55a00; --miss: #c62828; --disaster: #b71c1c;
  --card: #fffefa; --card-line: #dde3eb; --shadow: 0 1px 2px rgba(40, 50, 70, .14), 0 4px 10px rgba(40, 50, 70, .06); --radius: 4px;
  --hl: #fff176; --margin: rgba(229, 115, 115, .7);
  --rules: repeating-linear-gradient(transparent 0 23px, #dfe8f5 23px 24px);
  background: #fbfaf5;
}
body[data-look="notebook"] #messages { background: linear-gradient(90deg, transparent 6px, rgba(229, 115, 115, .35) 6px 7px, transparent 7px); }
body[data-look="notebook"] .bar { padding-bottom: 18px; border-bottom: 1px solid #e3dfcf;
  background: radial-gradient(circle, #d6d0bd 0 3px, transparent 3.5px) 4px calc(100% - 3px) / 20px 10px repeat-x, #f4f2e8; }
body[data-look="notebook"] .bar .title { flex: 0 1 auto; margin-right: auto; align-self: flex-start; max-width: 100%; padding: 0 3px; font-family: var(--font-display); font-size: 20px; font-weight: 700;
  background: linear-gradient(transparent 55%, var(--hl) 55% 90%, transparent 90%); }
body[data-look="notebook"] .ghost { border: 1.5px solid #9aa8bb; border-radius: 5px; font-family: var(--font-display); font-weight: 700; }
body[data-look="notebook"] #debt { background: #fdecea; color: #b3261e; border-bottom: 1px solid #f2b8b5; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
body[data-look="notebook"] #composer, body[data-look="notebook"] .attachbar, body[data-look="notebook"] .startbar { background: #f4f2e8; border-top-color: #e3dfcf; }
body[data-look="notebook"] #input { background: #fffefa; border-color: #d3dceb; border-bottom: 2px solid #7f9cc9; border-radius: 4px 4px 0 0; }
body[data-look="notebook"] #input:focus { border-color: #7f9cc9; border-bottom-color: var(--accent); }
body[data-look="notebook"] #send { border: 1.5px solid var(--ink); border-radius: 6px; background: var(--hl); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
body[data-look="notebook"] #send:disabled { background: var(--panel2); color: #8a929c; border-color: #b8bfc8; box-shadow: none; }
body[data-look="notebook"] .attach-chip, body[data-look="notebook"] .pace-toggle.on, body[data-look="notebook"] .startbar button,
body[data-look="notebook"] .grit-spend.picked, body[data-look="notebook"] .tabs .tab.active { background: var(--hl); color: var(--ink); border: 1.5px solid var(--ink); }
body[data-look="notebook"] .attach-chip, body[data-look="notebook"] .pace-toggle, body[data-look="notebook"] .startbar button { border-radius: 5px; font-family: var(--font-display); font-weight: 700; }
body[data-look="notebook"] .pace-toggle { border: 1.5px solid #9aa8bb; color: var(--muted); }
body[data-look="notebook"] .msg.user { border-radius: 3px; box-shadow: 0 1px 2px rgba(80, 70, 0, .15); }
body[data-look="notebook"] .msg.user .tap { border-radius: 4px; }
body[data-look="notebook"] .msg.gm .prose { line-height: 1.6; }
body[data-look="notebook"] .prose h1, body[data-look="notebook"] .prose h2, body[data-look="notebook"] .prose h3 { display: table; padding: 0 4px; font-size: 21px; font-weight: 700;
  background: linear-gradient(transparent 55%, var(--hl) 55% 90%, transparent 90%); }
body[data-look="notebook"] .prose strong { background: linear-gradient(transparent 58%, rgba(255, 241, 118, .9) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body[data-look="notebook"] .prose blockquote { border-left: 3px solid var(--margin); color: #434d5a; }
body[data-look="notebook"] .prose hr { border-top: 1.5px dashed #9fb6d8; }
body[data-look="notebook"] .typing, body[data-look="notebook"] .divider { font-family: var(--font-display); font-size: 14px; }
body[data-look="notebook"] .dice, body[data-look="notebook"] .envelope { border-radius: 3px; }
body[data-look="notebook"] .dice:not(.montage):not(.raised-note) { background: var(--rules) 0 6px, var(--card); }
body[data-look="notebook"] .dice-head { padding-bottom: 3px; border-bottom: 1.5px solid var(--margin); font-family: var(--font-display); font-size: 15px; color: var(--ink); }
body[data-look="notebook"] .dice-id { color: var(--dim); }
body[data-look="notebook"] .die { border-width: 1.5px; border-radius: 7px; box-shadow: 1.5px 1.5px 0 var(--ink); }
body[data-look="notebook"] .dice-math { font-family: var(--font-display); font-size: 19px; }
body[data-look="notebook"] .dice-math .eq { font-weight: 700; }
body[data-look="notebook"] .dice-outcome .now { background: #fffefa; border: 2px solid currentColor; border-radius: 50% 46% 52% 44% / 60% 52% 48% 40%;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0; text-transform: none; }
body[data-look="notebook"] .dice-body .now { padding: 0 12px; font-size: 18px; }
body[data-look="notebook"] :is(.dice, .beat)[data-outcome="clean"] .now { background: #fffefa; color: var(--clean); }
body[data-look="notebook"] :is(.dice, .beat)[data-outcome="cost"] .now { background: #fffefa; color: var(--cost); }
body[data-look="notebook"] :is(.dice, .beat)[data-outcome="miss"] .now { background: #fffefa; color: var(--miss); }
body[data-look="notebook"] :is(.dice, .beat)[data-outcome="disaster"] .now { background: var(--disaster); color: #fff; border-color: var(--disaster); }
body[data-look="notebook"] :is(.dice, .beat)[data-outcome="clean"] .now::before { content: "\2713"; margin-right: 3px; }
body[data-look="notebook"] :is(.dice, .beat)[data-outcome="miss"] .now::before, body[data-look="notebook"] :is(.dice, .beat)[data-outcome="disaster"] .now::before { content: "\2717"; margin-right: 4px; }
body[data-look="notebook"] .dice-outcome .was { font-family: var(--font-display); text-transform: none; font-size: 13px; }
body[data-look="notebook"] .dice-foot .tag { border-radius: 4px; font-family: var(--font-display); font-size: 13px; }
body[data-look="notebook"] .dice-foot .tag.lining, body[data-look="notebook"] .dice-foot .tag.grit-spent { background: var(--hl); color: var(--ink); border-color: transparent; }
body[data-look="notebook"] .grit-meter .lbl { font-family: var(--font-display); font-size: 13px; }
body[data-look="notebook"] .grit-meter b { width: 11px; height: 11px; border: 1.5px solid var(--ink); }
body[data-look="notebook"] .grit-meter b.on { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hl); }
body[data-look="notebook"] .grit-spend { border: 1.5px dashed var(--accent); border-radius: 5px; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
body[data-look="notebook"] .env-about, body[data-look="notebook"] .payoff-what { font-family: var(--font-display); font-size: 17px; }
body[data-look="notebook"] .payoff { border-left-color: var(--margin); }
body[data-look="notebook"] .payoff-when { font-family: var(--font-display); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--miss); }
body[data-look="notebook"] .handout { position: relative; border-radius: 3px; box-shadow: var(--shadow); }
body[data-look="notebook"] .handout:is([data-kind="letter"], [data-kind="clipping"], [data-kind="contract"], [data-kind="document"])::after { content: ""; position: absolute; top: -7px; left: 50%;
  width: 64px; height: 16px; margin-left: -32px; transform: rotate(-3deg); background: rgba(255, 255, 255, .6); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
body[data-look="notebook"] .handout[data-kind="message"] { background: #e9eef5; border-color: #d3dceb; border-radius: 16px 16px 16px 4px; }
body[data-look="notebook"] .handout[data-kind="flyer"] { border: 1.5px dashed var(--ink); }
body[data-look="notebook"] .handout[data-kind="job"] { border-color: #9aa8bb; }
body[data-look="notebook"] .handout-kind, body[data-look="notebook"] .handout[data-kind="gift"]::before { font-family: var(--font-display); font-size: 13px; letter-spacing: 0; text-transform: none; }
body[data-look="notebook"] .drawer-card { background: linear-gradient(90deg, transparent 6px, rgba(229, 115, 115, .35) 6px 7px, transparent 7px), #fbfaf5; border-radius: 6px 6px 0 0; }
body[data-look="notebook"] .drawer-card .bar { padding-bottom: 8px; background: #f4f2e8; }
body[data-look="notebook"] .tabs { background: #f4f2e8; }
body[data-look="notebook"] .tabs .tab { border: 1.5px solid #c9d3e2; border-radius: 8px 8px 3px 3px; background: #fffefa; font-family: var(--font-display); font-weight: 700; }
body[data-look="notebook"] .tabs .tab:nth-child(6n+2) { background: #ffe3e3; } body[data-look="notebook"] .tabs .tab:nth-child(6n+3) { background: #e0efff; }
body[data-look="notebook"] .tabs .tab:nth-child(6n+4) { background: #e3f5dc; } body[data-look="notebook"] .tabs .tab:nth-child(6n+5) { background: #efe4ff; }
body[data-look="notebook"] .tabs .tab:nth-child(6n) { background: #ffead4; }
body[data-look="notebook"] .tabs .tab.active { background: var(--hl); color: var(--ink); border-color: var(--ink); }
body[data-look="notebook"] .codex .entry { border-radius: 3px; box-shadow: var(--shadow); }
body[data-look="notebook"] .codex .entry.focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 241, 118, .9); }
body[data-look="notebook"] .codex .ename { font-size: 18px; font-weight: 700; }
body[data-look="notebook"] .codex .fact .when { color: var(--miss); }
body[data-look="notebook"] .codex .tier { font-family: var(--font-display); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); }
body[data-look="notebook"] .codex .thread { border-left: 2px solid var(--margin); }
body[data-look="notebook"] .sheet-pane { line-height: 24px; background: var(--rules) 0 var(--pad); }
body[data-look="notebook"] .menu { background: #fffefa; border-color: #cdd8e8; box-shadow: 0 8px 22px rgba(40, 50, 70, .18); }
body[data-look="notebook"] .jump { background: var(--hl); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ================================================================ console: Say Again, the dispatch console */
html:has(> body[data-look="console"]) { background: #0c0906; }
body[data-look="console"] {
  --bg: #0d0a07; --panel: #120e09; --panel2: #1b150d; --ink: #f0e2c8; --muted: #b9986c; --line: #3a2c1a; --dim: #9a7d55;
  --accent: #ffb000; --accent-ink: #1a1000; --user: #17110a; --red: #ff6a3d; --green: #9be36b;
  --font: "Avenir Next", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: ui-monospace, "SF Mono", Menlo, monospace; --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --strong: #fff4de; --user-ink: #f0e2c8; --gm-ink: #ecdec4; --link: #ffc24a; --heading: #ffb000;
  --die: #140f08; --pip: #ffb000; --die-edge: #6a4c1c;
  --clean: #9be36b; --cost: #ffb000; --miss: #ff6a3d; --disaster: #d81f38;
  --card: #110d08; --card-line: #3a2c1a; --shadow: none; --radius: 3px;
  --amber: #ffb000; --edge: #5a4220; --glow: 0 0 6px rgba(255, 176, 0, .45);
  --scan: repeating-linear-gradient(0deg, rgba(255, 176, 0, .05) 0 1px, transparent 1px 3px);
  background: radial-gradient(140% 90% at 50% 40%, #120d08 0%, #0b0805 80%);
}
body[data-look="console"] .bar { background: var(--scan), linear-gradient(#1a130b, #120d08); border-bottom-color: var(--edge); }
body[data-look="console"] .bar .title { font-family: var(--font-mono); font-size: 15px; letter-spacing: .15em; text-transform: uppercase; color: var(--amber); text-shadow: var(--glow); }
body[data-look="console"] #play-title::before { content: "\25CF"; margin-right: 8px; font-size: 10px; vertical-align: 2px; color: #ff4a2a; text-shadow: 0 0 6px #ff4a2a; }
body[data-look="console"] #play-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; text-transform: uppercase; }
body[data-look="console"] .ghost { border-radius: 2px; border-color: var(--edge); font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
body[data-look="console"] #debt { background: repeating-linear-gradient(-45deg, #2a1206 0 8px, #331607 8px 16px); color: #ffc58a; border-bottom: 1px solid var(--red);
  font: 600 12px/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
body[data-look="console"] #debt::before { content: "PRIORITY \25B8  "; color: var(--red); }
body[data-look="console"] #composer, body[data-look="console"] .attachbar, body[data-look="console"] .startbar { background: var(--scan), #120d08; border-top-color: var(--edge); }
body[data-look="console"] #input { background: #080604; border-color: #4a3818; border-radius: 2px; caret-color: var(--amber); }
body[data-look="console"] #input:focus { border-color: var(--amber); }
body[data-look="console"] #input::placeholder { color: var(--dim); font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
body[data-look="console"] #send { border-radius: 3px; background: linear-gradient(#ffc03a, #e09a00); box-shadow: 0 0 10px rgba(255, 176, 0, .3); }
body[data-look="console"] #send:disabled { background: #2a2012; color: var(--dim); box-shadow: none; }
body[data-look="console"] .attach-chip, body[data-look="console"] .pace-toggle, body[data-look="console"] .startbar button, body[data-look="console"] .grit-spend,
body[data-look="console"] .tabs .tab, body[data-look="console"] .menu button { border-radius: 2px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
body[data-look="console"] .pace-toggle { border-color: var(--edge); }
body[data-look="console"] #messages { counter-reset: log; }
body[data-look="console"] .msg.user, body[data-look="console"] .msg.gm { counter-increment: log; }
body[data-look="console"] .msg.user::before, body[data-look="console"] .msg.gm::before { display: block; margin-bottom: 5px; font: 600 10.5px/1.5 var(--font-mono);
  letter-spacing: .12em; color: var(--amber); text-shadow: var(--glow); white-space: nowrap; }
body[data-look="console"] .msg.user::before { content: "TX \25B8  " counter(log, decimal-leading-zero) "  \00B7  DISPATCH"; }
body[data-look="console"] .msg.gm::before { content: "RX \25C2  " counter(log, decimal-leading-zero) "  \00B7  FIELD"; }
body[data-look="console"] .msg.user { border: 1px solid #4a3818; border-radius: 2px; padding: 7px 12px 10px; }
body[data-look="console"] .msg.gm { padding-left: 12px; border-left: 2px solid var(--edge); }
body[data-look="console"] .msg.gm .prose { line-height: 1.55; }
body[data-look="console"] .prose h1, body[data-look="console"] .prose h2, body[data-look="console"] .prose h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-shadow: var(--glow); }
body[data-look="console"] .prose blockquote { border-left: 2px solid var(--amber); color: #ffd797; }
body[data-look="console"] .prose hr { border-top: 1px dashed var(--edge); }
body[data-look="console"] .tool, body[data-look="console"] .divider, body[data-look="console"] .typing { font-family: var(--font-mono); font-size: 12px; }
body[data-look="console"] .divider, body[data-look="console"] .typing { letter-spacing: .08em; text-transform: uppercase; }
body[data-look="console"] .typing { color: var(--amber); text-shadow: var(--glow); }
body[data-look="console"] .divider::before { content: "--- "; } body[data-look="console"] .divider::after { content: " ---"; }
body[data-look="console"] .dice, body[data-look="console"] .envelope { background: var(--scan), var(--card); border: 1px dashed var(--edge); border-radius: 2px; }
body[data-look="console"] .dice-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
body[data-look="console"] .dice:not(.montage) .dice-what::before { content: "ROLL \25B8  "; color: var(--amber); }
body[data-look="console"] .die { border-radius: 2px; }
body[data-look="console"] .die i.pip { box-shadow: 0 0 4px rgba(255, 176, 0, .7); }
body[data-look="console"] .dice-math, body[data-look="console"] .beat-total { font-family: var(--font-mono); }
body[data-look="console"] .dice-math .eq { color: var(--amber); text-shadow: var(--glow); }
body[data-look="console"] .dice-outcome .now { border-radius: 0; font-family: var(--font-mono); letter-spacing: .12em; }
body[data-look="console"] .dice-body .now { font-size: 13px; }
body[data-look="console"] :is(.dice, .beat)[data-outcome] .now { color: #140c02; }
body[data-look="console"] :is(.dice, .beat)[data-outcome="miss"] .now { background: transparent; color: var(--miss); box-shadow: inset 0 0 0 1.5px var(--miss); }
body[data-look="console"] :is(.dice, .beat)[data-outcome="disaster"] .now { color: #fff; box-shadow: 0 0 0 1px #ff8a70, 0 0 12px rgba(216, 31, 56, .5); }
body[data-look="console"] .dice-outcome .was { font-family: var(--font-mono); }
body[data-look="console"] .dice-foot .tag, body[data-look="console"] .chip-s { border-radius: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
body[data-look="console"] .grit-meter .lbl { font-family: var(--font-mono); text-transform: uppercase; }
body[data-look="console"] .grit-meter b { border-radius: 0; }
body[data-look="console"] .env-about { font-family: var(--font); }
body[data-look="console"] .payoff-when, body[data-look="console"] .env-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
body[data-look="console"] .handout { border-radius: 2px; }
body[data-look="console"] .handout:is([data-kind="message"], [data-kind="flyer"], [data-kind="job"], [data-kind="gift"]) { background: var(--scan), var(--card); border: 1px solid var(--edge); }
body[data-look="console"] .handout[data-kind="job"] { border-style: dashed; }
body[data-look="console"] .handout:is([data-kind="message"], [data-kind="flyer"], [data-kind="job"], [data-kind="gift"]) .handout-title { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); text-shadow: var(--glow); }
body[data-look="console"] .handout[data-kind="message"] .handout-title::before { content: "MSG \25C2  "; }
body[data-look="console"] .handout-kind, body[data-look="console"] .handout[data-kind="gift"]::before { font-family: var(--font-mono); }
body[data-look="console"] .drawer-card { border-radius: 0; border-top: 1px solid var(--amber); }
body[data-look="console"] .tabs { background: var(--scan); }
body[data-look="console"] .tabs .tab { border-color: var(--edge); }
body[data-look="console"] .codex .entry { border-radius: 2px; }
body[data-look="console"] .codex .entry.focus { border-color: var(--amber); }
body[data-look="console"] .codex .ename { font-family: var(--font-mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
body[data-look="console"] .codex .fact .when, body[data-look="console"] .codex .tier { color: var(--amber); font-family: var(--font-mono); }
body[data-look="console"] .sheet-pane { color: #ffd48a; text-shadow: 0 0 4px rgba(255, 176, 0, .25); }
body[data-look="console"] .menu { background: var(--scan), #15100a; border-color: var(--edge); border-radius: 0; }
body[data-look="console"] .jump { border-radius: 2px; border-color: var(--edge); box-shadow: none; }

/* ================================================================ fridge: Under One Roof, the fridge door */
html:has(> body[data-look="fridge"]) { background: #e3f0ea; }
body[data-look="fridge"] {
  --bg: #eaf4f0; --panel: #dcece5; --panel2: #cfe3da; --ink: #2b3432; --muted: #52605b; --line: #bcd5cb; --dim: #5f6d68;
  --accent: #c0392b; --accent-ink: #ffffff; --user: #ffd6e0; --red: #c0392b; --green: #1b7d4a;
  --font: ui-rounded, "SF Pro Rounded", "Avenir Next", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Chalkboard SE", "Marker Felt", "Noteworthy", "Comic Sans MS", cursive;
  --strong: #1c2321; --user-ink: #2b3432; --gm-ink: #2b3432; --link: #c0392b; --heading: #b03026;
  --die: #ffffff; --pip: #2b3432; --die-edge: #2b3432;
  --clean: #1b7d4a; --cost: #f39c12; --miss: #c0392b; --disaster: #2d3436;
  --card: #fff4a8; --card-line: transparent; --shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 9px 12px -8px rgba(0, 0, 0, .35); --radius: 18px;
  --magnet-red: radial-gradient(circle at 35% 30%, #ffb3aa 0 12%, #e74c3c 45%, #a8291d);
  --magnet-blue: radial-gradient(circle at 35% 30%, #d6ecff 0 12%, #3f95e6 45%, #1d5fa8);
  --magnet-green: radial-gradient(circle at 35% 30%, #d7f7e3 0 12%, #2fb36b 45%, #17774a);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, 0) 50%), #eaf4f0;
}
body[data-look="fridge"] .bar { padding-bottom: 18px; border-bottom: 4px solid #bcd5cb;
  background: linear-gradient(#fbfdfc, #b8c4bf) center bottom 6px / 38% 6px no-repeat, linear-gradient(#e6f2ed, #d7eae2); }
body[data-look="fridge"] .bar .title { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
body[data-look="fridge"] .ghost { border: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 0 #bcd5cb, 0 3px 8px rgba(0, 0, 0, .08); font-family: var(--font-display); }
body[data-look="fridge"] #debt { background: #fff4a8; color: #8e2a20; border-bottom: 1px solid #e6d77a; font-family: var(--font-display); font-size: 14px; }
body[data-look="fridge"] #debt::before { content: "\25CF  "; color: #e74c3c; }
body[data-look="fridge"] #composer, body[data-look="fridge"] .attachbar, body[data-look="fridge"] .startbar { background: #dcece5; border-top: 4px solid #bcd5cb; }
body[data-look="fridge"] .attachbar + #composer { border-top: 0; }
body[data-look="fridge"] #composer { align-items: flex-end; }
body[data-look="fridge"] #input { background: #fff; border: 2px solid #c9ddd5; border-radius: 18px; }
body[data-look="fridge"] #input:focus { border-color: #e74c3c; }
body[data-look="fridge"] #send { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--magnet-red); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  box-shadow: 0 3px 0 #8e2a20, 0 6px 10px rgba(0, 0, 0, .2); }
body[data-look="fridge"] #send:disabled { background: #cfe3da; color: #7d8a86; box-shadow: none; text-shadow: none; }
body[data-look="fridge"] .attach-chip, body[data-look="fridge"] .pace-toggle, body[data-look="fridge"] .startbar button { border-radius: 999px; font-family: var(--font-display); box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
body[data-look="fridge"] .attach-chip { background: #fff; color: #a8291d; border: 2px solid #e74c3c; }
body[data-look="fridge"] .pace-toggle { background: #fff; border: 0; color: var(--muted); }
body[data-look="fridge"] .pace-toggle.on, body[data-look="fridge"] .startbar button, body[data-look="fridge"] .tabs .tab.active { background: var(--ink); color: #fff4a8; }
body[data-look="fridge"] .msg.user { border-radius: 2px; padding: 12px 14px; box-shadow: var(--shadow); transform: rotate(.6deg); }
body[data-look="fridge"] .msg.user .tap { border-radius: 999px; }
body[data-look="fridge"] .msg.gm .prose { line-height: 1.6; }
body[data-look="fridge"] .prose h1, body[data-look="fridge"] .prose h2, body[data-look="fridge"] .prose h3 { font-size: 20px; }
body[data-look="fridge"] .prose blockquote { border-left: 4px solid #f5a9ba; color: #3d4845; }
body[data-look="fridge"] .prose hr { border-top: 2px dotted #aac7bb; }
body[data-look="fridge"] .typing, body[data-look="fridge"] .divider { font-family: var(--font-display); font-size: 13px; }
body[data-look="fridge"] .dicebox { gap: 18px; }
body[data-look="fridge"] .dicebox:not(:empty) { margin: 12px 0 16px; }
body[data-look="fridge"] .dice, body[data-look="fridge"] .envelope { position: relative; border-radius: 2px; padding-top: 14px; transform: rotate(-.6deg); }
body[data-look="fridge"] :is(.dice, .envelope)::before { content: ""; position: absolute; top: -8px; left: 50%; width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50%; background: var(--magnet-blue); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
body[data-look="fridge"] .dicebox > :nth-child(2n) { transform: rotate(.5deg); }
body[data-look="fridge"] .dicebox > .dice:nth-child(2n) { background: #d9efff; }
body[data-look="fridge"] .dicebox > :is(.dice, .envelope):nth-child(2n)::before { background: var(--magnet-red); }
body[data-look="fridge"] .dicebox > :is(.dice, .envelope):nth-child(3n)::before { background: var(--magnet-green); left: 30%; }
body[data-look="fridge"] .envelope { background: #ffe3ea; }
body[data-look="fridge"] .dice-head { font-family: var(--font-display); font-size: 14px; color: #414b48; }
body[data-look="fridge"] .dice-id { color: #56605d; }
body[data-look="fridge"] .die { border-width: 1.5px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
body[data-look="fridge"] .dice-math { font-family: var(--font-display); }
body[data-look="fridge"] .dice-outcome .now { border-radius: 10px; font-family: var(--font-display); letter-spacing: .04em; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
body[data-look="fridge"] .dice-body .now { font-size: 15px; transform: rotate(-3deg); }
body[data-look="fridge"] :is(.dice, .beat)[data-outcome="clean"] .now, body[data-look="fridge"] :is(.dice, .beat)[data-outcome="miss"] .now { color: #fff; }
body[data-look="fridge"] :is(.dice, .beat)[data-outcome="cost"] .now { color: #2b1a00; }
body[data-look="fridge"] :is(.dice, .beat)[data-outcome="disaster"] .now { color: #ffe066; }
body[data-look="fridge"] .dice-foot .tag { border-radius: 999px; background: rgba(255, 255, 255, .6); border-color: rgba(0, 0, 0, .15); font-family: var(--font-display); }
body[data-look="fridge"] .dice-foot .tag.lining, body[data-look="fridge"] .dice-foot .tag.grit-spent { color: #a8291d; border-color: #c0392b; }
body[data-look="fridge"] .grit-meter b { width: 11px; height: 11px; border-radius: 50%; border-color: #6d7a76; }
body[data-look="fridge"] .grit-meter b.on { background: #e74c3c; border-color: #a8291d; }
body[data-look="fridge"] .grit-spend { border: 2px dashed var(--accent); border-radius: 12px; font-family: var(--font-display); }
body[data-look="fridge"] .grit-spend.picked { background: var(--accent); color: #fff; }
body[data-look="fridge"] .env-icon { color: #a8291d; }
body[data-look="fridge"] .payoff { border-left: 4px solid #2fb36b; }
body[data-look="fridge"] .payoff-when { color: var(--green); font-family: var(--font-display); letter-spacing: .02em; text-transform: none; font-size: 13px; }
body[data-look="fridge"] .handout { position: relative; border: 0; border-radius: 2px; box-shadow: var(--shadow); transform: rotate(.5deg); }
body[data-look="fridge"] .handout::after { content: ""; position: absolute; top: -8px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: var(--magnet-green); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
body[data-look="fridge"] .handout:nth-child(2n)::after { background: var(--magnet-red); }
body[data-look="fridge"] .handout:is([data-kind="message"], [data-kind="flyer"]) { background: #fff; }
body[data-look="fridge"] .handout[data-kind="message"] { border-radius: 16px 16px 16px 4px; }
body[data-look="fridge"] .handout[data-kind="flyer"] { border: 2px dashed #e74c3c; }
body[data-look="fridge"] .handout[data-kind="job"] { background: #d9efff; }
body[data-look="fridge"] .handout[data-kind="gift"] { background: #ffe3ea; }
body[data-look="fridge"] .handout-kind, body[data-look="fridge"] .handout[data-kind="gift"]::before { font-family: var(--font-display); letter-spacing: .04em; color: #a8291d; }
body[data-look="fridge"] .drawer-card { border-radius: 26px 26px 0 0; box-shadow: inset 0 3px 0 #fff;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, 0) 50%), #e3f1eb; }
body[data-look="fridge"] .drawer-card .bar { background: linear-gradient(#fbfdfc, #b8c4bf) center bottom 6px / 30% 6px no-repeat, transparent; }
body[data-look="fridge"] .tabs { border-bottom: 0; padding-top: 12px; padding-bottom: 12px; }
body[data-look="fridge"] .tabs .tab { border: 0; border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--font-display); box-shadow: 0 2px 0 #bcd5cb; }
body[data-look="fridge"] .codex { gap: 18px; padding-top: 18px; }
body[data-look="fridge"] .codex .entry { position: relative; border: 0; border-radius: 2px; box-shadow: var(--shadow); transform: rotate(-.5deg); }
body[data-look="fridge"] .codex .entry:nth-of-type(2n) { background: #ffd6e0; transform: rotate(.5deg); }
body[data-look="fridge"] .codex .entry:nth-of-type(3n) { background: #d9efff; }
body[data-look="fridge"] .codex .entry summary::before { content: ""; position: absolute; top: -8px; right: 22px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--magnet-red); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
body[data-look="fridge"] .codex .entry:nth-of-type(2n) summary::before { background: var(--magnet-blue); }
body[data-look="fridge"] .codex .entry.focus { box-shadow: 0 0 0 2px #e74c3c, var(--shadow); }
body[data-look="fridge"] .codex .ename { font-size: 17px; font-weight: 700; }
body[data-look="fridge"] .codex .tier { font-family: var(--font-display); letter-spacing: .04em; }
body[data-look="fridge"] .codex .thread { background: #fff; border-left: 4px solid #f5a9ba; border-radius: 2px; }
body[data-look="fridge"] .chip-s { background: rgba(255, 255, 255, .6); }
body[data-look="fridge"] .chip-s.disp.warm, body[data-look="fridge"] .chip-s.disp.close, body[data-look="fridge"] .chip-s.disp.loyal { color: #9a4d00; border-color: #c26a10; }
body[data-look="fridge"] .sheet-pane { margin: 14px; background: #fffdf2; box-shadow: var(--shadow); }
body[data-look="fridge"] .menu { background: #fff; border: 0; border-radius: 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
body[data-look="fridge"] .menu button { border-bottom-color: #e3eee9; }
body[data-look="fridge"] .jump { border: 0; background: var(--magnet-red); color: #fff; box-shadow: 0 3px 0 #8e2a20, 0 6px 10px rgba(0, 0, 0, .2); }

/* ================================================================ crest: Crest, the academy's colours */
html:has(> body[data-look="crest"]) { background: #0a1224; }
body[data-look="crest"] {
  --bg: #0b1428; --panel: #0f1b35; --panel2: #16264a; --ink: #ece6d4; --muted: #a9b1c4; --line: #273a63; --dim: #8b95ab;
  --accent: #e0bb52; --accent-ink: #141004; --user: linear-gradient(160deg, #1d3263, #152650); --red: #ec6a7d; --green: #5cc792;
  --font: "Optima", "Candara", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Copperplate", "Copperplate Gothic Light", "Didot", "Bodoni 72", serif;
  --strong: #fff6da; --user-ink: #ece6d4; --gm-ink: #e9e3d2; --link: #e8c867; --heading: #e0bb52;
  --die: linear-gradient(150deg, #fbe9a8, #e0bb52 55%, #a88422); --pip: #0b1428; --die-edge: #7d6118;
  --clean: #3cb57a; --cost: #e0bb52; --miss: #c8374f; --disaster: #03060c;
  --card: linear-gradient(165deg, #1b2f5c, #0f1b36 60%, #0c1630); --card-line: #c9a441;
  --shadow: 0 0 0 1px #0b1428, 0 0 0 2px rgba(224, 187, 82, .3), 0 8px 20px rgba(0, 0, 0, .45); --radius: 10px;
  --gold: linear-gradient(#fbe9a8, #e0bb52 55%, #a88422); --plaque: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  background: radial-gradient(110% 55% at 50% 0%, #182a52 0%, rgba(11, 20, 40, 0) 70%), #0b1428;
}
body[data-look="crest"] .bar { background: linear-gradient(#13234a, #0d1834); border-bottom: 1px solid #c9a441; box-shadow: 0 3px 0 -1px rgba(224, 187, 82, .3); }
body[data-look="crest"] .bar .title { font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
body[data-look="crest"] #play-title::before { content: "\2726  "; font-size: 13px; vertical-align: 2px; }
body[data-look="crest"] #play-sub { font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
body[data-look="crest"] .ghost { border-radius: 3px; border-color: #7d6118; background: linear-gradient(#172a55, #0e1a36); color: #e8c867;
  font-family: var(--font-display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
body[data-look="crest"] #back { font-family: var(--font); }
body[data-look="crest"] #debt { background: linear-gradient(#7a1426, #5c0f1d); color: #ffe7b0; border-top: 1px solid #c9a441; border-bottom: 1px solid #c9a441;
  font-family: var(--font-display); font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
body[data-look="crest"] #composer, body[data-look="crest"] .attachbar, body[data-look="crest"] .startbar { background: linear-gradient(#0f1b36, #0b1428); border-top: 1px solid #c9a441; }
body[data-look="crest"] .attachbar + #composer { border-top: 0; }
body[data-look="crest"] #composer { align-items: flex-end; }
body[data-look="crest"] #input { background: #0a1226; border-color: #34487a; border-radius: 8px; }
body[data-look="crest"] #input:focus { border-color: var(--accent); }
body[data-look="crest"] #send { width: 44px; height: 44px; margin: 1px 2px; flex: none; border-radius: 50%; color: #0b1428;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #e0bb52 45%, #9c7a1f); box-shadow: 0 0 0 2px #0b1428, 0 0 0 3px #c9a441; }
body[data-look="crest"] #send:disabled { background: #1a2748; color: var(--dim); box-shadow: 0 0 0 2px #0b1428, 0 0 0 3px #34487a; }
body[data-look="crest"] .attach-chip, body[data-look="crest"] .pace-toggle, body[data-look="crest"] .startbar button, body[data-look="crest"] .grit-spend,
body[data-look="crest"] .tabs .tab { font-family: var(--font-display); letter-spacing: .07em; text-transform: uppercase; }
body[data-look="crest"] .attach-chip, body[data-look="crest"] .pace-toggle.on, body[data-look="crest"] .startbar button, body[data-look="crest"] .grit-spend.picked,
body[data-look="crest"] .tabs .tab.active { background: var(--gold); color: #141004; }
body[data-look="crest"] .attach-chip, body[data-look="crest"] .pace-toggle { border-radius: 3px; font-size: 12px; }
body[data-look="crest"] .pace-toggle { border-color: #7d6118; color: #d9c48a; }
body[data-look="crest"] .startbar button { border-radius: 4px; }
body[data-look="crest"] .msg.user { border: 1px solid #34487a; border-radius: 14px 14px 3px 14px; }
body[data-look="crest"] .msg.gm .prose { font-size: 16.5px; line-height: 1.6; }
body[data-look="crest"] .prose h1, body[data-look="crest"] .prose h2, body[data-look="crest"] .prose h3 { padding-bottom: 4px; border-bottom: 1px solid rgba(224, 187, 82, .35);
  font-size: 16px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
body[data-look="crest"] .prose strong { text-shadow: 0 0 12px rgba(224, 187, 82, .18); }
body[data-look="crest"] .prose blockquote { border-left: 2px solid var(--accent); color: #f0dca0; font-style: italic; }
body[data-look="crest"] .prose hr { height: 1px; margin: 22px 0; overflow: visible; text-align: center; border: 0;
  background: linear-gradient(90deg, transparent, #c9a441 30% 70%, transparent); }
body[data-look="crest"] .prose hr::after { content: "\2726"; position: relative; top: -.75em; padding: 0 10px; background: #0b1428; color: var(--accent); }
body[data-look="crest"] .divider, body[data-look="crest"] .typing { font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
body[data-look="crest"] .divider::before { content: "\2726  "; } body[data-look="crest"] .divider::after { content: "  \2726"; }
body[data-look="crest"] .dicebox { gap: 14px; }
body[data-look="crest"] .dice { position: relative; padding: 12px 14px; border-width: 1.5px; border-radius: 10px; }
body[data-look="crest"] .dice::before { content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 0 2px #0b1428; }
body[data-look="crest"] .dice-head { padding-bottom: 6px; border-bottom: 1px solid rgba(224, 187, 82, .3); font-family: var(--font-display); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: #e8c867; }
body[data-look="crest"] .dice-id { font-family: var(--font-display); color: var(--dim); }
body[data-look="crest"] .die { border-radius: 7px; }
body[data-look="crest"] .dice-math { font-family: "Didot", "Bodoni 72", Georgia, serif; font-size: 20px; }
body[data-look="crest"] .dice-math .eq { color: #f3d98a; font-weight: 700; }
body[data-look="crest"] .dice-outcome .now { border-radius: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; clip-path: var(--plaque); }
body[data-look="crest"] .dice-body .now { padding: 6px 16px; font-size: 14px; }
body[data-look="crest"] .montage .beat .now { padding: 2px 10px; }
body[data-look="crest"] :is(.dice, .beat)[data-outcome="clean"] .now { color: #06150d; }
body[data-look="crest"] :is(.dice, .beat)[data-outcome="cost"] .now { background: var(--gold); color: #141004; }
body[data-look="crest"] :is(.dice, .beat)[data-outcome="miss"] .now { color: #fff; }
body[data-look="crest"] :is(.dice, .beat)[data-outcome="disaster"] .now { color: #ff8a9b; background: linear-gradient(#03060c, #03060c) padding-box, #c8374f; border: 1px solid transparent; }
body[data-look="crest"] .dice-foot .tag, body[data-look="crest"] .chip-s { border-radius: 2px; font-family: var(--font-display); font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; }
body[data-look="crest"] .chip-s { padding: 0 5px; font-size: 10px; }
body[data-look="crest"] .grit-meter .lbl { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
body[data-look="crest"] .grit-meter b { width: 8px; height: 8px; margin: 0 2px; border-radius: 0; transform: rotate(45deg); }
body[data-look="crest"] .grit-spend { border: 1px solid #c9a441; border-radius: 4px; background: rgba(224, 187, 82, .08); color: #f0d27a; font-weight: 400; }
body[data-look="crest"] .envelope { border-radius: 8px; border-color: rgba(201, 164, 65, .55); }
body[data-look="crest"] .env-about, body[data-look="crest"] .payoff-when { font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
body[data-look="crest"] .env-about { font-size: 14px; }
body[data-look="crest"] .handout { border-radius: 6px; }
body[data-look="crest"] .handout:is([data-kind="message"], [data-kind="flyer"], [data-kind="job"], [data-kind="gift"]) { border-color: rgba(201, 164, 65, .55); }
body[data-look="crest"] .handout[data-kind="flyer"] { border: 1.5px solid #c9a441; }
body[data-look="crest"] .handout:is([data-kind="flyer"], [data-kind="job"], [data-kind="gift"]) .handout-title { font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: #e8c867; }
body[data-look="crest"] .handout[data-kind="message"] { background: linear-gradient(160deg, #1d3263, #152650); border-radius: 14px 14px 14px 3px; }
body[data-look="crest"] .handout[data-kind="letter"] { position: relative; padding-right: 50px; }
body[data-look="crest"] .handout[data-kind="letter"]::after { content: ""; position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d9465f, #8e1a2e 70%); box-shadow: 0 0 0 3px rgba(142, 26, 46, .25), 0 1px 2px rgba(0, 0, 0, .35); }
body[data-look="crest"] .handout-kind, body[data-look="crest"] .handout[data-kind="gift"]::before { font-family: var(--font-display); }
body[data-look="crest"] .drawer-card { background: #0d1834; border-top: 2px solid #c9a441; border-radius: 16px 16px 0 0; }
body[data-look="crest"] .tabs { gap: 3px; border-bottom-color: rgba(201, 164, 65, .4); }
body[data-look="crest"] .tabs .tab { padding: 6px 16px; border: 0; border-radius: 0; clip-path: var(--plaque); background: linear-gradient(#22386a, #14244a); color: #c9cfdc; font-size: 12px; }
body[data-look="crest"] .codex .entry { border-color: rgba(201, 164, 65, .45); border-radius: 8px; }
body[data-look="crest"] .codex .entry.focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(224, 187, 82, .2); }
body[data-look="crest"] .codex .ename { font-size: 15px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: #e8c867; }
body[data-look="crest"] .codex .tier { font-family: var(--font-display); font-weight: 400; color: var(--accent); }
body[data-look="crest"] .menu { background: #111e3c; border-color: #7d6118; border-radius: 6px; }
body[data-look="crest"] .jump { background: #111e3c; color: var(--accent); border-color: #c9a441; }

/* ================================================================ corkboard: Quest Board, the guildhall board */
html:has(> body[data-look="corkboard"]) { background: #a8784a; }
body[data-look="corkboard"] {
  --bg: #b4845a; --panel: #efe0bd; --panel2: #e6d3a8; --ink: #2e2115; --muted: #624b33; --line: #b89868; --dim: #4f3b26;
  --accent: #8c2f1b; --accent-ink: #fbf1dc; --user: #fbf6ea; --red: #9e2a1e; --green: #3f6b2f;
  --font: "Charter", "Iowan Old Style", Georgia, serif;
  --font-display: "Superclarendon", "Rockwell", "Baskerville", Georgia, serif;
  --strong: #1c130a; --user-ink: #2e2115; --gm-ink: #2e2115; --link: #8c2f1b; --heading: #6b2415;
  --die: #f6ead0; --pip: #3a2614; --die-edge: #8a6a42;
  --clean: #3f6b2f; --cost: #8f5a14; --miss: #9e2a1e; --disaster: #2a1a10;
  --card: linear-gradient(170deg, #f6ebcf, #ebd9ae); --card-line: transparent; --shadow: 0 1px 0 rgba(60, 35, 15, .25), 0 6px 14px rgba(40, 20, 5, .35); --radius: 2px;
  --cream: #f6e7c8; --parch: #f3e6c6;
  --pin-red: radial-gradient(circle at 35% 30%, #ff9a8a 0 15%, #c8321f 50%, #7d1a0e);
  --pin-brass: radial-gradient(circle at 35% 30%, #fff0b8 0 15%, #c99a3a 50%, #7a5510);
  --cork: radial-gradient(circle at 23% 31%, rgba(70, 40, 12, .26) 0 .9px, transparent 1.4px) 0 0 / 7px 5px,
    radial-gradient(circle at 71% 64%, rgba(70, 40, 12, .22) 0 1.2px, transparent 1.8px) 3px 2px / 11px 13px,
    radial-gradient(circle at 41% 83%, rgba(255, 232, 196, .2) 0 .8px, transparent 1.3px) 0 0 / 9px 7px,
    radial-gradient(circle at 88% 12%, rgba(50, 25, 5, .22) 0 1.7px, transparent 2.4px) 5px 9px / 23px 19px,
    radial-gradient(circle at 12% 58%, rgba(255, 225, 180, .16) 0 2px, transparent 3px) 0 0 / 31px 29px,
    radial-gradient(ellipse 40px 28px at 30% 40%, rgba(90, 55, 20, .14), transparent 70%) 0 0 / 97px 83px,
    radial-gradient(ellipse 34px 48px at 70% 60%, rgba(255, 220, 170, .1), transparent 70%) 0 0 / 113px 127px, #b4845a;
  --wood: linear-gradient(rgba(255, 255, 255, .07), rgba(0, 0, 0, .2)), repeating-linear-gradient(178deg, rgba(0, 0, 0, .13) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(181deg, rgba(255, 220, 170, .06) 0 1px, transparent 1px 11px), #5e3c1f;
  background: var(--cork);
}
body[data-look="corkboard"] .bar { background: var(--wood); border-bottom: 3px solid #3b2410; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); color: var(--cream); }
body[data-look="corkboard"] .bar .title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--cream); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
body[data-look="corkboard"] .bar .muted, body[data-look="corkboard"] .startbar .muted { color: #dcc39a; }
body[data-look="corkboard"] .bar .ghost { border-color: #a57a45; border-radius: 4px; background: rgba(0, 0, 0, .15); color: var(--cream); font-family: var(--font-display); }
body[data-look="corkboard"] #debt { background: var(--accent); color: #fbeedd; border-bottom: 2px solid #5e1c0f; font-family: var(--font-display); font-weight: 400; }
body[data-look="corkboard"] #composer, body[data-look="corkboard"] .attachbar, body[data-look="corkboard"] .startbar { background: var(--wood); border-top: 3px solid #3b2410; }
body[data-look="corkboard"] .attachbar + #composer { border-top: 0; }
body[data-look="corkboard"] #composer { align-items: flex-end; }
body[data-look="corkboard"] #input { background: #f5ead0; border-color: #3b2410; border-radius: 3px; }
body[data-look="corkboard"] #input::placeholder { color: #7a6040; font-style: italic; }
body[data-look="corkboard"] #send { width: 46px; height: 46px; flex: none; border: 1px solid #3b2410; border-radius: 50%; background: var(--pin-brass); color: #2a1a08;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
body[data-look="corkboard"] #send:disabled { background: #7a5a3a; color: #c7ad85; box-shadow: none; }
body[data-look="corkboard"] .attach-chip, body[data-look="corkboard"] .pace-toggle, body[data-look="corkboard"] .startbar button { border-radius: 2px; font-family: var(--font-display); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
body[data-look="corkboard"] .attach-chip, body[data-look="corkboard"] .pace-toggle { background: var(--parch); color: #6b2415; border: 0; }
body[data-look="corkboard"] .pace-toggle.on, body[data-look="corkboard"] .startbar button { background: var(--accent); color: #fbeedd; }
body[data-look="corkboard"] .attach-hint { color: #dcc39a; }
body[data-look="corkboard"] .msg.user { border-radius: 2px; padding: 12px 14px; box-shadow: var(--shadow); transform: rotate(.5deg); }
body[data-look="corkboard"] .msg.gm .prose:not(:empty), body[data-look="corkboard"] .msg.err { position: relative; padding: 22px 16px 16px; border-radius: 2px;
  background: linear-gradient(170deg, #f6ebcf, #eddcb3); box-shadow: var(--shadow); }
body[data-look="corkboard"] .msg.gm .prose:not(:empty)::before, body[data-look="corkboard"] .msg.user::before, body[data-look="corkboard"] .dice::before,
body[data-look="corkboard"] .envelope::before, body[data-look="corkboard"] .codex .entry summary::before { content: ""; position: absolute; top: 7px; left: 50%;
  width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--pin-red); box-shadow: 1px 2px 2px rgba(0, 0, 0, .35); }
body[data-look="corkboard"] .msg.user { position: relative; padding-top: 22px; }
body[data-look="corkboard"] .msg.user::before { background: var(--pin-brass); }
body[data-look="corkboard"] .msg.gm .prose { font-size: 16.5px; line-height: 1.55; }
body[data-look="corkboard"] .prose h1, body[data-look="corkboard"] .prose h2, body[data-look="corkboard"] .prose h3 { font-size: 19px; }
body[data-look="corkboard"] .prose blockquote { border-left: 3px solid #b0773d; color: #4a3622; }
body[data-look="corkboard"] .prose hr { border-top: 1px solid #c4a472; }
body[data-look="corkboard"] .msg.gm .tools:not(:empty), body[data-look="corkboard"] .typing, body[data-look="corkboard"] .msg.divider, body[data-look="corkboard"] .earlier {
  width: fit-content; max-width: 100%; padding: 4px 10px; border-radius: 2px; background: var(--parch); color: #4f3b26; box-shadow: 0 1px 3px rgba(40, 20, 5, .35); }
body[data-look="corkboard"] .msg.divider, body[data-look="corkboard"] .earlier { align-self: center; }
body[data-look="corkboard"] .typing { margin-top: 8px; font-style: italic; }
body[data-look="corkboard"] .dicebox { gap: 12px; }
body[data-look="corkboard"] .dice, body[data-look="corkboard"] .envelope { position: relative; padding-top: 22px; border: 0; border-radius: 2px; }
body[data-look="corkboard"] .dice:nth-child(2n)::before, body[data-look="corkboard"] .envelope::before { background: var(--pin-brass); }
body[data-look="corkboard"] .dice-head { font-family: var(--font-display); font-size: 14px; color: #5a4128; }
body[data-look="corkboard"] .dice-math { font-family: var(--font-display); }
body[data-look="corkboard"] .die { border-radius: 6px; }
body[data-look="corkboard"] .dice-outcome .now { border-radius: 999px; font-family: var(--font-display); letter-spacing: .06em; color: #fbf1dc;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .35); }
body[data-look="corkboard"] .dice-body .now { padding: 5px 12px; font-size: 13px; }
body[data-look="corkboard"] :is(.dice, .beat)[data-outcome] .now { color: #fbf1dc; }
body[data-look="corkboard"] :is(.dice, .beat)[data-outcome="disaster"] .now { box-shadow: inset 0 0 0 2px #9e2a1e, 0 1px 2px rgba(0, 0, 0, .35); }
body[data-look="corkboard"] .dice-foot .tag { border-radius: 2px; border-color: #b89868; }
body[data-look="corkboard"] .grit-meter b { border-radius: 50%; }
body[data-look="corkboard"] .grit-meter b.on { background: #a8741f; border-color: #6e4a12; }
body[data-look="corkboard"] .grit-spend { border-radius: 3px; font-family: var(--font-display); font-weight: 400; }
body[data-look="corkboard"] .payoff { padding: 8px 12px; background: var(--parch); border-left: 4px solid var(--accent); box-shadow: 0 1px 3px rgba(40, 20, 5, .35); }
body[data-look="corkboard"] .handout { position: relative; padding-top: 24px; border: 0; border-radius: 2px; box-shadow: var(--shadow); }
body[data-look="corkboard"] .handout::after { content: ""; position: absolute; top: 8px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--pin-red); box-shadow: 1px 2px 2px rgba(0, 0, 0, .35); }
body[data-look="corkboard"] .handout[data-kind="message"] { background: #fbf6ea; transform: rotate(-.5deg); }
body[data-look="corkboard"] .handout[data-kind="message"]::after, body[data-look="corkboard"] .handout[data-kind="gift"]::after { background: var(--pin-brass); }
body[data-look="corkboard"] .handout[data-kind="flyer"] { border: 2px solid #5e3c1f; }
body[data-look="corkboard"] .handout[data-kind="job"] { text-align: center; box-shadow: inset 0 0 0 4px #f3e6c6, inset 0 0 0 6px var(--accent), var(--shadow); }
body[data-look="corkboard"] .handout[data-kind="job"] .handout-title { font-size: 20px; }
body[data-look="corkboard"] .handout[data-kind="gift"] { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
body[data-look="corkboard"] .handout-kind, body[data-look="corkboard"] .handout[data-kind="gift"]::before { font-family: var(--font-display); letter-spacing: .08em; }
body[data-look="corkboard"] .drawer-card { background: #efe0bd; border-radius: 4px 4px 0 0; }
body[data-look="corkboard"] .tabs { background: #4a2f17; border-bottom: 3px solid #3b2410; }
body[data-look="corkboard"] .tabs .tab { border: 0; border-radius: 2px; background: #eddcb3; color: #4a3520; font-family: var(--font-display); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
body[data-look="corkboard"] .tabs .tab.active { background: var(--accent); color: #fbeedd; }
body[data-look="corkboard"] .codex { gap: 14px; min-height: 100%; background: var(--cork); }
body[data-look="corkboard"] .codex .entry { position: relative; border: 0; border-radius: 2px; box-shadow: var(--shadow); }
body[data-look="corkboard"] .codex .entry summary { padding-top: 22px; }
body[data-look="corkboard"] .codex .entry.focus { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
body[data-look="corkboard"] .codex .ename { font-size: 17px; color: var(--heading); }
body[data-look="corkboard"] .codex .tier, body[data-look="corkboard"] .codex .thread, body[data-look="corkboard"] .codex > .muted { width: fit-content; max-width: 100%;
  padding: 4px 10px; background: var(--parch); color: var(--ink); box-shadow: 0 1px 3px rgba(40, 20, 5, .35); }
body[data-look="corkboard"] .codex .thread { width: auto; padding: 8px 12px; border-left: 3px solid var(--accent); }
body[data-look="corkboard"] .chip-s { border-color: #b89868; }
body[data-look="corkboard"] .chip-s.disp.warm, body[data-look="corkboard"] .chip-s.disp.close, body[data-look="corkboard"] .chip-s.disp.loyal { color: var(--cost); border-color: var(--cost); }
body[data-look="corkboard"] .menu { background: var(--parch); border: 2px solid #5e3c1f; border-radius: 3px; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
body[data-look="corkboard"] .jump { background: var(--pin-brass); color: #2a1a08; border-color: #3b2410; }

/* ================================================================ municipal: Working Hours / The Hunt, city paperwork */
html:has(> body[data-look="municipal"]) { background: #e3e7da; }
body[data-look="municipal"] {
  --bg: #e6e9dd; --panel: #d9dfcc; --panel2: #cdd4bd; --ink: #1f2a22; --muted: #4a574c; --line: #9aa68f; --dim: #56635a;
  --accent: #2f4a3a; --accent-ink: #f4f1e4; --user: #f7f6ee; --red: #b3261e; --green: #1f6b3a;
  --font: "Helvetica Neue", -apple-system, BlinkMacSystemFont, system-ui, Arial, sans-serif;
  --font-display: "American Typewriter", "Courier New", Courier, monospace;
  --font-mono: "Courier New", Courier, ui-monospace, monospace;
  --strong: #10170f; --user-ink: #1f2a22; --gm-ink: #1f2a22; --link: #1d4f91; --heading: #1f2a22;
  --die: #fbfaf3; --pip: #1f2a22; --die-edge: #1f2a22;
  --clean: #1f6b3a; --cost: #1d4f91; --miss: #b3261e; --disaster: #b3261e;
  --card: #efe2b8; --card-line: #b9a46e; --shadow: 2px 2px 0 rgba(31, 42, 34, .12); --radius: 0;
  --manila: #efe2b8;
  background: #e6e9dd;
}
body[data-look="municipal"] .bar { background: #d9dfcc; border-bottom: 2px solid var(--ink); box-shadow: 0 3px 0 -1px #e6e9dd, 0 4px 0 -1px var(--ink); }
body[data-look="municipal"] .bar .title { font-family: var(--font-display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
body[data-look="municipal"] #play-sub { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
body[data-look="municipal"] #play-sub::before { content: "REF \00B7  "; }
body[data-look="municipal"] .ghost { border: 1px solid var(--ink); border-radius: 0; background: #eef0e6; color: var(--ink); box-shadow: 1px 1px 0 var(--ink);
  font-family: var(--font-display); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
body[data-look="municipal"] #back { font-family: var(--font); }
body[data-look="municipal"] #debt { background: #f4ddd6; color: #8e1b14; border-top: 2px solid var(--red); border-bottom: 2px solid var(--red);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
body[data-look="municipal"] #debt::before { content: "PAST DUE \00B7  "; }
body[data-look="municipal"] #composer, body[data-look="municipal"] .attachbar, body[data-look="municipal"] .startbar { background: #d9dfcc; border-top: 2px solid var(--ink); }
body[data-look="municipal"] .attachbar + #composer { border-top: 0; }
body[data-look="municipal"] #composer { position: relative; padding-top: 26px; }
body[data-look="municipal"] #composer::before { content: "FIELD 14 \2014  ACTION TAKEN"; position: absolute; top: 8px; left: var(--pad);
  font: 600 10px/1 var(--font-display); letter-spacing: .1em; color: var(--muted); }
body[data-look="municipal"] #input { background: #fbfaf3; border: 1px solid #7d8a78; border-bottom: 2px solid var(--ink); border-radius: 0; }
body[data-look="municipal"] #input:focus { border-color: #7d8a78; border-bottom-color: var(--link); }
body[data-look="municipal"] #input::placeholder { color: #6b7669; font-family: var(--font-display); }
body[data-look="municipal"] #send { width: 54px; border-radius: 0; background: var(--accent); color: #f4f1e4; box-shadow: 2px 2px 0 var(--ink); font-size: 0; }
body[data-look="municipal"] #send::after { content: "FILE"; font: 600 13px/1 var(--font-display); letter-spacing: .08em; }
body[data-look="municipal"] #send:disabled { background: var(--panel2); color: #6b7669; box-shadow: none; }
body[data-look="municipal"] .attach-chip, body[data-look="municipal"] .pace-toggle, body[data-look="municipal"] .startbar button, body[data-look="municipal"] .grit-spend,
body[data-look="municipal"] .tabs .tab, body[data-look="municipal"] .menu button { font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
body[data-look="municipal"] .attach-chip, body[data-look="municipal"] .pace-toggle { border: 1px solid var(--ink); border-radius: 0; background: #fbfaf3; color: var(--ink); font-size: 12px; }
body[data-look="municipal"] .pace-toggle.on, body[data-look="municipal"] .startbar button, body[data-look="municipal"] .grit-spend.picked { background: var(--accent); color: #f4f1e4; }
body[data-look="municipal"] .startbar button { border-radius: 0; box-shadow: 2px 2px 0 var(--ink); }
body[data-look="municipal"] .msg.user { position: relative; padding: 22px 12px 10px; border: 1px solid #7d8a78; border-radius: 0; }
body[data-look="municipal"] .msg.user::before { content: "STATEMENT OF ACTION"; position: absolute; top: 6px; left: 8px; font: 600 9.5px/1 var(--font-display); letter-spacing: .1em; color: var(--dim); }
body[data-look="municipal"] .msg.user .tap { border-radius: 0; font-family: var(--font-display); text-transform: uppercase; }
body[data-look="municipal"] .prose h1, body[data-look="municipal"] .prose h2, body[data-look="municipal"] .prose h3 { display: table; padding-bottom: 2px; border-bottom: 1px solid var(--ink);
  font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
body[data-look="municipal"] .prose blockquote { border-left: 3px solid var(--line); color: #34403a; }
body[data-look="municipal"] .prose hr { border-top: 1px dashed #7d8a78; }
body[data-look="municipal"] .typing, body[data-look="municipal"] .divider { font-family: var(--font-display); }
body[data-look="municipal"] .divider { letter-spacing: .06em; text-transform: uppercase; }
body[data-look="municipal"] .dice, body[data-look="municipal"] .envelope { border-radius: 0; padding: 10px 12px 12px; }
body[data-look="municipal"] .dice-head { padding-bottom: 5px; border-bottom: 1px solid var(--card-line); font-family: var(--font-display); font-size: 12px;
  letter-spacing: .05em; text-transform: uppercase; color: #3f3a22; }
body[data-look="municipal"] .dice-id { font-family: var(--font-mono); font-weight: 700; color: #5a5230; }
body[data-look="municipal"] .die { border-radius: 3px; box-shadow: 1px 1px 0 var(--ink); }
body[data-look="municipal"] .dice-math, body[data-look="municipal"] .beat-total { font-family: var(--font-mono); font-weight: 700; }
body[data-look="municipal"] .dice-outcome .now { background: transparent; border: 3px double currentColor; border-radius: 4px; font-family: var(--font-display);
  font-weight: 700; letter-spacing: .12em; }
body[data-look="municipal"] .dice-body .now { padding: 2px 8px; font-size: 15px; transform: rotate(-6deg); }
body[data-look="municipal"] .montage .beat .now { border-width: 1px; border-style: solid; }
body[data-look="municipal"] :is(.dice, .beat)[data-outcome="clean"] .now { background: transparent; color: var(--clean); }
body[data-look="municipal"] :is(.dice, .beat)[data-outcome="cost"] .now { background: transparent; color: var(--cost); }
body[data-look="municipal"] :is(.dice, .beat)[data-outcome="miss"] .now { background: transparent; color: var(--miss); }
body[data-look="municipal"] :is(.dice, .beat)[data-outcome="disaster"] .now { background: var(--disaster); color: var(--manila); border-color: #7d1010; }
body[data-look="municipal"] .dice-outcome .was { font-family: var(--font-display); color: #5a5230; }
@media (prefers-reduced-motion: no-preference) {
  body[data-look="municipal"] .dice.landed .dice-outcome { animation: skin-stamp .28s cubic-bezier(.3, 1.3, .5, 1); }
}
body[data-look="municipal"] .dice-foot .tag, body[data-look="municipal"] .chip-s { border-radius: 0; font-family: var(--font-display); font-size: 11px; text-transform: uppercase; }
body[data-look="municipal"] .dice-foot .tag.lining, body[data-look="municipal"] .dice-foot .tag.grit-spent { color: var(--link); border-color: var(--link); }
body[data-look="municipal"] .grit-meter .lbl { font-family: var(--font-display); text-transform: uppercase; }
body[data-look="municipal"] .grit-meter b { width: 11px; height: 11px; border-radius: 0; border-color: var(--ink); }
body[data-look="municipal"] .grit-meter b.on { border-color: var(--ink); background: linear-gradient(45deg, transparent 42%, var(--ink) 42% 58%, transparent 58%),
  linear-gradient(-45deg, transparent 42%, var(--ink) 42% 58%, transparent 58%), #fbfaf3; }
body[data-look="municipal"] .grit-spend { border: 1px dashed var(--ink); border-radius: 0; background: #fbfaf3; color: var(--ink); }
body[data-look="municipal"] .env-about { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: 14px; }
body[data-look="municipal"] .env-icon { color: var(--ink); }
body[data-look="municipal"] .payoff { border-left-color: var(--clean); }
body[data-look="municipal"] .payoff-when { font-family: var(--font-display); color: var(--clean); }
body[data-look="municipal"] .handout { border-radius: 0; box-shadow: var(--shadow); }
body[data-look="municipal"] .handout:is([data-kind="message"], [data-kind="flyer"]) { background: #f7f6ee; border: 1px solid #7d8a78; }
body[data-look="municipal"] .handout[data-kind="flyer"] { border: 3px double var(--ink); }
body[data-look="municipal"] .handout[data-kind="job"] { border: 1px dashed var(--ink); }
body[data-look="municipal"] .handout:is([data-kind="message"], [data-kind="flyer"], [data-kind="job"], [data-kind="gift"]) .handout-title { font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
body[data-look="municipal"] .handout[data-kind="message"] .handout-title::before { content: "MEMO \00B7  "; }
body[data-look="municipal"] .handout-kind, body[data-look="municipal"] .handout[data-kind="gift"]::before { font-family: var(--font-display); color: var(--ink); }
body[data-look="municipal"] .handout[data-kind="job"] .handout-kind::after { content: " \00B7  work order"; }
body[data-look="municipal"] .drawer-card { background: #e6e9dd; border-top: 2px solid var(--ink); border-radius: 0; }
body[data-look="municipal"] .drawer-card .bar { box-shadow: none; }
body[data-look="municipal"] .tabs { align-items: flex-end; gap: 3px; padding-bottom: 0; border-bottom: 1px solid var(--card-line); }
body[data-look="municipal"] .tabs .tab { border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: #d9dfcc; color: #34403a; font-size: 12px; }
body[data-look="municipal"] .tabs .tab.active { background: var(--manila); color: var(--ink); border-color: var(--card-line); }
body[data-look="municipal"] .codex .entry { border-radius: 0; box-shadow: var(--shadow); }
body[data-look="municipal"] .codex .entry.focus { border-color: var(--ink); }
body[data-look="municipal"] .codex .ename { font-size: 15px; letter-spacing: .03em; text-transform: uppercase; }
body[data-look="municipal"] .codex .fact .when { font-weight: 700; color: #7d1010; }
body[data-look="municipal"] .codex .tier { font-family: var(--font-display); color: var(--ink); }
body[data-look="municipal"] .chip-s.disp.warm, body[data-look="municipal"] .chip-s.disp.close, body[data-look="municipal"] .chip-s.disp.loyal { color: var(--link); border-color: var(--link); }
body[data-look="municipal"] .sheet-pane { font-size: 14px; font-weight: 700; }
body[data-look="municipal"] .menu { background: #f7f6ee; border-color: var(--ink); border-radius: 0; box-shadow: 3px 3px 0 rgba(31, 42, 34, .25); }
body[data-look="municipal"] .menu button { font-size: 13px; border-bottom-color: #c9cfbd; }
body[data-look="municipal"] .jump { border-radius: 0; border-color: var(--ink); background: #f7f6ee; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------------------------------------------------------------- the map in a look: the same ground, that look's lines */
body[data-look="cockpit"] .mapcard { background: var(--brackets), var(--scan), var(--card); border-color: transparent; border-radius: 0; }
body[data-look="cockpit"] .map-title, body[data-look="cockpit"] .zone-name { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
body[data-look="cockpit"] .zone-ground, body[data-look="cockpit"] .zone-edge { rx: 2; }
body[data-look="cockpit"] .map-link { stroke-dasharray: 2 4; }
body[data-look="cockpit"] .shot-frame { border-radius: 2px; }
body[data-look="grimoire"] .mapcard { --map-veil: rgba(60, 40, 20, .22); }
body[data-look="grimoire"] .map-link { stroke-dasharray: 1 5; stroke-linecap: round; }
body[data-look="notebook"] .zone-edge { stroke-dasharray: 3 2; }
body[data-look="phone"] .zone-ground { fill: #0d0b14; }