.biology-page { background: #060b12; color: #e8f5ff; }
.biology-main { max-width: 1320px; padding-top: 42px; padding-bottom: 72px; }
.biology-hero { display:flex; justify-content:space-between; align-items:center; gap:30px; min-height:240px; position:relative; overflow:hidden; }
.biology-hero h1 { margin:12px 0 14px; max-width:760px; font-size:clamp(2.6rem,6vw,5.8rem); line-height:.94; letter-spacing:-.055em; color:#f2fbff; }
.biology-lead { max-width:680px; margin:0; color:#96b3c7; font-size:1.08rem; line-height:1.7; }
.biology-hero-orbit { width:220px; height:220px; flex:0 0 220px; border:1px solid rgba(46,214,255,.25); border-radius:50%; position:relative; box-shadow:0 0 70px rgba(21,169,255,.16), inset 0 0 45px rgba(21,169,255,.1); transform:rotate(-25deg); }
.biology-hero-orbit:before,.biology-hero-orbit:after { content:""; position:absolute; inset:28px -22px; border:1px solid rgba(127,247,218,.35); border-radius:50%; transform:rotate(55deg); }
.biology-hero-orbit:after { inset:-12px 28px; transform:rotate(110deg); }
.biology-hero-orbit span,.biology-hero-orbit i,.biology-hero-orbit b { position:absolute; width:14px; height:14px; border-radius:50%; background:#73f4d1; box-shadow:0 0 25px #73f4d1; }
.biology-hero-orbit span { top:26px; left:85px; }.biology-hero-orbit i { right:19px; bottom:56px; background:#39c9ff; box-shadow:0 0 25px #39c9ff; }.biology-hero-orbit b { left:30px; bottom:26px; background:#ffad66; box-shadow:0 0 25px #ffad66; }
.biology-lab { display:grid; grid-template-columns:340px minmax(0,1fr); min-height:620px; padding:0; overflow:hidden; background:linear-gradient(135deg,rgba(16,31,48,.97),rgba(7,14,23,.98)); border:1px solid rgba(95,171,216,.2); }
.biology-controls { padding:34px 28px; border-right:1px solid rgba(95,171,216,.18); display:flex; flex-direction:column; }
.alphafold-result { margin-top:12px; padding:12px; border:1px solid rgba(169,108,255,.35); border-radius:9px; background:linear-gradient(135deg,rgba(114,73,201,.14),rgba(29,171,209,.08)); }.alphafold-result small { display:block; color:#cdb3ff; font-size:.64rem; font-weight:800; letter-spacing:.08em; }.alphafold-result strong { display:block; margin-top:5px; color:#f1eaff; font-size:.82rem; }.alphafold-result p { margin:6px 0 9px; color:#a6bdcb; font-size:.7rem; line-height:1.45; }.alphafold-result div { display:flex; flex-wrap:wrap; gap:10px; }.alphafold-result a { color:#91eaff; font-size:.7rem; font-weight:800; text-decoration:none; }.alphafold-result a:hover { color:#fff; }.alphafold-result img { display:block; width:100%; margin-top:11px; border:1px solid rgba(164,206,255,.24); border-radius:6px; background:#07111a; }.alphafold-result .alphafold-pae-note { color:#8aa4b7; font-size:.65rem; }.alphafold-compare { display:block!important; margin-top:11px; padding-top:10px; border-top:1px solid rgba(179,148,255,.2); }.alphafold-compare label { display:block; margin-bottom:6px; color:#cdb3ff; font-size:.64rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.alphafold-compare span { display:flex; gap:7px; }.alphafold-compare input { min-width:0; flex:1; padding:8px 9px; border:1px solid rgba(164,206,255,.3); border-radius:6px; background:#07111a; color:#e9fbff; font:800 .75rem monospace; text-transform:uppercase; }.alphafold-compare .btn { padding:8px 10px; font-size:.67rem; }
.biology-section-label { display:flex; align-items:center; gap:8px; color:#66e7c4; letter-spacing:.16em; font-size:.7rem; font-weight:800; }.biology-section-label small { font-size:.66rem; }.status-dot { width:7px; height:7px; border-radius:50%; background:#73f4d1; box-shadow:0 0 14px #73f4d1; }
.biology-controls h2 { font-size:1.55rem; margin:24px 0 15px; }
.pdb-file-label,.pdb-id-form label { display:block; color:#8daaba; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.pdb-file-label { padding:12px; border:1px dashed rgba(104,196,216,.42); border-radius:9px; background:rgba(54,162,194,.06); cursor:pointer; }.pdb-file-label:hover { border-color:#63e6cb; }.pdb-file-label input { display:block; width:100%; margin-top:8px; color:#9bc0d1; font-size:.74rem; }.pdb-id-form { margin-top:15px; }.pdb-id-form > div { display:flex; gap:7px; margin-top:7px; }.pdb-id-form input { min-width:0; flex:1; padding:10px 11px; border:1px solid rgba(102,151,188,.3); border-radius:7px; background:#07111a; color:#e9fbff; font:800 .85rem monospace; text-transform:uppercase; letter-spacing:.12em; }.pdb-id-form .btn { padding:9px 11px; font-size:.71rem; }.pdb-mini-label { margin:18px 0 8px; color:#8daaba; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.pdb-quick-load { display:grid; gap:7px; }.pdb-quick-load button { display:flex; align-items:center; justify-content:space-between; gap:7px; padding:9px 11px; border:1px solid rgba(102,151,188,.2); border-radius:7px; background:rgba(255,255,255,.025); color:#d7f3fa; cursor:pointer; font:800 .76rem monospace; text-align:left; }.pdb-quick-load button:hover { border-color:#42d4ff; background:rgba(40,176,225,.13); }.pdb-quick-load span { color:#7895a9; font:600 .67rem system-ui,sans-serif; }
.molecule-picker { display:grid; gap:8px; }.molecule-choice { text-align:left; border:1px solid rgba(102,151,188,.2); background:rgba(255,255,255,.025); color:#bdd0dd; border-radius:10px; padding:13px 14px; cursor:pointer; transition:.2s ease; }.molecule-choice:hover,.molecule-choice.is-active { border-color:#42d4ff; background:rgba(40,176,225,.13); transform:translateX(3px); color:#fff; }.molecule-choice strong,.molecule-choice span { display:block; }.molecule-choice strong { font-size:.88rem; color:inherit; }.molecule-choice span { margin-top:4px; font-size:.73rem; color:#7895a9; }
.biology-fact { margin-top:22px; min-height:112px; padding:15px; border-left:2px solid #62eecb; background:rgba(98,238,203,.05); color:#a5c1d0; line-height:1.55; font-size:.83rem; }.biology-fact strong { display:block; color:#edfaff; margin-bottom:6px; }.biology-fact em { color:#72eed1; font-style:normal; }
.biology-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }.biology-actions .btn { font-size:.72rem; padding:10px 12px; }.biology-note { margin-top:auto; padding-top:24px; color:#668296; font-size:.7rem; line-height:1.55; }
.biology-stage-shell { position:relative; min-height:620px; background:radial-gradient(circle at 50% 48%,rgba(20,87,112,.36),transparent 45%),linear-gradient(135deg,#07131f,#03070d); }.biology-stage { position:absolute; inset:0; }.biology-stage canvas { display:block; width:100%; height:100%; }.biology-stage-topline { position:absolute; top:20px; left:24px; right:24px; display:flex; justify-content:space-between; color:#6e9bb3; letter-spacing:.18em; font-size:.65rem; pointer-events:none; }.biology-stage-topline b { color:#d8f7ff; letter-spacing:.12em; }.biology-legend { position:absolute; bottom:20px; left:24px; display:flex; flex-wrap:wrap; gap:12px; color:#94b1c1; font-size:.7rem; pointer-events:none; }.biology-legend span { display:flex; align-items:center; gap:4px; }.biology-legend i { width:8px; height:8px; border-radius:50%; display:inline-block; }.legend-carbon{background:#b8c7d1}.legend-oxygen{background:#ff706f}.legend-nitrogen{background:#5c9eff}.legend-sulfur{background:#f1d454}.legend-phosphorus{background:#ffad55}.legend-iron{background:#d07b4e}.biology-stage-error { position:absolute; inset:40% 12%; text-align:center; color:#ffadad; }.biology-theory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; }.biology-theory-grid article { padding:25px; background:rgba(12,27,42,.8); border:1px solid rgba(95,171,216,.14); }.theory-index { color:#66e7c4; font:800 .72rem monospace; letter-spacing:.2em; }.biology-theory-grid h2 { margin:12px 0 8px; font-size:1.2rem; }.biology-theory-grid p { color:#8ba5b6; line-height:1.65; font-size:.85rem; margin:0; }
.pdb-samples { margin-top:55px; padding-top:34px; border-top:1px solid rgba(95,171,216,.18); }.pdb-heading { max-width:680px; }.pdb-heading h2 { margin:10px 0 8px; font-size:clamp(1.7rem,3vw,2.5rem); }.pdb-heading > p:last-child { color:#8ba5b6; line-height:1.65; margin:0; }.pdb-sample-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:22px; }.pdb-sample { min-height:160px; padding:16px; display:flex; flex-direction:column; border:1px solid rgba(95,171,216,.16); background:linear-gradient(145deg,rgba(18,42,60,.86),rgba(7,18,28,.9)); color:#dff7ff; text-decoration:none; transition:.2s ease; }.pdb-sample:hover { border-color:#55dcc9; transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.24); }.pdb-number { color:#62eecb; font:800 .66rem monospace; letter-spacing:.14em; }.pdb-sample strong { margin-top:20px; font-size:.95rem; }.pdb-sample small { margin-top:7px; color:#85a4b6; line-height:1.45; font-size:.71rem; }.pdb-sample em { margin-top:auto; padding-top:15px; color:#62eecb; font:700 .69rem monospace; font-style:normal; }.pdb-index-link { display:inline-block; margin-top:18px; color:#85b6ca; font-size:.8rem; text-decoration:none; }.pdb-index-link:hover { color:#62eecb; }
.pdb-compare { margin-top:28px; padding:30px; background:linear-gradient(135deg,rgba(10,35,50,.96),rgba(7,14,23,.98)); border:1px solid rgba(91,217,213,.25); }.pdb-compare-heading { max-width:760px; }.pdb-compare-heading h2 { margin:9px 0; font-size:clamp(1.65rem,3vw,2.35rem); }.pdb-compare-heading p { margin:0; color:#8da9ba; line-height:1.6; }.pdb-compare-workspace { display:grid; grid-template-columns:330px minmax(0,1fr); gap:24px; margin-top:26px; }.pdb-compare-inputs { display:flex; flex-direction:column; gap:8px; }.pdb-compare-inputs > label { color:#a4c8d5; font:800 .68rem system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; }.pdb-compare-inputs > input { padding:11px; border:1px solid rgba(98,172,194,.34); border-radius:7px; background:#06111a; color:#dffff8; font:800 .86rem monospace; letter-spacing:.12em; text-transform:uppercase; }.pdb-compare-files { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:5px 0 2px; }.pdb-compare-files label { color:#829ead; font-size:.68rem; }.pdb-compare-files input { display:block; width:100%; margin-top:5px; color:#8eaeba; font-size:.65rem; }.pdb-frame-option { display:flex; gap:8px; align-items:flex-start; margin:8px 0; color:#91afbe; font-size:.72rem; line-height:1.4; cursor:pointer; }.pdb-frame-option input { accent-color:#66e7c4; margin-top:2px; }.pdb-compare-inputs .btn { align-self:flex-start; font-size:.72rem; padding:11px 16px; }.pair-status { min-height:38px; margin:5px 0 0; color:#72e7cf; font-size:.75rem; line-height:1.45; }.pdb-analysis-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; align-content:start; }.pdb-analysis-grid article { min-height:105px; padding:17px; border:1px solid rgba(98,172,194,.18); background:rgba(2,11,18,.42); }.pdb-analysis-grid article span { display:block; color:#6de3ca; font:800 .65rem system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; }.pdb-analysis-grid article strong { display:block; margin-top:12px; color:#dceef5; font-size:.83rem; line-height:1.5; font-weight:650; }.pdb-analysis-grid .pair-reaction { grid-column:1 / -1; }.pdb-analysis-note { margin:20px 0 0; color:#7897a8; font-size:.72rem; line-height:1.55; }
@media(max-width:1050px){.pdb-sample-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.biology-hero-orbit{width:150px;height:150px;flex-basis:150px}.biology-lab{grid-template-columns:1fr}.biology-controls{border-right:0;border-bottom:1px solid rgba(95,171,216,.18)}.biology-stage-shell{min-height:500px}.biology-theory-grid{grid-template-columns:1fr}}
@media(max-width:850px){.pdb-sample-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.pdb-compare{padding:22px}.pdb-compare-workspace{grid-template-columns:1fr}}
@media(max-width:560px){.biology-main{padding-top:24px}.biology-hero{min-height:0;padding:20px 0 35px}.biology-hero-orbit{display:none}.biology-hero h1{font-size:2.9rem}.biology-controls{padding:24px 18px}.biology-stage-shell{min-height:420px}.biology-legend{gap:7px;left:14px}.biology-stage-topline{left:14px;right:14px}.pdb-sample-grid{grid-template-columns:1fr}}