/* ADO Local website: the app's Studio world, louder. Window, content and panel layers lit from above; one indigo
   voice; amber only for caution. Light and dark follow the visitor's system, as the app does. */

@font-face {
  font-family: 'Mona Sans';
  src: url('assets/fonts/MonaSans-Expanded.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --window: #e1e2e8;
  --window-deep: #d5d7df;
  --content: #f4f5f7;
  --panel: #ffffff;
  --panel-low: #fbfbfd;
  --ink: #1c1d21;
  --ink-soft: #3d3f46;
  --quiet: #5a5d66;
  --accent: #4f58c8;
  --plate-top: #5a64d2;
  --plate-base: #4851bf;
  --plate-deep: #3c44a6;
  --amber: #8a5000;
  --amber-wash: rgba(214, 140, 30, 0.14);
  --hi: rgba(255, 255, 255, 0.9);
  --rule: rgba(28, 32, 64, 0.075);
  --well: rgba(28, 32, 64, 0.045);
  --sel: rgba(79, 88, 200, 0.1);
  --ring: 0 0 0 0.5px rgba(20, 24, 50, 0.1);
  --shadow-float: 0 0 0 0.5px rgba(20, 24, 50, 0.08), 0 1px 2px rgba(20, 24, 50, 0.09), 0 18px 44px -12px rgba(20, 24, 50, 0.26);
  --shadow-window: 0 0 0 0.5px rgba(20, 24, 50, 0.1), 0 2px 4px rgba(20, 24, 50, 0.08), 0 30px 70px -24px rgba(20, 24, 50, 0.38);
  --shadow-tile: 0 0 0 0.5px rgba(20, 24, 50, 0.12), 0 1px 2px rgba(20, 24, 50, 0.1);
  --shadow-well: inset 0 1px 2px rgba(20, 24, 50, 0.08), inset 0 0 0 0.5px rgba(20, 24, 50, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8);
  --tile-top: #ffffff;
  --tile-base: #f6f6f9;
  --display: 'Mona Sans', system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --page: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --window: #17181b;
    --window-deep: #121315;
    --content: #1d1e22;
    --panel: #25272c;
    --panel-low: #22242a;
    --ink: #eef0f3;
    --ink-soft: #ccced6;
    --quiet: #8d919c;
    --accent: #8b94ee;
    --plate-top: #5a64d2;
    --plate-base: #4851bf;
    --plate-deep: #2e3488;
    --amber: #f2b45a;
    --amber-wash: rgba(232, 160, 60, 0.16);
    --hi: rgba(255, 255, 255, 0.06);
    --rule: rgba(255, 255, 255, 0.05);
    --well: rgba(0, 0, 0, 0.2);
    --sel: rgba(139, 148, 238, 0.14);
    --ring: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
    --shadow-float: 0 0 0 0.5px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px -10px rgba(0, 0, 0, 0.7);
    --shadow-window: 0 0 0 0.5px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 34px 80px -24px rgba(0, 0, 0, 0.85);
    --shadow-tile: 0 0 0 0.5px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-well: inset 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.04);
    --tile-top: #3b3d44;
    --tile-base: #33353b;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--content);
  color: var(--ink);
  font: 400 17px/1.55 var(--body);
  font-feature-settings: 'tnum' 0;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--accent);
}

::selection {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 75%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

html {
  scrollbar-color: color-mix(in srgb, var(--quiet) 45%, transparent) transparent;
}

.icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--shadow-float);
}

.skip:focus {
  top: 12px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Controls: raised tiles and the one indigo plate ─────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  font: 600 15px/1 var(--body);
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(var(--tile-top), var(--tile-base));
  box-shadow: var(--shadow-tile);
  cursor: pointer;
  transition: filter 160ms var(--ease), transform 160ms var(--ease);
}

.button:hover {
  filter: brightness(1.03);
}

.button:active {
  transform: translateY(0.5px);
  box-shadow: inset 0 1px 4px rgba(20, 24, 50, 0.2), 0 0 0 0.5px rgba(20, 24, 50, 0.12);
}

.button.primary {
  color: #fff;
  background: linear-gradient(var(--plate-top), var(--plate-base));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 0.5px rgba(40, 46, 140, 0.6), 0 2px 6px -1px rgba(20, 24, 50, 0.35);
}

.button.primary:hover {
  filter: brightness(1.07);
}

.button.small {
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 7px;
}

