@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../vendor/inter/inter-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../vendor/inter/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../vendor/inter/inter-greek-ext.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../vendor/inter/inter-greek.woff2") format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../vendor/inter/inter-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../vendor/inter/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../vendor/inter/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg: #ffffff;
  --surface: #f3f5f8;
  --surface-2: #e8ecf1;
  --card: #ffffff;
  --text: #111827;
  --muted: #4b5563;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-text: #ffffff;
  --primary-tint: #eff6ff;
  --link: #1d4ed8;
  --focus: #2563eb;
  --success: #166534;
  --success-bg: #f0fdf4;
  --success-border: #bbf7d0;
  --warning: #854d0e;
  --warning-bg: #fefce8;
  --warning-border: #fde68a;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --overlay: rgba(17, 24, 39, 0.5);
  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 4px 16px rgba(17, 24, 39, 0.06);
  --shadow-lg: 0 10px 40px rgba(17, 24, 39, 0.18);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --topbar-h: 60px;
  --sidebar-w: 264px;
  --rail-w: 68px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f172a;
    --surface: #162033;
    --surface-2: #1e293b;
    --card: #131c2e;
    --text: #e5e7eb;
    --muted: #a1aab8;
    --border: #253148;
    --border-strong: #344158;
    --primary: #60a5fa;
    --primary-hover: #93c5fd;
    --primary-text: #0b1220;
    --primary-tint: #172554;
    --link: #93c5fd;
    --focus: #93c5fd;
    --success: #86efac;
    --success-bg: #0f2a1c;
    --success-border: #1f5136;
    --warning: #fcd34d;
    --warning-bg: #2a2410;
    --warning-border: #5c4a16;
    --danger: #fca5a5;
    --danger-bg: #2c1316;
    --danger-border: #5f2228;
    --overlay: rgba(0, 0, 0, 0.6);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 24px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #162033;
  --surface-2: #1e293b;
  --card: #131c2e;
  --text: #e5e7eb;
  --muted: #a1aab8;
  --border: #253148;
  --border-strong: #344158;
  --primary: #60a5fa;
  --primary-hover: #93c5fd;
  --primary-text: #0b1220;
  --primary-tint: #172554;
  --link: #93c5fd;
  --focus: #93c5fd;
  --success: #86efac;
  --success-bg: #0f2a1c;
  --success-border: #1f5136;
  --warning: #fcd34d;
  --warning-bg: #2a2410;
  --warning-border: #5c4a16;
  --danger: #fca5a5;
  --danger-bg: #2c1316;
  --danger-border: #5f2228;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
img, svg, canvas, video { max-width: 100%; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.75rem, 3.6vw, 2.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); letter-spacing: -0.01em; }
h3 { font-size: 1.0625rem; }
p { margin: 0 0 1em; }
code, kbd { font-family: var(--mono); font-size: 0.875em; }
code { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.05em 0.35em; }
kbd { background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0 0.4em; color: var(--muted); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100;
  background: var(--primary); color: var(--primary-text);
  padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 12px; }
.break { overflow-wrap: anywhere; word-break: break-word; }

.icon { width: 22px; height: 22px; flex: none; vertical-align: middle; }
.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 18px; height: 18px; }
.icon-lg { width: 30px; height: 30px; }
.icon-xl { width: 46px; height: 46px; }

.topbar { position: sticky; top: 0; z-index: 40; background: var(--card); border-bottom: 1px solid var(--border); }
.topbar-inner { display: flex; align-items: center; gap: 6px; height: var(--topbar-h); padding: 0 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; min-height: 44px; min-width: 0; }
.topbar .brand { flex: 0 1 auto; margin-inline-end: 8px; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer;
}
.icon-btn:hover { background: var(--surface); }
.sidebar-toggle .toggle-icon-narrow { display: none; }

.hsearch { position: relative; flex: 1 1 0; min-width: 0; max-width: 560px; margin: 0 auto; display: flex; align-items: center; }
.hsearch-toggle { display: none; }
.hsearch-box {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding-inline: 14px 8px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--muted);
}
.hsearch-box:hover { border-color: var(--border-strong); }
.hsearch-box:focus-within { border-color: var(--focus); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.hsearch-icon { flex: none; }
.hsearch-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 0.9375rem; }
.hsearch-input:focus { outline: none; }
.hsearch-input::placeholder { color: var(--muted); opacity: 1; }
.hsearch-input::-webkit-search-decoration, .hsearch-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-kbd { flex: none; font-size: 0.75rem; }
.hsearch-box:focus-within .search-kbd { display: none; }
.hsearch-close { display: none; width: 36px; height: 36px; }
.hsearch-panel {
  position: absolute; z-index: 45; top: calc(100% + 8px); inset-inline-end: 0;
  width: max(100%, 420px); max-width: calc(100vw - 24px); max-height: min(70vh, 560px);
  display: flex; flex-direction: column; background: var(--card); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden;
}
.hsearch-panel[hidden] { display: none; }
.hsearch-panel .search-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.hsearch-panel .search-results[hidden] { display: none; }
.hsearch-panel .search-empty { flex: none; }
.hsearch-panel .search-foot { flex: none; }
@media (max-width: 1279px) { .hsearch-panel .search-foot-keys { display: none; } }
@media (hover: none) { .search-kbd { display: none; } }
@media (max-width: 640px) {
  .hsearch { flex: none; max-width: none; margin: 0; position: static; }
  .hsearch-toggle { display: inline-flex; }
  .hsearch-box, .search-kbd { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  :root:not([data-nav="left"]):not([data-nav="right"]) .hsearch { flex: none; max-width: none; margin-inline: auto 0; position: static; }
  :root:not([data-nav="left"]):not([data-nav="right"]) .hsearch-toggle { display: inline-flex; }
  :root:not([data-nav="left"]):not([data-nav="right"]) .hsearch-box { display: none; }
}

:root .topbar.is-searching .topbar-inner > :not(.hsearch) { display: none; }
:root .topbar.is-searching .topbar-inner > .hsearch { flex: 1 1 auto; max-width: none; margin: 0; position: relative; }
:root .topbar.is-searching .hsearch-toggle { display: none; }
:root .topbar.is-searching .hsearch-box { display: flex; }
:root .topbar.is-searching .hsearch-close { display: inline-flex; }
:root .topbar.is-searching .hsearch-panel { inset-inline: 0; width: auto; max-width: none; max-height: calc(100dvh - var(--topbar-h) - 24px); }
.theme-btn .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-btn .theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-btn .theme-icon-light { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .theme-icon-dark { display: none; }
  :root:not([data-theme="light"]) .theme-btn .theme-icon-light { display: inline; }
}
@media (max-width: 640px) {
  .topbar-inner { gap: 4px; padding: 0 8px; }
  .topbar .brand { margin-inline-end: auto; }
}
@media (max-width: 389px) {
  .topbar-inner { gap: 2px; padding: 0 6px; }
  .topbar .icon-btn { width: 40px; height: 40px; }
  .topbar .brand { gap: 7px; margin-inline-end: auto; font-size: 0.9375rem; }
  .topbar .brand-mark { width: 26px; height: 26px; }
}

.app { display: flex; align-items: flex-start; }
.app-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-h)); }
.app-content > main { flex: 1 0 auto; width: 100%; }

.sidebar {
  position: sticky; top: var(--topbar-h); z-index: 30; flex: none;
  display: flex; flex-direction: column;
  width: var(--sidebar-w); height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h));
  background: var(--card); border-right: 1px solid var(--border);
}
.sidebar-head { display: none; }
.sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 10px 10px 14px; overscroll-behavior: contain; scrollbar-width: thin; }
.sidebar-foot { flex: none; padding: 6px 10px 10px; border-top: 1px solid var(--border); }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side-row { display: flex; align-items: center; gap: 2px; }
.side-row > .side-link { flex: 1 1 auto; min-width: 0; }
.side-link {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--text);
  font: inherit; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; text-align: start; text-decoration: none; cursor: pointer;
}
.side-link .icon { color: var(--muted); }
.side-link:hover { background: var(--surface); }
.side-link[aria-current="page"] { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
.side-link[aria-current="page"] .icon { color: inherit; }
.side-label { min-width: 0; overflow-wrap: anywhere; }
.side-group[data-cat] > .side-row .icon:first-child { color: var(--cat, var(--muted)); }
.side-count { margin-inline-start: auto; padding-inline-start: 6px; font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.side-kbd { margin-inline-start: auto; font-size: 0.6875rem; }
.side-expand {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
}
.side-expand:hover { background: var(--surface); color: var(--text); }
.side-expand .icon { transition: transform 0.15s; }
.side-expand[aria-expanded="true"] .icon { transform: rotate(90deg); }
.side-sublist { list-style: none; margin-block: 2px 8px; margin-inline: 21px 0; padding-block: 0; padding-inline: 10px 0; border-inline-start: 1px solid var(--border); display: grid; gap: 1px; }
.side-sublink {
  display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 10px; border-radius: 8px;
  color: var(--muted); font-size: 0.875rem; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere;
}
.side-sublink:hover { background: var(--surface); color: var(--text); }
.side-sublink[aria-current="page"] { background: var(--cat-bg, var(--primary-tint)); color: var(--cat, var(--primary)); font-weight: 600; }
.side-empty { padding: 6px 10px; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
.side-heading { margin: 16px 10px 4px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.side-heading-line { height: 1px; margin: 12px 10px; background: var(--border); }
.side-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 6px 10px; font-size: 0.8125rem; line-height: 1.4; color: var(--success); }
.side-note .icon { margin-top: 2px; }
.side-hide { min-height: 36px; color: var(--muted); font-size: 0.875rem; }
.soon-pill {
  display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600;
  line-height: 1.7; white-space: nowrap; border: 1px solid var(--border-strong); color: var(--muted); background: var(--surface);
  vertical-align: middle;
}
.side-tip {
  position: fixed; z-index: 70; transform: translateY(-50%); max-width: 260px; padding: 5px 10px;
  border-radius: 8px; background: var(--text); color: var(--bg); font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
  pointer-events: none; box-shadow: var(--shadow);
}

@media (min-width: 1024px) {
  .sidebar-ready .sidebar { transition: width 0.18s var(--ease-out); }
  [data-sidebar="collapsed"] .sidebar { width: var(--rail-w); }
  [data-sidebar="collapsed"] .sidebar-scroll { scrollbar-width: none; }
  [data-sidebar="collapsed"] .sidebar-scroll::-webkit-scrollbar { display: none; }
  [data-sidebar="collapsed"] .side-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  [data-sidebar="collapsed"] .side-link { justify-content: center; gap: 0; padding: 10px 0; }
  [data-sidebar="collapsed"] .side-count, [data-sidebar="collapsed"] .side-kbd,
  [data-sidebar="collapsed"] .side-expand, [data-sidebar="collapsed"] .side-sublist { display: none; }
  [data-sidebar="collapsed"] .side-heading { height: 1px; margin: 10px 6px; background: var(--border); }
  [data-sidebar="collapsed"] .side-note { justify-content: center; padding: 6px 0; }
  [data-sidebar="hidden"] .sidebar { display: none; }
}
@media (max-width: 1023.98px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; height: 100%;
    width: min(330px, calc(100vw - 40px)); box-shadow: var(--shadow-lg);
    transform: translateX(-105%); visibility: hidden;
    transition: transform 0.22s var(--ease-out), visibility 0s linear 0.22s;
  }
  .sidebar.is-open { transform: none; visibility: visible; transition: transform 0.22s var(--ease-out); }
  .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--topbar-h); padding-block: 0; padding-inline: 14px 8px; border-bottom: 1px solid var(--border); }
  .side-hide { display: none; }
  .sidebar-toggle .toggle-icon-wide { display: none; }
  .sidebar-toggle .toggle-icon-narrow { display: inline; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 55; background: var(--overlay); }
  body.has-drawer { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar.is-open, .sidebar-ready .sidebar { transition: none; }
}

dialog { color: var(--text); }
dialog::backdrop { background: var(--overlay); }
.search-results { list-style: none; margin: 0; padding: 6px 8px 8px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.search-group { list-style: none; margin: 0 0 4px; }
.search-group-label { display: block; padding: 8px 10px 4px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.search-group-list { list-style: none; margin: 0; padding: 0; }
.search-result { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.search-result.is-active { background: var(--primary-tint); }
.search-result-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cat-bg, var(--primary-tint)); color: var(--cat, var(--primary)); }
.search-result-body { flex: 1 1 auto; min-width: 0; }
.search-result-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font-weight: 600; line-height: 1.35; }
.search-result-name { min-width: 0; overflow-wrap: anywhere; }
.search-result-text { display: block; margin-top: 1px; font-size: 0.875rem; color: var(--muted); line-height: 1.4; }
.search-result.is-soon { opacity: 0.7; }
.search-empty { padding: 16px; margin: 0; color: var(--muted); }
.search-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--muted); }
.search-foot-privacy { display: inline-flex; align-items: center; gap: 6px; color: var(--success); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none;
  cursor: pointer; white-space: normal;
}
.btn-lg { min-height: 52px; padding: 12px 24px; font-size: 1.0625rem; }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 0.875rem; border-width: 1px; }
.btn-primary { background: var(--primary); color: var(--primary-text); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface); }
.btn-ghost { background: transparent; color: var(--text); border-color: transparent; }
.btn-ghost:hover { background: var(--surface); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger-border); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field-label { font-weight: 600; font-size: 0.9375rem; }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); font: inherit;
}
.textarea { min-height: 180px; resize: vertical; font-family: var(--mono); font-size: 0.9rem; line-height: 1.5; }
.textarea.textarea-prose { font-family: var(--font); font-size: 1rem; }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.input[type="color"] { padding: 4px; width: 64px; }
input[type="range"] { width: 100%; accent-color: var(--primary); min-height: 32px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--primary); flex: none; margin: 2px 0 0; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.option-help { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.field-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.segmented { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.segmented legend { font-weight: 600; font-size: 0.9375rem; margin-bottom: 6px; padding: 0; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); font-weight: 500;
}
.segmented input:checked + label { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.segmented input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }

.fixed-output { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.fixed-output strong {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-weight: 600;
}
.setting-group { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 12px; }
.setting-group legend { font-weight: 600; padding: 0 6px; }
.radio-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.radio-row label { cursor: pointer; font-weight: 500; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.notice { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 12px 16px; margin: 16px 0; }
.notice > :last-child { margin-bottom: 0; }
.notice-success { background: var(--success-bg); border-color: var(--success-border); }
.notice-warning { background: var(--warning-bg); border-color: var(--warning-border); }
.notice-error { background: var(--danger-bg); border-color: var(--danger-border); }
.notice-error .step-title, .notice-error strong { color: var(--danger); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.badge-sensitive { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.badge-ok { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.badge-warn { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.badge-neutral { background: var(--surface); color: var(--muted); border: 1px solid var(--border-strong); }
.hint { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.mono { font-family: var(--mono); font-size: 0.875rem; }

.breadcrumbs ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.875rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-block: 0; margin-inline: 2px 6px; color: var(--border-strong); }
.breadcrumbs a { color: var(--muted); }
.page-head { margin-bottom: 20px; }
.page-head h1 { margin-bottom: 8px; }
.lead { font-size: 1.125rem; color: var(--muted); max-width: 720px; }
.local-badge {
  display: inline-flex; align-items: flex-start; gap: 8px; margin: 0;
  padding: 6px 14px; border-radius: 999px; font-weight: 500; font-size: 0.9375rem;
  background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border);
}
.local-badge .icon { margin-top: 2px; }
.content-section { margin-top: 44px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.section-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; min-height: 44px; }
.section-lead { color: var(--muted); max-width: 720px; }
.steps { padding-inline-start: 1.4em; display: grid; gap: 6px; }
.bullets { padding-inline-start: 1.3em; display: grid; gap: 4px; }
.faq-item { padding: 14px 0; border-top: 1px solid var(--border); }
.faq-item h3 { margin-bottom: 4px; }
.faq-item p { margin: 0; color: var(--muted); }
.prose { max-width: 760px; }
.prose h2 { margin-top: 32px; }
.prose ul { padding-inline-start: 22px; }
.prose li + li { margin-top: 6px; }
.chip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 500; }
.chip:hover { background: var(--surface); }

.hero { padding: 12px 0 8px; }
.eyebrow { display: inline-block; margin-bottom: 10px; font-weight: 600; color: var(--primary); font-size: 0.9375rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); max-width: 820px; }
.hero .lead { font-size: clamp(1.0625rem, 2vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.privacy-band { margin-top: 32px; padding: 24px; border-radius: var(--radius); background: var(--success-bg); border: 1px solid var(--success-border); }
.privacy-band-head { display: flex; gap: 16px; align-items: flex-start; }
.privacy-band-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--card); color: var(--success); border: 1px solid var(--success-border); }
.privacy-band h2 { margin-bottom: 4px; }
.privacy-band p { margin: 0; }
.privacy-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.privacy-points li { display: flex; gap: 10px; align-items: flex-start; }
.privacy-points .icon { margin-top: 3px; color: var(--success); }
.privacy-points h3 { margin: 0 0 2px; font-size: 1rem; }
.privacy-points p { color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 480px) { .privacy-band { padding: 18px; } .privacy-band-head { flex-direction: column; gap: 10px; } }
.how-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.how-item { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.how-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--primary-text); font-weight: 700; margin-bottom: 8px; }
.how-item p { margin: 0; color: var(--muted); }

.tool-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.tool-card-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: start; height: 100%;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
  color: var(--text); text-decoration: none;
}
a.tool-card-link:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.tool-card-icon { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--primary-tint); color: var(--primary); }
.tool-card-title { margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 600; }
.tool-card-text { font-size: 0.875rem; color: var(--muted); line-height: 1.45; }
.tool-card.is-soon .tool-card-link { background: var(--surface); }
.tool-card.is-soon .tool-card-icon { background: var(--surface-2); color: var(--muted); }
.filter-box { position: relative; margin-top: 16px; max-width: 460px; }
.filter-box .icon { position: absolute; inset-inline-start: 12px; top: 13px; color: var(--muted); }
.filter-input { width: 100%; min-height: 44px; padding-block: 8px; padding-inline: 38px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font: inherit; }

.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin: 12px 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th, .data-table td { text-align: start; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.data-table thead th { background: var(--surface); border-top: 0; font-size: 0.875rem; color: var(--muted); }
.data-table tbody th { font-weight: 600; }
@media (max-width: 640px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; width: 100%; }
  .data-table tr { border-top: 1px solid var(--border); padding: 10px 14px; }
  .data-table tbody tr:first-child { border-top: 0; }
  .data-table th, .data-table td { border: 0; padding: 2px 0; }
  .data-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--text); }
}

.tool-app { padding: 22px; margin-top: 4px; }
@media (max-width: 480px) { .tool-app { padding: 14px; } }
.step-title { font-size: 1.3125rem; margin-bottom: 8px; }
.step-title:focus { outline: none; }
.section-title { font-size: 1.0625rem; margin: 22px 0 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; align-items: center; }
.actions + .hint { margin-top: 12px; }
@media (max-width: 480px) { .actions .btn { width: 100%; } }

