@charset "UTF-8";

/* Notch Now — white, silver and graphite. Blue guides actions; mint belongs to the native app. */

:root {
  color-scheme: light;
  --black: #000;
  --ink: #1d1d1f;
  --text: #1d1d1f;
  --text-2: #515154;
  --text-3: #6e6e73;
  --canvas: #fff;
  --surface: #f5f5f7;
  --surface-raised: #fff;
  --line: #d2d2d7;
  --dark-surface: #161617;
  --on-dark: #f5f5f7;
  --on-dark-2: #a1a1a6;
  --on-dark-line: rgb(255 255 255 / 16%);
  --link: #0066cc;
  --action: #0071e3;
  --action-hover: #0066cc;
  --on-dark-accent: #2997ff;
  --selection: #d6eaff;
  --app-accent: #8ae8c2;
  --tray-solid: #0e1011;
  --bar: 44px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(96px, 11vw, 160px);
  --radius-panel: 24px;
  --radius-control: 12px;
  --t-display: clamp(3.25rem, 1.9rem + 5.6vw, 6rem);
  --t-title: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  --t-heading: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  --t-subheading: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
  --t-lede: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --t-foot: .8125rem;
  --t-ui: .75rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-move: cubic-bezier(.32, .72, 0, 1);
  font: 100%/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--canvas);
  color: var(--text);
  scrollbar-color: #b8b8bd transparent;
  accent-color: var(--link);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 24px); }
body { margin: 0; caret-color: var(--link); }
button, input { font: inherit; letter-spacing: inherit; }
button { color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; text-decoration: none; text-underline-offset: .22em; text-decoration-thickness: from-font; }
p, h1, h2, h3, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 650; text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
code { font: .9em/1.4 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
[data-tone="dark"] :focus-visible, .menubar[data-tone="dark"] :focus-visible { outline-color: var(--on-dark-accent); }
::selection { background: var(--selection); color: var(--ink); }
.frame { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }
.container { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap; }
.skip-link { position: fixed; top: 52px; left: 16px; z-index: 100; padding: .7rem 1.1rem; background: var(--ink); color: white; border-radius: 10px; font-size: var(--t-small); transform: translateY(-300%); }
.skip-link:focus { transform: none; }
kbd { font: 600 .82em/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .02em; display: inline-block; padding: .28em .5em .3em; border-radius: 6px; background: var(--surface-raised); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--line); color: var(--text); white-space: nowrap; vertical-align: .08em; }
.section-title { font-size: var(--t-title); line-height: 1.02; letter-spacing: -.034em; font-weight: 650; }
.section-title span { color: var(--text-3); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-dark-accent); box-shadow: 0 0 0 2px rgb(41 151 255 / 18%); flex-shrink: 0; }

/* ——— Menu bar ——— */

