:root{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;color:#e5e7eb;background-color:#0b1220;line-height:1.6;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.08),transparent 32%),radial-gradient(circle at 80% 0%,rgba(16,185,129,.08),transparent 28%),#0b1220}a{color:inherit;text-decoration:none}#app{padding:clamp(1.25rem,2vw,2.5rem)}.page{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:clamp(1rem,2vw,1.5rem);align-items:start}.summary{background:linear-gradient(145deg,#0f172a,#0b1220);border:1px solid #1e293b;border-radius:16px;padding:1.25rem;box-shadow:0 15px 35px #00000059}.branding{display:flex;gap:.75rem;align-items:center}.dot{width:18px;height:18px;background:linear-gradient(145deg,#60a5fa,#34d399);border-radius:50%;box-shadow:0 0 18px #34d39973}h1{margin:.1rem 0;font-size:1.5rem;color:#e2e8f0}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:#94a3b8}.muted{margin:.35rem 0 1rem;color:#94a3b8;font-size:.95rem}.swatch-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}.swatch{width:26px;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px #ffffff14}.chip{padding:.35rem .6rem;border-radius:999px;border:1px solid #1f2937;background:#94a3b814;color:#cbd5e1;font-size:.8rem}.status-row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}.status-label{margin:0;color:#cbd5e1;font-weight:600}.status-sub{margin:.1rem 0 0;color:#94a3b8;font-size:.9rem}.primary{background:linear-gradient(135deg,#2563eb,#22c55e);color:#0b1220;border:none;padding:.7rem 1rem;border-radius:12px;font-weight:700;cursor:pointer;box-shadow:0 12px 24px #2563eb40;transition:transform .15s ease,box-shadow .2s ease}.primary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 14px 26px #2563eb4d}.preview{display:flex;flex-direction:column;gap:.6rem}.preview-card{background:#0f172a;border:1px solid #1f2937;border-radius:16px;padding:.75rem;box-shadow:0 25px 45px #00000073;display:flex;justify-content:center;align-items:center}.preview-frame{width:min(520px,64vw);aspect-ratio:1 / 1;object-fit:contain;border-radius:12px;background:#111827;border:1px solid #1f2937}.placeholder{width:min(520px,64vw);aspect-ratio:1 / 1;display:grid;place-items:center;color:#94a3b8;border-radius:12px;border:1px dashed #334155;background:repeating-linear-gradient(45deg,#34d3990d,#34d3990d 12px,#3b82f60d 12px 24px),#0b1220}.meta{display:flex;gap:.6rem;flex-wrap:wrap;color:#94a3b8;font-size:.9rem}.meta span{padding:.35rem .6rem;border-radius:10px;background:#94a3b814;border:1px solid #1f2937}.panel{background:linear-gradient(165deg,#0f172a,#0b1220);border:1px solid #1f2937;border-radius:16px;padding:1rem;display:flex;flex-direction:column;gap:.75rem;box-shadow:0 18px 38px #0006;position:sticky;top:1rem}.panel-header{display:flex;justify-content:space-between;align-items:center}.badge{padding:.3rem .65rem;border-radius:999px;background:#2563eb26;color:#bfdbfe;border:1px solid rgba(37,99,235,.25);font-size:.8rem}.control{background:#111827a6;border:1px solid #1f2937;border-radius:12px;padding:.9rem}.control-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}.control label,.control-title{color:#cbd5e1;font-weight:600}.value{color:#94a3b8;font-size:.9rem}.option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:.35rem}button{appearance:none;border:1px solid #1f2937;background:#3b82f61a;color:#e2e8f0;border-radius:10px;padding:.55rem .65rem;cursor:pointer;transition:border-color .12s ease,transform .12s ease,background .12s ease}button.ghost{background:#ffffff0a;color:#cbd5e1}button:hover{border-color:#3b82f6;transform:translateY(-1px)}select,input[type=range]{width:100%}select{background:#111827e6;border:1px solid #1f2937;color:#e5e7eb;padding:.55rem .65rem;border-radius:10px}input[type=range]{accent-color:#3b82f6}.color-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:.45rem;margin-top:.4rem}.color-chip{display:flex;flex-direction:column;gap:.35rem}.color-chip input[type=color]{width:100%;height:36px;border:none;padding:0;background:transparent;cursor:pointer}.color-chip span{display:block;width:100%;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.08)}.help{margin:.35rem 0 0;color:#64748b;font-size:.85rem}@media(max-width:1100px){.page{grid-template-columns:1fr}.panel{position:relative;top:0}.preview-card,.preview-frame,.placeholder{width:100%}}