/* Barista landing page v3 (design/landing-v3.md): the page is the top of a MacBook's screen. */

html, body { background: #f0f0ee; color: #111; }

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --bg: #f0f0ee;
  --ink: #111111;
  --ink-80: rgb(17 17 17 / .8);
  --ink-60: rgb(17 17 17 / .6);
  --ink-40: rgb(17 17 17 / .4);
  --line: rgb(17 17 17 / .1);
  --night: #0b0b0b;
  --accent: #1d4e9e;
  --accent-deep: #163d7d;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.28, .5, 1);
  --gutter: clamp(20px, 5vw, 64px);
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  /* The notch: closed is the camera housing, open is the panel. */
  --nw: 200px;
  --nh: 38px;
  --pw: 680px;
  --ph: 198px;
  --s: 1;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgb(29 78 158 / .25); }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none;
}
.skip:focus { top: 48px; }

.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ——— Type ——— */
.h1, .h2 {
  font-weight: 520;
  font-stretch: 118%;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.h1 { font-size: clamp(52px, 7.6vw, 122px); line-height: .92; }
.h1 .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.h1 .line > span { display: inline-block; white-space: nowrap; }
.h2 { font-size: clamp(36px, 5.2vw, 76px); line-height: .95; letter-spacing: -0.04em; }
.h2-small { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 28px; }
.lede { font-size: 18px; line-height: 1.55; color: var(--ink-60); max-width: 34rem; letter-spacing: -0.01em; }
.meta { font-size: 13px; line-height: 1.5; color: var(--ink-40); }

/* ——— Buttons ——— */
.button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px 13px 18px; border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgb(5 26 36 / .12), 0 4px 4px rgb(5 26 36 / .08), 0 9px 6px rgb(5 26 36 / .05),
    inset 0 1px 0 rgb(255 255 255 / .18);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.button svg { width: 16px; height: 16px; }
.button:hover { background: var(--accent-deep); }
.button:active { transform: scale(.97); }
.button-big { padding: 17px 30px 17px 24px; font-size: 16px; }
.textlink {
  position: relative; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink);
}
.textlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--ink-40);
  transition: background-color .3s var(--ease);
}
.textlink:hover::after { background: var(--ink); }

/* ——— 1. Hero ——— */
.hero {
  position: relative;
  min-height: max(720px, 100vh);
  min-height: max(720px, 100svh);
  overflow: clip;
}
.menubar {
  position: absolute; inset: 0 0 auto; z-index: 5;
  height: var(--nh);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 18px;
  background: rgb(255 255 255 / .62);
  border-bottom: 1px solid var(--line);
  font-family: var(--sys); font-size: 13.5px; color: var(--ink);
}
.mb-left, .mb-right { display: flex; align-items: center; gap: 19px; }
.mb-right { gap: 16px; }
.mb-apple { width: 14px; height: 17px; fill: currentColor; margin-top: -2px; }
.mb-app { font-weight: 700; }
.mb-icon { width: 17px; height: 15px; fill: currentColor; }
.mb-icon.mb-wide { width: 25px; height: 12px; }
.mb-cup { color: var(--ink); }
.mb-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }

.stage {
  position: absolute; top: 0; left: 50%; z-index: 10;
  width: var(--pw);
  transform: translateX(-50%) scale(var(--s));
  transform-origin: 50% 0;
}

