/* Website-only palette. Never imported by /demos/. */
:root,.teal-site.offering-page{--paper:#17191e;--ink:#f5f1ea;--muted:#bcb9b4;--green:#e7aa73;--line:#45484f;--pale:#22252c;--accent:#e7aa73;--accent-text:#e7aa73;--accent-soft:#35302c;--accent-line:#8d7562;--mint:#e7aa73;color-scheme:dark}
.teal-site .site-header{background:#14161bf5}.teal-site h1 em,.teal-site h2 em{color:#f5f1ea}.teal-site ::selection{background:#e7aa73;color:#221b16}
.teal-site .pdk-global .pdk-zone-label{color:#c3bab1}

/* Homepage preview frames belong to the website; embedded demo documents keep their own theme. */
.teal-site .demo-showcase :is(h1,h2,h3){color:#f5f1ea}
.teal-site .demo-story-meta{color:#bcb9b4}
/* Keep larger surfaces neutral; copper is reserved for accents and boundary cues. */
:root .teal-site .environment-tabs{background:#22252c}
:root .teal-site .tab-list button[aria-selected=true]{background:#333139}
@media(max-width:900px){:root .teal-site #main-nav{background:#22252c}}

/* The design viewport's 20px dot rhythm, scoped to the website backdrop. */
body.teal-site{
  background-color:#17191e;
  background-image:radial-gradient(circle,#bcb9b438 .7px,transparent .9px),radial-gradient(ellipse at 95% 0%,#25272d 0,transparent 42%),linear-gradient(115deg,#17191e,#22252c);
  background-size:20px 20px,100% 100%,100% 100%;
  background-position:0 0,0 0,0 0;
  background-repeat:repeat,no-repeat,no-repeat;
}