/* ============================================================
   TextMark — stylesheet
   Design language: warm paper ground, serif display type,
   hand-drawn dashed frames, big-type quotes, everything rounded.
   Colors only ever come from the tokens below (no hardcoded hex
   in components), and there are zero network requests: fonts are
   local stacks, decorations are CSS/SVG.
   ============================================================ */

/* ---------------------------------------------- tokens: light (terracotta) */
:root {
  /* 60% brand / 30% accent / 10% pop */
  --brand: #A8452F;
  --brand-deep: #83301F;
  --brand-tint: #CF7059;
  --brand-rgb: 168, 69, 47;
  --brand-text: #9B3E29;
  --brand-surface: #A8452F;
  --on-brand: #FFFFFF;

  --highlight: #EFCE9A;
  --highlight-soft: #F8EBD6;
  --highlight-rgb: 239, 206, 154;

  --pop: #2F6B5B;
  --pop-deep: #21504A;
  --pop-soft: #E6F1ED;
  --pop-text: #235448;
  --pop-rgb: 47, 107, 91;

  --cream: #FDF8F1;
  --cream-dark: #F6EBDC;
  --card-bg: #FFFDFA;
  --dark-panel: #241814;
  --on-dark: #F4E7DA;
  --on-dark-dim: #C0AA9B;

  --ink: #2A1D18;
  --ink-light: #5A463D;
  --ink-faint: #7C6A60;
  --ink-rgb: 42, 29, 24;

  --border: rgba(42, 29, 24, .15);
  --hairline: rgba(42, 29, 24, .08);
  --focus-ring: #83301F;
  --highlighter: linear-gradient(transparent 58%, rgba(var(--highlight-rgb), .85) 58%);

  --success: #2E7955;
  --success-soft: #E7F4EC;
  --warning: #8A6A00;
  --warning-soft: #FBEFC8;
  --danger: #B4233C;
  --danger-soft: #FBE7EA;

  --shadow-sm: 0 2px 10px rgba(42, 29, 24, .05);
  --shadow-md: 0 8px 26px rgba(42, 29, 24, .09);
  --shadow-lg: 0 16px 44px rgba(42, 29, 24, .16);

  --radius-lg: 24px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --pill: 999px;
  --maxw: 940px;

  /* local font stacks only — no webfont requests, so the page also works offline */
  --sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Huiwen Mincho", "Songti SC", "Source Han Serif SC", "Noto Serif SC",
           STSong, SimSun, Georgia, "Times New Roman", serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", "Courier New", monospace;
}

/* ---------------------------------------------- tokens: dark (warm, same hue family) */
:root[data-theme="dark"] {
  --brand: #E38A6C;
  --brand-deep: #C96A4C;
  --brand-tint: #F0A98F;
  --brand-rgb: 227, 138, 108;
  --brand-text: #F0A184;
  --brand-surface: #B24A2F;
  --on-brand: #FFF6F1;

  --highlight: #E8C58F;
  --highlight-soft: #3A2A18;
  --highlight-rgb: 232, 197, 143;

  --pop: #67B49B;
  --pop-deep: #4E9A82;
  --pop-soft: #172A25;
  --pop-text: #85C9B1;
  --pop-rgb: 103, 180, 155;

  --cream: #1B1411;
  --cream-dark: #241A15;
  --card-bg: #251B16;
  --dark-panel: #150F0C;

  --ink: #F6EDE4;
  --ink-light: #DBC6B9;
  --ink-faint: #AE988B;
  --ink-rgb: 246, 237, 228;

  --border: rgba(246, 237, 228, .18);
  --hairline: rgba(246, 237, 228, .10);
  --focus-ring: #F0A184;

  --success: #7BD3A4;
  --success-soft: #14291D;
  --warning: #EFC978;
  --warning-soft: #2E2413;
  --danger: #F0908A;
  --danger-soft: #331A18;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 46px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--cream);
  /* paper grain: a very faint dot grid, warm ink at 4% */
  background-image: radial-gradient(circle, rgba(var(--ink-rgb), .045) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--highlight); color: var(--ink); }

