/* Community Hub website brand (communityhub-prototype.vercel.app, assets/v5.css), applied to the Studios pages.
   Maps and slides keep Maddie's SIP ink (#333D44); page chrome uses the website's tokens. */
:root{
  --sky:#D3F0FE;--sky-2:#EAF7FE;--leaf:#58BA51;--leaf-deep:#398d4f;--leaf-tint:#E3F4DF;
  --site-ink:#231942;--site-ink-2:#4b4264;--site-ink-deep:#150e2c;
  --r-card:22px;--shadow:0 2px 0 rgba(35,25,66,.06),0 18px 34px -16px rgba(35,25,66,.42);
  --bounce:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.2,.7,.2,1);
}
html,body{background:var(--sky-2);color:var(--site-ink)}
body.editor-page{background:var(--sky-2)}
.bar{position:sticky;top:0;z-index:80;background:rgba(211,240,254,.8);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid rgba(35,25,66,.08);padding:0 clamp(16px,4vw,56px);height:68px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:Comfortaa,ui-rounded,sans-serif;font-weight:700;font-size:1.2rem;color:var(--site-ink);letter-spacing:-.01em}
.brand img{display:none}
.brand-mark{width:32px;height:32px;flex:none;color:var(--leaf);fill:var(--leaf)}
.brand b{font-weight:700;color:var(--leaf-deep)}
.brand i{font-style:normal;font-weight:600;color:var(--site-ink-2);margin-left:.2em}
.bar nav a{font-family:Comfortaa,sans-serif;font-weight:700;font-size:14.5px;color:var(--site-ink);padding:10px 14px;border-radius:999px}
.bar nav a:hover,.bar nav a[aria-current]{background:rgba(35,25,66,.08)}
.bar nav a.cta{background:var(--site-ink);color:#fff}
/* buttons: the website's ink pill with a hard drop shadow */
.btn{font-family:Comfortaa,sans-serif;font-weight:700;border-radius:999px;border:2px solid var(--site-ink);color:var(--site-ink);background:#fff;padding:10px 18px;box-shadow:0 3px 0 var(--site-ink);transition:transform .2s var(--bounce),box-shadow .2s var(--bounce)}
.btn:hover{transform:translateY(-2px) rotate(.4deg);box-shadow:0 5px 0 var(--site-ink)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--site-ink)}
.btn.primary{background:var(--site-ink);color:#fff;border-color:var(--site-ink);box-shadow:0 4px 0 var(--site-ink-deep)}
.btn.primary:hover{box-shadow:0 7px 0 var(--site-ink-deep)}
.btn.leaf{background:var(--leaf);border-color:var(--leaf-deep);color:#fff;box-shadow:0 4px 0 var(--leaf-deep)}
.btn.danger{border-color:#b3363d;color:#b3363d;box-shadow:0 3px 0 #b3363d}
.btn:disabled{transform:none;box-shadow:none}
.btn:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}
/* headings and highlights */
.meta h1,.hero h1,.step h2,h2.sec{color:var(--site-ink)}
.hero h1 em{font-style:normal;color:var(--site-ink);background:linear-gradient(transparent 62%,rgba(88,186,81,.45) 62%,rgba(88,186,81,.45) 92%,transparent 92%);padding:0 .06em}
.chip{background:#fff;color:var(--site-ink-2);border:1px solid rgba(35,25,66,.1)}
/* cards and frames */
.card,.studio-card{border-radius:var(--r-card);border:0;box-shadow:var(--shadow);background:#fff}
.viewer-page .om,.viewer-page .show-frame .st-viewport,.hero-show,.preview,.ed-canvas{border-radius:18px;box-shadow:var(--shadow)}
.ed-top{top:68px;background:rgba(255,255,255,.9)}
.ed-outline,.ed-inspect{top:134px}
.ed-inspect,.item{border-radius:16px}
.rail button[aria-current="step"] b{background:var(--site-ink);border-color:var(--site-ink)}
.published{background:var(--leaf-tint);border-color:#bfe0b9}
footer{color:var(--site-ink-2)}
.hero-band{background:linear-gradient(180deg,var(--sky) 0%,var(--sky-2) 100%)}
@media (max-width:720px){.bar{height:auto;min-height:60px;padding:8px 12px}.brand{font-size:1.02rem}.brand-mark{width:26px;height:26px}.brand i{display:none}}
body.home{background:linear-gradient(180deg,var(--sky) 0,var(--sky-2) 620px) no-repeat,var(--sky-2)}