:root{color-scheme:dark;--app-padding: clamp(.9rem, 1.5vw, 1.45rem);--bg: #03101a;--bg-elevated: rgba(8, 24, 37, .92);--panel: rgba(8, 24, 37, .88);--panel-strong: rgba(11, 29, 44, .96);--panel-soft: rgba(14, 38, 56, .8);--border: rgba(133, 176, 203, .16);--border-strong: rgba(133, 176, 203, .3);--text: #e6f3fb;--muted: #8fa5b6;--accent: #4fd6c4;--accent-strong: #0b78c4;--warm: #f7b955;--success: #74e39c;--danger: #ff8f7f;--shadow: 0 24px 60px rgba(0, 0, 0, .28);--radius-lg: 28px;--radius-md: 20px;--radius-sm: 14px;--track: rgba(17, 48, 70, .75);--canvas: radial-gradient(circle at top, rgba(79, 214, 196, .12), transparent 38%), rgba(4, 18, 28, .96)}[data-theme=light]{color-scheme:light;--bg: #eef6fb;--bg-elevated: rgba(255, 255, 255, .92);--panel: rgba(255, 255, 255, .88);--panel-strong: rgba(252, 255, 255, .96);--panel-soft: rgba(232, 242, 249, .92);--border: rgba(11, 45, 68, .11);--border-strong: rgba(11, 45, 68, .22);--text: #0f2433;--muted: #425a6b;--accent: #0f766e;--accent-strong: #0b78c4;--warm: #b45309;--success: #166534;--danger: #b42318;--shadow: 0 24px 60px rgba(14, 40, 58, .12);--track: rgba(223, 236, 245, .9);--canvas: radial-gradient(circle at top, rgba(79, 214, 196, .1), transparent 36%), rgba(245, 251, 255, .96)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{min-height:100svh;background:radial-gradient(circle at top left,rgba(79,214,196,.12),transparent 28%),radial-gradient(circle at right,rgba(11,120,196,.14),transparent 30%),var(--bg);color:var(--text);font-family:Exo,sans-serif;overflow:hidden}body[data-embedded=true] .dna-app{height:100svh;min-height:100svh;padding:0;gap:0}body[data-embedded=true] .app-header{display:none}body[data-embedded=true] .app-shell{height:100svh}button,input{font:inherit}button{border:0;background:none;color:inherit}.dna-app{position:relative;height:100svh;min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--app-padding);padding:var(--app-padding);overflow:hidden}.dna-app__backdrop{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 28%),linear-gradient(90deg,rgba(79,214,196,.03),transparent 35%,rgba(11,120,196,.05));pointer-events:none}.app-header{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.1rem 1.5rem;align-items:end;width:100%;margin:0;padding:0}.app-header__intro{display:grid;gap:.7rem}.app-header__brand{display:flex;align-items:center;gap:.95rem}.brand-mark{position:relative;width:2.9rem;height:2.9rem;border-radius:999px;background:linear-gradient(180deg,#4fd6c42e,#0b78c43d);border:1px solid rgba(79,214,196,.3);box-shadow:inset 0 1px #ffffff0f}.brand-mark span{position:absolute;left:50%;width:2px;border-radius:999px;transform:translate(-50%)}.brand-mark span:nth-child(1){top:.5rem;height:1.8rem;background:#4fd6c4e6}.brand-mark span:nth-child(2){top:.8rem;height:1.4rem;transform:translate(-50%) rotate(38deg);background:#f7b955d6}.brand-mark span:nth-child(3){top:.8rem;height:1.4rem;transform:translate(-50%) rotate(-38deg);background:#ff8f7fd6}.panel-kicker{display:inline-flex;font-family:IBM Plex Mono,monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.app-header h1,.panel-heading h2,.panel-heading h3,.stage-header h2,.quiz-header h2{margin:0;font-size:clamp(1.35rem,1.2rem + .8vw,2rem);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}.app-header__summary,.panel-heading p,.stage-header__copy p,.canvas-status,.quiz-prompt,.quiz-feedback,.strand-builder__note{margin:0;color:var(--muted);line-height:1.5}.app-header__summary{max-width:54rem;font-size:1.02rem}.app-header__controls{display:flex;align-items:center;justify-content:flex-end;gap:.9rem;min-width:0;padding:.45rem;border-radius:calc(var(--radius-md) + .15rem);border:1px solid var(--border);background:linear-gradient(180deg,#ffffff0a,#ffffff05);backdrop-filter:blur(18px);box-shadow:var(--shadow)}.theme-toggle,.icon-button,.button,.mode-tab,.base-card,.strand-pair,.quiz-option{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.theme-toggle,.icon-button,.button,.mode-tab,.base-card,.strand-pair,.quiz-option,.toggle-field,.strand-input{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease,opacity .18s ease}.theme-toggle{min-height:2.75rem;padding:0 1rem;border-radius:999px;border:1px solid var(--border-strong);background:var(--panel)}.mode-tabs{display:inline-flex;gap:.35rem;padding:.35rem;border-radius:999px;border:1px solid transparent;background:transparent;overflow-x:auto}.mode-tab{min-height:2.6rem;padding:0 1rem;border-radius:999px;color:var(--muted);white-space:nowrap}.mode-tab:hover,.mode-tab.is-active{color:var(--text)}.mode-tab.is-active{background:linear-gradient(135deg,#4fd6c438,#0b78c438);border:1px solid rgba(79,214,196,.25)}.app-shell{position:relative;z-index:1;height:100%;min-height:0;display:grid;grid-template-columns:minmax(17.25rem,19.5rem) minmax(0,1fr);gap:1.25rem;width:100%;margin:0;padding:0;overflow:hidden}.app-shell--quiz{grid-template-columns:1fr}.explore-sidebar,.stage,.quiz-layout{min-height:0;height:100%;border:1px solid var(--border);background:var(--panel);backdrop-filter:blur(18px);box-shadow:var(--shadow)}.explore-sidebar{border-radius:var(--radius-lg);padding:1.3rem 1.05rem 1rem;overflow:auto}.explore-sidebar{display:grid;align-content:start;gap:1.25rem}.sidebar-section{display:grid;gap:.95rem;padding:0 0 1.2rem;border-bottom:1px solid var(--border);background:transparent}.sidebar-section--focus{background:radial-gradient(circle at top right,rgba(79,214,196,.14),transparent 42%),#ffffff08;padding:1rem;border-radius:calc(var(--radius-md) - .1rem);border:1px solid var(--border)}.sidebar-section:last-child{padding-bottom:0;border-bottom:0}.panel-heading{display:grid;gap:.45rem}.focus-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.focus-fact{display:grid;gap:.35rem;align-content:start;min-height:5rem;padding:.8rem .85rem;border-radius:1rem;border:1px solid var(--border);background:#ffffff09}.focus-fact__label,.sidebar-section__meta .panel-kicker{color:var(--muted);font-family:IBM Plex Mono,monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}.focus-fact__value{font-size:1.1rem;line-height:1.05}.focus-fact__value--cool{color:var(--accent)}.focus-fact__value--warm{color:var(--warm)}.focus-fact__value--success{color:var(--success)}.sidebar-section__utility{display:grid;gap:.75rem}.sidebar-section__meta{display:flex;align-items:end;justify-content:space-between;gap:.75rem}.sidebar-section__meta strong{font-size:1.3rem;line-height:1}.base-list{display:flex;flex-direction:column;gap:.5rem}.base-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.85rem .9rem;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.03);background:#ffffff06;text-align:left}.base-card:hover,.base-card.is-selected{border-color:var(--border-strong);background:var(--panel-soft);transform:translateY(-1px)}.base-card.is-selected{box-shadow:inset 0 0 0 1px #4fd6c42e}.base-card__letter{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:999px;font-family:IBM Plex Mono,monospace;font-size:1.1rem;background:#4fd6c424;color:var(--text)}.base-card[data-base=T] .base-card__letter{background:#f7b95524}.base-card[data-base=G] .base-card__letter{background:#74e39c29}.base-card[data-base=C] .base-card__letter{background:#ff8f7f29}.base-card[data-base=U] .base-card__letter{background:#a88bfa29}.base-card__content{min-width:0;display:flex;flex-direction:column;gap:.1rem}.base-card__content strong,.site-card strong{font-size:.96rem}.base-card__content span,.base-card__meta,.legend-row,.site-card small,.site-card p,.strand-sequences span,.strand-builder__note{font-size:.86rem}.base-card__meta{color:var(--muted);font-family:IBM Plex Mono,monospace}.button,.icon-button{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 1rem;border-radius:999px;border:1px solid transparent;cursor:pointer}.button:disabled{opacity:.45;cursor:not-allowed}.button--primary{background:linear-gradient(135deg,#4fd6c43d,#0b78c447);border-color:#4fd6c447;color:var(--text)}.button--ghost,.icon-button{background:#ffffff05;border-color:var(--border);color:var(--text)}.button--ghost.is-active{border-color:#4fd6c442;background:#4fd6c41f}.button--full{width:100%}.stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.95rem;padding:1.15rem 1.15rem 1.3rem;border-radius:calc(var(--radius-lg) + .3rem);overflow:hidden;background:#061420e6}.stage-header{display:flex;justify-content:space-between;gap:1.25rem;align-items:flex-start;padding:.15rem .2rem .05rem}.stage-header__stats,.strand-builder__stats,.quiz-header__stats{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end}.stat-chip{display:inline-flex;flex-direction:column;gap:.25rem;min-width:5.25rem;padding:.7rem .85rem;border-radius:1rem;border:1px solid var(--border);background:#ffffff08}.stat-chip span{color:var(--muted);font-family:IBM Plex Mono,monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em}.stat-chip strong{font-size:.98rem;line-height:1.1}.stat-chip--warm strong{color:var(--warm)}.stat-chip--cool strong{color:var(--accent)}.stat-chip--success strong{color:var(--success)}.canvas-panel{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--panel-strong);overflow:hidden;box-shadow:inset 0 1px #ffffff08}.canvas-toolbar{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1rem .8rem;border-bottom:1px solid var(--border)}.canvas-toolbar__group{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center}.canvas-toolbar__group--actions{justify-content:flex-end}.toggle-field{display:inline-flex;align-items:center;gap:.7rem;padding:.45rem .7rem;border-radius:999px;border:1px solid transparent;cursor:pointer}.toggle-field input{position:absolute;opacity:0;pointer-events:none}.toggle-field__switch{position:relative;width:2rem;height:1.1rem;border-radius:999px;background:var(--track);border:1px solid var(--border)}.toggle-field__switch:after{content:"";position:absolute;top:.13rem;left:.14rem;width:.72rem;height:.72rem;border-radius:999px;background:var(--muted);transition:transform .18s ease,background-color .18s ease}.toggle-field input:checked+.toggle-field__switch{background:#4fd6c429;border-color:#4fd6c447}.toggle-field input:checked+.toggle-field__switch:after{background:var(--accent);transform:translate(.87rem)}.rotate-group,.pairing-group{display:inline-flex;align-items:center;gap:.55rem}.rotate-group__label,.rotate-group__value,.canvas-status,.strand-sequences code,.strand-pair__bridge small,.quiz-chip,.quiz-feedback{font-family:IBM Plex Mono,monospace}.rotate-group__value{min-width:3.3rem;text-align:center}.icon-button{width:2.6rem;padding:0}.canvas-status{padding:.7rem 1rem;border-bottom:1px solid var(--border);background:#ffffff05;font-size:.78rem;letter-spacing:.03em}.canvas-frame{position:relative;background:var(--canvas);min-height:0}.canvas-frame:before{content:"";position:absolute;inset:1rem;border-radius:calc(var(--radius-md) - .2rem);border:1px solid rgba(79,214,196,.08);background:linear-gradient(transparent 95%,#ffffff0a 96%),linear-gradient(90deg,transparent 95%,rgba(255,255,255,.04) 96%);background-size:1.35rem 1.35rem;pointer-events:none}.canvas-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.strand-builder{display:grid;gap:1rem;padding:1.05rem 1.05rem 0;max-height:clamp(14.5rem,28svh,22rem);border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 18%);overflow:auto}.strand-builder__header,.strand-builder__toolbar,.strand-form__row,.strand-sequences__row,.quiz-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.quick-pairs,.strand-builder__actions,.quiz-options,.quiz-hbond-list{display:flex;flex-wrap:wrap;gap:.6rem}.strand-form{display:grid;gap:.55rem}.strand-form__label{font-size:.86rem;color:var(--muted)}.strand-input{flex:1;min-width:0;min-height:2.9rem;padding:0 1rem;border-radius:999px;border:1px solid var(--border);background:#ffffff08;color:var(--text)}.strand-input::placeholder{color:var(--muted)}.strand-sequences{display:grid;gap:.5rem;padding:.9rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:#ffffff05}.strand-sequences__row span{min-width:8rem;color:var(--muted)}.strand-sequences__row code{font-size:.9rem;letter-spacing:.18em}.strand-builder__note{min-height:1.4rem;font-size:.85rem}.strand-track{display:flex;gap:.7rem;overflow-x:auto;padding:.4rem 0 1.1rem;scroll-snap-type:x proximity}.strand-empty{padding:1rem 1.15rem;border-radius:var(--radius-sm);border:1px dashed var(--border);color:var(--muted)}.strand-pair{position:relative;min-width:4.4rem;display:grid;justify-items:center;gap:.45rem;padding:.7rem .55rem .85rem;border-radius:1.25rem;border:1px solid var(--border);background:#ffffff08;scroll-snap-align:start}.strand-pair.is-selected{border-color:#4fd6c44d;background:#4fd6c41a}.strand-base{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:999px;font-family:IBM Plex Mono,monospace;font-size:1rem;font-weight:600;border:1px solid transparent}.strand-base[data-base=A]{background:#60c8ff26;border-color:#60c8ff2e}.strand-base[data-base=T]{background:#f7b95526;border-color:#f7b9552e}.strand-base[data-base=G]{background:#74e39c26;border-color:#74e39c2e}.strand-base[data-base=C]{background:#ff8f7f26;border-color:#ff8f7f2e}.strand-pair__bridge{display:inline-grid;grid-template-columns:1fr auto 1fr;gap:.3rem;align-items:center;width:100%}.strand-pair__bridge span{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}.strand-pair__bridge small{font-size:.68rem;color:var(--muted)}.strand-pair__terminal{min-height:.8rem;font-family:IBM Plex Mono,monospace;font-size:.72rem;color:var(--muted)}.legend-list,.site-list{display:grid;gap:.55rem}.legend-list--compact{grid-template-columns:repeat(2,minmax(0,1fr))}.legend-row{display:flex;align-items:center;gap:.65rem}.legend-dot{width:.7rem;height:.7rem;border-radius:999px}.legend-dot--donor{background:var(--warm);box-shadow:0 0 12px #f7b95557}.legend-dot--acceptor{background:var(--accent);box-shadow:0 0 12px #4fd6c44d}.legend-label{display:inline-grid;place-items:center;width:1.2rem;font-family:IBM Plex Mono,monospace;font-weight:600}.legend-label--nitrogen{color:var(--accent-strong)}.legend-label--oxygen{color:var(--danger)}.site-card{display:grid;gap:.3rem;padding:.72rem .8rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:#ffffff08}.site-card--donor{background:#f7b95514;border-color:#f7b95524}.site-card--acceptor{background:#4fd6c414;border-color:#4fd6c424}.site-card.is-highlighted{box-shadow:inset 0 0 0 1px #4fd6c433;transform:translate(2px)}.quiz-layout{display:grid;grid-template-rows:auto minmax(0,1fr);gap:0;border-radius:calc(var(--radius-lg) + .4rem);overflow:hidden}.quiz-header{padding:1.25rem;border-bottom:1px solid var(--border)}.quiz-stage{display:grid;grid-template-columns:minmax(0,1fr) 25rem;min-height:0}.quiz-stage__canvas{position:relative;min-height:0;background:var(--canvas)}.quiz-stage__canvas canvas{position:absolute;inset:0;width:100%;height:100%}.quiz-stage__content{display:grid;align-content:start;gap:1rem;padding:1.35rem;border-left:1px solid var(--border);background:var(--panel-strong);overflow:auto}.quiz-prompt{color:var(--text);font-size:1rem}.quiz-option{min-height:2.95rem;padding:0 1rem;border-radius:999px;border:1px solid var(--border);background:#ffffff08;cursor:pointer}.quiz-option.is-correct{border-color:#74e39c47;background:#74e39c1f}.quiz-option.is-wrong{border-color:#ff8f7f4d;background:#ff8f7f1f}.quiz-chip{display:inline-flex;align-items:center;min-height:2.3rem;padding:0 .85rem;border-radius:999px;border:1px solid var(--border);color:var(--muted)}.quiz-chip.is-found{border-color:#4fd6c447;background:#4fd6c41f;color:var(--text)}.quiz-feedback{min-height:2.6rem;padding:.9rem 1rem;border-radius:1rem;border:1px solid transparent;opacity:0}.quiz-feedback.is-visible{opacity:1;border-color:var(--border);background:#ffffff08}.theme-toggle:hover,.button:hover,.icon-button:hover,.mode-tab:hover,.base-card:hover,.strand-pair:hover,.quiz-option:hover,.toggle-field:hover,.strand-input:hover{border-color:var(--border-strong)}.theme-toggle:focus-visible,.button:focus-visible,.icon-button:focus-visible,.mode-tab:focus-visible,.base-card:focus-visible,.strand-pair:focus-visible,.quiz-option:focus-visible,.strand-input:focus-visible,.toggle-field:focus-within{outline:none;box-shadow:0 0 0 3px #4fd6c438;border-color:#4fd6c457}@media(prefers-reduced-motion:reduce){.theme-toggle,.icon-button,.button,.mode-tab,.base-card,.strand-pair,.quiz-option,.toggle-field,.strand-input{transition:none}}@media(max-width:1280px){.app-shell{grid-template-columns:17rem minmax(0,1fr)}.quiz-stage{grid-template-columns:minmax(0,1fr) 21rem}}@media(max-width:1024px){body{overflow:auto}.dna-app{height:auto;overflow:visible}.app-header{grid-template-columns:1fr;align-items:flex-start}.app-header__controls{width:100%;justify-content:space-between;flex-wrap:wrap}.app-shell{grid-template-columns:1fr;height:auto;overflow:visible}.explore-sidebar,.stage,.quiz-layout{overflow:visible;height:auto}.explore-sidebar{order:2;grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar-section--focus{grid-column:1 / -1}.focus-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.base-list,.stage-header,.strand-builder__header,.strand-builder__toolbar,.quiz-header,.quiz-stage{display:grid;grid-template-columns:1fr}.canvas-toolbar{flex-direction:column;align-items:flex-start}.strand-builder{max-height:none;overflow:visible}.quiz-stage__content{border-left:none;border-top:1px solid var(--border)}}@media(max-width:720px){.dna-app{padding:.8rem;gap:.8rem}.explore-sidebar,.focus-facts,.legend-list--compact{grid-template-columns:1fr}.stage,.explore-sidebar,.quiz-layout{border-radius:1.3rem}.canvas-toolbar__group--actions,.strand-form__row,.strand-sequences__row,.stage-header__stats,.strand-builder__stats,.quiz-header__stats{justify-content:flex-start}.rotate-group,.pairing-group{flex-wrap:wrap}.strand-track{padding-bottom:.6rem}}