/* NWXT Central — shared by the portal and NWXT Live (on top of nwxt.css) */
html{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip;-webkit-tap-highlight-color:transparent}
img{-webkit-user-drag:none;user-select:none}
.mast .nav a.central{border-style:dashed}

/* labels, kickers, buttons */
.kick{font-family:var(--f-label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.kick b{font-weight:normal;color:var(--ink-strong)}
.kick .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px transparent}}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-num);font-size:17px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--paper);background:var(--accent);border:3px solid var(--accent);padding:9px 18px 7px;cursor:pointer;line-height:1;white-space:nowrap;transition:transform .15s steps(3),box-shadow .15s steps(3)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink-strong)}
.btn.ghost{background:transparent;color:var(--ink-strong);border-color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:5px 5px 0 var(--accent)}
.btn .ar{font-family:var(--f-ui);font-size:15px}
.ghosted{font-family:var(--f-display);text-transform:uppercase;color:var(--display);line-height:.86;letter-spacing:.01em;margin:0;
  text-shadow:-3px 3px 0 var(--ghost-a),-6px 6px 0 var(--ghost-b)}
.hl{color:var(--accent)}

/* the notched frame (NWXT Live): a rounded panel with a notch cut out of its top and bottom edges */
.frame{position:relative;border-radius:34px;background:var(--fr-bg);color:var(--fr-ink);isolation:isolate;overflow:hidden}
.notch{position:absolute;left:50%;transform:translateX(-50%);z-index:6;background:var(--paper);display:flex;align-items:center;gap:8px;padding:0 18px}
.notch.top{top:0;border-radius:0 0 22px 22px;height:54px;padding-top:0}
.notch.bot{bottom:0;border-radius:22px 22px 0 0;height:64px}
/* the inverse corners where the notch meets the frame's edge */
.notch::before,.notch::after{content:"";position:absolute;width:22px;height:22px;background:transparent;pointer-events:none}
.notch.top::before{left:-22px;top:0;border-top-right-radius:22px;box-shadow:8px -8px 0 8px var(--paper)}
.notch.top::after{right:-22px;top:0;border-top-left-radius:22px;box-shadow:-8px -8px 0 8px var(--paper)}
.notch.bot::before{left:-22px;bottom:0;border-bottom-right-radius:22px;box-shadow:8px 8px 0 8px var(--paper)}
.notch.bot::after{right:-22px;bottom:0;border-bottom-left-radius:22px;box-shadow:-8px 8px 0 8px var(--paper)}
.pill{font-family:var(--f-label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:2px solid var(--ink);border-radius:99px;padding:7px 14px 6px;white-space:nowrap;background:none;cursor:pointer;line-height:1.1}
.pill:hover,.pill.on{background:var(--ink);color:var(--paper)}
.pill.acc{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.pill.acc:hover{background:var(--ink-strong);border-color:var(--ink-strong)}

/* liquid glass */
.glass{background:color-mix(in srgb,#fff 12%,transparent);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid color-mix(in srgb,#fff 30%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 35%,transparent),0 18px 40px rgba(0,0,0,.35);color:#fff}

/* sections below the hero */
.sec{margin-top:clamp(56px,8vw,110px);scroll-margin-top:20px}
.sec-head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:18px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:22px}
.sec-head .no{font-family:var(--f-num);font-size:clamp(34px,4vw,56px);color:var(--accent);line-height:.8}
.sec-head h2{font-family:var(--f-display);font-size:clamp(24px,4.2vw,58px);line-height:.9;color:var(--ink-strong);margin:0;text-transform:uppercase;letter-spacing:.01em}
.sec-head .kick{text-align:right;max-width:28ch}
@media (max-width:700px){.sec-head{grid-template-columns:auto 1fr}.sec-head .kick{grid-column:1 / -1;text-align:left;max-width:none}}
.lead{font-family:var(--f-ui);font-size:clamp(15px,1.35vw,18px);line-height:1.45;color:var(--ink-strong);max-width:62ch;margin:0}
.lead.soft{color:var(--ink)}

/* a locked world / thing that is not out yet */
.nudge{animation:nudge .42s steps(6)}
@keyframes nudge{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* entrance */
.rise{opacity:0;transform:translateY(16px)}
body.in .rise{animation:wrise 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes wrise{to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.seen{opacity:1;transform:none}