/* neocast.us v6 (Oct 25 2026): "Your Tastebud." as a solar system.
   The welcome frame gives the copy and Start Now the room (the system sits low, a lens clears the space);
   scrolling pulls the map up, opens all forty categories, then orbits them one at a time, each with
   "Create your own tastebud." and Start Now under it. Paper and glow, one gradient accent, Manrope only.
   Hidden states live under html.motion only: without script or with reduced motion the page is finished. */

@font-face{font-family:"Manrope";src:url("fonts/manrope-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#181818; --ink-2:#3a3a3e; --mut:#6b6a70; --quiet:#8f8e95;
  --paper:#F6F3F0;
  --grad:linear-gradient(90deg,#FD9013 0%,#FD3155 34%,#E409CF 68%,#4315FF 100%);
  --acc:linear-gradient(120deg,#FD9013 0%,#FD3155 30%,#E409CF 66%,#4315FF 100%);
  --glow:radial-gradient(40% 50% at 88% 10%,rgba(253,49,85,.16),rgba(253,49,85,0) 70%),
         radial-gradient(38% 50% at 6% 92%,rgba(253,144,19,.18),rgba(253,144,19,0) 70%),
         radial-gradient(36% 46% at 70% 100%,rgba(228,9,207,.13),rgba(228,9,207,0) 70%),
         radial-gradient(34% 44% at 14% 6%,rgba(67,21,255,.07),rgba(67,21,255,0) 70%);
  --sh-acc:0 14px 30px -12px rgba(228,9,207,.50);
  --sh-pill:0 14px 30px -14px rgba(60,6,60,.40),0 2px 6px -3px rgba(60,6,60,.14);
  --sh-float:0 30px 70px -30px rgba(60,6,60,.36),0 3px 10px -4px rgba(60,6,60,.14);
  --sh-glass:inset 0 1.5px 0 rgba(255,255,255,.95),0 40px 90px -36px rgba(70,8,60,.32),0 6px 18px -8px rgba(70,8,60,.16);
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-d:clamp(44px,min(7vw,10.8vh),120px);
  --t-n:clamp(52px,min(7.4vw,11.5vh),128px);
  --t-sub:clamp(21px,min(2.3vw,3.6vh),36px);
  --m:clamp(16px,2.6vw,40px);
  --bar:68px;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-expo:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--glow);pointer-events:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid rgba(228,9,207,.6);outline-offset:4px;border-radius:999px}
::selection{background:rgba(228,9,207,.18)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- type and buttons ---------- */
.display{margin:0;font-size:var(--t-d);font-weight:800;letter-spacing:-.054em;line-height:.96;text-wrap:balance}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding:.1em .06em .2em;margin:-.1em -.06em -.2em;white-space:nowrap}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:999px;overflow:hidden;
  font-size:16px;font-weight:750;letter-spacing:-.01em;white-space:nowrap;text-decoration:none;cursor:pointer;
  color:var(--ink);background:#fff;border:1.5px solid rgba(24,24,24,.10);box-shadow:0 10px 24px -16px rgba(60,6,60,.32);
  transition:transform 160ms var(--ease-out),filter 180ms ease,box-shadow 220ms ease,opacity 260ms ease}
.btn:active{transform:scale(.97)}
/* the gradient is sized to the border box and never tiles: its far end (#4315FF) can't repeat into the left border
   as a violet sliver (Martin, Oct 29 10:55 PM). Longhands, not only the shorthand's box, so every browser agrees. */
.btn.pri{color:#fff;background:var(--acc);background-origin:border-box;background-clip:border-box;background-repeat:no-repeat;border-color:rgba(255,255,255,.4);box-shadow:var(--sh-acc),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.sm{height:42px;padding:0 18px;font-size:14.5px}
.btn.xl{height:66px;padding:0 32px 0 38px;font-size:18.5px;gap:12px}
.btn.plain{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.arw{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn.pri:hover{filter:saturate(1.15) brightness(1.05);box-shadow:0 22px 44px -14px rgba(228,9,207,.6),inset 0 1px 0 rgba(255,255,255,.35)}
  .btn:hover .arw{transform:translateX(3px)}
  .btn.plain:hover{color:var(--ink)}
}

/* ---------- header ---------- */
.bar{position:fixed;left:0;right:0;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--bar);padding-inline:var(--m);background:rgba(246,243,240,.58);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  transition:background-color 300ms ease,box-shadow 300ms ease}
.bar.solid{background:rgba(246,243,240,.74);box-shadow:0 10px 30px -24px rgba(60,6,60,.35)}
.brand{display:block;flex:none}
.brand img{height:26px;width:auto}
.bar-cta{opacity:0;transform:translateY(-6px);pointer-events:none}
.bar.cta-on .bar-cta{opacity:1;transform:none;pointer-events:auto}

/* ---------- the journey: a sticky stage holds the system while the page scrolls past it ---------- */
.journey{position:relative}
/* one screen per step; site.js moves exactly one step per scroll (welcome, pull-up, the system, each category, home) */
.step{height:100svh}
html.snap{overscroll-behavior-y:none}
.stage{position:sticky;top:0;height:100svh;margin-bottom:-100svh;overflow:hidden;z-index:0}
.stage-in{position:absolute;inset:0}
.map3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.you-tag,.clab{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;pointer-events:none}
.you-tag{font-size:104px;font-weight:800;letter-spacing:-.045em;color:#fff;text-shadow:0 6px 24px rgba(120,0,90,.35);line-height:1;transform-origin:50% 50%}
.clab{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 10px;border-radius:999px;white-space:nowrap;
  font-size:14px;font-weight:750;letter-spacing:-.01em;color:var(--ink);background:rgba(255,255,255,.95);border:1.5px solid #fff;box-shadow:var(--sh-pill)}
.clab i{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none}

/* the welcome frame: the copy has the room; the system sits low */
.welcome,.ending{position:relative;z-index:2;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  padding:calc(var(--bar) + clamp(40px,13vh,150px)) var(--m) 0;pointer-events:none}
.welcome,.ending{overflow-x:clip}   /* the soft glow behind the copy is wider than a phone */
.copy{position:relative;display:flex;flex-direction:column;align-items:center}
.copy::before{content:"";position:absolute;left:50%;top:46%;width:min(1100px,130%);height:170%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.72),rgba(255,255,255,.38) 45%,rgba(255,255,255,0) 100%)}
.welcome .btn,.ending .btn{pointer-events:auto}
.start{margin-top:clamp(26px,4.2vh,44px)}
.free{margin:12px 0 0;font-size:13.5px;font-weight:650;letter-spacing:.005em;color:var(--quiet)}
.tour .free{margin-top:10px}
.nojs-map{width:min(860px,100%);margin-top:40px}

/* the tour: one category at a time, its name, the line and Start Now under it */
.tour{position:absolute;left:0;right:0;bottom:clamp(28px,7vh,80px);z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:var(--m);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity 420ms var(--ease-out),transform 620ms var(--ease-expo),visibility 0s linear 420ms;pointer-events:none}
.tour.on{opacity:1;visibility:visible;transform:none;transition:opacity 420ms var(--ease-out),transform 620ms var(--ease-expo),visibility 0s}
.tour .btn{pointer-events:auto}
.tour-name{margin:0;font-size:var(--t-n);font-weight:800;letter-spacing:-.05em;line-height:.98;white-space:nowrap}
.tour-sub{margin:clamp(10px,1.6vh,18px) 0 0;perspective:700px;pointer-events:auto}
.sub-txt{position:relative;display:inline-block;isolation:isolate;font-size:var(--t-sub);font-weight:750;letter-spacing:-.025em;line-height:1.25;padding:.06em .1em .14em;
  --mx:50%;--my:50%;--tx:0deg;--ty:0deg;--rgb:0px;
  background:radial-gradient(110px 70px at var(--mx) var(--my),rgba(255,255,255,calc(.9 * var(--hl,0))),rgba(255,255,255,0) 72%),
             linear-gradient(96deg,#FD9013 0%,#FD3155 30%,#E409CF 62%,#4315FF 100%);
  background-size:100% 100%,100% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  transform:rotateX(var(--tx)) rotateY(var(--ty));transition:transform 220ms var(--ease-out);
  filter:drop-shadow(0 0 calc(var(--hl,0) * 12px) rgba(253,49,85,calc(var(--hl,0) * .42))) drop-shadow(0 3px calc(var(--hl,0) * 24px) rgba(228,9,207,calc(var(--hl,0) * .4)))}
/* v8 (Martin 5:21 PM): no glitch or shake on hover, just the shine; the RGB layers stay off.
   v9 (Martin, Oct 26 4:02 PM): on hover the line glows and turns toward the cursor again; still no RGB split or shake */
.sub-txt::before,.sub-txt::after{display:none;content:attr(data-text);content:attr(data-text) / "";position:absolute;inset:0;padding:inherit;z-index:-1;pointer-events:none;
  -webkit-text-fill-color:currentColor;background:none;opacity:var(--go,0);mix-blend-mode:multiply}
.sub-txt::before{color:#ff2a6d;transform:translate3d(calc(var(--rgb) * -1),calc(var(--rgb) * .25),0)}
.sub-txt::after{color:#2bd2ff;transform:translate3d(var(--rgb),calc(var(--rgb) * -.25),0)}
.tour .start{margin-top:clamp(18px,3vh,30px)}

/* the rail: a home sign, then one tick per category (forty). v8: big enough to hit, and press-and-drag scrubs */
.rail{--tick:clamp(9px,calc((100svh - var(--bar) - 220px) / 40),16px);position:absolute;left:clamp(6px,1vw,20px);top:calc(50% + var(--bar) / 2);z-index:3;display:flex;flex-direction:column;transform:translateY(-50%);
  padding:4px 0 8px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
  opacity:0;visibility:hidden;transition:opacity 400ms ease,visibility 0s linear 400ms}
.rail.on{opacity:1;visibility:visible;transition:opacity 400ms ease,visibility 0s}
.rail.scrubbing{cursor:grabbing}
.rail button{position:relative;display:block;padding:0;border:0;background:none;cursor:inherit}
.rail .tick{width:52px;height:var(--tick)}
.rail .tick::before{content:"";position:absolute;left:10px;top:calc(50% - 1.5px);width:16px;height:3px;border-radius:3px;background:rgba(24,24,24,.26);transition:width 220ms var(--ease-out),background-color 200ms ease}
.rail .tick.on::before{width:32px;background:var(--acc)}
.rail-home{width:52px;height:44px;margin-bottom:10px;cursor:pointer!important}
.rail-home svg{position:absolute;left:2px;top:4px;width:36px;height:36px;padding:8px;border-radius:50%;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(255,255,255,.72));border:1.5px solid rgba(255,255,255,.95);box-shadow:var(--sh-pill);transition:transform 200ms var(--ease-out)}
.rail button span{position:absolute;left:56px;top:50%;transform:translateY(-50%);padding:5px 11px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;color:var(--ink);
  background:#fff;box-shadow:var(--sh-pill);opacity:0;pointer-events:none;transition:opacity 160ms ease}
.rail.scrubbing .tick.on span{opacity:1}
@media (hover:hover) and (pointer:fine){ .rail .tick:hover::before{width:24px;background:rgba(24,24,24,.5)} .rail button:hover span{opacity:1} .rail-home:hover svg{transform:scale(1.06)} }

/* ---------- bottom right: Return to main above the Neocast AI chat ---------- */
.ai-btn[hidden]{display:none!important}
.dock{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2.4vh,28px);z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.home-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border-radius:999px;font-size:14.5px;font-weight:750;color:var(--ink);
  background:linear-gradient(140deg,rgba(255,255,255,.88),rgba(255,255,255,.7));-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  border:1.5px solid rgba(255,255,255,.95);box-shadow:var(--sh-glass);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity 300ms ease,transform 400ms var(--ease-out)}
.home-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dock.home-on .home-btn{opacity:1;transform:none;pointer-events:auto}
.ai-btn{position:relative;display:grid;place-items:center;width:64px;height:64px;padding:0;border-radius:50%;background:#fff;border:1.5px solid #fff;box-shadow:var(--sh-float);
  transition:transform 200ms var(--ease-out),box-shadow 220ms ease}
.ai-btn img{width:34px;height:auto}
.ai-btn::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,#FD9013,#FD3155,#E409CF,#4315FF,#FD9013);z-index:-1;opacity:.55;filter:blur(6px)}
.ai-btn:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){ .ai-btn:hover{transform:translateY(-2px)} .home-btn:hover{color:#000} }
.ai-panel{width:min(340px,calc(100vw - 32px));padding:20px 20px 16px;border-radius:26px;
  background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(255,255,255,.78));-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  border:1.5px solid rgba(255,255,255,.95);box-shadow:var(--sh-glass)}
.ai-panel[hidden]{display:none}
.ai-h{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em}
.ai-body{margin:6px 0 16px;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--ink-2)}
.ai-actions{display:flex;flex-wrap:wrap;gap:8px}

.foot{position:relative;z-index:2;display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;padding:28px calc(var(--m) + 190px) 32px var(--m);
  font-size:13px;font-weight:600;color:var(--quiet)}
.foot p{margin:0}

/* 404 */
.lost-in{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:calc(var(--bar) + 40px) var(--m) 64px}
.lost-in p{margin:0;font-size:18px;font-weight:600;color:var(--ink-2)}
.lost-in .btn{margin-top:12px}

/* no script, or no WebGL: the welcome frame with a picture of the map */
html:not(.js) .stage,html.no3d .stage{display:none}
html:not(.js) .journey,html.no3d .journey{height:auto}
html:not(.js) .welcome,html.no3d .welcome{height:auto;padding-bottom:40px}
html:not(.js) .ending,html.no3d .ending{height:auto;padding-top:24px;padding-bottom:72px}
html:not(.js) .cue,html.no3d .cue{display:none}
html:not(.js) .bar-cta{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .dock{display:none}

/* ---------- motion (only when allowed) ---------- */
@keyframes nc-rise{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}
@keyframes nc-pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes nc-bob{0%,100%{transform:none}50%{transform:translateY(3px)}}
@keyframes nc-shine{0%,62%{background-position:0 0,130% 0}100%{background-position:0 0,-30% 0}}
@keyframes nc-sheen{0%,70%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
@keyframes nc-swap{0%{opacity:0;filter:blur(10px);transform:translateY(.22em) scale(.98);text-shadow:-.08em 0 rgba(255,42,109,.7),.08em 0 rgba(43,210,255,.7)}
  55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;text-shadow:0 0 rgba(255,42,109,0),0 0 rgba(43,210,255,0)}}
html.motion .welcome .display{animation:nc-rise 820ms var(--ease-expo) both}
html.motion .welcome .start-wrap{animation:nc-pop 640ms var(--ease-out) 140ms both}
/* the headline's gradient word and the button catch the light now and then */
html.motion .shine{background:linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 62%),var(--grad);
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;animation:nc-shine 6.5s var(--ease-out) 1s infinite}
html.motion .sheen::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  animation:nc-sheen 4.8s ease-in-out 1.6s infinite;pointer-events:none}
html.motion .tour-name.swap{animation:nc-swap 620ms var(--ease-expo) both}
/* v8: fast scrolling or scrubbing: a quick plain fade, no blur or colour split */
@keyframes nc-swapq{from{opacity:.4}to{opacity:1}}
html.motion .tour-name.swap-q{animation:nc-swapq 200ms ease-out both}
html.motion .ending .copy{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-expo)}
html.motion .ending.is-in .copy{opacity:1;transform:none}
html.motion .bar-cta{transition:opacity 260ms ease,transform 360ms var(--ease-out),filter 180ms ease,box-shadow 220ms ease}
/* the jump home: a quick flash while the camera snaps back */
@keyframes nc-warp{0%{filter:none}30%{filter:blur(6px) saturate(1.6)}100%{filter:none}}
html.motion .stage.warp{animation:nc-warp 520ms ease-out}

/* ---------- short screens ---------- */
@media (max-height:720px) and (min-width:641px){
  .btn.xl{height:56px;font-size:17px}
  .welcome,.ending{padding-top:calc(var(--bar) + 8vh)}
}

/* ---------- phones ---------- */
@media (max-width:640px){
  :root{--t-d:clamp(38px,11.2vw,56px);--t-n:clamp(40px,12vw,60px);--t-sub:clamp(19px,5.4vw,24px);--bar:60px}
  .brand img{height:22px}
  .btn.sm{height:40px;padding:0 16px;font-size:14px}
  .btn.xl{height:58px;padding:0 26px 0 30px;font-size:17px}
  .welcome,.ending{padding-top:calc(var(--bar) + 13vh)}
  .tour{bottom:calc(env(safe-area-inset-bottom,0px) + 154px)}   /* clears Return to main and the chat circle */
  .clab{height:28px;padding:0 10px 0 8px;font-size:12px;gap:6px}
  .clab i{width:7px;height:7px}
  .rail{display:none}
  .ai-btn{width:56px;height:56px}
  .ai-btn img{width:30px}
  .home-btn{height:40px;font-size:13.5px;padding:0 14px 0 12px}
  .foot{flex-direction:column;font-size:12.5px;padding-right:var(--m);padding-bottom:156px}
}

/* ---------- after Start Now: choose how to begin (Martin's sketch, Oct 25 2026) ----------
   Two options. The left one (Start from Scratch) is slightly greyed with its text fully legible; the right one
   (Get A Headstart) is the vibrant Neocast option: white, gradient ring, a warm glow, real app icons, and a gentle
   pull toward the cursor. Hovering grows either; on a mouse the cursor becomes a branded ring with sparkles. */
html.pick-open{overflow:hidden}
.pick{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(26px,5.2vh,58px);
  padding:calc(var(--bar) + 24px) var(--m) 48px;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(246,243,240,.74);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25)}
