/* Look 26 (captain 2026-10-02): the footer wordmark on a slow grainy wave, Nova's word that
   trades a pearl glow for pearl colour, a crafted Nova column, and Three things as an editorial
   bento with Tora's own isometric diagrams. Every infinite animation here moves transform only
   (iOS rule, AGENTS.md); colour changes are one-shot transitions. */

/* ---- footer: one grainy gradient that drifts like a slow wave, behind the wordmark ---------- */
/* round 5 (captain: the colour looked low quality): the ramps now blend in OKLab, so the middle tones stay
   clean blue instead of greying out as sRGB blending did; the grain is drawn one screen pixel per speck
   instead of a stretched tile; the dark trough is deep space blue, not black on top of the colour. */
.foot-giant{background:linear-gradient(in oklab 100deg,#0d1620 0%,#16324a 24%,#2f6390 46%,#5f93bd 54%,#21507a 70%,#0c1724 100%)}
.fw{position:absolute;left:-30%;width:160%;top:-40%;height:180%;pointer-events:none;will-change:transform;opacity:0;transition:opacity 1.8s ease}
.foot-giant.in .fw{opacity:1}
/* broad ice and steel light, rocking slowly */
.fw1{background:radial-gradient(in oklab 28% 34% at 34% 50%,rgb(126 182 226 / .6),rgb(126 182 226 / 0) 70%),radial-gradient(in oklab 24% 30% at 64% 46%,rgb(214 234 250 / .36),rgb(214 234 250 / 0) 70%);
  animation:fwA 26s cubic-bezier(.45,0,.55,1) infinite alternate}
/* a soft band of light that rolls across, the crest of the wave */
.fw2{background:linear-gradient(in oklab 172deg,rgb(214 234 250 / 0) 38%,rgb(214 234 250 / .26) 47%,rgb(238 246 252 / .36) 50%,rgb(214 234 250 / .2) 53%,rgb(214 234 250 / 0) 62%);
  mix-blend-mode:screen;animation:fwB 19s cubic-bezier(.45,0,.55,1) infinite alternate}
/* the trough: a deep space-blue shade moving the other way */
.fw3{background:radial-gradient(in oklab 30% 36% at 58% 52%,rgb(8 26 46 / .6),rgb(8 26 46 / 0) 70%);animation:fwC 31s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes fwA{0%{transform:translate3d(-10%,4%,0) rotate(-3deg)}50%{transform:translate3d(4%,-5%,0) rotate(2deg)}100%{transform:translate3d(12%,3%,0) rotate(-1deg)}}
@keyframes fwB{0%{transform:translate3d(-14%,-9%,0) skewY(-5deg)}50%{transform:translate3d(0,6%,0) skewY(4deg)}100%{transform:translate3d(14%,-4%,0) skewY(-3deg)}}
@keyframes fwC{0%{transform:translate3d(14%,-3%,0)}100%{transform:translate3d(-16%,5%,0)}}
.foot-giant .fg-grain{opacity:.1;mix-blend-mode:soft-light;background-size:64px 64px;image-rendering:pixelated}
@media(max-resolution:1.5dppx){.foot-giant .fg-grain{background-size:128px 128px}}
@media(min-resolution:2.5dppx){.foot-giant .fg-grain{background-size:42.667px 42.667px}}

/* ---- Nova's word: white with a pearl glow; on hover the glow turns white and the pearl moves
   into the letters, one pulled out as the other comes in ------------------------------------ */
.nova-copy h2 .nova-word{position:relative;display:inline-block;isolation:isolate;color:#f4f7fa;background:none;-webkit-background-clip:border-box;background-clip:border-box}
.nova-word::before,.nova-word::after,.nw-c::after{content:attr(data-w);position:absolute;inset:0;pointer-events:none}
.nova-word::before{z-index:-1;color:transparent;text-shadow:0 0 .08em rgb(198 180 255 / .55),0 0 .26em rgb(154 215 255 / .32),0 0 .55em rgb(255 198 227 / .16);
  transition:opacity .7s cubic-bezier(.4,0,.2,1) .15s,transform .9s cubic-bezier(.22,1,.36,1) .1s}
.nova-word::after{z-index:-1;color:transparent;opacity:0;transform:scale(.96);text-shadow:0 0 .1em rgb(255 255 255 / .4),0 0 .34em rgb(255 255 255 / .14);
  transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.22,1,.36,1)}
.nw-c{position:relative;display:inline-block}
/* hover (round 1 of the section polish, captain: "an outward blast ... pastel colours coming into
   it with a little Tora grain"): the pearl bursts out from the centre of the word in a quarter of a
   second, the pastel ring racing to the edges of the letters while the white glow snaps in, then
   settles; a fine grain lies over the colour inside the letters. Transitions only, no loop. */
.nw-c::after{color:transparent;opacity:0;
  background:url(brand/grain-tile.png) 0 0/64px 64px,radial-gradient(closest-side,#fff6e6 0%,#FFE8B0 14%,#FFC6E3 36%,#C6B4FF 58%,#9AD7FF 80%,#BFF0E6 100%) 50% 50%/0% 0% no-repeat;
  -webkit-background-clip:text;background-clip:text;background-blend-mode:soft-light,normal;
  transition:opacity .18s ease-out,background-size .55s cubic-bezier(.16,1,.3,1)}
.nova-word::before{transition:opacity .25s ease-out,transform .5s cubic-bezier(.16,1,.3,1)}
.nova-word::after{transition:opacity .3s ease-out,transform .5s cubic-bezier(.34,1.56,.64,1)}
.nova-copy h2:hover .nova-word::before,.nova-word.lit::before{opacity:0;transform:scale(1.18);transition-delay:0s}
.nova-copy h2:hover .nova-word::after,.nova-word.lit::after{opacity:1;transform:none;transition-delay:.04s}
.nova-copy h2:hover .nw-c::after,.nova-word.lit .nw-c::after{opacity:1;background-size:64px 64px,118% 340%;transition-delay:0s}
/* the kicker above the heading: just the Nova mark, a little larger */
.nova-kicker b{display:none}
.nova-kicker .nv-mark{width:2.25rem!important;height:1.57rem!important}

/* ---- the Nova column: a lead, the questions as a transcript on a pearl track, three facts --- */
.nova-lead{margin:0 0 var(--space-8)!important;color:var(--ink)!important;font-size:var(--text-lg)!important;line-height:1.5!important;max-width:44ch}
.nvx{position:relative;margin:0!important;padding:0 0 0 1.5rem!important;gap:0!important;max-width:36rem!important}
.nvx::before{content:"";position:absolute;left:.3125rem;top:.5rem;bottom:.5rem;width:1px;background:linear-gradient(rgb(238 243 246 / .14),rgb(238 243 246 / .06))}
.nvx .nv-case{display:block!important;padding:.875rem 0 1rem!important;border-radius:0!important;background:none!important;box-shadow:none!important;text-align:left}
.nvx .nv-case::before{content:"";position:absolute;left:-1.5rem;top:1.1rem;width:.6875rem;height:.6875rem;margin-left:-.03rem;border-radius:50%;
  background:#0e1114;box-shadow:inset 0 0 0 1px rgb(238 243 246 / .22);transition:box-shadow .4s ease,background .4s ease}
.nvx .nv-case[aria-pressed="true"]::before{background:radial-gradient(circle,#fff 0 22%,transparent 26%),linear-gradient(135deg,#9AD7FF,#C6B4FF,#FFC6E3);box-shadow:0 0 0 4px rgb(198 180 255 / .12),0 0 14px rgb(198 180 255 / .45)}
.nvx-k{display:flex;align-items:center;gap:.5rem;font:500 .6875rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:rgb(238 243 246 / .42);transition:color .4s ease}
.nvx-k i{width:1rem;height:1px;background:currentColor;opacity:.6}
.nvx-q{display:block;margin-top:.5rem;font:400 clamp(1rem,1.35vw,1.1875rem)/1.4 var(--sans);color:rgb(238 243 246 / .42);transition:color .4s ease;max-width:32ch}
.nvx-d{display:block;max-height:0;opacity:0;overflow:hidden;font-size:var(--text-sm);line-height:1.5;color:var(--body);transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .4s ease,margin .4s ease}
.nvx .nv-case[aria-pressed="true"] .nvx-k{color:#c9d8e3}
.nvx .nv-case[aria-pressed="true"] .nvx-q{color:var(--ink)}
.nvx .nv-case[aria-pressed="true"] .nvx-d{max-height:3.5rem;opacity:1;margin-top:.375rem}
.nvx .nv-case:hover .nvx-q{color:rgb(238 243 246 / .78)}
.nvx .nv-bar{left:0!important;right:auto!important;width:min(100%,24rem);bottom:0!important;height:1px!important}
.nvx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:var(--space-10) 0 0;max-width:40rem;border-top:1px solid var(--hairline)}
.nvx-facts>div{padding:var(--space-5) var(--space-5) 0 0}
.nvx-facts>div+div{padding-left:var(--space-5);border-left:1px solid var(--hairline)}
.nvx-facts dt{font:500 var(--text-sm)/1.3 var(--sans);color:var(--ink);margin:0 0 .375rem}
.nvx-facts dd{margin:0;font-size:.75rem;line-height:1.55;color:var(--body)}
.nova-foot{margin-top:var(--space-8)!important}
@media(max-width:820px){
  .nova-kicker{order:0}
  .nova-copy h2{order:1}
  .nova-lead{order:2;font-size:var(--text-body)!important;margin-bottom:0!important}
  .nvx{order:4}
  .nvx-facts{order:5;grid-template-columns:1fr;margin-top:0}
  .nvx-facts>div,.nvx-facts>div+div{padding:var(--space-4) 0;border-left:0;border-bottom:1px solid var(--hairline)}
  .nvx-q{max-width:none}
}

/* ---- Three things, Huly-style (look 27, captain: "make one look more like huly"): a big heading,
   near-black tiles, each lit by one vivid beam from its top edge over a fine halftone, a real
   piece of the app standing in that light with dimmer app screens behind it for depth, and for
   Nova a glowing pearl orb. Only the orb's dotted ring moves (a slow turn, transform only). ---- */
.w3h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;margin:var(--space-20) 0 var(--space-8);scroll-margin-top:6rem}
.w3h-head{grid-column:1 / -1;margin:0 0 var(--space-6)}
.w3h-title{margin:0 0 var(--space-4);font:500 clamp(2.5rem,6.2vw,5.5rem)/.98 var(--display);letter-spacing:-.035em;color:var(--ink);max-width:14ch}
.w3h-head p{margin:0;max-width:40ch;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.5;color:var(--body)}
.w3h-tile{position:relative;isolation:isolate;overflow:hidden;border-radius:1.25rem;background:#08090b;min-height:34rem;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:inset 0 0 0 1px rgb(238 243 246 / .06);--beam:154 215 255;--beam2:238 243 246}
.w3h-a{grid-column:1 / 6}.w3h-b{grid-column:6 / 13}.w3h-c{grid-column:1 / -1;min-height:36rem}
.w3h-a{--beam:120 190 255;--beam2:236 246 255}
.w3h-b{--beam:198 180 255;--beam2:255 214 236;--pearl:linear-gradient(90deg,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6,#9AD7FF) 0 0/200% 100%}
.w3h-c{--beam:84 146 214;--beam2:224 238 250}
/* the beam: a bright core at the top edge falling into a wide cone, with a halftone where it lands */
.w3h-light{position:absolute;inset:0;z-index:-1;pointer-events:none}
.w3h-light::before{content:"";position:absolute;inset:0;
  background:radial-gradient(6% 34% at 50% 0,rgb(var(--beam2)),transparent 75%),radial-gradient(16% 48% at 50% 0,rgb(var(--beam) / .95),transparent 72%),radial-gradient(38% 62% at 50% 0,rgb(var(--beam) / .5),transparent 74%),radial-gradient(80% 75% at 50% 6%,rgb(var(--beam) / .16),transparent 76%)}
.w3h-light::after{content:"";position:absolute;inset:0;background:radial-gradient(rgb(238 243 246 / .5) .9px,transparent 1.3px) 0 0/7px 7px;opacity:.55;mix-blend-mode:overlay;
  -webkit-mask:radial-gradient(30rem 24rem at 50% 0,#000,transparent 75%);mask:radial-gradient(30rem 24rem at 50% 0,#000,transparent 75%)}
.w3h-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
/* the app, standing in the light: a sharp card, its top edge catching the beam, fading into the caption */
.w3h-card{position:absolute;left:50%;top:15%;width:min(72%,26rem);margin:0;translate:-50% 0;border-radius:1.25rem;overflow:hidden;
  box-shadow:0 0 0 1px rgb(238 243 246 / .16),0 -1.25rem 3.5rem -1rem rgb(var(--beam) / .65),0 2rem 4rem rgb(0 0 0 / .65);
  -webkit-mask:linear-gradient(#000 55%,transparent 92%);mask:linear-gradient(#000 55%,transparent 92%)}
.w3h-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgb(255 255 255 / .2),transparent 16%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .55)}
.w3h-card img{display:block;width:100%;height:auto}
.w3h-ghost{position:absolute;width:min(60%,22rem);height:auto;border-radius:1rem;opacity:.22;filter:saturate(.6);
  -webkit-mask:linear-gradient(#000 40%,transparent 85%);mask:linear-gradient(#000 40%,transparent 85%)}
.w3h-a .w3h-ghost{left:-14%;top:30%;rotate:-4deg}
.w3h-c .w3h-card{top:12%;left:52%;width:min(40%,28rem)}
.w3h-c .w3h-gl{left:6%;top:20%;width:min(30%,22rem)}
.w3h-chip{position:absolute;right:6%;top:30%;width:min(26%,17rem);padding:1rem 1.125rem;border-radius:1rem;background:rgb(14 18 22 / .82);
  box-shadow:0 0 0 1px rgb(191 214 230 / .22),0 0 2.5rem rgb(93 129 153 / .35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.w3h-chip b{display:block;font:500 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#bfd6e6;margin-bottom:.5rem}
.w3h-chip span{font-size:.9375rem;line-height:1.4;color:var(--ink)}
/* Nova: a pearl orb, a dotted iridescent ring with a soft glow, the mark at its core */
.w3h-orb{position:absolute;left:30%;top:42%;width:min(70%,30rem);aspect-ratio:1;translate:-50% -50%}
.w3h-glow,.w3h-ring{position:absolute;inset:0;border-radius:50%}
.w3h-glow{background:conic-gradient(from 210deg,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6,#9AD7FF);filter:blur(42px);opacity:.42;
  -webkit-mask:radial-gradient(circle,transparent 26%,#000 40%,#000 58%,transparent 72%);mask:radial-gradient(circle,transparent 26%,#000 40%,#000 58%,transparent 72%)}
.w3h-ring{background:conic-gradient(from 210deg,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6,#9AD7FF);animation:w3hTurn 60s linear infinite;
  -webkit-mask:radial-gradient(rgb(0 0 0) 1.1px,transparent 1.6px) 0 0/6px 6px,radial-gradient(circle,transparent 25%,#000 33%,#000 52%,transparent 68%);-webkit-mask-composite:source-in;
  mask:radial-gradient(rgb(0 0 0) 1.1px,transparent 1.6px) 0 0/6px 6px intersect,radial-gradient(circle,transparent 25%,#000 33%,#000 52%,transparent 68%)}
@keyframes w3hTurn{to{transform:rotate(1turn)}}
.w3h-core{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#15181d,#020203 70%);
  box-shadow:0 0 0 1px rgb(255 255 255 / .1),0 0 0 3px rgb(198 180 255 / .18),0 0 3rem rgb(198 180 255 / .45),inset 0 1px 0 rgb(255 255 255 / .2)}
.w3h-core .nv-mark{width:46%;height:32%}
.w3h-island{position:absolute;right:6%;top:24%;width:min(44%,22rem);padding:1.25rem 1.25rem 1rem;border-radius:1.75rem;background:#000;
  box-shadow:0 0 0 1px rgb(255 255 255 / .08),0 0 3rem rgb(198 180 255 / .28),0 2rem 4rem rgb(0 0 0 / .6)}
.w3h-island::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6);opacity:.55;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.w3h-q{margin:0 0 .5rem;font-size:.8125rem;color:rgb(241 243 246 / .6)}
.w3h-a{margin:0 0 1rem;font-size:1.0625rem;line-height:1.4;color:#f1f3f6}
.w3h-wave{display:block;height:2px;border-radius:2px;margin:0 0 .875rem;background:linear-gradient(90deg,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6)}
.w3h-badge{display:flex;align-items:center;gap:.5rem}
.w3h-badge .nv-mark{width:1.125rem;height:.8rem}
.w3h-badge b{font:500 .8125rem/1 'Orbitron',sans-serif}
.w3h-badge em{margin-left:auto;font:600 .75rem/1 var(--sans);font-style:normal;color:#f1f3f6}
/* Huly-size captions: the title in white, the rest in grey */
.w3h-cap{position:relative;z-index:1;margin:0;padding:var(--space-8);max-width:40rem;font-size:clamp(1rem,1.3vw,1.1875rem);line-height:1.5;color:rgb(238 243 246 / .58);
}
.w3h-tile::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(transparent 52%,rgb(8 9 11 / .94) 86%)}
.w3h-cap b{font-weight:600;color:var(--ink)}
@media(max-width:1100px){.w3h-a,.w3h-b{grid-column:1 / -1}.w3h-orb{left:32%}}
@media(max-width:820px){
  .w3h{grid-template-columns:1fr;gap:.75rem;margin-top:var(--space-12)}
  .w3h-head,.w3h-a,.w3h-b,.w3h-c{grid-column:1 / -1}
  /* on phones the picture gets its own space above the caption, so nothing covers the words */
  .w3h-tile,.w3h-c{min-height:0;justify-content:flex-start}
  .w3h-stage{position:relative;inset:auto;height:22rem;overflow:hidden}
  .w3h-b .w3h-stage{height:27rem}
  .w3h-c .w3h-stage{height:25rem}
  .w3h-card{width:80%;top:12%;-webkit-mask:linear-gradient(#000 50%,transparent 96%);mask:linear-gradient(#000 50%,transparent 96%)}
  .w3h-orb{left:50%;top:38%;width:88%}
  .w3h-island{left:7%;right:7%;top:auto;bottom:1rem;width:auto}
  .w3h-c .w3h-card{left:50%;width:80%;top:10%}
  .w3h-c .w3h-gl{display:none}
  .w3h-chip{right:auto;left:7%;top:auto;bottom:1rem;width:86%}
  .w3h-cap{padding:var(--space-2) var(--space-6) var(--space-6);background:none}
}

/* ---- Three things, polish round 1 (intent: each promise should read as a real, working part of
   the app, lit like a product on a stage). The beam now hits the card: its top half catches the
   light like Huly's frosted cards, so the product is the brightest thing in the tile; screens
   behind on both sides give depth; the orb is saturated, with motion-blurred rings; the pointer
   lifts the card into the light. All transitions; the orb's turn is the only loop. ---- */
.w3h-light::before{background:
  radial-gradient(5% 30% at 50% 0,rgb(var(--beam2)),transparent 78%),
  radial-gradient(13% 46% at 50% 0,rgb(var(--beam) / 1),transparent 74%),
  radial-gradient(30% 64% at 50% 0,rgb(var(--beam) / .55),transparent 76%),
  radial-gradient(85% 80% at 50% 4%,rgb(var(--beam) / .18),transparent 78%);transition:opacity .8s ease,transform 1.2s cubic-bezier(.22,1,.36,1);transform-origin:50% 0}
.w3h-light::after{opacity:.7;-webkit-mask:radial-gradient(22rem 22rem at 50% 0,#000,transparent 72%);mask:radial-gradient(22rem 22rem at 50% 0,#000,transparent 72%)}
.w3h-card{transition:translate .9s cubic-bezier(.22,1,.36,1),box-shadow .9s ease;
  box-shadow:0 0 0 1px rgb(238 243 246 / .22),0 -1.5rem 4rem -1rem rgb(var(--beam) / .75),0 2.5rem 5rem rgb(0 0 0 / .7)}
/* the light landing on the card: a bright frosted top, the rim catching the beam */
.w3h-card::after{background:linear-gradient(180deg,rgb(var(--beam2) / .34),rgb(var(--beam) / .12) 18%,transparent 42%),radial-gradient(60% 30% at 50% 0,rgb(255 255 255 / .28),transparent 70%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .85),inset 0 0 0 1px rgb(255 255 255 / .06)}
.w3h-tile:hover .w3h-card{translate:-50% -.5rem;box-shadow:0 0 0 1px rgb(238 243 246 / .3),0 -2rem 5rem -1rem rgb(var(--beam) / .95),0 3rem 6rem rgb(0 0 0 / .75)}
.w3h-tile:hover .w3h-light::before{transform:scaleY(1.08)}
/* depth: dim screens either side, a little soft, set back */
.w3h-ghost{opacity:.3;filter:saturate(.5) blur(.6px);transition:opacity .9s ease}
.w3h-a .w3h-gl{left:-16%;top:34%;width:52%;rotate:-3deg}
.w3h-a .w3h-gr{left:auto;right:-20%;top:28%;width:52%;rotate:3deg}
.w3h-tile:hover .w3h-ghost{opacity:.38}
/* the orb: a saturated pearl, rings smeared into light like a long exposure */
.w3h-glow{opacity:.6;filter:blur(48px);background:conic-gradient(from 210deg,#6fc4ff,#a98cff,#ff9fd0,#ffd98a,#8fe8d6,#6fc4ff)}
.w3h-streak{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgb(255 255 255 / .0) 0deg,rgb(255 255 255 / .22) .6deg,rgb(255 255 255 / 0) 1.4deg),conic-gradient(from 210deg,#7dcaff,#b39bff,#ffb0d8,#ffe0a0,#9ff0dd,#7dcaff);
  opacity:.5;filter:blur(1.2px);animation:w3hTurn 90s linear infinite reverse;
  -webkit-mask:radial-gradient(circle,transparent 24%,#000 31%,rgb(0 0 0 / .6) 50%,transparent 66%);mask:radial-gradient(circle,transparent 24%,#000 31%,rgb(0 0 0 / .6) 50%,transparent 66%)}
.w3h-ring{background:conic-gradient(from 210deg,#8fd0ff,#bba6ff,#ffbade,#ffe6a8,#aff3e2,#8fd0ff)}
.w3h-core{box-shadow:0 0 0 1px rgb(255 255 255 / .14),0 0 0 4px rgb(198 180 255 / .22),0 0 4rem rgb(198 180 255 / .6),0 0 1.5rem rgb(154 215 255 / .5),inset 0 1px 0 rgb(255 255 255 / .25)}
.w3h-island{transition:translate .9s cubic-bezier(.22,1,.36,1)}
.w3h-b:hover .w3h-island{translate:0 -.5rem}
/* the chip in 03: lit by the same blue as its beam */
.w3h-chip{box-shadow:0 0 0 1px rgb(191 214 230 / .3),0 0 3rem rgb(84 146 214 / .45),inset 0 1px 0 rgb(255 255 255 / .2)}
@media(max-width:820px){.w3h-a .w3h-gl{left:-30%;top:40%}.w3h-a .w3h-gr{right:-34%;top:36%}.w3h-tile:hover .w3h-card{translate:-50% 0}}
.w3h-a .w3h-card::after{background:linear-gradient(180deg,rgb(var(--beam2) / .44),rgb(var(--beam) / .16) 20%,transparent 46%),radial-gradient(60% 30% at 50% 0,rgb(255 255 255 / .32),transparent 70%)}
/* 03: the faint columns of a week behind the session, the way a plan sits under the day */
.w3h-week{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);opacity:.5;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 14%,#000 60%,transparent 88%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) intersect,linear-gradient(transparent,#000 14%,#000 60%,transparent 88%)}
.w3h-week span{border-left:1px solid rgb(238 243 246 / .07);padding:5.5rem 0 0 .875rem;font:500 .6875rem/1 var(--sans);letter-spacing:.12em;color:rgb(238 243 246 / .3)}
@media(max-width:820px){.w3h-week{display:none}}

/* ---- What sets Tora apart, polish round 2 (intent: logging food should feel like typing one
   sentence on a good keyboard; the card is that moment). Huly's staging: a real, dark keyboard
   lies under the product, the beam pools light on the keys beneath it and catches the panel's
   top edge; the keys of the word being typed glow faintly. The panel is the app's own composer,
   captured from the app with the sentence typed. ---- */
.w3h-a{--beam:120 190 255;--beam2:236 246 255}
/* round 3: a neat, real keyboard. Every row is 15 key units wide, so the edges line up and the
   rows stagger like a real board (tab 1.5, caps 1.75, shift 2.25); keys sit on one grid with
   even gaps, legends centred like Huly's, the board lying flat under the panel. */
.w3h-kb{position:absolute;left:50%;top:40%;width:118%;translate:-50% 0;display:grid;grid-template-columns:minmax(0,1fr);gap:.375rem;padding:.5rem;border-radius:1rem;
  background:linear-gradient(180deg,#0b0d10,#08090b);box-shadow:inset 0 1px 0 rgb(255 255 255 / .04),0 0 0 1px rgb(0 0 0 / .6);
  -webkit-mask:radial-gradient(60% 120% at 50% 0,#000 42%,transparent 86%);mask:radial-gradient(60% 120% at 50% 0,#000 42%,transparent 86%)}
.kr{display:flex;gap:.375rem;min-width:0;aspect-ratio:15 / 1.04}
.kk{flex:var(--u) 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;border-radius:.4375rem;
  font:500 .6875rem/1 var(--sans);font-style:normal;color:rgb(238 243 246 / .3);
  background:linear-gradient(180deg,#17191d,#101215);box-shadow:inset 0 1px 0 rgb(255 255 255 / .07),inset 0 -1px 0 rgb(0 0 0 / .6),0 1px 2px rgb(0 0 0 / .6)}
.kk b{font-weight:500;line-height:1}
.kk.mod{font-size:.5625rem;letter-spacing:.04em;text-transform:lowercase;align-items:flex-start;justify-content:flex-end;padding:0 0 .4rem .5rem}
.kk.on{color:#eaf4fb;background:linear-gradient(180deg,#1d2a37,#131b24);box-shadow:inset 0 1px 0 rgb(191 214 230 / .4),inset 0 0 0 1px rgb(143 179 203 / .32),0 0 1.25rem rgb(120 190 255 / .45)}
/* the beam pooling on the keys under the panel */
.w3h-a .w3h-stage::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(40% 26% at 50% 52%,rgb(120 190 255 / .24),transparent 72%)}
/* the composer, floating over the keys like Huly's palette: the app's own field with the sentence
   typed, its rim catching the beam */
.w3h-log{position:absolute;left:50%;top:30%;width:min(86%,30rem);margin:0;translate:-50% 0;border-radius:1.6rem;overflow:hidden;z-index:2;
  box-shadow:0 0 0 1px rgb(238 243 246 / .16),0 -1.5rem 3.5rem -1rem rgb(120 190 255 / .85),0 1.75rem 3rem rgb(0 0 0 / .8);transition:translate .9s cubic-bezier(.22,1,.36,1)}
.w3h-log img{display:block;width:100%;height:auto}
.w3h-log::after{content:"";position:absolute;left:10%;right:10%;top:0;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,rgb(236 246 255),transparent);box-shadow:0 0 .875rem rgb(120 190 255)}
.w3h-tile:hover .w3h-log{translate:-50% -.375rem}

/* round 3: the light comes in as a soft angled ray, not a straight beam, and the meal appears
   under the composer as the result of the sentence: an isometric bowl on a Tora plate. */
.w3h-a{min-height:40rem}
.w3h-a .w3h-light::before{background:none}
.w3h-a .w3h-light::after{-webkit-mask:radial-gradient(22rem 16rem at 62% 4%,#000,transparent 72%);mask:radial-gradient(22rem 16rem at 62% 4%,#000,transparent 72%)}
.w3h-ray{position:absolute;left:47%;top:-4%;width:30%;height:19%;transform:skewX(-26deg);pointer-events:none;
  background:linear-gradient(180deg,rgb(236 246 255 / .95),rgb(140 200 255 / .8) 45%,rgb(84 146 214 / .45) 100%);
  -webkit-mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);filter:blur(12px)}
.w3h-ray::after{content:"";position:absolute;left:60%;top:0;width:10%;height:100%;background:linear-gradient(180deg,#fff,rgb(236 246 255 / .7));filter:blur(4px)}
.w3h-ray::before{content:"";position:absolute;inset:-60% -40% -30%;background:radial-gradient(50% 50% at 50% 60%,rgb(120 190 255 / .35),transparent 70%);filter:blur(20px)}
/* round 4: the bowl is gone; the composer becomes a taller, nearly square pane of glass. The
   sentence sits at the top, and under it, inside the same glass, the entry the app logged (a real
   capture of the Food diary). The ray passes through the pane, so its light shows behind both. */
.w3h-a{min-height:37rem}
.w3h-glass{position:absolute;left:50%;top:12%;width:min(84%,28rem);margin:0;translate:-50% 0;z-index:2;display:grid;gap:.75rem;padding:.875rem;border-radius:1.75rem;
  background:linear-gradient(180deg,rgb(140 200 255 / .14),rgb(18 22 28 / .5) 30%,rgb(12 15 19 / .62));backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 0 0 1px rgb(238 243 246 / .14),inset 0 1px 0 rgb(255 255 255 / .35),0 -1.5rem 3.5rem -1.25rem rgb(120 190 255 / .8),0 2rem 3.5rem rgb(0 0 0 / .7);transition:translate .9s cubic-bezier(.22,1,.36,1)}
.w3h-glass::before{content:"";position:absolute;left:12%;right:30%;top:0;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,rgb(236 246 255),transparent);box-shadow:0 0 1rem rgb(120 190 255)}
.w3h-glass img{display:block;width:100%;height:auto;border-radius:1.25rem}
.w3h-glass-label{padding:.25rem .5rem 0;font:500 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgb(238 243 246 / .45)}
.w3h-tile:hover .w3h-glass{translate:-50% -.375rem}
.w3h-a .w3h-kb{top:41%;width:126%}
@media(max-width:820px){.w3h-a .w3h-stage{height:28rem}.w3h-glass{top:8%;width:90%;padding:.625rem;gap:.5rem;border-radius:1.375rem}.w3h-a .w3h-kb{top:44%;width:150%}.kr,.w3h-kb{gap:.25rem}.kk{font-size:.5rem;border-radius:.3125rem}.kk.mod{font-size:.4375rem;padding:0 0 .25rem .3rem}}

/* ---- Ask Nova, polish round 1 (intent: Nova is something you talk to, and every answer comes
   from your own training). After Huly MetaBrain: the heading over a mosaic of dark tiles, each a
   real exchange (your sentence, Nova's answer from the app's copy), interlocking around the phone,
   which stays as the tallest tile. Pearl light streaks rise behind the mosaic; the tile being
   played on the phone lights up in pearl. Tapping a tile still plays it on the phone. ---- */
.nova-b{padding:var(--space-20) 0;--pearl:linear-gradient(90deg,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6,#9AD7FF) 0 0/200% 100%}
.nvb-head{max-width:50rem;margin:0 0 var(--space-10)}
.nvb-head h2{max-width:none!important}
.nvb-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1rem;align-items:stretch}
.nvb-streaks{position:absolute;left:-4%;top:-10%;width:22%;height:70%;z-index:0;pointer-events:none;opacity:.7;
  background:repeating-linear-gradient(90deg,transparent 0 22px,rgb(154 215 255 / .35) 22px 23px,transparent 23px 41px,rgb(198 180 255 / .28) 41px 42px,transparent 42px 64px);
  -webkit-mask:linear-gradient(transparent,#000 30%,#000 60%,transparent),linear-gradient(90deg,transparent,#000 40%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(transparent,#000 30%,#000 60%,transparent) intersect,linear-gradient(90deg,transparent,#000 40%,transparent);filter:blur(.5px)}
.nvb-tiles{position:relative;z-index:1;list-style:none;margin:0!important;padding:0;max-width:none!important;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(15rem,auto);gap:1rem}
.nvb-li{margin:0;min-width:0}
.nvb-1,.nvb-2{grid-column:span 3}.nvb-3,.nvb-4,.nvb-5{grid-column:span 2}
.nova-b .nvb-t{position:relative;isolation:isolate;overflow:hidden;display:flex!important;flex-direction:column;justify-content:space-between;gap:var(--space-5);width:100%;height:100%;
  padding:var(--space-5)!important;border-radius:1.25rem!important;text-align:left;cursor:pointer;background:#08090b!important;
  box-shadow:inset 0 0 0 1px rgb(238 243 246 / .07)!important;transition:box-shadow .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.nova-b .nvb-t::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;transition:opacity .6s ease;
  background:radial-gradient(60% 50% at 70% 0,rgb(154 215 255 / .2),transparent 70%),radial-gradient(50% 45% at 30% 0,rgb(198 180 255 / .18),transparent 70%)}
.nova-b .nvb-t::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(rgb(238 243 246 / .07) 1px,transparent 1.3px) 0 0/14px 14px;
  -webkit-mask:linear-gradient(#000,transparent 70%);mask:linear-gradient(#000,transparent 70%)}
.nova-b .nvb-t:hover{transform:translateY(-2px)}
.nova-b .nvb-t[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgb(198 180 255 / .45),0 0 2.5rem rgb(198 180 255 / .18)!important}
.nova-b .nvb-t[aria-pressed="true"]::before{opacity:1}
.nvb-cap{font-size:var(--text-body);line-height:1.5;color:rgb(238 243 246 / .55)}
.nvb-cap b{font-weight:600;color:var(--ink)}
.nvb-chat{display:flex;flex-direction:column;gap:.5rem}
.nvb-q{align-self:flex-end;max-width:88%;padding:.5rem .75rem;border-radius:1rem 1rem .25rem 1rem;font-size:.8125rem;line-height:1.35;color:#0e1114;background:linear-gradient(180deg,#eef3f6,#cfdbe4)}
.nvb-a{align-self:flex-start;max-width:94%;display:flex;gap:.5rem;align-items:flex-start;padding:.625rem .75rem;border-radius:1rem 1rem 1rem .25rem;font-size:.8125rem;line-height:1.4;color:#eef3f6;
  background:#000;box-shadow:inset 0 0 0 1px rgb(198 180 255 / .2)}
.nvb-a .nv-mark{flex:none;width:.95rem!important;height:.66rem!important;margin-top:.2rem}
.nova-b .nvb-t .nv-bar{left:var(--space-5)!important;right:var(--space-5)!important;bottom:.5rem!important;width:auto!important;height:2px!important}
/* the phone, standing in its own tall tile; the pearl spotlight stays as built */
.nvb-phone{position:relative;z-index:1;border-radius:1.25rem;overflow:hidden;background:#08090b;box-shadow:inset 0 0 0 1px rgb(238 243 246 / .07)}
.nvb-phone .nv-stage{min-height:100%;height:100%;padding-top:var(--space-8)}
.nvb-phone .nv-phone{--w:min(22rem,86%)}
.nvb-foot{display:grid;grid-template-columns:1fr;align-items:end;gap:var(--space-8);margin-top:var(--space-8)}
.nvb-foot .nvx-facts{margin:0;max-width:none}
@media(max-width:1100px){.nvb-grid{grid-template-columns:1fr}.nvb-phone{height:34rem}}
@media(max-width:820px){
  .nova-b .nova-copy{display:block}
  .nvb-tiles{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:.625rem}
  .nvb-1,.nvb-2,.nvb-3,.nvb-4{grid-column:span 1}.nvb-5{grid-column:span 2}
  .nova-b .nvb-t{padding:var(--space-4)!important;gap:var(--space-3)}
  .nvb-chat{display:none}
  .nvb-li:first-child .nvb-chat{display:flex}
  .nvb-1{grid-column:span 2}.nvb-4,.nvb-5{grid-column:span 1}
  .nvb-grid{display:flex;flex-direction:column}
  .nvb-phone{order:-1}
  .nvb-phone{height:32rem}
  .nvb-foot{grid-template-columns:1fr}
}

/* ---- food card round 5: the field and the logged entry are raised glass layers resting on the
   main pane, drawn in the page so the type stays crisp; the entry shows calories first, then the
   three macros on one aligned row with a thin bar each; the keys are squarer. ---- */
.w3h-glass{gap:.875rem;padding:1rem}
.gl-field,.gl-entry{position:relative;border-radius:1.125rem;background:linear-gradient(180deg,rgb(255 255 255 / .1),rgb(255 255 255 / .035));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),inset 0 0 0 1px rgb(255 255 255 / .07),0 .75rem 1.5rem -.5rem rgb(0 0 0 / .55),0 1px 0 rgb(0 0 0 / .4)}
.gl-field{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem .75rem .875rem 1.125rem;font:400 clamp(.9375rem,1.25vw,1.125rem)/1.3 var(--sans);color:#f1f4f7}
.gl-send{flex:none;width:2.375rem;height:2.375rem;border-radius:50%;display:grid;place-items:center;color:#0e1114;background:linear-gradient(180deg,#f4f8fb,#c9d6e0);box-shadow:inset 0 1px 0 #fff,0 .25rem .75rem rgb(0 0 0 / .4)}
.gl-send svg{width:1rem;height:1rem}
.gl-entry{padding:1rem 1.125rem 1.125rem}
.gl-top{display:flex;align-items:center;gap:.875rem}
.gl-top img{width:3rem;height:3rem;flex:none;border-radius:.875rem;background:rgb(255 255 255 / .06);padding:.25rem;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06)}
.gl-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}
.gl-name b{font:600 1.0625rem/1.2 var(--sans);color:#f4f7fa}
.gl-name span{font-size:.8125rem;color:rgb(238 243 246 / .5)}
.gl-top time{align-self:flex-start;font:500 .75rem/1 var(--sans);color:rgb(238 243 246 / .42);padding-top:.25rem}
.gl-macros{display:grid;grid-template-columns:1.25fr repeat(3,1fr);align-items:end;gap:.75rem;margin-top:1rem;padding-top:.875rem;border-top:1px solid rgb(255 255 255 / .08)}
.gl-kcal b,.gl-m b{display:block;font:600 1.375rem/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:#f4f7fa}
.gl-kcal b{font-size:1.75rem}
.gl-m b small{font-size:.75rem;font-weight:500;margin-left:.125rem;color:rgb(238 243 246 / .5)}
.gl-kcal span,.gl-m span{display:block;margin-top:.375rem;font:500 .6875rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:rgb(238 243 246 / .45)}
.gl-m i{display:block;height:3px;margin-top:.5rem;border-radius:2px;background:rgb(255 255 255 / .08);position:relative;overflow:hidden}
.gl-m i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--v));border-radius:inherit}
.gl-m.p b{color:#f2a89a}.gl-m.p i::after{background:#e8826f}
.gl-m.c b{color:#9cc6ef}.gl-m.c i::after{background:#6fa8e0}
.gl-m.f b{color:#f2d08c}.gl-m.f i::after{background:#e3b85e}
/* squarer keys: a slightly taller row ratio and a little more gap */
.kr{aspect-ratio:15 / 1.2}
.w3h-a .w3h-kb{top:47%;width:118%}
@media(max-width:820px){.w3h-a .w3h-stage{height:31rem}.w3h-glass{padding:.625rem;gap:.5rem}.gl-field{padding:.625rem .5rem .625rem .875rem}.gl-send{width:2rem;height:2rem}
  .gl-entry{padding:.75rem .875rem .875rem}.gl-macros{gap:.5rem}.gl-kcal b{font-size:1.375rem}.gl-m b{font-size:1.0625rem}.gl-kcal span,.gl-m span{font-size:.5625rem}.w3h-a .w3h-kb{top:52%;width:160%}}

/* ---- round 6 (captain 2026-10-03): one house font in the card; sentence-case macro labels; the
   raised field frosts what is under it; truly square key caps; the footer in Chrome Steel ---- */
.w3h-glass-label{font:500 .8125rem/1 var(--sans);letter-spacing:0;text-transform:none;color:rgb(238 243 246 / .55)}
.gl-top time{font:500 .8125rem/1 var(--sans);color:rgb(238 243 246 / .45)}
.gl-kcal span,.gl-m span{font:500 .8125rem/1 var(--sans);letter-spacing:0;text-transform:none;color:rgb(238 243 246 / .55)}
.gl-field{background:linear-gradient(180deg,rgb(255 255 255 / .16),rgb(255 255 255 / .07));backdrop-filter:blur(22px) saturate(1.3) brightness(1.08);-webkit-backdrop-filter:blur(22px) saturate(1.3) brightness(1.08)}
.gl-field::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:url(brand/grain-tile.png) 0 0/64px 64px;opacity:.06;mix-blend-mode:overlay}
/* the pane itself frosts less, so the field reads as a second, thicker sheet of glass */
.w3h-glass{backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1)}
/* square key caps: each key's height follows its own width (1 unit = 1 square), rows no longer
   force a height */
.kr{aspect-ratio:auto;align-items:flex-start}
.kk{aspect-ratio:var(--u) / 1}
/* the footer in Chrome Steel: polished-bar bands (dark, steel, ice highlight, steel, dark) in the
   site's own ramp, still blended in OKLab and still under the slow wave and the fine grain */
.foot-giant{background:linear-gradient(in oklab 100deg,#0e1114 0%,#1b2833 14%,#5d8199 28%,#dfe9f0 37%,#8fb3cb 42%,#2b3f50 52%,#a9c3d4 64%,#eef3f6 69%,#4a6679 78%,#1b2833 90%,#0e1114 100%)}
.fw1{background:radial-gradient(in oklab 28% 34% at 34% 50%,rgb(238 243 246 / .3),rgb(238 243 246 / 0) 70%),radial-gradient(in oklab 24% 30% at 64% 46%,rgb(143 179 203 / .3),rgb(143 179 203 / 0) 70%)}
.fw3{background:radial-gradient(in oklab 30% 36% at 58% 52%,rgb(14 17 20 / .45),rgb(14 17 20 / 0) 70%)}

/* ---- What sets Tora apart, card 2 (Nova), to the yogurt card's standard (intent: you ask in
   a sentence; Nova answers from your training and shows why). After Huly's microphone: a dark disc
   with a thin pearl ring, lit from inside by a pearl swell below it, three listening rings; then
   the same glass pane with raised layers: your question, and Nova's answer with the two facts it
   used. The rings breathe slowly (transform and opacity only). ---- */
.w3h-b .w3h-stage{overflow:hidden}
.nb-mic{position:absolute;left:50%;top:6%;width:min(46%,16rem);aspect-ratio:1;translate:-50% 0}
.nb-swell{position:absolute;left:-30%;right:-30%;top:40%;height:70%;border-radius:50%;
  background:radial-gradient(closest-side,rgb(198 180 255 / .55),rgb(154 215 255 / .28) 45%,rgb(255 198 227 / .1) 70%,transparent);filter:blur(18px)}
.nb-ring{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(198 180 255 / .22);animation:nbBreathe 4.8s cubic-bezier(.45,0,.55,1) infinite}
.nb-ring.r2{inset:-18%;box-shadow:inset 0 0 0 1px rgb(154 215 255 / .14);animation-delay:.6s}
.nb-ring.r3{inset:-36%;box-shadow:inset 0 0 0 1px rgb(255 198 227 / .08);animation-delay:1.2s}
@keyframes nbBreathe{0%,100%{transform:scale(.97);opacity:.6}50%{transform:scale(1.03);opacity:1}}
.nb-disc{position:absolute;inset:22%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#1a1d24,#030304 72%);
  box-shadow:0 0 0 1.5px rgb(198 180 255 / .55),0 0 0 4px rgb(198 180 255 / .1),0 0 2.5rem rgb(198 180 255 / .5),0 1.5rem 2rem -1rem rgb(154 215 255 / .6),inset 0 1px 0 rgb(255 255 255 / .2)}
.nb-disc .nv-mark{width:42%!important;height:30%!important}
.nb-glass{top:44%;width:min(80%,28rem)}
.nb-ask{justify-content:space-between}
.nb-dots{display:flex;gap:.25rem;padding-right:.375rem}
.nb-dots b{width:.375rem;height:.375rem;border-radius:50%;background:linear-gradient(135deg,#9AD7FF,#C6B4FF)}
.nb-dots b:nth-child(2){background:linear-gradient(135deg,#C6B4FF,#FFC6E3)}.nb-dots b:nth-child(3){background:linear-gradient(135deg,#FFC6E3,#FFE8B0)}
.nb-answer p{margin:0 0 .875rem;font:500 clamp(1rem,1.3vw,1.125rem)/1.4 var(--sans);color:#f4f7fa}
.nb-why{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:.75rem 0;border-top:1px solid rgb(255 255 255 / .08);border-bottom:1px solid rgb(255 255 255 / .08)}
.nb-why span{font-size:.8125rem;line-height:1.35;color:rgb(238 243 246 / .55)}
.nb-why b{display:block;font-weight:600;color:#eef3f6;margin-bottom:.125rem}
.nb-act{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem}
.nb-badge{display:flex;align-items:center;gap:.5rem}.nb-badge .nv-mark{width:1.125rem!important;height:.8rem!important}.nb-badge b{font:500 .8125rem/1 'Orbitron',sans-serif}
.nb-act em{font:600 .8125rem/1 var(--sans);font-style:normal;padding:.5rem .875rem;border-radius:999px;color:#0e1114;background:linear-gradient(180deg,#f4f8fb,#c9d6e0)}
/* the old orb and island are replaced */
.w3h-b .w3h-orb,.w3h-b .w3h-island{display:none}
.w3h-b{min-height:37rem}
@media(max-width:820px){.w3h-b .w3h-stage{height:31rem}.nb-mic{top:4%;width:52%}.nb-glass{top:40%;width:90%}.nb-why{gap:.5rem}}
@media(min-width:821px){
  .nb-mic{left:24%;top:16%;width:min(30%,15rem)}
  .nb-glass{left:auto;right:5%;translate:0 0;top:8%;width:min(52%,27rem)}
  .w3h-tile:hover .nb-glass{translate:0 -.375rem}
  .w3h-b .w3h-light::before{background:radial-gradient(5% 30% at 24% 0,rgb(var(--beam2)),transparent 78%),radial-gradient(13% 46% at 24% 0,rgb(var(--beam) / 1),transparent 74%),radial-gradient(30% 64% at 30% 0,rgb(var(--beam) / .5),transparent 76%)}
}

/* ---- round 7, the word Nova (captain: no grain; more blue-purple, less yellow; keep moving while
   hovered; at rest the glow itself is the moving iridescence). At rest: a soft iridescent halo
   turns slowly behind white letters (a blurred conic gradient rotated by transform, composited,
   nothing repainted). Hover: the colour bursts out from the centre as before, without grain, in a
   blue-lilac-led pearl, then keeps drifting through the letters (background-position, the kind of
   animation measured leak-free) while the halo brightens and the white glow comes in. ---- */
.nw-halo{position:absolute;left:-6%;right:-6%;top:-14%;bottom:-14%;z-index:-2;pointer-events:none;border-radius:50%;overflow:hidden;
  -webkit-mask:radial-gradient(closest-side,#000 20%,transparent 100%);mask:radial-gradient(closest-side,#000 20%,transparent 100%);opacity:.68;transition:opacity .4s ease}
.nw-halo::before{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;translate:-50% -50%;
  background:conic-gradient(#9AD7FF,#C6B4FF,#b8a6ff,#FFC6E3,#9AD7FF,#BFF0E6,#C6B4FF,#9AD7FF);filter:blur(20px);animation:nwTurn 9s linear infinite}
@keyframes nwTurn{to{transform:rotate(1turn)}}
.nova-word::before{opacity:0!important}
.nova-copy h2:hover .nw-halo,.nova-word.lit .nw-halo{opacity:.85}
.nw-c::after{background:radial-gradient(closest-side,#e8e4ff 0%,#C6B4FF 22%,#9AD7FF 42%,#b8a6ff 58%,#FFC6E3 74%,#9AD7FF 90%,#BFF0E6 100%) 50% 50%/0% 0% no-repeat;
  -webkit-background-clip:text;background-clip:text;background-blend-mode:normal}
.nova-copy h2:hover .nw-c::after,.nova-word.lit .nw-c::after{background-size:118% 340%;animation:nwDrift 3.2s ease-in-out .55s infinite alternate}
@keyframes nwDrift{0%{background-position:50% 50%}33%{background-position:30% 40%}66%{background-position:70% 58%}100%{background-position:44% 62%}}

/* ---- round 7, card 2: the slow spinning dotted pearl he liked, around a black-hole disc. A ring of
   fine pearl dots turns once a minute (transform rotate); around the disc, ripples move outward
   like waves across space-time and fade (transform scale + opacity), and a dark event-horizon band
   with a thin bright photon ring hugs the disc. No animated custom properties anywhere. ---- */
.nb-dots-ring{position:absolute;inset:-34%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 200deg,#9AD7FF,#C6B4FF,#b8a6ff,#FFC6E3,#9AD7FF,#BFF0E6,#9AD7FF);
  -webkit-mask:radial-gradient(rgb(0 0 0) .9px,transparent 1.3px) 0 0/5px 5px,radial-gradient(circle,transparent 34%,#000 42%,rgb(0 0 0 / .55) 56%,transparent 70%);-webkit-mask-composite:source-in;
  mask:radial-gradient(rgb(0 0 0) .9px,transparent 1.3px) 0 0/5px 5px intersect,radial-gradient(circle,transparent 34%,#000 42%,rgb(0 0 0 / .55) 56%,transparent 70%);
  opacity:.8;animation:w3hTurn 60s linear infinite}
.nb-rip{position:absolute;inset:14%;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px rgb(198 180 255 / .32),inset 0 0 1.25rem rgb(0 0 0 / .5);
  opacity:0;animation:nbRipple 6s cubic-bezier(.2,.6,.3,1) infinite}
.nb-rip.p2{animation-delay:2s}.nb-rip.p3{animation-delay:4s}
@keyframes nbRipple{0%{transform:scale(.85);opacity:0}12%{opacity:.85}100%{transform:scale(2.3);opacity:0}}
.nb-horizon{position:absolute;inset:18%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,transparent 58%,rgb(0 0 0 / .85) 66%,transparent 74%)}
.nb-ring{display:none}
.nb-disc{box-shadow:0 0 0 1px rgb(255 255 255 / .55),0 0 0 3px rgb(198 180 255 / .25),0 0 1.5rem rgb(198 180 255 / .55),0 0 3.5rem rgb(154 215 255 / .25),0 1.5rem 2rem -1rem rgb(154 215 255 / .6),inset 0 1px 0 rgb(255 255 255 / .2)}

/* ---- round 7: real light (captain: "it looks like gradients, not real light"). Studied from
   Huly's tiles: a light has a white-hot core, an exponential falloff (not a linear ramp), dust that
   catches it inside the beam, a bloom where it meets a surface, and an edge that catches it. Each
   tile's beam is now: a thin core line; a falloff stacked from many stops blended in OKLab (no
   banding); fine dust in the cone only; a bloom on the tile's top edge; and that edge lit in a
   gradient that fades sideways. All static. ---- */
.w3h-light::before{background:
  radial-gradient(in oklab .35rem 42% at var(--bx,50%) 0,rgb(255 255 255 / .95),rgb(255 255 255 / 0)),
  radial-gradient(in oklab 4.5% 36% at var(--bx,50%) 0,rgb(var(--beam2) / .95),rgb(var(--beam2) / .5) 35%,rgb(var(--beam2) / 0)),
  radial-gradient(in oklab 12% 55% at var(--bx,50%) 0,rgb(var(--beam) / .85),rgb(var(--beam) / .42) 30%,rgb(var(--beam) / .12) 62%,rgb(var(--beam) / 0)),
  radial-gradient(in oklab 34% 78% at var(--bx,50%) 0,rgb(var(--beam) / .32),rgb(var(--beam) / .12) 40%,rgb(var(--beam) / .03) 72%,rgb(var(--beam) / 0)),
  radial-gradient(in oklab 90% 95% at var(--bx,50%) 0,rgb(var(--beam) / .1),rgb(var(--beam) / 0) 80%)!important}
.w3h-b{--bx:24%}
.w3h-a .w3h-light::before{background:none!important}
.w3h-dust{position:absolute;inset:0;pointer-events:none;background:url(brand/grain-tile.png) 0 0/64px 64px;mix-blend-mode:screen;opacity:.35;
  -webkit-mask:radial-gradient(14% 60% at var(--bx,50%) 0,#000,transparent 80%);mask:radial-gradient(14% 60% at var(--bx,50%) 0,#000,transparent 80%)}
.w3h-a .w3h-dust{--bx:60%;-webkit-mask:radial-gradient(18% 34% at 62% 10%,#000,transparent 80%);mask:radial-gradient(18% 34% at 62% 10%,#000,transparent 80%)}
.w3h-bloom{position:absolute;left:calc(var(--bx,50%) - 22%);width:44%;top:-1.5rem;height:3rem;border-radius:50%;pointer-events:none;
  background:radial-gradient(in oklab closest-side,rgb(var(--beam2) / .55),rgb(var(--beam) / .18) 55%,rgb(var(--beam) / 0));filter:blur(6px)}
.w3h-a .w3h-bloom{--bx:62%}
.w3h-tile{box-shadow:inset 0 1px 0 rgb(255 255 255 / .04),inset 0 0 0 1px rgb(238 243 246 / .06)}
.w3h-light{border-radius:inherit;box-shadow:inset 0 1px 0 0 transparent}
.w3h-light::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:normal!important;opacity:1!important;
  /* fine dot grid (Huly): small dots, brightness varied at random by the grain, fading out from the light */
  background:radial-gradient(rgb(238 243 246 / .55) .55px,transparent .9px) 0 0/6px 6px!important;
  -webkit-mask:url(brand/grain-tile.png) 0 0/64px 64px,radial-gradient(70% 85% at var(--bx,50%) 0,rgb(0 0 0 / .9),rgb(0 0 0 / .25) 55%,transparent 85%)!important;-webkit-mask-composite:source-in!important;
  mask:url(brand/grain-tile.png) 0 0/64px 64px luminance intersect,radial-gradient(70% 85% at var(--bx,50%) 0,rgb(0 0 0 / .9),rgb(0 0 0 / .25) 55%,transparent 85%)!important}
.w3h-a .w3h-light::after{--bx:62%}
/* the tile's top edge catches the light, brightest under the beam and fading sideways */
.w3h-tile>.w3h-light{outline:0}
.w3h-light .w3h-bloom::after{content:"";position:absolute;left:-30%;right:-30%;top:1.5rem;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--beam2) / .9),transparent)}
/* the same fine dots in Ask Nova's tiles */
.nova-b .nvb-t::after{background:radial-gradient(rgb(238 243 246 / .5) .55px,transparent .9px) 0 0/6px 6px!important;
  -webkit-mask:url(brand/grain-tile.png) 0 0/64px 64px,linear-gradient(#000,transparent 70%)!important;-webkit-mask-composite:source-in!important;
  mask:url(brand/grain-tile.png) 0 0/64px 64px luminance intersect,linear-gradient(#000,transparent 70%)!important}
.nvb-phone::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(rgb(238 243 246 / .45) .55px,transparent .9px) 0 0/6px 6px;
  -webkit-mask:url(brand/grain-tile.png) 0 0/64px 64px,radial-gradient(80% 60% at 50% 0,#000,transparent 85%);-webkit-mask-composite:source-in;
  mask:url(brand/grain-tile.png) 0 0/64px 64px luminance intersect,radial-gradient(80% 60% at 50% 0,#000,transparent 85%)}

/* ---- round 8 (inbox 100) ---- */
/* 1. the food card's light without the hinge: the ray used to end on a hard horizontal edge at the
   pane's top, and the pane lifted on hover, so the seam showed and moved. The ray now runs on under
   the pane and fades out smoothly along its length, and the pane stays put (the light brightens on
   hover instead), so nothing meets on a line. */
.w3h-ray{height:34%;-webkit-mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent),linear-gradient(180deg,#000 30%,transparent 92%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent) intersect,linear-gradient(180deg,#000 30%,transparent 92%);transition:opacity .6s ease}
.w3h-ray::after{-webkit-mask:linear-gradient(180deg,#000 40%,transparent);mask:linear-gradient(180deg,#000 40%,transparent)}
.w3h-a .w3h-light::before,.w3h-tile:hover .w3h-light::before{transform:none}
.w3h-a:hover .w3h-glass{translate:-50% 0}
.w3h-a .w3h-light{transition:filter .6s ease}.w3h-a:hover .w3h-light{filter:brightness(1.18)}
/* 2. the black hole spins and warps instead of pulsing: two rings of the same fine pearl dots turn
   against each other at slightly different scales, so their interference bends and drifts like
   space being pulled round the disc; a lensed arc of light (brighter on one side, as light bent
   round a black hole is) circles slowly. Rotation only, nothing pulses. */
.nb-rip{display:none}
.nb-warp{inset:-30%;opacity:.55;animation:w3hTurn 38s linear infinite reverse;
  -webkit-mask:radial-gradient(rgb(0 0 0) .8px,transparent 1.2px) 0 0/4.6px 4.6px,radial-gradient(circle,transparent 36%,#000 44%,rgb(0 0 0 / .4) 58%,transparent 70%);-webkit-mask-composite:source-in;
  mask:radial-gradient(rgb(0 0 0) .8px,transparent 1.2px) 0 0/4.6px 4.6px intersect,radial-gradient(circle,transparent 36%,#000 44%,rgb(0 0 0 / .4) 58%,transparent 70%)}
.nb-lens{position:absolute;inset:4%;border-radius:50%;pointer-events:none;animation:w3hTurn 24s linear infinite;
  background:conic-gradient(from 0deg,rgb(255 255 255 / 0) 0deg,rgb(214 230 255 / .9) 40deg,rgb(198 180 255 / .55) 90deg,rgb(154 215 255 / .12) 160deg,rgb(255 255 255 / 0) 220deg,rgb(255 198 227 / .18) 300deg,rgb(255 255 255 / 0) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 61%,#000 63.5%,transparent 66%);mask:radial-gradient(circle,transparent 61%,#000 63.5%,transparent 66%);filter:blur(.6px)}
/* 3. fast scroll: while flinging (reveal.js measures the speed), timed reveals and transitions skip
   to their end state instead of playing */
html.scroll-fast *,html.scroll-fast *::before,html.scroll-fast *::after{transition-duration:0s!important;transition-delay:0s!important}
/* 4. the brand deck items the captain agreed to (decisions 5, 6, 8, 11 and the active row) */
:root{--h-chapter:clamp(2.75rem,6.1vw,5.5rem);--h-section:clamp(2rem,3.9vw,3.5rem)}
/* one heading size for sections (56 at 1440), one for chapter openers (88); one face and tracking */
.sc-head h2,.nova-copy h2,.see-head h2,#faq>h2,.privacy2 h2,#founding h2,#ftTitle{font:500 var(--h-section)/1.04 var(--display)!important;letter-spacing:-.03em!important;color:var(--ink)}
.sec-title,.w3h-title{font-size:var(--h-chapter)!important;letter-spacing:-.035em!important}
#founding h2{max-width:26ch;margin-inline:auto;text-wrap:balance}
/* one left edge: the wide container everywhere */
#faq{max-width:var(--container-wide)!important}
#faq .faq-grid{max-width:46rem}
.see .g-wrap{max-width:var(--container-wide)!important}
/* two faces only: labels in DM Sans, sentence case (no mono, no all caps) */
.nvx-k,.w3h-chip b,.w3h-week span,.case-meta,.case-meta *{font-family:var(--sans)!important;text-transform:none!important;letter-spacing:0!important}
.w3h-chip b{font-size:.8125rem!important;font-weight:600!important;color:var(--ink)!important}
.case-meta{font-size:.8125rem!important}
/* the contour hover round the big tora PRO retires (the roads carry the line language now) */
.pro-contour{display:none!important}
.pro-flow .fl{stroke-linecap:round;stroke-linejoin:round}
/* See it in the app: the active row is lit from its top edge like a tile; the rest are plain rows */
.see-item[aria-pressed="true"]{background:radial-gradient(in oklab 60% 140% at 20% 0,rgb(120 190 255 / .16),rgb(120 190 255 / 0) 70%),#0E1114!important;
  box-shadow:inset 0 1px 0 rgb(238 243 246 / .16),inset 0 0 0 1px rgb(238 243 246 / .06),0 1.25rem 2.5rem -1.25rem rgb(0 0 0 / .8)!important}
.see-item:not([aria-pressed="true"]){background:transparent!important}
/* Privacy: one light falls onto the lock, built like the tiles' real light: core, smooth OKLab
   falloff, dust in the beam, and fine dots only where it lands */
.p2-pin{isolation:isolate}
.p2-pin::after{content:"";position:absolute;left:50%;top:0;width:64rem;height:72vh;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(in oklab .3rem 56% at 50% 0,rgb(255 255 255 / .9),rgb(255 255 255 / 0)),
    radial-gradient(in oklab 3% 60% at 50% 0,rgb(214 234 250 / .8),rgb(214 234 250 / .3) 40%,rgb(214 234 250 / 0)),
    radial-gradient(in oklab 9% 74% at 50% 0,rgb(120 190 255 / .6),rgb(120 190 255 / .22) 40%,rgb(120 190 255 / 0)),
    radial-gradient(in oklab 26% 88% at 50% 0,rgb(84 130 190 / .26),rgb(84 130 190 / .08) 50%,rgb(84 130 190 / 0)),
    radial-gradient(in oklab 50% 100% at 50% 0,rgb(43 73 112 / .5),rgb(43 73 112 / 0) 80%)}
.p2-stage,.p2-copy{position:relative;z-index:1}
.p2-stage::after{content:"";position:absolute;left:50%;top:-10rem;width:44rem;height:32rem;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(rgb(238 243 246 / .5) .55px,transparent .9px) 0 0/6px 6px;
  -webkit-mask:url(brand/grain-tile.png) 0 0/64px 64px,radial-gradient(18rem 15rem at 50% 32%,#000,transparent 72%);-webkit-mask-composite:source-in;
  mask:url(brand/grain-tile.png) 0 0/64px 64px luminance intersect,radial-gradient(18rem 15rem at 50% 32%,#000,transparent 72%)}
.privacy2 .privacy-lock{filter:drop-shadow(0 -8px 26px rgb(120 190 255 / .45))}
/* a touch more blue in the tiles: the tile ground leans to space blue */
.w3h-tile,.nova-b .nvb-t,.nvb-phone{background:linear-gradient(180deg,#0b1119,#08090b 70%)!important}
/* 5. Why Tora (captain: keep grey-to-colour photos, no single grade; "the photo behind him is blue
   ... as you hover, the guy turns into colour, and the background goes into grey"). At rest the
   background photo is graded Tora blue and the athlete is grey steel; on hover (or in view on a
   phone) they swap: the athlete takes his colour, the background drops to grey. */
.w3-lift-card img{filter:grayscale(1) brightness(.62) sepia(1) hue-rotate(168deg) saturate(2.1) contrast(1.06)!important;transition:filter 1.1s cubic-bezier(.22,1,.36,1)}
.w3-lift-cut{filter:grayscale(1) brightness(.86) contrast(1.05)!important;transition:filter 1.1s cubic-bezier(.22,1,.36,1)}
.w3-lift:hover .w3-lift-card img,.w3-lift.color-open .w3-lift-card img{filter:grayscale(1) brightness(.6)!important}
.w3-lift:hover .w3-lift-cut,.w3-lift.color-open .w3-lift-cut{filter:none!important}
/* 6. tile 03, the auto-adapting program, in the yogurt card's language: one glass pane, a raised
   header with the exercise (its real thumbnail from the app) and the lit Auto-Load chip, then the
   sets as the app fills them, last time beside today, and the reason in one line. Replaces the old
   screenshot (an earlier build with a glitched note banner). */
.w3h-c{min-height:34rem;display:flex!important;justify-content:flex-end}
.w3h-c .w3h-stage{position:absolute;inset:0}
.al-glass{left:auto!important;right:6%;translate:0 0!important;top:12%;width:min(48%,32rem)}
.al-head{gap:.875rem;justify-content:flex-start;padding:.75rem .875rem}
.al-head img{width:3rem;height:3.6rem;object-fit:cover;border-radius:.75rem;flex:none;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)}
.al-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.al-name b{font:600 1.0625rem/1.2 var(--sans);color:#f4f7fa}
.al-name span{font-size:.8125rem;color:rgb(238 243 246 / .5)}
.al-chip{flex:none;padding:.5rem .875rem;border-radius:999px;font:600 .8125rem/1 var(--sans);color:#eaf4fb;
  background:linear-gradient(180deg,rgb(120 190 255 / .24),rgb(120 190 255 / .1));box-shadow:inset 0 0 0 1.5px rgb(191 214 230 / .6),0 0 1.25rem rgb(120 190 255 / .35)}
.al-sets{padding:.5rem 1.125rem 1rem}
.al-row{display:grid;grid-template-columns:2.25rem 1fr 1fr 2.5rem;align-items:center;gap:.5rem;padding:.6875rem 0;border-bottom:1px solid rgb(255 255 255 / .06);
  font:500 .9375rem/1.2 var(--sans);font-variant-numeric:tabular-nums;color:rgb(238 243 246 / .5)}
.al-row b{font-weight:600;color:#f4f7fa}
.al-hd{font-size:.8125rem;color:rgb(238 243 246 / .45);padding-top:.375rem}
.al-up{font:600 .75rem/1 var(--sans);font-style:normal;justify-self:end;padding:.3rem .45rem;border-radius:.5rem;color:#9fd6b8;background:rgb(110 190 150 / .12)}
.al-why{display:flex;gap:.5rem;align-items:flex-start;margin:.875rem 0 0;font-size:.875rem;line-height:1.45;color:rgb(238 243 246 / .62)}
.al-why .nv-mark{flex:none;width:1rem!important;height:.7rem!important;margin-top:.25rem}
.w3h-c .w3h-cap{position:relative;z-index:2;max-width:26rem}
.w3h-c{--bx:66%}
@media(max-width:820px){.w3h-c{display:flex!important;flex-direction:column}.w3h-c .w3h-stage{position:relative;height:27rem}.al-glass{right:auto!important;left:50%!important;translate:-50% 0!important;top:7%;width:92%}.al-row{grid-template-columns:1.75rem 1fr 1fr 2.25rem;font-size:.8125rem}}
.w3h-c{min-height:38rem}
.w3h-c .w3h-stage{z-index:1}
.al-glass{right:7%;top:10%;width:min(52%,34rem)}
@media(max-width:820px){.w3h-c{min-height:0}}
.w3h-c{--pearl:linear-gradient(90deg,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6,#9AD7FF) 0 0/200% 100%}
.pro-flow .fl{stroke:rgb(143 179 203 / .34)}

/* ---- round 9 (inbox 101) ---- */
/* R9-1 no grain on glass: the frosted field carried a faint grain overlay (added on purpose in
   round 6, wrong); it is gone, and the pane blurs harder so the dot grid behind never shows through */
.gl-field::before{display:none!important}
.w3h-glass{backdrop-filter:blur(18px) saturate(1.1)!important;-webkit-backdrop-filter:blur(18px) saturate(1.1)!important}
/* R9-2 the privacy light, after Huly's hero beam: one soft shaft from the top of the screen with a
   thin hot core, falling into the lock and pooling on its plate, spilling onto the ground below;
   every layer fades to nothing inside its own box (no edges), and fine dust drifts in the shaft
   only. The lock's metal is lit from above (plLit in the SVG). Replaces the round-8 box beam. */
.p2-pin::after,.p2-stage::after{display:none!important}
.p2-light{position:absolute;left:50%;top:-58vh;width:min(60rem,140vw);height:calc(58vh + 30rem);translate:-50% 0;pointer-events:none;z-index:-1}
.p2-light i{position:absolute;display:block}
.pl-shaft{left:50%;top:0;width:24rem;height:100%;translate:-50% 0;filter:blur(14px);
  background:radial-gradient(in oklab 34% 100% at 50% 0,rgb(120 190 255 / .32),rgb(120 190 255 / .14) 45%,rgb(84 130 190 / .05) 75%,rgb(84 130 190 / 0) 100%);
  -webkit-mask:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent),linear-gradient(#000 70%,transparent 96%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent) intersect,linear-gradient(#000 70%,transparent 96%)}
.pl-core{left:50%;top:0;width:3.5rem;height:calc(58vh + 7rem);translate:-50% 0;filter:blur(5px);
  background:linear-gradient(90deg,rgb(214 234 250 / 0),rgb(214 234 250 / .55) 35%,rgb(255 255 255 / .95) 50%,rgb(214 234 250 / .55) 65%,rgb(214 234 250 / 0));
  -webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.pl-pool{left:50%;top:calc(58vh - 2rem);width:26rem;height:18rem;translate:-50% 0;border-radius:50%;filter:blur(18px);
  background:radial-gradient(in oklab closest-side,rgb(170 210 245 / .42),rgb(120 190 255 / .18) 45%,rgb(84 130 190 / 0))}
.pl-floor{left:50%;top:calc(58vh + 17rem);width:36rem;height:9rem;translate:-50% 0;border-radius:50%;filter:blur(22px);
  background:radial-gradient(in oklab closest-side,rgb(120 190 255 / .2),rgb(84 130 190 / .06) 55%,rgb(84 130 190 / 0))}
.pl-dust{left:50%;top:20%;width:14rem;height:calc(38vh + 8rem);translate:-50% 0;background:url(brand/grain-tile.png) 0 0/64px 64px;mix-blend-mode:screen;opacity:.3;
  -webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent)}
.privacy2 .privacy-lock{filter:drop-shadow(0 -6px 22px rgb(120 190 255 / .35)) drop-shadow(0 18px 30px rgb(0 0 0 / .55))}
@media(max-width:820px){.p2-light{top:-44vh;height:calc(44vh + 24rem)}.pl-core{height:calc(44vh + 5rem)}.pl-pool{top:calc(44vh - 2rem);width:18rem;height:13rem}.pl-floor{top:calc(44vh + 13rem);width:24rem}}
/* R9-3 the nav on a phone: the member button says "Join" and sits smaller, so the bar breathes */
.cta-short{display:none}
@media(max-width:820px){
  #siteHeader .nav-join .cta-long{display:none}
  #siteHeader .nav-join .cta-short{display:inline}
  #siteHeader .nav-join{font-size:.8125rem;height:2rem;padding:0 .1875rem 0 .875rem;gap:.5rem}
  #siteHeader .nav-join .icon{width:1.625rem;height:1.625rem}
}
/* the dots and the dust stop above the glass: in Chrome a pane's backdrop blur does not reach the
   masked dot layer, so dots under a pane read as grain on the glass (captain's screenshot). They
   now live only in the light above the panes. */
.w3h-light::after{-webkit-mask:url(brand/grain-tile.png) 0 0/64px 64px,radial-gradient(70% 5.5rem at var(--bx,50%) 0,rgb(0 0 0 / .9),rgb(0 0 0 / .3) 60%,transparent 100%)!important;-webkit-mask-composite:source-in!important;
  mask:url(brand/grain-tile.png) 0 0/64px 64px luminance intersect,radial-gradient(70% 5.5rem at var(--bx,50%) 0,rgb(0 0 0 / .9),rgb(0 0 0 / .3) 60%,transparent 100%)!important}
.w3h-dust{-webkit-mask:radial-gradient(14% 5rem at var(--bx,50%) 0,#000,transparent 100%)!important;mask:radial-gradient(14% 5rem at var(--bx,50%) 0,#000,transparent 100%)!important}
.w3h-b .w3h-light::after{-webkit-mask:url(brand/grain-tile.png) 0 0/64px 64px,radial-gradient(40% 70% at 24% 30%,rgb(0 0 0 / .8),transparent 85%)!important;mask:url(brand/grain-tile.png) 0 0/64px 64px luminance intersect,radial-gradient(40% 70% at 24% 30%,rgb(0 0 0 / .8),transparent 85%)!important}
@media(max-width:820px){#siteHeader .nav-join{font-size:.6875rem;height:2rem;padding:0 .1875rem 0 .8125rem}}

/* ---- round 10 (inbox 102) ---- */
/* R10-1 privacy: our own rendered beam (assets/three/beam.webp, drawn from scratch: a thin hot core
   that flares as it lands on the shackle, a skirt of light along the impact, a soft bloom and nebula
   haze in space blue and lilac), aligned to the lock; the metal glows where the beam lands */
.p2-light{display:none!important}
.privacy2 .privacy-lock-button{isolation:auto}
.p2-beam{position:absolute;left:50%;bottom:0;width:250%;max-width:none;height:auto;translate:-50% 0;pointer-events:none;z-index:-1;user-select:none}
.privacy2 .privacy-lock{position:relative;z-index:1;filter:drop-shadow(0 18px 30px rgb(0 0 0 / .55))!important}
/* R10-2 Auto-Load: back to the two-screen layout (round 7), now with screens re-captured from the
   current app main: the live workout with Auto-Load selected, the chips (Note, Progress, Warm-up)
   and the filled sets, and the Progress analytics behind it. The round-8 glass version is retired. */
.w3h-c{display:block!important;min-height:36rem!important}
.w3h-c .w3h-stage{position:absolute;inset:0;z-index:0}
.w3h-c .w3h-cap{position:absolute;left:0;bottom:0;max-width:40rem}
@media(max-width:820px){.w3h-c{display:flex!important;flex-direction:column;min-height:0!important}.w3h-c .w3h-stage{position:relative;height:25rem}.w3h-c .w3h-cap{position:relative}}
/* R10-5 the two cards align and share the Tora radii: same height, the glass panes start at the
   same height in both, tile 22, pane 28 with 14 padding, so the raised layers inside are 14
   (concentric, like the brand piece) */
.w3h-a,.w3h-b{align-self:stretch!important;height:auto!important;min-height:38rem!important}
.w3h-tile{border-radius:22px!important}
.w3h-glass{border-radius:28px!important;padding:14px!important}
.w3h-glass .gl-field,.w3h-glass .gl-entry{border-radius:14px!important}
.w3h-a .w3h-glass{top:3.5rem!important}
@media(min-width:821px){.nb-glass{top:3.5rem!important}.nb-mic{top:4.5rem!important}}
.gl-top img{border-radius:10px!important}
/* R10-6 Questions centred: heading and list on the page's centre line (the R8 left edge undone here) */
#faq{max-width:52rem!important;margin-inline:auto!important}
#faq>h2{text-align:center}
#faq .faq-grid{max-width:46rem;margin-inline:auto}
/* R10-4 the glow follows the letters: at rest a blurred copy of the word, filled with the moving
   iridescent pearl, sits behind the white letters, so the light hugs every stroke instead of
   sitting behind as a blob; on hover it lets go and a white glow of the letter shapes comes in
   while the pearl fills the letters. Moves background-position only. */
.nw-halo{display:none!important}
.nova-copy h2 .nova-word::before{opacity:.95!important;color:transparent!important;text-shadow:none!important;
  background:linear-gradient(90deg,#9AD7FF,#C6B4FF,#b8a6ff,#FFC6E3,#9AD7FF,#BFF0E6,#9AD7FF,#C6B4FF,#b8a6ff,#FFC6E3,#9AD7FF) 0 0/200% 100%;
  -webkit-background-clip:text;background-clip:text;filter:blur(.09em) saturate(1.2);transform:none!important;
  animation:nwGlowDrift 7s linear infinite;transition:opacity .35s ease-out!important}
.nova-copy h2 .nova-word::after{text-shadow:0 0 .06em rgb(255 255 255 / .75),0 0 .2em rgb(255 255 255 / .38)!important}
@keyframes nwGlowDrift{to{background-position:100% 0}}
.nova-copy h2:hover .nova-word::before,.nova-word.lit::before{opacity:0!important}
/* R10-3 Ask Nova tiles melt into one plate where they meet (look26.js draws it); the tiles are
   staggered so the plate's edge steps and curves like Huly MetaBrain */
.nvb-grid{position:relative}
.nvb-plate{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.nvb-tiles,.nvb-phone{position:relative;z-index:1}
@media(min-width:1101px){
  .nvb-tiles{grid-auto-rows:1rem;row-gap:.5rem}
  .nvb-1{grid-row:3 / span 11}.nvb-2{grid-row:1 / span 12}
  .nvb-3{grid-row:15 / span 13}.nvb-4{grid-row:15 / span 14}.nvb-5{grid-row:14 / span 13}
  .nvb-phone{margin:2.5rem 0 1rem}
}


/* ---- round 11 (inbox 103) ---- */
/* R11-1 the lock marks are solid: no outline on the halves at any zoom */
.privacy2 :is(.pl-left,.pl-right){stroke:none!important;fill-opacity:var(--p2-halfin,0)!important}
/* R11-2 two timelines: the beam lives outside the lock button, so the lock's own turn-and-click
   never moves the light; the light fades up on its own when the section arrives */
.p2-stage{isolation:isolate}
.p2-beam{width:calc(min(20rem,56vw) * 2.5)!important;bottom:0!important;opacity:0;transition:opacity 2.2s cubic-bezier(.22,1,.36,1),transform 2.8s cubic-bezier(.22,1,.36,1);transform:translate3d(0,-1.5%,0)}
.p2-pin.lit .p2-beam{opacity:1;transform:none}
/* R11-3 behind the lock, after Huly's hero: a faint grid and the privacy facts sit in the dark;
   the pointer is a torch that reveals them (a radial mask that follows it, eased); on a phone
   they show softly around the lock once it has formed */
.p2-behind{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease;
  -webkit-mask:radial-gradient(22rem 22rem at var(--tx,50%) var(--ty,40%),#000 0,rgb(0 0 0 / .7) 45%,transparent 78%);mask:radial-gradient(22rem 22rem at var(--tx,50%) var(--ty,40%),#000 0,rgb(0 0 0 / .7) 45%,transparent 78%)}
.p2-pin.torch .p2-behind{opacity:1}
.p2-grid{position:absolute;inset:0;background:linear-gradient(rgb(143 179 203 / .1) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgb(143 179 203 / .1) 1px,transparent 1px) 0 0/64px 64px}
.p2-fact{position:absolute;width:15rem;padding:.875rem 1rem;border-radius:14px;text-align:left;background:linear-gradient(180deg,rgb(29 37 49 / .78),rgb(17 21 26 / .78));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),inset 0 0 0 1px rgb(143 179 203 / .2)}
.p2-fact b{display:block;font:600 .875rem/1.3 var(--sans);color:var(--ink);margin-bottom:.25rem}
.p2-fact span{display:block;font-size:.8125rem;line-height:1.45;color:rgb(238 243 246 / .6)}
.pf1{left:16%;top:18%}.pf2{right:15%;top:15%}.pf3{left:12%;top:46%}.pf4{right:12%;top:44%}.pf5{left:50%;top:6%;translate:-50% 0}
@media(max-width:820px){.p2-fact{width:11rem;padding:.625rem .75rem}.p2-fact span{font-size:.75rem}.pf1{left:4%;top:9%}.pf2{right:4%;top:9%}.pf3{left:4%;top:30%}.pf4{right:4%;top:30%}.pf5{display:none}
  .p2-behind{-webkit-mask:radial-gradient(70% 34% at 50% 26%,rgb(0 0 0 / .55),transparent 85%);mask:radial-gradient(70% 34% at 50% 26%,rgb(0 0 0 / .55),transparent 85%)}}
.p2-stage,.p2-copy{position:relative;z-index:1}
/* R11-4 the footer's sign-off, with the animated Tora mark */
.foot-made{display:flex;align-items:center;gap:.625rem;margin-top:.875rem;font:400 var(--text-sm)/1 var(--sans);color:rgb(238 243 246 / .5)}
.foot-made img{width:1.75rem;height:auto;display:block}
.case-meta{grid-template-columns:auto 1fr!important}

/* ---- round 12 (inbox 104+105) ---- */
/* R12-4 See it in the app: the list scrolls (wheel, trackpad, touch), its scrollbar hidden; edges fade */
@media(min-width:821px){
  .see-listwrap{overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:none;
    -webkit-mask:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
  .see-listwrap::-webkit-scrollbar{display:none}
  .see-list{transform:none!important}
}
/* R12-6 no outlines on pills and segmented controls (the app has none): solid tracks only */
.ft-chips,.pro-bill{box-shadow:none!important;border:0!important;background:rgb(255 255 255 / .06)!important}
.sc-ticks{border:0!important;background:rgb(255 255 255 / .06)}
.ft-knob,.pro-bill [aria-pressed="true"],.pro-bill .on{box-shadow:none!important}
/* R12-5 the Nova mark presses: a pointer cursor, a soft hover lift; look26.js plays the reaction */
.nb-disc{pointer-events:auto;cursor:pointer;transition:box-shadow .4s ease}
.nb-disc:hover{box-shadow:0 0 0 1px rgb(255 255 255 / .7),0 0 0 4px rgb(198 180 255 / .32),0 0 2rem rgb(198 180 255 / .7),0 0 4rem rgb(154 215 255 / .35),inset 0 1px 0 rgb(255 255 255 / .25)}
.nb-wave{position:absolute;inset:22%;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px rgb(214 228 255 / .6),0 0 1rem rgb(198 180 255 / .3)}
/* R12-10 the keyboard shows below the panel, and T, O, R and A glow: Tora, spelled in light */
@media(min-width:821px){
  .w3h-a,.w3h-b{min-height:44rem!important}
  .w3h-a .w3h-kb{top:24rem!important;width:100%!important;-webkit-mask:radial-gradient(64% 120% at 50% 20%,#000 50%,transparent 92%)!important;mask:radial-gradient(64% 120% at 50% 20%,#000 50%,transparent 92%)!important}
}
.kk.on{color:#f4f9fd!important;background:linear-gradient(180deg,#22344a,#162231)!important;
  box-shadow:inset 0 1px 0 rgb(214 234 250 / .55),inset 0 0 0 1px rgb(143 179 203 / .45),0 0 .75rem rgb(120 190 255 / .55),0 0 2.25rem rgb(120 190 255 / .3)!important;text-shadow:0 0 .5rem rgb(190 225 255 / .9)}
@media(max-width:820px){.w3h-a .w3h-stage{height:34rem!important}.w3h-a .w3h-kb{top:21rem!important;width:150%!important}}
/* R12-2 the light wraps the lock: the rendered light now hugs the lock's own silhouette (a rim of
   light spilling over its top and draining down its sides), in Tora blue and steel only.
   R12-3 Huly's hero hover, studied on their live page and rebuilt in our own code: the section
   tracks the pointer in two custom properties; a copy of the light, blended with overlay and
   clipped to a circle round the pointer, brightens the light under the pointer, while the facts
   behind are revealed through a radial mask (their recipe: mask radial-gradient 300px at x y,
   black 20%, transparent; an overlay layer clipped to a circle at the same point). */
.p2-glare{position:absolute;left:50%;bottom:0;width:calc(min(20rem,56vw) * 2.5);translate:-50% 0;pointer-events:none;z-index:-1;mix-blend-mode:overlay;opacity:0;transition:opacity .5s ease;
  clip-path:circle(11rem at calc(var(--tx,-999px) - var(--gx,0px)) calc(var(--ty,-999px) - var(--gy,0px)))}
.p2-glare img{display:block;width:100%;height:auto;filter:brightness(1.6)}
.p2-pin.torch .p2-glare{opacity:1}
/* R14-3 Auto-Load in glass (the captain's standing ask; round 13 had wrongly reverted it). The right
   screen is the real app capture with its opaque background lifted out (train-glass.webp: colour to
   alpha against the app's #1D1E22), so its rows, pills and fields sit on a frosted pane as glass.
   The left pane is a diagram of what Auto-Load does, in the same glass. Radii: pane 28, layers 14. */
.w3h-c .w3h-card,.w3h-dia{padding:14px!important;border-radius:28px!important;
  background:linear-gradient(180deg,rgb(140 200 255 / .13),rgb(20 26 34 / .42) 32%,rgb(12 15 19 / .5))!important;
  backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
  box-shadow:0 0 0 1px rgb(238 243 246 / .13),inset 0 1px 0 rgb(255 255 255 / .34),0 -1.5rem 3.5rem -1.25rem rgb(var(--beam) / .7),0 2rem 3.5rem rgb(0 0 0 / .6)!important}
.w3h-c .w3h-card{-webkit-mask:linear-gradient(#000 64%,transparent 97%)!important;mask:linear-gradient(#000 64%,transparent 97%)!important}
.w3h-c .w3h-card img{border-radius:14px}
.w3h-c .w3h-card::after{inset:0!important;border-radius:28px!important;background:linear-gradient(165deg,rgb(255 255 255 / .12),rgb(255 255 255 / .02) 24%,transparent 42%)!important;box-shadow:none!important}
.w3h-dia{position:absolute;left:6%;top:12%;width:min(27%,19rem);margin:0;transition:translate .9s cubic-bezier(.22,1,.36,1)}
.w3h-tile:hover .w3h-dia{translate:0 -.35rem}
.w3h-dia svg{display:block;width:100%;height:auto;overflow:visible}
.w3h-dia :is(rect,path){fill:none;stroke:#8FB3CB;stroke-width:1;vector-effect:non-scaling-stroke}
.w3h-dia .dn{fill:rgb(238 243 246 / .045);stroke:rgb(238 243 246 / .14)}
.w3h-dia .dr{stroke:rgb(143 179 203 / .7);stroke-linecap:round}
.w3h-dia .dk{stroke-dasharray:2 4}
.w3h-dia .db{fill:rgb(120 190 255 / .32);stroke:rgb(143 179 203 / .45)}
.w3h-dia .db.dd{fill:rgb(143 179 203 / .1);stroke-dasharray:3 3}
.w3h-dia text{font:500 13px/1 var(--sans);fill:#EEF3F6}
.w3h-dia .dt{font-size:15px;font-weight:600}
.w3h-dia .ds{font-size:11.5px;fill:rgb(238 243 246 / .58)}
.w3h-dia .dm{font-size:10.5px}
@media(max-width:820px){.w3h-dia{display:none}}
/* R12-12 the big PRO, simpler (captain: like Apple's iPhone 18 Pro wordmark): one smooth,
   restrained metal fall from light silver at the top to soft steel at the foot, no reflected
   environment, no bands, no edge lines or colour fringes. The slow light pass stays, fainter. */
.pro-title .tpro-p::before,.tpro-chrome .tpro-p::before{
  background-image:linear-gradient(104deg,transparent 44%,rgb(255 255 255 / .28) 50%,transparent 56%),linear-gradient(in oklab 180deg,#f3f6f8 0%,#dfe7ed 30%,#b9c8d3 62%,#94a8b7 100%)!important;
  background-size:300% 100%,100% 100%!important;background-position-y:0,0!important}
.pro-title .tpro-p::after,.tpro-chrome .tpro-p::after{display:none!important}
.pro-title .tpro-p,.tpro-chrome .tpro-p{text-shadow:none!important}
.pro-title .tpro-p,.tpro-chrome .tpro-p{color:#c3d1db!important;-webkit-text-fill-color:#c3d1db!important}
/* R12-3 (member flow) Become a member: the panel rises out of the blur instead of popping in;
   labels in sentence case; fields are raised glass without outlines; the light lands on its top */
.wl-backdrop{transition:opacity .45s cubic-bezier(.22,1,.36,1),backdrop-filter .6s ease!important;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
.wl-backdrop.is-open{backdrop-filter:blur(8px) saturate(.85);-webkit-backdrop-filter:blur(8px) saturate(.85)}
.wl-modal{transform:translate3d(0,1.5rem,0) scale(.965)!important;opacity:0;filter:blur(6px);
  transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .45s ease,filter .55s cubic-bezier(.22,1,.36,1)!important;
  box-shadow:0 1.875rem 5rem rgba(0,0,0,.55),inset 0 1px 0 rgb(214 234 250 / .25),0 -1.5rem 4rem -2rem rgb(120 190 255 / .5)!important}
.wl-backdrop.is-open .wl-modal{transform:none!important;opacity:1;filter:none}
.wl-field label{font:500 .875rem/1.2 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:rgb(238 243 246 / .62)!important}
.wl-field input{border:0!important;border-radius:14px!important;background:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / .035))!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),0 1px 0 rgb(0 0 0 / .4)!important;transition:box-shadow .3s ease,background .3s ease}
.wl-field input:focus{background:linear-gradient(180deg,rgb(120 190 255 / .12),rgb(255 255 255 / .04))!important;box-shadow:inset 0 1px 0 rgb(214 234 250 / .35),0 0 0 1px rgb(143 179 203 / .35),0 0 1.5rem rgb(120 190 255 / .18)!important}
.wl-field input[aria-invalid="true"]{box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),0 0 0 1px rgb(214 120 110 / .6)!important}
/* R12-13 the intro left two specks under the headline: the road outlines draw as dashes with
   round caps, and a dash of zero length with a round cap still paints a dot where it waits.
   Butt caps draw nothing until the line actually moves. */
.sp-outline,.sp-outline path{stroke-linecap:butt!important}
/* R12-14 the light comes down from the sky as you scroll in: the beam is revealed from the top
   downward and the haze settles, tied to the scroll (look26.js sets --pf 0..1); the lock keeps its
   own animation */
.p2-beam,.p2-pin.lit .p2-beam{transition:none!important;opacity:clamp(0,calc(var(--pf,0) * 1.6),1)!important;transform:translate3d(0,calc((1 - var(--pf,0)) * -6%),0)!important;
  -webkit-mask:linear-gradient(#000 calc(var(--pf,0) * 115% - 15%),transparent calc(var(--pf,0) * 115%));mask:linear-gradient(#000 calc(var(--pf,0) * 115% - 15%),transparent calc(var(--pf,0) * 115%))}
/* R12-15 See it in the app: only the rows themselves scroll the list (the box is no wider than
   they are), and at either end the wheel goes back to the page */
@media(min-width:821px){
  .see-listwrap{width:min(34rem,100%)!important;overscroll-behavior:auto!important}
}

/* ---- round 13 (inbox 108) ---- */
/* R13-3 startup: the refracted light rises in earlier (index.html: LIFT .45 of the draw instead of
   .8) and over the big Tora mark instead of behind it, as on the finished page where the light
   already sits above the mark; the headline stays on top of both */
/* R13-3 startup: the refracted light comes up earlier (index.html LIFT) and above the big mark, so the
   mark's outline never shows through the light (the shader is premultiplied, so the mark still shows
   in the dark). Hidden until the rise begins; the rise animation then owns its opacity. */
html.intro-run .hero-bg{position:fixed;z-index:10000;opacity:0}
/* R13-4 privacy, re-executed. a) behind the lock, barely there, Tora's privacy architecture as
   line diagrams (every claim from privacy.html). They show only while the pointer is over the
   section, very faint everywhere and a little clearer near the pointer through a wide feathered
   mask with no edge (no disc). b) the beam no longer carries a baked lock rim. c) the particles
   are a canvas flow (look26.js). d) no grid. The overlay glare circle is gone. */
.p2-grid,.p2-fact,.p2-glare{display:none!important}
.p2-behind{opacity:0;transition:opacity .6s ease!important;
  -webkit-mask:radial-gradient(300px at var(--tx,50%) var(--ty,40%),#000 20%,transparent)!important;mask:radial-gradient(300px at var(--tx,50%) var(--ty,40%),#000 20%,transparent)!important}
.p2-pin.torch .p2-behind{opacity:.55}
.p2-dg{position:absolute;width:15rem;height:auto;overflow:visible}
.p2-dg :is(rect,path){fill:none;stroke:#8FB3CB;stroke-width:1;vector-effect:non-scaling-stroke}
.p2-dg .dn{fill:rgb(143 179 203 / .06);stroke-opacity:.7}
.p2-dg .dd{stroke-dasharray:3 3;stroke-opacity:.45}
.p2-dg .dz{stroke-dasharray:2 4;stroke-opacity:.45}
.p2-dg .dr{stroke-opacity:.8;stroke-linecap:round}
.p2-dg .dx{stroke:#EEF3F6;stroke-width:1.4;stroke-linecap:round}
.p2-dg text{font:500 10px/1 var(--sans);fill:#EEF3F6;fill-opacity:.82}
.p2-dg .dt{font-size:11px;font-weight:600;fill-opacity:.95}
.p2-dg .ds{font-size:9px;fill-opacity:.6}
/* round 15: the diagrams sit close round the lock, where the pointer naturally is */
.dg1{right:calc(50% + 12rem);top:14%}.dg2{right:calc(50% + 13rem);top:47%}.dg3{left:calc(50% + 12rem);top:15%}.dg4{left:calc(50% + 13rem);top:49%}.dg5{display:none}
@media(hover:none),(max-width:820px){.p2-behind{display:none!important}}
/* R14-5 the flow and the beacon are drawn by code on .p2-flow (look26.js): no image, no bounds */
.p2-beam{display:none!important}
/* R14-6 the clouds are the section's own background: the canvas reaches 35vh above the pinned
   section so the clouds and the light spill softly into the section above, and the pin clips only
   sideways (overflow-x: clip leaves the vertical axis visible) */
.p2-pin{overflow:visible!important;overflow-x:clip!important}
.p2-flow{position:absolute;left:0;right:0;top:-35svh;width:100%;height:calc(100% + 35svh);z-index:0;pointer-events:none}
/* the lock lights itself where the beam lands, only once it has formed (no outline beforehand) */
.privacy2 .privacy-lock{filter:drop-shadow(0 -2px 10px rgb(150 200 240 / calc(var(--p2-glow,0) * .55))) drop-shadow(0 18px 30px rgb(0 0 0 / .55))!important}
/* the drawn outline and the road fill fade down the stems exactly as the finished mark does, so
   nothing of the mark's edge shows through the light rising over it */
.sp-trace,html.intro-run .sp-roads{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 15%,transparent 95%);mask-image:linear-gradient(180deg,#000 0%,#000 15%,transparent 95%)}
/* R14-5e the lock is drawn crisp: no will-change (Chrome kept the small raster from the start of the
   scale-up and stretched it), and once face-on reveal.js leaves it with no transform at all */
.privacy2 .privacy-lock-button{will-change:auto!important}
/* the highlight on the metal is painted through a mask of the finished lock, so it used to float
   where the shackle would land before the shackle got there; it now lights only once the lock is shut */
.privacy2 .pl-hot{opacity:var(--p2-glow,0)}
/* ---- round 15 (inbox 112) ---- */
/* R15-6 alignment, measured: the food and Nova tiles were 704 and 720 px tall, so their bottoms and
   caption lines didn't meet, and the Nova circle's centre sat 27 px above the chat card's. Now both
   tiles are one height, both captions start on one line, the chat card has a fixed height (so the
   typing loop never moves it) and the circle is centred on it. */
@media(min-width:1101px){
  .w3h-a,.w3h-b{height:45rem!important;min-height:45rem!important}
  .w3h-a .w3h-cap,.w3h-b .w3h-cap{position:absolute!important;left:0;top:33rem;bottom:auto}
  .w3h-a .w3h-stage,.w3h-b .w3h-stage{position:absolute;inset:0;height:auto}
  .nb-glass{top:3.5rem!important;height:20.5rem}
  .nb-mic{translate:-50% -50%!important}
}
/* R15-4 one light for all three cards: one colour (Tora's steel light, no lilac on Nova), and one
   source, high above the gap between the food and Nova cards. Each card sees it from where it sits:
   the food card's ray comes in from the upper right, Nova's beam leans in from the upper left (and
   still lands on the circle), Auto-Load's from a little left of overhead. The lit rim of every glass
   pane is brightest on the side facing the source, and its glow falls away on the far side, so no
   two cards are lit the same. */
.w3h-a,.w3h-b,.w3h-c{--beam:140 196 240;--beam2:236 244 252}
.w3h-b{--bx:calc(24% - 1.7rem)}
.w3h-b .w3h-light::before{transform:skewX(7deg)!important;transform-origin:var(--bx) 0}
.w3h-c .w3h-light::before{transform:skewX(4deg)!important;transform-origin:var(--bx) 0}
.w3h-ray{background:linear-gradient(180deg,rgb(var(--beam2) / .95),rgb(var(--beam) / .8) 45%,rgb(var(--beam) / .4) 100%)!important}
.w3h-glass,.w3h-c .w3h-card,.al-body{--rim-l:30%;--rim-r:30%;--glow-x:0rem}
.w3h-a .w3h-glass{--rim-l:42%;--rim-r:6%;--glow-x:1.25rem}
.w3h-b .w3h-glass{--rim-l:6%;--rim-r:48%;--glow-x:-1rem}
.w3h-c .w3h-card{--rim-l:10%;--rim-r:44%;--glow-x:-.5rem}
.w3h-c .al-body{--rim-l:44%;--rim-r:8%;--glow-x:.75rem}
.w3h-glass::before,.w3h-c .w3h-card::before,.al-body::before{content:"";position:absolute;left:var(--rim-l);right:var(--rim-r);top:0;height:1.5px;border-radius:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(var(--beam2)),transparent)!important;box-shadow:0 0 1rem rgb(var(--beam))!important}
.w3h-glass{box-shadow:0 0 0 1px rgb(238 243 246 / .14),inset 0 1px 0 rgb(255 255 255 / .3),var(--glow-x) -1.5rem 3.5rem -1.25rem rgb(var(--beam) / .8),0 2rem 3.5rem rgb(0 0 0 / .7)!important}
/* R15-3 the Auto-Load panes are the food card's glass, the same material: the faint tint of the
   light at the top, frosted (the beam behind them blurs through), the lit rim facing the light and
   the inner layers of lighter glass the screen sits on */
.w3h-c .w3h-card,.al-body{padding:14px!important;border-radius:28px!important;overflow:visible!important;display:grid;gap:12px;
  background:linear-gradient(180deg,rgb(140 200 255 / .14),rgb(18 22 28 / .5) 30%,rgb(12 15 19 / .62))!important;
  backdrop-filter:blur(18px) saturate(1.1)!important;-webkit-backdrop-filter:blur(18px) saturate(1.1)!important;
  box-shadow:0 0 0 1px rgb(238 243 246 / .14),inset 0 1px 0 rgb(255 255 255 / .3),var(--glow-x) -1.5rem 3.5rem -1.25rem rgb(var(--beam) / .8),0 2rem 3.5rem rgb(0 0 0 / .7)!important}
.w3h-c .w3h-card::after{display:none!important}
.al-screen{padding:0!important;overflow:hidden;border-radius:14px!important}
.al-screen img{display:block;width:100%;height:auto;border-radius:0!important}
.w3h-dia.al-body{position:absolute;left:6%;top:12%;width:min(27%,19rem);margin:0}
.al-body-head{font-size:.9375rem!important;padding:.75rem .875rem .75rem 1rem!important}
.al-body-head em{font:600 .75rem/1 var(--sans);font-style:normal;padding:.375rem .625rem;border-radius:999px;color:#0e1114;background:linear-gradient(180deg,#e6f2fc,#8fb3cb)}
.al-figs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:1rem .75rem .75rem!important;border-radius:14px!important}
.al-figs img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 .75rem rgb(140 196 240 / .18))}
/* R15-8c no halo over the lock: the beam meets the metal with a tight contact glow (look26.js) and
   the lock keeps only a faint rim of the same light */
.privacy2 .privacy-lock{filter:drop-shadow(0 -1px 4px rgb(150 196 236 / calc(var(--p2-glow,0) * .35))) drop-shadow(0 18px 30px rgb(0 0 0 / .55))!important}
/* the typing caret in the Ask Nova pill (opacity only) */
.nb-ask span::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:rgb(238 243 246 / .8);animation:nbCaret 1.05s steps(1) infinite}
@keyframes nbCaret{50%{opacity:0}}
.nb-answer{will-change:opacity}
/* the leaning light layer reaches past the card on the side it leans from, so its slanted edge is
   never inside the card (the position is re-expressed in the wider box) */
.w3h-b .w3h-light::before{left:-14%!important;--bx:calc((24% + 14%) / 1.14 - 1.7rem)}
.w3h-c .w3h-light::before{left:-6%!important;--bx:calc((66% + 6%) / 1.06)}
.w3h-dia.al-body{width:min(24%,17rem)!important;-webkit-mask:linear-gradient(#000 70%,transparent 98%);mask:linear-gradient(#000 70%,transparent 98%)}
/* ---- round 16 (inbox 114) ---- */
/* R16-6 one gap: the top cards were 16 px apart side by side but 32 px above the card below (a stray
   1rem margin under the food tile). Every gap in the grid is now 2rem. */
.w3h{column-gap:2rem!important;row-gap:2rem!important}
.w3h-a{margin:0!important}
/* R16-7 no borders: the 1px rings round the tiles, the glass panes and their inner layers are gone;
   edges come only from the light (the lit top rim, the top highlight and the shading) */
.w3h-tile{box-shadow:none!important}
.w3h-glass,.w3h-c .w3h-card,.al-body{box-shadow:inset 0 1px 0 rgb(255 255 255 / .26),var(--glow-x) -1.5rem 3.5rem -1.25rem rgb(var(--beam) / .8),0 2rem 3.5rem rgb(0 0 0 / .7)!important}
.gl-field,.gl-entry{box-shadow:inset 0 1px 0 rgb(255 255 255 / .24),0 .75rem 1.5rem -.5rem rgb(0 0 0 / .55)!important}
.w3h-chip{box-shadow:0 0 3rem rgb(84 146 214 / .45),inset 0 1px 0 rgb(255 255 255 / .2)!important}
/* R16-3 Ask Nova keeps its own lilac light, straight down onto the circle (round 15's shared light
   is undone for this card), and the chat card beside it catches that light: a lilac tint at the top
   of its glass, its lit rim and glow in the same light, and a sheen on its inner layers from the
   side facing the beam */
.w3h-b{--beam:198 180 255!important;--beam2:255 214 236!important;--bx:24%!important}
.w3h-b .w3h-light::before{transform:none!important;left:0!important;--bx:24%}
.w3h-b .nb-glass{--rim-l:6%;--rim-r:46%;--glow-x:-1.25rem;background:linear-gradient(180deg,rgb(198 180 255 / .16),rgb(24 22 34 / .5) 32%,rgb(12 13 19 / .62))!important}
.w3h-b .nb-glass :is(.gl-field,.gl-entry){background:linear-gradient(100deg,rgb(198 180 255 / .12),rgb(198 180 255 / 0) 45%),linear-gradient(180deg,rgb(255 255 255 / .1),rgb(255 255 255 / .035))!important;
  box-shadow:inset 0 1px 0 rgb(255 236 250 / .26),0 .75rem 1.5rem -.5rem rgb(0 0 0 / .55)!important}
/* R16-5 the Nova card on one set of edges: everything inside the chat card starts and ends on the
   answer's content edges (18 px in), the label included; equal padding all round; the action pill
   has one width whatever it says, flush right, centred on the badge */
.nb-glass .w3h-glass-label{padding:.25rem 18px 0!important}
.nb-ask{padding:.875rem 18px!important}
.nb-answer{padding:18px!important}
.nb-act em{min-width:7.25rem;text-align:center;box-sizing:border-box}
.nb-why{padding:.875rem 0!important}
.nb-act{margin-top:.875rem!important}
/* R16-2 the Auto-Load screen as glass, not a screenshot: the same rows and controls as the app's
   screen, built from the food card's glass layers */
.al-ui{padding:14px!important}
.al-top{font-size:1rem!important;font-weight:500;padding:.875rem 1rem .875rem 1.125rem!important}
.al-top em{font:500 .8125rem/1 var(--sans);font-style:normal;color:rgb(238 243 246 / .7);padding:.4375rem .75rem;border-radius:999px;background:rgb(255 255 255 / .08);box-shadow:inset 0 1px 0 rgb(255 255 255 / .14)}
.al-pills{display:flex;gap:.5rem;padding:0 2px;overflow:hidden;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
.al-pills span{flex:none;font:500 .8125rem/1 var(--sans);color:rgb(238 243 246 / .78);padding:.625rem .875rem;border-radius:999px;background:linear-gradient(180deg,rgb(255 255 255 / .1),rgb(255 255 255 / .04));box-shadow:inset 0 1px 0 rgb(255 255 255 / .16)}
.al-pills span.on{display:inline-flex;align-items:center;gap:.4rem;color:#f4f8fb;background:linear-gradient(180deg,rgb(140 196 240 / .3),rgb(140 196 240 / .1));box-shadow:inset 0 1px 0 rgb(236 244 252 / .55),0 0 1.25rem rgb(140 196 240 / .35)}
.al-wand{width:.8rem;height:.8rem;border-radius:2px;background:linear-gradient(135deg,#f4f8fb,#8fb3cb);rotate:45deg;scale:.7}
.al-sets{padding:1rem 1.125rem 1.25rem!important;display:grid;gap:.375rem}
.al-note{margin:0 0 .5rem;font-size:.8125rem;line-height:1.45;color:rgb(238 243 246 / .5)}
.al-row{display:grid;grid-template-columns:2rem 1fr 4.25rem 4.25rem 2rem;align-items:center;gap:.5rem;font-size:.875rem;color:rgb(238 243 246 / .55)}
.al-head span{font-size:.75rem;font-weight:500;color:rgb(238 243 246 / .4)}
.al-chip{display:grid;place-items:center;height:2.25rem;border-radius:12px;font:600 .9375rem/1 var(--sans);color:#f1f4f7;background:linear-gradient(180deg,rgb(255 255 255 / .1),rgb(255 255 255 / .04));box-shadow:inset 0 1px 0 rgb(255 255 255 / .16)}
.al-tick{width:1.75rem;height:1.75rem;border-radius:50%;background:rgb(255 255 255 / .06);box-shadow:inset 0 1px 0 rgb(255 255 255 / .12);position:relative}
.al-tick::after{content:"";position:absolute;left:34%;top:28%;width:28%;height:40%;border:solid rgb(238 243 246 / .5);border-width:0 1.5px 1.5px 0;rotate:40deg}
.al-row.done .al-chip{background:linear-gradient(180deg,rgb(140 196 240 / .22),rgb(140 196 240 / .08));box-shadow:inset 0 1px 0 rgb(236 244 252 / .4)}
.al-row.done .al-tick{background:linear-gradient(180deg,#e6f2fc,#8fb3cb)}.al-row.done .al-tick::after{border-color:#0e1114}
.al-legend{display:flex;justify-content:center;gap:1rem;padding:.25rem 0 .125rem;font-size:.75rem;color:rgb(238 243 246 / .6)}
.al-legend i{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.375rem;vertical-align:.05em}
.al-legend .p{background:linear-gradient(180deg,#e6f4ff,#3b65a7);box-shadow:0 0 .5rem rgb(159 210 255 / .6)}.al-legend .s{background:#8fb6dc;opacity:.75}
.al-figs img{filter:drop-shadow(0 0 1rem rgb(140 196 240 / .2)) drop-shadow(0 0 .25rem rgb(238 243 246 / .08))}
/* the figures sized so the legend under them stays in view above the caption */
.w3h-dia.al-body{-webkit-mask:none!important;mask:none!important}
.al-figs img{max-height:min(13.5rem,30vh);width:auto!important;justify-self:center}
/* R16-10 (inbox 115) the big PRO carries more of the chrome steel blue: the same restrained fall,
   now from a pale steel at the top through Chrome Steel (#8FB3CB) to a deep steel blue at the foot */
.pro-title .tpro-p::before,.tpro-chrome .tpro-p::before{
  background-image:linear-gradient(104deg,transparent 44%,rgb(255 255 255 / .26) 50%,transparent 56%),linear-gradient(in oklab 180deg,#e4eef5 0%,#b9d1e2 30%,#8fb3cb 62%,#5f86a6 100%)!important}
.pro-title .tpro-p,.tpro-chrome .tpro-p{color:#9fbdd1!important;-webkit-text-fill-color:#9fbdd1!important}
/* R16-12 the nav's member button reads "Join" at every width */
#siteHeader .nav-join .cta-long{display:none}#siteHeader .nav-join .cta-short{display:inline}
#siteHeader .nav-join{font-size:.8125rem;height:2rem;padding:0 .1875rem 0 .875rem;gap:.5rem}#siteHeader .nav-join .icon{width:1.625rem;height:1.625rem}
/* R16-7/8 Nova's answers: four panes stacked in one cell (the card is always as tall as the largest,
   so nothing overflows at any width); the active one fades in. A skeleton shimmers while Nova
   thinks (background-position only). Each answer carries a small visual of the numbers it used; the
   small nova wordmark is gone (the big mark is beside it); the source line says what it read. */
.nb-answer{display:grid!important;padding:18px!important}
.nb-a{grid-area:1/1;display:flex;flex-direction:column;min-width:0;opacity:0;visibility:hidden;transition:opacity .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s,translate .45s cubic-bezier(.22,1,.36,1);translate:0 4px}
.nb-a.on{opacity:1;visibility:visible;translate:none;transition:opacity .45s cubic-bezier(.22,1,.36,1),visibility 0s,translate .45s cubic-bezier(.22,1,.36,1)}
.nb-answer.thinking .nb-a{opacity:0;visibility:hidden}
.nb-a p{margin:0 0 .875rem!important;font:500 clamp(.9375rem,1.15vw,1.0625rem)/1.4 var(--sans)!important;color:#f4f7fa}
.nb-vis{margin:0;padding:.75rem 0;border-top:1px solid rgb(255 255 255 / .07);border-bottom:1px solid rgb(255 255 255 / .07);flex:1;min-height:0}
.nb-vis figcaption{font:500 .75rem/1 var(--sans);color:rgb(238 243 246 / .5);margin-bottom:.5rem}
.nv-bars{display:grid;gap:.375rem}
.nv-bars div{display:grid;grid-template-columns:5.5rem 1fr 2.25rem;align-items:center;gap:.5rem;font-size:.75rem;color:rgb(238 243 246 / .7)}
.nv-bars i{height:.375rem;border-radius:999px;background:rgb(255 255 255 / .07);position:relative;overflow:hidden}
.nv-bars i::after{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(var(--v));background:linear-gradient(90deg,#8fb3cb,#c6b4ff)}
.nv-bars em{font-style:normal;text-align:right;color:rgb(238 243 246 / .55)}
.nv-macro{display:grid;grid-template-columns:4.5rem auto 1fr;align-items:center;gap:.875rem}
.nv-ring{width:4.5rem;height:4.5rem;rotate:-90deg}
.nv-ring circle{fill:none;stroke-width:5}.nv-ring .t{stroke:rgb(255 255 255 / .06)}.nv-ring .p{stroke:#e8a48f}.nv-ring .c{stroke:#8ab4ef}.nv-ring .f{stroke:#e6cf7a}
.nv-mc b{display:block;font:500 1.375rem/1 'Orbitron',sans-serif;color:#eef3f6}.nv-mc span{font-size:.75rem;color:rgb(238 243 246 / .55)}
.nv-macro ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;font-size:.75rem;color:rgb(238 243 246 / .7);justify-self:end}
.nv-macro li::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.375rem;vertical-align:.02em}
.nv-macro li.p::before{background:#e8a48f}.nv-macro li.c::before{background:#8ab4ef}.nv-macro li.f::before{background:#e6cf7a}
.nv-week{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:.375rem}
.nv-week span{display:grid;place-items:center;height:2.25rem;border-radius:10px;font:500 .75rem/1 var(--sans);color:rgb(238 243 246 / .45);background:rgb(255 255 255 / .04)}
.nv-week .on{color:#eef3f6;background:rgb(143 179 203 / .16)}
.nv-week .was{color:rgb(238 243 246 / .35);background:none;box-shadow:inset 0 0 0 1px rgb(143 179 203 / .25)}
.nv-week .now{color:#0e1114;background:linear-gradient(180deg,#e6f2fc,#c6b4ff);box-shadow:0 0 1rem rgb(198 180 255 / .4)}
.nv-swap{display:grid;grid-template-columns:3.25rem 1fr;align-items:center;gap:1rem}
.nv-fig{position:relative;height:5.25rem}.nv-fig img{height:100%;width:auto;display:block;margin:auto}
.nv-pin{position:absolute;left:66%;top:21%;width:.625rem;height:.625rem;border-radius:50%;background:#c6b4ff;box-shadow:0 0 0 3px rgb(198 180 255 / .25),0 0 .75rem #c6b4ff}
.nv-sw{display:grid;justify-items:start;gap:.25rem;font-size:.8125rem}
.nv-sw span{padding:.375rem .625rem;border-radius:999px;background:rgb(255 255 255 / .06)}
.nv-sw .from{color:rgb(238 243 246 / .45);text-decoration:line-through;text-decoration-color:rgb(238 243 246 / .3)}
.nv-sw .to{color:#0e1114;background:linear-gradient(180deg,#e6f2fc,#c6b4ff)}
.nv-sw i{font-style:normal;color:rgb(238 243 246 / .4);padding-left:.75rem}
.nb-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.875rem}
.nb-foot span{font-size:.75rem;color:rgb(238 243 246 / .5)}
.nb-foot em{flex:none;font:600 .8125rem/1 var(--sans);font-style:normal;padding:.5rem .875rem;border-radius:999px;color:#0e1114;background:linear-gradient(180deg,#f4f8fb,#c9d6e0);min-width:7.25rem;text-align:center}
.nb-skel{grid-area:1/1;display:grid;align-content:start;gap:.625rem;opacity:0;transition:opacity .3s ease;pointer-events:none}
.nb-answer.thinking .nb-skel{opacity:1}
.nb-skel>*{display:block;height:.875rem;border-radius:999px;background:linear-gradient(90deg,rgb(255 255 255 / .05) 30%,rgb(214 200 255 / .16) 50%,rgb(255 255 255 / .05) 70%) 0 0/300% 100%;animation:nbSkel 1.4s linear infinite}
.nb-skel i.s{width:62%}.nb-skel b{height:4.5rem;border-radius:14px;margin-top:.5rem}
@keyframes nbSkel{from{background-position:100% 0}to{background-position:-200% 0}}
@media(min-width:1101px){.nb-glass{height:auto!important}}
/* R16-5 How Tora works gets the privacy section's dot matrix, quietly: a fine grid of dots behind
   the phone, visible only where a soft light from above falls on it, drifting slowly downward
   (background-position only, so it costs nothing per frame on the main thread) */
.how-stage::before{content:"";position:absolute;inset:-10% -30%;pointer-events:none;z-index:-1;
  background:radial-gradient(rgb(206 224 240 / .55) .8px,transparent 1.2px) 0 0/7px 7px,radial-gradient(40% 50% at 50% 30%,rgb(59 101 167 / .22),transparent 75%);
  -webkit-mask:radial-gradient(38% 55% at 50% 38%,#000,rgb(0 0 0 / .45) 50%,transparent 80%);mask:radial-gradient(38% 55% at 50% 38%,#000,rgb(0 0 0 / .45) 50%,transparent 80%);
  animation:howDots 14s linear infinite}
@keyframes howDots{to{background-position:0 70px,0 0}}
.how-stage{isolation:isolate}
/* R16-9 Ask Nova as engineering: what it runs on, as quiet chips under the lead */
.nova-built{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.nova-built li{font:500 .8125rem/1 var(--sans);padding:.5rem .875rem;border-radius:999px;color:rgb(238 243 246 / .78);background:linear-gradient(180deg,rgb(255 255 255 / .08),rgb(255 255 255 / .03));box-shadow:inset 0 1px 0 rgb(255 255 255 / .12)}
.nova-built li::before{content:"";display:inline-block;width:.375rem;height:.375rem;border-radius:50%;margin-right:.5rem;vertical-align:.1em;background:linear-gradient(135deg,#9ad7ff,#c6b4ff)}
/* ---- round 17 (inbox 118) ---- */
/* R17-3 "Tora Pro" in sentences; in feature lists the app's own ProTag: "PRO" in strong micro type,
   0.5 tracking, dark ink on the primary (Chrome Steel) fill, chip corners */
.see-pro{display:inline-block;margin-left:.5rem;padding:.1875rem .375rem;border-radius:6px;font:700 .625rem/1 var(--sans)!important;letter-spacing:.05em!important;color:#0e1114!important;background:linear-gradient(180deg,#e6f2fc,#8fb3cb);vertical-align:.12em}
/* R17-4 Tora Pro is mostly a still picture once formed: it now pins for about one screen of scroll
   (was 2.6 screens), and the same sequence plays inside it */
.pro{height:200svh!important}
@media(max-width:820px){.pro{height:165svh!important}}
/* R17-2 the set ticks use the app's own check glyph (ToraIcons tora.check.bold: M3 12 9 18 21 5,
   2.4 stroke, butt caps, miter joins) instead of a drawn corner */
.al-tick::after{left:22%!important;top:22%!important;width:56%!important;height:56%!important;border:0!important;rotate:none!important;background:rgb(238 243 246 / .5);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12L9 18L21 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12L9 18L21 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") center/contain no-repeat}
.al-row.done .al-tick::after{background:#0e1114}
/* R17-6 the How Tora works dots fade to nothing inside their own box (closest-side), so no edge of
   the field is ever clipped into a line */
.how-stage::before{inset:0!important;-webkit-mask:radial-gradient(closest-side at 50% 46%,#000,rgb(0 0 0 / .4) 55%,transparent 100%)!important;mask:radial-gradient(closest-side at 50% 46%,#000,rgb(0 0 0 / .4) 55%,transparent 100%)!important}
/* R17-1 Auto-Load, closer to the app: the chip's icon is the app's wand (ToraIcons tora.automation);
   the pill row has room for its lit pill's glow (no clipping); the ticks are the app's own: a grey
   filled circle with the medium check glyph, and on a done set the success green (#2FD37A) */
.al-pills{padding:6px 4px 8px!important;margin:-6px -4px -8px!important}
.al-wand{width:.9375rem;height:.9375rem;rotate:none!important;scale:none!important;background:none!important;border-radius:0!important;display:block}
.al-tick{display:grid!important;place-items:center;width:1.875rem!important;height:1.875rem!important;background:#2a2c30!important;box-shadow:none!important}
.al-tick::after{display:none!important}
.al-tick svg{width:54%;height:54%;color:#7c8188}
.al-row.done .al-tick{background:#2fd37a!important}
.al-row.done .al-tick svg{color:#fff}
.al-row.done{border-radius:12px;background:rgb(47 211 122 / .12);margin:0 -.5rem;padding:0 .5rem}
.al-row.done .al-chip{background:rgb(47 211 122 / .14)!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / .12)!important}
/* R17-2 the bodies sit straight in the pane's glass (no inner panel behind them); each is captioned
   with what it lights */
.al-figs{background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:.5rem .25rem 0!important}
.al-figs img{max-height:min(15.5rem,34vh)!important}
.al-legend{display:grid!important;grid-template-columns:1fr 1fr;text-align:center}
.al-legend span{font-size:.75rem;color:rgb(238 243 246 / .62)}
/* R17-4 Nova's answer visuals in the app's colours (Chrome Steel, success green #2FD37A, warning
   #FFC368), no lilac AI gradients; the skeleton is neutral steel */
.nv-vol{display:grid;gap:.5rem}
.nv-vol div{display:grid;grid-template-columns:5.25rem 1fr 1.75rem;align-items:center;gap:.625rem;font-size:.75rem;color:rgb(238 243 246 / .72)}
.nv-vol i{position:relative;height:.5rem;border-radius:999px;background:rgb(255 255 255 / .06)}
.nv-vol i::before{content:"";position:absolute;top:-3px;bottom:-3px;left:calc(var(--lo) * 100%);right:calc((1 - var(--hi)) * 100%);border-radius:4px;background:rgb(47 211 122 / .16);box-shadow:inset 0 0 0 1px rgb(47 211 122 / .35)}
.nv-vol i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);border-radius:999px;background:#2fd37a}
.nv-vol .low i::after{background:#ffc368}
.nv-vol em{font-style:normal;text-align:right;font-weight:600;color:#eef3f6}
.nv-bulk svg{display:block;width:100%;height:3.5rem;overflow:visible}
.nv-bulk .band{fill:rgb(47 211 122 / .14);stroke:rgb(47 211 122 / .3);stroke-width:.6;vector-effect:non-scaling-stroke}
.nv-bulk polyline{fill:none;stroke:#eef3f6;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.nv-bulk circle{fill:#2fd37a}
.nv-bulk-k{display:flex;justify-content:space-between;margin-top:.375rem;font-size:.75rem;color:rgb(238 243 246 / .5)}.nv-bulk-k b{color:#eef3f6;font-weight:600}
.nv-week .now{background:linear-gradient(180deg,#e6f2fc,#8fb3cb)!important;box-shadow:0 0 1rem rgb(143 179 203 / .4)!important}
.nv-sw .to{background:linear-gradient(180deg,#e6f2fc,#8fb3cb)!important}
.nv-pin{background:#ff6b7a!important;box-shadow:0 0 0 3px rgb(255 107 122 / .25),0 0 .75rem #ff6b7a!important}
.nb-skel>*{background:linear-gradient(90deg,rgb(255 255 255 / .05) 30%,rgb(143 179 203 / .2) 50%,rgb(255 255 255 / .05) 70%) 0 0/300% 100%!important;animation-duration:1s!important}
/* R17-3 the Nova chat card catches the mark's iridescence: its lit rim is the pearl ramp the
   spinning mark wears, and its glow is layered in the same pearl hues (static; nothing animates a
   gradient, per the iOS rule) */
.w3h-b .nb-glass::before{background:linear-gradient(90deg,transparent,#9AD7FF 18%,#C6B4FF 38%,#FFC6E3 58%,#FFE8B0 74%,#BFF0E6 88%,transparent)!important;box-shadow:0 0 .875rem rgb(198 180 255 / .7),0 0 1.75rem rgb(154 215 255 / .35)!important;left:4%!important;right:30%!important}
.w3h-b .nb-glass{box-shadow:inset 0 1px 0 rgb(255 236 250 / .3),-1.25rem -1.5rem 3.5rem -1.25rem rgb(154 215 255 / .55),.5rem -1.5rem 3.5rem -1.5rem rgb(255 198 227 / .4),0 -1rem 4rem -1.5rem rgb(198 180 255 / .6),0 2rem 3.5rem rgb(0 0 0 / .7)!important;
  background:linear-gradient(100deg,rgb(154 215 255 / .1),rgb(198 180 255 / .12) 30%,rgb(255 198 227 / .06) 55%,transparent 75%) 0 0/100% 40% no-repeat,linear-gradient(180deg,rgb(198 180 255 / .12),rgb(24 22 34 / .5) 32%,rgb(12 13 19 / .62))!important}
/* R17-7 Nova as engineering, unmissable: a glass panel right under the lead showing how an answer
   is made, from the question through Tora's algorithms and your data to an answer you can check */
.nova-eng{margin:1.75rem 0 0;padding:1.25rem 1.375rem;border-radius:22px;background:linear-gradient(180deg,rgb(198 180 255 / .1),rgb(18 20 28 / .55) 45%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgb(255 236 250 / .28),0 -1rem 3rem -1.5rem rgb(198 180 255 / .45),0 1.5rem 3rem -1.5rem rgb(0 0 0 / .6)}
.nova-eng figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;margin-bottom:1rem}
.nova-eng figcaption b{font:500 1.125rem/1.2 'Orbitron',sans-serif;letter-spacing:-.02em;color:#eef3f6}
.nova-eng figcaption span{font:500 .8125rem/1.3 var(--sans);color:#c6b4ff}
.nova-eng ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;counter-reset:ne}
.nova-eng li{counter-increment:ne;position:relative;padding:.875rem .875rem 1rem;border-radius:14px;background:linear-gradient(180deg,rgb(255 255 255 / .08),rgb(255 255 255 / .03));box-shadow:inset 0 1px 0 rgb(255 255 255 / .14)}
.nova-eng li::before{content:counter(ne);display:grid;place-items:center;width:1.375rem;height:1.375rem;margin-bottom:.625rem;border-radius:50%;font:600 .6875rem/1 var(--sans);color:#0e1114;background:linear-gradient(135deg,#9ad7ff,#c6b4ff,#ffc6e3)}
.nova-eng li:not(:last-child)::after{content:"";position:absolute;right:-.4rem;top:1.5rem;width:.5rem;height:.5rem;border:solid rgb(198 180 255 / .7);border-width:1.5px 1.5px 0 0;rotate:45deg;z-index:1}
.nova-eng li b{display:block;font:600 .875rem/1.25 var(--sans);color:#eef3f6;margin-bottom:.25rem}
.nova-eng li span{font-size:.75rem;line-height:1.4;color:rgb(238 243 246 / .6)}
@media(max-width:820px){.nova-eng ol{grid-template-columns:1fr 1fr}.nova-eng li:nth-child(2)::after{display:none}}
/* R17-8 See it in the app: category chips over the list, and the 3D phone */
.see-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.see-cats button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .5rem .5rem .875rem;border:0;border-radius:999px;cursor:pointer;font:500 .875rem/1 var(--sans);color:rgb(238 243 246 / .72);
  background:linear-gradient(180deg,rgb(255 255 255 / .08),rgb(255 255 255 / .03));box-shadow:inset 0 1px 0 rgb(255 255 255 / .12);transition:color .25s ease,box-shadow .3s ease}
.see-cats button b{min-width:1.375rem;padding:.25rem .375rem;border-radius:999px;font:600 .6875rem/1 var(--sans);background:rgb(255 255 255 / .08);text-align:center}
.see-cats button:hover{color:#eef3f6}
.see-cats button[aria-pressed="true"]{color:#0e1114;background:linear-gradient(180deg,#eef4f8,#a9c4d6);box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),0 0 1.25rem rgb(140 196 240 / .25)}
.see-cats button[aria-pressed="true"] b{background:rgb(14 17 20 / .12)}
.see-canvas3d{position:absolute;left:-15%;right:-15%;top:-6%;bottom:-6%;width:130%;height:112%;pointer-events:none;z-index:2}
.see.has-3d .see-phone .device{opacity:.001}
.see.has-3d .see-phone{transform:none!important}
/* ---- round 17, inbox 121 ---- */
/* R17-11 the Nova chat card's rim back to one soft light (the pearl band read as an odd colour
   stripe); the pearl stays in the glow beneath it */
.w3h-b .nb-glass::before{background:linear-gradient(90deg,transparent,rgb(255 236 250 / .95),transparent)!important;box-shadow:0 0 1rem rgb(198 180 255 / .7)!important;left:8%!important;right:40%!important}
/* R17-12 Nova's volume answer is the app's Weekly volume card: muscle on the left, "sets / ideal"
   on the right, a dark track with the ideal range as a muted green band and the sets as a thin
   white bar through it */
.nb-vis figcaption{display:flex;justify-content:space-between}
.nv-wv{display:grid;gap:.5rem}
.nv-wv p{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 .3125rem!important;font:500 .8125rem/1 var(--sans)!important;color:rgb(238 243 246 / .75)}
.nv-wv b{font-weight:600;color:#eef3f6}.nv-wv b em{font-style:normal;font-weight:500;color:rgb(238 243 246 / .45)}
.nv-wv i{display:block;position:relative;height:.5rem;background:#2a2c30;border-radius:2px}
.nv-wv i::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--lo) * 100%);right:calc((1 - var(--hi)) * 100%);background:#384c40}
.nv-wv i::after{content:"";position:absolute;left:0;top:50%;height:.25rem;translate:0 -50%;width:calc(min(1,var(--v)) * 100%);background:#f4f7fa;border-radius:1px}
/* R17-13 the site's own pill row (as in Everything in Tora) for the Auto-Load chips and the See it
   in the app categories: one dark pill holding them, the chosen one a light pill. Nothing clips. */
.al-pills{display:flex!important;gap:.25rem!important;width:max-content;max-width:100%;padding:.25rem!important;margin:0!important;border-radius:999px;background:rgb(255 255 255 / .06);overflow:hidden;-webkit-mask:none!important;mask:none!important}
.al-pills span{background:none!important;box-shadow:none!important;padding:.5625rem .875rem!important;color:var(--body)!important}
.al-pills span.on{color:#0b0d10!important;background:linear-gradient(180deg,#f7fafc,#e0e8ee)!important;box-shadow:inset 0 1px 0 #fff,0 .375rem 1rem -.375rem rgb(0 0 0 / .6)!important}
.see-cats{gap:.25rem!important;width:max-content;max-width:100%;padding:.25rem;border-radius:999px;background:rgb(255 255 255 / .06)}
.see-cats button{background:none!important;box-shadow:none!important;color:var(--body)!important;min-height:2.5rem}
.see-cats button[aria-pressed="true"]{color:#0b0d10!important;background:linear-gradient(180deg,#f7fafc,#e0e8ee)!important;box-shadow:inset 0 1px 0 #fff,0 .375rem 1rem -.375rem rgb(0 0 0 / .6)!important}
/* R17-14 the body maps without the lines round each muscle (they read as low quality at small
   sizes); ?outline shows them with the lines for comparison */
.al-figs img{filter:drop-shadow(0 0 1rem rgb(140 196 240 / .18))!important}
/* R17-15 no seams: Tora Pro's dark backdrop fades into the page at its top and bottom */
.pro-pin{background:linear-gradient(#141414,rgb(20 20 20 / 0) 16%,rgb(20 20 20 / 0) 84%,#141414),radial-gradient(70% 70% at 50% 48%,#05080c,#0b0e12 55%,#141414)!important}
/* R17-17 the member card wears the application card's dot matrix: fine dots lit by a soft light
   from the upper right, thinning out away from it (static) */
.mc-dots{position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgb(214 230 242 / .85) .55px,transparent .95px) 0 0/6px 6px;mix-blend-mode:screen;opacity:.7;
  -webkit-mask:radial-gradient(85% 95% at 76% -8%,#000,rgb(0 0 0 / .45) 45%,transparent 80%);mask:radial-gradient(85% 95% at 76% -8%,#000,rgb(0 0 0 / .45) 45%,transparent 80%)}
/* ---- round 18 (inbox 122) ---- */
/* R18-6 the PRO chip in the app's own PRO face: ToraDisplay (the app's Orbitron) SemiBold, 0.06
   tracking, stretched 1.16 wide, on the Chrome Steel fill */
.see-pro{font:600 .6875rem/1 'Orbitron',sans-serif!important;letter-spacing:.06em!important;padding:.25rem .5rem .25rem .4375rem!important;border-radius:7px!important}
.see-pro{display:inline-block;transform:scaleX(1.16);transform-origin:0 50%;margin-right:.25rem}
/* R18-4 Tora Pro's backdrop without a visible circle: one wide falloff in OKLab that eases from the
   deep centre to the page over the whole section (many gentle stops instead of a 70% ellipse that
   ended on an edge), and the same fade to the page at the top and bottom */
.pro-pin{background:linear-gradient(#141414,rgb(20 20 20 / 0) 22%,rgb(20 20 20 / 0) 78%,#141414),
  radial-gradient(in oklab 130% 110% at 50% 50%,#06090d 0%,#080b0f 18%,#0b0e12 36%,#0f1215 56%,#121416 76%,#141414 100%)!important}
/* R18-5 Ask Nova as an engineering diagram (after Linear's diagrams, in Tora's road lines): the
   system on the left, Nova's phone on the right. Each connection is a set of parallel lanes that
   turn on concentric arcs; they draw in when the section arrives, then a light runs along them. */
.nvd-wrap{position:relative;z-index:1;margin:0;padding:1.5rem 1.5rem 1.75rem;border-radius:28px;
  background:radial-gradient(rgb(238 243 246 / .07) .6px,transparent 1px) 0 0/14px 14px,linear-gradient(180deg,rgb(198 180 255 / .07),rgb(14 16 22 / .6) 40%);
  box-shadow:inset 0 1px 0 rgb(255 236 250 / .2),0 2rem 4rem -2rem rgb(0 0 0 / .6)}
.nvd-wrap figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;margin-bottom:1rem}
.nvd-wrap figcaption b{font:500 1.25rem/1.2 'Orbitron',sans-serif;letter-spacing:-.02em;color:#eef3f6}
.nvd-wrap figcaption span{font:500 .8125rem/1.3 var(--sans);color:#c6b4ff}
.nvd{display:block;width:100%;height:auto;overflow:visible}
.nvd .nd rect{fill:rgb(255 255 255 / .045);stroke:rgb(238 243 246 / .16);stroke-width:1;vector-effect:non-scaling-stroke}
.nvd .nd.nova rect{fill:rgb(198 180 255 / .09);stroke:rgb(214 200 255 / .45)}
.nvd .nd.eng rect{fill:rgb(143 179 203 / .07);stroke:rgb(143 179 203 / .35)}
.nvd .nd.out rect{fill:rgb(238 243 246 / .06);stroke:rgb(238 243 246 / .3)}
.nvd text{font-family:var(--sans)}
.nvd .t{font-size:15px;font-weight:600;fill:#eef3f6}
.nvd .tn{font:500 26px/1 'Orbitron',sans-serif;fill:#eef3f6;letter-spacing:-.5px}
.nvd .s{font-size:12.5px;fill:rgb(238 243 246 / .58)}.nvd .s.dim{fill:#c6b4ff;font-size:12px}
.nvd .rd{fill:none;stroke:#8fb3cb;stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:.55}
.nvd .rd.l1{opacity:.9}.nvd .rd.l0,.nvd .rd.l2{opacity:.35}
.nova-b.nvd-in .nvd .rd{animation:nvdDraw 1.4s cubic-bezier(.22,1,.36,1) var(--d) forwards}
@keyframes nvdDraw{to{stroke-dashoffset:0}}
/* the light running along the middle lanes once drawn */
.nvd .rd.l1{stroke-dasharray:.06 .94}
.nova-b.nvd-in .nvd .rd.l1{stroke:#e6dcff;animation:nvdRun 3.2s linear calc(var(--d) + 1.2s) infinite}
@keyframes nvdRun{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.nvd-pts{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;counter-reset:np}
.nvd-pts li{counter-increment:np;padding-top:.875rem;border-top:1px solid rgb(238 243 246 / .1)}
.nvd-pts li::before{content:"0" counter(np);display:block;margin-bottom:.5rem;font:500 .75rem/1 'Orbitron',sans-serif;color:#c6b4ff}
.nvd-pts b{display:block;font:600 .9375rem/1.3 var(--sans);color:#eef3f6;margin-bottom:.375rem}
.nvd-pts span{font-size:.8125rem;line-height:1.5;color:rgb(238 243 246 / .6)}
.nvb-plate{display:none!important}
@media(max-width:820px){.nvd-wrap{padding:1rem}.nvd-pts{grid-template-columns:1fr}.nvd .s{font-size:14px}}
/* R18-8 phone pass */
@media(max-width:820px){
  /* See it in the app: the category row scrolls inside the column instead of widening it */
  .see-left{min-width:0}
  .see-cats{width:auto!important;max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap!important}
  .see-cats::-webkit-scrollbar{display:none}
  .see-cats button{flex:none}
  /* How Tora works: the heading fits the screen */
  #howTitle,.how-head h2{font-size:clamp(2.25rem,11vw,3.25rem)!important;white-space:normal!important;overflow-wrap:anywhere}
  .nvd-wrap figcaption{flex-direction:column;align-items:flex-start}
}
@media(max-width:820px){.see-cats{order:2;margin:0 auto .25rem!important}}
/* ---- round 19 (inbox 129) ---- */
/* R19-4 Tora Pro: no soft falloff (it banded). The section's dark ground is one flat colour that
   starts and ends on straight full-width edges, so the change from the page reads as intended */
.pro-pin{background:#06090c!important}
.pro{background:#06090c!important}
/* R19-6 the PRO chip is simple and white: the app's PRO type, dark ink on white, no steel tint */
.see-pro{background:#f4f7fa!important;color:#0e1114!important;box-shadow:none!important}
/* Ask Nova: clean isometric packages with directional contours connecting
   logs, algorithms, Nova and the answer. */
.nvl{background:#0b0c0f!important;box-shadow:none!important;padding:1.5rem!important}
.nvl figcaption{display:grid!important;grid-template-columns:1fr;row-gap:.25rem;align-items:baseline}
.nvl figcaption span:last-child{color:rgb(238 243 246 / .45)!important}
.iso{display:block;width:100%;height:auto;overflow:visible}
.iso .f{fill:#0b0c0f;stroke:rgb(238 243 246 / .5);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso .hid{fill:none;stroke:rgb(238 243 246 / .3);stroke-width:1;stroke-dasharray:1.5 3;vector-effect:non-scaling-stroke}
.iso .gr{stroke:rgb(238 243 246 / .13);stroke-width:1;vector-effect:non-scaling-stroke}
.iso .nova .f{stroke:rgb(214 200 255 / .9)}.iso .nova .f0{fill:#100f17}
.iso .mark{stroke:#e6dcff;stroke-width:1.4;vector-effect:non-scaling-stroke}
.iso .ring{fill:none;stroke:rgb(214 200 255 / .45);stroke-dasharray:1.5 3;vector-effect:non-scaling-stroke}
.iso .lnk{stroke:#c6b4ff;stroke-width:1;stroke-dasharray:1.5 3;vector-effect:non-scaling-stroke}
.iso .lead{fill:none;stroke:rgb(238 243 246 / .3);stroke-width:1;vector-effect:non-scaling-stroke}
.iso text{font-family:var(--sans);paint-order:stroke;stroke:#0b0c0f;stroke-width:6px;stroke-linejoin:round}
.iso .lt{font-size:16px;font-weight:500;fill:var(--ink)}
.iso .ls{font-size:14px;fill:var(--body)}
.iso .flow{fill:none;stroke:var(--brand);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso .arrow{stroke-width:1.25}
.iso .core-label{font:500 20px var(--sans);fill:var(--ink)}
.iso .component-label{font:500 14px var(--sans);fill:var(--ink)}
.iso .drawing-note{font:400 11px var(--mono);letter-spacing:.65px;fill:var(--body)}
.iso .f1{fill:var(--steel-2)}
.iso .f2{fill:var(--steel-1)}
.nvd-reading{margin:1rem 0 0;font:400 var(--text-sm)/1.5 var(--sans);color:var(--body)}
/* The chip is one drawing at every width. A readable key accompanies it on small screens. */
.nvd-chip{margin-top:1.5rem}
.chip-diagram text{stroke:none}
.chip-diagram .f{stroke:#738492;stroke-width:.7}
.chip-diagram .chip-top{fill:url(#novaChipMetal)}
.chip-diagram .side-r{fill:#111820}
.chip-diagram .side-l{fill:#080c12}
.chip-diagram .chip-package .chip-top{fill:#101820}
.chip-diagram .chip-trace{fill:none;stroke:#8da5b8;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.chip-diagram .result-trace{stroke:#ada2d4}
.chip-diagram .answer-trace{stroke:#bed6ed}
.chip-diagram .chip-direction{stroke-width:1.3}
.chip-diagram .chip-symbol-line{fill:none;stroke:#c2d0dc;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chip-diagram .chip-lane{stroke-width:.65;opacity:.8}
.iso-lit.chip-diagram .chip-symbol-line{stroke:#eef6ff}
/* Each component carries one colour from Nova’s existing pearl palette. */
.chip-diagram .pillar-training,.chip-diagram .training-flow{color:#9ad7ff}
.chip-diagram .pillar-expenditure,.chip-diagram .expenditure-flow{color:#ffe8b0}
.chip-diagram .pillar-recovery,.chip-diagram .recovery-flow{color:#c6b4ff}
.chip-diagram .pillar-data,.chip-diagram .data-trace{color:#9ad7ff}
.chip-diagram .pillar-answer,.chip-diagram .answer-trace{color:#ffc6e3}
.chip-diagram .chip-pillar .chip-top{stroke:currentColor;stroke-opacity:.5}
.chip-diagram .chip-pillar .chip-symbol-line{stroke:currentColor;opacity:.85}
.chip-diagram .chip-tint{fill:currentColor;opacity:.09;pointer-events:none}
.chip-diagram .result-trace,.chip-diagram .data-trace,.chip-diagram .answer-trace{stroke:currentColor}
.chip-diagram .chip-core-pearl{fill:url(#novaChipPearl);opacity:.14;pointer-events:none}
.iso-lit.chip-diagram .chip-tint{opacity:.2}
.iso-lit.chip-diagram .chip-core-pearl{opacity:.25}
/* Rotate a fixed gradient inside the bounded top face; never animate gradient stops. */
.chip-diagram .chip-pearl-flow{display:none;transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:no-preference){
  .chip-diagram .chip-pearl-still{display:none}
  .chip-diagram .chip-pearl-flow{display:block;animation:chip-pearl-flow 24s linear infinite}
}
@keyframes chip-pearl-flow{to{transform:rotate(1turn)}}
.chip-diagram .chip-aura{fill:url(#novaChipAura);mix-blend-mode:screen}
.chip-diagram .chip-core .chip-top{fill:url(#novaChipCore)}
.chip-diagram .chip-core .side-r{fill:#373446}
.chip-diagram .chip-core .side-l{fill:#202b39}
.chip-diagram .chip-core-bloom{fill:url(#novaChipPearl);opacity:.45;filter:url(#novaChipBloom)}
.chip-diagram .chip-core-face{fill:url(#novaChipCore);stroke:url(#novaChipPearl);stroke-width:.7;vector-effect:non-scaling-stroke}
.iso-lit.chip-diagram .chip-core-face{stroke-width:1.4}
/* A regular dot matrix only on Nova. Fixed dots take colour from the moving pearl. */
.chip-diagram .chip-sparkles{opacity:.75;pointer-events:none}
.chip-diagram .chip-dot-colour{fill:url(#novaChipPearl)}
.chip-diagram .chip-dot{opacity:.55}
@media(prefers-reduced-motion:no-preference){
  .chip-diagram .chip-dot{animation:chip-dot-shimmer 6s ease-in-out infinite alternate}
  .chip-diagram .chip-dot:nth-child(2){animation-delay:-3s}
  .chip-diagram .chip-dot:nth-child(3){animation-delay:-6s}
  .chip-diagram .chip-dot:nth-child(4){animation-delay:-9s}
}
@keyframes chip-dot-shimmer{from{opacity:.25}to{opacity:.9}}
.chip-diagram .chip-nova-mark .mark{stroke:#eee5ff;stroke-width:1.4;fill:none}
.chip-diagram .chip-leader{fill:none;stroke:#788793;stroke-width:.75;vector-effect:non-scaling-stroke}
.chip-diagram .chip-port{fill:#c4cfd9}
.chip-diagram .chip-label{font:500 18px var(--sans);fill:var(--ink)}
.chip-diagram .chip-caption{font:400 13px var(--sans);fill:#9aa7b4}
.chip-diagram .chip-footer{font:400 11px var(--mono);letter-spacing:1px;fill:#b0bdc9}
.chip-diagram .question-trace{stroke:#d4c8ef;stroke-dasharray:3 4}
.chip-legend{display:none}
.iso-lit.chip-diagram .chip-trace{stroke:#eef6ff}
.nvd-pts{display:none}
/* ---- round 20 (inbox 130) ---- */
/* R20-1 Ask Nova: the diagram and the phone card are one row, level at the top and the bottom. The
   phone card carried a 2.5rem top / 1rem bottom margin from when it sat beside the tiles. */
@media(min-width:1101px){
  .nvb-grid{align-items:stretch!important}
  .nvb-phone{margin:0!important;align-self:stretch!important;height:auto!important}
}
/* ---- round 21 (inbox 131) ---- */
/* R21-1 the done set, as in the app: a green panel with room all round, the weight and reps boxes
   and the check sitting inside it, never on its edge */
.al-row.done{padding:.4375rem .625rem .4375rem .75rem!important;margin:.125rem -.75rem!important;border-radius:16px!important;background:rgb(47 211 122 / .14)!important}
.al-row.done .al-chip{background:rgb(47 211 122 / .2)!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / .14)!important}
/* R21-4 no borders on containers, anywhere: the Ask Nova cards, the food card's keyboard plate, the
   How Tora works steps and the See it in the app selection keep their light and shading but lose
   every outline ring */
.nvl{box-shadow:none!important}
.nvb-phone{box-shadow:none!important}
.w3h-kb{box-shadow:inset 0 1px 0 rgb(255 255 255 / .04)!important}
.how-step{border-color:transparent!important}
.see-item,.see-item[aria-pressed="true"]{box-shadow:inset 0 1px 0 rgb(255 255 255 / .08)!important}
.tora-glass-layer{border-color:transparent!important}
/* R21-5 Ask Nova hover: the colours visibly move. The old hover filled the word with a big radial
   gradient and nudged it a few percent, so inside the letters the colours barely changed. Now a long
   band of the pearl colours, spread wide, sweeps through the letters on a seamless loop (the band
   starts and ends on the same blue, and travels exactly one band length). background-position only. */
.nova-copy h2:hover .nw-c::after,.nova-word.lit .nw-c::after{
  background-image:linear-gradient(100deg,#9AD7FF 0%,#C6B4FF 16%,#FFC6E3 32%,#FFE8B0 48%,#BFF0E6 64%,#b8a6ff 80%,#9AD7FF 100%)!important;background-size:12em 100%!important;background-repeat:repeat-x!important;
  /* no !important on the position: important declarations beat animations, and would hold it still */
  -webkit-background-clip:text!important;background-clip:text!important;animation:nwSweep 3.6s linear infinite!important}
@keyframes nwSweep{from{background-position:0 50%}to{background-position:-12em 50%}}
/* R21-3 contour light on the isometric figures (look26.js): a lit copy under a soft pointer mask */
.iso-wrap{position:relative;display:flow-root}
.iso-wrap .iso-lit{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease;
  -webkit-mask:radial-gradient(closest-side,#000,rgb(0 0 0 / .55) 45%,transparent) no-repeat;mask:radial-gradient(closest-side,#000,rgb(0 0 0 / .55) 45%,transparent) no-repeat;
  -webkit-mask-size:var(--r,380px) var(--r,380px);mask-size:var(--r,380px) var(--r,380px)}
.iso-wrap.lit .iso-lit{opacity:1}
.iso-lit .f{stroke:#eef6ff!important;stroke-width:1.4!important}
.iso-lit .nova .f{stroke:#f2ebff!important}
.iso-lit .hid{stroke:rgb(234 244 255 / .75)!important}
.iso-lit .gr{stroke:rgb(234 244 255 / .45)!important}
.iso-lit .flow{stroke:#fff!important}
/* the lit copy keeps its labels so they stay on top of the faces under the light */
/* touch: the light drifts across, slowly */
@media(hover:none){
  .iso-wrap .iso-lit{-webkit-mask-size:55% 160%;mask-size:55% 160%;-webkit-mask-position:-60% 50%;mask-position:-60% 50%}
  .iso-wrap.sweep .iso-lit{opacity:1;animation:isoSweep 7s ease-in-out infinite alternate}
}
@keyframes isoSweep{from{-webkit-mask-position:-60% 50%;mask-position:-60% 50%}to{-webkit-mask-position:160% 50%;mask-position:160% 50%}}
/* R21-2 (narrowed in round 22: the section itself is as it was, and the athlete breaks out of the card
   again; only the photo takes the light) One app in place of four's photo, lit like the auto-adapting
   program card: the same steel light falling from above onto the photo, the
   dot matrix behind the athlete where the light lands, and the photo toned to that steel blue
   instead of a cold cyan */
.w3-lift-card{background:linear-gradient(180deg,#0e1620,#07090c 75%)!important}
.w3-lift-card img{filter:grayscale(1) brightness(.5) sepia(.55) hue-rotate(178deg) saturate(1.5) contrast(1.05)!important}
.w3-lift:hover .w3-lift-card img,.w3-lift.color-open .w3-lift-card img{filter:grayscale(1) brightness(.5) sepia(.55) hue-rotate(178deg) saturate(1.5) contrast(1.05)!important}
.w3-lift-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(rgb(206 224 240 / .55) .7px,transparent 1.1px) 0 0/7px 7px,radial-gradient(50% 55% at 55% 0,rgb(140 196 240 / .38),rgb(84 146 214 / .12) 50%,transparent 80%);
  -webkit-mask:radial-gradient(70% 80% at 55% 0,#000,rgb(0 0 0 / .45) 55%,transparent 90%);mask:radial-gradient(70% 80% at 55% 0,#000,rgb(0 0 0 / .45) 55%,transparent 90%)}
.w3-lift-card::before{content:"";position:absolute;left:30%;right:20%;top:0;height:2px;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgb(236 244 252),transparent);box-shadow:0 0 1.25rem rgb(140 196 240)}
.w3-lift-clip{z-index:3}
.w3-lift-card img,.w3-lift:hover .w3-lift-card img,.w3-lift.color-open .w3-lift-card img{filter:grayscale(1) brightness(.6) sepia(.6) hue-rotate(178deg) saturate(1.7) contrast(1.06)!important}
.w3-lift-card::after{background:radial-gradient(rgb(214 230 244 / .65) .7px,transparent 1.1px) 0 0/7px 7px,radial-gradient(in oklab 9% 60% at 55% 0,rgb(236 244 252 / .55),transparent 80%),radial-gradient(in oklab 45% 70% at 55% 0,rgb(140 196 240 / .5),rgb(84 146 214 / .16) 50%,transparent 82%)!important}
@media(max-width:700px){
  .nvl{padding:1.5rem 1rem 0!important}
  .chip-diagram .chip-callout,.chip-diagram .chip-question text,.chip-diagram .chip-footer,.chip-diagram > .chip-caption{display:none}
  .nvd-chip{margin:0 -1rem -1.25rem}
  .chip-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1rem;margin:0 0 2rem}
  .chip-legend dt{font:500 .8125rem/1.4 var(--sans);color:var(--ink)}
  .chip-legend dd{margin:.25rem 0 0;font:.8125rem/1.5 var(--sans);color:var(--body)}
}
/* ---- round 22 (inbox 132) ---- */
/* One app in place of four: no hairlines (containers never get borders), but the section keeps the
   page's own background and nothing clips it, so the athlete rises out over the card's top edge */
.w3-grid,.w3-grid>*{border:0!important}
.w3-grid{overflow:visible!important;background:none!important}
/* ---- round 23 (inbox 133) ---- */
/* R23-1 the Nova word on hover is crisp: the colour sweep stays, the soft white glow behind the
   letters does not come in (the resting pearl glow still lets go on hover, as before) */
.nova-copy h2:hover .nova-word::after,.nova-word.lit::after{opacity:0!important;text-shadow:none!important}
.nova-copy h2:hover .nw-c::after,.nova-word.lit .nw-c::after{filter:none!important;text-shadow:none!important}
/* ---- round 24 (inbox 136) ---- */
/* R24-1 Tora Pro wears the site's dot matrix (How Tora works, Privacy): the same fine 7px grid,
   brightest where the halo lights it and fading to nothing before the section's edges, drifting
   slowly (background-position only). It sits over the ring picture, screened, under the content. */
.pro-pin::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(rgb(206 224 240 / .5) .75px,transparent 1.15px) 0 0/7px 7px;
  -webkit-mask:radial-gradient(closest-side at 50% 46%,#000,rgb(0 0 0 / .5) 45%,rgb(0 0 0 / .16) 75%,transparent 100%);
  mask:radial-gradient(closest-side at 50% 46%,#000,rgb(0 0 0 / .5) 45%,rgb(0 0 0 / .16) 75%,transparent 100%);
  opacity:calc(.25 + var(--pb,1) * .65);animation:howDots 14s linear infinite}
/* R24-2 the privacy pop-up is a clean dark slab of real glass: no border, the slab itself strongly
   blurred and the page behind it only slightly blurred and dimmed */
.privacy-dialog{border:0!important;background:rgb(24 28 33 / .6)!important;
  -webkit-backdrop-filter:blur(44px) saturate(1.35) brightness(.92);backdrop-filter:blur(44px) saturate(1.35) brightness(.92);
  box-shadow:0 2.5rem 6rem -1rem rgb(0 0 0 / .55)!important}
.privacy-dialog::backdrop{background:rgb(5 8 12 / .38)!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* R24-4 Meet Tora: the light behind the phones is a round spotlight, not an oval, and it no longer
   bands: a slow gaussian falloff over many stops, with a faint grain over it that dithers the
   last 8-bit steps (the glow is only a few levels above the page, so plain stops show as rings) */
.sc-stage::before{width:min(58rem,124vw)!important;aspect-ratio:1!important;top:52%!important;
  -webkit-mask:radial-gradient(closest-side,rgb(0 0 0 / .19) 0%,rgb(0 0 0 / .1856) 8.3%,rgb(0 0 0 / .1729) 16.7%,rgb(0 0 0 / .1536) 25%,rgb(0 0 0 / .13) 33.3%,rgb(0 0 0 / .1047) 41.7%,rgb(0 0 0 / .0799) 50%,rgb(0 0 0 / .0574) 58.3%,rgb(0 0 0 / .0382) 66.7%,rgb(0 0 0 / .0231) 75%,rgb(0 0 0 / .0119) 83.3%,rgb(0 0 0 / .0044) 91.7%,transparent 100%)!important;mask:radial-gradient(closest-side,rgb(0 0 0 / .19) 0%,rgb(0 0 0 / .1856) 8.3%,rgb(0 0 0 / .1729) 16.7%,rgb(0 0 0 / .1536) 25%,rgb(0 0 0 / .13) 33.3%,rgb(0 0 0 / .1047) 41.7%,rgb(0 0 0 / .0799) 50%,rgb(0 0 0 / .0574) 58.3%,rgb(0 0 0 / .0382) 66.7%,rgb(0 0 0 / .0231) 75%,rgb(0 0 0 / .0119) 83.3%,rgb(0 0 0 / .0044) 91.7%,transparent 100%)!important}
.sc-stage::after{content:"";position:absolute;left:50%;top:52%;width:min(58rem,124vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:url(brand/grain-tile.png) 0 0/64px 64px;opacity:calc(var(--sc-glow,0) * .06);
  -webkit-mask:radial-gradient(closest-side,#000 0%,#000 88%,transparent 100%);mask:radial-gradient(closest-side,#000 0%,#000 88%,transparent 100%)}
/* R24-5 the two photos above Meet Tora match: the runner is cut at the top left, the cyclist at the
   bottom left (the same 2.75rem corner as .chamfer) */
.chamfer-bl{clip-path:polygon(0 0,100% 0,100% 100%,2.75rem 100%,0 calc(100% - 2.75rem))}
/* R24-6 What sets Tora apart on phones is a swipeable gallery (Auto-Load, the auto-adapting program,
   the complete tracker), each slide one height and snapping to the centre, with Nova as its own tile
   under it. On wider screens the gallery's wrapper steps aside (display:contents) and the grid
   keeps its old order: food and Nova side by side, the program under them. */
.w3h-dots{display:none}
@media(min-width:821px){
  .w3h-rail{display:contents}
  .w3h-d{display:none!important}
  .w3h-a,.w3h-b{grid-row:2}.w3h-c{grid-row:3}
}
@media(min-width:821px) and (max-width:1100px){.w3h-a{grid-row:2}.w3h-b{grid-row:3}.w3h-c{grid-row:4}}
@media(max-width:820px){
  .w3h-rail{grid-column:1 / -1;display:flex;gap:.75rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--gutter-wide));padding:0 var(--gutter-wide);scroll-padding:0 var(--gutter-wide);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .w3h-rail::-webkit-scrollbar{display:none}
  .w3h-rail>.w3h-tile{flex:0 0 min(86%,24rem);scroll-snap-align:center;scroll-snap-stop:always;height:auto!important;min-height:0!important}
  .w3h-rail .w3h-stage{height:25rem!important}
  .w3h-rail .w3h-cap{padding:.25rem 1.25rem 1.5rem!important;font-size:.9375rem!important}
  /* the program slide: the body and the next session; its Auto-Load card is the slide before it */
  .w3h-c:not(.w3h-d) .al-ui{display:none!important}
  .w3h-d .al-ui{top:8%!important;width:90%!important;grid-template-columns:minmax(0,1fr)!important}
  .w3h-d .al-pills{-webkit-mask:linear-gradient(90deg,#000 78%,transparent 98%);mask:linear-gradient(90deg,#000 78%,transparent 98%)}
  .w3h-d .al-sets{grid-template-columns:minmax(0,1fr)!important;padding:.875rem .875rem 1rem!important}
  .w3h-d .al-row{grid-template-columns:1.25rem minmax(0,1fr) 3.25rem 2.75rem 1.75rem!important;gap:.375rem!important;font-size:.8125rem!important}
  .w3h-dots{grid-column:1 / -1;display:flex;justify-content:center;gap:.375rem;margin:.125rem 0 .375rem}
  .w3h-dots i{width:.375rem;height:.375rem;border-radius:99px;background:rgb(238 243 246 / .24);transition:background-color .3s ease}
  .w3h-dots i.on{background:#eef3f6}
}
/* R24-7 See it in the app: the category bar is gone (look26.js no longer builds it), so phones show
   one row of pills, not two. Nothing plays at rest: every row shows its arrow and no progress mark
   (a zero-length round-capped arc drew a dot on each ring); the chosen row's ring fills only while
   a recording someone picked is playing. On phones a calm exit: the section clips its 3D phone (its
   canvas is wider than the screen), and a feature change fades the recording without a blur filter
   on the video (a filtered video flickers in iOS Safari) */
.see-ring .rv{opacity:0;transition:opacity .3s ease}
.see.engaged .see-item[aria-pressed="true"] .see-ring .rv{opacity:1}
.see:not(.engaged) .see-item[aria-pressed="true"] .see-ring .ra{opacity:1}
@media(max-width:820px){
  .see{overflow-x:clip}
  .see-phone.swap video{filter:none!important}
}
/* ---- round 25 (inbox 139) ---- */
/* R25-1 tora PRO sits exactly in the middle of its light. reveal.js puts --tx/--ty on the centre of
   the wordmark's ink (and --hx/--hy, the same point inside .pro-core); the ring picture is shifted
   by where its ring really is (fitted to the picture: 49.047% across, 48.344% down), and the halo
   and the dot field are centred on the same point */
.pro-space{translate:-49.047% calc(-48.344% - var(--po) * var(--lift,5.5rem))!important}
.pro-halo{left:var(--hx,50%)!important;top:var(--hy,50%)!important}
.pro-pin::after{-webkit-mask:radial-gradient(closest-side at var(--tx,50%) var(--ty,46%),#000,rgb(0 0 0 / .5) 45%,rgb(0 0 0 / .16) 75%,transparent 100%)!important;
  mask:radial-gradient(closest-side at var(--tx,50%) var(--ty,46%),#000,rgb(0 0 0 / .5) 45%,rgb(0 0 0 / .16) 75%,transparent 100%)!important}
/* R25-2 the dot matrix on phones is finer: every dot grid (and the dotted rings) at about 0.7 of
   its desktop pitch and dot size, so it keeps the same feel on a small screen instead of reading as
   big dots. The drifting grids keep a pitch that divides their 70px drift (5px), so the loop is seamless. */
@media(max-width:820px){
  .w3h-light::after{background:radial-gradient(rgb(238 243 246 / .55) .4px,transparent .65px) 0 0/4.2px 4.2px!important}
  .nova-b .nvb-t::after{background:radial-gradient(rgb(238 243 246 / .5) .4px,transparent .65px) 0 0/4.2px 4.2px!important}
  .nvb-phone::before{background:radial-gradient(rgb(238 243 246 / .45) .4px,transparent .65px) 0 0/4.2px 4.2px!important}
  .p2-stage::after{background:radial-gradient(rgb(238 243 246 / .5) .4px,transparent .65px) 0 0/4.2px 4.2px!important}
  .mc-dots{background:radial-gradient(rgb(214 230 242 / .85) .4px,transparent .68px) 0 0/4.2px 4.2px!important}
  .how-stage::before{background:radial-gradient(rgb(206 224 240 / .55) .56px,transparent .85px) 0 0/5px 5px,radial-gradient(40% 50% at 50% 30%,rgb(59 101 167 / .22),transparent 75%)!important}
  .pro-pin::after{background:radial-gradient(rgb(206 224 240 / .5) .53px,transparent .8px) 0 0/5px 5px!important}
  .w3-lift-card::after{background:radial-gradient(rgb(214 230 244 / .65) .5px,transparent .78px) 0 0/5px 5px,radial-gradient(in oklab 9% 60% at 55% 0,rgb(236 244 252 / .55),transparent 80%),radial-gradient(in oklab 45% 70% at 55% 0,rgb(140 196 240 / .5),rgb(84 146 214 / .16) 50%,transparent 82%)!important}
  .nvd-wrap{background:radial-gradient(rgb(238 243 246 / .07) .42px,transparent .7px) 0 0/10px 10px,linear-gradient(180deg,rgb(198 180 255 / .07),rgb(14 16 22 / .6) 40%)!important}
  .w3h-ring{-webkit-mask:radial-gradient(#000 .77px,transparent 1.12px) 0 0/4.2px 4.2px,radial-gradient(circle,transparent 25%,#000 33%,#000 52%,transparent 68%)!important;-webkit-mask-composite:source-in!important;
    mask:radial-gradient(#000 .77px,transparent 1.12px) 0 0/4.2px 4.2px intersect,radial-gradient(circle,transparent 25%,#000 33%,#000 52%,transparent 68%)!important}
  .nb-dots-ring{-webkit-mask:radial-gradient(#000 .63px,transparent .9px) 0 0/3.5px 3.5px,radial-gradient(circle,transparent 34%,#000 42%,rgb(0 0 0 / .55) 56%,transparent 70%)!important;-webkit-mask-composite:source-in!important;
    mask:radial-gradient(#000 .63px,transparent .9px) 0 0/3.5px 3.5px intersect,radial-gradient(circle,transparent 34%,#000 42%,rgb(0 0 0 / .55) 56%,transparent 70%)!important}
  .nb-warp{-webkit-mask:radial-gradient(#000 .56px,transparent .84px) 0 0/3.2px 3.2px,radial-gradient(circle,transparent 36%,#000 44%,rgb(0 0 0 / .4) 58%,transparent 70%)!important;-webkit-mask-composite:source-in!important;
    mask:radial-gradient(#000 .56px,transparent .84px) 0 0/3.2px 3.2px intersect,radial-gradient(circle,transparent 36%,#000 44%,rgb(0 0 0 / .4) 58%,transparent 70%)!important}
}
/* R25-3 every pop-up is the same clean dark glass as the privacy one: no border or rim line, the
   slab strongly blurred, the page behind only slightly blurred and dimmed. For Become a member the
   page blur moves off the backdrop element onto a layer behind the panel: a backdrop-filter on the
   backdrop itself would make it the panel's backdrop root, and the panel's own blur would then see
   only the dim overlay, never the page. The member card screen (is-dark / is-done) is unchanged. */
.wl-backdrop{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.wl-backdrop::before{content:"";position:absolute;inset:0;pointer-events:none;background:rgb(5 8 12 / .38);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:background-color .45s ease}
.wl-backdrop.is-dark::before{background:rgba(2,3,5,.93);-webkit-backdrop-filter:blur(1.25rem) saturate(.7);backdrop-filter:blur(1.25rem) saturate(.7)}
.wl-modal:not(.is-done){border:0!important;background:rgb(24 28 33 / .6)!important;
  -webkit-backdrop-filter:blur(44px) saturate(1.35) brightness(.92)!important;backdrop-filter:blur(44px) saturate(1.35) brightness(.92)!important;
  box-shadow:0 2.5rem 6rem -1rem rgb(0 0 0 / .55)!important}
.wl-modal:not(.is-done)::before,.wl-modal:not(.is-done)::after{display:none!important}
/* the page under the open panel is only slightly blurred (the 3px layer above): the old 1rem blur on
   main goes, which also keeps main from forming a stacking context (see AGENTS.md) */
body.wl-open main{filter:none!important}
/* R25-4 the privacy diagrams draw their claims: a small iPhone with the sign-in key, a padlock on
   the line and on the servers; what Nova is sent beside what it never is; a search that reaches the
   food database while who you are does not; your account's row walled off from the others; the
   Health switches you set; delete, and it is gone */
.p2-dg circle{fill:none;stroke:#8FB3CB;stroke-width:1;vector-effect:non-scaling-stroke}
.p2-dg .di{stroke:#EEF3F6;stroke-opacity:.85;stroke-linecap:round;stroke-linejoin:round}
.p2-dg .df{fill:#EEF3F6;fill-opacity:.8;stroke:none}
.p2-dg .dlk{fill:#0d1115;stroke:#EEF3F6;stroke-opacity:.85}
.p2-dg .dok{stroke:#EEF3F6;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.p2-dg .dno{stroke:#8FB3CB;stroke-opacity:.6;stroke-width:1.2;stroke-linecap:round}
.p2-dg .dmu{stroke-opacity:.45}
.p2-dg .dme{fill:rgb(143 179 203 / .12);stroke:#EEF3F6;stroke-opacity:.75}
.p2-dg .dw{stroke:#EEF3F6;stroke-width:1.6;stroke-opacity:.6}
.p2-dg .dsep{stroke-opacity:.25}
.p2-dg .dh{font-size:9px;font-weight:600;fill-opacity:.95;letter-spacing:.02em}
.p2-dg .dsb{fill-opacity:.85}
.p2-dg .don{fill:rgb(143 179 203 / .55);stroke:#8FB3CB}
.p2-dg .dknob{fill:#EEF3F6;stroke:none}.p2-dg .dknob.off{fill:#8FB3CB;fill-opacity:.55}
.p2-dg .dheart{fill:#EEF3F6;fill-opacity:.85;stroke:none}
/* R25-5 Meet Tora's light is the dithered canvas from showcase.js (.sc-glow): smooth, round, no
   grain and no bands. The old CSS glow and grain layers step aside. */
.sc-stage::before,.sc-stage::after{display:none!important}
.sc-glow{position:absolute;left:50%;top:52%;width:min(58rem,124vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:var(--sc-glow,0)}
.sc-glow canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s ease}
/* R25-6 Meet Tora on phones earns its space. The two photos above it sit side by side and hold
   still (they no longer drift toward each other), so the run-in is half as long; the phone sequence
   pins for 320svh instead of 440svh (showcase.js holds the last screen to the end there, with no fade-out), so each screen arrives with about one flick and the section
   ends as soon as the last screen has been seen. */
@media(max-width:820px){
  .manifesto .g-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:.75rem}
  .manifesto .g-wrap>*{grid-column:1 / -1}
  .manifesto .mf-photo.a{grid-column:1;width:auto;margin:var(--space-8) 0 0}
  .manifesto .mf-photo.b{grid-column:2;width:auto;margin:calc(var(--space-8) + 3.5rem) 0 0;align-self:start}
  .manifesto .mf-photo{transform:none!important}
  .showcase{height:320svh}
}
/* R25-7 What sets Tora apart on phones: Nova is a big tile under the gallery (it was a banner): the
   pearl disc in its light, then the whole conversation card in the flow under it (round 27: below
   the disc's dotted halo, so nothing behind reaches into the chat; its own grid gap between the
   question and the answer; its full height, no faded cut), the caption under them. In the program slide the glass behind the
   figures is centred and wide enough to hold them (it kept a desktop width of 72px and showed as a
   clipped corner). */
@media(max-width:820px){
  .w3h-b{display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important}
  .w3h-b .w3h-stage{position:relative!important;inset:auto!important;height:auto!important;overflow:hidden;padding:10.5rem 1rem 1.25rem}
  .w3h-b .nb-mic{left:50%!important;top:1rem!important;width:34%!important;translate:-50% 0!important}
  .w3h-b .nb-glass{display:grid!important;gap:.75rem!important;position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;translate:none!important;-webkit-mask:none!important;mask:none!important}
  .w3h-b .w3h-cap{position:relative!important;inset:auto!important;top:auto!important;padding:.25rem 1.25rem 1.5rem!important;font-size:.9375rem!important}
  .w3h-b::after{display:none!important}
  .w3h-c:not(.w3h-d) .al-body{left:50%!important;right:auto!important;translate:-50% 0!important;width:84%!important;top:5%!important}
}
/* round 169 (captain 2026-10-14): pause and play sit in the playing feature's own ring (assets/reveal.js),
   not in a button at the phone's corner. The ring keeps filling around the glyph. */
.see-ring :is(.rp,.rg){opacity:0;transition:opacity .25s ease}
.see-ring .rp{fill:none;stroke:#eef3f6;stroke-width:2;stroke-linecap:round}
.see-ring .rg{fill:#eef3f6}
.see-item.playing .see-ring .rp,.see-item.held .see-ring .rg{opacity:1}
.see-item:is(.playing,.held) .see-ring .ra{opacity:0!important}
/* ---- round 26 (inbox 140) ---- */
/* R26-A How Tora works on phones: the step number sits in the card's top-right corner and the words
   take the whole width (the number's own column left an empty strip down the card's left side) */
@media(max-width:820px){
  .how .how-step{grid-template-columns:minmax(0,1fr)!important}
  .how .how-step .n{position:absolute;top:var(--space-3);right:var(--space-4);line-height:1.4}
  .how .how-step h3{padding-right:2.5rem}
  .how .how-step p{grid-column:1!important}
}
/* R26-B How Tora works on desktop: no outline at any point. A card under the pointer, or reached by
   the keyboard, lifts by getting lighter (the keyboard focus ring becomes the same lift) */
.how-step{border-color:transparent!important;outline:0!important;box-shadow:none!important}
.how-go:focus-visible{outline:0!important}
.how-step:not(.on):hover,.how-step:not(.on):has(.how-go:focus-visible){background:rgb(var(--c-white) / .045)!important}
.how-step.on:hover,.how-step.on:has(.how-go:focus-visible){background:rgb(var(--c-white) / .075)!important}
.how-step:has(.how-go:focus-visible) h3{color:var(--ink)!important}
/* R26-C Ask Nova's tile on phones holds still. The typed question wraps to two lines and back as it
   types and deletes, so the bubble went 48 <-> 67px and the answer under it jumped 19px over and
   over (the hitch): the bubble now always keeps its two-line height. The two dotted rings no longer
   spin there (a turning fine dot grid shimmers as moire, the "bending"), and the lens ring spins
   without its blur filter, so the turn stays on the compositor. */
@media(max-width:820px){
  .w3h-b .nb-ask{min-height:4.1875rem;align-items:center}
  .w3h-b .nb-dots-ring,.w3h-b .nb-warp{animation:none!important}
  .w3h-b .nb-lens{filter:none!important}
}
/* ---- inbox 145 ---- */
/* the Ask Nova card's pearl tint ended in a hard horizontal line: it was a 100deg gradient sized to
   the top 40% of the card, so it stopped dead under the answer's first lines. It is now an ellipse
   from the top-left corner that has faded to nothing before its own edge, so it ends softly */
.w3h-b .nb-glass{background:radial-gradient(130% 55% at 0 0,rgb(154 215 255 / .1),rgb(198 180 255 / .1) 35%,rgb(255 198 227 / .045) 62%,transparent 100%),linear-gradient(180deg,rgb(198 180 255 / .12),rgb(24 22 34 / .5) 32%,rgb(12 13 19 / .62))!important}
/* the Become a founding member pop-up: the centred Tora icon (the founder went back to it, 2026-10-07) */
/* ---- How Tora works motion (founder 2026-10-06: "an easing flaw ... a little bit slow ... not
   senior design") ----
   One entrance curve for the whole section, an expo ease-out (fast start, long soft landing),
   instead of the browser's default ease. Leaving is short and accelerating, so the old step is
   gone before the new one lands. Each step reaches its shape fast, then settles over a long soft
   tail (about 1-1.3s; round 151: the founder found 0.9s too quick to settle), with a 60-80ms stagger between cards and between the parts of a card. No blur anywhere: the phone's
   screens change with opacity and a small slide only. */
:root{--how-in:cubic-bezier(.16,1,.3,1);--how-out:cubic-bezier(.4,0,1,1)}
/* the cards: out in 0.2s, in over 0.55s, staggered by position */
.how .chip-glass{transform:translate3d(0,.875rem,0);transition:opacity .2s var(--how-out),transform .2s var(--how-out)!important}
.how .chip-glass.on{transform:none;transition:opacity .5s var(--how-in) var(--hd,.04s),transform .95s var(--how-in) var(--hd,.04s)!important}
.how .chip-glass.hc-l1{--hd:.04s}.how .chip-glass.hc-r{--hd:.1s}.how .chip-glass.hc-l2{--hd:.16s}.how .chip-glass.hc-r2{--hd:.22s}
/* what is inside a card arrives right behind it */
.how .chip-glass.chart .band{transition:clip-path 1.15s var(--how-in) .14s!important}
.how .chip-glass.chart .line{transition:stroke-dashoffset 1.25s var(--how-in) .18s!important}
.how .chip-glass.chart .pt{transition:opacity .25s var(--how-in) calc(.3s + var(--d) * .1s)!important}
.how .chip-glass.chart text{transition:opacity .3s var(--how-in) .42s!important}
.how .chip-glass.chart text.wk{transition-delay:.24s!important}
.how .chip-glass.chart .dot{transition:opacity .25s var(--how-in) .7s!important}
.how .chip-glass.chart.on .ping{animation-delay:.85s!important}
.how .hw-slider i{transition:transform 1s var(--how-in) .18s!important}
.how .hw-body img{transition:opacity .45s var(--how-in) .12s,transform .9s var(--how-in) .12s!important}
.how .hw-body .dm-range i{transition:transform .9s var(--how-in) .22s!important}
.how .hw-stages rect{transition:opacity .3s var(--how-in) calc(.16s + var(--d) * .04s),transform .6s var(--how-in) calc(.16s + var(--d) * .04s)!important}
.how .hw-dial .dv{transition:stroke-dasharray 1.3s var(--how-in) .14s!important}
.how .hw-debt .dm-nights i{transition:transform .55s var(--how-in) calc(.3s + var(--n,0) * .05s)!important}
.how .tg-goal i+i{transition-delay:.18s!important}
.how .scan-photo img{transition:filter .6s var(--how-in) .12s!important}
/* the steps list: the description opens quickly and settles */
.how .how-step h3{transition:color .3s var(--how-in)!important}
.how .how-step p{transition:max-height .7s var(--how-in),opacity .4s var(--how-in) .06s,margin-top .7s var(--how-in)!important}
@media(max-width:820px){.how .how-step{transition:opacity .3s var(--how-in)!important}}
/* the phone's screen: a short cross-fade with a 2% slide, no blur */
.how .device .screen img{transition:opacity .4s var(--how-in),transform .75s var(--how-in)!important}
.how .device .screen img.is-off{transform:translate3d(0,2%,0) scale(.985)!important;filter:contrast(1.04) saturate(1.06)!important}
/* Tora Pro's dot matrix is drawn by assets/pro-dots.js (uneven, drifting light and the icon flash);
   the even CSS grid steps aside */
.pro-pin::after{display:none!important}
.pro-dots{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen}
/* "founding price" is a highlighted term: hover or focus it (tap on phones) for what it means.
   The explanation is a small dark glass card above the words. */
.fp-wrap{position:relative;display:inline-block}
.fp-term{all:unset;cursor:help;font-weight:600;color:#eef3f6;background:linear-gradient(90deg,#9AD7FF,#C6B4FF 50%,#9AD7FF) 0 100%/100% 1px no-repeat;padding-bottom:1px;transition:color .2s var(--how-in,ease)}
.fp-term:hover,.fp-term:focus-visible,.fp-wrap.open .fp-term{color:#fff;background-size:100% 2px}
.fp-term:focus-visible{outline:2px solid #8FB3CB;outline-offset:3px;border-radius:4px}
.fp-tip{position:absolute;left:50%;bottom:calc(100% + .625rem);z-index:20;width:min(18rem,80vw);padding:.875rem 1rem;border-radius:12px;
  font:400 .875rem/1.45 var(--sans);color:rgb(238 243 246 / .9);text-align:left;white-space:normal;
  background:rgb(24 28 33 / .9);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);box-shadow:0 1rem 2.5rem -.5rem rgb(0 0 0 / .6);
  opacity:0;pointer-events:none;transform:translate3d(-50%,.375rem,0);transition:opacity .18s cubic-bezier(.4,0,1,1),transform .18s cubic-bezier(.4,0,1,1)}
.fp-wrap:hover .fp-tip,.fp-term:focus-visible+.fp-tip,.fp-wrap.open .fp-tip{opacity:1;pointer-events:auto;transform:translate3d(-50%,0,0);transition:opacity .28s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)}
/* the note under the features list: two balanced lines */
.ft-note{max-width:44rem!important;text-wrap:balance}
/* the near clouds in front of the lock (look26.js); same box as the far ones, above the lock */
.p2-front{position:absolute;left:0;right:0;top:-35svh;width:100%;height:calc(100% + 35svh);z-index:2;pointer-events:none}
/* ---- inbox 151 ---- */
/* F. Connect Apple Health: each knob is centred in its track (centred from the middle, not placed
   2px from the top, and its shadow no longer falls below it), and the toggles end the same distance
   from the card's right edge as the icons start from its left */
.hw-health .tog::after{top:50%!important;translate:0 -50%!important;box-shadow:0 0 2px rgb(0 0 0 / .4)!important}
.hw-health .on .tog::after,.on .hw-health .tog::after,.hw-health.on .tog::after{translate:.75rem -50%!important}
.how .chip-glass.hw-health{padding-right:var(--space-3)!important}
@media(max-width:820px){.hw-health.on .tog::after,.on .hw-health .tog::after{translate:.625rem -50%!important}}
/* D. Calibrate's food bar fills like Record's range: the three macro segments are revealed as one bar
   sweeping left to right (one clip), on the same curve and timing, instead of three separate bars
   each with its own delay (the last one finished 0.6s after everything else) */
.how .hw-target .viz.macros i{transform:none!important;transition:none!important}
.how .hw-target .viz.macros{clip-path:inset(0 100% 0 0);transition:clip-path .2s var(--how-out)}
.how .hw-target.on .viz.macros{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--how-in) .22s}
/* E. the cards move without scaling, so the glass and its text stay crisp the whole way (a scaled card
   was drawn from a stretched copy and redrawn sharp when it stopped: the late "render") */
/* B. the hero headline sets itself: each line's characters rise from behind the line's edge, 22ms
   apart, on an expo ease-out (no underline: the founder didn't want one).
   Only during the intro; the old pen-stroke mask (a gradient property animation) is retired. */
html.intro-run .hero-center h1 .hl{-webkit-mask-image:none!important;mask-image:none!important;animation:none!important;position:relative;overflow:hidden;vertical-align:top;padding:0 .08em .14em;margin:0 -.08em -.14em}
html.intro-run .hero-center h1 .hc{display:inline-block;white-space:pre;transform:translate3d(0,108%,0);opacity:0}
html.intro-run.script-play .hero-center h1 .hc{animation:heroChar .62s cubic-bezier(.16,1,.3,1) calc(var(--l) * .14s + var(--c,0) * .022s) both}
@keyframes heroChar{0%{transform:translate3d(0,108%,0);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}
/* ---- inbox 152 ---- */
/* K. the lock's edges are drawn crisp: its paths are not promoted to their own GPU layers (a promoted
   path is rasterised once and then scaled, which stair-stepped the curves at 1x), and the button is a
   flat layer, not preserve-3d (nothing inside it is 3D). The highlight masks sit inside the metal's
   edge (index.html), so no doubled anti-aliasing fringe. */
.privacy2 .privacy-lock path,.privacy2 .privacy-lock g{will-change:auto!important}
.privacy2 .privacy-lock-button{transform-style:flat!important}
/* L. press feedback on the pills and chips that don't take you anywhere (the founder: "they feel so
   clickable... react when you click"): pressed, a pill sinks a little and brightens; released, it
   springs back. Uses the separate `scale` property, so it never fights an element's own transform.
   look26.js adds .is-pressed (also for the decorative pills inside the app drawings, which ignore the
   pointer). No outline rings; reduced motion keeps only the brightening. */
.press-able{transition:scale .42s cubic-bezier(.34,1.56,.64,1),filter .3s ease}
.press-able.is-pressed{scale:.94;filter:brightness(1.18);transition:scale .09s cubic-bezier(.2,0,.4,1),filter .09s ease}
@media(prefers-reduced-motion:reduce){.press-able,.press-able.is-pressed{scale:none!important}}
/* ---- Nova ink (inbox 134) ---- */
/* The hover's ink (assets/nova-ink.js) is drawn on this canvas while it moves; the CSS fill stays hidden
   until the letters are full, then takes over on the same frame (no fade, so nothing doubles up) */
.nw-ink{position:absolute;z-index:2;pointer-events:none;opacity:0}
.nova-word.ink-run .nw-c::after{opacity:0!important;transition:none!important}
.nova-word.ink-full .nw-c::after{transition:none!important}
/* the resting glow stays away while there is ink on the word, and comes back only once it has drained */
.nova-copy h2 .nova-word.ink-run::before,.nova-copy h2 .nova-word.ink-full::before{opacity:0!important;transition:opacity .3s ease-in!important}
/* ---- Nova ink, second pass (inbox 135) ---- */
/* the resting glow is a tight, crisp rim of the pearl colours (about 1 px of blur on the letters'
   own shape) instead of the soft 5 px haze; as the ink enters on hover it fades into the letters */
.nova-copy h2 .nova-word::before{filter:blur(.018em) saturate(1.25)!important;opacity:.9!important}
/* ---- inbox 158 ---- */
/* the founding-member pop-up opens with opacity and movement only: a filter on it (the old 6px blur
   in its entrance) switches its backdrop blur off for as long as it runs, so the page's text showed
   sharp through the panel on every open */
.wl-modal{filter:none!important;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .3s ease!important}
/* and the layer around it never fades as a whole: a parent below full opacity cuts the panel's blur
   off from the page (the panel can only blur what is inside that parent), so the page showed sharp
   through it for the first third of a second. The layer is shown and hidden with visibility; its dim
   veil and the panel fade on their own. */
.wl-backdrop{opacity:1!important;visibility:hidden;transition:visibility 0s linear .45s!important}
.wl-backdrop.is-open{visibility:visible;transition-delay:0s!important}
.wl-backdrop::before{opacity:0;transition:opacity .35s ease,background-color .45s ease}
.wl-backdrop.is-open::before{opacity:1}
.wl-modal{opacity:0}
.wl-backdrop.is-open .wl-modal{opacity:1}
/* 4. the auto-adapting program card is lit like the food card: two soft rays of the same light falling
   from above, one onto the body panel and one onto the Auto-Load card, instead of a narrow beam with a
   white core (it read as a line) plus glows round the body and the Next session chip (three sources).
   The panes keep their lit rims on the side facing each ray; the chip is lit, not a light. */
.w3h-c .w3h-light::before{background:none!important}
.w3h-c .w3h-ray{top:-3%;height:30%}
.w3h-c .w3h-ray.r1{left:9%;width:21%;transform:skewX(-14deg)}
.w3h-c .w3h-ray.r2{left:41%;width:24%;transform:skewX(-18deg)}
.w3h-c .w3h-ray.r1::after{left:55%}
.w3h-chip{box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),0 1.5rem 3rem -1rem rgb(0 0 0 / .6)!important}
.w3h-c .al-body{--glow-x:0rem}
@media(max-width:820px){
  .w3h-c .w3h-ray{height:24%}
  .w3h-c:not(.w3h-d) .w3h-ray.r1{left:24%;width:44%}
  .w3h-c:not(.w3h-d) .w3h-ray.r2{display:none}
  .w3h-d .w3h-ray.r1{display:none}
  .w3h-d .w3h-ray.r2{left:22%;width:50%}
}
/* Nova light (round 169, captain 2026-10-14: "use a real silhouette and ... a proper moving gradient
   similar to the reference"). The phone is the site's iPhone frame (grid.css .device, the same one All
   features uses), so every radius is concentric: band, bezel, screen, and each light ring here is the band
   radius plus its own offset. As in Huly's frame, light travels round a bright edge, with a softer edge,
   a wide bloom and a dot field fading out behind; its colours are the app's own Nova glow for Chrome
   Steel (AppNovaMark.glow: pearl sky, rose and aqua, captain 2026-10-14: "we need the colours to
   match"). It keeps the round-169 motion exactly: two beams with white-hot cores and dark gaps between
   them, so the light visibly travels; the sky beam replaces Huly's blue, the rose beam its orange, and
   each fades out through aqua (captain 2026-10-14: "exactly like it was before just with our colors";
   an unbroken loop of pastels read as a constant glow). The light is one conic gradient spun by transform inside each masked ring (never an animated gradient property, the iOS
   Safari leak in AGENTS.md); blur sits on the ring's parent so it spreads outside the crisp edge. It runs
   only while on screen (assets/look26.js) and stands still under Reduce Motion. */
.nvb-phone{container-type:inline-size;display:grid;place-items:start center;overflow:hidden}
.nvb-phone::before{display:none}
.nv-real{margin:0;width:100%;display:grid;justify-items:center;padding-top:clamp(3rem,11cqi,4.5rem);
  -webkit-mask:linear-gradient(#000 52%,transparent 90%);mask:linear-gradient(#000 52%,transparent 90%)}
.nv-frame{--pw:min(21rem,70cqi);--r:calc(var(--pw) * .188);position:relative;width:var(--pw)}
.nv-device{position:relative;z-index:1}
.nv-device .screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.nv-device .island{display:none}
.nr-light{position:absolute;inset:0;z-index:0;pointer-events:none;
  --nl:conic-gradient(from 200deg,rgb(154 215 255) 0deg,#f2faff 16deg,rgb(154 215 255) 38deg,rgb(191 240 230 / 0) 92deg,rgb(255 198 227 / 0) 148deg,rgb(255 198 227) 182deg,#fff4fa 198deg,rgb(255 198 227) 220deg,rgb(191 240 230 / 0) 274deg,rgb(154 215 255 / 0) 326deg,rgb(154 215 255) 360deg)}
.nr-light>i{position:absolute;display:block}
.nr-rim{inset:-1.5px;--o:1.5px;--t:2px;filter:drop-shadow(0 0 1.5px rgb(238 247 255 / .7))}
.nr-edge{inset:-4px;--o:4px;--t:7px;filter:blur(4px)}
.nr-bloom{inset:-16px;--o:16px;--t:30px;filter:blur(24px)}
.nr-ring{position:absolute;inset:0;display:block;overflow:hidden;border-radius:calc(var(--r) + var(--o));padding:var(--t);background:rgb(214 228 240 / .6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.nr-edge .nr-ring,.nr-bloom .nr-ring{background:none}
.nr-spin{position:absolute;left:50%;top:50%;width:calc(var(--pw) * 2.5);aspect-ratio:1;display:block;background:var(--nl);
  transform:translate(-50%,-50%) rotate(0deg);animation:nrSpin 9s linear infinite;animation-play-state:paused}
.nr-light.on .nr-spin{animation-play-state:running}
@keyframes nrSpin{to{transform:translate(-50%,-50%) rotate(1turn)}}
/* the dot field: the same travelling light, sampled through a 4px dot grid that fades away from the frame */
.nr-dots{inset:-4.5rem -4rem -1rem;overflow:hidden;opacity:.85;
  -webkit-mask:radial-gradient(#000 .65px,transparent .95px) 0 0/4px 4px,radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%);-webkit-mask-composite:source-in;
  mask:radial-gradient(#000 .65px,transparent .95px) 0 0/4px 4px,radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%);mask-composite:intersect}
@media(max-width:820px){
  .nv-frame{--pw:min(17rem,66cqi)}
  .nr-dots{inset:-3rem -2.5rem -1rem;-webkit-mask-size:3.4px 3.4px,auto;mask-size:3.4px 3.4px,auto}
}
@media(prefers-reduced-motion:reduce){.nr-spin{animation:none}}
/* 7. the Nova diagram reads at a glance when zoomed out: icon contours, package outlines, connectors
   and leader lines all about 1.6x heavier (they were 0.6-1px and faded at small sizes); "Your data"
   sits further from "Sleep and recovery" (index.html) */
.chip-diagram .chip-symbol-line{stroke-width:1.05!important}
.chip-diagram .f{stroke-width:1.05!important}
.chip-diagram .chip-trace{stroke-width:1.45!important}
.chip-diagram .chip-lane{stroke-width:1.05!important;opacity:.9}
.chip-diagram .chip-direction{stroke-width:1.7!important}
.chip-diagram .chip-leader{stroke-width:1.05!important}
.chip-diagram .chip-core-face{stroke-width:1.1!important}
.iso-lit.chip-diagram .chip-core-face,.iso-lit .f{stroke-width:1.7!important}
/* 5. the feature cards move a little, after Huly's cards (our own work: CSS only, transform and
   opacity, paused off screen). The light in the food and program cards sways and breathes very slowly,
   like a lamp, and Nova's disc sends soft pearl ripples outward, one after another. */
@keyframes w3hSway{0%,100%{translate:0 0;opacity:1}50%{translate:1.5% 0;opacity:.82}}
.w3h-ray{animation:w3hSway 9s cubic-bezier(.45,0,.55,1) infinite}
.w3h-c .w3h-ray.r2{animation-delay:-4.5s}
.nb-ripple{position:absolute;inset:6%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,transparent 64%,rgb(198 180 255 / .55) 76%,rgb(154 215 255 / .35) 84%,rgb(255 198 227 / .25) 90%,transparent 100%);
  animation:nbRipple 6s cubic-bezier(.16,1,.3,1) infinite}
.nb-ripple:nth-child(2){animation-delay:-2s}.nb-ripple:nth-child(3){animation-delay:-4s}
@keyframes nbRipple{0%{transform:scale(.55);opacity:0}12%{opacity:.85}100%{transform:scale(1.6);opacity:0}}
.w3h:not(.anim-on) :is(.w3h-ray,.nb-ripple){animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.w3h-ray,.nb-ripple{animation:none!important}.nb-ripple{display:none}}
/* inbox 160: the program card's two lights come from one believable place, straight above each pane,
   like lamps over a bench: the body light over the body panel, the second over the centre of the
   bench-press card (it fell in slanted from the left of it), both at the same small lean, each pane's
   lit rim centred under its light. The old single light's bloom and dust (still sitting at its old
   spot, the stray third glow) are gone, and each ray's halo stays close to it. */
.w3h-c .w3h-bloom,.w3h-c .w3h-dust{display:none!important}
.w3h-c .w3h-ray{transform:skewX(-6deg)!important}
.w3h-c .w3h-ray.r1{left:8%;width:18%}
.w3h-c .w3h-ray.r2{left:42%;width:20%}
.w3h-c .w3h-ray::after{left:45%!important}
.w3h-c .w3h-ray::before{inset:-40% -15% -20%!important}
.w3h-c .w3h-card,.w3h-c .al-body{--rim-l:28%;--rim-r:28%;--glow-x:0rem}
@media(max-width:820px){.w3h-c:not(.w3h-d) .w3h-ray.r1{left:28%;width:44%}.w3h-d .w3h-ray.r2{left:26%;width:48%}}
/* ---- inbox 163 ---- */
/* the PRO chip's letters are centred in the pill: measured on the rendered chip, the ink sat 2.25px
   left of centre (the chip is stretched to the right from its left edge) and 1px high; the padding
   now offsets both */
.see-pro{padding:4.25px 7px 3.75px 8px!important}
/* the keyboard spells it out: T, O, R and A light one after another, like the word being typed, hold
   together, then let go, on a 5s loop (the lit look sits on a layer whose opacity animates; nothing
   else repaints). Paused off screen; reduced motion keeps all four lit. */
.kk.on{isolation:isolate;position:relative;color:rgb(238 243 246 / .55)!important;background:linear-gradient(180deg,rgb(255 255 255 / .06),rgb(255 255 255 / .02))!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / .06)!important;text-shadow:none!important;
  animation:kkText 5s cubic-bezier(.16,1,.3,1) infinite;animation-delay:calc(var(--n,0) * .42s)}
.kk.on::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#22344a,#162231);box-shadow:inset 0 1px 0 rgb(214 234 250 / .55),inset 0 0 0 1px rgb(143 179 203 / .45),0 0 .75rem rgb(120 190 255 / .55),0 0 2.25rem rgb(120 190 255 / .3);
  animation:kkLit 5s cubic-bezier(.16,1,.3,1) infinite;animation-delay:calc(var(--n,0) * .42s)}
@keyframes kkLit0{0%{opacity:0}3%{opacity:1}68.0%{opacity:1}78.0%,100%{opacity:0}}
@keyframes kkText0{0%{color:rgb(238 243 246 / .55)}3%{color:#f4f9fd}68.0%{color:#f4f9fd}78.0%,100%{color:rgb(238 243 246 / .55)}}
@keyframes kkLit1{0%{opacity:0}3%{opacity:1}59.6%{opacity:1}69.6%,100%{opacity:0}}
@keyframes kkText1{0%{color:rgb(238 243 246 / .55)}3%{color:#f4f9fd}59.6%{color:#f4f9fd}69.6%,100%{color:rgb(238 243 246 / .55)}}
@keyframes kkLit2{0%{opacity:0}3%{opacity:1}51.2%{opacity:1}61.2%,100%{opacity:0}}
@keyframes kkText2{0%{color:rgb(238 243 246 / .55)}3%{color:#f4f9fd}51.2%{color:#f4f9fd}61.2%,100%{color:rgb(238 243 246 / .55)}}
@keyframes kkLit3{0%{opacity:0}3%{opacity:1}42.8%{opacity:1}52.8%,100%{opacity:0}}
@keyframes kkText3{0%{color:rgb(238 243 246 / .55)}3%{color:#f4f9fd}42.8%{color:#f4f9fd}52.8%,100%{color:rgb(238 243 246 / .55)}}
.kk.on[style*="--n:0"]{animation-name:kkText0}.kk.on[style*="--n:0"]::after{animation-name:kkLit0}
.kk.on[style*="--n:1"]{animation-name:kkText1}.kk.on[style*="--n:1"]::after{animation-name:kkLit1}
.kk.on[style*="--n:2"]{animation-name:kkText2}.kk.on[style*="--n:2"]::after{animation-name:kkLit2}
.kk.on[style*="--n:3"]{animation-name:kkText3}.kk.on[style*="--n:3"]::after{animation-name:kkLit3}
.w3h:not(.anim-on) .kk.on,.w3h:not(.anim-on) .kk.on::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.kk.on,.kk.on::after{animation:none!important}.kk.on::after{opacity:1}.kk.on{color:#f4f9fd!important}}
/* Everything in Tora on phones (founder 2026-10-11, review F15): the four chips sit in a 2 x 2 grid, all in
   view, instead of a strip that ran off the edge and cut "Nova"; the light knob moves between them */
@media(max-width:600px){
  .ft-chips:not(#\#){display:grid!important;grid-template-columns:1fr 1fr;gap:.375rem;width:auto;max-width:none;margin:0 0 var(--space-8)!important;padding:0!important;background:none!important;overflow:visible!important}
  .ft-chips:not(#\#) button{justify-content:center;min-height:2.75rem;padding:0 .75rem!important;white-space:nowrap;background:rgb(255 255 255 / .06)!important}
  .ft-chips:not(#\#) button[aria-pressed="true"]{background:none!important}
}
/* Nothing overlaps on phones (founder 2026-10-11, review F03). How Tora works: each step keeps its two
   main cards, one at the top left and one at the bottom of the stage, and its third ("far") card leaves
   the phone layout, so no card sits on another. tora PRO: the lockup no longer lifts into the input pills. */
@media(max-width:820px){
  .how .chip-glass.far:not(#\#){display:none!important}
  .how .chip-glass.hc-r:not(#\#),.how .chip-glass[data-step="2"].hc-r:not(#\#){top:auto!important;bottom:0!important}
  .pro-core:not(#\#){transform:none!important}
  .pro-stage:not(#\#){gap:var(--space-8)!important}
}
/* How Tora works between 821 and 1279px: the stage takes three of five columns, and reveal.js scales the
   phone and its cards (--fit, --fit-x) only as far as needed to keep them clear of the steps and the edge */
@media(min-width:821px){.how .how-cards:not(#\#){transform:translate(calc(-50% + var(--fit-x,0px)),-50%) scale(var(--fit,1))}}
@media(min-width:821px) and (max-width:1279px){
  .how .how-grid:not(#\#){grid-template-columns:repeat(5,minmax(0,1fr))}
  .how .how-stage:not(#\#){grid-column:3 / span 3}
}
/* the tora PRO lockup never grows wider than its column (founder 2026-10-11: nothing overlaps): at full
   size it is about 5.4 times its font size wide, so the size is held under 17.5% of the column. Wide
   screens keep 8rem; around 1024px the lockup steps down instead of running under the result cards. */
@media(min-width:821px){
  .pro-core{container-type:inline-size}
  .pro-title:not(#\#){font-size:min(clamp(3.5rem,8vw,8rem),17.5cqi)}
}
@media(min-width:821px){.pro-offer:not(#\#){max-width:min(32rem,90vw,100cqi)}}
/* short phones (an SE, or Safari with both bars showing): the expenditure chip drops its chart and keeps
   the numbers, so the step's two cards still clear each other */
@media(max-width:820px) and (max-height:740px){.how .chip-glass.chart:not(#\#) svg{display:none}}
/* tora PRO on phones: the result cards and the offer share the space under the lockup, so they take turns
   instead of crossfading on top of each other: the results leave in the first half of the rise, the offer
   arrives in the second */
@media(max-width:820px){
  .pro-outcol:not(#\#){opacity:clamp(0,calc(1 - var(--po) * 2),1)}
  .pro-offer:not(#\#){opacity:clamp(0,calc(var(--po) * 2 - 1),1)}
}
/* Type (founder 2026-10-11, review F07: "cut the ninety text styles"). Every section title takes one rung,
   --text-section (56 / 32); the hero headline, the tora PRO lockup and its price keep their own sizes, and
   the two lit statements (the system heading and the One app quote) share the 34 readout rung. All other
   real text sits on the five app sizes: 11, 13, 15, 17 and 22. */
:is(.sec-title,.w3h-title,.reel-title h2,.ft-head h2,.see-head h2,.nova-copy h2,.sc-head h2,.p2-copy h2,.cta-center h2,#faq>h2,.mf-text):not(#\#):not(#\#){font-size:var(--text-section)!important;line-height:1.05!important;letter-spacing:-.03em!important}
.how-head .sec-title:not(#\#):not(#\#){white-space:normal}
.w3-quote blockquote:not(#\#){font-size:var(--text-3xl)!important}
:is(.case-over h3,.privacy-dialog-body h2,.w3h-head p):not(#\#){font-size:var(--text-xl)!important}
:is(.w3h-cap,.w3h-cap b):not(#\#){font-size:var(--text-lg)!important}
:is(.nvx-facts dt,.nvx-facts dd,.ft-group th,.privacy-dialog-body h3,.privacy-dialog-body p,.privacy-learn):not(#\#){font-size:var(--text-body)!important}
:is(.fp-tip,.privacy-dialog-actions a,.wl-field label,.chip-legend dd,.chip-legend dt,.pro-res small):not(#\#){font-size:var(--text-sm)!important}
/* phones: nothing a reader needs is set below 11px */
@media(max-width:820px){:is(.how .chip-glass small,.pro-res small,.how-fields,.hw-scale):not(#\#){font-size:var(--text-xs)!important}}
:is(.nvd-wrap figcaption b):not(#\#){font-size:var(--text-xl)!important}
.pro-bubble:not(#\#){font-size:var(--text-sm)!important}
/* Reduce Motion: timed entrances become a short fade in place */
@media(prefers-reduced-motion:reduce){.reveal:not(#\#){transform:none!important;transition:opacity .2s ease!important}}
/* round 169 (captain 2026-10-14, "make sure that it's dynamic so that at any size it looks okay"): the
   auto-adapting program tile lays its pieces out as one centred row sized from the tile's own width,
   instead of percentage positions that let the Auto-Load card overrun its frame and cover the body diagram
   between 821 and 1280px. Wide: body, card and the Next session chip side by side. Under 62rem of tile the
   chip goes (the caption below says the same thing) and body and card share the row. The two rays are
   placed from the same widths, so each still falls on its own pane. Phones keep the rail. */
@media(min-width:821px){
  #apart .w3h-c:not(.w3h-d){container-type:inline-size;display:flex!important;flex-direction:column;justify-content:flex-start;min-height:0!important}
  #apart .w3h-c:not(.w3h-d)>:is(.w3h-stage,.w3h-light){--bw:clamp(12.5rem,22cqi,17rem);--cw:clamp(22.5rem,38cqi,28rem);--chw:clamp(13rem,19cqi,16rem);--gap:clamp(1.25rem,3cqi,3rem);
    --g:calc(var(--bw) + var(--cw) + var(--chw) + 2 * var(--gap));--x0:calc((100cqi - var(--g)) / 2)}
  #apart .w3h-c:not(.w3h-d) .w3h-stage{position:relative!important;inset:auto!important;height:auto!important;display:flex;align-items:flex-start;justify-content:center;
    gap:var(--gap);padding:clamp(4.5rem,8cqi,6.5rem) 0 0}
  #apart .w3h-c:not(.w3h-d) .w3h-week{position:absolute;inset:0}
  #apart .w3h-c:not(.w3h-d) :is(.al-body,.al-ui,.w3h-chip){position:relative!important;left:auto!important;right:auto!important;top:auto!important;translate:none!important;flex:none;margin:0}
  #apart .w3h-c:not(.w3h-d) .al-body{width:var(--bw)!important}
  #apart .w3h-c:not(.w3h-d) .al-figs img{max-height:none!important;width:100%!important}
  #apart .w3h-c:not(.w3h-d) .al-ui{width:var(--cw)!important;max-height:26rem;grid-template-columns:minmax(0,1fr)!important}
  #apart .w3h-c:not(.w3h-d) .al-pills{max-width:100%;-webkit-mask:linear-gradient(90deg,#000 84%,transparent);mask:linear-gradient(90deg,#000 84%,transparent)}
  #apart .w3h-c:not(.w3h-d) .w3h-chip{width:var(--chw)!important;margin-top:clamp(5rem,9cqi,7rem)}
  #apart .w3h-c:not(.w3h-d) .w3h-cap{position:relative!important;left:auto;bottom:auto;margin-top:calc(-1 * clamp(4rem,7cqi,5.5rem))}
  #apart .w3h-c:not(.w3h-d) .w3h-ray{top:-3%;height:clamp(9rem,16cqi,12rem)}
  #apart .w3h-c:not(.w3h-d) .w3h-ray.r1{left:calc(var(--x0) + var(--bw) * .1);width:calc(var(--bw) * .8)}
  #apart .w3h-c:not(.w3h-d) .w3h-ray.r2{left:calc(var(--x0) + var(--bw) + var(--gap) + var(--cw) * .15);width:calc(var(--cw) * .7)}
}
@container (max-width:62rem){
  #apart .w3h-c:not(.w3h-d)>:is(.w3h-stage,.w3h-light){--chw:0px;--g:calc(var(--bw) + var(--cw) + var(--gap))}
  #apart .w3h-c:not(.w3h-d) .w3h-chip{display:none}
}
/* round 169 (captain 2026-10-14, the visual hierarchy reels): One app in place of four. The statement is
   the section's one hero, set on the section-title rung; its proof sits right under it instead of at the
   far end of an empty column, so the two read as one group beside the photo. Inside the proof, colour
   is spent on one fact (kept as one record), the four apps it replaces stay a step quieter, and the
   consequence is the quietest line. The word strip below is texture, not a second headline: smaller,
   muted, and no rule line under it. */
#why-tora .w3-grid{align-items:center;column-gap:clamp(2rem,5vw,5rem)}
#why-tora .w3-quote{justify-content:center;gap:var(--space-6);padding:0 0 0 var(--space-8)!important}
#why-tora .w3-quote blockquote:not(#\#){font-size:var(--text-section)!important;line-height:1.05;letter-spacing:-.03em;max-width:none;margin:0;text-wrap:balance}
#why-tora .w3-sub{display:grid;gap:var(--space-4);max-width:34rem;margin:0;text-wrap:pretty}
#why-tora .w3-lead{font:400 var(--text-xl)/1.4 var(--sans);color:var(--body)}
#why-tora .w3-lead b{font-weight:500;color:var(--ink)}
#why-tora .w3-then{font-size:var(--text-body);line-height:1.6;color:var(--muted)}
@media(max-width:820px){
  #why-tora .w3-quote{padding:0 var(--space-6) var(--space-8)!important}
  #why-tora .w3-lead{font-size:var(--text-lg)}
}
/* round 169 (captain 2026-10-14, "why is the graph kinda scuffed"): the weigh-in trend. The target band
   now opens from the first weigh-in (0.25 to 0.5 lb a week from 180.0 lb), so the line starts exactly at
   its point and stays inside it; the line spans the full width, so 180.0 and 182.4 sit under its two
   ends; the plot takes the card's spare height instead of leaving a gap under it; and the end dot is an
   element, so it stays round however far the drawing stretches. */
.nv-bulk{display:flex;flex-direction:column}
.nv-bulk-plot{position:relative;flex:1;min-height:3.5rem;margin:.375rem .3125rem .25rem}
.nv-bulk-plot svg{position:absolute;inset:0;width:100%!important;height:100%!important}
.nv-bulk-dot{position:absolute;left:100%;top:25%;width:.5rem;height:.5rem;border-radius:50%;translate:-50% -50%;background:#2fd37a;box-shadow:0 0 0 .1875rem rgb(47 211 122 / .22)}
.nv-bulk-k{margin-top:.5rem;padding:0 .3125rem}
/* round 169 sweep (captain 2026-10-14, "at any size it looks okay"): the Privacy diagrams behind the lock
   shrink with the space beside it instead of running off the window between 821 and 863px; the founding
   price note centres on its paragraph on phones, so it never runs off the right edge. */
.p2-dg{width:clamp(11rem,50vw - 13.5rem,15rem)}
@media(max-width:820px){
  .fp-wrap{position:static}
  p:has(>.fp-wrap){position:relative}
}
/* the Nova card's answers: space, not rule lines, separates the answer, its chart and the footer (A1) */
.nb-vis{border:0!important;padding:.25rem 0 0!important;margin-top:.25rem!important}
.nb-foot{margin-top:1rem}
/* round 170 (captain 2026-10-14: "make a custom diagram for the phone version ... even the diagram has to
   change, not just the fact that it's gonna be a slideshow"). On phones the two Auto-Load slides are
   composed for a narrow screen instead of being the desktop diagram cut in two:
   - Auto-Load: the whole card fits the slide. The exercise name keeps one line (its variant chip steps
     aside), the explainer note gives its room to the sets, and the sets drop the Previous column, so all
     three sets show, the filled one first.
   - The program: the body map leads across the top, with a compact Auto-Load card (the exercise, the
     lit Auto-Load pill and the filled set) and the Next session note side by side under it: one diagram
     read top to bottom, this session then the next. */
@media(max-width:820px){
  #apart .w3h-rail>.w3h-c>.w3h-stage{height:auto!important;min-height:0}
  /* slides share one height: each diagram takes the slide's spare height and centres in it */
  #apart .w3h-rail>.w3h-c{justify-content:flex-start!important}
  #apart .w3h-rail>.w3h-c>.w3h-stage{flex:1 0 auto}
  #apart .w3h-d .w3h-stage{display:flex;flex-direction:column;justify-content:center}
  #apart .w3h-c:not(.w3h-d) .w3h-stage{align-content:center}
  /* Auto-Load slide */
  #apart .w3h-d .w3h-stage{padding:3.5rem 1rem .5rem}
  #apart .w3h-d .al-ui{position:relative!important;top:auto!important;left:auto!important;translate:none!important;width:100%!important;max-height:none;
    -webkit-mask:linear-gradient(#000 78%,transparent 100%)!important;mask:linear-gradient(#000 78%,transparent 100%)!important}
  #apart .w3h-rail :is(.al-note,.al-top em){display:none}
  #apart .w3h-rail .al-top span{font-size:.9375rem;white-space:nowrap}
  #apart .w3h-d .al-row{grid-template-columns:1.25rem minmax(0,1fr) minmax(0,1fr) 1.875rem!important;gap:.5rem!important}
  #apart .w3h-d .al-row>:nth-child(2){display:none}
  #apart .w3h-d .al-row .al-chip{justify-self:stretch;text-align:center}
  #apart .w3h-d .al-head>:is(:nth-child(3),:nth-child(4)){text-align:center}
  /* program slide: the body map across the top, the compact card and the Next session note under it */
  #apart .w3h-c:not(.w3h-d) .w3h-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.625rem;align-items:stretch;padding:3rem .875rem .75rem}
  #apart .w3h-c:not(.w3h-d) :is(.al-body,.al-ui,.w3h-chip){position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    translate:none!important;width:auto!important;margin:0;-webkit-mask:none!important;mask:none!important}
  #apart .w3h-c:not(.w3h-d) .al-body{grid-column:1 / -1;padding:.5rem!important}
  #apart .w3h-c:not(.w3h-d) .al-figs{grid-template-columns:auto auto;justify-content:center;gap:1.75rem;padding:.25rem 0 0!important}
  #apart .w3h-c:not(.w3h-d) .al-figs img{max-height:12.5rem!important;width:auto!important}
  #apart .w3h-c:not(.w3h-d) .al-ui{display:grid!important;align-content:start;gap:.5rem;padding:.5rem!important;grid-template-columns:minmax(0,1fr)!important}
  #apart .w3h-c:not(.w3h-d) .al-top{padding:.625rem .75rem!important}
  #apart .w3h-c:not(.w3h-d) .al-top span{font-size:.8125rem;white-space:normal;line-height:1.25}
  #apart .w3h-c:not(.w3h-d) .al-pills{width:auto;-webkit-mask:none;mask:none}
  #apart .w3h-c:not(.w3h-d) .al-pills>span:not(.on){display:none}
  #apart .w3h-c:not(.w3h-d) .al-pills>span.on{padding:.5rem .75rem!important;font-size:.75rem}
  #apart .w3h-c:not(.w3h-d) .al-sets{padding:.375rem .5rem!important;gap:0}
  #apart .w3h-c:not(.w3h-d) .al-sets>.al-row:not(.done){display:none}
  #apart .w3h-c:not(.w3h-d) .al-row.done{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 1.5rem!important;gap:.375rem!important;margin:0 -.25rem;padding:.25rem}
  #apart .w3h-c:not(.w3h-d) .al-row.done>:is(.al-n,.al-prev){display:none}
  #apart .w3h-c:not(.w3h-d) .al-row.done .al-chip{font-size:.8125rem;padding:.375rem 0;text-align:center}
  #apart .w3h-c:not(.w3h-d) .al-tick{width:1.5rem!important;height:1.5rem!important}
  #apart .w3h-c:not(.w3h-d) .w3h-chip{padding:.875rem}
  #apart .w3h-c:not(.w3h-d) .w3h-chip span{font-size:.875rem;line-height:1.4;display:block}
  #apart .w3h-c:not(.w3h-d) .w3h-ray{height:9rem!important;top:-2%!important}
  #apart .w3h-c:not(.w3h-d) .w3h-ray.r1{display:block!important;left:28%!important;width:44%!important}
  #apart .w3h-c:not(.w3h-d) .w3h-ray.r2{display:none!important}
}