/* ==========================================================================
   Blueprints & Signals — Amateur Radio Toolkit & Knowledge Site
   Global stylesheet. Blueprint deep-blue ground, engineering cyan lines,
   caution-yellow annotations. Right-angle drafting geometry.

   The site's structural signature: NO top header. Navigation is a fixed
   left vertical sidebar (240px) plus a thin telemetry status bar across the
   top of the content column. Below 1000px the sidebar becomes a bottom tab
   bar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Blueprint blue */
  --blueprint-950: #04101C;
  --blueprint-900: #061829;
  --blueprint-850: #0A2540;
  --blueprint-800: #0E3252;
  --blueprint-700: #134070;
  --blueprint-600: #1A5088;
  --blueprint-500: #2563A0;
  --blueprint-400: #3A7AB8;

  /* Engineering cyan */
  --cyan-900: #1A5A78;
  --cyan-800: #2A8AB0;
  --cyan-400: #4FC3F7;
  --cyan-300: #7AD4F8;
  --cyan-200: #A8E2FA;
  --cyan-100: #D0F0FC;
  --cyan-050: #E8F8FE;

  /* Drafting paper */
  --paper-000: #FFFFFF;
  --paper-050: #F0F6FC;
  --paper-100: #E8F0F8;
  --paper-200: #C8D8E8;
  --paper-300: #A0B8D0;
  --paper-400: #7A94B0;
  --paper-500: #5A7088;

  /* Caution / danger / signal */
  --yellow-500: #FFD54F;
  --yellow-600: #F5C518;
  --yellow-800: #8A6A00;
  --red-500: #EF4444;
  --red-600: #C4342A;
  --red-900: #5C1610;
  --green-400: #4ADE80;
  --green-600: #22A050;
  --green-900: #0A3A20;

  /* Grid ruling */
  --grid-fine: rgba(79, 195, 247, .08);
  --grid-coarse: rgba(79, 195, 247, .15);

  /* Semantic */
  --ok: var(--green-400);
  --warn: var(--yellow-500);
  --danger: var(--red-500);
  --info: var(--cyan-400);

  /* Text */
  --text: #E8F0F8;
  --text-muted: #A0B8D0;
  --text-dim: #7A94B0;
  --text-faint: #5A7088;
  --text-on-dark: #E8F0F8;
  --text-on-dark-muted: #A0B8D0;

  /* Surfaces */
  --bg: var(--blueprint-850);
  --surface: var(--blueprint-800);
  --surface-2: var(--blueprint-700);
  --surface-3: var(--blueprint-600);
  --surface-deep: var(--blueprint-900);
  --surface-deeper: var(--blueprint-950);

  /* Borders */
  --border-thin: #134070;
  --border: #1A5088;
  --border-strong: #2563A0;

  /* Glow */
  --glow-cyan: 0 0 12px rgba(79, 195, 247, .4);
  --glow-cyan-soft: 0 0 20px rgba(79, 195, 247, .22);
  --glow-green: 0 0 12px rgba(74, 222, 128, .35);
  --glow-yellow: 0 0 12px rgba(255, 213, 79, .3);
  --glow-red: 0 0 12px rgba(239, 68, 68, .35);

  /* Radius — drafting right angles by default */
  --r-0: 0px;
  --r-xs: 2px;
  --r-pill: 999px;

  /* Shadows — cyan rules do most of the layering work */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .55);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .6);

  /* Motion — linear reads as more mechanical */
  --t-fast: .12s linear;
  --t-med: .25s ease;

  /* Layout */
  --container: 1100px;
  --container-narrow: 820px;
  --container-wide: 1360px;
  --gutter: 24px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --statusbar-h: 28px;
  --tabbar-h: 56px;

  /* Fonts */
  --font-head: "IBM Plex Sans Condensed", "Roboto Condensed", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, Menlo, "DejaVu Sans Mono", monospace;
}

/* --------------------------------------------------------------------------
   1b. Theme variant — the same drafting sheet with the lights down.
   Selected from the sidebar; the choice is remembered in local storage.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --bg: #04101C;
  --surface: #061829;
  --surface-2: #0A2540;
  --surface-3: #0E3252;
  --surface-deep: #020A12;
  --surface-deeper: #01060C;
  --border-thin: #0A2540;
  --border: #0E3252;
  --border-strong: #134070;
  --grid-fine: rgba(79, 195, 247, .045);
  --grid-coarse: rgba(79, 195, 247, .09);
  --text: #D0E4F5;
  --text-muted: #8AA6C0;
  --text-dim: #6B87A3;
  --text-faint: #4E6880;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .site-sidebar,
html[data-theme="dark"] .status-bar,
html[data-theme="dark"] .tab-bar,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .post-hero { background: #04101C; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .step { background: #061829; }
html[data-theme="dark"] .notice-info { background: #07202E; }
html[data-theme="dark"] .notice-safety { background: #221A0B; }
html[data-theme="dark"] .notice-warn { background: #220D0B; }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--statusbar-h) + 18px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Blueprint grid ruling across the whole drafting surface. Fine 20px cells
   with a heavier 100px master grid, exactly like a real drafting sheet. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-fine) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, var(--grid-fine) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(0deg, var(--grid-coarse) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(90deg, var(--grid-coarse) 0 1px, transparent 1px 100px);
}

img, svg, video, canvas { max-width: 100%; display: block; }
img { height: auto; }

/* Every icon emitted by the generator carries .ico so it can never stretch.
   More specific rules further down override this. */
.ico { width: 18px; height: 18px; flex: 0 0 auto; }

a { color: var(--cyan-400); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--yellow-500); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
}

::selection { background: var(--cyan-900); color: var(--cyan-050); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--cyan-800);
  color: var(--blueprint-950);
  padding: 10px 18px;
  font-weight: 700;
}
.skip-link:focus { left: 0; color: var(--blueprint-950); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--text);
  margin: 0 0 .6em;
}

h1 { font-size: clamp(1.85rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--paper-000); }
em { color: var(--yellow-500); font-style: italic; }

