:root{--dna-a:#f66;--dna-t:#4ecdc4;--dna-g:#fd6;--dna-c:#6a0572;--rna-u:#1a936f;--primary:#2c4a66;--primary-strong:#20374d;--secondary:#e00;--tertiary:#5d7d9c;--bg:#fcfcfc;--surface:#fff;--surface-alt:#f2f5f8;--muted-surface:#f8fafc;--text:#2d2d2d;--muted:#6b7280;--on-primary:#fff;--border:#e5e7eb;--border-strong:#d1d5db;--shadow-sm:0 1px 4px rgba(0,0,0,.04);--shadow-md:0 4px 12px rgba(0,0,0,.08);--radius-sm:5px;--radius-md:8px;--radius-lg:10px;--container-width:min(1200px, 100vw);--btn-bg:var(--primary);--btn-bg-hover:#3a5f85;--btn-text:var(--on-primary);--input-border:var(--border-strong);--input-focus:var(--primary-strong);--success:#22c55e}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0a0e14;--surface:#1a1f2c;--surface-alt:#151922;--muted-surface:#11161d;--text:#e8edf5;--muted:#8b9bb4;--border:#2a3240;--border-strong:#3a4250;--shadow-sm:0 1px 6px rgba(0,0,0,.267);--shadow-md:0 6px 16px rgba(0,0,0,.4);--btn-bg:#3a5678;--btn-bg-hover:#4c6c94;--input-border:#3a4250}:root:not([data-theme=light]) .base-btn{color:#e8edf5}:root:not([data-theme=light]) .toast{color:#e8edf5;background:#2a3240}}[data-theme=dark]{--bg:#0a0e14;--surface:#1a1f2c;--surface-alt:#151922;--muted-surface:#11161d;--text:#e8edf5;--muted:#8b9bb4;--border:#2a3240;--border-strong:#3a4250;--shadow-sm:0 1px 6px rgba(0,0,0,.267);--shadow-md:0 6px 16px rgba(0,0,0,.4);--btn-bg:#3a5678;--btn-bg-hover:#4c6c94;--input-border:#3a4250}[data-theme=dark] .base-btn{color:#e8edf5}[data-theme=dark] .toast{color:#e8edf5;background:#2a3240}[data-theme=light]{--bg:#fcfcfc;--surface:#fff;--surface-alt:#f2f5f8;--muted-surface:#f8fafc;--text:#2d2d2d;--muted:#6b7280;--border:#e5e7eb;--border-strong:#d1d5db;--shadow-sm:0 1px 4px rgba(0,0,0,.04);--shadow-md:0 4px 12px rgba(0,0,0,.08);--btn-bg:#2c4a66;--btn-bg-hover:#3a5f85;--input-border:#d1d5db}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;font-size:15px}body{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;flex-direction:column;min-height:100vh;font-family:Noto Sans,sans-serif;line-height:1.5;display:flex}.container{max-width:var(--container-width);background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);flex:1;width:calc(100% - 1.5rem);margin:.5rem auto;padding:max(.5rem,min(2vw,.75rem))}header{background-color:var(--primary);color:var(--on-primary);text-align:center;box-shadow:var(--shadow-sm);padding:.5rem .75rem;position:relative;overflow:hidden}header:before{content:"";pointer-events:none;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.1) 0%,transparent 50%);position:absolute;top:0;bottom:0;left:0;right:0}header h1{letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.3);margin:0;font-size:max(1.1rem,min(2.5vw,1.4rem));font-weight:800;position:relative}.theme-toggle{color:var(--on-primary);cursor:pointer;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.3);border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.1rem;transition:background .2s,transform .15s;display:flex;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.theme-toggle:hover{background:rgba(255,255,255,.25);transform:translateY(-50%)scale(1.08)}.theme-toggle:active{transform:translateY(-50%)scale(.95)}header p{opacity:.95;margin-top:.25rem;font-size:max(.8rem,min(2vw,.95rem));font-weight:500;position:relative}.card{background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border);margin-bottom:.5rem;padding:max(.6rem,min(2vw,.85rem));transition:box-shadow .2s}.card:hover{box-shadow:var(--shadow-md)}.card h2{color:var(--primary);margin-top:0;margin-bottom:.4rem;font-size:max(.9rem,min(2.5vw,1.05rem))}.card h3{color:var(--primary);margin-top:.5rem;margin-bottom:.3rem;font-size:max(.8rem,min(2vw,.95rem))}.form-group{margin-bottom:.6rem}.form-group-inline{align-items:center;gap:.4rem;margin-bottom:.5rem;display:flex}label{color:var(--text);margin-bottom:.3rem;font-size:.85rem;font-weight:700;display:block}.label-row{justify-content:space-between;align-items:baseline;margin-bottom:.3rem;display:flex}.label-row label{margin-bottom:0}.base-counter{color:var(--muted);font-size:.75rem;font-weight:600}.incomplete-codon{color:var(--secondary);margin-left:.4rem;font-size:.7rem;font-weight:600}input[type=text],select,textarea{border-radius:var(--radius-sm);border:2px solid var(--input-border);background:var(--surface);width:100%;color:var(--text);resize:vertical;padding:.45rem .6rem;font-family:Noto Sans Mono,Courier New,monospace;font-size:.9rem;line-height:1.4;transition:border-color .2s,box-shadow .2s}input[type=text]:focus,select:focus,textarea:focus{border-color:var(--input-focus);outline:none;box-shadow:0 0 0 2px rgba(44,74,102,.125)}textarea{min-height:2.4rem;max-height:8rem}.section-divider{background:var(--border);border:none;height:1px;margin:.5rem 0}.codon-alignment{color:var(--muted);background:var(--muted-surface);border-radius:var(--radius-sm);white-space:pre-wrap;word-break:break-all;margin-top:.3rem;padding:.3rem .5rem;font-family:Noto Sans Mono,Courier New,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto}.codon-alignment .codon-sep{color:var(--border-strong);margin:0 .05rem}.codon-alignment .codon-group{background:var(--surface-alt);border-radius:2px;padding:0 1px}.button-group{flex-wrap:wrap;justify-content:center;gap:.35rem;display:flex}.button-group-row{flex-wrap:wrap;align-items:center;gap:.35rem;display:flex}.base-btn{border-radius:var(--radius-sm);background:var(--muted-surface);border:2px solid var(--border);cursor:pointer;flex:auto;min-width:48px;min-height:36px;padding:.35rem .5rem;font-family:Noto Sans Mono,Courier New,monospace;font-size:.85rem;font-weight:700;transition:all .15s}.base-btn:hover{box-shadow:var(--shadow-sm);background:var(--surface-alt);transform:translateY(-1px)}#base-buttons{flex-wrap:nowrap;gap:.35rem;display:flex}#base-buttons .base-btn{flex:auto;min-width:48px}.base-btn:active{transform:translateY(0)}.action-btn,.footer-btn{background:var(--btn-bg);color:var(--btn-text);border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow-sm);border:none;min-height:36px;padding:.35rem .75rem;font-family:inherit;font-size:.8rem;font-weight:700;transition:all .15s}.action-btn:hover,.footer-btn:hover{background:var(--btn-bg-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.action-btn:active,.footer-btn:active{transform:translateY(0)}.action-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.action-btn.danger{color:var(--secondary);border:2px solid var(--secondary);box-shadow:none;background:0 0}.action-btn.danger:hover{background:var(--secondary);color:var(--on-primary)}#results-container{border-top:1px solid var(--border);margin-top:.5rem;padding-top:.5rem}#result{background:var(--muted-surface);border-radius:var(--radius-md);overflow-wrap:break-word;white-space:pre-wrap;tab-size:2;padding:.6rem;font-family:Noto Sans,sans-serif;font-size:max(.85rem,min(1.8vw,.95rem));line-height:1.6}.results-placeholder{text-align:center;color:var(--muted);padding:1rem .5rem;font-size:.85rem}.result-header{align-items:center;gap:.4rem;margin-bottom:.3rem;display:flex}.result-type-badge{text-transform:uppercase;letter-spacing:.5px;background:var(--primary);color:var(--on-primary);border-radius:3px;padding:.1rem .4rem;font-size:.6rem;font-weight:800;line-height:1.4;display:inline-block}.result-label{color:var(--text);font-size:.85rem;font-weight:700}.result-sequence{margin-top:.3rem}.result-seq-plain{letter-spacing:.5px;font-family:Noto Sans Mono,Courier New,monospace;font-size:.9rem}.base-names{color:var(--muted);margin-top:.3rem;font-size:.75rem;line-height:1.4}.protein-summary{flex-wrap:wrap;gap:.25rem;margin-top:.3rem;margin-bottom:.4rem;display:flex}.amino-chip{background:color-mix(in srgb, var(--amino-color,var(--muted)) 18%, transparent);border:1px solid color-mix(in srgb, var(--amino-color,var(--muted)) 35%, transparent);color:var(--amino-color,var(--text));border-radius:4px;align-items:center;padding:.15rem .45rem;font-size:.7rem;font-weight:700;line-height:1.3;display:inline-flex}.incomplete-codon-warning{color:var(--muted);margin-top:.4rem;font-size:.75rem;font-style:italic}.mono{font-family:Noto Sans Mono,Courier New,monospace}.input-summary{background:var(--surface-alt);border-radius:var(--radius-sm);border:1px solid var(--border);align-items:center;gap:.4rem;margin-bottom:.4rem;padding:.35rem .6rem;font-size:.8rem;display:flex;overflow:hidden}.input-summary-badge{text-transform:uppercase;letter-spacing:.5px;background:var(--tertiary);color:var(--on-primary);border-radius:3px;flex-shrink:0;padding:.1rem .35rem;font-size:.6rem;font-weight:800;line-height:1.4;display:inline-block}.input-summary-seq{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-family:Noto Sans Mono,Courier New,monospace;font-size:.8rem;font-weight:700;overflow:hidden}.input-summary-arrow{color:var(--muted);flex-shrink:0;font-weight:700}.input-summary-type{color:var(--primary);flex-shrink:0;font-size:.75rem;font-weight:700}.inline-copy-btn{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);background:0 0;min-height:auto;padding:.15rem .4rem;font-family:inherit;font-size:.65rem;font-weight:600;line-height:1;transition:all .15s}.inline-copy-btn:hover{background:var(--surface-alt);color:var(--primary);border-color:var(--primary)}.amino-dot{vertical-align:middle;border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-right:.3rem;display:inline-block}#error{color:var(--secondary);border-radius:var(--radius-sm);background:rgba(222,0,0,.08);border:2px solid rgba(222,0,0,.2);margin-top:.5rem;padding:.5rem .6rem;font-size:.85rem;font-weight:600;display:none}.base-a{color:var(--dna-a);font-weight:800}.base-t{color:var(--dna-t);font-weight:800}.base-u{color:var(--rna-u);font-weight:800}.base-g{color:var(--dna-g);font-weight:800}.base-c{color:var(--dna-c);font-weight:800}.dna-pill{color:var(--on-primary);box-shadow:var(--shadow-sm);border-radius:4px;margin:1px;padding:2px 7px;font-family:Noto Sans Mono,Courier New,monospace;font-size:.8rem;font-weight:800;transition:transform .1s;display:inline-block}.dna-pill:hover{transform:scale(1.05)}.dna-pill.A{background:var(--dna-a)}.dna-pill.T{background:var(--dna-t);color:#000}.dna-pill.U{background:var(--rna-u);color:#fff}.dna-pill.G{background:var(--dna-g);color:#000}.dna-pill.C{background:var(--dna-c);color:#fff}table{border-collapse:collapse;background:0 0;width:100%;margin-top:.5rem;font-size:.8rem}th,td{border:1px solid var(--border-strong);text-align:left;padding:.3rem .4rem}th{background:var(--surface-alt);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:.7rem;font-weight:700}td{font-size:.8rem}#footer{text-align:center;background-color:var(--primary);color:var(--on-primary);border-radius:var(--radius-sm) var(--radius-sm) 0 0;margin-top:1rem;padding:.5rem .75rem;font-size:.8rem}#footer a{color:rgba(255,255,255,.95);text-decoration:underline;transition:opacity .2s}#footer a:hover{opacity:.8}#visualizer-container{background:var(--muted-surface);border-radius:var(--radius-md);border:1px solid var(--border);margin-top:.5rem;padding:.6rem;display:none;overflow-x:auto}#visualizer-title{color:var(--muted);margin-bottom:.5rem;font-size:.9rem;font-weight:700}#sequence-visualizer{background:var(--surface);border:1px solid var(--border-strong);border-radius:6px;width:100%;height:120px;display:block}.amino-acid-tooltip{color:#fff;pointer-events:none;z-index:1000;backdrop-filter:blur(4px);box-shadow:var(--shadow-md);background:rgba(0,0,0,.9);border-radius:5px;padding:6px 10px;font-size:.8rem;display:none;position:absolute}.highlight-effect{transition:box-shadow .3s;box-shadow:0 0 20px rgba(26,113,235,.4)}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.error-shake{animation:.4s ease-in-out shake}a{color:var(--primary);transition:color .2s}:focus{outline-offset:1px;outline:2px solid rgba(44,74,102,.2)}.footer-controls{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.5rem;display:flex}.footer-btn{cursor:pointer;border-radius:6px;min-height:36px;padding:.35rem .75rem}#about-section{margin-top:.25rem}#about-section p{font-size:.8rem;line-height:1.5}#about-section h2,#about-section h3{margin-top:0;margin-bottom:.2rem}#about-section summary{color:var(--primary);cursor:pointer;align-items:center;gap:.4rem;padding:.3rem 0;font-size:.9rem;font-weight:700;list-style:none;display:flex}#about-section summary:before{content:"▸";font-size:.75rem;transition:transform .2s;display:inline-block}#about-section details[open]>summary:before{transform:rotate(90deg)}#about-section .indented{padding-left:.75rem}details{margin:0}summary,p{font-family:Noto Sans,sans-serif!important}.skip-link{background:var(--primary);color:var(--on-primary);z-index:9999;border-radius:0 0 var(--radius-sm) 0;padding:.6rem 1rem;font-size:.85rem;font-weight:700;text-decoration:none;transition:top .2s;position:absolute;top:-100%;left:0}.skip-link:focus{outline:3px solid var(--primary);top:0}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.toast{background:var(--primary);color:var(--on-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-md);opacity:0;z-index:9999;pointer-events:none;padding:.5rem 1rem;font-size:.85rem;font-weight:700;transition:transform .3s,opacity .3s;position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%)translateY(80px)}.toast-visible{opacity:1;transform:translate(-50%)translateY(0)}.conversion-buttons{flex-direction:column;gap:.4rem;display:flex}.conversion-group{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.conversion-group-label{text-transform:uppercase;letter-spacing:.5px;color:var(--muted);width:100%;margin-bottom:.25rem;padding-left:.2rem;font-size:.65rem;font-weight:700}.conversion-group-buttons{flex-flow:wrap;gap:.3rem;display:flex}.conversion-btn{border-radius:var(--radius-sm);background:var(--muted-surface);border:1px solid var(--border);cursor:pointer;text-align:center;min-width:200px;max-width:max-content;min-height:36px;color:var(--text);flex-direction:column;flex:0 auto;justify-content:center;align-items:center;gap:.1rem;padding:.3rem .5rem;font-family:inherit;font-size:.75rem;font-weight:700;line-height:1.2;transition:all .15s;display:flex}.conversion-btn:hover{box-shadow:var(--shadow-sm);border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}.conversion-btn:active{transform:translateY(0)}.conversion-btn.active{background:var(--btn-bg);border-color:var(--primary-strong);box-shadow:var(--shadow-sm);color:#fff}.conversion-desc{opacity:.7;letter-spacing:.2px;font-size:.6rem;font-weight:500}.conversion-btn.active .conversion-desc{opacity:.9}.example-btn{border-radius:var(--radius-sm);background:var(--surface-alt);border:1px solid var(--border);cursor:pointer;min-width:200px;min-height:36px;color:var(--text);padding:.3rem .5rem;font-family:inherit;font-size:.75rem;font-weight:600;transition:all .15s}.example-btn:hover{box-shadow:var(--shadow-sm);border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}.example-btn:active{transform:translateY(0)}#sequence.input-valid{border-color:var(--success)}#sequence.input-invalid{border-color:var(--secondary)}.checkbox-group{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.checkbox-group label{cursor:pointer;align-items:center;gap:.3rem;margin-bottom:0;font-size:.8rem;font-weight:600;display:inline-flex}.checkbox-group input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}@media (max-width:768px){.container{border-radius:var(--radius-md);width:calc(100% - .7rem);margin:.35rem;padding:.5rem}header{padding:.4rem .5rem}header h1{letter-spacing:.3px;font-size:1.2rem}.card{margin-bottom:.4rem;padding:.5rem}.button-group{gap:.3rem}.base-btn{flex-basis:calc(33.333% - .3rem);min-height:36px;padding:.4rem .3rem;font-size:.8rem}.conversion-btn{min-width:70px;padding:.25rem .4rem;font-size:.7rem}.conversion-desc{font-size:.55rem}.example-btn{padding:.25rem .4rem;font-size:.7rem}#sequence-visualizer{height:100px}.footer-controls{gap:.4rem}.footer-btn{flex:1;min-width:80px;padding:.3rem .5rem;font-size:.75rem}th,td{padding:.25rem .2rem;font-size:.75rem}.dna-pill{padding:2px 5px;font-size:.75rem}}@media (max-width:480px){.base-btn{flex-basis:calc(50% - .3rem);font-size:.75rem}.button-group{gap:.25rem}.footer-controls{flex-direction:column;align-items:stretch}.footer-btn{min-width:auto}#result{padding:.5rem;font-size:.85rem}.conversion-group-buttons{flex-direction:column}.conversion-btn{min-width:auto}.checkbox-group{flex-direction:column;align-items:flex-start;gap:.3rem}}@media print{header,#visualizer-container,.footer-controls{display:none!important}.container{box-shadow:none;color:#000;background:#fff;border:2px solid #ccc;width:100%;margin:0}.card{box-shadow:none;border:2px solid #ddd}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.card:hover,.base-btn:hover,.action-btn:hover,.dna-pill:hover,.theme-toggle:hover{transform:none}.toast{transition:none}.toast-visible{transform:translate(-50%)translateY(0)}}@media (prefers-contrast:high){:root{--border:#000;--border-strong:#000;--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 2px 4px rgba(0,0,0,.4)}.card{border:2px solid var(--border)}}