:root { color-scheme: light; --example-canvas: #f5ecd9; --example-surface: #fffdf7; --example-soft: #f8efde; --example-ink: #26362c; --example-muted: #526056; --example-border: rgb(38 54 44 / 18%); --example-brand: #9a702c; }
:root[data-theme="cool"] { --example-canvas: #eff6ff; --example-surface: #ffffff; --example-soft: #e7f0fb; --example-ink: #19324b; --example-muted: #4b647c; --example-border: rgb(25 50 75 / 18%); --example-brand: #216ca5; }
:root[data-theme="dark"] { color-scheme: dark; --example-canvas: #17211b; --example-surface: #202d25; --example-soft: #2a382f; --example-ink: #f2efe5; --example-muted: #c3ccc2; --example-border: rgb(242 239 229 / 20%); --example-brand: #e5af56; }
* { box-sizing: border-box; }
body { min-block-size: 100vh; margin: 0; background: radial-gradient(circle at 80% 0, color-mix(in srgb, var(--example-brand) 18%, transparent), transparent 28%), var(--example-canvas); color: var(--example-ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.example-header, .example-main { max-inline-size: 76rem; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 3rem); }.example-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-block-end: 1px solid var(--example-border); }.example-brand { color: inherit; font-weight: 800; text-decoration: none; }.example-brand small { display: block; color: var(--example-muted); font-size: .72rem; font-weight: 600; }.theme-control { display: flex; align-items: center; gap: .6rem; color: var(--example-muted); font-size: .85rem; }.theme-control select { padding: .45rem .6rem; border: 1px solid var(--example-border); border-radius: .4rem; background: var(--example-surface); color: inherit; font: inherit; }.example-main { padding-block: clamp(1.5rem, 5vw, 4rem); }.example-intro { max-inline-size: 48rem; margin-block-end: 1.5rem; }.eyebrow { margin: 0 0 .4rem; color: var(--example-brand); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.example-intro h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -.035em; }.example-intro p:last-child { color: var(--example-muted); line-height: 1.55; }.example-app { overflow: hidden; border: 1px solid var(--example-border); border-radius: .85rem; background: var(--example-surface); box-shadow: 0 12px 36px rgb(0 0 0 / .1); }.example-app > * { padding: 1.25rem; }.example-app > * + * { border-block-start: 1px solid var(--example-border); }.example-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; background: var(--example-soft); }.example-toolbar > :first-child { flex: 1 1 14rem; }.example-columns { display: grid; grid-template-columns: minmax(15rem, .75fr) minmax(0, 1.25fr); gap: 1.25rem; }.example-panel { min-inline-size: 0; }.example-panel h2 { margin: 0 0 .8rem; font-size: 1rem; }.example-panel > * + * { margin-block-start: 1rem; }.example-footer { display: grid; grid-template-columns: 1fr auto minmax(16rem, 1fr); gap: 1rem; align-items: center; background: var(--example-soft); }.example-footer p { margin: 0; color: var(--example-muted); font-size: .88rem; line-height: 1.45; }.example-settings { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; }.example-settings > * { min-inline-size: 12rem; flex: 1 1 12rem; }.example-settings wa-button { min-inline-size: auto; flex: 0 0 auto; }.example-callout { padding: .9rem 1rem; border-inline-start: .25rem solid var(--example-brand); background: var(--example-soft); color: var(--example-muted); font-size: .9rem; line-height: 1.5; }.example-details { padding: 1rem; background: var(--example-soft); }.example-details summary { cursor: pointer; font-weight: 700; }.example-details > * + * { margin-block-start: 1rem; }
@media (max-width: 44rem) { .example-header { align-items: flex-start; flex-direction: column; }.example-columns, .example-footer { grid-template-columns: 1fr; } }