:root {
  --bg: #f3f9ff;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-border: rgba(116, 164, 206, 0.25);
  --text: #203d58;
  --muted: #637e96;
  --cyan: #378bce;
  --cyan-bright: #267bbd;
  --blue: #70b4eb;
  --orange: #bd7849;
  --purple: #8967be;
  --lime: #528956;
  --radius: 16px;
}

* { box-sizing: border-box; }

html { color-scheme: light; scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 52% 42%, rgba(131, 196, 244, 0.13), transparent 35%),
    linear-gradient(135deg, #f8fbff 0%, #eef7ff 48%, #f5faff 100%);
  color: var(--text);
  font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(rgba(85,145,193,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85,145,193,.12) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.ambient { position: fixed; width: 360px; height: 360px; filter: blur(100px); opacity: .12; border-radius: 50%; pointer-events: none; }
.ambient-one { top: 10%; right: -180px; background: var(--cyan); }
.ambient-two { bottom: -180px; left: -120px; background: var(--blue); }

.app-shell { width: min(1440px, calc(100% - 64px)); margin: 0 auto; padding-bottom: 42px; }

.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(151, 199, 211, .1); }
.brand { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand-mark { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(97,225,214,.38); background: linear-gradient(145deg, rgba(97,225,214,.14), rgba(79,159,255,.05)); clip-path: polygon(16% 0, 84% 0, 100% 16%, 100% 84%, 84% 100%, 16% 100%, 0 84%, 0 16%); color: var(--cyan-bright); font-weight: 700; font-size: 21px; letter-spacing: -3px; }
.brand-mark i { font-size: 10px; font-style: normal; align-self: end; margin: 0 0 9px -4px; }
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { font-size: 16px; letter-spacing: .13em; font-weight: 600; }
.brand-copy small { color: #597483; font-size: 8px; letter-spacing: .22em; }
.topbar-right, .model-status { display: flex; align-items: center; }
.topbar-right { gap: 18px; }
.topbar-standalone { justify-content: flex-end; }
.page-nav { display: flex; gap: 4px; padding: 3px; border: 1px solid #c8dded; border-radius: 10px; background: #eaf4fc; }
.page-nav a { min-width: 72px; padding: 7px 12px; border-radius: 7px; color: #71889b; text-decoration: none; text-align: center; font-size: 11px; transition: .2s ease; }
.page-nav a:hover { color: #246fa8; }
.page-nav a.active { color: #246fa8; background: #fff; box-shadow: 0 2px 8px #517fa31f; }
.input-mode-switch { display: flex; padding: 3px; border: 1px solid #c8dded; border-radius: 9px; background: #eaf4fc; }
.input-mode-switch button { min-width: 52px; height: 26px; padding: 0 11px; border: 0; border-radius: 6px; color: #71889b; background: transparent; cursor: pointer; font-size: 10px; transition: .2s ease; }
.input-mode-switch button.active { color: #246fa8; background: #fff; box-shadow: 0 2px 8px #517fa31f; }
.input-mode-switch button:disabled { cursor: wait; opacity: .55; }
.model-status { gap: 9px; color: #a9bdc5; font-size: 12px; }
.model-status b { color: #68818d; background: rgba(105,139,151,.1); border-radius: 5px; padding: 3px 7px; font-size: 10px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: blink 2s infinite; }
body[data-device-status="searching"] .status-dot,
body[data-device-status="idle"] .status-dot { background: #9aafc0; box-shadow: none; }
body[data-device-status="stale"] .status-dot,
body[data-device-status="error"] .status-dot { background: #e08a73; box-shadow: 0 0 9px #e08a7366; }
body[data-device-status="streaming"] .status-dot { background: #3ba978; box-shadow: 0 0 10px #3ba97888; }
body[data-device-status="searching"] .device-state,
body[data-device-status="idle"] .device-state { color: #8097aa; }
body[data-device-status="stale"] .device-state,
body[data-device-status="error"] .device-state { color: #c76f59; }
body[data-device-status="streaming"] .device-state { color: #278964; }
.icon-button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(143,193,211,.18); color: #7f9aa6; background: rgba(255,255,255,.025); cursor: pointer; transition: .2s ease; }
.icon-button:hover { color: var(--cyan); border-color: rgba(97,225,214,.45); }

.hero { min-height: 252px; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 40px 1.5% 30px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--cyan); font-size: 9px; letter-spacing: .22em; font-weight: 600; }
.eyebrow span { width: 28px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hero h1 { margin: 16px 0 13px; font-size: clamp(34px, 4vw, 56px); line-height: 1.16; font-weight: 500; letter-spacing: -.035em; }
.hero h1 em { color: transparent; background: linear-gradient(90deg, var(--cyan-bright), #76bcff); -webkit-background-clip: text; background-clip: text; font-style: normal; }
.hero > div:first-child > p { max-width: 680px; margin: 0; color: #718d9a; font-size: 13px; line-height: 1.8; }
.hero-metrics { min-width: 390px; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(143,193,211,.09); background: rgba(10,25,36,.38); border-radius: 12px; }
.hero-metrics div { text-align: center; display: grid; gap: 5px; }
.hero-metrics strong { color: #c8f5f2; font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hero-metrics strong small { color: #7795a1; font-size: 10px; margin-left: 3px; }
.hero-metrics span { color: #58717e; font-size: 10px; }
.hero-metrics i { width: 1px; height: 31px; background: rgba(143,193,211,.1); }

.panel { border: 1px solid var(--panel-border); background: linear-gradient(145deg, rgba(14,34,47,.83), rgba(8,22,33,.78)); border-radius: var(--radius); box-shadow: 0 22px 60px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.025); }
.panel-heading, .section-title { display: flex; align-items: center; justify-content: space-between; }
.panel-heading { padding: 17px 21px 12px; }
.panel-heading > div:first-child, .section-title > div { display: flex; align-items: center; gap: 12px; }
.panel-heading h2, .section-title h2 { margin: 0 0 3px; font-size: 14px; font-weight: 600; letter-spacing: .035em; }
.panel-heading p, .section-title p { margin: 0; color: #4f6a77; font-size: 8px; letter-spacing: .13em; }
.section-index { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(97,225,214,.23); background: rgba(97,225,214,.055); border-radius: 7px; color: var(--cyan); font-size: 9px; }
.signal-tools { display: flex; gap: 6px; align-items: center; }
.signal-tools > span:not(.live-pill) { min-width: 36px; padding: 4px 6px; text-align: center; border-radius: 4px; background: rgba(116,151,164,.06); color: #57717d; font-size: 8px; }
.signal-scale { display: inline-flex; align-items: center; gap: 5px; color: #668397; font-size: 9px; }
.signal-scale select { border: 1px solid #cbdfea; border-radius: 5px; padding: 3px 5px; background: #f8fcff; color: #315b78; font: inherit; outline: none; }
.signal-scale select:focus { border-color: #6aa8d5; box-shadow: 0 0 0 2px #6aa8d526; }
.live-pill { display: flex; align-items: center; gap: 6px; margin-right: 8px; color: var(--cyan); font-size: 8px; letter-spacing: .12em; }
.live-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.signal-stage { position: relative; height: 132px; padding-bottom: 22px; overflow: hidden; }
#signalCanvas { width: 100%; height: 100%; display: block; }
.time-axis { position: absolute; inset: auto 24px 8px; display: flex; justify-content: space-between; color: #3e5965; font-size: 7px; }
.time-axis span:last-child { color: var(--cyan); }

.intelligence-section { margin-top: 27px; }
.section-title { padding: 0 2px 14px; }
.section-note { color: #58717e !important; letter-spacing: .03em !important; font-size: 10px !important; }
.intelligence-grid { display: grid; grid-template-columns: minmax(380px, .92fr) 1.35fr; gap: 16px; }
.core-panel { min-height: 382px; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.core-visual { position: relative; min-height: 315px; display: grid; place-items: center; overflow: hidden; }
.core-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(72,196,190,.11), transparent 43%); }
#networkCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.core-rings, .core-rings i { position: absolute; border-radius: 50%; border: 1px solid rgba(97,225,214,.12); }
.core-rings { width: 210px; height: 210px; border-style: dashed; animation: spin 35s linear infinite; }
.core-rings i:nth-child(1) { inset: 18px; border-color: rgba(97,225,214,.18); animation: spin 18s linear infinite reverse; }
.core-rings i:nth-child(2) { inset: 38px; border-style: dashed; }
.core-rings i:nth-child(3) { inset: 60px; border-color: rgba(97,225,214,.25); box-shadow: 0 0 35px rgba(97,225,214,.08); }
.core-orb { z-index: 2; width: 116px; height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(134,249,237,.43); border-radius: 50%; background: radial-gradient(circle at 38% 32%, rgba(113,235,226,.25), rgba(15,68,75,.65) 45%, rgba(5,23,31,.95)); box-shadow: 0 0 60px rgba(97,225,214,.18), inset 0 0 30px rgba(110,255,239,.12); }
.core-orb strong { font-size: 17px; color: #d7fffa; letter-spacing: .025em; text-shadow: 0 0 12px rgba(157,255,242,.7); }
.core-orb small { margin-top: 3px; color: #74bdb9; font-size: 7px; letter-spacing: .18em; }
.brain-glyph { position: absolute; width: 88px; height: 57px; opacity: .25; }
.brain-glyph span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #bcfff8; box-shadow: 0 0 8px #bcfff8; }
.brain-glyph span:nth-child(1) { left: 13px; top: 24px; }
.brain-glyph span:nth-child(2) { left: 29px; top: 7px; }
.brain-glyph span:nth-child(3) { right: 27px; top: 12px; }
.brain-glyph span:nth-child(4) { right: 11px; top: 31px; }
.brain-glyph span:nth-child(5) { left: 39px; bottom: 5px; }
.core-label { position: absolute; color: #496976; font-size: 8px; letter-spacing: .16em; }
.label-top { top: 26px; }
.label-bottom { bottom: 20px; }
.core-footer { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(143,193,211,.09); background: rgba(3,14,22,.21); }
.core-footer div { padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; border-right: 1px solid rgba(143,193,211,.07); }
.core-footer div:last-child { border: 0; }
.core-footer span { color: #496674; font-size: 8px; }
.core-footer strong { color: #a4c9cf; font-size: 11px; font-weight: 500; }

.task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.task-card { --accent: var(--cyan); min-height: 185px; padding: 19px 20px 15px; border: 1px solid rgba(143,193,211,.12); border-radius: 14px; background: linear-gradient(145deg, rgba(15,34,47,.77), rgba(7,21,31,.78)); transition: border-color .25s ease, opacity .25s ease, transform .25s ease; }
.task-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.task-card[data-task="attention"] { --accent: var(--cyan); }
.task-card[data-task="fatigue"] { --accent: var(--lime); }
.task-card[data-task="emotion"] { --accent: var(--orange); }
.task-card[data-task="workload"] { --accent: var(--purple); }
.task-card:not(.active) { opacity: .38; filter: grayscale(.45); }
.task-head { display: flex; align-items: center; }
.task-icon { width: 36px; height: 36px; margin-right: 11px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); font-size: 17px; box-shadow: inset 0 0 14px color-mix(in srgb, var(--accent) 7%, transparent); }
.task-head p { margin: 0 0 3px; color: #47616e; font-size: 7px; letter-spacing: .12em; }
.task-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.task-toggle { width: 29px; height: 16px; margin-left: auto; padding: 2px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--accent) 12%, transparent); cursor: pointer; }
.task-toggle i { display: block; width: 10px; height: 10px; margin-left: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); transition: margin .2s ease; }
.task-card:not(.active) .task-toggle i { margin-left: 0; background: #60737b; box-shadow: none; }
.result-row { display: flex; justify-content: space-between; align-items: end; margin: 21px 0 9px; }
.result-row span { color: #526c78; font-size: 9px; }
.result-row strong { color: var(--accent); font-size: 20px; font-weight: 500; letter-spacing: .03em; text-shadow: 0 0 15px color-mix(in srgb, var(--accent) 22%, transparent); }
.confidence { height: 3px; border-radius: 4px; background: rgba(131,163,174,.09); overflow: hidden; }
.confidence-bar { display: block; width: var(--value); height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); box-shadow: 0 0 8px var(--accent); transition: width .6s ease; }
.task-foot { margin-top: 9px; display: flex; justify-content: space-between; color: #4e6874; font-size: 8px; }
.task-foot b { color: #78939d; font-weight: 500; }

.control-bar { min-height: 78px; margin-top: 16px; padding: 14px 21px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.session-state { display: flex; align-items: center; gap: 13px; }
.pulse-ring { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(97,225,214,.2); }
.pulse-ring i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px var(--cyan); animation: blink 1.5s infinite; }
.session-state div { display: grid; gap: 4px; }
.session-state strong { font-size: 11px; font-weight: 500; }
.session-state small { color: #496470; font-size: 7px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.control-center { display: flex; gap: 9px; }
.secondary-button, .primary-button { height: 38px; padding: 0 17px; border-radius: 8px; cursor: pointer; transition: transform .2s ease, border-color .2s ease; font-size: 10px; }
.secondary-button:hover, .primary-button:hover { transform: translateY(-1px); }
.secondary-button { border: 1px solid rgba(143,193,211,.13); background: rgba(255,255,255,.025); color: #718a94; }
.secondary-button span { margin-right: 5px; }
.primary-button { min-width: 128px; border: 1px solid rgba(97,225,214,.36); background: linear-gradient(135deg, rgba(61,181,174,.28), rgba(42,128,137,.2)); color: #bcfff8; box-shadow: 0 0 25px rgba(97,225,214,.06); }
.pause-icon { display: inline-block; width: 8px; height: 9px; margin-right: 8px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; vertical-align: -1px; }
.primary-button.paused .pause-icon { width: 0; height: 0; border: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.resource { justify-self: end; display: flex; align-items: center; gap: 9px; color: #526c78; font-size: 8px; }
.resource-bar { width: 68px; height: 3px; background: rgba(131,163,174,.1); border-radius: 4px; overflow: hidden; }
.resource-bar i { display: block; width: 68%; height: 100%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); transition: width .5s; }
.resource strong { color: #78939d; font-size: 9px; font-weight: 500; font-variant-numeric: tabular-nums; }

dialog { width: min(460px, calc(100% - 32px)); padding: 29px; border: 1px solid rgba(97,225,214,.2); border-radius: 17px; background: #0a1a25; color: var(--text); box-shadow: 0 30px 100px #000a; }
dialog::backdrop { background: rgba(2,7,12,.72); backdrop-filter: blur(6px); }
.dialog-close { position: absolute; top: 13px; right: 15px; border: 0; background: none; color: #6c858e; font-size: 22px; cursor: pointer; }
.modal-tag { color: var(--cyan); font-size: 8px; letter-spacing: .17em; }
dialog h2 { margin: 12px 0 10px; font-size: 22px; }
dialog p { margin: 0; color: #78929d; font-size: 12px; line-height: 1.8; }
.modal-flow { display: flex; align-items: center; justify-content: space-between; margin: 22px 0; }
.modal-flow span { padding: 9px 11px; border: 1px solid rgba(97,225,214,.14); border-radius: 7px; color: #a7cece; font-size: 10px; }
.modal-flow i { color: var(--cyan); font-style: normal; }
.modal-tip { padding-top: 16px; border-top: 1px solid rgba(143,193,211,.1); }
.modal-tip code { color: #a5e8e1; }

body.embed .topbar { display: flex; }
body.embed .page-nav { display: flex; }
body.embed .hero { display: none; }
body.embed .app-shell { padding-top: 20px; }

/* One source → one shared model → multiple downstream branches. */
.hero { min-height: 190px; padding: 32px 0; gap: 24px; }
.hero h1 { font-size: clamp(28px, 2.8vw, 40px); margin: 14px 0 10px; }
.hero-metrics { min-width: 300px; padding: 20px; }
.flow-section { padding: 24px; overflow: hidden; }
.flow-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 26px; border-bottom: 1px solid var(--panel-border); }
.flow-heading h2 { font-size: 19px; font-weight: 500; margin: 8px 0 0; }
.flow-legend { display: flex; align-items: center; gap: 8px; color: #74939f; font-size: 10px; }
.flow-legend i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.flow-stage { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 80px; padding-top: 24px; }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.flow-stage > div { position: relative; z-index: 2; min-width: 0; }
.stage-caption { display: flex; align-items: center; gap: 10px; height: 42px; margin-bottom: 20px; }
.stage-caption > span { font-size: 10px; color: var(--cyan); border: 1px solid #61e1d62b; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.stage-caption h2 { font-size: 14px; font-weight: 500; margin: 0 0 4px; }
.stage-caption p { color: #527580; font-size: 8px; letter-spacing: .12em; margin: 0; }
.device-node { margin-top: 50px; padding: 18px 0; background: linear-gradient(150deg, #102934, #0a1b27); }
.device-illustration { width: 150px; margin: 0 auto; }
.device-illustration svg { width: 100%; stroke: #537f8b; stroke-width: 1.5; }
.device-illustration circle { stroke: var(--cyan); fill: #163e42; filter: drop-shadow(0 0 4px #61e1d67a); }
.device-illustration .cap-line { stroke: var(--cyan); }
.device-node h3 { font-size: 16px; text-align: center; margin: 0 0 6px; font-weight: 500; }
.device-subtitle { text-align: center; font-size: 10px; margin: 0; color: #6b8c98; }
.device-state { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0; font-size: 9px; color: var(--cyan); }
.device-state i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.device-node .signal-card { background: #06131b70; border-top: 1px solid #8fc1d318; border-bottom: 1px solid #8fc1d318; }
.device-node .panel-heading { padding: 12px 12px 2px; align-items: start; }
.device-node .panel-heading h2 { font-size: 10px; }
.device-node .panel-heading p { font-size: 7px; line-height: 1.5; letter-spacing: 0; overflow-wrap: anywhere; max-width: 180px; }
.device-node .live-pill { font-size: 6px; margin: 0; gap: 4px; }
.device-node .signal-stage { height: 86px; }
.device-node .time-axis { inset-inline: 12px; }
.buffer-status { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 14px 15px 0; font-size: 9px; color: #6c8c97; }
.buffer-status strong { color: #c4e9e6; font-weight: 400; }
.buffer-status > div { grid-column: 1 / -1; height: 3px; background: #36525a4d; border-radius: 3px; overflow: hidden; }
.buffer-status i { display: block; height: 100%; width: 0; background: var(--cyan); transition: width .2s; }
.model-column .core-panel { margin-top: 90px; min-height: 290px; border-color: #61e1d630; background: linear-gradient(145deg, #13303a, #09202c); }
.model-column .core-visual { min-height: 238px; }
.model-column .core-footer div { display: grid; text-align: center; gap: 6px; padding: 12px 6px; }
.model-column .core-footer strong { font-size: 9px; }
.model-column .core-rings { width: 190px; height: 190px; }
.model-explanation { text-align: center; padding: 20px 0 0; }
.model-explanation strong { color: #d1f0ed; font-size: 14px; font-weight: 500; }
.model-explanation p { color: #6b8f9a; line-height: 1.8; font-size: 10px; margin: 8px 0 12px; }
.model-explanation > span { color: var(--cyan); font-size: 9px; border: 1px solid #61e1d61f; border-radius: 20px; padding: 5px 10px; background: #0b1f27; }
.output-column .task-grid { grid-template-columns: 1fr; gap: 12px; }
.output-column .task-card { min-height: 120px; padding: 13px 15px 11px; position: relative; }
.output-column .task-icon { width: 30px; height: 30px; margin-right: 9px; font-size: 15px; }
.output-column .task-head h3 { font-size: 12px; }
.output-column .result-row { margin: 9px 0 6px; }
.output-column .result-row strong { font-size: 17px; }
.output-column .task-foot { margin-top: 7px; }
.output-column .task-card::before { content: ''; position: absolute; width: 6px; height: 6px; left: -4px; top: calc(50% - 3px); background: var(--accent); border: 1px solid #07131d; border-radius: 50%; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.flow-path { fill: none; stroke-width: 1.3; opacity: .6; }
.flow-path.disabled { opacity: .12; }
.flow-packet { filter: drop-shadow(0 0 4px currentColor); }
.flow-label { fill: #6f97a1; font-size: 8px; letter-spacing: .04em; }
.flow-summary { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--panel-border); font-size: 10px; color: #93b2bc; }
.flow-summary i { color: var(--cyan); font-style: normal; }
.flow-summary small { margin-left: auto; color: #557884; font-size: 9px; }
.flow-section.flow-paused .core-rings, .flow-section.flow-paused .core-rings i { animation-play-state: paused; }
.flow-section.flow-idle .device-state { color: #8b99a3; }

/* Compact copy, larger visual surfaces. */
.topbar { height: 54px; }
.hero { min-height: 120px; padding: 22px 0; }
.hero h1 { margin: 0; font-size: clamp(30px, 3vw, 43px); }
.hero h1 em { margin-left: .2em; }
.hero-metrics { padding-block: 15px; }
.flow-section { padding: 20px 24px 24px; }
.flow-heading { padding-bottom: 16px; }
.flow-heading h2 { margin: 0; }
.stage-caption { height: 32px; margin-bottom: 12px; }
.stage-caption h2 { margin: 0; }
.device-node { margin-top: 28px; }
.device-illustration { width: 176px; }
.device-node .signal-stage { height: 112px; }
.model-column .core-panel { margin-top: 28px; min-height: 352px; }
.model-column .core-visual { min-height: 296px; }
.model-column .core-rings { width: 230px; height: 230px; }
.core-orb { width: 140px; height: 140px; }
.core-orb strong { font-size: 20px; }
.core-orb strong { max-width: 110px; line-height: 1.2; text-align: center; }
.model-explanation { padding-top: 16px; display: grid; justify-items: center; gap: 10px; }
.output-column .task-card { min-height: 132px; padding: 16px; }
.output-column .task-icon { width: 34px; height: 34px; }
.output-column .result-row { margin: 10px 0 7px; }
.result-row strong { margin-left: auto; font-size: 21px; }
.output-column .result-row strong { font-size: 20px; }

/* Light blue palette only; layout and interactions remain unchanged. */
.panel { background: linear-gradient(145deg, #ffffffed, #f4f9ffed); box-shadow: 0 22px 60px rgba(66, 117, 161, .07), inset 0 1px #fff; }
.brand-mark { border-color: #9bc9ed; background: linear-gradient(145deg, #dfedfc, #f4faff); }
.brand-copy small, .model-status, .hero > div:first-child > p,
.hero-metrics span, .hero-metrics strong small, .flow-legend,
.stage-caption p, .device-subtitle, .buffer-status, .core-label,
.core-footer span, .model-explanation p, .flow-summary,
.flow-summary small, .task-head p, .result-row span, .task-foot,
.session-state small { color: var(--muted); }
.model-status b { color: #527594; background: #e4f0fb; }
.icon-button { color: #64829c; background: #ffffffa6; border-color: #c8dff1; }
.icon-button:hover { border-color: #88bfe8; }
.hero h1 em { background-image: linear-gradient(90deg, #267bbd, #61a9df); }
.hero-metrics { background: #ffffffb3; border-color: #d4e5f3; }
.hero-metrics strong, .core-footer strong, .buffer-status strong,
.model-explanation strong { color: #285d86; }
.hero-metrics i, .confidence, .resource-bar { background: #dceaf6; }
.section-index, .stage-caption > span, .pulse-ring { border-color: #b8d7ef; background: #edf6ff; }
.device-node { background: linear-gradient(150deg, #f3f9ff, #ffffff); }
.device-illustration svg { stroke: #87a9c3; }
.device-illustration circle { fill: #e3f1ff; filter: drop-shadow(0 0 4px #7cb8e66b); }
.device-node .signal-card { background: #edf6ffb3; border-color: #d6e6f3; }
.panel-heading p, .time-axis { color: var(--muted); }
.buffer-status > div { background: #d9e9f7; }
.model-column .core-panel { border-color: #b4d6f1; background: linear-gradient(145deg, #e6f3ff, #f8fcff); }
.core-visual::before { background: radial-gradient(circle, #8fc6f333, transparent 43%); }
.core-rings, .core-rings i { border-color: #73afe533; }
.core-rings i:nth-child(1) { border-color: #73afe54d; }
.core-rings i:nth-child(3) { border-color: #73afe566; box-shadow: 0 0 35px #7cb8e61f; }
.core-orb { border-color: #93c3e7; background: radial-gradient(circle at 38% 32%, #ffffff, #d5ebfe 45%, #b9dbf6); box-shadow: 0 0 60px #79b9ed33, inset 0 0 30px #ffffff80; }
.core-orb strong { color: #2b78b5; text-shadow: 0 0 12px #ffffffb3; }
.core-orb small { color: #5083aa; }
.brain-glyph span { background: #5498cf; box-shadow: 0 0 8px #88bfe8; }
.core-footer { background: #f5faffb3; border-color: #cbdff0; }
.core-footer div { border-color: #d6e6f3; }
.model-explanation > span { border-color: #c8e1f5; background: #edf6ff; }
.task-card { border-color: #d3e4f2; background: linear-gradient(145deg, #ffffff, #f5faff); }
.task-foot b, .resource, .resource strong, .session-state small { color: var(--muted); }
.output-column .task-card::before { border-color: #f4f9ff; }
.result-row strong { text-shadow: none; }
.flow-label { fill: #64829c; }
.secondary-button { border-color: #c8dded; background: #ffffffb3; color: #5c7b94; }
.primary-button { border-color: #9dc9eb; background: linear-gradient(135deg, #d8ecff, #e7f4ff); color: #286ca1; box-shadow: 0 0 25px #79b9ed14; }
dialog { border-color: #bfdcf2; background: #f8fcff; box-shadow: 0 30px 100px #335d8533; }
dialog::backdrop { background: #54738e40; }
dialog p, .dialog-close { color: var(--muted); }
.modal-flow span { border-color: #c6dff2; color: #466c8c; background: #edf6ff; }
.modal-tip code { color: #267bbd; }

@media (max-width: 1150px) {
  .flow-stage { gap: 48px; }
  .flow-section { padding: 20px; }
  .flow-legend { font-size: 8px; }
}
@media (max-width: 850px) {
  .flow-stage { grid-template-columns: 1fr; gap: 86px; }
  .device-node, .model-column .core-panel { margin-top: 0; }
  .input-column, .model-column { width: min(360px, calc(100% - 56px)); margin: 0 auto; }
  .output-column { padding-left: 44px; }
  .model-column .core-panel { min-height: 300px; }
  .flow-heading { align-items: start; gap: 12px; }
  .flow-legend { max-width: 130px; line-height: 1.6; }
  .flow-summary { flex-wrap: wrap; }
  .flow-summary small { flex-basis: 100%; margin-left: 0; }
}

@keyframes blink { 50% { opacity: .35; transform: scale(.86); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .app-shell { width: min(100% - 32px, 900px); }
  .hero { align-items: flex-start; flex-direction: column; gap: 24px; }
  .hero-metrics { width: 100%; min-width: 0; }
  .intelligence-grid { grid-template-columns: 1fr; }
  .core-panel { min-height: 360px; }
}

@media (max-width: 640px) {
  .app-shell { width: calc(100% - 20px); padding-bottom: 20px; }
  .topbar { height: 68px; }
  .brand-copy small, .model-status span:not(.status-dot), .model-status b { display: none; }
  .topbar-right { gap: 10px; }
  .page-nav a { min-width: 58px; padding-inline: 8px; }
  .input-mode-switch button { min-width: 46px; }
  .hero { min-height: auto; padding: 36px 4px 27px; }
  .hero h1 { font-size: 36px; }
  .hero-metrics { padding: 17px 12px; }
  .signal-tools > span:not(.live-pill), .section-note { display: none; }
  .task-grid { grid-template-columns: 1fr; }
  .control-bar { grid-template-columns: 1fr; gap: 16px; }
  .control-center { grid-row: 1; width: 100%; }
  .control-center button { flex: 1; }
  .resource { justify-self: stretch; }
  .resource-bar { flex: 1; }
  .core-footer div { padding: 12px 8px; display: grid; gap: 5px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}