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

/* ---- Theme palettes (match the KillerPDF app) ---- */
html[data-theme="dark"]     { --bg:#333333; --surface:#2b2b2b; --panel:#3a3a3a; --sidebar:#1c1c1c; --canvas:#3a3a3a; --border:#2e2e2e; --pane-border:#2e2e2e; --tab-edge:var(--btn); --accent:#1ea54c; --accent-text:#ffffff; --text:#ededed; --text2:#bcbcbc; --muted:#a2a2a2; --footer-text:#b4b4b4; --danger:#ef4444; --grain:0.26; --btn:var(--accent); --btn-text:#ffffff; --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; --tab-edge:var(--btn); --accent:#18843d; --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; --tab-edge:var(--btn); --accent:#00ff66; --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; --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; --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; --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); }
:root { --accent-dim: color-mix(in srgb, var(--accent) 16%, transparent); }

html { 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 from the app font as SVG) ---- */
.wm-logo { display: block; width: auto; }
html[data-theme="light"] .wm-logo { filter: none; }
.wm-killer { fill: currentColor; }
.wm-pdf { fill: var(--logo-pdf); stroke: var(--logo-pdf); stroke-width: 14; stroke-linejoin: round; }

/* ---- Page title kicker (sits above the wordmark on sub-pages), in the wordmark typewriter font ---- */
@font-face {
  font-family: 'TypewriterHead';
  src: url('typewriter-headers.woff2') format('woff2'),
       url('typewriter-headers.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
.page-title { display: block; text-align: center; font-family: 'TypewriterHead', 'Courier New', monospace; font-size: clamp(30px, 5.2vw, 48px); letter-spacing: 1px; color: var(--text); margin: 0 auto 2px; line-height: 1.1;
  /* white version (dark / coloured 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: wrap; min-height: 62px; padding: 9px 16px; background: var(--sidebar); }
.topbar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url('grain.png') 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: 22px; 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; }
.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; }
.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; }
.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[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 ---- */
.shell { display: grid; grid-template-columns: 1fr 268px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.content { min-width: 0; min-height: 0; overflow-y: auto; position: relative; scroll-behavior: smooth; background-image: url('grain.png'); background-repeat: repeat; background-size: 256px 256px; background-attachment: local; }
.frame-shadow { position: fixed; top: 62px; left: 0; right: 268px; bottom: 30px; pointer-events: none; z-index: 101; border: 1px solid var(--pane-border); border-left: 0; box-shadow: 0 0 20px 1px rgba(0,0,0,0.42); border-radius: 0; }

/* ---- Sidebar (the app's docked pane) ---- */
.sidebar { position: relative; height: 100%; 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') repeat fixed; background-size: 256px 256px; opacity: 1; }
.sidebar > * { position: relative; z-index: 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: 6px 16px; background: var(--sidebar); font-family: Consolas, monospace; font-size: 11.5px; color: var(--footer-text); position: relative; flex: 0 0 auto; z-index: 10; }
.statusbar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url('grain.png') repeat fixed; background-size: 256px 256px; opacity: 1; }
.statusbar > * { position: relative; z-index: 1; }
.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; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); }

/* Opaque track + thumb so the pane grain can't show through the scrollbar */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 60%, var(--bg)) var(--bg); }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 55%, var(--bg)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

@media (max-width: 900px) {
  html, body { height: auto; overflow: visible; display: block; }
  .shell { grid-template-columns: 1fr; overflow: visible; }
  .content { overflow: visible; min-height: 0; }
  .sidebar { position: static; height: auto; overflow: visible; border-left: 0; border-top: 1px solid var(--border); }
  .topbar { gap: 10px; }
  .frame-shadow { display: none; }
}

/* ============ Header nav + appearance flyout (shared) ============ */
.tb-nav { display: inline-flex; align-items: center; gap: 1px; }
.tb-nav a { color: var(--text2); font-size: 13.5px; font-weight: 600; padding: 6px 11px; border-radius: 6px; }
.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); font-size: 13px; font-weight: 700; padding: 7px 15px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.tb-dl:hover { filter: brightness(1.1); color: var(--btn-text); }
.tb-dl svg { width: 14px; height: 14px; fill: currentColor; }

/* 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') repeat; background-size: 256px 256px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1px solid var(--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 1 360px; min-width: 308px; }
.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 { 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') repeat; background-size: 256px 256px; border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; margin-bottom: 18px; }
.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(210px, 1fr)); gap: 10px; margin-top: 4px; }
.contact-grid a { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); 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 .sub { display: block; font-size: 11px; font-weight: 400; color: var(--muted); font-family: Consolas, monospace; }

/* ============ Technical page ============ */
.tech-sec { margin-bottom: 30px; scroll-margin-top: 74px; }
.tech-sec h2 { font-size: 21px; font-weight: 700; margin: 6px 0 12px; color: var(--text); }
.tech-sec h3 { font-family: Consolas, monospace; font-size: 14px; font-weight: 700; color: var(--accent); margin: 16px 0 7px; }
.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(--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); }
.spec-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13px; }
.spec-table th { text-align: left; background: var(--accent); color: var(--accent-text); padding: 7px 12px; font-weight: 700; }
.spec-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); color: var(--muted); }
.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; }

@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: 62px; 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(--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') 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 .lbl { font-family: Consolas, monospace; font-size: 12px; color: var(--muted); letter-spacing: 0.5px; }
.accent-bar .pill .acc { width: 19px; height: 19px; }
.accent-bar .pill .x { cursor: pointer; color: var(--muted); font-size: 17px; line-height: 1; background: none; border: 0; padding: 0 2px; margin-left: 3px; }
.accent-bar .pill .x:hover { color: var(--text); }

/* Light theme: darken inline text links so they read clearly (not the styled buttons/cards) */
html[data-theme="light"] .content p a, html[data-theme="light"] .content li a { color: var(--btn); }
html[data-theme="light"] .content p a:hover, html[data-theme="light"] .content li a:hover { filter: brightness(1.12); }

/* More depth on the section/category headers */
.about-card h2, .tech-sec h2 { text-shadow: 0 1px 1px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.32); }
.tech-sec h3 { text-shadow: 0 1px 2px rgba(0,0,0,0.4); }