/* Layout: sticky top bar; question list on the left, a sticky check-and-export panel on the right.
   Stacks into one column under 980px. Visual cue: answer-sheet bubbles mark correct answers. */
:root {
  --bg: #f2f4f3;
  --surface: #ffffff;
  --surface-2: #f6f8f7;
  --ink: #16201c;
  --muted: #5b6a64;
  --faint: #63706a;
  --line: #d5ddd9;
  --line-strong: #b9c5bf;
  --accent: #0e6b57;
  --accent-hover: #0b5847;
  --accent-ink: #ffffff;
  --accent-soft: #e0f0ea;
  --error: #b42318;
  --error-soft: #fdeceb;
  --warn: #8a5a00;
  --warn-soft: #fdf3d8;
  --focus: #2563eb;
  --shadow: 0 1px 2px rgba(22, 32, 28, .06), 0 2px 8px rgba(22, 32, 28, .05);
  /* Device fonts first. The self-hosted fallback faces are only downloaded if none of the named fonts exist. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, "BQE Fallback Sans", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", "BQE Fallback Mono", monospace;
  --radius: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1412; --surface: #151d1a; --surface-2: #1a2420; --ink: #e3ebe7; --muted: #9aaba4; --faint: #7d8e88;
    --line: #2a3632; --line-strong: #3a4842; --accent: #45c29f; --accent-hover: #5fd2b0; --accent-ink: #062019;
    --accent-soft: #173a30; --error: #ff8a7f; --error-soft: #3a1915; --warn: #f2bd55; --warn-soft: #33290f;
    --focus: #7aa7ff; --shadow: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1412; --surface: #151d1a; --surface-2: #1a2420; --ink: #e3ebe7; --muted: #9aaba4; --faint: #7d8e88;
  --line: #2a3632; --line-strong: #3a4842; --accent: #45c29f; --accent-hover: #5fd2b0; --accent-ink: #062019;
  --accent-soft: #173a30; --error: #ff8a7f; --error-soft: #3a1915; --warn: #f2bd55; --warn-soft: #33290f;
  --focus: #7aa7ff; --shadow: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark;
}

@font-face { font-family: "BQE Fallback Sans"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BQE Fallback Sans"; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "BQE Fallback Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }

/* Until the editor's first render (js/theme.js adds the class, js/app.js removes it), hide the parts
   that move when questions are drawn, so the page does not jump. If a script fails, the timed
   animation shows them anyway after 4 seconds; !important keeps it under reduced-motion too. */
.bqe-loading main.layout, .bqe-loading .site-foot { visibility: hidden; animation: bqe-reveal 0s linear 4s forwards !important; }
@keyframes bqe-reveal { to { visibility: visible; } }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 50; border-radius: 6px; }
.skip:focus { left: 16px; }
/* The skip link moves focus to <main>; the whole area needs no outline. */
#main:focus { outline: none; }
kbd, code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3em; }

/* ---------- top bar ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
/* The bar only stays on screen while it is short. On narrow or short windows (phones, 200-400% zoom)
   it wraps to several lines and would cover most of the page, so it scrolls away with it.
   js/app.js also sets html.topbar-static when the bar is taller than 22% of the window, and keeps
   --topbar-h at the bar's height so focused fields scroll into view below it (WCAG 1.4.10, 2.4.11). */
html { scroll-padding-top: calc(var(--topbar-h, 64px) + 12px); }
@media (max-width: 980px), (max-height: 560px) {
  .topbar { position: static; }
  html { scroll-padding-top: 12px; }
}
html.topbar-static .topbar { position: static; }
html.topbar-static { scroll-padding-top: 12px; }
.topbar-inner {
  max-width: 1440px; margin: 0 auto;
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* The logo is drawn through favicon.svg as a mask so it takes the text colour of every theme and style.
   --brand-mask holds favicon.svg as a data: URL (see "generated" below) so it also shows when the page is opened from disk. */
.brand-mark { width: 28px; height: 28px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--brand-mask) center / contain no-repeat; mask: var(--brand-mask) center / contain no-repeat; }
.brand-name { margin: 0; line-height: inherit; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: .01em; white-space: nowrap; }
/* The title field must never be squeezed by the buttons beside it: its minimum width
   (input + "Saved in this browser at …") makes the header wrap onto a second line instead.
   Without it, skins with wider buttons (Win98, XP, …) shrank the input to ~80px. */
.title-field { flex: 1 1 480px; min-width: min(100%, 480px); display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
#set-title {
  flex: 1 1 260px; min-width: min(100%, 260px); border: 1px solid transparent; background: transparent; border-radius: 6px;
  padding: 6px 8px; font-weight: 500; font-size: 16px;
}
#set-title:hover { border-color: var(--line); }
#set-title:focus { border-color: var(--line-strong); background: var(--surface-2); outline: none; }
.save-status { color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: 4px; }

.theme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--surface-2); }
.theme-switch button {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--muted);
  padding: 4px 9px; min-height: 30px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.theme-switch svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.theme-switch svg .fill { fill: currentColor; stroke: none; }
@media (max-width: 1500px) { .theme-switch span { display: none; } .theme-switch button { padding: 4px 8px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); font-weight: 500;
  transition: background-color .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; flex: 0 0 auto; }
.btn.small { white-space: nowrap; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.primary:disabled { opacity: .5; cursor: not-allowed; }
.btn.danger { background: var(--error); border-color: var(--error); color: #fff; }
/* Night mode errors are light red, so their buttons take dark text (white on #ff8a7f was 2.3:1). */
:root[data-theme="dark"] .btn.danger { color: #1b0000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.danger { color: #1b0000; } }
.btn.small { min-height: 30px; padding: 3px 10px; font-size: 13.5px; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; }
/* A plain select in a dialog takes the page colours (the browser's Night-mode default was #6b6b6b, 4.4:1). Styles override it below. */
.modal select { background-color: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 8px; }

/* ---------- layout ---------- */
.layout {
  max-width: 1440px; margin: 0 auto;
  padding-block: 20px 40px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start;
}
.editor { min-width: 0; }
.panel { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h, 62px) + 10px); max-height: calc(100vh - var(--topbar-h, 62px) - 30px); overflow: auto; min-width: 0; }
@media (max-width: 980px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; max-height: none; }
}

.editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.editor-bar-right { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 18px; border-radius: 6px; cursor: pointer; font-weight: 500; color: var(--muted); min-height: 32px; }
.seg button[aria-selected="true"] { background: var(--ink); color: var(--surface); }
.check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- question cards ---------- */
#qlist { display: flex; flex-direction: column; gap: 12px; }
.qcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  min-width: 0; scroll-margin-top: 90px;
}
.qcard.has-error { border-left: 3px solid var(--error); }
.qcard.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: var(--shadow); } }
.qcard.drag-over { border-color: var(--accent); box-shadow: 0 -3px 0 var(--accent); }
.qcard.dragging { opacity: .5; }
.qhead { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 6px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.qcard.collapsed .qhead { border-bottom: 0; }
.drag { cursor: grab; color: var(--faint); padding: 4px 4px; user-select: none; font-size: 15px; letter-spacing: -2px; line-height: 1; }
.qnum { font-family: var(--font-display); font-weight: 600; font-size: 18px; min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums; }
.qtype {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 6px; padding: 4px 8px; font-size: 13.5px; font-weight: 500; min-height: 32px; max-width: 100%;
}
.qsummary { flex: 1 1 160px; min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qcard:not(.collapsed) .qsummary { visibility: hidden; }
.qstatus { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.qstatus.ok { color: var(--accent); background: var(--accent-soft); }
.qstatus.err { color: var(--error); background: var(--error-soft); }
.qstatus.warn { color: var(--warn); background: var(--warn-soft); }
.qtools { display: flex; gap: 2px; margin-left: auto; }
.icon-btn {
  width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--muted);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn.del:hover { color: var(--error); background: var(--error-soft); }
.icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qbody { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.qcard.collapsed .qbody { display: none; }

.field-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.field-label .hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); }
.rt-box { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.rt-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rt-toolbar { display: flex; gap: 2px; padding: 3px; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: 6px 6px 0 0; flex-wrap: wrap; }
.rt-toolbar button {
  min-width: 30px; height: 28px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; color: var(--muted); font-size: 13.5px; padding: 0 7px;
}
.rt-toolbar button:hover { background: var(--surface); color: var(--ink); }
.rt-toolbar .sep { width: 1px; background: var(--line); margin: 4px 3px; }
.rt-toolbar .tb-right { margin-left: auto; }
textarea.qtext, textarea.sample, textarea.fb {
  display: block; width: 100%; border: 0; background: transparent; resize: none; padding: 8px 10px; min-height: 64px; line-height: 1.5; border-radius: 0 0 6px 6px; overflow: hidden;
}
textarea.qtext:focus, textarea.sample:focus, textarea.fb:focus { outline: none; }
.inp {
  width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 7px 10px; min-height: 38px;
}
.inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.rows { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row .inp { flex: 1 1 auto; }
.bubble {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; font-size: 13.5px; cursor: pointer; color: var(--muted);
  transition: background-color .12s, border-color .12s, color .12s;
}
.bubble.square { border-radius: 7px; }
.bubble:hover { border-color: var(--accent); color: var(--accent); }
.bubble[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.row-x { flex: 0 0 auto; }
/* "Add" slot: last row of a list, same columns as the rows above it (see addSlot in app.js).
   Dashed and unfilled so it reads as an empty place for the next row, not as one more answer. */
.slot-spacer { visibility: hidden; pointer-events: none; }
.add-row {
  flex: 1 1 auto; min-width: 0; min-height: 38px; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border: 1.5px dashed var(--line-strong); border-radius: 6px; background: transparent;
  color: var(--accent); font: inherit; font-weight: 500; text-align: left; cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.add-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.add-row:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.add-plus {
  flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px;
  background: var(--accent); color: var(--accent-ink);
}
.add-plus svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; }
.pair-sep { color: var(--faint); flex: 0 0 auto; }
.pair .inp { flex: 1 1 0; }
@media (max-width: 560px) {
  .pair { flex-wrap: wrap; }
  .pair .inp { flex: 1 1 100%; }
  .pair .pair-sep { display: none; }
}
.tf { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.tf button { border: 0; background: var(--surface); padding: 8px 22px; cursor: pointer; font-weight: 500; min-height: 38px; }
.tf button + button { border-left: 1px solid var(--line-strong); }
.tf button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.num-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 10px 14px; }
.num-field { display: flex; flex-direction: column; min-width: 0; }
.num-grid .hint { grid-column: 1 / -1; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .num-grid { grid-template-columns: minmax(0, 1fr); } }
.blank-row { display: grid; grid-template-columns: minmax(70px, auto) minmax(0, 1fr); gap: 8px; align-items: center; }
.blank-name { font-family: var(--font-mono); font-size: 13.5px; background: var(--accent-soft); color: var(--accent); padding: 4px 8px; border-radius: 5px; justify-self: start; }
.note { font-size: 13.5px; color: var(--muted); margin: 0; }

.qissues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.qissues li { font-size: 13.5px; padding: 6px 10px; border-radius: 6px; }
.qissues li.err { background: var(--error-soft); color: var(--error); }
.qissues li.warn { background: var(--warn-soft); color: var(--warn); }

/* student-view preview */
.qpreview { border-top: 1px dashed var(--line-strong); padding-top: 10px; font-size: 14.5px; min-width: 0; overflow-x: auto; }
.pv-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 4px; }
.pv-q { margin-bottom: 8px; overflow-wrap: anywhere; }
.pv-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pv-opts li { display: flex; gap: 8px; align-items: flex-start; }
.pv-mark { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: inline-grid; place-items: center; font: 500 11px var(--font-mono); color: var(--muted); margin-top: 1px; }
.pv-mark.sq { border-radius: 4px; }
.pv-opts li.is-correct .pv-mark { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pv-blank { display: inline-block; min-width: 72px; border-bottom: 1.5px solid var(--ink); color: var(--faint); font: 12px var(--font-mono); text-align: center; padding: 0 4px; }
.pv-box { display: inline-block; width: 160px; max-width: 100%; height: 26px; border: 1px solid var(--line-strong); border-radius: 4px; vertical-align: middle; background: var(--surface-2); }
.pv-key { color: var(--accent); font-size: 13.5px; }
.pv-mat { border-collapse: collapse; font-size: 14px; }
.pv-mat td { padding: 3px 12px 3px 0; vertical-align: top; }
.pv-mat td.arrow { color: var(--faint); }
.pv-empty { color: var(--faint); font-style: italic; }
.qpreview img { max-width: 100%; height: auto; vertical-align: middle; }
.qpreview table { border-collapse: collapse; margin: 6px 0; font-size: 14px; }
.qpreview td, .qpreview th { border: 1px solid var(--line-strong); padding: 3px 8px; text-align: left; }
.pv-fb { margin-top: 6px; font-size: 13.5px; padding: 6px 10px; border-radius: 6px; border-left: 3px solid var(--accent); background: var(--surface-2); overflow-wrap: anywhere; }
.pv-fb.no { border-left-color: var(--warn); }
.pv-fb-label { font-weight: 600; color: var(--muted); }

/* feedback fields */
.fb-box { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.fb-box > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 2px 0; }
.fb-box > summary .hint { font-weight: 400; color: var(--faint); }
.fb-box[open] > summary { margin-bottom: 6px; }
.fb-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.fb-label { font-size: 12.5px; color: var(--muted); }
.issue-list .info button { background: var(--surface-2); color: var(--muted); }
.math-block { display: block; margin: 6px 0; }
.math-fallback { font-style: italic; }
math { font-size: 1.08em; }

/* add bar */
.addbar { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 12px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); }
.addbar-label { font-family: var(--font-display); font-weight: 600; padding-top: 6px; }
.addbar-buttons { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.empty strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 19px; margin-bottom: 4px; }

/* ---------- text mode ---------- */
.text-intro { margin: 0 0 10px; color: var(--muted); font-size: 14px; max-width: 70ch; }
.text-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.text-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#plain {
  display: block; width: 100%; min-height: 60vh; border: 0; background: transparent; resize: vertical; outline: none;
  font: 14px/1.6 var(--font-mono); padding: 14px 16px; tab-size: 4; white-space: pre-wrap;
}
.diag { margin-top: 10px; }
.diag ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.diag li button { all: unset; cursor: pointer; display: block; font-size: 13.5px; padding: 6px 10px; border-radius: 6px; }
.diag li button:focus-visible { outline: 2px solid var(--focus); }
.diag li.err button { background: var(--error-soft); color: var(--error); }
.diag li.warn button, .diag li.info button { background: var(--warn-soft); color: var(--warn); }
.diag .ok-line { color: var(--accent); font-size: 13.5px; margin: 0; }
.diag .ln { font-family: var(--font-mono); font-weight: 500; margin-right: 6px; }
.cheats { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.cheats summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.cheat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.cheat { margin: 0; font: 12.5px/1.55 var(--font-mono); background: var(--surface-2); border-radius: 6px; padding: 8px 10px; overflow-x: auto; white-space: pre; }
.c-h { font-family: var(--font-body); font-weight: 600; color: var(--accent); }
.cheat-note { font-size: 13.5px; color: var(--muted); max-width: 80ch; line-height: 1.8; }

/* ---------- panel ---------- */
.panel-inner { display: flex; flex-direction: column; gap: 14px; }
.pblock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.ptitle { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0 0 8px; text-wrap: balance; }
.sum-line { margin: 0 0 8px; font-size: 14.5px; min-height: 1.9em; }
.sum-line .big { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-right: 4px; font-variant-numeric: tabular-nums; }
.type-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; min-height: 1.5em; }
.chip { font: 500 12px var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; color: var(--muted); }
.issue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; }
.issue-list button { all: unset; cursor: pointer; display: block; font-size: 13px; padding: 5px 8px; border-radius: 5px; line-height: 1.4; }
.issue-list button:focus-visible { outline: 2px solid var(--focus); }
.issue-list .err button { background: var(--error-soft); color: var(--error); }
.issue-list .warn button { background: var(--warn-soft); color: var(--warn); }
.issue-list .qref { font-weight: 600; }
.all-good { color: var(--accent); font-size: 13.5px; margin: 0; }
.opt { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; }
.opt legend { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; padding: 0; }
.opt label { display: flex; gap: 8px; align-items: baseline; font-size: 14px; cursor: pointer; flex-wrap: wrap; }
.opt input { accent-color: var(--accent); }
.opt .hint { color: var(--faint); font-size: 12.5px; }
.file-row label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.file-name-wrap { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; margin-top: 4px; background: var(--surface); }
.file-name-wrap:focus-within { border-color: var(--accent); }
.file-name-wrap input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 7px 10px; outline: none; font-family: var(--font-mono); font-size: 13.5px; }
.file-name-wrap .ext { padding-right: 10px; color: var(--faint); font-family: var(--font-mono); font-size: 13.5px; }
.export-buttons { display: flex; gap: 8px; margin-top: 12px; }
.export-buttons .primary { flex: 1 1 auto; }
.wide-btn { width: 100%; margin-top: 8px; }
.psub { font-size: 13.5px; margin: 14px 0 6px; }
.fineprint { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.raw { margin: 10px 0 8px; }
.raw summary { cursor: pointer; font-size: 13.5px; color: var(--muted); }
.raw-out { margin: 8px 0 0; max-height: 260px; overflow: auto; font: 12px/1.5 var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px; white-space: pre; }
.raw-out .tab { color: var(--accent); opacity: .7; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.privacy { font-size: 12.5px; color: var(--faint); margin: 0 4px; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); }
.foot-inner {
  max-width: 1440px; margin: 0 auto; padding-block: 22px 28px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 8px;
}
.foot-owner { margin: 0; max-width: 78ch; color: var(--muted); font-size: 14px; line-height: 1.6; }
.foot-owner b { color: var(--ink); }
.foot-meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: 13.5px; color: var(--muted); }
.foot-meta > * + *::before { content: "·"; display: inline-block; margin: 0 10px; color: var(--faint); text-decoration: none; }
.foot-meta a { color: var(--accent); font-weight: 500; text-underline-offset: 3px; }
.foot-meta a:hover { color: var(--accent-hover); }
.foot-meta time { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .foot-meta { flex-direction: column; align-items: flex-start; gap: 6px; } .foot-meta > * + *::before { content: none; } }
.foot-kicker { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.credits-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.credits-list li { font-size: 14px; }
.credits-list a { color: var(--accent); font-weight: 500; }
.credits-list .what { display: block; color: var(--muted); font-size: 13.5px; }

/* ---------- modal & toast ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(10, 16, 14, .45); z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal {
  background: var(--surface); color: var(--ink); border-radius: 10px; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); padding: 20px 22px;
}
.modal.wide { width: min(860px, 100%); }
.modal h2 { font-family: var(--font-display); font-weight: 600; font-size: 21px; margin: 0 0 10px; text-wrap: balance; }
.modal h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 18px 0 6px; }
.modal p, .modal li { max-width: 70ch; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.modal textarea { width: 100%; min-height: 200px; font: 13px/1.5 var(--font-mono); border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: var(--surface-2); resize: vertical; white-space: pre; }
.modal .result { font-size: 14px; margin: 8px 0 0; }
.modal .result ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
.modal .help-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.modal .help-table td, .modal .help-table th { border-bottom: 1px solid var(--line); padding: 6px 8px 6px 0; text-align: left; vertical-align: top; }
.modal .tbl-wrap { overflow-x: auto; }
.toast-root { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: var(--surface); padding: 10px 14px; border-radius: 8px; font-size: 14px; display: flex; gap: 14px; align-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.toast button { background: none; border: 0; color: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }
.toast .toast-key { font: 12px var(--font-mono); margin-left: -6px; }
.toast .toast-x { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px -6px -4px 0; color: inherit; text-decoration: none; border-radius: 4px; }
.toast .toast-x svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 700px) {
  .brand-name { font-size: 15px; }
  .actions { width: 100%; }
  .actions .btn { padding: 6px 10px; }
  .drag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- status icons ----------
   Every style has its own drawing of the four signs: error, warning, information and ready
   (icons/status/<style>/). The clean styles use theirs as masks painted in the text colour, so they follow
   Day and Night. The retro OS styles show theirs as full-colour pictures, the way those systems did.
   The icons only repeat what the text says, so screen readers skip them. */
/* Retro styles load their pictures as files. The clean styles' masks are written into this file as data: URLs,
   because browsers refuse mask images loaded from files when the page is opened straight from disk (file://). */
:root { --ico-size: 16px; --ico-big: 28px; }
:root[data-skin="system"] { --ico-err: url(../icons/status/system/err.svg); --ico-warn: url(../icons/status/system/warn.svg); --ico-info: url(../icons/status/system/info.svg); --ico-ok: url(../icons/status/system/ok.svg); --ico-big: 32px; }
:root[data-skin="win98"] { --ico-err: url(../icons/status/win98/err.svg); --ico-warn: url(../icons/status/win98/warn.svg); --ico-info: url(../icons/status/win98/info.svg); --ico-ok: url(../icons/status/win98/ok.svg); --ico-big: 32px; }
:root[data-skin="xp"] { --ico-err: url(../icons/status/xp/err.svg); --ico-warn: url(../icons/status/xp/warn.svg); --ico-info: url(../icons/status/xp/info.svg); --ico-ok: url(../icons/status/xp/ok.svg); --ico-big: 32px; }
:root[data-skin="win7"] { --ico-err: url(../icons/status/win7/err.svg); --ico-warn: url(../icons/status/win7/warn.svg); --ico-info: url(../icons/status/win7/info.svg); --ico-ok: url(../icons/status/win7/ok.svg); --ico-big: 32px; }
:root[data-skin="sakura"] { --ico-size: 17px; }
/* generated:begin (tools/make-status-icons.py writes everything up to generated:end; edit the script, not these lines) */
:root { --brand-mask: url('data:image/svg+xml,%3C!-- "Keyboard" emoji (U+2328) from Noto Emoji, the monochrome set by Google (SIL Open Font License 1.1). --%3E %3Csvg viewBox="139 -1830 2322 2322" xmlns="http://www.w3.org/2000/svg"%3E%3Cstyle%3Epath{fill:%2316201c}@media (prefers-color-scheme:dark){path{fill:%23e3ebe7}}%3C/style%3E%3Cpath transform="scale(1 -1)" d="M389 10Q285 10 227.0 68.0Q169 126 169 230V1170Q169 1274 227.0 1332.0Q285 1390 389 1390H2211Q2315 1390 2373.0 1332.0Q2431 1274 2431 1170V230Q2431 126 2373.0 68.0Q2315 10 2211 10ZM389 90H2211Q2282 90 2316.5 124.5Q2351 159 2351 230V1170Q2351 1241 2316.5 1275.5Q2282 1310 2211 1310H389Q318 1310 283.5 1275.5Q249 1241 249 1170V230Q249 159 283.5 124.5Q318 90 389 90ZM405 396H489Q511 396 511 420V503Q511 513 504.5 520.5Q498 528 489 528H405Q383 528 383 503V420Q383 396 405 396ZM627 396H710Q721 396 728.0 403.0Q735 410 735 420V503Q735 513 728.5 520.5Q722 528 712 528H629Q606 528 606 503V420Q606 396 627 396ZM405 609H629Q651 609 651 633V716Q651 740 629 740H405Q383 740 383 716V633Q383 609 405 609ZM405 821H560Q582 821 582 846V929Q582 953 560 953H405Q383 953 383 929V846Q383 836 390.0 828.5Q397 821 405 821ZM762 609H845Q867 609 867 631V714Q867 737 845 737H762Q739 737 739 714V631Q739 623 746.0 616.0Q753 609 762 609ZM407 1034H491Q513 1034 513 1058V1142Q513 1166 491 1166H407Q385 1166 385 1142V1058Q385 1034 407 1034ZM689 821H772Q782 821 789.5 828.5Q797 836 797 846V929Q797 953 772 953H689Q667 953 667 929V846Q667 836 673.5 828.5Q680 821 689 821ZM975 609H1058Q1080 609 1080 631V714Q1080 737 1058 737H975Q952 737 952 714V631Q952 623 959.0 616.0Q966 609 975 609ZM609 1034H693Q715 1034 715 1058V1142Q715 1166 693 1166H609Q587 1166 587 1142V1058Q587 1034 609 1034ZM847 396H1751Q1775 396 1775 420V503Q1775 514 1768.5 521.0Q1762 528 1751 528H847Q823 528 823 503V420Q823 411 830.5 403.5Q838 396 847 396ZM893 821H976Q1000 821 1000 846V929Q1000 953 976 953H893Q869 953 869 929V846Q869 836 876.5 828.5Q884 821 893 821ZM1187 609H1271Q1293 609 1293 631V714Q1293 737 1271 737H1187Q1165 737 1165 714V631Q1165 623 1171.5 616.0Q1178 609 1187 609ZM811 1034H895Q905 1034 912.0 1041.5Q919 1049 919 1058V1142Q919 1166 895 1166H811Q787 1166 787 1142V1058Q787 1034 811 1034ZM1095 821H1178Q1188 821 1195.5 828.5Q1203 836 1203 846V929Q1203 953 1178 953H1095Q1071 953 1071 929V846Q1071 836 1078.5 828.5Q1086 821 1095 821ZM1400 609H1483Q1506 609 1506 631V714Q1506 737 1483 737H1400Q1378 737 1378 714V631Q1378 623 1384.5 616.0Q1391 609 1400 609ZM1015 1034H1099Q1109 1034 1116.0 1041.5Q1123 1049 1123 1058V1142Q1123 1166 1099 1166H1015Q991 1166 991 1142V1058Q991 1034 1015 1034ZM1297 821H1380Q1390 821 1397.5 828.5Q1405 836 1405 846V929Q1405 953 1380 953H1297Q1273 953 1273 929V846Q1273 836 1280.5 828.5Q1288 821 1297 821ZM1613 609H1696Q1718 609 1718 631V714Q1718 737 1696 737H1613Q1590 737 1590 714V631Q1590 623 1597.0 616.0Q1604 609 1613 609ZM1217 1034H1301Q1311 1034 1318.0 1041.5Q1325 1049 1325 1058V1142Q1325 1166 1301 1166H1217Q1193 1166 1193 1142V1058Q1193 1034 1217 1034ZM1889 396H1973Q1997 396 1997 420V503Q1997 513 1990.5 520.5Q1984 528 1973 528H1889Q1865 528 1865 503V420Q1865 396 1889 396ZM1501 821H1584Q1594 821 1601.5 828.5Q1609 836 1609 846V929Q1609 953 1584 953H1501Q1477 953 1477 929V846Q1477 836 1484.5 828.5Q1492 821 1501 821ZM1421 1034H1505Q1515 1034 1522.0 1041.5Q1529 1049 1529 1058V1142Q1529 1166 1505 1166H1421Q1397 1166 1397 1142V1058Q1397 1034 1421 1034ZM2109 396H2192Q2203 396 2210.0 403.0Q2217 410 2217 420V503Q2217 513 2210.0 520.5Q2203 528 2192 528H2109Q2085 528 2085 503V420Q2085 411 2092.5 403.5Q2100 396 2109 396ZM1703 821H1786Q1796 821 1803.5 828.5Q1811 836 1811 846V929Q1811 953 1786 953H1703Q1679 953 1679 929V846Q1679 836 1686.5 828.5Q1694 821 1703 821ZM1825 607H2191Q2215 607 2215 631V720Q2215 744 2191 744H1825Q1816 744 1808.5 737.0Q1801 730 1801 720V631Q1801 621 1808.5 614.0Q1816 607 1825 607ZM1623 1034H1707Q1717 1034 1724.0 1041.5Q1731 1049 1731 1058V1142Q1731 1166 1707 1166H1623Q1599 1166 1599 1142V1058Q1599 1034 1623 1034ZM1907 821H1990Q2014 821 2014 846V929Q2014 953 1990 953H1907Q1883 953 1883 929V846Q1883 836 1890.0 828.5Q1897 821 1907 821ZM1825 1034H1909Q1919 1034 1926.0 1041.5Q1933 1049 1933 1058V1142Q1933 1166 1909 1166H1825Q1801 1166 1801 1142V1058Q1801 1048 1808.5 1041.0Q1816 1034 1825 1034ZM2109 821H2192Q2202 821 2209.5 828.5Q2217 836 2217 846V929Q2217 953 2192 953H2109Q2085 953 2085 929V846Q2085 836 2092.5 828.5Q2100 821 2109 821ZM2038 1034H2192Q2202 1034 2209.5 1041.5Q2217 1049 2217 1058V1142Q2217 1153 2209.5 1159.5Q2202 1166 2192 1166H2038Q2014 1166 2014 1142V1058Q2014 1034 2038 1034ZM2351 615H2431V415Q2431 311 2373.0 253.0Q2315 195 2211 195H389Q285 195 227.0 253.0Q169 311 169 415V615H249V415Q249 344 283.5 309.5Q318 275 389 275H2211Q2282 275 2316.5 309.5Q2351 344 2351 415Z"/%3E%3C/svg%3E'); }
:root {
  --ico-err: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EStudio err%3C/title%3E%3Ccircle cx="12" cy="12" r="9.2" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Cpath d="M8.8 8.8l6.4 6.4m0-6.4-6.4 6.4" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3C/svg%3E');
  --ico-warn: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EStudio warn%3C/title%3E%3Cpath d="M10.3 4.2 2.9 17.4c-.8 1.4.2 3.1 1.8 3.1h14.6c1.6 0 2.6-1.7 1.8-3.1L13.7 4.2c-.8-1.4-2.6-1.4-3.4 0z" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Cpath d="M12 9.2v4.6" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Ccircle cx="12" cy="17.1" r="1.15"/%3E%3C/svg%3E');
  --ico-info: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EStudio info%3C/title%3E%3Ccircle cx="12" cy="12" r="9.2" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Cpath d="M12 11v5.6" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Ccircle cx="12" cy="7.8" r="1.15"/%3E%3C/svg%3E');
  --ico-ok: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EStudio ok%3C/title%3E%3Ccircle cx="12" cy="12" r="9.2" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Cpath d="M8.2 12.3l2.6 2.6 5-5.4" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3C/svg%3E');
}
:root[data-skin="pico"] {
  --ico-err: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EPico err%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M8.6 8.6l6.8 6.8m0-6.8-6.8 6.8" stroke="%23000" stroke-width="2.4" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3C/g%3E%3C/svg%3E');
  --ico-warn: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EPico warn%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M12 9.4v4.4" stroke="%23000" stroke-width="2.4" stroke-linecap="round"/%3E%3Ccircle cx="12" cy="17.4" r="1.5" fill="%23000"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Cpath d="M10.2 3.6 1.9 18c-.8 1.4.2 3.2 1.8 3.2h16.6c1.6 0 2.6-1.8 1.8-3.2L13.8 3.6c-.8-1.4-2.8-1.4-3.6 0z"/%3E%3C/g%3E%3C/svg%3E');
  --ico-info: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EPico info%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Ccircle cx="12" cy="7.6" r="1.5" fill="%23000"/%3E%3Cpath d="M12 11v6" stroke="%23000" stroke-width="2.4" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3C/g%3E%3C/svg%3E');
  --ico-ok: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EPico ok%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M7.8 12.4l2.8 2.8 5.6-6" fill="none" stroke="%23000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3C/g%3E%3C/svg%3E');
}
:root[data-skin="mvp"] {
  --ico-err: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EMVP err%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M8.6 8.6l6.8 6.8m0-6.8-6.8 6.8" stroke="%23000" stroke-width="3" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Crect x="2" y="2" width="20" height="20" rx="5.5"/%3E%3C/g%3E%3C/svg%3E');
  --ico-warn: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EMVP warn%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M12 7.4v5" stroke="%23000" stroke-width="3" stroke-linecap="round"/%3E%3Ccircle cx="12" cy="16.2" r="1.8" fill="%23000"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Crect x="4.2" y="4.2" width="15.6" height="15.6" rx="3.6" transform="rotate(45 12 12)"/%3E%3C/g%3E%3C/svg%3E');
  --ico-info: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EMVP info%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Ccircle cx="12" cy="7.6" r="1.8" fill="%23000"/%3E%3Cpath d="M12 11v6" stroke="%23000" stroke-width="3" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Crect x="2" y="2" width="20" height="20" rx="5.5"/%3E%3C/g%3E%3C/svg%3E');
  --ico-ok: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EMVP ok%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M7.8 13l2.8 2.8 5.6-6" fill="none" stroke="%23000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Crect x="2" y="2" width="20" height="20" rx="5.5"/%3E%3C/g%3E%3C/svg%3E');
}
:root[data-skin="new"] {
  --ico-err: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3Enew.css err%3C/title%3E%3Cpath d="M6 6l12 12M18 6 6 18" fill="none" stroke="%23000" stroke-width="2.6" stroke-linecap="square"/%3E%3C/svg%3E');
  --ico-warn: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3Enew.css warn%3C/title%3E%3Cpath d="M12 3.5v11" fill="none" stroke="%23000" stroke-width="2.6" stroke-linecap="square"/%3E%3Crect x="10.7" y="18" width="2.6" height="2.6"/%3E%3C/svg%3E');
  --ico-info: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3Enew.css info%3C/title%3E%3Crect x="10.7" y="3.4" width="2.6" height="2.6"/%3E%3Cpath d="M8.5 9.6H12v10.8M8.5 20.4h7" fill="none" stroke="%23000" stroke-width="2.6" stroke-linecap="square"/%3E%3C/svg%3E');
  --ico-ok: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3Enew.css ok%3C/title%3E%3Cpath d="M4 12.6l5.2 5.2L20 7" fill="none" stroke="%23000" stroke-width="2.6" stroke-linecap="square" stroke-linejoin="miter"/%3E%3C/svg%3E');
}
:root[data-skin="sakura"] {
  --ico-err: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3ESakura err%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M9.7 9.7l4.6 4.6m0-4.6-4.6 4.6" stroke="%23000" stroke-width="2.5" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Cpath transform="rotate(0 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(72 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(144 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(216 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(288 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Ccircle cx="12" cy="12" r="5.9"/%3E%3C/g%3E%3C/svg%3E');
  --ico-warn: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3ESakura warn%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M12 8.4v3.8" stroke="%23000" stroke-width="2.5" stroke-linecap="round"/%3E%3Ccircle cx="12" cy="15.5" r="1.4" fill="%23000"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Cpath transform="rotate(0 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(72 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(144 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(216 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(288 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Ccircle cx="12" cy="12" r="5.9"/%3E%3C/g%3E%3C/svg%3E');
  --ico-info: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3ESakura info%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Ccircle cx="12" cy="8.6" r="1.4" fill="%23000"/%3E%3Cpath d="M12 11.6v3.9" stroke="%23000" stroke-width="2.5" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Cpath transform="rotate(0 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(72 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(144 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(216 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(288 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Ccircle cx="12" cy="12" r="5.9"/%3E%3C/g%3E%3C/svg%3E');
  --ico-ok: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3ESakura ok%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M9.2 12.1l2 2 3.8-4.2" fill="none" stroke="%23000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Cpath transform="rotate(0 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(72 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(144 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(216 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(288 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Ccircle cx="12" cy="12" r="5.9"/%3E%3C/g%3E%3C/svg%3E');
}
/* generated:end */

/* which sign each message gets */
.qissues li, .issue-list li, .diag li, .sico { --ico: var(--ico-warn); }
.qissues li.err, .issue-list li.err, .diag li.err, .qstatus.err, .sico.err { --ico: var(--ico-err); }
.qstatus.warn, .sico.warn { --ico: var(--ico-warn); }
.issue-list li.info, .diag li.info, .sico.info { --ico: var(--ico-info); }
.qstatus.ok, .all-good, .diag .ok-line, .sico.ok { --ico: var(--ico-ok); }

/* clean styles: a mask in the text colour */
.sico, .qissues li::before, .issue-list li > button::before, .diag li > button::before,
.qstatus::before, .all-good::before, .diag .ok-line::before {
  content: ""; display: inline-block; flex: none; width: var(--ico-size); height: var(--ico-size);
  background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
/* retro OS styles: the full-colour picture, pixel art kept sharp (written out: :is() cannot hold ::before) */
[data-skin="system"] .sico, [data-skin="win98"] .sico, [data-skin="xp"] .sico, [data-skin="win7"] .sico,
[data-skin="system"] .qissues li::before, [data-skin="win98"] .qissues li::before, [data-skin="xp"] .qissues li::before, [data-skin="win7"] .qissues li::before,
[data-skin="system"] .issue-list li > button::before, [data-skin="win98"] .issue-list li > button::before, [data-skin="xp"] .issue-list li > button::before, [data-skin="win7"] .issue-list li > button::before,
[data-skin="system"] .diag li > button::before, [data-skin="win98"] .diag li > button::before, [data-skin="xp"] .diag li > button::before, [data-skin="win7"] .diag li > button::before,
[data-skin="system"] .qstatus::before, [data-skin="win98"] .qstatus::before, [data-skin="xp"] .qstatus::before, [data-skin="win7"] .qstatus::before,
[data-skin="system"] .all-good::before, [data-skin="win98"] .all-good::before, [data-skin="xp"] .all-good::before, [data-skin="win7"] .all-good::before,
[data-skin="system"] .diag .ok-line::before, [data-skin="win98"] .diag .ok-line::before, [data-skin="xp"] .diag .ok-line::before, [data-skin="win7"] .diag .ok-line::before {
  background: var(--ico) center / contain no-repeat; -webkit-mask: none; mask: none;
}
[data-skin="system"] .sico, [data-skin="win98"] .sico,
[data-skin="system"] .qissues li::before, [data-skin="win98"] .qissues li::before,
[data-skin="system"] .issue-list li > button::before, [data-skin="win98"] .issue-list li > button::before,
[data-skin="system"] .diag li > button::before, [data-skin="win98"] .diag li > button::before,
[data-skin="system"] .qstatus::before, [data-skin="win98"] .qstatus::before,
[data-skin="system"] .all-good::before, [data-skin="win98"] .all-good::before,
[data-skin="system"] .diag .ok-line::before, [data-skin="win98"] .diag .ok-line::before { image-rendering: pixelated; }

/* message lists: the sign hangs in the left margin so wrapped lines stay aligned */
.qissues li, .issue-list li > button, .diag li > button { position: relative; }
.qissues li { padding-left: 34px; }
.diag li > button { padding-left: 34px; }
.issue-list li > button { padding-left: 31px; }
.qissues li::before, .diag li > button::before, .issue-list li > button::before { position: absolute; left: 10px; top: 8px; top: calc(6px + .5lh - var(--ico-size) / 2); }
.issue-list li > button::before { left: 8px; top: 6px; top: calc(5px + .5lh - var(--ico-size) / 2); }
.qstatus { display: inline-flex; align-items: center; gap: 4px; }
.qstatus::before { --ico-size: 14px; }
[data-skin="system"] .qstatus::before, [data-skin="win98"] .qstatus::before { --ico-size: 16px; }
.all-good, .diag .ok-line { display: flex; align-items: center; gap: 7px; }
[data-skin="system"] .diag .ok-line { display: inline-flex; }

/* dialogs: a large sign beside the message, as in a classic message box */
.modal-msg { display: flex; gap: 14px; align-items: flex-start; }
.modal-msg .sico { --ico-size: var(--ico-big); margin-top: 2px; }
.modal-msg-body { flex: 1 1 auto; min-width: 0; }
.modal-msg-body > :first-child { margin-top: 0; }
.sico.err { color: var(--error); }
.sico.warn { color: var(--warn); }
.sico.info { color: var(--accent); }
/* System draws a black badge for errors, so its sign turns white there */
[data-skin="system"] .qstatus.err::before { filter: invert(1); }

/* ---------- style picker ---------- */
.skin-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
.skin-pick select {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 6px;
  padding: 4px 8px; min-height: 32px; font-size: 13.5px; font-weight: 500; max-width: 220px;
}
.theme-switch button:disabled { opacity: .4; cursor: not-allowed; }
.actions .divider { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--line); }
.tip {
  position: fixed; z-index: 70; max-width: min(260px, calc(100vw - 16px)); /* hoverable: WCAG 1.4.13 */
  background: var(--ink); color: var(--bg); border-radius: 6px; padding: 6px 9px;
  font: 13px/1.4 var(--font-body); box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
@media (hover: none) { .tip { display: none; } }
[data-skin="win98"] .tip, [data-skin="xp"] .tip, [data-skin="win7"] .tip { background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 0; box-shadow: 2px 2px 0 rgba(0, 0, 0, .25); }
[data-skin="xp"] .tip, [data-skin="win7"] .tip { border-color: #767676; border-radius: 3px; }
[data-skin="system"] .tip { background: #fff; color: #000; border: 1px solid #000; border-radius: 0; box-shadow: 2px 2px 0 #000; }
[data-skin="xp"] .actions .divider { background: rgba(255, 255, 255, .35); }
[data-skin="win98"] .actions .divider { background: #808080; box-shadow: 1px 0 #fff; }
:root:not([data-skin="studio"]) .opt label { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
:root:not([data-skin="studio"]) .opt label .hint { grid-column: 2; }
[data-skin="win98"] select, [data-skin="xp"] select, [data-skin="win7"] select, [data-skin="system"] select { color: #000; }
[data-skin="system"] .seg button[aria-selected="true"], [data-skin="system"] .bubble[aria-pressed="true"] { color: #fff; }

/* =====================================================================
   STYLES. Each look is re-created in this page's own CSS (no framework
   files are loaded), inspired by the projects named in Credits.
   Retro OS looks are light-only; the clean looks have Day and Night.
   ===================================================================== */

/* ---------- System (classic Mac, after System.css) ---------- */
:root[data-skin="system"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --ink: #000; --muted: #000; --faint: #555;
  --line: #000; --line-strong: #000; --accent: #000; --accent-hover: #333; --accent-ink: #fff; --accent-soft: #e4e4e4;
  --error: #a00000; --error-soft: #fff; --warn: #5c4400; --warn-soft: #fff; --focus: #000; --shadow: none; --radius: 0;
  --font-body: "Geneva", "Chicago", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Chicago", "Charcoal", "Geneva", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
[data-skin="system"] body { background: radial-gradient(#a8a8a8 .8px, transparent 1px) 0 0 / 4px 4px, #fff; }
[data-skin="system"] *:not(.bubble):not(.pv-mark):not(.btn):not(.seg):not(.seg button) { border-radius: 0 !important; }
[data-skin="system"] .topbar { border-bottom: 2px solid #000; }
[data-skin="system"] .brand-name { font-weight: 700; }
[data-skin="system"] .qcard, [data-skin="system"] .pblock, [data-skin="system"] .cheats,
[data-skin="system"] .text-wrap, [data-skin="system"] .empty, [data-skin="system"] .modal {
  border: 1px solid #000; box-shadow: 2px 2px 0 #000; background: #fff;
}
[data-skin="system"] .qcard.has-error { border-left: 1px solid #000; box-shadow: 2px 2px 0 #000, inset 4px 0 0 var(--error); }
[data-skin="system"] .qhead {
  background: repeating-linear-gradient(#000 0 1px, #fff 1px 3px) 0 50% / 100% 13px no-repeat, #fff;
  border-bottom: 1px solid #000; padding: 6px 8px;
}
[data-skin="system"] .qhead > * { background-color: #fff; }
[data-skin="system"] .qnum { padding: 0 6px; }
[data-skin="system"] .qsummary { padding: 0 6px; flex-grow: 0; }
[data-skin="system"] .qcard:not(.collapsed) .qsummary { display: none; }
[data-skin="system"] .qtools { padding: 0 2px; }
[data-skin="system"] .qstatus { border: 1px solid #000; border-radius: 0; color: #000; }
[data-skin="system"] .qstatus.err { background: #000; color: #fff; }
[data-skin="system"] .ptitle, [data-skin="system"] .modal h2 {
  display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 15px; font-weight: 700;
  margin: -14px -16px 12px; padding: 4px 8px; border-bottom: 1px solid #000;
}
[data-skin="system"] .modal h2 { margin: -20px -22px 14px; }
[data-skin="system"] .ptitle::before, [data-skin="system"] .ptitle::after,
[data-skin="system"] .modal h2::before, [data-skin="system"] .modal h2::after {
  content: ""; flex: 1 1 auto; height: 11px; background: repeating-linear-gradient(#000 0 1px, #fff 1px 2px);
}
[data-skin="system"] .btn { border: 1px solid #000; border-radius: 6px; background: #fff; color: #000; font-weight: 700; }
[data-skin="system"] .btn:hover, [data-skin="system"] .btn.ghost:hover { background: #000; color: #fff; }
[data-skin="system"] .btn.ghost { border-color: transparent; color: #000; }
[data-skin="system"] .btn.primary { background: #fff; color: #000; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; border-radius: 8px; }
[data-skin="system"] .btn.primary:hover { background: #000; color: #fff; }
[data-skin="system"] .export-buttons { padding: 4px; }
[data-skin="system"] .seg { border: 1px solid #000; border-radius: 6px; }
[data-skin="system"] .seg button { border-radius: 4px; color: #000; }
[data-skin="system"] .inp, [data-skin="system"] .rt-box, [data-skin="system"] .file-name-wrap,
[data-skin="system"] select, [data-skin="system"] .modal textarea { border: 1px solid #000; background: #fff; }
[data-skin="system"] .inp:focus, [data-skin="system"] .rt-box:focus-within, [data-skin="system"] .text-wrap:focus-within { box-shadow: 0 0 0 1px #000; border-color: #000; }
[data-skin="system"] .rt-toolbar { border-bottom: 1px solid #000; }
[data-skin="system"] .rt-toolbar button:hover { background: #000; color: #fff; }
[data-skin="system"] .bubble { border: 1px solid #000; color: #000; }
[data-skin="system"] .bubble.square, [data-skin="system"] .pv-mark.sq { border-radius: 0; }
[data-skin="system"] .editor-bar, [data-skin="system"] .addbar { background: #fff; border: 1px solid #000; padding: 8px; }
[data-skin="system"] .addbar { border-style: dashed; }
[data-skin="system"] .qissues li, [data-skin="system"] .issue-list button, [data-skin="system"] .diag li button { border: 1px dashed currentColor; }
[data-skin="system"] .text-intro, [data-skin="system"] .privacy, [data-skin="system"] .diag .ok-line { background: #fff; padding: 2px 6px; display: inline-block; }
[data-skin="system"] .toast { background: #fff; color: #000; border: 1px solid #000; box-shadow: 2px 2px 0 #000; border-radius: 0; }
[data-skin="system"] .toast button { color: #000; }

/* ---------- Windows 98 (after 98.css) ---------- */
:root[data-skin="win98"] {
  --bg: #008080; --surface: #c0c0c0; --surface-2: #dfdfdf; --ink: #000; --muted: #222; --faint: #4d4d4d;
  --line: #808080; --line-strong: #404040; --accent: #000080; --accent-hover: #0000a8; --accent-ink: #fff; --accent-soft: #d4d8f0;
  --error: #b00000; --error-soft: #ffe2e2; --warn: #6b4a00; --warn-soft: #fff3c4; --focus: #000; --shadow: none; --radius: 0;
  --font-body: Tahoma, "MS Sans Serif", "Microsoft Sans Serif", Geneva, Verdana, sans-serif;
  --font-display: var(--font-body);
  --out: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --in: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --bar: linear-gradient(90deg, #000080, #1084d0);
}
[data-skin="win98"] body { font-size: 14px; }
[data-skin="win98"] *:not(.bubble):not(.pv-mark) { border-radius: 0 !important; }
[data-skin="win98"] .bubble.square, [data-skin="win98"] .pv-mark.sq { border-radius: 0 !important; }
[data-skin="win98"] .topbar, [data-skin="win98"] body::before { background: #c0c0c0; border-bottom: 0; box-shadow: var(--out); }
[data-skin="win98"] .qcard, [data-skin="win98"] .pblock, [data-skin="win98"] .cheats, [data-skin="win98"] .empty,
[data-skin="win98"] .modal, [data-skin="win98"] .editor-bar, [data-skin="win98"] .addbar, [data-skin="win98"] .site-foot {
  background: #c0c0c0; border: 0; box-shadow: var(--out);
}
[data-skin="win98"] .qcard { padding: 3px; }
[data-skin="win98"] .qcard.has-error { border-left: 0; box-shadow: var(--out), inset 5px 0 0 var(--error); }
[data-skin="win98"] .editor-bar, [data-skin="win98"] .addbar { padding: 6px 8px; }
[data-skin="win98"] .qhead { background: var(--bar); border-bottom: 0; padding: 3px 4px; color: #fff; }
[data-skin="win98"] .qcard.collapsed .qhead { background: linear-gradient(90deg, #808080, #b5b5b5); }
[data-skin="win98"] .qnum, [data-skin="win98"] .drag, [data-skin="win98"] .qsummary { color: #fff; }
[data-skin="win98"] .qtools .icon-btn { width: 24px; height: 22px; background: #c0c0c0; color: #000; box-shadow: var(--out); margin-left: 2px; }
[data-skin="win98"] .qtools .icon-btn:active { box-shadow: var(--in); }
[data-skin="win98"] .qtools .icon-btn svg { width: 14px; height: 14px; stroke-width: 2.4; }
[data-skin="win98"] .qstatus { background: #c0c0c0 !important; box-shadow: var(--out); color: #000; font-weight: 700; }
[data-skin="win98"] .qstatus.err { color: var(--error); }
[data-skin="win98"] .ptitle, [data-skin="win98"] .modal h2 {
  background: var(--bar); color: #fff; font-size: 14px; font-weight: 700; margin: -11px -13px 10px; padding: 4px 6px;
}
[data-skin="win98"] .pblock { padding: 14px 16px; }
[data-skin="win98"] .modal h2 { margin: -17px -19px 14px; }
[data-skin="win98"] .btn, [data-skin="win98"] .btn.ghost, [data-skin="win98"] .tf button, [data-skin="win98"] .seg button {
  background: #c0c0c0; color: #000; border: 0; box-shadow: var(--out); font-weight: 400; min-width: 75px;
}
[data-skin="win98"] .btn:active, [data-skin="win98"] .tf button[aria-pressed="true"], [data-skin="win98"] .seg button[aria-selected="true"] { box-shadow: var(--in); background: #dfdfdf; color: #000; }
[data-skin="win98"] .btn.primary { box-shadow: inset 0 0 0 1px #000, var(--out); font-weight: 700; }
[data-skin="win98"] .btn:hover { background: #c8c8c8; }
[data-skin="win98"] .btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
[data-skin="win98"] .btn:disabled { color: #808080; text-shadow: 1px 1px #fff; opacity: 1; }
[data-skin="win98"] .seg, [data-skin="win98"] .tf { background: transparent; border: 0; gap: 2px; padding: 0; }
[data-skin="win98"] .tf button + button { border-left: 0; }
[data-skin="win98"] .inp, [data-skin="win98"] .rt-box, [data-skin="win98"] .text-wrap, [data-skin="win98"] .file-name-wrap,
[data-skin="win98"] select, [data-skin="win98"] .modal textarea, [data-skin="win98"] .raw-out, [data-skin="win98"] .cheat {
  background: #fff; border: 0; box-shadow: var(--in);
}
[data-skin="win98"] .rt-box { padding: 2px; }
[data-skin="win98"] .inp:focus, [data-skin="win98"] .rt-box:focus-within, [data-skin="win98"] .text-wrap:focus-within,
[data-skin="win98"] .file-name-wrap:focus-within { box-shadow: var(--in); }
[data-skin="win98"] .rt-toolbar { background: #c0c0c0; border-bottom: 1px solid #808080; }
[data-skin="win98"] .rt-toolbar button:hover { background: #c0c0c0; box-shadow: var(--out); }
[data-skin="win98"] .bubble { background: #fff; border: 0; box-shadow: var(--in); color: #000; }
[data-skin="win98"] .bubble[aria-pressed="true"] { background: #000080; color: #fff; }
[data-skin="win98"] .chip { background: #fff; box-shadow: var(--in); border: 0; color: #000; }
[data-skin="win98"] .theme-switch { background: #c0c0c0; border: 0; box-shadow: var(--in); }
[data-skin="win98"] .text-intro, [data-skin="win98"] .privacy, [data-skin="win98"] .diag .ok-line { color: #fff; }
[data-skin="win98"] .text-intro kbd { color: #000; }
[data-skin="win98"] .toast { background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 0; }
[data-skin="win98"] .toast button { color: #000080; }
[data-skin="win98"] .modal-backdrop { background: rgba(0, 0, 0, .25); }

/* ---------- Windows XP (after XP.css) ---------- */
:root[data-skin="xp"] {
  --bg: #cfe0f4; --surface: #ece9d8; --surface-2: #f7f6ef; --ink: #000; --muted: #333; --faint: #606060;
  --line: #aca899; --line-strong: #7f9db9; --accent: #235bd4; --accent-hover: #1941a5; --accent-ink: #fff; --accent-soft: #d6e4fb;
  --error: #c4291c; --error-soft: #fde4e1; --warn: #7a5300; --warn-soft: #fff4c7; --focus: #245edb; --shadow: none; --radius: 8px;
  --font-body: Tahoma, "Trebuchet MS", Verdana, Geneva, sans-serif;
  --font-display: "Trebuchet MS", Tahoma, Verdana, sans-serif;
  --bar: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7);
}
[data-skin="xp"] body { font-size: 14px; background: linear-gradient(180deg, #a9cbf2 0, #dce9f8 70%, #eef4fb 100%) fixed; }
[data-skin="xp"] .topbar, [data-skin="xp"] body::before { background: linear-gradient(180deg, #3168d5 0, #4993e6 6%, #2157d7 20%, #2663e0 70%, #1941a5 100%); border-bottom: 0; color: #fff; }
[data-skin="xp"] .brand-name, [data-skin="xp"] .save-status, [data-skin="xp"] .skin-pick { color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .4); }
[data-skin="xp"] #set-title { color: #fff; }
[data-skin="xp"] #set-title::placeholder { color: #cfe0ff; }
[data-skin="xp"] #set-title:focus { background: #fff; color: #000; }
[data-skin="xp"] .actions .btn.ghost { color: #fff; }
[data-skin="xp"] .actions .btn.ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }
[data-skin="xp"] .theme-switch { background: rgba(0, 0, 0, .15); border-color: rgba(255, 255, 255, .3); }
[data-skin="xp"] .theme-switch button { color: #e6efff; }
[data-skin="xp"] .theme-switch button[aria-pressed="true"] { background: #fff; color: #000; }
[data-skin="xp"] .qcard, [data-skin="xp"] .pblock, [data-skin="xp"] .modal {
  background: #ece9d8; border: 3px solid #0831d9; border-top: 0; border-radius: 8px 8px 0 0; box-shadow: 2px 3px 8px rgba(0, 0, 0, .25);
}
[data-skin="xp"] .qcard.has-error { border-left: 3px solid #0831d9; box-shadow: 2px 3px 8px rgba(0, 0, 0, .25), inset 4px 0 0 var(--error); }
[data-skin="xp"] .qhead { background: var(--bar); color: #fff; border-bottom: 0; border-radius: 7px 7px 0 0; padding: 4px 6px; }
[data-skin="xp"] .qnum, [data-skin="xp"] .drag, [data-skin="xp"] .qsummary { color: #fff; text-shadow: 1px 1px #0f1089; }
[data-skin="xp"] .qtools .icon-btn { width: 23px; height: 23px; color: #fff; border: 1px solid #fff; border-radius: 3px; margin-left: 2px; background: linear-gradient(180deg, #3c8cff, #1c5de0); }
[data-skin="xp"] .qtools .icon-btn.del { background: linear-gradient(180deg, #e8805a, #c6421b); }
[data-skin="xp"] .qtools .icon-btn:hover { filter: brightness(1.15); background-color: transparent; color: #fff; }
[data-skin="xp"] .qtools .icon-btn svg { width: 13px; height: 13px; stroke-width: 2.6; }
[data-skin="xp"] .qstatus { box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
[data-skin="xp"] .qstatus.ok { background: #e8f5df; color: #2a6e1c; }
[data-skin="xp"] .pblock { padding: 0 12px 12px; }
[data-skin="xp"] .ptitle, [data-skin="xp"] .modal h2 {
  background: var(--bar); color: #fff; font-size: 14px; font-weight: 700; text-shadow: 1px 1px #0f1089;
  margin: 0 -12px 10px; padding: 6px 10px; border-radius: 6px 6px 0 0;
}
[data-skin="xp"] .modal { padding: 0 22px 20px; }
[data-skin="xp"] .modal h2 { margin: 0 -22px 14px; }
[data-skin="xp"] .btn, [data-skin="xp"] .tf button, [data-skin="xp"] .seg button {
  border: 1px solid #003c74; border-radius: 3px; color: #000; font-weight: 400;
  background: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5);
}
[data-skin="xp"] .btn:hover, [data-skin="xp"] .tf button:hover, [data-skin="xp"] .seg button:hover { box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a; }
[data-skin="xp"] .btn.ghost { border-color: transparent; background: transparent; color: var(--ink); }
[data-skin="xp"] .btn.ghost:hover { border-color: #003c74; background: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5); }
[data-skin="xp"] .btn.primary { color: #fff; font-weight: 700; border-color: #1f6b14; text-shadow: 1px 1px rgba(0, 0, 0, .35); background: linear-gradient(180deg, #3f8333, #348426 50%, #2e7d22 51%, #348529); }
[data-skin="xp"] .btn.primary:hover { filter: brightness(1.08); box-shadow: none; }
[data-skin="xp"] .seg, [data-skin="xp"] .tf { background: transparent; border: 0; gap: 3px; padding: 0; overflow: visible; }
[data-skin="xp"] .tf button + button { border-left: 1px solid #003c74; }
[data-skin="xp"] .seg button[aria-selected="true"], [data-skin="xp"] .tf button[aria-pressed="true"] { background: #fff; color: #000; border-color: #245edb; box-shadow: inset 0 -3px #ffc83d; font-weight: 700; }
[data-skin="xp"] .inp, [data-skin="xp"] .rt-box, [data-skin="xp"] .text-wrap, [data-skin="xp"] .file-name-wrap, [data-skin="xp"] select,
[data-skin="xp"] .modal textarea, [data-skin="xp"] .cheats, [data-skin="xp"] .empty { background: #fff; border: 1px solid #7f9db9; border-radius: 0; box-shadow: none; }
[data-skin="xp"] .inp:focus, [data-skin="xp"] .rt-box:focus-within, [data-skin="xp"] .text-wrap:focus-within { border-color: #245edb; box-shadow: none; }
[data-skin="xp"] .rt-toolbar { background: #f4f3ee; border-radius: 0; border-bottom-color: #d5d2c3; }
[data-skin="xp"] .bubble { border-color: #1c5180; background: linear-gradient(135deg, #dcdcd7, #fff); color: #1c5180; }
[data-skin="xp"] .bubble[aria-pressed="true"] { background: radial-gradient(circle at 35% 30%, #3f8f25, #1f6b14 70%); border-color: #1f6b14; color: #fff; }
[data-skin="xp"] .editor-bar, [data-skin="xp"] .addbar { background: rgba(255, 255, 255, .55); border: 1px solid #7f9db9; border-radius: 6px; padding: 6px 8px; }
[data-skin="xp"] .site-foot { background: #ece9d8; border-top: 1px solid #aca899; }
[data-skin="xp"] .toast { background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 8px; }
[data-skin="xp"] .toast button { color: #245edb; }

/* ---------- Windows 7 (after 7.css) ---------- */
:root[data-skin="win7"] {
  --bg: #d9e8f6; --surface: #ffffff; --surface-2: #f3f6fa; --ink: #1e1e1e; --muted: #474747; --faint: #656565;
  --line: #d4dbe3; --line-strong: #8e8f8f; --accent: #2a6cb0; --accent-hover: #1f5a96; --accent-ink: #fff; --accent-soft: #dcecfc;
  --error: #b42318; --error-soft: #fdeceb; --warn: #7a5300; --warn-soft: #fff4d1; --focus: #0066cc; --shadow: none; --radius: 6px;
  --font-body: "Segoe UI", "Segoe UI Variable", Tahoma, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(214, 233, 250, .65) 45%, rgba(176, 210, 240, .7));
}
[data-skin="win7"] body { background: radial-gradient(ellipse at 20% 0, #f4fbff 0, transparent 55%), linear-gradient(160deg, #b9d9f2 0, #e3effa 55%, #cfe3f5 100%) fixed; }
[data-skin="win7"] .topbar, [data-skin="win7"] body::before { background: var(--glass), #cfe2f5; border-bottom: 1px solid #8eaccc; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-skin="win7"] .qcard, [data-skin="win7"] .pblock, [data-skin="win7"] .modal {
  background: var(--glass), #e6f0fa; border: 1px solid rgba(0, 0, 0, .55); border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 2px 3px 10px rgba(0, 0, 0, .25); padding: 0 6px 6px;
}
[data-skin="win7"] .qcard.has-error { border-left: 1px solid rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 5px 0 0 var(--error), 2px 3px 10px rgba(0, 0, 0, .25); }
[data-skin="win7"] .qhead { border-bottom: 0; padding: 6px 2px 5px; }
[data-skin="win7"] .qnum { text-shadow: 0 0 8px #fff, 0 0 4px #fff; }
[data-skin="win7"] .qbody { background: #fff; border: 1px solid #8e8f8f; border-radius: 2px; }
[data-skin="win7"] .qtools .icon-btn { width: 28px; height: 22px; border: 1px solid rgba(0, 0, 0, .45); border-radius: 3px; margin-left: 2px; color: #1e1e1e; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(220, 232, 245, .7) 50%, rgba(190, 210, 232, .7) 51%, rgba(230, 240, 250, .8)); }
[data-skin="win7"] .qtools .icon-btn.del { color: #fff; background: linear-gradient(180deg, #e8a493, #d0573e 50%, #b8331c 51%, #d26952); }
[data-skin="win7"] .qtools .icon-btn:hover { filter: brightness(1.1); }
[data-skin="win7"] .qtools .icon-btn svg { width: 14px; height: 14px; }
[data-skin="win7"] .pblock { padding: 0 14px 14px; background: linear-gradient(180deg, rgba(232, 242, 252, .95), rgba(190, 216, 241, .9) 34px, #fff 34px); }
[data-skin="win7"] .ptitle { font-size: 14px; font-weight: 400; margin: 0 -8px 10px; padding: 0 2px; height: 34px; line-height: 34px; text-shadow: 0 0 8px #fff, 0 0 4px #fff; }
[data-skin="win7"] .modal { padding: 0 20px 18px; background: linear-gradient(180deg, rgba(232, 242, 252, .97), rgba(190, 216, 241, .95) 42px, #fff 42px); }
[data-skin="win7"] .modal h2 { font-size: 16px; font-weight: 400; padding: 9px 0 8px; margin: 0 0 10px; text-shadow: 0 0 8px #fff; }
[data-skin="win7"] .btn, [data-skin="win7"] .tf button, [data-skin="win7"] .seg button {
  border: 1px solid #707070; border-radius: 3px; color: #000; font-weight: 400;
  background: linear-gradient(180deg, #f2f2f2 45%, #ebebeb 45%, #dddddd 55%, #cfcfcf);
  box-shadow: inset 0 0 0 1px #fcfcfc;
}
[data-skin="win7"] .btn:hover, [data-skin="win7"] .tf button:hover, [data-skin="win7"] .seg button:hover { border-color: #3c7fb1; background: linear-gradient(180deg, #eaf6fd 45%, #d9f0fc 45%, #bee6fd 55%, #a7d9f5); }
[data-skin="win7"] .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
[data-skin="win7"] .btn.primary { border-color: #3c7fb1; color: #000; background: linear-gradient(180deg, #eaf6fd 45%, #d9f0fc 45%, #bee6fd 55%, #a7d9f5); box-shadow: inset 0 0 0 1px #48d2ff; }
[data-skin="win7"] .btn.primary:hover { background: linear-gradient(180deg, #e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db); }
[data-skin="win7"] .seg, [data-skin="win7"] .tf { background: transparent; border: 0; gap: 2px; padding: 0; overflow: visible; }
[data-skin="win7"] .tf button + button { border-left: 1px solid #707070; }
[data-skin="win7"] .seg button[aria-selected="true"], [data-skin="win7"] .tf button[aria-pressed="true"] { border-color: #2c628b; color: #000; background: linear-gradient(180deg, #e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .25); }
[data-skin="win7"] .inp, [data-skin="win7"] .rt-box, [data-skin="win7"] .text-wrap, [data-skin="win7"] .file-name-wrap, [data-skin="win7"] select, [data-skin="win7"] .modal textarea {
  background: #fff; border: 1px solid #abadb3; border-top-color: #8e9197; border-radius: 2px; box-shadow: none;
}
[data-skin="win7"] .inp:hover, [data-skin="win7"] .inp:focus, [data-skin="win7"] .rt-box:focus-within, [data-skin="win7"] .text-wrap:focus-within { border-color: #3d7bad; border-top-color: #3d7bad; box-shadow: none; }
[data-skin="win7"] .rt-toolbar { background: linear-gradient(180deg, #fafcfe, #e9eff6); }
[data-skin="win7"] .bubble { border-color: #8e8f8f; background: linear-gradient(135deg, #e6e6e6, #fff); color: #1e1e1e; }
[data-skin="win7"] .bubble[aria-pressed="true"] { background: radial-gradient(circle at 40% 35%, #1f7fb3, #1f5a96 75%); border-color: #2c628b; color: #fff; }
[data-skin="win7"] .editor-bar, [data-skin="win7"] .addbar, [data-skin="win7"] .cheats, [data-skin="win7"] .empty { background: rgba(255, 255, 255, .6); border: 1px solid #a9c2dc; border-radius: 6px; padding: 6px 8px; }
[data-skin="win7"] .cheats { padding: 10px 14px; }
[data-skin="win7"] .site-foot { background: rgba(255, 255, 255, .6); border-top: 1px solid #a9c2dc; }
[data-skin="win7"] .toast { background: linear-gradient(180deg, #fff, #e4e5f0); color: #1e1e1e; border: 1px solid #767676; border-radius: 4px; }
[data-skin="win7"] .toast button { color: #2a6cb0; }

/* ---------- Pico (after Pico CSS) ---------- */
:root[data-skin="pico"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #fbfcfc; --ink: #373c44; --muted: #646b79; --faint: #697389;
  --line: #e7eaf0; --line-strong: #cfd5e2; --accent: #016ba3; --accent-hover: #015887; --accent-ink: #fff; --accent-soft: rgba(2, 154, 232, .16);
  --error: #b71c1c; --error-soft: #fdecec; --warn: #8a5a00; --warn-soft: #fdf3d8; --focus: #0172ad; --radius: .25rem;
  --shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .017), .0335rem .067rem .402rem rgba(129, 145, 181, .024), .0625rem .125rem .75rem rgba(129, 145, 181, .03), .1125rem .225rem 1.35rem rgba(129, 145, 181, .036), .2085rem .417rem 2.502rem rgba(129, 145, 181, .043), .5rem 1rem 6rem rgba(129, 145, 181, .06), 0 0 0 .0625rem rgba(129, 145, 181, .015);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="pico"]:not([data-theme="light"]) {
    --bg: #13171f; --surface: #181c25; --surface-2: #1c212c; --ink: #c2c7d0; --muted: #8e97a8; --faint: #838a9b;
    --line: #2a3140; --line-strong: #3b4457; --accent: #01aaff; --accent-hover: #79c0ff; --accent-ink: #0a0c10; --accent-soft: rgba(1, 170, 255, .2);
    --error: #ff8a80; --error-soft: #3a1b1b; --warn: #f2bd55; --warn-soft: #33290f; --focus: #01aaff; --shadow: 0 0 0 .0625rem rgba(7, 9, 12, .3), .5rem 1rem 3rem rgba(7, 9, 12, .3); color-scheme: dark;
  }
}
:root[data-skin="pico"][data-theme="dark"] {
  --bg: #13171f; --surface: #181c25; --surface-2: #1c212c; --ink: #c2c7d0; --muted: #8e97a8; --faint: #838a9b;
  --line: #2a3140; --line-strong: #3b4457; --accent: #01aaff; --accent-hover: #79c0ff; --accent-ink: #0a0c10; --accent-soft: rgba(1, 170, 255, .2);
  --error: #ff8a80; --error-soft: #3a1b1b; --warn: #f2bd55; --warn-soft: #33290f; --focus: #01aaff; --shadow: 0 0 0 .0625rem rgba(7, 9, 12, .3), .5rem 1rem 3rem rgba(7, 9, 12, .3); color-scheme: dark;
}
[data-skin="pico"] body { font-size: 16px; line-height: 1.6; }
[data-skin="pico"] .qcard, [data-skin="pico"] .pblock { border: 0; }
[data-skin="pico"] .qhead { background: var(--surface-2); border-radius: .25rem .25rem 0 0; padding: 10px 14px 10px 8px; }
[data-skin="pico"] .qbody { padding: 18px 20px 20px; gap: 16px; }
[data-skin="pico"] .pblock { padding: 20px 22px; }
[data-skin="pico"] .ptitle { font-size: 18px; color: var(--ink); }
[data-skin="pico"] .btn { border-radius: .25rem; padding: 8px 18px; min-height: 40px; }
[data-skin="pico"] .btn.small { min-height: 34px; }
[data-skin="pico"] .btn:not(.primary):not(.ghost) { border-color: var(--line-strong); color: var(--muted); background: transparent; }
[data-skin="pico"] .btn.primary:focus-visible, [data-skin="pico"] .btn:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem var(--accent-soft); }
[data-skin="pico"] .inp, [data-skin="pico"] .file-name-wrap, [data-skin="pico"] select { background: var(--surface-2); border-color: var(--line-strong); border-radius: .25rem; padding: 10px 14px; min-height: 44px; }
[data-skin="pico"] .file-name-wrap { padding: 0; }
[data-skin="pico"] .skin-pick select, [data-skin="pico"] .qtype { padding: 4px 10px; min-height: 34px; }
[data-skin="pico"] .rt-box, [data-skin="pico"] .text-wrap { border-color: var(--line-strong); background: var(--surface-2); }
[data-skin="pico"] .rt-toolbar { background: transparent; }
[data-skin="pico"] .seg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
[data-skin="pico"] .addbar { border: 1px dashed var(--line-strong); }

/* ---------- MVP.css ---------- */
:root[data-skin="mvp"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f8f8f8; --ink: #000; --muted: #4f4f4f; --faint: #6f6f6f;
  --line: #f2f2f2; --line-strong: #cccccc; --accent: #0d6ebc; --accent-hover: #0a5a9c; --accent-ink: #fff; --accent-soft: #e6f2fd;
  --error: #c5221f; --error-soft: #fdeceb; --warn: #8a5a00; --warn-soft: #fdf3d8; --focus: #118bee; --radius: 8px;
  --shadow: 2px 2px 10px #cccccc;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-display: var(--font-body); color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="mvp"]:not([data-theme="light"]) {
    --bg: #333333; --surface: #3d3d3d; --surface-2: #444444; --ink: #f7f7f7; --muted: #cfcfcf; --faint: #b3b3b3;
    --line: #555555; --line-strong: #6a6a6a; --accent: #56bbff; --accent-hover: #8fd3ff; --accent-ink: #000; --accent-soft: #24445f;
    --error: #ff8a7f; --error-soft: #4a2723; --warn: #f2bd55; --warn-soft: #4a3e1c; --focus: #4db8ff; --shadow: 2px 2px 10px #222; color-scheme: dark;
  }
}
:root[data-skin="mvp"][data-theme="dark"] {
  --bg: #333333; --surface: #3d3d3d; --surface-2: #444444; --ink: #f7f7f7; --muted: #cfcfcf; --faint: #b3b3b3;
  --line: #555555; --line-strong: #6a6a6a; --accent: #56bbff; --accent-hover: #8fd3ff; --accent-ink: #000; --accent-soft: #24445f;
  --error: #ff8a7f; --error-soft: #4a2723; --warn: #f2bd55; --warn-soft: #4a3e1c; --focus: #4db8ff; --shadow: 2px 2px 10px #222; color-scheme: dark;
}
[data-skin="mvp"] body { font-size: 16px; line-height: 1.55; }
[data-skin="mvp"] .topbar { box-shadow: 0 1px 0 var(--line); }
[data-skin="mvp"] .brand-name { font-weight: 700; }
[data-skin="mvp"] .qcard, [data-skin="mvp"] .pblock { border: 1px solid var(--line); }
[data-skin="mvp"] .qbody { padding: 16px 18px 18px; }
[data-skin="mvp"] .pblock { padding: 18px 20px; }
[data-skin="mvp"] .ptitle { font-size: 19px; font-weight: 700; }
[data-skin="mvp"] .btn { border-radius: 5px; font-weight: 700; border: 2px solid var(--accent); color: var(--accent); background: transparent; }
[data-skin="mvp"] .btn:hover { background: var(--accent-soft); }
[data-skin="mvp"] .btn.ghost { border-color: transparent; color: var(--muted); font-weight: 600; }
[data-skin="mvp"] .btn.primary { color: var(--accent-ink); background: var(--accent); }
[data-skin="mvp"] .btn.primary:hover { filter: brightness(1.12); background: var(--accent); }
[data-skin="mvp"] .inp, [data-skin="mvp"] .rt-box, [data-skin="mvp"] .text-wrap, [data-skin="mvp"] .file-name-wrap, [data-skin="mvp"] select { border: 1px solid var(--line-strong); border-radius: 5px; }
[data-skin="mvp"] .seg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
[data-skin="mvp"] .chip { border-radius: 99px; }

/* ---------- new.css ---------- */
:root[data-skin="new"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f6f8fa; --ink: #000000; --muted: #1a1a1a; --faint: #555c66;
  --line: #e5e7eb; --line-strong: #d0d4da; --accent: #0065dc; --accent-hover: #0052b4; --accent-ink: #fff; --accent-soft: #e5f0ff;
  --error: #c5221f; --error-soft: #fdeceb; --warn: #8a5a00; --warn-soft: #fdf3d8; --focus: #0070f3; --radius: 4px; --shadow: none;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body); color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="new"]:not([data-theme="light"]) {
    --bg: #111111; --surface: #111111; --surface-2: #222222; --ink: #ffffff; --muted: #eeeeee; --faint: #a8a8a8;
    --line: #333333; --line-strong: #444444; --accent: #3291ff; --accent-hover: #5aa5ff; --accent-ink: #000; --accent-soft: #10284a;
    --error: #ff8a7f; --error-soft: #3a1915; --warn: #f2bd55; --warn-soft: #33290f; --focus: #3291ff; --shadow: none; color-scheme: dark;
  }
}
:root[data-skin="new"][data-theme="dark"] {
  --bg: #111111; --surface: #111111; --surface-2: #222222; --ink: #ffffff; --muted: #eeeeee; --faint: #a8a8a8;
  --line: #333333; --line-strong: #444444; --accent: #3291ff; --accent-hover: #5aa5ff; --accent-ink: #000; --accent-soft: #10284a;
  --error: #ff8a7f; --error-soft: #3a1915; --warn: #f2bd55; --warn-soft: #33290f; --focus: #3291ff; --shadow: none; color-scheme: dark;
}
[data-skin="new"] body { font-size: 15.5px; line-height: 1.6; letter-spacing: -.005em; }
[data-skin="new"] .topbar, [data-skin="new"] body::before { background: var(--surface-2); border-bottom-color: var(--line); }
[data-skin="new"] .brand-name { font-weight: 700; letter-spacing: -.01em; }
[data-skin="new"] .qhead { background: var(--surface-2); }
[data-skin="new"] .ptitle { font-weight: 700; letter-spacing: -.01em; }
[data-skin="new"] .btn { border-radius: 4px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 500; }
[data-skin="new"] .btn:hover { background: var(--accent-hover); }
[data-skin="new"] .btn.ghost { background: transparent; color: var(--muted); }
[data-skin="new"] .btn.ghost:hover { background: var(--line); color: var(--ink); }
[data-skin="new"] .addbar .btn, [data-skin="new"] .export-buttons .btn:not(.primary), [data-skin="new"] .modal-actions .btn:not(.primary) { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); }
[data-skin="new"] .addbar .btn:hover, [data-skin="new"] .export-buttons .btn:not(.primary):hover, [data-skin="new"] .modal-actions .btn:not(.primary):hover { background: var(--line); }
[data-skin="new"] .inp, [data-skin="new"] .rt-box, [data-skin="new"] .text-wrap, [data-skin="new"] .file-name-wrap, [data-skin="new"] select { border-color: var(--line-strong); border-radius: 4px; }
[data-skin="new"] .seg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
[data-skin="new"] kbd, [data-skin="new"] code { background: var(--line); border-color: var(--line-strong); }

/* ---------- Sakura ---------- */
:root[data-skin="sakura"] {
  --bg: #f9f9f9; --surface: #ffffff; --surface-2: #f1f1f1; --ink: #4a4a4a; --muted: #5e5e5e; --faint: #6b6b6b;
  --line: #e2e2e2; --line-strong: #c9c9c9; --accent: #1d7484; --accent-hover: #982c61; --accent-ink: #f9f9f9; --accent-soft: #e2f0f2;
  --error: #b42318; --error-soft: #fbeaea; --warn: #8a5a00; --warn-soft: #fbf2da; --focus: #982c61; --radius: 4px; --shadow: none;
  --font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body); color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="sakura"]:not([data-theme="light"]) {
    --bg: #222222; --surface: #2b2b2b; --surface-2: #333333; --ink: #c9c9c9; --muted: #b0b0b0; --faint: #9d9d9d;
    --line: #3d3d3d; --line-strong: #555555; --accent: #79bdc9; --accent-hover: #e48ab6; --accent-ink: #1b1b1b; --accent-soft: #23393d;
    --error: #ff8a7f; --error-soft: #3a1d1b; --warn: #f2bd55; --warn-soft: #3a3016; --focus: #e48ab6; --shadow: none; color-scheme: dark;
  }
}
:root[data-skin="sakura"][data-theme="dark"] {
  --bg: #222222; --surface: #2b2b2b; --surface-2: #333333; --ink: #c9c9c9; --muted: #b0b0b0; --faint: #9d9d9d;
  --line: #3d3d3d; --line-strong: #555555; --accent: #79bdc9; --accent-hover: #e48ab6; --accent-ink: #1b1b1b; --accent-soft: #23393d;
  --error: #ff8a7f; --error-soft: #3a1d1b; --warn: #f2bd55; --warn-soft: #3a3016; --focus: #e48ab6; --shadow: none; color-scheme: dark;
}
[data-skin="sakura"] body { font-size: 16px; line-height: 1.618; }
[data-skin="sakura"] .topbar, [data-skin="sakura"] body::before { background: var(--bg); }
[data-skin="sakura"] .qcard, [data-skin="sakura"] .pblock { border-color: var(--line); }
[data-skin="sakura"] .qnum, [data-skin="sakura"] .ptitle, [data-skin="sakura"] .brand-name { font-weight: 700; }
[data-skin="sakura"] .btn { border-radius: 1px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); }
[data-skin="sakura"] .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
[data-skin="sakura"] .btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
[data-skin="sakura"] .btn.ghost:hover { color: var(--accent-hover); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
[data-skin="sakura"] .inp, [data-skin="sakura"] .rt-box, [data-skin="sakura"] .text-wrap, [data-skin="sakura"] .file-name-wrap, [data-skin="sakura"] select { border-color: var(--line-strong); }
[data-skin="sakura"] .inp:focus, [data-skin="sakura"] .rt-box:focus-within { border-color: var(--accent); }
[data-skin="sakura"] .seg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
[data-skin="sakura"] .credits-list a, [data-skin="sakura"] .linkish { color: var(--accent); }
[data-skin="sakura"] .credits-list a:hover, [data-skin="sakura"] .linkish:hover { color: var(--accent-hover); }

/* ---------- visual fields (js/richfield.js) ---------- */
.rf { outline: none; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; cursor: text; }
.rf[data-empty]::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; position: absolute; }
.rf[data-empty] { position: relative; }
.rf-multi { display: block; width: 100%; padding: 8px 10px; min-height: 64px; border-radius: 0 0 6px 6px; }
.rf-multi.fb { min-height: 40px; }
.rf-single { display: block; padding-top: 7px; padding-bottom: 7px; }
.rf-single:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.rf-img { display: inline-block; vertical-align: middle; position: relative; border-radius: 4px; cursor: pointer; line-height: 0; margin: 2px 1px; outline: 2px solid transparent; outline-offset: 1px; }
.rf-img img { max-width: 100%; height: auto; border-radius: 3px; }
.rf-img:hover, .rf-img:focus-visible, .rf-img.selected { outline-color: var(--accent); }
.rf-img.align-left, .rf-img.align-center, .rf-img.align-right { display: table; margin-top: 6px; margin-bottom: 6px; }
.rf-img.align-left { margin-right: auto; }
.rf-img.align-center { margin-left: auto; margin-right: auto; }
.rf-img.align-right { margin-left: auto; }
.rf-missing { display: inline-block; line-height: 1.4; font-size: 13px; padding: 4px 8px; border: 1px dashed var(--warn); color: var(--warn); border-radius: 4px; }

.rf-table { display: block; margin: 6px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); white-space: normal; cursor: default; }
.rf-table.active, .rf-table:focus-within { border-color: var(--accent); }
.rf-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px; border-bottom: 1px solid var(--line); font-size: 12.5px; user-select: none; }
.rf-tlabel { font-weight: 600; color: var(--muted); }
.rf-tcount { color: var(--faint); font-variant-numeric: tabular-nums; margin-right: 4px; }
.rf-tbtn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 4px; padding: 2px 8px; font-size: 12.5px; cursor: pointer; min-height: 26px; }
.rf-tbtn:hover { border-color: var(--accent); color: var(--accent); }
.rf-tbtn.danger { margin-left: auto; }
.rf-tbtn.danger:hover { border-color: var(--error); color: var(--error); }
.rf-thead { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; margin: 0 4px; }
.rf-tscroll { overflow-x: auto; padding: 6px; }
.rf-grid { border-collapse: collapse; background: var(--surface); min-width: 50%; }
.rf-grid td, .rf-grid th { border: 1px solid var(--line-strong); padding: 4px 8px; min-width: 64px; height: 30px; text-align: left; vertical-align: top; white-space: pre-wrap; outline: none; }
.rf-grid th { background: var(--surface-2); font-weight: 600; }
.rf-grid td:focus, .rf-grid th:focus { box-shadow: inset 0 0 0 2px var(--accent); }

.rf-panel { position: fixed; z-index: 60; width: min(360px, calc(100vw - 16px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.rf-panel-title { font-weight: 600; }
.rf-plabel { display: flex; flex-direction: column; gap: 4px; }
.rf-plabel > span { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rf-size { display: flex; align-items: center; gap: 8px; }
.rf-size input[type=range] { flex: 1 1 auto; accent-color: var(--accent); }
.rf-size-label { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.rf-align button { padding: 6px 12px; min-height: 32px; }
.rf-panel-actions { display: flex; gap: 6px; justify-content: flex-end; }
.rf-note { font-size: 13px; color: var(--warn); padding: 4px 10px; }
/* WYSIWYG formatting inside the fields */
.rf code { font-family: var(--font-mono); font-size: .92em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; }
.rf sup, .rf sub { font-size: .75em; line-height: 0; }
.rf-math { display: inline-block; padding: 0 3px; margin: 0 1px; border-radius: 4px; cursor: pointer; background: var(--accent-soft); outline: 1px solid transparent; user-select: none; line-height: 1.3; }
.rf-math:hover, .rf-math.selected { outline-color: var(--accent); }
.rf-math-display { display: block; text-align: center; margin: 4px 0; padding: 4px; }
.rf-mono { font-family: var(--font-mono); }
.rf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.rf-mprev { min-height: 34px; padding: 6px 8px; border: 1px dashed var(--line-strong); border-radius: 6px; overflow-x: auto; font-size: 16px; }
.rf-mhint { font-size: 12.5px; color: var(--faint); }
.rt-toolbar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* insert-table dialog */
.tpick { display: grid; grid-template-columns: repeat(10, 22px); gap: 3px; margin: 6px 0 10px; }
.tpick button { width: 22px; height: 22px; padding: 0; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 3px; cursor: pointer; }
.tpick button.on { background: var(--accent-soft); border-color: var(--accent); }
.tpick-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tpick-row label { display: inline-flex; align-items: center; gap: 6px; }
.tpick-row input[type=number] { width: 70px; }
.rf-tgroup { display: inline-flex; }
.rf-tgroup .rf-tbtn { border-radius: 0; margin-left: -1px; }
.rf-tgroup .rf-tbtn:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.rf-tgroup .rf-tbtn:last-child { border-radius: 0 4px 4px 0; }
.rf-tbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rf-tsub { font-size: 11.5px; color: var(--faint); margin-left: 4px; }
.rf-ticon { display: inline-grid; place-items: center; padding: 2px 7px; }
.rf-table.talign-center .rf-grid { margin-left: auto; margin-right: auto; }
.rf-table.talign-right .rf-grid { margin-left: auto; }

/* ---------- Windows High Contrast and other forced-colour modes ----------
   The browser replaces the page's colours with the user's. Backgrounds and box-shadows that marked a
   selected answer or a focused field disappear, so mark them with system colours and real outlines. */
@media (forced-colors: active) {
  .bubble[aria-pressed="true"], .tf button[aria-pressed="true"], .seg button[aria-selected="true"],
  .theme-switch button[aria-pressed="true"], .rt-toolbar button[aria-pressed="true"], .rf-tbtn[aria-pressed="true"],
  .rf-panel [aria-pressed="true"], .pv-opts li.is-correct .pv-mark, .tpick button.on {
    forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; border-color: Highlight !important;
  }
  .bubble, .pv-mark, .tf button, .seg button, .theme-switch button, .rt-toolbar button { border: 1px solid ButtonText; }
  .inp:focus, .rf-single:focus, .rt-box:focus-within, .text-wrap:focus-within, .file-name-wrap:focus-within,
  #set-title:focus, .modal textarea:focus, .rf-panel input:focus { outline: 2px solid Highlight !important; outline-offset: 1px; }
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
  .brand-mark, .sico, .qissues li::before, .issue-list li > button::before, .diag li > button::before,
  .qstatus::before, .all-good::before, .diag .ok-line::before { forced-color-adjust: none; background: CanvasText; }
  .qstatus, .chip, .rf-math, .toast, .tip { border: 1px solid CanvasText; }
}
/* "Increase contrast" in the operating system: faint text takes the stronger muted colour. */
@media (prefers-contrast: more) {
  :root:not(#x):not(#y) { --faint: var(--muted); --line: var(--line-strong); } /* :not(#…) outranks every style's own colours */
}

/* ---------- field outlines and focus (WCAG 1.4.11, 2.4.7) ----------
 --field-line: the edge of text fields, selects and answer bubbles, at least 3:1 against the page in every style.
 System and Windows 98 draw fields with their own black lines or bevels and keep them. */
:root { --field-line: #778f83; }
:root[data-theme="dark"] { --field-line: #5d746a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --field-line: #5d746a; } }
:root[data-skin="xp"] { --field-line: #6186a9; }
:root[data-skin="win7"] { --field-line: #7a7a7a; }
:root[data-skin="pico"] { --field-line: #808fb2; }
:root[data-skin="pico"][data-theme="dark"] { --field-line: #5f6e8c; }
@media (prefers-color-scheme: dark) { :root[data-skin="pico"]:not([data-theme="light"]) { --field-line: #5f6e8c; } }
:root[data-skin="mvp"] { --field-line: #8c8c8c; }
:root[data-skin="mvp"][data-theme="dark"] { --field-line: #929292; }
@media (prefers-color-scheme: dark) { :root[data-skin="mvp"]:not([data-theme="light"]) { --field-line: #929292; } }
:root[data-skin="new"] { --field-line: #838e9d; }
:root[data-skin="new"][data-theme="dark"] { --field-line: #6e6e6e; }
@media (prefers-color-scheme: dark) { :root[data-skin="new"]:not([data-theme="light"]) { --field-line: #6e6e6e; } }
:root[data-skin="sakura"] { --field-line: #888888; }
:root[data-skin="sakura"][data-theme="dark"] { --field-line: #7e7e7e; }
@media (prefers-color-scheme: dark) { :root[data-skin="sakura"]:not([data-theme="light"]) { --field-line: #7e7e7e; } }
:root:not([data-skin="win98"]):not([data-skin="system"]) :is(.inp, .rt-box, .text-wrap, .file-name-wrap, select, .modal textarea, .bubble[aria-pressed="false"], .tpick button:not(.on)):not(:focus):not(:focus-within) { border-color: var(--field-line); }
/* The project title looks like a heading; a dotted underline in the text colour shows it can be edited. */
#set-title:not(:focus) { border-bottom: 1px dotted currentColor; border-radius: 0; }
/* One clear focus outline on every field, in every style: 2px in the --focus colour (3:1 or more). */
:root:not(#x) :is(.inp, select, .modal textarea, #set-title, .rf-panel input):focus,
:root:not(#x) .rt-box:has(> .rf:focus), :root:not(#x) .text-wrap:focus-within, :root:not(#x) .file-name-wrap:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
:root:not(#x) .rt-box .rf:focus, :root:not(#x) .text-wrap textarea:focus, :root:not(#x) .file-name-wrap input:focus { outline: none; }
/* Pico drew button focus as a 16% tint (about 1.2:1); use the outline like every other style. */
:root:not(#x)[data-skin="pico"] .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }