@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-latin-ext.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-latin.woff2) format('woff2');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:'Gabarito';font-style:normal;font-weight:500 900;font-display:swap;src:url(fonts/gabarito-latin-ext.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:500 900;font-display:swap;src:url(fonts/gabarito-latin.woff2) format('woff2');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:'Caveat';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/caveat-latin-ext.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/caveat-latin.woff2) format('woff2');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:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/figtree-latin-ext.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/figtree-latin.woff2) format('woff2');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}

/* Sintios site. Warm paper, one vivid colour world per app, chunky friendly type, springy buttons.
   Tokens first; every app section reads its colours from --w-* variables set inline from data/apps.json. */
:root{
  --paper:#FFF8EC;--paper-2:#FFEFD9;--card:#FFFFFF;--ink:#1B1530;--ink-2:#544C69;--line:#EADFCB;
  --pop:#3B5BFF;--pop-d:#2238C9;--pop-ink:#2F4BE6;--sun:#FFD43B;--sun-d:#E0A800;--pink:#FF9EC4;--mint:#7CE0B6;
  --wm:#1E2A4A;--shadow:rgba(40,20,60,.35);
  --display:"Gabarito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;--body:"Figtree",system-ui,-apple-system,sans-serif;--hand:"Caveat","Bradley Hand",cursive;
  --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.2,.8,.2,1);
  --g:clamp(16px,4vw,48px);--r-xl:44px;--r-l:32px;--r-m:22px;--r-s:14px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#15111E;--paper-2:#1F1830;--card:#231C35;--ink:#F5F0FF;--ink-2:#BEB4D4;--line:#352C4A;
  --pop:#5466F2;--pop-d:#3346C8;--pop-ink:#9AA8FF;--wm:#F3EEE3;--shadow:rgba(0,0,0,.55);color-scheme:dark}}
:root[data-theme="dark"]{--paper:#15111E;--paper-2:#1F1830;--card:#231C35;--ink:#F5F0FF;--ink-2:#BEB4D4;--line:#352C4A;
  --pop:#5466F2;--pop-d:#3346C8;--pop-ink:#9AA8FF;--wm:#F3EEE3;--shadow:rgba(0,0,0,.55);color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pop);outline-offset:3px;border-radius:6px}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--g)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;border-radius:12px;background:var(--ink);color:var(--paper);font-weight:700}
.skip:focus{left:16px}
.eyebrow{display:inline-block;font:800 13px/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase;opacity:.75}
.kicker{display:inline-flex;align-items:center;gap:9px;font:800 14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--pop-ink)}
.kicker::before{content:"";width:9px;height:9px;border-radius:3px;background:currentColor;transform:rotate(45deg)}
.big{margin:12px 0 0;font:900 clamp(38px,5.2vw,78px)/.96 var(--display);letter-spacing:-.04em;max-width:15ch;text-wrap:balance}
.sec{padding:clamp(64px,8vw,112px) 0}

/* ---------- buttons: a chunky ledge underneath that you can press ---------- */
.btn{--c:var(--pop);--cd:var(--pop-d);--fg:#fff;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:18px;border:0;background:var(--c);color:var(--fg);
  font:800 17px/1 var(--display);text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--cd);transition:transform .25s var(--spring),box-shadow .25s var(--spring)}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--cd)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--cd);transition-duration:.08s}
.btn small{display:block;font:600 11px/1 var(--body);opacity:.8;margin-bottom:3px}
.btn .apl{width:17px;height:21px;flex:none}
.btn.ghost{--c:var(--card);--cd:var(--line);--fg:var(--ink)}
.btn.acc{--c:var(--w-acc);--cd:var(--w-acc-deep);--fg:var(--w-on)}
.btn.off{cursor:default}
.btn.off:hover,.btn.off:active{transform:none;box-shadow:0 5px 0 var(--cd)}

