/* ==========================================================================
   ariyel.com/ari — "Unleashed"
   One pinned, scroll-driven story: you switch Ari on, Ari scans every record,
   sorts 240 leads into a live Lead strength chart, opens one lead's summary,
   clones itself into six workers, then goes into maniac mode.

   Same contract as the rest of the site: no JavaScript, every colour is a
   token (or a color-mix of tokens), no borders. The motion is CSS
   scroll-driven animation, like the comparison cards on the homepage, and it
   only runs at 1000px+ with motion allowed. Everywhere else every element
   rests in its FINISHED state, so the page reads as a stacked storyboard.
   The 240 dots and the streamed summary words are generated by
   scripts/build-ari-page.py (css/ari-field.css + marked regions in ari.html).
   ========================================================================== */

.un{
  --un-glow: color-mix(in srgb, var(--accent) 34%, transparent);
  --un-glow-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --un-deep: color-mix(in srgb, var(--accent) 72%, var(--n-950));
  --un-deeper: color-mix(in srgb, var(--accent) 40%, var(--n-950));
  --un-night: color-mix(in srgb, var(--accent) 14%, var(--n-950));
  --un-on-dark: var(--n-0);
  --un-on-dark-2: color-mix(in srgb, var(--n-0) 74%, transparent);
  --un-glass: color-mix(in srgb, var(--n-0) 7%, transparent);
  --un-glass-ring: color-mix(in srgb, var(--n-0) 14%, transparent);
  --un-pink: color-mix(in srgb, var(--tag-magenta-fg) 55%, var(--accent-200));
  --un-grad: linear-gradient(100deg, var(--accent-hover) 0%, var(--accent) 48%, var(--un-pink) 100%);
  --un-tile: color-mix(in srgb, var(--accent) 6%, var(--n-100));
  --un-lit: var(--accent-200);
  position: relative;
  background: linear-gradient(180deg, var(--n-0) 0%, var(--accent-50) 100%);
  font-family: var(--font-marketing);
  color: var(--ink);
}

/* ── Product surfaces, drawn from the app's own CSS ──────────────────────── */
/* aster-tokens.css makes every img display:block + max-width:100%; keep the
   width/height attributes for layout space but let the ratio decide height. */
.un img{height:auto}
.un .ui{font-family:var(--font-sans);font-size:var(--t-body);line-height:var(--t-body-lh);letter-spacing:var(--t-body-ls);font-weight:var(--fw-medium);color:var(--ink);text-align:left}
.un .ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.un .ari{width:16px;height:16px;flex:none}
.un .hue-grey{--h-bg:var(--tag-grey-bg);--h-ring:var(--tag-grey-ring);--h-fg:var(--tag-grey-fg)}
.un .hue-blue{--h-bg:var(--tag-blue-bg);--h-ring:var(--tag-blue-ring);--h-fg:var(--tag-blue-fg)}
.un .hue-cyan{--h-bg:var(--tag-cyan-bg);--h-ring:var(--tag-cyan-ring);--h-fg:var(--tag-cyan-fg)}
.un .hue-green{--h-bg:var(--tag-green-bg);--h-ring:var(--tag-green-ring);--h-fg:var(--tag-green-fg)}
.un .hue-yellow{--h-bg:var(--tag-yellow-bg);--h-ring:var(--tag-yellow-ring);--h-fg:var(--tag-yellow-fg)}
.un .hue-orange{--h-bg:var(--tag-orange-bg);--h-ring:var(--tag-orange-ring);--h-fg:var(--tag-orange-fg)}
.un .hue-red{--h-bg:var(--tag-red-bg);--h-ring:var(--tag-red-ring);--h-fg:var(--tag-red-fg)}
.un .hue-purple{--h-bg:var(--tag-purple-bg);--h-ring:var(--tag-purple-ring);--h-fg:var(--tag-purple-fg)}