.pick[hidden]{display:none}
html.motion .pick.in{animation:pick-in 380ms var(--ease-out) both}
html.motion .pick.in .pick-h{animation:nc-rise 700ms var(--ease-expo) 60ms both}
html.motion .pick.in .opt-plain{animation:opt-in 720ms var(--ease-expo) 140ms both}
html.motion .pick.in .opt-go{animation:opt-in 720ms var(--ease-expo) 220ms both}
@keyframes pick-in{from{opacity:0}to{opacity:1}}
@keyframes opt-in{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
.pick-top{position:absolute;left:0;right:0;top:0;height:var(--bar);display:flex;align-items:center;justify-content:space-between;padding:0 var(--m)}
.pick-logo{height:26px;width:auto}
.pick-x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;color:var(--ink);
  background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(255,255,255,.72));border:1.5px solid rgba(255,255,255,.95);box-shadow:var(--sh-pill);transition:transform 200ms var(--ease-out)}
.pick-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pick-x:hover{transform:scale(1.06)}
.pick-h{position:relative;z-index:2;margin:0;max-width:20ch;font-size:clamp(34px,min(5.4vw,8.4vh),76px);font-weight:800;letter-spacing:-.045em;line-height:1.04;text-align:center;color:var(--ink)}
.pick-h .gt{padding:.1em .06em .2em;margin:-.1em -.06em -.2em}
.pick-opts{position:relative;z-index:2;display:flex;gap:clamp(20px,3vw,48px);align-items:stretch;justify-content:center;perspective:1300px}
.opt{--tx:0px;--ty:0px;--rx:0deg;--ry:0deg;--sc:1;--mx:50%;--my:30%;--hl:0;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;text-align:center;text-decoration:none;color:var(--ink);
  width:clamp(280px,32vw,470px);min-height:clamp(300px,46vh,440px);padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px) clamp(28px,3.4vw,42px);border-radius:48px;
  transform:translate3d(var(--tx),var(--ty),0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc));transform-style:preserve-3d;
  transition:transform 420ms var(--ease-out),box-shadow 320ms ease,background-color 320ms ease,filter 320ms ease;will-change:transform;outline:none}
