/* loukdekker.nl launcher
   Follows Apple's HIG: iOS system colours and label/fill/separator levels, the Dynamic Type
   (Large) type scale, the "lift" pointer effect for app icons, and Liquid Glass only on
   interactive / navigation surfaces (top bar, dock, menu, and cards while hovered). */

:root {
  /* System colours (light) */
  --bg: #f2f2f7;                              /* systemGroupedBackground */
  --label: #000;
  --label-2: rgba(60, 60, 67, .6);            /* secondaryLabel */
  --label-3: rgba(60, 60, 67, .3);            /* tertiaryLabel */
  --separator: rgba(60, 60, 67, .18);
  --fill-3: rgba(118, 118, 128, .12);         /* tertiarySystemFill */
  --blue: #007aff;
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --indigo: #5856d6;
  --teal: #30b0c7;
  --purple: #af52de;
  --gray: #8e8e93;

  /* Materials */
  --material: rgba(255, 255, 255, .62);       /* regular material over the colour wash */
  --glass: rgba(255, 255, 255, .34);          /* Liquid Glass (interactive state) */
  --glass-rim: rgba(255, 255, 255, .95);
  --glass-rim-dim: rgba(255, 255, 255, .25);
  --specular: rgba(255, 255, 255, .44);
  --shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 6px 24px rgba(0, 0, 0, .06);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .04), 0 18px 44px rgba(0, 0, 0, .10);

  /* Colour wash behind everything (gives the glass something to refract) */
  --wash-1: rgba(0, 122, 255, .30);
  --wash-2: rgba(255, 45, 85, .20);
  --wash-3: rgba(52, 199, 89, .22);
  --wash-4: rgba(175, 82, 222, .20);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000;
    --label: #fff;
    --label-2: rgba(235, 235, 245, .6);
    --label-3: rgba(235, 235, 245, .3);
    --separator: rgba(84, 84, 88, .5);
    --fill-3: rgba(118, 118, 128, .24);
    --blue: #0a84ff;
    --green: #30d158;
    --orange: #ff9f0a;
    --red: #ff453a;
    --indigo: #5e5ce6;
    --teal: #40c8e0;
    --purple: #bf5af2;
    --gray: #8e8e93;
    --material: rgba(28, 28, 30, .62);
    --glass: rgba(44, 44, 46, .30);
    --glass-rim: rgba(255, 255, 255, .45);
    --glass-rim-dim: rgba(255, 255, 255, .08);
    --specular: rgba(255, 255, 255, .128);
    --shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 6px 24px rgba(0, 0, 0, .35);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .5);
    --wash-1: rgba(10, 132, 255, .30);
    --wash-2: rgba(255, 55, 95, .18);
    --wash-3: rgba(48, 209, 88, .16);
    --wash-4: rgba(191, 90, 242, .20);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--label);
  font: 400 17px/22px var(--font);           /* Body */
  letter-spacing: -.024em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;          /* numbers never change width */
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: -25vmax;
  z-index: -1;
  background:
    radial-gradient(38vmax 38vmax at 18% 18%, var(--wash-1), transparent 70%),
    radial-gradient(34vmax 34vmax at 85% 12%, var(--wash-2), transparent 70%),
    radial-gradient(40vmax 40vmax at 70% 85%, var(--wash-3), transparent 70%),
    radial-gradient(30vmax 30vmax at 15% 80%, var(--wash-4), transparent 70%);
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift {
  to { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg) scale(1.05); }
}
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; }