/* ---------- top bar ---------- */
.nav{position:sticky;top:12px;z-index:50;max-width:1320px;margin:14px auto 0;padding:0 var(--g)}
.nav-in{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 22px;border-radius:22px;background:color-mix(in srgb,var(--card) 86%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -18px var(--shadow),0 0 0 1px color-mix(in srgb,var(--ink) 7%,transparent)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--wm);text-decoration:none;padding:6px 0}
.brand .wm{height:30px;width:auto}
.brand-icon{width:34px;height:34px;border-radius:9px}
.wm{fill:currentColor}
.links{display:flex;gap:2px}
.links a{font:700 15px/1 var(--display);text-decoration:none;padding:11px 14px;border-radius:12px;transition:background .2s}
.links a:hover{background:var(--paper-2)}
.nav-cta{padding:10px 16px;font-size:15px;border-radius:14px;box-shadow:0 4px 0 var(--cd)}
.subnav{margin:12px auto 0;max-width:1320px;padding:0 var(--g)}
.subnav .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 8px 8px 10px;border-radius:20px;background:var(--w-bg);color:var(--w-fg);max-width:none;box-shadow:0 6px 0 var(--w-deep)}
.subnav .who{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;font:900 19px/1 var(--display);letter-spacing:-.02em}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs a{padding:9px 14px;border-radius:12px;font:700 14px/1 var(--display);text-decoration:none}
.tabs a:hover{background:color-mix(in srgb,var(--w-fg) 10%,transparent)}
.tabs a[aria-current="page"]{background:var(--w-acc);color:var(--w-on)}

/* ---------- glossy app tile ---------- */
.tile{--s:96px;position:relative;display:block;flex:none;width:var(--s);height:var(--s);border-radius:23%;
  box-shadow:0 calc(var(--s)*.045) 0 rgba(0,0,0,.28),0 calc(var(--s)*.14) calc(var(--s)*.18) calc(var(--s)*-.08) rgba(20,10,40,.45);transition:transform .5s var(--spring)}
.tile img{width:100%;height:100%;border-radius:inherit}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.08)}
.tile.xs{--s:30px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.tile.tilt-r{transform:rotate(7deg)}.tile.tilt-l{transform:rotate(-6deg)}

/* ---------- hero ---------- */
.hero{padding:clamp(44px,6vw,88px) 0 24px}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:end}
.hero h1{margin:0;font:900 clamp(46px,7.2vw,112px)/.92 var(--display);letter-spacing:-.045em;max-width:12.5ch;text-wrap:balance}
.hero h1 .mark{position:relative;white-space:nowrap;color:var(--pop-ink)}
.hero h1 .mark svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible;z-index:-1}
.hero h1 .mark path{fill:none;stroke:var(--sun);stroke-width:10;stroke-linecap:round}
.hero-aside{padding-bottom:10px}
.hero-aside p{margin:0 0 20px;font-size:19px;line-height:1.5;color:var(--ink-2)}
.hero-aside b{color:var(--ink)}
.hero-show{position:relative;margin-top:clamp(36px,5vw,60px)}

/* hero slider: native horizontal scroll with snap (swipe works everywhere); site.js adds autoplay and controls */
.slider{position:relative}
.sl-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:var(--r-xl);
  box-shadow:0 10px 0 var(--sl-deep,rgba(0,0,0,.12));transition:box-shadow .6s var(--ease)}
.sl-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;
  min-height:clamp(440px,40vw,520px);padding:clamp(28px,4vw,52px) clamp(26px,4.4vw,60px);background:var(--w-bg);color:var(--w-fg);overflow:hidden;position:relative}
