:root{
    color-scheme:dark;
    --bg:#05060A;
    --panel:#070C14;
    --panel-2:#0B121C;
    --cyan:#12E8FB;
    --magenta:#F30CFE;
    --violet:#8B2CF5;
    --text:#E6F7FA;
    --muted:#86A0AC;
    --line:rgba(18,232,251,.28);
    --line-soft:rgba(18,232,251,.14);
    --ok:#3DFFA5;
    --chamfer:14px;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; position:relative; min-height:100vh;
    background:var(--bg);
    background-image:
      linear-gradient(rgba(18,232,251,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18,232,251,.045) 1px, transparent 1px);
    background-size:56px 56px;
    color:var(--text);
    font-family:"Barlow","Segoe UI",system-ui,sans-serif;
    font-size:16px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  [hidden]{ display:none!important; }
  ::selection{ background:var(--magenta); color:#fff; }
  :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

  h1,h2,h3{ font-family:"Chakra Petch","Arial Narrow",sans-serif; text-transform:uppercase; margin:0; text-wrap:balance; letter-spacing:.01em; line-height:1.02; }
  .mono{ font-family:"JetBrains Mono",ui-monospace,monospace; }

  #rain{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.55; }
  header, main, footer{ position:relative; z-index:1; }
  .wrap{ max-width:1180px; margin-inline:auto; padding-inline:24px; }

  /* ---------- chamfered panel ---------- */
  .panel{
    position:relative; isolation:isolate;
    background:linear-gradient(135deg, rgba(18,232,251,.75), rgba(139,44,245,.45) 55%, rgba(243,12,254,.55));
    clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  }
  .panel::before{
    content:""; position:absolute; inset:1px; z-index:-1; background:var(--panel);
    clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  }
  .panel-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 16px; border-bottom:1px solid var(--line-soft);
    font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan);
  }
  .panel-head .tag{ color:var(--muted); }
  .panel-head i{ display:inline-block; width:8px; height:8px; background:var(--magenta); margin-right:8px; box-shadow:0 0 8px var(--magenta); }

  /* ---------- nav ---------- */
  header.topnav{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:60;
    background:rgba(5,6,10,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{ max-width:1180px; margin-inline:auto; padding-inline:24px; height:66px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
  .brand-mark{ width:42px; height:32px; border-radius:6px; overflow:hidden; background:#000; flex:none; box-shadow:0 0 0 1px var(--line), 0 0 14px rgba(18,232,251,.25); }
  .brand-mark img{ width:100%; height:100%; object-fit:cover; }
  .brand-word{ font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:.06em; }
  .nav-status{ font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; display:flex; align-items:center; gap:8px; }
  .nav-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
  nav.nav-links{ display:flex; align-items:center; gap:6px; }
  nav.nav-links a{ font-family:"Chakra Petch",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; text-decoration:none; padding:8px 12px; color:var(--text); opacity:.78; border-bottom:1px solid transparent; }
  nav.nav-links a:hover{ opacity:1; border-color:var(--cyan); }
  .btn{
    font-family:"Chakra Petch",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.84rem;
    display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:2px; text-decoration:none; cursor:pointer; white-space:nowrap;
    border:1px solid var(--cyan); transition:box-shadow .15s ease, transform .15s ease, background .15s ease;
  }
  .btn-solid{ background:var(--cyan); color:#021014; }
  .btn-solid:hover{ box-shadow:0 0 22px rgba(18,232,251,.6); transform:translateY(-1px); }
  .btn-ghost{ background:transparent; color:var(--cyan); }
  .btn-ghost:hover{ background:rgba(18,232,251,.1); box-shadow:0 0 18px rgba(18,232,251,.3); }
  .btn-hot{ background:linear-gradient(95deg,var(--cyan),var(--violet) 55%,var(--magenta)); color:#04030a; border-color:transparent; }
  .btn-hot:hover{ box-shadow:0 0 24px rgba(243,12,254,.5); transform:translateY(-1px); }
  .burger{ display:none; width:42px; height:42px; border:1px solid var(--line); background:transparent; color:var(--cyan); align-items:center; justify-content:center; cursor:pointer; }
  #mobile-menu{ display:none; flex-direction:column; background:rgba(5,6,10,.96); border-bottom:1px solid var(--line); }
  #mobile-menu a{ padding:15px 24px; border-top:1px solid var(--line-soft); font-family:"Chakra Petch",sans-serif; text-transform:uppercase; letter-spacing:.08em; text-decoration:none; font-weight:500; }
  @media (max-width:900px){
    nav.nav-links, .nav-status, .nav-cta{ display:none; }
    .burger{ display:flex; }
    #mobile-menu.open{ display:flex; }
  }

  /* ---------- hero ---------- */
  .hero{ position:relative; padding-block:64px 24px; background:
      radial-gradient(60% 55% at 85% 35%, rgba(18,232,251,.14), transparent 70%),
      radial-gradient(45% 45% at 8% 20%, rgba(243,12,254,.13), transparent 70%); }
  .hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:32px; align-items:center; }
  .kicker{ display:inline-flex; align-items:center; gap:10px; font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); border:1px solid var(--line); padding:7px 14px; background:rgba(18,232,251,.06); }
  .kicker b{ color:var(--magenta); font-weight:700; }
  .hero h1{ font-size:clamp(2.7rem,6.6vw,5.2rem); font-weight:700; margin-top:22px; }
  .hero h1 .hot{ background:linear-gradient(95deg,var(--cyan),var(--violet) 60%,var(--magenta)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p.lede{ color:#C3D8DF; max-width:52ch; font-size:1.1rem; margin-top:22px; }
  .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
  .hero-meta{ margin-top:28px; font-family:"JetBrains Mono",monospace; font-size:.78rem; color:var(--muted); letter-spacing:.04em; display:flex; flex-wrap:wrap; gap:6px 18px; }
  .hero-meta a{ text-decoration:none; color:var(--text); }
  .hero-meta a:hover{ color:var(--cyan); }
  .hero-meta span::before{ content:"// "; color:var(--magenta); }

  .hud-stage{ perspective:900px; display:flex; justify-content:center; }
  .hud-wrap{ position:relative; width:100%; max-width:620px; aspect-ratio:1; transition:transform .18s ease-out; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
  #hud{ position:absolute; inset:0; width:100%; height:100%; }
  .hud-logo{ position:absolute; left:50%; top:50%; width:30%; transform:translate(-50%,-50%); border-radius:8px; box-shadow:0 0 30px rgba(243,12,254,.5), 0 0 60px rgba(18,232,251,.25); }
  @media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } .hud-wrap{ max-width:480px; } }

  /* ---------- telemetry ---------- */
  .telemetry-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:28px; font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .telemetry-head b{ color:var(--cyan); font-weight:500; }
  .telemetry{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px; }
  .code{
    margin:0; padding:14px 16px; height:13.2em; overflow:hidden; font-family:"JetBrains Mono",monospace; font-size:.74rem; line-height:1.55; color:#8FE9F4; white-space:pre;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
  }
  .code .hl{ color:var(--magenta); }
  .code .dim{ color:#4E6B76; }
  @media (max-width:900px){ .telemetry{ grid-template-columns:1fr; } .code{ height:10em; } }

  /* ---------- ticker ---------- */
  .ticker{ margin-top:48px; border-block:1px solid var(--line); background:rgba(7,12,20,.8); overflow:hidden; white-space:nowrap; padding-block:13px; }
  .ticker-track{ display:inline-flex; animation:tick 34s linear infinite; }
  .ticker-track span{ font-family:"JetBrains Mono",monospace; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text); padding-right:30px; }
  .ticker-track span b{ color:var(--magenta); font-weight:700; margin-inline:14px 0; }
  @keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  section{ padding-block:84px; scroll-margin-top:66px; }
  .sec-head .eyebrow{ font-family:"JetBrains Mono",monospace; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--magenta); }
  .sec-head .eyebrow::before{ content:"> "; color:var(--cyan); }
  .sec-head h2{ font-size:clamp(2rem,4.6vw,3.3rem); font-weight:700; margin-top:12px; }
  .sec-head p{ color:#A9C0C8; margin-top:14px; max-width:58ch; }

  /* ---------- modules console ---------- */
  .console{ display:grid; grid-template-columns:340px 1fr; gap:20px; margin-top:40px; align-items:start; }
  .mod-list{ display:flex; flex-direction:column; gap:8px; }
  .mod{
    display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; text-align:left; width:100%;
    background:var(--panel); border:1px solid var(--line-soft); color:var(--text); padding:13px 16px; cursor:pointer;
    font-family:"Chakra Petch",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.92rem;
    transition:border-color .15s, background .15s, transform .15s;
  }
  .mod .n{ font-family:"JetBrains Mono",monospace; font-size:.7rem; color:var(--muted); width:46px; height:40px; display:flex; align-items:center; justify-content:center;
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background:rgba(18,232,251,.1); color:var(--cyan); }
  .mod .arr{ color:var(--muted); font-family:"JetBrains Mono",monospace; }
  .mod:hover{ border-color:var(--cyan); transform:translateX(3px); }
  .mod.on{ border-color:var(--cyan); background:linear-gradient(90deg, rgba(18,232,251,.14), var(--panel) 80%); box-shadow:inset 3px 0 0 var(--magenta); }
  .mod.on .n{ background:var(--magenta); color:#150018; }
  .mod.on .arr{ color:var(--magenta); }

  .term-body{ padding:22px 22px 24px; min-height:340px; display:flex; flex-direction:column; }
  #term-out{ font-family:"JetBrains Mono",monospace; font-size:.9rem; line-height:1.85; flex:1; }
  #term-out .line{ white-space:pre-wrap; overflow-wrap:anywhere; }
  #term-out .cmd{ color:var(--muted); }
  #term-out .cmd::first-letter{ color:var(--magenta); }
  #term-out .key{ color:var(--cyan); }
  #term-out .val{ color:var(--text); }
  #term-out .ok{ color:var(--ok); }
  #term-out .caret::after{ content:"▍"; color:var(--cyan); animation:blink 1s steps(1) infinite; margin-left:2px; }
  @keyframes blink{ 50%{ opacity:0; } }
  .term-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft); }
  .term-foot .hint{ font-family:"JetBrains Mono",monospace; font-size:.74rem; color:var(--muted); letter-spacing:.06em; }
  @media (max-width:900px){
    .console{ grid-template-columns:1fr; }
    .mod-list{ flex-direction:row; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
    .mod{ min-width:230px; }
  }

  /* ---------- stats ---------- */
  .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .stat{ padding:26px 22px; display:flex; flex-direction:column; gap:6px; }
  .stat .k{ font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .stat .v{ font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(2.2rem,4vw,3rem); line-height:1; background:linear-gradient(95deg,var(--cyan),var(--magenta)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .stat .d{ font-size:.88rem; color:#A9C0C8; }
  .gauge{ width:74px; height:74px; margin-bottom:4px; }
  .gauge circle{ fill:none; stroke-width:6; }
  .gauge .bg{ stroke:rgba(18,232,251,.15); }
  .gauge .fg{ stroke:url(#gaugeGrad); stroke-linecap:butt; stroke-dasharray:var(--p) 100; transform:rotate(-90deg); transform-origin:50% 50%; }
  @media (max-width:900px){ .stats{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .stats{ grid-template-columns:1fr; } }

  /* ---------- scan frames ---------- */
  .note{ font-size:.92rem; color:#A9C0C8; max-width:62ch; margin-top:14px; }
  .note a{ color:var(--cyan); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line); }
  .note a:hover{ border-color:var(--cyan); }
  .frames{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
  .frame{ aspect-ratio:4/3; position:relative; overflow:hidden; background:linear-gradient(160deg,#0a1420,#06090f); border:1px solid var(--line-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
  .frame::after{ content:""; position:absolute; left:0; right:0; height:36%; top:-40%; background:linear-gradient(to bottom, transparent, rgba(18,232,251,.16), transparent); animation:scan 4.5s linear infinite; }
  .frame:nth-child(2n)::after{ animation-delay:-1.2s; }
  .frame:nth-child(3n)::after{ animation-delay:-2.6s; }
  @keyframes scan{ from{ top:-40%; } to{ top:110%; } }
  .frame .c{ position:absolute; width:18px; height:18px; border:2px solid var(--cyan); }
  .frame .c.tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
  .frame .c.tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
  .frame .c.bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
  .frame .c.br{ bottom:10px; right:10px; border-left:0; border-top:0; }
  .frame svg{ width:42px; height:42px; color:var(--cyan); opacity:.9; }
  .frame .t{ font-family:"Chakra Petch",sans-serif; font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.9rem; }
  .frame .s{ font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
  .frame:hover{ border-color:var(--magenta); }
  @media (max-width:760px){ .frames{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:460px){ .frames{ grid-template-columns:1fr; } }

  /* ---------- reviews ---------- */
  .log-body{ padding:26px 26px 28px; }
  .log-meta{ font-family:"JetBrains Mono",monospace; font-size:.8rem; line-height:1.9; color:var(--muted); }
  .log-meta .key{ color:var(--cyan); }
  .log-meta .val{ color:var(--text); }
  .log-meta .ok{ color:var(--ok); }
  blockquote{ margin:22px 0 0; font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.2; text-transform:none; border-left:3px solid var(--magenta); padding-left:20px; }
  .log-text{ color:#A9C0C8; margin-top:16px; max-width:64ch; }
  .log-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:24px; }
  .chip{ font-family:"JetBrains Mono",monospace; font-size:.76rem; letter-spacing:.06em; padding:8px 14px; border:1px solid var(--line); color:var(--text); }
  .chip b{ color:var(--cyan); }
  .like{ display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--text); border:1px solid var(--line); padding:8px 14px; font-family:"JetBrains Mono",monospace; font-size:.76rem; letter-spacing:.06em; cursor:pointer; }
  .like:hover{ border-color:var(--cyan); }
  .like.liked{ color:var(--magenta); border-color:var(--magenta); }
  .like.liked svg{ fill:var(--magenta); }
  .like svg{ width:15px; height:15px; }

  /* ---------- about ---------- */
  .about-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start; }
  .about-grid p{ color:#B4CAD2; }
  .about-grid p strong{ color:#fff; }
  .about-grid a.inline{ color:var(--cyan); text-decoration:none; border-bottom:1px solid var(--line); }
  .spec{ list-style:none; margin:0; padding:6px 22px 14px; }
  .spec li{ display:flex; justify-content:space-between; gap:16px; padding-block:13px; border-bottom:1px dashed var(--line-soft); font-size:.9rem; }
  .spec li:last-child{ border-bottom:0; }
  .spec .k{ font-family:"JetBrains Mono",monospace; color:var(--muted); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
  .spec .v{ text-align:right; font-weight:600; }
  .spec a{ color:var(--cyan); text-decoration:none; }
  .spec a:hover{ text-decoration:underline; }
  @media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }

  /* ---------- contact ---------- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:22px; margin-top:38px; align-items:start; }
  .contact-info{ padding:8px 22px 22px; }
  .crow{ display:flex; gap:14px; align-items:flex-start; padding-block:14px; border-bottom:1px dashed var(--line-soft); font-size:.95rem; }
  .crow svg{ width:20px; height:20px; color:var(--magenta); flex:none; margin-top:2px; }
  .crow a{ text-decoration:none; border-bottom:1px solid var(--line); }
  .crow a:hover{ border-color:var(--cyan); }
  .socials{ display:flex; gap:10px; margin-top:18px; }
  .socials a{ width:40px; height:40px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--cyan); }
  .socials a:hover{ background:rgba(18,232,251,.1); border-color:var(--cyan); }
  .socials svg{ width:17px; height:17px; }
  form{ padding:22px; display:flex; flex-direction:column; gap:14px; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .field label{ display:block; font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
  .field input,.field select,.field textarea{
    width:100%; font-family:"Barlow",sans-serif; font-size:1rem; color:var(--text); background:#050A11; border:1px solid var(--line); padding:12px 14px; border-radius:2px; outline:none;
  }
  .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(18,232,251,.16); }
  .field textarea{ min-height:112px; resize:vertical; }
  .form-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
  #form-status{ font-family:"JetBrains Mono",monospace; font-size:.76rem; color:var(--ok); }
  #form-status.err{ color:#FF5C8A; }
  @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .row2{ grid-template-columns:1fr; } }

  /* ---------- hat lab ---------- */
  .hl-steps{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
  .hl-step{ display:flex; align-items:center; gap:10px; font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-soft); padding:8px 14px; background:rgba(7,12,20,.6); }
  .hl-step b{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; background:rgba(18,232,251,.12); color:var(--cyan); border-radius:50%; font-size:.7rem; }
  .hl-step.on{ color:var(--text); border-color:var(--cyan); }
  .hl-step.on b{ background:var(--cyan); color:#021014; }
  .hatlab{ display:grid; grid-template-columns:370px 1fr; gap:20px; margin-top:26px; align-items:start; }
  .hat-list{ display:flex; flex-direction:column; gap:8px; max-height:580px; overflow-y:auto; padding-right:6px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
  .hat{ display:grid; grid-template-columns:60px 1fr; gap:12px; align-items:center; text-align:left; width:100%; background:var(--panel); border:1px solid var(--line-soft); color:var(--text); padding:7px 12px 7px 7px; cursor:pointer; transition:border-color .15s, transform .15s; }
  .hat:hover{ border-color:var(--cyan); transform:translateX(3px); }
  .hat.on{ border-color:var(--cyan); background:linear-gradient(90deg, rgba(18,232,251,.14), var(--panel) 80%); box-shadow:inset 3px 0 0 var(--magenta); }
  .hat img{ width:60px; height:60px; object-fit:contain; background:#fff; padding:4px; mix-blend-mode:multiply; }
  .hat .nm{ display:block; font-family:"Chakra Petch",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.86rem; line-height:1.15; }
  .hat .pr{ display:block; font-family:"JetBrains Mono",monospace; font-size:.72rem; color:var(--cyan); margin-top:3px; }
  .hat-detail{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .view{ position:relative; overflow:hidden; background:#fff; aspect-ratio:1; min-height:340px; padding:28px; }
  .view img{ display:block; position:absolute; inset:28px; width:calc(100% - 56px); height:calc(100% - 56px); object-fit:contain; z-index:1; mix-blend-mode:multiply; }
  .view::after{ content:""; position:absolute; left:0; right:0; height:30%; top:-40%; background:linear-gradient(to bottom, transparent, rgba(18,232,251,.28), transparent); animation:scan 5s linear infinite; z-index:2; pointer-events:none; }
  .view .c{ position:absolute; width:18px; height:18px; border:2px solid #0A8FA0; z-index:3; }
  .view .c.tl{ top:12px; left:12px; border-right:0; border-bottom:0; }
  .view .c.tr{ top:12px; right:12px; border-left:0; border-bottom:0; }
  .view .c.bl{ bottom:12px; left:12px; border-right:0; border-top:0; }
  .view .c.br{ bottom:12px; right:12px; border-left:0; border-top:0; }
  .hat-info{ padding:24px; display:flex; flex-direction:column; gap:14px; }
  .hat-info h3{ font-size:1.7rem; font-weight:700; }
  .hat-price{ font-family:"JetBrains Mono",monospace; font-size:.8rem; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; }
  .hat-price b{ font-family:"Chakra Petch",sans-serif; font-size:1.9rem; color:var(--cyan); letter-spacing:0; margin-left:6px; }
  .hat-desc{ color:#B4CAD2; font-size:.95rem; margin:0; }
  .tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .htag{ font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border:1px solid var(--line); color:var(--text); }
  .htag.hot{ border-color:var(--magenta); color:var(--magenta); }
  .hat-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:6px; }
  .hl-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:20px; }
  .hl-flow div{ border:1px solid var(--line-soft); background:rgba(7,12,20,.7); padding:14px 16px; font-size:.88rem; color:#B4CAD2; }
  .hl-flow b{ display:block; font-family:"Chakra Petch",sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--text); font-size:.9rem; margin-bottom:4px; }
  .designs-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:44px; }
  .designs-head h3{ font-size:1.4rem; font-weight:700; }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
  .dchip{ font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.04em; text-decoration:none; padding:8px 14px; border:1px solid var(--line); background:rgba(7,12,20,.7); color:var(--text); }
  .dchip:hover{ border-color:var(--magenta); color:var(--magenta); }
  .dchip.more{ border-color:var(--cyan); color:var(--cyan); }
  @media (max-width:960px){
    .hatlab{ grid-template-columns:1fr; }
    .hat-list{ flex-direction:row; max-height:none; overflow-x:auto; overflow-y:hidden; padding-bottom:6px; }
    .hat{ min-width:250px; }
    .hat-detail{ grid-template-columns:1fr; }
    .hl-flow{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:520px){ .hl-flow{ grid-template-columns:1fr; } }

  /* ---------- store ---------- */
  .coll-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:30px; }
  .coll{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1px solid var(--line-soft); background:var(--panel); text-decoration:none; transition:border-color .15s, transform .15s; }
  .coll:hover{ border-color:var(--magenta); transform:translateY(-2px); }
  .coll .t{ font-family:"Chakra Petch",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.95rem; }
  .coll .n{ font-family:"JetBrains Mono",monospace; font-size:.7rem; color:var(--cyan); letter-spacing:.08em; text-transform:uppercase; }
  .prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px; }
  .prod{ background:var(--panel); border:1px solid var(--line-soft); text-decoration:none; display:flex; flex-direction:column; transition:border-color .15s, transform .15s; }
  .prod:hover{ border-color:var(--cyan); transform:translateY(-3px); }
  .prod .pi{ position:relative; aspect-ratio:1; background:#fff; }
  .prod .pi img{ display:block; position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:contain; mix-blend-mode:multiply; }
  .prod .pb{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; }
  .prod .pt{ font-weight:600; font-size:.92rem; line-height:1.25; }
  .prod .pp{ font-family:"JetBrains Mono",monospace; font-size:.8rem; color:var(--cyan); }
  .prod .pk{ font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .shop-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
  @media (max-width:960px){ .coll-grid, .prod-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:420px){ .prod-grid{ grid-template-columns:1fr; } }

  footer{ border-top:1px solid var(--line); background:rgba(3,4,7,.9); padding-block:44px; text-align:center; }
  footer .brand-word{ font-size:1.3rem; }
  .foot-tag{ margin-top:8px; font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .foot-links{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
  .foot-links a{ font-family:"Chakra Petch",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; font-weight:500; text-decoration:none; color:var(--muted); }
  .foot-links a:hover{ color:var(--cyan); }

  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .ticker-track, .frame::after, .view::after{ animation:none; }
    #rain{ display:none; }
    #term-out .caret::after{ animation:none; }
    .hud-wrap{ transition:none; }
  }