/* KillerShot site - shared chrome (used by index.html, about.html, technical.html) */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- Theme palettes (match the KillerShot app) ---- */
html[data-theme="dark"]     { --bg:#333333; --surface:#2b2b2b; --panel:#3a3a3a; --sidebar:#1c1c1c; --canvas:#3a3a3a; --border:#2e2e2e; --pane-border:#2e2e2e; --dragline:#363636; --tab-edge:var(--sel,var(--btn)); --accent:#1fb8a8; --accent-text:#1e1f22; --text:#ededed; --text2:#bcbcbc; --muted:#a2a2a2; --footer-text:#b4b4b4; --danger:#ef4444; --grain:0.26; --btn:var(--accent); --btn-text:#1e1f22; --logo-pdf:var(--accent); --chrome:#222222; --modal:#1e1e1e; --fade:rgba(0,0,0,0.55); }
html[data-theme="light"]    { --bg:#b8b8b8; --surface:#e8e8e8; --panel:#f3f3f3; --sidebar:#dcdcdc; --canvas:#b8b8b8; --border:#c0c0c0; --pane-border:#a8a8a8; --dragline:#a0a0a0; --tab-edge:var(--sel,var(--btn)); --accent:#0d827e; --accent-text:#ffffff; --text:#1a1a1a; --text2:#555555; --muted:#666666; --footer-text:#555555; --danger:#dc2626; --grain:0.28; --btn:var(--accent); --btn-text:#ffffff; --logo-pdf:var(--accent); --chrome:#dcdcdc; --modal:#ffffff; --fade:rgba(0,0,0,0.22); }
html[data-theme="hc"]       { --bg:#0d0d0d; --surface:#0a0a0a; --panel:#141414; --sidebar:#000000; --canvas:#0d0d0d; --border:#787878; --pane-border:#333333; --dragline:#373737; --tab-edge:var(--sel,var(--btn)); --accent:#0affe7; --accent-text:#000000; --text:#ffffff; --text2:#cccccc; --muted:#cccccc; --footer-text:#aaaaaa; --danger:#ff4444; --grain:0.08; --btn:var(--accent); --btn-text:#000000; --logo-pdf:var(--accent); --chrome:#000000; --modal:#000000; --fade:rgba(0,0,0,0.75); }
html[data-theme="blood"]    { --bg:#4a1f20; --surface:#321416; --panel:#321416; --sidebar:#1e0a0b; --canvas:#4a1f20; --border:#361619; --pane-border:#3a1a1d; --dragline:#3e1e21; --tab-edge:rgba(255,255,255,0.27); --accent:#ffffff; --accent-text:#450002; --text:#fffde8; --text2:#b09e9c; --muted:#f8c99e; --footer-text:#b09e9c; --danger:#ff6666; --grain:0.32; --btn:#1ea54c; --btn-text:#ffffff; --logo-pdf:#1ea54c; --chrome:#240c0d; --modal:#1e0a0b; --fade:rgba(0,0,0,0.6); }
html[data-theme="greed"]    { --bg:#0a5234; --surface:#003824; --panel:#003824; --sidebar:#001e13; --canvas:#0a5234; --border:#07371f; --pane-border:#07371f; --dragline:#0b3b23; --tab-edge:rgba(255,255,255,0.27); --accent:#ffffff; --accent-text:#002819; --text:#fffde8; --text2:#a6a99a; --muted:#e0d49a; --footer-text:#a6a99a; --danger:#ff6666; --grain:0.26; --btn:#e6b800; --btn-text:#1a1a1a; --logo-pdf:#1ea54c; --chrome:#002115; --modal:#001e13; --fade:rgba(0,0,0,0.6); }
html[data-theme="cyanotic"] { --bg:#0a4a6e; --surface:#002e48; --panel:#002e48; --sidebar:#001a28; --canvas:#0a4a6e; --border:#093250; --pane-border:#093250; --dragline:#0d3654; --tab-edge:rgba(255,255,255,0.27); --accent:#ffffff; --accent-text:#001e2e; --text:#fffde8; --text2:#9ba3ac; --muted:#e0d49a; --footer-text:#9ba3ac; --danger:#ff6666; --grain:0.26; --btn:#1ea54c; --btn-text:#ffffff; --logo-pdf:#1ea54c; --chrome:#001a28; --modal:#001624; --fade:rgba(0,0,0,0.6); }
html[data-theme="ectoplasm"] { --bg:#5e1764; --surface:#314548; --panel:#293c3f; --sidebar:#314548; --canvas:#293c3f; --border:#109fa3; --pane-border:#096366; --dragline:#096366; --tab-edge:#bd00c6; --accent:#ead900; --accent-text:#1e1f22; --text:#f4f4f0; --text2:#d7d7cf; --muted:#b4b6b1; --footer-text:#b4b6b1; --danger:#ff5a67; --grain:0.28; --btn:#ead900; --btn-text:#1e1f22; --logo-pdf:#e8962c; --chrome:#314548; --modal:#293c3f; --fade:rgba(0,0,0,0.58); }
html[data-theme="decay"]    { --bg:#3b3f46; --surface:#514e48; --panel:#403f3b; --sidebar:#514e48; --canvas:#403f3b; --border:#6b705c; --pane-border:#5c554c; --dragline:#5c554c; --tab-edge:#8a8a78; --accent:#b8aa7c; --accent-text:#202321; --text:#f2f4f3; --text2:#d8cfb5; --muted:#b5ad9e; --footer-text:#b5ad9e; --danger:#d86b68; --grain:0.3; --btn:#b8aa7c; --btn-text:#202321; --logo-pdf:#e8962c; --chrome:#514e48; --modal:#403f3b; --fade:rgba(0,0,0,0.58); }
html[data-theme="malaise"]  { --bg:#563343; --surface:#3f4947; --panel:#303638; --sidebar:#3f4947; --canvas:#303638; --border:#4a5154; --pane-border:#394742; --dragline:#394742; --tab-edge:#a0ffe6; --accent:#ff6f91; --accent-text:#292c31; --text:#f2f4f3; --text2:#d8cfb5; --muted:#b6ad9e; --footer-text:#b6ad9e; --danger:#ff5b67; --grain:0.3; --btn:#ff6f91; --btn-text:#292c31; --logo-pdf:#e8962c; --chrome:#3f4947; --modal:#343b3d; --fade:rgba(0,0,0,0.58); }
html[data-theme="sepulchre"] { --bg:#25282b; --surface:#454039; --panel:#3a352f; --sidebar:#454039; --canvas:#3a352f; --border:#835a30; --pane-border:#4d3d2b; --dragline:#4d3d2b; --tab-edge:#292d2f; --accent:#4faaa8; --accent-text:#1e2424; --text:#f4f4f0; --text2:#d7d7cf; --muted:#b4b6b1; --footer-text:#b4b6b1; --danger:#dc6666; --grain:0.32; --btn:#4faaa8; --btn-text:#1e2424; --logo-pdf:#e8962c; --chrome:#454039; --modal:#3a352f; --fade:rgba(0,0,0,0.62); }
html[data-theme="delirium"] { --bg:#641d25; --surface:#3e3c50; --panel:#343344; --sidebar:#3e3c50; --canvas:#343344; --border:#8e101c; --pane-border:#5c527d; --dragline:#5c527d; --tab-edge:#cf1020; --accent:#dd8500; --accent-text:#1e1f22; --text:#f4f4f0; --text2:#d7d7cf; --muted:#b4b6b1; --footer-text:#b4b6b1; --danger:#ff5360; --grain:0.32; --btn:#dd8500; --btn-text:#1e1f22; --logo-pdf:#e8962c; --chrome:#3e3c50; --modal:#343344; --fade:rgba(0,0,0,0.62); }
html[data-theme="mourning"] { --bg:#3b3642; --surface:#34373e; --panel:#554c5d; --sidebar:#34373e; --canvas:#554c5d; --border:#756b79; --pane-border:#756b79; --dragline:#756b79; --tab-edge:#a0ffe6; --accent:#ff6f91; --accent-text:#292c31; --text:#f4f4f0; --text2:#d7d7cf; --muted:#b4b6b1; --footer-text:#b4b6b1; --danger:#ff5360; --grain:0.34; --btn:#ff6f91; --btn-text:#292c31; --logo-pdf:#e8962c; --chrome:#34373e; --modal:#554c5d; --fade:rgba(0,0,0,0.62); }
/* The app paints its signature palette on the outer window and keeps the reading pane solid. */
html[data-theme="ectoplasm"] { --bg:#293c3f; --sidebar:linear-gradient(90deg,#5e1764 0%,#25232b 100%); }
html[data-theme="decay"] { --bg:#403f3b; --sidebar:linear-gradient(90deg,#3b3f46 0%,#50564b 100%); }
html[data-theme="malaise"] { --bg:#343b3d; --sidebar:linear-gradient(90deg,#563343 0%,#365b58 100%); }
html[data-theme="sepulchre"] { --bg:#3a352f; --sidebar:linear-gradient(90deg,#25282b 0%,#2c5458 100%); }
html[data-theme="delirium"] { --bg:#343344; --sidebar:linear-gradient(90deg,#641d25 0%,#2f2853 100%); }
html[data-theme="mourning"] { --bg:#554c5d; --sidebar:#3b3642; }
/* Card surfaces mirror the app context-menu background in every web theme. */
html[data-theme="dark"] { --modal:#2b2b2b; }
html[data-theme="light"] { --modal:#ffffff; }
html[data-theme="hc"] { --panel:#000000; --modal:#050505; }
html[data-theme="blood"] { --modal:#1e0a0b; }
html[data-theme="greed"] { --modal:#001e13; }
html[data-theme="cyanotic"] { --modal:#001624; }
html[data-theme="ectoplasm"] { --modal:#383838; }
html[data-theme="decay"] { --modal:#3b3f46; }
html[data-theme="malaise"] { --modal:#262b2d; }
html[data-theme="sepulchre"] { --modal:#242729; }
html[data-theme="delirium"] { --modal:#24212b; }
html[data-theme="mourning"] { --modal:#4f413f; }
:root { --accent-dim: color-mix(in srgb, var(--accent) 16%, transparent); }
+/* Inactive tab/card edges are muted active colors; hover rules brighten to --accent. */
html[data-theme="ectoplasm"] { --tab-edge:rgba(234,217,0,.42); }
html[data-theme="sepulchre"] { --tab-edge:rgba(79,170,168,.42); }
html[data-theme="mourning"] { --tab-edge:rgba(255,111,145,.42); }
/* Delirium downloads rest orange and turn yellow when focused/hovered. */
html[data-theme="delirium"] .tb-dl:hover,
html[data-theme="delirium"] body .download-btn:hover { background:#ffad2f; color:#1e1f22; filter:none; }
html[data-theme="malaise"] .tb-dl:hover,
html[data-theme="malaise"] body .download-btn:hover { background:#ff9fba; color:#292c31; filter:none; }

html { --scroll-thumb: var(--accent); --scroll-thumb-hover: color-mix(in srgb, var(--accent) 82%, var(--text)); background: var(--bg); height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; height: 100%; overflow: hidden; display: flex; flex-direction: column; position: relative; isolation: isolate; transition: background-color 0.2s, color 0.2s; }
/* Grain: chrome bars carry their own (fixed); the document-pane grain lives on .content so it scrolls with the content. grain.png is a sparse transparent speckle (matches the app's generated texture) so it composites normally - no blend mode, no lightening. */
body > * { position: relative; z-index: 1; }
a { color: var(--accent); text-decoration: none; }
a:hover { filter: brightness(1.15); }

/* ---- Wordmark (rendered as text in the family header faces: Killer in --text, Shot in --accent) ---- */
/* Family faces, licenses in brand/. Text wordmarks pair Punktype (KtPunk, commercial license)
   for "Killer" with Lacquer (KtAccent, OFL) for the app name, as the apps do. Headings, navigation
   and labels use Killer Sans (KtKiller, OFL). Killer Sans draws small for its em, so size-adjust
   brings its line widths back to what the old typewriter face set; KtPunk is scaled so its "K"
   matches a KtKiller capital. */
@font-face {
  font-family: 'KtKiller';
  src: url('brand/KillerSans-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: block;
  size-adjust: 110%;
}
@font-face {
  font-family: 'KtPunk';
  src: url('brand/Punktype.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: block;
  size-adjust: 78.2%;
}
@font-face {
  font-family: 'KtAccent';
  src: url('brand/Lacquer-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: block;
}
/* Header font roles. Lacquer is the primary heading face (page titles) and Killer Sans the
   secondary one (card and section headings, navigation); swap a role between the two to try it. In a text wordmark "Killer" is var(--kt-font-wordmark) and the
   app name is 1.28em of var(--kt-font-accent): capitals 1.55x "Killer", no gap, no lift. */
:root {
  --kt-font-killer: 'KtKiller', 'Courier New', monospace;
  --kt-font-wordmark: 'KtPunk', 'KtKiller', 'Courier New', monospace;
  --kt-font-accent: 'KtAccent', 'KtKiller', 'Courier New', monospace;
  --kt-font-page-title: var(--kt-font-accent);   /* page kickers and big page headings */
  --kt-font-card-title: var(--kt-font-accent);   /* card and section headings */
  --kt-font-section: var(--kt-font-accent);      /* small accent subheadings and labels */
  --kt-font-ui: var(--kt-font-killer);           /* top bar navigation and the KillerMCP link */
}
.wm-logo { display: inline-block; width: auto; white-space: nowrap; line-height: 1; font-family: var(--kt-font-wordmark); font-weight: normal; letter-spacing: 1px;
  text-shadow: 0 3px 8px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5); }
.wm-logo .wmk { color: var(--text); }
.wm-logo .wms { color: var(--accent); font-size: 1.3em; font-weight: bold;
  /* bevel: light top-left rim + dark bottom-right rim, over the shared drop shadow */
  text-shadow: -1px -1px 0 rgba(255,255,255,0.5), 1px 1px 0 rgba(0,0,0,0.4), 2px 2px 0 rgba(0,0,0,0.22), 0 3px 8px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5); }
html[data-theme="light"] .wm-logo { text-shadow: none; }
html[data-theme="light"] .wm-logo .wms { text-shadow: -1px -1px 0 rgba(255,255,255,0.6), 1px 1px 0 rgba(0,0,0,0.28); }
/* Blood / Greed / Cyanotic use a white accent; keep the brand teal on the "Shot" wordmark */
html[data-theme="blood"] .wm-logo .wms,
html[data-theme="greed"] .wm-logo .wms,
html[data-theme="cyanotic"] .wm-logo .wms { color: #0affe7; }

/* ---- Page title kicker (sits above the wordmark on sub-pages), page-title face ---- */
.page-title { display: block; text-align: center; font-family: var(--kt-font-page-title); font-size: clamp(30px, 5.2vw, 48px); letter-spacing: 1px; color: var(--text); margin: 0 auto 2px; line-height: 1.1;
  /* white version (dark / colored themes): heavy drop shadow */
  text-shadow: 0 3px 8px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.6); }
/* black version (light theme): no heavy shadow */
html[data-theme="light"] .page-title { text-shadow: none; }

/* ---- Top bar (single app-style chrome bar) ---- */
.topbar { position: relative; flex: 0 0 auto; z-index: 100; display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; padding: 8px 16px 0; background: var(--sidebar); }
.topbar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url('grain.png?v=2') repeat fixed; background-size: 256px 256px; opacity: 1; }
.topbar > * { position: relative; z-index: 1; }
.tb-home { display: inline-flex; align-items: center; gap: 9px; color: var(--text); }
.tb-home:hover { filter: none; }
.tb-icon { width: 36px; height: 36px; border-radius: 9px; display: block; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55)); }
.tb-wm { height: 26px; transform: translateY(4px); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.tb-sub { font-size: 12px; color: var(--muted); font-family: Consolas, monospace; }
.tb-spacer { flex: 1; }
.help-link { color: var(--accent); font-size: 13px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 6px; padding: 4px 12px; }
.help-link:hover { background: var(--btn); color: var(--btn-text); }
.tgrp { display: inline-flex; align-items: center; gap: 7px; }
.theme-toggle { display: none; width: 27px; height: 27px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 7px; background: var(--modal); padding: 0; cursor: pointer; }
.theme-toggle:hover, .theme-toggle[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-toggle .swatch { pointer-events: none; }
.tlabel { font-size: 11px; color: var(--muted); font-family: Consolas, monospace; }
.swatch { width: 19px; height: 19px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,0.22); padding: 0; position: relative; transition: transform 0.12s, border-color 0.12s; }
.swatch:hover { transform: scale(1.15); }
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.swatch::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--sw-accent); }
.sw-dark { background:#2b2b2b; --sw-accent:#1ea54c; } .sw-light { background:#e8e8e8; --sw-accent:#18843d; }
.sw-hc { background:#000; --sw-accent:#00ff66; } .sw-blood { background:#73000e; --sw-accent:#f8c99e; }
.sw-greed { background:#004d32; --sw-accent:#e0d49a; } .sw-cyanotic { background:#003450; --sw-accent:#e0d49a; }
.sw-ectoplasm { background:#5e1764; --sw-accent:#ead900; }
.sw-decay { background:#403f3b; --sw-accent:#b8aa7c; }
.sw-malaise { background:#563343; --sw-accent:#ff6f91; }
.sw-sepulchre { background:#3a352f; --sw-accent:#4faaa8; }
.sw-delirium { background:#641d25; --sw-accent:#dd8500; }
.sw-mourning { background:#554c5d; --sw-accent:#ff6f91; }
.acc { width: 17px; height: 17px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,0.25); padding: 0; transition: transform 0.12s; }
html[data-theme="light"] .acc[data-accent="yellow"] { background: #EAD900 !important; color: #EAD900 !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)); }
.acc:hover { transform: scale(1.18); }
.acc[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px currentColor; }
.accent-switch[hidden] { display: inline-flex; visibility: hidden; }
.topbar .accent-switch { order: 1; }
.topbar .tgrp { order: 2; }
.topbar .lang-switch { order: 3; }
.tb-right { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }
.icon-link { color: var(--muted); display: inline-flex; }
.icon-link:hover { color: var(--accent); }
.icon-link svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.lang-switch { position: relative; display: inline-flex; align-items: center; }
.lang-toggle { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.3); background: none; padding: 0; cursor: pointer; line-height: 0; }
.lang-toggle svg { width: 100%; height: 100%; display: block; }
.lang-toggle:hover { border-color: var(--accent); }
.lang-menu { position: absolute; top: 140%; right: 0; min-width: 168px; background: var(--modal); border: 1px solid var(--border); border-radius: 8px; padding: 5px; box-shadow: 0 12px 28px rgba(0,0,0,0.5); z-index: 110; }
.lang-menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url('grain.png?v=2') repeat; background-size: 256px 256px; opacity: 1; border-radius: inherit; }
.lang-menu > * { position: relative; z-index: 1; }
.lang-menu[hidden] { display: none; }
.lang-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: 13px; padding: 7px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.lang-item:hover { background: var(--accent-dim); }
.lang-item[aria-pressed="true"] { color: var(--accent); font-weight: 600; }

/* ---- App body: content + right-hand sidebar ---- */
/* Chrome-toned shell: the gutter around the rounded content pane reads as grained chrome, like the app windows and killertools.net */
.shell { display: grid; grid-template-columns: 1fr 300px; flex: 1 1 auto; min-height: 0; overflow: visible; position: relative; z-index: 2; background: var(--sidebar); }
@media (min-width: 901px) {
  body.compact-sidebar .shell { grid-template-columns: minmax(0, 1fr) 150px; }
  body.compact-sidebar.sidebar-first .shell { grid-template-columns: 150px minmax(0, 1fr); }
}
@media (min-width: 1101px) {
  body.compact-sidebar.sidebar-first .sidebar,
  body.compact-sidebar.mcp-page .sidebar { grid-column: 1; grid-row: 1; }
  body.compact-sidebar.sidebar-first .content,
  body.compact-sidebar.mcp-page .content { grid-column: 2; grid-row: 1; }
  body.compact-sidebar.mcp-page .shell { grid-template-columns: 150px minmax(0, 1fr); }
}
body.compact-sidebar .outline { padding: 2px 0; }
body.compact-sidebar .outline a { padding: 5px 6px 5px 8px; overflow-wrap: anywhere; }
body.compact-sidebar .outline a.sub { padding-left: 14px; }
body.compact-sidebar .outline a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); filter: none; }
@media (max-width: 1100px) { body.compact-sidebar.mcp-page .shell { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1101px) { .shell:has(.mcp-page-grid) { grid-template-columns: minmax(0, 1fr) 150px; } }
.shell:has(.mcp-page-grid) .outline { padding: 2px 0; }
.shell:has(.mcp-page-grid) .outline a { padding: 5px 6px 5px 8px; overflow-wrap: anywhere; }
.mcp-limit-list { display: grid; gap: 6px; margin: 8px 0; padding-left: 22px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.mcp-limit-list li::marker { color: var(--accent); }
.shell:has(.mcp-page-grid) .outline a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); filter: none; }
.shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url('grain.png?v=2') repeat fixed; background-size: 256px 256px; opacity: 1; }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Inset rounded pane (killertools.net MenuLayout treatment): 8px chrome gutter on the window edges, 2px hugging the sidebar, none above the statusbar.
   The pane carries its own frame line + outward shadow (z 6: above the sidebar and the statusbar chrome, below the statusbar text at z 7),
   and clips the inner scroller so the scrollbar lives INSIDE the rounded pane. */
.content { min-width: 0; min-height: 0; overflow: hidden; position: relative; z-index: 6; margin: 8px 2px 0 8px; border: 1px solid var(--pane-border); border-radius: 14px; box-shadow: 0 6px 14px 0 rgba(0,0,0,0.5); background-color: var(--bg); background-image: url('grain.png?v=2'); background-repeat: repeat; background-size: 256px 256px; background-attachment: fixed; animation: pageFadeIn .28s ease both; }
.content-scroll { height: 100%; overflow-y: auto; scroll-behavior: smooth; }

/* ---- Sidebar (the app's docked pane) ---- */
.sidebar { position: relative; height: calc(100% - 8px); margin-top: 8px; min-height: 0; background: var(--sidebar); display: flex; flex-direction: column; z-index: 5; }
.sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url('grain.png?v=2') repeat fixed; background-size: 256px 256px; opacity: 1; }
.sidebar { background: transparent; }
.sidebar::before { background: none; }
.sb-thumbs { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; }
/* Bottom fade while the strip overflows and isn't scrolled to the last shot (toggled in JS),
   matching the app sidebar: the mask reveals the grainy sidebar behind, so grain stays intact. */
.sb-thumbs.faded { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
.sb-empty { margin: auto; text-align: center; color: var(--muted); font-family: var(--kt-font-section); font-size: 14px; letter-spacing: .5px; line-height: 1.5; padding: 20px; }
.sb-thumb { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel); cursor: zoom-in; box-shadow: 0 2px 6px rgba(0,0,0,0.45); transition: border-color .15s ease, transform .15s ease; }
.sb-thumb:hover { border-color: var(--accent); transform: translateY(-1px); }
.sb-thumb img { display: block; width: 100%; height: auto; }
/* :not(.sb-fade) - .sb-fade sets its own position:absolute (it must stay out of flow to
   overlay instead of taking up flex space); this reset must not clobber that. Equal
   specificity + later source order was winning and dropping the fade divs back into
   normal flow, which pushed real content up. */
.sidebar > *:not(.sb-fade) { position: relative; z-index: 1; }
/* Grain fade overlays pinned to the sidebar top/bottom (not a mask on the scroller, so the
   scrollbar is never faded). Inset 8px from the right to clear the scrollbar. JS toggles .on:
   top only once scrolled down, bottom only while more content remains below. Shared by any
   scrollable sidebar content (screenshot strip on the front page, the outline nav elsewhere). */
.sb-fade { position: absolute; left: 0; right: 8px; height: 40px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.12s ease;
  background: var(--sidebar); background-attachment: fixed; background-size: 100vw 100vh; }
.sb-fade-top { top: 0; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.sb-fade-bottom { bottom: 0; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.sb-fade.on { opacity: 1; }
.sb-tabs { display: flex; font-size: 11px; font-family: Consolas, monospace; letter-spacing: 0.5px; color: var(--muted); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sb-tabs span { flex: 1; text-align: center; padding: 9px 0; }
.sb-tabs .on { color: var(--accent); border-bottom: 2px solid var(--tab-edge); }

/* ---- Status bar footer (matches the app) ---- */
.statusbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 16px; background: var(--sidebar); font-family: Consolas, monospace; font-size: 11.5px; color: var(--footer-text); position: relative; flex: 0 0 auto; }
.statusbar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url('grain.png?v=2') repeat fixed; background-size: 256px 256px; opacity: 1; }
/* Resize-grip dots in the window corner, matching the app chrome (grain owns ::after) */
.statusbar::before { content: ""; position: absolute; right: 5px; bottom: 5px; width: 2px; height: 2px; background: var(--footer-text); box-shadow: -4px 0 var(--footer-text), -8px 0 var(--footer-text), 0 -4px var(--footer-text), -4px -4px var(--footer-text), 0 -8px var(--footer-text); opacity: .8; pointer-events: none; z-index: 7; }
.statusbar > * { position: relative; z-index: 7; }
/* Keep the right-side text clear of the corner grip (family standard spacing) */
.statusbar .right { padding-right: 10px; }
.statusbar a { color: var(--footer-text); }
.statusbar a:hover { color: var(--accent); }
.statusbar .right b { color: var(--logo-pdf); font-weight: 600; }
#verEgg { cursor: pointer; }

/* ---- Easter egg (click the version) ---- */
.drip { position: fixed; top: -60px; width: 6px; border-radius: 0 0 3px 3px; background: #df1d1d; z-index: 300; pointer-events: none; }
@keyframes dripfall { to { transform: translateY(112vh); } }
.egg-toast { position: fixed; left: 50%; bottom: 42px; transform: translateX(-50%); background: var(--modal); color: var(--text); border: 1px solid var(--accent); border-radius: 8px; padding: 11px 20px; font-size: 13px; box-shadow: 0 12px 28px rgba(0,0,0,0.5); z-index: 301; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.egg-toast.show { opacity: 1; }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.lightbox.show { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 112px); border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); transform: scale(.96); transition: transform .2s ease; }
.lightbox.show img { transform: scale(1); }
.lightbox figcaption { max-width: min(1100px, 100%); color: #f2f2f2; font-size: 13px; line-height: 1.45; text-align: center; text-shadow: 0 1px 3px #000; }

/* Slim scrollbars: transparent track (no opaque band), no arrow buttons, thumb flat to the ends.
   IMPORTANT: the standard scrollbar-width/scrollbar-color props are scoped to browsers that do
   NOT support ::-webkit-scrollbar (i.e. Firefox). If they're declared globally, their mere
   presence makes Chrome/Edge IGNORE the ::-webkit-scrollbar rules below - which is what brought
   back the opaque track and the arrow buttons on the content area. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
  html,
  body,
  .content-scroll,
  .sb-thumbs,
  .outline { scrollbar-color: var(--accent) transparent; }
}
/* Keep every scrollbar-width/scrollbar-color declaration inside the @supports block above.
   Anything outside it brings the arrow buttons back in Chrome/Edge. */
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--accent) !important; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover) !important; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
/* Let the continuous shell chrome show through the sidebar scrollbar track. Repainting
   the sidebar here restarts gradient themes inside the narrow track. */
.sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track-piece,
.sidebar ::-webkit-scrollbar-track,
.sidebar ::-webkit-scrollbar-track-piece { background: transparent; }
.content-scroll::-webkit-scrollbar-track,
.content-scroll::-webkit-scrollbar-track-piece,
.sb-thumbs::-webkit-scrollbar-track,
.sb-thumbs::-webkit-scrollbar-track-piece,
.outline::-webkit-scrollbar-track,
.outline::-webkit-scrollbar-track-piece { background: transparent !important; }

@media (max-width: 1320px) {
  .topbar { flex-wrap: nowrap; padding-bottom: 8px; }
  .theme-toggle { display: inline-flex; flex: 0 0 auto; }
  .topbar .tgrp { display: none; position: absolute; top: calc(100% + 7px); right: 12px; z-index: 120; width: 170px; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--modal) url('grain.png?v=2') repeat; background-size: 256px 256px; box-shadow: 0 10px 28px rgba(0,0,0,0.48); }
  .topbar .tgrp.open { display: flex; }
}

@media (max-width: 900px) {
  html, body { height: auto; overflow: visible; display: block; }
  .shell { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .content { overflow: visible; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .content-scroll { height: auto; overflow: visible; }
  .sidebar { position: static; height: auto; min-width: 0; overflow: hidden; border-left: 0; border-top: 1px solid var(--border); }
  .topbar { gap: 10px; padding-bottom: 8px; } /* no pane gutter below 900px, so the bar keeps its own bottom air */
}

/* ---- Phones: reflow the app-chrome topbar into tidy rows + stack the statusbar ---- */
@media (max-width: 560px) {
  .topbar { max-width: 100vw; }
  .tb-home .tb-wm { display: none; }
  .hero .hero-lockup { flex-wrap: nowrap; gap: 8px; max-width: 100%; }
  .hero .hero-icon { width: min(30vw, 110px); height: auto; }
  .hero .hero-lockup .wm-logo { width: min(62vw, 260px); height: auto; max-width: calc(100vw - 150px); }
  body .mcp-brand { gap: 6px; max-width: 100%; }
  body .mcp-brand .mcp-brand-wordmark { width: min(50vw, 200px); }
  body .mcp-brand .mcp-suffix { font-size: clamp(22px, 7vw, 28px); }
  .topbar { min-height: 0; padding: 8px 12px; gap: 8px 9px; justify-content: center; flex-wrap: wrap; }
  .tb-icon { width: 30px; height: 30px; }
  .tb-wm { height: 21px; }
  .tb-spacer { display: none; }
  /* Row 1: home logo on the left, download button pushed to the right */
  .tb-dl { margin-left: auto; padding: 7px 13px; font-size: 12px; }
  .topbar .tb-store { display: none; }
  /* Row 2: section nav on its own full-width centered line */
  .topbar .tb-nav { order: 1; flex-basis: 100%; justify-content: center; gap: 2px; padding-top: 7px; border-top: 1px solid var(--border); }
  .tb-nav a { padding: 6px 10px; font-size: 13.5px; }
  /* Row 3: compact theme, accent, and language controls */
  .topbar .theme-toggle { order: 2; }
  .topbar .accent-switch { order: 3; }
  .topbar .lang-switch { order: 4; }
  /* Footer: stack the two status lines and center them */
  .statusbar { flex-direction: column; gap: 4px; justify-content: center; text-align: center; padding: 9px 12px; }
}

/* ============ Header nav + appearance flyout (shared) ============ */
.tb-nav { display: inline-flex; align-items: center; gap: 1px; }
.tb-nav a { font-family: var(--kt-font-ui); color: var(--text2); font-size: 18px; font-weight: normal; letter-spacing: .3px; line-height: 1.2; padding: 6px 11px; border-radius: 6px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
html[data-theme="light"] .tb-nav a { text-shadow: none; }
.tb-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); filter: none; }
.tb-nav a.on { color: var(--accent); }
/* Header download button */
.tb-dl { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; background: var(--btn); color: var(--btn-text); min-height: 35px; font-family: var(--kt-font-ui); font-size: 19px; font-weight: normal; line-height: 1; white-space: nowrap; padding: 0 14px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: filter 0.15s, transform 0.1s, box-shadow 0.15s; }
.tb-dl:hover { filter: brightness(1.1); color: var(--btn-text); transform: translateY(-1px); box-shadow: 0 7px 16px rgba(0,0,0,0.4); }
.tb-dl:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.tb-dl svg { width: 18px; height: 18px; fill: currentColor; }

/* Shared KillerMCP topbar link */
.tb-mcp-link, .tb-store { display: inline-flex; align-items: center; gap: 7px; min-height: 35px; padding: 0 12px 0 8px; border: 1px solid var(--accent); border-radius: 6px; background: transparent; color: var(--text); font-family: var(--kt-font-ui); font-size: 19px; line-height: 1; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,0.25); transition: transform 0.12s, box-shadow 0.15s, border-color 0.12s; }
.tb-mcp-link:hover, .tb-store:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 72%, var(--text)); transform: translateY(-1px); box-shadow: 0 7px 14px rgba(0,0,0,0.4); filter: none; }
.tb-mcp-link.on { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 3px 8px rgba(0,0,0,0.25); }
.tb-mcp-link img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.tb-store svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
.tb-mcp-wordmark { display: inline-flex; align-items: baseline; }
.tb-mcp-wordmark > span:first-child { font-family: var(--kt-font-wordmark); }
.tb-mcp-accent { position: relative; top: 0; color: var(--accent); font-family: var(--kt-font-accent); font-size: 1.28em; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
html[data-theme="light"] .tb-mcp-accent { text-shadow: none; }
/* KillerMCP named inside a heading: same 1.55x rule as every wordmark */
.killermcp-wordmark { white-space: nowrap; font-family: var(--kt-font-wordmark); }
.killermcp-accent { position: relative; top: 0; font-family: var(--kt-font-accent); font-size: 1.28em; line-height: 1; }

/* Accent flyout: one dot in the header opens a small popup of accents */
.acc-fly { position: relative; display: inline-flex; align-items: center; }
.acc-fly[hidden] { display: inline-flex; visibility: hidden; }
.acc-toggle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); background: var(--accent); cursor: pointer; padding: 0; transition: transform 0.12s, border-color 0.12s; }
.acc-toggle:hover { transform: scale(1.12); border-color: var(--accent); }
.acc-pop { position: absolute; top: 152%; right: 0; background: var(--modal); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; box-shadow: 0 12px 28px rgba(0,0,0,0.5); z-index: 110; display: flex; gap: 9px; align-items: center; }
.acc-pop[hidden] { display: none; }
.acc-pop .acc-pop-label { font-size: 11px; font-family: Consolas, monospace; color: var(--muted); margin-right: 1px; }

/* ============ Landing hero info block (replaces the terminal) ============ */
.hero-info { background: color-mix(in srgb, var(--modal) 80%, transparent) url('grain.png?v=2') repeat; background-size: 256px 256px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1px solid var(--pane-border); border-left: 2px solid var(--tab-edge); border-right: 2px solid var(--tab-edge); border-radius: 8px; box-shadow: 0 14px 32px rgba(0,0,0,0.4); padding: 15px 14px; font-family: Consolas, monospace; font-size: 13px; line-height: 1.9; flex: 0 0 auto; width: max-content; max-width: 100%; transition: transform 0.12s, box-shadow 0.15s, border-color 0.12s; }
.hero-info:hover { border-left-color: var(--accent); border-right-color: var(--accent); }
.hero-info:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0,0,0,0.5); border-top-color: var(--dragline); border-bottom-color: var(--dragline); }
.hero-info .row { display: flex; gap: 8px; }
.hero-info .k { color: var(--accent); min-width: 56px; }
.hero-info .v { color: var(--text); }
.hero-info .hash { color: var(--muted); white-space: nowrap; font-size: 11.5px; letter-spacing: -0.2px; }
.hero-info .note { width: 0; min-width: 100%; margin-top: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ============ About page ============ */
.about-card { background: var(--modal) url('grain.png?v=2') repeat; background-size: 256px 256px; border: 1px solid var(--pane-border); border-radius: 10px; padding: 22px 24px; margin-bottom: 18px; }
.about-card, .hero-info, .feature-card { border-top: 2px solid var(--sel, var(--accent)); }
.about-card h2 { font-size: 19px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.about-card p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin-bottom: 11px; }
.about-card p:last-child { margin-bottom: 0; }
.about-card b { color: var(--text); }
.about-card a { color: var(--accent); font-weight: 600; }
.about-quote { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 4px 0 14px; color: var(--text2); font-style: italic; font-size: 15px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; margin-top: 4px; }
.contact-grid a { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--dragline); border-radius: 8px; padding: 11px 14px; color: var(--text); font-size: 13.5px; font-weight: 600; transition: border-color 0.15s, transform 0.1s; }
.contact-grid a:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-2px); filter: none; }
.contact-grid svg { width: 18px; height: 18px; fill: var(--accent); flex-shrink: 0; }
.contact-grid a > span { min-width: 0; }
.contact-grid .sub { display: block; font-size: 11px; font-weight: 400; color: var(--muted); font-family: Consolas, monospace; overflow-wrap: break-word; }

/* ============ Technical page ============ */
.tech-sec { margin-bottom: 30px; scroll-margin-top: 74px; }
/* Universal content-header style: card-title face across all pages */
.tech-sec h2, .about-card h2 { font-family: var(--kt-font-card-title); font-size: 24px; font-weight: normal; letter-spacing: .5px; margin: 6px 0 12px; color: var(--text); }
.tech-sec h2, .about-card h2, .features h2 { text-shadow: 0 1px 1px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.32); }
html[data-theme="light"] .tech-sec h2, html[data-theme="light"] .about-card h2, html[data-theme="light"] .features h2 { text-shadow: none; }
.tech-sec h3 { font-family: var(--kt-font-section); font-size: 15px; font-weight: normal; letter-spacing: .5px; color: var(--accent); margin: 16px 0 7px;
  text-shadow: 0 2px 5px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5); }
html[data-theme="light"] .tech-sec h3 { text-shadow: none; }
.tech-sec p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 11px; }
.tech-sec b { color: var(--text); }
.tech-sec a { color: var(--accent); font-weight: 600; }
.codeblock { background: var(--panel); border: 1px solid var(--pane-border); border-left: 2px solid var(--accent); border-radius: 7px; padding: 13px 16px; margin: 10px 0 14px; font-family: Consolas, monospace; font-size: 12.5px; line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-x: auto; }
.codeblock .cm { color: var(--muted); }
.cli-demo { background: #111; border: 1px solid var(--pane-border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 16px 18px; margin: 12px 0 18px; font: 13px/1.9 Consolas, monospace; color: #e8e8e8; white-space: pre-wrap; overflow-x: auto; box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.18); }
.cli-demo .prompt, .codeblock .prompt { color: var(--accent); }
.cli-demo .prompt { user-select: none; }
.cli-demo .arg, .codeblock .arg { color: #b9dcae; }
.cli-table td:first-child { white-space: nowrap; }
.exit-table { max-width: 720px; }
.cli-feature { border-left: 2px solid var(--accent); }
.feature-card code { color: var(--accent); font-family: Consolas, monospace; font-size: .92em; }
.feature-card a { color: var(--accent); font-weight: 600; }
.diagram { margin: 20px 0 6px; padding: 14px 16px; border: 1px solid var(--pane-border); border-radius: 10px; background: var(--modal); }
/* Technical cards match the app's textured context-menu surface. */
.codeblock, .cli-demo, .diagram { background: var(--modal) url('grain.png?v=2') repeat; background-size: 256px 256px; }
html:not([data-theme="light"]) .codeblock { background-color: color-mix(in srgb, var(--modal) 65%, #000); border-color: color-mix(in srgb, var(--text) 28%, var(--modal)); border-left-color: var(--accent); }
.diagram svg { width: 100%; height: auto; display: block; cursor: zoom-in; }
.diagram figcaption { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-top: 10px; }
.diagram .zoom-hint { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
/* Click-to-enlarge overlay for the flowcharts (tap the diagram, or its enlarged copy, to close) */
.dlightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--fade); cursor: zoom-out; }
.dlightbox[hidden] { display: none; }
.dlb-inner { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; box-shadow: 0 22px 60px rgba(0,0,0,0.5); }
.dlb-inner svg { display: block; width: min(1080px, 94vw); height: auto; max-height: 88vh; }
/* Arrow-bulleted lists, shared by the hero blurbs and the technical sections */
.blurb-list { list-style: none; margin-bottom: 11px; }
.blurb-list li { font-size: 13.5px; color: var(--muted); line-height: 1.55; padding-left: 16px; position: relative; margin-bottom: 6px; }
.blurb-list li:last-child { margin-bottom: 0; }
.blurb-list li::before { content: "\203A"; position: absolute; left: 3px; color: var(--accent); font-weight: 700; }
.blurb-list b { color: var(--text); }
.spec-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13px; background: var(--bg); }
.spec-table th { text-align: left; background: var(--accent); color: var(--accent-text); padding: 7px 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.spec-table td { padding: 7px 12px; border-bottom: 1px solid var(--pane-border); color: var(--muted); overflow-wrap: anywhere; }
.spec-table td:first-child { color: var(--text); font-weight: 600; width: 42%; }
.spec-table tr:nth-child(even) td { background: color-mix(in srgb, var(--panel) 50%, transparent); }
/* Dark themes: the panel tint merges into the page, so use a distinctly darker stripe (like the app's bars) */
html[data-theme="dark"] .spec-table tr:nth-child(even) td { background: #262626; }
html[data-theme="hc"]   .spec-table tr:nth-child(even) td { background: #050505; }
/* RGB themes (accent is white): a full-white header bar is too much, so invert to a dark chrome fill with light text. */
html[data-theme="blood"] .spec-table th,
html[data-theme="greed"] .spec-table th,
html[data-theme="cyanotic"] .spec-table th { background: var(--chrome); color: var(--text); }

@media (max-width: 900px) {
  .tb-nav a { padding: 6px 8px; font-size: 13px; }
  .hero-info { flex: 1 1 auto; min-width: 0; }
}

/* ---- Accent bar: drops down under the toolbar when a base theme is picked (like the app's annotate bars) ---- */
.accent-bar { position: fixed; left: 0; right: 0; top: 44px; z-index: 102; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(-12px); transition: opacity 0.18s ease, transform 0.18s ease; }
.accent-bar.show { opacity: 1; transform: translateY(0); }
.accent-bar .pill { position: relative; overflow: hidden; pointer-events: auto; display: inline-flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--pane-border); border-radius: 3px; padding: 8px 13px; box-shadow: 0 0 18px 1px rgba(0,0,0,0.45), 0 14px 30px rgba(0,0,0,0.5); }
.accent-bar .pill::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url('grain.png?v=2') repeat; background-size: 256px 256px; opacity: 1; border-radius: inherit; }
.accent-bar .pill > * { position: relative; z-index: 1; }
.accent-bar .pill .grip { width: 9px; height: 18px; background-image: radial-gradient(var(--muted) 1.1px, transparent 1.4px); background-size: 4.5px 6px; background-position: 0 1px; opacity: 0.55; cursor: grab; }
.accent-bar .pill .grip:active { cursor: grabbing; }
.accent-bar:not(.show) .pill { pointer-events: none; }
.accent-bar .pill .x { cursor: pointer; color: var(--muted); font-size: 17px; line-height: 1; background: none; border: 0; appearance: none; -webkit-appearance: none; padding: 0 2px; margin-left: 3px; }
.accent-bar .pill .x:hover { color: var(--danger); }
.accent-bar .pill .lbl { font-family: Consolas, monospace; font-size: 12px; color: var(--muted); letter-spacing: .3px; }


/* Keep shared landing and MCP chrome within phone viewports. */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap !important; }

  .topbar,
  .shell,
  .content,
  .content-scroll,
  .content-inner,
  .hero,
  .hero .hero-lockup,
  .page-hero,
  .mcp-brand {
    min-width: 0;
    max-width: 100%;
  }

  .content-inner { width: 100%; }
  .hero-info { width: max-content; max-width: 100%; }
  .mcp-page-grid,
  .mcp-side-column,
  .mcp-main-column,
  .mcp-page-grid .about-card,
  .install-state { min-width: 0; max-width: 100%; }

  .package-commands {
    grid-template-columns: 48px minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
  }

  .topbar .tb-nav {
    flex-wrap: wrap;
    max-width: 100%;
  }

  body .mcp-brand {
    gap: 6px !important;
  }

  body .mcp-brand .mcp-icon-pair {
    flex-basis: 56px !important;
    width: 56px !important;
    height: 52px !important;
  }

  body .mcp-brand .mcp-family-icon {
    width: 48px !important;
    height: 48px !important;
  }

  body .mcp-brand .mcp-app-icon {
    right: 4px !important;
    bottom: 4px !important;
    width: 26px !important;
    height: 26px !important;
  }

  body .mcp-brand .mcp-brand-wordmark {
    width: min(48vw, 180px) !important;
    max-width: calc(100vw - 150px) !important;
  }

  body .mcp-brand .mcp-suffix {
    flex: 0 0 auto;
    font-size: clamp(19px, 6vw, 25px) !important;
  }
}
/* Use the compact theme picker at every width. */
.theme-toggle { display: inline-flex; flex: 0 0 26px; width: 26px; height: 26px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; background: none; }
.theme-toggle:hover, .theme-toggle[aria-expanded="true"] { border-color: var(--accent); box-shadow: none; }
.topbar .tgrp { display: none; position: absolute; top: calc(100% + 7px); right: 12px; z-index: 120; width: 170px; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--modal) url('grain.png?v=2') repeat; background-size: 256px 256px; box-shadow: 0 10px 28px rgba(0,0,0,0.48); }
.topbar .tgrp.open { display: flex; }

/* Wrap only when the current labels and controls need another line. */
.topbar { flex-wrap: wrap; }
.topbar > * { flex-shrink: 0; }
.tb-spacer { display: none; }
.topbar .tb-nav { order: 0; flex: 0 1 auto; max-width: 100%; margin-left: auto; flex-wrap: wrap; justify-content: center; padding-top: 0; border-top: 0; }
.topbar .tb-nav a { flex-shrink: 0; }
.topbar .theme-toggle, .topbar .accent-switch, .topbar .lang-switch { order: 0; }
@media (max-width: 900px) {
  .topbar { gap: 7px; padding-left: 10px; padding-right: 10px; }
  .tb-nav { gap: 0; }
  .tb-nav a { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 560px) {
  .topbar .tb-nav { margin-left: 0; }
}

/* Keep the app badge visually level with the lowest KillerMCP drip. */
@media (max-width: 600px) {
  body .mcp-brand .mcp-icon-pair { flex-basis: 72px !important; width: 72px !important; height: 64px !important; }
  body .mcp-brand .mcp-family-icon { width: 58px !important; height: 58px !important; }
  body .mcp-brand .mcp-app-icon { right: 10px !important; bottom: 6px !important; width: 32px !important; height: 32px !important; }
}

/* Preserve the lettering size when using the taller Lacquer SVG canvas. */
/* Center visible artwork at the width of the download controls. */
body .hero { padding-top: 28px; }
body .hero .tagline { margin-top: 28px; }
body .hero .hero-lockup {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  max-width: calc(2 * 360px + 40px);
  gap: clamp(10px, 2vw, 22px);
  align-items: center;
  margin-inline: auto;
}
body .hero .hero-icon-frame,
body .hero .hero-wordmark-frame { display: block; position: relative; min-width: 0; }
body .hero .hero-icon-frame { flex: calc(589 / 593) 1 0; aspect-ratio: 589 / 593; }
body .hero .hero-wordmark-frame { flex: calc(6397.4528 / 1393.7209227272726) 1 0; aspect-ratio: 6397.4528 / 1393.7209227272726; }
body .hero .hero-lockup .hero-icon {
  position: absolute; width: calc(100% * 633 / 589); height: auto;
  max-width: none; margin: 0; left: calc(-100% * 17 / 589); top: calc(-100% * 13 / 593);
}
body .hero .hero-lockup img.wm-logo {
  position: absolute; width: calc(100% * 6477 / 6397.4528); height: auto;
  max-width: none; margin: 0; left: calc(-100% * 40 / 6397.4528); top: calc(-100% * 65.62112727272734 / 1393.7209227272726);
}
body .page-hero > img.wm-logo,
body img.help-wm {
  height: clamp(99.9023px, 17.2559vw, 165.293px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
body img.tb-wm { height: 47.2266px; margin: -1.6662px 0 -10.1730px; }  /* the canvas above and below the lettering takes no room in the bar */
body img.also-wm { height: 65.3906px; }
body .engine-lockup img.wm-logo { height: 81.7383px; }
@media (max-width: 600px) {
  body img.tb-wm { height: 38.1445px; margin: -1.3457px 0 -8.2166px; }
  body .engine-lockup img.wm-logo { height: 65.3906px; }
}
@media (max-width: 560px) {
  body .hero-info .hash { white-space: normal; overflow-wrap: anywhere; }
}

/* Shared reading sizes for help, technical pages and engine documentation. */
:root { --kt-body-size: 14px; --kt-body-leading: 1.7; --kt-heading-size: 24px; --kt-subheading-size: 15px; --kt-nav-size: 13px; }
body .engine-doc { font-size: var(--kt-body-size); line-height: var(--kt-body-leading); }
body .engine-doc .doc-lede { font-size: var(--kt-body-size); }
body .engine-doc p { margin: 0 0 11px; }
body .engine-doc h2 { font-size: var(--kt-heading-size); margin: 12px 0 8px; padding-top: 0; }
body .engine-doc h3 { font-size: var(--kt-subheading-size); margin: 16px 0 7px; }
body .engine-doc ul, body .engine-doc ol { margin: 0 0 11px; padding-left: 28px; }
body .engine-doc li { margin: 0 0 3px; }
body .engine-doc pre { margin: 10px 0 14px; padding: 13px 16px; }
body .docs-nav a { font-family: var(--kt-font-ui); font-size: var(--kt-nav-size); }
body .docs-nav .page-outline a { font-size: 12px; }
body .docs-nav-label { font-family: var(--kt-font-page-title); font-size: var(--kt-subheading-size); font-weight: normal; }
body .sb-tabs { font-family: var(--kt-font-page-title); font-size: 14px; }
body .outline a { font-family: var(--kt-font-ui); font-size: var(--kt-nav-size); }
body .outline a.sub { font-size: 12px; }


/* Light theme, Yellow accent: the accent stays the apps' yellow (#F2C500), and a thin gray
   outline (#5A5A5A) around yellow text and icons keeps it readable on the light surfaces, as in the
   apps. ks.js sets data-yellow-outline on <html> while Light and Yellow are both chosen. Text on a
   yellow fill turns dark instead and draws no outline. */
html[data-yellow-outline] { --accent-text: #24231C; --btn-text: #24231C; }
html[data-yellow-outline] a,
html[data-yellow-outline] .wm-logo .wms,
html[data-yellow-outline] .help-link,
html[data-yellow-outline] .icon-link:hover,
html[data-yellow-outline] .lang-item[aria-pressed="true"],
html[data-yellow-outline] .mcp-limit-list li::marker,
html[data-yellow-outline] .sb-tabs .on,
html[data-yellow-outline] .statusbar a:hover,
html[data-yellow-outline] .tb-nav a.on,
html[data-yellow-outline] .tb-mcp-accent,
html[data-yellow-outline] .hero-info .k,
html[data-yellow-outline] .about-card a,
html[data-yellow-outline] .tech-sec h3,
html[data-yellow-outline] .tech-sec a,
html[data-yellow-outline] .cli-demo .prompt,
html[data-yellow-outline] .codeblock .prompt,
html[data-yellow-outline] .feature-card code,
html[data-yellow-outline] .feature-card a,
html[data-yellow-outline] .blurb-list li::before,
html[data-yellow-outline] .help-cat,
html[data-yellow-outline] .acc-head:hover,
html[data-yellow-outline] .acc-item.open .acc-head,
html[data-yellow-outline] .acc-item.open .acc-head .chev,
html[data-yellow-outline] .kbd-group h4,
html[data-yellow-outline] .kbmap-layers button.on,
html[data-yellow-outline] .kb-key.mod-on,
html[data-yellow-outline] .kbmap-detail,
html[data-yellow-outline] .blurb h3,
html[data-yellow-outline] .gh-btn,
html[data-yellow-outline] .gh-btn:hover,
html[data-yellow-outline] .feature-card h3,
html[data-yellow-outline] .package-commands .manager,
html[data-yellow-outline] .connection-action,
html[data-yellow-outline] .client-link:hover,
html[data-yellow-outline] .client-link:focus-visible,
html[data-yellow-outline] .client-mark,
html[data-yellow-outline] .mcp-title-row .mcp-github:hover,
html[data-yellow-outline] .mcp-title-row .mcp-github:focus-visible,
html[data-yellow-outline] .tech-sec summary:hover,
html[data-yellow-outline] .ol-chev:hover,
html[data-yellow-outline] [style*="color:var(--accent)"],
html[data-yellow-outline] [style*="color: var(--accent)"] {
  text-shadow: -1px -1px 0 #5A5A5A, 0px -1px 0 #5A5A5A, 1px -1px 0 #5A5A5A, -1px 0px 0 #5A5A5A, 1px 0px 0 #5A5A5A, -1px 1px 0 #5A5A5A, 0px 1px 0 #5A5A5A, 1px 1px 0 #5A5A5A !important;
}
html[data-yellow-outline] .contact-grid svg {
  filter: drop-shadow(1px 0px 0 #5A5A5A) drop-shadow(-1px 0px 0 #5A5A5A) drop-shadow(0px 1px 0 #5A5A5A) drop-shadow(0px -1px 0 #5A5A5A) !important;
}
/* Text the site colors with something other than the accent keeps no outline. */
html[data-yellow-outline] body,
html[data-yellow-outline] .wm-logo .wmk,
html[data-yellow-outline] .page-title,
html[data-yellow-outline] .tb-home,
html[data-yellow-outline] .tb-sub,
html[data-yellow-outline] .tlabel,
html[data-yellow-outline][data-theme="light"] .acc[data-accent="yellow"],
html[data-yellow-outline] .icon-link,
html[data-yellow-outline] .lang-item,
html[data-yellow-outline] body.compact-sidebar .outline a:hover,
html[data-yellow-outline] .mcp-limit-list,
html[data-yellow-outline] .shell:has(.mcp-page-grid) .outline a:hover,
html[data-yellow-outline] .sb-empty,
html[data-yellow-outline] .sb-tabs,
html[data-yellow-outline] .statusbar,
html[data-yellow-outline] .statusbar a,
html[data-yellow-outline] .statusbar .right b,
html[data-yellow-outline] .egg-toast,
html[data-yellow-outline] .lightbox figcaption,
html[data-yellow-outline] .tb-nav a,
html[data-yellow-outline] .tb-nav a:hover,
html[data-yellow-outline] .tb-mcp-link,
html[data-yellow-outline] .tb-mcp-link:hover,
html[data-yellow-outline] .tb-store,
html[data-yellow-outline] .tb-store:hover,
html[data-yellow-outline] .acc-pop .acc-pop-label,
html[data-yellow-outline] .hero-info .v,
html[data-yellow-outline] .hero-info .hash,
html[data-yellow-outline] .hero-info .note,
html[data-yellow-outline] .about-card h2,
html[data-yellow-outline] .about-card p,
html[data-yellow-outline] .about-card b,
html[data-yellow-outline] .about-quote,
html[data-yellow-outline] .contact-grid a,
html[data-yellow-outline] .contact-grid .sub,
html[data-yellow-outline] .tech-sec h2,
html[data-yellow-outline] .tech-sec p,
html[data-yellow-outline] .tech-sec b,
html[data-yellow-outline] .codeblock,
html[data-yellow-outline] .codeblock .cm,
html[data-yellow-outline] .cli-demo,
html[data-yellow-outline] .cli-demo .arg,
html[data-yellow-outline] .codeblock .arg,
html[data-yellow-outline] .diagram figcaption,
html[data-yellow-outline] .diagram .zoom-hint,
html[data-yellow-outline] .blurb-list li,
html[data-yellow-outline] .blurb-list b,
html[data-yellow-outline] .spec-table td,
html[data-yellow-outline] .spec-table td:first-child,
html[data-yellow-outline] .accent-bar .pill .x,
html[data-yellow-outline] .accent-bar .pill .x:hover,
html[data-yellow-outline] .accent-bar .pill .lbl,
html[data-yellow-outline] .page-hero p,
html[data-yellow-outline] .outline a,
html[data-yellow-outline] .outline a:hover,
html[data-yellow-outline] .also-tag,
html[data-yellow-outline] .help-hero p,
html[data-yellow-outline] .help-hero .legend,
html[data-yellow-outline] .acc-head,
html[data-yellow-outline] .acc-head .kbd,
html[data-yellow-outline] .acc-head .chev,
html[data-yellow-outline] .acc-body,
html[data-yellow-outline] .acc-body b,
html[data-yellow-outline] .acc-body code,
html[data-yellow-outline] .kbd-row .k,
html[data-yellow-outline] .kbd-row .d,
html[data-yellow-outline] .kbmap-layers button,
html[data-yellow-outline] .kbmap-hint,
html[data-yellow-outline] .kb-key,
html[data-yellow-outline] .kb-key.bound .act,
html[data-yellow-outline] .hero .tagline,
html[data-yellow-outline] .blurb p,
html[data-yellow-outline] .features h2,
html[data-yellow-outline] .feature-card p,
html[data-yellow-outline] .package-commands pre,
html[data-yellow-outline] .package-commands .verb,
html[data-yellow-outline] .mcp-suffix,
html[data-yellow-outline] .mcp-example,
html[data-yellow-outline] .connection-actions code,
html[data-yellow-outline] .mcp-fact strong,
html[data-yellow-outline] .mcp-fact span,
html[data-yellow-outline] .installer-meta,
html[data-yellow-outline] .client-link,
html[data-yellow-outline] .mcp-title-row .mcp-github,
html[data-yellow-outline] .mcp-page .outline a,
html[data-yellow-outline] .mcp-page .outline a:hover,
html[data-yellow-outline] .mcp-page .outline a:focus-visible,
html[data-yellow-outline] .tech-sec summary,
html[data-yellow-outline] .ol-chev {
  text-shadow: none !important;
}
html[data-yellow-outline] .help-link:hover,
html[data-yellow-outline] .tb-dl,
html[data-yellow-outline] .tb-dl:hover,
html[data-yellow-outline] .spec-table th,
html[data-yellow-outline] .outline a.on,
html[data-yellow-outline] .download-btn,
html[data-yellow-outline] .download-btn:hover,
html[data-yellow-outline] .mcp-download,
html[data-yellow-outline] .mcp-download:hover,
html[data-yellow-outline] .mcp-download:focus-visible {
  text-shadow: none !important;
}