/* iPip front-end kit: ipip.css
   From the picked design, mockups/v3/glass-home.html (Glass Home, 12 Nov 2026).
   White home screen, clear liquid glass, the black island (also the Island sponsor spot),
   gooey dock, notification rows, icon grid with red vote badges, sponsored widget, app page.

   Theme: <html data-theme="light|dark">. Without it, follows prefers-color-scheme.
   Tokens also work on any element with data-theme, so a section can be dark on a light page.
   Pair with ipip.js (device frames, +5 Pips pop, sliding pill, island, reduced motion).

   Rules baked in: sponsored things always carry a visible label (.sptag, .spl, .adl),
   and nothing here ties paid placement to votes, rank or winners. */

/* ================= tokens ================= */
:root,[data-theme="light"]{
  /* rainbow accents (the six Pip stripes) */
  --g:#4fb06a; --y:#f3c63f; --o:#f08a2c; --r:#e8483f; --v:#8a5bb8; --b:#3e8fd6;
  --rb:linear-gradient(90deg,var(--g),var(--y),var(--o),var(--r),var(--v),var(--b));
  --rb-ring:conic-gradient(var(--g),var(--y),var(--o),var(--r),var(--v),var(--b),var(--g));
  --badge:#ff3b30;
  --spring:cubic-bezier(.3,1.5,.5,1);
  --spring-soft:cubic-bezier(.3,1.45,.45,1);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Inter Tight","Inter",ui-sans-serif,system-ui,sans-serif;

  --ink:#0d0e12; --ink2:rgba(13,14,18,.58); --ink3:rgba(13,14,18,.36);
  --wall-base:#f7f7f9;
  --wall:radial-gradient(1100px 700px at 50% -12%,#ffffff 0%,rgba(255,255,255,0) 62%),
         radial-gradient(900px 700px at 92% 36%,rgba(196,206,224,.32),rgba(196,206,224,0) 64%),
         radial-gradient(800px 640px at 6% 84%,rgba(206,212,228,.28),rgba(206,212,228,0) 64%),#f7f7f9;
  /* clear white liquid glass: frosted fill, crisp specular rim, soft shadow */
  --gl-fill:linear-gradient(165deg,rgba(255,255,255,.9),rgba(255,255,255,.66) 60%,rgba(255,255,255,.58));
  --gl-blur:blur(26px) saturate(1.8);
  --gl-in:inset 0 1px 0 #fff,inset 1px 0 0 rgba(255,255,255,.8),inset 0 -12px 22px -16px rgba(110,120,150,.22);
  --gl-out:0 1px 1px rgba(16,20,36,.04),0 2px 6px -2px rgba(16,20,36,.06),0 18px 40px -18px rgba(16,20,36,.2);
  --gl-rim:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.55) 28%,rgba(20,24,40,.05) 62%,rgba(20,24,40,.1) 100%);
  --gl-spec:radial-gradient(100% 70% at 8% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 48%);
  --seg-bg:rgba(118,118,132,.11);
  --blob:#ffffff; --blob-ink:#0d0e12; --dock-pill:#e9e9ee;
  --chip:rgba(118,118,132,.1);
  --label:#1a1b22;
  --hair:rgba(13,14,18,.08);
  --seg-shadow:drop-shadow(0 3px 6px rgba(16,20,36,.14)) drop-shadow(0 0 .5px rgba(16,20,36,.2));
  --isl-shadow:drop-shadow(0 12px 20px rgba(0,0,0,.2));
  color-scheme:light;
}
[data-theme="dark"]{
  --ink:#f4f4f7; --ink2:rgba(244,244,247,.6); --ink3:rgba(244,244,247,.36);
  --wall-base:#000;
  --wall:radial-gradient(1000px 600px at 50% -14%,rgba(255,255,255,.07),rgba(255,255,255,0) 62%),#000;
  /* smoky glass on true black */
  --gl-fill:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.06) 60%,rgba(255,255,255,.045));
  --gl-blur:blur(26px) saturate(1.5);
  --gl-in:inset 0 1px 0 rgba(255,255,255,.2),inset 1px 0 0 rgba(255,255,255,.06),inset 0 -12px 22px -16px rgba(255,255,255,.06);
  --gl-out:0 24px 48px -24px rgba(0,0,0,.9);
  --gl-rim:linear-gradient(160deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.14) 100%);
  --gl-spec:radial-gradient(100% 70% at 8% 0%,rgba(255,255,255,.09),rgba(255,255,255,0) 48%);
  --seg-bg:rgba(255,255,255,.07);
  --blob:#2c2c33; --blob-ink:#f4f4f7; --dock-pill:#2a2a30;
  --chip:rgba(255,255,255,.09);
  --label:#ececf1;
  --hair:rgba(255,255,255,.1);
  --seg-shadow:drop-shadow(0 4px 10px rgba(0,0,0,.6));
  /* on true black the island would vanish: a hairline rim keeps its shape */
  --isl-shadow:drop-shadow(0 0 .6px rgba(255,255,255,.55));
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --ink:#f4f4f7; --ink2:rgba(244,244,247,.6); --ink3:rgba(244,244,247,.36);
    --wall-base:#000;
    --wall:radial-gradient(1000px 600px at 50% -14%,rgba(255,255,255,.07),rgba(255,255,255,0) 62%),#000;
    --gl-fill:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.06) 60%,rgba(255,255,255,.045));
    --gl-blur:blur(26px) saturate(1.5);
    --gl-in:inset 0 1px 0 rgba(255,255,255,.2),inset 1px 0 0 rgba(255,255,255,.06),inset 0 -12px 22px -16px rgba(255,255,255,.06);
    --gl-out:0 24px 48px -24px rgba(0,0,0,.9);
    --gl-rim:linear-gradient(160deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.14) 100%);
    --gl-spec:radial-gradient(100% 70% at 8% 0%,rgba(255,255,255,.09),rgba(255,255,255,0) 48%);
    --seg-bg:rgba(255,255,255,.07);
    --blob:#2c2c33; --blob-ink:#f4f4f7; --dock-pill:#2a2a30;
    --chip:rgba(255,255,255,.09); --label:#ececf1; --hair:rgba(255,255,255,.1);
    --seg-shadow:drop-shadow(0 4px 10px rgba(0,0,0,.6));
    --isl-shadow:drop-shadow(0 0 .6px rgba(255,255,255,.55));
    color-scheme:dark;
  }
}
/* a scoped theme section paints its own background */
[data-theme]:not(html){background:var(--wall-base);color:var(--ink)}

