/* Shared website design system. Edit tokens here; avoid page-specific overrides. */
:root {
  --green:#2D6A4F; --green-hover:#24563F; --green-active:#1E4936; --accent:#3BC878;
  --ink:#222523; --text-secondary:#4A4F4C; --text-muted:#626B65;
  --surface:#FFFFFF; --surface-subtle:#F6F9F7; --surface-active:#E6F4EC;
  --status-error:#D95050; --status-error-bg:#FDEEEE;
  --border:#D7DAD6; --divider:#E8ECE9; --line:var(--divider);
  --font-page:2rem; --font-section:1.25rem; --font-card:1rem;
  --font-body:.875rem; --font-small:.75rem;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px;
  --radius:8px; --radius-pill:999px; --border-width:1px;
  --control-height:44px; --nav-width:224px; --content-max:1040px;
  --page-gutter:clamp(24px,6vw,96px); --mobile-header-height:64px;
  --anchor-offset:32px;
  font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;
  color:var(--ink); font-synthesis:none;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--anchor-offset); }
body { margin:0; background:var(--surface); font-size:var(--font-body); line-height:1.6; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
a { color:inherit; text-decoration:none; }
button:disabled { cursor:default; }
[hidden] { display:none!important; }
:where(button,a,input,textarea,[tabindex]):focus-visible { outline:2px solid var(--green); outline-offset:4px; }
p { margin:0; font-size:var(--font-body); line-height:1.75; color:var(--text-secondary); }
h1 { margin:var(--space-3) 0 var(--space-4); font-size:var(--font-page); line-height:1.25; font-weight:700; }
h2 { font-size:var(--font-section); line-height:1.4; font-weight:700; }
h3 { margin:0 0 var(--space-2); font-size:var(--font-card); line-height:1.5; font-weight:600; }
.skip { position:fixed; top:-80px; left:16px; z-index:100; background:var(--green); color:white; padding:12px 16px; }
.skip:focus { top:8px; }
/* Navigation and continuous reading-column geometry. */
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--nav-width); height:100dvh; overflow:auto; z-index:30; background:var(--surface); border-right:var(--border-width) solid var(--divider); padding-bottom:var(--space-8); scrollbar-width:thin; }
.brand { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-6) var(--space-4); }
.brand-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:var(--radius); background:var(--green); color:var(--accent); flex-shrink:0; }
.brand strong { display:block; font-size:var(--font-body); line-height:1.5; }
.brand small { display:block; font-size:var(--font-small); color:var(--text-muted); }
.nav-group { margin:0 0 var(--space-2); }
.nav-heading { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:var(--control-height); padding:8px 16px; border:0; background:transparent; text-align:left; font-weight:700; }
.nav-heading svg { width:12px; height:12px; stroke:var(--text-muted); transition:transform .15s; }
.nav-heading[aria-expanded=false] svg { transform:rotate(-90deg); }
.nav-group.current .nav-heading { color:var(--green); }
.nav-links a { display:flex; align-items:center; min-height:var(--control-height); padding:8px 16px 8px 32px; border-right:2px solid transparent; color:var(--text-secondary); }
.nav-links a:hover { background:var(--surface-subtle); color:var(--green); }
.nav-links a[aria-current=page] { background:var(--surface-active); border-right-color:var(--green); color:var(--green); font-weight:600; }
main { margin-left:var(--nav-width); padding:var(--space-12) var(--page-gutter); outline:none; }
article { width:100%; max-width:var(--content-max); margin:0 auto; }
.page-header { padding-bottom:var(--space-8); border-bottom:1px solid var(--divider); margin-bottom:var(--space-8); }
.eyebrow { display:inline-flex; align-items:center; gap:var(--space-2); padding:4px 12px; border-radius:var(--radius-pill); background:var(--surface-active); color:var(--green); font-size:var(--font-small); font-weight:600; }
.eyebrow i { width:6px; height:6px; background:var(--accent); border-radius:50%; }
.section { margin-bottom:var(--space-12); }
.section:last-child { margin-bottom:0; }
.section h2 { display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-2); }
.section h2:before { content:""; width:6px; height:20px; border-radius:var(--radius-pill); background:var(--green); flex-shrink:0; }
.inline-tip { color:var(--green); margin-left:var(--space-1); }
.toc { position:fixed; top:40vh; right:var(--space-4); width:72px; border-left:1px solid var(--border); padding-left:var(--space-2); z-index:10; }
.toc a { display:flex; align-items:center; position:relative; min-height:var(--control-height); font-size:var(--font-small); color:var(--text-muted); white-space:nowrap; }
.toc a.active { color:var(--green); font-weight:600; }
.toc a.active:before { content:""; position:absolute; left:-9px; width:2px; height:20px; background:var(--green); }
/* Shared controls, cards and grid spacing. */
.tabs { display:flex; gap:var(--space-2); margin:var(--space-6) 0 var(--space-3); }
.tabs button,.font-preview-controls button { min-height:var(--control-height); min-width:80px; padding:8px 24px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); color:var(--text-secondary); }
.tabs button:hover,.font-preview-controls button:hover { border-color:var(--green); color:var(--green); }
.tabs button[aria-selected=true],.font-preview-controls button[aria-pressed=true] { background:var(--green); color:white; border-color:var(--green); }
.icon-card,.icon-rule,.icon-dimension-card { min-width:0; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.icon-rule { padding:var(--space-4); }
.icon-library,.icon-rule-grid,.icon-dimension-grid,.neutral-grid,.semantic-grid { display:grid; gap:var(--space-3); margin-top:var(--space-6); }
.icon-rule-grid,.icon-dimension-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.design-rule-grid h3 { color:var(--green); }
/* Color-card variant. Text colors are selected against the sampled fill in JS. */
.brand-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(144px,auto)); gap:var(--space-2); }
.swatch { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-1); min-width:0; min-height:var(--control-height); text-align:left; border:0; border-radius:var(--radius); padding:var(--space-4); background:var(--swatch); color:var(--on-swatch); transition:box-shadow .15s; }
.swatch strong { font-size:var(--font-card); line-height:1.5; font-weight:600; }
.swatch .hex,.swatch .usage,.swatch .ratio { font-size:var(--font-small); line-height:1.6; }
.swatch .hex { font-variant-numeric:tabular-nums; }
.swatch .ratio { align-self:flex-end; margin-top:auto; padding-top:var(--space-2); }
.swatch:hover { box-shadow:0 0 0 2px var(--green); z-index:1; }
.swatch .copy-icon { position:absolute; top:var(--space-4); right:var(--space-4); opacity:0; transition:opacity .15s; display:flex; align-items:center; gap:var(--space-1); font-size:0; pointer-events:none; }
.copy-icon svg { width:16px; height:16px; }
.swatch:hover .copy-icon,.swatch:focus-visible .copy-icon { opacity:1; }
.brand-grid .swatch:first-child { grid-row:span 3; }
.brand-grid .swatch strong,.semantic-pair .swatch strong { padding-right:var(--space-6); }
.neutral-grid { grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--space-2); }
.neutral-grid .swatch { min-height:224px; padding:var(--space-3); }
.neutral-grid .usage { margin-top:auto; padding-top:var(--space-4); }
.neutral-grid .copy-icon { top:80px; left:var(--space-3); right:auto; }
.neutral-grid .swatch:last-child { box-shadow:inset 0 0 0 1px var(--border); }
.neutral-grid .swatch:last-child:hover { box-shadow:inset 0 0 0 1px var(--border),0 0 0 2px var(--green); }
.semantic-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.semantic-pair { border-radius:var(--radius); }
.semantic-pair .swatch { width:100%; min-height:160px; border-radius:var(--radius) var(--radius) 0 0; }
.semantic-pair .usage { margin-top:auto; padding-top:var(--space-3); }
.semantic-pair .swatch:last-child { min-height:96px; justify-content:center; border-radius:0 0 var(--radius) var(--radius); }
.semantic-pair .copy-icon { top:64px; }
.ratio-panel { display:flex; align-items:center; gap:var(--space-12); padding:var(--space-6); background:var(--surface-subtle); border-radius:var(--radius); margin-top:var(--space-6); }
.donut { width:176px; height:176px; padding:16px; flex-shrink:0; border-radius:50%; background:conic-gradient(var(--green) 0 5%,var(--border) 5% 100%); }
.donut>div { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; background:var(--surface-subtle); border-radius:50%; }
.donut strong { font-size:var(--font-page); line-height:1.25; }
.donut span { font-size:var(--font-small); color:var(--text-muted); margin-top:var(--space-1); }
.ratio-details { flex:1; min-width:0; }
.legend { display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:var(--space-3); align-items:center; margin-bottom:var(--space-4); font-size:var(--font-body); }
.legend i { width:8px; height:8px; border-radius:50%; background:var(--border); }
.legend.accent i { background:var(--green); }
.legend b { font-size:var(--font-card); }
.ratio-details p { font-size:var(--font-small); color:var(--text-muted); margin-top:var(--space-6); }
/* Icon and illustration card variants. */
.icon-library { grid-template-columns:repeat(6,minmax(0,1fr)); }
.icon-card { overflow:hidden; }
.icon-card:hover,.icon-card:focus-within { border-color:var(--green); }
.icon-preview { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2); width:100%; min-height:160px; padding:var(--space-4) var(--space-2); text-align:center; }
.icon-artwork { display:block; width:48px; height:48px; margin-bottom:var(--space-2); flex-shrink:0; }
.icon-artwork>svg { display:block; width:100%; height:100%; }
.icon-preview strong { font-size:var(--font-body); line-height:1.5; font-weight:500; }
.icon-english,.icon-footnote { font-size:var(--font-small); color:var(--text-muted); }
.icon-english { line-height:1.6; min-height:3.2em; display:flex; align-items:flex-start; justify-content:center; overflow-wrap:anywhere; }
.icon-footnote { margin-top:var(--space-3); }
.icon-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--divider); }
.icon-copy,.icon-download { display:flex; align-items:center; justify-content:center; gap:var(--space-1); width:100%; min-height:var(--control-height); padding:var(--space-2) var(--space-1); border:0; color:var(--green); background:var(--surface-subtle); font-size:var(--font-small); }
.icon-actions button+button { border-left:1px solid var(--divider); }
.icon-actions svg { flex-shrink:0; }
.icon-copy:hover,.icon-download:hover { background:var(--surface-active); }
.icon-library-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-6); }
.icon-search-field { display:flex; align-items:center; gap:var(--space-2); width:360px; max-width:100%; padding:0 var(--space-3); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-muted); background:var(--surface); }
.icon-search-field svg { flex-shrink:0; }
.icon-search-field:focus-within { border-color:var(--green); outline:2px solid var(--green); outline-offset:2px; }
.icon-search-field input { width:100%; min-width:0; min-height:var(--control-height); padding:var(--space-2) 0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; }
.icon-search-field input::placeholder { color:var(--text-muted); }
#icon-search-status { font-size:var(--font-small); color:var(--text-muted); }
.icon-style-controls { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); max-width:100%; color:var(--text-secondary); font-size:var(--font-small); }
.icon-color-control,.icon-width-control { display:flex; align-items:center; gap:var(--space-2); min-height:var(--control-height); }
.icon-color-control input { width:44px; height:44px; padding:var(--space-2); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); cursor:pointer; }
.icon-color-control input::-webkit-color-swatch-wrapper { padding:0; }
.icon-color-control input::-webkit-color-swatch { border:0; border-radius:4px; }
.icon-width-control input { width:96px; height:44px; margin:0; accent-color:var(--green); cursor:pointer; }
.icon-width-control output { min-width:40px; font-variant-numeric:tabular-nums; }
#icon-style-reset { min-height:var(--control-height); padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--green); font-size:var(--font-small); }
#icon-style-reset:hover { background:var(--surface-active); border-color:var(--green); }
#icon-search-empty { padding:var(--space-8) var(--space-4); margin-top:var(--space-6); border-radius:var(--radius); background:var(--surface-subtle); text-align:center; }
.icon-card button:focus-visible { outline-offset:-4px; }
.icon-dimension-card { margin:0; overflow:hidden; }
.icon-dimension-card img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.icon-dimension-card figcaption { padding:0 var(--space-4) var(--space-4); }
/* Shared feedback and secondary surfaces. */
.mobile-header,.icon-button.close { display:none; }
.icon-button { display:grid; place-items:center; width:var(--control-height); height:var(--control-height); padding:0; background:transparent; border:0; font-size:24px; }
.toast { position:fixed; bottom:var(--space-6); left:calc(50% + 112px); transform:translate(-50%,12px); max-width:calc(100vw - 32px); padding:12px 24px; background:var(--ink); color:white; border-radius:var(--radius); font-size:var(--font-body); z-index:70; opacity:0; pointer-events:none; transition:opacity .15s,transform .15s; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.pending-content { padding:var(--space-12) 0; text-align:center; }
.pending-symbol { display:inline-grid; place-items:center; width:64px; height:64px; border-radius:var(--radius); background:var(--surface-active); color:var(--green); font-size:32px; }
.return-link { display:inline-flex; align-items:center; justify-content:center; min-height:var(--control-height); margin-top:var(--space-6); padding:8px 24px; border:0; border-radius:var(--radius); background:var(--green); color:white; }
dialog { width:464px; max-width:calc(100vw - 32px); padding:var(--space-6); border:1px solid var(--border); border-radius:var(--radius); }
dialog::backdrop { background:#14281e66; }
dialog h2 { margin:0 0 var(--space-2); }
dialog textarea { display:block; width:100%; margin-top:var(--space-4); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius); font:var(--font-small)/1.6 Consolas,monospace; resize:vertical; }
body.menu-open { overflow:hidden; }
/* Layout adaptations only; text hierarchy remains stable. */
@media(max-width:1400px) {
  :root { --anchor-offset:80px; }
  .toc { position:sticky; top:0; right:auto; width:auto; display:flex; gap:var(--space-6); border-left:0; border-bottom:1px solid var(--divider); padding:var(--space-2) 0; margin:0 0 var(--space-8); background:#fffffffa; backdrop-filter:blur(8px); overflow-x:auto; scrollbar-width:thin; }
  .toc a { flex-shrink:0; }
  .toc a.active:before { left:0; bottom:-8px; width:100%; height:2px; }
  .neutral-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:1100px) {
  .icon-library { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .design-rule-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .semantic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-grid { grid-template-rows:repeat(3,minmax(160px,auto)); }
  .ratio-panel { gap:var(--space-6); }
  .desktop-break { display:none; }
}
@media(max-width:760px) {
  :root { --page-gutter:16px; --anchor-offset:144px; }
  .mobile-header { position:sticky; top:0; z-index:25; height:var(--mobile-header-height); display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-4); border-bottom:1px solid var(--divider); background:#fffffffa; font-weight:600; }
  .version { margin-left:auto; font-size:var(--font-small); color:var(--text-muted); font-weight:400; }
  .sidebar { width:280px; max-width:calc(100vw - 32px); transform:translateX(-100%); transition:transform .2s; z-index:50; }
  .sidebar.open { transform:translateX(0); }
  .sidebar .brand { padding-right:48px; }
  .icon-button.close { display:grid; position:absolute; top:16px; right:4px; }
  .backdrop { position:fixed; inset:0; background:#14281e66; z-index:40; }
  main { margin-left:0; padding:var(--space-8) var(--page-gutter); }
  .toc { top:var(--mobile-header-height); gap:var(--space-4); justify-content:space-between; }
  .tabs button { flex:1; min-width:0; padding:8px 12px; }
  .brand-grid { grid-template-rows:192px minmax(160px,auto) minmax(160px,auto); }
  .brand-grid .swatch:first-child { grid-row:auto; grid-column:span 2; }
  .brand-grid .swatch:nth-child(2) { grid-row:2 / 4; }
  .swatch { padding:var(--space-3); }

  .swatch .copy-icon { opacity:1; top:12px; right:12px; }
  .neutral-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .neutral-grid .swatch { min-height:160px; }
  .neutral-grid .copy-icon { top:72px; left:12px; }
  .semantic-pair .swatch { min-height:176px; }
  .semantic-pair .swatch:last-child { min-height:112px; }
  .semantic-pair .copy-icon { top:72px; }
  .icon-library { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .icon-dimension-grid,.design-rule-grid { grid-template-columns:1fr; }
  .icon-dimension-card img { max-height:360px; }
  .ratio-panel { flex-direction:column; align-items:center; }
  .ratio-details { width:100%; }
  .toast { left:50%; bottom:var(--space-4); }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before { transition:none!important; }
}


/* Locally bundled brand fonts. The document UI retains its existing font stack. */
@font-face{font-family:'Brand Poppins';src:url('assets/fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Brand Poppins';src:url('assets/fonts/Poppins-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Brand Poppins';src:url('assets/fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Brand DM Serif Display';src:url('assets/fonts/DMSerifDisplay-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.font-schemes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-6)}
.font-scheme{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-subtle)}
.font-scheme h3{color:var(--green)}
.font-table-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);margin:var(--space-6) 0 var(--space-3)}
.font-note{font-size:var(--font-small);color:var(--text-muted)}
.font-preview-controls{display:flex;gap:var(--space-2)}
.font-table-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.font-table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}
.font-table th,.font-table td{padding:var(--space-8) var(--space-6);vertical-align:top;border-bottom:1px solid var(--divider)}
.font-table thead th{font-size:var(--font-card);font-weight:600;color:var(--green);background:var(--surface-active);padding:var(--space-4) var(--space-6)}
.font-table thead th:first-child{width:20%;font-size:var(--font-card)}
.font-table tbody th{font-size:var(--font-card);font-weight:400;background:var(--surface-subtle);vertical-align:middle}
.font-table tbody th>strong{font-weight:600}
.font-table tbody th>span{display:block;font-size:var(--font-body);font-weight:400;color:var(--text-muted);margin-top:var(--space-2)}
.font-table td+td{border-left:0}
.font-table tbody tr:last-child>*{border-bottom:0}
.font-spec{display:flex;flex-direction:column;gap:var(--space-2);line-height:1.75;font-size:var(--font-body);color:var(--text-muted)}
.font-spec strong{color:var(--text-secondary);font-weight:400}
.brand-type-sample{font-size:var(--brand-desktop);font-weight:var(--brand-weight);line-height:var(--brand-line);letter-spacing:0;color:var(--ink);margin:0 0 var(--space-6);overflow-wrap:anywhere;font-synthesis:none}
.sample-poppins{font-family:'Brand Poppins',sans-serif}
.sample-serif{font-family:'Brand DM Serif Display',serif}
[data-font-view=mobile] .brand-type-sample{font-size:var(--brand-mobile)}
.font-note{margin-top:var(--space-4)}
.font-cell-label{display:none}
@media(max-width:1100px){
 .font-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .font-table,.font-table tbody{display:block;width:100%}
 .font-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--border)}
 .font-table tbody tr:last-child{border-bottom:0}
 .font-table tbody th{grid-column:1/-1;display:block;background:var(--surface-subtle);padding:var(--space-4);border-bottom:1px solid var(--divider)}
 .font-table tbody th>span{margin-top:var(--space-1)}
 .font-table td{display:block;min-width:0;border-bottom:0}
 .font-cell-label{display:block;width:fit-content;font-size:var(--font-card);font-weight:600;color:var(--green);background:var(--surface-active);border-radius:var(--radius);padding:var(--space-1) var(--space-2);margin-bottom:var(--space-6)}
}
@media(max-width:760px){
 .font-schemes{grid-template-columns:1fr}
 .font-table tr{grid-template-columns:1fr}
 .font-table td+td{border-left:0;border-top:1px solid var(--divider)}
}
/* Number specimens share the text-specification component and UI tokens. */
@font-face{font-family:'Brand Inter';src:url('assets/fonts/Inter-Variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
.sample-inter{font-family:'Brand Inter',sans-serif;font-variant-numeric:lining-nums tabular-nums}
@media(max-width:1100px){.number-font-table tr{grid-template-columns:1fr}}
/* Download-card variant, sharing existing site tokens. Font size is a specimen. */
.font-download-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-6)}
.font-download-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.font-download-card:focus-within{border-color:var(--green)}
.font-download-sample{display:flex;align-items:center;justify-content:center;min-height:192px;margin:var(--space-4);border-radius:var(--radius);background:var(--surface-subtle);font-size:80px;line-height:1.2;font-weight:400;letter-spacing:0;color:var(--ink);font-synthesis:none}
.font-download-info{display:flex;flex:1;flex-direction:column;gap:var(--space-2);padding:0 var(--space-4) var(--space-4)}
.font-download-info>strong{font-size:var(--font-card);font-weight:600;line-height:1.5}
.font-download-info>span{font-size:var(--font-small);color:var(--text-muted)}
.font-download-action{align-self:flex-start;margin-top:auto}
@media(max-width:1100px){.font-download-sample{font-size:64px;min-height:160px}}
@media(max-width:760px){.font-download-grid{grid-template-columns:1fr}.font-download-sample{font-size:80px;min-height:192px}}

/* Reusable primary action, visually related to tabs but not a selection control. */
.button-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height);padding:8px 24px;border:1px solid var(--green);border-radius:var(--radius-pill);background:var(--green);color:var(--surface);font-size:var(--font-body);font-weight:600;line-height:1.5;text-align:center;text-decoration:none;cursor:pointer}
.button-primary:hover{background:var(--green-hover);border-color:var(--green-hover)}
.button-primary:active{background:var(--green-active);border-color:var(--green-active)}
.button-primary:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.button-primary:disabled{background:var(--surface-active);border-color:var(--border);color:var(--text-muted);cursor:not-allowed}
.font-download-info .button-primary{margin-top:var(--space-4)}
/* Shared visual-expression comparison table and multi-image viewer. */
.expression-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4);margin:var(--space-6) 0 var(--space-3);color:var(--text-muted);font-size:var(--font-small)}
.expression-toolbar>div{display:flex;gap:var(--space-2)}
.table-step{display:inline-grid;place-items:center;min-width:var(--control-height);min-height:var(--control-height);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--green);font-size:var(--font-card)}
.table-step:hover:not(:disabled){background:var(--surface-active);border-color:var(--green)}
.table-step:disabled{color:var(--text-muted);background:var(--surface-subtle);cursor:not-allowed}
.expression-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);overscroll-behavior-x:contain;scrollbar-color:var(--border) var(--surface-subtle)}
.expression-table{width:100%;min-width:1000px;border-collapse:separate;border-spacing:0;table-layout:fixed;text-align:left}
.expression-table th,.expression-table td{padding:var(--space-6);vertical-align:top;border-bottom:1px solid var(--divider);line-height:1.75}
.expression-table th:first-child{width:136px;position:sticky;left:0;background:var(--surface-subtle);z-index:1;font-size:var(--font-card)}
.expression-table thead th{background:var(--surface-active);color:var(--green);font-size:var(--font-card);font-weight:600;padding:var(--space-4) var(--space-6)}
.expression-table tbody th{font-weight:600;vertical-align:middle}
.expression-table thead th:first-child{text-align:left;vertical-align:middle;background:var(--surface-active)}
.expression-table td{color:var(--text-secondary)}
.expression-table tr>*:last-child{border-right:0}
.expression-table tbody tr:last-child>*{border-bottom:0}
.expression-code{display:block;font-size:var(--font-body);color:var(--green);margin-bottom:var(--space-1)}
.expression-table ul{margin:0;padding-left:var(--space-4)}
.expression-table li+li{margin-top:var(--space-2)}
.example-slot{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:160px;padding:var(--space-4);background:var(--surface-subtle);border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-muted)}
.example-slot:hover{border-color:var(--green);background:var(--surface-active)}
.example-slot strong{font-size:var(--font-body);font-weight:400;color:var(--text-secondary)}
.example-slot>span:last-child{font-size:var(--font-body)}
.example-placeholder{font-size:var(--font-section);color:var(--green)}
.example-slot img{width:100%;height:160px;object-fit:contain}
.example-gallery{width:960px;max-height:calc(100dvh - 32px);overflow:auto}
.gallery-header,.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.gallery-header h3{margin:0}
.gallery-stage{margin:var(--space-4) 0;min-height:240px;height:min(55dvh,560px);display:flex;align-items:center;justify-content:center;background:var(--surface-subtle);border-radius:var(--radius);padding:var(--space-4)}
.gallery-stage>img{max-width:100%;max-height:100%;object-fit:contain}
.gallery-empty{text-align:center;max-width:400px}
.gallery-empty>span{display:block;margin-bottom:var(--space-4);font-size:var(--font-page);color:var(--green)}
.gallery-controls{justify-content:center;color:var(--text-muted)}
.gallery-thumbnails{display:flex;gap:var(--space-2);overflow:auto;margin-top:var(--space-4)}
.gallery-thumbnails:empty{display:none}
.gallery-thumb{flex:0 0 64px;height:64px;background:var(--surface-subtle);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-1)}
.gallery-thumb[aria-pressed=true]{border:2px solid var(--green)}
.gallery-thumb img{width:100%;height:100%;object-fit:contain}
body.gallery-open{overflow:hidden}
@media(max-width:760px){.expression-table th:first-child{width:112px}.expression-table{min-width:976px}.example-gallery{padding:var(--space-4)}}

