/* Alte Haas Grotesk, by Yann Le Coroller (www.yannlecoroller.com). The font files and their licence text are in /assets/fonts/.
   Licence, verbatim: "These fonts are freeware and can be distributed as long as they are together with this text file.
   I would appreciate very much to see what you have done with it anyway." */
@font-face{font-family:"Alte Haas";src:url("/assets/fonts/alte-haas-grotesk-regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Alte Haas";src:url("/assets/fonts/alte-haas-grotesk-bold.ttf") format("truetype");font-weight:700;font-display:swap}

/* Sentinel base layer: tokens, page, hero, menu, footer. Written for sentinel.how. */

:root {
  color-scheme: dark;
  --bg: #000;
  --ink: #fff;
  --g1: #fff;
  --hair: rgba(255, 255, 255, .22);
  --faint: rgba(255, 255, 255, .1);
  --sans: "Alte Haas", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: Inter, "Helvetica Neue", Arial, sans-serif;
  --zoom: .9;
  --vk: 1;
  --hs: 1.23;
  --bs: 1.07;
  --ps: 1.06;
  --gut: max(clamp(16px, calc(4vw * var(--vk)), 56px), calc(env(safe-area-inset-left, 0px) / var(--zoom)), calc(env(safe-area-inset-right, 0px) / var(--zoom)));
  --spectrum: linear-gradient(90deg, #ff5a5f, #ff9f1c, #ffe14d, #7cff6b, #2ee6d6, #4da3ff, #9b7bff, #ff6bd6);
  --theme-spin: 0deg;
}

/* On screens wider than 1100px the whole site draws at 75% of its base size, the scale the preview was judged at
   (Safari at 75%). --vk keeps screen-relative lengths where they were, since zoom shrinks those too. Font sizes keep
   their plain vw: Safari works those out from the window, not the zoomed page, and that is the look being matched. */
@media (width > 1100px) {
  :root { --zoom: .675; --vk: calc(1 / .75); }
}

html {
  zoom: var(--zoom);
  background: var(--bg);
}

html.day {
  filter: invert(1) hue-rotate(180deg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(17px * var(--bs));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
main { padding-inline: var(--gut); }
::selection { background: #fff; color: #000; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

h1,
h2 {
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: calc(clamp(40px, 6.2vw, 92px) * var(--hs));
  line-height: .94;
  letter-spacing: -.035em;
}

h2 {
  font-size: calc(clamp(28px, 3.3vw, 50px) * var(--hs));
  line-height: 1.02;
  letter-spacing: -.028em;
}

figcaption {
  max-width: 72ch;
  margin-top: 16px;
  color: var(--g1);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .03em;
}

/* The opening screen: the face's canvas fills it, the greeting sits bottom left. */

.hero {
  position: relative;
  background: var(--bg);
}

.hero .stage {
  position: relative;
  min-height: 560px;
  height: calc(100vh / var(--zoom));
  height: calc(100svh / var(--zoom));
  overflow: hidden;
  overflow: clip visible;
  background: var(--bg);
}

#gl{position:absolute;inset:0;width:100%;height:100%;display:block}

.hero #gl {
  bottom: auto;
  height: calc(100vh / var(--zoom));
  height: calc(100lvh / var(--zoom));
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  z-index: 3;
  left: var(--gut);
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  width: auto;
  max-width: min(680px, calc(58vw * var(--vk)));
  mix-blend-mode: difference;
  filter: grayscale(1);
}

.js .hero-copy > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.hero-copy.on > * { opacity: 1; transform: none; }
.hero-copy.on > :nth-child(2) { transition-delay: .25s; }
.hero-copy.on > :nth-child(3) { transition-delay: .7s; }
.hero-copy.on > :nth-child(4) { transition-delay: 1.1s; }

.hero-copy h1 {
  font-size: calc(clamp(40px, 6.2vw, 92px) * var(--hs));
  line-height: .94;
  letter-spacing: -.035em;
  text-wrap: initial;
}

.hero-copy h1.sweep {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-copy h1>span{display:block;white-space:nowrap}

.cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 64px;
  overflow: hidden;
  background: var(--hair);
  opacity: 0;
  transition: opacity 1s;
}

.cue.on { opacity: 1; }

.cue span{position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:sentinel-cue 2.4s cubic-bezier(.2,.7,.1,1) infinite}
.cue:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
#h-app{scroll-margin-top:110px}
@media(prefers-reduced-motion:reduce){.cue span{animation:none;top:30%}}

@media (max-width: 860px) {
  .hero-copy {
    right: var(--gut);
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 759px) {
  .hero-copy h1 { font-size: clamp(30px, 9vw, 44px); }
}

/* The menu: wordmark left, sections on the right, the day switch at the end. */

.nav {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: calc(28px + env(safe-area-inset-top, 0px)) var(--gut) 16px;
  color: #fff;
  mix-blend-mode: difference;
  transition: opacity 1s;
}

.intro .nav { opacity: 0; pointer-events: none; }
.nav.compact.open { background: #000; mix-blend-mode: normal; }
.nav a { text-decoration: none; }

.nav .wm {
  position: relative;
  display: inline-block;
  margin: -.45em 0;
  padding: .45em 0;
  font-family: var(--sans);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.wm-text { display: inline-block; font-weight: 400; }

.wm-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, calc(1.6vw * var(--vk)), 22px);
  margin: 0 0 0 auto;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.nav ul a {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
}

.nav ul a:hover,
.nav ul a[aria-current=page] { border-bottom-color: currentColor; }

.nav-menu {
  display: none;
  margin: 0;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  line-height: inherit;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-menu:hover,
.nav.open .nav-menu { border-bottom-color: currentColor; }

.nav.compact .nav-menu { display: block; margin-left: auto; }

.nav.compact ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px var(--gut) 20px;
  overflow: visible;
  border-bottom: 1px solid var(--hair);
  background: #000;
}

.nav.compact.open ul { display: flex; }
.nav.compact ul li + li { border-top: 1px solid var(--hair); }

.nav.compact ul a {
  display: block;
  padding: 13px 0 12px;
  border-bottom: 0;
  font-size: 12px;
}

.nav.compact ul a[aria-current=page] { text-decoration: underline; text-underline-offset: 4px; }

.day-switch {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 36px;
  margin: 0 0 0 calc(clamp(14px, calc(1.6vw * var(--vk)), 22px) - 24px);
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, transform .25s cubic-bezier(.2, .7, .1, 1);
}

.day-switch svg { display: block; width: 18px; height: 18px; }
.nav.compact .day-switch { margin-left: 0; }

@media (max-width: 860px) {
  .nav { gap: 14px; }
  .day-switch { margin-left: 0; }
}

.nav:not(.compact){padding-right:clamp(16px,calc(1.5vw * var(--vk)),24px)}

@media (min-width: 861px) {
  .nav > ul {
    position: fixed;
    top: calc(84px + env(safe-area-inset-top, 0px));
    right: 24px;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    width: max-content;
    max-height: calc(calc(100vh * var(--vk)) - 108px);
    margin: 0;
    padding: 6px 0;
    overflow-x: visible;
    overflow-y: auto;
  }
.nav>ul a{display:inline-block}
.nav .day-switch{margin-left:auto}}

/* The wordmark's one-time swap, from Sentinel's own rules. */
.nav .wm{position:relative}
.nav .wm.swapping .wm-text{animation:wm-home 4.2s both}
@media(prefers-reduced-motion:reduce){.nav .wm.swapping .wm-text{opacity:0}}

/* Footer, questions list, helpers. */

footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 40px;
  padding: 28px var(--gut) calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hair);
  color: var(--g1);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .06em;
}

footer a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

footer a:hover { text-decoration-thickness: 2px; }

@media (max-width: 759px) {
  footer { grid-template-columns: 1fr; }
}

.qa-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, calc(4vw * var(--vk)), 52px) clamp(28px, calc(4vw * var(--vk)), 64px);
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 760px) {
  .qa-list { grid-template-columns: 1fr; }
}

.page[hidden] { display: none !important; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Links glow through the colours on hover. Each hover starts somewhere new on the wheel (data-hue, set on hover). */

@property --ink-turn {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --ink-mix {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

[data-hue="0"] { --ink-from: 358; }
[data-hue="1"] { --ink-from: 35; }
[data-hue="2"] { --ink-from: 51; }
[data-hue="3"] { --ink-from: 113; }
[data-hue="4"] { --ink-from: 175; }
[data-hue="5"] { --ink-from: 212; }
[data-hue="6"] { --ink-from: 254; }
[data-hue="7"] { --ink-from: 316; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(a, button, summary, [role="button"]):hover {
    color: color-mix(in srgb, hsl(calc(var(--ink-from, 358) + var(--ink-turn)) 100% 68%) calc(var(--ink-mix) * 100%), #fff) !important;
    border-color: currentColor !important;
    animation: ink-wake 1.4s linear both, ink-turn 4s linear 1.4s infinite;
  }

  .wm:hover,
  .wm:hover * { animation: none; }
}

@keyframes ink-wake {
  0%, 43% { --ink-mix: 0; }
  100% { --ink-mix: 1; }
}

@keyframes ink-turn {
  from { --ink-turn: 0; }
  to { --ink-turn: 360; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; }
}


/* The day switch, from Sentinel's own rules. */
:root[data-theme="light"]{ --theme-spin: 180deg; }
.day-switch:active{ transform: scale(0.88); }
.sunmoon{
  display: block;
  overflow: hidden;
  transform: rotate(calc(var(--theme-spin) + var(--tilt, 0deg)));
  transition: transform 0.8s cubic-bezier(0.34, 1.35, 0.5, 1);
}
.day-switch:hover .sunmoon{ --tilt: 22deg; }
.sunmoon .core{
  transform-origin: 12px 12px;
  transform: scale(1.8);
  transition: transform 0.65s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.sunmoon .bite{
  fill: #fff;
  transform-origin: 12px 12px;
  transform: translate(2.97px, -2.97px) scale(1.64);
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.2, 1) 0.05s, fill 0.3s ease;
}
.sunmoon .rays line{
  transform-origin: 12px 12px;
  transform: scale(0.2) rotate(-40deg);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.sunmoon .star{
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease 0.4s, transform 0.6s cubic-bezier(0.34, 1.6, 0.5, 1) 0.4s;
}
.sunmoon .star-a{ transform-origin: 19px 3.85px; }
.sunmoon .star-b{ transform-origin: 21.6px 8.4px; }
.sunmoon .star > *{ animation: twinkle 3.4s ease-in-out infinite; }
.sunmoon .star-b > *{ animation-delay: 1.5s; }
:root[data-theme="light"] .sunmoon .core{ transform: scale(1); }
:root[data-theme="light"] .sunmoon .bite{ transform: translate(18px, -18px) scale(1.64); transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0), fill 0.3s ease; }
:root[data-theme="light"] .sunmoon .rays line{
  transform: none;
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.34, 1.7, 0.5, 1) calc(0.2s + var(--i) * 0.04s), opacity 0.3s ease calc(0.2s + var(--i) * 0.04s);
}
:root[data-theme="light"] .sunmoon .star{ opacity: 0; transform: scale(0); transition: opacity 0.15s ease, transform 0.2s ease; }
::view-transition-old(root),::view-transition-new(root){ animation: none; mix-blend-mode: normal; }
@media(prefers-reduced-motion:reduce){.sunmoon,.sunmoon *{transition:none!important}
.sunmoon .star>*{animation:none}}
.nav .day-switch{width:44px;height:44px;padding:10px;flex:none;border:1px solid transparent;border-radius:50%;background:transparent;color:#fff;transition:border-color .2s ease,transform .2s ease}
.nav .day-switch:hover{border-color:rgba(255,255,255,.3)}
.nav .day-switch:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.nav .day-switch:active{transform:scale(.9)}
.nav .day-switch svg{width:22px;height:22px;flex:none}
.sunmoon .bite{fill:#000}
@media(min-width:861px){.nav:not(.compact){mix-blend-mode:normal;pointer-events:none}
.nav:not(.compact)>.wm,.nav:not(.compact)>.day-switch{mix-blend-mode:difference;pointer-events:auto}
.nav:not(.compact)>ul{gap:2px;padding:0;overflow:visible}
.nav:not(.compact)>ul a{position:relative;box-sizing:border-box;min-height:44px;padding:12px 10px;margin-right:-10px;line-height:20px;color:#fff;mix-blend-mode:difference;pointer-events:auto;border:0;border-radius:5px;text-align:right;transition:background-color .18s ease,box-shadow .18s ease}
.nav:not(.compact)>ul a:hover,.nav:not(.compact)>ul a:focus-visible{mix-blend-mode:normal;background:#fff;color:#000}
.nav:not(.compact)>ul a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.nav:not(.compact)>ul a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}}
@media(min-width:861px) and (max-width:1100px) and (max-height:520px), (width > 1100px) and (max-height:390px){.nav:not(.compact)>ul{max-height:calc(calc(100vh * var(--vk)) - 108px);overflow-y:auto;overflow-x:hidden;padding-inline:12px;margin-right:-12px}}
@media(prefers-reduced-motion:reduce){.nav:not(.compact)>ul a{transition:none}}
@media(min-width:861px){html.day .nav:not(.compact)>.wm,html.day .nav:not(.compact)>.day-switch,html.day .nav:not(.compact)>ul a{mix-blend-mode:normal}}
html #nav.nav:not(.open){background:transparent;border-bottom:0;mix-blend-mode:difference}
#h-app h2{margin:0;font-size:clamp(48px,6.4vw,112px);line-height:.96;letter-spacing:-.045em;text-wrap:initial}
#h-app .si-panel{margin-top:clamp(56px,calc(7vw * var(--vk)),112px);padding:clamp(28px,calc(4vw * var(--vk)),72px);background:var(--ink,#fff);color:var(--bg,#000)}
#h-app .si-panel p{margin:0;color:inherit}
#h-app .si-panel-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
#h-app .si-panel-big{margin-top:clamp(18px,calc(2vw * var(--vk)),28px)!important;max-width:18ch;font-size:clamp(34px,4.4vw,76px);font-weight:700;line-height:1.02;letter-spacing:-.04em}
#h-app .si-panel-body{margin-top:clamp(16px,calc(2vw * var(--vk)),28px)!important;max-width:36ch;font-size:clamp(20px,1.8vw,30px);font-weight:500;line-height:1.35;letter-spacing:-.015em}
@media(max-width:760px){#h-app .si-panel{padding:28px 22px}}
#h-app .si-panel-big{max-width:28ch}
#h-app .si-panel-body{max-width:56ch}
#h-app .si-panel{--si-w:calc(100vw / var(--zoom,1));--si-off:calc((var(--si-w) - min(var(--si-w),1640px)) / 2 + var(--gut));box-sizing:border-box;width:var(--si-w);max-width:none;margin-left:calc(-1 * var(--si-off));padding:clamp(56px,calc(7vw * var(--vk)),120px) var(--si-off)}
#h-app.s-section{padding-bottom:0;border-bottom:0}
#h-app .si-panel{padding-right:calc((var(--si-w) - min(var(--si-w),1640px)) / 2 + var(--gut) + 174px)}
@media(max-width:1100px) and (min-width:861px){#h-app .si-panel{padding-right:190px}}
@media(max-width:860px){#h-app .si-panel{padding-right:var(--si-off)}}
#h-app .si-fig{margin:clamp(48px,calc(6vw * var(--vk)),96px) 0 0;color:inherit}
#h-app .si-lane+.si-lane{margin-top:clamp(28px,calc(3.4vw * var(--vk)),52px)}
#h-app .si-lane-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid currentColor;padding-top:12px}
#h-app .si-who{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
#h-app .si-canvas{display:block;width:100%;aspect-ratio:4.2/1;touch-action:pan-y}
#h-app .si-cap{margin-top:clamp(24px,calc(3vw * var(--vk)),40px);font-size:clamp(20px,1.9vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
@media(max-width:860px){#h-app .si-canvas{aspect-ratio:2.2/1}}
@media(max-width:640px){#h-app .si-lane-top{margin-bottom:10px}}
#h-app .si-cap{color:inherit;font-family:var(--sans);max-width:none}
#h-app .si-lane-top{padding-top:clamp(14px,calc(1.6vw * var(--vk)),22px);margin-bottom:clamp(10px,calc(1.4vw * var(--vk)),20px)}
#h-app .si-who{font-family:var(--sans);font-size:clamp(28px,3vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1;text-transform:none}
#h-app .si-fig{container-type:inline-size}
@media(min-width:861px){#h-app .si-cap{white-space:nowrap;font-size:min(22px,1.38cqi);font-weight:600;letter-spacing:-.01em}}
@media(max-width:860px){#h-app .si-cap{font-size:16px;font-weight:600;letter-spacing:-.01em}}
@media(min-width:861px) and (max-width:1100px){#h-app .si-cap{white-space:normal;font-size:16px}}
#h-app.s-intro{--iw-r:var(--gut);--ig:clamp(28px,calc(5vw * var(--vk)),96px)}
@media(min-width:861px){#h-app.s-intro{--iw-r:calc(var(--gut) + 174px);margin-left:calc(-1 * max(0px,(100vw / var(--zoom,1) - 1640px) / 2));width:calc(100vw / var(--zoom,1) - var(--gut) - var(--iw-r));max-width:none;box-sizing:border-box}}
@media(min-width:861px) and (max-width:1100px){#h-app.s-intro{--iw-r:190px}}
#h-app.s-intro .si-opening{margin-left:0;width:auto}
#h-app.s-intro .si-panel{margin-left:calc(-1 * var(--gut));width:calc(100vw / var(--zoom,1));padding-left:var(--gut);padding-right:var(--iw-r)}
@media(min-width:861px){#h-app.s-intro .si-panel-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--ig)}
#h-app.s-intro .si-panel-head{align-items:end}
#h-app.s-intro .si-panel-big{max-width:none}
#h-app.s-intro .si-panel-body{margin-top:0!important;max-width:40ch}}
@media (width > 1100px){#h-app.s-intro .si-canvas{aspect-ratio:5.2/1}}
#h-app .si-story{margin-top:clamp(72px,calc(9vw * var(--vk)),160px);max-width:21em;font-size:clamp(28px,3.3vw,58px)}
#h-app .si-line{margin:0 0 1.1em;font-size:1em;font-weight:700;line-height:1.16;letter-spacing:-.028em;color:var(--ink,#fff);text-wrap:pretty}
#h-app .si-punch{font-size:1.6em;line-height:1;letter-spacing:-.04em;margin:-.15em 0 .75em}
#h-app .si-punch:last-child{margin-bottom:0;font-size:1.25em;line-height:1.08}
#h-app .si-story .w{opacity:.2;transition:opacity .25s linear}
#h-app .si-story.si-done .w{opacity:1}
@media(max-width:860px){#h-app .si-story{max-width:none;font-size:clamp(26px,7vw,34px)}}
:is(#phases,#s-drive,#s-all,#s-think).si-sec{--iw-r:var(--gut)}
@media(min-width:861px){:is(#phases,#s-drive,#s-all,#s-think).si-sec{--iw-r:calc(var(--gut) + 174px);margin-left:calc(-1 * max(0px,(100vw / var(--zoom,1) - 1640px) / 2));width:calc(100vw / var(--zoom,1) - var(--gut) - var(--iw-r));max-width:none;box-sizing:border-box}}
@media(min-width:861px) and (max-width:1100px){:is(#phases,#s-drive,#s-all,#s-think).si-sec{--iw-r:190px}}
:is(#phases,#s-drive,#s-all,#s-think).si-sec h2{margin:0;font-size:clamp(48px,6.4vw,112px);line-height:.96;letter-spacing:-.045em;text-wrap:initial}
:is(#phases,#s-drive,#s-all,#s-think) .si-story{margin-top:clamp(72px,calc(9vw * var(--vk)),160px);max-width:21em;font-size:clamp(28px,3.3vw,58px)}
:is(#phases,#s-drive,#s-all,#s-think) .si-line{margin:0 0 1.1em;font-size:1em;font-weight:700;line-height:1.16;letter-spacing:-.028em;color:var(--ink,#fff);text-wrap:pretty}
:is(#phases,#s-drive,#s-all,#s-think) .si-punch{font-size:1.25em;line-height:1.08;letter-spacing:-.035em;margin:0 0 .9em}
:is(#phases,#s-drive,#s-all,#s-think) .si-punch:last-child{margin-bottom:0}
:is(#phases,#s-drive,#s-all,#s-think) .si-story .w{opacity:.2;transition:opacity .25s linear}
:is(#phases,#s-drive,#s-all,#s-think) .si-story.si-done .w{opacity:1}
:is(#phases,#s-drive,#s-all,#s-think) .s-link{margin-top:clamp(20px,calc(2.4vw * var(--vk)),32px)}
@media(max-width:860px){:is(#phases,#s-drive,#s-all,#s-think) .si-story{max-width:none;font-size:clamp(26px,7vw,34px)}}
#h-app .si-human{margin-top:clamp(64px,calc(8vw * var(--vk)),128px);padding-top:clamp(24px,calc(2.6vw * var(--vk)),40px);border-top:1px solid currentColor}
#h-app .si-human p{margin:0;color:inherit}
#h-app .si-human-big{font-size:clamp(30px,3.6vw,64px);font-weight:700;line-height:1.04;letter-spacing:-.035em}
#h-app .si-human-body{margin-top:clamp(16px,calc(2vw * var(--vk)),28px)!important;font-size:clamp(20px,1.8vw,30px);font-weight:500;line-height:1.3;letter-spacing:-.015em;max-width:40ch}
@media(min-width:861px){#h-app.s-intro .si-human{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--ig);align-items:end}
#h-app.s-intro .si-human-body{margin-top:0!important}}
#h-app .si-human-body p+p{margin-top:.8em}
@media(min-width:861px){#h-app.s-intro .si-human{align-items:start}}
#h-app .si-human-body{max-width:none}
@media(min-width:861px){#h-app.s-intro .si-panel-body{max-width:none}}
:is(#how,#works,#faq,#rsrch,#s-me,#ex).si-sec{--iw-r:var(--gut)}
@media(min-width:861px){:is(#how,#works,#faq,#rsrch,#s-me,#ex).si-sec{--iw-r:calc(var(--gut) + 174px);margin-left:calc(-1 * max(0px,(100vw / var(--zoom,1) - 1640px) / 2));width:calc(100vw / var(--zoom,1) - var(--gut) - var(--iw-r));max-width:none;box-sizing:border-box}}
@media(min-width:861px) and (max-width:1100px){:is(#how,#works,#faq,#rsrch,#s-me,#ex).si-sec{--iw-r:190px}}
:is(#how,#works) .si-eyebrow{margin:0 0 clamp(18px,calc(2vw * var(--vk)),28px);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--s-muted,#aaa)}
:is(#how,#works,#faq,#rsrch,#s-me,#ex).si-sec h2{margin:0;font-size:clamp(48px,6.4vw,112px);line-height:.96;letter-spacing:-.045em;text-wrap:initial}
:is(#how,#works) .si-quote{margin:clamp(56px,calc(7vw * var(--vk)),120px) 0 0;padding:0}
:is(#how,#works) .si-quote p{margin:0;font-size:clamp(34px,4.4vw,80px);font-weight:700;line-height:1.02;letter-spacing:-.04em;font-style:normal}
:is(#how,#works) .si-quote footer{margin-top:clamp(14px,calc(1.6vw * var(--vk)),22px);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-muted,#aaa)}
:is(#how,#works) .si-story{margin-top:clamp(56px,calc(7vw * var(--vk)),120px);max-width:21em;font-size:clamp(28px,3.3vw,58px)}
:is(#how,#works) .si-line{margin:0 0 1.1em;font-size:1em;font-weight:700;line-height:1.16;letter-spacing:-.028em;color:var(--ink,#fff);text-wrap:pretty}
:is(#how,#works) .si-punch{font-size:1.25em;line-height:1.08;letter-spacing:-.035em;margin:0}
:is(#how,#works) .si-story .w{opacity:.2;transition:opacity .25s linear}
:is(#how,#works) .si-story.si-done .w{opacity:1}
@media(max-width:860px){:is(#how,#works) .si-story{max-width:none;font-size:clamp(26px,7vw,34px)}}
:is(#how,#works) .si-quote p.si-quote-by{margin-top:clamp(14px,calc(1.6vw * var(--vk)),22px);font-family:var(--mono);font-size:12px;font-weight:400;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--s-muted,#aaa)}
:is(#how,#works) .si-vs{--vg:clamp(24px,calc(3vw * var(--vk)),56px);margin-top:clamp(96px,calc(12vw * var(--vk)),200px)}
:is(#how,#works) .si-vs-title{margin:0;font-size:clamp(40px,5.4vw,96px);font-weight:700;line-height:.98;letter-spacing:-.045em}
:is(#how,#works) .si-vs-plug{margin:clamp(48px,calc(6vw * var(--vk)),96px) 0 0;padding-top:clamp(22px,calc(2.6vw * var(--vk)),40px);border-top:1px solid var(--ink,#fff);max-width:30em;font-size:clamp(22px,2.2vw,38px);font-weight:700;line-height:1.2;letter-spacing:-.025em}
:is(#how,#works) .si-beats{margin-top:clamp(64px,calc(8vw * var(--vk)),140px)}
:is(#how,#works) .sbt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,calc(5vw * var(--vk)),96px);align-content:center;min-height:clamp(320px,calc(58vh * var(--vk)),680px);padding:clamp(28px,calc(3vw * var(--vk)),48px) 0}
:is(#how,#works) .sbt p{margin:0}
:is(#how,#works) .sbt-big{grid-column:1/-1;font-size:clamp(88px,13.5vw,250px);font-weight:700;line-height:.86;letter-spacing:-.06em;white-space:nowrap}
:is(#how,#works) .sbt-line{grid-column:2;margin-top:clamp(18px,calc(2.4vw * var(--vk)),40px)!important;max-width:30em;font-size:clamp(19px,1.8vw,30px);font-weight:600;line-height:1.3;letter-spacing:-.015em}
:is(#how,#works) .sbt-llm .sbt-big{color:#5c5c5c}
:is(#how,#works) .sbt-llm .sbt-line{color:var(--s-muted,#aaa)}
:is(#how,#works) .sbt-sen .sbt-big,:is(#how,#works) .sbt-sen .sbt-line{color:var(--ink,#fff)}
:is(#how,#works) .sbt-turn{margin:clamp(40px,calc(6vw * var(--vk)),120px) 0;padding-top:clamp(28px,calc(3vw * var(--vk)),48px);border-top:1px solid var(--ink,#fff);font-size:clamp(40px,5.6vw,100px);font-weight:700;line-height:.98;letter-spacing:-.045em}
:is(#how,#works) .sbt,:is(#how,#works) .sbt-turn{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
:is(#how,#works) .sbt.on,:is(#how,#works) .sbt-turn.on{opacity:1;transform:none}
:is(#how,#works) .si-beats+.si-vs-plug{margin-top:clamp(56px,calc(7vw * var(--vk)),120px)}
@media(max-width:860px){:is(#how,#works) .sbt{grid-template-columns:1fr;min-height:0;padding:36px 0}
:is(#how,#works) .sbt-line{grid-column:1}
:is(#how,#works) .sbt-big{font-size:clamp(72px,22vw,120px)}}
@media(prefers-reduced-motion:reduce){:is(#how,#works) .sbt,:is(#how,#works) .sbt-turn{opacity:1;transform:none;transition:none}}
:is(#how,#works) .sbt-big{font-variant-numeric:tabular-nums}
:is(#how,#works) .sbt-anim{display:inline-block;min-width:.5em}
:is(#how,#works) .sbt-caret{display:inline-block;width:.07em;height:.78em;margin-left:.05em;background:currentColor;vertical-align:-.02em;animation:sbt-blink .9s steps(1) infinite}
@media(min-width:861px){:is(#how,#works) .sbt{align-items:end;min-height:clamp(280px,calc(46vh * var(--vk)),560px)}
:is(#how,#works) .sbt-big{grid-column:1}
:is(#how,#works) .sbt-line{grid-column:2;margin-top:0!important;padding-bottom:.3em}}
:is(#how,#works) .si-moment{margin-top:clamp(96px,calc(12vw * var(--vk)),200px)}
:is(#how,#works) .si-moment p{margin:0}
:is(#how,#works,#ex) .sm-title{font-size:clamp(40px,5.6vw,100px);font-weight:700;line-height:.98;letter-spacing:-.045em}
:is(#how,#works,#ex) .sm-lead{margin-top:clamp(18px,calc(2vw * var(--vk)),30px)!important;max-width:34em;font-size:clamp(20px,1.9vw,32px);font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--s-muted,#aaa)}
:is(#how,#works,#ex) .sm-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(28px,calc(5vw * var(--vk)),96px);margin-top:clamp(24px,calc(3vw * var(--vk)),48px)}
:is(#how,#works,#ex) .sm-fig{position:sticky;top:max(80px,calc(14vh * var(--vk)));height:min(calc(68vh * var(--vk)),640px);margin:0}
:is(#how,#works,#ex) .sm-canvas{display:block;width:100%;height:100%}
:is(#how,#works,#ex) .sm-step{min-height:calc(72vh * var(--vk));display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .45s ease}
:is(#how,#works,#ex) .sm-step.is-on{opacity:1}
:is(#how,#works,#ex) .sm-step-h{font-size:clamp(26px,2.6vw,46px);font-weight:700;line-height:1.05;letter-spacing:-.03em}
:is(#how,#works,#ex) .sm-step-p{margin-top:clamp(14px,calc(1.6vw * var(--vk)),24px)!important;font-size:clamp(18px,1.5vw,24px);font-weight:500;line-height:1.45;color:var(--s-muted,#aaa)}
@media(max-width:860px){:is(#how,#works,#ex) .sm-grid{grid-template-columns:1fr}
:is(#how,#works,#ex) .sm-fig{top:56px;height:calc(40vh * var(--vk));z-index:2;background:var(--bg,#000)}
:is(#how,#works,#ex) .sm-step{min-height:calc(62vh * var(--vk));justify-content:flex-end;padding-bottom:calc(10vh * var(--vk))}}
@media(prefers-reduced-motion:reduce){:is(#how,#works,#ex) .sm-step{transition:none}}
@media(max-width:860px){:is(#how,#works,#ex) .sm-fig{top:0;padding-top:56px;height:calc(calc(40vh * var(--vk)) + 56px);box-sizing:border-box}}
:is(#how,#works,#ex) .sm-fig{display:flex;flex-direction:column}
:is(#how,#works,#ex) .sm-canvas{flex:1 1 auto;min-height:0;height:auto}
.sentinel-sub{--s-muted:#aaa;--s-line:rgba(255,255,255,.2)}
.sentinel-sub main>.s-section:first-child{padding-top:0}
.sentinel-sub .s-example-back{margin:0 0 clamp(18px,calc(2.2vw * var(--vk)),30px)}
#how>.si-how-link{margin-top:clamp(48px,calc(6vw * var(--vk)),96px)}
#works .si-moment{margin-top:0}
#works h1.sm-title{margin:0;font-size:clamp(48px,6.4vw,112px);line-height:.96;letter-spacing:-.045em}
#works .hw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,calc(5vw * var(--vk)),96px);align-items:center;margin-top:clamp(120px,calc(14vw * var(--vk)),240px)}
#works .hw-flip .hw-fig{order:-1}
#works .hw-text p{margin:0}
#works .hw-n{margin:0 0 clamp(16px,calc(2vw * var(--vk)),26px)!important;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--s-muted,#aaa)}
#works .hw h2{margin:0;font-size:clamp(40px,4.8vw,86px);font-weight:700;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
#works .hw-p{margin-top:clamp(20px,calc(2.4vw * var(--vk)),34px)!important;max-width:30em;font-size:clamp(19px,1.6vw,26px);font-weight:500;line-height:1.38;letter-spacing:-.01em;color:var(--ink,#fff)}
#works .hw-p+.hw-p{margin-top:.8em!important}
#works .hw-fig{margin:0;aspect-ratio:4/3;min-width:0}
#works .hw-canvas{display:block;width:100%;height:100%}
#works .si-vs h2.si-vs-title{margin:0;font-size:clamp(40px,5.4vw,96px);line-height:.98;letter-spacing:-.045em}
#works .si-vs .hw{margin-top:clamp(96px,calc(12vw * var(--vk)),200px)}
#works .hw+.si-vs-plug{margin-top:clamp(72px,calc(9vw * var(--vk)),140px)}
:is(#works,#rsrch,#ex) .hw-next{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:clamp(80px,calc(10vw * var(--vk)),160px)}
:is(#works,#rsrch,#ex) .hw-next .s-link{margin:0}
#works .hw-there{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,calc(2.4vw * var(--vk)),36px)}
#works .ht-who{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--s-muted,#aaa)}
#works .ht-col ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#works .ht-col li{padding:14px 16px;border:1px solid var(--s-line,rgba(255,255,255,.2));border-radius:12px;font-size:clamp(15px,1.25vw,19px);font-weight:600;line-height:1.25;color:var(--s-muted,#aaa);opacity:.35;transition:opacity .35s ease,color .35s ease,border-color .35s ease,background-color .35s ease}
#works .ht-col li.on{opacity:1;color:var(--ink,#fff);border-color:var(--ink,#fff)}
#works .ht-col li.ht-ans.on{background:var(--ink,#fff);color:#000}
@media(max-width:860px){#works .hw{grid-template-columns:1fr;row-gap:28px;margin-top:clamp(88px,calc(20vw * var(--vk)),140px)}
#works .hw-flip .hw-fig{order:0}}
@media(prefers-reduced-motion:reduce){#works .ht-col li{transition:none}}
#faq h1{margin:0 0 clamp(40px,calc(5vw * var(--vk)),72px);font-size:clamp(48px,6.4vw,112px);font-weight:700;line-height:.96;letter-spacing:-.045em}
#rsrch h1{margin:0;font-size:clamp(48px,6.4vw,112px);font-weight:700;line-height:.96;letter-spacing:-.045em}
#rsrch .rs-lead{margin:clamp(24px,calc(3vw * var(--vk)),40px) 0 0;max-width:32em;font-size:clamp(20px,1.9vw,32px);font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--s-muted,#aaa)}
#rsrch h2.rs-group{margin:clamp(96px,calc(11vw * var(--vk)),180px) 0 0;padding-top:clamp(24px,calc(2.6vw * var(--vk)),40px);border-top:1px solid var(--ink,#fff);font-size:clamp(32px,3.8vw,64px);font-weight:700;line-height:1;letter-spacing:-.04em}
#rsrch .rs-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(28px,calc(5vw * var(--vk)),96px);padding:clamp(40px,calc(5vw * var(--vk)),72px) 0;border-bottom:1px solid var(--s-line,rgba(255,255,255,.2))}
#rsrch .rs-card p,#rsrch .rs-card h3{margin:0}
#rsrch .rs-year{font-size:clamp(72px,9vw,160px);font-weight:700;line-height:.86;letter-spacing:-.06em;color:#5c5c5c;font-variant-numeric:tabular-nums}
#rsrch .rs-who{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--s-muted,#aaa)}
#rsrch .rs-find{margin-top:clamp(12px,calc(1.4vw * var(--vk)),20px)!important;font-size:clamp(26px,2.6vw,46px);font-weight:700;line-height:1.05;letter-spacing:-.03em}
#rsrch .rs-p{margin-top:clamp(14px,calc(1.6vw * var(--vk)),22px)!important;max-width:34em;font-size:clamp(18px,1.45vw,23px);font-weight:500;line-height:1.45;color:var(--ink,#fff)}
#rsrch .rs-for{margin-top:clamp(12px,calc(1.4vw * var(--vk)),18px)!important;max-width:34em;font-size:clamp(18px,1.45vw,23px);font-weight:500;line-height:1.45;color:var(--s-muted,#aaa)}
#rsrch .rs-src{display:inline-block;margin-top:clamp(16px,calc(1.8vw * var(--vk)),24px);font-size:14px;color:var(--ink,#fff);text-decoration:underline;text-underline-offset:4px}
@media(max-width:860px){#rsrch .rs-card{grid-template-columns:1fr;row-gap:16px}
#rsrch .rs-year{font-size:clamp(56px,16vw,96px)}}
.sentinel-sub main>.s-section{border-bottom:0}
:is(.sentinel-home,.sentinel-sub) .s-footer{--iw-r:var(--gut)}
@media(min-width:861px){:is(.sentinel-home,.sentinel-sub) .s-footer{--iw-r:calc(var(--gut) + 174px);margin-left:calc(-1 * max(0px,(100vw / var(--zoom,1) - 1640px) / 2));width:calc(100vw / var(--zoom,1) - var(--gut) - var(--iw-r));max-width:none;box-sizing:border-box}}
@media(min-width:861px) and (max-width:1100px){:is(.sentinel-home,.sentinel-sub) .s-footer{--iw-r:190px}}
#s-me .me-text{margin:0;max-width:24em;font-size:clamp(26px,2.9vw,50px);font-weight:700;line-height:1.16;letter-spacing:-.028em;color:var(--ink,#fff);text-wrap:pretty}
#s-me .me-contact{margin:clamp(24px,calc(2.8vw * var(--vk)),40px) 0 0;font-size:clamp(15px,1.25vw,19px);line-height:1.7;color:var(--s-muted,#aaa)}
#s-me .me-contact a{color:var(--ink,#fff);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
@media(max-width:860px){#s-me .me-text{font-size:clamp(24px,6.6vw,32px)}}
#ex h1{margin:0;font-size:clamp(48px,6.4vw,112px);font-weight:700;line-height:.96;letter-spacing:-.045em}
#ex .sm-grid p,#ex .ex-end p{margin:0}
#ex .sm-fig{height:auto;align-self:start;justify-content:center;padding:clamp(8px,calc(2vh * var(--vk)),24px) 0}
#ex .ex-week{display:grid;grid-template-columns:clamp(64px,calc(6vw * var(--vk)),96px) repeat(6,minmax(0,1fr));gap:18px clamp(6px,calc(.7vw * var(--vk)),12px);align-items:center}
#ex .ex-day{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--s-muted,#aaa)}
#ex .ex-row{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--s-muted,#aaa)}
#ex .ex-cell{position:relative;display:flex;align-items:center;justify-content:center;height:clamp(40px,calc(3.6vw * var(--vk)),52px);border:1px solid var(--s-line,rgba(255,255,255,.2));border-radius:12px;font-family:var(--mono);font-size:clamp(11px,.95vw,14px);color:var(--s-muted,#aaa);opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease,background-color .45s ease,color .45s ease,border-color .45s ease}
#ex .ex-cell small{font-size:.8em;margin-left:1px}
#ex .ex-cell.on{opacity:.5;transform:none}
#ex .ex-cell.hot.on{opacity:1;color:var(--ink,#fff);border-color:var(--ink,#fff);background:rgba(255,255,255,.08)}
#ex .ex-cell.ex-empty{opacity:.35;transform:none;border-style:dashed}
#ex .ex-cell.ex-say.on{opacity:1;background:var(--ink,#fff);border-color:var(--ink,#fff);color:#000}
#ex .ex-cell.ex-link::before{content:'';position:absolute;left:50%;bottom:100%;height:18px;border-left:2px solid var(--ink,#fff);transform:scaleY(0);transform-origin:bottom;transition:transform .45s ease}
#ex .ex-cell.ex-link.linked::before{transform:scaleY(1)}
#ex .ex-card{margin-top:28px;padding:16px 18px;border:1px solid var(--ink,#fff);border-radius:14px;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
#ex .ex-card.on{opacity:1;transform:none}
#ex .ex-card-who{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--s-muted,#aaa)}
#ex .ex-card-msg{margin-top:8px!important;font-size:clamp(17px,1.5vw,22px);font-weight:600;line-height:1.35;color:var(--ink,#fff)}
#ex .ex-end{margin-top:clamp(96px,calc(12vw * var(--vk)),200px);padding-top:clamp(28px,calc(3vw * var(--vk)),48px);border-top:1px solid var(--ink,#fff)}
#ex .ex-end-big{font-size:clamp(40px,5.4vw,96px);font-weight:700;line-height:.98;letter-spacing:-.045em}
@media(max-width:860px){#ex .sm-fig{height:auto;padding:56px 0 14px}
#ex .ex-week{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 6px}
#ex .ex-corner{display:none}
#ex .ex-row{grid-column:1/-1;margin-top:6px}
#ex .ex-cell{height:34px;border-radius:9px;font-size:11px}
#ex .ex-cell small{display:none}
#ex .ex-cell.ex-link::before{height:8px}
#ex .ex-card{margin-top:14px;padding:12px 14px}}
@media(prefers-reduced-motion:reduce){#ex .ex-cell,#ex .ex-card,#ex .ex-cell.ex-link::before{transition:none}}
#faq .qa-list{display:block;margin-top:clamp(8px,calc(1vw * var(--vk)),16px);columns:auto;column-count:auto}
#faq .qa-item{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(28px,calc(5vw * var(--vk)),96px);padding:clamp(28px,calc(3.4vw * var(--vk)),52px) 0;border-top:1px solid var(--s-line,rgba(255,255,255,.2))}
#faq h2.qa-q{margin:0;font-size:clamp(26px,2.6vw,46px);font-weight:700;line-height:1.05;letter-spacing:-.03em}
#faq .qa-a p{margin:0;max-width:34em;font-size:clamp(18px,1.45vw,23px);font-weight:500;line-height:1.5;color:var(--ink,#fff)}
#faq .qa-a a{color:var(--ink,#fff);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
@media(max-width:860px){#faq .qa-item{grid-template-columns:1fr;row-gap:14px}}


@keyframes wm-home{0%,100%{opacity:1;filter:blur(0)}12%,76%{opacity:0;filter:blur(3px)}}
@keyframes sentinel-cue{0%{top:-40%}70%,100%{top:100%}}
@keyframes twinkle{ 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes sbt-blink{50%{opacity:0}}

/* The wordmark briefly introduces its creator, then returns home. */
.nav .wm{position:relative}
.nav .wm-alternate{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:.73em;letter-spacing:-.035em;white-space:nowrap;opacity:0;pointer-events:none;color:inherit}
.nav .wm.swapping .wm-text{animation:wm-home 4.2s both}
.nav .wm.swapping .wm-alternate{animation:wm-creator 4.2s both}
@keyframes wm-home{0%,100%{opacity:1;filter:blur(0)}12%,76%{opacity:0;filter:blur(3px)}}
@keyframes wm-creator{0%,8%,100%{opacity:0;filter:blur(3px)}22%,68%{opacity:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.nav .wm.swapping .wm-text{opacity:0}.nav .wm.swapping .wm-alternate{opacity:1}}


@media (width > 1100px){:is(#s-drive,#s-all,#s-think).si-sec{container-type:inline-size}}
.si-doodle-drive{rotate:3deg}

#rsrch .rs-tag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;border:1px solid currentColor;font-size:11px;letter-spacing:.08em;white-space:nowrap;vertical-align:1px}
#rsrch .rs-ok{color:#7fd49b}#rsrch .rs-self{color:#f2c46d}
:root[data-theme="light"] #rsrch .rs-ok{color:#1d7a42}:root[data-theme="light"] #rsrch .rs-self{color:#8a5a00}
#rsrch .rs-lead a{color:var(--ink,#fff);text-decoration:underline;text-underline-offset:4px}

html .sentinel-home .hero-copy h1{max-width:none;width:fit-content}
.si-doodle-senses{rotate:-2deg}
.si-doodle-loop{rotate:2deg}
#works .hw-talk{aspect-ratio:auto;display:grid;gap:clamp(18px,calc(2.2vw * var(--vk)),30px);align-content:center}
#works .tk-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#works .tk-box,#works .tk-core{padding:14px 16px;border:1px solid var(--s-line,rgba(255,255,255,.2));border-radius:12px;font-size:clamp(15px,1.25vw,19px);font-weight:600;line-height:1.25;color:var(--s-muted,#aaa);opacity:.35;transition:opacity .35s ease,color .35s ease,border-color .35s ease,background-color .35s ease}
#works .tk-box.on{opacity:1;color:var(--ink,#fff);border-color:var(--ink,#fff)}
#works .tk-core{position:relative;text-align:center}
#works .tk-core.on{opacity:1;background:var(--ink,#fff);border-color:var(--ink,#fff);color:var(--bg,#000)}
#works .tk-core::before,#works .tk-core::after{content:'';position:absolute;left:50%;height:clamp(18px,calc(2.2vw * var(--vk)),30px);border-left:1px solid var(--s-line,rgba(255,255,255,.2))}
#works .tk-core::before{bottom:100%}
#works .tk-core::after{top:100%}
#ex .ex-kick{margin:0 0 clamp(16px,calc(2vw * var(--vk)),26px);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--s-muted,#aaa)}
#ex .ex-more{margin-top:clamp(96px,calc(12vw * var(--vk)),200px)}
#ex h2.ex-h{margin:0;font-size:clamp(48px,6.4vw,112px);font-weight:700;line-height:.96;letter-spacing:-.045em}
#ex .ex-ctx{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
#ex .ex-chip{padding:6px 11px;border:1px solid var(--s-line,rgba(255,255,255,.2));border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-muted,#aaa);opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
#ex .ex-chip.on{opacity:1;transform:none}
#ex .ex-opts{display:grid;gap:10px}
#ex .ex-opt{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--s-line,rgba(255,255,255,.2));border-radius:12px;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease,border-color .45s ease}
#ex .ex-opt.on{opacity:1;transform:none}
#ex .ex-opt-n{font-size:clamp(18px,1.6vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--ink,#fff)}
#ex .ex-opt-w{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:right;color:var(--s-muted,#aaa);opacity:0;transition:opacity .45s ease}
#ex .ex-opt.cut{opacity:.55}
#ex .ex-opt.cut .ex-opt-n{text-decoration:line-through;text-decoration-thickness:2px}
#ex .ex-opt.cut .ex-opt-w,#ex .ex-opt.ex-pick.on .ex-opt-w{opacity:1}
#ex .ex-opt.ex-pick.on{border-color:var(--ink,#fff)}
#ex .ex-end-note{max-width:26em;margin-bottom:clamp(20px,calc(2.4vw * var(--vk)),36px)!important;font-size:clamp(20px,1.9vw,32px);font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--s-muted,#aaa)}
@media(max-width:860px){#ex .ex-ctx{display:none}
#ex .ex-opts{gap:6px}
#ex .ex-opt{padding:8px 12px;border-radius:9px}
#ex .ex-opt-n{font-size:15px}
#ex .ex-opt-w{font-size:10px}}
@media(prefers-reduced-motion:reduce){#ex .ex-chip,#ex .ex-opt,#ex .ex-opt-w,#works .tk-box,#works .tk-core{transition:none}}
.s-map{flex:0 0 100%;display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:28px clamp(20px,calc(4vw * var(--vk)),64px);margin:0 0 clamp(28px,calc(4vw * var(--vk)),48px);font-size:15px}
.s-map-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.s-map-h{display:block;margin:0 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--s-muted,#999)}
.s-footer .s-map a{padding:4px 0;color:var(--ink,#fff)}
.s-footer .s-map a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:520px){.s-map{grid-template-columns:repeat(2,minmax(0,1fr))}}