/* ──────────────────────────────────────────────────────────────────
   tofig.aca.so/claude.html — Claude to Figma

   Page-scoped layer on top of tokens.css + site.css. Everything here
   is prefixed `cl-` or scoped under `.p-claude`, so nothing leaks
   into the home page or the docs.

   THE COLOUR CODE
   The site's rule is "violet means structure, amber means a limit."
   This page extends it along the journey rather than sideways:

     clay   = the Claude side. The conversation, the export, the ask.
     violet = the tofig and Figma side. Nodes, bounds, measurement.
     amber  = still, and only, a limit. It appears once, on the
              sandbox notice, exactly as it does on the home page.

   So the hero specimen is clay on the left of the seam and violet on
   the right, the rail down the journey changes colour at the handoff,
   and the export prompt (a thing you hand to Claude) is bordered clay
   while everything tofig produces is bordered violet. The mix carries
   information; it is not a second accent sprinkled for warmth.

   The clay ramp itself lives in tokens.css (--c-300 … --c-700, plus
   --c-ghost and --c-edge), because the home page uses it too and two
   copies of a ramp is one copy too many. Measured on --void:
   c-300 9.67, c-400 7.74, c-500 6.26, c-600 4.80, c-700 3.81, and
   white on --c-700 measures 5.27. Nothing lighter than --c-600 is
   used as a background for white text, and --c-600 itself is never
   used for text on a panel ground.
   ────────────────────────────────────────────────────────────────── */

/* ═══════════════════════ Hero ═════════════════════════════════════
   One column of copy over a full-width specimen, rather than the home
   page's 46/54 split. Same system, different composition, so the two
   pages read as siblings instead of as one template used twice. */

.p-claude .cl-hero {
  padding-block: clamp(var(--space-11), 9vh, var(--space-12)) var(--space-12);
}

/* Two light sources under the specimen, one per side of the seam.
   The canvas is lit by the object sitting on it. */
.p-claude .hero::before {
  background:
    radial-gradient(46% 38% at 28% 74%, oklch(0.665 0.125 40 / 0.26), transparent 70%),
    radial-gradient(46% 40% at 72% 78%, oklch(0.588 0.212 284 / 0.20), transparent 70%);
}

.cl-hero__copy { position: relative; max-width: 48rem; }
.cl-hero .display { margin-bottom: var(--space-6); }
.cl-hero .lede { max-width: 50ch; }
.cl-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-8);
}

/* ══════════ SIGNATURE — the seam ══════════════════════════════════
   One design, read two ways. Left of the seam it is a single flat
   export with one box around the whole thing. Right of it, every
   element carries its own bounds and its own name. The seam sweeps
   across on an 11s loop, so the page performs the transformation
   rather than captioning it.

   Geometry is percentage-based against a locked aspect ratio and type
   is sized in container units, so the whole specimen scales down
   intact on a phone instead of spilling out of the plate. */

.cl-spec { width: 100%; max-width: 680px; margin: var(--space-11) auto 0; }

.cl-field {
  position: relative;
  aspect-ratio: 580 / 400;
  container-type: inline-size;
}

/* The card and both annotation overlays share one geometry rule, so
   the narrow-width layout is a single override and the boxes drawn on
   top of the design can never drift away from the design. Everything
   inside them is expressed against the card, not against the field. */
.cl-card, .cl-overlay {
  position: absolute;
  left: 5.17%; top: 7.5%; width: 89.66%; height: 85%;
}
.cl-card {
  background: var(--paper);
  border-radius: 2.6cqw;
  box-shadow: var(--lift-3);
}

.cl-el, .cl-box { position: absolute; display: block; }

.cl-el--plan, .cl-box--plan { left: 5%; top: 7.65%; width: 17.7%; height: 8.24%; }
.cl-chip {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: var(--radius-full);
  background: oklch(0.588 0.212 284 / 0.13);
  color: oklch(0.44 0.20 284);
  font-size: max(9px, 1.9cqw); font-weight: 600; letter-spacing: 0.02em;
}

.cl-el--price, .cl-box--price { left: 5%; top: 20.6%; width: 48.1%; height: 15.3%; }
.cl-el--price {
  display: flex; align-items: baseline; gap: 1.5cqw;
}
.cl-el--price b {
  font-size: max(22px, 7.2cqw); font-weight: 600; line-height: 1;
  letter-spacing: -0.045em; color: var(--paper-ink);
}
.cl-el--price i {
  font-style: normal; font-size: max(10px, 2.2cqw); color: var(--paper-ink-2);
}