/* Engineering-comment eyebrow: "// SECTION" */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin: 0 0 .7em;
}
.eyebrow::before { content: "// "; color: var(--cyan-800); }

.lead {
  font-size: 1.04rem;
  color: var(--text-muted);
  max-width: 68ch;
}

.mono, code, kbd, samp { font-family: var(--font-mono); }

code {
  background: var(--surface-deep);
  border: 1px solid var(--border-thin);
  border-radius: var(--r-xs);
  padding: .1em .4em;
  font-size: .88em;
  color: var(--cyan-200);
}

/* Parameter marking: f:, λ:, SWR: — used all over this site. */
.param-badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--font-mono);
  font-size: .78rem;
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  color: var(--cyan-300);
  border-radius: var(--r-0);
  padding: 3px 8px;
  white-space: nowrap;
}
.param-badge .pk { color: var(--cyan-800); }

.param-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------------------
   4. Layout primitives — sidebar offset
   -------------------------------------------------------------------------- */
.app-main {
  position: relative;
  z-index: 2;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-main > main { flex: 1 0 auto; }

body.sidebar-collapsed .app-main { margin-left: var(--sidebar-w-collapsed); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }
.container-wide { max-width: var(--container-wide); }

.section { padding: 56px 0; }
.section-sm { padding: 36px 0; }
.section-tight { padding: 40px 0 56px; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head-link {
  font-size: .86rem;
  font-weight: 700;
  color: var(--cyan-400);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.section-head-link:hover { color: var(--yellow-500); }

.divider {
  height: 1px;
  background: var(--border-thin);
  border: 0;
  margin: 0;
}

.grid-2, .grid-3, .grid-4 { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.split-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
}
.split-wide {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
/* Grid items default to min-width:auto, which lets a wide table or image
   force the whole track open. Let them shrink instead. */
.split-wide > * { min-width: 0; }
.split-side > * { min-width: 0; }
.calc-layout > * { min-width: 0; }
.calc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

/* Drafting corner marks — 8px L-brackets in all four corners of a panel. */
.corner-mark { position: relative; }
.corner-mark::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--cyan-400), var(--cyan-400)),
    linear-gradient(var(--cyan-400), var(--cyan-400)),
    linear-gradient(var(--cyan-400), var(--cyan-400)),
    linear-gradient(var(--cyan-400), var(--cyan-400)),
    linear-gradient(var(--cyan-400), var(--cyan-400)),
    linear-gradient(var(--cyan-400), var(--cyan-400)),
    linear-gradient(var(--cyan-400), var(--cyan-400)),
    linear-gradient(var(--cyan-400), var(--cyan-400));
  background-repeat: no-repeat;
  background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  opacity: .55;
}
.corner-mark:hover::before { opacity: 1; }

/* --------------------------------------------------------------------------
   5. Chrome — left sidebar, telemetry status bar, mobile tab bar
   -------------------------------------------------------------------------- */

/* ---- 5.1 telemetry status bar ---- */
.status-bar {
  position: sticky;
  top: 0;
  z-index: 150;
  height: var(--statusbar-h);
  background: var(--blueprint-900);
  border-bottom: 1px solid var(--border-thin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--cyan-400);
  letter-spacing: .04em;
  overflow: hidden;
  white-space: nowrap;
}
.sb-cluster { display: flex; align-items: center; gap: 16px; min-width: 0; }
.status-item { display: inline-flex; align-items: center; gap: 6px; }
.status-item .sk { color: var(--cyan-900); }
.status-dim { color: var(--cyan-900); }
.status-utc { font-variant-numeric: tabular-nums; }

.status-dot {
  width: 8px; height: 8px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--green-400);
  box-shadow: var(--glow-green);
}
.status-dot.is-warn { background: var(--yellow-500); box-shadow: var(--glow-yellow); }
.status-dot.is-danger { background: var(--red-500); box-shadow: var(--glow-red); }
.status-dot.is-idle { background: var(--paper-500); box-shadow: none; }
.status-dot.is-pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---- 5.2 left vertical sidebar ---- */
.site-sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  z-index: 200;
  background: var(--blueprint-900);
  border-right: 1px solid var(--border-thin);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--t-med);
}
.site-sidebar::-webkit-scrollbar { width: 6px; }
.site-sidebar::-webkit-scrollbar-thumb { background: var(--border); }

.sb-brand {
  display: block;
  padding: 14px 16px 13px;
  border-bottom: 1px solid var(--border-thin);
  flex: 0 0 auto;
}
.sb-logo-row { display: flex; align-items: center; gap: 10px; }
.sb-logo {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--cyan-400);
  background: var(--blueprint-950);
  display: grid;
  place-items: center;
}
.sb-logo svg { width: 20px; height: 20px; }
.sb-name {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--paper-100);
  line-height: 1.15;
  letter-spacing: .01em;
}
.sb-tagline {
  display: block;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin-top: 3px;
}

.sb-nav { flex: 1 0 auto; padding: 12px 0 8px; }

.sb-group-title {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-900);
  padding: 0 16px 7px;
  margin-top: 14px;
  border-bottom: 1px solid var(--border-thin);
  margin-bottom: 6px;
}
.sb-group-title:first-child { margin-top: 0; }

.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--text-muted);
  border-left: 3px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sb-item .ico { width: 18px; height: 18px; color: var(--cyan-800); }
.sb-item:hover { background: rgba(79, 195, 247, .08); color: var(--paper-100); }
.sb-item:hover .ico { color: var(--cyan-400); }
.sb-item.is-active {
  background: rgba(79, 195, 247, .12);
  border-left-color: var(--cyan-400);
  color: var(--cyan-400);
}
.sb-item.is-active .ico { color: var(--cyan-400); }
.sb-item .sb-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--cyan-900);
}

/* tool-category accordion */
.sb-acc { border: 0; }
.sb-acc-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 36px;
  padding: 0 16px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  border-left: 3px solid transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.sb-acc-btn:hover { background: rgba(79, 195, 247, .08); color: var(--paper-100); }
