@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark; --kcap-edge:rgba(0,0,0,0.45);
  --bg:#0e0e10; --panel:#141417; --raised:#1e1e23;
  --ink:#f4f4f5; --sec:#9a9aa2; --ter:#6b6b73;
  --accent:#e04b3f; --accent-h:#f0655a; --btn-ink:#ffffff;
  --hair:rgba(244,244,245,0.08); --hair2:rgba(244,244,245,0.10);
  --iconbg:#0a0a0b; --iconink:#f4f4f5; --iconinset:rgba(244,244,245,0.14);
  --sel:rgba(224,75,63,0.28); --glow:rgba(224,75,63,0.10);
  --share-bg:#004a77; --share-ink:#c2e7ff;
  --sel-notes:rgba(255,204,0,0.30); --sel-msg:rgba(235,235,245,0.18); --sel-docs:rgba(66,133,244,0.38);
  --winbg:#1b1b20; --winbar:#25252b; --winink:#f4f4f5; --winline:rgba(244,244,245,0.08); --winmuted:rgba(244,244,245,0.45);
  --capdown:#141418;
  --veil:rgba(14,14,16,0.72); --veil-0:rgba(14,14,16,0);
  --wave: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='26'><path d='M0 13 q 11 -9 22 0 t 22 0' fill='none' stroke='%23e04b3f' stroke-opacity='0.14' stroke-width='1.3'/></svg>");
  --kbd-a:#33333a; --kbd-b:#232329; --key-a:#45454d; --key-b:#35353c;
  --key-ink:#eaeaec; --key-dim:#9d9da4;
  --key-shadow: inset 0 -1px 1px rgba(0,0,0,0.35), 0 1.5px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.55);
  --kbd-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 5px -2px rgba(0,0,0,0.6), 0 9px 18px -11px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.5);
  --shadow:0 40px 80px -30px rgba(0,0,0,0.9);
}
:root[data-theme="light"] { color-scheme: light; --kcap-edge:rgba(14,14,16,0.14);
  --bg:#f4f4f6; --panel:#ffffff; --raised:#ececef;
  --ink:#17171a; --sec:#57575e; --ter:#86868b;
  --accent:#c4453a; --accent-h:#a5342a; --btn-ink:#ffffff;
  --hair:rgba(14,14,16,0.08); --hair2:rgba(14,14,16,0.12);
  --iconbg:#0a0a0b; --iconink:#f4f4f5; --iconinset:rgba(244,244,245,0.14);
  --sel:rgba(196,69,58,0.22); --glow:rgba(196,69,58,0.07);
  --share-bg:#c2e7ff; --share-ink:#001d35;
  --sel-notes:rgba(255,196,0,0.42); --sel-msg:rgba(60,60,67,0.16); --sel-docs:rgba(26,115,232,0.22);
  --winbg:#ffffff; --winbar:#e3e3e9; --winink:#141416; --winline:rgba(14,14,16,0.08); --winmuted:rgba(14,14,16,0.5);
  --capdown:#dcdce1;
  --veil:rgba(244,244,246,0.72); --veil-0:rgba(244,244,246,0);
  --wave: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='26'><path d='M0 13 q 11 -9 22 0 t 22 0' fill='none' stroke='%23c4453a' stroke-opacity='0.09' stroke-width='1.3'/></svg>");
  --kbd-a:#ededf0; --kbd-b:#dedee2; --key-a:#ffffff; --key-b:#f0f0f3;
  --key-ink:#3d3d44; --key-dim:#8a8a90;
  --key-shadow: inset 0 -1px 1px rgba(14,14,16,0.05), 0 1.5px 2px rgba(14,14,16,0.16), 0 0 0 1px rgba(14,14,16,0.05);
  --kbd-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 5px -2px rgba(14,14,16,0.32), 0 9px 18px -11px rgba(14,14,16,0.55), 0 0 0 1px rgba(14,14,16,0.08);
  --shadow:0 30px 60px -30px rgba(14,14,16,0.28);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light; --kcap-edge:rgba(14,14,16,0.14);
    --bg:#f4f4f6; --panel:#ffffff; --raised:#ececef;
    --ink:#17171a; --sec:#57575e; --ter:#86868b;
    --accent:#c4453a; --accent-h:#a5342a; --btn-ink:#ffffff;
    --hair:rgba(14,14,16,0.08); --hair2:rgba(14,14,16,0.12);
    --iconbg:#0a0a0b; --iconink:#f4f4f5; --iconinset:rgba(244,244,245,0.14);
    --sel:rgba(196,69,58,0.22); --glow:rgba(196,69,58,0.07);
    --share-bg:#c2e7ff; --share-ink:#001d35;
    --sel-notes:rgba(255,196,0,0.42); --sel-msg:rgba(60,60,67,0.16); --sel-docs:rgba(26,115,232,0.22);
    --winbg:#ffffff; --winbar:#e3e3e9; --winink:#141416; --winline:rgba(14,14,16,0.08); --winmuted:rgba(14,14,16,0.5);
    --capdown:#dcdce1;
    --veil:rgba(244,244,246,0.72); --veil-0:rgba(244,244,246,0);
    --wave: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='26'><path d='M0 13 q 11 -9 22 0 t 22 0' fill='none' stroke='%23c4453a' stroke-opacity='0.09' stroke-width='1.3'/></svg>");
    --kbd-a:#ededf0; --kbd-b:#dedee2; --key-a:#ffffff; --key-b:#f0f0f3;
    --key-ink:#3d3d44; --key-dim:#8a8a90;
    --key-shadow: inset 0 -1px 1px rgba(14,14,16,0.05), 0 1.5px 2px rgba(14,14,16,0.16), 0 0 0 1px rgba(14,14,16,0.05);
    --kbd-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 5px -2px rgba(14,14,16,0.32), 0 9px 18px -11px rgba(14,14,16,0.55), 0 0 0 1px rgba(14,14,16,0.08);
    --shadow:0 30px 60px -30px rgba(14,14,16,0.28);
  }
}