.cl-el--rule { left: 5%; top: 42.9%; width: 90%; height: 1px; background: var(--paper-line); }

.cl-el--feats, .cl-box--feats { left: 5%; top: 49.4%; width: 57.7%; height: 24.7%; }
.cl-el--feats {
  display: flex; flex-direction: column; justify-content: space-between;
}
.cl-feat {
  display: flex; align-items: center; gap: 1.7cqw;
  font-size: max(9.5px, 2.1cqw); line-height: 1.15;
  letter-spacing: -0.025em; color: var(--paper-ink);
}
.cl-dot {
  flex: none; width: max(5px, 1.5cqw); height: max(5px, 1.5cqw);
  border-radius: 50%; background: oklch(0.588 0.212 284 / 0.6);
}

.cl-el--cta, .cl-box--cta { left: 5%; top: 79.4%; width: 90%; height: 12.9%; }
.cl-el--cta {
  display: grid; place-items: center;
  border-radius: 1.8cqw;
  background: var(--paper-ink); color: var(--paper);
  font-size: max(11px, 2.4cqw); font-weight: 500; letter-spacing: -0.03em;
}

/* ── The two readings ─────────────────────────────────────────────── */

.cl-anno { position: absolute; inset: 0; pointer-events: none; }
.cl-anno--flat  { clip-path: inset(0 4% 0 0);  will-change: clip-path; }
.cl-anno--nodes { clip-path: inset(0 0 0 96%); will-change: clip-path; }

/* Left of the seam: one dashed box round the whole thing and a warm
   cast over it, so it reads as one baked image. */
.cl-overlay--flat {
  border-radius: 2.6cqw;
  background: oklch(0.665 0.125 40 / 0.15);
  outline: 1.5px dashed var(--c-500);
  outline-offset: 5px;
}
/* Right of it: the frame's own bounds, then a box per element. */
.cl-overlay--nodes {
  border-radius: 2.6cqw;
  outline: 1px solid oklch(0.588 0.212 284 / 0.85);
  outline-offset: 2px;
}
.cl-box {
  outline: 1px solid oklch(0.588 0.212 284 / 0.85);
  outline-offset: 2px;
  border-radius: 2px;
}

.cl-btag {
  position: absolute;
  font-family: var(--font-mono); font-size: max(8.5px, 1.75cqw); font-weight: 500;
  line-height: 1; white-space: nowrap;
  padding: 0.55em 0.7em;
  border-radius: var(--radius-xs);
  color: #fff;
  transform: translateY(-100%) translateY(-5px);
}
.cl-btag--violet { background: var(--v-700); }
.cl-btag--clay   { background: var(--c-700); }
.cl-btag--below  { transform: translateY(5px); }
.cl-btag--side   { transform: translateX(6px); }

/* Two tags sit in the gutter above and below the card, where they can
   never land on the design's own text. The four inner ones ride
   beside the element they name and are dropped on narrow screens. */
.cl-btag--above { left: 0; top: 0; }
.cl-btag--frame { left: 0; top: 100%; }
.cl-btag--plan  { left: 24.5%; top: 7.65%; }
.cl-btag--price { left: 54.8%; top: 20.6%; }
.cl-btag--feats { left: 64.5%; top: 49.4%; }
.cl-btag--cta   { left: 5%;    top: 92.3%; }

.cl-seamline {
  position: absolute; top: 0; bottom: -3%; left: 96%;
  width: 2px; margin-left: -1px;
  background: linear-gradient(to bottom, var(--c-500), var(--v-500));
}
/* The same diamond that marks the handoff on the journey rail below,
   so the two devices are visibly one idea. It rides the top gutter,
   clear of the design underneath. */
.cl-seamline::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 1.5px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--c-500), var(--v-500));
}

/* The loop. Timing lives per keyframe so the sweep, the hold and the
   return each get their own curve. The two holds are what make it
   readable rather than restless. All three animations share one
   duration and one set of keyframe stops, so they stay locked. */