/* ================= base ================= */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--wall-base);min-height:100vh;min-height:100svh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";line-height:1.4}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wall{position:fixed;inset:0;z-index:-1;background:var(--wall);pointer-events:none}

/* ================= liquid glass ================= */
.glass{position:relative;isolation:isolate;background:var(--gl-fill);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:var(--gl-in),var(--gl-out)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;pointer-events:none;
  background:var(--gl-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:var(--gl-spec)}
.card{border-radius:30px}
.card-pad{padding:20px}

/* ================= type helpers ================= */
.label{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);margin:0 6px 10px;display:flex;align-items:center;gap:8px}
.label .dot{width:7px;height:7px;border-radius:50%;background:var(--badge);box-shadow:0 0 0 3px color-mix(in srgb,var(--badge) 22%,transparent)}
.label .r{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:550;color:var(--ink3)}
.wm{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.04em}
.rbar{display:flex;height:4px;width:96px;border-radius:9px;overflow:hidden;background:var(--rb)}
.pipm{width:28px;height:28px;border-radius:8px;overflow:hidden;flex:none;display:block}
.pipm svg,.pipm img{width:100%;height:100%;display:block}

/* ================= buttons ================= */
.btn{height:46px;padding:0 20px;border-radius:99px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.btn.pri{background:var(--ink);color:var(--wall-base);box-shadow:0 10px 20px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.94,.9)}
.pillbtn{height:30px;padding:0 15px;border-radius:99px;font-size:13px;font-weight:750;color:var(--b);background:var(--chip);display:inline-grid;place-items:center;
  white-space:nowrap;transition:transform .4s var(--spring)}