/* the ring follows each element's own radius — never override border-radius here,
   or focusing a 16px field would square its corners off */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
/* inline links have no box of their own, so round their ring explicitly */
a:focus-visible { border-radius: var(--radius-xs); }

p { margin: .55rem 0; }

a {
  color: var(--brand-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

code, kbd {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--cream-dark);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: .1em .4em;
}

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* hand-drawn underline used for the selected tab */
.squiggle { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ---------------------------------------------- header */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
  background: var(--cream);
  border-bottom: 2px dashed rgba(var(--brand-rgb), .22);
}

.brand {
  display: flex; align-items: center; gap: 11px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.brand-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  font-size: 20px; line-height: 1;
  background: var(--highlight-soft);
  border: 2px dashed rgba(var(--brand-rgb), .5);
  border-radius: var(--radius);
  transform: rotate(-4deg);
}
.brand-name {
  font-family: var(--serif);
  font-weight: 900; font-size: 1.24rem; letter-spacing: .01em;
}
.brand-sub {
  padding-left: 11px;
  font-size: .78rem; font-weight: 500; color: var(--ink-faint);
  border-left: 1px dashed var(--border);
}

/* ---------------------------------------------- tabs (desktop: hand-underlined) */
.tabs {
  display: flex; flex: 1; justify-content: center;
  gap: clamp(2px, 1.4vw, 14px);
}
.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 14px;
  font: inherit; font-size: .94rem; font-weight: 600;
  color: var(--ink-light); background: none;
  border: 0; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.tab:hover { color: var(--ink); background: rgba(var(--highlight-rgb), .38); }
.tab[aria-selected="true"] { color: var(--brand-text); }
.tab .icon { width: 1.05em; height: 1.05em; }
.tab .tab-line {
  /* an SVG with no viewBox falls back to 300px intrinsic width, so size it
     explicitly instead of relying on left+right */
  position: absolute; left: 11px; bottom: 1px;
  width: calc(100% - 22px); height: 7px;
  color: var(--brand);
  opacity: 0; transform: scaleX(.4);
  transform-origin: left center;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .9, .3, 1);
}
.tab[aria-selected="true"] .tab-line { opacity: 1; transform: none; }

.actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.icon-btn, .lang-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  font: inherit; font-size: .82rem; font-weight: 700;
  color: var(--ink-light); background: var(--card-bg);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .12s ease;
}
.lang-btn { width: auto; min-width: 48px; padding: 0 12px; }
.icon-btn:hover, .lang-btn:hover {
  color: var(--brand-text); border-color: rgba(var(--brand-rgb), .55);
  background: var(--highlight-soft); transform: translateY(-1px);
}
.icon-btn .icon { width: 19px; height: 19px; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root:not([data-theme="dark"]) .icon-moon { display: none; }

/* ---------------------------------------------- layout */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) max(16px, env(safe-area-inset-left))
           56px max(16px, env(safe-area-inset-right));
}

.page { display: none; }
.page.active { display: block; animation: page-in .24s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* page header: hand-written kicker + oversized decorative numeral + serif title */
.page-head {
  position: relative;
  margin: 0 4px clamp(20px, 3vw, 30px);
  padding-right: 84px;
}
.page-kicker {
  display: inline-block;
  font-family: var(--hand); font-size: 1.15rem; font-weight: 700;
  color: var(--brand-text); letter-spacing: .02em;
  transform: rotate(-1.5deg);
}
.page-num {
  position: absolute; top: -18px; right: -4px;
  font-family: var(--serif); font-style: italic; font-weight: 900;
  font-size: clamp(3.2rem, 9vw, 6rem); line-height: 1;
  color: rgba(var(--brand-rgb), .14);
  pointer-events: none; user-select: none;
}
.page-title {
  margin: .1rem 0 0;
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1.25;
  letter-spacing: .01em;
}
/* the lead paragraph is set as a big-type quote */
.page-lead {
  position: relative;
  max-width: 62ch;
  margin: clamp(12px, 2vw, 18px) 0 0;
  padding-left: 40px;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.9vw, 1.17rem); font-weight: 700; line-height: 1.85;
  color: var(--ink-light);
}
.page-lead::before {
  content: "\201C";
  position: absolute; left: -4px; top: -.18em;
  font-family: var(--serif); font-size: 3.6rem; line-height: 1;
  color: rgba(var(--brand-rgb), .28);
  pointer-events: none;
}
.sticker {
  display: inline-block;
  margin-top: 14px; padding: 4px 14px;
  font-family: var(--hand); font-size: 1.02rem; font-weight: 700;
  color: var(--pop-text); background: var(--pop-soft);
  border: 1.5px dashed rgba(var(--pop-rgb), .5);
  border-radius: var(--pill);
  transform: rotate(-1.2deg);
}

