@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/archivo-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --blue: #0b57d0;
  --blue-on: #ffffff;
  --blue-soft: #d3e3fd;
  --blue-ink: #052e6e;
  --surface: #f8f9fc;
  --surface-0: #ffffff;
  --surface-1: #f1f3f6;
  --surface-2: #e9ebef;
  --ink: #1f1f23;
  --muted: #5f6368;
  --line: #d9dce4;
  --stage: #202124;
  --stage-raised: #303134;
  --stage-text: #f1f3f4;
  --stage-muted: #c4c7c5;
  --stage-line: rgb(255 255 255 / 18%);
  --stage-panel: rgb(255 255 255 / 4%);
  --stage-panel-hover: rgb(255 255 255 / 8%);
  --stage-outline: rgb(255 255 255 / 30%);
  --stage-accent: #a8c7fa;
  --stage-accent-hover: #c3d7ff;
  --stage-accent-ink: #062e6f;
  --stage-accent-text: #d7e2ff;
  --stage-subtle: #aeb4bf;
  --stage-success: #b7f5c9;
  --stage-success-ink: #073b1a;
  --stage-success-soft: rgb(129 201 149 / 15%);
  --stage-error: #ffcbc4;
  --stage-error-soft: rgb(255 180 171 / 14%);
  --success: #188038;
  --error: #b3261e;
  --shadow-1: 0 1px 2px rgb(60 64 67 / 18%), 0 1px 3px 1px rgb(60 64 67 / 9%);
  --font-ui: "Archivo", "Roboto", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  /* Kept for the journal and admin surfaces that share the global type system. */
  --font-sans: var(--font-ui);
  --font-display: var(--font-ui);
  --paper: var(--surface);
  --md-primary: var(--blue);
  --md-on-primary: var(--blue-on);
  --md-primary-container: var(--blue-soft);
  --md-on-primary-container: var(--blue-ink);
  --md-secondary-container: #e1e8f9;
  --md-on-secondary-container: #1b3154;
  --md-error: var(--error);
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;
  --md-surface: var(--surface);
  --md-surface-lowest: var(--surface-0);
  --md-surface-low: var(--surface-1);
  --md-surface-container: var(--surface-1);
  --md-surface-high: var(--surface-2);
  --md-surface-highest: var(--surface-2);
  --md-surface-container-low: var(--surface-1);
  --md-surface-container-high: var(--surface-2);
  --md-surface-container-highest: var(--surface-2);
  --md-surface-variant: var(--surface-2);
  --md-on-surface: var(--ink);
  --md-on-surface-variant: var(--muted);
  --md-outline: #74777f;
  --md-outline-variant: var(--line);
  --md-success: var(--success);
  --studio-border: var(--line);
  --studio-text: var(--ink);
  --studio-muted: var(--muted);
  --elevation-1: var(--shadow-1);
  --elevation-2: 0 3px 6px 1px rgb(60 64 67 / 15%), 0 2px 4px rgb(60 64 67 / 12%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --blue: #a8c7fa;
  --blue-on: #062e6f;
  --blue-soft: #304a74;
  --blue-ink: #dce8ff;
  --surface: #16171b;
  --surface-0: #1e1f23;
  --surface-1: #25262b;
  --surface-2: #2d2f35;
  --ink: #e5e6eb;
  --muted: #c4c7c5;
  --line: #45474f;
  --stage: #202124;
  --stage-raised: #292a30;
  --stage-text: #f3f4f7;
  --stage-muted: #c8c9cf;
  --stage-line: rgb(255 255 255 / 18%);
  --stage-panel: rgb(255 255 255 / 5%);
  --stage-panel-hover: rgb(255 255 255 / 9%);
  --stage-outline: rgb(255 255 255 / 34%);
  --stage-accent: #a8c7fa;
  --stage-accent-hover: #c3d7ff;
  --stage-accent-ink: #062e6f;
  --stage-accent-text: #d7e2ff;
  --stage-subtle: #b7bac2;
  --stage-success: #b7f5c9;
  --stage-success-ink: #073b1a;
  --stage-success-soft: rgb(129 201 149 / 15%);
  --stage-error: #ffcbc4;
  --stage-error-soft: rgb(255 180 171 / 14%);
  --success: #81c995;
  --md-secondary-container: #304a74;
  --md-on-secondary-container: #dce8ff;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--surface); color: var(--ink); font-family: var(--font-ui); }
body { min-width: 320px; min-height: 100dvh; margin: 0; overflow-x: hidden; background: var(--surface); color: var(--ink); font: 400 16px/1.5 var(--font-ui); }
button, input, textarea, select { font: inherit; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[hidden], .hidden { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; border-radius: 9px; background: var(--blue); color: var(--blue-on); font-size: 14px; font-weight: 750; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

/* Shared application bar, navigation rail and inspector. */
.transfer-app { display: grid; min-height: 100dvh; height: 100dvh; grid-template-rows: 64px minmax(0, 1fr) 64px; background: var(--surface); }
.transfer-topbar,
.studio-topbar { display: grid; min-width: 0; min-height: 64px; grid-template-columns: minmax(220px, 1fr) minmax(250px, 1.25fr) minmax(190px, 1fr); align-items: center; gap: 18px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--surface-0); }

.transfer-brand,
.studio-brand { display: inline-flex; min-width: 0; align-items: center; gap: 9px; }
.transfer-brand-mark,
.studio-brand-mark { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--blue); color: var(--blue-on); font-size: 15px; font-weight: 820; letter-spacing: -.08em; line-height: 1; }
.transfer-brand strong,
.studio-brand strong { color: var(--ink); font-size: 15px; font-weight: 740; letter-spacing: -.025em; }
.transfer-brand strong { white-space: nowrap; }
.transfer-brand small { padding-left: 9px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.studio-brand strong, .studio-brand small { display: block; }
.studio-brand small { color: var(--muted); font-size: 11px; font-weight: 620; letter-spacing: .02em; }

.transfer-context,
.studio-context { display: flex; min-width: 0; align-items: center; gap: 8px; overflow: hidden; }
.transfer-context { justify-content: flex-start; }
.studio-context { justify-content: center; }
.context-icon,
.studio-context::before { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue-ink); content: ""; }
.context-icon { font-size: 16px; }
.transfer-context strong,
.studio-context strong { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.transfer-context > span:last-child,
.studio-context small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.studio-context small { display: block; }

.transfer-top-actions,
.studio-network { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.transfer-ready,
.studio-network [data-network] { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 650; }
.transfer-ready i,
.dock-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent); }
.transfer-ready.offline i { background: var(--error); }
.top-icon-button,
.studio-theme-toggle,
.inspector-icon-button { display: grid; width: 40px; min-width: 40px; height: 40px; place-items: center; padding: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 0; }
.top-icon-button::before,
.studio-theme-toggle::before { content: "◐"; font-size: 20px; }
.top-icon-button:hover,
.studio-theme-toggle:hover,
.inspector-icon-button:hover { background: var(--blue-soft); color: var(--blue-ink); }

.transfer-layout,
.studio-layout { display: grid; min-width: 0; min-height: 0; grid-template-columns: 88px minmax(0, 1fr) 320px; }
.studio-layout { position: relative; min-height: calc(100dvh - 64px); grid-template-rows: minmax(0, 1fr) 64px; }
.transfer-rail,
.studio-rail { display: grid; align-content: start; gap: 5px; padding: 12px 9px; border-right: 1px solid var(--line); background: var(--surface-0); }
.transfer-rail a,
.studio-rail a { display: grid; min-height: 58px; place-items: center; align-content: center; gap: 4px; padding: 7px 4px; border-radius: 15px; color: var(--muted); font-size: 10px; font-weight: 690; line-height: 1.1; text-align: center; }
.transfer-rail a:hover,
.studio-rail a:hover { background: color-mix(in srgb, var(--blue-soft) 65%, transparent); color: var(--ink); }
.transfer-rail a.is-active,
.studio-rail a.is-active { background: var(--blue-soft); color: var(--blue-ink); }
.rail-icon { font-size: 20px; font-weight: 520; line-height: 1; }
.studio-rail .rail-label { font-size: 10px; }

/* Main transfer workbench. */
.transfer-workspace { min-width: 0; min-height: 0; padding: 8px; overflow: auto; background: var(--surface); }
.transfer-stage { position: relative; display: grid; min-height: 100%; height: 100%; overflow: hidden; grid-template-rows: 52px minmax(0, 1fr) 56px; border: 1px solid var(--line); border-radius: 17px; background: var(--stage); }
.transfer-stage::before { position: absolute; z-index: 0; inset: 52px 0 56px; background-image: linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px); background-position: center; background-size: 26px 26px; content: ""; pointer-events: none; }
.stage-topline,
.stage-footer,
.transfer-console { position: relative; z-index: 1; }
.stage-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface-0); color: var(--ink); font-size: 12px; font-weight: 680; }
.stage-topline > span { display: inline-flex; min-width: 0; align-items: center; gap: 8px; }
.stage-topline i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.stage-topline > span:last-child { color: var(--muted); font-weight: 530; }
.stage-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 16px; border-top: 1px solid var(--stage-line); background: rgb(32 33 36 / 92%); color: var(--stage-muted); font-size: 12px; }

