:root {
  /* neon-noir terminal: near-black blue, one cyan accent, amber for 1s and glitches */
  --bg: #0a0e13;
  --paper: #10161d;
  --fill: #1a232d;        /* tab group and Edge options on paper */
  --ink: #e4ecf2;
  --muted: #9db0c2;
  --line: #2c3a48;        /* separators only */
  --line-strong: #6f8aa3; /* control and box borders */
  --accent: #38e1f5;      /* cyan */
  --accent-ink: #00161a;
  --accent-soft: #0f2e35;
  --hit: #38e1f5; --hit-ink: #00161a;
  --one: #2b2306; --one-ink: #ffd447; --one-line: #e0b23a;
  --ok: #57e88a; --bad: #ff6f9c;
  --die: #0d141b; --die-line: #56708a;
  --focus: #ff6fd8;
  --bar: #05080b; --bar-ink: #e4ecf2;
  --scan: rgba(255, 255, 255, .025);
  --accent-text: #38e1f5; /* accent used as text: links, the big hits number */
  --frame: #38e1f5;       /* result box border */
  --hit-frame: #38e1f5;   /* outline around hit dice when the dice are not colored by result */
  --die-pip: #e4ecf2;
  --bar-line: #38e1f5; --bar-line-ink: #00161a;
  --tex: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 4px);
  --head: var(--mono); --num: var(--mono);
  --r-die: 5px;
  --r: 4px;      /* inputs, buttons */
  --r-box: 10px; /* the tool and result boxes */
  --r-sm: 2px;   /* option cards, small fills */
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark light;
}
@media (prefers-color-scheme: light) {
  :root {
    /* daylight terminal */
    --bg: #e6ecef; --paper: #f6f9fa; --fill: #dbe3e8; --ink: #0a1620; --muted: #3b4d5c;
    --line: #b5c2cc; --line-strong: #4d6475;
    --accent: #006a7d; --accent-ink: #ffffff; --accent-soft: #d3ecf0;
    --hit: #006a7d; --hit-ink: #ffffff;
    --one: #fff0b3; --one-ink: #4f3b00; --one-line: #8a6800;
    --ok: #17663a; --bad: #b0124e;
    --die: #ffffff; --die-line: #5d7282; --focus: #a1007c;
    --bar: #0a1620; --bar-ink: #e6ecef;
    --scan: rgba(10, 22, 32, .025);
    --accent-text: #006a7d; --frame: #006a7d; --hit-frame: #006a7d; --die-pip: #0a1620;
  }
}

/* cyberpunk (the default): street at night; corp daylight in light mode. Chartreuse = hit and good, pink-red =
   1s, glitch and short, cyan = focus only. Chartreuse is a fill only in light mode, never a text color there. */
[data-theme="cyber"] {
  --bg: #0a0b0e; --paper: #121419; --fill: #1b1e25; --ink: #eceef3; --muted: #a4abb8;
  --line: #2a2e38; --line-strong: #747c8c;
  --accent: #d2ff3c; --accent-ink: #0a0b0e; --accent-text: #d2ff3c; --accent-soft: #252d12;
  --frame: #d2ff3c;
  --hit: #d2ff3c; --hit-ink: #0a0b0e; --hit-frame: #d2ff3c;
  --one: #2b0d16; --one-ink: #ff5c8a; --one-line: #ff3d74;
  --ok: #d2ff3c; --bad: #ff5c8a;
  --die: #1a1d24; --die-pip: #dfe3ea; --die-line: #5f6878;
  --focus: #4fd8ff; --bar: #050608; --bar-ink: #eceef3; --bar-line: #d2ff3c; --bar-line-ink: #0a0b0e;
  /* HUD grid: 1px lines every 32px on the page background only */
  --tex: linear-gradient(rgba(210, 255, 60, .035) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(210, 255, 60, .035) 1px, transparent 1px) 0 0 / 32px 32px;
  --r: 0; --r-box: 0; --r-sm: 0; --r-die: 3px;
  --head: 'Chakra Petch', 'Bahnschrift', 'DIN Alternate', 'Roboto Condensed', var(--body);
  --num: 'JetBrains Mono', 'Chakra Petch', var(--mono);
  --cut: 12px;
  /* readout cyan: data the page reports back (times, odds); alarm: a critical glitch, filled */
  --data: #4fd8ff; --alarm: #ff3d74; --alarm-ink: #0a0b0e;
  --scanl: rgba(210, 255, 60, .04);
}
@media (prefers-color-scheme: light) {
  [data-theme="cyber"] {
    --bg: #e7e5df; --paper: #f7f6f1; --fill: #e3e1da; --ink: #0d0e12; --muted: #4a4f5a;
    --line: #c9c6bd; --line-strong: #6c717c;
    --accent: #c6f02e; --accent-ink: #0d0e12; --accent-text: #3b5400; --accent-soft: #eaf5c4;
    --frame: #0d0e12;
    --hit: #c6f02e; --hit-ink: #0d0e12; --hit-frame: #0d0e12;
    --one: #ffe1ea; --one-ink: #8c0030; --one-line: #c4003f;
    --ok: #3b5400; --bad: #b0002f;
    --die: #ffffff; --die-pip: #15161b; --die-line: #6c717c;
    --focus: #0068b3; --bar: #0d0e12; --bar-ink: #eceef3; --bar-line: #c6f02e; --bar-line-ink: #0d0e12;
    --tex: linear-gradient(rgba(13, 14, 18, .035) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(13, 14, 18, .035) 1px, transparent 1px) 0 0 / 32px 32px;
    --data: #005a80; --alarm: #c4003f; --alarm-ink: #ffffff;
    --scanl: rgba(13, 14, 18, .035);
  }
}
@font-face { font-family: 'Chakra Petch'; src: url("fonts/chakra-petch-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* digits only (about 4 KB): every number in the Cyberpunk theme reads as a terminal readout. The point and comma
   stay in the text face, so a number inside a sentence never gets a full-width gap (85.7%). */
@font-face { font-family: 'JetBrains Mono'; src: url("fonts/jetbrains-mono-800.woff2") format("woff2"); font-weight: 700 800; font-display: swap;
  unicode-range: U+25, U+28-29, U+2B, U+2D, U+2F-39, U+D7, U+2212; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tex), var(--bg); color: var(--ink); font: 17px/1.5 var(--body); }
a { color: var(--accent-text); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; z-index: 9; }
.skip:focus { left: 8px; top: 8px; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
button, input, select { font: inherit; color: inherit; }
[data-theme="cyber"] h1, [data-theme="cyber"] h2, [data-theme="cyber"] h3 { letter-spacing: .02em; }

/* header */
.top { background: var(--bar); color: var(--bar-ink); border-bottom: 2px solid var(--bar-line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 700 1.1rem/1.1 var(--head); }
.brand svg circle:last-child { fill: var(--bar-line); }
.top nav { display: flex; gap: 4px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 22px; color: inherit; font-size: 1rem; font-weight: 600; white-space: nowrap; }
.top nav a[aria-current="page"] { background: var(--bar-line); color: var(--bar-line-ink); text-decoration: none; }
[data-theme="cyber"] .brand { text-transform: uppercase; letter-spacing: .04em; }
[data-theme="cyber"] .top nav a { border-radius: 0; font-family: var(--head); font-weight: 700; }
[data-theme="cyber"] .top nav a[aria-current="page"] { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.crumbs { margin: 14px 0 0; font-size: 1rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--muted); }

.hero { padding: 14px 0 0; max-width: 760px; }
.hero h1 { font-size: clamp(1.2rem, 5.6vw, 2.3rem); margin: 0 0 4px; }
.lede { margin: 0; font-size: 1.05rem; }

/* tool */
.tool { margin: 12px 0 20px; min-height: 520px; }
.note { padding: 10px 12px; border-radius: var(--r); background: var(--accent-soft); }
.tool-in { display: grid; gap: 16px; }
@media (min-width: 900px) { .tool-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.controls { background: var(--paper); border: 2px solid var(--line-strong); border-radius: var(--r-box); padding: 12px 14px 16px; min-width: 0; }

.tabs { display: flex; gap: 2px; padding: 3px; background: var(--fill); border-radius: 11px; margin-bottom: 12px; }
.tabs button { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 6px; border: 0; border-radius: var(--r); background: transparent; cursor: pointer; font-weight: 600; white-space: nowrap; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
[data-theme="cyber"] .tabs { border-radius: 0; }
[data-theme="cyber"] .tabs button { font-family: var(--head); font-weight: 700; font-size: 1.0625rem; }
[data-theme="cyber"] .tabs button[aria-selected="true"] { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

.edge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.edge-l { font-weight: 700; font-family: var(--head); }
.edge output { min-width: 2ch; text-align: center; font: 700 1.5rem/1 var(--num); }
[data-theme="cyber"] .edge-l, [data-theme="cyber"] .field > label, [data-theme="cyber"] .gl { font-family: var(--head); font-weight: 700; }

.row { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; min-width: 0; }
.field.wide { flex: 1 1 100%; }
.row .pre { flex: 1 1 100%; }
.field label, .ardr legend { font-weight: 600; }
.stepper { display: flex; align-items: stretch; }
.stepper input { width: 1.9em; text-align: center; border-radius: 0; border-left: 0; border-right: 0; font: 700 1.3rem/1 var(--num); }
input[type="text"] { min-height: 44px; padding: 8px 10px; border: 2px solid var(--line-strong); border-radius: var(--r); background: var(--die); font-size: 1rem; }
.stepper input[type="text"] { border-radius: 0; font-size: 1.3rem; padding: 8px 2px; }
.field.wide input { width: 100%; }
input.solo { width: 2.6em; padding: 8px 2px; text-align: center; font: 700 1.3rem/1 var(--num); }
button.step { width: 44px; min-height: 44px; border: 2px solid var(--line-strong); background: var(--paper); font: 700 1.3rem/1 var(--mono); cursor: pointer; touch-action: manipulation; }
.stepper button.step:first-child { border-radius: var(--r) 0 0 var(--r); }
.stepper button.step:last-child { border-radius: 0 var(--r) var(--r) 0; }
.edge button.step, .xadj button.step { border-radius: var(--r); }
button.step:disabled { opacity: .45; cursor: default; }
input::placeholder { color: var(--muted); opacity: 1; font-weight: 400; font-size: 1rem; }

.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.check input:disabled + span { color: var(--muted); }
.odds { margin: 2px 0 10px; font-size: 1rem; min-height: 3em; }
.odds strong { font-family: var(--num); }

.roll { display: block; width: 100%; min-height: 54px; padding: 12px 16px; border: 0; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font: 700 1.15rem/1.2 var(--head); cursor: pointer; touch-action: manipulation; }
[data-theme="cyber"] .roll { text-transform: uppercase; font-size: 1.25rem; letter-spacing: .08em;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.roll:active { transform: translateY(1px); }
.btn { min-height: 44px; padding: 8px 14px; border: 2px solid var(--line-strong); border-radius: var(--r); background: var(--paper); cursor: pointer; font-weight: 600; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
button.link { min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--accent-text); text-decoration: underline; cursor: pointer; }

.more { margin-top: 14px; border-top: 1px solid var(--line); }
.more summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 600; }
.more-in { padding: 4px 0 2px; }
.ardr { border: 1px solid var(--line); border-radius: var(--r); padding: 6px 12px 12px; margin: 6px 0 10px; }
.ardr-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ardr-in label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.ardr-in input { width: 3.6em; }
.share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.share input { flex: 1 1 220px; min-width: 0; }
/* look: theme, dice animation, dice color (real radio groups, 44px targets) */
.set { border: 0; margin: 4px 0 14px; padding: 0; min-width: 0; }
.set legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.seg { display: flex; gap: 2px; padding: 3px; background: var(--fill); border-radius: 8px; }
.seg label { flex: 1 1 0; position: relative; min-width: 0; }
.seg input, .sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 8px; border-radius: var(--r); font-weight: 600; text-align: center; }
.seg input:checked + span { background: var(--ink); color: var(--bg); }
.seg input:focus-visible + span, .sw input:focus-visible ~ .nm { outline: 3px solid var(--focus); outline-offset: 1px; }
[data-theme="cyber"] .seg { border-radius: 0; }
.sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sw label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 8px 4px 6px; border: 2px solid transparent; border-radius: var(--r); cursor: pointer; font-size: 1rem; font-weight: 600; text-align: center; }
.sw label.on { background: var(--fill); border-color: var(--ink); }
.sw .chip { --slot: 34px; --s: 26px; position: relative; display: block; width: 34px; height: 34px; }
.custom { display: grid; grid-template-columns: auto auto; gap: 8px 16px; align-items: center; justify-content: start; margin-top: 10px; }
.custom label { font-weight: 600; }
.custom input[type="color"] { width: 64px; height: 44px; padding: 2px; border: 2px solid var(--line-strong); border-radius: var(--r); background: var(--paper); cursor: pointer; }
.custom select { min-height: 44px; padding: 6px 8px; border: 2px solid var(--line-strong); border-radius: var(--r); background: var(--paper); font-size: 1rem; }
.fixnote { grid-column: 1 / -1; margin: 0; font-size: 1rem; }

/* result */
.result { overflow: hidden; background: var(--paper); border: 2px solid var(--frame); border-radius: var(--r-box); padding: 14px; min-height: 200px; min-width: 0; }
/* cut-corner panels: one border made of two layers (border color behind, paper inset 2px), never a box in a box */
[data-theme="cyber"] .controls, [data-theme="cyber"] .result { position: relative; border: 0; padding: 16px; background: var(--line-strong);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
[data-theme="cyber"] .controls::before, [data-theme="cyber"] .result::before { content: ""; position: absolute; inset: 2px; background: var(--paper);
  clip-path: polygon(calc(var(--cut) - .8px) 0, 100% 0, 100% calc(100% - var(--cut) + .8px), calc(100% - var(--cut) + .8px) 100%, 0 100%, 0 calc(var(--cut) - .8px)); }
[data-theme="cyber"] .controls > *, [data-theme="cyber"] .result > * { position: relative; }
[data-theme="cyber"] .result { background: var(--frame); }
[data-theme="cyber"] .result:focus-visible { outline-offset: -6px; }
/* readout tick on the result box's top edge: graphic only */
[data-theme="cyber"] .result::after { content: ""; position: absolute; right: 16px; top: 8px; width: 44px; height: 4px; background: repeating-linear-gradient(90deg, var(--frame) 0 6px, transparent 6px 9px); }
.result:focus { outline: none; }
.result:focus-visible { outline: 3px solid var(--focus); }
.result .empty { color: var(--muted); margin: 0; }
.head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.big { margin: 0; font-family: var(--mono); }
.big .num { font: 800 3rem/1 var(--num); color: var(--accent-text); }
.big .unit { font: 700 1.3rem/1 var(--head); }
[data-theme="cyber"] .big .num { font-weight: 700; font-size: 3.6rem; }
[data-theme="cyber"] .big .unit { text-transform: uppercase; letter-spacing: .04em; }
.meta { margin: 0; color: var(--muted); font-size: 1rem; }
.verdict { list-style: none; margin: 10px 0 6px; padding: 0; }
.verdict li { display: flex; gap: 10px; align-items: baseline; font-weight: 600; margin: 4px 0; }
.sym { flex: none; min-width: 1.6em; text-align: center; font: 800 1.1rem/1 var(--mono); }
.verdict .ok .sym, .xl-status.ok .sym { color: var(--ok); }
.verdict .bad .sym, .xl-status.bad .sym { color: var(--bad); }
.verdict .glitch, .verdict .crit { color: var(--one-ink); background: var(--one); border: 2px dashed var(--one-line); border-radius: var(--r); padding: 6px 8px; }
.verdict .crit { border-style: solid; }
.verdict .sym b { font-weight: inherit; }
/* cyberpunk glitch: hazard tape behind the symbol only, never behind words */
[data-theme="cyber"] .verdict .glitch, [data-theme="cyber"] .verdict .crit { align-items: center; }
[data-theme="cyber"] .verdict .glitch .sym, [data-theme="cyber"] .verdict .crit .sym { min-width: 0; width: 2.6em; height: 1.7em; display: inline-flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(-45deg, var(--one-line) 0 5px, var(--one) 5px 10px); }
[data-theme="cyber"] .verdict .glitch .sym b, [data-theme="cyber"] .verdict .crit .sym b { background: var(--one); color: var(--one-ink); padding: 0 4px; line-height: 1.3; }
.verdict .info { font-weight: 400; }

.groups { margin: 8px 0 4px; }
.grp { margin: 8px 0; }
.gl { display: block; font-size: 1rem; color: var(--muted); margin-bottom: 4px; }
.dice { display: flex; flex-wrap: wrap; gap: 6px; }
/* ---------- dice: one slot size for every animation; the result box carries data-dc (dice color) ---------- */
.die { --slot: 46px; --s: 30px; position: relative; display: inline-block; width: var(--slot); height: var(--slot); padding: 0; border: 0; background: none; color: var(--ink); font: 700 1.35rem/1 var(--num); vertical-align: top; contain: layout style; }
@media (min-width: 600px) { .die { --slot: 50px; --s: 33px; } }
@media (max-width: 380px) { .die { --slot: 42px; --s: 28px; } }
/* wide screens with room to spare: bigger dice for small and medium pools; 4 dice or fewer: large, a real throw */
@media (min-width: 900px) { .mid .die { --slot: 58px; --s: 38px; font-size: 1.55rem; } .mid .dice { gap: 8px; } }
.few .die { --slot: 66px; --s: 44px; font-size: 1.8rem; }
.few .dice { gap: 10px; }
/* body, pips, edge: "By result" takes them from what the die shows, any other color from the box */
.die { --db: var(--die); --dp: var(--die-pip); --dl: var(--die-line); }
[data-dc="s"] .die.hit { --db: var(--hit); --dp: var(--hit-ink); --dl: var(--hit); }
[data-dc="s"] .die.one { --db: var(--one); --dp: var(--one-ink); --dl: var(--one-line); }
[data-dc]:not([data-dc="s"]) .die { --db: var(--cdb); --dp: var(--cdp); --dl: color-mix(in srgb, var(--cdb), #000 45%); }

/* flat tiles (Flat and Off); with a color other than By result they inset 5px so the status frame shows */
.die .fin, .die .t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-die); }
.die .fin { border: 2px solid var(--dl); background: var(--db); color: var(--dp); }
.die .t { border: 2px solid var(--die-line); background: var(--die); color: var(--ink); }
[data-dc="s"] .die.one .fin { border-style: dashed; }
[data-dc="s"] .die.wild .fin { border-width: 4px; border-style: double; }
[data-dc="s"] .die.hit.wild .fin { border-color: var(--hit-ink); box-shadow: 0 0 0 2px var(--hit); }
.framed:not(.dice3d) .die .fin, .framed:not(.dice3d) .die .t { inset: 5px; font-size: 1.15rem; }
[data-theme="cyber"] .die .fin, [data-theme="cyber"] .die .t { clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }

/* marks: ✓ ! ×3 top right, + E W bottom left. On By-result tiles they sit inside in the tile's ink, as always; on
   cubes and colored dice they are chips on the paper, so they read over any color */
.die .mk, .die .tag { position: absolute; z-index: 3; font: 800 1rem/1 var(--mono); pointer-events: none; }
.die .mk { right: 2px; top: 1px; color: var(--dp); }
.die .tag { left: 4px; bottom: 2px; font-size: .8rem; color: var(--dp); }
.framed .die .mk, .framed .die .tag { padding: 1px 2px; background: var(--paper); color: var(--ink); }
.framed .die .mk { right: -3px; top: -4px; }
.framed .die .tag { left: -2px; bottom: -3px; font-size: .9rem; }
.framed .die.hit .mk { color: var(--accent-text); }
.framed .die.one .mk { color: var(--one-ink); }

/* status frames on the slot: always with cubes, and with flat tiles in a color other than By result */
.framed .die.hit::before, .framed .die.one::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: var(--r-die); }
.framed .die.hit::before { border: 2px solid var(--hit-frame); }
.framed .die.one::before { border: 2px dashed var(--one-line); }
/* cyberpunk: target-lock corner brackets on hits, hazard tape under 1s */
[data-theme="cyber"] .framed .die.hit::before { border: 0; border-radius: 0; --b: var(--hit-frame);
  background: linear-gradient(var(--b), var(--b)) 0 0 / 11px 2px, linear-gradient(var(--b), var(--b)) 0 0 / 2px 11px,
    linear-gradient(var(--b), var(--b)) 100% 100% / 11px 2px, linear-gradient(var(--b), var(--b)) 100% 100% / 2px 11px,
    linear-gradient(var(--b), var(--b)) 0 100% / 11px 2px, linear-gradient(var(--b), var(--b)) 0 100% / 2px 11px;
  background-repeat: no-repeat; }
[data-theme="cyber"] .framed .die.one::before { border: 0; border-radius: 0; inset: auto 3px 0 3px; height: 5px;
  background: repeating-linear-gradient(-45deg, var(--one-line) 0 4px, transparent 4px 8px); }

/* 3D cubes: CSS transforms only. Slot > .cw (perspective; the only place opacity may animate) > .sh shadow + .tilt
   (static resting angle) > .cube (preserve-3d, the only thing that tumbles) > six faces with radial-gradient pips.
   The result is always on the front face and the cube always lands square. Faces are square (rounded faces leave
   holes at the cube's corners), their edge is an inset shadow painted inside the face (no border on a transformed
   box), and each face sits half a pixel inside the cube so neighbours overlap and no seam shows between them. The
   perspective scales with the die, so a resting die (the SVG below) has the same shape at every size. */
.cw { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); perspective: calc(var(--s) * 10.5); }
.tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-12deg) rotateY(-14deg); }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.f { --pr: calc(var(--s) * .095); --z: calc(var(--s) / 2 - .5px); position: absolute; inset: 0; background-color: var(--db); box-shadow: inset 0 0 0 calc(var(--s) * .025) var(--dl); backface-visibility: hidden; background-repeat: no-repeat; }
.f::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.fF { transform: translateZ(var(--z)); }
.fB { transform: rotateY(180deg) translateZ(var(--z)); }
.fR { transform: rotateY(90deg) translateZ(var(--z)); }
.fL { transform: rotateY(-90deg) translateZ(var(--z)); }
.fT { transform: rotateX(90deg) translateZ(var(--z)); }
.fD { transform: rotateX(-90deg) translateZ(var(--z)); }
/* shading by position: the front is never shaded, the top is lit, the sides read as volume */
.fT::after { background: rgba(255, 255, 255, .14); }
.fR::after, .fL::after { background: rgba(0, 0, 0, .5); }
.fD::after, .fB::after { background: rgba(0, 0, 0, .55); }
@media (prefers-color-scheme: light) {
  .fR::after, .fL::after { background: rgba(0, 0, 0, .28); }
  .fT::after { background: rgba(0, 0, 0, .08); }
}
/* pip spots, drawn in the pip color on each face */
.f { --pa: radial-gradient(circle at 26% 26%, var(--dp) 0 var(--pr), transparent calc(var(--pr) + .7px)); --pb: radial-gradient(circle at 74% 26%, var(--dp) 0 var(--pr), transparent calc(var(--pr) + .7px)); --pc: radial-gradient(circle at 50% 50%, var(--dp) 0 var(--pr), transparent calc(var(--pr) + .7px));
  --pd: radial-gradient(circle at 26% 74%, var(--dp) 0 var(--pr), transparent calc(var(--pr) + .7px)); --pe: radial-gradient(circle at 74% 74%, var(--dp) 0 var(--pr), transparent calc(var(--pr) + .7px));
  --pf: radial-gradient(circle at 26% 24%, var(--dp) 0 var(--pr), transparent calc(var(--pr) + .7px)); --pg: radial-gradient(circle at 26% 50%, var(--dp) 0 var(--pr), transparent calc(var(--pr) + .7px)); --ph: radial-gradient(circle at 26% 76%, var(--dp) 0 var(--pr), transparent calc(var(--pr) + .7px));
  --pi: radial-gradient(circle at 74% 24%, var(--dp) 0 var(--pr), transparent calc(var(--pr) + .7px)); --pj: radial-gradient(circle at 74% 50%, var(--dp) 0 var(--pr), transparent calc(var(--pr) + .7px)); --pk: radial-gradient(circle at 74% 76%, var(--dp) 0 var(--pr), transparent calc(var(--pr) + .7px)); }
.p1 { background-image: radial-gradient(circle at 50% 50%, var(--dp) 0 calc(var(--pr) * 1.25), transparent calc(var(--pr) * 1.25 + .7px)); }
.p2 { background-image: var(--pa), var(--pe); }
.p3 { background-image: var(--pa), var(--pc), var(--pe); }
.p4 { background-image: var(--pa), var(--pb), var(--pd), var(--pe); }
.p5 { background-image: var(--pa), var(--pb), var(--pc), var(--pd), var(--pe); }
.p6 { background-image: var(--pf), var(--pg), var(--ph), var(--pi), var(--pj), var(--pk); }
/* a resting die (the result, the swatches): the SVG from restDie in motion.js, three faces and one edge stroke */
.cw.rest { perspective: none; }
.dsv { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sf { fill: var(--db); }
.sp { fill: var(--dp); }
.sf.sT { fill: color-mix(in srgb, var(--db), #fff 14%); }
.sp.sT { fill: color-mix(in srgb, var(--dp), #fff 14%); }
.sf.sR { fill: color-mix(in srgb, var(--db), #000 50%); }
.sp.sR { fill: color-mix(in srgb, var(--dp), #000 50%); }
@media (prefers-color-scheme: light) {
  .sf.sT { fill: color-mix(in srgb, var(--db), #000 8%); }
  .sp.sT { fill: color-mix(in srgb, var(--dp), #000 8%); }
  .sf.sR { fill: color-mix(in srgb, var(--db), #000 28%); }
  .sp.sR { fill: color-mix(in srgb, var(--dp), #000 28%); }
}
.se { fill: none; stroke: var(--dl); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
/* finishes: metal (light polished edges), neon edge (edge in the pip color), translucent (resin) */
[data-fin="m"] .f { box-shadow: inset 0 0 0 calc(var(--s) * .03) color-mix(in srgb, var(--db), #fff 55%); }
[data-fin="m"] .se { stroke: color-mix(in srgb, var(--db), #fff 55%); stroke-width: 6; }
[data-fin="n"] .f { box-shadow: inset 0 0 0 2px var(--dp); }
[data-fin="n"] .se { stroke: var(--dp); stroke-width: 6; }
[data-fin="t"] .f { background-color: color-mix(in srgb, var(--db) 80%, transparent); backface-visibility: visible; }
[data-fin="t"] .f::after { display: none; }
[data-fin="t"] .sf { fill-opacity: .8; }
.sh { position: absolute; left: 12%; right: 12%; bottom: -5px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .45); }
@media (prefers-color-scheme: light) { .sh { background: rgba(13, 14, 18, .22); } }

/* the 3D throw: a layer over the whole screen while the dice fly; it exists only during the throw */
.throw { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; contain: strict; }
.throw .fly, .throw .fsh { position: absolute; left: 0; top: 0; will-change: transform; }
.throw .fly, .throw .fsh { width: var(--s); height: var(--s); }
.throw .fly .cube { will-change: transform; }
.throw .fly .sh { display: none; }
.throw .fsh { border-radius: 50%; background: rgba(0, 0, 0, .55); }
@media (prefers-color-scheme: light) { .throw .fsh { background: rgba(13, 14, 18, .3); } }

/* ---------- Cyberpunk identity (theme only; Clean is untouched) ----------
   A street-deck readout: digits in a mono face with slashed zeros, scanlines in the result panel only, a colour key
   on each dice group, status badges stamped on the dice, and verdicts as hard-edged chips: lime success, pink
   outline short, pink outline glitch, solid pink critical glitch. Crisp lines and fills, no blur, no glow. */
[data-theme="cyber"] .big .num, [data-theme="cyber"] .edge output, [data-theme="cyber"] .stepper input, [data-theme="cyber"] input.solo,
[data-theme="cyber"] .odds strong, [data-theme="cyber"] .opt .oc, [data-theme="cyber"] .xl-main strong, [data-theme="cyber"] .lt,
[data-theme="cyber"] .xo-t td:last-child, [data-theme="cyber"] .xo-main strong { font-feature-settings: "zero"; }
[data-theme="cyber"] .xo-main strong, [data-theme="cyber"] .pcard .field input { font-family: var(--num); }
[data-theme="cyber"] .big .num { font-weight: 800; font-size: 3.4rem; letter-spacing: -.04em; }
[data-theme="cyber"] .edge output { color: var(--accent-text); font-weight: 800; }
[data-theme="cyber"] .lt { color: var(--data); }
/* scanlines: only behind the result readout */
[data-theme="cyber"] .result::before { background: repeating-linear-gradient(0deg, var(--scanl) 0 1px, transparent 1px 3px), var(--paper); }
/* group key: a square in the group's colour (hits lime, 1s hazard pink, other dice grey); the label says it in words */
[data-theme="cyber"] .gl::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--line-strong); }
[data-theme="cyber"] .g-hit .gl::before { background: var(--accent-text); }
[data-theme="cyber"] .g-one .gl::before { background: repeating-linear-gradient(-45deg, var(--one-line) 0 3px, transparent 3px 5px); outline: 1px solid var(--one-line); outline-offset: -1px; }
/* verdict chips */
[data-theme="cyber"] .verdict li { align-items: center; }
[data-theme="cyber"] .verdict .ok .sym, [data-theme="cyber"] .verdict .bad .sym { min-width: 0; width: 1.7em; height: 1.7em; display: inline-flex; align-items: center; justify-content: center;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
[data-theme="cyber"] .verdict .ok .sym { background: var(--hit); color: var(--hit-ink); }
[data-theme="cyber"] .verdict .bad .sym { background: var(--bad); color: var(--alarm-ink); }
[data-theme="cyber"] .verdict .glitch { border: 2px solid var(--one-line); border-radius: 0; }
[data-theme="cyber"] .verdict .crit { background: var(--alarm); color: var(--alarm-ink); border: 0; border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
[data-theme="cyber"] .verdict .crit .sym { background: repeating-linear-gradient(-45deg, var(--alarm-ink) 0 5px, var(--alarm) 5px 10px); }
[data-theme="cyber"] .verdict .crit .sym b { background: var(--alarm); color: var(--alarm-ink); }
/* status badges stamped on the dice: hits get a dark chip with a lime line and tick (so many hits never turn into a
   lime mesh with the brackets), 1s a solid pink alarm chip. The dice rows get an 11 px gap so every badge and tag keeps
   at least 5 px from the next die's frame. */
[data-theme="cyber"] .framed .dice { gap: 11px; }
[data-theme="cyber"] .framed .die .mk { min-width: 16px; height: 16px; padding: 0 2px; right: -4px; top: -5px; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; background: var(--paper); color: var(--accent-text); box-shadow: inset 0 0 0 1.5px var(--hit-frame), 0 0 0 1px var(--paper); }
[data-theme="cyber"] .framed .die.one .mk { background: var(--alarm); color: var(--alarm-ink); box-shadow: 0 0 0 1px var(--paper); }
[data-theme="cyber"] .framed .die .tag { box-shadow: 0 0 0 1px var(--paper); background: var(--ink); color: var(--paper); left: -7px; bottom: -6px; padding: 0 2px; font-size: .9375rem; }

/* header: a double rail, lime over a pink hairline; the h1 ends on a static block cursor */
[data-theme="cyber"] .top { border-bottom: 0; box-shadow: 0 2px 0 var(--bar-line), 0 5px 0 var(--bar), 0 6px 0 var(--alarm); margin-bottom: 6px; }
[data-theme="cyber"] .hero h1::after { content: ""; display: inline-block; width: .5em; height: .82em; margin-left: .14em; vertical-align: -.06em; background: var(--accent-text); }
button.die { cursor: pointer; }
button.die[aria-pressed="true"] { outline: 3px solid var(--focus); outline-offset: 2px; transform: translateY(-3px); }
.oppline, .spent { margin: 6px 0; font-size: 1rem; }
.undo { margin: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  .roll:active { transform: none; }
  button.die[aria-pressed="true"] { transform: none; }
}

.edgeopts { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.edgeopts h3 { font-size: 1.05rem; margin: 0 0 6px; }
.hint { color: var(--muted); font-size: 1rem; margin: 4px 0 8px; }
.opts { display: grid; gap: 6px; }
.opt { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--r-sm); background: var(--fill); cursor: pointer; }
.opt .ol { font-weight: 700; }
.opt .oc { font-family: var(--num); font-weight: 700; }
[data-theme="cyber"] .opt:not(:disabled) { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.opt .oa { grid-column: 1 / -1; font-size: 1rem; }
.opt:not(:disabled):hover { background: var(--accent-soft); }
.opt:disabled { cursor: default; background: transparent; padding-left: 0; padding-right: 0; }
.opt:disabled .oa { color: var(--muted); }
/* an Edge spend the rules would not allow, made with the override: words plus a ! mark, never colour alone */
.ow { display: block; margin: 0; font-size: 1rem; color: var(--one-ink); }
.opt .ow { grid-column: 1 / -1; }
.pre .ow { margin: -4px 0 4px 32px; }

/* extended test */
.ext-live { margin-bottom: 6px; }
.xl-main { margin: 4px 0 8px; }
.xl-main strong { font: 800 1.4rem/1.2 var(--num); }
.bar { height: 14px; border: 2px solid var(--line-strong); border-radius: 7px; overflow: hidden; background: var(--die); }
.bar span { display: block; height: 100%; background: var(--accent); }
.xl-status { font-weight: 700; margin: 8px 0; }
.xo { margin: 6px 0 12px; }
.xo p { margin: 4px 0; }
.xo-t { border-collapse: collapse; margin-top: 8px; font-size: 1rem; }
.xo-t caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.xo-t th, .xo-t td { padding: 4px 12px 4px 0; text-align: left; border-bottom: 1px solid var(--line); }
.xo-t td:last-child { font-family: var(--mono); font-weight: 700; }
.ext-acts { display: flex; flex-direction: column; gap: 10px; }
.xadj { display: flex; align-items: center; gap: 8px; }
.confirm { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.savenote { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r); background: var(--one); color: var(--one-ink); }
.savenote .btn { margin-left: 6px; }

/* log */
.logbox { margin: 0 0 28px; }
.loghead h2 { font-size: 1.25rem; margin: 0 0 8px; }
ol.log { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--line); }
ol.log li { padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.lt { font-family: var(--mono); color: var(--muted); }
.la { color: var(--muted); }
.lf { display: block; font-family: var(--mono); color: var(--muted); letter-spacing: .04em; }
.logbox > .btn { margin: 0 8px 8px 0; }
.bins { margin-top: 8px; }
.bins summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.bins p { margin: 6px 0; }

/* content */
.content { max-width: 760px; padding-bottom: 20px; }
.content h2 { font-size: 1.35rem; margin: 30px 0 8px; }
.example { background: var(--paper); border-radius: var(--r-sm); padding: 10px 12px; }
.table-wrap { overflow-x: auto; }
table.rules { border-collapse: collapse; width: 100%; margin: 6px 0 12px; }
table.rules caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
table.rules th, table.rules td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.rules th { border-bottom: 2px solid var(--line-strong); }
table.rules td:first-child { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 600; }
.faq details p { margin: 0 0 12px; }
.sources, .tm { color: var(--muted); font-size: 1rem; }

footer { background: var(--paper); border-top: 2px solid var(--line-strong); padding: 16px 0 24px; font-size: 1rem; }
.sb-more { line-height: 1.8; }
.sb-more a, .sb-credit a { color: var(--ink); }
.sb-privacy, .sb-credit { color: var(--muted); margin: 6px 0; }

@media (max-width: 440px) {
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 380px) {
  .controls, .result { padding-left: 10px; padding-right: 10px; }
  .edge { column-gap: 4px; }
  .row .pre { flex-basis: 150px; align-self: center; }
  .crumbs { margin-top: 8px; }
  .hero { padding-top: 8px; }
  .tool { margin-top: 8px; }
  .controls { padding-top: 8px; }
  .tabs { margin-bottom: 8px; }
  .edge { margin-bottom: 4px; }
  .odds { margin-bottom: 8px; }
  .edge .nar { display: none; }
}

/* printing the main page prints the roll log, never the controls */
@media print {
  /* plain black on white in both themes, set in today's type */
  :root, :root[data-theme] { --bg: #fff; --paper: #fff; --fill: #fff; --ink: #000; --muted: #333; --line: #999; --line-strong: #000; --accent: #000;
    --accent-text: #000; --frame: #000; --hit-frame: #000; --die-pip: #000; --bar-line: #000;
    --hit: #000; --hit-ink: #fff; --one: #fff; --one-ink: #000; --one-line: #000; --ok: #000; --bad: #000; --die: #fff; --die-line: #000;
    --bar: #fff; --bar-ink: #000; --tex: none; --head: var(--mono); --num: var(--mono);
    --data: #000; --alarm: #000; --alarm-ink: #fff; --scanl: transparent; }
  [data-theme] h1, [data-theme] h2, [data-theme] h3, [data-theme] .brand, [data-theme] .loghead h2 { text-transform: none; letter-spacing: -0.01em; }
  [data-theme] .controls, [data-theme] .result { clip-path: none; }
  body { font-size: 11pt; background: #fff; background-image: none; color: #000; }
  .skip, .top nav, .tool, .content, footer, #odds-live, .logbox .btn, .bins, .lede { display: none !important; }
  .top { background: none; color: #000; border-bottom: 2px solid #000; }
  [data-theme] .top { box-shadow: none; margin-bottom: 0; border-bottom: 2px solid #000; }
  .hero h1::after { display: none !important; }
  .hero { padding-top: 8px; }
  .hero h1 { font-size: 18pt; }
  .logbox { margin: 0; }
  ol.log li { break-inside: avoid; padding: 4pt 0; }
  .lf { color: #000; }
  .die .t, .throw { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* probability page */
.calc { margin: 14px 0 24px; min-height: 640px; }
.edsw { display: flex; gap: 4px; margin-bottom: 10px; }
.edsw button { padding: 10px 14px; min-height: 44px; border: 2px solid var(--line-strong); border-radius: var(--r); background: var(--paper); font-weight: 600; cursor: pointer; }
.edsw button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.pgrid { display: grid; gap: 16px; }
@media (min-width: 900px) { .pgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.pcard h2 { font-size: 1.15rem; margin: 2px 0 10px; }
.pcard .field input { width: 5em; }
.pcard .xo-t { width: 100%; }
.calc .acts { margin: 14px 0 0; }
.sheet h2 { font-size: 1.35rem; margin: 10px 0 6px; }
.odds-t { border-collapse: collapse; font: 1rem/1.25 var(--mono); width: 100%; }
.odds-t caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.odds-t th, .odds-t td { padding: 5px 7px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.odds-t thead th { border-bottom: 2px solid var(--line-strong); }
.odds-t tbody th { text-align: right; }
.odds-t tr.five td, .odds-t tr.five th { border-bottom: 2px solid var(--line-strong); }
.odds-t td:nth-last-child(-n+2), .odds-t thead th:nth-last-child(-n+2) { background: var(--one); color: var(--one-ink); }
.sheet .table-wrap { border: 2px solid var(--line-strong); border-radius: var(--r); background: var(--paper); padding: 4px 8px; }
.print-only { display: none; }
@media print {
  .calc, .crumbs, .sheet .hint { display: none !important; }
  .print-only { display: block; font-size: 9pt; margin-top: 6pt; }
  table.print-only { display: table; width: 100%; border-collapse: collapse; font-size: 10.5pt; margin-top: 0; }
  .plog thead { display: table-header-group; }
  .plog th { text-align: left; font: 700 10pt/1.3 var(--mono); padding: 0 0 4pt; border-bottom: 1.5pt solid #000; }
  .plog td { padding: 3pt 0; border-bottom: 0.5pt solid #999; }
  .plog tr { break-inside: avoid; }
  ol.log, .loghead, #log-more { display: none !important; }
  .sheet .table-wrap { border: 0; padding: 0; overflow: visible; }
  .odds-t { font-size: 9.5pt; }
  .odds-t caption { position: static; width: auto; height: auto; clip: auto; white-space: normal; text-align: left; font: 600 10pt/1.3 var(--body); padding-bottom: 4pt; }
  .odds-t th, .odds-t td { padding: 2.2pt 4pt; }
  .odds-t td:nth-last-child(-n+2), .odds-t thead th:nth-last-child(-n+2) { background: #eee; color: #000; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .sheet h2 { font-size: 14pt; margin: 4pt 0; }
  .hero { padding: 0; }
  .hero h1 { margin: 0; }
}