.sl-copy{position:relative;z-index:2;max-width:30em}
.sl-copy h2{margin:10px 0 6px;font:900 clamp(52px,6.4vw,96px)/.88 var(--display);letter-spacing:-.045em}
.sl-copy .tagline{margin:0 0 12px;font:800 clamp(20px,2vw,26px)/1.2 var(--display);letter-spacing:-.015em}
.sl-copy .one{margin:0 0 18px;font-size:18px;line-height:1.5;opacity:.86;max-width:26em}
.row{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;font:700 13px/1 var(--display);background:color-mix(in srgb,var(--w-fg,var(--ink)) 10%,transparent)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.sl-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.sl-art{position:relative;height:100%;min-height:360px}
.sl-art .tile{--s:clamp(140px,14vw,200px);position:absolute;left:4%;top:18%;z-index:1}
.sl-art .phone{position:absolute;right:6%;top:50%;--pw:clamp(170px,15vw,214px);transform:translateY(-50%) rotate(4deg);z-index:2}
.sl-art .bubble{position:absolute;left:0;top:0;z-index:3}
.bubble{display:inline-block;background:#fff;color:#1B1530;font:800 18px/1.15 var(--display);padding:12px 16px;border-radius:18px 18px 18px 4px;box-shadow:0 4px 0 rgba(0,0,0,.12);
  transform:rotate(-3deg);max-width:12em;transition:transform .5s var(--spring)}
.slide .tile,.slide .phone,.slide .bubble{transition:transform .8s var(--spring),opacity .5s var(--ease)}
.js .slide:not(.on) .sl-art .tile{transform:rotate(-14deg) scale(.86) translateY(20px);opacity:.6}
.js .slide:not(.on) .sl-art .bubble{transform:rotate(-8deg) scale(.7);opacity:0}
.js .slide:not(.on) .sl-art .phone{transform:translateY(-44%) rotate(10deg)}
.slider.single .sl-track{scroll-snap-type:none}
.sl-ctrl{display:flex;align-items:center;gap:12px;margin-top:26px}
.sl-btn,.sl-play{flex:none;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:16px;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 5px 0 var(--line);
  transition:transform .25s var(--spring),box-shadow .25s var(--spring)}
.sl-btn:hover,.sl-play:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--line)}
.sl-btn:active,.sl-play:active{transform:translateY(5px);box-shadow:0 0 0 var(--line)}
.sl-btn svg,.sl-play svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sl-play .i-play{display:none;fill:currentColor;stroke-width:2}
.sl-play[aria-pressed="true"] .i-play{display:block}.sl-play[aria-pressed="true"] .i-pause{display:none}
.sl-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px 4px 10px;margin:-6px 0 -10px;flex:1;min-width:0}
.sl-tabs::-webkit-scrollbar{display:none}
.sl-tabs button{flex:none;display:flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border:0;border-radius:16px;background:var(--card);cursor:pointer;font:800 15px/1 var(--display);
  box-shadow:0 4px 0 var(--line);transition:transform .25s var(--spring),background .25s,color .25s}
