// ─────────────────────────────────────────────────────────────────────────────
// DIRECTION A · TERMINAL — 41st / Archive 001
// Pure black, phosphor green, ASCII, file-listing density.
// ─────────────────────────────────────────────────────────────────────────────

const A_STYLE = `
  .a-root{
    --bg:#000;--fg:#e6e6e6;--dim:#6c6c6c;--hair:#1f1f1f;--frame:#0c0e0c;
    --g:#5cff8a;--r:#ff4040;
    background:var(--bg);color:var(--fg);
    font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:13px;line-height:1.5;letter-spacing:.01em;
    min-height:100vh;position:relative;
  }
  .a-root *{box-sizing:border-box}
  .a-root::before{
    content:"";position:fixed;inset:0;pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.012) 3px,rgba(255,255,255,.012) 4px);
    z-index:1;
  }
  .a-root > *{position:relative;z-index:2}
  .a-root .g{color:var(--g)}
  .a-root .dim{color:var(--dim)}
  .a-root .red{color:var(--r)}

  /* announce bar */
  .a-announce{
    background:var(--g);color:#031006;font-weight:600;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    display:flex;align-items:center;overflow:hidden;
    border-bottom:1px solid var(--g);
  }
  .a-announce .badge{padding:9px 18px;background:#031006;color:var(--g);
    border-right:1px solid var(--g);white-space:nowrap;font-weight:700;
    display:flex;align-items:center;gap:8px}
  .a-announce .badge .blip{width:6px;height:6px;background:var(--g);border-radius:50%;
    box-shadow:0 0 8px var(--g);animation:a-pulse 1.2s infinite}
  .a-announce .marquee{flex:1;overflow:hidden;white-space:nowrap;padding:9px 0}
  .a-announce .marquee .t{display:inline-block;animation:a-mq 36s linear infinite;padding-left:100%}
  .a-announce .marquee .t span{margin:0 28px}
  .a-announce .marquee .t span::before{content:"▸ "}
  .a-announce .cta{padding:9px 18px;background:#031006;color:var(--g);
    border-left:1px solid var(--g);cursor:pointer;font:inherit;font-weight:700;letter-spacing:.22em;
    text-transform:uppercase}
  .a-announce .cta:hover{background:#062213}
  @keyframes a-mq{from{transform:translateX(0)}to{transform:translateX(-100%)}}

  /* topbar */
  .a-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:14px 32px;border-bottom:1px solid var(--hair);font-size:11.5px}
  .a-top .l{display:flex;gap:18px;align-items:center}
  .a-top .c{justify-self:center;letter-spacing:.22em}
  .a-top .r{justify-self:end;display:flex;gap:18px;align-items:center}
  .a-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--g);
    box-shadow:0 0 8px var(--g);animation:a-pulse 1.6s infinite}
  @keyframes a-pulse{0%,60%{opacity:1}80%{opacity:.2}100%{opacity:1}}

  /* hero */
  .a-hero{padding:46px 32px 36px;border-bottom:1px solid var(--hair)}
  .a-prompt{color:var(--dim);font-size:12px}
  .a-prompt b{color:var(--g);font-weight:500}
  .a-cursor{display:inline-block;width:8px;height:14px;background:var(--g);
    vertical-align:-2px;margin-left:2px;animation:a-blink 1s steps(2) infinite}
  @keyframes a-blink{50%{opacity:0}}
  .a-ascii{
    color:var(--fg);font-size:11.5px;line-height:1.05;white-space:pre;
    margin:18px 0 28px;letter-spacing:0;
  }
  .a-ascii .g{color:var(--g)}
  .a-headline{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:end;
    padding-top:8px}
  .a-headline h1{margin:0;font-size:48px;line-height:1.02;font-weight:500;letter-spacing:-.012em;
    color:var(--fg);text-transform:uppercase}
  .a-headline h1 .lbl{display:block;font-size:12px;letter-spacing:.16em;color:var(--dim);
    margin-bottom:18px;font-weight:400}
  .a-headline h1 .strike{color:var(--dim)}
  .a-headline .info{font-size:11.5px;color:var(--dim)}
  .a-headline .info .row{display:flex;justify-content:space-between;border-bottom:1px solid var(--hair);
    padding:9px 0}
  .a-headline .info .row b{color:var(--fg);font-weight:500}

  /* countdown */
  .a-cdn{margin:34px 0 0;border:1px solid var(--hair);padding:20px 24px;
    display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}
  .a-cdn .lbl{font-size:11px;color:var(--dim);letter-spacing:.18em}
  .a-cdn .val{font-size:32px;letter-spacing:.05em;color:var(--g);text-shadow:0 0 14px rgba(92,255,138,.4);
    justify-self:center;font-feature-settings:"tnum"}
  .a-cdn .val .sep{color:#2a3a2c;margin:0 8px}
  .a-cdn .end{font-size:11px;color:var(--dim);letter-spacing:.14em;text-align:right}

  /* claim transition ribbon (between grid and howto) */
  .a-claim-banner{padding:0;border-bottom:1px solid var(--hair);background:#000}
  .a-claim-banner .ribbon{
    display:grid;grid-template-columns:auto 1fr auto;gap:0;align-items:center;
    background:var(--g);color:#031006;
    font-size:14px;letter-spacing:.32em;font-weight:700;text-transform:uppercase;
    border-top:1px solid var(--g);border-bottom:1px solid var(--g);
  }
  .a-claim-banner .ribbon-l, .a-claim-banner .ribbon-r{
    padding:14px 22px;background:#031006;color:var(--g);font-size:13px;letter-spacing:.18em;
    animation:a-blink 1.6s steps(2) infinite;
  }
  .a-claim-banner .ribbon-r{border-left:1px solid var(--g)}
  .a-claim-banner .ribbon-l{border-right:1px solid var(--g)}
  .a-claim-banner .ribbon-c{padding:14px 24px;text-align:center}

  /* how-to-claim */
  .a-howto{padding:80px 32px 70px;border-bottom:1px solid var(--hair);position:relative;
    background:linear-gradient(180deg, #050a05 0%, #000 100%)}
  .a-howto::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(92,255,138,.06), transparent 70%)}
  .a-howto .lead{display:flex;justify-content:space-between;align-items:baseline;
    margin-bottom:30px;position:relative;z-index:1}
  .a-howto .lead .lb{font-size:11px;color:var(--g);letter-spacing:.22em}
  .a-howto .lead h2{margin:0;font-size:46px;font-weight:500;letter-spacing:-.018em;
    text-transform:uppercase;color:var(--fg);max-width:18ch;line-height:1.02}
  .a-howto .lead h2 span{color:var(--g)}
  .a-howto .lead .meta{font-size:11px;color:var(--dim);letter-spacing:.14em;text-align:right;
    text-transform:uppercase;line-height:1.6}
  .a-howto .lead .meta b{color:var(--fg);font-weight:500}
  .a-howto .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--g);
    border:1px solid var(--g);position:relative;z-index:1;box-shadow:0 0 40px rgba(92,255,138,.18)}
  .a-howto .step{background:#050605;padding:34px 26px;display:flex;flex-direction:column;
    gap:18px;position:relative;transition:background .2s;min-height:280px}
  .a-howto .step:hover{background:#070b07}
  .a-howto .step .num{font-size:11px;color:var(--g);letter-spacing:.22em;display:flex;
    justify-content:space-between;align-items:center}
  .a-howto .step .num .ico{font-size:18px;color:var(--g);line-height:1}
  .a-howto .step h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.008em;
    text-transform:uppercase;color:var(--fg);line-height:1.1}
  .a-howto .step p{margin:0;color:var(--dim);font-size:13px;line-height:1.6;letter-spacing:.02em}
  .a-howto .step p a{color:var(--g);text-decoration:underline;text-decoration-color:rgba(92,255,138,.35);
    text-underline-offset:3px}
  .a-howto .step p a:hover{text-decoration-color:var(--g)}
  .a-howto .step .keys a{color:inherit;text-decoration:none}
  .a-howto .step .keys i:has(a){border-color:var(--g);color:var(--g);transition:background .15s}
  .a-howto .step .keys i:has(a):hover{background:rgba(92,255,138,.08)}
  .a-howto .step .arrow{position:absolute;right:-14px;top:50%;transform:translateY(-50%);
    width:24px;height:24px;background:var(--bg);border:1px solid var(--g);color:var(--g);
    border-radius:50%;display:grid;place-items:center;font-size:11px;z-index:2}
  .a-howto .step:last-child .arrow{display:none}
  .a-howto .step .keys{margin-top:auto;display:flex;gap:6px;font-size:9.5px;color:var(--dim);
    letter-spacing:.16em;flex-wrap:wrap}
  .a-howto .step .keys i{font-style:normal;border:1px solid var(--hair);padding:3px 7px}
  .a-howto .foot{margin-top:24px;display:flex;justify-content:space-between;align-items:center;
    font-size:11px;color:var(--dim);letter-spacing:.12em;position:relative;z-index:1}
  .a-howto .foot .left{display:flex;gap:18px;align-items:center}
  .a-howto .foot .left b{color:var(--fg);font-weight:500}
  .a-howto .foot .start{background:var(--g);color:#031006;border:0;font:inherit;font-weight:700;
    padding:18px 30px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;font-size:13px;
    box-shadow:0 0 24px rgba(92,255,138,.35)}
  .a-howto .foot .start:hover{box-shadow:0 0 24px rgba(92,255,138,.4)}

  /* series strip */
  .a-series{padding:24px 32px;border-bottom:1px solid var(--hair);
    display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .a-series .s{padding-right:24px;border-right:1px dashed var(--hair)}
  .a-series .s:last-child{border-right:0}
  .a-series .s .lb{font-size:10.5px;letter-spacing:.18em;color:var(--g)}
  .a-series .s .ttl{font-size:14px;color:var(--fg);margin-top:6px;letter-spacing:.04em;
    text-transform:uppercase}
  .a-series .s .ct{font-size:10.5px;color:var(--dim);margin-top:4px;letter-spacing:.06em}

  /* category nav */
  .a-cats{padding:16px 32px;border-bottom:1px solid var(--hair);display:flex;gap:24px;
    font-size:11.5px;align-items:center}
  .a-cats button{background:none;border:0;color:var(--dim);font:inherit;cursor:pointer;
    padding:2px 0;letter-spacing:.06em}
  .a-cats button.on{color:var(--g);border-bottom:1px solid var(--g)}
  .a-cats .ct{color:var(--dim);margin-left:6px;font-size:10px;vertical-align:super}
  .a-cats .end{margin-left:auto;color:var(--dim)}

  /* file-listing header */
  .a-lsh{padding:10px 32px;color:var(--dim);font-size:10.5px;letter-spacing:.06em;
    display:grid;grid-template-columns:36px 100px 1fr 80px 110px 80px;gap:16px;
    border-bottom:1px solid var(--hair)}

  /* grid */
  .a-grid{padding:14px 32px 60px;display:grid;grid-template-columns:repeat(3,1fr);
    column-gap:24px;row-gap:44px;border-bottom:1px solid var(--hair)}
  .a-card{
    background:transparent;cursor:pointer;position:relative;
    border:1px solid transparent;transition:border-color .15s,background .15s;
    padding:10px 10px 14px;
  }
  .a-card:hover{border-color:var(--g);background:rgba(92,255,138,.025)}
  .a-card .frame{
    aspect-ratio:1/1.05;background:var(--frame);
    display:grid;place-items:center;position:relative;overflow:hidden;
    border:1px solid var(--hair);
  }
  .a-card .frame img{width:96%;height:96%;object-fit:contain;
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
    filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
  .a-card:hover .frame img{transform:scale(1.03)}
  .a-card .frame .badge{position:absolute;top:8px;left:8px;font-size:10px;color:var(--dim);
    letter-spacing:.12em;background:rgba(12,14,12,.7);padding:2px 6px}
  .a-card .frame .badge.r{left:auto;right:8px;color:var(--g)}
  .a-card .frame .corner{position:absolute;width:10px;height:10px;border:1px solid var(--g);opacity:.4}
  .a-card .frame .corner.tl{top:6px;left:6px;border-right:0;border-bottom:0}
  .a-card .frame .corner.tr{top:6px;right:6px;border-left:0;border-bottom:0}
  .a-card .frame .corner.bl{bottom:6px;left:6px;border-right:0;border-top:0}
  .a-card .frame .corner.br{bottom:6px;right:6px;border-left:0;border-top:0}

  .a-card .meta{margin-top:12px;display:flex;flex-direction:column;gap:5px;font-size:11px}
  .a-card .nm{color:var(--fg);letter-spacing:.04em;font-size:12px;line-height:1.3;
    text-transform:uppercase;min-height:2.6em}
  .a-card .sub{display:flex;justify-content:space-between;color:var(--dim);font-size:10.5px;letter-spacing:.08em}
  .a-card .sub .sku{color:var(--g)}
  .a-card .sub .price{color:var(--g);font-weight:500}
  .a-card .sub .price .strike{color:var(--dim);text-decoration:line-through;margin-right:8px;font-weight:400}
  .a-card .stk{display:flex;justify-content:space-between;color:var(--dim);font-size:10.5px;letter-spacing:.08em}
  .a-card .stk .red{color:var(--r)}

  .a-card.sold .frame{opacity:.5}
  .a-card.sold .frame img{filter:grayscale(1) opacity(.7)}
  .a-card.sold .nm{color:var(--dim)}
  .a-card.sold .frame::after{
    content:"╳ SOLD OUT ╳";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    text-align:center;font-size:11px;color:var(--r);letter-spacing:.22em;
    background:rgba(0,0,0,.8);padding:6px 0;border-top:1px solid var(--r);border-bottom:1px solid var(--r);
  }

  /* who */
  .a-who{padding:70px 32px;border-bottom:1px solid var(--hair);
    display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start}
  .a-who .lbl{font-size:11px;color:var(--g);letter-spacing:.22em}
  .a-who .body{display:flex;flex-direction:column;gap:24px}
  .a-who p{margin:0;font-size:18px;line-height:1.55;color:var(--fg);font-weight:400;
    letter-spacing:-.003em;text-wrap:pretty;max-width:58ch}
  .a-who p span{color:var(--dim)}
  .a-who p b{color:var(--g);font-weight:500}
  .a-who .cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
    border:1px solid var(--g);color:var(--g);padding:10px 18px;
    font-size:11px;letter-spacing:.22em;text-decoration:none;
    transition:background .15s}
  .a-who .cta:hover{background:rgba(92,255,138,.08)}

  /* footer */
  .a-ft{padding:36px 32px 16px;font-size:11px;color:var(--dim);
    display:grid;grid-template-columns:1fr 1fr;gap:48px}
  .a-ft h4{margin:0 0 14px;color:var(--dim);font-size:10.5px;letter-spacing:.18em;font-weight:500}
  .a-ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--fg)}
  .a-ft ul li a{color:inherit;text-decoration:none;display:inline-block;
    border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
  .a-ft ul li a:hover{color:var(--g);border-bottom-color:var(--g)}
  .a-ft .sub{border:1px solid var(--hair);display:flex;margin-top:10px;max-width:360px}
  .a-ft .sub input{flex:1;background:transparent;border:0;outline:none;color:var(--fg);
    font:inherit;padding:12px 14px;font-size:11px;letter-spacing:.06em}
  .a-ft .sub input::placeholder{color:var(--dim)}
  .a-ft .sub button{background:var(--g);color:#031006;border:0;font:inherit;padding:0 18px;
    letter-spacing:.18em;cursor:pointer;font-size:11px;font-weight:600}
  .a-ft .small{font-size:10.5px;color:var(--dim);margin-top:14px;line-height:1.5}

  .a-colof{padding:14px 32px 28px;font-size:10px;color:var(--dim);
    display:flex;justify-content:space-between;letter-spacing:.12em;border-top:1px solid var(--hair)}

  /* detail modal */
  .a-modal{position:fixed;inset:0;background:rgba(0,0,0,.97);z-index:50;
    overflow:auto;border:1px solid var(--g)}
  .a-modal .x{position:absolute;top:64px;right:32px;color:var(--g);font-size:11px;
    letter-spacing:.2em;cursor:pointer;background:none;border:1px solid var(--hair);
    font:inherit;padding:6px 10px;z-index:4}
  .a-modal .x:hover{background:rgba(92,255,138,.08);border-color:var(--g)}
  .a-modal .back{background:transparent;border:1px solid var(--g);color:var(--g);font:inherit;
    font-size:11px;letter-spacing:.18em;padding:5px 12px;cursor:pointer;margin-right:18px}
  .a-modal .back:hover{background:rgba(92,255,138,.08)}
  .a-modal .head{position:sticky;top:0;background:rgba(0,0,0,.96);padding:14px 32px;
    border-bottom:1px solid var(--hair);font-size:11px;color:var(--dim);letter-spacing:.12em;
    display:flex;gap:24px;align-items:center;z-index:3}
  .a-modal .head b{color:var(--g);font-weight:500}
  .a-modal .head .crumb{color:var(--dim)}
  .a-modal .inner{padding:48px 40px;display:grid;grid-template-columns:1.1fr 1fr;gap:50px;
    max-width:1200px;margin:0 auto}
  .a-modal .gallery{display:flex;flex-direction:column;gap:14px}
  .a-modal .preview{aspect-ratio:1/1.05;background:var(--frame);border:1px solid var(--hair);
    display:grid;place-items:center;position:relative;overflow:hidden;contain:paint}
  .a-modal .preview img{width:80%;height:80%;object-fit:contain;
    filter:drop-shadow(0 12px 32px rgba(0,0,0,.6));transition:opacity .25s}
  .a-modal .preview .corner{position:absolute;width:12px;height:12px;border:1px solid var(--g);opacity:.55}
  .a-modal .preview .corner.tl{top:8px;left:8px;border-right:0;border-bottom:0}
  .a-modal .preview .corner.tr{top:8px;right:8px;border-left:0;border-bottom:0}
  .a-modal .preview .corner.bl{bottom:8px;left:8px;border-right:0;border-top:0}
  .a-modal .preview .corner.br{bottom:8px;right:8px;border-left:0;border-top:0}
  .a-modal .preview .stamp{position:absolute;top:14px;left:14px;font-size:10.5px;color:var(--g);
    letter-spacing:.18em;background:rgba(0,0,0,.5);padding:3px 8px}
  .a-modal .thumbs{display:flex;gap:10px}
  .a-modal .thumbs button{flex:1;aspect-ratio:1/1.05;background:var(--frame);
    border:1px solid var(--hair);cursor:pointer;display:grid;place-items:center;
    color:var(--dim);font:inherit;font-size:10.5px;letter-spacing:.14em;overflow:hidden;
    position:relative}
  .a-modal .thumbs button.sel{border-color:var(--g);color:var(--g)}
  .a-modal .thumbs button{overflow:hidden}
  .a-modal .thumbs button img{width:78%;height:78%;object-fit:contain;transition:transform .3s ease}
  .a-modal .thumbs button span{position:absolute;bottom:6px;left:8px}

  .a-modal h2{margin:0;font-size:36px;line-height:1.05;font-weight:500;letter-spacing:-.01em;
    text-transform:uppercase;color:var(--fg)}
  .a-modal h2 .cap{display:block;font-size:11px;color:var(--g);letter-spacing:.18em;
    font-weight:400;margin-bottom:14px}
  .a-modal .sku-row{margin-top:22px;display:flex;justify-content:space-between;
    color:var(--dim);font-size:11px;letter-spacing:.1em;padding-bottom:16px;
    border-bottom:1px solid var(--hair)}
  .a-modal .sku-row b{color:var(--fg);font-weight:500}
  .a-modal p{color:var(--fg);font-size:12.5px;line-height:1.65;margin:18px 0;max-width:50ch}

  .a-modal .wkcd{margin-top:18px;display:flex;align-items:baseline;gap:10px;
    font-size:11px;letter-spacing:.14em;color:var(--dim)}
  .a-modal .wkcd-lbl{color:var(--dim)}
  .a-modal .wkcd-val{font-variant-numeric:tabular-nums;color:var(--g)}
  .a-modal .wkcd-val b{font-weight:500}
  .a-modal .wkcd-end{margin-left:auto;color:var(--dim);font-size:10px;letter-spacing:.12em}
  .a-modal .progress{margin-top:18px;height:3px;background:var(--hair);position:relative}
  .a-modal .progress .fill{position:absolute;left:0;top:0;bottom:0;background:var(--g)}
  .a-modal .plbl{margin-top:8px;font-size:10.5px;letter-spacing:.1em;color:var(--dim)}
  .a-modal .specs{border-top:1px solid var(--hair);padding-top:14px;margin-top:24px;
    display:flex;flex-direction:column;gap:8px;color:var(--dim);font-size:11px;letter-spacing:.06em}
  .a-modal .specs div{display:flex;justify-content:space-between}
  .a-modal .specs div b{color:var(--fg);font-weight:500}
  .a-modal .sizes{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
  .a-modal .sizes button{background:transparent;border:1px solid var(--hair);
    color:var(--fg);font:inherit;font-size:11px;letter-spacing:.12em;padding:10px 14px;cursor:pointer;
    min-width:48px}
  .a-modal .sizes button.sel{border-color:var(--g);color:var(--g);background:rgba(92,255,138,.06)}
  .a-modal .sizes button.gone{color:var(--dim);text-decoration:line-through;cursor:not-allowed}
  .a-modal .buy{margin-top:24px;width:100%;background:var(--g);color:#031006;
    border:0;padding:18px;font:inherit;font-size:12px;letter-spacing:.22em;cursor:pointer;font-weight:600}
  .a-modal .buy.sold{background:transparent;color:var(--r);border:1px solid var(--r);font-weight:400}
  .a-modal .buy small{display:block;font-size:9.5px;font-weight:400;letter-spacing:.18em;
    margin-top:5px;opacity:.7;letter-spacing:.18em}
  .a-modal .meta-lst{margin-top:16px;font-size:10.5px;color:var(--dim);letter-spacing:.06em;display:flex;gap:14px}
  .a-modal .meta-lst span::before{content:"› ";color:var(--g)}

  /* claim modal */
  .a-claim{position:fixed;inset:0;background:rgba(0,0,0,.97);z-index:60;
    overflow:auto;border:1px solid var(--g);display:flex;align-items:flex-start;justify-content:center;
    padding:48px 32px}
  .a-claim .scrim{position:fixed;inset:0;background:rgba(0,0,0,.5)}
  .a-claim .box{position:relative;width:100%;max-width:760px;background:#050605;
    border:1px solid var(--g);box-shadow:0 0 60px rgba(92,255,138,.15)}
  .a-claim .hd{padding:16px 24px;border-bottom:1px solid var(--hair);display:flex;
    align-items:center;gap:18px;font-size:11px;color:var(--dim);letter-spacing:.14em}
  .a-claim .hd b{color:var(--g);font-weight:500}
  .a-claim .box{position:relative}
  .a-claim .box > .x{position:absolute;top:60px;right:32px;color:var(--g);cursor:pointer;
    background:none;border:1px solid var(--hair);font:inherit;font-size:11px;
    letter-spacing:.2em;padding:6px 10px;z-index:4}
  .a-claim .box > .x:hover{background:rgba(92,255,138,.08);border-color:var(--g)}
  .a-claim .hd .back{background:transparent;border:1px solid var(--g);color:var(--g);font:inherit;
    font-size:11px;letter-spacing:.18em;padding:5px 12px;cursor:pointer;margin-right:18px}
  .a-claim .hd .back:hover{background:rgba(92,255,138,.08)}
  .a-claim .body{padding:32px 32px 36px}
  .a-claim .top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;
    padding-bottom:20px;border-bottom:1px dashed var(--hair)}
  .a-claim .top h2{margin:0;font-size:32px;line-height:1.05;font-weight:500;letter-spacing:-.012em;
    text-transform:uppercase;color:var(--fg);max-width:18ch}
  .a-claim .top h2 .acc{color:var(--g)}
  .a-claim .top .sku{font-size:11px;color:var(--dim);letter-spacing:.12em;text-align:right}
  .a-claim .top .sku b{display:block;color:var(--fg);font-weight:500;margin-top:4px;font-size:11px}
  .a-claim .top .sku .free{color:var(--g);font-size:20px;margin-top:4px}

  .a-claim ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
  .a-claim li{border:1px solid var(--hair);padding:18px 20px;display:grid;
    grid-template-columns:34px 1fr auto;gap:18px;align-items:center;transition:border-color .2s,background .2s;
    position:relative}
  .a-claim li.active{border-color:var(--g);background:rgba(92,255,138,.04)}
  .a-claim li.done{border-color:#1d3a23;background:rgba(92,255,138,.02)}
  .a-claim li .n{width:28px;height:28px;border:1px solid var(--hair);display:grid;place-items:center;
    font-size:11px;color:var(--dim);letter-spacing:.06em;border-radius:50%}
  .a-claim li.active .n{border-color:var(--g);color:var(--g)}
  .a-claim li.done .n{border-color:var(--g);background:var(--g);color:#031006;font-weight:700}
  .a-claim li .info .ttl{font-size:13px;color:var(--fg);letter-spacing:.02em;
    text-transform:uppercase;margin-bottom:5px}
  .a-claim li.done .info .ttl{color:var(--dim)}
  .a-claim li .info .desc{font-size:11.5px;color:var(--dim);line-height:1.55;letter-spacing:.02em;max-width:48ch}
  .a-claim li .info .desc b{color:var(--fg);font-weight:500}
  .a-claim li .info .desc a{color:var(--g);text-decoration:underline;text-decoration-color:rgba(92,255,138,.4)}
  .a-claim li .info .meta{margin-top:8px;font-size:10px;color:var(--dim);letter-spacing:.14em;display:flex;gap:14px}
  .a-claim li .info .meta span::before{content:"› ";color:var(--g)}
  .a-claim li .info .meta a{color:var(--g);text-decoration:none}
  .a-claim li .info .meta a:hover{text-decoration:underline;text-underline-offset:3px}
  .a-claim li .action{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
  .a-claim li button.go{background:var(--g);color:#031006;border:0;font:inherit;font-weight:600;
    padding:10px 16px;letter-spacing:.18em;cursor:pointer;font-size:11px;text-transform:uppercase;
    white-space:nowrap}
  .a-claim li button.go.xshare{background:#1d9bf0;color:#000}
  .a-claim li button.go:disabled{background:transparent;color:var(--dim);border:1px solid var(--hair);
    cursor:not-allowed}
  .a-claim li .check{font-size:13px;color:var(--g);letter-spacing:.18em}

  .a-claim .progressbar{margin:24px 0 18px;height:3px;background:var(--hair);position:relative}
  .a-claim .progressbar i{position:absolute;left:0;top:0;bottom:0;background:var(--g);
    transition:width .4s ease}
  .a-claim .progresslbl{font-size:10.5px;color:var(--dim);letter-spacing:.14em;display:flex;
    justify-content:space-between;margin-bottom:18px}
  .a-claim .progresslbl b{color:var(--g);font-weight:500}

  .a-claim .ship{margin-top:24px;padding:18px 20px;border:1px solid var(--hair);
    display:flex;justify-content:space-between;align-items:center;gap:18px}
  .a-claim .ship .lbl{font-size:11px;color:var(--dim);letter-spacing:.14em}
  .a-claim .ship .lbl b{color:var(--fg);font-weight:500;display:block;margin-top:4px;font-size:12px}
  .a-claim .ship .sz{display:flex;gap:6px;flex-wrap:wrap}
  .a-claim .ship .sz button{background:transparent;border:1px solid var(--hair);color:var(--fg);
    font:inherit;font-size:11px;letter-spacing:.12em;padding:8px 12px;cursor:pointer;min-width:42px}
  .a-claim .ship .sz button.sel{border-color:var(--g);color:var(--g);background:rgba(92,255,138,.06)}
  .a-claim .submit{margin-top:18px;width:100%;background:var(--g);color:#031006;border:0;
    padding:18px;font:inherit;font-size:12px;letter-spacing:.22em;cursor:pointer;font-weight:600;
    text-transform:uppercase}
  .a-claim .submit:disabled{background:transparent;color:var(--dim);border:1px solid var(--hair);
    cursor:not-allowed}
  .a-claim .legal{margin-top:14px;font-size:10px;color:var(--dim);letter-spacing:.08em;line-height:1.6;
    text-align:center}

  /* claim success */
  .a-claim .success{padding:50px 36px;text-align:center}
  .a-claim .success .ico{font-size:48px;color:var(--g);line-height:1;margin-bottom:18px}
  .a-claim .success h3{margin:0;font-size:32px;letter-spacing:-.01em;font-weight:500;
    text-transform:uppercase;color:var(--fg)}
  .a-claim .success h3 .acc{color:var(--g)}
  .a-claim .success p{margin:18px auto 0;color:var(--dim);font-size:13px;line-height:1.6;max-width:42ch}
  .a-claim .success .code{margin:28px auto 0;display:inline-flex;border:1px dashed var(--g);
    padding:16px 22px;font-size:18px;color:var(--g);letter-spacing:.3em}
  .a-claim .success .meta{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--hair);border:1px solid var(--hair)}
  .a-claim .success .meta div{background:#050605;padding:14px;display:flex;flex-direction:column;gap:4px}
  .a-claim .success .meta .k{font-size:10px;color:var(--dim);letter-spacing:.16em}
  .a-claim .success .meta .v{font-size:12px;color:var(--fg);letter-spacing:.06em}
`;