/* The notch: one black plate laid out at its open size; a clip-path shows the camera housing or the panel. */
.notch {
  position: relative;
  width: var(--pw); height: var(--ph);
  outline: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.notch::before {
  content: ""; position: absolute; inset: 0;
  background: #000;
  clip-path: inset(0 calc((var(--pw) - var(--nw)) / 2) calc(var(--ph) - var(--nh)) round 0 0 12px 12px);
  transition: clip-path .42s var(--spring);
}
.notch[data-open="true"]::before { clip-path: inset(0 0 0 0 round 0 0 26px 26px); }
.notch { filter: none; transition: filter .5s var(--ease); contain: layout style; }
.notch[data-open="true"] { filter: drop-shadow(0 22px 36px rgb(17 17 17 / .16)); }
/* Where the notch meets the top edge: two small concave corners that travel with it. */
.notch::after, .np::before {
  content: ""; position: absolute; top: 0; width: 9px; height: 9px; pointer-events: none;
  transition: left .42s var(--spring), right .42s var(--spring);
}
.notch::after {
  left: calc((var(--pw) - var(--nw)) / 2 - 9px);
  background: radial-gradient(circle at 0 100%, transparent 8.5px, #000 9px);
}
.np::before {
  right: calc((var(--pw) - var(--nw)) / 2 - 9px);
  background: radial-gradient(circle at 100% 100%, transparent 8.5px, #000 9px);
}
.notch[data-open="true"]::after { left: -9px; }
.notch[data-open="true"] .np::before { right: -9px; }
.notch:focus-visible::before { box-shadow: none; }
.notch:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 0 0 28px 28px; }

.np {
  position: absolute; inset: 0;
  color: #fff; font-family: var(--sys); font-size: 12px; line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
.np-ears, .np-rooms {
  opacity: 0; filter: blur(6px);
  transition: opacity .12s ease-in, filter .12s ease-in;
}
.notch[data-open="true"] .np-ears,
.notch[data-open="true"] .np-rooms {
  opacity: 1; filter: blur(0);
  transition: opacity .24s ease-out .07s, filter .24s ease-out .07s;
}
.np-ears {
  height: var(--nh);
  display: grid; grid-template-columns: 1fr calc(var(--nw) + 16px) 1fr;
  padding: 0 20px;
}
.np-ear { display: flex; align-items: center; gap: 10px; min-width: 0; }
.np-left { grid-column: 1; }
.np-right { grid-column: 3; justify-content: flex-end; gap: 8px; }
.np-date { font-size: 13px; font-weight: 600; white-space: nowrap; }
.np-free { color: rgb(255 255 255 / .5); white-space: nowrap; font-variant-numeric: tabular-nums; }
.np-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgb(255 255 255 / .07); }
.np-tab {
  position: relative; width: 26px; height: 20px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: rgb(255 255 255 / .38); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .2s, color .2s;
}
.np-tab svg { width: 12px; height: 12px; fill: currentColor; }
.np-tab:hover { color: rgb(255 255 255 / .7); }
.np-tab[aria-pressed="true"] { background: rgb(255 255 255 / .15); color: #fff; }
.np-tab:focus-visible { outline: 2px solid #8fb3f0; outline-offset: 1px; }
.np-badge {
  position: absolute; top: 1px; right: 3px; width: 6px; height: 6px; border-radius: 50%;
  background: #f5a524; box-shadow: 0 0 0 1.5px #000;
}
.np-gear { width: 14px; height: 14px; fill: rgb(255 255 255 / .55); }

.np-rooms {
  position: absolute; left: 0; right: 0; top: calc(var(--nh) + 8px); bottom: 16px;
  padding: 0 20px;
}
.room {
  position: absolute; inset: 0 20px;
  display: flex; gap: 14px; align-items: stretch;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
}
.js .room { opacity: 0; visibility: hidden; transform: translateX(24px); }
.js .room.from-left { transform: translateX(-24px); }
.js .room.is-current { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.js .room.leaving-left { transform: translateX(-24px); }
.js .room.leaving-right { transform: translateX(24px); }
.room[hidden] { display: none; }
.js .room[hidden] { display: flex; }

.t1 { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2 { font-size: 12px; color: rgb(255 255 255 / .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2b { font-size: 12px; font-weight: 600; color: rgb(255 255 255 / .6); }
.t3 { font-size: 11.5px; color: rgb(255 255 255 / .38); white-space: nowrap; font-variant-numeric: tabular-nums; }
.orange { color: #f5a524; }
.label { font-size: 11px; font-weight: 600; color: rgb(255 255 255 / .42); margin-bottom: 6px; }
.col-line { width: 1px; background: rgb(255 255 255 / .09); margin: 2px 0 6px; flex: none; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; }

/* Home */
.music { width: 220px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.music-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.art {
  width: 52px; height: 52px; flex: none; border-radius: 11px;
  background:
    linear-gradient(160deg, rgb(255 255 255 / .18), transparent 45%),
    conic-gradient(from 200deg at 35% 60%, #d9a35b, #6c3a1c, #f0d2a2, #2b190e, #b9773d, #d9a35b);
  box-shadow: 0 6px 16px rgb(217 163 91 / .28);
}
.music-text { min-width: 0; flex: 1; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.bars i { width: 3px; height: 100%; border-radius: 1px; background: #d9a35b; transform-origin: bottom; animation: bar 1.1s ease-in-out infinite; }
.bars i:nth-child(2) { animation-delay: -.4s; }
.bars i:nth-child(3) { animation-delay: -.7s; }
.bars i:nth-child(4) { animation-delay: -.2s; }
@keyframes bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.progress { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: rgb(255 255 255 / .45); font-variant-numeric: tabular-nums; }
.track { flex: 1; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .16); overflow: hidden; }
.track i { display: block; height: 100%; width: 100%; border-radius: 2px; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, .32)); transition: transform 1s linear; }
.controls { display: flex; justify-content: center; align-items: center; gap: 30px; }
.controls svg { width: 18px; height: 13px; fill: #fff; }
.controls svg.big { width: 13px; height: 16px; }

.upnext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.upnext .label { margin-bottom: 0; }
.event { display: flex; align-items: center; gap: 9px; min-width: 0; }
.event > div { min-width: 0; flex: 1; }
.event .t1 { font-size: 12.5px; }
.event .t2 { font-size: 11px; }
.event:not(.now) .t1 { font-weight: 500; color: rgb(255 255 255 / .82); }
.ev-bar { width: 3px; height: 26px; border-radius: 2px; flex: none; }
.ev-blue { background: #4d8df7; }
.ev-gold { background: #d9a35b; }
.ev-green { background: #4fc26b; }
.join {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 4px 10px; border-radius: 999px; background: #2f6fe0; font-size: 11.5px; font-weight: 600;
}
.join svg { width: 12px; height: 8px; fill: #fff; }

.side { width: 140px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.agent { display: flex; align-items: center; gap: 7px; min-width: 0; }
.agent .t1 { flex: 1; font-size: 12.5px; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot-working { background: #4fc26b; }
.dot-waiting { background: #f5a524; }
.dot-done { background: #4d8df7; }
.dot-idle { background: rgb(255 255 255 / .35); }
.rings { display: flex; gap: 10px; margin-top: auto; padding-bottom: 2px; }
.ring { position: relative; width: 34px; height: 34px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 3.4; }
.ring circle.arc { stroke: #4fc26b; stroke-linecap: round; stroke-dasharray: calc(var(--lvl, 70) * .9425) 94.25; }
.ring b { position: relative; font-size: 8.5px; font-weight: 700; color: rgb(255 255 255 / .75); }

/* Agents */
.room-agents { flex-direction: column; gap: 10px; }
.sessions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; flex: 1; align-content: start; }
.session { display: grid; grid-template-columns: 7px auto 1fr 36px auto; align-items: center; gap: 8px; min-width: 0; }
.session .t1 { font-size: 12.5px; }
.ctx { height: 4px; border-radius: 2px; background: rgb(255 255 255 / .14); overflow: hidden; }
.ctx i { display: block; height: 100%; width: calc(var(--c, 50) * 1%); background: rgb(255 255 255 / .55); }
.plan {
  display: flex; align-items: center; gap: 12px;
  padding-top: 10px; border-top: 1px solid rgb(255 255 255 / .09);
}
.meter { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .16); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 3px; background: #4fc26b; }
.pct { font-size: 12px; font-weight: 700; color: #4fc26b; font-variant-numeric: tabular-nums; }
.tokens { font-size: 11.5px; color: rgb(255 255 255 / .38); white-space: nowrap; }
.tokens b { color: #fff; font-weight: 700; }

/* Shelf */
.files { flex: 1; display: flex; gap: 10px; align-items: flex-start; }
.file { width: 78px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.file .t2 { width: 100%; font-size: 10.5px; }
.doc {
  position: relative; width: 46px; height: 56px; border-radius: 6px 14px 6px 6px;
  display: grid; place-items: end center; padding-bottom: 7px;
  background: #f4f4f2; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .02em;
}
.doc::before { content: ""; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 14px; border-radius: 3px; }
.doc { color: #fff; }
.doc-pdf::before { background: #e5484d; }
.doc-mov::before { background: #8a63d2; }
.doc-img::before { background: #3e9b5a; }
.doc-zip::before { background: #6e6e73; }
.doc { isolation: isolate; }
.doc::before { z-index: -1; }
.shelf-actions { width: 150px; flex: none; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.shelf-actions .t3 { white-space: normal; line-height: 1.35; }
.pill-dark {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgb(255 255 255 / .1); font-size: 12px; font-weight: 600;
}
.pill-dark svg { width: 13px; height: 13px; fill: currentColor; }

/* Clipboard */
.copies { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.copy-row {
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px;
  padding: 5px 10px; border-radius: 8px;
}
.copy-row:first-child { background: rgb(255 255 255 / .07); }
.copy-row .t2 { color: rgb(255 255 255 / .82); font-size: 12.5px; display: flex; align-items: center; gap: 7px; }
.kind { font-size: 10.5px; font-weight: 600; color: rgb(255 255 255 / .4); }
.swatch { width: 12px; height: 12px; border-radius: 3px; background: #1d4e9e; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }

/* System */
.sys { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sys .label { margin-bottom: 0; }
.big { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cores { display: flex; gap: 3px; height: 24px; align-items: flex-end; }
.cores i { flex: 1; height: 100%; border-radius: 1.5px; background: #4fc26b; transform-origin: 50% 100%; transform: scaleY(calc(var(--h, 30) / 100)); transition: transform .9s var(--ease); }
.cores i:nth-child(n+5) { background: #4d8df7; }
.sys .meter { flex: none; margin: 9px 0 9px; }
.meter i.mem { width: 100%; background: #4d8df7; transform-origin: 0 50%; transform: scaleX(var(--m, .61)); }
.meter i.disk { width: 57%; background: rgb(255 255 255 / .7); }
.spark { width: 100%; height: 26px; }
.spark path { fill: none; stroke: #4d8df7; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sys .t3 { white-space: normal; line-height: 1.3; }

.swipe-hint {
  margin-top: 14px; text-align: center;
  font-size: 12.5px; color: var(--ink-40);
  opacity: 0; transition: opacity .6s var(--ease);
}
.swipe-hint.is-shown { opacity: 1; }
.swipe-hint.is-gone { opacity: 0; }

.hero-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto;
  padding-bottom: clamp(40px, 10vh, 104px);
  display: grid; grid-template-columns: 1fr 330px; gap: 48px; align-items: end;
}
.hero-aside { display: flex; flex-direction: column; gap: 20px; padding-bottom: .5em; }
.hero-aside .lede { font-size: 17px; }
.actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* Entrance (only with JS; without it everything rests in place) */
/* Entrance: CSS only, so the page rests in its final state even without JS. */
.menubar { animation: fade .5s var(--ease) both; }
.h1 .line > span { animation: rise .9s var(--ease) both; }
.h1 .line:nth-child(1) > span { animation-delay: .35s; }
.h1 .line:nth-child(2) > span { animation-delay: .47s; }
.hero-aside > * { animation: up .8s var(--ease) both; }
.hero-aside > :nth-child(1) { animation-delay: .6s; }
.hero-aside > :nth-child(2) { animation-delay: .72s; }
.hero-aside > :nth-child(3) { animation-delay: .84s; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(110%); } }
@keyframes up { from { opacity: 0; transform: translateY(16px); } }

/* ——— Sections ——— */
.section { padding-block: clamp(96px, 13vw, 168px); }
.head { display: grid; grid-template-columns: 1fr minmax(0, 30rem); gap: 32px 64px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.head .lede { padding-bottom: .4em; }

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* 2. Menu bar demo */
.bar-demo {
  position: relative; overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(118deg, #163d7d 0%, #24569f 46%, #6e7fa6 100%);
  color: #fff;
}
.demo-bar {
  height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 18px 0 22px;
  background: rgb(255 255 255 / .2); border-bottom: 1px solid rgb(255 255 255 / .16);
  font-family: var(--sys); font-size: 15px;
}
.demo-bar .mb-left { gap: 22px; }
.demo-bar .mb-apple { width: 16px; height: 19px; }
.demo-icons { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.di {
  display: grid; place-items: center; height: 30px; width: 36px; flex: none; border-radius: 7px;
  overflow: hidden;
  transition: width .38s var(--ease), opacity .3s var(--ease);
  transition-delay: calc(var(--i, 0) * 30ms);
}
.di svg { width: 18px; height: 16px; fill: #fff; }
.di.wide svg { width: 27px; height: 13px; }
.di.wide { width: 42px; }
.di.cup { width: 0; opacity: 0; cursor: pointer; }
.di.cup:hover { background: rgb(255 255 255 / .16); }
.demo-bar .mb-clock { margin-left: 12px; }
.bar-demo[data-on="true"] .di.hide { width: 0; opacity: 0; }
.bar-demo[data-on="true"] .di.cup { width: 36px; opacity: 1; }
.bar-demo[data-on="true"][data-bar="open"] .di.cup { background: rgb(255 255 255 / .22); }
.demo-floor { position: relative; height: clamp(150px, 15vw, 190px); }
.glassbar {
  position: absolute; top: 14px; right: var(--bar-right, 200px);
  display: flex; gap: 4px; padding: 7px 10px; border-radius: 16px;
  background: rgb(255 255 255 / .2);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .32), 0 10px 30px rgb(9 20 45 / .28);
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: 70% 0;
  transition: opacity .25s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.glassbar span { width: 34px; height: 30px; display: grid; place-items: center; }
.glassbar svg { width: 18px; height: 16px; fill: #fff; }
.bar-demo[data-bar="open"] .glassbar { opacity: 1; transform: none; }
.demo-controls {
  position: absolute; left: 22px; bottom: 20px;
  display: flex; align-items: center; gap: 20px;
}
.switch {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 15px; font-weight: 500;
}
.switch i {
  position: relative; width: 46px; height: 28px; border-radius: 999px;
  background: rgb(255 255 255 / .28); transition: background-color .25s var(--ease);
}
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .25); transition: transform .3s var(--spring);
}
.switch[aria-checked="true"] i { background: #4fc26b; }
.switch[aria-checked="true"] i::after { transform: translateX(18px); }
.switch:focus-visible, .textbutton:focus-visible { outline-color: #fff; }
.textbutton {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 15px; color: rgb(255 255 255 / .85); text-decoration: underline; text-underline-offset: .2em;
  text-decoration-color: rgb(255 255 255 / .4);
}
.textbutton:disabled { opacity: .35; cursor: default; text-decoration: none; }

.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 72px;
  margin-top: clamp(56px, 6vw, 88px);
}
.fact { padding-top: 22px; border-top: 1px solid var(--line); }
.fact h3 { font-size: 20px; font-weight: 600; font-stretch: 108%; letter-spacing: -0.02em; margin-bottom: 8px; }
.fact p { color: var(--ink-60); max-width: 30rem; }
.cat {
  display: inline-block; vertical-align: -4px; width: 32px; height: 18px; margin: 0 4px;
  border-radius: 4px; box-shadow: 0 0 0 3px #111;
  background: url("img/cat-run.png") 0 0 / 384px 18px no-repeat, #111;
  animation: catrun 1.25s steps(12) infinite;
}
@keyframes catrun { to { background-position: -384px 0; } }

/* 3. Rooms */
.section-rooms { padding-top: 0; }
.rooms-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 80px; }
.rooms-grid .head { grid-template-columns: 1fr; align-items: start; margin-bottom: 0; }
.room-list { grid-column: 2; grid-row: 1 / span 2; list-style: none; padding: 0; counter-reset: none; }
.room-list li { border-top: 1px solid var(--line); }
.room-list li:last-child { border-bottom: 1px solid var(--line); }
.room-list button {
  width: 100%; display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: baseline;
  padding: 24px 0; border: 0; background: none; text-align: left; cursor: pointer;
}
.rl-name {
  font-size: 26px; font-weight: 560; font-stretch: 114%; letter-spacing: -0.035em; line-height: 1.1;
  transition: transform .3s var(--ease);
}
.rl-text { color: var(--ink-60); transition: color .3s var(--ease); }
.room-list button:hover .rl-name { transform: translateX(6px); }
.room-list button:hover .rl-text { color: var(--ink-80); }
.stats-aside { align-self: end; display: flex; flex-direction: column; gap: 16px; }
.statitems {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 18px;
  padding: 9px 16px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 6px 20px rgb(17 17 17 / .06);
  font-family: var(--sys); font-size: 13px;
}
.statitem { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.statitem b { font-weight: 600; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.graph { display: inline-flex; align-items: flex-end; gap: 1px; width: 30px; height: 16px; }
.graph i { flex: 1; height: 100%; background: var(--ink); border-radius: .5px; transform-origin: 50% 100%; transform: scaleY(var(--g, .3)); transition: transform .6s var(--ease); }
.note { color: var(--ink-60); max-width: 26rem; font-size: 15px; }

/* 4. Agents: a dark sheet */
.section-dark {
  position: relative; z-index: 1;
  background: var(--night); color: #f3f3f1;
  border-radius: 40px 40px 0 0;
  padding-bottom: calc(clamp(96px, 13vw, 168px) + 40px);
}
.section-dark .h2 { color: #f3f3f1; }
.section-dark .lede { color: rgb(243 243 241 / .6); }
.agents-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px 80px; }
.agents-grid .head { grid-column: 1 / -1; }
.banners { display: flex; flex-direction: column; gap: 18px; font-family: var(--sys); }
.banner {
  display: flex; align-items: center; gap: 12px;
  width: min(440px, 100%); padding: 13px 16px 13px 14px;
  background: #000; border-radius: 4px 4px 22px 22px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .07);
}
.banner > div { flex: 1; min-width: 0; }
.b-mark {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-style: normal; font-weight: 800; font-size: 14px;
}
.b-mark svg { width: 15px; height: 15px; }
.b-orange { background: rgb(245 165 36 / .2); color: #f5a524; }
.b-green { background: rgb(79 194 107 / .2); color: #4fc26b; }
.b-pill { padding: 5px 13px; border-radius: 999px; background: rgb(255 255 255 / .12); font-size: 12px; font-weight: 600; }
.b-pill-orange { background: #f5a524; color: #1a1205; }
.banner-plan { gap: 12px; }
.dark-facts { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 22px; align-self: center; }
.dark-facts li { color: rgb(243 243 241 / .6); padding-left: 18px; border-left: 1px solid rgb(255 255 255 / .14); }
.dark-facts b { color: #f3f3f1; font-weight: 600; }
.dark-facts code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; color: #f3f3f1; }

/* 5. Before you install, Questions: a light sheet over the dark one */
.sheet-over {
  position: relative; z-index: 2;
  margin-top: -40px; border-radius: 40px 40px 0 0; background: var(--bg);
}
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px 88px; }
.needs { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.needs li { color: var(--ink-60); padding-left: 18px; border-left: 1px solid var(--line); }
.needs b { color: var(--ink); font-weight: 600; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 36px 18px 0; font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; margin-top: -6px;
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 11px no-repeat;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-60); padding: 0 36px 20px 0; }

/* 6. Download */
.section-download { padding-top: clamp(48px, 6vw, 96px); }
.download { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.download-icon { width: 104px; height: 104px; filter: drop-shadow(0 12px 24px rgb(17 17 17 / .14)); }
.verify { margin-top: 10px; color: var(--ink-60); font-size: 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; max-width: 100%; }
.checksum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.checksum code, .verify pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--ink-80);
  overflow-wrap: anywhere;
}
.verify pre { margin: 0; padding: 10px 16px; border-radius: 10px; background: rgb(17 17 17 / .05); max-width: 100%; overflow-x: auto; }
.copy {
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-size: 13px; font-weight: 500;
}
.copy:hover { border-color: var(--ink-40); }

.footer { padding: 28px 0 40px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-60); }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer p { display: flex; align-items: center; gap: 10px; }
.footer img { border-radius: 5px; }

/* ——— Responsive ——— */
@media (max-width: 1100px) {
  .hero-copy { grid-template-columns: 1fr; gap: 28px; }
  .hero-aside { max-width: 30rem; }
}
@media (max-width: 900px) {
  .head, .rooms-grid, .agents-grid, .two-col { grid-template-columns: 1fr; }
  .room-list { grid-column: 1; grid-row: auto; }
  .facts { grid-template-columns: 1fr; gap: 32px; }
  .mb-menu:nth-child(n+5) { display: none; }
}
@media (max-width: 720px) {
  .menubar { padding: 0 10px 0 14px; font-size: 12.5px; }
  .mb-menu, .mb-right .mb-icon:not(.mb-cup):not(.mb-wide) { display: none; }
  .mb-clock { font-size: 12px; }
  .hero { min-height: 0; padding-top: calc((var(--ph) + 40px) * var(--s) + 40px); padding-bottom: 56px; }
  .hero-copy { position: relative; padding-bottom: 0; }
  .h1 { font-size: clamp(34px, 9.6vw, 72px); }
  .h1 .line > span { white-space: normal; }
  .demo-bar .mb-menu { display: none; }
  .demo-bar .mb-clock { display: none; }
  .di { width: 28px; }
  .di.wide { width: 34px; }
  .bar-demo[data-on="true"] .di.cup { width: 28px; }
  .room-list button { grid-template-columns: 1fr; gap: 6px; }
  .demo-controls { flex-direction: column; align-items: flex-start; gap: 14px; }
  .glassbar { right: 12px; }
}
@media (max-width: 480px) {
  .demo-bar .mb-left { display: none; }
  .demo-bar { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .room { transform: none !important; }
  .cat, .bars i { animation: none !important; }
}

/* ——— Developer positioning (landing v4) ——— */
/* 2. One app instead of four */
.section-oneapp { padding-bottom: clamp(72px, 9vw, 120px); }
.swap { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.swap li {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 22px;
  background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgb(17 17 17 / .05);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.swap li:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgb(17 17 17 / .09); }
.swap-n { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--accent); }
.swap h3 { font-size: 22px; font-weight: 560; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1.15; }
.swap p { color: var(--ink-60); font-size: 15px; flex: 1; }
.swap-link { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.swap-link::after { content: " →"; }
.swap-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.oneapp-note { margin-top: 28px; color: var(--ink-60); font-size: 15px; }
.js .swap.reveal li { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .swap.reveal.in li { opacity: 1; transform: none; }
.js .swap.reveal.in li:nth-child(2) { transition-delay: .08s; }
.js .swap.reveal.in li:nth-child(3) { transition-delay: .16s; }
.js .swap.reveal.in li:nth-child(4) { transition-delay: .24s; }

/* 3. Servers, inside the dark sheet */
.servers-block { margin-top: clamp(96px, 12vw, 150px); }
.servers { display: flex; flex-direction: column; gap: 10px; font-family: var(--sys); width: min(480px, 100%); }
.srv {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #000; border-radius: 14px; box-shadow: 0 0 0 1px rgb(255 255 255 / .07);
}
.srv-scope { width: 15px; height: 15px; flex: none; color: rgb(255 255 255 / .5); fill: currentColor; }
.srv-open { color: #f5a524; }
.srv-main { flex: 1; min-width: 0; }
.srv-port { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: #fff; font-variant-numeric: tabular-nums; }
.inspect {
  margin: 6px 0 0; padding: 14px 16px; border-radius: 14px;
  background: rgb(255 255 255 / .04); box-shadow: 0 0 0 1px rgb(255 255 255 / .07);
  display: flex; flex-direction: column; gap: 6px;
}
.inspect div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.inspect dt { font-size: 11px; font-weight: 600; color: rgb(255 255 255 / .42); }
.inspect dd { margin: 0; font-size: 12px; color: rgb(255 255 255 / .75); overflow-wrap: anywhere; }

/* 4. System */
.system-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 80px; align-items: end; }
.facts-tight { margin-top: 0; }

@media (max-width: 1100px) {
  .swap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .system-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .swap { grid-template-columns: 1fr; }
  .srv { flex-wrap: wrap; }
  .srv .t3 { order: 5; flex-basis: 100%; padding-left: 27px; }
}

/* ——— The notch replica, interactive (landing: interactive notch) ——— */
.np button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; cursor: pointer; }
.np button:focus-visible { outline: 2px solid #8fb3f0; outline-offset: 2px; }

/* Music: real controls, three songs, a paused state. */
.ctl { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; transition: background .2s, transform .2s var(--spring); }
.ctl:hover { background: rgb(255 255 255 / .08); }
.ctl:active { transform: scale(.88); }
.np .controls { gap: 18px; }
.music.is-paused .bars i { animation-play-state: paused; transform: scaleY(.35); }
.music.is-paused .art { filter: saturate(.55) brightness(.8); }
.art { transition: background .5s var(--ease), filter .4s var(--ease); }
.art[data-art="1"] {
  background: linear-gradient(160deg, rgb(255 255 255 / .18), transparent 45%),
    conic-gradient(from 120deg at 60% 40%, #4d8df7, #163d7d, #9cc0ff, #0b1f45, #2f6fe0, #4d8df7);
  box-shadow: 0 6px 16px rgb(77 141 247 / .28);
}
.art[data-art="2"] {
  background: linear-gradient(160deg, rgb(255 255 255 / .18), transparent 45%),
    conic-gradient(from 40deg at 40% 50%, #4fc26b, #12361d, #b6e8c2, #1d4e2a, #3a9a55, #4fc26b);
  box-shadow: 0 6px 16px rgb(79 194 107 / .26);
}
.music-text .t1, .music-text .t2 { transition: opacity .25s; }
.music.is-switching .music-text .t1, .music.is-switching .music-text .t2 { opacity: 0; }

/* Up next: events open a detail with Join. */
.np .event { width: 100%; padding: 3px 6px; margin: -3px -6px; border-radius: 9px; transition: background .2s; }
.np .event:hover { background: rgb(255 255 255 / .06); }
.upnext.is-detail > .event { display: none; }
.ev-detail { display: flex; align-items: center; gap: 9px; min-width: 0; animation: np-rise .35s var(--spring) both; }
.ev-detail[hidden] { display: none; }
.ev-detail .ev-bar { height: 44px; }
.ev-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-text .t3 { white-space: normal; }
.ev-back {
  width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; line-height: 1; color: rgb(255 255 255 / .6); background: rgb(255 255 255 / .08);
}
.np .ev-back { background: rgb(255 255 255 / .08); }
.np .join { background: #2f6fe0; padding: 4px 10px; transition: background .2s, transform .2s var(--spring); }
.np button.join:hover { background: #4d8df7; }
.np button.join:active { transform: scale(.94); }
.join.is-joining { background: rgb(47 111 224 / .55); pointer-events: none; }
.join.is-joining svg { animation: np-pulse .9s ease-in-out infinite; }
@keyframes np-pulse { 50% { opacity: .3; } }
@keyframes np-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Agents: rows open their session. */
.np .agent, .np .session { width: 100%; padding: 4px 6px; margin: -4px -6px; border-radius: 9px; transition: background .2s; }
.np .agent:hover, .np .session:hover { background: rgb(255 255 255 / .07); }
.np .session[aria-expanded="true"], .np .agent[aria-expanded="true"] { background: rgb(255 255 255 / .1); }
.np-badge.is-off { opacity: 0; }
.np-badge { transition: opacity .3s; }

/* Shelf and clipboard */
.np .pill-dark { transition: background .2s; }
.np button.pill-dark:hover { background: rgb(255 255 255 / .16); }
.file { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.files.is-empty .file { opacity: 0; transform: translateY(-8px) scale(.92); }
.np .copy-row { width: 100%; transition: background .2s; }
.np .copy-row:hover { background: rgb(255 255 255 / .05); }
.np .copy-row:first-child { background: rgb(255 255 255 / .07); }
.copy-row.is-copied .t3 { color: #4fc26b; }

/* The terminal window a session opens in. */
.term {
  position: absolute; left: 50%; top: calc(var(--ph) * var(--s) + 22px); z-index: 30;
  width: min(560px, calc(100vw - 32px));
  border-radius: 12px; overflow: hidden;
  background: #0d0d0e; color: rgb(255 255 255 / .86);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 70px rgb(17 17 17 / .32), 0 8px 18px rgb(17 17 17 / .18);
  transform: translate(-50%, -14px) scale(.97); opacity: 0;
  transition: transform .42s var(--spring), opacity .22s var(--ease);
  outline: none;
}
.term[hidden] { display: block; visibility: hidden; pointer-events: none; }
.term.is-open { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.term-bar {
  position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  background: #1c1c1e; border-bottom: 1px solid rgb(255 255 255 / .06);
}
.term-light { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #3a3a3c; border: 0; padding: 0; }
.term-bar:hover .term-light:nth-of-type(1), .term-close { background: #ff5f57; }
.term-bar i.term-light:nth-of-type(1) { background: #febc2e; }
.term-bar i.term-light:nth-of-type(2) { background: #28c840; }
.term-close { cursor: pointer; position: relative; }
.term-close::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/1 var(--sys); color: rgb(0 0 0 / .55); opacity: 0; }
.term-close:hover::after, .term-close:focus-visible::after { opacity: 1; }
.term-close:focus-visible { outline: 2px solid #8fb3f0; outline-offset: 2px; }
.term-title {
  position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;
  font: 600 12px var(--sys); color: rgb(255 255 255 / .5);
}
.term-body {
  height: 248px; overflow: auto; padding: 14px 16px 16px;
  font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
  scrollbar-width: thin;
}
.tl { white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-dim { color: rgb(255 255 255 / .38); }
.tl-prompt { color: #fff; margin-top: 4px; }
.tl-prompt::before { content: "> "; color: #d9a35b; }
.tl-tool::before { content: "⏺ "; color: #4fc26b; }
.tl-say::before { content: "⏺ "; color: #fff; }
.tl-out { color: rgb(255 255 255 / .55); padding-left: 2ch; }
.tl-out::before { content: "⎿  "; color: rgb(255 255 255 / .3); }
.tl-ok { color: #4fc26b; }
.tl-work { color: #f5a524; }
.tl-work::before { content: "✻ "; display: inline-block; animation: np-spin 2.4s linear infinite; }
@keyframes np-spin { to { transform: rotate(360deg); } }
.tl-cursor::after { content: ""; display: inline-block; width: .6em; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background: rgb(255 255 255 / .75); animation: np-blink 1s steps(1) infinite; }
@keyframes np-blink { 50% { opacity: 0; } }
.ask {
  margin: 8px 0 4px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgb(245 165 36 / .45); background: rgb(245 165 36 / .06);
}
.ask p { margin-bottom: 8px; color: #fff; }
.ask-options { display: flex; gap: 8px; flex-wrap: wrap; }
.ask-options button {
  font: inherit; color: #fff; background: rgb(255 255 255 / .08); border: 0; border-radius: 6px;
  padding: 4px 12px; cursor: pointer; transition: background .2s;
}
.ask-options button:first-child { background: #f5a524; color: #1a1205; font-weight: 600; }
.ask-options button:hover { filter: brightness(1.1); }
.ask-options button:focus-visible { outline: 2px solid #8fb3f0; outline-offset: 2px; }
.ask.is-answered { opacity: .55; }
.ask.is-answered .ask-options { display: none; }

@media (max-width: 560px) {
  .term-body { height: 220px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-work::before, .tl-cursor::after, .join.is-joining svg { animation: none !important; }
}
.ev-text .t2 { white-space: normal; }
.swipe-hint.is-under-term { opacity: 0; }

/* ——— The System room and the stat items, interactive (landing: interactive System room) ——— */
.sys-cols { flex: 1; min-width: 0; display: flex; gap: 14px; align-items: stretch; }
.room-system.is-detail .sys-cols { display: none; }
.np .sys { padding: 4px 6px; margin: -4px -6px; border-radius: 10px; transition: background .2s; }
.np .sys:hover { background: rgb(255 255 255 / .06); }
.sys .label, .sys .big, .sys .t3, .sys .meter { display: block; }
.meter i.mem { transition: transform .9s var(--ease); }
/* The sparkline redraws in steps, as the app's graphs do: a transition on the path's d runs on the main thread and,
   restarted every second, kept the page laying out on every frame. */

.sys-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; animation: np-rise .35s var(--spring) both; }
.sys-detail[hidden] { display: none; }
.sd-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sd-head .t1 { flex: 1; min-width: 0; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgb(255 255 255 / .08); flex: none; }
.seg[hidden] { display: none; }
.seg button { font: inherit; border: 0; background: none; cursor: pointer; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; color: rgb(255 255 255 / .55); transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: rgb(255 255 255 / .16); color: #fff; }
.sd-apps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sd-apps[hidden] { display: none; }
.sd-apps li { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) 128px; align-items: center; gap: 12px; animation: np-rise .35s var(--spring) both; }
.sd-apps li:nth-child(2) { animation-delay: .04s; }
.sd-apps li:nth-child(3) { animation-delay: .08s; }
.sd-apps li:nth-child(4) { animation-delay: .12s; }
.sd-apps .t2 { color: rgb(255 255 255 / .82); }
.sd-apps .t3 { text-align: right; overflow: hidden; text-overflow: ellipsis; }
.sd-bar { height: 5px; border-radius: 3px; background: rgb(255 255 255 / .1); overflow: hidden; }
.sd-bar.is-total { visibility: hidden; }
.sd-bar i { display: block; height: 100%; width: 100%; border-radius: 3px; background: #4fc26b; transform-origin: 0 50%; transform: scaleX(var(--w, 0)); transition: transform .9s var(--ease); }
.sys-detail[data-part="memory"] .sd-bar i, .sys-detail[data-part="network"] .sd-bar i { background: #4d8df7; }
.sys-detail[data-part="disk"] .sd-bar i { background: rgb(255 255 255 / .7); }
.sd-history { display: flex; flex-direction: column; gap: 4px; }
.sd-history[hidden] { display: none; }
.sd-history svg { width: 100%; height: 66px; display: block; }
.sd-line { fill: none; stroke: #4fc26b; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sd-area { fill: rgb(79 194 107 / .16); }
.sys-detail[data-part="memory"] .sd-line, .sys-detail[data-part="network"] .sd-line { stroke: #4d8df7; }
.sys-detail[data-part="memory"] .sd-area, .sys-detail[data-part="network"] .sd-area { fill: rgb(77 141 247 / .18); }
.sys-detail[data-part="disk"] .sd-line { stroke: rgb(255 255 255 / .75); }
.sys-detail[data-part="disk"] .sd-area { fill: rgb(255 255 255 / .1); }

/* Stat items in the menu bar: buttons, a style switch, red under strain. */
.statitems { flex-wrap: wrap; }
.statitem { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 3px 6px; margin: -3px -6px; border-radius: 7px; transition: background .2s, color .3s; }
.statitem:hover { background: rgb(17 17 17 / .05); }
.statitems[data-style="value"] .graph { display: none; }
.statitems[data-style="graph"] .statitem b { display: none; }
.statitem.is-strained { color: #d93a3f; }
.statitem.is-strained .graph i { background: #d93a3f; }
.stat-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-family: var(--sys); }
.seg-light { background: rgb(17 17 17 / .06); border-radius: 10px; padding: 3px; }
.seg-light button { font-size: 13px; padding: 5px 11px; border-radius: 7px; color: var(--ink-60); }
.seg-light button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(17 17 17 / .14); }
.seg-light-button {
  font: inherit; font-size: 13px; font-weight: 600; border: 0; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; background: rgb(17 17 17 / .06); color: var(--ink);
  transition: background .2s, color .2s, transform .2s var(--spring);
}
.seg-light-button:hover { background: rgb(17 17 17 / .1); }
.seg-light-button:active { transform: scale(.96); }
.seg-light-button[aria-pressed="true"] { background: #d93a3f; color: #fff; }

/* Servers: rows open the inspector; Stop takes two clicks. */
.srv-main { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; transition: background .2s; }
.srv-main:hover { background: rgb(255 255 255 / .05); }
.srv-main[aria-pressed="true"] { background: rgb(255 255 255 / .08); }
.srv-main .t1, .srv-main .t2 { display: block; }
.srv-stop { font: inherit; font-size: 12px; font-weight: 600; border: 0; color: #fff; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--spring); }
.srv-stop:hover { background: rgb(255 255 255 / .2); }
.srv-stop.b-pill-orange { color: #1a1205; }
.srv-stop.b-pill-orange:hover { background: #f7b445; }
.srv-stop:active { transform: scale(.94); }
.srv-main:focus-visible, .srv-stop:focus-visible, .srv-again:focus-visible { outline: 2px solid #8fb3f0; outline-offset: 2px; }
.srv { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.srv.is-stopping { opacity: 0; transform: translateX(-12px); }
.srv[hidden] { display: none; }
.srv-empty { padding: 12px 2px; white-space: normal; }
.srv-again { font: inherit; border: 0; background: none; cursor: pointer; padding: 0; color: rgb(255 255 255 / .85); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgb(255 255 255 / .4); }
.inspect[hidden] { display: none; }

/* ——— The pinned notch: the menu bar and the notch stay at the top of the screen while the page scrolls ——— */
/* Without JS the replica sits in the hero as before; with it, the bar is the page's top edge all the way down. */
.js .menubar { position: fixed; z-index: 35; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.js.is-scrolled .menubar {
  background: rgb(246 246 244 / .78);
  -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
}
.js .stage { position: fixed; z-index: 40; }
.js .term { position: fixed; z-index: 45; }
section[id], #servers { scroll-margin-top: calc(var(--nh) + 20px); }
.js.is-scrolled .swipe-hint { opacity: 0; pointer-events: none; }

/* Collapsed, only the housing (and its wings) takes the pointer; the rest of the plate lets the page through. */
.notch { --ww: 0px; }
.js .notch[data-open="false"] { pointer-events: none; }
.np-hit {
  position: absolute; top: 0; height: var(--nh); z-index: 2;
  left: calc((var(--pw) - var(--nw)) / 2 - var(--ww)); right: calc((var(--pw) - var(--nw)) / 2 - var(--ww));
  pointer-events: auto; cursor: pointer;
  transition: left .42s var(--spring), right .42s var(--spring);
}
.notch[data-open="true"] .np-hit { display: none; }
.js .notch[data-open="false"] .np-ears, .js .notch[data-open="false"] .np-rooms {
  visibility: hidden;
  transition: opacity .12s ease-in, filter .12s ease-in, visibility 0s linear .12s;
}
.js .notch[data-open="true"] .np-ears, .js .notch[data-open="true"] .np-rooms { visibility: visible; }

/* Compact: the plate grows sideways into two wings, the way the app shows music, an agent or a stat. */
.notch[data-compact]:not([data-open="true"]) { --ww: 58px; }
.notch::before {
  clip-path: inset(0 calc((var(--pw) - var(--nw)) / 2 - var(--ww)) calc(var(--ph) - var(--nh)) round 0 0 12px 12px);
}
.notch[data-open="true"]::before { clip-path: inset(0 0 0 0 round 0 0 26px 26px); }
.notch::after { left: calc((var(--pw) - var(--nw)) / 2 - var(--ww) - 9px); }
.np::before { right: calc((var(--pw) - var(--nw)) / 2 - var(--ww) - 9px); }
.notch[data-open="true"]::after { left: -9px; }
.notch[data-open="true"] .np::before { right: -9px; }

.np-wings { position: absolute; inset: 0 0 auto; height: var(--nh); pointer-events: none; z-index: 1; }
.wing-set { position: absolute; inset: 0; opacity: 0; filter: blur(4px); transition: opacity .12s ease-in, filter .12s ease-in; }
.notch[data-compact="music"]:not([data-open="true"]) .wing-set[data-for="music"],
.notch[data-compact="agents"]:not([data-open="true"]) .wing-set[data-for="agents"],
.notch[data-compact="system"]:not([data-open="true"]) .wing-set[data-for="system"] {
  opacity: 1; filter: blur(0); transition: opacity .24s ease-out .07s, filter .24s ease-out .07s;
}
.wing {
  position: absolute; top: 0; height: var(--nh); width: 58px;
  display: flex; align-items: center; gap: 5px;
  color: #fff; font-family: var(--sys); -webkit-font-smoothing: antialiased;
}
.wing-l { left: calc((var(--pw) - var(--nw)) / 2 - 58px); justify-content: flex-start; padding-left: 14px; }
.wing-r { right: calc((var(--pw) - var(--nw)) / 2 - 58px); justify-content: flex-end; padding-right: 14px; }
.wing-art { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; }
.wing-icon { width: 15px; height: 15px; fill: rgb(255 255 255 / .8); }
.wing-spark { fill: #f5a524; }
.wing-dot { width: 7px; height: 7px; border-radius: 50%; background: #f5a524; box-shadow: 0 0 0 3px rgb(245 165 36 / .2); animation: wing-pulse 1.6s ease-in-out infinite; }
@keyframes wing-pulse { 50% { box-shadow: 0 0 0 5px rgb(245 165 36 / 0); } }
.wing-num { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wing .bars { height: 13px; }
.np-wings.is-paused .bars i { animation-play-state: paused; transform: scaleY(.35); }
.np-wings.is-paused .wing-art { filter: saturate(.55) brightness(.8); }

@media (prefers-reduced-motion: reduce) {
  .wing-dot { animation: none; }
}

/* ——— Banners grow out of the notch (the app's .alert shape: NotchPanel.swift NotchView.size(for:), BannerRow) ———
   The plate widens to the banner (380 pt, AlertSize) and grows down by one 36 pt row under the notch, still hanging
   from the top edge with the same shoulders; its corners are the notch's (NotchShape bottomRadius 14). Springs as
   NotchMotion: out of the notch 0.38 s with a little bounce, back to it 0.36 s, open 0.4 s, closing 0.34 s. */
/* The plate and the row both read these. On a phone the replica is scaled by --s; the banner keeps its real size
   (380 pt, or the screen's width less 12 px each side), so it is drawn larger in the plate's own units. */
.stage {
  --bw: min(calc(min(380px, 100vw - 24px) / var(--s)), var(--pw));
  --bh: calc(36px / var(--s));
}
.notch::before { transition: clip-path .36s var(--ease); }
.notch::after, .np::before { transition: left .36s var(--ease), right .36s var(--ease); }
.notch[data-compact]::before, .notch[data-banner]::before { transition: clip-path .38s var(--spring); }
.notch[data-compact]::after, .notch[data-banner]::after,
.notch[data-compact] .np::before, .notch[data-banner] .np::before { transition: left .38s var(--spring), right .38s var(--spring); }
.notch[data-open="true"]::before { transition: clip-path .42s var(--spring); }
.notch[data-open="true"]::after, .notch[data-open="true"] .np::before { transition: left .42s var(--spring), right .42s var(--spring); }
.notch[data-closing]::before { transition: clip-path .34s var(--ease); }
.notch[data-closing]::after, .notch[data-closing] .np::before { transition: left .34s var(--ease), right .34s var(--ease); }

.notch[data-banner]:not([data-open="true"]) { --ww: 0px; }   /* only the notch itself opens the panel (NotchHover) */
.notch[data-banner]:not([data-open="true"])::before {
  clip-path: inset(0 calc((var(--pw) - var(--bw)) / 2) calc(var(--ph) - var(--nh) - var(--bh)) round 0 0 calc(14px / var(--s)) calc(14px / var(--s)));
}
.notch[data-banner]:not([data-open="true"])::after { left: calc((var(--pw) - var(--bw)) / 2 - 9px); }
.notch[data-banner]:not([data-open="true"]) .np::before { right: calc((var(--pw) - var(--bw)) / 2 - 9px); }
/* A banner outranks the wings: they clear while it shows. */
.notch[data-banner][data-compact]:not([data-open="true"]) .wing-set[data-for] {
  opacity: 0; filter: blur(4px); transition: opacity .12s ease-in, filter .12s ease-in;
}

/* The row: laid out at its final place under the notch; only the plate around it morphs. */
.np-banner {
  position: absolute; top: var(--nh); left: calc((var(--pw) - var(--bw)) / 2); z-index: 3;
  width: calc(var(--bw) * var(--s)); height: 36px; padding: 0 12px 2px 18px;
  scale: calc(1 / var(--s)); transform-origin: 0 0;
  display: flex; align-items: center; gap: 9px;
  color: #fff; font-family: var(--sys); font-size: 12px; line-height: 1;
  -webkit-font-smoothing: antialiased;
  opacity: 0; filter: blur(6px); visibility: hidden; pointer-events: none;
  transition: opacity .12s ease-in, filter .12s ease-in, visibility 0s linear .12s;
}
.np-banner[hidden] { display: flex; }
.np-banner.is-shown {
  opacity: 1; filter: blur(0); visibility: visible; pointer-events: auto;
  transition: opacity .24s ease-out .07s, filter .24s ease-out .07s, visibility 0s;
}
/* While the panel is open the banner waits behind it. */
.notch[data-open="true"] ~ .np-banner.is-shown {
  opacity: 0; filter: blur(6px); visibility: hidden; pointer-events: none;
  transition: opacity .12s ease-in, filter .12s ease-in, visibility 0s linear .12s;
}
:is(.np-banner, .b-row, .np-side) .b-lead { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
:is(.np-banner, .b-row, .np-side) .b-lead svg { width: 15px; height: 15px; fill: currentColor; }
:is(.np-banner, .b-row, .np-side) .b-lead-wait {
  width: 15px; height: 15px; margin: 0 2.5px; border-radius: 50%;
  background: #ff9f0a; color: #000; font-size: 11px; font-weight: 800;
}
:is(.np-banner, .b-row, .np-side) .b-lead-done { color: #30d158; }
:is(.np-banner, .b-row, .np-side) .b-lead-busy { color: #ff9f0a; }
:is(.np-banner, .b-row, .np-side) .b-cap { display: block; width: 4px; height: 18px; border-radius: 2px; background: #0a84ff; }
:is(.np-banner, .b-row) .t1 { flex: none; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
:is(.np-banner, .b-row) .t2 { flex: 0 1 auto; min-width: 0; color: rgb(235 235 245 / .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.np-banner, .b-row) .b-actions { margin-left: auto; display: flex; gap: 6px; flex: none; }
/* NotchPillStyle: 24 pt capsule, 12 pt semibold, white on the tint at 90 % (70 % pressed), or white at 14 %. */
:is(.np-banner, .b-row) .b-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 11px;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 600 12px/1 var(--sys); color: #fff; background: rgb(255 255 255 / .14);
  transition: background-color .15s;
}
:is(.np-banner, .b-row) .b-pill svg { width: 10px; height: 10px; fill: currentColor; }
.np-banner .b-pill:hover { background: rgb(255 255 255 / .2); }
.np-banner .b-pill:active { background: rgb(255 255 255 / .24); }
:is(.np-banner, .b-row) .b-pill-orange { background: rgb(255 159 10 / .9); }
.np-banner .b-pill-orange:hover { background: #ff9f0a; }
.np-banner .b-pill-orange:active { background: rgb(255 159 10 / .7); }
:is(.np-banner, .b-row) .b-pill-blue { background: rgb(10 132 255 / .9); }
.np-banner .b-pill-blue:hover { background: #0a84ff; }
.np-banner .b-pill-blue:active { background: rgb(10 132 255 / .7); }
.np-banner .b-pill:disabled { cursor: default; opacity: .75; }
.np-banner .b-pill:focus-visible { outline: 2px solid #8fb3f0; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .notch::before, .notch::after, .np::before { transition: none !important; }
  .np-banner, .np-banner.is-shown { transition: opacity .15s linear, visibility 0s !important; filter: none !important; }
}

/* ——— Info-only moments open sideways (a device connecting, charging, a call opening) ———
   Nothing to press, so nothing grows under the notch: the plate widens out of the notch's sides at menu bar height,
   the wings' morph with the springs above, and the content follows a beat later. Moments with buttons keep the banner.
   --sw is one side's width in the plate's units: 150 pt, or what the screen leaves beside the notch on a phone. */
.stage { --sw: min(150px, calc(((100vw - 24px) / var(--s) - var(--nw)) / 2)); }
.notch[data-side]::before { transition: clip-path .38s var(--spring); }
.notch[data-side]::after, .notch[data-side] .np::before { transition: left .38s var(--spring), right .38s var(--spring); }
.notch[data-side]:not([data-open="true"])::before {
  clip-path: inset(0 calc((var(--pw) - var(--nw)) / 2 - var(--sw)) calc(var(--ph) - var(--nh)) round 0 0 12px 12px);
}
.notch[data-side]:not([data-open="true"])::after { left: calc((var(--pw) - var(--nw)) / 2 - var(--sw) - 9px); }
.notch[data-side]:not([data-open="true"]) .np::before { right: calc((var(--pw) - var(--nw)) / 2 - var(--sw) - 9px); }
/* A sideways moment outranks the wings: they clear while it shows. */
.notch[data-side][data-compact]:not([data-open="true"]) .wing-set[data-for] {
  opacity: 0; filter: blur(4px); transition: opacity .12s ease-in, filter .12s ease-in;
}
.np-side {
  position: absolute; top: 0; z-index: 3;
  left: calc((var(--pw) - var(--nw)) / 2 - var(--sw)); width: calc(var(--nw) + 2 * var(--sw)); height: var(--nh);
  color: #fff; font-family: var(--sys); font-size: 12px; line-height: 1; -webkit-font-smoothing: antialiased;
  opacity: 0; filter: blur(6px); visibility: hidden; pointer-events: none;
  transition: opacity .12s ease-in, filter .12s ease-in, visibility 0s linear .12s;
}
.np-side[hidden] { display: block; }
.np-side.is-shown {
  opacity: 1; filter: blur(0); visibility: visible;
  transition: opacity .24s ease-out .07s, filter .24s ease-out .07s, visibility 0s;
}
.notch[data-open="true"] ~ .np-side.is-shown, .notch[data-banner] ~ .np-side.is-shown {
  opacity: 0; filter: blur(6px); visibility: hidden;
  transition: opacity .12s ease-in, filter .12s ease-in, visibility 0s linear .12s;
}
.ns { position: absolute; top: 0; bottom: 0; width: var(--sw); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.ns-l { left: 0; padding-left: 14px; }
.ns-r { right: 0; padding-right: 14px; justify-content: flex-end; }
.ns .s1 { font-weight: 600; }
.ns .s2 { color: rgb(235 235 245 / .62); }
.ns .s-num { font-variant-numeric: tabular-nums; }
.ns > svg { width: 14px; height: 10px; fill: rgb(235 235 245 / .62); flex: none; }
.np-side .b-lead { width: 18px; height: 18px; }
.np-side .b-lead-device { color: #fff; }
.np-side.is-shown .b-batt i { width: calc((100% - 4px) * var(--lvl, 0) / 100); }
.np-side .b-rings { margin-left: 0; gap: 7px; }
.np-side .b-ring { gap: 3px; }
.np-side .b-ring svg { width: 13px; height: 13px; }
.np-side.is-shown .b-ring circle.arc { stroke-dasharray: calc(var(--lvl, 0) * .9425) 94.25; }
/* On a phone the plate is scaled down: keep the glyph, the level and the rings, drop the words. */
@media (max-width: 560px) { .ns .s-long { display: none; } .ns { gap: 4px; } .ns-l { padding-left: 10px; } .ns-r { padding-right: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .np-side, .np-side.is-shown { transition: opacity .15s linear, visibility 0s !important; filter: none !important; }
}

/* ——— Coming soon: the download buttons' place, quiet and not clickable ——— */
.button.is-soon, .button.is-soon:hover { background: rgb(17 17 17 / .08); color: var(--ink-60); cursor: default; box-shadow: none; transform: none; }

/* The pictures of banners (Agents section): a strip of menu bar with the notch, and the banner grown out of it. */
.banners { gap: 22px; }
.banner-scene { position: relative; width: min(440px, 100%); height: 74px; font-family: var(--sys); -webkit-font-smoothing: antialiased; }
.banner-scene::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 38px;
  background: rgb(255 255 255 / .12); border-radius: 12px 12px 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.banner-shape {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(380px, calc(100% - 24px)); height: 74px;
  background: #000; color: #fff; border-radius: 0 0 14px 14px;
}
.banner-shape::before, .banner-shape::after { content: ""; position: absolute; top: 0; width: 9px; height: 9px; }
.banner-shape::before { left: -9px; background: radial-gradient(circle at 0 100%, transparent 8.5px, #000 9px); }
.banner-shape::after { right: -9px; background: radial-gradient(circle at 100% 100%, transparent 8.5px, #000 9px); }
.b-row {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36px; padding: 0 12px 2px 18px;
  display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1;
}
.banner.banner-plan { border-radius: 14px; }
/* The same soft lift the open panel has, so the banner reads over the light sheets too. */
.notch[data-banner]:not([data-open="true"]) { filter: drop-shadow(0 12px 24px rgb(17 17 17 / .14)); }

/* ——— 2b. Everything in the cup: the feature grid; a tile plays its feature in the pinned notch ——— */
.section-features { padding-top: 0; padding-bottom: clamp(72px, 9vw, 120px); }
.feats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.feat {
  position: relative; width: 100%; height: 100%; min-height: 138px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 18px 16px 16px; border: 0; border-radius: 18px; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink); background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgb(17 17 17 / .04);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.feat:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 14px 32px rgb(17 17 17 / .08); }
.feat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.feat-icon { width: 20px; height: 20px; fill: var(--accent); color: var(--accent); margin-bottom: 6px; transition: fill .35s var(--ease), color .35s var(--ease); }
.feat-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.feat-line { font-size: 13px; line-height: 1.4; color: var(--ink-60); transition: color .35s var(--ease); }
.feat-next {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; font-weight: 500; line-height: 1.5;
  color: var(--accent); background: rgb(29 78 158 / .09);
}
.feat .feat-next { position: absolute; top: 16px; right: 14px; }
/* Playing: the tile turns into a small piece of the notch while the notch shows its feature. */
.feat.is-playing { background: #0b0b0b; color: #f3f3f1; box-shadow: 0 0 0 1px #0b0b0b, 0 16px 34px rgb(17 17 17 / .18); }
.feat.is-playing .feat-icon { fill: #f5a524; color: #f5a524; }
.feat.is-playing .feat-line { color: rgb(243 243 241 / .62); }
.feat.is-playing .feat-next { color: #8fb3f0; background: rgb(143 179 240 / .14); }
.feat.is-playing::after {
  content: ""; position: absolute; top: 18px; right: 16px; width: 7px; height: 7px; border-radius: 50%;
  background: #f5a524; box-shadow: 0 0 0 3px rgb(245 165 36 / .2); animation: wing-pulse 1.6s ease-in-out infinite;
}
.feat.is-playing:has(.feat-next)::after { top: auto; bottom: 16px; }
.feats-note { margin-top: 22px; color: var(--ink-60); font-size: 14px; }
@media (max-width: 1100px) { .feats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .feat { min-height: 128px; padding: 15px 13px 13px; }
  .feat-line { font-size: 12.5px; }
  .feat .feat-next { position: static; order: -1; margin-bottom: -2px; }
  .feat.is-playing:has(.feat-next)::after { top: 15px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { .feat.is-playing::after { animation: none; } }

/* The timer's wings: a countdown beside the notch (the app ranks it above music). */
.notch[data-compact="timer"]:not([data-open="true"]) .wing-set[data-for="timer"] {
  opacity: 1; filter: blur(0); transition: opacity .24s ease-out .07s, filter .24s ease-out .07s;
}
.wing-timer { fill: none; color: #f5a524; }

/* New banner leads: the charge (a battery filling to the level) and a Bluetooth device (its rings). */
:is(.np-banner, .b-row, .np-side) .b-lead-charge { color: #30d158; }
.b-batt { position: relative; display: block; width: 22px; height: 11px; border-radius: 3.5px; box-shadow: inset 0 0 0 1.2px rgb(255 255 255 / .45); }
.b-batt::after { content: ""; position: absolute; top: 3.5px; right: -2.6px; width: 1.6px; height: 4px; border-radius: 0 1px 1px 0; background: rgb(255 255 255 / .45); }
.b-batt i { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 0; max-width: calc(100% - 4px); border-radius: 1.6px; background: #30d158; transition: width .9s var(--ease) .25s; }
.np-banner.is-shown .b-batt i { width: calc((100% - 4px) * var(--lvl, 0) / 100); }
:is(.np-banner, .b-row, .np-side) .b-lead-device { color: #fff; }
.b-rings { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none; }
.b-ring { display: inline-flex; align-items: center; gap: 4px; color: rgb(235 235 245 / .62); font-size: 11px; font-variant-numeric: tabular-nums; }
.b-ring svg { width: 15px; height: 15px; transform: rotate(-90deg); }
.b-ring circle { fill: none; stroke: rgb(255 255 255 / .16); stroke-width: 3.4; }
.b-ring circle.arc { stroke: #30d158; stroke-linecap: round; stroke-dasharray: 0 94.25; transition: stroke-dasharray .9s var(--ease) .25s; }
.np-banner.is-shown .b-ring circle.arc { stroke-dasharray: calc(var(--lvl, 0) * .9425) 94.25; }
.b-ring b { color: #fff; font-weight: 600; }

/* The menu bar plays the menu bar features: icons fold into the notch side, the cup's Bar, a rule, a style. */
.mb-right { position: relative; }
.mb-right > .mb-icon:not(.mb-cup) { transition: transform .45s var(--ease), opacity .3s var(--ease); }
.menubar[data-demo="hide"] .mb-right > .mb-icon:not(.mb-cup),
.menubar[data-demo="bar"] .mb-right > .mb-icon:not(.mb-cup),
.menubar[data-demo="rule"] .mb-right > .mb-icon:not(.mb-cup):not(.mb-wide) { transform: translateX(-26px) scale(.6); opacity: 0; }
.menubar[data-demo="hide"] .mb-right > .mb-icon:nth-of-type(3),
.menubar[data-demo="bar"] .mb-right > .mb-icon:nth-of-type(3) { transition-delay: .06s; }
.menubar[data-demo="hide"] .mb-right > .mb-icon:nth-of-type(4),
.menubar[data-demo="bar"] .mb-right > .mb-icon:nth-of-type(4) { transition-delay: .12s; }
.menubar[data-demo="hide"] .mb-right > .mb-icon:nth-of-type(5),
.menubar[data-demo="bar"] .mb-right > .mb-icon:nth-of-type(5) { transition-delay: .18s; }
.menubar[data-demo="rule"] .mb-right > .mb-wide { animation: rule-pop 1.4s var(--ease) .5s 2; border-radius: 3px; }
@keyframes rule-pop { 30% { box-shadow: 0 0 0 4px rgb(245 165 36 / .45); } 100% { box-shadow: 0 0 0 4px rgb(245 165 36 / 0); } }
.menubar[data-demo] .mb-cup { color: var(--accent); }
.mb-float {
  position: absolute; top: calc(var(--nh) - 2px); right: 0; z-index: 6;
  display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 14px;
  background: rgb(30 30 32 / .82); color: #fff;
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 0 0 .5px rgb(255 255 255 / .18), 0 14px 34px rgb(0 0 0 / .25);
  opacity: 0; transform: translateY(-6px) scale(.96); transform-origin: 90% 0; pointer-events: none;
  transition: opacity .25s var(--ease), transform .35s var(--spring);
}
.menubar[data-demo="bar"] .mb-float { opacity: 1; transform: none; transition-delay: .25s; }
.mb-float > svg { width: 17px; height: 15px; fill: #fff; }
.mb-float > svg.wide { width: 25px; height: 12px; }
.mb-find { display: inline-flex; align-items: center; gap: 6px; min-width: 76px; padding: 4px 9px; border-radius: 8px; background: rgb(255 255 255 / .12); font-size: 12px; }
.mb-find svg { width: 11px; height: 11px; fill: rgb(255 255 255 / .7); }
.mb-find b { font-weight: 500; }
.mb-find b::after { content: ""; display: inline-block; width: 1px; height: 12px; margin-left: 1px; vertical-align: -2px; background: #fff; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.js .menubar { transition: background-color .45s var(--ease), border-color .3s var(--ease); }
.js .menubar[data-demo="style"] {
  background: linear-gradient(90deg, rgb(29 78 158 / .9), rgb(52 104 196 / .82));
  color: #fff; border-bottom-color: transparent;
}
.menubar[data-demo="style"] .mb-cup { color: #fff; }
@media (max-width: 720px) { .mb-float { right: 0; gap: 10px; padding: 7px 10px; } .mb-float > svg:not(.wide) { display: none; } }
/* A feature tile pressing a session row, a beat before its terminal opens. */
.np :is(.session, .agent).is-pressed { background: rgb(255 255 255 / .14); }
.button.is-soon { padding: 13px 24px; letter-spacing: 0; }
.button-big.is-soon { padding: 17px 34px; }
.button.is-soon:active { transform: none; }
/* A terminal a feature tile opened is part of its demo: pointing goes through it to the tiles underneath. */
.term.is-demo { pointer-events: none; }
/* Animations nobody can see are paused: each running one restyles the page on every frame. */
.notch:not([data-open="true"]) .music .bars i,
.notch:not([data-compact="music"]) .wing-set[data-for="music"] .bars i,
.notch[data-open="true"] .wing-set .bars i,
.notch:not([data-compact="agents"]) .wing-dot,
.notch[data-open="true"] .wing-dot,
.cat.is-off { animation-play-state: paused; }
.menubar:not([data-demo="bar"]) .mb-find b::after,
.term[hidden] .tl-cursor::after, .term[hidden] .tl-work::before { animation: none; }

/* ——— 2026-11-04 refresh: the replica follows Barista 0.11–0.12 ———
   Weather chip beside the date (and its detail), rings with glyphs, the System room's tiles (it grows taller), the
   permission banner, connect moments with glyph + rings only, the volume/brightness moment, the AirPods case card,
   and a swipe between activities on the closed notch. Same colours, type and springs as above. */

/* A room that needs more space grows taller: the System room is 38 px taller than the others. The plate's height
   springs; the rest of the shape (collapsed, banners, moments) reads --ph as before. */
.notch { transition: filter .5s var(--ease), height .4s var(--spring); }
.notch[data-open="true"][data-room="system"] { --ph: 224px; }
.notch[data-closing] { transition: filter .5s var(--ease), height .34s var(--ease); }

/* Weather chip beside the date: the multicolour glyph and the temperature, a capsule on hover. */
.np-left { gap: 8px; }
.np .np-wx {
  display: inline-flex; align-items: center; gap: 4px; flex: none; height: 22px; padding: 0 7px; margin: 0 -3px;
  border-radius: 999px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color .2s;
}
.np .np-wx svg { width: 19px; height: 14px; }
.np .np-wx:hover, .np .np-wx[aria-expanded="true"] { background: rgb(255 255 255 / .12); }
.np-free { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* The weather detail takes the body's place, like the month; the room under it hazes out. */
.wx-detail {
  position: absolute; inset: 0 20px; display: flex; flex-direction: column; gap: 8px;
  opacity: 0; filter: blur(6px); visibility: hidden;
  transition: opacity .12s ease-in, filter .12s ease-in, visibility 0s linear .12s;
}
.wx-detail[hidden] { display: flex; }
.np-rooms.is-weather .wx-detail {
  opacity: 1; filter: blur(0); visibility: visible;
  transition: opacity .24s ease-out .07s, filter .24s ease-out .07s, visibility 0s;
}
.js .np-rooms.is-weather .room.is-current { opacity: 0; filter: blur(6px); visibility: hidden; transition: opacity .12s ease-in, filter .12s ease-in, visibility 0s linear .12s; }
.wx-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wx-head .t1 { flex: none; }
.wx-credit { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 600; color: rgb(255 255 255 / .62); }
.wx-credit svg { width: 9px; height: 11px; fill: currentColor; margin-top: -1px; }
.np .wx-close { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: rgb(255 255 255 / .62); transition: background-color .2s, color .2s; }
.np .wx-close:hover { background: rgb(255 255 255 / .1); color: #fff; }
.wx-close svg { width: 11px; height: 11px; }
.wx-body { flex: 1; display: flex; gap: 14px; min-height: 0; }
.wx-now { width: 118px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.wx-now-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.wx-now-top svg { width: 30px; height: 22px; }
.wx-now-top b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wx-hours { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; }
.wx-hours li, .wx-tomorrow { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.wx-hours svg, .wx-tomorrow svg { width: 21px; height: 16px; }
.wx-hours b, .wx-tomorrow b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-rain { font-size: 11px; font-weight: 600; color: #64d2ff; min-height: 13px; font-variant-numeric: tabular-nums; }
.wx-tomorrow { width: 62px; flex: none; }

/* Rings: each bud and the case, its glyph inside, the level under it. */
.rings { gap: 8px; }
.ring { width: 36px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ring-o { position: relative; width: 30px; height: 30px; display: grid; place-items: center; }
.ring-o > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring svg.ring-g, .ring-g { position: relative; inset: auto; width: 13px; height: 10px; fill: #fff; color: #fff; transform: none; }
.ring svg.ring-g.ring-bud, .ring-g.ring-bud { width: 6px; height: 12px; }
.ring svg.ring-g.ring-flip, .ring-g.ring-flip { transform: scaleX(-1); }
.ring b { font-size: 10px; font-weight: 600; color: rgb(235 235 245 / .62); font-variant-numeric: tabular-nums; }

/* A second limit (per model) in the plan strip. */
.meter i.m-orange { width: 81%; background: #ff9f0a; }
.pct.orange { color: #ff9f0a; }
.plan .meter, .banner-plan .meter { min-width: 40px; }

/* System: five tiles like Control Center's modules, then the power strip. */
.room-system { flex-direction: column; gap: 10px; }
.sys-cols { flex: none; gap: 8px; height: 120px; }
.sys-detail { order: 1; }
.np .sys {
  flex: 1; min-width: 0; margin: 0; padding: 9px 10px 8px; gap: 3px; justify-content: space-between;
  border-radius: 12px; background: rgb(255 255 255 / .07); transition: background-color .2s;
}
.np .sys:hover { background: rgb(255 255 255 / .12); }
.sys-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.sys-head .label { color: rgb(235 235 245 / .62); font-size: 11.5px; }
.sys-head .t3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np .sys .big { font-size: 20px; white-space: nowrap; overflow: hidden; }
.sys .big small { font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: rgb(235 235 245 / .62); }
.sys .big small.sys-state { color: #30d158; }
.sys .big small.sys-state.is-tight { color: #ff9f0a; }
.sys .cores { height: 18px; }
.sys .meter { margin: 5px 0; }
.sys .spark { height: 20px; }
.np .sys .t3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-scopes { display: flex; gap: 6px; height: 18px; align-items: center; }
.sys-scopes svg { width: 12px; height: 12px; fill: rgb(255 255 255 / .5); color: rgb(255 255 255 / .5); }
.sys-scopes svg.srv-open { fill: #ff9f0a; color: #ff9f0a; }
.sys-strip {
  order: 2; margin-top: auto; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding-top: 8px; border-top: 1px solid rgb(255 255 255 / .09);
}
.sys-strip .t2 { min-width: 0; }
.sys-strip-end { margin-left: auto; }
.b-batt.b-batt-on { flex: none; }
.b-batt.b-batt-on i { width: calc((100% - 4px) * .84); }

/* The Servers tile's detail: rows with a ⋯ menu. */
.sd-servers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sd-servers[hidden] { display: none; }
.sd-servers li {
  display: grid; grid-template-columns: 14px auto minmax(0, 1fr) auto 64px 24px; align-items: center; gap: 10px;
  height: 28px; padding: 0 6px; border-radius: 8px; animation: np-rise .35s var(--spring) both;
}
.sd-servers li:nth-child(2) { animation-delay: .04s; }
.sd-servers li:nth-child(3) { animation-delay: .08s; }
.sd-servers li.is-busy { background: rgb(255 255 255 / .07); }
.sd-servers .srv-scope { width: 13px; height: 13px; }
.sd-servers .srv-port { font-size: 12px; }
.sd-servers .t3 { text-align: right; overflow: hidden; text-overflow: ellipsis; }
.sd-servers .t3.is-note { color: #30d158; }
.np .sd-more { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: rgb(255 255 255 / .62); transition: background-color .2s, color .2s; }
.np .sd-more:hover, .np .sd-more[aria-expanded="true"] { background: rgb(255 255 255 / .12); color: #fff; }
.sd-more svg { width: 15px; height: 15px; fill: currentColor; }
.sd-menu {
  position: absolute; z-index: 4; right: 38px; top: 0; min-width: 150px; padding: 4px;
  display: flex; flex-direction: column; border-radius: 10px;
  background: rgb(40 40 42 / .96); box-shadow: 0 0 0 .5px rgb(255 255 255 / .16), 0 10px 26px rgb(0 0 0 / .45);
  animation: np-rise .25s var(--spring) both;
}
.sd-menu[hidden] { display: none; }
.np .sd-menu button { height: 24px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; color: #fff; }
.np .sd-menu button:hover, .np .sd-menu button:focus-visible { background: #0a84ff; outline: none; }
.sys-detail { position: relative; }

/* The permission banner: a hand, the exact command in a monospaced font, Deny and Allow. */
:is(.np-banner, .b-row) .b-lead-hand { color: #ff9f0a; }
:is(.np-banner, .b-row) .b-cmd {
  flex: 1 1 auto; min-width: 0; font: 11px/1.25 ui-monospace, "SF Mono", Menlo, monospace; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Connect moments, like iOS: narrow wings, the device's glyph (one small bounce as it lands) and its rings, no name. */
.notch[data-side="device"], .np-side[data-kind="device"] { --sw: min(92px, calc(((100vw - 24px) / var(--s) - var(--nw)) / 2)); }
.np-side[data-kind="device"] .b-lead svg { width: 17px; height: 17px; }
.np-side.is-shown[data-kind="device"] .b-lead svg { animation: np-bounce .5s var(--spring) .12s both; }
@keyframes np-bounce { 0% { transform: translateY(0); } 40% { transform: translateY(-3px); } 100% { transform: translateY(0); } }

/* Volume and brightness: glyph and name left; a bar and the number right, updated in place. */
.lv-bar { position: relative; width: 52px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .16); overflow: hidden; flex: none; }
.lv-bar i { position: absolute; inset: 0; border-radius: 3px; background: #fff; transform-origin: 0 50%; transform: scaleX(calc(var(--lvl, 0) / 100)); transition: transform .38s var(--spring); }
.ns .lv-num { width: 20px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(235 235 245 / .62); }
.np-side .lv-glyph { width: 16px; height: 14px; fill: #fff; color: #fff; flex: none; }
.ns-l, .ns-r { transition: opacity .15s ease; }
.np-side.is-swapping .ns-l, .np-side.is-swapping .ns-r { opacity: 0; }

/* The AirPods case card: drops out of the notch, 104 pt tall, 24 pt corners. */
.stage {
  --cw: min(calc(min(370px, 100vw - 24px) / var(--s)), var(--pw));
  --ch: min(calc(104px / var(--s)), calc(var(--ph) - var(--nh)));
}
.notch[data-banner="card"]:not([data-open="true"])::before {
  clip-path: inset(0 calc((var(--pw) - var(--cw)) / 2) calc(var(--ph) - var(--nh) - var(--ch)) round 0 0 calc(24px / var(--s)) calc(24px / var(--s)));
}
.notch[data-banner="card"]:not([data-open="true"])::after { left: calc((var(--pw) - var(--cw)) / 2 - 9px); }
.notch[data-banner="card"]:not([data-open="true"]) .np::before { right: calc((var(--pw) - var(--cw)) / 2 - 9px); }
.np-banner.is-card {
  left: calc((var(--pw) - var(--cw)) / 2); width: calc(var(--cw) * var(--s)); height: calc(var(--ch) * var(--s));
  padding: 0 16px 6px 22px; gap: 18px; align-items: center;
}
.case-glyph { width: 56px; height: 44px; flex: none; fill: #fff; color: #fff; }
.np-banner.is-shown .case-glyph { animation: np-bounce .55s var(--spring) .15s both; }
.case-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.case-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.case-top .t1 { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-top .t3 { color: rgb(235 235 245 / .62); }
.case-rings { display: flex; gap: 12px; }
.np-banner .case-rings .b-ring { flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; }
.case-rings .ring-o { width: 32px; height: 32px; }
.b-ring .ring-o > svg:first-child { width: 100%; height: 100%; }
.b-ring svg.ring-g { width: 13px; height: 10px; transform: none; }
.b-ring svg.ring-g.ring-bud { width: 6px; height: 12px; }
.b-ring svg.ring-g.ring-flip { transform: scaleX(-1); }
.bolt { display: inline-block; width: 6px; height: 9px; margin-right: 2px; vertical-align: -1px; background: #30d158; clip-path: polygon(60% 0, 0 58%, 42% 58%, 30% 100%, 100% 40%, 56% 40%); }
@media (max-width: 560px) { .case-glyph { display: none; } .np-banner.is-card { padding-left: 16px; } .case-rings { gap: 8px; } }

/* Swipe between activities on the closed notch: the leaving wings slide the way the fingers went, the new ones come in
   from the other side, and past the last one the wings give a little and spring back. */
.wing-set { transition: opacity .12s ease-in, filter .12s ease-in, transform .3s var(--spring); }
.notch[data-slide="next"] .wing-set { transform: translateX(26px); }
.notch[data-slide="prev"] .wing-set { transform: translateX(-26px); }
.notch[data-slide] .wing-set.is-leaving-next { transform: translateX(-26px); }
.notch[data-slide] .wing-set.is-leaving-prev { transform: translateX(26px); }
.notch[data-compact="music"]:not([data-open="true"]) .wing-set[data-for="music"],
.notch[data-compact="agents"]:not([data-open="true"]) .wing-set[data-for="agents"],
.notch[data-compact="system"]:not([data-open="true"]) .wing-set[data-for="system"],
.notch[data-compact="timer"]:not([data-open="true"]) .wing-set[data-for="timer"] {
  transform: none; transition: opacity .24s ease-out .07s, filter .24s ease-out .07s, transform .4s var(--spring);
}
.notch[data-band="next"][data-compact]:not([data-open="true"]) { --ww: 65px; }
.notch[data-band="prev"][data-compact]:not([data-open="true"]) { --ww: 65px; }
.notch[data-band="next"][data-compact]:not([data-open="true"]) .wing-set[data-for] { transform: translateX(-7px); }
.notch[data-band="prev"][data-compact]:not([data-open="true"]) .wing-set[data-for] { transform: translateX(7px); }

/* The terminal under a taller panel, and a shell's prompt for the command line. */
.term.is-low { top: calc((var(--ph) + 26px) * var(--s) + 22px); }
.tl-shell { color: #fff; margin-top: 4px; }
.tl-shell::before { content: "$ "; color: #30d158; }
.tl-table { color: rgb(255 255 255 / .7); white-space: pre; overflow-wrap: normal; }

.feat-line code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; }

@media (prefers-reduced-motion: reduce) {
  .notch { transition: none !important; }
  .wing-set { transform: none !important; }
  .np-side.is-shown[data-kind="device"] .b-lead svg, .np-banner.is-shown .case-glyph { animation: none !important; }
}