/* ---------- Type scale (iOS Dynamic Type, Large) ---------- */
.large-title { font: 700 34px/41px var(--font-display); letter-spacing: .011em; }
.title-1     { font: 700 28px/34px var(--font-display); letter-spacing: .013em; }
.title-2     { font: 700 22px/28px var(--font-display); letter-spacing: .016em; }
.headline    { font: 600 17px/22px var(--font); letter-spacing: -.024em; }
.subhead     { font: 400 15px/20px var(--font); letter-spacing: -.016em; }
.footnote    { font: 400 13px/18px var(--font); letter-spacing: -.006em; }
.caption     { font: 400 12px/16px var(--font); letter-spacing: 0; }
.secondary   { color: var(--label-2); }
/* Single-line text: never wraps, so live updates can't change the layout */
.line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Glass surfaces ---------- */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--material);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-rim-dim);
}
/* Rim light: a 1px gradient border, brightest on the side facing the pointer */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(var(--angle, 135deg), var(--glass-rim), var(--glass-rim-dim) 35%, transparent 55%, var(--glass-rim-dim) 85%, var(--glass-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);
  opacity: .3;
  pointer-events: none;
  transition: opacity .45s ease;
}
/* Specular highlight that follows the pointer */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), var(--specular), transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.glass.live:hover {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(210%) brightness(1.06);
  backdrop-filter: blur(18px) saturate(210%) brightness(1.06);
  box-shadow: var(--shadow-hover), inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-dim);
}
.glass.live:hover::before { opacity: 1; }
.glass.live:hover::after { opacity: 1; }
.glass.live { transition: background .45s ease, box-shadow .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease; }

