:root {
  color-scheme: light dark;
  --bg: #f4f5f7;
  --bg-elevated: rgba(255,255,255,.82);
  --bg-solid: #ffffff;
  --surface: rgba(255,255,255,.74);
  --surface-strong: rgba(255,255,255,.94);
  --text: #111317;
  --muted: #6e737d;
  --line: rgba(17,19,23,.09);
  --line-strong: rgba(17,19,23,.14);
  --shadow: 0 24px 70px rgba(16,20,28,.10);
  --shadow-soft: 0 12px 35px rgba(16,20,28,.08);
  --accent: #5f74ff;
  --accent-soft: rgba(95,116,255,.16);
  --hero-glow: rgba(95,116,255,.24);
  --connect-base: color-mix(in srgb, var(--accent) 6%, var(--bg));
  --success: #20a66a;
  --danger: #d84b55;
  --warn: #d78c24;
  --route-cover: #f4f5f7;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 13px;
  --max: 1240px;
  --header-h: 78px;
  --ease: cubic-bezier(.2,.75,.2,1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
  --bg: #090a0d;
  --bg-elevated: rgba(21,22,28,.78);
  --bg-solid: #111319;
  --surface: rgba(20,22,28,.72);
  --surface-strong: rgba(24,26,33,.92);
  --text: #f7f8fb;
  --muted: #949aa6;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.14);
  --shadow: 0 30px 90px rgba(0,0,0,.40);
  --shadow-soft: 0 16px 42px rgba(0,0,0,.25);
  --route-cover: #090a0d;
  --connect-base: color-mix(in srgb, var(--accent) 4.5%, var(--bg));
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(900px 580px at 50% -220px, var(--hero-glow), transparent 70%),
    var(--bg);
  transition: background-color .35s ease, color .35s ease;
}
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }

.app { min-height: 100vh; position: relative; }
.app::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .4;
  background-image: linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.shell { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  z-index: 30;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 760; letter-spacing: -.03em; }
.brand-mark { width: 31px; height: 31px; border-radius: 10px; position: relative; background: var(--text); overflow: hidden; }
.brand-mark::before, .brand-mark::after { content:""; position:absolute; background:var(--bg); border-radius:999px; }
.brand-mark::before { width:18px; height:4px; left:6px; top:8px; transform:rotate(-17deg); }
.brand-mark::after { width:15px; height:4px; left:9px; top:18px; transform:rotate(-17deg); }
.brand-text { font-size: 17px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .ghost-button, .primary-button, .soft-button, .key-button, .segment-button {
  border: 0;
  cursor: pointer;
  transition: transform .18s var(--ease), background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.icon-button:hover, .ghost-button:hover, .primary-button:hover, .soft-button:hover, .key-button:hover { transform: translateY(-1px); }
.icon-button:active, .ghost-button:active, .primary-button:active, .soft-button:active, .key-button:active { transform: translateY(0) scale(.985); }
.icon-button {
  width: 42px; height: 42px; display:grid; place-items:center; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(18px);
}
.primary-button {
  min-height: 48px; padding: 0 20px; border-radius: 15px; background: var(--text); color: var(--bg);
  font-weight: 700; box-shadow: var(--shadow-soft);
}
.primary-button.accent { background: var(--accent); color: #fff; }
.primary-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ghost-button, .soft-button {
  min-height: 46px; padding: 0 17px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(16px); font-weight: 650;
}
.soft-button { background: var(--accent-soft); color: var(--text); border-color: transparent; }
.button-row { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }

.home-main { min-height: calc(100vh - var(--header-h)); display:grid; place-items:center; padding: 38px 0 110px; }
.home-hero { text-align:center; max-width: 830px; position:relative; animation: rise .7s var(--ease) both; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; font-weight: 780; color: var(--muted); margin-bottom: 18px; }
.home-hero h1 { margin:0; font-size: clamp(52px, 8vw, 104px); line-height:.93; letter-spacing:-.065em; font-weight: 780; }
.home-hero h1 span { color: var(--muted); }
.home-hero p { margin: 26px auto 30px; max-width: 620px; font-size: clamp(17px, 2vw, 20px); line-height:1.58; color:var(--muted); }
.compat { margin-top:18px; font-size:12px; color:var(--muted); display:flex; gap:10px; justify-content:center; align-items:center; }
.compat-dot { width:4px; height:4px; border-radius:99px; background:var(--line-strong); }
.home-orb { position:absolute; width:320px; height:320px; border-radius:50%; filter: blur(65px); background:var(--hero-glow); left:50%; top:48%; transform:translate(-50%,-50%); z-index:-1; opacity:.75; }

.connecting-app::before { display:none; }
.connecting-app { min-height:100dvh; background:transparent; }

/* Local pairing glow. This intentionally returns to the earlier floating
   blue halo, but keeps it much smaller than the viewport so it fully fades to
   transparent before reaching any page boundary. */
.connecting-backdrop {
  position:fixed;
  left:50%;
  top:35%;
  width:300px;
  height:165px;
  transform:translate(-50%,-50%);
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--accent) 18%, transparent) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 36%,
    color-mix(in srgb, var(--accent) 4%, transparent) 64%,
    transparent 100%
  );
  opacity:.76;
  /* Intentionally no blur filter: JS sizes this box to the projected model
     bounds + 9%, so blue light cannot bleed farther than the requested halo. */
}
html[data-theme="dark"] .connecting-backdrop { opacity:.58; }

