/* ---------- Claude skin ----------
   Only work/building-this-site.html loads this. Claude wrote that case study and chose its look (Drue asked it to,
   2026-11-02): the site's hierarchy and components, re-dressed as a terminal transcript. Warm paper in light mode,
   warm charcoal in dark, a clay accent, the visitor's own monospace font (nothing new to load), square corners.
   It works by swapping the primitives and type tokens from tokens.css, plus a few component touches below.
   Contrast (AA), on the page / on surface: light text 14.1 / 12.8, secondary 6.4 / 5.8, clay 5.0 / 4.6;
   dark text 14.0 / 12.6, secondary 7.4 / 6.6, clay 6.2 / 5.6. */

html.claude-skin {
  --color-background: #f4f0e8;
  --color-surface: #ebe5da;
  --color-foreground: #24211d;
  --color-foreground-subtle: #5c564d;
  --color-foreground-faint: #d5cdbf;
  --color-accent-purple: #a84a26;
  --color-accent-white: #fffaf3;
  --skin-mark: #f3d9a4;
  --skin-code: #2b6670;
  --skin-muted: var(--text-secondary); /* decorative markers: heading hashes, list dashes, labels */
  --skin-window: #1e1c19;
  --skin-window-text: #ece6dc;
  --skin-window-bar: #2c2925;

  --font-display-1-family: var(--skin-mono);
  --font-display-0-family: var(--skin-mono);
  --font-heading-family: var(--skin-mono);
  --font-body-family: var(--skin-mono);
  --font-nav-family: var(--skin-mono);
  --skin-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-style-regular: 400;
  --font-style-medium: 500;
  --font-style-semibold: 600;

  --type-body-1-size: 18px;
  --type-body-1-line-height: 28px;
  --type-body-1-tracking: 0;
  --type-body-0-size: 14px;
  --type-body-0-line-height: 22px;
  --type-caption-size: 14px;
  --type-caption-line-height: 21px;
  --type-heading-h1-size: 56px;
  --type-heading-h1-line-height: 60px;
  --type-heading-h1-tracking: -0.02em;
  --type-heading-h2-size: 22px;
  --type-heading-h2-line-height: 30px;
  --type-heading-h2-tracking: 0;
  --type-heading-h3-size: 18px;
  --type-heading-h3-line-height: 26px;
  --type-heading-h3-tracking: 0;

  --radius-4: 0px;
  --radius-8: 0px;
}
@media (prefers-color-scheme: dark) {
  :root.claude-skin:not([data-theme="light"]) {
    --color-background: #1c1a17;
    --color-surface: #262320;
    --color-foreground: #ebe6dd;
    --color-foreground-subtle: #b0a899;
    --color-foreground-faint: #3d3933;
    --color-accent-purple: #e0825e;
    --color-accent-white: #1c1a17;
    --skin-mark: #4a3a1c;
    --skin-code: #86c2c9;
    --skin-window: #12110f;
    --skin-window-bar: #22201c;
  }
}
:root.claude-skin[data-theme="dark"] {
  --skin-code: #86c2c9;
  --color-background: #1c1a17;
  --color-surface: #262320;
  --color-foreground: #ebe6dd;
  --color-foreground-subtle: #b0a899;
  --color-foreground-faint: #3d3933;
  --color-accent-purple: #e0825e;
  --color-accent-white: #1c1a17;
  --skin-mark: #4a3a1c;
  --skin-window: #12110f;
  --skin-window-bar: #22201c;
}
@media (max-width: 767px) {
  html.claude-skin {
    --type-heading-h1-size: 44px;
    --type-heading-h1-line-height: 44px;
    --type-body-1-size: 16px;
    --type-body-1-line-height: 26px;
  }
}

/* Type: one family, no fake small caps or italics (the monospace font has neither) */
.claude-skin body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
.claude-skin :is(h1, h2, h3, h4, nav, dt, .at-a-glance h2, .more-work h2) { font-variant-caps: normal; }
.claude-skin em { font-style: normal; }
.claude-skin .case-header h1 { font-size: var(--type-heading-h1-size); line-height: var(--type-heading-h1-line-height); letter-spacing: var(--type-heading-h1-tracking); font-weight: 600; }
.claude-skin .case-header p { font-family: var(--skin-mono); color: var(--text-secondary); letter-spacing: 0; font-size: 16px; line-height: 24px; max-width: none; }
.claude-skin .case-header p::before { content: "// " / ""; color: var(--skin-muted); }
.claude-skin .site-header nav a { font-variant-caps: normal; text-transform: lowercase; letter-spacing: 0; }

