/* SPYLab Aurora: a luminous, static research surface. */
:root {
  --bg: #eef3fa;
  --paper: rgba(255,255,255,.89);
  --ink: #172b48;
  --muted: #52627a;
  --line: rgba(130,155,190,.23);
  --accent: #3358d4;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(45,68,113,.045), inset 0 1px 0 rgba(255,255,255,.9);
  --lab-soft: #f3f7fe;
  --lab-blue-soft: #eaf0ff;
  --lab-success: #25705c;
  --glass-border: rgba(255,255,255,.8);
}

html { color-scheme: light; }
body { position: relative; isolation: isolate; background: #edf2f9; color: var(--ink); }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(135deg,#f3f6fc 0%,#edf3fa 48%,#f2f3fc 100%); }
button:hover:not(:disabled) { filter: none; }
button, a, input, select, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, svg:focus-visible, summary:focus-visible,
.upload-link:focus-within, .upload-button:focus-within { outline: 3px solid #5474e4; outline-offset: 3px; }
::selection { background: #d7e2ff; color: #142348; }

.ambient-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient-orb { position: absolute; display: block; width: 620px; height: 620px; border-radius: 50%; opacity: .53; filter: blur(65px); }
.orb-one { top: -280px; left: 25%; background: radial-gradient(circle,rgba(141,180,255,.75),rgba(171,204,255,.2) 55%,transparent 72%); }
.orb-two { right: -270px; top: 120px; background: radial-gradient(circle,rgba(132,225,220,.52),rgba(177,185,252,.28) 52%,transparent 72%); }
.ambient-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(53,79,121,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(53,79,121,.035) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(#0008,transparent 76%); -webkit-mask-image: linear-gradient(#0008,transparent 76%); }

/* The dark rail provides a stable anchor while the workspace stays light. */
.sidebar { background: linear-gradient(165deg,rgba(16,32,63,.97),rgba(17,33,60,.94) 55%,rgba(21,51,72,.96)); color: #ecf3ff; border-right: 1px solid rgba(127,164,215,.2); box-shadow: 8px 0 30px rgba(22,43,78,.07); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.sidebar::after { content: ""; position: absolute; inset: auto 0 0; height: 230px; pointer-events: none; background: radial-gradient(ellipse at 10% 100%,rgba(58,182,186,.13),transparent 72%); z-index: -1; }
.brand { color: #f4f8ff; font-weight: 730; }
.brand-mark { position: relative; background: linear-gradient(140deg,#637ceb,#3869b7 54%,#348c9d); border: 1px solid rgba(200,225,255,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 6px 22px rgba(60,116,230,.22); border-radius: 14px; }
.brand-mark svg { stroke: #f3fcff; }
.brand-en { color: #b7c9e3; font-size: 11px; letter-spacing: .8px; }
.sidebar-label { color: #9dafc9; font-size: 11px; letter-spacing: 1px; }
.sidebar .nav-item { position: relative; color: #b9c9df; border: 1px solid transparent; border-radius: 12px; font-weight: 500; }
.sidebar .nav-item svg { stroke-width: 1.7; }
.sidebar .nav-item:hover { background: rgba(151,187,235,.09); color: #f0f7ff; border-color: rgba(158,193,242,.08); }
.sidebar .nav-item.active, .sidebar .nav-item.active:hover { color: #eefaff; border-color: rgba(133,194,245,.22); background: linear-gradient(110deg,rgba(87,123,213,.3),rgba(65,149,171,.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 3px 10px rgba(3,12,31,.1); }
.sidebar .nav-item.active::before { content: ""; width: 3px; height: 18px; border-radius: 5px; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); background: #8ce8ec; box-shadow: 0 0 10px rgba(140,232,236,.4); }
.sidebar .nav-dot { background: #8ce8ec; box-shadow: 0 0 9px rgba(140,232,236,.3); }
.sidebar-footer, .sidebar-footer > div { color: #a9bed8; }
.sidebar-footer .sidebar-tools { border-color: rgba(151,183,224,.17); }
.sidebar-tools button { color: #bdcde2; }
.sidebar-tools button:hover { color: #8ee4ec; }
.status-dot { background: #7ed9bb; box-shadow: 0 0 0 3px rgba(126,217,187,.08); }

main { position: relative; padding-top: 0; }
.topbar { height: 62px; border-bottom: 1px solid rgba(141,163,196,.18); }
.breadcrumb { color: #546680; font-size: 12px; font-weight: 500; }
.topbar-actions { display: flex; align-items: center; flex-shrink: 0; gap: 18px; }
.text-button { color: #4e6280; }
.text-button:hover { color: #294fc2; }

/* Static aurora glow and layered glass sculpture; decorative, not data. */
.page-heading.lab-hero { position: relative; display: flex; flex-wrap: nowrap; min-height: 202px; padding: 23px 30px 22px; margin: 22px 0 24px; border: 1px solid rgba(189,207,249,.44); border-radius: 23px; overflow: hidden; isolation: isolate; background: linear-gradient(118deg,#172d54 0%,#254779 43%,#35527e 67%,#2c6d7e 100%); background-size: 160% 160%; box-shadow: 0 12px 30px rgba(38,65,112,.12),inset 0 1px 0 rgba(255,255,255,.18); }
.lab-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 68% 0%,rgba(113,144,255,.3),transparent 53%),radial-gradient(ellipse at 95% 95%,rgba(64,230,211,.22),transparent 45%); }
.lab-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(211,232,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(211,232,255,.045) 1px,transparent 1px); background-size: 35px 35px; mask-image: linear-gradient(90deg,transparent 28%,#0009); -webkit-mask-image: linear-gradient(90deg,transparent 28%,#0009); }
.hero-copy { position: relative; z-index: 2; min-width: 0; flex: 1; }
.hero-kicker { display: flex; gap: 7px; align-items: center; margin-bottom: 9px; color: #bbd5f7; font-size: 9px; font-weight: 600; letter-spacing: 1.7px; line-height: 1.5; }
.hero-kicker > i, .hero-kicker > .kicker-dot, .hero-kicker > span:empty { width: 5px; height: 5px; border-radius: 50%; background: #9ceee8; box-shadow: 0 0 8px rgba(138,239,228,.55); }
.page-heading.lab-hero h1 { color: #f5faff; font-size: 29px; font-weight: 650; letter-spacing: .3px; line-height: 1.35; }
.page-heading.lab-hero .brand-subtitle { margin-top: 6px; color: #d1e0f6; font-size: 11px; letter-spacing: .25px; }
.page-heading.lab-hero .hero-description { margin-top: 8px; color: #dce9fa; font-size: 13px; }
.lab-hero .research-workflow { margin: 15px 0 0; gap: 8px; color: #9fbfdf; width: auto; }
.lab-hero .research-workflow button { padding: 5px 10px; background: rgba(220,237,255,.07); color: #e5f0ff; border: 1px solid rgba(184,216,255,.16); border-radius: 7px; font-size: 11px; line-height: 1.6; }
.lab-hero .research-workflow button:hover { background: rgba(221,242,255,.17); border-color: rgba(184,227,255,.38); color: #fff; }
.hero-art { position: relative; width: 254px; height: 170px; flex: 0 0 254px; perspective: 800px; transform: scale(var(--art-scale,1)) rotateX(var(--scene-x,0deg)) rotateY(var(--scene-y,0deg)); transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.orbital-system { position: absolute; inset: 0; transform-style: preserve-3d; }
.hero-floor { position: absolute; bottom: 0; left: 21%; width: 62%; height: 32px; border-radius: 50%; background: radial-gradient(ellipse,rgba(6,19,46,.37),transparent 70%); filter: blur(5px); transform: rotateX(30deg); }
.orbit-ring { position: absolute; width: 235px; height: 115px; left: 7px; top: 29px; border: 1px solid rgba(174,233,251,.34); border-radius: 50%; transform: rotate(-24deg); }
.orbit-ring.ring-two { width: 176px; height: 145px; left: 38px; top: 14px; border-color: rgba(162,191,255,.22); transform: rotate(28deg); }
.glass-stack { position: absolute; width: 130px; height: 130px; left: 62px; top: 17px; transform-style: preserve-3d; transform: rotateX(13deg) rotateY(-28deg) rotateZ(-12deg); }
.glass-sheet { display: block; position: absolute; inset: 0; border: 1px solid rgba(214,242,255,.63); border-radius: 21px; background: linear-gradient(130deg,rgba(218,242,255,.31),rgba(156,193,249,.07) 60%,rgba(109,224,220,.22)); box-shadow: inset 0 1px 1px rgba(255,255,255,.45),10px 15px 26px rgba(11,32,63,.13); }
.sheet-back { transform: translate3d(-23px,14px,-28px); opacity: .55; }
.sheet-mid { transform: translate3d(-10px,7px,-10px); opacity: .75; background: linear-gradient(135deg,rgba(173,213,255,.3),rgba(109,230,220,.12)); }
.sheet-front { padding: 24px; transform: translateZ(15px); background: linear-gradient(135deg,rgba(235,251,255,.35),rgba(188,214,255,.11) 65%,rgba(125,236,225,.2)); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.sheet-front > svg { display: block; width: 55px; height: 55px; stroke: #e6fcff; stroke-width: 2.6; fill: none; stroke-linecap: round; filter: drop-shadow(0 2px 4px rgba(14,66,107,.18)); }
.glass-lines { display: grid; gap: 5px; margin-top: 9px; }
.glass-lines i { display: block; height: 3px; border-radius: 4px; background: rgba(224,245,255,.5); width: 70%; }
.glass-lines i:nth-child(2) { width: 48%; opacity: .6; }
.glass-lines i:nth-child(3) { width: 34%; opacity: .35; }
.orbital-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#efffff,#9be3ee 35%,#4383ac); box-shadow: 0 0 18px rgba(143,232,239,.22); }
.dot-one { left: 9px; top: 91px; }
.dot-two { right: 19px; top: 24px; width: 7px; height: 7px; opacity: .85; }

/* Glass lives in the framing; text, form values and charts retain solid contrast. */
.panel, .lab-card, .lab-history-card, .experiment-bar, .metric-card, .lab-empty { background: var(--paper); border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius); box-shadow: var(--shadow),0 0 0 1px rgba(129,154,191,.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.experiment-bar { padding: 15px 19px; gap: 12px 16px; background: rgba(255,255,255,.7); margin-bottom: 24px; }
.experiment-bar .experiment-helper { color: #596b84; font-size: 11px; }
.experiment-bar .lab-field > label { color: #4a5f7d; font-size: 12px; }
.panel-heading { background: linear-gradient(100deg,rgba(241,246,255,.8),rgba(255,255,255,.5)); border-color: rgba(143,169,206,.16); padding: 18px 20px; }
.panel-heading h2 { font-size: 15px; color: #233a5f; }
.tiny-pill { background: #eaf0fd; color: #46618f; border: 1px solid #dde6f7; border-radius: 6px; padding: 3px 7px; font-size: 11px; }
.run-area { background: linear-gradient(135deg,#f4f7ff,rgba(241,249,252,.9)); border-color: #e4ebf6; }
.run-button, .primary-button, .lab-button.primary, .lab-download.primary { position: relative; background: linear-gradient(112deg,#3557ce,#4d68db 60%,#477bc6); color: #fff; border: 1px solid rgba(60,94,196,.55); border-radius: 10px; box-shadow: 0 5px 13px rgba(56,88,199,.17),inset 0 1px 0 rgba(255,255,255,.22); overflow: hidden; }
.run-button:hover:not(:disabled), .primary-button:hover:not(:disabled), .lab-button.primary:hover:not(:disabled), .lab-download.primary:hover { background: linear-gradient(112deg,#2d4cc0,#4661d3 60%,#376dbd); border-color: #3158c3; box-shadow: 0 7px 20px rgba(56,88,199,.24),inset 0 1px 0 rgba(255,255,255,.25); }
.run-button::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 20%,rgba(255,255,255,.16) 45%,transparent 65%); transform: translateX(-140%); }
.run-button:hover:not(:disabled)::after { transform: translateX(140%); transition: transform .8s ease; }
.run-button .arrow { transition: transform .2s ease; }
.run-button:hover:not(:disabled) .arrow { transform: translateX(3px); }
.run-area p, .field-note { color: #5b6c83; }
.setup-section { border-color: #e5ebf4; }
.setup-section h3 { color: #273d5e; }
.step-num { display: inline-block; padding-right: 8px; color: #526c9b; font-weight: 650; }
.data-card { background: linear-gradient(115deg,#f2f6ff,#f4fbfd); border-color: #dbe6f4; border-radius: 11px; }
.data-card strong { color: #334a6d; }
.data-icon, .data-check { color: #4876a5; }
.strategy-option { border-radius: 9px; padding-left: 7px; padding-right: 7px; margin-left: -7px; margin-right: -7px; }
.strategy-option:has(input:checked) { background: rgba(233,241,255,.55); }
.strategy-option:has(input:disabled) { background: transparent; }
.strategy-option strong { color: #2c4365; }
.strategy-option input { accent-color: var(--accent); }
.strategy-option:hover { background: #eef4ff; }
.setup input:not([type="checkbox"]), .setup select, .lab-field input:not([type="checkbox"]):not([type="radio"]), .lab-field select, .lab-field textarea, .trade-tools select, .trade-tools input { border: 1px solid #cedaea; border-radius: 9px; background: rgba(255,255,255,.94); color: #223955; box-shadow: inset 0 1px 2px rgba(35,60,96,.025); }
.setup input:not([type="checkbox"]):focus, .setup select:focus, .lab-field input:focus, .lab-field select:focus, .lab-field textarea:focus, .trade-tools input:focus { border-color: #7d9ce2; box-shadow: 0 0 0 3px rgba(86,123,216,.09); }
.lab-upload { background: linear-gradient(120deg,#f4f7fe,#f3fafc); border-color: #abc1e2; border-radius: 12px; color: #456080; }
.lab-upload:hover { border-color: #7e9ed2; background: #f0f5ff; }
.lab-upload input[type="file"] { font-size: 12px; color: #536987; }
.lab-upload input[type="file"]::file-selector-button { padding: 7px 10px; margin-right: 10px; border-radius: 6px; border: 1px solid #c9d8ed; background: #fff; color: #365b91; font: inherit; cursor: pointer; }
.upload-button { border-color: #b5c8e5; color: #385f9b; background: #f4f8ff; border-radius: 9px; }
.lab-button, .lab-download, .download-button { border-color: #d1ddec; border-radius: 9px; color: #3d5780; background: rgba(255,255,255,.94); box-shadow: 0 2px 4px rgba(36,64,103,.025),inset 0 1px 0 #fff; }
.lab-button:hover:not(:disabled), .lab-download:hover, .download-button:hover:not(:disabled) { border-color: #a4bbe2; background: #f5f8ff; color: #2c52b2; box-shadow: 0 3px 9px rgba(55,85,140,.07); }
.lab-button.danger { color: #984c4d; border-color: #dec8cd; }
.link-button, .upload-link, .small-actions .link-button { color: #345ac0; }
.locked-rule { color: #566780; }
.locked-rule span { color: #377f77; }

.results-toolbar { padding: 0 2px; }
.results-toolbar strong { color: #294464; }
.results-dot { background: #388775; box-shadow: 0 0 0 3px rgba(56,135,117,.08); }
.focus-row select { color: #315397; background: transparent; }
.metric-grid { gap: 14px; }
.metric-card { position: relative; padding: 20px 18px 17px; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg,rgba(255,255,255,.96),rgba(249,252,255,.88)); }
.metric-card::before { content: ""; position: absolute; top: 0; left: 18px; width: 29px; height: 3px; border-radius: 0 0 3px 3px; background: #6989da; }
.metric-card:nth-child(2)::before { background: #c5965e; }
.metric-card:nth-child(3)::before { background: #4b9a9d; }
.metric-card:nth-child(4)::before { background: #9285c5; }
.metric-label { color: #526681; font-size: 12px; line-height: 1.6; }
.metric-card strong, .metric-card:last-child strong { color: #233d67; font-size: 29px; font-weight: 680; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.metric-card:nth-child(2) strong { color: #8b642f; }
.metric-sub { color: #586c87; font-size: 11px; }
.info-button { border-color: #a8bbd5; color: #5e7394; }
.info-button:hover { border-color: #4774ce; color: #315bbe; background: #eef4ff; }
.chart-panel { background: rgba(255,255,255,.94); }
.chart-top h2 { color: #243b5f; }
.chart-top p { color: #5a6d86; }
.chart-label { fill: #5b6f8b; }
.chart-grid { stroke: #e6edf6; }
.chart-line { stroke-linecap: round; stroke-linejoin: round; }
.chart-tooltip { border-color: rgba(167,189,220,.5); background: rgba(255,255,255,.97); border-radius: 11px; box-shadow: 0 10px 28px rgba(24,55,100,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.segmented { background: #eef2fa; border: 1px solid #e5ebf6; border-radius: 9px; padding: 3px; }
.segmented button { border-radius: 6px; color: #536a8b; }
.segmented .selected { color: #3158b8; background: #fff; box-shadow: 0 2px 6px rgba(37,69,129,.09); }
.detail-tabs { background: linear-gradient(90deg,rgba(246,249,255,.8),rgba(255,255,255,.3)); border-color: #e3eaf4; }
.detail-tabs .selected { color: #355bd0; border-bottom-color: #5574dc; }
.results-table th, .lab-table th { background: #f4f7fd; color: #4d6383; border-bottom-color: #e0e8f4; }
.results-table td, .lab-table td { color: #314a6a; border-bottom-color: #eaf0f7; }
.results-table tbody tr:hover, .lab-table tbody tr:hover { background: #f0f5ff; }
.lab-table-wrap { border-color: #dfe8f4; border-radius: 11px; background: rgba(255,255,255,.85); }
.lab-table caption { color: #536985; background: #fbfcff; }
.result-explainer { background: rgba(226,237,252,.72); border: 1px solid rgba(182,203,233,.35); border-radius: 13px; color: #4f6585; }
.pagination button { border-color: #cbd9ed; background: #f8faff; border-radius: 7px; }
.pagination button:hover:not(:disabled) { border-color: #9cb6df; color: #3158b5; }
.workspace-footer, .workspace-footer a { color: #596c88; }

.lab-page-intro { padding: 0 2px; }
.lab-page-intro h1, .lab-page-intro h2 { color: #243c61; }
.lab-page-intro .lab-label { color: #506eb0; letter-spacing: 1.5px; font-size: 10px; font-weight: 600; }
.lab-card h2, .lab-card h3, .lab-card-head h2, .lab-history-card h3 { color: #294365; }
.lab-role-number { color: #3b64b5; background: linear-gradient(135deg,#e9efff,#eaf7fc); border: 1px solid #d7e4f6; border-radius: 10px; }
.lab-summary-grid > * { background: linear-gradient(130deg,#f3f7ff,#f6fafc); border-color: #e1e9f5; border-radius: 12px; }
.lab-stat { color: #2a4a7b; }
.lab-feature-code { color: #3d5f98; background: #edf2fd; border-radius: 5px; }
.lab-timeline > * { background: linear-gradient(135deg,#f1f6ff,#f9fbff); border-top-color: #9cb7ee; border-radius: 5px 5px 11px 11px; }
.lab-timeline > :nth-child(2) { border-top-color: #bba4d9; background: linear-gradient(135deg,#f5f2fb,#fafaff); }
.lab-timeline > :nth-child(3) { border-top-color: #79b3b1; background: linear-gradient(135deg,#eef8f7,#f9fcfc); }
.lab-note, .plain-note, .rule-intro, .formula-note { background: #eff4fc; color: #4c6485; }
.lab-note { border-left-color: #82a1df; border-radius: 0 10px 10px 0; }
.lab-note.warning { background: #fff9ec; color: #78602e; border-left-color: #d7b673; }
.lab-status { background: #eff5ff; border-color: #cedcf4; color: #3f5f91; border-radius: 11px; }
.lab-status.success { background: #edf8f3; border-color: #cbe3d8; color: #2d6d56; }
.lab-status.warning { background: #fff9ed; border-color: #e9d8af; color: #7c602b; }
.lab-badge { background: #edf3fc; border-color: #dbe5f5; color: #4f6992; border-radius: 6px; }
.lab-badge.success { background: #edf8f3; border-color: #d0e6dc; color: #376f59; }
.lab-badge.warning { background: #fff8eb; border-color: #eadfc6; color: #80622e; }
.lab-empty { background: linear-gradient(140deg,rgba(255,255,255,.8),rgba(244,249,255,.8)); border-style: dashed; border-color: #bacde9; }
.lab-inline-error, .error-box { border-radius: 11px; background: #fff4f3; border-color: #edd0cd; color: #944a46; }
.dirty-note, .warning-box { border-radius: 11px; }
.toast { border: 1px solid rgba(154,196,233,.3); background: rgba(26,48,82,.95); box-shadow: 0 12px 35px rgba(23,50,90,.2); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 12px; color: #f2f8ff; }
dialog { border: 1px solid rgba(209,224,248,.7); border-radius: 20px; box-shadow: 0 30px 100px rgba(15,35,72,.25); background: rgba(255,255,255,.98); }
dialog::backdrop { background: rgba(19,36,65,.42); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.dialog-head { background: rgba(250,252,255,.98); border-color: #e1e9f5; }
.dialog-head h2 { color: #263f65; }
.dialog-head .close-dialog { color: #5c7496; border-radius: 7px; }
.dialog-foot { background: #f3f7fd; border-color: #e1e9f5; }
.guide-step > b { color: #3b5db6; background: #eaf0ff; }
.rules-list dt, .guide-step h3 { color: #2c496f; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  button, a, input, select, textarea, summary { transition: background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease; }
  .sidebar .nav-item:hover { transform: translateX(2px); }
  .metric-card, .lab-history-card, .lab-grid > .lab-download { transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
  .metric-card:hover, .lab-history-card:hover, .lab-grid > .lab-download:hover { transform: translateY(-2px); box-shadow: 0 12px 27px rgba(48,78,132,.08),inset 0 1px 0 #fff; border-color: #fff; }
  .run-button:hover:not(:disabled), .lab-button:hover:not(:disabled), .download-button:hover:not(:disabled), .primary-button:hover:not(:disabled) { transform: translateY(-1px); }
  button:active:not(:disabled), .lab-download:active { transform: translateY(1px); }
}



/* Static presentation: keep content and focus feedback without decorative motion. */
html *, html *::before, html *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html :is(button,a,.metric-card,.lab-history-card,.lab-download):is(:hover,:active) { transform: none !important; }
html .hero-art { transform: scale(var(--art-scale,1)); }
html .run-button::after { display: none; }
html :is(.run-button,.primary-button,.lab-button,.download-button,.lab-download):is(:hover,:active),
html .run-button:hover .arrow { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {  transition: none !important; scroll-behavior: auto !important; }
  .hero-art { transform: scale(var(--art-scale,1)); }
  .run-button::after { display: none; }
  .run-button:hover .arrow { transform: none; }
}

@media (min-width: 1600px) {
  .page-heading.lab-hero { padding-left: 34px; padding-right: 45px; }
  .hero-art { margin-right: 20px; }
  .metric-card strong, .metric-card:last-child strong { font-size: 31px; }
}
@media (max-width: 1250px) {
  .page-heading.lab-hero { padding: 23px 25px; }
  .hero-art { width: 230px; flex-basis: 230px; --art-scale: .93; }
  .experiment-bar .experiment-helper { flex-basis: 100%; text-align: left; }
}
@media (max-width: 1080px) {
  .sidebar { border-bottom: 1px solid rgba(142,184,229,.25); box-shadow: 0 4px 20px rgba(22,43,78,.07); }
  .sidebar::after { display: none; }
  .sidebar .nav-item.active::before { width: 16px; height: 2px; top: auto; bottom: -1px; left: 12px; transform: none; }
  .sidebar .nav-item { min-height: 40px; }
  .sidebar nav { scrollbar-color: #496689 transparent; }
  .topbar { height: 56px; }
  .page-heading.lab-hero { margin-top: 18px; }
}
@media (max-width: 820px) {
  .page-heading.lab-hero { min-height: 200px; border-radius: 19px; padding: 22px; margin-bottom: 20px; }
  .page-heading.lab-hero h1 { font-size: 27px; }
  .hero-art { width: 195px; flex-basis: 195px; margin-left: -15px; --art-scale: .8; transform-origin: center right; }
  .hero-copy { flex-basis: 60%; }
  .experiment-bar { border-radius: 15px; padding: 15px; margin-bottom: 20px; }
  .metric-card { padding: 18px 15px 15px; border-radius: 15px; }
  .metric-card strong, .metric-card:last-child strong { font-size: 28px; }
  .metric-label { font-size: 12px; }
  .metric-sub { font-size: 11px; }
  .lab-card { border-radius: 15px; }
  .lab-timeline > * { border-top: 0; border-left-color: #9cb7ee; border-radius: 0 9px 9px 0; }
  .lab-timeline > :nth-child(2) { border-left-color: #bba4d9; }
  .lab-timeline > :nth-child(3) { border-left-color: #79b3b1; }
  .topbar-actions { gap: 12px; }
}
@media (max-width: 600px) {
  .hero-art { display: none; }
  .hero-copy { flex-basis: 100%; }
  .page-heading.lab-hero { min-height: 0; padding: 22px 20px; }
  .page-heading.lab-hero h1 { font-size: 26px; }
  .page-heading.lab-hero .brand-subtitle { font-size: 10px; max-width: none; }
  .hero-kicker { font-size: 8px; letter-spacing: 1.25px; }
  .lab-hero .research-workflow { gap: 6px; margin-top: 14px; }
  .lab-hero .research-workflow button { padding: 5px 8px; font-size: 11px; }
  .ambient-orb { width: 380px; height: 380px; filter: blur(45px); }
  .topbar { gap: 8px; height: 54px; }
  .topbar .breadcrumb { font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .text-button { font-size: 11px; }
  .topbar-actions { gap: 10px; }
  .metric-grid { gap: 11px; }
  .metric-card strong, .metric-card:last-child strong { font-size: 27px; }
  .lab-button, .lab-download { min-height: 42px; }
  .lab-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .lab-field select, .lab-field textarea { font-size: 16px; }
}
@media (max-width: 380px) {
  .topbar-actions { gap: 7px; }
  .topbar .text-button { font-size: 10px; }
  .metric-card { padding: 17px 12px 14px; }
  .metric-card strong, .metric-card:last-child strong { font-size: 25px; }
  .metric-label { font-size: 11px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar { background: #142943; }
  .panel, .lab-card, .lab-history-card, .experiment-bar, .metric-card, .lab-empty { background: #fcfdff; }
}
@media print {
  body, body::before { background: #fff; }
  .ambient-scene, .hero-art, .hero-kicker { display: none !important; }
  .page-heading.lab-hero { min-height: 0; padding: 0 0 18px; margin: 0; background: #fff; border: 0; box-shadow: none; border-radius: 0; }
  .lab-hero::before, .lab-hero::after { display: none; }
  .page-heading.lab-hero h1 { color: #172b48; }
  .page-heading.lab-hero .brand-subtitle, .page-heading.lab-hero .hero-description { color: #52627a; }
  .panel, .lab-card, .lab-history-card, .metric-card { background: #fff; border: 1px solid #dce4ef; box-shadow: none; backdrop-filter: none; }
  *, *::before, *::after {  transition: none !important; }
}