.connecting-app { height:100dvh; min-height:100dvh; overflow:hidden; }
.connecting-app > .header,
.connecting-app > .connecting-page { position:relative; z-index:1; }
.connecting-page {
  height:calc(100dvh - var(--header-h));
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  padding:0 0 clamp(18px, 3vh, 34px);
  box-sizing:border-box;
  overflow:hidden;
}
.connecting-stage { display:grid; place-items:center; min-height:0; height:100%; position:relative; overflow:visible; }
.connecting-model {
  width:min(760px, 90vw);
  height:clamp(250px, calc(100dvh - var(--header-h) - 190px), 520px);
  max-height:100%;
  position:relative;
  animation:connectStageIn .7s var(--ease) both;
}
.connecting-model .model-host { width:100%; height:100%; min-height:0; }
.connecting-model .model-glow,
.connecting-model .model-host::before,
.connecting-model .model-ambient { opacity:0 !important; }

.connecting-model .empty-state { width:100%; height:100%; min-height:0; }
.connecting-copy { text-align:center; margin-top:0; position:relative; z-index:4; animation:connectCopyIn .7s .18s var(--ease) both; }
.connecting-copy .eyebrow { margin-bottom:12px; }
.connecting-copy h1 { font-size:clamp(30px, 4.4vw, 52px); margin:0 0 7px; letter-spacing:-.05em; }
.connecting-copy p { color:var(--muted); margin:0; font-size:15px; }
.connect-progress {
  width:120px;
  height:3px;
  border-radius:999px;
  background:var(--line);
  margin:20px auto 0;
  overflow:hidden;
  position:relative;
}
.connect-progress-fill {
  height:100%;
  width:0;
  border-radius:inherit;
  background:var(--accent);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 42%, transparent);
  transition:width 760ms cubic-bezier(.2,.78,.2,1);
  will-change:width;
}

.controller-page { padding: 12px 0 130px; animation: pageIn .45s var(--ease) both; }
.device-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin: 24px 0 24px; }
.device-title h1 { margin:3px 0 8px; font-size:clamp(34px, 5vw, 58px); letter-spacing:-.055em; line-height:1; }
.device-sub { color:var(--muted); font-size:15px; }
.status-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:13px; color:var(--muted); }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 5px color-mix(in srgb, var(--success) 14%, transparent); }
.demo-chip { background:var(--accent-soft); border-color:transparent; color:var(--text); }

