/* ==========================================================================
   Schematic — Blueprint's drafting-sheet hero, but the drawing is your own
   apps: HTML mock-ups of Bootabler, Mac Tweaks, DeskBridge, ESP Mounter,
   Sparkler and Mac Optimizer
   rebuilt from their screenshots, plotted onto the sheet one after another.
   Apps below use Horizon's horizontal accordion panels.
   Scheme (Admin > Homepage > Template Settings) is set on <body> as
   data-sc-scheme = blueprint | graphite | mint.
   Mock-up sizes are written in screenshot pixels: U(n) = n × --u, where
   --u is one screenshot pixel at the current window width.
   ========================================================================== */

body[data-homepage-layout="schematic"] {
  --bp-paper: #0d3b8c;
  --bp-paper-2: #0a2f72;
  --bp-ink: #e8f0ff;
  --bp-ink-soft: rgba(232, 240, 255, 0.62);
  --bp-line: rgba(232, 240, 255, 0.16);
  --bp-line-strong: rgba(232, 240, 255, 0.32);
  --bp-accent: #ffd166;
  --bp-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
body[data-homepage-layout="schematic"][data-sc-scheme="graphite"] {
  --bp-paper: #14171c; --bp-paper-2: #0d0f13;
  --bp-ink: #d9f3ff; --bp-ink-soft: rgba(217, 243, 255, 0.6);
  --bp-line: rgba(120, 220, 255, 0.12); --bp-line-strong: rgba(120, 220, 255, 0.3);
  --bp-accent: #4fd1ff;
}
body[data-homepage-layout="schematic"][data-sc-scheme="mint"] {
  --bp-paper: #eaf4ee; --bp-paper-2: #dcebe2;
  --bp-ink: #12372a; --bp-ink-soft: rgba(18, 55, 42, 0.66);
  --bp-line: rgba(18, 55, 42, 0.1); --bp-line-strong: rgba(18, 55, 42, 0.26);
  --bp-accent: #e4572e;
}

/* --- Hero sheet (same drafting sheet as Blueprint) ------------------------ */
.schematic-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 120px 0 190px;
  color: var(--bp-ink);
  background: radial-gradient(120% 80% at 70% 30%, var(--bp-paper), var(--bp-paper-2));
  cursor: crosshair;
}
.sc-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--bp-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-line-strong) 1px, transparent 1px),
    linear-gradient(var(--bp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-line) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 40%, #000 55%, transparent 100%);
  mask-image: radial-gradient(130% 100% at 50% 40%, #000 55%, transparent 100%);
}
.schematic-hero::after {
  content: "";
  position: absolute; inset: 92px 18px 18px;
  border: 1.5px solid var(--bp-line-strong);
  pointer-events: none;
  z-index: -1;
}
.sc-crosshair { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 1; }
.schematic-hero.is-tracking .sc-crosshair { opacity: 1; }
.sc-cross-x, .sc-cross-y { position: absolute; background: var(--bp-accent); opacity: 0.45; }
.sc-cross-x { left: 0; right: 0; height: 1px; top: var(--cy, 50%); }
.sc-cross-y { top: 0; bottom: 0; width: 1px; left: var(--cx, 50%); }
.sc-coords {
  position: absolute; left: var(--cx, 50%); top: var(--cy, 50%);
  transform: translate(12px, 10px);
  font: 600 0.7rem/1 var(--bp-mono);
  letter-spacing: 0.06em;
  color: var(--bp-paper-2);
  background: var(--bp-accent);
  padding: 4px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
body[data-sc-coords="off"] .sc-crosshair { display: none; }
body[data-sc-coords="off"] .schematic-hero { cursor: auto; }

.sc-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
}
.sc-sheet {
  display: flex; gap: 0; flex-wrap: wrap;
  margin: 0 0 26px;
  font: 600 0.72rem/1 var(--bp-mono);
  letter-spacing: 0.12em;
  color: var(--bp-ink-soft);
}
.sc-sheet span { padding: 7px 12px; border: 1px solid var(--bp-line-strong); margin-right: -1px; }
.sc-sheet span:first-child { color: var(--bp-ink); background: color-mix(in srgb, var(--bp-ink) 8%, transparent); }

body[data-homepage-layout="schematic"] .sc-title {
  display: block;
  font-size: clamp(2.5rem, 5.2vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0 0 22px;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--bp-ink);
}
body[data-homepage-layout="schematic"] .sc-title .accent-text {
  background: none;
  -webkit-text-fill-color: var(--bp-accent);
  color: var(--bp-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
  text-decoration-style: dashed;
}
body[data-homepage-layout="schematic"] .sc-subtitle { color: var(--bp-ink-soft); font-size: 1.1rem; max-width: 500px; margin: 0 0 32px; }
.sc-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
body[data-homepage-layout="schematic"] .sc-ctas .btn {
  border-radius: 4px;
  font-family: var(--bp-mono);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body[data-homepage-layout="schematic"] .sc-ctas .btn-primary {
  background: var(--bp-accent); color: var(--bp-paper-2); border: 0;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--bp-ink) 35%, transparent);
}
body[data-homepage-layout="schematic"] .sc-ctas .btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 color-mix(in srgb, var(--bp-ink) 35%, transparent); }
body[data-homepage-layout="schematic"] .sc-ctas .btn-secondary { background: transparent; color: var(--bp-ink); border: 1.5px dashed var(--bp-line-strong); }

/* --- Drawing: stage, frames, dimension lines, outline plot ---------------- */
.sc-drawing { margin: 0; position: relative; }
.sc-stage {
  position: relative;
  --pad: 30px;
  container-type: inline-size;
  aspect-ratio: 1460 / 1120;
}
.sc-app {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 0 0 var(--pad);     /* room for the dimension lines */
  visibility: hidden;
}
.sc-app.is-active { visibility: visible; }
.sc-frame { position: relative; width: 100%; }
.sc-frame--esp { width: 62%; }

/* dimension lines (width on top, height on the left) */
.sc-dim { position: absolute; color: var(--bp-ink-soft); opacity: 0; transition: opacity .6s ease .9s; }
.sc-dim b { font: 600 10.5px/1 var(--bp-mono); letter-spacing: 0.1em; background: var(--bp-paper); padding: 0 6px; position: relative; }
.sc-dim--w { left: 0; right: 0; top: -20px; height: 12px; border-left: 1px solid; border-right: 1px solid; display: flex; justify-content: center; align-items: center; }
.sc-dim--w::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid; }
.sc-dim--h { top: 0; bottom: 0; left: -22px; width: 12px; border-top: 1px solid; border-bottom: 1px solid; display: flex; align-items: center; justify-content: center; }
.sc-dim--h::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid; }
.sc-dim--h b { transform: rotate(-90deg); white-space: nowrap; }

