/* Glassline website. The page is a Glassline desktop: glass values come from the app's own
   material engine run on the wallpapers (tools/Probe material), radii and alphas from
   GLASSLINE-REFERENCE.md. */

:root {
  --bg: #0b0c0e;
  --text: #f2f2f3;
  --secondary: rgba(242, 242, 243, 0.62);
  --tertiary: rgba(242, 242, 243, 0.40);
  --hairline: rgba(255, 255, 255, 0.10);
  --charcoal: #17191d;
  --charcoal-2: rgba(23, 25, 29, 0.62);
  --charcoal-3: rgba(23, 25, 29, 0.40);
  --accent: #2f7ae5;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gutter: 24px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Lenis drives the easing itself; the browser's own smooth scrolling would fight it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------------- menu bar (site nav) */

.menubar {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: 34px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 8px;
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  transition: background-color 420ms var(--ease), color 420ms var(--ease), box-shadow 420ms var(--ease);
  font-size: 13px; font-weight: 500;
}
/* Materials from the engine: light glass + charcoal over bright wallpaper, dark glass over the page. */
.menubar[data-material="coast"] { background: rgba(160, 197, 232, 0.24); color: var(--charcoal); box-shadow: inset 0 -1px rgba(23, 25, 29, 0.14); }
.menubar[data-material="dark"] { background: rgba(22, 23, 26, 0.74); color: var(--text); box-shadow: inset 0 -1px rgba(242, 242, 243, 0.14); }

.menus, .status { display: flex; align-items: center; gap: 4px; }
.menus a, .status .pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.menus a:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.menus .app { font-weight: 700; }
.status .pill svg { width: 16px; height: 16px; }
.status .clock { font-variant-numeric: tabular-nums; }

/* The site's languages, in the bar like the app's keyboard-language cell (tools/scripts/site-languages.py
   writes it). A <details>: it opens without the script. */
.menubar .lang { position: relative; margin-left: auto; margin-right: 2px; }
.menubar .lang summary { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 6px; list-style: none; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menubar .lang summary::-webkit-details-marker { display: none; }
.menubar .lang summary:hover, .menubar .lang[open] summary { background: color-mix(in srgb, currentColor 10%, transparent); }
.menubar .lang summary svg { width: 15px; height: 15px; }
.lang-list {
  position: absolute; right: 0; top: 31px; z-index: 40; min-width: 168px; padding: 5px; border-radius: 8px; font-size: 13px; font-weight: 400; color: var(--charcoal);
  /* No blur of its own: it hangs from the bar, which has one, and a blur inside a blur made Firefox
     paint a piece of the page (the hero's glass card) beside the list. */
  background: rgba(240, 244, 248, 0.98);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.12), 0 8px 24px rgba(10, 30, 50, 0.24);
}
.lang-list a { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px 0 8px; border-radius: 5px; color: inherit; text-decoration: none; white-space: nowrap; }
.lang-list a:hover { background: var(--accent); color: #fff; }
.lang-list a i { display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
.lang-list a i svg { width: 14px; height: 14px; stroke-width: 2; }
.lang-list a[aria-current] { font-weight: 600; }
.menubar[data-material="dark"] .lang-list { background: rgba(40, 42, 47, 0.98); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.4); }

/* "View this page in <your language>": for a visitor whose browser asks for a language the page is
   not in, said in that language, with an arrow up to the picker (demo.js makes and places it). */
.lang-offer { position: fixed; z-index: 30; top: 0; left: 0; width: 0; height: 0; animation: bar-hint-bob 2.6s 1.9s ease-in-out infinite; }
.lang-offer svg { position: absolute; display: block; width: 70px; height: 60px; overflow: visible; stroke: #fff; stroke-width: 2.6; filter: drop-shadow(0 1px 3px rgba(10, 30, 50, 0.6)); pointer-events: none; }
.lang-offer path { stroke-dasharray: 100; animation: bar-hint-draw 700ms 900ms var(--ease) backwards; }
.lang-offer .lang-offer-box {
  position: absolute; display: inline-flex; align-items: center; gap: 4px; height: 50px; padding: 0 6px 0 18px; border-radius: 15px; white-space: nowrap;
  background: #fff; color: var(--charcoal); font-size: 17px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.10), 0 10px 30px rgba(10, 30, 50, 0.35);
  animation: bar-hint-in 500ms 600ms var(--ease) backwards;
}
.lang-offer a { display: inline-flex; align-items: center; gap: 10px; height: 100%; color: inherit; text-decoration: none; }
.lang-offer a svg { position: static; width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; filter: none; }
.lang-offer a:hover { color: var(--accent); }
.lang-offer button { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; border-radius: 50%; color: var(--charcoal-3); }
.lang-offer button:hover { background: rgba(23, 25, 29, 0.08); color: var(--charcoal); }
.lang-offer button svg { position: static; width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; filter: none; }
/* While it is shown the page's own hint ("Click the icons") waits. */
.offering .bar-hint { opacity: 0; }

/* ---------------------------------------------------------------- hero: the desktop */

.hero {
  position: relative; min-height: 100svh; min-height: max(100svh, 720px);
  background: url(/assets/wallpaper-coast-1440.jpg) center / cover no-repeat;
  display: grid; place-items: center; padding: 72px var(--gutter) 140px;
}
@media (min-width: 1000px) { .hero { background-image: url(/assets/wallpaper-coast-2560.jpg); } }

.hero-glass {
  width: min(540px, 100%); padding: 44px 40px 40px; border-radius: 28px; text-align: center; color: var(--charcoal);
  background: rgba(207, 224, 241, 0.52);
  -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 30px 80px rgba(8, 40, 70, 0.25);
}
.hero-icon { width: 152px; height: 152px; margin: -4px auto 10px; filter: drop-shadow(0 18px 30px rgba(10, 50, 90, 0.25)); }
.hero h1 { margin: 0; font: 600 clamp(52px, 8vw, 76px)/1 var(--font-display); letter-spacing: -0.035em; }
.hero-glass p { margin: 14px 0 0; font-size: 20px; line-height: 1.4; color: var(--charcoal-2); }
.hero .actions { margin-top: 30px; }

.store {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 12px;
  background: var(--charcoal); color: #fff; font-weight: 600; font-size: 16px; text-decoration: none;
  transition: transform 180ms var(--ease), background-color 180ms;
}
.store:hover { background: #000; }
.store:active { transform: scale(0.97); }

/* ---------------------------------------------------------------- dock (live magnification in demo.js) */

.dock-area { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; pointer-events: none; }
.dock { position: relative; pointer-events: auto; padding-top: 70px; }
.dock-items {
  display: flex; align-items: flex-end; gap: 10px; height: 76px; padding: 0 14px 10px; border-radius: 22px;
  background: rgba(160, 197, 232, 0.42);
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 12px 40px rgba(8, 40, 70, 0.22);
}
.dock-item { position: relative; width: 56px; height: 56px; flex: none; }
.dock-item img, .dock-item .tile { width: 100%; height: 100%; }
.dock-item.running::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--charcoal); opacity: 0.7; }
.dock-sep { align-self: center; width: 1px; height: 38px; margin: 0 2px 4px; background: rgba(23, 25, 29, 0.28); flex: none; }
.dock-label {
  position: absolute; top: 0; left: 0; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap;
  background: rgba(207, 224, 241, 0.86); color: var(--charcoal);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.10), 0 6px 16px rgba(0, 0, 0, 0.15);
  opacity: 0; transform: translateY(4px); transition: opacity 120ms, transform 160ms var(--ease); pointer-events: none;
}
.dock-label.show { opacity: 1; transform: none; }
/* Badges (Dock/DockItemView.cs): 17 px on a 40 px icon, so sized in the icon's own units and they
   grow with it under magnification. Red for unread notifications, slate for how many items. */
.dock-item { container-type: size; }
.dock-item > img, .dock-item > .tile, .dock-item > .badge { translate: 0 var(--lift, 0px); }
.badge {
  position: absolute; top: -12.5cqw; right: -17.5cqw; min-width: 42.5cqw; height: 42.5cqw; padding: 0 11.25cqw; border-radius: 21.25cqw;
  display: grid; place-items: center; font: 600 26.25cqw/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: #fff;
  background: #4a5a74; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: scale 220ms var(--ease), opacity 160ms;
}
.badge.alert { background: #f03e38; }
.badge.gone { scale: 0.4; opacity: 0; }
.dock-item.held { z-index: 2; cursor: grabbing; }

/* App tiles: the demo's own app icons, one line glyph each. */
.tile { display: grid; place-items: center; border-radius: 23%; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.16); }
.tile svg { width: 58%; height: 58%; stroke-width: 1.8; }
.t-files { background: linear-gradient(#5db2ff, #1f6fe0); }
.t-browser { background: linear-gradient(#44d6c4, #0f8f89); }
.t-mail { background: linear-gradient(#6fc3ff, #2a79ef); }
.t-notes { background: linear-gradient(#ffe38a, #f4b73a); color: #5a4200; }
.t-music { background: linear-gradient(#ff7a9a, #e2335a); }
.t-photos { background: linear-gradient(135deg, #ffb45e, #e0527a 55%, #8a5cf6); }
.t-terminal { background: linear-gradient(#4a5058, #1c1f24); }
.t-settings { background: linear-gradient(#c9ced6, #858d99); }
.t-downloads { background: linear-gradient(#7cc4ff, #3b86ea); }
.t-trash { background: linear-gradient(#eef1f5, #b9c0ca); color: #3d4450; }
.t-calc { background: linear-gradient(#ffa24d, #f0701a); font-weight: 700; font-size: 60%; }
.t-file { background: linear-gradient(#ffffff, #dfe4ea); color: #45505e; }
.t-calendar { background: #fff; color: var(--charcoal); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.t-calendar b { color: #e2335a; font-size: 10px; letter-spacing: 0.06em; }
.t-calendar i { font-style: normal; font-size: 26px; font-weight: 300; margin-top: 2px; }

/* ---------------------------------------------------------------- feature sections */

.feature { padding: 140px var(--gutter) 0; text-align: center; }
#dock { --glow: #7fb0d8; } #maximize { --glow: #d49ac4; } #search { --glow: #2fc0c8; } #control-center { --glow: #d49ac4; } #weather { --glow: #8fc0a8; }
.copy { max-width: 820px; margin: 0 auto; }
.feature h2, .closing h2 { margin: 0; font: 600 clamp(32px, 4.8vw, 52px)/1.08 var(--font-display); letter-spacing: -0.025em; }
.copy p { margin: 18px auto 0; max-width: 640px; font-size: 19px; color: var(--secondary); }

.screen {
  position: relative; max-width: 1040px; margin: 56px auto 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px;
  background: var(--wall) center / cover no-repeat; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); /* no outer shadow: invisible on the black, and the costliest paint while scrolling */
}
.screen.short { aspect-ratio: 16 / 8.6; }

/* Rhythm (after Linear and Raycast): centred sections alternate with split ones, where the text
   sits in one column and the screen runs off the page edge on the other side. */
.feature:not(.split) .screen { max-width: 1180px; }
.feature.split {
  --bleed: calc(var(--gutter) + max(0px, (100vw - 1360px - 2 * var(--gutter)) / 2));
  display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; gap: 64px; align-items: center;
  max-width: calc(1360px + 2 * var(--gutter)); margin: 0 auto; text-align: left;
}
.feature.split .copy { margin: 0; max-width: 500px; }
.feature.split .copy p { margin-left: 0; }
.feature.split .segmented { margin-top: 32px; }
.feature.split .screen { margin: 0; max-width: none; width: calc(100% + var(--bleed)); border-radius: 18px 0 0 18px; }
.feature.split.flip { grid-template-columns: 7fr minmax(360px, 5fr); }
.feature.split.flip .copy { order: 2; }
.feature.split.flip .screen { margin-left: calc(-1 * var(--bleed)); border-radius: 0 18px 18px 0; }
@media (max-width: 900px) {
  .feature.split, .feature.split.flip { display: block; text-align: center; }
  .feature.split .copy { margin: 0 auto; }
  .feature.split .copy p { margin-left: auto; }
  .feature.split .screen, .feature.split.flip .screen { width: auto; margin: 56px auto 0; border-radius: 18px; }
}

/* The UI inside is drawn at 1040 px wide and scaled to the screen (demo.js sets --s). */
.stage { position: absolute; left: 0; top: 0; width: 1040px; height: 650px; transform-origin: 0 0; transform: scale(var(--s, 1)); }
.screen.short .stage { height: 559px; }

.segmented { display: inline-flex; margin-top: 28px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--hairline); }
.segmented button { height: 32px; padding: 0 18px; border-radius: 8px; font-size: 14px; color: var(--secondary); transition: background-color 200ms, color 200ms; }
.segmented button.on { background: rgba(255, 255, 255, 0.14); color: var(--text); }

/* Maximize demo */
.s-bar {
  position: absolute; inset: 0 0 auto 0; height: 30px; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 0 14px;
  font-size: 12.5px; font-weight: 500; color: var(--charcoal);
  background: rgba(235, 207, 194, 0.24); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 -1px rgba(23, 25, 29, 0.14);
  transition: background-color 520ms var(--ease), color 520ms var(--ease), box-shadow 520ms;
}
.s-bar .s-app { font-weight: 700; }
.s-bar .s-fill { flex: 1; }
.s-bar svg { width: 15px; height: 15px; margin-left: -6px; }
.maxed .s-bar { background: rgba(37, 40, 46, 0.92); color: #f2f2f3; box-shadow: inset 0 -1px rgba(242, 242, 243, 0.14); }

.s-window {
  position: absolute; z-index: 2; left: 190px; top: 92px; width: 660px; height: 420px; border-radius: 10px; overflow: hidden;
  background: #16181b; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 20, 40, 0.4);
  transition: left 620ms var(--ease), top 620ms var(--ease), width 620ms var(--ease), height 620ms var(--ease), border-radius 620ms var(--ease);
}
.maxed .s-window { left: 0; top: 30px; width: 1040px; height: 620px; border-radius: 0; }
.s-bar { transition: background-color 520ms var(--ease), color 520ms var(--ease), box-shadow 520ms, transform 520ms var(--ease); }
.bar-hidden .s-bar { transform: translateY(-100%); }
.maxed.bar-hidden .s-window { top: 0; height: 650px; }
.s-win-title { height: 34px; background: #25282e; display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 0 16px; }
.s-win-title i { width: 10px; height: 1.5px; background: rgba(242, 242, 243, 0.55); }
.s-win-title i:nth-child(2) { height: 9px; background: none; box-shadow: inset 0 0 0 1.5px rgba(242, 242, 243, 0.55); border-radius: 1px; }
.s-win-title i:nth-child(3) { transform: rotate(45deg); box-shadow: 0 0 0 0; position: relative; }
.s-win-body { display: flex; height: calc(100% - 34px); }
.s-side { width: 190px; background: #1d2024; padding: 18px 14px; display: grid; gap: 12px; align-content: start; }
.s-side b { height: 34px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); }
.s-side b:first-child { background: rgba(47, 122, 229, 0.35); }
.s-doc { flex: 1; padding: 34px 44px; }
.s-doc h4 { margin: 0 0 22px; font: 600 24px var(--font-display); color: #f2f2f3; }
.s-doc p { height: 10px; margin: 0 0 14px; border-radius: 5px; background: rgba(255, 255, 255, 0.10); }
.s-doc p.short { width: 62%; }

.s-dock {
  position: absolute; z-index: 1; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px 12px; border-radius: 16px;
  background: rgba(235, 207, 194, 0.42); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transition: transform 520ms var(--ease), opacity 520ms;
}
.maxed .s-dock { transform: translate(-50%, 90px); opacity: 0; }
.s-dock i { width: 40px; height: 40px; border-radius: 23%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.s-dock .c1 { background: linear-gradient(#5db2ff, #1f6fe0); } .s-dock .c2 { background: linear-gradient(#44d6c4, #0f8f89); }
.s-dock .c3 { background: linear-gradient(#ffe38a, #f4b73a); } .s-dock .c4 { background: linear-gradient(#ff7a9a, #e2335a); }
.s-dock .c5 { background: linear-gradient(#4a5058, #1c1f24); } .s-dock .c6 { background: linear-gradient(#c9ced6, #858d99); }

/* Dock demo: the hero dock's styles, the lake's material, a drawn pointer and the stacks. */
.demo-dock { position: absolute; left: 0; right: 0; bottom: 14px; width: fit-content; margin: 0 auto; padding-top: 0; }
.demo-dock .dock-items { background: rgba(174, 198, 226, 0.42); }
.t-kept { background: linear-gradient(#a99cff, #6252e4); }
.cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 5; fill: #fff; stroke: #111; stroke-width: 1.3; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); transition: scale 120ms, opacity 240ms; pointer-events: none; }
.cursor.press { scale: 0.85; }
.cursor.away { opacity: 0; }
/* A stack (Dock/StackPopover.cs): the folder's tile, name and count, then a four-column grid with
   names on up to two centred lines, like Finder. */
.stack {
  position: absolute; left: 0; bottom: 112px; z-index: 4; width: 440px; padding: 0 16px 18px; border-radius: 16px; color: var(--charcoal);
  background: rgba(211, 223, 238, 0.92);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.14), 0 10px 26px rgba(10, 40, 70, 0.26);
  opacity: 0; transform: translateY(12px) scale(0.96); transform-origin: 50% 100%; transition: opacity 220ms, transform 320ms var(--ease); pointer-events: none;
}
.stack.open { opacity: 1; transform: none; pointer-events: auto; }
.stack-open .dock-label { opacity: 0 !important; } /* like the app: no label while a stack is open */
.stack-head { display: flex; align-items: center; gap: 12px; height: 60px; }
.stack-head .tile { width: 32px; height: 32px; }
.stack-head b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.stack-head small { display: block; font-size: 12px; }
.stack-rule { height: 1px; margin: 0 -16px 16px; background: rgba(23, 25, 29, 0.10); }
.stack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; }
.stack-grid > span { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.stack-grid .tile { width: 56px; height: 56px; }
.stack-grid small {
  max-width: 96px; font-size: 12px; line-height: 1.3; color: var(--charcoal); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.stack-empty { padding: 26px 0 10px; text-align: center; color: var(--charcoal-2); }
.t-file-pdf { background: linear-gradient(#ff8a7a, #d9372b); }
.t-file-zip { background: linear-gradient(#c9ced6, #8a929e); }
.t-file-img { background: linear-gradient(135deg, #7fd3e8, #2b8fb8 55%, #1d5f86); }
.t-file-img2 { background: linear-gradient(135deg, #ffd08a, #f08a5d 60%, #b4506b); }
.t-file-doc { background: linear-gradient(#6aa8ff, #2a62d4); }
.t-file-sheet { background: linear-gradient(#5fd68a, #1f9a55); }
.t-file-audio { background: linear-gradient(#ff8fb0, #d63c6b); }
.t-dir { background: linear-gradient(#8fc8ff, #4d94ec); }

/* Search demo: the default palette surface (#202226 at 0.94) */
.palette {
  position: absolute; left: 210px; top: 118px; width: 620px; border-radius: 20px; overflow: hidden; color: #f3f4f6;
  background: rgba(32, 34, 38, 0.96);
  box-shadow: inset 0 0 0 1px rgba(243, 244, 246, 0.14), 0 12px 30px rgba(0, 20, 40, 0.4);
}
.p-field { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; font-size: 22px; }
.p-field svg { width: 22px; height: 22px; opacity: 0.6; }
.caret { width: 2px; height: 26px; background: #f3f4f6; margin-left: -10px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.p-results { border-top: 1px solid rgba(243, 244, 246, 0.10); padding: 6px 8px 10px; min-height: 250px; }
.p-group { font-size: 12px; font-weight: 600; color: rgba(243, 244, 246, 0.6); padding: 10px 12px 4px; }
.p-row { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; }
.p-row.sel { background: rgba(243, 244, 246, 0.11); }
.p-row .tile { width: 30px; height: 30px; flex: none; }
.p-row small { display: block; font-size: 12px; color: rgba(243, 244, 246, 0.6); }
.p-row .big { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-results > * { animation: rise 260ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* The menu bar inside the Control Center and weather demos: a light tint instead of blur (it sits
   on a still wallpaper, and a blur there costs every scrolled frame). Buttons light up like the
   bar's pills and stay lit while their popover is open. */
.mbar {
  position: absolute; inset: 0 0 auto 0; z-index: 3; height: 30px; display: flex; align-items: center; gap: 2px; padding: 0 8px;
  font-size: 12.5px; font-weight: 500; color: var(--charcoal);
  background: rgba(244, 240, 246, 0.5); box-shadow: inset 0 -1px rgba(23, 25, 29, 0.12);
}
[data-screen="weather"] .mbar { background: rgba(236, 244, 244, 0.5); }
.mb-fill { flex: 1; }
.mb-cell { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 24px; min-width: 32px; padding: 0 8px; border-radius: 6px; white-space: nowrap; transition: background-color 160ms; }
.mb-cell svg { width: 16px; height: 16px; stroke-width: 1.6; }
button.mb-cell:hover { background: rgba(23, 25, 29, 0.07); }
button.mb-cell.open { background: rgba(23, 25, 29, 0.14); }
.mb-clock { font-variant-numeric: tabular-nums; }

/* Popovers over the bright wallpapers: the engine's light popover material (0.86) with charcoal text */
.popover {
  position: absolute; border-radius: 16px; color: var(--charcoal); padding: 6px 16px 16px;
  background: rgba(233, 219, 212, 0.9);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.14), 0 10px 26px rgba(60, 30, 20, 0.24);
  font-size: 13px; line-height: 1.35;
  transition: opacity 180ms, transform 260ms var(--ease);
}
.popover.closed { opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; }
small { color: var(--charcoal-2); font-size: 12px; }
svg .f { fill: currentColor; stroke: none; }

/* Shared pieces of the panels (Theme/Module.cs on light glass): hover plates, circles, tiles,
   capsule sliders, switches, section headers. */
.popover button { border-radius: 8px; transition: background-color 140ms; }
.hl:hover { background: rgba(23, 25, 29, 0.07); }
.hl:active { background: rgba(23, 25, 29, 0.14); }
.hr { height: 1px; margin: 8px 0; background: rgba(23, 25, 29, 0.10); }
.circle { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50% !important; background: rgba(23, 25, 29, 0.08); color: var(--charcoal); flex: none; }
.circle svg { width: 16px; height: 16px; }
.circle.on { background: var(--accent); color: #fff; }
button.circle:hover { background: rgba(23, 25, 29, 0.14); }
button.circle.on:hover { background: #2a6fd2; }
.mtile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: #fff; flex: none; }
.mtile svg { width: 18px; height: 18px; stroke-width: 1.7; }
.mtile.big { width: 40px; height: 40px; border-radius: 10.4px; }
.mtile.big svg { width: 26px; height: 26px; stroke-width: 1.8; }
.c-wifi { background: linear-gradient(#4592ff, #2f7cf6); } .c-bt { background: linear-gradient(#4080fe, #2a6ae8); }
.c-sound { background: linear-gradient(#ff5172, #f23b5c); } .c-display { background: linear-gradient(#54a4ff, #3e8ef7); }
.c-battery { background: linear-gradient(#45ce70, #2fb85a); } .c-notif { background: linear-gradient(#ff6055, #f04a3f); }
.c-devices { background: linear-gradient(#7472fc, #5e5ce6); } .c-cal { background: linear-gradient(#ff6055, #f04a3f); }
.sec { display: flex; align-items: center; gap: 6px; height: 28px; font-weight: 500; color: var(--charcoal-2); }
.sec svg { width: 14px; height: 14px; stroke-width: 1.6; }
.sec .sec-act { margin-left: auto; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 12px; color: var(--charcoal-2); }
.note { color: var(--charcoal-2); padding: 4px 0 6px; }

.cap { position: relative; height: 26px; border-radius: 13px; background: rgba(23, 25, 29, 0.10); cursor: pointer; touch-action: pan-y; outline-offset: 2px; }
.cap > i { position: absolute; inset: 0 auto 0 0; width: calc(26px + (100% - 26px) * var(--v, 0.5)); border-radius: inherit; background: rgba(255, 255, 255, 0.96); box-shadow: 0 0.5px 1.5px rgba(23, 25, 29, 0.16); }
.cap > svg { position: absolute; left: 6px; top: 6px; width: 14px; height: 14px; color: #5a5b61; stroke-width: 1.5; pointer-events: none; }
.cap.small { height: 22px; border-radius: 11px; }
.cap.small > i { width: calc(22px + (100% - 22px) * var(--v, 0.5)); }
.cap.small > svg { left: 4px; top: 4px; }

.sw { position: relative; width: 36px; height: 20px; border-radius: 10px !important; background: rgba(23, 25, 29, 0.18); flex: none; transition: background-color 200ms; }
.sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 220ms var(--ease); }
.sw.on { background: var(--accent); }
.sw.on::after { transform: translateX(16px); }

/* Control Center + Today (ControlCenter/*.cs): one popover, a Controls | Today tab bar with a
   sliding plate, detail pages pushed in with a back button. */
.ccp { right: 8px; top: 36px; width: 540px; padding: 0; }
.ccp-head { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 16px; }
.ccp.detail .ccp-head { padding-left: 8px; }
.ccp-back { display: none; place-items: center; width: 28px; height: 28px; border-radius: 6px !important; }
.ccp-back svg { width: 16px; height: 16px; }
.ccp.detail .ccp-back { display: grid; }
.ccp-title { flex: 1; font: 600 17px/1 var(--font-display); white-space: nowrap; }
.tabs { position: relative; display: flex; gap: 2px; }
.ccp.detail .tabs { display: none; }
.tabs button { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 6px; }
.tabs button svg { width: 16px; height: 16px; stroke-width: 1.5; }
.tab-plate { position: absolute; left: 0; top: 0; height: 28px; width: 80px; border-radius: 6px; background: rgba(47, 122, 229, 0.12); box-shadow: inset 0 0 0 1px rgba(47, 122, 229, 0.30); transition: transform 280ms var(--ease), width 280ms var(--ease); }
.ccp-body { position: relative; overflow: hidden; transition: height 300ms var(--ease); }
.pg { padding: 0 16px 12px; transition: opacity 200ms, transform 300ms var(--ease); }
.pg.leaving { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateX(var(--dx, 0)); pointer-events: none; }
.pg.entering { opacity: 0; transform: translateX(var(--dx, 0)); transition: none; }
.pg b { font-weight: 600; }
.pg small { display: block; }

.cc-top { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 16px; padding: 4px 0 10px; }
.cc-vr { background: rgba(23, 25, 29, 0.10); margin: 4px 0; }
.cc-tile { display: flex; align-items: center; gap: 12px; height: 52px; margin: 0 -8px; padding: 0 8px; border-radius: 8px; }
.cc-tile:has(.cc-tile-text:hover) { background: rgba(23, 25, 29, 0.07); }
.cc-tile .circle { width: 32px; height: 32px; }
.cc-tile .circle svg { width: 18px; height: 18px; }
.cc-tile-text { flex: 1; align-self: stretch; text-align: left; }
.cc-tile-text b, .np b { display: block; font-size: 15px; line-height: 1.3; }
.np { display: flex; align-items: center; gap: 14px; }
.np-art { width: 56px; height: 56px; border-radius: 10px; flex: none; }
.art-0 { background: linear-gradient(135deg, #7fb4c9, #2c5f78 60%, #183746); }
.art-1 { background: linear-gradient(135deg, #ffc38a, #e0668a 60%, #7b3f8f); }
.art-2 { background: linear-gradient(135deg, #b9e3a8, #4f9a7c 60%, #24514d); }
.np-idle { background: linear-gradient(#ff6d8e, #f53d6a); display: grid; place-items: center; color: #fff; }
.np-idle svg { width: 30px; height: 30px; }
.np-text { min-width: 0; }
.np-text b, .np-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-ctl { display: flex; gap: 4px; margin: 4px 0 0 -6px; }
.np-ctl button { display: grid; place-items: center; width: 28px; height: 26px; border-radius: 6px; }
.np-ctl svg { width: 14px; height: 14px; }
.cc-sl { padding: 2px 0 12px; }
.cc-sl-head { display: flex; align-items: center; height: 28px; font-weight: 600; }
.cc-sl-head b { flex: 1; font-weight: 600; }
.cc-sl-head .val { color: var(--charcoal-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.chev { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border-radius: 6px !important; color: var(--charcoal-2); }
.chev svg { width: 14px; height: 14px; }
.cc-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 2px; }
.cc-act { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0 -8px; padding: 0 8px; text-align: left; }
.cc-act small { font-size: 12px; }

.hero-row { display: flex; align-items: center; gap: 12px; padding: 6px 0 10px; }
.hero-row > span:nth-child(2) { flex: 1; min-width: 0; }
.hero-row b { display: block; font-size: 15px; }
.li { display: flex; align-items: center; gap: 12px; width: calc(100% + 16px); height: 46px; margin: 0 -8px; padding: 0 8px; text-align: left; }
.li b { font-weight: 400; } .li.sel b { font-weight: 600; }
.li > span:last-child { flex: 1; min-width: 0; }
.li b, .li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mic-row { display: flex; align-items: center; gap: 12px; padding: 4px 0 8px; }
.mic-row > span { flex: 1; }
.mic-head { display: flex; height: 22px; align-items: center; }
.mic-head b { flex: 1; font-weight: 400; }
.mic-head small { font-size: 12px; font-variant-numeric: tabular-nums; }
.app-vol { display: grid; grid-template-columns: 1fr 2fr; align-items: center; height: 38px; }
.charge { margin: 2px 0 0 52px; }
.charge-track { position: relative; height: 4px; border-radius: 2px; background: rgba(23, 25, 29, 0.10); }
.charge-track i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: #2fb85a; }
.charge small { margin-top: 6px; }
.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 32px; padding: 2px; margin: 2px 0 6px; border-radius: 8px; background: rgba(23, 25, 29, 0.07); }
.seg i { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 3); border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(23, 25, 29, 0.16); transition: transform 280ms var(--ease); }
.seg button { position: relative; z-index: 1; border-radius: 6px; font-weight: 500; }
.toggle-row { display: flex; align-items: center; gap: 12px; padding: 6px 0 4px; }
.toggle-row > svg { width: 18px; height: 18px; flex: none; align-self: flex-start; margin-top: 2px; }
.toggle-row > span { flex: 1; }

/* Notifications: the time gives its place to a clear button while the pointer is on the row. */
.nt { position: relative; display: grid; grid-template-columns: 36px 1fr; padding: 5px 0; }
.nt-head { display: flex; align-items: baseline; gap: 8px; }
.nt-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-time { font-size: 12px; color: var(--tertiary-c, rgba(23, 25, 29, 0.42)); white-space: nowrap; }
.nt-x { position: absolute; right: -4px; top: 2px; display: none; place-items: center; width: 24px; height: 24px; border-radius: 6px !important; }
.nt-x svg { width: 12px; height: 12px; }
.nt:hover .nt-time { visibility: hidden; }
.nt:hover .nt-x { display: grid; }
.nt p { margin: 0; font-size: 12px; color: var(--charcoal-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 2); line-clamp: var(--lines, 2); overflow: hidden; }
.nt .nt-app { font-size: 11px; color: rgba(23, 25, 29, 0.42); }
.nt .circle svg { width: 15px; height: 15px; }
.caught-up { display: grid; justify-items: center; gap: 2px; padding: 22px 0 18px; text-align: center; color: var(--charcoal-2); }
.caught-up svg { width: 22px; height: 22px; margin-bottom: 8px; color: rgba(23, 25, 29, 0.42); }
.caught-up b { font-size: 14px; }
.link-row { display: flex; align-items: center; justify-content: space-between; width: calc(100% + 16px); height: 36px; margin: 2px -8px 0; padding: 0 8px; text-align: left; }
.link-row svg { width: 14px; height: 14px; color: var(--charcoal-2); }

.td { display: grid; grid-template-columns: 240px 1px 1fr; gap: 0 16px; padding-top: 4px; }
.cal-top { display: flex; align-items: center; gap: 2px; height: 30px; }
.cal-top b { flex: 1; font-size: 15px; }
.cal-top button { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; font-size: 12px; }
.cal-top button svg { width: 14px; height: 14px; }
.cal-top button:disabled { color: rgba(23, 25, 29, 0.38); cursor: default; background: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 32px); justify-content: center; text-align: center; font-variant-numeric: tabular-nums; }
.cal-grid .wd { height: 22px; font-size: 11px; font-weight: 500; line-height: 22px; color: var(--charcoal-2); }
.cal-grid button { width: 28px; height: 28px; margin: 2px; border-radius: 50% !important; }
.cal-grid button.out { color: rgba(23, 25, 29, 0.38); }
.cal-grid button.pick { background: rgba(23, 25, 29, 0.10); }
.cal-grid button.now { background: var(--accent); color: #fff; font-weight: 600; }
.agenda { padding: 2px 0 2px; }
.agenda > small { font-weight: 600; margin: 0 0 4px; }
.ev { display: grid; grid-template-columns: 16px 1fr; padding: 4px 0; }
.ev i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }

/* Weather (WeatherUi/WeatherPopover.cs): Apple Weather's layout straight on the glass. The popover
   is screen-sized and scrolls; here it scrolls on its own, with the edge fade the app draws. */
.wx { top: 36px; width: 380px; padding: 0; overflow: hidden; background: rgba(211, 223, 238, 0.9); box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.14), 0 10px 26px rgba(10, 40, 70, 0.24); }
.wx-scroll { max-height: 606px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .wx-scroll { overflow: auto; } }
.wx-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; border-radius: 0 0 16px 16px; background: linear-gradient(rgba(211, 223, 238, 0), rgba(211, 223, 238, 0.96)); pointer-events: none; transition: opacity 240ms; }
.wx.end .wx-fade { opacity: 0; }
.wx-in { padding: 0 16px 10px; }
.wx-hero { display: grid; justify-items: center; padding: 14px 0 4px; text-align: center; }
.wx-hero .place { font: 600 17px/1.3 var(--font-display); }
.wx-now { display: flex; align-items: center; gap: 10px; }
.wx-now svg { width: 40px; height: 40px; stroke-width: 1.3; }
.wx-temp { font: 300 48px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.wx-cond { font-size: 15px; font-weight: 500; color: var(--charcoal-2); }
.wx-range { margin-top: 2px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wx-sum { margin: 0 0 8px; }
.wx-hours { display: grid; grid-template-columns: repeat(8, 1fr); margin: 0 -6px; text-align: center; font-variant-numeric: tabular-nums; }
.wx-hours > span { display: grid; justify-items: center; gap: 4px; }
.wx-hours small { font-size: 12px; }
.wx-hours svg { width: 20px; height: 20px; stroke-width: 1.5; }
.wx-hours b { font-weight: 600; }
.mm { display: block; min-height: 15px; font-size: 11px; line-height: 15px; color: #2a7fc4; }
.wx-days > div { display: grid; grid-template-columns: 56px 34px 36px 1fr 38px; align-items: center; min-height: 36px; padding: 2px 0; border-top: 1px solid rgba(23, 25, 29, 0.08); font-variant-numeric: tabular-nums; }
.wx-days > div:first-child { border-top: 0; }
.wx-days b { font-weight: 600; }
.wx-days .ic { display: grid; justify-items: center; }
.wx-days svg { width: 20px; height: 20px; stroke-width: 1.5; }
.wx-days .lo { text-align: right; padding-right: 10px; color: var(--charcoal-2); }
.wx-days .hi { text-align: right; }
.wx-days .track { position: relative; height: 4px; border-radius: 2px; background: rgba(23, 25, 29, 0.10); }
.wx-days .track i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(to right, var(--grad)); }
.wx-cells { display: grid; grid-template-columns: 1fr 1fr; }
.wx-cells > div { padding: 8px 0 10px; }
.wx-cells > div:nth-child(odd) { padding-right: 14px; border-right: 1px solid rgba(23, 25, 29, 0.10); }
.wx-cells > div:nth-child(even) { padding-left: 14px; }
.wx-cells > div:nth-child(n+3) { border-top: 1px solid rgba(23, 25, 29, 0.10); }
.wx-cells .sec { height: 22px; }
.wx-cells .v { display: block; font: 400 22px/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.wx-foot { padding: 4px 0 2px; text-align: center; font-size: 11px; color: rgba(23, 25, 29, 0.42); }

/* ---------------------------------------------------------------- closing */

/* Quit demo: Glassline's bar and dock leave, the Windows 11 taskbar comes back. Phases in demo.js:
   (none) Glassline, .menu the right-click menu, .quit bar and dock gone, taskbar in. */
#quit { --glow: #d49ac4; }
.q-bar {
  position: absolute; inset: 0 0 auto 0; height: 30px; display: flex; align-items: center; gap: 16px; padding: 0 14px;
  font-size: 12.5px; font-weight: 500; color: var(--charcoal);
  background: rgba(235, 207, 194, 0.24); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 -1px rgba(23, 25, 29, 0.14);
  transition: transform 520ms var(--ease), opacity 420ms;
}
.q-bar .s-fill { flex: 1; }
.q-bar svg { width: 15px; height: 15px; margin-left: -6px; }
.q-menu {
  position: absolute; left: 150px; top: 34px; width: 250px; padding: 5px; border-radius: 8px; font-size: 13px; color: var(--charcoal);
  background: rgba(246, 241, 238, 0.96); box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.12), 0 8px 20px rgba(60, 30, 20, 0.24);
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: 20px 0; transition: opacity 160ms, transform 200ms var(--ease);
}
.q-menu span { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px; border-radius: 5px; white-space: nowrap; }
.q-menu svg { width: 16px; height: 16px; flex: none; stroke-width: 1.5; }
.q-menu kbd { margin-left: auto; padding-left: 16px; font: inherit; color: rgba(23, 25, 29, 0.42); }
.q-menu i { display: block; height: 1px; margin: 4px 8px; background: rgba(23, 25, 29, 0.12); }
.q-menu .hot { background: var(--accent); color: #fff; }
.menu .q-menu { opacity: 1; transform: none; }
.quit .q-menu { opacity: 0; transition-duration: 120ms; }
.quit .q-bar { transform: translateY(-34px); opacity: 0; }
.q-dock { transition: transform 520ms var(--ease), opacity 420ms; }
.quit .q-dock { transform: translate(-50%, 90px); opacity: 0; }

.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(32, 32, 36, 0.78); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(52px); transition: transform 560ms var(--ease) 240ms;
}
.quit .taskbar { transform: none; }
.tb-apps { display: flex; align-items: center; gap: 6px; }
.tb-apps > i { width: 30px; height: 30px; margin: 0 3px; border-radius: 23%; }
.tb-apps .c1 { background: linear-gradient(#5db2ff, #1f6fe0); } .tb-apps .c2 { background: linear-gradient(#44d6c4, #0f8f89); }
.tb-apps .c3 { background: linear-gradient(#ffe38a, #f4b73a); } .tb-apps .c4 { background: linear-gradient(#ff7a9a, #e2335a); }
.tb-start { display: grid; grid-template-columns: 9px 9px; gap: 1.5px; margin: 0 8px; }
.tb-start i { width: 9px; height: 9px; background: #4cc2ff; border-radius: 1px; }
.tb-search { display: flex; align-items: center; gap: 8px; width: 180px; height: 32px; padding: 0 12px; margin-right: 6px; border-radius: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); }
.tb-search svg { width: 15px; height: 15px; }
.tb-tray { position: absolute; right: 12px; display: flex; align-items: center; gap: 10px; }
.tb-tray svg { width: 15px; height: 15px; }
.tb-time { display: grid; text-align: right; font-size: 11.5px; line-height: 1.35; margin-left: 6px; }
.tb-time small { color: #fff; font-size: 11.5px; }

.closing { padding: 180px var(--gutter) 40px; text-align: center; }
.closing img { width: 112px; height: 112px; margin: 0 auto 18px; }
.closing h2 { margin-bottom: 28px; }
.closing .store { background: var(--text); color: var(--charcoal); }
.closing .store:hover { background: #fff; }
.closing .note { margin: 16px 0 0; font-size: 14px; color: var(--tertiary); }
.closing .note + .note { margin-top: 6px; }

/* ---------------------------------------------------------------- reveal on scroll */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 900ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 900px) { .menubar .hide-md { display: none; } }
/* The home page's bar holds the most links: its last one goes first, before it meets the status icons. */
@media (max-width: 1000px) { .menubar .hide-lg { display: none; } }

/* ---------------------------------------------------------------- text pages (privacy, support) */

.page { padding: 104px var(--gutter) 40px; max-width: 768px; margin: 0 auto; }
.page h1 { margin: 0 0 8px; font: 600 44px/1.1 var(--font-display); letter-spacing: -0.02em; }
.page .updated { color: var(--tertiary); font-size: 14px; margin: 0 0 40px; }
.page .updated strong { color: var(--secondary); }
.page h2 { margin: 44px 0 10px; font: 600 22px/1.3 var(--font-display); }
.page .updated + h2 { margin-top: 0; }
.page h2 + .faq { margin-top: 14px; }
.page p, .page li { color: var(--secondary); }
.page strong { color: var(--text); font-weight: 600; }
.page ul { padding-left: 20px; }
.page li { margin: 6px 0; }
.page a { text-decoration-color: var(--tertiary); text-underline-offset: 3px; }
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--tertiary); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 10px 0 0; }

/* ---------------------------------------------------------------- footer */

footer { margin-top: 120px; border-top: 1px solid var(--hairline); padding: 28px 0 44px; font-size: 14px; color: var(--tertiary); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
footer a { text-decoration: none; color: var(--secondary); }
footer a:hover { color: var(--text); }
footer .spacer { flex: 1; }
/* The site in other languages (tools/scripts/site-languages.py writes the links). */
footer .langs { margin-top: 16px; justify-content: flex-end; gap: 6px 20px; font-size: 13px; }
footer .langs [aria-current] { color: var(--text); }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .menubar .hide-sm { display: none; }
  /* A phone's bar: the picker is its globe alone, and the demo keeps the icons it has room for. */
  .menubar .lang summary { font-size: 0; gap: 0; padding: 0 6px; }
  .menubar .status .pill[data-item="sound"], .menubar .status .pill[data-item="battery"] { display: none; }
  .hero { padding-bottom: 120px; }
  .hero-glass { padding: 32px 22px 28px; border-radius: 22px; }
  .hero-icon { width: 112px; height: 112px; }
  .hero .dock-items { gap: 5px; padding: 0 10px 8px; height: 56px; border-radius: 18px; }
  .hero .dock-item { width: 38px; height: 38px; }
  .hero .dock-item:nth-child(n+5):not(:nth-last-child(-n+3)) { display: none; }
  .hero .t-calendar i { font-size: 18px; } .hero .t-calendar b { font-size: 7px; }
  .feature { padding-top: 100px; }
  .screen { border-radius: 12px; }
}

@media (max-width: 360px) { .menus a, .status .pill { padding: 0 5px; } }

/* ---------------------------------------------------------------- your Glassline: menus and Settings */

/* Status items work: a click or a right-click opens their menu; hidden ones fold away. */
.status { gap: var(--bar-gap, 4px); transition: gap 200ms var(--ease); }
.status .pill { max-width: 200px; transition: background-color 140ms, opacity 200ms, max-width 280ms var(--ease), padding 280ms var(--ease), margin 280ms var(--ease); cursor: default; }
.status .pill:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.status .pill.open { background: color-mix(in srgb, currentColor 14%, transparent); }
.status .pill.gone { opacity: 0; max-width: 0; padding: 0; margin: 0 calc(var(--bar-gap, 4px) / -2); pointer-events: none; overflow: hidden; }

/* The hero says it's live. */
.try {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; margin-left: 10px; padding: 0 20px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.46); color: var(--charcoal); font-weight: 600; font-size: 16px;
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.10); transition: transform 180ms var(--ease), background-color 180ms;
}
.try svg { width: 18px; height: 18px; stroke-width: 1.6; }
.try:hover { background: rgba(255, 255, 255, 0.66); }
.try:active { transform: scale(0.97); }
.hero-glass .try-hint { margin: 16px 0 0; font-size: 14px; line-height: 1.4; color: var(--charcoal-2); transition: opacity 400ms; }
.tried .try-hint { opacity: 0; }

/* The arrow from "Click the icons" up to the status icons (demo.js places it under them). */
.bar-hint {
  position: absolute; top: 40px; right: calc(var(--tip, 220px) - 58px); width: 70px; height: 60px; pointer-events: none;
  transition: opacity 400ms; animation: bar-hint-bob 2.6s 1.9s ease-in-out infinite;
}
.bar-hint svg { display: block; width: 70px; height: 60px; overflow: visible; stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 1px 3px rgba(10, 30, 50, 0.55)); }
.bar-hint path { stroke-dasharray: 100; animation: bar-hint-draw 700ms 900ms var(--ease) backwards; }
.bar-hint span {
  position: absolute; left: 68px; top: 34px; height: 32px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; white-space: nowrap;
  background: rgba(255, 255, 255, 0.62); color: var(--charcoal); font-size: 14px; font-weight: 600;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.10), 0 4px 14px rgba(10, 30, 50, 0.22);
  animation: bar-hint-in 500ms 600ms var(--ease) backwards;
}
.tried .bar-hint { opacity: 0; }
@keyframes bar-hint-draw { from { stroke-dashoffset: 100; } }
@keyframes bar-hint-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes bar-hint-bob { 50% { transform: translateY(4px); } }
/* Narrower than this the label would reach the hero card. */
@media (max-width: 900px) { .bar-hint { display: none; } }

/* Settings > Dock drives the hero dock. */
.hero .dock-items { gap: var(--gap, 10px); height: var(--plate, calc(var(--size, 56px) + 20px)); padding-bottom: var(--pad, 10px); transition: height 200ms var(--ease), padding 200ms var(--ease); }
.hero .dock-item { width: var(--size, 56px); height: var(--size, 56px); }
.dock-item.running::after { transition: opacity 200ms; }
.no-dots .dock-item.running::after { opacity: 0; }

/* The glass menu (Glass/GlassMenu.cs): 24 px rows, a check column when anything is checkable. */
.gm {
  position: fixed; z-index: 40; min-width: 210px; padding: 5px; border-radius: 8px; font-size: 13px; color: var(--charcoal);
  background: rgba(240, 244, 248, 0.94); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.12), 0 8px 24px rgba(10, 30, 50, 0.24);
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: 20px 0; transition: opacity 140ms, transform 200ms var(--ease);
}
.gm.open { opacity: 1; transform: none; }
.gm button { display: flex; align-items: center; gap: 6px; width: 100%; height: 24px; padding: 0 10px 0 8px; border-radius: 5px; text-align: left; white-space: nowrap; }
.gm button:hover { background: var(--accent); color: #fff; }
.gm .ck { display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
.gm .ck svg { width: 14px; height: 14px; stroke-width: 2; }
.gm .gm-cap { display: block; padding: 4px 10px 2px 30px; font-size: 11.5px; font-weight: 600; color: var(--charcoal-3); }
.gm i { display: block; height: 1px; margin: 4px 8px; background: rgba(23, 25, 29, 0.12); }

/* Settings (SettingsUi/SettingsWindow.cs): dark glass, a sidebar, rounded inset groups of rows. */
.gs {
  position: fixed; z-index: 30; top: 48px; left: 50%; width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100svh - 170px));
  display: grid; grid-template-columns: 172px 1fr; border-radius: 14px; overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.35;
  background: rgba(36, 38, 43, 0.86); -webkit-backdrop-filter: blur(40px) saturate(150%); backdrop-filter: blur(40px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 24px 60px rgba(0, 0, 0, 0.38);
  opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.97); transform-origin: 50% 0; transition: opacity 180ms, transform 260ms var(--ease);
}
.gs.open { opacity: 1; transform: translateX(-50%); }
.gs-side { padding: 10px; background: rgba(255, 255, 255, 0.04); box-shadow: inset -1px 0 rgba(255, 255, 255, 0.08); }
.gs-brand { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px; margin-bottom: 6px; font: 600 15px/1 var(--font-display); }
.gs-brand img { width: 22px; height: 22px; }
.gs-nav { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 6px; margin: 1px 0; border-radius: 7px; text-align: left; transition: background-color 140ms; }
.gs-nav:hover { background: rgba(255, 255, 255, 0.07); }
.gs-nav.on { background: rgba(255, 255, 255, 0.14); }
.gs-tile { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; color: #fff; flex: none; }
.gs-tile svg { width: 13px; height: 13px; stroke-width: 1.8; }
.c-dock { background: linear-gradient(#4a8bf5, #3a7bf0); }
.c-bar { background: linear-gradient(#5a5a5e, #48484a); }
.gs-main { display: flex; flex-direction: column; min-height: 0; }
.gs-top { display: flex; align-items: center; height: 46px; padding: 0 10px 0 18px; }
.gs-top b { flex: 1; font: 600 17px/1 var(--font-display); }
.gs-close { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.gs-close:hover { background: rgba(255, 255, 255, 0.16); }
.gs-close svg { width: 12px; height: 12px; stroke-width: 2; }
.gs-page { overflow: auto; padding: 0 16px 16px; overscroll-behavior: contain; }
.gs-head { padding: 6px 4px; font-size: 12px; font-weight: 600; color: var(--secondary); }
.gs-card { margin-bottom: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.gs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; padding: 4px 10px 4px 12px; }
.gs-row + .gs-row { box-shadow: 0 -1px rgba(255, 255, 255, 0.07); }
.gs-row small { display: block; color: var(--secondary); font-size: 11.5px; }
.gs .sw { background: rgba(255, 255, 255, 0.18); border-radius: 10px; }
.gs .sw.on { background: var(--accent); }
.gs-seg { display: inline-flex; padding: 2px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); }
.gs-seg button { height: 22px; padding: 0 10px; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--secondary); transition: background-color 180ms, color 180ms; }
.gs-seg button.on { background: rgba(255, 255, 255, 0.16); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.gs-range { width: 180px; height: 20px; margin: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.gs-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--text) var(--p, 50%), rgba(255, 255, 255, 0.16) var(--p, 50%)); }
.gs-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.gs-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--text); }
.gs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.gs-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.gs-note { margin: 4px 4px 0; font-size: 12px; color: var(--tertiary); }

/* Control Center: the quick switches under the sliders. */
.cc-sw { display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px 0 6px; text-align: center; }
.cc-sw > span { display: grid; justify-items: center; gap: 5px; }
.cc-sw .circle { width: 36px; height: 36px; }
.cc-sw .circle svg { width: 18px; height: 18px; }
.cc-sw small { font-size: 11.5px; }

@media (max-width: 720px) {
  .hero .dock-item { width: calc(var(--size, 56px) * 0.68); height: calc(var(--size, 56px) * 0.68); }
  .hero .dock-items { gap: calc(var(--gap, 10px) / 2); height: calc(var(--size, 56px) * 0.68 + 18px); }
  .try { margin: 10px 0 0; }
  .gs { grid-template-columns: 1fr; top: 44px; max-height: calc(100svh - 140px); }
  .gs-side { display: flex; gap: 4px; align-items: center; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.08); }
  .gs-brand { display: none; }
  .gs-nav { width: auto; padding: 0 10px 0 6px; }
}
.gm[data-material="dark"] { background: rgba(40, 42, 47, 0.94); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.4); }
.gm[data-material="dark"] .gm-cap { color: var(--tertiary); }
.gm[data-material="dark"] i { background: rgba(255, 255, 255, 0.12); }

/* Headless review (?state=): states land at once. */
.review *, .review *::before, .review *::after { transition: none !important; }

/* Settings open over the hero: the hero card steps aside so the dock and Settings read clearly. */
.hero-glass { transition: opacity 220ms, transform 260ms var(--ease); }
.gs-on .hero-glass { opacity: 0; transform: scale(0.98); pointer-events: none; }
.gs[hidden], .gm[hidden] { display: none; }
.hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero .actions .try { margin: 0; }

/* The dock section's own controls (Settings > Dock's Size and Magnification) drive its demo dock. */
.demo-dock .dock-item { width: var(--size, 56px); height: var(--size, 56px); }
.demo-dock .dock-items { height: var(--plate, calc(var(--size, 56px) + 20px)); padding-bottom: var(--pad, 10px); }
/* They sit on the demo's desktop as a dark glass panel (the app's Settings rows), under an open stack. */
.dock-set {
  /* The stage is drawn at 1040 px and scaled by --s: on a small screen the panel is scaled back up to stay usable (about 312 px). */
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(max(1, calc(0.78 / var(--s, 1)))); z-index: 2; width: 400px; padding: 6px 8px; border-radius: 16px;
  background: rgba(20, 22, 26, 0.46); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 32px rgba(8, 20, 30, 0.28);
}
.dock-set .segmented { margin-top: 0; background: rgba(255, 255, 255, 0.10); box-shadow: none; }
.dock-set .segmented button { height: 28px; padding: 0 14px; font-size: 13px; }
.dset { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 46px; padding: 0 10px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.9); }
.dset + .dset { box-shadow: inset 0 1px rgba(255, 255, 255, 0.10); }
.dset .gs-range { width: 200px; max-width: 60%; }
/* Magnification follows a mouse: without one there is nothing to show. */
@media not ((hover: hover) and (pointer: fine)) { .dset.mag { display: none; } }

/* ---------------------------------------------------------------- What's new (changelog.html) */

/* The newest release on the glass wallpaper, like the home page's hero but shorter. */
.cl-hero {
  position: relative; display: grid; place-items: center; min-height: 480px; padding: 96px var(--gutter) 72px;
  background: url(/assets/wallpaper-glass-1440.jpg) center 45% / cover no-repeat;
}
@media (min-width: 1000px) { .cl-hero { background-image: url(/assets/wallpaper-glass-2560.jpg); } }
.cl-hero-glass {
  width: min(440px, 100%); padding: 30px 32px 32px; border-radius: 24px; text-align: center; color: var(--charcoal);
  background: rgba(236, 230, 238, 0.5);
  -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 30px 80px rgba(60, 30, 80, 0.22);
}
.cl-hero-glass img { width: 96px; height: 96px; margin: 0 auto 6px; filter: drop-shadow(0 14px 24px rgba(60, 40, 90, 0.22)); }
.cl-hero h1 { margin: 0; font: 600 clamp(40px, 7vw, 56px)/1.05 var(--font-display); letter-spacing: -0.03em; }
.cl-hero-glass p { margin: 10px 0 0; font-size: 17px; color: rgba(23, 25, 29, 0.78); text-wrap: balance; }
.cl-jump {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; margin-top: 22px; border-radius: 10px;
  background: var(--charcoal); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: transform 180ms var(--ease), background-color 180ms;
}
.cl-jump:hover { background: #000; }
.cl-jump:active { transform: scale(0.97); }

.cl-body { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); scroll-margin-top: 34px; }

/* The switch: the version in the Store on the left, the one waiting for Microsoft on the right.
   Each side says what it is and which version; the plate under the chosen one slides across. */
.cl-switch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(620px, 100%); margin: 72px auto 0; padding: 4px;
  border-radius: 16px; background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px var(--hairline);
}
.cl-switch i {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px;
  background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: transform 460ms var(--ease);
}
.cl-switch[data-on="1"] i { transform: translateX(100%); }
/* Three sides (the Roadmap: the next update, the one after, what is being explored). */
.cl-switch.three { grid-template-columns: repeat(3, 1fr); width: min(760px, 100%); }
.cl-switch.three i { width: calc((100% - 8px) / 3); }
.cl-switch.three[data-on="2"] i { transform: translateX(200%); }
.cl-switch { scroll-margin-top: 58px; }
.cl-switch button {
  position: relative; z-index: 1; display: grid; gap: 1px; align-content: center; min-width: 0; padding: 12px 14px 13px; border-radius: 12px;
  text-align: center; color: var(--secondary); transition: color 260ms;
}
.cl-switch button b { font: 600 17px/1.3 var(--font-display); }
.cl-switch button span { font-size: 13.5px; color: var(--tertiary); font-variant-numeric: tabular-nums; transition: color 260ms; }
.cl-switch button:hover { color: var(--text); }
.cl-switch button[aria-selected="true"] { color: var(--text); }
.cl-switch button[aria-selected="true"] span { color: var(--secondary); }
.cl-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-switch + .cl-panels .release { padding-top: 64px; }
/* With the script running only the chosen side shows; it comes in from its own side. */
.cl-panels.switched .release + .release { margin-top: 0; border-top: 0; }
.cl-panels.switched.moved .release { animation: cl-side 560ms var(--ease) both; }
.cl-panels .release[data-side="left"] { --from: -32px; }
.cl-panels .release[data-side="right"] { --from: 32px; }
@keyframes cl-side { from { opacity: 0; transform: translateX(var(--from, 0)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cl-switch i { transition: none; }
  .cl-panels.switched.moved .release { animation: none; }
}

/* Earlier versions: number, day and notes, nothing more. */
.cl-archive { margin-top: 104px; padding-top: 72px; border-top: 1px solid var(--hairline); }
.cl-archive h2 { margin: 0 0 12px; font: 600 clamp(28px, 4vw, 36px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.cl-old { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 32px; padding: 28px 0; }
.cl-old + .cl-old { border-top: 1px solid var(--hairline); }
.cl-old h3 { margin: 0; font: 600 26px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.cl-old header p { margin: 4px 0 0; font-size: 15px; color: var(--secondary); }
.cl-old .rel-notes li:first-child { margin-top: 2px; }
.release { padding-top: 88px; }
.release + .release { margin-top: 88px; border-top: 1px solid var(--hairline); }
.rel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 32px; }
.rel-head h2 { margin: 0; font: 600 clamp(44px, 6vw, 64px)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rel-head p { margin: 0; font-size: 15px; color: var(--secondary); }
.rel-notes { max-width: 760px; margin: 0; padding-left: 20px; color: var(--secondary); }
.rel-notes li { margin: 8px 0; }
.rel-note { max-width: 760px; margin: 56px 0 0; color: var(--secondary); }

/* Highlights: each one with a still piece of the app's own UI on a wallpaper. */
.cl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 28px; }
.cl-art {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; height: 312px; overflow: hidden; border-radius: 18px;
  background: var(--wall) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.cl-art > * { pointer-events: none; min-width: 0; max-width: calc(100% - 24px); }
.cl-card h3 { margin: 20px 0 6px; font: 600 22px/1.25 var(--font-display); }
.cl-card p { margin: 0; font-size: 16px; color: var(--secondary); }

.vg {
  width: 272px; padding: 8px 16px 12px; border-radius: 16px; color: var(--charcoal); font-size: 13px; line-height: 1.35;
  background: rgba(240, 244, 248, 0.86); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.12), 0 10px 26px rgba(10, 30, 50, 0.24);
}
.vg .cal-grid button.dot { position: relative; }
.vg .cal-grid button.dot::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--charcoal-2); }
.vg-agenda-head { display: flex; align-items: center; justify-content: space-between; height: 30px; }
.vg-agenda-head b { font-weight: 600; }
.vg .circle { width: 24px; height: 24px; }
.vg .circle svg { width: 13px; height: 13px; stroke-width: 2; }
.vg .ev span b { display: block; font-weight: 500; }

.vg-menu.gm { position: relative; z-index: auto; min-width: 220px; opacity: 1; transform: none; }
.vg-menu button.on { background: var(--accent); color: #fff; }

.vg-palette.palette { position: relative; left: auto; top: auto; width: 300px; border-radius: 16px; }
.vg-palette .p-field { height: 48px; padding: 0 16px; font-size: 18px; }
.vg-palette .p-field svg { width: 18px; height: 18px; }
.vg-palette .caret { height: 22px; }
.vg-palette .p-results { min-height: 0; }
.vg-palette .p-row.hover { background: rgba(243, 244, 246, 0.05); }
.vg-cursor { left: 168px; top: 196px; width: 22px; height: 22px; }

.vg-weather { width: 240px; padding-bottom: 14px; }
.vg-weather .wx-hero { padding-top: 8px; }
.vg-unit { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(23, 25, 29, 0.10); font-weight: 500; }
.vg-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: rgba(23, 25, 29, 0.07); }
.vg-seg span { padding: 3px 12px; border-radius: 6px; font-weight: 500; }
.vg-seg .on { background: #fff; box-shadow: 0 1px 3px rgba(23, 25, 29, 0.16); }

.vg-accent { width: 288px; padding: 14px 16px 16px; }
.vg-row { display: flex; align-items: center; justify-content: space-between; font-weight: 500; }
.vg-swatches { display: flex; justify-content: space-between; margin: 12px 2px 2px; }
.vg-swatches i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); }
.vg-swatches i.on { box-shadow: 0 0 0 2px #eef2f6, 0 0 0 4px var(--c); }
.vg-toggles { display: flex; gap: 14px; margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(23, 25, 29, 0.10); }
.vg-toggles span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(23, 25, 29, 0.13); }
.vg-toggles span.on { background: var(--c); color: #fff; }
.vg-toggles svg { width: 18px; height: 18px; }
/* An odd card out at the end takes the whole row. */
.cl-grid > .cl-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* The fixes: a plain heading and list on the page, no plate around them. */
.fixes { margin-top: 72px; }
.fixes h3 { margin: 0; font: 600 26px/1.2 var(--font-display); }
.fixes > p { margin: 4px 0 20px; color: var(--secondary); }
.fixes h3 + ul { margin-top: 22px; }
.fixes li span { text-wrap: balance; }
.fixes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 36px; margin: 0; padding: 0; list-style: none; }
.fixes li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; color: var(--secondary); }
.fixes li svg { width: 18px; height: 18px; margin-top: 4px; color: #4cd07d; stroke-width: 2; }

.changelog .closing { padding-top: 140px; }
.changelog .closing .note a { color: var(--secondary); }

@media (max-width: 860px) {
  .cl-grid { grid-template-columns: minmax(0, 1fr); }
  .fixes ul { grid-template-columns: minmax(0, 1fr); }
  .cl-old { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cl-hero { min-height: 400px; padding-top: 72px; }
  .cl-hero-glass { padding: 24px 22px 26px; border-radius: 22px; }
  .cl-art { height: 296px; border-radius: 14px; }
  .release { padding-top: 64px; }
  .release + .release { margin-top: 64px; }
  .cl-switch { margin-top: 48px; }
  .cl-switch button { padding: 10px 8px 11px; }
  .cl-switch button b { font-size: 15.5px; }
  .cl-switch button span { font-size: 12.5px; }
  .cl-switch + .cl-panels .release { padding-top: 48px; }
  .cl-archive { margin-top: 72px; padding-top: 56px; }
}

/* ---------------------------------------------------------------- 1.0.5 on the home page */

/* Painted weather: the app's own pictures in place of line glyphs. */
.wart { display: block; object-fit: contain; }
.mb-weather .wart { width: 18px; height: 18px; margin-right: 4px; }
.wx-now .wart { width: 46px; height: 46px; }
.wx-hours .wart, .wx-days .wart { width: 24px; height: 24px; }

/* Window previews over the dock demo: the plate of an app's windows above its icon. */
.dock-prev {
  position: absolute; left: 0; bottom: 112px; z-index: 4; display: flex; gap: 6px; padding: 8px; border-radius: 16px; color: var(--charcoal);
  background: rgba(211, 223, 238, 0.92); box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.14), 0 10px 26px rgba(10, 40, 70, 0.26);
  opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: 50% 100%; transition: opacity 200ms, transform 300ms var(--ease); pointer-events: none;
}
.dock-prev.open { opacity: 1; transform: none; }
.dock-prev .rm-th { padding: 8px 8px 6px; }
.dock-prev .rm-th:first-child { background: rgba(23, 25, 29, 0.08); }
.dock-prev .rm-thumb { width: 168px; height: 104px; }
.dock-prev small { display: block; font-size: 12.5px; }
.pv-music { background: linear-gradient(#25282e 0 10px, transparent 10px), linear-gradient(135deg, #ff7a9a, #7a4cf0); }
.prev-open .dock-label { opacity: 0 !important; }

/* Control Center on the home page: the Hardware row and page, the apps' tray icons and their pins. */
.cc-hw { width: calc(100% + 16px); margin-top: 2px; }
.cc-tray { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; margin: 0 -8px; }
.cc-tr { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 4px 0 8px; border-radius: 8px; }
.cc-tr:hover { background: rgba(23, 25, 29, 0.05); }
.cc-tr .mtile { width: 22px; height: 22px; border-radius: 6px; }
.cc-tr .mtile svg { width: 14px; height: 14px; }
.cc-tr b { font-weight: 400; }
.cc-pin { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 6px; opacity: 0.5; }
.cc-tr:hover .cc-pin, .cc-pin:focus-visible { opacity: 1; }
.cc-pin svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mb-pins { display: contents; }
.mb-pin .mtile { width: 18px; height: 18px; border-radius: 5px; }
.mb-pin .mtile svg { width: 12px; height: 12px; stroke-width: 1.9; }
.hw-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; height: 58px; font-variant-numeric: tabular-nums; }
.hw-row > span > b { display: block; font-size: 15px; }
.hw-row .rm-ring { width: 44px; height: 44px; }
.hw-row .rm-ring b { font-size: 11.5px; }
.ccp .rm-hw-fan { height: 30px; }
.ccp .sec svg use[href="#r-fan"] { stroke-width: 1.6; }

/* ---------------------------------------------------------------- Roadmap (roadmap.html) */

/* The page is What's new's (hero on a wallpaper, groups like releases, cards in a grid); what is
   its own: the lake, the words above the list, and pictures that play. */
.rm-hero { background-image: url(/assets/wallpaper-lake-1440.jpg); background-position: center 58%; }
@media (min-width: 1000px) { .rm-hero { background-image: url(/assets/wallpaper-lake-2560.jpg); } }
.rm-hero .cl-hero-glass { background: rgba(226, 236, 240, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 30px 80px rgba(20, 60, 70, 0.22); }
.rm-hero .cl-hero-glass img { filter: drop-shadow(0 14px 24px rgba(20, 60, 80, 0.22)); }

.rm-intro { max-width: 720px; margin: 0 auto; padding-top: 96px; text-align: center; }
.rm-intro h2 { margin: 0; font: 600 clamp(30px, 4.6vw, 46px)/1.1 var(--font-display); letter-spacing: -0.025em; }
.rm-intro p { margin: 18px 0 0; font-size: 19px; color: var(--secondary); text-wrap: pretty; }
.rm-intro p + p { margin-top: 12px; font-size: 16px; color: var(--tertiary); }
.rm-intro a { color: var(--secondary); text-decoration-color: var(--tertiary); text-underline-offset: 3px; }
.rm-intro a:hover { color: var(--text); }
.rm-intro + .rm-group { padding-top: 104px; }
.rm-group { scroll-margin-top: 34px; }
.roadmap .closing .note { max-width: 520px; margin-left: auto; margin-right: auto; }

/* A wide card takes the whole row; a last card left alone sits in the middle at its own width. */
.rm-grid > .cl-card.wide { grid-column: 1 / -1; }
.rm-grid > .cl-card:last-child:nth-child(odd):not(.wide) { grid-column: 1 / -1; width: calc(50% - 14px); justify-self: center; }
@media (max-width: 860px) { .rm-grid > .cl-card:last-child:nth-child(odd):not(.wide) { width: auto; justify-self: stretch; } }
/* A half-width picture with none beside it (before a wide one, or the last; marked by store-listing.py): in the middle. */
.rm-grid > .cl-card.alone { grid-column: 1 / -1; width: calc(50% - 14px); justify-self: center; }
@media (max-width: 860px) { .rm-grid > .cl-card.alone { width: auto; justify-self: stretch; } }

/* A picture is a small desktop drawn 520 x 312 (1072 x 312 when wide) and scaled to its card
   (demo.js sets --s), so the pointer's places hold at every width. */
.rm-art { display: block; height: auto; aspect-ratio: 520 / 312; }
.wide > .rm-art { aspect-ratio: 1072 / 312; }
.cl-art > .rm-stage {
  position: absolute; left: 0; top: 0; width: 520px; height: 312px; max-width: none; transform-origin: 0 0; transform: scale(var(--s, 1));
  text-align: left; transition: opacity 260ms;
}
.wide .rm-stage { width: 1072px; }
.rm-art.rewind .rm-stage { opacity: 0; }
.rm-art.snap * { transition: none !important; }
.rm-stage small { display: block; }
.rm-stage .cursor { width: 22px; height: 22px; z-index: 6; }

/* What comes and goes. Without the script nothing is hidden: the picture shows every piece. */
.rm-pop { transition: opacity 220ms, transform 320ms var(--ease); }
.live .rm-pop:not(.on) { opacity: 0; transform: translateY(6px) scale(0.98); }
.rm-fade { transition: opacity 220ms; }
.live .rm-fade:not(.on) { opacity: 0; }

/* The demos' menu bar at the picture's size, and the title of a panel. */
.rm-stage .mbar { height: 28px; padding: 0 6px; font-size: 12px; }
.rm-stage .mbar b { padding: 0 8px 0 6px; font-weight: 700; }
.rm-stage .mbar .m { padding: 0 7px; }
.rm-stage .mb-cell { height: 22px; min-width: 30px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.rm-stage .mb-cell svg { width: 15px; height: 15px; }
.rm-stage .mb-cell.open { background: rgba(23, 25, 29, 0.12); }
.rm-stage .mb-clock { min-width: 74px; }
.rm-stage .vg { position: absolute; }
.rm-title { display: flex; align-items: center; height: 32px; font: 600 16px/1 var(--font-display); }
.rm-stage .vg b { font-weight: 600; }

/* Settings in a picture: the dark glass of the app's Settings window, cut to what is shown. */
.rm-set {
  position: absolute; padding: 4px 12px 12px; border-radius: 14px; color: var(--text); font-size: 13px; line-height: 1.35;
  background: rgba(36, 38, 43, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 16px 40px rgba(0, 0, 0, 0.34);
}
.rm-set h4 { display: flex; align-items: center; height: 38px; margin: 0; padding: 0 4px; font: 600 16px/1 var(--font-display); }
.rm-set small { color: var(--secondary); font-size: 11.5px; }
.rm-set .gs-card { margin-bottom: 0; }
.rm-btn {
  display: inline-grid; place-items: center; height: 24px; padding: 0 12px; border-radius: 6px; flex: none;
  background: rgba(255, 255, 255, 0.14); font-size: 12px; font-weight: 500; white-space: nowrap; transition: background-color 120ms;
}
.rm-btn.on { background: rgba(255, 255, 255, 0.30); }

/* Search in a picture: the palette at the picture's size; answers that take turns lie on each other. */
.rm-pal.palette { left: 70px; top: 52px; width: 380px; border-radius: 16px; }
.rm-pal.rm-pal-high { top: 26px; }
.rm-pal .p-field { height: 48px; padding: 0 16px; font-size: 18px; white-space: nowrap; }
.rm-pal .p-field svg { width: 18px; height: 18px; flex: none; }
.rm-pal .caret { height: 22px; flex: none; }
.rm-pal .p-results { min-height: 0; }
.rm-pal .p-row .big { display: block; line-height: 1.2; }
.rm-pal .p-results > * { animation: none; }
.rm-alt { position: relative; }
.rm-alt > * { position: absolute; inset: 6px 8px auto 8px; }
.rm-money { background: linear-gradient(#5fd68a, #1f9a55); font: 700 15px/1 var(--font); }
.rm-money:not(:empty) { letter-spacing: -0.02em; }
.rm-eq { font: 700 17px/1 var(--font); }
.rm-kinds { display: flex; justify-content: space-between; padding: 11px 20px 13px; border-top: 1px solid rgba(243, 244, 246, 0.10); font-size: 12px; color: rgba(243, 244, 246, 0.36); }
.rm-kinds span { transition: color 260ms; }
.rm-kinds .on { color: #f3f4f6; }
.rm-rows .p-row { height: 44px; overflow: hidden; transition: height 280ms var(--ease), opacity 200ms; }
.live .rm-rows .p-row:not(.on) { height: 0; opacity: 0; }
.rm-rows .p-group { transition: opacity 200ms; }
.rm-def { padding: 0 12px; }
.rm-def .p-group { padding-left: 0; }
.rm-def p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: rgba(243, 244, 246, 0.82); }
.rm-def p b { font: 600 20px/1.3 var(--font-display); color: #f3f4f6; }
.rm-def p i { margin-left: 10px; font-size: 13px; color: rgba(243, 244, 246, 0.6); }
.rm-def small { margin-top: 8px; font-size: 11.5px; color: rgba(243, 244, 246, 0.42); }

/* Tray icons: under "Other controls" (a row each, with a pin that shows under the pointer), and
   in the bar once shown there. */
.rm-cc { right: 10px; top: 36px; width: 250px; }
.rm-trows { margin: 0 -6px; }
.rm-tr { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 4px 0 6px; border-radius: 8px; overflow: hidden; transition: height 300ms var(--ease), opacity 200ms; }
.rm-tr .mtile { width: 22px; height: 22px; border-radius: 6px; }
.rm-tr .mtile svg { width: 14px; height: 14px; }
.live .rm-tr[data-at]:not(.on) { height: 0; opacity: 0; }
.rm-tpin { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border-radius: 6px; background: rgba(23, 25, 29, 0.10); opacity: 0; transition: opacity 160ms; }
.rm-tpin.on { opacity: 1; }
.rm-tpin svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rm-tray { display: flex; padding-top: 2px; }
.rm-ti { display: grid; place-items: center; width: 28px; margin-right: 12px; transition: width 300ms var(--ease), margin 300ms var(--ease), opacity 200ms, scale 300ms var(--ease); }
.live .rm-ti[data-at]:not(.on) { width: 0; margin-right: 0; opacity: 0; scale: 0.4; }
.rm-t1 { background: linear-gradient(#4aa8ff, #1f78e6); } .rm-t2 { background: linear-gradient(#56d98a, #1f9d57); }
.rm-t3 { background: linear-gradient(#a99cff, #6252e4); } .rm-t4 { background: linear-gradient(#ff7a9a, #e2335a); }
.rm-pin { transition: min-width 300ms var(--ease), width 300ms var(--ease), padding 300ms var(--ease), margin 300ms var(--ease), opacity 200ms; }
.rm-pin .mtile { width: 18px; height: 18px; border-radius: 5px; }
.rm-pin .mtile svg { width: 12px; height: 12px; stroke-width: 1.9; }
.rm-pin > span { display: grid; transition: transform 380ms var(--ease), scale 300ms var(--ease); }
.live .rm-stage .rm-pin:not(.on) { min-width: 0; width: 0; padding: 0; margin-left: -2px; opacity: 0; overflow: hidden; }
.live .rm-pin:not(.on) > span { scale: 0.4; }
.rm-pin-a.on { transform: translateX(-34px); }
.rm-pin-b.on { transform: translateX(34px); }
.rm-menu.gm { position: absolute; z-index: 4; min-width: 164px; }
.rm-menu.gm.on { opacity: 1; transform: none; }
.rm-menu button.on { background: var(--accent); color: #fff; }

/* Backup: the file that was saved, and what came back from it. */
.rm-file { display: flex; align-items: center; gap: 10px; padding: 12px 4px 0; }
.rm-file .tile { width: 30px; height: 30px; flex: none; }
.rm-file b { display: block; font-weight: 600; }
.rm-ticks { display: flex; gap: 18px; padding: 12px 4px 0; font-size: 12.5px; color: var(--secondary); }
.rm-ticks span { display: inline-flex; align-items: center; gap: 5px; }
.rm-ticks svg { width: 14px; height: 14px; color: #4cd07d; stroke-width: 2.2; }

/* Following a sent message: what is written, the message under "Your messages", Windows' notification. */
.rm-fu-box { height: 52px; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
.rm-fu-send { display: flex; justify-content: flex-end; padding-top: 10px; }
.rm-fu-send .rm-btn { background: var(--accent); color: #fff; font-weight: 600; }
.rm-fu-send .rm-btn.on { background: #2466c4; }
.rm-set h4 .rm-btn { margin-left: auto; font-family: var(--font); }
.rm-fu-msg { padding: 2px 4px 0; }
.rm-fu-msg > span { display: block; }
.rm-fu-msg small { display: flex; gap: 10px; padding-top: 2px; font-size: 12.5px; }
.rm-fu-msg small b { color: var(--text); font-weight: 600; }
.live .rm-fu-msg small b:not(.on) { display: none; }
.rm-fu-msg p { margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: var(--secondary); }
.rm-fu-toast {
  position: absolute; left: 700px; top: 206px; width: 300px; padding: 9px 14px 12px; border-radius: 10px; z-index: 4; color: var(--text); font-size: 12.5px; line-height: 1.35;
  background: rgba(44, 46, 52, 0.97); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 34px rgba(0, 0, 0, 0.40);
}
.rm-fu-toast small { padding-bottom: 3px; color: var(--secondary); font-size: 11px; }
.rm-fu-toast b { display: block; font-weight: 600; }
.rm-fu-toast span { color: var(--secondary); }

/* Two displays: each a small desktop with its bar; the dock is on the right one. */
.rm-mon {
  position: absolute; top: 30px; width: 420px; height: 252px; border-radius: 12px; overflow: hidden;
  background: #0c0d0f url(/assets/wallpaper-coast-1440.jpg) center / cover no-repeat;
  box-shadow: 0 0 0 5px #121316, 0 0 0 6px rgba(255, 255, 255, 0.16), 0 18px 40px rgba(20, 10, 40, 0.35);
}
.rm-mon-bar { position: absolute; inset: 0 0 auto 0; height: 14px; background: rgba(244, 246, 250, 0.5); box-shadow: inset 0 -1px rgba(23, 25, 29, 0.12); }
.rm-mon-dock {
  position: absolute; left: 50%; bottom: 8px; display: flex; gap: 5px; padding: 5px 7px; border-radius: 11px; transform: translateX(-50%);
  background: rgba(160, 197, 232, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  transition: transform 520ms var(--ease), opacity 420ms;
}
.rm-mon-dock.on { transform: translate(-50%, 48px); opacity: 0; }
.rm-mon-dock i { width: 24px; height: 24px; border-radius: 23%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.rm-mon-dock .c1 { background: linear-gradient(#5db2ff, #1f6fe0); } .rm-mon-dock .c2 { background: linear-gradient(#44d6c4, #0f8f89); }
.rm-mon-dock .c3 { background: linear-gradient(#ffe38a, #f4b73a); } .rm-mon-dock .c4 { background: linear-gradient(#ff7a9a, #e2335a); }
.rm-mon-dock .c5 { background: linear-gradient(#4a5058, #1c1f24); } .rm-mon-dock .c6 { background: linear-gradient(#c9ced6, #858d99); }
/* The bar and the dock change places (Roadmap, "places"): "on" is the other arrangement, bar below and dock above. */
.rm-mon-bar.swap { inset: auto 0 auto 0; top: 0; transition: top 820ms var(--ease), box-shadow 300ms; }
.rm-mon-bar.swap.on { top: calc(100% - 14px); box-shadow: inset 0 1px rgba(23, 25, 29, 0.12); }
.rm-mon-dock.swap { transition: bottom 820ms var(--ease); }
.rm-mon-dock.swap.on { bottom: calc(100% - 42px); transform: translateX(-50%); opacity: 1; }
/* A plain app window: a title strip with its three buttons, a heading and lines. */
.rm-mon-win, .rm-app {
  position: absolute; border-radius: 8px; overflow: hidden; background: #16181b;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 10px 24px rgba(0, 20, 40, 0.4);
}
.rm-mon-win { left: 158px; top: 72px; width: 300px; height: 166px; z-index: 2; translate: calc(456px * var(--v, 0)) 0; }
.rm-app { left: 18px; top: 52px; width: 216px; height: 150px; }
.rm-mon-title { display: flex; justify-content: flex-end; align-items: center; gap: 12px; height: 22px; padding: 0 10px; background: #25282e; }
.rm-mon-title i { width: 7px; height: 1.5px; background: rgba(242, 242, 243, 0.55); }
.rm-mon-title i:nth-child(2) { height: 7px; background: none; box-shadow: inset 0 0 0 1.5px rgba(242, 242, 243, 0.55); border-radius: 1px; }
.rm-mon-title i:nth-child(3) { width: 9px; transform: rotate(45deg); box-shadow: 0 0 0 0; }
.rm-mon-title i:nth-child(3)::after { content: ""; display: block; width: 9px; height: 1.5px; background: inherit; transform: rotate(90deg); }
.rm-mon-body { padding: 16px 18px; }
.rm-mon-body b { display: block; width: 46%; height: 12px; margin-bottom: 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.24); }
.rm-mon-body p { height: 7px; margin: 0 0 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); }
.rm-mon-body p.short { width: 62%; }

/* Window previews: the dock, the plate of small windows above an icon, the window that comes up. */
.rm-dock {
  position: absolute; left: 108px; bottom: 10px; display: flex; gap: 8px; padding: 8px 12px; border-radius: 16px;
  background: rgba(174, 198, 226, 0.46); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 10px 26px rgba(8, 40, 70, 0.20);
}
.rm-dock .tile { position: relative; width: 40px; height: 40px; }
.rm-dock .run::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--charcoal); opacity: 0.7; }
.rm-prev {
  position: absolute; left: 50px; top: 112px; display: flex; gap: 4px; padding: 6px; border-radius: 14px; color: var(--charcoal); transform-origin: 50% 100%;
  background: rgba(211, 223, 238, 0.92); box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.14), 0 10px 26px rgba(10, 40, 70, 0.26);
}
.rm-th { display: grid; gap: 6px; padding: 8px 8px 6px; border-radius: 9px; text-align: center; transition: background-color 160ms; }
.rm-th.on { background: rgba(23, 25, 29, 0.10); }
.rm-th small { font-size: 11.5px; color: var(--charcoal); }
.rm-thumb { display: block; width: 116px; height: 72px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(23, 25, 29, 0.22), 0 2px 6px rgba(10, 30, 50, 0.18); }
.rm-page { background: linear-gradient(#25282e 0 10px, transparent 10px), linear-gradient(#17191d, #17191d) 10px 22px / 46px 6px no-repeat, linear-gradient(rgba(23, 25, 29, 0.2), rgba(23, 25, 29, 0.2)) 10px 36px / 92px 4px no-repeat, linear-gradient(rgba(23, 25, 29, 0.2), rgba(23, 25, 29, 0.2)) 10px 46px / 92px 4px no-repeat, linear-gradient(rgba(23, 25, 29, 0.2), rgba(23, 25, 29, 0.2)) 10px 56px / 58px 4px no-repeat, #f4f5f7; }
.rm-sky { background: linear-gradient(#25282e 0 10px, transparent 10px), linear-gradient(#5aa9e6, #a8d4f2 70%, #e9f1e4); }
/* The pictures of 1.0.6. The Apps icon: nine small tiles on blue, as the app draws it. */
/* The Apps icon is Launchpad's own picture (the app's `dock/assets/launchpad.png`), drawn whole as in the dock. */
.tile.rm-apps { background: url(/assets/launchpad-128.png) center / 100% 100% no-repeat; box-shadow: none; }
/* Keys that are pressed, under the picture; a key's name in a row of Settings (several lie on each other and take turns). */
.rm-keys { position: absolute; left: 0; right: 0; top: 266px; display: flex; justify-content: center; gap: 8px; color: var(--text); }
.rm-keys .rm-btn { background: rgba(36, 38, 43, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.rm-keys .rm-btn.on { background: rgba(120, 124, 134, 0.96); }
.rm-key { display: grid; justify-items: end; }
.rm-key > * { grid-area: 1 / 1; padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); font-size: 12px; white-space: nowrap; }
/* A clear or a solid bar and dock: a small desktop whose two plates follow --v (0 clear, 0.5 glass, 1 solid). */
.rm-scr {
  position: absolute; left: 266px; top: 56px; width: 236px; height: 150px; border-radius: 9px; overflow: hidden;
  background: #0c0d0f url(/assets/wallpaper-coast-1440.jpg) center / cover no-repeat;
  box-shadow: 0 0 0 4px #121316, 0 0 0 5px rgba(255, 255, 255, 0.16), 0 14px 30px rgba(20, 10, 40, 0.35);
}
.rm-scr-bar { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: flex-end; align-items: center; gap: 5px; height: 13px; padding: 0 7px; background: rgba(28, 30, 36, calc(var(--v, 0.5) * 0.96)); }
.rm-scr-bar i { width: 9px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.9); }
.rm-scr-bar i:last-child { width: 22px; }
.rm-scr-dock { position: absolute; left: 50%; bottom: 8px; display: flex; gap: 5px; padding: 5px 7px; border-radius: 9px; transform: translateX(-50%); background: rgba(28, 30, 36, calc(var(--v, 0.5) * 0.96)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--v, 0.5) * 0.3)); }
.rm-scr-dock i { width: 20px; height: 20px; border-radius: 23%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.rm-scr-dock .c1 { background: linear-gradient(#5db2ff, #1f6fe0); } .rm-scr-dock .c2 { background: linear-gradient(#44d6c4, #0f8f89); }
.rm-scr-dock .c3 { background: linear-gradient(#ffe38a, #f4b73a); } .rm-scr-dock .c4 { background: linear-gradient(#ff7a9a, #e2335a); }
.rm-scr-dock .c5 { background: linear-gradient(#c9ced6, #858d99); }
/* A dock that stays out: the window comes down onto it (--v) and the dock slides away for it. */
.rm-win.rm-cov { translate: 0 calc(96px * var(--v, 0)); background: #16181b; z-index: 2; }
.rm-cov .rm-mon-body { padding: 14px 16px; }
/* Gaps around maximized windows: from its own place to the screen less 8 px on every side, under the menu bar, over the dock. */
.rm-win.rm-gap {
  left: calc(120px - 112px * var(--v, 0)); top: calc(70px - 32px * var(--v, 0));
  width: calc(260px + 244px * var(--v, 0)); height: calc(140px + 60px * var(--v, 0)); background: #16181b; z-index: 2;
}
.rm-gap .rm-mon-body { padding: 14px 16px; }
.rm-dock.rm-gap-dock { left: 98px; z-index: 3; }
.rm-duck { transition: transform 520ms var(--ease), opacity 320ms; }
.rm-duck.on { transform: translateY(76px); opacity: 0; }
/* A video in Quick Look: the sun crosses the picture as the line under it fills (--v). */
.rm-ql { background: #16181b; z-index: 2; transform-origin: 50% 50%; }
.rm-ql .rm-win-body { height: calc(100% - 26px - 28px); overflow: hidden; }
.rm-ql .rm-win-body svg { translate: calc(-84px + 168px * var(--v, 0)) 0; }
.rm-ql .rm-slider { margin: 12px 14px; }
.rm-picked { background: var(--accent) !important; opacity: 0.9; }
.rm-win {
  position: absolute; left: 96px; top: 42px; width: 328px; height: 196px; border-radius: 9px; overflow: hidden; transform-origin: 48% 100%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 14px 32px rgba(0, 20, 40, 0.42);
}
.live .rm-win.rm-pop:not(.on) { transform: translateY(20px) scale(0.5); }
.rm-win-title { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 10px 0 12px; background: #25282e; color: #f2f2f3; font-size: 12px; font-weight: 500; }
.rm-win-title span { display: flex; align-items: center; gap: 12px; }
.rm-win-title i { width: 8px; height: 1.5px; background: rgba(242, 242, 243, 0.55); }
.rm-win-title i:nth-child(2) { height: 8px; background: none; box-shadow: inset 0 0 0 1.5px rgba(242, 242, 243, 0.55); border-radius: 1px; }
.rm-win-title i:nth-child(3) { width: 10px; transform: rotate(45deg); }
.rm-win-title i:nth-child(3)::after { content: ""; display: block; width: 10px; height: 1.5px; background: inherit; transform: rotate(90deg); }
.rm-win-body { display: flex; align-items: center; justify-content: center; gap: 12px; height: calc(100% - 26px); color: #fff; }
.rm-win-body.rm-sky { background: linear-gradient(#5aa9e6, #a8d4f2 70%, #e9f1e4); }
.rm-win-body svg { width: 54px; height: 54px; stroke-width: 1.3; }
.rm-win-body b { font: 300 58px/1 var(--font-display); }

/* Hardware readings: a ring for each part (its load inside, --v on the ring's own piece), what it
   is, its temperature; then the fans. */
.rm-hw { right: 10px; top: 36px; width: 262px; padding-bottom: 12px; }
.rm-hw-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; height: 48px; font-variant-numeric: tabular-nums; }
.rm-hw-row > span > b { display: block; }
.rm-hw-row small { color: var(--charcoal-2); font-size: 11.5px; }
.rm-hw-row small span { display: inline; }
.rm-ring { position: relative; display: grid; place-items: center; width: 38px; height: 38px; }
.rm-ring i {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(360deg * var(--v, 0)), rgba(23, 25, 29, 0.14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px));
}
.rm-ring b { font-size: 10.5px; font-weight: 600; }
.rm-hw .sec { height: 24px; }
.rm-from { margin-left: auto; font-weight: 400; font-size: 11.5px; }
.rm-hw-fan { display: flex; justify-content: space-between; height: 24px; align-items: center; font-variant-numeric: tabular-nums; }

/* Own icons in the dock: the user's picture over an app's own icon. */
.rm-dock .tile > .rm-own { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; box-shadow: inherit; transition: opacity 320ms; }
.rm-own svg { width: 62%; height: 62%; stroke-width: 1.7; }
.rm-o1 { background: linear-gradient(160deg, #ffc35a, #ff7a3d 55%, #d93a6a); }
.rm-o2 { background: linear-gradient(160deg, #2b3a7a, #151a3a); color: #ffe9a8; }

/* A switch for every part of Control Center: a part that is switched off closes up. */
.rm-parts { width: 246px; padding-bottom: 12px; }
.rm-part { overflow: hidden; transition: height 340ms var(--ease), opacity 240ms; }
.live .rm-part[data-at]:not(.on) { height: 0 !important; opacity: 0; }
.rm-part-row { display: flex; align-items: center; gap: 12px; height: 46px; }
.rm-part-row b { display: block; }
.rm-part-row small { color: var(--charcoal-2); font-size: 11.5px; }
.c-hw { background: linear-gradient(#35bec9, #1fa8b4); }

/* Skins for Control Center (Roadmap, "skins"): a small picture of each skin to pick in Settings,
   and the panel in each of them. "On" in Aurora is ink (.ink); Deck and Classic keep the accent. */
.rm-sk-picks { display: flex; gap: 8px; padding: 10px; }
.rm-sk-pick { flex: 1; display: grid; justify-items: center; gap: 7px; padding: 7px 4px 6px; border-radius: 9px; font-size: 12px; font-weight: 500; color: var(--secondary); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow 180ms, color 180ms; }
.rm-sk-pick.on { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent); }
.rm-sk-pick i { position: relative; display: block; width: 62px; height: 44px; }
.rm-sk-pick i::before { content: ""; position: absolute; inset: 0; margin: auto; border-radius: 6px; background: rgba(255, 255, 255, 0.16); }
.rm-sk-pick i::after { content: ""; position: absolute; border-radius: 3px; background: rgba(255, 255, 255, 0.5); }
.rm-sk-pick i.a::before { width: 62px; height: 32px; }
.rm-sk-pick i.a::after { left: 5px; top: 11px; width: 16px; height: 16px; }
.rm-sk-pick i.d::before { width: 30px; height: 44px; }
.rm-sk-pick i.d::after { left: 21px; top: 6px; width: 20px; height: 8px; }
.rm-sk-pick i.c::before { width: 50px; height: 40px; }
.rm-sk-pick i.c::after { left: 12px; top: 9px; width: 38px; height: 5px; box-shadow: 0 10px rgba(255, 255, 255, 0.5); }
.rm-sk .circle.ink { background: var(--charcoal); color: #fff; }
.rm-sk .circle.big { width: 34px; height: 34px; }
.rm-sk .circle svg .f { fill: currentColor; stroke: none; }
.rm-sk-switches { display: flex; justify-content: space-between; }
.rm-sk-tabs { display: flex; align-items: center; gap: 12px; height: 24px; font: 600 15px/1 var(--font-display); }
.rm-sk-tabs span { opacity: 0.45; }
.vg.rm-sk-classic { width: 280px; padding-bottom: 16px; }
.rm-sk-classic .rm-sk-switches { margin-top: 16px; padding: 0 6px; }
.vg.rm-sk-aurora { display: flex; gap: 16px; width: 456px; padding: 16px; border-radius: 22px; }
.rm-sk-stage { width: 112px; flex: none; }
.rm-sk-stage b { display: block; margin-top: 9px; white-space: nowrap; }
.rm-sk-stage small { color: var(--charcoal-2); font-size: 11.5px; }
.rm-sk-cover, .rm-sk-now i { display: block; background: linear-gradient(135deg, #5b3fd9, #e85d8a); }
.rm-sk-cover { width: 112px; height: 112px; border-radius: 16px; }
.rm-sk-keys { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 9px; }
.rm-sk-main { flex: 1; min-width: 0; display: grid; align-content: space-between; gap: 9px; }
.rm-sk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rm-sk-capsule { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px; border-radius: 20px; background: rgba(23, 25, 29, 0.08); box-shadow: inset 0 1px rgba(255, 255, 255, 0.75); }
.rm-sk-capsule b { display: block; line-height: 1.2; }
.rm-sk-capsule small { color: var(--charcoal-2); font-size: 11px; line-height: 1.2; }
.rm-sk-aurora .rm-sk-switches { padding: 0 8px; }
.vg.rm-sk-deck { display: grid; gap: 9px; width: 228px; padding: 12px; border-radius: 22px; }
.rm-sk-tile { border-radius: 14px; background: rgba(23, 25, 29, 0.08); }
.rm-sk-now { display: flex; align-items: center; gap: 10px; padding: 7px; }
.rm-sk-now i { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.rm-sk-now b { display: block; line-height: 1.2; }
.rm-sk-now small { color: var(--charcoal-2); font-size: 11px; }
.rm-sk-mid { display: grid; grid-template-columns: 1fr 40px 40px; grid-template-rows: 44px 44px; gap: 8px; }
.rm-sk-radio { display: flex; align-items: center; gap: 8px; padding: 0 8px; grid-column: 1; }
.rm-sk-up { position: relative; grid-row: 1 / 3; overflow: hidden; border-radius: 14px; background: rgba(23, 25, 29, 0.10); }
.rm-sk-up:nth-of-type(2) { grid-column: 2; }
.rm-sk-up:nth-of-type(3) { grid-column: 3; }
.rm-sk-up i { position: absolute; inset: auto 0 0; height: calc(100% * var(--v, 0.5)); background: rgba(255, 255, 255, 0.96); }
.rm-sk-up svg { position: absolute; left: 50%; bottom: 8px; width: 14px; height: 14px; margin-left: -7px; color: #5a5b61; stroke-width: 1.5; }
.rm-sk-deck .rm-sk-switches { padding: 0 6px; }


/* The dock and an app that asks for attention: the dock out of sight until it is called, the icon
   that hops over its orange dot. */
.rm-hide { transition: transform 520ms var(--ease), opacity 320ms; }
.live .rm-hide:not(.on) { transform: translateY(76px); opacity: 0; }
.rm-dock .rm-ask.on::after { background: #f67400; opacity: 1; width: 4px; height: 4px; margin-left: -2px; }
.rm-ask.on { animation: rm-hop 720ms var(--ease) 5; }
@keyframes rm-hop { 0%, 100% { translate: 0 0; } 42% { translate: 0 -15px; } }
@media (prefers-reduced-motion: reduce) { .rm-ask.on { animation: none; } }

/* What the next update saves: three rows, each a bar that shrinks from the length of the version before (the grey track)
   to the new one (--v) beside its figure. */
.cp-gain { left: 206px; top: 42px; width: 660px; padding: 8px 24px; }
.cp-gain-row { display: grid; grid-template-columns: 150px 1fr 88px; align-items: center; gap: 18px; height: 70px; }
.cp-gain-row + .cp-gain-row { box-shadow: 0 -1px rgba(255, 255, 255, 0.07); }
.cp-gain-row > span { font-weight: 600; font-size: 15px; }
.cp-gain-row > span small { margin-top: 3px; font-weight: 400; font-variant-numeric: tabular-nums; }
.cp-gain-row > i { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.14); }
.cp-gain-row > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(100% * var(--v, 1)); border-radius: inherit; background: var(--accent); }
.cp-gain-row > b { text-align: right; font: 600 18px/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The menu bar as a ceiling: a window that opened with its title under the bar comes down to it (--v). */
.rm-win.rm-drop { top: 28px; translate: 0 calc(-21px * (1 - var(--v, 0))); background: #16181b; transform-origin: 50% 0; }
.live .rm-win.rm-drop.rm-pop:not(.on) { transform: scale(0.94); }
.rm-drop .rm-mon-body { padding: 14px 16px; }

/* Subscribed calendars. */
.rm-field { display: flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); font-size: 12.5px; white-space: nowrap; }
.rm-field .caret { width: 1.5px; height: 16px; margin-left: 2px; background: var(--text); }
.rm-right { display: flex; justify-content: flex-end; padding-top: 10px; }
.rm-cal { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center; margin-top: 12px; padding: 10px 2px 0 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rm-cal i { width: 8px; height: 8px; border-radius: 50%; }
.rm-cal b { display: block; font-weight: 600; }
.rm-remind { gap: 5px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; font-size: 11.5px; }
.rm-remind svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rm-set .sw { background: rgba(255, 255, 255, 0.18); }
.rm-set .sw.on { background: var(--accent); }
.rm-today { width: 240px; }
.rm-today .ev span b { display: block; font-weight: 500; }
.rm-day { height: 22px; font-weight: 600; color: var(--charcoal-2); }

/* Text size and contrast: the panel's text grows with --v; with "on" it takes solid colours. */
.rm-lab { padding: 2px 4px 0; }
.rm-slider { position: relative; height: 4px; margin: 14px 12px 18px; border-radius: 2px; background: linear-gradient(to right, var(--text) calc(100% * var(--v, 0)), rgba(255, 255, 255, 0.16) 0); }
.rm-slider i { position: absolute; top: -6px; left: calc(100% * var(--v, 0) - 8px); width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.rm-switch { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 0 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rm-acc-plate { width: 246px; padding-bottom: 16px; font-size: calc(13px + 3px * var(--v, 0)); transition: background-color 260ms, color 260ms, box-shadow 260ms; }
.rm-acc-plate .rm-title { height: 2.4em; font-size: 1.23em; }
.rm-acc-plate .cc-tile { height: auto; margin: 0; padding: 0.42em 0; }
.rm-acc-plate .cc-tile-text b { font-size: 1.15em; }
.rm-acc-plate small { font-size: 0.92em; }
.rm-acc-plate .cc-sl-head { height: 2.2em; }
.rm-acc-plate .circle, .rm-acc-plate .cap, .rm-acc-plate .cap > i { transition: background-color 260ms, color 260ms, box-shadow 260ms; }
.rm-acc-plate.on { background: #000; color: #fff; box-shadow: 0 0 0 2px #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.rm-acc-plate.on small, .rm-acc-plate.on .val { color: #fff; }
.rm-acc-plate.on .circle.on { background: #1aebff; color: #000; }
.rm-acc-plate.on .cap { background: #000; box-shadow: inset 0 0 0 1px #fff; }
.rm-acc-plate.on .cap > i { background: #1aebff; box-shadow: none; }
.rm-acc-plate.on .cap > svg { color: #000; }

@media (max-width: 640px) {
  .rm-intro { padding-top: 64px; }
  .rm-intro p { font-size: 17px; }
  .rm-intro + .rm-group { padding-top: 72px; }
}

/* ---------------------------------------------------------------- comparison pages (alternatives, *-alternative) */

.compare .updated { font-size: 17px; color: var(--secondary); }
.compare h2 { scroll-margin-top: 50px; }
.cmp-wrap { margin: 18px 0 8px; overflow-x: auto; }
.cmp { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.cmp th, .cmp td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; }
.cmp thead th { font: 600 17px/1.3 var(--font-display); color: var(--text); }
.cmp tbody tr { border-top: 1px solid var(--hairline); }
.cmp tbody th { width: 26%; font-weight: 500; color: var(--tertiary); }
.cmp td { width: 37%; color: var(--secondary); }
.cmp td:last-child { padding-right: 0; }
.cmp th + td { color: var(--text); }
.page .store { margin-top: 6px; background: var(--text); color: var(--charcoal); }
.page .store:hover { background: #fff; }
.cmp-note { margin-top: 48px; font-size: 14px; color: var(--tertiary) !important; }
/* On a phone three columns do not fit: each row's label goes above its two answers. */
@media (max-width: 600px) {
  .cmp-wrap { overflow-x: visible; }
  .cmp, .cmp thead, .cmp tbody { display: block; min-width: 0; }
  .cmp tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .cmp thead td { display: none; }
  .cmp th, .cmp tbody td { width: auto; padding-right: 0; }
  .cmp tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 0; font-size: 14px; }
  .cmp tbody td { padding-top: 4px; }
}

/* Pictures on the comparison pages (site/compare/, played like the Roadmap's). */
.compare .rm-art { margin: 28px 0 12px; }
.compare h1 + .updated + .rm-art { margin-top: 36px; }
.cp-dock { left: 0; right: 0; width: fit-content; margin: 0 auto; align-items: flex-end; }
.cp-mag .tile { width: calc(40px + 20px * var(--v, 0)); height: calc(40px + 20px * var(--v, 0)); }
.cp-size .tile { width: calc(28px + 28px * var(--v, 0.3)); height: calc(28px + 28px * var(--v, 0.3)); }
.cp-search.palette { top: 40px; }
.cp-search .p-results { padding-bottom: 8px; }
.cp-cc { right: 10px; top: 36px; width: 230px; }
.cp-clock { transition: background-color 160ms; }
.cp-clock.on { background: rgba(23, 25, 29, 0.14); }
.cp-range { display: block; width: 130px; margin: 0 8px 0 0; }

/* The comparison pages' own pictures: arriving (Seelen UI page), the dock tuned (same page), Search
   and the calendar and the menu bar's switches (MyDockFinder page), the look (overview). */
.cp-set .gs-row { min-height: 40px; }
.cp-taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36px; display: flex; align-items: center; justify-content: center;
  background: rgba(32, 32, 36, 0.84); box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); transition: transform 520ms var(--ease);
}
.cp-taskbar.on { transform: translateY(40px); }
.cp-taskbar .tb-apps > i { width: 22px; height: 22px; margin: 0 2px; }
.cp-taskbar .tb-start { grid-template-columns: 7px 7px; margin: 0 6px; }
.cp-taskbar .tb-start i { width: 7px; height: 7px; }
.cp-drop { position: absolute; inset: 0 0 auto 0; height: 28px; z-index: 3; transition: transform 520ms var(--ease), opacity 320ms; }
.live .cp-drop:not(.on) { transform: translateY(-30px); opacity: 0; }
.cp-bar { transition: background-color 520ms var(--ease), color 520ms var(--ease), box-shadow 520ms; }
.rm-stage .cp-bar.on { background: rgba(37, 40, 46, 0.95); color: #f2f2f3; box-shadow: inset 0 -1px rgba(242, 242, 243, 0.14); }
.cp-menus { display: flex; align-items: center; }
.cp-rise { transition: transform 520ms var(--ease), opacity 420ms; }
.live .cp-rise:not(.on) { transform: translateY(76px); opacity: 0; }
.cp-win {
  position: absolute; z-index: 1; left: calc(130px * (1 - var(--v, 0))); top: calc(72px - 44px * var(--v, 0));
  width: calc(260px + 260px * var(--v, 0)); height: calc(150px + 134px * var(--v, 0)); border-radius: calc(8px * (1 - var(--v, 0)));
  overflow: hidden; background: #16181b; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 10px 24px rgba(0, 20, 40, 0.4);
}
.rm-set.cp-get { left: 130px; top: 84px; width: 260px; padding: 14px; z-index: 4; }
.cp-get-row { display: flex; align-items: center; gap: 12px; }
.cp-get-row b { display: block; font: 600 16px/1.3 var(--font-display); }
.rm-btn.cp-get-btn { display: grid; height: 30px; margin-top: 14px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }
.rm-btn.cp-get-btn.on { background: #2466c4; }
.cp-amp { --amp: 9px; gap: calc(4px + 12px * var(--v, 0.25)); }
.cp-amp.on { --amp: 28px; }
.cp-amp .tile { width: calc(40px + var(--amp) * var(--v, 0)); height: calc(40px + var(--amp) * var(--v, 0)); }
.cp-today { right: 10px; top: 36px; }
.cp-today .vg-agenda-head { height: 26px; }
.cp-date { gap: 0; font-variant-numeric: tabular-nums; }
.cp-fold { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 110px; transition: max-width 320ms var(--ease), opacity 220ms; }
.live .cp-fold:not(.on) { max-width: 0; opacity: 0; }
.cp-sw { display: flex; gap: 10px; padding-right: 4px; }
.cp-sw i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); transition: box-shadow 160ms; }
.cp-sw i.on { box-shadow: 0 0 0 2px #2b2d32, 0 0 0 4px var(--c); }
.cp-acc1.on { --accent: #e2335a; }
.cp-acc2.on { --accent: #2ba150; }
.cp-yours .rm-slider { background: linear-gradient(to right, var(--accent) calc(100% * var(--v, 0)), rgba(255, 255, 255, 0.16) 0); transition: none; }
.cp-yours .rm-dock .run::after { width: 4px; height: 4px; margin-left: -2px; background: var(--accent); opacity: 1; transition: background-color 200ms; }
.cp-win-body { display: flex; height: calc(100% - 22px); }
.cp-side { display: grid; gap: 8px; align-content: start; width: 26%; padding: 12px 10px; background: #1d2024; }
.cp-side b { height: 18px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); }
.cp-side b:first-child { background: rgba(47, 122, 229, 0.35); }
.cp-doc { flex: 1; min-width: 0; padding: 16px 20px; }
.cp-doc h5 { margin: 0 0 12px; font: 600 15px/1.3 var(--font-display); color: #f2f2f3; white-space: nowrap; }
.cp-doc p { height: 7px; margin: 0 0 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); }
.cp-doc p.short { width: 62%; }

/* A picture between the paragraphs of a page (the comparison pages). */
.page .rm-art { margin: 28px 0 12px; }

/* ---------------------------------------------------------------- blog (/blog, /blog/<slug>: drawn by src/worker.js) */
/* Modelled on Apple Newsroom: the newest story wide, the others a grid of tiles, and on a post a
   narrow column of text under a picture as wide as the page. Text stands straight on the page;
   the only plate is the glass one of the closing band, the same as on What's new and Roadmap. */

.blog, .article { max-width: 1168px; margin: 0 auto; padding: 116px var(--gutter) 0; }
.blog a, .article a { color: inherit; }

/* A picture with its own light behind it: the wallpaper it stands on, blurred. */
.blog-pic { position: relative; isolation: isolate; }
.blog-pic::before {
  content: ""; position: absolute; inset: 10% 4% -6%; z-index: -1; border-radius: 40px;
  background: var(--wall) center / cover no-repeat; filter: blur(56px) saturate(140%); opacity: 0.42;
  transition: opacity 400ms var(--ease);
}
.blog-pic .rm-art { margin: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.35); }

.blog-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0; font-size: 14px; color: var(--tertiary); font-variant-numeric: tabular-nums; }
.blog-meta span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 3px; border-radius: 50%; background: currentColor; }
.blog-eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: #8fbcff; }
.blog-desc { margin: 0; color: var(--secondary); }

/* the list */
.blog-head { margin-bottom: 48px; }
.blog-head h1 { margin: 0 0 14px -3px; font: 600 clamp(48px, 7vw, 76px)/1 var(--font-display); letter-spacing: -0.035em; }
.blog-head p { margin: 0; font-size: clamp(18px, 2vw, 21px); color: var(--secondary); }

.blog-lead, .blog-card { position: relative; }
.blog-lead { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: 56px; }
.blog-lead + .blog-lead { margin-top: 104px; }
.blog-lead.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.blog-lead.flip .blog-pic { order: 2; }
.blog-lead h2 { margin: 0 0 16px; font: 600 clamp(28px, 3.2vw, 40px)/1.12 var(--font-display); letter-spacing: -0.022em; text-wrap: balance; }
.blog-lead .blog-desc { margin-bottom: 22px; font-size: 19px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 32px; margin-top: 112px; }
.blog-card .blog-pic::before { opacity: 0; }
.blog-card .blog-pic .rm-art { border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.blog-card .blog-copy { padding: 20px 2px 0; }
.blog-card h3 { margin: 0 0 8px; font: 600 21px/1.25 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.blog-card .blog-desc { margin-bottom: 14px; font-size: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* The whole entry is the link: the title's link is stretched over it. */
.blog-lead h2 a, .blog-card h3 a { text-decoration: none; }
.blog-lead h2 a::after, .blog-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-lead h2 a:focus-visible, .blog-card h3 a:focus-visible { outline: none; }
.blog-lead:has(a:focus-visible), .blog-card:has(a:focus-visible) { outline: 2px solid #8fbcff; outline-offset: 10px; border-radius: 16px; }
.blog-pic .rm-art { transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
@media (hover: hover) {
  .blog-lead:hover .rm-art, .blog-card:hover .rm-art { transform: translateY(-4px); }
  .blog-card:hover .blog-pic::before { opacity: 0.42; }
  .blog-lead:hover .blog-pic::before { opacity: 0.6; }
  .blog-lead:hover h2 a, .blog-card:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--tertiary); text-underline-offset: 5px; }
}

/* a post */
.art-head { max-width: 820px; }
.art-head.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 60px; max-width: none; }
.art-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 20px -5px; font-size: 15px; font-weight: 600; color: var(--secondary) !important; text-decoration: none; transition: color 160ms; }
.art-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.art-back:hover { color: var(--text) !important; }
.art-back:hover svg { transform: translateX(-2px); }
.art-head h1 { margin: 0 0 20px; font: 600 clamp(34px, 3.9vw, 50px)/1.07 var(--font-display); letter-spacing: -0.028em; text-wrap: balance; }
.art-dek { margin: 0 0 22px; font-size: 19px; line-height: 1.5; color: var(--secondary); }
.art-head:not(.split) h1 { font-size: clamp(36px, 5.6vw, 60px); }
.art-hero .rm-art { border-radius: 22px; }

.art-cols { display: grid; grid-template-columns: minmax(0, 700px) 252px; justify-content: space-between; gap: 64px; margin-top: 72px; }
.art-body { font-size: 18px; line-height: 1.6; }
.art-body > :first-child { margin-top: 0; }
.art-body p, .art-body li { color: rgba(242, 242, 243, 0.74); }
.art-body p { margin: 0 0 20px; }
.art-body strong { color: var(--text); font-weight: 600; }
.art-body a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--tertiary); text-underline-offset: 3px; color: var(--text); }
.art-body a:hover { text-decoration-color: currentColor; }
.art-body h2 { margin: 64px 0 18px; font: 600 clamp(25px, 3vw, 30px)/1.2 var(--font-display); letter-spacing: -0.018em; color: var(--text); scroll-margin-top: 72px; text-wrap: balance; }
.art-body h3 { margin: 36px 0 10px; font: 600 20px/1.3 var(--font-display); color: var(--text); }
.art-body ul { margin: 0 0 20px; padding-left: 22px; }
.art-body ul li { margin: 8px 0; padding-left: 4px; }
.art-body ul li::marker { color: var(--tertiary); }
.art-body code { padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.09); font: 0.88em ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text); }
.art-body .rm-art { margin: 36px 0; border-radius: 18px; }
/* Steps: a number in a disc, the bold opener as the step's own line. */
.art-body ol { counter-reset: step; list-style: none; margin: 26px 0 30px; padding: 0; }
.art-body ol > li { counter-increment: step; position: relative; margin: 0 0 22px; padding-left: 54px; min-height: 34px; }
.art-body ol > li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font: 600 15px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text);
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.art-body ol > li > .step { display: block; margin-bottom: 2px; font: 600 19px/1.5 var(--font-display); }

/* beside the article: its sections, and the app */
.art-rail { align-self: start; position: sticky; top: 76px; font-size: 14px; }
.art-rail nav p { margin: 0 0 12px; font-weight: 600; color: var(--text); }
.art-rail ol { list-style: none; margin: 0; padding: 0; }
.art-rail li { margin: 0 0 10px; line-height: 1.4; }
.art-rail nav a { color: var(--tertiary); text-decoration: none; transition: color 160ms; }
.art-rail nav a:hover { color: var(--secondary); }
.art-rail nav a.on { color: var(--text); }
.art-get { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.art-rail > .art-get:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.art-get img { width: 56px; height: 56px; margin: 0 0 10px -4px; }
.art-get p { margin: 0 0 16px; color: var(--secondary); line-height: 1.45; }
.art-get strong { display: block; margin-bottom: 2px; font: 600 17px/1.3 var(--font-display); color: var(--text); }
.art-get .store { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; background: var(--text); color: var(--charcoal) !important; white-space: nowrap; }
.art-get .store:hover { background: #fff; }

/* the closing band: the post's wallpaper, the glass plate of the other pages */
.art-cta {
  display: grid; place-items: center; min-height: 460px; margin-top: 112px; padding: 56px var(--gutter); border-radius: 28px; overflow: hidden;
  background: var(--wall) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.art-cta .cl-hero-glass { width: min(480px, 100%); }
.art-cta .cl-hero-glass img { width: 80px; height: 80px; }
.art-cta h2 { margin: 0; font: 600 clamp(30px, 4.4vw, 38px)/1.1 var(--font-display); letter-spacing: -0.025em; }
.art-cta .cl-hero-glass p a { color: var(--charcoal); text-decoration-color: var(--charcoal-3); text-underline-offset: 3px; }
.art-cta .store { margin-top: 22px; color: #fff !important; }
.art-cta .cl-hero-glass .note { margin-top: 14px; font-size: 13.5px; color: var(--charcoal-2); }

.art-more { margin-top: 112px; }
.art-more > h2 { margin: 0; font: 600 clamp(28px, 3.6vw, 36px)/1.1 var(--font-display); letter-spacing: -0.022em; }
.art-more .blog-grid { margin-top: 36px; }

/* a draft's own line, above the post: only its link shows it */
.art-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 36px; padding-bottom: 20px; border-bottom: 1px solid var(--hairline); }
.art-draft p { margin: 0; flex: 1; min-width: 200px; font-size: 15px; color: var(--secondary); }
.art-draft button { height: 36px; padding: 0 16px; border-radius: 9px; background: var(--text); color: var(--charcoal); font: 600 14px var(--font); cursor: pointer; transition: transform 180ms var(--ease), background-color 180ms; }
.art-draft button:hover { background: #fff; }
.art-draft button:active { transform: scale(0.97); }

@media (max-width: 1000px) {
  .art-head.split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .art-title { max-width: 700px; }
  .art-cols { display: block; margin-top: 56px; }
  .art-rail { display: none; }
  .art-body { max-width: 700px; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }
  .blog-lead, .blog-lead.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .blog-lead.flip .blog-pic { order: 0; }
  .blog-lead + .blog-lead { margin-top: 72px; }
}
@media (max-width: 640px) {
  .blog, .article { padding-top: 84px; }
  .blog-head { margin-bottom: 32px; }
  .blog-head p { font-size: 17px; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 72px; }
  .blog-pic .rm-art, .art-hero .rm-art { border-radius: 14px; }
  .blog-pic::before { filter: blur(36px); }
  .art-cols { margin-top: 44px; }
  .art-body { font-size: 17px; }
  .art-body h2 { margin-top: 48px; }
  .art-body ol > li { padding-left: 46px; }
  .art-body ol > li::before { width: 30px; height: 30px; font-size: 14px; }
  .art-cta { min-height: 0; margin-top: 80px; padding: 28px 14px; border-radius: 20px; }
  .art-more { margin-top: 80px; }
}
/* A menu of the bar, open in a picture: its name lit like the bar's pills. */
.rm-stage .mbar .m { display: inline-flex; align-items: center; height: 22px; border-radius: 6px; transition: background-color 160ms; }
.rm-stage .mbar .m.on { background: rgba(23, 25, 29, 0.14); }
.cp-taskbar .cp-tb-time { position: absolute; right: 12px; font-size: 11px; font-variant-numeric: tabular-nums; color: #fff; }
.cp-win.still { --v: 0; }

/* Three levels of glass: --v is the most a surface may be tinted (1 Recommended, 0.4 Medium, 0.06 Glassy);
   each surface keeps its own tint up to that, and text turns light where little tint is left. */
.rm-gl .mbar { color: #fff; background: rgba(240, 244, 248, min(0.2, var(--v, 1))); box-shadow: inset 0 -1px rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
.rm-gl .rm-dock { left: 440px; background: rgba(214, 226, 240, min(0.46, var(--v, 1))); }
.rm-gl .vg, .rm-gl .gm.rm-menu {
  color: color-mix(in srgb, #fff clamp(0%, calc((0.62 - var(--v, 1)) * 500%), 100%), var(--charcoal));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30), 0 10px 26px rgba(10, 30, 50, 0.24);
}
.rm-gl .vg { position: absolute; left: 776px; top: 42px; width: 250px; padding-bottom: 16px; background: rgba(240, 244, 248, min(0.86, var(--v, 1))); }
.rm-gl .gm.rm-menu { background: rgba(240, 244, 248, min(0.94, var(--v, 1))); }
.rm-gl .gm.rm-menu button { color: inherit; }
.rm-gl .gm.rm-menu i { background: currentColor; opacity: 0.16; }
.rm-gl .vg .val { color: inherit; opacity: 0.7; }
/* The same picture at the comparison pages' 520 px: the dock centred, Control Center beside Settings. */
.rm-gl.cp-gl .rm-dock { left: 108px; }
.rm-gl.cp-gl .vg { left: 345px; top: 46px; width: 159px; }
.rm-gl .cap { background: rgba(127, 132, 140, 0.30); }
.rm-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 28px; margin: 8px 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.10); font-size: 12px; }
.rm-seg span { position: relative; z-index: 1; display: grid; place-items: center; white-space: nowrap; }
.rm-seg i { position: absolute; top: 2px; bottom: 2px; left: calc(2px + (100% - 4px) / 3 * 2 * var(--v, 0)); width: calc((100% - 4px) / 3); border-radius: 6px; background: rgba(255, 255, 255, 0.24); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

/* Glassline's own options in Search: the option found, then Settings open on it, lit; --v is the icon size. */
.rm-fnd .rm-pal .p-row small { white-space: nowrap; }
.rm-fnd .rm-set { left: 110px; top: 58px; width: 300px; }
.rm-fnd-row { margin: 0 -4px; padding: 4px 4px 0; border-radius: 8px; transition: background-color 420ms; }
.rm-fnd-row.on { background: color-mix(in srgb, var(--accent) 34%, transparent); }
.rm-fnd .rm-dock { left: 50%; translate: -50% 0; }
.rm-fnd .rm-dock .tile { width: calc(28px + 16px * var(--v, 0.4)); height: calc(28px + 16px * var(--v, 0.4)); }

/* Folders in the dock: a folder Glassline keeps itself; a folder inside it opens in the same panel. */
.rm-fo { position: absolute; left: 204px; top: 61px; width: 256px; height: 177px; transform-origin: 128px 100%; }
.rm-fo-plate {
  position: absolute; inset: auto 0 0 0; height: 177px; overflow: hidden; border-radius: 16px; color: var(--charcoal); transition: height 300ms var(--ease);
  background: rgba(240, 244, 248, 0.86); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.12), 0 10px 26px rgba(10, 30, 50, 0.24);
}
.rm-fo-plate.on { height: 115px; }
.rm-fo-view { position: absolute; inset: 0 0 auto 0; transition: opacity 200ms, transform 300ms var(--ease); }
.live .rm-fo-view:not(.on) { opacity: 0; transform: translateX(16px); }
.live .rm-fo-view.rm-fo-root:not(.on) { transform: translateX(-16px); }
.rm-fo-head { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; font: 600 13.5px/1 var(--font-display); border-bottom: 1px solid rgba(23, 25, 29, 0.10); white-space: nowrap; }
.rm-fo-head small { margin-left: auto; font: 400 10.5px/1 var(--font); color: var(--charcoal-3); }
.rm-fo-head .tile { width: 18px; height: 18px; border-radius: 5px; }
.rm-fo-back { display: grid; place-items: center; width: 22px; height: 22px; margin: 0 -2px 0 -7px; border-radius: 6px; }
.rm-fo-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rm-fo-back.on, .rm-fo-cell.on { background: rgba(23, 25, 29, 0.09); }
.rm-fo-grid { display: grid; grid-template-columns: repeat(4, 58px); padding: 8px 12px 0; }
.rm-fo-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; height: 62px; padding-top: 6px; border-radius: 9px; font-size: 10.5px; line-height: 1; white-space: nowrap; }
.rm-fo-cell .tile { width: 34px; height: 34px; }
.rm-fo-g1 { background: linear-gradient(#ff7a6b, #d92f3d); } .rm-fo-g2 { background: linear-gradient(#7d8bff, #3b3fc4); } .rm-fo-g3 { background: linear-gradient(#ffc95e, #f08a1a); }
.rm-fo-g4 { background: linear-gradient(#5fd68a, #1f9a55); } .rm-fo-g5 { background: linear-gradient(#ff8ad0, #c93a9a); } .rm-fo-g6 { background: linear-gradient(#58d0f0, #1b86c9); }
.rm-fo-b2 { background: linear-gradient(#ffa24d, #e0541a); } .rm-fo-b3 { background: linear-gradient(#5a6170, #262a33); }
.rm-fo-run { position: absolute; left: 50%; bottom: -6px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--charcoal); }
.rm-dock .tile.rm-fo-open { transition: filter 160ms; }
.rm-dock .tile.rm-fo-open.on { filter: brightness(0.82); }

/* The Roadmap's pictures for the update after 1.0.7. Slots: a place in a dock that opens or closes
   with --v (an icon leaves one dock and arrives in another). A flying icon is carried by --v too,
   from where it sat by (--dx, --dy). */
.rm-mon-dock i.cp-slot { flex: none; width: calc(24px * var(--v, 1)); margin-left: calc(-5px * (1 - var(--v, 1))); opacity: var(--v, 1); }
.cp-fly { position: absolute; z-index: 5; width: 24px; height: 24px; scale: 1.15; translate: calc(var(--dx, 0px) * var(--v, 0)) calc(var(--dy, 0px) * var(--v, 0)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 16px rgba(0, 0, 0, 0.34); }
/* The Apps icon moves in the dock: a divider and a place that opens or closes. */
.cp-line { flex: none; align-self: center; width: 1px; height: 34px; background: rgba(23, 25, 29, 0.26); }
.cp-gap { flex: none; display: flex; width: calc(40px * var(--v, 1)); margin-left: calc(-8px * (1 - var(--v, 1))); opacity: var(--v, 1); overflow: hidden; }
.cp-gap > .tile { flex: none; }
/* Bigger icons in the same dock: the plate keeps its width and its height whatever --v is (how far the icons
   have grown, 0 today, 1 the most); the tiles grow and the room between and around them shrinks by as much. */
.rm-dock.cp-fill { box-sizing: border-box; width: 272px; height: 64px; padding: 0; justify-content: center; align-items: center; border-radius: 16px; }
.cp-row { display: flex; align-items: center; gap: calc(12px - 9px * var(--v, 0)); }
.cp-fill .tile { flex: none; width: calc(40px + 10px * var(--v, 0)); height: calc(40px + 10px * var(--v, 0)); }
/* All apps as a grid in Search, and a group of your own in it. */
.cp-ag.p-results { min-height: 0; }
.cp-ag-views { display: grid; height: 176px; }
.cp-ag-views > * { grid-area: 1 / 1; }
.cp-ag-grid { display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; }
.cp-ag-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; height: 86px; padding-top: 8px; border-radius: 10px; font-size: 11.5px; line-height: 1; white-space: nowrap; }
.cp-ag-cell .tile { width: 44px; height: 44px; }
.cp-ag-cell.sel { background: rgba(243, 244, 246, 0.11); }
.cp-grp { display: grid; grid-template-columns: repeat(2, 16px); gap: 3px; place-content: center; width: 44px; height: 44px; border-radius: 23%; background: rgba(243, 244, 246, 0.24); box-shadow: inset 0 0 0 1px rgba(243, 244, 246, 0.3); }
.cp-grp .tile { width: 16px; height: 16px; border-radius: 4px; }
.cp-fly.cp-fly-big { width: 44px; height: 44px; }
.cp-fly.rm-apps { box-shadow: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3)); }
/* A wallpaper for each display: two screens, the choice in Settings. */
.rm-mon.cp-mon { top: 56px; width: 300px; height: 190px; }
.cp-wall { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cp-thumbs { display: flex; gap: 10px; padding: 8px 4px 6px; }
.cp-th { position: relative; flex: none; width: 58px; height: 40px; border-radius: 6px; background-size: cover; background-position: center; }
.cp-th::after { content: ""; position: absolute; inset: -3px; border-radius: 9px; box-shadow: 0 0 0 2px var(--accent); opacity: 0; transition: opacity 160ms; }
.cp-th.on::after { opacity: 1; }
.cp-lab { display: grid; }
.cp-lab > * { grid-area: 1 / 1; }
/* A game fills the screen of the small desktop. */
.cp-game { position: absolute; inset: 0; background: #10131c; }
.cp-game i { position: absolute; display: block; }
.cp-game .moon { left: 150px; top: 24px; width: 28px; height: 28px; border-radius: 50%; background: #e9e4d0; }
.cp-game .hill { left: 0; right: 0; bottom: 0; height: 52px; background: #1b2a2f; }
.cp-cap { position: absolute; left: 266px; top: 218px; width: 236px; text-align: center; font-size: 13px; color: var(--text); }
/* The volume indicator and Quick Look over a bright page and a dark one. */
.cp-page { position: absolute; top: 28px; width: 500px; height: 256px; padding: 22px 26px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 20, 40, 0.35); }
.cp-page.light { background: #f6f7f9; }
.cp-page.dark { background: #121418; }
.cp-page b { display: block; width: 36%; height: 14px; margin-bottom: 18px; border-radius: 7px; background: rgba(255, 255, 255, 0.26); }
.cp-page p { height: 8px; margin: 0 0 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.cp-page.light b { background: rgba(23, 25, 29, 0.20); }
.cp-page.light p { background: rgba(23, 25, 29, 0.12); }
.cp-page p.short { width: 64%; }
.cp-plate {
  position: absolute; z-index: 3; color: #f3f4f6; border-radius: 18px; background: rgba(34, 37, 43, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 26px rgba(0, 0, 0, 0.28);
}
.cp-vol { display: flex; align-items: center; gap: 14px; width: 210px; height: 64px; padding: 0 22px; }
.cp-vol svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cp-vbar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(243, 244, 246, 0.28); }
.cp-vbar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(100% * var(--v, 0.5)); border-radius: inherit; background: #f3f4f6; }
.cp-ql { width: 280px; height: 150px; padding: 16px 20px; }
.cp-ql h5 { margin: 0 0 16px; font: 600 15px/1 var(--font-display); }
.cp-ql p { height: 7px; margin: 0 0 11px; border-radius: 4px; background: rgba(243, 244, 246, 0.42); }
.cp-ql p.short { width: 62%; }

/* The Roadmap's pictures of what is being explored. A screenshot in one drag: the selection grows with --v
   and its shadow dims everything around it (only while the picture plays: without the script nothing is dimmed). */
.cq-sel { position: absolute; z-index: 3; left: 100px; top: 76px; width: calc(230px * var(--v, 0)); height: calc(130px * var(--v, 0)); }
.live .cq-sel { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.92), 0 0 0 1200px rgba(8, 10, 14, 0.46); }
.cq-file {
  position: absolute; z-index: 2; left: 426px; top: 52px; width: 66px; height: 40px; border-radius: 4px;
  background: linear-gradient(#2c3037 0 8px, #16181b 8px); box-shadow: 0 0 0 2px #fff, 0 8px 18px rgba(0, 0, 0, 0.35);
}
.cq-file::before { content: ""; position: absolute; left: 8px; top: 15px; width: 24px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); box-shadow: 0 8px 0 rgba(255, 255, 255, 0.13), 0 15px 0 rgba(255, 255, 255, 0.13); }
.cq-cap { position: absolute; left: 0; right: 0; top: 268px; text-align: center; font-size: 13px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
/* Zooming the whole screen: wallpaper and window grow around the pointer with --v. */
.cq-zoom { position: absolute; inset: 0; transform-origin: 236px 128px; transform: scale(calc(1 + 0.7 * var(--v, 0))); }
.cq-wall { position: absolute; inset: 0; background: var(--wall) center / cover no-repeat; }
.cq-mouse { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* Easier to read (Roadmap, 1.0.10): a wallpaper dark on one half and light on the other; each side of the bar
   takes the text that reads on it, and each panel the glass of what is behind it. */
.rm-split { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 9, 14, 0.78) 0 40%, rgba(250, 250, 248, 0.74) 60% 100%), var(--wall) center / cover; }
.rm-stage .mbar.rm-sides { background: rgba(128, 132, 140, 0.16); box-shadow: inset 0 -1px rgba(128, 132, 140, 0.24); }
.rm-side { display: flex; align-items: center; gap: 2px; transition: color 420ms var(--ease); }
.rm-side.on { color: #f4f5f7; }
.cp-plate.rm-light { color: var(--charcoal); background: rgba(246, 247, 249, 0.78); box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.12), 0 10px 26px rgba(10, 30, 50, 0.18); }
.cp-plate.rm-light .cp-vbar { background: rgba(23, 25, 29, 0.16); }
.cp-plate.rm-light .cp-vbar::after { background: var(--charcoal); }

/* The menu bar that hides by itself (What's new, 1.0.10): it slides up by --v; the maximized window takes the
   whole screen once it has gone. */
.rm-slide { position: absolute; inset: 0 0 auto 0; z-index: 3; translate: 0 calc(-32px * var(--v, 0)); }
.cp-win.rm-tall { transition: top 480ms var(--ease), height 480ms var(--ease); }
.cp-win.rm-tall.on { top: 0; height: 312px; }

/* A live wallpaper (What's new, 1.0.10): the wallpaper's layers fade in turn; the bar and the dock hold a layer
   of tint for each, and their text turns light over the dark one. */
.rm-wp { position: absolute; inset: 0; background: var(--img) center / cover; transition: opacity 1200ms; }
.rm-stage .rm-follow { background: transparent; isolation: isolate; }
.rm-follow > .rm-bt { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--t); transition: opacity 1200ms; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.rm-follow .rm-side { flex: 1; transition: color 900ms var(--ease); }

/* Launch Options (What's new, 1.0.10): the small panel over a dock icon. */
.rm-lo small { padding: 0 4px; color: var(--secondary); font-size: 12px; }
.rm-lo-field { position: relative; display: flex; align-items: center; height: 30px; margin: 10px 4px 0; padding: 0 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font: 500 12.5px/1 ui-monospace, Consolas, monospace; }
.rm-lo-hint { position: absolute; left: 10px; color: var(--tertiary); font-family: var(--font); }
.rm-lo-buttons { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 4px 0; }
.rm-lo-buttons .rm-btn { display: grid; place-items: center; height: 26px; padding: 0 14px; font-size: 12.5px; }
.rm-btn.rm-lo-save { background: var(--accent); color: #fff; font-weight: 600; }
.rm-btn.rm-lo-save.on { background: #2466c4; }
.cp-win.rm-private { width: 260px; height: 150px; }
.cp-win.rm-private .rm-mon-title { background: #3b2c55; }
.cp-win.rm-private .cp-win-body { background: #241a33; }

/* The logo at the bar's left end and its menu (What's new, 1.0.10). */
.rm-logo { display: grid; place-items: center; width: 30px; height: 22px; border-radius: 6px; transition: background-color 120ms; }
.rm-logo.on { background: rgba(23, 25, 29, 0.12); }
.rm-logo svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rm-tall-menu.gm button { height: 22px; }
.rm-sub { margin-left: auto; padding-left: 16px; opacity: 0.6; }
.live .cp-win.rm-desk.rm-pop:not(.on) { transform: translateY(18px) scale(0.92); }

/* Where notifications show (What's new, 1.0.10). */
.rm-fu-toast.rm-np { width: 220px; }
.live .rm-fu-toast.rm-np-top.rm-pop:not(.on) { transform: translateY(-8px) scale(0.98); }

/* Today with two months side by side (What's new, 1.0.10). */
.vg.rm-two { position: absolute; width: auto; padding: 8px 14px 10px; }
.rm-two-months { display: flex; gap: 22px; }
.rm-two .cal-top { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 4px; }
.rm-two .cal-top b { font-weight: 600; }
.rm-arrows { color: var(--charcoal-2); letter-spacing: 6px; }
.rm-two .cal-grid { grid-template-columns: repeat(7, 27px); }
.rm-two .cal-grid .wd { height: 18px; line-height: 18px; font-size: 10.5px; }
.rm-two .cal-grid button { position: relative; width: 23px; height: 23px; margin: 2px; font-size: 11.5px; }
.rm-two .cal-grid i { display: block; }
.rm-pick { position: absolute; inset: 0; border-radius: 50%; background: rgba(23, 25, 29, 0.12); transition: opacity 200ms; z-index: -1; }
.live .rm-pick:not(.on) { opacity: 0; }
.rm-clock { border-radius: 6px; transition: background-color 120ms; }
.rm-clock.on { background: rgba(23, 25, 29, 0.12); }

/* The Windows key brings the dock out over a full-screen video (What's new, 1.0.10). */
.rm-full { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.55)), url(/assets/wallpaper-canyon-1440.jpg) center / cover; transition: opacity 400ms; }
.rm-full-bar { position: absolute; left: 24px; right: 24px; bottom: 18px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
.rm-full-bar i { display: block; height: 100%; width: calc(100% * var(--v, 0.2)); border-radius: inherit; background: #fff; }
.rm-keyhint { position: absolute; left: 50%; top: 120px; z-index: 4; translate: -50% 0; color: #fff; font: 600 20px/1 var(--font-display); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }

/* Launchpad (1.0.10): the whole screen of the picture, the wallpaper blurred and darkened behind the apps; the
   page settles in from a little larger. A strip of pages moves by --v (0 the first page, 1 the second). */
.rm-lp { position: absolute; inset: 0; z-index: 4; background: rgba(14, 16, 22, 0.36); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); transition: opacity 320ms; }
.live .rm-lp:not(.on) { opacity: 0; pointer-events: none; }
.rm-lp-field { position: absolute; left: 50%; top: 18px; width: 210px; height: 26px; translate: -50% 0; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.66); font-size: 12px; }
.rm-lp-field svg { width: 13px; height: 13px; stroke-width: 2; }
.rm-lp-pages { position: absolute; left: 0; right: 0; top: 62px; height: 200px; overflow: hidden; }
.rm-lp-strip { display: flex; width: 200%; height: 100%; translate: calc(-50% * var(--v, 0)) 0; }
.rm-lp-page { flex: 1 0 50%; display: grid; grid-template-columns: repeat(var(--cols, 7), 92px); grid-auto-rows: 94px; justify-content: center; align-content: start; transition: transform 460ms var(--ease); }
.live .rm-lp:not(.on) .rm-lp-page { transform: scale(1.06); }
.rm-lp-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 4px; color: #fff; font-size: 11.5px; line-height: 1; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.rm-lp-cell .tile, .rm-lp-fold { width: 52px; height: 52px; }
.rm-lp-dots { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; display: flex; gap: 8px; }
.rm-lp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.34); transition: background-color 200ms; }
.rm-lp-dots i.on { background: #fff; }
.t-weather { background: linear-gradient(#6cc7ff, #2f86e6); }
.t-cloud { background: linear-gradient(#f3f6fa, #c4ccd8); color: #2f6fd6; }
.t-video { background: linear-gradient(#ff8a65, #e2463a); }
.t-remote { background: linear-gradient(#5d6c86, #2b3446); }
.t-phone { background: linear-gradient(#6ee07f, #23a84a); }
.t-alarm { background: linear-gradient(#3e4452, #191c23); }
.t-rec { background: linear-gradient(#ff6d7e, #d42a4c); }
/* A folder in Launchpad: a glass tile with small icons of what is inside; opened, a large glass panel in the
   middle with its name on top. Icons wiggle while they are being arranged. */
.rm-lp-fold { box-sizing: border-box; display: grid; grid-template-columns: repeat(2, 17px); gap: 4px; place-content: center; border-radius: 23%; background: rgba(243, 244, 246, 0.26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }
.rm-lp-fold .tile { width: 17px; height: 17px; border-radius: 5px; }
.rm-lp-cell > .rm-fade { position: absolute; left: 0; right: 0; top: 4px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.rm-lp-open { position: absolute; left: 110px; top: 70px; z-index: 5; width: 300px; height: 172px; border-radius: 22px; background: rgba(236, 240, 246, 0.2); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 18px 40px rgba(0, 0, 0, 0.3); transition: opacity 260ms, transform 360ms var(--ease); }
.live .rm-lp-open:not(.on) { opacity: 0; transform: scale(0.3); }
.rm-lp-open { transform-origin: 196px 116px; }
.rm-lp-lab { display: grid; justify-items: center; }
.rm-lp-lab > * { grid-area: 1 / 1; }
.rm-lp-blur { position: absolute; inset: 0; z-index: 5; background: rgba(10, 12, 18, 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rm-lp-name { display: grid; justify-items: center; margin: 16px auto 4px; color: #fff; font: 600 17px/1 var(--font-display); }
.rm-lp-name > * { grid-area: 1 / 1; padding: 4px 10px; border-radius: 7px; }
.rm-lp-name .rm-field { background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.rm-lp-open .rm-lp-page { --cols: 2; justify-content: center; }
.rm-wig.on .tile, .rm-wig.on .rm-lp-fold { animation: rm-wiggle 260ms ease-in-out infinite alternate; }
.rm-wig.on .rm-lp-cell:nth-child(2n) .tile { animation-delay: -130ms; }
@keyframes rm-wiggle { from { rotate: -2.2deg; } to { rotate: 2.2deg; } }

/* Microsoft To Do in Today, and apps by category in Search (the Roadmap, 1.0.11). */
.rm-task { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 8px; padding: 5px 0; }
.rm-task i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); transition: background-color 200ms, box-shadow 200ms; }
.rm-task svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 200ms; }
.rm-task span { transition: opacity 300ms, text-decoration-color 300ms; text-decoration: line-through transparent; }
.rm-task.on i { background: #2f7ae5; box-shadow: none; }
.rm-task.on svg { opacity: 1; }
.rm-task.on span { opacity: 0.5; text-decoration-color: currentColor; }
.rm-cat.rm-pal.palette { top: 16px; }
.rm-cat .rm-rows .p-row { height: 38px; }

/* ---------------------------------------------------------------- the landing's newer parts */

/* What's new's pictures in the sections (store-listing.py landing writes their insides). */
.feature .pic { max-width: 1180px; margin: 56px auto 0; text-align: left; }
.feature.split .pic { margin: 0; max-width: none; }
@media (max-width: 900px) { .feature.split .pic { margin: 56px auto 0; } }
.more .cl-grid { max-width: 1180px; margin: 56px auto 0; text-align: left; }
.closing .price { margin: 0 0 22px; font-size: 19px; color: var(--secondary); }

/* Launchpad over the hero: it grows out of the Apps icon (--from) over the blurred wallpaper. */
.dock-area { z-index: 3; }
.lp {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 96px var(--gutter) 150px;
  background: rgba(14, 30, 44, 0.30); -webkit-backdrop-filter: blur(34px) saturate(140%); backdrop-filter: blur(34px) saturate(140%);
  opacity: 0; transform: scale(0.1); transform-origin: var(--from, 50% 100%); transition: opacity 260ms var(--ease), transform 400ms var(--ease);
}
.lp.open { opacity: 1; transform: none; }
.lp[hidden] { display: none; }
.lp-field {
  width: 240px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; outline: none; text-align: center;
  font: inherit; font-size: 14px; color: #fff; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}
.lp-field::placeholder { color: rgba(255, 255, 255, 0.72); }
.lp-field:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.lp-field::-webkit-search-cancel-button { display: none; }
.lp-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(7, 108px); gap: 22px 20px; justify-content: center; }
.lp-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.lp-cell .tile { width: 68px; height: 68px; transition: filter 120ms; }
.lp-cell:active .tile { filter: brightness(0.8); }
.lp-cell .t-calendar b { font-size: 12px; }
.lp-cell .t-calendar i { font-size: 32px; }
.lp-cell.gone { display: none; }
@media (max-width: 900px) {
  .lp-grid { grid-template-columns: repeat(6, 92px); gap: 18px 12px; }
  .lp-cell .tile { width: 58px; height: 58px; }
}
@media (max-width: 720px) {
  .lp { padding-top: 72px; }
  .lp-grid { margin-top: 24px; grid-template-columns: repeat(5, 62px); gap: 14px 8px; }
  .lp-cell { font-size: 11.5px; }
  .lp-cell .tile { width: 46px; height: 46px; }
  .lp-cell .t-calendar b { font-size: 9px; }
  .lp-cell .t-calendar i { font-size: 24px; }
}

.gs-range { flex: none; }
@media (max-width: 720px) { .gs-range { width: 130px; } }

/* Settings > Menu Bar > Date format. */
.gs-text {
  width: 150px; height: 26px; padding: 0 8px; border: 0; border-radius: 6px; outline: none;
  font: inherit; font-size: 13px; color: var(--text); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.gs-text:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.gs-text::placeholder { color: var(--tertiary); }

/* ---------------------------------------------------------------- the painted app icons
   One family (assets/apps/, from artifacts/landing-art): they stand in for the drawn tiles on every page and picture.
   The drawn glyph inside a tile stays in the markup for the tiles without a painting (file types, Calendar's date). */
.t-files, .t-dir, .t-kept { background: url(/assets/apps/files.webp) center / cover no-repeat; }
.t-browser { background: url(/assets/apps/browser.webp) center / cover no-repeat; }
.t-mail { background: url(/assets/apps/mail.webp) center / cover no-repeat; }
.t-notes { background: url(/assets/apps/notes.webp) center / cover no-repeat; }
.t-music { background: url(/assets/apps/music.webp) center / cover no-repeat; }
.t-photos { background: url(/assets/apps/photos.webp) center / cover no-repeat; }
.t-terminal { background: url(/assets/apps/terminal.webp) center / cover no-repeat; }
.t-settings { background: url(/assets/apps/settings.webp) center / cover no-repeat; }
.t-downloads { background: url(/assets/apps/downloads.webp) center / cover no-repeat; }
.t-trash { background: url(/assets/apps/trash.webp) center / cover no-repeat; }
.t-calc { background: url(/assets/apps/calc.webp) center / cover no-repeat; }
.t-file { background: url(/assets/apps/document.webp) center / cover no-repeat; }
.t-video { background: url(/assets/apps/video.webp) center / cover no-repeat; }
.t-weather { background: url(/assets/apps/weather.webp) center / cover no-repeat; }
.t-remote { background: url(/assets/apps/remote.webp) center / cover no-repeat; }
.t-rec { background: url(/assets/apps/rec.webp) center / cover no-repeat; }
.t-phone { background: url(/assets/apps/phone.webp) center / cover no-repeat; }
.t-cloud { background: url(/assets/apps/cloud.webp) center / cover no-repeat; }
.t-alarm { background: url(/assets/apps/alarm.webp) center / cover no-repeat; }
.t-books { background: url(/assets/apps/books.webp) center / cover no-repeat; }
.t-camera { background: url(/assets/apps/camera.webp) center / cover no-repeat; }
.t-chat { background: url(/assets/apps/chat.webp) center / cover no-repeat; }
.t-code { background: url(/assets/apps/code.webp) center / cover no-repeat; }
.t-contacts { background: url(/assets/apps/contacts.webp) center / cover no-repeat; }
.t-maps { background: url(/assets/apps/maps.webp) center / cover no-repeat; }
.t-news { background: url(/assets/apps/news.webp) center / cover no-repeat; }
.t-paint { background: url(/assets/apps/paint.webp) center / cover no-repeat; }
.t-podcasts { background: url(/assets/apps/podcasts.webp) center / cover no-repeat; }
.t-store { background: url(/assets/apps/store.webp) center / cover no-repeat; }
.t-games { background: url(/assets/apps/games.webp) center / cover no-repeat; }
.tile.t-files > svg, .tile.t-dir > svg, .tile.t-kept > svg, .tile.t-browser > svg, .tile.t-mail > svg, .tile.t-notes > svg, .tile.t-music > svg, .tile.t-photos > svg, .tile.t-terminal > svg, .tile.t-settings > svg, .tile.t-downloads > svg, .tile.t-trash > svg, .tile.t-calc > svg, .tile.t-file > svg, .tile.t-video > svg, .tile.t-weather > svg, .tile.t-remote > svg, .tile.t-rec > svg, .tile.t-phone > svg, .tile.t-cloud > svg, .tile.t-alarm > svg, .tile.t-books > svg, .tile.t-camera > svg, .tile.t-chat > svg, .tile.t-code > svg, .tile.t-contacts > svg, .tile.t-maps > svg, .tile.t-news > svg, .tile.t-paint > svg, .tile.t-podcasts > svg, .tile.t-store > svg, .tile.t-games > svg { display: none; }
.tile.t-calc { color: transparent; }
.s-dock .c1, .tb-apps .c1, .rm-mon-dock .c1, .rm-scr-dock .c1 { background: url(/assets/apps/files.webp) center / cover no-repeat; }
.s-dock .c2, .tb-apps .c2, .rm-mon-dock .c2, .rm-scr-dock .c2 { background: url(/assets/apps/browser.webp) center / cover no-repeat; }
.s-dock .c3, .tb-apps .c3, .rm-mon-dock .c3, .rm-scr-dock .c3 { background: url(/assets/apps/notes.webp) center / cover no-repeat; }
.s-dock .c4, .tb-apps .c4, .rm-mon-dock .c4, .rm-scr-dock .c4 { background: url(/assets/apps/music.webp) center / cover no-repeat; }
.s-dock .c5, .tb-apps .c5, .rm-mon-dock .c5 { background: url(/assets/apps/terminal.webp) center / cover no-repeat; }
.s-dock .c6, .tb-apps .c6, .rm-mon-dock .c6 { background: url(/assets/apps/settings.webp) center / cover no-repeat; }
.rm-scr-dock .c5 { background: url(/assets/apps/settings.webp) center / cover no-repeat; }
/* The landing's Games section: a game fills the screen where What's new plays a video. */
.game .rm-full { background: url(/assets/game-1440.webp) center / cover no-repeat; }
.game .rm-full-bar { display: none; }

/* The logo at the left end of the menu bar (the app's line mark): it opens the logo menu. */
.menus .logo { display: inline-grid; place-items: center; width: 30px; height: 26px; border-radius: 6px; color: inherit; }
.menus .logo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menus .logo:hover, .menus .logo.open { background: color-mix(in srgb, currentColor 10%, transparent); }

/* Show Desktop: the hero card steps aside until the next click. Sleep: the screen goes dark. */
.desktop-shown .hero-glass { opacity: 0; transform: translateY(-28px) scale(0.97); pointer-events: none; }
.sleep { position: fixed; inset: 0; z-index: 100; background: #000; opacity: 0; transition: opacity 700ms var(--ease); cursor: none; }
.sleep.on { opacity: 1; }
.sleep[hidden] { display: none; }

/* The dock demo: its Launchpad inside the screen, under the dock. */
.demo-dock { z-index: 3; }
.lp.lp-in { z-index: 2; padding: 54px 40px 130px; border-radius: inherit; }
.lp-in .lp-grid { margin-top: 34px; grid-template-columns: repeat(6, 96px); gap: 22px 24px; }
.lp-in .lp-cell .tile { width: 64px; height: 64px; }
/* Dock style: Attached sits on the bottom edge, rounded only at the top. */
.demo-dock.attached { bottom: 0; }
.demo-dock.attached .dock-items { border-radius: 18px 18px 0 0; }
.demo-dock { transition: bottom 260ms var(--ease); }
.demo-dock .dock-items { transition: border-radius 260ms var(--ease); }
/* A picture of one's own on an icon (Change Icon...). */
.tile.own { box-shadow: none; }
.tile.own > * { display: none; }

/* The dock's panels: Change Icon... and Launch Options..., above the icon they belong to. */
.dpop {
  position: absolute; left: 0; bottom: 112px; z-index: 6; width: 320px; padding: 14px; border-radius: 14px; color: var(--charcoal); font-size: 13px;
  background: rgba(232, 238, 245, 0.95); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.12), 0 12px 30px rgba(10, 40, 70, 0.28);
  opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: 50% 100%; transition: opacity 180ms, transform 260ms var(--ease);
}
.dpop.open { opacity: 1; transform: none; }
.dpop[hidden] { display: none; }
.dpop h4 { margin: 0 0 2px; font: 600 14px/1.3 var(--font-display); }
.dpop small { display: block; color: var(--charcoal-3); font-size: 12px; line-height: 1.35; }
.dpop-field {
  width: 100%; height: 30px; margin: 10px 0 12px; padding: 0 10px; border: 0; border-radius: 7px; outline: none; font: inherit; font-size: 13px;
  color: var(--charcoal); background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.16);
}
.dpop-field:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.dpop-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.dpop-buttons button { height: 26px; padding: 0 14px; border-radius: 7px; font-size: 13px; background: rgba(23, 25, 29, 0.07); box-shadow: inset 0 0 0 1px rgba(23, 25, 29, 0.10); }
.dpop-buttons button:hover { background: rgba(23, 25, 29, 0.12); }
.dpop-buttons .save { color: #fff; background: var(--accent); box-shadow: none; }
.dpop-buttons .save:hover { background: var(--accent); filter: brightness(1.08); }
.dpop-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dpop-icons + .dpop-buttons { margin-top: 12px; }
.dpop-icons button { aspect-ratio: 1; border-radius: 10px; background: center / cover no-repeat; transition: transform 120ms var(--ease); }
.dpop-icons button:hover { transform: scale(1.08); }

/* The Roadmap's pictures of 1.0.11, drawn first for the app's What's new clips (artifacts/mockups/whatsnew-1010/art). */
/* kinds.html */
.kd-page { position: absolute; left: 0; right: 0; top: 52px; display: grid; justify-content: center; gap: 2px; transition: transform 460ms var(--ease); }
.live .kd-lp:not(.on) .kd-page { transform: scale(1.06); }
.kd-row { display: grid; grid-template-columns: repeat(5, 84px); }
.kd-row .rm-lp-cell { height: 62px; font-size: 10.5px; gap: 5px; }
.kd-row .tile, .kd-row .rm-lp-fold { width: 40px; height: 40px; }
.kd-row .rm-lp-fold { grid-template-columns: repeat(2, 13px); gap: 3px; }
.kd-row .rm-lp-fold .tile { width: 13px; height: 13px; border-radius: 4px; }
.kd-head { padding: 4px 22px 4px; color: rgba(255, 255, 255, 0.72); font-size: 11px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
/* searchicon.html */
.si-tile { background: linear-gradient(#5a6170, #2b3039); }
/* drives.html */
.dr-tile { background: linear-gradient(#e9edf2, #aab3bf); color: #3a4250; }
.dr-tile svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dr-slot { display: block; width: 40px; transition: width 320ms var(--ease), opacity 260ms, margin 320ms var(--ease); }
.live .dr-slot:not(.on) { width: 0; opacity: 0; margin-left: -8px; }
.dr-body { display: grid; gap: 9px; padding: 12px 16px; font-size: 12px; color: rgba(243, 244, 246, 0.92); }
.dr-body b { font-size: 13px; }
.dr-body span { display: flex; align-items: center; gap: 8px; }
.dr-f, .dr-d { width: 16px; height: 13px; border-radius: 3px; background: #f4b73a; }
.dr-d { width: 12px; height: 15px; background: #d9dee5; }
/* logostart.html */
.ls-start { position: absolute; left: 110px; bottom: 12px; width: 300px; padding: 12px 14px 14px; border-radius: 10px; color: #f3f4f6; font-size: 11px;
  background: rgba(32, 34, 40, 0.86); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 30px rgba(0, 0, 0, 0.3); }
.live .ls-start:not(.on) { opacity: 0; transform: translateY(24px); }
.ls-field { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(255, 255, 255, 0.08); color: rgba(243, 244, 246, 0.6); }
.ls-field svg { width: 12px; height: 12px; stroke-width: 2; }
.ls-head { margin: 12px 4px 8px; font-weight: 600; }
.ls-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ls-grid span { display: grid; justify-items: center; gap: 5px; font-size: 10px; }
.ls-grid .tile { width: 30px; height: 30px; }
/* textactions.html */
.ta-frame { position: absolute; left: 0; right: 0; top: 22px; bottom: 0; background: radial-gradient(120% 90% at 70% 20%, #3c4a5e, #151a22 70%); overflow: hidden; }
.ta-sign { position: absolute; left: 70px; top: 34px; width: 300px; white-space: nowrap; padding: 10px 14px 12px; border-radius: 4px; background: #f3f1ea; color: #1b2433; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.ta-sign b { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 800; color: #0f4c9c; }
.ta-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: rgba(20, 21, 25, 0.92); color: rgba(243, 244, 246, 0.7); font-size: 10px; }
.ta-bar svg { width: 13px; height: 13px; fill: currentColor; }
.ta-bar i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.ta-bar em { display: block; width: 42%; height: 100%; border-radius: 2px; background: rgba(243, 244, 246, 0.7); }
.ta-veil { position: absolute; inset: 0; z-index: 2; background: rgba(8, 10, 14, 0.18); }
.ta-part { position: absolute; z-index: 3; left: 104px; top: 66px; width: calc(312px * var(--v, 0)); height: calc(79px * var(--v, 0)); background: rgba(128, 128, 128, 0.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78); }
.ta-plate { position: absolute; z-index: 4; left: 40px; top: 153px; width: 440px; padding: 5px; border-radius: 12px; background: rgba(38, 40, 46, 0.74); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px rgba(255, 255, 255, 0.14), 0 10px 26px rgba(0, 0, 0, 0.34); color: rgba(243, 244, 246, 0.95); font-size: 11.5px; }
.ta-found { padding: 6px 10px 7px; color: rgba(243, 244, 246, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-rule { height: 1px; margin: 0 6px; background: rgba(255, 255, 255, 0.1); }
.ta-strip { display: flex; align-items: stretch; padding: 4px; }
.ta-strip span { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; font-size: 10.5px; border-radius: 7px; white-space: nowrap; transition: background 120ms; }
.ta-strip span.on { background: rgba(255, 255, 255, 0.14); }
.ta-strip i { width: 1px; margin: 7px 2px; background: rgba(255, 255, 255, 0.1); }
.ta-strip svg, .ta-langs svg { width: 15px; height: 15px; fill: none; stroke: rgba(243, 244, 246, 0.72); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ta-tr { overflow: hidden; max-height: 70px; transition: max-height 320ms var(--ease), opacity 220ms; }
.live .ta-tr:not(.on) { max-height: 0; opacity: 0; }
.ta-langs { display: flex; align-items: center; gap: 3px; padding: 7px 11px 4px; color: rgba(243, 244, 246, 0.5); font-size: 10.5px; }
.ta-langs svg { width: 10px; height: 10px; stroke: rgba(243, 244, 246, 0.45); }
.ta-langs b { display: flex; align-items: center; gap: 3px; font-weight: 400; color: rgba(243, 244, 246, 0.72); }
.ta-out { padding: 0 11px 7px; font-size: 13px; line-height: 1.4; }
/* meaning.html */
.mn-hint { opacity: 0.45; }
.live .mn-t:not(.on) { display: none; }
.mn-sel { transition: background 160ms, height 280ms var(--ease), opacity 200ms; }
.mn-sel.on { animation: mn-pick 8400ms linear forwards; }
@keyframes mn-pick { 0%, 30% { background: transparent; } 32%, 100% { background: rgba(243, 244, 246, 0.11); } }