:root{--ink:#193946;--teal:#246b78;--orange:#b44020;--paper:#f4f9fa;--line:#bfd5db;--pale:#e1f0f3;--muted:#788f96;--white:#fff}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;font-size:19px;line-height:1.4}button,select,input{font:inherit;touch-action:manipulation}button{padding:8px 13px;min-height:44px;border:2px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);cursor:pointer}button:hover:not(:disabled){background:var(--pale);border-color:var(--teal)}button:disabled{opacity:.45;cursor:default}.primary,button.selected{background:var(--teal);border-color:var(--teal);color:var(--white)}button.selected:disabled{opacity:1}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
#lab{max-width:1160px;margin:auto;padding:10px 22px 16px}.lab-header{display:flex;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:2px solid var(--line)}.lab-header strong{font-size:19px}.lab-header span{font-size:16px}.scene-map{display:flex;gap:6px;margin:7px 0}.scene-map span{flex:1;background:var(--pale);text-align:center;padding:5px 2px;font-size:16px;border-radius:6px}.scene-map .current{background:var(--ink);color:white}.scene-map .done:before{content:'✓ '}.scene-heading p{margin:3px 0}.scene-heading h1{font-size:28px;margin:4px 0;line-height:1.25}#flow{font-size:16px;font-weight:700;color:var(--teal)}#task{font-size:18px}#stage{margin-top:8px;background:white;border:1px solid var(--line);border-radius:14px;padding:10px 14px;min-height:174px}.model-diagram{display:block;width:100%;height:145px}.model-diagram text{font-family:inherit;font-weight:700}.diagram-note{font-size:17px;margin:3px 0;text-align:center}.formula{font-weight:700;font-size:20px;text-align:center;margin:6px 0}.readouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-top:6px}.readouts>div{background:var(--paper);border:1px solid var(--line);padding:7px 9px;border-radius:8px}.readouts span{display:block;font-size:16px}.readouts strong{display:block;font-size:20px}.caption{border-left:5px solid var(--orange);background:#fff2e9;padding:8px 12px;margin-top:8px;font-weight:700;min-height:44px}.caption p{margin:0}.timeline{display:flex;gap:8px;align-items:center;font-size:15px;margin:6px 0}progress{height:6px;width:100%;accent-color:var(--teal)}#time{min-width:85px;text-align:right}.parameters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0}.parameters label{display:flex;align-items:center;gap:6px;font-size:17px}.parameters select{border:2px solid var(--line);border-radius:7px;min-height:44px;max-width:100%;background:white;color:var(--ink);padding:4px 7px;font-size:17px}.parameters input{width:160px;min-height:32px;accent-color:var(--teal)}.parameters output{min-width:28px}#activity{min-height:73px}#activity p{font-weight:700;margin:5px 0}.choices{display:flex;gap:8px;flex-wrap:wrap}.choices button{flex:1;font-size:18px}#feedback{min-height:1.5em;margin:5px 0;color:var(--teal);font-size:17px}#feedback.retry{color:var(--orange)}.controls{display:flex;gap:8px;padding:8px 0;border-top:1px solid var(--line)}.controls button{font-size:17px}#next{margin-left:auto}.model-note{font-size:15px;margin:6px 0}.teacher-notes{font-size:16px;margin-top:5px}.teacher-notes p{margin:8px 0}a{color:var(--teal)}[hidden]{display:none!important}
.process-lane{display:flex;justify-content:space-between;gap:14px;padding:14px 0}.process-node{flex:1;position:relative;border:2px solid var(--line);border-radius:9px;text-align:center;padding:12px 8px;font-size:19px;background:var(--paper)}.process-node.lit{background:var(--pale);border-color:var(--teal)}.process-arrow{position:absolute;right:-18px;color:var(--orange)}.branches{font-size:19px;text-align:center}.branches span{display:block}.dna-row{display:flex;justify-content:center;gap:14px;align-items:center;padding:7px}.base{width:54px;text-align:center;border:2px solid var(--teal);background:var(--pale);padding:7px;border-radius:9px;font-size:24px}.hero{background:#fff2e9!important;border-color:var(--orange)!important}.dna-links{text-align:center;color:var(--teal);font-size:23px;letter-spacing:20px}.coupled{display:flex;align-items:center;justify-content:center;gap:20px;padding:20px 0}.coupled>div{border:2px solid var(--line);padding:15px;border-radius:10px;text-align:center}.coupled strong{font-size:26px}.connector.lit{border-color:var(--orange);background:#fff2e9}.carbon-chain{display:flex;gap:5px;flex-wrap:wrap;min-height:56px;align-items:center;padding:8px}.carbon{border:2px solid var(--teal);border-radius:50%;width:32px;height:32px;text-align:center;font-size:19px;background:var(--pale)}.organ-map{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:center}.organ{padding:12px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:21px}.organ strong{display:block;font-size:18px;margin-top:5px}.fuel-arrow{font-size:18px;opacity:.35;color:var(--orange);text-align:center}.fuel-arrow.lit{opacity:1}
@media(max-width:600px){body{font-size:17px}#lab{padding:10px 12px}.lab-header span{display:none}.scene-map{gap:4px}.scene-map span{font-size:13px;padding:7px 1px}.scene-map .done:before{content:''}.scene-heading h1{font-size:24px}#task{font-size:17px}.model-diagram{height:128px}#stage{padding:9px}.readouts{grid-template-columns:1fr 1fr;gap:6px}.readouts strong{font-size:18px}.readouts span{font-size:15px}.diagram-note{font-size:16px}.formula{font-size:18px}.parameters{display:block}.parameters label{flex-wrap:wrap;margin:5px 0}.parameters select{font-size:16px;flex:1;min-width:0}.parameters input{flex:1}.choices button{flex:1 0 100%;font-size:17px;text-align:left}.controls{position:sticky;bottom:0;z-index:2;background:var(--paper);display:grid;grid-template-columns:repeat(3,1fr)}.controls button{font-size:16px;padding:8px 4px}#next{grid-column:2 / span 2;margin:0}.process-lane{gap:8px}.process-node{font-size:17px;padding:8px 3px}.process-arrow{display:none}.base{width:40px;font-size:23px;padding:6px}.dna-row{gap:7px;padding:5px 0}.dna-row b{font-size:17px}.dna-links{font-size:20px;letter-spacing:13px}.coupled{gap:5px;flex-wrap:wrap}.coupled>div{padding:10px;font-size:17px}.coupled .connector{font-size:16px}.organ-map{grid-template-columns:1fr}.organ{text-align:center}.fuel-arrow{font-size:18px}.readouts>div{overflow-wrap:anywhere}.model-note{font-size:14px}}
.dna-links{display:flex;justify-content:center;gap:14px;letter-spacing:0}.dna-links span{width:54px}@media(max-width:600px){.dna-links{gap:7px}.dna-links span{width:40px}}
#lab[data-scene="challenge"] .readouts,#lab[data-scene="challenge"] .formula,#lab[data-scene="challenge"] .diagram-note,#lab[data-scene="challenge"] .branches{display:none}
@media(max-width:600px){.model-diagram text{font-size:42px}}
@media(max-height:500px){.controls{position:sticky;bottom:0;z-index:2;background:var(--paper)}}
.peptide-wrap,.struct-wrap{overflow-x:auto;overflow-y:hidden}.peptide-diagram,.struct-diagram{height:230px;min-width:560px}
@media(max-width:600px){.peptide-diagram,.struct-diagram{height:200px;min-width:600px}}