/* Layout: a one-screen tool. A top bar (title set in the live composite font), then the bench filling the rest of the
   window: editor (presets | fonts | typography) | type tester. The page itself never scrolls; each pane scrolls on its own.
   Below 1000px one pane at a time, switched by tabs at the bottom. Export and About are side-bar dialogs. */
:root{
  color-scheme:light;
  --bg:#F4F4F2;
  --sheet:#FFFFFF;
  --ink:#111112;
  --ink-2:#3B3B3D;
  --muted:#707070;
  --faint:#A6A6A2;
  --line:#DADAD5;
  --rule:#ECECE8;
  --ruled:#C9D0F5;
  --accent:#2440F2;
  --accent-ink:#FFFFFF;
  --ok:#1E7A3C;
  --warn:#C2361F;
  --caution:#7A5600; --caution-bg:#FCF1CF;
  --miss1:#D99100;
  --code-bg:#121214; --code-ink:#D9D9D4; --code-cm:#7B7B74; --code-at:#A3ADFF; --code-prop:#E6C07C;
  --c-han:#6A58B0; --c-kana:#AF4C8C; --c-punct:#A47A06; --c-symbol:#2B867F;
  --c-shared:#CC5E20; --c-latin:#3A8641; --c-digit:#2C69AE; --c-custom:#737A81; --c-bopo:#9A5B2A;
  --ui:"Instrument Sans","PingFang SC","Hiragino Sans GB","Hiragino Sans","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --cf:serif; --generic:serif;
  /* Theme-independent design tokens. UI text uses these six sizes; specimens, proof text and the brand title are content-sized exceptions. */
  --fs-xs:11px;      /* Monospaced section labels, headers and annotations. */
  --fs-s:12px;       /* Secondary text, hints and toolbar controls. */
  --fs-m:13px;       /* Buttons, menus, table content and explanatory body text. */
  --fs-l:14px;       /* Tabs, card names and paragraphs. */
  --fs-xl:18px;      /* Dialog titles. */
  --fs-2xl:22px;     /* Large specimens. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-s:2px;         /* Small marks: swatches and progress bars. */
  --r:4px;           /* Fields, selects, cards, popovers and dialogs. */
  --r-pill:999px;    /* Pill text buttons, circular icon buttons, filters and switches. */
  --ctl-h:32px;      /* Shared height for regular buttons and toolbar controls. */
  --ctl-h-sm:26px;   /* Compact actions in tables and lists. */
  --shadow-pop:0 18px 40px -18px rgba(0,0,0,.35);
}
:root:lang(zh-Hant){--ui:"Instrument Sans","PingFang TC","Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif}
:root:lang(ja){--ui:"Instrument Sans","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",system-ui,sans-serif}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0E0F; --sheet:#161617; --ink:#EDEDEA; --ink-2:#C9C9C5; --muted:#9A9A95; --faint:#5F5F5B; --line:#2B2B2C; --rule:#202021; --ruled:#2E3560;
    --accent:#8391FF; --accent-ink:#0B0B12; --ok:#5BBE72; --warn:#F0745A; --caution:#F2C25B; --caution-bg:#2B2410; --miss1:#F2C25B;
    --code-bg:#0A0A0B; --code-ink:#D9D9D4; --code-cm:#6F6F69; --code-at:#A3ADFF; --code-prop:#E6C07C;
    --c-han:#A595EE; --c-kana:#E58BC4; --c-punct:#E0B544; --c-symbol:#5FC6BD;
    --c-shared:#F49159; --c-latin:#78C67F; --c-digit:#77AEEB; --c-custom:#A2A9B0; --c-bopo:#D9A06E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E0E0F; --sheet:#161617; --ink:#EDEDEA; --ink-2:#C9C9C5; --muted:#9A9A95; --faint:#5F5F5B; --line:#2B2B2C; --rule:#202021; --ruled:#2E3560;
  --accent:#8391FF; --accent-ink:#0B0B12; --ok:#5BBE72; --warn:#F0745A; --caution:#F2C25B; --caution-bg:#2B2410; --miss1:#F2C25B;
  --code-bg:#0A0A0B; --code-ink:#D9D9D4; --code-cm:#6F6F69; --code-at:#A3ADFF; --code-prop:#E6C07C;
  --c-han:#A595EE; --c-kana:#E58BC4; --c-punct:#E0B544; --c-symbol:#5FC6BD;
  --c-shared:#F49159; --c-latin:#78C67F; --c-digit:#77AEEB; --c-custom:#A2A9B0; --c-bopo:#D9A06E;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:var(--fs-l);line-height:1.55;-webkit-font-smoothing:antialiased;font-feature-settings:"kern"}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono)}
.hint{color:var(--muted);font-size:var(--fs-s)}
.label{margin:0;font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.app{height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}      /* Keep the page to one screen; panes scroll independently. */
.topbar{grid-row:1}.app>.warn{grid-row:2}.bench{grid-row:3}.mtabs{grid-row:4}      /* When the warning is hidden, keep the workspace in the row filling remaining space. */
/* Thin, rounded, theme-aware scrollbars: standard properties in Chrome 121+ / Firefox, WebKit pseudo-elements in Safari. */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 22%,transparent) transparent}
.code pre{scrollbar-color:color-mix(in srgb,var(--code-ink) 28%,transparent) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 22%,transparent);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--ink) 38%,transparent)}
::-webkit-scrollbar-corner{background:transparent}

/* ================= Components =================
   Choose existing controls here before adding a new style; see Design system in AGENTS.md.
   Five button roles: .btn (secondary outlined pill), .btn.primary (filled primary), .btn-ghost (borderless toolbar action with subtle hover),
   .btn-icon (circular icon-only, .sm compact, .mini inline), and .btn-text (text link).
   Regular actions share height and geometry; distinguish emphasis with fill, outline or no border. Compact actions use .sm / .mini; choice controls retain their own shapes.
   Add .danger for destructive actions, and use armConfirm() with .armed for two-click confirmation. */