.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface); padding: 36px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer;
}
.dropzone.is-dragover { border-color: var(--primary); background: var(--primary-tint); }
.dropzone-icon { color: var(--primary); }
.dropzone-title { font-size: 1.125rem; font-weight: 600; margin: 0; }
.dropzone-or { color: var(--muted); margin: 0; }
.dropzone .btn { margin: 2px 0 6px; }
.dropzone-badge { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 0.875rem; font-weight: 500; color: var(--success); }
.dropzone.is-compact { padding: 16px; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.dropzone.is-compact .dropzone-icon, .dropzone.is-compact .dropzone-or, .dropzone.is-compact .hint, .dropzone.is-compact .dropzone-badge { display: none; }
.dropzone.is-compact .btn { min-height: 44px; padding: 8px 18px; font-size: 1rem; margin: 0; }
@media (hover: none) and (pointer: coarse) {
  .dropzone-title, .dropzone-or { display: none; }
  .dropzone { padding: 28px 14px; }
}

.options-grid { display: grid; gap: 16px; margin-top: 18px; }
.options-grid + .hint { margin-top: 12px; }
.advanced { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.advanced > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.advanced-body { display: grid; gap: 16px; padding: 4px 14px 16px; }

.queue { list-style: none; margin: 18px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.queue-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); }
.queue-item:first-child { border-top: 0; }
.queue-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--surface); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.queue-name { font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; }
.queue-meta { font-size: 0.875rem; color: var(--muted); overflow-wrap: anywhere; }
.queue-meta .ok { color: var(--success); font-weight: 600; }
.queue-meta .err { color: var(--danger); font-weight: 600; }
.queue-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 520px) {
  .queue-item { grid-template-columns: 44px minmax(0, 1fr); }
  .queue-thumb { width: 44px; height: 44px; }
  .queue-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.queue-toolbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-top: 18px; }
.summary-box { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--success-border); background: var(--success-bg); border-radius: var(--radius-sm); }
.summary-box p { margin: 0; }
.stat-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; }
.stat { display: grid; }
.stat-label { font-size: 0.8125rem; color: var(--muted); }
.stat-value { font-weight: 700; font-size: 1.0625rem; }

.local-note { display: flex; align-items: center; gap: 8px; color: var(--success); font-weight: 500; }
.progress-steps { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; counter-reset: step; }
.progress-steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); counter-increment: step; }
.progress-steps li::before {
  content: counter(step); flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-strong); font-size: 0.875rem; font-weight: 700;
}
.progress-steps li.is-active { color: var(--text); font-weight: 600; }
.progress-steps li.is-active::before { border-color: var(--primary); color: var(--primary); }
.progress-steps li.is-done { color: var(--text); }
.progress-steps li.is-done::before { content: "\2713"; background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
progress { width: 100%; height: 10px; accent-color: var(--primary); }

.file-summary { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0 8px; }
.file-thumb { width: 88px; height: 88px; object-fit: cover; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.file-icon { width: 88px; height: 88px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.file-icon[data-kind="image"] .kind-video, .file-icon[data-kind="video"] .kind-image { display: none; }
.facts, .results { margin: 0; display: grid; gap: 6px; min-width: 0; flex: 1; }
.fact, .result-row { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 12px; }
.facts dt, .results dt { color: var(--muted); }
.facts dd, .results dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .file-summary { flex-direction: column; }
  .file-thumb, .file-icon { width: 64px; height: 64px; }
  .fact, .result-row { grid-template-columns: 1fr; gap: 0; }
}
.meta-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.meta-list li { padding: 12px 14px; border-top: 1px solid var(--border); }
.meta-list li:first-child { border-top: 0; }
.meta-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.meta-label { font-weight: 600; }
.meta-count { color: var(--muted); font-size: 0.875rem; }
.meta-value { margin: 4px 0 0; color: var(--muted); font-size: 0.9375rem; overflow-wrap: anywhere; word-break: break-word; }
.meta-note { margin: 4px 0 0; font-size: 0.875rem; color: var(--muted); }
.meta-total { margin: 12px 0 0; font-weight: 600; }
.meta-list-kept li { background: var(--surface); }
.options { margin: 20px 0 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.options summary { cursor: pointer; padding: 12px 14px; font-weight: 600; min-height: 44px; }
.option { display: flex; gap: 12px; align-items: flex-start; padding: 8px 14px 14px; }
.option label { font-weight: 600; cursor: pointer; }
.result-head { display: flex; align-items: center; gap: 10px; color: var(--success); }
.result-head .step-title { margin: 0; color: var(--text); }
.result-sub { color: var(--muted); margin: 6px 0 16px; }
.results { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.results .is-good { color: var(--success); }
.notes { margin: 16px 0 0; padding-inline-start: 20px; color: var(--muted); font-size: 0.9375rem; }
.notes li + li { margin-top: 6px; }

.kv-section { margin-top: 18px; }
.kv-section h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.kv { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.kv-row { display: grid; grid-template-columns: minmax(130px, 34%) minmax(0, 1fr); gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border); }
.kv-row:first-child { border-top: 0; }
.kv-row dt { color: var(--muted); overflow-wrap: anywhere; }
.kv-row dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
@media (max-width: 480px) { .kv-row { grid-template-columns: 1fr; gap: 0; } }

.output-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 6px; }
.output-head h3, .output-head label { margin: 0; font-size: 1rem; font-weight: 600; }
.copy-status { font-size: 0.875rem; color: var(--success); }
.preview-img { display: block; max-width: 100%; max-height: 420px; margin: 12px auto 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--card) 0 50%) 0 0 / 20px 20px; }
.error-text { color: var(--danger); font-weight: 600; }
.ok-text { color: var(--success); font-weight: 600; }

.counter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.counter { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.counter-value { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.counter-label { font-size: 0.875rem; color: var(--muted); }
.limit-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.limit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; font-size: 0.9375rem; }
.limit meter { grid-column: 1 / -1; width: 100%; height: 8px; }

.stage { margin-top: 16px; background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden; }
.crop-stage { height: min(60vh, 520px); }
.crop-stage img { display: block; max-width: 100%; }
.video-stage video { display: block; width: 100%; max-height: 60vh; background: #000; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.frames { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.frame { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }
.frame img { display: block; width: 100%; height: auto; }
.frame.is-transparent img { background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--card) 0 50%) 0 0 / 16px 16px; }
.frame-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; padding: 8px 10px; font-size: 0.875rem; }

.page-grid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.page-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.page-chip label { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer; font-weight: 600; background: var(--card); }
.page-chip input:checked + label { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.page-chip input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }

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

.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.code-box { margin: 8px 0 0; padding: 12px 14px; max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
details.more { margin-top: 18px; }
details.more > summary { cursor: pointer; font-weight: 600; }

:root {
  --cat-image: #6d28d9; --cat-image-bg: #f3eefe;
  --cat-video: #be185d; --cat-video-bg: #fdeef5;
  --cat-audio: #c2410c; --cat-audio-bg: #fff1e8;
  --cat-pdf: #b91c1c; --cat-pdf-bg: #fdeeee;
  --cat-file: #0e7490; --cat-file-bg: #e8f7fa;
  --cat-text: #047857; --cat-text-bg: #e8f8f1;
  --cat-dev: #4338ca; --cat-dev-bg: #eef0fe;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-image: #c4b5fd; --cat-image-bg: #241a40;
    --cat-video: #f9a8d4; --cat-video-bg: #3a1528;
    --cat-audio: #fdba74; --cat-audio-bg: #3a2010;
    --cat-pdf: #fca5a5; --cat-pdf-bg: #3a1618;
    --cat-file: #67e8f9; --cat-file-bg: #0f2f38;
    --cat-text: #6ee7b7; --cat-text-bg: #0f3226;
    --cat-dev: #a5b4fc; --cat-dev-bg: #1c1f45;
  }
}
:root[data-theme="dark"] {
  --cat-image: #c4b5fd; --cat-image-bg: #241a40;
  --cat-video: #f9a8d4; --cat-video-bg: #3a1528;
  --cat-audio: #fdba74; --cat-audio-bg: #3a2010;
  --cat-pdf: #fca5a5; --cat-pdf-bg: #3a1618;
  --cat-file: #67e8f9; --cat-file-bg: #0f2f38;
  --cat-text: #6ee7b7; --cat-text-bg: #0f3226;
  --cat-dev: #a5b4fc; --cat-dev-bg: #1c1f45;
}
[data-cat="image"] { --cat: var(--cat-image); --cat-bg: var(--cat-image-bg); }
[data-cat="video"] { --cat: var(--cat-video); --cat-bg: var(--cat-video-bg); }
[data-cat="audio"] { --cat: var(--cat-audio); --cat-bg: var(--cat-audio-bg); }
[data-cat="pdf"] { --cat: var(--cat-pdf); --cat-bg: var(--cat-pdf-bg); }
[data-cat="file"] { --cat: var(--cat-file); --cat-bg: var(--cat-file-bg); }
[data-cat="text"] { --cat: var(--cat-text); --cat-bg: var(--cat-text-bg); }
[data-cat="dev"] { --cat: var(--cat-dev); --cat-bg: var(--cat-dev-bg); }

.tool-card-icon { background: var(--cat-bg, var(--primary-tint)); color: var(--cat, var(--primary)); }
a.tool-card-link:hover { border-color: var(--cat, var(--primary)); }
.tool-grid.is-compact .tool-card-text { font-size: 0.8125rem; }

.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip .icon { color: var(--cat, var(--primary)); }
.chip[aria-current="page"] { background: var(--cat-bg, var(--primary-tint)); border-color: var(--cat, var(--primary)); font-weight: 600; }
.chips-label { margin: 18px 0 8px; font-weight: 600; color: var(--muted); font-size: 0.9375rem; }

.hero-home { padding-top: 20px; }
.hero-home h1 { max-width: 760px; }
.hero-search { position: relative; max-width: 720px; margin-top: 22px; }
.hero-search-box { display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 2px solid var(--border-strong); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.hero-search-box:focus-within { border-color: var(--focus); }
.hero-search-icon { flex: none; color: var(--muted); }
.hero-search-input { flex: 1; min-width: 0; height: 58px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.125rem; }
.hero-search-input:focus { outline: none; }
.hero-search-input::placeholder { color: var(--muted); }
.hero-search-panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; max-height: min(64vh, 520px); background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.hero-search-panel[hidden] { display: none; }
.hero-search-results { flex: 1 1 auto; min-height: 0; }

.search-notes { padding: 10px 12px 0; }
.search-notes[hidden] { display: none; }
.search-note { margin: 0 4px 8px; font-size: 0.875rem; color: var(--muted); }
.search-note strong { color: var(--text); }
.search-help { margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--warning-border); border-radius: var(--radius-sm); background: var(--warning-bg); color: var(--text); font-size: 0.875rem; }
.search-help p { margin: 0; }
.search-help ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.search-help a { font-weight: 600; }
.search-result-via { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--muted); font-style: italic; }
.hero-search-empty { margin: 10px 4px 0; }
@media (max-width: 480px) { .hero-search-input { height: 52px; font-size: 1rem; } }

.search-result-cat { color: var(--cat, var(--muted)); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }

.collection-grid, .category-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.collection-card, .category-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.collection-card p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.collection-card-head, .category-card-head { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.collection-card-head:hover h3, .category-card-head:hover h3 { text-decoration: underline; }
.collection-card-head h3, .category-card-head h3 { margin: 0; font-size: 1.125rem; }
.collection-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--primary-tint); color: var(--primary); }
.collection-count { font-size: 0.8125rem; color: var(--muted); }
.collection-tasks, .category-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.collection-tasks a, .category-links a { display: inline-flex; min-height: 32px; align-items: center; text-decoration: none; }
.collection-tasks a:hover, .category-links a:hover { text-decoration: underline; }
.collection-card .section-link, .category-card .section-link { margin-top: auto; }

.page-drop { position: fixed; inset: 10px; z-index: 100; display: flex; align-items: center; justify-content: center; border: 3px dashed var(--primary); border-radius: 18px; background: color-mix(in srgb, var(--bg) 82%, transparent); pointer-events: none; }
.page-drop[hidden] { display: none; }
.page-drop p { margin: 0; padding: 14px 22px; border-radius: 12px; background: var(--primary); color: var(--primary-text); font-weight: 700; font-size: 1.25rem; }

.icon-mirror { transform: scaleX(-1); }
.page-cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); }
.page-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); cursor: grab; }
.page-card.is-dragging { opacity: 0.4; }
.page-card.drop-before { box-shadow: -4px 0 0 var(--primary); }
.page-card.drop-after { box-shadow: 4px 0 0 var(--primary); }
.page-card-thumb { display: flex; align-items: center; justify-content: center; height: 170px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.page-card-thumb canvas { max-width: 150px; max-height: 150px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); transform: rotate(var(--rot, 0deg)); transition: transform 0.15s; }
.page-card-loading { font-size: 0.8125rem; color: var(--muted); }
.page-card-label { margin: 0; font-size: 0.875rem; font-weight: 600; text-align: center; }
.page-card-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.page-card-btn { min-width: 36px; min-height: 36px; padding: 4px 8px; }
.page-card.is-deleted .page-card-thumb { opacity: 0.35; }
.page-card.is-deleted .page-card-label { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .page-card-thumb canvas { transition: none; } }

.segmented-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.segmented-cards legend { grid-column: 1 / -1; }
.segmented-cards label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: 100%; padding: 10px 14px; border-radius: var(--radius-sm); text-align: start; }
.segmented-cards label span { font-size: 0.8125rem; font-weight: 400; opacity: 0.85; }
.check-grid { display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 10px 0 14px; }

