:root {
  color-scheme: light dark;
  --pg-page:#edf3f7; --pg-surface:#fff; --pg-soft:#f5f8fb; --pg-ink:#0c1b2a;
  --pg-muted:#52687b; --pg-line:#c9d8e4; --pg-accent:#0f8f83; --pg-accent-soft:color-mix(in srgb,var(--pg-accent) 13%,var(--pg-surface));
  --pg-shadow:0 16px 36px rgba(15,35,54,.10);
}
body[data-platform="shopify"] { --pg-accent:#6f9f43; }
body[data-platform="wordpress"] { --pg-accent:#16749a; }
body[data-platform="wix"] { --pg-accent:#087ca8; }
body[data-platform="squarespace"] { --pg-accent:#78716c; }
body[data-platform="webflow"] { --pg-accent:#287fd8; }
body[data-platform="generic"] { --pg-accent:#0f8f83; }
[data-theme="dark"] {
  --pg-page:#07111f; --pg-surface:#0f1d30; --pg-soft:#13243a; --pg-ink:#f4f8fb;
  --pg-muted:#b9cad8; --pg-line:#2b465e; --pg-accent-soft:color-mix(in srgb,var(--pg-accent) 16%,var(--pg-surface)); --pg-shadow:0 18px 40px rgba(0,0,0,.24);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--pg-ink); background:var(--pg-page);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.7;
}
a:focus-visible,button:focus-visible { outline:3px solid color-mix(in srgb,var(--pg-accent) 50%,transparent); outline-offset:3px; }
header {
  min-height:350px; display:grid; align-content:center; padding:70px max(24px,calc((100vw - 980px)/2));
  text-align:left; color:#f8fbff;
  background:linear-gradient(110deg,color-mix(in srgb,var(--pg-accent) 24%,transparent),transparent 52%),#0b192a;
  border-bottom:1px solid #26475c;
}
header::before { content:"PLATFORM EMBED GUIDE"; color:#8ff3e8; font-size:.75rem; font-weight:850; letter-spacing:.12em; }
header h1 { margin:10px 0 10px; color:#fff; font-size:clamp(2.1rem,5vw,4rem); line-height:1.04; }
header p { max-width:680px; margin:0; color:#c5d6e4; font-size:1.08rem; }
.platform-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.platform-hero-actions a {
  min-height:42px; display:inline-flex; align-items:center; padding:9px 16px; color:#fff;
  background:var(--pg-accent); border:1px solid color-mix(in srgb,var(--pg-accent) 70%,white);
  border-radius:6px; font-weight:750; text-decoration:none;
}
.platform-hero-actions a:last-child { color:#eaf4fb; background:#15283d; border-color:#416078; }
nav {
  position:sticky; top:0; z-index:20; padding:0; color:var(--pg-ink);
  background:color-mix(in srgb,var(--pg-surface) 94%,transparent); border-bottom:1px solid var(--pg-line);
  backdrop-filter:blur(14px);
}
.platform-nav-inner {
  width:min(1060px,calc(100% - 28px)); min-height:62px; display:flex; align-items:center; gap:14px; margin:0 auto;
}
nav a,.platform-theme-toggle {
  display:inline-flex; align-items:center; min-height:38px; padding:8px 12px; color:var(--pg-muted);
  background:transparent; border:1px solid transparent; border-radius:6px; font:inherit;
  font-size:.84rem; font-weight:750; text-decoration:none; cursor:pointer;
}
nav a:hover,.platform-theme-toggle:hover { color:var(--pg-ink); background:var(--pg-soft); border-color:var(--pg-line); }
.platform-nav-label { color:var(--pg-muted); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.platform-nav-actions { display:flex; align-items:center; gap:4px; margin-left:auto; }
.platform-theme-toggle { border-color:var(--pg-line); color:var(--pg-accent); }
.container { max-width:980px; margin:0 auto; padding:48px 24px 20px; }
h2 {
  display:flex; align-items:center; gap:12px; margin:42px 0 18px; padding:0 0 12px;
  color:var(--pg-ink); border-bottom:1px solid var(--pg-line); font-size:clamp(1.4rem,3vw,1.8rem);
}
h2::before { content:""; width:7px; height:25px; background:var(--pg-accent); border-radius:3px; }
h3 { margin:28px 0 10px; color:var(--pg-ink); font-size:1.08rem; }
p,ul,ol { color:var(--pg-muted); }
strong { color:var(--pg-ink); }
code {
  color:var(--pg-accent); background:var(--pg-soft); border:1px solid var(--pg-line);
  border-radius:4px; padding:2px 7px;
}
pre {
  padding:18px; overflow:auto; color:#eaf3fb; background:#081625; border:1px solid #36516b;
  border-radius:7px; box-shadow:0 12px 26px rgba(0,0,0,.14);
}
pre code { color:#eaf3fb; background:transparent; border:0; padding:0; }
.step {
  position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; margin:12px 0;
  padding:20px; color:var(--pg-ink); background:var(--pg-surface); border:1px solid var(--pg-line);
  border-radius:8px; box-shadow:0 7px 18px rgba(15,35,54,.04);
}
.step-num {
  min-width:38px; width:38px; height:38px; color:#fff; background:var(--pg-accent);
  border-radius:7px; font-weight:850;
}
.step-body h4 { margin:0 0 5px; color:var(--pg-ink); font-size:1rem; }
.step-body p { margin:0; color:var(--pg-muted); }
.info,.warning {
  margin:24px 0; padding:18px 20px; color:var(--pg-muted); background:var(--pg-accent-soft);
  border:1px solid color-mix(in srgb,var(--pg-accent) 35%,var(--pg-line)); border-left:4px solid var(--pg-accent);
  border-radius:7px;
}
.info strong,.warning strong { color:var(--pg-ink); }
footer { margin-top:60px; padding:34px 24px; text-align:center; background:#0b192a; border-top:1px solid #26475c; }
footer p { margin:0; color:#a9bdcc; }
footer a { color:#67e8f9; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --pg-page:#07111f; --pg-surface:#0f1d30; --pg-soft:#13243a; --pg-ink:#f4f8fb;
    --pg-muted:#b9cad8; --pg-line:#2b465e; --pg-accent-soft:#15343b; --pg-shadow:0 18px 40px rgba(0,0,0,.24);
  }
}
@media (max-width:700px) {
  header { min-height:320px; padding:62px 20px; }
  .platform-nav-inner { overflow-x:auto; }
  .platform-nav-label { display:none; }
  .platform-nav-actions { margin-left:0; }
  .container { padding:32px 14px 16px; }
  .step { grid-template-columns:38px minmax(0,1fr); padding:16px; }
}