.sb-acc-btn .tri { font-size: .6rem; color: var(--cyan-800); width: 9px; flex: 0 0 auto; }
.sb-acc-btn .ico { width: 15px; height: 15px; color: var(--cyan-800); }
.sb-acc-btn[aria-expanded="true"] { color: var(--cyan-300); }
.sb-acc-btn[aria-expanded="true"] .tri { color: var(--cyan-400); }
.sb-acc-panel { display: none; padding-bottom: 4px; }
.sb-acc-panel.open { display: block; }
.sb-sub-item {
  display: block;
  padding: 6px 16px 6px 42px;
  font-size: .79rem;
  color: var(--text-dim);
  border-left: 3px solid transparent;
  transition: color var(--t-fast), background var(--t-fast);
}
.sb-sub-item:hover { color: var(--cyan-400); background: rgba(79, 195, 247, .05); }
.sb-sub-item.is-active { color: var(--cyan-400); background: rgba(79, 195, 247, .1); }

.sb-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--border-thin);
  padding: 10px 0 8px;
}
.sb-seg {
  display: flex;
  gap: 0;
  margin: 0 16px 10px;
  border: 1px solid var(--border);
}
.sb-seg button {
  flex: 1;
  padding: 5px 4px;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .08em;
  color: var(--cyan-900);
  transition: background var(--t-fast), color var(--t-fast);
}
.sb-seg button:hover { color: var(--cyan-300); }
.sb-seg button.is-on { background: var(--cyan-900); color: var(--cyan-050); }
.sb-meta {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--text-faint);
  padding: 0 16px 8px;
  line-height: 1.5;
}
.sb-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 32px);
  margin: 0 16px 8px;
  height: 28px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .08em;
  color: var(--cyan-800);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.sb-collapse:hover { color: var(--cyan-300); border-color: var(--cyan-400); }

/* collapsed rail: icons only */
.site-sidebar.is-collapsed { width: var(--sidebar-w-collapsed); }
.site-sidebar.is-collapsed .sb-name,
.site-sidebar.is-collapsed .sb-tagline,
.site-sidebar.is-collapsed .sb-group-title,
.site-sidebar.is-collapsed .sb-item span,
.site-sidebar.is-collapsed .sb-item .sb-count,
.site-sidebar.is-collapsed .sb-acc-btn span,
.site-sidebar.is-collapsed .sb-acc-btn .tri,
.site-sidebar.is-collapsed .sb-acc-panel,
.site-sidebar.is-collapsed .sb-seg,
.site-sidebar.is-collapsed .sb-meta,
.site-sidebar.is-collapsed .sb-collapse span { display: none; }
.site-sidebar.is-collapsed .sb-item,
.site-sidebar.is-collapsed .sb-acc-btn { justify-content: center; padding: 0; }
.site-sidebar.is-collapsed .sb-brand { padding: 14px 0; }
.site-sidebar.is-collapsed .sb-logo-row { justify-content: center; }
.site-sidebar.is-collapsed .sb-collapse { width: 40px; margin: 0 auto 8px; }
.site-sidebar.is-collapsed .sb-group-title { margin: 8px 8px 4px; padding: 0; height: 1px; }

.sb-backdrop { display: none; }

/* ---- 5.3 mobile bottom tab bar ---- */
.tab-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--tabbar-h);
  z-index: 300;
  background: var(--blueprint-900);
  border-top: 1px solid var(--border-thin);
  grid-template-columns: repeat(5, 1fr);
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan-900);
  border-top: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab-item .ico { width: 20px; height: 20px; }
.tab-item:hover, .tab-item.is-active { color: var(--cyan-400); }
.tab-item.is-active { border-top-color: var(--cyan-400); }

.tab-drawer {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: var(--tabbar-h);
  z-index: 299;
  max-height: 68vh;
  overflow-y: auto;
  background: var(--blueprint-900);
  border-top: 1px solid var(--border);
  padding: 16px;
}
.tab-drawer.open { display: block; }
.tab-drawer h3 {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-900);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-thin);
}
.tab-drawer h3:not(:first-child) { margin-top: 20px; }
.tab-drawer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.tab-drawer a {
  display: block;
  padding: 9px 10px;
  font-size: .84rem;
  color: var(--text-muted);
  border-left: 2px solid transparent;
}
.tab-drawer a:hover, .tab-drawer a.is-active {
  color: var(--cyan-400);
  background: rgba(79, 195, 247, .08);
  border-left-color: var(--cyan-400);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-xs);
  font-family: var(--font-head);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn .ico { width: 16px; height: 16px; }

.btn-primary {
  background: var(--cyan-400);
  color: var(--blueprint-950);
  border-color: var(--cyan-400);
}
.btn-primary:hover {
  background: var(--cyan-300);
  color: var(--blueprint-950);
  box-shadow: var(--glow-cyan);
}

.btn-outline {
  background: transparent;
  color: var(--cyan-400);
  border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--cyan-400); color: var(--cyan-300); box-shadow: var(--glow-cyan-soft); }

.btn-ghost { background: var(--blueprint-900); color: var(--text-muted); border-color: var(--border-thin); }
.btn-ghost:hover { color: var(--cyan-300); border-color: var(--border-strong); }

.btn-danger { background: var(--red-600); color: var(--paper-000); border-color: var(--red-600); }
.btn-danger:hover { background: var(--red-500); color: var(--paper-000); box-shadow: var(--glow-red); }

.btn-sm { padding: 7px 12px; font-size: .78rem; }
.btn-lg { padding: 13px 26px; font-size: .95rem; }
.btn-block { width: 100%; }

