/* ============================================================
   petalOS web — follows vendor/petal/docs/DESIGN_GUIDANCE.md
   Solid neutral canvas, one violet accent, Commissioner. Glass is used
   only where petalOS uses it: the floating nav and the Island
   (hero, rendered by glass.js from the SystemUI shaders).
   ============================================================ */


/* one variable file: wght 100-900 for every weight, slnt 0 to -12 for true italics */
@font-face{font-family:Commissioner;src:url(assets/fonts/commissioner-vf.woff2) format("woff2");font-weight:100 900;font-style:oblique 0deg 12deg;font-display:swap}

/* ---------- Tokens (semantic roles, dark) ---------- */
:root{
  color-scheme:dark;
  --canvas:#0A0B10;
  --surface:#191B23;
  --surface-hi:#22242E;
  --floating:rgba(34,36,48,.86);
  --text:#F5F5F8;
  --text-2:#B9BAC4;
  --muted:#9294A0;
  --accent:#B9A5FF;
  --accent-container:#3B3156;
  --on-accent:#140E2B;
  --outline:rgba(255,255,255,.10);
  --outline-2:rgba(255,255,255,.20);
  --pink:#FF6FAE;
  --teal:#57E0D2;

  --r-s:12px; --r-tile:22px; --r-card:24px; --r-hero:28px;
  --font:Commissioner,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.3,0,.2,1);
  --digit-glow:rgba(226,206,255,.9);--glow-a:.2;--glow-l:62%;--lede-back:rgba(10,11,16,.56);
  /* hero petals: on :root because the gradients live in the page's shared <defs> */
  --s1a:#6B4BE0;--s1b:#3A2AA0;--s1c:#2A1F7A;
  --s2a:#A274F2;--s2b:#5E43C8;--s2c:#4A36AE;
  --s3a:#FFD9EC;--s3b:#C39DF0;--s3c:#8A6FD0;
  --sga:#FFF4FA;--sgb:#E9D6FF;--sgc:#C7B2FF;--glow-line:#F6EEFF;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;min-height:100vh;background:var(--canvas);color:var(--text);font:400 16px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{margin:0;font-weight:700;line-height:1.15}
p{margin:0}
em,i,cite{font-style:oblique 12deg}
code,pre,kbd{font-family:var(--mono)}
code{font-size:.86em;color:var(--text-2)}
::selection{background:var(--accent-container);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.muted{color:var(--muted)}
.small{font-size:13px}
.wrap{max-width:1120px;margin-left:auto;margin-right:auto;padding:0 24px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:500}
.skip:focus{top:12px}

/* ---------- Mark ---------- */
.mark{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:17px;letter-spacing:-.01em}
.mark:hover{text-decoration:none}
.mark svg{width:30px;height:24px;flex:none}

/* ---------- Pills ---------- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:0 20px;border-radius:999px;border:1px solid var(--outline-2);
  background:rgba(255,255,255,.05);color:var(--text);
  font:500 15px/1 var(--font);white-space:nowrap;cursor:pointer;
  transition:transform .1s var(--ease),background .14s var(--ease);
}
.pill:hover{background:rgba(255,255,255,.1);text-decoration:none}
.pill.primary{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.pill.primary:hover{background:#CABBFF}
.pill.big{min-height:52px;padding:0 28px;font-size:16px}
.pill.small{min-height:36px;padding:0 14px;font-size:13.5px}

/* ---------- Hero with the Island ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:110px 0 64px;margin-bottom:24px;
  isolation:isolate;
}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.hero h1{font-size:clamp(34px,5.6vw,62px);font-weight:800;letter-spacing:-.018em;line-height:1.06;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero .lede{position:relative;margin-top:18px;color:#ECECF2;font-size:18px;max-width:620px;line-height:1.6;text-wrap:balance;text-shadow:0 1px 12px rgba(0,0,0,.5)}
/* the digits and petals run behind this line, so it gets its own soft backing */
.hero .lede::before{content:"";position:absolute;inset:-46px -110px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,var(--lede-back),var(--lede-back) 34%,transparent)}
.hero-cta{margin-top:26px;animation:rise .9s var(--settle) .16s both}

.hero-note{margin-top:16px;font-size:14px;color:#C9CAD3}
.hero-note a{color:var(--text)}

/* ---------- Features ---------- */
section{margin-bottom:96px}
.feature{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;--gx:60%;--gy:50%}
.feature.flip{--gx:40%}
/* spectrum glow, centred on the demo: three neighbouring hues. Plain gradients, no blur,
   so it costs nothing to scroll past. app.js picks --g and the jitter per section */
.feature::before{
  --x:calc(var(--gx) + var(--jx,0%));--y:calc(var(--gy) + var(--jy,0%));
  content:"";position:absolute;z-index:-1;inset:-34% -44%;pointer-events:none;
  background:
    radial-gradient(19% 24% at calc(var(--x) - 8%) calc(var(--y) + 8%),hsl(calc(var(--g,270) - 55) 95% var(--glow-l) / var(--glow-a)),transparent 72%),
    radial-gradient(19% 24% at calc(var(--x) + 8%) calc(var(--y) - 8%),hsl(calc(var(--g,270) + 55) 95% var(--glow-l) / var(--glow-a)),transparent 72%),
    radial-gradient(25% 30% at var(--x) var(--y),hsl(var(--g,270) 95% var(--glow-l) / calc(var(--glow-a)*1.3)),transparent 72%);
}
#features{overflow-x:clip}
.feature.flip .f-copy{order:2}
.kicker{display:inline-block;font-size:14px;font-weight:600;font-style:oblique 12deg;color:var(--accent);margin-bottom:10px}
.f-copy h2{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.012em;margin-bottom:14px}
.f-copy > p{color:var(--text-2);font-size:17px}
.ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:26px;color:var(--text-2);font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border:solid var(--accent);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.ticks b{color:var(--text);font-weight:600}

.card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-card);padding:24px}
.demo-label{font-size:14px;color:var(--muted);margin-bottom:10px}
.demo-foot{margin-top:16px;font-size:13.5px;font-style:oblique 12deg;color:var(--muted)}

/* segmented control (Hub style) */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;background:var(--canvas);border:1px solid var(--outline)}
.seg button{min-height:48px;padding:6px 12px;border:0;border-radius:12px;background:none;color:var(--text-2);font:500 14.5px/1.25 var(--font);cursor:pointer;transition:background .14s var(--ease),color .14s}
.seg button:hover{color:var(--text)}
.seg button[aria-checked="true"]{background:var(--accent-container);color:var(--text)}
.list{list-style:none;margin:18px 0 0;padding:0;border-radius:var(--r-tile);overflow:hidden;border:1px solid var(--outline)}
.list li{display:flex;justify-content:space-between;gap:16px;padding:14px 16px;border-top:1px solid var(--outline);font-size:14.5px}
.list li:first-child{border-top:0}
.list span{color:var(--muted)}
.list b{font-weight:600;text-align:right}

/* idle timeline */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:11px;top:22px;bottom:22px;width:2px;background:linear-gradient(var(--outline-2),var(--accent) 55%,var(--teal))}
.timeline li{position:relative;display:flex;gap:18px;padding:10px 0}
.t-dot{position:relative;flex:none;width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--outline-2)}
.t-dot.wait{border-style:dashed}
.t-dot.on{border-color:var(--accent);background:var(--accent-container)}
.t-dot.on::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--accent)}
.t-dot.back{border-color:var(--teal)}
.timeline b{display:block;font-weight:600}
.timeline span{font-size:14.5px;color:var(--text-2)}

/* work mode */
.wm-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 16px;font-weight:500}
.switch{position:relative;width:52px;height:32px;flex:none;border-radius:999px;border:2px solid var(--outline-2);background:var(--canvas);cursor:pointer;transition:background .14s var(--ease),border-color .14s}
.switch span{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:transform .16s var(--ease),background .14s}
.switch[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.switch[aria-checked="true"] span{transform:translateX(20px);background:var(--on-accent)}
.notifs{display:grid;gap:4px;border-radius:var(--r-tile);overflow:hidden}
.notif{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--surface-hi)}
.notif b{display:block;font-weight:600;font-size:14.5px}
.notif p{font-size:14.5px;color:var(--text-2);margin-top:2px}
.n-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;font-weight:600;font-size:15px}
.n-ic.sms{background:#2C3A5A;color:#AFC6FF}
.n-ic.bank{background:#21413C;color:#8FE3D6}
.n-ic.mum{background:#4A2C40;color:#FFB3D6}
.allow{font-style:normal;font-size:11.5px;font-weight:500;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--accent-container);color:var(--accent)}
.txt{border-radius:4px;transition:background .18s var(--ease),color .18s var(--ease)}
.wm.on .notif.hide .txt{background:#000;color:transparent;user-select:none}

/* depth layers */
.depth{--p:0;--rx:52deg;--rz:-32deg;--zc:70px;--zs:140px;display:grid;place-items:center;min-height:420px;perspective:1200px}
.layers{position:relative;width:220px;height:330px;transform:rotateX(calc(var(--rx)*(1 - var(--p)))) rotateZ(calc(var(--rz)*(1 - var(--p))));transform-style:preserve-3d}
.layer{position:absolute;inset:0;border-radius:26px}
.l-photo{background:linear-gradient(160deg,#2E5E8F,#1B2E52 45%,#3B2A57);border:1px solid var(--outline-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.l-clock{transform:translateZ(calc(var(--zc)*(1 - var(--p))));display:grid;place-items:center;border:1px dashed rgba(255,255,255,calc(.22*(1 - var(--p))))}
.l-subject{transform:translateZ(calc(var(--zs)*(1 - var(--p))));display:grid;place-items:center;border:1px dashed rgba(255,255,255,calc(.22*(1 - var(--p))))}
.l-subject svg{width:180px;height:140px;margin-top:120px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.5))}
.digits{font-size:96px;font-weight:700;line-height:.95;text-align:center;color:rgba(255,255,255,calc(.2 + .7*var(--p)));-webkit-text-stroke:1.5px rgba(255,255,255,calc(.55*(1 - var(--p))));margin-top:-30px}
.tag{position:absolute;left:-12px;top:14px;transform:translateX(-100%);font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap;opacity:calc(1 - 2.2*var(--p))}
.tag::after{content:"";display:inline-block;width:18px;height:1px;margin-left:8px;vertical-align:middle;background:var(--outline-2)}

/* ---------- Also + trust ---------- */
.also h2,.trust h2{font-size:clamp(24px,2.8vw,30px);letter-spacing:-.02em;margin-bottom:22px}
.also-grid{display:grid;grid-template-columns:repeat(2,1fr);margin:0;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--outline);background:var(--outline);gap:1px}
.also-grid > div{background:var(--surface);padding:22px 24px}
.also-grid dt{font-weight:600;font-size:17px;margin-bottom:4px}
.opt{display:inline-block;margin-left:6px;padding:2px 9px;border:1px solid var(--outline);border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text-2);font-size:12px;font-weight:500;vertical-align:2px}
.also-grid dd{margin:0;color:var(--text-2);font-size:15px}
.trust-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.trust-list li{border-top:2px solid var(--accent-container);padding-top:16px}
.trust-list b{display:block;font-weight:600;margin-bottom:6px}
.trust-list span{color:var(--text-2);font-size:15px}

/* ---------- Grouped rows ---------- */
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.row-head h2{font-size:clamp(24px,2.8vw,30px);letter-spacing:-.02em}
.group{list-style:none;margin:0;padding:0;border-radius:var(--r-card);overflow:hidden;background:var(--surface);border:1px solid var(--outline)}
.row{padding:18px 22px;border-top:1px solid var(--outline)}
.row:first-child,.group > [hidden]:first-child + .row{border-top:0}
a.row{display:flex;align-items:center;gap:16px;color:var(--text)}
a.row:hover{background:var(--surface-hi);text-decoration:none}
.row .go{margin-left:auto;color:var(--muted)}
a.row:hover .go{color:var(--accent)}
.row-title{font-weight:600}
.row-sub{font-size:14px;color:var(--muted)}
.codebox{display:grid;place-items:center;flex:none;min-width:44px;height:44px;padding:0 10px;border-radius:14px;background:var(--accent-container);color:var(--accent);font:500 13px var(--mono)}

/* ---------- Footer ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:28px;padding-bottom:40px;border-top:1px solid var(--outline);color:var(--muted);font-size:14px}
.foot p{flex:1 1 300px;font-style:oblique 12deg}
.foot nav{display:flex;gap:20px}
.foot nav a{color:var(--text-2)}

/* ============ Harbour Dock ============ */
.dock-head{text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:120px;margin-bottom:40px}
.dock-head h1{font-size:clamp(38px,6vw,60px);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.dock-head .lede{color:var(--text-2);font-size:17px;max-width:560px}
.search{
  display:flex;align-items:center;gap:12px;width:min(580px,100%);margin-top:28px;
  padding:0 18px;min-height:56px;border-radius:999px;
  background:var(--surface);border:1px solid var(--outline-2);color:var(--muted);
}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(185,165,255,.16)}
.search svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:400 16px var(--font)}
.search input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}
.search kbd{font-size:12px;padding:2px 8px;border-radius:6px;border:1px solid var(--outline-2)}