/* Wrap base form styles in :where() to minimize specificity so component classes such as .cell-in always win. */
:where(select,input[type=text],input[type=search],input[type=number],input:not([type])){background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:6px 8px;min-width:0}
:where(select,input[type=text],input[type=search],input[type=number]):hover{border-color:var(--faint)}
/* Replace native select arrows, which sit too close to the edge, with an arrow inset 10px. Grey stays legible in both themes. */
select{-webkit-appearance:none;appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6l6 -6' fill='none' stroke='%23888884' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px;text-overflow:ellipsis}
:where(input[type=number]){font-family:var(--mono);font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:var(--ctl-h);border:1px solid var(--ink);background:transparent;border-radius:var(--r-pill);padding:0 var(--sp-4);font-size:var(--fs-m);white-space:nowrap;color:var(--ink);text-decoration:none}
.btn:hover{background:var(--ink);color:var(--sheet)}
.btn.primary{background:var(--ink);color:var(--sheet)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost,.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:var(--ctl-h);padding:0 var(--sp-2);border:0;border-radius:var(--r-pill);background:none;font-size:var(--fs-m);color:var(--ink-2);white-space:nowrap;text-decoration:none}
.btn-ghost:hover,.btn-icon:hover,.btn-ghost:has(+ .pop:popover-open),.btn-icon:has(+ .pop:popover-open){background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
/* Tabler outline icons, including CSS select arrows and menu checks. Sprite at the start of index.html; shared 1.75 stroke at 24 units, about 1.2px at 16px. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.ic.ext{width:12px;height:12px;vertical-align:-1px}      /* External-link arrow after text. */
.btn-ghost svg{width:16px;height:16px;flex:none}
.btn-icon{width:var(--ctl-h);padding:0;font-size:var(--fs-l)}
.btn-icon svg{width:16px;height:16px;flex:none}
.btn-icon.sm{width:var(--ctl-h-sm);height:var(--ctl-h-sm)}
.btn-icon.sm svg{width:15px;height:15px}
.btn-icon.mini{width:auto;height:auto;padding:2px;color:var(--faint);line-height:0}
.btn-icon.mini:hover{background:none;color:var(--ink)}
.btn-icon.mini svg{width:14px;height:14px}
.btn-ghost[aria-disabled="true"],.btn-icon[aria-disabled="true"]{color:var(--faint);cursor:default;background:none}
.btn-text{border:0;background:none;padding:4px 0;font-size:var(--fs-m);color:var(--ink);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px}
.btn-text:hover,.btn-text[aria-expanded="true"]{text-decoration-color:var(--ink)}
.btn-text.danger,.btn-ghost.danger{color:var(--warn)}
.btn-icon.danger{color:var(--faint)}      /* Per-card delete actions stay subtle until hovered red. */
.btn-icon.danger:hover{color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.btn-icon.mini.danger:hover{background:none}
/* Two-click confirmation: first show the confirmation label, then execute within 3 seconds (armConfirm). Hide the original button content. */
.armed,.armed:hover,.mm-item.armed:hover{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.armed>:not(.arm-lab){display:none}
.btn-icon.armed{width:auto;padding:0 var(--sp-2)}
.arm-lab{font-size:var(--fs-s);font-weight:500}
/* Segmented control: mutually exclusive choices. */
.seg{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:calc(var(--r) + 2px);padding:2px;gap:2px;background:var(--sheet)}
.seg button{border:0;background:none;border-radius:var(--r);padding:3px 10px;font-size:var(--fs-s);color:var(--muted);white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--sheet)}
/* Class/weight table fields: borderless by default, underlined on hover, black outline on focus. .cell-num is right-aligned monospaced text.
   Grey placeholders are derived/inherited; .own marks explicit base settings, .set marks blue per-weight overrides. */
.cell-in{width:100%;min-width:0;padding:5px 4px 4px;border:0;border-bottom:1px solid transparent;border-radius:0;background-color:transparent;font-size:var(--fs-m);color:var(--ink)}
.cell-in:hover{border-bottom-color:var(--line)}
.cell-in:focus{border-bottom-color:var(--ink);outline:none;background-color:var(--sheet)}
.cell-in::placeholder{color:var(--faint);opacity:1}
.cell-num{text-align:right;text-align-last:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.cell-num[type=number]{appearance:textfield}
.cell-num[type=number]::-webkit-inner-spin-button,.cell-num[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
select.cell-in{padding-right:18px;background-position:right 3px center;background-size:10px 10px}
/* Shared cell stepper: arrows appear on hover/focus and stay visible on touch. A fixed gutter keeps numbers aligned with headers. */
:root{--cell-step-w:20px}
.cell-step{display:grid;grid-template-columns:minmax(0,1fr) var(--cell-step-w);align-items:center;width:100%;min-width:0}
.cell-step select.cell-in{background-image:none;padding-right:var(--sp-1)}
.cell-step-actions{display:grid;opacity:0}
.cell-step:hover .cell-step-actions,.cell-step:focus-within .cell-step-actions{opacity:1}
.cell-step-btn.btn-icon{width:var(--cell-step-w);height:14px;padding:0;border-radius:var(--r-s);color:var(--muted)}
.cell-step-btn.btn-icon .ic{width:12px;height:12px}
.cell-step-btn[data-step=up] .ic{transform:rotate(180deg)}
@media(hover:none){.cell-step-actions{opacity:1}}
/* Bordered form-field variant keeps the same arrows, keyboard behavior and fixed gutter as table steppers. */
.cell-step.field-step{border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);padding:0 var(--sp-1) 0 var(--sp-2);width:auto;min-height:var(--ctl-h)}
.field-step:hover{border-color:var(--faint)}
.field-step:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.field-step>.cell-num{border:0;padding:var(--sp-1) 0;text-align:left;text-align-last:left;background:transparent}
.field-step:has(>input[hidden]){display:none}

.cell-in.own{font-weight:500}
.cell-in.set{color:var(--accent);font-weight:500}
/* Color field: native color well plus hex input, sharing normal field borders and focus behavior. */
.color-field{display:inline-flex;align-items:center;gap:var(--sp-1);height:var(--ctl-h);padding:0 var(--sp-1);border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);min-width:0}
.color-field:hover{border-color:var(--faint)}
.color-field:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.color-field input[type=color]{width:24px;height:24px;flex:none;padding:0;border:0;background:none;cursor:pointer}
.color-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-field input[type=color]::-webkit-color-swatch{border:1px solid var(--line);border-radius:var(--r-s)}
.color-field input[type=color]::-moz-color-swatch{border:1px solid var(--line);border-radius:var(--r-s)}
.color-field input[type=text]{width:8ch;padding:0;border:0;border-radius:0;background:none;font-size:var(--fs-s)}
.color-field input:focus{outline:none}
select.cell-in[data-auto]:not(.set){color:var(--faint)}      /* Derived select values use the same grey as input placeholders. */
select.cell-in[data-auto]:not(.set) option{color:var(--ink)}
/* Shared popover surface for menus, info and group toggles. .menu stacks .mm-item rows; .mm-radio / .mm-check display selection checks. */
.pop{position:fixed;inset:auto;margin:0;border:1px solid var(--ink);border-radius:var(--r);background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-pop)}
.menu{padding:6px;width:min(260px,calc(100vw - 24px))}
.menu:popover-open{display:grid;gap:2px}
.menu hr{width:100%;border:0;border-top:1px solid var(--rule);margin:4px 0}
.mm-item{display:flex;align-items:center;gap:6px;width:100%;padding:8px 10px;border:0;border-radius:var(--r);background:none;font-size:var(--fs-m);text-align:left;color:var(--ink);text-decoration:none}
.mm-item:hover{background:var(--rule)}
.mm-item.danger{color:var(--warn)}
.mm-lab{margin:4px 10px 2px;font-size:var(--fs-xs);color:var(--muted)}
.mm-radio::before,.mm-check::before{content:"";flex:none;width:14px;height:14px;background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5l10 -10' fill='none' stroke='%23888884' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");opacity:0}
.mm-radio[aria-checked="true"]::before,.mm-check[aria-pressed="true"]::before{opacity:1}
.mm-radio[aria-checked="true"]{font-weight:600}
.mm-note{margin:2px 10px 6px;font-size:var(--fs-s);line-height:1.55;color:var(--muted)}
/* Separate settings popovers from command menus. The shell owns outer spacing; groups, rows and notes must not stack independent margins. */
.settings-pop{--settings-width:300px;width:min(var(--settings-width),calc(100vw - 24px));padding:var(--sp-2);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain}
.settings-pop:popover-open{display:grid;gap:0}
.settings-pop>hr{width:100%;border:0;border-top:1px solid var(--rule);margin:var(--sp-2) 0}
.settings-group{display:grid;gap:var(--sp-1);margin:0;padding:0;border:0;min-width:0}
.settings-pop .mm-item{min-height:var(--ctl-h);padding:var(--sp-1) var(--sp-2);gap:var(--sp-2);line-height:1.5}
.settings-pop :is(.mm-radio,.mm-check)::before{order:1;margin-left:auto}
.settings-label,.settings-note{margin:0;padding:0 var(--sp-2);color:var(--muted);line-height:1.5}
.settings-label{font-size:var(--fs-xs)}
.settings-note{font-size:var(--fs-s)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--ctl-h);padding:0 var(--sp-2);font-size:var(--fs-m)}
.settings-row select{height:var(--ctl-h);max-width:65%;font-size:var(--fs-s)}
.settings-fields{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:var(--sp-1) var(--sp-3);padding:0 var(--sp-2)}
.settings-fields select{height:var(--ctl-h);font-size:var(--fs-s);padding-top:var(--sp-1);padding-bottom:var(--sp-1)}
.settings-actions{display:flex;justify-content:flex-end;align-items:center;min-height:var(--ctl-h);padding:0 var(--sp-2)}
.settings-actions .btn-text:disabled{color:var(--faint);cursor:default}
/* Always-visible filters sit below search; multi-choice menus use the shared popover surface. */
.filter-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);min-width:0}
.filter-trigger,.filter-toggle{height:var(--ctl-h);border:1px solid var(--line);border-radius:var(--r-pill);background-color:transparent;font-size:var(--fs-s);color:var(--muted);max-width:100%}
.filter-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3);cursor:pointer}
.filter-toggle input{margin:0;accent-color:var(--ink)}
.filter-trigger[data-active="true"],.filter-toggle:has(:checked){color:var(--ink);border-color:var(--ink);background-color:color-mix(in srgb,var(--ink) 5%,transparent)}
.filter-trigger:hover,.filter-toggle:hover{background-color:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.filter-toggle:has(:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* Result counts and ordering belong to the list, separate from search filters. */
.results-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-1) var(--sp-2);min-width:0}
.results-toolbar>.hint{margin:0}
.results-toolbar>.btn-ghost{margin-inline-start:auto;max-width:100%;white-space:normal;text-align:start}
/* Section header: monospaced label on the left, section actions on the right. */
.sec-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3);margin:var(--sp-6) 0 var(--sp-2)}
/* Use type size, weight and spacing for hierarchy, not dividers: .sec-title > .typo-name > monospaced labels and muted notes. */
.sec-title{margin:0;font-size:var(--fs-xl);font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.sec-acts{display:inline-flex;align-items:center;gap:var(--sp-2) var(--sp-3)}
.subsection-title{margin:0;font-size:var(--fs-l);font-weight:600;line-height:1.4;color:var(--ink)}
/* Small dialogs such as Save preset: title, description and fields, with actions bottom-right and the primary action last. */
.dlg-form{display:grid;gap:var(--sp-4);padding:22px 24px 20px}
.dlg-form h2{margin:0;font-size:var(--fs-xl);font-weight:600}
.dlg-form p{margin:0;font-size:var(--fs-m);line-height:1.6;color:var(--ink-2)}
.dlg-form .field input{width:100%}
.dlg-act{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;padding-top:var(--sp-1)}
/* Yellow notices for font/browser/setting conflicts; remaining selectors are legacy elements toggling .warn / .caution. */
.file-drop{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border:1px dashed var(--line);border-radius:var(--r)}
.file-drop.dragging{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
/* Empty surfaces show one visual, title and short prompt instead of disabled controls. */
.empty-state{display:grid;justify-items:center;align-content:center;gap:var(--sp-3);padding:var(--sp-5);text-align:center;color:var(--muted)}
.empty-state .empty-title{margin:0;font-size:var(--fs-xl);font-weight:600;color:var(--ink)}
.empty-state p{margin:0;font-size:var(--fs-m);line-height:1.6}
/* Font choices share one stable name/specimen layout across font sources. */
.font-options{container-type:inline-size;display:grid;align-content:start;overflow:auto;min-height:84px;height:min(var(--font-choice-max,320px),calc(var(--font-choice-count,4)*var(--font-choice-row,80px) + 8px));gap:var(--sp-1);padding:var(--sp-1);border:1px solid var(--line);border-radius:var(--r)}
.font-option{display:grid;grid-template-rows:auto 32px;gap:var(--sp-1);text-align:left;width:100%;min-height:76px;padding:var(--sp-2) var(--sp-3);border:1px solid transparent;border-radius:var(--r);background:transparent;color:var(--ink);cursor:pointer}
.font-option:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.font-option[aria-selected="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.font-options.lined{border:0;border-radius:0;padding:0;gap:0;height:min(var(--font-choice-max,320px),calc(var(--font-choice-count,4)*var(--font-choice-row,80px)))}
.font-options.lined .font-option{border-radius:0}
.font-options.lined .font-option+.font-option{border-top-color:var(--rule)}
.font-options.lined .font-option[aria-selected="true"]{border-color:transparent;box-shadow:inset 2px 0 0 var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.font-options.lined .font-option[aria-selected="true"]:not(:first-child){border-top-color:var(--rule)}
.font-option-name{font-size:var(--fs-m);font-weight:600;overflow-wrap:anywhere}
.font-option-sample{font-size:24px;line-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-option small{font-size:var(--fs-s);color:var(--muted);align-self:center}
.search-field{position:relative;display:block;flex:1;min-width:0}
.search-field input{width:100%;padding-inline-end:var(--sp-6)}
.search-field input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-field .btn-icon{position:absolute;inset-inline-end:var(--sp-1);top:50%;transform:translateY(-50%);color:var(--ink)}
.callout,.w-hint.warn,.typo-note.warn,#pkStatus.caution,#lfMsg.caution{margin:0;font-size:var(--fs-s);line-height:1.55;color:var(--caution);background:var(--caution-bg);padding:6px 10px;border-radius:var(--r)}
:root{--slider-thumb-size:12px;--slider-track-size:2px;--slider-half:calc(var(--slider-thumb-size)/2)}
/* All sliders share neutral colors, circular thumbs and focus rings. Native thumb centers are inset from field edges, so rails need half-thumb insets too. */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:20px;width:100%;min-width:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:var(--slider-track-size);background:linear-gradient(to right,transparent var(--slider-half),var(--line) var(--slider-half) calc(100% - var(--slider-half)),transparent calc(100% - var(--slider-half)))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:var(--r-pill);background:var(--ink);margin-top:calc((var(--slider-track-size) - var(--slider-thumb-size))/2);border:0}
input[type=range]::-moz-range-track{height:var(--slider-track-size);background:linear-gradient(to right,transparent var(--slider-half),var(--line) var(--slider-half) calc(100% - var(--slider-half)),transparent calc(100% - var(--slider-half)))}
input[type=range]::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:var(--r-pill);background:var(--ink);border:0}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 var(--sp-1) color-mix(in srgb,var(--ink) 12%,transparent)}
input[type=range]:hover::-moz-range-thumb,input[type=range]:active::-moz-range-thumb{box-shadow:0 0 0 var(--sp-1) color-mix(in srgb,var(--ink) 12%,transparent)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--sheet),0 0 0 3px var(--ink)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--sheet),0 0 0 3px var(--ink)}
/* Compact slider opened from a numeric field; ticks, rail endpoints and thumb centers share the same inset. */
.range-pop{width:288px;max-width:calc(100vw - 16px);padding:var(--sp-3) var(--sp-4)}
.range-pop input[type=range]{display:block;margin:0;height:28px}
.range-pop input[type=range]:disabled{cursor:default;opacity:.5}
.range-ticks{position:relative;height:var(--ctl-h-sm);margin:0 var(--slider-half);font:var(--fs-xs)/1.5 var(--mono);color:var(--muted)}
.range-ticks>*{position:absolute;left:var(--tick);transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;height:var(--ctl-h-sm);font-variant-numeric:tabular-nums}
.range-ticks>*::before{content:"";position:absolute;top:-12px;left:50%;height:4px;width:1px;background:var(--muted);pointer-events:none}
.range-ticks .btn-text{min-width:32px;font:inherit}
.range-ticks .cur{color:var(--ink);font-weight:600}
/* Vertical dual-ended range aligned with table rows; retain the full rail so endpoints outside the selected range remain visible. */
.range-vertical{position:relative;min-height:0;touch-action:none;cursor:pointer;--range-start:0%;--range-end:100%}
.range-rail,.range-fill{position:absolute;left:50%;width:var(--slider-track-size);transform:translateX(-50%);border-radius:var(--r-pill);pointer-events:none}
.range-rail{inset-block:0;background:var(--line)}
.range-fill{top:var(--range-start);bottom:calc(100% - var(--range-end));background:var(--ink)}
.range-thumb{position:absolute;left:50%;top:var(--range-start);transform:translate(-50%,-50%);width:32px;height:var(--ctl-h-sm);padding:0;border:0;border-radius:var(--r);background:none;touch-action:none;cursor:ns-resize;z-index:1}
.range-thumb[data-end="1"]{top:var(--range-end)}
.range-thumb::before{content:"";display:block;width:var(--slider-thumb-size);height:var(--slider-thumb-size);margin:auto;border-radius:var(--r-pill);background:var(--ink)}
.range-thumb:hover::before,.range-vertical.dragging .range-thumb:focus::before{box-shadow:0 0 0 var(--sp-1) color-mix(in srgb,var(--ink) 12%,transparent)}
.range-thumb:focus-visible{outline:none;z-index:2}
.range-thumb:focus-visible::before{box-shadow:0 0 0 2px var(--sheet),0 0 0 3px var(--ink)}
.range-thumb::after{content:attr(aria-valuenow);display:none;position:absolute;left:calc(100% - var(--sp-1));top:50%;transform:translateY(-50%);padding:var(--sp-1) var(--sp-2);border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);color:var(--ink);font:var(--fs-s)/1.2 var(--mono);box-shadow:var(--shadow-pop);pointer-events:none}
.range-thumb:hover::after,.range-thumb:focus-visible::after,.range-vertical.dragging .range-thumb:focus::after{display:block}
.range-vertical[data-tight="true"] .range-thumb[data-end="0"]{left:calc(50% - 7px)}
.range-vertical[data-tight="true"] .range-thumb[data-end="1"]{left:calc(50% + 7px)}

