@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: block;
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: block;
  src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans Extra"; font-style: normal; font-weight: 400 700; font-display: block;
  src: url("/home/assets/fonts/instrument-sans-extra.8c77257d.woff2") format("woff2"); unicode-range: U+2116, U+2192;
}
@font-face {
  font-family: "Gabarito"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/sennight/assets/gabarito-600.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/home/assets/fonts/newsreader-display.87328b9d.woff2") format("woff2");
}

:root {
  --bg: #0E0D0B;
  --surface: #161411;
  --surface-2: #1C1915;
  --line: #2A2620;
  --line-2: #3A352D;
  --text: #F2EFE9;
  --text-2: #A89F92;
  --text-3: #888172;
  --accent: #E8AE62;
  --accent-text: #E8AE62;
  --accent-soft: rgba(232, 174, 98, .14);
  --grad: linear-gradient(135deg, #F6D998, #E8AE62 55%, #CF7A4E);
  --grad-text: linear-gradient(95deg, #F6D998, #E8AE62 55%, #CF7A4E);
  --ink-on-accent: #1A130C;
  --sans: "Instrument Sans", "Instrument Sans Extra", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.45, 0, 0.2, 1);
  --max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 64px;
  --device-w: clamp(236px, 31vh, 300px);
  --vh: 100vh;
  --apps-pad: clamp(84px, 13vh, 150px);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --sp { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --hero-p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --on { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cap-h { syntax: "<color>"; inherits: true; initial-value: #1E1B17; }
@property --cap-p { syntax: "<color>"; inherits: true; initial-value: #55504A; }
html[data-theme="light"] {
  --bg: #F2EFE9;
  --surface: #FFFFFF;
  --surface-2: #F8F6F1;
  --line: #E1DBD0;
  --line-2: #CFC7B9;
  --text: #0E0D0B;
  --text-2: #5A5349;
  --text-3: #6E675B;
  --accent-text: #8F5218;
  --grad-text: linear-gradient(95deg, #BF6F36, #A9602A 55%, #8F5218);
  --accent-soft: rgba(207, 122, 78, .14);
  --ink-on-accent: #1A130C;
  color-scheme: light;
}

.sennight {
  --c-bg: #FAF5EC; --c-bg-2: #F1E8DA; --c-card: #FFFFFF;
  --c-text: #1E1B17; --c-text-2: #55504A; --c-text-3: #6B6459;
  --c-accent: #DE8B4E; --c-accent-ink: #B0561C; --c-tint: #F2C9A5;
  --c-line: #E7DECF; --c-dot: #1E1B17; --c-dot-faint: rgba(30, 27, 23, .16);
  --c-display: "Gabarito", var(--sans);
  --c-btn-bg: #1E1B17; --c-btn-text: #FFFFFF;
  --c-ghost-line: rgba(30, 27, 23, .28);
  --c-frame: #15120E;
}
.arrival {
  --c-bg: #1F3B30; --c-bg-2: #1A332A; --c-card: #27493B;
  --c-text: #F2F4EE; --c-text-2: #CBD6CE; --c-text-3: #A9B9AE;
  --c-accent: #D9B24C; --c-accent-ink: #D9B24C; --c-tint: #9CC5AC;
  --c-line: rgba(242, 244, 238, .14); --c-dot: #F2F4EE; --c-dot-faint: rgba(242, 244, 238, .2);
  --c-display: "Newsreader", Georgia, serif;
  --c-btn-bg: #F2F4EE; --c-btn-text: #1A211C;
  --c-ghost-line: rgba(242, 244, 238, .34);
  --c-frame: #111512;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; hanging-punctuation: first last; }
html.js:not(.reduce) { scroll-behavior: smooth; }
html.jump { scroll-behavior: auto !important; }

.app.scrub { scroll-margin-top: calc(-1 * (var(--header-h) + 8px)); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga"; font-optical-sizing: auto;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent-text); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--text); }
::selection { background: rgba(232, 174, 98, .35); }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }
.sennight :focus-visible { outline-color: var(--c-accent-ink); }
.arrival :focus-visible { outline-color: var(--c-accent); }
html[data-tone="light"] .top :focus-visible { outline-color: #B0561C; }
html[data-theme="light"][data-tone="moss"] .top :focus-visible { outline-color: #D9B24C; }
.btn-primary:focus-visible, .btn-ghost:focus-visible, .ctl:focus-visible, .ai:focus-visible, .contact-email:focus-visible { outline-offset: 4px; }
.ai:focus-visible { border-radius: 8px; }
.contact-email:focus-visible { border-radius: 6px; }

.ai:focus-visible { outline-color: var(--ai-a1); outline-offset: -3px; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 14px; }
.skip:focus { top: 14px; }

.label {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 500; line-height: 1.4;
  letter-spacing: .22em; text-transform: uppercase; color: var(--text-2);
}
.label, .apps-title, .hero-hint, .app-eyebrow, .counter em, .fr-tag, .ai-tag { text-rendering: geometricPrecision; }
.chapter-label { display: flex; align-items: baseline; gap: 14px; }
.chapter-label .num { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 22px; line-height: 1; color: var(--accent-text); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.display { font-size: clamp(38px, 6.2vw, 84px); line-height: 1.02; }
h3 { font-size: 19px; letter-spacing: -0.012em; line-height: 1.35; }
p { text-wrap: pretty; }
em.glow { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.grad-text {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .grad-text { background: none; color: var(--accent-text); }
}
@media (forced-colors: active) {
  .grad-text { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; forced-color-adjust: none; }
}
.lede { color: var(--text-2); }
.small { margin: 14px 0 0; font-size: 14px; color: var(--text-3); line-height: 1.5; }

.top {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(16px, 2.6vw, 32px);
  color: var(--text);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
  border-bottom: 1px solid transparent;
}

.top.scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-bottom-color: var(--line); }
@supports not (background: color-mix(in srgb, red, blue)) { .top.scrolled { background: rgba(14, 13, 11, .92); } }

.top:not(.scrolled) .chapters a, .top:not(.scrolled) .ctl { color: var(--text); }

html:not(.js) .top { background: var(--bg); border-bottom-color: var(--line); }
html[data-tone="light"] .top { color: #1E1B17; }
html[data-tone="light"] .top.scrolled { background: rgba(250, 245, 236, .94); border-bottom-color: rgba(30, 27, 23, .1); }
html[data-tone="light"] .chapters a { color: #55504A; }
html[data-tone="light"] .chapters a:hover, html[data-tone="light"] .chapters a[aria-current="true"] { color: #1E1B17; }
html[data-tone="light"] .chapters a::after { background: #B0561C; }
html[data-tone="light"] .ctl { color: #55504A; }
html[data-tone="light"] .ctl:hover { color: #1E1B17; border-color: rgba(30, 27, 23, .25); }
html[data-tone="light"] .ctl[data-on="true"] { color: #B0561C; background: rgba(222, 139, 78, .14); border-color: rgba(30, 27, 23, .18); }

html[data-theme="light"][data-tone="moss"] .top { color: #F2F4EE; }
html[data-theme="light"][data-tone="moss"] .top.scrolled { background: rgba(26, 51, 42, .94); border-bottom-color: rgba(242, 244, 238, .12); }
html[data-theme="light"][data-tone="moss"] .chapters a { color: #CBD6CE; }
html[data-theme="light"][data-tone="moss"] .chapters a:hover, html[data-theme="light"][data-tone="moss"] .chapters a[aria-current="true"] { color: #F2F4EE; }
html[data-theme="light"][data-tone="moss"] .chapters a::after { background: #D9B24C; }
html[data-theme="light"][data-tone="moss"] .ctl { color: #CBD6CE; }
html[data-theme="light"][data-tone="moss"] .ctl:hover { color: #F2F4EE; border-color: rgba(242, 244, 238, .3); }
html[data-theme="light"][data-tone="moss"] .ctl[data-on="true"] { color: #D9B24C; background: rgba(217, 178, 76, .14); border-color: rgba(242, 244, 238, .2); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; color: inherit; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.wordmark:hover { color: inherit; }
.wordmark .mark { width: 26px; height: 26px; }
.top .wordmark .mark { transform-origin: center; }
.chapters { display: flex; gap: clamp(18px, 2.6vw, 38px); }
.chapters a { position: relative; color: var(--text-2); font-size: 14.5px; padding: 8px 2px; display: inline-block; letter-spacing: .005em; }
.chapters a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 4px; height: 1.5px; border-radius: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease);
}
.chapters a:hover, .chapters a[aria-current="true"] { color: var(--text); }
.chapters a:hover::after, .chapters a[aria-current="true"]::after { transform: none; }
.controls { display: flex; gap: 4px; align-items: center; }
.ctl {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid transparent; background: transparent;
  display: inline-grid; place-items: center; cursor: pointer; color: var(--text-2);
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), transform .35s var(--ease);
}
.ctl svg { width: 20px; height: 20px; grid-area: 1 / 1; transition: transform .5s var(--ease); }
.ico-moon, html[data-theme="light"] .ico-sun { display: none; }
html[data-theme="light"] .ico-moon { display: block; }
.ctl:hover { color: var(--text); border-color: var(--line-2); }
.ctl:hover svg { transform: rotate(12deg); }
.ctl:active svg { transform: rotate(12deg) scale(.92); }
.ctl[data-on="true"] { color: var(--accent-text); border-color: var(--line-2); background: var(--accent-soft); }
.menu-btn { display: none; }
html:not(.js) .controls { display: none; }

.progress { position: fixed; inset: 0 0 auto; z-index: 31; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); box-shadow: 0 0 10px rgba(232, 174, 98, .55); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.sda .progress i { animation: grow linear both; animation-timeline: scroll(root); }

.menu { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--text); padding: 28px 28px 22px; width: min(92vw, 380px); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.menu::backdrop { background: rgba(14, 13, 11, .6); backdrop-filter: blur(6px); }
.menu nav { display: grid; gap: 4px; margin: 0 0 20px; }
.menu nav a { display: flex; align-items: baseline; gap: 16px; padding: 10px 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); border-radius: 10px; transition: background-color .25s var(--ease), color .25s var(--ease); }
.menu nav a:hover { background: var(--accent-soft); }
.menu nav .num { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; color: var(--accent-text); width: 28px; }
html.js:not(.reduce) .menu[open] { animation: menu-in .4s var(--ease); }
html.js:not(.reduce) .menu[open]::backdrop { animation: fade-in .3s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px;
  font-weight: 560; font-size: 16px; line-height: 1.2; border: 1px solid transparent; cursor: pointer;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease), color .25s var(--ease), background-color .35s var(--ease);
}
.btn-primary { background: var(--grad); color: var(--ink-on-accent); box-shadow: 0 0 28px rgba(232, 174, 98, .28); }
.btn-primary:hover { color: var(--ink-on-accent); box-shadow: 0 0 44px rgba(232, 174, 98, .45); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 0 22px rgba(232, 174, 98, .35); }
.btn-ghost { color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-3); background: color-mix(in srgb, var(--text) 6%, transparent); }
.cta-row { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-row.left { justify-content: flex-start; margin-top: 0; }
.linkish { background: none; border: 0; padding: 6px 0; color: var(--text-3); font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--text); }
.linkish kbd { font: 600 11px/1 var(--sans); padding: 3px 6px; border: 1px solid var(--line-2); border-radius: 5px; margin-left: 4px; text-decoration: none; }

.chapter { position: relative; }

.scroller { position: relative; height: calc(var(--vh) * (1 + var(--n, 5) * 0.82)); view-timeline-name: --ch; view-timeline-axis: block; view-timeline-inset: 0; }
.chapter.scrub { timeline-scope: --ch; }
.stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; }

.hero .scroller { --n: 1.34; }
.hero .stage { display: grid; place-items: center; isolation: isolate; }
.aura-wrap { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; transform-origin: 50% 37%; }
.aura { width: 100%; height: 100%; display: block; }
.aura-fallback {
  position: absolute; left: 50%; top: 37%; width: min(78vmin, 640px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; opacity: 0;
  background:
    radial-gradient(closest-side, rgba(246, 217, 152, .0) 52%, rgba(232, 174, 98, .55) 62%, rgba(207, 122, 78, .35) 70%, transparent 86%),
    radial-gradient(closest-side, rgba(232, 174, 98, .35), transparent 70%);
  filter: blur(6px);
}
html:not(.gl) .aura-fallback { opacity: 1; }
html.gl .aura-fallback { display: none; }
.hero .stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--grain); opacity: .06; mix-blend-mode: overlay;
}

.hero-inner { position: relative; z-index: 1; max-width: 1000px; padding: 0 var(--gutter); text-align: center; }
@media (min-width: 900px) and (min-height: 521px) {
  :root { --m: min(100vw, 100vh); --hfs: clamp(50px, 9.4vw, 136px); }
  .hero .stage { place-items: start center; }
  .hero-inner { margin-top: calc(50vh + 0.13 * var(--m) - 1.93 * var(--hfs) - 16px - clamp(20px, 3.5vh, 36px)); }
}
@media (min-width: 900px) and (min-height: 521px) and (max-height: 800px) {
  :root { --hfs: clamp(48px, min(9.4vw, 13vh), 136px); }
}

.hero-label { margin-bottom: clamp(20px, 3.5vh, 36px); color: var(--text); font-size: 11px; letter-spacing: .12em; line-height: 16px; text-wrap: balance; }
.hero h1 {
  margin: 0 auto; max-width: 8.2em; font-size: var(--hfs, clamp(50px, 9.4vw, 136px)); line-height: .98; letter-spacing: -0.035em;
}
.hero h1 em.glow { display: block; padding-right: .08em; letter-spacing: -0.02em; }
.hero h1 .line { display: block; }
.hero .cta-row { margin-top: clamp(30px, 5.5vh, 56px); }
.hero-hint { position: absolute; left: 50%; bottom: 22px; z-index: 1; transform: translateX(-50%); margin: 0; display: grid; justify-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.hint-dots { display: grid; gap: 7px; }
.hint-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); opacity: .25; animation: hint-pulse 2.4s var(--ease) infinite; }
.hint-dots i:nth-child(2) { animation-delay: 2.6s } .hint-dots i:nth-child(3) { animation-delay: 2.8s } .hint-dots i:nth-child(4) { animation-delay: 3s } .hint-dots i:nth-child(5) { animation-delay: 3.2s } .hint-dots i:nth-child(6) { animation-delay: 3.4s }
@keyframes hint-pulse { 0%, 100% { opacity: .25 } 40% { opacity: 1 } }

.hero .w { display: inline-block; }
html.js:not(.reduce) .hero .w { opacity: 0; transform: translateY(.35em); filter: blur(8px); animation: settle .55s var(--ease) forwards; animation-delay: calc(.08s + var(--i, 0) * .035s); }
html.js:not(.reduce) .hero-label .w { --i: 0 } html.js:not(.reduce) .hero h1 .w:nth-child(1) { --i: 2 } html.js:not(.reduce) .hero h1 .w:nth-child(2) { --i: 3 } html.js:not(.reduce) .hero h1 .w:nth-child(3) { --i: 4 }
html.js:not(.reduce) .hero h1 em .w:nth-child(1) { --i: 5 } html.js:not(.reduce) .hero h1 em .w:nth-child(2) { --i: 6 } html.js:not(.reduce) .hero h1 em .w:nth-child(3) { --i: 7 }
html.js:not(.reduce) .hero .cta-row { opacity: 0; animation: settle-soft .5s var(--ease) forwards; animation-delay: .42s; }
html.js:not(.reduce) .hint-dots i { animation-delay: 1.3s; }
@keyframes settle { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes settle-soft { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@keyframes settle-plain { to { opacity: 1; transform: none; } }
@media (max-width: 899px) and (hover: none), (max-width: 899px) and (pointer: coarse) {
  html.js:not(.reduce) .hero .w { filter: none; animation-name: settle-plain; }
}

@keyframes hero-exit { 0% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-8vh); } }
@keyframes hint-exit { 0% { opacity: 1 } 14%, 100% { opacity: 0 } }
@keyframes mark-in { 0%, 64% { opacity: 0; transform: scale(.4); } 82%, 100% { opacity: 1; transform: none; } }

@keyframes aura-exit {
  0%, 8% { opacity: 1; transform: none; }
  70% { opacity: .92; }
  82%, 100% { opacity: 0; transform: translate(calc(13px + clamp(16px, 2.6vw, 32px) - 50vw), calc(var(--header-h) / 2 - 0.37 * var(--vh))) scale(.05); }
}
@keyframes aura-exit-m {
  0%, 8% { opacity: 1; transform: none; }
  70% { opacity: .92; }
  82%, 100% { opacity: 0; transform: translate(calc(13px + clamp(16px, 2.6vw, 32px) - 50vw), calc(var(--header-h) / 2 - var(--vh) / 2 + 36vw)) scale(.11); }
}
@keyframes aura-exit-l {
  0%, 8% { opacity: 1; transform: none; }
  70% { opacity: .92; }
  82%, 100% { opacity: 0; transform: translate(calc(13px + clamp(16px, 2.6vw, 32px) - 50vw), calc(var(--header-h) / 2 - 0.37 * var(--vh))) scale(.11); }
}
.hero-inner { animation-name: hero-exit; }
.aura-wrap { animation-name: aura-exit; }
.hero-hint { animation-name: hint-exit; }
html.js .top .wordmark .mark { animation-name: mark-in; }
.hero-inner, .aura-wrap, .hero-hint, .top .wordmark .mark { animation-timing-function: linear; animation-fill-mode: both; }
html.sda .top .wordmark .mark { animation-timeline: --hero; animation-range: contain 0% contain 100%; }
html.nosda .top .wordmark .mark { animation-duration: 1s; animation-play-state: paused; animation-delay: calc(var(--hero-p, 0) * -1s); }
html { timeline-scope: --hero; }
.hero .scroller { view-timeline-name: --ch, --hero; }

.apps { position: relative; z-index: 1; background: var(--bg); margin-top: calc(-1 * var(--vh)); min-height: var(--vh); padding: var(--apps-pad) 0 clamp(96px, 15vh, 170px); transition: background-color .5s var(--ease); scroll-margin-top: calc(24px - var(--apps-pad)); }
.apps::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10vh; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg)); }
:is(html.reduce, html.still, html:not(.js)) .apps { margin-top: 0; min-height: 0; }
:is(html.reduce, html.still, html:not(.js)) .apps::before { display: none; }
.apps-title { margin: 0 0 clamp(22px, 4vh, 40px); font-size: 12.5px; font-weight: 500; line-height: 1.4; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 14px; }
.apps-title::before {
  content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 3px solid var(--accent-text);
}
.app-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.app-index > li { border-bottom: 1px solid var(--line); }

.ai {
  --on: 0;
  --tx: var(--on);
  --ai-bg: var(--surface); --ai-fg: var(--text); --ai-fg-2: var(--text-2); --ai-a0: var(--accent-text); --ai-a1: var(--accent-text); --ai-glow: rgba(232, 174, 98, .3);
  position: relative; isolation: isolate; display: grid; align-items: center; column-gap: clamp(18px, 2.6vw, 36px);
  grid-template-columns: clamp(64px, 9vw, 132px) auto minmax(0, 1fr) 28px;
  grid-template-areas: "num icon text arrow";
  min-height: clamp(214px, 29vh, 268px); padding: clamp(28px, 4.6vh, 48px) clamp(8px, 1.6vw, 22px);
  color: color-mix(in srgb, var(--ai-fg) calc(var(--tx) * 100%), var(--text)); border-radius: 8px;
  transition: --on .65s var(--ease);
}
.ai:hover, .ai:focus-visible, .ai:active { --on: 1; color: color-mix(in srgb, var(--ai-fg) calc(var(--tx) * 100%), var(--text)); }
.ai:active { transition-duration: .15s; }
.ai-sn { --ai-bg: #FAF5EC; --ai-fg: #1E1B17; --ai-fg-2: #55504A; --ai-a0: #DE8B4E; --ai-a1: #B0561C; --ai-glow: rgba(222, 139, 78, .45); --ai-frame: #15120E; --tag-bg: #F2C9A5; --tag-ink: #1E1B17; }
.ai-ar { --ai-bg: #1F3B30; --ai-fg: #F2F4EE; --ai-fg-2: #CBD6CE; --ai-a0: #D9B24C; --ai-a1: #D9B24C; --ai-glow: rgba(156, 197, 172, .4); --ai-frame: #111512; --tag-bg: #9CC5AC; --tag-ink: #1A211C; }
html[data-theme="light"] .ai-sn { --ai-bg: #F4D9BB; --ai-a0: #A44E14; --ai-a1: #8F3F0C; --ai-glow: rgba(222, 139, 78, .5); }
html[data-theme="light"] .ai-ar { --ai-a0: #1F3B30; --ai-glow: rgba(31, 59, 48, .35); }
.ai-wash { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ai-bg); transform: scaleX(var(--on)); transform-origin: 0 50%; opacity: min(1, calc(var(--on) * 3)); }
.ai-num { grid-area: num; font-family: var(--serif); font-style: italic; font-size: clamp(40px, 5vw, 66px); line-height: .9; letter-spacing: -0.02em; color: color-mix(in srgb, var(--ai-a1) calc(var(--tx) * 100%), var(--accent-text)); }
.ai-icon-wrap {
  grid-area: icon; position: relative; width: clamp(58px, 6vw, 86px); border-radius: 22.5%; overflow: hidden; isolation: isolate;
  transform: translateY(calc(-6px * var(--on))) scale(calc(1 + .06 * var(--on)));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 0 var(--ai-glow);
  transition: box-shadow .65s var(--ease);
}
.ai:hover .ai-icon-wrap, .ai:focus-visible .ai-icon-wrap { box-shadow: 0 22px 44px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 52px var(--ai-glow); }
.ai-icon { width: 100%; height: auto; border-radius: inherit; }
.ai-icon-wrap::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .22);
}
.ai-icon-wrap::after {
  content: ""; position: absolute; inset: -30%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
  transform: translateX(calc(-80% + 160% * var(--on))); opacity: min(1, calc(var(--on) * 2));
}
.ai-text { grid-area: text; display: grid; gap: 6px; min-width: 0; padding-right: clamp(170px, 22vw, 290px); }
.ai-name { font-size: clamp(38px, 4.6vw, 64px); line-height: 1; }
.ai-sn .ai-name { font-family: "Gabarito", var(--sans); font-weight: 600; letter-spacing: -0.025em; }
.ai-ar .ai-name { font-family: "Newsreader", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.ai-sub { font-size: clamp(16px, 1.45vw, 19px); color: color-mix(in srgb, var(--ai-fg-2) calc(var(--tx) * 100%), var(--text-2)); }
.ai-ar .ai-sub { font-family: "Newsreader", Georgia, serif; font-size: clamp(18px, 1.65vw, 22px); }
.ai-status { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13.5px; color: color-mix(in srgb, var(--ai-fg-2) calc(var(--tx) * 100%), var(--text-2)); }
.ai-status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; }
.ai-status.is-live::before { background: color-mix(in srgb, var(--ai-a1) calc(var(--tx) * 100%), var(--ai-a0)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ai-a0) 22%, transparent); }
.ai-status.is-soon::before { border: 1.5px solid color-mix(in srgb, var(--ai-a1) calc(var(--tx) * 100%), var(--ai-a0)); }
.ai-arrow { grid-area: arrow; width: 24px; height: 24px; justify-self: end; color: color-mix(in srgb, var(--ai-a1) calc(var(--tx) * 100%), var(--text-3)); transform: translateY(calc(5px * var(--on))); }

.ai-peek { position: absolute; top: 0; bottom: 0; right: clamp(52px, 7vw, 108px); width: clamp(150px, 16vw, 210px); overflow: clip; pointer-events: none; z-index: 0; --ph-w: clamp(128px, 11.6vw, 156px); --ph-h: calc(var(--ph-w) * 1304 / 600); --ph-rest: .60; --ph-rise: .32; }
.ai-phone {
  position: absolute; left: calc(50% - var(--ph-w) / 2); width: var(--ph-w); height: var(--ph-h); border-radius: 22px;
  bottom: calc(-1 * var(--ph-h) * (var(--ph-rest) - var(--ph-rise) * var(--on)));
  transform: rotate(calc(-5deg + 5deg * var(--on)));
  transform-origin: 50% 80%; background: #000;
  box-shadow: 0 0 0 5px var(--ai-frame, #15120E), 0 0 0 6px rgba(255, 255, 255, .07), 0 22px 48px rgba(0, 0, 0, .45);
}
.ai-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: inherit; }

.fr-tag, .ai-tag {
  position: absolute; top: 2px; right: 17px; z-index: 2; display: block; width: max-content; margin: 0;
  font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  color: var(--tag-ink, #1E1B17); background: var(--tag-bg, #F2C9A5); padding: 6px 9px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.ai-tag { position: sticky; top: calc(var(--header-h) + 2px); right: auto; margin: 2px 8px 0 auto; }
html.sda:not(.reduce) .ai-tag { top: calc(var(--header-h) + 16px); }

@keyframes peek-pass { from { transform: translateY(14px); } to { transform: translateY(-14px); } }
html.sda:not(.reduce) .ai-peek { animation: peek-pass linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

@keyframes row-on { from { --on: 0; } to { --on: 1; } }
@media (hover: none) {
  .ai { view-timeline-name: --row; --tx: clamp(0, (var(--on) - .5) * 1000, 1); }
  html.sda:not(.reduce) .ai { animation: row-on linear both; animation-timeline: --row; animation-range: cover 14% cover 40%; }
  html.nosda:not(.reduce) .reveal.in .ai { --on: 1; }

  html.sda:not(.reduce) .ai:focus-visible { animation: none; --on: 1; }
  .ai-wash { transform: none; opacity: var(--tx); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .ai:hover, .ai:focus-visible { color: var(--ai-fg); }
  .ai:hover .ai-sub, .ai:focus-visible .ai-sub, .ai:hover .ai-status, .ai:focus-visible .ai-status { color: var(--ai-fg-2); }
  .ai:hover .ai-num, .ai:focus-visible .ai-num, .ai:hover .ai-arrow, .ai:focus-visible .ai-arrow { color: var(--ai-a1); }
}

.app { background: var(--c-bg); color: var(--c-text); }
.app .scroller { --n: 6.6; }
.app .stage {
  display: grid; align-items: center; column-gap: clamp(24px, 3vw, 56px);
  grid-template-columns: minmax(0, 1fr) var(--device-w) minmax(0, 1fr);
  grid-template-areas: "left device right";
  padding: calc(var(--header-h) + 2vh) var(--gutter) 3vh;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
}
.app .stage > * { position: relative; z-index: 1; }
.app-head { grid-area: left; align-self: start; }
.app .chapter-label { color: var(--c-text-3); }
.app .chapter-label .num { color: var(--c-accent-ink); }
.app-name { display: flex; align-items: center; gap: 16px; font-family: var(--c-display); font-weight: 600; font-size: clamp(38px, 4.2vw, 60px); letter-spacing: -0.025em; line-height: 1; }
.arrival .app-name { font-weight: 400; letter-spacing: -0.01em; }
.app-icon { width: clamp(44px, 4.6vw, 64px); height: auto; border-radius: 22.5%; box-shadow: 0 8px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255,255,255,.2); }
.app-sub { margin: 14px 0 0; font-size: clamp(17px, 1.5vw, 21px); color: var(--c-text-2); }
.arrival .app-sub { font-family: var(--c-display); font-size: clamp(20px, 1.8vw, 26px); }
.app-fact { margin: 8px 0 0; font-size: 13.5px; color: var(--c-text-3); }

.story { grid-area: left; align-self: center; }
.sn-story { display: grid; grid-template-columns: 1fr; row-gap: 16px; }
.sn-story .captions { order: 1; }
.sn-story .path-wrap { order: 2; }
.path-wrap { position: relative; }
.path { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.path .row { display: flex; flex: 1; justify-content: space-between; align-items: center; }
.path i { width: 5px; height: 5px; border-radius: 50%; background: var(--c-dot-faint); }
.path i.wp { width: 12px; height: 12px; box-shadow: 0 0 0 0 rgba(222, 139, 78, 0); }
.captions { list-style: none; margin: 0; padding: 0; display: grid; }
.cap { grid-area: 1 / 1; }
.cap h3 { font-family: var(--c-display); font-size: clamp(18px, 1.55vw, 22px); line-height: 1.2; letter-spacing: -0.015em; color: var(--c-text); margin-bottom: 4px; }
.cap p { margin: 0; font-size: clamp(14px, 1.1vw, 15.5px); line-height: 1.5; color: var(--c-text-2); max-width: 36ch; }
.arrival .cap h3 { font-weight: 500; letter-spacing: -0.005em; font-size: clamp(22px, 2vw, 30px); }
@media (min-width: 900px) and (min-height: 820px) {
  .sn-story { grid-template-columns: 22px 1fr; grid-template-rows: repeat(6, auto); column-gap: 22px; row-gap: 0; margin-top: 18vh; }
  .sn-story .path-wrap { display: contents; }
  .sn-story .path { order: 0; display: grid; grid-row: 1 / 7; grid-column: 1; grid-template-rows: repeat(6, 1fr); width: auto; }
  .sn-story .captions { order: 0; grid-row: 1 / 7; grid-column: 2; grid-template-rows: repeat(6, 1fr); }
  @supports (grid-template-rows: subgrid) { .sn-story .path, .sn-story .captions { grid-template-rows: subgrid; } }
  .sn-story .path .row { display: grid; flex: none; grid-template-rows: repeat(6, 1fr); justify-items: center; align-items: center; padding-top: 5px; }
  .sn-story .path i.wp { width: 13px; height: 13px; }
  .sn-story .cap { grid-area: auto; padding: 0 0 16px; }
  .sn-story .cap h3 { color: var(--cap-h); }
  .sn-story .cap p { color: var(--cap-p); }
}

.ar-story { --fd: 14px; --fg: 7px; margin-top: 10vh; display: grid; row-gap: 28px; }
.forty-wrap { position: relative; }
.forty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, 22px); gap: 12px 14px; }
.forty li { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--c-dot-faint); background: transparent; }

.path-fill, .path-now, .forty-fill, .forty-now { display: none; }

.device { grid-area: device; margin: 0; position: relative; width: var(--device-w); justify-self: center; }
.device .screen { position: relative; aspect-ratio: 600 / 1304; border-radius: 38px; overflow: clip; background: #000; }
.device::before {
  content: ""; position: absolute; inset: -10px; border-radius: 48px; background: var(--c-frame, #15120E);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.device .screen { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.fr { position: absolute; inset: 0; overflow: clip; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.sn-device .fr:nth-child(1) .shot { transform-origin: 36% 28%; }
.sn-device .fr:nth-child(2) .shot { transform-origin: 40% 38%; }
.sn-device .fr:nth-child(3) .shot { transform-origin: 45% 48%; }
.sn-device .fr:nth-child(4) .shot { transform-origin: 42% 48%; }
.sn-device .fr:nth-child(5) .shot { transform-origin: 45% 44%; }
.sn-device .fr:nth-child(6) .shot { transform-origin: 50% 30%; }
.ar-device .fr:nth-child(1) .shot { transform-origin: 34% 28%; }
.ar-device .fr:nth-child(2) .shot { transform-origin: 45% 36%; }
.ar-device .fr:nth-child(3) .shot { transform-origin: 36% 34%; }
.ar-device .fr:nth-child(4) .shot { transform-origin: 36% 56%; }
.ar-device .fr:nth-child(5) .shot { transform-origin: 36% 30%; }
.ar-device .fr:nth-child(6) .shot { transform-origin: 36% 42%; }
.sennight { --tag-bg: #F2C9A5; --tag-ink: #1E1B17; }
.arrival { --tag-bg: #9CC5AC; --tag-ink: #1A211C; }

.counter { grid-area: right; align-self: start; justify-self: end; position: relative; margin-top: 4vh; text-align: right; }
.counter span { grid-area: 1 / 1; display: block; font-family: var(--serif); font-style: italic; font-size: clamp(120px, 15vw, 220px); line-height: .8; color: var(--c-text); letter-spacing: -0.04em; position: absolute; right: 0; top: 0; }
.counter em { display: block; margin-top: clamp(100px, 12.5vw, 184px); font-style: normal; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--c-text-3); }

.coda { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 80px); align-items: end; align-content: center; position: relative; z-index: 2; margin-top: -74vh; min-height: 74vh; padding-top: 8vh; padding-bottom: 8vh; }
:is(html.reduce, html.still, html:not(.js)) .coda { margin-top: 0; min-height: 0; transform: none; padding-bottom: clamp(72px, 12vh, 130px); }
.app-eyebrow { margin: 0 0 14px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-ink); }
.app-blurb { margin: 0; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.3; letter-spacing: -0.015em; color: var(--c-text); }
.coda-cta .small { color: var(--c-text-3); }
.app .btn-primary.app-btn { background: var(--c-btn-bg); color: var(--c-btn-text); box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.app .btn-primary.app-btn:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .2); }
.app .btn-ghost { color: var(--c-text); border-color: var(--c-ghost-line); }
.app .btn-ghost:hover { border-color: var(--c-text); background: color-mix(in srgb, var(--c-text) 6%, transparent); }

.coda-status { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 14px 0; font-weight: 560; font-size: 16px; line-height: 1.2; color: var(--c-text); }
.coda-status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px solid var(--c-accent); box-shadow: 0 0 0 4px rgba(217, 178, 76, .18); }

.close { padding: clamp(110px, 18vh, 200px) 0 clamp(90px, 14vh, 160px); position: relative; overflow: hidden; }
.close::before { content: ""; position: absolute; inset: auto -10% -60%; height: 120%; pointer-events: none; background: radial-gradient(50rem 26rem at 50% 100%, rgba(232, 174, 98, .12), transparent 65%); }
.contact { text-align: center; position: relative; }
.contact .chapter-label { justify-content: center; }
.contact .lede { max-width: 44ch; margin: 18px auto 34px; font-size: clamp(17px, 1.5vw, 20px); }
.contact-email { display: inline-block; font-size: clamp(22px, 3.6vw, 44px); font-weight: 600; letter-spacing: -0.025em; color: var(--text); border-bottom: 2px solid rgba(232, 174, 98, .6); padding-bottom: 4px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.contact-email:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

.site-footer { border-top: 1px solid var(--line); padding: 44px 0 52px; }
.site-footer .wrap { display: grid; gap: 22px; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-nav a { color: var(--text-2); font-size: 14px; display: inline-block; padding: 8px 2px; }
.footer-nav a:hover { color: var(--text); }
.legal { margin: 0; color: var(--text-3); font-size: 13.5px; line-height: 1.6; max-width: 72ch; }
.footer-meta { margin: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
html.sda:not(.reduce) .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 18%; }
html.nosda:not(.reduce) .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.nosda:not(.reduce) .reveal.in { opacity: 1; transform: none; }

html.reduce *, html.reduce *::before, html.reduce *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
html.reduce .hero .w, html.reduce .hero .cta-row, html.reduce .hero-hint { opacity: 1; transform: none; filter: none; animation: none; }
html.reduce .hint-dots i { opacity: .6; }
html.reduce .ai-peek { animation: none; transform: none; }
:is(html.reduce, html.still, html:not(.js)) .scroller { height: auto; view-timeline-name: none; }
:is(html.reduce, html.still, html:not(.js)) .stage { position: relative; height: auto; min-height: 0; overflow: visible; }
:is(html.reduce, html.still, html:not(.js)) .hero .stage { min-height: var(--vh); }
:is(html.reduce, html.still, html:not(.js)) .hero-inner, :is(html.reduce, html.still, html:not(.js)) .aura-wrap, :is(html.reduce, html.still, html:not(.js)) .hero-hint, :is(html.reduce, html.still, html:not(.js)) .top .wordmark .mark { animation: none; opacity: 1; transform: none; }
:is(html.reduce, html.still, html:not(.js)) .reveal { opacity: 1; transform: none; animation: none; }
:is(html.reduce, html.still, html:not(.js)) .progress { display: none; }
:is(html.reduce, html.still, html:not(.js)) .app.scrub { scroll-margin-top: 0; }

:is(html.reduce, html.still, html:not(.js)) .app .stage { display: flex; flex-direction: column; padding: calc(var(--header-h) + 6vh) var(--gutter) 0; }
:is(html.reduce, html.still, html:not(.js)) .app .app-head { order: 1; }
:is(html.reduce, html.still, html:not(.js)) .app .device { order: 2; }
:is(html.reduce, html.still, html:not(.js)) .app .story { order: 3; }
:is(html.reduce, html.still, html:not(.js)) .app .counter { display: none; }
:is(html.reduce, html.still, html:not(.js)) .app .app-head, :is(html.reduce, html.still, html:not(.js)) .app .story, :is(html.reduce, html.still, html:not(.js)) .app .device { opacity: 1; transform: none; }
:is(html.reduce, html.still, html:not(.js)) .app .device { width: 100%; margin: 28px 0 0; }
:is(html.reduce, html.still, html:not(.js)) .app .device::before { display: none; }
:is(html.reduce, html.still, html:not(.js)) .app .device .screen { aspect-ratio: auto; border-radius: 0; overflow: visible; background: none; box-shadow: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 4px 0 14px; }

@media (min-width: 600px) { :is(html.reduce, html.still, html:not(.js)) .app .device .screen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { :is(html.reduce, html.still, html:not(.js)) .app .device .screen { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
:is(html.reduce, html.still, html:not(.js)) .app .fr { position: relative; inset: auto; aspect-ratio: 600 / 1304; border-radius: 16px; background: #000; box-shadow: 0 10px 30px rgba(0,0,0,.18); counter-increment: shot; opacity: 1 !important; }
:is(html.reduce, html.still, html:not(.js)) .app .fr::before { content: counter(shot, decimal-leading-zero); position: absolute; top: 10px; left: 10px; z-index: 2; font: 600 11px/1 var(--serif); font-style: italic; padding: 5px 7px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; }
:is(html.reduce, html.still, html:not(.js)) .app .fr-tag { position: sticky; top: calc(var(--header-h) + 8px); right: auto; margin: 2px 8px 0 auto; }
:is(html.reduce, html.still, html:not(.js)) .app .shot { transform: none !important; animation: none !important; }
:is(html.reduce, html.still, html:not(.js)) .app .story { margin: 34px 0 0; display: block; align-self: stretch; max-width: none; }
:is(html.reduce, html.still, html:not(.js)) .app :is(.path-wrap, .forty-wrap) { display: none; }
:is(html.reduce, html.still, html:not(.js)) .app .captions, :is(html.reduce, html.still, html:not(.js)) .app .captions.slot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); grid-template-rows: none; gap: 22px 20px; counter-reset: cap; }

@media (min-width: 1100px) { :is(html.reduce, html.still, html:not(.js)) .app .captions.captions { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 14px; } }
@media (min-width: 700px) and (max-width: 1099px) { :is(html.reduce, html.still, html:not(.js)) .app .captions.captions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 28px; } }
:is(html.reduce, html.still, html:not(.js)) .app .cap { grid-area: auto; opacity: 1 !important; transform: none !important; animation: none !important; counter-increment: cap; }
:is(html.reduce, html.still, html:not(.js)) .app .cap::before { content: counter(cap, decimal-leading-zero); display: block; font: italic 400 18px/1 var(--serif); color: var(--c-accent-ink); margin-bottom: 8px; }
:is(html.reduce, html.still, html:not(.js)) .app .coda { padding-top: clamp(40px, 6vh, 64px); }
:is(html.reduce, html.still, html:not(.js)) .device .screen { counter-reset: shot; }

:is(html.reduce, html.still, html:not(.js)) .ai { --on: 1; }
:is(html.reduce, html.still, html:not(.js)) .app-index > li { border-bottom: 0; margin-bottom: 10px; }
:is(html.reduce, html.still, html:not(.js)) .app-index { border-top: 0; }

body.err .hero-inner { max-width: 760px; margin-top: 0; padding-top: 0; }
.err-code { margin: 0 0 10px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(96px, 17vw, 190px); line-height: .9; letter-spacing: -0.03em; }
.err h1 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -0.03em; }
.err .lede { max-width: 40ch; margin: clamp(28px, 5vh, 48px) auto 0; font-size: clamp(16px, 1.4vw, 19px); }
.err .cta-row { margin-top: clamp(22px, 3.4vh, 32px); }
body.err .stage { display: grid; place-items: center; min-height: var(--vh); }
body.err .aura-wrap { transform: scale(.92); }
.err .aura-fallback { animation: err-ignite 1.6s var(--ease) both; }
@keyframes err-ignite { from { opacity: 0; transform: translate(-50%, -50%) scale(.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .err .aura-fallback { animation: none; } }
@media (max-width: 899px) and (min-height: 521px) { .err .hero-inner { padding-top: calc(var(--vh) / 2 + 2.4vh); } .err-code { font-size: clamp(80px, 24vw, 120px); } }

@media (max-height: 520px) { body.err .stage { align-items: start; padding-top: calc(var(--header-h) + 14px); padding-bottom: 20px; } }

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: reveal .8s var(--ease-io); }
@keyframes reveal { from { clip-path: circle(0 at var(--vx, 95%) var(--vy, 32px)); } to { clip-path: circle(160vmax at var(--vx, 95%) var(--vy, 32px)); } }
html.reduce::view-transition-new(root) { animation: none; }

@media (max-width: 1180px) {
  .counter span { font-size: clamp(100px, 12vw, 160px); }
  .counter em { margin-top: clamp(84px, 10vw, 134px); }
}
@media (max-width: 1100px) and (min-width: 900px) {
  :root { --device-w: clamp(220px, 28vh, 270px); }
  .app .stage { column-gap: clamp(18px, 2.5vw, 32px); grid-template-columns: minmax(0, 1.15fr) var(--device-w) minmax(0, .85fr); }
  .counter span { font-size: clamp(80px, 11vw, 120px); }
  .counter em { margin-top: clamp(66px, 9vw, 100px); }
  .cap p { font-size: 14px; }
  .forty { grid-template-columns: repeat(10, 18px); gap: 10px 10px; }
  .forty li { width: 18px; height: 18px; }
}
@media (max-width: 1023px) {
  .ai { grid-template-columns: clamp(56px, 8vw, 96px) auto minmax(0, 1fr) 28px; }
  .ai-text { padding-right: clamp(150px, 20vw, 220px); }
  .ai-peek { right: clamp(40px, 5vw, 70px); width: 150px; --ph-w: 124px; }
}
@media (max-width: 899px) {
  :root { --header-h: 56px; --device-w: min(196px, 22.5vh); --apps-pad: clamp(72px, 15vh, 130px); }
  .aura-wrap { transform-origin: 50% calc(50% - 36vw); animation-name: aura-exit-m; }
  .aura-fallback { top: calc(50% - 36vw); width: 60vw; }
  .chapters { display: none; }
  html:not(.js) .chapters, body.err .chapters { display: flex; gap: 14px; }
  html:not(.js) .chapters a, body.err .chapters a { font-size: 13.5px; }
  .menu-btn { display: inline-grid; }
  .hero-inner { padding-top: calc(var(--header-h) + 4vh); margin-top: 0; }
  .hero h1 { font-size: clamp(46px, 14vw, 72px); }
  .hero .cta-row { gap: 10px; }
  .btn-primary, .btn-ghost { padding: 13px 22px; font-size: 15px; }

  .apps { padding-bottom: clamp(80px, 12vh, 120px); scroll-margin-top: calc(20px - var(--apps-pad)); }
  .ai { grid-template-columns: auto minmax(0, 1fr) 24px; grid-template-areas: "icon text arrow"; column-gap: 14px; padding: 26px 4px 28px; min-height: 230px; align-items: start; }
  .ai-num { display: none; }
  .ai-icon-wrap { width: 54px; margin-top: 6px; }
  .ai-text { padding-right: 112px; gap: 4px; }
  .ai-name { font-size: 34px; }
  .ai-sub { font-size: 15px; }
  .ai-ar .ai-sub { font-size: 17px; }
  .ai-status { font-size: 12.5px; gap: 8px; margin-top: 10px; align-items: start; line-height: 1.4; }
  .ai-status::before { margin-top: 5px; }
  .ai-arrow { align-self: start; margin-top: 10px; }
  .ai-peek { right: 12px; width: 124px; --ph-w: 102px; --ph-rest: .52; --ph-rise: .28; }
  .ai-phone { border-radius: 16px; box-shadow: 0 0 0 4px var(--ai-frame, #15120E), 0 0 0 5px rgba(255, 255, 255, .07), 0 16px 36px rgba(0, 0, 0, .45); }
  .ai-tag { margin: 2px auto 0; }

  .app .stage { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "head" "device" "story"; row-gap: 14px; align-items: center; padding: calc(var(--header-h) + 10px) var(--gutter) 26px; }
  .app-head { grid-area: head; align-self: start; }
  .app .chapter-label { margin-bottom: 8px; }
  .app-name { font-size: 30px; gap: 10px; }
  .app-icon { width: 34px; }
  .app-sub { margin-top: 6px; font-size: 15px; }
  .arrival .app-sub { font-size: 18px; }
  .app-fact { display: none; }
  .device { grid-area: device; align-self: center; }
  .story { grid-area: story; align-self: end; margin: 0; }
  .sn-story { row-gap: 14px; }
  .path i { width: 4px; height: 4px; }
  .path i.wp { width: 10px; height: 10px; }
  .cap h3 { font-size: 19px; }
  .cap p { font-size: 14px; max-width: none; }
  .arrival .cap h3 { font-size: 22px; }
  .ar-story { display: grid; row-gap: 14px; }
  .ar-story .captions { order: 1; }
  .ar-story .forty-wrap { order: 2; }

  .forty { grid-template-columns: repeat(10, 1fr); gap: var(--fg) 0; justify-items: center; }
  .forty li { width: var(--fd); height: var(--fd); }
  .counter { display: none; }
  .coda { grid-template-columns: 1fr; gap: 22px; margin-top: -70vh; min-height: 70vh; }
  .app-blurb { font-size: 19px; }

  .top.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 94%, transparent); }
  html[data-tone="light"] .top.scrolled { background: rgba(250, 245, 236, .96); }
  html[data-theme="light"][data-tone="moss"] .top.scrolled { background: rgba(26, 51, 42, .97); }
  .hero .stage::after { display: none; }
}

@media (max-width: 899px) and (min-height: 521px) {
  .hero .stage { place-items: start center; }
  .hero-inner { padding-top: calc(var(--vh) / 2 + 2.4vh); }
  .hero-label { margin-bottom: clamp(14px, 2.4vh, 24px); }
  .hero .cta-row { margin-top: clamp(24px, 4vh, 40px); }
  @keyframes hero-exit { 0% { opacity: 1; transform: none; } 28%, 100% { opacity: 0; transform: translateY(-8vh); } }
}
@media (max-width: 899px) and (max-height: 700px) {
  .hero h1 { font-size: clamp(42px, 12.5vw, 64px); }
  .hero-hint { display: none; }
}
@media (max-width: 380px) {
  .ai { column-gap: 12px; }
  .ai-icon-wrap { width: 48px; }
  .ai-name { font-size: 31px; }
  .ai-text { padding-right: 108px; }
  .ai-peek { right: 12px; width: 116px; --ph-w: 92px; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .ar-story { margin-top: 6vh; }
}
@media (max-height: 700px) and (min-width: 900px) {
  :root { --device-w: clamp(200px, 28vh, 260px); }
  .sn-story { margin-top: 10vh; }
}

@media (max-height: 520px) {
  :root { --header-h: 56px; --device-w: calc((var(--vh) - var(--header-h) - 40px) * 600 / 1304); --apps-pad: clamp(56px, 12vh, 90px); }
  .aura-wrap { transform-origin: 50% 37%; animation-name: aura-exit-l; }
  .aura-fallback { top: 37%; width: min(50vh, 90vw); }
  .hero-inner { padding-top: calc(var(--header-h) + 2vh); margin-top: 0; }

  .hero-label { margin-bottom: 12px; display: inline-block; padding: 5px 11px 4px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 72%, transparent); }
  .hero h1 { font-size: clamp(36px, 15.5vh, 76px); max-width: none; }
  .hero .cta-row { margin-top: 18px; }
  .hero-hint { display: none; }
  .ai { min-height: 0; padding-top: 22px; padding-bottom: 22px; }
  .ai-text { padding-right: 150px; }
  .ai-peek { right: 40px; width: 118px; --ph-w: 86px; --ph-rest: .58; --ph-rise: .20; }
  .ai-phone { border-radius: 14px; }
  .app .stage {
    display: grid; grid-template-columns: var(--device-w) minmax(0, 440px); grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "device ." "device head" "device story" "device .";
    justify-content: center; column-gap: clamp(28px, 6vw, 64px); row-gap: 14px; align-items: center;
    padding: calc(var(--header-h) + 10px) var(--gutter) 14px; max-width: none;
  }
  .app-head { grid-area: head; align-self: end; }
  .app .chapter-label { margin-bottom: 6px; }
  .app-name { font-size: 28px; gap: 10px; }
  .app-icon { width: 32px; }
  .app-sub { margin-top: 4px; font-size: 15px; }
  .arrival .app-sub { font-size: 17px; }
  .app-fact { display: none; }
  .device { grid-area: device; align-self: center; }
  .story { grid-area: story; align-self: start; margin: 0; max-width: 460px; }
  .counter { display: none; }
  .ar-story { display: grid; row-gap: 12px; margin: 0; }
  .ar-story .captions { order: 1; }
  .ar-story .forty-wrap { order: 2; }
  .forty { grid-template-columns: repeat(10, 1fr); gap: var(--fg) 0; justify-items: center; max-width: 340px; }
  .forty li { width: var(--fd); height: var(--fd); }
  .forty-wrap { max-width: 340px; }
  .path i { width: 4px; height: 4px; }
  .path i.wp { width: 10px; height: 10px; }
  .cap h3 { font-size: 18px; }
  .cap p { font-size: 14px; }
  .arrival .cap h3 { font-size: 20px; }
  .device .screen { border-radius: 22px; }
  .device::before { inset: -7px; border-radius: 29px; }
  .fr-tag { right: 8px; }
  .coda { grid-template-columns: 1.1fr .9fr; margin-top: -60vh; min-height: 60vh; padding-top: 5vh; padding-bottom: 5vh; }
}

@media (max-height: 380px) {
  .app .stage { row-gap: 10px; padding-top: calc(var(--header-h) + 6px); padding-bottom: 8px; }
  .app .chapter-label { margin-bottom: 4px; font-size: 11px; }
  .app .chapter-label .num { font-size: 18px; }
  .app-name { font-size: 24px; }
  .app-icon { width: 28px; }
  .app-sub, .arrival .app-sub { font-size: 14px; margin-top: 2px; }
  .cap h3, .arrival .cap h3 { font-size: 16px; margin-bottom: 2px; }
  .cap p { font-size: 13px; line-height: 1.45; }
  .ar-story { --fd: 10px; --fg: 5px; row-gap: 10px; }
  .forty { max-width: 300px; }
  .forty-wrap { max-width: 300px; }
  .hero h1 { font-size: clamp(34px, 13.5vh, 60px); }
  .hero-label { margin-bottom: 8px; }
  .hero .cta-row { margin-top: 14px; }
  .btn-primary, .btn-ghost { padding: 11px 20px; font-size: 14.5px; }
}

@media (max-width: 899px), (max-height: 520px) {
  .path-fill, .path-now, .forty-fill, .forty-now { display: block; }
  .path-fill { position: absolute; inset: 0; overflow: hidden; }
  .path-fill-in { position: absolute; inset: 0; }
  .path.is-ink { height: 100%; }
  .path.is-ink i { background: var(--c-dot); }
  .path-now { position: absolute; inset: 0; pointer-events: none; }
  .path-now::before { content: ""; position: absolute; left: 0; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); }
  .forty-wrap { position: relative; }
  .forty-fill { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, var(--fd)); row-gap: var(--fg); }
  .ff-row { display: block; position: relative; overflow: hidden; }
  .ff-in { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); justify-items: center; }
  .ff-in i { width: var(--fd); height: var(--fd); border-radius: 50%; background: var(--c-dot); }

  .forty-now { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fd) + var(--fg)); pointer-events: none; }
  .forty-now::before { content: ""; position: absolute; left: calc(5% - var(--fd) / 2); top: 0; width: var(--fd); height: var(--fd); border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); }
}

@media (max-width: 320px) {
  .top { padding: 0 12px; gap: 8px; }
  .wordmark { gap: 8px; font-size: 16px; }
  html:not(.js) .chapters, body.err .chapters { gap: 8px; }
  html:not(.js) .chapters a, body.err .chapters a { font-size: 12.5px; padding: 8px 0; }
  .controls { gap: 2px; }
  .ctl { width: 36px; height: 36px; }
  .hero-inner { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: clamp(36px, 17vw, 56px); max-width: none; }
  .hero .cta-row { flex-direction: column; align-items: center; gap: 10px; }
  .btn-primary, .btn-ghost { max-width: 100%; white-space: normal; text-align: center; justify-content: center; padding: 12px 18px; font-size: 14.5px; }

  .ai { grid-template-columns: auto minmax(0, 1fr) 24px; grid-template-areas: "icon text arrow" "peek peek peek"; row-gap: 12px; min-height: 0; padding: 22px 4px 0; }
  .ai-text { padding-right: 0; }
  .ai-peek { position: relative; grid-area: peek; inset: auto; right: auto; width: 100%; height: 150px; --ph-w: 92px; --ph-rest: .52; --ph-rise: .24; }
  .ai-phone { left: auto; right: 10px; }
  .cta-row.left { flex-direction: column; align-items: stretch; }
  .cta-row.left .btn-primary, .cta-row.left .btn-ghost { width: 100%; }
  .app .stage, :is(html.reduce, html.still, html:not(.js)) .app .stage { padding-left: 16px; padding-right: 16px; }
  :is(html.reduce, html.still, html:not(.js)) .app .device .screen { grid-template-columns: 1fr; }
  .app-name, .arrival .app-name { font-size: 26px; }
  .footer-nav { gap: 6px 16px; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .legal { font-size: 13px; }
}
@media (max-width: 320px) {
  .menu { padding: 22px 18px 18px; }
  .menu nav a { font-size: 19px; gap: 12px; }
  .menu nav .num { width: 22px; font-size: 16px; }
  .coda, .app .coda { grid-template-columns: 1fr; }
  .contact-email { font-size: 18px; overflow-wrap: anywhere; }
  .contact .lede { font-size: 16px; }
}
@media (max-width: 300px) {
  .wordmark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html:not(.js) .top, body.err .top { padding: 0 8px; gap: 6px; }
  html:not(.js) .chapters, body.err .chapters { gap: 6px; }
  html:not(.js) .chapters a, body.err .chapters a { font-size: 12px; }
  :root { --device-w: calc(100vw - 52px); }
  .err-code { font-size: 72px; }
  .ai { column-gap: 10px; grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "icon arrow" "text text" "peek peek"; row-gap: 8px; }
  .ai-icon-wrap { width: 42px; margin-top: 0; }
  .ai-arrow { margin-top: 9px; }
  .ai-name { font-size: 24px; }
  .ai-sub, .ai-ar .ai-sub { font-size: 14px; }
  .ai-status { font-size: 12px; }
}

.hero-inner, .aura-wrap, .hero-hint, .fr, .shot, .cap, .counter, .counter span, ol.path i, .forty li, .device, .app-head, .story, .path-fill, .path-fill-in, .path-now, .ff-row, .ff-in, .forty-now, .coda { animation-timing-function: linear; animation-fill-mode: both; }
html.sda .scroller :is(.hero-inner, .aura-wrap, .hero-hint, .fr, .shot, .cap, .counter, .counter span, ol.path i, .forty li, .device, .app-head, .story, .path-fill, .path-fill-in, .path-now, .ff-row, .ff-in, .forty-now), html.sda .coda { animation-timeline: --ch; animation-range: contain 0% contain 100%; animation-delay: 0s; animation-duration: auto; animation-play-state: running; }
html.nosda .scroller :is(.hero-inner, .aura-wrap, .hero-hint, .fr, .shot, .cap, .counter, .counter span, ol.path i, .forty li, .device, .app-head, .story, .path-fill, .path-fill-in, .path-now, .ff-row, .ff-in, .forty-now), html.nosda .coda { animation-duration: 1s; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s); }
:is(html.reduce, html.still, html:not(.js)) .scroller :is(.hero-inner, .aura-wrap, .hero-hint, .fr, .shot, .cap, .counter, .counter span, ol.path i, .forty li, .device, .app-head, .story, .path-fill, .path-fill-in, .path-now, .ff-row, .ff-in, .forty-now), :is(html.reduce, html.still, html:not(.js)) .coda { animation: none !important; }

@keyframes fr-6-1 { 0% { opacity: 1; } 13.20% { opacity: 1; } 16.80%, 100% { opacity: 0; } }
.device .fr:nth-child(1) { animation-name: fr-6-1; }
@keyframes fr-6-2 { 0%, 13.20% { opacity: 0; } 16.80% { opacity: 1; } 28.20% { opacity: 1; } 31.80%, 100% { opacity: 0; } }
.device .fr:nth-child(2) { animation-name: fr-6-2; }
@keyframes fr-6-3 { 0%, 28.20% { opacity: 0; } 31.80% { opacity: 1; } 43.20% { opacity: 1; } 46.80%, 100% { opacity: 0; } }
.device .fr:nth-child(3) { animation-name: fr-6-3; }
@keyframes fr-6-4 { 0%, 43.20% { opacity: 0; } 46.80% { opacity: 1; } 58.20% { opacity: 1; } 61.80%, 100% { opacity: 0; } }
.device .fr:nth-child(4) { animation-name: fr-6-4; }
@keyframes fr-6-5 { 0%, 58.20% { opacity: 0; } 61.80% { opacity: 1; } 73.20% { opacity: 1; } 76.80%, 100% { opacity: 0; } }
.device .fr:nth-child(5) { animation-name: fr-6-5; }
@keyframes fr-6-6 { 0%, 73.20% { opacity: 0; } 76.80% { opacity: 1; } 100% { opacity: 1; } }
.device .fr:nth-child(6) { animation-name: fr-6-6; }
@keyframes shot-6-1 { 0% { transform: scale(1); } 3.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 6.30% { transform: scale(1.28); } 9.00% { transform: scale(1.28); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 12.60% { transform: scale(1); } 100% { transform: scale(1); } }
.device .fr:nth-child(1) .shot { animation-name: shot-6-1; }
@keyframes shot-6-2 { 0%, 13.20% { transform: scale(1.012); } 16.80% { transform: scale(1); } 18.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 21.30% { transform: scale(1.28); } 24.00% { transform: scale(1.28); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 27.60% { transform: scale(1); } 100% { transform: scale(1); } }
.device .fr:nth-child(2) .shot { animation-name: shot-6-2; }
@keyframes shot-6-3 { 0%, 28.20% { transform: scale(1.012); } 31.80% { transform: scale(1); } 33.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 36.30% { transform: scale(1.28); } 39.00% { transform: scale(1.28); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 42.60% { transform: scale(1); } 100% { transform: scale(1); } }
.device .fr:nth-child(3) .shot { animation-name: shot-6-3; }
@keyframes shot-6-4 { 0%, 43.20% { transform: scale(1.012); } 46.80% { transform: scale(1); } 48.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 51.30% { transform: scale(1.28); } 54.00% { transform: scale(1.28); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 57.60% { transform: scale(1); } 100% { transform: scale(1); } }
.device .fr:nth-child(4) .shot { animation-name: shot-6-4; }
@keyframes shot-6-5 { 0%, 58.20% { transform: scale(1.012); } 61.80% { transform: scale(1); } 63.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 66.30% { transform: scale(1.28); } 69.00% { transform: scale(1.28); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 72.60% { transform: scale(1); } 100% { transform: scale(1); } }
.device .fr:nth-child(5) .shot { animation-name: shot-6-5; }
@keyframes shot-6-6 { 0%, 73.20% { transform: scale(1.012); } 76.80% { transform: scale(1); } 78.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 81.30% { transform: scale(1.28); } 84.00% { transform: scale(1.28); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 87.60% { transform: scale(1); } 100% { transform: scale(1); } }
.device .fr:nth-child(6) .shot { animation-name: shot-6-6; }

@keyframes capd-6-1 { 0% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } 13.20% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } 16.80%, 100% { --cap-h: #6B6459; --cap-p: #6B6459; transform: none; } }
@keyframes capd-6-2 { 0%, 13.20% { --cap-h: #746C60; --cap-p: #746C60; transform: translateX(-6px); } 16.80% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } 28.20% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } 31.80%, 100% { --cap-h: #6B6459; --cap-p: #6B6459; transform: none; } }
@keyframes capd-6-3 { 0%, 28.20% { --cap-h: #746C60; --cap-p: #746C60; transform: translateX(-6px); } 31.80% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } 43.20% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } 46.80%, 100% { --cap-h: #6B6459; --cap-p: #6B6459; transform: none; } }
@keyframes capd-6-4 { 0%, 43.20% { --cap-h: #746C60; --cap-p: #746C60; transform: translateX(-6px); } 46.80% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } 58.20% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } 61.80%, 100% { --cap-h: #6B6459; --cap-p: #6B6459; transform: none; } }
@keyframes capd-6-5 { 0%, 58.20% { --cap-h: #746C60; --cap-p: #746C60; transform: translateX(-6px); } 61.80% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } 73.20% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } 76.80%, 100% { --cap-h: #6B6459; --cap-p: #6B6459; transform: none; } }
@keyframes capd-6-6 { 0%, 73.20% { --cap-h: #746C60; --cap-p: #746C60; transform: translateX(-6px); } 76.80% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } 100% { --cap-h: #1E1B17; --cap-p: #55504A; transform: none; } }

@keyframes capm-6-1 { 0% { opacity: 1; transform: none; } 13.20% { opacity: 1; transform: none; } 15.00%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes capm-6-2 { 0%, 15.00% { opacity: 0; transform: translateY(12px); } 16.80% { opacity: 1; transform: none; } 28.20% { opacity: 1; transform: none; } 30.00%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes capm-6-3 { 0%, 30.00% { opacity: 0; transform: translateY(12px); } 31.80% { opacity: 1; transform: none; } 43.20% { opacity: 1; transform: none; } 45.00%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes capm-6-4 { 0%, 45.00% { opacity: 0; transform: translateY(12px); } 46.80% { opacity: 1; transform: none; } 58.20% { opacity: 1; transform: none; } 60.00%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes capm-6-5 { 0%, 60.00% { opacity: 0; transform: translateY(12px); } 61.80% { opacity: 1; transform: none; } 73.20% { opacity: 1; transform: none; } 75.00%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes capm-6-6 { 0%, 75.00% { opacity: 0; transform: translateY(12px); } 76.80% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }

.sn-story .cap:nth-child(1), .ar-story .cap:nth-child(1), .counter span:nth-child(1) { animation-name: capm-6-1; }
@media (min-width: 900px) and (min-height: 820px) { .sn-story .cap:nth-child(1) { animation-name: capd-6-1; } }
.sn-story .cap:nth-child(2), .ar-story .cap:nth-child(2), .counter span:nth-child(2) { animation-name: capm-6-2; }
@media (min-width: 900px) and (min-height: 820px) { .sn-story .cap:nth-child(2) { animation-name: capd-6-2; } }
.sn-story .cap:nth-child(3), .ar-story .cap:nth-child(3), .counter span:nth-child(3) { animation-name: capm-6-3; }
@media (min-width: 900px) and (min-height: 820px) { .sn-story .cap:nth-child(3) { animation-name: capd-6-3; } }
.sn-story .cap:nth-child(4), .ar-story .cap:nth-child(4), .counter span:nth-child(4) { animation-name: capm-6-4; }
@media (min-width: 900px) and (min-height: 820px) { .sn-story .cap:nth-child(4) { animation-name: capd-6-4; } }
.sn-story .cap:nth-child(5), .ar-story .cap:nth-child(5), .counter span:nth-child(5) { animation-name: capm-6-5; }
@media (min-width: 900px) and (min-height: 820px) { .sn-story .cap:nth-child(5) { animation-name: capd-6-5; } }
.sn-story .cap:nth-child(6), .ar-story .cap:nth-child(6), .counter span:nth-child(6) { animation-name: capm-6-6; }
@media (min-width: 900px) and (min-height: 820px) { .sn-story .cap:nth-child(6) { animation-name: capd-6-6; } }

@keyframes wp-6-1 { 0% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } 14.40% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } 15.60%, 100% { background: var(--c-dot); box-shadow: 0 0 0 0 rgba(222, 139, 78, 0); } }
ol.path > .row:nth-child(1) > i:nth-child(1) { animation-name: wp-6-1; }
@keyframes dot-36-1 { 0%, 2.00% { background: var(--c-dot-faint); } 3.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(1) > i:nth-child(2) { animation-name: dot-36-1; }
@keyframes dot-36-2 { 0%, 4.50% { background: var(--c-dot-faint); } 5.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(1) > i:nth-child(3) { animation-name: dot-36-2; }
@keyframes dot-36-3 { 0%, 7.00% { background: var(--c-dot-faint); } 8.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(1) > i:nth-child(4) { animation-name: dot-36-3; }
@keyframes dot-36-4 { 0%, 9.50% { background: var(--c-dot-faint); } 10.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(1) > i:nth-child(5) { animation-name: dot-36-4; }
@keyframes dot-36-5 { 0%, 12.00% { background: var(--c-dot-faint); } 13.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(1) > i:nth-child(6) { animation-name: dot-36-5; }
@keyframes wp-6-2 { 0%, 14.40% { background: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(222, 139, 78, 0); } 15.60% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } 29.40% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } 30.60%, 100% { background: var(--c-dot); box-shadow: 0 0 0 0 rgba(222, 139, 78, 0); } }
ol.path > .row:nth-child(2) > i:nth-child(1) { animation-name: wp-6-2; }
@keyframes dot-36-7 { 0%, 17.00% { background: var(--c-dot-faint); } 18.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(2) > i:nth-child(2) { animation-name: dot-36-7; }
@keyframes dot-36-8 { 0%, 19.50% { background: var(--c-dot-faint); } 20.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(2) > i:nth-child(3) { animation-name: dot-36-8; }
@keyframes dot-36-9 { 0%, 22.00% { background: var(--c-dot-faint); } 23.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(2) > i:nth-child(4) { animation-name: dot-36-9; }
@keyframes dot-36-10 { 0%, 24.50% { background: var(--c-dot-faint); } 25.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(2) > i:nth-child(5) { animation-name: dot-36-10; }
@keyframes dot-36-11 { 0%, 27.00% { background: var(--c-dot-faint); } 28.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(2) > i:nth-child(6) { animation-name: dot-36-11; }
@keyframes wp-6-3 { 0%, 29.40% { background: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(222, 139, 78, 0); } 30.60% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } 44.40% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } 45.60%, 100% { background: var(--c-dot); box-shadow: 0 0 0 0 rgba(222, 139, 78, 0); } }
ol.path > .row:nth-child(3) > i:nth-child(1) { animation-name: wp-6-3; }
@keyframes dot-36-13 { 0%, 32.00% { background: var(--c-dot-faint); } 33.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(3) > i:nth-child(2) { animation-name: dot-36-13; }
@keyframes dot-36-14 { 0%, 34.50% { background: var(--c-dot-faint); } 35.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(3) > i:nth-child(3) { animation-name: dot-36-14; }
@keyframes dot-36-15 { 0%, 37.00% { background: var(--c-dot-faint); } 38.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(3) > i:nth-child(4) { animation-name: dot-36-15; }
@keyframes dot-36-16 { 0%, 39.50% { background: var(--c-dot-faint); } 40.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(3) > i:nth-child(5) { animation-name: dot-36-16; }
@keyframes dot-36-17 { 0%, 42.00% { background: var(--c-dot-faint); } 43.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(3) > i:nth-child(6) { animation-name: dot-36-17; }
@keyframes wp-6-4 { 0%, 44.40% { background: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(222, 139, 78, 0); } 45.60% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } 59.40% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } 60.60%, 100% { background: var(--c-dot); box-shadow: 0 0 0 0 rgba(222, 139, 78, 0); } }
ol.path > .row:nth-child(4) > i:nth-child(1) { animation-name: wp-6-4; }
@keyframes dot-36-19 { 0%, 47.00% { background: var(--c-dot-faint); } 48.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(4) > i:nth-child(2) { animation-name: dot-36-19; }
@keyframes dot-36-20 { 0%, 49.50% { background: var(--c-dot-faint); } 50.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(4) > i:nth-child(3) { animation-name: dot-36-20; }
@keyframes dot-36-21 { 0%, 52.00% { background: var(--c-dot-faint); } 53.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(4) > i:nth-child(4) { animation-name: dot-36-21; }
@keyframes dot-36-22 { 0%, 54.50% { background: var(--c-dot-faint); } 55.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(4) > i:nth-child(5) { animation-name: dot-36-22; }
@keyframes dot-36-23 { 0%, 57.00% { background: var(--c-dot-faint); } 58.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(4) > i:nth-child(6) { animation-name: dot-36-23; }
@keyframes wp-6-5 { 0%, 59.40% { background: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(222, 139, 78, 0); } 60.60% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } 74.40% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } 75.60%, 100% { background: var(--c-dot); box-shadow: 0 0 0 0 rgba(222, 139, 78, 0); } }
ol.path > .row:nth-child(5) > i:nth-child(1) { animation-name: wp-6-5; }
@keyframes dot-36-25 { 0%, 62.00% { background: var(--c-dot-faint); } 63.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(5) > i:nth-child(2) { animation-name: dot-36-25; }
@keyframes dot-36-26 { 0%, 64.50% { background: var(--c-dot-faint); } 65.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(5) > i:nth-child(3) { animation-name: dot-36-26; }
@keyframes dot-36-27 { 0%, 67.00% { background: var(--c-dot-faint); } 68.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(5) > i:nth-child(4) { animation-name: dot-36-27; }
@keyframes dot-36-28 { 0%, 69.50% { background: var(--c-dot-faint); } 70.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(5) > i:nth-child(5) { animation-name: dot-36-28; }
@keyframes dot-36-29 { 0%, 72.00% { background: var(--c-dot-faint); } 73.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(5) > i:nth-child(6) { animation-name: dot-36-29; }
@keyframes wp-6-6 { 0%, 74.40% { background: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(222, 139, 78, 0); } 75.60% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } 100% { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(222, 139, 78, .28); } }
ol.path > .row:nth-child(6) > i:nth-child(1) { animation-name: wp-6-6; }
@keyframes dot-36-31 { 0%, 77.00% { background: var(--c-dot-faint); } 78.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(6) > i:nth-child(2) { animation-name: dot-36-31; }
@keyframes dot-36-32 { 0%, 79.50% { background: var(--c-dot-faint); } 80.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(6) > i:nth-child(3) { animation-name: dot-36-32; }
@keyframes dot-36-33 { 0%, 82.00% { background: var(--c-dot-faint); } 83.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(6) > i:nth-child(4) { animation-name: dot-36-33; }
@keyframes dot-36-34 { 0%, 84.50% { background: var(--c-dot-faint); } 85.50%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(6) > i:nth-child(5) { animation-name: dot-36-34; }
@keyframes dot-36-35 { 0%, 87.00% { background: var(--c-dot-faint); } 88.00%, 100% { background: var(--c-dot); } }
ol.path > .row:nth-child(6) > i:nth-child(6) { animation-name: dot-36-35; }

@keyframes forty-1 { 0% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 1.85% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 2.65%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(1) { animation-name: forty-1; }
@keyframes forty-2 { 0%, 1.85% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 2.65% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 4.10% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 4.90%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(2) { animation-name: forty-2; }
@keyframes forty-3 { 0%, 4.10% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 4.90% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 6.35% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 7.15%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(3) { animation-name: forty-3; }
@keyframes forty-4 { 0%, 6.35% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 7.15% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 8.60% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 9.40%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(4) { animation-name: forty-4; }
@keyframes forty-5 { 0%, 8.60% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 9.40% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 10.85% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 11.65%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(5) { animation-name: forty-5; }
@keyframes forty-6 { 0%, 10.85% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 11.65% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 13.10% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 13.90%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(6) { animation-name: forty-6; }
@keyframes forty-7 { 0%, 13.10% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 13.90% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 15.35% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 16.15%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(7) { animation-name: forty-7; }
@keyframes forty-8 { 0%, 15.35% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 16.15% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 17.60% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 18.40%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(8) { animation-name: forty-8; }
@keyframes forty-9 { 0%, 17.60% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 18.40% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 19.85% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 20.65%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(9) { animation-name: forty-9; }
@keyframes forty-10 { 0%, 19.85% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 20.65% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 22.10% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 22.90%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(10) { animation-name: forty-10; }
@keyframes forty-11 { 0%, 22.10% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 22.90% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 24.35% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 25.15%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(11) { animation-name: forty-11; }
@keyframes forty-12 { 0%, 24.35% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 25.15% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 26.60% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 27.40%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(12) { animation-name: forty-12; }
@keyframes forty-13 { 0%, 26.60% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 27.40% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 28.85% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 29.65%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(13) { animation-name: forty-13; }
@keyframes forty-14 { 0%, 28.85% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 29.65% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 31.10% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 31.90%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(14) { animation-name: forty-14; }
@keyframes forty-15 { 0%, 31.10% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 31.90% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 33.35% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 34.15%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(15) { animation-name: forty-15; }
@keyframes forty-16 { 0%, 33.35% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 34.15% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 35.60% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 36.40%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(16) { animation-name: forty-16; }
@keyframes forty-17 { 0%, 35.60% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 36.40% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 37.85% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 38.65%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(17) { animation-name: forty-17; }
@keyframes forty-18 { 0%, 37.85% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 38.65% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 40.10% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 40.90%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(18) { animation-name: forty-18; }
@keyframes forty-19 { 0%, 40.10% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 40.90% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 42.35% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 43.15%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(19) { animation-name: forty-19; }
@keyframes forty-20 { 0%, 42.35% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 43.15% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 44.60% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 45.40%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(20) { animation-name: forty-20; }
@keyframes forty-21 { 0%, 44.60% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 45.40% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 46.85% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 47.65%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(21) { animation-name: forty-21; }
@keyframes forty-22 { 0%, 46.85% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 47.65% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 49.10% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 49.90%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(22) { animation-name: forty-22; }
@keyframes forty-23 { 0%, 49.10% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 49.90% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 51.35% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 52.15%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(23) { animation-name: forty-23; }
@keyframes forty-24 { 0%, 51.35% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 52.15% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 53.60% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 54.40%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(24) { animation-name: forty-24; }
@keyframes forty-25 { 0%, 53.60% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 54.40% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 55.85% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 56.65%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(25) { animation-name: forty-25; }
@keyframes forty-26 { 0%, 55.85% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 56.65% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 58.10% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 58.90%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(26) { animation-name: forty-26; }
@keyframes forty-27 { 0%, 58.10% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 58.90% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 60.35% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 61.15%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(27) { animation-name: forty-27; }
@keyframes forty-28 { 0%, 60.35% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 61.15% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 62.60% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 63.40%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(28) { animation-name: forty-28; }
@keyframes forty-29 { 0%, 62.60% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 63.40% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 64.85% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 65.65%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(29) { animation-name: forty-29; }
@keyframes forty-30 { 0%, 64.85% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 65.65% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 67.10% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 67.90%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(30) { animation-name: forty-30; }
@keyframes forty-31 { 0%, 67.10% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 67.90% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 69.35% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 70.15%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(31) { animation-name: forty-31; }
@keyframes forty-32 { 0%, 69.35% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 70.15% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 71.60% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 72.40%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(32) { animation-name: forty-32; }
@keyframes forty-33 { 0%, 71.60% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 72.40% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 73.85% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 74.65%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(33) { animation-name: forty-33; }
@keyframes forty-34 { 0%, 73.85% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 74.65% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 76.10% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 76.90%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(34) { animation-name: forty-34; }
@keyframes forty-35 { 0%, 76.10% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 76.90% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 78.35% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 79.15%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(35) { animation-name: forty-35; }
@keyframes forty-36 { 0%, 78.35% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 79.15% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 80.60% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 81.40%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(36) { animation-name: forty-36; }
@keyframes forty-37 { 0%, 80.60% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 81.40% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 82.85% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 83.65%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(37) { animation-name: forty-37; }
@keyframes forty-38 { 0%, 82.85% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 83.65% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 85.10% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 85.90%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(38) { animation-name: forty-38; }
@keyframes forty-39 { 0%, 85.10% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 85.90% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 87.35% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 88.15%, 100% { background: var(--c-dot); border-color: var(--c-dot); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } }
.forty li:nth-child(39) { animation-name: forty-39; }
@keyframes forty-40 { 0%, 87.35% { background: transparent; border-color: var(--c-dot-faint); box-shadow: 0 0 0 0 rgba(217, 178, 76, 0); } 88.15% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } 100% { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(217, 178, 76, .26); } }
.forty li:nth-child(40) { animation-name: forty-40; }

@keyframes device-drift { 0% { opacity: 1; transform: translateY(1.2vh) rotate(-0.4deg); } 90.00% { opacity: 1; transform: translateY(-1.2vh) rotate(0.4deg); } 95.00%, 100% { opacity: 0; transform: translateY(-7vh) rotate(0.4deg); } }
.app .device { animation-name: device-drift; }
@keyframes stage-exit { 0%, 90.00% { opacity: 1; transform: none; } 95.00%, 100% { opacity: 0; transform: translateY(-5vh); } }
.app .app-head, .app .story, .app .counter { animation-name: stage-exit; }
@keyframes coda-rise { 0%, 90.00% { opacity: 0; transform: translateY(40vh); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 94.00% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes coda-rise-l { 0%, 90.00% { opacity: 0; transform: translateY(50vh); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 94.00% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.app .coda { animation-name: coda-rise; }

@keyframes shotl-6-1 { 0% { transform: scale(1); } 3.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 6.30% { transform: scale(1.24); } 9.00% { transform: scale(1.24); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 12.60% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes shotl-6-2 { 0%, 13.20% { transform: scale(1); } 16.80% { transform: scale(1); } 18.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 21.30% { transform: scale(1.24); } 24.00% { transform: scale(1.24); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 27.60% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes shotl-6-3 { 0%, 28.20% { transform: scale(1); } 31.80% { transform: scale(1); } 33.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 36.30% { transform: scale(1.24); } 39.00% { transform: scale(1.24); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 42.60% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes shotl-6-4 { 0%, 43.20% { transform: scale(1); } 46.80% { transform: scale(1); } 48.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 51.30% { transform: scale(1.24); } 54.00% { transform: scale(1.24); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 57.60% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes shotl-6-5 { 0%, 58.20% { transform: scale(1); } 61.80% { transform: scale(1); } 63.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 66.30% { transform: scale(1.24); } 69.00% { transform: scale(1.24); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 72.60% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes shotl-6-6 { 0%, 73.20% { transform: scale(1); } 76.80% { transform: scale(1); } 78.00% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 81.30% { transform: scale(1.24); } 84.00% { transform: scale(1.24); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 87.60% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes device-exit { 0%, 90.00% { opacity: 1; transform: none; } 95.00%, 100% { opacity: 0; transform: translateY(-7vh); } }
@keyframes wipe-box { 0% { transform: translateX(-100%); } 90.00%, 100% { transform: none; } }
@keyframes wipe-content { 0% { transform: translateX(100%); } 90.00%, 100% { transform: none; } }
@keyframes sn-now-6 { 0% { transform: translateX(0.0000%); } 13.20% { transform: translateX(0.0000%); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 16.80% { transform: translateX(16.6667%); } 28.20% { transform: translateX(16.6667%); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 31.80% { transform: translateX(33.3333%); } 43.20% { transform: translateX(33.3333%); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 46.80% { transform: translateX(50.0000%); } 58.20% { transform: translateX(50.0000%); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 61.80% { transform: translateX(66.6667%); } 73.20% { transform: translateX(66.6667%); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 76.80% { transform: translateX(83.3333%); } 100% { transform: translateX(83.3333%); } }
@keyframes ff-box-1 { 0% { transform: translateX(-100%); } 22.50%, 100% { transform: none; } }
@keyframes ff-content-1 { 0% { transform: translateX(100%); } 22.50%, 100% { transform: none; } }
@keyframes ff-box-2 { 0%, 22.50% { transform: translateX(-100%); } 45.00%, 100% { transform: none; } }
@keyframes ff-content-2 { 0%, 22.50% { transform: translateX(100%); } 45.00%, 100% { transform: none; } }
@keyframes ff-box-3 { 0%, 45.00% { transform: translateX(-100%); } 67.50%, 100% { transform: none; } }
@keyframes ff-content-3 { 0%, 45.00% { transform: translateX(100%); } 67.50%, 100% { transform: none; } }
@keyframes ff-box-4 { 0%, 67.50% { transform: translateX(-100%); } 90.00%, 100% { transform: none; } }
@keyframes ff-content-4 { 0%, 67.50% { transform: translateX(100%); } 90.00%, 100% { transform: none; } }
@keyframes ar-now-40 { 0% { transform: translate(0%, 0%); } 1.95% { transform: translate(0%, 0%); } 2.55% { transform: translate(10%, 0%); } 4.20% { transform: translate(10%, 0%); } 4.80% { transform: translate(20%, 0%); } 6.45% { transform: translate(20%, 0%); } 7.05% { transform: translate(30%, 0%); } 8.70% { transform: translate(30%, 0%); } 9.30% { transform: translate(40%, 0%); } 10.95% { transform: translate(40%, 0%); } 11.55% { transform: translate(50%, 0%); } 13.20% { transform: translate(50%, 0%); } 13.80% { transform: translate(60%, 0%); } 15.45% { transform: translate(60%, 0%); } 16.05% { transform: translate(70%, 0%); } 17.70% { transform: translate(70%, 0%); } 18.30% { transform: translate(80%, 0%); } 19.95% { transform: translate(80%, 0%); } 20.55% { transform: translate(90%, 0%); } 22.49% { transform: translate(90%, 0%); } 22.50% { transform: translate(0%, 100%); } 24.45% { transform: translate(0%, 100%); } 25.05% { transform: translate(10%, 100%); } 26.70% { transform: translate(10%, 100%); } 27.30% { transform: translate(20%, 100%); } 28.95% { transform: translate(20%, 100%); } 29.55% { transform: translate(30%, 100%); } 31.20% { transform: translate(30%, 100%); } 31.80% { transform: translate(40%, 100%); } 33.45% { transform: translate(40%, 100%); } 34.05% { transform: translate(50%, 100%); } 35.70% { transform: translate(50%, 100%); } 36.30% { transform: translate(60%, 100%); } 37.95% { transform: translate(60%, 100%); } 38.55% { transform: translate(70%, 100%); } 40.20% { transform: translate(70%, 100%); } 40.80% { transform: translate(80%, 100%); } 42.45% { transform: translate(80%, 100%); } 43.05% { transform: translate(90%, 100%); } 44.99% { transform: translate(90%, 100%); } 45.00% { transform: translate(0%, 200%); } 46.95% { transform: translate(0%, 200%); } 47.55% { transform: translate(10%, 200%); } 49.20% { transform: translate(10%, 200%); } 49.80% { transform: translate(20%, 200%); } 51.45% { transform: translate(20%, 200%); } 52.05% { transform: translate(30%, 200%); } 53.70% { transform: translate(30%, 200%); } 54.30% { transform: translate(40%, 200%); } 55.95% { transform: translate(40%, 200%); } 56.55% { transform: translate(50%, 200%); } 58.20% { transform: translate(50%, 200%); } 58.80% { transform: translate(60%, 200%); } 60.45% { transform: translate(60%, 200%); } 61.05% { transform: translate(70%, 200%); } 62.70% { transform: translate(70%, 200%); } 63.30% { transform: translate(80%, 200%); } 64.95% { transform: translate(80%, 200%); } 65.55% { transform: translate(90%, 200%); } 67.49% { transform: translate(90%, 200%); } 67.50% { transform: translate(0%, 300%); } 69.45% { transform: translate(0%, 300%); } 70.05% { transform: translate(10%, 300%); } 71.70% { transform: translate(10%, 300%); } 72.30% { transform: translate(20%, 300%); } 73.95% { transform: translate(20%, 300%); } 74.55% { transform: translate(30%, 300%); } 76.20% { transform: translate(30%, 300%); } 76.80% { transform: translate(40%, 300%); } 78.45% { transform: translate(40%, 300%); } 79.05% { transform: translate(50%, 300%); } 80.70% { transform: translate(50%, 300%); } 81.30% { transform: translate(60%, 300%); } 82.95% { transform: translate(60%, 300%); } 83.55% { transform: translate(70%, 300%); } 85.20% { transform: translate(70%, 300%); } 85.80% { transform: translate(80%, 300%); } 87.45% { transform: translate(80%, 300%); } 88.05% { transform: translate(90%, 300%); } 100% { transform: translate(90%, 300%); } }

@media (max-width: 899px), (max-height: 520px) {
  .device .fr:nth-child(1) .shot { animation-name: shotl-6-1; }
  .device .fr:nth-child(2) .shot { animation-name: shotl-6-2; }
  .device .fr:nth-child(3) .shot { animation-name: shotl-6-3; }
  .device .fr:nth-child(4) .shot { animation-name: shotl-6-4; }
  .device .fr:nth-child(5) .shot { animation-name: shotl-6-5; }
  .device .fr:nth-child(6) .shot { animation-name: shotl-6-6; }
  .app .device { animation-name: device-exit; }
  .app .coda { animation-name: coda-rise-l; }
  .app ol.path > .row:nth-child(n) > i:nth-child(n), .app .forty li:nth-child(n) { animation-name: none; }
  .path-fill { animation-name: wipe-box; }
  .path-fill-in { animation-name: wipe-content; }
  .path-now { animation-name: sn-now-6; }
  .ff-row:nth-child(1) { animation-name: ff-box-1; }
  .ff-row:nth-child(1) .ff-in { animation-name: ff-content-1; }
  .ff-row:nth-child(2) { animation-name: ff-box-2; }
  .ff-row:nth-child(2) .ff-in { animation-name: ff-content-2; }
  .ff-row:nth-child(3) { animation-name: ff-box-3; }
  .ff-row:nth-child(3) .ff-in { animation-name: ff-content-3; }
  .ff-row:nth-child(4) { animation-name: ff-box-4; }
  .ff-row:nth-child(4) .ff-in { animation-name: ff-content-4; }
  .forty-now { animation-name: ar-now-40; }
}