.button.large {
  height: 50px;
  padding: 0 22px;
  font-size: 17px;
  border-radius: 10px;
}

kbd,
.key {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  font: 500 12px/1 var(--body);
  color: var(--ink-soft);
  background: linear-gradient(var(--tile-top), var(--tile-base));
  box-shadow: var(--shadow-tile);
  font-variant-numeric: tabular-nums;
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font: 600 12px/1 var(--body);
  color: var(--amber);
  background: var(--amber-wash);
}

.pill.neutral {
  color: var(--accent);
  background: var(--sel);
}

/* ── Top bar: the window layer ───────────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--window) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: inset 0 -1px 0 var(--rule), inset 0 1px 0 var(--hi);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--page);
  height: 60px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font: 750 17px/1 var(--display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(20, 24, 50, 0.25);
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.topbar nav a:not(.button) {
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--ink-soft);
  text-decoration: none;
  font: 500 14.5px/1 var(--body);
}

.topbar nav a:not(.button):hover {
  background: var(--well);
  color: var(--ink);
}

.jump {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 6px 0 12px;
  border: 0;
  border-radius: 8px;
  color: var(--quiet);
  font: 500 14px/1 var(--body);
  background: var(--well);
  box-shadow: var(--shadow-well);
  cursor: pointer;
}

.jump:hover {
  color: var(--ink);
}

@media (max-width: 780px) {
  .topbar nav a:not(.button),
  .topbar .pill {
    display: none;
  }
  .jump .jump-label {
    display: none;
  }
}

/* ── The stage: the hero, with the palette as its subject ────────────────────────────────────────── */

.stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--panel) 70%, var(--window)) 0%, var(--window) 55%, var(--window-deep) 100%);
  padding: clamp(28px, 4.5vh, 56px) var(--gutter) clamp(56px, 9vh, 110px);
  box-shadow: inset 0 -1px 0 var(--rule);
}

.stage-backdrop {
  position: absolute;
  inset: auto 50% -8% auto;
  z-index: -1;
  width: min(1500px, 132vw);
  transform: translateX(50%) perspective(1600px) rotateX(16deg) scale(1.02);
  transform-origin: 50% 0;
  border-radius: 14px;
  overflow: hidden;
  opacity: 0.5;
  filter: blur(3px) saturate(0.9);
  /* Seen at the sides, where it reads as the app behind; cleared in the middle, behind the words and the palette. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 18%, #000 46%, #000 70%, transparent 100%), radial-gradient(46% 70% at 50% 40%, transparent 55%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 18%, #000 46%, #000 70%, transparent 100%), radial-gradient(46% 70% at 50% 40%, transparent 55%, #000 100%);
  mask-composite: intersect;
  box-shadow: var(--shadow-window);
}

@media (prefers-color-scheme: dark) {
  .stage-backdrop {
    opacity: 0.62;
    filter: blur(2px) saturate(0.95) brightness(1.15);
  }
}

.stage-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.stage h1 {
  margin: 0 auto;
  max-width: 17ch;
  font: 850 clamp(2.3rem, 5vw, 4.3rem) / 1 var(--display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.stage h1 .accent {
  color: var(--accent);
}

.lede {
  margin: 16px auto 0;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.6vw, 19.5px);
  text-wrap: pretty;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  margin-top: 22px;
}

.cta-note {
  color: var(--quiet);
  font-size: 14.5px;
}

/* ── The command palette (hero and floating) ─────────────────────────────────────────────────────── */

.palette {
  position: relative;
  margin: 38px auto 0;
  max-width: 680px;
  text-align: left;
  border-radius: 14px;
  background: linear-gradient(var(--panel), var(--panel-low));
  box-shadow: var(--shadow-float), inset 0 1px 0 var(--hi);
}

.palette-input {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 14px 0 18px;
  box-shadow: inset 0 -1px 0 var(--rule);
  color: var(--quiet);
}

.palette-input .icon {
  width: 20px;
  height: 20px;
}

.palette-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 19px/1 var(--body);
  outline: none;
}

.palette-input input::placeholder {
  color: var(--quiet);
}

.palette-list {
  max-height: 392px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.palette-group {
  padding: 10px 12px 4px;
  color: var(--quiet);
  font: 600 12px/1 var(--body);
}

.palette-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 15.5px;
  cursor: pointer;
  transition: background 120ms linear;
}

