/* Dynamic Ledge, live (ledge.html): a pretend Mac desktop whose notch works like the app, then the
   features in plain text. The desktop follows the site's light or dark theme (its wallpaper and menu
   bar, switched from the menu bar), like a Mac's appearance; the notch is black either way. Motion is transform, opacity and size only, on one shared spring curve. */
.np { --spring: cubic-bezier(.32, .72, 0, 1); --bounce: cubic-bezier(.3, 1.16, .5, 1); --smooth: cubic-bezier(.25, .1, .25, 1); --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- the desktop ---------- */
.mac { position: relative; height: max(580px, 100svh); overflow: hidden; color: #f5f2ee; color-scheme: dark; isolation: isolate;
  font-family: var(--sf); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
.mac__wall { position: absolute; inset: 0; z-index: -1; background: #180821 url(../assets/products/dynamic-ledge/wallpaper.webp) 50% 50% / cover no-repeat; transition: background-color .45s ease; }
@media (max-width: 700px) { .mac__wall { background-image: url(../assets/products/dynamic-ledge/wallpaper-1000.webp); background-position: 50% 50%; } }
/* light mode: the light wallpaper fades in over the dark one */
.mac__wall::after { content: ""; position: absolute; inset: 0; background: #f2e9f4 url(../assets/products/dynamic-ledge/wallpaper-light.webp) 50% 50% / cover no-repeat; opacity: 0; transition: opacity .45s ease; }
@media (max-width: 700px) { .mac__wall::after { background-image: url(../assets/products/dynamic-ledge/wallpaper-light-1000.webp); } }
:root:not([data-theme="dark"]) .mac__wall::after { opacity: 1; }

/* ---------- the menu bar ---------- */
.mbar { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px;
  background: rgba(24, 20, 24, .52); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); font-size: 13.5px; }
.mbar a, .mbar b { padding: 4px 9px; border-radius: 5px; color: inherit; }
.mbar a:hover, .mbar a:focus-visible { background: rgba(255, 255, 255, .14); }
.mbar__home { display: grid; place-items: center; padding: 3px 8px !important; }
.mbar__home .pxcloud { width: 22px; }
.mbar__home .pxcloud__body { fill: #f5f2ee; }
.mbar__home .pxcloud__eyes, .mbar__home .pxcloud__mouth { fill: #1b0c13; }
.mbar__app { font-weight: 650; }
.mbar__right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mbar__status { display: grid; place-items: center; width: 30px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; cursor: pointer; }
.mbar__status:hover { background: rgba(255, 255, 255, .14); }
.mbar__status i { width: 18px; height: 9px; border: 1.6px solid #f5f2ee; border-radius: 6px; }
.mbar__clock { padding: 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* light or dark, between the app's pill and the date: shows the current mode */
.mbar__mode { display: grid; place-items: center; width: 28px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; transition: background .15s ease; }
.mbar__mode:hover, .mbar__mode:focus-visible { background: rgba(255, 255, 255, .14); }
.mbar__mode svg { width: 15px; height: 15px; }
.mbar__mode .sun, :root:not([data-theme="dark"]) .mbar__mode .moon { display: none; }
:root:not([data-theme="dark"]) .mbar__mode .sun { display: block; }
/* light mode's menu bar: frosted white with dark type, like macOS */
.mbar { transition: background .45s ease, color .45s ease; }
:root:not([data-theme="dark"]) .mbar { background: rgba(248, 242, 250, .55); color: #1e1222; text-shadow: none; }
:root:not([data-theme="dark"]) .mbar a:hover, :root:not([data-theme="dark"]) .mbar a:focus-visible, :root:not([data-theme="dark"]) .mbar__status:hover, :root:not([data-theme="dark"]) .mbar__mode:hover, :root:not([data-theme="dark"]) .mbar__mode:focus-visible { background: rgba(0, 0, 0, .1); }
:root:not([data-theme="dark"]) .mbar__home .pxcloud__body { fill: #1e1222; }
:root:not([data-theme="dark"]) .mbar__home .pxcloud__eyes, :root:not([data-theme="dark"]) .mbar__home .pxcloud__mouth { fill: #f5f2ee; }
:root:not([data-theme="dark"]) .mbar__status i { border-color: #1e1222; }

/* ---------- the notch ----------
   Sizes, colours and type come from the app's own design spec (Large size; Medium is 90 %, Small
   80 %, through --s). Pure black, fused to the top edge with concave shoulders, content in the
   "ears" either side of the camera. */
.island { --s: 1; --u: calc(1px * var(--s)); --nw: 185px; --nh: 32px; --f: 6px;
  --red: #ff453a; --orange: #ff9f0a; --green: #30d158; --yellow: #ffd60a; --blue: #0a84ff; --sec: rgba(255, 255, 255, .55); --fill: rgba(255, 255, 255, .18);
  position: absolute; top: 0; left: 50%; z-index: 35; width: calc(var(--w, var(--nw)) + var(--hx, 0px)); height: calc(var(--h, var(--nh)) + var(--hy, 0px));
  transform: translateX(-50%); background: #000; border-radius: 0 0 var(--r, 10px) var(--r, 10px); color: #fff; font-family: var(--sf);
  transition: width .5s var(--bounce), height .5s var(--bounce), border-radius .5s var(--bounce), top .5s var(--spring), transform .5s var(--spring), opacity .3s ease, box-shadow .3s ease, background-color .3s ease; }
.island.is-soft { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .07), 0 8px 18px rgba(0, 0, 0, .35); }
.ip__tab[hidden], .mbar__status[hidden] { display: none; }
.island[data-size="m"] { --s: .9; }
.island[data-size="s"] { --s: .8; }
/* the two concave shoulders where the shape meets the top of the screen */
.island::before, .island::after { content: ""; position: absolute; top: 0; width: var(--f); height: var(--f); transition: width .5s var(--bounce), height .5s var(--bounce), opacity .3s ease; }
.island::before { right: calc(100% - .5px); background: radial-gradient(circle at 0 100%, transparent calc(var(--f) - .5px), #000 var(--f)); }
.island::after { left: calc(100% - .5px); background: radial-gradient(circle at 100% 100%, transparent calc(var(--f) - .5px), #000 var(--f)); }
/* hover: the top never moves; a resting notch grows a little more */
.island:not(.is-open):hover { --hx: 6px; --hy: 2px; }
.island:not(.is-open):not(.is-live):hover { --hx: 20px; --hy: 3px; }

.island__in { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
/* Glass (Settings, Appearance): only the open notch turns to glass. Smoked glass, black around the
   camera and through the body, easing (smoothstep) into frosted glass along the bottom, whose edge
   catches the light. --gb is how dark the bottom stays, from the Clear to Tinted slider. Closed, an
   activity or an alert, it stays plain black. It moves with a little more give. */
.island.is-glass { transition: width .58s var(--bounce), height .58s var(--bounce), border-radius .58s var(--bounce), top .5s var(--spring), transform .5s var(--spring), opacity .3s ease, box-shadow .3s ease, background-color .3s ease; }
.island.is-glass.is-open { background-color: transparent; }
.island__glass { position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .3s ease;
  -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.12); backdrop-filter: blur(22px) saturate(1.7) brightness(1.12);
  background:
    linear-gradient(rgb(255 255 255 / 0) 82%, rgb(255 255 255 / .16)),
    linear-gradient(#000 0, #000 var(--nh), rgb(0 0 0 / .93) calc(var(--nh) + 8%), rgb(0 0 0 / .93) 62%,
      rgb(0 0 0 / calc(.93 - (.93 - var(--gb, .33)) * .0741)) 68.33%, rgb(0 0 0 / calc(.93 - (.93 - var(--gb, .33)) * .2593)) 74.67%,
      rgb(0 0 0 / calc(.93 - (.93 - var(--gb, .33)) * .5)) 81%, rgb(0 0 0 / calc(.93 - (.93 - var(--gb, .33)) * .7407)) 87.33%,
      rgb(0 0 0 / calc(.93 - (.93 - var(--gb, .33)) * .9259)) 93.67%, rgb(0 0 0 / var(--gb, .33)) 100%); }
/* the rim: a thin light edge, invisible at the top, brightest along the bottom */
.island__glass::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background: linear-gradient(transparent 0, transparent calc(var(--nh) + 8px), rgb(255 255 255 / .08) 62%, rgb(255 255 255 / .5));
  -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); }
.island.is-glass.is-open .island__glass { opacity: 1; }
.island__face, .island__panel { position: relative; }
.island__face { display: grid; grid-template-columns: minmax(0, 1fr) var(--nw) minmax(0, 1fr); align-items: center; width: 100%; height: 100%; padding: 0 8px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.island__face:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; border-radius: 10px; }
.island__l, .island__r { display: flex; align-items: center; gap: calc(6 * var(--u)); min-width: 0; white-space: nowrap; font-size: calc(13 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(.92); transform-origin: 50% 0; filter: blur(6px); transition: opacity .12s ease-in, transform .12s ease-in, filter .12s ease-in; }
.island__l { padding-right: 4px; }
.island__r { justify-content: flex-end; padding-left: 4px; }
.island.is-live .island__l, .island.is-live .island__r { opacity: 1; transform: none; filter: none; transition: opacity .34s var(--smooth) .06s, transform .34s var(--smooth) .06s, filter .34s var(--smooth) .06s; }
.island.is-alert .island__l, .island.is-alert .island__r { font-size: calc(14 * var(--u)); }
/* open: the face shrinks to the camera, so clicking the camera closes it */
.island.is-open .island__face { position: absolute; top: 0; left: 50%; z-index: 2; width: var(--nw); height: var(--nh); padding: 0; transform: translateX(-50%); }
.island.is-open .island__l, .island.is-open .island__r { display: none; }
.act-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.act-ico { flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.act-art { flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(5.6 * var(--u)); background: var(--art); }
.is-dim { opacity: .6; }
.c-red { color: var(--red); } .c-orange { color: var(--orange); } .c-green { color: var(--green); } .c-yellow { color: var(--yellow); } .c-blue { color: var(--blue); }
/* the music bars: four capsules in the album's colour, never in step */
.bars { display: flex; align-items: center; gap: calc(2.2 * var(--u)); height: calc(15.6 * var(--u)); }
.bars i { width: calc(2.9 * var(--u)); height: 100%; border-radius: 3px; background: var(--accent, #ff8a6a); transform: scaleY(.28); transition: transform .4s ease; }
.bars i:nth-child(1) { animation: bar1 1.2s ease-in-out infinite; }
.bars i:nth-child(2) { animation: bar2 1.43s ease-in-out infinite; }
.bars i:nth-child(3) { animation: bar3 1.66s ease-in-out infinite; }
.bars i:nth-child(4) { animation: bar4 1.89s ease-in-out infinite; }
.is-paused .bars i { animation: none; }
@keyframes bar1 { 0%, 100% { transform: scaleY(.35); } 17% { transform: scaleY(.9); } 33% { transform: scaleY(.5); } 50% { transform: scaleY(1); } 67% { transform: scaleY(.4); } 83% { transform: scaleY(.75); } }
@keyframes bar2 { 0%, 100% { transform: scaleY(.8); } 17% { transform: scaleY(.4); } 33% { transform: scaleY(1); } 50% { transform: scaleY(.55); } 67% { transform: scaleY(.9); } 83% { transform: scaleY(.3); } }
@keyframes bar3 { 0%, 100% { transform: scaleY(.5); } 17% { transform: scaleY(1); } 33% { transform: scaleY(.35); } 50% { transform: scaleY(.7); } 67% { transform: scaleY(.95); } 83% { transform: scaleY(.45); } }
@keyframes bar4 { 0%, 100% { transform: scaleY(.9); } 17% { transform: scaleY(.45); } 33% { transform: scaleY(.75); } 50% { transform: scaleY(.3); } 67% { transform: scaleY(.85); } 83% { transform: scaleY(1); } }
/* battery, like iOS: outlined body, fill by level, cap, and a bolt while charging */
.batt { position: relative; flex: none; width: calc(25 * var(--u)); height: calc(12 * var(--u)); margin-right: calc(2 * var(--u)); border: 1.3px solid rgba(255, 255, 255, .4); border-radius: calc(3.5 * var(--u)); }
.batt::before { content: ""; position: absolute; inset: 1.5px auto 1.5px 1.5px; width: calc((100% - 3px) * var(--lv)); border-radius: calc(2 * var(--u)); background: currentColor; }
.batt::after { content: ""; position: absolute; top: 50%; left: 100%; width: 2px; height: 40%; margin-left: 1px; border-radius: 0 1px 1px 0; background: rgba(255, 255, 255, .4); transform: translateY(-50%); }
.batt svg { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; }
.lvl { position: relative; width: calc(64 * var(--u)); height: calc(6 * var(--u)); border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.lvl b { position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); border-radius: inherit; background: #fff; transition: width .4s var(--spring); }
.act-wave { display: inline-block; font-size: calc(15 * var(--u)); transform-origin: 70% 80%; animation: wave 1.1s ease-in-out 2; }
@keyframes wave { 20%, 60% { transform: rotate(16deg); } 40%, 80% { transform: rotate(-8deg); } }
.act-bell { transform-origin: 50% 10%; animation: bell .5s ease-in-out 4; }
@keyframes bell { 25% { transform: rotate(16deg); } 75% { transform: rotate(-16deg); } }
.island.is-quit .island__face { cursor: default; }

/* ---------- the open nook ---------- */
.island svg { flex: none; }
.island__panel { padding: 0 calc(20 * var(--u)) calc(14 * var(--u)); opacity: 0; filter: blur(4px); transform: scale(.97); transform-origin: 50% 0;
  transition: opacity .12s ease-in, filter .12s ease-in, transform .12s ease-in; }
.island.is-open .island__panel { opacity: 1; filter: none; transform: none; transition: opacity .34s var(--smooth) .06s, filter .34s var(--smooth) .06s, transform .34s var(--smooth) .06s; }
.ip__strip { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--nw) + 12 * var(--u)) minmax(0, 1fr); align-items: center; height: var(--nh); margin-bottom: 2px; }
.ip__lside { min-width: 0; margin-left: calc(-6 * var(--u)); }
.ip__rside { display: flex; justify-content: flex-end; gap: calc(4 * var(--u)); }
.ip__head[hidden] { display: none; }
.ip__head { display: flex; align-items: center; gap: calc(3 * var(--u)); min-width: 0; }
.ip__head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(13 * var(--u)); font-weight: 600; }
.ip__back { display: grid; place-items: center; flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .85); cursor: pointer; transition: background .15s ease, color .15s ease; }
.ip__back svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.ip__back:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ip__tool { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0; border: 0; border-radius: 999px; background: none; color: var(--sec); cursor: pointer; transition: background .2s ease, color .2s ease; }
.ip__tool--grid { width: calc(26 * var(--u)); }
.ip__tool svg { width: calc(12.5 * var(--u)); height: calc(12.5 * var(--u)); }
.ip__tool:hover, .ip__tool[aria-pressed="true"] { color: #fff; }
.ip__tool[aria-pressed="true"] { background: var(--fill); }
.ip__view { height: calc(120 * var(--u)); margin-top: calc(10 * var(--u)); animation: viewIn .34s var(--smooth) .06s backwards; }
.ip__view[data-view="grid"] { height: calc(170 * var(--u)); }
.ip__view[hidden] { display: none !important; }
@keyframes viewIn { from { opacity: 0; filter: blur(6px); transform: scaleY(.92); transform-origin: 50% 0%; } to { opacity: 1; filter: blur(0); transform: scaleY(1); transform-origin: 50% 0%; } }
.island button:active { transform: scale(.94); }

/* Home: up to three sections side by side, split by hairlines (the app's HomeSections) */
.hs { display: flex; align-items: stretch; padding-bottom: calc(2 * var(--u)); }
.hs__s { display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u)); flex: 1 1 0; min-width: 0; }
.hs__live { flex: none; width: calc(196 * var(--u)); align-items: stretch; }
.hs__gap { flex: none; width: calc(14 * var(--u)); }
.hs__rule { flex: none; width: 1px; margin: calc(8 * var(--u)) calc(12 * var(--u)); background: rgba(255, 255, 255, .1); }
.hs__head { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(16 * var(--u)); min-width: 0; color: #fff; }
.hs__head svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.hs__head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12 * var(--u)); font-weight: 600; }
.hs__head .hs__chev { width: calc(9 * var(--u)); height: calc(9 * var(--u)); color: rgba(255, 255, 255, .3); }
.hs__hb, .hs__cal { padding: 0; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.hs__cal { justify-content: flex-start; }
.hs__ev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.25; word-break: break-word; }
.hs__rel { color: var(--sec); font-size: calc(11 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs__qk { display: flex; gap: calc(6 * var(--u)); }
.hs__qk .qk { min-width: calc(38 * var(--u)); }
.hs__grp { display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u)); min-width: 0; max-width: 100%; }
.hs__grp + .hs__grp { margin-top: calc(6 * var(--u)); }
.hs .qk--blue { max-width: 100%; }
.hs .qk--blue .chip__t { max-width: calc(112 * var(--u)); }
.hs__none { margin: auto; color: var(--sec); font-size: calc(13 * var(--u)); font-weight: 500; }
/* new on Home: scales in with a little give */
.hs .is-new { animation: hsIn .4s cubic-bezier(.3, 1.2, .5, 1) both; }
.hs__live.is-new { transform-origin: 0 50%; }
.lc--clock.is-new { transform-origin: 50% 0; }
@keyframes hsIn { from { opacity: 0; transform: scale(.92); } }
/* live cards: clicking one (not its buttons) opens its full view */
.lc { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; padding: calc(10 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(255, 255, 255, .07); transition: background .12s ease; }
.lc[data-card] { cursor: pointer; }
.lc[data-card]:hover { background: rgba(255, 255, 255, .11); }
.lc--c { flex-direction: row; align-items: center; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(12 * var(--u)); }
.lc__t { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; padding-right: calc(12 * var(--u)); }
.lc--c .lc__t { flex: 1; padding-right: 0; }
.lc__art { flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--art); transition: background .5s ease; }
.lc--c .lc__art { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(6 * var(--u)); }
.lc__txt { display: grid; gap: calc(2 * var(--u)); min-width: 0; }
.lc--c .lc__txt { gap: 0; }
.lc__txt b, .lc__txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc__txt b { font-size: calc(12.5 * var(--u)); font-weight: 600; }
.lc--c .lc__txt b { font-size: calc(12 * var(--u)); }
.lc__txt small { color: var(--sec); font-size: calc(10.5 * var(--u)); }
.lc--call .lc__txt b { font-size: calc(13 * var(--u)); }
.lc--call.lc--c .lc__txt b { font-size: calc(12 * var(--u)); }
.lc--call .lc__txt small { color: var(--green); font-size: calc(11 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; }
.lc__app { display: grid; place-items: center; flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); color: var(--green); }
.lc--c .lc__app { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.lc__app svg { width: 50%; height: 50%; }
.lc .lyr { margin-top: calc(4 * var(--u)); }
.lc__fill { flex: 1; min-height: calc(4 * var(--u)); }
.lc__bar { height: calc(3 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.lc__bar i { display: block; height: 100%; border-radius: inherit; background: rgba(255, 255, 255, .85); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 1s linear; }
.lc__ctl { display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--u)); padding-top: calc(4 * var(--u)); }
.lc--c .lc__ctl { gap: calc(2 * var(--u)); padding: 0; }
.lc__ctl button, .np2__ctl button { display: grid; place-items: center; min-width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0; border: 0; background: none; color: #fff; cursor: pointer; transition: opacity .15s ease, transform .2s var(--spring); }
.lc__ctl button:hover, .np2__ctl button:hover { opacity: .75; }
.lc__ctl svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.lc__ctl .mc__play svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.lc--c .lc__ctl .mc__play svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.lc__btns { display: flex; align-items: center; justify-content: flex-end; gap: calc(8 * var(--u)); }
.lc--c .lc__btns { gap: calc(6 * var(--u)); }
.lc__open { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: calc(29 * var(--u)); height: calc(29 * var(--u)); padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .3); cursor: pointer; transition: color .12s ease; }
.lc:hover .lc__open, .lc__open:focus-visible { color: rgba(255, 255, 255, .7); }
.lc__open svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
.lc--clock { flex: none; flex-direction: row; align-items: center; gap: calc(6 * var(--u)); align-self: stretch; height: calc(50 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(12 * var(--u)); }
.lc__ck { display: grid; flex: 1; min-width: 0; }
.lc__ck small { display: flex; align-items: center; gap: calc(4 * var(--u)); min-width: 0; overflow: hidden; color: var(--sec); font-size: calc(10 * var(--u)); font-weight: 600; white-space: nowrap; }
.lc__ck small svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.lc__ck small span { overflow: hidden; text-overflow: ellipsis; }
.lc__ck b { overflow: hidden; color: var(--orange); font: 600 calc(18 * var(--u))/1.15 ui-rounded, var(--sf); font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity .2s ease; }
.lc--clock.is-paused .lc__ck b { opacity: .6; }
.rb.rb--o { background: color-mix(in srgb, var(--orange) 22%, transparent); color: var(--orange); }
.rb.rb--o:hover { background: color-mix(in srgb, var(--orange) 30%, transparent); }
.rb.rb--red, .rb.rb--red:hover { background: var(--red); }
/* lyrics: the new line slides up into place as the old one leaves */
.lyr { position: relative; flex: none; height: calc(16 * var(--u)); overflow: hidden; font-size: calc(11 * var(--u)); font-weight: 600; line-height: calc(16 * var(--u)); }
.lyr[hidden] { display: none; }
.lyr span { position: absolute; inset: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: lyrIn .35s var(--smooth) both; }
.lyr span.is-gap { color: var(--sec); }
.lyr span.is-out { animation: lyrOut .35s var(--smooth) both; }
@keyframes lyrIn { from { opacity: 0; transform: translateY(80%); } }
@keyframes lyrOut { to { opacity: 0; transform: translateY(-80%); } }
.lyr--big { height: calc(26 * var(--u)); margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(26 * var(--u)); text-align: center; }
/* Now Playing: the full music view */
.ip__view[data-view="music"] { height: calc(120 * var(--u)); }
.ip__view[data-view="music"].has-lyr { height: calc(150 * var(--u)); }
.np2 { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 calc(6 * var(--u)); }
.np2__top { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.np2__art { flex: none; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: calc(13 * var(--u)); background: var(--art); transition: background .5s ease; }
.np2__txt { display: grid; gap: calc(2 * var(--u)); flex: 1; min-width: 0; }
.np2__txt b, .np2__txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np2__txt b { font-size: calc(15 * var(--u)); font-weight: 600; }
.np2__txt span { color: var(--sec); font-size: calc(13 * var(--u)); }
.np2 .bars { justify-content: center; width: calc(20 * var(--u)); }
.np2__prog { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); color: var(--sec); font-size: calc(11 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; }
.has-lyr .np2__prog { margin-top: calc(10 * var(--u)); }
.np2__prog > span { flex: none; width: calc(40 * var(--u)); }
.np2__prog > span:last-child { width: calc(44 * var(--u)); text-align: right; }
.np2__prog .ew__scrub { flex: 1; }
.np2__ctl { display: flex; align-items: center; justify-content: center; gap: calc(30 * var(--u)); margin-top: calc(4 * var(--u)); }
.np2__ctl svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.np2__ctl .mc__play svg { width: calc(27 * var(--u)); height: calc(27 * var(--u)); }
.mc__play .i-play, .is-paused .mc__play .i-pause { display: none; }
.is-paused .mc__play .i-play { display: block; }
/* chips: the tint on an 18 % wash of itself */
.chip { --t: var(--orange); display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); flex: 1 1 0; min-width: 0; height: calc(30 * var(--u)); padding: 0 calc(4 * var(--u));
  border: 0; border-radius: 999px; background: color-mix(in srgb, var(--t) 18%, transparent); color: var(--t); font: 600 calc(12 * var(--u))/1 var(--sf); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background .2s ease, transform .2s var(--spring); }
.chip:hover { background: color-mix(in srgb, var(--t) 26%, transparent); }
.chip:active { background: color-mix(in srgb, var(--t) 32%, transparent); }
.chip svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.chip__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qk { display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); flex: none; height: calc(26 * var(--u)); padding: 0 calc(9 * var(--u)); border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .09); color: var(--t, var(--orange)); font: 600 calc(12 * var(--u))/1 var(--sf); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: background .12s ease, transform .2s var(--spring); }
.qk:hover { background: rgba(255, 255, 255, .14); }
.qk:active { background: rgba(255, 255, 255, .2); transform: scale(.95); }
.qk svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.qk--n { min-width: calc(40 * var(--u)); }
.qk--blue { --t: var(--blue); }
.qk--blue .chip__t { max-width: calc(110 * var(--u)); }
.chip--white { --t: #fff; }
.chip--blue { --t: var(--blue); }

/* Tray and Clipboard: one scrolling row, a clear button on the right */
.ip__empty { display: grid; place-content: center; justify-items: center; gap: calc(6 * var(--u)); height: calc(100% - 2px); border: 1.2px dashed rgba(255, 255, 255, .2); border-radius: calc(16 * var(--u)); color: var(--sec); text-align: center;
  transition: border-color .2s ease, background .2s ease; }
.ip__empty[hidden], .ip__strip-row[hidden] { display: none; }
.ip__empty svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ip__empty b { font-size: calc(13 * var(--u)); font-weight: 500; }
.ip__empty small { font-size: calc(10 * var(--u)); opacity: .8; }
.island.is-drag .ip__empty { border-color: var(--blue); background: rgba(10, 132, 255, .08); color: #fff; }
.ip__strip-row { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(100% - 2px); }
.ip__files, .ip__clips { display: flex; gap: calc(6 * var(--u)); flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.ip__clips { gap: calc(8 * var(--u)); }
.ip__files::-webkit-scrollbar, .ip__clips::-webkit-scrollbar { display: none; }
.ip__files li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(5 * var(--u)); flex: none; padding: calc(6 * var(--u)); border-radius: calc(12 * var(--u)); transition: background .15s ease; animation: viewIn .3s ease-out; }
.ip__files li:hover { background: rgba(255, 255, 255, .12); }
.ip__files .ext { position: relative; display: grid; place-items: end center; width: calc(42 * var(--u)); height: calc(52 * var(--u)); padding-bottom: calc(8 * var(--u)); border-radius: 4px calc(12 * var(--u)) 4px 4px; background: linear-gradient(#fbfbfd, #e4e4ea);
  color: #fff; font: 700 calc(8 * var(--u))/1 var(--sf); text-transform: uppercase; }
.ip__files .ext b { padding: 2px 4px; border-radius: 3px; background: #ff453a; }
.ip__files .ext.is-img b { background: #30a8ff; } .ip__files .ext.is-doc b { background: #2c6cf6; } .ip__files .ext.is-zip b { background: #8e8e93; }
.ip__files span { width: calc(70 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .85); font-size: calc(10 * var(--u)); font-weight: 500; text-align: center; }
.ip__files li > button { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: calc(16 * var(--u)); height: calc(16 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: #595959; color: #fff; font: 600 calc(11 * var(--u))/1 var(--sf); opacity: 0; cursor: pointer; transition: opacity .15s ease; }
.ip__files li:hover > button, .ip__files li > button:focus-visible { opacity: 1; }
.ip__clips li { flex: none; height: 100%; }
.ip__clips button { display: flex; flex-direction: column; gap: calc(6 * var(--u)); width: calc(150 * var(--u)); height: 100%; padding: calc(10 * var(--u)); border: 0; border-radius: calc(14 * var(--u)); background: rgba(255, 255, 255, .07);
  color: #fff; font: 500 calc(12 * var(--u))/1.3 var(--sf); text-align: left; cursor: pointer; transition: background .15s ease; }
.ip__clips button:hover { background: rgba(255, 255, 255, .13); }
.ip__clips span { flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ip__clips small { color: var(--sec); font-size: calc(10 * var(--u)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip__clips .is-copied small { color: var(--green); }
.ip__clear { display: grid; place-items: center; flex: none; width: calc(28 * var(--u)); height: calc(28 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: var(--fill); color: var(--sec); cursor: pointer; }
.ip__clear svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.ip__clear { transition: background .15s ease, color .15s ease, opacity .15s ease; }
.ip__clear:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.ip__clear[aria-pressed="true"], .ip__clear[aria-pressed="true"]:hover { background: #fff; color: #000; }
.ip__clear:disabled { opacity: .4; cursor: default; }
.ip__side { display: grid; gap: calc(6 * var(--u)); flex: none; }
/* Tray pins: a pinned file keeps its pin showing; on hover, any file offers it */
.ip__files li.is-pin { background: rgba(255, 255, 255, .06); }
.ip__files li > .tpin { left: 2px; right: auto; width: calc(18 * var(--u)); height: calc(18 * var(--u)); background: rgba(0, 0, 0, .75); color: rgba(255, 255, 255, .85); }
.ip__files li.is-pin > .tpin { opacity: 1; color: var(--orange); }
.tpin svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
/* Clipboard: pins and remove in each card's footer, and the search bar the notch grows for */
.ip__view[data-view="clipboard"].is-find { height: calc(160 * var(--u)); }
.cb__row { height: calc(118 * var(--u)); }
.cb__list { display: flex; flex: 1; min-width: 0; height: 100%; }
.cb__none { display: grid; place-content: center; justify-items: center; gap: calc(4 * var(--u)); flex: 1; min-width: 0; color: var(--sec); animation: fadeUp .25s var(--smooth) both; }
.cb__none[hidden], .ip__clips[hidden], .cs[hidden], .ip__strip-row[hidden] { display: none; }
.cb__none svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.cb__none b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12 * var(--u)); font-weight: 500; }
.ip__clips li { position: relative; }
.ip__clips li.is-pin > button { box-shadow: inset 0 0 0 1px rgba(255, 159, 10, .35); }
.ip__clips small svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin-right: calc(3 * var(--u)); vertical-align: -1px; }
.ip__clips li:hover small { padding-right: calc(42 * var(--u)); }
.cb__btns { position: absolute; right: calc(7 * var(--u)); bottom: calc(7 * var(--u)); display: flex; gap: calc(4 * var(--u)); opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.ip__clips li:hover .cb__btns, .cb__btns:focus-within { opacity: 1; pointer-events: auto; }
.ip__clips .cb__btns button { display: grid; place-items: center; width: calc(18 * var(--u)); height: calc(18 * var(--u)); padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--sec); }
.ip__clips .cb__btns button:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.ip__clips .cb__btns button:disabled { opacity: .4; cursor: default; }
.cb__btns svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.cs { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(28 * var(--u)); margin-top: calc(10 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(12 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px transparent; cursor: text; transition: background .15s ease, box-shadow .15s ease; animation: fadeUp .3s var(--smooth) both; }
.cs:focus-within { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.cs > svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: var(--sec); transition: color .15s ease; }
.cs:focus-within > svg { color: #fff; }
.cs input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: #fff; font: 500 calc(12.5 * var(--u))/1 var(--sf); user-select: text; -webkit-user-select: text; }
.cs input::placeholder { color: var(--sec); }
.cs small { color: var(--sec); font-size: calc(11 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.cs button { display: grid; place-items: center; width: calc(16 * var(--u)); height: calc(16 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .35); color: #000; cursor: pointer; }
.cs button svg { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

/* the grid: everything, with its ⌃⌥ shortcut */
.ip__tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(76 * var(--u)); padding: 0 calc(6 * var(--u)); border: 0; border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, .055); color: #fff; font: inherit; cursor: pointer; transition: background .15s ease, transform .2s var(--spring); }
.ip__tile:hover { background: rgba(255, 255, 255, .1); }
.ip__tile svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); color: var(--c); }
.ip__tile b { max-width: 100%; margin-top: calc(7 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .92); font-size: calc(11.5 * var(--u)); font-weight: 500; }
.ip__tile small { margin-top: calc(2 * var(--u)); color: rgba(255, 255, 255, .38); font-size: calc(9.5 * var(--u)); letter-spacing: calc(.5 * var(--u)); }
.ip__tile.is-on::after { content: ""; position: absolute; top: calc(9 * var(--u)); right: calc(9 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--c); }

/* Timer: Timer, Focus or Stopwatch, a ruler and the big time */
.tp__top { display: flex; align-items: center; gap: calc(4 * var(--u)); }
.tp__modes { display: flex; gap: calc(4 * var(--u)); }
.tp__modes button { position: relative; height: calc(28 * var(--u)); padding: 0 calc(8 * var(--u)); border: 0; background: none; color: var(--sec); font: 600 calc(13 * var(--u))/1 var(--sf); cursor: pointer; transition: color .2s ease; }
.tp__modes button[aria-checked="true"] { color: #fff; }
.tp__modes button[aria-checked="true"]::after { content: ""; position: absolute; left: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: 0; height: calc(2.5 * var(--u)); border-radius: 2px; background: var(--orange); }
.tp__start { margin-left: auto; height: calc(34 * var(--u)); padding: 0 calc(22 * var(--u)); border: 0; border-radius: 999px; background: rgba(255, 159, 10, .22); color: var(--orange); font: 600 calc(15 * var(--u))/1 var(--sf); cursor: pointer; transition: background .2s ease, transform .2s var(--spring); }
.tp__start:hover { background: rgba(255, 159, 10, .3); }
.tp__main { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(4 * var(--u)); }
.tp__ruler { flex: 1; min-width: 0; height: calc(52 * var(--u)); margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: ew-resize; }
.tp__ruler::-webkit-slider-runnable-track { height: calc(40 * var(--u)); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 1.5px, transparent 1.5px 9px) 0 100% / 100% 45% no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 1.5px, transparent 1.5px 45px) 0 100% / 100% 80% no-repeat; }
.tp__ruler::-moz-range-track { height: calc(40 * var(--u)); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 1.5px, transparent 1.5px 9px) 0 100% / 100% 45% no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 1.5px, transparent 1.5px 45px) 0 100% / 100% 80% no-repeat; }
.tp__ruler::-webkit-slider-thumb { width: calc(3 * var(--u)); height: calc(40 * var(--u)); border: 0; border-radius: 2px; background: var(--orange); -webkit-appearance: none; appearance: none; }
.tp__ruler::-moz-range-thumb { width: calc(3 * var(--u)); height: calc(40 * var(--u)); border: 0; border-radius: 2px; background: var(--orange); }
.tp__ruler:disabled { opacity: .35; cursor: default; }
.tp__ruler:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.tp__big { display: grid; justify-items: end; min-width: calc(116 * var(--u)); }
.tp__big output { color: var(--orange); font-size: calc(40 * var(--u)); font-weight: 200; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tp__big small { color: var(--sec); font-size: calc(10 * var(--u)); font-weight: 500; }
.tp__big small[hidden] { display: none; }

/* Calendar: a small month with its name in red, then Up Next */
.cp { display: flex; align-items: flex-start; height: 100%; padding-top: 2px; }
.cp__month { flex: none; width: calc(168 * var(--u)); }
.cp__month b { display: block; margin-bottom: calc(3 * var(--u)); color: var(--red); font-size: calc(10 * var(--u)); font-weight: 700; letter-spacing: calc(.4 * var(--u)); text-transform: uppercase; }
.cp__days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 1px; text-align: center; font-size: calc(9.5 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; }
.cp__days span { position: relative; display: grid; place-items: center; height: calc(14 * var(--u)); color: rgba(255, 255, 255, .85); }
.cp__days .wd { color: var(--sec); font-size: calc(8.5 * var(--u)); font-weight: 600; }
.cp__days .today::before { content: ""; position: absolute; z-index: -1; width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: var(--red); }
.cp__days .today { z-index: 0; color: #fff; font-weight: 700; }
.cp__days .ev::after { content: ""; position: absolute; bottom: -1px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.cp__div { flex: none; align-self: stretch; width: 1px; margin: 2px calc(16 * var(--u)) 6px; background: rgba(255, 255, 255, .1); }
.cp__next { display: grid; gap: calc(6 * var(--u)); flex: 1; min-width: 0; }
.cp__next > small { color: var(--sec); font-size: calc(9.5 * var(--u)); font-weight: 600; letter-spacing: calc(.4 * var(--u)); }
.cp__ev { display: flex; gap: calc(8 * var(--u)); min-width: 0; }
.cp__ev::before { content: ""; flex: none; width: calc(3 * var(--u)); border-radius: 1.5px; background: var(--c); }
.cp__ev span { display: grid; min-width: 0; }
.cp__ev b, .cp__ev em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp__ev b { font-size: calc(12 * var(--u)); font-weight: 600; }
.cp__ev em { color: var(--sec); font-size: calc(11 * var(--u)); font-style: normal; font-variant-numeric: tabular-nums; }

/* Reminders */
.rp { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); height: 100%; }
.rp__list { display: grid; gap: calc(2 * var(--u)); flex: 1; min-width: 0; max-height: 100%; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: none; }
.rp__list button { display: flex; align-items: center; gap: calc(9 * var(--u)); width: 100%; padding: calc(4 * var(--u)) calc(4 * var(--u)); border: 0; border-radius: 8px; background: none; color: #fff; font: 500 calc(12.5 * var(--u))/1.3 var(--sf); text-align: left; cursor: pointer; }
.rp__list button:hover { background: rgba(255, 255, 255, .07); }
.rp__list i { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 50%; transition: background .2s ease, border-color .2s ease; }
.rp__list .is-done i { border-color: var(--blue); background: var(--blue) radial-gradient(circle, #fff 0 2.5px, transparent 3px); }
.rp__list .is-done span { color: var(--sec); }
.rp__list small { margin-left: auto; color: var(--red); font-size: calc(11 * var(--u)); }
.chip.rp__open { flex: none; padding: 0 calc(14 * var(--u)); }

/* Notes and Mirror */
.ip__notes { display: block; width: 100%; height: calc(100% - 28px); padding: calc(8 * var(--u)) calc(12 * var(--u)); border: 0; border-radius: calc(14 * var(--u)); background: rgba(255, 255, 255, .07); color: #fff;
  font: 400 calc(13 * var(--u))/1.45 var(--sf); resize: none; user-select: text; -webkit-user-select: text; }
.ip__notes::placeholder { color: var(--sec); }
.ip__notes:focus { outline: 0; }
.mp { display: flex; align-items: center; gap: calc(16 * var(--u)); height: calc(100% - 2px); }
.mp__cam { display: grid; place-items: center; flex: none; height: 100%; aspect-ratio: 16 / 9; border-radius: calc(16 * var(--u)); background: rgba(255, 255, 255, .07); color: var(--sec); }
.mp__cam svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.mp__txt { display: grid; justify-items: start; gap: calc(8 * var(--u)); min-width: 0; }
.mp__txt small { color: var(--sec); font-size: calc(12 * var(--u)); font-weight: 500; line-height: 1.35; }
.mp__txt .chip { flex: none; padding: 0 calc(14 * var(--u)); }

.ip__toast { position: absolute; left: 50%; bottom: calc(10 * var(--u)); margin: 0; padding: 6px 12px; border-radius: 999px; background: #fff; color: #000; font: 600 calc(12 * var(--u))/1.2 var(--sf);
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .45s var(--spring); }
.ip__toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* the second activity: a round bubble 4 pt right of the shape, centred on the strip */
.bubble { --d: 26px; position: absolute; top: 3px; left: 50%; z-index: 34; display: grid; place-items: center; width: var(--d); height: var(--d); border-radius: 50%; background: #000; color: #ff9f0a;
  opacity: 0; pointer-events: none; transform: translateX(calc(var(--bx, 140px) - var(--d))) scale(.4); transition: opacity .35s ease, transform .5s var(--bounce); }
.bubble.is-on { opacity: 1; transform: translateX(var(--bx, 140px)) scale(1); }
.island:not(.is-open):hover ~ .bubble { margin-left: 3px; }
.bubble > svg { grid-area: 1 / 1; }
.bubble__ring { width: 64%; height: 64%; transform: rotate(-90deg); }
.bubble__ring circle { fill: none; stroke: rgba(255, 159, 10, .25); stroke-width: 3.5; }
.bubble__ring #bubble-ring { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: var(--off, 0); transition: stroke-dashoffset 1s linear; }
.bubble__ico { width: 30%; height: 30%; }
.bubble.is-watch .bubble__ring { display: none; }
.bubble.is-watch .bubble__ico { width: 46%; height: 46%; }

/* the right-click menu */
.ctx { position: absolute; z-index: 45; min-width: 210px; padding: 5px; border-radius: 10px; background: rgba(36, 30, 33, .82);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .16), 0 18px 40px rgba(0, 0, 0, .5);
  animation: popIn .25s var(--spring); }
.ctx button { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: #fff; font: 450 13px/1.3 var(--sans); text-align: left; cursor: pointer; }
.ctx button:hover, .ctx button:focus-visible { background: #c94f3d; outline: none; }
.ctx hr { margin: 4px 8px; border: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
@keyframes popIn { from { opacity: 0; transform: scale(.94); } }

/* the notice */
.note-pop { position: absolute; top: 40px; right: 12px; z-index: 30; display: flex; align-items: center; gap: 12px; width: min(380px, calc(100% - 24px)); padding: 12px;
  border-radius: 18px; background: rgba(40, 32, 36, .7); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .14), 0 20px 50px rgba(0, 0, 0, .45); animation: noteIn .7s var(--spring); }
.note-pop[hidden] { display: none; }
.note-pop.is-out { opacity: 0; transform: translateX(30px); transition: opacity .3s ease, transform .4s var(--spring); }
@keyframes noteIn { from { opacity: 0; transform: translateX(40px); } }
.note-pop img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.note-pop div { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; }
.note-pop b { display: block; font-size: 13px; }
.note-pop span { color: rgba(255, 255, 255, .72); }
.note-pop button[hidden] { display: none; }
.note-pop button { flex: none; padding: 6px 11px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 600 12px/1 var(--sans); cursor: pointer; }
.note-pop .note-pop__x { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; padding: 0; border-radius: 50%; background: rgba(60, 52, 56, .95); font-size: 13px; opacity: 0; transition: opacity .2s ease; }
.note-pop:hover .note-pop__x, .note-pop__x:focus-visible { opacity: 1; }

/* the dock */
.dock {
  --dock-size: 50px;
  position: absolute; left: 50%; bottom: 10px; z-index: 12; display: flex; width: max-content; max-width: calc(100% - 16px);
  align-items: flex-end; gap: 8px; padding: 7px 8px; transform: translateX(-50%);
  border-radius: 22px; background: rgba(32, 28, 30, .62); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .15), 0 0 0 .5px rgba(0, 0, 0, .35), 0 20px 40px -10px rgba(0, 0, 0, .35);
}
.dock__i {
  --mag: 1;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  flex: none; padding: 0; border: 0; background: none; cursor: pointer;
  width: calc(var(--dock-size) * var(--mag));
  transition: width .18s var(--smooth);
}
.dock.is-magnifying .dock__i { transition: width .06s linear; }
.dock__i:focus-visible { outline: 2px solid #0a84ff; outline-offset: 4px; border-radius: 12px; }
.dock__i::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 12px); padding: 4px 10px; border-radius: 7px;
  background: rgba(36, 30, 34, .92); color: #fff; font: 500 12px/1.2 var(--sans); white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transform: translate(-50%, 4px); opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
}
.dock__i:hover::after, .dock__i:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.dock__ico {
  display: grid; place-items: center;
  width: calc(var(--dock-size) * var(--mag));
  height: calc(var(--dock-size) * var(--mag));
  border-radius: calc(12px * var(--mag));
  overflow: hidden;
  transition: width .18s var(--smooth), height .18s var(--smooth), border-radius .18s var(--smooth);
}
.dock.is-magnifying .dock__ico { transition: width .06s linear, height .06s linear, border-radius .06s linear; }
.dock__ico svg { width: 100%; height: 100%; display: block; }
img.dock__ico { object-fit: cover; display: block; }
.dock__ico--tv { background: linear-gradient(160deg, #84233a, #5b1426); position: relative; }
.dock__ico--tv .pxcloud { width: calc(32px * var(--mag)); }
.dock__ico--tv .pxcloud__body { fill: #f5f2ee; }
.dock__ico--tv .pxcloud__eyes, .dock__ico--tv .pxcloud__mouth { fill: #5b1426; }
.dock__sep { align-self: stretch; width: 1px; margin: 4px 2px; background: rgba(255, 255, 255, .22); flex: none; }

/* the Settings window: a replica of the app's own (macOS, dark, measured from the real one).
   520 pt wide, a preference toolbar of five tabs, grouped forms underneath. */
.win { --w-chrome: #322929; --w-bg: #2b2221; --w-box: #312928; --w-sep: #3b3332; --w-ctl: #413938; --w-text: #dfdede; --w-sec: #9f9b9b; --w-accent: #3a7bf4;
  position: absolute; top: 44px; left: 50%; z-index: 25; display: flex; flex-direction: column; width: min(520px, calc(100% - 16px)); overflow: hidden;
  transform: translateX(calc(-50% + var(--dx, 0px))) translateY(var(--dy, 0px)); border-radius: 16px; background: var(--w-bg); color: var(--w-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 .5px rgba(0, 0, 0, .7), 0 28px 70px -8px rgba(0, 0, 0, .55); font: 400 13px/1.25 var(--sf); animation: winIn .3s var(--spring); }
.win[hidden] { display: none; }
@keyframes winIn { from { opacity: 0; scale: .97; } }
.win__chrome { position: relative; flex: none; height: 90px; background: var(--w-chrome); border-bottom: 1px solid #3a3131; cursor: default; touch-action: none; }
.win__chrome.is-grab { cursor: grabbing; }
.win__lights { position: absolute; top: 11px; left: 10px; display: flex; gap: 11px; }
.win__lights i, .win__close { display: grid; place-items: center; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #4e4545; }
.win__close { background: #ff5f57; color: transparent; cursor: pointer; }
.win__close svg { width: 8px; height: 8px; }
.win__lights:hover .win__close, .win__close:focus-visible { color: #6b0f0a; }
.win__title { position: absolute; top: 9px; left: 0; right: 0; color: #aea5a5; font-size: 13px; font-weight: 700; text-align: center; pointer-events: none; }
.win__tabs { position: absolute; left: 0; right: 0; top: 33px; display: flex; justify-content: center; gap: 2px; }
.win__tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 54px; height: 48px; padding: 4px 6px 0; border: 0; border-radius: 7px; background: none; color: #999494; font: 400 11px/1.2 var(--sf); cursor: pointer; }
.win__tabs svg { width: 23px; height: 23px; }
.win__tabs button:hover { color: #c9c4c4; }
.win__tabs button[aria-selected="true"] { background: #514646; color: #4079e0; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .06); }
.win__tabs button:focus-visible { outline: 2px solid var(--w-accent); outline-offset: -2px; }
.win__body { height: var(--bh, 552px); overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; transition: height .3s var(--spring); scrollbar-width: thin; scrollbar-color: #5a5151 transparent; user-select: text; -webkit-user-select: text; }
.win__body::-webkit-scrollbar { width: 8px; }
.win__body::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 4px; background: #5a5151 padding-box; }
/* grouped form */
.fs { margin-top: 20px; }
.fs + .fs { margin-top: 24px; }
.fs h3 { margin: 0 0 8px 10px; color: var(--w-text); font-size: 13px; font-weight: 700; }
.fs__box { border-radius: 10px; background: var(--w-box); }
.fs[aria-disabled="true"] .fs__box { opacity: .45; pointer-events: none; }
.fs__foot { margin: 8px 10px 0; color: var(--w-sec); font-size: 11px; line-height: 1.2; letter-spacing: -.15px; }
.fr { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 37.5px; padding: 6px 10px; }
.fr + .fr::before { content: ""; position: absolute; top: 0; left: 10px; right: 10px; height: 1px; background: var(--w-sep); }
.fr__l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fr__l > span { display: grid; gap: 1px; min-width: 0; }
.fr__l small { color: var(--w-sec); font-size: 11px; }
.fr--note { color: var(--w-sec); font-size: 11px; min-height: 30px; }
.fr--note::before { display: none; }
.fr--note + .fr::before { left: 10px; }
.fr--btn { justify-content: flex-start; }
.fr__v { color: var(--w-sec); }
.sico { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 5px; color: #fff; background: linear-gradient(var(--c1), var(--c2)); }
.sico svg { width: 12px; height: 12px; }
/* switch (macOS 26 shape: a wide knob) */
.msw { position: relative; flex: none; width: 36px; height: 16px; margin: 0; border-radius: 8px; background: rgba(255, 255, 255, .12); -webkit-appearance: none; appearance: none; cursor: pointer; transition: background .2s ease; }
.msw::after { content: ""; position: absolute; top: 1.5px; left: 2px; width: 19px; height: 13px; border-radius: 7px; background: #e3e2e2; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .25s var(--spring), background .2s ease; }
.msw:checked { background: #3777ef; }
.msw:checked::after { transform: translateX(13px); background: #e1ebfe; }
.msw:disabled { opacity: .45; cursor: default; }
.msw:focus-visible, .mchk:focus-visible, .mseg button:focus-visible, .mpop select:focus-visible, .mbtn:focus-visible, .mslider:focus-visible { outline: 3px solid rgba(58, 123, 244, .6); outline-offset: 1px; }
/* pop-up button: the value, then a round chevron button */
.mpop { position: relative; display: flex; align-items: center; gap: 8px; }
.mpop select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font: inherit; }
.mpop span { color: var(--w-text); }
.mpop i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--w-ctl); }
.mpop i svg { width: 9px; height: 11px; }
/* segmented control */
.mseg { display: flex; flex: none; height: 24px; padding: 0; border-radius: 7px; background: var(--w-ctl); }
.mseg button { min-width: 60px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--w-text); font: 400 13px/1 var(--sf); cursor: pointer; }
.mseg button[aria-checked="true"] { background: #397bf7; color: #fff; }
/* slider */
.msl { display: flex; align-items: center; gap: 10px; }
.mslider { width: 200px; height: 20px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.mslider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #397bf7 var(--pct), var(--w-ctl) var(--pct)); }
.mslider::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #397bf7 var(--pct), var(--w-ctl) var(--pct)); }
.mslider::-webkit-slider-thumb { width: 22px; height: 15px; margin-top: -5.5px; border: 0; border-radius: 8px; background: #e3e2e2; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -webkit-appearance: none; appearance: none; }
.mslider::-moz-range-thumb { width: 22px; height: 15px; border: 0; border-radius: 8px; background: #e3e2e2; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.mslider:disabled { opacity: .5; }
.msl--g small { color: var(--w-sec); font-size: 11px; }
.msl--g .mslider { flex: 1; min-width: 140px; }
.fr__app { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 10px; border-radius: 5px; background: var(--w-ctl); color: var(--w-text); font-size: 11px; font-weight: 600; vertical-align: middle; }
.msl output { width: 50px; color: var(--w-sec); text-align: right; font-variant-numeric: tabular-nums; }
/* push button and checkbox */
.mbtn { flex: none; height: 24px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--w-ctl); color: var(--w-text); font: 400 13px/1 var(--sf); cursor: pointer; }
.mbtn:active { background: #4f4544; }
.mbtn:disabled { opacity: .45; cursor: default; }
.mbtn--blue { background: #397bf7; color: #fff; }
.mchk { position: relative; flex: none; width: 14px; height: 14px; margin: 0; border-radius: 4px; background: var(--w-ctl); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .15); -webkit-appearance: none; appearance: none; cursor: pointer; }
.mchk:checked { background: #397bf7; }
.mchk:checked::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 3.5px; height: 7.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.mchk-row { display: flex; align-items: center; gap: 6px; }
/* About */
.about { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 100%; padding: 16px 0; text-align: center; }
.about img { width: 96px; height: 96px; }
.about h3 { margin: 0; font-size: 22px; font-weight: 600; }
.about__v { color: var(--w-sec); font-size: 13px; }
.about__line { margin-top: 4px; font-size: 13px; }
.about__up { display: grid; justify-items: center; gap: 8px; max-width: 380px; margin-top: 10px; }
.about__row { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.about__row .sec { color: var(--w-sec); }
.about__cap { color: var(--w-sec); font-size: 11px; }
.about__copy { margin-top: 8px; color: #6f6767; font-size: 11px; }
.about__links { display: flex; gap: 14px; font-size: 11px; }
.about__links a { color: #4a8ef8; }
.spin { width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, .25); border-top-color: var(--w-text); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- the features, in the site's own look ---------- */
.nf__head { display: grid; justify-items: center; gap: 16px; max-width: 760px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }
.nf__head img { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 20px 40px -14px rgba(12, 10, 9, .5); }
.nf__head .h2 em, .nf__install .h2 em { font-style: normal; color: var(--hl); }
.nf__head .lede { margin: 0 auto; }
.nf__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 8px; }
.nf__cta .px { color: var(--text-3); font-size: 13px; }
.nf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nf__card { --s: 6px; padding: clamp(22px, 2.6vw, 32px); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.nf__card h2 { margin: 0 0 14px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.035em; }
.nf__card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nf__card li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.nf__card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--hl); }
.nf__card li b { color: var(--text); }
.nf__install { max-width: 820px; margin: clamp(72px, 9vw, 130px) auto 0; text-align: center; }
.nf__install .lede { margin: 16px auto 0; }
.nf__steps { display: grid; gap: 10px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: st; text-align: left; }
.nf__steps li { position: relative; padding: 16px 18px 16px 62px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--text-2); counter-increment: st; }
.nf__steps li::before { content: "0" counter(st); position: absolute; left: 18px; top: 17px; font: 400 14px/1.4 var(--px); color: var(--hl); }
.nf__steps b { color: var(--text); }
.nf__term { margin: 22px 0 0; color: var(--text-3); font-size: 14px; line-height: 1.6; }
.nf__term code { padding: 2px 6px; background: var(--bg-2); color: var(--text); font: 400 12.5px/1.6 var(--px); word-break: break-all; }

/* ---------- 1.4.0: Home and up to three shortcuts in a capsule, left of the camera ---------- */
.ip__sc { display: inline-flex; gap: calc(3 * var(--u)); padding: calc(2 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .055); }
.ip__sc[hidden] { display: none; }
.sc__b { position: relative; display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(22 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sec); cursor: pointer; transition: background .15s ease, color .15s ease; }
.sc__b svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.sc__b:hover { background: rgba(255, 255, 255, .08); }
.sc__b.is-sel { background: var(--fill); color: #fff; }
.sc__b em { position: absolute; top: calc(-2 * var(--u)); right: calc(-3 * var(--u)); min-width: calc(12 * var(--u)); height: calc(12 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: 999px; background: var(--blue); color: #fff;
  font: 700 calc(8 * var(--u))/calc(12 * var(--u)) var(--sf); font-style: normal; font-variant-numeric: tabular-nums; text-align: center; pointer-events: none; }
.sc__b i { position: absolute; top: calc(-3 * var(--u)); right: calc(-3 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .8); }
.sc__b i::before { content: ""; position: absolute; left: 25%; right: 25%; top: calc(50% - 1px); height: 2px; border-radius: 1px; background: #fff; }
.ip__edit { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.ip__edit[hidden] { display: none; }
.ip__edit small { color: var(--sec); font-size: calc(11 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; }
.ip__done { height: calc(22 * var(--u)); padding: 0 calc(10 * var(--u)); border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: 600 calc(11 * var(--u))/1 var(--sf); cursor: pointer; }
.island.is-editing .ip__tool { display: none; }

/* the grid: five to a row, two rows to a page, pages snap with dots on the right */
.gwrap { display: flex; gap: calc(10 * var(--u)); height: 100%; }
.gpages { flex: 1; min-width: 0; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.gpages::-webkit-scrollbar { display: none; }
.gp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; gap: calc(10 * var(--u)); height: 100%; padding-top: calc(4 * var(--u)); scroll-snap-align: start; scroll-snap-stop: always; }
.gdots { display: flex; flex-direction: column; justify-content: center; gap: calc(8 * var(--u)); }
.gdots[hidden] { display: none; }
.gdots button { display: grid; place-items: center; width: calc(14 * var(--u)); height: calc(14 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; }
.gdots button::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .3); transition: background .25s ease; }
.gdots button[aria-current="true"]::before { background: rgba(255, 255, 255, .9); }
.ip__tile .tb { position: absolute; top: calc(6 * var(--u)); right: calc(6 * var(--u)); display: grid; place-items: center; width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: var(--blue); }
.ip__tile .tb::before, .ip__tile .tb::after { content: ""; position: absolute; border-radius: 1px; background: #fff; }
.ip__tile .tb--add::before { width: 50%; height: 2px; } .ip__tile .tb--add::after { width: 2px; height: 50%; }
.ip__tile .tb--sel::before { width: 26%; height: 2px; left: 24%; top: 54%; transform: rotate(45deg); } .ip__tile .tb--sel::after { width: 46%; height: 2px; left: 36%; top: 46%; transform: rotate(-50deg); }
.ip__tile.is-dim { opacity: .5; }
.ip__tile.is-long b { font-size: calc(11.5 * .86 * var(--u)); }
.island.is-editing .ip__tile.is-on::after { display: none; }

/* Stats beside the camera, and its panel */
.stv { display: grid; line-height: 1; }
.stv small { color: var(--sec); font-size: max(7px, calc(13 * .55 * var(--u))); font-weight: 700; letter-spacing: .3px; }
.stv b { font-size: calc(13 * .9 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.island__r .stv { justify-items: end; }
.lv-0 { color: var(--green); } .lv-1 { color: var(--yellow); } .lv-2 { color: var(--red); }
.sp { display: flex; gap: calc(10 * var(--u)); height: calc(100% - 2px); }
.st { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(255, 255, 255, .07); }
.st > span { display: flex; align-items: center; gap: calc(4 * var(--u)); color: var(--sec); font-size: calc(10.5 * var(--u)); font-weight: 600; }
.st > span svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.st > b { margin-top: auto; color: #fff; font: 600 calc(22 * var(--u))/1.1 ui-rounded, var(--sf); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st > small { color: var(--sec); font-size: calc(10 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st__bar { height: calc(4 * var(--u)); margin-top: calc(6 * var(--u)); border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.st__bar i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: currentColor; transition: width .4s ease; }
.st__rate { display: flex; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(4 * var(--u)); font: 600 calc(15 * var(--u))/1.2 ui-rounded, var(--sf); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st__rate svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.st__rate:nth-child(2) { margin-top: auto; }
.st__rate:last-child { margin-bottom: auto; }

/* notes: a card with the colour dot bottom left and A, B, I, U bottom right */
.nc { display: flex; flex-direction: column; height: calc(100% - 2px); border-radius: calc(12 * var(--u)); background: rgba(255, 255, 255, .08); }
.nc .ip__notes { flex: 1; height: auto; min-height: 0; border-radius: 0; background: none; }
.nc__bar { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(6 * var(--u)) calc(4 * var(--u)); }
.nc__dot { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; }
.nc__dot::before { content: ""; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: #0a84ff; }
.nc__dot[data-ink]::before { background: var(--ink); }
.nc__fmt { display: flex; }
.nc__fmt button { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .75); font: 600 calc(11 * var(--u))/1 var(--sf); cursor: pointer; transition: background .15s ease; }
.nc__fmt button:hover, .nc__fmt button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
.ip__notes.f-b { font-weight: 700; } .ip__notes.f-i { font-style: italic; } .ip__notes.f-u { text-decoration: underline; } .ip__notes.f-sz { font-size: calc(16 * var(--u)); }
.ip__notes { color: var(--ink, #fff); }

/* calendar panel: days you can click */
.cp__days button { position: relative; display: grid; place-items: center; height: calc(14 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .85); font: inherit; cursor: pointer; }
.cp__days button.today::before { content: ""; position: absolute; z-index: -1; width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: var(--red); }
.cp__days button.today { z-index: 0; color: #fff; font-weight: 700; }
.cp__days button.is-pick:not(.today)::before { content: ""; position: absolute; z-index: -1; width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .2); }
.cp__days button.is-pick { z-index: 0; }
.cp__days button.ev::after { content: ""; position: absolute; bottom: -1px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .55); }

/* ---------- Elongated: one long row of widgets, split by hairlines ---------- */
.eh { overflow: hidden; }
.eh__row { display: flex; height: calc(100% - 2px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.eh__row::-webkit-scrollbar { display: none; }
.ew { position: relative; flex: none; display: flex; flex-direction: column; justify-content: center; }
.ew[hidden] { display: none; }
.ew:not([hidden]) ~ .ew:not([hidden]) { margin-left: calc(16 * var(--u)); padding-left: calc(16 * var(--u)); }
.ew:not([hidden]) ~ .ew:not([hidden])::before { content: ""; position: absolute; left: 0; top: calc(10 * var(--u)); bottom: calc(10 * var(--u)); width: 1px; background: rgba(255, 255, 255, .1); }
.ew--music { width: calc(290 * var(--u)); gap: calc(8 * var(--u)); }
.ew--mirror { width: calc(96 * var(--u)); align-items: center; }
.ew--cal { width: calc(300 * var(--u)); flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: calc(12 * var(--u)); padding-top: calc(4 * var(--u)); }
.ew--notes { width: calc(230 * var(--u)); }
.ew--timer { width: calc(250 * var(--u)); flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(10 * var(--u)); }
.ew--todo { width: calc(230 * var(--u)); justify-content: flex-start; gap: calc(6 * var(--u)); padding-top: calc(4 * var(--u)); }
.ew--stats { width: calc(210 * var(--u)); gap: calc(8 * var(--u)); }
.ew__mtop { display: flex; align-items: center; gap: calc(12 * var(--u)); min-width: 0; }
.ew__art { flex: none; width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--art); }
.ew__mtxt { display: grid; gap: calc(2 * var(--u)); min-width: 0; }
.ew__mtxt b, .ew__mtxt > span:not(.ew__mctl) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew__mtxt b { font-size: calc(13.5 * var(--u)); font-weight: 700; }
.ew__mtxt > span:not(.ew__mctl) { color: var(--sec); font-size: calc(11 * var(--u)); font-weight: 500; }
.ew__mctl { display: flex; align-items: center; gap: calc(14 * var(--u)); padding-top: calc(5 * var(--u)); }
.ew__mctl button { display: grid; place-items: center; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.ew__mctl svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.ew__mctl button + button svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.ew__scrub { position: relative; height: calc(13 * var(--u)); cursor: pointer; touch-action: none; }
.ew__scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(4 * var(--u)); margin-top: calc(-2 * var(--u)); border-radius: 2px; background: rgba(255, 255, 255, .2); }
.ew__scrub i { position: absolute; left: 0; top: 50%; height: calc(4 * var(--u)); margin-top: calc(-2 * var(--u)); width: calc(var(--p, 0) * 100%); border-radius: 2px; background: rgba(255, 255, 255, .85); }
.ew__scrub b { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #fff; transform: translate(-50%, -50%); transition: width .15s ease, height .15s ease; }
.ew__scrub.is-drag b, .ew__scrub:focus-visible b { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.ew__scrub:focus-visible { outline: 0; }
.ew__times { display: flex; justify-content: space-between; margin-top: calc(-6 * var(--u)); color: var(--sec); font-size: calc(9.5 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; }
.ew__mirror { display: grid; place-content: center; justify-items: center; gap: calc(5 * var(--u)); width: calc(84 * var(--u)); height: calc(84 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .9); cursor: pointer; transition: background .15s ease; }
.ew__mirror:hover { background: rgba(255, 255, 255, .14); }
.ew__mirror svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.ew__mirror small { color: var(--sec); font-size: calc(10 * var(--u)); font-weight: 600; }
.ew__mon { flex: none; padding: 0; border: 0; background: none; color: #fff; font: 700 calc(22 * var(--u))/1 var(--sf); cursor: pointer; }
.ew__calr { display: grid; gap: calc(8 * var(--u)); flex: 1; min-width: 0; }
.ew__days { display: grid; grid-template-columns: repeat(7, 1fr); height: calc(40 * var(--u)); }
.ew__days button { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u)); padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .85); font: inherit; cursor: pointer; }
.ew__days small { color: var(--sec); font-size: calc(7.5 * var(--u)); font-weight: 700; }
.ew__days b { font-size: calc(12 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ew__days .is-we b { color: rgba(255, 69, 58, .75); } .ew__days .is-past b { color: rgba(255, 255, 255, .4); }
.ew__days .is-sel small, .ew__days .is-sel b { color: var(--blue); }
.ew__days .is-sel b { font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1; }
.ew__days i { width: calc(3 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%; }
.ew__days .has-ev:not(.is-sel) i { background: rgba(255, 255, 255, .45); }
.ew__days .is-today:not(.is-sel)::after { content: ""; position: absolute; bottom: 0; width: calc(10 * var(--u)); height: calc(2 * var(--u)); border-radius: 1px; background: var(--blue); }
.ew__evs { display: grid; gap: calc(5 * var(--u)); max-height: calc(60 * var(--u)); overflow-y: auto; scrollbar-width: none; }
.ew__ev { display: flex; align-items: center; gap: calc(7 * var(--u)); min-width: 0; }
.ew__ev::before { content: ""; flex: none; width: calc(3 * var(--u)); height: calc(22 * var(--u)); border-radius: 1.5px; background: var(--c); }
.ew__ev span { display: grid; flex: 1; min-width: 0; }
.ew__ev b, .ew__ev em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew__ev b { font-size: calc(11.5 * var(--u)); font-weight: 600; }
.ew__ev em { color: var(--sec); font-size: calc(9.5 * var(--u)); font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.ew__ev button { flex: none; height: calc(22 * var(--u)); padding: 0 calc(10 * var(--u)); border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: 700 calc(10.5 * var(--u))/1 var(--sf); cursor: pointer; }
.ew__none { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); padding-top: calc(4 * var(--u)); color: var(--sec); font-size: calc(11 * var(--u)); font-weight: 500; }
.rb { display: grid; place-items: center; flex: none; width: var(--d); height: var(--d); padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .12s ease, transform .2s var(--spring); }
.rb:hover { background: rgba(255, 255, 255, .2); }
.rb--blue, .rb--blue:hover { background: var(--blue); }
.rb svg { width: 42%; height: 42%; }
.rb--t { font: 700 calc(9.5 * var(--u))/1 var(--sf); }
.wh { display: flex; align-items: center; gap: calc(2 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; }
.wh > span { color: var(--sec); }
.whc { width: calc(38 * var(--u)); height: calc(66 * var(--u)); padding: calc(22 * var(--u)) 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-mask: linear-gradient(transparent, #000 35%, #000 65%, transparent); mask: linear-gradient(transparent, #000 35%, #000 65%, transparent); }
.whc::-webkit-scrollbar { display: none; }
.whc div { display: flex; align-items: baseline; justify-content: center; gap: 1px; height: calc(22 * var(--u)); line-height: calc(22 * var(--u)); color: rgba(255, 255, 255, .3); font-variant-numeric: tabular-nums; scroll-snap-align: center; transition: color .15s ease, transform .15s ease; }
.whc div.is-on { color: #fff; transform: scale(1.1); }
.whc small { color: var(--sec); font-size: calc(8 * var(--u)); font-weight: 600; }
.whq { display: grid; gap: calc(6 * var(--u)); }
.ew__run { flex: 1; color: #fff; font-size: calc(34 * var(--u)); font-weight: 300; font-variant-numeric: tabular-nums; }
.ew__run.is-paused { color: var(--sec); }
.ew__new { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--sec); cursor: text; transition: background .15s ease; }
.ew__new:focus-within { background: rgba(255, 255, 255, .12); color: var(--blue); }
.ew__new svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.ew__new input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: #fff; font: 500 calc(12 * var(--u))/1 var(--sf); user-select: text; -webkit-user-select: text; }
.ew__new input::placeholder { color: var(--sec); }
.ew__new input:focus { outline: 0; }
.ew__todos { display: grid; gap: calc(3 * var(--u)); margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: none; }
.ew__todos li { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(20 * var(--u)); }
.ew__todos li > button:first-child { display: grid; place-items: center; flex: none; width: calc(13 * var(--u)); height: calc(13 * var(--u)); padding: 0; border: 1.5px solid var(--sec); border-radius: 50%; background: none; cursor: pointer; }
.ew__todos li.is-done > button:first-child { border-color: var(--blue); background: var(--blue) radial-gradient(circle, #fff 0 2px, transparent 2.5px); }
.ew__todos span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(11.5 * var(--u)); font-weight: 500; }
.ew__todos .is-done span { color: var(--sec); text-decoration: line-through; }
.ew__todos li > button:last-child { flex: none; padding: 0 2px; border: 0; background: none; color: var(--sec); font: 700 calc(9 * var(--u))/1 var(--sf); opacity: 0; cursor: pointer; }
.ew__todos li:hover > button:last-child, .ew__todos li > button:last-child:focus-visible { opacity: 1; }
.esr { display: grid; gap: calc(3 * var(--u)); }
.esr > div { display: flex; justify-content: space-between; font-size: calc(11 * var(--u)); font-weight: 600; }
.esr > div b { font-size: calc(13 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- phones and small windows ---------- */
@media (max-width: 860px) {
  .mbar__m { display: none; }
  .win { top: 40px; }
  .nf__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* a phone's "screen" is narrow: a smaller notch, icon-only tabs, and Home stacks */
  .island { --nw: 120px; --nh: 30px; }
  .ip__tab[aria-selected="true"] span { display: none; }
  .ip__tab { padding: 0 calc(6 * var(--u)); }
  .hs { flex-direction: column; gap: 10px; height: auto; }
  .hs__live { width: auto; }
  .hs__gap { display: none; }
  .hs__rule { width: auto; height: 1px; margin: 0; }
  .ip__view[data-view="music"] .np2__ctl { gap: 22px; }
  .gp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ip__view[data-view="grid"] { height: calc(338 * var(--u)); }
  .sp { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
  .ip__view[data-view="stats"] { height: auto; }
  .ip__view[data-view="calendar"] { height: auto; }
  .cp { flex-direction: column; gap: 12px; }
  .cp__month { width: 100%; }
  .cp__div { display: none; }
  .cp__next { width: 100%; }
  .mp__cam { height: 70%; }
  .mbar__app { display: none; }
  .mbar__clock { font-size: 12px; }
  .mbar__status { display: none; }
  .dock { --dock-size: 40px; gap: 6px; padding: 6px 8px; }
  .dock__ico { border-radius: 10px; }
  img.dock__ico { border-radius: 10px; }
  .note-pop { top: auto; bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  .bars i, .act-wave, .act-bell { animation: none; }
  .island, .island::before, .island::after, .island__l, .island__r, .island__panel, .bubble, .dock__i { transition-duration: .01s !important; }
  .ip__view, .note-pop, .win, .ctx, .spin, .lyr span, .hs .is-new, .cs, .cb__none { animation: none; }
  .island__glass { transition: none; }
}
.mac.is-idle *, .mac.is-idle *::before, .mac.is-idle *::after { animation-play-state: paused !important; }

.nf__card--wide { grid-column: 1 / -1; }
.nf__brew { margin: 18px 0 26px; }
.nf__brew code { display: inline-block; padding: 12px 16px; background: var(--bg-2); color: var(--text); font: 400 14px/1.5 var(--px); word-break: break-all; }