.sc-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.sc-outline rect { fill: none; stroke: var(--bp-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }

.sc-app.is-plotting .sc-outline rect { animation: sc-plot 0.9s cubic-bezier(0.6, 0, 0.2, 1) forwards; }
.sc-app.is-plotting .sc-dim { opacity: 1; }
.sc-app.is-plotting .sc-window { animation: sc-ink 0.7s ease 0.75s forwards; }
.sc-app.is-plotting .sc-outline { animation: sc-fade 0.5s ease 1.3s forwards; }
.sc-app.is-plotting .sc-mark { animation: sc-pop 0.35s ease forwards; }
.sc-app.is-plotting .sc-mark:nth-of-type(1) { animation-delay: 1.5s; }
.sc-app.is-plotting .sc-mark:nth-of-type(2) { animation-delay: 1.65s; }
.sc-app.is-plotting .sc-mark:nth-of-type(3) { animation-delay: 1.8s; }
@keyframes sc-plot { to { stroke-dashoffset: 0; } }
@keyframes sc-ink { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sc-fade { to { opacity: 0.35; } }
@keyframes sc-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* lettered callouts on the mock-up */
.sc-mark {
  position: absolute; left: var(--x); top: var(--y); z-index: 4;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 11px/1 var(--bp-mono); font-style: normal;
  color: var(--bp-paper-2); background: var(--bp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 35%, transparent), 0 4px 10px rgba(0, 0, 0, .25);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

/* title block, legend and app dots */
.sc-titleblock {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  margin-top: 16px;
  border: 1.5px solid var(--bp-line-strong);
  font: 500 0.72rem/1.3 var(--bp-mono);
  color: var(--bp-ink-soft);
}
.sc-titleblock span { padding: 8px 10px; border-left: 1px solid var(--bp-line-strong); min-width: 0; }
.sc-titleblock span:first-child { border-left: 0; }
.sc-titleblock b { display: block; font-weight: 700; color: var(--bp-ink); letter-spacing: 0.12em; font-size: 0.64rem; margin-bottom: 2px; }
.sc-titleblock i { font-style: normal; color: var(--bp-ink); }
.sc-app-name { color: var(--bp-accent) !important; text-decoration: none; font-weight: 700; }
.sc-app-name::after { content: " ↗"; font-weight: 400; }
.sc-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 10px 0 0; padding: 0; list-style: none;
  font: 500 0.72rem/1.3 var(--bp-mono); color: var(--bp-ink-soft);
}
.sc-legend li b { color: var(--bp-accent); margin-right: 4px; }
.sc-dots { display: flex; gap: 6px; margin-top: 12px; }
.sc-dots button {
  height: 6px; width: 22px; padding: 0;
  border: 1px solid var(--bp-line-strong);
  background: transparent;
  cursor: pointer;
}
.sc-dots button.is-active { background: var(--bp-accent); border-color: var(--bp-accent); }
.sc-dots button:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; }

/* --- Mock-up window chrome (macOS light appearance, like the screenshots) - */
.sc-window {
  --u: calc((100cqw - var(--pad)) / 1400);
  position: relative;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  border-radius: calc(var(--u) * 22);
  background: #f5f5f5;
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  line-height: 1.25;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: default;
  -webkit-font-smoothing: antialiased;
}
.sc-window svg { display: inline-block; flex: none; }
.sc-window b { font-weight: 600; }
:where(.sc-window) p, :where(.sc-window) ul { margin: 0; padding: 0; list-style: none; }
.sc-tl { position: absolute; left: calc(var(--u) * 28); top: calc(var(--u) * 30); display: flex; gap: calc(var(--u) * 12); z-index: 2; }
.sc-tl i { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.sc-tl i:nth-child(2) { background: #febc2e; }
.sc-tl i:nth-child(3) { background: #28c840; }

/* ---------- Bootabler (1400 × 992) ---------- */
.sc-w-boot { aspect-ratio: 1400 / 992; display: grid; grid-template-columns: calc(var(--u) * 428) 1fr; }
.bt-side { position: relative; background: #e5e5e5; border-right: calc(var(--u) * 1.5) solid #d2d2d2; padding: calc(var(--u) * 80) calc(var(--u) * 15) 0; }
.bt-sect { color: #8e8e93; font-size: calc(var(--u) * 19); font-weight: 500; padding-left: calc(var(--u) * 7); margin-bottom: calc(var(--u) * 4) !important; }
.bt-list li { display: flex; align-items: center; gap: calc(var(--u) * 18); padding: calc(var(--u) * 14) calc(var(--u) * 12); border-radius: calc(var(--u) * 9); }
.bt-list li.is-sel { background: #3d8ef7; color: #fff; }
.bt-list b { display: block; font-size: calc(var(--u) * 20); font-weight: 500; line-height: 1.2; }
.bt-list small { display: block; font-size: calc(var(--u) * 16.5); color: #6e6e73; margin-top: calc(var(--u) * 3); }
.bt-list li.is-sel small { color: rgba(255,255,255,.85); }
.bt-osicon { width: calc(var(--u) * 48); height: calc(var(--u) * 48); border-radius: 50%; flex: none; object-fit: cover; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0,0,0,.18); }
.bt-osicon--tahoe, .bt-big {
  background:
    radial-gradient(60% 45% at 70% 70%, rgba(130, 120, 255, .9), transparent 70%),
    radial-gradient(70% 50% at 30% 30%, rgba(30, 40, 120, .95), transparent 70%),
    linear-gradient(160deg, #0b0f3a 0%, #2232a8 45%, #6f63ff 60%, #121a5c 80%);
}
.bt-main { background: #fff; display: flex; flex-direction: column; min-width: 0; }
.bt-tool { display: flex; align-items: center; height: calc(var(--u) * 80); padding: 0 calc(var(--u) * 20); border-bottom: calc(var(--u) * 1.5) solid #e3e3e3; gap: calc(var(--u) * 14); }
.bt-sbicon { width: calc(var(--u) * 30); height: calc(var(--u) * 30); color: #666; }
.bt-tool strong { font-size: calc(var(--u) * 23); font-weight: 600; color: #333; }
.bt-tool nav { margin-left: auto; display: flex; gap: calc(var(--u) * 28); padding-right: calc(var(--u) * 10); }
.bt-tool nav span { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 17); color: #333; font-weight: 500; min-width: calc(var(--u) * 80); }
.bt-tool nav svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); color: #444; }
.bt-tool nav .is-red, .bt-tool nav .is-red svg { color: #e5242f; }
.bt-info { display: flex; align-items: center; gap: calc(var(--u) * 52); padding: calc(var(--u) * 34) calc(var(--u) * 36) calc(var(--u) * 32); margin: 0 calc(var(--u) * 18); border-bottom: calc(var(--u) * 1.5) solid #e3e3e3; }
.bt-big { width: calc(var(--u) * 168); height: calc(var(--u) * 168); border-radius: 50%; flex: none; box-shadow: inset 0 0 0 calc(var(--u) * 3) rgba(255,255,255,.25), 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0,0,0,.2); }
.bt-h { font-size: calc(var(--u) * 23); font-weight: 600; margin-bottom: calc(var(--u) * 14) !important; }
.bt-kv { font-size: calc(var(--u) * 18.5); margin-bottom: calc(var(--u) * 13) !important; font-weight: 500; }
.bt-kv span { color: #6e6e73; margin-right: calc(var(--u) * 6); }
.bt-h2 { font-size: calc(var(--u) * 23); font-weight: 600; padding: calc(var(--u) * 16) calc(var(--u) * 18) 0; }
.bt-note { font-size: calc(var(--u) * 17.5); color: #6e6e73; padding: calc(var(--u) * 10) calc(var(--u) * 18) 0; max-width: calc(var(--u) * 930); line-height: 1.32; }
.bt-table { margin: calc(var(--u) * 18) calc(var(--u) * 18) 0; flex: 1; background: #f4f4f4; border-radius: calc(var(--u) * 12); overflow: hidden; }
.bt-th, .bt-tr { display: grid; grid-template-columns: calc(var(--u) * 70) 1fr calc(var(--u) * 150) calc(var(--u) * 150); align-items: center; padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 16); }
.bt-th { height: calc(var(--u) * 46); background: #ebebeb; font-size: calc(var(--u) * 18.5); font-weight: 600; }
.bt-th span:first-child { grid-column: 1 / 3; padding-left: calc(var(--u) * 14); }
.bt-th span:nth-child(2) { text-align: right; padding-right: calc(var(--u) * 16); }
.bt-th span:nth-child(3) { padding-left: calc(var(--u) * 28); }
.bt-tr { height: calc(var(--u) * 90); }
.bt-disk { width: calc(var(--u) * 58); height: calc(var(--u) * 58); color: #6b6b70; }
.bt-dname b, .bt-cap b { display: block; font-size: calc(var(--u) * 18.5); font-weight: 600; }
.bt-dname small, .bt-cap small { display: block; font-size: calc(var(--u) * 17); color: #6e6e73; margin-top: calc(var(--u) * 4); }
.bt-cap { text-align: right; padding-right: calc(var(--u) * 16); }
.bt-act { display: flex; align-items: center; gap: calc(var(--u) * 24); padding-left: calc(var(--u) * 38); }
.bt-radio { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; border: calc(var(--u) * 1.5) solid #c7c7cc; background: #fff; }
.bt-act svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); color: #555; }
.bt-btns { display: flex; justify-content: center; gap: calc(var(--u) * 18); padding: calc(var(--u) * 20) 0 calc(var(--u) * 20); }
.bt-btns span { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 58); padding: 0 calc(var(--u) * 32); border-radius: calc(var(--u) * 7); background: #1677f5; color: #fff; font-size: calc(var(--u) * 20); font-weight: 500; }
.bt-btns span:first-child { padding: 0 calc(var(--u) * 54); }
.bt-btns svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); color: #fff; }

/* ---------- Mac Tweaks (1400 × 977) ---------- */
.sc-w-tweaks { aspect-ratio: 1400 / 977; display: grid; grid-template-columns: calc(var(--u) * 437) 1fr; }
.mt-side { position: relative; background: #ebebeb; border-right: calc(var(--u) * 1.5) solid #d6d6d6; overflow: hidden; }
.mt-brand { display: flex; align-items: center; gap: calc(var(--u) * 14); height: calc(var(--u) * 122); padding: calc(var(--u) * 46) calc(var(--u) * 24) 0; font-size: calc(var(--u) * 28); font-weight: 600; color: #333; border-bottom: calc(var(--u) * 1.5) solid #d6d6d6; }
.mt-brand svg { width: calc(var(--u) * 44); height: calc(var(--u) * 44); color: #333; }
.mt-list { padding: calc(var(--u) * 6) 0 0 calc(var(--u) * 40) !important; }
.mt-list li { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 16); height: calc(var(--u) * 53); font-size: calc(var(--u) * 20); color: #222; padding-right: calc(var(--u) * 60); }
.mt-list li > i {
  position: relative; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: calc(var(--u) * 9); flex: none;
  background: color-mix(in srgb, var(--c) 22%, #fff);
  color: var(--c);
  display: grid; place-items: center;
}
.mt-list li > i svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.mt-chev { position: absolute; right: calc(var(--u) * 62); width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: #555; }
/* little glyphs for the tiles without a symbol */
.mt-list .mt-dots::before { content: ""; width: calc(var(--u) * 18); height: calc(var(--u) * 18); background: radial-gradient(circle, currentColor 32%, transparent 36%) 0 0 / calc(var(--u) * 6) calc(var(--u) * 6); }
.mt-list .mt-cols::before { content: ""; width: calc(var(--u) * 22); height: calc(var(--u) * 16); border: calc(var(--u) * 2) solid currentColor; border-radius: calc(var(--u) * 3); background: linear-gradient(90deg, transparent 30%, currentColor 30% 36%, transparent 36% 64%, currentColor 64% 70%, transparent 70%); }
.mt-list .mt-shot::before { content: ""; width: calc(var(--u) * 20); height: calc(var(--u) * 16); border: calc(var(--u) * 2) dashed currentColor; border-radius: calc(var(--u) * 3); }
.mt-list .mt-compass::before { content: ""; width: calc(var(--u) * 20); height: calc(var(--u) * 20); border: calc(var(--u) * 2) solid currentColor; border-radius: 50%; background: linear-gradient(45deg, transparent 44%, currentColor 44% 56%, transparent 56%); }
.mt-list .mt-doc::before { content: ""; width: calc(var(--u) * 16); height: calc(var(--u) * 20); border: calc(var(--u) * 2) solid currentColor; border-radius: calc(var(--u) * 2); background: linear-gradient(currentColor, currentColor) 50% 30% / 60% calc(var(--u) * 2) no-repeat, linear-gradient(currentColor, currentColor) 50% 60% / 60% calc(var(--u) * 2) no-repeat; }
.mt-list .mt-term::before { content: ">_"; font: 700 calc(var(--u) * 13)/1 var(--bp-mono); border: calc(var(--u) * 2) solid currentColor; border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 1) calc(var(--u) * 2); }
.mt-list .mt-search::before { content: ""; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border: calc(var(--u) * 2.5) solid currentColor; border-radius: 50%; box-shadow: calc(var(--u) * 6) calc(var(--u) * 6) 0 calc(var(--u) * -4) currentColor; }
.mt-list .mt-photo::before { content: ""; width: calc(var(--u) * 22); height: calc(var(--u) * 17); border-radius: calc(var(--u) * 3); background: linear-gradient(135deg, transparent 50%, currentColor 50%), currentColor; opacity: .85; clip-path: inset(0 round calc(var(--u) * 3)); }
.mt-list .mt-play::before { content: ""; width: calc(var(--u) * 20); height: calc(var(--u) * 16); border: calc(var(--u) * 2) solid currentColor; border-radius: calc(var(--u) * 3); background: conic-gradient(from 60deg at 45% 50%, currentColor 0 60deg, transparent 0) 50% 50% / calc(var(--u) * 10) calc(var(--u) * 10) no-repeat; }
.mt-list .mt-bar::before { content: ""; width: calc(var(--u) * 22); height: calc(var(--u) * 16); border: calc(var(--u) * 2) solid currentColor; border-radius: calc(var(--u) * 3); border-top-width: calc(var(--u) * 5); }
.mt-list .mt-mouse::before { content: ""; width: calc(var(--u) * 12); height: calc(var(--u) * 19); border: calc(var(--u) * 2) solid currentColor; border-radius: calc(var(--u) * 7); }
.mt-list .mt-hand::before { content: "☝"; font-size: calc(var(--u) * 18); line-height: 1; }
.mt-list .mt-keys::before { content: ""; width: calc(var(--u) * 24); height: calc(var(--u) * 15); border: calc(var(--u) * 2) solid currentColor; border-radius: calc(var(--u) * 3); background: radial-gradient(circle, currentColor 30%, transparent 36%) 0 0 / calc(var(--u) * 5) calc(var(--u) * 5); }
.mt-scroll { position: absolute; right: calc(var(--u) * 10); top: calc(var(--u) * 126); width: calc(var(--u) * 10); height: calc(var(--u) * 720); border-radius: calc(var(--u) * 5); background: #a8a8a8; }
.mt-main { background: #f4f4f4; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mt-title { align-self: stretch; height: calc(var(--u) * 44); line-height: calc(var(--u) * 42); font-size: calc(var(--u) * 19.5); font-weight: 600; color: #333; background: #fbfbfb; border-bottom: calc(var(--u) * 1.5) solid #e0e0e0; }
.mt-hero-gear { width: calc(var(--u) * 124); height: calc(var(--u) * 124); margin-top: calc(var(--u) * 92); color: #1d1d1f; }
.mt-welcome { margin-top: calc(var(--u) * 40) !important; font-size: calc(var(--u) * 42); font-weight: 700; letter-spacing: -.01em; }
.mt-sub { margin-top: calc(var(--u) * 16) !important; font-size: calc(var(--u) * 22); color: #333; }
.mt-card { margin-top: calc(var(--u) * 40); width: calc(var(--u) * 746); padding: calc(var(--u) * 42) calc(var(--u) * 44) calc(var(--u) * 26); background: #fff; border-radius: calc(var(--u) * 22); text-align: left; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(0,0,0,.05); }
.mt-card-h { font-size: calc(var(--u) * 22); font-weight: 600; margin-bottom: calc(var(--u) * 22) !important; }
.mt-row { display: flex; align-items: center; gap: calc(var(--u) * 26); font-size: calc(var(--u) * 21.5); margin-bottom: calc(var(--u) * 25) !important; }
.mt-row svg { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.mt-foot { margin-top: calc(var(--u) * 40) !important; font-size: calc(var(--u) * 19.5); color: #777; }

/* ---------- DeskBridge (1400 × 1055) ---------- */
.sc-w-desk { aspect-ratio: 1400 / 1055; display: grid; grid-template-columns: calc(var(--u) * 313) 1fr; }
.db-side { position: relative; background: #e9e9e9; border-right: calc(var(--u) * 1.5) solid #d6d6d6; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--u) * 96); }
.db-pro { width: calc(var(--u) * 122); height: calc(var(--u) * 140); color: #0a6cff; }
.db-host { margin-top: calc(var(--u) * 12) !important; font-size: calc(var(--u) * 21); font-weight: 600; color: #555; }
.db-nav { align-self: stretch; margin-top: calc(var(--u) * 32) !important; padding: 0 calc(var(--u) * 16) !important; }
.db-nav li { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 13); margin-bottom: calc(var(--u) * 0) !important; border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 20.5); color: #333; }
.db-nav li svg { width: calc(var(--u) * 25); height: calc(var(--u) * 25); color: #2f7cf6; }
.db-nav li.is-sel { background: #4c94f6; color: #fff; }
.db-nav li.is-sel svg { color: #fff; }
.db-main { background: #f6f6f6; padding: 0 calc(var(--u) * 56) 0 calc(var(--u) * 46); }
.db-title { margin: 0 calc(var(--u) * -56) 0 calc(var(--u) * -46) !important; height: calc(var(--u) * 44); line-height: calc(var(--u) * 42); text-align: center; font-size: calc(var(--u) * 19.5); font-weight: 600; color: #444; border-bottom: calc(var(--u) * 1.5) solid #e3e3e3; background: #fafafa; }
.db-head { display: flex; align-items: center; justify-content: space-between; margin: calc(var(--u) * 48) calc(var(--u) * 4) calc(var(--u) * 10) calc(var(--u) * 16); }
.db-head b { font-size: calc(var(--u) * 20.5); font-weight: 700; color: #333; }
.db-scan { display: flex; align-items: center; gap: calc(var(--u) * 12); font-size: calc(var(--u) * 17.5); color: #333; }
.db-toggle { width: calc(var(--u) * 50); height: calc(var(--u) * 29); border-radius: calc(var(--u) * 15); background: #1677f5; position: relative; }
.db-toggle::after { content: ""; position: absolute; right: calc(var(--u) * 2.5); top: calc(var(--u) * 2.5); width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; background: #fff; box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0,0,0,.25); }
.db-spin { width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; background: repeating-conic-gradient(#b5b5b5 0 18deg, transparent 18deg 45deg); -webkit-mask: radial-gradient(circle, transparent 35%, #000 37%); mask: radial-gradient(circle, transparent 35%, #000 37%); }
.db-card { display: flex; align-items: center; gap: calc(var(--u) * 16); height: calc(var(--u) * 124); padding: 0 calc(var(--u) * 24) 0 calc(var(--u) * 18); background: #efefef; border-radius: calc(var(--u) * 12); box-shadow: inset 0 0 0 calc(var(--u) * 1) #e6e6e6; }
.db-card--prev { height: calc(var(--u) * 140); }
.db-laptop { width: calc(var(--u) * 106); height: calc(var(--u) * 68); color: #0a6cff; }
.db-pro-sm { width: calc(var(--u) * 72); height: calc(var(--u) * 84); color: #8e8e93; margin: 0 calc(var(--u) * 18); }
.db-name { font-size: calc(var(--u) * 20.5); color: #333; margin-left: calc(var(--u) * 4); }
.db-name--muted { color: #8e8e93; }
.db-name small { display: flex; align-items: center; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 16.5); color: #8e8e93; margin-top: calc(var(--u) * 8); }
.db-name small i { width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: #8e8e93; }
.db-btn { margin-left: auto; height: calc(var(--u) * 46); line-height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 22); border-radius: calc(var(--u) * 9); background: #d9e6f5; color: #0a6cff; font-size: calc(var(--u) * 20.5); font-weight: 600; }

/* ---------- ESP Mounter (1000 × 1164) ---------- */
.sc-w-esp { --u: calc((100cqw - var(--pad)) * 0.62 / 1000); aspect-ratio: 1000 / 1164; display: flex; flex-direction: column; background: #e8e8e8; }
.em-head { display: flex; align-items: center; gap: calc(var(--u) * 14); height: calc(var(--u) * 80); padding: 0 calc(var(--u) * 32); background: #fff; border-bottom: calc(var(--u) * 2) solid #dcdcdc; }
.em-logo { width: calc(var(--u) * 38); height: calc(var(--u) * 38); color: #1677f5; }
.em-head b { font-size: calc(var(--u) * 26); font-weight: 500; color: #222; }
.em-tools { margin-left: auto; display: flex; gap: calc(var(--u) * 22); padding-right: calc(var(--u) * 24); }
.em-tools svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); color: #6e6e73; }
.em-tools .is-red { color: #e5242f; }
.em-list { flex: 1; padding: calc(var(--u) * 6) calc(var(--u) * 8) 0 !important; overflow: hidden; }
.em-list li { display: flex; align-items: center; gap: calc(var(--u) * 22); height: calc(var(--u) * 136); margin-bottom: calc(var(--u) * 8) !important; padding: 0 calc(var(--u) * 28) 0 calc(var(--u) * 32); background: #f4f4f4; border-radius: calc(var(--u) * 8); }
.em-ico { width: calc(var(--u) * 54); height: calc(var(--u) * 54); color: #1677f5; flex: none; }
.em-ico--gray { color: #6e6e73; }
.em-list li > span:first-of-type { flex: 1; min-width: 0; }
.em-list b { display: block; font-size: calc(var(--u) * 21.5); font-weight: 500; line-height: 1.75; white-space: nowrap; }
.em-list small { display: block; font-size: calc(var(--u) * 20); color: #6e6e73; white-space: nowrap; }
.em-list em { font-style: normal; font-weight: 600; color: #1468e0; }
.em-list em.g { color: #2fb23a; }
.em-list em.c { color: #2bb7ea; }
.em-list em.w { color: #6e6e73; }
.em-mount { display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 28) 0 calc(var(--u) * 24); background: #fff; border: calc(var(--u) * 1.5) solid #dcdcdc; border-radius: calc(var(--u) * 10); font-size: calc(var(--u) * 21); font-weight: 500; color: #222; }
.em-mount svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); color: #333; }
.em-eject { display: grid; place-items: center; width: calc(var(--u) * 48); height: calc(var(--u) * 48); background: #fff; border: calc(var(--u) * 1.5) solid #dcdcdc; border-radius: calc(var(--u) * 10); margin-right: calc(var(--u) * -14); }
.em-eject svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); color: #333; }
.em-foot { display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 70); padding: 0 calc(var(--u) * 32); background: #fff; border-top: calc(var(--u) * 2) solid #dcdcdc; font-size: calc(var(--u) * 22); color: #6e6e73; }
.em-foot svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); color: #8e8e93; }

/* --- Responsive & motion ---------------------------------------------------- */
@media (max-width: 1100px) {
  .sc-inner { grid-template-columns: 1fr; gap: 40px; }
  .sc-drawing { max-width: 700px; }
}
@media (max-width: 600px) {
  .schematic-hero { padding-bottom: 210px; }
  .sc-stage { --pad: 24px; }
  .sc-app { padding-top: 22px; }
  .sc-dim b { font-size: 9px; }
  .sc-titleblock { grid-template-columns: 1fr 1fr; }
  .sc-titleblock span:first-child { display: none; }
  .sc-titleblock span:nth-child(2) { border-left: 0; }
  .sc-mark { width: 18px; height: 18px; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-app.is-active .sc-window, .sc-app.is-active .sc-mark { opacity: 1; animation: none !important; transform: translate(-50%, -50%); }
  .sc-app.is-active .sc-window { transform: none; }
  .sc-app.is-active .sc-dim { opacity: 1; transition: none; }
  .sc-app.is-active .sc-outline { display: none; }
}

body[data-homepage-layout="schematic"] .hero-screen > .stats-banner .stats-banner-value { font-family: var(--bp-mono); color: var(--bp-ink); }
body[data-homepage-layout="schematic"] .hero-screen > .stats-banner .stats-banner-label { color: var(--bp-ink-soft); }

/* --- Apps: Horizon's horizontal accordion ------------------------------------ */
.sc-apps { margin-top: 22px; padding: 88px 0 90px; scroll-margin-top: 0px; }
.sc-apps-head { text-align: center; margin-bottom: 26px; }
.sc-kicker {
  margin: 0 0 8px;
  font: 700 0.74rem/1 var(--bp-mono, ui-monospace, monospace);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-cyan);
}
.sc-apps-head .section-title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; margin: 0 0 8px; }
.sc-apps-hint { margin: 0; color: var(--text-secondary); }
/* Category filter: Blueprint's drafting "tabs" — no capsule tray, square tabs
   with a dashed outline, the active one filled solid. */
body[data-homepage-layout="schematic"] .sc-apps .filter-pills {
  justify-content: center;
  margin: 0 0 30px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 0;
  width: auto;
}
body[data-homepage-layout="schematic"] .sc-apps .filter-pill {
  border-radius: 0;
  margin: 0 -1px -1px 0;
  padding: 9px 16px;
  font: 600 0.74rem/1 var(--bp-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--text-primary) 28%, transparent);
  box-shadow: none;
}
body[data-homepage-layout="schematic"] .sc-apps .filter-pill:hover {
  color: var(--text-primary);
  border-style: solid;
  position: relative;
  z-index: 1;
}
body[data-homepage-layout="schematic"] .sc-apps .filter-pill.filter-pill--active {
  color: var(--bg-primary);
  background: var(--text-primary);
  border: 1px solid var(--text-primary);
  position: relative;
  z-index: 2;
}

@media (min-width: 900px) {
  body[data-homepage-layout="schematic"] .sc-apps .app-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px;
    height: 460px;
  }
  body[data-homepage-layout="schematic"] .sc-apps .app-card {
    --h: 222;
    position: relative;
    flex: 1 1 0;
    min-width: 64px;
    margin: 0;
    padding: 22px 18px;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
      linear-gradient(rgba(232, 240, 255, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(90deg, rgba(232, 240, 255, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
      radial-gradient(120% 80% at 50% 0%, hsla(var(--h), 85%, 62%, 0.55), transparent 60%),
      linear-gradient(180deg, hsl(var(--h), 45%, 22%), hsl(calc(var(--h) + 30), 40%, 10%));
    box-shadow: none;
    transition: flex-grow 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, transform 0.4s ease;
    transform: none !important;
  }
  body[data-homepage-layout="schematic"] .sc-apps .app-card.is-open {
    flex-grow: 5.5;
    min-width: 340px;
    box-shadow: 0 30px 70px -30px hsla(var(--h), 80%, 50%, 0.8);
  }
  body[data-homepage-layout="schematic"] .sc-apps .app-card .app-icon {
    position: absolute; top: 18px; left: 50%;
    width: 52px; height: 52px; margin: 0;
    transform: translateX(-50%);
    transition: left 0.5s ease, transform 0.5s ease, width 0.5s ease, height 0.5s ease;
  }
  body[data-homepage-layout="schematic"] .sc-apps .app-card.is-open .app-icon { left: 22px; transform: none; width: 72px; height: 72px; }
  body[data-homepage-layout="schematic"] .sc-apps .app-card h3 {
    color: #fff;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.2;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: absolute; left: 50%; bottom: 22px; margin-left: -0.6em;
    max-height: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s ease;
  }
  body[data-homepage-layout="schematic"] .sc-apps .app-card.is-open h3 {
    writing-mode: horizontal-tb;
    transform: none;
    position: static;
    margin: 0 0 8px;
    max-height: none;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    line-height: 1.08;
    font-size: clamp(1.3rem, 1.9vw, 1.8rem);
    letter-spacing: -0.02em;
    animation: sc-fade-up 0.45s 0.15s both;
  }
  body[data-homepage-layout="schematic"] .sc-apps .app-card > p,
  body[data-homepage-layout="schematic"] .sc-apps .app-card .app-card-tag { opacity: 0; visibility: hidden; max-width: 440px; }
  body[data-homepage-layout="schematic"] .sc-apps .app-card.is-open > p,
  body[data-homepage-layout="schematic"] .sc-apps .app-card.is-open .app-card-tag { opacity: 1; visibility: visible; animation: sc-fade-up 0.45s 0.22s both; }
  body[data-homepage-layout="schematic"] .sc-apps .app-card .app-card-tag {
    position: absolute; top: 102px; left: 22px; right: auto;
    max-width: calc(100% - 44px);
    background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.2);
  }
  body[data-homepage-layout="schematic"] .sc-apps .app-card > p { color: rgba(255, 255, 255, 0.78); margin: 0 0 12px; }
  body[data-homepage-layout="schematic"] .sc-apps .app-card .download-count {
    color: #fff; font-weight: 700; margin: 0;
    padding: 6px 12px !important; border-radius: 999px; background: rgba(0, 0, 0, 0.25);
  }
}
@keyframes sc-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 899px) {
  body[data-homepage-layout="schematic"] .sc-apps .app-grid { grid-template-columns: 1fr !important; gap: 12px; }
  body[data-homepage-layout="schematic"] .sc-apps .app-card {
    --h: 222;
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 14px;
    text-align: left;
    color: #fff;
    border-radius: 18px;
    background: linear-gradient(120deg, hsl(var(--h), 45%, 22%), hsl(calc(var(--h) + 30), 40%, 12%));
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  body[data-homepage-layout="schematic"] .sc-apps .app-card .app-icon { grid-row: span 4; width: 56px; height: 56px; margin: 0; }
  body[data-homepage-layout="schematic"] .sc-apps .app-card h3 { color: #fff; margin: 0; }
  body[data-homepage-layout="schematic"] .sc-apps .app-card > p { color: rgba(255, 255, 255, 0.78); margin: 4px 0; }
  body[data-homepage-layout="schematic"] .sc-apps .app-card .app-card-tag { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-homepage-layout="schematic"] .sc-apps .app-card { transition: none; }
}

/* Site-wide .app-card p { flex-grow: 1 } (styles.css) stretches the tagline
   to fill the card; this template positions card content itself. */
body[data-homepage-layout="schematic"] #all-apps .app-card > p { flex-grow: 0; }
body[data-homepage-layout="schematic"] #all-apps .app-card .download-count { border-top: 0; padding-top: 0; }

/* traffic lights sit tighter in the corner on Mac Tweaks / DeskBridge */
.sc-w-tweaks .sc-tl, .sc-w-desk .sc-tl { left: calc(var(--u) * 12); top: calc(var(--u) * 12); }

/* Icons cropped from the apps' own screenshots (exact artwork) */
.sc-window img { display: block; flex: none; object-fit: contain; }
.db-pro { width: calc(var(--u) * 132); height: calc(var(--u) * 156); }
.db-pro-sm { width: calc(var(--u) * 76); height: calc(var(--u) * 86); }
.mt-brand img { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
.mt-hero-gear { width: calc(var(--u) * 128); height: calc(var(--u) * 128); }
img.bt-big { background: none; box-shadow: none; }
img.bt-osicon { box-shadow: none; }
img.em-ico { width: calc(var(--u) * 50); height: calc(var(--u) * 54); }

/* --- Sparkler + Mac Optimizer: absolutely-placed mock-ups ------------------
   Every piece sits at the coordinates it has in the app's screenshot:
   --x/--y/--w/--h (boxes), --x or --cx (centred) + --b (text baseline) + --fs.
   Sparkler is measured in 2x pixels of a 1720-wide window, Mac Optimizer in
   1x pixels of a 900-wide window. script.js sets --k on each .sc-fit text so
   its width matches the screenshot whatever font the visitor's system uses. */
.sc-frame--spark { width: 74%; }
.sc-w-spark { --u: calc((100cqw - var(--pad)) * 0.74 / 1720); aspect-ratio: 1720 / 1658; background: var(--sp-main); border-radius: calc(var(--u) * 24); }
.sc-w-mo { --u: calc((100cqw - var(--pad)) / 900); aspect-ratio: 900 / 639; background: var(--mo-bg); color: var(--c1); border-radius: calc(var(--u) * 12); }

.sx-t {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc((var(--b) - var(--fs) * var(--k, 1) * 0.86) * var(--u));
  font-size: calc(var(--fs) * var(--k, 1) * var(--u));
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
}
.sx-t.sx-c { left: calc(var(--cx) * var(--u)); transform: translateX(-50%); }
.sx-mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
.sc-window img.sx-i,
.sx-r {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.sx-r { display: block; }

/* Sparkler */
.sc-w-spark .sc-tl { left: calc(var(--u) * 16); top: calc(var(--u) * 16); gap: calc(var(--u) * 16); }
.sc-w-spark .sc-tl i { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.sp-bar { background: var(--sp-bar); border-bottom: calc(var(--u) * 2) solid var(--sp-bar-line); }
.sp-side { background: var(--sp-side); }
.sp-zone { background: var(--sp-zone); border: calc(var(--u) * 4) dashed var(--sp-dash); border-radius: calc(var(--u) * 22); box-sizing: border-box; }
.sp-btn { background: var(--sp-blue); border-radius: calc(var(--u) * 14); }
.sp-btn.is-off { background: var(--sp-off); }
.sp-div { background: var(--sp-div); }
.sp-pbtn { background: var(--sp-pbtn); border-radius: calc(var(--u) * 10); box-shadow: var(--sp-pbtn-ring); }
.sp-pbtn.is-dis { background: var(--sp-pbtn-dis); }
.sp-box { background: var(--sp-box); border-radius: calc(var(--u) * 12); box-shadow: 0 0 0 calc(var(--u) * 2) var(--sp-box-line); }

/* Mac Optimizer */
.sc-w-mo .sc-tl { left: calc(var(--u) * 13); top: calc(var(--u) * 13); gap: calc(var(--u) * 8); }
.sc-w-mo .sc-tl i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.mo-sep { background: var(--mo-sep); }
.mo-sel { background: var(--mo-sel); border-radius: calc(var(--u) * 6); }
.mo-scroll { background: var(--mo-scroll); border-radius: calc(var(--u) * 4); }
.mo-card { background: var(--mo-card); border-radius: calc(var(--u) * 12); box-shadow: var(--mo-card-ring); }
.mo-card--top { border-radius: calc(var(--u) * 12) calc(var(--u) * 12) 0 0; }
.mo-div { background: var(--mo-div); }

/* text roles */
.sx-t.c-1 { color: var(--c1); } .sx-t.c-2 { color: var(--c2); } .sx-t.c-3 { color: var(--c3); }
.sx-t.c-wt { color: var(--cwt); } .sx-t.c-w { color: #fff; } .sx-t.c-off { color: var(--coff); }
.sx-t.c-g { color: var(--cg); } .sx-t.c-l { color: var(--cl); } .sx-t.c-dis { color: var(--cdis); }
.sx-t.c-lab { color: var(--clab); } .sx-t.c-sec { color: var(--csec); }

/* ==========================================================================
   Light / dark: the mock-ups follow the site's theme switch (html[data-theme]),
   using each app's own light and dark screenshots for the colours.
   ========================================================================== */
.sc-window .sc-d { display: none !important; }
html[data-theme="dark"] .sc-window .sc-l { display: none !important; }
html[data-theme="dark"] .sc-window .sc-d { display: block !important; }

/* Sparkler + Mac Optimizer palettes */
.sc-w-spark {
  --sp-main: #f6f6f6; --sp-bar: #fcfbfc; --sp-bar-line: #d4d4d4; --sp-side: #fafafa; --sp-zone: #f1f1f1; --sp-dash: #8f8f8f;
  --sp-blue: #007afb; --sp-off: #93bafa; --sp-div: #e5e5e5; --sp-pbtn: #fff; --sp-pbtn-dis: #fff; --sp-box: #fff; --sp-box-line: #e6e6e6;
  --sp-pbtn-ring: 0 0 0 calc(var(--u) * 1.5) rgba(0, 0, 0, 0.1), 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, 0.08);
  --c1: #262626; --c2: #818181; --c3: #878787; --cwt: #4f4f4f; --coff: #eef5ff; --cg: #28c840; --cl: #1f74d6; --cdis: #c1c1c1;
}
html[data-theme="dark"] .sc-w-spark {
  --sp-main: #282828; --sp-bar: #373737; --sp-bar-line: #000; --sp-side: #242424; --sp-zone: #2f2f2f; --sp-dash: #979797;
  --sp-blue: #0b84fd; --sp-off: #1c5aa0; --sp-div: #404040; --sp-pbtn: #686868; --sp-pbtn-dis: #484848; --sp-box: #1e1e1e; --sp-box-line: #3d3d3d;
  --sp-pbtn-ring: none;
  --c1: #ececec; --c2: #b6b6b6; --c3: #b0b0b0; --cwt: #adadad; --coff: #a1bce8; --cg: #32d74b; --cl: #1685ed; --cdis: #8a8a8a;
}
.sc-w-mo {
  --mo-bg: #f2f2f4; --mo-sep: #d1d1d6; --mo-sel: #3a7cf0; --mo-scroll: #c4c4c7; --mo-card: #fff; --mo-div: #e5e5ea;
  --mo-card-ring: 0 0 0 calc(var(--u) * 0.5) rgba(0, 0, 0, 0.08), 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, 0.05);
  --c1: #1d1d1f; --c2: #6e6e73; --clab: #86868b; --csec: #8e8e93;
}
.sc-w-mo .mo-mono { filter: invert(1) brightness(0.9); }
html[data-theme="dark"] .sc-w-mo {
  --mo-bg: #404142; --mo-sep: #000; --mo-sel: #3772e2; --mo-scroll: #848586; --mo-card: #1a1b1d; --mo-div: #303133;
  --mo-card-ring: none;
  --c1: #ececec; --c2: #a9a9aa; --clab: #989899; --csec: #797a7b;
}
html[data-theme="dark"] .sc-w-mo .mo-mono { filter: none; }

/* The other four mock-ups: dark overrides sampled from their dark screenshots */
html[data-theme="dark"] .sc-w-boot,
html[data-theme="dark"] .sc-w-tweaks,
html[data-theme="dark"] .sc-w-desk,
html[data-theme="dark"] .sc-w-esp { color: #e5e5e5; background: #1e1e1e; }

/* Bootabler */
html[data-theme="dark"] .bt-side { background: #3e3e3e; border-right-color: #020202; }
html[data-theme="dark"] .bt-sect { color: #8a8a8a; }
html[data-theme="dark"] .bt-list li.is-sel { background: #376ae4; }
html[data-theme="dark"] .bt-list small { color: #b0b0b0; }
html[data-theme="dark"] .bt-list li.is-sel small { color: #bfdbff; }
html[data-theme="dark"] .bt-main { background: #181818; }
html[data-theme="dark"] .bt-tool { background: #292929; border-bottom-color: #030303; }
html[data-theme="dark"] .bt-sbicon { color: #cbcbcb; }
html[data-theme="dark"] .bt-tool strong,
html[data-theme="dark"] .bt-tool nav span { color: #e3e3e3; }
html[data-theme="dark"] .bt-tool nav svg { color: #ebebeb; }
html[data-theme="dark"] .bt-tool nav .is-red, html[data-theme="dark"] .bt-tool nav .is-red svg { color: #ff453a; }
html[data-theme="dark"] .bt-info { border-bottom-color: #2f2f2f; }
html[data-theme="dark"] .bt-kv span,
html[data-theme="dark"] .bt-note,
html[data-theme="dark"] .bt-dname small,
html[data-theme="dark"] .bt-cap small { color: #a8a8a8; }
html[data-theme="dark"] .bt-table { background: #1d1d1d; }
html[data-theme="dark"] .bt-th { background: #292929; }
html[data-theme="dark"] .bt-disk { color: #9e9e9e; }
html[data-theme="dark"] .bt-radio { border-color: #555; background: #1d1d1d; }
html[data-theme="dark"] .bt-act svg { color: #d3d3d3; }
html[data-theme="dark"] .bt-btns span { background: #0d66ff; }

/* Mac Tweaks */
html[data-theme="dark"] .mt-side { background: #262626; border-right-color: #010101; }
html[data-theme="dark"] .mt-brand { color: #e0e0e0; border-bottom-color: #414141; }
html[data-theme="dark"] .mt-list li { color: #dddddd; }
html[data-theme="dark"] .mt-list li > i { background: color-mix(in srgb, var(--c) 24%, #151515); }
html[data-theme="dark"] .mt-chev { color: #9a9a9a; }
html[data-theme="dark"] .mt-scroll { background: #626262; }
html[data-theme="dark"] .mt-main { background: #1e1e1e; }
html[data-theme="dark"] .mt-title { color: #979797; background: #2a2a2a; border-bottom-color: #141414; }
html[data-theme="dark"] .mt-sub { color: #dadada; }
html[data-theme="dark"] .mt-card { background: #171717; box-shadow: none; }
html[data-theme="dark"] .mt-foot { color: #888; }

/* DeskBridge */
html[data-theme="dark"] .db-side { background: #4f4f4f; border-right-color: #000; }
html[data-theme="dark"] .db-host { color: #ebebeb; }
html[data-theme="dark"] .db-nav li { color: #e4e4e4; }
html[data-theme="dark"] .db-nav li.is-sel { background: #4380e6; }
html[data-theme="dark"] .db-main { background: #282828; }
html[data-theme="dark"] .db-title { color: #a5a5a5; background: #383838; border-bottom-color: #1d1d1d; }
html[data-theme="dark"] .db-head b,
html[data-theme="dark"] .db-scan,
html[data-theme="dark"] .db-name { color: #e4e4e4; }
html[data-theme="dark"] .db-toggle { background: #1760dc; }
html[data-theme="dark"] .db-toggle::after { background: #d3d3d3; }
html[data-theme="dark"] .db-card { background: #313131; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) #3f3f3f; }
html[data-theme="dark"] .db-name--muted { color: #939393; }
html[data-theme="dark"] .db-name small { color: #acacac; }
html[data-theme="dark"] .db-name small i { background: #acacac; }
html[data-theme="dark"] .db-btn { background: #2c3c54; color: #1a84ff; }

/* ESP Mounter */
html[data-theme="dark"] .sc-w-esp { background: #7e7e7e; }
html[data-theme="dark"] .em-head { background: #171717; border-bottom-color: #000; }
html[data-theme="dark"] .em-head b { color: #dedede; }
html[data-theme="dark"] .em-tools svg { color: #cccccc; }
html[data-theme="dark"] .em-tools .is-red { color: #ff3b30; }
html[data-theme="dark"] .em-list li { background: #414141; }
html[data-theme="dark"] .em-list small { color: #b5b5b5; }
html[data-theme="dark"] .em-list em { color: #216ee2; }
html[data-theme="dark"] .em-list em.g { color: #32d74b; }
html[data-theme="dark"] .em-list em.c { color: #3ec6f2; }
html[data-theme="dark"] .em-list em.w,
html[data-theme="dark"] .em-ico--gray { color: #8e8e8e; }
html[data-theme="dark"] .em-mount,
html[data-theme="dark"] .em-eject { background: #171717; border-color: #232323; color: #f1f1f1; }
html[data-theme="dark"] .em-mount svg,
html[data-theme="dark"] .em-eject svg { color: #f1f1f1; }
html[data-theme="dark"] .em-foot { background: #171717; border-top-color: #000; color: #a8a8a8; }
html[data-theme="dark"] .em-foot svg { color: #a8a8a8; }