:root {
  --paper: #F3F2EF;
  --paper-hi: #FBFAF8;
  --paper-lo: #E8E6E1;
  --ink: #161618;
  --ink-2: #45454B;
  --ink-3: #626269;
  --line: rgba(22, 22, 24, .1);
  --accent: #E85D04;
  --accent-ink: #B34200;
  --win: #FCFCFB;
  --hud: rgba(22, 22, 24, .82);
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --out: cubic-bezier(.2, .8, .2, 1);
  --snap: cubic-bezier(.3, 1.45, .55, 1);
  --pad: clamp(16px, 4.2vw, 64px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
kbd { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The desk: one screen, soft light, fine grain. */
.desk {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  overflow: clip;
  background:
    radial-gradient(70rem 48rem at 8% 0%, var(--paper-hi) 0%, rgba(251, 250, 248, 0) 62%),
    radial-gradient(60rem 44rem at 100% 100%, var(--paper-lo) 0%, rgba(232, 230, 225, 0) 70%),
    var(--paper);
}
.desk::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .09 0 0 0 0 .1 0 0 0 .5 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.desk > * { position: relative; }

/* Header */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(14px, 3vh, 30px) var(--pad) 0;
}
.brand { display: block; padding: 6px 0; border-radius: 6px; }
.wordmark { height: 23px; width: auto; }
.wordmark .frame, .wordmark .name { fill: var(--ink); }
.wordmark .block { fill: var(--accent); transform-box: fill-box; transform-origin: 100% 100%; animation: snap .6s var(--snap) .2s both; }
.nav { display: flex; gap: 2px; margin-right: -10px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-2);
  transition: background-color .15s, color .15s;
}
.nav-link:hover { color: var(--ink); background: rgba(22, 22, 24, .05); }
.nav-link.is-pending { visibility: hidden; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(12px, 2.4vh, 28px) var(--pad);
}
@media (min-width: 900px) and (min-height: 501px) {
  .hero { padding-bottom: clamp(12px, 6.5vh, 64px); }
}
.copy { max-width: 36rem; container-type: inline-size; }

.keys {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: -4px;
  padding: 4px 10px 4px 4px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-3);
  transition: background-color .15s, color .15s;
}
.keys:hover { background: rgba(22, 22, 24, .045); color: var(--ink-2); }
.caps { display: inline-flex; gap: 4px; }
.caps kbd {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  background: linear-gradient(#FFFFFF, #F7F6F3);
  box-shadow: 0 0 0 1px rgba(22, 22, 24, .12), 0 1.5px 0 rgba(22, 22, 24, .16), 0 3px 6px -2px rgba(22, 22, 24, .12);
  transition: transform .08s ease-out, box-shadow .08s ease-out, background .08s;
}
.caps kbd.is-down {
  transform: translateY(2px);
  background: linear-gradient(#E4E2DD, #EAE8E3);
  box-shadow: 0 0 0 1px rgba(22, 22, 24, .2), inset 0 1px 2px rgba(22, 22, 24, .2), 0 0 0 rgba(22, 22, 24, 0);
}

h1 {
  margin-top: clamp(14px, 2.6vh, 24px);
  font-size: clamp(2rem, min(4.7vw, 7.3vh), 4.15rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.mean { white-space: nowrap; }
.lede {
  margin-top: clamp(12px, 2.3vh, 22px);
  max-width: 31em;
  font-size: clamp(1rem, min(1.3vw, 2.15vh), 1.1875rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.does {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  margin-top: clamp(16px, 3.3vh, 30px);
  max-width: 34rem;
  font-size: 13.5px;
  color: var(--ink-2);
}
.does li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
@container (max-width: 520px) { .does { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 32px; } }
.does svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }

.cta { display: flex; align-items: center; margin-top: clamp(20px, 4.3vh, 40px); }
.download {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 23px 0 19px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(22, 22, 24, .14), 0 6px 16px -8px rgba(232, 93, 4, .45);
  transition: transform .18s var(--out), box-shadow .18s var(--out);
}
.download svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.download:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 4px rgba(22, 22, 24, .14), 0 9px 20px -8px rgba(232, 93, 4, .55); }
.download:active { transform: translateY(.5px); box-shadow: inset 0 1px 2px rgba(22, 22, 24, .18), 0 1px 1px rgba(22, 22, 24, .14); }
.download:focus-visible { outline-color: var(--ink); outline-offset: 2px; border-radius: 999px; }

/* The editor's arrow: orange, round cap, filled head, white halo. */
.note-arrow { width: 88px; height: 44px; flex: none; margin: -30px 0 0 6px; overflow: visible; }
.note-arrow .halo, .note-arrow .shaft { fill: none; stroke-linecap: round; stroke-dasharray: 100 101; animation: draw .5s cubic-bezier(.5, 0, .2, 1) 3.7s both; }
.note-arrow .halo { stroke: rgba(255, 255, 255, .95); stroke-width: 8.4; }
.note-arrow .shaft { stroke: var(--accent); stroke-width: 3.4; }
.note-arrow .head { fill: var(--accent); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; transform-box: view-box; transform-origin: 10px 36px; animation: pop .32s var(--snap) 4.12s both; }

.meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 13px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
.meta span + span::before { content: "·"; margin: 0 .55em; }

/* The scene: two windows, one behind the other. Sized in em from the column width. */
.visual { position: relative; container-type: inline-size; }
.scene, .agent { font-size: min(calc(100cqi / 48.5), 1.7vh, 15px); }
.scene { position: relative; width: 46em; height: 37em; margin-left: auto; }
.win {
  position: absolute;
  overflow: hidden;
  border-radius: .9em;
  background: var(--win);
  box-shadow: 0 0 0 1px rgba(22, 22, 24, .08), 0 1.1em 2.6em -1em rgba(22, 22, 24, .26), 0 .2em .5em rgba(22, 22, 24, .05);
  animation: rise .7s var(--out) both;
}
.win-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45em;
  height: 2.3em;
  padding: 0 .95em;
  background: linear-gradient(#FDFDFC, #F4F3F0);
  border-bottom: 1px solid rgba(22, 22, 24, .07);
}
.win-bar i { width: .72em; height: .72em; border-radius: 50%; background: #DCDAD5; box-shadow: inset 0 0 0 1px rgba(22, 22, 24, .06); }
.win-id {
  margin-left: auto;
  padding: .12em .5em;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .64em;
  font-weight: 500;
  color: #FFFFFF;
  background: rgba(22, 22, 24, .72);
  animation: pop .35s var(--snap) both;
}
.win-notes .win-id { animation-delay: calc(var(--t) + 5.72s); }
.win-mail .win-id { animation-delay: calc(var(--t) + 5.6s); }
.win-title { position: absolute; inset: 0; display: grid; place-items: center; font-size: .78em; font-weight: 600; color: #7D7D83; pointer-events: none; }
.win-body { padding: 1.2em 1.4em; }
.sk { display: block; height: .5em; margin-top: .75em; border-radius: .25em; background: #E6E4DF; }
.w60 { width: 60%; } .w62 { width: 62%; } .w74 { width: 74%; } .w76 { width: 76%; } .w84 { width: 84%; } .w90 { width: 90%; } .w92 { width: 92%; }

.win-notes { left: 18.5em; top: 0; width: 27.5em; height: 20em; animation-delay: .05s; }
.win-notes .win-bar { background: linear-gradient(#FAFAF9, #F1F0ED); }
.n-date { font-size: .72em; color: #8E8E94; }
.n-title { margin-top: .3em; font-size: 1.15em; font-weight: 650; letter-spacing: -.01em; }
.n-list { margin-top: .75em; font-size: .86em; color: #3C3C42; }
.n-list li { display: flex; align-items: center; gap: .6em; padding: .28em 0; }
.n-list li::before { content: ""; width: 1em; height: 1em; flex: none; border-radius: .3em; box-shadow: inset 0 0 0 1.5px #BDBBB5; }
.n-list li.done { color: #8E8E94; text-decoration: line-through; text-decoration-color: rgba(22, 22, 24, .25); }
.n-list li.done::before { box-shadow: none; background: #3C3C42 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.4 2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

.win-mail { left: 0; top: 6.5em; width: 31em; height: 22.5em; animation-delay: .12s; }
.m-from { display: flex; align-items: center; gap: .75em; }
.avatar { display: grid; place-items: center; width: 2.5em; height: 2.5em; flex: none; border-radius: 50%; font-size: .8em; font-weight: 650; color: #5B5B61; background: #E9E7E2; }
.m-who { display: grid; gap: .1em; min-width: 0; font-size: .86em; }
.m-who b { font-weight: 650; }
.m-addr { position: relative; justify-self: start; font-size: .92em; color: #7A7A80; }
.mosaic {
  position: absolute;
  inset: -.12em -.3em;
  border-radius: .18em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='4' height='4' fill='%23ceccc8'/%3E%3Crect x='4' y='0' width='4' height='4' fill='%23e2e0dc'/%3E%3Crect x='8' y='0' width='4' height='4' fill='%23c8c6c2'/%3E%3Crect x='12' y='0' width='4' height='4' fill='%23d0ceca'/%3E%3Crect x='16' y='0' width='4' height='4' fill='%23d8d6d2'/%3E%3Crect x='20' y='0' width='4' height='4' fill='%23c5c3bf'/%3E%3Crect x='24' y='0' width='4' height='4' fill='%23c6c4c0'/%3E%3Crect x='28' y='0' width='4' height='4' fill='%23dedcd8'/%3E%3Crect x='32' y='0' width='4' height='4' fill='%23d5d3cf'/%3E%3Crect x='36' y='0' width='4' height='4' fill='%23c7c5c1'/%3E%3Crect x='40' y='0' width='4' height='4' fill='%23cfcdc9'/%3E%3Crect x='44' y='0' width='4' height='4' fill='%23d6d4d0'/%3E%3Crect x='48' y='0' width='4' height='4' fill='%23c5c3bf'/%3E%3Crect x='52' y='0' width='4' height='4' fill='%23e1dfdb'/%3E%3Crect x='56' y='0' width='4' height='4' fill='%23d4d2ce'/%3E%3Crect x='60' y='0' width='4' height='4' fill='%23cac8c4'/%3E%3Crect x='64' y='0' width='4' height='4' fill='%23c5c3bf'/%3E%3Crect x='68' y='0' width='4' height='4' fill='%23c6c4c0'/%3E%3Crect x='72' y='0' width='4' height='4' fill='%23d1cfcb'/%3E%3Crect x='76' y='0' width='4' height='4' fill='%23d1cfcb'/%3E%3Crect x='0' y='4' width='4' height='4' fill='%23acaaa6'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23b7b5b1'/%3E%3Crect x='8' y='4' width='4' height='4' fill='%23adaba7'/%3E%3Crect x='12' y='4' width='4' height='4' fill='%23cbc9c5'/%3E%3Crect x='16' y='4' width='4' height='4' fill='%23c3c1bd'/%3E%3Crect x='20' y='4' width='4' height='4' fill='%23aba9a5'/%3E%3Crect x='24' y='4' width='4' height='4' fill='%23cccac6'/%3E%3Crect x='28' y='4' width='4' height='4' fill='%23afada9'/%3E%3Crect x='32' y='4' width='4' height='4' fill='%23b6b4b0'/%3E%3Crect x='36' y='4' width='4' height='4' fill='%23cdcbc7'/%3E%3Crect x='40' y='4' width='4' height='4' fill='%23aba9a5'/%3E%3Crect x='44' y='4' width='4' height='4' fill='%23cccac6'/%3E%3Crect x='48' y='4' width='4' height='4' fill='%23cdcbc7'/%3E%3Crect x='52' y='4' width='4' height='4' fill='%23c1bfbb'/%3E%3Crect x='56' y='4' width='4' height='4' fill='%23aba9a5'/%3E%3Crect x='60' y='4' width='4' height='4' fill='%23b6b4b0'/%3E%3Crect x='64' y='4' width='4' height='4' fill='%23aaa8a4'/%3E%3Crect x='68' y='4' width='4' height='4' fill='%23cbc9c5'/%3E%3Crect x='72' y='4' width='4' height='4' fill='%23b0aeaa'/%3E%3Crect x='76' y='4' width='4' height='4' fill='%23bab8b4'/%3E%3Crect x='0' y='8' width='4' height='4' fill='%23d1cfcb'/%3E%3Crect x='4' y='8' width='4' height='4' fill='%23c8c6c2'/%3E%3Crect x='8' y='8' width='4' height='4' fill='%23d5d3cf'/%3E%3Crect x='12' y='8' width='4' height='4' fill='%23c7c5c1'/%3E%3Crect x='16' y='8' width='4' height='4' fill='%23d6d4d0'/%3E%3Crect x='20' y='8' width='4' height='4' fill='%23cdcbc7'/%3E%3Crect x='24' y='8' width='4' height='4' fill='%23d5d3cf'/%3E%3Crect x='28' y='8' width='4' height='4' fill='%23dedcd8'/%3E%3Crect x='32' y='8' width='4' height='4' fill='%23d9d7d3'/%3E%3Crect x='36' y='8' width='4' height='4' fill='%23c9c7c3'/%3E%3Crect x='40' y='8' width='4' height='4' fill='%23c7c5c1'/%3E%3Crect x='44' y='8' width='4' height='4' fill='%23d6d4d0'/%3E%3Crect x='48' y='8' width='4' height='4' fill='%23d6d4d0'/%3E%3Crect x='52' y='8' width='4' height='4' fill='%23d8d6d2'/%3E%3Crect x='56' y='8' width='4' height='4' fill='%23cac8c4'/%3E%3Crect x='60' y='8' width='4' height='4' fill='%23cfcdc9'/%3E%3Crect x='64' y='8' width='4' height='4' fill='%23c7c5c1'/%3E%3Crect x='68' y='8' width='4' height='4' fill='%23d5d3cf'/%3E%3Crect x='72' y='8' width='4' height='4' fill='%23dad8d4'/%3E%3Crect x='76' y='8' width='4' height='4' fill='%23c6c4c0'/%3E%3C/svg%3E") 0 0 / auto 100% repeat-x;
  animation: wipe .55s var(--out) .55s both;
}
.m-time { margin-left: auto; align-self: start; font-size: .72em; color: #8E8E94; }
.m-subject { margin-top: 1em; font-size: 1.05em; font-weight: 650; letter-spacing: -.01em; }
.m-attach {
  position: relative;
  width: 17em;
  margin-top: 1.1em;
  padding: .75em;
  border-radius: .6em;
  background: #F4F3F0;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 24, .07);
}
.ui { display: grid; grid-template-columns: 4.6em 1fr; grid-template-rows: auto auto; gap: .7em .8em; padding: .8em; border-radius: .4em; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(22, 22, 24, .06); }
.ui-img { grid-row: span 2; height: 4.6em; border-radius: .35em; background: linear-gradient(135deg, #E3E0D9, #CFCBC3); }
.ui-lines .sk:first-child { margin-top: .2em; }
.ui-pay { justify-self: start; padding: .35em 1.1em; border-radius: .4em; font-size: .72em; font-weight: 650; color: #FFFFFF; background: var(--ink); }
.step {
  position: absolute;
  right: 6.6em;
  bottom: 1.1em;
  display: grid;
  place-items: center;
  width: 1.65em;
  height: 1.65em;
  border-radius: 50%;
  font-size: .95em;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--accent);
  box-shadow: 0 0 0 .15em rgba(255, 255, 255, .92), 0 .25em .6em rgba(22, 22, 24, .18);
  animation: pop .45s var(--snap) .95s both;
}

/* Agent terminal */
.visual { --t: 0s; }
.agent { position: absolute; right: 0; top: 21.5em; width: 23em; animation: rise .6s var(--out) calc(var(--t) + 4.05s) both; }
.term {
  overflow: hidden;
  border-radius: .8em;
  color: #F5F4F1;
  background: #1E1E21;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 1.1em 2.4em -1.1em rgba(22, 22, 24, .42), 0 .2em .5em rgba(22, 22, 24, .1);
}
.term-bar { display: flex; align-items: center; gap: .42em; height: 1.95em; padding: 0 .85em; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.term-bar i { width: .62em; height: .62em; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.term-bar span { margin-left: .5em; font-family: var(--mono); font-size: .7em; color: rgba(255, 255, 255, .45); }
.term-body { display: grid; padding: .6em 1.05em .85em; font-family: var(--mono); font-size: .86em; line-height: 1.7; white-space: pre; }
.ln { display: block; height: 1.7em; overflow: hidden; }
.pr { color: var(--accent); }
.ty {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: calc(var(--n) * 1ch + .55ch);
  border-right: .55ch solid transparent;
  animation: type calc(var(--n) * 55ms) steps(var(--n), end) var(--d) both, caret calc(var(--n) * 55ms) step-end var(--d);
}
.l1 .ty { --n: 12; --d: calc(var(--t) + 4.75s); }
.l2 .ty { --n: 19; --d: calc(var(--t) + 6.3s); }
.o1, .o2, .o3, .l2, .l3 { color: rgba(245, 244, 241, .62); animation: appear 1ms linear both; }
.l2, .l3 { color: inherit; }
.o1 { animation-delay: calc(var(--t) + 5.55s); }
.o2 { animation-delay: calc(var(--t) + 5.68s); }
.l2 { animation-delay: calc(var(--t) + 6.05s); }
.o3 { animation-delay: calc(var(--t) + 7.75s); }
.l3 { animation-delay: calc(var(--t) + 7.95s); }
.o2 em { font-style: normal; color: #F5F4F1; }
.ok { color: var(--accent); }
.caret { display: inline-block; width: .55ch; height: 1.15em; vertical-align: -.2em; background: rgba(245, 244, 241, .8); animation: blink 1.1s step-end calc(var(--t) + 8s) 5; }
.agent figcaption { margin-top: 1.3em; max-width: 23em; font-size: .9em; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.text-link { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.text-link:hover { color: var(--ink); }

/* Footer */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--pad) clamp(14px, 2.8vh, 26px);
  font-size: 12.5px;
  color: var(--ink-3);
}
.hint { display: none; align-items: center; gap: 7px; }
.hint svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* Popover panels */
.panel {
  position: fixed;
  inset: auto;
  top: clamp(58px, calc(3vh + 44px), 76px);
  right: max(12px, calc(var(--pad) - 10px));
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100svh - 100px);
  margin: 0;
  padding: 0 20px 20px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 14px;
  color: var(--ink);
  background: #FCFCFB;
  box-shadow: 0 0 0 1px rgba(22, 22, 24, .1), 0 28px 64px -24px rgba(22, 22, 24, .38), 0 4px 14px rgba(22, 22, 24, .08);
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  transform-origin: 100% 0;
  transition: opacity .18s ease-out, transform .24s var(--out), overlay .24s allow-discrete, display .24s allow-discrete;
}
.panel:popover-open { opacity: 1; transform: none; }
@starting-style { .panel:popover-open { opacity: 0; transform: translateY(-6px) scale(.985); } }
.panel::backdrop { background: transparent; }
.panel-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 16px 0 10px; background: #FCFCFB; }
.panel h2 { font-size: 15px; font-weight: 650; letter-spacing: -.005em; }
.panel-close { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -6px; border-radius: 7px; color: var(--ink-3); }
.panel-close:hover { background: rgba(22, 22, 24, .06); color: var(--ink); }
.panel-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.panel-lede { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.panel h3 { margin: 16px 0 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.cmd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 6px; }
.cmd-head h3 { margin: 0; }
.cmd {
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #F5F4F1;
  background: #1E1E21;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  min-width: 58px;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(22, 22, 24, .06);
  transition: background-color .15s, color .15s;
}
.copy-btn:hover { color: var(--ink); background: rgba(22, 22, 24, .1); }
.copy-btn.is-done { color: var(--ink); background: var(--accent); }
.tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tools li { padding: 3px 8px; border-radius: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); background: rgba(22, 22, 24, .055); }
.panel-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); }

.releases { display: grid; gap: 18px; padding-top: 2px; }
.rel { padding-top: 16px; border-top: 1px solid var(--line); }
.rel:first-child { padding-top: 4px; border-top: 0; }
.rel-head { display: flex; align-items: baseline; gap: 10px; }
.rel-head h3 { margin: 0; font-size: 14px; font-weight: 650; color: var(--ink); }
.rel-head time { font-size: 12.5px; color: var(--ink-3); }
.rel-dl { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.rel-dl:hover { text-decoration: underline; }
.rel-notes { margin-top: 8px; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.rel-notes li { position: relative; padding-left: 14px; }
.rel-notes li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; border-radius: 1.5px; background: var(--accent); }

/* Capture overlay: the app's frame, handles, dimension pill and guides. */
.shot { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .18s ease-out; }
.shot[data-phase="aim"], .shot[data-phase="drawing"], .shot[data-phase="held"] { opacity: 1; transition: none; }
.sel {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, 0);
  height: var(--h, 0);
  transform: translate(var(--x, 0), var(--y, 0));
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: inset 0 0 0 2.5px var(--accent), 0 0 0 200vmax rgba(22, 22, 24, .13);
}
.shot[data-phase="aim"] .sel { visibility: hidden; }
.h { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: #FFFFFF; box-shadow: inset 0 0 0 1.25px var(--accent); opacity: 0; transform: scale(.4); transition: opacity .12s, transform .16s var(--snap); }
.shot[data-phase="held"] .h { opacity: 1; transform: none; }
.nw { left: 0; top: 0; } .n { left: 50%; top: 0; } .ne { left: 100%; top: 0; } .e { left: 100%; top: 50%; }
.se { left: 100%; top: 100%; } .s { left: 50%; top: 100%; } .sw { left: 0; top: 100%; } .w { left: 0; top: 50%; }
/* Guides reach the edges but fade away from the pointer. */
.guide { position: absolute; left: 0; top: 0; opacity: 0; --near: rgba(22, 22, 24, .2); --far: rgba(22, 22, 24, .055); }
.gx { width: 100%; height: 1px; transform: translateY(var(--gy, 0)); background: linear-gradient(90deg, var(--far), var(--far) calc(var(--gx, 0px) - 260px), var(--near) var(--gx, 0px), var(--far) calc(var(--gx, 0px) + 260px), var(--far)); }
.gy { width: 1px; height: 100%; transform: translateX(var(--gx, 0)); background: linear-gradient(180deg, var(--far), var(--far) calc(var(--gy, 0px) - 260px), var(--near) var(--gy, 0px), var(--far) calc(var(--gy, 0px) + 260px), var(--far)); }
.shot[data-phase="aim"] .guide, .shot[data-phase="drawing"] .guide { opacity: 1; }
.dims {
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  color: #FFFFFF;
  background: rgba(0, 0, 0, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transform: translate(var(--dx, 0), var(--dy, 0));
}
.shot[data-phase="aim"] .dims, .shot[data-phase="leaving"] .dims { visibility: hidden; }
.flash { position: absolute; left: 0; top: 0; background: #FFFFFF; opacity: 0; }
.target { position: absolute; left: 0; top: 0; border: 1px solid rgba(255, 255, 255, .95); box-shadow: inset 0 0 0 3px var(--accent); border-radius: .9em; opacity: 0; }

.readout {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 45;
  pointer-events: none;
  font-family: var(--mono);
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: rgba(252, 252, 251, .86);
  box-shadow: 0 0 0 1px rgba(22, 22, 24, .1), 0 2px 6px -2px rgba(22, 22, 24, .16);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
}
.readout.is-on { opacity: 1; }

/* Quick Access: cards slide into the bottom left corner. */
.qa { position: fixed; left: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; gap: 10px; margin: 0; pointer-events: none; }
.qa-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(22, 22, 24, .16), 0 16px 36px -12px rgba(22, 22, 24, .42), 0 2px 6px rgba(22, 22, 24, .1);
  transform-origin: 0 0;
  pointer-events: auto;
  cursor: default;
}
.qa-thumb { position: absolute; inset: 0; overflow: hidden; }
.qa-thumb > * { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; }
.qa-thumb > .desk { min-height: 0; }
.qa-thumb > .win { animation: none; box-shadow: none; }
.qa-scrim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(22, 22, 24, .34); opacity: 0; transition: opacity .2s; }
.qa-card:hover .qa-scrim, .qa-card.is-peek .qa-scrim { opacity: 1; }
.qa-pill { min-width: 70px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; text-align: center; color: #FFFFFF; background: rgba(22, 22, 24, .74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.qa-card.is-flying { box-shadow: 0 0 0 1px rgba(22, 22, 24, .1), 0 18px 40px -18px rgba(22, 22, 24, .3); }
.qa-card.is-flying .qa-chip { opacity: 0; }
.qa-chip { position: absolute; left: 8px; bottom: 8px; transition: opacity .2s; padding: 2px 7px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: #FFFFFF; background: rgba(0, 0, 0, .66); }

.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: #FFFFFF;
  background: var(--hud);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 30px -10px rgba(22, 22, 24, .5);
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity .25s, transform .35s var(--out);
  pointer-events: none;
}
.toast:empty { display: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Clones inside Quick Access cards hold still. */
.is-still, .is-still *, .is-still *::before, .is-still *::after { animation: none !important; transition: none !important; }

/* A mouse turns the page into a capture surface. */
@media (hover: hover) and (pointer: fine) {
  .desk { cursor: crosshair; user-select: none; -webkit-user-select: none; }
  .desk a, .desk button { cursor: pointer; }
  .hint { display: inline-flex; }
  html.is-dragging, html.is-dragging * { cursor: crosshair !important; }
}

@keyframes snap { from { transform: translate(-22%, -22%) scale(.55); opacity: 0; } 55% { opacity: 1; } }
@keyframes rise { from { transform: translateY(.8em); opacity: 0; } }
@keyframes pop { from { transform: scale(0); opacity: 0; } 40% { opacity: 1; } }
@keyframes draw { from { stroke-dashoffset: 100; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes type { from { width: .55ch; } }
@keyframes caret { from, to { border-right-color: rgba(245, 244, 241, .8); } }
@keyframes appear { from { visibility: hidden; } }
@keyframes blink { 50% { opacity: 0; } }

/* Narrow screens: one column. The windows step aside; the terminal stays. */
@media (max-width: 899px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(20px, 3.4vh, 32px); }
  .copy { max-width: 34rem; }
  .scene { display: none; }
  .visual { container-type: normal; max-width: 34rem; }
  .agent { position: static; width: auto; max-width: 24rem; font-size: 12.5px; }
  .foot { font-size: 12px; }
}
@media (max-width: 599px) {
  .wordmark { height: 19px; }
  .nav { margin-right: -4px; }
  .nav-link { padding: 8px 7px; font-size: 13px; }
  h1 { font-size: clamp(2rem, 9.4vw, 2.5rem); }
  .lede { font-size: 15.5px; }
  .does { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: 13px; }
  .meta { min-height: 3em; font-size: 12.5px; }
  .meta .version { flex-basis: 100%; }
  .meta .version::before { content: none; }
  .visual { --t: 2.3s; }
  .download { height: 48px; }
  .agent { font-size: 13px; }
  .panel { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: min(78svh, 640px); transform-origin: 50% 100%; transform: translateY(10px); }
  .panel::backdrop { background: rgba(22, 22, 24, .22); }
  @starting-style { .panel:popover-open { transform: translateY(10px); } }
  .qa { left: 12px; bottom: 12px; }
}
@media (max-width: 599px) and (max-height: 760px) {
  .keys { display: none; }
  .download { height: 46px; font-size: 15px; }
  h1 { margin-top: 0; font-size: 1.95rem; }
  .lede { font-size: 14.5px; }
  .does { font-size: 12.5px; gap: 6px 12px; margin-top: 14px; }
  .cta { margin-top: 18px; }
  .agent { font-size: 12.5px; }
}
/* Landscape phones: two short columns. */
@media (max-height: 500px) and (min-width: 600px) and (orientation: landscape) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
  .scene, .keys { display: none; }
  .visual { container-type: normal; }
  .agent { position: static; width: auto; max-width: 310px; margin-left: auto; font-size: 12.5px; }
  h1 { margin-top: 0; font-size: 1.8rem; }
  .lede { font-size: 14px; margin-top: 10px; }
  .does { display: flex; gap: 5px 12px; margin-top: 12px; font-size: 12.5px; }
  .cta { margin-top: 16px; }
  .download { height: 44px; font-size: 15px; }
  .meta { margin-top: 8px; font-size: 12px; }
}

/* Small screens keep the terminal readable and drop two of its lines. The button needs no arrow there. */
@media (max-width: 599px), (max-height: 500px) {
  .o1, .l3, .note-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* 404 */
.lost { align-self: center; width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--pad); }
.lost-code { display: inline-block; padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: 12px; color: #FFFFFF; background: rgba(0, 0, 0, .78); }
.lost-back { margin-top: 22px; font-size: 15px; }