/* Etude — the front-page demo: HOW it looks.
 *
 * The scene is laid out at a fixed size, in the app's own measurements, and
 * demo.js scales the whole of it to the box (--s), so nothing reflows between
 * screen sizes. Two layouts: 960 × 600 (the box's 16:10) with the sidebar,
 * and on phones 480 × 480 in a square box with the sidebar collapsed, as the
 * app looks in a narrow window — big enough there to read.
 *
 * Dark colours are sampled from Etude RC27 on screen; sizes follow the app's
 * theme (MagpieUI/SettledTheme.json: 13 px body, 11 px captions, a 720 px text
 * column, 12 px bubble corners). Light colours
 * are measured from the same build in light mode.
 */

.app-demo {
  --ad-wall:       radial-gradient(120% 90% at 18% 0%, #2a3a5c 0%, rgba(42, 58, 92, 0) 60%),
                   radial-gradient(90% 80% at 100% 100%, #1b2638 0%, rgba(27, 38, 56, 0) 70%),
                   linear-gradient(160deg, #161c28 0%, #0d1016 100%);
  --ad-bar:        rgba(14, 16, 22, 0.42);
  --ad-bar-ink:    rgba(255, 255, 255, 0.92);
  --ad-menu:       rgba(38, 40, 46, 0.86);
  --ad-menu-rim:   rgba(255, 255, 255, 0.12);
  --ad-win:        #191a1a;
  --ad-win-rim:    rgba(255, 255, 255, 0.10);
  --ad-side:       #2c2d2d;
  --ad-ink:        #f5f5f5;
  --ad-ink-strong: #ffffff;
  --ad-ink-2:      #979898;
  --ad-ink-3:      #676868;
  --ad-accent:     #6b9eff;
  --ad-dot:        #6593ec;
  --ad-sel:        #3b4962;
  --ad-bubble:     #262f3f;
  --ad-bubble-ink: #ffffff;
  --ad-field:      #2e2f2f;
  --ad-field-rim:  rgba(255, 255, 255, 0.07);
  --ad-btn:        #2c2d2d;
  --ad-send:       #282929;
  --ad-send-ink:   #6c6d6d;
  --ad-chip:       #1b2434;
  --ad-card:       #262727;
  --ad-key:        rgba(255, 255, 255, 0.10);
  --ad-key-press:  rgba(255, 255, 255, 0.20);
  --ad-rule:       rgba(255, 255, 255, 0.08);
  --ad-shadow:     0 24px 70px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
}
:root[data-theme="light"] .app-demo {
  --ad-wall:       radial-gradient(120% 90% at 18% 0%, #c6d6f3 0%, rgba(198, 214, 243, 0) 60%),
                   radial-gradient(90% 80% at 100% 100%, #dfe4ee 0%, rgba(223, 228, 238, 0) 70%),
                   linear-gradient(160deg, #e3e9f3 0%, #f3f5f9 100%);
  --ad-bar:        rgba(255, 255, 255, 0.45);
  --ad-bar-ink:    rgba(0, 0, 0, 0.85);
  --ad-menu:       rgba(246, 246, 248, 0.90);
  --ad-menu-rim:   rgba(0, 0, 0, 0.10);
  --ad-win:        #ffffff;
  --ad-win-rim:    rgba(0, 0, 0, 0.12);
  --ad-side:       #f2f2f2;
  --ad-ink:        #000000;
  --ad-ink-strong: #000000;
  --ad-ink-2:      #808080;
  --ad-ink-3:      #a6a6a6;
  --ad-accent:     #2261e5;
  --ad-dot:        #4d81eb;
  --ad-sel:        #d4daec;
  --ad-bubble:     #dce5fb;
  --ad-bubble-ink: #000000;
  --ad-field:      #f1f1f1;
  --ad-field-rim:  rgba(0, 0, 0, 0.06);
  --ad-btn:        #f2f2f2;
  --ad-send:       #e8e8e8;
  --ad-send-ink:   #a6a6a6;
  --ad-chip:       #e6ecfd;
  --ad-card:       #e6e6e6;
  --ad-key:        rgba(0, 0, 0, 0.07);
  --ad-key-press:  rgba(0, 0, 0, 0.16);
  --ad-rule:       rgba(0, 0, 0, 0.08);
  --ad-shadow:     0 24px 60px rgba(30, 40, 60, 0.22), 0 2px 8px rgba(30, 40, 60, 0.12);
}

/* the box itself keeps .demo's size and corners; the wallpaper fills it.
   --s is the scene's scale, set by demo.js. */
.demo.app-demo {
  --s: 0.8;
  position: relative;
  display: block;
  margin: 0;
  border: 0;
  background: #12161f;
}
:root[data-theme="light"] .demo.app-demo { background: #e9eef6; }
.ad-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ad-caption {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.ad-scene {
  --ad-w: 960px;        /* the scene's own size */
  --ad-h: 600px;
  --ad-col: 662px;      /* the conversation column and the composer */
  --ad-empty-top: 170px;
  --ad-mid: -170px;
  --ad-endroom: 110px;  /* under the finished answer, for the last callout */     /* how far up the composer sits in an empty chat */
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ad-w);
  height: var(--ad-h);
  transform: scale(var(--s));
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--ad-wall);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: var(--ad-ink);
  -webkit-font-smoothing: antialiased;
  text-align: left;
  user-select: none;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
.ad-scene.is-out { opacity: 0; }
.ad-scene .is-hidden { display: none !important; }
/* a new loop starts from its first frame without animating into it */
.ad-scene.is-instant, .ad-scene.is-instant * { transition: none !important; }
.ad-scene svg { display: block; flex: none; }
.ad-scene code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ---- the menu bar ------------------------------------------------------- */
.ad-menubar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  z-index: 4;   /* above the window, so the Wi-Fi menu can hang over it */
  background: var(--ad-bar);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--ad-bar-ink);
}
.ad-menus { display: flex; gap: 20px; }
.ad-menus b { font-weight: 700; }
.ad-status { display: flex; align-items: center; gap: 16px; }
.ad-wifi { position: relative; width: 17px; height: 17px; }
.ad-wifi svg { position: absolute; inset: 0; width: 17px; height: 17px; transition: opacity 0.25s ease; }
.ad-wifi .off, .ad-wifi.is-off .on { opacity: 0; }
.ad-wifi.is-off .off { opacity: 1; }
.ad-battery { width: 26px; height: 22px; }
.ad-clock { white-space: nowrap; }

/* the Wi-Fi menu, opened from the menu bar */
.ad-wifi-menu {
  position: absolute;
  top: 29px;
  left: 640px;   /* demo.js puts it under the Wi-Fi icon */
  width: 248px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--ad-menu);
  border: 1px solid var(--ad-menu-rim);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: var(--ad-ink);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: 60px 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3;
}
.ad-wifi-menu.is-open { opacity: 1; transform: none; }
.ad-wm-row { display: flex; align-items: center; justify-content: space-between; height: 26px; }
.ad-wm-row b { font-weight: 600; }
.ad-toggle {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--ad-accent);
  transition: background 0.25s ease;
}
.ad-toggle i {
  position: absolute;
  top: 2px;
  left: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: left 0.25s ease;
}
.ad-toggle.is-off { background: var(--ad-key-press); }
.ad-toggle.is-off i { left: 2px; }
.ad-wm-nets { overflow: hidden; max-height: 60px; transition: max-height 0.3s ease, opacity 0.2s ease; }
.ad-wm-nets.is-gone { max-height: 0; opacity: 0; }
.ad-wm-head { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ad-rule); font-size: 11px; font-weight: 600; color: var(--ad-ink-2); }
.ad-wm-net { display: flex; align-items: center; gap: 8px; height: 26px; }
.ad-wm-net svg { width: 15px; height: 15px; }

/* ---- the window --------------------------------------------------------- */
.ad-window {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 36px;
  bottom: 12px;
  display: flex;
  border-radius: 16px;
  background: var(--ad-win);
  box-shadow: inset 0 0 0 1px var(--ad-win-rim), var(--ad-shadow);
  overflow: hidden;
}

/* sidebar: a panel floating inside the window */
.ad-side {
  position: relative;
  flex: none;
  width: 210px;
  margin: 8px 0 8px 8px;
  border-radius: 14px;
  background: var(--ad-side);
}
.ad-lights { display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 12px; }
.ad-lights-mini { display: none; height: auto; padding: 0 10px 0 6px; gap: 8px; }
.ad-lights i { width: 12px; height: 12px; border-radius: 50%; }
.ad-lights i:nth-child(1) { background: #ff5f57; }
.ad-lights i:nth-child(2) { background: #febc2e; }
.ad-lights i:nth-child(3) { background: #28c840; }
.ad-side-toggle { width: 20px; height: 20px; margin-left: auto; color: var(--ad-ink-2); }
.ad-side-label { margin: 9px 0 5px 14px; font-size: 11px; font-weight: 600; color: var(--ad-ink-3); }
.ad-ws, .ad-chat, .ad-new { display: flex; align-items: center; height: 32px; white-space: nowrap; }
.ad-ws .ad-chev { width: 12px; height: 12px; margin-left: 14px; color: var(--ad-ink-2); }
.ad-ws .ad-fold { width: 18px; height: 18px; margin: 0 8px 0 5px; color: var(--ad-ink); }
.ad-chat {
  margin: 0 8px 0 10px;
  padding: 0 10px 0 22px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.ad-chat span { overflow: hidden; text-overflow: ellipsis; }
.ad-chat.is-on { background: var(--ad-sel); }
.ad-chat .ad-dot {
  position: absolute; left: 10px; top: 13px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ad-dot);
  opacity: 0; transition: opacity 0.3s ease;
}
.ad-chat.is-busy .ad-dot { opacity: 1; }
/* level with the workspace folders, not tucked inside them */
.ad-new { color: var(--ad-accent); }
.ad-new svg { width: 14px; height: 14px; margin: 0 9px 0 13px; }

/* ---- the main pane ------------------------------------------------------ */
.ad-main { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ad-toolbar { flex: none; display: flex; align-items: center; height: 52px; padding: 0 9px 0 8px; white-space: nowrap; }
.ad-round {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ad-btn); color: var(--ad-ink-2);
}
.ad-round svg { width: 20px; height: 20px; }
.ad-ws-name { margin-left: 9px; color: var(--ad-ink-2); }
.ad-title {
  max-width: 240px; margin-left: 8px;
  overflow: hidden; text-overflow: ellipsis;
  font-weight: 600; color: var(--ad-ink);
}
.ad-title.is-mode { color: var(--ad-ink-2); }
/* an empty chat: no workspace name or title in the toolbar */
.ad-toolbar.is-empty .ad-ws-name, .ad-toolbar.is-empty .ad-title, .ad-toolbar.is-empty .ad-info { visibility: hidden; }
.ad-info { width: 16px; height: 16px; margin-left: 6px; color: var(--ad-ink-2); }
.ad-tools {
  display: flex; align-items: center; gap: 12px;
  margin-left: auto; height: 30px; padding: 0 9px 0 11px;
  border-radius: 15px; background: var(--ad-btn);
}
.ad-pill { display: flex; align-items: center; gap: 6px; }
.ad-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ad-dot); }
.ad-pill svg { width: 13px; height: 13px; color: var(--ad-ink-2); }
.ad-stop-sq { width: 10px; height: 10px; border-radius: 2px; background: var(--ad-ink-2); }
.ad-gear { width: 17px; height: 17px; color: var(--ad-ink-2); }

.ad-body { position: relative; flex: 1; min-height: 0; }

/* empty chat */
.ad-empty {
  position: absolute; left: 0; right: 0; top: var(--ad-empty-top);
  display: flex; flex-direction: column; align-items: center;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* a file attached: the composer grows, and the group re-centres, as in the app */
.ad-body:has(.ad-attach.is-on) .ad-empty { transform: translateY(-16px); }
.ad-empty.is-gone { opacity: 0; }
.ad-mark { width: 30px; height: 32px; fill: currentColor; color: var(--ad-ink-3); opacity: 0.75; }
.ad-empty p { margin: 14px 0 0; color: var(--ad-ink-2); }
.ad-empty p.ad-empty-2 { margin-top: 2px; color: var(--ad-ink); }
.ad-chip {
  display: inline-flex; align-items: center; gap: 1px;
  margin: 0 2px; padding: 1px 5px 1px 6px; border-radius: 6px;
  background: var(--ad-chip); color: var(--ad-accent);
}
.ad-chip svg { width: 12px; height: 12px; }

/* the conversation: one 720 px column, followed to its foot as it grows */
.ad-thread { position: absolute; inset: 0 0 76px 0; overflow: hidden; }
.ad-col { width: var(--ad-col); margin: 0 auto; padding: 18px 0 14px; transition: padding 0.5s ease; }
.ad-col.is-done { padding-bottom: var(--ad-endroom); }
.ad-bubble {
  width: fit-content; max-width: 80%; margin-left: auto;
  padding: 6px 12px; border-radius: 12px;
  background: var(--ad-bubble); color: var(--ad-bubble-ink);
}
.ad-ref {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 6px; font-size: 11px; line-height: 14px; color: var(--ad-ink-2);
}
.ad-ref svg { width: 12px; height: 12px; }

/* the line that stands for the turn's notes and tool calls */
.ad-line {
  display: flex; align-items: center; gap: 4px;
  margin-top: 8px; padding-left: 30px;
  font-size: 12px; line-height: 16px; color: var(--ad-ink-2);
  white-space: nowrap;
}
.ad-line .ad-chev { width: 12px; height: 12px; }
.ad-line .ad-note, .ad-line .ad-doc { width: 12px; height: 12px; }
.ad-line .ad-doc, .ad-line.is-tool .ad-note { display: none; }
.ad-line.is-tool .ad-doc { display: block; }
.ad-line-text { flex: 1; min-width: 0; overflow: hidden; }
.ad-line-text b { font-weight: 600; color: var(--ad-ink); }
.ad-calls { margin-left: 8px; font-size: 11px; opacity: 0; }
.ad-line.has-calls .ad-calls { opacity: 1; }

.ad-cap { margin-bottom: 4px; font-size: 11px; color: var(--ad-ink-2); }
.ad-card { padding: 11px 12px 12px; border-radius: 12px; background: var(--ad-card); }
.ad-card > b { display: block; font-weight: 600; }
.ad-cmd { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.ad-cmd svg { width: 13px; height: 13px; color: var(--ad-ink-2); }
.ad-cmd b { font-weight: 600; }
.ad-card code { display: block; margin-top: 3px; font-size: 12px; }
.ad-btns { display: flex; gap: 8px; margin-top: 10px; }
.ad-btns span { padding: 3px 10px; border-radius: 6px; background: var(--ad-key); transition: background 0.12s ease; }
.ad-btns span.is-press { background: var(--ad-key-press); }

/* the answer, and markdown inside the notes */
.ad-reply { margin: 6px 0 0 28px; color: var(--ad-ink-strong); }
.ad-md p { margin: 0 0 8px; }
.ad-md ul, .ad-md ol { margin: 0 0 8px; padding: 0; list-style: none; }
.ad-md li { position: relative; padding-left: 16px; }
.ad-md li + li { margin-top: 2px; }
.ad-md ul > li::before { content: "•"; position: absolute; left: 5px; font-size: 0.8em; opacity: 0.7; }
.ad-md ol { counter-reset: ad-n; }
.ad-md ol > li { counter-increment: ad-n; }
.ad-md ol > li::before { content: counter(ad-n) "."; position: absolute; left: 0; }
.ad-md strong { font-weight: 600; }
.ad-md > :last-child { margin-bottom: 0; }

/* "Working · 31s · 326 tokens", under the turn, in the text column */
.ad-state {
  min-height: 14px; margin: 6px 0 0 28px;
  font-size: 11px; line-height: 14px; color: var(--ad-ink-2);
}

/* streamed text: a word, and the paragraph or item it starts, appear when
   the player reaches it */
.ad-stream .w, .ad-stream p, .ad-stream li, .ad-stream ul, .ad-stream ol { display: none; }
.ad-stream .w.on { display: inline; }
.ad-stream p.on, .ad-stream ul.on, .ad-stream ol.on, .ad-stream li.on { display: block; }

/* ---- the composer, docked under the conversation (or mid-window when the
   chat is empty) ---------------------------------------------------------- */
.ad-dock {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-bottom: 7px;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ad-dock.is-mid { transform: translateY(var(--ad-mid)); }
.ad-dock.is-mid:has(.ad-attach.is-on) { transform: translateY(calc(var(--ad-mid) + 12px)); }
.ad-composer {
  width: var(--ad-col); margin: 0 auto;
  border-radius: 18px;
  background: var(--ad-field);
  box-shadow: inset 0 0 0 1px var(--ad-field-rim);
}
.ad-attach {
  display: none; align-items: center; gap: 7px;
  height: 30px; padding: 4px 12px 0;
  white-space: nowrap;
  color: var(--ad-ink-2);
}
.ad-attach.is-on { display: flex; }
.ad-att-busy, .ad-att-done { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ad-att-busy, .ad-attach.is-busy .ad-att-done { display: none; }
.ad-attach.is-busy .ad-att-busy { display: flex; }
.ad-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--ad-key-press); border-top-color: var(--ad-ink-2);
  animation: ad-spin 0.8s linear infinite;
}
@keyframes ad-spin { to { transform: rotate(360deg); } }
.ad-attach svg { width: 15px; height: 15px; }
.ad-attach code {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  margin-left: 4px; padding: 1px 7px; border-radius: 7px;
  font-size: 12px; background: var(--ad-chip); color: var(--ad-accent);
}
.ad-input { display: flex; align-items: center; height: 36px; padding: 0 4px 0 11px; }
.ad-ic { width: 18px; height: 18px; margin-right: 8px; color: var(--ad-ink-2); }
.ad-field { flex: 1; display: flex; align-items: center; min-width: 0; margin-left: 4px; white-space: nowrap; }
.ad-typed { color: var(--ad-ink); }
.ad-ph { color: var(--ad-ink-2); }
.ad-field.has-text .ad-ph { display: none; }
.ad-caret { display: none; width: 1.5px; height: 16px; margin: 0 1px; background: var(--ad-accent); }
.ad-field.is-focus .ad-caret { display: block; animation: ad-blink 1.05s steps(1) infinite; }
.ad-field.is-focus.has-text .ad-caret { order: 1; }
.ad-field.is-focus .ad-ph { order: 2; }
@keyframes ad-blink { 50% { opacity: 0; } }
/* the model button: its place on the switcher's line, as pips (4: the Skilled Model) */
.ad-model { display: flex; align-items: center; gap: 6px; margin-right: 8px; color: var(--ad-ink-2); }
.ad-model svg { width: 14px; height: 14px; }
.ad-model .ad-pips { width: 15px; height: 10px; }
.ad-send {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ad-send); color: var(--ad-send-ink);
  transition: background 0.15s ease, color 0.15s ease;
}
.ad-send svg { width: 16px; height: 16px; }
.ad-send .ad-square { display: none; width: 10px; height: 10px; border-radius: 2px; background: var(--ad-ink); }
.ad-send.is-ready { background: var(--ad-key-press); color: var(--ad-ink); }
/* while the agent works: Stop, white on the accent */
.ad-send.is-busy { background: #4172d9; }
:root[data-theme="light"] .ad-send.is-busy { background: #233870; }
.ad-send.is-busy svg { display: none; }
.ad-send.is-busy .ad-square { display: block; background: #fff; }
.ad-send.is-press { transform: scale(0.9); }
.ad-foot { margin-top: 8px; text-align: center; font-size: 11px; line-height: 14px; color: var(--ad-ink-2); }

/* ---- the pointer -------------------------------------------------------- */
.ad-cursor {
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px;
  margin: -3px 0 0 -5px;
  transform: translate(980px, 640px);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  z-index: 5;
}
.ad-cursor.is-gone { opacity: 0; }
.ad-cursor path { transition: transform 0.12s ease; transform-origin: 6px 4px; }
.ad-cursor.is-click path { transform: scale(0.85); }

/* ---- pause -------------------------------------------------------------- */
.ad-pause {
  position: absolute; right: 10px; bottom: 10px;
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 22, 28, 0.55);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ad-pause svg { width: 13px; height: 13px; }
.ad-pause .i-play, .ad-pause[aria-pressed="true"] .i-pause { display: none; }
.ad-pause[aria-pressed="true"] .i-play { display: block; }
.app-demo:hover .ad-pause, .ad-pause:focus-visible, .ad-pause[aria-pressed="true"] { opacity: 1; }
/* touch screens have no hover: the button stays visible, up in the menu bar
   where it covers nothing */
@media (hover: none) {
  .ad-pause { opacity: 0.85; top: 3px; bottom: auto; right: 4px; width: 20px; height: 20px; }
  .ad-pause svg { width: 9px; height: 9px; }
  .ad-menubar { padding-right: 40px; }
}

/* ---- phones: a square box, the sidebar collapsed ------------------------ */
@media (max-width: 639.98px) {
  .demo.app-demo { aspect-ratio: 1 / 1; }
  .ad-picker { width: 440px; margin-left: -220px; }
  .ad-pk-side { width: 118px; }
  .ad-scene {
    --ad-w: 480px;
    --ad-h: 480px;
    --ad-col: 432px;
    --ad-empty-top: 116px;
    --ad-mid: -122px;
    --ad-endroom: 150px;
  }
  .ad-menus span, .ad-date { display: none; }
  .ad-window { left: 8px; right: 8px; top: 32px; bottom: 8px; border-radius: 14px; }
  .ad-side { display: none; }
  .ad-lights-mini { display: flex; }
  .ad-lights-mini i { width: 11px; height: 11px; }
  .ad-toolbar { height: 46px; padding-left: 4px; }
  .ad-round { width: 32px; height: 32px; }
  .ad-ws-name { display: none; }
  .ad-title { max-width: 190px; }
  .ad-pill { font-size: 0; gap: 0; }
  .ad-pill svg { display: none; }
  .ad-tools { gap: 10px; padding: 0 8px; height: 28px; }
  .ad-thread { bottom: 74px; }
}

/* ---- Add document: an open sheet ----------------------------------------
   Not a copy of the system panel: just enough to show a file being picked
   from Downloads. */
.ad-picker {
  position: absolute; left: 50%; top: 0;
  width: 470px; margin-left: -235px;
  border-radius: 0 0 14px 14px;
  background: var(--ad-win);
  box-shadow: inset 0 0 0 1px var(--ad-win-rim), 0 18px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: translateY(-104%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 2;
}
.ad-picker.is-open { transform: none; }
.ad-pk-cols { display: flex; height: 168px; }
.ad-pk-side { width: 132px; padding: 10px 8px; background: var(--ad-side); font-size: 12px; }
.ad-pk-side div { height: 22px; line-height: 22px; padding: 0 8px; border-radius: 6px; }
.ad-pk-side .ad-pk-head { font-size: 10.5px; font-weight: 600; color: var(--ad-ink-3); }
.ad-pk-side .is-on { background: var(--ad-key); }
.ad-pk-main { flex: 1; padding: 10px 10px 0; font-size: 12px; }
.ad-pk-title { margin: 0 0 6px 6px; font-weight: 600; }
.ad-pk-row { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 6px; border-radius: 6px; }
.ad-pk-row svg { width: 13px; height: 13px; color: var(--ad-ink-2); }
.ad-pk-row span { flex: 1; }
.ad-pk-row time { font-size: 11px; color: var(--ad-ink-2); }
.ad-pk-row.is-on { background: var(--ad-accent); color: #fff; }
.ad-pk-row.is-on svg, .ad-pk-row.is-on time { color: rgba(255, 255, 255, 0.85); }
.ad-pk-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ad-rule); font-size: 12px; }
.ad-pk-btns span { padding: 3px 14px; border-radius: 6px; background: var(--ad-key); transition: background 0.12s ease; }
.ad-pk-btns .is-default { background: var(--ad-accent); color: #fff; opacity: 0.45; transition: opacity 0.15s ease; }
.ad-pk-btns .is-default.is-ready { opacity: 1; }
.ad-pk-btns span.is-press { filter: brightness(0.85); }

/* ---- the annotations ----------------------------------------------------
   One callout that follows the action: demo.js puts it next to what it
   explains, and glides and re-words it from one step to the next. Drawn
   like an iMessage bubble, in the system blue, its curled tail's tip on the
   spot it explains, so it can't be taken for part of the app. */
.ad-callout {
  --co: #0a84ff;
  --tx: 16px;
  position: absolute; left: 0; top: 0;
  box-sizing: border-box;
  max-width: 300px;
  padding: 8px 14px 9px;
  border-radius: 18px;
  background: var(--co);
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
  z-index: 6;
}
:root[data-theme="light"] .ad-callout {
  --co: #007aff;
  box-shadow: 0 8px 22px rgba(20, 40, 80, 0.22), 0 1px 3px rgba(20, 40, 80, 0.14);
}
.ad-callout.is-on { opacity: 1; }
.ad-callout.is-snap, .ad-callout.is-snap .ad-co-tail { transition: none; }
.ad-co-text { display: block; transition: opacity 0.18s ease; }
.ad-callout.is-swap .ad-co-text { opacity: 0; }
/* the curled tail, as in Messages: on the top edge, leaning toward its tip */
.ad-co-tail {
  position: absolute; left: var(--tx); top: -12px;
  width: 18px; height: 16px;
  fill: var(--co);
  transition: left 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ad-callout.tip-right .ad-co-tail { transform: scaleX(-1); }
.ad-callout.is-above .ad-co-tail { top: auto; bottom: -12px; transform: scaleY(-1); }
.ad-callout.is-above.tip-right .ad-co-tail { transform: scale(-1, -1); }
.ad-callout.no-tail .ad-co-tail { display: none; }
/* the same box, unseen, to measure a beat's text before the callout takes it */
.ad-co-measure { visibility: hidden; width: max-content; height: auto; opacity: 0; transition: none; }
.ad-cursor { z-index: 7; }
@media (max-width: 639.98px) {
  .ad-callout { max-width: 300px; }
}