/* Headings read like markdown: the hashes are drawn, not read aloud */
.claude-skin .case-study .prose > h2 { font-size: var(--type-heading-h2-size); line-height: var(--type-heading-h2-line-height); font-weight: 600; }
.claude-skin .case-study .prose > h2::before { content: "## " / ""; color: var(--skin-muted); }
.claude-skin .case-study .prose > h3 { font-family: var(--skin-mono); font-size: var(--type-heading-h3-size); line-height: var(--type-heading-h3-line-height); font-weight: 600; color: var(--text-primary); letter-spacing: 0; }
.claude-skin .case-study .prose > h3::before { content: "### " / ""; color: var(--skin-muted); }
.claude-skin .at-a-glance h2, .claude-skin .more-work h2, .claude-skin .author-note h2 { text-transform: lowercase; letter-spacing: 0; }
.claude-skin .at-a-glance h2::before, .claude-skin .more-work h2::before, .claude-skin .author-note h2::before { content: "# " / ""; color: var(--skin-muted); }
.claude-skin .at-a-glance dt { font-style: normal; text-transform: lowercase; color: var(--skin-muted); }
.claude-skin .at-a-glance dt::after { content: ":" / ""; }

/* Prose column: monospace runs wide, so the measure is narrower */
.claude-skin .case-study .prose, .claude-skin .author-note { max-width: 892px; } /* the same column as Drue's case studies */
.claude-skin .case-study .prose ul { list-style: none; padding-left: 2ch; }
.claude-skin .case-study .prose > ul > li::before { content: "- " / ""; margin-left: -2ch; color: var(--skin-muted); }
.claude-skin .case-study .prose ol { padding-left: 3ch; }
.claude-skin .case-study .prose ol > li::marker { color: var(--skin-muted); }
.claude-skin .case-study .prose li { font-size: var(--type-body-1-size); line-height: var(--type-body-1-line-height); }
.claude-skin .case-study .prose strong { font-weight: 600; }
.claude-skin code { font-family: var(--skin-mono); font-size: 0.94em; color: var(--skin-code); } /* teal, so code reads apart from the clay accents */

/* Gaps Drue still has to fill: highlighted so they can't ship unnoticed */
.claude-skin mark.tk { padding: 0 0.3ch; color: var(--text-primary); background: var(--skin-mark); }

/* The note that Claude wrote this page */
.author-note { margin: var(--spacing-32) auto; padding: var(--spacing-16) var(--spacing-24); border: var(--border-1) dashed var(--skin-muted); }
.author-note h2 { margin: 0 0 var(--spacing-8); font-size: var(--type-body-1-size); line-height: var(--type-body-1-line-height); font-weight: 600; }
.author-note p { margin: 0; }

/* Hero: a terminal window with no painting behind it (Drue, 2026-11-02); the prompt types itself out (js/build-animations.js) */
/* The window fills the same frame as the hero on Drue's case studies (1119:606; her phone frame on phones) */
.prompt-shot .hero-stage { background: none; }
.prompt-window { inset: 0; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0; border: var(--border-1) solid var(--border-border-subtle); border-radius: 6px; background: var(--skin-window); cursor: auto; }
.prompt-bar { display: flex; gap: 8px; padding: 12px 16px; background: var(--skin-window-bar); }
.prompt-bar span { width: 11px; height: 11px; border-radius: 50%; background: #5a544b; }
.prompt-body { display: grid; flex: 1; align-content: center; padding: clamp(16px, 4%, 40px) clamp(16px, 5%, 56px); overflow: hidden; }
.prompt-body > * { grid-area: 1 / 1; margin: 0; }
.prompt-text, .prompt-typed { font-family: var(--skin-mono); font-size: clamp(12px, 1.9vw, 21px); line-height: 1.55; color: var(--skin-window-text); }
.prompt-mark { color: #e0825e; font-weight: 600; }
.prompt-text.is-typing { color: transparent; }
.prompt-text.is-typing .prompt-mark { color: transparent; }
.prompt-caret { display: inline-block; width: 0.6em; height: 1.15em; margin-left: 2px; vertical-align: text-bottom; background: #e0825e; animation: prompt-blink 1s steps(1) infinite; }
@keyframes prompt-blink { 50% { opacity: 0; } }
@media (max-width: 767px) {
  .prompt-window { position: static; width: 100%; height: auto; aspect-ratio: 1440 / 1072; } /* her phone hero frame */
  .claude-skin .case-header p { font-size: 13px; } /* monospace runs wide: two lines, as on her case studies */
  .prompt-text, .prompt-typed { font-size: 14px; }
}

/* Code excerpts */
.code-figure { margin: 0; }
.code-figure pre { margin: 0; padding: var(--spacing-16) var(--spacing-24); overflow-x: auto; white-space: pre-wrap; background: var(--skin-window); border-left: 3px solid #e0825e; } /* Drue asked for the clay edge back, 2026-11-03 */
.code-figure pre code { color: var(--skin-window-text); font-size: 14px; line-height: 22px; }

/* Two-column tables (skills, who did what, tools) */
.claude-skin .data-table.two-col table { min-width: 0; }
.claude-skin .data-table.two-col th:nth-child(1) { width: 40%; }
.claude-skin .data-table.two-col th:nth-child(2) { width: auto; }
.claude-skin .data-table thead th { color: var(--skin-muted); font-weight: 600; text-transform: lowercase; }
@media (max-width: 767px) {
  .claude-skin .data-table tbody th { font-family: var(--skin-mono); font-size: 16px; line-height: 24px; font-weight: 600; }
  .claude-skin .data-table td::before { font-variant-caps: normal; text-transform: lowercase; color: var(--skin-muted); }
}

/* The workflow loop, drawn as a commit graph: each step is a node on a rail, and a dashed lane carries the last step
   back to the first. js/build-animations.js moves the active node down the rail and fills the rail behind it;
   without it (or with reduced motion) it's a plain graph with every step in full color. */
.loop-figure { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--spacing-12) var(--spacing-16); margin: 0; }
.claude-skin .case-study .prose .loop { --row: 40px; --node: 11px; --lane: 6px; --rail: 30px; position: relative; flex: 0 0 100%; margin: 0; padding: var(--spacing-16) var(--spacing-24) var(--spacing-16) 0; list-style: none; background: var(--background-surface); }
.claude-skin .case-study .prose .loop > li { position: relative; min-height: var(--row); margin: 0; padding: 9px 0 9px calc(var(--rail) + var(--spacing-24)); font-size: var(--type-body-0-size); line-height: 22px; color: var(--text-primary); transition: color 400ms cubic-bezier(0.16, 1, 0.3, 1); }
/* The node */
.claude-skin .case-study .prose .loop > li::before { content: ""; position: absolute; z-index: 1; left: calc(var(--rail) - var(--node) / 2); top: calc(20px - var(--node) / 2); width: var(--node); height: var(--node); box-sizing: border-box; border: 1.5px solid var(--accent-purple); border-radius: 50%; background: var(--accent-purple); transition: background-color 400ms cubic-bezier(0.16, 1, 0.3, 1), outline-offset 400ms cubic-bezier(0.16, 1, 0.3, 1); outline: 1px solid transparent; outline-offset: 0; }
/* The rail down to the next node */
.claude-skin .case-study .prose .loop > li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--rail) - 0.5px); top: 20px; height: 100%; width: 1px; background: var(--accent-purple); transition: background-color 400ms cubic-bezier(0.16, 1, 0.3, 1); }
/* The return lane: from the last node, left, up, and back into the first, with an arrowhead */
.claude-skin .case-study .prose .loop::before { content: ""; position: absolute; left: var(--lane); width: calc(var(--rail) - var(--lane) - var(--node) / 2 - 3px); top: calc(var(--spacing-16) + 20px); bottom: calc(var(--spacing-16) + 20px); border: 1px dashed var(--border-border); border-right: 0; }
.claude-skin .case-study .prose .loop::after { content: ""; position: absolute; left: calc(var(--rail) - var(--node) / 2 - 8px); top: calc(var(--spacing-16) + 20px - 4px); width: 6px; height: 9px; background: var(--border-border); clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* Animated: steps not yet reached are hollow and quiet, the rail fills as the active node moves */
.loop-figure.is-animated .loop > li { color: var(--text-secondary); }
.loop-figure.is-animated .loop > li::before { background: var(--background-surface); }
.loop-figure.is-animated .loop > li:not(:last-child)::after { background: var(--border-border-subtle); }
.loop-figure.is-animated .loop > li.is-done::before { background: var(--accent-purple); }
.loop-figure.is-animated .loop > li.is-done::after { background: var(--accent-purple); }
.loop-figure.is-animated .loop > li.is-active { color: var(--text-primary); font-weight: 600; }
.loop-figure.is-animated .loop > li.is-active::before { background: var(--accent-purple); outline-color: var(--accent-purple); outline-offset: 3px; }
.loop-figure figcaption { flex: 1; margin: 0; }

/* Figma variables to CSS tokens (js/build-animations.js plays the mapping once): the Figma side on the page's
   surface, the code side in the terminal's colors */
.token-map { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--spacing-12) var(--spacing-16); margin: 0; }
.token-frame { flex: 0 0 100%; }
.claude-skin .case-study .prose .token-rows { margin: 0; padding: 0; list-style: none; }
.claude-skin .case-study .prose .token-rows > li { display: grid; grid-template-columns: 1fr 1fr; margin: 0; font-size: var(--type-body-0-size); line-height: 22px; }
.claude-skin .case-study .prose .token-rows > li::before { content: none; }
.token-rows > li > :is(.tm-figma, .tm-css, .tm-typed, .tm-head) { padding: 9px var(--spacing-16); }
.tm-figma, .token-rows .tm-head:first-child { background: var(--background-surface); }
.claude-skin .token-rows :is(.tm-css, .tm-typed), .token-rows .tm-head:last-child { background: var(--skin-window); color: var(--skin-window-text); font-size: inherit; }
.token-rows .tm-head { padding-block: 6px; font-weight: 600; color: var(--skin-muted); text-transform: lowercase; }
.token-rows .tm-head:last-child { color: #e0825e; }
.token-rows > li + li > * { border-top: var(--border-1) solid var(--border-border-subtle); }
.token-rows > li + li > :is(.tm-css, .tm-typed) { border-top-color: #3a3631; }
.tm-typed { display: none; }
/* While mapping: the real token is hidden (still read by screen readers) and the typed one shows each stage */
.token-map.is-mapping .tm-css { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
.token-map.is-mapping .tm-typed { display: block; color: #e0825e; }
.token-map.is-mapping li.is-mapped .tm-typed { color: var(--skin-window-text); }
.token-map.is-mapping li:not(:first-child):not(.is-shown) .tm-figma { color: var(--text-secondary); }
.token-map.is-mapping li.is-shown .tm-figma { color: var(--text-primary); }
.token-map figcaption { flex: 1; margin: 0; }
@media (max-width: 767px) {
  .claude-skin .case-study .prose .token-rows > li { grid-template-columns: 1fr; }
  .token-rows > li > .tm-head:last-child { display: none; }
  .token-rows > li > :is(.tm-css, .tm-typed) { border-top: 0 !important; }
}

/* A flag answered (js/build-animations.js plays it once): struck out, with the answer after it */
.flag-demo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--spacing-12) var(--spacing-16); margin: 0; }
.flag-card { flex: 0 0 100%; padding: var(--spacing-16) var(--spacing-24); background: var(--background-surface); }
.claude-skin .case-study .prose .flag-card p { margin: 0; font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); }
.claude-skin .case-study .prose .flag-card .flag-label { margin-bottom: var(--spacing-8); color: var(--skin-muted); }
.flag-demo del { color: var(--text-secondary); text-decoration: line-through; transition: color 400ms; }
.claude-skin .flag-demo del mark.tk { color: inherit; }
.flag-demo ins { text-decoration: none; }
.flag-demo.is-asking del { color: var(--text-primary); text-decoration: none; }
.flag-demo.is-asking.is-struck del { color: var(--text-secondary); text-decoration: line-through; }
.flag-demo.is-asking .flag-a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flag-typed { display: none; }
.flag-demo.is-asking .flag-typed { display: inline; }
.flag-demo figcaption { flex: 1; margin: 0; }

/* Commits per day. js/build-animations.js grows the bars from the axis once, left to right, when the chart comes
   on screen; without it they're simply drawn. */
.chart-figure { margin: 0; }
.commit-chart { display: block; width: 100%; height: auto; }
.commit-chart .bars rect { fill: var(--accent-purple); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 40ms); }
.chart-figure.is-waiting .bars rect { transform: scaleY(0); transition: none; }
.commit-chart .axis { stroke: var(--border-border); stroke-width: 1; }
.commit-chart text { fill: var(--text-secondary); font-family: var(--skin-mono); font-size: 12px; }

