/* DropBench — the desktop.
   Everything that reads as "a Mac" is structure: menu bar, dock, window chrome,
   the ⌥Space gesture. The wallpaper, icons and menu bar item are our own. The
   panel is pixel-faithful to the real app's panel — that one is ours to copy. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --accent: #3f6df6;
  --accent-ink: #ffffff;

  /* Window materials, light */
  --win-bg: rgba(250, 250, 252, 0.60);
  --win-sidebar: rgba(238, 238, 243, 0.42);
  --win-border: rgba(0, 0, 0, 0.16);
  --win-shadow: 0 34px 90px rgba(0,0,0,0.30), 0 8px 22px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(0,0,0,0.30);
  --titlebar-ink: rgba(0, 0, 0, 0.72);

  --ink: #1d1d1f;
  --ink-2: rgba(29, 29, 31, 0.64);
  --ink-3: rgba(29, 29, 31, 0.42);
  --line: rgba(0, 0, 0, 0.09);
  --row-hover: rgba(0, 0, 0, 0.05);
  --sel: rgba(63, 109, 246, 0.16);

  --menubar-bg: rgba(18, 18, 24, 0.24);
  --menubar-ink: rgba(255, 255, 255, 0.92);

  --dock-bg: rgba(30, 30, 38, 0.30);
  --dock-border: rgba(255, 255, 255, 0.22);

  /* The panel uses the HUD material like the app does. */
  --panel-bg: rgba(38, 38, 42, 0.78);
  --panel-ink: rgba(255, 255, 255, 0.94);
  --panel-ink-2: rgba(255, 255, 255, 0.62);
  --panel-ink-3: rgba(255, 255, 255, 0.4);
  --panel-line: rgba(255, 255, 255, 0.1);
  --panel-sel: rgba(120, 150, 255, 0.28);
  --panel-field: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --win-bg: rgba(44, 44, 50, 0.58);
    --win-sidebar: rgba(28, 28, 34, 0.40);
    --win-border: rgba(255, 255, 255, 0.12);
    --win-shadow: 0 34px 90px rgba(0,0,0,0.55), 0 8px 22px rgba(0,0,0,0.38), 0 0 0 0.5px rgba(0,0,0,0.6);
    --titlebar-ink: rgba(255, 255, 255, 0.78);
    --ink: #f2f2f4;
    --ink-2: rgba(242, 242, 244, 0.62);
    --ink-3: rgba(242, 242, 244, 0.4);
    --line: rgba(255, 255, 255, 0.1);
    --row-hover: rgba(255, 255, 255, 0.06);
    --sel: rgba(120, 150, 255, 0.22);
    --menubar-bg: rgba(18, 18, 24, 0.24);
    --menubar-ink: rgba(255, 255, 255, 0.9);
    --dock-bg: rgba(30, 30, 38, 0.30);
    --dock-border: rgba(255, 255, 255, 0.16);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #1a1030;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ */
/* Which experience shows. The desktop is the default; the simple page */
/* takes over on a narrow screen or a non-Mac, where a desktop         */
/* metaphor is a puzzle rather than a demo.                           */

#simple { display: none; }
@media (max-width: 899px), (pointer: coarse) {
  body { overflow: auto; }
  #desktop { display: none; }
  #simple { display: block; }
}
body.not-mac { overflow: auto; }
body.not-mac #desktop { display: none; }
body.not-mac #simple { display: block; }

/* ------------------------------------------------------------------ */
/* Desktop                                                             */

.desktop {
  position: fixed; inset: 0;
  overflow: hidden;
  user-select: none;
}

.wallpaper {
  position: fixed; inset: 0; overflow: hidden; z-index: 0;
  background: #0f1a3d url("/media/wallpaper-poster.b8a9a8408e.jpg") center / cover no-repeat;
}
/* Fixed, not absolute, because the phone page scrolls and the desktop does
   not. One rule serves both. */
.wallpaper video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Fades in once it can actually play, so a slow connection shows the poster
     rather than a black rectangle. */
  opacity: 0; transition: opacity .6s ease;
}
.wallpaper video.ready { opacity: 1; }

/* A moving background is exactly what reduced-motion means. The poster stays. */
@media (prefers-reduced-motion: reduce) {
  .wallpaper video { display: none; }
}

/* On a phone the wallpaper is a still image, not the video.
   The video is a landscape composition with the DropBench mark in the middle,
   so `cover` in portrait crops straight to a giant logo — which is why the
   phone used to blur it to 26px and dim it to 46%, spending ~367KB to produce
   a navy haze. This image is abstract, so every crop of it is a usable crop,
   and at 54KB it costs less than the poster of the video it replaces.

   Dark on purpose: the menu bar and the dock take their dark treatment because
   what is behind them is dark, exactly as macOS does it. The scrim is heaviest
   at the very top and bottom, where those two bars sit, and holds a floor of
   0.26 across the middle — not for the hub, whose cards do their own work, but
   for /details, where paragraphs sit straight on the image and one of the
   image's bright bands runs right through them. */
:root {
  --backdrop:
    linear-gradient(to bottom,
      rgba(8, 9, 16, 0.46) 0%, rgba(8, 9, 16, 0.26) 22%,
      rgba(8, 9, 16, 0.26) 74%, rgba(8, 9, 16, 0.64) 100%),
    /* Not `center`. In portrait, `cover` shows a slice about a third of the
       image wide, and the middle of this composition is the dark valley
       between two ribbons — it rendered as a near-black rectangle. 22% lands
       on the sweeping curve and its bright rim, which is the part that shows
       above the hero and down the 14px gutters. */
    url("/media/backdrop.da11579793.webp") 22% 45% / cover no-repeat,
    #11142a;
}

/* Stated twice, the way `.mdock` and `#simple` already are: the media query
   catches phones, and `body.not-mac` catches a wide non-Mac window, which gets
   the same page and must not fall back to the video's poster. */
@media (max-width: 899px), (pointer: coarse) {
  .wallpaper { background: var(--backdrop); filter: none; transform: none; }
  .wallpaper video { display: none; }
}
body.not-mac .wallpaper { background: var(--backdrop); filter: none; transform: none; }
body.not-mac .wallpaper video { display: none; }

/* ------------------------------------------------------------------ */
/* Menu bar                                                            */

.menubar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 25px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 10px;
  font-size: 13px;
  color: var(--menubar-ink);
  background: var(--menubar-bg);
  backdrop-filter: blur(36px) saturate(2.0);
  -webkit-backdrop-filter: blur(36px) saturate(2.0);
  z-index: 100;
}
.mb-left, .mb-right { display: flex; align-items: center; gap: 0; height: 100%; }
.mb-left > * { padding: 0 9px; height: 100%; display: flex; align-items: center; border-radius: 4px; }
.mb-left b { font-weight: 700; }
.mb-left button.mb-item { background: none; border: 0; cursor: default; }
.mb-left .mb-item:hover, .mb-left .mb-item[aria-expanded="true"] { background: rgba(255,255,255,0.22); }
.mb-tray {
  background: none; border: 0; cursor: pointer; padding: 0 8px;
  height: 100%; display: flex; align-items: center;
}
.mb-tray svg { width: 17px; height: 17px; }
.mb-tray:hover, .mb-tray.on { background: rgba(255,255,255,0.22); border-radius: 4px; }
.mb-right > * { padding: 0 7px; height: 100%; display: flex; align-items: center; }
.mb-right svg { width: 16px; height: 16px; }
.mb-right time { font-variant-numeric: tabular-nums; padding-left: 10px; }
.mb-hint {
  font-size: 12px; color: var(--menubar-ink); opacity: 0.66;
  display: flex; align-items: center; gap: 4px;
}
.mb-hint kbd {
  font: 11px/1 var(--font); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px; padding: 2px 5px; opacity: 0.9;
}
@media (prefers-color-scheme: dark) { .mb-hint kbd { border-color: rgba(255,255,255,0.35); } }

/* App menu dropdown */
.menu-pop {
  position: absolute; top: 27px; left: 44px;
  min-width: 220px; padding: 5px;
  background: var(--win-bg); backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 0.5px solid var(--win-border); border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  font-size: 13px; z-index: 120;
}
.menu-pop[hidden] { display: none; }
.menu-pop button {
  display: flex; width: 100%; justify-content: space-between; align-items: center;
  background: none; border: 0; text-align: left; padding: 4px 9px; border-radius: 5px; cursor: default;
}
.menu-pop button:hover { background: var(--accent); color: var(--accent-ink); }
.menu-pop button span:last-child { opacity: 0.55; font-size: 12px; }
.menu-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 8px; }

/* ------------------------------------------------------------------ */
/* Widgets, top-left                                                    */

.widgets {
  position: absolute; top: 44px; left: 18px;
  z-index: 1;
}
.widget {
  width: 338px; height: 158px; border-radius: 22px; padding: 16px 18px;
  background: rgba(28,28,36,0.44); color: #f2f2f4;
  box-shadow: 0 10px 34px rgba(0,0,0,0.20), inset 0 0.5px 0 rgba(255,255,255,0.7);
  backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
  font-size: 12px; display: flex; gap: 18px;
}

.widget .cal-col { flex: none; width: 92px; }
.widget .dow { color: #e5484d; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.3px; }
.widget .big { font-size: 40px; font-weight: 600; letter-spacing: -1.5px; line-height: 1; margin: 2px 0 2px; }
.widget .muted { opacity: 0.6; }
.widget .todo { flex: 1; min-width: 0; border-left: 1px solid rgba(128,128,140,0.25); padding-left: 16px; }
.widget h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; }
.widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.widget li { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget li::before { content: ""; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; opacity: 0.55; flex: none; }
.widget li.done::before { background: var(--accent); border-color: var(--accent); opacity: 1; }
.widget li.done { opacity: 0.5; text-decoration: line-through; }

/* ------------------------------------------------------------------ */
/* Windows                                                             */

.window {
  position: absolute;
  display: flex; flex-direction: column;
  border-radius: 12px;
  background: var(--win-bg);
  backdrop-filter: blur(50px) saturate(1.9); -webkit-backdrop-filter: blur(50px) saturate(1.9);
  box-shadow: var(--win-shadow), inset 0 0.5px 0 rgba(255,255,255,0.55);
  border: 0.5px solid var(--win-border);
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  transform-origin: center center;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.15);
}
.window[hidden] { display: none; }
.window.closing { opacity: 0; transform: scale(0.92); pointer-events: none; }
.window.opening { animation: win-in .26s cubic-bezier(.2,.9,.3,1.1); }
@keyframes win-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: none; } }
.window:not(.front) { box-shadow: 0 10px 34px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(0,0,0,0.3); }
.window:not(.front) .tl span { background: #c9c9cd !important; }
.window:not(.front) .titlebar, .window:not(.front) .win-body { opacity: 0.86; }
.window:not(.front) .proxy, .window:not(.front) .tb-btn { opacity: 0.5; }

.titlebar {
  height: 38px; flex: none;
  background: linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0));
  display: flex; align-items: center;
  padding: 0 12px;
  color: var(--titlebar-ink);
  font-weight: 600; font-size: 13px;
  cursor: default;
  position: relative;
}
.titlebar .title { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.tl { display: flex; gap: 8px; z-index: 1; }
.tl span {
  width: 12px; height: 12px; border-radius: 50%; display: block; cursor: default;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18);
}
.tl .close { background: #ff5f57; } .tl .min { background: #febc2e; } .tl .zoom { background: #28c840; }
.tl span::after {
  content: ""; display: block; width: 12px; height: 12px; opacity: 0;
  background-repeat: no-repeat; background-position: center; transition: opacity .1s;
}
.tl:hover span::after { opacity: 0.55; }
.tl .close::after  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.6 3.6 8.4 8.4M8.4 3.6 3.6 8.4' stroke='%234d0000' stroke-width='1.5' stroke-linecap='round'/></svg>"); }
.tl .min::after    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.2 6h5.6' stroke='%23663d00' stroke-width='1.5' stroke-linecap='round'/></svg>"); }
.tl .zoom::after   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4 8V4h4' stroke='%23003d0e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }

.win-body { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: 190px; flex: none;
  background: var(--win-sidebar);
  padding: 6px 8px 10px;
  display: flex; flex-direction: column; gap: 1px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.sidebar .sb-title { font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 8px 8px 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.sidebar button {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; text-align: left;
  padding: 5px 8px; border-radius: 6px; cursor: default;
  font-size: 13px; color: var(--ink);
}
.sidebar button:hover { background: var(--row-hover); }
.sidebar button[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
.sidebar button .ic {
  width: 20px; height: 20px; border-radius: 5px; flex: none;
  display: grid; place-items: center; color: #fff;
}
.sidebar button .ic svg { width: 12px; height: 12px; }

/* Finder's sidebar glyphs are monochrome and tinted, not white-on-a-chip. */
.sb-ic { width: 17px; height: 17px; flex: none; color: #5b9cf8; display: grid; place-items: center; }
.sb-ic svg { width: 17px; height: 17px; }
.sidebar button[aria-current="true"] .sb-ic { color: #fff; }
.sb-tag { width: 11px; height: 11px; border-radius: 50%; flex: none; margin: 0 3px; }
.detail { flex: 1; overflow-y: auto; padding: 18px 22px 22px; }
.detail h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.detail p { margin: 0 0 10px; line-height: 1.5; color: var(--ink-2); }
.detail p strong { color: var(--ink); font-weight: 600; }
.card {
  background: rgba(255,255,255,0.55); border: 0.5px solid var(--line); border-radius: 9px;
  padding: 12px 14px; margin-bottom: 12px;
}
@media (prefers-color-scheme: dark) { .card { background: rgba(255,255,255,0.05); } }
.card .row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; gap: 12px; }
.card .row + .row { border-top: 1px solid var(--line); }
.card .row .k { color: var(--ink); }
.card .row .v { color: var(--ink-2); font-size: 12px; text-align: right; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 7px; padding: 6px 14px; font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: default;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.35), 0 0.5px 1px rgba(0,0,0,0.25);
}
.btn.secondary { background: rgba(255,255,255,0.7); color: var(--ink); border: 0.5px solid var(--win-border); }
@media (prefers-color-scheme: dark) { .btn.secondary { background: rgba(255,255,255,0.1); } }
.btn:hover { filter: brightness(1.06); }
.detail .fine { font-size: 11.5px; color: var(--ink-3); }
.detail code, .detail kbd { font: 12px var(--mono); background: var(--row-hover); padding: 1px 5px; border-radius: 4px; }
.detail iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }
.detail.flush { padding: 0; }

/* Finder */
.window.finder .sidebar { width: 150px; }

/* Toolbar. Real Finder has one and its absence was the loudest missing cue. */
.titlebar.finder-bar, .titlebar.notes-bar { height: 52px; gap: 14px; padding: 0 12px; }
.tb-nav { display: flex; gap: 2px; margin-left: 6px; }
.tb-btn {
  width: 26px; height: 24px; border: 0; background: none; border-radius: 6px;
  color: var(--ink-2); display: grid; place-items: center; cursor: default; padding: 0;
}
.tb-btn svg { width: 17px; height: 17px; }
.tb-btn:hover:not(:disabled) { background: var(--row-hover); }
.tb-btn:disabled { opacity: 0.32; }
.tb-btn.on { background: var(--row-hover); color: var(--ink); }
.proxy {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--titlebar-ink);
  padding: 3px 8px; border-radius: 6px;
}
.proxy:hover { background: var(--row-hover); }
.proxy-ic { width: 17px; height: 17px; flex: none; }
.tb-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tb-seg { display: flex; gap: 1px; background: var(--row-hover); border-radius: 7px; padding: 2px; }
.tb-seg .tb-btn { width: 28px; height: 22px; }
.tb-seg .tb-btn.on { background: rgba(255,255,255,0.9); box-shadow: 0 0.5px 2px rgba(0,0,0,0.18); color: var(--ink); }
@media (prefers-color-scheme: dark) { .tb-seg .tb-btn.on { background: rgba(255,255,255,0.18); } }
.tb-search {
  display: flex; align-items: center; gap: 5px;
  width: 132px; height: 26px; padding: 0 9px; border-radius: 7px;
  background: rgba(130,130,145,0.16); color: var(--ink-3); font-size: 12.5px;
  border: 0.5px solid rgba(130,130,145,0.20);
}
.tb-search svg { width: 13px; height: 13px; flex: none; }

/* Path bar: the strip along the bottom of every Finder window. */
.path-bar {
  flex: none; display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; font-size: 11px; color: var(--ink-3);
  border-top: 1px solid var(--line);
  background: rgba(128,128,140,0.06);
}
.path-bar .sep { opacity: 0.5; }
.path-bar .here { color: var(--ink-2); font-weight: 500; }
.finder-grid {
  flex: 1; padding: 18px 16px;
  display: grid; grid-template-columns: repeat(auto-fill, 96px); gap: 10px 6px; align-content: start;
}
.file {
  width: 96px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 4px 7px; border-radius: 6px; cursor: grab;
  background: none; border: 0; color: var(--ink);
}
.file:focus-visible, .file.selected { background: var(--sel); outline: none; }
.file:active { cursor: grabbing; }
.file .thumb {
  width: 62px; height: 62px; display: grid; place-items: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}
.file .thumb svg { width: 100%; height: 100%; }
.file .name { font-size: 12px; text-align: center; line-height: 1.25; word-break: break-word; }
.file.dragging { opacity: 0.35; }
/* The drag image is ours now rather than the browser's, which is what makes
   the gesture visible to the tour's cursor and testable at all. Translucent
   and slightly lifted, the way a Finder drag looks. */
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 400;
  width: 96px; margin: -48px 0 0 -48px;   /* centred on the pointer */
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 6px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 11px; text-align: center; line-height: 1.25;
  opacity: 0.9; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
  pointer-events: none;   /* never the drop target, and never eats the pointer */
}
.drag-ghost[hidden] { display: none; }
.drag-ghost .thumb svg { width: 44px; height: 44px; }
.drag-ghost .name { display: block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file.gone { display: none; }
.finder-foot { border-top: 1px solid var(--line); padding: 6px 12px; font-size: 11px; color: var(--ink-3); }

/* Notes */
.window.notes { background: rgba(255, 250, 220, 0.92); color: #2b2b2b; }
@media (prefers-color-scheme: dark) { .window.notes { background: rgba(60, 54, 30, 0.9); color: #f4efd8; } }
.window.notes .titlebar { color: inherit; }
.notes-body { padding: 2px 22px 20px; font-size: 14px; line-height: 1.6; user-select: text; cursor: text; }
.notes-body h3 { font-size: 20px; margin: 6px 0 8px; font-weight: 700; }
.notes-body .addr { display: inline-block; padding: 1px 3px; border-radius: 3px; }
.notes-body .addr.sel { background: var(--sel); }
.notes-body .hint { font-size: 12px; opacity: 0.55; margin-top: 12px; }

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

.dock {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 4px;
  padding: 6px 8px;
  height: 76px;
  border-radius: 22px;
  background: var(--dock-bg);
  border: 0.5px solid var(--dock-border);
  backdrop-filter: blur(36px) saturate(2.0); -webkit-backdrop-filter: blur(36px) saturate(2.0);
  box-shadow: 0 18px 50px rgba(0,0,0,0.34), inset 0 0.5px 0 rgba(255,255,255,0.5);
  z-index: 90;
}
.dock-item {
  position: relative;
  width: 58px; height: 58px; padding: 0; border: 0; background: none;
  transform-origin: bottom center;
  transition: transform .14s cubic-bezier(.2,.8,.3,1.2), width .14s ease;
  cursor: default;
}
.dock-item svg { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.30)) drop-shadow(0 1px 1px rgba(0,0,0,0.18)); }
.dock-item:hover { transform: translateY(-10px) scale(1.24); }
.dock-item:hover + .dock-item, .dock-item:has(+ .dock-item:hover) { transform: translateY(-5px) scale(1.11); }
.dock-item .dot {
  position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.8); opacity: 0;
}
@media (prefers-color-scheme: dark) { .dock-item .dot { background: rgba(255,255,255,0.8); } }
.dock-item.running .dot { opacity: 1; }
.dock-item .tip {
  position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%);
  background: var(--win-bg); color: var(--ink); font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: 7px; white-space: nowrap;
  border: 0.5px solid var(--win-border); box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.dock-item:hover .tip { opacity: 1; }
.dock-sep { width: 1px; height: 52px; background: rgba(255,255,255,0.22); margin: 0 5px 3px; }
@media (prefers-color-scheme: dark) { .dock-sep { background: rgba(255,255,255,0.22); } }

/* ------------------------------------------------------------------ */
/* THE PANEL. Metrics are the app's: 560 wide, 16 radius, 16 padding.   */

.panel-wrap {
  position: absolute; left: 50%; top: 18%;
  transform: translateX(-50%);
  width: 560px;
  z-index: 200;
}
.panel-wrap[hidden] { display: none; }
.panel {
  width: 560px;
  padding: 16px;
  border-radius: 16px;
  background: var(--panel-bg);
  backdrop-filter: blur(50px) saturate(1.8); -webkit-backdrop-filter: blur(50px) saturate(1.8);
  color: var(--panel-ink);
  box-shadow: 0 30px 90px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.12) inset, 0 0 0 0.5px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 14px;
  transform-origin: top center;
  animation: panel-in .22s cubic-bezier(.2,.9,.3,1.15);
  outline: 0;
}
@keyframes panel-in { from { opacity: 0; transform: scale(0.96) translateY(-6px); } to { opacity: 1; transform: none; } }
.panel.drop-target { box-shadow: 0 30px 90px rgba(0,0,0,0.5), 0 0 0 2px var(--accent) inset; }
svg.sym { width: 1em; height: 1em; vertical-align: -0.14em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Empty stage */
.p-empty { display: flex; flex-direction: column; gap: 14px; }
.p-field { display: flex; align-items: center; gap: 10px; }
.p-field .sym { font-size: 15px; color: var(--panel-ink-2); }
.p-field input {
  flex: 1; background: none; border: 0; outline: 0; color: var(--panel-ink);
  font: 17px var(--font); padding: 0;
}
.p-field input::placeholder { color: var(--panel-ink-3); }
.p-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--panel-ink-3); }
.p-meta .clip {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; color: #8fb0ff; font-size: 12px; cursor: default;
}
.p-meta .clip .sym { font-size: 12px; }
.p-meta .kbd { font: 11px var(--font); font-weight: 500; color: var(--panel-ink-3); }
.p-meta .right { margin-left: auto; }