const ASCII_41 = `\
  ██╗  ██╗ ██╗ ███████╗ ████████╗
  ██║  ██║███║ ██╔════╝ ╚══██╔══╝
  ███████║╚██║ ███████╗    ██║   
  ╚════██║ ██║ ╚════██║    ██║   
       ██║ ██║ ███████║    ██║   
       ╚═╝ ╚═╝ ╚══════╝    ╚═╝   `;

// Claim flow: connect telemetry → wait for wrapped → share on X → ship
function AClaim({ product, onClose }) {
  const [step, setStep] = React.useState(0);
  const [done, setDone] = React.useState({ connect: false, wrapped: false, share: false });
  const [wrapProgress, setWrapProgress] = React.useState(0);
  const [submitted, setSubmitted] = React.useState(false);

  React.useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [onClose]);

  React.useEffect(() => {
    if (!done.connect || done.wrapped) return;
    const t = setInterval(() => {
      setWrapProgress((p) => {
        const n = p + (3 + Math.random() * 7);
        if (n >= 100) {
          clearInterval(t);
          setDone((d) => ({ ...d, wrapped: true }));
          setStep(2);
          return 100;
        }
        return n;
      });
    }, 280);
    return () => clearInterval(t);
  }, [done.connect, done.wrapped]);

  const handleConnect = () => {
    window.open('https://latitude.so/claude-code', '_blank', 'noopener,noreferrer');
    setDone((d) => ({ ...d, connect: true }));setStep(1);
  };
  const handleShare = () => {
    const text = `my claude code wrapped from @trylatitude this week — ${product.name.toLowerCase()}. drop 001 / 41st archive.`;
    const url = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(text);
    window.open(url, '_blank', 'noopener,noreferrer');
    setDone((d) => ({ ...d, share: true }));setStep(3);
  };

  const completedCount = (done.connect ? 1 : 0) + (done.wrapped ? 1 : 0) + (done.share ? 1 : 0);
  const completed = completedCount === 3;

  if (submitted) {
    const code = `41-${product.sku.split('-')[1]}-${String(product.edN + 1).padStart(2, '0')}-${Math.random().toString(36).slice(2, 6).toUpperCase()}`;
    return (
      <div className="a-claim" onClick={(e) => e.target.classList.contains('a-claim') && onClose()}>
        <div className="box">
          <div className="hd">
            <button className="back" onClick={onClose} aria-label="Back">← BACK</button>
            <span><span className="g">$</span> /archive_001/claim/{product.sku}.confirmed</span>
            <span style={{ marginLeft: 'auto' }}><b>STATUS: ELIGIBLE</b></span>
          </div>
          <button className="x" onClick={onClose} aria-label="Close">[ ESC ] ✕</button>
          <div className="success">
            <div className="ico">▸▸▸</div>
            <h3>YOU&rsquo;RE ENTERED.<br /><span className="acc">{product.name}</span> · GOOD LUCK.</h3>
            <p>We saw your post. If you land in this week's <b style={{ color: '#e6e6e6' }}>top 5</b>, we'll DM you on X <b style={{ color: '#e6e6e6' }}>the week after your share</b>. Your tee then ships in under 7 days.</p>
            <div className="code">{code}</div>
            <div className="meta">
              <div><span className="k">PIECE</span><span className="v">{product.name}</span></div>
              <div><span className="k">SHIPS</span><span className="v">WORLDWIDE · FREE</span></div>
              <div><span className="k">EDITION</span><span className="v">ED. {pad(product.edN+1)}/{product.edTotal}</span></div>
            </div>
          </div>
        </div>
      </div>);

  }

  return (
    <div className="a-claim" onClick={(e) => e.target.classList.contains('a-claim') && onClose()}>
      <div className="box">
        <div className="hd">
          <button className="back" onClick={onClose} aria-label="Back">← BACK</button>
          <span><span className="g">$</span> /archive_001/claim/{product.sku}.flow</span>
          <span style={{ marginLeft: 'auto' }}><b>{completedCount}/3 STEPS · {completed ? 'ENTRY READY' : 'IN PROGRESS'}</b></span>
        </div>
        <button className="x" onClick={onClose} aria-label="Close">[ ESC ] ✕</button>
        <div className="body">
          <div className="top">
            <h2>CLAIM <span className="acc">{product.name}</span></h2>
            <div className="sku">
              <span>{product.sku} · ED. {pad(product.edN + 1)}/{product.edTotal}</span>
              <b>RETAIL <span style={{ textDecoration: 'line-through', color: '#6c6c6c' }}>{money(product.price)}</span></b>
              <span className="free">FREE · DROP 001</span>
            </div>
          </div>

          <ol>
            <li className={done.connect ? 'done' : step === 0 ? 'active' : ''}>
              <span className="n">{done.connect ? '✓' : '01'}</span>
              <div className="info">
                <div className="ttl">CONNECT CLAUDE CODE TELEMETRY TO LATITUDE</div>
                <div className="desc">Run the <b>npx</b> integration command from <a href="https://latitude.so/claude-code" target="_blank" rel="noopener noreferrer">latitude.so/claude-code</a> to start exporting your Claude Code traces. Under five minutes in the terminal.</div>
                <div className="meta"><span>5 MIN SETUP</span><span>OTEL EXPORTER</span><span><a href="https://docs.latitude.so/telemetry/claude-code" target="_blank" rel="noopener noreferrer">VIEW DOCS ↗</a></span></div>
              </div>
              <div className="action">
                {done.connect ?
                <span className="check">▸ CONNECTED</span> :
                <button className="go" onClick={handleConnect}>▸ CONNECT</button>}
              </div>
            </li>

            <li className={done.wrapped ? 'done' : step === 1 ? 'active' : ''}>
              <span className="n">{done.wrapped ? '✓' : '02'}</span>
              <div className="info">
                <div className="ttl">GET YOUR CLAUDE CODE WRAPPED</div>
                <div className="desc">Every <b>Friday</b>, Latitude sends your Wrapped automatically: <b>top tools, total spend, session count, subagent breakdown, and more.</b> Ready to share — no edits.</div>
                {done.connect && !done.wrapped &&
                <>
                    <div style={{ height: 3, background: '#1f1f1f', position: 'relative', marginTop: 10 }}>
                      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, background: '#5cff8a', width: wrapProgress + '%', transition: 'width .25s' }} />
                    </div>
                    <div className="meta" style={{ marginTop: 8 }}><span>{Math.floor(wrapProgress)}% · CRUNCHING TRACES, TOOLS, SUBAGENTS</span></div>
                  </>
                }
                {!done.connect &&
                <div className="meta" style={{ marginTop: 8 }}><span style={{ color: '#6c6c6c' }}>UNLOCKS AFTER STEP 01</span></div>
                }
              </div>
              <div className="action">
                {done.wrapped ?
                <span className="check">▸ READY</span> :
                <button className="go" disabled>{done.connect ? 'BUILDING…' : 'LOCKED'}</button>}
              </div>
            </li>

            <li className={done.share ? 'done' : step === 2 ? 'active' : ''}>
              <span className="n">{done.share ? '✓' : '03'}</span>
              <div className="info">
                <div className="ttl">SHARE ON X · TAG <span style={{ color: 'var(--g)' }}>@TRYLATITUDE</span></div>
                <div className="desc">Post your Wrapped on X and tag <b>@trylatitude</b>. We pick the <b>top 5 posts</b> and DM the winners <b>the week after</b>. 🎁</div>
                <div className="meta"><span>WINNERS DM'D ON X</span><span>THE WEEK AFTER</span><span>SHIPS WORLDWIDE</span></div>
              </div>
              <div className="action">
                {done.share ?
                <span className="check">▸ SHARED</span> :
                <button className="go xshare" disabled={!done.wrapped} onClick={handleShare}>▸ SHARE ON X</button>}
              </div>
            </li>
          </ol>

          <div className="progressbar"><i style={{ width: completedCount / 3 * 100 + '%' }} /></div>
          <div className="progresslbl">
            <span>// {completedCount}/3 COMPLETE</span>
            <b>{completed ? 'YOU&rsquo;RE IN. CONFIRM SIZE.' : `${3 - completedCount} STEP${3 - completedCount === 1 ? '' : 'S'} REMAINING`}</b>
          </div>

          <button className="submit" disabled={!completed} onClick={() => setSubmitted(true)}>
            {completed ? '▸ SUBMIT MY ENTRY' : `LOCKED · COMPLETE ${3 - completedCount} MORE STEP${3 - completedCount === 1 ? '' : 'S'}`}
          </button>
          <div className="legal">
            5 WINNERS PER WEEK · WINNERS CONTACTED VIA X THE WEEK AFTER · NO PURCHASE NECESSARY<br />
            BY ENTERING YOU AGREE TO LATITUDE TERMS · PRIZE NOT TRANSFERABLE
          </div>
        </div>
      </div>
    </div>);

}