/* ---------------------------------------------- panels */
.panel {
  position: relative;
  padding: clamp(18px, 3vw, 30px);
  margin-bottom: clamp(16px, 2.5vw, 22px);
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* result panels: hand-drawn dashed frame with a written-on label */
.panel.accent {
  background: var(--cream-dark);
  border: 2.5px dashed rgba(var(--brand-rgb), .38);
  box-shadow: none;
}
.panel.accent::before {
  content: "Result \2726";
  position: absolute; top: -14px; left: 24px;
  padding: 0 10px;
  font-family: var(--hand); font-size: 1.1rem; font-weight: 700;
  color: var(--brand-text); background: var(--cream-dark);
  transform: rotate(-1.5deg);
}
.panel-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.panel-title {
  margin: 0;
  font-family: var(--serif); font-weight: 900; font-size: 1.22rem; line-height: 1.4;
}
.panel-hint { margin: 0 0 2px; color: var(--ink-faint); font-size: .89rem; }

/* ---------------------------------------------- fields */
.field { margin-top: clamp(16px, 2.4vw, 22px); }
.field:first-of-type { margin-top: 10px; }

.field-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
label { font-weight: 700; font-size: .93rem; }
.field-label { font-weight: 700; font-size: .93rem; }
.field-tools { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.counter { color: var(--ink-faint); font-size: .76rem; font-family: var(--mono); }
.counter.over { color: var(--danger); font-weight: 700; }

textarea, input[type="text"], input[type="password"], input[type="search"] {
  display: block; width: 100%;
  padding: 12px 15px;
  font-family: inherit; font-size: 1rem; line-height: 1.7;
  color: var(--ink); background: var(--cream);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
textarea { resize: vertical; min-height: 96px; }
textarea::placeholder, input::placeholder { color: var(--ink-faint); opacity: .85; }

textarea:hover, input:hover { border-color: rgba(var(--brand-rgb), .45); }
textarea:focus, input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .14);
}
textarea[readonly] {
  background: var(--card-bg);
  border-style: dashed; border-color: rgba(var(--brand-rgb), .3);
}
textarea.drop-target {
  border-color: var(--pop); border-style: dashed;
  box-shadow: 0 0 0 4px rgba(var(--pop-rgb), .16);
}

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 50px; }
.pw-toggle {
  position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  color: var(--ink-faint); background: none;
  border: 0; border-radius: var(--radius-xs); cursor: pointer;
}
.pw-toggle:hover { color: var(--brand-text); background: var(--highlight-soft); }