/* ---------- top bar ---------- */
/* Render the title with the live composite font so setting changes are visible immediately. */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:0 16px;border-bottom:1px solid var(--ink);background:var(--bg)}
.brand{margin:-.25em 0;padding:.25em 0;min-width:0;font-family:var(--cf),var(--generic);font-weight:var(--fw,400);font-size:21px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}      /* Ellipsis requires overflow:hidden; leave vertical room for Western descenders such as p and g. */
.top-right{display:flex;align-items:center;gap:var(--sp-2);flex:none}
/* During background baking, show progress on the button's bottom edge; show a top-right status dot when done with the dialog closed. */
/* Selected languages show a check; other rows reserve the same marker space to keep labels aligned. */
.ex-toggle{position:relative;overflow:hidden}
.ex-toggle.running::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--pct,0%);background:var(--accent);transition:width .3s}
.ex-toggle.running:hover::after{background:var(--accent-ink)}      /* When hover changes the button to accent, invert the progress-bar color. */
.ex-toggle.ready{overflow:visible}
.ex-toggle.ready::before{content:"";position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
.gh{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding-bottom:1px;border-bottom:1px solid var(--faint)}
.gh:hover{color:var(--accent);border-bottom-color:var(--accent)}
.lede{margin:0;font-size:var(--fs-l);line-height:1.7;color:var(--ink-2)}
.warn{background:var(--warn);color:#fff;padding:8px 16px;font-size:var(--fs-m)}
.warn code{font-family:var(--mono)}

/* ---------- Presets: first left-pane tab ---------- */
.presets{padding-top:4px}
.sec-head.preset-head{margin:var(--sp-4) 0 var(--sp-3)}
.preset-list{display:contents}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.pcard-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}      /* The outer grid alone determines card width; specimen text must not widen it. */
.pcard-wrap[hidden]{display:none}
.preset-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.pcard{display:grid;gap:6px;align-content:start;min-width:0;container-type:inline-size;text-align:left;padding:14px 14px 13px;border:1px solid var(--line);background:var(--sheet);border-radius:var(--r);color:inherit}
.pcard:hover{border-color:var(--faint)}
.pcard[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* Current setup is work in progress, not an applicable template; anchor save actions at the card bottom. */
.pcurrent{background:var(--bg);grid-template-rows:auto auto 1fr auto}
.pcurrent:hover{border-color:var(--line)}
.pcurrent .pspec{font-family:var(--cf),var(--generic);font-weight:var(--fw,400)}
.current-actions{display:grid;gap:var(--sp-1);align-self:end}
.current-actions .btn{width:100%}

/* Fixed specimen line height keeps baselines and labels aligned across cards. Clip horizontally only so g descenders remain visible. */
/* Scale specimens down with card width instead of letting them expand cards. */
.pspec{display:block;min-width:0;height:58px;font-size:min(46px,27cqi);line-height:58px;white-space:nowrap;overflow-x:clip;overflow-y:visible;margin-bottom:8px;font-feature-settings:normal}
.ptag{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pname{font-size:var(--fs-l);font-weight:600;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.pmiss{font-size:var(--fs-s);line-height:1.4;color:var(--warn)}
.pdel{position:absolute;top:6px;right:6px}
#saveDlg{width:min(460px,calc(100vw - 32px))}
.save-meta{display:grid;gap:var(--sp-3)}
.dlg-form #saveDup{font-size:var(--fs-s);color:var(--muted)}
.dlg-form .save-src{color:var(--ink)}
.save-meta .seg{justify-self:start}
.pf-menu{width:auto;min-width:200px}
.pf-end{display:flex;align-items:center;gap:var(--sp-2);padding-right:10px;font-size:var(--fs-s);color:var(--muted)}
.pf-end .mm-item{flex:1;width:auto}
.pf-end .mono{white-space:nowrap}
.pf-menu .mm-item{padding-top:6px;padding-bottom:6px}      /* Three filter groups, denser than a standard menu. */
#pfBtn .badge{margin-left:-2px}
.pf-none{grid-column:1/-1;margin:var(--sp-4) 0;font-size:var(--fs-m);color:var(--muted)}
@media (max-width:480px){.pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.pspec{font-size:min(36px,27cqi);height:46px;line-height:46px}}

/* ---------- bench ---------- */
/* Fill the space below the top bar with editor, proof and specimen panes separated by a thin divider.
   Pane toolbars share height and a continuous bottom rule; controls use the same flat styling. */
.bench{position:relative;display:grid;grid-template-columns:var(--left-w,minmax(400px,520px)) 0 minmax(0,1fr);min-height:0;background:var(--sheet)}      /* A zero-width middle column holds the divider; --left-w stores the dragged pane width. */
.bench>*{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}      /* Panes scroll independently without chaining at their edges. */
.compose{--px:16px;padding:0 var(--px) 20px;border-right:1px solid var(--line)}
/* Invisible 9px divider hit area; show its line on hover, drag or keyboard focus. */
.bench>.split{position:relative;z-index:3;overflow:visible;cursor:col-resize;touch-action:none;outline:none}
.split::before{content:"";position:absolute;inset:0 -5px 0 -4px}
.split::after{content:"";position:absolute;top:0;bottom:0;left:-2px;width:3px;background:transparent;transition:background .12s}
.split:hover::after,.split:focus-visible::after,.splitting .split::after,.hsplitting .hsplit::after{background:var(--accent)}
.splitting,.splitting *{cursor:col-resize!important;user-select:none}
/* Drag the divider above the specimen vertically to resize it. */
.hsplit{position:absolute;left:0;right:0;top:0;height:0;z-index:3;cursor:row-resize;touch-action:none;outline:none}
.hsplit::before{inset:-5px 0 -4px}
.hsplit::after{left:0;right:0;top:-2px;bottom:auto;width:auto;height:3px}
.hsplitting,.hsplitting *{cursor:row-resize!important;user-select:none}
/* Narrow screens show one pane, selected with bottom tabs. */
.mtabs{display:none}
@media (max-width:1000px){
  .bench{grid-template-columns:minmax(0,1fr)}
  .bench>.split{display:none}
  .bench>.compose,.bench>.tester{display:none}
  .app[data-mview="edit"] .bench>.compose{display:block}
  .app[data-mview="preview"] .bench>.tester{display:flex}
  .compose{border-right:0}
  .mtabs{display:flex;border-top:1px solid var(--ink);background:var(--bg);padding-bottom:env(safe-area-inset-bottom,0px)}
  .mtabs button{flex:1;border:0;background:none;padding:12px 0 13px;font-size:var(--fs-m);color:var(--muted);border-top:2px solid transparent;margin-top:-1px}
  .mtabs button[aria-selected="true"]{color:var(--ink);font-weight:600;border-top-color:var(--ink)}
}
@media (max-width:640px){.topbar{gap:10px;padding:0 12px}.brand{font-size:18px}}
.mm-about{display:none}
@media (max-width:480px){.topbar .btn{padding-inline:var(--sp-3)}.brand{font-size:18px}#aboutBtn{display:none}.mm-about{display:flex}}      /* On phones, shorten language labels to leave room for the title. */
/* Pane toolbars share the same height. */
.bench{--bar-h:54px}
@media (max-width:560px){.compose{--px:8px}}      /* Halve horizontal pane padding on phones to make room for dense tables. */
/* Auto-fit wand beside the font header; the header is small monospaced text, while the action uses regular UI text. */
.wand{color:var(--ink)}      /* Base appearance comes from .btn-ghost; these styles cover adjustment and completion states. */
.wand:disabled{opacity:1;cursor:progress}
/* While fitting, replace the wand with a spinner and show progress; briefly show a green check when complete. */
.wand .spin,.wand .ok-mark{display:none}
.wand[aria-busy="true"]{color:var(--accent)}
.wand[aria-busy="true"] svg,.wand.done svg{display:none}
.wand[aria-busy="true"] .spin{display:inline-block;width:13px;height:13px;border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;border-radius:50%;animation:wandspin .8s linear infinite;flex:none}
.wand.done{color:var(--ok)}
.wand.done .ok-mark{display:inline-block;width:15px;text-align:center;font-weight:700}
.wand .wand-lab{font-variant-numeric:tabular-nums}
@keyframes wandspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wand[aria-busy="true"] .spin{animation-duration:2.4s}}

/* Size the class column for its longest name plus gear; give remaining width to font names and allow class descriptions to wrap. */
.ct-row{--name-w:108px;display:grid;grid-template-columns:28px var(--name-w) minmax(0,1fr) 72px 72px 14px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule);--c:var(--c-custom)}
.ct-head{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:14px 0 8px;border-bottom:1px solid var(--line)}
.ct-head .r{text-align:right;padding-right:var(--sp-1)}
.ct-head .r.lab-i{display:flex;justify-content:flex-end;gap:4px;white-space:nowrap}      /* Allow overflow into the empty header space on the left. */
:root:lang(ja) .ct-row{--name-w:126px}
:root:lang(en) .ct-row{--name-w:122px}
:root:lang(en) .ct-name .nm{white-space:normal}      /* Long English class names may wrap, with the gear following them. */
:root:lang(en) .ct-head{letter-spacing:.04em}
.ct-row[data-id="punct"] .ct-glyph,.ct-row[data-id="shared"] .ct-glyph{font-feature-settings:"halt"}      /* Narrow full-width punctuation so two specimen marks fit in one cell. */
.ct-glyph{font-family:var(--cf),var(--generic);font-size:22px;line-height:1.3;white-space:nowrap;overflow:visible;text-align:center}      /* Do not clip descenders or enlarged Western specimens; allow overflow into neighboring gaps. */
.ct-name{display:grid;gap:1px;min-width:0;line-height:1.25}
.ct-name .nm{font-size:var(--fs-m);font-weight:500;display:flex;align-items:center;gap:6px;white-space:nowrap}
.ct-name small{font-size:var(--fs-xs);color:var(--muted);line-height:1.35}
.dot{display:none;width:8px;height:8px;border-radius:var(--r-s);background:var(--c);flex:none}
.show-colors .dot{display:inline-block}
.ct-font{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0}
.ct-font-pick{display:flex;align-items:center;gap:6px;min-width:0}
.ct-font-meta{padding:0 var(--sp-1);line-height:1.4;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ct-font-meta:not([hidden]){display:flex;flex-wrap:wrap;column-gap:var(--sp-1)}
.ct-font-range{white-space:nowrap}
.fsel{flex:1}      /* Appearance comes from .cell-in. Change background-color only; background shorthand would remove the select arrow. */
.fsel.follow{color:var(--muted)}
.status{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:var(--faint);cursor:help}
/* Expand status-dot hover targets without moving the visible dot or font-name alignment. */
.status::after{content:"";position:absolute;inset:-9px -3px}
.status:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Show status dots only while loading (pulsing) or failed (red); loaded/followed fonts free that space for their names. */
.status.ok{display:none}
.status.error{background:var(--warn)}
.status.loading{animation:pulse 1s ease-in-out infinite}
.status.none{display:none}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.status.loading{animation:none}}
.ct-note{grid-column:2/-1;margin:-2px 0 4px;padding:5px 8px}
.ct-err{grid-column:2/-1;font-size:var(--fs-s);color:var(--warn);margin-top:-2px}
.gear{margin-left:1px}
.ct-row .x{font-size:var(--fs-l);line-height:1}
.gear.on{color:var(--accent)}
.grp-pop{width:min(330px,calc(100vw - 24px));padding:14px 16px 8px}
.gp-head{display:grid;gap:4px;margin-bottom:8px}
.gp-head b{font-size:var(--fs-m);font-weight:600}
.gp-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--rule)}
.gp-sample{font-family:var(--cf),var(--generic);font-size:18px;white-space:nowrap;overflow:hidden}
.gp-name{display:grid;font-size:var(--fs-m);line-height:1.3}
.gp-name small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.sw{width:30px;height:18px;border-radius:var(--r-pill);border:0;background:var(--line);position:relative;padding:0;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--sheet);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.sw[aria-checked="true"]{background:var(--ink)}
.sw[aria-checked="true"]::after{transform:translateX(12px)}
@media (prefers-reduced-motion:reduce){.sw::after{transition:none}}
.ct-row .chars{grid-column:1/3;font-size:var(--fs-l);padding:5px 6px;min-width:0;width:100%}
.lab-i{display:inline-flex;align-items:center;gap:7px}
.info{flex:none;display:inline-grid;place-items:center;width:16px;height:16px;border:0;border-radius:50%;background:none;color:var(--muted);padding:0}
.info .ic{width:16px;height:16px}
.info:hover{color:var(--ink)}
.info-pop{width:min(340px,calc(100vw - 24px));max-height:min(70vh,520px);overflow:auto;padding:14px 16px;color:var(--ink-2);font-size:var(--fs-m);line-height:1.7}
.info-pop p{margin:0 0 8px}
.info-pop p:last-child{margin-bottom:0}
.info-pop b{color:var(--ink)}
.tip{position:fixed;inset:auto;margin:0;padding:5px 9px;white-space:pre-line;border:0;border-radius:var(--r);background:var(--ink);color:var(--sheet);font:var(--fs-s)/1.45 var(--ui);max-width:min(280px,calc(100vw - 8px));pointer-events:none;box-shadow:0 6px 16px -6px rgba(0,0,0,.35);animation:tipin .12s ease-out}
@keyframes tipin{from{opacity:0;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.tip{animation:none}}
.info-pop .ip-tech{margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3) var(--sp-3);background:var(--bg);border-radius:var(--r)}      /* Separate technical details with a background tint, not rules. */
.info-pop .ip-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);margin:0}
.info-pop .ip-head code{font-family:var(--mono);font-size:var(--fs-s);font-weight:600;color:var(--ink);background:none;padding:0}
.info-pop .ip-head span{font-size:var(--fs-xs);color:var(--muted)}
.info-pop .ip-sup{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-top:var(--sp-2)}
.info-pop .ip-b{display:grid;gap:1px;font-family:var(--mono);font-size:var(--fs-m);color:var(--ink-2);font-variant-numeric:tabular-nums}
.info-pop .ip-b small{font-family:var(--ui);font-size:var(--fs-xs);color:var(--muted)}
.info-pop .ip-b.none{color:var(--faint)}
.info-pop .ip-b.cur{color:var(--ink);font-weight:600}
.info-pop .ip-b.cur small{color:var(--ink);font-weight:500}
.info-pop .ip-all{margin:var(--sp-1) 0 0;font-size:var(--fs-s);color:var(--ink-2)}
.info-pop .ip-now{display:flex;align-items:center;gap:6px;margin:var(--sp-2) 0 0;font-size:var(--fs-s)}
.info-pop .ip-now::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.info-pop .ip-now.ok{color:var(--ok)}
.info-pop .ip-now.no{color:var(--caution)}
.info-pop dl{margin:10px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px}
.info-pop dt{font-weight:600;color:var(--ink);white-space:nowrap}
.info-pop dd{margin:0}
.info-pop dl.stack{grid-template-columns:minmax(0,1fr);gap:2px}      /* For long option names, stack name above description. */
.info-pop dl.stack dt{white-space:normal}
.info-pop dl.stack dd+dt{margin-top:8px}
.info-pop dl+p{margin-top:10px}
.info-pop code,.info-pop .mono{font-family:var(--mono);font-size:.92em}
/* The final Add custom characters row is fully clickable; align its add icon with specimen glyphs. */
.ct-add-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--rule)}
.ct-add{flex:1;display:flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;font-size:var(--fs-m);color:var(--muted);text-align:left}
.ct-add .plus{width:28px;display:grid;place-items:center}
.ct-add:hover{color:var(--ink)}
@media (max-width:440px){.ct-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 72px 72px 14px}.ct-glyph{display:none}.ct-row .chars{grid-column:1/2}.ct-row .ct-ax{grid-column:2/3}}