/* terminal-style button */
.btn-terminal {
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
  font-size: .82rem;
  background: var(--blueprint-950);
  color: var(--cyan-300);
  border-color: var(--border);
  justify-content: flex-start;
}
.btn-terminal::before { content: ">"; color: var(--cyan-800); }
.btn-terminal:hover { color: var(--cyan-050); border-color: var(--cyan-400); box-shadow: var(--glow-cyan-soft); }
.btn-terminal:hover::after { content: "_"; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   7. Cards, tags, chips, badges
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-fast), transform var(--t-med), box-shadow var(--t-med);
}
.card:hover { border-color: var(--cyan-400); transform: translateY(-2px); box-shadow: var(--glow-cyan-soft); }

.card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--blueprint-950);
  border-bottom: 1px solid var(--border-thin);
  overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
.card:hover .card-media img { transform: scale(1.03); }

.card-body { padding: 15px 16px; display: flex; flex-direction: column; flex: 1 0 auto; }
.card-title {
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 .4em;
  line-height: 1.25;
}
.card-title a { color: var(--text); }
.card-title a:hover { color: var(--cyan-400); }
.card-text { font-size: .87rem; color: var(--text-muted); margin: 0 0 .8em; }
.card-foot {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--border-thin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--cyan-800);
}
.card-foot .cat-arrow { color: var(--cyan-400); transition: transform var(--t-fast); }
.card:hover .cat-arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Whole-card links
   The title stays the link, so its text is still the accessible name and the
   focus target. An empty pseudo-element then stretches that one link across
   the whole card, which is the area people actually try to click. None of
   these cards contains another interactive element, so the overlay has
   nothing to shadow.
   -------------------------------------------------------------------------- */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* the card is the positioning context, not the heading */
.card,
.studio-card,
.featured-post { position: relative; }

/* the overlay is invisible, so the focus ring is drawn on the card instead of
   on a line of text */
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
}

/* The featured post carries its own call to action. Lift it above the overlay
   so it keeps its hover state and its own focus ring rather than being buried
   under the title's click target. */
.featured-post .hero-actions .btn { position: relative; z-index: 2; }

/* category card — right-angle icon block, no image */
.cat-card { padding: 16px; }
.cat-icon {
  width: 44px; height: 44px;
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  margin-bottom: 13px;
}
.cat-icon .ico { width: 22px; height: 22px; color: var(--cyan-400); }
.cat-count {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--cyan-800);
}

/* tool card — blueprint line-art on deep ground */
.tool-card .card-media { background: var(--blueprint-950); }
.tool-card .card-media img { object-fit: contain; padding: 8px; }

/* schematic card — shows how two pieces of gear connect */
.schematic-card {
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  padding: 14px;
}
.schematic-card .sc-title {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan-800);
  margin-bottom: 10px;
}

/* blog card */
.blog-card .card-media { aspect-ratio: 16 / 9; }
.blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.blog-meta .dot { color: var(--cyan-900); }

/* calculator card */
.calc-card { padding: 16px; }
.calc-card .card-title { margin-bottom: .3em; }

/* studio card */
.studio-card {
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-med);
}
.studio-card:hover { border-color: var(--cyan-400); box-shadow: var(--glow-cyan-soft); transform: translateY(-2px); }
.studio-thumb {
  aspect-ratio: 16 / 10;
  background: var(--blueprint-900);
  border-bottom: 1px solid var(--border-thin);
  overflow: hidden;
  position: relative;
}
.studio-thumb img { width: 100%; height: 100%; object-fit: cover; }
.studio-card .card-body { padding: 14px 15px; }

/* tags & chips */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-0);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--cyan-900);
  color: var(--cyan-050);
  border: 1px solid transparent;
  white-space: nowrap;
}
.tag-cyan { background: rgba(79, 195, 247, .16); color: var(--cyan-200); border-color: var(--cyan-900); }
.tag-green { background: rgba(74, 222, 128, .14); color: var(--green-400); border-color: var(--green-900); }
.tag-yellow { background: rgba(255, 213, 79, .14); color: var(--yellow-500); border-color: var(--yellow-800); }
.tag-red { background: rgba(239, 68, 68, .14); color: var(--red-500); border-color: var(--red-900); }
.tag-line { background: transparent; color: var(--text-dim); border-color: var(--border); }
.tag-free { background: var(--green-900); color: var(--green-400); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-0);
  border: 1px solid var(--border);
  background: var(--blueprint-950);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { color: var(--cyan-300); border-color: var(--border-strong); }
.chip.is-active { background: var(--cyan-400); color: var(--blueprint-950); border-color: var(--cyan-400); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* 3D badge */
.badge-3d {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-0);
  background: var(--cyan-400);
  color: var(--blueprint-950);
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.badge-3d .ico { width: 11px; height: 11px; }

/* stage pill */
.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-0);
  border: 1px solid var(--border-strong);
  background: var(--blueprint-950);
  color: var(--cyan-300);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Notices & strips
   -------------------------------------------------------------------------- */
