:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px}:root{background:#020617;color:#e2e8f0}body{background:radial-gradient(circle at top,#1e293b,#020617 58%)}#root{margin:0 auto;max-width:980px;padding:1.5rem}.app{display:grid;gap:1rem}header h1{font-size:clamp(2rem,4vw,3rem);margin:0}header p{color:#94a3b8;margin-top:.5rem}.panel{background:#0f172ac7;border:1px solid rgb(148 163 184 / 24%);border-radius:14px;padding:1rem}h2{font-size:1.05rem;margin:0 0 .75rem}.grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}label{color:#cbd5e1;display:grid;font-size:.9rem;gap:.35rem}input[type=number],input[type=range]{width:100%}input[type=number]{background:#0b1220;border:1px solid #334155;border-radius:8px;color:#f8fafc;padding:.5rem .6rem}.presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}button{background:#0b1220;border:1px solid #334155;border-radius:8px;color:#e2e8f0;cursor:pointer;padding:.45rem .75rem}button:hover{border-color:#38bdf8}.output code{background:#0b1220;border:1px solid #334155;border-radius:10px;display:block;margin-bottom:.75rem;overflow-x:auto;padding:.75rem}.copy{background:#38bdf8;border-color:transparent;color:#082f49;font-weight:700}.copy:disabled{cursor:not-allowed;opacity:.55}.preview p{border-top:1px dashed #334155;margin-top:.75rem;padding-top:.75rem}