@keyframes cl-nodes {
  0%,  8%   { clip-path: inset(0 0 0 96%); animation-timing-function: cubic-bezier(0.16, 1, 0.30, 1); }
  36%       { clip-path: inset(0 0 0 2%);  animation-timing-function: linear; }
  64%       { clip-path: inset(0 0 0 2%);  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  82%, 100% { clip-path: inset(0 0 0 96%); }
}
@keyframes cl-flat {
  0%,  8%   { clip-path: inset(0 4% 0 0);  animation-timing-function: cubic-bezier(0.16, 1, 0.30, 1); }
  36%       { clip-path: inset(0 98% 0 0); animation-timing-function: linear; }
  64%       { clip-path: inset(0 98% 0 0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  82%, 100% { clip-path: inset(0 4% 0 0); }
}
@keyframes cl-seam {
  0%,  8%   { left: 96%; animation-timing-function: cubic-bezier(0.16, 1, 0.30, 1); }
  36%       { left: 2%;  animation-timing-function: linear; }
  64%       { left: 2%;  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  82%, 100% { left: 96%; }
}
.cl-anno--flat  { animation: cl-flat  11s infinite both; }
.cl-anno--nodes { animation: cl-nodes 11s infinite both; }
.cl-seamline    { animation: cl-seam  11s infinite both; }

/* Held open at the midpoint: the information survives, the movement
   does not. Both readings are on screen at once. */
@media (prefers-reduced-motion: reduce) {
  .cl-anno--flat  { animation: none; clip-path: inset(0 50% 0 0); }
  .cl-anno--nodes { animation: none; clip-path: inset(0 0 0 50%); }
  .cl-seamline    { animation: none; left: 50%; }
}

/* The legend teaches the page's colour code once, under the object it
   describes, and never repeats it. */
.cl-legend {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-6);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); text-align: center;
}
.cl-key { display: inline-flex; align-items: center; gap: 7px; }
.cl-key::before { content: ""; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.cl-key--clay::before   { background: var(--c-500); }
.cl-key--violet::before { background: var(--v-500); }
.cl-legend i { font-style: normal; color: var(--ink-4); }

/* ═══════════════════ The layers-panel comparison ══════════════════
   Two real panels, one row against nine. The emptiness on the left is
   the argument, so it is drawn rather than described. */

.cl-panel {
  display: flex; flex-direction: column;
  /* Half a step above the page ground, derived rather than written
     out, so it follows the ramp instead of drifting off it. */
  background: color-mix(in oklab, var(--void), var(--canvas));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cl-panel--flat  { border-color: var(--c-edge); }
.cl-panel--nodes { border-color: var(--v-edge); }

.cl-panel__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
}
.cl-panel__bar b {
  margin-left: auto; font-weight: 500;
  text-transform: none; letter-spacing: 0.01em;
}
.cl-panel--flat  .cl-panel__bar b    { color: var(--c-300); }
.cl-panel--nodes .cl-panel__bar b    { color: var(--v-300); }
.cl-panel--flat  .cl-panel__bar .lico { color: var(--c-400); }
.cl-panel--nodes .cl-panel__bar .lico { color: var(--v-400); }

.cl-tree {
  list-style: none; margin: 0; padding: var(--space-3) var(--space-2);
  display: flex; flex-direction: column; gap: 1px;
}
.cl-tree li {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 24px;
  padding: 4px var(--space-2);
  padding-left: calc(var(--space-2) + var(--lvl, 0) * 14px);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em;
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-panel--flat  .cl-tree .lico { color: var(--c-400); }
.cl-panel--nodes .cl-tree .lico { color: var(--v-400); }

.cl-empty {
  flex: 1;
  display: grid; place-items: center;
  min-height: 96px; padding: var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--ink-3);
  border-top: 1px dashed var(--line);
  margin: 0 var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
}

.cl-panel__foot {
  margin-top: auto;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm); color: var(--ink-3);
}

/* ═══════════════════ The journey rail ═════════════════════════════
   A genuine ordered sequence, so it is numbered and connected. The
   rail is clay while the work happens in Claude, violet once it
   happens in Figma, and it crossfades across the one node where the
   file changes hands. That node is the whole point of the page. */

.cl-rail {
  list-style: none; margin: 0; padding: 0;
  counter-reset: st;
  /* The prose inside runs to a reading measure, so at the full 1240
     content width every stage left ~600px of dead canvas to its
     right. Narrowing the rail closes that without cramping the prompt
     block, which is the one child that wants room. */
  max-width: 64rem;
}

.cl-stage {
  position: relative;
  padding-left: 60px;
  padding-bottom: var(--space-12);
  /* The rail rides a background-image rather than ::before. Each stage
     carries data-xn, X-ray paints its node badge on ::after, and the
     number marker owns ::before, so the line needs the third slot. */
  background-repeat: no-repeat;
  background-position: 15px 36px;
  background-size: 2px calc(100% - 36px);
}
.cl-stage:last-child { padding-bottom: 0; }

.cl-stage--clay   { background-image: linear-gradient(var(--c-edge), var(--c-edge)); }
.cl-stage--violet { background-image: linear-gradient(var(--v-edge), var(--v-edge)); }
.cl-stage--violet:last-child {
  background-image: linear-gradient(var(--v-edge), transparent);
}

.cl-stage--clay::before, .cl-stage--violet::before {
  content: counter(st, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 500; line-height: 1;
}
.cl-stage--clay   { counter-increment: st; }
.cl-stage--violet { counter-increment: st; }
.cl-stage--clay::before {
  color: var(--c-300); background: var(--c-ghost);
  box-shadow: inset 0 0 0 1px var(--c-edge);
}
.cl-stage--violet::before {
  color: var(--v-200); background: var(--v-ghost);
  box-shadow: inset 0 0 0 1px var(--v-edge);
}

/* The handoff. The only place on the site where two accents touch. */
.cl-stage--seam {
  padding-bottom: var(--space-11);
  background-position: 15px 0;
  background-size: 2px 100%;
  background-image: linear-gradient(var(--c-500), var(--v-500) 62px, var(--v-edge) 62px);
}
.cl-stage--seam::before {
  content: "";
  position: absolute; left: 10px; top: 12px;
  width: 12px; height: 12px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--c-500), var(--v-500));
}
.cl-handoff {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  min-height: 32px;
}
.cl-handoff span {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 6px var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--line-2);
  background: linear-gradient(90deg, var(--c-ghost), var(--v-ghost));
  color: var(--ink-2);
}
.cl-handoff i {
  font-style: normal; font-size: var(--text-sm); color: var(--ink-3);
}

