:root{--ink:#203b36;--muted:#657970;--green:#147a64;--line:#dce6df;--np:#d6a044;--pol:#91c5dc;--pos:#b6a1dc;--neg:#edb0aa}*{box-sizing:border-box}body{margin:0;background:#f7f8f3;color:var(--ink);font:15px/1.5 system-ui,sans-serif}main{max-width:1280px;margin:auto;padding:20px 28px}header{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px;font-size:11px;letter-spacing:1.4px}.brand{color:inherit;text-decoration:none;font-weight:750}.intro{display:flex;justify-content:space-between;align-items:center;margin:24px 0 20px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.8px;color:var(--green);margin:0 0 5px}h1{font-size:34px;letter-spacing:-1.3px;line-height:1.2;margin:0 0 8px}.intro p:last-child{margin:0;color:var(--muted)}.model-tag,.pill{font-size:11px;border-radius:20px;background:#edf4ed;padding:7px 12px;white-space:nowrap}nav{display:flex;gap:10px;margin-bottom:16px}button,select{font:inherit;color:inherit;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 14px;cursor:pointer}button:hover{border-color:var(--green)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d6a044;outline-offset:3px}nav button{flex:1;text-align:left;font-size:13px;font-weight:650}nav .active,.primary{background:var(--green);color:white;border-color:var(--green)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:19px}.panelhead{display:flex;justify-content:space-between;gap:8px;align-items:center}h2{font-size:21px;letter-spacing:-.5px;margin:0}h3{font-size:15px;margin:0 0 8px}.instruction{font-size:13px;color:var(--muted);min-height:40px;margin:9px 0}.legend{display:flex;flex-wrap:wrap;gap:13px;font-size:11px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:11px;height:11px;border-radius:50%}.np{background:var(--np)}.pol{background:var(--pol)}.pos{background:var(--pos)}.neg{background:var(--neg)}.viewer{border:1px solid #edf0eb;border-radius:12px;margin-top:10px;background:radial-gradient(#d7e5df .8px,transparent .8px);background-size:22px 22px;overflow:auto}svg{display:block;width:100%;min-width:590px;height:340px}.under{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);gap:8px;margin:7px 0 14px}.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px}.controls label{display:flex;align-items:center;gap:8px}input[type=range]{accent-color:var(--green);width:180px}.feedback{border-left:3px solid var(--green);background:#f0f6f1;padding:10px 12px;border-radius:8px;font-size:12px;min-height:58px;margin:13px 0}.sequence{border-top:1px solid var(--line);padding-top:12px}.seqhead{display:flex;justify-content:space-between;gap:10px;font-size:11px}.seqhead span{color:var(--muted)}#residues{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}#residues button{padding:5px 0;width:36px;border:2px solid transparent;font-size:12px;border-radius:9px}#residues button.selected{border-color:var(--ink)}#residueInfo{font-size:12px;margin:8px 0}.interactionbox{border-top:1px solid var(--line);padding-top:10px;font-size:11px}#interactionKey{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;color:var(--muted)}aside .panel+section{margin-top:15px}#answers{display:grid;gap:8px}#answers button{text-align:left;font-size:12px;padding:10px}#answers .correct{background:#e6f4eb;border-color:var(--green)}#answers .wrong{background:#fff1e9;border-color:#c58b62}#question{font-size:14px}#answerFeedback{font-size:12px}.small{font-size:11px;color:var(--muted)}.takeaway p{font-size:12px}.notes{margin-top:16px;font-size:12px}.notes summary{cursor:pointer;font-weight:650}.notesgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-top:20px}.notes p{color:var(--muted)}footer{font-size:10px;color:var(--muted);margin:18px 0}button:disabled{opacity:.55;cursor:default}@media(max-width:900px){.layout{grid-template-columns:1fr}.intro{display:block}.model-tag{display:inline-block;margin-top:12px}aside{display:grid;grid-template-columns:1fr 1fr;gap:14px}aside .panel+section{margin-top:0}}@media(max-width:600px){main{padding:16px 12px}h1{font-size:29px}nav{gap:5px}nav button{padding:9px;font-size:11px}aside,.notesgrid{grid-template-columns:1fr}.panel{padding:13px}.seqhead{display:block}.seqhead span{display:block}.under{display:block}.panelhead{align-items:start}.pill{font-size:9px}svg{height:300px}}

@media(max-width:700px){nav{display:grid;grid-template-columns:1fr 1fr}}

[hidden]{display:none!important}.molecular-reference{margin:12px 0;border:1px solid var(--line);border-radius:12px;padding:14px}.reference-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.reference-title h3{margin:0}.reference-title button{font-size:12px;white-space:nowrap}.molecular-reference img{display:block;width:100%;height:auto;max-height:490px;object-fit:contain}.molecular-reference figcaption{font-size:11px;color:var(--muted);line-height:1.6;margin-top:12px}.molecular-reference a{color:var(--green)}dialog{border:1px solid var(--line);border-radius:16px;max-width:1000px;width:92vw;max-height:92vh;padding:20px;color:var(--ink)}dialog::backdrop{background:#203b3680}dialog img{display:block;width:100%;height:auto}.reference-title h2{font-size:18px}

.levels{margin:20px 0}.level-heading h2{font-size:22px}.level-heading p{font-size:12px;color:var(--muted);margin:5px 0 13px}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.level-card{background:white;border:1px solid var(--line);border-radius:12px;padding:13px}.level-card h3{font-size:15px;min-height:23px;margin:0}.level-card svg{width:100%;min-width:0;height:105px}.level-card p:not(.eyebrow){font-size:12px;margin:6px 0 9px}.level-card b{font-size:11px;color:var(--green);display:block}nav{display:grid;grid-template-columns:repeat(5,1fr)}nav button{font-size:12px;padding:10px}@media(max-width:1000px){.level-grid{grid-template-columns:1fr 1fr}nav{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){nav{grid-template-columns:1fr 1fr}.level-card{padding:10px}.level-card h3{font-size:13px}.level-card p:not(.eyebrow){font-size:11px}}