/* ==========================================================================
   twoodo.com — design system
   Light by default, dark on [data-theme="dark"].
   Brand cyan #22b8ec, taken from the Twoodo mark.
   ========================================================================== */

:root{
  /* surfaces */
  --page:       #ffffff;
  --page-tint:  #f7fafd;
  --surface:    #ffffff;
  --surface-2:  #f2f6fb;
  --surface-3:  #e7eef7;
  --line:       #d9e2ee;
  --line-soft:  #e8eef6;

  /* type */
  --text:       #0d1626;
  --text-dim:   #334054;
  --muted:      #5d6b83;
  --faint:      #67758d;

  /* brand — darkened for contrast on white */
  --brand:      #0f8fc6;
  --brand-lift: #0c7fae;
  --brand-deep: #0a6d98;
  --brand-ink:  #ffffff;          /* text on a brand-filled surface */
  --brand-wash: rgba(15,143,198,.10);
  --amber:      #b7791f;
  --mint:       #0f9d70;
  --coral:      #d64545;

  --shadow:     0 1px 2px rgba(13,22,38,.06), 0 8px 24px rgba(13,22,38,.06);
  --shadow-lg:  0 24px 60px rgba(13,22,38,.18);

  /* aliases the original tool pages already reference */
  --bg-dark:    var(--page);
  --card-bg:    var(--surface);
  --text-light: var(--text);
  --primary-color: var(--brand);
  --danger-color:  var(--coral);

  --radius:     14px;
  --radius-sm:  9px;
  --measure:    68ch;
  --shell:      1180px;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Familjen Grotesk", "Inter Tight", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

[data-theme="dark"]{
  --page:       #0d1322;
  --page-tint:  #101728;
  --surface:    #151d31;
  --surface-2:  #1c2740;
  --surface-3:  #24314f;
  --line:       #26314c;
  --line-soft:  #1e2840;

  --text:       #e9eefb;
  --text-dim:   #c2cbe0;
  --muted:      #94a2bd;
  --faint:      #77859f;

  --brand:      #22b8ec;
  --brand-lift: #57cdf6;
  --brand-deep: #8adcfa;
  --brand-ink:  #06263a;
  --brand-wash: rgba(34,184,236,.14);
  --amber:      #ffb648;
  --mint:       #4fd8a8;
  --coral:      #ff7a6b;

  --shadow:     0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  --shadow-lg:  0 30px 80px rgba(0,0,0,.55);

  color-scheme: dark;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--page); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-deep); text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

h1,h2,h3,h4,h5{
  font-family:var(--display); font-weight:700; line-height:1.15;
  letter-spacing:-.02em; margin:0 0 .5em; color:var(--text);
}
h1{ font-size:clamp(1.75rem,1.2rem + 2.1vw,2.6rem); }
h2{ font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem); }
h3{ font-size:1.2rem; }
h4{ font-size:1.05rem; }
p{ margin:0 0 1.1em; }
hr{ border:0; border-top:1px solid var(--line-soft); margin:2.5rem 0; }

kbd{
  font-family:var(--mono); font-size:.8em; background:var(--surface-2);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--muted);
}

.wrap{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 22px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:14px; top:12px; z-index:200; background:var(--brand); color:var(--brand-ink);
  padding:10px 16px; border-radius:8px; font-weight:600; }

/* ---------- header ------------------------------------------------------ */

.site-head{
  position:sticky; top:0; z-index:120;
  background:color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
@supports not (background: color-mix(in srgb, red, blue)){
  .site-head{ background:var(--page); }
}
.head-in{ display:flex; align-items:center; gap:16px; height:62px; }
.brand{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.brand:hover{ text-decoration:none; }
.brand img{ height:26px; width:auto; display:block; }
.brand span{ font-family:var(--display); font-weight:700; font-size:1.22rem;
  color:var(--text); letter-spacing:-.03em; }

.head-nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.head-nav a{ color:var(--muted); font-size:.94rem; font-weight:500;
  padding:8px 12px; border-radius:8px; }
.head-nav a:hover{ color:var(--text); background:var(--surface-2); text-decoration:none; }
.head-nav a[aria-current="page"]{ color:var(--brand); }

.head-tools{ display:flex; align-items:center; gap:6px; margin-left:6px; }
.hsearch{ position:relative; display:inline-flex; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:0 10px 0 12px; color:var(--muted);
  transition:border-color .15s, background .15s, width .18s; }
.hsearch:focus-within{ border-color:var(--brand); background:var(--page); }
.hsearch > svg{ flex:0 0 auto; }
.hsearch-in{ width:150px; background:none; border:0; color:var(--text);
  font:inherit; font-size:.9rem; padding:8px 0; }
.hsearch-in::placeholder{ color:var(--muted); }
.hsearch-in:focus{ outline:none; width:230px; }
.hsearch-in::-webkit-search-cancel-button{ display:none; }
.hsearch kbd{ font-size:.72rem; background:var(--page); flex:0 0 auto; }
.hsearch:focus-within kbd{ display:none; }
.hsearch-x{ background:none; border:0; color:var(--faint); font-size:1.2rem;
  line-height:1; cursor:pointer; padding:0 2px; flex:0 0 auto; }
.hsearch-x:hover{ color:var(--coral); }
.hsearch-x[hidden]{ display:none; }

.theme-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; color:var(--muted);
}
.theme-btn:hover{ color:var(--brand); border-color:var(--brand); }
.theme-btn .i-sun{ display:none; }
[data-theme="dark"] .theme-btn .i-sun{ display:block; }
[data-theme="dark"] .theme-btn .i-moon{ display:none; }

@media (max-width:880px){
  .head-nav{ display:none; }
  .head-tools{ margin-left:auto; }
  .hsearch kbd{ display:none; }
  .hsearch-in{ width:110px; }
  .hsearch-in:focus{ width:150px; }
}
@media (max-width:620px){
  /* the search box sits near the edge, so anchor the panel to the viewport */
  .hsearch{ position:static; min-width:0; flex:1 1 auto; }
  .head-tools{ flex:1 1 auto; min-width:0; }
  /* no room to grow on focus, so take whatever is left instead */
  .hsearch-in,.hsearch-in:focus{ width:100%; min-width:0; }
  .hsearch-panel{ position:fixed; left:12px; right:12px; width:auto;
    top:calc(var(--head-h, 62px) + 6px); }
}

/* ---------- header search results, directly under the field ------------- */

.hsearch-panel[hidden]{ display:none; }
.hsearch-panel{
  position:absolute; top:calc(100% + 7px); right:0; z-index:120;
  width:min(430px, calc(100vw - 32px)); max-height:min(64vh, 460px);
  overflow-y:auto; padding:6px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-lg);
  animation:hsIn .14s ease-out;
}
@keyframes hsIn{ from{ opacity:0; transform:translateY(-5px); } }
@media (prefers-reduced-motion: reduce){ .hsearch-panel{ animation:none; } }
.hsearch-panel a{ display:flex; align-items:baseline; gap:10px;
  padding:9px 13px; border-radius:9px; color:var(--text-dim); }
.hsearch-panel a:hover,.hsearch-panel a.on{ background:var(--surface-2);
  color:var(--text); text-decoration:none; }
.hsearch-panel .cat{ margin-left:auto; font-size:.74rem; color:var(--faint);
  flex:0 0 auto; }
.hsearch-all{ border-top:1px solid var(--line-soft); margin-top:4px;
  font-size:.84rem; font-weight:600; color:var(--brand)!important; }
.finder-empty{ padding:18px 14px; color:var(--muted); font-size:.9rem; }

/* ---------- home -------------------------------------------------------- */

.home-hero{ padding:70px 0 44px; border-bottom:1px solid var(--line-soft);
  background:var(--page-tint); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:56px; align-items:start; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:36px; } }
.home-hero h1{ font-size:clamp(2.1rem,1.3rem + 3.2vw,3.4rem); max-width:17ch; margin-bottom:16px; }
.home-hero .lede{ color:var(--muted); font-size:1.08rem; max-width:56ch; margin-bottom:28px; }

.hunt{ position:relative; }
.hunt input{
  width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; color:var(--text); font:inherit; font-size:1.05rem;
  padding:16px 18px 16px 46px; box-shadow:var(--shadow);
}
.hunt input::placeholder{ color:var(--faint); }
.hunt input:focus{ border-color:var(--brand); outline:none;
  box-shadow:0 0 0 3px var(--brand-wash); }
.hunt svg{ position:absolute; left:16px; top:27px; transform:translateY(-50%);
  color:var(--faint); }
.hunt-out{ margin-top:10px; display:none; }
.hunt-out.live{ display:block; }
.hunt-out ul{ list-style:none; margin:0; padding:6px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; max-height:340px; overflow-y:auto;
  box-shadow:var(--shadow); }
.hunt-out li a{ display:flex; gap:10px; align-items:baseline; padding:8px 12px;
  border-radius:8px; color:var(--text-dim); }
.hunt-out li a:hover{ background:var(--surface-2); color:var(--text); text-decoration:none; }
.hunt-out .cat{ margin-left:auto; font-size:.74rem; color:var(--faint); }

.tally{ display:flex; flex-wrap:wrap; gap:24px 40px; margin-top:32px; }
.tally div{ display:flex; flex-direction:column; gap:2px; }
.tally b{ font-family:var(--mono); font-weight:500; font-size:1.45rem;
  color:var(--brand); letter-spacing:-.02em; }
.tally span{ font-size:.86rem; color:var(--muted); }

.qc{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 22px 20px; box-shadow:var(--shadow); }
.qc h2{ font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--muted);
  letter-spacing:0; margin:0 0 14px; }
.qc-row{ display:grid; grid-template-columns:minmax(0,86px) minmax(0,1fr) auto minmax(0,1fr);
  gap:8px; align-items:center; }
.qc input,.qc select{
  background:var(--page); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--sans); font-size:.94rem; padding:10px 11px;
  min-width:0; width:100%;
}
.qc input{ font-family:var(--mono); }
.qc input:focus,.qc select:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-wash); }
.qc-swap{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--muted); padding:9px; cursor:pointer; line-height:0; }
.qc-swap:hover{ color:var(--brand); border-color:var(--brand); }
.qc-out{ font-family:var(--mono); font-size:1.5rem; color:var(--brand);
  margin:18px 0 0; letter-spacing:-.02em; word-break:break-word; }
.qc-link{ margin:8px 0 0; font-size:.85rem; }
.qc-link a{ color:var(--muted); }
.qc-link a:hover{ color:var(--brand); }
@media (max-width:420px){
  .qc-row{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .qc-row .qc-amount{ grid-column:1 / -1; }
}

.board{ padding:52px 0; }
.board + .board{ padding-top:0; }
.board-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:22px;
  border-bottom:1px solid var(--line-soft); padding-bottom:12px; flex-wrap:wrap; }
.board-head h2{ margin:0; }
.board-head .n{ font-family:var(--mono); font-size:.82rem; color:var(--faint); margin-left:auto; }
.board-head p{ margin:0; color:var(--muted); font-size:.92rem; }

.rows{ display:grid; grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  border-radius:12px; overflow:hidden; }
.rows a{ background:var(--surface); padding:13px 16px; color:var(--text-dim);
  font-size:.94rem; display:block; border-left:2px solid transparent; }
.rows a:hover{ background:var(--surface-2); color:var(--brand);
  border-left-color:var(--brand); text-decoration:none; }

.cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.cat-card{ background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:20px; display:block; color:inherit; }
.cat-card:hover{ border-color:var(--brand); text-decoration:none; box-shadow:var(--shadow); }
.cat-card h3{ margin:0 0 6px; font-size:1.06rem; }
.cat-card p{ margin:0 0 12px; color:var(--muted); font-size:.89rem; line-height:1.55; }
.cat-card .n{ font-family:var(--mono); font-size:.76rem; color:var(--brand); }
.cat-mark{ width:26px; height:3px; border-radius:2px; background:var(--brand);
  margin-bottom:14px; display:block; }

/* ---------- generic page ------------------------------------------------ */

.page-head{ padding:46px 0 26px; border-bottom:1px solid var(--line-soft); }
.page-head h1{ margin:0 0 10px; }
.page-head p{ margin:0; color:var(--muted); max-width:62ch; }

.crumbs{ font-size:.82rem; color:var(--faint); margin:0 0 14px; }
.crumbs a{ color:var(--muted); }
.crumbs span{ padding:0 7px; opacity:.5; }

.prose{ max-width:var(--measure); padding:36px 0 56px; color:var(--text-dim); }
.prose.wide{ max-width:860px; }
.prose h2{ margin-top:2em; }
.prose h3{ margin-top:1.7em; }
.prose ul,.prose ol{ padding-left:1.25em; margin:0 0 1.2em; }
.prose li{ margin-bottom:.4em; }
.prose table{ width:100%; border-collapse:collapse; margin:1.5em 0; font-size:.94rem; }
.prose th,.prose td{ border-bottom:1px solid var(--line-soft); padding:9px 12px; text-align:left; }
.prose th{ color:var(--text); font-weight:600; }

.panel{ background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:24px 26px; margin:0 0 18px; }
.panel h2{ margin-top:0; }
.panel :last-child{ margin-bottom:0; }

.panel label{ display:block; font-size:.88rem; font-weight:600; margin-bottom:6px; }
.panel .form-group{ margin-bottom:16px; }
.panel input[type=text],.panel input[type=email],.panel textarea{
  width:100%; background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font:inherit; padding:11px 13px;
}
.panel input:focus,.panel textarea:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-wash); }
.panel button[type=submit]{ background:var(--brand); color:var(--brand-ink); border:0;
  border-radius:var(--radius-sm); font-weight:600; font-size:.95rem;
  padding:11px 22px; cursor:pointer; }
.panel button[type=submit]:hover{ background:var(--brand-deep); }

/* ---------- tool page --------------------------------------------------- */

.tool-head{ padding:30px 0 20px; }
.tool-head h1{ margin:0 0 8px; }
.tool-head .tool-sub{ margin:0; color:var(--muted); max-width:60ch; font-size:.97rem; }

.bench{ background:var(--page-tint); border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft); padding:30px 0 34px; margin-bottom:38px; }
.bench-in{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 22px; }

.tool-layout{ display:grid; grid-template-columns:minmax(0,1fr) 260px;
  gap:48px; padding-bottom:64px; align-items:start; }
@media (max-width:940px){ .tool-layout{ grid-template-columns:1fr; gap:34px; } }
.tool-body{ min-width:0; max-width:72ch; color:var(--text-dim); }
.tool-body h2{ margin-top:2em; font-size:1.42rem; }
.tool-body h3{ margin-top:1.6em; }
.tool-body h2:first-child,.tool-body h3:first-child{ margin-top:0; }
.tool-body ul,.tool-body ol{ padding-left:1.25em; }
.tool-body li{ margin-bottom:.35em; }
.tool-body table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.92rem; }
.tool-body th,.tool-body td{ border-bottom:1px solid var(--line-soft);
  padding:9px 12px; text-align:left; }
.tool-body th{ color:var(--text); font-weight:600; background:var(--surface-2); }
.tool-body td{ font-family:var(--mono); font-size:.86rem; }
.tool-body td:last-child{ font-family:var(--sans); font-size:.92rem; color:var(--muted); }

.rail{ position:sticky; top:82px; }
.rail h2{ font-size:.9rem; font-family:var(--sans); font-weight:600; color:var(--muted);
  letter-spacing:0; margin:0 0 10px; }
.rail ul{ list-style:none; margin:0 0 26px; padding:0; border-top:1px solid var(--line-soft); }
.rail li a{ display:block; padding:9px 0; border-bottom:1px solid var(--line-soft);
  color:var(--text-dim); font-size:.9rem; }
.rail li a:hover{ color:var(--brand); text-decoration:none; }
@media (max-width:940px){ .rail{ position:static; } }

/* widget primitives, restyled from the original class names */
.converter-card,.converter-container,.converter-box,.input-box,.test-card,.card,
.converter-form,.result-box,.info-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow);
}
.bench .converter-card,.bench .converter-container,.bench .converter-box,
.bench .converter-form,.bench .input-box{ max-width:660px; margin:0 auto; }
.converter-title,.bench h1,.bench h2{ font-size:1.15rem; margin:0 0 16px;
  color:var(--text); text-align:left; }

.bench input[type="text"],.bench input[type="number"],.bench select,.bench textarea,
.input-field,.input-group input,.input-group select{
  background:var(--page); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--mono); font-size:1.02rem; padding:11px 13px;
}
.bench input:focus,.bench select:focus,.bench textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-wash); }
.bench button,.btn,.button,.convert-btn,.swap-btn,.reset-btn{
  background:var(--brand); color:var(--brand-ink); border:0; border-radius:var(--radius-sm);
  font-family:var(--sans); font-weight:600; font-size:.95rem; padding:11px 20px; cursor:pointer;
}
.bench button:hover,.btn:hover,.button:hover,.convert-btn:hover{ background:var(--brand-deep); }
.bench .input-group{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.bench .input-group > input,.bench .input-group > select{ flex:1 1 150px; min-width:0; }
.result,.results,.result-box{ font-family:var(--mono); color:var(--brand); font-size:1.1rem; }
.unit-label{ color:var(--muted); font-size:.88rem; }

/* ---------- tools index ------------------------------------------------- */

.filterbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:24px 0 6px; }
.filterbar input{ flex:1 1 280px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; color:var(--text); font:inherit; padding:12px 15px; }
.filterbar input:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-wash); }
.chips{ display:flex; gap:7px; flex-wrap:wrap; padding:14px 0 8px; }
.chips button{ background:var(--surface); border:1px solid var(--line); color:var(--text-dim);
  font:inherit; font-size:.85rem; padding:6px 13px; border-radius:999px; cursor:pointer; }
.chips button:not([aria-pressed="true"]):hover{ border-color:var(--brand); color:var(--brand); }
.chips button[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand);
  color:var(--brand-ink); font-weight:600; }
.noresult{ padding:40px 0; color:var(--muted); }

/* ---------- footer ------------------------------------------------------ */

.site-foot{ border-top:1px solid var(--line-soft); background:var(--page-tint);
  padding:46px 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:26px; } }
.foot-grid h3{ font-family:var(--sans); font-size:.82rem; font-weight:600;
  color:var(--muted); margin:0 0 12px; }
.foot-grid ul{ list-style:none; margin:0; padding:0; }
.foot-grid li{ margin-bottom:7px; }
.foot-grid a{ color:var(--text-dim); font-size:.89rem; }
.foot-grid a:hover{ color:var(--brand); }
.foot-about p{ color:var(--muted); font-size:.88rem; max-width:34ch; margin:12px 0 0; }
.foot-base{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
  border-top:1px solid var(--line-soft); margin-top:34px; padding-top:20px;
  color:var(--faint); font-size:.83rem; }
.foot-base a{ color:var(--faint); }

/* ---------- 404 --------------------------------------------------------- */

.lost{ text-align:center; padding:90px 0 110px; }
.lost h1{ font-size:clamp(2rem,1.4rem + 2.6vw,3rem); }
.lost p{ color:var(--muted); max-width:46ch; margin:0 auto 26px; }
.lost a.cta{ display:inline-block; background:var(--brand); color:var(--brand-ink);
  font-weight:600; padding:12px 24px; border-radius:10px; }
.lost a.cta:hover{ text-decoration:none; background:var(--brand-deep); }

/* a few widgets (keyboard map, gamepad, scoreboard) are wider than a phone —
   let them scroll sideways inside the bench rather than stretch the page */
@media (max-width:760px){
  .bench-in > .tool-canvas,
  .tool-body{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}


/* ==========================================================================
   Category colour
   Each of the 17 categories owns a hue. It identifies the section on the
   index, tints the tool page it belongs to, and marks the chips and cards —
   so the colour is doing work, not decoration.
   ========================================================================== */

/* default, overridden per category below */
[data-cat]{ --cat:var(--brand); --cat-soft:var(--brand-wash); --cat-edge:var(--line); }

[data-cat="length"]{ --cat:#4f46e5; --cat-soft:color-mix(in srgb,#4f46e5 12%,transparent); --cat-edge:color-mix(in srgb,#4f46e5 32%,transparent); }
[data-cat="weight"]{ --cat:#7c3aed; --cat-soft:color-mix(in srgb,#7c3aed 12%,transparent); --cat-edge:color-mix(in srgb,#7c3aed 32%,transparent); }
[data-cat="volume"]{ --cat:#2563eb; --cat-soft:color-mix(in srgb,#2563eb 12%,transparent); --cat-edge:color-mix(in srgb,#2563eb 32%,transparent); }
[data-cat="temperature"]{ --cat:#dc2626; --cat-soft:color-mix(in srgb,#dc2626 12%,transparent); --cat-edge:color-mix(in srgb,#dc2626 32%,transparent); }
[data-cat="area"]{ --cat:#059669; --cat-soft:color-mix(in srgb,#059669 12%,transparent); --cat-edge:color-mix(in srgb,#059669 32%,transparent); }
[data-cat="speed"]{ --cat:#0891b2; --cat-soft:color-mix(in srgb,#0891b2 12%,transparent); --cat-edge:color-mix(in srgb,#0891b2 32%,transparent); }
[data-cat="pressure"]{ --cat:#b45309; --cat-soft:color-mix(in srgb,#b45309 12%,transparent); --cat-edge:color-mix(in srgb,#b45309 32%,transparent); }
[data-cat="energy"]{ --cat:#e11d48; --cat-soft:color-mix(in srgb,#e11d48 12%,transparent); --cat-edge:color-mix(in srgb,#e11d48 32%,transparent); }
[data-cat="data"]{ --cat:#0d9488; --cat-soft:color-mix(in srgb,#0d9488 12%,transparent); --cat-edge:color-mix(in srgb,#0d9488 32%,transparent); }
[data-cat="time"]{ --cat:#9333ea; --cat-soft:color-mix(in srgb,#9333ea 12%,transparent); --cat-edge:color-mix(in srgb,#9333ea 32%,transparent); }
[data-cat="science"]{ --cat:#65a30d; --cat-soft:color-mix(in srgb,#65a30d 12%,transparent); --cat-edge:color-mix(in srgb,#65a30d 32%,transparent); }
[data-cat="device-tests"]{ --cat:#0284c7; --cat-soft:color-mix(in srgb,#0284c7 12%,transparent); --cat-edge:color-mix(in srgb,#0284c7 32%,transparent); }
[data-cat="network-tests"]{ --cat:#c026d3; --cat-soft:color-mix(in srgb,#c026d3 12%,transparent); --cat-edge:color-mix(in srgb,#c026d3 32%,transparent); }
[data-cat="typing"]{ --cat:#ea580c; --cat-soft:color-mix(in srgb,#ea580c 12%,transparent); --cat-edge:color-mix(in srgb,#ea580c 32%,transparent); }
[data-cat="clickers"]{ --cat:#db2777; --cat-soft:color-mix(in srgb,#db2777 12%,transparent); --cat-edge:color-mix(in srgb,#db2777 32%,transparent); }
[data-cat="quizzes"]{ --cat:#ca8a04; --cat-soft:color-mix(in srgb,#ca8a04 12%,transparent); --cat-edge:color-mix(in srgb,#ca8a04 32%,transparent); }
[data-cat="web"]{ --cat:#475569; --cat-soft:color-mix(in srgb,#475569 12%,transparent); --cat-edge:color-mix(in srgb,#475569 32%,transparent); }

[data-theme="dark"] [data-cat="length"]{ --cat:#a5b4fc; --cat-soft:color-mix(in srgb,#a5b4fc 16%,transparent); --cat-edge:color-mix(in srgb,#a5b4fc 40%,transparent); }
[data-theme="dark"] [data-cat="weight"]{ --cat:#c4b5fd; --cat-soft:color-mix(in srgb,#c4b5fd 16%,transparent); --cat-edge:color-mix(in srgb,#c4b5fd 40%,transparent); }
[data-theme="dark"] [data-cat="volume"]{ --cat:#93c5fd; --cat-soft:color-mix(in srgb,#93c5fd 16%,transparent); --cat-edge:color-mix(in srgb,#93c5fd 40%,transparent); }
[data-theme="dark"] [data-cat="temperature"]{ --cat:#fca5a5; --cat-soft:color-mix(in srgb,#fca5a5 16%,transparent); --cat-edge:color-mix(in srgb,#fca5a5 40%,transparent); }
[data-theme="dark"] [data-cat="area"]{ --cat:#6ee7b7; --cat-soft:color-mix(in srgb,#6ee7b7 16%,transparent); --cat-edge:color-mix(in srgb,#6ee7b7 40%,transparent); }
[data-theme="dark"] [data-cat="speed"]{ --cat:#67e8f9; --cat-soft:color-mix(in srgb,#67e8f9 16%,transparent); --cat-edge:color-mix(in srgb,#67e8f9 40%,transparent); }
[data-theme="dark"] [data-cat="pressure"]{ --cat:#fcd34d; --cat-soft:color-mix(in srgb,#fcd34d 16%,transparent); --cat-edge:color-mix(in srgb,#fcd34d 40%,transparent); }
[data-theme="dark"] [data-cat="energy"]{ --cat:#fda4af; --cat-soft:color-mix(in srgb,#fda4af 16%,transparent); --cat-edge:color-mix(in srgb,#fda4af 40%,transparent); }
[data-theme="dark"] [data-cat="data"]{ --cat:#5eead4; --cat-soft:color-mix(in srgb,#5eead4 16%,transparent); --cat-edge:color-mix(in srgb,#5eead4 40%,transparent); }
[data-theme="dark"] [data-cat="time"]{ --cat:#d8b4fe; --cat-soft:color-mix(in srgb,#d8b4fe 16%,transparent); --cat-edge:color-mix(in srgb,#d8b4fe 40%,transparent); }
[data-theme="dark"] [data-cat="science"]{ --cat:#bef264; --cat-soft:color-mix(in srgb,#bef264 16%,transparent); --cat-edge:color-mix(in srgb,#bef264 40%,transparent); }
[data-theme="dark"] [data-cat="device-tests"]{ --cat:#7dd3fc; --cat-soft:color-mix(in srgb,#7dd3fc 16%,transparent); --cat-edge:color-mix(in srgb,#7dd3fc 40%,transparent); }
[data-theme="dark"] [data-cat="network-tests"]{ --cat:#f0abfc; --cat-soft:color-mix(in srgb,#f0abfc 16%,transparent); --cat-edge:color-mix(in srgb,#f0abfc 40%,transparent); }
[data-theme="dark"] [data-cat="typing"]{ --cat:#fdba74; --cat-soft:color-mix(in srgb,#fdba74 16%,transparent); --cat-edge:color-mix(in srgb,#fdba74 40%,transparent); }
[data-theme="dark"] [data-cat="clickers"]{ --cat:#f9a8d4; --cat-soft:color-mix(in srgb,#f9a8d4 16%,transparent); --cat-edge:color-mix(in srgb,#f9a8d4 40%,transparent); }
[data-theme="dark"] [data-cat="quizzes"]{ --cat:#fde047; --cat-soft:color-mix(in srgb,#fde047 16%,transparent); --cat-edge:color-mix(in srgb,#fde047 40%,transparent); }
[data-theme="dark"] [data-cat="web"]{ --cat:#cbd5e1; --cat-soft:color-mix(in srgb,#cbd5e1 16%,transparent); --cat-edge:color-mix(in srgb,#cbd5e1 40%,transparent); }

/* fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 10%, transparent)){
  [data-cat]{ --cat-soft:var(--surface-2); --cat-edge:var(--line); }
}


/* ---------- hero: colour wash ------------------------------------------- */

.home-hero{ position:relative; overflow:hidden; }
.home-hero::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:150%;
  background:
    radial-gradient(42% 55% at 12% 18%, rgba(34,184,236,.20), transparent 70%),
    radial-gradient(38% 50% at 78% 8%,  rgba(124,58,237,.16), transparent 70%),
    radial-gradient(34% 46% at 62% 78%, rgba(234,88,12,.12),  transparent 70%);
  pointer-events:none;
}
[data-theme="dark"] .home-hero::before{
  background:
    radial-gradient(42% 55% at 12% 18%, rgba(34,184,236,.20), transparent 70%),
    radial-gradient(38% 50% at 78% 8%,  rgba(167,139,250,.16), transparent 70%),
    radial-gradient(34% 46% at 62% 78%, rgba(251,146,60,.12),  transparent 70%);
}
.home-hero > *{ position:relative; z-index:1; }

.home-hero h1 mark,.about-hero h1 mark{
  background:linear-gradient(to top, var(--brand-wash) 62%, transparent 62%);
  color:inherit; padding:0 .08em; border-radius:3px;
}

.tally b{ color:var(--tally, var(--brand)); }
.tally div:nth-child(1){ --tally:#2563eb; }
.tally div:nth-child(2){ --tally:#7c3aed; }
.tally div:nth-child(3){ --tally:#059669; }
[data-theme="dark"] .tally div:nth-child(1){ --tally:#93c5fd; }
[data-theme="dark"] .tally div:nth-child(2){ --tally:#c4b5fd; }
[data-theme="dark"] .tally div:nth-child(3){ --tally:#6ee7b7; }

.qc{ border-top:3px solid var(--brand); }

/* ---------- category cards ---------------------------------------------- */

.cat-card{ position:relative; overflow:hidden; transition:border-color .15s, transform .15s; }
.cat-card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--cat);
}
.cat-card:hover{ border-color:var(--cat-edge); transform:translateY(-2px); }
.cat-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px;
  background:var(--cat-soft); color:var(--cat); margin-bottom:13px;
}
.cat-icon svg{ width:21px; height:21px; }
.cat-card .n{ color:var(--cat); font-weight:500; }

/* ---------- lists and chips --------------------------------------------- */

.rows a:hover{ border-left-color:var(--cat); color:var(--cat); background:var(--cat-soft); }
.chips button[aria-pressed="true"]{
  background:var(--cat); border-color:var(--cat); color:#fff;
}
[data-theme="dark"] .chips button[aria-pressed="true"]{ color:#0d1322; }
.chips button:not([aria-pressed="true"]):hover{ border-color:var(--cat); color:var(--cat); }
.chips button[aria-pressed="true"]:hover{ filter:brightness(1.08); }

.board-head{ border-bottom-color:var(--cat-edge); }
.board-head h2{ display:flex; align-items:center; gap:10px; }
.board-head h2::before{
  content:""; width:9px; height:9px; border-radius:3px; background:var(--cat);
  flex:0 0 auto;
}

/* ---------- tool page ---------------------------------------------------- */

.tool-head .crumbs a.cat-link{ color:var(--cat); font-weight:500; }
.bench{
  background:linear-gradient(180deg, var(--cat-soft), transparent 85%), var(--page-tint);
  border-top-color:var(--cat-edge);
}
.tool-head h1{ padding-left:0; }
.rail h2{ display:flex; align-items:center; gap:8px; }
.rail h2::before{
  content:""; width:8px; height:8px; border-radius:2px; background:var(--cat); flex:0 0 auto;
}

/* several tool stylesheets centre a bare h1; the page header is ours */
.tool-head h1,.page-head h1,.home-hero h1{ text-align:left; }

/* a touch more of the category hue in the workbench band */
.bench{
  background:linear-gradient(180deg, var(--cat-soft), transparent 88%), var(--page-tint);
  border-top:1px solid var(--cat-edge);
}
.home-hero h1 mark,.about-hero h1 mark{
  background:linear-gradient(to top, var(--brand-wash) 34%, transparent 34%);
  padding:0 .06em;
}
.about-hero h1 mark{ box-decoration-break:clone;
  -webkit-box-decoration-break:clone; }

/* a colour dot on each chip makes the palette readable at rest */
.chips button{ display:inline-flex; align-items:center; gap:7px; }
.chips button::before{
  content:""; width:8px; height:8px; border-radius:3px;
  background:var(--cat); flex:0 0 auto;
}
.chips button[data-cat="all"]::before{
  background:linear-gradient(135deg,#4f46e5,#0891b2 45%,#ea580c);
}
.chips button[aria-pressed="true"]::before{ background:currentColor; opacity:.85; }
.board-head .n{ color:var(--cat); }

/* ==========================================================================
   Rebuilt converter widget (.cx)
   ========================================================================== */

.cx{
  max-width:720px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:22px 24px 18px; box-shadow:var(--shadow);
}
.cx-io{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:12px; align-items:end; }
.cx-field{ min-width:0; }
.cx-label{ display:block; font-size:.82rem; font-weight:600; color:var(--muted);
  margin-bottom:6px; }
.cx-label abbr{ color:var(--cat); text-decoration:none; font-family:var(--mono);
  font-size:.9em; margin-left:4px; }
.cx-io input{
  width:100%; background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text);
  font-family:var(--mono); font-size:1.32rem; padding:13px 14px; min-width:0;
}
.cx-io input:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.cx-swap{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--muted); padding:12px; cursor:pointer;
  line-height:0; align-self:end; }
.cx-swap:hover{ color:var(--cat); border-color:var(--cat); }

.cx-result{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:20px; padding-top:16px; border-top:1px dashed var(--line); }
.cx-out{ margin:0; font-family:var(--mono); font-size:1.05rem; color:var(--muted); }
.cx-out strong{ font-size:1.75rem; color:var(--cat); font-weight:500;
  letter-spacing:-.02em; margin-right:.2em; }
.cx-copy{ margin-left:auto; background:var(--cat-soft); border:1px solid var(--cat-edge);
  color:var(--cat); font:inherit; font-size:.85rem; font-weight:600;
  padding:7px 15px; border-radius:999px; cursor:pointer; }
.cx-copy:hover{ background:var(--cat); color:#fff; border-color:var(--cat); }
[data-theme="dark"] .cx-copy:hover{ color:#0d1322; }
.cx-copy.is-done{ background:var(--cat); color:#fff; border-color:var(--cat); }

.cx-formula,.cx-extra{ margin:10px 0 0; font-family:var(--mono); font-size:.84rem;
  color:var(--faint); }
.cx-extra{ font-family:var(--sans); color:var(--muted); }
.cx-extra[hidden]{ display:none; }

.cx-foot{ display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); }
.cx-quick{ display:flex; gap:6px; flex-wrap:wrap; }
.cx-quick button{ background:var(--surface-2); border:1px solid var(--line);
  color:var(--text-dim); font-family:var(--mono); font-size:.82rem;
  padding:5px 11px; border-radius:7px; cursor:pointer; }
.cx-quick button:hover{ border-color:var(--cat); color:var(--cat);
  background:var(--cat-soft); }
.cx-prec{ margin-left:auto; font-size:.82rem; color:var(--muted);
  display:flex; align-items:center; gap:7px; }
.cx-prec select{ background:var(--page); border:1px solid var(--line);
  border-radius:7px; color:var(--text); font:inherit; font-size:.82rem; padding:5px 8px; }

@media (max-width:620px){
  .cx{ padding:18px 16px 14px; }
  .cx-io{ grid-template-columns:1fr; gap:10px; }
  .cx-swap{ justify-self:center; transform:rotate(90deg); }
  .cx-prec{ margin-left:0; }
}

/* prose bits used by the rebuilt pages */
.lead-figure{ font-family:var(--mono); font-size:1.02rem; color:var(--cat);
  background:var(--cat-soft); border-left:3px solid var(--cat);
  padding:12px 16px; border-radius:0 8px 8px 0; margin:1.3em 0; }
.cx-inline{ font-family:var(--mono); font-size:.88em; background:var(--surface-2);
  border:1px solid var(--line-soft); padding:1px 6px; border-radius:5px; }
.tool-body ol{ counter-reset:step; list-style:none; padding-left:0; }
.tool-body ol > li{ position:relative; padding-left:38px; margin-bottom:.7em; }
.tool-body ol > li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:.05em;
  width:25px; height:25px; border-radius:8px;
  background:var(--cat-soft); color:var(--cat);
  font-family:var(--mono); font-size:.8rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- the working, step by step ----------------------------------- */

.cx-steps-list{ counter-reset:cxstep; list-style:none; padding:0; margin:0; }
.cx-steps-list > li{
  position:relative; padding:0 0 18px 44px; margin:0;
  border-left:2px solid var(--line-soft); margin-left:13px;
}
.cx-steps-list > li:last-child{ border-left-color:transparent; padding-bottom:0; }
.cx-steps-list > li::before{
  counter-increment:cxstep; content:counter(cxstep);
  position:absolute; left:-14px; top:0;
  width:26px; height:26px; border-radius:9px;
  background:var(--cat); color:#fff;
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
[data-theme="dark"] .cx-steps-list > li::before{ color:#0d1322; }
.cx-step-what{ display:block; font-weight:600; color:var(--text); margin-bottom:5px;
  font-size:.95rem; }
.cx-step-eq{
  display:block; font-family:var(--mono); font-size:.95rem; color:var(--text);
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:8px; padding:9px 12px; margin-bottom:6px; overflow-x:auto;
}
.cx-step-eq b{ color:var(--cat); font-weight:600; }
.cx-step-eq s{ color:var(--faint); text-decoration-color:var(--coral);
  text-decoration-thickness:2px; }
.cx-step-why{ display:block; font-size:.88rem; color:var(--muted); line-height:1.55; }
.cx-estimate{
  margin:16px 0 0; padding:12px 15px; font-size:.9rem; color:var(--text-dim);
  background:var(--cat-soft); border-radius:9px;
}
.cx-estimate strong{ color:var(--text); }

/* ---------- the two scales ---------------------------------------------- */

.cx-scale{ width:100%; height:auto; display:block; }
.cx-track{ fill:var(--surface-2); stroke:var(--line); }
.cx-fill{ fill:var(--cat); opacity:.75; }
.cx-tick{ stroke:var(--faint); stroke-width:1.2; }
.cx-tick-b{ stroke:var(--cat); }
.cx-tlab{ fill:var(--muted); font-family:var(--mono); font-size:11px; text-anchor:middle; }
.cx-tlab-b{ fill:var(--cat); }
.cx-axis{ fill:var(--text); font-family:var(--sans); font-size:12px; font-weight:600; }
.cx-axis-b{ fill:var(--cat); }
.cx-marker{ stroke:var(--coral); stroke-width:2.5; stroke-linecap:round; }

/* ---------- comparison bars --------------------------------------------- */

.cx-bars{ list-style:none; padding:0; margin:0; }
.cx-bars li{ display:grid; grid-template-columns:minmax(96px,150px) minmax(0,1fr) auto;
  gap:12px; align-items:center; padding:5px 0; font-size:.88rem; }
.cx-bar-label{ color:var(--text-dim); }
.cx-bar-track{ background:var(--surface-2); border-radius:5px; height:15px;
  overflow:hidden; }
.cx-bar-fill{ display:block; height:100%; background:var(--line);
  border-radius:5px; }
.cx-bars li.is-mine .cx-bar-fill{ background:var(--cat); }
.cx-bars li.is-mine .cx-bar-label{ color:var(--cat); font-weight:600; }
.cx-bar-val{ font-family:var(--mono); font-size:.78rem; color:var(--muted);
  white-space:nowrap; }
@media (max-width:620px){
  .cx-bars li{ grid-template-columns:minmax(78px,1fr) minmax(0,1.2fr);
    grid-template-areas:"l b" "v v"; gap:6px 10px; }
  .cx-bar-label{ grid-area:l; } .cx-bar-track{ grid-area:b; }
  .cx-bar-val{ grid-area:v; font-size:.72rem; }
}

/* ---------- mixed-unit reading note ------------------------------------- */
.cx-read{ margin:8px 0 0; font-size:.84rem; color:var(--cat); }
.cx-read[hidden]{ display:none; }

/* ---------- practice ----------------------------------------------------- */
.cx-quiz{ background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--cat); border-radius:var(--radius);
  padding:20px 22px; margin:1.4em 0; }
.cx-q{ margin:0 0 14px; font-size:1.05rem; color:var(--text); }
.cx-q strong{ font-family:var(--mono); color:var(--cat); }
.cx-q-unit{ font-family:var(--mono); color:var(--muted); font-size:.9em; }
.cx-q-row{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.cx-q-input{ flex:1 1 160px; min-width:0; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--text);
  font-family:var(--mono); font-size:1.05rem; padding:10px 13px; }
.cx-q-input:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.cx-q-check{ background:var(--cat); color:#fff; border:0; border-radius:var(--radius-sm);
  font:inherit; font-weight:600; font-size:.92rem; padding:10px 20px; cursor:pointer; }
[data-theme="dark"] .cx-q-check{ color:#0d1322; }
.cx-q-new,.cx-q-show,.cx-copysteps{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  font:inherit; font-size:.86rem; padding:9px 15px;
  border-radius:var(--radius-sm); cursor:pointer;
}
.cx-q-new:hover,.cx-q-show:hover,.cx-copysteps:hover{ border-color:var(--cat); color:var(--cat); }
.cx-q-show{ margin-top:12px; }
.cx-q-show[hidden]{ display:none; }
.cx-q-mark{ margin:13px 0 0; font-size:.92rem; min-height:1.2em; }
.cx-q-mark.is-right{ color:var(--mint); font-weight:600; }
.cx-q-mark.is-close{ color:var(--amber); font-weight:600; }
.cx-q-mark.is-wrong{ color:var(--coral); font-weight:600; }
.cx-q-work{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft); }
.cx-q-work[hidden]{ display:none; }
.cx-q-foot{ margin:14px 0 0; font-size:.82rem; color:var(--faint); }
.cx-q-score{ font-family:var(--mono); color:var(--cat); }

/* ---------- popular values ----------------------------------------------- */
.cx-pop{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:1.2em 0; }
.cx-pop li{ margin:0; }
.cx-pop a{ display:block; background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:7px; padding:6px 12px; font-size:.85rem; color:var(--text-dim); }
.cx-pop a:hover{ border-color:var(--cat); color:var(--cat);
  background:var(--cat-soft); text-decoration:none; }

/* ---------- relationship graph ------------------------------------------ */
.cx-line{ width:100%; height:auto; display:block; }
.cx-grid{ stroke:var(--line-soft); stroke-width:1; }
.cx-axisline{ stroke:var(--line); stroke-width:1.6; }
.cx-plot{ stroke:var(--cat); stroke-width:2.6; stroke-linecap:round; fill:none; }
.cx-point{ fill:var(--coral); stroke:var(--surface); stroke-width:2; }
.cx-drop{ stroke:var(--coral); stroke-width:1.2; stroke-dasharray:4 4; opacity:.75; }
.cx-intercept{ fill:var(--cat); }
.cx-cross{ fill:var(--amber); }
.cx-note{ fill:var(--cat); font-family:var(--mono); font-size:11px; }
.cx-note-2{ fill:var(--amber); }
.cx-tlab-y{ text-anchor:end; }

/* ---------- landmark list ----------------------------------------------- */
.cx-marks{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line-soft); }
.cx-marks li{ display:grid; grid-template-columns:88px 88px minmax(0,1fr);
  gap:12px; align-items:baseline; padding:8px 10px;
  border-bottom:1px solid var(--line-soft); font-size:.89rem; }
.cx-mark-v{ font-family:var(--mono); font-size:.84rem; color:var(--text-dim);
  text-align:right; }
.cx-mark-alt{ color:var(--muted); }
.cx-mark-label{ color:var(--text-dim); }
.cx-marks li.is-mine{ background:var(--cat-soft); }
.cx-marks li.is-mine .cx-mark-v,.cx-marks li.is-mine .cx-mark-label{
  color:var(--cat); font-weight:600; }
@media (max-width:560px){
  .cx-marks li{ grid-template-columns:76px 76px minmax(0,1fr); gap:8px; font-size:.82rem; }
}

/* ---------- impossible reading ------------------------------------------ */
.cx-warn{ margin:12px 0 0; padding:10px 14px; font-size:.87rem;
  background:color-mix(in srgb, var(--coral) 12%, transparent);
  border-left:3px solid var(--coral); border-radius:0 8px 8px 0; color:var(--text); }
.cx-warn[hidden]{ display:none; }

/* ---------- every scale at once ----------------------------------------- */
.cx-all{ list-style:none; padding:0; margin:1.2em 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.cx-all li{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:10px; padding:13px 15px; }
.cx-all-v{ display:block; font-family:var(--mono); font-size:1.4rem;
  color:var(--cat); letter-spacing:-.02em; }
.cx-all-u{ display:inline-block; font-family:var(--mono); font-size:.85rem;
  color:var(--muted); margin-top:2px; }
.cx-all-n{ display:block; font-size:.8rem; color:var(--faint); margin-top:3px; }

/* ---------- convention switch (decimal vs binary, and the like) ---------- */
.cx-modes{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:3px; gap:3px; }
.cx-modes button{ background:transparent; border:0; border-radius:7px;
  color:var(--muted); font:inherit; font-size:.82rem; padding:6px 13px; cursor:pointer; }
.cx-modes button:hover{ color:var(--text); }
.cx-modes button[aria-pressed="true"]{ background:var(--cat); color:#fff; font-weight:600; }
[data-theme="dark"] .cx-modes button[aria-pressed="true"]{ color:#0d1322; }
.cx-mode-note{ margin:10px 0 0; font-size:.84rem; color:var(--muted); }
.cx-caveat{ margin:12px 0 0; padding:9px 13px; font-size:.84rem; color:var(--muted);
  background:var(--surface-2); border-left:3px solid var(--cat-edge); border-radius:0 7px 7px 0; }

/* ---------- energy / time / power calculator ---------------------------- */
.rt{ max-width:720px; margin:0 auto; background:var(--surface);
  border:1px solid var(--line); border-top:3px solid var(--cat);
  border-radius:var(--radius); padding:22px 24px 18px; box-shadow:var(--shadow); }
.rt-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:620px){ .rt-grid{ grid-template-columns:1fr; } }
.rt-grid label{ display:block; font-size:.82rem; font-weight:600;
  color:var(--muted); margin-bottom:6px; }
.rt-grid label span{ color:var(--cat); font-family:var(--mono); margin-left:4px; }
.rt-grid input{ width:100%; background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font-family:var(--mono);
  font-size:1.15rem; padding:12px 13px; }
.rt-grid input:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.rt-out{ margin:20px 0 0; padding-top:16px; border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:1.05rem; color:var(--muted); }
.rt-out strong{ font-size:1.75rem; color:var(--cat); font-weight:500; margin-right:.2em; }
.rt-quick{ display:flex; gap:6px; flex-wrap:wrap; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--line-soft); }
.rt-quick button{ background:var(--surface-2); border:1px solid var(--line);
  color:var(--text-dim); font:inherit; font-size:.8rem; padding:5px 11px;
  border-radius:7px; cursor:pointer; }
.rt-quick button:hover{ border-color:var(--cat); color:var(--cat); background:var(--cat-soft); }

/* ==========================================================================
   Hardware testers
   ========================================================================== */

.kb, .ms{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:20px 22px 18px; box-shadow:var(--shadow); }

/* ---------- keyboard ----------------------------------------------------- */
.kb-layout{ overflow-x:auto; padding-bottom:6px; }
.kb-board{ min-width:960px; }
.kb-row{ display:flex; gap:4px; margin-bottom:4px; }
.kb-gap{ flex:0 0 auto; }
.kb-key{ flex:0 0 auto; height:2.6rem; display:flex; align-items:center;
  justify-content:center; background:var(--surface-2); border:1px solid var(--line);
  border-bottom-width:2px; border-radius:6px; font-size:.68rem;
  color:var(--text-dim); font-family:var(--sans); overflow:hidden;
  white-space:nowrap; transition:background .06s, color .06s; }
.kb-key.is-seen{ background:var(--cat-soft); border-color:var(--cat-edge);
  color:var(--cat); }
.kb-key.is-down{ background:var(--cat); border-color:var(--cat); color:#fff;
  transform:translateY(1px); border-bottom-width:1px; }
[data-theme="dark"] .kb-key.is-down{ color:#0d1322; }

.kb-readout{ margin:18px 0 0; padding:14px 16px; background:var(--surface-2);
  border-radius:10px; font-family:var(--mono); font-size:.9rem;
  display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; color:var(--muted); }
.kb-readout strong{ font-size:1.3rem; color:var(--cat); font-weight:600; }
.kb-extra{ color:var(--coral); }
.kb-stats{ display:flex; gap:22px; flex-wrap:wrap; margin:14px 0 0;
  font-size:.88rem; color:var(--muted); }
.kb-stats b{ color:var(--cat); font-family:var(--mono); }
.kb-untested{ margin:10px 0 0; font-size:.84rem; color:var(--faint);
  line-height:1.6; }
.kb-log{ margin-top:14px; border-top:1px solid var(--line-soft); padding-top:10px;
  max-height:190px; overflow-y:auto; }
.kb-line{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono);
  font-size:.76rem; padding:3px 0; color:var(--muted); }
.kb-l-t{ width:38px; color:var(--faint); }
.kb-l-c{ min-width:110px; color:var(--text); }

/* ---------- mouse -------------------------------------------------------- */
.ms-pad{ position:relative; height:230px; background:var(--surface-2);
  border:1px dashed var(--line); border-radius:12px; display:flex;
  align-items:center; justify-content:center; cursor:crosshair;
  user-select:none; }
.ms-mouse{ position:relative; width:104px; height:164px; }
.ms-body{ position:absolute; inset:0; border:2px solid var(--line);
  border-radius:52px 52px 44px 44px; background:var(--surface); }
.ms-btn{ position:absolute; background:var(--surface-2); border:2px solid var(--line);
  transition:background .07s; }
.ms-b0{ left:2px; top:2px; width:44px; height:74px; border-radius:44px 6px 0 0; }
.ms-b2{ right:2px; top:2px; width:44px; height:74px; border-radius:6px 44px 0 0; }
.ms-b1{ left:44px; top:14px; width:16px; height:44px; border-radius:8px; }
.ms-b3{ left:-14px; top:56px; width:12px; height:26px; border-radius:6px 0 0 6px; }
.ms-b4{ left:-14px; top:26px; width:12px; height:26px; border-radius:6px 0 0 6px; }
.ms-btn.is-down{ background:var(--cat); border-color:var(--cat); }
.ms-wheel{ position:absolute; left:44px; top:14px; width:16px; height:44px;
  pointer-events:none; }
.ms-wheel-up,.ms-wheel-down{ position:absolute; left:0; width:16px; height:21px;
  border-radius:8px; transition:background .1s; }
.ms-wheel-up{ top:0; } .ms-wheel-down{ bottom:0; }
.ms-wheel-up.is-down,.ms-wheel-down.is-down{ background:var(--cat); }
.ms-coords,.ms-rate{ font-family:var(--mono); font-size:.82rem; color:var(--muted); }
.ms-meta{ display:flex; gap:24px; flex-wrap:wrap; margin-top:14px;
  font-size:.85rem; color:var(--muted); }
.ms-meta b{ color:var(--text); }
.ms-seen{ margin:10px 0 0; font-size:.84rem; color:var(--faint); }

/* ---------- click speed -------------------------------------------------- */
.ms-cps-area{ height:180px; background:var(--surface-2);
  border:2px dashed var(--line); border-radius:12px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; user-select:none; }
.ms-cps-area.is-live{ border-color:var(--cat); border-style:solid;
  background:var(--cat-soft); }
.ms-cps-count{ font-family:var(--mono); font-size:2.6rem; color:var(--cat);
  line-height:1; }
.ms-cps-hint{ font-size:.88rem; color:var(--muted); }
.ms-cps-bar{ display:flex; gap:20px; flex-wrap:wrap; align-items:center;
  margin-top:14px; font-size:.88rem; color:var(--muted); }
.ms-cps-time{ font-family:var(--mono); color:var(--text); }
.ms-cps-score{ margin:12px 0 0; font-family:var(--mono); color:var(--muted); }
.ms-cps-score strong{ font-size:1.6rem; color:var(--cat); font-weight:500; }
.ms-cps-best{ font-family:var(--mono); font-size:.82rem; color:var(--faint); }

/* ---------- double click ------------------------------------------------- */
.ms-dbl-area{ height:150px; background:var(--surface-2);
  border:2px dashed var(--line); border-radius:12px; display:flex;
  align-items:center; justify-content:center; cursor:pointer;
  user-select:none; font-size:.9rem; color:var(--muted); }
.ms-dbl-out{ margin:14px 0 0; font-family:var(--mono); color:var(--muted);
  display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; }
.ms-dbl-out strong{ font-size:1.5rem; color:var(--cat); font-weight:500; }
.ms-dbl-list{ margin-top:12px; }
.ms-dbl-row{ display:flex; gap:16px; font-size:.82rem; padding:4px 0;
  border-bottom:1px solid var(--line-soft); color:var(--muted); }
.ms-dbl-row span:first-child{ font-family:var(--mono); width:70px; color:var(--text); }
.ms-dbl-row.is-warn span{ color:var(--coral); }

.tester-tools{ display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
.tester-tools button{ background:transparent; border:1px solid var(--line);
  color:var(--muted); font:inherit; font-size:.85rem; padding:8px 15px;
  border-radius:var(--radius-sm); cursor:pointer; }
.tester-tools button:hover{ border-color:var(--cat); color:var(--cat); }
.tester-tools select{ background:var(--page); border:1px solid var(--line);
  border-radius:7px; color:var(--text); font:inherit; font-size:.85rem;
  padding:7px 9px; }
@media (max-width:620px){
  .kb,.ms{ padding:16px 14px; }
  .ms-pad{ height:200px; }
}

/* ==========================================================================
   Typing, reaction, counters and clickers
   ========================================================================== */

.ty,.rx,.fp,.sb,.ct,.sc,.cl{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:20px 22px 18px; box-shadow:var(--shadow); }

/* ---------- typing ------------------------------------------------------- */
.ty-passage{ font-family:var(--mono); font-size:1.05rem; line-height:2;
  background:var(--surface-2); border-radius:10px; padding:16px 18px;
  max-height:180px; overflow-y:auto; color:var(--faint); }
.ty-passage span.is-ok{ color:var(--text); }
.ty-passage span.is-bad{ color:#fff; background:var(--coral); border-radius:2px; }
.ty-passage span.is-next{ background:var(--cat); color:#fff; border-radius:2px; }
[data-theme="dark"] .ty-passage span.is-next{ color:#0d1322; }
.ty-input{ width:100%; margin-top:14px; min-height:88px; resize:vertical;
  background:var(--page); border:1px solid var(--line); border-radius:10px;
  color:var(--text); font-family:var(--mono); font-size:1rem; padding:13px 15px; }
.ty-input:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.ty-input:disabled{ opacity:.6; }
.ty-bar{ display:flex; gap:26px; flex-wrap:wrap; align-items:center;
  margin-top:14px; font-size:.86rem; color:var(--muted); }
.ty-bar b{ font-family:var(--mono); font-size:1.35rem; color:var(--cat);
  font-weight:500; margin-right:4px; }
.ty-result{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); }
.ty-big,.rx-big{ display:flex; align-items:baseline; gap:10px; }
.ty-big strong,.rx-big strong{ font-family:var(--mono); font-size:3rem;
  color:var(--cat); font-weight:500; line-height:1; }
.ty-big span,.rx-big span{ color:var(--muted); font-size:.92rem; }
.ty-break,.rx-break{ list-style:none; padding:0; margin:16px 0 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.ty-break li,.rx-break li{ background:var(--surface-2); border-radius:9px;
  padding:10px 13px; }
.ty-break span,.rx-break span{ display:block; font-size:.76rem; color:var(--faint); }
.ty-break b,.rx-break b{ font-family:var(--mono); font-size:1rem; color:var(--text); }
.ty-note,.rx-note{ margin:14px 0 0; font-size:.9rem; color:var(--text-dim); }

/* ---------- reaction ----------------------------------------------------- */
.rx-pad{ height:230px; border-radius:12px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; cursor:pointer;
  user-select:none; background:var(--surface-2);
  border:2px dashed var(--line); text-align:center; padding:0 20px; }
.rx-pad strong{ font-size:1.7rem; color:var(--text); }
.rx-pad span{ font-size:.9rem; color:var(--muted); }
.rx-pad.is-wait{ background:var(--amber); border-style:solid; border-color:var(--amber); }
.rx-pad.is-go{ background:var(--mint); border-style:solid; border-color:var(--mint); }
.rx-pad.is-early{ background:var(--coral); border-style:solid; border-color:var(--coral); }
.rx-pad.is-wait strong,.rx-pad.is-go strong,.rx-pad.is-early strong,
.rx-pad.is-wait span,.rx-pad.is-go span,.rx-pad.is-early span{ color:#11161f; }
.rx-out{ margin-top:18px; }
.rx-list{ list-style:none; padding:0; margin:16px 0 0; }
.rx-list li{ display:grid; grid-template-columns:26px 1fr 72px; gap:10px;
  align-items:center; padding:3px 0; font-size:.82rem; color:var(--muted); }
.rx-list b{ font-family:var(--mono); text-align:right; color:var(--text); }
.rx-bar{ background:var(--surface-2); border-radius:4px; height:10px; overflow:hidden; }
.rx-bar i{ display:block; height:100%; background:var(--cat); border-radius:4px; }

/* ---------- frame rate --------------------------------------------------- */
.fp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px; }
.fp-grid div{ background:var(--surface-2); border-radius:9px; padding:12px 14px; }
.fp-grid span{ display:block; font-size:.74rem; color:var(--faint); }
.fp-grid b{ font-family:var(--mono); font-size:1.5rem; color:var(--cat);
  font-weight:500; }
.fp-spark{ display:flex; align-items:flex-end; gap:2px; height:70px;
  margin-top:16px; background:var(--surface-2); border-radius:9px; padding:6px; }
.fp-spark i{ flex:1; background:var(--cat); border-radius:2px 2px 0 0; height:2%;
  transition:height .08s linear; }
.fp-spark i.is-mid{ background:var(--amber); }
.fp-spark i.is-bad{ background:var(--coral); }
.fp-box{ position:relative; height:0; overflow:hidden; margin-top:12px; }
.fp-box.is-stress{ height:90px; background:var(--surface-2); border-radius:9px; }
.fp-box span{ position:absolute; top:36px; left:0; width:14px; height:14px;
  border-radius:50%; background:var(--cat); opacity:.55;
  animation:fpslide 2.4s linear infinite; }
@keyframes fpslide{ from{ transform:translateX(-20px) } to{ transform:translateX(1200px) } }

/* ---------- space bar ---------------------------------------------------- */
.sb-area{ height:180px; background:var(--surface-2); border:2px dashed var(--line);
  border-radius:12px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; user-select:none; }
.sb-area.is-live{ border-style:solid; border-color:var(--cat);
  background:var(--cat-soft); }
.sb-count{ font-family:var(--mono); font-size:2.6rem; color:var(--cat); line-height:1; }
.sb-hint{ font-size:.88rem; color:var(--muted); }
.sb-bar{ display:flex; gap:20px; flex-wrap:wrap; align-items:center;
  margin-top:14px; font-size:.88rem; color:var(--muted); }
.sb-time{ font-family:var(--mono); color:var(--text); }
.sb-score{ margin:12px 0 0; font-family:var(--mono); color:var(--muted); }
.sb-score strong{ font-size:1.6rem; color:var(--cat); font-weight:500; }
.sb-best{ font-family:var(--mono); font-size:.82rem; color:var(--faint); }

/* ---------- tally counter ------------------------------------------------ */
.ct-main{ display:flex; align-items:center; justify-content:center; gap:22px;
  padding:18px 0; flex-wrap:wrap; }
.ct-num{ font-family:var(--mono); font-size:4rem; color:var(--cat);
  line-height:1; min-width:3ch; text-align:center; font-weight:500; }
.ct-up,.ct-down{ width:66px; height:66px; border-radius:50%; border:0;
  font-size:1.8rem; cursor:pointer; line-height:1; }
.ct-up{ background:var(--cat); color:#fff; }
[data-theme="dark"] .ct-up{ color:#0d1322; }
.ct-down{ background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }
.ct-down:hover{ border-color:var(--cat); color:var(--cat); }
.ct-hist{ list-style:none; padding:0; margin:14px 0 0; display:flex; gap:6px;
  flex-wrap:wrap; }
.ct-hist li{ font-family:var(--mono); font-size:.76rem; background:var(--surface-2);
  border-radius:5px; padding:3px 8px; color:var(--muted); }

/* ---------- scoreboard --------------------------------------------------- */
.sc-rows{ list-style:none; padding:0; margin:0; }
.sc-rows li{ display:grid; grid-template-columns:minmax(0,1fr) 44px 66px 44px 34px;
  gap:8px; align-items:center; padding:7px 8px; border-radius:9px; }
.sc-rows li.is-lead{ background:var(--cat-soft); }
.sc-name{ background:transparent; border:1px solid transparent; border-radius:6px;
  color:var(--text); font:inherit; font-size:.95rem; padding:6px 8px; min-width:0; }
.sc-name:focus{ outline:none; border-color:var(--cat); background:var(--page); }
.sc-val{ font-family:var(--mono); font-size:1.5rem; color:var(--cat);
  text-align:center; }
.sc-plus,.sc-minus,.sc-del{ border:1px solid var(--line); background:var(--surface-2);
  color:var(--muted); border-radius:8px; height:38px; font-size:1.1rem;
  cursor:pointer; line-height:1; }
.sc-plus:hover,.sc-minus:hover{ border-color:var(--cat); color:var(--cat); }
.sc-del{ font-size:.95rem; }
.sc-del:hover{ border-color:var(--coral); color:var(--coral); }

/* ---------- incremental clicker ------------------------------------------ */
.cl-main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:22px; align-items:start; }
@media (max-width:700px){ .cl-main{ grid-template-columns:1fr; } }
.cl-side{ text-align:center; }
.cl-target{ position:relative; width:100%; aspect-ratio:1/1; max-width:230px;
  margin:0 auto; border:0; border-radius:50%; background:var(--cat-soft);
  font-size:5rem; cursor:pointer; user-select:none; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:transform .08s; overflow:hidden; }
.cl-target:hover{ background:var(--cat-edge); }
.cl-target.is-hit{ transform:scale(.94); }
.cl-pop{ position:absolute; font-size:1rem; color:var(--cat); font-family:var(--mono);
  pointer-events:none; animation:clpop .7s ease-out forwards; }
@keyframes clpop{ to{ transform:translateY(-46px); opacity:0 } }
.cl-score{ font-family:var(--mono); font-size:2.4rem; color:var(--cat);
  display:block; margin-top:14px; line-height:1; }
.cl-rate{ font-family:var(--mono); font-size:.85rem; color:var(--muted); }
.cl-shop{ list-style:none; padding:0; margin:0; }
.cl-shop li{ margin-bottom:8px; }
.cl-shop button{ width:100%; display:grid;
  grid-template-columns:minmax(0,1fr) auto auto 34px; gap:10px; align-items:center;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; cursor:pointer; text-align:left; font:inherit; }
.cl-shop button:disabled{ opacity:.45; cursor:not-allowed; }
.cl-shop li.can-buy button{ border-color:var(--cat-edge); }
.cl-shop li.can-buy button:hover{ background:var(--cat-soft); }
.cl-u-name{ color:var(--text); font-size:.92rem; }
.cl-u-rate{ font-family:var(--mono); font-size:.76rem; color:var(--faint); }
.cl-u-cost{ font-family:var(--mono); font-size:.86rem; color:var(--cat); }
.cl-u-own{ font-family:var(--mono); font-size:.86rem; color:var(--muted);
  text-align:right; }
.ty-flash{ margin:8px 0 0; font-size:.84rem; color:var(--coral); min-height:1.2em; }

/* ==========================================================================
   Questionnaires, web and text tools
   ========================================================================== */

.qz,.bs,.ctr,.pw,.ht,.bl{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:20px 22px 18px; box-shadow:var(--shadow); }

/* ---------- questionnaire ------------------------------------------------ */
.qz-progress{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.qz-bar{ flex:1; height:8px; background:var(--surface-2); border-radius:4px;
  overflow:hidden; }
.qz-bar i{ display:block; height:100%; background:var(--cat);
  border-radius:4px; transition:width .2s; }
.qz-count{ font-family:var(--mono); font-size:.78rem; color:var(--muted);
  white-space:nowrap; }
.qz-q{ border:0; padding:0; margin:0 0 18px; }
.qz-q legend{ display:flex; gap:11px; font-size:.98rem; color:var(--text);
  margin-bottom:10px; line-height:1.55; }
.qz-n{ flex:0 0 auto; width:24px; height:24px; border-radius:7px;
  background:var(--surface-2); color:var(--muted); font-family:var(--mono);
  font-size:.74rem; display:flex; align-items:center; justify-content:center; }
.qz-q.is-done .qz-n{ background:var(--cat); color:#fff; }
[data-theme="dark"] .qz-q.is-done .qz-n{ color:#0d1322; }
.qz-opts{ display:flex; gap:7px; flex-wrap:wrap; padding-left:35px; }
.qz-opt{ display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:6px 14px; font-size:.85rem; color:var(--text-dim); }
.qz-opt:hover{ border-color:var(--cat-edge); }
.qz-opt input{ accent-color:var(--cat); margin:0; }
.qz-opt:has(input:checked){ background:var(--cat-soft); border-color:var(--cat);
  color:var(--cat); font-weight:600; }
.qz-out{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.qz-out[hidden]{ display:none; }
.qz-score{ display:flex; align-items:baseline; gap:10px; }
.qz-score strong{ font-family:var(--mono); font-size:3rem; color:var(--cat);
  font-weight:500; line-height:1; }
.qz-score span{ color:var(--muted); font-size:.9rem; }
.qz-band{ margin:14px 0 6px; font-size:1.2rem; }
.qz-types{ list-style:none; padding:0; margin:16px 0 0; }
.qz-types li{ display:grid; grid-template-columns:minmax(110px,1fr) 2fr 38px;
  gap:10px; align-items:center; padding:4px 0; font-size:.86rem;
  color:var(--text-dim); }
.qz-tbar{ background:var(--surface-2); border-radius:4px; height:10px;
  overflow:hidden; }
.qz-tbar i{ display:block; height:100%; background:var(--cat); border-radius:4px; }
.qz-types b{ font-family:var(--mono); text-align:right; color:var(--muted); }
.qz-note{ margin:18px 0 0; padding:14px 16px; background:var(--cat-soft);
  border-radius:10px; font-size:.9rem; color:var(--text-dim); line-height:1.65; }
.qz-note strong{ color:var(--text); }
.qz-submit{ background:var(--cat); color:#fff; border:0;
  border-radius:var(--radius-sm); font:inherit; font-weight:600; font-size:.92rem;
  padding:11px 22px; cursor:pointer; }
[data-theme="dark"] .qz-submit{ color:#0d1322; }
.qz-submit:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- base converter ----------------------------------------------- */
.bs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px; }
.bs-grid label{ display:block; font-size:.8rem; font-weight:600;
  color:var(--muted); margin-bottom:6px; }
.bs-grid label span{ color:var(--cat); font-family:var(--mono); margin-left:4px; }
.bs-grid input{ width:100%; background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font-family:var(--mono);
  font-size:1.1rem; padding:11px 13px; }
.bs-grid input:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.bs-warn{ margin:12px 0 0; padding:9px 13px; font-size:.86rem;
  background:color-mix(in srgb, var(--coral) 12%, transparent);
  border-left:3px solid var(--coral); border-radius:0 7px 7px 0; color:var(--text); }
.bs-warn[hidden]{ display:none; }

/* ---------- CTR ---------------------------------------------------------- */
.ctr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px; }
.ctr-grid label{ display:block; font-size:.8rem; font-weight:600;
  color:var(--muted); margin-bottom:6px; }
.ctr-grid input{ width:100%; background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font-family:var(--mono);
  font-size:1.1rem; padding:11px 13px; }
.ctr-grid input:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.ctr-out{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line);
  color:var(--muted); font-size:.9rem; }
.ctr-big{ display:flex; align-items:baseline; gap:10px; }
.ctr-big strong{ font-family:var(--mono); font-size:3rem; color:var(--cat);
  font-weight:500; line-height:1; }

/* ---------- password ----------------------------------------------------- */
.pw-field{ display:flex; gap:9px; }
.pw-input{ flex:1; background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font-family:var(--mono);
  font-size:1.1rem; padding:12px 14px; min-width:0; }
.pw-input:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.pw-show{ background:var(--surface-2); border:1px solid var(--line);
  color:var(--muted); border-radius:var(--radius-sm); font:inherit;
  font-size:.86rem; padding:0 16px; cursor:pointer; }
.pw-meter{ height:9px; background:var(--surface-2); border-radius:5px;
  overflow:hidden; margin-top:14px; }
.pw-meter i{ display:block; height:100%; width:0; border-radius:5px;
  background:var(--cat); transition:width .18s; }
.pw-meter i.is-bad{ background:var(--coral); }
.pw-meter i.is-mid{ background:var(--amber); }
.pw-meter i.is-good{ background:var(--mint); }
.pw-verdict{ margin:12px 0 0; display:flex; gap:14px; align-items:baseline;
  flex-wrap:wrap; font-size:.88rem; color:var(--muted); }
.pw-verdict strong{ font-size:1.3rem; }
.pw-verdict strong.is-bad{ color:var(--coral); }
.pw-verdict strong.is-mid{ color:var(--amber); }
.pw-verdict strong.is-good{ color:var(--mint); }
.pw-notes{ margin:14px 0 0; padding-left:20px; font-size:.88rem;
  color:var(--text-dim); line-height:1.7; }

/* ---------- HTML tester -------------------------------------------------- */
.ht-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:760px){ .ht-grid{ grid-template-columns:1fr; } }
.ht-code{ width:100%; min-height:280px; resize:vertical; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--text);
  font-family:var(--mono); font-size:.88rem; padding:13px 14px; line-height:1.6; }
.ht-code:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.ht-frame{ width:100%; min-height:280px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:#fff; }
.ht-label{ font-size:.78rem; font-weight:600; color:var(--muted);
  margin-bottom:6px; display:block; }

/* ---------- blank characters --------------------------------------------- */
.bl-row{ display:grid; grid-template-columns:minmax(0,1fr) 118px 96px;
  gap:12px; align-items:center; padding:11px 0;
  border-bottom:1px solid var(--line-soft); }
.bl-row:last-of-type{ border-bottom:0; }
.bl-name{ font-size:.92rem; color:var(--text); }
.bl-name small{ display:block; color:var(--faint); font-size:.78rem; margin-top:2px; }
.bl-code{ font-family:var(--mono); font-size:.8rem; color:var(--muted); }
.bl-row button{ background:var(--cat-soft); border:1px solid var(--cat-edge);
  color:var(--cat); font:inherit; font-size:.84rem; font-weight:600;
  padding:8px 0; border-radius:999px; cursor:pointer; }
.bl-row button:hover,.bl-row button.is-done{ background:var(--cat); color:#fff;
  border-color:var(--cat); }
[data-theme="dark"] .bl-row button:hover,
[data-theme="dark"] .bl-row button.is-done{ color:#0d1322; }
.bl-preview{ margin-top:14px; font-family:var(--mono); font-size:.9rem;
  background:var(--surface-2); border-radius:8px; padding:11px 13px;
  color:var(--text); min-height:2.6em; word-break:break-all; }
.bl-preview::after{ content:attr(data-len); display:block; font-size:.76rem;
  color:var(--faint); margin-top:4px; }
@media (max-width:560px){
  .bl-row{ grid-template-columns:minmax(0,1fr) 86px; }
  .bl-code{ display:none; }
}

/* ==========================================================================
   Microphone, speaker, camera, display and MIDI
   ========================================================================== */

.mic,.au,.cam,.dp,.md{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:20px 22px 18px; box-shadow:var(--shadow); }

.mic-status,.cam-status,.md-status,.au-status{ margin:0 0 14px; font-size:.9rem;
  color:var(--muted); }
.mic-status.is-good,.cam-status.is-good,.md-status.is-good{ color:var(--mint); }
.mic-status.is-bad,.cam-status.is-bad,.md-status.is-bad{ color:var(--coral); }
.dev-go{ background:var(--cat); color:#fff; border:0; border-radius:var(--radius-sm);
  font:inherit; font-weight:600; font-size:.94rem; padding:12px 22px; cursor:pointer; }
[data-theme="dark"] .dev-go{ color:#0d1322; }
.dev-go[hidden]{ display:none; }

/* ---------- microphone --------------------------------------------------- */
.mic-meter{ height:16px; background:var(--surface-2); border-radius:8px;
  overflow:hidden; }
.mic-meter i{ display:block; height:100%; width:0; border-radius:8px;
  background:var(--mint); transition:width .05s linear; }
.mic-meter i.is-mid{ background:var(--amber); }
.mic-meter i.is-bad{ background:var(--coral); }
.mic-nums{ display:flex; gap:24px; flex-wrap:wrap; margin-top:12px;
  font-size:.86rem; color:var(--muted); }
.mic-nums b{ font-family:var(--mono); color:var(--text); }
.mic-clip{ color:var(--coral); font-weight:600; }
.mic-clip[hidden]{ display:none; }
.mic-wave{ width:100%; height:130px; margin-top:14px; background:var(--surface-2);
  border-radius:10px; display:block; }
.mic-player{ width:100%; margin-top:14px; }
.mic-player[hidden]{ display:none; }
.mic-rec.is-live{ background:var(--coral); color:#fff; border-color:var(--coral); }

/* ---------- speaker ------------------------------------------------------ */
.au-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin-bottom:14px; }
.au-freq{ flex:1; min-width:180px; accent-color:var(--cat); }
.au-freq-out{ font-family:var(--mono); font-size:.9rem; color:var(--cat);
  min-width:80px; }
.au-play.is-live{ background:var(--coral); color:#fff; border-color:var(--coral); }

/* ---------- camera ------------------------------------------------------- */
.cam-video{ width:100%; max-height:420px; background:#000; border-radius:12px;
  display:block; }
.cam-meta{ display:flex; gap:24px; flex-wrap:wrap; margin-top:12px;
  font-size:.86rem; color:var(--muted); }
.cam-meta b{ font-family:var(--mono); color:var(--text); }
.cam-shot-out{ margin-top:14px; }
.cam-shot-out[hidden]{ display:none; }
.cam-shot-out img{ max-width:100%; border-radius:10px; display:block; }
.cam-dl{ display:inline-block; margin-top:10px; font-size:.88rem; }

/* ---------- dead pixel --------------------------------------------------- */
.dp-swatches{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.dp-swatches button{ width:46px; height:46px; border-radius:10px;
  border:1px solid var(--line); cursor:pointer; }
.dp-screen{ display:none; }
.dp.is-full{ position:fixed; inset:0; z-index:9999; border-radius:0; padding:0;
  border:0; }
.dp.is-full > *:not(.dp-screen){ display:none; }
.dp.is-full .dp-screen{ display:flex; position:absolute; inset:0;
  align-items:flex-end; justify-content:center; cursor:pointer; }
.dp-label{ padding:26px; font-size:.9rem; text-align:center;
  font-family:var(--sans); }

/* ---------- MIDI --------------------------------------------------------- */
.md-inputs{ list-style:none; padding:0; margin:0 0 16px; }
.md-inputs li{ background:var(--surface-2); border-radius:9px; padding:10px 13px;
  margin-bottom:7px; }
.md-inputs b{ display:block; font-size:.92rem; color:var(--text); }
.md-inputs span{ font-size:.8rem; color:var(--faint); }
.md-keys{ display:flex; position:relative; height:110px; margin-bottom:14px;
  background:var(--surface-2); border-radius:9px; padding:6px; overflow:hidden; }
.md-key{ flex:1; background:#f7f9fc; border:1px solid #c9d3e0; border-radius:0 0 5px 5px;
  margin-right:1px; }
.md-key.is-sharp{ flex:0 0 0; width:0; margin:0; position:relative; z-index:2; }
.md-key.is-sharp::before{ content:""; position:absolute; left:-9px; top:0;
  width:18px; height:62%; background:#2b3444; border-radius:0 0 4px 4px; }
.md-key.is-down{ background:var(--cat); border-color:var(--cat); }
.md-key.is-sharp.is-down::before{ background:var(--cat); }
.md-log{ max-height:230px; overflow-y:auto; border-top:1px solid var(--line-soft);
  padding-top:10px; }
.md-line{ display:grid; grid-template-columns:120px 70px 90px 1fr; gap:10px;
  font-family:var(--mono); font-size:.78rem; padding:3px 0; color:var(--muted); }
.md-l-t{ color:var(--text); }
.md-l-n{ color:var(--cat); }
@media (max-width:620px){
  .md-line{ grid-template-columns:100px 56px 1fr; }
  .md-l-c{ display:none; }
}

/* ==========================================================================
   Benchmarks, network and gamepad
   ========================================================================== */

.bm,.nt,.gp{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:20px 22px 18px; box-shadow:var(--shadow); }
.bm-status,.nt-status,.gp-status{ margin:0 0 14px; font-size:.9rem; color:var(--muted); }
.gp-status.is-good{ color:var(--mint); font-family:var(--mono); font-size:.85rem; }
.gp-status.is-bad{ color:var(--coral); }
.bm-grid,.nt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:11px; }
.bm-card{ background:var(--surface-2); border-radius:10px; padding:13px 15px; }
.bm-k{ display:block; font-size:.76rem; color:var(--faint); }
.bm-v{ display:block; font-family:var(--mono); font-size:1.5rem; color:var(--cat);
  font-weight:500; margin-top:2px; line-height:1.1; }
.bm-v em{ font-style:normal; font-size:.72rem; color:var(--muted); margin-left:3px; }
.bm-n{ display:block; font-size:.74rem; color:var(--faint); margin-top:6px;
  line-height:1.5; }
.bm-h{ margin:20px 0 10px; font-size:1.05rem; }
.bm-h:first-child{ margin-top:0; }
.bm-total{ background:var(--cat-soft); border-radius:12px; padding:16px 18px;
  margin-bottom:18px; }
.bm-total span{ display:block; font-size:.78rem; color:var(--muted); }
.bm-total b{ font-family:var(--mono); font-size:2.4rem; color:var(--cat);
  font-weight:500; line-height:1.1; }
.bm-total em{ display:block; font-style:normal; font-size:.76rem;
  color:var(--muted); margin-top:4px; }
.bm-info-list{ list-style:none; padding:0; margin:0 0 18px; }
.bm-info-list li{ display:grid; grid-template-columns:minmax(120px,1fr) minmax(0,1.4fr);
  gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.bm-info-list span{ font-size:.85rem; color:var(--muted); }
.bm-info-list b{ font-family:var(--mono); font-size:.85rem; color:var(--text);
  word-break:break-word; }
.bm-info-list em{ grid-column:1/-1; font-style:normal; font-size:.74rem;
  color:var(--faint); line-height:1.5; }

/* ---------- gamepad ------------------------------------------------------ */
.gp-buttons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px; margin-bottom:16px; }
.gp-btn{ position:relative; background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:9px 12px; font-size:.8rem; color:var(--text-dim);
  overflow:hidden; }
.gp-btn.is-seen{ border-color:var(--cat-edge); }
.gp-btn.is-down{ background:var(--cat); border-color:var(--cat); color:#fff; }
[data-theme="dark"] .gp-btn.is-down{ color:#0d1322; }
.gp-btn span{ display:block; }
.gp-btn b{ font-family:var(--mono); font-size:.76rem; opacity:.85; }
.gp-btn i{ position:absolute; left:0; bottom:0; height:3px; background:var(--cat); }
.gp-ax{ display:grid; grid-template-columns:minmax(96px,1fr) 2.4fr 70px;
  gap:12px; align-items:center; padding:6px 0; font-size:.82rem; color:var(--muted); }
.gp-ax-track{ position:relative; height:12px; background:var(--surface-2);
  border-radius:6px; }
.gp-ax-track u{ position:absolute; left:50%; top:-2px; width:1px; height:16px;
  background:var(--line); }
.gp-ax-track i{ position:absolute; top:-2px; width:10px; height:16px;
  margin-left:-5px; background:var(--cat); border-radius:3px; }
.gp-ax b{ font-family:var(--mono); text-align:right; color:var(--text); }
.gp-drift{ margin-top:16px; padding:13px 16px; border-radius:10px;
  font-size:.88rem; background:var(--surface-2); color:var(--text-dim); }
.gp-drift.is-good{ background:color-mix(in srgb, var(--mint) 14%, transparent); }
.gp-drift.is-mid{ background:color-mix(in srgb, var(--amber) 16%, transparent); }
.gp-drift.is-bad{ background:color-mix(in srgb, var(--coral) 14%, transparent); }
.gp-drift strong{ color:var(--text); }

/* ---------- search results, shown under the box ------------------------- */
.results{ margin:16px 0 18px; }
.results[hidden]{ display:none; }
.results-head{ margin:0 0 10px; font-size:.85rem; color:var(--muted); }
.results-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--surface); }
.results-list a{ display:flex; flex-direction:column; gap:2px; padding:12px 16px;
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  border-left:3px solid transparent; color:var(--text-dim); }
.results-list a:hover{ background:var(--cat-soft); border-left-color:var(--cat);
  color:var(--cat); text-decoration:none; }
.results-list a:focus-visible{ outline:2px solid var(--cat); outline-offset:-2px; }
.r-name b{ color:var(--cat); font-weight:600; }
.results-list a:hover .r-name b{ color:inherit; }
.r-cat{ font-size:.74rem; color:var(--faint); }
.r-more{ grid-column:1/-1; margin:0; padding:12px 16px; font-size:.82rem;
  color:var(--faint); border-bottom:1px solid var(--line-soft); }

/* ==========================================================================
   Categorised menu
   ========================================================================== */

.nav-group{ display:inline-flex; align-items:center; gap:1px; }
.nav-group > a{ padding-right:2px; }
.nav-group[data-current="true"] > a{ color:var(--brand); font-weight:600; }
.nav-more{ display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; padding:6px 4px; cursor:pointer;
  color:var(--text-dim); border-radius:5px; }
.nav-more svg{ transition:transform .15s; opacity:.65; }
.nav-more:hover{ color:var(--brand); }
.nav-more[aria-expanded="true"]{ color:var(--brand); }
.nav-more[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-group:hover > a{ color:var(--brand); }
.nav-burger{ display:none; background:none; border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:9px 8px; cursor:pointer;
  flex-direction:column; gap:4px; }
.nav-burger span{ display:block; width:17px; height:2px; background:var(--text-dim);
  border-radius:2px; transition:transform .18s, opacity .18s; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.megamenu{ position:absolute; left:0; right:0; top:100%;
  background:var(--surface); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); box-shadow:0 18px 40px -24px rgba(16,32,56,.35);
  z-index:60; }
.megamenu[hidden]{ display:none; }
[data-theme="dark"] .megamenu{ box-shadow:0 18px 40px -20px rgba(0,0,0,.6); }
.mm-in{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px;
  padding:26px 0 30px; align-items:start; }
.mm-col h3{ font-size:.95rem; margin:0 0 4px; }
.mm-col p{ margin:0 0 12px; font-size:.8rem; color:var(--faint); line-height:1.5; }
.mm-col a{ display:flex; align-items:center; gap:9px; padding:6px 8px;
  margin:0 -8px; border-radius:8px; color:var(--text-dim); font-size:.88rem; }
.mm-col a:hover{ background:var(--surface-2); color:var(--brand);
  text-decoration:none; }
.mm-dot{ width:8px; height:8px; border-radius:3px; background:var(--cat);
  flex:0 0 auto; }
.mm-name{ flex:1; min-width:0; }
.mm-n{ font-family:var(--mono); font-size:.74rem; color:var(--faint); }
.mm-all{ border-left:1px solid var(--line-soft); padding-left:26px; }
.site-head.menu-open{ border-bottom-color:transparent; }

@media (max-width:900px){
  .head-nav{ display:none; }
  .nav-burger{ display:flex; }
  .search-open-label,.search-open kbd{ display:none; }
  .mm-in{ grid-template-columns:1fr; gap:22px; padding:20px 0 26px; }
  .mm-all{ border-left:0; padding-left:0; border-top:1px solid var(--line-soft);
    padding-top:18px; }
  .megamenu{ max-height:calc(100vh - 60px); overflow-y:auto; }
}

/* ==========================================================================
   Homepage
   ========================================================================== */

.hero-mid{ padding-top:56px; padding-bottom:54px; }
.hero-mid h1,.hero-mid .lede,.hero-mid .hunt{ max-width:780px; }
.hero-mid h1{ font-size:clamp(2.3rem,5.2vw,3.5rem); line-height:1.08;
  letter-spacing:-.03em; margin:0 0 18px; }
.hero-mid .lede{ font-size:1.08rem; max-width:600px; margin:0 0 28px; }
.hero-mid .tally{ margin-top:26px; }

.fam .board-head{ flex-wrap:wrap; }
.fam-say{ flex:1 1 100%; order:3; margin:6px 0 0; font-size:.88rem;
  color:var(--muted); }

.promise{ background:var(--page-tint); border-top:1px solid var(--line-soft);
  padding:44px 0; margin-top:10px; }
.promise-in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:28px; }
.promise h3{ font-size:1rem; margin:0 0 8px; }
.promise p{ margin:0; font-size:.9rem; color:var(--muted); line-height:1.65; }

/* ==========================================================================
   Hero
   ========================================================================== */

.home-hero{ padding:0; }
.hero-mid{ padding-top:66px; padding-bottom:62px; position:relative; z-index:2; }

/* slow-drifting colour, well behind the text */
.orbs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.orbs i{ position:absolute; border-radius:50%; filter:blur(72px); opacity:.5; }
.orbs i:nth-child(1){ width:520px; height:520px; left:-90px; top:-180px;
  background:var(--brand); animation:drift1 22s ease-in-out infinite; }
.orbs i:nth-child(2){ width:430px; height:430px; right:4%; top:-120px;
  background:#8b5cf6; opacity:.34; animation:drift2 27s ease-in-out infinite; }
.orbs i:nth-child(3){ width:380px; height:380px; right:22%; bottom:-200px;
  background:#f0a24b; opacity:.3; animation:drift3 31s ease-in-out infinite; }
[data-theme="dark"] .orbs i{ opacity:.3; }
[data-theme="dark"] .orbs i:nth-child(2){ opacity:.24; }
[data-theme="dark"] .orbs i:nth-child(3){ opacity:.2; }
@keyframes drift1{ 50%{ transform:translate(70px,60px) scale(1.12); } }
@keyframes drift2{ 50%{ transform:translate(-60px,50px) scale(.9); } }
@keyframes drift3{ 50%{ transform:translate(50px,-60px) scale(1.1); } }

.kicker{ display:inline-flex; align-items:center; gap:9px; margin:0 0 20px;
  padding:7px 15px 7px 12px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); font-size:.8rem; color:var(--muted);
  box-shadow:var(--shadow); }
.kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 0 var(--mint); animation:pip 2.6s ease-out infinite; }
@keyframes pip{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--mint) 70%, transparent); }
  70%,100%{ box-shadow:0 0 0 9px transparent; }
}

.hero-mid h1{ font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.1;
  letter-spacing:-.03em; margin:0 0 18px; max-width:21ch; }
.hero-mid h1 mark{ box-decoration-break:clone;
  -webkit-box-decoration-break:clone; }
.hero-mid .lede{ font-size:1.06rem; line-height:1.7; max-width:62ch; margin:0 0 30px; }

.hero-picks{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:16px 0 0; font-size:.85rem; }
.hero-picks > span{ color:var(--faint); }
.hero-picks a{ padding:5px 13px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); color:var(--text-dim); font-size:.83rem;
  transition:transform .14s, border-color .14s, color .14s; }
.hero-picks a:hover{ border-color:var(--brand); color:var(--brand);
  transform:translateY(-2px); text-decoration:none; }

.hero-mid .tally{ margin-top:34px; }
.hero-mid .tally b{ font-variant-numeric:tabular-nums; }

/* staggered entrance */
.reveal{ opacity:0; }
.reveal-go{ animation:rise .62s cubic-bezier(.22,.9,.3,1) forwards; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); }
                 to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .orbs i:nth-child(1),.orbs i:nth-child(2),.orbs i:nth-child(3){ animation:none; }
  .kicker .dot{ animation:none; }
  .reveal,.reveal-go{ opacity:1; animation:none; transform:none; }
  .hero-picks a:hover{ transform:none; }
}
@media (max-width:620px){
  .hero-mid{ padding-top:44px; padding-bottom:46px; }
  .orbs i{ filter:blur(58px); }
  .orbs i:nth-child(2),.orbs i:nth-child(3){ display:none; }
}

/* ---------- quick reference, worked example, FAQ ------------------------ */
.sec-say{ margin:-6px 0 20px; font-size:.92rem; color:var(--muted); max-width:70ch; }

.qr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px 26px; }
.qr-col h3{ font-size:.85rem; color:var(--muted); margin:0 0 10px;
  padding-bottom:8px; border-bottom:1px solid var(--line); }
.qr-col a{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px;
  align-items:baseline; padding:9px 10px; margin:0 -10px; border-radius:8px;
  color:var(--text-dim); font-size:.88rem; }
.qr-col a:hover{ background:var(--surface-2); text-decoration:none; }
.qr-col a:hover .qr-b{ color:var(--brand); }
.qr-eq{ color:var(--faint); }
.qr-b{ font-family:var(--mono); color:var(--text); text-align:right;
  white-space:nowrap; }

.worked{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:34px; align-items:start; }
@media (max-width:820px){ .worked{ grid-template-columns:1fr; gap:24px; } }
.worked-say p{ margin:0 0 14px; color:var(--muted); font-size:.94rem; line-height:1.75; }
.worked-go{ font-weight:600; }
.worked-demo{ list-style:none; counter-reset:w; margin:0; padding:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; }
.worked-demo li{ counter-increment:w; padding:14px 18px 14px 50px; position:relative;
  border-bottom:1px solid var(--line-soft); }
.worked-demo li:last-child{ border-bottom:0; }
.worked-demo li::before{ content:counter(w); position:absolute; left:16px; top:15px;
  width:20px; height:20px; border-radius:6px; background:var(--surface-2);
  color:var(--muted); font-family:var(--mono); font-size:.7rem; display:flex;
  align-items:center; justify-content:center; }
.w-what{ display:block; font-size:.78rem; color:var(--faint); }
.w-eq{ display:block; font-family:var(--mono); font-size:.95rem; color:var(--brand);
  margin:3px 0 5px; }
.w-why{ display:block; font-size:.82rem; color:var(--muted); line-height:1.6; }

.faq-grid{ max-width:820px; border-top:1px solid var(--line-soft); }
.faq-q{ border-bottom:1px solid var(--line-soft); }
.faq-q summary{ cursor:pointer; padding:16px 30px 16px 0; font-size:.98rem;
  font-weight:600; color:var(--text); position:relative; list-style:none; }
.faq-q summary::-webkit-details-marker{ display:none; }
.faq-q summary::after{ content:"+"; position:absolute; right:6px; top:15px;
  font-family:var(--mono); font-size:1.15rem; color:var(--faint); font-weight:400; }
.faq-q[open] summary::after{ content:"\2212"; }
.faq-q summary:hover{ color:var(--brand); }
.faq-q p{ margin:0 0 16px; font-size:.9rem; color:var(--muted); line-height:1.75;
  max-width:60ch; }
.recent-clear{ background:none; border:0; font:inherit; font-size:.8rem;
  color:var(--faint); cursor:pointer; text-decoration:underline; }
.recent-clear:hover{ color:var(--coral); }

/* ==========================================================================
   Pricing
   ========================================================================== */

.price-flag{ background:var(--cat-soft); border:1px solid var(--cat-edge);
  border-radius:var(--radius); padding:16px 20px; font-size:.94rem;
  color:var(--text-dim); line-height:1.7; max-width:80ch; }
.price-flag strong{ color:var(--text); }

.price-toggle{ display:inline-flex; gap:4px; margin:28px 0 22px; padding:4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; }
.price-toggle button{ background:none; border:0; font:inherit; font-size:.88rem;
  color:var(--muted); padding:8px 18px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; }
.price-toggle button.is-on{ background:var(--surface); color:var(--text);
  box-shadow:var(--shadow); font-weight:600; }
.price-toggle span{ font-size:.7rem; color:var(--mint); font-weight:600; }

.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px; align-items:start; }
.plan{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow);
  position:relative; }
.plan.is-best{ border-color:var(--brand); box-shadow:0 12px 34px -20px var(--brand); }
.pl-tag{ display:inline-block; font-size:.68rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:4px 10px;
  border-radius:999px; margin-bottom:14px; }
.pl-now{ background:color-mix(in srgb, var(--mint) 20%, transparent);
  color:var(--mint-ink,#0a7d55); }
.pl-soon{ background:var(--surface-2); color:var(--faint); }
[data-theme="dark"] .pl-now{ color:var(--mint); }
.plan h2{ font-size:1.25rem; margin:0 0 10px; }
.pl-price{ display:flex; align-items:baseline; gap:3px; margin:0 0 12px; }
.pl-cur{ font-size:1rem; color:var(--muted); }
.pl-n{ font-family:var(--mono); font-size:2.5rem; color:var(--text);
  font-weight:500; line-height:1; }
.pl-per{ font-size:.82rem; color:var(--faint); margin-left:5px; }
.pl-say{ margin:0 0 18px; font-size:.88rem; color:var(--muted); line-height:1.65;
  min-height:3.3em; }
.pl-cta{ display:block; text-align:center; padding:11px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--line); color:var(--text-dim); font-size:.9rem;
  font-weight:600; }
.pl-cta:hover{ border-color:var(--brand); color:var(--brand); text-decoration:none; }
.plan.is-best .pl-cta{ background:var(--brand); border-color:var(--brand); color:#fff; }
[data-theme="dark"] .plan.is-best .pl-cta{ color:#0d1322; }
.plan.is-best .pl-cta:hover{ filter:brightness(1.08); }
.pl-feats{ list-style:none; padding:18px 0 0; margin:18px 0 0;
  border-top:1px solid var(--line-soft); }
.pl-feats li{ position:relative; padding:7px 0 7px 26px; font-size:.87rem;
  color:var(--text-dim); line-height:1.55; }
.pl-feats li::before{ position:absolute; left:0; top:7px; font-family:var(--mono);
  font-size:.85rem; }
.pl-feats li.has::before{ content:"\2713"; color:var(--mint); }
.pl-feats li.soon{ color:var(--faint); }
.pl-feats li.soon::before{ content:"\25CB"; color:var(--line); }

.price-note,.price-faq{ margin:52px 0 0; }
.price-note h2,.price-faq h2{ font-size:1.3rem; margin:0 0 14px; }
.price-note p{ margin:0 0 14px; color:var(--muted); font-size:.95rem;
  line-height:1.8; max-width:72ch; }
.price-faq{ padding-bottom:20px; }

/* ==========================================================================
   About
   ========================================================================== */

.about-hero{ position:relative; overflow:hidden; background:var(--page-tint);
  border-bottom:1px solid var(--line-soft); }
.about-hero-in{ position:relative; z-index:2; padding:44px 0 56px; }
.about-hero .crumbs{ margin-bottom:20px; }
.about-hero h1{ font-size:clamp(1.95rem,3.6vw,2.8rem); line-height:1.15;
  letter-spacing:-.03em; margin:0 0 18px; max-width:26ch; }
.about-hero .lede{ font-size:1.05rem; line-height:1.75; max-width:60ch;
  margin:0 0 30px; color:var(--muted); }
.about-hero .orbs i:nth-child(1){ left:auto; right:-60px; top:-220px;
  width:480px; height:480px; }
.about-hero .orbs i:nth-child(2){ left:12%; right:auto; top:-160px; }
.about-hero .orbs i:nth-child(3){ right:38%; bottom:-240px; }

.about-body{ padding:8px 0 30px; }
.ab-sec{ margin:54px 0 0; }
.ab-sec > h2{ font-size:1.45rem; margin:0 0 20px; letter-spacing:-.02em; }
.ab-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:12px 38px; }
.ab-two p{ margin:0; color:var(--muted); font-size:.97rem; line-height:1.8; }
.ab-say{ margin:0 0 20px; color:var(--muted); font-size:.97rem; line-height:1.8;
  max-width:74ch; }

/* reveal on scroll */
.reveal-up{ opacity:0; transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.9,.3,1),
             transform .55s cubic-bezier(.22,.9,.3,1); }
.reveal-up.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1; transform:none; transition:none; }
}

/* principle cards */
.pr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px; }
.pr-card{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 20px; position:relative;
  overflow:hidden; transition:transform .2s, border-color .2s, box-shadow .2s; }
.pr-card::after{ content:""; position:absolute; inset:0 auto auto 0; height:2px;
  width:0; background:var(--brand); transition:width .45s ease; }
.pr-card:hover{ transform:translateY(-3px); border-color:var(--line);
  box-shadow:0 16px 34px -24px rgba(16,32,56,.4); }
.pr-card:hover::after{ width:100%; }
[data-theme="dark"] .pr-card:hover{ box-shadow:0 16px 34px -20px rgba(0,0,0,.6); }
.pr-ico{ display:flex; width:38px; height:38px; border-radius:11px;
  align-items:center; justify-content:center; background:var(--surface-2);
  color:var(--brand); margin-bottom:14px; }
.pr-ico svg{ width:19px; height:19px; }
.pr-card h3{ font-size:1rem; margin:0 0 8px; }
.pr-card p{ margin:0; font-size:.88rem; color:var(--muted); line-height:1.7; }

/* the network proof panel */
.netbox{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.net-head{ display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:13px 18px; border-bottom:1px solid var(--line);
  background:var(--surface-2); font-size:.86rem; font-weight:600;
  color:var(--text); flex-wrap:wrap; }
.net-live{ display:inline-flex; align-items:center; gap:7px; font-weight:400;
  font-size:.76rem; color:var(--muted); }
.net-live i{ width:7px; height:7px; border-radius:50%; background:var(--mint);
  animation:pip 2.6s ease-out infinite; }
.net-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:1px; background:var(--line-soft); border-bottom:1px solid var(--line); }
.net-stats div{ background:var(--surface); padding:14px 16px; }
.net-stats b{ display:block; font-family:var(--mono); font-size:1.4rem;
  color:var(--brand); font-weight:500; line-height:1.1; }
.net-stats span{ font-size:.72rem; color:var(--faint); }
.net-list{ list-style:none; margin:0; padding:0; max-height:320px;
  overflow-y:auto; }
.net-list li{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 72px 64px;
  gap:12px; padding:9px 18px; font-family:var(--mono); font-size:.75rem;
  border-bottom:1px solid var(--line-soft); align-items:center; }
.net-list li:last-child{ border-bottom:0; }
.n-host{ color:var(--text); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.net-list li.is-third .n-host{ color:var(--amber); }
.n-path,.n-type{ color:var(--faint); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.n-size{ color:var(--muted); text-align:right; }
.net-foot{ margin:0; padding:14px 18px; font-size:.83rem; color:var(--muted);
  line-height:1.7; border-top:1px solid var(--line); background:var(--surface-2); }
@media (max-width:680px){
  .net-list li{ grid-template-columns:minmax(0,1fr) 58px; }
  .n-path,.n-type{ display:none; }
}

/* how a tool gets made */
.steps{ list-style:none; margin:0; padding:0; position:relative; }
.steps::before{ content:""; position:absolute; left:17px; top:12px; bottom:12px;
  width:2px; background:var(--line-soft); }
.steps li{ position:relative; display:flex; gap:18px; padding:0 0 26px; }
.st-n{ flex:0 0 36px; width:36px; height:36px; border-radius:50%;
  background:var(--surface); border:2px solid var(--brand); color:var(--brand);
  font-family:var(--mono); font-size:.85rem; display:flex; align-items:center;
  justify-content:center; position:relative; z-index:1; }
.steps h3{ font-size:1rem; margin:7px 0 6px; }
.steps p{ margin:0; font-size:.92rem; color:var(--muted); line-height:1.75;
  max-width:70ch; }

/* coverage bars */
.coverage{ list-style:none; margin:0; padding:0; }
.coverage li{ display:grid; grid-template-columns:minmax(130px,1fr) 3fr 48px;
  gap:16px; align-items:center; padding:10px 0; }
.cv-name{ font-size:.94rem; color:var(--text-dim); }
.cv-track{ height:12px; background:var(--surface-2); border-radius:6px;
  overflow:hidden; }
.cv-track i{ display:block; height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg,var(--brand),#8b5cf6);
  transition:width 1.1s cubic-bezier(.22,.9,.3,1); }
.coverage b{ font-family:var(--mono); text-align:right; color:var(--brand); }
@media (max-width:560px){
  .coverage li{ grid-template-columns:minmax(0,1fr) 44px; }
  .cv-track{ grid-column:1/-1; }
}

/* ==========================================================================
   Tools index
   ========================================================================== */

.tools-hero{ position:relative; overflow:hidden; background:var(--page-tint);
  border-bottom:1px solid var(--line-soft); }
.tools-hero-in{ position:relative; z-index:2; padding:40px 0 44px; }
.tools-hero .crumbs{ margin-bottom:18px; }
.tools-hero h1{ font-size:clamp(2rem,4vw,3rem); line-height:1.1;
  letter-spacing:-.03em; margin:0 0 14px; }
.tools-hero .lede{ font-size:1.02rem; color:var(--muted); max-width:58ch;
  margin:0 0 26px; line-height:1.7; }
.tools-hero h1 mark{
  background:linear-gradient(to top, var(--brand-wash) 40%, transparent 40%);
  color:inherit; padding:0 .07em; border-radius:3px; }
.tools-hero .orbs i:nth-child(1){ left:auto; right:6%; top:-230px;
  width:440px; height:440px; }
.tools-hero .orbs i:nth-child(2){ left:-70px; right:auto; top:-150px; }
.tools-hero .orbs i:nth-child(3){ right:30%; bottom:-250px; }

/* the filter bar sits in the flow; only the header is sticky */
.filter-dock{ padding:22px 0 18px; }

.filterbar{ position:relative; display:flex; align-items:center; }
.filterbar svg{ position:absolute; left:16px; color:var(--faint);
  pointer-events:none; }
.filterbar input{ padding-left:44px; }

.ch-n{ font-family:var(--mono); font-size:.68rem; opacity:.6; margin-left:2px; }

/* family bands separate the three groups */
.fam-band{ background:var(--surface-2); border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft); margin-top:36px; }
.fam-band-in{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:18px 0; }
.fam-band h2{ font-size:1.15rem; margin:0; letter-spacing:-.02em; }
.fam-band p{ margin:0; flex:1; font-size:.86rem; color:var(--muted); }
.fam-band span{ font-family:var(--mono); font-size:.78rem; color:var(--faint); }

/* boards */
.board-head{ display:flex; align-items:center; gap:12px; }
.bh-ico{ display:flex; width:30px; height:30px; border-radius:9px;
  align-items:center; justify-content:center; background:var(--cat-soft);
  color:var(--cat); flex:0 0 auto; }
.bh-ico svg{ width:16px; height:16px; }
.board.is-target .board-head{ animation:ping 2.2s ease-out; }
@keyframes ping{
  0%{ box-shadow:0 0 0 0 var(--cat-soft); }
  30%{ box-shadow:0 0 0 10px var(--cat-soft); }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* rows lift and pick up their category colour */
.rows a{ position:relative; transition:background .14s, color .14s; }
.rows a::before{ content:""; position:absolute; left:0; top:0; bottom:0;
  width:0; background:var(--cat); transition:width .14s; }
.rows a:hover{ background:var(--cat-soft); color:var(--cat);
  text-decoration:none; }
.rows a:hover::before{ width:3px; }
.rows a.on{ background:var(--cat-soft); color:var(--cat); }

/* back to top */
.totop{ position:fixed; right:22px; bottom:22px; z-index:50;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -16px rgba(16,32,56,.5);
  animation:rise .3s ease-out; }
.totop[hidden]{ display:none; }
.totop:hover{ border-color:var(--brand); color:var(--brand); }
[data-theme="dark"] .totop{ box-shadow:0 12px 28px -14px rgba(0,0,0,.7); }

.results-list a.on{ background:var(--cat-soft); border-left-color:var(--cat);
  color:var(--brand); }

@media (max-width:620px){
  .tools-hero-in{ padding:30px 0 34px; }
  .fam-band-in{ padding:14px 0; }
  .fam-band p{ flex:1 1 100%; }
  .totop{ right:14px; bottom:14px; }
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-hero{ position:relative; overflow:hidden; background:var(--page-tint);
  border-bottom:1px solid var(--line-soft); }
.contact-hero-in{ position:relative; z-index:2; padding:40px 0 46px; }
.contact-hero .crumbs{ margin-bottom:18px; }
.contact-hero h1{ font-size:clamp(1.95rem,3.6vw,2.8rem); line-height:1.14;
  letter-spacing:-.03em; margin:0 0 16px; max-width:24ch; }
.contact-hero h1 mark{
  background:linear-gradient(to top, var(--brand-wash) 40%, transparent 40%);
  color:inherit; padding:0 .07em; border-radius:3px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.contact-hero .lede{ font-size:1.02rem; color:var(--muted); max-width:62ch;
  margin:0; line-height:1.75; }
.contact-hero .orbs i:nth-child(1){ left:-70px; top:-210px; width:430px; height:430px; }
.contact-hero .orbs i:nth-child(2){ left:auto; right:8%; top:-170px; }
.contact-hero .orbs i:nth-child(3){ right:26%; bottom:-240px; }

.contact-body{ padding:44px 0 30px; }
.cf-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:40px; align-items:start; }
@media (max-width:900px){ .cf-grid{ grid-template-columns:1fr; gap:30px; } }
.cf-main > h2{ font-size:1.2rem; margin:0 0 14px; }

/* reason chips */
.rz-row{ display:flex; gap:8px; flex-wrap:wrap; }
.rz{ background:var(--surface); border:1px solid var(--line); border-radius:999px;
  font:inherit; font-size:.87rem; color:var(--text-dim); padding:9px 17px;
  cursor:pointer; transition:transform .14s, border-color .14s, color .14s,
  background .14s; }
.rz:hover{ transform:translateY(-2px); border-color:var(--brand); color:var(--brand); }
.rz.is-on{ background:var(--brand); border-color:var(--brand); color:#fff;
  font-weight:600; }
[data-theme="dark"] .rz.is-on{ color:#0d1322; }
.rz-hint{ margin:12px 0 20px; font-size:.88rem; color:var(--muted); min-height:1.4em; }

/* form */
.cf-field{ margin-bottom:16px; }
.cf-field label{ display:block; font-size:.82rem; font-weight:600;
  color:var(--text-dim); margin-bottom:7px; }
.cf-field label span{ font-weight:400; color:var(--faint); }
.cf-form textarea,.cf-form input{ width:100%; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font:inherit; font-size:.95rem; padding:13px 15px;
  line-height:1.7; }
.cf-form textarea{ font-family:var(--mono); font-size:.88rem; resize:vertical; }
.cf-form textarea:focus,.cf-form input:focus{ outline:none;
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-wash); }
.cf-count{ display:block; margin-top:6px; font-size:.76rem; color:var(--faint);
  font-family:var(--mono); }
.cf-half{ max-width:380px; }
.cf-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.cf-send{ background:var(--brand); border:1px solid var(--brand); color:#fff;
  font:inherit; font-weight:600; font-size:.92rem; padding:12px 22px;
  border-radius:var(--radius-sm); cursor:pointer; }
[data-theme="dark"] .cf-send{ color:#0d1322; }
.cf-send:hover{ filter:brightness(1.08); }
.cf-copy{ background:transparent; border:1px solid var(--line);
  color:var(--text-dim); font:inherit; font-size:.92rem; padding:12px 20px;
  border-radius:var(--radius-sm); cursor:pointer; }
.cf-copy:hover{ border-color:var(--brand); color:var(--brand); }
.cf-copy.is-done{ border-color:var(--mint); color:var(--mint); }
.cf-note{ margin:14px 0 0; font-size:.83rem; color:var(--faint); line-height:1.7; }
.cf-form.is-empty textarea{ border-color:var(--coral); animation:shake .45s; }
@keyframes shake{
  20%{ transform:translateX(-5px); } 45%{ transform:translateX(5px); }
  70%{ transform:translateX(-3px); } 100%{ transform:none; }
}

/* live preview of the message */
.cf-preview{ margin-top:28px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.cf-pv-head{ display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; padding:12px 17px; background:var(--surface-2);
  border-bottom:1px solid var(--line); font-size:.84rem; font-weight:600;
  color:var(--text); }
.cf-live{ display:inline-flex; align-items:center; gap:7px; font-weight:400;
  font-size:.75rem; color:var(--muted); }
.cf-live i{ width:7px; height:7px; border-radius:50%; background:var(--mint);
  animation:pip 2.6s ease-out infinite; }
.cf-preview pre{ margin:0; padding:16px 17px; font-family:var(--mono);
  font-size:.8rem; line-height:1.8; color:var(--muted); white-space:pre-wrap;
  word-break:break-word; max-height:280px; overflow-y:auto; }

/* side cards */
.cf-card{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 20px 22px; margin-bottom:14px; }
.cf-card h3{ font-size:1rem; margin:0 0 10px; }
.cf-card > p{ margin:0 0 14px; font-size:.88rem; color:var(--muted);
  line-height:1.7; }
.cf-links{ list-style:none; margin:0; padding:0; }
.cf-links li{ padding:9px 0; border-bottom:1px solid var(--line-soft); }
.cf-links li:last-child{ border-bottom:0; padding-bottom:0; }
.cf-links a{ display:block; font-size:.9rem; font-weight:600; }
.cf-links span{ display:block; font-size:.8rem; color:var(--faint);
  margin-top:2px; line-height:1.6; }
.cf-tips{ margin:0; padding-left:18px; }
.cf-tips li{ font-size:.87rem; color:var(--muted); line-height:1.7;
  padding:4px 0; }
.cf-tips b{ color:var(--text); }
.cf-quiet{ background:var(--cat-soft); border-color:var(--cat-edge); }
.cf-quiet p{ margin:0; }

.cf-faq{ margin-top:52px; }
.cf-faq h2{ font-size:1.3rem; margin:0 0 14px; }

/* ==========================================================================
   Privacy and pricing heroes
   ========================================================================== */

.privacy-hero,.price-hero{ position:relative; overflow:hidden;
  background:var(--page-tint); border-bottom:1px solid var(--line-soft); }
.privacy-hero-in,.price-hero-in{ position:relative; z-index:2; padding:40px 0 46px; }
.privacy-hero .crumbs,.price-hero .crumbs{ margin-bottom:18px; }
.privacy-hero h1,.price-hero h1{ font-size:clamp(1.95rem,3.8vw,2.9rem);
  line-height:1.12; letter-spacing:-.03em; margin:0 0 16px; max-width:22ch; }
.privacy-hero h1 mark,.price-hero h1 mark{
  background:linear-gradient(to top, var(--brand-wash) 40%, transparent 40%);
  color:inherit; padding:0 .07em; border-radius:3px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.privacy-hero .lede,.price-hero .lede{ font-size:1.02rem; color:var(--muted);
  max-width:66ch; margin:0; line-height:1.75; }
.pv-date{ margin:18px 0 0; font-family:var(--mono); font-size:.78rem;
  color:var(--faint); }
.privacy-hero .orbs i:nth-child(1){ left:auto; right:2%; top:-220px;
  width:450px; height:450px; }
.privacy-hero .orbs i:nth-child(2){ left:-60px; right:auto; top:-160px; }
.privacy-hero .orbs i:nth-child(3){ right:34%; bottom:-250px; }
.price-hero .orbs i:nth-child(1){ left:-80px; top:-200px; width:460px; height:460px; }
.price-hero .orbs i:nth-child(2){ left:auto; right:4%; top:-180px; }
.price-hero .orbs i:nth-child(3){ right:20%; bottom:-240px; }
.price-hero .tally{ margin-top:28px; }
.price-body{ padding:34px 0 30px; }

/* ==========================================================================
   Privacy
   ========================================================================== */

.privacy-body{ padding:14px 0 30px; }
.pv-sec{ margin:50px 0 0; }
.pv-sec > h2{ font-size:1.4rem; margin:0 0 18px; letter-spacing:-.02em; }
.pv-say{ margin:0 0 20px; font-size:.96rem; color:var(--muted);
  line-height:1.8; max-width:74ch; }

.ps-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.ps-row{ display:grid; grid-template-columns:minmax(120px,.7fr) minmax(110px,.7fr) 2fr;
  gap:16px; padding:13px 2px; border-bottom:1px solid var(--line-soft);
  align-items:baseline; }
.ps-k{ font-weight:600; font-size:.92rem; color:var(--text); }
.ps-v{ font-family:var(--mono); font-size:.84rem; color:var(--mint); }
.ps-w{ font-size:.87rem; color:var(--muted); line-height:1.65; }
@media (max-width:700px){
  .ps-row{ grid-template-columns:1fr; gap:3px; }
  .ps-w{ margin-top:3px; }
}

/* the live storage panel */
.storebox{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.sb-head{ display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; padding:13px 18px; background:var(--surface-2);
  border-bottom:1px solid var(--line); font-size:.86rem; font-weight:600;
  color:var(--text); }
.sb-live{ display:inline-flex; align-items:center; gap:7px; font-weight:400;
  font-size:.76rem; color:var(--muted); }
.sb-live i{ width:7px; height:7px; border-radius:50%; background:var(--mint);
  animation:pip 2.6s ease-out infinite; }
.sb-list{ list-style:none; margin:0; padding:0; }
.sb-list > li{ display:flex; gap:14px; align-items:flex-start;
  padding:15px 18px; border-bottom:1px solid var(--line-soft); }
.sb-list > li:last-child{ border-bottom:0; }
.sb-main{ flex:1; min-width:0; }
.sb-name{ display:block; font-size:.93rem; font-weight:600; color:var(--text); }
.sb-key{ display:inline-block; font-family:var(--mono); font-size:.74rem;
  color:var(--brand); background:var(--cat-soft); padding:2px 7px;
  border-radius:5px; margin:5px 0 0; }
.sb-why{ display:block; font-size:.83rem; color:var(--muted); line-height:1.65;
  margin-top:6px; }
.sb-val{ display:block; font-family:var(--mono); font-size:.73rem;
  color:var(--faint); margin-top:7px; word-break:break-all; }
.sb-x{ flex:0 0 auto; background:transparent; border:1px solid var(--line);
  color:var(--muted); font:inherit; font-size:.78rem; padding:6px 13px;
  border-radius:999px; cursor:pointer; }
.sb-x:hover{ border-color:var(--coral); color:var(--coral); }
.sb-empty{ padding:26px 18px; font-size:.95rem; color:var(--text-dim); }
.sb-empty span{ display:block; font-size:.83rem; color:var(--faint);
  margin-top:6px; }
.sb-foot{ display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:13px 18px; background:var(--surface-2);
  border-top:1px solid var(--line); }
.sb-clear{ background:transparent; border:1px solid var(--line);
  color:var(--text-dim); font:inherit; font-size:.84rem; padding:8px 16px;
  border-radius:var(--radius-sm); cursor:pointer; }
.sb-clear:hover:not(:disabled){ border-color:var(--coral); color:var(--coral); }
.sb-clear:disabled{ opacity:.45; cursor:not-allowed; }
.sb-foot span{ font-size:.8rem; color:var(--faint); font-family:var(--mono); }

/* ==========================================================================
   Percentage and maths calculators
   ========================================================================== */

.mx{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); }
.mx-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px; align-items:end; }
.mx-f label{ display:block; font-size:.8rem; font-weight:600; color:var(--muted);
  margin-bottom:6px; }
.mx-in,.mx-list{ width:100%; background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font-family:var(--mono);
  font-size:1.25rem; padding:12px 14px; }
.mx-list{ font-size:.95rem; line-height:1.7; resize:vertical; min-height:90px; }
.mx-in:focus,.mx-list:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.mx-op{ font-family:var(--mono); font-size:1.1rem; color:var(--faint);
  text-align:center; padding-bottom:13px; }
.mx-quick{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.mx-quick button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font:inherit; font-size:.8rem;
  padding:5px 13px; cursor:pointer; }
.mx-quick button:hover{ border-color:var(--cat); color:var(--cat); }
.mx-out{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.mx-big{ font-size:1.35rem; line-height:1.5; color:var(--text-dim); }
.mx-big b{ font-family:var(--mono); font-size:1.9rem; color:var(--cat);
  font-weight:500; }
.mx-wait{ margin:0; color:var(--faint); font-size:.92rem; }
.mx-note{ margin:12px 0 0; font-size:.87rem; color:var(--muted);
  line-height:1.7; }
.mx-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px; margin-top:18px; }
.mx-cards div{ background:var(--surface-2); border-radius:10px; padding:12px 14px; }
.mx-cards span{ display:block; font-size:.74rem; color:var(--faint); }
.mx-cards b{ font-family:var(--mono); font-size:1.15rem; color:var(--text);
  font-weight:500; }
@media (max-width:560px){ .mx{ padding:16px 14px; } .mx-op{ display:none; } }

/* ==========================================================================
   Image tools
   ========================================================================== */

.im{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); }

.im-drop{ border:2px dashed var(--line); border-radius:12px; padding:38px 20px;
  text-align:center; cursor:pointer; background:var(--surface-2);
  transition:border-color .15s, background .15s; }
.im-drop.is-over{ border-color:var(--cat); background:var(--cat-soft); }
.im-drop.is-loaded{ padding:16px 20px; }
.im-drop svg{ color:var(--cat); margin-bottom:10px; }
.im-drop b{ display:block; font-size:1rem; color:var(--text); }
.im-drop span{ display:block; font-size:.86rem; color:var(--muted); margin-top:5px; }
.im-drop input{ display:none; }
.im-privacy{ display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  padding:6px 14px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); font-size:.78rem; color:var(--muted); }
.im-privacy i{ width:7px; height:7px; border-radius:50%; background:var(--mint);
  animation:pip 2.6s ease-out infinite; flex:0 0 auto; }

.im-stage[hidden]{ display:none; }
.im-panes{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
@media (max-width:700px){ .im-panes{ grid-template-columns:1fr; } }
.im-pane h3{ font-size:.8rem; font-weight:600; color:var(--muted); margin:0 0 8px; }
.im-frame{ background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:10px; padding:10px; display:flex; align-items:center;
  justify-content:center; min-height:180px;
  background-image:linear-gradient(45deg,var(--line-soft) 25%,transparent 25%),
    linear-gradient(-45deg,var(--line-soft) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--line-soft) 75%),
    linear-gradient(-45deg,transparent 75%,var(--line-soft) 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0; }
.im-frame img{ max-width:100%; max-height:300px; display:block;
  border-radius:4px; }
.im-meta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:9px;
  font-family:var(--mono); font-size:.76rem; color:var(--muted); }
.im-good{ color:var(--mint); font-weight:600; }
.im-bad{ color:var(--coral); }

.im-controls{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }
.im-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px; align-items:end; }
.im-grid label{ display:block; font-size:.78rem; font-weight:600;
  color:var(--muted); margin-bottom:5px; }
.im-grid input[type="number"],.im-grid select{ width:100%; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--text);
  font-family:var(--mono); font-size:1rem; padding:10px 12px; }
.im-grid input:focus,.im-grid select:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.im-check{ display:flex; align-items:center; gap:8px; font-size:.85rem;
  color:var(--text-dim); padding-bottom:10px; }
.im-check input{ accent-color:var(--cat); }
.im-slider{ display:flex; align-items:center; gap:14px; }
.im-slider input[type="range"]{ flex:1; accent-color:var(--cat); }
.im-q-out{ font-family:var(--mono); font-size:1rem; color:var(--cat);
  min-width:52px; text-align:right; }
.im-pct,.im-ar,.im-rot{ display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.im-pct button,.im-ar button,.im-rot button{ background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; color:var(--muted);
  font:inherit; font-size:.8rem; padding:6px 14px; cursor:pointer; }
.im-pct button:hover,.im-ar button:hover,.im-rot button:hover{
  border-color:var(--cat); color:var(--cat); }

.im-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }
.im-dl{ background:var(--cat); color:#fff; border:0; border-radius:var(--radius-sm);
  font-weight:600; font-size:.92rem; padding:12px 22px; display:inline-block; }
[data-theme="dark"] .im-dl{ color:#0d1322; }
.im-dl:hover{ filter:brightness(1.08); text-decoration:none; }
.im-dl[hidden]{ display:none; }
.im-again{ background:transparent; border:1px solid var(--line);
  color:var(--muted); font:inherit; font-size:.9rem; padding:11px 18px;
  border-radius:var(--radius-sm); cursor:pointer; }
.im-again:hover{ border-color:var(--cat); color:var(--cat); }
.im-err{ color:var(--coral); font-size:.88rem; margin:12px 0 0; }
.im-none{ color:var(--muted); font-size:.9rem; margin:0; line-height:1.7; }

/* EXIF */
.im-exif{ list-style:none; margin:0; padding:0; }
.im-exif li{ display:grid; grid-template-columns:minmax(96px,.6fr) 1.4fr;
  gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.im-exif li:last-child{ border-bottom:0; }
.im-exif span{ font-size:.84rem; color:var(--muted); }
.im-exif b{ font-family:var(--mono); font-size:.85rem; color:var(--text);
  word-break:break-word; }
.im-exif em{ grid-column:2; font-style:normal; font-size:.78rem;
  color:var(--faint); }
.im-warn{ color:var(--coral)!important; }

/* base64 */
.im-b64-wrap[hidden]{ display:none; }
.im-b64{ width:100%; min-height:130px; margin-top:14px; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--muted); font-family:var(--mono); font-size:.72rem; padding:12px;
  resize:vertical; word-break:break-all; }
.im-b64-meta{ font-size:.8rem; color:var(--faint); margin:8px 0 0; }
.im-b64-copy{ background:transparent; border:1px solid var(--line);
  color:var(--text-dim); font:inherit; font-size:.86rem; padding:9px 16px;
  border-radius:var(--radius-sm); cursor:pointer; margin-top:10px; }
.im-b64-copy:hover{ border-color:var(--cat); color:var(--cat); }

/* favicon */
.im-fav-out[hidden]{ display:none; }
.im-fav-out{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:10px; margin-top:16px; }
.im-fav-item{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; padding:14px 10px; text-align:center; color:var(--text-dim); }
.im-fav-item:hover{ border-color:var(--cat); text-decoration:none; }
.im-fav-item img{ display:block; margin:0 auto 8px; image-rendering:pixelated; }
.im-fav-item span{ display:block; font-family:var(--mono); font-size:.78rem; }
.im-fav-item em{ font-style:normal; font-size:.7rem; color:var(--faint); }

/* ==========================================================================
   PDF tools
   ========================================================================== */

.pf{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); }
.pf-drop{ border:2px dashed var(--line); border-radius:12px; padding:38px 20px;
  text-align:center; cursor:pointer; background:var(--surface-2);
  transition:border-color .15s, background .15s; }
.pf-drop.is-over{ border-color:var(--cat); background:var(--cat-soft); }
.pf-drop.is-loaded{ padding:16px 20px; }
.pf-drop svg{ color:var(--cat); margin-bottom:10px; }
.pf-drop b{ display:block; font-size:1rem; color:var(--text); }
.pf-drop span{ display:block; font-size:.86rem; color:var(--muted); margin-top:5px; }
.pf-drop input{ display:none; }
.pf-privacy{ display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  padding:6px 14px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); font-size:.78rem; color:var(--muted); }
.pf-privacy i{ width:7px; height:7px; border-radius:50%; background:var(--mint);
  animation:pip 2.6s ease-out infinite; flex:0 0 auto; }

.pf-stage[hidden]{ display:none; }
.pf-list{ list-style:none; margin:18px 0 0; padding:0; }
.pf-list li{ display:grid;
  grid-template-columns:26px minmax(0,1fr) 78px 82px auto;
  gap:10px; align-items:center; padding:10px 0;
  border-bottom:1px solid var(--line-soft); font-size:.88rem; }
.pf-n{ width:22px; height:22px; border-radius:6px; background:var(--cat-soft);
  color:var(--cat); font-family:var(--mono); font-size:.72rem; display:flex;
  align-items:center; justify-content:center; }
.pf-name{ color:var(--text); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.pf-size,.pf-count{ font-family:var(--mono); font-size:.76rem; color:var(--muted); }
.pf-locked{ color:var(--coral); }
.pf-move button{ background:transparent; border:1px solid var(--line);
  color:var(--muted); border-radius:6px; width:26px; height:26px; cursor:pointer;
  font-size:.8rem; margin-left:3px; }
.pf-move button:hover:not(:disabled){ border-color:var(--cat); color:var(--cat); }
.pf-move button:disabled{ opacity:.3; cursor:not-allowed; }

.pf-pages{ margin-top:18px; }
.pf-pg-head{ display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; font-size:.85rem; color:var(--muted);
  margin-bottom:10px; }
.pf-pg-tools button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font:inherit; font-size:.76rem;
  padding:4px 12px; cursor:pointer; margin-left:4px; }
.pf-pg-tools button:hover{ border-color:var(--cat); color:var(--cat); }
.pf-pg-grid{ display:flex; gap:6px; flex-wrap:wrap; max-height:210px;
  overflow-y:auto; padding:2px; }
.pf-pg{ width:40px; height:40px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--muted); font-family:var(--mono);
  font-size:.78rem; cursor:pointer; }
.pf-pg.is-on{ background:var(--cat); border-color:var(--cat); color:#fff; }
[data-theme="dark"] .pf-pg.is-on{ color:#0d1322; }
.pf-range{ margin-top:12px; }
.pf-range label{ display:block; font-size:.8rem; color:var(--muted); }
.pf-range-in{ width:100%; max-width:280px; margin-top:6px; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--mono); font-size:.9rem; padding:9px 12px; }
.pf-range-in:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }

.pf-controls{ margin-top:18px; display:flex; gap:16px; flex-wrap:wrap;
  align-items:end; }
.pf-controls label{ display:block; font-size:.78rem; font-weight:600;
  color:var(--muted); margin-bottom:5px; }
.pf-controls select{ background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font:inherit;
  font-size:.92rem; padding:10px 12px; }
.pf-info{ margin:14px 0 0; font-size:.86rem; color:var(--muted); }
.pf-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }
.pf-go{ background:var(--cat); color:#fff; border:0; border-radius:var(--radius-sm);
  font:inherit; font-weight:600; font-size:.94rem; padding:12px 24px; cursor:pointer; }
[data-theme="dark"] .pf-go{ color:#0d1322; }
.pf-go:hover:not(:disabled){ filter:brightness(1.08); }
.pf-go:disabled{ opacity:.45; cursor:not-allowed; }
.pf-again{ background:transparent; border:1px solid var(--line);
  color:var(--muted); font:inherit; font-size:.9rem; padding:11px 18px;
  border-radius:var(--radius-sm); cursor:pointer; }
.pf-again:hover{ border-color:var(--cat); color:var(--cat); }
.pf-status{ margin:12px 0 0; font-size:.88rem; color:var(--muted); }
.pf-status.is-good{ color:var(--mint); }
.pf-status.is-bad{ color:var(--coral); }
.pf-err{ color:var(--coral); font-size:.9rem; margin:0; }

.pf-results{ margin-top:16px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.pf-results[hidden]{ display:none; }
.pf-out{ display:block; background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; padding:13px 15px; color:var(--text-dim); }
.pf-out:hover{ border-color:var(--cat); text-decoration:none; }
.pf-out-name{ display:block; font-family:var(--mono); font-size:.82rem;
  color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-out-size{ display:block; font-size:.74rem; color:var(--faint); margin-top:3px; }
.pf-out-dl{ display:inline-block; margin-top:8px; font-size:.8rem;
  font-weight:600; color:var(--cat); }

.pf-meta{ list-style:none; margin:0; padding:0; grid-column:1/-1; }
.pf-meta li{ display:grid; grid-template-columns:minmax(110px,.6fr) 1.4fr;
  gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.pf-meta li:last-child{ border-bottom:0; }
.pf-meta span{ font-size:.85rem; color:var(--muted); }
.pf-meta b{ font-family:var(--mono); font-size:.86rem; color:var(--text);
  word-break:break-word; }
.pf-meta em{ grid-column:2; font-style:normal; font-size:.77rem; color:var(--faint); }

.pf-text-wrap[hidden]{ display:none; }
.pf-text{ width:100%; min-height:220px; margin-top:16px; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--text);
  font-family:var(--mono); font-size:.8rem; padding:13px; line-height:1.7;
  resize:vertical; }
.pf-text-meta{ font-size:.82rem; color:var(--faint); margin:8px 0 0; }
.pf-text-copy{ background:transparent; border:1px solid var(--line);
  color:var(--text-dim); font:inherit; font-size:.86rem; padding:9px 16px;
  border-radius:var(--radius-sm); cursor:pointer; margin-top:10px; }
.pf-text-copy:hover{ border-color:var(--cat); color:var(--cat); }
@media (max-width:620px){
  .pf-list li{ grid-template-columns:22px minmax(0,1fr) auto; }
  .pf-size,.pf-count{ display:none; }
}

/* ==========================================================================
   Audio & music
   ========================================================================== */

.au2{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); }
.au2 .dev-go{ background:var(--cat); }
[data-theme="dark"] .au2 .dev-go{ color:#0d1322; }

/* ---------- tuner ---------- */
.tn-status,.vr-status{ margin:0 0 14px; font-size:.9rem; color:var(--muted); }
.tn-status.is-good,.vr-status.is-good{ color:var(--mint); }
.tn-status.is-bad,.vr-status.is-bad{ color:var(--coral); }
.tn-panel[hidden]{ display:none; }
.tn-read{ text-align:center; padding:10px 0 4px; }
.tn-note{ font-size:4.4rem; font-weight:600; line-height:1; color:var(--cat);
  letter-spacing:-.03em; }
.tn-oct{ font-size:1.6rem; color:var(--muted); font-family:var(--mono);
  vertical-align:super; margin-left:2px; }
.tn-hz{ display:block; font-family:var(--mono); font-size:.95rem;
  color:var(--muted); margin-top:6px; }
.tn-cents{ display:block; font-family:var(--mono); font-size:1.05rem;
  margin-top:4px; color:var(--faint); }
.tn-cents.is-good{ color:var(--mint); font-weight:600; }
.tn-cents.is-close{ color:var(--amber); }
.tn-cents.is-off{ color:var(--coral); }
.tn-dial{ position:relative; height:90px; margin:14px auto 0; max-width:420px;
  border-top:2px solid var(--line); border-radius:0; }
.tn-dial::before,.tn-dial::after{ content:""; position:absolute; top:-2px;
  width:2px; height:12px; background:var(--line); }
.tn-dial::before{ left:0; } .tn-dial::after{ right:0; }
.tn-centre{ position:absolute; left:50%; top:-7px; width:2px; height:22px;
  margin-left:-1px; background:var(--muted); }
.tn-needle{ position:absolute; left:50%; top:0; width:3px; height:74px;
  margin-left:-1.5px; background:var(--coral); border-radius:2px;
  transform-origin:top center; transition:transform .12s ease-out; }
.tn-dial.is-close .tn-needle{ background:var(--amber); }
.tn-dial.is-good .tn-needle{ background:var(--mint); }
.tn-scale{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:.7rem; color:var(--faint); max-width:420px; margin:2px auto 0; }
.tn-strings{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin-top:18px; }
.tn-strings button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; padding:10px 15px; cursor:pointer; font:inherit;
  color:var(--text-dim); text-align:center; min-width:66px; }
.tn-strings button:hover{ border-color:var(--cat); color:var(--cat); }
.tn-strings button.is-near{ border-color:var(--cat); background:var(--cat-soft);
  color:var(--cat); }
.tn-strings b{ display:block; font-size:1.05rem; }
.tn-strings span{ display:block; font-family:var(--mono); font-size:.7rem;
  color:var(--faint); }

/* ---------- metronome ---------- */
.mt-top{ text-align:center; }
.mt-bpm-out{ font-size:4rem; font-family:var(--mono); color:var(--cat);
  line-height:1; font-weight:500; }
.mt-bpm-out::after{ content:" BPM"; font-size:1rem; color:var(--muted); }
.mt-tempo{ display:block; font-size:.9rem; color:var(--muted); margin-top:4px;
  font-style:italic; }
.mt-dots{ display:flex; gap:10px; justify-content:center; margin:20px 0; }
.mt-dots i{ width:18px; height:18px; border-radius:50%; background:var(--surface-2);
  border:1px solid var(--line); transition:transform .05s, background .05s; }
.mt-dots i.is-one{ border-color:var(--cat); }
.mt-dots i.is-on{ background:var(--cat); border-color:var(--cat);
  transform:scale(1.35); }
.mt-row{ display:flex; gap:12px; align-items:center; justify-content:center;
  flex-wrap:wrap; margin-top:16px; }
.mt-bpm{ flex:1; min-width:200px; max-width:420px; accent-color:var(--cat); }
.mt-step{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--muted); font-size:1.1rem; cursor:pointer; }
.mt-step:hover{ border-color:var(--cat); color:var(--cat); }
.mt-play{ min-width:130px; }
.mt-play.is-on{ background:var(--coral); }
.mt-hint{ text-align:center; font-size:.8rem; color:var(--faint); margin:14px 0 0; }

/* ---------- BPM tapper ---------- */
.bp-pad{ height:190px; border:2px dashed var(--line); border-radius:14px;
  background:var(--surface-2); display:flex; align-items:center;
  justify-content:center; cursor:pointer; user-select:none; font-size:1.1rem;
  color:var(--muted); transition:background .06s, transform .06s; }
.bp-pad.is-hit{ background:var(--cat-soft); transform:scale(.99); }
.bp-read{ text-align:center; margin-top:18px; }
.bp-bpm{ font-family:var(--mono); font-size:3.4rem; color:var(--cat);
  line-height:1; font-weight:500; }
.bp-bpm::after{ content:" BPM"; font-size:.95rem; color:var(--muted); }
.bp-detail{ font-size:.86rem; color:var(--muted); margin-top:8px; }
.bp-table{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px; margin-top:18px; }
.bp-table div{ background:var(--surface-2); border-radius:10px; padding:11px 13px; }
.bp-table span{ display:block; font-size:.72rem; color:var(--faint); }
.bp-table b{ font-family:var(--mono); font-size:1.05rem; color:var(--text);
  font-weight:500; }

/* ---------- recorder ---------- */
.vr-meter{ height:14px; background:var(--surface-2); border-radius:7px;
  overflow:hidden; margin:14px 0; }
.vr-meter i{ display:block; height:100%; width:0; background:var(--mint);
  border-radius:7px; transition:width .05s linear; }
.vr-meter i.is-mid{ background:var(--amber); }
.vr-meter i.is-bad{ background:var(--coral); }
.vr-time{ font-family:var(--mono); font-size:1.6rem; color:var(--cat); }
.vr-list{ list-style:none; margin:18px 0 0; padding:0; }
.vr-list[hidden]{ display:none; }
.vr-list li{ display:grid; grid-template-columns:minmax(90px,auto) 1fr auto;
  gap:12px; align-items:center; padding:12px 0;
  border-bottom:1px solid var(--line-soft); }
.vr-name{ font-size:.9rem; color:var(--text); }
.vr-list audio{ width:100%; max-width:340px; height:36px; }
.vr-dl{ font-size:.85rem; font-weight:600; }

/* ---------- hearing / tone ---------- */
.hr-row,.tg-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin-bottom:14px; }
.hr-row label,.tg-row label{ font-size:.8rem; font-weight:600; color:var(--muted);
  min-width:74px; }
.hr-freq,.hr-vol,.tg-freq,.tg-vol,.tg-pan{ flex:1; min-width:180px;
  accent-color:var(--cat); }
.hr-out,.tg-out{ font-family:var(--mono); font-size:1.15rem; color:var(--cat);
  min-width:104px; text-align:right; }
.tg-note{ font-family:var(--mono); font-size:.85rem; color:var(--muted); }
.hr-play.is-on,.tg-play.is-on{ background:var(--coral); }
.tg-preset{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.tg-preset button,.hr-steps button{ background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; color:var(--muted);
  font:inherit; font-size:.79rem; padding:5px 13px; cursor:pointer; }
.tg-preset button:hover,.hr-steps button:hover{ border-color:var(--cat);
  color:var(--cat); }
.hr-result{ font-size:1.05rem; color:var(--text-dim); margin:18px 0 6px; }
.hr-result b{ color:var(--cat); font-family:var(--mono); }
.hr-note{ font-size:.85rem; color:var(--muted); line-height:1.7; margin:0; }
.tg-select,.mt-sig{ background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font:inherit;
  font-size:.9rem; padding:9px 11px; }

/* ---------- note table ---------- */
.nf-wrap{ overflow-x:auto; margin-top:16px; }
.nf-table{ width:100%; border-collapse:collapse; min-width:760px; }
.nf-table th{ font-size:.74rem; color:var(--muted); font-weight:600;
  padding:8px 6px; border-bottom:1px solid var(--line); }
.nf-table th[scope="row"]{ border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); }
.nf-table td{ text-align:center; padding:7px 4px; cursor:pointer;
  border-bottom:1px solid var(--line-soft); border-radius:6px; }
.nf-table td:hover{ background:var(--cat-soft); }
.nf-table td.is-hit{ background:var(--cat); }
.nf-table td.is-hit b,.nf-table td.is-hit span{ color:#fff; }
.nf-table td.is-a4{ background:var(--cat-soft); }
.nf-table b{ display:block; font-family:var(--mono); font-size:.82rem;
  color:var(--text); font-weight:500; }
.nf-table span{ display:block; font-size:.66rem; color:var(--faint); }

/* ==========================================================================
   Colour & accessibility
   ========================================================================== */

.co{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); }
.co-field{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.co-in,.ct-fg,.ct-bg,.sh-in,.gr-1,.gr-2{ flex:1; min-width:170px;
  background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font-family:var(--mono);
  font-size:1.05rem; padding:12px 14px; }
.co-in:focus,.ct-fg:focus,.ct-bg:focus,.sh-in:focus{ outline:none;
  border-color:var(--cat); box-shadow:0 0 0 3px var(--cat-soft); }
input[type="color"]{ width:46px; height:46px; padding:0; border:1px solid var(--line);
  border-radius:10px; background:none; cursor:pointer; flex:0 0 auto; }
.co-err{ font-size:.85rem; color:var(--coral); margin:10px 0 0; min-height:1em; }
.co-samples,.ct-pair,.gr-preset{ display:flex; gap:7px; flex-wrap:wrap;
  margin-top:12px; }
.co-samples button,.ct-pair button,.gr-preset button{ background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; color:var(--muted);
  font:inherit; font-size:.79rem; padding:5px 13px; cursor:pointer; }
.co-samples button:hover,.ct-pair button:hover,.gr-preset button:hover{
  border-color:var(--cat); color:var(--cat); }

.co-swatch{ height:110px; border-radius:12px; margin-top:18px;
  border:1px solid var(--line); display:flex; align-items:center;
  justify-content:center; font-family:var(--mono); font-size:.85rem; }
.co-out{ margin-top:16px; }
.co-row{ display:grid; grid-template-columns:minmax(88px,.5fr) 1.5fr; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line-soft); align-items:baseline; }
.co-row:last-child{ border-bottom:0; }
.co-row span{ font-size:.8rem; color:var(--muted); }
.co-row b{ font-family:var(--mono); font-size:.9rem; color:var(--text);
  cursor:pointer; font-weight:500; }
.co-row b:hover{ color:var(--cat); }
.co-copy.is-copied,.co-row b.is-copied{ color:var(--mint)!important; }

/* contrast */
.ct-rows{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:620px){ .ct-rows{ grid-template-columns:1fr; } }
.ct-rows label{ display:block; font-size:.8rem; font-weight:600;
  color:var(--muted); margin-bottom:6px; }
.ct-demo{ margin-top:18px; padding:26px 22px; border-radius:12px;
  border:1px solid var(--line); }
.ct-demo h4{ margin:0 0 8px; font-size:1.5rem; }
.ct-demo p{ margin:0 0 8px; font-size:1rem; line-height:1.65; }
.ct-demo small{ font-size:.8rem; }
.ct-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-top:20px; }
.ct-ratio{ font-family:var(--mono); font-size:2.6rem; line-height:1;
  font-weight:500; }
.ct-ratio.is-aaa,.ct-ratio.is-aa{ color:var(--mint); }
.ct-ratio.is-large{ color:var(--amber); }
.ct-ratio.is-fail{ color:var(--coral); }
.ct-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:9px; margin-top:16px; }
.ct-item{ display:grid; grid-template-columns:22px 1fr; gap:4px 9px;
  align-items:center; background:var(--surface-2); border-radius:10px;
  padding:11px 13px; }
.ct-mark{ grid-row:1/3; font-size:1.1rem; text-align:center; }
.ct-item.is-pass .ct-mark{ color:var(--mint); }
.ct-item.is-fail .ct-mark{ color:var(--coral); }
.ct-item b{ font-size:.85rem; color:var(--text); font-weight:600; }
.ct-item em{ font-style:normal; font-size:.72rem; color:var(--faint); }
.ct-advice{ margin:16px 0 0; font-size:.9rem; color:var(--muted);
  line-height:1.75; }
.ct-swap{ background:var(--surface-2); border:1px solid var(--line);
  color:var(--muted); border-radius:999px; font:inherit; font-size:.8rem;
  padding:6px 15px; cursor:pointer; }
.ct-swap:hover{ border-color:var(--cat); color:var(--cat); }

/* image-based */
.co-drop{ border:2px dashed var(--line); border-radius:12px; padding:34px 20px;
  text-align:center; cursor:pointer; background:var(--surface-2); }
.co-drop.is-over{ border-color:var(--cat); background:var(--cat-soft); }
.co-drop.is-loaded{ padding:15px 20px; }
.co-drop b{ display:block; font-size:1rem; color:var(--text); }
.co-drop span{ display:block; font-size:.85rem; color:var(--muted); margin-top:5px; }
.co-drop input{ display:none; }
.co-stage[hidden]{ display:none; }
.co-src{ max-width:100%; max-height:260px; border-radius:10px; margin-top:16px;
  display:block; }
.co-swatches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px; margin-top:18px; }
.co-sw{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; padding:12px; cursor:pointer; }
.co-sw:hover{ border-color:var(--cat); }
.co-sw-chip{ display:block; height:48px; border-radius:7px; background:var(--c);
  border:1px solid rgba(0,0,0,.12); margin-bottom:9px; }
.co-sw b{ display:block; font-family:var(--mono); font-size:.82rem;
  color:var(--text); font-weight:500; }
.co-sw em{ display:block; font-style:normal; font-size:.7rem; color:var(--faint);
  margin-top:2px; }
.co-panels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px; margin-top:18px; }
.co-panel h3{ font-size:.86rem; margin:0 0 8px; color:var(--text); }
.co-panel canvas{ max-width:100%; height:auto; border-radius:10px;
  border:1px solid var(--line-soft); display:block; }
.co-panel p{ font-size:.78rem; color:var(--muted); margin:8px 0 0;
  line-height:1.6; }
.co-css-wrap[hidden]{ display:none; }
.co-css,.gr-css,.sh-css{ width:100%; min-height:96px; margin-top:14px;
  background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--muted); font-family:var(--mono);
  font-size:.78rem; padding:12px; resize:vertical; }
.co-copy-btn{ background:transparent; border:1px solid var(--line);
  color:var(--text-dim); font:inherit; font-size:.84rem; padding:8px 15px;
  border-radius:var(--radius-sm); cursor:pointer; margin-top:10px; }
.co-copy-btn:hover{ border-color:var(--cat); color:var(--cat); }
.co-again{ background:transparent; border:1px solid var(--line);
  color:var(--muted); font:inherit; font-size:.88rem; padding:10px 17px;
  border-radius:var(--radius-sm); cursor:pointer; margin-top:16px; }

/* gradient */
.gr-preview{ height:150px; border-radius:12px; border:1px solid var(--line);
  margin-top:18px; }
.gr-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin-top:14px; }
.gr-row label{ font-size:.8rem; font-weight:600; color:var(--muted);
  min-width:62px; }
.gr-angle{ flex:1; min-width:150px; accent-color:var(--cat); }
.gr-angle-out{ font-family:var(--mono); font-size:.9rem; color:var(--cat);
  min-width:46px; text-align:right; }
.gr-type{ background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font:inherit;
  font-size:.9rem; padding:9px 11px; }
.gr-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:8px; margin-top:16px; }

/* shades */
.sh-rows{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:6px; margin-top:18px; }
.sh-item{ border-radius:9px; padding:14px 10px; text-align:center;
  cursor:pointer; border:1px solid rgba(0,0,0,.08); }
.sh-item b{ display:block; font-family:var(--mono); font-size:.9rem;
  font-weight:600; }
.sh-item span{ display:block; font-family:var(--mono); font-size:.68rem;
  opacity:.85; margin-top:3px; }
.sh-item em{ display:block; font-style:normal; font-size:.64rem; opacity:.7;
  margin-top:2px; }

/* ==========================================================================
   Money & everyday finance
   ========================================================================== */

.mn{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); }
.mn-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:14px; align-items:end; }
.mn-f label{ display:block; font-size:.78rem; font-weight:600; color:var(--muted);
  margin-bottom:6px; }
.mn-f label span{ font-weight:400; color:var(--faint); }
.mn-in,.mn-sel{ width:100%; background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font-family:var(--mono);
  font-size:1.1rem; padding:11px 13px; }
.mn-sel{ font-family:inherit; font-size:.92rem; }
.mn-in:focus,.mn-sel:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.mn-quick{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.mn-quick button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font:inherit; font-size:.79rem;
  padding:5px 13px; cursor:pointer; }
.mn-quick button:hover{ border-color:var(--cat); color:var(--cat); }
.mn-out{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.mn-big{ font-size:1.25rem; line-height:1.5; color:var(--text-dim); }
.mn-big b{ font-family:var(--mono); font-size:1.85rem; color:var(--cat);
  font-weight:500; }
.mn-wait{ margin:0; color:var(--faint); font-size:.92rem; }
.mn-note{ margin:12px 0 0; font-size:.87rem; color:var(--muted); line-height:1.7; }
.mn-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  gap:10px; margin-top:18px; }
.mn-cards div{ background:var(--surface-2); border-radius:10px; padding:12px 14px; }
.mn-cards span{ display:block; font-size:.72rem; color:var(--faint); }
.mn-cards b{ font-family:var(--mono); font-size:1.12rem; color:var(--text);
  font-weight:500; }
.mn-table-wrap{ margin-top:18px; max-height:330px; overflow:auto;
  border:1px solid var(--line-soft); border-radius:10px; }
.mn-table-wrap table{ width:100%; border-collapse:collapse; font-size:.83rem; }
.mn-table-wrap th{ position:sticky; top:0; background:var(--surface-2);
  text-align:left; font-size:.74rem; color:var(--muted); font-weight:600;
  padding:9px 12px; border-bottom:1px solid var(--line); }
.mn-table-wrap td{ padding:8px 12px; border-bottom:1px solid var(--line-soft);
  color:var(--text-dim); }
.mn-table-wrap td.num{ font-family:var(--mono); text-align:right; }
.mn-table-wrap tr:last-child td{ border-bottom:0; }
@media (max-width:560px){ .mn{ padding:16px 14px; } }

/* ==========================================================================
   Dates & calendars
   ========================================================================== */

.dt{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); }
.dt-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:14px; align-items:end; }
.dt-f label{ display:block; font-size:.78rem; font-weight:600; color:var(--muted);
  margin-bottom:6px; }
.dt-f label span{ font-weight:400; color:var(--faint); }
.dt input[type="date"],.dt input[type="time"],.dt input[type="text"],
.dt select{ width:100%; background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font-family:var(--mono);
  font-size:1rem; padding:11px 13px; }
.dt select{ font-family:inherit; font-size:.92rem; }
.dt input:focus,.dt select:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.dt-days{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.dt-days label{ display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  padding:6px 13px; font-size:.82rem; color:var(--text-dim); cursor:pointer; }
.dt-days input{ width:auto; accent-color:var(--cat); }
.dt-quick{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.dt-quick button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font:inherit; font-size:.79rem;
  padding:5px 13px; cursor:pointer; }
.dt-quick button:hover{ border-color:var(--cat); color:var(--cat); }
.dt-out{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.dt-big{ font-size:1.25rem; line-height:1.5; color:var(--text-dim); }
.dt-big b{ font-family:var(--mono); font-size:1.85rem; color:var(--cat);
  font-weight:500; }
.dt-wait{ margin:0; color:var(--faint); font-size:.92rem; }
.dt-note{ margin:12px 0 0; font-size:.87rem; color:var(--muted); line-height:1.7; }
.dt-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:10px; margin-top:18px; }
.dt-cards div{ background:var(--surface-2); border-radius:10px; padding:12px 14px; }
.dt-cards span{ display:block; font-size:.72rem; color:var(--faint); }
.dt-cards b{ font-family:var(--mono); font-size:1.02rem; color:var(--text);
  font-weight:500; word-break:break-word; }
@media (max-width:560px){ .dt{ padding:16px 14px; } }

/* ==========================================================================
   Text & developer utilities
   ========================================================================== */

.tx{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); }
.tx-pane{ margin-bottom:14px; }
.tx-pane > label{ display:block; font-size:.78rem; font-weight:600;
  color:var(--muted); margin-bottom:6px; }
.tx-a,.tx-b,textarea.tx-out{ width:100%; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--mono); font-size:.86rem; padding:13px;
  line-height:1.7; resize:vertical; min-height:130px; }
.tx-b{ min-height:60px; }
.tx-a:focus,.tx-b:focus,textarea.tx-out:focus{ outline:none;
  border-color:var(--cat); box-shadow:0 0 0 3px var(--cat-soft); }
textarea.tx-out{ background:var(--surface-2); color:var(--text-dim); }
div.tx-out{ background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); padding:14px; min-height:80px;
  max-height:420px; overflow:auto; }
.tx-opts{ display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  margin-bottom:14px; }
.tx-opts label{ display:inline-flex; align-items:center; gap:7px;
  font-size:.82rem; color:var(--text-dim); }
.tx-opts select,.tx-opts input[type="text"],.tx-opts input[type="number"]{
  background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font:inherit;
  font-size:.86rem; padding:8px 11px; }
.tx-opts input[type="number"]{ width:88px; font-family:var(--mono); }
.tx-opts input[type="checkbox"]{ accent-color:var(--cat); }
.tx-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.tx-tabs label{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:6px 14px; font-size:.81rem; color:var(--muted);
  cursor:pointer; }
.tx-tabs input{ display:none; }
.tx-tabs input:checked + span{ color:var(--cat); font-weight:600; }
.tx-preset{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.tx-preset button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font:inherit; font-size:.78rem;
  padding:5px 12px; cursor:pointer; }
.tx-preset button:hover{ border-color:var(--cat); color:var(--cat); }
.tx-acts{ display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.tx-copy,.tx-clear,.tx-swap{ background:transparent; border:1px solid var(--line);
  color:var(--text-dim); font:inherit; font-size:.85rem; padding:9px 16px;
  border-radius:var(--radius-sm); cursor:pointer; }
.tx-copy:hover,.tx-clear:hover,.tx-swap:hover{ border-color:var(--cat);
  color:var(--cat); }
.tx-note{ margin:12px 0 0; font-size:.84rem; color:var(--muted);
  line-height:1.7; min-height:1em; }
.tx-note.is-bad{ color:var(--coral); }
.tx-note.is-good{ color:var(--mint); }
.tx-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
  gap:9px; margin-top:16px; }
.tx-stats div{ background:var(--surface-2); border-radius:10px; padding:11px 13px; }
.tx-stats span{ display:block; font-size:.7rem; color:var(--faint); }
.tx-stats b{ font-family:var(--mono); font-size:1.05rem; color:var(--text);
  font-weight:500; word-break:break-word; }
.tx-empty{ color:var(--faint); font-size:.88rem; margin:0; }

/* word frequency */
.tx-freq{ display:flex; gap:7px; flex-wrap:wrap; }
.tx-freq span{ background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:5px 13px; font-size:.82rem; color:var(--text-dim); }
.tx-freq b{ font-family:var(--mono); font-size:.74rem; color:var(--cat);
  margin-left:6px; }

/* hashes */
.tx-hashes{ display:grid; gap:10px; }
.tx-hash{ display:grid; grid-template-columns:76px 1fr auto; gap:11px;
  align-items:center; }
.tx-hash span{ font-size:.78rem; color:var(--muted); font-weight:600; }
.tx-hash code{ font-family:var(--mono); font-size:.74rem; color:var(--text);
  word-break:break-all; cursor:pointer; }
.tx-hash code:hover{ color:var(--cat); }
.tx-hash code.is-copied{ color:var(--mint); }
.tx-hash em{ font-style:normal; font-size:.68rem; color:var(--faint); }

/* diff */
.tx-diff{ font-family:var(--mono); font-size:.8rem; }
.tx-d{ display:grid; grid-template-columns:28px 1fr; gap:9px; padding:2px 6px;
  border-radius:4px; }
.tx-d i{ font-style:normal; color:var(--faint); text-align:right;
  font-size:.72rem; }
.tx-d code{ white-space:pre-wrap; word-break:break-word; }
.tx-d.same code{ color:var(--muted); }
.tx-d.add{ background:color-mix(in srgb, var(--mint) 16%, transparent); }
.tx-d.add i,.tx-d.add code{ color:var(--mint-ink,#0a7d55); }
[data-theme="dark"] .tx-d.add i,[data-theme="dark"] .tx-d.add code{ color:var(--mint); }
.tx-d.del{ background:color-mix(in srgb, var(--coral) 14%, transparent); }
.tx-d.del i,.tx-d.del code{ color:var(--coral); }

/* regex highlight */
.tx-re{ font-family:var(--mono); font-size:.84rem; line-height:1.9;
  white-space:pre-wrap; word-break:break-word; color:var(--text-dim); }
.tx-re mark{ background:var(--cat-soft); color:var(--cat); border-radius:3px;
  padding:1px 2px; font-weight:600; }

/* ==========================================================================
   Encoding & ciphers
   ========================================================================== */

.cp{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); }
.cp-pane{ margin-bottom:14px; }
.cp-pane > label{ display:block; font-size:.78rem; font-weight:600;
  color:var(--muted); margin-bottom:6px; }
.cp-a,textarea.cp-out{ width:100%; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--mono); font-size:.9rem; padding:13px;
  line-height:1.8; resize:vertical; min-height:118px; word-break:break-all; }
.cp-a:focus,textarea.cp-out:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
textarea.cp-out{ background:var(--surface-2); color:var(--text-dim); }
.cp-opts{ display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  margin-bottom:14px; }
.cp-opts label{ display:inline-flex; align-items:center; gap:7px;
  font-size:.82rem; color:var(--text-dim); }
.cp-opts select,.cp-opts input[type="text"],.cp-opts input[type="number"]{
  background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font:inherit;
  font-size:.86rem; padding:8px 11px; }
.cp-opts input[type="text"]{ font-family:var(--mono); width:140px; }
.cp-opts input[type="number"]{ width:80px; font-family:var(--mono); }
.cp-opts input[type="checkbox"]{ accent-color:var(--cat); }
.cp-opts input[type="range"]{ accent-color:var(--cat); width:160px; }
.cp-preset{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.cp-preset button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font:inherit; font-size:.78rem;
  padding:5px 12px; cursor:pointer; }
.cp-preset button:hover{ border-color:var(--cat); color:var(--cat); }
.cp-acts{ display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.cp-copy,.cp-swap{ background:transparent; border:1px solid var(--line);
  color:var(--text-dim); font:inherit; font-size:.85rem; padding:9px 16px;
  border-radius:var(--radius-sm); cursor:pointer; }
.cp-copy:hover,.cp-swap:hover{ border-color:var(--cat); color:var(--cat); }
.cp-note{ margin:12px 0 0; font-size:.84rem; color:var(--muted);
  line-height:1.7; min-height:1em; }
.cp-note.is-bad{ color:var(--amber); }
.cp-extra{ margin-top:18px; }
.cp-h{ font-size:.8rem; font-weight:600; color:var(--muted); margin:0 0 10px; }
.cp-small{ font-size:.8rem; color:var(--faint); line-height:1.7; margin:10px 0 0; }
.cp-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:9px; }
.cp-cards div{ background:var(--surface-2); border-radius:10px; padding:11px 13px; }
.cp-cards span{ display:block; font-size:.7rem; color:var(--faint); }
.cp-cards b{ font-family:var(--mono); font-size:1.05rem; color:var(--text);
  font-weight:500; }

/* cracking panel */
.cp-crack{ display:grid; gap:4px; }
.cp-row{ display:grid; grid-template-columns:70px 1fr; gap:11px;
  align-items:baseline; padding:7px 10px; border-radius:7px;
  background:var(--surface-2); }
.cp-row.is-best{ background:var(--cat-soft); }
.cp-row span{ font-family:var(--mono); font-size:.72rem; color:var(--faint); }
.cp-row.is-best span{ color:var(--cat); font-weight:600; }
.cp-row code{ font-family:var(--mono); font-size:.78rem; color:var(--text-dim);
  word-break:break-word; }
.cp-row.is-best code{ color:var(--text); }

/* keyword alignment */
.cp-align{ display:grid; gap:3px; overflow-x:auto; }
.cp-align div{ display:grid; grid-template-columns:58px 1fr; gap:10px;
  align-items:baseline; }
.cp-align span{ font-size:.72rem; color:var(--faint); }
.cp-align code{ font-family:var(--mono); font-size:.88rem; letter-spacing:.22em;
  color:var(--text-dim); white-space:nowrap; }
.cp-align div:nth-child(2) code{ color:var(--cat); }
.cp-align div:nth-child(3) code{ color:var(--text); }

/* NATO grid */
.cp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:7px; }
.cp-grid div{ background:var(--surface-2); border-radius:8px; padding:9px 11px; }
.cp-grid b{ font-family:var(--mono); font-size:.84rem; color:var(--cat); }
.cp-grid span{ display:block; font-size:.78rem; color:var(--text-dim); }

/* ==========================================================================
   Cooking & baking
   ========================================================================== */

.ck{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); }
.ck-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px; align-items:end; }
.ck-row.wide{ grid-template-columns:2fr 1fr; }
.ck-f label{ display:block; font-size:.78rem; font-weight:600; color:var(--muted);
  margin-bottom:6px; }
.ck-f label span{ font-weight:400; color:var(--faint); }
.ck input[type="text"],.ck select,.ck textarea{ width:100%;
  background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font-size:1rem;
  padding:11px 13px; }
.ck input[type="text"]{ font-family:var(--mono); }
.ck select{ font-size:.92rem; }
.ck textarea{ font-family:var(--mono); font-size:.85rem; line-height:1.8;
  min-height:150px; resize:vertical; }
.ck input:focus,.ck select:focus,.ck textarea:focus{ outline:none;
  border-color:var(--cat); box-shadow:0 0 0 3px var(--cat-soft); }
.ck-quick{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.ck-quick button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font:inherit; font-size:.79rem;
  padding:5px 13px; cursor:pointer; }
.ck-quick button:hover{ border-color:var(--cat); color:var(--cat); }
.ck-out{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.ck-big{ font-size:1.25rem; line-height:1.5; color:var(--text-dim); }
.ck-big b{ font-family:var(--mono); font-size:1.9rem; color:var(--cat);
  font-weight:500; }
.ck-wait{ margin:0; color:var(--faint); font-size:.92rem; }
.ck-note{ margin:12px 0 0; font-size:.87rem; color:var(--muted); line-height:1.7; }
.ck-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
  gap:10px; margin-top:18px; }
.ck-cards div{ background:var(--surface-2); border-radius:10px; padding:12px 14px; }
.ck-cards span{ display:block; font-size:.72rem; color:var(--faint); }
.ck-cards b{ font-family:var(--mono); font-size:1.1rem; color:var(--text);
  font-weight:500; }
.ck-extra{ margin-top:18px; }
.ck-recipe h4,.ck-all h4{ font-size:.8rem; color:var(--muted); margin:0 0 9px; }
.ck-recipe pre{ background:var(--surface-2); border-radius:10px; padding:14px;
  font-family:var(--mono); font-size:.86rem; line-height:1.9; margin:0;
  white-space:pre-wrap; color:var(--text); }
.ck-all ul{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2px 16px; }
.ck-all li{ display:flex; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:.85rem; }
.ck-all span{ color:var(--muted); }
.ck-all b{ font-family:var(--mono); color:var(--text); font-weight:500; }
@media (max-width:560px){ .ck{ padding:16px 14px; } .ck-row.wide{ grid-template-columns:1fr; } }

/* ==========================================================================
   Random & decision
   ========================================================================== */

.rd{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); }
.rd-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px; align-items:end; }
.rd-f label{ display:block; font-size:.78rem; font-weight:600; color:var(--muted);
  margin-bottom:6px; }
.rd input[type="text"],.rd select,.rd textarea{ width:100%; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font-size:1rem; padding:11px 13px; }
.rd input[type="text"]{ font-family:var(--mono); }
.rd select{ font-size:.92rem; }
.rd textarea{ font-family:var(--mono); font-size:.88rem; line-height:1.8;
  min-height:140px; resize:vertical; }
.rd input:focus,.rd select:focus,.rd textarea:focus{ outline:none;
  border-color:var(--cat); box-shadow:0 0 0 3px var(--cat-soft); }
.rd-checks{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.rd-checks label{ display:inline-flex; align-items:center; gap:7px;
  font-size:.83rem; color:var(--text-dim); }
.rd-checks input{ accent-color:var(--cat); }
.rd-quick{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.rd-quick button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font:inherit; font-size:.79rem;
  padding:5px 13px; cursor:pointer; }
.rd-quick button:hover{ border-color:var(--cat); color:var(--cat); }
.rd-acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.rd-go{ background:var(--cat); color:#fff; border:0; border-radius:var(--radius-sm);
  font:inherit; font-weight:600; font-size:.95rem; padding:12px 26px;
  cursor:pointer; }
[data-theme="dark"] .rd-go{ color:#0d1322; }
.rd-go:hover{ filter:brightness(1.08); }
.rd-reset{ background:transparent; border:1px solid var(--line);
  color:var(--muted); font:inherit; font-size:.88rem; padding:11px 18px;
  border-radius:var(--radius-sm); cursor:pointer; }
.rd-hint{ font-size:.79rem; color:var(--faint); margin:12px 0 0; }
.rd-out{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line);
  min-height:70px; }
.rd-wait{ margin:0; color:var(--faint); font-size:.92rem; }
.rd-note{ margin:14px 0 0; font-size:.86rem; color:var(--muted); line-height:1.7; }
.rd-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:10px; margin-top:18px; }
.rd-stats div{ background:var(--surface-2); border-radius:10px; padding:11px 13px; }
.rd-stats span{ display:block; font-size:.71rem; color:var(--faint); }
.rd-stats b{ font-family:var(--mono); font-size:1rem; color:var(--text);
  font-weight:500; word-break:break-word; }

/* numbers */
.rd-nums{ display:flex; gap:8px; flex-wrap:wrap; }
.rd-nums span{ background:var(--cat-soft); color:var(--cat);
  font-family:var(--mono); font-size:1.15rem; font-weight:600;
  padding:9px 16px; border-radius:10px; }

/* dice */
.rd-dice{ display:flex; gap:12px; flex-wrap:wrap; }
.rd-die{ width:64px; height:64px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:12px; display:grid;
  grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  padding:9px; gap:3px; animation:rise .25s ease-out; }
.rd-die i{ border-radius:50%; }
.rd-die i.on{ background:var(--cat); }
.rd-poly{ display:flex; flex-direction:column; align-items:center;
  justify-content:center; }
.rd-poly b{ font-family:var(--mono); font-size:1.5rem; color:var(--cat);
  font-weight:600; line-height:1; }
.rd-poly em{ font-style:normal; font-size:.66rem; color:var(--faint); }

/* coins */
.rd-coins{ display:flex; gap:8px; flex-wrap:wrap; }
.rd-coin{ width:44px; height:44px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-family:var(--mono);
  font-size:1.1rem; font-weight:600; background:var(--cat-soft);
  color:var(--cat); border:1px solid var(--cat-edge);
  animation:rise .25s ease-out; }
.rd-coin.is-t{ background:var(--surface-2); color:var(--muted);
  border-color:var(--line); }
.rd-bar{ height:22px; background:var(--surface-2); border-radius:11px;
  overflow:hidden; }
.rd-bar i{ display:block; height:100%; background:var(--cat); }
.rd-seq{ font-family:var(--mono); font-size:.76rem; color:var(--faint);
  line-height:1.8; margin:12px 0 0; letter-spacing:.14em; }

/* picker */
.rd-picked{ display:grid; gap:8px; }
.rd-picked div{ background:var(--surface-2); border-radius:10px;
  padding:14px 16px; font-size:1.05rem; color:var(--text-dim);
  display:flex; align-items:center; gap:12px; animation:rise .3s ease-out; }
.rd-picked div.is-first{ background:var(--cat-soft); color:var(--cat);
  font-weight:600; font-size:1.2rem; }
.rd-picked i{ font-style:normal; font-family:var(--mono); font-size:.75rem;
  color:var(--faint); min-width:18px; }

/* teams */
.rd-teams{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px; }
.rd-team{ background:var(--surface-2); border-radius:10px; padding:14px; }
.rd-team h4{ font-size:.85rem; margin:0 0 9px; color:var(--cat);
  display:flex; justify-content:space-between; }
.rd-team h4 span{ font-family:var(--mono); font-size:.72rem; color:var(--faint); }
.rd-team ul{ list-style:none; margin:0; padding:0; }
.rd-team li{ font-size:.88rem; color:var(--text-dim); padding:4px 0;
  border-bottom:1px solid var(--line-soft); }
.rd-team li:last-child{ border-bottom:0; }

/* passwords */
.rd-pw{ display:grid; gap:8px; }
.rd-pw code{ background:var(--surface-2); border-radius:9px; padding:12px 14px;
  font-family:var(--mono); font-size:1rem; color:var(--text); cursor:pointer;
  word-break:break-all; letter-spacing:.04em; }
.rd-pw code:hover{ background:var(--cat-soft); color:var(--cat); }
.rd-pw code.is-copied{ color:var(--mint); }

/* ==========================================================================
   Sizes & standards
   ========================================================================== */

.sz{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); }
.sz-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px; align-items:end; }
.sz-f label{ display:block; font-size:.78rem; font-weight:600; color:var(--muted);
  margin-bottom:6px; }
.sz input[type="text"],.sz select{ width:100%; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font-size:1rem; padding:11px 13px; }
.sz input[type="text"]{ font-family:var(--mono); }
.sz select{ font-size:.92rem; }
.sz input:focus,.sz select:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.sz-quick{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.sz-quick button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font:inherit; font-size:.79rem;
  padding:5px 13px; cursor:pointer; }
.sz-quick button:hover{ border-color:var(--cat); color:var(--cat); }
.sz-out{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.sz-big{ font-size:1.15rem; line-height:1.6; color:var(--text-dim); }
.sz-big b{ font-family:var(--mono); font-size:1.6rem; color:var(--cat);
  font-weight:500; }
.sz-sub{ margin:8px 0 0; font-size:.86rem; color:var(--faint); }
.sz-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  gap:10px; margin-top:18px; }
.sz-cards div{ background:var(--surface-2); border-radius:10px; padding:12px 14px; }
.sz-cards span{ display:block; font-size:.72rem; color:var(--faint); }
.sz-cards b{ font-family:var(--mono); font-size:1.05rem; color:var(--text);
  font-weight:500; }
.sz-note{ margin:16px 0 0; font-size:.87rem; color:var(--muted); line-height:1.75; }
.sz-table{ margin-top:20px; }
.sz-wrap{ max-height:340px; overflow:auto; border:1px solid var(--line-soft);
  border-radius:10px; }
.sz-wrap table{ width:100%; border-collapse:collapse; font-size:.84rem; }
.sz-wrap th{ position:sticky; top:0; background:var(--surface-2);
  text-align:left; font-size:.73rem; color:var(--muted); font-weight:600;
  padding:9px 12px; border-bottom:1px solid var(--line); }
.sz-wrap td{ padding:8px 12px; border-bottom:1px solid var(--line-soft);
  color:var(--text-dim); font-family:var(--mono); }
.sz-wrap tr:last-child td{ border-bottom:0; }
.sz-wrap tr.is-on td{ background:var(--cat-soft); color:var(--cat);
  font-weight:600; }

/* ==========================================================================
   Screen & display
   ========================================================================== */

.dp2{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); }
.dp2-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:14px; align-items:end; }
.dp2-f label{ display:block; font-size:.78rem; font-weight:600;
  color:var(--muted); margin-bottom:6px; }
.dp2-f label span{ font-weight:400; color:var(--faint); }
.dp2 input[type="text"],.dp2 select{ width:100%; background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font-size:1rem; padding:11px 13px; }
.dp2 input[type="text"]{ font-family:var(--mono); }
.dp2 select{ font-size:.92rem; }
.dp2 input:focus,.dp2 select:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.dp2-quick{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.dp2-quick button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font:inherit; font-size:.79rem;
  padding:5px 13px; cursor:pointer; }
.dp2-quick button:hover{ border-color:var(--cat); color:var(--cat); }
.dp2-out{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.dp2-big{ font-size:1.2rem; line-height:1.5; color:var(--text-dim); }
.dp2-big b{ font-family:var(--mono); font-size:1.8rem; color:var(--cat);
  font-weight:500; }
.dp2-sub{ margin:8px 0 0; font-size:.87rem; color:var(--faint); }
.dp2-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
  gap:10px; margin-top:18px; }
.dp2-cards div{ background:var(--surface-2); border-radius:10px; padding:12px 14px; }
.dp2-cards span{ display:block; font-size:.72rem; color:var(--faint); }
.dp2-cards b{ font-family:var(--mono); font-size:1.02rem; color:var(--text);
  font-weight:500; word-break:break-word; }
.dp2-note{ margin:16px 0 0; font-size:.87rem; color:var(--muted);
  line-height:1.75; }
.dp2-extra{ margin-top:20px; }
.dp2-h{ font-size:.8rem; font-weight:600; color:var(--muted); margin:0 0 10px; }
.dp2-wrap{ max-height:320px; overflow:auto; border:1px solid var(--line-soft);
  border-radius:10px; }
.dp2-wrap table{ width:100%; border-collapse:collapse; font-size:.83rem; }
.dp2-wrap th{ position:sticky; top:0; background:var(--surface-2);
  text-align:left; font-size:.73rem; color:var(--muted); font-weight:600;
  padding:9px 12px; border-bottom:1px solid var(--line); }
.dp2-wrap td{ padding:8px 12px; border-bottom:1px solid var(--line-soft);
  color:var(--text-dim); font-family:var(--mono); }
.dp2-wrap tr:last-child td{ border-bottom:0; }
.dp2-wrap tr.is-on td{ background:var(--cat-soft); color:var(--cat);
  font-weight:600; }
.dp2-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.dp2-chips span{ background:var(--surface-2); border-radius:999px;
  padding:6px 14px; font-family:var(--mono); font-size:.8rem;
  color:var(--text-dim); }

/* ==========================================================================
   Reference charts
   ========================================================================== */

.rf{ background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--cat); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); }
.rf-top{ display:flex; gap:12px; flex-wrap:wrap; align-items:end;
  margin-bottom:16px; }
.rf-f label{ display:block; font-size:.78rem; font-weight:600;
  color:var(--muted); margin-bottom:6px; }
.rf input[type="text"],.rf select{ background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font-size:1rem; padding:11px 13px; min-width:190px; }
.rf input:focus,.rf select:focus{ outline:none; border-color:var(--cat);
  box-shadow:0 0 0 3px var(--cat-soft); }
.rf-quick{ display:flex; gap:7px; flex-wrap:wrap; }
.rf-quick button{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font:inherit; font-size:.79rem;
  padding:6px 13px; cursor:pointer; }
.rf-quick button:hover{ border-color:var(--cat); color:var(--cat); }
.rf-out{ margin-top:18px; }
.rf-wait{ margin:0; color:var(--faint); font-size:.92rem; }
.rf-note{ margin:16px 0 0; font-size:.87rem; color:var(--muted); line-height:1.75; }
.rf-big{ font-family:var(--mono); font-size:2.6rem; color:var(--cat);
  font-weight:500; letter-spacing:.05em; word-break:break-all; }
.rf-note-in{ margin:8px 0 0; font-size:.86rem; color:var(--muted); }
.rf-note-in b{ font-family:var(--mono); color:var(--text); }

/* tables */
.rf-wrap{ max-height:460px; overflow:auto; border:1px solid var(--line-soft);
  border-radius:10px; }
.rf-wrap.rf-tall{ max-height:560px; }
.rf-wrap table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.rf-wrap th{ position:sticky; top:0; background:var(--surface-2);
  text-align:left; font-size:.73rem; color:var(--muted); font-weight:600;
  padding:9px 12px; border-bottom:1px solid var(--line); z-index:1; }
.rf-wrap td{ padding:8px 12px; border-bottom:1px solid var(--line-soft);
  color:var(--text-dim); }
.rf-wrap tr:last-child td{ border-bottom:0; }
.rf-wrap tr.is-dim{ opacity:.3; }
.rf-wrap tr.is-on td{ background:var(--cat-soft); color:var(--cat); }
.rf-wrap tr.is-base td{ background:var(--surface-2); font-weight:600; }
.rf-sym,.rf-rn{ font-family:var(--mono); color:var(--text); }
.rf-gl{ font-size:1.3rem; color:var(--cat); font-weight:500; }
.rf-say{ font-family:var(--mono); font-size:.76rem; color:var(--faint); }
.rf-use{ font-size:.8rem; color:var(--muted); }
.rf-ch{ font-family:var(--mono); font-size:1.05rem; color:var(--cat);
  font-weight:600; }

/* times table */
.rf-times td,.rf-times th{ text-align:center; padding:6px 8px;
  font-family:var(--mono); font-size:.8rem; }
.rf-times tbody th{ position:sticky; left:0; background:var(--surface-2);
  color:var(--cat); font-weight:600; }
.rf-times td.is-sq{ background:var(--cat-soft); color:var(--cat);
  font-weight:600; }

/* periodic table */
.rf-ptable{ display:grid; grid-template-columns:repeat(18,minmax(38px,1fr));
  gap:3px; min-width:760px; }
.rf-el{ aspect-ratio:1; border:1px solid var(--line); border-radius:5px;
  background:var(--surface-2); cursor:pointer; padding:2px;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; overflow:hidden; font:inherit;
  transition:transform .1s; }
.rf-el:hover{ transform:scale(1.12); z-index:2; }
.rf-el.is-on{ outline:2px solid var(--cat); outline-offset:1px; z-index:2; }
.rf-el.is-dim{ opacity:.18; }
.rf-el i{ font-style:normal; font-family:var(--mono); font-size:.52rem;
  color:var(--faint); line-height:1; }
.rf-el b{ font-family:var(--mono); font-size:.82rem; line-height:1.2;
  color:var(--text); }
.rf-el em{ font-style:normal; font-size:.38rem; color:var(--faint);
  line-height:1; text-align:center; overflow:hidden; max-width:100%; }
.rf-scroll{ overflow-x:auto; padding-bottom:6px; }
.rf-legend{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.rf-legend span{ font-size:.7rem; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); }
.rf-detail{ display:flex; gap:18px; align-items:flex-start; padding:18px;
  border-radius:12px; border:1px solid var(--line); flex-wrap:wrap; }
.rf-d-sym{ text-align:center; min-width:86px; }
.rf-d-sym i{ font-style:normal; display:block; font-family:var(--mono);
  font-size:.8rem; color:var(--muted); }
.rf-d-sym b{ font-family:var(--mono); font-size:2.8rem; line-height:1.1;
  color:var(--text); }
.rf-d-info{ flex:1; min-width:220px; }
.rf-d-info h3{ margin:0 0 12px; font-size:1.25rem; }
.rf-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:9px; }
.rf-cards div{ background:var(--surface); border-radius:9px; padding:9px 11px;
  border:1px solid var(--line-soft); }
.rf-cards span{ display:block; font-size:.68rem; color:var(--faint); }
.rf-cards b{ font-family:var(--mono); font-size:.92rem; color:var(--text);
  font-weight:500; }

/* element colours, tuned for contrast in both themes */
.rf-alkali{ background:#fde7e7; border-color:#f3b5b5; }
.rf-alkaline{ background:#fdf0dd; border-color:#f0cf9a; }
.rf-transition{ background:#e8eefb; border-color:#b6c8ea; }
.rf-post{ background:#e9f2ee; border-color:#b4d2c4; }
.rf-metalloid{ background:#f2ecfb; border-color:#cebdea; }
.rf-nonmetal{ background:#e6f4f6; border-color:#a8d5dd; }
.rf-halogen{ background:#fbecf5; border-color:#e9bcd8; }
.rf-noble{ background:#eef0f5; border-color:#c3c9d6; }
.rf-lanthanide{ background:#fdf2e3; border-color:#eecfa0; }
.rf-actinide{ background:#f7ece3; border-color:#e0c3a6; }
.rf-unknown{ background:var(--surface-2); border-color:var(--line); }
[data-theme="dark"] .rf-alkali{ background:#3a2020; border-color:#6b3434; }
[data-theme="dark"] .rf-alkaline{ background:#3a2e1a; border-color:#6b5226; }
[data-theme="dark"] .rf-transition{ background:#1e2840; border-color:#36486e; }
[data-theme="dark"] .rf-post{ background:#1c2f28; border-color:#2f5246; }
[data-theme="dark"] .rf-metalloid{ background:#2b2440; border-color:#4b3d6e; }
[data-theme="dark"] .rf-nonmetal{ background:#17313a; border-color:#255463; }
[data-theme="dark"] .rf-halogen{ background:#3a1f31; border-color:#6a3557; }
[data-theme="dark"] .rf-noble{ background:#262b36; border-color:#414a5c; }
[data-theme="dark"] .rf-lanthanide{ background:#3b2f1d; border-color:#6d552f; }
[data-theme="dark"] .rf-actinide{ background:#372a20; border-color:#654c39; }
@media (max-width:560px){ .rf{ padding:14px 12px; } }