/* Example status uses both icon shape and text, not color alone. */
.example-slot--correct,.example-slot--correct:hover{background:color-mix(in srgb,var(--surface-active) 35%,var(--surface))}
.example-slot--incorrect{background:color-mix(in srgb,var(--status-error-bg) 35%,var(--surface))}
.example-status-icon{position:absolute;top:var(--space-2);left:var(--space-2);z-index:2;display:block;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--surface);color:var(--green);pointer-events:none}
.example-status-icon svg{display:block;width:100%;height:100%}
.example-slot--incorrect .example-status-icon{color:var(--status-error)}
.example-slot--incorrect:hover{background:color-mix(in srgb,var(--status-error-bg) 35%,var(--surface));border-color:var(--status-error)}

/* Keep the image center clear; retain a light semantic overlay on thumbnails. */
.example-slot::after{content:"";position:absolute;inset:0;z-index:1;background:var(--green);opacity:.015;pointer-events:none}
.example-slot--incorrect::after{background:var(--status-error)}
.example-slot>strong,.example-slot>span:last-child{position:relative;z-index:2}

.gallery-actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}
@media(max-width:760px){.gallery-header{flex-wrap:wrap}.gallery-actions{margin-left:auto}}
/* Viewport-following table headers; original tables retain their semantics. */
.floating-table-header{position:fixed;z-index:19;overflow:hidden;pointer-events:none;background:var(--surface-active);border-bottom:1px solid var(--border)}
.floating-header-track{display:flex;align-items:stretch}
.floating-header-cell{flex-shrink:0;padding:var(--space-4) var(--space-6);background:var(--surface-active);color:var(--green);font-size:var(--font-card);font-weight:600;line-height:1.75;display:flex;flex-direction:column;justify-content:center}
.floating-header-first{position:relative;z-index:1;background:var(--surface-active)}
.floating-header-summary{width:100%;font-size:var(--font-body);padding:var(--space-3) var(--space-4)}
@media print{.floating-table-header{display:none!important}}

