/* ==========================================================================
   pantry-files.css — PantryPal's Build chapter, with its files open
   (js/pantry-files.js).

   Two things: the cards the chapter's two pipelines are made of, each a
   real file with a little of what it draws on its face; and the viewer a
   card opens, the repository at that file, its tree, its drawing and its
   code side by side.

   A stylesheet of its own, linked only from pantrypal.html, rather than
   more of case.css: nothing here is any other case's, and the viewer is
   a tool's UI more than the page's, set in fixed pixels where the page
   is set in frame units, so it reads the same at any window's size.

   The code is coloured as Xcode's Default (Dark) colours it, because it
   is the code a reader would meet there; the drawings stand on the app's
   own butter and ink, because they are the app.
   ========================================================================== */

/* ---- the cards ----
   Each step is a card: a picture of what its file does, and under it the
   step's name and the file's. The wire and its spark run behind the
   pictures' middles, so they still show only in the gaps between cards.
   The cards are only pictures; one button in the chapter's head opens the
   codebase (each card was a button once, and all eight opened the same
   viewer). */
/* tighter than the text pipelines were, so the chapter's head and both
   rows of files stand in one 1440 × 900 window (at the text cards' air
   the files ran 47 pixels past it) */
.cs-tile.cs-files { gap: calc(20 * var(--u)); padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
.cs-files .cs-pipe-head { margin-bottom: calc(10 * var(--u)); }
/* the dashed wire stays, still; the spark that ran along it, round and
   round behind the cards, is gone: under the pictures it read as one
   more thing moving in a chapter already full of them */
.cs-files .cs-pipe-steps::before { top: calc(54 * var(--u)); }
.cs-files .cs-pipe-steps::after { display: none; animation: none; }
/* Four to a row in any column a desktop gives, wire and all: case.css
   halves the row under 860, because a step's drawing stood beside its
   name and four of those could not fit; a picture stands over its name,
   so four do, and each pipeline is one row again. Two to a row only in a
   phone's lane. */
@container lane (min-width: 600px) {
  .cs-files .cs-pipe-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
  .cs-files .cs-pipe-steps::before { display: block; }
  /* how it looks is three steps (Figma, the tokens, the components), so
     its cards are a third of the row; their pictures keep the four-across
     row's height, so the two rows' pictures line up, and stand whole on
     the ground each was drawn on (--ground, sampled off the picture) */
  .cs-files .cs-pipe-steps:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-files .cs-pipe-steps:has(> li:nth-child(3):last-child) .cs-file-peek {
    aspect-ratio: auto;
    height: calc(((100cqw - 84 * var(--u)) / 4 - 16 * var(--u)) * 9 / 16);
    background: var(--ground, #fff8ec);
  }
  .cs-files .cs-pipe-steps:has(> li:nth-child(3):last-child) .cs-file-peek img { object-fit: contain; }
}
.cs-files .cs-pipe-steps li.cs-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: stretch;
  gap: calc(4 * var(--u));
  padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(11 * var(--u));
  border-radius: calc(20 * var(--u));
}
.cs-file > b { padding: calc(6 * var(--u)) calc(6 * var(--u)) 0; }
.cs-files .cs-pipe-steps .cs-file-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 calc(6 * var(--u));
  min-width: 0;
  padding: 0 calc(6 * var(--u));
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--tile-ink);
}
.cs-file-name code {
  /* whole, on a line of its own if it must be, the count wrapping under
     it (shrunk to fit beside the count, PPPrimaryButton.swift broke in
     the middle of "swift") */
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  font-size: max(10.5px, calc(11.5 * var(--u)));
  letter-spacing: -0.02em;
  color: var(--deep);
}

/* the one way in, under the chapter's deck, where the head had room: the
   words run on beside it through a fourth row, so the head is no taller
   for it unless the words are shorter than the name, the deck and the
   button together */
.cs-files-open span {
  margin-left: calc(2 * var(--u));
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: 99px;
  background: rgb(255 255 255 / 0.18);
  font-size: var(--t-micro);
}
.cs-chapter > .cs-files-open { justify-self: start; margin-top: var(--air-head); }
@container lane (min-width: 660px) { .cs-chapter > .cs-files-open { margin-top: calc(10 * var(--u)); } }
@container lane (min-width: 660px) {
  .cs-chapter:has(> .cs-files-open) { grid-template-rows: auto auto auto 1fr; }
  .cs-chapter:has(> .cs-files-open) > .cs-text { grid-row: 2 / span 3; }
  .cs-chapter > .cs-files-open { grid-column: 1; grid-row: 4; align-self: end; }
}

/* the pictures: each a scene of what its file does, drawn by Gemini in
   the app's hand (tools/build-art.mjs) on a pale ground of its own, and
   framed as the page frames a screenshot. (They were little renders of
   each file, swatches, a request line, a pair of buttons, which read as
   a legend more than a picture.) */
.cs-file-peek {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(13 * var(--u));
  background: #fff8ec;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--deep) 12%, transparent);
}
.cs-file-peek img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- 3.1: the contract, in three steps ----
   What a style guide written for a model does, told left to right: the
   rules as the file writes them, each with its key and a small drawing of
   itself; the prompt those rules write for one food, every phrase marked
   in the colour of the rule it came from; and what Gemini drew from it,
   on the app's own plate. Pointing at a rule lights its phrases and quiets
   the rest, and the reverse (js/pantry-files.js). (It was the file open as
   an editor opens it: true, and hard to read as a story.) */