/* radio cards — dashed sketch frames, solid once picked */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; cursor: pointer;
  background: var(--card-bg);
  border: 2px dashed rgba(var(--ink-rgb), .22);
  border-radius: var(--radius);
  transition: border-color .16s ease, background .16s ease, transform .12s ease;
}
.choice:hover { border-color: rgba(var(--brand-rgb), .5); transform: translateY(-1px); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-title {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .95rem;
}
.choice-title::before {
  content: ""; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  transition: border-color .16s ease, border-width .16s ease;
}
.choice-desc { color: var(--ink-faint); font-size: .82rem; line-height: 1.6; }
.choice:has(input:checked), .choice.is-checked {
  border-style: solid; border-color: var(--brand);
  background: rgba(var(--brand-rgb), .07);
}
.choice:has(input:checked) .choice-title::before, .choice.is-checked .choice-title::before {
  border-color: var(--brand); border-width: 5px;
}
.choice:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* switch */
.switch {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: clamp(16px, 2.4vw, 22px); padding: 14px 16px;
  background: var(--cream); border: 2px dashed rgba(var(--ink-rgb), .18);
  border-radius: var(--radius); cursor: pointer;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative; flex: none;
  width: 44px; height: 25px; margin-top: 2px;
  background: rgba(var(--ink-rgb), .25);
  border-radius: var(--pill);
  transition: background .18s ease;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--card-bg); box-shadow: var(--shadow-sm);
  transition: transform .2s cubic-bezier(.3, .8, .3, 1);
}
.switch input:checked + .switch-track { background: var(--brand-surface); }
.switch input:checked + .switch-track::after { transform: translateX(19px); }
.switch input:disabled + .switch-track { opacity: .45; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.switch-text { font-size: .93rem; font-weight: 600; }
.switch-text small {
  display: block; margin-top: 2px;
  color: var(--ink-faint); font-size: .82rem; font-weight: 400; line-height: 1.6;
}

/* ---------------------------------------------- buttons */
button { font: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  font-size: .95rem; font-weight: 700;
  color: var(--ink); background: var(--card-bg);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease,
              transform .14s ease, box-shadow .18s ease;
}
.btn:hover {
  color: var(--brand-text); border-color: rgba(var(--brand-rgb), .55);
  background: var(--highlight-soft);
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
  color: var(--on-brand); background: var(--brand-surface); border-color: transparent;
}
.btn-primary:hover {
  color: var(--on-brand); background: var(--brand-deep); border-color: transparent;
  box-shadow: 0 10px 26px rgba(var(--brand-rgb), .32);
}

/* small tool buttons: dashed pills, like pencilled-in notes */
.btn-sm {
  min-height: 34px; padding: 0 13px; gap: 6px;
  font-size: .8rem; font-weight: 600;
  color: var(--ink-faint); background: transparent;
  border: 1.5px dashed rgba(var(--ink-rgb), .22); border-radius: var(--pill);
}
.btn-sm:hover {
  color: var(--brand-text); background: var(--highlight-soft);
  border-color: rgba(var(--brand-rgb), .5); border-style: solid;
  transform: none;
}
.btn-sm .icon { width: 14px; height: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: clamp(18px, 2.6vw, 26px); }
.btn-row.tight { margin-top: 14px; }
.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: var(--on-brand);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.kbd-hint { font-family: var(--mono); font-size: .76rem; color: var(--ink-faint); }

/* ---------------------------------------------- chips, notes, cards */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  font-size: .77rem; font-family: var(--mono); color: var(--ink-light);
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--pill);
}
:root[data-theme="dark"] .chip { background: var(--cream-dark); }
.chip.ok { color: var(--success); background: var(--success-soft); border-color: rgba(var(--pop-rgb), .3); }
.chip.lock { color: var(--warning); background: var(--warning-soft); border-color: rgba(var(--highlight-rgb), .7); }

.note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 14px; padding: 12px 16px;
  font-size: .87rem; line-height: 1.7;
  border: 1.5px dashed; border-radius: var(--radius);
}
.note-warn { color: var(--warning); background: var(--warning-soft); border-color: rgba(var(--highlight-rgb), .8); }
.note-info { color: var(--ink-light); background: var(--cream-dark); border-color: var(--border); }