.device-grid { display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); gap:18px; align-items:stretch; }
.card { border:1px solid var(--line); background:var(--surface); backdrop-filter: blur(24px); border-radius:var(--radius-xl); box-shadow:var(--shadow-soft); }
.model-card { min-height:570px; overflow:hidden; position:relative; }
.model-host { width:100%; height:470px; position:relative; overflow:hidden; border-radius:inherit; isolation:isolate; }
.model-host::before {
  content:""; position:absolute; inset:8% 8% 4%; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 64%);
  opacity:.32; transform:scale(.9); transition:opacity .8s ease, transform 1.2s var(--ease);
}
.model-host { contain:paint; }
.model-host canvas {
  position:absolute; inset:0; z-index:2; width:100%!important; height:100%!important; display:block;
  opacity:0; transform:translateY(12px) scale(.925); filter:blur(12px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1), transform 1.35s cubic-bezier(.16,1,.3,1), filter .8s ease;
}
.model-host.ready canvas { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
.model-host.ready::before { opacity:.12; transform:scale(1.06); }
.model-glow { position:absolute; inset:18% 14% 8%; z-index:0; border-radius:50%; background:var(--hero-glow); filter:blur(70px); opacity:.72; pointer-events:none; transition:opacity 1.2s ease, transform 1.2s var(--ease); }
html[data-theme="light"] .model-glow { opacity:.68; filter:blur(78px); background:var(--hero-glow); }
html[data-theme="light"] .model-host::before { opacity:.42; }
html[data-theme="light"] .model-host.ready::before { opacity:.20; }
.model-ambient { position:absolute; z-index:1; width:168px; height:168px; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--accent-soft); filter:blur(42px); opacity:.52; animation:modelAmbient 1.8s ease-in-out infinite alternate; pointer-events:none; transition:opacity 1.05s ease, transform 1.05s var(--ease); }
.model-host.ready .model-ambient { opacity:0; transform:translate(-50%,-50%) scale(1.25); animation:none; }
.model-host.model-error .model-ambient { opacity:.22; }

.position-strip { padding: 0 24px 24px; display:grid; grid-template-columns:repeat(8,1fr); gap:7px; }
.position-pill { min-width:0; height:58px; border-radius:16px; border:1px solid var(--line); background:var(--surface-strong); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted); transition:.24s var(--ease); cursor:default; }
.position-pill strong { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; padding:0 4px; }
.position-pill.active { background:var(--text); color:var(--bg); transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:transparent; }
.demo .position-pill { cursor:pointer; }