/* Enlarged (js/build-animations.js): the figure fills the window over the page, content scaled up */
.claude-skin figure.is-expanded { position: fixed; inset: 0; z-index: 40; flex-wrap: nowrap; flex-direction: column; justify-content: center; align-items: stretch; gap: var(--spacing-16); margin: 0; padding: var(--spacing-48) max(var(--spacing-24), calc((100vw - 1100px) / 2)); overflow: auto; background: var(--background-page); }
.claude-skin figure.is-expanded > :first-child { flex: 0 0 auto; zoom: 1.35; }
.claude-skin figure.is-expanded > figcaption { flex: 0 0 auto; }
.claude-skin figure.is-expanded > .shot-actions { position: fixed; top: var(--spacing-16); right: var(--spacing-16); }
.claude-skin figure.is-expanded .shot-actions button::after { bottom: auto; top: calc(100% + 6px); }
@media (max-width: 767px) { .claude-skin figure.is-expanded > :first-child { zoom: 1; } }

/* Who did what, as a horizontal timeline: one block per step, color-coded by who did it (Drue clay, Claude teal,
   Figma Agent violet), tools as chips. It scrolls sideways; js/build-animations.js pans through it on a loop. */
.claude-skin { --who-drue: var(--accent-purple); --who-claude: var(--skin-code); --who-agent: #5f48a8; }
@media (prefers-color-scheme: dark) { :root.claude-skin:not([data-theme="light"]) { --who-agent: #ad9ce8; } }
:root.claude-skin[data-theme="dark"] { --who-agent: #ad9ce8; }
.timeline-figure { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--spacing-12) var(--spacing-16); margin: 0; }
.tl-track { flex: 0 0 100%; contain: inline-size; overflow-x: auto; scroll-snap-type: x proximity; padding: var(--spacing-16) 0 var(--spacing-12); scrollbar-width: thin; scrollbar-color: var(--border-border) transparent; }
.tl-track:focus-visible { outline: var(--border-2) solid var(--border-border-focus); outline-offset: 2px; }
.claude-skin .case-study .prose .tl { display: flex; gap: var(--spacing-32); width: max-content; margin: 0; padding: 0 var(--spacing-16) 0 0; list-style: none; counter-reset: tl; }
.claude-skin .case-study .prose .tl-step { position: relative; display: flex; flex-direction: column; gap: var(--spacing-8); width: 190px; margin: 0; padding: var(--spacing-12) var(--spacing-12) var(--spacing-16); border-top: 4px solid var(--who); background: var(--background-surface); scroll-snap-align: start; counter-increment: tl; font-size: var(--type-body-0-size); line-height: 20px; transition: background-color 300ms, transform 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.claude-skin .case-study .prose .tl-step::before { content: none; }
/* The arrow to the next step */
.claude-skin .case-study .prose .tl-step + .tl-step::after { content: ""; position: absolute; left: calc(-1 * var(--spacing-32) + 6px); top: 40px; width: calc(var(--spacing-32) - 12px); height: 9px; background: var(--border-border); clip-path: polygon(0 4px, calc(100% - 7px) 4px, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, calc(100% - 7px) 5px, 0 5px); }
.claude-skin .case-study .prose .tl-step.is-active { background: var(--background-page); transform: translateY(-4px); box-shadow: 0 0 0 1px var(--who); }
.who-drue { --who: var(--who-drue); }
.who-claude { --who: var(--who-claude); }
.who-agent { --who: var(--who-agent); }
.tl-who { font-weight: 600; color: var(--who); }
.tl-who::before { content: counter(tl) "  " / ""; color: var(--text-secondary); font-weight: 400; }
.tl-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.tl-tools code { padding: 1px 6px; font-size: 12px; line-height: 18px; background: var(--background-page); }
/* The key sits at the top of the timeline, inside the figure, so it enlarges with it */
.claude-skin .case-study .prose .tl-legend { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: var(--spacing-8) 0; margin: 0; font-size: var(--type-caption-size); line-height: var(--type-caption-line-height); color: var(--text-secondary); }
.tl-key { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--spacing-12); white-space: nowrap; }
.tl-swatch { width: 10px; height: 10px; background: var(--who); }
.timeline-figure figcaption { flex: 1; margin: 0; }

/* A reconstructed chat (js/build-animations.js plays it as a loop, each message after a typing beat). Drue's lines
   carry the prompt mark, mine a filled dot, as in Claude Code. */
.chat-demo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--spacing-12) var(--spacing-16); margin: 0; }
.chat-window { flex: 0 0 100%; border: var(--border-1) solid var(--border-border-subtle); border-radius: 6px; overflow: hidden; background: var(--skin-window); }
.claude-skin .case-study .prose .chat { margin: 0; padding: var(--spacing-24); list-style: none; }
.claude-skin .case-study .prose .chat > li { position: relative; margin: 0; padding-left: 2.5ch; color: var(--skin-window-text); font-size: var(--type-body-0-size); line-height: 22px; }
.claude-skin .case-study .prose .chat > li + li { margin-top: var(--spacing-16); }
.claude-skin .case-study .prose .chat > li::before { content: none; }
.claude-skin .case-study .prose .chat p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.msg-who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.msg::after { position: absolute; left: 0; top: 0; color: #e0825e; font-weight: 600; }
.msg.from-drue::after { content: ">" / ""; }
.msg.from-claude::after { content: ""; top: 7px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--skin-window-text); }
.msg.from-drue p { color: #b9b1a4; }
.chat pre { margin: var(--spacing-8) 0 0; padding: var(--spacing-12) var(--spacing-16); white-space: pre-wrap; background: #2a2723; }
.chat pre code { color: var(--skin-window-text); font-size: 13px; line-height: 20px; }
/* Animated: messages not reached yet are hidden (still read by screen readers); a typing beat shows before each one */
.chat-demo.is-playing .msg:not(.is-in) { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chat-demo .msg.is-in { animation: chat-in 400ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes chat-in { from { opacity: 0; transform: translateY(6px); } }
.chat-typing { display: flex; gap: 5px; padding: var(--spacing-16) 0 0 2.5ch; }
.chat-typing span { width: 5px; height: 5px; border-radius: 50%; background: #8a8378; animation: chat-dot 900ms infinite; }
.chat-typing span:nth-child(2) { animation-delay: 150ms; }
.chat-typing span:nth-child(3) { animation-delay: 300ms; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.chat-demo figcaption { flex: 1; margin: 0; }

/* Who made the motion graphics (Drue's estimate): one bar, split. It fills from the left once when it comes on screen. */
.split-figure { margin: 0; }
.split-bar { display: flex; gap: 3px; height: 56px; }
.split-seg { display: flex; align-items: center; gap: 1ch; flex: 0 0 calc(var(--share) - 1.5px); min-width: 0; padding: 0 var(--spacing-16); overflow: hidden; white-space: nowrap; font-size: var(--type-body-0-size); transform-origin: 0 50%; transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms; }
.split-seg strong { font-weight: 600; }
.split-drue { background: var(--accent-purple); color: var(--text-on-accent); }
.split-claude { background: var(--background-surface); color: var(--text-primary); border: var(--border-1) solid var(--accent-purple); transition-delay: 250ms; }
.split-figure.is-waiting .split-seg { transform: scaleX(0); opacity: 0; transition: none; }
.split-figure figcaption { margin-top: var(--spacing-12); }
@media (max-width: 767px) {
  .split-bar { height: 64px; }
  .split-seg { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 0 var(--spacing-12); line-height: 20px; }
}

/* Screenshots and clips keep rounded corners, like the app windows they show */
.claude-skin .media :is(img, video), .claude-skin .media .lightbox-trigger { border-radius: 8px; }

/* The password gate, as one of the page's terminal windows: dark in both themes, like the prompt at the top.
   Colors are the window's own (cream text, clay prompt and button); all pass AA on it. */
.claude-skin .case-study .gate { max-width: 892px; margin-top: var(--spacing-32); padding: 0 0 var(--spacing-32); border: var(--border-1) solid var(--border-border-subtle); border-radius: 6px; overflow: hidden; background: var(--skin-window); box-shadow: none; color: var(--skin-window-text); }
.claude-skin .case-study .gate::before { content: ""; display: block; height: 35px; margin-bottom: var(--spacing-24); background: radial-gradient(circle at 21.5px 50%, #5a544b 5px, transparent 5.5px), radial-gradient(circle at 40.5px 50%, #5a544b 5px, transparent 5.5px), radial-gradient(circle at 59.5px 50%, #5a544b 5px, transparent 5.5px), var(--skin-window-bar); }
.claude-skin .gate > :not(noscript), .claude-skin .gate noscript p { margin-inline: var(--spacing-32); }
.claude-skin .gate h2 { font-family: var(--skin-mono); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: 0; color: var(--skin-window-text); text-transform: none; }
.claude-skin .gate h2::before { content: "> " / ""; color: #e0825e; }
.claude-skin .gate > p { color: #b9b1a4; font-size: var(--type-body-0-size); line-height: 22px; }
.claude-skin .gate label { color: var(--skin-window-text); font-family: var(--skin-mono); font-size: var(--type-body-0-size); font-weight: 600; }
.claude-skin .gate input { font-family: var(--skin-mono); color: var(--skin-window-text); background: #12110f; border: var(--border-1) solid #8a8378; border-radius: 0; caret-color: #e0825e; }
.claude-skin .gate input:hover { border-color: #b9b1a4; }
.claude-skin .gate input:focus { outline: var(--border-2) solid #e0825e; outline-offset: 2px; border-color: #e0825e; }
.claude-skin .gate .password-toggle { color: var(--skin-window-text); }
.claude-skin .gate button[type="submit"] { font-family: var(--skin-mono); color: #1c1a17; background: #e0825e; border-color: #e0825e; }
.claude-skin .gate button[type="submit"]:focus-visible { outline: var(--border-2) solid var(--skin-window-text); outline-offset: 2px; }
.claude-skin .gate .request-link { color: var(--skin-window-text); text-decoration-color: #8a8378; }
.claude-skin .gate .request-link:hover { text-decoration-color: currentColor; }
.claude-skin .gate .request-link:focus-visible { outline: var(--border-2) solid #e0825e; outline-offset: 2px; }
.claude-skin .gate .unlock-error { color: #ff9e94; }
.claude-skin .gate input[aria-invalid="true"] { background: #2a1513; border-color: #ff9e94; }
@media (max-width: 767px) { .claude-skin .gate > :not(noscript), .claude-skin .gate noscript p { margin-inline: var(--spacing-16); } }

/* The glitch intro (js/glitch-intro.js): the page jumps and slices sideways a few times, with no flashes, while the
   clay code rain floods in over it */
@keyframes glitch-jolt {
  0% { transform: none; clip-path: none; }
  14% { transform: translate(-10px, 0) skewX(-6deg); clip-path: inset(8% 0 62% 0); }
  28% { transform: translate(8px, 2px); clip-path: inset(40% 0 20% 0); }
  42% { transform: translate(-4px, -2px) skewX(3deg); clip-path: none; }
  57% { transform: translate(12px, 0); clip-path: inset(70% 0 4% 0); }
  71% { transform: translate(-6px, 1px) skewX(-2deg); clip-path: none; }
  85% { transform: translate(3px, 0); }
  100% { transform: none; clip-path: none; }
}
html.glitch-jolting :is(.site-header, main, .site-footer) { animation: glitch-jolt 700ms steps(1) both; }
.glitch-rain { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100vh; pointer-events: none; opacity: 0; transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1); }

/* The switch (browsers with View Transitions): the page in the site's usual look is held as a still that glitches in
   bands and warms toward clay, then drops out, with this page's look live underneath and the rain falling over both.
   (A dripping melt was tried and dropped, Drue 2026-11-03.) */
html.glitch-melting::view-transition-old(root) {
  z-index: 1;
  animation: glitch-jolt 900ms steps(1) both, glitch-tint 900ms linear both, glitch-out 260ms 820ms ease-in both;
}
html.glitch-melting::view-transition-new(root) { animation: none; }
html.glitch-melting::view-transition-group(glitch-rain), html.glitch-melting::view-transition-new(glitch-rain) { animation: none; }
html.glitch-melting::view-transition-old(glitch-rain) { display: none; }
@keyframes glitch-tint { to { filter: sepia(1) saturate(3) hue-rotate(-28deg); } }
@keyframes glitch-out { to { opacity: 0; } }

/* The opening beat (js/glitch-intro.js takes claude-skin off for it): the page poses as one of Drue's own case
   studies, with her headline and a hero image, then glitches into this one. Without the intro (no JavaScript,
   reduced motion) the skin is on from the start and the pose never shows. */
html.claude-skin .intro-only { display: none; }
html:not(.claude-skin) :is(.skin-only, .prompt-shot, .author-note) { display: none; }
.intro-window img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.intro-only .lightbox-icon { display: none; } /* it can't be opened: the figure is inert */

/* The writing handoff (js/build-animations.js): four steps in their owners' colors, joined by arrows. Animated, a
   step takes its color when the draft reaches it and the current one lifts; without motion all four show reached. */
.pass-figure { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--spacing-12) var(--spacing-16); margin: 0; }
.claude-skin .case-study .prose .pass { flex: 0 0 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-32); margin: 0; padding: var(--spacing-8) 0 0; list-style: none; counter-reset: tl; }
.claude-skin .case-study .prose .pass-step { position: relative; display: flex; flex-direction: column; gap: var(--spacing-8); margin: 0; padding: var(--spacing-12) var(--spacing-12) var(--spacing-16); border-top: 4px solid var(--who); background: var(--background-surface); counter-increment: tl; font-size: var(--type-body-0-size); line-height: 20px; transition: border-color 400ms, transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms; }
.claude-skin .case-study .prose .pass-step::before { content: none; }
.claude-skin .case-study .prose .pass-step + .pass-step::after { content: ""; position: absolute; left: calc(-1 * var(--spacing-32) + 6px); top: 40px; width: calc(var(--spacing-32) - 12px); height: 9px; background: var(--border-border); clip-path: polygon(0 4px, calc(100% - 7px) 4px, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, calc(100% - 7px) 5px, 0 5px); }
.pass-figure.is-animated .pass-step:not(.is-reached) { border-top-color: var(--border-border-subtle); }
.pass-figure.is-animated .pass-step:not(.is-reached) .tl-who { color: var(--text-secondary); }
.claude-skin .case-study .prose .pass-step.is-active { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--who); }
.pass-figure figcaption { flex: 1; margin: 0; }
@media (max-width: 767px) {
  .claude-skin .case-study .prose .pass { grid-template-columns: 1fr; gap: var(--spacing-24); }
  .claude-skin .case-study .prose .pass-step + .pass-step::after { left: 50%; top: calc(-1 * var(--spacing-24) + 4px); width: 9px; height: calc(var(--spacing-24) - 8px); transform: translateX(-50%); clip-path: polygon(4px 0, 5px 0, 5px calc(100% - 7px), 100% calc(100% - 7px), 50% 100%, 0 calc(100% - 7px), 4px calc(100% - 7px)); }
}

/* Drue's reflection, in her words: set in her own case study type (Source Serif, her colors) inside a bordered panel,
   so it reads as hers, not Claude's */
.claude-skin .case-study .prose .drue-reflection { margin-top: var(--spacing-48); padding: var(--spacing-32); border: var(--border-1) solid var(--border-border-subtle); background: var(--background-surface); font-family: "Source Serif 4", serif; font-size: 18px; line-height: 28px; }
.claude-skin .case-study .prose .drue-reflection > * + * { margin-top: var(--spacing-16); }
.claude-skin .case-study .prose .drue-reflection h2 { margin: 0; padding: 0; font-family: "Grenze", serif; font-size: 36px; line-height: 38px; font-weight: 450; letter-spacing: 0; }
.claude-skin .case-study .prose .drue-reflection h2::before { content: none; }
.claude-skin .case-study .prose .drue-reflection p { font-family: inherit; font-size: inherit; line-height: inherit; }
@media (max-width: 767px) { .claude-skin .case-study .prose .drue-reflection { padding: var(--spacing-24) var(--spacing-16); } }

/* Cards, buttons and focus keep the site's behavior in the skin's colors */
.claude-skin .card { border-radius: 0; }
@media (forced-colors: active) {
  .claude-skin mark.tk { forced-color-adjust: none; }
  .prompt-caret { background: CanvasText; }
}