:root{
  --bg:#0b0d10;
  --panel:#14181f;
  --panel-2:#1b2129;
  --ink:#e9edf2;
  --ink-dim:#9aa4b1;
  --line:#252c36;
  --accent:#ffd166;
  --accent-2:#118ab2;
  --danger:#e63946;
  --ok:#06d6a0;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--accent)}
a:hover{color:#fff}
h1,h2,h3{margin:0 0 .4em;line-height:1.2}
h1{font-size:1.8rem;letter-spacing:-.02em}
h2{font-size:1.25rem}
h3{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}
p{margin:0 0 1rem}
.muted{color:var(--ink-dim)}

.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.5rem;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(11,13,16,.9);backdrop-filter:blur(6px);z-index:10;
}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-mark{width:36px;height:36px;color:var(--accent)}
.tagline{font-size:.85rem;color:var(--ink-dim);margin-top:2px}
.site-nav{display:flex;gap:1.25rem}
.site-nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
.site-nav a:hover{color:var(--accent)}

main{max-width:1200px;margin:0 auto;padding:1.5rem}
section{margin-bottom:3rem}
.section-head{margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.section-head p{color:var(--ink-dim);margin-top:.25rem}

.planner .layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:1.5rem;align-items:start}
@media (max-width:960px){.planner .layout{grid-template-columns:1fr}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem}
.panel h2{margin-bottom:.75rem}

.presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.preset{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);padding:.5rem 1rem;border-radius:999px;cursor:pointer;font-size:.9rem}
.preset:hover{border-color:var(--accent)}
.preset.active{background:var(--accent);color:#0b0d10;border-color:var(--accent);font-weight:600}

.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}
.field.inline{flex-direction:row;align-items:center;gap:.75rem}
.field label{font-size:.85rem;color:var(--ink-dim)}
.field input[type=range]{width:100%}
.field output{font-variant-numeric:tabular-nums;color:var(--accent)}
.toggles{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem}
.toggles label{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--ink-dim)}

.drop{border:2px dashed var(--line);border-radius:var(--radius);padding:1.5rem;text-align:center;cursor:pointer;transition:border-color .15s}
.drop:hover,.drop.drag{border-color:var(--accent)}
.drop-label{display:flex;flex-direction:column;gap:.35rem;color:var(--ink-dim)}
.drop-label strong{color:var(--ink)}
.art-controls{margin-top:.75rem}

.palette{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.swatch{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);cursor:pointer;transition:transform .1s}
.swatch:hover{transform:scale(1.1)}
.swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.color-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.color-list li{display:flex;align-items:center;gap:.4rem;background:var(--panel-2);padding:.35rem .75rem;border-radius:999px;font-size:.85rem}
.color-list .chip{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.2)}
.color-list .empty{color:var(--ink-dim);background:none;padding:0}

.canvas-wrap{position:sticky;top:5rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:1rem}
#deckCanvas{width:100%;height:auto;background:#0f1218;border-radius:10px}
.canvas-actions{display:flex;flex-wrap:wrap;gap:.5rem}

.btn{background:var(--accent);color:#0b0d10;border:none;padding:.6rem 1rem;border-radius:10px;font-weight:600;cursor:pointer;font-size:.9rem}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent)}

.materials .estimate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
.card .big{font-size:1.8rem;font-weight:700;color:var(--accent);margin:.25rem 0}

.guide-body{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.guide-body h3{margin-top:1.25rem}
.guide-body h3:first-child{margin-top:0}
.guide-body ul{padding-left:1.25rem}
.guide-body li{margin-bottom:.5rem}
.guide-body dl{margin:0}
.guide-body dt{font-weight:600;margin-top:.75rem}
.guide-body dd{margin:.25rem 0 0;color:var(--ink-dim)}

.site-footer{border-top:1px solid var(--line);padding:1.5rem;margin-top:2rem}
.foot-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.85rem;color:var(--ink-dim)}
.foot-inner a{color:var(--ink-dim)}
.foot-inner a:hover{color:var(--accent)}



/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}