/* 照搬 prefill 的 shared/embed-base.css（控件与排版），去掉了只适用于嵌入框的隐藏滚动条；配色变量在 app.css。 */
/* prefill embed base stylesheet. The publisher inlines it before the author's styles in every
   embed document, so unstyled text and controls match the reader, and puts a `:root` rule
   with the day colour tokens of shared/tokens.ts (--pf-fg, --pf-c1, …) before it as defaults.
   The reader sets the active theme's values through the embed runtime.
   Contract: docs/specs/embeds.md#publisher. */
:root {
  --pf-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Segoe UI", sans-serif;
  --pf-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* The reader's corner radii: small controls and marks, and cards and frames. */
  --pf-radius-sm: 6px;
  --pf-radius: 10px;
  color-scheme: light;
}
html {
  color: var(--pf-fg);
  /* On a deck's stage the reader sends the type roles of the slide's size (--pf-text-body,
     --pf-text-small; shared/deck.ts stageTypeVars), so unstyled text and controls read at the
     slide's sizes. */
  font: var(--pf-text-body, 15px)/1.6 var(--pf-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-autospace: normal;
}
body {
  margin: 0;
  padding: 1px 0;
}
*, *::before, *::after {
  box-sizing: border-box;
}
code, kbd, pre, output {
  font-family: var(--pf-mono);
  font-variant-numeric: tabular-nums;
}
/* Controls copy the reader's shadcn components (radix-nova): an outline Button, Toggle,
   Slider, Checkbox, RadioGroup, Input, and Select trigger, drawn with the reader's tokens. */
:root {
  --pf-control-bg: transparent;
  --pf-control-hover: var(--pf-soft);
}
:root[data-pf-theme="dark"], :root[data-pf-theme="late"] {
  --pf-control-bg: color-mix(in srgb, var(--pf-input) 30%, transparent);
  --pf-control-hover: color-mix(in srgb, var(--pf-input) 50%, transparent);
}
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button, select, input:not([type=range]):not([type=checkbox]):not([type=radio]), textarea {
  border: 1px solid var(--pf-input);
  border-radius: var(--pf-radius);
  background-color: var(--pf-control-bg);
  outline: none;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: calc(var(--pf-text-small, 14px) + 18px);
  height: calc(var(--pf-text-small, 14px) + 18px);
  padding: 0 10px;
  font-size: var(--pf-text-small, 14px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
}
button:hover {
  background-color: var(--pf-control-hover);
}
button:active:not(:disabled, [aria-haspopup]) {
  transform: translateY(1px);
}
/* A toggle or one option of a segmented control: the chosen one (A/B, a tab, a mode). */
button[aria-pressed="true"], button[aria-selected="true"] {
  background-color: var(--pf-soft);
}
:is(button, select, input, textarea):focus-visible {
  border-color: var(--pf-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-ring) 50%, transparent);
}
:is(button, select, input, textarea):disabled {
  opacity: 0.5;
  pointer-events: none;
}
input:not([type=range]):not([type=checkbox]):not([type=radio]), textarea {
  min-width: 0;
  padding: 4px 10px;
}
input:not([type=range]):not([type=checkbox]):not([type=radio]) {
  height: calc(var(--pf-text-small, 14px) + 18px);
}
input::placeholder, textarea::placeholder {
  color: var(--pf-muted);
}
select {
  -webkit-appearance: none;
  appearance: none;
  height: calc(var(--pf-text-small, 14px) + 18px);
  padding: 0 30px 0 10px;
  font-size: var(--pf-text-small, 14px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}
/* Where the browser supports customizable select (Chromium), the open list matches the reader's
   Select menu; elsewhere, including iOS, it is the system picker. */
@supports (appearance: base-select) {
  select, ::picker(select) {
    appearance: base-select;
  }
  select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 0 10px;
    background-image: none;
  }
  select::picker-icon {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--pf-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: rotate 0.15s;
  }
  select:open::picker-icon {
    rotate: 180deg;
  }
  /* An embed frame is often shorter than the list; the picker scrolls within the frame. */
  ::picker(select) {
    min-width: 144px;
    max-block-size: calc(100dvh - 16px);
    overflow-y: auto;
    margin-block: 4px;
    padding: 4px;
    border: none;
    border-radius: var(--pf-radius);
    background: var(--pf-surface);
    color: var(--pf-fg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-fg) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    opacity: 0;
    scale: 0.95;
    transition: opacity 0.1s, scale 0.1s, overlay 0.1s allow-discrete, display 0.1s allow-discrete;
  }
  ::picker(select):popover-open {
    opacity: 1;
    scale: 1;
  }
  @starting-style {
    ::picker(select):popover-open {
      opacity: 0;
      scale: 0.95;
    }
  }
  option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 6px;
    border-radius: var(--pf-radius-sm);
    font-size: var(--pf-text-small, 14px);
    cursor: default;
  }
  option:is(:hover, :focus-visible) {
    background: var(--pf-soft);
    outline: none;
  }
  option::checkmark {
    order: 1;
    margin-inline-start: auto;
    padding-inline-start: 12px;
  }
}
input[type=checkbox], input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  border: 1px solid var(--pf-input);
  background-color: var(--pf-control-bg);
  vertical-align: -3px;
  outline: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
