| |
| :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; } |
| |
| .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; } |
| |
| .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); } |
| |
| .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; } } |
| |
| .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; } } |
|
|