.sl-tabs button:hover{transform:translateY(-2px)}
.sl-tabs button[aria-current="true"]{background:var(--ink);color:var(--paper);box-shadow:0 4px 0 #000;transform:translateY(2px)}
.sl-next{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font:700 15px var(--display)}
.sl-next .nx{padding:7px 12px;border-radius:12px;background:var(--paper-2)}

/* stickers: two, placed with care */
.stk{position:absolute;z-index:5;display:grid;place-items:center;text-align:center;font:900 15px/1 var(--display);color:#1B1530;pointer-events:none}
.stk.round{width:112px;height:112px;border-radius:50%;background:var(--pink);border:4px solid #fff;left:calc(50% - 56px);top:-52px;transform:rotate(-12deg);box-shadow:0 6px 14px -6px rgba(30,15,50,.45)}
.stk.star{width:124px;height:124px;right:-10px;top:-58px;transform:rotate(10deg);filter:drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 8px 10px rgba(30,15,50,.3))}
.stk.star svg{position:absolute;inset:0;fill:var(--sun)}
.stk.star span{position:relative}

/* ---------- app worlds (home + /<slug>/) ---------- */
.world{position:relative;margin:clamp(14px,2vw,24px) clamp(8px,1.4vw,20px);border-radius:48px;background:var(--w-cur,var(--w-bg));color:var(--w-fg);transition:background-color .8s var(--ease)}
.story-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 26px;align-items:center;padding:clamp(44px,5.5vw,76px) 0 0}
.story-head h1,.story-head h2{margin:6px 0 0;font:900 clamp(52px,6.4vw,96px)/.88 var(--display);letter-spacing:-.045em}
.story-head .tagline{margin:8px 0 0;font:800 clamp(19px,1.7vw,24px)/1.25 var(--display);opacity:.86}
.sh-cta{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.more{font:800 15px/1 var(--display);text-decoration:none;border-bottom:2.5px solid currentColor;padding-bottom:3px}
.story-head .summary{grid-column:2/-1;margin:6px 0 0;max-width:46em;font-size:18px;line-height:1.55;opacity:.88}
.story-head .facts{grid-column:2/-1}
.notice{grid-column:2/-1;margin:0;padding:12px 16px;border-radius:16px;font-size:14.5px;background:color-mix(in srgb,var(--w-fg) 10%,transparent);max-width:48em}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.fact{padding:9px 13px;border-radius:14px;background:color-mix(in srgb,var(--w-fg) 9%,transparent);font:600 14px/1.35 var(--body);max-width:100%}
.fact b{display:block;font:800 11.5px/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
.story{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,4vw,64px);padding-bottom:clamp(40px,5vw,72px)}
.beats{padding:10vh 0 16vh}
.beat{min-height:72vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .5s var(--ease)}
.js .beat{opacity:.3}
.js .beat.on{opacity:1}
.step{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;font:800 14px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.step b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;font-size:16px;background:var(--w-acc);color:var(--w-on);box-shadow:0 3px 0 var(--w-acc-deep)}
.beat h2,.beat h3{margin:0 0 14px;font:900 clamp(32px,3.5vw,52px)/.98 var(--display);letter-spacing:-.035em;text-wrap:balance}
.beat p{margin:0;font-size:18px;line-height:1.55;max-width:28em;opacity:.88}
.beat .facts{margin-top:20px}
.mstage,.mnotes{display:none}

.stage-col{position:relative}
.stage{position:sticky;top:max(96px,calc(50vh - 360px));height:min(720px,calc(100vh - 112px));display:grid;place-items:center}
.scene{position:absolute;inset:0;border-radius:36px;overflow:hidden;container-type:size}
.scene.plain{background:color-mix(in srgb,var(--w-fg) 6%,transparent)}
.scene .prop{position:absolute;opacity:0;transform:translateY(16px) scale(.95) rotate(var(--r,0deg));transition:opacity .45s var(--ease),transform .8s var(--spring)}
.scene .prop.is-on{opacity:1;transform:rotate(var(--r,0deg))}
.stage .pills{position:absolute;z-index:7;top:16px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:5px;border-radius:999px;background:color-mix(in srgb,var(--w-bg) 70%,rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 16px -10px rgba(0,0,0,.4)}
.pills button{border:0;background:none;font:800 14px/1 var(--display);padding:9px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .3s,color .3s}
.pills button[aria-pressed="true"]{background:var(--w-acc);color:var(--w-on)}
.clock{position:absolute;z-index:6;left:20px;bottom:20px;padding:10px 14px;border-radius:16px;background:rgba(20,12,36,.42);color:#FFF1DE;font:800 21px/1 var(--display);letter-spacing:-.01em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.clock small{display:block;font:600 12.5px/1.25 var(--body);opacity:.82;margin-top:5px;letter-spacing:0;max-width:16em}

/* the phone */
.phone{--pw:clamp(240px,20vw,290px);position:relative;z-index:4;width:var(--pw);padding:calc(var(--pw)*.034);border-radius:calc(var(--pw)*.17);
  background:linear-gradient(145deg,#4A4752,#1A1820 38%,#0D0C11 70%,#34323A);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 calc(var(--pw)*.012) #08070B,0 40px 70px -30px rgba(20,8,40,.6),0 14px 26px -14px rgba(20,8,40,.45)}
.phone .pb{position:absolute;width:3px;border-radius:2px;background:#2C2A32}
.pb1{left:-2px;top:19%;height:5%}.pb2{left:-2px;top:27%;height:9%}.pb3{right:-2px;top:25%;height:13%}
.phone .scr{position:relative;aspect-ratio:786/1704;border-radius:calc(var(--pw)*.136);overflow:hidden;background:#000}
.phone .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateY(12px) scale(.985);transition:opacity .45s var(--ease),transform .7s var(--spring)}
.phone .scr img.on{opacity:1;transform:none}
.island{position:absolute;z-index:2;top:2%;left:50%;width:30%;height:3.6%;transform:translateX(-50%);background:#000;border-radius:99px}
.glass{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.12),rgba(255,255,255,0) 32%)}
.phone.mini{--pw:clamp(150px,44vw,214px)}

/* handwritten notes, drawn by site.js next to the phone */
.notes{position:absolute;inset:0;z-index:5;pointer-events:none}
.note{position:absolute;width:168px;font:700 23px/1.02 var(--hand);opacity:0;transform:translateY(8px) rotate(var(--r,-2deg));transition:opacity .4s var(--ease),transform .6s var(--spring);
  text-shadow:0 0 6px var(--w-bg),0 0 12px var(--w-bg)}
.note.on{opacity:1;transform:rotate(var(--r,-2deg))}
.note small{display:block;font:600 18px/1.08 var(--hand);opacity:.9;margin-top:3px}
.note.left{text-align:right}
.arrows{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:visible}
.arrows path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .4s var(--ease)}
.arrows circle{fill:currentColor;opacity:0;transition:opacity .4s}
.arrows .on{opacity:.9}

/* ---------- house rules ---------- */
.rules-sec{padding-top:clamp(24px,4vw,48px)}
.rules{margin:0 clamp(8px,1.4vw,20px);padding:clamp(52px,7vw,92px) 0;border-radius:48px;background:var(--sun);color:#1B1530}
.rules .kicker{color:#1B1530}
.rules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.rule{background:#fff;border-radius:30px;padding:26px 24px 28px;box-shadow:0 7px 0 var(--sun-d);transition:transform .45s var(--spring)}
.rule:nth-child(1){transform:rotate(-1.6deg)}.rule:nth-child(2){transform:rotate(1.2deg)}.rule:nth-child(3){transform:rotate(-.8deg)}.rule:nth-child(4){transform:rotate(1.6deg)}
.rule:hover{transform:rotate(0) translateY(-6px)}
.rule .n{display:block;font:900 clamp(72px,7.6vw,108px)/.85 var(--display);letter-spacing:-.05em;color:#2F4BE6}
.rule .n.one{color:#C2410C}
.rule h3{margin:12px 0 6px;font:800 22px/1.1 var(--display)}
.rule p{margin:0;font-size:15.5px;color:#4A4360}

/* ---------- the shelf ---------- */
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{border:0;cursor:pointer;padding:11px 16px;border-radius:14px;background:var(--card);font:800 15px/1 var(--display);box-shadow:0 4px 0 var(--line);transition:transform .25s var(--spring)}
.filters button:hover{transform:translateY(-2px)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:0 4px 0 #000;transform:translateY(2px)}
.filters sup{font-size:11px;opacity:.65;margin-left:3px}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.unit{position:relative;display:flex;flex-direction:column;min-height:300px;padding:22px 22px 24px;border-radius:32px;text-decoration:none;transition:transform .45s var(--spring)}
.unit[hidden]{display:none}
.unit .top{display:flex;justify-content:space-between;align-items:center;gap:8px;font:800 13px/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase}
.unit .tag{padding:6px 10px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);font:800 12px/1 var(--display);letter-spacing:0;text-transform:none;white-space:nowrap}
.unit h3{margin:20px 0 4px;font:900 30px/1 var(--display);letter-spacing:-.03em}
.unit p{margin:0;font-size:15px;line-height:1.45;opacity:.85}
.unit.wide{grid-column:span 2;background:var(--w-bg);color:var(--w-fg);box-shadow:0 8px 0 var(--w-deep)}
.unit.wide:hover{transform:translateY(-6px) rotate(-.8deg)}
.unit.wide .tile{position:absolute;right:28px;top:50%;--s:148px;transform:translateY(-50%) rotate(6deg)}
.unit.wide:nth-child(even) .tile{transform:translateY(-50%) rotate(-6deg)}
.unit.wide:hover .tile{transform:translateY(-50%) rotate(0) scale(1.05,.95)}
.unit.wide h3{margin-top:auto;font-size:42px}
.unit.wide p{max-width:19em}
.unit.proto{background:var(--u-bg);color:#1B1530;box-shadow:0 8px 0 rgba(27,21,48,.14)}
.unit.proto .q{display:grid;place-items:center;width:88px;height:88px;margin:22px 0 auto;border-radius:23%;border:3px dashed rgba(27,21,48,.35)}
.unit.proto .q svg{width:44px;height:44px}
.unit.proto h3{font:700 38px/.95 var(--hand);letter-spacing:0}
.unit.next{grid-column:span 2;min-height:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:22px;align-items:start}
.unit.next .top{grid-column:1/-1}
.unit.next .q{grid-row:2;margin:20px 0 0}
.unit.next h3{grid-column:2;margin-top:20px}
.unit.next p{grid-column:2}
.unit.proto h3 em{display:block;margin-top:4px;font:700 13px/1.2 var(--body);font-style:normal;opacity:.65}
.fine-note{margin:26px 0 0;font:700 21px/1.2 var(--hand);color:var(--ink-2)}

/* ---------- origin ---------- */
.origin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r-xl);overflow:hidden;background:#3B5BFF;color:#fff;box-shadow:0 10px 0 #2238C9}
.origin-art{position:relative;min-height:420px;background:#2E4BF0}
.origin-art svg{position:absolute;inset:0;width:100%;height:100%}
.origin-cap{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:700 22px var(--hand);opacity:.9}
.origin-txt{padding:clamp(32px,4vw,56px)}
.origin-txt .kicker{color:#fff}
.origin-txt h2{margin:12px 0 18px;font:900 clamp(34px,3.8vw,56px)/.96 var(--display);letter-spacing:-.04em;text-wrap:balance}
.origin-txt p{margin:0 0 14px;font-size:18px;line-height:1.6;max-width:30em}
.origin-txt .src{font:700 23px var(--hand);opacity:.92}

/* ---------- footer ---------- */
.foot{padding:clamp(64px,8vw,110px) 0 40px}
.foot-word{display:block;color:var(--wm);margin:0 0 40px;text-decoration:none}
.foot-word .wm{width:min(100%,920px);height:auto}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:24px;border-top:2px solid var(--ink);padding-top:24px}
.foot-grid h2{margin:0 0 10px;font:800 14px/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase}
.foot-grid a{display:block;margin-bottom:7px;text-decoration:none;font-weight:600}
.foot-grid a:hover{color:var(--pop-ink)}
.foot-grid p{margin:0;color:var(--ink-2)}
.foot-grid .mail{display:inline;color:var(--pop-ink)}
.foot-grid .lg{display:block;margin-bottom:7px;color:var(--ink-2)}
.foot-grid .lg a{display:inline;color:var(--ink)}
.fine{margin-top:32px;font-size:13px;color:var(--ink-2)}

/* ---------- app page extras ---------- */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:40px}
.feat{padding:26px 24px 28px;border-radius:30px;background:var(--card);box-shadow:0 7px 0 var(--line)}
.feat .fn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--w-bg);color:var(--w-fg);font:900 19px/1 var(--display);box-shadow:0 4px 0 var(--w-deep)}
.feat h3{margin:18px 0 8px;font:800 23px/1.1 var(--display);letter-spacing:-.02em}
.feat p{margin:0;color:var(--ink-2);font-size:16px}
.details-sec{padding-top:0}
.details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.lead{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:34em;margin:18px 0 0}
.links-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.spec{margin:0;padding:8px 26px;border-radius:30px;background:var(--card);box-shadow:0 7px 0 var(--line)}
.spec div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1.5px dashed var(--line)}
.spec div:last-child{border-bottom:0}
.spec dt{font:800 13px/1.4 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.spec dd{margin:0;font-weight:600}

/* ---------- document pages (support, privacy, terms, press, 404) ---------- */
.doc-head{padding:clamp(28px,4vw,48px) 0 0}
.dh{display:flex;gap:26px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:var(--r-xl);background:var(--w-bg,var(--card));color:var(--w-fg,var(--ink));box-shadow:0 8px 0 var(--w-deep,var(--line))}
.doc-head.plain .dh{background:var(--pop);color:#fff;box-shadow:0 8px 0 var(--pop-d)}
.dh .tile{--s:104px}
.dh h1{margin:6px 0 0;font:900 clamp(40px,5vw,72px)/.95 var(--display);letter-spacing:-.04em}
.dh .lede{margin:12px 0 0;font-size:18px;max-width:40em;opacity:.9}
.dh .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.dh .chip{background:color-mix(in srgb,currentColor 12%,transparent)}
.dh .chip a{color:inherit}
.doc{padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(40px,6vw,80px)}
.callout{margin:0 0 24px;padding:16px 20px;border-radius:20px;background:var(--paper-2);font-size:16px}
.support{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.faq h2{margin:30px 0 12px;font:900 28px/1.05 var(--display);letter-spacing:-.025em}
.faq h2:first-child{margin-top:0}
.faq details{margin-bottom:10px;border-radius:20px;background:var(--card);box-shadow:0 5px 0 var(--line);transition:box-shadow .25s}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 20px;font:800 18px/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--paper-2);font:900 20px/1 var(--display);transition:transform .3s var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 20px 18px;color:var(--ink-2)}
.faq .ans p{margin:0}
.faq .ans a{color:var(--pop-ink)}
.contact{position:sticky;top:110px;padding:26px 24px;border-radius:30px;background:var(--card);box-shadow:0 7px 0 var(--line)}
.contact h2{margin:10px 0 8px;font:900 30px/1 var(--display);letter-spacing:-.03em}
.contact p{color:var(--ink-2);margin:0 0 14px}
.contact .addr{margin:14px 0;font-weight:700;color:var(--ink)}
.contact ul{margin:0;padding-left:18px;color:var(--ink-2)}
.paper{padding:clamp(26px,4vw,56px);border-radius:var(--r-xl);background:var(--card);box-shadow:0 8px 0 var(--line)}
.prose{max-width:44em;font-size:17px;line-height:1.65}
.prose>:first-child{margin-top:0}
.prose h2{margin:2em 0 .5em;font:900 28px/1.1 var(--display);letter-spacing:-.025em}
.prose h3{margin:1.6em 0 .4em;font:800 20px/1.2 var(--display)}
.prose a{color:var(--pop-ink)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:1em 0}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1.5px dashed var(--line);vertical-align:top}
.prose code{font-size:.92em}
.press-studio,.press-app{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;margin-bottom:22px;padding:clamp(24px,3.6vw,44px);border-radius:var(--r-xl);background:var(--card);box-shadow:0 8px 0 var(--line)}
.press-app .tile{--s:112px}
.press-studio .ps-mark{width:220px;color:var(--wm)}
.press-studio .ps-mark .wm{width:100%;height:auto}
.press-studio h2,.press-app h2{margin:6px 0 10px;font:900 34px/1 var(--display);letter-spacing:-.03em}
.press-studio p,.press-app p{color:var(--ink-2);max-width:46em}
.swatches{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:18px 0 0;font:700 13px/1.3 var(--display)}
.swatches span{display:block;width:62px;height:42px;border-radius:12px;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.swatches code{font:500 12px ui-monospace,Menlo,monospace;color:var(--ink-2)}
.lost{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(56px,9vw,120px) 0}
.lost .big{max-width:none;font:900 clamp(120px,18vw,260px)/.8 var(--display);letter-spacing:-.06em;color:var(--pop-ink)}
.lost h1{margin:18px 0 10px;font:900 clamp(34px,4vw,56px)/1 var(--display);letter-spacing:-.04em}
.lost p{color:var(--ink-2)}
.lost li{margin:6px 0}
.lost a{color:var(--pop-ink);font-weight:700}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .shelf{grid-template-columns:repeat(2,1fr)}
  .rules-grid{grid-template-columns:repeat(2,1fr)}
  .hero-top{grid-template-columns:1fr;gap:20px}
  .hero-aside{max-width:34em}
  .links a{padding:11px 10px}
}
/* ---------- phone ---------- */
@media (max-width:900px){
  .links{display:none}
  .slide{grid-template-columns:1fr;min-height:0;padding:28px 24px 30px}
  .sl-art{order:-1;min-height:300px;margin:-4px 0 4px}
  .sl-art .tile{--s:112px;left:2%;top:34%}
  .sl-art .phone{--pw:132px;right:4%;top:52%}
  .sl-art .bubble{font-size:15px;max-width:11em;left:30%;top:2%}
  .sl-copy h2{font-size:56px}
  .stk{display:none}
  .story-head{grid-template-columns:auto minmax(0,1fr)}
  .story-head .tile{--s:72px}
  .sh-cta{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:18px}
  .story-head .summary,.story-head .facts,.notice{grid-column:1/-1}
  .story{grid-template-columns:1fr}
  .stage-col{display:none}
  .beats{padding:20px 0 0}
  .js .beat,.beat{min-height:0;opacity:1;padding:30px 0 34px;border-bottom:2px dashed color-mix(in srgb,var(--w-fg) 18%,transparent)}
  .beat:last-child{border-bottom:0}
  .mstage{display:block;position:relative;margin:26px 0 0;height:min(420px,108vw);border-radius:28px;overflow:hidden}
  .mstage .scene{border-radius:0}
  .mstage .phone{position:absolute;right:7%;top:50%;transform:translateY(-50%);--pw:min(178px,44vw)}
  .mstage .clock{left:12px;bottom:12px;font-size:17px;padding:8px 11px}
  .mstage .clock small{font-size:11.5px;max-width:12em}
  .mnotes{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}
  .mnotes li{padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--w-fg) 8%,transparent);font-size:15px;line-height:1.4}
  .mnotes b{font:700 21px/1 var(--hand);margin-right:4px}
  .origin{grid-template-columns:1fr}
  .origin-art{min-height:280px}
  .details,.support{grid-template-columns:1fr}
  .contact{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div:first-child{grid-column:1/-1}
  .press-studio,.press-app{grid-template-columns:1fr}
  .lost{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav{top:8px;margin-top:8px}
  .nav-in{padding:6px 6px 6px 16px}
  .brand .wm{height:25px}
  .nav-cta small{display:none}
  .nav-cta{padding:10px 13px;font-size:14px}
  .hero h1{font-size:clamp(42px,12.4vw,60px)}
  .hero-aside p{font-size:17px}
  .slide{padding:22px 18px 26px}
  .sl-copy h2{font-size:48px}
  .sl-copy .one{font-size:16px}
  .sl-ctrl{gap:8px}
  .sl-btn,.sl-play{width:46px;height:46px;border-radius:14px}
  .sl-tabs .nm{display:none}
  .sl-tabs button{padding:7px}
  .world,.rules{border-radius:32px;margin-left:8px;margin-right:8px}
  .story-head h1,.story-head h2{font-size:52px}
  .beat h2,.beat h3{font-size:31px}
  .shelf{grid-template-columns:1fr}
  .unit.wide,.unit.next{grid-column:auto;min-height:280px}
  .unit.next{min-height:0}
  .unit.wide .tile{--s:84px;top:60px;transform:rotate(6deg)}
  .unit.wide:nth-child(even) .tile{transform:rotate(-6deg)}
  .unit.wide:hover .tile{transform:none}
  .unit.wide h3{font-size:34px}
  .rules-grid,.feats{grid-template-columns:1fr}
  .rule,.rule:nth-child(n){transform:none}
  .subnav .wrap{gap:8px}
  .subnav .who{width:100%}
  .tabs a{padding:8px 11px;font-size:13.5px}
  .dh{flex-direction:column;align-items:flex-start;gap:16px}
  .dh .tile{--s:76px}
  .spec div{grid-template-columns:1fr;gap:4px}
  .faq summary{font-size:16.5px;padding:16px}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html,.sl-track{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}

/* ---------- /i/<code>: Lamplight invite ---------- */
.invite{background:var(--w-bg);color:var(--w-fg);padding:clamp(32px,6vw,72px) 0 clamp(48px,8vw,96px)}
.inv-card{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.inv-top{display:flex;align-items:center;gap:16px}
.inv-top .tile{width:84px;height:84px}
.invite h1{margin:0;font:900 clamp(38px,5.4vw,64px)/.95 var(--display);letter-spacing:-.04em;text-wrap:balance}
.invite .lede{margin:0;font-size:19px;line-height:1.5;opacity:.92;max-width:38em}
.inv-code{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 16px;padding:18px 20px;border-radius:22px;background:var(--card);color:var(--ink);box-shadow:0 6px 0 var(--w-deep)}
.inv-code[hidden],.inv-nocode[hidden]{display:none}
.inv-code .k{grid-column:1/-1;font:800 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.inv-code .code{font:900 clamp(30px,5vw,44px)/1.05 var(--display);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.inv-code .hint{grid-column:1/-1;font-size:14.5px;color:var(--ink-2)}
.inv-nocode{margin:0;padding:14px 18px;border-radius:18px;background:color-mix(in srgb,var(--w-fg) 10%,transparent);font-size:16px}
.inv-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.inv-steps li{display:flex;gap:14px;align-items:flex-start}
.inv-steps .n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--w-acc);color:var(--w-on);font:900 17px/1 var(--display);box-shadow:0 3px 0 var(--w-acc-deep)}
.inv-steps b{display:block;font:800 18px/1.25 var(--display)}
.inv-steps span{display:block;font-size:15.5px;opacity:.85}
.inv-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.invite .notice{grid-column:auto;font-size:14px}
.imprint{opacity:.85}
@media (max-width:560px){.inv-code{grid-template-columns:1fr}.inv-top .tile{width:64px;height:64px}.inv-top .bubble{font-size:15px}}