:root{color-scheme:dark;--bg: #041019;--panel: rgba(8, 24, 37, .9);--panel-soft: rgba(11, 31, 46, .84);--panel-strong: rgba(12, 34, 52, .96);--border: rgba(135, 173, 198, .18);--border-strong: rgba(135, 173, 198, .3);--text: #e7f3fb;--muted: #8ea5b5;--cool: #60c8ff;--warm: #f7b955;--success: #74e39c;--danger: #ff8f7f;--base-a: #60c8ff;--base-a-soft: rgba(96, 200, 255, .16);--base-a-fill: rgba(96, 200, 255, .12);--base-t: #f7b955;--base-t-soft: rgba(247, 185, 85, .16);--base-t-fill: rgba(247, 185, 85, .12);--base-g: #74e39c;--base-g-soft: rgba(116, 227, 156, .16);--base-g-fill: rgba(116, 227, 156, .12);--base-c: #ff8f7f;--base-c-soft: rgba(255, 143, 127, .16);--base-c-fill: rgba(255, 143, 127, .12);--sugar: #ecf4fb;--sugar-stroke: rgba(255, 255, 255, .38);--phosphate: rgba(79, 214, 196, .22);--phosphate-stroke: rgba(79, 214, 196, .62);--backbone: rgba(220, 236, 246, .72);--shadow: 0 28px 70px rgba(0, 0, 0, .28);--radius-xl: 28px;--radius-lg: 22px;--radius-md: 16px}[data-theme=light]{color-scheme:light;--bg: #edf6fb;--panel: rgba(255, 255, 255, .9);--panel-soft: rgba(248, 252, 255, .92);--panel-strong: rgba(252, 255, 255, .96);--border: rgba(10, 44, 66, .12);--border-strong: rgba(10, 44, 66, .22);--text: #0d2434;--muted: #425a6b;--cool: #075985;--warm: #b45309;--success: #166534;--danger: #b42318;--base-a: #0369a1;--base-a-soft: rgba(3, 105, 161, .14);--base-a-fill: rgba(3, 105, 161, .1);--base-t: #b45309;--base-t-soft: rgba(180, 83, 9, .14);--base-t-fill: rgba(180, 83, 9, .1);--base-g: #166534;--base-g-soft: rgba(22, 101, 52, .14);--base-g-fill: rgba(22, 101, 52, .1);--base-c: #b42318;--base-c-soft: rgba(180, 35, 24, .14);--base-c-fill: rgba(180, 35, 24, .1);--sugar: #fffaf1;--sugar-stroke: rgba(10, 44, 66, .2);--phosphate: rgba(79, 214, 196, .14);--phosphate-stroke: rgba(14, 168, 146, .55);--backbone: rgba(13, 36, 52, .6);--shadow: 0 28px 70px rgba(16, 42, 62, .12)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;min-height:100%;margin:0}body{min-height:100svh;background:var(--bg);font-family:Space Grotesk,sans-serif}body[data-embedded=true] .app-header{display:none}body[data-embedded=true] .dna-molecule-app{min-height:100svh}body[data-embedded=true] .app-shell{min-height:100svh;padding-top:1rem}button,input{font:inherit}button{border:0;background:none;color:inherit}.dna-molecule-app{position:relative;min-height:100svh;overflow:hidden;color:var(--text);background:radial-gradient(circle at 18% 10%,rgba(79,214,196,.12),transparent 24%),radial-gradient(circle at 92% 8%,rgba(96,200,255,.16),transparent 22%),linear-gradient(180deg,rgba(255,255,255,.02),transparent 28%),var(--bg)}.dna-molecule-app[data-theme=light]{background:radial-gradient(circle at 18% 10%,rgba(14,148,134,.08),transparent 24%),radial-gradient(circle at 92% 8%,rgba(3,105,161,.1),transparent 22%),var(--bg)}.dna-molecule-app__wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(79,214,196,.04),transparent 32%,rgba(96,200,255,.05)),linear-gradient(180deg,rgba(255,255,255,.03),transparent 22%);pointer-events:none}.app-header,.app-shell{position:relative;z-index:1}.app-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:end;padding:1.4rem 1.5rem 1rem}.app-header__brand{max-width:52rem}.app-header__eyebrow,.eyebrow{display:inline-flex;margin-bottom:.55rem;font-family:IBM Plex Mono,monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.app-header h1,.panel-head h2{margin:0;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.5rem);line-height:.98;letter-spacing:-.05em}.app-header p,.panel-head p,.action-caption,.status-callout,.concept-card p,.log-item p,.sidebar-caption,.nucleotide-note,.empty-state{margin:0;color:var(--muted);line-height:1.55}.app-header__summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.75rem}.app-shell{display:grid;grid-template-columns:18rem minmax(0,1fr) 22rem;gap:1rem;min-height:calc(100svh - 7.2rem);padding:0 1rem 1rem}.composer,.workspace,.sidebar{min-height:0}.composer,.sidebar{display:grid;align-content:start;gap:1rem}.workspace{display:grid;gap:1rem;grid-template-rows:minmax(0,1fr) auto}.panel{border:1px solid var(--border);background:var(--panel);border-radius:var(--radius-xl);padding:1.1rem;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.panel--soft{background:var(--panel-soft)}.panel-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:1rem}.panel-head--stack{display:grid}.panel-head h2{font-size:1.38rem}.stat-pill{display:inline-flex;flex-direction:column;gap:.18rem;min-width:5.6rem;padding:.72rem .88rem;border-radius:1rem;border:1px solid var(--border);background:#ffffff08}.stat-pill span{font-family:IBM Plex Mono,monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.stat-pill strong{font-size:.98rem;line-height:1.1}.stat-pill--cool strong{color:var(--cool)}.stat-pill--warm strong{color:var(--warm)}.stat-pill--success strong{color:var(--success)}.base-selector{display:grid;gap:.65rem}.base-chip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:center;padding:.82rem .9rem;border-radius:var(--radius-md);border:1px solid transparent;background:#ffffff05;text-align:left;cursor:pointer;transition:border-color .18s ease,transform .18s ease,background-color .18s ease}.base-chip:hover,.base-chip.is-active{transform:translateY(-1px);border-color:var(--border-strong);background:#ffffff0d}.base-chip__letter,.nucleotide-badge{display:grid;place-items:center;width:2.65rem;height:2.65rem;border-radius:999px;font-family:IBM Plex Mono,monospace;font-size:1.05rem;font-weight:600}.base-chip[data-base=A] .base-chip__letter,.nucleotide-badge[data-base=A]{background:var(--base-a-soft);color:var(--base-a)}.base-chip[data-base=T] .base-chip__letter,.nucleotide-badge[data-base=T]{background:var(--base-t-soft);color:var(--base-t)}.base-chip[data-base=G] .base-chip__letter,.nucleotide-badge[data-base=G]{background:var(--base-g-soft);color:var(--base-g)}.base-chip[data-base=C] .base-chip__letter,.nucleotide-badge[data-base=C]{background:var(--base-c-soft);color:var(--base-c)}.base-chip__copy{display:grid;gap:.08rem}.base-chip__copy strong{font-size:.95rem}.base-chip__copy span{color:var(--muted);font-size:.84rem}.nucleotide-preview{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.55rem;padding:.95rem 0}.nucleotide-preview__phosphate,.nucleotide-preview__base,.nucleotide-preview__sugar{min-height:4.6rem;display:grid;place-items:center;border:1px solid var(--border)}.nucleotide-preview__phosphate{width:4.6rem;border-radius:999px;background:var(--phosphate);border-color:var(--phosphate-stroke);font-family:IBM Plex Mono,monospace}.nucleotide-preview__sugar{position:relative;width:6rem;clip-path:polygon(10% 46%,36% 8%,82% 18%,88% 70%,36% 92%);background:var(--sugar);color:#173246}.nucleotide-preview__sugar strong{position:absolute;bottom:.55rem;font-size:.72rem;letter-spacing:.04em}.nucleotide-preview__sugar span{position:absolute;font-family:IBM Plex Mono,monospace;font-size:.7rem}.nucleotide-preview__sugar span:nth-child(1){left:1rem;top:1.4rem}.nucleotide-preview__sugar span:nth-child(2){right:1.45rem;top:.8rem}.nucleotide-preview__sugar span:nth-child(3){right:1.1rem;bottom:1.2rem}.nucleotide-preview__base{border-radius:var(--radius-md);font-size:.95rem;font-weight:600;background:#ffffff08}.nucleotide-preview[data-base=A] .nucleotide-preview__base{color:var(--base-a)}.nucleotide-preview[data-base=T] .nucleotide-preview__base{color:var(--base-t)}.nucleotide-preview[data-base=G] .nucleotide-preview__base{color:var(--base-g)}.nucleotide-preview[data-base=C] .nucleotide-preview__base{color:var(--base-c)}.action-row{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:2.8rem;padding:0 1rem;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}.button:hover{transform:translateY(-1px)}.button:disabled{opacity:.4;cursor:not-allowed;transform:none}.button--primary{background:linear-gradient(135deg,#4fd6c43d,#60c8ff42);border-color:#4fd6c44d}.button--ghost{background:#ffffff08;border-color:var(--border)}.button--full{width:100%}.sequence-label{display:block;margin-bottom:.55rem;font-size:.84rem;color:var(--muted)}.sequence-form{display:flex;gap:.65rem}.sequence-input{flex:1;min-width:0;min-height:2.9rem;padding:0 .95rem;border-radius:999px;border:1px solid var(--border);background:#ffffff08;color:var(--text)}.sequence-input::placeholder{color:var(--muted)}.status-callout{margin-top:1rem;padding:.9rem 1rem;border-radius:1rem;border:1px solid var(--border);background:#ffffff08}.workspace-panel,.ribbon-panel{overflow:hidden}.workspace-svg,.ribbon-svg{width:100%;display:block}.workspace-svg{min-height:18rem}.workspace-backbone,.workspace-base-link,.ribbon-link,.ribbon-base-link{stroke:var(--backbone);stroke-width:4;stroke-linecap:round}.workspace-backbone--faded{stroke:#ffffff2e}.workspace-phosphate,.workspace-phosphate--incoming,.ribbon-phosphate{fill:var(--phosphate);stroke:var(--phosphate-stroke);stroke-width:2.5}.workspace-sugar,.ribbon-sugar{fill:var(--sugar);stroke:var(--sugar-stroke);stroke-width:2.5}.workspace-sugar--ghost{opacity:.65}.workspace-sugar--active{filter:drop-shadow(0 0 10px rgba(79,214,196,.18))}.workspace-base,.ribbon-base{fill:#ffffff0a;stroke-width:2}.workspace-base[data-base=A],.ribbon-base[data-base=A]{stroke:var(--base-a);fill:var(--base-a-fill)}.workspace-base[data-base=T],.ribbon-base[data-base=T]{stroke:var(--base-t);fill:var(--base-t-fill)}.workspace-base[data-base=G],.ribbon-base[data-base=G]{stroke:var(--base-g);fill:var(--base-g-fill)}.workspace-base[data-base=C],.ribbon-base[data-base=C]{stroke:var(--base-c);fill:var(--base-c-fill)}.ribbon-base--complement{opacity:.82}.workspace-phosphate-label,.workspace-oh-label,.workspace-base-text,.workspace-base-subtext,.workspace-caption,.workspace-annotation,.workspace-atom-label,.workspace-end-label,.ribbon-phosphate-label,.ribbon-base-text,.ribbon-end-label,.ribbon-oh-label{text-anchor:middle}.workspace-phosphate-label,.ribbon-phosphate-label,.workspace-base-subtext,.workspace-caption,.workspace-annotation,.workspace-atom-label,.workspace-end-label,.ribbon-end-label,.ribbon-oh-label{font-family:IBM Plex Mono,monospace}.workspace-base-text,.ribbon-base-text{fill:var(--text);font-weight:700;font-size:18px}.workspace-base-subtext,.workspace-caption,.workspace-annotation,.workspace-end-label,.ribbon-end-label,.ribbon-oh-label{fill:var(--muted);font-size:11px;letter-spacing:.04em}.workspace-atom-label{fill:var(--cool);font-size:11px}.workspace-oh,.ribbon-oh{fill:#ffffff0a;stroke:#ffffff47;stroke-width:2}.workspace-oh--ghost{opacity:.4}.workspace-bond-guide{stroke:#ffffff40;stroke-width:3;stroke-linecap:round;stroke-dasharray:7 8}.workspace-bond-guide--armed{stroke:var(--warm);stroke-dasharray:9 6}.workspace-bond-guide--pulse{animation:bond-pulse .9s ease-out}.ribbon-scroll{overflow-x:auto;padding-bottom:.4rem}.ribbon-svg{min-height:22rem}.ribbon-hbond{stroke:#ffffff47;stroke-width:2.6;stroke-linecap:round}.ribbon-hbond--2{stroke-dasharray:8 6}.ribbon-hbond--3{stroke-dasharray:3 5}.ribbon-node--new{animation:bond-pulse .9s ease-out}.stats-grid,.concept-list,.log-list{display:grid;gap:.75rem}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:.9rem}.sequence-block{display:grid;gap:.45rem;padding:.9rem 1rem;border-radius:1rem;border:1px solid var(--border);background:#ffffff08;margin-bottom:.85rem}.sequence-row{display:flex;justify-content:space-between;gap:1rem}.sequence-row span{color:var(--muted);font-size:.84rem}.sequence-row code{font-family:IBM Plex Mono,monospace;font-size:.86rem;letter-spacing:.14em}.concept-card,.log-item{padding:.9rem;border-radius:1rem;border:1px solid var(--border);background:#ffffff08}.concept-card strong,.log-item strong{display:block;margin-bottom:.28rem;font-size:.95rem}.empty-state{padding:1rem;border-radius:1rem;border:1px dashed var(--border)}.button:focus-visible,.base-chip:focus-visible,.sequence-input:focus-visible{outline:none;box-shadow:0 0 0 3px #4fd6c438;border-color:#4fd6c457}@keyframes bond-pulse{0%{filter:drop-shadow(0 0 0 rgba(247,185,85,0));opacity:.6}40%{filter:drop-shadow(0 0 18px rgba(247,185,85,.45));opacity:1}to{filter:drop-shadow(0 0 0 rgba(247,185,85,0));opacity:1}}[data-theme=light] .panel{background:#ffffffe0}[data-theme=light] .panel--soft{background:#f8fcfff0}[data-theme=light] .base-chip{background:#0a2c4208}[data-theme=light] .base-chip:hover,[data-theme=light] .base-chip.is-active{background:#0a2c4212}[data-theme=light] .button--primary{background:linear-gradient(135deg,#0e948629,#0369a129);border-color:#0e94864d}[data-theme=light] .button--ghost{background:#0a2c420a;border-color:var(--border)}[data-theme=light] .stat-pill{background:#0a2c420a}[data-theme=light] .sequence-input{background:#ffffffe0;border-color:var(--border-strong)}[data-theme=light] .status-callout,[data-theme=light] .concept-card,[data-theme=light] .log-item,[data-theme=light] .sequence-block,[data-theme=light] .nucleotide-preview__base{background:#0a2c420a}[data-theme=light] .workspace-oh,[data-theme=light] .ribbon-oh{fill:#0a2c420f;stroke:#0a2c424d}[data-theme=light] .workspace-base,[data-theme=light] .ribbon-base{fill:#0a2c420a}[data-theme=light] .workspace-backbone--faded{stroke:#0a2c4233}[data-theme=light] .workspace-bond-guide,[data-theme=light] .ribbon-hbond{stroke:#0a2c423d}.dna-molecule-app[data-theme=light] .dna-molecule-app__wash{background:linear-gradient(90deg,rgba(14,148,134,.03),transparent 32%,rgba(3,105,161,.04)),linear-gradient(180deg,rgba(255,255,255,.5),transparent 22%)}@media(prefers-reduced-motion:reduce){.base-chip,.button{transition:none}.workspace-bond-guide--pulse,.ribbon-node--new{animation:none}}@media(max-width:1280px){.app-shell{grid-template-columns:18rem minmax(0,1fr)}.sidebar{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1040px){.app-header{grid-template-columns:1fr}.app-header__summary{justify-content:flex-start}.app-shell,.sidebar{grid-template-columns:1fr}}@media(max-width:760px){.app-header,.app-shell{padding-left:.8rem;padding-right:.8rem}.sequence-form,.action-row,.panel-head{flex-direction:column}.stats-grid{grid-template-columns:1fr}}