input[type=checkbox] {
  border-radius: 4px;
}
input[type=radio] {
  border-radius: 50%;
}
input[type=checkbox]:checked, input[type=radio]:checked {
  border-color: var(--pf-primary);
  background-color: var(--pf-primary);
}
input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pf-primary-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pf-primary-ink);
  transform: translate(-50%, -50%);
}
label:has(> input[type=checkbox], > input[type=radio]) {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
  font-size: 14px;
  cursor: pointer;
}
label:has(> input[type=checkbox], > input[type=radio]) > input {
  vertical-align: 0;
}
/* Range inputs: a 6px track filled in the accent colour up to the thumb, and a white thumb with a
   soft shadow that grows while dragged (the kit's default Slider). The runtime keeps
   --pf-range-fill (0%–100%) current on every range input. */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  margin: 0;
  background: transparent;
  vertical-align: middle;
  outline: none;
  cursor: pointer;
  --pf-thumb-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.22);
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--pf-accent) var(--pf-range-fill, 0%), var(--pf-soft) var(--pf-range-fill, 0%));
}
input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--pf-soft);
}
input[type=range]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--pf-accent);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--pf-thumb-shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--pf-thumb-shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.15);
}
input[type=range]:active::-moz-range-thumb {
  transform: scale(1.15);
}
input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--pf-thumb-shadow), 0 0 0 4px color-mix(in srgb, var(--pf-accent) 35%, transparent);
}
input[type=range]:focus-visible::-moz-range-thumb {
  box-shadow: var(--pf-thumb-shadow), 0 0 0 4px color-mix(in srgb, var(--pf-accent) 35%, transparent);
}
/* Larger controls on a touch screen, except on a deck's slide (`data-pf-deck`, set by the runtime),
   which is one canvas on every device. `:where` keeps the selectors as weak as the bare elements. */
