/* Bobby marketing: one stage where GitHub's PR page turns into a Bobby review, a piece per scroll step.
   The app is drawn at a fixed design size (1440 × 900, the size Bobby is captured at) and scaled to fit (site.js). */
:root {
  --bg: #f6f2ea; --surface: #fffcf6; --raised: #efe9de; --line: #ddd4c5; --line-soft: #e9e2d6;
  --text: #2b261e; --muted: #6e6556; --faint: #a1978a;
  --signal: #a8691a; --signal-soft: rgba(168, 105, 26, .10); --risk: #b0543a; --ok: #4f7d4a;
  --add-tint: rgba(79, 125, 74, .09); --del-tint: rgba(176, 84, 58, .08);
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --code: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gh-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --gh-line: #bcc5ce; /* GitHub's #d1d9e0, a shade darker to hold up when scaled down */
  --gh-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --move: cubic-bezier(.65, 0, .35, 1); /* for things that travel: start and land gently */
  --dur: .8s;
  --head: 56px;
  --edge: rgba(60, 40, 10, .16); --drop: rgba(60, 40, 10, .28); /* the frame's hairline and shadow */
  --cmd-bg: #1f1c18; --cmd-fg: #ece5d8;
  /* GitHub's light theme, for its page in the mock */
  --gh-bg: #fff; --gh-canvas: #f6f8fa; --gh-fg: #1f2328; --gh-muted: #59636e; --gh-faint: #818b98;
  --gh-green: #1f883d; --gh-green-edge: #1a7f37; --gh-add-fg: #1a7f37; --gh-del-fg: #d1242f; --gh-mod: #9a6700;
  --gh-tab: #fd8c73; --gh-chip-bg: #ddf4ff; --gh-accent: #0969da; --gh-sel: #818b9826; --gh-counter: #818b981f; --gh-risk-edge: #ff818266;
  --gh-add-bg: #dafbe1; --gh-add-no: #aceebb; --gh-del-bg: #ffebe9; --gh-del-no: #ffcecb; --gh-hunk: #ddf4ff; --gh-hunk-no: #b6e3ff;
  --gh-k: #cf222e; --gh-s: #0a3069; --gh-f: #8250df; --gh-n: #0550ae; --gh-slack: #611f69;
}
/* dark: the app's warm dark around GitHub's dark theme (theme.js sets data-theme before the page paints) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1815; --surface: #211f1b; --raised: #2a2722; --line: #3a352e; --line-soft: #2d2a25;
  --text: #ece5d8; --muted: #a89f91; --faint: #756d61;
  --signal: #e0a54e; --signal-soft: rgba(224, 165, 78, .13); --risk: #d98466; --ok: #93b48d;
  --add-tint: rgba(147, 180, 141, .075); --del-tint: rgba(217, 132, 102, .075);
  --edge: rgba(255, 245, 225, .1); --drop: rgba(0, 0, 0, .5);
  --cmd-bg: #2a2722; --cmd-fg: #ece5d8;
  --gh-line: #3d444d;
  --gh-bg: #0d1117; --gh-canvas: #151b23; --gh-fg: #f0f6fc; --gh-muted: #9198a1; --gh-faint: #6e7681;
  --gh-green: #238636; --gh-green-edge: #2ea043; --gh-add-fg: #3fb950; --gh-del-fg: #f85149; --gh-mod: #9e6a03;
  --gh-tab: #f78166; --gh-chip-bg: rgba(56, 139, 253, .15); --gh-accent: #4493f8; --gh-sel: #656c7633; --gh-counter: #656c7633; --gh-risk-edge: rgba(248, 81, 73, .4);
  --gh-add-bg: rgba(46, 160, 67, .15); --gh-add-no: rgba(63, 185, 80, .3); --gh-del-bg: rgba(248, 81, 73, .1); --gh-del-no: rgba(248, 81, 73, .3);
  --gh-hunk: rgba(56, 139, 253, .1); --gh-hunk-no: rgba(56, 139, 253, .25);
  --gh-k: #ff7b72; --gh-s: #a5d6ff; --gh-f: #d2a8ff; --gh-n: #79c0ff; --gh-slack: #e3b5f0;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font: 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: clip; } /* clip, not hidden: never a scroller of its own, or the sticky stage and the snap points would hang off it */
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
kbd { font: 500 .85em var(--code); padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--surface); }
code { font-family: var(--code); font-size: .9em; }

/* ── the site's own header and footer ─────────────────────────────────── */
.site { position: fixed; z-index: 20; inset: 0 0 auto; height: var(--head); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 3vw, 32px); }
.site .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; letter-spacing: -.01em; }
.site nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 24px); font-size: 13px; }
.site nav a { text-decoration: none; color: var(--muted); transition: color .2s var(--ease); }
.site nav a:hover { color: var(--text); }
.site nav .cta { color: var(--text); font-weight: 600; }
.site nav .theme { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 -6px; color: var(--muted); transition: color .2s var(--ease); }
.site nav .theme:hover { color: var(--text); }
.site nav .theme .sun, :root[data-theme="dark"] .site nav .theme .moon { display: none; }
:root[data-theme="dark"] .site nav .theme .sun { display: block; }
.site-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: center; padding: 28px 16px 40px; color: var(--muted); font-size: 13px; }
.site-foot span { display: flex; align-items: center; gap: 6px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--text); }

/* ── the story: a tall scroller, a sticky stage ───────────────────────── */
.story { position: relative; height: 900vh; } /* site.js sets it from the step count */
html.snapping { scroll-snap-type: y mandatory; }
.story > .snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
html.snapping .site-foot { scroll-snap-align: end; }
.stage { touch-action: pan-y pinch-zoom; position: sticky; top: 0; height: 100vh; height: 100svh; padding: calc(var(--head) + 12px) clamp(16px, 3vw, 32px) 16px; display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.viewport { grid-row: 1; min-height: 0; min-width: 0; display: grid; place-items: center; position: relative; } /* its size, not the frame's, sets the scale */
/* the scroll hint: under the mock, once you've lingered on the first step */
.scroll-hint { position: absolute; z-index: 2; left: 50%; bottom: 4px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); box-shadow: 0 6px 20px -8px var(--drop); color: var(--muted); font-size: 13px; white-space: nowrap; opacity: 0; transform: translate(-50%, 8px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.scroll-hint.on { opacity: 1; transform: translate(-50%, 0); animation: hint-bob 2.4s var(--ease) .5s infinite; }
.scroll-hint .mouse { position: relative; flex: none; width: 14px; height: 21px; border: 1.5px solid var(--muted); border-radius: 7px; }
.scroll-hint .mouse i { position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: var(--signal); animation: hint-wheel 1.6s var(--ease) infinite; }
.scroll-hint .touch { display: none; }
@media (pointer: coarse) { .scroll-hint .pc { display: none; } .scroll-hint .touch { display: inline; } }
@keyframes hint-wheel { 0% { opacity: 0; transform: translateY(-2px); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(6px); } 100% { opacity: 0; } }
@keyframes hint-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint.on, .scroll-hint .mouse i { animation: none; } }
.frame { width: var(--frame-w, calc(1440px * var(--scale, .5))); height: calc(900px * var(--scale, .5)); position: relative; border-radius: calc(4px * var(--scale, .5)); box-shadow: 0 0 0 1px var(--edge), 0 24px 60px -20px var(--drop); overflow: hidden; contain: paint; } /* paint: on a phone the app runs past it (cropped), and nothing of that may reach the page */ /* a hairline all round: the white page stands off the cream */
.captions { grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; position: relative; max-width: 760px; width: 100%; justify-self: center; }
.cap { grid-area: 1 / 1; min-width: 0; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .45s var(--ease); pointer-events: none; padding-bottom: 44px; }
.cap.on { opacity: 1; transform: none; pointer-events: auto; }
.cap small { display: block; font: 500 12px var(--code); letter-spacing: .04em; color: var(--signal); margin-bottom: 6px; }
.cap h1, .cap h2 { margin: 0 0 8px; letter-spacing: -.03em; line-height: 1.12; }
.cap h1 { font-size: clamp(24px, 3.2vw, 36px); }
.cap h2 { font-size: clamp(21px, 2.6vw, 28px); }
.cap .lede { margin: 0 0 4px; color: var(--muted); font-size: 15.5px; }
.cap .out, .cap .in { margin: 6px 0 0; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: baseline; font-size: 15px; }
.cap .out { color: var(--faint); }
.cap .out { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--risk) 55%, transparent); }
.cap .out i, .cap .in i { font: 600 10.5px var(--code); font-style: normal; text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 2px 0; border-radius: 3px; text-decoration: none; display: inline-block; }
.cap .out i { color: var(--risk); background: rgba(176, 84, 58, .1); }
.cap .in i { color: var(--signal); background: var(--signal-soft); }
.cap .in code { color: var(--signal); }
.cap .cmd { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 8px 8px 8px 14px; background: var(--cmd-bg); color: var(--cmd-fg); border-radius: 3px; font-size: 13px; }
.cap .cmd span { color: #e0a54e; }
.cap .cmd code { flex: 1; min-width: 0; white-space: nowrap; overflow-x: auto; scrollbar-width: none; line-height: 1.5; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } /* one line: scrolls, and Copy takes it all */
.cap .cmd code::-webkit-scrollbar { display: none; }
.cap .cmd button { flex: none; padding: 6px 12px; border-radius: 3px; background: #e0a54e; color: #1a1815; font-weight: 600; font-size: 13px; }
.cap .then { margin: 0; color: var(--muted); font-size: 14px; }
.steps { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; }
.steps > button { font: 500 12px var(--code); width: 24px; height: 24px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; color: var(--muted); background: var(--surface); }
.steps > button:hover { color: var(--text); border-color: var(--faint); }
.steps .dots { display: flex; gap: 5px; flex: 1; max-width: 300px; }
.steps .dots button { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background .3s; }
.steps .dots button.done { background: color-mix(in srgb, var(--signal) 45%, var(--line)); }
.steps .dots button.on { background: var(--signal); }
.steps .arrow { display: none; }
@media (pointer: coarse) { .steps .key { display: none; } .steps .arrow { display: inline; } } /* no keys to press on a phone */
.steps .dots button::before { content: ""; display: block; height: 20px; margin-top: -8px; } /* a bigger target */

/* Bobby, floating above the captions on wide screens; buddy.js moves him */
.buddy { display: none; position: absolute; left: 50%; bottom: calc(100% + clamp(24px, 6vh, 64px)); width: clamp(96px, 11vw, 150px); margin-left: calc(clamp(96px, 11vw, 150px) / -2); pointer-events: none; }
.buddy { will-change: transform; }
.buddy svg { display: block; width: 100%; overflow: visible; pointer-events: auto; cursor: pointer; transform-origin: 50% 90%; filter: drop-shadow(0 1px 0 rgba(60, 40, 10, .08)); }
.buddy .b-shadow { display: block; width: 56%; height: 10px; margin: 14px auto 0; border-radius: 50%; background: radial-gradient(closest-side, var(--drop), transparent); }

/* Wide screens: the captions beside the app */
@media (min-width: 1000px) and (min-aspect-ratio: 13/10), (min-width: 640px) and (max-height: 540px) and (min-aspect-ratio: 13/10) {
  .stage { grid-template-rows: none; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); }
  .viewport { grid-row: 1; grid-column: 2; }
  .captions { grid-row: 1; grid-column: 1; align-self: center; }
  .buddy { display: block; }
}
@media (min-width: 1000px) and (min-aspect-ratio: 13/10) and (max-height: 760px) {
  .buddy { display: none; } /* no room above the captions */
}

/* ── the app: design pixels from here on (1440 × 900, as Bobby was captured) ── */
.app { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform: translateX(var(--pan, 0px)) scale(var(--scale, .5)); transform-origin: 0 0; transition: transform .9s var(--move); /* --pan: cropped on a phone, it moves to what the step is about (site.js) */ background: var(--gh-bg); overflow: hidden; font: 14px/1.5 var(--gh-ui); color: var(--gh-fg); }
.app > * { position: absolute; transition: opacity .7s var(--ease), transform var(--dur) var(--move), left var(--dur) var(--move), top var(--dur) var(--move), width var(--dur) var(--move), right var(--dur) var(--move); }
.app .gone { opacity: 0 !important; transform: scale(.985); pointer-events: none; }
.app [data-at]:not(.shown) { opacity: 0; pointer-events: none; }
.bb-host { inset: 0; z-index: 5; pointer-events: none; }
.bb-host.top { z-index: 7; }
.av { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #fff; font: 700 8px var(--gh-ui); flex: none; }

/* GitHub: the PR's Files changed tab, light theme ---------------------------- */
.gh code { font: 12px var(--gh-code); }
.gh .btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid var(--gh-line); border-radius: 6px; background: var(--gh-canvas); font-weight: 500; font-size: 14px; color: var(--gh-fg); white-space: nowrap; }
.gh-head { left: 0; top: 0; width: 1440px; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--gh-canvas); }
.gh-head .ibtn { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--gh-line); border-radius: 6px; color: var(--gh-muted); font-size: 13px; background: var(--gh-bg); }
.gh-head .crumb { font-size: 14px; } .gh-head .crumb i { color: var(--gh-muted); font-style: normal; margin: 0 2px; } .gh-head .crumb b { font-weight: 600; }
.gh-head .search { margin-left: auto; width: 340px; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--gh-line); border-radius: 6px; background: var(--gh-bg); color: var(--gh-muted); font-size: 14px; }
.gh-head .search kbd { font: 11px var(--gh-code); padding: 0 5px; border: 1px solid var(--gh-line); border-radius: 4px; background: none; }
.gh-head .av { width: 32px; height: 32px; font-size: 11px; }
.gh-repo { left: 0; top: 64px; width: 1440px; height: 48px; display: flex; align-items: flex-end; gap: 4px; padding: 0 16px; background: var(--gh-canvas); border-bottom: 1px solid var(--gh-line); }
.gh-repo span { padding: 0 8px 12px; color: var(--gh-fg); white-space: nowrap; }
.gh-repo span.on { font-weight: 600; box-shadow: inset 0 -2px var(--gh-tab); }
.gh-repo b, .gh-pr .tabs b { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 2em; background: var(--gh-counter); font: 500 12px/18px var(--gh-ui); text-align: center; }
.gh-pr { left: 0; top: 112px; width: 1440px; height: 150px; padding: 24px 24px 0; }
.gh-pr h1 { margin: 0 0 8px; font-size: 32px; font-weight: 400; line-height: 1.25; }
.gh-pr h1 span { color: var(--gh-muted); font-weight: 300; }
.gh-pr .btn { position: absolute; top: 26px; height: 28px; font-size: 12px; }
.gh-pr .edit { right: 120px; } .gh-pr .code { right: 24px; background: var(--gh-green); border-color: var(--gh-green-edge); color: #fff; }
.gh-pr p { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--gh-muted); }
.gh-pr p b { color: var(--gh-fg); font-weight: 600; }
.gh-pr p code { padding: 2px 6px; border-radius: 6px; background: var(--gh-chip-bg); color: var(--gh-accent); }
.gh-pr .state { padding: 5px 12px; border-radius: 2em; background: var(--gh-green); color: #fff !important; font-weight: 500 !important; margin-right: 4px; }
.gh-pr .tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: flex-end; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--gh-line); }
.gh-pr .tabs span { padding: 0 12px 12px; white-space: nowrap; }
.gh-pr .tabs span.on { font-weight: 600; box-shadow: inset 0 -2px var(--gh-tab); }
.gh-pr .tabs em { margin-left: auto; padding-bottom: 14px; font: 600 12px var(--gh-ui); display: flex; gap: 4px; align-items: center; }
.add { color: var(--gh-add-fg); font-style: normal; } .del { color: var(--gh-del-fg); font-style: normal; }
.blocks { display: inline-flex; gap: 1px; } .blocks i { width: 8px; height: 8px; border-radius: 1px; background: var(--gh-line); } .blocks .a { background: var(--gh-green); } .blocks .d { background: var(--gh-del-fg); }
.gh-bar { left: 0; top: 262px; width: 1440px; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.gh-bar .btn { height: 28px; font-size: 12px; padding: 0 10px; }
.gh-dock { right: 16px; top: 274px; height: 32px; display: flex; align-items: center; gap: 10px; z-index: 6; font-size: 12px; }
.gh-dock > * { transition: opacity .7s var(--ease), transform var(--dur) var(--move); white-space: nowrap; }
.gh-dock .chip { padding: 2px 10px; border: 1px solid var(--gh-line); border-radius: 2em; background: var(--gh-bg); font-weight: 600; box-shadow: 0 1px 0 #1f23280a; }
.gh-dock .chip.risk { color: var(--gh-del-fg); border-color: var(--gh-risk-edge); }
.gh-dock .viewed { color: var(--gh-muted); }
.gh-dock .review { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 6px; background: var(--gh-green); border: 1px solid var(--gh-green-edge); color: #fff; font-weight: 600; }
.app.s1 .gh-dock { top: 58px; right: var(--dock-right, 260px); } /* just before Bobby's own controls (site.js) */
.gh-tree { left: 16px; top: 318px; width: 290px; bottom: 0; padding: 0 8px 0 0; overflow: hidden; font-size: 14px; }
.gh-tree .filter { height: 32px; display: flex; align-items: center; padding: 0 10px; margin-bottom: 8px; border: 1px solid var(--gh-line); border-radius: 6px; color: var(--gh-faint); }
.gh-tree .t { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 6px; white-space: nowrap; }
.gh-tree .t.l2 { padding-left: 24px; } .gh-tree .t.l3 { padding-left: 40px; }
.gh-tree .t.on { background: var(--gh-sel); font-weight: 600; }
.gh-tree .t i { margin-left: auto; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 3px; font: 700 11px var(--gh-ui); font-style: normal; color: #fff; }
.gh-tree .t i.a { background: var(--gh-add-fg); } .gh-tree .t i.m { background: var(--gh-mod); }
/* step 2: each name flies onto the same name in Bobby's tree (site.js measures --fly), then hands over to it */
.gh-tree { overflow: visible; }
.gh-tree .t, .gh-tree .filter { transform-origin: 0 0; transition: transform .9s var(--move), opacity .3s var(--ease), background-color .3s var(--ease); }
.gh-tree :is(.ic, .t > i) { transition: opacity .3s var(--ease); }
.app .gh-tree.gone { opacity: 1 !important; transform: none; z-index: 6; }
.app .gh-tree.gone :is(.t, .filter) { transform: var(--fly, none); background-color: transparent; transition: transform .9s var(--move) calc(var(--i, 0) * 25ms), opacity .2s var(--ease) calc(.85s + var(--i, 0) * 25ms), background-color .3s var(--ease); }
.app .gh-tree.gone :is(.ic, .t > i) { opacity: 0; transition-duration: .2s; } /* only the names travel */
.app .gh-tree.gone :is(.t, .filter) { opacity: 0; }
.app .gh-tree.gone :is(.t, .filter):not([style*="--fly"]) { transition-delay: 0s; } /* nothing to land on: just go */
.gh-diffs { left: 322px; top: 318px; width: 1102px; bottom: 0; overflow: hidden; }
.gh-diffs .file { border: 1px solid var(--gh-line); border-radius: 6px; margin-bottom: 16px; overflow: hidden; background: var(--gh-bg); }
.gh-diffs .file header { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: var(--gh-canvas); border-bottom: 1px solid var(--gh-line); font-size: 12px; }
.gh-diffs .file header b { font: 600 12px var(--gh-code); }
.gh-diffs .file header .ct { font: 600 12px var(--gh-code); color: var(--gh-muted); }
.gh-diffs .file header .cp, .gh-diffs .file header .chev { color: var(--gh-muted); }
.gh-diffs .file header em { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border: 1px solid var(--gh-line); border-radius: 6px; background: var(--gh-bg); font-style: normal; color: var(--gh-muted); }
.gh-diffs .file header em i { font-style: normal; }
.gh-diffs table { width: 100%; border-collapse: collapse; font: 12px/20px var(--gh-code); }
.gh-diffs td { padding: 0 10px; vertical-align: top; }
.gh-diffs td.no { width: 1%; min-width: 50px; text-align: right; color: var(--gh-muted); user-select: none; }
.gh-diffs td code { white-space: pre; font: inherit; }
.gh-diffs td code b { font-weight: 400; display: inline-block; width: 14px; }
.gh-diffs tr.a td { background: var(--gh-add-bg); } .gh-diffs tr.a td.no { background: var(--gh-add-no); }
.gh-diffs tr.d td { background: var(--gh-del-bg); } .gh-diffs tr.d td.no { background: var(--gh-del-no); }
.gh-diffs tr.hk td { background: var(--gh-hunk); color: var(--gh-muted); } .gh-diffs tr.hk td.no { background: var(--gh-hunk-no); }
.gh-diffs .k { color: var(--gh-k); } .gh-diffs .s { color: var(--gh-s); } .gh-diffs .f { color: var(--gh-f); } .gh-diffs .n { color: var(--gh-n); }
.gh-diffs tr.tr td { padding: 0; background: var(--gh-canvas); border-top: 1px solid var(--gh-line); border-bottom: 1px solid var(--gh-line); }
.gh-diffs .th { padding: 12px 16px; font: 14px/1.5 var(--gh-ui); white-space: normal; }
.gh-diffs .tbox { max-width: 760px; border: 1px solid var(--gh-line); border-radius: 6px; background: var(--gh-bg); overflow: hidden; }
.gh-diffs .tc { display: flex; gap: 10px; padding: 12px 16px; }
.gh-diffs .tc .av { width: 24px; height: 24px; font-size: 9px; }
.gh-diffs .tc p { margin: 0; } .gh-diffs .tc p span { color: var(--gh-muted); font-size: 12px; }
.gh-diffs .tf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--gh-line); background: var(--gh-canvas); }
.gh-diffs .tf .reply { flex: 1; padding: 5px 12px; border: 1px solid var(--gh-line); border-radius: 6px; background: var(--gh-bg); color: var(--gh-faint); }
.gh-diffs .tf .btn { height: 28px; font-size: 12px; }
/* the page moves up into Bobby's bars, then the diffs make room for Bobby's file tree */
.app.s1 .gh-tree, .app.s1 .gh-diffs { top: 108px; }
.app.s2 .gh-diffs { left: 16px; width: 1118px; }
/* then each file flies to its viewer on Bobby's canvas (site.js measures the move) and fades as the canvas settles */
.gh-diffs .file { transition: opacity .3s var(--ease); } /* step 3: each dissolves into its viewer on the canvas, which carries it home (site.js) */
.app.unmorph .gh-diffs .file { transition: opacity .35s var(--ease) calc(.75s + var(--i, 0) * 35ms); } /* and back: shows as its viewer lands on it */
.app.s3 .gh-diffs .file { opacity: 0; }

/* the ping that interrupts you */
.ping { right: 24px; top: 108px; width: 320px; z-index: 9; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--gh-bg); border: 1px solid var(--gh-line); border-radius: 12px; box-shadow: 0 12px 30px rgba(31, 35, 40, .2); font-size: 14px; }
.ping > b { font-size: 12px; color: var(--gh-slack); }

/* toast */
.toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translate(-50%, 16px); padding: 9px 16px; border-radius: 3px; background: var(--text); color: var(--bg); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* a phone on its side: the same, tighter */
@media (min-width: 640px) and (max-height: 540px) and (min-aspect-ratio: 13/10) {
  .stage { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 20px; padding-top: calc(var(--head) + 4px); padding-bottom: 10px; }
  .cap { padding-bottom: 36px; }
  .buddy { display: none; }
  .cap small { font-size: 11px; margin-bottom: 4px; }
  .cap h1 { font-size: 22px; } .cap h2 { font-size: 19px; margin-bottom: 4px; }
  .cap .lede, .cap .then { font-size: 13.5px; line-height: 1.45; }
  .cap .out, .cap .in { font-size: 13px; line-height: 1.45; margin-top: 4px; grid-template-columns: 32px 1fr; gap: 8px; }
}
@media (max-width: 640px) {
  .stage { padding-top: calc(var(--head) + 4px); gap: 14px; }
  .cap h1 { font-size: 23px; } .cap h2 { font-size: 21px; }
  .cap .out, .cap .in { font-size: 14px; grid-template-columns: 34px 1fr; }
  .cap .lede { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}