*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#0a0e27,#1a1135,#0d1b2a);color:#e0e7ff;overflow-x:hidden}.dna-app{min-height:100vh;display:flex;gap:2rem;padding:2rem}.left-panel{width:380px;flex-shrink:0;background:linear-gradient(135deg,#ff66cc14,#6699ff14);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:2.5rem;position:sticky;top:2rem;height:fit-content;box-shadow:0 8px 32px #ff66cc26;transition:all .4s cubic-bezier(.4,0,.2,1)}.logo{font-size:3rem;font-weight:900;background:linear-gradient(135deg,#f6c,#a06adb,#69f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.5rem;margin-bottom:1rem;text-shadow:0 0 40px rgba(255,102,204,.5)}.left-title{font-size:1.4rem;font-weight:700;color:#c7d2fe;margin-bottom:1.5rem;line-height:1.4;letter-spacing:.15rem}.small-muted{font-size:.75rem;color:#94a3b8;font-weight:400;letter-spacing:.05rem}.lead{color:#94a3b8;line-height:1.7;margin-bottom:2rem;font-size:.95rem}.left-cta{display:flex;gap:1rem;flex-direction:column}.btn{padding:.85rem 1.5rem;border:none;border-radius:12px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.08rem}.btn.primary{background:linear-gradient(135deg,#f6c,#a06adb);color:#fff;box-shadow:0 4px 16px #ff66cc4d}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #ff66cc80}.btn.ghost{background:#ffffff0d;color:#c7d2fe;border:1px solid rgba(255,255,255,.15)}.btn.ghost:hover{background:#ffffff1a;border-color:#f6c6}.btn.small{padding:.5rem 1rem;font-size:.85rem}.main-panel{flex:1;display:flex;flex-direction:column;gap:1.5rem}.header-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.08)}.title{font-size:2rem;font-weight:700;background:linear-gradient(135deg,#f6c,#69f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.form-row{background:linear-gradient(135deg,#ff66cc0f,#6699ff0f);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:2rem;display:flex;flex-direction:column;gap:1rem;box-shadow:0 8px 32px #6699ff1a;transition:all .4s cubic-bezier(.4,0,.2,1)}.label-accent{font-size:.9rem;font-weight:600;color:#f6c;text-transform:uppercase;letter-spacing:.1rem}label{font-size:.9rem;font-weight:600;color:#69f;text-transform:uppercase;letter-spacing:.1rem}.input{background:#0a0e2799;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:.9rem 1.2rem;color:#e0e7ff;font-size:.95rem;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:Monaco,Courier New,monospace}.input::placeholder{color:#64748b;opacity:.7}.input:focus{outline:none;border-color:#f6c;box-shadow:0 0 0 3px #f6c3,0 0 20px #ff66cc4d}.text-area{min-height:120px;resize:vertical;line-height:1.6}.controls{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:.5rem}.mismatch{color:#94a3b8;font-size:.9rem}.mismatch strong{color:#f6c;font-size:1.3rem;margin-left:.5rem}input[type=range]{flex:1;min-width:180px;height:6px;border-radius:3px;background:linear-gradient(90deg,#ff66cc4d,#6699ff4d);outline:none;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#f6c,#69f);cursor:pointer;box-shadow:0 0 12px #f6c9;transition:all .2s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 20px #ff66cce6}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#f6c,#69f);cursor:pointer;border:none;box-shadow:0 0 12px #f6c9}.heat-section{background:linear-gradient(135deg,#ff66cc0f,#6699ff0f);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:2rem;box-shadow:0 8px 32px #6699ff1a}.heat-wrapper{display:flex;height:80px;gap:1px;background:#0a0e2766;border-radius:8px;padding:4px;margin-bottom:1rem;overflow:hidden}.heat-bar{position:relative;flex:1;border-radius:4px;transition:all .2s ease;cursor:pointer}.heat-bar:hover{transform:scaleY(1.1);filter:brightness(1.3)}.heat-bar-label{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:.65rem;color:#64748b;white-space:nowrap}.heat-legend{text-align:center;color:#94a3b8;font-size:.85rem;margin-top:1.5rem;font-style:italic}.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.stat-card{background:linear-gradient(135deg,#ff66cc14,#6699ff14);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem;text-align:center;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #6699ff1a}.stat-head{font-size:.8rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.08rem;margin-bottom:.5rem;font-weight:600}.stat-val{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#f6c,#69f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.match-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.match-box{background:linear-gradient(135deg,#ff66cc14,#6699ff14);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #6699ff1a}.meta-key{font-size:.85rem;color:#94a3b8;margin-bottom:.3rem}.meta-num{color:#f6c;font-weight:700;font-size:1.1rem}.meta-sub{font-size:.8rem;color:#69f;margin-bottom:1rem}.snippet{background:#0a0e2799;border-radius:8px;padding:.8rem;overflow-x:auto}.snippet code{font-family:Monaco,Courier New,monospace;color:#c7d2fe;font-size:.85rem;letter-spacing:.05rem}.spot-target{--mx: 0px;--my: 0px;--dx: 0px;--dy: 0px}.spot-target.spot-active{transform:translate(var(--dx),var(--dy)) scale(1.03);box-shadow:0 0 30px #f6c6,0 0 60px #6699ff4d}.spot-target.spot-active:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:linear-gradient(135deg,#f6c6,#69f6);border-radius:inherit;z-index:-1;opacity:0;animation:glow-pulse 2s ease-in-out infinite}@keyframes glow-pulse{0%,to{opacity:0}50%{opacity:.6}}@media(max-width:1024px){.dna-app{flex-direction:column}.left-panel{width:100%;position:relative;top:0}.summary{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.match-list{grid-template-columns:1fr}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}