.transfer-console { align-self: center; justify-self: center; width: min(calc(100% - 34px), 540px); }
.console-heading { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 24px 18px 16px; text-align: center; }
.console-icon,
.drop-zone-icon,
.file-chip-icon,
.connection-orb { display: grid; place-items: center; background: #a8c7fa; color: #062e6f; }
.console-icon { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 18px; font-size: 28px; }
.console-heading p,
.status-kicker { color: #a8c7fa; font-size: 11px; font-weight: 760; letter-spacing: .065em; }
.console-heading h1 { margin-top: 3px; color: var(--stage-text); font-size: clamp(24px, 3.2vw, 31px); font-weight: 630; letter-spacing: -.045em; line-height: 1.08; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; max-width: 430px; margin: 0 auto; padding: 3px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 10px; background: var(--stage-raised); }
.segment { min-height: 38px; border-radius: 7px; background: transparent; color: var(--stage-muted); cursor: pointer; font-size: 13px; font-weight: 650; }
.segment:hover { background: rgb(255 255 255 / 8%); }
.segment.active { background: var(--blue-soft); color: var(--blue-ink); }
.panel,
.connection-view { padding: 19px 0 24px; }

.drop-zone { display: grid; width: 100%; min-height: 218px; place-items: center; align-content: center; gap: 7px; padding: 22px; border: 1px dashed rgb(232 234 237 / 48%); border-radius: 16px; background: rgb(32 33 36 / 62%); color: var(--stage-text); cursor: pointer; text-align: center; }
.drop-zone:hover,
.drop-zone.dragging { border-color: #a8c7fa; background: rgb(168 199 250 / 11%); }
.drop-zone-icon { width: 54px; height: 54px; margin-bottom: 3px; border-radius: 17px; font-size: 26px; }
.drop-zone strong { color: var(--stage-text); font-size: 20px; font-weight: 630; letter-spacing: -.03em; }
.drop-zone > span:not(.drop-zone-icon) { color: var(--stage-muted); font-size: 14px; }
.drop-zone small { margin-top: 7px; color: #9aa0a6; font-size: 12px; }

.file-chip { display: grid; min-height: 86px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--stage-line); border-radius: 14px; background: var(--stage-raised); }
.file-chip-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 21px; }
.file-details { min-width: 0; }
.file-details small,
.file-details span { display: block; color: var(--stage-muted); font-size: 12px; }
.file-details small { color: #a8c7fa; font-weight: 720; letter-spacing: .055em; text-transform: uppercase; }
.file-details strong { display: block; overflow: hidden; margin: 2px 0; color: var(--stage-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.file-chip > button { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: transparent; color: var(--stage-muted); cursor: pointer; font-size: 23px; }
.file-chip > button:hover { background: rgb(255 218 214 / 14%); color: #ffb4ab; }

.primary-button,
.download-button { display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; margin-top: 14px; padding: 0 18px; border-radius: 999px; background: #a8c7fa; color: #062e6f; cursor: pointer; font-size: 14px; font-weight: 760; text-decoration: none; }
.primary-button:hover,
.download-button:hover { background: #c3d7ff; }
.primary-button:disabled { background: rgb(232 234 237 / 18%); color: rgb(232 234 237 / 42%); cursor: not-allowed; }
.primary-button.compact { width: auto; min-height: 42px; margin: 0; }
.code-entry label { display: block; color: var(--stage-text); font-size: 17px; font-weight: 670; }
.code-entry p { margin: 5px 0 17px; color: var(--stage-muted); font-size: 14px; }
.code-entry input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 10px; outline: 0; background: var(--stage-raised); color: var(--stage-text); font-family: var(--font-mono); font-size: 21px; font-weight: 600; letter-spacing: .08em; }
.code-entry input::placeholder { color: #9aa0a6; }
.code-entry input:focus { border-color: #a8c7fa; box-shadow: 0 0 0 3px rgb(168 199 250 / 16%); }

.connection-view { text-align: center; }
.connection-orb { width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 21px; font-size: 0; }
.connection-orb::before { content: "⌁"; font-size: 40px; }
.connection-orb.connected { background: #b7f5c9; color: #073b1a; }
.connection-orb.connected::before { content: "✓"; }
.connection-view h2 { margin: 6px 0 8px; color: var(--stage-text); font-size: clamp(24px, 3.4vw, 34px); font-weight: 640; letter-spacing: -.045em; line-height: 1.1; }
.status-copy { max-width: 38ch; margin: 0 auto; color: var(--stage-muted); font-size: 14px; }
.code-cluster { display: flex; justify-content: center; gap: 10px; margin: 22px 0; }
.room-code { min-height: 50px; padding: 0 17px; border: 1px solid rgb(168 199 250 / 46%); border-radius: 10px; background: rgb(168 199 250 / 12%); color: #d7e2ff; cursor: pointer; font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: .08em; }
.share-link,
.secondary-button,
.quiet-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid rgb(255 255 255 / 24%); border-radius: 999px; background: transparent; color: #e8eaed; cursor: pointer; font-size: 13px; font-weight: 680; }
.share-link:hover,
.secondary-button:hover,
.quiet-button:hover { background: rgb(255 255 255 / 9%); }
.incoming-card,
.progress-wrap { margin-top: 18px; padding: 17px; border: 1px solid var(--stage-line); border-radius: 14px; background: var(--stage-raised); text-align: left; }
.incoming-top small,
.progress-head,
.progress-meta { color: var(--stage-muted); font-size: 12px; }
.incoming-top strong { display: block; overflow: hidden; margin: 4px 0; color: var(--stage-text); text-overflow: ellipsis; white-space: nowrap; }
.incoming-top em { color: var(--stage-muted); font-size: 13px; font-style: normal; }
.incoming-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.progress-head,
.progress-meta { display: flex; justify-content: space-between; gap: 12px; }
.progress-head strong { color: #a8c7fa; }
.progress-track { height: 7px; margin: 10px 0; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / 16%); }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: #a8c7fa; }
.quiet-button { margin-top: 17px; border-color: transparent; color: var(--stage-muted); }
.toast { position: fixed; z-index: 50; right: 18px; bottom: 82px; max-width: min(360px, calc(100vw - 36px)); padding: 12px 15px; border-radius: 10px; background: #303134; box-shadow: var(--shadow-1); color: #f1f3f4; font-size: 14px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 150ms ease, transform 150ms ease; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Inspector and bottom source dock. */
.transfer-inspector { min-width: 0; overflow: auto; border-left: 1px solid var(--line); background: var(--surface-0); }
.inspector-content { display: grid; gap: 18px; padding: 18px 16px; }
.inspector-heading,
.inspector-section-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.inspector-heading > div > span,
.inspector-group h3 { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.inspector-heading h2 { margin-top: 3px; color: var(--ink); font-size: 20px; font-weight: 640; letter-spacing: -.035em; }
.inspector-icon-button { width: 36px; min-width: 36px; height: 36px; border-radius: 50%; }
.inspector-icon-button::before { content: "i"; font-family: Georgia, serif; font-size: 17px; }
.source-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border-radius: 13px; background: var(--blue-soft); }
.source-card-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #a8c7fa; color: #062e6f; font-size: 20px; }
.source-card strong,
.source-card small { display: block; }
.source-card strong { color: var(--blue-ink); font-size: 13px; }
.source-card small { margin-top: 2px; color: color-mix(in srgb, var(--blue-ink) 70%, var(--muted)); font-size: 12px; }
.source-card-check { color: var(--success); font-size: 17px; font-weight: 800; }
.inspector-group { display: grid; gap: 8px; }
.inspector-group h3 { margin: 0; }
.device-readout { display: grid; margin: 0; }
.device-readout div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.device-readout div:last-child { border-bottom: 0; }
.device-readout dt { color: var(--muted); font-size: 12px; }
.device-readout dd { color: var(--ink); font-family: var(--font-mono); font-size: 11px; text-align: right; }
.inspector-section-head { align-items: center; }
.inspector-section-head a { color: var(--blue); font-size: 12px; font-weight: 720; }
.recent-list { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.recent-item { display: grid; min-height: 64px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 9px; padding: 10px 11px; border-bottom: 1px solid var(--line); }
.recent-item:last-child { border-bottom: 0; }
.recent-item div { min-width: 0; }
.recent-item strong { display: block; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.recent-item div span,
.recent-item > span,
.recent-item time { color: var(--muted); font-size: 11px; }
.recent-item time { grid-column: 2; grid-row: 1; font-family: var(--font-mono); }
.recent-empty { display: grid; place-items: center; gap: 6px; padding: 22px 13px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
.recent-empty span { color: var(--blue); font-size: 20px; }
.recent-empty p { font-size: 13px; line-height: 1.45; }

.transfer-dock { min-width: 0; margin: 0 320px 0 88px; padding: 8px 16px; background: var(--stage-raised); color: #e8eaed; }
.dock-content { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dock-status { display: flex; min-width: 0; align-items: center; gap: 13px; color: #e8eaed; font-size: 12px; }
.dock-status span { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.dock-status small { overflow: hidden; color: #c4c7c5; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dock-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.dock-tonal-action,
.dock-primary-action { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 13px; border-radius: 999px; font-size: 12px; font-weight: 740; }
.dock-tonal-action { color: #d7e2ff; }
.dock-primary-action { background: #a8c7fa; color: #062e6f; }
.dock-primary-action:hover { background: #c3d7ff; }

/* Static routes follow the same workbench geometry. */
.studio-page { background: var(--surface); }
.studio-page .studio-rail { grid-column: 1; grid-row: 1; }
.studio-page .studio-workspace { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; overflow: auto; background: var(--surface); }
.studio-page .studio-stage { min-height: calc(100% - 16px); margin: 8px; padding: clamp(26px, 4vw, 48px); border: 1px solid var(--line); border-radius: 17px; background: var(--stage); color: var(--stage-text); }
.studio-page .studio-stage-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
.studio-page .studio-kicker { margin-bottom: 10px; color: #a8c7fa; font-size: 11px; font-weight: 760; letter-spacing: .11em; }
.studio-page .studio-stage-head h1 { max-width: 15ch; color: var(--stage-text); font-size: clamp(34px, 5vw, 58px); font-weight: 740; letter-spacing: -.065em; line-height: .96; }
.studio-page .studio-stage-head p:last-child { max-width: 54ch; margin-top: 11px; color: var(--stage-muted); font-size: 15px; line-height: 1.58; }
.studio-page .studio-index-value { min-width: 104px; padding: 9px 0 9px 17px; border-left: 1px solid var(--stage-line); color: #d7e2ff; }
.studio-page .studio-index-value strong { display: block; font-size: 31px; font-weight: 760; letter-spacing: -.07em; line-height: 1; }
.studio-page .studio-index-value small { display: block; margin-top: 4px; color: var(--stage-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.studio-page .studio-card { position: relative; overflow: hidden; border: 1px solid var(--stage-line); border-radius: 16px; background: var(--stage-raised); }
.studio-page .studio-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px; border-bottom: 1px solid var(--stage-line); }
.studio-page .studio-card-header strong { display: block; color: var(--stage-text); font-size: 15px; }
.studio-page .studio-card-header small { display: block; color: var(--stage-muted); font-size: 11px; }
.studio-page .studio-card-action,
.studio-page .studio-quiet-action { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid var(--stage-line); border-radius: 999px; background: transparent; color: #e8eaed; cursor: pointer; font-size: 12px; font-weight: 710; }
.studio-page .studio-card-action:hover,
.studio-page .studio-quiet-action:hover { border-color: #a8c7fa; background: rgb(168 199 250 / 12%); }
.studio-page .studio-inspector { grid-column: 3; grid-row: 1; padding: 16px; overflow: auto; border-left: 1px solid var(--line); background: var(--surface-0); }
.studio-page .inspector-label { margin: 3px 4px 14px; color: var(--muted); font-size: 10px; font-weight: 780; letter-spacing: .11em; }
.studio-page .inspector-block { margin-bottom: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.studio-page .inspector-block strong { display: block; color: var(--ink); font-size: 14px; }
.studio-page .inspector-block p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.52; }
.studio-page .inspector-list { display: grid; gap: 9px; margin-top: 13px; }
.studio-page .inspector-list div { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.studio-page .inspector-list i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); }
.studio-page .inspector-anchor-list { display: grid; margin-top: 7px; }
.studio-page .inspector-anchor-list a { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.studio-page .inspector-anchor-list a:last-child { border-bottom: 0; }
.studio-page .inspector-anchor-list a:hover { color: var(--blue); }
.studio-page .studio-dock { grid-column: 2; grid-row: 2; position: static; display: flex; min-width: 0; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px; background: var(--stage-raised); }
.studio-page .dock-pulse { display: flex; min-width: 0; align-items: center; gap: 9px; color: #e8eaed; font-size: 12px; font-weight: 700; }
.studio-page .dock-pulse::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #81c995; content: ""; }
.studio-page .dock-pulse small { overflow: hidden; color: #c4c7c5; font-size: 11px; font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
.studio-page .dock-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.studio-page .dock-primary,
.studio-page .dock-secondary { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 13px; border-radius: 999px; font-size: 12px; font-weight: 740; }
.studio-page .dock-primary { background: #a8c7fa; color: #062e6f; }
.studio-page .dock-secondary { color: #d7e2ff; }

/* Local transfer ledger. */
.history-privacy { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 13px; padding: 18px 19px; }
.history-privacy .privacy-key { color: #a8c7fa; font-size: 25px; font-weight: 770; }
.history-privacy strong { color: var(--stage-text); font-size: 14px; }
.history-privacy p { margin-top: 4px; color: var(--stage-muted); font-size: 13px; line-height: 1.52; }
.studio-ledger { margin-top: 15px; }
.ledger-head { display: grid; grid-template-columns: minmax(0, 1fr) 126px 98px 130px; gap: 10px; padding: 13px 19px; color: #aeb4bf; font-size: 10px; font-weight: 760; letter-spacing: .08em; }
.activity-table { border-top: 1px solid var(--stage-line); }
.activity-row { display: grid; min-height: 70px; grid-template-columns: minmax(0, 1fr) 126px 98px 130px; align-items: center; gap: 10px; padding: 12px 19px; border-bottom: 1px solid var(--stage-line); }
.activity-row:hover { background: rgb(255 255 255 / 4%); }
.activity-file strong { display: block; overflow: hidden; color: var(--stage-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.activity-file small,
.activity-row > span,
.activity-row > time { color: var(--stage-muted); font-size: 12px; }
.direction-badge { width: max-content; padding: 5px 8px; border: 1px solid rgb(168 199 250 / 36%); border-radius: 7px; background: rgb(168 199 250 / 12%); color: #d7e2ff !important; font-size: 11px !important; font-weight: 730; }
.empty-state { padding: 48px 22px; color: var(--stage-muted); text-align: center; }
.empty-state strong { display: block; color: var(--stage-text); font-size: 17px; }
.empty-state p { max-width: 42ch; margin: 8px auto 0; font-size: 13px; line-height: 1.55; }
.empty-state a { display: inline-flex; margin-top: 16px; color: #c3d4ff; font-size: 13px; font-weight: 720; }
.ledger-actions { display: flex; justify-content: end; padding: 13px 19px; }

/* Security route. */
.security-route { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(220px, 1.65fr) minmax(130px, .8fr); gap: 12px; padding: 12px; }
.route-endpoint,
.route-channel { display: grid; min-height: 220px; align-content: center; justify-items: center; gap: 12px; padding: 20px; text-align: center; }
.route-endpoint { border: 1px solid var(--stage-line); border-radius: 14px; background: rgb(255 255 255 / 3%); }
.route-endpoint small,
.route-channel small { color: #a8c7fa; font-size: 10px; font-weight: 750; letter-spacing: .09em; }
.route-device { position: relative; width: 56px; height: 40px; border: 2px solid #a8c7fa; border-radius: 8px; }
.route-device::after { position: absolute; right: 12px; bottom: -9px; left: 12px; height: 2px; background: #a8c7fa; content: ""; }
.route-endpoint strong { color: var(--stage-text); font-size: 18px; letter-spacing: -.035em; }
.route-channel { border-radius: 14px; background: rgb(168 199 250 / 10%); }
.route-channel strong { color: #e4ebff; font-size: 20px; letter-spacing: -.04em; }
.route-channel p { max-width: 29ch; color: var(--stage-muted); font-size: 12px; line-height: 1.55; }
.route-line { position: relative; width: min(100%, 270px); height: 2px; background: linear-gradient(90deg, transparent, #a8c7fa 12%, #a8c7fa 88%, transparent); }
.route-line::before,
.route-line::after { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #d7e2ff; box-shadow: 0 0 0 5px rgb(168 199 250 / 15%); content: ""; transform: translateY(-50%); }
.route-line::before { left: 12%; }
.route-line::after { right: 12%; }
.security-pill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.security-pill { display: grid; min-height: 118px; grid-template-columns: 29px minmax(0, 1fr); gap: 12px; padding: 16px; border: 1px solid var(--stage-line); border-radius: 14px; background: var(--stage-raised); }
.security-pill .ordinal { color: #a8c7fa; font-size: 11px; font-weight: 800; letter-spacing: .07em; }
.security-pill strong { color: var(--stage-text); font-size: 14px; }
.security-pill p { margin-top: 5px; color: var(--stage-muted); font-size: 12px; line-height: 1.5; }
.security-boundary { display: grid; grid-template-columns: 1.1fr 1fr 1fr; margin-top: 15px; }
.security-boundary > div { min-height: 152px; padding: 19px; border-right: 1px solid var(--stage-line); }
.security-boundary > div:last-child { border-right: 0; }
.security-boundary small { color: #a8c7fa; font-size: 10px; font-weight: 750; letter-spacing: .09em; }
.security-boundary strong { display: block; margin-top: 8px; color: var(--stage-text); font-size: 15px; }
.security-boundary ul { display: grid; gap: 6px; margin-top: 11px; color: var(--stage-muted); font-size: 12px; line-height: 1.4; }

/* Diagnostics. */
.diagnostics-overall { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; margin-bottom: 13px; }
.diagnostics-overall .overall-code { display: grid; min-height: 114px; place-items: center; border-right: 1px solid var(--stage-line); color: #a8c7fa; font-size: 28px; font-weight: 800; letter-spacing: -.08em; }
.diagnostics-overall .overall-copy { padding: 20px; }
.diagnostics-overall .overall-copy small { color: #a8c7fa; font-size: 10px; font-weight: 760; letter-spacing: .1em; }
.diagnostics-overall .overall-copy strong { display: block; margin-top: 5px; color: var(--stage-text); font-size: 20px; letter-spacing: -.04em; }
.diagnostics-overall .overall-copy p { margin-top: 6px; color: var(--stage-muted); font-size: 12px; line-height: 1.45; }
.diagnostics-overall time { padding: 18px; color: var(--stage-muted); font-size: 11px; text-align: right; }
.studio-diagnostic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.studio-diagnostic-grid article { min-height: 142px; padding: 16px; border: 1px solid var(--stage-line); border-radius: 14px; background: var(--stage-raised); }
.studio-diagnostic-grid article strong { display: block; color: var(--stage-text); font-size: 14px; letter-spacing: -.025em; }
.studio-diagnostic-grid article em { display: inline-flex; margin-top: 10px; padding: 5px 7px; border: 1px solid var(--stage-line); border-radius: 7px; color: var(--stage-muted); font-size: 10px; font-style: normal; font-weight: 750; }
.studio-diagnostic-grid article.ok em { border-color: rgb(129 201 149 / 40%); background: rgb(129 201 149 / 15%); color: #b7f5c9; }
.studio-diagnostic-grid article.fail em { border-color: rgb(255 180 171 / 42%); background: rgb(255 180 171 / 14%); color: #ffcbc4; }
.studio-diagnostic-grid article p { margin-top: 10px; color: var(--stage-muted); font-size: 12px; line-height: 1.5; }
.diagnostics-note { margin-top: 14px; padding: 15px 17px; border-left: 2px solid #a8c7fa; color: var(--stage-muted); font-size: 12px; line-height: 1.55; }
.diagnostics-note strong { color: var(--stage-text); }

/* Guide. */
.guide-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 188px; gap: 15px; }
.guide-document { padding: 8px; }
.guide-section { padding: 24px; border-bottom: 1px solid var(--stage-line); }
.guide-section:last-child { border-bottom: 0; }
.guide-chapter { display: flex; align-items: baseline; gap: 11px; margin-bottom: 17px; }
.guide-chapter span { color: #a8c7fa; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.guide-chapter h2 { color: var(--stage-text); font-size: 24px; letter-spacing: -.045em; }
.guide-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; padding: 13px 0; border-top: 1px solid rgb(255 255 255 / 9%); }
.guide-step:first-of-type { border-top: 0; }
.guide-step > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: rgb(168 199 250 / 13%); color: #c9d8ff; font-size: 10px; font-weight: 800; }
.guide-step strong { color: var(--stage-text); font-size: 14px; }
.guide-step p,
.guide-callout p,
.guide-faq p { margin-top: 5px; color: var(--stage-muted); font-size: 12px; line-height: 1.56; }
.guide-callout { padding: 17px; border: 1px solid rgb(168 199 250 / 34%); border-radius: 13px; background: rgb(168 199 250 / 12%); }
.guide-callout strong { color: #e1e9ff; font-size: 14px; }
.guide-faq { border-top: 1px solid var(--stage-line); }
.guide-faq details { padding: 13px 0; border-bottom: 1px solid var(--stage-line); }
.guide-faq summary { color: var(--stage-text); cursor: pointer; font-size: 13px; font-weight: 700; list-style: none; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { float: right; color: #a8c7fa; content: "+"; font-size: 17px; }
.guide-faq details[open] summary::after { content: "−"; }
.guide-spine { display: grid; align-content: start; gap: 3px; padding: 15px 8px; }
.guide-spine small { padding: 0 8px 8px; color: #a8c7fa; font-size: 10px; font-weight: 780; letter-spacing: .1em; }
.guide-spine a { padding: 9px 8px; border-radius: 8px; color: var(--stage-muted); font-size: 11px; font-weight: 650; }
.guide-spine a:hover { background: rgb(168 199 250 / 12%); color: #e9efff; }

@media (max-width: 1040px) {
  .transfer-topbar,
  .studio-topbar { grid-template-columns: 1fr auto; }
  .transfer-context,
  .studio-context,
  .transfer-inspector,
  .studio-page .studio-inspector { display: none; }
  .transfer-layout,
  .studio-layout { grid-template-columns: 72px minmax(0, 1fr); }
  .transfer-dock { margin-left: 72px; margin-right: 0; }
  .studio-page .studio-dock { grid-column: 2; }
}

@media (max-width: 760px) {
  .security-route,
  .security-boundary,
  .guide-workbench { grid-template-columns: 1fr; }
  .security-boundary > div { border-right: 0; border-bottom: 1px solid var(--stage-line); }
  .security-boundary > div:last-child { border-bottom: 0; }
  .guide-spine { display: none; }
  .studio-diagnostic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .transfer-app { min-height: 540px; height: auto; grid-template-rows: 58px minmax(520px, 1fr) auto; }
  .transfer-topbar,
  .studio-topbar { min-height: 58px; padding: 0 12px; }
  .transfer-brand small,
  .transfer-ready,
  .studio-brand small,
  .studio-network [data-network] { display: none; }
  .transfer-brand strong { font-size: 14px; }
  .transfer-top-actions,
  .studio-network { gap: 0; }
  .transfer-layout,
  .studio-layout { grid-template-columns: 1fr; }
  .transfer-layout { min-height: 520px; }
  .transfer-rail,
  .studio-rail { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-around; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-right: 0; background: var(--surface-0); box-shadow: 0 -4px 14px rgb(0 0 0 / 12%); }
  .transfer-rail a,
  .studio-rail a { width: 46px; min-height: 41px; padding: 4px; font-size: 0; }
  .transfer-rail a > span:last-child,
  .studio-rail .rail-label { display: none; }
  .transfer-rail .rail-icon,
  .studio-rail .rail-icon { font-size: 21px; }
  .transfer-workspace { padding: 6px; }
  .transfer-stage { min-height: 508px; height: calc(100dvh - 122px); grid-template-rows: 50px minmax(0, 1fr) 52px; border-radius: 14px; }
  .stage-topline { padding: 0 12px; }
  .stage-topline > span:last-child,
  .stage-footer > span:last-child { display: none; }
  .stage-footer { padding: 0 12px; }
  .transfer-console { width: min(calc(100% - 22px), 540px); }
  .console-heading { padding-top: 20px; }
  .panel,
  .connection-view { padding-bottom: 18px; }
  .drop-zone { min-height: 202px; }
  .code-cluster,
  .incoming-actions { flex-direction: column; }
  .code-cluster > *,
  .incoming-actions > * { width: 100%; }
  .transfer-dock { margin: 0; padding: 9px 12px 72px; }
  .dock-content { align-items: stretch; flex-direction: column; gap: 7px; }
  .dock-status { justify-content: space-between; }
  .dock-status small { display: none; }
  .dock-actions { display: grid; grid-template-columns: 1fr 1.15fr; }
  .dock-actions > * { justify-content: center; }
  .toast { bottom: 148px; right: 12px; }
  .studio-layout { min-height: calc(100dvh - 58px); grid-template-rows: minmax(0, 1fr) auto; }
  .studio-page .studio-workspace { grid-column: 1; grid-row: 1; padding-bottom: 0; }
  .studio-page .studio-stage { min-height: auto; margin: 6px; padding: 25px 18px 31px; border-radius: 14px; }
  .studio-page .studio-stage-head { align-items: start; flex-direction: column; }
  .studio-page .studio-index-value { padding: 10px 0 0; border-top: 1px solid var(--stage-line); border-left: 0; }
  .studio-page .studio-dock { grid-column: 1; grid-row: 2; min-height: 0; flex-direction: column; align-items: stretch; padding: 12px 14px 73px; }
  .studio-page .dock-pulse { justify-content: space-between; }
  .studio-page .dock-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .studio-page .dock-actions > * { justify-content: center; }
  .ledger-head { display: none; }
  .activity-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
  .activity-row .direction-badge { grid-column: 1; }
  .activity-row > time { grid-column: 2; grid-row: 1; }
  .activity-row > span:not(.direction-badge) { grid-column: 2; grid-row: 2; }
  .security-pill-grid,
  .studio-diagnostic-grid { grid-template-columns: 1fr; }
  .diagnostics-overall { grid-template-columns: 66px minmax(0, 1fr); }
  .diagnostics-overall time { grid-column: 1 / -1; padding: 0 17px 16px; text-align: left; }
  .guide-section { padding: 20px 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Product-grade information layouts: task-first surfaces, not repeated dark heroes. */
.studio-page .studio-stage-head h1 { font-weight: 610; letter-spacing: -.052em; }
.studio-page .studio-stage-head p:last-child { font-size: 14px; line-height: 1.55; }

.studio-history-page .studio-stage,
.studio-security-page .studio-stage,
.studio-status-page .studio-stage,
.studio-guide-page .studio-stage,
.studio-blog-page .studio-stage {
  min-height: auto;
  margin: 0;
  padding: clamp(30px, 4vw, 52px);
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
}

.studio-history-page .studio-stage-head,
.studio-security-page .studio-stage-head,
.studio-status-page .studio-stage-head,
.studio-guide-page .studio-stage-head {
  max-width: 880px;
  align-items: start;
  margin-bottom: 28px;
}

.studio-history-page .studio-kicker,
.studio-security-page .studio-kicker,
.studio-status-page .studio-kicker,
.studio-guide-page .studio-kicker { color: var(--blue); }

.studio-history-page .studio-stage-head h1,
.studio-security-page .studio-stage-head h1,
.studio-status-page .studio-stage-head h1,
.studio-guide-page .studio-stage-head h1 { color: var(--ink); font-size: clamp(34px, 4.1vw, 49px); line-height: 1.02; }

.studio-history-page .studio-stage-head p:last-child,
.studio-security-page .studio-stage-head p:last-child,
.studio-status-page .studio-stage-head p:last-child,
.studio-guide-page .studio-stage-head p:last-child { color: var(--muted); }

.studio-history-page .studio-index-value,
.studio-security-page .studio-index-value,
.studio-guide-page .studio-index-value { border-color: var(--line); color: var(--blue-ink); }
.studio-history-page .studio-index-value small,
.studio-security-page .studio-index-value small,
.studio-guide-page .studio-index-value small { color: var(--muted); }

/* History uses a list-detail rhythm. */
.studio-history-page .history-privacy,
.studio-history-page .studio-ledger { border-color: var(--line); background: var(--surface-0); }
.studio-history-page .history-privacy .privacy-key { color: var(--blue); }
.studio-history-page .history-privacy strong,
.studio-history-page .studio-card-header strong,
.studio-history-page .activity-file strong,
.studio-history-page .empty-state strong { color: var(--ink); }
.studio-history-page .history-privacy p,
.studio-history-page .studio-card-header small,
.studio-history-page .activity-file small,
.studio-history-page .activity-row > span,
.studio-history-page .activity-row > time,
.studio-history-page .empty-state { color: var(--muted); }
.studio-history-page .ledger-head { color: var(--muted); }
.studio-history-page .activity-table,
.studio-history-page .activity-row { border-color: var(--line); }
.studio-history-page .activity-row:hover { background: var(--surface-1); }
.studio-history-page .direction-badge { border-color: transparent; background: var(--blue-soft); color: var(--blue-ink) !important; }
.studio-history-page .studio-card-action,
.studio-history-page .studio-quiet-action { border-color: var(--line); color: var(--blue); }

/* Security is a supporting-pane explanation: route is dark, facts stay readable. */
.studio-security-page .security-route { overflow: hidden; padding: 14px; border-radius: 20px; background: var(--stage); box-shadow: var(--shadow-1); }
.studio-security-page .route-endpoint { border-color: var(--stage-line); background: rgb(255 255 255 / 4%); }
.studio-security-page .route-channel { background: rgb(168 199 250 / 12%); }
.studio-security-page .security-pill { border-color: var(--line); background: var(--surface-0); }
.studio-security-page .security-pill strong { color: var(--ink); }
.studio-security-page .security-pill p { color: var(--muted); }
.studio-security-page .security-pill .ordinal { color: var(--blue); }
.studio-security-page .security-boundary { border-color: var(--line); background: var(--surface-0); }
.studio-security-page .security-boundary > div { border-color: var(--line); }
.studio-security-page .security-boundary small { color: var(--blue); }
.studio-security-page .security-boundary strong { color: var(--ink); }
.studio-security-page .security-boundary ul { color: var(--muted); }

/* Status becomes an operational board rather than another article cover. */
.studio-status-page .studio-stage-head { max-width: none; align-items: center; }
.studio-status-page .studio-card-action { flex: 0 0 auto; border-color: var(--line); background: var(--surface-0); color: var(--blue); }
.studio-status-page .diagnostics-overall { overflow: hidden; border-color: transparent; background: var(--blue-soft); }
.studio-status-page .diagnostics-overall .overall-code { border-color: color-mix(in srgb, var(--blue-ink) 22%, transparent); color: var(--blue); }
.studio-status-page .diagnostics-overall .overall-copy small { color: var(--blue-ink); }
.studio-status-page .diagnostics-overall .overall-copy strong { color: var(--blue-ink); font-weight: 640; }
.studio-status-page .diagnostics-overall .overall-copy p,
.studio-status-page .diagnostics-overall time { color: color-mix(in srgb, var(--blue-ink) 75%, var(--muted)); }
.studio-status-page .studio-diagnostic-grid article { border-color: var(--line); background: var(--surface-0); }
.studio-status-page .studio-diagnostic-grid article strong { color: var(--ink); }
.studio-status-page .studio-diagnostic-grid article p { color: var(--muted); }
.studio-status-page .studio-diagnostic-grid article em { border-color: var(--line); color: var(--muted); }
.studio-status-page .diagnostics-note { color: var(--muted); }
.studio-status-page .diagnostics-note strong { color: var(--ink); }

/* The guide is a reading surface with a quiet secondary spine. */
.studio-guide-page .guide-document { border-color: var(--line); background: var(--surface-0); }
.studio-guide-page .guide-section { border-color: var(--line); }
.studio-guide-page .guide-chapter span { color: var(--blue); }
.studio-guide-page .guide-chapter h2,
.studio-guide-page .guide-step strong,
.studio-guide-page .guide-faq summary { color: var(--ink); }
.studio-guide-page .guide-step { border-color: var(--line); }
.studio-guide-page .guide-step > span { background: var(--blue-soft); color: var(--blue-ink); }
.studio-guide-page .guide-step p,
.studio-guide-page .guide-callout p,
.studio-guide-page .guide-faq p { color: var(--muted); }
.studio-guide-page .guide-callout { border-color: transparent; background: var(--blue-soft); }
.studio-guide-page .guide-callout strong { color: var(--blue-ink); }
.studio-guide-page .guide-faq,
.studio-guide-page .guide-faq details { border-color: var(--line); }
.studio-guide-page .guide-faq summary::after { color: var(--blue); }
.studio-guide-page .guide-spine { border-color: var(--line); background: var(--surface-1); }
.studio-guide-page .guide-spine small { color: var(--muted); }
.studio-guide-page .guide-spine a { color: var(--muted); }
.studio-guide-page .guide-spine a:hover { background: var(--blue-soft); color: var(--blue-ink); }

/* The journal remains editorial, but shares the calmer Material scaffold. */
.studio-blog-page .page-stamp { color: var(--muted); }
.studio-blog-page .blog-masthead { border-color: var(--line); }
.studio-blog-page .blog-masthead .eyebrow { color: var(--blue); }
.studio-blog-page .blog-masthead h1 { color: var(--ink); font-weight: 620; }
.studio-blog-page .blog-masthead h1 span { color: var(--blue); }
.studio-blog-page .blog-masthead > p:last-child { border-color: var(--line); color: var(--muted); }
.studio-blog-page .blog-card { border-color: var(--line); background: var(--surface-0); box-shadow: none; }
.studio-blog-page .blog-card:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); background: var(--surface-0); box-shadow: var(--shadow-1); }
.studio-blog-page .blog-card h2,
.studio-blog-page .blog-card h2 a { color: var(--ink); font-weight: 630; }
.studio-blog-page .blog-card-meta { color: var(--blue); }
.studio-blog-page .blog-card-body > p { color: var(--muted); }
.studio-blog-page .blog-card-link { border-color: var(--line); color: var(--blue); }
.studio-blog-page .editorial-strip { border-color: transparent; background: var(--blue-soft); color: var(--blue-ink); }
.studio-blog-page .editorial-strip strong,
.studio-blog-page .editorial-strip a { color: var(--blue-ink); }

@media (max-width: 640px) {
  .transfer-page .transfer-app { height: 100dvh; min-height: 0; grid-template-rows: 58px minmax(0, 1fr); }
  .transfer-page .transfer-layout { min-height: 0; }
  .transfer-page .transfer-workspace { padding-bottom: 68px; }
  .transfer-page .transfer-stage { min-height: 0; height: calc(100dvh - 132px); }
  .transfer-page .transfer-dock { display: none; }
  .transfer-page .console-heading { padding: 18px 8px 13px; }
  .transfer-page .console-heading h1 { font-size: 25px; }
  .transfer-page .drop-zone { min-height: 194px; }
  .studio-history-page .studio-stage,
  .studio-security-page .studio-stage,
  .studio-status-page .studio-stage,
  .studio-guide-page .studio-stage,
  .studio-blog-page .studio-stage { padding: 25px 18px 32px; }
  .studio-history-page .studio-stage-head,
  .studio-security-page .studio-stage-head,
  .studio-status-page .studio-stage-head,
  .studio-guide-page .studio-stage-head { gap: 16px; margin-bottom: 23px; }
  .studio-history-page .studio-stage-head h1,
  .studio-security-page .studio-stage-head h1,
  .studio-status-page .studio-stage-head h1,
  .studio-guide-page .studio-stage-head h1 { font-size: 32px; letter-spacing: -.05em; }
  .studio-history-page .studio-index-value,
  .studio-security-page .studio-index-value,
  .studio-guide-page .studio-index-value { width: 100%; padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .studio-security-page .security-route { padding: 9px; border-radius: 16px; }
  .studio-status-page .studio-stage-head { align-items: start; }
  .studio-status-page .studio-card-action { width: 100%; }
  .studio-blog-page .blog-masthead h1 { font-size: 49px; }
}

/* Theme integrity: every dark work surface draws from the same semantic palette.
   The transfer console intentionally stays dark in both modes; the surrounding
   application, information pages, and all state colors follow the selected mode. */
.stage-footer { background: color-mix(in srgb, var(--stage) 92%, transparent); }
.console-icon,
.drop-zone-icon,
.file-chip-icon,
.connection-orb { background: var(--stage-accent); color: var(--stage-accent-ink); }
.status-kicker,
.file-details small,
.progress-head strong { color: var(--stage-accent); }
.segment:hover,
.share-link:hover,
.secondary-button:hover,
.quiet-button:hover { background: var(--stage-panel-hover); }
.drop-zone { border-color: var(--stage-outline); background: var(--stage-panel); }
.drop-zone.dragging { border-color: var(--stage-accent); background: color-mix(in srgb, var(--stage-accent) 12%, transparent); }
.drop-zone small,
.code-entry input::placeholder { color: var(--stage-subtle); }
.file-chip > button:hover { background: var(--stage-error-soft); color: var(--stage-error); }
.primary-button,
.download-button,
.dock-primary-action,
.studio-page .dock-primary { background: var(--stage-accent); color: var(--stage-accent-ink); }
.primary-button:hover,
.download-button:hover,
.dock-primary-action:hover { background: var(--stage-accent-hover); }
.primary-button:disabled { background: color-mix(in srgb, var(--stage-text) 18%, transparent); color: color-mix(in srgb, var(--stage-text) 42%, transparent); }
.code-entry input { border-color: var(--stage-outline); }
.code-entry input:focus { border-color: var(--stage-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-accent) 16%, transparent); }
.connection-orb.connected { background: var(--stage-success); color: var(--stage-success-ink); }
.room-code { border-color: color-mix(in srgb, var(--stage-accent) 46%, transparent); background: color-mix(in srgb, var(--stage-accent) 12%, transparent); color: var(--stage-accent-text); }
.share-link,
.secondary-button,
.quiet-button { border-color: var(--stage-outline); color: var(--stage-text); }
.progress-track { background: color-mix(in srgb, var(--stage-text) 16%, transparent); }
.progress-track i { background: var(--stage-accent); }
.toast { background: var(--stage-raised); color: var(--stage-text); }

.source-card-icon { background: var(--blue); color: var(--blue-on); }
.transfer-dock,
.studio-page .studio-dock { background: var(--stage-raised); color: var(--stage-text); }
.dock-status,
.studio-page .dock-pulse { color: var(--stage-text); }
.dock-status small,
.studio-page .dock-pulse small { color: var(--stage-muted); }
.dock-tonal-action,
.studio-page .dock-secondary { color: var(--stage-accent-text); }
.studio-page .dock-pulse::before { background: var(--stage-success); }

.studio-page .studio-kicker,
.history-privacy .privacy-key,
.security-pill .ordinal,
.security-boundary small,
.guide-chapter span,
.guide-faq summary::after { color: var(--stage-accent); }
.studio-page .studio-index-value { color: var(--stage-accent-text); }
.studio-page .studio-card-action:hover,
.studio-page .studio-quiet-action:hover { border-color: var(--stage-accent); background: color-mix(in srgb, var(--stage-accent) 12%, transparent); }
.ledger-head { color: var(--stage-subtle); }
.activity-row:hover { background: var(--stage-panel); }
.direction-badge { border-color: color-mix(in srgb, var(--stage-accent) 36%, transparent); background: color-mix(in srgb, var(--stage-accent) 12%, transparent); color: var(--stage-accent-text) !important; }
.empty-state a { color: var(--stage-accent-text); }
.route-endpoint small,
.route-channel small { color: var(--stage-accent); }
.route-device { border-color: var(--stage-accent); background: transparent; }
.route-device::after { background-color: var(--stage-accent); }
.route-channel { background: color-mix(in srgb, var(--stage-accent) 12%, transparent); }
.route-channel strong { color: var(--stage-text); }
.route-line { background: linear-gradient(90deg, transparent, var(--stage-accent) 12%, var(--stage-accent) 88%, transparent); }
.route-line::before,
.route-line::after { background: var(--stage-accent-text); box-shadow: 0 0 0 5px color-mix(in srgb, var(--stage-accent) 15%, transparent); }
.diagnostics-overall .overall-code,
.diagnostics-overall .overall-copy small { color: var(--stage-accent); }
.studio-diagnostic-grid article.ok em { border-color: color-mix(in srgb, var(--stage-success) 40%, transparent); background: var(--stage-success-soft); color: var(--stage-success); }
.studio-diagnostic-grid article.fail em { border-color: color-mix(in srgb, var(--stage-error) 42%, transparent); background: var(--stage-error-soft); color: var(--stage-error); }
.diagnostics-note { border-left-color: var(--stage-accent); }
.guide-step > span { background: color-mix(in srgb, var(--stage-accent) 13%, transparent); color: var(--stage-accent-text); }
.guide-callout { border-color: color-mix(in srgb, var(--stage-accent) 34%, transparent); background: color-mix(in srgb, var(--stage-accent) 12%, transparent); }
.guide-callout strong { color: var(--stage-accent-text); }
.guide-spine small { color: var(--stage-accent); }
.guide-spine a:hover { background: color-mix(in srgb, var(--stage-accent) 12%, transparent); color: var(--stage-text); }

/* Static pages use light/dark page tokens, including success states, not console tones. */
.studio-status-page .studio-diagnostic-grid article.ok em { border-color: color-mix(in srgb, var(--success) 42%, var(--line)); background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.studio-status-page .studio-diagnostic-grid article.fail em { border-color: color-mix(in srgb, var(--error) 42%, var(--line)); background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }