/* The Mac demo: a drawn macOS desk, on the home page and nowhere else.
   Written as `pending/mac.{html,css,js}` on 2026-09-20 and moved onto `/` on
   the same day, because a page in a directory nothing links to is not a page.
   How it is built and where every number in it came from:
   marketing/mac-demo-design-notes.md.

   TWO CLASS NAMES WERE RENAMED ON THE WAY IN, and the design notes still use
   the old ones: `.mac-chips` -> `.md-chips` and `.mac-chord` -> `.md-chord`.
   Both were bare selectors here AND in homepage.css, where they belong to the
   drawn window in "How it works" — two stylesheets that never shared a page
   before now always do. Nothing else collided; the rest of the demo's
   `.mac-*` names are compound (`.side-row.is-on`, `.cp-words .w`) and land
   only inside `.macdemo`. */

/* ==========================================================================
   The Mac demo: a drawn macOS desk with the Offhand window on it.

   Nothing here is a screenshot. The desk is drawn the way the phone on the
   home page is drawn (marketing/iphone-demo-design-notes.md), and its
   proportions are the ones `make-mac-desktop.py` composes the real Mac
   stills with — 16:10, the window at ~71% of the width, the menu bar and the
   Dock as fractions of the height, the window's radius 1.25% of its width.
   The rows, the group names and their colours are the 2026-09-16 capture's
   own: `offhand-launch-assets/mac/2026-09-16-technical`, store `hero-a`.

   The display's frame — the outer glow, the two nested radii, the inset
   hairline — is the shape Raycast's homepage uses for the same job, read off
   the live page on 19 September 2026 and re-tuned for a light desk.

   One design size, then `transform: scale()`: every measurement below is px
   at a 1160 x 725 stage, and the whole box is scaled as a unit. The stage
   never reflows.
   ========================================================================== */


.macband { padding-bottom: 56px; }
.macband-head { max-width: 640px; margin-bottom: 28px; }
.macband-head .lede { margin: 12px 0 0; font: var(--type-body); color: var(--text-secondary); }
.macband-foot { max-width: 720px; margin-top: 28px; }

/* ----------------------------------------------------------- the stage */

.macdemo { --mz: 1; }

.mac-fit {
  height: calc(725px * var(--mz));
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.mac-stage {
  width: 1160px;
  height: 725px;
  flex: none;
  transform: scale(var(--mz));
  transform-origin: 50% 0;
}

/* The display. frameOuter is the brushed edge and the glow it throws on the
   page; frameInner is the glass; mac-desk is the pixels. */
.mac-frame {
  height: 100%;
  padding: 9px;
  border: 1px solid rgba(28, 31, 28, .26);
  border-radius: 20px;
  background: linear-gradient(176deg, #f4f3f0 0%, #e3e2dd 42%, #cbcac5 100%);
  box-shadow:
    0 44px 80px -34px rgba(28, 31, 28, .42),
    0 8px 22px -10px rgba(28, 31, 28, .18),
    inset 0 1px 0 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 0 rgba(28, 31, 28, .12);
}
.mac-bezel {
  height: 100%;
  padding: 3px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1b1c1b 0%, #0a0b0a 60%, #171817 100%);
  box-shadow:
    inset 0 0 0 .5px rgba(255, 255, 255, .1),
    0 0 0 .5px rgba(28, 31, 28, .4);
}
/* Every glyph on this desk is a lucide outline, drawn the way the home
   page draws them. The mark is the exception: it is four filled bars. */
.mac-desk svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mac-desk svg.cp-pause rect { fill: currentColor; stroke: none; }
.mb-mark rect, .side-mark rect { fill: currentColor; stroke: none; }
.mb-mark .mark-moss, .side-mark .mark-moss { stroke: none; }

.mac-desk {
  position: relative;
  height: 100%;
  border-radius: 9px;
  overflow: hidden;
  isolation: isolate;
}
/* the light a display throws back at the room */
.mac-desk::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(196deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 26%);
  box-shadow: inset 0 0 70px 6px rgba(20, 22, 20, .1);
}

/* The wallpaper. Not the system's — ours, in the palette the app draws in,
   with the same soft-blob depth a Mac wallpaper has. */
.mac-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 48% at 20% 12%, #eef1fa 0%, rgba(238, 241, 250, 0) 72%),
    radial-gradient(52% 46% at 82% 14%, #f3e7dc 0%, rgba(243, 231, 220, 0) 70%),
    radial-gradient(70% 62% at 74% 104%, #8ea2b8 0%, rgba(142, 162, 184, 0) 66%),
    radial-gradient(58% 54% at 16% 96%, #b9a9c9 0%, rgba(185, 169, 201, 0) 68%),
    radial-gradient(90% 70% at 50% 46%, #d5dcea 0%, rgba(213, 220, 234, 0) 78%),
    linear-gradient(166deg, #c6d0e2 0%, #b3bdd0 46%, #9fabc0 100%);
}
/* Two soft sweeps, the way a system wallpaper has a light in it. */
.mac-wall::before {
  content: "";
  position: absolute;
  inset: -30% -20%;
  background:
    radial-gradient(38% 62% at 30% 44%, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, 0) 66%),
    radial-gradient(30% 40% at 66% 30%, rgba(255, 246, 232, .5) 0%, rgba(255, 246, 232, 0) 70%);
  filter: blur(26px);
}
.mac-wall::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(26% 38% at 78% 68%, rgba(86, 104, 128, .34) 0%, rgba(86, 104, 128, 0) 72%),
    radial-gradient(22% 30% at 12% 34%, rgba(120, 104, 140, .24) 0%, rgba(120, 104, 140, 0) 74%);
  filter: blur(30px);
}

/* -------------------------------------------------------- the menu bar */

.mac-menubar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 40;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 0 14px;
  font: 500 12px/1 var(--font-system);
  color: #1c1c1e;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.mb-apple {
  width: 13px;
  height: 14px;
  margin-right: -3px;
  background: currentColor;
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 814 1000'%3E%3Cpath d='M788 340c-5 4-95 55-95 167 0 130 114 176 118 177-1 3-19 62-60 122-37 53-75 106-134 106s-74-34-142-34c-66 0-89 35-143 35s-91-49-133-109C99 728 60 619 60 516c0-166 108-254 214-254 56 0 103 37 138 37 34 0 86-39 150-39 24 0 114 2 173 87zM531 171c26-31 45-74 45-117 0-6-1-12-2-17-43 2-94 29-125 65-24 27-46 70-46 113 0 7 1 13 2 15 3 1 7 1 11 1 39 0 87-26 115-60z'/%3E%3C/svg%3E");
          mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 814 1000'%3E%3Cpath d='M788 340c-5 4-95 55-95 167 0 130 114 176 118 177-1 3-19 62-60 122-37 53-75 106-134 106s-74-34-142-34c-66 0-89 35-143 35s-91-49-133-109C99 728 60 619 60 516c0-166 108-254 214-254 56 0 103 37 138 37 34 0 86-39 150-39 24 0 114 2 173 87zM531 171c26-31 45-74 45-117 0-6-1-12-2-17-43 2-94 29-125 65-24 27-46 70-46 113 0 7 1 13 2 15 3 1 7 1 11 1 39 0 87-26 115-60z'/%3E%3C/svg%3E");
}
.mb-item { position: relative; padding: 3px 7px; margin: 0 -7px; border-radius: 5px; }
.mb-app { font-weight: 700; }
.mb-right { display: flex; align-items: center; gap: 13px; margin-left: auto; }
.mb-mark { width: 13px; height: 13px; color: #1c1c1e; }
.mb-mark .mark-moss { fill: currentColor; }
.mb-mark { stroke: none; }
.mb-glyph { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mb-mag { width: 13px; height: 13px; }
.mb-batt {
  width: 22px; height: 11px;
  border: 1.2px solid currentColor;
  border-radius: 3px;
  position: relative;
  opacity: .85;
}
.mb-batt::before {
  content: ""; position: absolute; inset: 1.6px; right: 6px;
  border-radius: 1px; background: currentColor;
}
.mb-batt::after {
  content: ""; position: absolute; top: 3px; right: -3px;
  width: 1.6px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; opacity: .5;
}
.mb-clock { font-variant-numeric: tabular-nums; }

/* a menu, pulled down */
.mac-dropdown {
  position: absolute;
  z-index: 45;
  top: 28px;
  min-width: 196px;
  padding: 5px;
  display: none;
  flex-direction: column;
  border: .5px solid rgba(28, 31, 28, .14);
  border-radius: 8px;
  background: rgba(252, 251, 246, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 12px 30px -8px rgba(28, 31, 28, .35), 0 0 0 .5px rgba(28, 31, 28, .06);
  font: 400 12.5px/1 var(--font-system);
  color: var(--ink);
}
.dd-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 22px; padding: 0 8px; border-radius: 5px;
}
.dd-row em { font-style: normal; color: var(--text-tertiary); font-size: 12px; }
.dd-off { color: var(--ink-tertiary); }
.dd-off em { color: var(--ink-quaternary); }
.dd-sep { height: 1px; margin: 4px 8px; background: rgba(28, 31, 28, .14); }

/* -------------------------------------------- windows, the shared parts */

.mac-window, .mac-float, .mac-panel {
  position: absolute;
  z-index: 10;
  border-radius: 11px;
  background: var(--canvas);
  box-shadow:
    0 26px 60px -20px rgba(20, 22, 20, .45),
    0 6px 16px -6px rgba(20, 22, 20, .2),
    0 0 0 .5px rgba(20, 22, 20, .18),
    inset 0 .5px 0 0 rgba(255, 255, 255, .85);
  overflow: hidden;
}

/* traffic lights */
.win-lights { display: flex; gap: 8px; }
.win-lights i { width: 12px; height: 12px; border-radius: 50%; }
.win-lights i:nth-child(1) { background: #ff5f57; }
.win-lights i:nth-child(2) { background: #febd2e; }
.win-lights i:nth-child(3) { background: #28c940; }

/* ------------------------------------------------------ the main window */

.mac-window {
  left: 170px;
  top: 66px;
  width: 820px;
  height: 556px;
  display: flex;
  flex-direction: column;
}
.win-strip { height: 26px; flex: none; display: flex; align-items: center; padding: 0 14px; }
.win-body { flex: 1; display: flex; min-height: 0; }

.win-side {
  width: 208px; flex: none;
  display: flex; flex-direction: column;
  padding: 0 10px 12px;
  border-right: .5px solid rgba(28, 31, 28, .07);
}
.side-brand {
  display: flex; align-items: center; gap: 8px;
  height: 30px; margin: 0 0 14px; padding: 0 6px;
  font: 600 13.5px/1 var(--font-system);
}
.side-mark { width: 15px; height: 15px; color: var(--ink); }
.side-mark .mark-moss { fill: var(--moss); }
.side-toggle { width: 14px; height: 14px; margin-left: auto; color: var(--ink-tertiary); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-row {
  display: flex; align-items: center; gap: 9px;
  height: 27px; padding: 0 8px; border-radius: 7px;
  font: 400 12.5px/1 var(--font-system);
}
.side-row svg { width: 14px; height: 14px; flex: none; color: var(--text-secondary); }
.side-row em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-tertiary); }
.side-row.is-on { background: #dfe0d5; }
.side-foot { margin: auto 0 0; display: flex; flex-direction: column; gap: 8px; }
.side-stored {
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  font: 400 11px/1 var(--font-system);
  color: var(--text-tertiary);
  transition: color .4s var(--ease-out, ease);
}
.side-stored svg { width: 11px; height: 11px; }

.win-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.win-tool {
  height: 30px; flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px 0 12px;
  font: 400 12px/1 var(--font-system);
  color: var(--text-secondary);
}
.win-tool svg { width: 13px; height: 13px; }
.tool-nav { display: flex; align-items: center; gap: 8px; }
.tool-today {
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: rgba(28, 31, 28, .07);
  font-size: 11.5px; color: var(--text-secondary);
}
.tool-right { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.tool-key {
  padding: 2px 6px; border-radius: 5px;
  background: rgba(28, 31, 28, .07);
  font-size: 11px; color: var(--text-secondary);
}
.tool-panel { margin-left: 4px; }

.win-scroll {
  flex: 1; min-height: 0;
  padding: 2px 18px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 88%, transparent 100%);
          mask-image: linear-gradient(#000 88%, transparent 100%);
}
.day-title { margin: 4px 0 0; font: 700 26px/32px var(--font-system); letter-spacing: -.4px; }
.day-date { margin: 2px 0 0; font: 400 12px/16px var(--font-system); color: var(--text-secondary); }
.day-chips { display: flex; gap: 7px; margin: 11px 0 0; }
.chip {
  display: flex; align-items: center; gap: 6px;
  height: 21px; padding: 0 9px;
  border: .5px solid rgba(28, 31, 28, .1);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font: 400 11px/1 var(--font-system);
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip em { font-style: normal; color: var(--text-secondary); }
.c0 { color: #ab5438; }
.c1 { color: #4557a3; }

.sect {
  display: flex; align-items: center; gap: 7px;
  height: 26px; margin: 12px 0 5px; padding: 0 2px;
  font: 600 12px/1 var(--font-system);
}
.sect svg { width: 13px; height: 13px; color: var(--text-secondary); }
.sect em { margin-left: auto; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--text-secondary); }
.now {
  padding: 2px 5px; border-radius: 4px;
  background: var(--moss-badge);
  font: 700 8.5px/1 var(--font-system);
  letter-spacing: .5px;
  color: var(--moss);
}

.row {
  transition: border-color .3s ease;
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 44px; margin-bottom: 7px; padding: 12px;
  border: .5px solid rgba(28, 31, 28, .05);
  border-radius: 9px;
  background: var(--paper);
}
.tick {
  width: 15px; height: 15px; flex: none; margin-top: -1px;
  border: 1.4px solid var(--ink-checkbox);
  border-radius: 50%;
}
.row-in { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row-t { font: 400 13px/17px var(--font-system); }
.row-m { display: flex; align-items: center; gap: 5px; font: 400 11px/1 var(--font-system); color: var(--text-secondary); }
.row-m svg { width: 11px; height: 11px; }
.tag { display: flex; align-items: center; gap: 4px; margin-left: 3px; }
.tag::before { content: ""; width: 4.5px; height: 4.5px; border-radius: 50%; background: currentColor; }
.dot { width: 6px; height: 6px; margin: 4px 0 0 auto; border-radius: 50%; background: currentColor; flex: none; }

/* ---------------------------------------------------- the floating window */

/* 340 x 480 — the panel's own size, drawn to the same ratio. */
.mac-float {
  right: 74px;
  top: 74px;
  width: 300px;
  height: 424px;
  display: flex;
  flex-direction: column;
  border-radius: 13px;
  background: rgba(245, 242, 232, .96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 20;
}
.fw-head {
  display: flex; align-items: flex-start;
  padding: 14px 14px 10px;
  border-bottom: .5px solid rgba(28, 31, 28, .07);
}
.fw-h { display: flex; flex-direction: column; gap: 2px; }
.fw-t { font: 700 17px/20px var(--font-system); }
.fw-s { font: 400 11.5px/1 var(--font-system); color: var(--text-secondary); }
.fw-acts { display: flex; gap: 11px; margin-left: auto; color: var(--text-secondary); }
.fw-acts svg { width: 14px; height: 14px; }
.fw-body {
  flex: 1; min-height: 0; padding: 0 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 86%, transparent 100%);
          mask-image: linear-gradient(#000 86%, transparent 100%);
}
.fw-body .day-chips { margin: 12px 0 10px; }
.fw-body .row { min-height: 38px; padding: 9px 10px; }
.fw-body .row-t { font-size: 12.5px; line-height: 16px; }
.fw-body .sect { margin: 10px 0 5px; }
.fw-foot {
  display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 9px 14px;
  border-top: .5px solid rgba(28, 31, 28, .07);
  font: 400 11.5px/1 var(--font-system);
  color: var(--text-secondary);
}
.fw-foot svg { width: 12px; height: 12px; }

/* ------------------------------------------------------ the drag image */

/* Measured against the row it leaves and the line it lands on, both of
   which are laid out rather than placed — so if either moves, these two
   numbers are what has to move with them. */
.mac-drag {
  position: absolute;
  /* left/top/width are written by mac.js, off the row the card leaves. */
  left: 772px;
  top: 311px;
  width: 276px;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
}
.mac-drag .row {
  margin: 0;
  min-height: 38px;
  padding: 9px 10px;
  box-shadow: 0 16px 30px -12px rgba(20, 22, 20, .5);
}
.mac-drag .row-t { font-size: 12.5px; line-height: 16px; }

/* --------------------------------------------------- the capture panel */

/* The shape is the phone's: canvas, the draft in the serif, the transport
   and the receipt underneath rather than in a sheet. CapturePanel.swift. */
.mac-panel {
  left: 50%;
  /* Low enough that the day's head and its first rows stay readable behind
     it. Sat mid-window it cut the list in half and the band it left read as
     a blank slab rather than as a panel over a list. */
  left: 50%;
  top: 404px;
  width: 560px;
  margin-left: -280px;
  padding: 18px 18px 14px;
  border-radius: 20px;
  z-index: 30;
  background: rgba(245, 242, 232, .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.cp-draft {
  position: relative;
  margin: 0 0 16px;
  min-height: 46px;
  font: 400 17px/23px var(--font-serif);
}
.cp-ph { position: absolute; inset: 0; color: var(--ink-tertiary); }
.cp-words .w { opacity: 0; }
.cp-foot { display: flex; align-items: center; gap: 12px; font: 400 12px/1 var(--font-system); }
.cp-pill {
  display: flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(28, 31, 28, .07);
}
.cp-pill svg { width: 12px; height: 12px; }
.cp-pause { fill: currentColor; stroke: none; }
.cp-time { font-variant-numeric: tabular-nums; font-size: 11.5px; }
.cp-state, .cp-done { color: var(--text-secondary); }
.cp-done { display: none; }
.cp-cancel { margin-left: auto; color: var(--text-secondary); }
.cp-save {
  padding: 7px 17px; border-radius: var(--radius-pill);
  background: var(--action-primary);
  color: var(--text-on-primary);
  font-weight: 500;
}

/* the chord, as it is pressed */
.md-chord {
  position: absolute;
  left: 50%; top: 190px;
  z-index: 31;
  display: flex; gap: 6px;
  margin: 0;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
}
.md-chord kbd {
  padding: 6px 11px;
  border: .5px solid rgba(28, 31, 28, .16);
  border-bottom-width: 2px;
  border-radius: 7px;
  background: rgba(252, 251, 246, .96);
  box-shadow: 0 6px 16px -6px rgba(20, 22, 20, .4);
  font: 600 12px/1 var(--font-system);
  color: var(--ink);
}

/* ------------------------------------------------------------- the Dock */

.mac-dock {
  position: absolute;
  left: 50%; bottom: 14px;
  z-index: 50;
  display: flex; gap: 8px;
  padding: 6px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 17px;
  background: linear-gradient(181deg, rgba(255, 255, 255, .46) 4%, rgba(255, 255, 255, .2) 99%);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow:
    0 1px 1px rgba(20, 22, 20, .1),
    0 4px 10px rgba(20, 22, 20, .12),
    0 14px 28px -10px rgba(20, 22, 20, .3),
    inset 0 .5px 0 rgba(255, 255, 255, .9);
}
.dk {
  position: relative;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  padding: 0;
  border: .5px solid rgba(28, 31, 28, .18);
  border-radius: 13px;
  background:
    radial-gradient(82% 82% at 42% -4%, #ffffff 0%, #f0ece0 44%, #d6d2c4 100%);
  box-shadow:
    0 7px 12px -6px rgba(20, 22, 20, .45),
    0 1px 2px rgba(20, 22, 20, .18),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(28, 31, 28, .08);
  color: var(--ink);
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s ease;
}
.dk svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.dk:hover { transform: translateY(-4px) scale(1.14); }
.dk[aria-pressed="true"] {
  transform: translateY(-6px) scale(1.25);
  border-color: rgba(61, 89, 71, .55);
  background: radial-gradient(82% 82% at 42% -4%, #ffffff 0%, #e6ebe4 44%, #c6d0c6 100%);
  box-shadow:
    0 10px 16px -8px rgba(20, 22, 20, .4),
    0 0 0 1px rgba(61, 89, 71, .16),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  color: var(--moss);
}
/* the running-app dot, under the one that is open */
.dk[aria-pressed="true"]::after {
  content: "";
  position: absolute; bottom: -7px; left: 50%;
  width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%;
  background: rgba(28, 31, 28, .45);
}
.dk-tip {
  position: absolute;
  bottom: calc(100% + 13px); left: 50%;
  padding: 4px 9px;
  transform: translateX(-50%) translateY(4px) scale(.92);
  border: .5px solid rgba(28, 31, 28, .1);
  border-radius: 6px;
  background: rgba(252, 251, 246, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 10px rgba(20, 22, 20, .18);
  font: 400 11.5px/1.4 var(--font-system);
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.dk:hover .dk-tip, .dk:focus-visible .dk-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------- the line, and the chips */

.mac-caps {
  display: grid;
  max-width: 620px;
  margin: 26px auto 0;
  padding: 0 var(--shell-gutter);
  text-align: center;
}
.mac-caps > * { grid-area: 1 / 1; }
.mac-cap {
  margin: 0;
  font: var(--type-subheadline);
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity .3s var(--ease-out, ease);
}
.mac-cap b { color: var(--ink); font-weight: 600; }

.md-chips {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 20px auto 0;
  padding: 0 var(--shell-gutter);
}
.mchip {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 13px;
  border: 1px solid var(--ink-quaternary);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font: var(--type-footnote);
  color: var(--text-secondary);
  cursor: pointer;
}
.mchip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mchip[aria-pressed="true"] { border-color: var(--moss); color: var(--moss); background: var(--canvas); }


/* ------------------------------------------------ the mark, breathing */

/* `OffhandMarkLive`: at rest it is exactly the logo — "silence draws the
   logo, bar for bar" — and sound stretches each bar around its own resting
   height, up to `gain` 0.6 of it. Each bar keeps its rank, so the tall one
   stays the tallest whatever the level does. Widths and heights are
   `MarkGeometry`'s hundredths. */
.wave {
  display: flex;
  align-items: center;
  gap: 1.8px;
  width: 14px;
  height: 14px;
  flex: none;
}
.wave i {
  width: 2.2px;
  border-radius: 1.1px;
  background: currentColor;
  transform-origin: 50% 50%;
}
.wave i:nth-child(1) { height: 6.8px; }
.wave i:nth-child(2) { height: 13.7px; }
.wave i:nth-child(3) { height: 9.9px; }
.wave i:nth-child(4) { height: 6.8px; }

@keyframes wv-a { 0%, 100% { transform: scaleY(1); } 24% { transform: scaleY(1.52); } 51% { transform: scaleY(1.06); } 76% { transform: scaleY(1.33); } }
@keyframes wv-b { 0%, 100% { transform: scaleY(1.04); } 19% { transform: scaleY(1.28); } 44% { transform: scaleY(1); } 68% { transform: scaleY(1.44); } }
@keyframes wv-c { 0%, 100% { transform: scaleY(1); } 31% { transform: scaleY(1.38); } 58% { transform: scaleY(1.12); } 82% { transform: scaleY(1.5); } }
@keyframes wv-d { 0%, 100% { transform: scaleY(1.1); } 27% { transform: scaleY(1); } 55% { transform: scaleY(1.46); } 79% { transform: scaleY(1.18); } }

/* Moving only while the microphone is delivering. */
[data-beat="open"] .mac-panel .wave i,
[data-beat="hearing"] .mac-panel .wave i,
[data-beat="saving"] .mac-panel .wave i,
[data-scene="reread"][data-beat="pass"] .wave i {
  animation: var(--wv) 1.05s ease-in-out infinite;
}
.wave i:nth-child(1) { --wv: wv-a; animation-delay: -.42s; }
.wave i:nth-child(2) { --wv: wv-b; animation-delay: -.08s; }
.wave i:nth-child(3) { --wv: wv-c; animation-delay: -.61s; }
.wave i:nth-child(4) { --wv: wv-d; animation-delay: -.25s; }

/* The capsule and the mark go moss together, and back to the clock's grey
   together — `CapturePanel.swift`, the transport. */
.cp-pill { color: var(--text-secondary); transition: background .3s ease, color .3s ease; }
[data-beat="open"] .mac-panel .cp-pill,
[data-beat="hearing"] .mac-panel .cp-pill,
[data-beat="saving"] .mac-panel .cp-pill {
  background: var(--moss-badge);
  color: var(--moss);
}
.cp-pill.is-quiet { background: rgba(28, 31, 28, .07); }
[data-scene="reread"][data-beat="pass"] .cp-pill.is-quiet { background: var(--moss-badge); color: var(--moss); }

/* ------------------------------------- where a card is carried: Claude */

.mac-agent { position: absolute; left: 96px; top: 132px; width: 556px; z-index: 9; }
.ag-win {
  position: relative;
  border: 1px solid var(--ink-border-soft);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 4px 12px rgba(28, 31, 28, .06), 0 18px 40px -20px rgba(20, 22, 20, .4), 0 0 0 .5px rgba(20, 22, 20, .12);
  overflow: hidden;
}
.ag-bar {
  position: relative;
  display: flex; align-items: center;
  height: 38px; padding: 0 14px;
  border-bottom: 1px solid var(--ink-border-soft);
}
.ag-lights { display: flex; gap: 7px; }
.ag-lights i { width: 10px; height: 10px; border-radius: 50%; }
.ag-lights i:nth-child(1) { background: rgb(255, 97, 89); }
.ag-lights i:nth-child(2) { background: rgb(252, 191, 46); }
.ag-lights i:nth-child(3) { background: rgb(41, 201, 64); }
.ag-name {
  position: absolute; left: 0; right: 0;
  text-align: center;
  font: 400 12.5px/1 var(--font-system);
  color: var(--text-secondary);
}
.ag-eg {
  position: absolute; right: 14px;
  display: flex; align-items: center; gap: 3px;
  font: 400 11px/1 var(--font-system);
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity .3s ease;
}
.ag-eg svg { width: 10px; height: 10px; }
.ag-thread {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
  min-height: 150px;
  padding: 14px 14px;
}
.ag-bub { margin: 0; font: 400 13px/19px var(--font-system); opacity: 0; transition: opacity .35s ease; }
.ag-out {
  display: flex;
  align-self: flex-end; max-width: 84%;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(28, 31, 28, .06);
}
.ag-in { display: flex; gap: 7px; color: var(--ink); }
.ag-mark {
  width: 13px; height: 13px; flex: none; margin-top: 3px;
  border-radius: 50%;
  background: #d97757;
}
.ag-comp {
  display: flex; align-items: flex-end; gap: 9px;
  margin: 0 14px 14px;
  padding: 10px 12px;
  border: .5px solid rgba(28, 31, 28, .12);
  border-radius: 12px;
}
.ag-comp svg { width: 14px; height: 14px; flex: none; color: var(--ink-tertiary); margin-bottom: 2px; }
.ag-ph, .ag-dropped { flex: 1; min-width: 0; font: 400 13px/18px var(--font-system); }
.ag-ph { color: var(--ink-tertiary); }
.ag-dropped { display: none; color: var(--ink); }

/* The two paragraphs `asText` joins, and the blank line it joins them
   with. Same shape wherever the carried text is shown — the composer,
   the sent bubble, the prompt. */
.ag-dropped, .ag-out, .tm-dropped { flex-direction: column; gap: 9px; }
.dt-t, .dt-n { display: block; }
.dt-n { color: var(--text-secondary); }
.ag-out .dt-n { color: var(--text-secondary); }
.ag-send {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: var(--ink-quaternary);
  transition: background .25s ease;
}
.ag-send svg { width: 10px; height: 10px; color: #fff; stroke-width: 2.6; }

/* The mark in the checkbox's column. One shape throughout — a ring of the
   same weight and diameter — and what changes along it is how much of the
   line is solid: dashed is work that is not real yet, solid is work that is
   banked. `AgentRow.swift`, and the design's ladder behind it. */
.tick-state { position: relative; transition: border-color .3s ease; }
.tick-state svg {
  /* -1px so the drawn ring sits exactly where the checkbox's own ring sat:
     the 16-unit viewBox then maps onto the tick's 15px outer circle. */
  position: absolute; inset: -1px;
  width: auto; height: auto;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .3s ease;
}
/* Coarse enough to read as dashes at 15px; finer and it greys into
   a solid ring, which is the unstarted state and a different word. */
.tk-track { stroke: var(--ink-checkbox); stroke-width: 1.4; stroke-dasharray: 2.5 2.7; }
/* Half the circumference, and no more: "always exactly half — a state, not
   a measurement" where there is nothing to bank against. 2πr at r 7.1 is
   44.6, so the solid run is 22.3. */
.tk-arc {
  stroke: var(--moss); stroke-width: 1.6;
  stroke-dasharray: 22.3 44.6;
  /* Without fill-box the origin resolves against the viewport, not the
     circle, and the arc swings off the mark. */
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.tk-done circle { stroke: var(--moss); stroke-width: 1.4; }
.tk-done path { stroke: var(--moss); stroke-width: 1.6; }

/* ------------------------------------------- the agent with a shell */

.mac-term {
  position: absolute;
  left: 150px; top: 420px;
  width: 470px; min-height: 192px;
  z-index: 9;
  border-radius: 11px;
  /* Warm, not black. The palette is "warm and low-contrast" and the design
     keeps one dark accent per page — a pure-black slab here was the loudest
     thing on the desk and greyed the cream windows beside it. This is the
     canvas's own hue taken down, and the text is the canvas itself. */
  background: #2a2620;
  box-shadow:
    0 24px 50px -24px rgba(28, 31, 28, .42),
    0 0 0 .5px rgba(28, 31, 28, .3),
    inset 0 .5px 0 0 rgba(245, 242, 232, .14);
  overflow: hidden;
}
.tm-bar {
  position: relative;
  display: flex; align-items: center;
  height: 30px; padding: 0 12px;
  background: #36322a;
  border-bottom: .5px solid rgba(245, 242, 232, .09);
}
.tm-bar .ag-lights i { width: 9px; height: 9px; }
.tm-bar .ag-name { color: rgba(245, 242, 232, .48); font-size: 11px; }
.tm-body {
  padding: 11px 13px;
  font: 400 11.5px/19px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(245, 242, 232, .84);
}
.tm-l { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-prompt { white-space: normal; overflow: visible; display: flex; gap: 6px; align-items: flex-start; }
.tm-p { color: #8faa96; }
.tm-p::after { content: " $"; color: rgba(245, 242, 232, .38); }
.tm-c { color: #8faa96; }
.tm-dropped, .tm-ack { opacity: 0; transition: opacity .3s ease; }
.tm-dropped { display: flex; min-width: 0; }
.tm-dropped .dt-n { color: rgba(245, 242, 232, .56); }
.tm-ack { color: rgba(245, 242, 232, .52); margin-top: 6px; }
.tm-ack2 { margin-top: 0; }
.tm-caret {
  align-self: flex-end;
  display: inline-block;
  width: 6px; height: 13px;
  margin-left: 1px;
  vertical-align: -2px;
  background: rgba(245, 242, 232, .72);
}

/* The caption a handed-off row wears. `AgentRow.caption`: "<who> · working"
   while it is being worked, and "<who> · finished" when it comes back —
   the clock is only appended where there is one, and there is none here.
   `who` is the agent that last reported, never "Offhand": "Offhand is the
   board, not something that picks work up." */
.row-state { gap: 6px; }
.st {
  display: none;
  font: 400 11px/14px var(--font-system);
  color: var(--text-secondary);
}
.st-b { color: var(--moss); }

/* --------------------------------------- the second engine's proofread */

.mac-proof {
  position: absolute;
  /* Centred on the desk, because nothing else is on it. */
  left: 50%; top: 288px;
  width: 620px; margin-left: -310px;
  z-index: 30;
  padding: 18px 18px 14px;
  border-radius: 20px;
  background: rgba(245, 242, 232, .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.pf-draft {
  position: relative;
  margin: 0 0 16px;
  font: 400 16px/25px var(--font-serif);
}
/* One word in both engines' spellings. The word is replaced rather than
   stacked: the app's paragraph reflows too, and the two halves punctuate
   identically, so the only thing that moves is the three words. Stacking
   them left the width of the longer spelling behind as a gap. */
.pf-w > span { white-space: nowrap; }
.pf-b { display: none; color: var(--moss); }
.pf-w.is-fixed .pf-a { display: none; }
.pf-w.is-fixed .pf-b {
  /* inline-block, because a transform does nothing to a bare inline box. */
  display: inline-block;
  vertical-align: baseline;
  animation: pf-land .3s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes pf-land {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}
.mac-proof.is-settled .pf-b { color: var(--ink); transition: color .7s ease; }

/* The hairline caret that crosses the finished paragraph. */
.pf-caret {
  position: absolute;
  top: 2px; left: 0;
  will-change: transform;
  width: 1.5px; height: 21px;
  background: var(--moss);
  opacity: 0;
}
.pf-state, .pf-done { color: var(--text-secondary); }
.pf-done { display: none; }

/* ==========================================================================
   The four scenes. Everything above is the desk; everything below is which
   parts of it are on, and what moves while they are.
   ========================================================================== */

.mac-window, .mac-float, .mac-panel, .mac-agent, .mac-term, .mac-proof, .mac-dropdown, .md-chord { transition: opacity .34s ease, visibility 0s linear .34s, transform .34s cubic-bezier(.2, .8, .3, 1); }
/* `visibility`, not opacity alone: a panel at opacity 0 still carries its
   `backdrop-filter`, and some engines composite that — which left a frosted
   rectangle sitting on the desk where the capture panel was going to be,
   reading as a hole someone had saved a space for. */
.mac-window, .mac-float, .mac-panel, .mac-agent, .mac-term, .mac-proof {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* which windows each scene has open */
/* The proofread has no window behind it on purpose: the capture panel is
   an NSPanel over whatever had the screen, and here that is the desk. A
   list behind it only competes with the three words that are meant to be
   the only thing moving. */
[data-scene="speak"] .mac-window { opacity: 1; visibility: visible; transition-delay: 0s; }
[data-scene="float"] .mac-agent,
[data-scene="float"] .mac-term { opacity: 1; visibility: visible; transition-delay: 0s; }
[data-scene="local"] .mac-window { opacity: 1; visibility: visible; transition-delay: 0s; }
[data-scene="float"] .mac-float { opacity: 1; visibility: visible; transition-delay: 0s; }
/* The panel exists from `open` and not one beat before. This used to be
   `[data-scene="speak"] .mac-panel`, the whole scene, with the `chord` beat
   hiding it again — which played as composer, then chord, then composer: the
   thing the chord is meant to summon was already on screen when the chord was
   pressed. The beats it is visible for are the four it is actually open. */
[data-scene="speak"][data-beat="open"] .mac-panel,
[data-scene="speak"][data-beat="hearing"] .mac-panel,
[data-scene="speak"][data-beat="saving"] .mac-panel,
[data-scene="speak"][data-beat="saved"] .mac-panel { opacity: 1; visibility: visible; transition-delay: 0s; }
[data-scene="reread"] .mac-proof { opacity: 1; visibility: visible; transition-delay: 0s; }

/* the panels arrive from just under where they land */
.mac-panel, .mac-proof { transform: translateY(10px) scale(.985); }
[data-scene="speak"][data-beat="open"] .mac-panel,
[data-scene="speak"][data-beat="hearing"] .mac-panel,
[data-scene="speak"][data-beat="saving"] .mac-panel,
[data-scene="speak"][data-beat="saved"] .mac-panel,
[data-scene="reread"] .mac-proof { transform: none; }
.mac-float { transform: translateX(14px) scale(.985); }
[data-scene="float"] .mac-float { transform: none; }

/* A number that changes when the day does. Two spans rather than a script
   writing textContent, so the frame the scene rests on is in the markup. */
.n { position: relative; }
.n-b { display: none; }
[data-scene="speak"][data-beat="landed"] .n-a,
[data-scene="float"] .n-a, [data-scene="reread"] .n-a, [data-scene="local"] .n-a { display: none; }
[data-scene="speak"][data-beat="landed"] .n-b,
[data-scene="float"] .n-b, [data-scene="reread"] .n-b, [data-scene="local"] .n-b { display: inline; }

/* The row the capture adds, unfolding into its own part of the day. */
.day-new {
  overflow: hidden;
  max-height: 0;
  /* `.row` sets `min-height: 44px`, and CSS gives the element to min-height
     whenever it exceeds max-height — so `max-height: 0` collapsed nothing.
     The row stood at its full 44px from the first frame with its content
     clipped, the space for it was reserved before it was spoken, and the
     rows below it never moved: measured, the element after it sat at the
     same y at `rest` and at `landed`. Zeroing the minimum is what makes the
     unfold real, and it has to be in the transition below or the row snaps
     to 44px on the first frame of it. */
  min-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  transition: max-height .42s cubic-bezier(.2, .8, .3, 1),
              min-height .42s cubic-bezier(.2, .8, .3, 1), opacity .3s ease .08s,
              margin .42s cubic-bezier(.2, .8, .3, 1), padding .42s cubic-bezier(.2, .8, .3, 1);
}
[data-scene="speak"][data-beat="landed"] .day-new,
[data-scene="float"] .day-new, [data-scene="reread"] .day-new, [data-scene="local"] .day-new {
  max-height: 60px;
  min-height: 44px;
  margin-bottom: 7px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-width: .5px;
  opacity: 1;
}

/* ---- speak ------------------------------------------------------------ */
[data-scene="speak"][data-beat="chord"] .md-chord { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-scene="speak"][data-beat="landed"] .mac-panel { opacity: 0; transform: translateY(-6px) scale(.99); }
[data-beat="hearing"] .cp-ph,
[data-beat="saving"] .cp-ph,
[data-beat="saved"] .cp-ph { opacity: 0; }
.cp-ph { transition: opacity .2s ease; }
.cp-words .w { transition: opacity .22s ease; }
.cp-words .w.on { opacity: 1; }
[data-beat="saved"] .cp-pause { display: none; }
[data-beat="saved"] .cp-time { display: none; }
[data-beat="saved"] .cp-state { display: none; }
[data-beat="saved"] .cp-done { display: inline; }
[data-beat="saving"] .cp-save { transform: scale(.94); }
.cp-save { transition: transform .16s ease; }

/* ---- float ------------------------------------------------------------ */
/* Two cards, two destinations, and each task answers for itself: the mark
   in its checkbox moves when its own card lands, not when the scene ends. */
.mac-drag { transition: opacity .18s ease, transform .72s cubic-bezier(.34, .68, .28, 1); }
/* A handed-off row is not dimmed. The drag carries a copy — the row stays
   where it is, at full strength — and what marks it out is the hairline
   `AgentRow.awaitsYou` gives it: "a row awaiting you is moss, every other
   row is white. No new colour enters the palette to say it." Drawn as the
   border plus a ring of the same colour, because half a pixel of moss does
   not survive the stage being scaled down. */
.mac-float .row.is-ghost, .mac-float .row.is-ghost2 { transition: border-color .3s ease, box-shadow .3s ease; }

[data-scene="float"][data-beat="lift"] .mac-drag:not(.mac-drag2) { opacity: 1; transform: translate(-6px, -5px) rotate(-1.6deg) scale(1.03); }
[data-scene="float"][data-beat="drag"] .mac-drag:not(.mac-drag2) { opacity: 1; transform: translate(var(--drag-x, -600px), var(--drag-y, -40px)) rotate(-2.2deg) scale(.98); }
[data-scene="float"][data-beat="drop"] .mac-drag:not(.mac-drag2) { opacity: 0; transform: translate(var(--drag-x, -600px), var(--drag-y, -40px)) scale(.94); }
[data-scene="float"][data-beat="lift2"] .mac-drag2 { opacity: 1; transform: translate(-6px, -5px) rotate(-1.6deg) scale(1.03); }
[data-scene="float"][data-beat="drag2"] .mac-drag2 { opacity: 1; transform: translate(var(--drag-x, -600px), var(--drag-y, -40px)) rotate(-2.2deg) scale(.98); }
[data-scene="float"][data-beat="drop2"] .mac-drag2 { opacity: 0; transform: translate(var(--drag-x, -600px), var(--drag-y, -40px)) scale(.94); }

/* The window being dropped into comes forward, the way it does on a real
   desk — and the chat window grows a line when the whole task lands in it,
   so it needs the room. */
[data-scene="float"][data-beat="lift"] .mac-agent,
[data-scene="float"][data-beat="drag"] .mac-agent,
[data-scene="float"][data-beat="drop"] .mac-agent,
[data-scene="float"][data-beat="sent"] .mac-agent,
[data-scene="float"][data-beat="answered"] .mac-agent { z-index: 12; }
[data-scene="float"][data-beat="lift2"] .mac-term,
[data-scene="float"][data-beat="drag2"] .mac-term,
[data-scene="float"][data-beat="drop2"] .mac-term,
[data-scene="float"][data-beat="working"] .mac-term,
[data-scene="float"][data-beat="review"] .mac-term { z-index: 12; }

/* The chat window: the words land in the field, unsent, then they are
   sent and the answer comes back. */
[data-scene="float"][data-beat="drop"] .ag-ph { display: none; }
[data-scene="float"][data-beat="drop"] .ag-dropped { display: block; }
[data-scene="float"][data-beat="drop"] .ag-send { background: var(--action-primary); }
[data-scene="float"][data-beat="sent"] .ag-out,
[data-scene="float"][data-beat="answered"] .ag-out,
[data-scene="float"][data-beat="lift2"] .ag-out,
[data-scene="float"][data-beat="drag2"] .ag-out,
[data-scene="float"][data-beat="drop2"] .ag-out,
[data-scene="float"][data-beat="working"] .ag-out,
[data-scene="float"][data-beat="review"] .ag-out { opacity: 1; }
[data-scene="float"][data-beat="answered"] .ag-in,
[data-scene="float"][data-beat="lift2"] .ag-in,
[data-scene="float"][data-beat="drag2"] .ag-in,
[data-scene="float"][data-beat="drop2"] .ag-in,
[data-scene="float"][data-beat="working"] .ag-in,
[data-scene="float"][data-beat="review"] .ag-in { opacity: 1; }
[data-scene="float"][data-beat="answered"] .ag-eg,
[data-scene="float"][data-beat="lift2"] .ag-eg,
[data-scene="float"][data-beat="drag2"] .ag-eg,
[data-scene="float"][data-beat="drop2"] .ag-eg,
[data-scene="float"][data-beat="working"] .ag-eg,
[data-scene="float"][data-beat="review"] .ag-eg { opacity: 1; }

/* The terminal: the words land at the prompt, and it reports twice. */
[data-scene="float"][data-beat="drop2"] .tm-dropped,
[data-scene="float"][data-beat="working"] .tm-dropped,
[data-scene="float"][data-beat="review"] .tm-dropped { opacity: 1; }
[data-scene="float"][data-beat="working"] .tm-ack1,
[data-scene="float"][data-beat="review"] .tm-ack1 { opacity: 1; }
[data-scene="float"][data-beat="review"] .tm-ack2 { opacity: 1; }

/* The mark in each row's checkbox column, each on its own card's beats.
   `AgentRow.swift`: the ring gives way to a moss arc over a dashed track
   while it is being worked — half of it exactly, "a state, not a
   measurement" — and to a checkmark circle once it is handed back. A row
   awaiting you wears the moss hairline instead of the white one. */
[data-scene="float"][data-beat="sent"] .mac-float .row.is-ghost .tick-state,
[data-scene="float"][data-beat="answered"] .mac-float .row.is-ghost .tick-state,
[data-scene="float"][data-beat="lift2"] .mac-float .row.is-ghost .tick-state,
[data-scene="float"][data-beat="drag2"] .mac-float .row.is-ghost .tick-state,
[data-scene="float"][data-beat="drop2"] .mac-float .row.is-ghost .tick-state,
[data-scene="float"][data-beat="working"] .mac-float .row.is-ghost .tick-state,
[data-scene="float"][data-beat="review"] .mac-float .row.is-ghost .tick-state { border-color: transparent; }
[data-scene="float"][data-beat="sent"] .mac-float .row.is-ghost .tk-ring { opacity: 1; }
[data-scene="float"][data-beat="answered"] .mac-float .row.is-ghost .tk-done,
[data-scene="float"][data-beat="lift2"] .mac-float .row.is-ghost .tk-done,
[data-scene="float"][data-beat="drag2"] .mac-float .row.is-ghost .tk-done,
[data-scene="float"][data-beat="drop2"] .mac-float .row.is-ghost .tk-done,
[data-scene="float"][data-beat="working"] .mac-float .row.is-ghost .tk-done,
[data-scene="float"][data-beat="review"] .mac-float .row.is-ghost .tk-done { opacity: 1; }
[data-scene="float"][data-beat="sent"] .mac-float .row.is-ghost .st-a { display: inline-block; }
[data-scene="float"][data-beat="answered"] .mac-float .row.is-ghost .st-b,
[data-scene="float"][data-beat="lift2"] .mac-float .row.is-ghost .st-b,
[data-scene="float"][data-beat="drag2"] .mac-float .row.is-ghost .st-b,
[data-scene="float"][data-beat="drop2"] .mac-float .row.is-ghost .st-b,
[data-scene="float"][data-beat="working"] .mac-float .row.is-ghost .st-b,
[data-scene="float"][data-beat="review"] .mac-float .row.is-ghost .st-b { display: inline-block; }
[data-scene="float"][data-beat="answered"] .mac-float .row.is-ghost,
[data-scene="float"][data-beat="lift2"] .mac-float .row.is-ghost,
[data-scene="float"][data-beat="drag2"] .mac-float .row.is-ghost,
[data-scene="float"][data-beat="drop2"] .mac-float .row.is-ghost,
[data-scene="float"][data-beat="working"] .mac-float .row.is-ghost,
[data-scene="float"][data-beat="review"] .mac-float .row.is-ghost { border-color: rgba(61, 89, 71, .6); box-shadow: 0 0 0 .5px rgba(61, 89, 71, .45), 0 1px 3px rgba(61, 89, 71, .1); }

[data-scene="float"][data-beat="working"] .mac-float .row.is-ghost2 .tick-state,
[data-scene="float"][data-beat="review"] .mac-float .row.is-ghost2 .tick-state { border-color: transparent; }
[data-scene="float"][data-beat="working"] .mac-float .row.is-ghost2 .tk-ring { opacity: 1; }
[data-scene="float"][data-beat="review"] .mac-float .row.is-ghost2 .tk-done { opacity: 1; }
[data-scene="float"][data-beat="working"] .mac-float .row.is-ghost2 .st-a { display: inline-block; }
[data-scene="float"][data-beat="review"] .mac-float .row.is-ghost2 .st-b { display: inline-block; }
[data-scene="float"][data-beat="review"] .mac-float .row.is-ghost2 { border-color: rgba(61, 89, 71, .6); box-shadow: 0 0 0 .5px rgba(61, 89, 71, .45), 0 1px 3px rgba(61, 89, 71, .1); }

/* ---- reread ----------------------------------------------------------- */
[data-scene="reread"][data-beat="settle"] .pf-state { display: none; }
[data-scene="reread"][data-beat="settle"] .pf-done { display: inline; }

/* ---- local ------------------------------------------------------------ */
[data-scene="local"][data-beat="menu"] .dd-app { display: flex; }
[data-scene="local"][data-beat="menu"] .mb-app { background: var(--moss); color: #fff; }
[data-scene="local"][data-beat="menu"] .dd-hot { background: var(--moss); color: #fff; }
[data-scene="local"][data-beat="menu"] .dd-hot em { color: rgba(255, 255, 255, .7); }
[data-scene="local"] .side-stored { color: var(--moss); font-weight: 600; }

/* ----------------------------------------------------------- responsive */

@media (max-width: 1240px) { .macdemo { --mz: .9; } }
@media (max-width: 1120px) { .macdemo { --mz: .8; } }
@media (max-width: 1000px) { .macdemo { --mz: .7; } }
@media (max-width: 880px)  { .macdemo { --mz: .6; } }
@media (max-width: 760px) {
  .macdemo { --mz: .52; }
  .mac-dock { pointer-events: none; }
  .md-chips { display: flex; }
  .mac-caps { margin-top: 20px; }
}
@media (max-width: 640px) { .macdemo { --mz: .44; } }
@media (max-width: 540px) { .macdemo { --mz: .37; } }
@media (max-width: 440px) { .macdemo { --mz: .3; } }

@media (prefers-reduced-motion: reduce) {
  .mac-window, .mac-float, .mac-panel, .mac-agent, .mac-term, .mac-proof,
  .mac-dropdown, .md-chord, .mac-cap, .dk, .row, .day-new, .mac-drag,
  .cp-words .w, .cp-save, .tm-dropped, .tm-ack { transition-duration: .01ms; }
  .dk:hover { transform: none; }
}