/* ============================================================
     TOKENS  (identical to spatially_aware_1.html)
     ============================================================ */
  :root{
    --bg:#FFFFFF; --ink:#293132; --ink2:#4A5152; --muted:#8A9192; --border:#E8E8E9;
    --accent:#FF533D; --accent2:#06FFB9; --accent2-ink:#04B080; --green:#06FFB9;
    --muted-dark:#4A5152; --dim-dark:#9AA1A2; --map-bg:#1A2020;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
    --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  em{font-style:italic;}
  ::selection{background:var(--accent);color:#fff;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

  /* THEME  ->  .pt-light / .pt-dark on the section */
  .pt-light{--pt-bg:var(--bg);   --pt-fg:var(--ink); --pt-fg2:var(--ink2);    --pt-dim:var(--muted);    --pt-line:var(--border);}
  .pt-dark {--pt-bg:var(--ink);  --pt-fg:var(--bg);  --pt-fg2:var(--dim-dark); --pt-dim:var(--dim-dark); --pt-line:var(--muted-dark);}

  /* --pt-w is the single content-width knob. Change it to match your
     site's margins; text, map and screenshot all follow it together. */
  .pt-case{--pt-w:1200px;background:var(--pt-bg);color:var(--pt-fg);padding:120px 0;}
  .pt-inner,.pt-media{max-width:var(--pt-w);margin:0 auto;padding:0 48px;}

  .pt-eyebrow{font-family:var(--mono);font-size:12px;color:var(--pt-dim);letter-spacing:.15em;margin-bottom:18px;}
  .pt-eyebrow .a{color:var(--accent);}
  .pt-title{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:.95;color:var(--pt-fg);margin:0;font-size:clamp(44px,7vw,84px);}
  .pt-title em{color:var(--accent);font-style:italic;}
  .pt-metastrip{font-family:var(--mono);font-size:12px;color:var(--pt-dim);letter-spacing:.08em;margin-top:24px;display:flex;flex-wrap:wrap;gap:10px 18px;}
  .pt-metastrip .a{color:var(--accent2-ink);}
  .pt-lede{font-family:var(--body);font-size:19px;line-height:1.6;color:var(--pt-fg2);max-width:720px;margin:40px 0 44px;}

  /* ---- figures ---- */
  .pt-fig{position:relative;border-radius:4px;overflow:hidden;background:var(--map-bg);}
  .pt-fig-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .pt-fig-embed{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
  .pt-fig-tag{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:10px;color:#fff;letter-spacing:.1em;padding:5px 9px;border-radius:2px;background:rgba(0,0,0,.42);z-index:2;pointer-events:none;}
  .pt-fig-tag.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle;}

  /* live map: tall responsive frame so its own UI has room */
  .pt-fig.is-live{height:clamp(480px,74vh,860px);}
  /* screenshot: full image, no crop */
  .pt-fig.is-shot{background:var(--map-bg);}
  .pt-fig.is-shot .pt-fig-img{position:static;width:100%;height:auto;object-fit:contain;}

  .pt-media--map{margin-bottom:16px;}
  .pt-media--shot{margin-top:64px;margin-bottom:56px;}
  .pt-figcap{font-family:var(--mono);font-size:11px;color:var(--pt-dim);letter-spacing:.05em;margin-top:12px;}
  .pt-figcap a{color:var(--accent);}
  .pt-figcap a:hover{text-decoration:underline;}

  /* fallback link under the map */
  .pt-fallback{font-family:var(--mono);font-size:11px;color:var(--pt-dim);letter-spacing:.05em;margin:0 0 56px;}
  .pt-fallback a{color:var(--accent);}
  .pt-fallback a:hover{text-decoration:underline;}

  /* stats */
  .pt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:40px 0;border-top:1px solid var(--pt-line);border-bottom:1px solid var(--pt-line);margin-bottom:56px;}
  .pt-stat .n{font-family:var(--display);font-size:clamp(38px,5vw,56px);font-weight:300;line-height:1;color:var(--pt-fg);}
  .pt-stat .l{font-family:var(--mono);font-size:11px;color:var(--pt-dim);margin-top:10px;letter-spacing:.05em;}

  /* body + meta */
  .pt-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:start;margin-bottom:8px;}
  .pt-block{margin-bottom:36px;}
  .pt-block:last-child{margin-bottom:0;}
  .pt-block .k{font-family:var(--mono);font-size:11px;color:var(--accent2-ink);letter-spacing:.12em;margin-bottom:12px;}
  .pt-block p{font-family:var(--body);font-size:16px;line-height:1.65;color:var(--pt-fg2);max-width:520px;}
  .pt-meta{display:flex;flex-direction:column;gap:14px;font-family:var(--mono);font-size:13px;color:var(--pt-fg);}
  .pt-meta .row{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px dashed var(--pt-line);}
  .pt-meta .row:last-child{border-bottom:none;padding-bottom:0;}
  .pt-meta .k{color:var(--pt-dim);}
  .pt-meta .v.a{color:var(--accent);}

  .pt-cta{display:inline-flex;align-items:center;gap:12px;padding:18px 28px;border-radius:4px;font-family:var(--mono);font-size:14px;letter-spacing:.05em;cursor:pointer;border:1px solid transparent;background:var(--accent);color:var(--ink);transition:transform .15s;}
  .pt-cta:hover{transform:translateY(-2px);}

  .pt-back{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--pt-fg);letter-spacing:.05em;text-decoration:none;margin-bottom:36px;padding:11px 18px;border:1.5px solid var(--pt-fg);border-radius:100px;transition:transform .15s,background .2s,color .2s;}
  .pt-back:hover{background:var(--pt-fg);color:var(--pt-bg);transform:translateX(-3px);}

  @media(max-width:1000px){.pt-cols{grid-template-columns:1fr;gap:40px;}}
  @media(max-width:760px){
    .pt-case{padding:72px 0;}
    .pt-inner,.pt-media{padding:0 24px;}
    .pt-stats{grid-template-columns:1fr;gap:20px;}
    .pt-fig.is-live{height:clamp(420px,78vh,640px);}
  }