* { box-sizing: border-box; }
body { margin: 0; background-color: var(--bg);
  /* Layers paint front-to-back: the accent glow, then a soft veil that
     diffuses the wave behind the content, then the wave itself. The veil
     is what keeps the texture from reading as a hard repeating tile. */
  background-image: radial-gradient(1100px 520px at 50% -8%, var(--glow), transparent 68%),
    radial-gradient(1300px 820px at 50% 26%, var(--veil), var(--veil-0) 72%),
    var(--wave);
  background-repeat: no-repeat, no-repeat, repeat;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui, Arial, sans-serif; color: var(--ink); overflow-x: hidden; transition: background-color .2s ease, color .2s ease; }
a { color: var(--accent); text-decoration: none; }
::selection { background: var(--sel); }
.wrap { max-width: 1120px; margin: 0 auto; }
/* Section layouts live here rather than inline so the mobile layer can
   override their padding. */
.navWrap { padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; }
.heroWrap { padding: 40px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.demoWrap { padding: 26px 40px 84px; display: flex; justify-content: center; }
.pageWrap { padding: 60px 40px 96px; }
.footWrap { padding: 28px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.nlink { color: var(--sec); transition: color .15s ease; }
.nlink:hover { color: var(--ink); }
.btn { background: var(--accent); color: var(--btn-ink); font-weight: 600; border-radius: 9px; transition: background .15s ease; }
.btn:hover { background: var(--accent-h); color: var(--btn-ink); }
.theme-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--hair2); border-radius: 9px; }
.seg { display: flex; align-items: center; justify-content: center; width: 28px; height: 26px; border: none; background: transparent; color: var(--ter); border-radius: 6px; cursor: pointer; transition: color .15s ease, background .15s ease; }
.seg svg { width: 16px; height: 16px; }
.seg:hover { color: var(--ink); }
.seg.active { background: var(--raised); color: var(--ink); }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.mono { font-family: 'JetBrains Mono', monospace; }
.icon { position: relative; background: var(--iconbg); color: var(--iconink); font-family: 'JetBrains Mono', monospace; letter-spacing: -0.05em; display: flex; align-items: center; justify-content: center; }
.icon::after { content:""; position:absolute; left:27%; right:27%; bottom:15%; height:13%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 9 L8 2 L16 9 L24 2 L32 9 L40 2 L48 9' fill='none' stroke='%23e04b3f' stroke-width='2.4' stroke-linejoin='miter'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.card { background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); }
.notesApp { --sel-tint: var(--sel-notes); }
.msgApp   { --sel-tint: var(--sel-msg); }
.docsApp  { --sel-tint: var(--sel-docs); }
.window { background: var(--winbg); border-radius: 20px; box-shadow: var(--shadow), inset 0 0 0 1px var(--hair); overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif; }
.titlebar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: var(--winbar); border-bottom: 1px solid var(--winline); }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.wintitle { flex:1; text-align:center; font-size:12px; font-weight:500; color:var(--winmuted); margin-right:36px; }
/* A Slack mention: the blue pill, not plain text. Tinted from the shared
   --sel-docs blue so it sits in the palette in both themes. */
.mention { color: #094a85; background: rgba(9,74,133,0.10); border-radius: 4px;
  padding: 0 2px; white-space: nowrap; }