.font-size-pair{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);color:var(--text-secondary)}
.font-size-pair>span{white-space:nowrap}
.font-table tbody th>span{line-height:1.75}
.expression-code{font-weight:400}
.expression-table td{overflow-wrap:break-word}
/* A–H controls float inside the table edges. */
.expression-table-wrap{margin-top:var(--space-6)}
.table-side-controls{display:contents}
.table-side-controls .table-step{position:fixed;z-index:20;width:var(--control-height);height:var(--control-height);padding:0;background:var(--surface);box-shadow:0 2px 8px #2225231a}
.table-side-controls .table-step:disabled{background:var(--surface-subtle);box-shadow:none}
@media print{.table-side-controls{display:none!important}}

.table-step>svg{display:block;width:20px;height:20px;pointer-events:none}
.table-side-controls .table-step:hover:not(:disabled){background:var(--surface-active)}
/* Company cases reuse expression-table presentation and controls. */
.company-table{min-width:1016px}
.company-table th:first-child{width:224px}
.company-meta{display:block;margin-top:var(--space-2);font-size:var(--font-body);font-weight:400;color:var(--text-muted);overflow-wrap:anywhere}
.company-metrics{display:flex;flex-direction:column;gap:var(--space-3)}
.company-metric-label{display:flex;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-1)}
.company-metrics b{font-weight:600;white-space:nowrap}
.company-gain{display:inline-flex;align-items:center;gap:var(--space-1);align-self:flex-start;color:var(--green);background:var(--surface-active);padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);white-space:nowrap}
.company-bar-track{height:8px;background:var(--surface-subtle);border-radius:var(--radius-pill);overflow:hidden}
.company-bar{display:block;height:100%;background:var(--text-muted);border-radius:inherit}
.company-bar-after{background:var(--green)}
.company-no-data{color:var(--text-muted)}
.company-image-button{display:flex;flex-direction:column;gap:var(--space-1);width:100%;min-height:140px;padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-subtle);color:var(--text-secondary);font-size:var(--font-body)}
.company-image-button:hover{border-color:var(--green);background:var(--surface-active)}
.company-image-button img{display:block;width:100%;height:96px;min-height:96px;flex:0 0 96px;object-fit:cover;object-position:top}
.company-image-button>span{flex-shrink:0;line-height:1.6}
.company-image-button[data-company-kind=full] img{object-fit:cover;object-position:top}
.company-table td>p{margin-top:var(--space-3)}
.gallery-long-image .gallery-stage{display:block;overflow:auto;padding:var(--space-4)}
.gallery-long-image .gallery-stage>img{display:block;width:100%;height:auto;max-height:none;max-width:none}