.notice {
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--surface);
  padding: 13px 15px;
  font-size: .88rem;
  margin: 0 0 18px;
  border-radius: var(--r-0);
}
.notice h4 { margin: 0 0 .3em; font-size: .92rem; }
.notice p:last-child { margin-bottom: 0; }
.notice-safety { background: #2E2410; border-color: var(--yellow-800); border-left-color: var(--yellow-500); color: var(--yellow-500); }
.notice-safety h4 { color: var(--yellow-500); }
.notice-info { background: #0E2A3A; border-color: var(--cyan-900); border-left-color: var(--cyan-400); color: var(--cyan-200); }
.notice-info h4 { color: var(--cyan-200); }
.notice-warn { background: #2E1210; border-color: #8A221A; border-left-color: var(--red-500); color: var(--red-500); }
.notice-warn h4 { color: var(--red-500); }
.notice-neutral { background: var(--surface); border-color: var(--border); border-left-color: var(--border-strong); color: var(--text-muted); }
.notice-neutral h4 { color: var(--text); }

.tip-box {
  border-left: 3px solid var(--cyan-400);
  background: var(--blueprint-950);
  padding: 13px 16px;
  margin: 0 0 18px;
  font-size: .89rem;
  color: var(--text-muted);
}
.tip-box .tip-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: var(--cyan-400);
}
.tip-box.tip-warn { border-left-color: var(--red-500); }
.tip-box.tip-warn .tip-label { color: var(--red-500); }
.tip-box.tip-note { border-left-color: var(--border-strong); }
.tip-box.tip-note .tip-label { color: var(--cyan-300); }
.tip-box.tip-ok { border-left-color: var(--green-400); }
.tip-box.tip-ok .tip-label { color: var(--green-400); }

.legal-note {
  background: var(--blueprint-950);
  border-left: 3px solid var(--cyan-400);
  padding: 13px 16px;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 18px;
}

.empty-state {
  border: 1px dashed var(--border-strong);
  background: var(--blueprint-950);
  padding: 34px 22px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state h3 { color: var(--text); }

/* RF / high-voltage hazard strip */
.safety-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #2E1210;
  border: 1px solid #8A221A;
  border-left: 3px solid var(--red-500);
  padding: 11px 16px;
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--red-500);
}
.safety-strip .ico { width: 20px; height: 20px; color: var(--red-500); flex: 0 0 auto; }
.safety-strip b { color: var(--red-500); }

/* propagation condition indicator */
.propagation-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--blueprint-950);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
}
.propagation-indicator .pi-bar { display: flex; gap: 2px; }
.propagation-indicator .pi-bar i { width: 16px; height: 8px; background: var(--blueprint-700); }
.propagation-indicator[data-cond="poor"] .pi-bar i:nth-child(1) { background: var(--red-500); }
.propagation-indicator[data-cond="fair"] .pi-bar i:nth-child(-n+2) { background: var(--yellow-500); }
.propagation-indicator[data-cond="good"] .pi-bar i:nth-child(-n+3) { background: var(--green-400); }
.propagation-indicator[data-cond="excellent"] .pi-bar i { background: var(--green-400); }
.propagation-indicator[data-cond="poor"] .pi-text { color: var(--red-500); }
.propagation-indicator[data-cond="fair"] .pi-text { color: var(--yellow-500); }
.propagation-indicator[data-cond="good"] .pi-text { color: var(--green-400); }
.propagation-indicator[data-cond="excellent"] .pi-text { color: var(--green-400); }

/* --------------------------------------------------------------------------
   9. Home modules
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 440px;
  overflow: hidden;
  background: var(--blueprint-950);
  border-bottom: 2px solid var(--cyan-400);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide > img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #061829 0%, rgba(10, 37, 64, .9) 46%, rgba(79, 195, 247, .15) 100%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-fine) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, var(--grid-fine) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(0deg, var(--grid-coarse) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(90deg, var(--grid-coarse) 0 1px, transparent 1px 100px);
}
.hero-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}
.hero-copy { max-width: 620px; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--cyan-800);
  background: rgba(6, 24, 41, .8);
  color: var(--cyan-300);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero-copy h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .4em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .7);
}
.hero-copy p { color: var(--paper-200); font-size: 1.02rem; max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-params { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 8px;
}
.hero-dots button {
  width: 24px; height: 6px;
  background: var(--blueprint-600);
  transition: width var(--t-med), background var(--t-med);
}
.hero-dots button[aria-selected="true"] { width: 40px; background: var(--cyan-400); }
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: rgba(6, 24, 41, .78);
  border: 1px solid var(--border-strong);
  color: var(--cyan-400);
  transition: background var(--t-fast), color var(--t-fast);
}
.hero-arrow:hover { background: var(--cyan-400); color: var(--blueprint-950); }
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }
.hero-arrow .ico { width: 18px; height: 18px; }

/* trust bar */
.trust-bar {
  background: var(--blueprint-900);
  border-bottom: 1px solid var(--border-thin);
  padding: 22px 0;
}
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust-item { display: flex; gap: 11px; align-items: flex-start; }
.trust-item .ico { width: 22px; height: 22px; color: var(--cyan-400); flex: 0 0 auto; margin-top: 2px; }
.trust-item h3 { font-size: .92rem; margin: 0 0 .2em; }
.trust-item p { font-size: .8rem; color: var(--text-dim); margin: 0; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step {
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-fast), transform var(--t-med);
}
.step:hover { border-color: var(--cyan-400); transform: translateY(-2px); }
.step-art { aspect-ratio: 16 / 10; background: var(--blueprint-950); border-bottom: 1px solid var(--border-thin); position: relative; overflow: hidden; }
.step-art img { width: 100%; height: 100%; object-fit: cover; }
.step-num {
  position: absolute;
  left: 10px; top: 10px;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  background: var(--cyan-400);
  color: var(--blueprint-950);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
}
.step-body { padding: 13px 15px 15px; }
.step-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-800);
  display: block;
  margin-bottom: 5px;
}
.step-body h3 { font-size: 1rem; margin: 0 0 .35em; }
.step-body p { font-size: .85rem; color: var(--text-muted); margin: 0; }

/* 3D studio preview band */
.studio-preview {
  background: var(--blueprint-950);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.studio-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: stretch;
  min-height: 440px;
}
.studio-preview-stage { position: relative; border-right: 1px solid var(--border-thin); min-height: 440px; }
.studio-preview-stage canvas { width: 100%; height: 100%; display: block; }
.studio-preview-side { padding: 28px 26px; display: flex; flex-direction: column; justify-content: center; }
.studio-preview-side h2 { margin-bottom: .5em; }
.studio-preview-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

/* CTA band */
.cta-band {
  position: relative;
  background: var(--blueprint-900);
  border: 2px solid var(--cyan-400);
  padding: 40px 34px;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-fine) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, var(--grid-fine) 0 1px, transparent 1px 20px);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta-inner h2 { margin: 0 0 .3em; }
.cta-inner p { color: var(--text-muted); margin: 0; max-width: 56ch; }