.un .win{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-2xl);background:var(--n-0);box-shadow:var(--shadow-hairline),var(--shadow-overlay),0 30px 60px -30px var(--un-glow-soft)}
.un .win__bar{display:flex;align-items:center;gap:var(--s-4);height:40px;flex:none;padding:0 14px;box-shadow:inset 0 -1px 0 var(--border);font-size:var(--t-label);color:var(--ink-3)}
.un .win__dots{display:flex;gap:6px;margin-right:6px}
.un .win__dots i{width:10px;height:10px;border-radius:50%;background:var(--n-150)}
.un .win__crumb{display:flex;align-items:center;gap:6px;white-space:nowrap}
.un .win__crumb b{font-weight:var(--fw-medium);color:var(--ink)}
.un .win__crumb .ico{width:13px;height:13px;color:var(--ink-4)}
.un .av{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;border-radius:var(--r-squircle);background:var(--h-bg);color:var(--h-fg);font-size:9.5px;font-weight:var(--fw-semibold);letter-spacing:0}
.un .av--lg{width:34px;height:34px;font-size:13px}
.un .av--sm{width:18px;height:18px;font-size:8.5px}
.un .tag{display:inline-flex;align-items:center;height:var(--h-chip);padding:0 7px;border-radius:var(--r-chip);background:var(--h-bg);color:var(--h-fg);box-shadow:inset 0 0 0 1px var(--h-ring);font-size:var(--t-label);line-height:var(--t-label-lh);font-weight:var(--fw-medium);white-space:nowrap}
.un .person{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px 0 3px;border-radius:var(--r-chip);background:var(--n-50);font-size:13px;white-space:nowrap}
.un .rec-head{display:flex;align-items:center;gap:var(--s-6);flex:none;padding:12px 20px 10px}
.un .rec-head__name{font-size:18px;line-height:24px;font-weight:var(--fw-semibold);letter-spacing:-.02em}
.un .rec-head__sub{font-size:var(--t-label);line-height:var(--t-label-lh);color:var(--ink-3)}
.un .rec-head__btns{display:flex;gap:6px;margin-left:auto}
.un .btn-sec{display:inline-flex;align-items:center;gap:6px;height:var(--h-control);padding:0 10px;border-radius:var(--r-md);background:var(--n-0);box-shadow:var(--shadow-raised);font-size:13px;white-space:nowrap}
.un .btn-sec .ico{width:14px;height:14px;color:var(--ink-2)}
.un .rail{display:flex;flex-direction:column;gap:2px;padding:14px 16px}
.un .rail__h{margin-bottom:6px;font-size:var(--t-label);color:var(--ink-3)}
.un .fld{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:var(--s-4);min-height:32px;font-size:13px}
.un .fld__k{display:flex;align-items:center;gap:6px;color:var(--ink-3);font-size:var(--t-label)}
.un .fld__k .ico,.un .fld__k .ari{width:13px;height:13px}
.un .fld__v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.un .fld__v u{text-decoration:underline;text-decoration-color:var(--n-200);text-underline-offset:3px}
.un .ls{display:inline-flex;align-items:center;gap:var(--s-4);white-space:nowrap}
.un .ls i{width:8px;height:8px;flex:none;border-radius:var(--r-pill);background:var(--h-fg)}
.un .ari-sec{display:flex;flex-direction:column;gap:6px}
.un .ari-h{display:flex;align-items:center;gap:4px;min-height:var(--h-chip);font-size:var(--t-label);color:var(--n-600)}
.un .ari-h b{margin-left:2px;color:var(--ink);font-weight:var(--fw-medium)}
.un .ari-c{display:flex;flex-direction:column;gap:var(--s-4);padding:12px 16px;border-radius:var(--r-xl);background:var(--accent-50);box-shadow:inset 0 0 0 1px var(--accent-100)}
.un .ari-blocks{display:flex;flex-direction:column;gap:14px}
.un .ari-blk{display:flex;flex-direction:column;gap:2px;min-width:0}
.un .ari-blk .ari-label{margin:0;font-size:var(--t-label);line-height:18px;font-weight:var(--fw-medium);color:var(--n-600)}
.un .ari-blk p{margin:0;font-size:var(--t-body);line-height:22px;color:var(--ink)}
.un .ari-f{display:flex;align-items:center;gap:4px;margin-top:2px;padding-top:6px;box-shadow:inset 0 1px 0 var(--accent-100);font-size:var(--t-label);line-height:18px;color:var(--n-400)}
.un .ari-f span:last-child{margin-left:auto;padding-left:12px;white-space:nowrap}
@media (max-width:640px){.un .ari-f{flex-wrap:wrap}.un .ari-f span:last-child{margin-left:0;padding-left:0}}

/* ── The show: resting (storyboard) layout ──────────────────────────────── */
.un-stage{position:relative;overflow:clip}
.un-bgs{position:absolute;inset:0;pointer-events:none}
.un-bg,.un-shock,.un-flash{display:none}
.un-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s-10);padding:var(--s-17) var(--s-8) var(--s-16)}
.un-copy{display:contents}
.un-t{order:var(--o);max-width:44rem;text-align:center}
.un-t.t1,.un-t.t2{display:none}
.un-kick{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 7px;border-radius:var(--r-pill);background:var(--n-0);box-shadow:var(--shadow-raised);font-size:13px;font-weight:var(--fw-medium);color:var(--ink-2)}
.un-kick .ari{width:16px;height:16px}
.un-t h1,.un-t h2{margin:14px 0 0;font-size:clamp(34px,4.4vw,60px);font-weight:var(--fw-black);line-height:1;letter-spacing:-.045em;text-wrap:balance}
.un-t h1{font-size:clamp(44px,6vw,84px)}
.un-t.t6 h2{font-size:clamp(44px,7vw,110px);letter-spacing:-.05em}
.un-t p{max-width:34em;margin:14px auto 0;font-size:var(--t-prose-lg);line-height:1.5;letter-spacing:-.012em;color:var(--ink-2)}
.un-t .pin-only{display:none}
.un-grad{background:var(--un-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.un-on{display:inline-block}

.un-hero{order:var(--o);position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.un-sleepy{display:none}
.un-powered{display:block;width:clamp(180px,20vw,280px)}
.un-powered img{filter:drop-shadow(0 26px 40px var(--un-glow))}
.un-switch{display:flex;align-items:center;gap:var(--s-7);height:76px;padding:0 14px 0 26px;border-radius:var(--r-pill);background:var(--n-0);box-shadow:var(--shadow-overlay)}
.un-switch__lbl{display:flex;align-items:center;gap:var(--s-4);font-size:22px;font-weight:var(--fw-bold);letter-spacing:-.02em}
.un-switch__lbl .ari{width:24px;height:24px}
.un-switch__track{position:relative;width:96px;height:52px;border-radius:var(--r-pill);background:var(--accent);box-shadow:inset 0 2px 6px color-mix(in srgb, var(--n-950) 25%, transparent)}
.un-switch__knob{position:absolute;left:4px;top:4px;width:44px;height:44px;border-radius:50%;background:var(--n-0);box-shadow:var(--shadow-raised);translate:44px 0}
.un-switch__state{display:grid;width:44px;font:400 15px/1 var(--font-mono)}
.un-switch__state > *{grid-area:1/1}
.un-switch__state .off{opacity:0;color:var(--ink-4)}
.un-switch__state .on{color:var(--accent)}

/* the record field: 240 leads, resting as five dot bars */
.un-field{order:var(--o);position:relative;width:720px;max-width:none;height:330px}
.un-dots{position:absolute;inset:0}
.un-dots i{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--c)}
.un-beam,.un-scanner,.un-read,.un-vsglow{display:none}
.un-bar{position:absolute;top:292px;width:92px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;font-family:var(--font-sans)}
.un-bar b{font:400 17px/1.2 var(--font-mono);color:var(--ink);counter-reset:n var(--n)}
.un-bar b::after{content:counter(n)}
.un-bar span{font-size:var(--t-label);font-weight:var(--fw-medium);color:var(--ink-3);white-space:nowrap}
.un-bar span i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:var(--r-pill);background:var(--c);vertical-align:1px}

/* the story card */
.un-portal{order:var(--o);width:min(900px,100%)}
.un-portal .win{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:auto auto 1fr}
.un-portal .win__bar,.un-portal .rec-head{grid-column:1/-1}
.un-portal .rail{box-shadow:inset -1px 0 0 var(--border)}
.un-story{min-width:0;padding:16px 20px 20px}

/* the clone roster */
.un-roster{order:var(--o);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px;width:min(980px,100%);padding-top:34px}
.un-clone{position:relative;min-height:188px;padding:18px 18px 16px;border-radius:22px;background:var(--n-0);box-shadow:var(--shadow-overlay)}
.un-clone > img{position:absolute;left:-14px;top:-30px;width:128px;filter:drop-shadow(0 16px 20px var(--un-glow))}
.un-clone__top{min-height:84px;padding-left:112px}
.un-clone h3{margin:0;font-size:18px;font-weight:var(--fw-bold);letter-spacing:-.02em;line-height:1.15}
.un-clone p{margin:4px 0 0;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.un-mini{margin-top:12px;font-family:var(--font-sans);font-size:var(--t-label);font-weight:var(--fw-medium);color:var(--ink)}
.un-mail{display:grid;gap:5px;padding:9px 10px;border-radius:10px;background:var(--n-25);box-shadow:inset 0 0 0 1px var(--border)}
.un-mail i{display:block;height:6px;border-radius:4px;background:var(--n-150)}
.un-mail i:nth-child(2){width:88%}.un-mail i:nth-child(3){width:64%}
.un-row{display:flex;align-items:center;gap:6px;margin-top:7px;color:var(--ink-3)}
.un-row b{color:var(--ink)}
.un-row .un-num{font:400 12.5px/1 var(--font-mono);color:var(--ink);counter-reset:n var(--n)}
.un-row .un-num::after{content:counter(n)}
.un-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.un-cal i{height:16px;border-radius:5px;background:var(--n-75)}
.un-cal i.on{background:var(--accent);box-shadow:0 0 0 2px var(--accent-100)}
.un-flow{display:flex;align-items:center;gap:5px}
.un-flow span{display:inline-flex;align-items:center;height:24px;padding:0 7px;border-radius:var(--r-chip);background:var(--h-bg);color:var(--h-fg);box-shadow:inset 0 0 0 1px var(--h-ring);font-size:11.5px;white-space:nowrap}
.un-flow em{flex:none;width:10px;height:2px;background:var(--n-200)}
.un-stack{position:relative;height:42px}
.un-stack i{position:absolute;left:0;right:22%;top:0;height:28px;border-radius:var(--r-md);background:var(--n-0);box-shadow:var(--shadow-raised)}
.un-stack i:nth-child(2),.un-stack i:nth-child(3){opacity:0}
.un-stack i::after{content:"";position:absolute;left:10px;top:10px;width:46%;height:7px;border-radius:4px;background:var(--n-150)}
.un-spark{display:block;width:100%;height:40px;overflow:visible}
.un-spark .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.un-spark .band{fill:color-mix(in srgb, var(--accent) 12%, transparent)}
.un-list{display:grid;gap:4px}
.un-list span{display:flex;align-items:center;gap:6px;color:var(--ink-2)}
.un-list span .box{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:4px;background:var(--accent);color:var(--n-0)}
.un-list span .box .ico{width:10px;height:10px;stroke-width:2.6}

/* maniac mode */
.un-hud{order:var(--o);position:relative;width:100%;max-width:1100px;padding:40px 24px 30px;border-radius:32px;background:radial-gradient(120% 100% at 50% 0%, var(--un-deep) 0%, var(--un-deeper) 55%, var(--un-night) 100%);color:var(--un-on-dark);overflow:hidden}
.un-hud__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px;max-width:980px;margin:0 auto}
.un-stat{display:flex;flex-direction:column;gap:var(--s-4);padding:18px 18px 16px;border-radius:18px;background:var(--un-glass);box-shadow:inset 0 0 0 1px var(--un-glass-ring)}
.un-stat span{font-size:14.5px;font-weight:var(--fw-medium);color:var(--un-on-dark-2)}
.un-odo{display:block;font:400 clamp(34px,4.6vw,62px)/1 var(--font-mono);letter-spacing:-.04em;color:var(--un-on-dark);text-shadow:0 0 24px color-mix(in srgb, var(--accent-200) 55%, transparent);counter-reset:hi calc(round(down, var(--n), 1000) / 1000) lo calc(var(--n) - round(down, var(--n), 1000))}
.un-odo::after{content:counter(hi) "," counter(lo, un-pad3)}
.un-odo--small::after{content:counter(lo)}
.un-marquee{position:relative;display:flex;overflow:hidden;margin-top:26px;-webkit-mask-image:linear-gradient(90deg,transparent,var(--n-0) 8%,var(--n-0) 92%,transparent);mask-image:linear-gradient(90deg,transparent,var(--n-0) 8%,var(--n-0) 92%,transparent)}
.un-marquee__track{display:flex;flex:none;gap:10px;padding-right:10px;animation:un-marq 44s linear infinite}
.un-marquee--rev .un-marquee__track{animation-duration:36s;animation-direction:reverse}
.un-marquee__track span{display:inline-flex;align-items:center;gap:var(--s-4);height:36px;padding:0 14px 0 10px;border-radius:var(--r-pill);background:var(--un-glass);box-shadow:inset 0 0 0 1px var(--un-glass-ring);font:500 13.5px/1 var(--font-sans);color:var(--un-on-dark);white-space:nowrap}
.un-marquee__track span .ari{width:16px;height:16px}
.un-zoom{display:none}

/* finale */
.un-final{order:var(--o);display:flex;flex-direction:column;align-items:center;gap:22px}
.un-final > img{width:clamp(180px,20vw,260px);filter:drop-shadow(0 26px 36px var(--un-glow))}
.un-final__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.un-final__ctas .btn--cta{gap:var(--s-4);text-decoration:none}
.un-final__ctas .un-ghost{color:var(--ink);background:var(--bg-canvas)}
.un-final__ctas .un-ghost:hover{background:var(--bg-sunken)}
.un-final__ctas .un-ghost .ari{width:20px;height:20px}
.un-note{max-width:34em;margin:0;font-size:14px;line-height:1.5;color:var(--ink-3);text-align:center}

@media (max-width:900px){
  .un-roster{grid-template-columns:minmax(0,1fr)}
  .un-hud__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  /* the chart keeps its desktop geometry at half size; its labels get
     double-size type so they still read at about 10px */
  .un-field{zoom:.5;height:360px}
  .un-bar b{font-size:30px}
  .un-bar span{font-size:20px}
  .un-bar span i{width:12px;height:12px;margin-right:7px;vertical-align:2px}
  .un-portal .win{grid-template-columns:minmax(0,1fr)}
  .un-portal .rail{box-shadow:inset 0 -1px 0 var(--border)}
  .un .rec-head__btns{display:none}
}

/* ── The show: pinned, scroll-driven ────────────────────────────────────── */
@supports (animation-timeline:view()){
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .un{height:900vh;view-timeline:--un block}
  .un-stage{position:sticky;top:0;height:100vh}
  .un-bg,.un-shock,.un-flash{display:block}
  .un-bg{position:absolute;inset:0}
  .un-bg--aurora{background:
      radial-gradient(60% 55% at 30% 40%, color-mix(in srgb, var(--tag-purple-ring) 75%, transparent), transparent 70%),
      radial-gradient(50% 50% at 72% 58%, color-mix(in srgb, var(--tag-pink-ring) 75%, transparent), transparent 70%),
      radial-gradient(40% 40% at 50% 100%, color-mix(in srgb, var(--tag-blue-ring) 70%, transparent), transparent 70%)}
  .un-bg--aurora::before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 0deg at 50% 55%, transparent, var(--un-glow-soft), color-mix(in srgb, var(--tag-pink-ring) 60%, transparent), color-mix(in srgb, var(--tag-blue-ring) 60%, transparent), transparent);filter:blur(40px);animation:un-spin 24s linear infinite}
  .un-bg--maniac{background:radial-gradient(120% 90% at 50% 45%, var(--un-deep) 0%, var(--un-deeper) 45%, var(--un-night) 100%)}
  .un-rays{position:absolute;left:50%;top:48%;width:260vmax;height:260vmax;translate:-50% -50%;background:repeating-conic-gradient(from 0deg, var(--un-glass) 0deg 3deg, transparent 3deg 14deg);animation:un-spin 40s linear infinite}
  .un-speed{position:absolute;inset:0;background:repeating-linear-gradient(90deg, transparent 0 140px, color-mix(in srgb, var(--n-0) 5%, transparent) 140px 142px);animation:un-speed .6s linear infinite}
  .un-shock{position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent),0 0 40px var(--un-glow),inset 0 0 30px color-mix(in srgb, var(--tag-pink-ring) 60%, transparent)}
  .un-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, var(--n-0) 0%, color-mix(in srgb, var(--n-0) 85%, transparent) 30%, transparent 70%)}

  .un-inner{display:block;height:100%;padding:0}
  .un-copy{display:block;position:absolute;left:0;right:0;top:clamp(96px,13vh,132px);height:176px;z-index:6;pointer-events:none}
  .un-t,.un-t.t1,.un-t.t2{display:block;position:absolute;left:50%;top:0;width:min(900px,calc(100vw - 48px));max-width:none;translate:-50% 0}
  .un-t .pin-only{display:inline}
  .un-t .rest-only{display:none}
  .un-t.t6{color:var(--un-on-dark)}
  .un-t.t6 p{color:var(--un-on-dark-2)}
  .un-t.t6 .un-kick{background:var(--un-glass);color:var(--un-on-dark);box-shadow:inset 0 0 0 1px var(--un-glass-ring)}
  .un-t.t6 h2{background:linear-gradient(100deg, var(--n-0) 20%, var(--un-pink) 60%, var(--accent-200) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px color-mix(in srgb, var(--un-pink) 45%, transparent));animation:un-jitter .14s steps(2) infinite}
  .un-on{animation:un-jitter .12s steps(2) infinite}

  .un-hero{position:absolute;inset:0;justify-content:center;gap:26px;padding-top:120px}
  /* centred in the stage, but never higher than just under the headline */
  .un-sleepy,.un-powered{position:absolute;left:50%;top:max(calc(50% - 10px), calc(clamp(96px,13vh,132px) + 285px));width:clamp(190px,17vw,250px);translate:-50% -50%}
  .un-sleepy{display:block;filter:drop-shadow(0 20px 28px var(--un-glow-soft))}
  .un-powered img{animation:un-jitter .1s steps(2) infinite}
  .un-switch{position:absolute;left:50%;top:calc(max(calc(50% - 10px), calc(clamp(96px,13vh,132px) + 285px)) + 160px);translate:-50% 0}
  .un-switch__track{background:var(--n-150)}
  .un-switch__knob{translate:0 0}
  .un-switch__state .off{opacity:1}
  .un-switch__state .on{opacity:0}

  .un-field{position:absolute;left:50%;top:calc(clamp(96px,13vh,132px) + 196px);translate:-50% 0;z-index:3}
  .un-beam{display:block;position:absolute;left:0;top:-8px;width:64px;height:278px;border-radius:32px;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 38%, transparent) 45%, color-mix(in srgb, var(--un-pink) 55%, transparent) 50%, color-mix(in srgb, var(--accent) 38%, transparent) 55%, transparent);filter:blur(3px)}
  .un-scanner{display:block;position:absolute;left:-34px;top:250px;width:132px;z-index:2;filter:drop-shadow(0 14px 18px var(--un-glow))}
  .un-read{display:flex;position:absolute;right:-8px;top:-52px;align-items:baseline;gap:10px;font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-medium);color:var(--ink-3)}
  .un-read .un-odo{font-size:26px;color:var(--accent-hover);text-shadow:none}
  .un-vsglow{display:block;position:absolute;left:31px;top:193px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--tag-green-fg) 28%, transparent), transparent 70%);filter:blur(8px)}

  .un-portal{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-start;justify-content:center;width:auto;padding-top:calc(clamp(96px,13vh,132px) + 164px);background:radial-gradient(60% 60% at calc(50% - 271px) calc(clamp(96px,13vh,132px) + 438px), var(--accent-100) 0%, var(--accent-50) 45%, var(--n-0) 80%)}
  .un-portal .win{width:min(900px,calc(100vw - 80px))}

  .un-roster{position:absolute;left:50%;top:calc(clamp(96px,13vh,132px) + 206px);translate:-50% 0;z-index:5;padding-top:0}
  .un-hud{position:absolute;inset:0;max-width:none;padding:calc(clamp(96px,13vh,132px) + 196px) 40px 0;border-radius:0;background:none;z-index:5;overflow:visible}
  .un-zoom{display:block;position:absolute;left:0;top:28%;width:230px;z-index:-1;animation:un-zoomby 2.6s cubic-bezier(.5,0,.3,1) infinite}
  .un-zoom.z2{top:62%;width:170px;animation-duration:3.4s;animation-delay:-1.3s}
  .un-final{position:absolute;left:50%;top:calc(clamp(96px,13vh,132px) + 176px);translate:-50% 0;z-index:5}

  /* Short windows: every chapter's block scales from its top edge so nothing
     runs off the bottom of the stage (measured at 1440 wide: the summary card
     needs 740px below the copy line, the clones 646, maniac mode 610, the
     chart 546, the finale 522). transform is free: the keyframes only animate
     translate, scale and rotate. */
  .un-field,.un-portal .win,.un-roster,.un-final{transform:scale(var(--un-fit,1));transform-origin:50% 0}
  .un-field{--un-fit:var(--un-ff,1)}
  .un-portal .win{--un-fit:var(--un-pf,1)}
  .un-roster{--un-fit:var(--un-rf,1)}
  .un-final{--un-fit:var(--un-xf,1)}
  .un-hud{transform:scale(var(--un-hf,1));transform-origin:50% calc(clamp(96px,13vh,132px) + 196px)}
  @media (max-height:879px){.un{--un-pf:.92}}
  @media (max-height:799px){.un{--un-pf:.82}}
  @media (max-height:739px){.un{--un-pf:.71;--un-rf:.85;--un-hf:.93}}
  @media (max-height:679px){.un{--un-pf:.6;--un-rf:.71;--un-hf:.78;--un-ff:.93}}
  @media (max-height:619px){.un{--un-pf:.5;--un-rf:.57;--un-hf:.63;--un-ff:.75;--un-xf:.82}
    .un-hero{transform:scale(.8);transform-origin:50% calc(clamp(96px,13vh,132px) + 180px)}}

  .un .sd{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--un;animation-range:contain 0% contain 100%}

  .un-t.t0{animation-name:un-t0}
  .un-t.t1{animation-name:un-t1}
  .un-t.t2{animation-name:un-t2}
  .un-t.t3{animation-name:un-t3}
  .un-t.t4{animation-name:un-t4}
  .un-t.t5{animation-name:un-t5}
  .un-t.t6{animation-name:un-t6}
  .un-t.t7{animation-name:un-t7}
  .un-inner{animation-name:un-shake}
  .un-bg--aurora{animation-name:un-aurora}
  .un-bg--maniac{animation-name:un-maniac}
  .un-shock{animation-name:un-shock}
  .un-flash{animation-name:un-flash}
  .un-hero{animation-name:un-hero}
  .un-sleepy{animation-name:un-sleepy}
  .un-powered{animation-name:un-powered}
  .un-switch__track{animation-name:un-track}
  .un-switch__knob{animation-name:un-knob}
  .un-switch__state .off{animation-name:un-off}
  .un-switch__state .on{animation-name:un-on-label}
  .un-field{animation-name:un-field}
  .un-beam{animation-name:un-beam}
  .un-scanner{animation-name:un-scanner}
  .un-read{animation-name:un-read}
  .un .un-read .un-odo{animation-name:un-count4;animation-range:contain 16.5% contain 28.5%}
  .un-bars{animation-name:un-bars}
  .un .un-bar b{animation-name:un-count;animation-range:contain 34% contain 41%}
  .un-vsglow{animation-name:un-vsglow}
  .un-portal{animation-name:un-portal}
  .un .w{animation-name:un-word;animation-range:contain var(--s) contain calc(var(--s) + 1.4%)}
  .un-roster{animation-name:un-roster}
  .un .un-clone{animation-name:un-clone;animation-timing-function:cubic-bezier(.2,1.3,.35,1);animation-range:contain var(--s) contain calc(var(--s) + 3.6%)}
  .un .un-cal i.on{animation-name:un-calon;animation-range:contain var(--s) contain calc(var(--s) + .8%)}
  .un .un-flow span,.un .un-flow em,.un .un-list span{animation-name:un-pop;animation-range:contain var(--s) contain calc(var(--s) + 1%)}
  .un .un-stack i:nth-child(2){animation-name:un-dup2}
  .un .un-stack i:nth-child(3){animation-name:un-dup3}
  .un .un-spark .line{stroke-dasharray:260;animation-name:un-draw;animation-range:contain 63% contain 71%}
  .un .un-spark .band{animation-name:un-fadein;animation-range:contain 68% contain 71%}
  .un .un-mail i{transform-origin:0 50%;animation-name:un-grow;animation-range:contain var(--s) contain calc(var(--s) + 2.4%)}
  .un .un-row .un-num{animation-name:un-count;animation-range:contain 63% contain 73%}
  .un-hud{animation-name:un-hud}
  .un .un-stat .un-odo{animation-name:un-count;animation-range:contain var(--s) contain 89%}
  .un .un-stat .un-odo--k{animation-name:un-count4}
  .un-final{animation-name:un-final}
}}