.sign-step { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.sign-step:first-of-type { margin-top: 12px; }
.step-heading { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; margin-bottom: 12px; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--primary-text); font-size: 0.875rem; font-weight: 700; flex: none; }
.sig-panel { margin-top: 12px; }
.sig-pad { display: block; width: 100%; max-width: 640px; aspect-ratio: 3 / 1; height: auto; border: 2px dashed var(--border-strong); border-radius: var(--radius-sm); background: #fff; touch-action: none; cursor: crosshair; }
.sig-preview-row { margin-top: 12px; }
.sig-preview { display: flex; align-items: center; min-height: 80px; max-width: 640px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.sig-preview img { max-height: 90px; max-width: 100%; }
.sig-preview .hint { color: #475569; }
.sig-font-hand { font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive; font-size: 1.125rem; }
.sig-font-classic { font-family: "Lucida Handwriting", "Apple Chancery", "URW Chancery L", cursive; font-style: italic; }
.sig-font-plain { font-style: italic; }
.page-nav { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-weight: 600; }
.sign-stage { position: relative; max-width: 1000px; border: 1px solid var(--border); box-shadow: var(--shadow); background: #fff; }
.sign-stage canvas { display: block; width: 100%; height: auto; }
.sign-layer { position: absolute; inset: 0; }
.sig-box { position: absolute; cursor: move; outline: 2px dashed var(--primary); outline-offset: 2px; touch-action: none; }
.sig-box:focus-visible { outline: 3px solid var(--focus); }
.sig-box img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.sig-del { position: absolute; top: -14px; right: -14px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--danger); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.sig-handle { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 4px; background: var(--primary); cursor: nwse-resize; }

.form-layout { display: grid; gap: 20px; margin-top: 12px; }
@media (min-width: 1100px) { .form-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .form-fields { position: sticky; top: calc(var(--topbar-h) + 12px); max-height: calc(100vh - var(--topbar-h) - 24px); overflow-y: auto; } }
.form-box { position: absolute; display: flex; align-items: flex-start; justify-content: flex-start; padding: 1px 3px; border: 2px solid #1d4ed8; border-radius: 3px; background: rgba(29, 78, 216, 0.1); color: #1d4ed8; font-size: 11px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.form-box.is-active { border-color: #b45309; background: rgba(245, 158, 11, 0.3); color: #78350f; }
.field-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.field-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.field-item .field { margin: 0; }
.field-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--primary-text); font-size: 0.8125rem; font-weight: 700; }
.radio-list { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.radio-list legend { font-weight: 600; margin-bottom: 4px; padding: 0; }

.media-layout { display: grid; gap: 16px; margin-top: 14px; }
@media (min-width: 900px) { .media-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.media-preview video { display: block; width: 100%; max-height: 420px; border-radius: var(--radius-sm); background: #000; }
.media-preview audio { display: block; width: 100%; }
.media-preview .hint { margin-top: 6px; }
.media-facts { margin: 0; display: grid; gap: 8px; }
.media-facts div { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.media-facts dt { font-size: 0.8125rem; color: var(--muted); }
.media-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.input-with-btn { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.input-with-btn .input { flex: 1 1 120px; min-width: 0; }
.trim-length { margin: 6px 0 0; font-weight: 600; }
.video-crop-stage { max-height: 460px; }
.video-crop-stage img { display: block; max-width: 100%; }
[data-result-wrap] { margin-top: 14px; }

.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.case-choices { margin-top: 18px; }
.rule-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.rule { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.rule .field { margin: 0; }
.rule-count { min-width: 70px; padding-bottom: 10px; font-size: 0.875rem; color: var(--muted); }
@media (max-width: 640px) { .rule { grid-template-columns: 1fr auto; } .rule .field { grid-column: 1 / -1; } }
.compare-inputs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.compare-options { display: grid; gap: 4px; margin-top: 12px; }
.diff-summary { margin: 0; font-weight: 600; }
.diff-view { max-height: 70vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); font-family: var(--mono); font-size: 0.875rem; line-height: 1.55; }
.diff-view:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.diff-line { display: grid; grid-template-columns: 3.5em 3.5em 1.5em 1fr; min-width: max-content; }
.diff-no { padding: 0 8px; text-align: end; color: var(--muted); user-select: none; border-inline-end: 1px solid var(--border); }
.diff-sign { text-align: center; user-select: none; }
.diff-text { white-space: pre-wrap; overflow-wrap: anywhere; padding-inline-end: 12px; min-width: 0; }
.diff-line.is-add { background: var(--success-bg); }
.diff-line.is-add .diff-sign { color: var(--success); font-weight: 700; }
.diff-line.is-del { background: var(--danger-bg); }
.diff-line.is-del .diff-sign { color: var(--danger); font-weight: 700; }
.diff-gap { padding: 4px 12px; background: var(--surface-2); color: var(--muted); font-family: var(--font); font-size: 0.8125rem; text-align: center; }
.diff-inline { padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font); font-size: 1rem; }
.diff-view ins { text-decoration: none; background: color-mix(in srgb, var(--success) 22%, transparent); border-radius: 3px; }
.diff-view del { text-decoration: line-through; background: color-mix(in srgb, var(--danger) 20%, transparent); border-radius: 3px; }
.diff-view .diff-line ins, .diff-view .diff-line del { text-decoration: none; }

.position-grid { display: grid; grid-template-columns: repeat(3, 40px); gap: 6px; border: 0; padding: 0; margin: 12px 0; }
.position-grid legend { grid-column: 1 / -1; font-weight: 600; font-size: 0.9375rem; margin-bottom: 6px; padding: 0; }
.position-grid input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.position-grid label { display: block; width: 40px; height: 32px; border: 2px solid var(--border-strong); border-radius: 6px; background: var(--card); cursor: pointer; position: relative; }
.position-grid label::after { content: ""; position: absolute; inset: 9px 13px; border-radius: 3px; background: var(--border-strong); }
.position-grid label:hover { border-color: var(--primary); }
.position-grid input:checked + label { border-color: var(--primary); background: var(--primary-tint); }
.position-grid input:checked + label::after { background: var(--primary); }
.position-grid input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }

.inline-actions-center { justify-content: center; margin-top: 12px; }
.queue-compact { max-height: 520px; overflow-y: auto; }
.queue-item-compact { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 12px; }
.zip-title { margin: 0; overflow-wrap: anywhere; }
.rename-grid { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); align-items: end; margin-top: 16px; }
.rename-grid .field { margin: 0; }
.rename-preview { max-height: 420px; overflow-y: auto; }
.rename-preview td.is-dup { color: var(--warning); font-weight: 600; }
.notice[data-dupes] { background: var(--warning-bg); border-color: var(--warning-border); }

.checker-bg { background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--card) 0 50%) 0 0 / 16px 16px; }
.color-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.input-lg { min-height: 50px; font-size: 1.125rem; }
.input-color-lg { width: 64px; height: 50px; padding: 4px; }
.color-hero { height: 120px; margin: 14px 0 8px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.color-table th { width: 30%; }
.cell-action { width: 1%; white-space: nowrap; text-align: end; }
.swatch-row { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.swatch { display: flex; flex-direction: column; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); cursor: pointer; overflow: hidden; font: inherit; text-align: start; }
.swatch:hover { border-color: var(--primary); }
.swatch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.swatch-color { display: block; height: 52px; border-bottom: 1px solid var(--border); }
.swatch-label { display: flex; flex-direction: column; padding: 6px 8px; font-family: var(--mono); font-size: 0.8125rem; }
.swatch-label small { font-family: var(--font); color: var(--muted); font-size: 0.75rem; }
.contrast-inputs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) auto; align-items: end; }
.contrast-swap { margin-bottom: 2px; }
.contrast-result { display: grid; gap: 16px; grid-template-columns: minmax(170px, auto) minmax(0, 1fr); align-items: stretch; margin: 18px 0; }
@media (max-width: 640px) { .contrast-result { grid-template-columns: 1fr; } }
.contrast-ratio { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.contrast-ratio-value { font-size: 2.25rem; font-weight: 700; line-height: 1.1; }
.contrast-ratio-label { color: var(--muted); font-size: 0.875rem; }
.contrast-preview { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--border); }
.contrast-preview p { margin: 0 0 8px; }
.contrast-sample-large { font-size: 24px; font-weight: 400; }
.contrast-sample { font-size: 16px; }
.contrast-ui-sample { display: inline-block; margin-top: 4px; padding: 6px 14px; border: 2px solid currentColor; border-radius: 8px; font-size: 14px; }
.muted { color: var(--muted); }
.picker-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; margin-top: 12px; }
@media (max-width: 900px) { .picker-layout { grid-template-columns: 1fr; } }
.picker-stage { position: relative; }
.picker-canvas { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; margin: 0 auto; cursor: crosshair; border: 1px solid var(--border); border-radius: var(--radius-sm); touch-action: none; }
.picker-canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.picker-loupe { position: absolute; width: 132px; height: 132px; border-radius: 50%; border: 3px solid var(--card); box-shadow: var(--shadow-lg); pointer-events: none; image-rendering: pixelated; background: var(--card); }
.picker-live { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.picker-live-swatch { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border); flex: none; }
.picked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.picked-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.picked-item .swatch-color { height: 44px; border-radius: 8px; border: 1px solid var(--border); }
.picked-values { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; margin: 0; font-size: 0.8125rem; align-items: center; }
.picked-values dt { color: var(--muted); }
.picked-values dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.picked-values .btn-sm { min-height: 28px; padding: 2px 8px; }

.favicon-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-top: 12px; }
@media (max-width: 900px) { .favicon-layout { grid-template-columns: 1fr; } }
.favicon-options { display: grid; gap: 14px; }
.tab-mock { padding: 8px 10px 0; background: #dee1e6; border-radius: 10px 10px 0 0; margin-bottom: 8px; }
.tab-mock-dark { background: #202124; }
.tab-mock-tab { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; padding: 8px 14px; background: #fff; color: #202124; border-radius: 8px 8px 0 0; font-size: 0.8125rem; }
.tab-mock-dark .tab-mock-tab { background: #35363a; color: #e8eaed; }
.tab-mock-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-mock canvas { width: 16px; height: 16px; flex: none; }
.favicon-sizes { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.favicon-sizes li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.8125rem; }
.favicon-sizes small { color: var(--muted); max-width: 120px; text-align: center; }
.favicon-size-box { padding: 6px; border: 1px solid var(--border); border-radius: 8px; line-height: 0; }
.favicon-size-img { max-width: 96px; max-height: 96px; image-rendering: auto; }

.svg-result { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.svg-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 12px; }
.svg-compare figure { margin: 0; }
.svg-compare figcaption { margin-top: 4px; font-size: 0.8125rem; color: var(--muted); text-align: center; }
.svg-preview { display: flex; align-items: center; justify-content: center; height: 180px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.svg-preview-img { max-width: 100%; max-height: 100%; }

.qr-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); align-items: start; margin-top: 16px; }
@media (max-width: 800px) { .qr-layout { grid-template-columns: 1fr; } }
.qr-fields { display: grid; gap: 4px; }
.qr-preview { display: flex; align-items: center; justify-content: center; min-height: 240px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.qr-preview canvas { width: 100%; max-width: 320px; height: auto; }
.notice[data-warning] { background: var(--warning-bg); border-color: var(--warning-border); }

.frame-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.frame-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.frame-thumb { max-width: 100%; height: auto; border-radius: 4px; }
.frame-label { font-size: 0.8125rem; color: var(--muted); }
.gif-result { display: flex; justify-content: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.gif-result img { max-width: 100%; height: auto; }

.combine-preview, .splitter-preview { display: flex; justify-content: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); margin: 8px 0; }
.combine-preview canvas, .splitter-preview canvas { max-width: 100%; max-height: 70vh; height: auto; width: auto; }

.calc-section { padding: 16px 18px; margin: 14px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.calc-section > .section-title { margin-top: 0; }
.calc-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; }
@media (max-width: 640px) { .calc-layout { grid-template-columns: 1fr; } }
.calc-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 14px 0 6px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--primary-tint); }
.calc-result-value { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; letter-spacing: -0.01em; color: var(--primary); font-variant-numeric: tabular-nums; }
.calc-result-label { color: var(--muted); font-size: 0.9375rem; }
.calc-subtitle { margin: 16px 0 8px; font-size: 1rem; }
.ratio-preview-wrap { display: flex; align-items: center; justify-content: center; height: 200px; border-radius: var(--radius-sm); background: var(--surface); border: 1px dashed var(--border-strong); }
.ratio-preview { display: flex; align-items: center; justify-content: center; width: 180px; height: 101px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #a855f7)); color: var(--primary-text); font-weight: 700; font-size: 0.875rem; box-shadow: var(--shadow); }
.size-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.size-chip { min-height: 36px; padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-size: 0.875rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.size-chip:hover { border-color: var(--primary); color: var(--primary); }
.tc-math { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; }
@media (max-width: 640px) { .tc-math { grid-template-columns: 1fr; } }
.tc-op label { min-width: 44px; justify-content: center; font-size: 1.125rem; }

:root { --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes drawer-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bounce-in { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 35%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

@media (prefers-reduced-motion: no-preference) {

  main > * { animation: rise 0.45s var(--ease-out) both; }
  main > :nth-child(2) { animation-delay: 0.04s; }
  main > :nth-child(3) { animation-delay: 0.08s; }
  main > :nth-child(4) { animation-delay: 0.12s; }
  main > :nth-child(n+5) { animation-delay: 0.16s; }

  .tool-grid > li, .collection-grid > li, .category-grid > li { animation: rise 0.4s var(--ease-out) both; }
  .tool-grid > li:nth-child(2), .collection-grid > li:nth-child(2), .category-grid > li:nth-child(2) { animation-delay: 0.03s; }
  .tool-grid > li:nth-child(3), .collection-grid > li:nth-child(3), .category-grid > li:nth-child(3) { animation-delay: 0.06s; }
  .tool-grid > li:nth-child(4), .category-grid > li:nth-child(4) { animation-delay: 0.09s; }
  .tool-grid > li:nth-child(5), .category-grid > li:nth-child(5) { animation-delay: 0.12s; }
  .tool-grid > li:nth-child(6), .category-grid > li:nth-child(6) { animation-delay: 0.15s; }
  .tool-grid > li:nth-child(n+7) { animation-delay: 0.18s; }

  .btn { transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.2s, transform 0.12s var(--ease-out); }
  .btn:active:not(:disabled) { transform: scale(0.97); }
  .btn-primary:hover:not(:disabled) { box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 30%, transparent); }
  .chip { transition: transform 0.15s var(--ease-out), background-color 0.15s, border-color 0.15s, box-shadow 0.2s; }
  .chip:hover { transform: translateY(-2px); border-color: var(--cat, var(--primary)); box-shadow: var(--shadow); }
  .icon-btn, .side-link, .search-result, .swatch, a.collection-card-head, .category-card-head { transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s var(--ease-out); }

  .tool-card-link, .collection-card, .category-card, .svg-result, .frame-item, .favicon-size-box { transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s; }
  .tool-card-link:hover, .collection-card:hover, .category-card:hover { box-shadow: var(--shadow); border-color: var(--cat, var(--primary)); }
  .swatch:hover, .size-chip:hover { transform: translateY(-2px); }
  .size-chip { transition: transform 0.15s var(--ease-out), border-color 0.15s, color 0.15s; }
  .ratio-preview { transition: width 0.35s var(--ease-spring), height 0.35s var(--ease-spring); }
  .calc-result-value { animation: pop-in 0.25s var(--ease-out); }

  .dropzone { transition: border-color 0.2s, background-color 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s; }
  .dropzone:hover { border-color: var(--primary); }
  .dropzone.is-dragover { transform: scale(1.01); animation: pulse-ring 1s ease-out infinite; }
  .dropzone.is-dragover .dropzone-icon { animation: float 0.8s ease-in-out infinite; }
  .page-drop:not([hidden]) { animation: fade-in 0.15s ease-out both; }

  .hsearch-panel:not([hidden]) { animation: rise 0.18s var(--ease-out) both; }
  dialog[open]::backdrop { animation: fade-in 0.2s ease-out both; }
  .hero-search-panel:not([hidden]) { animation: rise 0.2s var(--ease-out) both; }
  .hero-search-box { transition: border-color 0.2s, box-shadow 0.25s; }
  .hero-search-box:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent), var(--shadow); }
  .search-notes:not([hidden]), .search-help { animation: rise 0.25s var(--ease-out) both; }

  [data-workspace]:not([hidden]), [data-output]:not([hidden]), [data-result]:not([hidden]), .tool-app [data-step]:not([hidden]) { animation: rise 0.35s var(--ease-out) both; }

  .is-new, .rule, .frame-item { animation: slide-in 0.25s var(--ease-out) both; }
  .notice-error:not([hidden]) { animation: shake 0.4s ease-in-out both; }
  .notice-success:not([hidden]), .summary-box { animation: pop-in 0.3s var(--ease-spring) both; }
  .queue-meta .ok, .queue-meta .err { animation: fade-in 0.35s ease-out both; }
  .advanced[open] > .advanced-body { animation: rise 0.25s var(--ease-out) both; }
  .side-sublist:not([hidden]) { animation: fade-in 0.15s ease-out both; }
  .counter-value, .contrast-ratio-value { transition: color 0.2s; }
  progress { transition: opacity 0.2s; }
  .segmented label { transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.12s var(--ease-out); }
  .segmented input:checked + label { animation: pop-in 0.2s var(--ease-out); }
  .position-grid label { transition: border-color 0.15s, background-color 0.15s, transform 0.15s var(--ease-out); }
  .position-grid label:hover { transform: scale(1.06); }
}

.sheet-preview { max-height: 440px; overflow: auto; }
.sheet-preview:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sheet-table { border-collapse: collapse; font-size: 0.875rem; min-width: 100%; }
.sheet-table th, .sheet-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: start; vertical-align: top; white-space: pre-wrap; max-width: 280px; overflow-wrap: anywhere; }
.sheet-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); color: var(--muted); font-weight: 600; text-align: center; }
.sheet-table .row-num { background: var(--surface); color: var(--muted); font-weight: 500; text-align: end; font-variant-numeric: tabular-nums; position: sticky; left: 0; }
.sheet-table thead .row-num { z-index: 2; }
.sheet-table td.num { text-align: end; font-variant-numeric: tabular-nums; }

.text-stage .sign-layer { cursor: text; }
.text-box { position: absolute; cursor: move; line-height: 1.2; white-space: pre; touch-action: none; outline: 1px dashed transparent; outline-offset: 1px; user-select: none; }
.text-box:hover { outline-color: var(--primary); }
.text-box.is-selected { outline: 2px dashed var(--primary); }
.text-box:focus-visible { outline: 3px solid var(--focus); }
.text-editor { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.text-editor .toolbar { align-items: center; }
.layout-preview { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.layout-preview canvas { display: block; width: 100%; height: auto; background: #fff; }
.layout-preview .frame { padding: 8px; background: var(--surface-2); }

.ocr-langs { border: 0; padding: 0; margin: 12px 0; }
.ocr-langs legend { font-weight: 600; margin-bottom: 8px; }
.ocr-lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 4px 12px; margin-bottom: 6px; }

.timeline { display: block; width: 100%; height: 88px; margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; touch-action: none; }
.timeline:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.timeline-time { margin: 6px 0 12px; font-variant-numeric: tabular-nums; font-weight: 600; }
.timeline-time .hint { font-weight: 400; margin-inline-start: 8px; }
.cut-marks { flex-wrap: wrap; }
.cut-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cut-item { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 8px 12px; align-items: end; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.cut-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; align-self: center; }
.cut-time { display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.cut-time label { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.cut-time .input { min-width: 0; }
.cut-time .input[aria-invalid="true"] { border-color: var(--danger); }
.cut-len { font-variant-numeric: tabular-nums; color: var(--muted); align-self: center; }
.cut-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.cut-summary { font-weight: 600; margin: 10px 0; }
@media (max-width: 560px) {
  .cut-item { grid-template-columns: auto 1fr; }
  .cut-item .cut-time { grid-column: 2; }
  .cut-len { grid-column: 2; }
}
@media (prefers-reduced-motion: no-preference) {
  .cut-item.is-new { animation: slide-in 0.25s var(--ease-out, ease-out) both; }
}
.split-preview { margin: 4px 0 12px; padding-inline-start: 1.4em; max-height: 220px; overflow-y: auto; font-variant-numeric: tabular-nums; color: var(--muted); }

.hf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 8px 0 4px; }
@media (max-width: 640px) { .hf-grid { grid-template-columns: 1fr; } }
.blank-thumbs { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.blank-thumbs li { display: grid; gap: 4px; justify-items: center; font-size: 0.8125rem; color: var(--muted); }
.blank-thumbs canvas { display: block; height: 96px; width: auto; border: 1px solid var(--border); background: #fff; }
.crop-preview-wrap { display: grid; justify-items: start; gap: 6px; margin: 8px 0; }
.crop-preview { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); box-shadow: var(--shadow); background: #fff; touch-action: none; }
.crop-preview.is-draggable { cursor: crosshair; }
.duplex-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 12px 0; }
.duplex-file { display: grid; gap: 8px; justify-items: start; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
.duplex-label { margin: 0; font-weight: 600; }
.duplex-file .hint { margin: 0; }
.props-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px 16px; margin: 12px 0; }
.redact-find { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); display: grid; gap: 8px; }
.redact-find .field { margin: 0; }
.redact-stage .redact-layer { cursor: crosshair; touch-action: none; }
.redact-box { position: absolute; background: #000; outline: 2px solid transparent; outline-offset: 1px; cursor: pointer; }
.redact-box.is-white { background: #fff; outline: 1px dashed #64748b; }
.redact-box.is-drawing { background: rgba(0, 0, 0, 0.55); outline: 2px dashed var(--primary); }
.redact-box.is-selected { outline: 2px solid var(--danger); }
.redact-box:focus-visible { outline: 3px solid var(--focus); }

.crop-stage.is-circle .cropper-view-box, .crop-stage.is-circle .cropper-face { border-radius: 50%; }
.crop-stage.is-circle .cropper-view-box { outline: 0; box-shadow: 0 0 0 2px var(--primary); }

.filter-layout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .filter-layout { grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); } }
.filter-preview-wrap { display: grid; gap: 6px; justify-items: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.filter-preview { display: block; max-width: 100%; max-height: 460px; width: auto; height: auto; border-radius: 4px; }
.filter-controls { display: grid; gap: 10px; }
.filter-controls .field { margin: 0; }
.range-field input[type="range"] { width: 100%; }
.filter-chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chips legend { font-weight: 600; margin-bottom: 6px; width: 100%; }
.filter-chips input { position: absolute; opacity: 0; pointer-events: none; }
.filter-chips label { padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; font-size: 0.875rem; background: var(--card); }
.filter-chips input:checked + label { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.filter-chips input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.edit-stage { position: relative; display: block; width: fit-content; max-width: 100%; margin: 8px 0; border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--surface); }
.edit-stage canvas { display: block; max-width: 100%; height: auto; }
.edit-layer { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.edit-area { position: absolute; border: 2px dashed #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.7); cursor: move; }
.edit-area.is-oval { border-radius: 50%; }
.edit-area.is-selected { border: 2px solid var(--primary); }
.edit-area:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.edit-handle { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 4px; background: var(--primary); border: 2px solid #fff; cursor: nwse-resize; }
.text-layer { cursor: default; }
.text-hit { position: absolute; cursor: move; outline: 1px dashed transparent; outline-offset: 4px; }
.text-hit:hover { outline-color: rgba(255, 255, 255, 0.8); }
.text-hit.is-selected { outline: 2px dashed var(--primary); }
.text-hit:focus-visible { outline: 3px solid var(--focus); }

.camera-box { position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 3; margin: 12px 0; border-radius: var(--radius-sm); overflow: hidden; background: #0f172a; }
.camera-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-frame { position: absolute; inset: 18% 22%; border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25); pointer-events: none; }
.camera-video.is-mirrored { transform: scaleX(-1); }
.qr-kind { font-weight: 700; font-size: 1.05rem; margin: 0 0 8px; }
.barcode-preview { display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--card) 0 50%) 0 0 / 16px 16px; }
.barcode-preview img { max-width: 100%; height: auto; }
.password-out { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.password-out .input { flex: 1 1 260px; font-size: 1.15rem; letter-spacing: 0.02em; }
.password-meter { height: 8px; margin: 10px 0 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.password-meter-bar { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--danger); transition: width 0.25s, background-color 0.25s; }
.password-meter[data-level="fair"] .password-meter-bar { background: #d97706; }
.password-meter[data-level="strong"] .password-meter-bar { background: #16a34a; }
.password-meter[data-level="very-strong"] .password-meter-bar { background: #15803d; }
[data-signature-maker] .sig-preview { min-height: 140px; }
[data-signature-maker] .sig-preview img { max-height: 200px; }

.recorder-setup { display: grid; gap: 10px; margin-bottom: 12px; }
.recorder-stage { display: grid; gap: 8px; justify-items: start; margin: 8px 0; }
.recorder-video { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; background: #0f172a; border-radius: var(--radius-sm); object-fit: contain; }
.recorder-video.is-mirrored, .camera-video.is-mirrored { transform: scaleX(-1); }
.recorder-time { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.recorder-time .hint { font-size: 0.9375rem; font-weight: 500; }
.rec-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #dc2626; }
.rec-dot-static { margin-inline-end: 4px; vertical-align: -1px; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); }
@media (prefers-reduced-motion: no-preference) { .recorder-time .rec-dot { animation: rec-blink 1.2s steps(2, start) infinite; } }
@keyframes rec-blink { to { visibility: hidden; } }
.meter { --meter-bg: #e5e7eb; --meter-line: #2563eb; display: block; width: 100%; max-width: 720px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.meter-lg { height: 140px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .meter { --meter-bg: #1e293b; --meter-line: #60a5fa; } }
:root[data-theme="dark"] .meter { --meter-bg: #1e293b; --meter-line: #60a5fa; }
.device-verdict { font-weight: 700; font-size: 1.05rem; margin: 10px 0; }
.camera-test { max-width: 720px; aspect-ratio: 16 / 9; }
.camera-test .camera-video { object-fit: contain; }
.photo-strip { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.photo-strip li { display: grid; gap: 6px; justify-items: start; }
.photo-strip img { width: 200px; height: auto; border-radius: 6px; border: 1px solid var(--border); }
.password-row { display: grid; gap: 6px; margin: 10px 0; max-width: 520px; }

.queue-secs-label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; color: var(--muted); }
.queue-secs { width: 5rem; min-height: 36px; padding: 4px 8px; }

.queue-option { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.875rem; color: var(--muted); }
.select-sm { min-height: 34px; padding: 4px 30px 4px 10px; font-size: 0.875rem; width: auto; }

:root {
  --page: #f5f7fa;
  --cat-ink: #ffffff;
  --radius-lg: 20px;
  --container: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #0b1220; --cat-ink: #0b1220; }
}
:root[data-theme="dark"] { --page: #0b1220; --cat-ink: #0b1220; }
body { background: var(--page); }

main { max-width: var(--container); margin: 0 auto; padding: 18px 16px 0; }
@media (min-width: 640px) { main { padding: 24px 24px 0; } }
@media (min-width: 1280px) { main { padding: 28px 32px 0; } }
.breadcrumbs ol { margin-bottom: 18px; }
body[data-page="tool"] .breadcrumbs ol, body[data-page="category"] .breadcrumbs ol, body[data-page="collection"] .breadcrumbs ol, body[data-page="tools"] .breadcrumbs ol { justify-content: center; }

.tool-hero, .page-hero { text-align: center; max-width: 820px; margin: 0 auto 26px; }
.tool-hero h1, .page-hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.75rem); letter-spacing: -0.01em; margin-bottom: 10px; }
.tool-hero .lead, .page-hero .lead { margin: 0 auto; font-size: clamp(1.0625rem, 1.8vw, 1.1875rem); }
.tool-hero-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 14px;
  border-radius: 18px; background: var(--cat-bg, var(--primary-tint)); color: var(--cat, var(--primary));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cat, var(--primary)) 18%, transparent);
}
.tool-hero-icon .icon { width: 30px; height: 30px; }
.page-hero .filter-box { margin: 18px auto 0; text-align: start; }
.page-hero .hint { text-align: center; }

.tool-page[data-cat] {
  --primary: var(--cat); --primary-text: var(--cat-ink); --primary-tint: var(--cat-bg);
  --primary-hover: color-mix(in srgb, var(--cat) 86%, var(--text));
}
.tool-page { max-width: 1100px; margin: 0 auto; }
.tool-app { padding: 26px; border-radius: var(--radius-lg); border-color: var(--border); box-shadow: 0 1px 2px rgba(12, 23, 20, 0.04), 0 12px 40px rgba(12, 23, 20, 0.07); }
@media (max-width: 480px) { .tool-app { padding: 14px; border-radius: var(--radius); } }
.tool-page > .content-section, .tool-page > .faq, .tool-page > section[aria-labelledby="faq-title"] { max-width: 860px; margin-inline-start: auto; margin-inline-end: auto; }

.dropzone {
  min-height: 280px; justify-content: center; gap: 10px; padding: 40px 20px;
  border: 2px dashed color-mix(in srgb, var(--cat, var(--primary)) 38%, var(--border-strong));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cat-bg, var(--primary-tint)) 55%, var(--card));
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--cat, var(--primary)); background: var(--cat-bg, var(--primary-tint)); }
.dropzone-art {
  display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: 6px;
  border-radius: 50%; background: var(--card); color: var(--cat, var(--primary));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cat, var(--primary)) 20%, transparent);
}
.dropzone-art .icon { width: 36px; height: 36px; }
.dropzone-icon { color: inherit; }
.dropzone-title { font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.01em; }
.dropzone .btn-lg { min-height: 58px; padding: 14px 40px; font-size: 1.1875rem; border-radius: 14px; box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 28%, transparent); }
.dropzone .hint { max-width: 560px; font-size: 0.875rem; }
.dropzone.is-compact { min-height: 0; padding: 14px; border-radius: var(--radius); }
.dropzone.is-compact .dropzone-art { display: none; }
.dropzone.is-compact .btn-lg { min-height: 44px; padding: 8px 20px; font-size: 1rem; box-shadow: none; }
.dropzone .dropzone-paste { margin-top: -4px; font-size: 0.8125rem; }
@media (pointer: coarse) { .dropzone .dropzone-paste { display: none; } }
@media (hover: none) and (pointer: coarse) { .dropzone { min-height: 220px; } }

.trust-row { list-style: none; margin: 18px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--muted); font-size: 0.9375rem; font-weight: 500; }
.trust-row li { display: inline-flex; align-items: center; gap: 6px; }
.trust-row .icon { color: var(--success); }

.how-section { max-width: 1100px; margin: 54px auto 0; text-align: center; }
.how-section h2 { margin-bottom: 18px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: how; text-align: start; }
.how-steps li {
  position: relative; counter-increment: how; padding-block: 20px; padding-inline: 70px 20px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border); line-height: 1.5;
}
.how-steps li::before {
  content: counter(how); position: absolute; inset-inline-start: 18px; top: 18px; width: 36px; height: 36px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cat-bg, var(--primary-tint)); color: var(--cat, var(--primary)); font-weight: 700;
}
.how-steps-home li strong { display: block; margin-bottom: 2px; }