/* ---------- tester ---------- */
.tester{min-width:0}
/* Left-pane Fonts / Text layout tabs match the right-pane sample tabs. */
.pane-bar{display:flex;align-items:stretch;gap:22px;min-height:var(--bar-h);margin:0 calc(0px - var(--px));padding:0 var(--px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:var(--sheet)}
.pane-bar [role="tab"]{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:2px 0 0;font-size:var(--fs-l);color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.pane-bar [role="tab"]:hover{color:var(--ink)}
.pane-bar [role="tab"][aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.badge{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);background:var(--accent);color:var(--sheet);font-size:var(--fs-xs);font-weight:500;font-family:var(--mono)}      /* Count modified text-layout settings. */
.badge:empty{display:none}
.pane-bar .busy{align-self:center;margin-left:auto;flex:none}
/* Undo / redo at the tab row's right edge; dim unavailable actions while retaining tooltips. */
.pane-bar .hist{display:flex;align-self:center;gap:2px;margin-right:-6px}
/* Overlap tab underlines with the divider by shifting the entire row down 1px. Overflowing buttons instead would create a 1px vertical scroll range. */
.sample-tabs{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-width:0;margin-bottom:-1px}
.sample-tabs::-webkit-scrollbar{display:none}
.sample-tabs button{border:0;background:none;padding:14px 0 11px;font-size:var(--fs-m);color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.sample-tabs button:hover{color:var(--ink)}
.sample-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
/* Custom tabs have a small trailing delete button; without custom tabs, the trailing action adds one. */
.sample-tabs .ctab{display:inline-flex;align-items:center;gap:2px;flex:none}
.sample-tabs .ctab-x{border:0;padding:14px 2px 11px;font-size:var(--fs-l);line-height:1;color:var(--faint);border-bottom:2px solid transparent}
.sample-tabs .ctab-x:hover{color:var(--warn)}
.sample-tabs .tab-add{color:var(--muted);font-size:18px;line-height:1;min-width:32px;padding:11px 8px 9px;text-align:center}      /* Expand the small add icon's clickable area. */
.sample-tabs .tab-add:hover{color:var(--ink)}
.busy{font-size:var(--fs-xs);color:var(--muted);pointer-events:none;font-family:var(--mono)}
textarea{width:100%;min-height:110px;resize:vertical;background:var(--sheet);border:1px solid var(--ink);border-radius:var(--r);padding:12px 14px;font-family:var(--ui);font-size:var(--fs-l);line-height:1.7}
.sheet{--pad:clamp(22px,4.6vw,68px);background:var(--proof-bg,var(--sheet));padding:0 var(--pad) var(--pad);min-width:0;display:grid;gap:14px}
/* One proof toolbar spans the sheet's top: horizontally scrollable samples on the left, size/line height/View on the right. Keep it visible while long text scrolls. */
.sheet-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;line-height:1.4;font-family:var(--ui);min-height:var(--bar-h);margin:0 calc(0px - var(--pad)) calc(var(--pad) - 14px);padding:0 10px 0 16px;background:var(--sheet);border-bottom:1px solid var(--line)}
/* Keep a revealed tab clear of the sticky Add action, including on narrow screens. */
.sheet-bar .sample-tabs{scroll-padding-inline-end:calc(var(--sp-6) + var(--sp-3));flex:1 1 auto;align-self:stretch;gap:12px;margin-bottom:-1px}
.sheet-bar .sample-tabs button{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;padding-bottom:0}
.sheet-bar .sample-tabs .ctab{align-items:stretch}
.bar-ctrl{display:flex;align-items:center;gap:4px;flex:none}
.sample-tabs.fade-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px);mask-image:linear-gradient(to right,transparent,#000 36px)}
/* Keep Add visible at the tab area's right edge, fading clipped tabs behind it when more remain. */
.sheet-bar .sample-tabs .tab-add{position:sticky;right:0;flex:none;background:linear-gradient(var(--sheet),var(--sheet)) top/100% calc(100% - 1px) no-repeat}      /* Leave the bottom 1px clear so the toolbar rule remains visible. */
.sheet-bar .sample-tabs .tab-add::before{content:"";position:absolute;top:0;bottom:1px;right:100%;width:28px;background:linear-gradient(to right,transparent,var(--sheet));pointer-events:none;opacity:0}
.sheet-bar .sample-tabs.fade-r .tab-add::before{opacity:1}
/* View uses text and a chevron in a borderless pill; a preceding vertical separator divides numeric controls. */
.bar-sep{width:1px;height:18px;background:var(--line);margin:0 2px}
.bar-ctrl .view-btn::after{margin-left:2px}
/* Compact numeric control: icon + number + unit; scrub the icon horizontally. */
.nf{display:inline-flex;align-items:center;height:var(--ctl-h);padding:0 6px 0 0;border:1px solid transparent;border-radius:var(--r);font-family:var(--mono);font-size:var(--fs-s);color:var(--muted);white-space:nowrap}
.nf:hover{border-color:var(--line)}
.nf:focus-within{border-color:var(--ink)}
.nf-ic{display:grid;place-items:center;width:26px;height:28px;cursor:ew-resize;color:var(--muted);touch-action:none}
.nf-ic svg{width:15px;height:15px}
.nf:hover .nf-ic{color:var(--ink)}
.nf input{width:4ch;border:0;padding:0;background:none;font:inherit;color:var(--ink);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.nf input:focus{outline:none}
.nf #vSize,.nf #vWn,.nf #pkSampleSize{width:3ch}
.nf input::-webkit-inner-spin-button,.nf input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.nf .unit{margin-left:2px;color:var(--faint);font-variant-numeric:tabular-nums}
.nf output.unit::before{content:"· ";white-space:pre}
body.scrubbing,body.scrubbing *{cursor:ew-resize!important;user-select:none}
/* On narrow screens, put sample tabs above numeric fields and View. */
@media (max-width:620px){.sheet-bar{flex-wrap:wrap;padding:0 8px 4px 12px;gap:0 8px}.sheet-bar .sample-tabs{flex-basis:100%;min-height:44px;border-bottom:1px solid var(--line);margin:0 -8px 4px -12px;padding:0 0 0 12px}.bar-ctrl{flex:1}.bar-sep{margin-left:auto}}
.sheet>div{min-width:0}
/* Equal whitespace around the proof: remove leading/trailing half-leading in horizontal text so vertical padding is measured to glyph ink, matching side padding. */
.sheet:not(.vertical) .proof-text{margin-bottom:calc((1 - var(--lh,1.8)) * var(--fs,40px) / 2)}
.sheet:not(.vertical) .proof-text{margin-top:calc((1 - var(--lh,1.8)) * var(--fs,40px) / 2)}
.proof-text{outline:none;cursor:text;min-height:1em;color:var(--proof-ink,var(--ink));font-family:var(--cf),var(--generic);font-weight:var(--fw,400);font-style:var(--fst,normal);font-size:var(--fs,40px);line-height:var(--lh,1.8);white-space:pre-wrap;overflow-wrap:break-word;margin:0}
/* Guides mark line boxes (font size x line height). If one line grows taller, following glyphs no longer align with the guides. */
.sheet.rules .proof-text{background-image:linear-gradient(to bottom,var(--ruled) 1px,transparent 1px);background-size:100% calc(1em * var(--lh,1.8));box-shadow:inset 0 -1px var(--ruled)}
/* Vertical proof fills the height above the specimen and scrolls horizontally for extra columns. Keep at least 240px on short screens, allowing the pane to scroll vertically. */
.sheet.vertical .proof-text{writing-mode:vertical-rl;width:100%;height:100%;min-height:240px;overflow-x:auto;overflow-y:hidden}
.proof-scroll:has(>.sheet.vertical){display:flex;flex-direction:column}
.proof-scroll>.sheet.vertical{flex:1 1 auto;display:flex;flex-direction:column}
.sheet.vertical>.sheet-bar,.proof-scroll>.legend{flex:none}
.sheet.vertical>div:last-child{flex:1 1 0;min-height:240px;display:grid}
.sheet.rules.vertical .proof-text{background-image:linear-gradient(to left,var(--ruled) 1px,transparent 1px);background-size:calc(1em * var(--lh,1.8)) 100%;background-position:right top;background-attachment:local;box-shadow:none}
.r{position:relative;inset-block-start:calc(var(--sh,0) * -1em)}
/* Highlight API class colors use fill plus underline; vertical underlines appear on the glyphs' right side. */
::highlight(cf-latin){background-color:color-mix(in srgb,var(--c-latin) 18%,transparent);text-decoration:underline 2px color-mix(in srgb,var(--c-latin) 70%,transparent)}
::highlight(cf-digit){background-color:color-mix(in srgb,var(--c-digit) 18%,transparent);text-decoration:underline 2px color-mix(in srgb,var(--c-digit) 70%,transparent)}
::highlight(cf-kana){background-color:color-mix(in srgb,var(--c-kana) 18%,transparent);text-decoration:underline 2px color-mix(in srgb,var(--c-kana) 70%,transparent)}
::highlight(cf-bopo){background-color:color-mix(in srgb,var(--c-bopo) 18%,transparent);text-decoration:underline 2px color-mix(in srgb,var(--c-bopo) 70%,transparent)}
::highlight(cf-punct){background-color:color-mix(in srgb,var(--c-punct) 18%,transparent);text-decoration:underline 2px color-mix(in srgb,var(--c-punct) 70%,transparent)}
::highlight(cf-symbol){background-color:color-mix(in srgb,var(--c-symbol) 18%,transparent);text-decoration:underline 2px color-mix(in srgb,var(--c-symbol) 70%,transparent)}
::highlight(cf-shared){background-color:color-mix(in srgb,var(--c-shared) 18%,transparent);text-decoration:underline 2px color-mix(in srgb,var(--c-shared) 70%,transparent)}
::highlight(cf-custom){background-color:color-mix(in srgb,var(--c-custom) 18%,transparent);text-decoration:underline 2px color-mix(in srgb,var(--c-custom) 70%,transparent)}
.colorize .r[data-k]{background:color-mix(in srgb,var(--k) 18%,transparent);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--k) 70%,transparent)}
.r[data-k="han"]{--k:var(--c-han)} .r[data-k="kana"]{--k:var(--c-kana)} .r[data-k="punct"]{--k:var(--c-punct)}
.r[data-k="symbol"]{--k:var(--c-symbol)} .r[data-k="shared"]{--k:var(--c-shared)} .r[data-k="latin"]{--k:var(--c-latin)}
.r[data-k="digit"]{--k:var(--c-digit)} .r[data-k="bopo"]{--k:var(--c-bopo)}
.r[data-k="custom"]{--k:var(--c-custom)}
.colorize .r[data-k="other"],.colorize .r[data-k="han"]{background:none;box-shadow:none}
/* Vertical text, class colors and comparisons are preview controls alongside size and line height. */
/* Show settings inactive in continuous mode as a full-width yellow notice. */
.wrange{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.field .wrange input{width:64px;font-family:var(--mono);font-size:var(--fs-m)}
.wr-chips{margin-left:8px}
.chips.wr-chips button{width:auto;padding:4px 10px;white-space:nowrap}
/* Less common proof controls live in View; its button indicates the active count. */
.view-btn{color:var(--muted)}
.view-btn::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;border-right:1.25px solid currentColor;border-bottom:1.25px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.view-pop{--settings-width:320px}      /* Long notes and hex fields need a slightly wider variant; reuse all other settings-popover layout rules. */
.vt-row{display:contents;font-size:var(--fs-m)}
.vt-row:has(select:disabled)>span{color:var(--faint)}
.vt-row select:disabled{opacity:.5;cursor:not-allowed}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:var(--fs-s);color:var(--muted);padding:0 16px 14px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:var(--r-s);background:var(--c)}
/* Missing glyphs use wavy underlines only: yellow for fallback within the composite, red for system fallback. */
::highlight(cf-miss1),::highlight(cf-picker-miss1){text-decoration:underline wavy 1.5px var(--miss1)}
::highlight(cf-miss2),::highlight(cf-picker-miss2){text-decoration:underline wavy 1.5px var(--warn)}
/* Hover details for underlined missing glyphs. */
.miss-tip{position:fixed;z-index:30;max-width:min(320px,calc(100vw - 16px));padding:7px 10px;border-radius:var(--r);background:var(--caution-bg);color:var(--caution);border:1px solid color-mix(in srgb,var(--caution) 35%,transparent);font-size:var(--fs-s);line-height:1.55;box-shadow:0 10px 24px -12px rgba(0,0,0,.35);pointer-events:none}
.miss-tip[hidden]{display:none}
.miss-tip.lv2{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}

/* ---------- metrics & advanced ---------- */
/* The proof scrolls above a fixed specimen below. */
.tester{display:flex;flex-direction:column;overflow:hidden}      /* The .bench>.tester rule hides this pane when inactive on narrow screens. */
.proof-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;background:var(--proof-bg,var(--sheet))}
.legend{background:var(--sheet)}
.panel{position:relative;flex:none;display:grid;min-width:0;border-top:1px solid var(--line)}
.spec-wrap{min-width:0}
/* Place specimen View at the white area's top-right, matching the proof sheet. */
.spec-wrap{position:relative}
/* The specimen toolbar spans the top like the proof toolbar. Each guide toggle doubles as a legend with its line color and dash pattern. */
.spec-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px;min-height:40px;padding:4px 10px 4px 16px;border-bottom:1px solid var(--line);line-height:1.4;font-family:var(--ui)}
.sg-tog{gap:7px;color:var(--faint)}      /* Appearance comes from .btn-ghost. */
.sg-tog[aria-pressed="true"]{color:var(--ink)}
.sg-tog .sg-line{display:block;flex:none;width:16px;border-top:2px solid var(--line)}
.sg-tog.dash .sg-line{border-top-style:dashed}
.sg-tog[aria-pressed="true"] .sg-line{border-top-color:var(--c)}
@media (max-width:560px){.spec-bar{padding-left:8px}.sg-tog{padding:0 7px;gap:6px}}
#spec{display:block;width:100%;height:160px;background:var(--proof-bg,var(--sheet))}