.company-gallery-tabs{margin-top:var(--space-4);flex-wrap:wrap}
#company-gallery-reference{margin-top:var(--space-4);padding:var(--space-4);background:var(--surface-subtle);border-radius:var(--radius)}
@media(max-width:760px){.company-table col:first-child{width:136px!important}.company-table th:first-child{width:136px}}

.company-sku{display:flex;align-items:center;gap:var(--space-1)}
.company-sku>span{min-width:0;overflow-wrap:anywhere}
.sku-copy{display:inline-grid;place-items:center;flex:0 0 20px;width:20px;height:24px;border:0;border-radius:var(--radius);padding:0;background:transparent;color:var(--green)}
.sku-copy:hover{background:var(--surface-active)}
.sku-copy svg{width:14px;height:14px;pointer-events:none}
/* Single-image external references are static, without gallery interactions. */
.external-table{min-width:1040px}
.external-table th:first-child{width:176px}
.external-visual{display:block;width:100%;height:auto;border-radius:var(--radius);cursor:default}
.external-brand-name{display:block}
.copy-topic{margin-top:var(--space-12)}
.copy-principles{margin-top:var(--space-6)}
.copy-principles h3{color:var(--green)}
.copy-principles ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);list-style:none;margin:var(--space-4) 0 0;padding:0}
.copy-principle-cards li{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.copy-principle-icon{display:inline-flex;color:var(--green);margin-bottom:var(--space-3)}
.copy-principle-cards h4{font-size:var(--font-card);font-weight:600;line-height:1.5;margin:0 0 var(--space-2)}
.copy-principle-cards p{color:var(--text-secondary)}
@media(max-width:1100px){.copy-principles ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.copy-principles ul{grid-template-columns:minmax(0,1fr)}}
.copy-length-wrap{margin-top:var(--space-6);border-top:1px solid var(--divider);overflow-x:auto}
.copy-length-table{width:100%;min-width:680px;border-collapse:separate;border-spacing:0 var(--space-3);text-align:left;table-layout:fixed}
.copy-length-table th,.copy-length-table td{padding:var(--space-4);vertical-align:middle;line-height:1.75;font-size:var(--font-body)}
.copy-length-table th{font-weight:600;color:var(--ink)}
.copy-length-table td{color:var(--text-secondary)}
.copy-length-table td.copy-word-limit{color:var(--green)}
.copy-length-table tr:nth-child(even)>*{background:var(--surface-subtle)}
.copy-length-table tr:nth-child(even)>:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.copy-length-table tr:nth-child(even)>:last-child{border-radius:0 var(--radius) var(--radius) 0}
#copy-layout>.copy-topic:first-of-type,#copy-case>.copy-topic:first-of-type{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--divider)}
.copy-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);width:66.6667%;margin-top:var(--space-4)}
.copy-example{margin:0;min-width:0;background:var(--surface-subtle);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.copy-example-preview{padding:var(--space-6) var(--space-4);text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--space-3)}
.copy-example-preview>strong{font-size:var(--font-card);font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.copy-example figcaption{padding:var(--space-3) var(--space-4);border-top:2px solid var(--green)}
.copy-example figcaption>strong{display:block;font-weight:600;color:var(--green);margin-bottom:var(--space-1)}
.copy-example.is-incorrect figcaption{border-color:var(--status-error)}
.copy-example.is-incorrect figcaption>strong{color:var(--status-error)}
.copy-after-note{margin-top:var(--space-3)}
.copy-color-panel{width:60%;padding:var(--space-8);margin-top:var(--space-6);background:var(--surface-subtle);border-radius:var(--radius)}
.copy-color-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
.copy-color-table{width:100%;min-width:420px;border-collapse:collapse;text-align:left;background:#FFFFFF}
.copy-color-table th,.copy-color-table td{padding:var(--space-3) var(--space-4);font-size:var(--font-body);white-space:nowrap}
.copy-color-table tbody th{font-weight:400;color:var(--text-secondary)}
.copy-color-table tr>:first-child{border-right:1px solid var(--border)}
.copy-color-table tr>:last-child{background:#000000;color:#FFFFFF}
.copy-color-note{margin-top:var(--space-4);color:var(--text-muted)}
@media(max-width:1100px){.copy-comparison,.copy-color-panel{width:100%}}
@media(max-width:760px){.copy-comparison{gap:var(--space-4)}.copy-example-preview{padding:var(--space-4)}.copy-color-panel{padding:var(--space-4)}}
@media(max-width:480px){.copy-comparison{grid-template-columns:1fr}}
.external-website{font-size:var(--font-body);font-weight:400;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-height);color:var(--green);white-space:nowrap}
.external-website:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.external-table col:first-child{width:136px!important}.external-table th:first-child{width:136px}}

.company-gain svg{width:14px;height:14px;flex:0 0 14px}

/* Imagery guidance: source-layout grids with shared site tokens. */
.imagery-principles-lead{color:var(--text-secondary)}
.imagery-principles-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-8);margin:var(--space-6) 0 0;padding:0;list-style:none}
.imagery-principles-list li{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-6) 0;border-bottom:1px solid var(--divider);min-width:0}
.imagery-principles-list li:nth-child(-n+2){padding-top:0}
.imagery-principles-list .imagery-number{flex-shrink:0}
.imagery-principles-list h3{margin:0 0 var(--space-2)}
@media(max-width:760px){.imagery-principles-list{grid-template-columns:1fr}.imagery-principles-list li:nth-child(2){padding-top:var(--space-6)}}
.imagery-carousel-controls{display:flex;justify-content:flex-end;gap:var(--space-2);margin:var(--space-4) 0}
.imagery-tones{display:flex;gap:var(--space-6);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.imagery-tones::-webkit-scrollbar{display:none}
.imagery-tones>.imagery-tone-card{flex:0 0 calc((100% - var(--space-6) - var(--space-6))/2.2);scroll-snap-align:start}
.imagery-tones figure{margin:0;min-width:0}
.imagery-tones img{display:block;width:100%;height:auto}
.imagery-tone-card{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.imagery-tone-card img{border-radius:var(--radius)}
.imagery-tone-caption{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4)}
.imagery-tone-caption>strong{font-size:var(--font-card);font-weight:600;line-height:1.5}
.imagery-tone-colors{display:flex;align-items:center;gap:var(--space-2)}
.imagery-tone-colors>span{display:block;width:var(--space-6);height:var(--space-6);border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 4%)}
.imagery-examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-6)}
.imagery-card{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;min-width:0}
.imagery-card-heading{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.imagery-card-heading h3{margin:0}
.imagery-card-heading p{flex:1;min-width:120px;color:var(--text-muted)}
.imagery-number{padding:var(--space-1) var(--space-3);background:var(--surface-active);color:var(--green);border-radius:var(--radius-pill);font-size:var(--font-small);font-weight:600;font-variant-numeric:tabular-nums}
.imagery-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);flex:1}
.imagery-example{margin:0;min-width:0}
.imagery-photo{position:relative;border-radius:var(--radius);overflow:hidden}
.imagery-photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.imagery-status{position:absolute;top:var(--space-2);left:var(--space-2);display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);font-size:var(--font-small);font-weight:600;color:var(--green);background:var(--surface-active)}
.imagery-status svg{flex-shrink:0}
.imagery-example figcaption{margin-top:var(--space-3);font-size:var(--font-body);font-weight:600;line-height:1.75;color:var(--green)}
.imagery-example.is-avoid .imagery-status{color:var(--status-error);background:var(--status-error-bg)}
.imagery-example.is-avoid figcaption{color:var(--status-error)}
.imagery-review{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--divider);font-size:var(--font-small);color:var(--text-muted)}
.imagery-card--refined .imagery-card-heading{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-3);row-gap:var(--space-1);margin-bottom:var(--space-6)}
.imagery-card--refined .imagery-card-heading p{grid-column:2;min-width:0}
.imagery-card--refined .imagery-pair{flex:initial}
.imagery-card--refined .imagery-status{position:static;width:fit-content}
.imagery-card--refined .imagery-example figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);font-weight:400}
.imagery-card--refined .imagery-example figcaption p{color:var(--text-secondary);font-weight:400}
.imagery-card--refined .imagery-review{margin-top:var(--space-4)}

@media(max-width:760px){.imagery-tones{grid-template-columns:1fr}.imagery-card-heading{gap:var(--space-2)}.imagery-pair{gap:var(--space-3)}}
@media(max-width:760px){.imagery-tones{gap:var(--space-4)}.imagery-tones>.imagery-tone-card{flex-basis:calc((100% - var(--space-4))/1.15)}}
.imagery-card--comparison .imagery-card-heading{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-3);row-gap:var(--space-2);margin-bottom:var(--space-6);align-items:start}
.imagery-card--comparison .imagery-card-heading p{grid-column:2;min-width:0;color:var(--text-secondary)}
.imagery-card--comparison .imagery-pair{flex:initial;margin-top:auto}
.imagery-card--comparison .imagery-status{top:0;left:0;border-radius:0 0 var(--radius) 0;padding:var(--space-2);font-size:var(--font-small)}
.imagery-card--comparison .imagery-example figcaption{text-align:center;font-weight:400;color:var(--text-secondary)}
.imagery-card--comparison .imagery-example figcaption p{font-weight:400}
.ai-table-wrap{margin-top:var(--space-6);overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
.ai-table{width:100%;min-width:640px;border-collapse:collapse;text-align:left}
.ai-table th,.ai-table td{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--divider);line-height:1.75;vertical-align:top}
.ai-table thead th{background:var(--surface-active);color:var(--green);font-size:var(--font-card);font-weight:600}
.ai-table tbody th{font-size:var(--font-card);font-weight:600;white-space:nowrap}
.ai-table td{font-size:var(--font-body);color:var(--text-secondary)}
.ai-keyword-copy{margin-left:var(--space-1);vertical-align:middle}
.ai-table tbody tr:last-child>*{border-bottom:0}
.ai-callout{margin-top:var(--space-4);padding:var(--space-4);background:var(--surface-active);border-radius:var(--radius);color:var(--green);font-weight:600}
.ai-tabs{overflow-x:auto;padding:var(--space-1);margin-left:calc(-1 * var(--space-1));margin-right:calc(-1 * var(--space-1));scrollbar-width:thin}
.ai-tabs button{flex:0 0 auto;white-space:nowrap}
.ai-dimension-panel{border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-6)}
.ai-rules{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--space-6)}
.ai-rules>div+div{border-left:1px solid var(--divider);padding-left:var(--space-6)}
.ai-rules ul{margin:0;padding-left:var(--space-4);color:var(--text-secondary);line-height:1.75}
.ai-rules li+li{margin-top:var(--space-2)}
.ai-dimension-prompts{display:grid;gap:var(--space-4);margin-top:var(--space-6)}
.ai-prompt{padding:var(--space-4);background:var(--surface-subtle);border:1px solid var(--border);border-radius:var(--radius);min-width:0}
.ai-prompt-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-3)}
.ai-prompt-heading h3{margin:0}
.ai-prompt-heading button{flex-shrink:0}
.ai-prompt-copy{display:inline-grid;place-items:center;width:var(--control-height);height:var(--control-height);padding:0;border:0;border-radius:var(--radius);background:transparent;color:var(--green)}
.ai-prompt-copy:hover{background:var(--surface-active);color:var(--green-hover)}
.ai-prompt-copy:active{color:var(--green-active)}
.ai-prompt-copy svg{width:20px;height:20px;pointer-events:none}
.template-order-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,800px),1fr));gap:var(--space-4);margin-top:var(--space-6)}
.template-order-overview .template-order-line{display:block;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius)}
.template-order-line>strong{display:block;margin-bottom:var(--space-3);color:var(--ink)}
.template-order-line ol{display:flex;gap:var(--space-2);list-style:none;padding:0;margin:0;overflow-x:auto}
.template-order-line li{display:flex;flex:0 0 auto;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius);background:var(--surface-subtle);color:var(--text-secondary);white-space:nowrap}
.template-order-line li b{font-size:var(--font-body);font-weight:600;color:var(--green)}
.template-order-line li span{font-size:var(--font-body);line-height:1.75}
.template-expand{display:block;position:relative;width:100%;padding:0;border:0;background:var(--surface);cursor:zoom-in}
@media(max-width:1100px){.template-order-overview{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.template-order-line ol{padding-bottom:var(--space-1)}}
.template-order-overview>div,.template-current-order{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;color:var(--green)}
.template-order-overview strong{min-width:96px;font-size:var(--font-card);font-weight:600}
.template-order-overview span,.template-current-order span{overflow-wrap:anywhere;line-height:1.75}
.template-type-tabs{overflow-x:auto;padding:var(--space-1);margin-left:calc(-1 * var(--space-1));margin-right:calc(-1 * var(--space-1))}
.template-type-tabs button{flex:0 0 auto;white-space:nowrap}
#template-type-panel{background:var(--surface-subtle);padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius)}
.template-current-order{margin-bottom:var(--space-6)}
.template-rows{display:grid;gap:var(--space-6)}
.template-row{display:grid;grid-template-columns:minmax(0,.85fr) 24px minmax(0,1.4fr);gap:var(--space-3);align-items:center}
.template-module-card{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);align-self:stretch}
.template-module-heading{display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-4)}
.template-module-heading h3{margin:0}
.template-options-label{color:var(--text-muted);font-size:var(--font-small);margin-bottom:var(--space-2)}
.template-options{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.template-options button{min-height:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--green)}
.template-options button[aria-pressed=true]{background:var(--surface-active);border-color:var(--green);font-weight:600}
.template-options button:hover{border-color:var(--green)}
.template-selling-point{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--divider)}
.template-selling-point strong{font-weight:600;color:var(--ink)}
.template-flow-arrow{color:var(--green);display:flex;justify-content:center}
.template-preview-area{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:var(--space-2);min-width:0;align-items:start}
.template-preview{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.template-preview figcaption{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--divider);font-size:var(--font-small);color:var(--text-secondary)}
.template-selected-id{color:var(--green);font-weight:600}
.template-main-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--surface)}
.template-thumbnails{display:grid;gap:var(--space-2);max-height:256px;overflow-y:auto;padding:var(--space-1)}
.template-thumbnails button{min-height:var(--control-height);padding:var(--space-1);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-muted)}
.template-thumbnails button[aria-pressed=true]{border-color:var(--green);background:var(--surface-active);color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.template-thumbnails button:hover{border-color:var(--green)}
.template-thumbnails img{display:block;width:100%;height:32px;object-fit:contain}
.template-thumbnails span{display:block;font-size:var(--font-small);margin-top:var(--space-1)}
@media(max-width:1100px){.template-row{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}.template-flow-arrow{display:none}.template-preview-area{grid-template-columns:minmax(0,1fr) 88px}.template-thumbnails{max-height:320px}}
@media(max-width:760px){#template-type-panel{padding:var(--space-4)}.template-type-tabs button{flex:0 0 auto;padding:8px 24px}.template-preview-area{grid-template-columns:minmax(0,1fr)}.template-thumbnails{display:flex;overflow-x:auto;max-height:none}.template-thumbnails button{flex:0 0 76px}.template-main-image{aspect-ratio:auto}.template-order-overview>div{gap:var(--space-1)}.template-order-overview strong{width:100%}}
.ai-prompt pre{margin:0;font:inherit;font-size:var(--font-body);line-height:1.75;color:var(--text-secondary);white-space:pre-wrap;overflow-wrap:anywhere}
.ai-templates{display:grid;gap:var(--space-6);margin-top:var(--space-6)}
.ai-prompt-positive{background:var(--surface-active)}
.ai-prompt-negative{background:var(--status-error-bg)}
.ai-process{margin:var(--space-8) 0 0;padding-left:var(--space-6);color:var(--text-secondary);line-height:1.75}
.ai-process li+li{margin-top:var(--space-3)}
@media(max-width:760px){.ai-tabs button{flex:0 0 auto;min-width:80px;padding:8px 24px}.ai-dimension-panel{padding:var(--space-4)}.ai-rules{grid-template-columns:1fr}.ai-rules>div+div{border-left:0;padding-left:0;border-top:1px solid var(--divider);padding-top:var(--space-4)}}
@media(max-width:760px){.imagery-examples-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}}

/* Product type guidance */
.type-judgment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.type-judgment-card,.type-example{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.type-judgment-card{display:flex;flex-direction:column}
.type-card-heading{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}
.type-card-heading .imagery-number{order:2;margin-left:auto;background:transparent;padding:0;color:var(--text-muted)}
.type-card-heading h3{margin:0;color:var(--green)}
.type-core-question{font-size:var(--font-body);font-weight:600;color:var(--ink);margin:0 0 var(--space-1)}
.type-explanation{color:var(--text-secondary);margin:0 0 var(--space-4)}
.type-keywords{background:var(--surface-subtle);border-radius:var(--radius);padding:var(--space-3);margin-top:auto}
.type-keywords>span,.type-role{font-size:var(--font-small);color:var(--text-muted)}
.type-keywords p{margin:var(--space-1) 0 0;color:var(--text-secondary)}
.type-priority-rule{margin-top:var(--space-6);padding:var(--space-4);background:var(--surface-subtle);border-radius:var(--radius)}
.type-priority-rule>strong{font-size:var(--font-card);font-weight:600;color:var(--green)}
.type-priority-rule p{margin:var(--space-2) 0 0;color:var(--text-secondary)}
.type-example{margin-top:var(--space-4)}
.type-example-label{display:block;font-size:var(--font-small);color:var(--text-muted);margin-bottom:var(--space-1)}
.type-example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-4)}
.type-example-grid>div{display:flex;flex-direction:column;align-items:flex-start;padding:var(--space-4);border-radius:var(--radius);background:var(--surface-subtle)}
.type-example-grid>div.type-example-primary{background:var(--surface-subtle)}
.type-example-grid .type-role{margin-bottom:var(--space-1)}
.type-example-grid strong{font-size:var(--font-card);font-weight:600}
.type-example-grid p{grid-column:1/-1;margin:var(--space-2) 0 0;color:var(--text-secondary)}
.type-example-conclusion{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);margin:var(--space-4) 0 0;color:var(--ink)}
.type-example-conclusion span{font-size:var(--font-small);color:var(--text-muted)}
.type-example-conclusion strong{font-weight:600}
@media(max-width:760px){.type-judgment-grid,.type-example-grid{grid-template-columns:minmax(0,1fr)}}