.opt:hover,.opt:focus-visible,.opt.hot{--sc:1.045}
.opt:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5.5px #E409CF}
.opt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--hl);transition:opacity 260ms ease;
  background:radial-gradient(360px circle at var(--mx) var(--my),rgba(255,255,255,.75),rgba(255,255,255,0) 60%)}
.opt-t{position:relative;white-space:nowrap;font-size:clamp(26px,2.5vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.opt-t .gt{padding:.1em .06em .2em;margin:-.1em -.06em -.2em}
.opt-s{position:relative;max-width:24ch;font-size:clamp(15px,1.2vw,18px);font-weight:600;line-height:1.38;color:var(--ink-2)}
/* the left option: slightly greyed, text still fully legible */
.opt-plain{background:#ECE9E6;border:1.5px solid rgba(24,24,24,.07);box-shadow:0 26px 60px -36px rgba(24,24,24,.28),0 2px 6px -3px rgba(24,24,24,.10)}
.opt-plain:hover,.opt-plain.hot{background:#F1EEEB}
/* the right option: the vibrant one */
.opt-go{background:#fff;box-shadow:0 36px 90px -30px rgba(228,9,207,.5),0 18px 50px -24px rgba(253,49,85,.42),0 3px 10px -4px rgba(60,6,60,.14)}
.opt-go::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2.5px;pointer-events:none;background:var(--acc);
  -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,linear-gradient(#000 0 0);mask-composite:exclude}
html.motion .opt-go{animation:opt-glow 3.2s ease-in-out infinite alternate}
html.motion .pick.in .opt-go{animation:opt-in 720ms var(--ease-expo) 220ms both,opt-glow 3.2s ease-in-out 940ms infinite alternate}
@keyframes opt-glow{from{box-shadow:0 36px 90px -30px rgba(228,9,207,.42),0 18px 50px -24px rgba(253,49,85,.34),0 3px 10px -4px rgba(60,6,60,.14)}
  to{box-shadow:0 44px 110px -28px rgba(228,9,207,.66),0 22px 60px -22px rgba(253,49,85,.55),0 3px 10px -4px rgba(60,6,60,.14)}}
.opt-go:hover,.opt-go.hot{box-shadow:0 48px 120px -26px rgba(228,9,207,.72),0 24px 64px -20px rgba(253,49,85,.6),0 3px 10px -4px rgba(60,6,60,.14);animation-play-state:paused}
/* the art above each title: empty slots on the left, real App Store icons on the right */
.opt-art{position:relative;flex:1 1 auto;width:100%;min-height:120px;margin-bottom:6px}
.opt-art > i,.opt-art > b{position:absolute;width:var(--s,58px);height:var(--s,58px);left:var(--x);top:var(--y);transform:translate(-50%,-50%);border-radius:22.5%}
.opt-plain .opt-art > i{border:2px dashed rgba(24,24,24,.18);background:rgba(255,255,255,.45)}
.opt-go .opt-art > b{background-repeat:no-repeat;box-shadow:0 10px 24px -10px rgba(24,24,24,.45),0 0 0 1px rgba(24,24,24,.06)}
html.motion .opt-go .opt-art > b{animation:opt-float 4.4s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes opt-float{from{translate:0 -4px}to{translate:0 5px}}
.opt-art > :nth-child(1){--x:10%;--y:68%;--s:50px} .opt-art > :nth-child(2){--x:25%;--y:40%;--s:56px;--d:-1.1s} .opt-art > :nth-child(3){--x:41%;--y:22%;--s:60px;--d:-2.3s}
.opt-art > :nth-child(4){--x:59%;--y:22%;--s:60px;--d:-.6s} .opt-art > :nth-child(5){--x:75%;--y:40%;--s:56px;--d:-1.8s} .opt-art > :nth-child(6){--x:90%;--y:68%;--s:50px;--d:-3s}
@media (max-width:760px){
  .pick{justify-content:flex-start;padding-top:calc(var(--bar) + 18px)}
  .pick-logo{height:22px}
  .pick-opts{flex-direction:column;width:100%;max-width:440px}
  .opt{width:100%;min-height:0;border-radius:36px;padding:22px 22px 26px}
  .opt-art{min-height:84px;flex:none;height:84px}
  .opt-art > *{--s:42px!important;--y:50%!important}
  .opt-art > :nth-child(1){--x:10%} .opt-art > :nth-child(2){--x:26%} .opt-art > :nth-child(3){--x:42%} .opt-art > :nth-child(4){--x:58%} .opt-art > :nth-child(5){--x:74%} .opt-art > :nth-child(6){--x:90%}
}
@media (prefers-reduced-motion:reduce){ .opt{transition:none} }

/* ---------- keep scrolling (v9, Martin Oct 26 2026) ----------
   After half a second with no scrolling on the first two scroll stages: small grey text and a down arrow at the top left
   (You glows a little at the same time, in the map) */
.nudge{position:fixed;left:var(--m);top:calc(var(--bar) + 18px);z-index:25;display:inline-flex;align-items:center;gap:12px;margin:0;height:52px;padding:0 10px 0 22px;border-radius:999px;
  font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--ink);
  background:linear-gradient(140deg,rgba(255,255,255,.94),rgba(255,255,255,.78));-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1.5px solid rgba(255,255,255,.95);box-shadow:var(--sh-pill);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);transform-origin:left center;pointer-events:none;transition:opacity 260ms ease,transform 360ms var(--ease-out),visibility 0s linear 260ms}
.nudge.on{opacity:1;visibility:visible;transform:none;transition:opacity 120ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s}
.nudge svg{flex:none;width:34px;height:34px;padding:8px;border-radius:50%;background:var(--acc);fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;box-shadow:var(--sh-acc)}
html.motion .nudge.on{animation:nudge-glow 2.6s ease-in-out 600ms infinite}
@keyframes nudge-glow{0%,100%{box-shadow:var(--sh-pill)}50%{box-shadow:0 0 0 4px rgba(228,9,207,.12),0 16px 36px -14px rgba(228,9,207,.55)}}
html:not(.js) .nudge,html.no3d .nudge{display:none}
/* v13 (Martin, Oct 30 2026): "Scroll to see the full map" on the first frame, in Keep Scrolling!'s place and look;
   it fades out once the page moves on and Keep Scrolling! takes over from the next stop */
.cue{position:fixed;left:var(--m);top:calc(var(--bar) + 18px);z-index:25;display:inline-flex;align-items:center;gap:12px;margin:0;height:52px;padding:0 10px 0 22px;border-radius:999px;
  font-family:inherit;font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--ink);cursor:pointer;
  background:linear-gradient(140deg,rgba(255,255,255,.94),rgba(255,255,255,.78));-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1.5px solid rgba(255,255,255,.95);box-shadow:var(--sh-pill);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);transform-origin:left center;pointer-events:none;transition:opacity 260ms ease,transform 360ms var(--ease-out),visibility 0s linear 260ms}
.cue.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity 260ms var(--ease-out),transform 360ms var(--ease-out),box-shadow 220ms ease,visibility 0s}
.cue svg{flex:none;width:34px;height:34px;padding:8px;border-radius:50%;background:var(--acc);fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;box-shadow:var(--sh-acc)}
.cue:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .cue:hover{box-shadow:0 0 0 4px rgba(228,9,207,.12),0 16px 36px -14px rgba(228,9,207,.55)} }
@media (max-width:760px){ .cue{font-size:15.5px;height:44px;padding:0 7px 0 16px;gap:9px;top:calc(var(--bar) + 12px)} .cue svg{width:30px;height:30px;padding:7px} }
.cue.cue-sm{font-size:15.5px;height:44px;padding:0 7px 0 16px;gap:9px} .cue.cue-sm svg{width:30px;height:30px;padding:7px}
.cue.cue-off{display:none}
@media (max-width:760px){ .nudge{font-size:15.5px;height:44px;padding:0 7px 0 16px;gap:9px;top:calc(var(--bar) + 12px)} .nudge svg{width:30px;height:30px;padding:7px} }

/* ---------- the cursor, site-wide (v9, Martin Oct 26 2026): the Start Now frame's gradient ring with sparkles ----------
   Drawn by assets/cursor.js, only on a mouse with motion allowed */
.nc-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}
.nc-cur{position:fixed;left:0;top:0;z-index:81;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity 160ms ease;will-change:transform;
  border:2.5px solid transparent;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) padding-box,var(--acc) border-box}