/* Result stage */
.p-head { display: flex; flex-direction: column; gap: 4px; }
.p-rec {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--panel-ink-2);
}
.p-title { font-size: 19px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; user-select: text; }
.p-facts { display: flex; flex-direction: column; gap: 3px; }
.p-fact { display: flex; gap: 6px; align-items: baseline; font-size: 12px; color: var(--panel-ink-2); user-select: text; }
.p-fact .l { color: var(--panel-ink-3); }
.p-fact.primary { font-size: 13px; font-weight: 500; color: var(--panel-ink); }
.p-thumbrow { display: flex; gap: 12px; align-items: flex-start; }
.p-thumb {
  width: 78px; height: 54px; flex: none; border-radius: 6px; overflow: hidden;
  border: 0.5px solid var(--panel-line); background: #1b1b1f;
}
.p-thumb svg { width: 100%; height: 100%; display: block; }
.p-div { height: 0.5px; background: var(--panel-line); opacity: 0.8; }
.p-actions { display: flex; flex-direction: column; gap: 6px; }
.p-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--panel-ink-3); }
.p-rows { display: flex; flex-direction: column; gap: 2px; }
.p-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 8px;
  background: none; border: 0; color: var(--panel-ink-2); font-size: 13px; text-align: left; cursor: default;
  width: 100%;
}
.p-row .sym { font-size: 12px; width: 16px; text-align: center; }
.p-row .t { flex: 1; }
.p-row .off { font-size: 8px; font-weight: 800; color: var(--panel-ink-3); }
.p-row .done { font-size: 9px; font-weight: 800; color: var(--panel-ink-3); }
.p-row .ret { font-size: 11px; font-weight: 500; color: var(--panel-ink-2); display: none; }
.p-row.sel { background: var(--panel-sel); color: var(--panel-ink); font-weight: 500; }
.p-row.sel .ret { display: inline; }
.p-more {
  display: inline-flex; gap: 5px; align-items: center;
  background: none; border: 0; padding: 2px 0 0; color: var(--panel-ink-2); font-size: 12px; cursor: default;
}
.p-more .kbd { font-size: 10px; font-weight: 500; color: var(--panel-ink-3); }
.p-foot { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--panel-ink-3); }
.p-foot .sym { font-size: 9px; }
.p-foot.status { color: var(--panel-ink-2); font-weight: 500; }
.p-foot.status .sym { font-size: 11px; color: #7fd18a; }

/* Confirmation / consent / output stages */
.p-stage { display: flex; flex-direction: column; gap: 14px; }
.p-stage .p-rationale { font-size: 12px; color: var(--panel-ink-2); }
.p-edit {
  width: 100%; background: var(--panel-field); border: 0.5px solid var(--panel-line); border-radius: 8px;
  color: var(--panel-ink); font: 15px var(--font); padding: 8px 10px; outline: 0;
}
.p-edit:focus { border-color: rgba(143,176,255,0.7); box-shadow: 0 0 0 3px rgba(143,176,255,0.22); }
.p-choice { display: flex; flex-direction: column; gap: 2px; }
.p-choice .p-row .d { font-size: 11px; color: var(--panel-ink-3); }
.p-btns { display: flex; justify-content: flex-end; gap: 8px; }
.p-btn {
  border: 0; border-radius: 7px; padding: 5px 14px; font-size: 13px; font-weight: 500; cursor: default;
  background: rgba(255,255,255,0.12); color: var(--panel-ink);
}
.p-btn.primary { background: var(--accent); color: #fff; }
.p-btn:hover { filter: brightness(1.1); }
.p-output { font-size: 13px; line-height: 1.5; color: var(--panel-ink); user-select: text; }
.p-output .demo-tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--panel-ink-3); margin-bottom: 6px; }
/* A local result is not a disclaimer, it is a fact about what just happened —
   so it reads as a statement rather than small print apologising for itself. */
.p-output .demo-tag.local { text-transform: none; letter-spacing: 0; font-size: 11px; color: #8fd39b; }
/* Decoded tokens, generated models and converted timestamps are read
   character by character; proportional type makes that harder than it is. */
.p-output.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; max-height: 260px; overflow-y: auto; }
.p-output.mono .demo-tag { font-family: var(--ui, -apple-system, system-ui, sans-serif); }
.p-foot.live { align-items: flex-start; line-height: 1.4; }
.p-foot.live .sym { margin-top: 2px; flex: none; }