/* --------------------------------------------------------------------------
   10. Page hero / breadcrumbs
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--blueprint-900);
  border-bottom: 2px solid var(--cyan-400);
  padding: 34px 0 32px;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-fine) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, var(--grid-fine) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(0deg, var(--grid-coarse) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(90deg, var(--grid-coarse) 0 1px, transparent 1px 100px);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: .35em; }
.page-hero .lead { margin-bottom: 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan-800);
  margin-bottom: 14px;
}
.crumbs a { color: var(--cyan-800); }
.crumbs a:hover { color: var(--cyan-400); }
.crumbs .sep { color: var(--border); }
.crumbs [aria-current="page"] { color: var(--cyan-400); }

/* --------------------------------------------------------------------------
   11. Tool detail
   -------------------------------------------------------------------------- */
.exhibit {
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  padding: 14px;
}
.exhibit-frame {
  aspect-ratio: 4 / 3;
  background: var(--blueprint-900);
  border: 1px solid var(--border-thin);
  overflow: hidden;
}
.exhibit-frame img { width: 100%; height: 100%; object-fit: contain; }
.ex-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ex-thumbs button {
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  background: var(--blueprint-900);
  border: 1px solid var(--border-thin);
  padding: 0;
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.ex-thumbs button:hover, .ex-thumbs button.is-active { border-color: var(--cyan-400); }
.ex-thumbs img { width: 100%; height: 100%; object-fit: contain; max-width: 100%; padding: 3px; }

.spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .78rem; }
.spec-table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-800);
  padding-bottom: 8px;
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-thin);
  vertical-align: top;
}
.spec-table th { color: var(--cyan-800); font-weight: 400; width: 46%; }
.spec-table td { color: var(--cyan-200); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

.band-list { display: flex; flex-wrap: wrap; gap: 6px; }

.detail-block { margin-bottom: 26px; }
.detail-block h2 { font-size: 1.25rem; margin-bottom: .5em; }
.detail-block h3 { font-size: 1.02rem; margin-bottom: .45em; }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* --------------------------------------------------------------------------
   12. Filter bar, pagination, results
   -------------------------------------------------------------------------- */
.filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}
.filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filter-field label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-800);
}
.filter-field input,
.filter-field select {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  background: var(--blueprint-900);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .8rem;
}
.filter-field input::placeholder { color: var(--text-faint); }
.filter-field input:focus, .filter-field select:focus { border-color: var(--cyan-400); outline: none; }
.filter-actions { display: flex; align-items: flex-end; }

.result-count {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-dim);
  margin: 0 0 16px;
}
.result-count b { color: var(--cyan-400); }

.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 30px; }
.pagination button {
  min-width: 36px; height: 36px;
  padding: 0 10px;
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: .8rem;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pagination button:hover:not(:disabled) { border-color: var(--cyan-400); color: var(--cyan-300); }
.pagination button[aria-current="page"] { background: var(--cyan-400); color: var(--blueprint-950); border-color: var(--cyan-400); }
.pagination button:disabled { opacity: .35; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   13. Calculators
   -------------------------------------------------------------------------- */
.calc-form {
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  padding: 20px;
}
.calc-form h2 { font-size: 1.1rem; margin-bottom: 16px; }
.field { margin-bottom: 15px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan-800);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  background: var(--blueprint-900);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .85rem;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan-400); outline: none; }
.field textarea { min-height: 120px; resize: vertical; font-family: var(--font-body); }
.field-hint { font-size: .74rem; color: var(--text-faint); margin-top: 5px; font-family: var(--font-mono); }
.field-error { display: none; font-size: .74rem; color: var(--red-500); margin-top: 5px; font-family: var(--font-mono); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red-500); }
.field.has-error .field-error { display: block; }

.preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

.calc-result {
  position: relative;
  background: var(--blueprint-950);
  border: 1px solid var(--cyan-800);
  padding: 22px;
  box-shadow: inset 0 0 40px rgba(79, 195, 247, .06);
}
.calc-result h2 {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-800);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-thin);
}
.result-hero { margin-bottom: 18px; }
.result-hero .rh-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-800);
  margin-bottom: 2px;
}
.result-big {
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--cyan-400);
  text-shadow: 0 0 22px rgba(79, 195, 247, .35);
  word-break: break-word;
}
.result-big .ru { font-size: .4em; color: var(--cyan-800); margin-left: .25em; }
.result-hero .rh-note { font-family: var(--font-mono); font-size: .76rem; color: var(--text-dim); margin-top: 6px; }

.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border-thin); border: 1px solid var(--border-thin); }
.result-cell { background: var(--blueprint-900); padding: 11px 12px; }
.result-cell .rc-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan-800);
  margin-bottom: 3px;
}
.result-cell .rc-value { font-family: var(--font-mono); font-size: 1rem; color: var(--paper-100); word-break: break-word; }

.gauge { margin-top: 18px; }
.gauge-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .7rem; color: var(--cyan-800); margin-bottom: 6px; }
.gauge-track { height: 10px; background: var(--blueprint-900); border: 1px solid var(--border); position: relative; overflow: hidden; }
.gauge-fill { height: 100%; width: 0; background: var(--green-400); transition: width var(--t-med), background var(--t-med); }
.gauge-fill.is-warn { background: var(--yellow-500); }
.gauge-fill.is-danger { background: var(--red-500); }

.formula-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-thin);
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--text-dim);
  line-height: 1.7;
}
.formula-note b { color: var(--cyan-300); }

.ref-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .78rem; }
.ref-table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-800);
  padding-bottom: 8px;
}
.ref-table th, .ref-table td { padding: 7px 10px; border: 1px solid var(--border-thin); text-align: left; }
.ref-table th { background: var(--blueprint-950); color: var(--cyan-800); font-weight: 400; }
.ref-table td { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   14. 3D studio pages
   -------------------------------------------------------------------------- */
.studio-shell { display: flex; flex-direction: column; gap: 0; }
.studio-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  border-bottom: 0;
}
.studio-toolbar .tb-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-800);
  margin-right: 4px;
}
.studio-toolbar .tb-spacer { margin-left: auto; }

