/* Wizard Toolbox. One stylesheet for every page: tokens, the shared chrome
   (top bar, footer, search), the home page, the converter, and the info
   pages. Dark only - the purple-on-black is the brand. */

/* ---- Fonts ----
   Self-hosted: a font network would learn every visitor's IP and page, which
   the privacy page promises never happens. All three are variable fonts under
   the SIL Open Font License; the licences sit next to the files in /fonts. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- Tokens ---- */
:root {
  color-scheme: dark;
  --bg: #141120;
  --bg-deep: #0e0b18;
  --surface: #1d1832;
  --surface-2: #262040;
  --glass: rgba(29, 24, 50, 0.72);
  --border: #322a52;
  --border-soft: rgba(139, 92, 246, 0.16);
  --text: #edeaf6;
  --muted: #9b94b8;
  --faint: #6f6890;
  --accent: #8b5cf6;
  --accent-strong: #a37ff8;
  --accent-soft: rgba(139, 92, 246, 0.14);
  --accent-glow: rgba(139, 92, 246, 0.16);
  /* Filled controls (primary buttons, the drop zone's glyph, the brand mark):
     a muted purple, not the raw accent, so they read as "press me" without
     glowing. Tinted controls (live tools, live icons) sit a step below. */
  --fill: linear-gradient(140deg, var(--accent-strong), #6a3fd6);
  --fill-text: #fff;
  --tint: rgba(139, 92, 246, 0.2);
  --tint-strong: rgba(139, 92, 246, 0.3);
  --tint-border: rgba(163, 127, 248, 0.38);
  --tint-text: #d4c6ff;
  --gold: #e8b44f;
  --danger: #f0918d;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  --focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.5);
  --radius: 18px;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
/* A class that sets display (grid, flex) outranks the user-agent's
   [hidden] { display: none }, so hidden elements would still paint. */
[hidden] { display: none !important; }
html { background: var(--bg-deep); scroll-padding-top: 80px; }
html.cmdk-open { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(139, 92, 246, 0.22), transparent 70%),
    radial-gradient(700px 480px at 100% 10%, rgba(91, 52, 200, 0.16), transparent 70%),
    radial-gradient(800px 600px at 50% 120%, rgba(232, 180, 79, 0.05), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
/* A faint dot grid over the whole page, fading out toward the bottom. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(237, 234, 246, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; text-wrap: balance; }
h1 {
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3rem);
  line-height: 1.05;
  margin: 0 0 14px;
}
.lede {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 32px;
  max-width: 60ch;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 14px;
}
.dot { color: var(--gold); }
kbd {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 3px 6px;
}

/* ---- Top bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(20, 17, 32, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #fff;
  background: var(--fill);
  box-shadow: 0 4px 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.brand:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 10px; }
/* The page's trail, after the brand. Parents give way first on a narrow bar;
   the page's own name is cut short last. */
.topbar-inner.has-crumbs { gap: 10px; }
.crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--display); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crumbs a.crumb { flex-shrink: 4; color: var(--muted); text-decoration: none; }
.crumbs a.crumb:hover { color: var(--text); }
.crumbs a.crumb:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.crumbs [aria-current] { flex-shrink: 1; color: var(--text); }
.crumb-sep { flex: none; color: var(--faint); font-weight: 400; }
.nav-search {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--muted);
  background: rgba(29, 24, 50, 0.8);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px 8px 12px;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.nav-search svg { width: 16px; height: 16px; flex: none; }
.nav-search-label { flex: 1; text-align: left; }
.nav-search:hover { border-color: var(--accent); color: var(--text); }
.nav-search:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 760px) {
  .nav-search { min-width: 0; }
  .has-crumbs .nav-search-label, .has-crumbs .nav-search kbd { display: none; }
  .has-crumbs .nav-search { padding: 9px; }
}
@media (max-width: 600px) {
  .has-crumbs .brand-name { display: none; }
  /* Only the parent and the page itself: separator, parent, separator, page. */
  .crumbs > :nth-last-child(n+5) { display: none; }
  .crumbs { font-size: 0.92rem; gap: 8px; }
}
@media (max-width: 460px) {
  .topbar-inner { gap: 12px; padding: 10px 16px; }
  .nav-search-label, .nav-search kbd { display: none; }
  .nav-search { padding: 9px; }
}

/* ---- Footer ---- */
.site-footer {
  margin-top: 72px;
  border-top: 1px solid var(--border-soft);
  background: rgba(14, 11, 24, 0.6);
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 36px 20px 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  font-size: 0.88rem;
  color: var(--muted);
}
.footer-brand p { margin: 12px 0 0; max-width: 34ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: flex-start; }
.footer-link { color: var(--muted); text-decoration: none; }
.footer-link:hover { color: var(--text); }
.footer-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
/* Feedback is an invitation rather than boilerplate, so it looks like one. */
.footer-link.feedback {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ---- Search: palette and results ---- */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
}
.cmdk-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 14, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade-in 140ms ease;
}
.cmdk-panel {
  position: relative;
  width: 100%;
  max-width: 600px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(139, 92, 246, 0.12), 0 0 80px rgba(139, 92, 246, 0.18);
  overflow: hidden;
  animation: pop-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.cmdk-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.cmdk-box svg { width: 20px; height: 20px; flex: none; }
.cmdk-box input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1.05rem;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
}
.cmdk-box input::placeholder { color: var(--faint); }
.cmdk-box input::-webkit-search-cancel-button { display: none; }
.cmdk .results { max-height: min(56vh, 420px); overflow-y: auto; margin: 0; padding: 8px; }
.cmdk-foot {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--faint);
}
.cmdk-foot kbd { margin-right: 4px; }
.results { list-style: none; }
.results li[role="option"] a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
}
.results li[aria-selected="true"] a { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.3); }
.r-title { font-weight: 500; }
.r-group { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.results li[aria-selected="true"] .r-group { color: var(--accent-strong); }
.result-empty { padding: 14px; color: var(--muted); font-size: 0.92rem; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }

/* ---- Home ---- */
.starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.home-main { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; flex: 1; }
.hero { text-align: center; padding: clamp(48px, 9vh, 96px) 0 clamp(28px, 5vh, 48px); }
.hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 18px; }
.hero .lede { margin: 0 auto 30px; font-size: clamp(1rem, 2.1vw, 1.15rem); }
/* The gradient words: purple to lavender, with a pool of gold under the
   cursor. site.js hands the text --lx/--ly like any lit surface, so the gold
   follows the cursor and leaves the words entirely when it moves away. It
   rests mid-word until the cursor first moves. */
.shimmer {
  --lx: 55%;
  --ly: 50%;
  background:
    radial-gradient(160px circle at var(--lx) var(--ly), var(--gold), rgba(232, 180, 79, 0) 70%),
    linear-gradient(100deg, var(--accent-strong), #d8c8ff 70%, var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The visitor's own recent tools, when there are any. */
.recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 22px; }
.recent[hidden] { display: none; }
.recent-label { margin: 0 6px 0 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.recent-list { display: contents; }
.recent-list a {
  font-size: 0.86rem;
  color: var(--text);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--border);
  transition: border-color 140ms ease, transform 140ms ease;
}
.recent-list a:hover { border-color: var(--accent); transform: translateY(-2px); }
.recent-list a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* The sections: one numbered row each, the section on the left and its
   tools named on the right.
   The rows are lit surfaces (see "The light"); the list is a lit field, so
   the gaps between rows catch the same light. */
.sections {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sections::before {
  /* Reaches past the list above and below, and at the sides only where the
     page has room, so it never widens the page. */
  content: "";
  position: absolute;
  inset: -80px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(260px circle at calc(var(--lx) + 80px) calc(var(--ly) + 80px), rgba(139, 92, 246, 0.12), transparent 65%);
  opacity: var(--glow);
}
@media (max-width: 1320px) { .sections::before { inset: -80px 0; } }
.section-row, .strip {
  position: relative;
  display: grid;
  grid-template-columns: 34px 46px minmax(0, 340px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 20px;
  background-color: var(--glass);
  border: 1px solid var(--border);
  transition:
    transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 520ms ease,
    box-shadow 300ms ease;
}
/* Rows rise into place as they scroll into view. */
.js .section-row:not(.is-in) { opacity: 0; transform: translateY(26px) scale(0.98); }
.section-row:hover, .strip:hover { transform: translateX(8px); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(139, 92, 246, 0.1); }
.section-row::before, .strip::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  height: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--gold);
  transition: height 420ms cubic-bezier(0.34, 1.56, 0.64, 1), top 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.section-row:hover::before, .strip:hover::before { top: 16px; height: calc(100% - 32px); }
.section-num { font-family: var(--mono); font-size: 0.85rem; color: var(--faint); transition: color 200ms ease, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.section-row:hover .section-num, .strip:hover .section-num { color: var(--gold); transform: scale(1.2); }
.section-row .area-icon, .strip .area-icon { transition: transform 520ms cubic-bezier(0.34, 1.8, 0.64, 1), box-shadow 300ms ease, color 200ms ease; }
.section-row:hover .area-icon, .strip:hover .area-icon { transform: rotate(-10deg) scale(1.14); }
.section-row.is-live .area-icon, .strip .area-icon { color: var(--fill-text); background: var(--fill); }
/* Hovered, a row turns gold: its icon, its edge, and the chip under the pointer. */
.section-row:hover .area-icon, .strip:hover .area-icon { color: var(--bg); background: var(--gold); box-shadow: 0 8px 22px rgba(232, 180, 79, 0.3); }
.section-text h2 { font-size: 1.25rem; margin: 0; letter-spacing: -0.015em; transition: color 200ms ease; }
.section-row:hover .section-text h2 { color: #fff; }
.section-text p { margin: 2px 0 0; font-size: 0.88rem; color: var(--muted); }
.strips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.strip { grid-template-columns: 34px 46px minmax(0, 1fr) auto; color: inherit; text-decoration: none; }
.strip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.strip-name { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; transition: color 200ms ease; }
.strip:hover .strip-name { color: #fff; }
.strip-line { display: block; margin: 2px 0 0; font-size: 0.88rem; color: var(--muted); }
.strip:hover .tool-chip svg { transform: translate(3px, -3px); }
/* A tool still to come: outlined, and it stays put under the pointer. */
.strip.is-soon, .strip.is-soon:hover { transform: none; box-shadow: none; }
.strip.is-soon:hover::before { height: 0; }
.strip.is-soon .area-icon, .strip.is-soon:hover .area-icon { color: var(--muted); background: transparent; border: 1px solid var(--border); box-shadow: none; transform: none; }
.strip.is-soon .strip-name, .strip.is-soon:hover .strip-name { color: var(--muted); }
.strip.is-soon:hover .section-num { color: var(--faint); transform: none; }
.strip.is-soon .tool-chip.is-soon:hover { color: var(--muted); background: rgba(20, 17, 32, 0.5); }

.section-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* On hover the row's tools step forward one after another. */
.section-tools li { transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.section-row:hover .section-tools li { transform: translateY(-2px); }
.section-row:hover .section-tools li:nth-child(2) { transition-delay: 40ms; }
.section-row:hover .section-tools li:nth-child(3) { transition-delay: 80ms; }
.section-row:hover .section-tools li:nth-child(4) { transition-delay: 120ms; }
.tool-chip {
  --px: 0px;
  --py: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--fill-text);
  background: var(--fill);
  overflow: hidden;
  transform: translate(var(--px), var(--py));
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
}
.tool-chip svg { transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
a.tool-chip:hover, .strip .tool-chip:hover { color: var(--bg); background: var(--gold); transition: transform 120ms ease-out, background 200ms ease; }
/* A row with a page of its own opens it from anywhere but its chips. */
.section-link { color: inherit; text-decoration: none; }
.section-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.section-link:focus-visible { outline: none; }
.section-row:has(.section-link:focus-visible) { box-shadow: var(--focus-ring); }
.section-row:has(.section-link) .section-tools { position: relative; z-index: 1; }
a.tool-chip:hover svg { transform: translate(3px, -3px); }
a.tool-chip:active { transform: translate(var(--px), var(--py)) scale(0.94); }
a.tool-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tool-chip.is-soon {
  font-weight: 500;
  color: var(--muted);
  background: rgba(20, 17, 32, 0.5);
  border: 1px solid var(--border);
  box-shadow: none;
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), color 200ms ease, border-color 200ms ease;
}
.section-row:hover .tool-chip.is-soon { color: var(--text); border-color: rgba(139, 92, 246, 0.35); }
.tool-chip small { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
/* The latest batch's tools, until the next batch ships (NEW_TOOLS in build/site.mjs). */
.new-tag { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; font: 600 0.6rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; vertical-align: 2px; color: var(--bg); background: var(--gold); }
.tool-chip .new-tag { margin-left: 2px; vertical-align: 0; color: var(--gold); background: var(--bg); }

/* A file dragged over the page: the whole page becomes the drop target. */
.drop-veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, auto);
  place-content: center;
  padding: 24px;
  background: rgba(14, 11, 24, 0.82);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 160ms;
}
.drop-veil p {
  max-width: 100%;
  margin: 0;
  padding: clamp(28px, 6vw, 48px) clamp(20px, 7vw, 56px);
  font-family: var(--display);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 600;
  text-align: center;
  border: 2px dashed var(--accent-strong);
  border-radius: 28px;
  background: var(--accent-soft);
}
.is-dropping .drop-veil { opacity: 1; visibility: visible; }

.area-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.25);
}
.area-icon svg { width: 24px; height: 24px; }
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.area-stat { font-family: var(--mono); font-size: 0.75rem; color: var(--accent-strong); }

.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.promise { --lit-under: linear-gradient(90deg, var(--accent-soft), transparent 80%); padding: 18px 22px; border-left: 2px solid var(--accent); background-image: var(--lit-under); border-radius: 0 14px 14px 0; }
.promise::after { display: none; }
.promise h3 { font-size: 1rem; margin: 0 0 4px; }
.promise p { margin: 0; color: var(--muted); font-size: 0.9rem; }

@media (max-width: 900px) {
  .section-row { grid-template-columns: 46px minmax(0, 1fr); row-gap: 14px; }
  .section-num { display: none; }
  .section-tools { grid-column: 1 / -1; justify-content: flex-start; }
  .strip { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .promises { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .section-row, .strip { padding: 16px; gap: 12px 14px; }
  .section-row:hover, .strip:hover { transform: none; }
  .section-row:hover::before, .strip:hover::before { top: 50%; height: 0; }
  .strip { grid-template-columns: 46px minmax(0, 1fr); }
  .strip .tool-chip { display: none; }
  .strip.is-soon .strip-name::after { content: "Soon"; margin-left: 8px; padding: 2px 7px; border: 1px solid var(--border); border-radius: 999px; font: 500 0.6rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); vertical-align: 2px; }
  .alg-answers.is-forms { padding: 4px 14px; gap: 0 14px; }
  .alg-answers.is-forms .alg-answer { font-size: 1.12rem; }
  .tool-chip { font-size: 0.8rem; padding: 7px 12px; }
}

.areas-compact { display: flex; flex-wrap: wrap; gap: 10px; }
.area-mini {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--glass);
  text-decoration: none;
  font-weight: 600;
}
.area-mini .area-icon { width: 38px; height: 38px; border-radius: 11px; }
.area-mini:hover { border-color: var(--accent); }
@keyframes fade-in { from { opacity: 0; } }

/* ---- Info pages ---- */
.page { width: 100%; max-width: 720px; margin: 0 auto; padding: 56px 20px 0; flex: 1; }

/* ---- Converter ---- */
.tool { width: 100%; max-width: 760px; margin: 0 auto; padding: 28px 20px 0; flex: 1; }
.tool #stage-drop, .tool #stage-make { text-align: left; }

/* The drop zone: the one thing on the page that has to be found at a glance. */
.dropzone {
  position: relative;
  isolation: isolate;
  border-radius: 24px;
  padding: 64px 28px;
  text-align: center;
  cursor: pointer;
  outline: none;
  background-color: var(--glass);
  border: 1.5px dashed rgba(139, 92, 246, 0.45);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); }
.dropzone:focus-visible { box-shadow: var(--shadow), var(--focus-ring); }
.dropzone.dragover {
  border-style: solid;
  border-color: var(--accent-strong);
  transform: scale(1.01);
  box-shadow: var(--shadow), 0 0 0 6px var(--accent-soft), 0 0 70px rgba(139, 92, 246, 0.18);
}
.dropzone .glyphs {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 20px;
  color: var(--fill-text);
  background: var(--fill);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.dropzone .glyphs svg { width: 28px; height: 28px; }
.dropzone:hover .glyphs, .dropzone.dragover .glyphs { transform: translateY(-4px); }
.dropzone .primary-line { font-family: var(--display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.dropzone .secondary-line { color: var(--muted); font-size: 0.92rem; margin: 0; }
.dropzone .secondary-line b { color: var(--accent-strong); font-weight: 600; }

.privacy-note { color: var(--muted); font-size: 0.86rem; margin: 18px 0 0; text-align: center; }
.brand-notice { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.02em; margin: 8px 0 0; text-align: center; }

.error-note {
  margin: 18px 0 0;
  background: rgba(240, 145, 141, 0.06);
  border: 1px solid rgba(240, 145, 141, 0.35);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 0.93rem;
}
.error-note p { margin: 0; }
.error-note .detected { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }

/* Collapsible rows. Deliberately not merged into .register-wrap: app.js finds
   the register by that class alone, and a second element carrying it would
   silently steal the binding. */
.about-wrap { margin: 28px 0 0; }
.register-wrap { margin: 12px 0 0; }
.disclosure {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(29, 24, 50, 0.5);
}
.disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 16px;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { color: var(--accent-strong); }
.disclosure > summary:focus-visible { box-shadow: var(--focus-ring); }
.disclosure > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}
.disclosure[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.about-wrap > .prose { margin: 0; padding: 0 18px 18px; }
.about-wrap > .prose h2:first-child { margin-top: 4px; }
/* Animating a measured pixel height does not work here: a closed <details>
   has not laid its content out, so there is nothing to measure. A grid row
   animated from 0fr to 1fr needs no measurement. */
.register-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 260ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease;
}
/* The clip must carry no padding: padding cannot shrink, so a padded grid
   item sets a floor the 0fr row can never collapse past. */
.register-clip { overflow: hidden; min-height: 0; }
.register-wrap.is-open > .register-panel { grid-template-rows: 1fr; opacity: 1; }
.register { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.reg-group { display: flex; flex-direction: column; gap: 7px; }
.reg-kind { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); }
.reg-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.reg-dir { flex: none; width: 36px; font-size: 0.75rem; color: var(--faint); }
.reg-chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px 8px;
  text-decoration: none;
}
/* Write-only formats have no hub to link to, so they stay inert. */
a.reg-chip { transition: border-color 140ms ease, color 140ms ease; }
a.reg-chip:hover { border-color: var(--accent); color: var(--accent-strong); }
a.reg-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
span.reg-chip { color: var(--muted); background: transparent; }
.reg-note { font-size: 0.75rem; color: var(--faint); }
@media (max-width: 460px) { .reg-dir { width: 100%; } }

/* ---- Cards (detected, archive, batch, result, make) ---- */
.card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 24px;
  background-color: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.file-line { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.file-badge {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--fill-text);
  background: var(--fill);
  border-radius: 12px;
  padding: 10px 12px;
}
.file-meta { min-width: 0; }
.file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sniff-note { color: var(--muted); font-size: 0.86rem; margin: -12px 0 20px; }
.sniff-note.trust { color: var(--gold); }

.convert-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.to-label { color: var(--muted); font-size: 0.92rem; }
.btn {
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  padding: 13px 26px;
  cursor: pointer;
  outline: none;
  transition: transform 140ms ease, box-shadow 160ms ease, filter 160ms ease, color 140ms ease, border-color 140ms ease;
}
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn-primary {
  color: var(--fill-text);
  background: var(--fill);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(163, 127, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-primary:disabled { filter: grayscale(0.6) brightness(0.8); cursor: default; transform: none; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }
.format-select { position: relative; display: inline-flex; }
.format-select select {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 44px 13px 18px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color 140ms ease;
}
.format-select select:hover { border-color: var(--accent); }
.format-select select:focus-visible { box-shadow: var(--focus-ring); }
.format-select option { background: var(--surface); color: var(--text); }
.format-select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}
#convert-btn, #batch-convert { margin-left: auto; }
.restart-line { color: var(--muted); font-size: 0.88rem; margin: 16px 0 0; }
.linkish {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  outline: none;
}
.linkish:hover { color: var(--text); }
.linkish:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }
@media (max-width: 460px) {
  .format-select { flex: 1; }
  .format-select select { width: 100%; }
  #convert-btn, #batch-convert { margin-left: 0; width: 100%; }
}

/* ---- Archive and batch ---- */
.inventory { font-size: 0.93rem; margin: 0 0 18px; }
.inventory b { color: var(--accent-strong); font-weight: 600; }
.inventory .quiet { color: var(--muted); }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mode-row {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.mode-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 10px;
  padding: 7px 13px;
  cursor: pointer;
  outline: none;
  transition: background 140ms ease, color 140ms ease;
}
.mode-btn:hover { color: var(--text); }
.mode-btn.is-active { background: var(--fill); color: var(--fill-text); }
.mode-btn:focus-visible { box-shadow: var(--focus-ring); }
.map-list { display: flex; flex-direction: column; gap: 7px; max-height: 320px; overflow-y: auto; margin: 0 0 18px; }
.map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.map-label { min-width: 0; }
.map-name { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-count { font-size: 0.76rem; color: var(--muted); }
.map-row select {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
}
.map-row select:focus-visible { box-shadow: var(--focus-ring); }
.map-row.is-passthrough .map-name { color: var(--muted); }

/* ---- Result ---- */
.result-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-bottom: 22px; }
.result-cell { text-align: center; min-width: 0; }
.thumb-frame {
  background:
    repeating-conic-gradient(var(--surface-2) 0% 25%, transparent 0% 50%) 0 0 / 18px 18px,
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
}
.thumb-frame img { max-width: 100%; max-height: 100%; display: block; }
.cell-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); margin-top: 10px; }
.cell-size { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-size: 1.1rem;
}
.savings { text-align: center; font-size: 0.92rem; color: var(--muted); margin: -8px 0 20px; font-variant-numeric: tabular-nums; }
.savings b { color: var(--gold); font-weight: 600; }
/* Growing is a legitimate outcome, so it is stated plainly, not as a win. */
.savings.bigger b { color: var(--muted); }
.mesh-note { text-align: center; font-size: 0.95rem; margin: 4px 0 20px; font-variant-numeric: tabular-nums; }
.quality-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-size: 0.9rem; color: var(--muted); }
.quality-row label { white-space: nowrap; }
.quality-row output { font-family: var(--mono); min-width: 3ch; color: var(--text); }
input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; }
input[type="range"]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
/* minmax(0,1fr) on both outer tracks keeps them equal, so Save lands on the
   true centre of the card. */
.action-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
#save-btn { grid-column: 2; justify-self: center; }
#again-btn { grid-column: 3; justify-self: end; }
.save-status { font-size: 0.88rem; color: var(--muted); text-align: center; margin: 12px 0 0; min-height: 1.2em; }
.save-status.ok { color: var(--gold); }
.alpha-note { color: var(--muted); font-size: 0.84rem; margin: 16px 0 0; }
@media (max-width: 460px) {
  .action-row { grid-template-columns: 1fr; }
  #save-btn, #again-btn { grid-column: 1; justify-self: stretch; }
}
#sparkle-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

/* ---- Progress ---- */
.progress { margin-top: 16px; }
.progress-track { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.progress-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong), var(--gold));
  box-shadow: 0 0 16px var(--accent-glow);
  transition: width 0.15s ease;
}
/* The shimmer decorates the bar; the bar itself is the information. */
.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: progress-shimmer 1.2s linear infinite;
}
@keyframes progress-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.progress-line { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); }
.progress-line span:last-child { font-family: var(--mono); }

/* ---- Making a code ---- */
.make-card { text-align: left; }
.make-label { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 10px; }
.make-input {
  width: 100%;
  resize: vertical;
  min-height: 3.2em;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
}
.make-input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.make-help { margin: 8px 0 0; font-size: 0.86rem; color: var(--muted); }
.make-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 4px; }
.make-count { font-size: 0.85rem; color: var(--muted); margin-left: auto; }
.make-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin: 20px 0 8px;
  padding: 24px;
  border-radius: 18px;
  /* A code is black on white and has to be shown that way: a scanner needs
     the quiet zone around it to be light. */
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--border), 0 18px 50px rgba(0, 0, 0, 0.4);
}
.make-preview svg { max-width: 100%; height: auto; }
.make-preview[data-kind="matrix"] svg { width: 300px; }
.make-preview[data-kind="linear"] svg { width: 100%; }
.make-preview.is-empty { color: #6e6787; font-size: 0.9rem; }
.make-error { margin: 0 0 8px; color: var(--danger); font-size: 0.9rem; }
.make-error:empty { display: none; }
@media (max-width: 560px) { .make-count { margin-left: 0; width: 100%; } }
.codebatch-skip { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font-size: 0.88rem; color: var(--muted); cursor: pointer; }
.codebatch-skip input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---- Copy: pair, hub and info pages ---- */
.prose { margin: 36px 0 0; text-align: left; color: var(--muted); font-size: 0.97rem; line-height: 1.75; }
.prose p { margin: 0 0 14px; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.25rem; color: var(--text); margin: 30px 0 8px; }
.prose b { color: var(--text); font-weight: 600; }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--gold); }
.prose a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }
.related { margin: 36px 0 0; text-align: left; }
.related h2 { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 12px; }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.related a {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  transition: border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.related a:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-1px); }
.related a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* The feedback address: shown rather than linked, since a mailto: is a dead
   end for anyone on webmail. */
.address-card { margin: 28px 0 0; padding: 20px 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--glass); }
.address-label { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 8px; }
.address-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.address { font-size: 1.1rem; font-weight: 600; user-select: all; word-break: break-all; }
.address-row .copy-btn { padding: 8px 16px; font-size: 0.85rem; border-radius: 10px; }
.address-status { margin: 10px 0 0; font-size: 0.82rem; color: var(--gold); min-height: 1em; }

/* ---- Small screens ---- */
@media (max-width: 540px) {
  .result-grid { grid-template-columns: 1fr; }
  .arrow { transform: rotate(90deg); justify-self: center; }
  .dropzone { padding: 46px 18px; }
  .card { padding: 22px; }
  .area { padding: 22px; min-height: 0; }
}

/* ---- Standalone tools ----
   The parts every tool page is built from (inputs, segmented choices,
   switches, a slider, stat tiles), then each tool's own layout. Filled means
   "the thing to press", tinted means "on" or "chosen", outlined means
   "available". */
.tool-card { text-align: left; }
.input {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.input:hover { border-color: rgba(139, 92, 246, 0.5); }
.input:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); }
.input.is-invalid { border-color: var(--danger); }
.btn-small { padding: 8px 14px; font-size: 0.85rem; border-radius: 10px; }
.icon-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  cursor: pointer;
  color: var(--tint-text);
  background: var(--tint);
  border: 1px solid var(--tint-border);
  outline: none;
  transition: background-color 140ms ease, color 140ms ease, transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.icon-btn:hover { background: var(--tint-strong); color: #fff; transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn:focus-visible { box-shadow: var(--focus-ring); }
.icon-btn.is-spun svg { animation: spin-once 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes spin-once { from { transform: rotate(-180deg); } }

/* A row of choices, one of them on. */
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.seg-btn {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  outline: none;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
a.seg-btn { display: inline-block; text-decoration: none; }
.seg-btn:hover { color: var(--text); border-color: var(--tint-border); }
.seg-btn:active { transform: scale(0.95); }
.seg-btn:focus-visible { box-shadow: var(--focus-ring); }
.seg-btn.is-active { color: var(--fill-text); background: var(--fill); border-color: transparent; }
.seg-small .seg-btn { padding: 5px 12px; font-size: 0.8rem; }

/* A slider whose track fills up to the thumb; the script sets --pct. */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 10px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 var(--pct, 50%), var(--surface-2) var(--pct, 50%));
  box-shadow: inset 0 0 0 1px var(--border);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: transform 140ms ease;
}
.range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.range:active::-webkit-slider-thumb { transform: scale(1.15); }

/* An on/off switch around a real checkbox, so the keyboard and screen
   readers get the native control. */
.toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; }
.toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 140ms ease;
}
.toggle:hover { border-color: var(--tint-border); }
/* The real checkbox covers the whole row, invisibly, so a click anywhere on
   it lands on the control itself. */
.toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.toggle-ui {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.toggle-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--faint);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.3), background-color 160ms ease;
}
.toggle input:checked + .toggle-ui { background: var(--accent); border-color: transparent; }
.toggle input:checked + .toggle-ui::after { transform: translateX(16px); background: #fff; }
.toggle input:focus-visible + .toggle-ui { box-shadow: var(--focus-ring); }
.toggle-text { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.toggle-text small { display: block; font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: var(--muted); }

/* A status line under a tool takes no room until it has something to say. */
.tool-card > .save-status:empty { display: none; }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 0; }
.tool-actions .save-status { margin: 0 0 0 auto; text-align: right; }
.prose h3 { font-size: 1.02rem; color: var(--text); margin: 22px 0 6px; }
.prose code { font-family: var(--mono); font-size: 0.86em; color: var(--text); background: var(--surface-2); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }

/* Unit converter */
.uc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
.uc-side { display: grid; gap: 8px; min-width: 0; }
.uc-side .make-label { margin: 0; }
.uc-value { height: 60px; font-family: var(--display); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 12px 16px; }
.uc-value.is-long { font-size: 1.05rem; }
.uc-side .format-select, .uc-side .format-select select { width: 100%; }
.uc-side .format-select select { font-weight: 500; font-size: 0.92rem; padding: 10px 40px 10px 14px; }
.uc-swap { margin-top: 22px; }
.uc-formula { margin: 18px 0 0; font-family: var(--mono); font-size: 0.86rem; color: var(--muted); text-align: center; }
.uc-all { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.uc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.uc-item {
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 13px;
  cursor: pointer;
  outline: none;
  transition: border-color 140ms ease, transform 140ms ease;
}
.uc-item:hover { border-color: var(--tint-border); transform: translateY(-1px); }
.uc-item:focus-visible { box-shadow: var(--focus-ring); }
.uc-item.is-current { background: var(--tint); border-color: var(--tint-border); }
.uc-item-value { font-family: var(--mono); font-size: 0.92rem; font-weight: 600; overflow-wrap: anywhere; }
.uc-item-unit { font-size: 0.78rem; color: var(--muted); }
@media (max-width: 600px) {
  .uc-row { grid-template-columns: 1fr; }
  .uc-swap { margin: 0 auto; transform: rotate(90deg); }
  .uc-swap:hover { transform: rotate(90deg) translateX(-1px); }
}

/* Word counter */
.wc-input { min-height: 210px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; }
.stat { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.stat:nth-child(-n + 2) { background: var(--tint); border-color: var(--tint-border); }
.stat-num { font-family: var(--display); font-size: 1.55rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-label { font-size: 0.78rem; color: var(--muted); }
.stat-num.is-bumped { animation: bump 260ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes bump { from { transform: translateY(3px); opacity: 0.5; } }
.wc-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.wc-top, .wc-limit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wc-top { counter-reset: wc; }
.wc-top li { display: flex; align-items: baseline; gap: 10px; font-size: 0.92rem; }
.wc-top li:not(.wc-empty)::before { counter-increment: wc; content: counter(wc); font-family: var(--mono); font-size: 0.75rem; color: var(--faint); width: 1.2em; }
.wc-word { font-weight: 600; overflow-wrap: anywhere; }
.wc-count { margin-left: auto; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.wc-empty { color: var(--faint); }
.wc-limit-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 0.88rem; }
.wc-left { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); align-self: center; }
.wc-bar { grid-column: 1 / -1; position: relative; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.wc-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--used, 0%); border-radius: inherit; background: var(--accent); transition: width 200ms ease; }
.wc-limit-list .is-over .wc-left { color: var(--danger); }
.wc-limit-list .is-over .wc-bar::after { background: var(--danger); }
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-bottom { grid-template-columns: 1fr; }
}

/* Password generator */
.pw-out { display: flex; align-items: center; gap: 10px; }
.pw-value {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  user-select: all;
}
.pw-value.is-empty { font-family: var(--body); font-size: 0.95rem; color: var(--muted); user-select: none; }
.pw-value.is-new { animation: pw-in 320ms ease-out; }
@keyframes pw-in { from { opacity: 0.2; filter: blur(3px); } }
.pw-d { color: var(--gold); }
.pw-s { color: var(--accent-strong); }
.pw-out .btn { padding: 15px 22px; }
.pw-meter { height: 6px; margin: 16px 0 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pw-bar { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 200ms ease; }
.pw-bar[data-tone="weak"] { background: var(--danger); }
.pw-bar[data-tone="fair"] { background: var(--gold); }
.pw-bar[data-tone="great"] { background: var(--fill); }
.pw-strength { margin: 8px 0 0; font-size: 0.86rem; color: var(--muted); }
.pw-strength[data-tone="weak"] { color: var(--danger); }
.pw-strength[data-tone="fair"] { color: var(--gold); }
.pw-strength[data-tone="strong"], .pw-strength[data-tone="great"] { color: var(--tint-text); }
.pw-length { margin: 24px 0 0; }
.pw-length .make-label { display: flex; justify-content: space-between; margin: 0; }
.pw-length output { font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--text); letter-spacing: 0; text-transform: none; }
@media (max-width: 560px) {
  .pw-out { flex-wrap: wrap; }
  .pw-value { flex-basis: 100%; font-size: 1.1rem; }
  .pw-out .btn { flex: 1; }
  .toggles { grid-template-columns: 1fr; }
}

/* Wheel spinner */
.wheel-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.wheel-stage { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; margin: 0 auto; }
.wheel {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 6px var(--surface-2), 0 0 0 7px var(--border), 0 22px 60px rgba(0, 0, 0, 0.5);
}
.is-spinning .wheel { cursor: default; }
.wheel-pointer {
  position: absolute;
  z-index: 2;
  top: -10px;
  left: 50%;
  margin-left: -14px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 28px solid var(--gold);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
  transform-origin: 50% 0;
}
.wheel-pointer.is-ticking { animation: tick 140ms ease-out; }
@keyframes tick { 40% { transform: rotate(-16deg); } }
.wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 4px solid var(--surface);
  font-family: var(--display);
  font-size: clamp(0.9rem, 2.4vw, 1.15rem);
  font-weight: 700;
  color: var(--fill-text);
  background: var(--fill);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  outline: none;
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1.3), filter 160ms ease;
}
.wheel-hub:hover { transform: scale(1.07); filter: brightness(1.1); }
.wheel-hub:active { transform: scale(0.94); }
.wheel-hub:focus-visible { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), var(--focus-ring); }
.wheel-hub:disabled { filter: grayscale(0.6) brightness(0.75); cursor: default; transform: none; }
.wheel-entries { min-height: 250px; font-size: 1rem; }
.wheel-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.wheel-result {
  margin: 26px 0 0;
  padding: 22px;
  text-align: center;
  border-radius: 18px;
  background: var(--tint);
  border: 1px solid var(--tint-border);
}
.wheel-result .make-label { margin-bottom: 4px; }
.wheel-winner { margin: 0 0 16px; font-family: var(--display); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.wheel-result.is-shown { animation: pop-in 380ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94) translateY(6px); } }
.wheel-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 700px) {
  .wheel-layout { grid-template-columns: 1fr; }
  .wheel-entries { min-height: 160px; }
}

/* Typing test */
.tt-config { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0 0 18px; }
.tt-config .seg { margin: 0; }
.tt-config .seg-btn { padding: 6px 13px; }
.tt-live { display: flex; align-items: baseline; gap: 14px; height: 2.2rem; font-family: var(--mono); }
.tt-timer { font-size: 1.5rem; font-weight: 600; color: var(--faint); transition: color 200ms ease; }
.is-running .tt-timer { color: var(--gold); }
.tt-livewpm { font-size: 0.86rem; color: var(--faint); }
.tt-stage { position: relative; cursor: text; }
.tt-words {
  --line: 2.1em;
  position: relative;
  height: calc(var(--line) * 3);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 1.5rem;
  transition: filter 200ms ease, opacity 200ms ease;
}
.is-fresh .tt-words { animation: tt-in 280ms ease-out; }
@keyframes tt-in { from { opacity: 0; transform: translateY(6px); } }
.tt-inner { position: relative; display: flex; flex-wrap: wrap; column-gap: 0.6em; transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.tt-word { height: var(--line); line-height: var(--line); white-space: nowrap; }
.tt-l { color: var(--faint); }
.tt-l.is-ok { color: var(--text); }
.tt-l.is-bad { color: var(--danger); }
.tt-l.is-extra { color: var(--danger); opacity: 0.6; }
.tt-word.is-error { text-decoration: underline 2px var(--danger); text-underline-offset: 0.35em; }
.tt-caret {
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 1.3em;
  margin-top: calc((var(--line) - 1.3em) / 2);
  border-radius: 2px;
  background: var(--gold);
  transition: transform 90ms ease-out;
  animation: caret-blink 1s step-end infinite;
}
.is-running .tt-caret { animation: none; }
@keyframes caret-blink { 50% { opacity: 0; } }
/* The input that takes the typing lies invisibly over the words, so a tap on
   a phone lands on it and brings up the keyboard. 16px stops iOS zooming. */
.tt-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: text; }
.tt-focus { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 0.95rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.tt-stage.is-blurred .tt-words { filter: blur(5px); opacity: 0.45; }
.tt-stage.is-blurred .tt-focus { opacity: 1; }
.tt-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 0; }
.tt-hint { margin: 0; font-size: 0.8rem; color: var(--faint); }
.tt-results:not([hidden]) { animation: pop-in 380ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.tt-headline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 40px; }
.tt-big { display: grid; margin: 0; }
.tt-big-label { order: -1; margin-bottom: 4px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); }
.tt-big-num { font-family: var(--display); font-size: clamp(2.8rem, 8vw, 4rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tt-big:first-child .tt-big-num { color: var(--gold); }
.tt-kind { margin: 0 0 6px auto; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.tt-chart { display: block; width: 100%; height: 170px; margin: 24px 0 0; overflow: visible; }
.tt-grid { stroke: var(--border); stroke-width: 1; }
.tt-axis { fill: var(--faint); font-family: var(--mono); font-size: 11px; }
.tt-wpm-line { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tt-raw-line { fill: none; stroke: var(--accent-strong); stroke-opacity: 0.55; stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linejoin: round; }
.tt-err { fill: var(--danger); }
.tt-legend { display: flex; justify-content: flex-end; gap: 16px; margin: 6px 0 0; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.tt-legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
.tt-legend .tt-key-wpm::before { background: var(--gold); }
.tt-legend .tt-key-raw::before { background: var(--accent-strong); opacity: 0.55; }
.tt-legend .tt-key-err::before { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.tt-stats { margin-top: 18px; }
.tt-stats .stat { background: var(--surface-2); border-color: var(--border); }
.tt-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
@media (max-width: 600px) {
  .tt-words { font-size: 1.15rem; }
  .tt-hint { display: none; }
  .tt-kind { margin-left: 0; width: 100%; }
}

/* PDF tools */
.hub-head { margin: 30px 0 12px; font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hub-head:first-child { margin-top: 0; }

.dropzone.is-opening .glyphs { animation: glyph-wait 900ms ease-in-out infinite alternate; }
@keyframes glyph-wait { to { transform: translateY(-6px); } }
.pdf-app.is-dragover .pdf-work { border-color: var(--accent-strong); }
.pdf-work, .pdf-done { text-align: left; }
.pdf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pdf-summary { margin: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.pdf-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pdf-option { margin: 18px 0 0; }
.pdf-option .seg { margin: 0; }
.seg-note { font-weight: 500; opacity: 0.72; }
@media (max-width: 520px) {
  .pdf-bar-actions { width: 100%; }
  .pdf-bar-actions .wide-only { display: none; }
  .pdf-bar-actions [data-select] { text-transform: capitalize; }
  .pdf-option .pdf-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .pdf-option .pdf-seg .seg-btn { padding: 8px 6px; line-height: 1.25; }
  .pdf-option .pdf-seg .seg-note { display: block; font-size: 0.74rem; }
}
.pdf-ranges .input { max-width: 320px; font-family: var(--mono); }

.pdf-grid { position: relative; list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px; }
.pdf-grid.is-files { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.pg {
  position: relative;
  padding: 10px 10px 8px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 140ms ease, background-color 140ms ease, opacity 160ms ease;
}
.pg:focus-visible { box-shadow: var(--focus-ring); }
.pg:hover { border-color: var(--tint-border); }
.pg-thumb { display: grid; place-items: center; aspect-ratio: 1; }
.pg-sheet {
  height: 100%;
  aspect-ratio: 0.707;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transform: rotate(var(--turn, 0deg));
  transition: transform 340ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.pg-sheet.is-wide { width: 100%; height: auto; }
.pg-sheet canvas { display: block; width: 100%; height: 100%; }
.pg:not(.is-drawn) .pg-sheet {
  background: linear-gradient(110deg, #2b2448 30%, #3b3263 50%, #2b2448 70%) 0 0 / 220% 100%;
  animation: sheet-wait 1.3s linear infinite;
}
.pg.is-broken .pg-sheet { animation: none; background: #2b2448; }
@keyframes sheet-wait { to { background-position: -220% 0; } }
.pg-num { display: block; margin-top: 7px; text-align: center; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
.pg-name { margin: 9px 0 0; font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-meta { margin: 1px 0 0; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.pg-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity 140ms ease; }
.pg:hover .pg-tools, .pg:focus-within .pg-tools { opacity: 1; }
.pg-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 9px;
  cursor: pointer;
  color: var(--text);
  background: rgba(14, 11, 24, 0.85);
  border: 1px solid var(--border);
  outline: none;
  transition: background-color 140ms ease, transform 140ms ease;
}
.pg-btn svg { width: 16px; height: 16px; }
.pg-btn:hover { background: var(--accent); border-color: transparent; }
.pg-btn[data-act="remove"]:hover { background: #b9524e; }
.pg-btn:active { transform: scale(0.9); }
.pg-btn:focus-visible { box-shadow: var(--focus-ring); }
.pg-grip { position: absolute; top: 6px; left: 6px; display: none; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--muted); background: rgba(14, 11, 24, 0.85); border: 1px solid var(--border); touch-action: none; }
.pg-grip svg { width: 16px; height: 16px; }
.pg-check { position: absolute; top: 6px; left: 6px; display: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: transparent; background: rgba(14, 11, 24, 0.7); border: 1.5px solid var(--muted); }
.pg-check svg { width: 15px; height: 15px; }
.is-picking .pg { cursor: pointer; }
.is-picking .pg-check { display: grid; }
.pg.is-picked { background: var(--tint); border-color: var(--tint-border); }
.pg.is-picked .pg-check { color: var(--fill-text); background: var(--fill); border-color: transparent; }
.is-turning .pg { cursor: pointer; }
.is-turning .pg:hover .pg-sheet { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--accent-strong); }
/* Mouse and pen drag the whole tile; a finger drags from the grip, which is
   always shown where there is no hover. */
.pdf-grid:has(.pg-grip) .pg { cursor: grab; }
.pg.is-dragging { z-index: 5; cursor: grabbing; transition: none; border-color: var(--accent-strong); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55); }
.pg.is-dragging .pg-thumb { transform: scale(1.04); transition: transform 160ms ease; }
.pg.is-dropping { transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.pg.is-leaving { opacity: 0; transform: scale(0.85); }
@media (hover: none) {
  .pg-tools { opacity: 1; }
  .pg-grip { display: grid; }
  /* Always shown, so on a page tile they move off the page into the row
     under it: the grip and number on the left, the buttons on the right. */
  .pg:not(.is-file):has(.pg-tools, .pg-grip) { padding-bottom: 6px; }
  .pg:not(.is-file):has(.pg-tools, .pg-grip) .pg-num { height: 30px; margin-top: 6px; padding-left: 34px; line-height: 30px; text-align: left; }
  .pg:not(.is-file) .pg-tools, .pg:not(.is-file) .pg-grip { top: auto; bottom: 6px; }
}
.pdf-hint { margin: 14px 0 0; font-size: 0.84rem; color: var(--muted); text-align: center; }
.pdf-hint:empty { display: none; }
.pdf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; }
.pdf-work .progress { margin-top: 18px; }
.pdf-done { text-align: center; }
.pdf-done.is-shown { animation: pop-in 380ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.pdf-done-mark { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 18px; color: var(--fill-text); background: var(--fill); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.pdf-done-mark svg { width: 28px; height: 28px; }
.pdf-done.is-none .pdf-done-mark { color: var(--gold); background: var(--surface-2); }
.pdf-done-name { margin: 0; font-family: var(--display); font-size: 1.3rem; font-weight: 600; overflow-wrap: anywhere; }
.pdf-done-meta { margin: 6px auto 0; max-width: 46ch; font-size: 0.9rem; color: var(--muted); }
.pdf-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; }
a.btn { display: inline-block; text-decoration: none; }
@media (max-width: 560px) {
  .pdf-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .pdf-grid.is-files { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pg { padding: 7px 7px 6px; }
  .pdf-done-actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .pdf-done-actions .btn { text-align: center; }
}

/* Maths typesetting, shared by the calculators: a stacked fraction, a
   radical with its bar, and repeating digits under a bar. */
.fr { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; font-size: 0.82em; line-height: 1.15; margin: 0 0.12em; text-align: center; }
.fr > span { padding: 0 0.18em; }
.fr > span:first-child { border-bottom: 1.5px solid currentColor; padding-bottom: 0.08em; }
.fr > span:last-child { padding-top: 0.08em; }
.fr-big { font-size: 0.9em; }
.rt { white-space: nowrap; }
.rt-n { font-size: 0.6em; margin-right: -0.35em; vertical-align: 0.9em; }
.rt-in { border-top: 1.5px solid currentColor; padding: 0.04em 0.1em 0; margin-left: 0.04em; }
.rep { text-decoration: overline; text-decoration-thickness: 1.5px; }

/* Calculator */
.calc-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.calc-top .seg { margin: 0; }
.calc-screen { padding: 14px 20px 12px; border-radius: 18px; background: var(--bg); border: 1px solid var(--border); text-align: right; }
.calc-prev { margin: 0; min-height: 1.4em; font-family: var(--mono); font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.calc-input {
  display: block;
  width: 100%;
  padding: 2px 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.calc-input::placeholder { color: var(--faint); }
.calc-input.is-long { font-size: 1.6rem; }
.calc-out { margin: 0; min-height: 1.7em; font-size: 1.1rem; color: var(--muted); overflow-wrap: anywhere; }
.calc-out.is-error { color: var(--danger); font-size: 0.92rem; }
.calc-pad { display: grid; gap: 14px; margin: 16px 0 0; }
.calc-pad[data-mode="basic"] .calc-sci { display: none; }
.calc-pad[data-mode="scientific"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.calc-sci, .calc-basic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-content: start; }
.calc-key {
  height: 58px;
  display: grid;
  place-items: center;
  font: inherit;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 140ms ease, background-color 140ms ease, filter 140ms ease;
}
.calc-key:hover { border-color: var(--tint-border); }
.calc-key:focus-visible { box-shadow: var(--focus-ring); }
.calc-key.is-pressed { animation: key-press 160ms ease-out; }
@keyframes key-press { 50% { transform: scale(0.93); } }
.calc-key sup { font-size: 0.62em; line-height: 0; }
.calc-key.is-fn { color: var(--tint-text); }
.calc-key.is-op { color: var(--tint-text); background: var(--tint); border-color: var(--tint-border); font-size: 1.5rem; }
.calc-key.is-eq { color: var(--fill-text); background: var(--fill); border-color: transparent; font-size: 1.5rem; }
.calc-key.is-eq:hover { filter: brightness(1.1); }
.calc-sci .calc-key { height: 58px; font-family: var(--body); font-size: 0.98rem; color: var(--muted); background: transparent; }
.calc-sci .calc-key:hover { color: var(--text); }
.calc-tape { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); }
.calc-tape-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.calc-tape-head .make-label { margin: 0; }
.calc-tape-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.calc-tape-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 8px 10px;
  font: inherit;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-align: left;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
}
.calc-tape-item:hover { background: var(--surface-2); color: var(--text); }
.calc-tape-item:focus-visible { box-shadow: var(--focus-ring); }
.calc-tape-res { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.calc-tape-expr { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .calc-pad[data-mode="scientific"] { grid-template-columns: minmax(0, 1fr); }
  .calc-sci .calc-key { height: 42px; }
  .calc-input { font-size: 2.2rem; }
  .calc-input.is-long { font-size: 1.4rem; }
}

/* Money and measurement boxes: a unit inside the box, before or after. */
.affix { position: relative; display: flex; align-items: center; }
.affix > span { position: absolute; left: 15px; color: var(--muted); font-weight: 600; pointer-events: none; }
.affix.is-suffix > span { left: auto; right: 15px; }
.affix-input { padding-left: 32px; font-family: var(--display); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.affix.is-suffix .affix-input { padding-left: 16px; padding-right: 40px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper .icon-btn { width: 46px; height: 46px; }
.stepper .icon-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.stepper-input { width: 76px; text-align: center; font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.stepper-unit { color: var(--muted); font-size: 0.92rem; }
/* A plain table of figures. */
.figures { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.figures th, .figures td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.figures th:first-child, .figures td:first-child { text-align: left; }
.figures thead th { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.figures tbody th { font-weight: 600; }
.figures .is-current { background: var(--tint); }
/* Estimates only: a plain, visible caution next to a result. */
.notice { display: flex; gap: 12px; margin: 22px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(232, 180, 79, 0.35); background: rgba(232, 180, 79, 0.07); font-size: 0.86rem; line-height: 1.55; color: var(--text); }
.notice svg { flex: none; margin-top: 2px; color: var(--gold); }
.notice p { margin: 0; }
.notice a { color: var(--gold); }

/* Tip calculator */
.tip-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.tip-inputs > .make-label, .tip-label-row { margin-top: 22px; }
.tip-inputs > .make-label:first-child { margin-top: 0; }
.tip-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tip-label-row .make-label { margin: 0; }
.tip-label-row .seg { margin: 0; }
.tip-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.tip-chips .seg-btn { padding: 8px 0; }
.tip-extra { margin: 22px 0 0; border: 1px solid var(--border); border-radius: 14px; padding: 0 16px; }
.tip-extra summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 0.92rem; color: var(--muted); }
.tip-extra[open] { padding-bottom: 16px; }
.tip-extra .seg { margin: 0; }
.tip-round-label { margin-top: 18px; }
.tip-panel { position: sticky; top: 90px; padding: 24px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border); }
.tip-big { margin: 0; font-family: var(--display); font-size: 3rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tip-lines { display: grid; grid-template-columns: auto auto; gap: 8px 16px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--tint-border); }
.tip-lines dt { color: var(--muted); font-size: 0.92rem; }
.tip-lines dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tip-lines dd small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.tip-sum { margin: 16px 0 0; font-size: 0.88rem; color: var(--muted); }
.tip-compare { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.tip-table.is-solo .tip-each-col { display: none; }
@media (max-width: 700px) {
  .tip-grid { grid-template-columns: 1fr; }
  .tip-panel { position: static; }
  .tip-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tip-big { font-size: 2.4rem; }
}

/* Percentage calculator */
.pc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 0.3fr); gap: 10px 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); }
.pc-row:first-child { padding-top: 0; }
.pc-row:last-child { padding-bottom: 0; border-bottom: none; }
.pc-q { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.02rem; line-height: 2.4; }
.pc-in { width: 84px; padding: 9px 12px; font-family: var(--mono); font-size: 1rem; text-align: center; }
.pc-dir { margin: 0; display: inline-flex; }
.pc-a { text-align: right; min-width: 0; }
.pc-out { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pc-row.is-empty .pc-out::before { content: "–"; color: var(--faint); }
.pc-how { margin: 4px 0 0; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .pc-row { grid-template-columns: 1fr; }
  .pc-a { text-align: left; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
}

/* Age calculator */
.dc-add-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin: 0 0 16px; }
.dc-add-top > div:first-child { flex: 1 1 220px; }
.dc-add-top .seg { margin: 0 0 4px; }
.dc-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#tc-add .dc-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-counts .input, .tc-break .input { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.tc-break { max-width: 260px; margin: 16px 0 0; }
.tc-list { font-family: var(--mono); line-height: 1.6; resize: vertical; }
#dc-between .toggles, #dc-add .toggles { margin-top: 16px; }
.age-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.age-date { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color-scheme: dark; }
.age-result { margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.age-big { margin: 0; font-family: var(--display); font-size: 2.6rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.age-big small { font-size: 0.5em; font-weight: 500; color: var(--muted); margin-right: 0.3em; }
.age-line { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; }
.age-stats .stat-num small { font-size: 0.55em; font-weight: 500; color: var(--muted); }
.age-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; margin: 20px 0 0; }
.age-facts dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 0.25em; }
.age-facts dd { margin: 0; font-weight: 600; }
.age-facts dd small { display: block; font-weight: 400; color: var(--muted); font-size: 0.86rem; }
@media (max-width: 560px) {
  .dc-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .age-dates { grid-template-columns: 1fr; }
  .age-big { font-size: 2rem; }
  .age-facts { grid-template-columns: 1fr; gap: 2px; }
  .age-facts dd { margin-bottom: 10px; }
}

/* Loan and mortgage calculators */
.ln-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ln-field + .ln-field, .ln-more, .ln-more + .ln-field { margin-top: 18px; }
.ln-more .ln-field:first-of-type { margin-top: 4px; }
.ln-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ln-label-row .make-label, .ln-label-row .seg { margin: 0; }
.ln-term { display: flex; gap: 10px; align-items: center; }
.ln-term-input { width: 96px; padding-left: 16px; }
.ln-term .seg, .ln-terms { margin: 0; }
.ln-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ln-month { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color-scheme: dark; }
.ln-side { position: sticky; top: 90px; }
.ln-side .notice { margin-top: 14px; }
.ln-panel { padding: 24px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border); }
.ln-big { margin: 0; font-family: var(--display); font-size: 2.8rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ln-lines { display: grid; grid-template-columns: auto auto; gap: 8px 16px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--tint-border); }
.ln-lines dt { color: var(--muted); font-size: 0.92rem; }
.ln-lines dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ln-lines dd small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.ln-split { display: flex; height: 8px; margin: 18px 0 0; border-radius: 999px; overflow: hidden; background: var(--gold); }
.ln-split-p { width: var(--p, 100%); background: var(--accent-strong); }
.ln-split::after { content: none; }
.ln-saving { margin: 16px 0 0; font-size: 0.9rem; color: var(--gold); }
.ln-chart { margin: 24px 0 0; }
.ch { display: block; width: 100%; height: auto; }
.ch-grid { stroke: var(--border); stroke-width: 1; }
.ch-label { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.ch-line { fill: none; stroke: var(--accent-strong); stroke-width: 2.5; stroke-linejoin: round; }
.ch-line.is-dashed { stroke: var(--faint); stroke-dasharray: 6 5; stroke-width: 2; }
.ln-schedule { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border); }
.ln-schedule-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.ln-schedule-head .make-label, .ln-schedule-head .seg { margin: 0; }
.ln-table-wrap { max-height: 420px; overflow: auto; border-radius: 12px; }
.ln-table-wrap thead th { position: sticky; top: 0; background: var(--surface); }
.mg-bar { display: flex; gap: 3px; height: 10px; margin: 18px 0 0; }
.mg-bar:empty { display: none; }
.mg-seg { border-radius: 999px; min-width: 6px; }
.mg-pi { background: var(--accent-strong); }
.mg-tax { background: var(--gold); }
.mg-ins { background: #6fd3c2; }
.mg-pmi { background: var(--danger); }
.mg-hoa { background: #8fa7f5; }
.mg-parts { border-top: none; padding-top: 0; margin-top: 14px; }
.mg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
@media (max-width: 760px) {
  .ln-grid { grid-template-columns: 1fr; }
  .ln-side { position: static; }
  .ln-big { font-size: 2.3rem; }
  .ch-label { font-size: 15px; }
}

/* BMI calculator */
.bmi-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.bmi-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bmi-result { margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.bmi-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bmi-big { margin: 0; font-family: var(--display); font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bmi-cat { margin: 0 0 4px; padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; background: var(--surface-2); }
.bmi-cat:empty { display: none; }
.bmi-cat[data-band="0"] { color: #8fa7f5; }
.bmi-cat[data-band="1"] { color: #6fd3c2; }
.bmi-cat[data-band="2"] { color: var(--gold); }
.bmi-cat[data-band="3"] { color: var(--danger); }
.bmi-gauge { position: relative; margin: 22px 0 0; padding-bottom: 22px; }
.bmi-bands { display: flex; gap: 3px; height: 12px; }
.bmi-bands span { border-radius: 3px; opacity: 0.75; }
.b-under { width: 14%; background: #8fa7f5; }
.b-healthy { width: 24%; background: #6fd3c2; }
.b-over { width: 20%; background: var(--gold); }
.b-obese { flex: 1; background: var(--danger); }
.bmi-marker { position: absolute; top: -5px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--surface); transition: left 200ms ease; }
.bmi-ticks { position: relative; height: 18px; margin-top: 6px; }
.bmi-ticks span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.bmi-range { margin: 4px 0 0; font-size: 0.95rem; }
.bmi-table { margin: 18px 0 0; }
.bmi-table td, .bmi-table th { text-align: left; }
@media (max-width: 560px) {
  .bmi-inputs { grid-template-columns: 1fr; }
}

/* Algebra calculator */
/* The maths box: what is typed is drawn as maths, with a caret of its own. */
.mf { position: relative; display: block; min-height: 64px; padding: 14px 16px; overflow-x: auto; overflow-y: hidden; cursor: text; font-size: 1.35rem; line-height: 1.5; -webkit-user-select: none; user-select: none; }
.mf.is-focused { border-color: var(--accent); box-shadow: var(--focus-ring); }
.mf-view { display: inline-block; min-width: 100%; white-space: nowrap; }
.mf.is-empty .mf-view::after { content: attr(data-placeholder); color: var(--muted); font-size: 0.8em; }
.mf.is-all .mf-view > .mf-row { background: var(--tint); border-radius: 4px; }
.mf-capture { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; resize: none; font-size: 16px; pointer-events: none; }
.mf .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mf-row { display: inline; }
.mf-row.is-empty { display: inline-block; min-width: 0.6em; min-height: 0.95em; vertical-align: middle; border-radius: 3px; background: var(--tint); outline: 1px dashed var(--tint-border); }
.mf-ch { padding: 0 0.01em; }
.mf-op { padding: 0 0.22em; }
.mf-comma { padding-right: 0.3em; }
.mf-space { padding-right: 0.06em; }
.mf-br { display: block; height: 0.3em; }
.mf-sup, .mf-sub { display: inline-block; font-size: 0.68em; }
.mf-sup { vertical-align: 0.75em; }
.mf-sub { vertical-align: -0.35em; }
.mf-frac { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; font-size: 0.86em; line-height: 1.2; margin: 0 0.1em; text-align: center; }
.mf-frac > .mf-row { display: block; padding: 0 0.18em; }
.mf-frac > .mf-row.is-empty { display: block; margin: 0.06em auto; min-width: 0.8em; }
.mf-frac > .mf-row:first-child { border-bottom: 1.5px solid currentColor; padding-bottom: 0.08em; }
.mf-frac > .mf-row:last-child { padding-top: 0.08em; }
.mf-root { display: inline-flex; align-items: stretch; }
.mf-radic { padding-right: 0.02em; }
.mf-root > .mf-row { display: inline-block; border-top: 1.5px solid currentColor; padding: 0.04em 0.12em 0; }
.mf-paren, .mf-abs { display: inline-flex; align-items: center; }
.mf-bracket { display: inline-block; transform-origin: center; padding: 0 0.04em; }
.mf-paren > .mf-row, .mf-abs > .mf-row { display: inline-block; }
.mf-caret { display: inline-block; width: 0; height: 1.15em; margin: 0 -1px; border-left: 2px solid var(--accent); vertical-align: -0.2em; visibility: hidden; }
.mf.is-focused .mf-caret, .mf.is-keyed .mf-caret { visibility: visible; animation: mf-blink 1.05s steps(1) infinite; }
.mf-pending { text-decoration: underline; }
@keyframes mf-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mf.is-focused .mf-caret { animation: none; } }
.alg-keys { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; }
.alg-key {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.9rem;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 140ms ease, transform 140ms ease;
}
.alg-key:hover { border-color: var(--tint-border); }
.alg-key:active { transform: scale(0.94); }
.alg-key:focus-visible { box-shadow: var(--focus-ring); }
.alg-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 16px 0 0; }
.alg-options:not(:has(> :not([hidden]))) { display: none; }
.alg-options .seg { margin: 0; }
.alg-solvefor { display: inline-flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--muted); }
.alg-solvefor select { font-family: var(--mono); padding-top: 8px; padding-bottom: 8px; }
.alg-error { margin: 16px 0 0; color: var(--danger); font-size: 0.92rem; }
.alg-result { margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.alg-answers { display: grid; gap: 8px; }
.alg-answer { font-family: var(--display); font-size: 1.55rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.alg-answer small { font-family: var(--body); font-size: 0.55em; font-weight: 500; color: var(--muted); }
.alg-answer-label { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-right: 6px; }
.alg-r { font-family: var(--mono); font-size: 0.62em; font-weight: 500; color: var(--muted); padding: 0 0.15em; }
.alg-box { display: inline-block; width: 0.55em; height: 0.6em; border: 1px dashed currentColor; border-radius: 2px; opacity: 0.7; vertical-align: middle; }
.alg-key sup .alg-box, .alg-key sub .alg-box { width: 0.8em; height: 0.85em; }
.alg-key .fr { font-size: 0.9em; }
.alg-key .fr > span { padding: 0.05em 0.15em; line-height: 1; }
.alg-key .fr .alg-box { width: 0.7em; height: 0.6em; }
/* A number's forms: one row each, label then value, all the same size. */
.alg-answers.is-forms { grid-template-columns: max-content minmax(0, 1fr); align-items: stretch; gap: 0 22px; padding: 6px 20px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.alg-answers.is-forms .alg-answer { display: contents; font-size: 1.3rem; }
.alg-answers.is-forms .alg-answer-label { display: flex; align-items: center; margin: 0; padding: 12px 0; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.alg-answers.is-forms .alg-answer-main { padding: 10px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; }
.alg-answers.is-forms .alg-answer:not(:first-child) > * { border-top: 1px solid var(--border); }
.alg-answers.is-forms .alg-answer-main small { font-family: var(--body); font-size: 0.82rem; font-weight: 400; color: var(--muted); }
.alg-approx { font-family: var(--mono); font-size: 0.86rem; font-weight: 400; color: var(--muted); white-space: nowrap; }
.alg-note, .alg-hint { margin: 12px 0 0; font-size: 0.9rem; color: var(--muted); }
.alg-hint { color: var(--gold); }
.alg-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 20px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.alg-facts dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 0.3em; }
.alg-facts dd { margin: 0; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.alg-facts dd small { color: var(--muted); font-size: 0.82rem; }
.alg-steps { margin: 18px 0 0; border: 1px solid var(--border); border-radius: 14px; }
.alg-steps summary { cursor: pointer; padding: 13px 18px; font-weight: 600; font-size: 0.95rem; border-radius: 14px; outline: none; }
.alg-steps summary:focus-visible { box-shadow: var(--focus-ring); }
.alg-steps ol { margin: 0; padding: 4px 18px 16px 42px; display: grid; gap: 14px; }
.alg-steps li { padding-left: 4px; }
.alg-steps li::marker { font-family: var(--mono); font-size: 0.8rem; color: var(--accent-strong); }
.alg-step-text { display: block; font-size: 0.92rem; color: var(--muted); }
.alg-step-math { display: block; margin-top: 4px; font-size: 1.12rem; line-height: 1.7; overflow-wrap: anywhere; }
.alg-numberline { margin: 20px 0 0; padding: 30px 26px 40px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.nl-track { position: relative; height: 2px; background: var(--faint); }
.nl-track::before, .nl-track::after { content: ""; position: absolute; top: -5px; border: 6px solid transparent; }
.nl-track::before { left: -14px; border-right-color: var(--faint); }
.nl-track::after { right: -14px; border-left-color: var(--faint); }
.nl-seg { position: absolute; top: -3px; height: 8px; border-radius: 4px; background: var(--accent); }
.nl-seg.to-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.nl-seg.to-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.nl-dot { position: absolute; top: 1px; width: 15px; height: 15px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--surface-2); border: 2.5px solid var(--accent-strong); }
.nl-dot.is-closed { background: var(--accent-strong); }
.nl-label { position: absolute; top: 16px; transform: translateX(-50%); font-size: 0.92rem; white-space: nowrap; }
.alg-graph { margin: 20px 0 0; }
.alg-graph canvas { display: block; width: 100%; height: 360px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); touch-action: none; cursor: grab; }
.alg-graph canvas:active { cursor: grabbing; }
.alg-graph-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 10px 0 0; min-height: 36px; }
.alg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.84rem; color: var(--muted); }
.alg-legend:empty { display: none; }
.alg-key-item::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c); }
.alg-readout { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.alg-zoom { display: flex; gap: 6px; margin-left: auto; }
.alg-zoom .btn-small { min-width: 40px; }
.alg-examples { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.alg-example-list { display: flex; flex-wrap: wrap; gap: 6px; }
.alg-example { font-family: var(--mono); font-weight: 500; font-size: 0.8rem; }
@media (max-width: 560px) {
  .alg-answer { font-size: 1.3rem; }
  .alg-facts { grid-template-columns: 1fr; gap: 2px; }
  .alg-facts dd { margin-bottom: 8px; }
  .alg-graph canvas { height: 280px; }
  .alg-keys { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .alg-key { min-width: 0; height: 40px; padding: 0; }
}

/* ---- The light ----
   One light per page follows the cursor. site.js eases a single point
   toward the cursor and hands it to every .lit surface, .lit-field and
   .lit-text as --lx/--ly in that element's own coordinates, and sets --glow
   (0 to 1) on the root so the light fades in and out. A .lit surface draws
   the light as a soft fill and as a brighter ring on its border, so moving
   between surfaces reads as one light, not one per card. Anything under the
   fill goes in --lit-under. */
:root { --glow: 0; }
.lit {
  --lx: -999px;
  --ly: -999px;
  position: relative;
  background-image:
    radial-gradient(320px circle at var(--lx) var(--ly), rgba(139, 92, 246, calc(0.14 * var(--glow))), transparent 60%),
    var(--lit-under, none);
}
.lit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: radial-gradient(170px circle at var(--lx) var(--ly), rgba(206, 184, 255, calc(0.6 * var(--glow))), rgba(139, 92, 246, calc(0.2 * var(--glow))) 45%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.lit-field { --lx: -999px; --ly: -999px; }

/* ---- Page transitions ----
   Moving between pages cross-fades: the old page lifts away and blurs, the
   new one rises in from below, and the top bar stays put. Browsers without
   cross-document view transitions (site.mjs marks them .no-vt before first
   paint) get the same rise-in on the incoming page only. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
::view-transition-old(root) { animation: page-out 220ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: page-in 460ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-18px) scale(0.985); filter: blur(4px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } }
.no-vt main { animation: page-in 460ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  @view-transition { navigation: none; }
}

/* ------------------------------------------------------------ text tools */
.tx-input { min-height: 220px; font-family: var(--mono); font-size: 0.92rem; line-height: 1.6; }
.tx-count { margin: 8px 0 0; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.tx-group { margin: 20px 0 0; }
.tx-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-op { font-size: 0.84rem; }
.tx-find { margin: 22px 0 0; border: 1px solid var(--border); border-radius: 14px; }
.tx-find summary { cursor: pointer; padding: 13px 18px; font-weight: 600; font-size: 0.95rem; border-radius: 14px; outline: none; }
.tx-find summary:focus-visible { box-shadow: var(--focus-ring); }
.tx-find[open] { padding: 0 18px 16px; }
.tx-find[open] summary { margin: 0 -18px; }
.tx-find-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tx-find .input { font-family: var(--mono); }
.tx-find .toggles { margin-top: 14px; }

/* ------------------------------------------------------------ fancy text */
.ft-input { font-size: 1.15rem; }
.ft-label { margin-top: 22px; }
.ft-family { margin-bottom: 0; }
.ft-result { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; padding: 18px 18px 18px 22px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.ft-out { flex: 1; min-width: 0; margin: 0; font-size: 1.6rem; line-height: 1.5; overflow-wrap: anywhere; }

/* Ticks that sit in a row like the choices beside them, any number on. */
.check-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.check-chip { position: relative; display: inline-flex; translate: var(--mx, 0px) var(--my, 0px); transition: translate 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.check-chip input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check-chip span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.86rem; font-weight: 600; color: var(--muted);
  padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--border);
  transition: transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1.3), background 180ms ease, color 140ms ease, border-color 140ms ease;
}
.check-chip span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid currentColor; background: center / 10px no-repeat; }
.check-chip input:checked + span { color: var(--fill-text); background: var(--fill); border-color: transparent; }
.check-chip input:checked + span::before { border-color: #fff; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E"); }
.check-chip input:focus-visible + span { box-shadow: var(--focus-ring); }
.check-chip input:disabled { cursor: default; }
.check-chip input:disabled + span { opacity: 0.4; text-decoration: line-through; }
@media (hover: hover) {
  .check-chip input:not(:disabled):hover + span { color: var(--bg); background: var(--gold); border-color: var(--gold); }
  .check-chip input:not(:disabled):hover + span::before { border-color: var(--bg); }
}
.check-chip input:not(:disabled):active + span { transform: scale(0.94); color: var(--bg); background: var(--gold); border-color: var(--gold); }

/* ------------------------------------------------------------ random */
.rg-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rg-num { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.rg-list { min-height: 150px; margin-bottom: 14px; }
.rg-panel .toggles { margin-top: 16px; }
.rg-go { display: flex; justify-content: center; margin: 24px 0 0; }
.rg-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 34px; font-size: 1.05rem; }
.rg-btn:active svg { transform: rotate(-120deg); }
.rg-btn svg { transition: transform 300ms ease; }
.rg-result { margin: 22px 0 0; padding: 26px 20px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); text-align: center; }
.rg-big { margin: 0; font-family: var(--display); font-size: 3.2rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rg-big.is-long { font-size: 1.6rem; line-height: 1.4; }
.rg-big.is-new { animation: rg-pop 380ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.rg-line { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.rg-line:empty { display: none; }
@keyframes rg-pop { from { transform: scale(0.8); opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .rg-big.is-new { animation: none; } }

/* ------------------------------------------------------------ colour */
.cp-top { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: start; }
.cp-swatch { position: relative; display: block; aspect-ratio: 1; border-radius: 22px; background: var(--c, #8b5cf6); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 14px 34px rgba(0, 0, 0, 0.35); cursor: pointer; overflow: hidden; }
.cp-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cp-swatch:focus-within { box-shadow: var(--focus-ring); }
.cp-text { font-family: var(--mono); font-size: 1.1rem; }
.cp-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.cp-tools .btn { display: inline-flex; align-items: center; gap: 7px; }
.cp-formats { list-style: none; margin: 22px 0 24px; padding: 0; display: grid; gap: 6px; }
.cp-format { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cp-format:hover { border-color: var(--tint-border); }
.cp-format:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cp-format code { font-family: var(--mono); font-size: 0.95rem; overflow-wrap: anywhere; }
.cp-format-name { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); }
.cp-format-copy { font-size: 0.78rem; font-weight: 600; color: var(--muted); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); }
.cp-scale { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin: 0 0 24px; }
.cp-chip { display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; text-align: center; }
.cp-chip-color { display: block; height: 52px; border-radius: 12px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: transform 160ms ease; }
.cp-chip:hover .cp-chip-color { transform: translateY(-3px); }
.cp-chip:focus-visible { outline: none; }
.cp-chip:focus-visible .cp-chip-color { box-shadow: var(--focus-ring); }
.cp-chip-hex { font-family: var(--mono); font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; }
.cp-harmonies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.cp-harmony-name { margin: 0 0 6px; font-size: 0.86rem; color: var(--muted); }
.cp-harmony-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cc-picks { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: end; }
.cc-pick-row { display: flex; gap: 10px; align-items: center; }
.cc-swatch { flex: none; width: 50px; height: 50px; border-radius: 14px; aspect-ratio: auto; }
.cc-swap { margin-bottom: 1px; }
.cc-result { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; margin: 24px 0 0; }
.cc-ratio { margin: 0; font-family: var(--display); font-size: 2.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cc-verdict { margin: 6px 0 0; font-size: 0.88rem; color: var(--muted); }
.cc-preview { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--border); }
.cc-preview-big { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.25; }
.cc-preview-small { margin: 8px 0 0; font-size: 16px; line-height: 1.5; }
.cc-checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 6px; }
.cc-check { display: grid; grid-template-columns: 22px 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.cc-mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--danger); }
.cc-check.is-pass .cc-mark { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cc-level { font-family: var(--mono); font-weight: 600; font-size: 0.86rem; }
.cc-what { font-size: 0.92rem; }
.cc-what small { margin-left: 8px; font-size: 0.78rem; color: var(--muted); }
.cc-pass { font-size: 0.82rem; font-weight: 600; color: var(--danger); }
.cc-check.is-pass .cc-pass { color: var(--accent-strong); }
.cc-fix { margin: 14px 0 0; font-size: 0.92rem; color: var(--muted); }
.cc-fix:empty { display: none; }
.cc-fix-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0 2px; padding: 3px 10px 3px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: 600 0.86rem var(--mono); cursor: pointer; }
.cc-fix-btn::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.cc-fix-btn:hover { border-color: var(--gold); }

/* ------------------------------------------------------------ keyboard */
.kb-board-wrap { container-type: inline-size; overflow-x: auto; margin: 0 -4px; padding: 4px; }
.kb-board { --u: clamp(26px, calc((100cqw - 90px) / 18.5), 40px); display: flex; gap: calc(var(--u) * 0.45); width: max-content; margin: 0 auto; }
.kb-block { display: grid; gap: 5px; align-content: start; }
.kb-row { display: flex; gap: 5px; min-height: var(--u); }
.kb-main .kb-row:first-child { margin-bottom: calc(var(--u) * 0.3); }
.kb-nav .kb-row:first-child { margin-bottom: calc(var(--u) * 0.3); }
.kb-key, .kb-gap { flex: none; width: calc(var(--u) * var(--w) + 5px * (var(--w) - 1)); height: var(--u); }
.kb-key { display: grid; place-items: center; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); font-family: var(--mono); font-size: calc(var(--u) * 0.3); color: var(--muted); overflow: hidden; white-space: nowrap; transition: background 120ms ease, color 120ms ease, transform 80ms ease; }
.kb-key.is-done { color: var(--fill-text); background: var(--fill); border-color: transparent; }
.kb-key.is-down { color: var(--bg); background: var(--gold); border-color: transparent; transform: translateY(2px); box-shadow: none; }
.kb-stats { margin-top: 22px; }
.kb-stats .stat-num { font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; }
.kb-stats .stat-label b { color: var(--text); font-weight: 600; }
.kb-extra { margin: 12px 0 0; font-family: var(--mono); font-size: 0.82rem; color: var(--muted); overflow-wrap: anywhere; }

/* ------------------------------------------------------------ mic and webcam */
.av-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.av-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.av-h { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 1.05rem; }
.av-h svg { color: var(--accent-strong); }
.av-video-wrap { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0c0a14; border: 1px solid var(--border); }
.av-video-wrap video { display: block; width: 100%; height: 100%; object-fit: cover; }
.av-video-wrap video.is-mirrored { transform: scaleX(-1); }
.av-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; text-align: center; font-size: 0.88rem; color: var(--muted); }
.av-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.av-select select { max-width: 220px; }
.av-mirror { padding: 8px 12px; }
.av-stage { aspect-ratio: 16 / 9; display: grid; align-content: center; gap: 12px; padding: 0 22px; border-radius: 14px; background: #0c0a14; border: 1px solid var(--border); }
.av-meter { position: relative; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.av-level { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--fill); transition: width 60ms linear; }
.av-peak { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -3px; background: var(--gold); }
.av-db { margin: 0; text-align: center; font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }
.av-record { display: grid; gap: 10px; }
.av-record audio { width: 100%; }
.av-info { margin: 0; font-size: 0.84rem; color: var(--muted); overflow-wrap: anywhere; }
.av-info:empty { display: none; }

@media (max-width: 640px) {
  .tx-find-row, .rg-fields { grid-template-columns: 1fr; }
  .ft-result { flex-direction: column; align-items: stretch; }
  .ft-out { font-size: 1.3rem; }
  .cp-top { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .cp-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cp-harmonies { grid-template-columns: 1fr; }
  .cc-picks { grid-template-columns: 1fr; }
  .cc-swap { justify-self: center; transform: rotate(90deg); }
  .cc-result { grid-template-columns: 1fr; }
  .cc-what small { display: block; margin: 0; }
  .av-grid { grid-template-columns: 1fr; }
  .rg-big { font-size: 2.5rem; }
}

/* ------------------------------------------------------------ gold under the pointer */
/* Every button answers the pointer the way the home page's tools do: it leans
   toward the cursor (site.js sets --mx and --my), turns gold, and gives a
   little when pressed. Gold is only ever the thing under the pointer. */
:is(.btn, .seg-btn, .icon-btn, .mode-btn, .calc-key, .alg-key, a.reg-chip, .pg-btn, .cc-fix-btn, .nav-search, .nav-map, .map-cta-link, .cp-format-copy) {
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate 420ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1.3), background 180ms ease, color 140ms ease, border-color 140ms ease, box-shadow 200ms ease, filter 160ms ease;
}
@media (hover: hover) {
  :is(.btn, .seg-btn, .seg-btn.is-active, .icon-btn, .mode-btn, .mode-btn.is-active, .calc-key, .calc-key.is-op, .calc-key.is-eq, .alg-key, a.reg-chip, .pg-btn, .cc-fix-btn, .wheel-hub, .nav-map, .map-cta-link):not(:disabled):hover,
  .calc-sci .calc-key:hover {
    color: var(--bg);
    background: var(--gold);
    border-color: var(--gold);
    filter: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  }
  .pg-btn[data-act="remove"]:hover { color: #fff; background: #b9524e; border-color: transparent; }
  :is(.btn, .icon-btn, .cc-fix-btn):not(:disabled):hover { transform: translateY(-2px); }
  .nav-search:hover { color: var(--text); border-color: var(--gold); }
  .nav-search:hover svg, .nav-search:hover kbd { color: var(--gold); }
  :is(.toggle, .uc-item, .cp-format, .dropzone, .calc-tape-item):hover { border-color: var(--gold); }
  :is(.disclosure > summary, .tx-find summary, .alg-steps summary, .tip-extra summary):hover { color: var(--gold); }
  .linkish:hover { color: var(--gold); }
  .cp-format:hover .cp-format-copy { color: var(--bg); background: var(--gold); border-color: var(--gold); }
  .cp-chip:hover .cp-chip-color { box-shadow: 0 0 0 2px var(--gold), 0 10px 20px rgba(0, 0, 0, 0.4); }
  .format-select:hover select { border-color: var(--gold); }
}
:is(.btn, .seg-btn, .icon-btn, .mode-btn, .calc-key, .alg-key, a.reg-chip, .pg-btn, .cc-fix-btn, .wheel-hub, .nav-map, .map-cta-link):not(:disabled):active {
  color: var(--bg);
  background: var(--gold);
  border-color: var(--gold);
  filter: none;
}
:is(.btn, .seg-btn, .mode-btn, .calc-key, .alg-key, a.reg-chip, .cc-fix-btn, .nav-map, .map-cta-link):not(:disabled):active { transform: scale(0.94); }

/* The brand mark goes gold and hops; the way home is a button too. */
.brand-mark { transition: background 200ms ease, color 160ms ease, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease; }
.brand { translate: var(--mx, 0px) var(--my, 0px); transition: translate 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (hover: hover) {
  .brand:hover .brand-mark { color: var(--bg); background: var(--gold); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); transform: rotate(-8deg) scale(1.08); }
}
.brand:active .brand-mark { color: var(--bg); background: var(--gold); transform: scale(0.92); }

/* ------------------------------------------------------------ dice */
.dr-controls { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: end; }
.dr-sides { margin: 0; }
.dr-tray {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 26px;
  width: 100%; min-height: 210px; margin: 24px 0 0; padding: 40px 20px 30px;
  border-radius: 20px; border: 1px solid var(--border);
  background: radial-gradient(ellipse at 50% 35%, #2c2449, #15111f 75%);
  cursor: pointer; perspective: 900px; outline: none;
  transition: border-color 160ms ease;
}
.dr-tray:focus-visible { box-shadow: var(--focus-ring); }
@media (hover: hover) { .dr-tray:hover { border-color: var(--gold); } }
.dr-die { --s: 66px; position: relative; flex: none; width: var(--s); height: var(--s); }
.dr-tray.is-many { gap: 18px; }
.dr-tray.is-many .dr-die { --s: 48px; }
.dr-die.is-rolling { animation: dr-hop 900ms cubic-bezier(0.3, 0.7, 0.4, 1) var(--delay) both; }
@keyframes dr-hop { 25% { translate: 0 -48px; } 55% { translate: 0 0; } 70% { translate: 0 -12px; } 85%, 100% { translate: 0 0; } }
.dr-spin { position: absolute; inset: 0; display: grid; place-items: center; }
.dr-spin svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
.dr-shape { fill: #8b5cf6; stroke: #b79cfb; stroke-width: 2; stroke-linejoin: round; }
.dr-facet { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; stroke-linejoin: round; }
.dr-pips { fill: #fff; filter: drop-shadow(0 1px 1px rgba(30, 10, 80, 0.5)); }
.dr-num { position: relative; font-family: var(--display); font-size: calc(var(--s) * 0.32); font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(30, 10, 80, 0.6); }
.dr-d4 .dr-num { margin-top: 22%; }
.dr-d10 .dr-num, .dr-d100 .dr-num { margin-top: -8%; }
.dr-d100 .dr-num { font-size: calc(var(--s) * 0.26); }
.dr-flat.is-rolling .dr-spin { animation: dr-spin 900ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--delay) both; }
@keyframes dr-spin { from { rotate: -540deg; scale: 0.85; } 60% { scale: 1.08; } to { rotate: 0deg; scale: 1; } }
.dr-result { margin: 16px 0 0; text-align: center; }
.dr-total { margin: 0; font-family: var(--display); font-size: 3.4rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dr-total.is-new { animation: rg-pop 380ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.dr-line { margin: 6px 0 0; color: var(--muted); font-size: 0.92rem; overflow-wrap: anywhere; }
.dr-go { display: flex; justify-content: center; margin: 20px 0 0; }
.dr-roll { min-width: 160px; font-size: 1.05rem; }
.dr-history { margin: 10px 0 0; font-family: var(--mono); font-size: 0.78rem; color: var(--faint); }
.dr-history:empty { display: none; }

/* ------------------------------------------------------------ coin */
.cf-stage { position: relative; display: grid; place-items: center; height: 270px; perspective: 900px; }
.cf-toss { --s: 170px; position: relative; z-index: 1; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; outline: none; }
.cf-toss:focus-visible { box-shadow: var(--focus-ring); }
.cf-coin { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1100ms cubic-bezier(0.15, 0.6, 0.25, 1); }
.cf-face {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px;
  border-radius: 50%; backface-visibility: hidden; color: #f4efff;
  background: radial-gradient(circle at 35% 28%, #c9b2ff, #8b5cf6 45%, #5530c4);
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.16), inset 0 0 0 9px rgba(40, 20, 90, 0.4), inset 0 -12px 24px rgba(30, 10, 80, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.3);
  transition: box-shadow 200ms ease;
}
.cf-face svg { width: calc(var(--s) * 0.42); height: calc(var(--s) * 0.42); filter: drop-shadow(0 2px 0 rgba(40, 20, 90, 0.55)); }
.cf-face b { font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; }
.cf-tails { transform: rotateX(180deg); }
@media (hover: hover) { .cf-toss:hover .cf-face { box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.16), inset 0 0 0 9px rgba(40, 20, 90, 0.4), inset 0 -12px 24px rgba(30, 10, 80, 0.45), 0 0 0 4px var(--gold); } }
.cf-shadow { position: absolute; bottom: 14px; width: 150px; height: 20px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); }
.cf-stage.is-flipping .cf-toss { animation: cf-toss 1100ms cubic-bezier(0.3, 0.6, 0.4, 1); }
.cf-stage.is-flipping .cf-shadow { animation: cf-shadow 1100ms cubic-bezier(0.3, 0.6, 0.4, 1); }
@keyframes cf-toss { 45% { translate: 0 -80px; scale: 1.18; } 84% { translate: 0 0; scale: 1; } 92% { translate: 0 -8px; } }
@keyframes cf-shadow { 45% { scale: 0.55; opacity: 0.45; } 84% { scale: 1; opacity: 1; } }
.cf-result { display: grid; place-items: center; min-height: 3.1rem; margin: 4px 0 0; text-align: center; font-size: 0.95rem; color: var(--muted); }
.cf-result.is-landed { font-family: var(--display); font-size: 2.2rem; font-weight: 700; line-height: 1.2; color: var(--text); animation: rg-pop 380ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.cf-go { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; margin: 18px 0 0; }
.cf-go .btn { min-width: 150px; font-size: 1.05rem; }
.cf-many { margin: 0; }
.cf-stats { margin-top: 24px; }
.cf-history { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 0; padding: 0; }
.cf-history li { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 0.68rem var(--mono); color: var(--muted); border: 1px solid var(--border); }
.cf-history li.is-heads { color: var(--fill-text); background: var(--fill); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .cf-coin { transition: none; } }
@media (max-width: 640px) {
  .dr-tray { gap: 18px; min-height: 170px; padding: 30px 14px 22px; }
  .dr-die { --s: 54px; }
  .dr-tray.is-many .dr-die { --s: 40px; }
  .cf-stage { height: 230px; }
  .cf-toss { --s: 140px; }
}
/* Word cloud */
.wcl-input { min-height: 140px; font-size: 0.95rem; line-height: 1.55; }
.wcl-stage {
  position: relative;
  margin: 18px 0 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: #141120;
}
.wcl-stage[data-bg="light"] { background: #faf8ff; }
/* A checkerboard, so a transparent background reads as transparent. */
.wcl-stage[data-bg="none"] {
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--bg) 0 50%) 0 0 / 20px 20px;
}
.wcl-canvas { display: block; width: 100%; height: 360px; }
.wcl-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: 0.95rem; }
.wcl-stage[data-bg="light"] .wcl-empty { color: #5d5678; }
.wcl-shuffle { display: inline-flex; align-items: center; gap: 8px; }
.wcl-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.wcl-opt .seg { margin: 0; }
.wcl-nums { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 18px; align-items: start; }
.wcl-range-label { display: flex; justify-content: space-between; align-items: baseline; }
.wcl-range-label output { font-family: var(--display); font-size: 0.95rem; line-height: 1; font-weight: 700; color: var(--text); letter-spacing: 0; text-transform: none; }
.wcl-max .range { margin: 22px 0 0; }
.wcl-words { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.wcl-top { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; counter-reset: wcl; }
.wcl-top li { display: flex; align-items: baseline; gap: 10px; font-size: 0.92rem; padding: 0 0 8px; border-bottom: 1px solid var(--border-soft); }
.wcl-top li:not(.wcl-none)::before { counter-increment: wcl; content: counter(wcl); font-family: var(--mono); font-size: 0.75rem; color: var(--faint); width: 1.4em; }
.wcl-word { font-weight: 600; overflow-wrap: anywhere; }
.wcl-count { margin-left: auto; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.wcl-none { color: var(--faint); border: 0 !important; }

/* Secret code translator */
.ci-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin: 0 0 20px; }
.ci-opt .make-label { margin-bottom: 8px; }
.ci-shift { width: 110px; }
.ci-key { width: 220px; }
.ci-morse { display: flex; gap: 8px; }
.ci-play { display: inline-flex; align-items: center; gap: 6px; }
.ci-about { flex: 1 1 220px; margin: 0 0 12px; }
.ci-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
.ci-side { min-width: 0; }
.ci-head, .et-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.ci-head .make-label, .et-head .make-label { margin: 0; }
.ci-box { min-height: 180px; font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
#ci-coded { font-family: var(--mono); font-size: 0.92rem; }
.ci-swap { margin-top: 30px; }
.ci-box.is-invalid, .et-box.is-invalid { border-color: var(--danger); }
.ci-error, .et-error { margin: 10px 0 0; min-height: 1.3em; font-size: 0.88rem; color: var(--danger); }
.ci-error:empty, .et-error:empty { min-height: 0; margin: 0; }

/* Encrypt text */
.et-box { min-height: 150px; font-size: 1rem; line-height: 1.5; }
.et-pass { margin: 20px 0 0; }
.et-pass-row { display: flex; gap: 10px; }
.et-password { flex: 1; min-width: 0; font-family: var(--mono); }
.et-pass-row .icon-btn { height: auto; width: 52px; }
#et-show .et-eye-off, #et-show[aria-pressed="true"] .et-eye { display: none; }
#et-show[aria-pressed="true"] .et-eye-off { display: block; }
.et-go { display: inline-flex; align-items: center; gap: 8px; }
.et-result { margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.et-out { font-family: var(--mono); font-size: 0.86rem; word-break: break-all; background: var(--bg); }
.ci-play:disabled, #et-copy:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 640px) {
  .wcl-opts { grid-template-columns: 1fr; }
  .wcl-top { grid-template-columns: 1fr; }
  .wcl-shuffle { flex: 1 1 100%; justify-content: center; }
  #wcl-status:empty { display: none; }
  #wcl-download, #wcl-copy { flex: 1 1 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; font-size: 0.92rem; }
  .ci-row { grid-template-columns: 1fr; }
  .ci-swap { margin: 0 auto; }
  .ci-swap svg { transform: rotate(90deg); }
  .ci-box { min-height: 130px; }
  .ci-key { width: 100%; }
  .ci-opt[data-for="vigenere"] { flex: 1 1 100%; }
  .ci-about { margin: 0; }
}
/* Word cloud shapes */
.wcl-shape-wrap { grid-column: 1 / -1; }
.wcl-shape-note { margin: 10px 0 0; }
.wcl-shape-note[data-tone="error"] { color: var(--danger); }
.wcl-stage.is-drop { outline: 2px dashed var(--accent-strong); outline-offset: -8px; }

/* ------------------------------------------------------------ readability checker and GPA calculator */
/* Readability: the box, the scores, then a marked-up copy of the text. Each
   kind of mark has its own colour (never gold, which means "under the
   pointer"): a tint behind the words, and a line under the short marks. */
.rc-marked {
  --rc-hard: #5ccfc0; --rc-hard-bg: rgba(92, 207, 192, 0.17);
  --rc-vhard: #f0918d; --rc-vhard-bg: rgba(240, 145, 141, 0.22);
  --rc-passive: #a6d86f; --rc-passive-bg: rgba(166, 216, 111, 0.22);
  --rc-adverb: #7fa8ff; --rc-adverb-bg: rgba(127, 168, 255, 0.26);
  --rc-wordy: #e98ad8; --rc-wordy-bg: rgba(233, 138, 216, 0.24);
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--border);
}
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.rc-head .make-label { margin: 0; }
.rc-input { min-height: 190px; line-height: 1.6; }
.rc-verdict { margin: 14px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.rc-legend { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rc-key { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); transition: opacity 160ms ease; }
.rc-key b { font-family: var(--display); font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rc-key > span:last-child { grid-column: 1 / -1; font-size: 0.82rem; font-weight: 600; line-height: 1.3; }
.rc-key small { display: block; font-family: var(--mono); font-size: 0.66rem; font-weight: 400; color: var(--muted); margin-top: 2px; }
.rc-key.is-zero { opacity: 0.55; }
.rc-swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--rc-bg-key); box-shadow: inset 0 -3px 0 var(--rc-c); }
.rc-key[data-kind="hard"] { --rc-c: var(--rc-hard); --rc-bg-key: var(--rc-hard-bg); }
.rc-key[data-kind="vhard"] { --rc-c: var(--rc-vhard); --rc-bg-key: var(--rc-vhard-bg); }
.rc-key[data-kind="passive"] { --rc-c: var(--rc-passive); --rc-bg-key: var(--rc-passive-bg); }
.rc-key[data-kind="adverb"] { --rc-c: var(--rc-adverb); --rc-bg-key: var(--rc-adverb-bg); }
.rc-key[data-kind="wordy"] { --rc-c: var(--rc-wordy); --rc-bg-key: var(--rc-wordy-bg); }
.rc-key[data-kind="hard"] .rc-swatch, .rc-key[data-kind="vhard"] .rc-swatch { box-shadow: inset 0 0 0 1px var(--rc-c); }
.rc-preview {
  min-height: 120px;
  max-height: 560px;
  overflow: auto;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 1rem;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rc-empty { margin: 0; color: var(--faint); white-space: normal; }
.rc-s { border-radius: 4px; padding: 3px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rc-s.is-hard { background: var(--rc-hard-bg); }
.rc-s.is-vhard { background: var(--rc-vhard-bg); }
.rc-m { color: inherit; padding: 0 1px; border-radius: 3px 3px 0 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rc-m.is-passive { background: var(--rc-passive-bg); box-shadow: inset 0 -2px 0 var(--rc-passive); }
.rc-m.is-adverb { background: var(--rc-adverb-bg); box-shadow: inset 0 -2px 0 var(--rc-adverb); }
.rc-m.is-wordy { background: var(--rc-wordy-bg); box-shadow: inset 0 -2px 0 var(--rc-wordy); }
.rc-swaps { margin: 18px 0 0; }
.rc-swap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rc-swap-list li { font-size: 0.86rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.rc-from { text-decoration: line-through; text-decoration-color: var(--rc-wordy); }
.rc-to { font-weight: 600; color: var(--text); }
.rc-swap-list small { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); }

/* GPA: a row per course (name, grade, credits, level, remove), then the
   switches on the left and the answer in the tinted panel on the right. */
.gpa-cols, .gpa-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 88px 132px 46px; gap: 8px; align-items: center; }
.gpa-cols { margin: 0 0 8px; }
.gpa-cols span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); }
.gpa-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gpa-row .input { padding-top: 11px; padding-bottom: 11px; }
.gpa-select, .gpa-select select { width: 100%; }
.gpa-select select { padding: 11px 32px 11px 14px; line-height: 1.5; }
.gpa-select::after { right: 15px; }
.gpa-cr .affix-input { font-size: 1rem; padding-left: 14px; padding-right: 34px; }
.gpa-cr > span { right: 13px; font-size: 0.82rem; font-weight: 500; }
.icon-btn.gpa-remove { width: 46px; height: 46px; color: var(--muted); background: transparent; border-color: var(--border); }
.icon-btn.gpa-remove:disabled { opacity: 0.35; cursor: default; transform: none; background: transparent; color: var(--muted); }
/* Removing something keeps its red, rather than the gold of other buttons. */
@media (hover: hover) {
  .icon-btn.gpa-remove:not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; }
}
.icon-btn.gpa-remove:not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; transform: scale(0.94); }
.gpa-add-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.gpa-add { display: inline-flex; align-items: center; gap: 8px; }
.gpa-grid { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.gpa-inputs .tip-extra { margin-top: 12px; }
.gpa-so-far { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gpa-num { font-family: var(--display); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.gpa-cum-out { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--tint-border); }
.gpa-cum-big { margin: 0; font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gpa-cum-line { margin: 4px 0 0; font-size: 0.88rem; color: var(--muted); }

@media (max-width: 640px) {
  .rc-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-key:last-child { grid-column: 1 / -1; }
  .rc-preview { padding: 14px; }
  .gpa-cols { display: none; }
  .gpa-rows { gap: 0; }
  .gpa-row {
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1.2fr) 46px;
    grid-template-areas: "name name name remove" "grade credits kind kind";
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .gpa-row:first-child { padding-top: 0; }
  .gpa-name { grid-area: name; }
  .gpa-grade { grid-area: grade; }
  .gpa-cr { grid-area: credits; }
  .gpa-kind { grid-area: kind; }
  .gpa-remove { grid-area: remove; }
  .gpa-add-row .btn { flex: 1 1 0; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
  .gpa-add { justify-content: center; }
}

/* ------------------------------------------------------------ developer, web and SEO tools */
/* Developer Tools (dt-) and Web & SEO Tools (seo-): a row of tools on a
   .seg, the options for the one picked, the input, then what it makes in
   dark read-only boxes (.dt-result, .seo-code) or rows that copy. The two
   previews are drawn the way the other sites draw them, white and in their
   own fonts, so they read as "what it will look like there". */
.dt-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin: 0 0 20px; }
.dt-opt .make-label { margin-bottom: 8px; }
.dt-opt .seg { margin: 0; }
.dt-opts .toggle { padding: 9px 14px; }
.dt-uuid-toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.dt-head, .seo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.dt-head .make-label, .seo-head .make-label { margin: 0; }
.dt-head-btns, .seo-head-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dt-box { min-height: 170px; font-family: var(--mono); font-size: 0.88rem; line-height: 1.6; tab-size: 4; }
.dt-result, .seo-code { background: var(--bg); }
.dt-uuids { min-height: 0; resize: none; }
.dt-swap, .seo-add { display: inline-flex; align-items: center; gap: 6px; }
.dt-msg { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.dt-msg:empty { display: none; }
.dt-msg[data-tone="ok"] { color: var(--tint-text); }
.dt-msg[data-tone="warn"] { color: var(--gold); }
.dt-msg[data-tone="error"] { color: var(--danger); }
.dt-out { margin: 20px 0 0; }
.dt-ts-row { display: flex; gap: 10px; }
.dt-ts { flex: 1; min-width: 0; font-family: var(--mono); }
.dt-rows { display: grid; gap: 8px; }
.dt-rows:empty { display: none; }
.dt-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 9px 9px 9px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.dt-key { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dt-val { min-width: 0; font-family: var(--mono); font-size: 0.86rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.dt-val:empty::before, .dt-val[data-empty]::before { content: "–"; color: var(--faint); }
.dt-row .btn:disabled { opacity: 0.4; cursor: default; }
.dt-sub { margin-top: 22px; }
.dt-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.dt-table th, .dt-table td { text-align: left; white-space: normal; overflow-wrap: anywhere; font-family: var(--mono); font-size: 0.86rem; }
.dt-table tbody th { width: 36%; font-weight: 600; color: var(--tint-text); }
.dt-table tbody tr:last-child > * { border-bottom: 0; }
.dt-table .dt-none { font-family: var(--body); color: var(--faint); }
.dt-notice { margin: 0 0 16px; }
.dt-jwt-parts { display: grid; gap: 16px; margin: 18px 0 0; }
.dt-jwt-parts .dt-box { min-height: 0; }

.seo-field { min-width: 0; margin: 0 0 16px; }
.seo-field .make-label { margin-bottom: 8px; }
.seo-desc { min-height: 0; font-size: 1rem; }
.seo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.seo-grid-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.seo-grid-meta > :first-child { grid-column: 1 / -1; }
.seo-req, .seo-opt { margin-left: 6px; font-size: 0.68rem; letter-spacing: 0; text-transform: none; color: var(--faint); }
.seo-meter { height: 5px; margin: 10px 0 0; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.seo-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--faint); transition: width 240ms ease, background-color 200ms ease; }
.seo-fill[data-tone="good"] { background: #6fd3c2; }
.seo-fill[data-tone="warn"] { background: var(--gold); }
.seo-fill[data-tone="bad"] { background: var(--danger); }
.seo-count { margin: 6px 0 0; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
.seo-count[data-tone="good"] { color: #6fd3c2; }
.seo-count[data-tone="warn"] { color: var(--gold); }
.seo-count[data-tone="bad"] { color: var(--danger); }
.seo-help { margin: 0; }
.seo-help:empty { display: none; }
.seo-out .seo-help { margin: 8px 0 0; }
.seo-help[data-tone="warn"] { color: var(--gold); }
.seo-help[data-tone="error"] { color: var(--danger); }
.seo-sub { margin-top: 24px; }
.seo-out { margin: 24px 0 0; }
.seo-code { min-height: 0; font-family: var(--mono); font-size: 0.84rem; line-height: 1.6; }

/* A search result, in Google's own sizes: 20px Arial titles, 14px text. */
.seo-serp { padding: 18px 20px; border-radius: 16px; background: #fff; color: #4d5156; font-family: arial, sans-serif; box-shadow: 0 0 0 1px var(--border), 0 18px 50px rgba(0, 0, 0, 0.35); }
.seo-serp-site { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.seo-serp-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; border: 1px solid #dadce0; color: #5f6368; font-size: 13px; font-weight: 700; }
.seo-serp-names { display: flex; flex-direction: column; min-width: 0; }
.seo-serp-name { font-size: 14px; line-height: 20px; color: #202124; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-serp-url { font-size: 12px; line-height: 18px; color: #4d5156; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-serp-title { max-width: 600px; margin: 0; font-size: 20px; line-height: 26px; color: #1a0dab; overflow-wrap: anywhere; }
.seo-serp-desc { max-width: 600px; margin: 4px 0 0; font-size: 14px; line-height: 22px; color: #4d5156; overflow-wrap: anywhere; }
.seo-serp .is-empty, .seo-card .is-empty { opacity: 0.5; }

/* A shared link: the picture's place, then the site, title and text. */
.seo-card { max-width: 520px; border-radius: 14px; overflow: hidden; background: #fff; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; box-shadow: 0 0 0 1px var(--border), 0 18px 50px rgba(0, 0, 0, 0.35); }
.seo-card-img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1.91 / 1; padding: 12px; background: repeating-linear-gradient(135deg, #ece9f5 0 14px, #e4e0f0 14px 28px); color: #6e6787; font-size: 0.86rem; text-align: center; overflow-wrap: anywhere; }
.seo-card-img[data-state="bad"] { color: #b9524e; }
.seo-card-body { padding: 10px 14px 12px; background: #f2f3f5; border-top: 1px solid #dadde1; }
.seo-card-host { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; color: #606770; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-card-title, .seo-card-desc { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.seo-card-title { margin: 4px 0 0; font-size: 16px; line-height: 20px; font-weight: 600; color: #1d2129; -webkit-line-clamp: 2; }
.seo-card-desc { margin: 3px 0 0; font-size: 14px; line-height: 20px; color: #606770; -webkit-line-clamp: 1; }
.seo-card-desc:empty { display: none; }

.seo-slug-in { min-height: 0; font-size: 1rem; }
.seo-slug-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0 0; }
.seo-slug-opts .seo-max { width: 130px; margin: 0; }
.seo-slug-opts .toggle { flex: 1 1 200px; }

.seo-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.seo-groups { display: grid; gap: 14px; }
.seo-group { padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: rgba(14, 11, 24, 0.35); }
.seo-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin: 0 0 6px; }
.seo-group-head .make-label { margin: 0; }
.seo-ua, .seo-path { font-family: var(--mono); font-size: 0.9rem; }
.seo-ua { display: block; min-height: 0; resize: vertical; line-height: 1.5; }
.seo-rules { display: grid; gap: 8px; margin: 12px 0 0; }
.seo-rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.seo-path { padding: 11px 14px; }
.seo-select select { padding: 11px 38px 11px 14px; font-size: 0.9rem; }
.seo-select::after { right: 15px; }
.seo-add { margin: 12px 0 0; }
.seo-head-btns .seo-add { margin: 0; }
#seo-add-group { margin: 14px 0 22px; }
/* Removing keeps its red, under the pointer and when pressed. */
.icon-btn.seo-remove { width: 40px; height: 40px; border-radius: 12px; color: var(--muted); background: transparent; border-color: var(--border); }
@media (hover: hover) {
  .icon-btn.seo-remove:not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; }
}
.icon-btn.seo-remove:not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; }

@media (max-width: 640px) {
  .dt-opts .toggle, .dt-uuid-toggles { flex: 1 1 100%; }
  .dt-uuid-toggles .toggle { flex: 1 1 100%; }
  .dt-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 6px 10px 14px; }
  .dt-row .btn-small { padding: 5px 12px; }
  .dt-val { grid-column: 1 / -1; grid-row: 2; }
  .seo-grid { grid-template-columns: 1fr; }
  .seo-serp { padding: 14px 16px; }
  .seo-serp-title { font-size: 18px; line-height: 24px; }
  .seo-group { padding: 14px 12px; }
  .seo-select select { padding-right: 32px; }
  .seo-select::after { right: 12px; }
}

/* ------------------------------------------------------------ flashcards and citations */
/* Flashcards (fc-): rows of front and back, a paste box, and one big card
   that turns over about its Y axis. Citations (cit-): the source form, the
   reference with a hanging indent, and the list under it. */
:is(.fc-optional, .cit-opt) { margin-left: 6px; font-family: var(--body); font-size: 0.75rem; letter-spacing: 0; text-transform: none; color: var(--faint); }
/* Removing keeps its red, here as on the PDF tiles. */
.icon-btn:is(.fc-del, .cit-del) { width: 40px; height: 40px; border-radius: 12px; color: var(--muted); background: transparent; border-color: var(--border); }
@media (hover: hover) {
  .icon-btn:is(.fc-del, .cit-del):not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; }
}
.icon-btn:is(.fc-del, .cit-del):not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; }

.fc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 22px; }
.fc-mode { margin: 0; }
.fc-total { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fc-name { margin: 0 0 20px; }
.fc-heads, .fc-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.fc-heads .make-label { margin: 0 0 2px; }
.fc-rows { list-style: none; display: grid; gap: 8px; margin: 6px 0 0; padding: 0; }
.fc-row .input { padding: 11px 14px; }
.fc-num { font-family: var(--mono); font-size: 0.75rem; color: var(--faint); text-align: right; }
/* The blank row at the end is where the next card goes; nothing to remove. */
.fc-row:last-child .fc-del { visibility: hidden; }
.fc-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.fc-empty-help { margin: 14px 0 0; }
.fc-paste { min-height: 210px; font-family: var(--mono); font-size: 0.92rem; }
.fc-found { margin: 12px 0 0; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.fc-found.is-warn { color: var(--danger); }
.fc-paste-actions { margin-top: 16px; }

.fc-bar { display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.fc-bar span { width: 0; transition: width 320ms ease; }
.fc-bar-known { background: var(--fill); }
.fc-bar-again { background: var(--danger); opacity: 0.75; }
.fc-counts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; font-size: 0.86rem; color: var(--muted); }
.fc-counts b { font-variant-numeric: tabular-nums; color: var(--text); }
#fc-where { margin-right: auto; font-weight: 600; color: var(--text); }
.fc-counts .fc-known-n { color: var(--tint-text); }
.fc-counts .fc-again-n { color: var(--danger); }
.fc-stage { margin: 20px 0 0; perspective: 1400px; }
.fc-card {
  display: block; width: 100%; height: 300px; padding: 0; border: 0; border-radius: 22px;
  background: none; color: inherit; font: inherit; cursor: pointer; outline: none;
  transition: scale 160ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.fc-card:focus-visible { box-shadow: var(--focus-ring); }
.fc-card:active { scale: 0.985; }
.fc-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.34, 1.3, 0.64, 1); }
.fc-inner.is-flipped { transform: rotateY(180deg); }
.fc-inner.is-instant { transition: none; }
.fc-face {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 46px 34px;
  border-radius: 22px; border: 1px solid var(--border);
  background: linear-gradient(160deg, #2b2449, #1b1630 70%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: border-color 160ms ease, box-shadow 200ms ease;
}
.fc-back { transform: rotateY(180deg); border-color: var(--tint-border); background: linear-gradient(160deg, #3b2b72, #221a44 70%); }
.fc-side { position: absolute; top: 16px; left: 20px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); }
.fc-back .fc-side { color: var(--tint-text); }
.fc-tag { position: absolute; top: 13px; right: 16px; padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.fc-tag:empty { display: none; }
.fc-tag[data-mark="known"] { color: var(--fill-text); background: var(--fill); }
.fc-tag[data-mark="again"] { color: var(--danger); border: 1px solid currentColor; }
.fc-text { max-height: 100%; overflow: auto; font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: 1.22; text-align: center; overflow-wrap: anywhere; white-space: pre-wrap; }
.fc-text.is-long { font-size: 1.4rem; line-height: 1.35; }
.fc-text.is-longer { font-family: var(--body); font-size: 1.02rem; font-weight: 500; line-height: 1.55; }
.fc-text.is-blank { color: var(--faint); font-size: 1.1rem; font-weight: 500; }
@media (hover: hover) {
  .fc-card:hover .fc-face { border-color: var(--gold); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--gold); }
}
.fc-card.is-dealt-next { animation: fc-deal 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.fc-card.is-dealt-prev { animation: fc-deal 420ms cubic-bezier(0.34, 1.56, 0.64, 1); --from: -48px; }
@keyframes fc-deal { from { translate: var(--from, 48px) 0; opacity: 0; } }
.fc-hint { margin: 12px 0 0; text-align: center; font-size: 0.82rem; color: var(--faint); }
.fc-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 18px 0 0; }
.fc-controls .icon-btn:disabled { opacity: 0.35; cursor: default; }
.fc-done { margin: 20px 0 0; padding: 34px 20px; border-radius: 22px; text-align: center; background: var(--tint); border: 1px solid var(--tint-border); }
.fc-done-big { margin: 0; font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1.2; }
.fc-done-line { margin: 6px 0 0; color: var(--muted); }
.fc-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; }
.fc-study-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; }
.fc-shuffle { display: inline-flex; align-items: center; gap: 7px; }
.fc-nothing { margin: 8px 0 0; padding: 34px 20px; border-radius: 18px; border: 1px dashed var(--border); text-align: center; color: var(--muted); }
.fc-undo { margin-left: 4px; }

.cit-pick { display: flex; flex-wrap: wrap; gap: 0 28px; }
.cit-seg { margin: 0 0 20px; }
.cit-authors { min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.cit-authors legend { padding: 0; }
.cit-org-toggle { margin: 0 0 14px; }
.cit-name-heads, .cit-author { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.cit-name-heads .make-label { margin: 0 0 2px; }
.cit-author-rows { list-style: none; display: grid; gap: 8px; margin: 6px 0 12px; padding: 0; }
.cit-author .input, .cit-fields .input { padding: 11px 14px; }
.cit-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; margin: 24px 0 0; }
.cit-field { grid-column: span 3; min-width: 0; }
.cit-wide { grid-column: 1 / -1; }
.cit-third { grid-column: span 2; }
.cit-field .make-label { margin-bottom: 8px; }
.cit-date { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px; gap: 8px; }
.cit-month, .cit-month select { width: 100%; }
.cit-month select { font-weight: 500; padding: 11px 40px 11px 14px; }
.cit-accessed { min-height: 46px; }
.cit-result { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.cit-out {
  margin: 0; padding: 18px 20px 18px calc(20px + 1.6em); text-indent: -1.6em;
  border-radius: 14px; background: var(--tint); border: 1px solid var(--tint-border);
  font-size: 1.02rem; line-height: 1.65; overflow-wrap: anywhere;
}
.cit-out[data-empty] { padding-left: 20px; text-indent: 0; background: var(--surface-2); border-color: var(--border); }
.cit-placeholder { color: var(--faint); }
.cit-missing { margin: 10px 0 0; font-size: 0.84rem; color: var(--muted); }
.cit-missing:empty { display: none; }
.cit-list-wrap { margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); }
.cit-list-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cit-list-head { margin: 0; font-size: 1.25rem; }
.cit-list-count { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cit-list { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; }
.cit-item { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 12px; align-items: start; padding: 12px 12px 12px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.cit-entry { margin: 0; padding: 6px 0 0 1.6em; text-indent: -1.6em; font-size: 0.95rem; line-height: 1.6; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .fc-inner, .fc-card, .fc-bar span { transition: none; }
  .fc-card.is-dealt-next, .fc-card.is-dealt-prev { animation: none; }
}
@media (max-width: 560px) {
  .fc-heads, .fc-num { display: none; }
  .fc-rows { gap: 12px; }
  .fc-row { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "f d" "b d"; gap: 6px 8px; padding: 0 0 12px; border-bottom: 1px solid var(--border-soft); }
  .fc-row .fc-f { grid-area: f; }
  .fc-row .fc-b { grid-area: b; }
  .fc-row .fc-del { grid-area: d; }
  .fc-card { height: 250px; }
  .fc-face { padding: 42px 20px 26px; }
  .fc-text { font-size: 1.7rem; }
  .fc-text.is-long { font-size: 1.2rem; }
  .fc-controls { gap: 8px; }
  .fc-controls .btn { padding: 13px 8px; }
  .fc-hint { display: none; }
  .cit-pick { display: block; }
  .cit-seg .seg-btn { padding: 7px 12px; }
  .cit-field { grid-column: 1 / -1; }
  .cit-third { grid-column: span 2; }
  .cit-date { grid-template-columns: 74px minmax(0, 1fr) 62px; }
  .cit-out { font-size: 0.96rem; padding: 16px 16px 16px calc(16px + 1.6em); }
  .cit-item { padding-left: 14px; }
  .tool-flashcards .tool-actions .btn, .tool-citation-generator .tool-actions .btn { flex: 1 1 auto; padding-left: 14px; padding-right: 14px; }
  :is(#fc-status, #cit-status, #cit-list-status) { flex: 1 1 100%; margin: 0; text-align: left; }
  :is(#fc-status, #cit-status, #cit-list-status):empty { display: none; }
}

/* ------------------------------------------------------------ timers */
/* Stopwatch, countdown, Pomodoro and interval timers. The time is the
   biggest thing on the page, in the display face with even-width digits so
   it does not jitter as it counts. Controls are the shared .btn, .seg-btn,
   .icon-btn, .stepper and .toggle, so they lean and go gold like every other. */
.tm-display { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.tm-sub { margin: 10px 0 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tm-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 24px 0 0; }
.tm-controls .btn-ghost { min-width: 104px; }
.tm-go { min-width: 150px; font-size: 1.05rem; }
.tm-controls .btn:disabled { opacity: 0.45; cursor: default; }
.tm-keys { margin: 14px 0 0; text-align: center; font-size: 0.82rem; color: var(--muted); }
.tm-keys kbd { margin-right: 3px; }

/* Stopwatch */
.tm-face { padding: 26px 0 6px; text-align: center; }
.tm-display-sw { font-size: clamp(2.9rem, 12.5vw, 5.6rem); }
.tm-frac { font-size: 0.5em; color: var(--muted); margin-left: 2px; }
.tool-card.tm-is-running .tm-frac { color: var(--tint-text); }
.tm-laps { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); max-height: 380px; overflow-y: auto; }
.tm-lap-table thead th { position: sticky; top: 0; background: var(--surface); }
.tm-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font: 500 0.66rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; color: var(--muted); border: 1px solid var(--border); }
.tm-fast { background: var(--tint); }
.tm-fast .tm-tag { color: var(--fill-text); background: var(--fill); border-color: transparent; }

/* The ring around the time (countdown and Pomodoro) */
/* Ring and settings side by side, the buttons under both; on a phone the
   buttons come straight after the ring, before the settings. */
.tm-top { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); grid-template-areas: "ring side" "go go"; gap: 0 34px; align-items: center; }
.tm-top > .tm-ring-wrap { grid-area: ring; }
.tm-top > .tm-side { grid-area: side; }
.tm-top > .tm-controls { grid-area: go; }
.tm-top .tm-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tm-top .tm-presets .seg-btn { padding-left: 0; padding-right: 0; }
.tm-ring-wrap { position: relative; width: 100%; max-width: 290px; aspect-ratio: 1; margin: 0 auto; }
.tm-ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.tm-ring-track { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.tm-ring-bar { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1000; transition: stroke 300ms ease; }
.tm-ring-wrap[data-phase="short"] .tm-ring-bar, .tm-ring-wrap[data-phase="long"] .tm-ring-bar { stroke: var(--tint-text); }
.tm-ring-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.tm-ring-in .tm-display { font-size: 4.1rem; }
.tm-ring-in .tm-display.is-long { font-size: 3.1rem; }
.tm-ring-wrap.is-paused .tm-display { color: var(--muted); }
/* Time's up: the ring turns gold and breathes until it is reset. */
.tm-ring-wrap.is-done .tm-ring-bar { stroke: var(--gold); opacity: 1 !important; stroke-dashoffset: 0 !important; }
.tm-ring-wrap.is-done .tm-display, .tm-ring-wrap.is-done .tm-sub { color: var(--gold); }
.tm-ring-wrap.is-done .tm-ring { animation: tm-pulse 1.4s ease-in-out infinite; }
@keyframes tm-pulse { 50% { scale: 1.045; } }
@media (prefers-reduced-motion: reduce) { .tm-ring-wrap.is-done .tm-ring { animation: none; } }

.tm-side { min-width: 0; }
.tm-set { min-width: 0; margin: 0; padding: 0; border: 0; }
.tm-set > legend { float: left; width: 100%; padding: 0; }
.tm-set > legend + * { clear: both; }
.tm-set:disabled { opacity: 0.5; }
.tm-steps { display: grid; gap: 10px; }
.tm-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tm-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A stepper stood on its end: plus, the number, minus, then its name. */
.tm-vstep { flex-direction: column; align-items: stretch; gap: 6px; }
.stepper.tm-vstep .icon-btn { width: 100%; height: 36px; border-radius: 12px; }
.tm-vstep .stepper-input { width: 100%; padding: 9px 4px; font-size: 1.45rem; }
.tm-vstep .stepper-unit { text-align: center; font-size: 0.78rem; }
.tm-presets { margin: 16px 0 0; }
.tm-toggles { margin: 18px 0 0; }

/* Pomodoro */
.tm-phases { justify-content: center; margin: 0 0 26px; }
.tm-dots { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.tm-dots li { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border); }
.tm-dots li.is-done { background: var(--fill); border-color: transparent; }
.tm-dots li.is-current { border-color: var(--accent-strong); background: var(--tint); }
.tm-note { margin: 10px 0 20px; font-size: 0.88rem; color: var(--muted); }

/* Interval timer: the whole panel says the phase. Filled purple is work,
   pale is rest, so it reads from across a room. */
.tm-phase { padding: 26px 20px 22px; border-radius: 20px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); transition: background 300ms ease, border-color 300ms ease, color 300ms ease; }
.tm-phase-name { margin: 0; font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tm-phase .tm-display { margin: 8px 0 0; font-size: clamp(4.4rem, 20vw, 7.4rem); }
.tm-phase-meta { margin: 12px 0 0; font-size: 0.95rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tm-sep { opacity: 0.6; }
.tm-progress { height: 6px; margin: 18px 0 0; border-radius: 999px; background: rgba(0, 0, 0, 0.28); overflow: hidden; }
.tm-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); }
.tm-phase[data-phase="work"] { color: var(--fill-text); background: var(--fill); border-color: transparent; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.tm-phase[data-phase="work"] :is(.tm-phase-name, .tm-phase-meta) { color: rgba(255, 255, 255, 0.86); }
.tm-phase[data-phase="work"] .tm-progress span { background: #fff; }
.tm-phase[data-phase="rest"], .tm-phase[data-phase="done"] { background: var(--tint); border-color: var(--tint-border); }
.tm-phase[data-phase="rest"] .tm-phase-name, .tm-phase[data-phase="done"] .tm-phase-name { color: var(--tint-text); }
.tm-phase[data-phase="warm"] { border-style: dashed; border-color: var(--tint-border); }
.tm-iv-set { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.tm-iv-set .tm-presets { margin: 0 0 16px; }

@media (max-width: 700px) {
  .tm-top { grid-template-columns: 1fr; grid-template-areas: "ring" "go" "side"; }
  .tm-top > .tm-side { margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); }
  .tm-ring-wrap { max-width: 260px; }
  .tm-ring-in .tm-display { font-size: 3.6rem; }
  .tm-ring-in .tm-display.is-long { font-size: 2.7rem; }
}
@media (max-width: 540px) {
  .tm-controls { flex-wrap: nowrap; gap: 8px; }
  .tm-controls .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
  .tm-go { flex-grow: 1.4 !important; }
  .tm-steps { gap: 7px; }
  .tm-vstep .stepper-input { font-size: 1.25rem; }
  .tm-toggles { grid-template-columns: 1fr; }
  .tm-phase-name { font-size: 1.4rem; }
}

/* ------------------------------------------------------------ video editor */
/* Video Editor (ve-): the preview with a crop box over it, a strip of frames
   with trim handles and a playhead, the options, then two ways out (a video
   or a GIF), each in its own panel. Buttons are the shared .btn, .seg-btn and
   .icon-btn; the trim handles fill gold under the pointer and the crop box
   takes a gold ring, like the other large surfaces you can press. */
.ve-limit { margin: 0 0 18px; }
.ve-app.is-dragover .ve-work { border-color: var(--accent-strong); }
.ve-work { text-align: left; }
.ve-frame {
  --ar: 1.7778;
  position: relative;
  width: min(100%, calc(min(56vh, 440px) * var(--ar)));
  aspect-ratio: var(--ar);
  margin: 20px auto 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
}
.ve-frame video, .ve-frame canvas { display: block; width: 100%; height: 100%; object-fit: fill; cursor: pointer; }
.ve-crop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ve-crop-box {
  position: absolute;
  pointer-events: auto;
  cursor: move;
  touch-action: none;
  outline: none;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(14, 11, 24, 0.72);
  background:
    linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.32) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.67% - 0.5px), rgba(255, 255, 255, 0.32) calc(66.67% - 0.5px) calc(66.67% + 0.5px), transparent calc(66.67% + 0.5px)),
    linear-gradient(180deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.32) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.67% - 0.5px), rgba(255, 255, 255, 0.32) calc(66.67% - 0.5px) calc(66.67% + 0.5px), transparent calc(66.67% + 0.5px));
  transition: border-color 140ms ease;
}
.ve-crop-box:focus-visible { box-shadow: var(--focus-ring), 0 0 0 9999px rgba(14, 11, 24, 0.72); }
.ve-crop-box.is-dragging { border-color: var(--gold); }
.ve-crop-corner {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: #fff;
  cursor: nwse-resize;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: background-color 140ms ease, transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.ve-crop-box.is-dragging .ve-crop-corner { background: var(--gold); }
.ve-preview-note { margin: 10px 0 0; text-align: center; font-size: 0.84rem; color: var(--muted); }

.ve-transport { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; }
.ve-play { width: 44px; height: 44px; }
.ve-play svg { width: 20px; height: 20px; }
.ve-play .ve-icon-play, .ve-play .ve-icon-pause { display: grid; place-items: center; }
.ve-play .ve-icon-pause, .ve-app.is-playing .ve-play .ve-icon-play { display: none; }
.ve-app.is-playing .ve-play .ve-icon-pause { display: grid; }
.ve-clock { margin: 0; font-family: var(--mono); font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ve-clock-of { color: var(--muted); }
.ve-kept { margin: 0 0 0 auto; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.02em; color: var(--tint-text); text-align: right; }

/* The strip of frames. The handles sit just outside the part you keep, so
   the strip leaves room for them at either end. */
.ve-timeline { position: relative; height: 64px; margin: 14px 16px 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.ve-strip { position: absolute; inset: 4px 0; display: flex; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.ve-thumb { flex: 1 1 0; min-width: 0; overflow: hidden; }
.ve-thumb:not(.is-drawn) {
  background: linear-gradient(110deg, #2b2448 30%, #3b3263 50%, #2b2448 70%) 0 0 / 220% 100%;
  animation: sheet-wait 1.3s linear infinite;
}
.ve-thumb + .ve-thumb { border-left: 1px solid rgba(14, 11, 24, 0.5); }
.ve-thumb canvas { display: block; width: 100%; height: 100%; object-fit: cover; animation: fade-in 260ms ease; }
.ve-shade { position: absolute; top: 4px; bottom: 4px; background: rgba(14, 11, 24, 0.7); pointer-events: none; }
.ve-shade.is-before { left: 0; border-radius: 6px 0 0 6px; }
.ve-shade.is-after { border-radius: 0 6px 6px 0; }
.ve-sel { position: absolute; top: 0; bottom: 0; border-top: 4px solid var(--accent); border-bottom: 4px solid var(--accent); pointer-events: none; }
.ve-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--accent);
  cursor: ew-resize;
  touch-action: none;
  outline: none;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 160ms ease;
}
.ve-handle.is-in { transform: translateX(-100%); border-radius: 8px 0 0 8px; }
.ve-handle.is-out { border-radius: 0 8px 8px 0; }
.ve-handle span { width: 3px; height: 22px; border-radius: 2px; background: currentColor; opacity: 0.85; }
.ve-handle:focus-visible { box-shadow: var(--focus-ring); }
.ve-timeline.is-dragging-in .ve-handle.is-in, .ve-timeline.is-dragging-out .ve-handle.is-out, .ve-handle:active { color: var(--bg); background: var(--gold); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
.ve-head { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); pointer-events: none; outline: none; }
.ve-head::before { content: ""; position: absolute; top: -5px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.ve-head:focus-visible::before { box-shadow: var(--focus-ring); }
.ve-app.is-busy .ve-timeline, .ve-app.is-busy .ve-crop-box { pointer-events: none; opacity: 0.7; }

.ve-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 22px 0 0; }
.ve-time-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; }
.ve-time-field .make-label { grid-column: 1 / -1; margin: 0; }
.ve-time-input { padding: 10px 14px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ve-time-hint { grid-column: 1 / -1; margin: -4px 0 0; font-size: 0.8rem; color: var(--faint); }

.ve-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.ve-opt .make-label { margin-bottom: 8px; }
.ve-opt .seg, .ve-out .seg { margin: 0; }
.ve-seg .seg-btn:disabled { opacity: 0.4; cursor: default; }
.ve-mute { padding: 8px 12px; }
.ve-note { margin: 18px 0 0; font-size: 0.86rem; color: var(--gold); }

.ve-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; }
.ve-out { display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.ve-out-head { margin: 0 0 14px; font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.ve-out .seg { margin-bottom: 16px; }
.ve-out .range { margin: 4px 0 2px; }
.ve-q-ends { display: flex; justify-content: space-between; margin: 0; font-size: 0.76rem; color: var(--faint); }
.ve-est { margin: 10px 0 16px; font-family: var(--mono); font-size: 0.76rem; line-height: 1.55; color: var(--muted); }
.ve-est.is-warn { color: var(--gold); }
.ve-go { width: 100%; margin-top: auto; }
.ve-go:disabled { opacity: 0.55; cursor: default; transform: none; }

.ve-progress { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; }
.ve-progress .progress { flex: 1; min-width: 0; margin: 0; }

.ve-result { margin: 18px 0 0; }
.ve-result video, .ve-result img { display: block; max-width: 100%; max-height: 340px; margin: 0 auto; border-radius: 12px; background: #000; border: 1px solid var(--border); }
.ve-done-note { color: var(--gold); }

@media (hover: hover) {
  .ve-handle:hover { color: var(--bg); background: var(--gold); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
  .ve-crop-box:hover { border-color: var(--gold); }
  .ve-crop-corner:hover { background: var(--gold); transform: scale(1.15); }
}
@media (pointer: coarse) {
  .ve-timeline { margin-left: 22px; margin-right: 22px; }
  .ve-handle { width: 22px; }
  .ve-crop-corner { width: 28px; height: 28px; right: -14px; bottom: -14px; border-radius: 9px; }
}
@media (max-width: 600px) {
  .ve-times, .ve-opts, .ve-outs { grid-template-columns: minmax(0, 1fr); }
  .ve-transport { flex-wrap: wrap; gap: 10px 14px; }
}

/* ------------------------------------------------------------ social media tools */
/* Social Media Tools (sm-) bring their own cards. Controls are the shared
   .seg, .range, .toggle, .input, .btn and .icon-btn, so they lean and go gold
   like every other; the colour wells are surfaces you press, and go gold
   under the pointer too. */
.sm-pane { text-align: left; }
.sm-range-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 0; }
.sm-range-label output { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }

/* Social Media Tools: the modes, then a stage beside its settings. */
.sm-modes { margin: 0 0 18px; }
.sm-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 290px); gap: 28px; align-items: start; }
.sm-stage { display: grid; place-items: center; min-width: 0; }
.sm-drop { display: flex; flex-direction: column; justify-content: center; min-height: 220px; max-width: 100%; padding: 20px 16px; }
.sm-drop .glyphs { margin-bottom: 14px; }
.sm-drop .primary-line { font-size: 1.15rem; }
.sm-drop .secondary-line { line-height: 1.5; }
.sm-canvas { display: block; max-width: 100%; border-radius: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); outline: none; }
.sm-canvas:focus-visible { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), var(--focus-ring); }
.sm-canvas.is-draggable, .sm-pf-canvas { cursor: grab; touch-action: none; }
.sm-canvas.is-dragging { cursor: grabbing; }
.sm-pf-canvas { border-radius: 10px; }
.sm-side { min-width: 0; }
.sm-side .seg { margin: 0 0 18px; }
.sm-opt { margin: 0 0 14px; }
.sm-opt .make-help { margin: 2px 0 0; }
.sm-bg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.sm-bg-row .seg { margin: 0; }
.sm-grow { flex: 1 1 140px; min-width: 0; }
.sm-toggles { grid-template-columns: 1fr; margin: 4px 0 18px; }
.sm-gap { margin-top: 4px; }
.sm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-actions .btn { flex: 1 1 auto; }
.sm-actions .btn:disabled { opacity: 0.5; cursor: default; }
.sm-side .save-status:empty { display: none; }

/* A colour well: a real colour input over a swatch and its hex. */
.sm-color { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: border-color 140ms ease; }
.sm-color input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.sm-color:focus-within { box-shadow: var(--focus-ring); }
.sm-color-swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--swatch, #000); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.sm-color-text { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); text-transform: uppercase; }

.sm-circles { display: flex; align-items: flex-end; gap: 16px; margin: 0 0 20px; }
.sm-circle { display: block; border-radius: 50%; background: var(--surface-2); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.sm-circle-big { width: 96px; height: 96px; }
.sm-circle-mid { width: 48px; height: 48px; }
.sm-circle-small { width: 32px; height: 32px; }

.sm-text { min-height: 170px; }
.sm-length { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.sm-limits .sm-used { font-variant-numeric: tabular-nums; }
.sm-ig { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sm-ig b { font-weight: 700; }
.sm-ig .is-empty { color: var(--faint); }
.sm-ig-more { color: var(--muted); }
.sm-ig-more span { color: var(--faint); }

@media (hover: hover) {
  .sm-color:hover { border-color: var(--gold); }
}

@media (max-width: 700px) {
  .sm-layout { grid-template-columns: 1fr; gap: 22px; }
  .sm-length { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ audio editor and music tools */
/* Audio Editor (ae-): the PDF tools' drop zone, then one work card: the
   waveform with a handle at each end of the selection, the times, the
   changes, the format, then a .pdf-done card. Music Tools (mu-): a .seg of
   modes, each a pane; the big numbers are in the display face with even
   digits. The tap pad and the waveform's handles are the two new things to
   press: the pad takes a gold border (it is a large surface), the handles'
   grips fill gold. */
.ae-app.is-dragover .ae-work { border-color: var(--accent-strong); }
.ae-work { text-align: left; }
.ae-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; }
.ae-file { flex: 1 1 260px; min-width: 0; }
.ae-name { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-summary { margin: 3px 0 0; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }

.ae-wave { position: relative; height: 168px; border-radius: 16px; background: var(--bg-deep); border: 1px solid var(--border); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.ae-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.ae-shade { position: absolute; top: 0; bottom: 0; background: rgba(14, 11, 24, 0.55); pointer-events: none; }
.ae-shade-l { left: 0; border-radius: 15px 0 0 15px; }
.ae-shade-r { right: 0; border-radius: 0 15px 15px 0; }
.ae-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); pointer-events: none; z-index: 1; }
.ae-handle { position: absolute; top: -8px; bottom: -8px; width: 24px; margin-left: -12px; z-index: 2; cursor: ew-resize; touch-action: none; outline: none; }
.ae-handle::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 11px; width: 2px; border-radius: 2px; background: var(--accent-strong); transition: background 140ms ease; }
.ae-handle span { position: absolute; top: 50%; left: 4px; width: 16px; height: 38px; margin-top: -19px; border-radius: 8px; background: var(--fill); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: background 140ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.ae-handle span::after { content: ""; position: absolute; top: 12px; bottom: 12px; left: 5px; width: 6px; border-left: 1.5px solid rgba(255, 255, 255, 0.7); border-right: 1.5px solid rgba(255, 255, 255, 0.7); }
.ae-handle:focus-visible span { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), var(--focus-ring); }
.ae-handle.is-dragging span, .ae-handle:active span { background: var(--gold); transform: scaleY(1.08); }
.ae-handle.is-dragging::before, .ae-handle:active::before { background: var(--gold); }
.ae-handle.is-dragging span::after, .ae-handle:active span::after { border-color: rgba(20, 17, 32, 0.6); }
.ae-ruler { position: relative; height: 18px; margin: 8px 0 0; font-family: var(--mono); font-size: 0.68rem; color: var(--faint); overflow: hidden; }
.ae-ruler span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; }
.ae-ruler span:first-child { translate: 0 0; }

.ae-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
.ae-play { display: inline-flex; align-items: center; gap: 8px; }
.ae-play svg { width: 16px; height: 16px; }
.ae-clock { margin: 0 0 0 auto; font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--text); }

.ae-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px 14px; margin: 22px 0 0; }
.ae-time .make-label { margin-bottom: 8px; }
.ae-time .input { padding: 10px 12px; font-family: var(--mono); font-size: 0.92rem; }
.ae-length { margin: 0; padding: 10px 0; font-family: var(--mono); font-size: 0.92rem; line-height: 1.2; color: var(--text); white-space: nowrap; }
.ae-length small { display: block; margin: 2px 0 -16px; font-size: 0.74rem; color: var(--tint-text); }
.ae-silence { margin-bottom: 3px; }
.ae-status { margin: 12px 0 0; font-size: 0.86rem; color: var(--gold); }
.ae-status:empty { display: none; }

.ae-grid, .ae-export { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 30px; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); }
.ae-opt { min-width: 0; }
.ae-opt .seg { margin: 0; }
.ae-opt .make-help { font-size: 0.82rem; }
.ae-num { display: flex; align-items: center; gap: 10px; }
.ae-num .input { flex: 0 1 120px; min-width: 0; padding: 10px 12px; }
.ae-num span { color: var(--muted); font-size: 0.9rem; }
.ae-range-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ae-range-label output { font-family: var(--mono); color: var(--text); letter-spacing: 0; text-transform: none; }
.ae-inline { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
#ae-peak.is-warn { color: var(--danger); }
.ae-work .seg-btn:disabled { opacity: 0.45; cursor: default; }
.ae-work .btn:disabled { opacity: 0.5; cursor: default; }
.ae-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.ae-done-audio { display: block; width: 100%; max-width: 420px; margin: 18px auto 0; }

@media (hover: hover) {
  .ae-handle:hover span { background: var(--gold); transform: scaleY(1.08); }
  .ae-handle:hover::before { background: var(--gold); }
  .ae-handle:hover span::after { border-color: rgba(20, 17, 32, 0.6); }
  .mu-tap:hover { border-color: var(--gold); }
}

@media (max-width: 600px) {
  .ae-wave { height: 132px; }
  .ae-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ae-silence { justify-self: end; }
  .ae-wide { display: none; }
  .ae-transport .btn { padding: 12px 18px; }
  .ae-clock { font-size: 0.95rem; }
  .ae-grid { gap: 22px 16px; }
  .ae-grid .ae-full { grid-column: 1 / -1; }
  .ae-export { grid-template-columns: 1fr; gap: 22px; }
  .ae-actions .btn { flex: 1 1 0; }
}

/* Music Tools */
.mu-modes { margin: 0 0 28px; }
.mu-tempo, .mu-freq-row { text-align: center; }
.mu-bpm-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.mu-bpm, .mu-freq { display: inline-flex; flex-direction: column; align-items: center; cursor: text; }
.mu-bpm-input, .mu-freq-input { width: 3.3ch; padding: 0 0 2px; font: 700 clamp(3.6rem, 13vw, 5.4rem)/1 var(--display); font-variant-numeric: tabular-nums; text-align: center; color: var(--text); background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; outline: none; transition: border-color 140ms ease; }
.mu-freq-input { width: 5.4ch; font-size: clamp(3rem, 11vw, 4.6rem); }
.mu-bpm-input:hover, .mu-freq-input:hover { border-bottom-color: var(--border); }
.mu-bpm-input:focus-visible, .mu-freq-input:focus-visible { border-bottom-color: var(--accent); }
.mu-bpm-unit { margin: 6px 0 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--muted); }
.mu-tempo-name { margin: 10px 0 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tint-text); }
.mu-tempo .range, #mu-freq-range { display: block; max-width: 520px; margin: 18px auto 0; }
.mu-bpm-row .icon-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.mu-dots { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 30px 0 0; padding: 0; }
.mu-dots li { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); transition: background-color 70ms ease, transform 90ms ease, border-color 70ms ease; }
.mu-dots li.is-one { width: 30px; height: 30px; border-color: var(--tint-border); }
.mu-dots li.is-strong { border-color: var(--tint-border); }
.mu-dots li.is-on { background: var(--accent-strong); border-color: transparent; transform: scale(1.18); }
.mu-dots li.is-one.is-on { background: var(--fill); }
.mu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; }
.mu-go { min-width: 150px; font-size: 1.05rem; }
.mu-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); }
.mu-opt { min-width: 0; }
.mu-opt .seg { margin: 0; }
.mu-opt > .make-label, .ae-opt > .make-label { margin-top: 0; }
.mu-opts-wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.mu-opt .stepper .icon-btn { width: 42px; height: 42px; }
.mu-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 20px 30px; margin: 22px 0 0; }
.mu-vol .make-label { margin-bottom: 4px; }
.mu-actions-end { justify-content: flex-end; margin: 0; }
.mu-keys { margin: 22px 0 0; text-align: center; font-size: 0.82rem; color: var(--muted); }
.mu-keys kbd { margin-right: 2px; }
.mu-pane > .make-help { margin-top: 18px; }

.mu-tap { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 250px; padding: 28px 20px; font: inherit; color: var(--text); background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 24px; cursor: pointer; outline: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: border-color 140ms ease, transform 140ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.mu-tap:focus-visible { box-shadow: var(--focus-ring); }
.mu-tap:active { border-color: var(--gold); transform: scale(0.985); }
.mu-tap.is-hit { animation: mu-hit 240ms ease-out; }
@keyframes mu-hit { from { background-color: var(--tint-strong); } }
.mu-tap-bpm { font: 700 clamp(4rem, 16vw, 6.4rem)/1 var(--display); font-variant-numeric: tabular-nums; transition: color 200ms ease; }
.mu-tap.is-idle .mu-tap-bpm { color: var(--muted); }
.mu-tap-unit { margin: 6px 0 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--muted); }
.mu-tap-hint { margin: 16px 0 0; font-size: 0.92rem; color: var(--muted); }
.mu-tap-meta { margin: 14px 0 0; text-align: center; font-size: 0.86rem; color: var(--muted); }

.mu-dial { max-width: 380px; margin: 0 auto; }
.mu-dial-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mu-arc { fill: none; stroke: var(--surface-2); stroke-width: 10; stroke-linecap: round; }
.mu-arc-ok { fill: none; stroke: var(--tint-border); stroke-width: 10; transition: stroke 160ms ease; }
.mu-tick { stroke: var(--faint); stroke-width: 1.5; stroke-linecap: round; }
.mu-tick.is-long { stroke: var(--muted); stroke-width: 2; }
.mu-needle { transform-box: view-box; transform-origin: 100px 104px; transition: transform 140ms ease-out, opacity 200ms ease; }
.mu-needle line { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.mu-needle circle { fill: var(--text); }
.mu-dial:is([data-state="idle"], [data-state="listening"], [data-state="denied"]) .mu-needle { opacity: 0.3; }
.mu-dial[data-state="ok"] .mu-arc-ok { stroke: var(--accent-strong); }
.mu-dial[data-state="ok"] .mu-needle line { stroke: var(--accent-strong); }
.mu-dial[data-state="ok"] .mu-needle circle { fill: var(--accent-strong); }
.mu-readout { margin: -4px 0 0; text-align: center; }
.mu-note { margin: 0; font: 700 clamp(3.4rem, 12vw, 4.6rem)/1 var(--display); }
.mu-note sub { margin-left: 2px; font-size: 0.42em; color: var(--muted); vertical-align: baseline; }
.mu-dial[data-state="ok"] .mu-note { color: var(--tint-text); }
.mu-cents { margin: 10px 0 0; font-family: var(--mono); font-size: 0.86rem; color: var(--muted); }
.mu-dial[data-state="ok"] .mu-cents { color: var(--tint-text); }
.mu-hz { margin: 4px 0 0; font-family: var(--mono); font-size: 0.76rem; color: var(--faint); }
.mu-tuner-msg { margin: 18px 0 0; text-align: center; font-size: 0.92rem; color: var(--muted); }
.mu-dial[data-state="denied"] + .mu-tuner-msg { color: var(--danger); }
.mu-strings { margin: 24px 0 0; }
.mu-strings-hint { margin-left: 6px; font-family: var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.mu-string-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mu-string { display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--display); font-size: 1rem; }
.mu-string sub { font-size: 0.7em; vertical-align: baseline; }
.mu-string-n { font: 500 0.68rem var(--mono); color: var(--faint); }
.mu-string.is-near { color: var(--fill-text); background: var(--fill); border-color: transparent; }
.mu-string.is-near .mu-string-n { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 600px) {
  .mu-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mu-opts, .mu-opts-wide, .mu-row2 { grid-template-columns: 1fr; }
  #mu-sig, #mu-sub { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #mu-sub { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :is(#mu-sig, #mu-sub) .seg-btn { padding-left: 2px; padding-right: 2px; }
  #mu-sub .seg-btn { font-size: 0.76rem; }
  .mu-actions-end { justify-content: stretch; }
  .mu-actions-end .btn { flex: 1; }
  .mu-tap { min-height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .mu-needle, .mu-dots li { transition: none; }
}

/* ------------------------------------------------------------ minecraft: enchanting order and MOTD */
/* Enchanting Order (mc-ench-): the item and its anvil uses, a row per
   enchantment (a tick, its level, its cost from a book), then the answer in a
   tinted panel: the total, and each anvil job as left slot + right slot. */
.mc-ench-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: end; }
.mc-ench-field { min-width: 0; }
.mc-ench-select, .mc-ench-select select { width: 100%; }
.mc-ench-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 8px; }
.mc-ench-head .make-label { margin: 0; }
.mc-ench-list { list-style: none; margin: 0; padding: 0; }
.mc-ench-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(92px, auto); align-items: center; gap: 8px 14px; padding: 8px 10px; border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; transition: background-color 160ms ease; }
.mc-ench-row:last-child { border-bottom: none; }
.mc-ench-row.is-on { background: rgba(139, 92, 246, 0.08); }
.mc-ench-row .check-chip { justify-self: start; }
.mc-ench-row .seg { margin: 0; flex-wrap: nowrap; grid-column: 2; }
.mc-ench-row .seg-btn { min-width: 38px; padding-left: 8px; padding-right: 8px; }
.mc-ench-row .seg-btn:disabled { opacity: 0.35; cursor: default; }
.mc-ench-row .mc-ench-why { grid-column: 3; margin: 0; text-align: right; }
.mc-ench-why { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--faint); }
.mc-ench-row.is-off .mc-ench-why { color: var(--muted); }
.mc-ench-row.is-off .seg { visibility: hidden; }
.mc-ench-msg { margin: 10px 0 0; color: var(--danger); }
.mc-ench-msg:empty { display: none; }

.mc-ench-panel { margin: 24px 0 0; padding: 24px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border); }
.mc-ench-sum { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 30px; }
.mc-ench-sum .make-label { margin-bottom: 4px; }
.mc-ench-big { margin: 0; font-family: var(--display); font-size: 3rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mc-ench-facts { display: grid; grid-template-columns: auto auto; gap: 6px 18px; margin: 0; font-size: 0.9rem; }
.mc-ench-facts dt { color: var(--muted); }
.mc-ench-facts dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-ench-note { margin: 16px 0 0; font-size: 0.88rem; color: var(--muted); }
.mc-ench-note.is-warn { padding: 12px 14px; border-radius: 12px; color: var(--text); border: 1px solid rgba(232, 180, 79, 0.35); background: rgba(232, 180, 79, 0.07); }
.mc-ench-steps { list-style: none; margin: 16px 0 0; padding: 0; }
.mc-ench-step { padding: 16px 0; border-top: 1px solid var(--tint-border); }
.mc-ench-step:last-child { padding-bottom: 0; }
.mc-ench-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; }
.mc-ench-n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tint-text); }
.mc-ench-cost { font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-ench-run { margin-left: auto; font-size: 0.86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-ench-step.is-dear .mc-ench-cost { color: var(--danger); }
.mc-ench-slots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.mc-ench-slot { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.mc-ench-side { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.mc-ench-thing { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.mc-ench-thing.is-item { color: var(--tint-text); }
.mc-ench-slot small { font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.mc-ench-plus { align-self: center; font-family: var(--display); font-size: 1.3rem; color: var(--muted); }
.mc-ench-step > .mc-ench-why { margin: 8px 0 0; }
@media (max-width: 600px) {
  .mc-ench-top { grid-template-columns: 1fr; }
  .mc-ench-row { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 4px; }
  .mc-ench-row .mc-ench-why { grid-column: 2; grid-row: 1; max-width: 9.5rem; }
  .mc-ench-row .seg { grid-column: 1 / -1; grid-row: 2; }
  .mc-ench-row.is-off .seg { display: none; }
  .mc-ench-panel { padding: 20px 16px; }
  .mc-ench-big { font-size: 2.4rem; }
  .mc-ench-slots { grid-template-columns: 1fr; gap: 6px; }
  .mc-ench-plus { justify-self: center; line-height: 1; }
}

/* MOTD Generator (mc-motd-): code buttons that insert at the caret, two
   lines, a dark preview in the site's own mono font with the game's colours,
   a width meter per line, then the message written out four ways. */
.mc-motd-colors, .mc-motd-formats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin: 0 0 18px; }
.mc-motd-formats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mc-motd-code { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 4px; font-family: var(--mono); }
.mc-motd-code b { font-weight: 800; }
.mc-motd-f-o b { font-style: italic; }
.mc-motd-f-n b { text-decoration: underline; }
.mc-motd-f-m b { text-decoration: line-through; }
.mc-motd-f-r b { font-weight: 600; }
.mc-motd-f-r .mc-motd-fname { display: none; }
.mc-motd-fname { font-family: var(--body); font-weight: 500; font-size: 0.78rem; }
.mc-motd-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); vertical-align: -1px; }
.figures .mc-motd-dot { margin-right: 8px; }
.mc-motd-lines { margin: 4px 0 0; }
.mc-motd-field + .mc-motd-field { margin-top: 14px; }
.mc-motd-in { font-family: var(--mono); font-size: 0.95rem; }
.mc-motd-hex-toggle { margin: 22px 0 0; }
.mc-motd-hex { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 12px 0 0; }
.mc-motd-hex .make-help { flex-basis: 100%; margin: 0; }
.mc-motd-plabel, .mc-motd-olabel { margin-top: 26px; }
.mc-motd-preview { padding: 16px 20px; border-radius: 14px; background: #0a0812; border: 1px solid var(--border); overflow-x: auto; }
.mc-motd-line { margin: 0; font-family: var(--mono); font-size: 1rem; line-height: 1.65; white-space: pre; }
.mc-motd-meters { margin: 12px 0 0; }
.mc-motd-meters .wc-left { font-variant-numeric: tabular-nums; }
.mc-motd-outs { margin: 0; }
.mc-motd-outs .cp-format { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
.mc-motd-outs .cp-format code { grid-column: 1 / -1; grid-row: 2; font-size: 0.86rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-motd-out-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.mc-motd-out-help { font-size: 0.8rem; color: var(--faint); }
.mc-motd-ref { margin-top: 24px; }
.mc-motd-table code { font-family: var(--mono); font-size: 0.84rem; }
.mc-motd-table th code + code { margin-left: 6px; color: var(--muted); }
@media (max-width: 600px) {
  .mc-motd-colors { gap: 5px; }
  .mc-motd-code { gap: 4px; padding: 7px 2px; font-size: 0.78rem; }
  .mc-motd-dot { width: 10px; height: 10px; }
  .mc-motd-fname { display: none; }
  .mc-motd-f-r .mc-motd-fname { display: none; }
  .mc-motd-preview { padding: 14px; }
  .mc-motd-line { font-size: 0.82rem; }
  .mc-motd-json-col { display: none; }
  .mc-motd-table th, .mc-motd-table td { padding: 8px 6px; }
}

/* ------------------------------------------------------------ minecraft: nether portal and stack calculators */
/* Both lay out like the tip calculator (.tip-grid, .tip-panel, .tip-lines);
   these are only the parts it does not have. */
.mc-np-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 22px; }
.mc-np-top .seg { margin: 0; }
.mc-np-inputs .affix + .affix { margin-top: 10px; }
.mc-np-axis > span { font-family: var(--mono); font-size: 0.82rem; color: var(--accent-strong); }
.mc-np-big { font-size: 2.6rem; overflow-wrap: anywhere; }
.mc-np-big span { white-space: nowrap; }
.mc-np-big.is-long { font-size: 1.9rem; }
.mc-np-land, .mc-np-link { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-np-steps { margin: 0; padding: 0 0 0 20px; display: grid; gap: 8px; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.mc-np-steps b { color: var(--text); }
.mc-np-link-help { margin: 0 0 16px; }
.mc-np-pair { display: grid; gap: 12px; }
.mc-np-portal { min-width: 0; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: rgba(29, 24, 50, 0.5); }
.mc-np-portal .tip-label-row { margin: 0 0 12px; }
.mc-np-xyz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1fr); gap: 8px; }
.mc-np-xyz .affix-input { min-width: 0; padding-left: 28px; padding-right: 8px; font-size: 1rem; }
.mc-np-xyz .affix > span { left: 11px; }
.mc-np-verdict { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); font-weight: 600; line-height: 1.5; }
.mc-np-verdict:empty { display: none; }
.mc-np-verdict.is-yes { background: var(--tint); border-color: var(--tint-border); color: var(--tint-text); }
.mc-np-trips { margin: 14px 0 0; padding: 0 0 0 20px; display: grid; gap: 12px; font-size: 0.92rem; line-height: 1.55; }
.mc-np-trips li::marker { font-family: var(--mono); color: var(--faint); }
.mc-np-trips p { margin: 0; }
.mc-np-where { color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-np-trip-out { color: var(--muted); }
.mc-np-trip-out.is-hit { color: var(--tint-text); }

.mc-stk-size { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 28px; margin: 0 0 24px; }
.mc-stk-size .seg { margin: 0; }
.mc-stk-size .make-label { margin-top: 0; }
.mc-stk-size .seg-btn { min-width: 52px; }
.mc-stk-pick { flex: 1 1 240px; min-width: 0; }
.mc-stk-pick .format-select, .mc-stk-pick select { width: 100%; }
.mc-stk-pick select { padding-top: 9px; padding-bottom: 9px; font-size: 0.92rem; text-overflow: ellipsis; }
.mc-stk-count { font-family: var(--display); font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-stk-fields { display: grid; gap: 14px; }
.mc-stk-field .make-label { margin-bottom: 6px; }
.mc-stk-field .stepper .icon-btn { width: 42px; height: 42px; }
.mc-stk-field .stepper-input { width: auto; flex: 1; min-width: 0; max-width: 160px; }
.mc-stk-big { font-size: 2.4rem; }
.mc-stk-n { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  #np-dir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  #np-dir .seg-btn { padding-left: 6px; padding-right: 6px; font-size: 0.8rem; }
  .mc-np-xyz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "x z" "y y"; }
  .mc-np-xyz > :nth-child(1) { grid-area: x; }
  .mc-np-xyz > :nth-child(2) { grid-area: y; }
  .mc-np-xyz > :nth-child(3) { grid-area: z; }
  .mc-np-big { font-size: 2.1rem; }
  .mc-np-big.is-long { font-size: 1.6rem; }
  .mc-stk-big { font-size: 2rem; }
}

/* ------------------------------------------------------------ minecraft circle generator */
.mc-circ-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.mc-circ-opt .seg { margin: 0; }
.mc-circ-sizes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 18px 32px; }
.mc-circ-size .stepper .icon-btn { width: 44px; height: 44px; }
.mc-circ-layer { margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-circ-layer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mc-circ-layer-head .make-label { margin: 0; }
.mc-circ-layer-of { margin: 0; font-family: var(--mono); font-size: 0.84rem; color: var(--text); font-variant-numeric: tabular-nums; }
.mc-circ-layer-row { display: flex; align-items: center; gap: 14px; margin: 10px 0 0; }
.mc-circ-layer-row .range { flex: 1; min-width: 0; }
.mc-circ-layer-row .icon-btn { width: 44px; height: 44px; }
.mc-circ-layer-row .icon-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.mc-circ-below-toggle { margin: 14px 0 0; }
.mc-circ-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 0; }
.mc-circ-stats .stat { align-content: start; }
.mc-circ-stats .stat:nth-child(3) { background: var(--surface-2); border-color: var(--border); }
.mc-circ-sub { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); min-height: 1.2em; }
.mc-circ-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.mc-circ-readout { flex: 1; min-width: 0; margin: 0; font-family: var(--mono); font-size: 0.78rem; line-height: 1.45; color: var(--muted); min-height: 2.9em; display: flex; align-items: center; }
.mc-circ-zoom { display: flex; align-items: center; gap: 6px; flex: none; }
.mc-circ-zoom .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
.mc-circ-zoom .icon-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.mc-circ-zoom .btn-small { padding: 9px 14px; }
.mc-circ-view { overflow: auto; max-height: min(74vh, 780px); padding: 10px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); overscroll-behavior: contain; }
.mc-circ-canvas { display: block; margin: 0 auto; cursor: pointer; outline: none; border-radius: 4px; touch-action: manipulation; }
.mc-circ-canvas:focus-visible { box-shadow: var(--focus-ring); }
.mc-circ-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; font-size: 0.8rem; color: var(--muted); }
.mc-circ-legend li { display: inline-flex; align-items: center; gap: 7px; }
.mc-circ-key { width: 14px; height: 14px; border-radius: 3px; background: var(--surface); }
.mc-circ-key.is-block { background: rgba(139, 92, 246, 0.62); }
.mc-circ-key.is-placed { background: var(--accent-strong); }
.mc-circ-key.is-below { background: rgba(237, 234, 246, 0.13); }
.mc-circ-key.is-centre { background: transparent; border: 2px solid var(--text); }
.btn.mc-circ-clear:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) {
  .btn.mc-circ-clear:not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; }
}
.btn.mc-circ-clear:not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; }
@media (max-width: 600px) {
  .mc-circ-opts { grid-template-columns: 1fr; gap: 18px; }
  .mc-circ-sizes { gap: 18px 20px; }
  .mc-circ-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-circ-stats .stat:nth-child(3) { grid-column: 1 / -1; }
  .mc-circ-stats .stat-num { font-size: 1.3rem; }
  .mc-circ-bar { flex-direction: column-reverse; align-items: stretch; }
  .mc-circ-zoom { justify-content: flex-end; }
  .mc-circ-view { padding: 6px; max-height: 70vh; }
  .tool-actions #mc-circ-download { flex: 1 1 100%; }
  .tool-actions #mc-circ-copy, .tool-actions #mc-circ-clear { flex: 1 1 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
  .mc-circ-sub { font-size: 0.7rem; }
  #mc-circ-status:empty { display: none; }
}
/* ------------------------------------------------------------ minecraft: gradient text, server.properties and start script */
/* Gradient Text (mc-grad-): the text, a strip of the gradient over a list of
   colour stops (a colour well, its hex, arrows to reorder, remove), preset
   chips, then a dark preview and the outputs as copy rows like the MOTD
   Generator's. */
.mc-grad-in { font-family: var(--mono); font-size: 1rem; }
.mc-grad-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 10px; }
.mc-grad-head .make-label { margin: 0; }
.mc-grad-bar { height: 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.mc-grad-stops { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.mc-grad-stop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mc-grad-n { flex: none; width: 1.4em; font-family: var(--mono); font-size: 0.78rem; color: var(--faint); text-align: right; }
.mc-grad-stop .sm-color { flex: none; padding: 5px; }
.mc-grad-hex { flex: 1 1 auto; min-width: 0; max-width: 150px; padding: 10px 12px; font-family: var(--mono); font-size: 0.92rem; text-transform: uppercase; }
.mc-grad-moves { display: flex; gap: 6px; margin-left: auto; }
.mc-grad-moves .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
.mc-grad-moves .icon-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
@media (hover: hover) {
  .icon-btn.mc-grad-remove:not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; }
}
.icon-btn.mc-grad-remove:not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; }
.mc-grad-add { margin: 12px 0 0; }
.mc-grad-plabel { margin-top: 26px; }
.mc-grad-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-grad-preset { display: inline-flex; align-items: center; gap: 8px; }
.mc-grad-chip { width: 26px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.mc-grad-opts { display: flex; flex-wrap: wrap; gap: 18px 36px; margin: 26px 0 0; }
.mc-grad-opts .seg { margin: 0; }
.mc-grad-preview { padding: 18px 20px; border-radius: 14px; background: #0a0812; border: 1px solid var(--border); font-family: var(--mono); font-size: 1.25rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 3.3em; }
.mc-grad-empty { font-family: var(--body); font-size: 0.92rem; color: var(--faint); }
.mc-grad-count { margin: 10px 0 0; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-grad-outs { margin: 0; }
.mc-grad-outs .cp-format { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
.mc-grad-outs .cp-format code { grid-column: 1 / -1; grid-row: 2; font-size: 0.84rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9.5em; overflow-y: auto; }
.mc-grad-out-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.mc-grad-out-help { font-size: 0.8rem; color: var(--faint); }
.mc-grad-len { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-grad-len.is-over { color: var(--danger); }
@media (max-width: 600px) {
  .mc-grad-stop { gap: 8px; }
  .mc-grad-n { display: none; }
  .mc-grad-moves { gap: 4px; }
  .mc-grad-moves .icon-btn { width: 38px; height: 38px; }
  .mc-grad-preview { padding: 14px; font-size: 1.05rem; }
  .mc-grad-out-help { flex-basis: 100%; }
}

/* server.properties Generator (mc-prop-): find and paste, group tabs, a row
   per key (its name and default, its control, what it does), then the file
   with its warnings. A changed row gets a purple edge. */
.mc-prop-top { display: grid; gap: 14px; margin: 0 0 22px; }
.mc-prop-find .make-label { margin-bottom: 8px; }
.mc-prop-paste { margin: 0; }
.mc-prop-paste-in { font-family: var(--mono); font-size: 0.86rem; min-height: 9em; }
.mc-prop-paste .tool-actions { margin-top: 12px; }
.mc-prop-tabs { margin: 0 0 6px; }
.mc-prop-tabs .seg-btn span { font-family: var(--mono); font-size: 0.74rem; opacity: 0.8; }
.mc-prop-group { margin: 22px 0 0; }
.mc-prop-group > .make-label { margin: 0 0 4px; }
.mc-prop-list { list-style: none; margin: 0; padding: 0; }
.mc-prop-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 6px 18px; align-items: center; padding: 14px 12px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; transition: background-color 160ms ease, border-color 160ms ease; }
.mc-prop-row:last-child { border-bottom: none; }
.mc-prop-row.is-changed { background: rgba(139, 92, 246, 0.08); border-left-color: var(--accent); }
.mc-prop-name { display: grid; gap: 3px; min-width: 0; }
.mc-prop-name label { cursor: pointer; }
.mc-prop-name label code { font-family: var(--mono); font-size: 0.9rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.mc-prop-def { font-size: 0.76rem; color: var(--faint); }
.mc-prop-def code { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); overflow-wrap: anywhere; }
.mc-prop-ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mc-prop-ctl .input { padding: 9px 12px; font-family: var(--mono); font-size: 0.88rem; }
.mc-prop-toggle { padding: 7px 12px; flex: 1 1 auto; min-width: 0; }
.mc-prop-toggle .toggle-text { font-family: var(--mono); font-size: 0.84rem; font-weight: 500; }
.mc-prop-select { flex: 1 1 auto; min-width: 0; }
.mc-prop-select select { width: 100%; padding-top: 9px; padding-bottom: 9px; font-size: 0.88rem; }
.mc-prop-num { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.mc-prop-num .input { flex: 1 1 auto; min-width: 0; max-width: 170px; }
.mc-prop-unit { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.mc-prop-textrow { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.mc-prop-textrow .input { flex: 1 1 auto; min-width: 0; }
.mc-prop-reset { flex: none; }
.mc-prop-help { grid-column: 1 / -1; margin: 2px 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.mc-prop-err { grid-column: 1 / -1; margin: 0; font-size: 0.84rem; color: var(--danger); }
.mc-prop-err:empty { display: none; }
.mc-prop-none { margin: 18px 0 0; }
.mc-prop-out { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-prop-out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.mc-prop-out-head .make-label, .mc-prop-out-head .seg { margin: 0; }
.mc-prop-warns { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.mc-prop-warn { padding: 11px 14px; border-radius: 12px; font-size: 0.86rem; line-height: 1.55; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.mc-prop-warn.is-risk { color: var(--text); border-color: rgba(240, 145, 141, 0.45); background: rgba(240, 145, 141, 0.08); }
.mc-prop-goto { font-family: var(--mono); font-size: 0.84rem; font-weight: 600; }
.mc-prop-warn.is-risk .mc-prop-goto { color: var(--danger); }
.mc-prop-file { margin: 0; max-height: 360px; overflow: auto; padding: 16px 18px; border-radius: 14px; background: #0a0812; border: 1px solid var(--border); font-family: var(--mono); font-size: 0.84rem; line-height: 1.6; color: var(--text); white-space: pre; }
.mc-prop-file:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn.mc-prop-clear { margin-left: auto; }
@media (hover: hover) {
  .btn.mc-prop-clear:not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; }
}
.btn.mc-prop-clear:not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; }
@media (max-width: 600px) {
  .mc-prop-row { grid-template-columns: 1fr; padding: 14px 6px 14px 10px; }
  .mc-prop-tabs .seg-btn { padding: 5px 10px; }
  .mc-prop-file { padding: 12px; font-size: 0.78rem; }
  .btn.mc-prop-clear { margin-left: 0; }
  .mc-prop-out .tool-actions .save-status { flex-basis: 100%; margin: 0; text-align: left; }
}

/* Server Startup Script (mc-start-): the choices, then the memory sum laid
   out like the tip calculator, the switches, and the script in a dark box
   with Download first. */
.mc-start-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.mc-start-opts .seg { margin: 0; }
.mc-start-opts .make-label { margin-top: 0; }
.mc-start-wide { grid-column: 1 / -1; }
.mc-start-select, .mc-start-select select { width: 100%; }
.mc-start-mono { font-family: var(--mono); font-size: 0.92rem; }
.mc-start-swnote { margin: 12px 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.mc-start-ram { margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); }
.mc-start-ram .stepper-input { width: 92px; }
.mc-start-ram .tip-inputs > .make-label { margin-top: 18px; }
.mc-start-ram .tip-inputs > .make-label:first-child { margin-top: 0; }
.mc-start-use { margin: 16px 0 0; }
.mc-start-use:disabled { opacity: 0.45; cursor: default; }
.mc-start-mem { margin: 24px 0 0; }
.mc-start-mem .stepper-input { width: 92px; }
.mc-start-warns { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mc-start-warns:empty { display: none; }
.mc-start-warn { padding: 11px 14px; border-radius: 12px; font-size: 0.86rem; line-height: 1.55; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.mc-start-warn.is-risk { color: var(--text); border-color: rgba(240, 145, 141, 0.45); background: rgba(240, 145, 141, 0.08); }
.mc-start-out { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-start-out-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 10px; }
.mc-start-out-head .make-label { margin: 0; font-size: 0.8rem; }
.mc-start-java-need { margin: 0; padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-size: 0.74rem; color: var(--tint-text); background: var(--tint); border: 1px solid var(--tint-border); }
.mc-start-code { margin: 0; max-height: 420px; overflow: auto; padding: 16px 18px; border-radius: 14px; background: #0a0812; border: 1px solid var(--border); font-family: var(--mono); font-size: 0.82rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-start-tok { white-space: nowrap; }
.mc-start-code:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mc-start-steps { margin: 20px 0 0; padding: 0 0 0 22px; display: grid; gap: 8px; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.mc-start-steps li::marker { font-family: var(--mono); color: var(--faint); }
@media (max-width: 600px) {
  .mc-start-opts { grid-template-columns: 1fr; gap: 18px; }
  .mc-start-code { padding: 12px; font-size: 0.76rem; }
  .mc-start-out .tool-actions .btn-primary { flex: 1 1 auto; }
  .mc-start-out .tool-actions .save-status { flex-basis: 100%; margin: 0; text-align: left; }
}
/* ------------------------------------------------------------ minecraft: comparator, redstone timing, chunks */
/* Comparator Signal (mc-cmp-), Redstone Timing (mc-rt-) and Chunk & Region
   Finder (mc-chk-) lay out like the tip calculator (.tip-grid, .tip-panel);
   these are the parts it does not have: a 15-step signal meter, item tables,
   the comparator's three inputs, and a chunk grid seen from above, drawn as
   plain squares. */
.mc-cmp-pick { margin: 0 0 24px; }
.mc-cmp-pick .format-select, .mc-cmp-pick select { width: 100%; }
.mc-cmp-pick select, .mc-rt-select select { padding-top: 10px; padding-bottom: 10px; font-size: 0.95rem; text-overflow: ellipsis; }
.mc-cmp-fields, .mc-rt-fields { display: grid; gap: 14px; }
.mc-cmp-field .make-label, .mc-rt-field .make-label { margin-bottom: 6px; }
.mc-cmp-field .stepper .icon-btn, .mc-rt-field .stepper .icon-btn { width: 42px; height: 42px; }
.mc-cmp-field .stepper-input, .mc-rt-field .stepper-input { width: auto; flex: 1; min-width: 0; max-width: 140px; }
.mc-cmp-field .format-select, .mc-cmp-field select { width: 100%; }
.mc-cmp-fields > .make-help { margin: 0; }
.mc-cmp-big { font-size: 3.4rem; }
.mc-cmp-meter { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 3px; margin: 14px 0 0; }
.mc-cmp-meter span { height: 12px; border-radius: 3px; background: rgba(237, 234, 246, 0.08); transition: background-color 200ms ease; }
.mc-cmp-meter span.is-on { background: var(--accent-strong); }
.mc-cmp-section { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-cmp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.mc-cmp-head .make-label, .mc-cmp-head .seg { margin: 0; }
.mc-cmp-head .seg-btn { min-width: 48px; }
.mc-cmp-table-help { margin: 8px 0 0; }
.mc-cmp-table-wrap { margin-top: 12px; }
.mc-cmp-table-help:empty { display: none; }
.mc-cmp-table-wrap, .mc-rt-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.mc-cmp-table, .mc-rt-table { margin: 0; }
.mc-cmp-table tr:last-child > *, .mc-rt-table tr:last-child > * { border-bottom: none; }
.mc-cmp-table tbody th { width: 4.5em; }
.mc-cmp-none { color: var(--faint); font-style: italic; }
.mc-cmp-section > .seg { margin: 12px 0 18px; }
.mc-cmp-sides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 12px; align-items: end; }
.mc-cmp-side .make-label { margin-bottom: 6px; }
.mc-cmp-num { font-family: var(--display); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.mc-cmp-out { padding: 8px 14px; border-radius: 14px; background: var(--tint); border: 1px solid var(--tint-border); }
.mc-cmp-out .make-label { margin: 0; }
.mc-cmp-out-n { margin: 0; font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mc-cmp-why { margin: 14px 0 0; font-size: 0.9rem; color: var(--muted); }

.mc-rt-modes { margin: 0 0 22px; }
.mc-rt-pane > .seg { margin: 0 0 20px; }
.mc-rt-num { font-family: var(--display); font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-rt-value { font-size: 1.5rem; }
.mc-rt-sub { margin-top: 18px; }
.mc-rt-units { margin: 0; }
.mc-rt-big { font-size: 2.6rem; overflow-wrap: anywhere; }
.mc-rt-field .make-help { margin-top: 6px; }
.mc-rt-want { display: grid; gap: 10px; justify-items: start; margin: 6px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); }
.mc-rt-want .mc-rt-field { width: 100%; }
.mc-rt-select, .mc-rt-select select { width: 100%; }
.mc-rt-ref-label { margin: 28px 0 10px; }
.mc-rt-note-col { color: var(--muted); white-space: normal !important; text-align: left !important; }

.mc-chk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 22px; }
.mc-chk-top .seg { margin: 0; }
.mc-chk-inputs .affix + .affix, .mc-chk-inputs #chk-y-wrap { margin-top: 10px; }
.mc-chk-axis > span { font-family: var(--mono); font-size: 0.8rem; color: var(--accent-strong); }
.mc-chk-axis .affix-input { padding-left: 44px; }
.mc-chk-big { font-size: 2.6rem; overflow-wrap: anywhere; }
.mc-chk-section { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-chk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 12px; }
.mc-chk-head .make-label { margin: 0; }
.mc-chk-readout { margin: 0; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-chk-gridbox { display: grid; grid-template-columns: auto minmax(0, 420px) auto; grid-template-areas: ". n ." "w g e" ". s ."; justify-content: center; align-items: center; gap: 8px 10px; }
.mc-chk-grid { grid-area: g; display: block; width: 100%; height: auto; aspect-ratio: 1; padding: 6px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; outline: none; touch-action: manipulation; }
.mc-chk-grid:focus-visible { box-shadow: var(--focus-ring); }
.mc-chk-cell { fill: var(--surface-2); transition: fill 160ms ease; }
.mc-chk-cell.is-on { fill: var(--accent-strong); }
.mc-chk-eighth { stroke: rgba(237, 234, 246, 0.16); stroke-width: 0.6; pointer-events: none; }
.mc-chk-dir { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.mc-chk-n { grid-area: n; justify-self: center; }
.mc-chk-s { grid-area: s; justify-self: center; }
.mc-chk-w { grid-area: w; writing-mode: vertical-rl; transform: rotate(180deg); }
.mc-chk-e { grid-area: e; writing-mode: vertical-rl; }
.mc-chk-grid-help { text-align: center; }
.mc-chk-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; }
.mc-chk-nether { margin: 0; padding: 0; border-top: none; }
.mc-chk-note { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.mc-chk-cmd { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.mc-chk-cmd code { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-family: var(--mono); font-size: 0.82rem; overflow-wrap: anywhere; }
.mc-chk-cmd code:empty { display: none; }
@media (hover: hover) {
  .mc-chk-grid .mc-chk-cell:hover { stroke: var(--gold); stroke-width: 1.5; }
}
.mc-chk-grid .mc-chk-cell:active { stroke: var(--gold); stroke-width: 1.5; }

@media (max-width: 640px) {
  .mc-cmp-big { font-size: 2.6rem; }
  .mc-cmp-sides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-cmp-out { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; }
  .mc-cmp-as { display: none; }
  .mc-cmp-section > .seg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mc-cmp-section > .seg .seg-btn { padding-left: 6px; padding-right: 6px; font-size: 0.8rem; }
  .mc-rt-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc-rt-modes .seg-btn { padding-left: 4px; padding-right: 4px; font-size: 0.8rem; }
  .mc-rt-big, .mc-chk-big { font-size: 2.1rem; }
  .mc-rt-note-col, .mc-rt-burn { display: none; }
  .mc-rt-table th, .mc-rt-table td { white-space: normal; }
  #chk-from { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  #chk-from .seg-btn { padding-left: 4px; padding-right: 4px; font-size: 0.8rem; }
  .mc-chk-gridbox { gap: 6px; }
  .mc-chk-grid { padding: 3px; }
  .mc-chk-more { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------ minecraft pixel art and map art */
/* Pixel Art Generator (mc-px-) and Map Art Planner (mc-map-) share their
   parts (build/tools/minecraft-art-parts.mjs): the block filter, a zoomable
   plan like the circle generator's, and a materials table. Blocks are plain
   squares of their map colour, never textures. */
:is(.mc-px-opts, .mc-map-opts) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin: 22px 0 0; }
:is(.mc-px-opt, .mc-map-opt) { min-width: 0; }
:is(.mc-px-opt, .mc-map-opt) .seg { margin: 0; }
.mc-px-source .seg { margin: 0; }
.mc-px-panel { margin: 22px 0 0; }
.mc-px-text { min-height: 72px; font-family: var(--mono); text-transform: uppercase; resize: vertical; }
.mc-px-select, .mc-px-select select { width: 100%; }
.mc-px-select select { padding: 11px 40px 11px 14px; font-size: 0.92rem; }
.mc-px-drop { padding: 34px 20px; }
.mc-px-drop .glyphs { width: 52px; height: 52px; margin-bottom: 14px; border-radius: 16px; }
.mc-px-drop .glyphs svg { width: 24px; height: 24px; }
:is(.mc-px-picked, .mc-map-head) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
:is(.mc-px-picked-name, .mc-map-name) { margin: 0; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.mc-px-pic-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 28px; margin: 20px 0 0; }
.mc-px-pic-opts .toggles { margin: 0; flex: 1 1 260px; grid-template-columns: 1fr; }
.mc-px-size .stepper .icon-btn { width: 44px; height: 44px; }
:is(.mc-px-blocks, .mc-map-blocks) { margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
:is(.mc-px-sets-note, .mc-map-sets-note):empty { display: none; }
:is(.mc-px-blocks, .mc-map-blocks) .toggles { margin-top: 14px; }
.mc-map-toggles { margin-top: 18px; }
.mc-map-work { text-align: left; }
.mc-map-app.is-dragover .mc-map-work { border-color: var(--accent-strong); }
.mc-map-stair { margin: 22px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--tint); border: 1px solid var(--tint-border); }
.mc-map-stair-line { margin: 0; font-weight: 600; }
.mc-map-stair .make-help { margin-top: 6px; }
:is(.mc-px-stats, .mc-map-stats) { margin: 24px 0 0; }
.mc-px-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(.mc-px-stats, .mc-map-stats) .stat { align-content: start; }
:is(.mc-px-sub, .mc-map-sub) { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); min-height: 1.2em; }
:is(.mc-px-bar, .mc-map-bar) { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
:is(.mc-px-readout, .mc-map-readout) { flex: 1; min-width: 0; margin: 0; font-family: var(--mono); font-size: 0.76rem; line-height: 1.45; color: var(--muted); min-height: 2.9em; display: flex; align-items: center; overflow-wrap: anywhere; }
:is(.mc-px-zoom, .mc-map-zoom) { display: flex; align-items: center; gap: 6px; flex: none; }
:is(.mc-px-zoom, .mc-map-zoom) .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
:is(.mc-px-zoom, .mc-map-zoom) .icon-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
:is(.mc-px-zoom, .mc-map-zoom) .btn-small { padding: 9px 14px; }
:is(.mc-px-view, .mc-map-view) { overflow: auto; max-height: min(74vh, 780px); padding: 10px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); overscroll-behavior: contain; }
:is(.mc-px-canvas, .mc-map-canvas) { display: block; margin: 0 auto; cursor: crosshair; outline: none; border-radius: 2px; touch-action: manipulation; }
:is(.mc-px-canvas, .mc-map-canvas):focus-visible { box-shadow: var(--focus-ring); }
.mc-map-busy { margin: 8px 0 0; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.mc-map-busy:empty { display: none; }
:is(.mc-px-mats, .mc-map-mats) { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
:is(.mc-px-table-wrap, .mc-map-table-wrap) { max-height: 520px; overflow: auto; border-radius: 14px; border: 1px solid var(--border); }
:is(.mc-px-table, .mc-map-table) thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
:is(.mc-px-table, .mc-map-table) td small { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
:is(.mc-px-table, .mc-map-table) th[scope="row"] { white-space: normal; }
:is(.mc-px-table, .mc-map-table) tfoot th, :is(.mc-px-table, .mc-map-table) tfoot td { border-bottom: 0; border-top: 1px solid var(--tint-border); background: var(--tint); }
:is(.mc-px-cellname, .mc-map-cellname) { display: flex; align-items: center; gap: 10px; min-width: 0; }
:is(.mc-px-sw, .mc-map-sw) { flex: none; width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
:is(.mc-px-swap, .mc-map-swap) { position: relative; display: inline-flex; align-items: center; min-width: 0; padding: 4px 26px 4px 8px; margin-left: -9px; border: 1px solid transparent; border-radius: 10px; transition: border-color 140ms ease, background 140ms ease; }
:is(.mc-px-swap-text, .mc-map-swap-text) { font-weight: 600; overflow-wrap: anywhere; }
:is(.mc-px-swap, .mc-map-swap) select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
:is(.mc-px-swap, .mc-map-swap)::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
:is(.mc-px-swap, .mc-map-swap):has(select:focus-visible) { box-shadow: var(--focus-ring); }
:is(.mc-px-swap, .mc-map-swap) option { background: var(--surface); color: var(--text); }
@media (hover: hover) {
  :is(.mc-px-swap, .mc-map-swap):hover { border-color: var(--gold); background: var(--surface-2); }
}
.mc-map-north { margin-top: 10px; }
.mc-map-per { margin: 26px 0 0; }
.mc-map-per-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mc-map-map { border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.mc-map-map summary { display: grid; gap: 2px; padding: 12px 16px; cursor: pointer; list-style: none; border-radius: 14px; transition: color 140ms ease; }
.mc-map-map summary::-webkit-details-marker { display: none; }
.mc-map-map summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mc-map-map-name { font-weight: 600; }
.mc-map-map-name small { font-family: var(--mono); font-size: 0.7rem; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px; }
.mc-map-map-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.mc-map-map[open] summary { border-bottom: 1px solid var(--border); border-radius: 14px 14px 0 0; }
.mc-map-map-list { list-style: none; margin: 0; padding: 10px 16px 14px; display: grid; gap: 7px; max-height: 300px; overflow: auto; }
.mc-map-map-list li { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; min-width: 0; }
.mc-map-map-block { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mc-map-map-n { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
@media (hover: hover) {
  .mc-map-map summary:hover { color: var(--gold); }
}
@media (max-width: 600px) {
  :is(.mc-px-opts, .mc-map-opts) { grid-template-columns: 1fr; gap: 18px; }
  .mc-px-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-px-stats .stat:nth-child(3) { grid-column: 1 / -1; }
  :is(.mc-px-stats, .mc-map-stats) .stat-num { font-size: 1.3rem; }
  :is(.mc-px-bar, .mc-map-bar) { flex-direction: column-reverse; align-items: stretch; }
  :is(.mc-px-zoom, .mc-map-zoom) { justify-content: flex-end; }
  :is(.mc-px-view, .mc-map-view) { padding: 6px; max-height: 70vh; }
  :is(.mc-px-table, .mc-map-table) th, :is(.mc-px-table, .mc-map-table) td { padding: 8px 8px; font-size: 0.84rem; white-space: normal; }
  :is(.mc-px-table, .mc-map-table) { table-layout: fixed; }
  :is(.mc-px-table, .mc-map-table) thead th:nth-child(2) { width: 5.4em; }
  :is(.mc-px-table, .mc-map-table) thead th:nth-child(3) { width: 7.2em; }
  :is(.mc-px-th-sub, .mc-map-th-sub) { display: none; }
  .mc-map-per-grid { grid-template-columns: 1fr; }
  .tool-actions :is(#mc-px-download, #mc-map-download) { flex: 1 1 100%; }
  :is(#mc-px-status, #mc-map-status):empty { display: none; }
}
/* ------------------------------------------------------------ minecraft: slime chunks and strongholds */
/* Slime Chunk Finder (mc-slime-): edition, seed and Go to, a map of chunks
   that drags and zooms, then the farm search with the best spot in a tinted
   panel and the runners-up as rows. */
.mc-slime-top { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.mc-slime-top .seg { margin: 0; }
.mc-slime-seed-in { font-family: var(--mono); font-size: 0.95rem; }
.mc-slime-bedrock { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.mc-slime-go { margin: 22px 0 0; }
.mc-slime-go-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; }
.mc-slime-axis > span { font-family: var(--mono); font-size: 0.82rem; color: var(--accent-strong); }
.mc-slime-axis .affix-input { min-width: 0; }
.mc-slime-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.mc-slime-readout { flex: 1; min-width: 0; margin: 0; font-family: var(--mono); font-size: 0.78rem; line-height: 1.45; color: var(--muted); min-height: 2.9em; display: flex; align-items: center; }
.mc-slime-readout b { color: var(--tint-text); font-weight: 600; }
.mc-slime-zoom { display: flex; gap: 6px; flex: none; }
.mc-slime-zoom .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
.mc-slime-zoom .icon-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.mc-slime-view { position: relative; height: 440px; overflow: hidden; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); }
.mc-slime-canvas { display: block; cursor: grab; outline: none; touch-action: none; }
.mc-slime-view.is-dragging .mc-slime-canvas { cursor: grabbing; }
.mc-slime-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.mc-slime-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; font-size: 0.8rem; color: var(--muted); }
.mc-slime-legend li { display: inline-flex; align-items: center; gap: 7px; }
.mc-slime-key { width: 14px; height: 14px; border-radius: 3px; background: var(--surface); }
.mc-slime-key.is-slime { background: rgba(139, 92, 246, 0.78); }
.mc-slime-key.is-ring { border-radius: 50%; background: rgba(212, 198, 255, 0.07); border: 2px solid var(--tint-text); }
.mc-slime-scale { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; }
.mc-slime-farm { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-slime-farm-help { margin: 0 0 16px; }
.mc-slime-farm-opts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 32px; margin: 0 0 18px; }
.mc-slime-farm-opts .seg { margin: 0; }
.mc-slime-farm-opts .stepper .icon-btn { width: 44px; height: 44px; }
.mc-slime-spots:empty { display: none; }
.mc-slime-best { margin: 20px 0 0; padding: 22px 24px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border); }
.mc-slime-big { margin: 0; font-family: var(--display); font-size: 2.4rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mc-slime-big span { white-space: nowrap; }
.mc-slime-list { list-style: none; margin: 12px 0 0; padding: 0; }
.mc-slime-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.mc-slime-list li:last-child { border-bottom: none; }
.mc-slime-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; color: var(--bg); background: var(--tint-text); }
.mc-slime-list li.is-shown .mc-slime-n { background: var(--text); }
.mc-slime-what { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-slime-what small { font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.mc-slime-list .btn[aria-pressed="true"] { color: var(--tint-text); background: var(--tint); border-color: var(--tint-border); }
@media (max-width: 600px) {
  .mc-slime-go-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mc-slime-go-row .btn { grid-column: 1 / -1; }
  .mc-slime-view { height: 360px; }
  .mc-slime-bar { align-items: flex-start; }
  .mc-slime-scale { margin-left: 0; flex-basis: 100%; }
  .mc-slime-best { padding: 20px 16px; }
  .mc-slime-big { font-size: 1.9rem; }
  .mc-slime-farm-opts { gap: 16px; }
  #sl-find { width: 100%; }
  #sl-status:empty { display: none; }
}

/* Stronghold Finder (mc-sh-): a paste box for F3+C, a row per throw (X, Z,
   angle, remove), then the answer in a tinted panel beside a top-down
   diagram of the rings, and a gold notice when the answer is off the rings. */
.mc-sh-paste-in { font-family: var(--mono); font-size: 0.86rem; }
.mc-sh-head { margin-top: 24px; }
.mc-sh-cols { display: none; }
.mc-sh-throws { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mc-sh-throw { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 46px; align-items: center; gap: 8px; }
.mc-sh-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; color: var(--tint-text); background: var(--tint); border: 1px solid var(--tint-border); }
.mc-sh-field > span { left: 12px; font-family: var(--mono); font-size: 0.82rem; color: var(--accent-strong); }
.mc-sh-field .affix-input { min-width: 0; padding-left: 30px; padding-right: 8px; font-size: 1rem; }
.mc-sh-field.is-suffix .affix-input { padding-left: 12px; padding-right: 26px; }
.mc-sh-field.is-suffix > span { left: auto; right: 12px; }
.mc-sh-miss { grid-column: 2 / -2; margin: -2px 0 0; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.mc-sh-miss:empty { display: none; }
.mc-sh-miss.is-off { color: var(--gold); }
.icon-btn.mc-sh-remove { width: 46px; height: 46px; color: var(--muted); background: transparent; border-color: var(--border); }
.icon-btn.mc-sh-remove:disabled { opacity: 0.35; cursor: default; transform: none; background: transparent; color: var(--muted); }
@media (hover: hover) {
  .icon-btn.mc-sh-remove:not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; }
}
.icon-btn.mc-sh-remove:not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; transform: scale(0.94); }
.mc-sh-under { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin: 14px 0 0; }
.mc-sh-sigma .seg { margin: 0; }
.mc-sh-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 24px; align-items: start; margin: 26px 0 0; }
.mc-sh-panel { position: static; }
.mc-sh-big { font-size: 2.3rem; overflow-wrap: anywhere; }
.mc-sh-big span { white-space: nowrap; }
.mc-sh-big.is-long { font-size: 1.8rem; }
.mc-sh-figure { margin: 0; }
.mc-sh-svg { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); }
.mc-sh-cap { margin: 8px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--muted); }
.mc-sh-ring { fill: none; stroke: rgba(139, 92, 246, 0.2); }
.mc-sh-ring-label { font-family: var(--mono); font-size: 9px; fill: var(--muted); }
.mc-sh-axis { stroke: rgba(212, 198, 255, 0.22); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.mc-sh-compass { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
.mc-sh-origin { fill: var(--muted); }
.mc-sh-ray { stroke: var(--tint-text); stroke-width: 1.3; opacity: 0.75; }
.mc-sh-throw-dot { fill: var(--bg); stroke: var(--tint-text); stroke-width: 2; }
.mc-sh-err { fill: rgba(237, 234, 246, 0.08); stroke: rgba(237, 234, 246, 0.5); stroke-width: 1; stroke-dasharray: 3 3; }
.mc-sh-target { fill: var(--text); stroke: var(--bg); stroke-width: 2; }
.mc-sh-flag p { margin: 0; }
.btn.mc-sh-clear { margin-right: auto; }
@media (max-width: 640px) {
  .mc-sh-throw { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 42px; grid-template-areas: "n x z rm" "n a a rm" "n miss miss miss"; row-gap: 8px; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
  .mc-sh-throw:last-child { border-bottom: none; padding-bottom: 0; }
  .mc-sh-n { grid-area: n; align-self: start; margin-top: 10px; }
  .mc-sh-throw > :nth-child(2) { grid-area: x; }
  .mc-sh-throw > :nth-child(3) { grid-area: z; }
  .mc-sh-throw > :nth-child(4) { grid-area: a; }
  .mc-sh-remove { grid-area: rm; align-self: start; }
  .icon-btn.mc-sh-remove { width: 42px; height: 42px; }
  .mc-sh-miss { grid-area: miss; }
  .mc-sh-result { grid-template-columns: 1fr; }
  .mc-sh-figure { max-width: 360px; width: 100%; margin: 0 auto; }
  .mc-sh-big { font-size: 1.9rem; }
  .mc-sh-big.is-long { font-size: 1.6rem; }
  .mc-sh-sigma .seg-btn { padding-left: 10px; padding-right: 10px; }
}
/* ------------------------------------------------------------ minecraft: beacon, superflat and fireworks */
/* Beacon Calculator (mc-bcn-): tier and block, a side view of the pyramid
   beside the bill, the tier and cost tables, then the beam: glass buttons,
   the beam drawn as plain bands, and the closest stacks for a colour. */
.mc-bcn-opts { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.mc-bcn-opt .seg { margin: 0 0 20px; }
.mc-bcn-mix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 0 0 24px; }
.mc-bcn-mix-row .make-label { margin-bottom: 6px; }
.mc-bcn-mix-row .format-select, .mc-bcn-mix-row select { width: 100%; }
.mc-bcn-mix-row select { padding-top: 10px; padding-bottom: 10px; font-size: 0.92rem; }
.mc-bcn-pyramid { display: grid; justify-items: center; gap: 3px; padding: 18px 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.mc-bcn-row { display: flex; gap: 3px; }
.mc-bcn-cell { width: clamp(14px, 3.4vw, 22px); aspect-ratio: 1; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.mc-bcn-cell.is-beacon { background: #7fe3e0; box-shadow: 0 0 0 2px var(--surface-2), inset 0 0 0 4px #2c6f74; }
.mc-bcn-layers { margin: 14px 0 0; }
.mc-bcn-part { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-bcn-scroll { overflow-x: auto; }
.mc-bcn-effects td:last-child, .mc-bcn-effects th:last-child { text-align: left; white-space: normal; min-width: 12rem; }
.mc-bcn-effects tbody tr:not(.is-current) { color: var(--faint); }
.mc-bcn-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); vertical-align: -1px; }
.figures .mc-bcn-dot { margin-right: 8px; }
.mc-bcn-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mc-bcn-glass { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-bcn-glass:disabled { opacity: 0.4; cursor: default; }
.mc-bcn-beam-grid { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 24px; margin: 18px 0 0; align-items: start; }
.mc-bcn-column { display: flex; flex-direction: column; align-items: center; padding: 0 0 4px; border-radius: 14px; background: var(--bg-deep); border: 1px solid var(--border); overflow: hidden; }
.mc-bcn-ray { display: block; width: 14px; height: 14px; opacity: 0.9; }
.mc-bcn-ray.is-top { height: 120px; }
.mc-bcn-pane { display: block; width: 48px; height: 22px; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); opacity: 0.85; }
.mc-bcn-base { display: grid; place-items: center; width: 56px; height: 34px; margin: 0; border-radius: 6px; background: #7fe3e0; color: #153c3e; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.mc-bcn-result { min-width: 0; }
.mc-bcn-swatch { height: 64px; border-radius: 14px; border: 1px solid var(--border); background: #fff; }
.mc-bcn-hex { margin: 12px 0 0; font-family: var(--display); font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-bcn-rgb { margin: 2px 0 0; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.mc-bcn-stack { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.mc-bcn-stack-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.88rem; }
.mc-bcn-stack-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-bcn-stack-after { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.icon-btn.mc-bcn-remove { width: 34px; height: 34px; border-radius: 10px; color: var(--muted); background: transparent; border-color: var(--border); }
.mc-bcn-stack-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.mc-bcn-stack-actions .btn:disabled { opacity: 0.45; cursor: default; }
.mc-bcn-find { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.mc-bcn-find-in { width: 9.5rem; font-family: var(--mono); text-transform: uppercase; }
.mc-bcn-matches { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.mc-bcn-match { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mc-bcn-match.is-best { background: var(--tint); border-color: var(--tint-border); }
.mc-bcn-match-glass { display: flex; gap: 3px; }
.mc-bcn-match-glass .mc-bcn-dot { width: 20px; height: 20px; border-radius: 5px; }
.mc-bcn-match-what { display: grid; gap: 2px; min-width: 0; font-size: 0.88rem; font-weight: 600; }
.mc-bcn-match-what small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: var(--muted); }
@media (hover: hover) {
  .icon-btn.mc-bcn-remove:not(:disabled):hover, .btn.mc-bcn-clear:not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; }
}
:is(.icon-btn.mc-bcn-remove, .btn.mc-bcn-clear):not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; }
@media (max-width: 600px) {
  .mc-bcn-opts { display: block; }
  .mc-bcn-mix { grid-template-columns: 1fr; }
  .mc-bcn-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-bcn-beam-grid { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .mc-bcn-pane { width: 40px; }
  .mc-bcn-base { width: 50px; }
  .mc-bcn-stack-after { display: none; }
  .mc-bcn-stack-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mc-bcn-match { grid-template-columns: minmax(0, 1fr) auto; }
  .mc-bcn-match-glass { grid-column: 1 / -1; }
  .mc-bcn-hex { font-size: 1.3rem; }
  .mc-bcn-effects :is(th, td):nth-child(2) { display: none; }
  .mc-bcn-effects :is(th, td) { padding-left: 8px; padding-right: 8px; }
  .mc-bcn-effects td:last-child, .mc-bcn-effects th:last-child { min-width: 8.5rem; }
  .mc-bcn-cost :is(th, td):nth-child(2) { display: none; }
  .mc-bcn-cost :is(th, td) { padding-left: 7px; padding-right: 7px; font-size: 0.86rem; }
}

/* Superflat Generator (mc-flat-): presets, then the layer rows (a colour
   chip, the block, its thickness, move and remove) beside a column of plain
   bands, structures as chips, and the two strings to copy. */
.mc-flat-presets { margin: 0 0 24px; }
.tip-grid.mc-flat-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.mc-flat-edit .make-help code, .mc-fw-part .make-help code { font-family: var(--mono); font-size: 0.9em; color: var(--text); }
.mc-flat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.mc-flat-head .make-label { margin: 0; }
.mc-flat-add, .mc-fw-add { display: inline-flex; align-items: center; gap: 6px; }
.mc-flat-add:disabled, .mc-fw-add:disabled { opacity: 0.45; cursor: default; }
.mc-flat-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mc-flat-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 4.2rem auto auto auto; align-items: center; gap: 6px; }
.mc-flat-chip { width: 14px; height: 34px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.mc-flat-chip.is-air { box-shadow: inset 0 0 0 1px var(--faint); background: transparent; }
.mc-flat-row .input { padding: 9px 10px; border-radius: 10px; font-size: 0.88rem; }
.mc-flat-block { font-family: var(--mono); min-width: 0; }
.mc-flat-count { text-align: center; font-variant-numeric: tabular-nums; }
.mc-flat-times { color: var(--faint); font-size: 0.9rem; }
.mc-flat-row .icon-btn { width: 34px; height: 34px; border-radius: 10px; }
.mc-flat-row .icon-btn:disabled { opacity: 0.3; cursor: default; transform: none; }
.icon-btn.mc-flat-remove, .icon-btn.mc-fw-remove { color: var(--muted); background: transparent; border-color: var(--border); }
.mc-flat-biome-label { margin-top: 22px; }
.mc-flat-biome, .mc-flat-biome select { width: 100%; }
.mc-flat-side { position: sticky; top: 90px; min-width: 0; }
.mc-flat-preview { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-deep); }
.mc-flat-band { position: relative; display: flex; align-items: center; min-height: 14px; padding: 0 10px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.28); }
.mc-flat-band.is-air { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.06) 6px 12px); box-shadow: inset 0 0 0 1px var(--border); }
.mc-flat-band-label { font-family: var(--mono); font-size: 0.7rem; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-flat-facts { margin-top: 14px; border-top-color: var(--border); }
.mc-flat-warn { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(240, 145, 141, 0.4); background: rgba(240, 145, 141, 0.08); font-size: 0.86rem; line-height: 1.5; }
.mc-flat-warn:empty { display: none; }
.mc-flat-part { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-flat-structs { margin: 0; }
.mc-flat-toggles { margin-top: 16px; }
.mc-flat-out-label { margin-top: 28px; }
.mc-flat-outs, .mc-fw-outs { margin: 0; }
.mc-flat-outs .cp-format, .mc-fw-outs .cp-format { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
.mc-flat-outs .cp-format code, .mc-fw-outs .cp-format code { grid-column: 1 / -1; grid-row: 2; font-size: 0.84rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-flat-out-head, .mc-fw-out-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.mc-flat-out-help, .mc-fw-out-help { font-size: 0.8rem; color: var(--faint); }
.mc-flat-note { margin: 14px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.mc-flat-note b { color: var(--text); }
.mc-flat-import { margin: 26px 0 0; }
.mc-flat-import-row { display: flex; gap: 10px; }
.mc-flat-paste { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.86rem; }
@media (hover: hover) {
  :is(.icon-btn.mc-flat-remove, .icon-btn.mc-fw-remove):not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; }
}
:is(.icon-btn.mc-flat-remove, .icon-btn.mc-fw-remove):not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; }
@media (max-width: 760px) {
  .tip-grid.mc-flat-grid { grid-template-columns: 1fr; }
  .mc-flat-side { position: static; }
}
@media (max-width: 600px) {
  .mc-flat-row { grid-template-columns: 10px minmax(0, 1fr) 3.4rem auto auto auto; gap: 5px; }
  .mc-flat-chip { width: 10px; }
  .mc-flat-times { display: none; }
  .mc-flat-row .icon-btn { width: 32px; height: 32px; }
  .mc-flat-row .input { padding: 9px 7px; font-size: 0.8rem; }
  .mc-flat-import-row { flex-direction: column; }
}

/* Firework Builder (mc-fw-): the flight, a dark stage the burst is drawn
   on, a card per star (shape, colours, fades, trail and twinkle), the
   crafting steps, the commands, and the elytra table. */
.mc-fw-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 24px; }
.mc-fw-top .seg { margin: 0; }
.mc-fw-top .seg-btn { min-width: 52px; }
.mc-fw-flight-help { flex: 1 1 240px; margin: 0 0 6px; }
.mc-fw-stage { position: relative; margin: 22px 0 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: radial-gradient(ellipse at 50% 110%, #231c3d, var(--bg-deep) 70%); }
.mc-fw-canvas { display: block; width: 100%; height: 300px; }
.mc-fw-play { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 12px; }
.mc-fw-stage-help { margin-top: 8px; }
.mc-fw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0 10px; }
.mc-fw-head .make-label { margin: 0; }
.mc-fw-stars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mc-fw-star { padding: 16px 18px 18px; border-radius: 16px; border: 1px solid var(--border); background: rgba(29, 24, 50, 0.5); }
.mc-fw-star .make-label { margin: 14px 0 8px; }
.mc-fw-star-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mc-fw-star-title { margin: 0; font-family: var(--display); font-size: 1.1rem; font-weight: 700; }
.icon-btn.mc-fw-remove { width: 36px; height: 36px; border-radius: 10px; }
.mc-fw-shapes { margin: 0; }
.mc-fw-dyes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mc-fw-dye { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-fw-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.mc-fw-flags { margin: 16px 0 0; }
.mc-fw-why { font-weight: 400; opacity: 0.75; }
.mc-fw-part { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-fw-recipe { margin: 0; padding: 0 0 0 20px; display: grid; gap: 10px; font-size: 0.92rem; line-height: 1.55; }
.mc-fw-recipe li::marker { font-family: var(--mono); color: var(--faint); }
.mc-fw-recipe p { margin: 0; }
.mc-fw-step-then { color: var(--muted); }
.mc-fw-warn { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(232, 180, 79, 0.35); background: rgba(232, 180, 79, 0.07); font-size: 0.86rem; line-height: 1.5; }
.mc-fw-warn:empty { display: none; }
.mc-fw-give-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.mc-fw-give-head .make-label { margin: 0; }
.mc-fw-count { display: inline-flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--muted); }
.mc-fw-count .input { width: 5.5rem; padding: 8px 12px; border-radius: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.mc-fw-long { margin: 6px 0 0; color: var(--danger); }
.mc-fw-trip { max-width: 260px; margin: 0 0 14px; }
.mc-fw-trip .make-label { margin-bottom: 6px; }
.mc-fw-trip-box .affix-input { padding-right: 78px; }
.mc-fw-scroll { overflow-x: auto; }
@media (max-width: 600px) {
  .mc-fw-canvas { height: 240px; }
  .mc-fw-star { padding: 14px 12px 16px; }
  .mc-fw-dyes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-fw-table th, .mc-fw-table td { padding: 8px 6px; font-size: 0.84rem; }
  .mc-fw-table :is(th, td):nth-child(4) { display: none; }
}
/* Preset strings and commands in the prose are long words; let them break. */
:is(.tool-minecraft-superflat-generator, .tool-minecraft-firework-builder) .prose code { white-space: normal; overflow-wrap: anywhere; }
/* ------------------------------------------------------------ minecraft: give command, text builder, fill splitter */
/* Give Command Generator (mc-give-), Text Builder (mc-txt-) and Fill Command
   Splitter (mc-fill-). They share a pattern: a version picker on top, the
   inputs, a preview on a dark panel like the MOTD one, then the command in a
   mono box with what it fits. Remove buttons keep their red. */
.mc-give-top, .mc-txt-top, .mc-fill-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; margin: 0 0 22px; }
.mc-give-field, .mc-txt-field, .mc-fill-field { min-width: 0; }
.mc-give-top .seg, .mc-txt-top .seg, .mc-fill-top .seg { margin: 0; }
.mc-give-ver select, .mc-txt-ver select, .mc-fill-ver select { min-width: 220px; }
.mc-give-player { margin: 10px 0 0; max-width: 260px; font-family: var(--mono); }
.mc-give-player[hidden] { display: none; }
.mc-give-row, .mc-fill-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.mc-give-grow, .mc-fill-grow { flex: 1 1 220px; min-width: 0; }
.mc-give-grow select, .mc-give-wide select { width: 100%; }
.mc-give-mono, .mc-txt-mono, .mc-fill-mono { font-family: var(--mono); font-size: 0.95rem; }
.mc-give-block { margin: 22px 0 0; }
.mc-give-block[hidden] { display: none; }
.mc-give-style { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 0; }
.mc-give-style .format-select select { padding-top: 8px; padding-bottom: 8px; font-size: 0.86rem; }
.mc-give-hex, .mc-txt-hex { width: 44px; height: 36px; padding: 2px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
.mc-give-hex[hidden], .mc-txt-hex[hidden] { display: none; }
.mc-give-lore { min-height: 70px; resize: vertical; font-family: inherit; }
.mc-give-level { width: 76px; text-align: center; font-family: var(--mono); }
.mc-give-ench-add .btn { align-self: stretch; }
.mc-give-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.mc-give-list:empty { display: none; }
.mc-give-li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mc-give-li-name { font-weight: 600; overflow-wrap: anywhere; }
.mc-give-li-tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--faint); text-align: right; }
.mc-give-li-tag.is-over { color: var(--gold); }
.mc-give-li .icon-btn, .mc-txt-del { width: 34px; height: 34px; border-radius: 10px; }
.mc-txt-del:disabled { opacity: 0.35; cursor: default; }
#mc-give-dye-row:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#mc-give-dye-row .make-label { flex-basis: 100%; margin-bottom: 0; }
.mc-give-toggle { margin: 0; }
.mc-give-more .toggle { margin: 4px 0 0; }
.mc-give-sub { margin-top: 22px; }
.mc-give-cmd-in { max-width: 200px; font-family: var(--mono); }
.mc-give-attr-add { display: grid; grid-template-columns: minmax(0, 1.6fr) 84px minmax(0, 1.1fr) minmax(0, 1.1fr) auto; gap: 8px; align-items: stretch; }
.mc-give-attr-add .format-select, .mc-give-attr-add select { width: 100%; }
.mc-give-attr-add select { padding-top: 9px; padding-bottom: 9px; font-size: 0.86rem; text-overflow: ellipsis; }
.mc-give-amount { font-family: var(--mono); text-align: center; padding-left: 8px; padding-right: 8px; }
.mc-give-plabel, .mc-give-olabel, .mc-txt-plabel, .mc-txt-olabel { margin-top: 26px; }
.mc-give-preview { display: inline-block; min-width: min(100%, 260px); max-width: 100%; padding: 12px 16px; border-radius: 12px; background: #0a0812; border: 2px solid #2a1650; }
.mc-give-tip { margin: 0; font-family: var(--mono); font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-give-tip.is-name { margin-bottom: 2px; }
.mc-give-tip.is-gap { height: 0.5em; }
.mc-give-tip.is-note { font-style: italic; }
.mc-give-out, .mc-fill-out { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-family: var(--mono); font-size: 0.86rem; line-height: 1.55; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
.mc-give-meters { margin: 12px 0 0; }
.mc-give-meters .wc-left { font-variant-numeric: tabular-nums; }
.mc-give-notes, .mc-txt-notes, .mc-fill-notes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.mc-give-notes:empty, .mc-txt-notes:empty, .mc-fill-notes:empty { display: none; }
.mc-give-notes li, .mc-txt-notes li, .mc-fill-notes li { padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(232, 180, 79, 0.35); background: rgba(232, 180, 79, 0.07); font-size: 0.88rem; line-height: 1.5; }

/* Text Builder: pieces as numbered cards, a preview per kind of output. */
.mc-txt-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin: 0 0 18px; }
.mc-txt-opts[hidden] { display: none; }
.mc-txt-opts .toggle { flex: 1 1 100%; }
.mc-txt-times { display: flex; gap: 12px; }
.mc-txt-times[hidden] { display: none; }
.mc-txt-num { width: 84px; text-align: center; font-family: var(--mono); }
.mc-txt-sign-opts .mc-txt-field { display: flex; flex-direction: column; gap: 8px; }
.mc-txt-sign-opts .make-label { margin-bottom: 0; }
.mc-txt-glow { align-self: flex-start; }
.mc-txt-wax { flex-basis: 100%; }
#mc-txt-pos { width: 150px; font-family: var(--mono); }
.mc-txt-book-opts .mc-txt-field { flex: 1 1 200px; }
.mc-txt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 10px; }
.mc-txt-head .make-label { margin: 0; }
.mc-txt-pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mc-txt-piece { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(29, 24, 50, 0.5); border: 1px solid var(--border); }
.mc-txt-prow { display: flex; align-items: center; gap: 10px; }
.mc-txt-prow .mc-txt-text { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.95rem; padding-top: 10px; padding-bottom: 10px; }
.mc-txt-prow .format-select select { padding-top: 9px; padding-bottom: 9px; font-size: 0.86rem; }
.mc-txt-n { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--tint); color: var(--tint-text); font-family: var(--mono); font-size: 0.78rem; }
.mc-txt-page { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); }
.mc-txt-page .mc-txt-num { width: 64px; padding-top: 9px; padding-bottom: 9px; }
.mc-txt-prow2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mc-txt-prow2 .format-select select, .mc-txt-prow3 .format-select select { padding-top: 8px; padding-bottom: 8px; font-size: 0.86rem; }
.mc-txt-prow2 .check-chip span { padding: 5px 11px 5px 8px; font-size: 0.8rem; }
.mc-txt-prow3 { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.mc-txt-prow3 .input { padding-top: 9px; padding-bottom: 9px; font-size: 0.9rem; }
.mc-txt-prow3 .mc-txt-value { font-family: var(--mono); }
.mc-txt-prow3 .mc-txt-value[hidden] { display: none; }
.mc-txt-prow3:has(.mc-txt-value[hidden]) { grid-template-columns: auto minmax(0, 1fr); }
.mc-txt-preview { border-radius: 14px; }
.mc-txt-preview p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-txt-preview .has-event { cursor: help; }
.mc-txt-chat { padding: 14px 16px; background: #0a0812; border: 1px solid var(--border); border-radius: 14px; }
.mc-txt-chatline { font-family: var(--mono); font-size: 0.95rem; line-height: 1.6; }
.mc-txt-screen { display: grid; grid-template-rows: 1fr auto; min-height: 230px; padding: 18px; border-radius: 14px; background: #0a0812; border: 1px solid var(--border); text-align: center; }
.mc-txt-mid { align-self: center; display: grid; gap: 6px; }
.mc-txt-big { font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 600; line-height: 1.15; }
.mc-txt-subt { font-family: var(--body); font-size: 1.05rem; }
.mc-txt-bar { font-family: var(--body); font-size: 0.9rem; padding-top: 12px; }
.mc-txt-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mc-txt-board { padding: 10px 12px 14px; border-radius: 10px; background: var(--wood, #b8945f); border: 1px solid rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.12); text-align: center; }
.mc-txt-preview .mc-txt-side { margin: 0 0 6px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.6); }
.mc-txt-signline { font-family: var(--mono); font-size: 0.92rem; line-height: 1.5; min-height: 1.5em; }
.mc-txt-signline.is-over { box-shadow: inset 0 -2px 0 #b9524e; }
.mc-txt-pages { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.mc-txt-sheet { flex: 0 0 min(240px, 80%); min-height: 260px; padding: 14px 16px; border-radius: 10px; background: #f3ead5; color: #000; }
.mc-txt-preview .mc-txt-pnum { margin: 0 0 8px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: #6b5a3a; text-align: right; }
.mc-txt-ptext { font-family: var(--body); font-size: 0.95rem; line-height: 1.45; }
.mc-txt-outs { margin: 0; }
.mc-txt-outs .cp-format { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
.mc-txt-outs .cp-format code { grid-column: 1 / -1; grid-row: 2; font-size: 0.84rem; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
.mc-txt-out-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.mc-txt-out-help { font-size: 0.8rem; color: var(--faint); }
.mc-txt-out-help.is-over { color: var(--gold); }

/* Fill Command Splitter: two corners side by side, the counts, the list. */
.mc-fill-limit { width: 150px; font-family: var(--mono); }
.mc-fill-limit:disabled { opacity: 0.55; cursor: not-allowed; }
.mc-fill-limit-help { margin: -12px 0 20px; }
.mc-fill-corners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mc-fill-corner { min-width: 0; margin: 0; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: rgba(29, 24, 50, 0.5); }
.mc-fill-corner legend { float: left; width: 100%; padding: 0; }
.mc-fill-xyz { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mc-fill-xyz .affix-input { min-width: 0; padding-left: 28px; padding-right: 8px; font-size: 1rem; }
.mc-fill-xyz .affix > span { left: 11px; font-family: var(--mono); font-size: 0.8rem; color: var(--accent-strong); }
.mc-fill-row { margin: 20px 0 0; }
.mc-fill-row [hidden] { display: none; }
.mc-fill-mode { margin: 0; }
.mc-fill-mode-help { margin: 10px 0 0; }
.mc-fill-stats { margin: 22px 0 0; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.mc-fill-stats .stat-num { font-size: 1.3rem; white-space: normal; overflow-wrap: anywhere; }
.mc-fill-verdict { margin: 14px 0 0; font-size: 0.95rem; line-height: 1.5; }
.mc-fill-verdict:empty { display: none; }
.mc-fill-outhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 24px 0 10px; }
.mc-fill-outhead .make-label { margin: 0; }
.mc-fill-form { margin: 0; }
.mc-fill-out { max-height: 340px; overflow: auto; word-break: normal; overflow-wrap: anywhere; }
.mc-fill-rule { margin: 26px 0 0; padding: 18px; border-radius: 16px; background: var(--tint); border: 1px solid var(--tint-border); }
.mc-fill-rule .mc-fill-out { max-height: none; background: var(--surface); }
.mc-fill-rule[hidden] { display: none; }
.mc-fill-clone { margin-top: 20px; }
:is(#mc-fill-copy, #mc-fill-download):disabled { opacity: 0.5; cursor: default; }
/* The how-it-works prose quotes whole commands; let them wrap on a phone. */
:is(.tool-minecraft-give-command, .tool-minecraft-text-builder, .tool-minecraft-fill-splitter) .prose code { white-space: normal; overflow-wrap: anywhere; }

@media (hover: hover) {
  .icon-btn.mc-give-del:not(:disabled):hover, .icon-btn.mc-txt-del:not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; }
}
.icon-btn.mc-give-del:not(:disabled):active, .icon-btn.mc-txt-del:not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; }

@media (max-width: 600px) {
  .mc-give-top, .mc-txt-top, .mc-fill-top { gap: 14px; }
  .mc-give-ver, .mc-txt-ver, .mc-fill-ver, .mc-give-ver select, .mc-txt-ver select, .mc-fill-ver select { width: 100%; min-width: 0; }
  .mc-give-top .mc-give-field, .mc-txt-top .mc-txt-field, .mc-fill-top .mc-fill-field { flex: 1 1 100%; }
  .mc-give-attr-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mc-give-attr-add > :first-child, .mc-give-attr-add .btn { grid-column: 1 / -1; }
  .mc-give-li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .mc-give-li-tag { grid-row: 2; text-align: left; }
  .mc-give-li .icon-btn { grid-column: 2; grid-row: 1 / span 2; }
  .mc-txt-mode { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc-txt-mode .seg-btn { padding-left: 4px; padding-right: 4px; }
  .mc-txt-prow { flex-wrap: wrap; }
  .mc-txt-prow .mc-txt-text { flex: 1 1 calc(100% - 80px); }
  .mc-txt-prow > .format-select, .mc-txt-prow > .mc-txt-page { order: 3; flex: 1 1 100%; }
  .mc-txt-prow > .format-select select { width: 100%; }
  .mc-txt-prow3, .mc-txt-prow3:has(.mc-txt-value[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .mc-txt-prow3 .format-select, .mc-txt-prow3 .format-select select { width: 100%; }
  .mc-txt-boards { grid-template-columns: minmax(0, 1fr); }
  .mc-txt-signline { font-size: 0.86rem; }
  .mc-fill-corners { grid-template-columns: minmax(0, 1fr); }
  .mc-fill-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-fill-form { width: 100%; }
  .mc-fill-form .seg-btn { flex: 1 1 100%; }
  :is(#mc-fill-copy, #mc-fill-download, #mc-fill-link, #mc-give-copy, #mc-give-copy-bare, #mc-give-link) { flex: 1 1 auto; padding-left: 12px; padding-right: 12px; }
  .mc-fill-out, .mc-give-out { font-size: 0.8rem; }
}
/* ------------------------------------------------------------ minecraft: XP, enchanting table, ore levels, brewing */
/* XP Calculator (mc-xp-): levels in, points out like the tip calculator,
   then points to a level, a table of sources, and death and Mending. */
.mc-xp-field + .mc-xp-field { margin-top: 18px; }
.mc-xp-field .stepper-input { width: auto; flex: 1; min-width: 0; max-width: 150px; }
.mc-xp-quick { margin: 16px 0 0; }
.mc-xp-big small { font-size: 0.4em; font-weight: 500; color: var(--muted); }
.mc-xp-part { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-xp-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 12px 24px; align-items: end; }
.mc-xp-num { font-family: var(--display); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-xp-answer { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--muted); }
.mc-xp-answer b { color: var(--text); font-weight: 600; }
.mc-xp-answer small { display: block; margin-top: 2px; font-size: 0.84rem; color: var(--faint); }
.mc-xp-row .mc-xp-answer { padding-bottom: 4px; }
.mc-xp-scroll, .mc-etab-scroll, .mc-ore-scroll, .mc-brew-scroll { overflow-x: auto; }
.mc-xp-sources tbody th { font-weight: 500; white-space: normal; }
.mc-xp-sources td:nth-child(2) { color: var(--muted); }
.mc-xp-sources .mc-xp-need { font-weight: 600; }
.mc-xp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.mc-xp-select, .mc-xp-select select { width: 100%; }
.mc-xp-select select { font-size: 0.9rem; text-overflow: ellipsis; }
.mc-xp-sub { margin-top: 14px; margin-bottom: 8px; }
.mc-xp-two .mc-xp-answer { margin-top: 12px; }
.mc-xp-each { display: none; }
@media (max-width: 640px) {
  .mc-xp-row, .mc-xp-two { grid-template-columns: 1fr; }
  .mc-xp-sources th:nth-child(2), .mc-xp-sources td:nth-child(2) { display: none; }
  .mc-xp-sources th, .mc-xp-sources td { padding-left: 6px; padding-right: 6px; }
  .mc-xp-each { display: block; font-size: 0.78rem; color: var(--muted); }
}

/* Enchanting Table Odds (mc-etab-): the item, its material and the shelves;
   three tinted slot cards; the chance of one enchantment; then a table of
   every enchantment by slot. */
.mc-etab-top { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 18px 28px; align-items: start; }
.mc-etab-field { min-width: 0; }
.mc-etab-select, .mc-etab-select select { width: 100%; }
.mc-etab-mat { margin: 0; }
.mc-etab-ench { margin: 8px 0 0; }
.mc-etab-shelves { margin: 24px 0 0; }
.mc-etab-shelves-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mc-etab-shelves-head .make-label { margin: 0; }
.mc-etab-shelves-n { font-family: var(--display); font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mc-etab-shelves-row { display: flex; align-items: center; gap: 14px; margin: 8px 0 0; }
.mc-etab-shelves-row .range { flex: 1; min-width: 0; }
.mc-etab-shelves-row .icon-btn { width: 44px; height: 44px; }
.mc-etab-shelves-row .icon-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.mc-etab-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; }
.mc-etab-slot { min-width: 0; padding: 16px 18px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border); }
.mc-etab-slot .make-label { margin-bottom: 6px; }
.mc-etab-pay { display: block; margin-top: 3px; color: var(--muted); letter-spacing: 0.04em; text-transform: none; font-size: 0.72rem; }
.mc-etab-range { margin: 0; font-family: var(--display); font-size: 1.65rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mc-etab-range-note { margin: 4px 0 0; min-height: 1.3em; font-size: 0.8rem; color: var(--muted); }
.mc-etab-sizes-label { margin: 12px 0 6px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mc-etab-sizes { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.mc-etab-size { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.mc-etab-size-n { color: var(--muted); }
.mc-etab-size-p { font-weight: 600; }
.mc-etab-want { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: start; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-etab-want .seg { margin: 0; flex-wrap: nowrap; }
.mc-etab-want-out { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.mc-etab-want-slot { padding: 12px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.mc-etab-want-slot dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mc-etab-want-slot dd { margin: 2px 0 0; font-family: var(--display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-etab-want-note { grid-column: 1 / -1; margin: 0; font-size: 0.86rem; color: var(--muted); }
.mc-etab-table-label { margin-top: 28px; }
.mc-etab-table td { vertical-align: top; }
.mc-etab-table tbody th { font-weight: 500; white-space: normal; }
.mc-etab-any { font-weight: 600; }
.mc-etab-levels { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 8px; margin-top: 2px; font-size: 0.74rem; line-height: 1.45; color: var(--muted); }
.mc-etab-levels span { white-space: nowrap; }
.mc-etab-table tr.is-never { opacity: 0.5; }
.mc-etab-foot { margin-top: 12px; }
@media (max-width: 640px) {
  .mc-etab-top { grid-template-columns: 1fr; }
  .mc-etab-slots { grid-template-columns: 1fr; gap: 8px; }
  .mc-etab-slot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; padding: 14px 16px; }
  .mc-etab-slot > :nth-child(-n+3) { grid-column: 1; }
  .mc-etab-sizes-label { grid-column: 2; grid-row: 1; margin-top: 0; }
  .mc-etab-sizes { grid-column: 2; grid-row: 2 / span 2; align-content: start; }
  .mc-etab-range { font-size: 1.4rem; }
  .mc-etab-want { grid-template-columns: 1fr; }
  .mc-etab-want .seg { flex-wrap: wrap; }
  .mc-etab-want-out { gap: 6px; }
  .mc-etab-want-slot { padding: 10px 12px; }
  .mc-etab-want-slot dd { font-size: 1.2rem; }
  .mc-etab-table th, .mc-etab-table td { padding: 8px 6px; }
  .mc-etab-table { font-size: 0.86rem; }
}

/* Ore Y-Levels (mc-ore-): the ore, then a bar per 8 blocks of height beside
   the tinted answer, a table of every ore, and branch mining tips. */
.mc-ore-pick { margin: 0 0 24px; }
@media (min-width: 701px) {
  .mc-ore-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.mc-ore-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 10px; }
.mc-ore-chart-head .make-label { margin: 0; }
.mc-ore-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; font-size: 0.76rem; color: var(--muted); }
.mc-ore-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mc-ore-key { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); }
.mc-ore-chart { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mc-ore-bar { display: grid; grid-template-columns: 46px minmax(0, 1fr) 104px; align-items: center; gap: 10px; height: 9px; }
.mc-ore-y { font-family: var(--mono); font-size: 0.66rem; line-height: 1; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
.mc-ore-track { display: flex; height: 100%; border-radius: 3px; background: var(--surface); overflow: hidden; }
.mc-ore-fill { height: 100%; background: var(--accent); }
.mc-ore-fill.is-extra, .mc-ore-key.is-extra { background: repeating-linear-gradient(135deg, var(--accent-strong) 0 3px, rgba(163, 127, 248, 0.35) 3px 6px); }
.mc-ore-key.is-best { background: transparent; box-shadow: inset 0 0 0 2px var(--text); }
.mc-ore-bar.is-best .mc-ore-track { box-shadow: 0 0 0 2px var(--text); }
.mc-ore-bar.is-best .mc-ore-y, .mc-ore-bar.is-best .mc-ore-mark { color: var(--text); font-weight: 700; }
.mc-ore-mark { font-family: var(--mono); font-size: 0.64rem; line-height: 1; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-ore-chart-wrap .make-help { margin-top: 14px; }
.mc-ore-best { font-size: 2.8rem; }
.mc-ore-why { margin: 10px 0 0; font-size: 0.92rem; line-height: 1.55; }
.mc-ore-part { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.mc-ore-table td small { margin-left: 6px; font-size: 0.76rem; color: var(--muted); }
.mc-ore-tips { margin: 0; padding: 0 0 0 20px; display: grid; gap: 8px; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.mc-ore-tips b { color: var(--text); font-weight: 600; }
@media (max-width: 700px) {
  .mc-ore-panel { order: -1; }
  .mc-ore-best { font-size: 2.2rem; }
}
@media (max-width: 640px) {
  .mc-ore-pick .seg-btn { padding-left: 11px; padding-right: 11px; font-size: 0.84rem; }
  .mc-ore-bar { grid-template-columns: 38px minmax(0, 1fr) 84px; gap: 8px; }
  .mc-ore-table th, .mc-ore-table td { padding: 8px 6px; }
  .mc-ore-table { font-size: 0.86rem; }
  .mc-ore-table td small { display: block; margin: 0; }
}

/* Brewing Guide (mc-brew-): a card per potion with its chain as chips and a
   table of times; the planner adds rows and answers in a tinted panel with
   the shopping list beside the brewing order. */
.mc-brew-mode { margin: 0 0 22px; }
.mc-brew-find .input { width: 100%; }
.mc-brew-filter { margin: 12px 0 0; }
.mc-brew-count { margin: 14px 0 10px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--faint); }
.mc-brew-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mc-brew-card { min-width: 0; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border); background: rgba(29, 24, 50, 0.5); }
.mc-brew-card-head { display: flex; align-items: center; gap: 10px; }
.mc-brew-name { margin: 0; font-family: var(--display); font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.mc-brew-tag { padding: 2px 8px; border-radius: 999px; font-family: var(--mono); font-size: 0.66rem; color: var(--tint-text); background: var(--tint); border: 1px solid var(--tint-border); }
.mc-brew-plus { margin-left: auto; flex: none; }
.mc-brew-effect { margin: 4px 0 10px; font-size: 0.88rem; color: var(--muted); }
.mc-brew-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.mc-brew-ing { padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; line-height: 1.4; background: var(--surface-2); border: 1px solid var(--border); }
.mc-brew-ing.is-start { color: var(--muted); }
.mc-brew-ing.is-stage { color: var(--tint-text); background: var(--tint); border-color: var(--tint-border); }
.mc-brew-arrow { color: var(--faint); font-size: 0.8rem; }
.mc-brew-alt { margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); }
.mc-brew-times { margin: 10px 0 0; font-size: 0.86rem; }
.mc-brew-times th, .mc-brew-times td { padding: 6px 10px; }
.mc-brew-times tbody th { font-weight: 500; color: var(--muted); }
.mc-brew-times tr:last-child th, .mc-brew-times tr:last-child td { border-bottom: none; }
.mc-brew-build { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 22px; }
.mc-brew-field { min-width: 0; }
.mc-brew-field .seg { margin: 0; }
.mc-brew-wide { flex: 1 1 100%; }
.mc-brew-select, .mc-brew-select select { width: 100%; }
.mc-brew-field .stepper .icon-btn { width: 40px; height: 40px; }
.mc-brew-field .stepper-input { width: 64px; padding-top: 8px; padding-bottom: 8px; }
.mc-brew-add { margin-left: auto; }
.mc-brew-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 8px; }
.mc-brew-head .make-label { margin: 0; }
.mc-brew-rows { list-style: none; margin: 0; padding: 0; }
.mc-brew-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mc-brew-row-n { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-brew-row-name { font-weight: 500; overflow-wrap: anywhere; }
.mc-brew-row-time { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.mc-brew-remove { width: 36px; height: 36px; }
.mc-brew-empty { padding: 10px 0; font-size: 0.9rem; color: var(--faint); }
.mc-brew-panel { margin: 22px 0 0; padding: 22px 24px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border); }
.mc-brew-sum { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 28px; }
.mc-brew-sum .make-label { margin-bottom: 4px; }
.mc-brew-big { margin: 0; font-family: var(--display); font-size: 3rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mc-brew-fuel { flex: 1 1 260px; margin: 0; font-size: 0.92rem; line-height: 1.5; text-align: right; }
.mc-brew-fuel span { display: block; color: var(--muted); font-size: 0.86rem; }
.mc-brew-out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 28px; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--tint-border); }
.mc-brew-shop th, .mc-brew-shop td { padding: 7px 0; border-color: var(--tint-border); }
.mc-brew-shop tbody th { font-weight: 500; white-space: normal; }
.mc-brew-shop th small { display: block; font-weight: 400; font-size: 0.76rem; color: var(--muted); }
.mc-brew-shop td { vertical-align: top; font-weight: 700; padding-left: 12px; }
.mc-brew-shop .mc-brew-none { color: var(--muted); font-weight: 400; text-align: left; }
.mc-brew-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 0.88rem; line-height: 1.45; }
.mc-brew-steps li { padding-left: calc(var(--depth, 0) * 14px); }
.mc-brew-steps li + li { padding-top: 8px; border-top: 1px solid var(--tint-border); }
.mc-brew-brews { margin-left: 4px; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.mc-brew-steps small { display: block; color: var(--muted); font-size: 0.8rem; }
/* Removing something keeps its red. */
.btn.mc-brew-clear:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) {
  .icon-btn.mc-brew-remove:hover, .btn.mc-brew-clear:not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; }
}
.icon-btn.mc-brew-remove:active, .btn.mc-brew-clear:not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; }
@media (max-width: 640px) {
  .mc-brew-card { padding: 14px; }
  .mc-brew-times { font-size: 0.8rem; }
  .mc-brew-times th, .mc-brew-times td { padding: 6px 4px; }
  .mc-brew-times thead th { letter-spacing: 0.02em; font-size: 0.66rem; }
  .mc-brew-add { flex: 1 1 100%; margin-left: 0; }
  .mc-brew-panel { padding: 18px 16px; }
  .mc-brew-big { font-size: 2.4rem; }
  .mc-brew-fuel { text-align: left; }
  .mc-brew-out { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ density
   On a wide screen the whole site is drawn at 80%, the size it was tuned
   to by eye. Phones and tablets keep full size (and 16px inputs, which stop
   iOS zooming). zoom shrinks the viewport units too, so the body's full
   height is scaled back up. */
@media (min-width: 1000px) {
  html { zoom: 0.8; }
  body { min-height: 125vh; }
}

/* ------------------------------------------------------------ Minecraft pickers
   Every box that picks a Minecraft item, block or other game thing works the
   way Give's item box does (public/js/tools/minecraft/picker.js): a mono
   text box you can type an ID or a name into, with a list under it that the
   chevron opens. It fills the field it sits in, and the field sets the
   width. Like a select box, it takes a gold border under the pointer. When
   typed text names nothing in a fixed list, a line under the box says so. */
.mc-pick { display: block; width: 100%; min-width: 0; }
.mc-pick-box { position: relative; display: block; }
.mc-pick-input { font-family: var(--mono); font-size: 0.95rem; padding-right: 44px; text-overflow: ellipsis; }
.mc-pick-input::placeholder { color: var(--faint); opacity: 1; }
/* Chrome's own list button, made invisible and laid over the chevron. */
.mc-pick-input::-webkit-calendar-picker-indicator { position: absolute; top: 0; right: 0; width: 44px; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.mc-pick-box::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
  transition: border-color 140ms ease;
}
.mc-pick-msg { display: block; margin: 6px 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--danger); }
.mc-pick-msg:empty { display: none; }
@media (hover: hover) {
  .mc-pick-box:hover .mc-pick-input:not(.is-invalid) { border-color: var(--gold); }
  .mc-pick-box:hover::after { border-color: var(--gold); }
}
.mc-pick-box:active::after { border-color: var(--gold); }
/* Superflat's layer rows are a tight grid of small boxes; its pickers keep
   the row's size, with a smaller chevron. */
.mc-flat-row .mc-pick-input { padding-right: 28px; }
.mc-flat-row .mc-pick-input::-webkit-calendar-picker-indicator { width: 28px; }
.mc-flat-row .mc-pick-box::after { right: 11px; width: 6px; height: 6px; margin-top: -5px; }
@media (max-width: 640px) {
  .mc-pick-input { font-size: 16px; }
  .mc-flat-row .mc-pick-input { padding-right: 24px; }
  .mc-flat-row .mc-pick-box::after { right: 9px; }
}

/* ---------- SERP Preview task page: no image box, so the page URL and site name share a row */
@media (min-width: 641px) {
  .tool-serp-preview .seo-grid-meta { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .tool-serp-preview .seo-grid-meta > :first-child { grid-column: auto; }
}

/* Unit converter task pages: the worked table inside a how section. */
.prose .uc-worked { margin: 6px 0 16px; }

/* ------------------------------------------------------------ the Tool Map
   /map (build/map.mjs, public/js/map.js): every tool as a node round its
   section, in a stage that fills the window under the top bar, with the same
   tools as a plain list below. Also the way there from every page: the top
   bar's map button (.nav-map) and the home page's line under the sections
   (.map-cta-link); both lean and go gold like every button (the gold block
   above and LEAN in site.js).

   Each section's colour arrives as --c. Nodes rest tinted in it; the one
   under the pointer springs up, fills with it and glows, and everything
   not connected to it dims. Gold is only the press. */
.nav-map {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  background: rgba(29, 24, 50, 0.8);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px 8px 10px;
}
.topbar-inner:not(.has-crumbs) .nav-map { margin-left: -12px; }
.nav-map svg { width: 17px; height: 17px; flex: none; }
.nav-map[aria-current] { color: var(--tint-text); background: var(--tint); border-color: var(--tint-border); }
.nav-map:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 1099px) {
  .has-crumbs .nav-map-label { display: none; }
  .has-crumbs .nav-map { padding: 9px; }
}
@media (max-width: 760px) {
  .nav-map-label { display: none; }
  .nav-map { padding: 9px; }
  .nav-map svg { width: 16px; height: 16px; }
}

.map-cta { margin: 22px 0 0; text-align: center; }
.map-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--border);
}
.map-cta-link svg { width: 18px; height: 18px; color: var(--accent-strong); transition: color 140ms ease; }
.map-cta-link:hover svg, .map-cta-link:active svg { color: var(--bg); }
.map-cta-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* The page: the stage, then the list, then the footer. The stage is the
   window less the top bar (map.js measures the bar into --tm-bar); under the
   wide-screen zoom the viewport units shrink with everything else, so they
   are scaled back up the way the body's height is. */
body.map-page::before { display: none; }
.map-page .site-footer { margin-top: 64px; }
.tm-main { flex: 1; width: 100%; }
.tm-stage {
  --tm-vh: 100svh;
  position: relative;
  height: calc(var(--tm-vh) - var(--tm-bar, 65px));
  min-height: 440px;
  overflow: clip;
  -webkit-user-select: none;
  user-select: none;
  border-bottom: 1px solid var(--border-soft);
  background-image:
    radial-gradient(rgba(237, 234, 246, 0.075) 1px, transparent 1.3px),
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(139, 92, 246, 0.09), transparent 75%);
  background-size: var(--tm-gs, 32px) var(--tm-gs, 32px), 100% 100%;
  background-position: var(--tm-gx, 0px) var(--tm-gy, 0px), 0 0;
}
@media (min-width: 1000px) { .tm-stage { --tm-vh: 125svh; } }

.tm-map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; touch-action: none; cursor: grab; outline: none; }
.tm-map:focus-visible { outline: 2px solid rgba(139, 92, 246, 0.55); outline-offset: -6px; }
.tm-map:not(.is-ready) .tm-world { visibility: hidden; }
.is-panning .tm-map, .is-dragging .tm-map, .is-dragging .tm-node { cursor: grabbing; }

/* Lines: a spoke from the centre to each section, the section's own lines in
   its colour, dashed lines between sections, and the lit ones on top. Widths
   stay the same at every zoom (vector-effect in map.js). */
.tm-e { fill: none; stroke-linecap: round; pointer-events: none; transition: opacity 240ms ease; }
.tm-e-spoke { stroke: rgba(163, 127, 248, 0.36); stroke-width: 1.4; }
.tm-e-tree { stroke: var(--c); stroke-opacity: 0.34; stroke-width: 1; }
.tm-e-cross { stroke: rgba(237, 234, 246, 0.36); stroke-width: 1.1; stroke-dasharray: 3 5; }
.tm-e-lit { stroke: var(--c); stroke-opacity: 0.95; stroke-width: 2.2; }
.tm-e-lit.tm-e-cross { stroke: #edeaf6; stroke-opacity: 0.85; stroke-width: 1.6; stroke-dasharray: 5 5; }
.tm-map.is-lit .tm-e:not(.tm-e-lit) { opacity: 0.28; }

/* Nodes. */
.tm-node { cursor: pointer; outline: none; transition: opacity 240ms ease; }
.tm-node.is-centre { --c: #a37ff8; }
.tm-body {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 240ms ease;
}
.tm-node rect, .tm-node circle { transition: fill 200ms ease, fill-opacity 200ms ease, stroke 200ms ease, stroke-opacity 200ms ease; }
.tm-node svg { overflow: visible; transition: color 160ms ease; }
.tm-node.is-tool rect { fill: color-mix(in srgb, var(--c) 17%, #141120); stroke: var(--c); stroke-opacity: 0.6; stroke-width: 1.2; }
.tm-node.is-tool svg { color: var(--c); }
.tm-node.is-parent rect { fill: color-mix(in srgb, var(--c) 32%, #141120); stroke-width: 1.6; stroke-opacity: 0.85; }
.tm-node.is-section circle { fill: var(--c); stroke: rgba(20, 17, 32, 0.9); stroke-width: 3; }
.tm-node.is-section svg { color: var(--bg); }
.tm-node.is-centre circle { fill: url(#tm-fill); stroke: rgba(20, 17, 32, 0.9); stroke-width: 3; }
.tm-node.is-centre svg { color: #fff; }

.tm-node.is-hot .tm-body { transform: scale(1.5); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 75%, transparent)); }
.tm-node.is-section.is-hot .tm-body { transform: scale(1.22); }
.tm-node.is-centre.is-hot .tm-body { transform: scale(1.12); }
.tm-node.is-tool.is-hot rect { fill: var(--c); stroke: #fff; stroke-opacity: 0.9; }
.tm-node.is-tool.is-hot svg { color: var(--bg); }
.tm-node:focus-visible rect, .tm-node:focus-visible circle { stroke: #fff; stroke-opacity: 1; stroke-width: 2.4; }
.tm-map.is-lit .tm-node:not(.is-near) { opacity: 0.2; }

/* A press: a squish, a pop, and gold. A tool's page opens as it pops; a
   section or the centre gives a smaller one while the map flies. */
.tm-body.is-press { animation: tm-press 380ms cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards; }
.is-section .tm-body.is-press, .is-centre .tm-body.is-press { animation: tm-press-soft 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.tm-body.is-press rect, .tm-body.is-press circle { fill: var(--gold); stroke: var(--gold); }
.tm-body.is-press svg { color: var(--bg); }
@keyframes tm-press {
  0% { transform: scale(1.5); }
  35% { transform: scale(0.88); }
  100% { transform: scale(1.7); }
}
@keyframes tm-press-soft {
  0% { transform: scale(1.22); }
  35% { transform: scale(0.86); }
  100% { transform: scale(1.22); }
}

/* Labels and the name card ride above the SVG in screen pixels, so they
   read the same at any zoom. */
.tm-labels { position: absolute; inset: 0; pointer-events: none; }
.tm-label {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text);
  background: rgba(20, 17, 32, 0.7);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  border-radius: 999px;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  transition: opacity 240ms ease, border-color 200ms ease, background 200ms ease;
}
.tm-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tm-label.is-hot { background: rgba(20, 17, 32, 0.92); border-color: var(--c); }
/* The centre is a pill with the hat, drawn over its node. */
.tm-label.is-centre {
  gap: 8px;
  padding: 7px 16px 7px 12px;
  font-size: 1rem;
  color: #fff;
  background: var(--fill);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: opacity 240ms ease, scale 420ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
}
.tm-label.is-centre::before { display: none; }
.tm-label.is-centre svg { width: 17px; height: 17px; flex: none; }
.tm-label.is-centre.is-hot { scale: 1.07; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.85); }
.tm-labels.is-lit .tm-label:not(.is-near) { opacity: 0.32; }

.tm-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: max-content;
  max-width: min(290px, calc(100% - 16px));
  padding: 10px 14px 11px;
  border-radius: 14px;
  background: rgba(20, 17, 32, 0.95);
  border: 1px solid color-mix(in srgb, var(--c, #8b5cf6) 55%, transparent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.tm-tip.is-on { opacity: 1; }
.tm-tip b { display: block; font-family: var(--display); font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--text); }
.tm-tip span { display: block; margin-top: 3px; font-size: 0.84rem; line-height: 1.4; color: var(--muted); }
.tm-tip small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); }

/* The heading card and the zoom buttons sit in the corners. */
.tm-card {
  position: absolute;
  z-index: 2;
  left: 20px;
  top: 20px;
  max-width: 320px;
  padding: 16px 18px 14px;
  border-radius: 20px;
  background: rgba(20, 17, 32, 0.8);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  -webkit-user-select: text;
  user-select: text;
}
.tm-card h1 { font-size: 1.55rem; margin: 0 0 4px; }
.tm-lede { margin: 0 0 8px; font-size: 0.87rem; line-height: 1.5; color: var(--muted); }
.tm-say-touch { display: none; }
@media (hover: none) {
  .tm-say-mouse { display: none; }
  .tm-say-touch { display: inline; }
}
.tm-to-list { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--accent-strong); text-decoration: none; transition: color 140ms ease; }
.tm-to-list svg { transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.tm-to-list:hover { color: var(--gold); }
.tm-to-list:hover svg { transform: translateY(2px); }
.tm-to-list:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

.tm-controls { position: absolute; z-index: 2; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.tm-ctl { width: 42px; height: 42px; border-radius: 12px; background: rgba(29, 24, 50, 0.88); }
.tm-ctl svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .tm-card { left: 12px; right: 12px; top: 12px; max-width: none; padding: 11px 14px 10px; border-radius: 16px; }
  .tm-card h1 { font-size: 1.2rem; margin: 0 0 2px; }
  .tm-lede { font-size: 0.8rem; margin: 0 0 4px; }
  .tm-to-list { font-size: 0.8rem; }
  .tm-controls { right: 12px; bottom: 12px; }
  .tm-ctl { width: 40px; height: 40px; }
  .tm-label { font-size: 0.74rem; padding: 2px 8px 2px 6px; gap: 5px; }
  .tm-label::before { width: 6px; height: 6px; }
  .tm-label.is-centre { font-size: 0.8rem; padding: 4px 11px 4px 9px; gap: 6px; }
  .tm-label.is-centre svg { width: 14px; height: 14px; }
}
/* A phone on its side: phone-sized labels and a smaller card. */
@media (max-height: 500px) and (min-width: 641px) {
  .tm-card { left: 12px; top: 12px; max-width: 260px; padding: 10px 13px 9px; border-radius: 16px; }
  .tm-card h1 { font-size: 1.15rem; margin: 0 0 2px; }
  .tm-lede { font-size: 0.78rem; margin: 0 0 4px; }
  .tm-label { font-size: 0.74rem; padding: 2px 8px 2px 6px; gap: 5px; }
  .tm-label.is-centre { font-size: 0.8rem; padding: 4px 11px 4px 9px; gap: 6px; }
}

/* The same tools as a list, for reading, crawling and no script. */
.tm-list { width: 100%; max-width: 1160px; margin: 0 auto; padding: 56px 20px 0; }
.tm-list h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 6px; }
.tm-list-lede { margin: 0 0 28px; color: var(--muted); }
.tm-groups { columns: 4 230px; column-gap: 32px; }
.tm-group { break-inside: avoid; margin: 0 0 26px; }
.tm-group h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 1.05rem; }
.tm-group h3::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.tm-group h3 a { color: var(--text); text-decoration: none; }
.tm-group ul { list-style: none; margin: 0; padding: 0; }
.tm-group li { margin: 3px 0; font-size: 0.9rem; line-height: 1.45; }
.tm-group li a { color: var(--muted); text-decoration: none; }
.tm-group a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 3px; }
.tm-group a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.tm-group li ul { margin: 3px 0 6px 3px; padding-left: 12px; border-left: 1px solid var(--border); }
.tm-group li li { font-size: 0.85rem; }

/* ---- Resume Builder ---- */
/* The form on the left, the real page on the right (stacked on phones, form
   first). The page is white paper whatever the theme: it is what prints. */
.tool-resume-builder .tool { max-width: 1240px; }
.tool-resume-builder .tool > :is(h1, .lede, .prose, .privacy-note, .related) { max-width: 760px; margin-left: auto; margin-right: auto; }
.tool-resume-builder .tool-card { padding: 22px; overflow: visible; }
.rb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rb-files { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--border); }
.rb-draft { margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rb-file-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-load { position: relative; display: inline-flex; align-items: center; }
.rb-load:focus-within { box-shadow: var(--focus-ring); }
.btn.is-asking { color: var(--text); border-color: var(--danger); }
.btn.rb-clear:not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; }
@media (hover: hover) { .btn.rb-clear:not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; } }

.rb-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 26px; align-items: start; }
.rb-form { min-width: 0; }
.rb-sec { margin: 0 0 16px; padding: 16px; min-width: 0; border: 1px solid var(--border); border-radius: 18px; background: rgba(14, 11, 24, 0.35); }
.rb-legend { padding: 0 6px; margin-left: -6px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.rb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rb-field { min-width: 0; }
.rb-field .make-label { margin-bottom: 6px; }
.rb-wide { grid-column: 1 / -1; }
.rb-fields .input { padding: 10px 13px; border-radius: 12px; font-size: 0.95rem; }
.rb-area { resize: vertical; min-height: 64px; line-height: 1.45; }
.rb-sec-head { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.input.rb-sec-title { flex: 1; min-width: 0; padding: 9px 12px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; background: transparent; border-color: transparent; }
.input.rb-sec-title:hover { border-color: var(--border); }
.input.rb-sec-title:focus-visible { background: var(--surface-2); }
.icon-btn.rb-mini { width: 34px; height: 34px; border-radius: 10px; color: var(--muted); background: transparent; border-color: var(--border); }
.icon-btn.rb-mini:disabled { opacity: 0.3; cursor: default; transform: none; }
.icon-btn.rb-remove:not(:disabled):active { color: #fff; background: #b9524e; border-color: transparent; }
@media (hover: hover) { .icon-btn.rb-remove:not(:disabled):hover { color: #fff; background: #b9524e; border-color: transparent; } }
.rb-entry { margin: 0 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass); }
.rb-entry-head { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.rb-entry-n { flex: 1; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rb-add { margin-top: 2px; }
.rb-add-sec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.rb-side { position: sticky; top: 84px; min-width: 0; }
.rb-choices { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: flex-start; }
.rb-choices .make-label { margin-bottom: 6px; }
.rb-choices .seg { margin: 0 0 12px; }
.rb-accent-box.is-off { opacity: 0.4; }
.rb-accent { display: block; width: 46px; height: 32px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.rb-accent:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (hover: hover) { .rb-accent:hover { border-color: var(--gold); } }
.rb-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.rb-count { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tint-text); }
.rb-status { margin: 0 0 8px; font-size: 0.86rem; color: var(--muted); }
.rb-status:empty { display: none; }
.rb-missing { margin: 0 0 8px; font-size: 0.86rem; color: var(--gold); }
.rb-pages { display: grid; gap: 14px; max-height: calc(100vh - 250px); min-height: 240px; overflow: auto; padding: 4px; border-radius: 12px; overscroll-behavior: contain; }
.rb-wait { margin: 0; color: var(--muted); }
.rb-page { display: block; width: 100%; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); user-select: text; }
.rb-page text { white-space: pre; }
.rb-sans { font-family: Helvetica, Arial, "Liberation Sans", Arimo, "Nimbus Sans", sans-serif; }
.rb-serif { font-family: "Times New Roman", Times, "Liberation Serif", Tinos, "Nimbus Roman", serif; }
.rb-b { font-weight: 700; }
.rb-i { font-style: italic; }
#rb-print { display: none; }
.rb-jump { display: none; font-size: 0.9rem; color: var(--accent-strong); }

@media (max-width: 900px) {
  .rb-layout { grid-template-columns: minmax(0, 1fr); }
  .rb-side { position: static; }
  .rb-pages { max-height: none; overflow: visible; }
  .rb-jump { display: inline; }
  .rb-side { scroll-margin-top: 70px; }
}
@media (max-width: 520px) {
  .tool-resume-builder .tool-card { padding: 14px; }
  .rb-sec { padding: 12px; }
  .rb-fields { grid-template-columns: minmax(0, 1fr); }
  .rb-entry { padding: 10px; }
  .rb-go .btn { flex: 1 1 auto; }
  .rb-count { width: 100%; margin-left: 0; }
}

@media print {
  body.tool-resume-builder { background: #fff !important; }
  body.tool-resume-builder > :not(main), .tool-resume-builder main.tool > :not(.tool-card), .tool-resume-builder .tool-card > :not(#rb-print) { display: none !important; }
  .tool-resume-builder main.tool, .tool-resume-builder .tool-card { max-width: none; margin: 0; padding: 0; border: 0; background: none !important; box-shadow: none; }
  #rb-print { display: block; }
  #rb-print .rb-page { display: block; border-radius: 0; box-shadow: none; break-after: page; }
  #rb-print .rb-page:last-child { break-after: auto; }
}

/* ---- Sign PDF ---- */
.sg-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.sg-tool { display: inline-flex; align-items: center; gap: 7px; }
.sg-tool svg { width: 16px; height: 16px; }
.sg-hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 1.5em; margin: 12px 0 0; font-size: 0.86rem; color: var(--muted); }
.sg-change { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sg-change:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
@media (hover: hover) { .sg-change:hover { color: var(--gold); } }
.sg-change:active { color: var(--gold); }

/* The pages: a column of white sheets, scrolling in its own box so the
   buttons above stay in reach. */
.sg-pages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: min(78vh, 1100px);
  max-height: min(78svh, 1100px);
  margin: 14px -6px 0;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 16px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
}
.sg-page { position: relative; flex: none; width: 100%; --k: 1; outline: none; border-radius: 3px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
.sg-page:focus-visible { box-shadow: var(--focus-ring); }
.sg-sheet { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: #fff; }
.sg-sheet canvas { display: block; width: 100%; height: 100%; }
.sg-page:not(.is-drawn) .sg-sheet { background: linear-gradient(110deg, #2b2448 30%, #3b3263 50%, #2b2448 70%) 0 0 / 220% 100%; animation: sheet-wait 1.3s linear infinite; }
.sg-page.is-broken .sg-sheet { animation: none; background: #2b2448; }
.sg-layer { position: absolute; inset: 0; }
.sg-num { position: absolute; right: 8px; bottom: 6px; padding: 1px 7px; border-radius: 999px; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); background: rgba(14, 11, 24, 0.75); pointer-events: none; }
.sg-pages.is-armed .sg-page { cursor: crosshair; }
.sg-pages.is-armed .sg-page:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--accent-strong); }

/* A placed item: a picture or a line of text, with a remove button and a
   corner handle while it is chosen. */
.sg-item { position: absolute; box-sizing: border-box; touch-action: none; cursor: move; outline: 1px dashed transparent; outline-offset: 2px; border-radius: 2px; }
.sg-item::before { content: ""; position: absolute; inset: -8px; }
.sg-item img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-select: none; }
.sg-item:hover, .sg-item.is-on { outline-color: var(--accent); }
.sg-item:focus-visible { outline: 2px solid var(--accent); }
.sg-item.is-moving { opacity: 0.85; }
.sg-text {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #111;
  font: inherit;
  font-family: Helvetica, Arial, "Liberation Sans", sans-serif;
  line-height: 1.2;
  cursor: text;
}
.sg-text::placeholder { color: #8a8a8a; }
.sg-item.is-text:not(.is-on) .sg-text:placeholder-shown { background: rgba(139, 92, 246, 0.12); }
.sg-del, .sg-handle { position: absolute; display: none; }
.sg-item.is-on .sg-del, .sg-item:focus-within .sg-del, .sg-item.is-on .sg-handle, .sg-item:focus-within .sg-handle { display: grid; }
@media (hover: hover) { .sg-item:hover .sg-del, .sg-item:hover .sg-handle { display: grid; } }
.sg-del {
  bottom: calc(100% + 6px);
  right: -6px;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(14, 11, 24, 0.9);
  cursor: pointer;
  transition: transform 140ms ease;
}
.sg-del svg { width: 14px; height: 14px; }
.sg-del:hover { background: #b9524e; border-color: transparent; }
.sg-del:active { transform: scale(0.9); }
.sg-del:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sg-handle { left: calc(100% + 1px); top: calc(100% + 1px); width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); cursor: nwse-resize; transform: translate(-35%, -35%); }
@media (hover: none) {
  .sg-del { width: 32px; height: 32px; }
  .sg-handle { width: 24px; height: 24px; }
}

/* The maker: a dialog to draw, type or upload the signature. */
.sg-maker {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border-radius: 22px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.sg-maker::backdrop { background: rgba(8, 6, 16, 0.72); }
.sg-maker-in { padding: 20px 22px 22px; }
.sg-maker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.sg-maker-title { margin: 0; font-size: 1.3rem; }
.sg-how { margin: 0 0 16px; }
.sg-pad-wrap { position: relative; border-radius: 14px; background: #fff; overflow: hidden; }
.sg-pad { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }
.sg-pad-line { position: absolute; left: 22px; right: 22px; bottom: 44px; border-bottom: 1.5px dashed #c4c0d4; pointer-events: none; }
.sg-pad-hint { position: absolute; left: 0; right: 0; bottom: 52px; margin: 0; text-align: center; font-size: 0.9rem; color: #9a96aa; pointer-events: none; transition: opacity 160ms ease; }
.sg-pad-wrap.is-inked .sg-pad-hint { opacity: 0; }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; }
.sg-ink { margin: 0; }
.sg-ink .seg-btn { display: inline-flex; align-items: center; gap: 7px; }
.sg-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.75); }
.sg-panel[data-how="type"] .sg-ink { margin-top: 12px; }
.sg-fonts { display: grid; gap: 8px; margin: 12px 0 0; }
.sg-font {
  display: block;
  width: 100%;
  min-height: 62px;
  padding: 6px 16px;
  overflow: hidden;
  border-radius: 14px;
  border: 2px solid transparent;
  background: #fff;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 2rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
}
.sg-font[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint-strong); }
.sg-font:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (hover: hover) { .sg-font:hover { border-color: var(--gold); } }
.sg-font:active { border-color: var(--gold); transform: scale(0.98); }
.sg-preview { display: grid; place-items: center; min-height: 90px; margin: 12px 0; padding: 12px; border-radius: 14px; font-size: 0.88rem; color: var(--muted); background: repeating-conic-gradient(#f1eff6 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.sg-preview img { display: block; max-width: 100%; max-height: 140px; }
.sg-preview:not(:has(img)) { background: var(--surface-2); }
.sg-panel[data-how="upload"] .toggle { margin-top: 12px; }
.sg-remember { margin: 16px 0 0; }
.sg-maker-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
@media (max-width: 520px) {
  .sg-pages { margin: 14px -12px 0; padding: 10px; gap: 12px; }
  .sg-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sg-tool { justify-content: center; padding-left: 4px; padding-right: 4px; font-size: 0.82rem; }
  .sg-tool svg { display: none; }
  .sg-maker-in { padding: 16px 14px 16px; }
  .sg-pad { height: 170px; }
  .sg-maker-actions .btn { flex: 1 1 0; }
  .sg-font { font-size: 1.6rem; }
}

/* ---- Meme Generator ---- */
.mm-start { text-align: left; }
.mm-or { margin: 22px 0 10px; }
.mm-layouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mm-layout { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; font-size: 0.86rem; }
/* clip, not hidden: the card stays rounded without becoming a scroller, so the picture can stick. */
.mm-work { overflow: clip; text-align: left; width: min(1040px, calc(100vw - 40px)); margin-left: calc(50% - min(520px, 50vw - 20px)); }
.mm-app.is-dragover .mm-work { border-color: var(--accent-strong); }
.mm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; }
.mm-summary { margin: 0; min-width: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.mm-layout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
.mm-stage { display: grid; place-items: center; min-width: 0; padding: 16px; border-radius: 16px; background: var(--bg-deep); border: 1px solid var(--border); position: sticky; top: 84px; }
.mm-frame { position: relative; width: min(100%, calc(72vh * var(--ar, 1))); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--bg) 0 50%) 0 0 / 18px 18px; }
.mm-canvas { display: block; width: 100%; height: 100%; }
.mm-panels, .mm-boxes { position: absolute; inset: 0; }
.mm-boxes { pointer-events: none; }
.mm-empty { position: absolute; display: grid; place-items: center; padding: 8px; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--tint-text); background: transparent; border: 1.5px dashed var(--tint-border); cursor: pointer; transition: border-color 140ms ease; }
.mm-empty span { padding: 6px 12px; border-radius: 999px; background: var(--tint); transition: background-color 140ms ease, color 140ms ease; }
.mm-empty:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
@media (hover: hover) {
  .mm-empty:hover { border-color: var(--gold); }
  .mm-empty:hover span { background: var(--gold); color: var(--bg); }
}
.mm-box { position: absolute; pointer-events: auto; cursor: move; border: 1px dashed rgba(255, 255, 255, 0.5); outline: 1px dashed rgba(0, 0, 0, 0.45); outline-offset: -2px; border-radius: 2px; touch-action: none; }
.mm-box.is-empty { background: rgba(139, 92, 246, 0.14); }
.mm-box.is-selected { border: 1.5px solid var(--accent-strong); outline: none; }
.mm-box.is-dragging { border-color: var(--gold); }
.mm-box:focus-visible { box-shadow: var(--focus-ring); }
.mm-handle { position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; }
.mm-handle::after { content: ""; position: absolute; inset: 5px; border-radius: 4px; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); }
.mm-box:not(.is-selected) .mm-handle { display: none; }
.mm-handle:active::after { background: var(--gold); }
.mm-inline { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 44px; resize: none; padding: 6px; font: 600 1rem var(--body); color: var(--text); background: rgba(20, 17, 32, 0.92); border: 1.5px solid var(--accent); border-radius: 4px; cursor: text; }
.mm-inline:focus-visible { outline: none; }
.mm-panel { min-width: 0; }
.mm-opt .seg { margin: 0 0 18px; }
.mm-color { width: 44px; height: 36px; padding: 2px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; flex: none; }
.mm-color:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (hover: hover) { .mm-color:hover { border-color: var(--gold); } }
#mm-bg-row { margin: 0 0 18px; }
.mm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mm-item { padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); transition: border-color 140ms ease; }
.mm-item.is-selected { border-color: var(--tint-border); }
.mm-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.mm-item-name { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); }
.mm-remove { padding: 4px 10px; font-size: 0.78rem; }
.mm-item-text { min-height: 0; resize: vertical; }
.mm-item-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.mm-item-tools .seg { margin: 0; gap: 4px; }
.mm-align .seg-btn { display: inline-grid; place-items: center; padding: 5px 8px; }
.mm-none { color: var(--muted); font-size: 0.9rem; }
.mm-adds { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 12px 0 0; }
.mm-stickers summary { list-style: none; }
.mm-stickers summary::-webkit-details-marker { display: none; }
.mm-sticker-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; }
.mm-sticker { padding: 6px 0; font-size: 1.2rem; line-height: 1; }
.mm-panel .make-help + .mm-opt { margin-top: 20px; }
.mm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-actions .btn { flex: 1 1 0; white-space: nowrap; }
.mm-nomark { margin-top: 10px; }
.mm-panel .save-status:empty { display: none; }
@media (max-width: 860px) {
  .mm-layout-grid { display: block; }
  .mm-panel { margin-top: 20px; }
  /* Stacked, the picture stays in view while the boxes below are edited. */
  .mm-stage { top: 64px; z-index: 3; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
  .mm-frame { width: min(100%, calc(36vh * var(--ar, 1))); }
}
@media (max-width: 640px) {
  .mm-work { width: auto; margin-left: 0; }
  .mm-layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-stage { padding: 8px; }
}

/* ---- Sprite Sheet Packer ---- */
.ssp-mode { justify-content: center; margin: 0 0 20px; }
.ssp-folder-row { display: flex; justify-content: center; margin: 12px 0 0; }
.ssp-work { text-align: left; margin-top: 20px; width: min(1040px, calc(100vw - 40px)); margin-left: calc(50% - min(520px, 50vw - 20px)); }
.ssp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; }
.ssp-summary { margin: 0; min-width: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.ssp-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.ssp-opt .seg { margin: 0 0 18px; }
.ssp-nums { display: flex; gap: 10px; margin: 0 0 14px; }
.ssp-num, .ssp-name { flex: 1; min-width: 0; display: block; }
.ssp-num .make-label, .ssp-name .make-label { margin-bottom: 6px; }
.ssp-num .input { padding: 10px 12px; font-variant-numeric: tabular-nums; }
.ssp-toggles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 0; }
.ssp-grid-opts .ssp-toggles { grid-template-columns: minmax(0, 1fr); }
.ssp-stats .stat-num { font-size: 1.3rem; }
.ssp-ustats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ssp-page-seg { margin: 18px 0 0; }
.ssp-stage { display: grid; place-items: center; margin: 18px 0 0; padding: 16px; border-radius: 16px; background: var(--bg-deep); border: 1px solid var(--border); overflow: auto; max-height: 70vh; }
.ssp-canvas { display: block; max-width: 100%; height: auto; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--bg) 0 50%) 0 0 / 16px 16px; }
.ssp-canvas.is-pixel { image-rendering: pixelated; }
.ssp-export { margin: 22px 0 0; }
.ssp-export .tool-actions { margin-top: 14px; }
.ssp-name { max-width: 320px; }
.ssp-anim { margin: 22px 0 0; }
.ssp-anim-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.ssp-anim-stage { display: grid; place-items: center; min-width: 120px; min-height: 120px; max-width: 100%; padding: 12px; border-radius: 16px; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--bg) 0 50%) 0 0 / 16px 16px; border: 1px solid var(--border); }
.ssp-anim-canvas { display: block; max-width: 100%; image-rendering: pixelated; }
.ssp-anim-controls { flex: 1 1 200px; display: grid; gap: 10px; justify-items: start; }
.ssp-anim-controls .range { width: 100%; }
.ssp-range-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; margin-bottom: 0; }
.ssp-range-label output { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .ssp-opts, .ssp-toggles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ssp-work { width: auto; margin-left: 0; }
  .ssp-stage { padding: 8px; }
}

/* ---- Image to SVG ---- */
.vz-work { text-align: left; width: min(1040px, calc(100vw - 40px)); margin-left: calc(50% - min(520px, 50vw - 20px)); }
.vz-app.is-dragover .vz-work { border-color: var(--accent-strong); }
.vz-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.vz-summary { margin: 0; min-width: 0; flex: 1 1 200px; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-modes { margin: 0 0 14px; }
.vz-note { margin: -4px 0 14px; color: var(--gold); }
.vz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.vz-left { min-width: 0; }
.vz-view-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.vz-view-bar .seg { margin: 0; }
.vz-zoom { display: inline-flex; align-items: center; gap: 8px; }
.vz-zoom-btn { width: 34px; height: 34px; font-size: 1.15rem; line-height: 1; }
.vz-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.vz-zoom-val { min-width: 3.2em; text-align: center; font-family: var(--mono); font-size: 0.78rem; color: var(--text); font-variant-numeric: tabular-nums; }
.vz-stage { position: relative; border-radius: 16px; background: var(--bg-deep); border: 1px solid var(--border); overflow: hidden; }
.vz-scroll { display: flex; max-height: min(70vh, 680px); min-height: 220px; padding: 14px; overflow: auto; }
.vz-frame { position: relative; flex: none; margin: auto; width: var(--pw, 300px); height: var(--ph, 200px); }
.vz-pane { position: absolute; inset: 0; overflow: hidden; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--bg) 0 50%) 0 0 / 16px 16px; }
.vz-pane-b { clip-path: inset(0 0 0 var(--split, 50%)); }
.vz-img { display: block; width: 100%; height: 100%; }
.vz-img.is-big { image-rendering: pixelated; }
.vz-tag { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(14, 11, 24, 0.78); color: var(--text); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.vz-pane-b .vz-tag { left: auto; right: 8px; }
.vz-divider { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 30px; margin-left: -15px; cursor: ew-resize; touch-action: none; }
.vz-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 14px; width: 2px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
.vz-knob { position: absolute; top: 50%; left: 3px; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); transition: background-color 140ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.vz-divider:active .vz-knob { background: var(--gold); transform: scale(0.9); }
@media (hover: hover) { .vz-divider:hover .vz-knob { background: var(--gold); } }
.vz-stage[data-view="side"] .vz-frame { display: flex; gap: 10px; width: auto; height: auto; }
.vz-stage[data-view="side"] .vz-frame[data-dir="col"] { flex-direction: column; }
.vz-stage[data-view="side"] .vz-pane { position: relative; inset: auto; flex: none; width: var(--pw); height: var(--ph); }
.vz-stage[data-view="side"] .vz-pane-b { clip-path: none; }
.vz-stage[data-view="side"] .vz-divider { display: none; }
.vz-busy { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(14, 11, 24, 0.9); border: 1px solid var(--border); }
.vz-busy-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.vz-split-row { margin: 14px 0 0; }
.vz-split-row .make-label { margin-bottom: 4px; }
.vz-stats { margin: 12px 0 0; min-height: 1.3em; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.vz-panel { min-width: 0; }
.vz-group { margin: 0 0 18px; }
.vz-group .seg { margin: 0 0 14px; }
.vz-slider { margin: 0 0 8px; }
.vz-range-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 0; }
.vz-range-label output { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; text-transform: none; }
.vz-slider .range:disabled { opacity: 0.45; }
.vz-row { margin: 4px 0 0; }
.vz-toggles { grid-template-columns: 1fr; margin: 12px 0 0; }
.vz-palette { display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.vz-swatch { position: relative; width: 30px; height: 30px; border-radius: 9px; background: var(--swatch, #000); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); cursor: pointer; transition: box-shadow 140ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.vz-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.vz-swatch:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), var(--focus-ring); }
@media (hover: hover) { .vz-swatch:hover { box-shadow: 0 0 0 2px var(--gold); transform: translateY(-2px); } }
.vz-swatch:active { box-shadow: 0 0 0 2px var(--gold); transform: scale(0.94); }
.vz-export { padding: 16px 0 0; border-top: 1px solid var(--border); }
.vz-wide { width: 100%; margin: 0 0 8px; }
.vz-export .btn:disabled { opacity: 0.5; cursor: default; }
.vz-png-label { margin: 10px 0 8px; }
.vz-png { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vz-png .seg { margin: 0; }
.vz-png .btn { flex: 1 1 auto; }
.vz-export .save-status:empty { display: none; }
@media (max-width: 820px) {
  .vz-layout { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .vz-modes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
  .vz-modes .seg-btn { padding: 8px 2px; font-size: 0.8rem; }
  .vz-scroll { padding: 10px; min-height: 180px; }
}

/* ---- Screen Recorder ---- */
.sr-app { display: grid; gap: 18px; }
.sr-setup, .sr-live { text-align: left; }
.sr-setup .seg { margin: 0; }
.sr-support { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--tint-border); background: var(--tint); font-size: 0.88rem; color: var(--tint-text); }
.sr-toggles { margin-top: 20px; }
.sr-bubble { display: grid; gap: 18px; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border); }
.sr-opt .make-label { margin-bottom: 8px; }
.sr-opt .seg { margin: 0; }
.sr-go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 24px 0 0; }
.sr-go { display: inline-flex; align-items: center; gap: 9px; }
.sr-go svg { width: 16px; height: 16px; color: #ff6b6b; }
.sr-format { margin: 0; font-size: 0.86rem; color: var(--muted); }
.sr-setup .error-note { margin-top: 18px; }
.sr-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--bg-deep, #0c0a14); border: 1px solid var(--border); }
.sr-preview { display: block; width: 100%; height: 100%; object-fit: contain; }
.sr-preview.is-mirrored { transform: scaleX(-1); }
.sr-count { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-family: var(--display); font-size: clamp(4rem, 16vw, 8rem); font-weight: 700; color: #fff; background: rgba(14, 11, 24, 0.6); }
.sr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 16px 0 0; }
.sr-meter { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-time { font-size: 1.3rem; color: var(--text); min-width: 4ch; }
.sr-size { font-size: 0.82rem; color: var(--muted); }
.sr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--faint); }
.sr-live.is-recording .sr-dot { background: #ff5c5c; animation: sr-blink 1.2s ease-in-out infinite; }
.sr-live.is-paused .sr-dot { background: var(--gold); animation: none; }
@keyframes sr-blink { 50% { opacity: 0.35; } }
.sr-buttons { display: flex; gap: 10px; }
.sr-buttons .btn { display: inline-flex; align-items: center; gap: 8px; }
.sr-buttons svg { width: 16px; height: 16px; }
.sr-buttons .btn:disabled { opacity: 0.5; cursor: default; }
.sr-status { margin: 12px 0 0; font-size: 0.86rem; color: var(--gold); }
.sr-status:empty { display: none; }
.sr-result { display: block; width: 100%; max-height: 60vh; margin: 0 0 18px; border-radius: 14px; background: #000; border: 1px solid var(--border); }
.sr-trim-note { margin: 16px auto 0; max-width: 52ch; }
@media (max-width: 560px) {
  .sr-toggles { grid-template-columns: 1fr; }
  .sr-bar { flex-direction: column; align-items: stretch; }
  .sr-buttons .btn { flex: 1; justify-content: center; }
  .sr-go { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sr-live.is-recording .sr-dot { animation: none; } }

/* ---- BPM & Key Finder ---- */
.bk-app { display: grid; gap: 18px; }
.bk-app.is-dragover .bk-results { border-color: var(--accent-strong); }
.bk-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bk-listen .btn { display: inline-flex; align-items: center; gap: 8px; }
.bk-listen .btn svg { width: 18px; height: 18px; }
.bk-listen .btn.is-on { border-color: var(--accent); color: var(--text); }
.bk-listen-note { margin: 0; font-size: 0.86rem; color: var(--muted); }
.bk-detail, .bk-results { text-align: left; }
.bk-d-name { margin: 0 0 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-d-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bk-d-panel { padding: 18px 20px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border); min-width: 0; }
.bk-d-panel .make-label { margin-bottom: 6px; }
.bk-big { display: flex; align-items: baseline; gap: 8px; margin: 0; font-family: var(--display); font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.bk-unit { font-family: var(--mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; color: var(--tint-text); }
.bk-d-codes { display: flex; gap: 8px; margin: 10px 0 0; }
.bk-chip { padding: 3px 11px; border-radius: 999px; font-family: var(--mono); font-size: 0.85rem; color: var(--fill-text); background: var(--fill); }
.bk-d-line { margin: 8px 0 0; font-size: 0.86rem; color: var(--muted); }
.bk-check { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border); }
.bk-pick { margin: 0 0 14px; }
.bk-pick .seg-btn:disabled { opacity: 0.45; cursor: default; }
.bk-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.bk-play { display: inline-flex; align-items: center; gap: 8px; }
.bk-play svg { width: 16px; height: 16px; }
.bk-play:disabled { opacity: 0.5; cursor: default; }
.bk-vol { flex: 1 1 160px; max-width: 240px; }
.bk-vol .make-label { margin-bottom: 4px; }
.bk-clock { margin: 0 0 0 auto; font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bk-tap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 0; }
.bk-tap-out { margin: 0; font-size: 0.88rem; color: var(--muted); }
.bk-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bk-results-h { margin: 0; font-size: 1.15rem; }
.bk-results-actions { display: flex; gap: 8px; }
.bk-results-actions .btn:disabled { opacity: 0.5; cursor: default; }
.bk-status { margin: 8px 0 0; font-size: 0.86rem; color: var(--muted); }
.bk-status:empty { display: none; }
.bk-table-wrap { margin: 12px 0 0; }
.bk-table { table-layout: fixed; }
.bk-table th:first-child { width: 40%; }
.bk-table tbody th { font-weight: 500; }
.bk-name { display: block; width: 100%; padding: 4px 8px; margin: -4px -8px; font: inherit; color: var(--text); text-align: left; background: none; border: 0; border-radius: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.bk-name:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bk-row.is-picked th, .bk-row.is-picked td { background: var(--tint); }
.bk-row.is-picked .bk-name { color: var(--tint-text); font-weight: 600; }
.bk-c-state { text-align: left !important; color: var(--muted); white-space: normal !important; }
.bk-row.is-error .bk-c-state { color: #ff8a8a; }
.bk-row.is-working .bk-c-state { color: var(--tint-text); }
@media (hover: hover) {
  .bk-name:hover { color: var(--gold); }
}
@media (max-width: 560px) {
  .bk-d-grid { grid-template-columns: 1fr; }
  .bk-col-open { display: none; }
  .bk-table th:first-child { width: 44%; }
  .bk-table th, .bk-table td { padding: 9px 6px; }
  .bk-clock { margin-left: 0; }
}

/* ---- Bingo Card Generator and Tournament Bracket Maker ----
   Bingo (bc-): settings, a preview of cards drawn as paper, the caller, and
   a print layout built only while printing. Brackets (tb-): matches placed
   absolutely over an SVG of lines, scrolling sideways inside the card only. */
.bc-words-pane { margin: 0 0 22px; }
.bc-words, .tb-players { width: 100%; resize: vertical; min-height: 150px; }
.bc-pics { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 0; }
.bc-pic-help { margin: 0; }
.bc-pic-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bc-pic-list:empty { display: none; }
.bc-pic { display: flex; align-items: center; gap: 8px; max-width: 220px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: 0.82rem; }
.bc-pic img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; background: #fff; }
.bc-pic span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-pic-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 1.1rem; cursor: pointer; }
.bc-pic-x:hover, .bc-pic-x:focus-visible { color: #fff; background: #b9524e; outline: none; }
.bc-opts { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: flex-start; }
.bc-opts .seg { margin: 0; }
.bc-texts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 0; }
.bc-free-row { display: flex; align-items: center; gap: 10px; }
.bc-free-toggle { flex: none; padding: 13px 12px; }
.bc-free-row .input:disabled { opacity: 0.5; }
.bc-free-toggle:has(input:disabled) { opacity: 0.5; cursor: default; }
.bc-status { margin: 0; color: var(--muted); font-size: 0.9rem; }
.bc-out { margin: 26px 0 0; }
.bc-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 0 0 24px; }
.bc-card { container-type: inline-size; background: #fff; color: #1a1724; border-radius: 14px; padding: 14px 14px 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.bc-card-title { margin: 0 0 8px; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(0.9rem, 8cqi, 2rem); line-height: 1.15; overflow-wrap: anywhere; }
.bc-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.bc-size-3 { --n: 3; }
.bc-size-4 { --n: 4; }
.bc-size-5 { --n: 5; }
.bc-grid th { background: #1a1724; color: #fff; font-family: var(--display); font-size: calc(100cqi / var(--n) * 0.42); line-height: 1.3; border: 1.5px solid #1a1724; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bc-cell { height: calc(100cqi / var(--n)); padding: 2px; border: 1.5px solid #1a1724; text-align: center; vertical-align: middle; font-size: calc(100cqi / var(--n) * 0.24 * var(--k, 1)); line-height: 1.1; overflow-wrap: break-word; overflow: hidden; }
.bc-cell.is-num { font-family: var(--display); font-weight: 700; font-size: calc(100cqi / var(--n) * 0.4); }
.bc-cell.is-free { background: #ebe8f3; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bc-cell.is-pic img { display: block; margin: 0 auto; max-width: 92%; max-height: calc(100cqi / var(--n) - 8px); object-fit: contain; }
.bc-card-n { margin: 4px 0 0; text-align: right; font-size: 0.66rem; color: #6f6a80; }
.bc-actions { margin: 18px 0 0; }
.bc-caller { margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); }
.bc-call-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.bc-call { display: grid; place-items: center; min-width: 150px; min-height: 104px; padding: 10px 20px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); font-family: var(--display); font-size: 2.6rem; font-weight: 700; line-height: 1.1; color: var(--faint); text-align: center; overflow-wrap: anywhere; }
.bc-call.is-called { background: var(--tint); border-color: var(--tint-border); color: var(--tint-text); }
.bc-call img { max-width: 84px; max-height: 84px; border-radius: 10px; background: #fff; }
.bc-call span { font-size: 0.9rem; font-family: var(--body); font-weight: 600; }
.bc-call-count { margin: 0 0 10px; color: var(--muted); font-size: 0.9rem; }
.bc-call-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.bc-called { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bc-called li { font-family: var(--mono); font-size: 0.78rem; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-called li:first-child { background: var(--tint); border-color: var(--tint-border); color: var(--tint-text); }
@media (max-width: 560px) {
  .bc-texts { grid-template-columns: 1fr; }
  .bc-call { min-width: 120px; min-height: 88px; font-size: 2.1rem; }
}
@media screen { .bc-sheets { display: none; } }
@media print {
  html:has(body.bc-printing), body.bc-printing { background: #fff !important; }
  body.bc-printing::before, body.bc-printing > :not(.bc-sheets) { display: none !important; }
  .bc-sheets { color: #1a1724; }
  .bc-sheet { display: grid; gap: 8mm; justify-content: center; align-content: start; break-after: page; }
  .bc-sheet:last-child { break-after: auto; }
  .bc-sheets .bc-card { box-shadow: none; border-radius: 0; padding: 0; break-inside: avoid; }
  .bc-per-1 .bc-card { width: 175mm; }
  .bc-per-2 .bc-card { width: 108mm; }
  .bc-per-4 .bc-sheet { grid-template-columns: 88mm 88mm; }
  .bc-caller-sheet h2 { font-size: 16pt; margin: 0 0 6mm; }
  .bc-tick { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 8mm; font-size: 10pt; }
  .bc-tick-3 { columns: 3; }
  .bc-tick-4 { columns: 4; }
  .bc-tick-5 { columns: 5; }
  .bc-tick li { display: flex; align-items: center; gap: 3mm; padding: 1.2mm 0; break-inside: avoid; }
  .bc-tick li::before { content: ""; flex: none; width: 3.2mm; height: 3.2mm; border: 0.3mm solid #1a1724; }
  .bc-tick img { width: 9mm; height: 9mm; object-fit: contain; }
}

.tb-setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.tb-setup-grid .seg { margin: 0 0 18px; }
.tb-scores-toggle { margin: 4px 0 0; }
.tb-note { margin: 0; color: var(--muted); font-size: 0.9rem; }
.tb-out { margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); }
.tb-out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tb-status { margin: 0; font-family: var(--display); font-size: 1.12rem; font-weight: 600; line-height: 1.35; }
.tb-status.is-champion { color: var(--tint-text); }
.tb-status.is-champion::before { content: "★ "; color: var(--accent-strong); }
.tb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-help { margin: 10px 0 0; }
.tb-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; margin: 14px 0 0; padding: 6px 2px 12px; outline: none; }
.tb-board { position: relative; }
.tb-lines { position: absolute; inset: 0; overflow: visible; }
.tb-lines path { fill: none; stroke: var(--border); stroke-width: 2; }
.tb-lines path.is-done { stroke: var(--accent); }
.tb-head { position: absolute; margin: 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 20px; white-space: nowrap; }
.tb-board .tb-match { position: absolute; }
.tb-label { display: block; height: 18px; font-family: var(--mono); font-size: 0.66rem; color: var(--faint); line-height: 16px; white-space: nowrap; }
.tb-row { display: flex; height: 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px 10px 0 0; }
.tb-row + .tb-row { border-radius: 0 0 10px 10px; margin-top: -1px; }
.tb-match.is-final .tb-row { border-color: var(--tint-border); }
.tb-slot { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: inherit; background: transparent; color: var(--text); font: inherit; font-size: 0.86rem; text-align: left; outline: none; }
button.tb-slot { cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
button.tb-slot:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
button.tb-slot:active { color: var(--bg); background: var(--gold); }
.tb-seed { flex: none; min-width: 14px; font-family: var(--mono); font-size: 0.66rem; color: var(--muted); }
.tb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-slot.is-win { background: var(--tint-strong); color: #fff; font-weight: 700; }
.tb-slot.is-lose { color: var(--faint); }
.tb-slot.is-tbd { color: var(--faint); font-size: 0.76rem; font-style: italic; }
.tb-slot.is-bye { color: var(--faint); font-style: italic; }
.tb-slot.is-draw { background: var(--tint); color: var(--tint-text); }
.tb-match.is-bye, .tb-match.is-skip { opacity: 0.5; }
.tb-score { flex: none; width: 42px; min-width: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0 9px 0 0; background: var(--surface-2); color: var(--text); font-family: var(--mono); font-size: 0.82rem; text-align: center; outline: none; }
.tb-row + .tb-row .tb-score { border-radius: 0 0 9px 0; }
.tb-score:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.tb-score:disabled { opacity: 0.4; }
.tb-rr { margin: 18px 0 0; }
.tb-table-wrap { overflow-x: auto; }
.tb-table tbody th, .tb-table thead th:nth-child(2) { text-align: left; width: 100%; white-space: normal; }
.tb-rounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 18px; margin: 28px 0 0; }
.tb-round .make-label { margin-bottom: 8px; }
.tb-game { margin: 0 0 12px; }
.tb-draw { margin: 6px 0 0; padding: 3px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; outline: none; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
.tb-draw.is-on { background: var(--tint); border-color: var(--tint-border); color: var(--tint-text); }
.tb-draw:focus-visible { box-shadow: var(--focus-ring); }
.tb-draw:active { color: var(--bg); background: var(--gold); border-color: var(--gold); transform: scale(0.94); }
.tb-rest { margin: 4px 0 0; font-size: 0.82rem; color: var(--muted); }
@media (hover: hover) {
  button.tb-slot:hover, .tb-draw:hover { color: var(--bg); background: var(--gold); border-color: var(--gold); }
  button.tb-slot:hover .tb-seed { color: var(--bg); }
}
@media (max-width: 640px) {
  .tb-setup-grid { grid-template-columns: 1fr; gap: 6px; }
}
@media print {
  body.tool-tournament-bracket-maker { background: #fff !important; color: #000; }
  body.tool-tournament-bracket-maker::before,
  body.tool-tournament-bracket-maker :is(.topbar, footer, .lede, .prose, .privacy-note, .related, .tb-setup, .tb-actions, .tb-help, .starfield) { display: none !important; }
  .tool-tournament-bracket-maker h1 { color: #000; font-size: 18pt; }
  .tool-tournament-bracket-maker .tool-card { background: none; border: 0; box-shadow: none; padding: 0; }
  .tool-tournament-bracket-maker .tb-out { border: 0; margin: 0; padding: 0; }
  .tool-tournament-bracket-maker .tb-scroll { overflow: visible; }
  .tool-tournament-bracket-maker :is(.tb-status, .tb-head, .tb-label, .tb-slot, .tb-seed, .tb-rest, .figures th, .figures td, .make-label) { color: #000 !important; }
  .tool-tournament-bracket-maker .tb-row { background: #fff; border-color: #888; }
  .tool-tournament-bracket-maker .tb-slot.is-win { background: #e3dcf7; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tool-tournament-bracket-maker .tb-score { background: #fff; color: #000; border-color: #888; }
  .tool-tournament-bracket-maker .tb-lines path { stroke: #999; }
  .tool-tournament-bracket-maker .tb-lines path.is-done { stroke: #5b3fd0; }
  .tool-tournament-bracket-maker .tb-draw { display: none; }
  .tool-tournament-bracket-maker .tb-match { break-inside: avoid; }
}

/* ---- Lorem Ipsum Generator ---- */
.li-controls { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: end; }
.li-controls .seg { margin: 0; }
.li-start { margin: 22px 0 0; }
.li-out-label { margin-top: 22px; }
.li-out { min-height: 240px; resize: vertical; font-size: 0.95rem; line-height: 1.6; }
.li-count-line { margin: 8px 0 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) {
  .li-unit, .li-format { flex-basis: 100%; }
  .li-out { min-height: 200px; }
}

/* ---- JSON to TypeScript ---- */
.jt-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; margin: 0 0 16px; }
.jt-top .seg { margin: 0; }
.jt-top .make-label { display: block; margin: 0 0 8px; }
.jt-name { flex: 1 1 180px; max-width: 260px; }
.jt-root { width: 100%; font-family: var(--mono); }
.jt-toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.jt-ts-opts[hidden] { display: none; }
.jt-out { min-height: 320px; tab-size: 2; }
@media (max-width: 560px) {
  .jt-name { max-width: none; flex-basis: 100%; }
  .jt-toggles, .jt-toggles .toggle { flex: 1 1 100%; }
  .jt-out { min-height: 260px; }
}

/* ---- Team Generator ---- */
.tg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.tg-names { width: 100%; resize: vertical; min-height: 210px; }
.tg-apart { width: 100%; resize: vertical; min-height: 76px; }
.tg-mode { margin: 0 0 18px; }
.tg-stepper { margin: 0 0 18px; }
.tg-balance { margin: 0 0 18px; }
.tg-note { margin: 0; color: var(--muted); font-size: 0.9rem; }
.tg-out { margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); }
.tg-out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tg-status { margin: 0; font-family: var(--display); font-size: 1.08rem; font-weight: 600; line-height: 1.35; }
.tg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-warn { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(232, 180, 79, 0.35); background: rgba(232, 180, 79, 0.07); font-size: 0.88rem; color: var(--text); }
.tg-copied { margin: 8px 0 0; min-height: 1.3em; font-size: 0.86rem; color: var(--tint-text); }
.tg-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 6px 0 0; }
.tg-team { padding: 14px 14px 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--glass); min-width: 0; }
.input.tg-team-name { width: 100%; padding: 7px 10px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; background: transparent; border-color: transparent; }
.input.tg-team-name:hover { border-color: var(--border); }
.input.tg-team-name:focus-visible { background: var(--surface-2); }
.tg-meta { margin: 2px 10px 8px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tg-list { margin: 0; padding: 0 0 0 10px; list-style: none; counter-reset: tg; }
.tg-list li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px solid var(--border-soft); counter-increment: tg; overflow-wrap: anywhere; }
.tg-list li::before { content: counter(tg); flex: none; width: 1.4em; font-family: var(--mono); font-size: 0.74rem; color: var(--faint); }
.tg-skill { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--tint); color: var(--tint-text); font-family: var(--mono); font-size: 0.74rem; }
@media (max-width: 640px) {
  .tg-grid { grid-template-columns: 1fr; gap: 6px; }
  .tg-names { min-height: 160px; }
  .tg-teams { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---- Code Formatter ---- */
/* Options in a wrapping row, the code in, a line saying what happened, then
   the result in a dark read-only box with Copy and Download. */
.cdf-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin: 0 0 20px; }
.cdf-opt { min-width: 0; }
.cdf-opt[hidden] { display: none; }
.cdf-opt .make-label { display: block; margin: 0 0 8px; }
.cdf-opt .seg { margin: 0; }
.cdf-select select { min-width: 190px; }
.cdf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin: 0 0 8px; }
.cdf-head .make-label { margin: 0; }
.cdf-head-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cdf-box { width: 100%; min-height: 200px; font-family: var(--mono); font-size: 0.86rem; line-height: 1.6; tab-size: 4; text-align: left; font-variant-ligatures: none; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.cdf-box.is-over { border-color: var(--accent); box-shadow: var(--focus-ring); }
.cdf-result { background: var(--bg); min-height: 240px; }
.cdf-msg { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.cdf-msg:empty { display: none; }
.cdf-msg[data-tone="ok"] { color: var(--tint-text); }
.cdf-msg[data-tone="error"] { color: var(--danger); }
.cdf-out { margin: 20px 0 0; }
@media (max-width: 640px) {
  .cdf-opts { gap: 12px; }
  .cdf-opt, .cdf-select, .cdf-select select { width: 100%; }
  .cdf-head-btns { justify-content: flex-start; }
}

/* ---- Palette Generator and Palette from Image ---- */
/* pl- is the export panel both share, pal- the generator, pfi- the image page. */
.pal-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pal-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 0 0 18px; }
.pal-bar .seg { margin: 0; }
.pal-rules { min-width: 0; }
.pal-count .stepper .icon-btn { width: 40px; height: 40px; }
.pal-count .stepper-input { width: 60px; padding: 8px 10px; }
.pal-strip { display: flex; height: 340px; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
.pal-sw { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 4px; background: var(--c); color: var(--ink); transition: flex-grow 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.pal-sw.is-dragging { z-index: 2; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); transition: none; cursor: grabbing; }
.pal-pick { position: absolute; inset: 0; cursor: pointer; }
.pal-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pal-pick:focus-within { box-shadow: inset 0 0 0 3px var(--ink); }
.pal-info, .pal-tools { position: relative; z-index: 1; }
.pal-info { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; text-align: center; }
.pal-hex { width: 100%; min-width: 0; padding: 6px 2px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; font-family: var(--mono); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; outline: none; transition: border-color 140ms ease, background-color 140ms ease; }
.pal-hex:hover { border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.pal-hex:focus-visible { background: color-mix(in srgb, var(--c) 80%, var(--ink) 20%); border-color: var(--ink); text-transform: none; }
.pal-hex.is-invalid { border-color: var(--danger); }
.pal-strip[data-many] .pal-hex { font-size: min(0.86rem, calc(6.4rem / var(--n))); letter-spacing: 0; }
.pal-strip[data-many] .pal-ink-name { display: none; }
.pal-strip[data-many] .pal-ink-pass { display: block; }
.pal-strip[data-many] .pal-ink-dot { display: none; }
.pal-ink { margin: 0; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; opacity: 0.85; line-height: 1.35; }
.pal-ink span { white-space: nowrap; }
.pal-ink-name { display: block; }
.pal-tools { order: -1; display: flex; flex-direction: column; gap: 6px; margin-bottom: auto; }
.icon-btn.pal-tool { width: 36px; height: 36px; border-radius: 11px; color: var(--ink); background: transparent; border-color: transparent; }
.icon-btn.pal-tool.is-on { background: color-mix(in srgb, var(--ink) 18%, transparent); border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.icon-btn.pal-tool:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
.icon-btn.pal-tool:disabled { opacity: 0.35; cursor: default; }
.pal-grip { cursor: grab; touch-action: none; }
.pal-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 26px; }
.pal-go .make-help { margin: 0; }

.pl-export { border-top: 1px solid var(--border); padding-top: 22px; }
.pl-formats { margin: 0 0 12px; }
.pl-code { margin: 0 0 12px; padding: 14px 16px; max-height: 260px; overflow: auto; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-deep); color: var(--text); font-family: var(--mono); font-size: 0.8rem; line-height: 1.55; white-space: pre; outline: none; }
.pl-code:focus-visible { box-shadow: var(--focus-ring); }
.pl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-actions a.btn { text-decoration: none; }

.pfi-work { text-align: left; }
.pfi-app.is-dragover .pfi-work { border-color: var(--accent-strong); }
.pfi-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.pfi-summary { margin: 0; min-width: 0; flex: 1 1 200px; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfi-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin: 0 0 24px; }
.pfi-pic { min-width: 0; }
.pfi-canvas { display: block; max-width: 100%; max-height: 420px; margin: 0 auto; border-radius: 14px; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--bg) 0 50%) 0 0 / 16px 16px; }
.pfi-bars { display: flex; height: 18px; margin: 12px 0 0; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.pfi-bars span { flex-basis: 0; min-width: 2px; }
.pfi-range-label output { color: var(--text); margin-left: 6px; }
.pfi-side .range { width: 100%; margin: 0 0 16px; }
.pfi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pfi-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) 76px; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.pfi-chip { width: 40px; height: 40px; border-radius: 9px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.pfi-codes { display: flex; flex-wrap: wrap; gap: 2px 6px; min-width: 0; }
.pfi-code { padding: 3px 6px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font-family: var(--mono); font-size: 0.82rem; cursor: pointer; outline: none; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
.pfi-code-rgb { color: var(--muted); font-size: 0.74rem; }
.pfi-code:focus-visible { box-shadow: var(--focus-ring); }
.pfi-code:active { color: var(--bg); background: var(--gold); transform: scale(0.94); }
.pfi-share { display: grid; gap: 4px; justify-items: end; }
.pfi-pct { font-family: var(--mono); font-size: 0.8rem; color: var(--text); font-variant-numeric: tabular-nums; }
.pfi-meter { width: 100%; height: 4px; border-radius: 999px; background: var(--bg-deep); overflow: hidden; }
.pfi-meter span { display: block; width: var(--w); height: 100%; background: var(--accent); }
@media (hover: hover) {
  .pfi-code:hover { color: var(--bg); background: var(--gold); border-color: var(--gold); }
}
@media (max-width: 640px) {
  .pal-strip { flex-direction: column; height: auto; }
  .pal-sw { flex: none; flex-direction: row; justify-content: flex-start; min-height: 68px; padding: 8px 8px 8px 12px; }
  .pal-info { width: auto; min-width: 0; flex: 1 1 auto; text-align: left; }
  .pal-hex { text-align: left; padding: 4px 6px; }
  .pal-ink { padding: 0 6px; }
  .pal-ink span, .pal-strip[data-many] :is(.pal-ink-name, .pal-ink-pass) { display: inline; }
  .pal-strip[data-many] .pal-ink-dot { display: inline; }
  .pal-strip[data-many] .pal-hex { font-size: 0.86rem; letter-spacing: 0.04em; }
  .pal-tools { order: 0; flex-direction: row; gap: 2px; margin: 0; }
  .icon-btn.pal-tool { width: 34px; height: 34px; }
  .pfi-layout { grid-template-columns: 1fr; }
}

/* ---- Reaction, CPS & Aim Tests ---- */
.rx-modes { margin: 0 0 20px; }
.rx-secs { margin: 0 0 16px; }
.rx-pad {
  display: grid; place-content: center; gap: 6px; width: 100%; min-height: 260px; padding: 28px 18px;
  border-radius: 20px; border: 1px solid var(--border); color: var(--text); text-align: center;
  background: radial-gradient(ellipse at 50% 35%, #2c2449, #15111f 75%);
  font: inherit; cursor: pointer; outline: none; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, border-color 160ms ease;
}
.rx-pad:focus-visible { box-shadow: var(--focus-ring); }
@media (hover: hover) { .rx-pad:hover { border-color: var(--gold); } }
.rx-pad-big { font-family: var(--display); font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rx-pad-line { font-size: 0.95rem; color: var(--muted); max-width: 34ch; margin: 0 auto; }
.rx-pad[data-state="idle"] .rx-pad-big, .rx-pad[data-state="done"] .rx-pad-big { color: var(--tint-text); }
.rx-pad[data-state="wait"] { background: #2a1626; border-color: rgba(240, 145, 141, 0.45); }
.rx-pad[data-state="wait"] .rx-pad-big { color: var(--danger); }
.rx-pad[data-state="go"] { background: #2fbf71; border-color: #2fbf71; transition: none; }
.rx-pad[data-state="go"] .rx-pad-big, .rx-pad[data-state="go"] .rx-pad-line { color: #0b2416; }
.rx-pad[data-state="early"] .rx-pad-big { color: var(--danger); }
.rx-pad[data-state="shown"] .rx-pad-big { color: var(--text); }
.cps-pad[data-state="run"] { background: var(--tint); border-color: var(--tint-border); }
.cps-pad[data-state="cool"] { cursor: default; }
.rx-tries { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rx-try { padding: 8px 4px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--faint); text-align: center; font-family: var(--mono); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.rx-try.is-done { color: var(--tint-text); background: var(--tint); border-color: var(--tint-border); }
.aim-arena {
  position: relative; height: 340px; overflow: hidden; border-radius: 20px; border: 1px solid var(--border);
  background: radial-gradient(ellipse at 50% 35%, #2c2449, #15111f 75%);
  cursor: crosshair; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.aim-arena.is-miss { animation: aim-miss 220ms ease; }
@keyframes aim-miss { from { border-color: var(--danger); } }
.aim-target {
  position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; translate: -50% -50%; padding: 0;
  border-radius: 50%; border: 0; cursor: crosshair; outline: none; color: var(--fill-text);
  background: radial-gradient(circle, #fff 0 18%, #8b5cf6 19% 46%, #fff 47% 56%, #6a3fd6 57%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); touch-action: none;
}
.aim-target.is-start { width: 92px; height: 92px; background: var(--fill); font-family: var(--display); font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.aim-target.is-pop { animation: aim-pop 160ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes aim-pop { from { scale: 0.4; } }
.aim-target:focus-visible { box-shadow: var(--focus-ring), 0 6px 16px rgba(0, 0, 0, 0.45); }
.aim-target:active { scale: 0.92; }
@media (hover: hover) { .aim-target:hover { box-shadow: 0 0 0 3px var(--gold), 0 6px 16px rgba(0, 0, 0, 0.45); } }
.aim-count { position: absolute; right: 14px; top: 10px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); pointer-events: none; }
@media (max-width: 600px) {
  .rx-pad { min-height: 220px; }
  .aim-arena { height: 300px; }
  .aim-target { width: 44px; height: 44px; }
  .rx-try { font-size: 0.72rem; padding: 7px 2px; }
}
@media (prefers-reduced-motion: reduce) { .aim-target.is-pop, .aim-arena.is-miss { animation: none; } }

/* ---- SVG Optimizer ---- */
.so-paste { margin: 14px 0 0; padding: 0; text-align: left; }
.so-paste-head, .so-markup-head { cursor: pointer; padding: 16px 22px; font-weight: 600; font-size: 0.95rem; color: var(--text); border-radius: 20px; }
.so-paste-head::marker, .so-markup-head::marker { color: var(--accent-strong); }
.so-paste-head:focus-visible, .so-markup-head:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.so-paste[open] { padding: 0 22px 20px; }
.so-paste[open] .so-paste-head { margin: 0 -22px 6px; }
.so-code { width: 100%; min-height: 120px; resize: vertical; font-family: var(--mono); font-size: 0.8rem; line-height: 1.5; }
.so-paste-row { display: flex; justify-content: flex-end; margin: 12px 0 0; }
.so-work { margin: 18px 0 0; text-align: left; }
.so-app.is-dragover .so-work { border-color: var(--accent-strong); }
.so-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.so-total { margin: 0; flex: 1 1 220px; min-width: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.so-bar-btns { display: flex; gap: 8px; }
.so-files { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.so-file { display: flex; align-items: stretch; gap: 6px; }
.so-file-pick { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease; }
.so-file-pick[aria-pressed="true"] { background: var(--tint); border-color: var(--tint-border); }
.so-file-pick:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (hover: hover) { .so-file-pick:hover { border-color: var(--gold); } }
.so-file-pick:active { border-color: var(--gold); }
.so-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; font-weight: 600; }
.so-file-meta { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.so-file.is-error .so-file-meta { color: #f0918d; }
.so-file-remove { width: 40px; height: auto; min-height: 40px; font-size: 1.2rem; line-height: 1; }
.so-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.so-pane { margin: 0; min-width: 0; }
.so-view { display: grid; place-items: center; height: 280px; padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--bg) 0 50%) 0 0 / 16px 16px; overflow: hidden; }
.so-view img { display: block; width: 100%; height: 100%; object-fit: contain; }
.so-view img:not([src]) { visibility: hidden; }
.so-pane figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 8px 0 0; font-family: var(--mono); font-size: 0.78rem; color: var(--text); font-variant-numeric: tabular-nums; }
.so-tag { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); }
.so-stats { margin: 12px 0 0; min-height: 1.3em; font-size: 0.9rem; color: var(--muted); overflow-wrap: anywhere; }
.so-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.so-actions .btn { flex: 1 1 160px; }
.so-actions .btn:disabled { opacity: 0.5; cursor: default; }
.so-markup { margin: 14px 0 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.so-markup .so-code { display: block; width: calc(100% - 28px); margin: 0 14px 14px; }
.so-markup-head { padding: 12px 16px; font-size: 0.9rem; }
.so-options { margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border); }
.so-range-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 0; }
.so-range-label output { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0; color: var(--text); text-transform: none; font-variant-numeric: tabular-nums; }
.so-group-label { margin: 22px 0 0; }
.so-toggles { margin: 10px 0 0; }
.so-toggles .toggle { padding: 9px 14px; }
.so-reset-row { display: flex; justify-content: flex-end; margin: 18px 0 0; }
@media (max-width: 560px) {
  .so-view { height: 180px; padding: 8px; }
  .so-compare { gap: 8px; }
  .so-paste-head { padding: 14px 18px; }
  .so-paste[open] { padding: 0 18px 18px; }
  .so-paste[open] .so-paste-head { margin: 0 -18px 6px; }
}
.so-work > .save-status:empty { display: none; }

/* ---- Gradient Generator ---- */
.gg-types { margin: 0 0 18px; }
.gg-stage-box { display: flex; justify-content: center; margin: 0 0 22px; }
.gg-stage {
  position: relative; aspect-ratio: var(--ar, 1.7778); width: min(100%, calc(400px * var(--ar, 1.7778)));
  border-radius: 16px; border: 1px solid var(--border);
  background: conic-gradient(#2a2442 25%, #1d1832 0 50%, #2a2442 0 75%, #1d1832 0) 0 0 / 16px 16px;
}
.gg-preview, .gg-mesh { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 15px; }
.gg-mesh { display: block; }
.gg-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gg-lines path { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gg-handles { position: absolute; inset: 0; pointer-events: none; }
.gg-dot {
  position: absolute; width: 22px; height: 22px; padding: 0; transform: translate(-50%, -50%); pointer-events: auto;
  border: 3px solid #fff; border-radius: 50%; background: var(--c, rgba(20, 17, 32, 0.35)); cursor: grab; touch-action: none; outline: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); transition: border-color 140ms ease, box-shadow 140ms ease;
}
.gg-dot:active { cursor: grabbing; border-color: var(--gold); }
.gg-dot.is-fixed { cursor: pointer; border-radius: 6px; }
.gg-dot.is-active { box-shadow: 0 0 0 3px var(--accent), 0 1px 6px rgba(0, 0, 0, 0.55); }
.gg-dot:focus-visible { box-shadow: 0 0 0 3px var(--accent-strong), 0 0 0 6px rgba(139, 92, 246, 0.5); }
.gg-centre { width: 18px; height: 18px; }

.gg-bar {
  position: relative; height: 34px; margin: 0 11px; border-radius: 10px; cursor: copy; touch-action: none;
  background: conic-gradient(#2a2442 25%, #1d1832 0 50%, #2a2442 0 75%, #1d1832 0) 0 0 / 12px 12px;
}
.gg-bar-fill { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.gg-stops { position: absolute; inset: 0; }
.gg-stop {
  position: absolute; top: 50%; width: 20px; height: 44px; padding: 0; transform: translate(-50%, -50%);
  border: 3px solid #fff; border-radius: 8px; background: var(--c); cursor: grab; touch-action: none; outline: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); transition: border-color 140ms ease, box-shadow 140ms ease;
}
.gg-stop:active { cursor: grabbing; border-color: var(--gold); }
.gg-stop.is-active { z-index: 1; box-shadow: 0 0 0 3px var(--accent), 0 1px 6px rgba(0, 0, 0, 0.55); }
.gg-stop:focus-visible { box-shadow: 0 0 0 3px var(--accent-strong), 0 0 0 6px rgba(139, 92, 246, 0.5); }
#gg-grad .make-help { margin: 14px 0 0; }

.gg-stop-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; margin: 18px 0 0; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.gg-field .make-label, .gg-opt .make-label { margin-bottom: 8px; }
.gg-field-range { flex: 1 1 160px; }
.gg-field-range .range { width: 100%; }
.gg-field-num .input { width: 6.5em; }
.gg-remove { margin-left: auto; }
.gg-colour { display: flex; align-items: center; gap: 8px; }
.gg-swatch { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--c, #7f5af0); border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; overflow: hidden; }
.gg-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gg-swatch:focus-within { box-shadow: var(--focus-ring); }
.gg-hex { width: 9em; font-family: var(--mono); }

.gg-opts { display: flex; flex-wrap: wrap; gap: 18px 32px; margin: 22px 0 0; }
.gg-opt .seg { margin: 0; }
.gg-angle-row { display: flex; align-items: center; gap: 10px; }
.gg-dial { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); cursor: pointer; touch-action: none; outline: none; transition: border-color 140ms ease; }
.gg-dial::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent-strong); }
.gg-dial:focus-visible { box-shadow: var(--focus-ring); border-color: var(--accent); }
.gg-dial:active { border-color: var(--gold); }
.gg-dial-hand { position: absolute; left: 50%; top: 6px; bottom: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--accent-strong); transform-origin: 50% 100%; }
.gg-angle { width: 5.5em; }
.gg-unit { font-size: 0.86rem; color: var(--muted); }
.gg-hint { text-transform: none; letter-spacing: 0; font-family: var(--body); color: var(--faint); }
.gg-pos { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.gg-pos span { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); width: 1em; }
.gg-pos .range { width: 170px; }
.gg-mesh-help { margin: 0; }
.gg-presets-wrap { margin: 24px 0 0; }
.gg-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.gg-preset-sw { display: inline-block; width: 24px; height: 15px; margin-right: 8px; border-radius: 4px; background-size: cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); vertical-align: -2px; }
.gg-size { margin: 0; }
#gg-size-label { margin-top: 22px; }
.gg-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.gg-custom .input { width: 7em; }
.gg-code-wrap { margin: 22px 0 0; }
.gg-code { margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); font-family: var(--mono); font-size: 0.82rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
#gg-mesh-note { margin-top: 18px; }
#gg-random svg { width: 16px; height: 16px; margin-right: 6px; flex: none; }
@media (hover: hover) {
  .gg-dot:hover, .gg-stop:hover, .gg-dial:hover { border-color: var(--gold); }
}
@media (max-width: 640px) {
  .gg-stage { width: min(100%, calc(320px * var(--ar, 1.7778))); }
  .gg-pos .range { width: 100%; flex: 1; }
  .gg-opt { flex: 1 1 100%; }
  .gg-remove { margin-left: 0; }
}

/* ---- Image Studio ---- */
/* Image Studio (st-): the start (a drop zone and a blank-canvas card in the
   text column), then the app, which breaks out of the column to span the
   window like a desktop program: menus and tool options along the top, the
   tools down the left, the picture in the middle, panels on the right and
   the timeline below. On a phone the tools become a strip under the picture
   and the panels open as sheets from a row of tabs. Everything you press
   goes gold under the pointer; what is chosen is filled or tinted purple. */
.st-start { text-align: left; }
.st-new { margin-top: 16px; text-align: left; }
.st-new .make-label { margin: 0 0 12px; }
.st-new-preset { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 16px; }
.st-new-preset .seg-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border-radius: 12px; text-align: left; line-height: 1.2; }
.st-new-preset b { font-weight: 600; font-variant-numeric: tabular-nums; }
.st-new-preset small { font-size: 0.7rem; font-weight: 500; opacity: 0.72; }
.st-new-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.st-new-row > .st-field { flex: 0 0 112px; }
.st-new-row .input { padding: 10px 12px; font-variant-numeric: tabular-nums; }
.st-new-row > .st-new-bgfield { flex: 1 1 auto; }
.st-new-bgrow { display: flex; align-items: center; gap: 10px; }
.st-new-bgrow .seg { margin: 0; }
.st-new-color, .st-field-color { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.st-new-go { margin-left: auto; }
.st-app.is-dragover .st-work { outline: 2px solid var(--accent-strong); outline-offset: -2px; }

/* The app. The site is drawn at 80% on wide screens (see density), which
   shrinks viewport units too, so they are scaled back up to span the window. */
.st-work {
  --vw: 1vw;
  --vh: 1vh;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  width: min(2300px, calc(var(--vw) * 100 - 40px));
  margin-left: calc(50% - min(1150px, var(--vw) * 50 - 20px));
  height: clamp(560px, calc(var(--vh) * 100 - 110px), 1600px);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: var(--shadow);
}
@media (min-width: 1000px) {
  .st-work { --vw: 1.25vw; --vh: 1.25vh; }
}
.st-work[hidden] { display: none; }
.st-work.is-max { position: fixed; inset: 0; z-index: 300; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; }
body.st-max { overflow: hidden; }
.st-work button { font: inherit; }

.st-top { background: var(--surface); border-bottom: 1px solid var(--border); min-width: 0; }
.st-menubar { display: flex; gap: 2px; padding: 4px 8px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.st-menubar::-webkit-scrollbar { display: none; }
.st-menubtn { flex: none; color: var(--muted); background: none; border: 0; padding: 5px 10px; border-radius: 8px; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.st-menubtn.is-open { color: var(--text); background: var(--tint); }
.st-menubtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.st-options { display: flex; align-items: center; gap: 6px 16px; min-height: 44px; padding: 6px 12px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.st-opt-tool { display: inline-flex; align-items: center; gap: 7px; flex: none; padding-right: 14px; border-right: 1px solid var(--border); color: var(--text); font-weight: 600; }
.st-opt-tool svg { color: var(--accent-strong); }
.st-opt, .st-opt-extra { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.st-opt[hidden], .st-check[hidden] { display: none; }
.st-opt-label { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.st-opt-hint { color: var(--faint); }
.st-unit { color: var(--faint); font-size: 0.74rem; }
.st-numwrap { display: inline-flex; align-items: center; gap: 3px; }
.st-num, .st-zoom, .st-hex, .st-rename {
  width: 60px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.st-num:focus-visible, .st-zoom:focus-visible, .st-hex:focus-visible, .st-rename:focus-visible, .st-select:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); }
.st-num-small { width: 42px; }
.st-select {
  font: inherit;
  color: var(--text);
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%239b94b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 26px 4px 8px;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
}
.st-select option { background: var(--surface); }
.st-range {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 4px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 var(--pct, 50%), var(--surface-2) var(--pct, 50%));
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
}
.st-range-small { width: 64px; }
.st-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.st-range::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
.st-range:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.st-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }
.st-seg-btn { color: var(--muted); background: none; border: 0; border-radius: 7px; padding: 3px 9px; font-size: 0.78rem; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.st-seg-btn.is-active { color: var(--fill-text); background: var(--fill); }
.st-seg-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.st-check { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--text); cursor: pointer; }
.st-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.st-check-box { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); transition: background 140ms ease, border-color 140ms ease; }
.st-check input:checked + .st-check-box { background: var(--accent); border-color: transparent; }
.st-check input:checked + .st-check-box::after { content: ""; width: 8px; height: 4px; margin-top: -2px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.st-check input:focus-visible + .st-check-box { box-shadow: var(--focus-ring); }
.st-ob { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 10px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 160ms ease; }
.st-ob:not(.st-ob-text) { padding: 4px 6px; }
.st-ob-go { color: var(--fill-text); background: var(--fill); border-color: transparent; }
.st-ib { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; color: var(--muted); background: none; border: 0; border-radius: 7px; cursor: pointer; transition: background 140ms ease, color 140ms ease, transform 160ms ease; }
:is(.st-ob, .st-ib, .st-tool, .st-menubtn, .st-tab):focus-visible { outline: none; box-shadow: var(--focus-ring); }
:is(.st-ob, .st-ib, .st-tool, .st-seg-btn, .st-tab, .st-ex-btn, .st-anchor-cell):active { transform: scale(0.94); }

.st-body { display: grid; grid-template-columns: 50px minmax(0, 1fr) 276px; min-height: 0; }
.st-tools { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; overflow-y: auto; scrollbar-width: none; background: var(--surface); border-right: 1px solid var(--border); }
.st-tools::-webkit-scrollbar { display: none; }
.st-tool { display: grid; place-items: center; flex: none; width: 40px; height: 36px; padding: 0; color: var(--muted); background: none; border: 0; border-radius: 9px; cursor: pointer; transition: background 140ms ease, color 140ms ease, transform 160ms ease; }
.st-tool.is-active { color: var(--fill-text); background: var(--fill); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.st-swatches { position: relative; flex: none; width: 40px; height: 46px; margin-top: 10px; }
.st-sw { position: absolute; width: 26px; height: 26px; padding: 0; border: 2px solid var(--surface); border-radius: 7px; background: repeating-conic-gradient(#cfcdd6 0 25%, #f4f3f7 0 50%) 0 0 / 8px 8px; box-shadow: 0 0 0 1px var(--border); cursor: pointer; overflow: hidden; }
.st-sw::after { content: ""; position: absolute; inset: 0; background: var(--c, #000); opacity: var(--a, 1); }
.st-sw-primary { left: 0; top: 0; z-index: 1; }
.st-sw-secondary { right: 0; bottom: 2px; }
.st-sw-swap { position: absolute; right: -1px; top: -1px; display: grid; place-items: center; width: 14px; height: 14px; padding: 0; color: var(--muted); background: none; border: 0; border-radius: 4px; cursor: pointer; }
.st-sw-reset { position: absolute; left: 1px; bottom: 0; width: 13px; height: 13px; padding: 0; border: 0; border-radius: 3px; background: linear-gradient(135deg, #000 0 50%, #fff 50%); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }

.st-center { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.st-stage { position: relative; min-height: 0; overflow: hidden; background: #0b0914; touch-action: none; }
.st-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.st-over { outline: none; touch-action: none; -webkit-user-select: none; user-select: none; }
.st-over:focus-visible { box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.6); }
.st-over.is-hand { cursor: grab !important; }
.st-over.is-panning { cursor: grabbing !important; }
.st-textbox { position: absolute; z-index: 2; margin: 0; padding: 0; border: 0; outline: none; background: transparent; color: transparent; caret-color: var(--accent-strong); resize: none; overflow: hidden; white-space: pre; }
.st-textbox::selection { color: transparent; background: rgba(139, 92, 246, 0.35); }

.st-side { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.st-panel { display: flex; flex: none; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--border); }
.st-panel.is-grow { flex: 1 1 0; min-height: 150px; overflow: hidden; }
.st-panel.is-grow[data-panel="layers"] { min-height: 236px; }
.st-panel.is-shut[data-panel] { flex: none; min-height: 0; }
.st-panel.is-shut .st-panel-body { display: none; }
.st-panel-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 12px; color: var(--accent-strong); background: none; border: 0; font-family: var(--mono) !important; font-size: 0.66rem !important; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.st-panel-head svg { transition: transform 200ms ease; }
.st-panel.is-shut .st-panel-head svg { transform: rotate(-90deg); }
.st-panel-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 0 12px 12px; }
.st-panel.is-grow .st-panel-body { flex: 1 1 auto; }
.st-panel-foot { display: flex; justify-content: space-between; gap: 2px; padding-top: 6px; border-top: 1px solid var(--border); }

/* Colour */
.st-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-slot { display: flex; align-items: center; gap: 8px; padding: 5px 8px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; transition: border-color 140ms ease, background 140ms ease; }
.st-slot.is-active { color: var(--text); background: var(--tint); border-color: var(--tint-border); }
.st-slot-chip { width: 18px; height: 18px; flex: none; border-radius: 5px; background: var(--c, #000); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.st-sv-wrap { position: relative; }
.st-sv { display: block; width: 100%; height: 118px; border-radius: 8px; cursor: crosshair; touch-action: none; outline: none; }
.st-sv:focus-visible { box-shadow: var(--focus-ring); }
.st-sv-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); pointer-events: none; }
.st-sliders { display: grid; gap: 8px; }
.st-hue, .st-alpha { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); cursor: pointer; }
.st-hue { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.st-alpha { background: linear-gradient(90deg, transparent, var(--c, #000)), repeating-conic-gradient(#cfcdd6 0 25%, #f4f3f7 0 50%) 0 0 / 8px 8px; }
.st-hue::-webkit-slider-thumb, .st-alpha::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.5); }
.st-hue::-moz-range-thumb, .st-alpha::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
.st-hue:focus-visible, .st-alpha:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.st-hexrow { display: flex; align-items: center; gap: 8px; }
.st-hex { width: 96px; font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase; }
.st-alpha-out { font-family: var(--mono); font-size: 0.76rem; color: var(--text); font-variant-numeric: tabular-nums; }
.st-pal-head { display: flex; gap: 6px; }
.st-pal-select { flex: 1; min-width: 0; }
.st-pal-add { display: grid; place-items: center; width: 30px; padding: 0; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.st-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(19px, 1fr)); gap: 3px; }
.st-swatch { aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); cursor: pointer; transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 140ms ease; }
.st-swatch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.st-pal-empty { grid-column: 1 / -1; margin: 0; color: var(--faint); font-size: 0.76rem; }

/* Layers */
.st-layer-props { display: flex; flex-direction: column; gap: 6px; }
.st-blend { width: 100%; }
.st-opacity { display: flex; align-items: center; gap: 8px; }
.st-opacity .st-range { flex: 1; width: auto; }
.st-opacity-out { width: 36px; font-family: var(--mono); font-size: 0.74rem; text-align: right; font-variant-numeric: tabular-nums; }
.st-layers { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 60px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.st-layer { position: relative; display: flex; align-items: center; gap: 7px; padding: 4px 4px 4px 2px; background: var(--surface-2); border: 1px solid transparent; border-radius: 9px; cursor: pointer; -webkit-user-select: none; user-select: none; transition: border-color 140ms ease, background 140ms ease; }
.st-layer.is-active { background: var(--tint); border-color: var(--tint-border); }
.st-layer:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.st-layer.is-hidden .st-thumb, .st-layer.is-hidden .st-layer-text { opacity: 0.45; }
.st-layer.is-dragging { z-index: 2; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); transition: none; }
.st-layer.is-drop { border-color: var(--gold); }
.st-thumb { flex: none; width: 34px; height: 34px; border-radius: 5px; background: #0b0914; }
.st-layer-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.st-layer-name { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.st-layer-meta { color: var(--faint); font-size: 0.7rem; }
.st-rename { width: 100%; }
.st-lock.is-on { color: var(--accent-strong); }

/* History */
.st-history { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 40px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.st-step { width: 100%; padding: 4px 8px; color: var(--text); text-align: left; background: none; border: 0; border-radius: 7px; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.st-step.is-current { background: var(--tint); }
.st-step.is-future { color: var(--faint); }
.st-history-note { margin: 0; color: var(--faint); font-size: 0.72rem; }

/* Timeline */
.st-bottom { min-width: 0; background: var(--surface); border-top: 1px solid var(--border); }
.st-bottom .st-panel { border-bottom: 0; }
.st-bottom .st-panel-body { gap: 0; padding: 0; }
.st-tl-bar { display: flex; align-items: center; gap: 6px 14px; padding: 4px 10px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.st-tl-toggle { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 8px; color: var(--accent-strong); background: none; border: 0; border-radius: 7px; font-family: var(--mono) !important; font-size: 0.66rem !important; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.st-tl-toggle svg { transform: rotate(-90deg); transition: transform 200ms ease; }
.st-panel.is-open .st-tl-toggle svg { transform: none; }
.st-tl-group { display: inline-flex; align-items: center; gap: 1px; flex: none; }
.st-frame-count { min-width: 56px; padding: 0 6px; color: var(--muted); font-family: var(--mono); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
#st-play { color: var(--text); }
.st-tl-grid { display: none; max-height: 156px; padding: 4px 0 8px; overflow: auto; border-top: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.st-panel.is-open .st-tl-grid { display: block; }
.st-tl-row { display: flex; align-items: center; gap: 2px; width: max-content; min-width: 100%; height: 25px; }
.st-tl-name { position: sticky; left: 0; z-index: 1; flex: 0 0 128px; align-self: stretch; display: flex; align-items: center; padding: 0 10px; overflow: hidden; color: var(--muted); background: var(--surface); font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.st-tl-head .st-tl-name { color: var(--faint); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.st-tl-row.is-layer .st-tl-name { color: var(--text); }
.st-tl-num, .st-tl-cel { display: grid; place-items: center; flex: 0 0 26px; height: 22px; padding: 0; color: var(--faint); background: var(--surface-2); border: 0; border-radius: 5px; font-size: 0.66rem !important; font-variant-numeric: tabular-nums; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.st-tl-cel.has-cel::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.st-tl-num.is-frame, .st-tl-cel.is-frame { color: var(--text); background: var(--tint); }
.st-tl-row.is-layer .st-tl-cel.is-frame { background: var(--tint-strong); box-shadow: inset 0 0 0 1px var(--tint-border); }
.st-tl-row.is-layer .st-tl-cel.is-frame.has-cel::after { background: #fff; }
.st-tl-num.is-dragging { position: relative; z-index: 2; color: var(--bg); background: var(--gold); }

/* Status bar */
.st-status { display: flex; align-items: center; gap: 14px; min-height: 32px; min-width: 0; padding: 2px 6px 2px 12px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--border); font-size: 0.74rem; }
.st-msg { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-msg.is-warn { color: var(--gold); }
.st-msg.is-error { color: var(--danger); }
.st-msg.is-ok { color: var(--tint-text); }
.st-pos, .st-dims { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-pos { min-width: 76px; text-align: right; }
.st-zoombox { display: flex; align-items: center; gap: 1px; }
.st-zoom { width: 62px; font-family: var(--mono); font-size: 0.74rem; text-align: center; }
.st-tabs { display: none; }

/* Menus, out of the app so they are never clipped. */
.st-menu { position: fixed; z-index: 1000; display: flex; flex-direction: column; min-width: 236px; padding: 5px; overflow-y: auto; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); font: 13px/1.3 var(--body); }
.st-menu-item { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 6px 10px 6px 6px; color: var(--text); text-align: left; background: none; border: 0; border-radius: 8px; font: inherit; cursor: pointer; }
.st-menu-item:disabled { color: var(--faint); cursor: default; }
.st-menu-item:focus-visible { outline: none; background: var(--tint); }
.st-menu-check { color: var(--accent-strong); font-size: 0.8rem; }
.st-menu-keys { color: var(--faint); font-family: var(--mono); font-size: 0.68rem; }
.st-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }

/* Dialogs */
.st-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); font: 14px/1.45 var(--body); text-align: left; }
.st-dialog.is-wide { width: min(780px, calc(100vw - 32px)); }
.st-dialog::backdrop { background: rgba(8, 6, 16, 0.62); }
.st-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 4px; }
.st-dlg-title { margin: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.st-dlg-x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--muted); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.st-dlg-body { max-height: calc(100vh - 190px); padding: 12px 18px; overflow: auto; }
.st-dlg-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--border); }
.st-dlg-foot .btn:disabled { opacity: 0.5; cursor: default; }
.st-dlg-text { margin: 0; color: var(--muted); }
.st-form { display: flex; flex-direction: column; gap: 14px; }
.st-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-field[hidden] { display: none; }
.st-field-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); }
.st-field-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
.st-field-range .st-field-label { grid-column: 1 / -1; }
.st-field-range .range { margin: 8px 0; }
.st-field-numwrap { display: inline-flex; align-items: center; gap: 4px; }
.st-field-num { width: 84px; padding: 7px 10px; font-variant-numeric: tabular-nums; }
.st-field .seg { margin: 0; }
.st-field-select { padding: 9px 12px; }
.st-field-colorrow { flex-direction: row; align-items: center; justify-content: space-between; }
.st-field-toggle { margin: 0; }
.st-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.st-row2 .st-field-num { width: 100%; }
.st-help { margin: 0; color: var(--muted); font-size: 0.85rem; }
.st-form-extra { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.st-form-extra .toggle { flex: 1 1 160px; }
.st-anchor { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.st-anchor-cell { width: 34px; height: 34px; padding: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, transform 160ms ease; }
.st-anchor-cell.is-active { background: var(--fill); border-color: transparent; }
.st-curve { width: 100%; max-width: 256px; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 10px; cursor: crosshair; touch-action: none; }
.st-curve:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Export */
.st-ex { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }
.st-ex-list { display: flex; flex-direction: column; gap: 5px; }
.st-ex-btn { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 11px; color: var(--text); text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font: inherit; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 160ms ease; }
.st-ex-btn span { color: var(--faint); font-family: var(--mono); font-size: 0.66rem; }
.st-ex-btn.is-active { color: var(--fill-text); background: var(--fill); border-color: transparent; }
.st-ex-btn.is-active span { color: rgba(255, 255, 255, 0.78); }
.st-ex-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.st-ex-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-ex-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.st-ex-result > div { min-width: 0; padding: 10px 14px; background: var(--tint); border: 1px solid var(--tint-border); border-radius: 14px; }
.st-ex-result dt { color: var(--tint-text); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.st-ex-result dd { margin: 2px 0 0; font-family: var(--display); font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-ex-exact { margin: -4px 0 0; color: var(--muted); font-family: var(--mono); font-size: 0.72rem; overflow-wrap: anywhere; }
.st-ex-main .save-status { margin: 0; text-align: left; }
.st-ex-main .save-status:empty { display: none; }

/* Shortcut list */
.st-keys-head { margin: 16px 0 6px; color: var(--accent-strong); font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.st-keys-head:first-child { margin-top: 0; }
.st-keys-list { display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px; margin: 0; }
.st-keys-list dt { margin: 0; }
.st-keys-list kbd { padding: 2px 7px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 0.74rem; white-space: nowrap; }
.st-keys-list dd { margin: 0; color: var(--muted); }
.st-keys + .st-help, .st-keys .st-help { margin-top: 16px; }

/* Gold under the pointer. */
@media (hover: hover) {
  :is(.st-menubtn, .st-tool, .st-tool.is-active, .st-ib, .st-ob, .st-ob-go, .st-seg-btn, .st-seg-btn.is-active, .st-step, .st-step.is-current, .st-tl-num, .st-tl-cel, .st-tl-toggle, .st-ex-btn, .st-ex-btn.is-active, .st-anchor-cell, .st-anchor-cell.is-active, .st-dlg-x, .st-sw-swap, .st-pal-add, .st-slot, .st-tab, .st-panel-head):hover,
  .st-menu-item:not(:disabled):hover {
    color: var(--bg);
    background: var(--gold);
    border-color: var(--gold);
  }
  .st-tl-cel.has-cel:hover::after { background: var(--bg); }
  .st-menu-item:not(:disabled):hover .st-menu-keys, .st-menu-item:not(:disabled):hover .st-menu-check { color: var(--bg); }
  .st-layer:hover { border-color: var(--gold); }
  :is(.st-swatch, .st-sw, .st-sw-reset):hover { box-shadow: 0 0 0 2px var(--gold); transform: scale(1.12); }
  :is(.st-select, .st-num, .st-zoom, .st-hex):hover { border-color: var(--gold); }
  .st-check:hover .st-check-box { border-color: var(--gold); }
}
:is(.st-menubtn, .st-tool, .st-ib, .st-ob, .st-seg-btn, .st-step, .st-tl-num, .st-tl-cel, .st-ex-btn, .st-anchor-cell, .st-dlg-x, .st-tab):active { color: var(--bg); background: var(--gold); border-color: var(--gold); }

/* Phones: the tools as a strip, the panels as sheets from tabs. */
@media (max-width: 760px) {
  .st-new-preset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-new-row > .st-field { flex: 1 1 calc(50% - 7px); }
  .st-new-go { width: 100%; margin-left: 0; }
  .st-work { grid-template-rows: auto minmax(0, 1fr) auto auto; width: calc(100vw - 16px); margin-left: calc(50% - 50vw + 8px); height: max(520px, calc(100dvh - 72px)); border-radius: 12px; }
  .st-options { min-height: 42px; padding: 5px 10px; }
  .st-body { display: flex; flex-direction: column; }
  .st-center { flex: 1 1 auto; min-height: 0; }
  .st-tools { order: 2; flex-direction: row; align-items: center; gap: 2px; padding: 4px 6px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-top: 1px solid var(--border); }
  .st-tool { width: 40px; height: 40px; }
  .st-swatches { margin: 0 0 0 8px; height: 40px; }
  .st-side, .st-bottom { display: contents; }
  .st-panel { display: none; }
  .st-panel.is-tab { position: absolute; left: 0; right: 0; bottom: 54px; z-index: 5; display: flex; max-height: 58%; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.55); }
  .st-panel.is-tab .st-panel-head { display: none; }
  .st-panel.is-tab .st-panel-body { padding-top: 12px; }
  .st-panel.is-tab.is-grow { min-height: 46%; }
  .st-panel.is-tab .st-tl-grid { display: block; max-height: none; }
  .st-panel.is-tab .st-tl-toggle { display: none; }
  .st-status { gap: 8px; padding-left: 10px; }
  .st-pos, .st-dims { display: none; }
  .st-tabs { display: flex; height: 54px; background: var(--surface); border-top: 1px solid var(--border); }
  .st-tab { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; color: var(--muted); background: none; border: 0; font-size: 0.66rem; cursor: pointer; }
  .st-tab[aria-selected="true"] { color: var(--tint-text); background: var(--tint); }
  .st-ex { grid-template-columns: 1fr; }
  .st-ex-list { flex-direction: row; flex-wrap: wrap; }
  .st-ex-btn { flex: 1 1 calc(33% - 6px); flex-direction: column; gap: 0; }
  .st-dlg-body { max-height: calc(100vh - 170px); }
}
@media (prefers-reduced-motion: reduce) {
  .st-work *, .st-menu * { transition: none !important; }
}

/* ---- Image Studio: Brushes ---- */
/* Two tool columns on wider screens, as Photoshop offers, so the longer palette fits without scrolling. */
@media (min-width: 761px) {
  .st-body { grid-template-columns: 88px minmax(0, 1fr) 276px; }
  .st-tools { display: grid; grid-template-columns: repeat(2, 38px); grid-auto-rows: 36px; justify-content: center; align-content: start; gap: 2px; }
  .st-tools .st-tool { width: 38px; }
  .st-tools .st-swatches { grid-row: span 2; grid-column: 1 / -1; justify-self: center; align-self: start; height: 46px; }
}
.stb-tipbtn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 2px 6px 2px 3px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; transition: border-color 140ms ease; }
.stb-tipbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.stb-tipbtn[aria-expanded="true"] { border-color: var(--accent); }
.stb-tip-thumb { display: block; width: 26px; height: 26px; border-radius: 6px; background: var(--bg); }
.stb-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.stb-tip-pop { min-width: 200px; }
.stb-tip-item { grid-template-columns: 26px 1fr; }
.stb-tip-item[aria-checked="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.stb-sym .st-seg-btn { display: grid; place-items: center; padding: 3px 7px; }
.stb-axis { width: 56px; }
@media (hover: hover) {
  .stb-tipbtn:hover { border-color: var(--gold); color: var(--text); }
}
.stb-tipbtn:active { color: var(--bg); background: var(--gold); border-color: var(--gold); }

/* ---- Image Studio: Extras ---- */
.st-x-pickwrap[hidden] { display: none; }
.st-x-pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; color: var(--text); text-align: left; background: var(--surface-2); border: 1px dashed var(--tint-border); border-radius: 14px; font: inherit; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, transform 160ms ease; }
.st-x-pick.is-over { border-style: solid; border-color: var(--accent); background: var(--tint); }
.st-x-pick:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.st-x-pick:active { transform: scale(0.98); }
.st-x-pick-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; color: var(--fill-text); background: var(--fill); border-radius: 10px; }
.st-x-pick-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-x-pick-text { font-weight: 600; overflow-wrap: anywhere; }
.st-x-pick-hint { color: var(--muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.st-x-text { width: 100%; padding: 9px 12px; }
.st-x-start { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.st-x-start .st-field-label { margin-right: 4px; }
/* Two-column dialogs: the picture on one side, the settings on the other. */
:is(.st-wmb, .st-co, .st-po, .st-sp) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
:is(.st-wmb-side, .st-co-side, .st-po-side, .st-sp-side, .st-co-main) { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
:is(.st-wm-preview, .st-co-preview, .st-po-preview, .st-sp-preview) { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px; background: repeating-conic-gradient(#2c2548 0% 25%, #221c3a 0% 50%) 0 0 / 16px 16px; box-shadow: 0 0 0 1px var(--border); }
:is(.st-wm-preview, .st-co-preview, .st-po-preview, .st-sp-preview)[hidden] { display: none; }
.st-sp-preview { image-rendering: pixelated; }
.st-sp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-sp-form > :is(.st-field:has(.seg), .toggle) { grid-column: 1 / -1; }
.st-sp-form .st-field-num { width: 100%; }
.st-sp-list { max-height: 120px; margin: 0; padding: 6px 10px 6px 30px; overflow: auto; color: var(--muted); font-family: var(--mono); font-size: 0.72rem; background: var(--surface-2); border-radius: 10px; }
.st-sp-list:empty { display: none; }
/* Collage */
.st-co-layouts { display: flex; flex-wrap: wrap; gap: 6px; }
.st-co-layout { display: grid; place-items: center; width: 54px; height: 44px; padding: 0; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 160ms ease; }
.st-co-layout.is-active { color: var(--fill-text); background: var(--fill); border-color: transparent; }
.st-co-layout:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.st-co-layout:active { transform: scale(0.94); }
.st-co-order { display: flex; flex-direction: column; gap: 4px; max-height: 260px; margin: 0; padding: 0; overflow: auto; list-style: none; counter-reset: co; }
.st-co-item { display: flex; align-items: center; gap: 8px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; counter-increment: co; }
.st-co-item::before { content: counter(co); width: 18px; color: var(--faint); font-family: var(--mono); font-size: 0.7rem; text-align: center; }
.st-co-item canvas { flex: none; width: 48px; height: 36px; border-radius: 6px; }
.st-co-name { flex: 1; min-width: 0; overflow: hidden; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.st-co-item .st-ob:disabled { opacity: 0.35; cursor: default; }
/* Poster */
.st-po-info { margin: 0; color: var(--muted); font-size: 0.85rem; }
.st-po-info.is-warn { color: var(--gold); }
.st-po-main .st-form { gap: 12px; }
/* Photo info */
.st-pi { display: flex; flex-direction: column; gap: 14px; }
.st-pi-file { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.st-pi-file b { color: var(--text); }
.st-pi-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 20px; }
.st-pi-list > :is(p, ul) { grid-column: 1 / -1; }
.st-pi-head { grid-column: 1 / -1; margin: 10px 0 2px; color: var(--accent-strong); font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.st-pi-head:first-child { margin-top: 0; }
.st-pi-head.is-warn { color: var(--gold); }
.st-pi-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; grid-column: 1 / -1; margin: 0; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.st-pi-dl dt { color: var(--muted); font-size: 0.84rem; }
.st-pi-dl dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-pi-other { margin: 0; padding-left: 20px; color: var(--muted); font-size: 0.85rem; }
.st-pi-note { padding: 10px 14px; background: var(--tint); border: 1px solid var(--tint-border); border-radius: 12px; color: var(--tint-text); }
/* Palette panel */
.st-palx-head, .st-palx-foot { display: flex; align-items: center; gap: 4px; }
.st-palx-head .st-select { flex: 1; min-width: 0; }
.st-palx-foot { margin-top: 2px; }
.st-palx-count { flex: 1; color: var(--faint); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; }
.st-palx-btn:disabled { opacity: 0.4; cursor: default; }
.st-palx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 3px; max-height: 150px; margin: 6px 0; overflow-y: auto; }
.st-palx-sw { aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); cursor: pointer; transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 140ms ease; }
.st-palx-sw.is-picked { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent-strong); }
.st-palx-sw:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (hover: hover) {
  :is(.st-x-pick, .st-co-layout, .st-co-layout.is-active):hover { color: var(--bg); background: var(--gold); border-color: var(--gold); }
  .st-x-pick:hover .st-x-pick-hint { color: var(--bg); }
  .st-palx-sw:hover { box-shadow: 0 0 0 2px var(--gold); transform: scale(1.12); }
}
.st-co-layout:active { color: var(--bg); background: var(--gold); border-color: var(--gold); }
@media (max-width: 760px) {
  :is(.st-wmb, .st-co, .st-po, .st-sp) { grid-template-columns: minmax(0, 1fr); }
  .st-x-start .btn { flex: 1 1 auto; }
  .st-pi-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .st-pi-dl dd { margin-bottom: 6px; }
}
/* The watermark's settings sit at the side, so its preview on the picture stays in view. */
#st-wm-dialog::backdrop { background: rgba(8, 6, 16, 0.18); }
@media (min-width: 761px) {
  #st-wm-dialog { margin: auto 24px auto auto; width: min(380px, calc(100vw - 32px)); }
}
@media (max-width: 760px) {
  /* A sheet over the bottom half, so the preview on the picture shows above it. */
  #st-wm-dialog { width: 100vw; max-width: 100vw; max-height: 60vh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  #st-wm-dialog .st-dlg-body { max-height: calc(60vh - 130px); }
}
:is(.st-wmb, .st-co, .st-po, .st-sp, .st-pi) .save-status:empty { display: none; }

/* ---- Image Studio: Layers and effects ---- */
.st-layer.is-nested { margin-left: calc(var(--depth, 0) * 14px); }
.st-layer.is-nested::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: -8px; width: 2px; border-radius: 2px; background: var(--border); }
.st-layer.is-picked { background: var(--tint); border-color: var(--tint-border); border-style: dashed; }
.st-layer.is-drop[data-drop="above"] { border-color: transparent; box-shadow: 0 -2px 0 var(--gold); }
.st-layer.is-drop[data-drop="below"] { border-color: transparent; box-shadow: 0 2px 0 var(--gold); }
.st-layer.is-drop[data-drop="into"] { border-color: var(--gold); background: var(--tint-strong); }
.st-thumb.is-target { box-shadow: 0 0 0 2px var(--accent-strong); }
.st-mask-thumb { cursor: pointer; }
.st-mask-thumb.is-off { opacity: 0.7; }
.st-lr-kind { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 5px; color: var(--tint-text); background: var(--accent-soft); }
.st-lr-text { color: var(--text); background: #0b0914; }
.st-lr-caret { width: 20px; height: 28px; margin-right: -5px; }
.st-lr-caret svg { transition: transform 160ms ease; }
.st-lr-caret.is-open svg { transform: rotate(90deg); }
.st-lr-fx { flex: none; padding: 1px 5px; color: var(--tint-text); font: italic 600 0.7rem/1.4 var(--mono); background: var(--accent-soft); border: 1px solid var(--tint-border); border-radius: 6px; cursor: pointer; }
.st-lr-fx:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.st-panel-foot .st-lk-btn { color: var(--tint-text); }
@media (hover: hover) {
  .st-lr-fx:hover { color: var(--bg); background: var(--gold); border-color: var(--gold); }
}
.st-lr-fx:active { color: var(--bg); background: var(--gold); border-color: var(--gold); }
@media (max-width: 760px) {
  .st-layer.is-nested { margin-left: calc(var(--depth, 0) * 10px); }
}