/* The Text layout tab starts by explaining that its settings apply across weights. */
.typo{min-width:0}
.typo-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 0 2px}
.typo-scope{flex:1 1 220px;font-size:var(--fs-s);line-height:1.55;color:var(--muted)}
/* Weights: title and mode switch above a weight-by-class matrix; separate rows with thin rules like the class table. */
.sec-head.base-head{margin-top:var(--sp-4)}
.base-head .wand{margin:-6px -8px -6px 0}
.w-acts{display:inline-flex;align-items:center;gap:6px}
.wm{--wm-cols:80px 1fr;display:grid;grid-template-columns:var(--wm-cols);column-gap:8px;overflow-x:auto}      /* Rows use subgrid to share column widths and align headers with numbers. */
.wm-rows{display:contents}
.wm-cont .range-vertical{grid-column:1;margin-block:17px}
.wm-cont .wm-row[data-row]{grid-column:2/-1}
.wm-cont .wm-row[data-row]>:first-child{padding-left:0}
.wm-cont .wm-single>.wm-wh:first-child{padding-left:0;justify-content:center}
.wm-cont .wm-sub>.wm-xh{padding-left:0;text-align:center}
.wm-cont .wm-row.off>:not(.wm-w){visibility:hidden}
.wm-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;min-height:34px;border-bottom:1px solid var(--rule)}
.wm-row[data-row]:not(.off){cursor:pointer}
.wm-row[data-row]:not(.cur):not(.off):hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.wm-row>:first-child{padding-left:8px}
.wm-cls{min-height:0;padding:10px 0 2px;border-bottom:0;font-size:var(--fs-s);color:var(--ink)}
.wm-cls>span{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding-bottom:4px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}      /* Class names span their respective columns. */
.wm-cls>span:empty{border-bottom:0}
.wm-clabel{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wm-cls .btn-icon{flex:none}
.wm-single{padding-bottom:6px;border-bottom:1px solid var(--line)}
.wm-single>span{padding-bottom:0;border-bottom:0}
.wm-single>.wm-wh{justify-content:flex-start;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.wm-sub{min-height:0;padding:0 0 6px;border-bottom-color:var(--line);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wm-sub>span{text-align:right;padding-right:calc(var(--cell-step-w) + var(--sp-1))}
.wm-sub>.wm-xh,.wm-sub>.wm-wh{text-align:left;padding-right:0}
.wm-x{display:flex;align-items:center}
.wm-w{display:flex;align-items:center;gap:6px;min-width:0}
.wm-x input[type=checkbox]{margin:0;accent-color:var(--ink)}
.wm-pw{border:0;background:none;padding:6px 0;font:var(--fs-m)/1 var(--mono);color:var(--ink);text-align:left;white-space:nowrap}
button.wm-pw:not(:disabled):hover{text-decoration:underline;text-underline-offset:3px}
.wm-pw:disabled{cursor:default}
.wm-pw small{margin-left:5px;font-family:var(--ui);font-size:var(--fs-xs);color:var(--muted)}
.wm-row.off .wm-pw{color:var(--muted)}
.wm-row.cur{background:color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:inset 2px 0 var(--accent)}
.wm-row.cur .wm-pw{color:var(--accent);font-weight:600}
.wm-c{position:relative;display:flex;align-items:center;min-width:0}
/* Matrix numbers match class fields: grey for derived/inherited values, black for explicit base values, blue for per-weight overrides. */
.wm-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;padding-right:calc(var(--cell-step-w) + var(--sp-1))}
.wm-name.guess{color:var(--caution)}
.wm-c.swapped .cell-in{color:var(--accent);font-style:italic}
/* Per-step font replacement actions appear at the cell edge on hover. */
.wm-act{display:flex;justify-content:center}
.wm-more{opacity:0}      /* Reveal row-end menus on row hover, keyboard focus or while open. */
.wm-row:hover .wm-more,.wm-more:focus-visible,.wm-more:popover-open,.wm-more[aria-expanded="true"]{opacity:1}
@media (hover:none){.wm-more{opacity:1}}
/* Font features finish the Fonts tab, using the custom-character heading pattern with an all-weights scope note. */
#featRows{padding-top:0}
.typo-changed{font-size:var(--fs-s);color:var(--accent);white-space:nowrap}
.typo-reset{font-size:var(--fs-s);padding:0;white-space:nowrap}
.typo-body{display:grid;gap:var(--sp-2);padding:0 0 var(--sp-3)}
/* In the narrow editor, put labels beside choices and browser support below. */
.typo-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--sp-2) var(--sp-3);align-items:center;padding:var(--sp-3) 0}      /* Separate items with spacing, not rules. */
.typo-unsup{grid-column:1/-1;margin:0;font-size:var(--fs-s);line-height:1.5;color:var(--caution)}
/* Numeric specimen cards span the full row beneath their heading. */
.typo-row.tiles{grid-template-columns:minmax(0,1fr)}
.typo-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--tile-w,86px),100%),1fr));gap:6px}
.typo-tiles button{display:grid;gap:5px;justify-items:center;align-content:start;padding:10px 6px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);color:var(--ink);text-align:center;min-width:0}
.typo-tiles button:hover{border-color:var(--faint)}
.typo-tiles button[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tt-s{font-family:var(--cf),var(--generic);font-weight:var(--fw,400);font-style:normal;font-size:var(--tile-fs,22px);line-height:1.25;white-space:nowrap;max-width:100%;overflow:hidden}
.tt-l{font-size:var(--fs-xs);line-height:1.35;color:var(--muted)}
.tt-l small{display:block;font-size:var(--fs-xs);color:var(--faint)}
.typo-tiles button[aria-checked="true"] .tt-l{color:var(--ink)}
.typo-tiles button.lack .tt-s{position:relative;justify-self:stretch;color:transparent}      /* For unsupported features, omit the specimen and show a short explanation. */
.typo-tiles button.lack .tt-s::after{content:attr(data-lack);position:absolute;inset:0;display:grid;place-items:center;font:var(--fs-xs)/1.3 var(--ui);letter-spacing:0;color:var(--faint);white-space:normal}
.typo-tiles button.lack{border:1px dashed var(--faint)}      /* Unsupported features use a dashed outline; selected ones use a heavier warning outline. */
.typo-tiles button.lack:hover{border-color:var(--muted)}
.typo-tiles button.lack[aria-checked="true"]{border:2px dashed var(--caution);box-shadow:none;padding:9px 5px 7px}      /* Reduce padding by 1px when the border thickens so content does not shift. */
.tt-l code{display:block;margin-top:2px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);overflow-wrap:anywhere}
/* Illustrations are grey, turning black when selected; dashed lines mark text-area edges. */
.tt-pic{line-height:0;color:var(--faint)}
.typo-tiles button[aria-checked="true"] .tt-pic,.typo-tiles button:hover .tt-pic{color:var(--ink)}
.tt-svg{width:58px;height:36px;fill:currentColor}
.lm-pic .tt-svg{width:84px;height:52px}      /* Enlarge line-metric illustrations enough to judge spacing consistency. */
.tt-svg .tt-edge{stroke:var(--accent);stroke-width:.6;stroke-dasharray:1.5 1.5;fill:none}
.tt-svg .tt-mark{stroke:currentColor;stroke-width:1.1;fill:none}
/* Render actual text in a four-character-wide box, with a left text-area edge to reveal indentation. */
.tt-box{display:block;width:4em;font-size:19px;line-height:1.35;white-space:normal;text-align:start;overflow:visible;padding-left:0;box-shadow:-1px 0 0 var(--accent);min-height:2.7em}
.tt-box[lang="ja"]{width:5em}
/* Line-breaking samples are four characters wide and three lines high, with fixed punctuation and spacing so only break positions vary. */
.tt-box.tt-lb{width:4em;min-height:4.05em;text-spacing-trim:space-all;text-autospace:no-autospace;font-feature-settings:normal}
.typo-note{grid-column:1/-1;margin:2px 0 0;font-size:var(--fs-s);line-height:1.55;color:var(--muted)}
.typo-name{display:flex;align-items:center;gap:7px;line-height:1.35}
.typo-name b{font-size:var(--fs-m);font-weight:600}
.typo-row select{width:100%}
@media (max-width:700px){.typo-row{grid-template-columns:minmax(0,1fr)}}

