:root{--bg:#0b0d12;--card:#11131a;--text:#e7ecf3;--muted:#96a0b5;--border:#212633;--accent:#2563eb}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}
.wrap{max-width:1080px;margin:0 auto;padding:1.25rem}
.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1e2635}
.topbar nav a{color:var(--text);text-decoration:none;margin-left:1rem;opacity:.9}
.brand{font-weight:800}
.hero{padding:1.25rem 0 0.5rem}
.hero h1{font-size:clamp(24px,3vw,36px);margin:.25rem 0}
.hero p{opacity:.8;margin:.25rem 0}
.grid{display:grid}.two{grid-template-columns:1fr}.three{grid-template-columns:repeat(3,1fr)}
@media(min-width:860px){.two{grid-template-columns:1fr 1fr}}
.gap{gap:1rem}.gap-sm{gap:.75rem}.gap-xs{gap:.35rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem}
label{display:flex;flex-direction:column;font-size:.9rem;gap:.35rem;margin:.5rem 0}
input,select{background:#0f1420;border:1px solid #243049;color:var(--text);padding:.6rem .7rem;border-radius:8px}
.btn{background:var(--accent);color:white;border:0;padding:.7rem 1rem;border-radius:10px;font-weight:700;cursor:pointer}
.btn-secondary{background:#334155;color:white;border:0;padding:.6rem .9rem;border-radius:10px;cursor:pointer}
.row{display:flex;align-items:center}.stack{display:flex;flex-direction:column}
.preview{display:flex;gap:1rem;align-items:center}
.tile{border:1px solid #e5e7eb;border-radius:10px;padding:.6rem}.white{background:#fff;color:#111}
.scroll{overflow:auto;max-width:100%}
.small{font-size:.85rem}.muted{color:var(--muted)}
hr{border:0;border-top:1px solid #1e2635;margin:1rem 0}