/* ---------- Landing ---------- */
.landing {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 32px;
  padding: 16px;
  text-align: center;
  animation: appear .9s cubic-bezier(.2, .8, .2, 1) both;
}
/* Logo: "ld." with a blinking text cursor, in the system font */
.mark {
  display: inline-flex;
  align-items: center;
  margin-bottom: -14px;
  font: 600 44px/1 var(--font-display);
  letter-spacing: -.02em;
}
.caret {
  display: inline-block;
  width: .07em;
  height: .92em;
  margin-left: .06em;
  border-radius: 99px;
  background: currentColor;
  animation: caret 1.1s ease-in-out infinite;
}
@keyframes caret {
  0%, 45% { opacity: 1; }
  55%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
.landing h1 {
  margin: 0;
  font: 700 clamp(40px, 9vw, 64px)/1.08 var(--font-display);
  letter-spacing: -.012em;
}
/* HIG filled button: capsule, 17pt semibold, at least 44pt tall */
.btn {
  display: inline-grid;
  place-items: center;
  min-height: 50px;
  padding: 0 30px;
  border-radius: 980px;
  background: var(--blue);
  color: #fff;
  font: 600 17px/22px var(--font);
  letter-spacing: -.024em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 calc(4px + 10px * var(--lift, 0)) calc(12px + 16px * var(--lift, 0)) color-mix(in srgb, var(--blue) 35%, transparent);
  will-change: transform;
}
.btn:focus-visible, .avatar:focus-visible, .app:focus-visible .icon {
  outline: 3px solid color-mix(in srgb, var(--blue) 50%, transparent);
  outline-offset: 3px;
}
@keyframes appear { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Top bar (navigation: Liquid Glass) ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(16px, calc((100vw - 1080px) / 2));
  border-radius: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: .5px solid var(--separator);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand img { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 .5px var(--separator); }
.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #a6a6ab, #7d7d82);   /* iOS monogram */
  color: #fff;
  font: 600 14px/1 var(--font-display);
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  will-change: transform;
}
.menu {
  position: fixed;
  z-index: 20;
  right: max(16px, calc((100vw - 1080px) / 2));
  top: 50px;
  width: 250px;
  padding: 6px;
  border-radius: 18px;
  transform-origin: top right;
  animation: pop .4s cubic-bezier(.34, 1.4, .64, 1);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  backdrop-filter: blur(40px) saturate(200%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2), inset 0 1px 0 var(--glass-rim-dim);
}
.menu[hidden] { display: none; }
.menu .who { padding: 10px 12px 12px; border-bottom: .5px solid var(--separator); margin-bottom: 6px; }
.menu a { display: block; padding: 10px 12px; border-radius: 10px; }
.menu a:hover { background: var(--fill-3); }
.menu a.danger { color: var(--red); }
@keyframes pop { from { opacity: 0; transform: scale(.85); } }

/* ---------- Page ---------- */
main { max-width: 1080px; margin: 0 auto; padding: 40px 16px 64px; }
.intro { margin: 0 0 28px; padding: 0 4px; }
.intro h1 { margin: 0; }
.intro p { margin: 2px 0 0; }

/* ---------- Dock with app icons (navigation: Liquid Glass) ---------- */
.dock {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 36px;
  padding: 10px 14px 8px;
  border-radius: 34px;
}
/* The hit region is padded well beyond the icon (HIG: ~24pt around unbezelled elements) */
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 96px;
  padding: 14px 0 8px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.app:focus-visible { outline: none; }
.icon {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 22.37%;
  box-shadow:
    0 calc(2px + 12px * var(--lift, 0)) calc(6px + 20px * var(--lift, 0)) rgba(0, 0, 0, calc(.14 + .12 * var(--lift, 0))),
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -1px 0 rgba(0, 0, 0, .08);
  transform-origin: 50% 60%;
  will-change: transform;
}
@supports (corner-shape: squircle) {
  .icon { border-radius: 30%; corner-shape: squircle; }
}
/* Lift effect: soft specular highlight on top of the icon, following the pointer */
.icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  corner-shape: inherit;
  background: radial-gradient(70% 70% at var(--hx, 50%) var(--hy, 0%), rgba(255, 255, 255, .5), transparent 70%);
  opacity: calc(var(--lift, 0) * .72);
  pointer-events: none;
}
.icon svg { width: 34px; height: 34px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }
.app .caption { color: var(--label); }
.i-streams { background: linear-gradient(180deg, #8e8cff, #5856d6 55%, #4a3fc4); }
.i-meta    { background: linear-gradient(180deg, #ffb340, #ff8a00 50%, #ff5e3a); }
.i-hydra   { background: linear-gradient(180deg, #5fe07f, #34c759 50%, #1fa37a); }
.i-backup  { background: linear-gradient(180deg, #5ac8fa, #0a84ff 55%, #0062d1); }
.i-komodo  { background: linear-gradient(180deg, #636366, #3a3a3c 55%, #1c1c1e); }

/* Without JS (or with reduced motion) the icons still lift, just without pointer parallax */
html:not(.js-lift) .icon { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease; }
html:not(.js-lift) .app:hover .icon { transform: translateY(-6px) scale(1.08); --lift: 1; }
html:not(.js-lift) .btn { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
html:not(.js-lift) .btn:hover { transform: scale(1.04); }

/* ---------- Widgets ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.card {
  min-width: 0;
  padding: 16px 18px 18px;
  border-radius: 24px;
  animation: appear .7s cubic-bezier(.2, .8, .2, 1) both;
}
@supports (corner-shape: squircle) {
  .card { border-radius: 36px; corner-shape: squircle; }
  .dock { border-radius: 50px; corner-shape: squircle; }
}
.card:nth-child(2) { animation-delay: .04s; }
.card:nth-child(3) { animation-delay: .08s; }
.card:nth-child(4) { animation-delay: .12s; }
.card:nth-child(5) { animation-delay: .16s; }
.card.wide { grid-column: 1 / -1; }
.card > * { position: relative; z-index: 1; }
.card-h { display: flex; align-items: center; gap: 6px; height: 22px; margin: 0 0 10px; }
.card-h svg { width: 18px; height: 18px; flex: none; }
.card-h h2 { margin: 0; font: inherit; }
.t-blue   { color: var(--blue); }
.t-green  { color: var(--green); }
.t-indigo { color: var(--indigo); }
.t-orange { color: var(--orange); }
.t-teal   { color: var(--teal); }
.t-purple { color: var(--purple); }

.value { display: block; height: 34px; white-space: nowrap; }
.value small { font: 600 15px/20px var(--font); letter-spacing: -.016em; color: var(--label-2); margin-left: 3px; }
.value small.tight { margin-left: 1px; }
.meta { margin-top: 4px; }

.row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.row > div { min-width: 0; flex: 1; }
.ring { width: 72px; height: 72px; flex: none; transform: rotate(-90deg); }
.ring .track { stroke: var(--fill-3); }
.ring .val { stroke: var(--blue); transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1), stroke .3s; }

.bar { height: 6px; margin-top: 12px; border-radius: 3px; background: var(--fill-3); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--blue); transition: width .8s cubic-bezier(.2, .8, .2, 1), background .3s; }
.bar.green > i { background: var(--green); }
.bar.indigo > i { background: var(--indigo); }
.warn { background: var(--orange) !important; stroke: var(--orange) !important; }

.spark { display: block; width: 100%; height: 44px; margin-top: 12px; overflow: visible; }
.spark path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .area { stroke: none; }
.s-cpu, .s-rx { stroke: var(--blue); }
.a-cpu { fill: color-mix(in srgb, var(--blue) 16%, transparent); }
.s-tx { stroke: var(--green); }

.net { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.net > div { min-width: 0; }
.key::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.key.rx::before { background: var(--blue); }
.key.tx::before { background: var(--green); }

.containers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  column-gap: 24px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.containers li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  height: 44px;                        /* HIG row height */
  border-bottom: .5px solid var(--separator);
}
.containers .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray); }
.containers .up .dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.containers .status { color: var(--label-2); }

.foot { margin: 28px 0 0; text-align: center; color: var(--label-2); }
.foot.stale { color: var(--orange); }

/* ---------- Streams (AIOStreams live sessions, read in the browser) ----------
   Fixed height in every state (loading, connected, connect prompt), so nothing shifts. */
.card-h .open { margin-left: auto; color: var(--blue); }
.card-h .open:hover { text-decoration: underline; }
.str-box { position: relative; height: 104px; }
.str-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.str-users {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  height: 30px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.str-users li {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  background: var(--fill-3);
  font: 500 15px/20px var(--font);
  letter-spacing: -.016em;
}
.str-users li.empty { padding: 0; background: none; font-weight: 400; color: var(--label-2); }
.str-users .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray); }
.str-users .streaming .dot { background: var(--green); }
.str-users .paused .dot { background: var(--orange); }
.str-users .speed { color: var(--label-2); font-weight: 400; font-size: 13px; }
.str-connect { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.str-connect[hidden], .str-body[hidden], .str-connect .btn[hidden] { display: none; }
.btn.small { min-height: 36px; padding: 0 18px; font-size: 15px; line-height: 20px; }
.str-stats .short { display: none; }

/* ---------- Phone-only pieces (hidden on larger screens) ---------- */
.home, .page-dots, .w-greet, .app-account { display: none; }
.i-account { background: linear-gradient(180deg, #a6a6ab, #7d7d82); }
.monogram { color: #fff; font: 600 30px/1 var(--font-display); letter-spacing: 0; }

/* ---------- Heartbeat for running containers (app.js picks one dot every 1.5 s) ---------- */
.containers .dot { position: relative; }
.containers .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  opacity: 0;
  pointer-events: none;
}
.containers .up .dot.beat { animation: lubdub 1.5s cubic-bezier(.3, 0, .3, 1); }
.containers .up .dot.beat::after { animation: ripple 1.65s cubic-bezier(.2, .7, .3, 1); }
@keyframes lubdub {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.45); }
  24%  { transform: scale(1); }
  36%  { transform: scale(1.3); }
  52%, 100% { transform: scale(1); }
}
@keyframes ripple {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.4); }
}

/* ---------- Phone: iOS home screen ----------
   Pages are 4 columns x at most 5 rows, like the iPhone grid. Apps are 1x1; widgets use the
   iOS sizes: small 2x2 (.w-s), medium 4x2 (.w-m), large 4x4 (.w-l), plus a 4x1 strip (.w-strip).
   Rows are sized like an iOS icon cell (icon + label), so a small widget is close to square.
   Swipe sideways between pages; the dots show where you are. */
@media (max-width: 560px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .topbar, .intro, .foot { display: none; }
  main {
    --pad: 22px;
    --col-gap: 14px;
    --row-gap: 12px;
    --col: calc((100vw - 2 * var(--pad) - 3 * var(--col-gap)) / 4);
    --row: calc(var(--col) + 14px);
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .home {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .home::-webkit-scrollbar { display: none; }
  .page {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(5, var(--row));
    grid-auto-flow: row dense;
    align-content: start;
    gap: var(--row-gap) var(--col-gap);
    padding: max(20px, calc(env(safe-area-inset-top) + 8px)) var(--pad) 8px;
  }

  /* Page indicator: dots in a small glass capsule, like iOS */
  .page-dots {
    display: flex;
    align-self: center;
    align-items: center;
    gap: 9px;
    height: 26px;
    margin: 4px 0 max(12px, env(safe-area-inset-bottom));
    padding: 0 11px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--label) 8%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
  .page-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--label-3);
    cursor: pointer;
    transition: background .25s, transform .4s cubic-bezier(.34, 1.56, .64, 1);
  }
  .page-dots button[aria-current="true"] { background: var(--label); transform: scale(1.15); }

  /* Widgets */
  .page > .card {
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 14px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
  }
  @supports (corner-shape: squircle) { .page > .card { border-radius: 34px; corner-shape: squircle; } }
  .page > .w-strip { grid-column: span 4; }
  .page > .w-s { grid-column: span 2; grid-row: span 2; }
  .page > .w-m { grid-column: span 4; grid-row: span 2; }
  .page > .w-l { grid-column: span 4; grid-row: span 4; }
  .page .extra { display: none; }
  .page .card-h { margin-bottom: 6px; }
  .page .card-h h2 { font-size: 15px; }
  .page .bar { margin-top: 8px; }
  .page .meta { margin-top: 3px; }
  .page .value { overflow: hidden; text-overflow: ellipsis; }
  /* Graphs grow to fill whatever height the widget has left */
  .page .spark { flex: 1 1 0; height: auto; min-height: 24px; margin-top: 8px; }

  /* Small widgets: tighter type so the numbers fit in half the width */
  .page > .w-s .value { height: 30px; font-size: 24px; line-height: 30px; }
  .page > .w-s .value small { font-size: 13px; margin-left: 2px; }
  .page > .w-s .row { gap: 10px; }
  .page > .w-s .ring { display: none; }        /* small widgets: number + graph, like iOS */
  .page > .w-s .extra { display: block; }      /* there's room for swap / "Uptime" again */

  /* Greeting strip */
  .page > .w-greet { flex-direction: row; align-items: center; gap: 12px; padding: 0 14px; }
  .w-greet .logo { width: 46px; height: 46px; flex: none; border-radius: 22.37%; box-shadow: 0 0 0 .5px var(--separator); }
  .w-greet > div { min-width: 0; }
  .w-greet .title-2 { font-size: 20px; line-height: 25px; }

  /* Containers (large widget): 2-column list of names */
  .page #w-ct .containers { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; margin-top: 4px; }
  .page #w-ct li { height: 26px; grid-template-columns: 8px minmax(0, 1fr); column-gap: 8px; border: 0; }
  .page #w-ct .status { display: none; }
  .page #w-ct .subhead { font-size: 13px; line-height: 18px; letter-spacing: -.006em; }

  /* Apps */
  .page > .app {
    width: auto;
    height: 100%;
    min-width: 0;
    padding: 0;
    justify-content: flex-start;
    gap: 5px;
  }
  .page > .app-account { display: flex; }
  .page .icon { width: min(60px, var(--col)); height: min(60px, var(--col)); }
  .page .icon svg { width: 32px; height: 32px; }
  .page .monogram { font-size: 26px; }
  .page .app .caption { max-width: calc(100% + 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 13px; letter-spacing: .006em; }
  html:not(.js-lift) .page .app:active .icon { transform: scale(.9); transition-duration: .12s; }

  /* Account menu becomes a bottom sheet */
  .menu {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    border-radius: 26px;
    transform-origin: bottom center;
  }
  .menu a, .menu .who { padding-left: 16px; padding-right: 16px; }
}

/* Phone: Streams as a medium widget, System as a 4x1 strip (uptime left, disk right) */
@media (max-width: 560px) {
  .page > #w-str .str-box { flex: 1 1 0; height: auto; min-height: 0; }
  .page > #w-str .value { height: 30px; font-size: 24px; line-height: 30px; }
  .page > #w-str .str-users { margin-top: 10px; flex-wrap: wrap; height: 68px; -webkit-mask-image: none; mask-image: none; }
  .page > #w-str .str-stats .long { display: none; }
  .page > #w-str .str-stats .short { display: inline; }
  .page > #w-sys.w-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 16px;
    padding: 0 14px;
  }
  .page > #w-sys.w-strip .card-h { grid-area: 1 / 1; margin: 0; }
  .page > #w-sys.w-strip .value { grid-area: 2 / 1; height: 28px; font-size: 22px; line-height: 28px; }
  .page > #w-sys.w-strip #disk-meta { grid-area: 1 / 2; align-self: end; margin: 0; }
  .page > #w-sys.w-strip .bar { grid-area: 2 / 2; align-self: center; margin: 0; }
  .page > #w-sys.w-strip .extra { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass.live:hover, .topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body::before { display: none; }
}