Blame for source/src/biosystem.css

/* Ouroboros identity: language in blue; proteins in orange/red. */
:root {
 --paper:#f8f9fa; --ink:#202d3b; --muted:#667482; --line:#dce1e6;
 --coral:#c15c35; --blue:#386fa7; --display:'Space Grotesk','DM Sans',sans-serif;
 --language:#4d8fcc; --protein:#d8734c; --lab:#172532;
 background:var(--paper); color:var(--ink); font-optical-sizing:auto;
 -webkit-font-smoothing:antialiased;
}
::selection { background:#f0d5c4; }
h1,h2,h3 { font-family:var(--display); }
h2 em,h3 em { font-style:normal; }
.site-header { background:#f8f9faed; }
.brand { font-family:var(--display); font-size:25px; font-weight:600; letter-spacing:-1.2px; }
.site-header .nav-cta { border-color:#ccd4dc; border-radius:6px; background:#fff; font-size:12px; }
.site-header .nav-cta:hover { border-color:var(--coral); }
.hero { position:relative; gap:32px; grid-template-columns:1fr 1fr; padding-top:55px; padding-bottom:58px; }
.hero h1 { font-family:var(--display); font-size:clamp(50px,5vw,72px); line-height:1.055; font-weight:500; letter-spacing:-4px; margin:23px 0 28px; }
.hero h1 em { font-style:normal; font-weight:500; color:var(--coral); }
.hero-copy .eyebrow { color:var(--blue); font-size:9px; letter-spacing:1.5px; }
.hero-copy .eyebrow i { background:var(--blue); box-shadow:0 0 0 5px #4d8fcc0b; }
.hero-intro { font-size:17px; line-height:1.75; max-width:425px; }
.hero-actions .primary { background:var(--ink); padding:17px 22px; font-size:12px; }
.hero-actions .primary:hover { background:#334e66; }
.hero-atlas-link { max-width:420px; }
.hero-atlas-link strong { font-size:12px; }
.hero-atlas-link small { font-size:10px; }
.hero-atlas-points i,.hero-atlas-points i:nth-child(3n) { background:#d8734c; }
.hero-atlas-points i:nth-child(3n+1) { background:#4d8fcc; }
.hero-scene { max-width:620px; border-color:#d9dee5; border-radius:14px; background:radial-gradient(ellipse at 70% 40%,#e8c1a524,transparent 58%),radial-gradient(ellipse at 10% 70%,#9ac2e324,transparent 55%),#f3f5f7; box-shadow:0 25px 70px -50px #17385154; }
.scene-topline { padding:21px 23px 0; }
.scene-topline .micro { color:#5c6e81; font-size:8px; letter-spacing:1px; }
.scene-indicator { color:#748498; }
.scene-indicator i { background:#d8734c; }
.scene-grid { background-image:radial-gradient(#647d9833 .7px,transparent .7px); }
.scene-orbit { stroke:#9aafc33c; }
.orbit-ticks { stroke:#acbac8; }
.scene-language { background:#edf4fbf5; border-color:#bad0e4; border-radius:6px; box-shadow:0 10px 24px #386fa708; }
.scene-language .scene-card-label { color:#427aad; }
.scene-language p { font:500 clamp(19px,3.7cqw,25px)/1.35 var(--display); letter-spacing:-.8px; color:#38638b; margin:15px 0; }
.language-spectrum i { background:#729dc3; }
.scene-sequence { border-color:#e7c5ae; background:#fff5ecf5; border-radius:6px; }
.scene-card-label { font-size:7px; letter-spacing:.7px; }
.scene-card-label>span:first-child { font-size:20px; }
.scene-card-note { font-size:7px; color:#6b7c8d; }
.scene-sequence .scene-card-note { color:#9f725b; }
.scene-residues>span { background:#f4decc; }
.scene-center-label { font-size:7px; color:#677990; }
.path-caption { font:500 16px var(--display); letter-spacing:-.5px; }
.design-caption { top:10%; } .describe-caption { bottom:6%; color:var(--blue); }
.scene-controls { background:#e8ecf1; border-color:#dae0e7; }
.scene-controls button { font-size:10px; }
.scene-controls button[aria-pressed=true] { background:white; box-shadow:0 2px 5px #20374c0a; }
.scene-controls button:last-child[aria-pressed=true] { color:var(--blue); }
.scene-caption { color:#657589; font-size:9px; min-height:45px; }
.scene-provenance { border-color:#dce2e8; font-size:8px; }
.scene-provenance i { background:var(--protein); }
.hero-scene[data-direction=design] .scene-sequence { border-color:#d8734c; box-shadow:0 0 0 4px #d8734c08; }
.hero-scene[data-direction=describe] .scene-language { border-color:#4d8fcc; box-shadow:0 0 0 4px #4d8fcc08; }
.intro-strip { background:#eef1f4; border-radius:8px; border:1px solid var(--line); padding:26px 0; }
.intro-strip>p { font:500 19px/1.45 var(--display); letter-spacing:-.7px; padding:0 26px; }
.intro-strip>p strong { display:block; font:inherit; color:var(--muted); }
.intro-strip>a { padding:4px 25px; }
.intro-strip>a>strong { font-family:var(--display); font-size:23px; letter-spacing:-1px; font-weight:500; }
.intro-strip>a>small { font-size:10px; }
.intro-strip>a>span { font-size:9px; color:var(--blue); }
.section-heading { margin-bottom:35px; }
.section-heading h2 { font-family:var(--display); font-size:clamp(38px,3.9vw,55px); font-weight:500; letter-spacing:-2.6px; line-height:1.12; }
.section-heading h2 em { color:var(--coral); }
.section-heading .eyebrow { font-size:9px; letter-spacing:1.5px; }
.section-heading .eyebrow>span { border-radius:4px; border-color:#d2dce6; color:var(--blue); background:#eff3f7; }
.section-deck { font-size:13px; line-height:1.9; }
/* The shared architecture is an instrument panel, with a separate color per modality. */
.dual-experience { border:1px solid #273949; border-radius:12px; overflow:hidden; background:#fff; }
.circuit-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; background:var(--lab); padding:23px 30px 0; color:#b8c8d8; }
.circuit-heading .micro { display:flex; align-items:center; gap:8px; font-size:9px; letter-spacing:1.7px; }
.circuit-heading i { width:5px; height:5px; background:#eb986f; border-radius:50%; box-shadow:0 0 10px #eb986f44; }
.circuit-heading>span:last-child { font:8px var(--mono); letter-spacing:1.2px; color:#7f95a8; }
.dual-toolbar { background:var(--lab); color:#a3b4c5; padding:22px 30px 0; }
.dual-tour .micro { font-size:8px; color:#9eb1c4; }
.dual-tour>.text-button { color:#e99b75; font-size:10px; }
.dual-toolbar .segmented { gap:8px; }
.dual-toolbar .segmented button { color:#90a5ba; border-bottom-color:#3a4c5d; background:#1c2d3c; border-radius:5px 5px 0 0; }
.dual-toolbar .segmented button[aria-pressed=true] { background:#293d4f; color:#f1b28d; border-color:#e59b72; }
.dual-toolbar .segmented button:last-child[aria-pressed=true] { color:#91c6fa; border-color:#70aae0; }
.tour-step-progress { background:#f1b28d; }
.dual-diagram { background-color:var(--lab); background-image:radial-gradient(#8296ac25 .65px,transparent .65px); color:#d5e2ee; padding:46px 60px 42px; gap:30px; grid-template-columns:1fr .76fr 1fr; }
.modality-title { margin-bottom:30px; }
.modality-title h3 { font-family:var(--display); font-size:18px; font-weight:500; letter-spacing:-.6px; color:#d3e1ef; }
.modality-title .micro { color:#8ea8c1; }
.modality-icon { background:#27415b; color:#8abbee; border:1px solid #3c5b78; font-family:var(--display); font-size:24px; border-radius:8px; }
.protein-modality .modality-icon { background:#4a342d; border-color:#725043; color:#eeaa83; }
.model-node { position:relative; overflow:visible; min-height:86px; border:1px solid #4d7193; background:linear-gradient(115deg,#284662,#22384e); padding:19px 20px; box-shadow:0 5px 22px #06101a1a; gap:14px; }
.model-node::before { content:''; position:absolute; inset:5px -5px -5px 5px; border:1px solid #4d71933d; border-radius:6px; z-index:0; pointer-events:none; }
.model-node>div,.model-node>span { position:relative; }
.model-node strong { color:#d4e6fa; font-size:14px; font-weight:500; }
.model-node small { color:#87b7e5; font-size:8px; }
.node-number { color:#83a9cc; font-size:9px; }
.protein-modality .model-node { border-color:#926047; background:linear-gradient(115deg,#543b30,#3f302c); }
.protein-modality .model-node::before { border-color:#a5705240; }
.protein-modality .model-node strong { color:#ffe0c7; }
.protein-modality .model-node small,.protein-modality .node-number { color:#e5a67e; }
.signal-glyph { margin-left:auto; display:grid; grid-template-columns:repeat(5,4px); gap:3px; color:#8fbfea; }
.signal-glyph i { display:block; width:4px; height:4px; background:currentColor; opacity:.14; border-radius:1px; }
.signal-glyph i.lit { opacity:.8; animation:activation-pulse 2.8s var(--signal-delay) ease-in-out infinite; }
.protein-modality .signal-glyph { color:#f4b080; }
.sharing-link,.mode-joint .sharing-link { color:#a8b9c9; font-size:9px; }
.sharing-link i,.mode-joint .sharing-link i { border-color:#6b90b3; }
.protein-modality .sharing-link i,.mode-joint .protein-modality .sharing-link i { border-color:#c9906e; }
.mode-joint .model-node { box-shadow:0 0 28px #487aaa0c; }
.mode-t2p .node-text-encoder,.mode-p2t .node-text-decoder { box-shadow:0 0 24px #74b6ef16; }
.mode-t2p .node-protein-decoder,.mode-p2t .node-protein-encoder { box-shadow:0 0 24px #f2a27216; }
.cross-modal { padding-top:72px; }
.flow { color:#e9a178; }
.flow-p2t { color:#8ebff0; }
.flow span { font-size:9px; letter-spacing:1.8px; }
.flow small { color:#809aaf; font-size:9px; }
.flow .signal-two { animation-delay:-1.33s; }
.flow .signal-three { animation-delay:-2.66s; }
.dual-symbol { color:#8da0b3; font-family:Arial,sans-serif; font-size:38px; }
.dual-explanation { background:#1c2d3c; border-color:#394b5b; color:#d6e4f0; padding:30px 36px; }
.dual-explanation .eyebrow { color:#e8a378; font-size:9px; }
.dual-explanation h3 { font-family:var(--display); color:#ebf1f7; font-size:20px; font-weight:500; letter-spacing:-.6px; }
.dual-explanation p { color:#a2b6c8; font-size:12px; }
.loss-block { border-color:#3b5062; }
.loss-block>.micro { color:#9ab0c3; }
.loss-block code { color:#d7e5f2; font-size:12px; }
.coupling-label { color:#9fb4c6; }
.coupling-label i { background:#de9b74; }
.recorded-demo-heading { background:#fff; border-color:#d9e1e9; padding-top:30px; }
.recorded-demo-heading p { font:500 21px var(--display); letter-spacing:-.7px; }
.recorded-demo-heading .micro { color:var(--blue); }
.paired-example { background:#fff; }
.pair-language { background:#eef4fb; border-color:#b9cee1; }
.pair-protein { background:#fff0e6; border-color:#e4c5ad; }
.core-demo .core-input-text { font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.8; color:#3e6489; }
.core-demo .generation-result { font-size:13px; line-height:1.9; }
.pair-source { background:#fff; }
.dual-takeaways strong { font-weight:600; }
/* Carry the new typography into the data and structure sections. */
.dataset-compact h2 { font-size:38px; }
.compact-stats { background:#edf1f6; border-color:#d5dee7; }
.compact-stats strong { font-weight:500; font-size:30px; letter-spacing:-1.3px; }
.key-explorer { background:#fff; }
.key-case-stat { background:#edf3f9; border-color:#d6e0eb; }
.key-case-stat h3 { font-family:var(--display); font-size:25px; font-weight:500; letter-spacing:-1px; }
.key-case-stat>strong { font-family:var(--display); font-size:32px; font-weight:500; letter-spacing:-1.2px; }
.key-case-example blockquote { font:400 17px/1.65 'DM Sans',sans-serif; max-height:118px; }
.atlas-intro h2,.atlas-page-heading h1,.atlas-case-heading h2 { font-family:var(--display); font-weight:500; letter-spacing:-2px; }
.atlas-intro h2 { font-size:53px; line-height:1.12; }
.atlas-intro h2 em,.atlas-page-heading h1 em { color:var(--coral); font-style:normal; }
.atlas-stats strong { font-family:var(--display); font-weight:500; letter-spacing:-1.5px; }
.atlas-preview-story h3 { font-family:var(--display); font-size:32px; line-height:1.16; font-weight:500; letter-spacing:-1.3px; }
.atlas-preview-story h3 em { font-style:normal; }
.atlas-preview-story { background:#edf2f7; }
.atlas-case { background:#fff; }
.atlas-card-title { font-weight:500; }
.atlas-page-heading h1 { font-size:clamp(38px,4.8vw,64px); line-height:1.1; }
.atlas-page-header>a:first-child { font-family:var(--display); font-weight:600; }
.atlas-story-orbit { font-family:Arial,sans-serif; }
.prompt-panel { background:#eaf2f9; }
.prompt-panel h3 { font:500 31px/1.2 var(--display); letter-spacing:-1.4px; color:#38678f; }
.prompt-tags span { border-color:#c4d6e6; color:#64839f; }
.original-prompt { color:#4d7191; }
.structure-panel,.sequence-panel { background:#fffbf7; }
.case-metrics strong { font-weight:500; font-size:44px; letter-spacing:-2px; }
.wetlab-story h3 { font-family:var(--display); font-size:37px; font-weight:500; line-height:1.1; letter-spacing:-1.5px; }
.wetlab-feature-value strong { font-family:var(--display); font-weight:500; letter-spacing:-2px; }
.benchmark-panel { background:#fff; }
.scaling-panel { background:#eef2f7; }
.scaling-panel h3 { font:500 30px/1.2 var(--display); letter-spacing:-1.4px; }
.scaling-panel>p,.scaling-bars>button { color:#657a8e; }
.scale-readout strong { font-weight:500; font-size:51px; letter-spacing:-2px; }
.scale-bar-space i { background:#bed0e1; }
.scaling-bars button:hover .scale-bar-space i { background:#7fa4c7; }
.bar-track { background:#eef2f6; }
.bar-track>span { background:#98b4cf; }
.bar-row.ours .bar-track>span { background:#d67b52; }
.lab-panel { background:#fff; }
.closing { border-radius:10px; border:1px solid #d8e0e7; padding:80px 20px 45px; background:radial-gradient(ellipse at 10% 100%,#cedfec55,transparent 55%),radial-gradient(ellipse at 90% 0,#edc9b444,transparent 55%),#edf1f5; }
.closing-loop { font:300px/.8 Arial,sans-serif; color:#a2b8c514; }
.closing h2 { font:500 clamp(30px,3.6vw,50px)/1.18 var(--display); letter-spacing:-2.2px; }
.closing h2 em { font-style:normal; color:var(--coral); }
.closing .eyebrow { color:var(--blue); }
/* A real DE2 backbone, animated between sequence order and predicted coordinates. */
.fold-story { display:grid; grid-template-columns:.72fr 1.28fr; border:1px solid #2b3a48; border-radius:10px; background:#172532; color:#e7edf3; overflow:hidden; margin-bottom:32px; }
.fold-copy { padding:35px; border-right:1px solid #354351; display:flex; flex-direction:column; align-items:flex-start; }
.fold-copy .eyebrow { color:#efaa82; font:9px var(--mono); letter-spacing:1.5px; }
.fold-copy h3 { font:500 32px/1.14 var(--display); letter-spacing:-1.4px; margin:24px 0 19px; }
.fold-copy>p:not(.eyebrow) { color:#a3b4c4; font-size:12px; line-height:1.9; max-width:305px; }
.fold-identity { margin-top:auto; padding-top:24px; display:flex; align-items:center; gap:16px; }
.fold-identity strong { color:#eeaa7e; font:500 27px var(--display); }
.fold-identity>span { border-left:1px solid #53606a; padding-left:16px; font-size:9px; line-height:1.8; color:#9eafbe; }
.fold-experience { min-width:0; padding:24px 26px 18px; }
.fold-topline { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#d39c7a; }
.fold-topline .micro { font-size:8px; letter-spacing:1.1px; }
.fold-topline>span:last-child { font:7px var(--mono); color:#8fa1b2; }
.fold-canvas-wrap { position:relative; }
.fold-canvas-wrap canvas { width:100%; height:290px; display:block; cursor:grab; touch-action:pan-y; }
.fold-canvas-wrap canvas:active { cursor:grabbing; }
.fold-loading { position:absolute; inset:0; display:grid; place-content:center; padding:30px; color:#adbecc; text-align:center; font-size:12px; line-height:1.8; }
.fold-controls { display:flex; align-items:center; gap:18px; }
.fold-controls>button { border:1px solid #5e6470; border-radius:4px; color:#e6b28b; background:#243543; padding:10px 13px; min-width:76px; font-size:10px; }
.fold-controls>label { flex:1; display:flex; align-items:center; gap:12px; }
.fold-controls>label>span { font-size:8px; color:#a9b9c7; white-space:nowrap; }
.fold-controls input { min-width:0; flex:1; width:100%; accent-color:#e59b6d; cursor:ew-resize; }
.fold-note { font-size:8px; line-height:1.7; color:#99abba; margin-top:17px; }
@keyframes activation-pulse { 0%,100% { opacity:.2; } 40%,60% { opacity:.95; } }
@media (max-width:1200px) {
 .hero h1 { font-size:61px; letter-spacing:-3px; }
 .hero-intro { font-size:15px; }
 .scene-topline .micro { font-size:7px; }
 .scene-indicator { font-size:6px; }
 .intro-strip>a>strong { font-size:19px; }
 .intro-strip>p { font-size:17px; padding:0 20px; }
 .intro-strip>a { padding:4px 20px; }
 .dual-diagram { padding:36px 30px; gap:23px; }
 .model-node { padding:17px 15px; }
 .signal-glyph { grid-template-columns:repeat(5,3px); gap:3px; }
 .signal-glyph i { width:3px; height:3px; }
 .fold-copy { padding:27px; }
 .fold-copy h3 { font-size:29px; }
 .fold-experience { padding:22px; }
}
@media (max-width:960px) and (min-width:781px) {
 .hero h1 { font-size:49px; letter-spacing:-2.5px; }
 .hero-intro { font-size:14px; }
 .hero-copy .eyebrow { font-size:7px; letter-spacing:1px; }
 .scene-topline { padding:16px 14px 0; }
 .scene-topline .micro { font-size:5.5px; }
 .scene-indicator { font-size:5px; }
 .scene-language p { font-size:18px; letter-spacing:-.7px; }
 .scene-card-label { font-size:5px; }
 .scene-card-note { font-size:5px; }
 .scene-provenance { font-size:7px; }
 .intro-strip>a>strong { font-size:16px; letter-spacing:-.7px; }
 .intro-strip>a>small { font-size:8px; }
 .intro-strip>p { font-size:15px; padding:0 15px; }
 .intro-strip>a { padding:4px 15px; }
 .model-node strong { font-size:12px; }
 .signal-glyph { display:none; }
 .fold-story { grid-template-columns:.8fr 1.2fr; }
 .fold-copy { padding:24px; }
 .fold-copy h3 { font-size:26px; }
 .fold-controls>label { gap:6px; }
 .fold-controls>label>span { font-size:7px; }
}
@media (max-width:780px) {
 .brand { font-size:23px; }
 .hero { padding:36px 24px 32px; gap:30px; }
 .hero h1 { font-size:clamp(43px,9.5vw,66px); line-height:1.07; letter-spacing:-2.3px; margin:22px 0; }
 .hero-copy .eyebrow { font-size:8px; letter-spacing:.8px; }
 .hero-intro { font-size:15px; max-width:470px; }
 .hero-actions { gap:20px; }
 .hero-actions .primary { font-size:11px; padding:16px 18px; }
 .hero-actions .text-button { font-size:11px; }
 .hero-atlas-link { max-width:none; }
 .hero-scene { max-width:550px; border-radius:10px; }
 .scene-topline { padding:17px 15px 0; }
 .scene-topline .micro { font-size:6px; letter-spacing:.7px; }
 .scene-indicator { font-size:5px; }
 .scene-language { width:39%; padding:12px 10px; top:33%; }
 .scene-language p { font-size:clamp(16px,4.3cqw,22px); line-height:1.35; letter-spacing:-.7px; margin:10px 0; }
 .scene-card-label { font-size:5.5px; letter-spacing:.3px; gap:5px; }
 .scene-card-label>span:first-child { font-size:16px; }
 .scene-card-note { font-size:5px; letter-spacing:.4px; }
 .scene-sequence { top:65%; padding:10px; }
 .scene-residues { font-size:8px; }
 .path-caption { font-size:13px; letter-spacing:-.3px; }
 .describe-caption { left:25%; bottom:5%; }
 .scene-controls button { font-size:9px; }
 .scene-caption { font-size:8px; }
 .scene-provenance { font-size:6.5px; padding:12px; }
 .intro-strip { padding:6px 18px; gap:0 20px; }
 .intro-strip>p { font-size:16px; padding:20px 0; }
 .intro-strip>a { padding:20px 0; }
 .intro-strip>a>strong { font-size:18px; letter-spacing:-.7px; }
 .intro-strip>a>small { font-size:8px; }
 .section-heading h2 { font-size:37px; letter-spacing:-1.8px; }
 .section-heading .eyebrow { font-size:8px; }
 .section-deck { font-size:12px; }
 .circuit-heading { padding:20px 16px 0; }
 .circuit-heading .micro { font-size:7px; letter-spacing:1px; }
 .circuit-heading>span:last-child { display:none; }
 .dual-toolbar { padding:17px 14px 0; }
 .dual-toolbar .segmented { gap:5px; }
 .dual-tour .micro { font-size:6px; }
 .dual-tour>.text-button { font-size:8px; }
 .dual-toolbar .segmented button { font-size:9px; padding:13px 2px; gap:4px; }
 .dual-diagram { padding:28px 14px; grid-template-columns:1fr .34fr 1fr; gap:8px; }
 .modality-title { gap:9px; margin-bottom:23px; }
 .modality-title h3 { font-size:12px; letter-spacing:-.3px; }
 .modality-title .micro { font-size:6px; }
 .modality-icon { font-size:21px; }
 .model-node { min-height:79px; padding:14px 8px; gap:7px; }
 .model-node strong { font-size:10px; }
 .model-node small { font-size:6px; }
 .node-number { font-size:7px; }
 .signal-glyph { display:none; }
 .cross-modal { padding-top:105px; }
 .flow span { font-size:6px; letter-spacing:.2px; }
 .flow small { font-size:5px; }
 .sharing-link,.mode-joint .sharing-link { font-size:6px; }
 .dual-symbol { font-size:27px; }
 .dual-explanation { padding:23px 18px; }
 .dual-explanation h3 { font-size:18px; line-height:1.4; }
 .dual-explanation p { font-size:11px; }
 .loss-block code { font-size:10px; }
 .recorded-demo-heading { padding-top:24px; }
 .recorded-demo-heading p { font-size:20px; line-height:1.4; }
 .core-demo .core-input-text { font-size:14px; }
 .dataset-compact h2 { font-size:32px; }
 .compact-stats strong { font-size:25px; }
 .key-case-stat h3 { font-size:23px; }
 .key-case-stat>strong { font-size:27px; }
 .key-case-example blockquote { font-size:15px; }
 .atlas-intro h2 { font-size:36px; letter-spacing:-1.8px; }
 .atlas-preview-story h3 { font-size:29px; letter-spacing:-1.2px; }
 .atlas-page-heading h1 { font-size:39px; }
 .prompt-panel h3 { font-size:29px; }
 .wetlab-story h3 { font-size:30px; }
 .scaling-panel h3 { font-size:28px; }
 .closing { padding:55px 16px 35px; }
 .closing h2 { font-size:29px; letter-spacing:-1.4px; }
 .fold-story { grid-template-columns:1fr; }
 .fold-copy { padding:25px 22px; border-right:0; border-bottom:1px solid #354351; }
 .fold-copy h3 { font-size:29px; margin:18px 0 14px; }
 .fold-copy>p:not(.eyebrow) { max-width:none; font-size:11px; }
 .fold-identity { padding-top:18px; }
 .fold-identity strong { font-size:24px; }
 .fold-experience { padding:19px 16px; }
 .fold-canvas-wrap canvas { height:270px; }
 .fold-controls { gap:12px; }
 .fold-controls>button { padding:10px; min-width:65px; font-size:9px; }
 .fold-controls>label { gap:6px; }
 .fold-controls>label>span { font-size:7px; }
 .fold-note { font-size:7px; }
}
@media (max-width:370px) {
 .hero { padding-left:18px; padding-right:18px; }
 .hero h1 { font-size:39px; letter-spacing:-2px; }
 .hero-copy .eyebrow { font-size:7px; }
 .hero-actions { gap:14px; }
 .hero-actions .primary { padding:14px; font-size:10px; }
 .hero-actions .text-button { font-size:10px; }
 .scene-language p { font-size:15px; }
 .scene-card-label { font-size:4.5px; }
 .scene-card-note { font-size:4.5px; }
 .scene-residues { font-size:7px; }
 .scene-caption { font-size:7px; }
 .scene-controls button { font-size:8px; }
 .intro-strip { padding:0 13px; gap:0 14px; }
 .intro-strip>p { font-size:14px; }
 .intro-strip>a>strong { font-size:16px; }
 .intro-strip>a>small { font-size:7px; }
 .section-heading h2 { font-size:33px; }
 .dual-toolbar .segmented button { font-size:8px; }
 .model-node { gap:5px; padding:13px 7px; }
 .model-node strong { font-size:9px; }
 .modality-title h3 { font-size:11px; }
 .fold-controls { flex-wrap:wrap; }
 .fold-controls>label { min-width:100%; }
 .fold-topline>span:last-child { font-size:6px; }
}
@media (prefers-reduced-motion:reduce) { .signal-glyph i { animation:none!important; } }
/* PETase remains in the protein palette, including measured product charts. */
.wetlab-outcome { background:#fbf0e8; border-color:#e7d6c9; }
.outcome-intro>.micro,.outcome-counts { color:#8f715f; }
.outcome-intro strong { color:#a95734; }
.outcome-dots i { border-color:#d2b29c; }
.outcome-dots i.active,.outcome-counts i { background:#ca7953; border-color:#ca7953; }
.outcome-counts span:last-child i { border-color:#cda58b; }
.petase-section .wetlab-story { background:radial-gradient(ellipse at 95% 5%,#fff7ec,transparent 65%),#f8e9de; }
.petase-section .wetlab-story h3 { font-size:clamp(30px,2.8vw,41px); font-weight:500; letter-spacing:-1.8px; }
.wetlab-fold>strong { color:#b05d39; font-weight:500; letter-spacing:-5px; }
.wetlab-fold strong em { font-style:normal; }
.wetlab-fold>span,.wetlab-comparison>div>span,.wetlab-comparison small { color:#8a725f; }
.wetlab-comparison { border-color:#dec6b4; }
.wetlab-explore { color:#a45432; border-color:#d5b49d; }
.petase-section .wetlab-chart { background:#fffcf9; }
.petase-section .wetlab-chart-heading p { font-size:21px; font-weight:500; letter-spacing:-.7px; }
.petase-section .assay-row.reference { background:#f0f2f5; }
.petase-section .assay-row:hover { background:#f9eee5; }
.petase-section .assay-bar { background:#f0e6de; }
.assay-bar i.tpa,.assay-legend i.tpa { background:#ce794d; }
.assay-bar i.mhet,.assay-legend i.mhet { background:#a44e45; }
.petase-section .case-tabs button { background:#f1e9e3; }
.petase-section .case-tabs button:hover { background:#ede0d5; }
.candidate-assay { background:#f8ede5; border-color:#e2d5cb; }
.candidate-assay h4 span,.candidate-assay .micro,.candidate-assay>div:not(:first-child)>span,.candidate-assay small { color:#8b7362; }
.candidate-assay>.candidate-ratio { border-color:#d9c1b0; }
.residue-list button { background:#f2e7df; color:#91684e; }
.residue-list button:hover { background:#e5cdbb; }
.residue-list button.selected { background:var(--ink); color:white; }
@media (max-width:780px) { .petase-section .wetlab-story h3 { font-size:31px; } }