.palette-row .glyph {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--accent);
  background: linear-gradient(var(--tile-top), var(--tile-base));
  box-shadow: var(--shadow-tile);
}

.palette-row .label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.palette-row .label mark {
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
}

.palette-row .area {
  color: var(--quiet);
  font-size: 13.5px;
  white-space: nowrap;
}

.palette-row .enter {
  display: none;
  color: inherit;
}

.palette-row[aria-selected='true'] {
  color: #fff;
  background: linear-gradient(var(--plate-top), var(--plate-base));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(40, 46, 140, 0.35);
}

.palette-row[aria-selected='true'] .area {
  color: rgba(255, 255, 255, 0.82);
}

.palette-row[aria-selected='true'] .enter {
  display: inline-grid;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
}

.palette-row .enter .icon {
  width: 12px;
  height: 12px;
}

.palette-row[aria-selected='true'] .glyph {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
}

.palette-empty {
  padding: 18px 14px;
  color: var(--quiet);
}

.palette-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  color: var(--quiet);
  font-size: 13px;
  box-shadow: inset 0 1px 0 var(--rule);
}

.palette-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.palette-foot .count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .palette-row .area,
  .palette-foot .hint-escape {
    display: none;
  }
  .palette-input input {
    font-size: 17px;
  }
}