/* Category overview cover and category index */
main.overview-main{padding-top:0}
#category-overview-page{max-width:none}
.overview-cover{margin:0 calc(-1 * var(--page-gutter));padding:var(--space-12) var(--page-gutter);background:var(--green-active);color:var(--surface)}
.overview-cover-inner,.overview-content{max-width:var(--content-max);margin-inline:auto}
.overview-cover h1{color:var(--surface);overflow-wrap:break-word}
.overview-cover p{color:var(--surface-active);max-width:720px}
.overview-cover-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;padding:0;margin:var(--space-6) 0 0}
.overview-cover-tags li{font-size:var(--font-small);line-height:1.6;color:var(--surface-active);border:1px solid var(--green);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3)}
.overview-scope{margin:0 calc(-1 * var(--page-gutter));padding:var(--space-2) var(--page-gutter);background:var(--surface-active);color:var(--green);text-align:center;font-size:var(--font-small);font-weight:600}
.overview-content{padding-top:var(--space-12)}
.overview-title{font-size:var(--font-page);line-height:1.25;margin:0 0 var(--space-4)}
.overview-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.overview-category-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.overview-category-card h3{margin:0;background:var(--surface-subtle);padding:var(--space-4)}
.overview-category-card ul{display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--space-3) var(--space-2);padding:var(--space-4);margin:0;list-style:none}
.overview-category-card li{font-size:var(--font-body);color:var(--text-secondary);background:var(--surface-subtle);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3)}
@media(max-width:1100px){.overview-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.overview-cover{padding-block:var(--space-8)}.overview-content{padding-top:var(--space-8)}.overview-category-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}}

