@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@500;600;700&display=swap');
:root{--paper:#f0eadb;--paper-light:#f7f2e7;--paper-dark:#ded5c1;--ink:#2c302b;--muted:#777568;--line:#c9bea8;--green:#56745e;--green-light:#7f9b7b;--rust:#9b674e;--blue:#57788a;--shadow:rgba(54,48,37,.12)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#d4c9b4;color:var(--ink);font-family:'DM Mono',monospace}body{min-width:1120px;background:linear-gradient(135deg,#d2c7b1,#e2dac8 48%,#cec2aa);}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:radial-gradient(#625b4c .6px,transparent .6px);background-size:6px 6px}
button,textarea,input{font:inherit}button{background:var(--green);color:#f7f2e7;border:1px solid #46624e;padding:9px 13px;cursor:pointer;font-size:10px;border-radius:2px;transition:background .12s ease,transform .12s ease}button:hover{background:#3f5d48;transform:translateY(-1px)}button.ghost{background:transparent;color:var(--ink);border-color:#a79d8b}button.ghost:hover{color:#f7f2e7}
#app{max-width:1540px;margin:0 auto;padding:22px 24px 30px}header{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 4px 18px;border-bottom:1px solid #777265;position:relative}header:after{content:"";position:absolute;left:0;bottom:-3px;width:38%;height:1px;background:#a89e8a;transform:rotate(-.45deg)}
.eyebrow{font-size:9px;color:var(--green);letter-spacing:.09em}h1{font:700 40px 'Manrope',sans-serif;letter-spacing:-.055em;margin:2px 0 0;line-height:1}h2{font:700 18px 'Manrope',sans-serif;margin:10px 0 7px;letter-spacing:-.025em}p{font-size:10px;line-height:1.75;color:#5e6059}.topstats{display:flex;gap:28px}.topstats span{display:flex;flex-direction:column;gap:3px}.topstats small{font-size:8px;color:var(--muted)}.topstats b{font-size:13px;font-weight:500}
main{display:grid;grid-template-columns:390px minmax(500px,1fr) 300px;gap:20px;padding-top:20px}.left,.center,.right{display:flex;flex-direction:column;gap:17px;min-height:0}
.panel{background:rgba(247,242,231,.88);border:1px solid var(--line);box-shadow:2px 3px 0 var(--shadow);border-radius:2px;position:relative}.panel:after{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.4);pointer-events:none;border-radius:1px}.panelhead{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.055em;color:#777568}.panelhead b{color:var(--ink)}
.lesson{padding-bottom:14px;background:#f7f0dc;transform:rotate(-.25deg);border-color:#c8b997}.lesson h2,.lesson p,.lesson button{margin-left:15px;margin-right:15px}.lesson p{max-width:335px}.lesson button{margin-top:5px}
.genomePanel{min-height:420px;flex:1;display:flex;flex-direction:column;overflow:hidden;background:#eee7d7}.legend{display:flex;gap:7px;align-items:center}.legend i{width:7px;height:7px;border-radius:50%;display:inline-block}.a{background:#5d8a68}.t{background:#5f8194}.c{background:#b78646}.g{background:#856d83}.helix{position:relative;flex:1;overflow:auto;padding:15px 24px;background:repeating-linear-gradient(0deg,rgba(70,70,60,.025),rgba(70,70,60,.025) 1px,transparent 1px,transparent 25px)}
.pair{height:15px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}.pair:before,.pair:after{content:"";position:absolute;width:45%;height:1px;background:#a29b8d}.pair:before{left:3%}.pair:after{right:3%}.rung{width:28px;height:3px;background:#858174;position:relative;z-index:2}.base{position:absolute;width:8px;height:8px;border-radius:50%;z-index:3;box-shadow:0 1px 2px #5554}.base.left{left:0}.base.right{right:0}.base-A{color:#5d8a68;background:currentColor}.base-T{color:#5f8194;background:currentColor}.base-C{color:#b78646;background:currentColor}.base-G{color:#856d83;background:currentColor}
.seqwrap{border-top:1px solid var(--line);height:105px;padding:10px 12px;background:#f5f0e3}.seqtitle{font-size:8px;color:#817d70;margin-bottom:7px}.sequence{font-size:10px;line-height:1.8;word-break:break-all;color:#66675f}.sequence span{cursor:pointer}.sequence span:hover{color:var(--rust)}
.console{height:230px;background:#343832;color:#e3e5dc;border-color:#343832}.console .panelhead{color:#c6c9bf;border-color:#50554c}.console textarea{width:100%;height:140px;background:#2d312c;color:#dbe7d8;border:0;outline:0;padding:12px;resize:none;font-size:11px;line-height:1.55}.consolebar{display:flex;gap:7px;align-items:center;padding:7px;border-top:1px solid #50554c}.consolebar span{font-size:9px;color:#a9c1a5;margin-left:auto}.console button{background:#efe8d8;color:#2c302b;border-color:#efe8d8}.console button.ghost{background:transparent;color:#e6e8df;border-color:#6a7065}
.organismStage{position:relative;flex:1;min-height:520px;background:radial-gradient(circle at 50% 48%,#ebe4d3 0,#d9d0bd 57%,#c7bba5 100%);border:1px solid #aaa18e;overflow:hidden;box-shadow:inset 0 0 65px rgba(72,64,49,.1),2px 3px 0 var(--shadow)}.organismStage:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:42px 42px;opacity:.25}.organismStage canvas{width:100%;height:100%;display:block;position:relative}.stagehud{position:absolute;top:13px;left:15px;right:15px;display:flex;justify-content:space-between;pointer-events:none}.stagehud span{display:block;font-size:8px;color:#777568;letter-spacing:.08em}.stagehud strong{font-size:12px;color:#48654f}.scanline{display:none}
.traitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.trait{padding:9px 10px;background:rgba(247,242,231,.72);border:1px solid var(--line);border-radius:2px}.trait span{font-size:8px;color:#777568;display:block}.trait b{font-size:15px;font-weight:500}.bar{height:4px;background:#d2c9b8;margin-top:7px}.bar i{display:block;height:100%;background:var(--green-light)}
.mission{padding-bottom:12px;background:#f3ead4;border-color:#cdbf9e}.mission h2,.mission p{margin-left:13px;margin-right:13px}.progress{height:5px;background:#d5cbb7;margin:12px 13px 0}.progress div{height:100%;background:var(--rust);width:0}
.inspector{min-height:180px}.baseinfo{padding:15px 13px;min-height:100px;font-size:10px;color:#66675f;line-height:1.7}.mutate{display:flex;gap:6px;padding:0 12px 12px}.mutate button{flex:1;color:#2c302b;background:#e4ddcd;border-color:#aaa08e}.mutate button:hover{color:#fff}
.genes{min-height:230px;max-height:290px;overflow:auto}.gene{padding:10px 12px;border-bottom:1px solid #d2cabb}.gene strong{font-size:11px;color:var(--green)}.gene small{float:right;color:#7a796f}.gene p{margin:5px 0 0;font-size:9px}
.controls{padding-bottom:12px}.controls label{display:block;padding:9px 12px;font-size:9px;color:#707168}.controls input{width:100%}.controls button{margin:3px 6px 0 12px}.glossary{padding-bottom:8px}.glossary p{margin:8px 12px;font-size:9px}.glossary code,.mission code{color:var(--green);background:#e2e6da;padding:1px 3px}
.telemetry{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 12px}.telemetry>div{padding:8px;border:1px solid #cec5b3;background:#eee8da}.telemetry span{display:block;font-size:8px;letter-spacing:.06em;opacity:.72}.telemetry b{display:block;margin-top:3px;font-size:12px;font-weight:500}.loadwarning{font-size:9px;line-height:1.5;padding:9px 10px;margin:10px 0;border-left:3px solid var(--green-light);background:#e3e7dd;color:#5f665d}
@media(max-width:1250px){main{grid-template-columns:350px minmax(460px,1fr) 280px}}