:root{
    --mono:'IBM Plex Mono',monospace;
    --disp:'Space Grotesk',sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:
      linear-gradient(var(--grid) 1px, transparent 1px) 0 0/32px 32px,
      linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/32px 32px,
      var(--bg);
    color:var(--ink); font-family:var(--mono); min-height:100vh;
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  .wrap{max-width:720px; width:100%;}
  .brand-eyebrow{font-size:11px;letter-spacing:.14em;color:var(--line);text-transform:uppercase;text-align:center;}
  h1{font-family:var(--disp);font-weight:700;font-size:24px;margin:6px 0 4px;text-align:center;}
  .tagline{font-size:12.5px;color:var(--ink-dim);text-align:center;margin:0 0 14px;}
  .fidelity-note{font-size:10.5px;color:var(--ink-dim);text-align:center;margin:0 0 16px;font-style:italic;}

  .topics-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:16px; }
  .topic-chip{ font-size:10px; color:var(--line); border:1px solid var(--line-dim); border-radius:10px; padding:3px 9px; letter-spacing:.02em; background:var(--panel-2); }

  .frame{position:relative;background:var(--panel);border:1px solid var(--line-dim);border-radius:3px;padding:16px;}
  .frame::before,.frame::after,.tick-bl,.tick-br{content:"";position:absolute;width:12px;height:12px;border-color:var(--line);border-style:solid;}
  .frame::before{top:-1px;left:-1px;border-width:2px 0 0 2px;}
  .frame::after{top:-1px;right:-1px;border-width:2px 2px 0 0;}
  .tick-bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px;}
  .tick-br{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}

  #scene{ display:block; width:100%; height:auto; image-rendering:pixelated; image-rendering:crisp-edges; background:var(--bg); border:1px solid var(--line-dim); border-radius:2px; cursor:pointer; }

  .tooltip{
    position:fixed; pointer-events:none; background:var(--panel-2); border:1px solid var(--line);
    color:var(--ink); font-family:var(--mono); font-size:12px; padding:6px 12px; border-radius:4px;
    display:none; z-index:50; white-space:nowrap;
  }
  .tooltip.show{display:block;}

  .event-line{ min-height:20px; text-align:center; font-size:12px; color:var(--drill); font-style:italic; margin:14px 0 4px; }
  .stats-row{ display:flex; justify-content:space-between; margin-top:10px; }
  .stat-label{ font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.06em; }
  .stat-value{ font-family:var(--disp); font-weight:700; font-size:20px; color:var(--ok); }

  .win-overlay{
    position:absolute; inset:0; background:rgba(11,30,51,0.97); border-radius:3px;
    display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; z-index:10;
  }
  .win-overlay.show{display:flex;}
  .win-title{font-family:var(--disp);font-weight:700;font-size:20px;margin-bottom:10px;color:var(--ok);}
  .win-text{font-size:12.5px;color:var(--ink-dim);font-style:italic;margin-bottom:20px;max-width:380px;}
  .win-btn{background:var(--line);color:#04141F;border:none;font-family:var(--disp);font-weight:700;font-size:14px;padding:12px 26px;border-radius:6px;cursor:pointer;}
  .hint{font-size:11px;color:var(--ink-dim);text-align:center;margin-top:14px;}