html,body,#root{margin:0;min-height:100%}:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color:#e2e8f0;background:#020617;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0}#root{min-height:100vh;display:grid;place-items:center;padding:1rem}.app{width:min(760px,100%);background:#0f172a;border:1px solid #1e293b;border-radius:14px;padding:1.25rem;box-shadow:0 18px 40px #02061799}.app-header{display:flex;justify-content:space-between;gap:.75rem}h1{margin:0;font-size:1.75rem}.subtitle{margin-top:.35rem;color:#94a3b8}.theme-pill{align-self:flex-start;border:1px solid #334155;border-radius:999px;color:#cbd5e1;font-size:.75rem;letter-spacing:.04em;padding:.2rem .55rem;text-transform:uppercase}.preset-grid{display:grid;gap:.5rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}.preset-grid button,.action-row button{border:1px solid #334155;background:#111827;border-radius:8px;color:#e2e8f0;cursor:pointer;font:inherit;padding:.45rem .65rem}.preset-grid button:hover,.action-row button:hover{border-color:#475569;background:#1f2937}.controls{display:grid;gap:.9rem;grid-template-columns:1fr;margin-top:1rem}label{font-weight:600;color:#cbd5e1}.control-row{margin-top:.4rem;display:flex;gap:.6rem}input[type=color]{width:48px;height:42px;border:none;border-radius:8px;background:transparent;padding:0}input[type=text]{flex:1;border:1px solid #334155;border-radius:8px;padding:.65rem .75rem;font:inherit;background:#020617;color:#e2e8f0}.action-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}.preview{margin-top:1rem;border-radius:10px;padding:1rem;min-height:132px;display:grid;align-content:center;gap:.25rem;border:1px dashed rgba(148,163,184,.45)}.preview p{margin:0}.preview-large{font-size:1.5rem;line-height:1.35}.result{margin-top:1rem;background:#111827;border:1px solid #1f2937;border-radius:10px;padding:.85rem 1rem}.ratio{margin:0;font-weight:700}.rating{margin:.3rem 0 0}.matrix{display:grid;gap:.2rem;margin:.65rem 0 0;padding-left:1rem}@media(min-width:680px){.controls{grid-template-columns:1fr 1fr}.preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}