/* ---------- export ---------- */
/* Export/About side dialogs: narrow settings/contents column on the left and content on the right, each scrolling independently. On narrow screens use one full-screen scroller. */
.side-dlg{width:min(1200px,calc(100vw - 32px));height:calc(100dvh - 48px);max-height:none;overflow:hidden}
.dlg-grid{position:relative;height:100%;display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr)}
.dlg-side{min-width:0;overflow:auto;display:grid;align-content:start;gap:16px;padding:26px 24px;border-right:1px solid var(--line);background:var(--bg);overscroll-behavior:contain}
.dlg-side .ex-title{margin:0}
.dlg-body{min-width:0;overflow:auto;padding:26px clamp(20px,4vw,48px) 32px;overscroll-behavior:contain}
.dlg-body:focus{outline:none}      /* Focus content on opening so keyboard scrolling works immediately. */
.dlg-x{position:absolute;top:10px;right:10px;z-index:7;color:var(--muted)}
.dlg-x .ic{width:20px;height:20px}
@media (max-width:760px){.side-dlg{width:100vw;height:100dvh;max-width:none;border:0;border-radius:0}.dlg-grid{display:block;overflow:auto}.dlg-side,.dlg-body{overflow:visible}.dlg-side{border-right:0;border-bottom:1px solid var(--line);padding-right:52px}.dlg-x{position:fixed}}
.ex-title{margin:0 0 18px;font-size:clamp(22px,2.4vw,28px);font-weight:500;letter-spacing:-.015em;line-height:1.15}
/* Export-kind cards stack in the left column; selected cards use the same black outline as presets. */
.ex-kinds{display:grid;gap:8px}
.ex-kinds [role="tab"]{display:grid;gap:3px;text-align:left;padding:11px 14px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);color:var(--muted)}
.ex-kinds [role="tab"] b{font-size:var(--fs-l);font-weight:600}
.ex-kinds [role="tab"] span{font-size:var(--fs-s);line-height:1.5}
.ex-kinds [role="tab"]:hover{border-color:var(--faint);color:var(--ink-2)}
.ex-kinds [role="tab"][aria-selected="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.ex-kinds [role="tab"][aria-selected="true"] span{color:var(--muted)}
.export[data-kind="css"] :is(.kind-font,.kind-app),.export[data-kind="font"] :is(.kind-css,.kind-app,.kind-code),.export[data-kind="app"] :is(.kind-css,.kind-font){display:none}      /* Each export kind has separate settings and output; .kind-code is shared by web and app code. */
.ex-side .ex-fields{padding-top:16px;border-top:1px solid var(--line)}
.ex-side .ex-fields .ex-fields{padding-top:0;border-top:0}
/* Keep CSS/JS tabs and Copy visible while long output scrolls. */
/* Sticky offsets begin inside scroller padding. Move top padding from the content pane to its tab bar so code cannot peek above the sticky bar. */
.dlg-body.ex-out{padding-top:0}
.ex-out .ex-top{position:sticky;top:0;z-index:5;padding:12px 40px 0 0;background:var(--sheet)}      /* Reserve the top-right corner for Close. */
.ex-out .kind-font{padding-top:20px}
.ex-out .code pre{max-height:none}
/* About uses the left column for title, introduction and contents. */
.about-toc{display:grid;gap:2px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.about-toc a{font-size:var(--fs-m);line-height:1.5;color:var(--muted);text-decoration:none;padding:3px 0}
.about-toc a:hover{color:var(--ink)}
.about-body .notes{padding-top:0}
.about-body .notes>h3:first-child{margin-top:0}
@media (max-width:760px){.about-toc{display:flex;flex-wrap:wrap;gap:4px 14px}}
.ex-fields{display:grid;gap:18px}
.ex-fields .field>input[type=text],.ex-fields .field>select{width:100%}
.ex-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;border-bottom:1px solid var(--line);margin-bottom:14px}
.ex-actions{display:flex;gap:10px;flex-wrap:wrap;padding:6px 0}
@media (max-width:560px){.ex-actions{order:-1;flex-basis:100%}}      /* On narrow screens, place actions above tabs, with tabs touching the divider. */
.field{display:grid;gap:6px}
/* Show font/language mismatches directly below the export language field. */
.field label,.field .flabel{font-size:var(--fs-s);color:var(--muted)}
.field input{width:210px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips button{border:1px solid var(--line);background:var(--sheet);border-radius:var(--r-pill);padding:4px 0;width:44px;font-family:var(--mono);font-size:var(--fs-s);color:var(--muted)}
.chips button:hover{border-color:var(--faint);color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
/* Label 400 and 700 weight buttons as Body and Bold. */
.chips button.wl{width:auto;padding:4px 10px}
.chips.tags button{width:auto;padding:4px 10px;font-family:var(--ui)}      /* Text filter chips size to their labels. */
button.wl small{font-family:var(--ui);font-size:var(--fs-xs);margin-left:5px;opacity:.75}
.w-hint{margin:2px 0 0;font-size:var(--fs-s);line-height:1.6}
.w-hint .btn-text{font-size:var(--fs-s);white-space:nowrap;color:inherit}
.tabs{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden}
.ex-tabs{margin-bottom:-1px}
.tabs button{border:0;background:transparent;padding:14px 0 11px;font-size:var(--fs-m);color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.ex-bar{padding:0 0 12px}
/* Font-file export: used fonts/licenses, output choices, then progress and results. */
.fx{display:grid;gap:22px;padding:6px 0 20px;max-width:76ch}
.fx p{margin:0;line-height:1.7;color:var(--ink-2)}
.fx-intro{font-size:var(--fs-l)}
.fx-sec{display:grid;gap:10px}
.fx-src{border-top:1px solid var(--line)}
.fx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule)}
.fx-name{font-weight:600;overflow-wrap:anywhere}
.fx-meta,.fx-note{grid-column:1/-1;font-size:var(--fs-s);line-height:1.55;color:var(--muted)}
.fx-note.no{color:var(--warn)}
.fx-note.lic{color:var(--ink-2);overflow-wrap:anywhere}
.fx-lic{font-family:var(--mono);font-size:var(--fs-xs);white-space:nowrap;padding:2px 7px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--muted)}
.fx-lic.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.fx-lic.warn{color:var(--caution);background:var(--caution-bg);border-color:transparent}
.fx-lic.no{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.fx-styles{font-size:var(--fs-m);color:var(--muted)}
.fx-chk{display:flex;gap:8px;align-items:baseline;font-size:var(--fs-m);line-height:1.55;cursor:pointer}
.fx-chk input{flex:none;width:auto;margin:0;transform:translateY(2px)}
.ex-side .fx-chk{justify-content:flex-start;font-size:var(--fs-m);color:var(--ink-2)}
.fx-opt{display:flex;align-items:center;gap:8px}
.fx-agree{display:grid;gap:6px}
.fx-agree .fx-note{color:inherit;font-size:var(--fs-m)}
.fx-local{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 12px;border-radius:var(--r);background:var(--rule)}
.fx-local p{flex:1 1 260px;font-size:var(--fs-m);line-height:1.6}
.fx-block{display:grid;gap:6px}
.fx-block p,.fx-err{color:var(--caution);font-size:var(--fs-m)}
.fx-err{color:var(--warn)}
.fx-run{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.fx-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.fx-sum{font-size:var(--fs-m);line-height:1.6;color:var(--ink-2);min-width:0}
.fx-limits{margin-top:32px;padding-top:16px;border-top:1px solid var(--line)}      /* Separate lower-priority content with extra space above. */
.fx-limits ul{margin:0;padding-left:1.2em;display:grid;gap:5px}
.fx-limits li{font-size:var(--fs-m);line-height:1.65;color:var(--ink-2)}
.fx-bar{height:4px;border-radius:var(--r-s);background:var(--rule);overflow:hidden}
.fx-bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.fx-stale{color:var(--caution)}
.fx-files{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;font-family:var(--mono);font-size:var(--fs-s);color:var(--ink-2)}
.fx-files span:nth-child(even){text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.fx-files span:nth-child(odd){overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.fx-bar i{transition:none}}
.code{background:var(--code-bg);color:var(--code-ink);border-radius:var(--r);overflow:hidden}
.code-meta{font-family:var(--mono);font-size:var(--fs-s);color:var(--code-cm);padding:11px 20px;border-bottom:1px solid color-mix(in srgb,var(--code-ink) 12%,transparent)}
.code pre{max-height:min(560px,70vh);overflow:auto;margin:0;padding:18px 20px;font-family:var(--mono);font-size:var(--fs-m);line-height:1.65;white-space:pre;tab-size:2}
.code .cm{color:var(--code-cm)} .code .at{color:var(--code-at)} .code .pr{color:var(--code-prop)}
.notes{padding:8px 0 18px;display:grid;gap:12px;max-width:76ch}
.notes h3{margin:12px 0 0;font-size:var(--fs-l);font-weight:600}
.notes p{margin:0;color:var(--ink-2);line-height:1.75}
.notes code{font-family:var(--mono);font-size:.88em;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:0 4px}
.notes a{color:inherit;text-decoration-color:var(--faint);text-underline-offset:3px}
.sup-table{overflow-x:auto;max-width:100%}
.sup-table table{border-collapse:collapse;font-size:var(--fs-m);min-width:640px}
.sup-table th,.sup-table td{text-align:left;padding:8px 14px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.sup-table th{font-weight:500;font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono);letter-spacing:.06em}
.sup-table td.v{font-family:var(--mono);font-size:var(--fs-s);white-space:nowrap;font-variant-numeric:tabular-nums}

.foot{margin-top:40px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:baseline;font-size:var(--fs-s);color:var(--muted);max-width:76ch}
.foot .mono{font-size:var(--fs-xs)}
.gp-foot{display:flex;justify-content:flex-end;padding:6px 0 4px;border-top:1px solid var(--rule);margin-top:4px}

/* ---------- dialog ---------- */
dialog{border:1px solid var(--ink);border-radius:var(--r);background:var(--sheet);color:var(--ink);padding:0;width:min(600px,calc(100vw - 32px));max-height:calc(100vh - 48px)}
dialog::backdrop{background:rgba(8,8,10,.45)}
#picker{--picker-gap:24px;width:min(1280px,calc(100vw - 48px));max-height:calc(100dvh - 2 * var(--picker-gap));overflow:hidden}
.pk{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-5);height:calc(100dvh - 2 * var(--picker-gap) - 2px)}
/* Give browsing most of the workspace; its scroll position is independent of the selected font's details. */
.pk-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:0;overflow:hidden;min-height:0}
.pk-sources,.pk-detail{display:grid;align-content:start;gap:var(--sp-4);min-width:0}
.pk-sources{grid-template-rows:minmax(0,1fr);grid-column:1;grid-row:1 / -1;min-height:0;overflow:hidden;padding-inline-end:var(--sp-5)}
.pk-detail{grid-column:2;grid-row:1;grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden;padding:var(--sp-3) 0 0 var(--sp-5);border-inline-start:1px solid var(--line)}
.pk-sources>[data-pane="library"]{display:grid;height:100%;min-height:0;grid-template-rows:minmax(0,1fr)}
.pk-sources>[data-pane="file"]{display:flex;flex-direction:column;height:100%;min-height:0;max-height:100%;overflow:auto}
.pk-sources>[data-pane="file"].is-empty #ffDrop{flex:1;min-height:240px;flex-direction:column;justify-content:center;text-align:center}
.pk-sources>[data-pane="file"]>#ffError{flex:none}
.file-drop-note{display:grid;gap:var(--sp-1);min-width:0;overflow-wrap:anywhere}
.file-drop-note p{margin:0}
.pk-sources>[data-pane="file"].is-empty #ffDrop{row-gap:var(--sp-5)}
.pk-detail-content{display:grid;grid-template-rows:max-content minmax(0,1fr);gap:var(--sp-4);min-width:0;min-height:0}
.pk-detail-header{display:grid;gap:var(--sp-4);min-width:0;background:var(--sheet)}
/* Keep the selected family and detail tabs outside the desktop content scroller. */
.pk-detail-scroll{display:grid;grid-auto-rows:max-content;align-content:start;gap:var(--sp-4);min-height:0;overflow:auto;scrollbar-gutter:stable;padding:0 var(--sp-2) var(--sp-4) 0}
.pk-detail.is-empty{align-content:center}
.pk-detail.is-empty>.empty-state{align-self:center}
.font-empty-visual{position:relative;display:grid;place-items:center;width:140px;height:140px;margin-bottom:var(--sp-4);border:1px solid var(--line);color:var(--faint);background:linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat;font-family:var(--generic)}
.font-empty-visual>span{font-size:100px;line-height:1}
.font-empty-visual>i{position:absolute;right:-20px;bottom:-16px;padding-inline:var(--sp-1);font:italic 48px/1 Georgia,serif;background:var(--sheet)}
/* Keep axis settings above confirmation on desktop; long axis lists never push actions out of view. */
.pk-footer{grid-column:2;grid-row:2;min-height:0;min-width:0;padding-inline-start:var(--sp-5);border-inline-start:1px solid var(--line)}
.pk-italic-file{display:grid;gap:var(--sp-2);padding:var(--sp-3) 0}
.pk-footer>.pk-axes{max-height:40dvh;overflow:auto;padding:var(--sp-3) var(--sp-2) var(--sp-3) 0;scrollbar-gutter:stable}
.pk-sources>[data-pane="library"]>.pk-browse{display:flex;flex-direction:column;min-height:0}
#gfOptions{flex:1 1 auto;height:auto;max-height:calc(var(--font-choice-count,4)*96px)}
.pk .font-options{--font-choice-max:520px;--font-choice-row:96px}
.pk .font-option{grid-template-rows:max-content 40px;align-content:center;min-height:96px}
.pk .font-option-sample{font-size:30px;line-height:40px}
.pk-browse{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.pk-browse>input{width:100%}
.pk-name-actions,.pk-local-status{display:grid;gap:var(--sp-2);justify-items:start;font-size:var(--fs-s)}
.pk-name-actions .btn-text{max-width:100%;text-align:left;overflow-wrap:anywhere}
.font-option-title{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);min-width:0}
.font-option-title .font-option-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.font-option-native{font-weight:400;color:var(--muted)}
.font-option-source{display:inline-flex;align-items:center;gap:var(--sp-1);flex:0 1 auto;max-width:60%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-xs);font-weight:400;color:var(--muted)}
@container(max-width:420px){
  .font-option-title{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:0}
  .font-option-source{max-width:100%;justify-self:end}
}
.pk-search{display:flex;gap:var(--sp-2);align-items:center}
.pk-search>input{width:100%;min-width:0}
@media(max-width:860px){
  #picker{--picker-gap:16px;width:calc(100vw - 32px)}
  .pk{padding:var(--sp-4)}
  /* Use one workspace scroll on narrow screens so neither pane becomes a tiny nested viewport. */
  .pk-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content;grid-auto-rows:max-content;overflow:auto;align-content:start;gap:var(--sp-4)}
  .pk-sources,.pk-detail{grid-column:1;min-height:auto;overflow:visible;scrollbar-gutter:auto}
  .pk-sources{grid-template-rows:auto;grid-row:1;padding-inline-end:0}
  .pk-detail{grid-row:2;grid-template-rows:max-content}
  .pk-detail-content{grid-template-rows:max-content max-content;min-height:auto}
  .pk-detail-header{position:sticky;top:0;z-index:2;padding-bottom:var(--sp-2)}
  .pk-detail-scroll{overflow:visible;scrollbar-gutter:auto;padding-right:0;min-height:auto}
  .pk-sources>[data-pane="library"]{height:auto;grid-template-rows:auto}
  .pk-sources>[data-pane="file"]{height:auto;max-height:none;overflow:visible}
  .pk-sources>[data-pane="file"].is-empty #ffDrop{min-height:min(32dvh,240px)}
  #gfOptions{flex:none;height:min(220px,calc(var(--font-choice-count,4)*96px))}
  .pk-detail{padding:var(--sp-4) 0 0;border-inline-start:0;border-block-start:1px solid var(--line)}
  /* The footer remains one semantic group, while axes join the single workspace scroller on narrow screens. */
  .pk-footer{display:contents}
  .pk-footer>.pk-italic-file{grid-column:1}
  .pk-footer>.pk-axes{grid-column:1;max-height:none;overflow:visible;padding:0;scrollbar-gutter:auto}
  .pk-footer>.pk-actions{grid-column:1;grid-row:auto;position:sticky;bottom:0;z-index:2;padding:var(--sp-3) 0 0;border-inline-start:0;background:var(--sheet)}
  .pk .font-options{--font-choice-max:220px}
}
/* An empty file library has one full-size drop surface at every breakpoint; importing restores the normal pane layout. */
.pk-workspace.file-empty{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.pk-workspace.file-empty>.pk-sources{grid-column:1;grid-row:1;grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden;padding-inline-end:0}
.pk-workspace.file-empty>.pk-sources>[data-pane="file"]{height:100%;max-height:100%;overflow:auto}
.pk-workspace.file-empty>.pk-detail{display:none}
.pk-workspace.file-empty>.pk-footer{display:block;grid-column:1;grid-row:2;padding-inline-start:0;border-inline-start:0}
.pk-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.pk h3{margin:0;font-size:var(--fs-xl);font-weight:600}
.pk h3 span{color:var(--muted);font-weight:400}
.pk .tabs{margin-top:0;box-shadow:inset 0 -1px 0 var(--line);overflow-y:hidden}
.pk-grid{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px}
.pk-grid .field input,.pk-grid .field select{width:100%}
.pk .field input,.pk .field select{width:100%}
/* The specimen stays primary; secondary tools use shared settings popovers and disclosures. */
.pk-preview{display:grid;gap:var(--sp-4)}
.pk-sample-controls{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap}
.pk-info{display:grid;gap:var(--sp-4)}
.pk-info-group{display:grid;gap:var(--sp-3);min-width:0}
.pk-info-group>.hint{margin:0}
.pk-info-group>p:empty{display:none}
.pk-metadata{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-3);margin:0;font-size:var(--fs-m)}
.pk-metadata dt{color:var(--muted)}
.pk-metadata dd{margin:0;min-width:0;overflow-wrap:anywhere;white-space:pre-line}
.pk-metadata dd[data-unavailable]{color:var(--muted)}
#lfFaceField{max-width:100%}
#lfFaceField select{width:100%}
.pk-sample-box{position:relative;min-width:0}
#pkSample,.pk-sample-mirror{display:block;width:100%;font-size:32px;line-height:1.3;overflow-wrap:anywhere;white-space:pre-wrap;min-height:0;border:1px solid transparent;border-radius:var(--r);background:transparent;padding:var(--sp-2);box-sizing:border-box;letter-spacing:normal;tab-size:8}
.pk-sample-mirror{position:absolute;inset:0;pointer-events:none;color:var(--ink);overflow:hidden}
#pkSample{position:relative;resize:none;overflow:hidden;color:transparent;caret-color:var(--ink)}
#pkSample::selection{color:var(--ink);background:Highlight}
#pkSample::placeholder{color:var(--faint)}
#pkSample:hover{border-color:var(--line)}
#pkSample:focus{border-color:var(--ink);outline:none}
.pk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:var(--fs-s);color:var(--muted)}
#pkSample:not([hidden])+.pk-meta{border-top:1px solid var(--rule);padding-top:10px}
.pk .settings-pop{max-width:calc(100vw - 64px)}
.pk-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--sp-3);padding-top:var(--sp-4)}
#lfMsg{margin-top:8px}
.pk-file{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pk-file+.pk-file,.pk-file+.field{margin-top:12px}
.file-btn{position:relative;cursor:pointer}
.file-btn:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pk .hint{margin:0}
.pk-selected{display:grid;gap:var(--sp-4)}
.pk-selected h5{margin:0;font-size:var(--fs-xl);font-weight:600;overflow-wrap:anywhere}
.pk-apply{display:grid;gap:var(--sp-3)}
.pk-apply>.field{max-width:180px}
.pk-sources>[data-pane]{gap:var(--sp-3)}
.pk-browse{margin-bottom:0}
.pk input[type=checkbox],.pk input[type=radio]{accent-color:var(--ink)}
.pk .pk-auto-fit{flex-basis:100%;margin:0 auto 0 0}

/* If a local font is missing, show a yellow notice instead of a fallback-font specimen. */
.vf-tag{display:inline-flex;align-items:center;flex:none;font:600 var(--fs-xs)/1 var(--mono);letter-spacing:.06em;padding:3px 5px 2px;border-radius:var(--r);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);white-space:nowrap}
.cov-result.ok{color:var(--ok)}
.cov-result.part{color:var(--caution)}
.cov-result.none{color:var(--muted)}
#pkCov:empty{display:none}
.pk-cov{display:flex;flex-wrap:wrap;gap:5px}
.pk-cov:empty{display:none}
.cov{font-size:var(--fs-xs);line-height:1;padding:3px 7px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.cov.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.cov.part{color:var(--caution);background:var(--caution-bg);border-color:transparent}
.cov.none{color:var(--faint);text-decoration:line-through}
.pk-check{display:flex;gap:8px;align-items:center;font-size:var(--fs-m);margin-top:10px}
/* Each variation-axis row contains name, slider, value and reset. */
.ax-row{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) 70px auto;gap:10px;align-items:center;font-size:var(--fs-m)}
.ax-row .ax-name{display:flex;flex-direction:column;line-height:1.25}
.ax-row .ax-name small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.ax-row input[type=number]{width:70px;font-family:var(--mono);font-size:var(--fs-s);padding:4px 6px}
.ax-row .ax-mode{grid-column:2/-1}
.ax-row.mode{grid-template-columns:minmax(96px,auto) minmax(0,1fr)}
.ax-row.mode.fix{grid-template-columns:minmax(96px,auto) auto minmax(0,1fr) 70px}
.ax-row.mode.fix .ax-mode{grid-column:auto}
.ct-ax{grid-column:3/4;display:flex;flex-wrap:wrap;gap:2px 12px;font-size:var(--fs-xs);color:var(--muted);margin:-4px 0 4px}      /* Show customized axes below the font column. */
.ct-ax b{font-family:var(--mono);font-weight:500;color:var(--accent)}
.ax-row .btn-text:disabled{visibility:hidden}
/* Axis and metadata groups share row spacing independently of their headings. */
.ax-body{display:grid;gap:12px;padding-top:10px}
.pk-scope{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;font-size:var(--fs-m);margin-right:auto}
.pk-scope>span{color:var(--muted);font-size:var(--fs-s)}
.pk-scope label{display:inline-flex;gap:6px;align-items:center}

.toast{--toast-bottom:calc(20px + env(safe-area-inset-bottom,0px));position:fixed;left:50%;bottom:var(--toast-bottom);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 2 * var(--sp-4));background:var(--ink);color:var(--sheet);padding:9px 16px;border-radius:var(--r-pill);font-size:var(--fs-m);opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1;animation:toast-in .28s cubic-bezier(.2,.8,.2,1)}
/* Slide notices in from the viewport bottom; long messages and mobile tabs use the same displacement. */
@keyframes toast-in{from{opacity:0;transform:translate(-50%,calc(100% + var(--toast-bottom)))}to{opacity:1;transform:translate(-50%,0)}}
/* Wrap long results on narrow screens and leave room for bottom tabs; avoid pill corners crowding the text. */
@media (max-width:1000px){.toast{--toast-bottom:calc(48px + var(--sp-3) + env(safe-area-inset-bottom,0px));border-radius:var(--r)}}
@media (prefers-reduced-motion:reduce){.toast{transition:none}.toast.on{animation:none}}

.pk-auto-fit{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-s);margin-top:var(--sp-3)}

.pk-feedback{display:grid;justify-items:start;gap:var(--sp-2)}

.pk-browse>.results-toolbar{margin-top:var(--sp-4)}

.font-option-source>.ic{flex:none;width:var(--fs-l);height:var(--fs-l)}
.font-option-weights{min-width:0;overflow:hidden;text-overflow:ellipsis}
.proof-text:focus-visible{outline:1px solid var(--line);outline-offset:var(--sp-2);border-radius:var(--r)}