.studio-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  border: 1px solid var(--border);
  background: var(--blueprint-950);
  min-height: 560px;
}
.studio-canvas-wrap { position: relative; min-height: 560px; border-right: 1px solid var(--border-thin); overflow: hidden; }
.studio-canvas-wrap canvas { width: 100%; height: 100%; display: block; }

.sc-overlay {
  position: absolute;
  left: 14px; top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.sc-readout {
  background: rgba(4, 16, 28, .82);
  border: 1px solid var(--border);
  padding: 8px 11px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--cyan-300);
  line-height: 1.6;
  white-space: pre-line;
}
.sc-readout .rk { color: var(--cyan-800); }

.sc-hint {
  position: absolute;
  right: 14px; bottom: 14px;
  background: rgba(4, 16, 28, .82);
  border: 1px solid var(--border-thin);
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--text-dim);
  letter-spacing: .06em;
  pointer-events: none;
}

.studio-panel {
  padding: 16px;
  overflow-y: auto;
  background: var(--blueprint-900);
}
.studio-panel h2 {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-800);
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-thin);
}
.panel-row { margin-bottom: 15px; }
.panel-row .pr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.panel-row label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan-800);
}
.panel-row .pr-value { font-family: var(--font-mono); font-size: .82rem; color: var(--cyan-300); }
.panel-row input[type="range"] { width: 100%; accent-color: var(--cyan-400); background: transparent; }
.panel-row select, .panel-row input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .8rem;
}
.panel-row select:focus, .panel-row input:focus { border-color: var(--cyan-400); outline: none; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.studio-fallback {
  display: none;
  padding: 26px;
  background: var(--blueprint-900);
  border: 1px dashed var(--border-strong);
  text-align: center;
}
.studio-fallback.show { display: block; }
.studio-fallback h3 { color: var(--yellow-500); }
.studio-fallback p { color: var(--text-muted); font-size: .88rem; max-width: 56ch; margin: 0 auto 14px; }
.studio-fallback .switch-3d { margin-top: 12px; }

.studio-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }

.studio-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* --------------------------------------------------------------------------
   15. Blog
   -------------------------------------------------------------------------- */
.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.featured-media { position: relative; min-height: 300px; background: var(--blueprint-950); }
.featured-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.featured-body { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; }
.featured-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

.post-hero {
  position: relative;
  background: var(--blueprint-900);
  border-bottom: 2px solid var(--cyan-400);
  padding: 32px 0;
  overflow: hidden;
}
.post-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-fine) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, var(--grid-fine) 0 1px, transparent 1px 20px);
  pointer-events: none;
}
.post-hero > .container { position: relative; z-index: 1; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-dim);
  margin-top: 14px;
}
.post-meta .dot { color: var(--cyan-900); }
.post-meta .avatar {
  width: 26px; height: 26px;
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  background: var(--blueprint-950);
  color: var(--cyan-400);
  font-size: .7rem;
  font-weight: 700;
}

.prose { font-size: .97rem; }
.prose h2 { margin-top: 1.7em; padding-top: .7em; border-top: 1px solid var(--border-thin); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 20px; margin-bottom: .45em; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 3px; top: .62em;
  width: 6px; height: 6px;
  background: var(--cyan-400);
}
.prose ol { list-style: decimal; }
.prose ol li { margin-bottom: .45em; }
.prose ol li::marker { color: var(--cyan-400); font-family: var(--font-mono); font-size: .85em; }
.prose a { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; }
.prose blockquote {
  margin: 0 0 1.1em;
  padding: 12px 18px;
  border-left: 3px solid var(--cyan-400);
  background: var(--blueprint-950);
  color: var(--text-muted);
  font-style: italic;
}
.prose figure { margin: 0 0 1.4em; }
.prose figure img { width: 100%; border: 1px solid var(--border); }
.prose figcaption { font-family: var(--font-mono); font-size: .74rem; color: var(--text-faint); margin-top: 8px; }
.prose .table-wrap { overflow-x: auto; margin: 0 0 1.4em; }
.prose table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .78rem; min-width: 420px; }
.prose th, .prose td { padding: 8px 10px; border: 1px solid var(--border-thin); text-align: left; }
.prose th { background: var(--blueprint-950); color: var(--cyan-300); font-weight: 400; }
.prose td { color: var(--text-muted); }

.step-block {
  display: flex;
  gap: 16px;
  margin: 0 0 20px;
  padding: 16px;
  background: var(--blueprint-950);
  border: 1px solid var(--border-thin);
}
.step-block .sb-num {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: var(--cyan-400);
  color: var(--blueprint-950);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
}
.step-block h3 { margin: 0 0 .35em; font-size: 1.02rem; }
.step-block p:last-child { margin-bottom: 0; }
.step-block .sb-body { min-width: 0; }

.toc {
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  padding: 15px 17px;
  position: sticky;
  top: calc(var(--statusbar-h) + 16px);
}
.toc h3 {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-800);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-thin);
}
.toc a {
  display: block;
  padding: 5px 0 5px 12px;
  font-size: .82rem;
  color: var(--text-dim);
  border-left: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.toc a:hover { color: var(--cyan-300); }
.toc a.is-current { color: var(--cyan-400); border-left-color: var(--cyan-400); }

.author-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  margin-top: 30px;
}
.author-box .ab-avatar {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  background: var(--blueprint-900);
  color: var(--cyan-400);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
}
.author-box h4 { margin: 0 0 .3em; }
.author-box p { font-size: .84rem; color: var(--text-muted); margin: 0; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.post-nav a {
  display: block;
  padding: 14px 16px;
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast);
}
.post-nav a:hover { border-color: var(--cyan-400); }
.post-nav .pn-label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-800);
  display: block;
  margin-bottom: 5px;
}
.post-nav .pn-title { color: var(--text); font-size: .9rem; font-weight: 600; }
.post-nav .pn-next { text-align: right; }

