#pyng-hero{
    --bg:#080C18; --ink:#EAF1FB; --muted:#9FB1CC; --faint:#5E7796; --border:#22324C;
    --indigo:#5B8CFF; --violet:#7C5CFF; --peri:#8C9CFF;
    --grad:linear-gradient(135deg,#5B8CFF,#7C5CFF);
    --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    position:relative; box-sizing:border-box; width:100%; min-height:100svh; margin:0;
    background:var(--bg); color:var(--ink); font-family:var(--font); overflow:hidden; isolation:isolate;
  }
  #pyng-hero *,#pyng-hero *::before,#pyng-hero *::after{ box-sizing:border-box; }
  #pyng-hero .ph-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; cursor:crosshair; }
  #pyng-hero .ph-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(100deg,rgba(6,9,18,.95),rgba(6,9,18,.72) 26%,rgba(6,9,18,.32) 46%,rgba(6,9,18,0) 62%); transition:opacity .6s ease; }
  #pyng-hero .ph-vign{ position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(120% 90% at 50% 54%, rgba(3,5,12,0) 52%, rgba(3,5,12,.5) 100%); }

  #pyng-hero .ph-grid{ position:relative; z-index:2; pointer-events:none; max-width:1280px; margin:0 auto; min-height:100svh; display:flex; align-items:center; padding:clamp(1.25rem,4vw,4rem); }
  #pyng-hero .ph-copy{ max-width:33rem; }
  #pyng-hero .ph-copy a,#pyng-hero .ph-copy button{ pointer-events:auto; }

  #pyng-hero .ph-brand{ display:inline-flex; align-items:center; gap:.55rem; font-weight:750; letter-spacing:-.02em; font-size:1.18rem; margin-bottom:clamp(1.1rem,3vw,1.8rem); }
  #pyng-hero .ph-brand .dot{ position:relative; width:9px; height:9px; border-radius:50%; background:var(--peri); box-shadow:0 0 12px 2px rgba(140,156,255,.85); }
  #pyng-hero .ph-brand .dot::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(140,156,255,.45); animation:ph-ping 2.6s ease-out infinite; }
  @keyframes ph-ping{ 0%{transform:scale(.6);opacity:.85} 100%{transform:scale(2.6);opacity:0} }

  #pyng-hero .ph-eyebrow{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--peri); background:rgba(140,156,255,.09); border:1px solid rgba(140,156,255,.22); padding:.34rem .64rem; border-radius:999px; margin-bottom:1.1rem; }
  #pyng-hero h1{ font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.05; letter-spacing:-.025em; font-weight:800; margin:0 0 1rem; }
  #pyng-hero h1 .grad{ color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text; }
  #pyng-hero .ph-sub{ font-size:clamp(1rem,1.6vw,1.15rem); line-height:1.6; color:var(--muted); margin:0 0 1.6rem; max-width:32rem; }
  #pyng-hero .ph-sub strong{ color:var(--ink); font-weight:600; }

  #pyng-hero .ph-cta{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
  #pyng-hero .ph-btn{ display:inline-flex; align-items:center; gap:.5rem; font:inherit; font-weight:650; font-size:.96rem; text-decoration:none; cursor:pointer; padding:.82rem 1.3rem; border-radius:.7rem; border:1px solid transparent; transition:transform .15s ease, box-shadow .2s ease, border-color .2s; }
  #pyng-hero .ph-btn--primary{ color:#f7faff; background:var(--grad); box-shadow:0 10px 28px -10px rgba(91,140,255,.8); }
  #pyng-hero .ph-btn--primary:hover{ transform:translateY(-1px); }
  #pyng-hero .ph-btn--ghost{ color:var(--ink); border-color:var(--border); background:rgba(255,255,255,.02); }
  #pyng-hero .ph-btn--ghost:hover{ border-color:rgba(140,156,255,.45); background:rgba(140,156,255,.06); }
  #pyng-hero .ph-btn:focus-visible{ outline:2px solid var(--peri); outline-offset:3px; }

  #pyng-hero .ph-legend{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; padding:0; margin:1.7rem 0 0; }
  #pyng-hero .ph-legend button{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font:inherit; font-size:.8rem; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--border); padding:.38rem .68rem; border-radius:999px; transition:border-color .2s,color .2s; }
  #pyng-hero .ph-legend button:hover{ color:var(--ink); border-color:rgba(140,156,255,.4); }
  #pyng-hero .ph-legend button:focus-visible{ outline:2px solid var(--peri); outline-offset:2px; }
  #pyng-hero .ph-legend .dot{ border-radius:50%; flex:0 0 auto; }
  #pyng-hero .ph-legend .s-hot{ width:14px;height:14px; background:radial-gradient(circle at 40% 35%,#ffd27a,#ff7a2f); box-shadow:0 0 10px 1px rgba(255,150,60,.85); }
  #pyng-hero .ph-legend .s-mgr{ width:11px;height:11px; background:radial-gradient(circle at 40% 35%,#9defe6,#27b6a6); }
  #pyng-hero .ph-legend .s-cold{ width:8px;height:8px; background:radial-gradient(circle at 40% 35%,#9fb6ff,#5b74c9); }
  #pyng-hero .ph-hint{ margin:.85rem 0 0; font-size:.77rem; color:rgba(159,177,204,.72); }

  #pyng-hero .ph-replay{ position:absolute; z-index:4; left:clamp(1rem,4vw,4rem); bottom:clamp(1rem,3vw,1.6rem); pointer-events:auto; font:inherit; font-size:.79rem; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.03); border:1px solid var(--border); padding:.42rem .72rem; border-radius:999px; transition:color .2s,border-color .2s; }
  #pyng-hero .ph-share{ position:absolute; z-index:4; right:clamp(1rem,4vw,4rem); bottom:clamp(1rem,3vw,1.6rem); pointer-events:none; opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; font:inherit; font-weight:650; font-size:.82rem; color:#fff; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; background:linear-gradient(135deg,#5B8CFF,#7C5CFF); border:0; padding:.5rem 1.05rem; border-radius:999px; box-shadow:0 10px 28px -10px rgba(124,92,255,.85); }
  #pyng-hero .ph-share.on{ opacity:1; transform:none; pointer-events:auto; }
  #pyng-hero .ph-share:hover{ transform:translateY(-1px); }
  #pyng-hero .ph-replay:hover{ color:var(--ink); border-color:rgba(140,156,255,.4); }

  /* day / night toggle */
  #pyng-hero .ph-toggle{ position:absolute; z-index:4; top:clamp(1rem,3vw,1.6rem); right:clamp(1rem,3vw,1.6rem); pointer-events:auto; cursor:pointer; width:60px; height:30px; border-radius:999px; border:1px solid var(--border); background:rgba(12,18,30,.7); padding:3px; display:flex; align-items:center; transition:background .4s; backdrop-filter:blur(6px); }
  #pyng-hero .ph-toggle .knob{ width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 38% 34%,#fff,#c9d4ea); display:grid; place-items:center; font-size:13px; transition:transform .4s cubic-bezier(.34,1.4,.5,1); transform:translateX(0); }
  #pyng-hero .ph-toggle[data-theme="day"]{ background:rgba(120,170,230,.35); }
  #pyng-hero .ph-toggle[data-theme="day"] .knob{ transform:translateX(30px); background:radial-gradient(circle at 38% 34%,#fff6d8,#ffcf6b); }
  #pyng-hero .ph-toggle:focus-visible{ outline:2px solid var(--peri); outline-offset:2px; }

  #pyng-hero .ph-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  @media (max-width:780px){
    #pyng-hero .ph-grid{ align-items:flex-start; padding-top:clamp(1.5rem,8vw,3rem); padding-bottom:52vh; }
    #pyng-hero .ph-scrim{ background:linear-gradient(180deg,var(--bg) 6%,rgba(6,9,18,.5) 36%,rgba(6,9,18,0) 64%); }
    #pyng-hero .ph-replay{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){ #pyng-hero .ph-brand .dot::after{ animation:none; } }


  #pyng-hero .ph-signup{ pointer-events:auto; margin:0 0 1.05rem; max-width:31rem; }
  #pyng-hero .ph-signup-fields{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.65rem; align-items:center; }
  #pyng-hero .ph-signup-input{ min-width:0; height:48px; border:1px solid var(--border); border-radius:.7rem; background:rgba(255,255,255,.035); color:var(--ink); padding:0 .95rem; outline:none; font:inherit; font-size:.94rem; }
  #pyng-hero .ph-signup-input::placeholder{ color:rgba(159,177,204,.72); }
  #pyng-hero .ph-signup-input:focus{ border-color:rgba(140,156,255,.58); box-shadow:0 0 0 3px rgba(140,156,255,.18); }
  #pyng-hero .ph-signup-status{ min-height:1.35rem; margin:.55rem 0 0; color:var(--muted); font-size:.78rem; font-weight:650; }
  #pyng-hero .ph-signup-status.signup-status-success{ color:#b8ffe9; }
  #pyng-hero .ph-signup-status.signup-status-error{ color:#ffe0aa; }
  #pyng-hero .ph-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  @media (max-width:560px){ #pyng-hero .ph-signup-fields{ grid-template-columns:1fr; } #pyng-hero .ph-signup .ph-btn{ justify-content:center; } }