/* ---------------------------------------------------------------- Agents */
/* The dock icons and the composer art are the apps' own icons, extracted from
   the installed bundles. They mark a real hand-off — DropBench opens the file
   with these apps — so they are used to name a destination, nothing more. */
.dock-item img { width: 100%; height: 100%; display: block; border-radius: 22%; }
.p-opt-ic { width: 17px; height: 17px; border-radius: 4px; flex: none; }

.agent-body { display: flex; flex-direction: column; height: calc(100% - 38px); padding: 0 16px 16px; }
.agent-brand {
  display: flex; align-items: center; gap: 10px; padding: 6px 0 14px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.agent-brand img { border-radius: 9px; }
/* The transcript. Grows, scrolls, and keeps the composer pinned at the bottom. */
.agent-thread { flex: 1; overflow-y: auto; padding: 2px 0 12px; display: flex; flex-direction: column; gap: 10px; }
.agent-empty { margin: auto; font-size: 13px; opacity: 0.4; }
.bubble { max-width: 86%; font-size: 13px; line-height: 1.5; border-radius: 13px; padding: 9px 12px; }
.bubble p { margin: 0 0 7px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  padding: 1px 4px; border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 11%, transparent);
}
.bubble.me { align-self: flex-end; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.bubble.them { align-self: flex-start; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.bubble-file {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  padding: 5px 9px 5px 5px; border-radius: 8px; width: max-content; max-width: 100%;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.bubble-file .agent-thumb, .bubble-file .agent-thumb svg { width: 24px; height: 24px; }
/* The label stays on the reply for as long as the reply does. */
.bubble.them .demo-tag {
  display: block; margin-bottom: 6px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.5;
}
.bubble.thinking { padding: 12px 14px; }
.dots { display: flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: .75; } }

.agent-composer {
  border-radius: 14px; padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.agent-attach { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .32s ease, opacity .32s ease; }
.agent-attach.in { max-height: 90px; opacity: 1; }
.agent-attach[hidden] { display: none; }
.agent-file {
  display: flex; align-items: center; gap: 9px; margin-bottom: 9px;
  padding: 7px 10px 7px 7px; border-radius: 9px; width: max-content; max-width: 100%;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.agent-thumb { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.agent-thumb svg { width: 30px; height: 30px; }
.agent-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-input { min-height: 26px; font-size: 13.5px; color: var(--ink); outline: none; }
.agent-input:empty::before { content: attr(data-ph); opacity: 0.45; }
.agent-send { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
/* The sentence that is the whole point of the feature. */
.agent-hint { font-size: 11px; opacity: 0.6; flex: 1; line-height: 1.35; transition: opacity .3s ease; }
/* After Send, it is not a caption any more — it is the answer to "when does
   my data leave?", so it stops looking like small print. */
.agent-hint.boundary { opacity: 0.95; font-weight: 500; }
.agent-btn {
  flex: none; border: 0; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 12px;
  background: color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink);
  opacity: 0.5; cursor: default; transition: opacity .2s ease, background .2s ease;
}
.agent-btn:not(:disabled) { background: var(--accent); color: #fff; opacity: 1; }
.agent-input:focus { outline: none; }

/* ---------------------------------------------------------------- Inbox */
.inbox-body { display: flex; flex-direction: column; height: calc(100% - 38px); }
.inbox-search { padding: 4px 12px 8px; }
.inbox-search input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12px;
  padding: 5px 9px; border-radius: 7px; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.inbox-list { flex: 1; overflow-y: auto; padding: 0 8px; }
.inbox-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 8px; border: 0; border-radius: 7px; background: none;
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
.inbox-row:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.inbox-row .sym { flex: none; opacity: 0.7; }
.ib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ib-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-kind { font-size: 11px; opacity: 0.55; }
.ib-flag .sym { color: #e0a33a; opacity: 1; font-size: 11px; }
.ib-when { flex: none; font-size: 11px; opacity: 0.5; font-variant-numeric: tabular-nums; }
.inbox-empty { padding: 26px 14px; text-align: center; font-size: 12.5px; opacity: 0.55; line-height: 1.5; }
.inbox-foot {
  padding: 8px 14px; font-size: 11px; opacity: 0.55; line-height: 1.45;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

/* The one honest line about the demo, outside the panel so it is never
   mistaken for the app's own footnote. */
.demo-note { margin-top: 12px; text-align: center; }
.demo-note span {
  display: inline-block; font-size: 11.5px; line-height: 1.45;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(20,20,26,0.55); color: rgba(255,255,255,0.86);
  border: 0.5px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}
.demo-note a { color: inherit; }

/* Toast used for "Opened in Maps" etc. */
.toast {
  position: absolute; top: 40px; right: 16px; z-index: 150;
  background: var(--win-bg); color: var(--ink); border: 0.5px solid var(--win-border);
  border-radius: 14px; padding: 10px 14px; font-size: 13px; width: 320px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  display: flex; gap: 10px; align-items: center;
  animation: toast-in .3s cubic-bezier(.2,.9,.3,1.15);
}
.toast .ic { width: 32px; height: 32px; flex: none; }
.toast .ic svg { width: 100%; height: 100%; }
.toast b { display: block; font-size: 13px; }
.toast span { font-size: 12px; color: var(--ink-2); }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.toast.out { opacity: 0; transform: translateX(30px); transition: .25s; }

/* Drag ghost hint over the desktop when a file is being dragged and the
   panel is closed — the real app needs the panel open too. */
.drag-hint {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  width: 560px; height: 85px; border-radius: 16px;
  border: 1.5px dashed rgba(255,255,255,0.7);
  display: grid; place-items: center; color: #fff; font-size: 13px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6); background: rgba(0,0,0,0.18);
  z-index: 190; pointer-events: none;
}
.drag-hint[hidden] { display: none; }

/* Motion off */
@media (prefers-reduced-motion: reduce) {
  .window, .dock-item, .panel, .toast { animation: none !important; transition: none !important; }
  .dock-item:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Simple fallback page (the previous site, unchanged in substance)    */

/* ------------------------------------------------------------------ */
/* The phone page                                                      */

/* macOS's visual language, rendered as a phone-native vertical scroll:
   a menu-bar strip, frosted cards on the wallpaper, the panel inside real
   window chrome, and a dock.
   
   Not a simulated desktop. There is nothing to arrange and nothing to drag —
   the objection to a desktop metaphor on a phone is that it is a puzzle, and a
   column of cards is not a puzzle. What travels is the *material*, not the
   interaction model.

   Cards are 0.58 — close to the reference's 0.55, and more transparent than
   this page used to be. It carried 0.72 because it was eight explanatory
   sections deep and long copy over a photograph is where legibility dies. The
   copy went to /details, so the reason went with it. Raising the opacity was
   treating the symptom; the cure was having less to read. */
#simple {
  --fg: #f4f3f7;
  --muted: rgba(244, 243, 247, 0.62);
  --line2: rgba(255, 255, 255, 0.13);
  --sacc: var(--accent);
  --card2: rgba(22, 22, 28, 0.58);
  --serif: ui-serif, "New York", Iowan Old Style, Georgia, serif;
  position: relative; z-index: 1;
  color: var(--fg); min-height: 100vh;
  font: 16px/1.55 var(--font); user-select: text;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* The menu bar. Scrolls away with the page: it sets the scene at load rather
   than competing with the dock for permanent space. The glyph in it is
   DropBench's own tray icon, which is the product's real UI — not an Apple
   logo, and not another product's notch. */
.mmenu {
  display: flex; align-items: center; gap: 10px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 6px;
  font-size: 12.5px; color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.mmenu .sym { font-size: 14px; }
.mmenu b { font-weight: 600; }
.mmenu .mm-right { margin-left: auto; display: flex; align-items: center; gap: 12px; opacity: 0.85; }
.mmenu a { color: inherit; text-decoration: none; }

#simple .wrap { max-width: 720px; margin: 0 auto; padding: 0 14px; }

/* ------------------------------------------------------------- cards */
.gcard {
  background: var(--card2);
  border: 1px solid var(--line2);
  border-radius: 20px;
  padding: 14px;
  margin: 10px 0;
  backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
}

/* The hero card: the reference's shape — icon, name, one line of what it is,
   the button, then the small print that answers "which version, where from". */
/* The text block has to claim the leftover width. Without `flex: 1` it
   shrink-wraps to its longest word's comfortable measure — 200px here — and
   "for macOS · $5, one payment" wrapped onto a second line, which read as a
   centred two-line hero and made the card 105px taller than it needed. */
.ghero { display: flex; align-items: center; gap: 13px; }
.ghero > div { flex: 1; min-width: 0; }
.ghero img { width: 56px; height: 56px; border-radius: 14px; flex: none; }
/* Stated at ID strength with an explicit line-height: a bare `.ghero h1` lost
   its size to another rule, and the inherited 1.55 body leading gave one line
   of title a 50px box — a third of the reference's whole hero card. */
#simple .ghero h1 { margin: 0; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; }
#simple .ghero .sub { line-height: 1.3; }
.ghero .sub { color: var(--muted); font-size: 0.9375rem; margin-top: 2px; }
.gbuy {
  /* 16px above pushed the card past the reference's 152. */
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; min-height: 50px; border-radius: 13px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 1.0625rem; font-weight: 600;
}
.gfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 0.8125rem; color: var(--muted); }
.gfoot a { color: var(--muted); }

/* A row card, as the reference uses for Discord and theboringoffice. */
.grow { display: flex; align-items: center; gap: 12px; }
.grow .gi { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.09); }
.grow .gi .sym { font-size: 20px; }
.grow .gt { flex: 1; min-width: 0; }
.grow .gt b { display: block; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; }
.grow .gt span { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.32; margin-top: 1px; }
.grow .ga {
  flex: none; min-height: 38px; padding: 0 12px; border-radius: 10px;
  display: inline-flex; align-items: center; text-decoration: none;
  background: rgba(255, 255, 255, 0.12); color: var(--fg); font-size: 0.875rem; font-weight: 600; white-space: nowrap;
}

/* ----------------------------------------------- section typography */
#simple .sec { padding-block: 26px 4px; }
#simple .eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 11px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line2); background: rgba(255,255,255,0.07);
}
#simple .two { display: block; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; margin: 14px 0 0; font-size: clamp(1.7rem, 7.6vw, 2.1rem); }
#simple .two em { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.012em; color: #8fb0ff; }
#simple .lede { color: var(--muted); margin: 12px 0 0; font-size: 1rem; text-wrap: pretty; }
#simple h3 { margin: 0 0 6px; font-size: 1rem; letter-spacing: -0.012em; }
#simple .gcard p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
#simple .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
#simple .tags span { font-size: 13px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,0.07); color: var(--muted); }

/* ------------------------------------------------- the inline window */
/* The reference frames a YouTube embed in macOS window chrome. Ours frames
   something better: the actual panel, which works. */
.gwin {
  margin: 14px 0; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(16, 16, 22, 0.66);
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: 0 22px 50px rgba(0,0,0,0.42);
}
.gwin-bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}
.gwin-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.gwin-bar .r { background: #ff5f57; } .gwin-bar .y { background: #febc2e; } .gwin-bar .g { background: #28c840; }
.gwin-bar span { margin-left: auto; margin-right: auto; font-size: 12.5px; color: rgba(255,255,255,0.72); font-weight: 600; transform: translateX(-16px); }
.gwin-body { padding: 12px; }

/* ------------------------------------------------------------ dock */
/* Functional: each icon scrolls to its section, and Download stays reachable.
   A dock that looks tappable and is not would be a worse thing to ship than no
   dock at all. */
.mdock {
  position: fixed; left: 10px; right: 10px; z-index: 40;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: 4px;
  padding: 8px; border-radius: 20px;
  background: rgba(22, 22, 28, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: 0 16px 40px rgba(0,0,0,0.42);
}
.mdock button, .mdock a[data-appicon] {
  flex: 1; min-width: 0; min-height: 44px; border: 0; border-radius: 13px;
  background: none; color: var(--fg); display: grid; place-items: center; cursor: pointer;
  transition: background .16s ease;
}
.mdock button .sym { font-size: 21px; }

.mdock .dock-sep { width: 1px; height: 26px; flex: none; background: rgba(255,255,255,0.16); margin: 0 3px; }
.mdock a.dl {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 13px;
  display: inline-flex; align-items: center; text-decoration: none;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 0.9375rem;
}
@media (max-width: 899px), (pointer: coarse) { .mdock { display: flex; } }
body.not-mac .mdock { display: flex; }

/* --------------------------------------------------- the phone demo */
.mpanel-host { margin: 0; }
#simple .panel.snap { width: 100%; box-sizing: border-box; pointer-events: none; }
#simple .panel-wrap { position: static; transform: none; width: 100%; left: auto; top: auto; }
#simple .panel { width: 100%; box-sizing: border-box; background: transparent; box-shadow: none; border: 0; padding: 0; margin: 0; }
#simple .panel-wrap[hidden] { display: block; }

.mchips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.mchips::-webkit-scrollbar { display: none; }
.mchips button {
  flex: none; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px;
  min-height: 40px; cursor: pointer; color: var(--fg);
  border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.08);
}
.mchips button[aria-selected="true"] { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }

.mtry { display: flex; gap: 8px; margin-top: 12px; }
.mtry input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px;
  padding: 12px 14px; border-radius: 12px; color: var(--fg);
  border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.08);
}
.mtry input::placeholder { color: var(--muted); }
.mtry button {
  flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.mtry-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }

/* ------------------------------------------------------------ price */
#simple .amount { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
#simple .amount small { display: block; font-size: 0.875rem; font-weight: 500; color: var(--muted); margin-top: 8px; letter-spacing: 0; }
#simple .ticks { list-style: none; margin: 18px 0 0; padding: 0; }
#simple .ticks li { display: flex; gap: 10px; padding: 6px 0; font-size: 0.9375rem; color: var(--muted); }
#simple .ticks li::before { content: "✓"; color: #7fa6ff; font-weight: 700; flex: none; }

/* -------------------------------------------------------------- FAQ */
#simple details { border-top: 1px solid var(--line2); }
#simple details:first-of-type { border-top: 0; }
#simple summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 0; cursor: pointer; list-style: none; font-weight: 600;
  font-size: 0.9375rem; letter-spacing: -0.01em; min-height: 44px;
}
#simple summary::-webkit-details-marker { display: none; }
#simple summary::after {
  content: "+"; flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; font-weight: 400; font-size: 17px;
  border: 1px solid var(--line2); color: var(--muted);
}
#simple details[open] summary::after { content: "–"; }
#simple details p { margin: 0 0 15px; color: var(--muted); font-size: 0.9375rem; }

#simple footer { padding: 24px 4px 10px; color: var(--muted); font-size: 0.8125rem; display: grid; gap: 6px; }
#simple a { color: #8fb0ff; }
/* Stated after, and at ID strength, because `#simple a` above outranks a bare
   class: without this the button's label renders link-blue on a blue fill and
   the button looks empty. */
#simple a.gbuy { color: #fff; }
#simple a.ga { color: var(--fg); }
/* A whole card that is a link. Same reason as the two rules above: `#simple a`
   wins on specificity, so "not link-coloured" has to be said at ID strength. */
#simple a.grow { color: var(--fg); text-decoration: none; -webkit-tap-highlight-color: transparent; }
#simple a.grow:active { background: rgba(255, 255, 255, 0.1); }



/* ------------------------------------------------- the phone demo */
/* The panel is the product and a panel is already a card, which is a native
   shape on a phone. So mobile shows the real one rather than a desktop
   metaphor, which would be a puzzle here — and the app does not run on a
   phone anyway. */
.mpanel-host { margin: 0; }
/* A frozen panel: the real markup, made inert. */
#simple .panel.snap { width: 100%; box-sizing: border-box; pointer-events: none; }
#simple .panel.snap .p-row .ret, #simple .panel.snap .p-more { opacity: 0.45; }
/* The panel is centred and fixed-width on the desktop; inside the phone hero
   it is simply a block. Same element, same renderer. */
#simple .panel-wrap {
  position: static; transform: none; width: 100%; left: auto; top: auto;
}
#simple .panel { width: 100%; box-sizing: border-box; }
#simple .panel-wrap[hidden] { display: block; }   /* always on show here */

.mchips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.mchips::-webkit-scrollbar { display: none; }
.mchips button {
  flex: none; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px;
  min-height: 40px; cursor: pointer; color: var(--fg);
  border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mchips button[aria-selected="true"] { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }

.mtry { display: flex; gap: 8px; margin-top: 14px; }
.mtry input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px;   /* 16px: iOS zooms below it */
  padding: 12px 14px; border-radius: 11px; color: var(--fg);
  border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mtry input::placeholder { color: var(--muted); }
.mtry button {
  flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 11px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.mtry-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }

#simple header.sec { padding-block: 44px 8px; }
#simple h1 { font-size: clamp(2rem, 6vw, 2.75rem); letter-spacing: -0.025em; margin: 24px 0 8px; }
#simple .tag { color: var(--muted); font-size: 1.125rem; margin: 0 auto; max-width: 30em; }
#simple .cta { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 32px; }
#simple .sbtn { display: inline-block; background: var(--sacc); color: #fff; text-decoration: none; padding: 13px 28px; border-radius: 10px; font-weight: 600; }
#simple .fine { color: var(--muted); font-size: 0.85rem; }
#simple .price { color: var(--muted); font-size: 0.9rem; max-width: 34em; margin: 18px auto 0; line-height: 1.55; }
#simple .price strong { color: var(--fg); }
#simple .price a { color: var(--sacc); font-weight: 600; }
#simple section.card, #simple .demo {
  background: var(--card2); border: 1px solid var(--line2); border-radius: 16px;
  padding: 18px 20px; margin: 0 0 16px;
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
}
#simple .demo pre { margin: 0; font: 13px/1.7 var(--mono); }
#simple .kbd { border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; font-size: 0.9em; background: var(--card2); }
#simple h2 { font-size: 1.15rem; margin: 40px 0 10px; }
#simple p { margin: 0 0 14px; }
#simple ul { margin: 0 0 14px; padding-left: 1.1rem; }
#simple li { margin-bottom: 6px; }
#simple .muted { color: var(--muted); }
#simple a { color: var(--sacc); }
#simple footer { border-top: 1px solid var(--line2); margin-top: 56px; padding-block: 28px 56px; color: var(--muted); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
#simple footer a { color: var(--muted); }

/* ------------------------------------------------------------------ */
/* Motion, and the guided first run                                     */

/* Spring, not ease. The panel overshoots a little and settles, the way
   AppKit's default spring does — a linear() curve so it works without JS. */
.panel {
  animation: panel-spring .42s linear(
    0, 0.36 6%, 0.72 12%, 0.96 17%, 1.08 22%, 1.10 26%, 1.06 32%,
    1.01 41%, 0.99 52%, 1.00 70%, 1) both;
}
@keyframes panel-spring {
  from { opacity: 0; transform: scale(0.90) translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
.window.opening {
  animation: win-spring .40s linear(
    0, 0.38 7%, 0.76 13%, 0.98 19%, 1.07 25%, 1.08 30%, 1.03 40%,
    0.995 55%, 1 75%, 1) both;
}
@keyframes win-spring {
  from { opacity: 0; transform: scale(0.90) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Card content arrives in reading order rather than all at once: what is it,
   what is in it, what can I do with it. */
.panel .stagger { animation: rise .26s cubic-bezier(.2,.8,.3,1) both; }
.panel .stagger:nth-child(1) { animation-delay: .02s; }
.panel .stagger:nth-child(2) { animation-delay: .06s; }
.panel .stagger:nth-child(3) { animation-delay: .10s; }
.panel .stagger:nth-child(4) { animation-delay: .14s; }
.panel .stagger:nth-child(5) { animation-delay: .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Dock bounce when an app launches. */
.dock-item.launching svg { animation: bounce .62s cubic-bezier(.3,.7,.4,1) 2; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-17px); }
  70% { transform: translateY(-4px); }
}

/* The guided moment. Two seconds after the desktop settles, the file the
   demo wants pulses once and says what to do with it — without this most
   visitors never reach the panel, and the panel is the only thing that sells. */
.file.nudge { animation: nudge 1.5s ease-in-out 2; }
@keyframes nudge {
  0%, 100% { transform: none; }
  30% { transform: scale(1.10) translateY(-4px); }
  60% { transform: scale(1.02) translateY(0); }
}
.file.nudge .thumb { filter: drop-shadow(0 4px 14px rgba(90,140,255,.85)); }

.coach {
  position: absolute; z-index: 95;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  background: rgba(20,20,26,0.62); color: #fff; font-size: 12.5px; font-weight: 500;
  border: 0.5px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(20px) saturate(1.7); -webkit-backdrop-filter: blur(20px) saturate(1.7);
  box-shadow: 0 8px 26px rgba(0,0,0,0.34);
  animation: coach-in .34s cubic-bezier(.2,.9,.3,1.2) both;
  pointer-events: none;
}
.coach[hidden] { display: none; }
.coach .dot { width: 7px; height: 7px; border-radius: 50%; background: #5b8df8; flex: none;
  box-shadow: 0 0 0 0 rgba(91,141,248,.7); animation: ping 1.8s ease-out infinite; }
@keyframes ping { to { box-shadow: 0 0 0 9px rgba(91,141,248,0); } }
@keyframes coach-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.coach.out { opacity: 0; transform: translateY(-4px); transition: .3s; }

/* Ghost cursor for the watch-the-demo playthrough. */
.ghost {
  position: absolute; z-index: 260; width: 22px; height: 30px;
  pointer-events: none; filter: drop-shadow(0 2px 5px rgba(0,0,0,.45));
  transition: transform .9s cubic-bezier(.4,.1,.2,1);
}
.ghost[hidden] { display: none; }
.ghost.click::after {
  content: ""; position: absolute; left: -9px; top: -9px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9); animation: tap .45s ease-out;
}
@keyframes tap { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }

.demo-skip {
  position: absolute; right: 22px; bottom: 100px; z-index: 260;
  background: rgba(20,20,26,0.6); color: #fff; border: 0.5px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: default;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.demo-skip[hidden] { display: none; }

/* The chapter bar. Sits above the dock, out of the way of every window the
   tour actually touches, and stays reachable so someone can jump straight to
   the half they care about instead of waiting out the half they do not. */
.demo-chapters {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 100px; z-index: 260;
  display: flex; gap: 4px; padding: 4px;
  background: rgba(20, 20, 26, 0.6); border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.demo-chapters[hidden], .demo-blurb[hidden] { display: none; }
.demo-chapters button {
  display: flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 5px 12px 5px 6px;
  background: none; color: rgba(255, 255, 255, 0.62);
  font: inherit; font-size: 12px; cursor: default;
  transition: background .18s ease, color .18s ease;
}
.demo-chapters button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.demo-chapters button.on { color: #fff; background: rgba(255, 255, 255, 0.18); }
.demo-chapters .n {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); font-size: 10px; font-variant-numeric: tabular-nums;
}
.demo-chapters button.on .n { background: #fff; color: #1b1b1f; font-weight: 600; }
.demo-blurb {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 146px; z-index: 260;
  max-width: 420px; text-align: center; color: rgba(255, 255, 255, 0.86);
  font-size: 13px; line-height: 1.45; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .panel, .window.opening, .panel .stagger, .dock-item.launching svg,
  .file.nudge, .coach, .ghost { animation: none !important; transition: none !important; }
  .ghost { display: none !important; }
}

/* ------------------------------------------------------------------ */
/* Polish: pressed states and a visible keyboard focus                  */

/* Everything clickable should depress. Without it the desktop feels like
   a picture of an interface rather than one — the press is the moment the
   thing confirms it heard you. */
.btn:active, .p-btn:active, .demo-skip:active { transform: scale(0.97); filter: brightness(0.94); }
.tb-btn:active:not(:disabled), .menu-pop button:active, .sidebar button:active { filter: brightness(0.92); }
.dock-item:active { transform: translateY(-6px) scale(1.14); }
.file:active .thumb { transform: scale(0.94); }
.file .thumb { transition: transform .12s ease; }
.tl span:active { filter: brightness(0.82); }
.p-row:active { filter: brightness(1.12); }
.btn, .p-btn, .demo-skip, .dock-item { transition: transform .1s ease, filter .1s ease; }

/* Keyboard focus. Every gesture here has a keyboard path, which is worth
   nothing if you cannot see where you are. Pointer users never see these. */
:where(button, a, input, [tabindex]):focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.panel :where(button, input):focus-visible,
.demo-note a:focus-visible {
  outline-color: #8fb0ff;
}
.dock-item:focus-visible { outline-offset: 4px; }
.tl span:focus-visible { outline-offset: 3px; }
/* The earlier .file:focus-visible rule sets outline:none, and the :where()
   ring has zero specificity so it loses. The selection tint alone is too faint
   to be a focus indicator, so put the ring back explicitly. */
.file:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -2px; }

/* The panel itself takes focus when summoned, so it should not draw a ring
   around the whole card — the selected action row is the real indicator. */
.panel:focus, .panel:focus-visible { outline: none; }

/* A window that is being dragged should not animate its own position. */
.window.dragging { transition: none; }


/* ------------------------------------------------- the hub's own tail */
/* Stated last on purpose: an earlier `#simple footer` sizes the footer for the
   long-form page (56px margin, 84px of padding). On a page that ends two
   screens in, that is a screenful of nothing between the last card and the
   dock. */
#simple footer {
  margin-top: 18px; padding: 16px 4px 4px; border-top: 1px solid var(--line2);
  display: grid; gap: 5px; font-size: 0.8125rem; line-height: 1.5;
}
#simple .mtry-note { margin-top: 8px; }
.gwin-body .mchips { padding-top: 0; }
.gwin-body .mtry { margin-top: 10px; }


/* --------------------------------------------------------- app icons */
/* The row and dock icons are the desktop dock's own artwork, cloned in. They
   carry their own squircle and gloss, so the grey rounded square the line
   glyphs sat in would be a second, slightly wrong, corner behind a correct
   one. */
.grow .gi.app { background: none; border-radius: 0; width: 46px; height: 46px; }
.grow .gi.app > svg, .grow .gi.app > img {
  width: 46px; height: 46px; display: block; border-radius: 12.7px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.36));
}
.grow .gi.app > img { border-radius: 11px; }

.mdock a[data-appicon] { padding: 0; }
.mdock a[data-appicon] > svg, .mdock a[data-appicon] > img {
  width: 42px; height: 42px; display: block; border-radius: 11.6px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.36));
  transition: transform .16s ease;
}
.mdock a[data-appicon]:active > svg, .mdock a[data-appicon]:active > img { transform: scale(0.92); }