:root .mention { color: #094a85; }
:root[data-theme="dark"] .mention,
html:not([data-theme="light"]) .mention { color: #9ad0f8; background: rgba(154,208,248,0.14); }

.wavy { text-decoration: underline wavy #c4453a; text-underline-offset: 5px; }
.h1 { font-size: 62px; font-weight: 600; line-height: 1.0; letter-spacing: -0.04em; }
/* The de-slop section repeats the hero's shape one step down: a heading, a
   line of explanation, the shortcut, then the same demo. Two commands on one
   screen read as one confusing product, so each gets its own stretch of page. */
.h2 { font-size: 44px; font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; max-width: 20ch; text-wrap: balance; }
.sectionHead { padding: 76px 40px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; border-top: 1px solid var(--hair2); }
.sectionHead .lede { color: var(--sec); font-size: 18px; line-height: 1.5; max-width: 52ch; margin: 0; text-wrap: pretty; }
.deslopWrap { padding-top: 30px; }

/* The shortcut, shown as keycaps rather than written out, so it reads the way
   it looks on the keyboard below it. */
.shortcutLine { display: flex; align-items: center; gap: 6px; }
.kbdChip { display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 600;
  color: var(--key-ink); background: linear-gradient(var(--key-a), var(--key-b));
  box-shadow: var(--key-shadow); }
@media (max-width: 880px) {
  .h2 { font-size: 32px; }
  .sectionHead { padding: 54px 22px 0; gap: 14px; }
  .sectionHead .lede { font-size: 16px; }
  .deslopWrap { padding-top: 22px; }
}
.grid-two { display: grid; grid-template-columns: 1fr; gap: 30px; }
.grid-priv, .grid-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.grid-fixes { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.grid-how { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.fixcard { background: var(--panel); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hair); padding: 26px; display: flex; flex-direction: column; gap: 16px; min-height: 150px; }
.kc { font-family: 'JetBrains Mono', monospace; font-size: 13px; background: var(--raised); border-radius: 6px; padding: 6px 9px; }

.demo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 56px; }
.stage { width: 100%; max-width: 800px; position: relative; min-height: 272px; }
.stage > .window { position: absolute; inset: 0; display: flex; flex-direction: column; will-change: transform, opacity, filter; }
.stage > .c1 { animation: rotNotes 28s linear infinite, fadeNotes 28s linear infinite; }
.stage > .c2 { animation: rotMsg 28s linear infinite, fadeMsg 28s linear infinite; }
.stage > .c3 { animation: rotDocs 28s linear infinite, fadeDocs 28s linear infinite; }
.editor { flex: 1 1 auto; overflow: hidden; padding: 12px 26px; font-size: 17px; line-height: 1.55; color: var(--winink); }
.edGrid { display: grid; align-content: start; }

.lights { display: flex; align-items: center; gap: 8px; flex: none; }
.tl { width: 12px; height: 12px; border-radius: 50%; }
.tl.r { background: #ff5f57; } .tl.y { background: #febc2e; } .tl.g { background: #28c840; }
.chip svg, .fchip svg, .cbtn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chip svg.fillic, .fchip svg.fillic, .cbtn svg.fillic { fill: currentColor; stroke: none; }
.fillic { fill: currentColor; stroke: none; }
.glyph { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }

.notesBar { height: 44px; gap: 8px; padding: 0 12px; background: var(--winbg); }
.chip { width: 26px; height: 26px; padding: 5px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--winmuted); background: transparent; border: none; flex: none; cursor: default; }
.notesBar .chip { background: color-mix(in srgb, var(--winink) 5%, transparent); }
.notesTitle { display: flex; flex-direction: column; line-height: 1.05; margin-left: 2px; }
.nt1 { font-size: 13px; font-weight: 700; color: var(--winink); }
.nt2 { font-size: 10.5px; color: var(--winmuted); }
.tbSpacer { flex: 1; }
.tbDiv { width: 1px; height: 20px; background: var(--winline); margin: 0 3px; flex: none; }
.tbGroup { display: flex; align-items: center; gap: 4px; }

.msgBar { height: 38px; gap: 10px; }
.msgTo { font-size: 12.5px; font-weight: 600; color: var(--winink); }
.msgSub { color: var(--winmuted); font-weight: 500; }
.fmtBar { display: flex; align-items: center; gap: 3px; height: 32px; padding: 0 16px; color: var(--winmuted); border-bottom: 1px solid var(--winline); flex: none; }
.fchip { width: 24px; height: 24px; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 12.5px; font-weight: 700; }
.fchip.it { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.fchip.un { text-decoration: underline; }
.fchip.st { text-decoration: line-through; }
.fdiv { width: 1px; height: 15px; background: var(--winline); margin: 0 4px; flex: none; }
.msgEditor { padding-top: 12px; }
.composeRow { display: flex; align-items: center; gap: 3px; height: 46px; padding: 0 14px; border-top: 1px solid var(--winline); flex: none; }
.cbtn { width: 30px; height: 30px; padding: 6px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--winmuted); background: transparent; border: none; flex: none; cursor: default; }
.cSpacer { flex: 1; }
.send { width: 36px; height: 30px; padding: 6px 8px; color: #fff; background: #1c1c1e; border-radius: 8px; }
.docsApp { background: var(--winbg); }
/* No traffic lights on this card — Docs is a browser app — so the icon needs
   its own left inset clear of the window's rounded corner. */
.docsBar { height: 48px; gap: 10px; padding: 0 14px 0 20px; background: var(--winbg); }
/* viewBox is cropped to the artwork (5.5 2.5 13 19) so this box is the glyph
   itself, sized to match the 26px collaborator avatars beside it. A square
   viewBox would letterbox inside the box and cap the drawn height instead. */
.docIcon { width: 17.8px; height: 26px; flex: none; display: flex; align-items: center; }
.docIcon svg { width: 100%; height: 100%; }
.docIcon .dpg { fill: #1a73e8; }
.docIcon .dfold { fill: #a1c2fa; }
.docIcon .dln { stroke: #fff; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.docHead { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.docTitle { font-size: 14px; font-weight: 500; color: var(--winink); white-space: nowrap; line-height: 1.1; }
.docMenu { display: flex; gap: 11px; }
.docMenu span { font-size: 11.5px; color: var(--winmuted); line-height: 1; }
.docPeople { display: flex; align-items: center; flex: none; }
.docPeople > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--winbg); }
.docPeople > *:first-child { margin-left: 0; }
.docAvatar { width: 26px; height: 26px; border-radius: 50%; background: #7b61ff; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; flex: none; }
/* Collaborators are a mix of photos and initials, as a real Docs header is.
   The faces are AI-generated (nobody real), inlined so the page still makes
   no external requests. */
.docPhoto { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: none; }
.docPhoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.docShare { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 15px 0 13px; background: var(--share-bg); color: var(--share-ink); border-radius: 16px; font-size: 13px; font-weight: 500; flex: none; }
.docShare svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.docEditor { background: color-mix(in srgb, var(--winink) 4.5%, var(--winbg)); padding: 12px 26px 0; overflow: hidden; }
.docPage { background: var(--winbg); box-shadow: 0 1px 4px rgba(14,14,16,0.14), inset 0 0 0 1px var(--winline); border-radius: 3px 3px 0 0; padding: 18px 30px; height: 100%; font-size: 15px; line-height: 1.6; }
.docH1 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--winink); margin-bottom: 10px; }
/* The pill finishes widening before the confirmation text fades in. The other
   order clips the longer label against a box still too narrow for it, which
   reads as the text sliding rather than the pill growing around it. */
/* The label stays put while the paragraph under it is de-slopped, so the
   demo reads as one section of a document rather than a floating quote. */
.docTldr { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--winmuted); margin-bottom: 5px; }
@media (max-width: 600px) { .tbHideSm { display: none; } }
.edLayer { grid-area: 1/1; align-self: start; }
.caret { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); vertical-align: -2px; margin-left: 3px; animation: tCaret 1.05s steps(1) infinite; }
/* Square corners: a real text selection is a plain rectangle, not a pill. */
.hl { border-radius: 0; margin: -2px 0; padding: 2px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Three-card carousel across one 28s clock. Beats are deliberately uneven —
   Notes 0-20%, Messages 26-46%, Docs 52-94% — because the Docs slop is much
   longer and needs the reading time.

   A handoff is one movement, not a queue: at 20 / 46 / 94% all three cards
   start moving on the same frame. The front card rises and fades out while
   the one below rises into its place and the deep card steps up to mid.
   The outgoing card clears 34px, so by the time it is faint enough to see
   through, its titlebar sits well above the arriving card's and the two read
   as separate rather than merged. Once invisible it jumps back to the deep
   slot in the 0.4% gap after its exit and fades in there, so the reposition
   is never seen. Three depths keep the third card peeking out below. */
@keyframes rotNotes {
  0% { transform:translateY(0) scale(1); filter:brightness(1) blur(0px); z-index:4 }
  20% { transform:translateY(0) scale(1); filter:brightness(1) blur(0px); z-index:5; animation-timing-function:cubic-bezier(0.2,0.5,0.5,1) }
  22.4% { transform:translateY(-34px) scale(1); filter:brightness(1) blur(0px); z-index:5 }
  22.8% { transform:translateY(38px) scale(0.9); filter:brightness(0.84) blur(0.9px); z-index:1 }
  46% { transform:translateY(38px) scale(0.9); filter:brightness(0.84) blur(0.9px); z-index:1; animation-timing-function:cubic-bezier(0.25,0.55,0.4,1) }
  49.4% { transform:translateY(20px) scale(0.95); filter:brightness(0.93) blur(0.3px); z-index:2 }
  94% { transform:translateY(20px) scale(0.95); filter:brightness(0.93) blur(0.3px); z-index:2; animation-timing-function:cubic-bezier(0.32,1.2,0.5,1) }
  97.4% { transform:translateY(0) scale(1); filter:brightness(1) blur(0px); z-index:4 }
  100% { transform:translateY(0) scale(1); filter:brightness(1) blur(0px); z-index:4 }
}
@keyframes rotMsg {
  0% { transform:translateY(20px) scale(0.95); filter:brightness(0.93) blur(0.3px); z-index:2 }
  20% { transform:translateY(20px) scale(0.95); filter:brightness(0.93) blur(0.3px); z-index:2; animation-timing-function:cubic-bezier(0.32,1.2,0.5,1) }
  23.4% { transform:translateY(0) scale(1); filter:brightness(1) blur(0px); z-index:4 }
  46% { transform:translateY(0) scale(1); filter:brightness(1) blur(0px); z-index:5; animation-timing-function:cubic-bezier(0.2,0.5,0.5,1) }
  48.4% { transform:translateY(-34px) scale(1); filter:brightness(1) blur(0px); z-index:5 }
  48.8% { transform:translateY(38px) scale(0.9); filter:brightness(0.84) blur(0.9px); z-index:1 }
  94% { transform:translateY(38px) scale(0.9); filter:brightness(0.84) blur(0.9px); z-index:1; animation-timing-function:cubic-bezier(0.25,0.55,0.4,1) }
  97.4% { transform:translateY(20px) scale(0.95); filter:brightness(0.93) blur(0.3px); z-index:2 }
  100% { transform:translateY(20px) scale(0.95); filter:brightness(0.93) blur(0.3px); z-index:2 }
}
@keyframes rotDocs {
  0% { transform:translateY(38px) scale(0.9); filter:brightness(0.84) blur(0.9px); z-index:1 }
  20% { transform:translateY(38px) scale(0.9); filter:brightness(0.84) blur(0.9px); z-index:1; animation-timing-function:cubic-bezier(0.25,0.55,0.4,1) }
  23.4% { transform:translateY(20px) scale(0.95); filter:brightness(0.93) blur(0.3px); z-index:2 }
  46% { transform:translateY(20px) scale(0.95); filter:brightness(0.93) blur(0.3px); z-index:2; animation-timing-function:cubic-bezier(0.32,1.2,0.5,1) }
  49.4% { transform:translateY(0) scale(1); filter:brightness(1) blur(0px); z-index:4 }
  94% { transform:translateY(0) scale(1); filter:brightness(1) blur(0px); z-index:5; animation-timing-function:cubic-bezier(0.2,0.5,0.5,1) }
  96.4% { transform:translateY(-34px) scale(1); filter:brightness(1) blur(0px); z-index:5 }
  96.8% { transform:translateY(38px) scale(0.9); filter:brightness(0.84) blur(0.9px); z-index:1 }
  100% { transform:translateY(38px) scale(0.9); filter:brightness(0.84) blur(0.9px); z-index:1 }
}

/* Opacity is a separate animation on the same 28s clock, so the card can hold
   solid for the first moment of its lift and then fade as it keeps rising.
   The lift itself must stay ONE keyframe segment: an intermediate stop gave
   the two curves independent velocities, and an ease-out landing at zero
   speed followed by an ease-in leaving from zero stalled the card mid-air,
   which read as the exit happening in two beats. */
@keyframes fadeNotes {
  0%, 20.3% { opacity:1; animation-timing-function:cubic-bezier(0.4,0,0.6,1) }
  22.2% { opacity:0 }
  22.8% { opacity:0; animation-timing-function:ease }
  25.5%, 100% { opacity:1 }
}
@keyframes fadeMsg {
  0%, 46.3% { opacity:1; animation-timing-function:cubic-bezier(0.4,0,0.6,1) }
  48.2% { opacity:0 }
  48.8% { opacity:0; animation-timing-function:ease }
  51.5%, 100% { opacity:1 }
}
@keyframes fadeDocs {
  0%, 94.3% { opacity:1; animation-timing-function:cubic-bezier(0.4,0,0.6,1) }
  96.2% { opacity:0 }
  96.8% { opacity:0; animation-timing-function:ease }
  100% { opacity:1 }
}

.c1 .before { animation: tdTypo 28s ease-in-out infinite; }
.c1 .after { opacity: 0; animation: tdCrisp 28s ease-in-out infinite; }
.c2 .before { animation: msgSlop 28s ease-in-out infinite; }
.c2 .after { opacity: 0; animation: msgCrisp 28s ease-in-out infinite; }
.c3 .before { animation: docSlop 28s ease-in-out infinite; }
.c3 .after { opacity: 0; animation: docCrisp 28s ease-in-out infinite; }
.c1 .before .hl { animation: selTidy 28s linear infinite; }
.c2 .before .hl { animation: selMsg 28s linear infinite; }
.c3 .before .hl { animation: selDocs 28s linear infinite; }
/* The text swap is a hard cut, never a crossfade — a real in-place replacement
   happens between one frame and the next, so every stop here is step-end.
   Swap moments: Notes 14%, Messages 41%, Docs 87% (each just after its chord).
   The crisp->slop reset happens only while that card is DEEP in the stack
   (Notes 30%, Messages 60%, Docs 6%) so it is never visible on a readable card. */
@keyframes tdTypo { 0% { opacity:1; animation-timing-function:step-end } 14% { opacity:0; animation-timing-function:step-end } 30% { opacity:1; animation-timing-function:step-end } 100% { opacity:1 } }
@keyframes tdCrisp { 0% { opacity:0; animation-timing-function:step-end } 14% { opacity:1; animation-timing-function:step-end } 30% { opacity:0; animation-timing-function:step-end } 100% { opacity:0 } }
@keyframes msgSlop { 0% { opacity:1; animation-timing-function:step-end } 37% { opacity:0; animation-timing-function:step-end } 60% { opacity:1; animation-timing-function:step-end } 100% { opacity:1 } }
@keyframes msgCrisp { 0% { opacity:0; animation-timing-function:step-end } 37% { opacity:1; animation-timing-function:step-end } 60% { opacity:0; animation-timing-function:step-end } 100% { opacity:0 } }
@keyframes docSlop { 0% { opacity:0; animation-timing-function:step-end } 6% { opacity:1; animation-timing-function:step-end } 74% { opacity:0; animation-timing-function:step-end } 100% { opacity:0 } }
@keyframes docCrisp { 0% { opacity:1; animation-timing-function:step-end } 6% { opacity:0; animation-timing-function:step-end } 74% { opacity:1; animation-timing-function:step-end } 100% { opacity:1 } }
@keyframes selTidy { 0% { background:transparent; animation-timing-function:step-end } 4% { background:var(--sel-tint); animation-timing-function:step-end } 14% { background:transparent } 100% { background:transparent } }
@keyframes selMsg { 0% { background:transparent; animation-timing-function:step-end } 27% { background:var(--sel-tint); animation-timing-function:step-end } 37% { background:transparent } 100% { background:transparent } }
@keyframes selDocs { 0% { background:transparent; animation-timing-function:step-end } 57% { background:var(--sel-tint); animation-timing-function:step-end } 74% { background:transparent } 100% { background:transparent } }

/* Measured from the rendered labels, plus a little slack: the working label
   ("Tidying" / "De-slopping") and the confirmation differ in length between
   the two sections, and a pill narrower than its text gets clipped. */
.demo { --tw-a: 84px; --tw-b: 126px; }
.deslopWrap .demo { --tw-a: 113px; --tw-b: 170px; }
.uToast { position:absolute; left:50%; bottom:-12px; z-index:8; box-sizing:border-box; transform:translateX(-50%); display:inline-grid; grid-template-columns:minmax(0,1fr); place-items:center; padding:9px 18px; background:#17171a; border-radius:999px; box-shadow:0 4px 14px -6px rgba(0,0,0,0.40), inset 0 0 0 0.5px rgba(255,255,255,0.08); white-space:nowrap; overflow:hidden; opacity:0; }
.uToast > * { grid-area:1/1; }
.uWork { display:inline-flex; align-items:center; }
.uDone { color:#f4f4f5; font-size:13px; font-weight:500; letter-spacing:-0.01em; }
.uTidy { animation:uTidyShow 28s ease-in-out infinite; }
.uMsg { animation:uMsgShow 28s ease-in-out infinite; }
.uDocs { animation:uDocsShow 28s ease-in-out infinite; }
.uTidy .uWork { animation:uWorkTidy 28s ease-in-out infinite; }
.uTidy .uDone { animation:uDoneTidy 28s ease-in-out infinite; }
.uMsg .uWork { animation:uWorkMsg 28s ease-in-out infinite; }
.uMsg .uDone { animation:uDoneMsg 28s ease-in-out infinite; }
.uDocs .uWork { animation:uWorkDocs 28s ease-in-out infinite; }
.uDocs .uDone { animation:uDoneDocs 28s ease-in-out infinite; }
.procTitle { position:relative; display:inline-block; font-size:13px; color:#f4f4f5; letter-spacing:-0.01em; padding-bottom:11px; }
.procTitle::after { content:""; position:absolute; left:-12px; right:-12px; bottom:0; height:8px; background-repeat:repeat-x; background-position:0 bottom; background-size:16px 8px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 4 Q 4 1.5 8 4 T 16 4' fill='none' stroke='%23e04b3f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); animation:procWave .3s linear infinite; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
@media (prefers-reduced-motion:reduce) { .procTitle::after { animation:none; } }
@keyframes procWave { to { background-position:16px bottom } }
/* Toasts track their own card's beat: the working pill appears just after ⌘A
   while the chord is held, then crossfades to the word count exactly on the
   text flip (13% / 40% / 86%) and clears before the card drops back. */
/* The pill fades in with the chord, then swaps label on the exact frame the
   text is replaced (14 / 41 / 87%) — an instant cut like the text, with the
   width morph carrying the motion. */
/* The pill morphs width while its two labels cross-fade. The count must not
   appear until the pill has nearly finished growing, or it renders clipped
   inside an undersized pill for the whole morph — which is what read as
   janky. Widths are the measured content widths plus the 18px padding. */
@keyframes uTidyShow { 0%,10.3% { opacity:0; transform:translateX(-50%) scale(0.94); width:var(--tw-a) } 11.3%,14.0% { opacity:1; transform:translateX(-50%) scale(1); width:var(--tw-a); animation-timing-function:cubic-bezier(0.32,0.72,0,1) } 14.9%,17.5% { opacity:1; transform:translateX(-50%) scale(1); width:var(--tw-b) } 19.0%,100% { opacity:0; transform:translateX(-50%) scale(0.97); width:var(--tw-b) } }
@keyframes uMsgShow { 0%,33.3% { opacity:0; transform:translateX(-50%) scale(0.94); width:var(--tw-a) } 34.3%,37.0% { opacity:1; transform:translateX(-50%) scale(1); width:var(--tw-a); animation-timing-function:cubic-bezier(0.32,0.72,0,1) } 37.9%,40.0% { opacity:1; transform:translateX(-50%) scale(1); width:var(--tw-b) } 41.5%,100% { opacity:0; transform:translateX(-50%) scale(0.97); width:var(--tw-b) } }
@keyframes uDocsShow { 0%,63.3% { opacity:0; transform:translateX(-50%) scale(0.94); width:var(--tw-a) } 64.3%,74.0% { opacity:1; transform:translateX(-50%) scale(1); width:var(--tw-a); animation-timing-function:cubic-bezier(0.32,0.72,0,1) } 74.9%,78.0% { opacity:1; transform:translateX(-50%) scale(1); width:var(--tw-b) } 79.5%,100% { opacity:0; transform:translateX(-50%) scale(0.97); width:var(--tw-b) } }
@keyframes uWorkTidy { 0%,14.0% { opacity:1 } 14.7%,100% { opacity:0 } }
@keyframes uDoneTidy { 0%,14.95% { opacity:0 } 15.75%,100% { opacity:1 } }
@keyframes uWorkMsg { 0%,37.0% { opacity:1 } 37.7%,100% { opacity:0 } }
@keyframes uDoneMsg { 0%,37.95% { opacity:0 } 38.75%,100% { opacity:1 } }
@keyframes uWorkDocs { 0%,74.0% { opacity:1 } 74.7%,100% { opacity:0 } }
@keyframes uDoneDocs { 0%,74.95% { opacity:0 } 75.75%,100% { opacity:1 } }
@keyframes tCaret { 0%,50% { opacity:1 } 51%,100% { opacity:0 } }

.demo-kbd { margin-top: 4px; }
.demo-kbd .key.kMod { animation: kbMod 28s ease-in-out infinite; }
.demo-kbd .key.kCmd { animation: kbCmd 28s ease-in-out infinite; }
.demo-kbd .key.kA { animation: kbA 28s ease-in-out infinite; }
.demo-kbd .key.kLetter { animation: kbTapLetter 28s ease-in-out infinite; }
@keyframes kbMod { 0% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 7.2% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 7.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 10% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 10.3% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 30.2% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 30.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 33% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 33.3% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 60.2% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 60.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 63% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 63.3% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 100% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } }
@keyframes kbCmd { 0% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 3.7% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 4% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 6.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 6.8% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 7.2% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 7.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 10% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 10.3% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 26.7% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 27% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 29.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 29.8% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 30.2% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 30.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 33% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 33.3% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 56.7% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 57% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 59.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 59.8% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 60.2% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 60.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 63% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 63.3% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 100% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } }
@keyframes kbA { 0% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 3.7% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 4% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 6.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 6.8% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 26.7% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 27% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 29.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 29.8% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 56.7% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 57% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 59.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.6); } 59.8% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 100% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } }
/* T is the tidy shortcut (⌃⌥⌘T) — Notes only, once per loop at 10%.
   S is de-slop (⌃⌥⌘S) — Messages at 37% and Docs at 83%. */
@keyframes kbTapLetter { 0% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 7.2% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 7.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.7); } 10% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.7); } 10.3% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 30.2% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 30.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.7); } 33% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.7); } 33.3% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 60.2% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 60.5% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.7); } 63% { transform:translateY(1.5px); background:linear-gradient(#e04b3f,#b8342a); color:#fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px #a02b22, 0 0 16px rgba(224,75,63,0.7); } 63.3% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } 100% { transform:none; background:linear-gradient(var(--key-a),var(--key-b)); color:var(--key-ink); box-shadow:var(--key-shadow); } }

.grid-why { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 48px; }
.divider { height: 1px; background: var(--hair2); }

.doc { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; }
.doc section { display: flex; flex-direction: column; gap: 10px; }
.doc h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.doc p { font-size: 16px; line-height: 1.62; color: var(--sec); margin: 0; }
.doc ul { margin: 2px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.doc li { font-size: 16px; line-height: 1.55; color: var(--sec); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc code { font-family: 'JetBrains Mono', monospace; font-size: 13px; background: var(--raised); border-radius: 5px; padding: 2px 6px; color: var(--ink); }
.doc pre { background: var(--raised); border-radius: 10px; padding: 16px 18px; overflow-x: auto; margin: 2px 0 0; }
.doc pre code { background: none; padding: 0; font-size: 13px; line-height: 1.7; color: var(--ink); }

.kbd { max-width: 800px; width: 100%; background: linear-gradient(var(--kbd-a), var(--kbd-b)); border-radius: 18px; padding: 15px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--kbd-shadow); }
.krow { display: flex; gap: 6px; }
.key { flex: 1 1 0; min-width: 0; height: 42px; background: linear-gradient(var(--key-a), var(--key-b)); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; color: var(--key-ink); box-shadow: var(--key-shadow); }
.krow.fn .key { height: 25px; font-size: 9px; color: var(--key-dim); }
.arrowStack { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.arrowStack .key.half { height: auto; flex: 1 1 0; font-size: 10px; }
.key.wide { font-size: 10px; color: var(--key-dim); }
.key.mod { color: #c4453a; font-size: 16px; font-weight: 600; box-shadow: inset 0 0 0 1.6px #c4453a, 0 1.5px 2px rgba(14,14,16,0.16); }
.key.hot { position: relative; background: linear-gradient(#e04b3f, #b8342a); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 4px 12px rgba(224,75,63,0.55), 0 0 0 1px #b8342a; }
.key.hot::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #17171a; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; padding: 4px 9px; border-radius: 6px; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.55); }
.key.hot::before { content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #17171a; }
.kb-legend { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; font-size: 14px; color: var(--sec); }
.kb-legend > div { display: flex; align-items: center; gap: 8px; }
.kb-dot { width: 9px; height: 9px; border-radius: 3px; background: #c4453a; flex: none; }
@media (max-width: 720px) { .kbd { display: none; } }

@media (max-width: 860px) {
  .grid-two, .grid-priv, .grid-how, .grid-mode, .grid-why { grid-template-columns: 1fr; gap: 28px; }
  .grid-mode.flip > div:first-child { order: 2; }
  .grid-fixes { grid-template-columns: 1fr 1fr; }
  .h1 { font-size: 44px; }
  .nav-links { display: none !important; }
}
/* ---- Mobile -------------------------------------------------------------
   The demo is three macOS windows drawn at desktop proportions. Below ~600px
   they need smaller type, tighter chrome, and a taller stage, or the long
   Docs slop gets cut off mid-sentence. The Docs titlebar drops its menu row
   and collaborator avatars, which is what Docs itself does when narrow. */
@media (max-width: 600px) {
  .navWrap { padding: 18px; }
  .heroWrap { padding: 28px 18px; gap: 20px; }
  .demoWrap { padding: 18px 14px 48px; }
  .pageWrap { padding: 36px 18px 56px; }
  .footWrap { padding: 22px 18px; }
  .h1 { font-size: 44px; }

  .editor { font-size: 14px; padding: 10px 16px; line-height: 1.5; }

  .notesBar { height: 40px; padding: 0 10px; gap: 6px; }
  .nt1 { font-size: 12px; }
  .nt2 { font-size: 9.5px; }
  .chip { width: 22px; height: 22px; padding: 4px; }

  .msgBar { height: 34px; }
  .msgTo { font-size: 11.5px; }
  .fmtBar { height: 28px; padding: 0 12px; }
  .fchip { width: 21px; height: 21px; }
  .msgEditor { padding-top: 10px; }
  .composeRow { height: 40px; padding: 0 10px; }
  .cbtn { width: 26px; height: 26px; padding: 5px; }
  .send { width: 32px; height: 26px; }

  .docsBar { height: 42px; padding: 0 12px 0 14px; gap: 8px; }
  .docMenu, .docPeople { display: none; }
  /* The spacer competes with docHead for free space and truncates the
     title early; without it the full title fits. */
  .docsBar .cSpacer { display: none; }
  .docHead { flex: 1; min-width: 0; }
  .docTitle { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
  .docIcon { width: 15.4px; height: 22.5px; }
  .docShare { height: 28px; padding: 0 12px 0 10px; font-size: 12px; gap: 5px; }
  .docShare svg { width: 13px; height: 13px; }
  .docEditor { padding: 10px 12px 0; }
  .docPage { padding: 12px 14px; font-size: 12px; line-height: 1.5; }
  .docH1 { font-size: 15px; margin-bottom: 7px; }
  .docTldr { font-size: 9.5px; margin-bottom: 4px; }
}

/* The stage caps at 800px wide, so below ~880px the cards get narrower and
   their text reflows taller. 224px clips it: measured 270px needed at 601px
   and 249px at 375px. One height covers the whole range. */
@media (max-width: 880px) { .stage { min-height: 324px; } }

@media (max-width: 480px) { .h2 { font-size: 27px; } .grid-fixes { grid-template-columns: 1fr; } .h1 { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }