/* Calculator — CodingMarble family design (matches LovePDF / LoveImage): light paper, white sheets, ink, indigo, yellow marker */
:root {
  --paper: #f3f5fa;
  --sheet: #ffffff;
  --ink: #14163a;
  --ink-soft: #4c5078;
  --line: #dde1ee;
  --line-2: #c9cfe2;
  --brand: #3b33e6;
  --brand-deep: #2a23b8;
  --brand-tint: #eeedff;
  --marker: #ffe04a;
  --ok: #0e9f86;
  --bad: #d4314f;
  --shadow-sheet: 0 1px 0 #14163a0a, 0 8px 24px -12px #14163a2e;
  --shadow-lift: 0 2px 0 #14163a0d, 0 22px 40px -18px #3b33e659;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-press: cubic-bezier(.2, .9, .25, 1.15);
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --c: var(--brand); /* per-category accent, set inline */
  /* aliases used by older widgets */
  --card: var(--sheet); --muted: var(--ink-soft); --teal: var(--brand); --teal-2: var(--brand-deep); --on-teal: #fff;
  --mark: var(--marker); --danger: var(--bad); --tape: var(--sheet); --tape-ink: var(--ink);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; font: 400 17px/1.65 var(--body); color: var(--ink); background: var(--paper);
  background-image: radial-gradient(#14163a17 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--brand-deep); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 99; }
.skip:focus { top: 12px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: #f3f5faeb; backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 20px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.logo { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--brand); color: #fff; box-shadow: inset 0 -3px 0 #0000002e; }
.logo b { font: 700 1.25rem/1 var(--mono); margin-top: -2px; }
.logo::after { content: ''; position: absolute; top: -4px; right: -4px; width: 13px; height: 13px; border-radius: 3px; background: var(--marker); box-shadow: 0 0 0 2px var(--paper); }
.brand-txt { display: grid; line-height: 1.05; }
.brand-name { font: 800 1.28rem var(--display); letter-spacing: -.03em; }
.brand-name em { font-style: normal; color: var(--brand); }
.brand-by { font: 700 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; }
.nav { display: flex; gap: 2px; margin-left: 18px; }
.nav a { position: relative; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 10px; transition: background .18s; }
.nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
.nav a:hover { background: var(--sheet); }
.nav a:hover::after { transform: scaleX(1); }
.top-tools { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.cur select { font: 600 .88rem var(--body); color: var(--ink); background: var(--sheet); border: 1.5px solid var(--line); border-radius: 11px; height: 40px; padding: 0 10px; cursor: pointer; }
.btn-ink { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--sheet); color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: none; box-shadow: 0 4px 0 var(--ink); transition: transform .12s var(--ease-press), box-shadow .12s var(--ease-press); }
.btn-ink:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.btn-ink:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
@media (max-width: 1080px) { .nav { display: none; } }
@media (max-width: 520px) { .btn-ink { display: none; } .brand-by { display: none; } }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 7vw, 84px) 0 clamp(30px, 5vw, 56px); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 920px) { .hero-in { grid-template-columns: 1fr; } }
.eyebrow { font: 700 .74rem var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); margin: 0 0 22px; }
.eyebrow a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--marker), var(--marker)) 0 100% / 100% 3px no-repeat; padding-bottom: 2px; }
.hero-h { font-size: clamp(2.6rem, 6.6vw, 5rem); line-height: .98; letter-spacing: -.045em; margin-bottom: 22px; }
.swap { display: inline-block; vertical-align: bottom; overflow: hidden; height: 1.08em; padding-right: .04em; color: var(--brand); }
.swap-w { display: inline-block; will-change: transform; }
.swap-w.out { animation: swapOut .32s var(--ease-out) forwards; }
.swap-w.in { animation: swapIn .52s var(--ease-out); }
@keyframes swapOut { to { transform: translateY(-105%); opacity: 0; } }
@keyframes swapIn { from { transform: translateY(105%); opacity: 0; } }
.hl { background: linear-gradient(var(--marker), var(--marker)) 0 88% / 0% 42% no-repeat; animation: marker .9s .35s var(--ease-out) forwards; padding: 0 .06em; }
@keyframes marker { to { background-size: 100% 42%; } }
.hero-lead { font-size: 1.14rem; color: var(--ink-soft); max-width: 56ch; margin: 0 0 28px; }

.search { position: relative; max-width: 600px; }
.search input { width: 100%; height: 62px; font: 500 1.08rem var(--body); color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); border-radius: 16px; padding: 0 54px 0 52px; box-shadow: 0 5px 0 var(--ink); transition: box-shadow .15s, transform .15s; -webkit-appearance: none; }
.search input::placeholder { color: #8a8fae; }
.search input:focus { outline: none; box-shadow: 0 5px 0 var(--brand); border-color: var(--brand); }
.search-ic { position: absolute; left: 18px; top: 19px; width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.kbd { position: absolute; right: 16px; top: 17px; font: 700 .8rem var(--mono); color: var(--ink-soft); border: 1.5px solid var(--line-2); border-bottom-width: 3px; border-radius: 7px; padding: 2px 8px; background: var(--paper); }
.results { position: absolute; left: 0; right: 0; top: 74px; margin: 0; padding: 6px; list-style: none; background: var(--sheet); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-lift); z-index: 20; animation: drop .22s var(--ease-out); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.results a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.results small { color: var(--ink-soft); font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.results li.on a, .results a:hover { background: var(--brand-tint); }
.results .none { padding: 12px 14px; color: var(--ink-soft); }
.popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; }
.popular > span { font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-right: 4px; }
.popular a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .9rem; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--line); padding: 5px 12px; border-radius: 99px; text-decoration: none; transition: border-color .15s, transform .15s var(--ease-press); }
.popular a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.popular a:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink); }

/* quick calculator (hero signature) */
.quick { background: var(--sheet); border: 2px solid var(--ink); border-radius: 24px; box-shadow: 0 8px 0 var(--ink), var(--shadow-lift); padding: 16px; max-width: 380px; width: 100%; justify-self: center; animation: rise .7s .15s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) rotate(1.5deg); } }
.quick-top { display: flex; align-items: center; gap: 6px; padding: 2px 4px 12px; }
.quick-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.quick-dot:nth-child(1) { background: #e0457f; } .quick-dot:nth-child(2) { background: var(--marker); } .quick-dot:nth-child(3) { background: var(--ok); }
.quick-title { margin-left: auto; font: 700 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.quick-screen { background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px 12px; text-align: right; margin-bottom: 12px; overflow: hidden; }
.quick-expr { font: 500 .9rem var(--mono); color: var(--ink-soft); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-val { display: block; font: 800 2.5rem/1.1 var(--display); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qk { font: 700 1.2rem var(--body); height: 56px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--sheet); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--line-2); transition: transform .1s var(--ease-press), box-shadow .1s var(--ease-press), background .15s; touch-action: manipulation; }
.qk:hover { background: var(--paper); }
.qk:active, .qk.hit { transform: translateY(3px); box-shadow: 0 0 0 var(--line-2); }
.qk.fn { background: var(--paper); color: var(--ink-soft); font-size: 1rem; }
.qk.op { background: var(--brand-tint); color: var(--brand); border-color: #d6d3ff; box-shadow: 0 3px 0 #c9c5ff; }
.qk.eq { background: var(--brand); color: #fff; border-color: var(--brand-deep); box-shadow: 0 3px 0 var(--brand-deep); grid-column: span 2; }
.qk.zero { grid-column: span 1; }

/* ---------- browse grid ---------- */
.browse { margin: 30px auto 64px; }
.browse-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.browse-head h2 { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 600 .92rem var(--body); color: var(--ink); background: var(--sheet); border: 1.5px solid var(--line); border-radius: 99px; padding: 8px 15px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; transition: background .18s, color .18s, border-color .18s, transform .15s var(--ease-press); }
.chip span { font: 700 .72rem var(--mono); color: var(--ink-soft); }
.chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip[aria-pressed="true"] span { color: #ffffffb3; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 14px; }
.card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--sheet); border: 1.5px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sheet); transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--ink); color: var(--ink); }
.card:hover .tile { transform: rotate(-6deg) scale(1.06); }
.card:active { transform: translateY(-1px); }
.card[hidden] { display: none; }
.card.enter { animation: cardIn .4s var(--ease-out) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.card-txt { display: grid; gap: 3px; min-width: 0; }
.card-name { font: 700 1.04rem/1.25 var(--display); letter-spacing: -.01em; }
.card-desc { font-size: .87rem; color: var(--ink-soft); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); border: 1.5px solid color-mix(in srgb, var(--c) 30%, #fff); position: relative; transition: transform .35s var(--ease-press); }
.tile::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 2px var(--sheet); }
.tile span { font: 700 .74rem var(--mono); letter-spacing: -.02em; white-space: nowrap; }
.tile.lg { width: 76px; height: 76px; border-radius: 20px; }
.tile.lg span { font-size: 1.05rem; }
.tile.lg::after { width: 16px; height: 16px; border-radius: 5px; top: -5px; right: -5px; box-shadow: 0 0 0 3px var(--paper); }

.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 64px; }
.why-item { background: var(--sheet); border: 1.5px solid var(--line); border-radius: 18px; padding: 22px; }
.why-item p { color: var(--ink-soft); margin: 0; font-size: .95rem; }
.why-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font: 700 1.2rem var(--mono); margin-bottom: 14px; }
@media (max-width: 760px) { .why { grid-template-columns: 1fr; } }

