:root{color-scheme:light;--background-color:#fff;--text-primary-color:#18343b;--text-secondary-color:#405d65;--palette-neutral-20:#b8c9cc}*{box-sizing:border-box}body{margin:0;background:#f4f8f7;color:#18343b;font:17px/1.6 system-ui,sans-serif}main{max-width:1060px;margin:auto;padding:40px 24px}a{color:#076474;text-underline-offset:3px}h1{font-size:clamp(32px,5vw,52px);line-height:1.1;max-width:780px}h2{line-height:1.25}.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#456b73}.demo-notice{padding:16px 20px;background:#e4f4ee;border:1px solid #85b7a3;border-radius:10px}.sample{padding:24px;border:1px solid #b8c9cc;background:white;border-radius:14px;margin:28px 0;box-shadow:0 8px 25px #18343b0b}.sample header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.sample h2{margin-top:0}.sample li{padding:9px 0;border-bottom:1px solid #e1eaeb}a:focus-visible,summary:focus-visible{outline:3px solid #006b83;outline-offset:4px}@media(forced-colors:active){.sample,.demo-notice{background:Canvas;color:CanvasText;border-color:CanvasText}}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--background-color:#152d33;--text-primary-color:#e1eff1;--text-secondary-color:#bdd2d7;--palette-neutral-20:#54747c}body{background:#0e2025;color:#e1eff1}a{color:#8fd9e3}.eyebrow{color:#a1c3cc}.sample{background:#152d33;border-color:#54747c}.demo-notice{background:#183a34;border-color:#5b9a83}.sample li{border-color:#38575e}}