.spotlight{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:56px;padding:26px 28px;border-radius:var(--r-hero);background:var(--surface);border:1px solid rgba(185,165,255,.35)}
.spot-main{flex:1 1 280px;min-width:0}
.spot-main h2{font-size:24px;letter-spacing:-.01em}
.spot-main h2 code{font-size:14px;color:var(--muted);font-weight:400}
.spot-main p{color:var(--text-2);font-size:14.5px;margin-top:4px;overflow-wrap:anywhere}
.spotlight .codebox{min-width:60px;height:60px;border-radius:18px;font-size:14px}

.row.build{padding:0}
.build-main{display:flex;align-items:center;gap:16px;padding:18px 22px}
.build-title{flex:1;min-width:0}
.build-title h3{font-size:17px;font-weight:600}
.build-title p{font-size:14px;margin-top:2px}
.ver-chip{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--accent-container);color:var(--accent);font-weight:500;font-size:13px;margin-right:4px}
.more{border-top:1px solid var(--outline)}
.more summary{list-style:none;cursor:pointer;padding:14px 22px;font-size:14.5px;color:var(--text-2);display:flex;align-items:center;gap:8px;min-height:48px}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";width:8px;height:8px;margin-left:auto;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s var(--ease)}
.more[open] summary::after{transform:rotate(-135deg)}
.more summary:hover{background:var(--surface-hi);color:var(--text)}
.more-body{padding:4px 22px 20px;display:grid;gap:14px}
.sha-line{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 14px;border-radius:var(--r-s);background:var(--canvas);border:1px solid var(--outline)}
.sha-line code{flex:1;min-width:0;font-size:12.5px;overflow-wrap:anywhere}
.images h4{margin:0;font-size:15.5px;font-weight:600}
.images > p{font-size:14px;margin-top:2px}
.image-list{list-style:none;margin:10px 0 0;padding:0;display:grid}
.image-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 0;border-top:1px solid var(--outline)}
.image-name{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:1px}
.image-name code{font-size:13.5px;color:var(--text)}
.image-name span{font-size:13.5px}
.notes{margin:0;white-space:pre-wrap;font:400 14px/1.6 var(--font);color:var(--text-2);max-height:280px;overflow:auto}
.notes:empty{display:none}
.older{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.older:empty{display:none}
.older li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 0;border-top:1px solid var(--outline);font-size:14px}
.older li a{flex:1 1 260px;overflow-wrap:anywhere}

.sec-head{margin-bottom:24px;max-width:640px}
.sec-head h2{font-size:clamp(24px,2.8vw,30px);letter-spacing:-.02em}
.sec-head p{color:var(--text-2);margin-top:8px}
.row.step{display:flex;gap:18px;align-items:flex-start;padding:22px}
.step-n{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent-container);color:var(--accent);font-weight:600}
.step h3{font-size:17px;font-weight:600;margin-bottom:4px}
.step p{color:var(--text-2);font-size:15px}
.code{margin:12px 0 8px;padding:12px 16px;border-radius:var(--r-s);background:var(--canvas);border:1px solid var(--outline);color:var(--teal);font-size:14px;overflow-x:auto}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .feature,.feature.flip{grid-template-columns:1fr;gap:28px;--gx:50%;--gy:62%}
  .feature.flip .f-copy{order:0}
  .trust-list{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .hero{padding:96px 0 40px}
  .hero .lede{font-size:16.5px}
  section{margin-bottom:72px}
  .also-grid,.trust-list{grid-template-columns:1fr}
  .depth{min-height:340px}
  .layers{width:170px;height:260px;margin-left:60px}
  .digits{font-size:72px}
  .l-subject svg{width:140px;height:110px;margin-top:96px}
  .build-main{flex-wrap:wrap;padding:16px}
  .build-main .dl{flex:1 1 100%}
  .more summary,.more-body{padding-left:16px;padding-right:16px}
  .search kbd{display:none}
  .dock-head{padding-top:100px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
}

/* ============================================================
   Motion. Transform and opacity only, so everything stays on the
   compositor at 60fps. Curves follow the guidance: presses 80–140ms,
   entrances 180–260ms (a little longer for hero content), springs
   that overshoot slightly and settle.
   ============================================================ */
:root{
  --spring:cubic-bezier(.34,1.56,.64,1);
  --settle:cubic-bezier(.22,1,.36,1);
}

/* Logo bump: the bloom squashes onto its stem, springs up, settles. */
.mark svg{transform-origin:50% 92%;animation:bump 4.2s var(--settle) infinite}
/* anything looping stops ticking once app.js sees it leave the screen */
.off *{animation-play-state:paused!important}
.foot .mark svg{animation-delay:1.4s}
@keyframes bump{
  0%,72%,100%{transform:none}
  76%{transform:scale(1.08,.88)}
  82%{transform:scale(.94,1.1) translateY(-8%)}
  88%{transform:scale(1.03,.97)}
  93%{transform:scale(.99,1.01)}
}
@keyframes bump-hover{
  0%{transform:none}
  20%{transform:scale(1.12,.84)}
  45%{transform:scale(.9,1.14) translateY(-12%) rotate(-4deg)}
  70%{transform:scale(1.04,.97) rotate(1deg)}
  100%{transform:none}
}

/* Hero entrance, staggered */
.hero .lede{animation-delay:.08s}
.hero-note{animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@keyframes breathe{0%,100%{transform:none}50%{transform:translateY(-4px) scale(1.012)}}

/* Nav tightens once you scroll */

/* Pills: lift on hover, squash on press */
.pill{transition:transform .14s var(--spring),background .14s var(--ease),box-shadow .2s var(--ease)}
.pill.primary:hover{box-shadow:0 8px 24px -8px rgba(185,165,255,.65)}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--settle),transform .7s var(--settle)}
.reveal.in{opacity:1;transform:none}
.reveal .ticks li{opacity:0;transform:translateX(-10px);transition:opacity .5s var(--settle),transform .5s var(--settle)}
.reveal.in .ticks li{opacity:1;transform:none}
.reveal.in .ticks li:nth-child(2){transition-delay:.08s}
.reveal.in .ticks li:nth-child(3){transition-delay:.16s}
.reveal .demo{transition:transform .8s var(--settle) .1s,opacity .8s var(--settle) .1s}
.reveal:not(.in) .demo{opacity:0;transform:translateY(20px) scale(.98)}
.trust-list li,.also-grid > div{transition:transform .25s var(--settle),background .2s var(--ease)}
.also-grid > div:hover{background:var(--surface-hi)}
.reveal .trust-list li,.reveal .also-grid > div{opacity:0;transform:translateY(14px);transition:opacity .5s var(--settle),transform .5s var(--settle)}
.reveal.in .trust-list li,.reveal.in .also-grid > div{opacity:1;transform:none}
.reveal.in :is(.trust-list li,.also-grid > div):nth-child(2){transition-delay:.07s}
.reveal.in :is(.trust-list li,.also-grid > div):nth-child(3){transition-delay:.14s}
.reveal.in :is(.trust-list li,.also-grid > div):nth-child(4){transition-delay:.21s}
.reveal.in .also-grid > div:nth-child(5){transition-delay:.28s}

/* Cards */
.card{transition:transform .3s var(--settle),border-color .2s var(--ease)}

/* Services: values cross-fade when the provider changes */
.list b{display:inline-block;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.list b.swap{opacity:0;transform:translateY(6px)}
.seg{position:relative}
.seg button{position:relative;z-index:1}
.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:12px;background:var(--accent-container);transition:transform .32s var(--spring)}
.seg[data-pos="1"]::before{transform:translateX(calc(100% + 4px))}
.seg button[aria-checked="true"]{background:none}