@media (pointer: coarse) {
  :where(:root:not([data-pf-deck])) button {
    min-height: 36px;
  }
  :where(:root:not([data-pf-deck])) input[type=range] {
    height: 36px;
  }
  :where(:root:not([data-pf-deck])) input[type=range]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -9px;
  }
  :where(:root:not([data-pf-deck])) input[type=range]::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
}
/* A panel inside an embed: a control group, a readout, a side-by-side view. */
.pf-card {
  border-radius: calc(var(--pf-radius) * 1.4);
  background: var(--pf-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-fg) 10%, transparent);
  padding: 16px;
}
:focus-visible:not(button, select, input, textarea) {
  outline: 2px solid var(--pf-ring);
  outline-offset: 2px;
}
a {
  color: var(--pf-accent);
}
canvas, svg, img, video {
  max-width: 100%;
}
/* 配色取 prefill 的 shared/tokens.ts（白天 / 夜间两套），控件样式在 base.css。 */
:root {
  --pf-fg: #0a0a0a;
  --pf-muted: #737373;
  --pf-faint: #a2a2a2;
  --pf-bg: #ffffff;
  --pf-surface: #ffffff;
  --pf-line: #e5e5e5;
  --pf-accent: #3280dd;
  --pf-accent-ink: #ffffff;
  --pf-ok: #239d6a;
  --pf-primary: #171717;
  --pf-primary-ink: #fafafa;
  --pf-soft: #f5f5f5;
  --pf-input: #e5e5e5;
  --pf-ring: #a1a1a1;
  --pf-err: #c2410c;
}
:root[data-pf-theme="dark"] {
  color-scheme: dark;
  --pf-fg: #fafafa;
  --pf-muted: #a1a1a1;
  --pf-faint: #666666;
  --pf-bg: #0a0a0a;
  --pf-surface: #171717;
  --pf-line: #222323;
  --pf-accent: #5fa1f3;
  --pf-accent-ink: #0a0a0a;
  --pf-ok: #56bc8a;
  --pf-primary: #e5e5e5;
  --pf-primary-ink: #171717;
  --pf-soft: #262626;
  --pf-input: #ffffff26;
  --pf-ring: #737373;
  --pf-err: #fb923c;
}

html { background: var(--pf-bg); }
#app { max-width: 760px; margin: 0 auto; padding: 20px 16px 96px; }
h1 { font-size: 20px; line-height: 1.3; margin: 4px 0; }
h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 10px; }
.pf-card { margin: 12px 0; }
.pf-card.focus { box-shadow: 0 0 0 2px var(--pf-accent); }
details.pf-card > summary { cursor: pointer; font-weight: 500; }
details.pf-card[open] > summary { margin-bottom: 8px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--pf-muted); }
.small { font-size: 13px; }
.mono { font-family: var(--pf-mono); font-variant-numeric: tabular-nums; white-space: pre; }
.ok { color: var(--pf-ok); }
.err { color: var(--pf-err); }
.tag { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--pf-soft); color: var(--pf-muted); font-size: 12px; font-weight: 400; line-height: 20px; white-space: nowrap; }
.caption { font-size: 17px; font-weight: 500; margin: 4px 0; }
.q { margin: 12px 0 2px; font-size: 13px; color: var(--pf-muted); }
.ev { margin-top: 6px; }
.phrase { font-size: 14px; font-weight: 500; }
.opts { display: flex; flex-wrap: wrap; row-gap: 2px; }
.opts label { padding: 3px 0; }
.summary > div, .truth > div { margin-top: 4px; }
.truth { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pf-line); }
audio { display: block; width: 100%; margin: 4px 0 8px; }
textarea { display: block; width: 100%; min-height: 72px; resize: vertical; }
.copybox { margin-top: 8px; min-height: 120px; font-family: var(--pf-mono); font-size: 12px; }
button.primary { background: var(--pf-primary); border-color: var(--pf-primary); color: var(--pf-primary-ink); }
button.primary:hover { background: color-mix(in srgb, var(--pf-primary) 85%, var(--pf-bg)); }
button.link { height: auto; min-width: 0; margin-left: 8px; padding: 0; border: none; background: none; color: var(--pf-accent); font-weight: 400; }
.list a { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: var(--pf-radius-sm); color: inherit; text-decoration: none; }
.list a:hover { background: var(--pf-soft); }
.dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--pf-line); }
.dot.half { background: var(--pf-accent); }
.dot.done { background: var(--pf-ok); }
.login { max-width: 420px; margin: 15vh auto 0; }
.login input { flex: 1; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 4px 6px; border-bottom: 1px solid var(--pf-line); text-align: left; }
ul { padding-left: 20px; margin: 4px 0; }