/* Agents editorial direction, adapted for Quant Speed's live 3D product story.
   Kept separate from scene geometry and the equipment-switching implementation. */
:root {
  --agents-paper:#e7e7e4;
  --agents-muted:#979897;
  --agents-dim:#696a69;
  --agents-line:#ffffff26;
  --agents-black:#080a09;
  --agents-mint:#b7d7c8;
}
body { background:var(--agents-black); color:var(--agents-paper); }
body::before {
  content:""; position:fixed; inset:0; z-index:42; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' opacity='.8' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}
::selection { background:var(--agents-paper); color:var(--agents-black); }
button:focus-visible,a:focus-visible,input:focus-visible { outline-color:var(--agents-paper); }
.ambient-glow { background:radial-gradient(ellipse at 75% 38%,#34393822,transparent 60%); }
.ambient-grid { opacity:.14; }
.header { height:80px; padding-inline:3%; border-bottom-color:var(--agents-line); }
.header.scrolled { background:#080a09ed; border-bottom-color:var(--agents-line); backdrop-filter:blur(16px); }
.brand { font-size:18px; font-weight:800; letter-spacing:-.7px; text-transform:uppercase; }
.brand svg { fill:var(--agents-paper); width:24px; height:24px; }
.brand-dot { color:var(--agents-muted); }
.nav { color:#c6c6c5; gap:30px; font-size:10px; letter-spacing:.5px; }
.nav a { position:relative; }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--agents-paper); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.nav a:hover::after,.nav a.active::after { transform:scaleX(1); }
.nav a:hover,.nav a.active { color:var(--agents-paper); }
.nav-cta { background:transparent; color:var(--agents-paper); border:0; border-bottom:1px solid #c9c9c880; border-radius:0; padding:8px 0; font-size:10px; font-weight:500; letter-spacing:.5px; gap:35px; }
.nav-cta:hover { background:transparent; color:#fff; transform:none; }
.scene-inner { padding-inline:5%; }
.copy { max-width:620px; }
.align-right .copy { width:43%; max-width:570px; }
.eyebrow { font-size:9px; letter-spacing:1.2px; color:#c1c2c1; font-weight:400; gap:8px; }
.eyebrow::before { content:"["; color:var(--agents-muted); }
.eyebrow::after { content:"]"; color:var(--agents-muted); }
.eyebrow .live-dot { width:4px; height:4px; box-shadow:none; }
h1 span,h2 span { color:#8d8e8d; }
h2 { font-size:clamp(38px,4.4vw,68px); font-weight:600; line-height:1.19; letter-spacing:-.055em; }
.intro,.hero .intro { color:#aaabaa; letter-spacing:0; }
.caption { color:#838483; }
.button { border-radius:0; padding:15px 19px; font-weight:500; font-size:11px; letter-spacing:.1px; }
.button.primary { color:#121312; background:var(--agents-paper); }
.button.primary:hover { background:#fff; }
.button.quiet { color:var(--agents-paper); padding-left:0; padding-right:0; border-bottom:1px solid #a5a7a569; }
.button.quiet:hover { color:#fff; }
.text-link { color:var(--agents-paper); border-bottom-color:#c5c7c580; }
.live-dot { background:var(--agents-mint); box-shadow:0 0 10px #c8cecb29; }

/* A restrained opening, anchored by the edge-to-edge wordmark. */
.hero { overflow:hidden; }
.hero .scene-inner { padding-top:clamp(165px,24vh,240px); padding-bottom:clamp(210px,20vw,340px); align-items:flex-start; }
.hero-copy { padding-bottom:0; width:49%; max-width:670px; }
.hero-copy .eyebrow { margin-bottom:21px; font-size:8px; letter-spacing:.9px; }
.hero h1 { font-size:clamp(40px,4.35vw,66px); line-height:1.12; font-weight:650; letter-spacing:-.065em; margin-bottom:20px; }
.hero .intro { font-size:13px; line-height:1.8; }
.hero .actions { margin-top:22px; gap:27px; }
.hero .button { padding-block:14px; }
.hero .quiet { padding-inline:0; }
.hero-footnote { color:#7b7c7b; font-size:7px; letter-spacing:1px; gap:12px; margin-top:20px; }
.hero-footnote i { background:#767775; }
.agents-hero-top { position:absolute; top:102px; left:5%; right:5%; display:flex; justify-content:space-between; align-items:flex-start; color:#b6b7b5; z-index:3; pointer-events:none; }
.agents-manifesto { margin:0; max-width:300px; font-size:10px; line-height:1.7; letter-spacing:.3px; }
.agents-hero-index { font:9px/1.75 ui-monospace,monospace; text-align:right; letter-spacing:.6px; color:#8e908d; }
.agents-wordmark,.agents-footer-wordmark { color:var(--agents-paper); font-family:Arial,'Helvetica Neue',sans-serif; font-size:15.65vw; line-height:.78; font-weight:900; letter-spacing:-.09em; white-space:nowrap; text-transform:uppercase; pointer-events:none; }
.agents-wordmark { position:absolute; bottom:76px; left:2.4%; right:2.8%; z-index:0; padding-bottom:.02em; }
.hero .background-word { display:none; }
.hero-bottom { left:5%; right:5%; bottom:calc(12.2vw + 95px); }
.scroll-cue { color:#8d8f8c; font-size:7px; letter-spacing:1.25px; }
.scroll-line { height:20px; background:#6f716e; }
.scroll-line::after { background:var(--agents-paper); }
.edition { color:#838582; font-size:7px; letter-spacing:1px; }
.model-label { font-size:9px; color:#caccc9; letter-spacing:1px; }
.model-label .cross { color:#a9aca8; }
.model-label span:not(.cross),.drag-hint { color:#90928f; }
.drag-hint { font-size:8px; }
.scene-marker { left:5%; color:#767876; }
.scene-marker b,.object-tag strong { color:#a9aba8; }
.object-tag { color:#7c7e7b; }

/* Horizontal rules and generous type replace soft UI cards. */
.segmented { border-radius:0; background:#171817; padding:0; border-color:var(--agents-line); }
.segmented button { border-radius:0; color:#959694; padding:11px 18px; }
.segmented button.active { color:var(--agents-paper); background:#c9cbc814; }
.module-list { max-width:100%; border-top:1px solid var(--agents-line); }
.module-list button { padding:20px 0; border-bottom-color:var(--agents-line); }
.module-list button>span:nth-child(2) { font-size:clamp(19px,2.1vw,32px); letter-spacing:-.04em; color:#b7b9b7; }
.module-list button:hover>span:nth-child(2),.module-list button.active>span:nth-child(2) { color:var(--agents-paper); }
.module-list small { font-size:10px; font-weight:400; color:#838582; letter-spacing:0; margin-top:7px; }
.module-num,.module-list button>span:last-child { color:#8a8d89; }
.spec-pair { border-top-color:var(--agents-line); }
.spec-pair strong { font-size:42px; letter-spacing:-.055em; font-weight:450; }
.spec-pair span,.feature-line p { color:#929490; }
.feature-line>span { border-radius:0; border-color:var(--agents-line); color:#a4a6a2; }
.badge { border-radius:0; border-color:#b1b3af3b; color:#a8aaa7; }
.detail-chips span,.task-tags span { border-radius:0; border-color:#c8cac833; color:#b5b7b3; }
blockquote { border-left:1px solid #b9bcb8; color:#c1c3bf; font-size:22px; line-height:1.55; }
.ecosystem-list { max-width:100%; }
.ecosystem-list>div { border-top-color:var(--agents-line); padding:18px 0; }
.ecosystem-list span { font-size:20px; letter-spacing:-.025em; }
.ecosystem-list small { color:#929491; font-size:10px; letter-spacing:0; }
.ecosystem-list b { color:#888a86; }
.journey { max-width:100%; }
.journey li { border-top-color:var(--agents-line); padding:21px 0; }
.journey h3 { font-size:20px; letter-spacing:-.035em; }
.journey p { color:#919390; font-size:11px; }
.journey li>span,.journey li b { color:#999c98; }
.task-tabs { border-bottom-color:var(--agents-line); }
.task-tabs button { color:#90928e; }
.task-tabs button[aria-selected=true] { color:var(--agents-paper); border-bottom-color:var(--agents-paper); }
.task-panel { background:#171817c9; border:1px solid #a8aba520; border-radius:0; padding:32px 27px; }
.task-panel p { color:#9c9f9b; }
.task-number { color:#c5c7c224; font-weight:500; }
.business-path { border-block-color:var(--agents-line); }
.business-path span { font-size:14px; }
.business-path b,.business-path small { color:#8d8f8a; }
.validation-goals strong { font-size:43px; letter-spacing:-.06em; }
.validation-goals strong span,.validation-goals small { color:#9ea09b; }

/* Large, square product photography is an editorial pause in the 3D story. */
#module-gallery { position:relative; z-index:5; pointer-events:auto; background:#0c0d0d; padding:65px 2.5% 80px; border-top:1px solid #c1c3c01c; }
.agents-section-kicker { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 25px; color:#b8bab7; font-size:9px; letter-spacing:1.1px; }
.agents-section-kicker>span:last-child { color:#757874; font-size:8px; }
.agents-work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.agents-work-card { position:relative; display:block; min-width:0; aspect-ratio:1; overflow:hidden; background:#171817; border:0; border-radius:0; padding:0; text-align:left; isolation:isolate; }
.agents-work-card::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,#070808bd); pointer-events:none; }
.agents-work-card img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.6) contrast(1.04); transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s; }
.agents-work-card:hover img { transform:scale(1.045); filter:saturate(.82) contrast(1.04); }
.agents-work-card:focus-visible { outline-offset:-5px; }
.agents-card-caption { position:absolute; z-index:2; left:28px; right:28px; bottom:27px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; color:var(--agents-paper); }
.agents-card-caption span { display:block; font-size:10px; line-height:1.6; letter-spacing:1px; }
.agents-card-caption b { font-size:clamp(20px,3vw,43px); line-height:1; font-weight:500; letter-spacing:-.06em; }
.agents-gallery-note { display:flex; justify-content:space-between; align-items:center; gap:25px; padding-top:22px; color:#838682; font-size:10px; line-height:1.7; }
.agents-gallery-note a { color:#d1d3d0; border-bottom:1px solid #caccc855; white-space:nowrap; }

/* The closing wordmark makes the site feel like one designed publication. */
.final-scene,.final-scene .scene-inner { min-height:125svh; }
.final-scene .scene-inner { align-items:flex-start; padding-top:150px; }
.final-scene .copy { padding-bottom:280px; }
.outlook { color:#9da09b; }
footer { left:3%; right:3%; bottom:76px; padding-top:21px; border-top-color:var(--agents-line); flex-wrap:wrap; gap:22px; background:transparent; }
.footer-brand { font-size:16px; font-weight:700; letter-spacing:-.5px; text-transform:uppercase; }
footer>div:not(.agents-footer-wordmark) { color:#9ea09c; font-size:9px; }
footer>span { color:#848781; font-size:8px; }
.agents-footer-wordmark { flex-basis:100%; width:100%; margin-top:20px; font-size:15.5vw; }
footer .agents-footer-wordmark { color:var(--agents-paper); }
.chapter-nav a { border-color:#abaea966; border-radius:0; width:5px; height:5px; }
.chapter-nav a.active { background:var(--agents-paper); border-color:var(--agents-paper); }
.chapter-nav a span { color:#cbcdc9; }
.experience-bar { background:linear-gradient(transparent,#080a09eb); color:#828580; font-size:8px; }
.experience-controls button { color:#b2b5b0; border-color:#aaada635; border-radius:0; }
.current-chapter b { color:#cbcdc8; }
.page-progress { height:1px; background:#2a2c29; }
.page-progress i { background:#d2d4cf; }
#tour-stop { border-radius:0; background:var(--agents-paper); color:#171816; }

/* Quiet neutral surfaces keep the live rig as the focus of the equipment lab.
   No stage dimensions, camera layout or hit-target positions are changed here. */
dialog { background:#121312; border-radius:0; border-color:#c7c9c432; color:var(--agents-paper); }
dialog::backdrop { background:#040404dc; }
dialog p,dialog li { color:#a6a8a3; }
dialog .caption { color:#888b85; }
.dialog-close { color:#babcb7; }
.team-grid { background:#b9bcb624; border-color:#b9bcb624; }
.team-grid>div { background:#171917; }
.team-grid span,.roadmap,.plan-grid h3 { color:#c3c6c0; }
#configurator-dialog { background:radial-gradient(ellipse at 43% 40%,#282a28,#0a0b0a 68%); color:var(--agents-paper); }
#configurator-dialog::backdrop { background:#060606; }
.lab-header { border-bottom-color:var(--agents-line); }
.lab-brand,.lab-header-right button { color:#c2c5c1; }
.lab-symbol { color:var(--agents-paper); }
.lab-brand strong,.lab-brand i { color:#8b8e88; }
.lab-demo-tag { color:#999e96; border-color:#bcc0b93b; border-radius:0; }
.lab-object-caption>span,.lab-object-caption small { color:#939690; }
.lab-category-rail button { border-radius:0; }
.lab-category-rail button:hover { background:#c1c3bf08; }
.lab-category-rail button.active { background:#d4d7d213; border-color:#c7cac44d; }
.lab-category-rail b { color:#a3a6a0; }
.lab-category-rail .active b { color:var(--agents-paper); }
.lab-category-rail span,.lab-category-rail small { color:#868982; }
.loadout-panel { border-radius:0; border-color:#bfc3bb2c; background:linear-gradient(150deg,#1e201eeb,#0e0f0eea); }
.loadout-panel-header { color:#939790; }
.loadout-panel-header b { color:#cacdc7; }
.loadout-panel h3 { font-weight:500; letter-spacing:-.045em; }
.loadout-panel>p,.option-price { color:#999d95; }
.option-meta { color:#898e86; }
.option-meta>span:last-child { border-radius:0; border-color:#a4a8a04f; }
.option-price b { color:var(--agents-paper); }
#config-options button { border-radius:0; background:#cccfc904; border-color:#cccfc923; color:#a6a9a2; }
#config-options .selected { color:var(--agents-paper); background:#d4d6d117; border-color:#c8cbc566; }
#config-options .selected b,#config-options b { color:#c0c4bc; }
#config-options small { color:#8a8f85; }
.equip-button { border-radius:0; background:var(--agents-paper); color:#1a1c18; }
.equip-button:hover { background:#fff; }
.equip-button[data-equipped=true] { background:#d4d7d211; color:#c2c5be; border-color:#c9cdc642; }
.loadout-total { border-top-color:var(--agents-line); }
.loadout-total>span,.loadout-total>button { color:#aaafa6; }
.loadout-total>small { color:#868b82; }
.loadout-total strong { font-weight:450; letter-spacing:-.065em; }
.inplace-label { color:#989d94; }
.equipped-summary { border-top-color:var(--agents-line); }
.equipped-summary small { color:#8a8f86; }
.equipped-summary span,.lab-bottom-actions button { color:#abb0a7; }
.lab-bottom-actions { color:#8d9289; }
.config-bill { border-top-color:var(--agents-line); }
.config-bill>div { color:#989c93; }
.config-bill b { color:#bfc3bb; }
#config-sound-toggle { border-radius:0; color:#c6cac2; border-color:#c5cac035; }
#config-slot-controls button { border-radius:0; background:#1c1e1ac7; color:#d7dbd3; border-color:#c2c7bd4d; }
#config-slot-controls button:hover { background:#393d37; border-color:#dce1d6; box-shadow:0 0 24px #b4bbaa10; }
#config-slot-controls button small,.slot-hint { color:#a5aaa0; }
#config-toast { border-radius:0; background:var(--agents-paper); color:#1d201b; }
#pricing-form input { border-radius:0; background:#1e201c; border-color:#bec1b84d; color:var(--agents-paper); }
#pricing-form legend,#pricing-form label { color:#adb1a8; }

@media(min-width:1600px) {
  .hero h1 { font-size:70px; }
  .hero .scene-inner { padding-top:210px; }
  .agents-wordmark { font-size:15.6vw; }
}
@media(max-width:1100px) and (min-width:761px) {
  .header { padding-inline:3%; height:75px; gap:20px; }
  .brand { font-size:15px; }
  .nav { font-size:9px; gap:18px; }
  .nav-cta { font-size:9px; gap:18px; }
  .hero h1 { font-size:4.6vw; }
  .hero .intro { font-size:12px; }
  .hero .actions { gap:18px; }
  .hero .button { font-size:10px; padding:12px; gap:16px; }
  .hero .quiet { padding-inline:0; }
  .hero .scene-inner { padding-top:165px; }
  .agents-hero-top { top:100px; }
  .agents-manifesto { font-size:9px; }
  h2 { font-size:4.5vw; }
  .module-list button { padding-block:16px; }
  .module-list small { font-size:9px; }
  .agents-card-caption { left:22px; right:22px; bottom:22px; }
  footer>span { display:block; }
}
@media(max-width:760px) {
  .header { height:66px; padding-inline:20px; gap:16px; background:#080a09d9; }
  .brand { font-size:14px; gap:6px; }
  .brand svg { width:21px; height:21px; }
  .brand-dot { font-size:7px; padding-left:3px; }
  .nav-cta { font-size:8px; padding:6px 0; gap:14px; }
  .menu-toggle { width:22px; }
  .menu-toggle span { background:#c1c4c0; width:20px; }
  .nav { top:66px; background:#0d0e0cfa; font-size:13px; padding:25px 22px 30px; gap:26px; border-bottom-color:var(--agents-line); }
  .nav a::after { width:40px; right:auto; }
  .scene-inner,.hero .scene-inner,.tall .scene-inner,.final-scene .scene-inner { padding-inline:23px; }
  .copy,.align-right .copy { width:100%; }
  .hero .scene-inner { padding-top:154px; padding-bottom:54svh; min-height:115svh; }
  .hero h1 { font-size:clamp(37px,10.4vw,58px); line-height:1.13; letter-spacing:-.065em; margin-bottom:19px; }
  .hero-copy .eyebrow { margin-bottom:17px; font-size:6px; letter-spacing:.65px; }
  .hero .intro { font-size:11px; line-height:1.75; }
  .hero .actions { margin-top:21px; gap:22px; }
  .hero .button { font-size:9px; padding:12px 14px; gap:16px; }
  .hero .quiet { padding-inline:0; }
  .hero-footnote { font-size:6px; letter-spacing:.7px; margin-top:21px; gap:10px; }
  .agents-hero-top { top:86px; left:23px; right:23px; gap:20px; }
  .agents-manifesto { font-size:8px; line-height:1.7; max-width:206px; }
  .agents-hero-index { font-size:6px; letter-spacing:.2px; flex-shrink:0; }
  .agents-wordmark { font-size:15.5vw; bottom:63px; left:2.8%; right:2.8%; line-height:.8; }
  .hero-bottom { bottom:calc(12.4vw + 81px); left:23px; right:23px; }
  .scroll-cue { font-size:6px; letter-spacing:.8px; gap:8px; }
  .edition { font-size:5px; max-width:144px; letter-spacing:.7px; }
  .hero .drag-hint { font-size:7px; bottom:-1%; left:31%; }
  .eyebrow { font-size:7px; letter-spacing:1px; margin-bottom:19px; gap:6px; }
  h2 { font-size:clamp(32px,8.4vw,48px); line-height:1.19; letter-spacing:-.065em; }
  .intro { font-size:11px; color:#afb2ad; }
  .caption { font-size:8px; line-height:1.8; color:#8c9089; }
  .button { font-size:10px; padding:12px 15px; }
  .segmented { margin-top:19px; margin-bottom:16px; }
  .segmented button { padding:9px 14px; font-size:9px; }
  .module-list { max-width:330px; }
  .module-list button { padding:12px 0; gap:16px; }
  .module-list button>span:nth-child(2) { font-size:19px; letter-spacing:-.03em; }
  .module-list small { font-size:8px; margin-top:4px; }
  .spec-pair strong { font-size:32px; }
  .spec-pair span { font-size:8px; }
  .feature-line>span { border-radius:0; }
  blockquote { font-size:17px; }
  .ecosystem-list { max-width:330px; }
  .ecosystem-list>div { padding:13px 0; }
  .ecosystem-list span { font-size:18px; }
  .ecosystem-list small { font-size:9px; }
  .journey { max-width:330px; }
  .journey li { padding:14px 0; }
  .journey h3 { font-size:17px; }
  .journey p { font-size:9px; }
  .task-panel { padding:23px 20px; }
  .business-path span { font-size:11px; }
  .validation-goals strong { font-size:32px; }
  #module-gallery { padding:34px 12px 40px; }
  .agents-section-kicker { font-size:7px; letter-spacing:.6px; gap:12px; margin-bottom:17px; }
  .agents-section-kicker>span:last-child { font-size:5px; text-align:right; letter-spacing:.3px; }
  .agents-work-grid { gap:6px; }
  .agents-card-caption { left:12px; right:12px; bottom:13px; display:block; }
  .agents-card-caption span { font-size:6px; line-height:1.4; letter-spacing:.5px; margin-bottom:6px; }
  .agents-card-caption b { font-size:20px; line-height:1; letter-spacing:-.045em; }
  .agents-gallery-note { padding-top:18px; font-size:7px; gap:20px; align-items:flex-start; }
  .agents-gallery-note span { max-width:220px; }
  .final-scene,.final-scene .scene-inner { min-height:135svh; }
  .final-scene .scene-inner { padding-top:105px; padding-bottom:75svh; }
  .final-scene .copy { padding-bottom:0; }
  footer { left:20px; right:20px; bottom:64px; display:flex; flex-wrap:wrap; gap:18px; padding-top:18px; }
  .footer-brand { font-size:14px; }
  footer>div:not(.agents-footer-wordmark) { margin-top:0; gap:16px; font-size:7px; }
  footer button { font-size:7px; }
  footer>span { display:block; font-size:6px; flex-basis:100%; letter-spacing:.8px; }
  .agents-footer-wordmark { font-size:15vw; margin-top:12px; margin-left:-6px; letter-spacing:-.09em; }
  .object-tag { left:23px; }
  .experience-bar { padding-inline:20px; font-size:7px; }
  dialog { border-radius:0; }
  .team-grid>div { padding:16px; }
  #configurator-dialog .loadout-panel { border-radius:0; background:#131513f5; }
  .loadout-panel h3 { font-size:17px; }
  #config-options button { border-radius:0; }
  #config-slot-controls button { border-radius:0; }
}
@media(max-width:380px) {
  .brand { font-size:12px; }
  .header { gap:12px; padding-inline:16px; }
  .agents-hero-index { font-size:5px; }
  .hero h1 { font-size:36px; }
  .hero .actions { gap:17px; }
  .hero .button { font-size:8px; }
  .agents-card-caption b { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .agents-work-card img,.nav a::after { transition:none; }
  .agents-work-card:hover img { transform:none; }
}

/* Optional live specification overlay uses the same quiet editorial surface. */
#config-spec-card{background:#121512e8;border-color:#d4d8d029;color:#dfe3db;box-shadow:0 20px 70px #0005}
/* Keep the opaque collection above the persistent 3D canvas. */
#architecture{z-index:2}