/* Idle timeline: the line draws in, the active dot pulses */
.timeline::before{transform-origin:top;transition:transform 1.1s var(--settle) .2s}
.reveal:not(.in) .timeline::before{transform:scaleY(0)}
.timeline li{transition:opacity .5s var(--settle),transform .5s var(--settle)}
.reveal:not(.in) .timeline li{opacity:0;transform:translateX(-8px)}
.reveal.in .timeline li:nth-child(2){transition-delay:.25s}
.reveal.in .timeline li:nth-child(3){transition-delay:.5s}
.reveal.in .timeline li:nth-child(4){transition-delay:.75s}
.t-dot.on::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(1.5);opacity:0}}
.t-dot.wait{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Work mode: redaction bars sweep in from the left */
.txt{position:relative;display:inline-block}
.txt::after{content:"";position:absolute;inset:-1px -3px;border-radius:4px;background:#000;transform:scaleX(0);transform-origin:left;transition:transform .32s var(--settle)}
.wm.on .notif.hide .txt{background:none;color:inherit}
.wm.on .notif.hide .txt::after{transform:none}
.wm.on .notif.hide:nth-child(2) .txt::after{transition-delay:.06s}
.notif{transition:transform .25s var(--settle)}
.allow{display:inline-block;transition:transform .3s var(--spring)}
.wm.on .allow{animation:pop .5s var(--spring) .2s}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:none}}
.switch span{transition:transform .26s var(--spring),background .14s}

/* Rows */
a.row{transition:background .14s var(--ease)}
.row .go{transition:transform .25s var(--spring),color .14s}
.codebox{transition:transform .25s var(--spring)}
.row.build{transition:background .14s var(--ease)}
.row.build:hover{background:rgba(255,255,255,.015)}
.more-body{animation:rise .35s var(--settle)}
.spotlight{animation:rise .8s var(--settle) .1s both}
.dock-head > *{animation:rise .8s var(--settle) both}
.dock-head > :nth-child(2){animation-delay:.07s}
.dock-head > :nth-child(3){animation-delay:.14s}
.dock-head h1::before{transform-origin:50% 92%;animation:bump 4.2s var(--settle) infinite}
.search{transition:border-color .15s var(--ease),box-shadow .2s var(--ease),transform .25s var(--settle)}
.search:focus-within{transform:scale(1.015)}
.row-head.sec-head{max-width:none}
.dock-head h1::before{content:"";display:block;width:64px;height:50px;margin:0 auto 18px;background:url(assets/logo.svg) center/contain no-repeat}

/* ---------- Hover effects only where there is a real hover ---------- */
@media (hover:hover) and (pointer:fine){
  .pill:hover{transform:translateY(-1px)}
  .card:not(.si):hover{transform:translateY(-3px);border-color:var(--outline-2)}
  .notif:hover{transform:translateX(3px)}
  .trust-list li:hover{transform:translateY(-3px)}
  a.row:hover .go{transform:translateX(5px)}
  a.row:hover .codebox,.row.build:hover .codebox{transform:scale(1.06) rotate(-2deg)}
  .mark:hover svg{animation:bump-hover .7s var(--settle)}
}

.depth-legend{display:none}

.yours{font-style:normal;font-size:12px;font-weight:500;margin-left:4px;padding:2px 9px;border-radius:999px;background:rgba(87,224,210,.16);color:var(--teal);vertical-align:2px}

/* ---------- Phones ---------- */
@media (max-width:640px){
  .hero h1{font-size:clamp(29px,8.4vw,36px)}
  .hero .lede{font-size:16px;margin-top:14px}
  .f-copy h2{font-size:26px}
  .f-copy > p{font-size:16px}
  .card{padding:18px}
  .seg button{font-size:13.5px;min-height:52px}
  .list li{padding:12px 14px;font-size:14px}
  .depth{--rx:38deg;--rz:-18deg;--zc:40px;--zs:80px;min-height:0;padding:28px 0 8px;display:flex;flex-direction:column;align-items:center;gap:22px}
  .layers{width:150px;height:230px;margin:0}
  .digits{font-size:62px;margin-top:-24px}
  .l-subject svg{width:120px;height:94px;margin-top:84px}
  .tag{display:none}
  .depth-legend{display:flex;gap:16px;font-size:13px;color:var(--muted)}
  .depth-legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--outline-2)}
  .depth-legend span:nth-child(2)::before{background:var(--accent)}
  .depth-legend span:nth-child(3)::before{background:#F5DCEB}
  .reveal{transform:translateY(16px)}
}
/* ---------- CATBACK: car display demo ---------- */
.feature-wide{grid-template-columns:5fr 7fr}
.f-copy > p.fine{margin-top:16px;font-size:13.5px;font-style:oblique 12deg;color:var(--muted)}

/* ============================================================
   The Island header. lens.js bakes the SystemUI slab into --slab and
   the BlurFilter lens into an SVG filter (--lens) that bends the real
   page behind it. The CTA is its own lens beside the island, because a
   nested backdrop-filter would only see the island, not the page.
   ============================================================ */
.island-wrap{position:sticky;top:12px;z-index:50;height:0;display:flex;align-items:flex-start;justify-content:center;padding:0 12px;margin-top:12px;overflow:visible}
.island-shell{position:relative;flex:none;width:min(640px,100%)}
.island-wrap{transition:opacity .28s var(--ease),translate .42s var(--settle),visibility 0s}
.at-hero .island-wrap{opacity:0;translate:0 -110px;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),translate .3s var(--ease),visibility 0s .3s}
.lens{
  position:relative;isolation:isolate;
  background:var(--grain,none) 0 0/var(--grain-size,96px) repeat,var(--slab,rgba(16,16,18,.66)) center/100% 100% no-repeat;
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
}
.lens.lens-live{backdrop-filter:var(--lens) saturate(1.35);-webkit-backdrop-filter:var(--lens) saturate(1.35)}
.at-hero .lens.lens-live{backdrop-filter:none;-webkit-backdrop-filter:none}
/* the lens re-bends everything behind it each frame, which a moving page can't afford. The
   nav holds plain frost while scrolling or with a demo on screen, and gets the lens back
   once nothing on screen is moving */
.island-wrap:is(.moving,.busy) .lens.lens-live{backdrop-filter:blur(14px) saturate(1.35);-webkit-backdrop-filter:blur(14px) saturate(1.35)}
/* 1dp rim, 0x2E white at the top fading to 0x0A (IslandGlass.java) */
.lens::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
/* 700ms sheen: 40% band at -22°, fades before the far edge */
.lens::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%) no-repeat;
  background-size:40% 100%;background-position:-60% 0;
}
.lens.sheen::after{animation:sheen .7s linear}
@keyframes sheen{0%{opacity:1;background-position:-60% 0}75%{opacity:1}100%{opacity:0;background-position:160% 0}}

.island{
  display:flex;align-items:center;gap:14px;width:100%;min-height:68px;
  padding:8px calc(var(--cta-w,130px) + 16px) 8px 10px;border-radius:999px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
}
.island-mark{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:50%}
.island-mark svg{width:38px;height:30px}
.island-mark:hover{text-decoration:none}
.island-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.8),0 0 20px rgba(0,0,0,.6)}
.island-text b{font-size:15.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.island-text span{font-size:13.5px;color:#D2D3DB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme-btn{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .14s var(--ease)}
.theme-btn:hover{background:var(--outline)}
.theme-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.theme-btn .moon{display:none}
.island-wrap.scrolled .island-shell{transform:scale(.97);transition:transform .35s var(--settle)}
.island-shell{transition:transform .35s var(--settle)}

/* refractive CTA: the same lens, tinted with the accent */
.pill.cta{
  position:absolute;right:9px;top:50%;translate:0 -50%;z-index:1;
  min-height:50px;padding:0 22px;border:0;border-radius:999px;color:#fff;font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  background:var(--slab,var(--accent-container)) center/100% 100% no-repeat;
  box-shadow:0 6px 18px -8px rgba(185,165,255,.7);
}
.pill.cta::before{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.08))}
.pill.cta:hover{background:var(--slab,var(--accent-container)) center/100% 100% no-repeat;color:#fff;filter:brightness(1.06)}

/* neon comet (Catback, 1500ms) */
.comet{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;--comet:var(--accent)}
.comet rect{fill:none;stroke:var(--comet);stroke-linecap:round}
.comet-glow{stroke-width:6;opacity:.35;filter:blur(3px)}
.comet-core{stroke-width:1.6}

/* ---------- Hero: stock wallpaper + glass clock digits ---------- */
.hero{padding-top:64px;margin-top:-12px}
/* the bloom, grown huge: three rings of edge-lit petals fanning up through the hero. Each
   ring is its own layer, so the slow sway only has to move a layer and the rings drift apart */
.hero-wall{
  --art-bg:radial-gradient(44% 46% at 50% 84%,rgba(160,116,255,.38),transparent 72%),radial-gradient(78% 74% at 50% 100%,#2A1B66,#130E30 60%,var(--canvas));
  --art-1:1;--art-2:1;--art-3:1;--art-line:rgba(205,190,255,.95);
  --art-fade:linear-gradient(180deg,rgba(10,11,16,.4),transparent 30%,transparent 62%,rgba(10,11,16,.1) 70%,rgba(10,11,16,.34) 78%,rgba(10,11,16,.66) 86%,rgba(10,11,16,.9) 93%,var(--canvas) 99%);
  --art-scrim:radial-gradient(46% 30% at 50% 47%,rgba(10,11,16,.72),rgba(10,11,16,.34) 62%,transparent 80%);
  position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--art-bg);
}
.hero-wall::before{content:"";position:absolute;inset:0;z-index:1;background:var(--art-scrim),var(--art-fade)}
.hero-wall::after{
  content:"";position:absolute;inset:0;z-index:2;opacity:.05;
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.art{position:absolute;left:-8%;top:-6%;width:116%;height:106%;overflow:visible;transform-origin:50% 104%}
/* rest sits under full strength so a petal has room to glow: app.js lifts both to 1 to flare it */
/* only seen without a GPU, where the hero stands still: startPetals draws them otherwise */
.art use{fill-opacity:.7;stroke:var(--art-line);stroke-opacity:.42;stroke-width:1px;vector-effect:non-scaling-stroke}
.petals{position:absolute;inset:0;width:100%;height:100%}
.s1a{stop-color:var(--s1a);stop-opacity:1}.s1b{stop-color:var(--s1b);stop-opacity:.72}.s1c{stop-color:var(--s1c);stop-opacity:0}
.s2a{stop-color:var(--s2a);stop-opacity:1}.s2b{stop-color:var(--s2b);stop-opacity:.62}.s2c{stop-color:var(--s2c);stop-opacity:0}
.s3a{stop-color:var(--s3a);stop-opacity:1}.s3b{stop-color:var(--s3b);stop-opacity:.62}.s3c{stop-color:var(--s3c);stop-opacity:0}
.art-1{opacity:var(--art-1)}.art-2{opacity:var(--art-2)}.art-3{opacity:var(--art-3)}
/* the SVGs only open if startPetals gives up on the GPU: playing their entrance until app.js
   arrives meant the opening ran once here, then jumped back to the start on the canvas */
.js .hero-wall:not(.still) .art{display:none}
.still .art-1{animation:art-open 2s var(--settle) both}
.still .art-2{animation:art-open 1.8s var(--settle) .1s both}
.still .art-3{animation:art-open 1.6s var(--settle) .2s both}
@keyframes art-open{from{opacity:0;scale:.82}}
.hero-head{position:relative}
/* above the tagline's backing, which has to sit over the digits */
.hero h1{position:relative;z-index:1}
/* the entrance only moves opacity and scale, so it stays on the compositor. The soft
   overexposed look is a text-shadow on its own layer: painted once, then just faded */
.hero-digits,.hero-glow{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:-1;pointer-events:none;
  text-align:center;font-weight:800;line-height:.8;letter-spacing:-.02em;white-space:nowrap;
  font-size:min(45vw,470px);color:transparent;will-change:opacity,scale;
  animation-play-state:paused;
}
.hero-digits{
  -webkit-text-stroke:1.5px rgba(255,255,255,.34);
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05));-webkit-background-clip:text;background-clip:text;
  animation:digits-in 3s cubic-bezier(.22,.7,.16,1) .1s both paused;
}
.hero-glow{
  opacity:0;text-shadow:0 0 26px var(--digit-glow),0 0 74px var(--digit-glow);
  animation:digits-glow 3s cubic-bezier(.3,.5,.2,1) .1s both paused;
}
.hero.go .hero-digits,.hero.go .hero-glow{animation-play-state:running}
@keyframes digits-in{0%{opacity:0;scale:1.5}45%{opacity:.5}100%{opacity:1;scale:1}}
@keyframes digits-glow{0%{opacity:0;scale:1.5}28%{opacity:1}100%{opacity:0;scale:1}}
.hero h1,.hero .lede,.hero-note{animation:rise .9s var(--settle) both}
.hero .lede{animation-delay:.08s}
.hero-note{margin-top:26px;animation-delay:.16s}