.settings-card { padding:30px; display:flex; flex-direction:column; }
.card-kicker { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.settings-card h2 { margin:7px 0 9px; font-size:31px; letter-spacing:-.045em; }
.settings-card > p { margin:0 0 24px; color:var(--muted); line-height:1.5; }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:color-mix(in srgb, var(--text) 5%, transparent); border:1px solid var(--line); border-radius:17px; }
.segment-button { min-height:52px; border-radius:13px; background:transparent; color:var(--muted); font-weight:700; }
.segment-button.selected { background:var(--surface-strong); color:var(--text); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.setting-summary { margin-top:24px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.summary-item span { display:block; color:var(--muted); font-size:12px; margin-bottom:5px; }
.summary-item strong { font-size:15px; }
.settings-card .mini-actions { margin-top:auto; padding-top:22px; display:flex; gap:10px; }

.tabs { display:flex; gap:6px; margin:20px 0 14px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { border:0; background:transparent; color:var(--muted); padding:11px 15px; border-radius:999px; font-weight:700; cursor:pointer; white-space:nowrap; }
.tab.active { color:var(--text); background:var(--surface); border:1px solid var(--line); }

.config-card { padding:28px; margin-top:18px; }
.config-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:24px; }
.config-head h3 { margin:5px 0 7px; font-size:27px; letter-spacing:-.04em; }
.config-head p { color:var(--muted); margin:0; line-height:1.55; max-width:680px; }
.key-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.key-item { border:1px solid var(--line); border-radius:20px; padding:15px; background:var(--surface-strong); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.key-meta span { display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:760; }
.key-meta strong { display:block; margin-top:0; font-size:15px; }
.key-button { min-width:66px; height:44px; padding:0 12px; border-radius:12px; background:var(--text); color:var(--bg); font-weight:760; border:0; }
.key-button.listening { background:var(--accent); color:#fff; animation:pulse .9s ease-in-out infinite alternate; }

.axis-layout { display:grid; grid-template-columns: minmax(0, 1fr) 330px; gap:20px; }
.axis-visual { border:1px solid var(--line); border-radius:22px; background:var(--surface-strong); padding:18px; min-height:300px; display:flex; flex-direction:column; }
.axis-visual svg { width:100%; height:240px; overflow:visible; }
.axis-gridline { stroke:var(--line); stroke-width:1; }
.axis-path { fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.axis-point { fill:var(--surface-strong); stroke:var(--accent); stroke-width:3; }
.axis-zero { stroke:var(--line-strong); stroke-dasharray:5 7; }
.axis-legend { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; margin-top:auto; }
.axis-list { display:flex; flex-direction:column; gap:9px; }
.axis-row { display:grid; grid-template-columns:74px 1fr 66px; align-items:center; gap:10px; border:1px solid var(--line); background:var(--surface-strong); padding:11px 12px; border-radius:15px; }
.axis-row label { font-size:12px; color:var(--muted); }
.axis-row input[type=range] { width:100%; accent-color:var(--accent); }
.axis-percent { text-align:right; font-variant-numeric:tabular-nums; font-weight:730; font-size:13px; }
.axis-tools { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

.details { margin-top:18px; border-top:1px solid var(--line); padding-top:16px; }
.details summary { cursor:pointer; color:var(--muted); font-size:13px; user-select:none; }
.details-body { padding-top:15px; display:grid; gap:14px; }
.field { display:grid; gap:8px; }
.field label { color:var(--muted); font-size:12px; }
.field input[type=number] { width:100%; height:44px; border:1px solid var(--line); background:var(--surface-strong); color:var(--text); border-radius:12px; padding:0 12px; outline:none; }

.update-card { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.update-version { display:flex; align-items:center; gap:12px; margin-top:13px; }
.version-badge { padding:8px 11px; border-radius:10px; background:var(--accent-soft); font-weight:760; }
.update-notes { margin:16px 0 0; padding-left:18px; color:var(--muted); line-height:1.65; }

.save-bar { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); width:min(calc(100% - 34px), 760px); z-index:40; border:1px solid var(--line); background:color-mix(in srgb, var(--bg-solid) 86%, transparent); backdrop-filter:blur(24px); border-radius:20px; box-shadow:var(--shadow); padding:10px 10px 10px 17px; display:flex; align-items:center; justify-content:space-between; gap:14px; transition:.25s var(--ease); }
.save-status { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); }
.dirty-dot { width:8px; height:8px; background:var(--line-strong); border-radius:50%; }
.save-bar.dirty .dirty-dot { background:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); }

.service-page { padding:18px 0 100px; animation:pageIn .35s var(--ease) both; }
.service-title { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin:22px 0; }
.service-title h1 { margin:4px 0 8px; font-size:48px; letter-spacing:-.05em; }
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.service-card { padding:24px; }
.live-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.live-stat { border:1px solid var(--line); border-radius:17px; padding:15px; background:var(--surface-strong); }
.live-stat span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.live-stat strong { display:block; margin-top:6px; font-size:27px; font-variant-numeric:tabular-nums; }
.adc-centers { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:15px; }
.adc-center { display:grid; gap:5px; }
.adc-center label { font-size:11px; color:var(--muted); }
.adc-center input { width:100%; height:40px; border:1px solid var(--line); background:var(--surface-strong); color:var(--text); border-radius:11px; padding:0 9px; }
.terminal { margin-top:15px; border-radius:16px; background:#050608; color:#a7efc4; min-height:230px; max-height:320px; overflow:auto; padding:15px; font:12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space:pre-wrap; }
.service-chart { width:100%; height:230px; border:1px solid var(--line); border-radius:16px; background:var(--surface-strong); margin-top:15px; }

/* Web Serial onboarding.
   The native chooser belongs to Chromium and does not expose its screen bounds
   to the page. The guide therefore never tries to trace or point at the native
   window. It simply keeps the web page calm and readable underneath it while
   requestPort({ filters }) limits the chooser to supported USB boards. */
.serial-native-guide {
  position: fixed;
  inset: 0;
  z-index: 700;
  opacity: 0;
  pointer-events: none;
  background: rgba(5, 7, 12, .20);
  backdrop-filter: blur(15px) saturate(.80);
  -webkit-backdrop-filter: blur(15px) saturate(.80);
  transition: opacity .18s ease;
}
html[data-theme="light"] .serial-native-guide {
  background: rgba(247,248,251,.30);
}
.serial-native-guide.visible { opacity: 1; }
.serial-native-guide.closing { opacity: 0; }

.serial-native-guide-steps {
  position:absolute;
  left:50%;
  bottom:clamp(30px, 5.5vh, 62px);
  transform:translateX(-50%);
  width:min(520px, calc(100vw - 28px));
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.serial-native-guide-card {
  flex:1 1 0;
  min-height:56px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:17px;
  background:color-mix(in srgb,var(--bg-solid) 90%,transparent);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  color:var(--text);
}
.serial-native-step {
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:820;
  box-shadow:0 7px 22px var(--accent-soft);
}
.serial-native-guide-card strong {
  display:block;
  font-size:13px;
  line-height:1.25;
  white-space:nowrap;
}

@media (max-width: 640px) {
  .serial-native-guide-steps {
    bottom:18px;
    width:min(360px, calc(100vw - 20px));
    flex-direction:column;
    align-items:stretch;
  }
  .serial-native-guide-card { min-height:50px; }
  .serial-native-guide-card strong { white-space:normal; }
}

.device-info-pop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:rgba(0,0,0,.36); backdrop-filter:blur(10px); padding:20px; animation:fade .2s ease both; }
.modal { width:min(520px,100%); border:1px solid var(--line); background:var(--bg-solid); border-radius:26px; box-shadow:var(--shadow); padding:26px; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.modal h3 { margin:0; font-size:27px; letter-spacing:-.04em; }
.info-list { margin-top:20px; display:grid; gap:0; }
.info-row { display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-top:1px solid var(--line); font-size:14px; }
.info-row span { color:var(--muted); }
.version-secret { background:transparent; border:0; padding:0; color:inherit; cursor:pointer; font-weight:700; }

.toast-root { position:fixed; right:18px; bottom:18px; z-index:200; display:grid; gap:8px; }
.toast { min-width:260px; max-width:390px; border:1px solid var(--line); background:var(--bg-solid); box-shadow:var(--shadow-soft); border-radius:16px; padding:13px 15px; animation:toastIn .28s var(--ease) both; font-size:13px; }
.toast strong { display:block; margin-bottom:3px; }
.toast span { color:var(--muted); }

.empty-state { min-height:340px; display:grid; place-items:center; text-align:center; color:var(--muted); }
.spinner { width:18px; height:18px; border-radius:50%; border:2px solid var(--line-strong); border-top-color:var(--accent); animation:spin .7s linear infinite; }




/* Route transition layers. The blur is independent from the opaque theme
   fill, so it is actually visible before the route is hidden. Animation timing
   is driven by Web Animations API in app.js for deterministic route swaps. */
.route-curtain {
  position:fixed;
  inset:0;
  z-index:5000;
  pointer-events:none;
  overflow:hidden;
}
.route-curtain-blur,
.route-curtain-fill {
  position:absolute;
  inset:-32px;
  pointer-events:none;
  will-change:opacity, backdrop-filter;
}
.route-curtain-blur {
  opacity:0;
  background:color-mix(in srgb, var(--route-cover) 10%, transparent);
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
}
.route-curtain-fill {
  opacity:0;
  background:var(--route-cover);
}
.route-destination-pending {
  opacity:0;
  transform:translateY(18px) scale(.992);
  filter:blur(14px);
  animation:none;
}

@keyframes modelAmbient { from { transform:translate(-50%,-50%) scale(.82); opacity:.28; } to { transform:translate(-50%,-50%) scale(1.18); opacity:.62; } }
@keyframes connectStageIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
@keyframes connectCopyIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

@keyframes rise { from { opacity:0; transform:translateY(18px) scale(.99); } to { opacity:1; transform:none; } }
@keyframes pageIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes scan { 0% { transform:translateX(-120%); } 50%,100% { transform:translateX(230%); } }
@keyframes pulse { from { box-shadow:0 0 0 0 var(--accent-soft); } to { box-shadow:0 0 0 9px var(--accent-soft); } }
@keyframes toastIn { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }


@media (max-height: 720px) {
  .connecting-backdrop { top:34%; width:min(360px, 50vw); height:min(205px, 26vh); }
  .connecting-model { height:clamp(220px, calc(100dvh - var(--header-h) - 160px), 420px); }
  .connecting-copy .eyebrow { margin-bottom:8px; }
  .connecting-copy h1 { font-size:clamp(27px, 4vw, 43px); }
  .connecting-copy p { font-size:14px; }
  .connect-progress { margin-top:15px; }
}
@media (max-width: 980px) {
  .device-grid { grid-template-columns:1fr; }
  .settings-card { min-height:420px; }
  .key-grid { grid-template-columns:repeat(2,1fr); }
  .axis-layout { grid-template-columns:1fr; }
  .axis-list { display:grid; grid-template-columns:1fr 1fr; }
  .service-grid { grid-template-columns:1fr; }
}

@media (max-width: 640px) {
  .serial-coach-spotlight { top:36%; width:min(390px,84vw); height:min(260px,36vh); }
  .serial-coach-window { inset:16px; }
  .serial-coach-arrow { display:none; }
  .serial-coach-card { bottom:14px; padding:19px; }
  .serial-coach-card h2 { font-size:26px; }

  :root { --header-h: 68px; --radius-xl:24px; }
  .shell { width:min(calc(100% - 24px), var(--max)); }
  .brand-text { display:none; }
  .header-actions .status-chip { display:none; }
  .home-main { padding-bottom:80px; }
  .home-hero h1 { font-size:52px; }
  .button-row { align-items:stretch; }
  .button-row > button { flex:1; min-width:150px; }
  .device-topbar { align-items:flex-end; }
  .device-title h1 { font-size:39px; }
  .model-card { min-height:470px; }
  .model-host { height:370px; }
  .position-strip { padding:0 12px 12px; gap:4px; }
  .position-pill { height:47px; border-radius:12px; }
  .position-pill strong { font-size:10px; }
  .settings-card, .config-card { padding:20px; }
  .key-grid { grid-template-columns:1fr; }
  .axis-list { grid-template-columns:1fr; }
  .config-head { display:block; }
  .update-card { grid-template-columns:1fr; }
  .save-bar { bottom:10px; border-radius:17px; padding-left:13px; }
  .save-status span:last-child { display:none; }
  .service-title h1 { font-size:37px; }
  .live-stats { grid-template-columns:1fr 1fr; }
  .adc-centers { grid-template-columns:repeat(2,1fr); }
}

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