/* ---------- page head ---------- */
.page-head { text-align: center; padding: 26px 0 10px; max-width: 860px; }
.crumbs { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-soft); margin-bottom: 22px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumb-cat { font: 700 .74rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--c) !important; }
.head-mark { display: flex; justify-content: center; align-items: center; margin-bottom: 18px; position: relative; }
.head-mark::before, .head-mark::after { content: ''; width: 44px; height: 3px; border-radius: 3px; background: var(--c); margin: 0 14px; opacity: .8; }
.head-mark .tile { animation: pop .6s var(--ease-press) both; }
@keyframes pop { from { transform: scale(.6) rotate(-10deg); opacity: 0; } }
.page-head h1 { margin-bottom: 14px; }
.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 64ch; margin: 0 auto; }

/* ---------- calculator tool ---------- */
.tool-wrap { margin-top: 26px; }
.calc, .calc-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 0; align-items: stretch; background: var(--sheet); border: 2px solid var(--ink); border-radius: 24px; box-shadow: 0 7px 0 var(--ink), var(--shadow-lift); overflow: hidden; }
.calc.custom { display: block; padding: clamp(18px, 3vw, 30px); }
.calc.custom .calc-grid { margin: calc(-1 * clamp(18px, 3vw, 30px)); border: 0; box-shadow: none; border-radius: 0; }
.inputs { padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; align-content: start; }
.out, .tape-wrap { background: color-mix(in srgb, var(--c) 7%, #fff); border-left: 2px dashed color-mix(in srgb, var(--c) 35%, var(--line)); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; }
.calc.custom > .tape-wrap, .calc.custom .sc-tape, .calc.custom .uc-tape { border: 2px dashed color-mix(in srgb, var(--c) 35%, var(--line)); border-radius: 16px; }
@media (max-width: 900px) {
  .calc, .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .out, .tape-wrap { border-left: 0; border-top: 2px dashed color-mix(in srgb, var(--c) 35%, var(--line)); }
}
.field { display: grid; gap: 7px; }
.field[hidden] { display: none; }
.field > label, .lbl { font-weight: 700; font-size: .93rem; }
.help { color: var(--ink-soft); font-size: .84rem; }
.field-box { display: flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: 13px; background: var(--sheet); transition: border-color .15s, box-shadow .2s; }
.field-box:hover { border-color: var(--ink-soft); }
.field-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px #3b33e61f; }
.field-box input { flex: 1; min-width: 0; border: 0; background: transparent; font: 700 1.12rem var(--mono); color: var(--ink); padding: 13px 14px; outline: none; }
.field-box input[type="date"], .field-box input[type="time"], .field-box input[type="datetime-local"] { font: 600 1rem var(--body); }
.unit { padding: 0 14px; color: var(--ink-soft); font: 600 .85rem var(--mono); white-space: nowrap; }
.pre .unit { padding: 0 0 0 15px; color: var(--ink); }
.select { position: relative; }
.select::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
select, textarea, .ctl { width: 100%; font: 600 1rem var(--body); color: var(--ink); background: var(--sheet); border: 1.5px solid var(--line-2); border-radius: 13px; padding: 13px 14px; transition: border-color .15s, box-shadow .2s; }
.select select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; }
textarea { font: 500 .98rem var(--mono); resize: vertical; line-height: 1.5; }
select:hover, textarea:hover, .ctl:hover { border-color: var(--ink-soft); }
select:focus, textarea:focus, .ctl:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px #3b33e61f; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; --p: 50%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(var(--brand), var(--brand)) 0 0 / var(--p) 100% no-repeat, var(--line); }
.range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--line); }
.range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--brand); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); transition: transform .15s var(--ease-press); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); }
.range:active::-webkit-slider-thumb { transform: scale(1.18); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.btn { font: 700 1rem var(--body); border: 2px solid var(--ink); border-radius: 13px; padding: 12px 24px; background: var(--brand); color: #fff; cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .12s var(--ease-press), box-shadow .12s var(--ease-press), background .15s; }
.btn:hover { background: var(--brand-deep); transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.ghost { background: var(--sheet); color: var(--ink); }
.btn.ghost:hover { background: var(--paper); }
.btn.sm { padding: 8px 14px; font-size: .9rem; box-shadow: 0 3px 0 var(--ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

/* result panel (class names kept as .tape-* for compatibility) */
.tape { position: sticky; top: 96px; }
.tape-tear { display: none; }
.tape-empty { color: var(--ink-soft); margin: 0; }
.tape-err { color: var(--bad); font-weight: 700; margin: 0; padding: 12px 14px; background: #fdecef; border-radius: 12px; }
.tape-big { display: grid; gap: 6px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1.5px solid color-mix(in srgb, var(--c) 22%, var(--line)); }
.tape-label { font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--c); }
.tape-val { justify-self: start; font: 800 clamp(2.2rem, 5vw, 3.2rem)/1.05 var(--display); letter-spacing: -.035em; color: var(--ink); background: linear-gradient(var(--marker), var(--marker)) 0 86% / 100% 36% no-repeat; padding: 0 .08em; word-break: break-word; font-variant-numeric: tabular-nums; }
.tape-val.sweep { animation: sweep .7s var(--ease-out); }
@keyframes sweep { from { background-size: 0% 36%; } }
.tape-sub { font-weight: 600; color: var(--ink-soft); }
.tape-rows { margin: 0; display: grid; gap: 2px; }
.tape-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.tape-rows div:last-child { border-bottom: 0; }
.tape-rows dt { color: var(--ink-soft); font-size: .95rem; }
.tape-rows dd { margin: 0; font: 700 .98rem var(--mono); text-align: right; }
.tape-rows .strong { border-top: 2px solid var(--ink); border-bottom: 0; margin-top: 6px; padding-top: 11px; }
.tape-rows .strong dt { color: var(--ink); font-weight: 700; }
.tape-note, .tape-html { font-size: .92rem; margin: 16px 0 0; color: var(--ink-soft); }
.tape-html table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tape-html td, .tape-html th { padding: 6px 8px; border-bottom: 1px dashed var(--line); text-align: left; }
.tape.enter > * { animation: fadeUp .45s var(--ease-out) both; }
.tape.enter > *:nth-child(2) { animation-delay: .06s; } .tape.enter > *:nth-child(3) { animation-delay: .12s; } .tape.enter > *:nth-child(4) { animation-delay: .18s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

.split { display: flex; align-items: center; gap: 20px; margin: 0 0 16px; }
.split svg { width: 104px; height: 104px; transform: rotate(-90deg); flex: none; }
.split circle { fill: none; stroke-width: 6.5; stroke-linecap: butt; }
.seg-bg { stroke: var(--line); }
.seg { transition: stroke-dasharray .6s var(--ease-out), stroke-dashoffset .6s var(--ease-out); }
.s0 { stroke: var(--brand); background: var(--brand); } .s1 { stroke: var(--marker); background: var(--marker); } .s2 { stroke: #e0457f; background: #e0457f; } .s3 { stroke: var(--ok); background: var(--ok); }
.split ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-weight: 600; font-size: .94rem; }
.split b { font-family: var(--mono); }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 8px; vertical-align: -1px; }

.sched { margin: 18px 0 0; background: var(--sheet); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sheet); overflow: hidden; }
.sched summary { cursor: pointer; padding: 16px 20px; font: 700 1.02rem var(--display); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.sched summary::-webkit-details-marker { display: none; }
.sched summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .25s var(--ease-out); }
.sched[open] summary::after { transform: rotate(-135deg); }
.sched-scroll { overflow-x: auto; padding: 0 20px 18px; }
.sched table, .prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.sched th, .sched td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; font-family: var(--mono); font-weight: 500; }
.sched th:first-child, .sched td:first-child { text-align: left; }
.sched thead th { font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.sched tbody tr:hover { background: var(--paper); }

/* ---------- article ---------- */
.article-grid { display: grid; grid-template-columns: 250px minmax(0, 780px); gap: 40px; margin-top: 64px; justify-content: center; }
.toc { position: sticky; top: 96px; align-self: start; font-size: .92rem; max-height: calc(100vh - 120px); overflow: auto; }
.toc-h { font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 5px 12px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; line-height: 1.35; transition: color .15s, border-color .15s; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--brand); border-left-color: var(--brand); font-weight: 600; }
@media (max-width: 980px) { .article-grid { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }
.prose { background: var(--sheet); border: 1.5px solid var(--line); border-radius: 24px; padding: clamp(22px, 4.5vw, 52px); box-shadow: var(--shadow-sheet); }
.prose h2 { margin-top: 1.9em; padding-top: .2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; }
.prose p, .prose li { color: #2b2e55; }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .4em 0; }
.prose li::marker { color: var(--brand); font-weight: 700; }
.prose code { font: .88em var(--mono); background: var(--paper); border: 1px solid var(--line); padding: 2px 6px; border-radius: 6px; }
.prose .formula { font: 700 1.02rem var(--mono); background: var(--brand-tint); color: var(--ink); border-left: 4px solid var(--brand); padding: 16px 20px; border-radius: 0 12px 12px 0; overflow-x: auto; }
.prose .table-scroll { overflow-x: auto; border: 1.5px solid var(--line); border-radius: 14px; margin: 1em 0; }
.prose th, .prose td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--paper); font: 700 .74rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose.narrow { max-width: 780px; margin-bottom: 64px; }
.home-prose { max-width: 900px; margin: 0 auto 64px; }
.faqs { display: grid; gap: 10px; }
.faqs details { border: 1.5px solid var(--line); border-radius: 14px; background: var(--sheet); transition: border-color .2s, box-shadow .2s; }
.faqs details[open] { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.faqs summary { cursor: pointer; font-weight: 700; padding: 15px 18px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--brand-tint); color: var(--brand); font: 700 1.1rem var(--mono); transition: transform .3s var(--ease-press); }
.faqs details[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 18px 4px; }
.faqs details[open] .faq-a { animation: fadeUp .35s var(--ease-out); }
.updated { color: var(--ink-soft); font: 600 .78rem var(--mono); margin-top: 2.2em; text-transform: uppercase; letter-spacing: .08em; }
.more { margin: 64px auto 80px; }

/* ---------- custom widgets (scientific calculator etc.) ---------- */
.keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.key { font: 700 1.02rem var(--body); padding: 14px 4px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--sheet); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--line-2); transition: transform .1s var(--ease-press), box-shadow .1s var(--ease-press), background .15s; touch-action: manipulation; }
.key:hover { background: var(--paper); }
.key:active { transform: translateY(3px); box-shadow: none; }
.key.fn { background: var(--paper); color: var(--ink-soft); }
.key.op { background: var(--brand-tint); color: var(--brand); border-color: #d6d3ff; box-shadow: 0 3px 0 #c9c5ff; }
.key.eq { background: var(--brand); color: #fff; border-color: var(--brand-deep); box-shadow: 0 3px 0 var(--brand-deep); }
.screen { font: 800 2rem var(--display); letter-spacing: -.02em; text-align: right; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 18px; margin-bottom: 12px; overflow-x: auto; min-height: 92px; }
.screen small { display: block; font: 500 .9rem var(--mono); color: var(--ink-soft); min-height: 1.3em; }

/* ---------- footer ---------- */
.foot { background: var(--sheet); border-top: 1.5px solid var(--line); padding: 56px 0 24px; }
.foot-in { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 28px; }
.foot p { color: var(--ink-soft); font-size: .92rem; }
.foot-h { font: 700 .74rem var(--mono); text-transform: uppercase; letter-spacing: .12em; margin: 4px 0 12px; }
.foot-h a { color: var(--c); text-decoration: none; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .9rem; }
.foot ul a { color: var(--ink-soft); text-decoration: none; }
.foot ul a:hover { color: var(--ink); text-decoration: underline; }
.sisters a { font-weight: 700; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--ink-soft); }
.foot-base a { color: var(--ink-soft); }
@media (max-width: 1000px) { .foot-in { grid-template-columns: repeat(3, 1fr); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-in { grid-template-columns: 1fr 1fr; } }

/* ---------- scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
  .hl { background-size: 100% 42%; }
}
@media (max-width: 640px) { .kbd { display: none; } .search input { padding-right: 16px; font-size: 1rem; } }
.inputs { grid-template-columns: minmax(0, 1fr); } .field { min-width: 0; } .field-box input { width: 100%; }

/* =========================================================
   Motion & hover pass 2
   ========================================================= */

/* logo: key press + yellow corner hop */
.brand .logo { transition: transform .25s var(--ease-press); }
.brand .logo::after { transition: transform .45s var(--ease-press); }
.brand:hover .logo { transform: rotate(-6deg); }
.brand:hover .logo::after { transform: translate(3px, -3px) rotate(90deg) scale(1.15); }
.brand:hover .logo b { animation: keyPress .35s var(--ease-press); }
@keyframes keyPress { 40% { transform: translateY(2px) scale(.9); } }
.brand-name { transition: color .2s; }
.brand:hover .brand-name { color: var(--brand); }

/* hero: words rise in one after another, calculator floats */
.hw { display: inline-block; animation: wordUp .8s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + 80ms); }
@keyframes wordUp { from { opacity: 0; transform: translateY(40%) rotate(-2deg); filter: blur(4px); } }
.eyebrow, .hero-lead, .search, .popular { animation: fadeUp .7s var(--ease-out) both; }
.hero-lead { animation-delay: .38s; } .search { animation-delay: .48s; } .popular { animation-delay: .58s; }
.quick { animation: rise .8s .2s var(--ease-out) both, float 6s 1.2s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: .6deg; } }
.quick:hover { animation-play-state: running, paused; }
.qk { position: relative; overflow: hidden; }
.qk::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 50%, #3b33e633 0, transparent 65%); opacity: 0; transition: opacity .35s; }
.qk:active::after, .qk.hit::after { opacity: 1; transition: none; }
.quick-val.bump { animation: bump .35s var(--ease-press); }
@keyframes bump { 40% { transform: scale(1.06); } }
.popular a::before { transition: transform .3s var(--ease-press); }
.popular a:hover::before { transform: scale(1.8); }

/* cards: category colour fills from the left, top accent grows, arrow slides in */
.card { position: relative; overflow: hidden; isolation: isolate; }
.card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, color-mix(in srgb, var(--c) 9%, #fff), #fff 70%); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.card::after { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.card:hover::before, .card:focus-visible::before, .card:hover::after, .card:focus-visible::after { transform: scaleX(1); }
.card-go { position: absolute; right: 14px; bottom: 12px; font: 700 1.05rem var(--mono); color: var(--c); opacity: 0; transform: translateX(-10px); transition: opacity .25s, transform .35s var(--ease-press); }
.card:hover .card-go, .card:focus-visible .card-go { opacity: 1; transform: none; }
.card .tile { transition: transform .45s var(--ease-press), background .3s, color .3s, border-color .3s; }
.card:hover .tile { background: var(--c); color: #fff; border-color: var(--c); }
.card:hover .tile::after { background: var(--marker); }
.chip:active { transform: scale(.95); }

/* buttons: shine sweep */
.btn, .btn-ink { position: relative; overflow: hidden; }
.btn::after, .btn-ink::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, #ffffff59, transparent); transform: skewX(-20deg); transition: left .6s var(--ease-out); pointer-events: none; }
.btn-ink::after { background: linear-gradient(100deg, transparent, #ffe04a99, transparent); }
.btn:hover::after, .btn-ink:hover::after { left: 120%; }

/* page head: staggered entrance, tile floats */
.page-head > * { animation: fadeUp .6s var(--ease-out) both; }
.page-head > :nth-child(2) { animation-delay: .06s; } .page-head > :nth-child(3) { animation-delay: .12s; } .page-head > :nth-child(4) { animation-delay: .18s; }
.head-mark::before { transform-origin: right; animation: lineGrow .7s .25s var(--ease-out) both; }
.head-mark::after { transform-origin: left; animation: lineGrow .7s .25s var(--ease-out) both; }
@keyframes lineGrow { from { transform: scaleX(0); } }
.head-mark .tile { animation: pop .6s var(--ease-press) both, float 5s 1s ease-in-out infinite; }
.tool-wrap { animation: fadeUp .7s .22s var(--ease-out) both; }

/* inputs: label lights up, field lifts */
.field > label { transition: color .2s; }
.field:focus-within > label { color: var(--brand); }
.field-box, select, textarea, .ctl { transition: border-color .15s, box-shadow .2s, transform .2s var(--ease-out); }
.field-box:focus-within, select:focus, textarea:focus, .ctl:focus { transform: translateY(-1px); }
.range::-webkit-slider-thumb:hover { transform: scale(1.12); }

/* result panel */
.tape.enter .split svg .seg { animation: segDraw .9s var(--ease-out) both; }
@keyframes segDraw { from { stroke-dasharray: 0 100; } }
.tape-rows div { transition: background .2s, padding .2s; border-radius: 6px; }
.tape-rows div:hover { background: color-mix(in srgb, var(--c) 8%, transparent); padding-left: 8px; padding-right: 8px; }
.sched { transition: box-shadow .25s, border-color .25s; }
.sched:hover { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }

/* article */
.prose a:not(.card) { text-decoration: none; background: linear-gradient(var(--marker), var(--marker)) 0 100% / 0% 35% no-repeat; box-shadow: inset 0 -1.5px 0 currentColor; transition: background-size .35s var(--ease-out); }
.prose a:not(.card):hover { background-size: 100% 35%; color: var(--ink); }
.faqs details { transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-out); }
.faqs details:not([open]):hover { border-color: var(--ink-soft); transform: translateX(3px); }
.toc a { transition: color .15s, border-color .15s, padding .25s var(--ease-out); }
.toc a:hover { padding-left: 16px; }
.why-item { transition: transform .3s var(--ease-out), box-shadow .3s, border-color .2s; }
.why-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--ink); }
.why-item:hover .why-ic { animation: keyPress .4s var(--ease-press); }

/* reading progress + back to top */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--brand), #6a45f0 60%, var(--marker)); transform: scaleX(var(--p, 0)); transform-origin: left; }
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 35; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sheet); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); color: var(--ink); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .3s, transform .35s var(--ease-press), box-shadow .12s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { color: var(--brand); }
.to-top:hover svg { animation: nudgeUp .6s var(--ease-press) infinite; }
@keyframes nudgeUp { 50% { transform: translateY(-3px); } }
.to-top:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