.card {
  padding: 16px 20px; margin-top: 14px;
  background: var(--card-bg);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card.ok {
  color: var(--success); background: var(--success-soft);
  border-color: rgba(var(--pop-rgb), .35); box-shadow: none;
}
.card.err {
  color: var(--danger); background: var(--danger-soft);
  border-color: rgba(180, 35, 60, .3); box-shadow: none;
}
.card.warn-card {
  color: var(--warning); background: var(--warning-soft);
  border-color: rgba(var(--highlight-rgb), .8); box-shadow: none;
}
.card.muted {
  color: var(--ink-faint); background: var(--cream-dark);
  border-style: dashed; box-shadow: none;
}
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-head .layer { font-family: var(--serif); font-weight: 900; font-size: 1.02rem; }
.card-head .btn-sm { margin-left: auto; }
.card ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.card li { margin: .2rem 0; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 11px;
  font-size: .74rem; font-weight: 600; color: var(--ink-light);
  background: var(--cream-dark); border: 1px solid var(--hairline); border-radius: var(--pill);
}
.tag.lock { color: var(--warning); background: var(--warning-soft); border-color: rgba(var(--highlight-rgb), .7); }
.tag.copies { color: var(--pop-text); background: var(--pop-soft); border-color: rgba(var(--pop-rgb), .3); font-family: var(--mono); }

/* the decoded message is the hero of the page: big serif quote */
pre.msg {
  position: relative;
  margin: 16px 0 0; padding: 26px 24px 20px 52px;
  font-family: var(--serif); font-size: clamp(1.05rem, 2.3vw, 1.34rem);
  font-weight: 700; line-height: 1.8;
  color: var(--ink); background: var(--cream);
  border: 2px solid rgba(var(--highlight-rgb), .9); border-radius: var(--radius);
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
  max-height: 340px; overflow: auto;
}
pre.msg::before {
  content: "\201C";
  position: absolute; left: 12px; top: 6px;
  font-family: var(--serif); font-size: 4.2rem; line-height: 1;
  color: rgba(var(--brand-rgb), .3);
  pointer-events: none;
}

/* ---------------------------------------------- spec page */
.prose { color: var(--ink-light); }
.prose h2 {
  margin: 0 0 .6rem;
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.3; color: var(--ink);
}
.prose h3 {
  margin: 1.9rem 0 .5rem;
  font-family: var(--serif); font-weight: 900; font-size: 1.14rem; color: var(--ink);
}
.prose h3::before {
  content: ""; display: inline-block;
  width: 18px; height: 3px; margin-right: 10px; vertical-align: .28em;
  background: var(--highlight); border-radius: var(--pill);
}
/* opening paragraph: body copy with a highlighter-pen emphasis */
.prose > p:first-of-type {
  font-size: 1rem; line-height: 1.9; color: var(--ink-light);
}
.prose > p:first-of-type strong {
  background: var(--highlighter);
  padding: 0 .1em;
}
.prose ul { padding-left: 1.3rem; margin: .5rem 0; }
.prose li { margin: .3rem 0; }
.prose li::marker { color: var(--brand); }
.prose strong { color: var(--ink); }
.prose code { white-space: nowrap; }

.frame-box {
  margin: .7rem 0 0; padding: 14px 16px;
  font-family: var(--mono); font-size: .82rem; line-height: 1.75;
  color: var(--ink); background: var(--cream-dark);
  border: 1.5px dashed rgba(var(--brand-rgb), .3); border-radius: var(--radius-sm);
  overflow-x: auto;
}

.emoji-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 7px; margin-top: 14px;
}
.emoji-grid .cell {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 2px;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .12s ease;
}
.emoji-grid .cell:hover {
  border-color: var(--brand); background: var(--highlight-soft);
  transform: translateY(-2px);
}
.emoji-grid .cell.dim { opacity: .2; }
.emoji-grid .e { font-size: 21px; line-height: 1.25; }
.emoji-grid .b { font-size: .68rem; color: var(--ink-faint); font-family: var(--mono); }

/* prompt template: a small terminal panel to break the light rhythm */
.prompt-box {
  position: relative;
  margin: 0; padding: 42px 20px 20px;
  font-family: var(--mono); font-size: .84rem; line-height: 1.75;
  color: var(--on-dark); background: var(--dark-panel);
  border-radius: var(--radius); border: 0;
  white-space: pre-wrap; word-break: break-word;
  max-height: 360px; overflow: auto;
}
.prompt-box::before {
  content: "";
  position: absolute; top: 17px; left: 20px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #E8705E;
  box-shadow: 18px 0 0 #E9B44C, 36px 0 0 #6FB98F;
}