.pillbtn:hover{transform:scale(1.05)}
.pillbtn.solid{background:var(--b);color:#fff}
.chip{display:inline-flex;align-items:center;font-size:12.5px;font-weight:650;padding:6px 11px;border-radius:99px;background:var(--chip)}

/* ================= vote button ================= */
.vote{position:relative;display:grid;justify-items:center;align-content:center;gap:1px;width:52px;height:54px;border-radius:18px;font-size:13px;font-weight:800;
  font-variant-numeric:tabular-nums;transition:transform .4s cubic-bezier(.3,1.7,.5,1),background .2s,color .2s}
.vote svg{width:14px;height:14px}
.vote:hover{transform:translateY(-2px)}
.vote.on,.vote[aria-pressed="true"]{background:linear-gradient(160deg,#ff6a4a,var(--badge));color:#fff;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -6px -8px 14px -8px rgba(120,0,0,.4),0 10px 18px -8px rgba(255,59,48,.6)}
.vote.on::before,.vote.on::after,.vote[aria-pressed="true"]::before,.vote[aria-pressed="true"]::after{opacity:0}
.vote.sm{width:auto;height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:99px}
.vote.lg{width:auto;height:46px;display:inline-flex;align-items:center;gap:8px;padding:0 18px;border-radius:99px;font-size:15px}
.wob{animation:ipip-wob .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes ipip-wob{0%{transform:scale(1)}25%{transform:scale(1.18,.82)}50%{transform:scale(.9,1.12)}75%{transform:scale(1.04,.97)}100%{transform:scale(1)}}

/* ================= status bar (desktop only, iPhone style) ================= */
.sbar{position:fixed;top:0;left:0;right:0;height:64px;z-index:55;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--wall-base) 92%,transparent) 30%,color-mix(in srgb,var(--wall-base) 0%,transparent))}
.sbar .clock{position:absolute;left:28px;top:21px;font-weight:650;font-size:16px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sbar .sys{position:absolute;right:28px;top:22px;display:flex;gap:6px;align-items:center;color:var(--ink)}
.sbar .sys svg{height:12px;width:auto}
@media (max-width:699px){ .sbar .clock,.sbar .sys{display:none} }

/* ================= the island ================= */
/* states (data-s): idle (brand + Pips), vote (vote live activity), spon (Sponsored live activity), menu.
   Size comes from --iw/--ih/--ir, set by IPIP.island(). .isl.static puts it in the flow (styleguide, docs). */
.isl{position:fixed;z-index:60;top:10px;left:50%;width:var(--iw,318px);height:var(--ih,44px);transform:translateX(-50%);color:#fff;
  transition:width .8s var(--spring),height .8s var(--spring);cursor:pointer;-webkit-tap-highlight-color:transparent}
.isl.static{position:relative;top:auto;left:auto;transform:none;margin:0 auto;z-index:1}
/* the first size is set without animating; ipip.js adds data-ready after two frames */
.isl:not([data-ready]),.isl:not([data-ready]) *{transition:none!important}
.isl-goo{position:absolute;inset:-40px;pointer-events:none;filter:url(#goo) var(--isl-shadow)}
.isl-goo i{position:absolute;display:block;background:#000}
.isl-goo .bm{left:40px;top:40px;right:40px;bottom:40px;border-radius:var(--ir,22px);transition:border-radius .8s var(--spring)}
.isl-goo .bd{width:40px;height:40px;border-radius:50%;left:calc(100% - 40px + 10px);top:42px;
  transition:left .75s var(--spring) .04s,top .75s var(--spring) .04s,transform .5s var(--spring)}
.isl[data-dot="in"] .isl-goo .bd{left:calc(100% - 40px - 56px);top:48px;transform:scale(.5)}
.isl[data-dot="none"] .isl-goo .bd,.isl[data-dot="none"] .isl-tog{display:none}
.isl-tog{position:absolute;left:calc(100% + 10px);top:2px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  transition:opacity .25s,transform .5s var(--spring)}
.isl-tog svg{width:17px;height:17px}
.isl-tog:hover{transform:rotate(-14deg)}
.isl[data-dot="in"] .isl-tog{opacity:0;pointer-events:none;transform:scale(.4);visibility:hidden;transition:opacity .25s,transform .5s var(--spring),visibility 0s .5s}
.isl-c{position:absolute;inset:0;border-radius:var(--ir,22px);overflow:hidden;transition:border-radius .8s var(--spring)}
.isl-c::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.12)}
.isl .v{position:absolute;left:0;top:0;width:var(--iw,318px);height:var(--ih,44px);display:flex;align-items:center;gap:10px;white-space:nowrap;
  opacity:0;transform:scale(.88);filter:blur(6px);pointer-events:none;transition:opacity .18s,transform .5s var(--spring),filter .2s}
.isl[data-s="idle"] .v-idle,.isl[data-s="vote"] .v-vote,.isl[data-s="spon"] .v-spon,.isl[data-s="menu"] .v-menu{
  opacity:1;transform:none;filter:none;pointer-events:auto;transition-delay:.14s,.1s,.14s}
.isl .sp{flex:1}
.isl .v-idle{padding:0 12px 0 8px}
.isl .lvl{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums}
.ringm{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--rb-ring)}
.ringm b{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#000;font-size:10px;font-weight:800;color:#fff}
.isl .lvl .pn{color:#fff;font-weight:700}
.isl .lvl.bump{animation:ipip-bump .5s var(--spring)}
@keyframes ipip-bump{40%{transform:scale(1.14)}}
.isl .signin{height:30px;padding:0 13px;border-radius:99px;background:rgba(255,255,255,.14);font-size:13px;font-weight:700;display:inline-grid;place-items:center}
/* live activities */
.isl .v-vote,.isl .v-spon{padding:0 16px 0 14px;gap:12px}
.la-ic{width:46px;height:46px;border-radius:13px;flex:none;object-fit:cover;background:#222}
.la-t{display:grid;gap:3px;min-width:0}
.la-t small{font-size:11.5px;color:rgba(255,255,255,.6);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.la-t b{font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1}
.la-t b.sm{font-size:16px;overflow:hidden;text-overflow:ellipsis}
.la-r{display:grid;justify-items:end;gap:6px;text-align:right}
.la-r small{font-size:11.5px;color:rgba(255,255,255,.6);font-weight:500}
.la-r b{font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.la-bar{display:block;width:96px;height:5px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.la-bar i{display:block;height:100%;width:var(--p,28%);background:var(--rb);border-radius:inherit;transition:width .8s var(--spring)}
.la-go{height:34px;padding:0 18px;border-radius:99px;background:#fff;color:#000;font-weight:750;font-size:14px;display:grid;place-items:center;flex:none;
  transition:transform .4s var(--spring)}
.la-go:hover{transform:scale(1.06)}
.la-go.ghost{background:rgba(255,255,255,.14);color:#fff}
/* Sponsored live activity: the label is part of the component, not optional */
.isl .v-spon .la-ic{width:52px;height:52px;border-radius:14px}
.sptag{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.72);
  padding:3px 7px;border-radius:99px;background:rgba(255,255,255,.12);width:max-content}
.isl .v-spon .la-t small{font-size:12.5px;color:rgba(255,255,255,.66)}
.isl .v-spon .acts{display:flex;gap:6px;flex:none}
/* menu */
.isl .v-menu{flex-direction:column;align-items:stretch;padding:14px;gap:12px;white-space:normal}
.mn-top{display:flex;align-items:center;gap:9px;padding:0 2px}
.mn-x{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.mn-x svg{width:14px;height:14px}
.mn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mn-i{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;
  padding:12px;border-radius:20px;background:rgba(255,255,255,.08);transition:background .2s,transform .4s var(--spring);min-width:0}
.mn-i:hover{background:rgba(255,255,255,.14)}
.mn-i:active{transform:scale(.95)}
.mn-i .gi{grid-row:span 2;width:36px;height:36px;border-radius:11px;display:grid;place-items:center}
.mn-i .gi svg{width:18px;height:18px}
.mn-i b{font-size:15px;font-weight:650;letter-spacing:-.01em}
.mn-i small{font-size:11.5px;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-bot{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:20px;background:rgba(255,255,255,.06)}
.mn-bot .la-bar{width:100%;margin-top:6px}
.mn-bot .tx{flex:1;font-size:13px;font-weight:600;min-width:0}
.mn-bot .tx small{display:block;font-size:11px;color:rgba(255,255,255,.55);font-weight:500;margin-top:5px}
.mn-th{width:40px;height:40px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;flex:none}
.mn-th svg{width:17px;height:17px}

/* ================= sliding pill (liquid segmented control) ================= */
.seg{position:relative;display:inline-flex;padding:4px;border-radius:99px;gap:2px;max-width:100%}
.seg.glass{background:var(--seg-bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.seg.glass::after{display:none}
.seg .gw{position:absolute;inset:0;pointer-events:none;filter:var(--seg-shadow)}
.seg .goo{position:absolute;inset:0;filter:url(#goo)}
.seg .pill,.seg .drop{position:absolute;left:0;top:0;background:var(--blob);border-radius:99px}
.seg .drop{border-radius:50%}
.seg .sb-b{position:relative;z-index:1;height:32px;padding:0 13px;border-radius:99px;font-size:13px;font-weight:650;color:var(--ink2);transition:color .3s;white-space:nowrap}
.seg .sb-b[aria-selected="true"]{color:var(--ink)}
/* before JS runs, the selected tab still reads as selected */
.seg:not([data-ready]) .sb-b[aria-selected="true"]{background:var(--blob);box-shadow:0 2px 6px rgba(16,20,36,.12)}

/* ================= gooey dock ================= */
.dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:8px;padding:8px;border-radius:34px}
.dock.static{position:relative;left:auto;bottom:auto;transform:none;width:max-content;max-width:100%;margin:0 auto}
.dock .seg{padding:0;background:none;gap:0}
.dock .seg .gw{filter:none}
.dock .seg .pill,.dock .seg .drop{background:var(--dock-pill)}
.dock .seg .sb-b{height:56px;width:68px;padding:0;display:grid;justify-items:center;align-content:center;gap:3px;font-size:10.5px;border-radius:24px}
.dock .seg:not([data-ready]) .sb-b[aria-selected="true"]{background:var(--dock-pill);box-shadow:none}
.dock .seg .sb-b svg{width:22px;height:22px}
.dock .seg .pill{border-radius:24px}
.dock .sub{width:56px;height:56px;border-radius:24px;display:grid;place-items:center;background:var(--ink);color:var(--wall-base);flex:none;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),0 10px 18px -10px rgba(0,0,0,.6);transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.dock .sub svg{width:22px;height:22px}
.dock .sub:active{transform:scale(.9,.84)}
@media (max-width:420px){ .dock .seg .sb-b{width:60px} }
@media (max-width:360px){ .dock .seg .sb-b{width:54px} .dock .sub{width:52px;height:52px} }

/* ================= notification rows ================= */
.stack{display:grid;gap:8px}
.notif{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-radius:24px;cursor:pointer;
  transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.notif:hover{transform:translateY(-2px) scale(1.012)}
.notif .ic{position:relative;width:46px;height:46px}
.notif .ic img{width:46px;height:46px;border-radius:12px;box-shadow:0 3px 8px -4px rgba(0,0,0,.35)}
.notif .ic .src{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 2px var(--wall-base)}
.notif .ic .src img,.notif .ic .src svg{width:100%;height:100%;border-radius:0;box-shadow:none}
.notif .meta{display:flex;gap:5px;font-size:11.5px;color:var(--ink2);font-weight:500;white-space:nowrap;min-width:0}
.notif .meta b{color:var(--ink);font-weight:800}
.notif .meta .ago{margin-left:auto}
.notif h3{margin:2px 0 1px;font-size:15px;letter-spacing:-.015em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif p{margin:0;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif .body{min-width:0}
.notif.spon .meta .sptag{color:var(--ink2);background:var(--chip)}
.ghosts{position:relative;height:18px;margin-top:-2px}
.ghosts i{position:absolute;left:14px;right:14px;top:0;height:12px;border-radius:0 0 18px 18px}
.ghosts i+i{left:28px;right:28px;top:8px;opacity:.7}
.more{text-align:center;font-size:13px;font-weight:600;color:var(--ink2);margin-top:12px}

/* ================= icon grid with red vote badges ================= */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 8px;padding:6px 0;align-items:start}
@media (min-width:640px){ .grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
.app{display:grid;justify-items:center;gap:7px;font-size:12px;font-weight:550;color:var(--label);text-align:center;-webkit-touch-callout:none;user-select:none;cursor:pointer;min-width:0}
.app .ico{position:relative;width:64px;height:64px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.app .ico img,.app .ico .pipi{width:64px;height:64px;border-radius:17px;overflow:hidden;box-shadow:0 8px 16px -10px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.2)}
.app .ico .add{width:64px;height:64px;border-radius:17px;display:grid;place-items:center;font-size:34px;font-weight:300}
.app:hover .ico,.app.lift .ico{transform:scale(1.08)}
.app .nm{max-width:86px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .adl{margin-top:-4px;font-size:9.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);padding:2px 6px;border-radius:5px;background:var(--chip)}
.app.ad .ico::after{content:"";position:absolute;inset:-4px;border-radius:21px;border:1px dashed var(--ink3);pointer-events:none}
.badge{position:absolute;top:-7px;right:-9px;min-width:24px;height:22px;padding:0 6px;border-radius:99px;background:var(--badge);color:#fff;
  font-size:12px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--wall-base),0 4px 8px -3px rgba(255,59,48,.5),inset 1px 1px 0 rgba(255,255,255,.35)}
.badge.pop{animation:ipip-wob .6s cubic-bezier(.3,1.6,.5,1)}
.dots{display:flex;gap:6px;justify-content:center;margin-top:14px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ink3)}
.dots i.on{background:var(--ink)}
.hint{font-size:12px;color:var(--ink3);text-align:center;margin-top:16px}

/* liquid context menu blobbing out of an icon (IPIP.iconMenu) */
.lm{position:fixed;inset:0;z-index:80;pointer-events:none}
.lm .gw{position:absolute;inset:0;filter:drop-shadow(0 16px 26px rgba(16,20,36,.2)) drop-shadow(0 0 .6px rgba(16,20,36,.25))}
[data-theme="dark"] .lm .gw{filter:drop-shadow(0 18px 30px rgba(0,0,0,.8)) drop-shadow(0 0 .6px rgba(255,255,255,.3))}
.lm .goo{position:absolute;inset:0;filter:url(#goo)}
.lm .goo i{position:absolute;left:0;top:0;background:var(--blob);border-radius:22px}
.lm .goo i.b0{border-radius:50%}
.lm .items{position:absolute;inset:0}
.lm .it{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:14px;font-weight:650;color:var(--blob-ink);pointer-events:auto;border-radius:22px;opacity:0}
.lm .it:hover{background:color-mix(in srgb,var(--blob-ink) 6%,transparent)}
.lm .it svg{width:17px;height:17px;flex:none}
.lm .it .c{margin-left:auto;font-size:12px;color:var(--badge);font-weight:800;font-variant-numeric:tabular-nums}

/* ================= sponsored widget ================= */
.sponw{position:relative;overflow:hidden;padding:16px 18px;min-height:172px;display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:12px;border-radius:30px}
.sponw>div:first-child{position:relative;z-index:1;min-width:0}
.spl{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.spl .i{width:14px;height:14px;border-radius:50%;border:1.3px solid var(--ink3);display:grid;place-items:center;font-size:9px;font-weight:800;color:var(--ink3);letter-spacing:0;text-transform:none;cursor:help}
.sponw .row{display:flex;align-items:center;gap:10px;margin-top:12px;min-width:0}
.sponw .row img{width:44px;height:44px;border-radius:12px;box-shadow:0 4px 10px -5px rgba(0,0,0,.35);flex:none}
.sponw .row b{display:block;font-size:17px;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sponw .row small{display:block;font-size:12px;color:var(--ink2);margin-top:1px}
.sponw .tg{margin:10px 0 12px;font-size:13.5px;line-height:1.35;color:var(--ink2);max-width:30ch}
.sponw .ac{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sponw .fine{font-size:11px;color:var(--ink3);margin-top:10px}
.sponw .peek{position:relative}
.sponw .peek .dv{position:absolute;left:6px;top:10px;transform:rotate(-6deg);transform-origin:top left}
@media (max-width:420px){ .sponw{grid-template-columns:minmax(0,1fr) 78px} }

/* ================= featured card ================= */
.feats{display:grid;gap:14px}
@media (min-width:640px){ .feats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .feats{grid-template-columns:repeat(3,minmax(0,1fr))} }
.feat{position:relative;height:214px;border-radius:30px;overflow:hidden;cursor:pointer;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.feat:hover{transform:translateY(-3px)}
.feat .fdev{position:absolute;left:18px;top:20px;transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.feat:hover .fdev{transform:translateY(-8px) rotate(-2deg)}
.feat .fdev .dv{filter:drop-shadow(0 14px 18px rgba(10,10,30,.22))}
.feat .ft{position:absolute;left:138px;right:16px;top:18px;bottom:16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.fbadge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.fbadge::before{content:"";width:16px;height:4px;border-radius:4px;background:var(--rb)}
.feat .fi{width:38px;height:38px;border-radius:10px;margin-top:4px;box-shadow:0 4px 10px -5px rgba(0,0,0,.35)}
.feat h3{margin:0;font-size:18px;letter-spacing:-.025em;font-weight:800;line-height:1.1}
.feat p{margin:0;font-size:13px;line-height:1.35;color:var(--ink2)}
.feat .fm{margin-top:auto;white-space:nowrap;display:flex;align-items:center;justify-content:space-between;width:100%;font-size:12px;font-weight:600;color:var(--ink2)}

/* ================= Pips widget ================= */
.pipsw{padding:20px;border-radius:30px}
.pipsw .top{display:flex;align-items:center;gap:16px}
.ring{width:96px;height:96px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--g) 0 10.6%,var(--y) 0 21.3%,var(--o) 0 32%,var(--r) 0 42.6%,var(--v) 0 53.3%,var(--b) 0 var(--p,64%),color-mix(in srgb,var(--ink) 8%,transparent) 0)}
.ring>div{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;align-content:center;background:var(--wall-base)}
.ring b{font-size:26px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.ring span{font-size:11px;color:var(--ink2);font-weight:600}
.pipsw h3{margin:0 0 4px;font-size:17px;letter-spacing:-.02em}
.pipsw p{margin:0;font-size:13px;color:var(--ink2);line-height:1.4}

/* ================= device frames (built by IPIP.frame) ================= */
.dv{--dv-body:#2a2b30;--dv-edge:#4a4c55;--dv-w:200px;position:relative;flex:none;width:var(--dv-w);max-width:100%;
  filter:drop-shadow(0 18px 24px rgba(10,10,30,.28)) drop-shadow(0 3px 5px rgba(10,10,30,.18))}
.dv .scr{position:relative;overflow:hidden;background:#000}
.dv .scr img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.dv .shell{position:relative;background:linear-gradient(145deg,var(--dv-edge),var(--dv-body) 40%,var(--dv-body) 70%,var(--dv-edge))}
.dv .shell::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 1px rgba(255,255,255,.35)}
.dv .scr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06))}
.dv .island{position:absolute;top:2.4%;left:50%;transform:translateX(-50%);width:31%;height:3.1%;min-height:9px;border-radius:99px;background:#000;z-index:2}
.dv .btn-side{position:absolute;width:3px;border-radius:2px;background:var(--dv-edge)}
/* iPhone + Max */
.dv-iphone .shell,.dv-max .shell{aspect-ratio:9/19.5;border-radius:16% / 7.4%;padding:3.6%}
.dv-iphone .scr,.dv-max .scr{width:100%;height:100%;border-radius:13% / 6%}
.dv-iphone .b1,.dv-max .b1{left:-2px;top:22%;height:6%}
.dv-iphone .b2,.dv-max .b2{left:-2px;top:31%;height:11%}
.dv-iphone .b3,.dv-max .b3{right:-2px;top:28%;height:14%}
.dv-max{--dv-w:220px}
/* Fold (book style, open): two panes, one crease */
.dv-fold{--dv-w:300px}
.dv-fold .shell{aspect-ratio:7.9/8.6;border-radius:7%;padding:3%}
.dv-fold .scr{width:100%;height:100%;border-radius:4.6%;display:grid;grid-template-columns:1fr 1fr}
.dv-fold .crease{position:absolute;top:0;bottom:0;left:50%;width:10px;margin-left:-5px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.18) 40%,rgba(0,0,0,.35) 55%,rgba(255,255,255,0))}
.dv-fold .cam{position:absolute;top:2.6%;right:23%;width:2.2%;aspect-ratio:1;border-radius:50%;background:#000;z-index:3;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
/* Flip (clamshell, open): tall, horizontal crease */
.dv-flip{--dv-w:190px}
.dv-flip .shell{aspect-ratio:9/21;border-radius:15% / 6.4%;padding:3.6%}
.dv-flip .scr{width:100%;height:100%;border-radius:12% / 5.1%}
.dv-flip .hinge{position:absolute;left:-3px;right:-3px;top:50%;height:12px;margin-top:-6px;border-radius:6px;z-index:-1;
  background:linear-gradient(180deg,var(--dv-edge),var(--dv-body),var(--dv-edge))}
.dv-flip .crease{position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.16) 40%,rgba(0,0,0,.3) 60%,rgba(255,255,255,0))}
.dv-flip .island{width:7%;aspect-ratio:1;height:auto;min-height:0;top:2%}
/* Duo: two screens on a hinge */
.dv-duo{--dv-w:330px}
.dv-duo .pair{display:grid;grid-template-columns:1fr 9px 1fr;align-items:stretch}
.dv-duo .shell{aspect-ratio:9/16.6;border-radius:13% / 7%;padding:4.5%}
.dv-duo .scr{width:100%;height:100%;border-radius:7% / 3.8%}
.dv-duo .knuckle{margin:14% 0;border-radius:5px;background:linear-gradient(90deg,var(--dv-edge),var(--dv-body),var(--dv-edge));
  box-shadow:inset 0 6px 0 -3px rgba(255,255,255,.18),inset 0 -6px 0 -3px rgba(255,255,255,.18)}
/* iPad (landscape or portrait from the screenshot size) */
.dv-ipad{--dv-w:460px}
.dv-ipad .shell{border-radius:5.2% / 7%;padding:3.2%}
.dv-ipad.land .shell{aspect-ratio:4/3}
.dv-ipad.port .shell{aspect-ratio:3/4;border-radius:7% / 5.2%;padding:3.6%}
.dv-ipad .scr{width:100%;height:100%;border-radius:2.6% / 3.4%}
.dv-ipad.port .scr{border-radius:3.4% / 2.6%}
.dv-ipad .cam{position:absolute;width:1.2%;aspect-ratio:1;border-radius:50%;background:#0b0b0e;box-shadow:0 0 0 1px rgba(255,255,255,.15);z-index:2}
.dv-ipad.land .cam{left:50%;top:1.3%;transform:translateX(-50%)}
.dv-ipad.port .cam{width:1.6%;left:50%;top:1.1%;transform:translateX(-50%)}
.dv-ipad.port{--dv-w:300px}
/* status bar painted on a screen (optional) */
.dv .sb{position:absolute;top:2.6%;left:9%;right:9%;display:flex;justify-content:space-between;z-index:2;font:600 8px/1 var(--font);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}
.dv-tilt .dv{transition:transform .6s cubic-bezier(.2,1.4,.4,1)}
.dv-tilt .dv:hover{transform:translateY(-6px) rotate(-1.2deg)}

/* device stage: liquid halo morphs to the frame size (IPIP.stage) */
.stage{position:relative;min-height:340px}
.stage .halo{position:absolute;left:50%;top:50%;width:200px;height:300px;transform:translate(-50%,-50%);border-radius:52px;
  transition:width .9s var(--spring-soft),height .9s var(--spring-soft),border-radius .9s var(--spring-soft)}
.stage .slot{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}

/* ================= +5 Pips pop (IPIP.pop) ================= */
.pip-pop{position:fixed;z-index:9999;pointer-events:none;display:flex;align-items:center;gap:5px;
  font:800 13px/1 var(--font);color:#fff;padding:6px 10px 6px 6px;border-radius:99px;white-space:nowrap;
  background:rgba(20,20,26,.72);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.12),0 10px 24px -8px rgba(0,0,0,.5)}
.pip-pop i{width:18px;height:18px;border-radius:6px;overflow:hidden;display:block}
.pip-pop i svg{width:100%;height:100%;display:block}

/* ================= page shells ================= */
.page{padding:76px 16px 150px;max-width:1340px;margin:0 auto}
.foot{text-align:center;font-size:12.5px;color:var(--ink2);margin:44px auto 0;max-width:50ch;line-height:1.5}
.foot .rbar{margin:0 auto 12px;width:72px;height:3px}
.foot small{display:block;color:var(--ink3);margin-top:6px}

/* ================= app page ================= */
/* The app on the devices it is made for (left, sticky on desktop), info in liquid cards (right). */
.apppage{padding:76px 16px 150px;max-width:1240px;margin:0 auto}
.back{height:38px;padding:0 16px 0 10px;border-radius:99px;display:inline-flex;align-items:center;gap:4px;font-weight:650;font-size:14px;margin:4px 0 16px}
.back svg{width:18px;height:18px}
.ap-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start}
.ap-stage{padding:16px;border-radius:30px;display:grid;gap:14px;justify-items:center;min-width:0}
.ap-stage .stage{width:100%;min-height:440px}
.ap-stage .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.ap-stage .seg::-webkit-scrollbar{display:none}
.ap-stage .seg .sb-b{padding:0 12px}
@media (max-width:420px){ .ap-stage .seg .sb-b{padding:0 9px;font-size:12.5px} }
.ap-stage .runs{font-size:12.5px;color:var(--ink2);font-weight:600}
.ap-side{display:grid;gap:14px;align-content:start;min-width:0}
.ap-card{padding:20px;border-radius:28px;display:grid;gap:12px;min-width:0}
.ap-head{display:flex;gap:16px;align-items:center;min-width:0}
.ap-head img{width:84px;height:84px;border-radius:20px;box-shadow:0 12px 24px -12px rgba(0,0,0,.45);flex:none}
.ap-head h1{margin:0;font-family:var(--font-display);font-size:30px;letter-spacing:-.04em;line-height:1;overflow-wrap:anywhere}
.ap-head .mk2{font-size:14px;color:var(--ink2);margin-top:5px}
.ap-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ap-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:14px 6px}
.ap-facts>div{text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);padding:0 4px;min-width:0}
.ap-facts>div+div{border-left:1px solid var(--hair)}
.ap-facts b{display:block;margin-top:4px;font-size:16px;letter-spacing:-.02em;text-transform:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-tag{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.3}
.ap-about{font-size:14.5px;line-height:1.55;color:var(--ink2);margin:0}
.ap-k{font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin:0}
.ap-runs{display:flex;flex-wrap:wrap;gap:6px}
.ap-runs span{font-size:12.5px;font-weight:650;padding:6px 11px;border-radius:99px;background:var(--chip)}
.ap-maker{display:flex;gap:12px;align-items:center}
.ap-maker .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--b),var(--v));flex:none}
.ap-maker small{display:block;color:var(--ink2);font-size:12.5px;margin-top:2px}
.ap-gal{margin-top:20px;padding:22px;border-radius:30px}
.ap-gal .row{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:center}
@media (min-width:1000px){
  .ap-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .ap-stage{position:sticky;top:70px}
  .ap-stage .stage{min-height:600px}
}

/* ================= reduced motion ================= */
/* ipip.js also skips its Web Animations and the auto rotations when this is set. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}