/* Correct / incorrect case comparisons */
.case-example-tabs{flex-wrap:wrap}
.case-example-tabs button{white-space:nowrap;min-width:0;padding-inline:var(--space-4)}
.case-example-count{font-size:var(--font-small);color:var(--text-muted);margin:var(--space-4) 0}
#case-example-panel{display:grid;gap:var(--space-6)}
.case-comparison-card{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.case-comparison-heading{margin-bottom:var(--space-4)}
.case-comparison-heading>span{display:block;font-size:var(--font-small);color:var(--text-muted);margin-bottom:var(--space-1)}
.case-comparison-heading h3{margin:0}
.case-comparison-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.case-comparison-side{min-width:0}
.case-side-heading{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.case-side-heading.is-correct{color:var(--green)}
.case-side-heading.is-incorrect{color:var(--status-error)}
.case-side-heading .example-status-icon{color:inherit;position:static;display:inline-flex;width:20px;height:20px;flex:0 0 20px}
.case-side-heading .example-status-icon svg{width:20px;height:20px}
.case-image-preview{position:relative;display:block;width:100%;padding:0;border:1px solid var(--divider);border-radius:var(--radius);overflow:hidden;background:var(--surface-subtle);cursor:zoom-in}
.case-image-preview img{display:block;width:100%;height:auto;aspect-ratio:2.3;object-fit:contain}
.case-side-description{margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--radius);background:var(--surface-subtle)}
.case-side-description h4{margin:0 0 var(--space-2);font-size:var(--font-body);font-weight:600}
.case-side-description ul{margin:0;padding-left:var(--space-4);color:var(--text-secondary);line-height:1.75}
.case-side-description li+li{margin-top:var(--space-1)}
@media(max-width:760px){.case-example-tabs{flex-wrap:nowrap;overflow-x:auto;padding:var(--space-1);margin-inline:calc(-1 * var(--space-1))}.case-example-tabs button{flex:0 0 auto}.case-comparison-pair{grid-template-columns:minmax(0,1fr)}}

.layout-tabs{flex-wrap:wrap}
.layout-tabs button{flex:0 0 auto;white-space:nowrap}
#layout-preview-panel{min-width:0}
.layout-preview-frame{position:relative}
.layout-preview-frame>.layout-view-toggle{position:absolute;right:var(--space-4);bottom:var(--space-4);z-index:1}
.layout-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.layout-preview-toolbar p{color:var(--text-secondary)}

#layout-preview-panel :focus-visible{outline-offset:-4px}
.layout-view-toggle{flex:0 0 auto;min-height:var(--control-height);padding:var(--space-2) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--green)}
.layout-view-toggle:hover{background:var(--surface-active)}
.layout-image{display:block;position:relative;width:100%;padding:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface-subtle);cursor:zoom-in}
.layout-image img{display:block;width:100%;height:auto}
#layout-preview-image{display:block;width:100%;height:auto;aspect-ratio:auto}
.layout-spacing-wrap{margin-top:var(--space-6);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.layout-spacing-table{width:100%;border-collapse:collapse;text-align:left}
.layout-spacing-table th,.layout-spacing-table td{padding:var(--space-4);border-bottom:1px solid var(--divider);font-size:var(--font-body)}
.layout-spacing-table thead th{background:var(--surface-active);font-size:var(--font-card);font-weight:600;color:var(--green)}
.layout-spacing-table tbody th{font-weight:600}
.layout-spacing-table tr:last-child>*{border-bottom:0}
.layout-foundations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.layout-foundations>div{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius)}
.layout-guide{margin-top:var(--space-8)}
.layout-guide .layout-image{margin-top:var(--space-4)}
.layout-grid-notes{margin:var(--space-4) 0 0;padding-left:var(--space-6);color:var(--text-secondary);line-height:1.75}
@media(max-width:760px){.layout-tabs{flex-wrap:nowrap;overflow-x:auto;padding:var(--space-1)}.layout-preview-toolbar{gap:var(--space-3);flex-wrap:wrap}.layout-foundations{grid-template-columns:minmax(0,1fr)}.layout-spacing-table th,.layout-spacing-table td{padding:var(--space-3)}}


.layout-responsive-split{display:grid;grid-template-columns:184px minmax(0,1fr);gap:var(--space-6);margin-top:var(--space-4);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.layout-guide .layout-responsive-split .layout-image{margin:0;align-self:start;border:0}
.layout-breakpoints{display:grid;align-content:stretch;min-width:0}
.layout-breakpoint{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--divider)}
.layout-breakpoint:last-child{border-bottom:0}
.layout-breakpoint h4{font-size:var(--font-body);font-weight:400;color:var(--text-secondary);margin:0 0 var(--space-1)}
.layout-breakpoint-spec{display:flex;flex-direction:column;gap:var(--space-1);flex-shrink:0;text-align:right}
.layout-breakpoint-spec strong{font-size:var(--font-body);color:var(--text-secondary);font-weight:400}
.layout-breakpoint p,.layout-breakpoint-spec span{font-size:var(--font-small);color:var(--text-muted)}
@media(max-width:760px){.layout-responsive-split{grid-template-columns:minmax(0,1fr)}.layout-responsive-split .layout-image{max-width:184px;justify-self:center}.layout-breakpoint{gap:var(--space-2)}}

/* Brand component specimens are scoped separately from documentation controls. */
.component-demo{margin-top:var(--space-6);padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-subtle)}
.component-demo h3 span{font-size:var(--font-small);font-weight:400;color:var(--text-muted);margin-left:var(--space-2)}
.component-button-states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-4)}
.component-button-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);min-width:0;text-align:center}
.component-button-state>span{font-size:var(--font-small);color:var(--text-muted)}
.brand-component-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:var(--space-2) 32px;border:1px solid var(--green);border-radius:var(--radius-pill);background:var(--green);color:var(--surface);font-family:'Brand Poppins',sans-serif;font-size:var(--font-body);font-weight:600;line-height:1.5;max-width:100%;text-align:center}
.brand-component-button:hover,.brand-component-button.is-hover{background:var(--green-hover);border-color:var(--green-hover)}
.brand-component-button:active{background:var(--green-active)}
.brand-component-button:disabled{background:var(--surface-active);border-color:var(--border);color:var(--text-muted);cursor:not-allowed}
.brand-component-button.is-secondary{background:var(--surface);color:var(--green)}
.brand-component-button.is-soft{background:var(--surface-active);border-color:var(--surface-active)}
.brand-component-button.is-secondary:hover{background:var(--surface-active);border-color:var(--green)}
.component-secondary-demo{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--divider)}

