:root{ --ink:#0B0B0C; --paper:#EDEAE0; --hotpink:#FF2E9A; --line:rgba(237,234,224,0.14); }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{background:var(--ink);color:var(--paper);font-family:'Space Grotesk',sans-serif;overflow-x:hidden;user-select:none;}
  #cursor{position:fixed;top:0;left:0;width:44px;height:44px;border:1.5px solid var(--paper);border-radius:50%;pointer-events:none;z-index:60;transform:translate(-50%,-50%);mix-blend-mode:exclusion;}
  #cursor::after{content:'';position:absolute;top:50%;left:50%;width:3px;height:3px;background:var(--paper);border-radius:50%;transform:translate(-50%,-50%);}
  @media (hover:none){#cursor{display:none;}}

  #scroll-spacer{position:relative;}

  /* ---- HERO ---- */
  #hero{position:fixed;inset:0;z-index:0;overflow:hidden;
    background:
      radial-gradient(circle at 80% 25%, rgba(255,46,154,0.22), transparent 45%),
      radial-gradient(circle at 10% 85%, rgba(255,46,154,0.10), transparent 40%),
      var(--ink);
  }
  .reg{position:fixed;width:24px;height:24px;z-index:20;mix-blend-mode:exclusion;pointer-events:none;}
  .reg svg{width:100%;height:100%;}
  .reg.tl{top:20px;left:20px;} .reg.tr{top:20px;right:20px;} .reg.bl{bottom:20px;left:20px;} .reg.br{bottom:20px;right:20px;}

  .hero-nav{position:fixed;top:32px;left:6vw;z-index:20;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;mix-blend-mode:exclusion;}
  .hero-cart{position:fixed;top:32px;right:6vw;z-index:20;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;mix-blend-mode:exclusion;text-transform:uppercase;background:none;border:none;color:var(--paper);cursor:pointer;display:flex;align-items:center;gap:6px;}
  #cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--hotpink);color:#0B0B0C;font-size:13px;font-weight:800;line-height:1;letter-spacing:0;font-family:'Space Grotesk',sans-serif;isolation:isolate;mix-blend-mode:normal;}
  .cart-count-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;}
  .cart-reticle{position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%) scale(.85);pointer-events:none;animation:reticlePulse 1.7s ease-in-out infinite;}
  .cart-reticle svg{width:100%;height:100%;stroke:var(--paper);fill:none;}
  @keyframes reticlePulse{
    0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(.8);}
    50%{opacity:1;transform:translate(-50%,-50%) scale(1.15);}
  }
  .cart-reticle.firing{animation:reticleFire .3s cubic-bezier(.2,1.6,.4,1);}
  @keyframes reticleFire{
    0%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    20%{opacity:1;transform:translate(-50%,-50%) scale(1.9);}
    45%{opacity:1;transform:translate(-50%,-50%) scale(.55);}
    70%{transform:translate(-50%,-50%) scale(1.15);}
    100%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  }

  /* "shot" impact effect: fired when the cart-count reticle is tapped/clicked — a sharp,
     quick crack + burst (~0.5s) before the cart opens. Opacity/transform only (no filter),
     so it stays cheap to composite even on mobile. */
  #shot-fx{position:fixed;inset:0;z-index:210;pointer-events:none;opacity:0;background:radial-gradient(circle at 92% 7%, rgba(255,255,255,.5), rgba(255,46,154,.4) 25%, transparent 55%);}
  #shot-fx svg{width:100%;height:100%;transform-origin:92% 7%;}
  #shot-fx.active{animation:shotFlash .5s ease-out;}
  #shot-fx.active svg{animation:shotZoom .5s cubic-bezier(.1,.7,.2,1) both;}
  #shot-fx svg polyline.crack{fill:none;stroke:var(--paper);stroke-width:.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;}
  #shot-fx svg polyline.crack.ring{stroke-width:.45;opacity:.8;}

  /* actual glass fragments — paper fill + a dark ink outline so they read as solid,
     distinct chunks instead of blending into the bright flash near the impact point */
  #shot-fx svg polygon.shard{fill:rgba(237,234,224,.65);stroke:var(--ink);stroke-width:.45;vector-effect:non-scaling-stroke;stroke-linejoin:round;transform-origin:center;}
  #shot-fx.active svg polygon.shard{animation:shardPop .5s ease-out both;}
  #shot-fx.active svg polygon.shard:nth-of-type(2){animation-delay:.015s;}
  #shot-fx.active svg polygon.shard:nth-of-type(3){animation-delay:.03s;}
  #shot-fx.active svg polygon.shard:nth-of-type(4){animation-delay:.01s;}
  #shot-fx.active svg polygon.shard:nth-of-type(5){animation-delay:.045s;}
  #shot-fx.active svg polygon.shard:nth-of-type(6){animation-delay:.02s;}
  #shot-fx.active svg polygon.shard:nth-of-type(7){animation-delay:.05s;}
  #shot-fx.active svg polygon.shard:nth-of-type(8){animation-delay:.035s;}
  #shot-fx.active svg polygon.shard:nth-of-type(9){animation-delay:.06s;}
  #shot-fx.active svg polygon.shard:nth-of-type(10){animation-delay:.025s;}
  #shot-fx.active svg polygon.shard:nth-of-type(11){animation-delay:.065s;}
  #shot-fx.active svg polygon.shard:nth-of-type(12){animation-delay:.04s;}

  @keyframes shotFlash{
    0%{opacity:0;}
    10%{opacity:1;}
    22%{opacity:.85;}
    100%{opacity:0;}
  }
  @keyframes shotZoom{
    0%{transform:scale(1.06);}
    100%{transform:scale(1);}
  }
  @keyframes shardPop{
    0%{opacity:0;transform:scale(.5) rotate(0deg);}
    25%{opacity:1;transform:scale(1.15) rotate(8deg);}
    100%{opacity:0;transform:scale(1.6) rotate(20deg);}
  }
  body.shake{animation:screenShake .4s ease-out;}
  @keyframes screenShake{
    0%{transform:translate(0,0);}
    14%{transform:translate(-6px,3px);}
    28%{transform:translate(5px,-4px);}
    42%{transform:translate(-4px,2px);}
    56%{transform:translate(3px,-2px);}
    70%{transform:translate(-2px,1px);}
    85%{transform:translate(1px,-1px);}
    100%{transform:translate(0,0);}
  }

  .hero-center{position:absolute;top:58vh;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:0 6vw;}
  @media(max-width:900px){ .hero-center{top:44vh;} }
  .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.15em;color:var(--hotpink);text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
  .eyebrow .dot{width:6px;height:6px;background:var(--hotpink);border-radius:50%;animation:pulse 1.8s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.2;}}
  h1.wordmark{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(60px,13vw,175px);line-height:.85;letter-spacing:-.01em;text-transform:uppercase;}
  .hero-sub{max-width:460px;margin-top:22px;font-size:14px;line-height:1.6;color:rgba(237,234,224,.72);}

  /* product info bottom-right, huge price */
  #outro-info{display:none;}
  .circle-count{width:30px;height:30px;border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;margin-left:auto;margin-bottom:14px;color:var(--ink);}
  .coll-label{font-family:'Anton',sans-serif;font-size:24px;text-transform:uppercase;line-height:1;margin-bottom:8px;color:var(--ink);}
  .price-big{font-family:'Anton',sans-serif;font-size:clamp(38px,5vw,58px);line-height:1;color:var(--ink);}
  .price-range{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(11,11,12,.6);margin-top:6px;letter-spacing:.05em;}

  /* ---- hero avatar band (full width, top of page, cursor-tracking face) ---- */
  #model-corner{
    position:fixed; top:0; left:0; right:0; z-index:5;
    width:100%; height:58vh;
    overflow:hidden; display:block;
  }
  #model-corner canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 12%; cursor:default;}
  #model-corner::after{content:'';position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(180deg, rgba(11,11,12,0) 55%, rgba(11,11,12,.95) 100%);
  }
  #model-corner .corner-info{position:absolute; right:28px; bottom:24px; z-index:2; text-align:right;}
  #model-corner .corner-info .ltd-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,234,224,.55);margin-bottom:6px;}
  #model-corner .corner-info .ltd-big{font-family:'Anton',sans-serif;font-size:clamp(30px,3.6vw,46px);line-height:.88;text-transform:uppercase;color:var(--paper);}
  #model-corner .corner-info .ltd-sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--hotpink);margin-top:10px;}
  @media(max-width:900px){ #model-corner{height:44vh;} }

  #outro-buy{position:fixed;right:6vw;bottom:32px;z-index:20;width:220px;height:130px;background:var(--paper);border-radius:999px;display:flex;align-items:center;justify-content:center;transform:scale(0);transform-origin:right bottom;}
  #outro-buy span{font-family:'Anton',sans-serif;font-size:40px;color:var(--ink);text-transform:uppercase;}

  .scroll-cue{position:fixed;bottom:36px;left:6vw;z-index:20;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,234,224,.5);display:flex;align-items:center;gap:10px;mix-blend-mode:exclusion;}
  .scroll-cue .bar{width:1px;height:26px;background:linear-gradient(var(--paper),transparent);animation:drop 1.6s infinite;}
  @keyframes drop{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

  /* ---- PANEL / GALLERY ---- */
  #panel{position:fixed;inset:0;z-index:10;background:var(--ink);transform:translateY(100vh);border-top:1px solid var(--line);}
  .panel-inner{padding:min(130px,13vh) 6vw 200px;}
  .panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
  .panel-head h2{font-family:'Anton',sans-serif;font-size:clamp(30px,5vw,54px);text-transform:uppercase;}
  .panel-head p{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(237,234,224,.6);max-width:260px;}

  .trust-strip{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 28px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .trust-strip li{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(237,234,224,.7);display:flex;align-items:center;gap:6px;}
  .trust-strip li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--hotpink);flex:0 0 auto;}

  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  @media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr);}}
  @media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr);gap:22px;}}

  .card{position:relative;aspect-ratio:3/4;border:1px solid var(--line);overflow:hidden;transform:scale(0);will-change:transform;background:var(--paper);cursor:pointer;contain:layout paint;}
  .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box;transition:opacity .35s ease;}
  .card .card-back{opacity:0;}
  .card:hover .card-back, .card.flipped .card-back{animation:cardGlitchIn .5s steps(12,end) both;}
  .card:hover .card-front, .card.flipped .card-front{animation:cardGlitchOut .5s steps(12,end) both;}

  @keyframes cardGlitchIn{
    0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translate(0,0);filter:none;}
    8%{opacity:1;clip-path:inset(0 35% 0 0);transform:translate(-8px,0);filter:hue-rotate(90deg) saturate(2.2);}
    16%{clip-path:inset(55% 0 0 0);transform:translate(8px,0);filter:hue-rotate(-90deg) saturate(2.2);}
    24%{clip-path:inset(0 0 0 45%);transform:translate(-6px,3px);filter:hue-rotate(45deg);}
    32%{clip-path:inset(30% 55% 15% 0);transform:translate(6px,-3px);filter:hue-rotate(-45deg) saturate(1.6);}
    40%{clip-path:inset(0 0 60% 0);transform:translate(-4px,0);filter:none;}
    48%{clip-path:inset(0);transform:translate(5px,0);filter:hue-rotate(30deg);}
    60%{transform:translate(-2px,1px);filter:none;}
    100%{opacity:1;clip-path:inset(0);transform:translate(0,0);filter:none;}
  }
  @keyframes cardGlitchOut{
    0%{opacity:1;clip-path:inset(0);transform:translate(0,0);filter:none;}
    10%{clip-path:inset(0 0 65% 0);transform:translate(6px,0);filter:hue-rotate(-90deg) saturate(2.2);}
    22%{clip-path:inset(40% 0 0 30%);transform:translate(-6px,2px);filter:hue-rotate(90deg);}
    34%{opacity:.8;clip-path:inset(10% 40% 25% 0);transform:translate(5px,-3px);filter:saturate(1.8);}
    46%{opacity:.4;clip-path:inset(0 0 80% 0);transform:translate(-3px,0);}
    60%{opacity:.15;transform:translate(3px,0);filter:hue-rotate(60deg);}
    100%{opacity:0;clip-path:inset(0);transform:translate(0,0);filter:none;}
  }

  /* Lighter version for touch devices: filter (hue-rotate/saturate) is the most
     expensive part to composite on mid/low-end phone GPUs — drop it here and cut
     the step count so the flip feels instant instead of janky on mobile. */
  @media (hover:none){
    .card:hover .card-back, .card.flipped .card-back{animation:cardGlitchInLite .28s steps(5,end) both;}
    .card:hover .card-front, .card.flipped .card-front{animation:cardGlitchOutLite .28s steps(5,end) both;}
  }
  @keyframes cardGlitchInLite{
    0%{opacity:0;clip-path:inset(0 0 70% 0);transform:translate(-6px,0);}
    30%{opacity:1;clip-path:inset(0 30% 0 0);transform:translate(6px,0);}
    60%{clip-path:inset(0 0 20% 0);transform:translate(-3px,0);}
    100%{opacity:1;clip-path:inset(0);transform:translate(0,0);}
  }
  @keyframes cardGlitchOutLite{
    0%{opacity:1;clip-path:inset(0);transform:translate(0,0);}
    40%{opacity:.5;clip-path:inset(0 0 55% 0);transform:translate(5px,0);}
    100%{opacity:0;clip-path:inset(100% 0 0 0);transform:translate(0,0);}
  }
  .card .stock-badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--ink);color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;pointer-events:none;}
  .card .ink{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
  .card .ink svg{width:55%;height:55%;opacity:.85;}
  .card .tag{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(0deg, rgba(0,0,0,0.85), transparent);font-family:'JetBrains Mono',monospace;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;}
  .card .tag .name{font-size:11px;letter-spacing:.03em;color:var(--paper);flex:1 0 100%;}
  .card .tag .price{font-size:12px;color:var(--hotpink);}
  .card .tag .add-btn{margin-left:auto;background:var(--paper);color:var(--ink);border:none;border-radius:999px;padding:5px 12px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;}
  .card .tag .add-btn:hover{background:var(--hotpink);color:#0B0B0C;}
  .card .tag .add-btn:active{transform:scale(.95);}

  #outro-overlay{position:fixed;inset:0;background:var(--paper);opacity:0;pointer-events:none;z-index:25;}
  #outro-content{position:fixed;inset:0;z-index:26;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;pointer-events:none;}
  #outro-content h3{font-family:'Anton',sans-serif;color:var(--ink);font-size:clamp(28px,5vw,54px);text-transform:uppercase;margin-bottom:16px;}
  #outro-content p{color:rgba(11,11,12,.65);font-family:'JetBrains Mono',monospace;font-size:12px;margin-bottom:30px;letter-spacing:.04em;}
  .cta{background:var(--ink);color:var(--paper);border:none;padding:18px 42px;border-radius:999px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;cursor:pointer;text-transform:uppercase;}

  /* keyboard focus visibility */
  a:focus-visible, button:focus-visible, .cta:focus-visible{
    outline:2px solid var(--hotpink); outline-offset:3px; border-radius:2px;
  }

  /* always-reachable legal links (visible & keyboard-focusable regardless of scroll position) */
  #legal-bar{position:fixed;bottom:12px;left:6vw;z-index:21;display:flex;gap:12px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;mix-blend-mode:exclusion;}
  #legal-bar a{color:var(--paper);text-decoration:none;opacity:.85;}
  #legal-bar a:hover, #legal-bar a:focus-visible{opacity:1;}
  #legal-bar a:focus-visible{outline:2px solid var(--paper);outline-offset:2px;border-radius:2px;}

  /* footer legal links (reachable at the end of the scroll sequence) */
  #site-footer{position:relative;z-index:27;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin-top:28px;}
  #site-footer a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:rgba(11,11,12,.65);}
  #site-footer a:hover{color:var(--ink);text-decoration:underline;}

  /* ---- shopping cart drawer ---- */
  .cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;opacity:0;transition:opacity .25s ease;}
  .cart-overlay.open{opacity:1;}
  .cart-overlay[hidden]{display:none;}

  .cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);background:#141416;border-left:1px solid var(--line);z-index:201;display:flex;flex-direction:column;padding:24px;transform:translateX(100%);transition:transform .3s ease;}
  .cart-drawer.open{transform:translateX(0);}
  .cart-drawer.open.burst-in{animation:cartBurstIn .45s cubic-bezier(.15,.9,.25,1.15);}
  .cart-drawer[hidden]{display:none;}
  @keyframes cartBurstIn{
    0%{transform:translateX(100%);}
    55%{transform:translateX(-3%);}
    75%{transform:translateX(1.5%);}
    100%{transform:translateX(0);}
  }

  .cart-drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex:0 0 auto;}
  .cart-drawer-head h2{font-family:'Anton',sans-serif;font-size:22px;text-transform:uppercase;color:var(--paper);}
  .cart-close{background:none;border:none;color:var(--paper);font-size:18px;cursor:pointer;line-height:1;padding:4px;}

  .cart-items{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;}
  .cart-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:14px;}
  .cart-item-info{flex:1 0 60%;display:flex;flex-direction:column;gap:2px;}
  .cart-item-name{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--paper);}
  .cart-item-price{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(237,234,224,.55);}
  .cart-item-qty{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--paper);}
  .qty-btn{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--paper);cursor:pointer;font-size:14px;line-height:1;}
  .qty-btn:hover{border-color:var(--hotpink);color:var(--hotpink);}
  .cart-item-remove{margin-left:auto;background:none;border:none;color:rgba(237,234,224,.5);font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.05em;text-decoration:underline;cursor:pointer;}
  .cart-item-remove:hover{color:var(--hotpink);}

  .cart-empty{font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(237,234,224,.5);margin-top:20px;}

  .cart-footer{flex:0 0 auto;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);}
  .cart-total{font-family:'Anton',sans-serif;font-size:20px;color:var(--paper);margin-bottom:14px;text-transform:uppercase;}
  .cart-checkout{width:100%;background:var(--hotpink);color:#0B0B0C;border:none;padding:16px;border-radius:999px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;}
  .cart-checkout:disabled{opacity:.4;cursor:not-allowed;}
  .cart-reassure{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(237,234,224,.55);text-align:center;margin-top:10px;letter-spacing:.02em;}

  @media (prefers-reduced-motion: reduce){
    .eyebrow .dot{animation:none;}
    .scroll-cue .bar{animation:none;}
    .cart-overlay, .cart-drawer{transition:none;}
    .card img{transition:none;}
    .card:hover .card-back, .card.flipped .card-back{animation:none;opacity:1;}
    .card:hover .card-front, .card.flipped .card-front{animation:none;opacity:0;}
    .cart-reticle{animation:none;opacity:.85;transform:translate(-50%,-50%) scale(1);}
    .cart-reticle.firing{animation:none;}
    #shot-fx.active,
    #shot-fx.active svg,
    #shot-fx.active svg polygon.shard{animation:none;}
    .cart-drawer.open.burst-in{animation:none;}
    body.shake{animation:none;}
  }
