*{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;background:#000;color:#fff}
  body{
    font-family:'VT323', ui-monospace, monospace;
    -webkit-font-smoothing:antialiased;
  }

  :root{
    --mono:'IBM Plex Mono', ui-monospace, monospace;
    --pixel:'VT323', monospace;
    --dim:#9a9a9a;
    --dim2:#5e5e5e;
  }

  /* ===== Background video, scoped to hero only ===== */
  .bg{position:absolute;inset:0;z-index:0;background:#000;overflow:hidden}
  .bg video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    /* B&W dither via inline SVG filter, with a CSS fallback */
    filter: contrast(1.15) grayscale(1) url(#dither);
    image-rendering: pixelated;
  }

  /* Subtle CRT scanlines, kept very faint so video stays full-strength */
  .scanlines{
    position:absolute;inset:0;z-index:5;pointer-events:none;
    background:repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.05) 0,
      rgba(255,255,255,0.05) 1px,
      transparent 1px,
      transparent 3px);
    mix-blend-mode:overlay;
  }

  /* ===== Global TV-noise overlay (full site) ===== */
  .tv-noise{
    position:fixed;inset:0;
    z-index:9999;
    pointer-events:none;
    opacity:0.10;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='1.9' numOctaves='1' stitchTiles='stitch' seed='2'/><feComponentTransfer><feFuncR type='discrete' tableValues='0 1'/><feFuncG type='discrete' tableValues='0 1'/><feFuncB type='discrete' tableValues='0 1'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size:220px 220px;
    mix-blend-mode:screen; /* preserves high contrast — only lightens dark areas */
    animation:tv-static 0.45s steps(9) infinite;
  }
  @keyframes tv-static{
    0%   {background-position: 0 0}
    11%  {background-position: -47px 23px}
    22%  {background-position: 91px -64px}
    33%  {background-position: -120px 88px}
    44%  {background-position: 56px -19px}
    55%  {background-position: -82px 100px}
    66%  {background-position: 130px 45px}
    77%  {background-position: -36px -77px}
    88%  {background-position: 78px 134px}
    100% {background-position: 0 0}
  }

  /* Stable social-card capture mode: pure black backdrop, no animated noise */
  html.og-capture .bg video,
  html.og-capture .scanlines,
  html.og-capture .tv-noise{
    display:none !important;
  }
  html.og-capture .hero{
    background:#000;
  }
  html.og-capture *,
  html.og-capture *::before,
  html.og-capture *::after{
    animation:none !important;
    transition:none !important;
  }

  /* ===== Centered hero stage ===== */
  .hero{
    position:relative;z-index:10;
    min-height:100vh;width:100%;
    display:flex;flex-direction:column;
    padding:0;
    overflow:hidden; /* clip the bg video to hero */
    isolation:isolate;
  }

  /* ===== Man-page navbar ===== */
  .manbar{
    position:relative;z-index:11;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
    padding:9px 28px;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(1px);
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:#fff;
  }
  .manbar .l{justify-self:start}
  .manbar .c{justify-self:center;color:rgba(255,255,255,0.7)}
  .manbar .r{justify-self:end}
  .manbar .live{display:inline-flex;align-items:center;gap:8px}
  .manbar .live-dot{
    width:8px;height:8px;background:#fff;
    box-shadow:0 0 0 2px #000, 0 0 0 3px #fff;
    animation:blink 1.6s steps(2,end) infinite;
  }

  .hero-center{
    flex:1;
    display:flex;align-items:center;justify-content:center;
    padding:24px;
  }

  /* ===== Window ===== */
  .stage{
    position:relative;
    width:min(560px, 92vw);
  }

  /* Skill window: stacked diagonally up-right from the error dialog */
  .win.win--skill{
    position:absolute;
    top:-100px;
    left:100px;
    width:100%;
    z-index:20;
    display:none;
  }
  .win.win--skill.is-open{
    display:block;
    animation:winPop .14s steps(3,end) both;
  }
  @keyframes winPop{
    0%  {transform:translate(0, 8px)}
    60% {transform:translate(0, -2px)}
    100%{transform:translate(0, 0)}
  }

  /* Error window glitch: jitter + invert flashes when the skill window appears */
  @keyframes errGlitch{
    0%   {transform:translate(0,0);            filter:none}
    8%   {transform:translate(-4px, 2px);      filter:invert(1)}
    16%  {transform:translate(5px, -2px);      filter:none}
    24%  {transform:translate(-3px, -3px);     filter:invert(1)}
    32%  {transform:translate(6px, 1px);       filter:none}
    40%  {transform:translate(-5px, 3px);      filter:invert(1)}
    50%  {transform:translate(3px, -1px);      filter:none}
    58%  {transform:translate(-2px, 2px);      filter:invert(1)}
    66%  {transform:translate(4px, 0);         filter:none}
    74%  {transform:translate(-3px, -2px);     filter:invert(1)}
    82%  {transform:translate(2px, 1px);       filter:none}
    90%  {transform:translate(-1px, 0);        filter:invert(1)}
    100% {transform:translate(0, 0);           filter:none}
  }
  .win.is-glitching{
    animation:errGlitch .7s steps(1,end) 1;
  }

  /* Persistent "broken/muted" state once the skill window is open */
  @keyframes errBroken{
    0%, 88%, 100% { transform:translate(-2px, 1px); filter:contrast(0.95) brightness(0.7); }
    90%           { transform:translate(2px, -1px); filter:invert(1) brightness(0.7); }
    92%           { transform:translate(-3px, 2px); filter:contrast(0.95) brightness(0.7); }
    94%           { transform:translate(4px, 0);    filter:invert(1) brightness(0.7); }
    96%           { transform:translate(-1px, 1px); filter:contrast(0.95) brightness(0.7); }
  }
  .win.is-broken{
    opacity:1;
    animation:errBroken 3.2s steps(1,end) infinite;
    pointer-events:none;
  }
  .win.is-broken::before{
    content:"";
    position:absolute;inset:0;
    background:repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 3px,
      rgba(255,255,255,0.06) 3px,
      rgba(255,255,255,0.06) 4px);
    pointer-events:none;
    mix-blend-mode:screen;
    z-index:1;
  }

  .skill-body{
    padding:18px 18px 18px;
    text-align:center;
  }
  .skill-label{
    font-family:var(--mono);
    font-weight:500;
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--dim);
    line-height:1;
  }
  .skill-label.top{margin-bottom:14px}
  .skill-label.bot{margin-top:14px}

  .skill-url{
    display:flex;align-items:stretch;
    border:2px solid #fff;
    background:#000;
    font-family:'VT323', monospace;
  }
  .skill-url__text{
    flex:1;
    padding:8px 14px 6px;
    font-size:22px;
    line-height:1.1;
    color:#fff;
    letter-spacing:0.01em;
    text-decoration:underline;
    text-underline-offset:3px;
    overflow-wrap:anywhere;
    word-break:break-word;
    text-align:left;
    user-select:all;
  }
  .skill-url__text:hover{color:#fff}
  .skill-copy{
    border:0;
    border-left:2px solid #fff;
    background:transparent;
    color:#fff;
    width:44px;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background .08s, color .08s;
  }
  .skill-copy:hover{background:#fff;color:#000}
  .skill-copy svg{width:18px;height:18px;display:block}
  .skill-copy .check{display:none}
  .skill-copy.copied .copy{display:none}
  .skill-copy.copied .check{display:block}
  .skill-copy.copied{background:#fff;color:#000}

  @media (max-width: 520px){
    .win.win--skill{top:-72px;left:24px}
    .skill-url__text{font-size:18px}
  }

  /* ===== Error window ===== */
  .win{
    position:relative;
    background:#000;
    border:2px solid #fff;
    color:#fff;
    font-family:'VT323', monospace;
    box-shadow:0 0 0 1px #000;
  }
  .win__title{
    display:flex;align-items:center;justify-content:space-between;
    padding:5px 12px 3px;
    border-bottom:2px solid #fff;
  }
  .win__title h1{
    font-family:'VT323', monospace;
    font-weight:400;
    font-size:26px;
    line-height:1;
    letter-spacing:0.02em;
  }
  .win__close{
    border:2px solid #fff;
    background:transparent;
    color:#fff;
    width:28px;height:24px;
    font-family:'VT323', monospace;
    font-size:20px;line-height:1;
    cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background .08s, color .08s;
  }
  .win__close:hover{background:#fff;color:#000}

  .win__body{
    padding:18px 18px 14px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:18px;
    align-items:center;
  }
  .sprite{
    width:96px;height:76px;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    display:block;
    object-fit:contain;
  }
  .win__msg{
    font-size:30px;
    line-height:1;
    letter-spacing:0.01em;
  }

  .win__cta-wrap{padding:0 18px 18px}
  .win__cta{
    width:100%;
    display:flex;align-items:center;justify-content:center;
    gap:8px;
    border:2px solid #fff;
    background:transparent;
    color:#fff;
    font-family:'VT323', monospace;
    font-size:clamp(26px, 4.2vw, 36px);
    line-height:1;
    padding:10px 14px 8px;
    cursor:pointer;
    letter-spacing:0.01em;
    transition:background .1s, color .1s;
    white-space:nowrap;
  }
  .win__cta:hover{background:#fff;color:#000}

  .caret{display:inline-block;animation:caret 1s steps(2,end) infinite}
  @keyframes caret{50%{opacity:0}}

  /* Small meta strip under the window (terminal-y, just one line) */
  .meta{
    margin-top:10px;padding:0 4px;
    display:flex;justify-content:space-between;align-items:center;
    color:#fff;opacity:0.75;
    font-family:'VT323', monospace;
    font-size:15px;letter-spacing:0.04em;
    text-transform:uppercase;
  }
  .meta .dot{
    display:inline-block;width:8px;height:8px;background:#fff;
    margin-right:6px;vertical-align:1px;
    animation:blink 1.4s steps(2,end) infinite;
  }
  @keyframes blink{50%{opacity:0.25}}

  /* responsive */
  @media (max-width: 520px){
    .stage{width:94vw}
    .manbar{padding:8px 14px;font-size:10px;letter-spacing:0.06em;gap:10px}
    .manbar .c{display:none}
    .win__title h1{font-size:22px}
    .win__msg{font-size:24px}
    .win__cta{font-size:24px}
    .sprite{width:80px;height:64px}
  }

  /* =========================================================== */
  /* Page content under the hero (man-page sections)             */
  /* =========================================================== */
  .page{
    position:relative;z-index:10;
    background:#000;
    border-top:2px solid #fff;
    width:100%;
    font-family:var(--mono);
    color:#fff;
    font-size:14px;
    line-height:1.6;
    letter-spacing:0.01em;
  }
  .page-inner{
    max-width:1100px;margin:0 auto;
    padding:80px 64px 60px;
  }

  .man-h{
    font-family:var(--mono);
    font-weight:700;
    font-size:15px;
    letter-spacing:0.18em;
    margin-top:64px;
    margin-bottom:20px;
    text-transform:uppercase;
    color:#fff;
  }
  .man-h:first-child{margin-top:0}
  .man-h .sub{font-weight:400;color:var(--dim);letter-spacing:0.08em;margin-left:14px;font-size:13px;}

  .indent{padding-left:8ch}
  p.narrow{max-width:64ch}
  .dim{color:var(--dim)}
  .opt{color:#fff;border-bottom:1px dashed #fff;padding-bottom:1px}
  em.kw{font-style:normal;text-decoration:underline;text-underline-offset:4px;font-weight:600}
  code{font-family:var(--mono);background:rgba(255,255,255,0.1);padding:0 4px}

  pre.code{
    font-family:var(--mono);
    font-size:14px;
    line-height:1.5;
    color:#fff;
    white-space:pre-wrap;
  }

  .hook{
    margin-top:0;margin-bottom:10px;
    font-family:'VT323', ui-monospace, monospace;
    font-weight:400;
    font-size:clamp(48px, 7vw, 104px);
    letter-spacing:0.005em;
    line-height:0.95;
    text-transform:uppercase;
    position:relative;
    display:inline-block;
    max-width:100%;
  }
  .hook-line{display:block; white-space:nowrap;}
  .hook u{text-decoration-thickness:3px;text-underline-offset:8px}
  .hook .cursor{
    display:inline-block;
    width:0.55ch;height:0.85em;
    background:#fff;
    vertical-align:-0.05em;
    margin-left:0.12em;
    animation:caret 0.9s steps(2,end) infinite;
  }
  /* CRT scanlines on the hook — horizontal raster gaps through the white text */
  .hook::after{
    content:"";
    position:absolute;inset:0;
    background:repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 5px,
      rgba(0,0,0,0.55) 5px,
      rgba(0,0,0,0.55) 6px);
    pointer-events:none;
    mix-blend-mode:multiply;
  }

  /* Intro layout: centered, capped width for consistency */
  .page-inner.intro{
    max-width:1100px;
    margin:0 auto;
    padding:64px 48px 48px;
    position:relative; /* anchor for the manfred window */
  }

  /* ===== Manfred window — intentionally breaks the grid ===== */
  .manfred-window{
    position:absolute;
    top: clamp(220px, 22vw, 320px);
    right:48px;
    width: clamp(340px, 36vw, 520px);
    z-index:15;
    background:#000;
    border:2px solid #fff;
    color:#fff;
    font-family:'VT323', monospace;
    box-shadow:0 0 0 1px #000;
  }
  .manfred-window .win__title{
    display:flex;align-items:center;justify-content:space-between;
    padding:5px 12px 3px;
    border-bottom:2px solid #fff;
    cursor:grab;
    user-select:none;
    touch-action:none;
  }
  .manfred-window.is-dragging .win__title{cursor:grabbing}
  .manfred-window.is-dragging{opacity:0.96}
  .manfred-window .win__title h1{
    font-family:'VT323', monospace;
    font-weight:400;
    font-size:22px;
    line-height:1;
    letter-spacing:0.02em;
  }
  .manfred-body{
    position:relative;
    aspect-ratio: 16 / 10;
    background:#000;
    overflow:hidden;
  }
  .manfred-canvas{
    position:absolute;inset:0;
    width:100%;height:100%;
    display:block;
    background:#000;
    /* Same 1-bit B&W dither treatment as the hero background */
    filter:contrast(1.15) grayscale(1) url(#dither);
    image-rendering:pixelated;
  }
  .manfred-source{
    position:absolute;
    width:1px;height:1px;
    opacity:0;
    pointer-events:none;
    left:-9999px;
  }
  .manfred-scanlines{
    position:absolute;inset:0;
    pointer-events:none;
    background:repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.06) 0,
      rgba(255,255,255,0.06) 1px,
      transparent 1px,
      transparent 3px);
    mix-blend-mode:overlay;
    z-index:2;
  }
  .manfred-meta{
    display:flex;justify-content:space-between;align-items:center;
    gap:12px;
    padding:6px 12px 4px;
    border-top:2px solid #fff;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:#fff;
  }
  .manfred-rec{display:inline-flex;align-items:center;gap:6px;color:#fff}
  .manfred-dot{
    display:inline-block;
    width:7px;height:7px;
    background:#fff;
    animation:blink 1.4s steps(2,end) infinite;
  }
  /* Wider viewports: reserve a right-side column so the floating window
     never overlaps the intro text. The window itself stays absolutely
     positioned so it can still spill into the rules section below. */
  @media (min-width: 1100px){
    .page-inner.intro{
      padding-right: calc(48px + clamp(340px, 36vw, 520px) + 40px);
    }
  }
  /* Narrower viewports: fold the window into normal flow under the copy. */
  @media (max-width: 1099px){
    .manfred-window{
      position:static;
      width:100%;
      max-width:560px;
      margin:40px auto 0;
      right:auto;top:auto;
      /* Cancel any drag-imposed inline left/top once we go static. */
      left:auto !important;
    }
  }
  .intro-sub{
    margin-top:22px;
    font-family:var(--mono);
    font-size:clamp(16px, 1.5vw, 22px);
    font-weight:500;
    line-height:1.4;
    letter-spacing:0.02em;
    color:#fff;
    max-width:50ch;
  }
  .intro-body{
    margin-top:24px;
    font-family:var(--mono);
    font-size:clamp(14px, 1.1vw, 17px);
    line-height:1.7;
    letter-spacing:0.01em;
    color:var(--dim);
    max-width:50ch;
  }

  /* ===== Rules — big pixel marquee with scroll-centered highlight ===== */
  .rules-section{
    position:relative;
    border-top:1px solid #fff;
    margin-top:0;
    padding:0 0 24px;
    background:#000;
    overflow-x:hidden;
  }
  .rules-section-head{
    max-width:1100px;margin:0 auto;
    padding:40px 48px 24px;
    display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1px solid #fff;
    margin-bottom:8px;
  }
  .rules-section-head h2{
    font-family:var(--mono);
    font-weight:600;
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  .rules-section-head h2 .sub{font-weight:400;color:var(--dim);letter-spacing:0.04em;margin-left:10px;font-size:12px;}
  .rules-section-head .count{
    font-family:var(--mono);font-size:12px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--dim);
  }
  .rules-section-head .count b{color:#fff;font-weight:600}

  .rules-list{
    list-style:none;
    padding:14vh 0 8vh;
    margin:0 auto;
    max-width:1100px;
    display:flex;flex-direction:column;
    gap:4px;
    align-items:flex-start;
  }
  .r-row{
    width:100%;
    display:flex;justify-content:flex-start;
    padding:0 48px;
  }
  .r-item{
    position:relative;
    display:inline-block;
    padding:10px 22px 4px;
    border:2px solid transparent;
    font-family:'VT323', monospace;
    font-size:clamp(40px, 7vw, 84px);
    line-height:1.0;
    letter-spacing:0.005em;
    color:#fff;
    opacity:0.5;
    transition: opacity .25s ease, border-color .15s ease, color .15s ease, background-color .15s ease, transform .25s ease;
    cursor:default;
    max-width:100%;
  }
  .r-item .r-num{display:inline;margin-right:0.6ch}
  .r-item .r-text{display:inline}
  .r-row.is-active .r-item{
    opacity:1;
    background:#fff;
    color:#000;
    border-color:#fff;
    transform:translateX(0);
  }
  /* CRT scanlines through highlighted rule */
  .r-row.is-active .r-item::after{
    content:"";
    position:absolute;inset:0;
    background:repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0.22) 4px,
      rgba(0,0,0,0.22) 5px);
    pointer-events:none;
  }
  .r-row:not(.is-active) .r-item{
    transform:translateX(-4px);
  }
  .r-num{opacity:0.85}
  .r-row.is-active .r-num{opacity:1}

  .rules-foot{
    max-width:1100px;margin:24px auto 0;
    padding:20px 48px 0;
    border-top:1px solid #fff;
    color:var(--dim);font-size:12px;letter-spacing:0.06em;
    display:flex;gap:32px;flex-wrap:wrap;
  }
  .rules-foot span b{color:#fff;font-weight:600}

  /* ===== Man-page CTA — punch-out to /how-it-works ===== */
  .man-cta{
    display:block;
    text-decoration:none;
    color:#fff;
    background:#000;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    padding:36px 48px;
    margin-top:64px;
    text-align:center;
    transition: background .1s steps(2,end), color .1s steps(2,end);
  }
  .man-cta:hover{background:#fff;color:#000}
  .man-cta__eyebrow{
    display:block;
    font-family:var(--mono);
    font-weight:600;
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--dim);
    margin-bottom:14px;
    transition: color .1s steps(2,end);
  }
  .man-cta:hover .man-cta__eyebrow{color:#000}
  .man-cta__line{
    display:block;
    font-family:'VT323', monospace;
    font-size:clamp(28px, 4vw, 48px);
    line-height:1.1;
    letter-spacing:0.01em;
    color:inherit;
  }
  .man-cta__line .arrow{display:inline-block;margin-left:.25ch}
  .man-cta__caption{
    display:block;
    margin-top:10px;
    font-family:var(--mono);
    font-weight:500;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--dim);
    transition: color .1s steps(2,end);
  }
  .man-cta:hover .man-cta__caption{color:#000}
  .man-cta__caption .arrow{margin-left:.4ch}
  @media (max-width: 760px){
    .man-cta{padding:28px 22px;margin-top:40px}
  }

  /* ===== Built With — partner logo cards ===== */
  .built-with{
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    padding:56px 48px;
    background:#000;
    text-align:center;
  }
  .built-with__head{margin-bottom:32px}
  .built-with__eyebrow{
    display:block;
    font-family:var(--mono);
    font-weight:600;
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--dim);
  }
  .built-with__sub{
    display:block;
    margin-top:6px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.1em;
    color:var(--dim2);
  }
  .built-with__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    max-width:760px;
    margin:0 auto;
  }
  .logo-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:32px 20px;
    border:1px solid #fff;
    background:#000;
    color:#fff;
    text-decoration:none;
    transition: background .1s steps(2,end), color .1s steps(2,end);
  }
  .logo-card:hover{background:#fff;color:#000}
  .logo-card__mark{
    font-family:var(--mono);
    font-weight:500;
    font-size:10px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--dim);
    transition: color .1s steps(2,end);
  }
  .logo-card:hover .logo-card__mark{color:#000}
  .logo-card__name{
    font-family:'VT323', monospace;
    font-size:clamp(32px, 4.5vw, 48px);
    line-height:1;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:inherit;
  }
  @media (max-width: 600px){
    .built-with{padding:36px 22px}
    .built-with__grid{grid-template-columns:1fr;gap:12px}
    .logo-card{padding:24px 16px}
  }

  /* ===== Arrivals — ASCII lobster procession (cinematic interstitial) ===== */
  .arrivals{
    position:relative;
    background:#000;
    border-top:1px solid #fff;
    margin-top:64px;
    width:100%;
  }
  .arrivals-chrome{
    display:flex;justify-content:space-between;align-items:center;
    padding:9px 28px;
    border-bottom:1px solid #fff;
    font-family:var(--mono);
    font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
    color:#fff;
  }
  .arrivals-chrome .live{display:inline-flex;align-items:center;gap:8px}
  .arrivals-chrome .live-dot{
    width:8px;height:8px;background:#fff;
    box-shadow:0 0 0 2px #000, 0 0 0 3px #fff;
    animation:blink 1.6s steps(2,end) infinite;
  }
  .arrivals-hook{
    padding:48px 28px 28px;
    text-align:center;
    font-family:'VT323', monospace;
    font-size:clamp(48px, 7vw, 96px);
    line-height:0.95;
    letter-spacing:0.005em;
    text-transform:uppercase;
    color:#fff;
    border-bottom:1px solid #fff;
    position:relative;
  }
  .arrivals-hook::after{
    content:"";
    position:absolute;inset:0;
    background:repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 5px,
      rgba(0,0,0,0.55) 5px,
      rgba(0,0,0,0.55) 6px);
    pointer-events:none;
    mix-blend-mode:multiply;
  }
  .arrivals-band{
    position:relative;
    width:100%;
    background:#000;
    border-bottom:1px solid #fff;
    padding:0;
  }
  .ascii-strip-container{
    position:relative;
    width:100%;
    margin:0 auto;
    aspect-ratio: 16 / 9;
    overflow:hidden;
    background:#000;
  }
  .arrivals-canvas{
    position:absolute;inset:0;
    width:100%;height:100%;
    display:block;
    background:#000;
    image-rendering:pixelated;
    /* Hard guarantee: no accent color, only B&W */
    filter:grayscale(1) contrast(1.15) brightness(1.15);
  }
  .arrivals-fallback{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    filter:contrast(1.15) grayscale(1) url(#dither);
    image-rendering:pixelated;
    display:none;
  }
  .arrivals-fallback.is-active{display:block}
  .arrivals-scanlines{
    position:absolute;inset:0;
    pointer-events:none;
    background:repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.05) 0,
      rgba(255,255,255,0.05) 1px,
      transparent 1px,
      transparent 3px);
    mix-blend-mode:overlay;
    z-index:2;
  }
  .arrivals-caption{
    padding:10px 28px;
    font-family:var(--mono);
    font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--dim);
    display:flex;justify-content:space-between;align-items:center;
    gap:24px;
  }
  .arrivals-caption b{color:#fff;font-weight:600}

  /* ---- Hybrid dither base ---------------------------------- */
  .arrivals--hybrid{margin-top:0}
  .dither-video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    background:#000;
    /* Hero's exact treatment: grayscale + fractal-noise threshold to 1-bit */
    filter:contrast(1.15) grayscale(1) url(#dither);
    image-rendering:pixelated;
  }

  /* ---- Hybrid (dither × ascii) ---------------------------------- */
  /* Invert the entire composited block; isolation creates a new stacking
     context so mix-blend-mode layers stay contained under the invert. */
  .arrivals--hybrid .ascii-strip-container{
    isolation:isolate;
    filter:invert(1);
  }
  /* Base: same dither, polarity-normalized to white-on-black via invert(1) so
     it matches the ASCII overlay polarity. Drop the invert() to compare. */
  .dither-video--hybrid{
    filter:contrast(1.15) grayscale(1) url(#dither) invert(1);
  }
  /* Overlay: ASCII canvas blended on top. Both knobs are CSS vars so you can
     swap modes without touching markup. Try: screen | difference | exclusion | overlay */
  .arrivals--hybrid{
    --hybrid-blend: screen;
    --hybrid-opacity: 0.65;
  }
  .hybrid-canvas{
    position:absolute;inset:0;
    z-index:1;
    mix-blend-mode: var(--hybrid-blend);
    opacity: var(--hybrid-opacity);
    /* keep the ascii layer strictly B&W regardless of engine output */
    filter:grayscale(1) contrast(1.15) brightness(1.15);
  }
  .hybrid-fallback{z-index:0}

  /* CTA window overlay on the lobster strip */
  .stage-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    pointer-events:none;
    padding:0 24px;
  }
  .stage-overlay .stage{
    pointer-events:auto;
  }
  @media (max-width: 600px){
    .stage-overlay{padding:0 16px}
  }
  @media (max-width: 760px){
    .arrivals{margin-top:40px}
    .arrivals-chrome,.arrivals-caption{padding:8px 18px;font-size:10px;letter-spacing:0.06em;gap:10px}
  }

  /* Bottom man-page bar */
  .manfoot{
    display:grid;grid-template-columns:1fr auto 1fr;gap:24px;
    align-items:center;
    width:100%;
    padding:14px 48px;margin-top:48px;
    border-top:1px solid #fff;border-bottom:1px solid #fff;
    font-family:var(--mono);
    font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#fff;
  }
  .manfoot .l{justify-self:start}
  .manfoot .c{justify-self:center;color:rgba(255,255,255,0.7)}
  .manfoot .c b{color:#fff;font-weight:600}
  .manfoot .r{justify-self:end}
  .manfoot a{
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid #fff;
    padding-bottom:1px;
    transition: background .08s steps(2,end), color .08s steps(2,end);
  }
  .manfoot a:hover{background:#fff;color:#000}

  @media (max-width: 760px){
    .page-inner{padding:48px 22px 40px}
    .page-inner.intro{padding:80px 22px 80px}
    .indent{padding-left:2ch}
    .rules-section{margin-top:48px;padding:48px 0}
    .rules-section-head{padding:0 22px 24px;margin-bottom:24px}
    .rules-list{padding:18vh 0}
    .r-row{padding:0 18px}
    .r-item{font-size:clamp(28px,9vw,52px);padding:4px 10px 0}
    .rules-foot{padding:18px 22px 0;gap:18px}
    .manfoot{font-size:10px;letter-spacing:0.05em;gap:10px;padding:10px 22px}
    .manfoot .c{display:none}
  }