.nc-cur::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--acc)}
.nc-cur.on{opacity:1}
html.nc-cursor,html.nc-cursor *{cursor:none!important}
@media print{ .nc-fx,.nc-cur,.nudge{display:none} }

/* ---------- after Get A Headstart: add every app you use (Martin, Oct 27 2026) ----------
   Screen 04's look: the heading, a glass panel with search, "N selected" and Continue, then the apps with gradient
   check badges. All 600 apps, by category. Adding one opens its sheet: every way to bring it in. */
.pick.hs-on{justify-content:flex-start;gap:0;overflow:hidden;padding-bottom:clamp(16px,3vh,32px)}
.hs{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(14px,2.4vh,24px);width:min(1240px,100%);flex:1 1 auto;min-height:0}
.hs[hidden]{display:none}
.pick-h[hidden],.pick-opts[hidden],.pick-have[hidden]{display:none!important}
.hs-bar,.hs-cats{flex:none}
html.motion .hs.in .hs-head{animation:nc-rise 640ms var(--ease-expo) both}
html.motion .hs.in .hs-panel{animation:opt-in 720ms var(--ease-expo) 80ms both}
.hs-head{display:flex;align-items:center;gap:18px}
.hs-back{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;padding:0;color:var(--ink);
  background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(255,255,255,.74));border:1.5px solid rgba(255,255,255,.95);box-shadow:var(--sh-pill)}