.cl-stage__body {
  display: flex; flex-direction: column; gap: var(--space-4);
  max-width: 58rem;
}
.cl-stage__body h3 {
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
  font-weight: 400; line-height: 1.15;
  letter-spacing: -0.038em;
}
.cl-stage__body > p { color: var(--ink-3); max-width: var(--measure); }
.cl-stage__body > p b { color: var(--ink-2); font-weight: 500; }
.cl-stage__body > .caption { max-width: var(--measure); }
.cl-stage__body > * + * { margin-top: 0; }

.cl-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
  max-width: var(--measure);
}
.cl-list li {
  position: relative; padding-left: var(--space-6);
  font-size: var(--text-sm); color: var(--ink-3);
}
.cl-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-400);
}
.cl-list b { color: var(--ink-2); font-weight: 500; }

.cl-lead-in {
  margin-top: var(--space-4);
  color: var(--ink-2); font-weight: 400;
}

/* ── The export prompt ────────────────────────────────────────────
   Bordered clay, because it is a thing you hand to Claude. Wrapped
   rather than scrolled: a prompt you cannot read in one glance is a
   prompt nobody checks before pasting. */

.cl-prompt {
  position: relative;
  background: var(--sunken);
  border: 1px solid var(--c-edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 44px -20px oklch(0.665 0.125 40 / 0.55);
}
.cl-prompt__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: oklch(0.665 0.125 40 / 0.10);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--c-300);
}
.cl-prompt__bar .copy { position: static; margin-left: auto; }
.cl-prompt__body { padding: var(--space-5) var(--space-6); }
.cl-prompt pre { margin: 0; }
.cl-prompt code {
  display: block;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.9;
  letter-spacing: var(--tracking-mono);
  color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: break-word;
}

/* ── Why each constraint is in there ─────────────────────────────── */

.cl-rules { margin: 0; border-top: 1px solid var(--line); }
.cl-rule {
  display: grid; gap: var(--space-2) var(--space-8);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) {
  .cl-rule { grid-template-columns: 11rem 1fr; align-items: start; }
}
/* Six stacked rows ran to 1244px, nearly half the section. As a
   two-column reference it halves that and scans better: this is a
   lookup table, not a narrative. */
