:root{--bg:#000000;--glass:rgba(255, 255, 255, 0.048);--glass-strong:rgba(255, 255, 255, 0.082);--glass-border:rgba(255, 255, 255, 0.092);--glass-border-hov:rgba(255, 255, 255, 0.19);--text:#f5f5f7;--text-sub:rgba(245, 245, 247, 0.54);--text-dim:rgba(245, 245, 247, 0.20);--accent:#007AFF;--accent-glow:rgba(0, 122, 255, 0.35);--accent-soft:rgba(0, 122, 255, 0.10);--green:#4dcb7a;--amber:#d4a855;--red:#d46060;--border:rgba(255, 255, 255, 0.072);--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--ease:cubic-bezier(0.4, 0, 0.2, 1);--t:0.28s;--radius:14px;--radius-lg:22px;--topbar-h:52px;--footer-h:40px;--panel-w:640px}*,::after,::before{box-sizing:border-box}body,html{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.neuron-bg{position:fixed;inset:0;background:url('../assets/neurons-bg.svg') center/cover no-repeat,radial-gradient(ellipse 80% 60% at 35% 40%,rgba(0,122,255,.08) 0,transparent 65%);filter:blur(1px);opacity:.28;pointer-events:none;z-index:0}.topbar{position:fixed;inset:0 0 auto 0;height:var(--topbar-h);background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid rgba(255,255,255,.055);display:flex;align-items:center;padding:0 28px;gap:16px;z-index:200}.brand{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;pointer-events:none}.brand-helix{font-size:14px;color:var(--accent);animation:3s ease-in-out infinite pulse-icon}@keyframes pulse-icon{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.topbar h1{margin:0;font-family:var(--font);font-weight:600;font-size:15px;letter-spacing:-.025em;color:var(--text)}.logo-accent{color:var(--accent)}.brand-sub{font-family:var(--font);font-weight:300;font-size:clamp(.92rem, 2vw, 1.05rem);letter-spacing:-.022em;color:var(--text-sub);margin-left:0;text-transform:none}.back-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:13px;font-weight:400;letter-spacing:.005em;color:var(--text-sub);text-decoration:none;transition:color .18s}.back-link:hover{color:var(--text)}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}.btn-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-size:12px;font-weight:500;color:var(--text-sub);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.085);border-radius:999px;padding:6px 16px;cursor:pointer;transition:background var(--t) var(--ease),color var(--t) var(--ease);white-space:nowrap;text-decoration:none}.btn-pill:hover{background:rgba(255,255,255,.1);color:var(--text)}.layout{position:fixed;inset:var(--topbar-h) 0 var(--footer-h) 0;display:grid;grid-template-columns:1fr var(--panel-w);gap:0;z-index:1;background:0 0;min-height:0}.viewer-wrap{position:relative;display:flex;flex-direction:column;overflow:hidden;background:0 0;min-height:0}#viewer{flex:1;width:100%;position:relative;background:0 0}#viewer canvas{background:0 0!important}.controls-bar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(0,0,0,.68);border:1px solid rgba(255,255,255,.08);border-radius:999px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);white-space:nowrap;pointer-events:auto}.controls-divider{width:1px;height:18px;background:rgba(255,255,255,.09);flex-shrink:0;margin:0 2px}.control-group{display:flex;align-items:center;gap:6px;white-space:nowrap}.select-mode-group{gap:0;padding:2px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.045)}.select-mode-btn{border:none;background:0 0;color:rgba(245,245,247,.65);font-family:var(--font);font-size:11.5px;font-weight:500;letter-spacing:.01em;padding:5px 11px;border-radius:999px;cursor:pointer;transition:background var(--t) var(--ease),color var(--t) var(--ease)}.select-mode-btn:hover{color:rgba(245,245,247,.9)}.select-mode-btn.active{background:rgba(0,122,255,.18);color:var(--accent)}.control-group label{font-size:12px;font-weight:500;color:rgba(245,245,247,.45);letter-spacing:.01em}.control-group select{font-family:var(--font);font-size:12px;font-weight:500;color:rgba(245,245,247,.72);background-color:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);padding:5px 26px 5px 11px;border-radius:999px;cursor:pointer;letter-spacing:.01em;transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;color-scheme:dark;min-width:86px}.control-group select option{background:#0a0a0a;color:#f5f5f7}.control-group select:focus,.control-group select:hover{color:rgba(245,245,247,.92);background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);outline:0}.toggle-label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;font-weight:500;letter-spacing:.01em;color:rgba(245,245,247,.5);white-space:nowrap;user-select:none;transition:color var(--t) var(--ease)}.toggle-label:hover{color:rgba(245,245,247,.9)}.toggle-label input[type=checkbox]{display:none}.toggle-track{width:30px;height:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);border-radius:999px;position:relative;flex-shrink:0;transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}.toggle-thumb{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);transition:transform .2s var(--ease),background .2s var(--ease)}.toggle-label input:checked~.toggle-track{background:rgba(0,122,255,.18);border-color:rgba(0,122,255,.35)}.toggle-label input:checked~.toggle-track .toggle-thumb{transform:translateX(14px);background:var(--accent)}.toggle-label:has(input:checked){color:var(--accent)}#loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:50;transition:opacity .6s var(--ease)}#loading-overlay.done{opacity:0;pointer-events:none}.loader-wrap{display:flex;flex-direction:column;align-items:center;gap:24px}.loader-wrap p{color:var(--text-dim);font-family:var(--font);font-size:10px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;animation:2s ease-in-out infinite blink}@keyframes blink{0%,100%{opacity:.3}50%{opacity:.8}}.helix-loader{position:relative;width:40px;height:60px}.helix-strand{position:absolute;width:7px;height:7px;border-radius:50%;top:0;left:16px}.strand-a{background:var(--accent);animation:1.4s ease-in-out infinite helix-a;box-shadow:0 0 10px var(--accent-glow)}.strand-b{background:rgba(70,160,230,.7);animation:1.4s ease-in-out infinite helix-b;box-shadow:0 0 10px rgba(70,160,230,.3)}@keyframes helix-a{0%{transform:translateY(0) translateX(0)}25%{transform:translateY(13px) translateX(14px)}50%{transform:translateY(26px) translateX(0)}75%{transform:translateY(39px) translateX(-14px)}100%{transform:translateY(52px) translateX(0);opacity:0}}@keyframes helix-b{0%{transform:translateY(0) translateX(0);opacity:0}25%{transform:translateY(13px) translateX(-14px);opacity:1}50%{transform:translateY(26px) translateX(0)}75%{transform:translateY(39px) translateX(14px)}100%{transform:translateY(52px) translateX(0)}}#xyz-nav{position:absolute;bottom:80px;left:44px;width:144px;height:144px;background:0 0;border:none;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;z-index:10;overflow:visible}#orientation-canvas{width:100%;height:100%;display:block}#zoom-control{position:absolute;bottom:80px;right:16px;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:20;user-select:none;pointer-events:auto;isolation:isolate}.zoom-btn{width:32px;height:32px;background:rgba(0,0,0,.55);border:1px solid var(--glass-border);border-radius:10px;color:var(--text-dim);font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:color .15s,border-color .15s,background .15s;font-family:var(--font)}.zoom-btn:hover{color:var(--text);border-color:var(--glass-border-hov);background:var(--glass-strong)}.zoom-btn:active{background:rgba(255,255,255,.12)}.legend{position:absolute;left:16px;background:linear-gradient(180deg,rgba(20,20,24,.82),rgba(12,12,15,.74));border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 13px;z-index:10;backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);box-shadow:0 12px 28px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1);min-width:162px;transition:opacity .25s;margin-top:0}.legend.hidden{opacity:0;pointer-events:none}.legend-title{font-family:var(--font);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:rgba(214,214,219,.82);margin-bottom:8px}.legend-note{font-size:10px;color:rgba(173,173,181,.72);margin-bottom:7px;font-style:italic;letter-spacing:.01em}.legend-item{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;font-weight:500;color:rgba(239,239,245,.88);letter-spacing:.01em}.legend-chip{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 8px rgba(255,255,255,.15)}.info-panel{flex:0 0 var(--panel-w);width:var(--panel-w);height:100%;min-height:0;display:flex;flex-direction:column;background:rgba(10,10,12,.88);backdrop-filter:blur(32px) saturate(150%);-webkit-backdrop-filter:blur(32px) saturate(150%);border-left:1px solid rgba(255,255,255,.065);position:relative;z-index:2;overflow:hidden}.info-panel::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(0,122,255,.05) 0,transparent 45%);pointer-events:none;z-index:0}.info-header{display:flex;align-items:center;gap:14px;padding:22px 26px 18px;border-bottom:1px solid rgba(255,255,255,.055);position:relative;z-index:1;flex:0 0 auto;background:rgba(10,10,12,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.info-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;background:rgba(127,140,141,.5);box-shadow:0 0 10px rgba(127,140,141,.35);opacity:.35;transition:background .25s,box-shadow .25s,opacity .25s}.info-header-text{flex:1 1 auto;min-width:0}.info-header-eyebrow{margin:0 0 4px;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.82}.info-header-title{margin:0;font-family:var(--font);font-size:18px;font-weight:700;letter-spacing:-.028em;color:var(--text);line-height:1.12}.info-badge{flex-shrink:0;font-size:11px;font-family:var(--font);font-weight:500;background:rgba(255,255,255,.055);color:var(--text-sub);border:1px solid rgba(255,255,255,.085);padding:4px 12px;border-radius:999px;letter-spacing:.04em;transition:background var(--t) var(--ease),color var(--t) var(--ease)}.info-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;position:relative;z-index:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.07) transparent}.info-scroll::-webkit-scrollbar{width:3px}.info-scroll::-webkit-scrollbar-track{background:0 0}.info-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:2px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 36px;gap:18px;min-height:220px}.empty-icon{opacity:.85;animation:5s ease-in-out infinite dna-empty-float}@keyframes dna-empty-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.empty-state p{margin:0;font-size:13.5px;font-weight:300;line-height:1.7;color:var(--text-sub);max-width:300px}.info-section{padding:20px 26px;border-bottom:1px solid rgba(255,255,255,.04)}.info-section:last-child{border-bottom:none}.info-label{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px}.info-value{font-size:13px;font-weight:300;color:var(--text-sub);line-height:1.62}.info-value.large{font-family:var(--font);font-size:18px;font-weight:700;letter-spacing:-.025em;color:var(--text);line-height:1.2}.info-value.mono{font-size:12px;font-weight:300;letter-spacing:.01em}.info-value.accent{color:var(--accent)}.info-value.green{color:var(--green)}.info-value.amber{color:var(--amber)}.desc-block{padding:20px 26px;border-bottom:1px solid rgba(255,255,255,.04)}.desc-label{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px}.desc-text{font-size:13.5px;font-weight:300;line-height:1.75;color:var(--text-sub)}.pair-indicator{display:flex;align-items:center;gap:8px;font-size:13px}.pair-base{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;font-family:var(--font);font-weight:700;font-size:14px;letter-spacing:-.02em}.base-A{background:rgba(200,100,100,.12);color:#e09090;border:1px solid rgba(200,100,100,.25)}.base-T{background:rgba(100,140,210,.12);color:#90aadc;border:1px solid rgba(100,140,210,.25)}.base-G{background:rgba(100,200,140,.12);color:#7dd4a4;border:1px solid rgba(100,200,140,.25)}.base-C{background:rgba(210,180,100,.12);color:#dcc880;border:1px solid rgba(210,180,100,.25)}.pair-arrow{color:var(--text-dim);font-size:14px}.selection-hero-grid{display:grid;grid-template-columns:minmax(260px,1.15fr) minmax(220px,1fr);border-bottom:1px solid rgba(255,255,255,.04)}.selection-diagram-col{padding:22px 20px;border-right:1px solid rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.18);overflow:visible;min-width:0}.base-diagram-svg{width:100%;max-width:280px;min-height:120px;display:flex;align-items:center;justify-content:center;overflow:visible}.base-diagram-svg svg{width:100%;max-width:min(260px,100%);height:auto;display:block;overflow:visible}.selection-meta-col{padding:22px 26px;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}.base-diagram-name{font-family:var(--font);font-weight:700;font-size:clamp(20px, 2.4vw, 26px);letter-spacing:-.032em;color:var(--text);line-height:1.12;word-break:break-word;overflow-wrap:break-word}.base-diagram-type{font-size:12.5px;font-weight:600;color:var(--accent);opacity:.9;text-transform:uppercase;letter-spacing:.12em}.feature-pills{display:flex;gap:6px;padding:12px 22px;border-bottom:1px solid rgba(255,255,255,.04);flex-wrap:wrap}.feature-pill{font-size:10px;font-weight:500;padding:3px 9px;border-radius:999px;border:1px solid;letter-spacing:.06em}.feature-pill.hbond{color:rgba(160,190,220,.9);border-color:rgba(160,190,220,.22);background:rgba(160,190,220,.07)}.feature-pill.groove{color:rgba(160,220,175,.9);border-color:rgba(160,220,175,.22);background:rgba(160,220,175,.07)}.fun-fact-block{padding:20px 26px;border-bottom:1px solid rgba(255,255,255,.04);border-left:2px solid var(--accent);background:linear-gradient(135deg,rgba(0,122,255,.05) 0,transparent 100%);animation:fact-slide-in .32s var(--ease)}@keyframes fact-slide-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.fun-fact-label{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:rgba(150,210,255,.6);margin-bottom:5px}.fun-fact-text{font-size:12.5px;font-weight:300;line-height:1.85;color:var(--text-sub)}#measure-section.info-measure{flex:0 0 auto;padding:14px 26px 16px;border-top:1px solid rgba(255,255,255,.05);margin-top:auto;position:relative;z-index:1;background:rgba(10,10,12,.92)}#measure-section.info-measure.hidden{display:none}.btn-measure{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--glass);color:var(--text-sub);border:1px solid var(--glass-border);padding:9px;border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:.02em;transition:all var(--t) var(--ease);backdrop-filter:blur(8px)}.btn-measure:hover{background:var(--glass-strong);border-color:rgba(0,122,255,.3);color:rgba(150,210,255,.9)}.measure-result{margin-top:8px;background:rgba(77,203,122,.05);border:1px solid rgba(77,203,122,.2);border-radius:10px;padding:7px 10px;font-size:12.5px;font-weight:300;color:var(--green);text-align:center;animation:fade-in .3s var(--ease)}.measure-result.hidden{display:none}@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.footer{position:fixed;inset:auto 0 0 0;height:var(--footer-h);display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text-dim);font-family:var(--font);font-size:10.5px;font-weight:300;letter-spacing:.06em;border-top:1px solid rgba(255,255,255,.055);background:rgba(0,0,0,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:200}.footer-dot{opacity:.22}.footer-source{color:var(--text-dim);font-size:10px;opacity:.65}@media (max-width:900px){:root{--panel-w:min(100%, 480px)}.layout{grid-template-columns:1fr;grid-template-rows:1fr auto}.info-panel{width:100%;flex-basis:auto;max-height:42vh;border-left:none;border-top:1px solid rgba(255,255,255,.065)}.selection-hero-grid{grid-template-columns:1fr}.selection-diagram-col{border-right:none;border-bottom:1px solid rgba(255,255,255,.04);padding:18px 16px}.selection-meta-col{padding:18px 22px 22px}.controls-bar{flex-wrap:wrap;border-radius:var(--radius-lg);justify-content:center;gap:8px;padding:8px 14px;bottom:12px;max-width:calc(100% - 24px)}.controls-divider,.footer-source{display:none}}@media (max-width:600px){.control-group label{display:none}.controls-bar{gap:6px;padding:6px 12px}#xyz-nav{display:none}}