static/styles.css

/* WAYTECHG: dimensional ocean glass, with a clear and readable research workspace. */
:root {
  color-scheme: dark;
  --pearl: #222e2e;
  --paper: #2b3837;
  --ink: #e5e9e2;
  --muted: #b7c4bd;
  --ocean: #b6d1b9;
  --seafoam: #a2e7dc;
  --line: rgba(199, 212, 193, .13);
  --surface: #2b3837;
  --surface-raised: #394640;
  --surface-inset: #202b2b;
  --border: rgba(199, 212, 193, .18);
  --deep-teal: #536c5e;
  --sage: #b6d1b9;
  --sand: #d8c39a;
  --lavender: #c9b8d6;
  --coral: #d3a493;
  --navy: #081f2a;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 24px 60px -24px rgba(2, 16, 24, .46);
}

/* Foundation */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--pearl);
  font: 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { border: 0; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2 { font-weight: 650; letter-spacing: -.055em; }
h2 { font-size: clamp(38px, 4.2vw, 58px); line-height: 1.12; }
h3, h4 { font-weight: 600; letter-spacing: -.025em; }
em { font-style: normal; color: var(--ocean); }
strong { font-weight: 650; }
::selection { background: var(--seafoam); color: var(--navy); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #15a8b8; outline-offset: 5px; }
.section-wrap { width: min(1200px, calc(100% - 88px)); margin-inline: auto; }
.glass {
  background: rgba(46, 58, 53, .78);
  border: 1px solid var(--border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(221, 247, 249, .06);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 16px; z-index: 200;
  padding: 10px 20px; border-radius: 12px; color: white;
  background: #286a77; transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.eyebrow { font: 600 10px/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; }

/* A dark glass navigation bar stays legible across both section backgrounds. */
.site-header { position: fixed; top: 18px; left: 0; right: 0; z-index: 50; padding: 0 32px; }
.nav-shell {
  width: min(1260px, 100%); margin: auto; padding: 12px 22px; border-radius: 21px;
  display: flex; align-items: center; justify-content: space-between;
  color: #e6f2f4; background: rgba(10, 34, 45, .83);
  border-color: rgba(171, 223, 231, .19);
  box-shadow: 0 12px 35px -15px #020f2380, inset 0 1px 0 #deffff12;
  transition: background .4s ease, box-shadow .4s ease;
}
.header-scrolled .nav-shell { background: rgba(10, 34, 45, .94); box-shadow: 0 10px 35px -15px #020f2370; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .025em; font-weight: 750; line-height: 1.25; }
.brand small { display: block; margin-top: 4px; font: 9px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; opacity: .67; }
.brand img { transition: transform .5s var(--ease-out); }
.brand:hover img { transform: rotate(-8deg); }
nav { display: flex; align-items: center; gap: 34px; }
nav a { display: inline-flex; align-items: center; gap: 8px; position: relative; padding: 9px 0; font-size: 12px; font-weight: 550; color: #b8cbd3; transition: color .2s ease; }
nav a.active, nav a:hover { color: #a2e7dc; }
.nav-contact { color: #e6f2f4; padding-left: 28px; border-left: 1px solid #a3d4e425; }
.nav-contact span { font-size: 18px; }
.nav-dot, .status-dot { width: 6px; height: 6px; flex-shrink: 0; display: inline-block; border-radius: 50%; background: var(--ocean); }
.nav-dot { background: #8bdacb; box-shadow: 0 0 10px #8bdacb40; }
.menu-toggle { display: none !important; }

/* Hero: real material depth in the artwork, restrained CSS depth in the surrounding UI. */
.hero {
  position: relative; isolation: isolate; color: #eff9fa; overflow: clip;
  background: radial-gradient(ellipse at 81% 39%, #194454 0, transparent 49%),
    radial-gradient(ellipse at 5% 100%, #173e49 0, transparent 49%), var(--navy);
  padding-block: 145px 88px;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; width: 980px; height: 980px;
  right: -150px; top: -180px; border: 1px solid #c3e4ed0b; border-radius: 50%;
  box-shadow: 0 0 0 90px #c3e4ed04, 0 0 0 180px #c3e4ed03;
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 45px; align-items: center; }
.hero-copy { position: relative; z-index: 3; min-width: 0; padding-block: 20px; }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; color: #b1d2d9; font-size: 10px; }
.tiny-orbit { width: 17px; height: 17px; flex: 0 0 17px; border: 1px solid #81c4c680; border-radius: 50%; position: relative; }
.tiny-orbit::after { content: ""; position: absolute; width: 5px; height: 5px; top: 5px; left: 5px; background: var(--seafoam); border-radius: 50%; }
h1 { font-size: clamp(64px, 6.2vw, 88px); line-height: .99; margin-bottom: 27px; }
h1 em { color: #98e3d7; }
.hero-description { max-width: 430px; font-size: 15px; line-height: 1.85; color: #b4cbd4; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 31px; }
.button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 22px;
  padding: 14px 24px; border-radius: 13px; min-height: 48px;
  font-size: 12px; font-weight: 650; line-height: 1.5; white-space: nowrap;
  transition: transform .4s var(--ease-out), box-shadow .4s ease, background .25s ease;
}
.button span { font-size: 18px; font-weight: 400; transition: transform .4s var(--ease-out); }
.button:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 12px 24px -12px #163c4b65; }
.button:hover:not(:disabled) span { transform: translate(3px, -2px); }
.button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.button-ocean { background: linear-gradient(145deg, #b3eee2, #82cdbc); color: #143c40; border: 1px solid #d2fff36b; box-shadow: 0 8px 24px -12px #82e1cc85, inset 0 1px 0 #e8fff8; }
.hero .button-ocean:hover { box-shadow: 0 12px 32px -12px #82e1cc85; }
.button-dark { background: linear-gradient(130deg, #657d67, #4c6659); color: #f0faf9; box-shadow: inset 0 1px 0 #a3d2df25, 0 8px 14px -10px #143b4a99; }
.button-outline { border: 1px solid var(--border); background: #465247; box-shadow: 0 3px 7px -4px #163c4b35; }
.button:disabled { opacity: .42; cursor: not-allowed; }
.text-link { display: inline-flex; gap: 13px; align-items: center; background: none; padding: 0; font-size: 12px; font-weight: 550; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.text-link:hover { color: var(--ocean); border-color: #99c6cd; }
.text-link span { font-size: 17px; transition: transform .3s var(--ease-out); }
.text-link:hover span { transform: translateY(2px); }
.hero .text-link { color: #d3e4e9; }
.hero .text-link:hover { color: #a2e7dc; }
.hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 39px; }
.proof-mark { display: grid; place-items: center; border: 1px solid #b2d4df24; border-radius: 11px; width: 40px; height: 40px; color: #99b9c4; background: #d1eff908; }
.proof-mark svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.hero-proof p { font-size: 11px; color: #d9e8ed; }
.hero-proof small { display: block; margin-top: 2px; color: #93aebc; font-size: 10px; }
.hero-art { min-width: 0; position: relative; }
.ocean-stage { position: relative; aspect-ratio: 1; perspective: 1100px; }
.ocean-stage::before { content: ""; position: absolute; inset: 3%; border-radius: 50%; background: radial-gradient(circle, #82d3d417, transparent 70%); pointer-events: none; }
.depth-scene {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0) rotateX(var(--scene-rx, 0deg)) rotateY(var(--scene-ry, 0deg));
}
.diorama-float { position: absolute; inset: 0; transform: translateZ(0); animation: diorama-drift 8s ease-in-out infinite; animation-play-state: paused; }
.marine-diorama { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 22px #000e1960); }
.orb-shadow { position: absolute; bottom: 2%; left: 17%; right: 17%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse, #000e25a0, transparent 68%); transform: rotate(-6deg); }
.orbit-ring { position: absolute; border: 1px solid #91dbdf1a; border-radius: 50%; pointer-events: none; }
.orbit-ring-one { inset: -5%; transform: rotate(-28deg) scaleY(.82); }
.orbit-ring-two { inset: -13%; transform: rotate(25deg) scaleY(.6); border-color: #91dbdf0f; }
.floating-card {
  position: absolute; z-index: 2; background: linear-gradient(135deg, #244955d9, #112e3be8);
  border: 1px solid #c0edf136; border-radius: 18px; color: #e9f5f7;
  box-shadow: 0 20px 45px -15px #000d2380, inset 0 1px 0 #e4ffff1a;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  animation: card-drift 7s ease-in-out infinite; animation-play-state: paused;
}
.species-float { left: -5%; top: 21%; display: flex; align-items: center; gap: 12px; padding: 16px 20px 16px 15px; transform: translateZ(55px); }
.floating-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; background: #9cdddf12; border: 1px solid #a1e0df1f; color: #a2e7dc; }
.floating-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.float-label { display: block; color: #9dbfc7; font: 8px var(--mono); letter-spacing: .08em; margin-bottom: 5px; }
.species-float strong { display: block; font-size: 13px; line-height: 1.5; font-weight: 550; letter-spacing: -.02em; }
.model-float { right: -3%; bottom: 12%; width: 187px; padding: 18px; transform: translateZ(80px); animation-delay: -3s; }
.float-heading { display: flex; align-items: center; gap: 7px; font: 8px var(--mono); color: #aed1d6; letter-spacing: .02em; }
.float-heading .status-dot { width: 5px; height: 5px; background: #9ee7d3; }
.float-metric { margin-top: 9px; font-size: 38px; line-height: 1.2; letter-spacing: -.06em; }
.float-metric > span { margin-left: 4px; font-size: 17px; color: #a8c9d2; letter-spacing: 0; }
.float-foot { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #a8c4ce; margin-top: 6px; }
.metric-saving { color: #a2e7dc; background: #82d3bb13; border-radius: 5px; padding: 2px 5px; }
.mini-wave { width: 100%; height: 23px; margin-top: 13px; fill: none; stroke: #8ecbbe; stroke-width: 1.2; opacity: .55; }
.illustration-label { position: absolute; left: 0; right: 0; bottom: -18px; color: #819eac; text-align: center; font: 8px/1.5 var(--mono); letter-spacing: .045em; }
.scene-running .diorama-float, .scene-running .floating-card { animation-play-state: running; }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 49px; font: 9px var(--mono); color: #839faa; }
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; color: #b6ced6; font: 11px var(--sans); }
.scroll-cue > span { display: grid; place-items: center; width: 25px; height: 32px; border: 1px solid #96c4d040; border-radius: 15px; }

/* A raised ocean-glass metric bar connects Home to the quieter research sections. */
.stats-strip {
  position: relative; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr) 1.25fr;
  gap: 20px; margin-top: -38px; padding: 31px 35px; border-radius: 22px;
  border: 1px solid var(--surface-raised); background: linear-gradient(130deg, var(--surface-raised), #2b3835);
  box-shadow: 0 24px 55px -25px #244d653b, inset 0 -2px 0 #1e435308;
}
.stats-strip > div { display: flex; flex-direction: column; padding-right: 15px; border-right: 1px solid var(--line); }
.stats-strip strong { font-size: 35px; font-weight: 600; line-height: 1.1; letter-spacing: -.06em; }
.stats-strip strong span { font-size: 18px; margin-left: 3px; color: #a9c9d2; }
.stats-strip div > span { font-size: 10px; color: var(--muted); margin-top: 8px; }
.stats-strip > p { font-size: 11px; align-self: center; justify-self: end; text-align: right; line-height: 1.9; }
.stats-strip > p span { font-size: 9px; color: var(--muted); }

/* Research and specimen gallery */
.about-section { padding-block: 102px 105px; }
.section-label { display: flex; align-items: center; gap: 20px; font: 9px/1.5 var(--mono); letter-spacing: .055em; color: var(--muted); margin-bottom: 37px; }
.label-line { flex: 1; height: 1px; background: var(--line); }
.section-label > span:last-child { font: 11px var(--sans); letter-spacing: 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; }
.section-description { font-size: 15px; color: var(--muted); line-height: 1.85; margin-top: 22px; max-width: 470px; }
.dataset-link { margin-top: 30px; border-bottom: 1px solid var(--border); padding-bottom: 7px; }
.about-detail > p { font-size: 13px; color: var(--muted); line-height: 1.9; margin-top: 4px; margin-bottom: 25px; }
.objective-row { display: flex; gap: 15px; margin-top: 23px; }
.objective-number { font: 11px var(--mono); width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(145deg, var(--surface-raised), #455347); box-shadow: 0 4px 8px -6px #17475c50; color: var(--ocean); }
.objective-row h3 { font-size: 13px; margin-bottom: 5px; }
.objective-row p { font-size: 12px; color: var(--muted); line-height: 1.85; }
.how-to { border-radius: 16px; padding: 19px; margin-top: 25px; display: flex; align-items: flex-start; gap: 13px; box-shadow: 0 12px 25px -20px #25485a70; }
.how-to > span { font-size: 24px; line-height: 1; color: var(--ocean); }
.how-to p { font-size: 11px; color: var(--muted); }
.how-to strong { display: block; color: var(--ink); margin-bottom: 4px; }
.specimen-heading { display: flex; align-items: center; justify-content: space-between; margin: 70px 0 23px; gap: 20px; }
.specimen-heading h3 { font-size: 16px; }
.specimen-heading > span { font: 8px var(--mono); letter-spacing: .03em; color: var(--muted); }
.specimen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.specimen-card {
  min-width: 0; background: rgba(47, 61, 54, .8); border-radius: 22px; border: 1px solid var(--border); padding: 9px;
  box-shadow: 0 10px 20px -15px #25485a33, inset 0 -1px 0 #d3e1e680;
  transition: box-shadow .5s ease;
}
.specimen-image {
  aspect-ratio: 1.55; border-radius: 15px; position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 45% 0, #86bbca21, transparent 65%), linear-gradient(155deg, #4d5b50, #354339);
  box-shadow: inset 0 1px 2px #4c7c8b1a;
}
.specimen-image::after { content: ""; position: absolute; z-index: -1; left: 23%; right: 23%; bottom: 16%; height: 10%; border-radius: 50%; background: #315c6e30; filter: blur(7px); }
.specimen-card:nth-child(2) .specimen-image { background: radial-gradient(ellipse at 45% 0, #86bbca21, transparent 65%), linear-gradient(155deg, #615648, #423d33); }
.specimen-card:nth-child(3) .specimen-image { background: radial-gradient(ellipse at 45% 0, #86bbca21, transparent 65%), linear-gradient(155deg, #51495f, #393341); }
.specimen-card:nth-child(4) .specimen-image { background: radial-gradient(ellipse at 45% 0, #86bbca21, transparent 65%), linear-gradient(155deg, #655248, #473a33); }
.specimen-image img { width: 64%; height: 76%; object-fit: contain; filter: drop-shadow(0 8px 4px #1e526b20); transition: transform .8s var(--ease-out); }
.specimen-image > span { position: absolute; top: 12px; left: 14px; font: 9px var(--mono); color: #b3cdd4; }
.specimen-copy { padding: 16px 12px 13px; }
.specimen-copy h4 { font-size: 14px; }
.specimen-copy p { font-size: 11px; color: var(--muted); margin-top: 3px; }
.specimen-copy > span { display: block; font: 8px var(--mono); margin-top: 13px; color: #a8c1cb; }
.gallery-note { font-size: 10px; color: var(--muted); margin-top: 16px; }
@media (hover: hover) and (pointer: fine) {
  .specimen-card:hover { box-shadow: 0 20px 35px -19px #25485a40; }
  .specimen-card:hover img { transform: translateY(-7px) rotate(-5deg) scale(1.08); }
}

/* Live dashboard */
.dashboard-section {
  position: relative; isolation: isolate; padding-block: 95px;
  background: radial-gradient(ellipse at 0 60%, #78856519, transparent 48%),
    radial-gradient(ellipse at 100% 15%, #92729e1c, transparent 40%), #272e34;
  border-block: 1px solid var(--line);
}
.section-title-row { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 42px; }
.dataset-tag { display: inline-flex; align-items: center; gap: 12px; border-radius: 13px; padding: 13px 20px; font-size: 12px; box-shadow: 0 8px 18px -12px #25485a50; }
.dataset-tag > span:first-child { font: 8px var(--mono); color: var(--muted); }
.dataset-tag > span:last-child { font-size: 19px; }
.dashboard-shell { border-radius: 26px; padding: 30px; background: rgba(44, 54, 52, .92); box-shadow: 0 36px 75px -35px #20476338, inset 0 1px 0 var(--surface-raised); min-width: 0; }
.dashboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.tab-list { position: relative; isolation: isolate; display: flex; padding: 4px; background: var(--surface-inset); border-radius: 12px; gap: 4px; box-shadow: inset 0 1px 3px #2144520b; }
.tab { position: relative; padding: 10px 22px; border-radius: 9px; font-size: 12px; background: transparent; color: #afc8d2; transition: color .3s ease; }
.tab.active { color: var(--ink); background: var(--surface-raised); box-shadow: 0 3px 7px #24343c13, inset 0 1px 0 var(--surface-raised); }
/* The JS sliding indicator is a progressive enhancement of the native active state. */
.tabs-enhanced .tab.active { background: transparent; box-shadow: none; }
.tab-indicator { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; width: var(--tab-width); transform: translateX(var(--tab-left)); border-radius: 9px; background: var(--surface-raised); box-shadow: 0 3px 7px #24343c13; transition: transform .5s var(--ease-out), width .5s var(--ease-out); pointer-events: none; }
.mode-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; border: 1px solid var(--border); border-radius: 30px; padding: 7px 12px; background: #2c3936; color: #b5cdd4; }
.panel-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 30px 0 20px; }
.panel-intro .eyebrow { font-size: 9px; color: #a3c5ce; margin-bottom: 7px; }
.panel-intro h3 { font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -.04em; }
.panel-counter { font: 10px var(--mono); color: #aec4cc; }
.simulation-note { font-size: 12px; line-height: 1.8; color: #aec4cc; background: #343d3b9e; padding: 13px 16px; border-radius: 11px; margin-bottom: 22px; border: 1px solid var(--border); }
.dropzone { display: flex; align-items: center; gap: 20px; border: 1px dashed #5f8494; border-radius: 17px; padding: 28px; min-height: 134px; background: linear-gradient(120deg, #34413d, #2d3937); transition: background .3s ease, border-color .3s ease, transform .4s var(--ease-out); }
.dropzone.drag-over { border-color: var(--ocean); background: #405347; transform: scale(1.008); }
.upload-symbol { background: linear-gradient(145deg, #46564a, #34413d); border: 1px solid var(--border); border-radius: 16px; height: 54px; width: 54px; display: grid; place-items: center; flex: 0 0 54px; color: #a6d6db; box-shadow: 0 5px 10px -6px #1a4c6c40; }
.upload-symbol svg, .icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dropzone-copy { flex: 1; min-width: 0; }
.dropzone h4 { font-size: 14px; }
.dropzone p { font-size: 10px; color: var(--muted); margin-top: 5px; }
.dropzone .file-summary { font-size: 11px; color: var(--ocean); word-break: break-word; }
.dropzone.has-preview { flex-wrap: wrap; }
.upload-preview { flex-basis: 100%; margin: 0; display: grid; justify-items: center; gap: 10px; }
.upload-preview img { width: min(100%, 320px); height: auto; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 12px; }
.upload-preview figcaption { font-size: 10px; color: var(--muted); }
.upload-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.upload-actions > div { display: flex; align-items: center; gap: 20px; }
.muted { color: var(--muted); }
.inline-status { font-size: 11px; color: #aec4cc; min-height: 19px; margin-top: 12px; }
.inline-status.error { color: #f1b3a9; }
#inference-note, #analysis-status { overflow-wrap: anywhere; }
.result-controls { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 19px; border-top: 1px solid var(--line); margin-top: 18px; }
.class-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip { font-size: 10px; background: #34413d; border: 1px solid var(--border); border-radius: 30px; padding: 7px 11px; transition: background .25s ease, color .25s ease; }
.filter-chip.active { color: #eef6f9; background: var(--deep-teal); border-color: var(--deep-teal); }
.confidence-control { display: flex; align-items: center; gap: 8px; font-size: 10px; white-space: nowrap; }
.confidence-control output { min-width: 28px; font-variant-numeric: tabular-nums; }
input[type="range"] { accent-color: var(--ocean); width: 85px; cursor: pointer; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.result-card { min-width: 0; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-raised); overflow: hidden; box-shadow: 0 8px 22px -18px #234a6770; }
.proposed-card { border-color: #6aaca64d; box-shadow: 0 8px 22px -18px #086e7680; }
.result-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; }
.result-heading > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.result-heading h4 { font-size: 12px; }
.model-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.baseline-dot { background: #9db6df; }
.proposed-dot { background: var(--ocean); }
.result-tag { font-size: 8px; background: #45534b; border-radius: 5px; padding: 3px 6px; color: #bfd3d9; }
.proposed-card .result-tag { background: #42524a; color: #b2ddd5; }
.detection-count { font-size: 9px; color: #aec4cc; white-space: nowrap; }
.image-stage { position: relative; aspect-ratio: 1; background: #34413d; }
.image-stage img { width: 100%; height: 100%; object-fit: fill; }
.result-placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; padding: 24px; }
.result-placeholder strong { font-size: 14px; }
.result-placeholder span { max-width: 230px; font-size: 11px; color: var(--muted); line-height: 1.8; }
.detection-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.detection-overlay .box { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.result-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; gap: 10px; }
.result-footer > span { font-size: 9px; color: var(--muted); }
.result-footer > span > span { padding: 0 3px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: transparent; transition: background .25s ease, transform .4s var(--ease-out); }
.icon-button:hover:not(:disabled) { background: #7298a329; transform: translateY(-2px); }
.icon-button:disabled { cursor: not-allowed; opacity: .3; }
.image-lab-footnote { display: flex; justify-content: space-between; gap: 20px; margin-top: 19px; font-size: 9px; color: #abc3cc; }
.lock-icon { font-size: 12px; padding-right: 5px; }
.small-button { font-size: 11px; min-height: 40px; padding: 9px 16px; }

/* Model tradeoffs */
.metric-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.metric-highlights > div { border-radius: 15px; background: linear-gradient(135deg, var(--surface-raised), #20424f); padding: 20px 23px; border: 1px solid var(--border); box-shadow: 0 8px 15px -14px #21445655; }
.metric-highlights > div > span { font-size: 11px; color: var(--muted); }
.metric-highlights strong { display: block; font-size: 37px; line-height: 1.2; font-weight: 600; margin: 7px 0 9px; letter-spacing: -.06em; }
.metric-highlights small { font-size: 13px; font-weight: 450; letter-spacing: 0; padding-left: 5px; color: #b3cbd4; }
.metric-highlights p { font-size: 9px; color: #abc3cc; }
.chart-layout { display: grid; grid-template-columns: 1fr 245px; gap: 23px; margin-top: 26px; }
.chart-area { min-width: 0; background: #293438; border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.axis-controls { display: flex; align-items: end; gap: 12px; justify-content: space-between; margin-bottom: 18px; }
.axis-controls label { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.axis-controls label > span { font: 8px var(--mono); letter-spacing: .08em; color: #a8c3ce; }
select { appearance: none; background: #252f2d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23a8c5cf' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: 11px 32px 11px 12px; width: 100%; cursor: pointer; font-size: 11px; }
.swap-button { font-size: 22px; flex-shrink: 0; }
.chart-canvas-wrap { height: 320px; position: relative; }
.chart-canvas-wrap canvas { max-width: 100%; }
.chart-note { font-size: 10px; color: var(--muted); min-height: 34px; margin-top: 12px; }
.model-detail { background: linear-gradient(155deg, #3c3b47, #333b3d); border: 1px solid var(--border); border-radius: 16px; padding: 23px; align-self: stretch; box-shadow: inset 0 1px 0 #e5f7fb0a; }
.model-detail .eyebrow { font-size: 9px; color: #abd0d3; }
.model-detail h4 { font-size: 25px; line-height: 1.2; margin-top: 17px; font-weight: 600; }
.model-detail > p:not(.eyebrow) { font-size: 11px; color: #b3cbd3; margin-top: 10px; }
.model-detail dl { margin: 22px 0; }
.model-detail dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.model-detail dt { font-size: 10px; color: #aec6cf; }
.model-detail dd { font-size: 12px; margin: 0; font-variant-numeric: tabular-nums; font-weight: 550; }
.model-detail .detail-note { font-size: 9px !important; }
.model-legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0; }
.legend-button { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 25px; padding: 8px 11px; font-size: 10px; background: #34413d; transition: background .3s ease, transform .4s var(--ease-out); }
.legend-button[aria-pressed="true"] { background: #4d5549; border-color: #74a7a4; }
.legend-button:hover { transform: translateY(-2px); background: var(--surface-raised); }
.metrics-table-details { border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.metrics-table-details summary { cursor: pointer; padding: 14px 18px; font-size: 12px; list-style: none; display: flex; justify-content: space-between; }
.metrics-table-details summary::-webkit-details-marker { display: none; }
.metrics-table-details[open] summary > span { transform: rotate(45deg); }
.table-scroll { overflow-x: auto; padding: 0 16px 16px; }
table { border-collapse: collapse; width: 100%; font-size: 10px; white-space: nowrap; }
caption { text-align: left; font-size: 9px; color: var(--muted); padding: 10px 0; }
th, td { text-align: right; padding: 12px 8px; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
th { font-size: 9px; font-weight: 600; color: #b0c9d2; }
tr.final-row { background: #46594663; color: #b4ded4; }
.benchmark-note { display: flex; gap: 11px; font-size: 10px; line-height: 1.85; color: #aec4cc; margin-top: 21px; }
.benchmark-note > svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; margin-top: 2px; }

/* The study mixes sage, sand, lavender, and coral across a neutral dark base. */
.about-section h2 em { color: var(--sage); }
.dashboard-section h2 em { color: var(--lavender); }
.contact-copy h2 em { color: var(--coral); }
.metric-highlights > div:nth-child(1) { background: linear-gradient(135deg, #3a493d, #2b3833); }
.metric-highlights > div:nth-child(2) { background: linear-gradient(135deg, #45404e, #35333f); }
.metric-highlights > div:nth-child(3) { background: linear-gradient(135deg, #4b473b, #3b3b32); }
.metric-highlights strong { color: #e9e9df; }
.metric-highlights p, .metric-highlights small { color: #c1c8bd; }
.comparison-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.comparison-heading .eyebrow { color: var(--sand); margin-bottom: 8px; font-size: 9px; }
.comparison-heading h3 { font-size: 26px; line-height: 1.25; letter-spacing: -.04em; }
.comparison-description { font-size: 12px; color: var(--muted); line-height: 1.85; max-width: 850px; margin-top: 15px; }
.section-badge { font: 9px/1.7 var(--mono); color: #c6c3d1; padding: 8px 12px; border: 1px solid #c9b8d62b; background: #b49cc10a; border-radius: 10px; }
.ablation-overview { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.ablation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 24px; }
.ablation-card {
  min-width: 0; position: relative; text-align: left; color: var(--ink); border-radius: 16px;
  border: 1px solid var(--border); border-top: 2px solid var(--model-color);
  padding: 17px; background: linear-gradient(145deg, #42484435, #202b2d85);
  box-shadow: 0 8px 15px -13px #000d1a80;
  transition: background .3s ease, border-color .3s ease, transform .4s var(--ease-out);
}
.ablation-card:hover { transform: translateY(-3px); background: #4d535333; }
.ablation-card[aria-pressed="true"] { border-color: var(--model-color); background: linear-gradient(145deg, #4b5a4738, #313f34a1); }
.ablation-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ablation-role { font: 8px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--model-color); }
.ablation-arrow { font-size: 18px; line-height: 1; color: var(--model-color); opacity: .65; }
.ablation-name { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.03em; margin-top: 15px; }
.ablation-description { display: block; font-size: 9px; color: var(--muted); min-height: 32px; margin-top: 5px; line-height: 1.6; }
.ablation-stats { display: flex; flex-direction: column; gap: 8px; padding-block: 13px; border-block: 1px solid var(--line); }
.ablation-stat { display: flex; justify-content: space-between; align-items: center; gap: 9px; font-size: 10px; color: var(--muted); }
.ablation-stat strong { font-size: 12px; color: var(--ink); font-weight: 550; font-variant-numeric: tabular-nums; }
.ablation-changes { display: flex; flex-direction: column; gap: 4px; font-size: 9px; color: var(--muted); margin-top: 13px; min-height: 34px; }
.change-positive { color: #b6d8b9; }
.change-negative { color: #ddb2a1; }
.change-neutral { color: #d8c39a; }
.chart-canvas-wrap { height: 420px; }
.bar-comparison { margin-block: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.bar-filter { display: flex; flex-direction: column; gap: 7px; width: 245px; max-width: 100%; flex-shrink: 0; }
.bar-filter > span { font: 8px var(--mono); letter-spacing: .07em; color: var(--muted); }
.bar-selection { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 19px 0 22px; padding: 12px 15px; border-radius: 11px; background: #afbd9810; border: 1px solid #afbd9825; }
.bar-selection p { font-size: 10px; color: #cad6c5; }
.bar-selection .text-link { font-size: 10px; }
.metric-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.metric-bars[data-view="single"] { grid-template-columns: minmax(0, 1fr); }
.metric-bar-card { min-width: 0; padding: 21px 19px 18px; border-radius: 17px; border: 1px solid var(--border); background: linear-gradient(135deg, #333d3b, #293438); box-shadow: 0 12px 25px -22px #030f1680; }
.metric-bar-card:nth-child(3n + 2) { background: linear-gradient(135deg, #3a3741, #2d3339); }
.metric-bar-card:nth-child(3n) { background: linear-gradient(135deg, #3f3c33, #2e3936); }
.metric-bar-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.metric-bar-heading h4 { font-size: 13px; font-weight: 600; }
.metric-direction { font-size: 8px; color: var(--sage); white-space: nowrap; }
.metric-direction.efficiency { color: var(--sand); }
.metric-bar { display: grid; grid-template-columns: 104px minmax(0, 1fr) 67px; gap: 12px; align-items: center; min-height: 36px; width: 100%; padding: 6px 7px; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; transition: background .25s ease; }
.metric-bar:hover { background: #e0e8df09; }
.metric-bar[aria-pressed="true"] { background: #c8ddba12; box-shadow: inset 2px 0 0 var(--model-color); }
.bar-model-name { font-size: 10px; color: #ccd3d0; }
.bar-track { display: block; position: relative; min-width: 0; height: 9px; border-radius: 3px; background: #dae6db0b; overflow: hidden; }
.bar-fill { display: block; width: var(--bar-width); height: 100%; border-radius: inherit; background: var(--model-color); box-shadow: inset 0 1px 0 #ffffff1a; }
.bar-value { text-align: right; font: 10px var(--mono); color: #e3e8df; }
.metric-bar.missing .bar-track { background: repeating-linear-gradient(135deg, #cbd9d50a 0, #cbd9d50a 3px, transparent 3px, transparent 7px); }
.metric-bar.missing .bar-value { font: 8px var(--sans); color: #bfc8c3; }
.bar-scale { display: flex; justify-content: space-between; margin: 9px 86px 0 123px; font: 8px var(--mono); color: #aebcb5; }
.bar-card-note { margin-top: 15px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 9px; line-height: 1.7; color: var(--muted); }

/* Contact */
.contact-section { position: relative; padding-block: 105px 95px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }
.contact-orbit { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 26px; margin-bottom: 29px; border: 1px solid var(--border); background: radial-gradient(ellipse at 25% 0, #97cdd521, transparent), linear-gradient(150deg, #625b46, #444736); box-shadow: 0 17px 30px -18px #2b596877, inset 0 -2px 0 #548a9e12; transform: rotate(-8deg); }
.contact-orbit img { transform: rotate(8deg); }
.contact-copy h2 { font-size: clamp(44px, 4.5vw, 63px); }
.contact-copy .section-description { max-width: 400px; font-size: 14px; }
.contact-email { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; border-bottom: 1px solid var(--border); padding-block: 6px; margin-top: 26px; overflow-wrap: anywhere; }
.contact-email span { font-size: 18px; flex-shrink: 0; }
.contact-signature { margin-top: 30px; font-size: 12px; }
.contact-signature span { display: block; font-size: 10px; margin-top: 5px; color: var(--muted); }
.contact-form { position: relative; border-radius: 25px; padding: 32px; background: linear-gradient(145deg, #424539e3, #303a33a6); box-shadow: 0 30px 65px -35px #20476342, inset 0 1px 0 var(--surface-raised); }
.form-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.form-heading h3 { font-size: 24px; font-weight: 600; letter-spacing: -.04em; }
.form-heading > span { font-size: 25px; color: #9cbdca; }
.contact-form label { display: flex; flex-direction: column; font-size: 11px; gap: 8px; margin-bottom: 17px; color: #b2cbd4; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 11px; background-color: #25312bd9; padding: 12px 13px; font-size: 12px; color: var(--ink); transition: border-color .25s ease, box-shadow .3s ease; box-shadow: inset 0 1px 3px #193d4f06; }
.contact-form select { padding-right: 32px; }
.contact-form textarea { resize: vertical; min-height: 118px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #94b0be; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: #74b8c4; box-shadow: 0 0 0 3px #74b8c421; }
.contact-form .button { width: 100%; justify-content: space-between; margin-top: 8px; }
.form-note { font-size: 9px; color: #a8c2ce; line-height: 1.8; }
.honeypot { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; }
.site-footer { padding-block: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }
.site-footer .brand { font-size: 12px; }
.site-footer .brand small { font-size: 8px; }
.site-footer > p { color: #aac0cb; font-size: 12px; }
.site-footer .text-link { font-size: 10px; }
.toast { position: fixed; z-index: 100; bottom: 25px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 13px; border-radius: 20px; padding: 18px 16px 18px 20px; width: min(450px, calc(100% - 30px)); background: rgba(41, 55, 47, .96); box-shadow: 0 20px 50px -15px #12304445; border-color: var(--border); }
.toast.entering { animation: toast-in .65s var(--ease-out) both; }
.toast-check { display: grid; place-items: center; flex: 0 0 38px; height: 38px; background: linear-gradient(145deg, #315f54, #254d49); border: 1px solid #81b7a54d; border-radius: 50%; box-shadow: 0 4px 8px -6px #2d796c80; }
.toast-check svg { height: 20px; width: 20px; fill: none; stroke: #b5e2d1; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast-check svg path { stroke-dasharray: 28; stroke-dashoffset: 0; animation: check-in .7s ease; }
.toast strong { font-size: 13px; }
.toast p { font-size: 11px; color: #b1cbd2; margin-top: 3px; }
.toast > .icon-button { margin-left: auto; flex-shrink: 0; font-size: 22px; }
.noscript-note { padding: 20px; background: #244c5a; }

/* Motion: composited transforms and opacity; never animate layout on scroll. */
.reveal { opacity: 1; }
.motion-enabled .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.motion-enabled .reveal.visible { opacity: 1; transform: none; }
.panel-enter { animation: panel-in .5s var(--ease-out) both; }
@keyframes diorama-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(1deg); }
}
@keyframes card-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 25px) scale(.94); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes check-in { from { stroke-dashoffset: 28; } to { stroke-dashoffset: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }

/* Tablet */
@media (max-width: 1100px) {
  .ablation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-bar { grid-template-columns: 87px minmax(0, 1fr) 56px; gap: 8px; }
  .bar-scale { margin-right: 71px; margin-left: 102px; }
  .section-wrap { width: calc(100% - 60px); }
  .hero { padding-top: 140px; }
  .hero-grid { gap: 35px; }
  h1 { font-size: 70px; }
  .hero .eyebrow { font-size: 9px; }
  .hero-description { font-size: 14px; }
  .hero-actions { gap: 20px; }
  .hero-actions .text-link { font-size: 11px; }
  .species-float { left: -2%; top: 15%; padding: 12px; gap: 9px; }
  .model-float { right: -2%; bottom: 8%; width: 165px; padding: 15px; }
  .float-heading { font-size: 7px; }
  .float-metric { font-size: 33px; }
  .floating-icon { width: 33px; height: 33px; }
  .species-float strong { font-size: 11px; }
  .about-grid, .contact-grid { gap: 45px; }
  .result-controls { flex-direction: column; align-items: flex-start; gap: 13px; }
  .chart-layout { grid-template-columns: 1fr 220px; gap: 16px; }
  .model-detail { padding: 19px; }
  .contact-email { font-size: 10px; }
}
@media (max-width: 850px) {
  .ablation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-bars { grid-template-columns: minmax(0, 1fr); }
  .comparison-heading { align-items: flex-start; }
  .section-badge { max-width: 160px; text-align: right; }
  .site-header { padding-inline: 20px; top: 12px; }
  .nav-shell { padding: 10px 16px; border-radius: 18px; }
  nav { gap: 23px; }
  .nav-contact { padding-left: 20px; }
  .section-wrap { width: calc(100% - 44px); }
  .hero-grid { gap: 20px; }
  h1 { font-size: clamp(48px, 6.8vw, 58px); }
  .hero .eyebrow { font-size: 8px; letter-spacing: .03em; }
  .hero-actions .button { padding: 12px 18px; font-size: 11px; }
  .hero-description { font-size: 13px; }
  .hero-proof { margin-top: 26px; }
  .hero-proof small { font-size: 8px; }
  .species-float { top: 6%; }
  .model-float { width: 150px; bottom: 2%; right: 0; }
  .illustration-label { bottom: -25px; font-size: 7px; }
  .stats-strip { grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 28px; }
  .stats-strip > p { display: none; }
  .stats-strip > div:last-of-type { border: 0; padding: 0; }
  .stats-strip strong { font-size: 30px; }
  .about-grid { gap: 30px; }
  h2 { font-size: 40px; }
  .specimen-grid { gap: 12px; }
  .specimen-heading > span { max-width: 150px; text-align: right; }
  .dashboard-shell { padding: 22px; }
  .dropzone { padding: 22px; gap: 14px; }
  .dropzone .button { padding: 10px 14px; gap: 10px; }
  .comparison-grid { gap: 14px; }
  .result-heading { align-items: flex-start; }
  .result-heading .result-tag { display: none; }
  .result-heading h4 { font-size: 11px; }
  .result-footer > span { font-size: 8px; }
  .chart-layout { grid-template-columns: 1fr; }
  .model-detail { display: grid; grid-template-columns: 1fr 2fr; column-gap: 20px; }
  .model-detail .eyebrow, .model-detail h4, .model-detail > p { grid-column: 1; }
  .model-detail dl { grid-column: 2; grid-row: 1 / 5; margin: 0; }
  .contact-grid { gap: 32px; }
  .contact-form { padding: 23px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-copy h2 { font-size: 43px; }
  .contact-email { font-size: 9px; gap: 5px; }
}

/* Phone */
@media (max-width: 650px) {
  .comparison-heading { flex-direction: column; gap: 17px; }
  .comparison-heading h3 { font-size: 23px; }
  .section-badge { max-width: none; text-align: left; }
  .comparison-description { font-size: 11px; }
  .ablation-overview, .bar-comparison { margin-top: 28px; padding-top: 25px; }
  .ablation-grid { gap: 10px; }
  .ablation-card { padding: 13px; }
  .ablation-name { font-size: 14px; margin-top: 13px; }
  .ablation-role { font-size: 7px; }
  .ablation-stat { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 9px; }
  .ablation-description { font-size: 8px; min-height: 38px; }
  .ablation-changes { font-size: 8px; min-height: 42px; }
  .bar-filter { width: 100%; }
  .bar-selection { gap: 9px; padding: 12px; }
  .bar-selection p, .bar-selection .text-link { font-size: 9px; }
  .metric-bar-card { padding: 18px 12px 15px; }
  .metric-bar-heading { gap: 9px; flex-wrap: wrap; }
  .metric-bar-heading h4 { font-size: 12px; }
  .metric-bar { grid-template-columns: 80px minmax(0, 1fr) 55px; gap: 7px; padding-inline: 5px; }
  .bar-model-name { font-size: 9px; }
  .bar-value { font-size: 9px; }
  .bar-scale { margin-left: 92px; margin-right: 67px; }
  html { scroll-padding-top: 97px; }
  .section-wrap { width: calc(100% - 36px); }
  .site-header { padding-inline: 14px; }
  .nav-shell { padding: 8px 13px; }
  .brand { font-size: 13px; }
  .brand img { width: 38px; height: 38px; }
  .brand small { font-size: 7px; }
  .menu-toggle { display: flex !important; }
  nav { position: absolute; top: 72px; left: 14px; right: 14px; background: #102f3bf2; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid #c0edf126; border-radius: 16px; padding: 12px 20px; display: none; box-shadow: 0 15px 30px -15px #000e2380; }
  nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 3px; animation: panel-in .4s var(--ease-out); }
  nav a { padding: 12px 0; font-size: 13px; }
  .nav-contact { border-left: 0; border-top: 1px solid #c0edf11a; padding-left: 0; }
  .hero { padding-block: 117px 76px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero-copy { padding-block: 0; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .04em; margin-bottom: 22px; }
  h1 { font-size: clamp(42px, 13.5vw, 74px); margin-bottom: 24px; }
  .hero-description { font-size: 13px; max-width: 370px; }
  .hero-actions { gap: 20px; margin-top: 25px; }
  .hero-actions .button { font-size: 11px; padding: 13px 20px; }
  .hero-proof { margin-top: 26px; }
  .hero-proof p { font-size: 10px; }
  .hero-proof small { font-size: 9px; }
  .hero-art { width: 100%; max-width: 470px; margin: auto; }
  .ocean-stage { margin: 6px 8px 0; }
  .species-float { left: -2%; top: 14%; padding: 12px; }
  .species-float strong { font-size: 11px; }
  .model-float { right: -2%; bottom: 8%; width: 145px; padding: 13px; }
  .float-metric { font-size: 31px; }
  .float-foot { font-size: 9px; }
  .mini-wave { margin-top: 8px; height: 19px; }
  .hero-bottom { margin-top: 43px; }
  .hero-bottom > span { display: none; }
  .illustration-label { bottom: -14px; font-size: 7px; }
  .stats-strip { margin-top: -31px; border-radius: 18px; padding: 23px 18px; gap: 10px; }
  .stats-strip > div { padding-right: 8px; }
  .stats-strip strong { font-size: 27px; }
  .stats-strip strong span { font-size: 13px; margin-left: 1px; }
  .stats-strip div > span { font-size: 8px; margin-top: 8px; line-height: 1.4; }
  .about-section { padding-block: 66px 60px; }
  .section-label { gap: 10px; font-size: 7px; margin-bottom: 28px; }
  .section-label > span:last-child { font-size: 8px; max-width: 100px; text-align: right; }
  h2 { font-size: clamp(34px, 9.4vw, 44px); }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .section-description { font-size: 13px; margin-top: 18px; }
  .dataset-link { margin-top: 22px; font-size: 11px; }
  .about-detail > p { font-size: 12px; }
  .objective-row p { font-size: 11px; }
  .how-to p { font-size: 11px; }
  .specimen-heading { margin-top: 40px; gap: 16px; align-items: flex-start; }
  .specimen-heading h3 { font-size: 14px; max-width: 200px; }
  .specimen-heading > span { font-size: 7px; max-width: 100px; }
  .specimen-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .specimen-card { padding: 7px; border-radius: 18px; }
  .specimen-copy { padding: 13px 8px; }
  .specimen-copy h4 { font-size: 13px; }
  .specimen-copy > span { font-size: 7px; }
  .gallery-note { font-size: 9px; }
  .dashboard-section { padding-block: 62px; }
  .section-title-row { flex-direction: column; align-items: flex-start; gap: 23px; margin-bottom: 28px; }
  .dataset-tag { padding: 10px 15px; font-size: 11px; }
  .dashboard-shell { padding: 17px; border-radius: 22px; }
  .dashboard-toolbar { gap: 13px; padding-bottom: 20px; flex-wrap: wrap; }
  .tab { padding: 10px 17px; font-size: 11px; }
  .mode-pill { font-size: 9px; padding: 6px 10px; }
  .panel-intro { margin-top: 24px; gap: 13px; }
  .panel-intro h3 { font-size: 24px; }
  .panel-intro .eyebrow { font-size: 7px; }
  .panel-counter { display: none; }
  .simulation-note { padding: 11px 13px; font-size: 10px; }
  .dropzone { flex-wrap: wrap; padding: 20px 16px; gap: 13px; }
  .upload-symbol { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }
  .dropzone-copy { flex-basis: calc(100% - 58px); }
  .dropzone h4 { font-size: 12px; }
  .dropzone p { font-size: 9px; }
  .dropzone .button { margin-left: 55px; min-height: 41px; font-size: 11px; }
  .upload-actions { gap: 12px; }
  .upload-actions > div { align-items: flex-start; flex-direction: column; gap: 5px; }
  .upload-actions .button { padding: 10px 13px; font-size: 10px; gap: 8px; min-height: 41px; }
  .upload-actions .text-link { font-size: 10px; gap: 7px; }
  .inline-status { font-size: 10px; }
  .comparison-grid { grid-template-columns: 1fr; gap: 18px; }
  .result-heading .result-tag { display: inline; font-size: 7px; }
  .result-heading h4 { font-size: 11px; }
  .result-heading { align-items: center; padding: 13px; }
  .result-footer > span { font-size: 8px; }
  .result-footer { padding: 9px 12px; }
  .image-lab-footnote { flex-direction: column; gap: 7px; font-size: 9px; }
  .class-filters { gap: 6px; }
  .filter-chip { font-size: 9px; }
  .confidence-control { font-size: 9px; gap: 6px; }
  input[type="range"] { width: 70px; }
  .metric-highlights { grid-template-columns: 1fr; gap: 9px; margin-top: 20px; }
  .metric-highlights > div { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 15px 17px; gap: 0 12px; }
  .metric-highlights strong { grid-column: 2; grid-row: 1 / 3; font-size: 29px; margin: 0; }
  .metric-highlights p { grid-column: 1; font-size: 8px; margin-top: 5px; }
  .metric-highlights > div > span { font-size: 10px; }
  .metric-highlights small { font-size: 10px; }
  .panel-intro .small-button { font-size: 10px; padding: 9px 12px; gap: 7px; }
  #metrics-panel .panel-intro { align-items: flex-start; flex-direction: column; }
  .chart-area { padding: 13px; }
  .axis-controls { gap: 6px; }
  .axis-controls select { font-size: 9px; padding-left: 8px; padding-right: 25px; background-position: right 7px center; }
  .swap-button { width: 25px; font-size: 19px; }
  .chart-canvas-wrap { height: 280px; }
  .chart-note { font-size: 9px; }
  .model-detail { grid-template-columns: 1fr; padding: 20px; }
  .model-detail dl { grid-column: 1; grid-row: auto; margin: 17px 0 0; }
  .model-detail h4 { margin-top: 10px; }
  .legend-button { font-size: 9px; padding: 7px 10px; }
  .benchmark-note { font-size: 9px; }
  .contact-section { padding-block: 65px 55px; }
  .contact-orbit { width: 74px; height: 74px; border-radius: 20px; margin-bottom: 25px; }
  .contact-orbit img { width: 60px; height: 60px; }
  .contact-copy h2 { font-size: 43px; }
  .contact-email { font-size: 11px; }
  .contact-signature { margin-top: 24px; }
  .contact-form { padding: 23px; }
  .form-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .contact-form label { font-size: 10px; }
  .contact-form input { font-size: 11px; padding-inline: 11px; }
  .form-heading h3 { font-size: 24px; }
  .site-footer { flex-wrap: wrap; padding-block: 24px; }
  .site-footer > p { display: none; }
  .site-footer .text-link { font-size: 9px; }
}
@media (max-width: 360px) {
  .section-wrap { width: calc(100% - 28px); }
  .hero .eyebrow { font-size: 7px; }
  .hero-actions { gap: 16px; }
  .hero-actions .button { padding-inline: 17px; }
  .hero-actions .text-link { font-size: 10px; }
  .stats-strip { padding-inline: 14px; gap: 7px; }
  .stats-strip strong { font-size: 23px; }
  .dashboard-shell { padding: 14px; }
  .dropzone .button { margin-left: 0; }
  .upload-actions .text-link { font-size: 9px; }
  .upload-actions .button { padding-inline: 10px; font-size: 9px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-email { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .motion-enabled .reveal { opacity: 1; transform: none; }
  .depth-scene { transform: none; }
}