.component-button-notes{display:grid;gap:var(--space-2);margin-top:var(--space-4)}
.component-button-notes strong{font-weight:600;color:var(--ink);margin-right:var(--space-3)}
.component-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-6)}
.brand-component-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-subtle)}
.component-image-placeholder{aspect-ratio:1.8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);background:var(--surface-subtle);color:var(--text-muted);font-size:var(--font-small)}
.component-card-copy{padding:32px;border-top:1px solid var(--divider);font-family:'Brand Poppins',sans-serif}
.component-card-copy h3{color:var(--green)}
.component-footnote{margin-top:var(--space-4);font-size:var(--font-small);color:var(--text-muted)}
.component-badge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.component-badge-item{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius)}
.component-badge-preview{min-height:48px;display:flex;align-items:center;margin-bottom:var(--space-3)}
.brand-component-badge{display:inline-block;padding:var(--space-1) var(--space-4);border:1px solid transparent;border-radius:var(--radius-pill);font-family:'Brand Poppins',sans-serif;font-size:var(--font-small);font-weight:600;line-height:1.6;text-align:center}
.badge-bestseller{background:#E6FABA;color:var(--green-active)}
.badge-new{border-color:var(--green);color:var(--green);background:var(--surface)}
.badge-limited{background:var(--green-active);color:var(--surface)}
.badge-subscribe{background:var(--surface-subtle);color:var(--green)}
.badge-sale{background:#D98A16;color:var(--ink)}
.badge-shipping{border-color:var(--text-secondary);color:var(--text-secondary)}
@media(max-width:1100px){.component-card-grid,.component-badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.component-demo{padding:var(--space-4)}.component-card-grid,.component-badge-grid{grid-template-columns:minmax(0,1fr)}.component-button-states,.component-secondary-demo .component-button-states{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}.component-token-wrap th,.component-token-wrap td{overflow-wrap:anywhere}}

/* Shared discovery and reading refinements, preserving the existing UI tokens. */
.nav-status{margin-left:auto;padding-left:var(--space-2);font-size:var(--font-small);font-weight:400;color:var(--text-muted);white-space:nowrap}
.site-search-trigger{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 32px);min-height:var(--control-height);margin:0 var(--space-4) var(--space-4);padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-subtle);color:var(--text-secondary);text-align:left}
.site-search-trigger:hover{border-color:var(--green)}
.site-search-trigger kbd{font:inherit;font-size:var(--font-small);color:var(--text-muted)}
.mobile-search-trigger{display:none}
.page-header>p{max-width:64em}
.toc a{white-space:normal;overflow-wrap:anywhere;padding:var(--space-2) 0}
.toc:has(a:only-child){display:none}
@media(min-width:1401px) and (max-width:1599px){
 :root{--anchor-offset:80px}
 .toc{position:sticky;top:0;right:auto;width:auto;display:flex;gap:var(--space-6);border-left:0;border-bottom:1px solid var(--divider);padding:var(--space-2) 0;margin:0 0 var(--space-8);background:var(--surface);overflow-x:auto}
 .toc a{flex-shrink:0;white-space:nowrap}
 .toc a.active:before{left:0;bottom:-8px;width:100%;height:2px}
}
@media(min-width:1600px){main:not(.overview-main){padding-right:calc(var(--page-gutter) + 88px)}.toc{width:112px}.overview-content{padding-right:var(--space-8)}}
.context-link{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;width:fit-content;height:32px;min-height:32px;padding:0 var(--space-4);margin-top:var(--space-4);border:1px solid transparent;border-radius:var(--radius-pill);background:var(--surface-active);color:var(--green);font-size:var(--font-body);line-height:1.5;text-decoration:none}
.context-link:hover{border-color:var(--green);color:var(--green-hover)}
.related-reading{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-6);border-top:1px solid var(--divider);padding-top:var(--space-4);margin-top:var(--space-8)}
.related-reading>span{color:var(--text-muted);font-size:var(--font-small)}
.related-reading a{display:inline-flex;align-items:center;min-height:var(--control-height);color:var(--green)}
.related-reading a:hover{text-decoration:underline;text-underline-offset:4px}
.table-jump{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}
.table-jump select{font:inherit;min-height:var(--control-height);max-width:100%;padding:var(--space-2) var(--space-3);color:var(--text-secondary);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.table-jump>span{color:var(--text-muted);font-size:var(--font-small)}
.table-jump:not([hidden])+.expression-table-wrap{margin-top:var(--space-3)}
.site-search{width:640px;max-height:calc(100dvh - 48px);padding:var(--space-6);overflow:auto}
.search-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}
.search-heading h2{margin:0}
.search-close{min-height:var(--control-height);padding:var(--space-2) var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary)}
.site-search input{width:100%;min-height:var(--control-height);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.search-status,.search-help{font-size:var(--font-small);color:var(--text-muted);margin-top:var(--space-3)}
.search-results{margin-top:var(--space-2)}
.search-result{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3);border-bottom:1px solid var(--divider);border-radius:var(--radius)}
.search-result:hover,.search-result:focus{background:var(--surface-subtle)}
.search-result small{font-size:var(--font-small);color:var(--text-muted)}
.search-result strong{font-size:var(--font-card);font-weight:600;color:var(--green)}
.search-result>span{color:var(--text-secondary);overflow-wrap:anywhere;font-size:var(--font-body)}
body.search-open{overflow:hidden}
:where(select):focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media(max-width:760px){
 .mobile-search-trigger{display:block;margin-left:auto;min-height:var(--control-height);padding:var(--space-2);border:0;background:transparent;color:var(--green);font-size:var(--font-body)}
 .mobile-header>small,.mobile-header>span:last-of-type{display:none}
 .site-search{padding:var(--space-4)}
 .related-reading{gap:var(--space-2) var(--space-4)}
}

/* Information hierarchy is a section within the typography page. */
.flexible-color-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-6);margin-top:var(--space-6)}
.accent-recommendation{min-width:0;padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.accent-input-row{display:flex;gap:var(--space-2);margin-top:var(--space-4);align-items:center}
.accent-input-row input,.accent-input-row button{min-height:var(--control-height);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font:inherit}
#accent-brand-picker{width:44px;height:44px;flex:0 0 44px;padding:4px;cursor:pointer}
#accent-brand-hex{width:100%;min-width:0;padding:8px 12px;color:var(--ink);font-variant-numeric:tabular-nums}
#accent-brand-hex[aria-invalid=true]{border-color:var(--status-error)}
#accent-generate{flex-shrink:0;padding:8px 12px;background:var(--surface-active);color:var(--green);cursor:pointer}
.accent-help{font-size:var(--font-small);color:var(--text-muted);margin-top:var(--space-3)}
.accent-error{font-size:var(--font-small);color:var(--status-error);margin-top:var(--space-2)}
.accent-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:var(--space-4) 0}
.accent-swatch{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);text-align:left}
.accent-swatch:hover{border-color:var(--green);background:var(--surface-subtle)}
.accent-color-chip{display:block;width:100%;height:56px;border-radius:4px;margin-bottom:var(--space-1)}
.accent-swatch strong,.accent-swatch>span:not(.accent-color-chip){font-size:var(--font-small);font-weight:400;color:var(--text-secondary)}
.accent-swatch small{font-size:var(--font-small);color:var(--text-muted);line-height:1.5}
.flexible-color-grid>.ratio-panel{margin-top:0;flex-direction:column;justify-content:center;gap:var(--space-8);min-width:0}
.flexible-color-grid .ratio-details{width:100%;flex:0 1 auto}
@media(max-width:1100px){.flexible-color-grid{grid-template-columns:minmax(0,1fr)}.flexible-color-grid>.ratio-panel{flex-direction:row}.flexible-color-grid .ratio-details{flex:1}}
@media(max-width:760px){.accent-recommendation{padding:var(--space-4)}.flexible-color-grid>.ratio-panel{flex-direction:column}.accent-results{grid-template-columns:repeat(2,minmax(0,1fr))}.accent-input-row{flex-wrap:wrap}#accent-brand-hex{flex:1;width:auto}#accent-generate{margin-left:auto}}
#information-layout>.info-layout-example{margin-top:var(--space-8)}