/* Palette tokens apply only inside the example site. */
html.demo-palette-page{--paper:#f7f5ef;--white:#fffefa;--ink:#192638;--muted:#505c69;--mint:#d4e2f5;--mint-light:#e8eff9;--teal:#2453a2;--line:#cbd4df;--demo-chrome:#e9f0fb;--demo-ink-soft:#273e62;--demo-accent-hover:#c4d7f1;--demo-art-base:#ece7de;--demo-section:#eaf0f7;--demo-section-line:#d5e0eb;--demo-line-strong:#8191a3;--demo-accent:#2453a2;--demo-shadow-sm:#14294513;--demo-shadow-md:#14294525;--demo-shadow-lg:#14294540;--demo-mobile-backdrop:#f7f5eff5;--demo-art-warm:#d8a677;--demo-art-warm-light:#f1dbbf;--demo-art-mid:#9eb7d7;--demo-art-deep:#273e62;--demo-proof-bg:#f4ede4;--demo-offer-bg:#e8eef7;--demo-field-bg:#f8f9fc;--demo-summary-bg:#e7effa;--demo-success-bg:#dce9f8;--demo-highlight:#dce9f8;--demo-ring:#2453a255;--demo-error:#9f3224;--demo-error-bg:#fff5f2}
html.demo-palette-page[data-demo-palette=sand]{--paper:#f6f0e7;--white:#fffdf8;--ink:#30251f;--muted:#5e5148;--mint:#ebc8b5;--mint-light:#f7e9df;--teal:#914229;--line:#dac7b8;--demo-chrome:#f3e9dc;--demo-ink-soft:#52352c;--demo-accent-hover:#dfb29c;--demo-art-base:#e9d8c4;--demo-section:#eee2d5;--demo-section-line:#dfc9b6;--demo-line-strong:#a8896e;--demo-accent:#914229;--demo-shadow-sm:#41281913;--demo-shadow-md:#41281925;--demo-shadow-lg:#41281940;--demo-mobile-backdrop:#f6f0e7f5;--demo-art-warm:#c87350;--demo-art-warm-light:#f2d6ad;--demo-art-mid:#bd9b79;--demo-art-deep:#52352c;--demo-proof-bg:#f3e6d8;--demo-offer-bg:#f7eadc;--demo-field-bg:#fcf7f1;--demo-summary-bg:#f6e7da;--demo-success-bg:#efddc9;--demo-highlight:#f6e7da;--demo-ring:#91422955;--demo-error:#9f3224;--demo-error-bg:#fff5f2}
html.demo-palette-page[data-demo-palette=slate]{--paper:#f2f2f5;--white:#fffefe;--ink:#292832;--muted:#55545f;--mint:#dfd7eb;--mint-light:#f0ecf5;--teal:#604b83;--line:#d2ceda;--demo-chrome:#eceaf2;--demo-ink-soft:#464058;--demo-accent-hover:#d1c5e0;--demo-art-base:#e5e3e8;--demo-section:#e9e8ee;--demo-section-line:#d8d5de;--demo-line-strong:#948b9f;--demo-accent:#604b83;--demo-shadow-sm:#28233713;--demo-shadow-md:#28233725;--demo-shadow-lg:#28233740;--demo-mobile-backdrop:#f2f2f5f5;--demo-art-warm:#baa5c5;--demo-art-warm-light:#e6d9e4;--demo-art-mid:#a2a8b6;--demo-art-deep:#464058;--demo-proof-bg:#f0eaf0;--demo-offer-bg:#ebeaf1;--demo-field-bg:#faf9fb;--demo-summary-bg:#efebf4;--demo-success-bg:#e7dfef;--demo-highlight:#e7dfef;--demo-ring:#604b8355;--demo-error:#9f3224;--demo-error-bg:#fff5f2}
html.demo-palette-page::view-transition-old(root),html.demo-palette-page::view-transition-new(root){animation-duration:480ms;animation-timing-function:ease-in-out}
@media(prefers-reduced-motion:reduce){html.demo-palette-page::view-transition-old(root),html.demo-palette-page::view-transition-new(root){animation-duration:0s}}

html.demo-palette-page .button:not(.button-primary){box-shadow:inset 0 0 0 1.5px var(--teal)}
html.demo-palette-page .detail-tabs button.active{box-shadow:inset 0 0 0 1.5px var(--teal)}
/* A single motion control belongs to the browser chrome, never to a palette. */
.demo-motion-control{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;margin-left:auto;padding:0;border:0;border-radius:0;background:transparent;color:#315bc1;cursor:pointer}
.demo-motion-control:hover{background:#e9f0ff;border-color:#315bc1}
.demo-motion-control:active{background:#dce6f6}
.demo-motion-control:focus-visible{outline:2px solid #315bc1;outline-offset:-4px}
.demo-motion-control[hidden]{display:none}
.demo-motion-control svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.demo-motion-control svg path[d^="m8"]{fill:currentColor;stroke:none}
html.demo-palette-page .header .demo-motion-control{margin-left:auto;margin-right:4px;border-color:var(--line);background:transparent;color:var(--teal)}
html.demo-palette-page .header .demo-motion-control:hover{background:var(--mint-light);border-color:var(--teal)}
html.demo-palette-page .header .demo-motion-control:focus-visible{outline-color:var(--teal)}
@media(max-width:700px){html.demo-palette-page .header .demo-motion-control{margin-left:auto;margin-right:0}}
html.demo-palette-page .closing{justify-content:center}
html.demo-palette-page .closing>div{width:100%;max-width:820px}