/* ---------- Silk panels (Catback ui/Silk.java, from SystemUI NotificationSilkDrawable):
   solid surface, baked satin light, lit 1dp edge. No blur, no motion. ---------- */
.card,.group,.also-grid,.spotlight,.seg,.list{
  border:1px solid transparent;
  background:
    linear-gradient(135deg,rgba(255,255,255,.047),rgba(185,165,255,.063) 50%,transparent) padding-box,
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.31),rgba(255,255,255,.03) 38%,rgba(255,255,255,.07)) border-box;
}
.seg,.list{background:
    linear-gradient(var(--canvas),var(--canvas)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 38%,rgba(255,255,255,.06)) border-box}
.also-grid{gap:0}
.also-grid > div{background:none;border-top:1px solid var(--outline)}
.also-grid > div:first-child{border-top:0}
/* the first tile spans the grid, so an odd one out at the end spans it too */
.also-grid > div:last-child:nth-child(even){grid-column:1 / -1}
.also-grid > div:nth-child(odd):not(:first-child){border-left:1px solid var(--outline)}

@media (max-width:640px){
  .island-wrap{top:8px;margin-top:8px;padding:0 8px}
  .island{min-height:60px;gap:8px;padding:6px calc(var(--cta-w,110px) + 12px) 6px 6px}
  .island-mark{width:42px;height:42px}
  .island-mark svg{width:32px;height:25px}
  .island{gap:5px}
  .theme-btn{width:34px;height:34px}
  .island-text b{font-size:14px}
  .island-text span{font-size:12.5px}
  .pill.cta{right:7px;min-height:46px;padding:0 16px;font-size:14.5px}
  .hero{padding-top:40px;margin-top:-8px}
  .dock-head{padding-top:96px}
  .also-grid > div:nth-child(odd):not(:first-child){border-left:0}
}

/* ============================================================
   CATBACK car screen, translated from ui/CarUi.java. Everything is in
   CarUi layout units: the car UI is 480 units tall and as wide as the
   panel's aspect. 1u = 100cqh / 480. Colours, sizes and timings are the
   APK's constants. Font: Commissioner, as CarUi loads it.
   ============================================================ */
.car{display:block}
.cb{
  --W:800;                                    /* 800x480, the DHU captures in AA4POS/artifacts */
  --u:calc(100cqh / 480);
  --x0:20; --gap:12; --top:52; --bottom:460;
  --navW:calc((var(--W) - 52) * 1.45 / 2.45);
  --mediaH:calc((var(--bottom) - var(--top) - var(--gap)) * 1.35 / 2.35);
  --PANEL:rgba(25,27,35,.5); --ACCENT:#B9A5FF; --AC:#3B3156; --TEXT:#F5F5F8; --TEXT2:#B9BAC4; --ON:#17112E;
  position:relative;width:100%;aspect-ratio:var(--W) / 480;container-type:size;overflow:hidden;
  border-radius:18px;background:#05060A;outline:6px solid #121318;outline-offset:0;
  font-family:Commissioner,var(--font);color:var(--TEXT);line-height:1;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9);
}
.cb *{position:absolute;box-sizing:border-box}
:where(.cb button){appearance:none;border:0;padding:0;background:none;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cb :focus-visible{outline:calc(2*var(--u)) solid var(--ACCENT);outline-offset:calc(2*var(--u))}
.cb svg{fill:currentColor}
/* Backdrop.java: wallpaper, cropped, + 0x40000000 so white text stays readable */
.cb-wall{inset:0;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),url(assets/wallpaper.jpg) center/cover}
.cb-status{left:0;top:0;width:100%;height:calc(48*var(--u))}
.cb-clock{left:calc(20*var(--u));top:calc(17*var(--u));font-size:calc(20*var(--u));font-weight:600}
.cb-dots{left:calc(86*var(--u));top:calc(17*var(--u));width:calc(16*var(--u));height:calc(16*var(--u))}
.cb-dots i{width:calc(3.6*var(--u));height:calc(3.6*var(--u));border-radius:50%;background:var(--TEXT2)}
.cb-dots i:nth-child(3n+2){left:calc(6*var(--u))}.cb-dots i:nth-child(3n){left:calc(12*var(--u))}
.cb-dots i:nth-child(n+4){top:calc(6*var(--u))}.cb-dots i:nth-child(n+7){top:calc(12*var(--u))}
.cb-right{right:calc(20*var(--u));top:calc(17*var(--u));display:flex;align-items:center;gap:calc(8*var(--u));font-size:calc(15*var(--u));font-weight:500;color:var(--TEXT2)}
.cb-right *{position:static}
.cb-right svg{width:calc(18*var(--u));height:calc(18*var(--u))}

/* panels: 50% surface over frosted wall, then Silk (satin + lit 1u edge) */
.cb-panel{
  overflow:hidden;border:calc(1*var(--u)) solid transparent;
  background:
    linear-gradient(135deg,rgba(255,255,255,.047),rgba(185,165,255,.063),transparent) padding-box,
    linear-gradient(var(--PANEL),var(--PANEL)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.31),rgba(255,255,255,.03) 38%,rgba(255,255,255,.07)) border-box;
}
.cb-maps{left:calc(var(--x0)*var(--u));top:calc(var(--top)*var(--u));width:calc(var(--navW)*var(--u));height:calc((var(--bottom) - var(--top))*var(--u));border-radius:calc(24*var(--u))}
.cb-media{right:calc(20*var(--u));top:calc(var(--top)*var(--u));width:calc((var(--W) - 52 - var(--navW))*var(--u));height:calc(var(--mediaH)*var(--u));border-radius:calc(28*var(--u))}
.cb-msgs{right:calc(20*var(--u));top:calc((var(--top) + var(--mediaH) + var(--gap))*var(--u));width:calc((var(--W) - 52 - var(--navW))*var(--u));height:calc((var(--bottom) - var(--top) - var(--mediaH) - var(--gap))*var(--u));border-radius:calc(24*var(--u))}

/* maps: a night-mode nav view. The world is an SVG built in app.js; the banner and
   sheet float over it the way a car nav app lays them out */
