/* Glass Dock: how it looks (glass, wallpapers, light and dark mode, the dock, menus and the add/edit sheet). */

/* ============================================================
   Registered colours: lets wallpapers and themes morph smoothly
   ============================================================ */
@property --w-bg1 { syntax: "<color>"; inherits: true; initial-value: #cfe5fa; }
@property --w-bg2 { syntax: "<color>"; inherits: true; initial-value: #f1f6fc; }
@property --w-a   { syntax: "<color>"; inherits: true; initial-value: #8fcaff; }
@property --w-b   { syntax: "<color>"; inherits: true; initial-value: #b9c6ff; }
@property --w-c   { syntax: "<color>"; inherits: true; initial-value: #93e2da; }
@property --w-d   { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --w-r1  { syntax: "<color>"; inherits: true; initial-value: #4ea4ff; }
@property --w-r2  { syntax: "<color>"; inherits: true; initial-value: #9fe0ff; }
@property --w-ink { syntax: "<color>"; inherits: true; initial-value: #0e2a4d; }

/* ============================================================
   Wallpapers — each has a light (--l-*) and dark (--d-*) set
   ============================================================ */
:root:not([data-wall]), [data-wall="lagoon"] {
  --l-bg1: #cfe5fa; --l-bg2: #f1f6fc; --l-a: #8fcaff; --l-b: #b9c6ff; --l-c: #93e2da; --l-d: #ffffff; --l-r1: #4ea4ff; --l-r2: #9fe0ff; --l-ink: #0e2a4d;
  --d-bg1: #030915; --d-bg2: #071630; --d-a: #0b4fc4; --d-b: #1b2a86; --d-c: #07789e; --d-d: #0c1c40; --d-r1: #1f6dff; --d-r2: #2fd0ff;
}
[data-wall="ember"] {
  --l-bg1: #fde3d6; --l-bg2: #fff6f0; --l-a: #ffb48c; --l-b: #ffa3b8; --l-c: #ffd79c; --l-d: #ffffff; --l-r1: #ff7d5c; --l-r2: #ffc6a6; --l-ink: #4b1a0f;
  --d-bg1: #120507; --d-bg2: #22090c; --d-a: #a3321d; --d-b: #761d48; --d-c: #b85d17; --d-d: #33101a; --d-r1: #ff5c38; --d-r2: #ffa45e;
}
[data-wall="grove"] {
  --l-bg1: #dcf2e4; --l-bg2: #f3faf5; --l-a: #9ee4b6; --l-b: #cbe995; --l-c: #8bd8d0; --l-d: #ffffff; --l-r1: #33c077; --l-r2: #a9eec5; --l-ink: #0f3a25;
  --d-bg1: #020e08; --d-bg2: #05180f; --d-a: #0e7447; --d-b: #2d6719; --d-c: #0a6a66; --d-d: #0a281a; --d-r1: #1fce79; --d-r2: #80f0b8;
}
[data-wall="graphite"] {
  --l-bg1: #e6e7ea; --l-bg2: #f6f6f7; --l-a: #d2d5dc; --l-b: #c6cad3; --l-c: #e4ddd3; --l-d: #ffffff; --l-r1: #9ba1ac; --l-r2: #d9dce2; --l-ink: #1d1d1f;
  --d-bg1: #09090b; --d-bg2: #131316; --d-a: #383b43; --d-b: #282a31; --d-c: #48443d; --d-d: #1a1b1f; --d-r1: #6d737e; --d-r2: #a2a8b3;
}
[data-wall="aurora"] {
  --l-bg1: #e6e2fb; --l-bg2: #f6f4fd; --l-a: #c5b7ff; --l-b: #a2e9d6; --l-c: #b7d9ff; --l-d: #ffffff; --l-r1: #917dff; --l-r2: #86e6cb; --l-ink: #26195c;
  --d-bg1: #03030d; --d-bg2: #090920; --d-a: #5530b8; --d-b: #0d8a6f; --d-c: #1a3ca0; --d-d: #170e3a; --d-r1: #35dfa7; --d-r2: #7b5dff;
}

/* ============================================================
   Tokens — light palette on bare :root
   ============================================================ */
:root {
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  /* wallpaper mapping (light) */
  --w-bg1: var(--l-bg1); --w-bg2: var(--l-bg2); --w-a: var(--l-a); --w-b: var(--l-b); --w-c: var(--l-c); --w-d: var(--l-d); --w-r1: var(--l-r1); --w-r2: var(--l-r2); --w-ink: var(--l-ink);

  --ink: #1d1d1f;
  --ink-2: rgb(29 29 31 / .64);
  --ink-3: rgb(29 29 31 / .44);
  --accent: #0071e3;
  --on-accent: #ffffff;
  --danger: #d70015;
  --ground: #dde8f3;

  --glass-a: rgb(255 255 255 / .50);
  --glass-b: rgb(255 255 255 / .22);
  --panel-a: rgb(252 252 254 / .82);
  --panel-b: rgb(244 246 250 / .72);
  --glass-hi: rgb(255 255 255 / .92);
  --glass-rim: rgb(255 255 255 / .45);
  --spec-1: rgb(255 255 255 / 1);
  --spec-2: rgb(255 255 255 / .50);
  --sheen: rgb(255 255 255 / .42);
  --shade: 0 22px 48px -18px rgb(20 36 70 / .34), 0 4px 12px -4px rgb(20 36 70 / .12);
  --glass-filter: blur(22px) saturate(185%) brightness(1.05);
  --panel-filter: blur(40px) saturate(190%);

  --hairline: rgb(29 29 31 / .10);
  --field: rgb(255 255 255 / .70);
  --field-edge: rgb(29 29 31 / .12);
  --track: rgb(118 118 128 / .14);
  --track-hover: rgb(118 118 128 / .22);
  --thumb: rgb(255 255 255 / .96);
  --util: rgb(255 255 255 / .46);
  --tip: rgb(250 250 252 / .80);
  --badge: rgb(242 242 247 / .92);
  --scrim: rgb(24 32 48 / .16);

  --grain: .10;
  --ribbon-edge: .85;
  --vignette: 0;
  --ribbons: 1;

  --clock-1: var(--w-ink);
  --clock-2: color-mix(in oklab, var(--w-ink) 70%, #ffffff);
  --clock-edge: rgb(255 255 255 / .85);
  --clock-glow: rgb(255 255 255 / .55);
  --hero-2: color-mix(in oklab, var(--w-ink) 76%, transparent);

  --icon: 58px;
  --pad: 9px;
  --gap: 10px;
  color-scheme: light;
  transition: --w-bg1 .9s ease, --w-bg2 .9s ease, --w-a .9s ease, --w-b .9s ease, --w-c .9s ease, --w-d .9s ease, --w-r1 .9s ease, --w-r2 .9s ease, --w-ink .9s ease;
}

/* ---- dark: follows the system unless the page or host says light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-appearance="light"]) {
    --w-bg1: var(--d-bg1); --w-bg2: var(--d-bg2); --w-a: var(--d-a); --w-b: var(--d-b); --w-c: var(--d-c); --w-d: var(--d-d); --w-r1: var(--d-r1); --w-r2: var(--d-r2); --w-ink: #ffffff;
    --ink: #f5f5f7; --ink-2: rgb(245 245 247 / .68); --ink-3: rgb(245 245 247 / .44);
    --accent: #0a84ff; --danger: #ff453a; --ground: #04070f;
    --glass-a: rgb(46 50 66 / .44); --glass-b: rgb(16 18 28 / .40);
    --panel-a: rgb(44 46 56 / .74); --panel-b: rgb(28 30 38 / .70);
    --glass-hi: rgb(255 255 255 / .30); --glass-rim: rgb(255 255 255 / .10);
    --spec-1: rgb(255 255 255 / .60); --spec-2: rgb(255 255 255 / .18); --sheen: rgb(255 255 255 / .14);
    --shade: 0 24px 54px -16px rgb(0 0 0 / .70), 0 4px 12px -4px rgb(0 0 0 / .40);
    --glass-filter: blur(22px) saturate(170%);
    --hairline: rgb(255 255 255 / .12); --field: rgb(255 255 255 / .08); --field-edge: rgb(255 255 255 / .14);
    --track: rgb(118 118 128 / .26); --track-hover: rgb(118 118 128 / .36); --thumb: rgb(99 99 102 / .95);
    --util: rgb(255 255 255 / .17); --tip: rgb(44 46 54 / .78); --badge: rgb(72 72 78 / .92); --scrim: rgb(0 0 0 / .38);
    --grain: .16; --ribbon-edge: .55; --vignette: .45; --ribbons: .74;
    --clock-1: #ffffff; --clock-2: rgb(255 255 255 / .62);
    --clock-edge: rgb(255 255 255 / .10); --clock-glow: rgb(0 0 0 / .45);
    --hero-2: rgb(255 255 255 / .76);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]):not([data-appearance="light"]) .wall-thumb {
    --w-bg1: var(--d-bg1); --w-bg2: var(--d-bg2); --w-a: var(--d-a); --w-b: var(--d-b); --w-c: var(--d-c); --w-d: var(--d-d); --w-r1: var(--d-r1); --w-r2: var(--d-r2);
  }
}
:root[data-theme="dark"]:not([data-appearance="light"]),
:root[data-appearance="dark"] {
  --w-bg1: var(--d-bg1); --w-bg2: var(--d-bg2); --w-a: var(--d-a); --w-b: var(--d-b); --w-c: var(--d-c); --w-d: var(--d-d); --w-r1: var(--d-r1); --w-r2: var(--d-r2); --w-ink: #ffffff;
  --ink: #f5f5f7; --ink-2: rgb(245 245 247 / .68); --ink-3: rgb(245 245 247 / .44);
  --accent: #0a84ff; --danger: #ff453a; --ground: #04070f;
  --glass-a: rgb(46 50 66 / .44); --glass-b: rgb(16 18 28 / .40);
  --panel-a: rgb(44 46 56 / .74); --panel-b: rgb(28 30 38 / .70);
  --glass-hi: rgb(255 255 255 / .30); --glass-rim: rgb(255 255 255 / .10);
  --spec-1: rgb(255 255 255 / .60); --spec-2: rgb(255 255 255 / .18); --sheen: rgb(255 255 255 / .14);
  --shade: 0 24px 54px -16px rgb(0 0 0 / .70), 0 4px 12px -4px rgb(0 0 0 / .40);
  --glass-filter: blur(22px) saturate(170%);
  --hairline: rgb(255 255 255 / .12); --field: rgb(255 255 255 / .08); --field-edge: rgb(255 255 255 / .14);
  --track: rgb(118 118 128 / .26); --track-hover: rgb(118 118 128 / .36); --thumb: rgb(99 99 102 / .95);
  --util: rgb(255 255 255 / .17); --tip: rgb(44 46 54 / .78); --badge: rgb(72 72 78 / .92); --scrim: rgb(0 0 0 / .38);
  --grain: .16; --ribbon-edge: .55; --vignette: .45; --ribbons: .74;
  --clock-1: #ffffff; --clock-2: rgb(255 255 255 / .62);
  --clock-edge: rgb(255 255 255 / .10); --clock-glow: rgb(0 0 0 / .45);
  --hero-2: rgb(255 255 255 / .76);
  color-scheme: dark;
}
:root[data-theme="dark"]:not([data-appearance="light"]) .wall-thumb,
:root[data-appearance="dark"] .wall-thumb {
  --w-bg1: var(--d-bg1); --w-bg2: var(--d-bg2); --w-a: var(--d-a); --w-b: var(--d-b); --w-c: var(--d-c); --w-d: var(--d-d); --w-r1: var(--d-r1); --w-r2: var(--d-r2);
}
.wall-thumb {
  --w-bg1: var(--l-bg1); --w-bg2: var(--l-bg2); --w-a: var(--l-a); --w-b: var(--l-b); --w-c: var(--l-c); --w-d: var(--l-d); --w-r1: var(--l-r1); --w-r2: var(--l-r2);
}

/* ============================================================
   Base
   ============================================================ */
html { height: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/1.45 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.no-anim, .no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-ico, .glyph {
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.ui-ico { width: 18px; height: 18px; }

/* ============================================================
   Glass material (Liquid Glass-style)
   ============================================================ */
.glass, .panel { position: relative; isolation: isolate; }
.glass {
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-rim), var(--shade);
}
.panel {
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  -webkit-backdrop-filter: var(--panel-filter);
  backdrop-filter: var(--panel-filter);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-rim), var(--shade);
  color: var(--ink);
}
/* specular rim: bright at the top-left edge, fading round the sides */
.glass::before, .panel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--spec-1) 0%, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 70%, var(--spec-2) 100%);
  -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);
  pointer-events: none;
  z-index: 1;
}
/* soft inner sheen, like light pooling in thick glass */
.glass::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 18% -10%, var(--sheen), rgb(255 255 255 / 0) 55%);
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   Wallpaper
   ============================================================ */
.wallpaper {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(172deg, var(--w-bg1) 0%, var(--w-bg2) 100%);
}
.wp-blob { position: absolute; border-radius: 50%; will-change: transform; }
.wp-a { width: 78vmax; height: 78vmax; left: -26vmax; top: -34vmax; background: radial-gradient(closest-side, var(--w-a), rgb(255 255 255 / 0)); animation: drift-a 52s ease-in-out infinite alternate; }
.wp-b { width: 70vmax; height: 70vmax; right: -28vmax; top: -22vmax; background: radial-gradient(closest-side, var(--w-b), rgb(255 255 255 / 0)); animation: drift-b 60s ease-in-out infinite alternate; }
.wp-c { width: 80vmax; height: 80vmax; left: 2vmax; bottom: -46vmax; background: radial-gradient(closest-side, var(--w-c), rgb(255 255 255 / 0)); animation: drift-c 66s ease-in-out infinite alternate; }
.wp-d { width: 46vmax; height: 46vmax; right: 6vmax; top: 16vmax; opacity: .75; background: radial-gradient(closest-side, var(--w-d), rgb(255 255 255 / 0)); animation: drift-d 46s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-8vmax, 9vmax, 0) scale(.94); } }
@keyframes drift-c { to { transform: translate3d(10vmax, -6vmax, 0) scale(1.06); } }
@keyframes drift-d { to { transform: translate3d(-12vmax, -4vmax, 0) scale(1.12); } }
.wp-ribbons { position: absolute; left: -4%; width: 108%; bottom: 0; height: 64%; opacity: var(--ribbons); }
.wp-ribbons .r1a { stop-color: var(--w-r2); stop-opacity: 0; }
.wp-ribbons .r1b { stop-color: var(--w-r1); stop-opacity: .78; }
.wp-ribbons .r1c { stop-color: var(--w-r2); stop-opacity: .60; }
.wp-ribbons .r2a { stop-color: var(--w-r1); stop-opacity: .12; }
.wp-ribbons .r2b { stop-color: var(--w-r2); stop-opacity: .72; }
.wp-ribbons .r2c { stop-color: var(--w-r1); stop-opacity: .55; }
.wp-edge { opacity: var(--ribbon-edge); }
.wp-vignette { position: absolute; inset: 0; background: radial-gradient(130% 95% at 50% 38%, rgb(0 0 0 / 0) 52%, rgb(0 0 0 / var(--vignette)) 100%); }
.wp-grain {
  position: absolute; inset: 0;
  opacity: var(--grain);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 0;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.round-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center;
  color: var(--ink); cursor: pointer;
  transition: transform .2s ease;
}
.round-btn:hover { transform: scale(1.05); }
.round-btn:active { transform: scale(.95); }
.round-btn .ui-ico { width: 20px; height: 20px; position: relative; z-index: 2; }
.cc-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 2px var(--glass-hi); z-index: 3; }
.sync-pill {
  height: 32px; padding: 0 14px 0 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12.5px/1 var(--font-text); color: var(--ink-2);
  animation: fade-in .25s ease;
}
.sync-pill > * { position: relative; z-index: 2; }
.sync-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--track); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.sync-pill[data-state="saved"] .sync-spin { animation: none; border: 0; width: 8px; height: 8px; background: #30d158; }
.sync-pill[data-state="error"] .sync-spin { animation: none; border: 0; width: 8px; height: 8px; background: #ff9f0a; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ============================================================
   Stage + hero
   ============================================================ */
.stage {
  position: relative; z-index: 1;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding-inline: 16px;
  padding-block: calc(env(safe-area-inset-top, 0px) + 70px) calc(env(safe-area-inset-bottom, 0px) + var(--icon) + var(--pad) * 2 + 56px);
}
.hero {
  width: min(640px, 100%);
  margin-block: auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  transform: translateY(-3vh);
}
.greeting { margin: 0 0 2px; font: 600 16px/1.3 var(--font-text); letter-spacing: .01em; color: var(--hero-2); }
.clock {
  margin: 0;
  display: flex; align-items: baseline; justify-content: center; gap: .1em;
  font: 600 clamp(84px, 13vw, 172px)/.94 var(--font-display);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
/* No stacking context here, so the ::before shadow copy paints beneath the gradient digits */
.clock-time {
  position: relative;
  padding-inline: .02em;
  color: transparent;
  background: linear-gradient(180deg, var(--clock-1) 18%, var(--clock-2) 96%);
  -webkit-background-clip: text; background-clip: text;
}
.clock-time::before {
  content: attr(data-t);
  position: absolute; inset: 0; z-index: -1;
  padding-inline: .02em;
  color: transparent;
  text-shadow: 0 1.5px 0 var(--clock-edge), 0 14px 38px var(--clock-glow);
}
.clock-period { font-size: .2em; font-weight: 600; letter-spacing: 0; color: var(--hero-2); }
.date { margin: 8px 0 0; font: 500 19px/1.3 var(--font-text); color: var(--hero-2); }

.search-wrap { position: relative; width: 100%; margin-top: 34px; }
.search {
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 12px 0 20px;
  border-radius: 999px;
  transition: box-shadow .2s ease;
}
.search > * { position: relative; z-index: 2; }
.search:focus-within { box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-rim), 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent), var(--shade); }
.search-ico { width: 20px; height: 20px; color: var(--ink-2); }
.search-input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: none; background: transparent;
  font: 400 17px/1 var(--font-text); color: var(--ink);
}
.search-input::placeholder { color: var(--ink-3); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-kbd {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 8px;
  font: 500 13px/1 var(--font-text); color: var(--ink-3);
  background: var(--track);
}
.empty-hint { margin: 18px 0 0; font: 500 14px/1.4 var(--font-text); color: var(--hero-2); }

/* Spotlight-style suggestions */
.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30;
  padding: 6px; border-radius: 22px;
  max-height: min(52vh, 380px); overflow: auto;
  text-align: left;
  animation: pop-in .18s ease-out;
}
.result {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px; border-radius: 15px;
  color: var(--ink); text-decoration: none;
  outline-offset: -2px;
}
.result[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.result-ico { position: relative; width: 32px; height: 32px; flex: none; display: grid; place-items: center; }
.result-ico.is-sym { border-radius: 10px; background: var(--track); color: var(--ink-2); }
.result[aria-selected="true"] .result-ico.is-sym { background: rgb(255 255 255 / .22); color: var(--on-accent); }
.result-text { display: grid; min-width: 0; }
.result-title { font: 500 15px/1.25 var(--font-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-sub { font: 400 12.5px/1.3 var(--font-text); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result[aria-selected="true"] .result-sub { color: rgb(255 255 255 / .78); }
.result-key { margin-left: auto; opacity: 0; }
.result[aria-selected="true"] .result-key { opacity: .85; }
.results-foot { position: relative; z-index: 2; margin: 2px 0 0; padding: 6px 12px 4px; font: 400 12px/1.3 var(--font-text); color: var(--ink-3); }

/* ============================================================
   App icons
   ============================================================ */
.icon-wrap { position: relative; display: block; width: 100%; height: 100%; isolation: isolate; }
.icon-wrap::after {
  content: ""; position: absolute; z-index: -1;
  left: 12%; right: 12%; bottom: -7%; height: 22%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .32), rgb(0 0 0 / 0));
}
.icon {
  --squircle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C100 0 100 0 100 50S100 100 50 100 0 100 0 50 0 0 50 0Z'/%3E%3C/svg%3E");
  --rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.9'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.4'/%3E%3C/linearGradient%3E%3Cpath d='M50 1C99 1 99 1 99 50S99 99 50 99 1 99 1 50 1 1 50 1Z' fill='none' stroke='url(%23g)' stroke-width='1.6'/%3E%3C/svg%3E");
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
  container-type: inline-size;
  color: var(--fg, #ffffff);
  background: linear-gradient(160deg, var(--t1, #3a95ff), var(--t2, #1d56d6));
  -webkit-mask: var(--squircle) center / 100% 100% no-repeat;
  mask: var(--squircle) center / 100% 100% no-repeat;
}
.icon::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(130% 72% at 50% -14%, rgb(255 255 255 / .46), rgb(255 255 255 / 0) 58%),
    linear-gradient(0deg, rgb(0 0 0 / .10), rgb(0 0 0 / 0) 42%);
}
.icon::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--rim) center / 100% 100% no-repeat; }
.icon > * { position: relative; z-index: 2; }
.icon .glyph { width: 54%; height: 54%; stroke-width: 2.1; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .18)); }
.icon .letters { font: 600 46cqi/1 var(--font-display); letter-spacing: -.02em; text-shadow: 0 1px 1px rgb(0 0 0 / .16); white-space: nowrap; }
.icon .letters[data-len="2"] { font-size: 37cqi; letter-spacing: -.01em; }
.icon .letters[data-len="3"] { font-size: 28cqi; letter-spacing: 0; }
.icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.icon img.contain { inset: 15%; width: 70%; height: 70%; object-fit: contain; }
.icon .art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.icon.is-util { background: var(--util); color: var(--ink); }
.icon.is-util .glyph { width: 44%; height: 44%; filter: none; stroke-width: 2; }

/* ============================================================
   Dock
   ============================================================ */
.dock {
  position: fixed; z-index: 10;
  left: 0; right: 0; margin-inline: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  width: fit-content; max-width: calc(100% - 24px);
}
.dock-plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--icon) + var(--pad) * 2);
  border-radius: calc(var(--icon) * .36 + var(--pad));
  transition: box-shadow .2s ease;
}
.dock.is-drop .dock-plate { box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 2px var(--accent), var(--shade); }
.dock-list {
  position: relative;
  display: flex; align-items: flex-end; gap: var(--gap);
  margin: 0; padding: var(--pad) calc(var(--pad) + 2px);
  list-style: none;
}
.app, .dock-add { --s: var(--icon); position: relative; flex: none; width: var(--s); height: var(--s); }
.app-link, .add-link {
  display: block; width: 100%; height: 100%;
  border: 0; padding: 0; background: none;
  border-radius: 26%;
  color: inherit; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline-offset: 4px;
}
.app-link:active .icon-wrap, .add-link:active .icon-wrap { transform: scale(.94); }
.icon-wrap { transition: transform .15s ease; }
.tip {
  position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 5;
  translate: -50% 4px;
  padding: 5px 11px; border-radius: 9px;
  font: 500 13px/1.2 var(--font-text); color: var(--ink);
  white-space: nowrap;
  background: var(--tip);
  box-shadow: inset 0 0 0 .5px var(--glass-rim), 0 8px 20px -8px rgb(0 0 0 / .35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .14s ease, translate .14s ease, visibility 0s linear .14s;
}
.app:hover > .tip, .dock-add:hover > .tip, .app-link:focus-visible ~ .tip, .add-link:focus-visible ~ .tip {
  opacity: 1; visibility: visible; translate: -50% 0;
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  transition: opacity .14s ease, translate .14s ease, visibility 0s;
}
.dock.is-editing .tip, .dock.menu-open .tip { display: none; }
.label { display: none; }
.dot {
  position: absolute; left: 50%; bottom: calc(var(--pad) * -1 + 3px);
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--ink); opacity: 0; transition: opacity .3s ease;
}
.app.running .dot { opacity: .7; }
.dock-sep {
  flex: none; align-self: flex-end;
  width: 1px; height: calc(var(--icon) - 10px); margin: 0 3px 5px;
  background: linear-gradient(180deg, rgb(0 0 0 / 0), var(--hairline) 20%, var(--hairline) 80%, rgb(0 0 0 / 0));
}
.remove {
  position: absolute; top: -7px; left: -7px; z-index: 6;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink); background: var(--badge);
  box-shadow: inset 0 0 0 .5px var(--glass-rim), 0 3px 8px rgb(0 0 0 / .28);
  cursor: pointer;
  opacity: 0; transform: scale(.4); pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, 1.4, .4, 1);
}
.remove .ui-ico { width: 14px; height: 14px; stroke-width: 2.6; }
.dock.is-editing .remove { opacity: 1; transform: scale(1); pointer-events: auto; }
.dock.is-editing .app .icon-wrap { animation: jiggle .26s ease-in-out infinite alternate; animation-delay: var(--jd, 0s); }
@keyframes jiggle { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.app.is-bouncing .icon-wrap { animation: bounce 1.1s linear 1; }
@keyframes bounce {
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  22%  { transform: translateY(-36%); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  42%  { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  60%  { transform: translateY(-15%); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  76%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
.app.is-new .icon-wrap { animation: arrive .55s cubic-bezier(.2, 1.35, .4, 1) both; }
@keyframes arrive { from { transform: translateY(40%) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.app.is-leaving { animation: leave .26s ease forwards; pointer-events: none; }
@keyframes leave { to { opacity: 0; transform: scale(.2); } }
.is-ghost .icon-wrap { opacity: .3; }
.is-drag-clone { opacity: 1 !important; }
.is-drag-clone .icon-wrap { animation: none !important; transform: scale(1.12); filter: drop-shadow(0 14px 22px rgb(0 0 0 / .3)); }
.is-drag-clone .tip, .is-drag-clone .remove, .is-drag-clone .dot { display: none; }

.editbar {
  position: fixed; z-index: 12;
  left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: calc(100% - 32px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px + var(--icon) + var(--pad) * 2 + 18px);
  display: flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 18px; border-radius: 999px;
  animation: pop-in .25s cubic-bezier(.2, 1.2, .4, 1);
}
.editbar > * { position: relative; z-index: 2; }
.editbar-hint { font: 500 13px/1.3 var(--font-text); color: var(--ink-2); }
.editbar-done {
  height: 32px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14px/1 var(--font-text); color: var(--on-accent); background: var(--accent);
}

/* ============================================================
   Popovers: shared reset
   ============================================================ */
.cc, .menu, .toasts {
  position: fixed; inset: auto; margin: 0; border: 0; overflow: visible;
  color: var(--ink);
}
@supports not selector(:popover-open) {
  [popover]:not(.pop-open) { display: none; }
}

/* Control Centre */
.cc {
  top: calc(env(safe-area-inset-top, 0px) + 64px); right: 16px;
  width: min(344px, calc(100vw - 32px));
  padding: 16px; border-radius: 26px;
}
.cc:popover-open, .cc.pop-open { animation: drop-in .24s cubic-bezier(.2, 1.1, .4, 1); }
.cc > * { position: relative; z-index: 2; }
.cc-sec + .cc-sec { margin-top: 16px; }
.cc-h { display: flex; justify-content: space-between; margin: 0 0 8px; font: 600 12px/1.3 var(--font-text); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cc-h-val { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2); }
.seg {
  --seg-i: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 3px; border-radius: 12px; background: var(--track);
}
.seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 3); border-radius: 9px;
  background: var(--thumb);
  box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 0 0 .5px rgb(0 0 0 / .04);
  transform: translateX(calc(var(--seg-i) * 100%));
  transition: transform .28s cubic-bezier(.3, 1.2, .4, 1);
}
.seg-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; border: 0; background: none; border-radius: 9px; cursor: pointer;
  font: 500 13px/1 var(--font-text); color: var(--ink-2);
}
.seg-btn[aria-checked="true"] { color: var(--ink); }
.seg-btn .ui-ico { width: 16px; height: 16px; }
.walls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wall-thumb {
  aspect-ratio: 4 / 3; max-width: 100%;
  border: 0; padding: 0; border-radius: 12px; cursor: pointer;
  background:
    radial-gradient(70% 80% at 18% 12%, var(--w-a), rgb(255 255 255 / 0) 70%),
    radial-gradient(60% 70% at 90% 20%, var(--w-b), rgb(255 255 255 / 0) 70%),
    radial-gradient(90% 60% at 40% 110%, var(--w-r1), rgb(255 255 255 / 0) 75%),
    radial-gradient(60% 50% at 80% 95%, var(--w-r2), rgb(255 255 255 / 0) 75%),
    linear-gradient(170deg, var(--w-bg1), var(--w-bg2));
  box-shadow: inset 0 0 0 .5px var(--hairline);
  transition: box-shadow .2s ease, transform .2s ease;
}
.wall-thumb:hover { transform: translateY(-1px); }
.wall-thumb[aria-checked="true"] { box-shadow: 0 0 0 2px var(--panel-a), 0 0 0 4px var(--accent); }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-tile {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--track); color: var(--ink);
  font: 500 13.5px/1.2 var(--font-text); text-align: left;
  transition: background .15s ease;
}
.cc-tile:hover { background: var(--track-hover); }
.cc-tile .ui-ico { color: var(--accent); }
.cc-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); display: grid; gap: 8px; }
.cc-status { margin: 0; font: 400 12.5px/1.45 var(--font-text); color: var(--ink-2); }
.cc-save { justify-self: start; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: 600 12.5px/1 var(--font-text); color: var(--on-accent); background: var(--accent); }
.is-readonly .cc-edit, .is-readonly .dock-sep, .is-readonly .dock-add, .is-readonly .editbar { display: none !important; }

/* Context menu */
.menu {
  min-width: 232px; padding: 6px; border-radius: 16px;
  font: 400 13.5px/1.2 var(--font-text);
}
.menu:popover-open, .menu.pop-open { animation: pop-in .14s ease-out; }
.menu > * { position: relative; z-index: 2; }
.menu-head { display: grid; gap: 1px; padding: 6px 10px 8px; }
.menu-name { font-weight: 600; }
.menu-host { font-size: 12px; color: var(--ink-3); }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 32px; padding: 0 10px;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--ink); font: inherit; text-align: left; text-decoration: none;
  cursor: default; outline: none;
}
.menu-item .ui-ico { width: 16px; height: 16px; color: var(--ink-2); }
.menu-item:hover, .menu-item:focus-visible { background: var(--accent); color: var(--on-accent); }
.menu-item:hover .ui-ico, .menu-item:focus-visible .ui-ico { color: var(--on-accent); }
.menu-item.is-danger, .menu-item.is-danger .ui-ico { color: var(--danger); }
.menu-item.is-danger:hover, .menu-item.is-danger:focus-visible { background: var(--danger); color: #ffffff; }
.menu-item.is-danger:hover .ui-ico, .menu-item.is-danger:focus-visible .ui-ico { color: #ffffff; }
.menu-item[aria-disabled="true"] { opacity: .38; pointer-events: none; }
.menu-sep { height: 1px; margin: 5px 10px; background: var(--hairline); }

/* Notifications */
.toasts {
  top: calc(env(safe-area-inset-top, 0px) + 66px); right: 16px;
  width: min(360px, calc(100vw - 32px));
  padding: 0; background: transparent;
  display: grid; gap: 10px;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px; border-radius: 20px;
  animation: toast-in .38s cubic-bezier(.2, 1.15, .4, 1);
}
.toast.is-out { animation: toast-out .22s ease-in forwards; }
.toast > * { position: relative; z-index: 2; }
.toast-icon { position: relative; width: 38px; height: 38px; flex: none; }
.toast-sym { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--track); color: var(--ink-2); }
.toast-text { min-width: 0; flex: 1; display: grid; gap: 2px; }
.toast-title { margin: 0; font: 600 14px/1.3 var(--font-text); }
.toast-body { margin: 0; font: 400 13px/1.35 var(--font-text); color: var(--ink-2); overflow-wrap: anywhere; }
.toast-body.is-select { user-select: all; -webkit-user-select: all; }
.toast-action {
  flex: none; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 13px/1 var(--font-text); color: var(--accent); background: var(--track);
}

/* ============================================================
   Add / Edit sheet
   ============================================================ */
.sheet {
  width: min(452px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
  max-height: calc(100% - 32px);
  margin: auto; padding: 0; border: 0;
  background: transparent; color: var(--ink);
  overflow: visible;
}
.sheet::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet[open]::backdrop { animation: fade-in .25s ease; }
.sheet.is-closing::backdrop { animation: fade-out .18s ease forwards; }
.sheet-body {
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 32px);
  border-radius: 30px;
}
.sheet[open] .sheet-body { animation: sheet-in .34s cubic-bezier(.2, 1.1, .3, 1); }
.sheet.is-closing .sheet-body { animation: sheet-out .17s ease-in forwards; }
.sheet-scroll { position: relative; z-index: 2; overflow: auto; padding: 22px 22px 18px; display: grid; gap: 18px; }
.sheet-title { margin: 0; text-align: center; font: 600 17px/1.3 var(--font-text); }
.preview { display: grid; justify-items: center; gap: 4px; padding: 6px 0 2px; border-radius: 22px; transition: background .15s ease; }
.preview.is-drop { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.preview-icon { position: relative; width: 88px; height: 88px; margin-bottom: 8px; }
.preview-name { margin: 0; font: 600 15px/1.3 var(--font-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-host { margin: 0; font: 400 12.5px/1.3 var(--font-text); color: var(--ink-3); }
.fields { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; }
.field-label, .pick-label { font: 600 12px/1.3 var(--font-text); letter-spacing: .01em; color: var(--ink-2); }
.field-input {
  width: 100%; height: 42px; padding: 0 14px;
  border: 1px solid var(--field-edge); border-radius: 12px;
  background: var(--field); color: var(--ink);
  font: 400 15px/1 var(--font-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-input::placeholder { color: var(--ink-3); }
.field-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.field-input[aria-invalid="true"] { border-color: var(--danger); }
.field-error { margin: -4px 0 0; font: 500 12.5px/1.35 var(--font-text); color: var(--danger); }
.pick { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; }
.pick-label { padding: 0; margin-bottom: 2px; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 8px; }
.chip {
  position: relative; aspect-ratio: 1; max-width: 100%;
  padding: 0; border: 0; border-radius: 28%; background: none; cursor: pointer;
  transition: transform .15s ease;
}
.chip:hover { transform: scale(1.06); }
.chip[aria-checked="true"] { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.chip .icon-wrap::after { display: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatches.is-disabled { opacity: .35; }
.swatch {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(160deg, var(--t1), var(--t2));
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .14), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform .15s ease;
}
.swatch:hover:not(:disabled) { transform: scale(1.12); }
.swatch:disabled { cursor: default; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--panel-a), 0 0 0 4px var(--accent); }
.upload { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.link-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: 500 13.5px/1.3 var(--font-text); color: var(--accent);
}
.link-btn .ui-ico { width: 17px; height: 17px; }
.upload-note { font: 400 12px/1.3 var(--font-text); color: var(--ink-3); }
.sheet-actions { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.grow { flex: 1; }
.btn {
  height: 36px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 14px/1 var(--font-text); color: var(--ink); background: var(--track);
  transition: background .15s ease, transform .1s ease;
}
.btn:hover { background: var(--track-hover); }
.btn:active { transform: scale(.97); }
.btn-primary { color: var(--on-accent); background: var(--accent); font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000000); }
.btn-danger { padding: 0 12px; color: var(--danger); background: transparent; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* ============================================================
   Motion
   ============================================================ */
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(4px); } }
@keyframes drop-in { from { opacity: 0; transform: scale(.94) translateY(-8px); transform-origin: top right; } }
@keyframes sheet-in { from { opacity: 0; transform: scale(.94) translateY(12px); } }
@keyframes sheet-out { to { opacity: 0; transform: scale(.96) translateY(8px); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px) scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .wp-blob { animation: none; }
  .dock.is-editing .app .icon-wrap { animation: none; }
  .app.is-bouncing .icon-wrap, .app.is-new .icon-wrap { animation: none; }
  .sheet[open] .sheet-body, .sheet.is-closing .sheet-body, .toast, .cc:popover-open, .menu:popover-open, .results, .editbar { animation-duration: .01s; }
  :root { transition: none; }
}

/* ============================================================
   Phone layout: the dock becomes a home-screen grid
   ============================================================ */
@media (max-width: 640px) {
  .stage { padding-block: calc(env(safe-area-inset-top, 0px) + 72px) calc(env(safe-area-inset-bottom, 0px) + 96px); }
  .hero { margin-block: 0 26px; transform: none; }
  .greeting { font-size: 15px; }
  .clock { font-size: clamp(64px, 21vw, 104px); }
  .date { font-size: 17px; }
  .search-wrap { margin-top: 24px; }
  .search { height: 52px; padding-left: 18px; }
  .search-kbd { display: none; }
  .dock { position: relative; bottom: auto; width: 100%; max-width: 460px; }
  .dock-plate { top: 0; height: auto; border-radius: 30px; }
  .dock-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; padding: 18px 10px 14px; justify-items: center; }
  .app, .dock-add { --s: 60px; width: 100%; height: auto; display: grid; justify-items: center; gap: 6px; }
  .app-link, .add-link { width: 60px; height: 60px; }
  .label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1.2 var(--font-text); color: var(--ink); }
  .tip, .dot, .dock-sep { display: none !important; }
  .remove { left: calc(50% - 36px); top: -6px; }
  .editbar { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .editbar-hint { display: none; }
  .cc { left: 12px; right: 12px; width: auto; }
  .toasts { left: 12px; right: 12px; width: auto; }
  .sheet { width: 100%; max-width: 100%; margin: auto 0 0; max-height: calc(100% - 20px); }
  .sheet-body { border-radius: 30px 30px 0 0; max-height: calc(100dvh - 20px); }
  .sheet-scroll { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .sheet[open] .sheet-body { animation-name: sheet-up; }
  .sheet.is-closing .sheet-body { animation-name: sheet-down; }
}
@media (hover: none) { .tip { display: none !important; } }