.content-section { margin-top: 52px; }
.content-section > h2 { font-size: clamp(1.35rem, 2.6vw, 1.65rem); }
.tool-page .content-section p, .tool-page .bullets { color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.faq-item { padding: 16px 18px; margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.faq-item h3 { font-size: 1.0625rem; }

.tool-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); }
.tool-card-link {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 18px; border-radius: var(--radius); border-color: var(--border); background: var(--card);
  box-shadow: 0 1px 2px rgba(12, 23, 20, 0.03);
}
.tool-card-icon { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 6px; }
.tool-card-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.005em; }
.tool-card-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tool-grid.is-compact .tool-card-link { padding: 14px; }

.home-hero { text-align: center; max-width: 900px; margin: 18px auto 0; padding: 20px 0 6px; }
.home-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 14px; }
.hero-accent { color: var(--primary); }
.home-hero .lead { margin: 0 auto; max-width: 720px; font-size: clamp(1.0625rem, 2vw, 1.25rem); }
.home-hero .hero-search { margin: 26px auto 0; text-align: start; }
.hero-chips { justify-content: center; margin-top: 18px; }
.hero-trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; color: var(--muted); font-weight: 500; font-size: 0.9375rem; }
.hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust .icon { color: var(--success); }
.home-tools { margin-top: 48px; }
.home-tools-head { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 20px; text-align: center; }
.home-tools-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.cat-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cat-filter-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--card); color: var(--text);
  font: inherit; font-weight: 600; font-size: 0.9375rem; cursor: pointer;
}
.cat-filter-btn .icon { color: var(--cat, var(--primary)); }
.cat-filter-btn:hover { border-color: var(--cat, var(--primary)); }
.cat-filter-btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.cat-filter-btn[aria-pressed="true"] .icon { color: inherit; }
.js .home-grid:not([data-filter]) > li:not([data-featured]) { display: none; }
.home-tools-more { text-align: center; margin: 22px 0 0; }
.home-work .section-lead { margin-bottom: 18px; }
.collection-card, .category-card { border-radius: var(--radius); padding: 22px; }
.collection-icon { border-radius: 14px; }
.privacy-band { margin-top: 52px; padding: 28px; border-radius: var(--radius-lg); }

.site-footer { margin-top: 80px; background: var(--card); border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9375rem; }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 44px 16px 28px; display: grid; gap: 32px; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); padding: 52px 24px 32px; } }
.footer-brand p { margin: 12px 0 0; }
.footer-privacy { display: flex; align-items: center; gap: 8px; color: var(--success); font-weight: 600; }
.footer-cols { display: grid; gap: 24px 20px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.footer-heading { margin: 0 0 8px; font-weight: 700; color: var(--text); font-size: 0.9375rem; }
.footer-heading a { color: inherit; text-decoration: none; }
.footer-heading a:hover { color: var(--cat, var(--primary)); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.footer-col { min-width: 0; }
.footer-col a { display: inline-flex; min-height: 30px; align-items: center; color: var(--muted); text-decoration: none; font-size: 0.875rem; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--text); text-decoration: underline; }
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom .copyright { max-width: var(--container); margin: 0 auto; padding: 16px; font-size: 0.875rem; }

@media (prefers-reduced-motion: no-preference) {
  .cat-filter-btn, .fav-btn, .side-sublink, .side-expand { transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
  .how-steps li { animation: rise 0.4s var(--ease-out) both; }
  .how-steps li:nth-child(2) { animation-delay: 0.06s; }
  .how-steps li:nth-child(3) { animation-delay: 0.12s; }
  .how-steps li:nth-child(n+4) { animation-delay: 0.18s; }
}

@media (max-width: 640px) {
  .topbar-inner { padding: 0 8px; gap: 2px; }
  .home-hero { margin-top: 4px; }
  .tool-hero-icon { width: 52px; height: 52px; border-radius: 16px; }
  .dropzone { min-height: 0; padding: 28px 14px; }
}
.how-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.data-table thead th { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 560px) {
  .tool-grid { gap: 10px; }
  .tool-card-link { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 12px 14px; }
  .tool-card-icon { grid-row: span 2; width: 42px; height: 42px; margin: 0; border-radius: 12px; }
  .tool-card-title { font-size: 1rem; padding-inline-end: 36px; }
  .tool-card-text { -webkit-line-clamp: 2; }
}

:root {
  --hl-spelling: #dc2626; --hl-grammar: #2563eb; --hl-punctuation: #d97706; --hl-style: #7c3aed;
  --hl-hard: #fef3c7; --hl-veryhard: #fee2e2; --hl-adverb: #dbeafe; --hl-passive: #dcfce7; --hl-wordy: #ede9fe; --hl-ai: #fde68a; --hl-pattern: #fecaca; --hl-cliche: #e9d5ff; --hl-change: #bbf7d0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hl-spelling: #f87171; --hl-grammar: #60a5fa; --hl-punctuation: #fbbf24; --hl-style: #a78bfa; --hl-hard: #3d3410; --hl-veryhard: #4a1d1d; --hl-adverb: #13294b; --hl-passive: #123622; --hl-wordy: #2a1f4a; --hl-ai: #4a3b0a; --hl-pattern: #4a1d1d; --hl-cliche: #33204a; --hl-change: #143d24; }
}
:root[data-theme="dark"] { --hl-spelling: #f87171; --hl-grammar: #60a5fa; --hl-punctuation: #fbbf24; --hl-style: #a78bfa; --hl-hard: #3d3410; --hl-veryhard: #4a1d1d; --hl-adverb: #13294b; --hl-passive: #123622; --hl-wordy: #2a1f4a; --hl-ai: #4a3b0a; --hl-pattern: #4a1d1d; --hl-cliche: #33204a; --hl-change: #143d24; }

.writer-layout { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) {
  .writer-layout { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); }
  .writer-side { position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; }
}
.writer-side { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.writer-input { min-height: 220px; line-height: 1.65; }
.check-list { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.check-list legend, .legend-toggles legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.legend-toggles { border: 0; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.counter-note { display: block; font-size: 0.8125rem; color: var(--muted); }

.marked-text { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; max-height: 560px; overflow-y: auto; margin-top: 10px; }
.marked-text .hint { white-space: normal; }
mark.hl { background: transparent; color: inherit; border-radius: 3px; padding: 0 1px; cursor: help; }
mark.hl-spelling { text-decoration: underline wavy var(--hl-spelling); text-underline-offset: 3px; text-decoration-skip-ink: none; cursor: pointer; }
mark.hl-grammar { text-decoration: underline wavy var(--hl-grammar); text-underline-offset: 3px; text-decoration-skip-ink: none; cursor: pointer; }
mark.hl-punctuation { box-shadow: inset 0 -2px 0 var(--hl-punctuation); cursor: pointer; }
mark.hl-style { box-shadow: inset 0 -2px 0 var(--hl-style); cursor: pointer; }
mark.hl-adverb { background: var(--hl-adverb); }
mark.hl-passive { background: var(--hl-passive); }
mark.hl-wordy { background: var(--hl-wordy); }
mark.hl-ai { background: var(--hl-ai); }
mark.hl-pattern { background: var(--hl-pattern); }
mark.hl-cliche { background: var(--hl-cliche); }
mark.hl-change { background: var(--hl-change); }
mark.hl-invisible { display: inline-block; padding: 0 4px; margin: 0 1px; border-radius: 4px; font: 600 0.6875rem/1.6 var(--mono); background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); vertical-align: middle; }
mark.hl-invisible.is-emoji { background: var(--surface); color: var(--muted); border-color: var(--border); }
.hs-hard { background: var(--hl-hard); border-radius: 3px; }
.hs-veryhard { background: var(--hl-veryhard); border-radius: 3px; }
.hl-dot { display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; border-radius: 4px; vertical-align: -1px; border: 1px solid var(--border-strong); }
.hl-dot.hl-spelling { background: var(--hl-spelling); }
.hl-dot.hl-grammar { background: var(--hl-grammar); }
.hl-dot.hl-punctuation { background: var(--hl-punctuation); }
.hl-dot.hl-style { background: var(--hl-style); }
.hl-dot.hl-hard { background: var(--hl-hard); }
.hl-dot.hl-veryhard { background: var(--hl-veryhard); }
.hl-dot.hl-adverb { background: var(--hl-adverb); }
.hl-dot.hl-passive { background: var(--hl-passive); }
.hl-dot.hl-wordy { background: var(--hl-wordy); }
.hl-dot.hl-ai { background: var(--hl-ai); }
.hl-dot.hl-pattern { background: var(--hl-pattern); }
.hl-dot.hl-cliche { background: var(--hl-cliche); }

.issue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.issue { padding: 10px 12px; border: 1px solid var(--border); border-inline-start: 4px solid var(--border-strong); border-radius: 10px; background: var(--card); }
.issue:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.issue.issue-spelling { border-inline-start-color: var(--hl-spelling); }
.issue.issue-grammar { border-inline-start-color: var(--hl-grammar); }
.issue.issue-punctuation { border-inline-start-color: var(--hl-punctuation); }
.issue.issue-style { border-inline-start-color: var(--hl-style); }
.issue.is-flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); }
.issue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.issue-cat { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.issue-word { font-weight: 700; overflow-wrap: anywhere; }
.issue-msg { margin: 4px 0 8px; font-size: 0.9375rem; color: var(--muted); }
.issue-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.issue-fix { font-weight: 700; }

.score-hero { display: flex; align-items: center; gap: 18px; margin: 18px 0 12px; padding: 16px 18px; border-radius: var(--radius); background: var(--cat-bg, var(--primary-tint)); }
.score-grade { display: grid; justify-items: center; min-width: 96px; }
.score-grade-value { font-size: 3rem; font-weight: 700; line-height: 1; color: var(--cat, var(--primary)); }
.score-grade-label { font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.score-verdict { margin: 0; font-size: 1.125rem; font-weight: 700; }
.score-hero .hint { margin-top: 4px; }

.serp-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: #202124; font-family: Arial, sans-serif; }
.serp-card[data-device="mobile"] { max-width: 400px; }
.serp-site { display: flex; align-items: center; gap: 10px; min-width: 0; }
.serp-site > :not(.serp-favicon) { min-width: 0; }
.serp-favicon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; border: 1px solid #dadce0; font-size: 0.8125rem; font-weight: 700; color: #4d5156; }
.serp-site-name { display: block; font-size: 14px; line-height: 20px; color: #202124; }

.serp-url { display: block; font-size: 12px; line-height: 18px; color: #4d5156; overflow-wrap: anywhere; max-width: 520px; }
.serp-title { margin: 8px 0 3px; font-size: 20px; line-height: 26px; color: #1a0dab; }
.serp-desc { margin: 0; font-size: 14px; line-height: 22px; color: #4d5156; }
.serp-desc strong { color: #202124; }
.meter-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.meter-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--success); transition: width 0.2s; }
.meter-bar span[data-level="over"] { background: var(--danger); }
.meter-bar span[data-level="short"] { background: var(--warning); }
.serp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.9375rem; }
.serp-check::before { content: "\2713"; display: inline-block; width: 1.2em; font-weight: 700; color: var(--success); }
.serp-check.is-warn::before { content: "!"; color: var(--warning); }
.serp-check.is-bad::before { content: "\2715"; color: var(--danger); }

.slug-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.slug-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.slug-item .hint { grid-column: 1; font-size: 0.8125rem; }
.slug-item .btn { grid-row: 1 / span 2; grid-column: 2; }
.slug-code { font-size: 0.9375rem; background: transparent; border: 0; padding: 0; overflow-wrap: anywhere; }
.kd-bar-col { width: 30%; }
.kd-bar { display: block; height: 8px; border-radius: 99px; background: var(--cat, var(--primary)); opacity: 0.75; }
.md-preview { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow-x: auto; max-width: none; }
.md-preview table { border-collapse: collapse; margin: 12px 0; }
.md-preview th, .md-preview td { border: 1px solid var(--border); padding: 6px 10px; }
.md-preview pre { background: var(--surface); padding: 12px; border-radius: 8px; overflow-x: auto; }
.md-preview img { max-width: 100%; }
.md-img-blocked { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 0.875rem; }
.read-along { font-size: 1.0625rem; }
.along-sentence { cursor: pointer; border-radius: 4px; transition: background-color 0.2s; }
.along-sentence:hover { background: var(--surface-2); }
.along-sentence.is-reading { background: var(--cat-bg, var(--primary-tint)); box-shadow: 0 0 0 2px var(--cat-bg, var(--primary-tint)); }
.along-sentence:focus-visible { outline: 3px solid var(--focus); }

.compare-dialog { width: min(1100px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden; }
.compare-dialog[open] { display: flex; flex-direction: column; }
.compare-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.compare-title { margin: 0; font-size: 1.0625rem; overflow-wrap: anywhere; }
.compare-scroll { flex: 1; min-height: 0; overflow: auto; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--card) 0 50%) 0 0 / 20px 20px; }
.compare-stage { position: relative; margin: 0 auto; width: fit-content; max-width: 100%; touch-action: none; cursor: ew-resize; user-select: none; }
.compare-img { display: block; max-width: 100%; max-height: calc(100vh - 190px); width: auto; height: auto; }
.compare-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.compare-after .compare-img { width: 100%; height: 100%; object-fit: fill; }
.compare-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-inline-start: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); pointer-events: none; }
.compare-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.compare-tag { position: absolute; top: 10px; padding: 2px 10px; border-radius: 999px; background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 0.8125rem; font-weight: 600; pointer-events: none; }
.compare-tag-before { left: 10px; }
.compare-tag-after { right: 10px; }
.compare-slider { display: block; padding: 10px 16px 14px; border-top: 1px solid var(--border); }
.compare-dialog.is-zoomed .compare-stage { max-width: none; width: var(--natural-w, auto); }
.compare-dialog.is-zoomed .compare-img { max-width: none; max-height: none; width: var(--natural-w, auto); }
.compare-dialog.is-zoomed .compare-stage > .compare-img { image-rendering: pixelated; }
@media (max-width: 640px) { .compare-dialog { width: 100vw; max-height: 100vh; border-radius: 0; } .compare-img { max-height: calc(100vh - 220px); } }

:root { --star: #d97706; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --star: #fbbf24; } }
:root[data-theme="dark"] { --star: #fbbf24; }

.fav-btn, .fav-toggle, .js-only { display: none; }
.js .fav-toggle, .js .js-only { display: inline-flex; }

.tool-card { position: relative; min-width: 0; }
.tool-card-title { padding-inline-end: 34px; overflow-wrap: anywhere; }
.tool-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: auto; padding-top: 6px; }
.tool-card-cat { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cat, var(--muted)); }
body[data-page="category"] .tool-card-cat { display: none; }
.js .fav-btn {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer;
}
.fav-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border); }
.fav-btn[aria-pressed="true"], .fav-toggle[data-on="true"] .icon { color: var(--star); }
.fav-btn[aria-pressed="true"] .icon, .fav-toggle[data-on="true"] .icon { fill: currentColor; }
@media (max-width: 560px) {
  .tool-card-link { grid-template-rows: auto auto auto; }
  .tool-card-icon { grid-row: 1 / span 3; }
  .tool-card-meta { padding-top: 2px; }
  .js .fav-btn { top: 8px; inset-inline-end: 8px; }
}

.tool-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin-top: 16px; }
.privacy-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 12px; border-radius: 999px;
  background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); font-size: 0.8125rem; font-weight: 600;
}
.dropzone-private { margin: 0; max-width: 520px; font-size: 0.8125rem; font-weight: 600; line-height: 1.45; color: var(--success); text-align: center; }
.dropzone-private .icon { margin: -2px 4px 0 0; }
.dropzone.is-compact .dropzone-private { display: none; }