.read-progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--cyan-400);
  z-index: 400;
  box-shadow: var(--glow-cyan);
}
body.sidebar-open .read-progress { left: var(--sidebar-w); }

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 250;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: var(--blueprint-900);
  border: 1px solid var(--border-strong);
  color: var(--cyan-400);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med), background var(--t-fast), color var(--t-fast);
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--cyan-400); color: var(--blueprint-950); }
.to-top .ico { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   16. Content pages
   -------------------------------------------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prose-block { margin-bottom: 28px; }
.prose-block h2 { font-size: 1.3rem; }

.form-card {
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  padding: 22px;
}
.form-status { display: none; }
.form-status.show { display: block; margin-bottom: 18px; }

.newsletter { display: flex; gap: 8px; margin-top: 10px; }
.newsletter input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 11px;
  background: var(--blueprint-950);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .8rem;
}
.newsletter input:focus { border-color: var(--cyan-400); outline: none; }
.newsletter-msg { display: none; font-family: var(--font-mono); font-size: .74rem; margin-top: 8px; }
.newsletter-msg.show { display: block; }
.newsletter-msg.ok { color: var(--green-400); }
.newsletter-msg.err { color: var(--red-500); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 2;
  margin-top: 56px;
  background: var(--blueprint-900);
  border-top: 1px solid var(--border);
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding: 44px 0 30px;
}
.footer-brand .fb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand p { font-size: .84rem; color: var(--text-dim); margin: 0 0 14px; max-width: 34ch; }
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  color: var(--cyan-800);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.footer-social a:hover { color: var(--cyan-400); border-color: var(--cyan-400); }
.footer-version { font-family: var(--font-mono); font-size: .68rem; color: var(--text-faint); margin-top: 12px; }

.footer-col h3 {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-800);
  margin: 0 0 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-thin);
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul a { font-size: .84rem; color: var(--text-muted); }
.footer-col ul a:hover { color: var(--cyan-400); }

.footer-legal {
  border-top: 1px solid var(--border-thin);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 26px;
}
.footer-legal .fl-block { display: flex; gap: 11px; align-items: flex-start; }
.footer-legal .ico { width: 20px; height: 20px; color: var(--yellow-500); flex: 0 0 auto; margin-top: 2px; }
.footer-legal h4 { font-size: .84rem; margin: 0 0 .3em; color: var(--yellow-500); }
.footer-legal p { font-size: .78rem; color: var(--text-dim); margin: 0; }
.footer-legal .fl-edu .ico { color: var(--cyan-400); }
.footer-legal .fl-edu h4 { color: var(--cyan-400); }

.footer-bottom {
  border-top: 1px solid var(--border-thin);
  padding: 16px 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-faint);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-bottom nav a { color: var(--text-dim); }
.footer-bottom nav a:hover { color: var(--cyan-400); }
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--cyan-800);
  font-size: .66rem;
  letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.text-center { text-align: center; }
.text-dim { color: var(--text-dim); }
.nowrap { white-space: nowrap; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* site search dropdown */
.search-wrap { position: relative; }
.search-results {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  z-index: 300;
  background: var(--blueprint-900);
  border: 1px solid var(--border-strong);
  display: none;
  max-height: 340px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.search-results.open { display: block; }
.sr-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-thin);
  font-size: .84rem;
}
.sr-item:last-child { border-bottom: 0; }
.sr-item:hover { background: rgba(79, 195, 247, .1); }
.sr-title { color: var(--text); }
.sr-meta { font-family: var(--font-mono); font-size: .68rem; color: var(--cyan-800); white-space: nowrap; }
.sr-empty { padding: 12px; font-size: .82rem; color: var(--text-dim); }

.sb-search { padding: 0 16px 12px; }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --sidebar-w: 220px; }
  .container { max-width: 1000px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .studio-preview-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 1000px) {
  /* sidebar becomes a bottom tab bar */
  .site-sidebar { display: none; }
  .app-main { margin-left: 0; padding-bottom: var(--tabbar-h); }
  body.sidebar-collapsed .app-main { margin-left: 0; }
  .tab-bar { display: grid; }
  body.sidebar-open .read-progress { left: 0; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .studio-hub-grid { grid-template-columns: 1fr; }
  .studio-notes { grid-template-columns: 1fr; }
  .studio-stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .studio-canvas-wrap { min-height: 400px; border-right: 0; border-bottom: 1px solid var(--border-thin); }
  .studio-panel { max-height: none; }
  .studio-preview-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-preview-stage { border-right: 0; border-bottom: 1px solid var(--border-thin); min-height: 340px; }
  .split-side { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .toc { position: static; }
  .featured-post { grid-template-columns: minmax(0, 1fr); }
  .featured-media { min-height: 220px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-legal { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-actions { grid-column: 1 / -1; }
  .to-top { bottom: calc(var(--tabbar-h) + 14px); }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .split-wide { grid-template-columns: minmax(0, 1fr); }
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
  .studio-toolbar { gap: 8px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .grid-2, .grid-3, .grid-4, .grid-auto, .trust-grid, .steps,
  .studio-hub-grid, .info-grid, .related-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { height: 420px; }
  .hero-arrow { display: none; }
  .hero-copy h1 { font-size: 1.7rem; }
  .section { padding: 40px 0; }
  .section-sm { padding: 28px 0; }
  .filter-bar { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: minmax(0, 1fr); }
  .post-nav { grid-template-columns: minmax(0, 1fr); }
  .post-nav .pn-next { text-align: left; }
  .cta-band { padding: 26px 20px; }
  .studio-canvas-wrap { min-height: 320px; }
  .studio-preview-stage { min-height: 280px; }
  .page-hero { padding: 26px 0 24px; }
  .status-bar { padding: 0 10px; gap: 10px; }
  .status-item.sb-hide-sm { display: none; }
  .footer-bottom { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   20. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero-slide { transition: none; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  body::before, .site-sidebar, .status-bar, .tab-bar, .tab-drawer,
  .to-top, .read-progress, .hero-arrow, .hero-dots { display: none !important; }
  .app-main { margin-left: 0; }
  body { background: #fff; color: #000; }
  .card, .notice, .tip-box { border-color: #999; }
}