/* Mockup-faithful visual layer. Recommendation behavior and content live in app.mjs. */
:root {
  --black: #061326;
  --surface: #10243f;
  --stroke: rgba(189, 217, 255, .25);
  --stroke-bright: rgba(218, 234, 255, .38);
  --text: #f7faff;
  --muted: #b8cae3;
  --blue: #cfe2ff;
  --link: #cce0ff;
  --cyan: #94d8ff;
  --violet: #c5b8ff;
  --green: #79e3ba;
  --amber: #ffd59a;
  --red: #ffadb8;
}
html { background: #061326; }
body {
  min-width: 320px;
  overflow-x: clip;
  color: var(--text);
  background-color: #061326;
  background-image:
    linear-gradient(180deg, rgba(2,8,25,.15) 0%, rgba(3,12,29,.06) 42%, rgba(4,13,30,.2) 72%, #061326 100%),
    url('./vision-landscape.png');
  background-position: center top, center -85px;
  background-size: 100% 1250px, 100% auto;
  background-repeat: no-repeat;
}
a, button { -webkit-tap-highlight-color: transparent; }
.page { max-width: 1600px; padding: 0 clamp(24px, 2.35vw, 40px); }
.hero {
  position: relative;
  isolation: isolate;
  height: 310px;
  display: flex;
  align-items: flex-start;
}
.hero-brand { position: absolute; z-index: 3; top: 17px; right: 20px; display: flex; align-items: center; gap: 16px; }
.hero-brand .lab-logo { width: 140px; }
.hero-copy { position: relative; z-index: 2; padding: 19px 0 0 clamp(12px, 2.5vw, 40px); }
.eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: #b8ccee; }
.eyebrow img { display: block; width: 32px; height: 32px; object-fit: contain; }
.eyebrow strong { color: #f6f9ff; font-size: 16px; font-weight: 750; letter-spacing: .025em; }
.hero h1 {
  margin: 0;
  font-size: clamp(60px, 4.75vw, 70px);
  font-weight: 500;
  letter-spacing: -.058em;
  line-height: .97;
}
.hero h1 span { color: white; }
.hero-description {
  max-width: 555px;
  margin: 13px 0 0;
  color: #c5d3e7;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
}
.hero-orbit {
  position: absolute;
  z-index: 1;
  right: 17%;
  top: -25px;
  width: min(30vw, 470px);
  height: auto;
  mask-image: radial-gradient(ellipse 51% 48% at 50% 50%, #000 68%, transparent 99%);
  filter: drop-shadow(0 15px 30px rgba(148,191,255,.3));
  transform: rotate(-9deg);
}
.hero-aside {
  position: absolute;
  right: 8.2%;
  top: 80px;
  color: #aabbd8;
  font-size: 11px;
  letter-spacing: .22em;
  line-height: 1.7;
}
.hero-aside::after { content: ''; display: block; width: 30px; height: 1px; margin-top: 18px; background: #afc7ea; }
.panel {
  border: 1px solid rgba(194,220,253,.25);
  border-radius: 16px;
  background: linear-gradient(130deg, rgba(165,198,243,.17), rgba(36,82,136,.17) 55%, rgba(119,167,222,.16));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 18px 44px rgba(0,8,24,.21);
  backdrop-filter: blur(25px);
}
.hardware {
  display: grid;
  grid-template-columns: minmax(250px, 25%) minmax(0, 1fr);
  grid-template-rows: 121px auto;
  gap: 0 14px;
  min-height: 150px;
  padding: 11px 22px 8px 34px;
}
.hardware-intro { align-self: center; }
.hardware h2 { margin: 0; font-size: 21px; font-weight: 560; letter-spacing: -.028em; }
.hardware-intro > p { margin: 6px 0 0; color: #b8c9e2; font-size: 12px; }
.hardware-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 11px; }
.edition-link { display: inline-block; padding: 0; border: 0; background: none; color: #9fc6ff; font: inherit; font-size: 11px; cursor: pointer; }
.edition-link:hover { color: white; text-decoration: underline; }
.presets { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.preset {
  position: relative;
  min-height: 121px;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 7px 8px;
  border: 1px solid rgba(215,233,255,.24);
  border-radius: 12px;
  background: rgba(216,232,255,.09);
  text-align: center;
}
.preset:hover { background: rgba(230,241,255,.17); transform: translateY(-2px); }
.preset.active {
  border-color: #cce2ff;
  background: linear-gradient(145deg,rgba(202,223,255,.25),rgba(120,164,233,.14));
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 0 0 1px rgba(213,231,255,.3), 0 0 18px rgba(153,191,255,.28);
}
.preset.active::after {
  content: '✓';
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #a9bdff;
  color: #233164;
  font-size: 12px;
}
.device-art {
  display: block;
  flex: none;
  width: min(100%, 106px);
  height: 62px;
  background-image: url('./vision-devices.png');
  background-repeat: no-repeat;
  background-size: 400% auto;
  background-position-y: center;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.25));
}
.device-art.laptop { background-position-x: 0%; }
.device-art.studio { background-position-x: 33.333%; }
.device-art.pc-laptop { background-image: url('./vision-pc-laptop.png'); background-size: contain; background-position: center; mix-blend-mode: screen; }
.device-art.pc-desktop { background-image: url('./vision-pc-desktop.png'); background-size: contain; background-position: center; filter: brightness(1.35) drop-shadow(0 0 8px rgba(124,194,255,.35)); }
.preset strong { margin-top: 1px; font-size: 12px; font-weight: 600; }
.preset small { color: #b9cce5; font-size: 10px; }
.advanced {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  border: 0;
  color: #a9c0de;
  font-size: 10px;
}
.advanced summary { width: fit-content; padding: 4px 0 0; cursor: pointer; list-style: none; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary:hover { color: white; }
.advanced summary span { margin-left: 4px; }
.gpu-detection { margin: 11px 0 0; padding: 9px 11px; border: 1px solid rgba(173,212,255,.28); border-radius: 10px; color: #dbeafe; background: rgba(18,47,89,.5); font-size: 11px; line-height: 1.45; }
.gpu-detection[hidden] { display: none; }
.advanced-content { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 20px; margin-top: 11px; padding: 13px 0 4px; border-top: 1px solid var(--stroke); }
#hardware-form { margin: 0; padding: 0; border: 0; }
.hardware-fields { display: grid; grid-template-columns: 1.4fr .7fr .7fr auto; align-items: end; gap: 8px; }
.form-field { margin: 0; }
.form-field > span:first-child { margin-bottom: 5px; }
.form-field select, .input-wrap { height: 36px; background: rgba(7,22,46,.65); }
.primary-button { min-height: 36px; margin: 0; padding: 0 11px; color: #173154; background: #e2efff; white-space: nowrap; }
.primary-button:hover { color: #173154; background: white; }
.input-note { margin-top: 8px; }
.use-case-panel { display: block; margin: 0; padding: 0; border: 0; background: none; }
.use-case-panel h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.use-case-list { gap: 6px; }
.use-case { background: rgba(218,235,255,.07); color: #d3e1f4; }
.use-case.active { border-color: #dceaff; color: #142947; background: #e2edff; box-shadow: none; }
.results-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 12px;
}
.feature, .explorer {
  min-width: 0;
  min-height: 390px;
  padding: 20px clamp(22px, 2.25vw, 35px);
}
.feature { background: linear-gradient(120deg,rgba(172,196,244,.2),rgba(17,47,90,.24) 52%,rgba(95,158,213,.17)); }
.feature-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.feature h2, .explorer h2 { margin: 0; font-size: 21px; font-weight: 580; letter-spacing: -.035em; }
.feature-state {
  margin: 0;
  padding: 5px 17px;
  border: 0;
  background: #b6b4ff;
  color: #273772;
  font-size: 10px;
  font-weight: 680;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.feature-body { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(190px,1fr); gap: 0; margin-top: 24px; }
.feature-model {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr);
  grid-template-rows: auto auto auto 1fr auto;
  min-height: 290px;
  padding: 0 24px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.feature-model::after {
  content: '';
  position: static;
  z-index: 0;
  grid-column: 1;
  grid-row: 1 / 4;
  width: 106px;
  height: 107px;
  background: url('./vision-emblem.png') center / contain no-repeat;
  filter: drop-shadow(0 5px 10px rgba(63,80,200,.15));
  opacity: 1;
}
.feature-model h3 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 11px 0 0;
  font-size: clamp(29px, 2.5vw, 39px);
  font-weight: 520;
  line-height: 1.04;
}
.feature-identity { grid-column: 2; grid-row: 2; margin-top: 3px; }
.feature-identity .maker-symbol { display: none; }
.feature-maker { color: #c6d6ec; font-size: 13px; }
.feature-fit { grid-column: 2; grid-row: 3; max-width: none; margin: 10px 0 0; color: #d4e2f3; font-size: 10px; }
.feature-workloads { grid-column: 1 / -1; grid-row: 4; align-self: start; margin: 14px 0 0; }
.feature-workloads h4 { margin: 0 0 7px; color: #f3f8ff; font-size: 13px; font-weight: 650; line-height: 1.3; }
.feature-workloads-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.feature-workloads-list li { position: relative; padding-left: 16px; color: #d7e5f5; font-size: 12px; line-height: 1.3; }
.feature-workloads-list li::before { content: '✓'; position: absolute; left: 0; color: #7fddc6; }
.feature-workloads.is-stretch .feature-workloads-list li::before { content: '?'; color: var(--amber); }
.feature-workloads.is-unlikely .feature-workloads-list li::before { content: '×'; color: var(--red); }
.feature-workloads-note { margin: 7px 0 0; color: #adc0d8; font-size: 10px; line-height: 1.3; }
.feature-actions { grid-column: 1 / -1; grid-row: 5; margin: 12px 0 0; }
.secondary-button, .ghost-button { min-height: 39px; padding: 0 18px; font-size: 12px; }
.secondary-button { border-color: transparent; color: #173052; background: #f4f8ff; }
.secondary-button:hover { color: #173052; background: white; }
.ghost-button { border-color: rgba(220,235,255,.28); background: rgba(192,216,252,.07); }
.ghost-button:hover { background: rgba(213,230,255,.15); }
.memory-panel {
  min-height: 275px;
  margin-top: 4px;
  padding: 3px 0 0 26px;
  border: 0;
  border-left: 1px solid rgba(199,223,255,.24);
  border-radius: 0;
  background: none;
}
.memory-top { display: block; }
.memory-top span { color: #eef4ff; font-size: 12px; }
.memory-top strong { display: block; margin-top: 10px; font-size: 29px; font-weight: 520; letter-spacing: -.04em; }
.memory-name { margin: 5px 0 10px; color: #b7c9e3; font-size: 10px; }
.memory-track { height: 17px; border: 0; border-radius: 999px; background: rgba(206,227,255,.27); }
.memory-fill { background: linear-gradient(90deg,#8caeff,#baa7ff); }
.memory-legend { margin-top: 14px; color: #c6d5eb; font-size: 10px; }
.memory-explanation { margin-top: 17px; padding-top: 17px; color: #e3efff; font-size: 11px; }
.memory-explanation::before { content: '✓'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 7px; border: 1px solid #77dbd1; border-radius: 50%; color: #77dbd1; }
.memory-explanation.is-stretch::before { content: '?'; border-color: var(--amber); color: var(--amber); }
.memory-explanation.is-unlikely::before { content: '×'; border-color: var(--red); color: var(--red); }
.explorer { background: linear-gradient(125deg,rgba(82,143,198,.24),rgba(22,65,111,.22) 57%,rgba(102,165,217,.19)); }
.explorer-top { display: grid; grid-template-columns: minmax(130px,.75fr) minmax(0,1.25fr); align-items: start; gap: 14px; }
.explorer-heading { display: block; }
.count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.explorer-controls { display: flex; gap: 7px; margin: 0; }
.search-field { flex: 1; min-width: 0; height: 37px; border-color: rgba(215,233,255,.29); border-radius: 999px; background: rgba(8,24,52,.22); }
.search-field input { color: #fff; }
.search-field input::placeholder { color: #adbfda; }
.fit-filter-label { gap: 0; }
.fit-filter-label span { display: none; }
.fit-filter-label select { width: 96px; height: 37px; border-color: rgba(215,233,255,.25); border-radius: 999px; background: rgba(10,27,55,.28); color: #e0ebfb; }
.provider-list { margin: 10px 0 0; gap: 5px; }
.provider { min-height: 30px; padding: 0 10px; border-color: rgba(219,236,255,.26); background: rgba(203,223,253,.06); color: #e4efff; font-size: 11px; }
.provider.active { border-color: #fff; color: #14294a; background: #f7f9ff; }
.provider-more { color: #d8e7ff; }
.result-legend, .table-labels { display: none; }
.model-list { height: 254px; margin-top: 13px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(165,199,255,.65) rgba(165,199,255,.12); border-top: 1px solid rgba(205,226,255,.1); }
.model-list:focus-visible { outline: 2px solid #bfd8ff; outline-offset: 3px; }
.model-row { grid-template-columns: minmax(0,1fr) 46px; min-height: 55px; border-color: rgba(205,226,255,.11); }
.model-row.selected { background: rgba(178,211,255,.07); box-shadow: inset 2px 0 #c9ddff; }
.row-select { grid-template-columns: minmax(120px,1.1fr) minmax(130px,1.25fr) 89px; padding: 6px 4px; gap: 9px; }
.row-identity { gap: 10px; }
.row-rank, .row-memory, .row-chevron { display: none; }
.maker-symbol.small { width: 26px; height: 26px; border-radius: 5px; }
.row-name strong { color: #f1f6ff; font-size: 12px; }
.row-name small { color: #aebed7; font-size: 10px; }
.row-focus { color: #bccde3; font-size: 10px; }
.status { width: fit-content; padding: 4px 8px; border-radius: 999px; background: rgba(94,159,132,.2); font-size: 10px; }
.status-stretch { background: rgba(219,166,95,.17); }
.status-unlikely { background: rgba(226,125,141,.16); }
.feature-fit .status { flex: none; }
.compare-toggle { width: 26px; height: 26px; border-color: rgba(202,224,255,.47); background: rgba(185,211,249,.08); }
.compare-toggle:hover, .compare-toggle.active { background: #c6ddff; color: #142746; }
.model-dialog-actions { display: flex; justify-content: flex-end; margin: -4px -4px 4px; }
.model-dialog-actions button { width: 32px; height: 32px; border: 1px solid rgba(215,233,255,.4); border-radius: 50%; background: rgba(171,199,255,.12); color: #f4f8ff; font-size: 20px; line-height: 1; }
.model-dialog-actions button:hover { background: rgba(199,221,255,.23); }
#model-dialog { width: min(760px,calc(100vw - 30px)); padding: 22px 25px 27px; border-color: rgba(194,220,255,.48); background: radial-gradient(circle at 95% 0,rgba(92,126,229,.33),transparent 44%),linear-gradient(145deg,#183966,#091d3e 70%); box-shadow: 0 35px 110px rgba(0,0,0,.75),0 0 42px rgba(101,146,248,.22); }
#model-dialog .detail { margin: 0; padding: 0; border: 0; background: none; }
#model-dialog .detail h3 { font-size: 28px; }
#model-dialog .detail-head p { color: #bed0e8; font-size: 13px; }
#model-dialog .detail-block h4 { font-size: 12px; }
#model-dialog .detail-block p, #model-dialog .detail-uses { color: #bdcfe8; font-size: 11px; }
.footnotes { display: grid; grid-template-columns: minmax(0,.87fr) minmax(0,1.13fr); gap: 12px; margin-top: 16px; }
.system-card { display: flex; flex-direction: column; min-width: 0; padding: 23px 25px 20px; }
.system-observed { background: linear-gradient(135deg,rgba(45,99,159,.34),rgba(8,31,65,.71)); }
.system-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.system-card-head > div { min-width: 0; }
.system-head-identity { display: flex; align-items: center; gap: 16px; }
.system-head-identity > div { min-width: 0; }
.system-device-art { width: 86px; height: 66px; background-size: 400% auto; filter: drop-shadow(0 7px 11px rgba(0,0,0,.34)) drop-shadow(0 0 11px rgba(119,179,255,.25)); }
.system-device-art[hidden] { display: none; }
.system-device-art.desktop { background-image: none; position: relative; width: 76px; height: 60px; border: 3px solid #a3c5ff; border-radius: 7px; background: linear-gradient(140deg,#10305e,#3978ca 45%,#0a1636); box-shadow: inset 0 0 0 3px #081a38,0 0 16px rgba(124,194,255,.27); }
.system-device-art.desktop::after { content: ''; position: absolute; left: 28px; bottom: -10px; width: 18px; height: 7px; border-bottom: 3px solid #a3c5ff; border-left: 3px solid #a3c5ff; border-right: 3px solid #a3c5ff; border-radius: 0 0 3px 3px; }
.system-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: #a9c9ff; font-size: 9px; font-weight: 650; letter-spacing: .19em; }
.scan-light { width: 7px; height: 7px; border-radius: 50%; background: #73e6d6; box-shadow: 0 0 10px #62d9d0; }
.system-card h2 { margin: 0; font-size: 21px; font-weight: 550; letter-spacing: -.035em; }
.system-card-head p:not(.system-kicker) { max-width: 48ch; margin: 4px 0 0; color: #b5c9e3; font-size: 11px; line-height: 1.45; }
.system-action { flex: none; padding: 5px 0; border: 0; color: #d5e7ff; background: none; font-size: 11px; font-weight: 600; white-space: nowrap; }
.system-action:hover { color: white; text-decoration: underline; text-underline-offset: 3px; }
.system-source { flex: none; margin-top: 3px; padding: 5px 9px; border: 1px solid rgba(184,167,255,.4); border-radius: 999px; color: #dfd6ff; background: rgba(154,130,245,.16); font-size: 10px; white-space: nowrap; }
.system-scan-status { min-height: 14px; margin: 10px 0 0; color: #8bdacc; font-size: 10px; }
.system-spec-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 19px; margin: 14px 0 0; }
.system-spec { min-width: 0; padding: 10px 0 11px; border-top: 1px solid rgba(208,229,255,.15); }
.system-spec.wide { grid-column: 1 / -1; }
.system-spec dt { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #a9bfda; font-size: 10px; }
.spec-origin { color: #89a9cf; font-size: 9px; white-space: nowrap; }
.spec-origin.approximate { color: #d6c79a; }
.spec-origin.unavailable { color: #899db9; }
.system-spec dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #f5f9ff; font-size: 13px; font-weight: 520; line-height: 1.3; }
.system-spec dd.muted { color: #a9bad1; font-weight: 400; }
.system-limit { display: flex; align-items: baseline; gap: 10px; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid rgba(208,229,255,.15); color: #b7cae3; font-size: 10px; line-height: 1.45; }
.system-limit strong { flex: none; color: #e5efff; font-weight: 600; }
.workload-panel { background: radial-gradient(ellipse at 100% 0,rgba(95,128,213,.22),transparent 46%),linear-gradient(140deg,rgba(61,90,162,.32),rgba(9,31,67,.72)); }
.workload-budget { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(176,203,255,.25); border-radius: 13px; background: linear-gradient(100deg,rgba(53,94,159,.37),rgba(34,57,112,.18)); }
.workload-budget:empty { display: none; }
.workload-budget-copy { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.workload-budget-label { color: #b9d0eb; font-size: 10px; }
.workload-budget-copy strong { flex: none; color: #f5f8ff; font-size: 13px; font-weight: 620; }
.workload-budget-track { height: 5px; margin-top: 11px; border-radius: 5px; background: rgba(203,223,255,.18); overflow: hidden; }
.workload-budget-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#75caff,#a7a6ff); box-shadow: 0 0 14px rgba(146,170,255,.55); }
.workload-groups { flex: 1; }
.workload-group { margin-top: 17px; }
.workload-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.workload-group-head h3 { margin: 0; color: #eaf2ff; font-size: 12px; font-weight: 610; }
.workload-group-head > span { color: #8ca7c9; font-size: 10px; font-variant-numeric: tabular-nums; }
.workload-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.workload-card-grid.single { grid-template-columns: 1fr; }
.workload-card { min-width: 0; min-height: 112px; padding: 11px 12px; border: 1px solid rgba(186,212,255,.2); border-radius: 11px; color: inherit; background: rgba(9,28,62,.42); text-align: left; }
.workload-card-grid.single .workload-card { min-height: 0; }
button.workload-card { cursor: pointer; }
button.workload-card:hover { border-color: rgba(178,211,255,.55); background: rgba(32,62,112,.55); transform: translateY(-1px); }
button.workload-card:focus-visible { outline: 2px solid #d5e7ff; outline-offset: 2px; }
.workload-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.workload-card-top strong { color: #f6f9ff; font-size: 12px; font-weight: 600; }
.workload-status { flex: none; color: #74e0c4; font-size: 9px; font-weight: 600; }
.tier-limited .workload-status { color: #e8c27f; }
.tier-beyond .workload-status { color: #e2a6b5; }
.tier-unassessed .workload-status { color: #a9bfda; }
.workload-description { margin: 3px 0 0; color: #b7cae2; font-size: 10px; line-height: 1.3; }
.workload-evidence { margin: 7px 0 0; color: #d9e9ff; font-size: 10px; font-weight: 570; }
.workload-meter { display: block; height: 3px; margin-top: 7px; border-radius: 4px; background: rgba(203,223,255,.18); overflow: hidden; }
.workload-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#63d8c3,#85b3ff); }
.tier-limited .workload-meter i { background: linear-gradient(90deg,#a9a5ff,#edc681); }
.tier-beyond .workload-meter i { background: linear-gradient(90deg,#ad8cff,#e49bab); }
.workload-reason { margin: 5px 0 0; color: #9fb8d5; font-size: 9px; line-height: 1.28; }
.workload-caveat { margin: 15px 0 11px; color: #adc3de; font-size: 10px; line-height: 1.45; }
.workload-pending { padding: 22px 0; color: #b5c9e3; font-size: 12px; }
.system-card-actions { display: flex; flex-wrap: wrap; gap: 10px 21px; padding-top: 13px; border-top: 1px solid rgba(208,229,255,.15); }
.disclosure { color: #9fb2d2; }
footer { max-width: 1600px; color: #9db1ce; }
.compare-tray { border-color: rgba(209,228,255,.4); background: rgba(15,38,72,.96); }
.tray-open { color: #163054; background: #e4eeff; }
dialog { border-color: rgba(215,233,255,.38); background: #102441; }
.compare-card { background: #0a1b32; }
@media (max-width: 1280px) {
  .workload-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-orbit { right: 7%; }
  .hero-aside { display: none; }
  .hardware { grid-template-columns: minmax(220px,24%) minmax(0,1fr); padding-left: 22px; }
  .device-art { width: 92px; }
  .feature, .explorer { padding: 19px; }
  .feature-body { grid-template-columns: minmax(0,1.4fr) minmax(170px,1fr); }
  .feature-model { grid-template-columns: 92px minmax(0,1fr); }
  .feature-model::after { width: 88px; height: 91px; }
  .feature-model h3 { font-size: 30px; }
  .feature-actions { gap: 6px; }
  .feature-actions .secondary-button, .feature-actions .ghost-button { padding-inline: 12px; white-space: nowrap; }
  .row-select { grid-template-columns: minmax(120px,1.15fr) minmax(90px,1fr) 77px; }
}
@media (max-width: 1279px) and (min-width: 651px) {
  .hero-description { max-width: min(470px,50vw); text-shadow: 0 2px 14px #031027; }
  .results-grid { grid-template-columns: 1fr; }
  .feature, .explorer { min-height: 0; }
  .feature-body { grid-template-columns: minmax(0,1.4fr) minmax(230px,1fr); }
  .feature-model { grid-template-columns: 112px minmax(0,1fr); }
  .feature-model::after { width: 106px; height: 107px; }
  .feature-model h3 { font-size: 39px; }
}
@media (max-width: 980px) {
  .footnotes { grid-template-columns: 1fr; }
  body { background-size: 100% 1000px, auto 850px; background-position: center top, center -45px; }
  .hero-brand { right: 12px; }
  .hero { height: 345px; overflow: hidden; }
  .hero h1 { font-size: 62px; }
  .hero-orbit { right: -3%; top: 2px; width: 48vw; opacity: .85; }
  .hardware { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 12px; }
  .hardware-intro { padding: 5px 0; }
  .presets { min-height: 110px; }
  .advanced-content { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .feature, .explorer { min-height: 0; }
  .feature-body { grid-template-columns: 1.4fr 1fr; }
  .feature-model { grid-template-columns: 112px 1fr; }
  .feature-model::after { width: 106px; height: 107px; }
  .feature-model h3 { font-size: 39px; }
}
@media (max-width: 650px) {
  body { background-size: 100% 890px, auto 690px; background-position: center top, center 0; }
  .page { padding: 0 13px; }
  .hero { height: 410px; overflow: hidden; }
  .hero::before { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg,rgba(4,13,34,.47),rgba(4,13,34,.12) 72%,transparent); }
  .hero-brand { top: 16px; right: auto; left: 3px; gap: 11px; }
  .hero-brand .lab-logo { width: 115px; }
  .hero-copy { padding: 64px 3px 0; }
  .eyebrow img { width: 28px; height: 28px; }
  .eyebrow strong { font-size: 14px; }
  .hero h1 { font-size: clamp(43px,11vw,61px); }
  .hero-description { max-width: 30ch; margin-top: 17px; font-size: 14px; }
  .hero-orbit { top: 222px; right: -1%; width: 75vw; max-width: 330px; opacity: .85; }
  .hardware { gap: 11px; padding: 17px; }
  .hardware h2 { font-size: 20px; }
  .presets { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .preset { min-height: 106px; }
  .device-art { width: 88px; height: 55px; }
  .advanced summary { padding-top: 0; }
  .hardware-fields { grid-template-columns: 1fr 1fr; }
  .hardware-fields .form-field:first-child, .hardware-fields .primary-button { grid-column: 1 / -1; }
  .results-grid { gap: 10px; margin-top: 10px; }
  .feature, .explorer { padding: 18px; }
  .feature-body { grid-template-columns: 1fr; gap: 18px; margin-top: 16px; }
  .feature-model { min-height: 270px; grid-template-columns: 100px minmax(0,1fr); padding-right: 0; }
  .feature-model::after { width: 92px; height: 94px; }
  .feature-model h3 { font-size: 32px; }
  .feature-workloads { margin-top: 12px; }
  .memory-panel { min-height: 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--stroke); }
  .memory-top strong { font-size: 25px; }
  .explorer-top { grid-template-columns: 1fr; gap: 12px; }
  .explorer-controls { display: grid; grid-template-columns: 1fr 100px; }
  .provider-list { gap: 5px; }
  .provider { min-height: 29px; padding: 0 10px; }
  .row-select { grid-template-columns: minmax(0,1fr) 80px; }
  .row-focus { display: none; }
  .model-row { grid-template-columns: minmax(0,1fr) 32px; }
  .model-list { overscroll-behavior-y: auto; }
  .row-name strong { font-size: 11px; }
  .status { font-size: 9px; }
  .system-card { padding: 20px; }
  .system-spec-grid { grid-template-columns: 1fr; }
  .system-spec.wide { grid-column: auto; }
  .system-limit { display: block; }
  .system-limit strong { display: block; margin-bottom: 3px; }
  .workload-card-grid { grid-template-columns: 1fr; }
  .workload-card { min-height: 0; }
  .workload-budget-copy { display: block; }
  .workload-budget-copy strong { display: block; margin-top: 5px; }
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 42px; }
  .feature-model { grid-template-columns: 82px minmax(0,1fr); }
  .feature-model::after { grid-row: 1 / 3; width: 78px; height: 81px; }
  .feature-model h3 { font-size: 29px; }
  .feature-fit { grid-column: 1 / -1; grid-row: 3; }
  .row-select { grid-template-columns: minmax(0,1fr) 77px; }
  .row-memory { display: none; }
  .maker-symbol.small { display: inline-grid; width: 20px; height: 20px; }
  .row-name strong { -webkit-line-clamp: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orbit { transition: none; }
}