@media (min-width: 1080px) {
  .cl-rules {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: var(--space-9);
    border-top: 0;
  }
  .cl-rule { grid-template-columns: 1fr; gap: 6px; padding: var(--space-4) 0; }
  .cl-rules > .cl-rule:nth-child(-n+2) { border-top: 1px solid var(--line); }
}
.cl-rule dt {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono); line-height: 1.6;
  color: var(--c-300);
}
.p-claude .cl-rule dt code {
  background: var(--c-ghost);
  border-color: var(--c-edge);
  color: var(--c-300);
}
.cl-rule dd {
  margin: 0; font-size: var(--text-sm); line-height: 1.6;
  color: var(--ink-3); max-width: 52ch;
}

/* ── What arrives, as a property readout ──────────────────────────── */

.cl-props { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cl-props span {
  display: inline-flex; align-items: center; min-height: 26px;
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--v-edge);
  background: oklch(0.588 0.212 284 / 0.1);
  color: var(--v-200);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500;
}

/* ═══════════════════ Why it sometimes will not render ═════════════
   The causes sit on the Claude side, so they are ruled in clay. The
   limit itself is the sandbox, so the notice below stays amber, the
   way every limit on this site is amber. */

.cl-symptoms {
  display: grid; gap: var(--space-7);
  margin-bottom: var(--space-10);
}
@media (min-width: 880px) {
  .cl-symptoms { grid-template-columns: 1.05fr 1.15fr 1fr; gap: var(--space-8); }
}
.cl-symptoms > * { min-width: 0; }
.cl-symptom {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-top: var(--space-5);
  /* Clay, because the cause is on the Claude side, but held back from
     the 0.55 it used to run at: on the quieter ground these three
     rules were reading as orange stripes rather than as a colour code
     the page has already taught you. */
  border-top: 1px solid oklch(0.665 0.125 40 / 0.40);
}
.cl-symptom h3 { font-size: var(--text-md); font-weight: 500; }
.cl-symptom p { font-size: var(--text-sm); color: var(--ink-3); }

.cl-fix p { font-size: var(--text-md); color: var(--ink-3); }
.cl-fix p b { color: var(--ink-2); font-weight: 500; }
.cl-fix .caption { font-size: var(--text-xs); color: var(--ink-4); }

/* ═══════════════════ Install ══════════════════════════════════════ */

/* The prompt is a Claude-side object, so its button is clay rather
   than the violet used for everything tofig does. */
.cl-again { margin-top: var(--space-5); }
.p-claude .copy--static {
  position: static;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  width: 100%; min-height: 40px;
  padding: 10px var(--space-4);
  font-size: var(--text-xs);
  background: var(--c-ghost);
  border-color: var(--c-edge);
  color: var(--c-300);
}
.p-claude .copy--static:hover {
  background: oklch(0.665 0.125 40 / 0.22);
  border-color: var(--c-500);
  color: #fff;
}
/* White clears AA on c-700 at 6.39:1; on c-600 it lands at 4.41 and
   would miss it, so the confirmed state uses the darker step. */
.p-claude .copy--static[data-copied="true"] {
  background: var(--c-700); border-color: var(--c-500); color: #fff;
}

/* ═══════════════════ X-ray ════════════════════════════════════════
   The page strips its own render the same way the home page does:
   paper to wireframe, fills to violet ghost, text left readable. */

html.xray .p-claude .cl-card,
html.xray .p-claude .cl-panel,
html.xray .p-claude .cl-prompt {
  background: oklch(0.588 0.212 284 / 0.05) !important;
  border-color: oklch(0.588 0.212 284 / 0.4) !important;
  box-shadow: none !important;
}
/* The warm cast is a render, and X-ray strips renders. The dashed
   clay bound stays: it is a measurement, which is the one thing the
   mode keeps. */
html.xray .p-claude .cl-overlay--flat { background: none; }
html.xray .p-claude .cl-chip,
html.xray .p-claude .cl-el--cta,
html.xray .p-claude .cl-el--rule,
html.xray .p-claude .cl-dot {
  background: oklch(0.588 0.212 284 / 0.18) !important;
  color: var(--v-200) !important;
}
html.xray .p-claude .cl-el--price b,
html.xray .p-claude .cl-el--price i,
html.xray .p-claude .cl-feat { color: var(--ink-2) !important; }
html.xray .p-claude .cl-prompt__bar { background: transparent; }