.menubar { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--bar); color: var(--on-dark); transition: color .35s ease; }
.menubar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(22 22 23 / 82%); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: inset 0 -1px 0 rgb(255 255 255 / 6%); transition: background-color .35s ease, box-shadow .35s ease; }
.menubar[data-tone="light"] { color: var(--text); }
.menubar[data-tone="light"]::before { background: rgb(255 255 255 / 82%); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 8%); }
.menubar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding-inline: 22px; font-size: .8125rem; letter-spacing: -.005em; }
.menubar-right { display: flex; align-items: center; gap: 6px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.brand-mark { width: 18px; height: 18px; }
.menubar .brand-mark.on-light, .menubar[data-tone="light"] .brand-mark.on-dark { display: none; }
.menubar[data-tone="light"] .brand-mark.on-light { display: block; }
.menu-item, .menu-extra { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 6px; font-weight: 500; white-space: nowrap; transition: background-color .15s ease; }
.availability-short { display: none; }
.menu-extra { gap: 8px; margin-left: 8px; }
.menubar[data-tone="light"] .status-dot { background: var(--action); box-shadow: 0 0 0 2px rgb(0 113 227 / 14%); }
@media (hover: hover) {
  .menu-item:hover, .menu-extra:hover, .brand:hover { background: rgb(255 255 255 / 14%); }
  .menubar[data-tone="light"] :is(.menu-item, .menu-extra, .brand):hover { background: rgb(0 0 0 / 6%); }
}
@media (pointer: coarse) { .menu-extra, .menu-item { min-height: 44px; } }

/* ——— Tray rows, drawn from the app's own ItemList (October 2026) ———
   Borderless three-line rows like a Spotlight result: title, kind · size, then
   the note line ("Add a note…" until there is one), a 40pt icon at the left and
   the age at the right. Hover and selection add a soft white chip. */

.tray-item { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 66px; padding: 9px 12px 9px 8px; border-radius: 12px; color: var(--on-dark); transition: background-color .35s ease, opacity .35s ease; }
.tray-item.is-selected { background: rgb(255 255 255 / 10%); }
.item-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; margin-top: 3px; border-radius: 8px; background: rgb(138 232 194 / 12%); color: var(--app-accent); }
.item-icon .icon { width: 20px; height: 20px; stroke-width: 1.8; }
.item-icon[data-kind="file"] { width: 32px; height: 40px; margin-inline: 4px; border-radius: 4px; background: #fff; color: #8e8e93; box-shadow: 0 0 0 1px rgb(0 0 0 / 10%); }
.item-icon[data-kind="file"] .icon { width: 16px; height: 16px; }
.item-icon[data-kind="image"] { height: 27px; margin-block: 9px 10px; border-radius: 4px; background: url("assets/coastal-light-480.jpg") center / cover; box-shadow: 0 0 0 1px rgb(255 255 255 / 25%); }
.item-icon[data-kind="image"] .icon { display: none; }
.item-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.item-copy strong { display: block; min-width: 0; font-size: .8125rem; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-detail { font-size: .75rem; line-height: 1.35; color: rgb(255 255 255 / 74%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-note { display: grid; font-size: .71875rem; line-height: 1.35; color: rgb(255 255 255 / 55%); overflow: hidden; }
.item-note > span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .3s ease; }
.item-note > span:last-child:not(:only-child) { opacity: 0; }
.item-note .is-note, .item-detail.is-note, .item-detail .is-note { color: var(--app-accent); }
.item-age { flex-shrink: 0; margin-top: 1px; font-size: .75rem; line-height: 1.35; color: rgb(255 255 255 / 62%); }
.row-preview .tray-item { min-height: 50px; align-items: center; padding-block: 6px; }
.row-preview .item-icon { margin-top: 0; }
.row-preview .item-icon[data-kind="image"] { margin-block: 0; }

/* ——— Scenes: the notch performs inside a drawn display ———
   The script sets data-state (and marks the active file); everything below is
   what each state looks like. Geometry and colours come from the native app:
   a notch-high black band, a 440pt Liquid Glass tray, corners from 10pt to
   22pt, the header beside the camera, borderless rows, a dashed drop strip. */

.scene { position: absolute; inset: 0; --tray-h: 300px; --notch-open-w: min(440px, 100% - 24px); --band: 38px; }
.scene.is-measuring, .scene.is-measuring * { transition: none !important; }
/* The menu bar on a notched Mac: transparent, the height of the notch, type with a soft shadow. */
.scene-bar { position: absolute; z-index: 1; inset: 0 0 auto; display: flex; align-items: center; gap: 16px; height: var(--band); padding: 0 26px 0 18px; color: #fff; font-size: var(--t-foot); text-shadow: 0 1px 2px rgb(0 0 0 / 50%); }
.scene-app { font-weight: 700; }
.scene-status { margin-left: auto; display: flex; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; }
.scene-status .icon { width: 17px; height: 17px; stroke-width: 1.6; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 45%)); }
.scene-notch { position: absolute; z-index: 2; top: 0; left: 50%; translate: -50% 0; width: 236px; height: var(--band); overflow: hidden; border-radius: 0 0 10px 10px; background: rgb(44 44 46 / 74%); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); color: var(--on-dark); box-shadow: 0 12px 40px rgb(0 0 0 / 38%), inset 0 -1px 0 rgb(255 255 255 / 8%); transition: width .5s var(--ease-move), height .5s var(--ease-move), border-radius .5s var(--ease-move); }
.scene[data-state="open"] .scene-notch, .scene[data-state="approach"] .scene-notch, .scene[data-state="drop"] .scene-notch, .scene[data-state="peek"] .scene-notch { width: var(--notch-open-w); height: calc(var(--band) + var(--tray-h)); border-radius: 0 0 22px 22px; }
.scene-band { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--band); padding: 0 6px 0 18px; background: var(--black); font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; }
.scene-title, .scene-tools { opacity: 0; transition: opacity .25s ease; }
.scene-tools { display: flex; gap: 2px; margin-left: auto; }
.scene-tools .icon { width: 28px; height: 26px; padding: 5px 7px; color: rgb(255 255 255 / 82%); stroke-width: 1.9; }
.scene[data-state="open"] :is(.scene-title, .scene-tools), .scene[data-state="approach"] :is(.scene-title, .scene-tools), .scene[data-state="drop"] :is(.scene-title, .scene-tools), .scene[data-state="peek"] :is(.scene-title, .scene-tools) { opacity: 1; transition-delay: .2s; }
.scene-centre { position: absolute; left: 50%; top: 0; translate: -50% 0; display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; width: 236px; height: 100%; }
.scene-mark { position: relative; display: grid; place-items: center; }
.scene-mark > * { grid-area: 1 / 1; transition: opacity .2s ease, scale .35s var(--ease-move); }
.scene-mark img { width: 16px; height: 16px; }
.scene-mark .icon { width: 17px; height: 17px; color: var(--app-accent); stroke-width: 2.2; opacity: 0; scale: .6; }
.scene[data-state="drop"] .scene-mark img { opacity: 0; scale: .6; }
.scene[data-state="drop"] .scene-mark .icon { opacity: 1; scale: 1; }
.scene-camera { display: block; width: 7px; height: 7px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #1a2326, #050708 70%); }
.scene-count { position: relative; display: grid; place-items: center; justify-self: center; height: 18px; overflow: hidden; color: var(--app-accent); font: 600 .8125rem/1 -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums; }
.scene-count > span { grid-area: 1 / 1; }
.scene-count .count-old { opacity: 0; }
.scene-count.is-rolling .count-old { animation: count-out .34s var(--ease-out) both; }
.scene-count.is-rolling .count-now { animation: count-in .34s var(--ease-out) both; }
@keyframes count-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -100%; } }
@keyframes count-in { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: 0 0; } }
.scene-tray { position: absolute; top: var(--band); left: 8px; right: 8px; padding: 6px 0 8px; opacity: 0; transition: opacity .25s ease; }
.scene[data-state="open"] .scene-tray, .scene[data-state="approach"] .scene-tray, .scene[data-state="drop"] .scene-tray, .scene[data-state="peek"] .scene-tray { opacity: 1; transition-delay: .12s; }
.scene-rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.scene-row-new { min-height: 0; padding-block: 0; max-height: 0; opacity: 0; translate: 0 -10px; scale: .97; overflow: hidden; transition: max-height .4s var(--ease-move), opacity .35s ease, translate .45s var(--ease-out), scale .45s var(--ease-out); }
.scene-row-new.is-landed { min-height: 66px; padding-block: 9px; max-height: 80px; opacity: 1; translate: 0 0; scale: 1; }
.scene[data-state="peek"] .tray-item.is-peek { background: rgb(255 255 255 / 10%); }
.scene[data-state="peek"] .is-peek .item-note > span:first-child { opacity: 0; }
.scene[data-state="peek"] .is-peek .item-note > span:last-child { opacity: 1; }
/* The dashed strip under the list is the drop target; a drop turns it into the confirmation. */
.scene-strip { position: relative; display: grid; height: 44px; margin: 6px 4px 0; border: 1px dashed rgb(255 255 255 / 28%); border-radius: 12px; font-size: .8125rem; color: rgb(255 255 255 / 60%); transition: border-color .25s ease, background-color .25s ease, color .25s ease; }
.scene-strip > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 10px; transition: opacity .25s ease; }
.scene-strip .icon { width: 18px; height: 18px; color: var(--app-accent); }
.scene-strip .scene-saved { font-weight: 500; color: #fff; opacity: 0; }
.scene-saved .icon { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--app-accent); color: #0b1f18; stroke-width: 3; }
.scene[data-state="approach"] .scene-strip { border-style: solid; border-color: var(--app-accent); background: rgb(138 232 194 / 12%); color: #fff; }
.scene[data-state="drop"] .scene-strip { border-color: transparent; }
.scene[data-state="drop"] .scene-strip > span:first-child { opacity: 0; }
.scene[data-state="drop"] .scene-strip .scene-saved { opacity: 1; transition-delay: .25s; }
/* The desktop: a column of Finder icons at the top right, labels in white with a shadow. */
.scene-desk { position: absolute; z-index: 3; top: calc(var(--band) + 12px); right: 16px; display: grid; gap: 12px; justify-items: center; }
.scene-file { position: relative; display: flex; flex-direction: column; align-items: center; width: 116px; }
/* The ghost is what moves: a translucent copy of the icon and name with the arrow on it. The original stays put, as a linked file does. */
.file-drag { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; opacity: 0; pointer-events: none; transition: translate .8s var(--ease-move), scale .8s var(--ease-move), opacity .25s ease; }
.file-drag .file-icon { opacity: 1; }
.file-drag b { background: #1f6fe0; text-shadow: none; }
.file-icon { position: relative; display: grid; place-items: center; width: 64px; height: 64px; transition: opacity .25s ease; }
.file-icon-image img { width: 64px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgb(255 255 255 / 75%), 0 0 0 2px rgb(0 0 0 / 14%), 0 1px 3px rgb(0 0 0 / 35%); }
.doc-page { position: relative; width: 50px; height: 62px; overflow: hidden; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 12%), 0 1px 3px rgb(0 0 0 / 30%); clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); }
.doc-page::after { content: ""; position: absolute; top: 0; right: 0; width: 11px; height: 11px; background: linear-gradient(225deg, transparent 50%, #d9d9de 50%, #ececef); }
.doc-kind { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 7px; font-weight: 700; letter-spacing: .04em; color: #8e8e93; }
.doc-block { position: absolute; left: 8px; top: 9px; width: 18px; height: 5px; border-radius: 1px; background: #1d4d3f; }
.doc-circles { position: absolute; left: 6px; bottom: 15px; display: flex; }
.doc-circles i { display: block; width: 18px; height: 18px; border-radius: 50%; background: #a4ad86; mix-blend-mode: multiply; }
.doc-circles i:nth-child(2) { margin-left: -7px; background: #d7c4a5; }
.doc-circles i:nth-child(3) { margin-left: -7px; background: #809586; }
.doc-lines { position: absolute; left: 7px; right: 10px; top: 11px; display: grid; gap: 4px; }
.doc-lines i { display: block; height: 2px; border-radius: 1px; background: #c7c7cc; }
.doc-lines i:nth-child(2) { width: 85%; } .doc-lines i:nth-child(4) { width: 60%; } .doc-lines i:nth-child(6) { width: 75%; }
.folder-icon { position: relative; width: 62px; height: 50px; margin-top: 8px; }
.folder-tab { position: absolute; left: 0; top: 0; width: 26px; height: 12px; border-radius: 4px 4px 0 0; background: #6bbdf4; }
.folder-back { position: absolute; inset: 5px 0 0; border-radius: 5px; background: linear-gradient(#86cdf9, #5fb3ee); }
.folder-front { position: absolute; left: 0; right: 0; bottom: 0; height: 35px; border-radius: 5px; background: linear-gradient(#a8dcfb, #74bff5); box-shadow: 0 -1px 0 rgb(255 255 255 / 35%) inset, 0 1px 2px rgb(0 0 0 / 22%); }
.scene-file b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 116px; margin-top: 5px; padding: 1px 6px; border-radius: 4px; font-size: .75rem; font-weight: 500; line-height: 1.3; text-align: center; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 70%); overflow-wrap: break-word; transition: background-color .2s ease; }
/* Picked up: the icon turns into a translucent drag ghost, the name is selected, the arrow rides along. */
.scene-drag-cursor { position: absolute; z-index: 3; left: 52px; top: 26px; opacity: 1; width: 22px; height: 26px; fill: #000; stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 45%)); opacity: 0; transition: opacity .2s ease; }
.scene[data-state="lift"] .scene-file.is-active .file-drag, .scene[data-state="approach"] .scene-file.is-active .file-drag { opacity: .66; }
.scene[data-state="lift"] .scene-file.is-active > b, .scene[data-state="approach"] .scene-file.is-active > b { background: #1f6fe0; text-shadow: none; }
.scene[data-state="approach"] .scene-file.is-active .file-drag { translate: calc(var(--file-dx) * .8) calc(var(--file-dy) * .8); scale: .85; }
.scene[data-state="drop"] .scene-file.is-active .file-drag { translate: var(--file-dx) var(--file-dy); scale: .12; opacity: 0; transition: translate .8s var(--ease-move), scale .8s var(--ease-move), opacity .3s ease .45s; }
.scene-cursor { position: absolute; z-index: 6; top: 44px; left: calc(50% + 72px); width: 24px; height: 28px; fill: #000; stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 30%)); opacity: 0; translate: 0 26px; transition: opacity .3s ease, translate .5s var(--ease-move); }
.scene[data-state="peek"] .scene-cursor { opacity: 1; translate: 0 0; }
.scene-window { position: absolute; z-index: 1; left: 6%; right: 150px; top: 72px; bottom: -24px; overflow: hidden; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 7%), 0 30px 60px -18px rgb(0 0 0 / 28%); color: #1d1d1f; }
.scene-titlebar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-bottom: 1px solid #e5e5ea; background: #f0f0f3; color: #6e6e73; font-size: var(--t-ui); }
.scene-titlebar i { width: 11px; height: 11px; border-radius: 50%; background: #d6d6db; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 5%); }
.scene-titlebar i:first-child { background: #ff5f57; } .scene-titlebar i:nth-child(2) { background: #febc2e; } .scene-titlebar i:nth-child(3) { background: #28c840; }
.scene-titlebar > span { flex: 1; text-align: center; }
.scene-document { padding: clamp(22px, 3vw, 36px) clamp(24px, 3.4vw, 44px); }
.document-kicker { font-size: var(--t-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #86868b; }
.document-title { margin-top: 14px; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 650; text-wrap: balance; }
.document-body { margin-top: 16px; max-width: 34ch; font-size: var(--t-small); line-height: 1.6; color: #515154; }
.scene-caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: var(--link); }
.document-line { display: block; width: 78%; height: 5px; margin-top: 18px; border-radius: 3px; background: #e8e8ed; }
.document-line.short { width: 52%; margin-top: 10px; }
.scene-preview { position: absolute; z-index: 5; left: 6%; bottom: -26px; width: min(42%, 270px); padding: 5px; background: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 35px 70px -20px rgb(0 0 0 / 30%); opacity: 0; translate: 0 14px; transition: opacity .35s ease, translate .5s var(--ease-move); }
.scene[data-state="peek"] .scene-preview { opacity: 1; translate: 0 0; transition-delay: .35s; }
.preview-bar { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 9px 4px; font-size: var(--t-ui); font-weight: 550; color: #6e6e73; }
.preview-bar .icon { width: 13px; height: 13px; }
.scene-preview img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
/* Compact scenes sit in the step stills: paper behind them, the file bottom-centre. */
.scene-compact { --notch-open-w: min(400px, 100% - 40px); }
.scene-compact .scene-desk { top: calc(var(--band) + 10px); right: 12px; gap: 6px; }
.scene-compact .scene-file { width: 96px; }
.scene-compact .scene-file b { max-width: 96px; font-size: .6875rem; }
.scene-compact .file-icon { width: 56px; height: 56px; }
.scene-compact .file-icon-image img { width: 56px; }
.scene-compact .doc-page { width: 44px; height: 54px; }
.scene-compact .folder-icon { width: 54px; height: 44px; margin-top: 6px; }
.scene-compact .scene-drag-cursor { left: 44px; top: 22px; }

/* ——— Shared pieces ——— */

.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; white-space: nowrap; padding: 0 24px; border-radius: 999px; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; transition: background .2s, transform .2s var(--ease-out); }
.button:active { transform: scale(.97); }
.button .icon { width: 16px; height: 16px; stroke-width: 2; }
.button-dark { background: var(--ink); color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / 10%) inset, 0 8px 20px -12px rgb(0 0 0 / 45%); }
.button-primary { background: var(--action); color: #fff; }
@media (hover: hover) { .button-dark:hover { background: #3a3a3c; } .button-primary:hover { background: var(--action-hover); } }
.quiet-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--link); }
.quiet-link .icon { width: 16px; height: 16px; stroke-width: 2; transition: translate .2s var(--ease-out); }
@media (hover: hover) { .quiet-link:hover .icon { translate: 3px 0; } }

/* ——— Hero: say it, then show it ——— */

.home { background: var(--canvas); }
.hero { position: relative; padding-top: calc(var(--bar) + clamp(56px, 9vh, 104px)); overflow: clip; background: var(--canvas); }
.hero-copy { text-align: center; }
.hero h1 { font-size: var(--t-display); line-height: .98; letter-spacing: -.036em; font-weight: 680; }
.hero h1 > span { color: var(--text-3); }
.hero .lede { max-width: 54ch; margin: 28px auto 0; font-size: var(--t-lede); line-height: 1.45; letter-spacing: -.012em; color: var(--text-2); }
.hero-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 32px; }
.hero-meta { margin-top: 22px; font-size: var(--t-foot); font-weight: 500; color: var(--text-3); }
.hero-display { position: relative; width: min(1120px, 100% - var(--gutter) * 2); margin: clamp(48px, 7vh, 80px) auto 0; }
.hero-display .scene { --scene-zoom: 1; }
@media (min-width: 800px) {
  .hero-display .scene { --scene-zoom: 1.2; inset: auto; top: 0; left: 50%; width: calc(100% / var(--scene-zoom)); height: calc(100% / var(--scene-zoom)); translate: -50% 0; transform: scale(var(--scene-zoom)); transform-origin: top center; }
}
.display-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 10px solid #1d1d1f; border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--dark-surface); box-shadow: 0 1px 0 rgb(255 255 255 / 30%) inset, 0 40px 80px -36px rgb(0 0 0 / 36%); }
.display-screen::before { content: ""; position: absolute; inset: 0; background: url("assets/coastal-light-1200.jpg") center 45% / cover; transform: scaleX(-1); }
.display-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 22%), transparent 30%, rgb(0 0 0 / 10%)); pointer-events: none; }
.display-caption { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 4px 0; font-size: var(--t-foot); color: var(--text-3); }
.display-caption > span { max-width: 70ch; }
.scene-controls { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.replay, .scene-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex-shrink: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--link); }
.replay .icon, .scene-toggle .icon { width: 16px; height: 16px; stroke-width: 2; transition: transform .35s var(--ease-out); }
@media (hover: hover) { .replay:hover .icon { transform: rotate(-60deg); } }

/* ——— How it works: one stage, three steps, one scene playing a step at a time ——— */

.steps { padding: var(--section) 0 calc(var(--section) * .7); background: var(--surface); }
.stage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(40px, 6vw, 96px); margin-top: clamp(40px, 5vw, 64px); }
.stage-tabs { display: grid; }
.stage-step { border-top: 1px solid var(--line); }
.stage-step:last-child { border-bottom: 1px solid var(--line); }
.stage-tab { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; width: 100%; padding: 18px 8px 18px 0; text-align: left; color: var(--text-3); transition: color .35s ease; }
.stage-tab:focus-visible { outline-offset: -4px; border-radius: 8px; }
@media (hover: hover) { .stage-tab:hover { color: var(--text-2); } }
.stage-step.is-active .stage-tab { color: var(--text); }
.stage-tab-num { font-size: var(--t-foot); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--link); transition: color .35s ease; }
.stage-step:not(.is-active) .stage-tab-num { color: var(--text-3); }
.stage-tab-title { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.12; letter-spacing: -.024em; font-weight: 650; text-wrap: balance; }
.stage-progress { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--link); transform: scaleX(0); transform-origin: left; }
.stage-step.is-active .stage-progress.is-running { animation: stage-fill var(--step-ms, 4s) linear forwards; }
.stage.is-paused .stage-progress { animation-play-state: paused; }
@keyframes stage-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stage-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-move); }
.stage-panel > div { overflow: hidden; }
.stage-step.is-active .stage-panel { grid-template-rows: 1fr; }
.stage-panel p { max-width: 40ch; padding: 0 0 22px 36px; font-size: var(--t-body); line-height: 1.6; color: var(--text-2); opacity: 0; translate: 0 6px; transition: opacity .35s ease, translate .45s var(--ease-out); }
.stage-step.is-active .stage-panel p { opacity: 1; translate: 0 0; transition-delay: .12s; }
.stage-controls { margin-top: 18px; padding-left: 36px; }
.step-still { position: relative; height: clamp(380px, 34vw, 440px); overflow: hidden; border: 8px solid #1d1d1f; border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--dark-surface); box-shadow: 0 1px 0 rgb(255 255 255 / 30%) inset, 0 30px 60px -30px rgb(0 0 0 / 30%); }
.step-still::before { content: ""; position: absolute; inset: 0; background: url("assets/coastal-light-1200.jpg") center 45% / cover; transform: scaleX(-1); }
.step-still::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 22%), transparent 30%, rgb(0 0 0 / 10%)); pointer-events: none; }
.step-still > .scene { z-index: 1; }
/* What the stage scene shows beyond the notch depends on the step. */
.scene-compact .scene-window { opacity: 0; translate: 0 24px; transition: opacity .4s ease, translate .55s var(--ease-move); }
.scene-compact[data-step="2"] .scene-window { opacity: 1; translate: 0 0; transition-delay: .25s; }

/* ——— Use cases: six situations, each with the row as it would look in the tray ——— */

.uses { padding: var(--section) 0 calc(var(--section) * .8); background: var(--surface-raised); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.section-head > p { max-width: 36ch; padding-bottom: 8px; font-size: var(--t-lede); line-height: 1.45; color: var(--text-2); }
.scenario-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(40px, 6vw, 96px); margin-top: clamp(40px, 5vw, 64px); }
.scenario { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: start; gap: 28px; padding: 40px 0 44px; border-top: 1px solid var(--line); }
.sample-object { display: flex; flex-direction: column; align-items: center; width: 100%; }
.sample-image { display: block; width: 100%; max-width: 176px; aspect-ratio: 1; object-fit: cover; border-radius: 18px; outline: 1px solid rgb(0 0 0 / 7%); outline-offset: -1px; }
.sample-label { margin-top: 14px; font-size: var(--t-foot); font-weight: 500; color: var(--text-3); }
.scenario-copy h3 { font-size: var(--t-subheading); line-height: 1.18; letter-spacing: -.022em; }
.scenario-copy p { max-width: 44ch; margin-top: 12px; font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.scenario-copy kbd { font-size: .78em; }
.row-preview { min-width: 0; margin-top: 18px; padding: 4px; border-radius: 14px; background: var(--tray-solid); color: var(--on-dark); box-shadow: 0 14px 30px -18px rgb(0 0 0 / 55%); }
.row-preview .tray-item { min-width: 0; }

/* ——— Keyboard ——— */

.keyboard { position: relative; overflow: hidden; padding: var(--section) 0 calc(var(--section) * .65); background: var(--dark-surface); color: var(--on-dark); text-align: center; }
.keyboard-lede { max-width: 50ch; margin: 24px auto 0; font-size: var(--t-lede); line-height: 1.5; color: #b5b5ba; }
.keyboard kbd { background: rgb(255 255 255 / 6%); box-shadow: none; border-color: rgb(255 255 255 / 18%); color: var(--on-dark); border-radius: 5px; font-weight: 550; }
.keycaps { display: grid; grid-template-columns: 1fr 1fr 2.7fr; gap: 17px; width: min(690px, 90%); margin: clamp(48px, 6vw, 80px) auto 0; padding: 9px; border-radius: 28px; perspective: 1000px; transform: rotateX(12deg); }
.key { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; height: 145px; padding: 20px 21px 18px; border-radius: 15px; color: #f5f5f7; background: linear-gradient(150deg, #3a3a3c, #242426 65%); box-shadow: 0 2px 0 #5b5b60, 0 6px 0 #141415, 0 8px 0 #0b0b0c, 0 18px 20px rgb(0 0 0 / 66%), inset 0 1px 1px rgb(255 255 255 / 18%), inset 0 -1px 1px rgb(0 0 0 / 66%); }
.key b { font-size: 2.3rem; line-height: 1; font-weight: 400; }
.key small { font-size: var(--t-ui); font-weight: 500; color: #d2d2d7; }
.key-space { align-items: center; justify-content: flex-end; padding-bottom: 19px; }
.key-space b { font-size: 1rem; }
.key-space small { position: absolute; top: 20px; letter-spacing: .04em; }
.shortcut-strip { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 760px; margin: clamp(44px, 5vw, 64px) auto 0; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / 16%); }
.shortcut-strip p { display: flex; align-items: center; justify-content: center; gap: 12px; color: #b5b5ba; font-size: var(--t-small); }
.shortcut-strip kbd { font-size: .8125rem; }
.all-shortcuts { max-width: 760px; margin: 28px auto 0; }
.all-shortcuts summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; font-size: 1rem; font-weight: 600; color: var(--on-dark); cursor: pointer; list-style: none; border-radius: 8px; }
.all-shortcuts summary::-webkit-details-marker { display: none; }
.all-shortcuts summary .icon { width: 14px; height: 14px; stroke-width: 2; transition: transform .2s; }
.all-shortcuts[open] summary .icon { transform: rotate(45deg); }
.shortcut-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 24px; }
.shortcut-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; border-top: 1px solid rgb(255 255 255 / 16%); font-size: var(--t-small); text-align: left; color: #d2d2d7; }
.shortcut-list dd { flex-shrink: 0; }
.all-shortcuts > p { margin-top: 24px; font-size: var(--t-foot); color: var(--on-dark-2); }

/* ——— Privacy: the boundary is the computer ——— */

.privacy { padding: var(--section) 0 calc(var(--section) * .8); background: var(--surface); }
.privacy-heading { text-align: center; }
.privacy-heading > p { max-width: 46ch; margin: 24px auto 0; font-size: var(--t-lede); line-height: 1.5; color: var(--text-2); }
.local-diagram { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; align-items: center; max-width: 950px; margin: clamp(48px, 6vw, 75px) auto 0; padding: 53px 50px 67px; border: 1px solid var(--line); border-radius: 26px; }
.local-source { display: flex; flex-direction: column; align-items: center; text-align: center; }
.local-file { display: grid; place-items: center; width: 52px; height: 66px; background: var(--surface-raised); color: #86868b; border-radius: 4px 12px 4px 4px; box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 9px 18px -7px rgb(0 0 0 / 12%); }
.local-file .icon { width: 23px; height: 23px; stroke-width: 1; }
.source-copy .local-file { position: relative; background: #e8f2ff; }
.source-copy .local-file::before { content: ''; position: absolute; z-index: -1; inset: 5px -5px -5px 5px; border: 1px solid #b7cce3; border-radius: 4px 12px 4px 4px; }
.local-source strong { margin-top: 20px; font-size: var(--t-small); font-weight: 600; color: var(--text); }
.local-source small { margin-top: 5px; font-size: var(--t-foot); color: var(--text-2); }
.local-app { display: flex; flex-direction: column; align-items: center; text-align: center; }
.local-app img { width: 122px; height: 122px; filter: drop-shadow(0 14px 15px rgb(0 0 0 / 11%)); }
.local-app > span { margin-top: 14px; font-size: var(--t-foot); color: var(--text-2); }
.local-app code { font-size: .8125rem; }
.local-connector { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -28px 10px 0; color: #86868b; }
.local-connector i { display: block; height: 1px; width: 100%; background: #b5b5ba; }
.local-connector .icon { width: 15px; height: 15px; flex-shrink: 0; }
.local-connector:nth-of-type(2) .icon { transform: rotate(180deg); }
.local-boundary { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); padding: 0 14px; background: var(--surface); font-size: var(--t-ui); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.privacy-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-top: clamp(48px, 6vw, 76px); }
.privacy-facts > div { border-top: 1px solid var(--line); padding-top: 24px; }
.privacy-facts dt { font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; color: var(--text); }
.privacy-facts dd { max-width: 36ch; margin-top: 12px; font-size: 1rem; line-height: 1.6; color: var(--text-2); }

/* ——— Specs and questions ——— */

.specs { padding: var(--section) 0; background: var(--surface-raised); }
.details-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.details-heading > p { max-width: 34ch; padding-bottom: 8px; font-size: var(--t-lede); line-height: 1.45; color: var(--text-2); }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; margin-top: clamp(40px, 5vw, 64px); }
.spec-table > div { padding: 22px 0; border-top: 1px solid var(--line); }
.spec-table dt { font-size: 1rem; font-weight: 650; letter-spacing: -.012em; color: var(--text); }
.spec-table dd { max-width: 52ch; margin-top: 8px; font-size: 1rem; line-height: 1.6; color: var(--text-2); }
.spec-table code { font-size: .875rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 20px 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; color: var(--text); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); stroke-width: 2; transition: transform .2s; }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details p { max-width: 52ch; padding-bottom: 22px; font-size: 1rem; line-height: 1.6; color: var(--text-2); }

/* ——— Closing: the plain truth about availability ——— */

.closing { padding: calc(var(--section) * .8) 0; background: var(--surface); color: var(--text); text-align: center; }
.closing-inner { display: flex; flex-direction: column; align-items: center; }
.closing-inner > img { width: 72px; height: 72px; filter: drop-shadow(0 8px 12px rgb(0 0 0 / 14%)); }
.closing h2 { max-width: 14ch; margin-top: 32px; font-size: var(--t-title); line-height: 1.04; letter-spacing: -.034em; }
.availability { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--text-2); font-size: var(--t-foot); font-weight: 600; }
.availability .status-dot { width: 7px; height: 7px; background: var(--action); box-shadow: 0 0 0 3px rgb(0 113 227 / 14%); }
.closing-text { max-width: 46ch; margin-top: 18px; font-size: var(--t-body); line-height: 1.6; color: var(--text-2); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: 32px 0; color: var(--text-3); font-size: var(--t-foot); }
.site-footer .brand { padding: 0; font-size: .9375rem; color: var(--text); }
.site-footer .brand img { width: 20px; height: 20px; }
.site-footer > div { display: flex; flex-wrap: wrap; gap: 16px 25px; }
.site-footer a:not(.brand):hover { text-decoration: underline; }

/* ——— Support and privacy ——— */

.help-page .menu-item { display: inline-flex; }
.help-page .menubar .brand span { display: inline; }
.help-content { width: min(760px, 100% - var(--gutter) * 2); margin-inline: auto; padding: calc(var(--bar) + 72px) 0 88px; overflow-wrap: anywhere; }
.help-content h1 { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); line-height: 1.06; letter-spacing: -.035em; }
.help-content p { margin-top: 16px; font-size: var(--t-body); line-height: 1.65; color: var(--text-2); }
.help-content .help-intro { margin-top: 24px; font-size: var(--t-lede); line-height: 1.5; }
.help-content .help-meta { font-size: var(--t-small); }
.help-content section { margin-top: 40px; }
.help-content h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.015em; }
.help-content a { color: var(--link); text-decoration: underline; }
.help-callout { padding: 24px; border-radius: 18px; background: var(--surface); }

/* ——— Brand page and 404 ——— */

.brand-page { padding: calc(var(--bar) + 88px) 0 112px; }
.brand-page h1 { font-size: clamp(3rem, 1.8rem + 4vw, 5rem); line-height: 1.02; letter-spacing: -.034em; margin-top: 24px; }
.brand-intro { max-width: 44ch; margin-top: 22px; font-size: var(--t-lede); line-height: 1.5; color: var(--text-2); }
.brand-kit-button { margin-top: 32px; }
.brand-showcase { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; gap: 36px; min-height: 320px; margin-top: 64px; padding: 48px; border-radius: var(--radius-panel); background: var(--surface); }
.brand-showcase .large-icon { width: 180px; height: 180px; filter: drop-shadow(0 18px 30px rgb(0 0 0 / 40%)); }
.brand-showcase .large-wordmark { width: 360px; padding: 22px 28px; border-radius: 18px; background: var(--surface-raised); }
.brand-section { margin-top: 72px; }
.brand-section h2 { margin-bottom: 24px; font-size: 1.625rem; letter-spacing: -.024em; }
.brand-downloads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.brand-download { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: 16px; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s ease; }
@media (hover: hover) { .brand-download:hover { box-shadow: 0 0 0 1px #86868b, 0 10px 24px -14px rgb(0 0 0 / 22%); } }
.brand-download > img { width: 55px; height: 55px; object-fit: contain; }
.brand-download.dark { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.brand-download > span { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: var(--t-small); font-weight: 550; }
.brand-download .icon { width: 17px; height: 17px; }
.brand-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.swatch > div { height: 112px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%); }
.swatch p { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: var(--t-small); font-weight: 600; }
.swatch code { color: var(--text-3); font-weight: 400; }
.swatch small { display: block; margin-top: 5px; font-size: var(--t-foot); color: var(--text-3); }
.brand-note { max-width: 65ch; margin-top: 24px; font-size: var(--t-body); line-height: 1.6; color: var(--text-2); }
.brand-note a { text-decoration: underline; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; }
@media (hover: hover) { .text-link:hover { text-decoration: underline; } }
.menubar.is-plain .menubar-inner { width: 100%; }

/* ——— Responsive ——— */

@media (max-width: 1023px) {
  .menu-item-secondary { display: none; }
  .stage { gap: 40px; }
  .scenario { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
  .sample-image { max-width: 150px; }
  .details-grid { gap: 50px; }
  .local-diagram { padding-inline: 35px; }
  .privacy-facts { gap: 32px; }
}
@media (max-width: 899px) {
  .scenario-list { grid-template-columns: minmax(0, 1fr); }
  .scenario { grid-template-columns: 176px minmax(0, 1fr); gap: 32px; padding-block: 36px; }
}
@media (max-width: 799px) {
  :root { --gutter: 28px; }
  .menu-item { display: none; }
  .hero { padding-top: calc(var(--bar) + 48px); }
  .hero-display { width: 100%; margin-top: 44px; }
  .display-screen { aspect-ratio: auto; height: 540px; border-left: 0; border-right: 0; border-radius: 0; }
  .display-caption { padding-inline: var(--gutter); }
  .scene-desk { top: auto; right: auto; left: 50%; bottom: 18px; translate: -50% 0; grid-auto-flow: column; gap: 6px; }
  .scene-file { width: 84px; }
  .scene-file b { max-width: 84px; font-size: .6875rem; }
  .scene-bar > span:nth-child(n+5):not(.scene-clock) { display: none; }
  .steps { padding-bottom: calc(var(--section) * .5); }
  .stage { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stage-still { order: -1; }
  .stage-panel p { max-width: 46ch; }
  .step-still { height: 400px; border-left: 0; border-right: 0; border-radius: 0; }
  .scene-compact .scene-desk { top: auto; right: auto; left: 50%; bottom: 12px; translate: -50% 0; grid-auto-flow: column; gap: 2px; }
  .scene-compact .scene-file { width: 84px; }
  .scene-compact .scene-file b { max-width: 84px; }
  .scene-window { right: 6%; }
  .scene-compact .scene-window { bottom: 118px; border-radius: 12px; }
  .section-head, .details-heading { display: block; }
  .section-head > p, .details-heading > p { margin-top: 20px; padding-bottom: 0; }
  .keycaps { width: 96%; gap: 12px; }
  .key { height: 110px; padding: 17px; }
  .key b { font-size: 1.875rem; }
  .key-space b { font-size: .9375rem; }
  .shortcut-strip { gap: 15px; }
  .shortcut-strip p { flex-direction: column; gap: 10px; }
  .shortcut-list { grid-template-columns: 1fr; gap: 0; }
  .local-diagram { padding: 40px 25px 55px; grid-template-columns: 1.1fr .55fr 1fr .55fr 1.1fr; }
  .local-app img { width: 90px; height: 90px; }
  .local-connector { gap: 4px; margin-inline: 5px; }
  .local-connector .icon { width: 12px; height: 12px; }
  .local-file { width: 40px; height: 52px; }
  .privacy-facts { grid-template-columns: 1fr; gap: 28px; }
  .details-grid { grid-template-columns: 1fr; gap: 40px; }
  .spec-table dd, .faq details p { max-width: 60ch; }
  .brand-showcase { grid-template-columns: 1fr; padding: 36px; }
  .brand-downloads, .brand-swatches { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .menubar-inner { padding-inline: 8px; }
  .menubar .brand span { display: none; }
  .menu-extra .status-dot { display: none; }
  .menu-extra { font-size: var(--t-ui); padding-inline: 6px; }
  .hero h1 { font-size: clamp(2.75rem, 13.5vw, 4rem); }
  .hero .lede { font-size: 1.0625rem; }
  .hero-actions { gap: 12px 20px; margin-top: 26px; }
  .hero-display { margin-top: 36px; }
  .display-screen { height: 500px; }
  .display-caption { flex-direction: column; align-items: flex-start; gap: 4px; }
  .scene-bar { gap: 12px; padding-inline: 12px; }
  .scene { --notch-open-w: calc(100% - 16px); }
  .scene-compact { --notch-open-w: calc(100% - 24px); }
  .scene-title { display: none; }
  .scene-centre { width: 160px; grid-template-columns: 32px 1fr 32px; }
  .scene-notch { width: 160px; }
  .scene-desk { bottom: 14px; }
  .step-still { height: 380px; }
  .stage-tab { padding-block: 14px; }
  .stage-tab-title { font-size: 1.25rem; }
  .scene-window { left: 6%; right: 6%; top: 70px; }
  .scene-preview { width: 48%; }
  .scenario { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 32px 36px; }
  .sample-object { margin-bottom: 8px; }
  .sample-image { max-width: 208px; }
  .scenario-copy h3 { font-size: 1.25rem; }
  .keycaps { gap: 9px; padding: 4px; width: 100%; grid-template-columns: 1fr 1fr 2fr; }
  .key { height: 92px; border-radius: 10px; padding: 14px 12px 12px; }
  .key b { font-size: 1.5rem; }
  .key-space b { font-size: .8125rem; }
  .key-space small { display: none; }
  .shortcut-strip { margin-top: 40px; gap: 10px; }
  .shortcut-strip p { font-size: var(--t-foot); }
  .shortcut-list > div { font-size: .875rem; }
  .local-diagram { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 40px; padding: 28px 17px 36px; border-radius: 18px; }
  .local-app { order: -1; position: relative; width: 100%; padding-bottom: 20px; }
  .local-app::after { content: ''; position: absolute; bottom: 0; left: 25%; right: 25%; height: 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 5px 5px 0 0; }
  .local-app img { width: 82px; height: 82px; }
  .local-app > span { margin-top: 9px; }
  .local-source { width: calc(50% - 15px); }
  .local-connector { display: none; }
  .closing h2 { max-width: none; }
  .site-footer > p { display: none; }
  .site-footer > div { gap: 20px; }
  .brand-downloads, .brand-swatches { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .hero-actions .button { padding-inline: 18px; }
  .availability-full { display: none; }
  .availability-short { display: inline; }
  .site-footer > div { width: 100%; justify-content: space-between; }
}

/* ——— Preferences ——— */

@media (prefers-reduced-motion: reduce) {
  html, *, *::before, *::after { scroll-behavior: auto !important; }
  .button, .faq summary .icon, .quiet-link .icon, .replay .icon { transition: none; }
  .button:active { transform: none; }
  /* Scenes crossfade between states instead of moving. */
  .scene, .scene * { transition-property: opacity !important; transition-duration: .3s !important; transition-delay: 0s !important; }
  .file-drag { translate: 0 !important; scale: 1 !important; }
  .scene-count > span, .scene-cursor, .scene-preview, .scene-row-new { translate: 0 !important; scale: 1 !important; }
  .scene-row-new { max-height: 80px !important; min-height: 66px !important; padding-block: 9px !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .menubar::before { background: var(--dark-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menubar[data-tone="light"]::before { background: var(--canvas); }
  .scene-bar { background: var(--dark-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --text-2: #29292b; --text-3: #424245; --line: #86868b; }
  .hero h1 > span, .section-title span { color: #424245; }
  .keyboard-lede, .shortcut-strip p, .shortcut-list > div, .all-shortcuts > p { color: #f5f5f7; }
  .privacy-facts dd, .closing-text, .local-source small, .local-app > span, .display-caption { color: #29292b; }
  .scene-drop { border-color: var(--app-accent); border-style: solid; }
  .item-detail, .item-age, .item-note, .scene-strip { color: rgb(255 255 255 / 88%); }
}