@keyframes un-spin{to{rotate:360deg}}
@keyframes un-speed{to{background-position:-142px 0}}
@keyframes un-marq{to{translate:-100% 0}}
@keyframes un-jitter{0%{translate:0 0}25%{translate:1.5px -1px}50%{translate:-1px 1.5px}75%{translate:1px 1px}100%{translate:-1.5px 0}}
@keyframes un-zoomby{0%{translate:-30vw 0;opacity:0}8%{opacity:1}70%{opacity:1}100%{translate:115vw -8vh;opacity:0}}

@keyframes un-t0{0%,5.5%{opacity:1;translate:-50% 0}7.5%,100%{opacity:0;translate:-50% -24px;visibility:hidden}}
@keyframes un-t1{0%,8%{opacity:0;translate:-50% 20px;scale:.9}9.5%{opacity:1;translate:-50% 0;scale:1.06}10.5%,13.5%{opacity:1;scale:1}15%,100%{opacity:0;translate:-50% -24px;visibility:hidden}}
@keyframes un-t2{0%,15%{opacity:0;translate:-50% 24px}17%,28.5%{opacity:1;translate:-50% 0}30.5%,100%{opacity:0;translate:-50% -24px}}
@keyframes un-t3{0%,30%{opacity:0;translate:-50% 24px}32%,44%{opacity:1;translate:-50% 0}46%,100%{opacity:0;translate:-50% -24px}}
@keyframes un-t4{0%,46%{opacity:0;translate:-50% 24px}48%,57%{opacity:1;translate:-50% 0}59%,100%{opacity:0;translate:-50% -24px}}
@keyframes un-t5{0%,58.5%{opacity:0;translate:-50% 24px}60.5%,74.5%{opacity:1;translate:-50% 0}76.5%,100%{opacity:0;translate:-50% -24px}}
@keyframes un-t6{0%,76.5%{opacity:0;translate:-50% 30px;scale:.85}78.5%{opacity:1;translate:-50% 0;scale:1.05}79.5%,90%{opacity:1;scale:1}92%,100%{opacity:0;translate:-50% -24px}}
@keyframes un-t7{0%,91.5%{opacity:0;translate:-50% 24px}94%,100%{opacity:1;translate:-50% 0}}
@keyframes un-shake{0%,7.7%{translate:0 0}7.9%{translate:-7px 4px}8.1%{translate:6px -5px}8.3%{translate:-5px -3px}8.5%{translate:4px 5px}8.7%{translate:-3px 2px}8.9%{translate:2px -2px}9.1%,100%{translate:0 0}}
@keyframes un-aurora{0%,7.5%{opacity:0}11%,72%{opacity:1}77%,100%{opacity:0}}
@keyframes un-maniac{0%,75.5%{opacity:0}77.5%,90%{opacity:1}92.5%,100%{opacity:0;visibility:hidden}}
@keyframes un-shock{0%,7.4%{opacity:0;scale:.2}8%{opacity:1;scale:.6}12.5%,100%{opacity:0;scale:16}}
@keyframes un-flash{0%,7.6%{opacity:0}8%{opacity:.9}10%,100%{opacity:0}}
@keyframes un-hero{0%,13.5%{opacity:1}15.5%,100%{opacity:0;visibility:hidden}}
@keyframes un-sleepy{0%,7.4%{opacity:1;scale:1;translate:-50% -50%}8.6%,100%{opacity:0;scale:1.25;translate:-50% -62%}}
@keyframes un-powered{0%,7.6%{opacity:0;scale:.5;translate:-50% -40%}9.2%{opacity:1;scale:1.18;translate:-50% -64%}10.4%,13%{opacity:1;scale:1;translate:-50% -56%}15%,100%{opacity:0;scale:.7;translate:-50% -80%}}
@keyframes un-track{0%,6.6%{background:var(--n-150)}8%,100%{background:var(--accent)}}
@keyframes un-knob{0%,6.4%{translate:0 0}7.6%{translate:50px 0}8.2%,100%{translate:44px 0}}
@keyframes un-off{0%,7.2%{opacity:1}7.8%,100%{opacity:0}}
@keyframes un-on-label{0%,7.2%{opacity:0}7.8%,100%{opacity:1}}
@keyframes un-field{0%,13.8%{opacity:0}15%,46%{opacity:1}48.5%,100%{opacity:0;visibility:hidden}}
@keyframes un-beam{0%,16%{opacity:0;translate:26px 0}16.6%{opacity:1;translate:40px 0}28.4%{opacity:1;translate:650px 0}29.6%,100%{opacity:0;translate:690px 0}}
@keyframes un-scanner{0%,15.4%{opacity:0;translate:0 30px}16.6%{opacity:1;translate:40px 0}28.4%{opacity:1;translate:650px 0}30%,100%{opacity:0;translate:720px -30px}}
@keyframes un-read{0%,16%{opacity:0}17%,29%{opacity:1}31%,100%{opacity:0}}
@keyframes un-count{from{--n:0}}
@keyframes un-count4{from{--n:1000}}
@keyframes un-bars{0%,34%{opacity:0;translate:0 8px}36%,100%{opacity:1;translate:0 0}}
@keyframes un-vsglow{0%,40.5%{opacity:0;scale:.5}43%,100%{opacity:1;scale:1.3}}
@keyframes un-portal{
  0%,45%{clip-path:circle(0 at calc(50% - 271px) calc(clamp(96px,13vh,132px) + 438px));opacity:1}
  48.5%{clip-path:circle(150vmax at calc(50% - 271px) calc(clamp(96px,13vh,132px) + 438px));opacity:1}
  57.5%{opacity:1}
  59.5%,100%{clip-path:circle(150vmax at calc(50% - 271px) calc(clamp(96px,13vh,132px) + 438px));opacity:0;visibility:hidden}
}
@keyframes un-word{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes un-roster{0%,59%{opacity:1}75%{opacity:1;scale:1}77%,100%{opacity:0;scale:.94;visibility:hidden}}
@keyframes un-clone{0%{opacity:0;translate:var(--fx) var(--fy);scale:.2}100%{opacity:1;translate:0 0;scale:1}}
@keyframes un-calon{from{background:var(--n-75);box-shadow:none}to{background:var(--accent);box-shadow:0 0 0 2px var(--accent-100)}}
@keyframes un-pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes un-dup2{0%,61%{opacity:1;translate:0 14px}66%,100%{opacity:0;translate:0 0}}
@keyframes un-dup3{0%,61%{opacity:1;translate:0 7px}64.5%,100%{opacity:0;translate:0 0}}
@keyframes un-draw{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
@keyframes un-fadein{from{opacity:0}to{opacity:1}}
@keyframes un-grow{from{scale:0 1}to{scale:1 1}}
@keyframes un-hud{0%,76%{opacity:0;scale:.96}78.5%,90%{opacity:1;scale:1}92.5%,100%{opacity:0;scale:1.04;visibility:hidden}}
@keyframes un-final{0%,91.5%{opacity:0;translate:-50% 30px;scale:.9;visibility:hidden}94.5%,100%{opacity:1;translate:-50% 0;scale:1}}
@counter-style un-pad3{system:numeric;symbols:"0" "1" "2" "3" "4" "5" "6" "7" "8" "9";pad:3 "0"}
@property --n{syntax:"<integer>";inherits:false;initial-value:0}

/* Reduced motion: no loops anywhere (the site's global rule would otherwise
   run them at 0.01ms and make them flicker). The storyboard above is what
   these visitors see. */
@media (prefers-reduced-motion:reduce){
  .un-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .un-marquee__track{flex:1 1 100%;animation:none;flex-wrap:wrap;justify-content:center;row-gap:10px;padding-right:0}
  .un-marquee__dup{display:none}
  .un-marquee{justify-content:center}
}