:root{font:16px/1.5 system-ui;color:#e9eff3;background:#09121a;color-scheme:dark;--accent:#83d8de}*{box-sizing:border-box}body{margin:0;overflow:hidden}.workspace,#canvas{position:fixed;inset:0;width:100%;height:100dvh}#canvas{touch-action:none}button,input,select{font:inherit;border:1px solid #ffffff15;border-radius:5px;padding:10px 13px;background:#172a35;color:inherit;min-height:44px}button{cursor:pointer}button:hover{background:#254454}button:disabled{opacity:.45}button[aria-pressed=true]{background:#294752}:focus-visible{outline:2px solid #83d8de;outline-offset:3px}[hidden]{display:none!important}header{position:fixed;z-index:2;top:max(20px,env(safe-area-inset-top));left:28px;right:28px;display:flex;align-items:start;justify-content:space-between;pointer-events:none}header>*{pointer-events:auto}h1{font-size:30px;font-weight:550;letter-spacing:-1px;margin:2px 0}.tag{font-size:12px;letter-spacing:1.8px;color:#83d8de;margin:0}header nav{display:flex;gap:6px}header button{font-size:14px}.tools{position:fixed;right:28px;top:112px;display:grid;gap:5px}.tools button{font-size:14px}.drawer{position:fixed;z-index:5;right:24px;top:90px;width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 170px);overflow:auto;padding:24px;background:#112430f5;backdrop-filter:blur(18px);border:1px solid #83d8de26;border-radius:8px;box-shadow:0 12px 50px #0006}.drawer h2{font-size:23px;font-weight:500;letter-spacing:-.4px}.drawer h3{font-size:18px;font-weight:500;line-height:1.5}.close{float:right}form{display:flex;align-items:end;gap:10px;margin:16px 0}form label{flex:1;margin:0;min-width:0}label{display:grid;gap:6px;margin:12px 0;font-size:14px}input,select{max-width:100%;width:100%;min-width:0}input[type=checkbox]{width:auto;min-height:18px}input[type=range]{accent-color:#83d8de;padding:0;min-height:30px}p{line-height:1.65;color:#b8cad3}a{color:#83d8de;overflow-wrap:anywhere}summary{font-size:14px;cursor:pointer;padding:10px 0}details{margin:15px 0}#record{white-space:pre-line;font-size:14px}.paging{display:flex;gap:8px}#results{display:flex;flex-wrap:wrap;gap:5px}#results button{font-size:14px}#focus{position:fixed;left:28px;top:110px;z-index:2;max-width:360px;pointer-events:none}#focus small{font-size:12px;letter-spacing:2px;color:#83d8de}#focus h2{font-size:32px;font-weight:450;letter-spacing:-.5px;margin:5px 0;line-height:1.25}#focus p{font-size:14px;margin:6px 0}#selection{position:fixed;z-index:2;left:28px;bottom:190px;max-width:400px;font-size:14px;padding:8px 12px;background:#0d1c26e8;border-left:2px solid #f0c678;margin:0;color:#f0c678}.modes{position:fixed;right:28px;bottom:26px;display:flex;gap:14px;background:#0d1c26e8;padding:6px 12px;border-radius:5px}.modes label{display:flex;align-items:center;gap:8px;margin:0;font-size:14px}.modes select{width:auto;font-size:14px}.status{position:fixed;left:28px;bottom:24px;max-width:calc(100vw - 440px);padding:0;font-size:12px;color:#adc5d0}.status strong{font-weight:450;color:#83d8de}.status p{margin:4px 0;font-size:12px}#chain-keys{position:fixed;left:28px;bottom:105px;display:flex;gap:5px;max-width:calc(100vw - 56px);overflow:auto}#chain-keys button{font-size:14px;white-space:nowrap;padding:8px 12px}#cancel{position:fixed;z-index:7;bottom:25px;right:28px;font-size:14px}.empty{position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);max-width:450px;text-align:center;padding:24px;background:#112430}#fallback{z-index:3}@media(max-width:650px){header{left:16px;right:16px;top:16px}h1{font-size:25px}.tag{font-size:10px;letter-spacing:1px}header button{padding:8px;font-size:14px}#focus{top:93px;left:16px;max-width:calc(100vw - 90px)}#focus h2{font-size:26px}#focus p{font-size:12px}.tools{right:16px;top:96px}.tools button{padding:8px 12px}.drawer{right:16px;top:82px;width:calc(100vw - 32px);max-height:calc(100dvh - 165px);padding:20px}.modes{left:16px;right:16px;bottom:90px;padding:4px 8px;gap:8px}.modes label{font-size:14px}.modes select{font-size:14px;padding:8px;width:100%}.modes label:first-child{flex:1}.status{left:16px;bottom:16px;max-width:calc(100vw - 32px)}#selection{left:16px;right:16px;bottom:230px;max-width:none;font-size:14px;padding:8px 10px}#chain-keys{left:16px;bottom:161px;max-width:calc(100vw - 32px);gap:4px}#chain-keys button{font-size:14px;padding:8px 10px}#cancel{bottom:16px;right:16px}.status:has(#cancel:not([hidden])){padding-right:90px}}

/* Edge controls sit over the molecular field without permanent panel outlines. */
header button,.tools button,#chain-keys button{border:0;background:transparent}
header button:hover,.tools button:hover,#chain-keys button:hover,#chain-keys button[aria-pressed=true]{background:#ffffff12}
#selection{border:0;background:transparent;padding:0}
.modes{background:transparent;padding:0}
.modes select{border:0;background:#ffffff0a}
.drawer{border:0;border-radius:0}

/* Give native selects and their popup options the same explicit contrast. */
select,.modes select{color-scheme:dark;color:#f4f7fb;background-color:#142431}
select option,select optgroup{color-scheme:dark;color:#f4f7fb;background-color:#142431}
select option:checked{color:#f4f7fb;background-color:#29475b}
select:disabled,select option:disabled{color:#b2c2cf}
@media(forced-colors:active){
  select,.modes select,select option,select optgroup{forced-color-adjust:auto;color:CanvasText;background-color:Canvas}
  select option:checked{color:HighlightText;background-color:Highlight}
}
/* One primary example choice; archive discovery stays behind its edge button. */
#focus .example-picker{pointer-events:auto;margin:8px 0;font-size:11px;letter-spacing:1px;color:#b8cad3}
#protein-example{width:100%;font-size:16px;letter-spacing:0;border:0;min-height:44px;padding:9px}
#protein-example option{font-size:14px}
#example-note{max-width:360px;font-size:13px;line-height:1.45;margin:7px 0;color:#d8e5ed}
@media(max-width:650px){#focus{max-width:calc(100vw - 84px)}#protein-example{font-size:14px;padding:8px}#example-note{font-size:12px;line-height:1.4}}