: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 2px 8px #0000000F;--shadow-md:0 8px 24px #0000001F;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--container-width:min(1100px, 95vw);--btn-bg:var(--primary);--btn-bg-hover:#3A5F85;--btn-text:var(--on-primary);--input-border:var(--border-strong);--input-focus:var(--primary-strong)}@media (prefers-color-scheme:dark){:root{--bg:#0A0E14;--surface:#1A1F2C;--surface-alt:#151922;--muted-surface:#11161D;--text:#E8EDF5;--muted:#8B9BB4;--border:#2A3240;--border-strong:#3A4250;--shadow-sm:0 4px 12px #00000066;--shadow-md:0 12px 32px #00000080;--btn-bg:#3A5678;--btn-bg-hover:#4C6C94;--input-border:#3A4250}.base-btn{color:#e8edf5}}*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;font-size:16px}body{font-family:"Noto Sans",sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-text-size-adjust:100%;display:flex;flex-direction:column}.container{max-width:var(--container-width);margin:1rem auto;padding:clamp(.8rem,2.5vw,1rem);background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:calc(100% - 2rem);flex:1}header{background-color:var(--primary);color:var(--on-primary);text-align:center;padding:1rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,#fffFFF1A 0,transparent 50%),radial-gradient(circle at 80% 20%,#fffFFF1A 0,transparent 50%);pointer-events:none}header h1{font-size:clamp(1.3rem, 3vw, 1.75rem);margin:0;font-weight:800;letter-spacing:.5px;text-transform:uppercase;position:relative;text-shadow:0 2px 4px #0000004D}header p{font-size:clamp(.9rem, 2.5vw, 1.1rem);margin-top:.5rem;opacity:.95;font-weight:500;position:relative}.card{background:var(--surface);border-radius:var(--radius-md);padding:clamp(1rem,3vw,1.5rem);margin-bottom:1rem;box-shadow:var(--shadow-sm);border:3px solid var(--border);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.card h2{margin-top:0;color:var(--primary);font-size:clamp(1rem, 2.8vw, 1.2rem);margin-bottom:.75rem}.form-group{margin-bottom:1.25rem}label{display:block;font-weight:700;margin-bottom:.5rem;color:var(--text);font-size:.95rem}input[type=text],select,textarea{width:100%;padding:.8rem 1rem;font-size:1rem;border-radius:var(--radius-sm);border:2px solid var(--input-border);background:var(--surface);color:var(--text);transition:.2s;font-family:inherit}input[type=text]:focus,select:focus,textarea:focus{outline:0;border-color:var(--input-focus);box-shadow:0 0 0 3px #2c4A6626;transform:translateY(-1px)}.button-group{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.base-btn{margin-top:1rem;margin-bottom:1rem;flex:1 1 auto;min-width:70px;padding:.8rem 1rem;border-radius:var(--radius-sm);background:var(--muted-surface);border:3px solid var(--border);font-weight:700;cursor:pointer;transition:.2s;font-size:.9rem}.base-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);background:var(--surface-alt)}.action-btn,.footer-btn,button[type=button]{padding:.8rem 1.5rem;background:var(--btn-bg);color:var(--btn-text);border:none;border-radius:var(--radius-sm);font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm);transition:.2s;font-size:.95rem;min-height:44px}.action-btn:hover,.footer-btn:hover,button[type=button]:hover{transform:translateY(-2px);background:var(--btn-bg-hover);box-shadow:var(--shadow-md)}.action-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}#results-container{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}#result{font-family:"Noto Sans",sans-serif;font-size:clamp(.95rem, 2vw, 1.1rem);line-height:1.7;background:var(--muted-surface);padding:1rem;border-radius:var(--radius-md);min-height:120px;border:3px dashed var(--border);overflow-wrap:break-word;white-space:pre-wrap;tab-size:2}#error{color:var(--secondary);padding:.8rem 1rem;margin-top:1rem;border-radius:var(--radius-sm);background:#de000014;display:none;border:3px solid #de000033;font-weight:600}.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{display:inline-block;padding:6px 12px;margin:3px 2px;font-weight:800;border-radius:8px;color:var(--on-primary);box-shadow:var(--shadow-sm);font-size:.9rem;transition:transform .1s}.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{width:100%;border-collapse:collapse;margin-top:1rem;background:0 0;font-size:.9rem}td,th{border:2px solid var(--border-strong);padding:.5rem;text-align:center}th{background:var(--surface-alt);color:var(--muted);font-weight:700}#footer{text-align:center;background-color:var(--primary);color:var(--on-primary);padding:1rem;font-size:.9rem;margin-top:2rem;border-radius:var(--radius-sm) var(--radius-sm) 0 0}#footer a{color:#fffFFFF2;text-decoration:underline;transition:opacity .2s}#footer a:hover{opacity:.8}#visualizer-container{margin-top:1.5rem;padding:1.25rem;background:var(--muted-surface);border-radius:var(--radius-md);border:2px solid var(--border);overflow-x:auto;display:none}#visualizer-title{font-weight:700;margin-bottom:1rem;color:var(--muted);font-size:1.1rem}#sequence-visualizer{display:block;width:100%;height:160px;background:var(--surface);border-radius:8px;border:2px solid var(--border-strong)}.amino-acid-tooltip{position:absolute;background:#000000E6;color:#fff;padding:8px 12px;border-radius:6px;font-size:.85rem;pointer-events:none;z-index:1000;display:none;backdrop-filter:blur(4px);box-shadow:var(--shadow-md)}.highlight-effect{box-shadow:0 0 20px #1a71EB66;transition:box-shadow .3s}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}.error-shake{animation:.4s ease-in-out shake}a{color:var(--primary);transition:color .2s}:focus{outline:#2C4A6633 solid 3px;outline-offset:2px}.footer-controls{display:flex;justify-content:center;gap:1rem;margin-top:1rem;flex-wrap:wrap}.footer-btn{padding:.7rem 1.25rem;border-radius:8px;cursor:pointer;min-height:44px}#about-section{margin-top:.5rem}#about-section p{font-size:.9rem}#about-section h2{margin-top:0;margin-bottom:.25rem}details{margin:0}p,summary{font-family:"Noto Sans",sans-serif!important}@media (max-width:768px){.container{padding:1rem;margin:.5rem;width:calc(100% - 1rem);border-radius:var(--radius-md)}header{padding:1.25rem 1rem}header h1{font-size:1.5rem;letter-spacing:.3px}.card{padding:1rem;margin-bottom:.75rem}.button-group{gap:.4rem}.base-btn{flex-basis:calc(33.333% - .4rem);padding:.7rem .5rem;font-size:.85rem;min-height:44px}#sequence-visualizer{height:120px}.footer-controls{gap:.75rem}.footer-btn{flex:1;min-width:140px}td,th{padding:.5rem .25rem;font-size:.8rem}}@media (max-width:480px){.base-btn{flex-basis:calc(50% - .4rem);font-size:.8rem}.button-group{gap:.3rem}.footer-controls{flex-direction:column;align-items:stretch}.footer-btn{min-width:auto}#result{padding:1rem;font-size:.9rem}}@media print{#visualizer-container,.footer-controls,header{display:none!important}.container{box-shadow:none;border:2px solid #ccc;background:#fff;color:#000;margin:0;width:100%}.card{box-shadow:none;border:2px solid #ddd}}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:NaNs!important;animation-iteration-count:1!important;transition-duration:NaNs!important;scroll-behavior:auto!important}.action-btn:hover,.base-btn:hover,.card:hover,.dna-pill:hover{transform:none}}@media (prefers-contrast:high){:root{--border:#000;--border-strong:#000;--shadow-sm:0 2px 4px #0000004D;--shadow-md:0 4px 8px #00000066}.card{border:3px solid var(--border)}}