:root {
    --ink: var(--color-text); --mut: var(--color-text-mut); --faint: var(--color-text-faint);
    --line: var(--color-line); --line-strong: var(--color-line-strong); --soft: var(--color-surface-soft);
    --blue: var(--entity-capture); --violet: var(--entity-term); --lilac: var(--entity-facet);
    --orange: var(--entity-family); --amber: var(--entity-designer); --gray: var(--entity-neutral);
    --green: var(--entity-structure); --teal: var(--entity-color); --red: var(--entity-motion);
    --color-bg:#FFFFFF; --color-surface:#FFFFFF; --color-surface-active:#FCFCFC;
    --color-surface-hover:#F4F5F6; --color-surface-soft:#F6F7F8;
    --color-text:#171717; --color-text-mut:#5F656C; --color-text-faint:#6C737B;
    --color-line:#E3E6EA; --color-line-strong:#C9CFD6;
    --color-input-border:#7B838C; --color-focus-ring:#2454C6;
    --color-shadow:rgba(18,25,33,.16); --color-code-bg:#F6F7F8;
    --color-favicon-bg:#F2F4F5; --color-scroll-thumb:#B9C0C7;
    --entity-ink:#171717; --entity-domain:#171717; --entity-capture:#2454C6;
    --entity-term:#6842C2; --entity-facet:#6842C2; --entity-family:#C2410C;
    --entity-designer:#8A5A00; --entity-structure:#277844; --entity-color:#0F6F78;
    --entity-neutral:#4B5563; --entity-motion:#B42318; --entity-video:#B54708;
  }
  * { box-sizing:border-box; }
  * { scrollbar-color:var(--color-scroll-thumb, #b9c0c7) transparent; scrollbar-width:thin; }
  :focus-visible { outline:2px solid var(--color-focus-ring, #2454c6); outline-offset:2px; }
  ::selection { background:var(--color-selection, #dce6ff); }
  html, body { margin:0; height:100%; overflow:hidden; }
  explorer-app { display:flex; flex-direction:column; height:100%; min-height:0; }
  body { display:flex; flex-direction:column; background:var(--color-bg); font:14px/1.55 -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; }
  header { flex:0 0 auto; display:grid; grid-template-columns:minmax(240px,1fr) minmax(280px,520px) auto; align-items:center; gap:18px; min-height:60px; padding:10px 22px; border-bottom:1px solid var(--line); background:var(--color-surface); }
  .brand-block { display:flex; align-items:baseline; gap:14px; min-width:0; }
  .title { font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
  .title span { color:var(--mut); font-weight:400; }
  .meta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:var(--mut); font-variant-numeric:tabular-nums; }
  .top-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; white-space:nowrap; }
  .theme-control { display:inline-flex; align-items:center; gap:5px; }
  .theme-icon { font-size:12px; color:var(--mut); }
  .theme-select { font:inherit; font-size:10.5px; color:var(--mut); border:1px solid var(--line); border-radius:99px; background:var(--surface, var(--color-surface)); padding:2px 9px; outline:none; cursor:pointer; }
  .theme-select:hover { border-color:var(--line-strong, var(--color-line-strong)); color:var(--ink); }
  .design-cta { display:inline-flex; align-items:center; min-height:30px; padding:4px 11px; border:1px solid var(--ink); border-radius:3px; background:var(--ink); color:var(--color-bg); font-size:10.5px; font-weight:600; text-decoration:none; }
  .design-cta:hover { opacity:.82; }
  .favicon { position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:3px; overflow:hidden; background:var(--color-favicon-bg); border:1px solid rgba(0,0,0,.06); flex:0 0 auto; font-size:9px; font-weight:600; color:var(--mut); vertical-align:-3px; }
  .favicon .fl { position:absolute; inset:0; display:grid; place-items:center; }
  .favicon.inline { width:13px; height:13px; font-size:7px; border-radius:2px; vertical-align:-2px; margin-right:3px; align-self:center; }
  .favicon img { width:100%; height:100%; display:block; }
  .motion-badge { color:var(--entity-motion); font-weight:600; }
  .video-badge { color:var(--entity-video); font-weight:600; }
  .wrap { position:relative; width:100%; min-width:0; }
  .search { width:100%; font:inherit; font-size:13px; color:var(--ink); border:none; border-bottom:1px solid var(--color-input-border); padding:5px 0 4px; outline:none; background:transparent; }
  .search:focus { border-bottom-color:var(--ink); }
  .search::placeholder { color:#b9b9b9; }
  #results { position:absolute; top:100%; right:0; left:0; z-index:30; background:var(--color-surface); border:1px solid var(--line); box-shadow:var(--color-shadow); max-height:70vh; overflow-y:auto; display:none; margin-top:4px; }
  #results.on { display:block; }
  .rg { font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:#b9b9b9; padding:10px 14px 3px; }
  .res { display:flex; align-items:baseline; gap:10px; width:100%; padding:5px 14px; border:none; background:none; text-align:left; font:inherit; font-size:12.5px; cursor:pointer; color:var(--ink); }
  .res:hover, .res.hl { background:var(--soft); }
  .res .t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .res .s { font-size:10px; color:var(--mut); flex:0 0 auto; }
  #cols { flex:1 1 auto; min-height:0; display:flex; align-items:stretch; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; overscroll-behavior-x:contain; }
  .col { flex:0 0 340px; width:340px; max-width:88vw; border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--color-surface); }
  .col.enter { animation: slidein .16s ease; }
  @keyframes slidein { from { transform:translateX(14px); opacity:.3; } to { transform:none; opacity:1; } }
  .col.active { background:var(--color-surface-active); }
  .chead { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); cursor:pointer; flex:0 0 auto; }
  .chead:hover { background:var(--soft); }
  .chead .dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
  .chead .t { flex:1; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chead .n { font-size:10px; color:var(--mut); font-variant-numeric:tabular-nums; flex:0 0 auto; }
  .chead .x { font-size:12px; color:#b9b9b9; border:none; background:none; cursor:pointer; padding:0 2px; flex:0 0 auto; }
  .chead .x:hover { color:var(--ink); }
  .cbody { overflow-y:auto; padding:12px 14px 26px; min-height:0; }
  .prose { font-size:12.5px; line-height:1.6; margin:0 0 12px; }
  .prose b { font-weight:600; }
  .lk { color:var(--entity-capture); cursor:pointer; text-decoration:none; border-bottom:1px solid transparent; }
  .lk:hover { border-bottom-color:var(--blue); }
  .lk.term { color:var(--entity-term); } .lk.term:hover { border-bottom-color:var(--violet); }
  .lk.fam { color:var(--entity-family); } .lk.fam:hover { border-bottom-color:var(--orange); }
  .lk.dom { color:var(--entity-domain); } .lk.dom:hover { border-bottom-color:var(--ink); }
  .sub { font-size:10px; color:#b9b9b9; margin:-2px 0 10px; font-family:ui-monospace, Menlo, monospace; }
  .kv { border-top:1px solid var(--line); margin-bottom:14px; }
  .kv .r { display:flex; gap:10px; padding:4px 0; border-bottom:1px solid var(--line); font-size:11.5px; }
  .kv .k { flex:0 0 78px; color:var(--mut); }
  .kv .v { flex:1; word-break:break-word; }
  .kv .v.mono { font-family:ui-monospace, Menlo, monospace; font-size:10px; }
  .sec h4 { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:#b9b9b9; margin:16px 0 4px; display:flex; align-items:baseline; gap:8px; }
  .sec h4 .n { font-weight:500; letter-spacing:.04em; }
  .sec h4 .section-open { margin-left:auto; flex:0 0 auto; border:0; background:none; color:#c4c4c4; font-size:8px; font-weight:400; letter-spacing:.04em; padding:0; cursor:pointer; }
  .sec h4 .section-open:hover { color:var(--mut); }
  .hs h3 .section-open { border:0; background:none; color:#c4c4c4; font-size:8px; font-weight:400; letter-spacing:.04em; padding:0; cursor:pointer; margin-left:4px; }
  .hs h3 .section-open:hover { color:var(--mut); }
  .row { display:flex; align-items:baseline; gap:10px; width:100%; padding:5px 2px; border:none; border-bottom:1px solid var(--line); background:none; text-align:left; font:inherit; font-size:12px; cursor:pointer; color:var(--ink); }
  .row:hover { background:var(--soft); }
  .row .t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .row .s { font-size:10px; color:var(--mut); flex:0 0 auto; font-variant-numeric:tabular-nums; }
  .sw { flex:0 0 16px; height:16px; border:1px solid rgba(0,0,0,.1); border-radius:2px; }
  .confbar { height:3px; background:var(--soft); border-radius:99px; margin:2px 0 7px; }
  .confbar i { display:block; height:3px; background:var(--mut); opacity:.4; border-radius:99px; }
  .row .main { min-width:0; flex:1; overflow:hidden; }
  .row .primary, .row .secondary { display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .row .primary { line-height:1.35; }
  .row .secondary { margin-top:1px; color:var(--mut); font-size:9px; }
  .row .secondary .sw { width:9px; height:9px; margin-right:3px; border-radius:1px; vertical-align:-1px; }
  .capture-row { display:grid; grid-template-columns:58px minmax(0,1fr) 9px; align-items:center; gap:10px; width:100%; min-width:0; min-height:60px; padding:8px 3px; border:0; border-bottom:1px solid var(--line); background:transparent; cursor:pointer; overflow:hidden; text-align:left; font:inherit; color:var(--ink); }
  .capture-row:hover { background:var(--soft); }
  .capture-thumb { position:relative; width:58px; height:42px; display:block; overflow:hidden; border:1px solid var(--line); background:var(--color-favicon-bg, #eceff1); background-size:100% 100%; flex:0 0 auto; }
  .capture-thumb img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; opacity:0; }
  .capture-thumb img.loaded { opacity:1; }
  .capture-thumb img.missing { display:none; }
  .capture-row .motion-badge, .capture-row .video-badge { position:absolute; bottom:2px; z-index:2; display:grid; place-items:center; width:12px; height:12px; border:1px solid rgba(0,0,0,.2); border-radius:50%; background:rgba(255,255,255,.92); color:var(--mut); font-size:6px; line-height:1; }
  .capture-row .motion-badge { right:2px; }
  .capture-row .video-badge { left:2px; font-weight:650; }
  .capture-copy { min-width:0; overflow:hidden; }
  .capture-title, .capture-sub { display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .capture-title { font-size:12px; font-weight:520; line-height:1.35; }
  .capture-sub { margin-top:2px; color:var(--mut); font-size:9.5px; }
  .capture-meta { display:block; min-width:0; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--faint); font-size:8.8px; font-variant-numeric:tabular-nums; }
  .capture-evidence { display:block; min-width:0; margin-top:4px; color:var(--faint); font:9px/1.4 ui-monospace,Menlo,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .capture-evidence .palette-mini { width:100%; margin:1px 0 0; }
  .row-arrow { flex:0 0 auto; color:var(--mut); font-size:12px; }
  .grad-prev { flex:0 0 26px; height:16px; border-radius:2px; }
  .term-highlight { color:var(--violet); }
  .font-src { font:8.5px/1.45 ui-monospace,Menlo,monospace; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:-2px 0 6px; }
  .font-src b { font-weight:600; color:var(--faint); }
  .font-src[data-font-load-state="loading"] b { color:var(--entity-family); }
  .font-src[data-font-load-state="error"] b { color:var(--entity-motion); }
  .font-preview { position:relative; min-height:54px; margin:1px 0 6px; border:1px solid var(--line); border-radius:3px; background:var(--soft); overflow:hidden; }
  .font-preview img { display:block; width:100%; height:72px; padding:6px 8px; object-fit:contain; opacity:0; }
  .font-preview.loaded img { opacity:1; }
  .font-preview-state { position:absolute; inset:0; display:grid; place-items:center; padding:8px; color:var(--mut); font:9px/1.4 ui-monospace,Menlo,monospace; text-align:center; }
  .font-preview.loaded .font-preview-state { display:none; }
  .font-preview.failed { min-height:42px; border-style:dashed; }
  .font-preview-live { display:flex; align-items:center; width:100%; height:72px; padding:6px 8px; overflow:hidden; color:#f3f3f3; font-size:30px; line-height:1; white-space:nowrap; }
  .font-preview-unavailable { margin:1px 0 8px; color:var(--mut); font:8.8px/1.45 ui-monospace,Menlo,monospace; }
  .chip { display:inline-block; font-size:11px; border:1px solid var(--line); border-radius:99px; padding:2px 11px; margin:0 5px 5px 0; cursor:pointer; background:none; color:var(--ink); }
  .chip:hover { border-color:var(--color-line-strong); background:var(--soft); }
  .shot-wrap { position:relative; min-height:80px; margin:0 0 10px; overflow:hidden; border:1px solid var(--line); border-radius:4px; background:var(--soft); background-size:100% 100%; }
  .shot { width:100%; max-width:100%; display:block; opacity:0; }
  .shot.loaded { opacity:1; }
  .shot-fallback { display:none; padding:28px 12px; text-align:center; color:var(--mut); font-size:10px; }
  .motion-player { position:relative; margin:0 0 6px; overflow:hidden; border:1px solid var(--line); border-radius:4px; background:#000; }
  .motion-player video { display:block; width:100%; height:100%; background:#000; object-fit:contain; }
  .media-meta { display:flex; flex-wrap:wrap; gap:5px 12px; margin:0 0 12px; color:var(--mut); font-size:9.5px; }
  .associated-capture { border:1px solid var(--line); border-radius:4px; padding:4px 6px; margin:0 0 12px; }
  .associated-capture .capture-row { border-bottom:0; }
  .swatch.big { width:100%; height:64px; margin:4px 0 8px; border-radius:2px; }
  .evidence-family-row { display:grid; grid-template-columns:minmax(0,1fr) auto 9px; align-items:center; gap:8px; min-width:0; width:100%; padding:6px 2px; border:0; border-bottom:1px solid var(--line); background:transparent; cursor:pointer; text-align:left; font:inherit; color:var(--ink); }
  .evidence-family-row:hover { background:var(--soft); }
  .evidence-family-copy { min-width:0; overflow:hidden; }
  .evidence-family-title, .evidence-family-preview { display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .evidence-family-title { font-size:11.5px; font-weight:500; }
  .evidence-family-preview { margin-top:1px; color:var(--mut); font-size:9px; }
  .evidence-count { color:var(--mut); font-size:9.5px; font-variant-numeric:tabular-nums; }
  .palette-mini { display:flex; height:4px; margin-top:3px; overflow:hidden; border-radius:2px; }
  .palette-mini i { display:block; flex:1; min-width:2px; }
  .actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:6px 0 12px; }
  .action { border:0; background:transparent; color:var(--mut); padding:0; cursor:pointer; font-size:10px; text-decoration:underline; text-underline-offset:2px; }
  .action:hover { color:var(--ink); }
  .empty { font-size:11px; color:#b9b9b9; padding:5px 2px; }
  .more { width:100%; border:0; background:none; color:var(--mut); padding:8px 2px; text-align:left; font:inherit; font-size:11px; cursor:pointer; }
  .more:hover { color:var(--ink); background:var(--soft); }
  @media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation-duration:.001ms!important; transition-duration:.001ms!important; } }
  a.ext { color:var(--ink); }
  .hsrow { display:flex; align-items:baseline; gap:10px; width:100%; padding:4px 2px; border:none; border-bottom:1px solid var(--line); background:none; text-align:left; font:inherit; font-size:11.5px; cursor:pointer; color:var(--ink); }
  .hsrow:hover { background:var(--soft); }
  .hsrow .t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hsrow .s { font-size:9.5px; color:var(--mut); font-variant-numeric:tabular-nums; }
  .hs h3 { font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin:14px 0 2px; }
  .intro { font-size:11px; color:var(--mut); margin:6px 0 2px; }
  .hint { font-size:9.5px; color:#c9c9c9; margin-bottom:4px; }
  .foot { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:16px; padding-top:10px; border-top:1px solid var(--line); color:#b9b9b9; font-size:10px; }
  .foot .lk { font-size:10px; }
  .system-links { margin:0 0 16px; color:var(--mut); font-size:10px; }
  /* v4-ported */
  .type-sample { margin:1px 0 7px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .font-specimen { font-size:22px; line-height:1.2; color:var(--orange); margin:2px 0 3px; overflow-wrap:anywhere; }
  .font-meta { font-size:9.5px; color:var(--mut); }
  .font-preview-hero { display:block; margin:0 0 7px; }
  .font-preview-hero .font-preview { min-height:96px; margin:0; border-color:var(--line-strong); border-radius:4px; background:#181818; overflow-x:auto; overflow-y:hidden; }
  .font-preview-hero .font-preview img { width:680px; max-width:none; height:96px; padding:0; object-fit:fill; }
  .font-preview-hero .font-preview-live { width:680px; max-width:none; height:96px; padding:0 18px; font-size:42px; }
  .font-preview-hero .font-preview-state { color:#9aa1a8; }
  .font-hero-caption { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 1px 4px; }
  .font-hero-caption strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:12px; }
  .font-hero-caption span { flex:0 0 auto; color:var(--mut); font:8.8px/1.4 ui-monospace,Menlo,monospace; }
  .font-provenance { display:flex; flex-wrap:wrap; gap:4px 10px; margin:0 1px 13px; color:var(--mut); font:8.8px/1.45 ui-monospace,Menlo,monospace; }
  .font-provenance .ext { color:var(--mut); }
  .family-attribution { margin-top:0; padding-top:11px; border-top:1px solid var(--line); }
  .bounds-map { position:relative; width:100%; aspect-ratio:1.6/1; border:1px solid var(--line); background-size:cover; background-position:center; overflow:hidden; margin:6px 0 12px; }
  .bounds-map:after { content:""; position:absolute; inset:0; background:var(--color-overlay, rgba(255,255,255,.4)); }
  .bounds-box { position:absolute; border:2px solid var(--entity-structure); background:color-mix(in srgb, var(--entity-structure) 15%, transparent); z-index:1; min-width:2px; min-height:2px; }
  .bounds-label { position:absolute; z-index:2; left:5px; bottom:4px; background:var(--color-overlay-strong, rgba(255,255,255,.9)); padding:2px 4px; font-size:9px; color:var(--entity-structure); }
  .geometry { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin:-6px 0 12px; }
  .geometry span { min-width:0; padding:3px 4px; background:var(--soft); color:var(--mut); text-align:center; font-size:9px; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; border-radius:2px; }
  .sdot { width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
  .raw { white-space:pre-wrap; word-break:break-word; border:1px solid var(--color-line); background:var(--color-code-bg); padding:10px; font:10px/1.55 ui-monospace,Menlo,monospace; max-height:300px; overflow:auto; }
  #cap-hover { position:fixed; z-index:1000; display:none; width:min(520px,calc(100vw - 24px)); background:var(--color-surface); border:1px solid var(--color-line-strong); box-shadow:var(--color-shadow); pointer-events:none; padding:7px; }
  #cap-hover.open { display:block; }
  #cap-hover .imgw { position:relative; background:var(--color-media-fallback, var(--soft)); overflow:hidden; display:flex; align-items:center; justify-content:center; }
  #cap-hover img { display:block; width:100%; height:auto; max-height:62vh; object-fit:cover; background:var(--color-media-fallback, var(--soft)); }
  #cap-hover .hmeta { padding:7px 3px 1px; }
  #cap-hover .ht { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #cap-hover .hs { font-size:10px; color:var(--mut); }
  #cap-hover .hp { display:flex; height:5px; margin-top:6px; overflow:hidden; }
  #cap-hover .hp span { flex:1; }
  #cap-hover .htags { font-size:9.5px; color:var(--violet); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  @media (max-width:760px) { #cap-hover { display:none !important; } }
  #lb { position:fixed; inset:0; z-index:2000; display:none; }
  #lb.on { display:block; }
  .lb-backdrop { position:absolute; inset:0; background:rgba(9,11,14,.88); opacity:0; transition:opacity .25s ease; }
  #lb.on .lb-backdrop { opacity:1; }
  .lb-stage { position:fixed; overflow:hidden; border-radius:6px; background:#000; box-shadow:0 24px 90px rgba(0,0,0,.55); will-change:transform,width,height; transition:transform .32s cubic-bezier(.2,.7,.2,1), width .32s cubic-bezier(.2,.7,.2,1), height .32s cubic-bezier(.2,.7,.2,1), left .32s cubic-bezier(.2,.7,.2,1), top .32s cubic-bezier(.2,.7,.2,1), opacity .2s ease; }
  .lb-media { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; }
  .lb-media.on { opacity:1; }
  #lb.lb-morph .lb-media { object-fit:cover; }
  .lb-close, .lb-nav { position:fixed; z-index:2001; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:18px; cursor:pointer; }
  .lb-close:hover, .lb-nav:hover { background:rgba(255,255,255,.2); }
  .lb-close { top:16px; right:18px; font-size:13px; }
  .lb-prev { top:50%; left:18px; transform:translateY(-50%); }
  .lb-next { top:50%; right:18px; transform:translateY(-50%); }
  .lb-cap { position:fixed; left:0; right:0; bottom:18px; z-index:2001; text-align:center; font-size:11px; color:rgba(255,255,255,.9); display:flex; flex-direction:column; gap:2px; align-items:center; pointer-events:none; }
  .lb-cap .lb-title { font-size:12.5px; font-weight:600; max-width:70vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lb-cap .lb-sub { font-size:10px; color:rgba(255,255,255,.65); }
  .lb-count { position:fixed; top:16px; left:18px; z-index:2001; font-size:10px; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums; }
  .capture-thumb, .shot-wrap img, .motion-player video { cursor:zoom-in; }
  .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:10.5px; overflow-wrap:anywhere; }
  .system-callout { margin:0 0 12px; padding:7px 9px; border-left:2px solid var(--gray); background:var(--soft); color:var(--mut); font-size:10.5px; line-height:1.52; overflow-wrap:anywhere; }
  .system-callout b { color:var(--ink); }
  .font-highlight { color:var(--orange); font-weight:570; }
  .schema-column { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 10px; padding:5px 0; border-bottom:1px solid var(--line); font-size:11px; }
  .schema-column .name { min-width:0; overflow-wrap:anywhere; }
  .schema-column .type { white-space:nowrap; color:var(--mut); }
  .key-badge { margin-left:5px; color:var(--violet); font-size:8px; text-transform:uppercase; font-weight:600; }
  @media (max-width:760px) {
    header { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:9px 14px 10px; }
    .brand-block { gap:9px; }
    .meta { font-size:9px; }
    .wrap { grid-column:1 / -1; grid-row:2; }
    .top-actions { grid-column:2; grid-row:1; }
    .theme-icon { display:none; }
    .design-cta { min-height:27px; padding:3px 8px; }
  }
  @media (max-width:480px) {
    header { grid-template-columns:1fr; }
    .brand-block { justify-content:space-between; }
    .top-actions { grid-column:1; grid-row:2; justify-content:space-between; }
    .wrap { grid-row:3; }
  }
</style>