.cb-maps{background:#242f3e}
.cb-map{inset:0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cb-map.drag{cursor:grabbing}
.cb-map svg{left:0;top:0;width:100%;height:100%;display:block}
.cb-map text{font:600 15px Commissioner,var(--font);fill:#AEB7C4;stroke:#1A212C;stroke-width:3px;paint-order:stroke;text-anchor:middle}
.cb-map text.poi{fill:#8FD3C7}
.cb-banner{left:calc(12*var(--u));right:calc(12*var(--u));top:calc(12*var(--u));height:calc(84*var(--u));border-radius:calc(18*var(--u));background:#0B7A4B;box-shadow:0 calc(4*var(--u)) calc(14*var(--u)) rgba(0,0,0,.45);pointer-events:none}
.cb-turn{left:calc(12*var(--u));top:calc(12*var(--u));width:calc(60*var(--u));height:calc(60*var(--u));color:#fff}
.cb-turn svg{inset:0;width:100%;height:100%}
.cb-turn[data-turn="left"] svg{transform:scaleX(-1)}
.cb-turn[data-turn="arrive"] svg{opacity:0}
.cb-turn[data-turn="arrive"]::after{content:"";position:absolute;inset:22%;border-radius:50%;border:calc(6*var(--u)) solid #fff}
.cb-instr{left:calc(84*var(--u));top:calc(15*var(--u));font-size:calc(26*var(--u));font-weight:700;color:#fff}
.cb-detail{left:calc(84*var(--u));right:calc(12*var(--u));top:calc(50*var(--u));font-size:calc(15*var(--u));color:#D5F0E2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-recenter{left:calc(12*var(--u));bottom:calc(84*var(--u));height:calc(34*var(--u));padding:0 calc(14*var(--u));border-radius:999px;background:#20262F;color:#8AB4F8;font-size:calc(13*var(--u));font-weight:600;box-shadow:0 calc(2*var(--u)) calc(8*var(--u)) rgba(0,0,0,.45)}
.cb-zoom{right:calc(12*var(--u));bottom:calc(84*var(--u));width:calc(40*var(--u));height:calc(80*var(--u));border-radius:calc(14*var(--u));background:#20262F;box-shadow:0 calc(2*var(--u)) calc(8*var(--u)) rgba(0,0,0,.45)}
.cb-zoom button{left:0;width:100%;height:50%;font-size:calc(22*var(--u));font-weight:500;line-height:1;color:var(--TEXT)}
.cb-zoom button:first-child{top:0}.cb-zoom button:last-child{bottom:0}
.cb-sheet{left:calc(12*var(--u));right:calc(12*var(--u));bottom:calc(12*var(--u));height:calc(62*var(--u));border-radius:calc(18*var(--u));background:rgba(20,24,31,.94);box-shadow:0 calc(4*var(--u)) calc(14*var(--u)) rgba(0,0,0,.45)}
.cb-mins{left:calc(16*var(--u));top:calc(11*var(--u));font-size:calc(21*var(--u));font-weight:700;color:#6FDD9F}
.cb-eta{left:calc(16*var(--u));bottom:calc(11*var(--u));font-size:calc(13*var(--u));font-weight:500;color:var(--TEXT2)}
.cb-chip{right:calc(14*var(--u));bottom:calc(14*var(--u));display:flex;align-items:center;gap:calc(7*var(--u));height:calc(28*var(--u));padding:0 calc(12*var(--u)) 0 calc(5*var(--u));border-radius:999px;background:rgba(10,11,16,.55);box-shadow:inset 0 0 0 calc(1*var(--u)) rgba(255,255,255,.1);font-size:calc(12*var(--u));font-weight:600;color:var(--TEXT)}
.cb-chip.inline{left:calc(94*var(--u));right:auto;top:calc(60*var(--u));bottom:auto;height:calc(24*var(--u));font-size:calc(11*var(--u))}
.cb-chip.inline .cb-appic{width:calc(16*var(--u));height:calc(16*var(--u))}
.cb-chip *{position:static}
.cb-chip b{font-weight:400;font-size:calc(9*var(--u));color:var(--TEXT2)}
.cb-appic{display:block;width:calc(20*var(--u));height:calc(20*var(--u));border-radius:50%}
.cb-appic.music{background:url(assets/logo.svg) center/70% no-repeat,#241E36}
.cb-appic.maps{background:linear-gradient(135deg,#6EE7B7,#0E9F6E)}

/* media */
.cb-art{left:calc(16*var(--u));top:calc(16*var(--u));width:calc(64*var(--u));height:calc(64*var(--u));border-radius:calc(14*var(--u));background:url(assets/logo.svg) center/62% no-repeat,linear-gradient(160deg,#4A3A78,#1E2A4E);filter:hue-rotate(var(--hue,0deg));transition:filter .4s var(--ease)}
.cb-title{left:calc(94*var(--u));top:calc(21*var(--u));font-size:calc(17*var(--u));font-weight:600}
.cb-artist{left:calc(94*var(--u));top:calc(43*var(--u));font-size:calc(14*var(--u));color:var(--TEXT2)}
.cb-eq{right:calc(16*var(--u));top:calc(24*var(--u));width:calc(25*var(--u));height:calc(18*var(--u))}
.cb-eq i{top:0;width:calc(2.5*var(--u));height:100%;border-radius:calc(1.25*var(--u));background:var(--ACCENT)}
/* IslandConstants.BAR_OMEGA {5.1,6.3,4.4,7.0,5.7,6.9}: k = .3 + .7·(.5 + .5·sin(t·ω/2 + 1.7i)) */
.cb-eq i,.cb-isl-eq i{animation:cb-bar var(--p) ease-in-out var(--d) infinite alternate;transform:scaleY(.3)}
.cb.paused .cb-eq i,.cb.paused .cb-isl-eq i{animation:none;transform:scaleY(.14)}
.cb-eq i:nth-child(1),.cb-isl-eq i:nth-child(1){left:0;--p:1.232s;--d:0s}
.cb-eq i:nth-child(2),.cb-isl-eq i:nth-child(2){left:calc(4.5*var(--u));--p:.997s;--d:-.54s}
.cb-eq i:nth-child(3),.cb-isl-eq i:nth-child(3){left:calc(9*var(--u));--p:1.428s;--d:-1.55s}
.cb-eq i:nth-child(4),.cb-isl-eq i:nth-child(4){left:calc(13.5*var(--u));--p:.898s;--d:-1.46s}
.cb-eq i:nth-child(5){left:calc(18*var(--u));--p:1.102s;--d:-2.39s}
.cb-eq i:nth-child(6){left:calc(22.5*var(--u));--p:.911s;--d:-2.46s}
@keyframes cb-bar{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.cb-seek{left:calc(16*var(--u));right:calc(16*var(--u));bottom:calc(96*var(--u));height:calc(6*var(--u));border-radius:calc(3*var(--u));background:rgba(255,255,255,.12);cursor:pointer;touch-action:pan-y}
.cb-seek::before{content:"";position:absolute;left:0;right:0;top:calc(-14*var(--u));bottom:calc(-14*var(--u))}
.cb-seek i{left:0;top:0;height:100%;width:38%;border-radius:inherit;background:var(--ACCENT)}
.cb-seek i::after{content:"";position:absolute;right:calc(-7*var(--u));top:calc(-4*var(--u));width:calc(14*var(--u));height:calc(14*var(--u));border-radius:50%;background:#fff}
.cb-times{left:calc(16*var(--u));right:calc(16*var(--u));bottom:calc(66*var(--u));display:flex;justify-content:space-between;font-size:calc(12*var(--u));color:var(--TEXT2)}
.cb-times span{position:static}
.cb-controls{left:50%;bottom:calc(16*var(--u));width:0;height:calc(56*var(--u))}
.cb-btn{top:50%;width:calc(48*var(--u));height:calc(48*var(--u));margin:calc(-24*var(--u)) 0 0 calc(-24*var(--u));border-radius:50%;color:var(--TEXT)}
.cb-btn::after{content:"";position:absolute;inset:-8px}
.cb-zoom button::after{content:"";position:absolute;inset:0 -6px}
.cb-btn:nth-child(1){left:calc(-70*var(--u))}.cb-btn:nth-child(3){left:calc(70*var(--u))}
.cb-btn.play{left:0;width:calc(56*var(--u));height:calc(56*var(--u));margin:calc(-28*var(--u)) 0 0 calc(-28*var(--u));background:var(--ACCENT);color:var(--ON)}
.cb-btn svg{left:50%;top:50%;width:calc(26*var(--u));height:calc(26*var(--u));margin:calc(-13*var(--u)) 0 0 calc(-13*var(--u));transition:opacity .16s var(--ease),transform .3s var(--spring)}
.cb:not(.paused) .ic-play,.cb.paused .ic-pause{opacity:0;transform:scale(.4) rotate(-90deg)}

/* messages carousel: 420ms ease-in-out-cubic, drifts every 6s until you swipe it */
.cb-msgs{cursor:grab;touch-action:pan-x;user-select:none;-webkit-user-select:none}
.cb-track{inset:0;transition:transform .42s cubic-bezier(.65,0,.35,1)}
.cb-card{left:0;width:100%;height:100%;transition:opacity .42s cubic-bezier(.65,0,.35,1)}
.cb-track.drag{transition:none}
.cb-track.drag .cb-card{opacity:1!important;transition:none}
.cb-av{left:calc(16*var(--u));top:50%;width:calc(44*var(--u));height:calc(44*var(--u));margin-top:calc(-22*var(--u));border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:calc(17*var(--u))}
.cb-hd{left:calc(72*var(--u));top:calc(50% - 30*var(--u));font-size:calc(11*var(--u));font-weight:500;color:var(--TEXT2)}
.cb-tt{left:calc(72*var(--u));top:calc(50% - 11*var(--u));font-size:calc(15*var(--u));font-weight:600}
.cb-tx{left:calc(72*var(--u));top:calc(50% + 9*var(--u));font-size:calc(13*var(--u));color:var(--TEXT2);white-space:nowrap}
.cb-cdots{right:calc(5*var(--u));top:50%;translate:0 -50%;display:flex;flex-direction:column}
.cb-cdots button{position:relative;width:calc(14*var(--u));height:calc(14*var(--u))}
.cb-cdots button::after{content:"";position:absolute;left:50%;top:50%;width:calc(5*var(--u));height:calc(5*var(--u));margin:calc(-2.5*var(--u)) 0 0 calc(-2.5*var(--u));border-radius:50%;background:rgba(255,255,255,.25);transition:transform .2s,background .2s}
.cb-cdots button.on::after{background:var(--ACCENT);transform:scale(1.36)}

/* island: glass only here. 0xA8101012 tint, 1u rim 0x2E→0x0A, blur behind */
.cb-island{
  left:50%;top:calc(9*var(--u));width:0;height:0;overflow:hidden;translate:-50% 0;pointer-events:none;
  background:rgba(16,16,18,.66);
  backdrop-filter:blur(calc(12*var(--u))) saturate(1.4);-webkit-backdrop-filter:blur(calc(12*var(--u))) saturate(1.4);
  box-shadow:inset 0 0 0 calc(1*var(--u)) rgba(255,255,255,.1),inset 0 calc(1*var(--u)) 0 rgba(255,255,255,.18);
}
.cb-isl-in{inset:0}
.cb-cap-ic{left:calc(6*var(--u));top:50%;width:calc(18*var(--u));height:calc(18*var(--u));margin-top:calc(-9*var(--u));border-radius:50%}
.cb-cap-tt{left:calc(30*var(--u));top:50%;transform:translateY(-50%);font-size:calc(12*var(--u));font-weight:700;white-space:nowrap}
.cb-isl-eq{right:calc(10*var(--u));top:50%;width:calc(16*var(--u));height:calc(12*var(--u));margin-top:calc(-6*var(--u))}
.cb-isl-eq i{top:0;width:calc(2.5*var(--u));height:100%;border-radius:calc(1.25*var(--u));background:var(--ACCENT)}
.cb-card-ind{left:50%;top:calc(12*var(--u));width:calc(28*var(--u));height:calc(3*var(--u));margin-left:calc(-14*var(--u));border-radius:calc(1.5*var(--u));background:rgba(255,255,255,.25)}
.cb-card-ic{left:calc(14*var(--u));top:calc(24*var(--u));width:calc(16*var(--u));height:calc(16*var(--u));border-radius:calc(4*var(--u))}
.cb-card-hd{left:calc(36*var(--u));top:calc(26*var(--u));font-size:calc(12*var(--u));font-weight:700;color:rgba(255,255,255,.7);white-space:nowrap}
.cb-card-av{left:calc(14*var(--u));top:calc(50*var(--u));width:calc(40*var(--u));height:calc(40*var(--u));border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:calc(16*var(--u))}
.cb-card-tt{left:calc(66*var(--u));top:calc(53*var(--u));font-size:calc(15*var(--u));font-weight:600;white-space:nowrap}
.cb-card-tx{left:calc(66*var(--u));top:calc(73*var(--u));font-size:calc(13*var(--u));color:rgba(255,255,255,.9);white-space:nowrap}
.c-mum{background:#4A2C40;color:#FFB3D6}.c-maps{background:linear-gradient(135deg,#6EE7B7,#0E9F6E)}.c-music{background:linear-gradient(160deg,#4A3A78,#1E2A4E)}.c-work{background:#2C3A5A;color:#AFC6FF}
/* phones: inset like the other demos, and a taller screen so the controls stay tappable */
@media (max-width:640px){
  .cb{--W:640;outline-width:4px}
  .cb-eq{top:calc(64*var(--u))}
  .cb-chip.inline b{display:none}
}
@media (prefers-reduced-motion:reduce){.cb-eq i,.cb-isl-eq i{animation:none}}

/* ---------- Idle demo: a phone whose apps doze while the screen is off ---------- */
.sleep{display:grid;grid-template-columns:auto 1fr;gap:12px 26px;align-items:center}
.sleep .demo-foot{grid-column:1 / -1;margin-top:4px}
.ph{--accent:#B9A5FF;--teal:#57E0D2;width:148px;aspect-ratio:9 / 18.6;padding:5px;border-radius:26px;background:#05060A;box-shadow:0 0 0 1px var(--outline-2),0 24px 44px -20px rgba(0,0,0,.9)}
.ph-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:21px;background:#000}
.ph-wall{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.35)),url(assets/wallpaper.jpg) center/cover}
.ph-clock{position:absolute;left:0;right:0;top:34px;text-align:center;font-size:30px;font-weight:600;letter-spacing:-.01em;color:#fff;transition:opacity .45s var(--ease)}
.ph-dark{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .45s var(--ease)}
.ph-apps{position:absolute;left:14px;right:14px;bottom:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.app{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:28%;transition:filter .5s var(--ease),transform .4s var(--settle)}
.app svg{width:62%;height:62%}
.app:not(.keep)::after{content:"z";position:absolute;right:-1px;top:-8px;font:700 14px/1 var(--font);font-style:normal;color:var(--accent);opacity:0}
.ph-grace{position:absolute;left:30px;right:30px;bottom:10px;height:3px;border-radius:2px;background:var(--accent);opacity:0;transform:scaleX(0);transform-origin:left}
.ph-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(120% 70% at 50% 108%,rgba(245,220,235,.9),rgba(185,165,255,.28) 55%,transparent 80%)}
.sleep:not([data-stage="on"],[data-stage="wake"]) .ph-dark{opacity:.92}
.sleep:not([data-stage="on"],[data-stage="wake"]) .ph-clock{opacity:0}
.sleep:not([data-stage="on"],[data-stage="wake"]) .app{filter:brightness(.42)}
.sleep[data-stage="grace"] .ph-grace{opacity:1;transform:none;transition:transform 1.9s linear}
.sleep[data-stage="idle"] .app:not(.keep){filter:grayscale(1) brightness(.42);transform:scale(.9);transition-delay:calc(var(--i)*.16s)}
.sleep[data-stage="idle"] .app.keep{filter:none;box-shadow:0 0 0 1.5px var(--teal)}
.sleep[data-stage="idle"] .app:not(.keep)::after{opacity:.9;animation:doze 1.8s var(--ease) calc(var(--i)*.16s) infinite}
.sleep[data-stage="wake"] .ph-flash{animation:wake-flash 1s var(--settle) both}
.sleep[data-stage="wake"] .app{animation:wake-pop .55s var(--spring) calc(var(--i)*.035s) both}
@keyframes doze{0%{opacity:0;transform:translate(0,4px) scale(.7)}35%{opacity:1}100%{opacity:0;transform:translate(6px,-12px) scale(1.15)}}
@keyframes wake-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes wake-pop{0%{transform:scale(.82)}100%{transform:none}}
.sleep .timeline li{opacity:.42;transition:opacity .3s var(--ease)}
.reveal.in .sleep .timeline li{transition-delay:0s}
.sleep[data-stage="off"] .timeline li:nth-child(1),
.sleep[data-stage="grace"] .timeline li:nth-child(2),
.sleep[data-stage="idle"] .timeline li:nth-child(3),
.sleep[data-stage="wake"] .timeline li:nth-child(4),
.sleep.still .timeline li{opacity:1}
@media (max-width:480px){
  .sleep{grid-template-columns:1fr}
  .ph{justify-self:center;width:128px;margin-bottom:8px}
  .ph-clock{top:28px;font-size:26px}
  .ph-apps{left:12px;right:12px;bottom:22px;gap:9px}
}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 20px;margin:0}
.facts dt{font-size:12.5px;color:var(--muted)}
.facts dd{margin:2px 0 0;font-weight:500;font-size:14.5px}
.spot-main p.muted{color:var(--muted);margin-top:2px;font-style:oblique 12deg}
@media (max-width:900px){.feature-wide{grid-template-columns:1fr}}

/* ============================================================
   Light theme. Not the dark theme recoloured: near-white paper, white
   cards lifted by shadow instead of outlined, and violet used at full
   strength for what matters. The car display and the idle demo's phone
   are pictures of screens, so they stay dark.
   ============================================================ */
:root[data-theme="light"]{
  color-scheme:light;
  --canvas:#FAF9FD;
  --surface:#FFFFFF;
  --surface-hi:#F4F1FB;
  --floating:rgba(255,255,255,.86);
  --text:#17132B;
  --text-2:#524D69;
  --muted:#6E6985;
  --accent:#6938EF;
  --accent-container:#EFE9FF;
  --on-accent:#FFFFFF;
  --outline:rgba(30,20,70,.09);
  --outline-2:rgba(30,20,70,.18);
  --pink:#D6337F;
  --teal:#0A7F73;
  --lift:0 1px 2px rgba(40,25,90,.05),0 14px 34px -18px rgba(60,35,140,.2);
  --violet:linear-gradient(140deg,#7C4DFF,#5B2BD9);
  --digit-glow:rgba(105,56,239,.8);--glow-a:.17;--glow-l:68%;--lede-back:rgba(255,255,255,.62);
  --s1a:#BCA6FF;--s1b:#DCD0FF;--s1c:#EFE8FF;
  --sga:#7B3FF2;--sgb:#9A6BFF;--sgc:#B99BFF;--glow-line:#6D2FEF;
  --s2a:#FFB3D9;--s2b:#CDB8FF;--s2c:#E8DEFF;
  --s3a:#7C4DFF;--s3b:#B79BFF;--s3c:#E9C6E6;
}

/* buttons */
[data-theme="light"] .pill{background:#FFF;border-color:var(--outline-2);box-shadow:0 1px 2px rgba(40,25,90,.06)}
[data-theme="light"] .pill:hover{background:var(--surface-hi)}
[data-theme="light"] .pill.primary{background:var(--violet);border-color:transparent;box-shadow:0 8px 18px -10px rgba(91,43,217,.75)}
[data-theme="light"] .pill.primary:hover{background:linear-gradient(140deg,#6F3FF5,#4F22C7);box-shadow:0 10px 22px -10px rgba(91,43,217,.85)}
[data-theme="light"] .codebox,[data-theme="light"] .step-n{background:var(--violet);color:#FFF}
[data-theme="light"] .ver-chip{background:var(--accent-container);color:#5426D6}
[data-theme="light"] .search{background:#FFF;border-color:var(--outline);box-shadow:var(--lift)}
[data-theme="light"] .search input::-webkit-search-cancel-button{filter:none}
[data-theme="light"] .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(105,56,239,.14),var(--lift)}

/* glass: frosted white over the page */
[data-theme="light"] .lens{background:var(--slab,rgba(255,255,255,.66)) center/100% 100% no-repeat}
[data-theme="light"] .lens::before{background:linear-gradient(180deg,#FFF,rgba(30,20,70,.1))}
[data-theme="light"] .island{box-shadow:0 1px 2px rgba(40,25,90,.08),0 16px 36px -18px rgba(60,35,140,.4)}
[data-theme="light"] .island-text{text-shadow:0 0 5px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.9),0 0 20px rgba(255,255,255,.75)}
[data-theme="light"] .island-text span{color:#37314F}
[data-theme="light"] .pill.cta,[data-theme="light"] .pill.cta:hover{color:#3D1FA8;text-shadow:0 0 6px rgba(255,255,255,.9);border:0}
[data-theme="light"] .pill.cta{background:var(--slab,var(--accent-container)) center/100% 100% no-repeat;box-shadow:0 6px 16px -9px rgba(91,43,217,.6)}
[data-theme="light"] .pill.cta:hover{background:var(--slab,var(--accent-container)) center/100% 100% no-repeat}
[data-theme="light"] .pill.cta::before{background:linear-gradient(180deg,#FFF,rgba(91,43,217,.26))}
[data-theme="light"] .theme-btn svg{filter:drop-shadow(0 0 3px rgba(255,255,255,.9))}
[data-theme="light"] .theme-btn .sun{display:none}
[data-theme="light"] .theme-btn .moon{display:block}

/* hero: the same bloom, in daylight */
[data-theme="light"] .hero-wall{
  --art-bg:radial-gradient(46% 50% at 50% 98%,rgba(255,190,226,.6),transparent 72%),linear-gradient(180deg,#FFF,#F4EEFF 72%,var(--canvas));
  --art-1:.85;--art-2:.8;--art-3:.66;--art-line:rgba(105,56,239,.44);
  --art-fade:linear-gradient(180deg,rgba(255,255,255,.5),transparent 30%,transparent 62%,rgba(250,249,253,.1) 70%,rgba(250,249,253,.34) 78%,rgba(250,249,253,.66) 86%,rgba(250,249,253,.9) 93%,var(--canvas) 99%);
  --art-scrim:radial-gradient(46% 30% at 50% 47%,rgba(255,255,255,.86),rgba(255,255,255,.42) 62%,transparent 80%);
}
[data-theme="light"] .hero-wall::after{opacity:.025;filter:invert(1)}
[data-theme="light"] .hero h1{text-shadow:none}
[data-theme="light"] .hero .lede{color:var(--text-2);text-shadow:0 0 14px rgba(255,255,255,.9)}
[data-theme="light"] .hero-digits{-webkit-text-stroke-color:rgba(105,56,239,.26);background-image:linear-gradient(180deg,rgba(105,56,239,.15),rgba(105,56,239,.03))}

/* cards: white, on a shadow */
[data-theme="light"] :is(.card,.group,.also-grid){background:#FFF;border:1px solid var(--outline);box-shadow:var(--lift)}
[data-theme="light"] .also-grid > div{background:none}
[data-theme="light"] .also-grid > div:hover{background:var(--surface-hi)}
[data-theme="light"] .trust-list li{border-top-color:#D8CAFF}
[data-theme="light"] .card:not(.si):hover{border-color:var(--outline-2);box-shadow:0 1px 2px rgba(40,25,90,.06),0 20px 40px -18px rgba(60,35,140,.28)}

/* the one rich surface on the Dock: the release you came for */
[data-theme="light"] .spotlight{border:0;color:#FFF;background:radial-gradient(90% 150% at 92% 0%,#9B6BFF,transparent 60%),linear-gradient(135deg,#3D1FA8,#6938EF);box-shadow:0 26px 50px -26px rgba(61,31,168,.75)}
[data-theme="light"] .spotlight .kicker{color:#DCCFFF}
[data-theme="light"] .spot-main p,[data-theme="light"] .spot-main p.muted{color:rgba(255,255,255,.82)}
[data-theme="light"] .spotlight .codebox{background:rgba(255,255,255,.16);color:#FFF}
[data-theme="light"] .spotlight .pill.primary{background:#FFF;color:#4A23C4;box-shadow:0 10px 20px -12px rgba(20,8,70,.8)}
[data-theme="light"] .spotlight .pill.primary:hover{background:#F1ECFF}

/* code stays on ink: it reads better there than pale on paler */
[data-theme="light"] .code{background:#1D1738;border-color:transparent;color:#CDBDFF}
[data-theme="light"] .sha-line{background:var(--surface-hi);border-color:transparent}

/* controls */
[data-theme="light"] :is(.seg,.list){background:var(--surface-hi);border:1px solid transparent}
[data-theme="light"] .seg::before{background:#FFF;box-shadow:0 1px 3px rgba(40,25,90,.16)}
[data-theme="light"] .seg button[aria-checked="true"]{color:#4F22C7}
[data-theme="light"] .list{background:none;border-color:var(--outline)}
[data-theme="light"] .switch{background:#DDD8EA;border-color:transparent}
[data-theme="light"] .switch span{background:#FFF;box-shadow:0 1px 3px rgba(30,20,70,.3)}
[data-theme="light"] .switch[aria-checked="true"]{background:var(--accent)}
[data-theme="light"] .switch[aria-checked="true"] span{background:#FFF}
[data-theme="light"] .notifs{gap:0;border:1px solid var(--outline)}
[data-theme="light"] .notif{background:#FFF;border-top:1px solid var(--outline)}
[data-theme="light"] .notif:first-child{border-top:0}
[data-theme="light"] .txt::after{background:#241B4D}
[data-theme="light"] .n-ic.sms{background:#E2EAFF;color:#2F55B5}
[data-theme="light"] .n-ic.bank{background:#D9F4EE;color:#0F7A68}
[data-theme="light"] .n-ic.mum{background:#FFE5F0;color:#B3336F}
[data-theme="light"] .t-dot{background:#FFF}
[data-theme="light"] .t-dot.on{background:var(--accent-container)}
[data-theme="light"] .sleep .timeline li{opacity:.5}
[data-theme="light"] .sleep[data-stage="off"] .timeline li:nth-child(1),
[data-theme="light"] .sleep[data-stage="grace"] .timeline li:nth-child(2),
[data-theme="light"] .sleep[data-stage="idle"] .timeline li:nth-child(3),
[data-theme="light"] .sleep[data-stage="wake"] .timeline li:nth-child(4),
[data-theme="light"] .sleep.still .timeline li{opacity:1}
[data-theme="light"] .ph{box-shadow:0 0 0 1px rgba(30,20,70,.2),0 26px 44px -22px rgba(40,25,110,.6)}
[data-theme="light"] .cb{box-shadow:0 30px 56px -30px rgba(40,25,110,.65)}

/* depth: a sunset of a photo, so the white clock still sits on something */
[data-theme="light"] .l-photo{background:linear-gradient(165deg,#34228F,#6938EF 48%,#D084C8);border-color:transparent;box-shadow:0 30px 56px -26px rgba(52,34,143,.6)}
[data-theme="light"] :is(.l-clock,.l-subject){border-color:rgba(105,56,239,calc(.46*(1 - var(--p))))}
[data-theme="light"] .digits{color:color-mix(in srgb,rgba(255,255,255,.92) calc(var(--p)*100%),rgba(105,56,239,.26));-webkit-text-stroke-color:rgba(105,56,239,calc(.7*(1 - var(--p))))}
[data-theme="light"] .depth-legend span:nth-child(3)::before{background:#D9BDE4}

/* ---------- The Island demo: a 360dp phone, every size from SystemUI's dimens.xml.
   Stays dark in the light theme, the phone has its own. ---------- */
.si{display:grid;justify-items:center}
.si-ph{--accent:#B9A5FF;width:min(100%,320px);padding:6px;border-radius:40px;background:#05060A;box-shadow:0 0 0 1px var(--outline-2),0 24px 44px -20px rgba(0,0,0,.9)}
.si-screen{--u:calc(100cqw/360);position:relative;aspect-ratio:360/640;overflow:hidden;border-radius:34px;background:#000;container-type:inline-size;color:#fff;-webkit-user-select:none;user-select:none}
.si-wall{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.3)),url(assets/wallpaper.jpg) center/cover}
.si-sb{position:absolute;left:0;right:0;top:0;height:calc(32*var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(22*var(--u));font-size:calc(12.5*var(--u));font-weight:600}
.si-sb > span{display:inline-flex;align-items:center;gap:calc(4*var(--u));transition:opacity .2s var(--ease)}
.si-sb svg,.si-mini svg{width:calc(14*var(--u));height:calc(14*var(--u));fill:currentColor}
.si-hole{position:absolute;left:50%;top:calc(9*var(--u));width:calc(14*var(--u));height:calc(14*var(--u));margin-left:calc(-7*var(--u));border-radius:50%;background:#000}
.si-cover-left .si-sb > span:first-child,.si-cover-right .si-sb > span:last-of-type,.si-cover-all .si-sb > span{opacity:0}
.si-home{position:absolute;left:0;right:0;top:calc(196*var(--u));text-align:center;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.si-home b{display:block;font-size:calc(64*var(--u));font-weight:600;line-height:1;letter-spacing:-.02em}
.si-home span{font-size:calc(14*var(--u));font-weight:500}
.si-dock{position:absolute;left:calc(32*var(--u));right:calc(32*var(--u));bottom:calc(30*var(--u));display:grid;grid-template-columns:repeat(4,1fr);gap:calc(20*var(--u))}
.si-dock i{aspect-ratio:1;border-radius:32%;background:rgba(255,255,255,.2)}

.si-screen .si-isl{
  --si-accent:#fff;position:absolute;top:calc(1*var(--u));width:calc(64*var(--u));height:calc(30*var(--u));overflow:hidden;
  border-radius:calc(15*var(--u));cursor:pointer;touch-action:none;outline-offset:2px;
  box-shadow:0 calc(3*var(--u)) calc(8*var(--u)) rgba(0,0,0,.2);
  transition:border-radius .26s cubic-bezier(.2,0,0,1),top .26s var(--ease);
}
.si-screen .si-isl[hidden]{display:none}
/* 24dp behind-blur at Catback's half-radius sigma, so a moving island matches a settled one */
.si-screen .si-isl:not(.lens-live){backdrop-filter:blur(calc(12*var(--u))) saturate(1.35);-webkit-backdrop-filter:blur(calc(12*var(--u))) saturate(1.35)}
.si-isl.left{left:calc(12*var(--u))}
.si-isl.right{right:calc(12*var(--u))}
.si-screen .si-isl.open{top:calc(4*var(--u));border-radius:calc(28*var(--u));transition-duration:.38s}
.si-isl.lens::before{background:linear-gradient(180deg,color-mix(in srgb,var(--si-accent) 18%,transparent),color-mix(in srgb,var(--si-accent) 4%,transparent))}
.si-in{position:absolute;top:0;font-size:calc(12*var(--u));line-height:1.25}
.si-isl.left .si-in{left:0}
.si-isl.right .si-in{right:0}
.si-in button{appearance:none;border:0;padding:0;background:none;color:inherit;font:inherit;cursor:pointer}
.si-ic{display:block;width:calc(18*var(--u));height:calc(18*var(--u));flex:none;fill:currentColor}
.si-row{display:inline-flex;align-items:center;gap:calc(6*var(--u));height:calc(30*var(--u));padding:0 calc(10*var(--u)) 0 calc(6*var(--u));white-space:nowrap;font-weight:700}
.si-row.call{gap:calc(8*var(--u));max-width:calc(176*var(--u));font-weight:400}
.si-row.call .si-ic{width:calc(20*var(--u));height:calc(20*var(--u))}
.si-row.call span{overflow:hidden;text-overflow:ellipsis}
.si-row.music{gap:calc(8*var(--u));padding:0 calc(12*var(--u)) 0 calc(10*var(--u))}
/* IslandGlyphView TORCH: solid body, three rays pulsing out of the head, centre first */
.si-glyph{display:block;flex:none;width:calc(18*var(--u));height:calc(18*var(--u));overflow:visible;animation:si-pop .36s cubic-bezier(.3,1.6,.5,1) both}
.si-glyph path{fill:currentColor}
.si-glyph line{stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:si-ray 1.6s linear infinite}
.si-glyph line:nth-of-type(odd){animation-delay:.224s}
@keyframes si-pop{from{transform:scale(0)}}
@keyframes si-ray{0%,50%,100%{opacity:.35}25%{opacity:1}}
.si-torch{position:absolute;inset:0;display:flex;gap:calc(8*var(--u));padding:calc(16*var(--u))}
.si-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.si-side .si-glyph{width:calc(38*var(--u));height:calc(38*var(--u))}
.si-pct{flex:1;margin-top:calc(4*var(--u));font-size:calc(22*var(--u));font-weight:700}
.si-in .si-off{flex:none;width:calc(62*var(--u));height:calc(34*var(--u));border-radius:calc(17*var(--u));background:rgba(255,255,255,.14);font-size:calc(13*var(--u));font-weight:700}
.si-meter{position:relative;flex:none;width:calc(46*var(--u));overflow:hidden;border-radius:calc(23*var(--u));background:rgba(255,255,255,.14);cursor:ns-resize;touch-action:none}
.si-meter > i{position:absolute;inset:auto 0 0;background:#FFD60A}
.si-meter > b{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.19)}
.si-track{position:relative;display:block;width:calc(64*var(--u));height:calc(4*var(--u));overflow:hidden;border-radius:calc(2*var(--u));background:rgba(255,255,255,.25)}
.si-track.wide{width:auto;margin-top:calc(12*var(--u))}
.si-fill{position:absolute;inset:0 auto 0 0;background:var(--si-accent);transition:width .25s linear}
/* RecordView: 2400ms a turn, the arm drops first */
.si-rec{display:block;width:calc(18*var(--u));height:calc(18*var(--u));flex:none;overflow:visible}
.si-disc{transform-origin:11px 13px;animation:si-spin 2.4s linear infinite}
.si-arm{transform-origin:21px 3.4px;transition:transform .24s ease-out}
.paused .si-disc{animation-play-state:paused}
.paused .si-arm{transform:rotate(-28deg)}
@keyframes si-spin{to{transform:rotate(360deg)}}

.si-card{width:calc(336*var(--u));padding:calc(12*var(--u)) calc(14*var(--u)) calc(14*var(--u))}
.si-mini{position:absolute;top:calc(6*var(--u));display:inline-flex;align-items:center;gap:calc(3*var(--u));font-size:calc(9.5*var(--u));font-weight:600;opacity:.8}
.si-mini svg{width:calc(11*var(--u));height:calc(11*var(--u))}
.si-isl.left .si-mini{left:calc(14*var(--u))}
.si-isl.right .si-mini{right:calc(14*var(--u))}
.si-grab{display:block;width:calc(28*var(--u));height:calc(3*var(--u));margin:0 auto;border-radius:calc(1.5*var(--u));background:rgba(255,255,255,.25)}
.si-head{display:flex;align-items:center;gap:calc(6*var(--u));margin-top:calc(8*var(--u));color:rgba(255,255,255,.7);font-weight:700}
.si-head .si-ic{width:calc(16*var(--u));height:calc(16*var(--u))}
.si-head b{flex:1;min-width:0}
.si-head span{font-size:calc(11*var(--u));font-weight:500}
.si-body{display:flex;align-items:flex-start;gap:calc(12*var(--u));margin-top:calc(10*var(--u))}
.si-av{position:relative;display:grid;place-items:center;flex:none;width:calc(48*var(--u));height:calc(48*var(--u));margin-top:calc(2*var(--u));border-radius:50%}
.si-av::before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.18}
.si-av .si-ic{width:calc(24*var(--u));height:calc(24*var(--u))}
.si-body b{display:block;font-size:calc(15*var(--u));font-weight:700}
.si-body p{margin:calc(2*var(--u)) 0 0;font-size:calc(13*var(--u));line-height:1.3;color:rgba(255,255,255,.9)}
.si-acts{display:flex;gap:calc(8*var(--u));margin-top:calc(12*var(--u))}
.si-in .si-acts button{padding:calc(7*var(--u)) calc(14*var(--u));border:1px solid rgba(255,255,255,.2);border-radius:calc(18*var(--u));background:rgba(255,255,255,.08);font-weight:500}
.si-call{position:absolute;inset:0;display:flex;align-items:center;gap:calc(6*var(--u));padding:calc(14*var(--u))}
.si-face{display:grid;place-items:center;flex:none;width:calc(64*var(--u));height:calc(64*var(--u));margin-right:calc(6*var(--u));border-radius:50%;background:#5B6BF0;font-size:calc(24*var(--u));font-weight:700}
.si-call div{flex:1;min-width:0}
.si-call b{display:block;font-size:calc(16*var(--u));font-weight:700}
.si-call div span{font-size:calc(12*var(--u));opacity:.6}
.si-in .si-call button{display:grid;place-items:center;flex:none;width:calc(44*var(--u));height:calc(44*var(--u));border-radius:50%}
.si-in .si-call .yes{background:#32D74B}
.si-in .si-call .no{background:#FF3B30}
.si-media{margin:calc(-12*var(--u)) calc(-14*var(--u)) calc(-14*var(--u));padding:calc(12*var(--u))}
.si-top{display:flex;align-items:center;gap:calc(12*var(--u))}
.si-art{position:relative;display:grid;place-items:center;flex:none;width:calc(76*var(--u));height:calc(80*var(--u));overflow:hidden;border-radius:calc(14*var(--u));background:linear-gradient(160deg,#4A3A78,#1E2A4E);filter:hue-rotate(var(--hue,0deg))}
.si-art svg{width:calc(52*var(--u));height:calc(40*var(--u))}
.si-info{flex:1;min-width:0}
.si-tt{display:flex;align-items:center;gap:calc(10*var(--u))}
.si-tt > div{flex:1;min-width:0}
.si-tt b,.si-tt > div > span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.si-tt b{font-size:calc(15*var(--u));font-weight:700}
.si-tt > div > span{font-size:calc(13*var(--u));color:rgba(255,255,255,.7)}
/* EqualizerView: omegas 5.1, 6.3, 4.4 and 7.0, frozen at 30% when paused */
.si-eq{display:flex;align-items:flex-end;gap:calc(3*var(--u));height:calc(20*var(--u))}
.si-eq i{width:calc(2*var(--u));height:100%;border-radius:calc(1*var(--u));background:#fff;transform-origin:bottom;animation:si-eq 1.23s ease-in-out infinite alternate}
.si-eq i:nth-child(2){animation-duration:1s;animation-delay:-.3s}
.si-eq i:nth-child(3){animation-duration:1.43s;animation-delay:-.7s}
.si-eq i:nth-child(4){animation-duration:.9s;animation-delay:-.5s}
.paused .si-eq i{animation:none;transform:scaleY(.3)}
@keyframes si-eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.si-trans{display:flex;align-items:center;justify-content:center;margin-top:calc(-2*var(--u))}
.si-in .si-trans button{display:grid;place-items:center;flex:1;height:calc(48*var(--u))}
.si-in .si-trans .si-playb{flex:none;width:calc(48*var(--u));border:1px solid rgba(255,255,255,.2);border-radius:50%;background:var(--accent);color:var(--on-accent)}
.si-seek{position:relative;height:calc(6*var(--u));margin-top:calc(4*var(--u));cursor:pointer;touch-action:none}
.si-seek::before{content:"";position:absolute;left:0;right:0;top:calc(2*var(--u));height:calc(2*var(--u));border-radius:calc(1*var(--u));background:rgba(255,255,255,.25)}
.si-seek i{position:absolute;left:0;top:calc(2*var(--u));height:calc(2*var(--u));border-radius:calc(1*var(--u));background:var(--accent)}
.si-fire{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.si-fire .pill[aria-pressed="true"]{background:var(--accent-container);color:var(--text)}
[data-theme="light"] .si-ph{box-shadow:0 0 0 1px rgba(30,20,70,.2),0 26px 44px -22px rgba(40,25,110,.6)}
[data-theme="light"] .si-fire .pill[aria-pressed="true"]{color:#34228F}
@media (prefers-reduced-motion:reduce){.si-eq i{transform:scaleY(.6)}}

/* GmsCompat: with Google Play on, the panel is the body of a faint padlock, with a shackle
   above the card and a keyhole on it. The shackle lifts open when you pick microG */
[data-demo="services"]{position:relative}
.svc-shackle{position:absolute;left:50%;bottom:100%;width:132px;height:62px;margin-left:-66px;margin-bottom:-1px;overflow:visible;pointer-events:none;opacity:0;transform:translateY(-14px);transition:opacity .35s var(--ease),transform .45s var(--settle)}
.svc-shackle path{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:butt}
/* over the panels, not behind them: they're opaque, so behind it nothing showed */
.svc-keyhole{position:absolute;left:50%;top:50%;z-index:1;width:92px;height:176px;margin:-88px 0 0 -46px;pointer-events:none;fill:var(--accent);opacity:0;transition:opacity .35s var(--ease)}
.locked .svc-shackle{opacity:.26;transform:none}
.locked .svc-keyhole{opacity:.14}
@media (max-width:900px){[data-demo="services"]{margin-top:44px}}

/* Depth Studio: the big tile in Also, with its layers beside the copy */
.also-grid > .also-depth{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:center;padding:32px 24px}
.also-depth dt{grid-column:1;align-self:end;font-size:clamp(22px,2.4vw,26px);letter-spacing:-.012em;margin-bottom:10px}
.also-depth dd:not(.depth){grid-column:1;align-self:start;font-size:16px}
.also-depth dd p{margin:0}
.also-depth .depth{grid-column:2;grid-row:1 / span 2}
@media (max-width:640px){
  .also-grid > .also-depth{grid-template-columns:1fr;gap:0;padding:24px}
  .also-depth .depth{grid-column:1;grid-row:auto;margin-top:18px}
}

/* ============================================================
   Storyboard: every section enters and leaves on the scroll itself.
   Each piece tracks its own trip through the viewport (20% arriving,
   a long hold while it's read, 20% leaving), so the parts of a section
   roll in one after another. Scroll-driven, so it runs off the main
   thread and follows the finger exactly. Individual translate/scale
   keep it clear of the hover transforms. Browsers without view
   timelines keep the fade-in from .reveal; reduced motion turns all
   of this off with the global rule above.
   ============================================================ */
@supports (animation-timeline:view()){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  .reveal .ticks li,.reveal .trust-list li,.reveal .also-grid > div,.reveal:not(.in) .demo{opacity:1;transform:none}

  .f-copy > *,.also h2,.also-grid,.trust h2,.trust-list li{animation:story-rise linear both;animation-timeline:view()}
  .feature .demo{--from:72px;animation:story-side linear both;animation-timeline:view()}
  .feature.flip .demo{--from:-72px}
  .feature .demo.car{animation-name:story-tilt}
  .trust-list li:nth-child(2){animation-range:cover 3% cover 100%}
  .trust-list li:nth-child(3){animation-range:cover 6% cover 100%}
  .trust-list li:nth-child(4){animation-range:cover 9% cover 100%}
  /* the page ends before this one could leave, so it only arrives */
  #devices .row-head,#devices .group{animation:story-in linear both;animation-timeline:view();animation-range:entry 0% entry 90%}

  .feature{view-timeline:--section block}
  .feature::before{animation:story-glow linear both;animation-timeline:--section}

  .hero-inner{animation:story-hero linear both;animation-timeline:scroll(root);animation-range:0 70svh}

  @media (max-width:900px){
    .feature .demo,.feature.flip .demo{--from:0px}
  }
}
@keyframes story-rise{
  0%{opacity:0;translate:0 64px}
  20%,80%{opacity:1;translate:0 0}
  100%{opacity:0;translate:0 -48px}
}
@keyframes story-side{
  0%{opacity:0;translate:var(--from) 28px;scale:.94}
  20%,80%{opacity:1;translate:0 0;scale:1}
  100%{opacity:0;translate:calc(var(--from)*-.5) -40px;scale:.96}
}
@keyframes story-tilt{
  0%{opacity:0;transform:perspective(1100px) rotateX(26deg) translateY(72px) scale(.9)}
  22%,78%{opacity:1;transform:perspective(1100px) rotateX(0) translateY(0) scale(1)}
  100%{opacity:0;transform:perspective(1100px) rotateX(-14deg) translateY(-48px) scale(.94)}
}
@keyframes story-in{from{opacity:0;translate:0 56px}to{opacity:1;translate:0 0}}
@keyframes story-glow{0%{opacity:0}32%,68%{opacity:1}100%{opacity:0}}
@keyframes story-hero{to{opacity:0;translate:0 -90px;scale:.96}}