/* =========================================================
   Credits (same treatment as LovePDF / LoveImage)
   ========================================================= */
.credit-wrap { margin: 20px auto 56px; }
.credit { position: relative; display: block; isolation: isolate; overflow: hidden; container-type: inline-size; padding: clamp(26px, 4.5vw, 48px); border-radius: 18px 42px 18px 18px; color: #fff; text-decoration: none; }
.credit:hover { color: #fff; }
.credit::before { content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: 16px 40px 16px 16px; background: radial-gradient(120% 90% at 100% 0%, #2a2575 0%, transparent 55%), linear-gradient(135deg, #1b1e4a, var(--ink) 60%); }
.credit-glow { position: absolute; inset: -60%; z-index: -2; background: conic-gradient(from 0deg, transparent 0 68%, #8f89ff 80%, var(--marker) 89%, transparent 100%); opacity: .7; animation: creditSpin 9s linear infinite; pointer-events: none; }
.credit:hover .credit-glow { opacity: 1; animation-duration: 3s; }
@keyframes creditSpin { to { transform: rotate(360deg); } }
.credit-label { display: flex; align-items: center; gap: 12px; font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--marker); }
.credit-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--marker); animation: creditPulse 2.4s ease-out infinite; }
@keyframes creditPulse { 0% { box-shadow: 0 0 0 0 #ffe04a99; } 70%, 100% { box-shadow: 0 0 0 12px #ffe04a00; } }
.credit-word { position: relative; display: inline-flex; align-items: baseline; margin: 14px 0 6px; padding: .06em .02em .12em; font: 800 min(10.5cqi, 7.5rem)/.95 var(--display); letter-spacing: -.04em; white-space: nowrap; overflow: hidden; }
.credit-letters { display: inline-flex; }
.cl { display: inline-block; }
.cl-com { display: inline-block; color: var(--marker); margin-left: .02em; }
.js-credit .credit:not(.in) .cl { transform: translateY(110%); }
.js-credit .credit:not(.in) .cl-com { transform: scale(0); }
.credit.in:not(.done) .cl { animation: clRise .7s var(--ease-press) both; animation-delay: calc(var(--i) * 45ms); }
.credit.in:not(.done) .cl-com { animation: clPop .6s cubic-bezier(.3, 1.7, .5, 1) .6s both; }
@keyframes clRise { from { transform: translateY(110%); } }
@keyframes clPop { from { transform: scale(0) rotate(-12deg); } }
.credit:hover .cl, .credit:focus-visible .cl { animation: clWave .6s both; animation-delay: calc(var(--i) * 35ms); }
.credit:hover .cl-com { animation: clHop .6s .45s both; }
@keyframes clWave { 40% { transform: translateY(-14%); color: var(--marker); } }
@keyframes clHop { 40% { transform: translateY(-18%) rotate(-6deg); } }
.credit-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background: linear-gradient(105deg, transparent 35%, #ffe04a 47%, #ff9a3d 50%, #ffe04a 53%, transparent 65%) 150% 0 / 250% 100% no-repeat; }
.credit.in .credit-sheen { animation: clSheen 5s ease-in-out 1.4s infinite; }
@keyframes clSheen { 0% { background-position: 150% 0; } 45%, 100% { background-position: -50% 0; } }
.credit-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 14px; color: #ffffffbf; }
.credit-foot b { color: #fff; }
.credit-foot > span:first-child { max-width: 62ch; }
.credit-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 1.5px solid #ffffff59; border-radius: 99px; font-weight: 700; color: #fff; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-press); }
.credit:hover .credit-cta { background: var(--marker); color: var(--ink); border-color: var(--marker); transform: translateY(-2px); }
.credit-arrow { display: inline-block; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.credit:hover .credit-arrow { transform: translateX(5px); }
.credit-line { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--marker); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.credit:hover .credit-line { transform: scaleX(1); }
.credit:focus-visible { outline: 3px solid var(--marker); outline-offset: 6px; }
.foot-cm { font-weight: 700; color: var(--ink) !important; background: linear-gradient(var(--marker), var(--marker)) 0 100% / 100% 3px no-repeat; text-decoration: none; transition: background-size .3s var(--ease-out); }
.foot-cm:hover { background-size: 100% 100%; }

@media (prefers-reduced-motion: reduce) {
  .credit .cl, .credit .cl-com { transform: none !important; }
  .quick, .head-mark .tile, .credit-glow, .credit-dot, .credit-sheen { animation: none !important; }
}
.card { padding-right: 30px; }
.hero-h .hw { display: block; width: max-content; max-width: 100%; }
.hero-h .swap { display: block; height: 1.1em; }
.prose code { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; } .prose pre { overflow-x: auto; max-width: 100%; } .prose img, .prose svg, .prose table { max-width: 100%; }
html, body { overflow-x: clip; } .credit-wrap { overflow: clip; border-radius: 18px 42px 18px 18px; }

/* =========================================================
   Mobile & touch pass (audited at 320 / 375 / 768 px)
   ========================================================= */
/* iOS zooms into any form control under 16px — keep them at 16px+ everywhere */
input, select, textarea, .ctl, .cur select { font-size: max(16px, 1em); }
textarea { font-size: 16px; }
/* comfortable tap targets (44px) */
.chip { min-height: 44px; }
.btn.sm, .btn { min-height: 44px; }
.cur select { height: 44px; }
.brand { min-height: 44px; }
.popular a { min-height: 36px; }
.foot ul { gap: 2px; }
.foot ul a { display: inline-flex; align-items: center; min-height: 36px; }
.foot-base a, .foot-h a { display: inline-flex; align-items: center; min-height: 36px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.toc a { min-height: 32px; display: flex; align-items: center; }
/* minimum readable size for small mono labels */
.tape-label, .toc-h, .crumb-cat, .quick-title, .eyebrow, .brand-by, .results small, .chip span, .popular > span,
.sched thead th, .prose thead th, .updated, .unit, .credit-label, .foot-h { font-size: max(12px, .75rem); }

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { width: calc(100% - 28px); }
  .hero { padding-top: 28px; }
  .hero-h { font-size: clamp(2.3rem, 11vw, 3rem); }
  .page-head { padding-top: 16px; }
  .page-head h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .lead, .hero-lead { font-size: 1.02rem; }
  .head-mark::before, .head-mark::after { width: 28px; }
  .inputs, .out, .tape-wrap { padding: 18px; }
  .calc, .calc-grid { border-radius: 20px; box-shadow: 0 5px 0 var(--ink); }
  .tape-val { font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .actions .btn { flex: 1 1 auto; }
  .cards { grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 14px 30px 14px 14px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 2px 14px 8px; scroll-snap-type: x proximity; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: start; }
  .browse-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .prose { padding: 20px 18px; border-radius: 18px; }
  .prose .formula { font-size: .95rem; padding: 12px 14px; }
  .faqs summary { padding: 14px; min-height: 48px; }
  .faq-a { padding: 0 14px 4px; }
  .quick { max-width: 100%; }
  .qk { height: 58px; }
  .keys { gap: 6px; }
  .key { padding: 14px 2px; font-size: .98rem; min-height: 48px; }
  .credit { padding: 24px 20px; }
  .credit-foot { flex-direction: column; align-items: flex-start; }
  .to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
  .foot { padding-top: 40px; }
  .foot-base { flex-direction: column; }
}
@media (max-width: 360px) {
  .top-in { gap: 10px; }
  .brand-name { font-size: 1.12rem; }
  .logo { width: 32px; height: 32px; }
  .cur select { padding: 0 6px; }
  .keys { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .key { font-size: .9rem; }
  .quick-keys { gap: 6px; }
}
/* devices without hover: no sticky hover states after a tap */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: var(--shadow-sheet); border-color: var(--line); }
  .card:hover::before, .card:hover::after { transform: scaleX(0); }
  .card:hover .tile { background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); border-color: color-mix(in srgb, var(--c) 30%, #fff); transform: none; }
  .card:hover .card-go { opacity: 0; }
  .card:active { transform: scale(.985); border-color: var(--ink); }
  .quick { animation: rise .8s .2s var(--ease-out) both; }
}
/* respect iPhone notch / home bar */
@supports (padding: max(0px)) {
  .to-top { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  .foot { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
.tile span { font-size: max(12.5px, .8rem); } .tile.lg span { font-size: 1.05rem; }