function ADetail({ product, onClose, onClaim }) {
  const sold = product.stock === 'sold';
  const sizes = ['M', 'L', 'XL'];
  const [sel, setSel] = React.useState('M');
  const [view, setView] = React.useState('rear');
  const goneSizes = sold ? sizes : [];
  const currentImg = view === 'front' ? FRONT : product.rear;
  const wk = useNextFriday();

  React.useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [onClose]);

  return (
    <div className="a-modal">
      <div className="head">
        <button className="back" onClick={onClose} aria-label="Back to archive">← BACK TO ARCHIVE</button>
        <span className="crumb"><span className="g">$</span> cat ./archive_001/{product.sku}.product</span>
        <span style={{ marginLeft: 'auto' }}>{SERIES[product.series].label}</span>
        <span>·</span>
        <span><b>{sold ? 'OFFLINE' : 'LIVE'}</b></span>
      </div>
      <button className="x" onClick={onClose} aria-label="Close">[ ESC ] ✕</button>

      <div className="inner">
        <div className="gallery">
          <div className="preview">
            <span className="corner tl" /><span className="corner tr" />
            <span className="corner bl" /><span className="corner br" />
            <span className="stamp">{view === 'rear' ? 'REAR · PRINT' : view === 'zoom' ? 'DETAIL · PRINT ZOOM' : 'FRONT · LOGO'}</span>
            <img src={currentImg} alt={product.name}
              style={view === 'zoom' ? {transform:'scale(2.6) translateY(7%)', transformOrigin:'center center'} : {}} />
          </div>
          <div className="thumbs">
            <button className={view === 'rear' ? 'sel' : ''} onClick={() => setView('rear')}>
              <img src={product.rear} alt="" />
              <span>REAR</span>
            </button>
            <button className={view === 'zoom' ? 'sel' : ''} onClick={() => setView('zoom')}>
              <img src={product.rear} alt="" style={{transform:'scale(2.6) translateY(7%)', transformOrigin:'center center'}} />
              <span>DETAIL</span>
            </button>
            <button className={view === 'front' ? 'sel' : ''} onClick={() => setView('front')}>
              <img src={FRONT} alt="" />
              <span>FRONT</span>
            </button>
          </div>
        </div>

        <div className="info">
          <h2>
            <span className="cap">// {product.tag}</span>
            {product.name}
          </h2>
          <div className="sku-row">
            <span>{product.sku}</span>
            <span><b>EDITION {pad(product.edN)} / {product.edTotal}</b></span>
            <span><b style={{ color: 'var(--g)' }}>FREE · DROP 001</b></span>
          </div>
          <p>{DESCRIPTION}</p>
          <div className="wkcd">
            <span className="wkcd-lbl">&gt; THIS WEEK CLOSES IN</span>
            <span className="wkcd-val"><b>{wk.d}d {pad(wk.h)}h {pad(wk.m)}m</b></span>
            <span className="wkcd-end">5 tees / wk</span>
          </div>

          <div className="sizes">
            {sizes.map((s) =>
            <button key={s}
            className={(goneSizes.includes(s) ? 'gone ' : '') + (sel === s ? 'sel' : '')}
            onClick={() => !goneSizes.includes(s) && setSel(s)}>{s}</button>
            )}
          </div>

          <div className="specs">
            {SPECS.map(([k, v]) => <div key={k}><span>{k}</span><b>{v}</b></div>)}
          </div>

          <button className={'buy' + (sold ? ' sold' : '')} onClick={() => !sold && onClaim && onClaim(product)}>
            {sold ?
            '// EDITION SOLD OUT — JOIN WAITLIST' :
            <>▸ ENTER TO WIN — FREE<small>3 STEPS · TOP 5 POSTS WIN A FREE TEE</small></>}
          </button>
          <div className="meta-lst">
            <span>FREE SHIPPING</span>
            <span>SHIPS 03 JUN 2026</span>
          </div>
        </div>
      </div>
    </div>);

}