.section-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.section-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
  border-radius: 9px; background: var(--cat-bg, var(--primary-tint)); color: var(--cat, var(--primary));
}

.home-section { margin-top: 44px; }
.home-section > .section-head { align-items: center; margin-bottom: 14px; }
.home-personal .home-section:first-child { margin-top: 36px; }
.category-card p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.category-card .collection-icon { background: var(--cat-bg, var(--primary-tint)); color: var(--cat, var(--primary)); }
.privacy-band .how-steps { margin-top: 22px; }
.privacy-band .how-steps li { background: var(--card); }

.tools-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1000px; margin: 0 auto; }
.tools-status { min-height: 1.6em; margin: 10px 0 0; text-align: center; }
.tools-empty { max-width: 560px; margin: 24px auto 0; padding: 28px 16px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); }
.tools-empty p { margin-bottom: 12px; }
.tools-section { margin-top: 36px; }
.tools-section .section-head { margin-bottom: 14px; }

.setting-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 0; }
.setting-group .hint { margin-top: 6px; }

.code-area { font-family: var(--mono); font-size: 0.875rem; line-height: 1.5; tab-size: 2; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.dev-io { display: grid; gap: 16px; align-items: start; }
@media (min-width: 960px) { .dev-io { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dev-io > .field { min-width: 0; }
.dev-options { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; margin: 14px 0 4px; }
.dev-options > .field { min-width: 170px; }
.dev-options .check { align-self: center; }
.segmented-stack { flex-direction: column; align-items: stretch; }
.segmented-stack label { justify-content: flex-start; }
.kv-list { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 6px 16px; margin: 10px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.kv-list dt { font-weight: 600; color: var(--muted); font-size: 0.875rem; }
.kv-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .kv-list { grid-template-columns: 1fr; gap: 0; } .kv-list dd { margin-bottom: 8px; } }

.regex-box { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); }
.regex-box:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.regex-slash { color: var(--muted); font-family: var(--mono); font-size: 1.0625rem; white-space: nowrap; }
.regex-input { flex: 1 1 auto; min-width: 0; height: 46px; border: 0; background: transparent; color: var(--text); font-size: 1rem; }
.regex-input:focus { outline: none; }
.regex-flags label { font-family: var(--mono); font-size: 0.8125rem; }
.regex-preview { min-height: 64px; max-height: 320px; overflow: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; line-height: 1.6; }
.regex-hit { padding: 1px 0; border-radius: 3px; background: color-mix(in srgb, var(--cat, var(--primary)) 24%, transparent); color: inherit; box-shadow: inset 0 -2px 0 var(--cat, var(--primary)); }
.regex-hit.is-alt { background: color-mix(in srgb, #f59e0b 30%, transparent); box-shadow: inset 0 -2px 0 #d97706; }
.regex-hit.is-empty { display: inline-block; width: 2px; height: 1.2em; margin: 0 -1px; vertical-align: text-bottom; background: var(--danger); box-shadow: none; }
.regex-group { display: block; }
.regex-table th:first-child { width: 3.5em; }

.jwt-input { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
.jwt-parts { display: grid; gap: 16px; }
@media (min-width: 960px) { .jwt-parts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.jwt-part .code-box { margin-top: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.b64-file { padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.b64-file p { margin: 8px 0 0; }
.b64-preview { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; }

.ts-now { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ts-now > div:not(.inline-actions) { display: grid; }
.ts-now strong { font-size: clamp(1.25rem, 3vw, 1.6rem); font-variant-numeric: tabular-nums; color: var(--primary); }
.ts-wide { grid-column: span 2; }
@media (max-width: 640px) { .ts-wide { grid-column: auto; } }
.ts-table th { width: 32%; }
.ts-table td { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ts-copy { flex: none; }
@media (max-width: 640px) { .ts-table th { width: auto; } }

.meta-form, .meta-previews { display: grid; gap: 12px; min-width: 0; }
.meta-previews .serp-title, .meta-previews .serp-desc { display: block; }
.meta-previews .field-label { margin: 0; }
.hint.is-over { color: var(--warning); font-weight: 600; }
.share-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); max-width: 520px; }
.share-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.91 / 1; padding: 12px; text-align: center; background: var(--surface-2); color: var(--muted); font-size: 0.875rem; }
.share-image.is-missing { aspect-ratio: 3 / 1; }
.share-body { display: grid; gap: 2px; padding: 10px 14px 12px; border-top: 1px solid var(--border); }
.share-domain { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.02em; }
.share-title { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.share-desc { font-size: 0.875rem; color: var(--muted); overflow-wrap: anywhere; }

.gen-layout { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .gen-layout { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 1fr); } }
.gen-preview { display: flex; align-items: center; justify-content: center; min-height: 260px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); }
.gen-swatch { width: 100%; min-height: 240px; border-radius: 12px; }
.gen-controls { display: grid; gap: 14px; min-width: 0; }
.stop-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.stop-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 3.2em auto 40px; align-items: center; gap: 8px; }
.stop-row output { font-variant-numeric: tabular-nums; font-size: 0.875rem; color: var(--muted); }
.stop-op { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; color: var(--muted); }
.stop-opacity { width: 4.2em; min-height: 36px; padding: 4px 6px; }
.stop-remove { width: 36px; height: 36px; }
@media (max-width: 420px) { .stop-row { grid-template-columns: 48px minmax(0, 1fr) 40px; } .stop-row output, .stop-op { grid-column: 2; } .stop-row .stop-remove { grid-column: 3; grid-row: 1; } }
.shadow-stage { min-height: 300px; background: #eef2f7; }
.shadow-box { width: min(200px, 60%); aspect-ratio: 1; background: #fff; border-radius: 16px; }
.layer-tabs { margin-bottom: 8px; }
.layer-tab { border: 1px solid var(--border-strong); background: var(--card); color: var(--text); }
.layer-tab[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }

.ex-count { color: var(--muted); font-weight: 400; font-size: 0.8125rem; margin-inline-start: 4px; }
.segmented input:checked + label .ex-count { color: inherit; opacity: 0.85; }

.ic-pickers { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ic-pick { display: grid; gap: 6px; min-width: 0; }
.ic-drop { display: grid; justify-items: center; gap: 8px; padding: 18px 14px; text-align: center; border: 2px dashed color-mix(in srgb, var(--cat, var(--primary)) 38%, var(--border-strong)); border-radius: var(--radius); background: color-mix(in srgb, var(--cat-bg, var(--primary-tint)) 45%, var(--card)); }
.ic-drop.is-dragover { border-color: var(--cat, var(--primary)); background: var(--cat-bg, var(--primary-tint)); }
.ic-thumb { max-width: 100%; max-height: 140px; border-radius: 8px; }
.ic-name { margin: 0; font-size: 0.875rem; color: var(--muted); overflow-wrap: anywhere; }
.ic-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 18px 0 12px; }
.ic-threshold { min-width: 220px; }
.ic-stage { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--card) 0 50%) 0 0 / 20px 20px; }
.ic-slider .compare-img { max-height: 70vh; }
.ic-side { display: grid; gap: 10px; padding: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.ic-side figure { margin: 0; display: grid; gap: 4px; justify-items: center; }
.ic-side canvas { max-width: 100%; height: auto; max-height: 70vh; }
.ic-side figcaption { font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.ic-diff { padding: 10px; text-align: center; }
.ic-diff canvas { max-width: 100%; height: auto; max-height: 70vh; }
.ic-stats { margin-top: 14px; }

.dup-sets { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.dup-set { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.dup-head { margin: 0 0 6px; font-weight: 600; }
.dup-set ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 2px; }
.dup-file { font-size: 0.8125rem; }
.dup-set .hint { margin-top: 6px; font-size: 0.75rem; }

.fs-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 6px 0 14px; }
.fs-grid .section-title { margin-top: 8px; }
.fs-grid .kv-list { grid-template-columns: minmax(0, 1fr) auto; }
.fs-grid .kv-list dd { text-align: end; font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .hero-chips { gap: 6px; }
  .hero-chips .chip { min-height: 40px; padding: 6px 12px; font-size: 0.875rem; }
}

:root { --cat-calc: #4d7c0f; --cat-calc-bg: #f1f8e6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cat-calc: #bef264; --cat-calc-bg: #20300c; }
}
:root[data-theme="dark"] { --cat-calc: #bef264; --cat-calc-bg: #20300c; }
[data-cat="calc"] { --cat: var(--cat-calc); --cat-bg: var(--cat-calc-bg); }

.kv-list > div { display: contents; }
.kv-wide { grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); }

@media (max-width: 480px) { .kv-wide { grid-template-columns: minmax(0, 1fr); } }
.code-input { font-family: var(--mono); }

.diff-list { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); max-height: 60vh; overflow: auto; background: var(--card); }
.diff-item { display: grid; grid-template-columns: 1.5em minmax(0, max-content) minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 7px 12px; border-top: 1px solid var(--border); font-size: 0.875rem; }
.diff-item:first-child { border-top: 0; }
.diff-sign { font: 700 1rem/1 var(--mono); text-align: center; }
.diff-path { font-weight: 600; overflow-wrap: anywhere; }
.diff-detail { font-family: var(--mono); color: var(--muted); }
.diff-added .diff-sign { color: var(--success); }
.diff-removed .diff-sign { color: var(--danger); }
.diff-changed .diff-sign, .diff-type .diff-sign { color: var(--warning); }
@media (max-width: 600px) { .diff-item { grid-template-columns: 1.5em minmax(0, 1fr); } .diff-detail { grid-column: 2; } }

.param-table td { padding: 6px 8px; }
.param-table .input { width: 100%; min-width: 0; }
.param-table td.param-remove { width: 52px; }
@media (max-width: 640px) { .param-table td.param-remove::before { content: none; } }

.reference-filters { align-items: end; }
.status-list { display: grid; gap: 10px; }
.status-item { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); scroll-margin-top: 90px; }
.status-item p { margin: 6px 0 0; }
.status-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 1.05rem; }
.status-code { padding: 2px 8px; border-radius: 6px; background: var(--surface); font: 700 1rem/1.4 var(--mono); }
.status-2xx { color: var(--success); }
.status-3xx { color: var(--primary); }
.status-4xx, .status-5xx { color: var(--danger); }
.status-badge { padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.status-spec { margin-inline-start: 4px; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.is-highlight { outline: 3px solid var(--focus); outline-offset: 2px; }

.chmod-grid th, .chmod-grid td { text-align: center; }
.chmod-grid tbody th { text-align: start; }
.chmod-grid input[type="checkbox"] { width: 24px; height: 24px; margin: 0; }
@media (max-width: 640px) { .chmod-grid td { display: flex; align-items: center; gap: 10px; text-align: start; } }

.cron-result .calc-result-value { font-size: clamp(1.15rem, 3vw, 1.5rem); letter-spacing: 0; }
.cron-fields .field { min-width: 0; }
.cron-runs { margin: 6px 0 0; padding-inline-start: 1.4em; font-variant-numeric: tabular-nums; }
.cron-runs li { padding: 2px 0; }

.calc-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.calc-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); min-width: 0; }
.calc-card-title { margin: 0 0 10px; font-size: 1rem; }
.calc-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.calc-num { width: 7.5em; min-width: 0; flex: 0 1 7.5em; font-variant-numeric: tabular-nums; }
.calc-card-result { margin: 12px 0 0; overflow-wrap: anywhere; }
.calc-card-result strong { font-size: 1.35rem; color: var(--primary); font-variant-numeric: tabular-nums; }
.calc-card-result .hint { display: block; margin-top: 2px; }
.unit-row { align-items: end; }
.unit-swap .btn { width: 100%; }
.tz-table td:nth-child(2) { font-variant-numeric: tabular-nums; }
.tz-day { color: var(--warning); font-weight: 600; font-size: 0.8125rem; white-space: nowrap; }
.random-result .calc-result-value { word-spacing: 0.4em; }
.date-amounts .field { min-width: 0; }

.char-cell { display: inline-block; min-width: 1.6em; font-size: 1.25rem; text-align: center; }
.md-align { gap: 10px 14px; }
.md-align-col { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.data-table .align-left { text-align: start; }
.data-table .align-center { text-align: center; }
.data-table .align-right { text-align: end; }

.th-sort { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.th-sort::after { content: "\2195"; opacity: 0.45; font-size: 0.85em; }
th[aria-sort="ascending"] .th-sort::after { content: "\2191"; opacity: 1; }
th[aria-sort="descending"] .th-sort::after { content: "\2193"; opacity: 1; }
.th-sort:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.data-table tr.is-flagged td { background: var(--warning-bg); }
.data-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.persp-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; margin: 8px 0 16px; }
@media (max-width: 760px) { .persp-layout { grid-template-columns: minmax(0, 1fr); } }
.persp-stage { margin: 14px; max-width: calc(100% - 28px); touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.persp-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.persp-lines polygon { fill: var(--primary); fill-opacity: 0.12; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.persp-handle { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border-radius: 50%; border: 3px solid #fff; background: var(--primary); opacity: 0.9; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35); cursor: grab; touch-action: none; }
.persp-handle:active { cursor: grabbing; }
.persp-handle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; opacity: 1; }
.persp-loupe { position: absolute; top: 8px; width: 128px; height: 128px; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow-lg); pointer-events: none; }
.persp-result .section-title { margin-top: 8px; }
.persp-preview { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); background: var(--surface); }

.photo-sheet-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; margin: 8px 0 16px; }
@media (max-width: 760px) { .photo-sheet-layout { grid-template-columns: minmax(0, 1fr); } }
.photo-frame { display: flex; justify-content: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.photo-frame canvas { display: block; max-width: 100%; height: auto; cursor: grab; touch-action: none; box-shadow: var(--shadow); }
.photo-frame canvas:active { cursor: grabbing; }
.photo-frame canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sheet-paper { display: flex; justify-content: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.sheet-paper canvas { display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; background: #fff; box-shadow: var(--shadow); }
.field-inline { display: flex; align-items: center; gap: 8px; margin: 0; }
.field-inline label { margin: 0; font-weight: 600; }

.diff-page { display: block; margin: 10px 0 4px; font: 600 0.8125rem/1.4 var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.diff-page:first-child { margin-top: 0; }
.diff-gap-inline { color: var(--muted); font-style: italic; font-size: 0.875rem; }
.legend-ins { text-decoration: none; background: color-mix(in srgb, var(--success) 22%, transparent); border-radius: 3px; }
.legend-del { text-decoration: line-through; background: color-mix(in srgb, var(--danger) 20%, transparent); border-radius: 3px; }
.pc-pages { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pc-visual { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
@media (min-width: 900px) { .pc-visual { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.pc-visual figure { margin: 0; min-width: 0; }
.pc-visual figcaption { font-weight: 600; font-size: 0.875rem; margin-bottom: 6px; }
.pc-visual canvas { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); background: #fff; }

.pr-result { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 640px) { .pr-result { grid-template-columns: auto minmax(0, 1fr); } }
.pr-thumb { display: block; max-width: 240px; width: 100%; height: auto; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow); }

.eq-bands { display: grid; gap: 4px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.eq-curve { margin: 4px 0 0; }
.eq-curve svg { display: block; width: 100%; height: 120px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.eq-zero { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.eq-line { fill: none; stroke: var(--primary); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.wf-num { width: 7.5em; }
.wf-preview { display: flex; justify-content: center; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: 80px; }
.wf-preview canvas { display: block; max-width: 100%; max-height: 480px; width: auto; height: auto; }

.data-table td.pe-text { overflow-wrap: normal; word-break: normal; min-width: 4ch; }

:root { --label: var(--font); }
body { background: var(--page); }

.brand { gap: 10px; font-size: 1.125rem; }
.brand-mark { border-radius: 8px; }
.brand-name-main { font-weight: 700; }
.brand-name-rest { font-weight: 400; color: var(--muted); }

.side-heading, .tool-card-cat, .search-result-cat, .footer-heading, .license-meta dt { letter-spacing: 0.04em; }
.side-heading { font-size: 0.75rem; font-weight: 600; }
.footer-heading { font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.tool-card-cat { font-size: 0.75rem; font-weight: 600; }
.footer-bottom .copyright { font-size: 0.8125rem; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 4px 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
  color: var(--muted); font-size: 0.8125rem; font-weight: 500; line-height: 1.5;
}
.hero-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #16a34a; }
.hero-accent { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--primary); }

.tool-card-link { border-radius: 12px; }
.tool-card-icon { border-radius: 10px; }
.tool-card-meta { width: 100%; }
.tool-card-go { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; font-size: 0.8125rem; font-weight: 600; color: var(--primary); }
.tool-card-go .icon { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .tool-card-go .icon { transition: transform 0.15s var(--ease-out, ease-out); }
  a.tool-card-link:hover .tool-card-go .icon { transform: translateX(3px); }
}

.btn { border-radius: 10px; }
.chip { border-radius: 10px; }
.hero-search-box { border-radius: 14px; }

.about-licenses { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.about-licenses-note { color: var(--muted); font-size: 0.8125rem; }

.licenses .license-index { margin: 24px 0 8px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.licenses .license-index-title { margin: 0 0 8px; font-size: 0.75rem; font-family: var(--label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.licenses .license-index ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.licenses .license-index li + li { margin-top: 0; }
.licenses .license-index a { display: inline-block; padding: 3px 0; font-size: 0.9375rem; }
.license-list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.licenses .license-list li + li { margin-top: 0; }
.license-item { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.licenses h2.license-name { margin: 0 0 10px; font-size: 1.125rem; }
.license-meta { display: grid; gap: 6px 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); margin: 0; }
.license-meta > div { min-width: 0; }
.license-meta .license-meta-wide { grid-column: 1 / -1; }
.license-meta dt { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.license-meta dd { margin: 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.license-meta dd a { display: inline-flex; align-items: center; gap: 4px; }
.license-same { margin: 12px 0 0; font-size: 0.875rem; color: var(--muted); }
.license-text { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.license-text summary { cursor: pointer; font-weight: 600; font-size: 0.9375rem; color: var(--link); min-height: 32px; display: flex; align-items: center; }
.license-text pre {
  margin: 10px 0 0; max-height: 420px; overflow: auto; padding: 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); font-family: var(--mono); font-size: 0.78125rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 480px) { .license-item { padding: 14px; } }
.license-text summary { list-style: none; gap: 8px; }
.license-text summary::-webkit-details-marker { display: none; }
.license-text summary::before { content: ""; flex: none; border-inline-start: 6px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.license-text[open] summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) { .license-text summary::before { transition: transform 0.15s; } }

:root { --cat-business: #0369a1; --cat-business-bg: #e7f3fb; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cat-business: #7dd3fc; --cat-business-bg: #0c2a3d; }
}
:root[data-theme="dark"] { --cat-business: #7dd3fc; --cat-business-bg: #0c2a3d; }
[data-cat="business"] { --cat: var(--cat-business); --cat-bg: var(--cat-business-bg); }

.input-pair { display: flex; gap: 6px; min-width: 0; }
.input-pair > .input { flex: 1 1 auto; min-width: 0; }
.input-pair > .select { flex: 0 0 auto; width: auto; }
.size-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.split-bar { display: flex; height: 12px; margin: 12px 0 6px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.split-bar span { display: block; height: 100%; }
.split-bar-a { background: var(--primary); }
.split-bar-b { background: color-mix(in srgb, var(--primary) 35%, var(--surface-2)); }
.split-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 4px; font-size: 0.875rem; color: var(--muted); }
.split-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: -8px; }
.split-legend .dot-a { background: var(--primary); }
.split-legend .dot-b { background: color-mix(in srgb, var(--primary) 35%, var(--surface-2)); }
.schedule { margin-top: 22px; }
.schedule-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.schedule-head .section-title { margin: 0 auto 0 0; }
.table-scroll { max-height: 440px; overflow-y: auto; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; }
.num-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .num-table td { white-space: normal; } .table-scroll { max-height: 520px; } }
.tx-split { margin-top: 14px; }
.mg-results { margin-top: 16px; }
.mg-results .calc-card-result strong { display: block; }

.bmi-scale { position: relative; margin: 6px 0 18px; padding-top: 4px; }
.bmi-scale-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; }
.bmi-scale-bar span { display: block; height: 100%; }
.bmi-under { width: 14%; background: #60a5fa; }
.bmi-healthy { width: 26%; background: #22c55e; }
.bmi-over { width: 20%; background: #f59e0b; }
.bmi-obese { width: 40%; background: #ef4444; }
.bmi-marker { position: absolute; top: 0; width: 4px; height: 20px; margin-inline-start: -2px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--card); }
.bmi-scale-labels { position: relative; height: 1.4em; margin-top: 4px; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bmi-scale-labels span { position: absolute; transform: translateX(-50%); }
.bmi-scale-labels span:nth-child(1) { left: 0; transform: none; }
.bmi-scale-labels span:nth-child(2) { left: 14%; }
.bmi-scale-labels span:nth-child(3) { left: 40%; }
.bmi-scale-labels span:nth-child(4) { left: 60%; }
.bmi-scale-labels span:nth-child(5) { right: 0; left: auto; transform: none; }

.sci { max-width: 640px; margin: 0 auto; }
.sci-display { padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.sci-input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--text); font: 500 1.25rem/1.4 var(--mono); padding: 0; }
.sci-input:focus { outline: none; }
.sci-display:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.sci-result { display: block; margin-top: 6px; text-align: end; font: 700 clamp(1.6rem, 6vw, 2.3rem)/1.2 var(--font); letter-spacing: -0.01em; color: var(--primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sci-result.is-stale { opacity: 0.45; }
.sci-error { margin: 6px 0 0; color: var(--danger); font-size: 0.875rem; }
.sci-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; }
.sci-equals { min-width: 96px; font-size: 1.25rem; }
.sci-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.sci-key { min-height: 48px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font: 600 1rem var(--font); cursor: pointer; }
.sci-key:hover { border-color: var(--border-strong); background: var(--surface); }
.sci-key:active { transform: translateY(1px); }
.sci-num { font-size: 1.125rem; background: var(--surface); }
.sci-op { color: var(--primary); }
.sci-fn { font-family: var(--mono); font-size: 0.875rem; color: var(--muted); }
.sci-act { color: var(--danger); }
@media (max-width: 420px) { .sci-keys { gap: 4px; } .sci-key { min-height: 44px; font-size: 0.9375rem; } .sci-fn { font-size: 0.75rem; } }
.sci-history { margin-top: 18px; }
.sci-history-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.sci-history-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font: 0.9375rem var(--mono); text-align: start; cursor: pointer; }
.sci-history-item:hover { border-color: var(--primary); }
.sci-history-expr { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.sci-history-result { font-weight: 700; overflow-wrap: anywhere; }

.stats-list dd { font-variant-numeric: tabular-nums; }
.words-result { margin: 14px 0 8px; padding: 16px 18px; border-radius: var(--radius); background: var(--primary-tint); }
.words-text { margin: 0 0 4px; font-size: clamp(1.125rem, 2.4vw, 1.375rem); font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }

.wa-number { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 560px) { .wa-number { grid-template-columns: 1fr; } }
.wa-output { margin-top: 18px; }
.wa-extras { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin-top: 18px; align-items: start; }
@media (min-width: 720px) { .wa-extras { grid-template-columns: auto minmax(0, 1fr); } }
.wa-qr { margin: 0; display: grid; gap: 8px; justify-items: start; }
.wa-qr canvas { display: block; width: 220px; height: 220px; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; image-rendering: pixelated; }
.wa-html .textarea { min-height: 96px; white-space: pre-wrap; }

.dl-results { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.dl-item { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); min-width: 0; }
.dl-item.is-problem { border-color: var(--warning-border); background: var(--warning-bg); }
.dl-service { margin: 0 0 6px; font: 600 0.75rem var(--label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cat, var(--muted)); }
.dl-from { margin: 0 0 4px; font: 0.8125rem var(--mono); color: var(--muted); }
.dl-problem { margin: 0; }
.dl-row { display: flex; gap: 8px; align-items: center; }
.dl-row .input { flex: 1 1 auto; min-width: 0; }
.dl-item .hint { margin-top: 6px; font-size: 0.8125rem; }

.timer-face { margin: 18px 0 4px; padding: 24px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); text-align: center; }
.timer-display { font: 700 clamp(3rem, 14vw, 6.5rem)/1 var(--font); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere; }
.timer-event { margin: 0 0 8px; font: 600 0.875rem var(--label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.timer-progress { height: 6px; max-width: 520px; margin: 18px auto 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.timer-progress span { display: block; height: 100%; width: 0; background: var(--primary); }
.timer-status { min-height: 1.5em; margin: 12px 0 0; color: var(--muted); }
.timer-actions { justify-content: center; }
.timer-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-timer].is-done .timer-display { color: var(--danger); }
@media (prefers-reduced-motion: no-preference) { [data-timer].is-done .timer-display { animation: timer-blink 1s steps(2) 3; } }
@keyframes timer-blink { 50% { opacity: 0.25; } }
.timer-face:fullscreen { display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; background: var(--bg); }
.timer-face:fullscreen .timer-display { font-size: min(24vw, 40vh); }
.num-table tr.is-best th, .num-table tr.is-best td { color: var(--success); }
.num-table tr.is-worst th, .num-table tr.is-worst td { color: var(--danger); }

.fancy-list { list-style: none; margin: 16px 0 10px; padding: 0; display: grid; gap: 8px; }
.fancy-row { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.fancy-name { font: 600 0.75rem var(--label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.fancy-out { min-width: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
@media (max-width: 560px) { .fancy-row { grid-template-columns: minmax(0, 1fr) auto; } .fancy-name { grid-column: 1 / -1; } }

.hash-list { margin: 14px 0 6px; display: grid; gap: 8px; }
.hash-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.hash-row dt { font: 600 0.8125rem var(--label); color: var(--muted); }
.hash-row dd { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hash-row code { flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0; font-size: 0.875rem; }
@media (max-width: 560px) { .hash-row { grid-template-columns: 1fr; } }

.color-swatch-input { width: 48px; height: 44px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; flex: none; }
.palette-strip { list-style: none; margin: 16px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: 8px; }
.palette-swatch { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 170px; padding: 10px; border-radius: var(--radius); border: 1px solid rgba(0, 0, 0, 0.08); }
.palette-code, .palette-lock { border: 0; background: transparent; color: inherit; font: 700 0.9375rem var(--mono); text-align: start; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.palette-lock { font: 600 0.75rem var(--label); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
.palette-code:hover, .palette-lock:hover { background: rgba(127, 127, 127, 0.18); }
.palette-swatch.is-locked .palette-lock { opacity: 1; text-decoration: underline; }

.invoice-top { margin: 0 0 14px; }
.invoice-box { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.invoice-box legend { padding: 0 6px; font: 600 0.75rem var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.invoice-parties { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-bottom: 16px; align-items: start; }
.invoice-split { align-self: end; padding-bottom: 10px; }
.invoice-lines { display: grid; gap: 10px; margin-top: 14px; }
.invoice-line { display: grid; grid-template-columns: minmax(0, 3fr) minmax(56px, 0.7fr) minmax(80px, 1fr) minmax(56px, 0.7fr) minmax(90px, 1fr) auto; gap: 8px; align-items: end; }
.invoice-tool.no-tax [data-tax-col] { visibility: hidden; }
.il-amount { display: grid; gap: 6px; padding-bottom: 10px; font-variant-numeric: tabular-nums; text-align: end; }
.il-amount .field-label { font-size: 0.875rem; }
.il-remove { align-self: end; }
@media (max-width: 720px) {
  .invoice-line { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .il-desc { grid-column: 1 / -1; }
  .il-amount { grid-column: 1 / -2; text-align: start; padding-bottom: 6px; }
  .invoice-tool.no-tax [data-tax-col] { display: none; }
}
.invoice-adjust { margin-top: 14px; }
.invoice-logo { margin-bottom: 8px; }
.invoice-paper-wrap { padding: 16px; border-radius: var(--radius); background: var(--surface-2); }
.invoice-sheet {
  --iv-ink: #111827; --iv-muted: #4b5563; --iv-line: #d1d5db; --iv-accent: #1d4ed8;
  max-width: 820px; min-width: 0; margin: 0 auto; padding: 40px 44px; background: #ffffff; color: var(--iv-ink);
  font: 400 14px/1.5 var(--font); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); border-radius: 4px; overflow-wrap: anywhere;
}
@media (max-width: 560px) { .invoice-sheet { padding: 22px 16px; font-size: 12.5px; } .invoice-paper-wrap { padding: 8px; } }
.iv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 2px solid var(--iv-accent); }
.iv-brand { min-width: 0; flex: 1 1 220px; }
.iv-logo { display: block; max-width: 180px; max-height: 70px; object-fit: contain; margin-bottom: 10px; }
.iv-from::first-line { font-weight: 700; font-size: 1.1em; }
.iv-placeholder { color: #6b7280; font-style: italic; }
.iv-title-box { text-align: end; margin-inline-start: auto; }
.iv-title { margin: 0 0 8px; font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--iv-accent); }
.iv-meta { margin: 0; display: grid; gap: 2px; }
.iv-meta div { display: flex; justify-content: flex-end; gap: 10px; }
.iv-meta dt { color: var(--iv-muted); }
.iv-meta dd { margin: 0; font-weight: 600; }
.iv-bill { margin: 18px 0; }
.iv-bill h3, .iv-notes h3 { margin: 0 0 4px; font: 700 11px var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--iv-muted); }
.iv-table { width: 100%; border-collapse: collapse; margin: 6px 0 0; table-layout: auto; }
.iv-table th { text-align: start; font: 700 11px var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--iv-muted); padding: 8px 6px; border-bottom: 1px solid var(--iv-ink); }
.iv-table td { padding: 9px 6px; border-bottom: 1px solid var(--iv-line); vertical-align: top; }
.iv-table .iv-num { text-align: end; font-variant-numeric: tabular-nums; }
.iv-table td.iv-num { white-space: nowrap; }
@media (max-width: 560px) { .iv-table td.iv-num { white-space: normal; } .iv-table th, .iv-table td { padding: 7px 3px; } }
.iv-totals { margin: 12px 0 0 auto; max-width: 340px; display: grid; gap: 4px; }
.iv-totals div { display: flex; justify-content: space-between; gap: 16px; }
.iv-totals dt { color: var(--iv-muted); }
.iv-totals dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-totals .iv-grand { margin-top: 6px; padding-top: 8px; border-top: 2px solid var(--iv-ink); font-size: 1.15em; font-weight: 700; }
.iv-totals .iv-grand dt { color: var(--iv-ink); }
.iv-notes { margin-top: 22px; }

@media print {
  body:has(.invoice-sheet) > :not(.app),
  body:has(.invoice-sheet) .app > :not(.app-content),
  body:has(.invoice-sheet) .app-content > :not(main),
  body:has(.invoice-sheet) main > :not(.tool-page),
  .tool-page:has(.invoice-sheet) > :not(.tool-app),
  .tool-app:has(.invoice-sheet) > :not([data-invoice]),
  .invoice-tool > :not(.invoice-paper-wrap) { display: none !important; }
  body:has(.invoice-sheet), body:has(.invoice-sheet) .app, body:has(.invoice-sheet) .app-content, body:has(.invoice-sheet) main,
  .tool-page:has(.invoice-sheet), .tool-app:has(.invoice-sheet), .invoice-tool, .invoice-paper-wrap {
    display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
    background: #ffffff !important; max-width: none !important; min-height: 0 !important; width: auto !important;
  }
  .invoice-sheet { max-width: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; font-size: 11pt; }
  .iv-table tr, .iv-totals, .iv-notes { break-inside: avoid; }
  @page { margin: 14mm; }
}

[data-invoice] .textarea, [data-wa-link] .textarea, [data-fancy-text] .textarea, [data-stats-calc] .textarea, [data-direct-link] .textarea, [data-text-hash] .textarea { min-height: 0; }
[data-timer] [data-panel] { margin-top: 14px; }

.side-group[data-cat] > .side-row .icon:first-child { color: var(--muted); }

.mainnav, .tabbar, .settings-btn { display: none; }
.mainnav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.mainnav-menu { position: relative; }
.mainnav-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px;
  border: 0; border-radius: 10px; background: transparent; color: var(--text);
  font: inherit; font-size: 0.9375rem; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.mainnav-link > .icon:first-child { display: none; }
.mainnav-link:hover, .mainnav-link[aria-expanded="true"] { background: var(--surface); }
.mainnav-link[aria-current="page"], .mainnav-link.is-current { color: var(--primary); }
.mainnav-caret { color: var(--muted); transform: rotate(90deg); }
.mainnav-link[aria-expanded="true"] .mainnav-caret { transform: rotate(-90deg); }
.mainnav-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 50; min-width: 300px; padding: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg);
}
.mainnav-panel-wide { width: min(620px, calc(100vw - 48px)); }
.mainnav-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.mainnav-stack, .mainnav-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mainnav-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.mainnav-item:hover { background: var(--surface); }
.mainnav-item[aria-current] { background: var(--primary-tint); }
.mainnav-item-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--primary-tint); color: var(--primary); }
.mainnav-item-text { display: grid; min-width: 0; line-height: 1.25; }
.mainnav-item-text strong { font-size: 0.9375rem; font-weight: 600; }
.mainnav-item-text span { font-size: 0.8125rem; color: var(--muted); }
.mainnav-all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; padding: 10px; border-top: 1px solid var(--border); font-weight: 600; text-decoration: none; }
.mainnav-heading { margin: 8px 10px 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.mainnav-plain .side-sublink { color: var(--text); }
.mainnav-plain .side-empty { padding: 4px 10px 8px; }
@media (prefers-reduced-motion: no-preference) { .mainnav-caret { transition: transform 0.15s; } }

@media (max-width: 1199px) { :root:not([data-nav="bottom"]) .mainnav-blog { display: none; } }

@media (min-width: 1024px) {
  .settings-btn { display: inline-flex; }
  .settings-btn[aria-current="page"] { color: var(--primary); background: var(--primary-tint); }

  :root:not([data-nav="left"]):not([data-nav="right"]) .sidebar,
  :root:not([data-nav="left"]):not([data-nav="right"]) .sidebar-toggle { display: none; }
  :root:not([data-nav="left"]):not([data-nav="right"]) .mainnav { display: block; flex: 0 1 auto; min-width: 0; }
  :root:not([data-nav="left"]):not([data-nav="right"]) .topbar-inner { padding: 0 20px; gap: 10px; }
  :root:not([data-nav="left"]):not([data-nav="right"]) .topbar .brand { margin-inline-end: 10px; }
  :root:not([data-nav="left"]):not([data-nav="right"]) .hsearch { max-width: 420px; margin-block: 0; margin-inline: auto 0; }

  [data-nav="bottom"] .mainnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 6px 20px;
    background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -4px 18px rgba(17, 24, 39, 0.06);
  }
  [data-nav="bottom"] .mainnav-list { justify-content: center; gap: 6px; }
  [data-nav="bottom"] .mainnav-link > .icon:first-child { display: inline; color: var(--muted); }
  [data-nav="bottom"] .mainnav-link[aria-current="page"] > .icon:first-child, [data-nav="bottom"] .mainnav-link.is-current > .icon:first-child { color: var(--primary); }
  [data-nav="bottom"] .mainnav-panel { top: auto; bottom: calc(100% + 8px); }
  [data-nav="bottom"] .mainnav-caret { transform: rotate(-90deg); }
  [data-nav="bottom"] .mainnav-link[aria-expanded="true"] .mainnav-caret { transform: rotate(90deg); }
  [data-nav="bottom"] .app-content { padding-bottom: 56px; }

  [data-nav="right"] .app { flex-direction: row-reverse; }
  [data-nav="right"] .sidebar { border-right: 0; border-left: 1px solid var(--border); }
  [data-nav="right"] .side-hide .icon { transform: scaleX(-1); }
}

@media (max-width: 1023.98px) {

  [data-nav="right"] .sidebar { left: auto; right: 0; transform: translateX(105%); }
  [data-nav="right"] .sidebar.is-open { transform: none; }

  [data-nav="bottom"] .sidebar-toggle { display: none; }
  [data-nav="bottom"] .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding-bottom: env(safe-area-inset-bottom); background: var(--card); border-top: 1px solid var(--border);
  }
  [data-nav="bottom"] .app-content { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}
.tabbar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 58px;
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.6875rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.tabbar-item .icon { width: 22px; height: 22px; }
.tabbar-item[aria-current="page"], .tabbar-item[aria-expanded="true"] { color: var(--primary); }
.tabbar-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-link[aria-current="true"] { color: var(--primary); font-weight: 600; }
.side-link[aria-current="true"] .icon { color: inherit; }

.nav-choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); margin-top: 6px; }
.nav-choice { position: relative; }
.nav-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav-choice label {
  display: grid; gap: 8px; justify-items: center; height: 100%; padding: 12px 10px; border: 1px solid var(--border-strong);
  border-radius: 12px; background: var(--card); cursor: pointer; text-align: center; font-weight: 600; font-size: 0.9375rem;
}
.nav-choice label:hover { border-color: var(--primary); }
.nav-choice input:checked + label { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--primary-tint); color: var(--primary); }
.nav-choice input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.nav-pic { position: relative; width: 84px; height: 56px; border: 2px solid currentColor; border-radius: 7px; opacity: 0.8; }
.nav-pic::before { content: ""; position: absolute; background: currentColor; opacity: 0.55; border-radius: 2px; }
.nav-pic-top::before { left: 4px; right: 4px; top: 4px; height: 9px; }
.nav-pic-left::before { left: 4px; top: 4px; bottom: 4px; width: 18px; }
.nav-pic-right::before { right: 4px; top: 4px; bottom: 4px; width: 18px; }
.nav-pic-bottom::before { left: 4px; right: 4px; bottom: 4px; height: 9px; }
.setting-group[data-sidebar-options][aria-disabled="true"] { opacity: 0.55; }
.clear-data-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.clear-data-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.clear-data-confirm[hidden] { display: none; }

.home-section > .section-lead { margin: -4px 0 18px; }

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../vendor/jakarta/jakarta-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../vendor/jakarta/jakarta-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../vendor/jakarta/jakarta-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --label: var(--font);
  --page: #f7f6fb;
  --bg: #ffffff;
  --surface: #f2f1f8;
  --surface-2: #e8e6f2;
  --card: #ffffff;
  --text: #17142b;
  --muted: #5c5973;
  --border: #e6e4ef;
  --border-strong: #d3d0e1;
  --brand: #5038ed;
  --brand-hover: #3f28d6;
  --brand-tint: #efecff;
  --brand-ink: #ffffff;
  --primary: var(--brand);
  --primary-hover: var(--brand-hover);
  --primary-text: var(--brand-ink);
  --primary-tint: var(--brand-tint);
  --link: #4a31e0;
  --focus: #5038ed;
  --grad: linear-gradient(115deg, #5038ed 0%, #9d3cf0 52%, #e8488f 100%);
  --hero-bg: radial-gradient(60% 90% at 0% 0%, #e9e3ff 0%, transparent 60%), radial-gradient(55% 80% at 100% 0%, #ffe4f1 0%, transparent 60%), radial-gradient(70% 90% at 50% 100%, #e3efff 0%, transparent 70%), #fbfaff;
  --hero-grid: rgba(80, 56, 237, 0.07);
  --shadow: 0 1px 2px rgba(23, 20, 43, 0.04), 0 6px 20px rgba(23, 20, 43, 0.06);
  --shadow-lift: 0 2px 4px rgba(23, 20, 43, 0.04), 0 14px 34px rgba(80, 56, 237, 0.13);
  --radius: 14px;
  --radius-lg: 22px;

  --cat-image: #7c3aed; --cat-image-bg: #f2ecff;
  --cat-video: #be185d; --cat-video-bg: #fdebf3;
  --cat-audio: #c2410c; --cat-audio-bg: #ffefe5;
  --cat-pdf: #c81e1e; --cat-pdf-bg: #feecec;
  --cat-file: #0e7490; --cat-file-bg: #e3f5f9;
  --cat-text: #047857; --cat-text-bg: #e3f6ee;
  --cat-dev: #4f46e5; --cat-dev-bg: #ecebff;
  --cat-calc: #8a5306; --cat-calc-bg: #fdf3dc;
  --cat-business: #1d4ed8; --cat-business-bg: #e6eeff;
  --cat-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0d0b1a;
    --bg: #0d0b1a;
    --surface: #17142b;
    --surface-2: #211d3a;
    --card: #141127;
    --text: #edecf6;
    --muted: #a9a5c4;
    --border: #272345;
    --border-strong: #38325c;
    --brand: #8d7dff;
    --brand-hover: #aa9eff;
    --brand-tint: #231d4a;
    --brand-ink: #0d0b1a;
    --primary: var(--brand);
    --primary-hover: var(--brand-hover);
    --primary-text: var(--brand-ink);
    --primary-tint: var(--brand-tint);
    --link: #aa9eff;
    --focus: #aa9eff;
    --grad: linear-gradient(115deg, #8d7dff 0%, #c084fc 52%, #f472b6 100%);
    --hero-bg: radial-gradient(60% 90% at 0% 0%, rgba(110, 86, 255, 0.28) 0%, transparent 60%), radial-gradient(55% 80% at 100% 0%, rgba(236, 72, 153, 0.18) 0%, transparent 60%), radial-gradient(70% 90% at 50% 100%, rgba(59, 130, 246, 0.14) 0%, transparent 70%), #110e22;
    --hero-grid: rgba(170, 158, 255, 0.06);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 26px rgba(0, 0, 0, 0.28);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 38px rgba(0, 0, 0, 0.4);
    --cat-image: #c4b5fd; --cat-image-bg: #261c45;
    --cat-video: #f9a8d4; --cat-video-bg: #3b1529;
    --cat-audio: #fdba74; --cat-audio-bg: #3b2111;
    --cat-pdf: #fca5a5; --cat-pdf-bg: #3b1719;
    --cat-file: #67e8f9; --cat-file-bg: #0f2f39;
    --cat-text: #6ee7b7; --cat-text-bg: #0f3227;
    --cat-dev: #a5b4fc; --cat-dev-bg: #1e1f48;
    --cat-calc: #fcd34d; --cat-calc-bg: #33280c;
    --cat-business: #93c5fd; --cat-business-bg: #13264a;
    --cat-ink: #0d0b1a;
  }
}
:root[data-theme="dark"] {
  --page: #0d0b1a;
  --bg: #0d0b1a;
  --surface: #17142b;
  --surface-2: #211d3a;
  --card: #141127;
  --text: #edecf6;
  --muted: #a9a5c4;
  --border: #272345;
  --border-strong: #38325c;
  --brand: #8d7dff;
  --brand-hover: #aa9eff;
  --brand-tint: #231d4a;
  --brand-ink: #0d0b1a;
  --primary: var(--brand);
  --primary-hover: var(--brand-hover);
  --primary-text: var(--brand-ink);
  --primary-tint: var(--brand-tint);
  --link: #aa9eff;
  --focus: #aa9eff;
  --grad: linear-gradient(115deg, #8d7dff 0%, #c084fc 52%, #f472b6 100%);
  --hero-bg: radial-gradient(60% 90% at 0% 0%, rgba(110, 86, 255, 0.28) 0%, transparent 60%), radial-gradient(55% 80% at 100% 0%, rgba(236, 72, 153, 0.18) 0%, transparent 60%), radial-gradient(70% 90% at 50% 100%, rgba(59, 130, 246, 0.14) 0%, transparent 70%), #110e22;
  --hero-grid: rgba(170, 158, 255, 0.06);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 26px rgba(0, 0, 0, 0.28);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 38px rgba(0, 0, 0, 0.4);
  --cat-image: #c4b5fd; --cat-image-bg: #261c45;
  --cat-video: #f9a8d4; --cat-video-bg: #3b1529;
  --cat-audio: #fdba74; --cat-audio-bg: #3b2111;
  --cat-pdf: #fca5a5; --cat-pdf-bg: #3b1719;
  --cat-file: #67e8f9; --cat-file-bg: #0f2f39;
  --cat-text: #6ee7b7; --cat-text-bg: #0f3227;
  --cat-dev: #a5b4fc; --cat-dev-bg: #1e1f48;
  --cat-calc: #fcd34d; --cat-calc-bg: #33280c;
  --cat-business: #93c5fd; --cat-business-bg: #13264a;
  --cat-ink: #0d0b1a;
}

body { font-family: var(--font); background: var(--page); word-spacing: 0.02em; }
h1 { letter-spacing: -0.025em; }
h2, h3, .tool-card-title, .dropzone-title { letter-spacing: -0.012em; }
h1 { font-weight: 800; }
h2 { font-weight: 750; }
input, select, textarea, button { font-family: inherit; }

.tool-page[data-cat] { --primary: var(--brand); --primary-text: var(--brand-ink); --primary-tint: var(--brand-tint); --primary-hover: var(--brand-hover); }
.tool-page .dropzone { --cat: var(--brand); --cat-bg: var(--brand-tint); }
.btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 16px color-mix(in srgb, var(--primary) 26%, transparent); }
.btn-primary:hover { background: var(--primary-hover); }

.topbar { background: transparent; }
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.brand-name-main { font-weight: 800; letter-spacing: -0.02em; }
.brand-name-rest { font-weight: 500; }

.home-section { margin-top: 56px; }
.section-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
.section-icon { background: var(--brand-tint); color: var(--brand); border-radius: 10px; }
.section-head-stack { flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-bottom: 22px; }
.section-head-stack h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); }
.section-head-stack .section-lead { margin: 0; max-width: 620px; color: var(--muted); font-size: 1.0625rem; }
.section-link { color: var(--link); }

.home-hero {
  position: relative; isolation: isolate; max-width: none; margin: 6px 0 0; padding: 54px 20px 40px;
  border: 1px solid var(--border); border-radius: 28px; background: var(--hero-bg);
}
.home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size: 34px 34px; background-position: center top;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 35%, #000 30%, transparent 85%); mask-image: radial-gradient(75% 70% at 50% 35%, #000 30%, transparent 85%);
}
.home-hero > * { max-width: 900px; margin-inline-start: auto; margin-inline-end: auto; }
.home-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em; word-spacing: 0.04em; margin-bottom: 16px; }
.hero-accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .hero-accent { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; } }
.home-hero .lead { max-width: 700px; color: var(--muted); }
.hero-eyebrow { background: color-mix(in srgb, var(--card) 80%, transparent); border-color: var(--border); box-shadow: var(--shadow); font-weight: 600; }
.home-hero .hero-search { max-width: 700px; }
.hero-search-box { border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-lift); }
.hero-search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent), var(--shadow-lift); }
.hero-search-icon { color: var(--brand); }
.hero-chips { max-width: 820px; }
.chip { border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); border-color: var(--border); font-weight: 600; font-size: 0.9375rem; }
.chip:hover { border-color: var(--cat, var(--brand)); }
.hero-trust { margin-top: 20px; }
@media (max-width: 640px) {
  .home-hero { padding: 34px 14px 26px; border-radius: 22px; }
  .hero-chips .chip { min-height: 40px; padding: 4px 12px; font-size: 0.875rem; }
}

.work-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 1100px) { .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.work-card {
  --col: var(--brand); --col-ink: var(--link); --col-tint: var(--brand-tint); --col-grad: var(--grad);
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow); overflow: hidden;
}
.work-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--col-grad); }
.work-card[data-col="designers"] { --col-ink: #7c3aed; --col-tint: #f3ecff; --col-grad: linear-gradient(120deg, #8b5cf6, #ec4899); }
.work-card[data-col="video-editors"] { --col-ink: #c2410c; --col-tint: #fff0e6; --col-grad: linear-gradient(120deg, #f97316, #e11d48); }
.work-card[data-col="writers"] { --col-ink: #047857; --col-tint: #e4f7ef; --col-grad: linear-gradient(120deg, #10b981, #0ea5e9); }
.work-card[data-col="documents"] { --col-ink: #1d4ed8; --col-tint: #e8efff; --col-grad: linear-gradient(120deg, #3b82f6, #6366f1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .work-card[data-col="designers"] { --col-ink: #d8b4fe; --col-tint: #2a1b47; }
  :root:not([data-theme="light"]) .work-card[data-col="video-editors"] { --col-ink: #fdba74; --col-tint: #3b2012; }
  :root:not([data-theme="light"]) .work-card[data-col="writers"] { --col-ink: #6ee7b7; --col-tint: #0f3227; }
  :root:not([data-theme="light"]) .work-card[data-col="documents"] { --col-ink: #93c5fd; --col-tint: #142650; }
}
:root[data-theme="dark"] .work-card[data-col="designers"] { --col-ink: #d8b4fe; --col-tint: #2a1b47; }
:root[data-theme="dark"] .work-card[data-col="video-editors"] { --col-ink: #fdba74; --col-tint: #3b2012; }
:root[data-theme="dark"] .work-card[data-col="writers"] { --col-ink: #6ee7b7; --col-tint: #0f3227; }
:root[data-theme="dark"] .work-card[data-col="documents"] { --col-ink: #93c5fd; --col-tint: #142650; }
.work-card-head { display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; }
.work-card-head:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.work-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--col-grad); color: #ffffff; box-shadow: 0 8px 20px color-mix(in srgb, var(--col-ink) 28%, transparent); }
.work-icon .icon { width: 26px; height: 26px; }
.work-title { min-width: 0; }
.work-title h3 { margin: 0; font-size: 1.1875rem; line-height: 1.25; }
.work-count { display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 999px; background: var(--col-tint); color: var(--col-ink); font-size: 0.8125rem; font-weight: 700; }
.work-card > p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.work-tasks { list-style: none; margin: 0; padding: 0; }
.work-tasks li + li { border-top: 1px solid var(--border); }
.work-tasks a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 6px 2px; color: var(--text); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.work-tasks a .icon { flex: none; color: var(--col-ink); opacity: 0.55; }
.work-tasks a:hover { color: var(--col-ink); }
.work-tasks a:hover .icon { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .work-tasks a .icon { transition: transform 0.15s, opacity 0.15s; } .work-tasks a:hover .icon { transform: translateX(3px); } }
.work-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; min-height: 44px; padding: 8px 14px;
  border-radius: 12px; background: var(--col-tint); color: var(--col-ink); font-weight: 700; text-decoration: none;
}
.work-cta:hover { text-decoration: underline; text-underline-offset: 3px; }

.tool-grid { gap: 14px; }
.tool-card-link { border-radius: 16px; border-color: var(--border); box-shadow: 0 1px 2px rgba(23, 20, 43, 0.03); padding: 18px; }
.tool-card-icon { width: 44px; height: 44px; border-radius: 12px; }
.tool-card-title { font-weight: 700; }
.tool-card-cat { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--cat-bg, var(--surface)); color: var(--cat, var(--muted)); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; }
.tool-card-go { color: var(--link); }
@media (prefers-reduced-motion: no-preference) {
  .tool-card-link, .work-card, .category-card { transition: transform 0.18s var(--ease-out, ease-out), box-shadow 0.18s, border-color 0.18s; }
  a.tool-card-link:hover { transform: translateY(-2px); }
  .work-card:hover, .category-card:hover { transform: translateY(-2px); }
}
a.tool-card-link:hover, .work-card:hover, .category-card:hover { box-shadow: var(--shadow-lift); }

.category-grid { gap: 16px; }
@media (min-width: 960px) { .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.category-card { border-radius: var(--radius-lg); padding: 22px; gap: 12px; }
.category-card > p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.category-card .collection-icon { background: var(--cat-bg, var(--brand-tint)); color: var(--cat, var(--brand)); border-radius: 14px; }
.category-links { gap: 0; }
.category-links a { min-height: 34px; font-size: 0.9375rem; font-weight: 500; color: var(--text); }
.category-links a:hover { color: var(--cat, var(--link)); }
.collection-icon { background: var(--brand-tint); color: var(--brand); }

.privacy-band {
  margin-top: 64px; padding: 34px; border: 0; border-radius: 28px; color: #eceaff;
  background: radial-gradient(70% 120% at 100% 0%, rgba(236, 72, 153, 0.28), transparent 60%), radial-gradient(60% 100% at 0% 100%, rgba(59, 130, 246, 0.25), transparent 60%), linear-gradient(135deg, #1b1446, #2c1f74 55%, #3b1a6e);
}
.privacy-band h2, .privacy-band h3, .privacy-band strong { color: #ffffff; }
.privacy-band p, .privacy-band .privacy-points p { color: #cfcbf3; }
.privacy-band-icon { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); color: #ffffff; }
.privacy-points .icon { color: #86efac; }
.privacy-band .how-steps li { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); color: #eceaff; }
.privacy-band .how-steps li::before { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
@media (max-width: 480px) { .privacy-band { padding: 22px 18px; border-radius: 22px; } }

.faq-list { display: grid; gap: 10px; margin-top: 14px; }
.faq-item { margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: inherit; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--surface); }
.faq-item > summary:focus-visible { outline-offset: -3px; }
.faq-item .faq-q { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.faq-chevron { flex: none; width: 20px; height: 20px; color: var(--muted); transform: rotate(90deg); }
.faq-item[open] > summary .faq-chevron { transform: rotate(-90deg); color: var(--brand); }
.faq-item[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.faq-a { padding: 0 18px 16px; }
.faq-a p { margin: 0; color: color-mix(in srgb, var(--text) 82%, var(--muted)); }
@media (prefers-reduced-motion: no-preference) { .faq-chevron { transition: transform 0.18s var(--ease-out, ease-out); } }

.tool-hero-icon { border-radius: 18px; }
.tool-app { border-radius: 24px; box-shadow: var(--shadow); }
.dropzone { border-radius: 20px; }
.how-steps li { border-radius: var(--radius); }

.site-footer { background: var(--card); }
.footer-privacy { color: var(--success); }

.terms-updated { margin: 6px 0 0; color: var(--muted); font-size: 0.875rem; }
.terms-summary { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 8px 0 8px; }
.terms-summary > div { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); }
.terms-summary h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.125rem; }
.terms-yes h2 .icon { color: var(--success); }
.terms-no h2 .icon { color: var(--danger); }
.terms-summary ul { margin: 0; padding-inline-start: 20px; }
.terms-fun { padding: 16px 18px; border-inline-start: 4px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--brand-tint); }
.terms-copy { margin-top: 28px; color: var(--muted); font-size: 0.875rem; }

.stats-page { max-width: 1000px; }
.stats-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.stats-card { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.stats-card h2 { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.stats-big { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stats-big span { font-size: 0.9375rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.stats-small { margin: 0; color: var(--muted); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.stats-section { margin-top: 30px; }
.stats-section h2 { font-size: 1.25rem; }
.stats-chart { display: block; width: 100%; height: 180px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.stats-bar-views { fill: color-mix(in srgb, var(--brand) 26%, transparent); }
.stats-bar-visitors { fill: var(--brand); }
.stats-legend { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; margin: 0 0 8px; color: var(--muted); font-size: 0.875rem; }
.stats-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-start: 8px; }
.stats-key:first-child { margin-inline-start: 0; }
.stats-key-visitors { background: var(--brand); }
.stats-key-views { background: color-mix(in srgb, var(--brand) 26%, transparent); }
.stats-axis { display: flex; justify-content: space-between; margin: 6px 0 0; color: var(--muted); font-size: 0.8125rem; }
.stats-table-wrap { margin-top: 12px; }
.stats-table-wrap summary { cursor: pointer; font-weight: 600; color: var(--link); min-height: 32px; }
.stats-lists { display: grid; gap: 0 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.stats-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.stats-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; font-variant-numeric: tabular-nums; }
.stats-list li + li { border-top: 1px solid var(--border); }
.stats-list li > :first-child { min-width: 0; overflow-wrap: anywhere; }
.stats-list li > :last-child { flex: none; font-weight: 700; }
.stats-how ul { padding-inline-start: 20px; color: var(--muted); }

.field { grid-template-columns: minmax(0, 1fr); }
.field-row:has(> .field > input[type="date"].input-lg, > .field > input[type="datetime-local"]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.zs-panel { margin-top: 18px; }
.zs-panel [data-kinds] { margin-top: 16px; }
.zs-size-row { margin-top: 18px; }
.zs-size { display: flex; gap: 8px; max-width: 320px; }
.zs-size .input { flex: 1 1 auto; min-width: 0; }
.zs-size .select { flex: 0 0 auto; width: auto; }
.zs-presets { margin-top: 10px; }
.zs-plan { margin: 14px 0 0; font-weight: 600; }
.zs-parts { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); counter-reset: part; }
.zs-parts li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.zs-parts li + li { border-top: 1px solid var(--border); }
.zs-part-info { display: grid; min-width: 0; }
.zs-part-info strong { overflow-wrap: anywhere; font-weight: 600; }
.zs-part-info .hint { margin: 0; }
.zs-parts .btn { flex: none; }
.zs-howto-text { margin: 0 14px 14px; max-height: 360px; overflow: auto; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-family: var(--mono); font-size: 0.8125rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

.roi-results .calc-card-result strong, .sal-results .calc-card-result strong { display: block; }
.sal-results { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.sal-results .calc-card.is-given { border-color: var(--primary); background: var(--primary-tint); }
.sh-out-unit { max-width: 280px; margin-top: 14px; }
.data-table tr.is-current th, .data-table tr.is-current td { font-weight: 700; color: var(--primary); }

.pc-private { display: flex; align-items: center; gap: 8px; }
.pc-input { display: flex; gap: 8px; }
.pc-input .input { flex: 1 1 auto; min-width: 0; }
.pc-result { margin-top: 18px; }
.pc-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 460px; }
.pc-meter span { height: 10px; border-radius: 999px; background: var(--surface-2); }
.pc-meter[data-level="0"] span:nth-child(-n+1) { background: #dc2626; }
.pc-meter[data-level="1"] span:nth-child(-n+2) { background: #ea580c; }
.pc-meter[data-level="2"] span:nth-child(-n+3) { background: #ca8a04; }
.pc-meter[data-level="3"] span:nth-child(-n+4) { background: #16a34a; }
.pc-meter[data-level="4"] span { background: #15803d; }
.pc-verdict { margin: 10px 0 0; }
.pc-verdict strong { font-size: 1.375rem; }
.pc-tips, .pc-parts { margin: 8px 0 0; padding-inline-start: 20px; }
.pc-times dd { font-weight: 700; }

.pc-times { grid-template-columns: minmax(0, max-content) minmax(max-content, 1fr); }
@media (max-width: 480px) { .pc-times { grid-template-columns: minmax(0, 1fr); gap: 0; } .pc-times dd { margin-bottom: 10px; } }
.advanced > summary .option-help { margin-inline-start: 8px; }

.bc-cost { max-width: 460px; margin-top: 14px; }
.bc-cost input[type="range"] { width: 100%; }

.ep-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.ep-search { flex: 1 1 260px; }
.ep-tones { display: flex; flex-wrap: wrap; gap: 4px; border: 0; padding: 0; margin: 0; }
.ep-tones legend { font-weight: 600; font-size: 0.9375rem; margin-bottom: 6px; padding: 0; }
.ep-tones input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ep-tones label { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); font-size: 1.375rem; cursor: pointer; }
.ep-tones input:checked + label { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.ep-tones input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.ep-groups { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.ep-group[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.ep-list { max-height: 520px; overflow-y: auto; padding: 4px 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.ep-section-title { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 12px; font-size: 0.875rem; background: var(--card); color: var(--muted); }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 2px; padding: 4px 8px 10px; }
.ep-emoji { display: inline-flex; align-items: center; justify-content: center; height: 46px; border: 0; border-radius: 10px; background: transparent; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.ep-emoji:hover, .ep-emoji:focus-visible { background: var(--surface); }
.ep-compose { margin-top: 16px; }
.ep-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; }
.ep-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: no-preference) { .ep-toast { transition: opacity 0.2s, transform 0.2s; } }

.aa-pre { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.15; white-space: pre; overflow-x: auto; }
textarea.aa-pre { width: 100%; }
.aa-out { margin-top: 16px; }
.aa-all { margin-top: 18px; display: grid; gap: 12px; }
.aa-sample { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); min-width: 0; }
.aa-sample pre { margin: 6px 0 0; }

.mdp-layout { display: grid; gap: 18px; }
@media (min-width: 980px) { .mdp-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.mdp-preview-label { margin: 0 0 6px; font-weight: 600; }
.mdp-paper-frame { max-height: 640px; overflow: auto; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.mdp-paper { min-height: 420px; padding: 32px 36px; background: #ffffff; color: #1a1a1a; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 480px) { .mdp-paper { padding: 20px 18px; } }
.mdp-paper[data-font="sans"] { font-family: "Plus Jakarta Sans", system-ui, "Segoe UI", Arial, sans-serif; }
.mdp-paper[data-font="serif"] { font-family: Georgia, "Times New Roman", Times, serif; }
.mdp-paper[data-text="10"] { font-size: 10pt; }
.mdp-paper[data-text="11"] { font-size: 11pt; }
.mdp-paper[data-text="12"] { font-size: 12pt; }
.mdp-paper[data-text="14"] { font-size: 14pt; }
.mdp-paper h1, .mdp-paper h2, .mdp-paper h3, .mdp-paper h4 { color: #111111; line-height: 1.25; margin: 1.2em 0 0.5em; break-after: avoid; letter-spacing: normal; }
.mdp-paper h1 { font-size: 1.9em; margin-top: 0; }
.mdp-paper h2 { font-size: 1.45em; border-bottom: 1px solid #dddddd; padding-bottom: 0.2em; }
.mdp-paper h3 { font-size: 1.2em; }
.mdp-paper p, .mdp-paper ul, .mdp-paper ol, .mdp-paper blockquote, .mdp-paper table, .mdp-paper pre { margin: 0 0 0.9em; }
.mdp-paper a { color: #1d4ed8; }
.mdp-paper code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; background: #f3f3f3; border: 0; padding: 0.1em 0.3em; border-radius: 3px; color: #1a1a1a; }
.mdp-paper pre { background: #f6f6f6; border: 1px solid #e3e3e3; border-radius: 4px; padding: 0.8em 1em; white-space: pre-wrap; break-inside: avoid; }
.mdp-paper pre code { background: none; padding: 0; }
.mdp-paper blockquote { margin-inline-start: 0; padding: 0.2em 1em; border-inline-start: 4px solid #cccccc; color: #444444; }
.mdp-paper table { border-collapse: collapse; width: 100%; break-inside: avoid; }
.mdp-paper th, .mdp-paper td { border: 1px solid #cccccc; padding: 0.35em 0.6em; text-align: start; }
.mdp-paper th { background: #f2f2f2; }
.mdp-paper img { max-width: 100%; break-inside: avoid; }
.mdp-paper hr { border: 0; border-top: 1px solid #cccccc; margin: 1.5em 0; }
@media print {
  body:has([data-md-pdf]) > :not(.app),
  body:has([data-md-pdf]) .app > :not(.app-content),
  body:has([data-md-pdf]) .app-content > :not(main),
  body:has([data-md-pdf]) main > :not(.tool-page),
  .tool-page:has([data-md-pdf]) > :not(.tool-app),
  .tool-app:has([data-md-pdf]) > :not([data-md-pdf]),
  [data-md-pdf] > :not(.mdp-layout),
  .mdp-layout > :not(.mdp-preview-wrap),
  .mdp-preview-wrap > :not(.mdp-paper-frame) { display: none !important; }
  body:has([data-md-pdf]), body:has([data-md-pdf]) .app, body:has([data-md-pdf]) .app-content, body:has([data-md-pdf]) main,
  .tool-page:has([data-md-pdf]), .tool-app:has([data-md-pdf]), [data-md-pdf], .mdp-layout, .mdp-preview-wrap, .mdp-paper-frame {
    display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
    background: #ffffff !important; max-width: none !important; max-height: none !important; overflow: visible !important; min-height: 0 !important; width: auto !important;
  }
  .mdp-paper { padding: 0 !important; box-shadow: none !important; min-height: 0 !important; }
}

@page mdp-a4-normal { size: A4; margin: 20mm; }
@page mdp-a4-normal-n { size: A4; margin: 20mm; @bottom-center { content: counter(page) " / " counter(pages); font-size: 9pt; color: #666666; } }
@page mdp-a4-narrow { size: A4; margin: 12mm; }
@page mdp-a4-narrow-n { size: A4; margin: 12mm; @bottom-center { content: counter(page) " / " counter(pages); font-size: 9pt; color: #666666; } }
@page mdp-letter-normal { size: letter; margin: 20mm; }
@page mdp-letter-normal-n { size: letter; margin: 20mm; @bottom-center { content: counter(page) " / " counter(pages); font-size: 9pt; color: #666666; } }
@page mdp-letter-narrow { size: letter; margin: 12mm; }
@page mdp-letter-narrow-n { size: letter; margin: 12mm; @bottom-center { content: counter(page) " / " counter(pages); font-size: 9pt; color: #666666; } }
@page mdp-a5-normal { size: A5; margin: 20mm; }
@page mdp-a5-normal-n { size: A5; margin: 20mm; @bottom-center { content: counter(page) " / " counter(pages); font-size: 9pt; color: #666666; } }
@page mdp-a5-narrow { size: A5; margin: 12mm; }
@page mdp-a5-narrow-n { size: A5; margin: 12mm; @bottom-center { content: counter(page) " / " counter(pages); font-size: 9pt; color: #666666; } }
.mdp-paper[data-size="a4"][data-margin="normal"][data-numbers="off"] { page: mdp-a4-normal; }
.mdp-paper[data-size="a4"][data-margin="normal"][data-numbers="on"] { page: mdp-a4-normal-n; }
.mdp-paper[data-size="a4"][data-margin="narrow"][data-numbers="off"] { page: mdp-a4-narrow; }
.mdp-paper[data-size="a4"][data-margin="narrow"][data-numbers="on"] { page: mdp-a4-narrow-n; }
.mdp-paper[data-size="letter"][data-margin="normal"][data-numbers="off"] { page: mdp-letter-normal; }
.mdp-paper[data-size="letter"][data-margin="normal"][data-numbers="on"] { page: mdp-letter-normal-n; }
.mdp-paper[data-size="letter"][data-margin="narrow"][data-numbers="off"] { page: mdp-letter-narrow; }
.mdp-paper[data-size="letter"][data-margin="narrow"][data-numbers="on"] { page: mdp-letter-narrow-n; }
.mdp-paper[data-size="a5"][data-margin="normal"][data-numbers="off"] { page: mdp-a5-normal; }
.mdp-paper[data-size="a5"][data-margin="normal"][data-numbers="on"] { page: mdp-a5-normal-n; }
.mdp-paper[data-size="a5"][data-margin="narrow"][data-numbers="off"] { page: mdp-a5-narrow; }
.mdp-paper[data-size="a5"][data-margin="narrow"][data-numbers="on"] { page: mdp-a5-narrow-n; }

.ch-layout { display: grid; gap: 22px; }
@media (min-width: 1080px) { .ch-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .ch-main { position: sticky; top: calc(var(--topbar-h) + 16px); } }
.ch-side { display: grid; gap: 14px; min-width: 0; }
.ch-types { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.ch-types legend { font-weight: 600; font-size: 0.9375rem; margin-bottom: 6px; padding: 0; }
.ch-types input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ch-types label { display: inline-flex; align-items: center; min-height: 38px; padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--card); font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.ch-types input:checked + label { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.ch-types input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.ch-data { font-size: 0.8125rem; white-space: pre; overflow-x: auto; tab-size: 12; }
.ch-dates { max-width: 280px; margin-top: 8px; }
.ch-warnings { margin: 0; padding: 8px 12px 8px 30px; border: 1px solid var(--warning-border); border-radius: var(--radius-sm); background: var(--warning-bg); font-size: 0.875rem; }
.ch-checks { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ch-main { min-width: 0; }
.ch-preview { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--card) 0 50%) 0 0 / 16px 16px; display: flex; justify-content: center; }
.ch-canvas { display: block; max-width: 100%; height: auto; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12); }
.ch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.btn-link { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.btn-link:hover { text-decoration-thickness: 2px; }

.lang-menu { position: relative; flex: none; }
.lang-btn { width: auto; min-width: 44px; padding: 0 8px; gap: 4px; }
.lang-code { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }
.lang-btn[aria-expanded="true"] { background: var(--surface); }
.lang-panel {
  inset-inline-start: auto; inset-inline-end: 0; min-width: 0;
  width: min(440px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow-y: auto;
}
.lang-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.lang-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; color: var(--text); text-decoration: none; line-height: 1.25; }
.lang-item:hover { background: var(--surface); }
.lang-item[aria-current] { background: var(--primary-tint); }
.lang-native { font-weight: 600; font-size: 0.9375rem; }
.lang-english { font-size: 0.75rem; color: var(--muted); }
.lang-note { margin: 8px 10px 4px; font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 479px) {
  .lang-code { display: none; }
  .lang-btn { padding: 0; }
  .lang-list { grid-template-columns: minmax(0, 1fr); }
}

.lang-notice { display: flex; align-items: flex-start; gap: 8px; }
.lang-notice .icon { flex: none; margin-block-start: 2px; color: var(--muted); }

:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }

[dir="rtl"] .icon-arrow-right, [dir="rtl"] .section-link .icon:last-child, [dir="rtl"] .work-cta .icon:last-child, [dir="rtl"] .mainnav-all .icon:last-child, [dir="rtl"] .tool-card-go .icon, [dir="rtl"] .work-tasks .icon { transform: scaleX(-1); }

@media (max-width: 1023.98px) {
  :root[dir="rtl"]:not([data-nav="left"]) .sidebar { left: auto; right: 0; transform: translateX(105%); border-right: 0; border-left: 1px solid var(--border); }
  :root[dir="rtl"]:not([data-nav="left"]) .sidebar.is-open { transform: none; }
}
@media (min-width: 1024px) {
  :root[dir="rtl"][data-nav="left"] .app { flex-direction: row-reverse; }
  :root[dir="rtl"][data-nav="right"] .app { flex-direction: row; }
}
@media (prefers-reduced-motion: no-preference) {
  [dir="rtl"] a.tool-card-link:hover .tool-card-go .icon, [dir="rtl"] .work-tasks a:hover .icon { transform: scaleX(-1) translateX(3px); }
}

.metro-tempo { display: flex; align-items: center; justify-content: center; gap: 16px; }
.metro-step { width: 52px; height: 52px; padding: 0; border-radius: 50%; font-size: 1.5rem; line-height: 1; }
.metro-bpm { margin: 0; white-space: nowrap; }
.metro-unit { font-size: 0.35em; font-weight: 600; color: var(--muted); }
.metro-beats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; min-height: 22px; }
.metro-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); }
.metro-dot.is-accent { border-color: var(--primary); }
.metro-dot.is-on { background: var(--primary); border-color: var(--primary); }
.metro-dot.is-accent.is-on { box-shadow: 0 0 0 4px var(--primary-tint); }
.metro-slider { margin-top: 18px; }
.tone-freq { margin: 0; overflow-wrap: anywhere; }
.tone-shift { justify-content: center; flex-wrap: wrap; margin-top: 4px; }

.wheel-layout { display: grid; gap: 24px; }
@media (min-width: 900px) { .wheel-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; } }
.wheel-stage { display: grid; justify-items: center; gap: 14px; min-width: 0; }
.wheel-frame { position: relative; width: min(100%, 520px); aspect-ratio: 1; }
.wheel-canvas { display: block; width: 100%; height: 100%; }

.wheel-pointer { position: absolute; top: -4px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid var(--text); }
.wheel-actions { justify-content: center; margin: 0; }
.wheel-result { width: 100%; max-width: 520px; padding: 14px 18px; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.wheel-result-label { margin: 0; color: var(--muted); font-size: 0.875rem; }
.wheel-result-name { margin: 4px 0 10px; font-size: 1.75rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.wheel-result .actions { justify-content: center; margin: 0; }
.wheel-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.wheel-history-list { margin: 0; padding-inline-start: 1.6em; max-height: 260px; overflow: auto; overflow-wrap: anywhere; }

.epub-layout { margin-top: 18px; }
.epub-title-page { text-align: center; margin-bottom: 2em; break-after: page; }
.epub-cover { margin: 0 0 1.5em; }
.epub-cover img { max-width: 100%; max-height: 520px; height: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }
.epub-paper .epub-book-title { font-size: 2em; margin: 0.4em 0 0.2em; }
.epub-paper .epub-book-author { font-size: 1.15em; color: #444444; margin: 0; }
.epub-toc { break-after: page; margin-bottom: 2em; }
.epub-paper .epub-toc-list { list-style: none; margin: 0; padding: 0; }
.epub-toc-list li { margin: 0.25em 0; }
.epub-toc-d1 { padding-inline-start: 1.2em; }
.epub-toc-d2 { padding-inline-start: 2.4em; font-size: 0.95em; }
.epub-paper .epub-toc a { color: inherit; text-decoration: none; }
.epub-paper[data-breaks="on"] .epub-chapter { break-before: page; }
.epub-chapter img { height: auto; }
.epub-chapter + .epub-chapter { margin-top: 2em; }
@media print {
  body:has([data-epub-pdf]) > :not(.app),
  body:has([data-epub-pdf]) .app > :not(.app-content),
  body:has([data-epub-pdf]) .app-content > :not(main),
  body:has([data-epub-pdf]) main > :not(.tool-page),
  .tool-page:has([data-epub-pdf]) > :not(.tool-app),
  .tool-app:has([data-epub-pdf]) > :not([data-epub-pdf]),
  [data-epub-pdf] > :not([data-workspace]),
  [data-epub-pdf] [data-workspace] > :not(.mdp-layout),
  [data-epub-pdf] .mdp-preview-wrap > :not(.mdp-paper-frame) { display: none !important; }
  body:has([data-epub-pdf]), body:has([data-epub-pdf]) .app, body:has([data-epub-pdf]) .app-content, body:has([data-epub-pdf]) main,
  .tool-page:has([data-epub-pdf]), .tool-app:has([data-epub-pdf]), [data-epub-pdf], [data-epub-pdf] [data-workspace], [data-epub-pdf] .mdp-layout, [data-epub-pdf] .mdp-preview-wrap, [data-epub-pdf] .mdp-paper-frame {
    display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
    background: #ffffff !important; max-width: none !important; max-height: none !important; overflow: visible !important; min-height: 0 !important; width: auto !important;
  }
  .epub-paper { padding: 0 !important; box-shadow: none !important; min-height: 0 !important; }
  .epub-cover img { max-height: 150mm; box-shadow: none; }
  .epub-chapter + .epub-chapter { margin-top: 0; }
}

.blog { max-width: 760px; }
.blog-empty { color: var(--muted); }
.blog-list { list-style: none; margin: 8px 0 0; padding: 0; }
.blog-card { padding: 20px 0; border-top: 1px solid var(--border); }
.blog-card:first-child { border-top: 0; }
.blog-card-title { margin: 0; font-size: 1.35rem; line-height: 1.3; overflow-wrap: anywhere; }
.blog-card-title a { color: var(--text); text-decoration: none; }
.blog-card-title a:hover, .blog-card-title a:focus-visible { color: var(--primary); text-decoration: underline; }
.blog-meta { margin: 6px 0 0; color: var(--muted); font-size: 0.9375rem; }
.blog-card-text { margin: 8px 0 0; }
.blog-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.blog-pager-at { color: var(--muted); }
.blog-feeds { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 32px; color: var(--muted); font-size: 0.9375rem; }
.blog-post { max-width: 760px; }
.blog-post-head h1 { margin-bottom: 4px; overflow-wrap: anywhere; }
.blog-post-image { margin: 24px 0 0; }
.blog-post-image img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.blog-body { margin-top: 24px; font-size: 1.0625rem; line-height: 1.7; overflow-wrap: break-word; }
.blog-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.blog-body pre { overflow-x: auto; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); line-height: 1.5; }
.blog-body pre code { background: none; border: 0; padding: 0; font-size: 0.875rem; }
.blog-body blockquote { margin: 16px 0; padding: 4px 16px; border-inline-start: 4px solid var(--border-strong); color: var(--muted); }
.blog-body hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.blog-body .table-wrap { overflow-x: auto; }
.blog-body table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.blog-body th, .blog-body td { padding: 8px 12px; border-top: 1px solid var(--border); text-align: start; vertical-align: top; }
.blog-body thead th { background: var(--surface); border-top: 0; }
.blog-body .align-center { text-align: center; }
.blog-body .align-right { text-align: end; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.blog-tag { padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.875rem; }
.blog-post-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); }
.blog-tools, .blog-related { max-width: 760px; margin-top: 40px; }
.blog-related-list { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 8px; }
.blog-related-list a { font-weight: 600; }
.blog-post-foot { max-width: 760px; }

.blog-guides-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.blog-guides-list li { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.blog-guides-title { font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.blog-guides-title:hover, .blog-guides-title:focus-visible { color: var(--primary); text-decoration: underline; }
.blog-guides-list p { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; }
@media (min-width: 900px) { .home-section .blog-guides-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

:root[data-app-blog="hide"] [data-blog-link] { display: none; }
.install-card { margin-block: 20px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.install-card h2 { margin-top: 0; }
.install-state { margin-bottom: 8px; }
.install-choice { margin-bottom: 4px; }
.offline-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }