/* OA Animated Shape Library styles extracted from Animated Shape Library.html */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");

  :root{
    --brand: #1eaaff;
    --brand-deep: #0a82d3;
    --brand-soft: #cfeaf9;
    --brand-tint: rgba(30,170,255,.10);

    --bg: #ffffff;
    --bg-2: #f6f7f9;
    --bg-3: #eef0f3;
    --ink: #0b1220;
    --ink-2: #2a3441;
    --muted: #5b6473;
    --faint: #8a93a2;
    --line: #e6e9ee;
    --line-2: #eef0f3;

    --shape-stroke: rgba(11,18,32,.55);
    --shape-faint: rgba(11,18,32,.18);

    --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
    --font-accent: "Instrument Serif", serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --container: 1280px;
    --pad-x: clamp(20px, 4vw, 56px);
  }
  html.dark{
    --bg: #06080c;
    --bg-2: #0c1117;
    --bg-3: #121821;
    --ink: #f1f5fa;
    --ink-2: #c9d3e0;
    --muted: #8a94a3;
    --faint: #5b6473;
    --line: rgba(255,255,255,.08);
    --line-2: rgba(255,255,255,.05);
    --shape-stroke: rgba(241,245,250,.6);
    --shape-faint: rgba(241,245,250,.18);
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html, body { margin:0; padding:0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
  body{ overflow-x: hidden; }
  a{ color: inherit; text-decoration: none; }
  button{ font-family: inherit; cursor: pointer; }
  img{ display:block; max-width:100%; }
  svg{ display: block; }

  .container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }

  /* Shape wrapper — also the engine's anchor */
  .oa-shape{
    display: inline-flex;
    color: var(--shape-stroke);
    line-height: 0;
  }
  .oa-shape svg{ overflow: visible; }

  /* Reuse aurora + grid backdrops for the header */
  .fx-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; isolation: isolate; }
  .bg-aurora::before, .bg-aurora::after{ content:""; position:absolute; border-radius:50%; filter: blur(80px); will-change: transform; }
  .bg-aurora::before{ width: 60%; height: 80%; background: radial-gradient(closest-side, var(--brand) 0%, transparent 70%); top: -20%; left: -10%; opacity: .5; animation: orbA 22s ease-in-out infinite alternate; }
  .bg-aurora::after{ width: 50%; height: 70%; background: radial-gradient(closest-side, var(--brand-soft) 0%, transparent 70%); bottom: -20%; right: -10%; opacity: .5; animation: orbB 26s ease-in-out infinite alternate; }
  html.dark .bg-aurora::before{ opacity: .35; } html.dark .bg-aurora::after{ opacity: .25; }
  @keyframes orbA{ 0%{transform:translate3d(0,0,0) scale(1);} 100%{transform:translate3d(40px,30px,0) scale(1.08);} }
  @keyframes orbB{ 0%{transform:translate3d(0,0,0) scale(1);} 100%{transform:translate3d(-30px,-25px,0) scale(1.08);} }

  .bg-grid{
    background-image:
      linear-gradient(to right, var(--line-2) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 75%);
  }
  html.dark .bg-grid{ opacity: .55; }

  /* Page header */
  .page-head{
    position: relative; overflow: hidden;
    padding: clamp(64px, 8vw, 120px) 0 clamp(48px, 6vw, 80px);
    border-bottom: 1px solid var(--line);
  }
  .ph-eyebrow{ display:inline-flex; align-items:center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
  .ph-eyebrow::before{ content:""; display:inline-block; width: 18px; height:1px; background: currentColor; opacity:.4; }
  .ph-title{ font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(40px, 6vw, 72px); margin: 22px 0 0; max-width: 16ch; }
  .ph-title .accent{ font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--brand-deep); }
  html.dark .ph-title .accent{ color: var(--brand); }
  .ph-lead{ margin: 22px 0 0; color: var(--ink-2); max-width: 60ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; }
  .ph-meta{ display:flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; align-items: center; }
  .ph-shape-deco{ position: absolute; top: 40%; right: -6%; transform: translateY(-50%); pointer-events: none; opacity: .85; z-index: 0; }
  .ph-shape-deco svg{ width: clamp(280px, 38vw, 520px); height: auto; }

  .pill{ display:inline-flex; align-items:center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--muted); background: var(--bg); }
  .pill .dot{ width: 6px; height: 6px; border-radius:50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
  .pill.brand{ color: var(--brand-deep); border-color: color-mix(in oklab, var(--brand) 25%, var(--line)); background: var(--brand-tint); }
  html.dark .pill.brand{ color: var(--brand); }

  .quick-nav{ position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .qn-row{ display:flex; gap: 6px; padding: 12px 0; overflow-x: auto; align-items: center; }
  .qn-row a{ flex: 0 0 auto; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
  .qn-row a:hover{ background: var(--bg-2); color: var(--ink); }
  .qn-row .num{ font-family: var(--font-mono); font-size: 11px; color: var(--brand-deep); margin-right: 6px; }
  html.dark .qn-row .num{ color: var(--brand); }

  .sec{ padding: clamp(56px, 7vw, 96px) 0; position: relative; }
  .sec + .sec{ border-top: 1px solid var(--line-2); }
  .sec.dark-strip{ background: var(--bg-2); }
  .sec-head{ display:flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
  .sec-head h2{ font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; font-size: clamp(28px, 3vw, 40px); margin: 12px 0 0; }
  .sec-head h2 .accent{ font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--brand-deep); }
  html.dark .sec-head h2 .accent{ color: var(--brand); }
  .sec-head .sub{ color: var(--muted); margin: 8px 0 0; max-width: 56ch; }
  .sec-head .count{ font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

  /* Catalog grid */
  .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
  .shape-card{
    grid-column: span 3;
    background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
    overflow: hidden; display:flex; flex-direction:column;
    transition: border-color .2s, transform .2s;
  }
  .shape-card:hover{ border-color: var(--ink-2); }
  .shape-card.span-4{ grid-column: span 4; }
  .shape-card.span-6{ grid-column: span 6; }

  .canvas{
    aspect-ratio: 1.1 / 1;
    background: var(--bg-2);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .canvas.has-dot-grid{ background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1px); background-size: 14px 14px; background-position: center; background-color: var(--bg-2); }
  html.dark .canvas.has-dot-grid{ background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px); }
  .canvas.dark-canvas{ background: #06080c; color: rgba(241,245,250,.6); --shape-stroke: rgba(241,245,250,.6); --shape-faint: rgba(241,245,250,.18); }
  .canvas .crosshatch{ position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(to right, var(--line-2) 1px, transparent 1px), linear-gradient(to bottom, var(--line-2) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%); opacity: .5; }
  html.dark .canvas .crosshatch{ opacity: .35; }

  .meta{ padding: 14px 16px 16px; border-top: 1px solid var(--line); display:flex; justify-content:space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
  .meta .nm{ font-weight: 600; font-size: 13.5px; }
  .meta .nm em{ font-style: normal; color: var(--muted); font-weight: 400; font-size: 12.5px; }
  .meta .tag{ font-family: var(--font-mono); font-size: 10.5px; color: var(--brand-deep); background: var(--brand-tint); padding: 3px 7px; border-radius: 6px; }
  html.dark .meta .tag{ color: var(--brand); }
  .meta .copy{
    display:inline-flex; align-items:center; gap: 6px;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line);
    padding: 4px 9px; border-radius: 6px; cursor: pointer;
    transition: border-color .15s, color .15s;
  }
  .meta .copy:hover{ color: var(--ink); border-color: var(--ink-2); }
  .meta .copy.done{ color: var(--brand-deep); border-color: var(--brand); }

  @media (max-width: 1100px){
    .shape-card{ grid-column: span 4; }
    .shape-card.span-4, .shape-card.span-6{ grid-column: span 6; }
  }
  @media (max-width: 700px){ .shape-card, .shape-card.span-4, .shape-card.span-6{ grid-column: span 12; } }

  /* ── Section contexts (the meat) ─────────────────────────── */

  /* Demo · hero with shape backdrop */
  .demo-hero{
    position: relative; overflow: hidden;
    background: var(--bg-2);
    border-radius: 24px;
    border: 1px solid var(--line);
    padding: clamp(48px, 6vw, 96px) clamp(28px, 4vw, 56px);
    min-height: 360px;
  }
  .demo-hero .deco{
    position: absolute; pointer-events: none;
    color: var(--shape-stroke);
  }
  .demo-hero .deco-1{ top: -10%; right: -8%; width: 480px; opacity: .5; }
  .demo-hero .deco-2{ bottom: -14%; left: -6%; width: 260px; opacity: .35; }
  .demo-hero h3{ font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; font-size: clamp(34px, 4.5vw, 56px); margin: 0; max-width: 18ch; }
  .demo-hero h3 .accent{ font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--brand-deep); }
  html.dark .demo-hero h3 .accent{ color: var(--brand); }
  .demo-hero p{ margin: 18px 0 0; color: var(--ink-2); max-width: 56ch; font-size: 17px; line-height: 1.55; }
  .demo-hero .ctas{ display:flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
  .demo-hero .btn{ display:inline-flex; align-items:center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 14px; border: 1px solid transparent; }
  .demo-hero .btn.primary{ background: var(--ink); color: var(--bg); }
  html.dark .demo-hero .btn.primary{ background: var(--brand); color: #07090d; }
  .demo-hero .btn.ghost{ border-color: var(--line); color: var(--ink); }

  /* Demo · divider strip */
  .demo-divider{
    position: relative; padding: 56px 0;
    display: flex; align-items: center; justify-content: center; gap: 24px;
  }
  .demo-divider::before, .demo-divider::after{ content:""; flex: 1; height: 1px; background: var(--line); }
  .demo-divider .label{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

  /* Demo · stat with shape behind */
  .demo-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .stat-card{
    position: relative; overflow: hidden;
    background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
    padding: 32px 28px; min-height: 200px;
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  .stat-card .deco{
    position: absolute; pointer-events: none;
    top: -20%; right: -20%; width: 70%; opacity: .35;
    color: var(--shape-stroke);
  }
  .stat-card .v{ font-weight: 700; font-size: 44px; letter-spacing: -0.03em; line-height: 1; position: relative; z-index: 1; }
  .stat-card .k{ font-size: 13px; color: var(--muted); margin-top: 6px; position: relative; z-index: 1; }
  @media (max-width: 820px){ .demo-stats{ grid-template-columns: 1fr; } }

  /* Demo · ornament behind CTA */
  .demo-cta{
    position: relative; overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
    border: 1px solid var(--line);
    padding: clamp(40px, 6vw, 80px);
  }
  html.dark .demo-cta{ background: linear-gradient(180deg, var(--bg-2), #0a1018); }
  .demo-cta .deco{ position: absolute; pointer-events: none; color: var(--shape-stroke); }
  .demo-cta .deco-1{ top: 50%; right: 6%; transform: translateY(-50%); width: 200px; opacity: .35; }
  .demo-cta .deco-2{ bottom: -18%; left: -4%; width: 240px; opacity: .25; }
  .demo-cta h3{ font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; font-size: clamp(28px, 3vw, 40px); margin: 0; max-width: 18ch; }
  .demo-cta p{ margin: 16px 0 0; color: var(--ink-2); max-width: 52ch; }

  /* Demo · scrub strip (large parallax shape) */
  .demo-scrub{
    position: relative; min-height: 100vh;
    background: var(--bg-2);
    border-radius: 24px;
    border: 1px solid var(--line);
    overflow: hidden;
    padding: 80px clamp(28px, 4vw, 56px);
    display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px;
  }
  .demo-scrub .scrub-shape{ position: relative; display: flex; align-items: center; justify-content: center; }
  .demo-scrub .scrub-shape svg{ width: min(80%, 460px); height: auto; color: var(--shape-stroke); }
  .demo-scrub h3{ font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; font-size: clamp(34px, 4vw, 52px); margin: 0; max-width: 14ch; }
  .demo-scrub h3 .accent{ font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--brand-deep); }
  html.dark .demo-scrub h3 .accent{ color: var(--brand); }
  .demo-scrub p{ margin: 18px 0 0; color: var(--ink-2); max-width: 50ch; font-size: 17px; line-height: 1.55; }
  @media (max-width: 900px){ .demo-scrub{ grid-template-columns: 1fr; min-height: auto; } }

  /* WordPress snippets section */
  .wp{
    background: var(--bg-2);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .wp-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: flex-start; }
  .wp-text h3{ font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; font-size: clamp(24px, 2.4vw, 32px); margin: 12px 0 0; }
  .wp-text ol{ margin: 22px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
  .wp-text ol li + li{ margin-top: 8px; }
  .wp-text code{ font-family: var(--font-mono); font-size: 12.5px; padding: 2px 6px; border-radius: 5px; background: var(--bg-3); }
  html.dark .wp-text code{ background: rgba(255,255,255,.06); }
  .wp-snip{
    background: var(--bg);
    border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden;
  }
  html.dark .wp-snip{ background: #06080c; }
  .wp-snip .ch{ display:flex; align-items:center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .wp-snip .ch .dots{ display:flex; gap: 5px; }
  .wp-snip .ch .dots i{ width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  .wp-snip .ch .dots i:nth-child(1){ background: #ff5f57; }
  .wp-snip .ch .dots i:nth-child(2){ background: #febc2e; }
  .wp-snip .ch .dots i:nth-child(3){ background: #28c840; }
  .wp-snip .ch .tab{ font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
  .wp-snip .ch .copy-all{ margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 6px; cursor: pointer; }
  .wp-snip pre{ margin: 0; padding: 16px 18px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--ink-2); overflow-x: auto; }
  .wp-snip .k{ color: var(--brand-deep); }
  html.dark .wp-snip .k{ color: var(--brand); }
  .wp-snip .s{ color: #10b981; }
  .wp-snip .c{ color: var(--faint); }
  .wp-snip .a{ color: #b45309; }
  html.dark .wp-snip .a{ color: #fbbf24; }
  @media (max-width: 900px){ .wp-grid{ grid-template-columns: 1fr; } }

  /* Toast */
  .toast{
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%);
    background: var(--ink); color: var(--bg);
    padding: 12px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 500;
    box-shadow: 0 18px 40px -10px rgba(13,20,32,.4);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    z-index: 100;
    pointer-events: none;
  }
  .toast.show{ transform: translateX(-50%) translateY(0); }

  /* Footer */
  .pf{ padding: 48px 0 36px; border-top: 1px solid var(--line); background: var(--bg-2); }
  .pf-row{ display:flex; justify-content:space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
  .pf .brand{ display:flex; align-items: center; gap: 10px; font-weight: 700; }
  .pf-small{ color: var(--muted); font-size: 13px; }
  .pf-small .accent{ font-family: var(--font-accent); font-style: italic; color: var(--brand-deep); }
  html.dark .pf-small .accent{ color: var(--brand); }

  @media (prefers-reduced-motion: reduce){
    .bg-aurora::before, .bg-aurora::after{ animation: none !important; }
  }