:root {
  color-scheme: light;
  --cp-bg: #f7f4ef;
  --cp-bg-elevated: #fcfbf8;
  --cp-surface: #ffffff;
  --cp-surface-soft: #f5f5f5;
  --cp-border: #dedede;
  --cp-border-strong: #919191;
  --cp-text: #242424;
  --cp-text-muted: #5c5c5c;
  --cp-text-soft: #6f6f6f;
  --cp-accent: #b11f4b;
  --cp-accent-hover: #9a1a41;
  --cp-accent-soft: rgba(177, 31, 75, 0.08);
  --cp-accent-fg: #ffffff;
  --cp-success: #16a34a;
  --cp-danger: #dc2626;
  --cp-warning: #f59e0b;
  --cp-link: #0078d4;
  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
  --cp-overlay: rgba(255, 255, 255, 0.8);
  --cp-panel: rgba(255, 255, 255, 0.86);
  --cp-panel-strong: rgba(255, 255, 255, 0.96);
  --cp-sheen: rgba(255, 255, 255, 0.55);
  --cp-highlight: rgba(177, 31, 75, 0.12);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --cp-bg: #3d3b3a;
  --cp-bg-elevated: #343231;
  --cp-surface: #292929;
  --cp-surface-soft: #2e2e2e;
  --cp-border: #474747;
  --cp-border-strong: #5f5f5f;
  --cp-text: #dedede;
  --cp-text-muted: #919191;
  --cp-text-soft: #b0b0b0;
  --cp-accent: #fd8ea1;
  --cp-accent-hover: #fb7b91;
  --cp-accent-soft: rgba(253, 142, 161, 0.14);
  --cp-accent-fg: #1a1a1a;
  --cp-success: #4ade80;
  --cp-danger: #f87171;
  --cp-warning: #fbbf24;
  --cp-link: #4da6ff;
  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  --cp-overlay: rgba(41, 41, 41, 0.88);
  --cp-panel: rgba(41, 41, 41, 0.72);
  --cp-panel-strong: rgba(41, 41, 41, 0.96);
  --cp-sheen: rgba(255, 255, 255, 0.04);
  --cp-highlight: rgba(253, 142, 161, 0.12);
}
*{box-sizing:border-box}
body{margin:0;background:var(--cp-bg);color:var(--cp-text);font:16px/1.65 "Segoe UI",Aptos,Calibri,-apple-system,BlinkMacSystemFont,sans-serif}
header,main,footer{width:min(940px,calc(100% - 40px));margin:auto}
header{padding:28px 0;border-bottom:1px solid var(--cp-border);display:flex;justify-content:space-between;gap:20px;align-items:center}
.brand{font-size:14px;letter-spacing:.08em;font-weight:750;text-decoration:none}
.brand span,.eyebrow{color:var(--cp-accent)}
main{padding:72px 0}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:700}
h1{font-size:clamp(34px,6vw,60px);line-height:1.08;letter-spacing:-.045em;margin:20px 0}
h2{font-size:23px;line-height:1.2}
p{color:var(--cp-text-muted);max-width:680px}
a{color:var(--cp-accent);text-underline-offset:4px}
.button{display:inline-flex;align-items:center;padding:12px 20px;margin:12px 8px 12px 0;border:1px solid var(--cp-accent);border-radius:10px;text-decoration:none;background:var(--cp-accent);color:var(--cp-accent-fg);font-weight:650}
.button:hover{background:var(--cp-accent-hover)}
.secondary{background:var(--cp-surface);color:var(--cp-accent)}
.secondary:hover{background:var(--cp-accent-soft)}
.card{background:var(--cp-surface);border:1px solid var(--cp-border);border-radius:16px;padding:28px;margin:28px 0}
.note{border-left:3px solid var(--cp-accent);background:var(--cp-accent-soft);padding:16px 20px;border-radius:0 10px 10px 0;margin-top:28px}
.steps{padding-left:24px}
.steps li{padding:8px 0 8px 8px}
code{font-family:Consolas,"Courier New",Courier,monospace;overflow-wrap:anywhere;background:var(--cp-surface-soft);padding:2px 5px}
footer{padding:24px 0 40px;border-top:1px solid var(--cp-border);font-size:12px;color:var(--cp-text-soft)}
:focus-visible{outline:3px solid var(--cp-accent);outline-offset:5px}
@media(max-width:600px){header{align-items:start;flex-direction:column;gap:8px}main{padding:40px 0}.card{padding:20px}.button{display:flex;justify-content:center;margin-right:0}}