/* ═══════════════════ Responsive ═══════════════════════════════════ */

@media (max-width: 820px) {
  .p-claude .cl-hero { padding-block: var(--space-10) var(--space-11); }
  .cl-spec { margin-top: var(--space-9); }
}

/* Below this width there is no room beside the design for four node
   names, and crowding them in put mono labels on top of the card's own
   type. The plate goes taller, the card takes a real gutter above and
   below, and the annotation drops to the two names that carry the
   argument: one image on the left, a frame on the right. The five
   boxes stay, so "one box" against "a box per element" still reads. */
@media (max-width: 560px) {
  .cl-field { aspect-ratio: 500 / 450; }
  .cl-card, .cl-overlay { left: 4%; top: 12%; width: 92%; height: 70%; }
  .cl-btag--inner { display: none; }
  .cl-btag { font-size: max(9px, 2.4cqw); }
  /* With only two names left, put one on each side of the seam, so the
     reduced-motion still frame carries one of each rather than two
     clay labels and no violet one. */
  .cl-btag--frame { left: auto; right: 0; }
  .cl-seamline { bottom: -2%; }
  /* The outlines carry more of the comparison now that four of the six
     names are gone, so give them a little more presence. */
  .cl-anno--nodes .cl-box { outline-width: 1.5px; }
}

@media (max-width: 620px) {
  .cl-stage { padding-left: 44px; background-position: 13px 32px; }
  .cl-stage--clay::before, .cl-stage--violet::before { width: 28px; height: 28px; }
  .cl-stage--seam { background-position: 13px 0; }
  .cl-stage--seam::before { left: 8px; top: 10px; width: 11px; height: 11px; }
  .cl-prompt__body { padding: var(--space-4); }
  .cl-prompt code { font-size: 11.5px; line-height: 1.8; }
}


/* ═══════════════════ Ember ground ═════════════════════════════════
   The page is warm because the journey starts warm. Rather than
   dropping orange accents onto the standard violet-black, the whole
   ground shifts to clay's side of the wheel: every tinted neutral on
   this page rides 38-58 instead of violet's 288.

   TINT INTENSITY IS A PERCENTAGE OF THE GAMUT, NOT A CHROMA NUMBER.
   The first version of this ramp copied violet's chroma figures
   across to hue 38 and the page came out brown, because the sRGB
   chroma ceiling is not the same at every hue: at L 0.20 it is 0.118
   at violet's 288 and only 0.063 at clay's 40. The same 0.036
   therefore spends 21% of the budget on the home page and 50% here,
   and 50% is well past the point — around 30% — where a warm dark
   stops being warm and starts being brown. Measured, the old ramp ran
   at 39-50% of ceiling at every step while the home page runs at
   14-23%. That gap is what made the two pages look like different
   designs rather than two rooms in one.

   So this ramp is solved backwards: take the home page's percentage
   of ceiling at each step and spend the same share of clay's much
   smaller budget. The numbers come out roughly half of violet's and
   the two pages finally read as equally tinted.

   Hue carries a slight torsion, 38 at the ground opening to 56 at the
   dots. Brown lives at hue 40-60 in the L 0.25-0.50 band, which is
   exactly where hairlines and grid dots sit, and rotating those steps
   toward tan walks them out of it. It is invisible as a hue at this
   chroma; it is only insurance.

   The other half of the fix is that warmth is carried by *light*
   rather than by pigment. The ground is a warm near-black. The ember
   is the atmospheric field lying on top of it.

   Measured on the new ground: ink 18.4:1, ink-2 11.1:1, ink-3 6.2:1,
   ink-4 5.1:1, c-500 6.2:1. All clear AA, all better than before. */
.p-claude {
  --void:      oklch(0.145 0.013 38);
  --canvas:    oklch(0.196 0.014 42);
  --surface:   oklch(0.230 0.014 45);
  --surface-2: oklch(0.276 0.014 49);
  --line:      oklch(0.314 0.013 52);
  --line-2:    oklch(0.398 0.013 58);
  --dot:       oklch(0.380 0.018 56);

  /* The grounds under the page plane travel with it, so the code
     blocks, the terminal and the deck stages stop being cold violet
     rectangles punched into a warm page. Sunken rather than raised,
     the way GitHub treats an inset surface: same hue as the page, one
     step darker. */
  --sunken:     oklch(0.110 0.013 36);
  --sunken-bar: oklch(0.152 0.012 39);
  --stage:      oklch(0.122 0.014 37);
  --scrim:      oklch(0.145 0.013 38);

  /* Bands and their rules. A hard 1px line across 1440px reads as a
     stripe laid over the page; these fade out before they reach
     either edge, so a section boundary reads as a horizon. */
  --band:      oklch(0.196 0.014 42 / 0.62);
  --band-rule: oklch(0.665 0.125 40 / 0.22);
}

/* The canvas behind the canvas. Rubber-band past either end of the
   page on macOS or iOS and the root colour is what shows; the cold
   violet-black default flashing there is the tell that the page is
   only warm on the surface. */
html:has(> body.p-claude) { background: oklch(0.122 0.013 38); }

/* ── The atmospheric field ─────────────────────────────────────────
   This is the page, not a decoration on it, so it lives in the body's
   own background rather than in a pseudo-element. That is not a
   stylistic preference: the root element carries an opaque colour, so
   the body's background is painted by the body box instead of being
   propagated to the canvas, and a negative-z-index pseudo-element
   therefore paints *behind* it. The previous field and its grain were
   both invisible for exactly that reason, which is most of why this
   page read as a flat brown slab.

   Because the layers belong to the body box they are measured against
   the whole document rather than the viewport, and that is the point.
   Clay pools where the work starts, drains through the middle, and
   violet gathers where the file lands. The crossover sits at 60% of
   the page, which is where the handoff node falls at every width from
   390 to 1920 — measured, not guessed. Scrolling the page performs
   the transformation the page is about, one screen at a time, and
   because nothing is fixed there is no moment where the light and the
   content disagree about where they are.

   Top layer is grain, soft-lit at low strength. Its job is dither: a
   gradient this shallow spread over seven thousand pixels bands
   badly on a dark panel without it. */
.p-claude {
  background-color: var(--void);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"),
    radial-gradient(74% 12% at  3%  0%, oklch(0.665 0.125 40 / 0.105), transparent 70%),
    radial-gradient(48%  8% at 99%  5%, oklch(0.720 0.120 41 / 0.050), transparent 68%),
    radial-gradient(58%  9% at 24% 27%, oklch(0.665 0.125 40 / 0.045), transparent 72%),
    radial-gradient(52%  7% at 90% 47%, oklch(0.665 0.125 40 / 0.032), transparent 72%),
    radial-gradient(56%  9% at  6% 78%, oklch(0.588 0.212 284 / 0.075), transparent 72%),
    radial-gradient(120% 18% at 52% 93%, oklch(0.588 0.212 284 / 0.075), transparent 74%),
    linear-gradient(180deg,
      oklch(0.665 0.125 40 / 0.042)   0%,
      oklch(0.665 0.125 40 / 0.028)  24%,
      oklch(0.665 0.125 40 / 0.010)  44%,
      oklch(0.665 0.125 40 / 0)      54%,
      oklch(0.588 0.212 284 / 0)     58%,
      oklch(0.588 0.212 284 / 0.032) 74%,
      oklch(0.588 0.212 284 / 0.085) 89%,
      /* the install is the arrival, so the light peaks there and eases
         back for the footer rather than running brightest off the
         bottom edge of the document */
      oklch(0.588 0.212 284 / 0.088) 94%,
      oklch(0.588 0.212 284 / 0.048) 100%);
  background-blend-mode:
    soft-light, normal, normal, normal, normal, normal, normal, normal;
}

/* Sections sit on the field rather than hiding it. */
.p-claude main > section { background-color: transparent; }
.p-claude .canvas-ground { background-color: transparent; }

/* ── Bands ─────────────────────────────────────────────────────────
   The rhythm stays — grid, band, open, open, band, grid — but the
   band no longer arrives as a rectangle. Its tint feathers in over a
   tenth of its own height at each end and its rules fade before the
   page edge, so the boundary is a change of depth rather than a line
   drawn across the screen. */
