/* Shared base — tokens aliases, resets, demo chrome */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--color-ink);
  background:var(--color-bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.wrap{width:min(100% - 2rem,var(--max,1120px));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:120;background:var(--color-primary);color:var(--color-primary-ink);padding:.6rem 1rem}

:root{
  --ink:var(--color-ink);
  --muted:var(--color-muted);
  --paper:var(--color-bg);
  --card:var(--color-surface);
  --line:var(--color-line);
  --copper:var(--color-primary);
  --copper-dark:var(--color-primary-dark);
  --slate:var(--color-accent);
  --ok:var(--color-ok);
  --ease:cubic-bezier(.22,1,.36,1);
  --max:1120px;
  --demo-bar-h: 52px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.8rem 1.15rem;font-weight:700;
  transition:transform .2s var(--ease),background .2s,border-color .2s;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--color-primary);color:var(--color-primary-ink)}
.btn-primary:hover{background:var(--color-primary-dark)}
.btn-ghost{background:var(--color-surface);border-color:var(--color-line)}
.btn-accent{background:var(--color-accent);color:var(--color-primary-ink)}

/* Demo bar */
.demo-bar{
  position:sticky;top:0;z-index:100;
  display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1rem;
  padding:.55rem .85rem;
  background:rgba(20,18,16,.94);color:#f5f0e8;
  font-family:"Segoe UI",system-ui,sans-serif;font-size:.78rem;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.demo-bar a.demo-bar__brand{color:#fff;font-weight:700;text-decoration:none;letter-spacing:-.02em}
.demo-bar__group{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.demo-bar__label{opacity:.65;text-transform:uppercase;letter-spacing:.06em;font-size:.65rem;font-weight:700}
.demo-bar__btn{
  appearance:none;border:1px solid rgba(255,255,255,.18);background:transparent;color:#f5f0e8;
  border-radius:999px;padding:.28rem .65rem;font:inherit;font-weight:700;cursor:pointer;
}
.demo-bar__btn.is-active,.demo-bar__btn:hover{background:#fff;color:#1c1917;border-color:#fff}
.demo-bar__swatch{
  width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  padding:0;cursor:pointer;background:var(--swatch,#ccc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}
.demo-bar__swatch.is-active{outline:2px solid #fff;outline-offset:2px}
.demo-bar__cta{
  margin-left:auto;color:#1c1917;background:#ffcd00;border-radius:999px;
  padding:.35rem .75rem;font-weight:800;text-decoration:none;white-space:nowrap;
}
@media(max-width:720px){.demo-bar__cta{width:100%;text-align:center;margin-left:0}}