:root{color-scheme:light;--bg: #f7f3e8;--panel: #fffaf0;--text: #181716;--muted: #666057;--accent: #e94335;--accent-blue: #1769c2;--accent-yellow: #f4c542;--border: #22201d;--good: #2e8b57;--bad: #c13f3f;color:var(--text);background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{color-scheme:light}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(90deg,rgba(24,23,22,.035) 1px,transparent 1px),linear-gradient(rgba(24,23,22,.035) 1px,transparent 1px),var(--bg);background-size:32px 32px}button,select,input{font:inherit}button,select{border:2px solid var(--border);background:var(--panel);color:var(--text);min-height:40px;border-radius:0;padding:.55rem .8rem;box-shadow:3px 3px 0 var(--border)}button{cursor:pointer;font-weight:800}button:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--border)}.app{color-scheme:light;min-height:100vh}.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,4vw,2rem);border-bottom:3px solid var(--border);background:#f7f3e8f0;position:sticky;top:0;z-index:10}.wordmark{background:var(--accent);color:#fff;letter-spacing:0}.nav-links{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:flex-end}.home,.page,.play,.result-page{padding:clamp(1rem,3vw,2rem)}.home{padding-top:clamp(8rem,3vw,2.2rem)}.home-layout{max-width:1180px;min-height:auto;margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(1.15rem,2.8vw,2rem);align-items:start}.hero{display:grid;grid-template-columns:minmax(170px,260px) minmax(0,1fr);align-items:center;gap:clamp(1rem,4vw,2.5rem);min-width:0}.hero-copy{min-width:0}.hero-copy h1,.page h1,.answer-panel h1,.result-card h1{margin:0;line-height:.95;letter-spacing:0}.hero-copy h1{font-size:clamp(3rem,6vw,5.1rem)}.hero-copy p{max-width:560px;font-size:1.04rem;line-height:1.46;margin:.95rem 0 1.25rem}.eyebrow{margin:0 0 .8rem;text-transform:uppercase;font-size:.78rem;font-weight:900;color:var(--muted)}.primary-action{background:var(--accent-yellow)}.next-action{background:var(--accent-blue);color:#fff}.full{width:100%}.bauhaus-grid{position:relative;aspect-ratio:1;width:min(100%,250px);border:3px solid var(--border);background:var(--panel);box-shadow:8px 8px 0 var(--border);overflow:hidden}.shape{position:absolute;border:3px solid var(--border)}.circle{width:36%;aspect-ratio:1;border-radius:50%;top:8%;left:10%}.square{width:28%;aspect-ratio:1;right:12%;top:18%}.bar{width:70%;height:18%;left:15%;bottom:16%}.ring{width:24%;aspect-ratio:1;border-radius:50%;right:18%;bottom:34%;background:var(--panel)}.half{width:32%;height:32%;left:18%;bottom:34%;border-radius:0 100% 100% 0;background:var(--accent-blue)}.red{background:var(--accent)}.blue{background:var(--accent-blue)}.yellow{background:var(--accent-yellow)}.home-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;min-width:0}.home-info-grid{display:contents}.home-info-grid div,.home-credit{background:var(--panel);border:3px solid var(--border);box-shadow:5px 5px 0 var(--border)}.home-info-grid div{min-height:0;padding:1rem 1.1rem;display:grid;align-content:center;gap:.32rem}.home-info-grid strong{font-size:1.05rem}.home-info-grid span,.page p,.plain-list{color:var(--muted);line-height:1.45}.home-credit{padding:1rem 1.1rem}.home-credit h2{margin:0 0 .42rem;font-size:1.1rem}.home-credit p{margin:.34rem 0;color:var(--muted);line-height:1.38;font-size:.92rem}.home-credit a{color:var(--accent-blue);font-weight:900}.narrow{max-width:900px;margin:0 auto}.page h1{font-size:clamp(2.4rem,7vw,4.5rem);margin:2rem 0 1.5rem}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem}.info-grid div,.credit-box,.loading-panel,.answer-panel,.sequence-panel{background:var(--panel);border:3px solid var(--border);box-shadow:5px 5px 0 var(--border)}.info-grid div{padding:1rem}.credit-box{padding:1rem;margin:1.5rem 0}.credit-box h2{margin:0 0 .4rem}.credit-box a{color:var(--accent-blue);font-weight:900}.info-grid h2{margin:0 0 .35rem;font-size:1rem}.plain-list{padding-left:1.2rem}.play{max-width:1480px;margin:0 auto}.progress-wrap{margin-bottom:1rem}.progress-meta{display:flex;justify-content:space-between;font-weight:900;margin-bottom:.4rem}.progress-track{height:16px;border:3px solid var(--border);background:var(--panel)}.progress-fill{height:100%;background:repeating-linear-gradient(90deg,var(--accent-blue) 0,var(--accent-blue) 16px,var(--accent-yellow) 16px,var(--accent-yellow) 32px,var(--accent) 32px,var(--accent) 48px)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:1.2rem;align-items:start}.viewer-column{min-width:0}.protein-viewer-shell{position:relative;height:min(68vh,720px);min-height:460px;border:3px solid var(--border);background:var(--panel);box-shadow:7px 7px 0 var(--border);overflow:hidden}.protein-viewer{width:100%;height:100%}.viewer-state{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#f7f3e8e0;font-weight:900}.error,.viewer-state.error{color:var(--bad)}.viewer-controls{display:flex;flex-wrap:wrap;gap:.65rem;align-items:end;margin-top:1rem}.viewer-controls label{display:grid;gap:.25rem;font-size:.78rem;color:var(--muted);font-weight:900;text-transform:uppercase}.viewer-controls button[aria-pressed=true]{background:var(--accent-blue);color:#fff}.answer-panel{padding:1rem;position:sticky;top:92px}.mini-pattern{display:grid;grid-template-columns:repeat(4,1fr);height:46px;border:3px solid var(--border);margin-bottom:1rem}.mini-pattern span:nth-child(1){background:var(--accent)}.mini-pattern span:nth-child(2){background:var(--accent-yellow)}.mini-pattern span:nth-child(3){background:var(--accent-blue)}.mini-pattern span:nth-child(4){background:var(--panel)}.answer-panel h1{font-size:2.25rem}.answer-panel p,.helper,.keyboard-hint{color:var(--muted);line-height:1.45}.feedback{border:3px solid var(--border);padding:.7rem;margin:-.2rem 0 1rem;display:grid;gap:.2rem;box-shadow:3px 3px 0 var(--border)}.feedback strong{font-size:1.05rem}.feedback span{color:var(--text)}.feedback-design{font-family:Space Mono,monospace;font-size:.8rem;overflow-wrap:anywhere}.feedback.good{background:#b9dfc6}.feedback.ok{background:var(--accent-yellow)}.feedback.bad{background:#f2b4a6}.slider-block{margin:1.2rem 0}.slider-block label{display:block;font-weight:900;margin-bottom:.8rem}input[type=range]{width:100%;accent-color:var(--accent)}.scale-row{display:flex;align-items:center;justify-content:space-between;margin:.2rem 0}.scale-row strong{font-size:2rem}.anchor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}.anchor-grid button.anchor-correct:disabled{background:#b9dfc6;color:var(--text);opacity:1}.anchor-grid button.anchor-miss:disabled{background:#f2b4a6;color:var(--text);opacity:1}.sequence-panel{margin-top:1rem;padding:1rem;min-width:0;max-width:100%}.sequence-meta{display:flex;gap:1rem;font-weight:900;margin-bottom:.65rem}.sequence-string{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.9;max-width:100%;overflow-x:auto;overflow-wrap:anywhere;word-break:break-word}.sequence-group{display:inline-block;margin-right:.7rem;white-space:nowrap}.residue{display:inline-block;padding:.08rem .12rem}.residue.hydrophobic,.dot.hydrophobic{background:#7a4a20;color:#fff}.residue.polar,.dot.polar{background:#cfe2f4}.residue.positive,.dot.positive{background:#5178d6;color:#fff}.residue.negative,.dot.negative{background:#c83535;color:#fff}.legend{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:.8rem;color:var(--muted);font-size:.9rem}.dot{display:inline-block;width:13px;height:13px;border:1px solid var(--border);margin-right:-.4rem}.loading-panel{max-width:560px;margin:12vh auto;padding:1.4rem;font-weight:900}.result-page{display:grid;justify-items:center;gap:1rem}.result-card{width:min(100%,1200px);min-height:630px;background:var(--bg);border:4px solid var(--border);box-shadow:8px 8px 0 var(--border);padding:clamp(1rem,2.6vw,2rem);display:grid;gap:1rem;overflow:hidden}.result-header{display:flex;align-items:start;justify-content:space-between;gap:1rem;border-bottom:3px solid var(--border);padding-bottom:.8rem}.result-card h1{font-size:clamp(2.3rem,5.8vw,4.9rem)}.score-lockup{min-width:190px;background:var(--accent-yellow);border:3px solid var(--border);padding:.8rem;text-align:center}.score-lockup span{display:block;font-weight:900;text-transform:uppercase;font-size:.76rem}.score-lockup strong{font-size:3rem;line-height:1}.verdict{width:fit-content;padding:.5rem .8rem;background:var(--accent);color:#fff;border:3px solid var(--border);font-weight:900}.verdict-scale{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.76rem;font-weight:900}.verdict-scale strong{margin-right:.15rem}.verdict-scale span{border:2px solid var(--border);background:var(--panel);padding:.22rem .38rem}.comparison-note{margin:0;color:var(--muted);font-weight:800;font-size:.9rem}.metric-table{width:100%;border-collapse:collapse;background:var(--panel)}.metric-table th,.metric-table td{border:2px solid var(--border);padding:.55rem;text-align:right}.metric-table th:first-child,.metric-table td:first-child{text-align:left}.result-visuals{display:grid;grid-template-columns:390px 1fr;gap:1rem;align-items:center}.scatter rect{fill:var(--panel);stroke:var(--border);stroke-width:3}.scatter .axis,.scatter .identity{stroke:var(--border);stroke-width:2}.scatter .identity{stroke-dasharray:6 6;opacity:.55}.scatter circle{fill:var(--accent-blue);stroke:var(--border);stroke-width:1.5;opacity:.86}.scatter text{fill:var(--muted);font-size:12px;font-weight:800}.bars{display:grid;gap:.65rem}.bar-row{display:grid;grid-template-columns:90px 1fr 48px;align-items:center;gap:.65rem;font-weight:900}.bar-track{position:relative;height:24px;border:2px solid var(--border);background:var(--panel);overflow:hidden}.bar-fill{height:100%;background:var(--accent-blue)}.bar-midline{position:absolute;left:50%;top:0;bottom:0;border-left:2px dashed rgba(24,23,22,.45);z-index:1}.result-card footer{color:var(--muted);font-weight:800;border-top:3px solid var(--border);padding-top:.7rem}.result-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}.status-message{color:var(--muted);font-weight:800}@media (max-width: 1120px){.hero{grid-template-columns:minmax(130px,180px) minmax(0,1fr)}.bauhaus-grid{width:min(100%,220px)}}@media (max-width: 980px){.home-layout,.game-layout,.result-visuals{grid-template-columns:1fr}.home-layout{align-items:start}.answer-panel{position:static}.protein-viewer-shell{min-height:390px;height:58vh}.home-details,.info-grid{grid-template-columns:1fr}}@media (max-width: 620px){.nav{align-items:flex-start;flex-direction:column}.nav-links{justify-content:flex-start}.protein-viewer-shell{min-height:330px}.hero,.anchor-grid,.result-header{grid-template-columns:1fr;display:grid}.score-lockup{min-width:0}.metric-table{font-size:.82rem}.metric-table th,.metric-table td{padding:.38rem}.bar-row{grid-template-columns:80px 1fr 42px}}