dialog.palette-dialog {
  width: min(680px, calc(100vw - 24px));
  max-height: none;
  margin: 12vh auto auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

dialog.palette-dialog::backdrop {
  background: color-mix(in srgb, var(--window-deep) 55%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

dialog.palette-dialog .palette {
  margin: 0;
}

dialog.palette-dialog[open] .palette {
  animation: palette-in 240ms var(--ease);
}

@keyframes palette-in {
  from {
    transform: translateY(-8px) scale(0.985);
  }
}

/* ── Notifications: real wording the app sends ──────────────────────────────────────────────────── */

.palette-wrap {
  position: relative;
  max-width: 680px;
  margin: 28px auto 0;
}

/* Eight commands show at once on the stage; the rest are a scroll or a few letters away. */
.palette-wrap .palette-list {
  max-height: 364px;
}

.palette-wrap .palette {
  margin: 0;
}

/* Beside the palette where there's room, so they never sit on the headline; below the button where there isn't. */
.toasts {
  position: absolute;
  top: 6px;
  left: calc(100% + 28px);
  z-index: 5;
  display: grid;
  gap: 10px;
  width: 320px;
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 2px 11px;
  padding: 12px 12px 12px 12px;
  border-radius: 14px;
  background: linear-gradient(var(--panel), var(--panel-low));
  box-shadow: var(--shadow-float), inset 0 1px 0 var(--hi);
  text-align: left;
  pointer-events: auto;
  cursor: default;
}

.toast img {
  grid-row: span 3;
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.toast .app {
  color: var(--quiet);
  font: 600 12px/1.3 var(--body);
}

.toast time {
  color: var(--quiet);
  font: 400 12px/1.3 var(--body);
}

.toast strong {
  grid-column: 2 / 4;
  font: 600 14px/1.3 var(--body);
}

.toast p {
  grid-column: 2 / 4;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.35;
}

.toast.arriving {
  animation: toast-in 640ms var(--ease) both;
}

/* Entrances move from a visible start, so a paused or skipped animation still leaves the content readable. */
@keyframes toast-in {
  from {
    transform: translateX(36px) scale(0.97);
  }
}

/* Narrower than the palette's side allows: they arrive at the screen's corner, one at a time, and leave. */
/* At the bottom corner, clear of the headline, where Windows shows its own. Moved out to the page by site.js, so
   the hero's clipping can't hide them once it has scrolled away. */
.toasts.corner {
  position: fixed;
  top: auto;
  bottom: 16px;
  left: auto;
  right: 16px;
  z-index: 50;
  width: min(320px, calc(100vw - 32px));
}

.toast.leaving {
  animation: toast-out 420ms var(--ease) both;
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(24px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast.leaving,
  .toast.arriving,
  dialog.palette-dialog[open] .palette {
    animation: none;
  }
}

/* ── Feature sections: the content layer ─────────────────────────────────────────────────────────── */

.feature {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(72px, 11vw, 140px) var(--gutter) 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.feature.flip .feature-grid {
  grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
}

.feature.flip .copy {
  order: 2;
}

.feature h2,
.band h2,
.closing h2 {
  margin: 0;
  font: 820 clamp(2rem, 4.2vw, 3.4rem) / 1.02 var(--display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.copy p {
  margin: 18px 0 0;
  max-width: 44ch;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.copy ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.copy li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.copy li .icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
  transform: translateY(2px);
}

.command {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 6px 8px 6px 6px;
  border: 0;
  border-radius: 9px;
  background: var(--well);
  box-shadow: var(--shadow-well);
  color: var(--ink-soft);
  font: 500 14px/1 var(--body);
  cursor: pointer;
}

.command:hover {
  color: var(--ink);
}

.command b {
  font-weight: 600;
  color: var(--ink);
}

.window {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-window);
}

.window::before {
  content: '';
  display: block;
  height: 26px;
  background:
    radial-gradient(circle at 16px 13px, #ff5f57 5px, transparent 5.5px),
    radial-gradient(circle at 34px 13px, #febc2e 5px, transparent 5.5px),
    radial-gradient(circle at 52px 13px, #28c840 5px, transparent 5.5px),
    linear-gradient(var(--window), var(--window));
  box-shadow: inset 0 -1px 0 var(--rule), inset 0 1px 0 var(--hi);
}

.media {
  position: relative;
  margin: 0;
}

.media .window.second {
  position: absolute;
  width: 58%;
  right: -4%;
  bottom: -14%;
  box-shadow: var(--shadow-window), 0 0 0 6px color-mix(in srgb, var(--content) 70%, transparent);
}

.feature.flip .media .window.second {
  right: auto;
  left: -4%;
}

.media:has(.second) {
  margin-bottom: 9%;
}

figcaption.caption {
  margin-top: 12px;
  color: var(--quiet);
  font-size: 13.5px;
}

@media (max-width: 900px) {
  .feature-grid,
  .feature.flip .feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature.flip .copy {
    order: 0;
  }
  .media .window.second {
    width: 62%;
    right: -2%;
  }
  .feature.flip .media .window.second {
    left: -2%;
  }
}

/* ── The notification band: indigo owns the whole region ────────────────────────────────────────── */

.band {
  margin-top: clamp(96px, 13vw, 170px);
  padding: clamp(72px, 10vw, 128px) var(--gutter);
  color: #fff;
  background: radial-gradient(90% 120% at 15% 0%, #5a64d2 0%, #4b54c2 42%, var(--plate-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.band-inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: var(--page);
  margin: 0 auto;
}

.band p {
  max-width: 46ch;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.86);
}

.band .kinds {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  max-width: 470px;
  border-radius: 12px;
  background: rgba(10, 12, 60, 0.22);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 6px;
}

.band .kinds li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
}

.band .kinds li + li {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.band .kinds .icon {
  color: #c9cdff;
}

.band .kinds .off {
  margin-left: auto;
  flex: none;
  white-space: nowrap;
  padding-left: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.feed {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 420px;
}

.feed .toast {
  background: color-mix(in srgb, #ffffff 92%, transparent);
  color: #1c1d21;
  box-shadow: 0 0 0 0.5px rgba(10, 12, 60, 0.3), 0 18px 40px -14px rgba(10, 12, 60, 0.6);
}

.feed .toast .app,
.feed .toast time {
  color: #53565e;
}

.feed .toast p {
  color: #3d3f46;
}

.feed .toast.pending {
  opacity: 0;
}

.feed-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

.feed-foot button {
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font: 600 13.5px/1 var(--body);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.feed-foot button:hover {
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 900px) {
  .band-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .feed {
    min-height: 0;
  }
}

/* ── More of Azure DevOps: palette rows pick the one window that shows ──────────────────────────────── */

.switcher {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 3.5vw, 52px);
  align-items: start;
  margin-top: clamp(32px, 4.5vw, 52px);
}

.switch-list {
  margin: 0;
  max-width: none;
  padding: 6px;
  display: grid;
  gap: 2px;
}

button.palette-row {
  width: 100%;
  height: auto;
  min-height: 52px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15.5px;
  text-align: left;
}

.switch-list .palette-row .label {
  white-space: normal;
}

.switch-list .palette-row .area {
  display: none;
}

.switch-panel {
  margin: 0;
}

.switch-panel:not([hidden]) {
  animation: panel-in 420ms var(--ease);
}

@keyframes panel-in {
  from {
    transform: translateY(8px) scale(0.995);
  }
}

.switch-panel figcaption {
  margin-top: 16px;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 15.5px;
}

@media (max-width: 900px) {
  .switcher {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .switch-panel:not([hidden]) {
    animation: none;
  }
}

.intro {
  max-width: 34ch;
}

.intro p {
  margin: 16px 0 0;
  color: var(--ink-soft);
  max-width: 54ch;
}

/* ── Keys: real shortcuts, as raised caps ────────────────────────────────────────────────────────── */

.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 22px;
}

.keys span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.keys kbd {
  min-width: 28px;
  height: 28px;
  font-size: 13px;
  color: var(--ink);
}

/* ── Closing and footer ──────────────────────────────────────────────────────────────────────────── */

.closing {
  max-width: var(--page);
  margin: clamp(96px, 13vw, 170px) auto 0;
  padding: 0 var(--gutter);
}

.closing-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 18px;
  background: linear-gradient(var(--panel), var(--panel-low));
  box-shadow: var(--shadow-float), inset 0 1px 0 var(--hi);
}

.closing-panel img {
  width: 84px;
  height: 84px;
  border-radius: 19px;
  box-shadow: 0 2px 6px rgba(20, 24, 50, 0.25), 0 12px 28px -10px rgba(20, 24, 50, 0.4);
}

.closing-panel p {
  margin: 10px 0 0;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .closing-panel {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }
  .closing-panel img {
    width: 64px;
    height: 64px;
    border-radius: 15px;
  }
}

.footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 56px var(--gutter) 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  color: var(--quiet);
  font-size: 14px;
}

.footer a {
  color: var(--quiet);
}

.footer a:hover {
  color: var(--ink);
}

.footer .note {
  flex-basis: 100%;
  max-width: 80ch;
}

/* ── Download page ───────────────────────────────────────────────────────────────────────────────── */

.download {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--gutter) 0;
}

.download h1 {
  margin: 0;
  font: 850 clamp(2.4rem, 6vw, 4.4rem) / 1 var(--display);
  letter-spacing: -0.035em;
}

.release-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 18px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.release-line .version {
  font: 600 15px/1 var(--mono);
  color: var(--ink);
}

.recommended {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px 22px;
  align-items: center;
  margin-top: 34px;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(var(--panel), var(--panel-low));
  box-shadow: var(--shadow-float), inset 0 1px 0 var(--hi);
}

.recommended .os {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(var(--plate-top), var(--plate-base));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 6px -1px rgba(20, 24, 50, 0.35);
}

.recommended .os .icon {
  width: 26px;
  height: 26px;
}

.recommended h2 {
  margin: 0;
  font: 760 1.5rem/1.15 var(--display);
  letter-spacing: -0.02em;
}

.recommended p {
  margin: 6px 0 0;
  color: var(--quiet);
  font-size: 15px;
}

@media (max-width: 640px) {
  .recommended {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .recommended .button {
    grid-column: 1 / -1;
  }
}

.platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 46px;
}

.platforms h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font: 760 1.2rem/1 var(--display);
  letter-spacing: -0.015em;
}

.files {
  margin: 0;
  padding: 3px;
  list-style: none;
  border-radius: 12px;
  background: var(--well);
  box-shadow: var(--shadow-well);
}

.files li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: center;
  padding: 14px 14px 14px 16px;
}

.files li + li {
  box-shadow: inset 0 1px 0 var(--rule);
}

.files .name {
  font-weight: 600;
}

.files .meta {
  grid-column: 1;
  color: var(--quiet);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.files .button {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.files li[data-recommended='true'] {
  background: var(--sel);
  border-radius: 9px;
}

@media (max-width: 720px) {
  .platforms {
    grid-template-columns: minmax(0, 1fr);
  }
}

.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 56px;
  padding-top: 32px;
  box-shadow: inset 0 1px 0 var(--rule);
}

.notes h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 650 16px/1.2 var(--body);
}

.notes h3 .icon {
  color: var(--accent);
}

.notes p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

@media (max-width: 760px) {
  .notes {
    grid-template-columns: minmax(0, 1fr);
  }
}

.status {
  margin-top: 14px;
  color: var(--quiet);
  font-size: 13.5px;
}

/* Touch screens have no shortcut to show: the palette still opens from the button and works by tapping. */
@media (pointer: coarse) {
  [data-mod-key],
  .palette-foot {
    display: none;
  }
  .jump {
    padding: 0 10px;
  }
  .jump .jump-label {
    display: inline;
  }
}