/* ---------------------------------------------- footer */
footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 20px calc(30px + env(safe-area-inset-bottom));
  color: var(--ink-faint); font-size: .82rem; text-align: center;
  border-top: 2px dashed rgba(var(--brand-rgb), .2);
}

/* ---------------------------------------------- toasts */
.toasts {
  position: fixed; z-index: 60;
  right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  max-width: min(88vw, 400px);
  padding: 12px 18px;
  font-size: .88rem; font-weight: 600; color: var(--ink);
  background: var(--card-bg); border: 1.5px solid var(--border);
  border-radius: var(--pill); box-shadow: var(--shadow-lg);
  animation: toast-in .22s cubic-bezier(.2, .9, .3, 1) both;
}
.toast.leaving { animation: toast-out .18s ease both; }
.toast.ok { color: var(--success); background: var(--success-soft); border-color: rgba(var(--pop-rgb), .35); }
.toast.err { color: var(--danger); background: var(--danger-soft); border-color: rgba(180, 35, 60, .35); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ============================================================
   Responsive — tablet: the header keeps only the essentials
   ============================================================ */
@media (max-width: 900px) {
  .brand-sub { display: none; }
  .tab { padding: 0 10px; font-size: .9rem; }
}

/* ============================================================
   Responsive — phones: tabs become a floating bottom bar.
   Rearranged, not shrunk: nothing is hidden except the
   keyboard shortcut hint (there is no physical keyboard).
   ============================================================ */
@media (max-width: 720px) {
  body { font-size: 15.5px; }

  .topbar { gap: 10px; padding: 8px 12px; }
  .brand-mark { width: 36px; height: 36px; font-size: 18px; }
  .brand-name { font-size: 1.12rem; }

  .tabs {
    position: fixed; z-index: 30;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    flex: none; gap: 2px;
    padding: 6px;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .tab {
    flex: 1 1 0; flex-direction: column; gap: 3px;
    min-height: 52px; padding: 5px 2px;
    font-size: .7rem; font-weight: 600;
    border-radius: var(--radius-sm);
  }
  .tab .icon { width: 21px; height: 21px; }
  .tab .tab-line { display: none; }
  .tab[aria-selected="true"] { background: rgba(var(--brand-rgb), .1); }

  main { padding: 18px 12px 26px; }
  footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .toasts { right: 12px; left: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); align-items: center; }
  .toast { max-width: 100%; }

  .page-head { padding-right: 68px; }
  .page-num { top: -10px; font-size: clamp(2.8rem, 15vw, 4.4rem); }
  .page-lead { padding-left: 30px; }
  .page-lead::before { font-size: 2.9rem; left: -2px; }

  .panel { padding: 18px 16px; border-radius: var(--radius); }
  .panel.accent::before { left: 18px; font-size: 1rem; }
  .choices { grid-template-columns: 1fr; gap: 10px; }

  /* full-width primary action, easy thumb reach */
  .btn-row { gap: 10px; }
  .btn-row .btn:not(.btn-sm) { flex: 1 1 auto; }
  .btn-row .btn-primary:not(.btn-sm) { flex: 1 1 100%; }
  .kbd-hint { display: none; }

  textarea { min-height: 112px; }
  pre.msg { padding: 22px 18px 18px 42px; }
  pre.msg::before { font-size: 3.4rem; left: 8px; }
  .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 5px; }
  .emoji-grid .e { font-size: 19px; }
  .prompt-box { font-size: .79rem; }
}

@media (max-width: 380px) {
  .brand-name { display: none; }
  .tab { font-size: .64rem; }
}

/* ============================================================
   Preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border: rgba(42, 29, 24, .42);
    --hairline: rgba(42, 29, 24, .24);
    --ink-faint: #5A463D;
  }
  :root[data-theme="dark"] {
    --border: rgba(246, 237, 228, .48);
    --hairline: rgba(246, 237, 228, .3);
    --ink-faint: #DBC6B9;
  }
}