.cs-guide [data-rule='sticker'] { --c: #ffe08a; }
.cs-guide [data-rule='ink'] { --c: #ddd5fb; }
.cs-guide [data-rule='colour'] { --c: #ffc6bc; }
.cs-guide [data-rule='light'] { --c: #c6ecf7; }
.cs-guide [data-rule='pose'] { --c: #d4f5be; }
.cs-guide [data-rule='ground'] { --c: #eadfcb; }
.cs-guide [data-rule='never'] { --c: #fbd0e3; }
.cs-guide [data-rule='energy'] { --c: #c8f1e4; }
.cs-tile.cs-guide { display: grid; gap: calc(20 * var(--u)); padding: calc(24 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u)); }
.cs-tile.cs-guide > * + * { margin-top: 0; }
.cs-guide-flow {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr) minmax(0, 0.64fr);
  gap: calc(30 * var(--u));
  list-style: none;
}
.cs-guide-step { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(10 * var(--u)); min-width: 0; }
/* one step into the next: an arrow in the gap, level with the cards */
.cs-guide-step + .cs-guide-step::before {
  content: '';
  position: absolute;
  left: calc(-25 * var(--u));
  top: calc(50% + 14 * var(--u));
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  translate: 0 -50%;
  background: var(--deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cs-guide-label { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: var(--t-small); line-height: 1.2; color: var(--tile-ink); }
.cs-guide-label i {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50%;
  background: var(--deep);
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 600;
  color: #fff;
}
.cs-guide-card {
  min-width: 0;
  overflow: hidden;
  border-radius: calc(18 * var(--u));
  background: #fff;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--deep) 10%, transparent), 0 calc(16 * var(--u)) calc(30 * var(--u)) calc(-22 * var(--u)) color-mix(in oklab, var(--deep) 60%, transparent);
}

/* 1, the rules: the file's tab, and its rules a row each */
.cs-guide-tab {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  padding: calc(9 * var(--u)) calc(14 * var(--u));
  border-bottom: 1px solid rgb(30 30 30 / 0.07);
  background: #faf7f0;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  font-size: max(11px, calc(11.5 * var(--u)));
  color: #444343;
}
.cs-guide-tab span { padding: 1px 5px; border-radius: 4px; background: #fff1cc; font-size: 9px; font-weight: 700; color: #a26a00; }
.cs-guide-rules { display: grid; gap: calc(1 * var(--u)); padding: calc(6 * var(--u)); list-style: none; }
.cs-guide-rules li {
  display: grid;
  grid-template-columns: calc(30 * var(--u)) minmax(0, 1fr);
  column-gap: calc(10 * var(--u));
  align-items: center;
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(10 * var(--u));
  cursor: default;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.cs-guide-rules li:focus-visible { outline: 2px solid var(--deep); outline-offset: -2px; }
.cs-rule-pic { grid-row: 1 / 3; display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--c); }
.cs-rule-pic svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.cs-guide-rules b { font-weight: 500; font-size: max(12.5px, calc(13.5 * var(--u))); line-height: 1.25; color: #1e1e1e; }
.cs-guide-rules code { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: max(10px, calc(10.5 * var(--u))); line-height: 1.3; color: #8a8989; }
.cs-guide-rules li.is-on { background: color-mix(in srgb, var(--c) 50%, transparent); }
.cs-guide[data-on] .cs-guide-rules li:not(.is-on) { opacity: 0.42; }

/* 2, the prompt: every phrase marked in its rule's colour, the food in
   the template's slot set as the variable it is */
.cs-guide-card.is-prompt { display: grid; align-content: start; gap: calc(9 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); }
.cs-guide-model {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(11 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: 99px;
  background: linear-gradient(100deg, #e3ecff, #efe4ff 55%, #ffe4ef);
  font-size: var(--t-micro);
  line-height: 1.2;
  color: #3d3a8c;
}
.cs-guide-model svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: #6655d6; }
.cs-guide-text { font-size: max(12.5px, calc(13.5 * var(--u))); line-height: 1.62; color: #444343; text-wrap: pretty; }
.cs-guide-text mark {
  padding: 0.08em 0.16em;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--c) 80%, transparent);
  color: #1e1e1e;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background 0.2s ease, color 0.2s ease;
}
.cs-guide[data-on] .cs-guide-text mark:not(.is-on) { background: transparent; color: #a9a8a8; }
.cs-guide-text mark.is-on { background: var(--c); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c), #000 18%); }
.cs-guide-text.is-avoid { font-size: max(11.5px, calc(12 * var(--u))); line-height: 1.55; }
.cs-guide-food {
  display: inline-block;
  padding: 0 0.4em;
  border-radius: 0.35em;
  background: #1f1f24;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  line-height: 1.5;
  color: #ffd67e;
}

/* 3, the drawing: on the app's coral plate, over its butter sunburst */
.cs-guide-card.is-plate {
  display: grid;
  place-items: center;
  align-content: center;
  gap: calc(12 * var(--u));
  padding: calc(18 * var(--u)) calc(10 * var(--u));
  background:
    radial-gradient(circle at 50% 44%, transparent 0 38%, #ffd67e 72%),
    repeating-conic-gradient(from 0deg at 50% 44%, #ffe7a8 0 8deg, #ffd67e 0 16deg);
}
.cs-guide-plate {
  display: grid;
  place-items: center;
  width: calc(132 * var(--u));
  height: calc(132 * var(--u));
  border-radius: 50%;
  background: #ff7e7d;
  box-shadow: inset 0 0 0 calc(2.5 * var(--u)) #111, 0 calc(12 * var(--u)) calc(20 * var(--u)) calc(-12 * var(--u)) rgb(60 30 0 / 0.5);
}
.cs-guide-plate img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 calc(6 * var(--u)) calc(5 * var(--u)) rgb(60 20 0 / 0.3)); }
.cs-guide-card.is-plate b {
  font-family: 'PP Fugaz One', system-ui, sans-serif;
  font-weight: 400;
  font-size: max(14px, calc(17 * var(--u)));
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: calc(3.5 * var(--u)) #000;
  paint-order: stroke fill;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .cs-guide-food.is-new, .cs-guide-plate.is-new { animation: cs-guide-pop 0.5s var(--spring-pop); }
}
@keyframes cs-guide-pop { from { scale: 0.86; } }

/* the foods, under all three: one pressed goes through */
.cs-guide-foods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u)) calc(18 * var(--u));
  padding-top: calc(16 * var(--u));
  border-top: 1px dashed color-mix(in oklab, var(--deep) 22%, transparent);
}
.cs-guide-foods > p { color: var(--tile-ink); }
.cs-guide-pick { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.cs-guide-pick button {
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  cursor: pointer;
  transition: scale var(--t-pop) var(--spring-pop), box-shadow 0.2s ease;
}
.cs-guide-pick img { width: 74%; height: 74%; object-fit: contain; }
@media (hover: hover) { .cs-guide-pick button:hover { scale: 1.1; } }
.cs-guide-pick button:active { scale: 0.92; }
.cs-guide-pick button[aria-checked='true'] { box-shadow: inset 0 0 0 2px #111; }
.cs-guide-pick button:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }

/* in a narrow lane the three stand one over another, the arrows turned
   down between them */
@container lane (max-width: 680px) {
  .cs-guide-flow { grid-template-columns: minmax(0, 1fr); gap: calc(34 * var(--u)); }
  .cs-guide-step + .cs-guide-step::before { left: 50%; top: calc(-27 * var(--u)); translate: -50% 0; rotate: 90deg; }
  .cs-guide-card.is-plate { padding: 22px 10px; }
  .cs-tile.cs-guide { padding: 20px 16px; }
}

/* ==========================================================================
   the viewer
   ========================================================================== */
html.pf-open { overflow: hidden; }
.pf {
  --pf-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  --pf-ink: #1e1e1e;
  --pf-soft: #6f6e6e;
  --pf-faint: #8a8989;
  --pf-deep: #a9492a;
  --pf-butter: #ffd67e;
  --pf-code: #1f1f24;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  border: 0;
  background: transparent;
  overflow: hidden;
  color: var(--pf-ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  color-scheme: light;
}
.pf[open] { display: grid; place-items: center; }
.pf::backdrop {
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.pf-panel {
  display: grid;
  grid-template:
    'bar bar bar' auto
    'tree view code' minmax(0, 1fr)
    / 224px minmax(0, 1fr) minmax(0, 1.1fr);
  width: min(1380px, 100%);
  height: min(900px, 100%);
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(30 30 30 / 0.08), 0 50px 100px -40px rgb(30 30 30 / 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .pf[open] .pf-panel { animation: pf-in 0.5s var(--spring-settle, ease-out); }
  .pf[open]::backdrop { animation: pf-fade 0.3s ease; }
}
@keyframes pf-in { from { opacity: 0; translate: 0 18px; scale: 0.985; } }
@keyframes pf-fade { from { opacity: 0; } }

/* the bar: the window's lights, where the file lives, its size, the close */
.pf-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 52px;
  padding: 0 10px 0 18px;
  border-bottom: 1px solid rgb(30 30 30 / 0.08);
}
.pf-lights { flex: none; display: inline-flex; gap: 7px; }
.pf-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.pf-lights i:nth-child(2) { background: #febc2e; }
.pf-lights i:nth-child(3) { background: #28c840; }
.pf-crumbs {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--pf-mono);
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--pf-faint);
}
.pf-crumbs::-webkit-scrollbar { display: none; }
.pf-crumbs > * + *::before { content: '/'; margin: 0 6px; color: #c9c8c8; }
.pf-crumbs b { font-weight: 600; color: var(--pf-ink); }
.pf-meta { flex: none; font-family: var(--pf-mono); font-size: 11.5px; color: var(--pf-faint); }
.pf-steps { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 99px; background: rgb(30 30 30 / 0.05); }
.pf-step { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--pf-ink); transition: background 0.2s ease; }
.pf-step:hover:not(:disabled) { background: #fff; }
.pf-step:disabled { opacity: 0.3; cursor: default; }
.pf-step svg { width: 17px; height: 17px; }
.pf-count { min-width: 58px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; color: #444343; }
.pf-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--pf-ink);
  transition: background 0.2s ease;
}
.pf-close:hover { background: rgb(30 30 30 / 0.06); }
.pf-close svg { width: 20px; height: 20px; }
.pf :focus-visible { outline: 2px solid var(--pf-ink); outline-offset: 2px; }

/* the tree, under its pane's name: what the files are for, a heading
   each, and each file by its plain name over its file name */
.pf-side {
  grid-area: tree;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-right: 1px solid rgb(30 30 30 / 0.08);
  background: #f7f6f3;
}
.pf-pane {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pf-faint);
}
.pf-side > .pf-pane { padding: 14px 18px 2px; }
.pf-tree {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 4px 8px 24px;
  /* what scrolls up under the pane's name fades rather than being cut */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12px);
  mask-image: linear-gradient(to bottom, transparent, #000 12px);
}
.pf-tree-folder { display: grid; gap: 1px; padding: 14px 10px 5px; line-height: 1.25; }
.pf-tree-folder b { font-size: 12px; font-weight: 600; color: #444343; }
.pf-tree-folder span { font-size: 11px; color: var(--pf-faint); }
.pf-tree-files { list-style: none; }
.pf-tree-file {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 9px;
  text-align: left;
  color: #444343;
  transition: background 0.15s ease;
}
.pf-tree-file > span { display: grid; min-width: 0; }
.pf-tree-file b { overflow: hidden; font-size: 13px; font-weight: 500; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.pf-tree-file code { overflow: hidden; font-family: var(--pf-mono); font-size: 10.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; color: var(--pf-faint); }
.pf-tree-file:hover { background: rgb(30 30 30 / 0.05); }
.pf-tree-file[aria-current] { background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.08), 0 4px 10px -6px rgb(30 30 30 / 0.3); color: var(--pf-ink); }
.pf-tree-file[aria-current] b { font-weight: 600; }
.pf-tree-file i, .pf-tab i {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 16px;
  padding: 0 3px;
  border-radius: 4px;
  font-family: var(--pf-mono);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}
.is-json > i { background: #fff1cc; color: #a26a00; }
.is-swift > i { background: #ffe4dc; color: #d23d1f; }
.is-ts > i { background: #dde9f8; color: #2a63a8; }
.is-sh > i { background: #e9e9e9; color: #444; }
.is-grep > i { background: #eee4ff; color: #7a3df0; }

/* the drawing, on the app's paper */
.pf-view {
  grid-area: view;
  container: pfview / inline-size;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 22px 32px;
  background-color: #fbf8f1;
  background-image: radial-gradient(rgb(30 30 30 / 0.09) 1px, transparent 1.3px);
  background-size: 16px 16px;
}
.pf-intro { display: grid; justify-items: start; gap: 6px; margin-bottom: 18px; }
.pf-where { font-size: 10.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase; color: var(--pf-deep); }
.pf-head { font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--pf-ink); text-wrap: balance; }
.pf-cap { max-width: 60ch; font-size: 14.5px; line-height: 1.5; color: #444343; text-wrap: pretty; }
.pf-try {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 12px 7px 10px;
  border-radius: 10px;
  background: rgb(255 214 126 / 0.45);
  box-shadow: inset 0 0 0 1px rgb(160 110 0 / 0.18);
  font-size: 13px;
  line-height: 1.4;
  color: #3d2c1e;
}
.pf-try b { padding: 1px 7px; border-radius: 99px; background: var(--pf-ink); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
/* on to the next file, at the foot of the drawing, as a slide ends */
.pf-onward {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 0 auto;
  padding: 10px 14px 10px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(30 30 30 / 0.1), 0 6px 14px -8px rgb(30 30 30 / 0.3);
  font-size: 13px;
  color: #444343;
  transition: background 0.2s ease, translate 0.2s ease;
}
.pf-onward[hidden] { display: none; }
.pf-onward span { color: var(--pf-faint); }
.pf-onward b { font-weight: 600; color: var(--pf-ink); }
.pf-onward i { font-style: normal; color: var(--pf-deep); }
.pf-onward:hover { background: #fffaf0; translate: 2px 0; }
.pf-label {
  margin: 18px 0 8px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pf-faint);
}
.pf-stage > * > .pf-label:first-child, .pf-stage > .pf-label:first-child { margin-top: 0; }
.pf-loading { padding: 40px 0; color: var(--pf-faint); }
/* a thing drawn from some lines: pointed at, it is ringed, and its lines lit */
.pf-stage [data-lines] { scroll-margin: 20px; transition: outline-color 0.2s ease, box-shadow 0.2s ease; outline: 2px solid transparent; outline-offset: 3px; }
.pf-stage [data-lines].is-pointed { outline-color: #e0a526; }
.pf-stage .pf-device[data-lines].is-pointed, .pf-stage .pf-dish[data-lines].is-pointed { outline-color: transparent; }

/* the code, on Xcode's dark */
.pf-code {
  grid-area: code;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: var(--pf-code);
  color: #dfdfe0;
}
.pf-code-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 14px 0 10px;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  font-family: var(--pf-mono);
  font-size: 12px;
}
.pf-tab { display: inline-flex; align-items: center; gap: 7px; min-width: 0; height: 28px; padding: 0 10px 0 6px; border-radius: 7px; background: rgb(255 255 255 / 0.07); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tab > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-lit { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; white-space: nowrap; color: var(--pf-butter); }
.pf-lit i { width: 14px; height: 10px; border-radius: 2px; background: rgb(255 214 126 / 0.3); box-shadow: inset 2px 0 0 var(--pf-butter); }
.pf-code-head .pf-pane { flex: none; color: #8a8f98; }
/* positioned, so a line's offsetTop is measured from the top of the code
   and the viewer can scroll a lit line into view (measured from the
   dialog, a lit line low in a long file was scrolled to the wrong place) */
.pf-scroll { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px 0 48px; }
.pf-lines {
  counter-reset: ln;
  list-style: none;
  font-family: var(--pf-mono);
  font-size: 12px;
  line-height: 1.62;
  tab-size: 4;
}
.pf-lines li {
  position: relative;
  counter-increment: ln;
  padding: 0 18px 0 calc(54px + var(--ind, 0) * 1ch);
  text-indent: calc(var(--ind, 0) * -1ch);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.pf-lines li::before {
  content: counter(ln);
  position: absolute;
  left: 0;
  width: 40px;
  text-align: right;
  text-indent: 0;
  color: #5c5f66;
  user-select: none;
}
.pf-lines li.is-lit { background: rgb(255 214 126 / 0.13); box-shadow: inset 3px 0 0 var(--pf-butter); }
.pf-lines li.is-lit::before { color: var(--pf-butter); }
.pf-k { color: #ff7ab2; font-weight: 600; }
.pf-s { color: #ff8170; }
.pf-n { color: #d9c97c; }
.pf-c { color: #7f8c98; }
.pf-t { color: #dabaff; }
.pf-f { color: #67b7a4; }
.pf-p { color: #9ef1dd; }
.pf-a { color: #fd8f3f; }
.pf-v { color: #9ef1dd; }
.pf-m { color: var(--pf-butter); }

/* ---- the drawings' shared parts ---- */
.pf-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.1); }
.pf-seg button { padding: 6px 12px; border-radius: 99px; font-size: 12.5px; line-height: 1.2; color: #444343; transition: background 0.2s ease, color 0.2s ease; }
.pf-seg button:hover { background: rgb(30 30 30 / 0.05); }
.pf-seg button[aria-checked='true'] { background: var(--pf-ink); color: #fff; }
.pf-fugaz { font-family: 'PP Fugaz One', system-ui, sans-serif; font-size: calc(var(--s) * 1px); line-height: 0.9; }
.pf-device {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 393px;
  padding: 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(30 30 30 / 0.1), 0 18px 30px -22px rgb(60 30 0 / 0.45);
}
.pf-device.is-butter { background: #ffd67e; }
.pf-device > .pf-label { margin: 0; color: #6b5222; }
.pf-device-note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: #444343; text-wrap: pretty; }
.pf-device .pf-device-note { margin-top: 0; color: #3d2c1e; }
.pf-device-note b { font-weight: 600; color: var(--pf-ink); }
.pf-note { margin-top: 8px; font-family: var(--pf-mono); font-size: 11.5px; line-height: 1.5; color: var(--pf-soft); }

/* the app's buttons: a two-point ink edge, radius 10, 44 tall; a press
   sinks two points and darkens a tenth, in 80ms */
.pf-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #000;
  font-family: 'PP Fugaz One', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1;
  color: #000;
  cursor: pointer;
  transition: translate 80ms ease-out;
}
.pf-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgb(0 0 0 / 0.1); opacity: 0; transition: opacity 80ms ease-out; }
.pf-btn:active { translate: 0 2px; }
.pf-btn:active::after { opacity: 1; }
.pf-btn.is-primary { background: #ff4b4b; color: #fff; font-size: 20px; }
.pf-btn.is-destructive { color: #b01919; font-size: 20px; }
.pf-btn.is-off { background: #cdcdcd; color: #5a5a5a; cursor: not-allowed; }
.pf-btn.is-off:active { translate: none; }
.pf-btn.is-off:active::after { opacity: 0; }

/* ---- Figma ---- */
.pf-figma { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 24px; align-items: start; }
.pf-figma-frame { position: relative; }
.pf-figma-frame img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 26px rgb(30 30 30 / 0.22)); }
.pf-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--pf-ink);
  box-shadow: 0 0 0 2.5px #fff, 0 4px 10px rgb(0 0 0 / 0.35);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  transition: scale 0.25s var(--spring-pop, ease), background 0.2s ease, color 0.2s ease;
}
.pf-pin.is-pointed, .pf-pin:hover { scale: 1.18; background: var(--pf-butter); color: var(--pf-ink); outline: none !important; }
.pf-figma-legend { display: grid; gap: 6px; list-style: none; }
.pf-figma-legend li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(30 30 30 / 0.07);
  cursor: default;
}
.pf-figma-legend i { grid-row: 1 / 3; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pf-ink); font-style: normal; font-size: 11px; font-weight: 700; color: #fff; }
.pf-figma-legend li.is-pointed i { background: var(--pf-butter); color: var(--pf-ink); }
.pf-figma-legend b { font-size: 13.5px; font-weight: 600; }
.pf-figma-legend span { font-family: var(--pf-mono); font-size: 11.5px; color: var(--pf-soft); }

/* ---- colors.json ---- */
.pf-swatch-group + .pf-swatch-group .pf-label { margin-top: 14px; }
.pf-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; list-style: none; }
.pf-swatch {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 6px 6px 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(30 30 30 / 0.07);
}
.pf-chip {
  height: 40px;
  margin-bottom: 4px;
  border-radius: 8px;
  background:
    linear-gradient(color-mix(in srgb, var(--c) calc(var(--a, 1) * 100%), transparent), color-mix(in srgb, var(--c) calc(var(--a, 1) * 100%), transparent)),
    repeating-conic-gradient(#e7e5e0 0 25%, #fff 0 50%) 0 0 / 10px 10px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}
/* inferred, never in Figma: the edge the system keeps for what is provisional */
.pf-swatch.is-inferred .pf-chip { box-shadow: none; outline: 1.5px dashed #1e1e1e; outline-offset: -1.5px; }
.pf-swatch b { overflow: hidden; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pf-swatch code { font-family: var(--pf-mono); font-size: 11px; color: var(--pf-soft); }
.pf-src { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 10.5px; line-height: 1.35; color: var(--pf-faint); }
.pf-swatch.is-inferred .pf-src { font-style: italic; }
.pf-drift { justify-self: start; margin-top: 3px; padding: 1px 6px; border-radius: 99px; background: #ffe4dc; font-family: var(--pf-mono); font-size: 9.5px; color: #b0381f; }

/* ---- typography.json ---- */
.pf-faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; }
.pf-face { display: grid; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.07); }
.pf-face-aa { font-size: 46px; line-height: 1.05; }
.pf-face.is-display .pf-face-aa { font-family: 'PP Fugaz One', system-ui, sans-serif; color: #ff7e7d; -webkit-text-stroke: 4px #000; paint-order: stroke fill; }
.pf-face.is-body .pf-face-aa { font-family: 'PP Faustina', Georgia, serif; font-weight: 500; }
.pf-face b { font-size: 14px; font-weight: 600; }
.pf-face span:last-child { font-size: 12px; color: var(--pf-soft); }
.pf-scale { display: grid; list-style: none; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.07); }
.pf-scale li { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 14px; }
.pf-scale li + li { border-top: 1px solid rgb(30 30 30 / 0.06); }
.pf-scale-name { display: grid; }
.pf-scale-name code { font-family: var(--pf-mono); font-size: 11.5px; color: var(--pf-ink); }
.pf-scale-name span { font-family: var(--pf-mono); font-size: 10.5px; color: var(--pf-faint); }
.pf-scale-sample { min-width: 0; font-size: calc(var(--s) * 1px); line-height: var(--lh); letter-spacing: calc(var(--tr) * 1px); overflow-wrap: anywhere; }
.pf-scale-sample.is-display { font-family: 'PP Fugaz One', system-ui, sans-serif; }
.pf-scale-sample.is-body { font-family: 'PP Faustina', Georgia, serif; }
/* the lockup, in the large header's points (PPHeader's ground truth, as
   the live app's cold open sets it): the blob 261 by 132, the words at 69
   on 62-point lines a little in from its edge, and the tomato 92 square
   after Pal; drawn a fifth up, on sky. The ink line is Figma's, not the
   code's: 2 points centred on the letter's edge and laid over the fill, a
   point in and a point out, as the App Store captures show it (laid under
   the fill as the cold open lays it, all 2 points stood outside, and the
   letters looked fat and heavy-lined beside the real one). */
.pf-logo-sky { justify-self: start; display: grid; place-items: center; padding: 22px 30px 18px; border-radius: 16px; background: #b8edf8; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.08); }
.pf-logo { --pt: 1.2px; position: relative; width: calc(261 * var(--pt)); height: calc(140 * var(--pt)); }
.pf-logo > * { position: absolute; max-width: none; }
.pf-logo-blob { left: 0; top: 0; width: calc(261 * var(--pt)); height: calc(132 * var(--pt)); }
.pf-logo-word {
  left: calc(11.33 * var(--pt));
  font-family: 'PP Fugaz One', system-ui, sans-serif;
  font-size: calc(69 * var(--pt));
  line-height: calc(62 * var(--pt));
  color: #ff4b4b;
  -webkit-text-stroke: calc(2 * var(--pt)) #000;
  paint-order: normal;
  white-space: nowrap;
}
.pf-logo-word.is-one { top: calc(6.33 * var(--pt)); }
.pf-logo-word.is-two { top: calc(68.33 * var(--pt)); }
.pf-logo-tomato { left: calc(125 * var(--pt)); top: calc(48 * var(--pt)); width: calc(92 * var(--pt)); height: calc(92 * var(--pt)); }

/* ---- spacing.json ---- */
.pf-steps4 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; list-style: none; }
.pf-steps4 li { display: grid; justify-items: center; gap: 3px; }
.pf-steps4 i { width: calc(var(--v) * 1px); height: calc(var(--v) * 1px); border-radius: 3px; background: rgb(255 75 75 / 0.16); box-shadow: inset 0 0 0 1.5px #ff4b4b; }
.pf-steps4 code { font-family: var(--pf-mono); font-size: 10.5px; color: var(--pf-ink); }
.pf-steps4 span { font-family: var(--pf-mono); font-size: 10px; color: var(--pf-faint); }
.pf-canvas {
  position: relative;
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 393px;
  padding: 18px var(--g) 14px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(45deg, rgb(255 75 75 / 0.2) 0 3px, transparent 0 7px) left / var(--g) 100% no-repeat,
    repeating-linear-gradient(45deg, rgb(255 75 75 / 0.2) 0 3px, transparent 0 7px) right / var(--g) 100% no-repeat,
    #ffd67e;
  box-shadow: 0 0 0 1px rgb(30 30 30 / 0.1);
}
.pf-canvas-pill { display: grid; place-items: center; height: 70px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 2px #000; font-family: 'PP Fugaz One', system-ui, sans-serif; font-size: 33px; line-height: 1; }
.pf-canvas-note { font-size: 11.5px; text-align: center; color: #6b5222; }
.pf-canvas-note code { font-family: var(--pf-mono); color: var(--pf-ink); }
.pf-controls { display: grid; gap: 10px; list-style: none; }
.pf-controls li { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.pf-controls code { overflow: hidden; font-family: var(--pf-mono); font-size: 11.5px; text-overflow: ellipsis; }
.pf-controls li > span:last-child { font-family: var(--pf-mono); font-size: 11px; color: var(--pf-faint); }
.pf-shape {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--h) * 1px);
  max-width: 100%;
  font-family: 'PP Fugaz One', system-ui, sans-serif;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.pf-shape.is-btn { width: 160px; border-radius: 10px; background: #ff4b4b; box-shadow: inset 0 0 0 2px #000; font-size: 20px; color: #fff; }
.pf-shape.is-chip { width: 76px; border-radius: 4px; background: #f5ee90; font-size: 13px; letter-spacing: 0.52px; color: #fff; -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.pf-shape.is-search { justify-content: flex-start; width: 200px; padding: 0 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #000; font-size: 15px; color: #5a5a5a; }
.pf-shape.is-pill { width: 200px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 2px #000; font-size: 28px; }
.pf-shape.is-band { justify-content: flex-start; gap: 10px; width: 200px; background: #ff7e7d; font-size: 16px; overflow: hidden; }
.pf-shape.is-band i { display: grid; place-items: center; align-self: stretch; width: 40px; background: #b4ff85; font-style: normal; font-size: 20px; }
.pf-shape.is-section { width: 200px; background: #cdcdcd; font-size: 22px; color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.pf-shape.is-badge { width: 28px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #000; font-size: 16px; }

/* ---- radii.json ---- */
.pf-radii { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; }
.pf-radii li { display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: 14px; background: #ffd67e; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.08); }
.pf-radius { width: calc(var(--w) * 1px); max-width: 100%; height: calc(var(--h) * 1px); margin-bottom: 4px; border-radius: calc(var(--r) * 1px); background: #fff; box-shadow: inset 0 0 0 2px #000; }
.pf-radii b { font-size: 14px; font-weight: 600; }
.pf-radii code { font-family: var(--pf-mono); font-weight: 400; }
.pf-radii span:last-child { font-size: 12px; line-height: 1.4; color: #6b5222; }

/* ---- borders.json ---- */
.pf-widths, .pf-edges { display: grid; gap: 8px; list-style: none; }
.pf-widths li { display: grid; grid-template-columns: 120px auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.07); }
.pf-widths i { height: calc(var(--w) * 1px); border-radius: 1px; background: #000; }
.pf-widths code { font-family: var(--pf-mono); font-size: 11.5px; }
.pf-widths span { font-size: 12px; color: var(--pf-soft); }
.pf-edges li { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 14px; }
.pf-edges li > span:last-child { font-size: 12.5px; line-height: 1.45; color: var(--pf-soft); }
.pf-edge { display: grid; place-items: center; height: 56px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px #000; font-family: 'PP Fugaz One', system-ui, sans-serif; font-size: 16px; }
/* six on, four off, two wide, as the app strokes it: inside its own edge */
.pf-edge.is-dashed, .pf-pill.is-dashed {
  box-shadow: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99.4%25' height='97%25' rx='11' fill='none' stroke='black' stroke-width='2' stroke-dasharray='6 4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    #fff;
}
.pf-pill.is-dashed {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99.4%25' height='97%25' rx='23' fill='none' stroke='black' stroke-width='2' stroke-dasharray='6 4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    #fff;
}
.pf-scallop { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.1); }
.pf-scallop-svg { display: block; width: 100%; height: auto; }

/* ---- shadows.json ---- */
.pf-shadow-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf-shadow-pair figure { position: relative; display: grid; justify-items: center; gap: 12px; padding: 26px 12px 16px; border-radius: 14px; background: #ffd67e; }
.pf-shadow-pair figcaption { font-size: 12.5px; color: #6b5222; }
.pf-shadow-pair .is-no::after {
  content: 'never';
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 99px;
  background: #fff;
  font-family: var(--pf-mono);
  font-size: 10px;
  color: #b01919;
}
.pf-sticker {
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #000;
  font-family: 'PP Fugaz One', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1;
  color: #000;
}
.pf-sticker.is-blur { box-shadow: 0 14px 22px -6px rgb(0 0 0 / 0.35); }
.pf-sticker.is-press { cursor: pointer; transition: translate 80ms ease-out; }
.pf-sticker.is-press::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgb(0 0 0 / 0.1); opacity: 0; transition: opacity 80ms ease-out; }
.pf-sticker.is-press:active { translate: 0 2px; }
.pf-sticker.is-press:active::after { opacity: 1; }
.pf-press { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px; border-radius: 14px; background: #ffd67e; }
.pf-press p { font-size: 13px; line-height: 1.5; color: #3d2c1e; }

/* ---- illustration-style.json ---- */
.pf-contract-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; margin-top: 16px; }
.pf-contract-pic { display: grid; justify-items: center; align-content: start; gap: 12px; }
.pf-contract-art { width: 160px; height: 160px; object-fit: contain; filter: drop-shadow(0 12px 14px rgb(60 30 0 / 0.25)); }
.pf-contract-attrs { display: grid; gap: 5px; width: 100%; list-style: none; }
.pf-contract-attrs li { padding: 5px 10px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.07); font-size: 11.5px; line-height: 1.35; color: #444343; }
.pf-prompt { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.08); font-size: 13.5px; line-height: 1.55; color: #444343; text-wrap: pretty; }
.pf-prompt.is-not { font-size: 12.5px; color: var(--pf-soft); }
.pf-slot { padding: 0 0.25em; border-radius: 0.3em; background: var(--pf-butter); font-weight: 600; color: var(--pf-ink); }
.pf-contract-note { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgb(255 214 126 / 0.4); font-size: 13px; line-height: 1.5; color: #3d2c1e; }
.pf-contract-note:empty { display: none; }
.pf-contract-note b { font-weight: 600; }

/* ---- the components ---- */
.pf-measured { position: relative; margin: 24px 46px 20px 0; }
.pf-dim { position: absolute; font-family: var(--pf-mono); font-size: 10.5px; line-height: 1; white-space: nowrap; color: #6b2a14; cursor: default; }
.pf-dim.is-h { left: calc(100% + 10px); top: 0; height: 100%; display: grid; place-items: center; padding-left: 8px; border-left: 1.5px solid #6b2a14; }
.pf-dim.is-r { left: -4px; top: -18px; }
.pf-dim.is-ink { left: 50%; bottom: -17px; translate: -50% 0; }
.pf-dim.is-font { right: 0; top: -18px; }
.pf-pills { justify-items: start; }
.pf-pill {
  display: grid;
  place-items: center;
  width: calc(var(--w, 347) * 1px);
  max-width: 100%;
  height: 70px;
  padding: 0 14px;
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #000;
  overflow: hidden;
}
.pf-pill-word {
  display: block;
  max-width: 100%;
  font-family: 'PP Fugaz One', system-ui, sans-serif;
  font-size: calc(33px * var(--k, 1));
  line-height: 1;
  white-space: nowrap;
}
.pf-pill.is-cut { box-shadow: inset 0 0 0 2px #b01919; }
.pf-pill.is-cut .pf-pill-word { overflow: hidden; text-overflow: ellipsis; }
.pf-pills input[type='range'] { width: 100%; max-width: 347px; accent-color: var(--pf-ink); }
.pf-pill-read { font-family: var(--pf-mono); font-size: 11.5px; color: #6b5222; }
.pf-scallop-view { display: grid; justify-items: start; gap: 14px; }
.pf-scallop-zoom { width: 100%; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.1); }
.pf-scallop-view .pf-scallop { width: 100%; max-width: 393px; }

/* ---- ChefBook.json ---- */
.pf-book { display: grid; justify-items: start; gap: 12px; }
.pf-book-nav { display: flex; align-items: center; gap: 10px; }
.pf-round { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.12); font-size: 20px; line-height: 1; }
.pf-round:hover { background: #f3f1ec; }
.pf-dish-count { min-width: 64px; font-family: var(--pf-mono); font-size: 12px; text-align: center; color: var(--pf-soft); }
.pf-dish {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 393px;
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: #ffd67e;
  box-shadow: inset 0 0 0 2px #000, 0 18px 30px -22px rgb(60 30 0 / 0.5);
}
.pf-dish-title .pf-fugaz { color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill; }
.pf-dish-art { justify-self: center; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; background: #ff7e7d; box-shadow: inset 0 0 0 2px #000; }
.pf-dish-art img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 6px 6px rgb(60 30 0 / 0.3)); }
.pf-dish-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; list-style: none; }
.pf-dish-chips li { padding: 3px 9px; border-radius: 99px; background: #ffd67e; box-shadow: inset 0 0 0 1.5px #000; font-family: 'PP Fugaz One', system-ui, sans-serif; font-size: 11.5px; line-height: 1.2; }
.pf-dish-chips li:nth-child(2) { background: #beeba6; }
.pf-dish-chips li:nth-child(3) { background: #b8edf8; }
.pf-dish-chips .is-meal { background: #fff; }
.pf-dish-summary { font-family: 'PP Faustina', Georgia, serif; font-size: 15px; line-height: 1.35; }
.pf-dish-strip { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; }
.pf-dish-strip li { display: grid; justify-items: center; gap: 2px; width: 56px; padding: 4px 2px; border-radius: 8px; background: #f7f7f7; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
.pf-dish-strip img { width: 36px; height: 36px; object-fit: contain; }
.pf-dish-strip span { max-width: 100%; overflow: hidden; font-family: 'PP Fugaz One', system-ui, sans-serif; font-size: 8.5px; text-align: center; line-height: 1.1; }
.pf-dish-steps { display: grid; gap: 8px; list-style: none; }
.pf-dish-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px #000; font-family: 'PP Faustina', Georgia, serif; font-size: 13.5px; line-height: 1.38; }
.pf-dish-steps li > b { font-family: 'PP Fugaz One', system-ui, sans-serif; font-weight: 400; font-size: 16px; }
.pf-dish-steps span b { font-family: 'PP Fugaz One', system-ui, sans-serif; font-weight: 400; }

/* ---- illustrate.ts ---- */
.pf-asks { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-ask { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px #000; font-family: 'PP Fugaz One', system-ui, sans-serif; font-size: 14px; transition: translate 80ms ease-out; }
.pf-ask:active { translate: 0 2px; }
.pf-ask img { width: 30px; height: 30px; object-fit: contain; }
.pf-tiers { position: relative; display: grid; gap: 8px; margin-top: 14px; list-style: none; }
.pf-tiers::before { content: ''; position: absolute; left: 21px; top: 20px; bottom: 20px; width: 2px; background: repeating-linear-gradient(to bottom, rgb(30 30 30 / 0.2) 0 5px, transparent 0 9px); }
.pf-tiers li {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(30 30 30 / 0.07);
  transition: background 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.pf-tiers li::before { content: ''; grid-row: 1 / 3; align-self: center; justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px rgb(30 30 30 / 0.3); transition: background 0.25s ease, box-shadow 0.25s ease; }
.pf-tiers b { font-size: 14px; font-weight: 600; }
.pf-tiers span { font-size: 12.5px; color: var(--pf-soft); }
.pf-tiers li.is-pass { opacity: 0.55; }
.pf-tiers li.is-pass::before { background: rgb(30 30 30 / 0.25); box-shadow: none; }
.pf-tiers li.is-hit { box-shadow: inset 0 0 0 2px var(--pf-ink); }
.pf-tiers li.is-hit::before { background: var(--pf-butter); box-shadow: inset 0 0 0 2px var(--pf-ink); }
.pf-response { display: grid; gap: 10px; margin-top: 14px; }
.pf-response:empty { display: none; }
.pf-req { padding: 8px 12px; border-radius: 10px; background: var(--pf-code); font-family: var(--pf-mono); font-size: 12px; color: #dfdfe0; overflow-wrap: anywhere; }
.pf-res { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; animation: pf-fade 0.3s ease; }
.pf-res img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 8px 8px rgb(60 30 0 / 0.25)); }
.pf-res-by { margin-bottom: 6px; font-size: 13.5px; color: #444343; }
.pf-res-by b { font-weight: 600; color: var(--pf-ink); }
.pf-headers { display: grid; gap: 3px; list-style: none; font-family: var(--pf-mono); font-size: 11.5px; line-height: 1.4; color: #444343; overflow-wrap: anywhere; }
.pf-headers b { font-weight: 700; color: var(--pf-ink); }
.pf-headers .is-kept { color: #2f7a2c; }
.pf-bill { display: block; margin-top: 10px; font-family: var(--pf-mono); font-size: 11.5px; color: var(--pf-deep); }
.pf-bill:empty { display: none; }

/* ---- recipes.ts ---- */
.pf-shelf { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.pf-food { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 4px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1.5px #000; font-family: 'PP Fugaz One', system-ui, sans-serif; font-size: 12.5px; transition: opacity 0.2s ease, background 0.2s ease; }
.pf-food img { width: 28px; height: 28px; object-fit: contain; }
.pf-food[aria-pressed='false'] { opacity: 0.5; background: transparent; box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.35); }
.pf-rule { border-radius: 4px; background: rgb(255 214 126 / 0.45); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pf-recipes-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.pf-schema { display: grid; overflow: hidden; list-style: none; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.07); }
.pf-schema li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 7px 12px; font-size: 12.5px; }
.pf-schema li + li { border-top: 1px solid rgb(30 30 30 / 0.06); }
.pf-schema code { font-family: var(--pf-mono); font-size: 11.5px; color: var(--pf-ink); }
.pf-schema span { color: var(--pf-soft); }
.pf-titles { align-self: start; margin-top: 18px; padding: 12px 14px 14px; border-radius: 14px; background: #ffd67e; }
.pf-titles .pf-label { margin: 0 0 8px; color: #6b5222; }
.pf-titles ul { display: grid; gap: 4px; list-style: none; font-family: 'PP Fugaz One', system-ui, sans-serif; font-size: 15px; }
.pf-titles .is-out { text-decoration: line-through 2px #b01919; color: rgb(0 0 0 / 0.45); }
.pf-titles p { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: #3d2c1e; }

/* ---- CateredPick.swift ---- */
.pf-catered-row { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 22px; margin-top: 16px; align-items: start; }
.pf-catered .pf-device { gap: 10px; padding: 16px; }
.pf-deck { display: grid; gap: 8px; }
.pf-seat {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #000;
  transition: opacity 0.35s ease, translate 0.45s var(--spring-settle, ease-out), max-height 0.45s ease, padding 0.45s ease;
  max-height: 120px;
}
.pf-seat img { width: 56px; height: 56px; object-fit: contain; }
.pf-seat > span { display: grid; gap: 2px; }
.pf-seat b { font-family: 'PP Fugaz One', system-ui, sans-serif; font-weight: 400; font-size: 14px; line-height: 1.05; }
.pf-seat i { font-style: normal; font-size: 11.5px; color: #6b5222; }
.pf-deck:not(.is-open) .pf-seat.is-book { opacity: 0; translate: 0 8px; }
.pf-deck > .pf-seat:first-child { order: -1; }
.pf-deck:not(.is-seated) > .pf-seat:first-child, .pf-deck.is-gone > .pf-seat:first-child { max-height: 0; padding-block: 0; opacity: 0; box-shadow: none; overflow: hidden; }
.pf-deck.is-seated:not(.is-filled, .is-gone) > .pf-seat:first-child {
  grid-template-columns: minmax(0, 1fr);
  min-height: 76px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99%25' height='97%25' rx='11' fill='none' stroke='black' stroke-width='2' stroke-dasharray='6 4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    rgb(255 255 255 / 0.6);
  box-shadow: none;
}
.pf-cooking { font-family: 'PP Fugaz One', system-ui, sans-serif; font-size: 13px; text-align: center; color: #6b5222; }
@media (prefers-reduced-motion: no-preference) { .pf-cooking { animation: pf-breathe 1.4s ease-in-out infinite alternate; } }
@keyframes pf-breathe { to { opacity: 0.45; } }
.pf-deck.is-filled > .pf-seat:first-child { animation: pf-in 0.45s var(--spring-settle, ease-out); }
.pf-timeline { display: grid; gap: 6px; list-style: none; }
.pf-timeline li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.07); font-size: 13px; line-height: 1.4; animation: pf-in 0.35s var(--spring-settle, ease-out); }
.pf-timeline code { font-family: var(--pf-mono); font-size: 11.5px; color: var(--pf-deep); }
.pf-replay { margin-top: 12px; padding: 8px 14px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgb(30 30 30 / 0.14); font-size: 12.5px; }
.pf-replay:hover { background: #f3f1ec; }

/* ---- the viewer in a narrower window ----
   Under 1100 the tree folds into one row of files over the two panes;
   under 760 (a phone) the drawing stands over the code, each scrolling on
   its own, so a line lit from the drawing is still in view under it. */
@media (max-width: 1100px) {
  .pf-panel { grid-template: 'bar bar' auto 'tree tree' auto 'view code' minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); }
  .pf-side { display: block; border-right: 0; border-bottom: 1px solid rgb(30 30 30 / 0.08); }
  .pf-side > .pf-pane { display: none; }
  .pf-tree { display: flex; gap: 4px; padding: 6px 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .pf-tree-file code { display: none; }
  .pf-tree::-webkit-scrollbar { display: none; }
  .pf-tree-group { display: flex; flex: none; align-items: center; gap: 4px; }
  .pf-tree-group + .pf-tree-group { padding-left: 6px; margin-left: 2px; border-left: 1px solid rgb(30 30 30 / 0.1); }
  .pf-tree-folder { display: none; }
  .pf-tree-files { display: flex; gap: 2px; }
  .pf-tree-file { width: auto; white-space: nowrap; }
}
@media (max-width: 760px) {
  .pf { padding: 0; }
  .pf-panel {
    grid-template: 'bar' auto 'tree' auto 'view' minmax(0, 1.1fr) 'code' minmax(0, 1fr) / minmax(0, 1fr);
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .pf-bar { height: auto; min-height: 50px; padding-top: env(safe-area-inset-top); }
  .pf-lights, .pf-meta, .pf-code-head .pf-pane { display: none; }
  .pf-crumbs { display: none; }
  .pf-steps { margin-right: auto; }
  .pf-head { font-size: 18px; }
  .pf-view { padding: 12px 16px 24px; border-bottom: 1px solid rgb(30 30 30 / 0.1); }
  .pf-cap { font-size: 13.5px; margin-bottom: 12px; }
  .pf-lines { font-size: 11px; }
  .pf-lines li { padding-left: calc(44px + var(--ind, 0) * 1ch); padding-right: 12px; }
  .pf-lines li::before { width: 32px; }
  .pf-scroll { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
/* the drawings that stand beside their words keep to it down to a
   phone's pane (the pane itself is the container: at a 1440 window it is
   about 510 wide inside, and at 540 the Figma frame's legend fell below
   the fold) */
@container pfview (max-width: 440px) {
  .pf-figma, .pf-contract-row, .pf-catered-row, .pf-recipes-row { grid-template-columns: minmax(0, 1fr); }
  .pf-figma-frame { max-width: 280px; }
  .pf-controls li { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-controls li code { grid-row: 2; }
  .pf-widths li { grid-template-columns: 80px minmax(0, 1fr); }
  .pf-widths li span { grid-column: 1 / -1; }
  .pf-edges li { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-lines li, .pf-seat, .cs-guide-pick button, .cs-guide-rules li { transition: none; }
}