.hs-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hs-h{margin:0;font-size:clamp(30px,min(4.2vw,6.4vh),60px);font-weight:800;letter-spacing:-.045em;line-height:1.04;color:var(--ink)}
.hs-h .gt{padding:.1em .06em .2em;margin:-.1em -.06em -.2em}
.hs-sub{margin:6px 0 0;font-size:clamp(15px,1.25vw,18px);font-weight:600;color:var(--mut)}
.hs-panel{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;border-radius:40px;padding:clamp(16px,2vw,28px) clamp(14px,2vw,28px) 0;
  background:linear-gradient(140deg,rgba(255,255,255,.86),rgba(255,255,255,.66));-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border:1.5px solid rgba(255,255,255,.95);box-shadow:var(--sh-glass)}
.hs-bar{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px)}
.hs-search{flex:1 1 auto;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px;border-radius:999px;background:#fff;border:1.5px solid rgba(24,24,24,.08);box-shadow:inset 0 1px 2px rgba(24,24,24,.04)}
.hs-search:focus-within{border-color:#E409CF;box-shadow:0 0 0 3px rgba(228,9,207,.14)}
.hs-search svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--mut);stroke-width:2.2;stroke-linecap:round}
.hs-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:17px;font-weight:600;color:var(--ink)}
.hs-search input::placeholder{color:var(--quiet)}
.hs-count{flex:none;font-size:15px;font-weight:750;color:var(--ink-2);white-space:nowrap}
.hs-go{flex:none}
.hs-go.off{opacity:.45;filter:saturate(.5);pointer-events:none}
.hs-cats{display:flex;gap:8px;margin:14px -4px 0;padding:2px 4px 12px;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.hs-cats::-webkit-scrollbar{display:none}
.hs-cats button{flex:none;height:36px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:700;color:var(--ink-2);background:rgba(255,255,255,.7);border:1.5px solid rgba(24,24,24,.07)}
.hs-cats button.on{color:#fff;background:var(--ink);border-color:var(--ink)}
.hs-grid{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 calc(-1 * clamp(14px,2vw,28px));padding:4px clamp(14px,2vw,28px) 28px;
  mask-image:linear-gradient(#000 0,#000 calc(100% - 28px),transparent)}
.hs-wait{margin:40px 0;text-align:center;font-weight:650;color:var(--mut)}
.hs-cat{margin:18px 0 10px;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--quiet)}
.hs-cat:first-child{margin-top:4px}
.hs-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px 8px}
.hs-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px 10px;border:0;border-radius:24px;background:none;text-align:center;transition:background-color 180ms ease}
.hs-app:hover,.hs-app:focus-visible{background:rgba(255,255,255,.9);outline:none}
.hs-app:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4.5px #E409CF}
.hs-ico{position:relative;flex:none;width:62px;height:62px;border-radius:22.5%;background-repeat:no-repeat;box-shadow:0 8px 18px -10px rgba(24,24,24,.45),0 0 0 1px rgba(24,24,24,.06);transition:transform 260ms var(--ease-out)}
.hs-app:hover .hs-ico{transform:translateY(-2px) scale(1.04)}
.hs-app.on .hs-ico{box-shadow:0 0 0 3px #fff,0 0 0 5.5px #E409CF,0 10px 22px -10px rgba(228,9,207,.6)}
.hs-chk{position:absolute;right:-8px;top:-8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--acc);border:2px solid #fff;
  box-shadow:0 4px 10px -3px rgba(228,9,207,.6);opacity:0;transform:scale(.4);transition:opacity 160ms ease,transform 260ms var(--ease-out)}
.hs-chk svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.hs-app.on .hs-chk{opacity:1;transform:none}
.hs-n{max-width:100%;font-size:13px;font-weight:700;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the sheet */
.hs-scrim{position:fixed;inset:0;z-index:8;display:grid;place-items:center;padding:16px;background:rgba(246,243,240,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.motion .hs-scrim.in{animation:pick-in 240ms ease both}
html.motion .hs-scrim.in .hs-sheet{animation:opt-in 520ms var(--ease-expo) both}
.hs-sheet{position:relative;width:min(720px,100%);max-height:min(860px,calc(100svh - 32px));overflow-y:auto;overscroll-behavior:contain;border-radius:36px;padding:34px clamp(20px,3vw,40px) 26px;
  background:#fff;box-shadow:0 50px 120px -40px rgba(70,8,60,.45),0 6px 20px -8px rgba(70,8,60,.18)}
.hs-x{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;border:0;background:#F1EEEB;color:var(--ink)}
.hs-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.hs-top{display:flex;align-items:center;gap:18px;padding-right:44px}
.hs-ico.big{width:76px;height:76px}
.hs-cn{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--quiet)}
.hs-an{margin:2px 0 0;font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.08;color:var(--ink)}
.hs-learn{margin:4px 0 0;font-size:15px;font-weight:600;line-height:1.4;color:var(--mut)}
.hs-lab{margin:26px 0 10px;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--quiet)}
.hs-what{display:flex;flex-wrap:wrap;gap:8px}
.hs-pill{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px 0 12px;border-radius:999px;font-size:14.5px;font-weight:700;color:var(--ink-2);background:#F4F1EE;border:1.5px solid transparent}
.hs-pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.25}
.hs-pill.on{color:var(--ink);background:#fff;border-color:#E409CF;box-shadow:0 6px 16px -8px rgba(228,9,207,.5)}
.hs-pill.on svg{opacity:1;stroke:#E409CF}
.hs-ways{display:flex;flex-direction:column;gap:10px}
.hs-way{display:flex;align-items:flex-start;gap:14px;width:100%;padding:16px 16px 16px 14px;border-radius:24px;text-align:left;background:#F7F5F3;border:1.5px solid transparent;transition:background-color 160ms ease,border-color 160ms ease}
.hs-way:hover{background:#F1EEEB}
.hs-way.on{background:#fff;border-color:#E409CF;box-shadow:0 10px 26px -14px rgba(228,9,207,.55)}
.hs-wi{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px rgba(24,24,24,.07)}
.hs-way.on .hs-wi{background:var(--acc);box-shadow:none}
.hs-wi svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hs-way.on .hs-wi svg{stroke:#fff}
.hs-wt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hs-wk{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.hs-wn{font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.hs-wd{font-size:14.5px;font-weight:600;line-height:1.42;color:var(--ink-2)}
.hs-wm{margin-top:3px;font-size:13px;font-weight:700;color:var(--mut)}
.hs-tick{flex:none;width:28px;height:28px;margin-top:7px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(24,24,24,.16)}
.hs-tick svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hs-way.on .hs-tick{background:var(--acc);border-color:#fff;box-shadow:0 4px 10px -3px rgba(228,9,207,.6)}
.hs-way.on .hs-tick svg{opacity:1}
.hs-note{margin:22px 0 0;padding:16px 18px;border-radius:20px;background:#F4F1EE;font-size:14.5px;font-weight:650;line-height:1.45;color:var(--ink-2)}
.hs-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}
@media (max-width:760px){
  .pick.hs-on{padding-left:12px;padding-right:12px}
  .hs-head{gap:12px}
  .hs-back{width:42px;height:42px}
  .hs-panel{border-radius:30px;padding:14px 12px 0}
  .hs-bar{flex-wrap:wrap}
  .hs-search{flex:1 1 100%;height:50px}
  .hs-count{flex:1}
  .hs-go{height:46px}
  .hs-grid{margin:0 -12px;padding:4px 12px 24px}
  .hs-tiles{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px 4px}
  .hs-ico{width:52px;height:52px}
  .hs-n{font-size:12px}
  .hs-scrim{align-items:end;padding:0}
  .hs-sheet{width:100%;max-height:calc(100svh - 40px);border-radius:30px 30px 0 0;padding:28px 18px 22px}
}

/* ---------- v11 (Martin, Oct 28 2026) ---------- */
/* Sign in, on every step: the header, the Start Now frame and its picker */
.bar-r{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px)}
.signin{display:inline-flex;align-items:center;height:42px;padding:0 6px;font-size:15px;font-weight:750;color:var(--ink);text-decoration:none;white-space:nowrap;transition:opacity 160ms ease}
.signin:hover{opacity:.7}
.pick-tr{display:flex;align-items:center;gap:14px}
.pick-have{position:relative;z-index:2;margin:-6px 0 0;font-size:15px;font-weight:650;color:var(--mut)}
.pick-have a{color:var(--ink);font-weight:800;text-decoration:none;border-bottom:1.5px solid rgba(24,24,24,.25)}
.pick-have a:hover{border-color:var(--ink)}
@media (max-width:760px){ .signin{font-size:14px;height:40px;padding:0 4px} .pick-have{margin:0;font-size:14px} }
/* the map: a category or app under the cursor is clickable; the category under the cursor is highlighted */
.stage.hit-cat,.stage.hit-app{cursor:pointer}
.clab{transition:box-shadow 220ms ease,background-color 220ms ease}
.clab.hot{background:#fff;border-color:#fff;box-shadow:0 0 0 2px #E409CF,0 12px 28px -10px rgba(228,9,207,.55)}

/* v11: until the header's Start Now shows, it takes no room, so Sign in sits at the right edge */
.bar:not(.cta-on) .bar-cta{position:absolute;right:var(--m)}
html:not(.js) .bar:not(.cta-on) .bar-cta{position:static}


/* ---------- v13 (Martin, Oct 30 2026): the first frame's Start Now, bigger and easier to find ---------- */
/* the header's Start Now shows from the first frame, beside Sign in */
.bar-cta{gap:7px;padding:0 16px 0 20px}
.bar-cta .arw{width:16px;height:16px}
/* the welcome and home Start Now: larger, a white arrow chip, a soft glow of the gradient under it */
.start-wrap{position:relative;display:inline-flex;margin-top:clamp(28px,4.4vh,46px)}
.start-wrap .start{margin-top:0}
.start-wrap::before{content:"";position:absolute;left:8%;right:8%;top:34%;bottom:-16%;z-index:-1;border-radius:999px;background:var(--acc);
  filter:blur(26px);opacity:.5;pointer-events:none}
.btn.start-lg{height:76px;padding:0 12px 0 44px;gap:18px;font-size:21px;font-weight:800;letter-spacing:-.015em;
  box-shadow:0 18px 38px -14px rgba(228,9,207,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.start-arw{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;flex:none;background:#fff;box-shadow:0 4px 12px -5px rgba(60,6,60,.4)}
.start-arw .arw{width:22px;height:22px;stroke:var(--ink);stroke-width:2.5}
/* Completely Free keeps its original look (Martin, Oct 30 2:02 PM), set further down so the bigger button's glow doesn't crowd it */
.welcome .free,.ending .free{margin-top:26px}
@media (hover:hover) and (pointer:fine){
  .btn.start-lg:hover{box-shadow:0 26px 50px -16px rgba(228,9,207,.7),inset 0 1px 0 rgba(255,255,255,.4)}
}
@keyframes nc-breathe{0%,100%{opacity:.42;transform:scale(.94)}50%{opacity:.75;transform:scale(1.05)}}
html.motion .start-wrap::before{animation:nc-breathe 3.4s ease-in-out 1s infinite}
@media (max-height:720px) and (min-width:641px){
  .btn.start-lg{height:64px;padding:0 10px 0 36px;gap:16px;font-size:19px}
  .btn.start-lg .start-arw{width:44px;height:44px}
  .welcome .free,.ending .free{margin-top:18px}
  .start-wrap{margin-top:clamp(20px,3.6vh,32px)}
}
@media (max-width:640px){
  .btn.start-lg{height:66px;padding:0 10px 0 34px;gap:14px;font-size:19px}
  .btn.start-lg .start-arw{width:46px;height:46px}
  .bar-cta{padding:0 14px 0 16px}
  .bar-cta .arw{display:none}
}