function ACard({ p, i, onOpen }) {
  return (
    <div className="a-card" onClick={() => onOpen(p)}>
      <div className="frame">
        <span className="corner tl" /><span className="corner tr" />
        <span className="corner bl" /><span className="corner br" />
        <span className="badge">[{pad(i + 1)}]</span>
        <span className="badge r">ED.{pad(p.edN)}/{p.edTotal}</span>
        <img src={p.rear} alt={p.name} />
      </div>
      <div className="meta">
        <div className="sub">
          <span className="sku">{p.sku}</span>
          <span className="price"><span className="strike">{money(p.price)}</span>FREE</span>
        </div>
        <div className="nm">{p.name}</div>
        <div className="stk">
          <span>{SERIES[p.series].label.split(' · ')[0]}</span>
          <span>IN STOCK</span>
        </div>
      </div>
    </div>);

}

function DirectionA() {
  const [cat, setCat] = React.useState('ALL');
  const [open, setOpen] = React.useState(null);
  const [claim, setClaim] = React.useState(null);
  const c = useNextFriday();

  const cats = [
  { id: 'ALL', label: 'all', n: PRODUCTS.length },
  { id: 'NEVER', label: 'never replace me', n: PRODUCTS.filter((p) => p.series === 'NEVER').length },
  { id: 'CALL', label: 'call my agent', n: PRODUCTS.filter((p) => p.series === 'CALL').length }];

  const filtered = cat === 'ALL' ? PRODUCTS : PRODUCTS.filter((p) => p.series === cat);

  const seriesStats = [
  { id: 'NEVER', desc: 'Things AI cannot do for you.' },
  { id: 'CALL', desc: 'Outsource everything else.' }];

  React.useEffect(() => {
    const scrollToHash = () => {
      const id = window.location.hash.replace('#', '');
      if (!id) return;
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    };
    scrollToHash();
    window.addEventListener('hashchange', scrollToHash);
    return () => window.removeEventListener('hashchange', scrollToHash);
  }, []);

  return (
    <div className="a-root">
      <style>{A_STYLE}</style>

      <div className="a-announce">
        <div className="badge"><span className="blip" />DROP 001 · FREE</div>
        <div className="marquee">
          <div className="t">
            <span>5 TEES · 5 WINNERS</span>
            <span>CONNECT CLAUDE CODE TELEMETRY → GET YOUR WRAPPED FRIDAY → SHARE TO @TRYLATITUDE</span>
            <span>TOP 5 POSTS WIN A FREE TEE</span>
            <span>NO PURCHASE NECESSARY</span>
            <span>DROP 001 ONLY</span>
            <span>EVERY TEE FREE</span>
            <span>5 WINNERS</span>
            <span>SHARE YOUR WRAPPED</span>
          </div>
        </div>
        <button className="cta" onClick={() => document.getElementById('a-howto').scrollIntoView({ behavior: 'smooth', block: 'start' })}>HOW TO CLAIM ↓</button>
      </div>

      <div className="a-top">
        <div className="l">
          <span className="g">$</span>
          <span><b className="g">41st</b><span className="dim">@archive</span></span>
          <span className="dim">: ~ / drop_001 /</span>
        </div>
        <div className="c dim">[ secure session · tls 1.3 · port 41 ]</div>
        <div className="r">
          <span className="dim">system</span><span className="a-dot" />
          <span className="dim">|</span>
          <span>BAG[ 00 ]</span>
        </div>
      </div>

      <section className="a-hero" id="hero">
        <div className="a-prompt">
          <b>archive@41st</b>:~$ ls ./drop_001/<span className="a-cursor" />
        </div>

        <pre className="a-ascii"><span className="g">{ASCII_41}</span></pre>

        <div className="a-headline">
          <h1>
            <span className="lbl">// archive 001 · five objects against the machine · <span style={{ color: 'var(--g)' }}>every tee free · no purchase</span></span>
            I'M NOT AFRAID OF AI.<br />
            <span className="strike">AI WILL NEVER REPLACE MY —</span>
          </h1>
          <div className="info">
            <div className="row"><span>DROP</span><b>001 / NEVER REPLACE ME</b></div>
            <div className="row"><span>FORMAT</span><b>NUMBERED · 50 PER SKU</b></div>
            <div className="row"><span>PRIZE</span><b>5 TEES / WEEK</b></div>
            <div className="row"><span>WINNERS</span><b>DM'D ON X · WEEK AFTER</b></div>
            <div className="row"><span>SHIPS</span><b>WORLDWIDE · FREE</b></div>
          </div>
        </div>

        <div className="a-cdn">
          <div className="lbl">&gt;&gt; NEXT_WRAPPED_DROPS_IN</div>
          <div className="val">
            {pad(c.d)}<span className="sep">:</span>{pad(c.h)}<span className="sep">:</span>{pad(c.m)}<span className="sep">:</span>{pad(c.s)}
          </div>
          <div className="end">EVERY FRIDAY<br />09:00 UTC ↗</div>
        </div>
      </section>

      <section className="a-series" id="series">
        {seriesStats.map((s) =>
        <div key={s.id} className="s">
            <div className="lb">{SERIES[s.id].label}</div>
            <div className="ttl">{s.desc}</div>
            <div className="ct">{PRODUCTS.filter((p) => p.series === s.id).length} PIECES · {PRODUCTS.filter((p) => p.series === s.id && p.stock === 'sold').length} SOLD OUT</div>
          </div>
        )}
      </section>

      <nav className="a-cats" id="shop">
        {cats.map((x) =>
        <button key={x.id} className={cat === x.id ? 'on' : ''} onClick={() => setCat(x.id)}>
            {'>'} {x.label} <span className="ct">[{pad(x.n)}]</span>
          </button>
        )}
        <span className="end">// sort: edition_remaining ↓</span>
      </nav>

      <div className="a-lsh">
        <span>IDX</span><span>SKU</span><span>NAME</span><span>EDITION</span><span>STATUS</span><span>PRICE</span>
      </div>

      <div className="a-grid" id="a-grid">
        {filtered.map((p, i) => <ACard key={p.sku} p={p} i={PRODUCTS.indexOf(p)} onOpen={setOpen} />)}
      </div>

            <section className="a-claim-banner" id="a-howto">
        <div className="ribbon">
          <div className="ribbon-l">▾ ▾ ▾</div>
          <div className="ribbon-c">EVERY TEE ABOVE — FREE.</div>
          <div className="ribbon-r">▾ ▾ ▾</div>
        </div>
      <section className="a-howto" id="how-to-win">
        <div className="lead">
          <div>
            <div className="lb">// HOW TO WIN · 3 STEPS</div>
            <h2 style={{ marginTop: 12 }}>5 tees.<br />5 <span>winners</span>.<br />Share your <span>Claude Code Wrapped</span> on X.</h2>
          </div>
          <div className="meta">
            JUDGED WEEKLY<br />
            <b>TOP 5 POSTS WIN</b><br />
            DROP 001 CLOSES 31 MAY
          </div>
        </div>
        <div className="steps">
          <div className="step">
            <div className="num">01 · CONNECT<span className="ico">⌬</span></div>
            <h3>Connect Claude Code telemetry to Latitude</h3>
            <p>Run the <b style={{ color: 'var(--fg)' }}>npx</b> integration command from <a href="https://latitude.so/claude-code" target="_blank" rel="noopener noreferrer">latitude.so/claude-code</a> to start exporting your Claude Code traces. Two lines in the terminal — you're in.</p>
            <div className="keys"><i><a href="https://latitude.so/claude-code" target="_blank" rel="noopener noreferrer">GET STARTED ↗</a></i><i><a href="https://docs.latitude.so/telemetry/claude-code" target="_blank" rel="noopener noreferrer">DOCS ↗</a></i></div>
            <div className="arrow">▸</div>
          </div>
          <div className="step">
            <div className="num">02 · WRAP<span className="ico">◐</span></div>
            <h3>Get your Wrapped every Friday</h3>
            <p>Latitude automatically sends your <b style={{ color: 'var(--fg)' }}>Claude Code Wrapped</b> — top tools, total spend, session count, subagent breakdown, and more.</p>
            <div className="keys"><i>WEEKLY</i><i>AUTOMATIC</i><i>SHAREABLE</i></div>
            <div className="arrow">▸</div>
          </div>
          <div className="step">
            <div className="num">03 · SHARE<span className="ico">↗</span></div>
            <h3>Share on X · tag <span style={{ color: 'var(--g)' }}>@trylatitude</span></h3>
            <p>Post your Wrapped on X and tag <b style={{ color: 'var(--fg)' }}>@trylatitude</b>. We pick the <b style={{ color: 'var(--fg)' }}>top 5 posts</b> and DM the winners on X <b style={{ color: 'var(--fg)' }}>the week after</b>. 🎁</p>
            <div className="keys"><i>TOP 5 WIN</i><i>DM'D ON X · WEEK AFTER</i><i>SHIPS WORLDWIDE</i></div>
          </div>
        </div>
        <div className="foot">
          <div className="left">
            <span>NO PURCHASE NECESSARY</span>
            <span>·</span>
            <span>TOP 5 POSTS PER WEEK</span>
            <span>·</span>
            <span><b>WORLDWIDE SHIPPING INCLUDED</b></span>
          </div>
          <button className="start" onClick={() => setClaim(PRODUCTS[0])}>▸ START NOW</button>
        </div>
      </section>
      </section>

      <section className="a-who" id="who">
        <div className="lbl">// WHO</div>
        <div className="body">
          <p>
            41st@archive is a Latitude project. <span>Latitude is where developers watch what their AI agents actually do:</span> tool calls, tokens, and weird loops. <span>The shirts above are the things agents can't do for you.</span> <b>Drop 001 is for the people building everything else.</b>
          </p>
          <a className="cta" href="https://latitude.so" target="_blank" rel="noopener noreferrer">[ LATITUDE.SO ↗ ]</a>
        </div>
      </section>

      <footer className="a-ft" id="footer">
        <div>
          <h4>// SHOP</h4>
          <ul>
            <li><a href="#a-grid" onClick={(e) => {e.preventDefault();setCat('NEVER');document.getElementById('a-grid').scrollIntoView({ behavior: 'smooth', block: 'start' });}}>NEVER REPLACE ME</a></li>
            <li><a href="#a-grid" onClick={(e) => {e.preventDefault();setCat('CALL');document.getElementById('a-grid').scrollIntoView({ behavior: 'smooth', block: 'start' });}}>CALL MY AGENT</a></li>
            <li><a href="#a-grid" onClick={(e) => {e.preventDefault();setCat('ALL');document.getElementById('a-grid').scrollIntoView({ behavior: 'smooth', block: 'start' });}}>FULL ARCHIVE</a></li>
            <li><a href="#a-howto" onClick={(e) => {e.preventDefault();document.getElementById('a-howto').scrollIntoView({ behavior: 'smooth', block: 'start' });}}>HOW TO WIN</a></li>
          </ul>
        </div>
        <div>
          <h4>// LATITUDE</h4>
          <ul>
            <li><a href="https://latitude.so" target="_blank" rel="noopener noreferrer">LATITUDE.SO ↗</a></li>
            <li><a href="https://latitude.so/claude-code" target="_blank" rel="noopener noreferrer">CLAUDE CODE ↗</a></li>
            <li><a href="https://docs.latitude.so/telemetry/claude-code" target="_blank" rel="noopener noreferrer">DOCS ↗</a></li>
            <li><a href="https://x.com/trylatitude" target="_blank" rel="noopener noreferrer">@TRYLATITUDE ↗</a></li>
            <li><a href="mailto:hello@latitude.so?subject=41st Archive 001">HELLO@LATITUDE.SO</a></li>
          </ul>
        </div>
      </footer>

      <div className="a-colof">
        <span>© LATITUDE · ARCHIVE 001 · MMXXVI</span>
        <span>SHIPS WORLDWIDE · FREE</span>
        <span>v1.0.0 · LAST_PUSH 27 MAY 2026</span>
      </div>

      {open && <ADetail product={open} onClose={() => setOpen(null)} onClaim={(p) => {setOpen(null);setClaim(p);}} />}
      {claim && <AClaim product={claim} onClose={() => setClaim(null)} />}
    </div>);

}

window.DirectionA = DirectionA;