/* ==========================================================================
   Design tokens
   The one loud element is the measuring-tape yellow. Everything else is ink on paper.
   ========================================================================== */
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap;
  src: url("../vendor/fonts/barlow-semi-condensed-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap;
  src: url("../vendor/fonts/barlow-semi-condensed-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap;
  src: url("../vendor/fonts/barlow-semi-condensed-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap;
  src: url("../vendor/fonts/barlow-semi-condensed-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap;
  src: url("../vendor/fonts/barlow-semi-condensed-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap;
  src: url("../vendor/fonts/barlow-semi-condensed-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }

:root {
  --paper: #ffffff;
  --surface: #f2f3f5;
  --surface-2: #e6e8eb;
  --ink: #14171a;
  --ink-2: #48505a;
  --ink-3: #737c87;
  --line: #d6dadf;
  --tape: #ffd400;
  --tape-ink: #14171a;
  --tape-soft: #fff4b8;
  --ok: #17794a;
  --warn: #a85800;
  --bad: #c62f2b;
  --info: #1d5bd0;
  --ok-soft: #e3f4ea; --warn-soft: #fdf0dc; --bad-soft: #fde8e6; --info-soft: #e5edfb;

  --radius: 6px;
  --radius-lg: 10px;
  --gap: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", "Hiragino Sans", "Yu Gothic UI", "PingFang SC", "Microsoft YaHei", "Noto Sans", "Noto Sans CJK KR", "Noto Sans Devanagari", "Nirmala UI", "Noto Sans Thai", Thonburi, "Leelawadee UI", Tahoma, sans-serif;
  --font-num: "Barlow Semi Condensed", var(--font);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --mm: 3.7795px; /* CSS px per millimetre; replaced by the saved screen calibration */
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #15181c;
  --surface: #1e2227;
  --surface-2: #2a2f36;
  --ink: #f0f2f4;
  --ink-2: #bcc3ca;
  --ink-3: #8b939d;
  --line: #363c44;
  --tape-soft: #4d4200;
  --ok: #5fd39a; --warn: #f2b266; --bad: #ff8a84; --info: #8db4ff;
  --ok-soft: #173326; --warn-soft: #3a2a12; --bad-soft: #3d1c1a; --info-soft: #172741;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15181c; --surface: #1e2227; --surface-2: #2a2f36; --ink: #f0f2f4; --ink-2: #bcc3ca; --ink-3: #8b939d;
    --line: #363c44; --tape-soft: #4d4200;
    --ok: #5fd39a; --warn: #f2b266; --bad: #ff8a84; --info: #8db4ff;
    --ok-soft: #173326; --warn-soft: #3a2a12; --bad-soft: #3d1c1a; --info-soft: #172741;
    color-scheme: dark;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
:lang(hi) body, body:lang(hi) { line-height: 1.7; }
/* Thai stacks vowel and tone marks above and below the letters: more room between lines, and in the 2-line clamped card text */
html[lang="th"] body { line-height: 1.65; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4 { line-height: 1.4; }
/* Korean breaks between words, not inside them */
:lang(ko) body { word-break: keep-all; overflow-wrap: break-word; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
img, svg, canvas, video { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tape); border-radius: 3px; }
::selection { background: var(--tape); color: var(--tape-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ==========================================================================
   Shell: tape, header, footer
   ========================================================================== */
.tape {
  height: 14px; background-color: var(--tape); position: relative; flex: none;
  background-image:
    repeating-linear-gradient(to right, var(--tape-ink) 0 1px, transparent 1px calc(var(--mm) * 10)),
    repeating-linear-gradient(to right, var(--tape-ink) 0 1px, transparent 1px calc(var(--mm) * 5)),
    repeating-linear-gradient(to right, var(--tape-ink) 0 1px, transparent 1px var(--mm));
  background-size: 100% 100%, 100% 60%, 100% 34%;
  background-repeat: no-repeat;
}
.tape.tall { height: 46px; background-size: 100% 46%, 100% 32%, 100% 20%; overflow: hidden; }
.tape .tape-num {
  position: absolute; bottom: 3px; font: 600 15px/1 var(--font-num); color: var(--tape-ink);
  transform: translateX(4px); user-select: none;
}
.tape .tape-note {
  position: absolute; right: 10px; bottom: 5px; font-size: 12px; color: var(--tape-ink);
  background: var(--tape); padding: 1px 6px; border-radius: 3px;
}
.tape .tape-note a { font-weight: 600; }

.site-header {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line);
}
.wordmark { font: 700 24px/1 var(--font-num); letter-spacing: 0.01em; text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; }
.wordmark i { display: inline-block; width: 9px; height: 9px; background: var(--tape); border: 1.5px solid var(--ink); border-radius: 50%; margin-left: 2px; }
.header-search {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; margin-inline-start: 8px; min-height: 36px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; background: var(--paper);
  color: var(--ink-3); cursor: text; text-align: start; font-size: 15px;
}
.header-search svg { flex: none; }
.header-search:hover { border-color: var(--ink-3); color: var(--ink-2); }
.header-search kbd { margin-inline-start: auto; }
.header-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.lang-pick {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 14.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.lang-pick svg { flex: none; }
.lang-pick:hover { border-color: var(--ink-3); color: var(--ink); }
.lang-pick:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tape); }
.lang-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; appearance: none; font-size: 16px; }
.lang-pick .lang-code { display: none; font: 600 14.5px/1 var(--font-num); letter-spacing: .04em; }
.theme-btn.btn { border-color: var(--line); color: var(--ink-2); min-width: 36px; min-height: 36px; }
.theme-btn.btn:hover { border-color: var(--ink-3); color: var(--ink); background: transparent; }
kbd, .kbd { font: 12px/1 var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; color: var(--ink-2); background: var(--surface); }

main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 24px 20px 56px; }
main.wide { max-width: 1400px; }
.site-footer { border-top: 1px solid var(--line); padding: 18px 0 28px; color: var(--ink-3); font-size: 13.5px; }
.site-footer .inner { max-width: 1040px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
main.wide ~ .site-footer .inner { max-width: 1400px; }
.site-footer .langs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.site-footer a { color: var(--ink-2); }
.site-footer .feedback-link { font-weight: 600; }

/* Tool page head */
.crumb { font-size: 13.5px; color: var(--ink-3); margin-bottom: 6px; }
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.tool-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.tool-head h1 { font-size: clamp(24px, 4vw, 32px); flex: 1; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.tool-desc { color: var(--ink-2); margin-bottom: 22px; max-width: 70ch; }
.fav-btn { flex: none; margin-top: 2px; }
.fav-btn .star { flex: none; }
.fav-btn[aria-pressed="true"] { background: var(--tape); color: var(--tape-ink); border-color: var(--tape-ink); }
.fav-btn[aria-pressed="true"] .star path { fill: currentColor; }
#tool-root { min-height: 180px; }
#tool-root > .boot { color: var(--ink-3); padding: 28px 0; }
.answers { margin-top: 28px; }
.answers h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.answers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.answers a { display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.answers a:hover, .answers a:focus-visible { border-color: var(--ink); }
.answers a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.answer-body { max-width: 760px; }
.answer-body figure { margin: 16px 0; }
.answer-body figure svg, .answer-body figure img { display: block; width: 100%; max-width: 520px; height: auto; }
.answer-body figcaption { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.answer-body ol.steps { padding-left: 1.4em; }
.answer-body ol.steps li { margin: 14px 0; }
.answer-body .steps figure svg { max-width: 260px; }
.answer-body .cta { margin: 20px 0; }
.series { margin-top: 28px; padding: 14px 16px 16px; background: var(--tape-soft); border-radius: var(--radius-lg); }
.series h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.series h2 a { color: var(--ink); text-decoration: none; }
.series h2 a::after { content: " →"; }
.series ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.series li a { display: inline-block; padding: 6px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 99px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.series li a:hover, .series li a:focus-visible { border-color: var(--ink); }
.related { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); }
.related h2 { font-size: 15px; color: var(--ink-2); font-weight: 600; margin-bottom: 10px; }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.related a { display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; font-size: 14.5px; }
.related a:hover { border-color: var(--ink); }

/* Home */
.home-hero { padding: 26px 0 8px; }
.home-hero h1 { font-size: clamp(28px, 5.4vw, 46px); letter-spacing: -0.02em; max-width: 18ch; }
.home-hero p { color: var(--ink-2); margin-top: 8px; max-width: 60ch; }
.home-search { margin-top: 20px; position: relative; max-width: 620px; }
.home-search input {
  width: 100%; font-size: 19px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: var(--radius-lg);
  background: var(--paper); box-shadow: 5px 5px 0 var(--tape);
}
.home-search input:focus { outline: none; box-shadow: 5px 5px 0 var(--tape), 0 0 0 3px var(--tape); }
.home-count { color: var(--ink-3); font-size: 14px; margin-top: 12px; }
.shelf { margin-top: 26px; }
.shelf h2 { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.shelf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.shelf a { display: inline-block; padding: 6px 12px; border-radius: 99px; background: var(--tape-soft); color: var(--ink); text-decoration: none; font-size: 15px; }
.shelf a:hover { background: var(--tape); color: var(--tape-ink); }
.cat-rail { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 14.5px; }
.cat-rail a { text-decoration: none; font-weight: 600; padding: 5px 0; white-space: nowrap; background: linear-gradient(var(--tape), var(--tape)) no-repeat 0 88% / 0 5px; }
.cat-rail a:hover, .cat-rail a:focus-visible { background-size: 100% 5px; }
.cat-rail a span { font: 500 13px/1 var(--font-num); color: var(--ink-3); margin-inline-start: 4px; }
.catalog { margin-top: 30px; columns: 250px auto; column-gap: 34px; }
.cat { break-inside: avoid; margin-bottom: 28px; scroll-margin-top: 14px; }
.cat:target h2 { background: linear-gradient(var(--tape), var(--tape)) no-repeat 0 0 / 100% 100%; color: var(--tape-ink); padding-inline: 6px; margin-inline: -6px; }
.cat:target h2 span { color: var(--tape-ink); }
.cat h2 { font-size: 15px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; }
.cat h2 span { font: 600 14px/1 var(--font-num); color: var(--ink-3); }
.cat ul { list-style: none; margin: 0; padding: 0; }
.cat li a { display: block; padding: 4px 6px; margin: 0 -6px; text-decoration: none; border-radius: 4px; font-size: 15.5px; }
.cat li a:hover { background: var(--tape); color: var(--tape-ink); }
.search-results { list-style: none; margin: 18px 0 0; padding: 0; max-width: 720px; }
.search-results li a { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); text-decoration: none; }
.search-results li a:hover, .search-results li a.active { background: var(--tape-soft); }
.search-results b { display: block; font-size: 16.5px; }
.search-results small { color: var(--ink-2); font-size: 14px; }
.search-results .cat-tag { float: inline-end; color: var(--ink-3); font-size: 13px; }

/* Search overlay (tool pages) */
.palette-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 100; display: flex; justify-content: center; align-items: flex-start; padding: 9vh 16px 0; }
.palette { width: 100%; max-width: 600px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 6px 6px 0 var(--tape); overflow: hidden; }
.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 15px 16px; font-size: 18px; background: transparent; outline: none; }
.palette .search-results { margin: 0; max-height: 56vh; overflow: auto; }

/* ==========================================================================
   Tool building blocks — the shared vocabulary every tool uses
   ========================================================================== */
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack.tight { gap: 8px; }
.stack.loose { gap: 28px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.row.top { align-items: flex-start; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gap); }
.grid.narrow { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 860px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .split.wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .split.wide-right { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.panel { background: var(--surface); border-radius: var(--radius-lg); padding: 18px; }
.panel.outline { background: transparent; border: 1px solid var(--line); }
.section-title { font-size: 17px; margin: 6px 0 2px; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
.muted { color: var(--ink-2); }
.small { font-size: 13.5px; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }

/* Form */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .field > .label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.field > .hint { font-size: 13px; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--ink-3); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.textarea.code, .input.code { font-family: var(--mono); font-size: 14px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 4px var(--tape); border-radius: var(--radius); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.input.num, .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 1.08em; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--radius) 0 0 var(--radius); min-width: 0; }
.input-group .affix { display: flex; align-items: center; padding: 0 11px; border: 1px solid var(--ink-3); border-inline-start: 0; border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); color: var(--ink-2); font-size: 14.5px; white-space: nowrap; }
.input-group .affix.pre { order: -1; border-inline-start: 1px solid var(--ink-3); border-inline-end: 0; border-radius: var(--radius) 0 0 var(--radius); }
.input-group .affix.pre + .input, .input-group .input:has(+ .affix.pre) { border-radius: 0 var(--radius) var(--radius) 0; }
.input-group .select { border-radius: 0 var(--radius) var(--radius) 0; border-inline-start: 0; width: auto; flex: none; background: var(--surface); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ink-3); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.seg label { position: relative; cursor: pointer; flex: 1 1 auto; margin-inline-end: -1px; } /* when the options wrap, every row fills the width */
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; height: 100%; padding: 8px 14px; font-size: 15px; text-align: center; border-inline-end: 1px solid var(--line); box-shadow: 0 1px 0 var(--line); min-height: 40px; }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -4px; box-shadow: inset 0 0 0 4px var(--tape); }
.field > .seg { align-self: flex-start; max-width: 100%; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
input[type="range"] { width: 100%; accent-color: var(--ink); }
input[type="color"] { width: 46px; height: 42px; padding: 2px; border: 1px solid var(--ink-3); border-radius: var(--radius); background: var(--paper); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 16px;
  border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper); color: var(--ink);
  font-weight: 600; font-size: 15px; line-height: 1.25; cursor: pointer; text-decoration: none; text-align: center; user-select: none; max-width: 100%;
}
.btn:hover { background: var(--surface); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--ink-2); }
.btn.tape { background: var(--tape); color: var(--tape-ink); border-color: var(--tape-ink); }
.btn.tape:hover { filter: brightness(.95); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { background: var(--surface); }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.small { min-height: 32px; padding: 4px 10px; font-size: 13.5px; }
.btn.big { min-height: 54px; padding: 12px 26px; font-size: 18px; }
.btn.icon { padding: 8px; min-width: 42px; }
.btn.small.icon { min-width: 32px; padding: 4px; }
@media (pointer: coarse) { .btn.small { min-height: 40px; } .btn.small.icon { min-width: 40px; } }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Results */
.results { display: flex; flex-direction: column; }
.result-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.result-row:last-child { border-bottom: 0; }
.result-row > .k { color: var(--ink-2); font-size: 14.5px; flex: 1; min-width: 0; }
.result-row > .v { font: 600 19px/1.2 var(--font-num); font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; flex: none; max-width: 72%; }
.result-row > .v small { font: 400 13px var(--font); color: var(--ink-3); margin-inline-start: 4px; }
.result-row.total > .k { color: var(--ink); font-weight: 700; }
.result-row.total > .v { font-size: 24px; }
.big { font: 700 clamp(34px, 7vw, 54px)/1.1 var(--font-num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.big.huge { font-size: clamp(56px, 16vw, 160px); }
.big > .unit, .big > small { font: 500 0.4em var(--font); color: var(--ink-2); margin-inline-start: 6px; }
.mark { background: linear-gradient(transparent 58%, var(--tape) 58% 92%, transparent 92%); padding: 0 .12em; }
:root[data-theme="dark"] .mark { background: linear-gradient(transparent 62%, #8a7300 62% 92%, transparent 92%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark { background: linear-gradient(transparent 62%, #8a7300 62% 92%, transparent 92%); } }
.big-label { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.stat > .k { font-size: 13px; color: var(--ink-2); }
.stat > .v { font: 600 22px/1.2 var(--font-num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { padding: 8px 12px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { background: var(--surface); font-weight: 600; color: var(--ink-2); position: sticky; top: 0; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: end; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 15.5px; }
.table tr.hl td, .table td.hl { background: var(--tape-soft); }
.table.wrap td, .table.wrap th { white-space: normal; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; background: var(--paper); cursor: default; }
button.chip { cursor: pointer; }
button.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.bad { background: var(--bad-soft); color: var(--bad); }

.note { border-inline-start: 4px solid var(--ink-3); background: var(--surface); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 14.5px; color: var(--ink-2); }
.note.info { border-color: var(--info); background: var(--info-soft); }
.note.ok { border-color: var(--ok); background: var(--ok-soft); }
.note.warn { border-color: var(--warn); background: var(--warn-soft); }
.note.bad { border-color: var(--bad); background: var(--bad-soft); color: var(--ink); }
.empty { text-align: center; color: var(--ink-3); padding: 36px 16px; border: 1px dashed var(--line); border-radius: var(--radius-lg); }

/* Collapsible details */
details.fold { border: 1px solid var(--line); border-radius: var(--radius); }
details.fold > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); list-style-position: inside; }
details.fold > summary:hover { background: var(--surface); }
details.fold[open] > summary { border-bottom: 1px solid var(--line); }
details.fold > :not(summary) { padding: 12px 14px; }

/* Files, canvases */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  min-height: 170px; padding: 24px; border: 2px dashed var(--ink-3); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer;
}
.dropzone:hover, .dropzone.over { border-color: var(--ink); background: var(--tape-soft); }
.dropzone strong { font-size: 17px; }
.dropzone small { color: var(--ink-2); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; touch-action: none; }
.stage.checker { background-image: conic-gradient(var(--surface-2) 25%, transparent 0 50%, var(--surface-2) 0 75%, transparent 0); background-size: 20px 20px; }
.stage > canvas, .stage > svg, .stage > video { display: block; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.toolbar .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.thumb { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 6px; text-align: center; font-size: 12.5px; color: var(--ink-2); overflow: hidden; }
.thumb img, .thumb canvas { display: block; width: 100%; height: 110px; object-fit: contain; margin-bottom: 4px; }
.thumb .x { position: absolute; top: 4px; inset-inline-end: 4px; }
.progress { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s; }

/* Guide text under a tool: reading matter, kept quiet so the tool stays the page's subject */
.guide { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 72ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }
main.wide .guide { max-width: 80ch; }
.guide-about { color: var(--ink); font-size: 16.5px; margin: 0 0 6px; }
.guide h2 { font-size: 17px; margin: 26px 0 8px; color: var(--ink); }
.guide ol, .guide ul { margin: 0; padding-inline-start: 1.35em; }
.guide li { margin: 4px 0; }
.guide li::marker { color: var(--ink-3); font-family: var(--font-num); font-weight: 600; }
.guide > p { margin: 0 0 10px; }
.guide dl { margin: 0; }
.guide dt { font-weight: 650; color: var(--ink); margin-top: 14px; }
.guide dd { margin: 3px 0 0; }
.guide + .related { margin-top: 36px; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--ink); } /* wraps: a tab that scrolled off a phone screen was never found */
.tab { border: 0; background: none; padding: 9px 14px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--ink-2); border-radius: var(--radius) var(--radius) 0 0; min-height: 40px; text-align: start; }
.tab:hover { background: var(--surface); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }

/* Toast */
.toast-host { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); padding: 9px 16px; border-radius: 99px; font-size: 14.5px; box-shadow: 0 4px 16px rgb(0 0 0 / .22); animation: toast-in .16s ease-out; }
.toast.bad { background: var(--bad); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Fullscreen presentation (classroom tools) */
.fs-host:fullscreen, .fs-host.fs-fallback { background: var(--paper); color: var(--ink); padding: 3vmin; overflow: auto; display: flex; flex-direction: column; }
.fs-host.fs-fallback { position: fixed; inset: 0; z-index: 90; }

/* Print: only the tool's printable area */
.print-only { display: none; }
#print-root { display: none; }
@media print {
  .tape, .site-header, .site-footer, .related, .guide, .crumb, .fav-btn, .tool-desc, .no-print, .toast-host { display: none !important; }
  body { background: #fff; color: #000; display: block; }
  main { max-width: none; padding: 0; }
  .print-only { display: block; }
  body.printing-area > :not(#print-root) { display: none !important; }
  #print-root { display: flow-root; } /* flow-root: a top margin inside must not collapse into body and push out a blank page */
  body.printing-area { min-height: 0; display: block; }
}

@media (max-width: 640px) {
  .site-header { padding: 8px 14px; gap: 8px; }
  /* search collapses to an icon; language shows its code */
  .header-search { flex: none; width: 40px; padding: 0; justify-content: center; margin-inline-start: auto; color: var(--ink-2); cursor: pointer; }
  .header-search .ph, .header-search kbd { display: none; }
  .header-search + .header-tools { margin-inline-start: 0; }
  .lang-pick .lang-name { display: none; }
  .lang-pick .lang-code { display: inline; }
  .theme-btn.btn { min-width: 40px; }
  main { padding: 18px 14px 44px; }
  .site-footer .inner { padding: 0 14px; }
  .panel { padding: 14px; }
  .home-hero { padding-top: 14px; }
  .home-search input { font-size: 17px; }
  .tape .tape-note-text { display: none; }
  .fav-btn .fav-label { display: none; }
  .fav-btn.btn { min-width: 40px; padding: 4px; }
  /* categories become one swipeable line */
  .cat-rail { flex-wrap: nowrap; overflow-x: auto; gap: 0 18px; margin-inline: -14px; padding-inline: 14px; scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .cat-rail::-webkit-scrollbar { display: none; }
  .cat-rail a { padding: 9px 0; }
  .cat-rail a:last-child { padding-inline-end: 36px; }
  .catalog { column-gap: 22px; margin-top: 22px; }
  .cat li a { padding: 8px 6px; }
  :lang(ko) .cat ul, :lang(ja) .cat ul, :lang(zh) .cat ul { columns: 2; column-gap: 18px; }
  .cat li { break-inside: avoid; }
}

/* Shelves (갈래): a row of links under the header on listing pages, tiles on the home page, card lists on shelf pages */
.wordmark .wm-a { font-weight: 700; }
.wordmark .wm-b { font-weight: 400; color: var(--ink-2); margin-left: 5px; }
.shelf-nav { border-bottom: 1px solid var(--line); background: var(--paper); }
.shelf-nav .inner { max-width: 1040px; margin: 0 auto; padding: 0 20px; display: flex; gap: 2px 20px; overflow-x: auto; scrollbar-width: none; font-size: 14.5px; }
.shelf-nav .inner::-webkit-scrollbar { display: none; }
.shelf-nav a { text-decoration: none; padding: 11px 0 9px; white-space: nowrap; color: var(--ink-2); border-bottom: 3px solid transparent; }
.shelf-nav a:hover { color: var(--ink); }
.shelf-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--tape); }
.shelf-nav a.all { margin-left: auto; color: var(--ink-3); }
.home-hero.compact { padding-top: 18px; }
.home-hero.compact h1 { font-size: clamp(24px, 4vw, 34px); max-width: none; }
.home-hero .count { font: 500 0.6em/1 var(--font-num); color: var(--ink-3); vertical-align: 0.15em; margin-left: 6px; }
.home-hero .crumb { margin-bottom: 10px; }
.home-count a { color: inherit; text-decoration: none; }
.home-count a:hover { text-decoration: underline; }
.shelf-grid { columns: auto; column-gap: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-top: 28px; }
.shelf-tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1.5px solid var(--line); border-radius: var(--radius-lg, 14px); padding: 18px 18px 16px; background: var(--paper); position: relative; transition: border-color .12s, transform .12s; }
.shelf-tile:hover, .shelf-tile:focus-visible { border-color: var(--ink); transform: translateY(-2px); }
.shelf-tile .shelf-count { position: absolute; top: 16px; right: 16px; font: 500 12.5px/1 var(--font-num); color: var(--ink-3); }
.shelf-tile h2 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 6px; padding-right: 60px; }
.shelf-tile p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0 0 12px; min-height: 2.9em; }
.shelf-tile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.shelf-tile li { font-size: 13px; padding: 3px 9px; border-radius: 99px; background: var(--tape-soft); color: var(--ink); }
.shelf-tile li.app { background: var(--ink); color: var(--paper); }
.shelf-tile .more { margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 600; }
.shelf-tile:hover .more { text-decoration: underline; }
.catalog.cards { columns: auto; column-gap: 0; display: block; }
.catalog.cards .cat ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.catalog.cards .cat li a { display: block; padding: 10px 12px; margin: 0; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; }
.catalog.cards .cat li a:hover { border-color: var(--ink); background: var(--paper); color: inherit; }
.catalog.cards .cat li a b { display: block; font-weight: 600; }
.catalog.cards .cat li a small { display: block; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html[lang="th"] .catalog.cards .cat li a small { line-height: 1.6; }
.catalog.cards .cat h2 a { text-decoration: none; }
.catalog.cards .cat.also h2 { border-bottom-style: dashed; }
.apps { margin-top: 26px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.apps .app-card:first-child { grid-column: 1 / -1; }
.app-card { display: block; text-decoration: none; color: var(--paper); background: var(--ink); border-radius: var(--radius-lg, 14px); padding: 18px 20px; position: relative; border: 1px solid var(--ink); }
.app-card:hover { background: var(--ink-2); border-color: var(--ink-2); }
.app-card .app-kicker { font: 600 11.5px/1 var(--font-num); letter-spacing: .06em; color: var(--tape); display: block; margin-bottom: 8px; }
.app-card b { font-size: 20px; display: block; }
.app-card p { margin: 8px 0 0; font-size: 14px; color: var(--paper); opacity: .78; max-width: 60ch; }
.app-card .badge { position: absolute; top: 16px; right: 16px; font-size: 11.5px; padding: 3px 8px; border: 1px solid var(--paper); border-radius: 99px; color: var(--paper); background: transparent; opacity: .8; }
.related-more { margin-top: 12px; font-size: 14px; }
.related-more a { text-decoration: none; margin-right: 12px; font-weight: 600; }
.back { margin-top: 30px; font-size: 14.5px; }
.back a { text-decoration: none; }
@media (max-width: 600px) { .shelf-tile h2 { font-size: 20px; } .shelf-tile p { min-height: 0; } }
.site-footer .hub-link { text-decoration: none; font-weight: 600; }