.p-claude .band {
  position: relative;
  border-block: 0;
  background:
    linear-gradient(180deg,
      transparent 0,
      var(--band) 11%,
      var(--band) 89%,
      transparent 100%);
}
.p-claude .band::before,
.p-claude .foot::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--band-rule) 22%,
                    var(--band-rule) 78%, transparent) top center / 100% 1px no-repeat;
}
.p-claude .band::before {
  background:
    linear-gradient(90deg, transparent, var(--band-rule) 22%,
                    var(--band-rule) 78%, transparent) top center / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--band-rule) 22%,
                    var(--band-rule) 78%, transparent) bottom center / 100% 1px no-repeat;
}

/* Even the section rules take a side. The problem band opens before
   the handoff so its two rules are clay; the renderer band and the
   footer sit after it, and a warm line drawn across a violet field is
   the same mismatch at one pixel that the cold code blocks were at
   full size. */
.p-claude #renderer,
.p-claude .foot { --band-rule: oklch(0.588 0.212 284 / 0.24); }

/* The footer was the one opaque slab left: painted in --void it cut
   the field off at a hard edge just as the violet reached full
   strength. It is the end of the journey, so it should be the most
   violet thing on the page, not the only place the page stops. */
.p-claude .foot {
  position: relative;
  background: transparent;
  border-top-color: transparent;
}

/* The last canvas is Figma's, so its grid is violet. The first one,
   under the hero, keeps the page's clay --dot. Same device at both
   ends of the page, the colour saying which side of the handoff you
   are standing on. */
.p-claude #install { --dot: oklch(0.375 0.042 288); }

/* No wash behind the stage text. A gradient laid on an unbounded
   block has hard edges wherever the block ends, so it read as a
   rectangle of slightly different dark floating behind the copy
   rather than as light on the page. The rail already carries the
   temperature: the numbered node is clay for the two steps that
   happen in the conversation and violet for the two in Figma, and the
   connector changes colour at the handoff. That is the signal; the
   wash was only ever restating it, badly. */

.p-claude .cl-hero .display em { text-shadow: 0 0 48px oklch(0.665 0.125 40 / 0.35); }

/* X-ray is the measurement mode and measurement is violet, so the
   page drops its clay skin when you press X. `html.xray body` already
   sets the whole background shorthand, which clears the field with
   it. The rest is the chrome: the nav wash and the sunken grounds go
   back to the inspection hue, and the warm band rules come off, so
   the whole surface under the wireframe is one temperature.

   `unset` on a custom property means inherit, and these are declared
   on :root, so each one lands back on the shared default without a
   second copy of the value here to fall out of step. */
html.xray .p-claude {
  --scrim: unset; --sunken: unset; --sunken-bar: unset; --stage: unset;
}
html.xray .p-claude .band::before,
html.xray .p-claude .foot::before { display: none; }


/* This page is a walkthrough, so it is long by nature. Tightening the
   section rhythm one step buys back most of a screen without making
   anything feel cramped. */
.p-claude main > section { padding-block: var(--space-11); }
.p-claude main > section.roomy { padding-block: var(--space-12); }
.p-claude #journey .head { margin-bottom: var(--space-8); }

/* The reassurance line under the hero lede. Quieter than the lede,
   louder than a caption: it is an aside, not fine print. */
.p-claude .cl-normal {
  max-width: 46ch;
  margin-top: var(--space-5);
  padding-left: var(--space-5);
  border-left: 1px solid var(--c-edge);
  font-size: var(--text-md); font-weight: 300; line-height: 1.6;
  color: var(--ink-3);
}

/* The deck section borrows the landing page's two stages, and the
   pair is the handoff in miniature: the file Claude wrote on the
   left, the slides Figma opens on the right. Both stages now take the
   page's warm ground from --stage, so the difference between them is
   carried where it means something — the chip, the hover edge, and
   the accent bar on the little slides. */
.p-claude .cl-chip--clay {
  background: var(--c-ghost);
  border-color: var(--c-edge);
  color: var(--c-300);
}
.p-claude .dest--claude:hover,
.p-claude .dest--claude:focus-within {
  border-color: var(--c-edge);
  background: oklch(0.665 0.125 40 / 0.05);
}
.p-claude .dest--claude .sld__bar--t { background: oklch(0.665 0.125 40 / 0.38); }