/* Halal One case study. Everything shared with the home page lives in styles.css. */

[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The character */
.face { display: block; color: var(--accent); }
.face svg { display: block; width: 100%; height: auto; overflow: visible; }
.face__frame path { fill: none; stroke: currentColor; stroke-width: 24; stroke-linecap: round; }
.face__eyes ellipse { fill: var(--ink); transform-box: fill-box; transform-origin: center; animation: blink 4.2s infinite; }
.face__eyes { transition: transform .12s linear; }
.face__mouth path { fill: none; stroke: currentColor; stroke-width: 16; stroke-linecap: round; }
.face__mouth ellipse { fill: none; stroke: currentColor; stroke-width: 14; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(.1); } }

/* It rides the page's thread, in place of the dot */
.rider { position: absolute; left: 0; top: 0; width: 46px; margin-left: -23px; z-index: 2; pointer-events: none; }
.rider .face { background: var(--bg); border-radius: 12px; padding: 3px; transition: background-color .7s var(--ease); }
.thread__packet { opacity: 0; }
.thread__stops { z-index: 1; }
.thread__stops span { white-space: nowrap; }

.says { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1rem); max-width: 34rem; }
.says .face { flex: none; width: clamp(56px, 6vw, 84px); }
.bubble {
  position: relative; padding: .7em 1em; border-radius: 16px;
  background: var(--ink); color: var(--bg); font-weight: 500; line-height: 1.35;
  transition: background-color .7s var(--ease), color .7s var(--ease);
}
.bubble::before {
  content: ""; position: absolute; left: -7px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: inherit; transform: rotate(45deg); border-radius: 2px;
}

/* Hero */
.cs-hero { overflow-x: clip; min-height: 100svh; display: flex; flex-direction: column; gap: clamp(1rem, 3vh, 2rem); padding-block: var(--edge); }
.cs-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; }
.back { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; font-weight: 600; text-decoration: none; }
.back svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.back:hover svg { transform: translateX(-4px); }
.cs-title { position: relative; flex: 1; display: flex; align-items: center; margin-block: 1.2rem; padding-inline: .15em; border: 2px solid var(--ink); overflow: visible; }
.cs-title h1 { flex: 1; display: flex; align-items: center; gap: .2em; font: 900 clamp(2.4rem, min(11.4vw, 32svh), 16.5rem)/1.05 var(--display); letter-spacing: -.05em; white-space: nowrap; }
.cs-title__logo { flex: none; width: .76em; height: .76em; margin-left: auto; margin-right: .06em; border-radius: .17em; }
.cs-title .film__handle { background: var(--gold); border-color: var(--ink); }
.cs-title__beam { position: absolute; top: 0; bottom: 0; left: -12%; width: 8%; opacity: 0; pointer-events: none; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--ultramarine) 40%, transparent)); border-right: 3px solid var(--ultramarine); }
.cs-hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.cs-hero__foot .line { margin-bottom: 1.1rem; }
.says--hero { max-width: 26rem; }

/* Facts */
.cs-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(4rem, 12vh, 8rem); align-items: start; }
.cs-facts__list { margin: 0; }
.cs-facts__list div:first-child { border-top: 2px solid currentColor; }

/* Chapters */
.ch { display: grid; gap: clamp(1.75rem, 4.5vh, 3rem); padding-block: clamp(4.5rem, 14vh, 9rem); }
.ch > * { min-width: 0; }
.ch__head { display: grid; gap: .5rem; }
.when { font: 700 clamp(1.05rem, .95rem + .6vw, 1.5rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--accent); }
.ch .section-title { font-size: clamp(2rem, 1.2rem + 4vw, 5.2rem); letter-spacing: -.04em; max-width: 15em; }
.ch .section-title--big { font-size: clamp(2.4rem, 1.2rem + 6vw, 7.6rem); font-weight: 900; }
.ch__narrow, .ch__text p, .evo__text p, .fifth__text p, .snake__story p { max-width: 38em; }
.ch__text, .evo__text, .fifth__text, .snake__story { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.ch__split { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 36rem); justify-content: start; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.ch__wide { display: grid; gap: clamp(1.5rem, 4vh, 2.5rem); }
.big-line { font: 800 clamp(1.8rem, 1.2rem + 3vw, 4rem)/1.1 var(--display); letter-spacing: -.04em; color: var(--accent); }
.big-line--long { font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.6rem); max-width: 24em; }
.promise { font: 800 clamp(1.5rem, 1rem + 2.6vw, 3.6rem)/1.14 var(--display); letter-spacing: -.035em; max-width: 19em; }
.note { color: var(--muted); }
.scene-title { font: 700 1.15em/1.2 var(--display); letter-spacing: -.02em; }
.pill--small { min-height: 44px; padding: .4em 1.2em; font-size: .95em; }
button.pill { background: none; color: inherit; }
button.pill:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
button.pill--solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.pill:disabled { opacity: .45; cursor: default; }

/* Phone frame around real screens */
.device { width: min(19rem, 42svh); max-width: 100%; aspect-ratio: 778 / 1600; overflow: hidden; border-radius: 26px; border: 6px solid var(--indigo); background: #faf9f8; }
.device img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Chapter 1: the scan */
.aisle { --pack: 10rem; display: grid; gap: 1.1rem; justify-items: center; padding: clamp(1.25rem, 2.4vw, 2rem); background: var(--panel); border-radius: 6px; --ink: var(--chalk); --bg: var(--panel); color: var(--chalk); }
.aisle .says { --bg: var(--indigo); }
.aisle .bubble { background: var(--chalk); color: var(--indigo); }
.aisle__stage { position: relative; width: 100%; min-height: 19rem; display: grid; grid-template-columns: minmax(0, var(--pack)) minmax(0, 1fr); gap: 1.25rem; align-items: center; overflow: hidden; }
.pack { width: 100%; max-height: 19rem; transition: translate .6s var(--ease); }
/* The packet waits in the centre, then moves over for the verdict */
.js .aisle:not(.is-done) .pack { translate: calc((100cqi - var(--pack)) / 2); }
html:not(.motion) .pack { transition: none; }
.aisle__beam { position: absolute; left: calc((100cqi - var(--pack)) / 2); top: 0; width: var(--pack); height: 34%; opacity: 0; pointer-events: none; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--gold) 55%, transparent)); border-bottom: 3px solid var(--gold); }
.is-scanning .aisle__beam { opacity: 1; animation: beam 1.25s ease-in-out; }
@keyframes beam { from { transform: translateY(-100%); } to { transform: translateY(200%); } }
.aisle__result { display: grid; gap: .9rem; justify-items: start; }
.aisle { container-type: inline-size; }
.verdict-word { font: 800 clamp(1.2rem, 7.8cqi, 2.8rem)/1 var(--display); letter-spacing: -.04em; color: var(--gold); }
.aisle__nothing { color: #b6b4e6; }
/* Every state keeps its space, so the card never changes height */
.is-off { visibility: hidden !important; }
.aisle__foot { display: grid; width: 100%; align-items: center; justify-items: center; }
.js .aisle__foot > * { grid-area: 1 / 1; }
.is-shake { animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.gap { width: 100%; max-width: 46rem; border-collapse: collapse; }
.gap caption { text-align: left; margin-bottom: .75rem; font: 700 clamp(1.15rem, 1rem + .9vw, 1.9rem)/1.2 var(--display); letter-spacing: -.02em; }
.gap th, .gap td { padding: .75rem .5rem; text-align: left; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-weight: 500; line-height: 1.25; }
.gap thead th { font-size: .85em; color: var(--muted); vertical-align: bottom; }
.gap tbody th { font-weight: 600; }
.gap .yes { color: var(--accent); font-weight: 700; }
.gap .no { color: var(--muted); }
.gap__me th, .gap__me td { background: var(--accent); color: var(--on-accent) !important; border: 0; }

/* Chapter 2 */
.decision { display: grid; gap: 1.1rem; padding-top: clamp(1.5rem, 4vh, 2.5rem); border-top: 2px solid currentColor; min-width: 0; }
.ch__narrow .ch__sub { margin-bottom: 1rem; }
.ai-roles { color: color-mix(in srgb, var(--gold) 55%, #fff); font-weight: 600; }
.decision h3, .snake__story h3, .ch__sub { font: 700 clamp(1.35rem, 1.05rem + 1.5vw, 2.5rem)/1.12 var(--display); letter-spacing: -.03em; }
.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; max-width: 58rem; }
.layers li { position: relative; display: grid; gap: .2rem; padding: 1rem; background: var(--indigo); color: var(--chalk); border-radius: 6px; line-height: 1.3; }
.layers b { font-weight: 700; }
.layers span { font-size: .92em; color: #c9c9fb; }
.layers__out { background: var(--ultramarine) !important; }
.layers__ai { grid-column: 1 / -1; background: none !important; color: var(--ink) !important; border: 2px dashed currentColor; }
.layers__ai span { color: var(--muted); }

.tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.tab { min-height: 44px; padding: .4em 1.1em; border-radius: 99px; border: 2px solid currentColor; background: none; font-weight: 600; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.tab:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tab--halal[aria-pressed="true"] { background: #1e6b4e; border-color: #1e6b4e; color: #fff; }
.tab--haram[aria-pressed="true"] { background: #a33529; border-color: #a33529; color: #fff; }
.tab--doubt[aria-pressed="true"] { background: #744c11; border-color: #744c11; color: #fff; }
.tab--disp[aria-pressed="true"] { background: #6a2b82; border-color: #6a2b82; color: #fff; }
.verdicts { display: grid; gap: 1.25rem; }
.verdicts__panels figure { display: grid; grid-template-columns: auto minmax(0, 24rem); justify-content: start; gap: clamp(1.25rem, 3vw, 3rem); align-items: center; }
.verdicts__panels figcaption { font: 600 clamp(1.1rem, 1rem + .9vw, 1.9rem)/1.25 var(--display); letter-spacing: -.02em; }
html:not(.js) .tabs { display: none; }

.fifth { grid-template-columns: minmax(0, 40rem) auto; justify-content: start; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.fifth__text { justify-items: start; }
.fifth__device { position: relative; }
/* Covers the Shia card in the screenshot until the school is added */
.js .fifth__veil { position: absolute; left: 5.5%; right: 5.5%; top: 80.4%; bottom: 1.6%; border-radius: 8px; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); background: rgb(250 249 248 / .35); transition: backdrop-filter .7s var(--ease), -webkit-backdrop-filter .7s var(--ease), background-color .7s var(--ease), visibility 0s .7s; }
.is-added .fifth__veil { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); background: transparent; visibility: hidden; }
.schools { display: flex; flex-wrap: wrap; gap: .5rem; }
.schools li { padding: .35em 1em; border-radius: 99px; background: var(--indigo); color: var(--chalk); font-weight: 600; }
.schools__new { background: var(--ultramarine) !important; }
.is-added .schools__new { animation: popin .5s var(--ease); }
@keyframes popin { from { transform: scale(.4); opacity: 0; } }

.decision--flow { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.decision__side { display: grid; gap: 1.1rem; }
.flow { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.flow li { position: relative; display: flex; align-items: center; min-height: 56px; padding: .55rem 1rem; border-radius: 6px; line-height: 1.25; font-weight: 500; animation: popin .3s var(--ease); }
.flow li:not(.is-last)::after { content: ""; position: absolute; left: 1.5rem; top: 100%; width: 2px; height: 1.6rem; background: var(--ink); }
.flow li:not(.is-last)::before { content: ""; position: absolute; left: calc(1.5rem - 5px); top: calc(100% + 1.6rem - 7px); border: 6px solid transparent; border-bottom-width: 0; border-top: 7px solid var(--ink); z-index: 1; }
.flow__step { background: var(--chalk); color: var(--indigo); border: 2px solid var(--indigo); }
.flow__step--end { background: var(--indigo); color: var(--chalk); }
.flow__ask { border: 2px solid var(--gold); flex-wrap: wrap; gap: .4rem .5rem; background: var(--gold); color: var(--indigo); font-weight: 600; }
.flow__ask span { margin-right: .3rem; }
.flow__ask button { min-height: 40px; min-width: 44px; padding: 0 .8em; border-radius: 99px; border: 2px solid currentColor; background: none; font-weight: 700; cursor: pointer; }
.flow__ask button[aria-pressed="true"] { background: var(--indigo); color: var(--gold); border-color: var(--indigo); }

/* Chapter 3 */
.tokens { display: grid; gap: 1.5rem; }
.tokens__num { max-width: 26em; font: 600 clamp(1.1rem, 1rem + .8vw, 1.8rem)/1.25 var(--display); letter-spacing: -.02em; }
.tokens__num b { display: block; font-size: clamp(4.5rem, 3rem + 11vw, 15rem); font-weight: 900; line-height: .95; letter-spacing: -.06em; color: var(--accent); }
.tokens__bar { display: flex; gap: 4px; }
.tokens__bar li { flex: var(--n) 1 0; min-width: 0; padding: .7rem .6rem; background: var(--chalk); color: var(--indigo); border-radius: 3px; line-height: 1.15; overflow: hidden; }
.tokens__bar b { display: block; font: 800 clamp(1rem, .85rem + .8vw, 1.8rem)/1.1 var(--display); }
.tokens__bar span { font-size: clamp(.7rem, .65rem + .3vw, .95rem); }
.pair { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: stretch; max-width: 92rem; }
.prompt__side { display: grid; gap: 1.1rem; align-content: start; }
.prompt__side p { max-width: 38em; }
.prompt--pair .prompt { max-width: none; align-content: start; }
.pair--stack { grid-template-columns: minmax(0, 1fr); }
.pair--stack .prompt, .pair--stack .rules { max-width: 46rem; }
.trace { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: stretch; max-width: 92rem; }
.trace__text { display: grid; gap: 1.1rem; align-content: start; }
.trace__text h3, .fig__note h4, .carry h3 { font: 700 clamp(1.35rem, 1.05rem + 1.5vw, 2.5rem)/1.12 var(--display); letter-spacing: -.03em; }
.trace__note { font-weight: 600; color: var(--accent); }
.trace__panel { display: grid; gap: 1.5rem; padding: clamp(1rem, 2.4vw, 2rem); background: var(--panel); border-radius: 6px; color: var(--chalk); --muted: #b6b4e6; }
.trace__scale { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; }
.trace__scale button { display: grid; place-items: end center; aspect-ratio: 1 / 1.5; min-height: 44px; padding: 0 0 .3rem; border: 0; border-radius: 3px; background: var(--s); color: #faf9f8; font-size: clamp(.68rem, .6rem + .3vw, .9rem); font-weight: 600; cursor: pointer; transition: translate .2s var(--ease); }
.trace__scale button.is-light { color: #3d2117; }
.trace__scale button:hover { translate: 0 -3px; }
.trace__scale button[aria-pressed="true"] { outline: 3px solid var(--gold); outline-offset: 2px; translate: 0 -3px; }
.chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; max-width: 60rem; }
.chain li { position: relative; display: grid; gap: .25rem; align-content: start; line-height: 1.25; overflow-wrap: anywhere; }
.chain li:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 18px; width: 1.75rem; height: 2px; background: currentColor; }
.chain i { display: block; width: 38px; height: 38px; border-radius: 8px; margin-bottom: .3rem; border: 2px solid var(--chalk); transition: background-color .25s; }
.chain li > span { font-size: .92em; color: var(--muted); }
.trace__panel { container: trace / inline-size; }
@container trace (max-width: 40rem) {
  .chain { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .chain li { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .1rem; overflow-wrap: normal; }
  .chain li > i, .chain li > .chain__btn { grid-row: span 2; align-self: center; margin: 0; }
  .chain li:not(:last-child)::after { left: 18px; top: 100%; width: 2px; height: 1.1rem; }
}
.chain li > .chain__btn { justify-self: start; display: inline-grid; place-items: center; height: 38px; padding: 0 1.1em; margin-bottom: .3rem; border-radius: 99px; background: #c5603c; color: #faf9f8; font-weight: 600; font-size: .9em; transition: background-color .25s, color .25s; }

.fig { background: var(--indigo); color: var(--chalk); border-radius: 8px; overflow: hidden; --muted: #b6b4e6; --ink: var(--chalk); --bg: var(--indigo); --accent: var(--gold); }
.fig__bar { padding: .8rem 1.25rem; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--chalk) 18%, transparent); }
.fig__body { display: grid; grid-template-columns: 14rem minmax(0, 1fr); }
.fig__pages { display: grid; align-content: start; gap: .1rem; padding: .75rem; border-right: 1px solid color-mix(in srgb, var(--chalk) 18%, transparent); }
.fig__group { padding: .7rem .75rem .2rem; font-weight: 600; color: var(--muted); }
.fig__page { min-height: 40px; padding: .35rem .75rem; border: 0; border-radius: 6px; background: none; color: inherit; text-align: left; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color .2s, color .2s; }
.fig__page--in { padding-left: 1.5rem; }
.fig__more { height: 1rem; margin: .2rem .75rem .4rem 1.5rem; border-bottom: 2px dotted color-mix(in srgb, var(--chalk) 55%, transparent); }
.fig__page:hover { background: color-mix(in srgb, var(--chalk) 12%, transparent); }
.fig__page[aria-pressed="true"] { background: var(--gold); color: var(--indigo); font-weight: 700; }
.fig :focus-visible { outline-color: var(--gold); }
.fig__frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
.fig__canvas { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 1rem; padding: 1.25rem; height: min(42rem, 80svh); background: #1a1860; }
.fig__shot { position: relative; display: block; min-height: 0; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #f8f7f5; cursor: zoom-in; transition: outline-color .2s; outline: 2px solid transparent; outline-offset: 2px; }
.fig__shot:hover { outline-color: var(--gold); }
/* Frames always show their full width; a tall one runs off the bottom until opened */
.fig__shot img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.fig__shot--wide { grid-column: 1 / -1; }
.fig__shot--fit { background: #1f2a3c; }
.fig__shot--fit img { height: 100%; object-fit: contain; object-position: center; }
.fig__shot--brand { background: #f0e8db; }
.fig__canvas:has(.fig__shot--wide:nth-child(3)) { grid-template-rows: minmax(0, 3fr) minmax(0, 1fr); }
.fig__note { display: grid; gap: 1.25rem; align-content: start; padding: clamp(1.25rem, 2vw, 1.75rem); }
.fig__note > div { display: grid; gap: .4rem; }
.fig__note .label { color: var(--muted); }
.fig__note blockquote { padding: .9rem 1rem; position: relative; border-radius: 14px; background: var(--chalk); color: var(--indigo); line-height: 1.35; }
.fig__mine { padding-top: 1rem; border-top: 2px solid var(--gold); }
.fig__mine p:last-child { font-weight: 600; }

.play { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1rem, 2.4vw, 2rem); background: var(--panel); border-radius: 6px; --ink: var(--chalk); --muted: #b6b4e6; }
.play__controls { display: grid; gap: 1rem; color: var(--chalk); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.chips .label { width: 100%; }
.chips button { min-height: 40px; padding: 0 .9em; border-radius: 99px; border: 1.5px solid color-mix(in srgb, var(--chalk) 45%, transparent); background: none; color: var(--chalk); font-weight: 500; font-size: .9em; cursor: pointer; transition: background-color .2s, color .2s; }
.chips button:hover { border-color: var(--chalk); }
.chips button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--indigo); font-weight: 700; }
.chips button:focus-visible, .play :focus-visible { outline-color: var(--gold); }
/* The app's own colours appear only on this plate */
.plate { display: grid; place-items: center; align-content: center; gap: 1rem; min-height: 15rem; padding: 1.25rem; border-radius: 6px; background: #f8f7f5; color: #3b2a1a; text-align: center; }
.plate__note { font-size: .88em; color: #6b5a4a; max-width: 26em; }
.plate__spec { min-height: 2.8em; font-weight: 600; max-width: 26em; line-height: 1.4; }
.dsbtn { --c: #c5603c; --t: #faf9f8; --b: #c5603c; display: inline-flex; align-items: center; justify-content: center; gap: .5em; border: 2px solid var(--b); background: var(--c); color: var(--t); border-radius: 999px; font-family: "DM Sans", var(--body); transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; }
.dsbtn b { font-weight: 600; }
.dsbtn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.dsbtn--md { height: 48px; padding: 0 24px; font-size: 16px; }
.dsbtn--lg { height: 56px; padding: 0 30px; font-size: 18px; }
.dsbtn__icon { display: none; width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dsbtn__spin { display: none; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dsbtn.is-loading .dsbtn__spin { display: block; }
.dsbtn--secondary { --c: transparent; --t: #c5603c; --b: transparent; }
.dsbtn--tertiary { --c: transparent; --t: #c5603c; --b: #c5603c; }
.dsbtn--destructive { --c: #a33529; --b: #a33529; }
.dsbtn--icon { padding: 0; aspect-ratio: 1; }
.dsbtn--icon b { display: none; }
.dsbtn--icon .dsbtn__icon { display: block; }
.dsbtn--icon.is-loading .dsbtn__icon { display: none; }
.dsbtn.is-hover { --c: #c98268; --b: #c98268; }
.dsbtn--secondary.is-hover, .dsbtn--tertiary.is-hover { --c: #f1ebe8; --b: #c5603c; --t: #a35033; }
.dsbtn--secondary.is-hover { --b: transparent; }
.dsbtn--destructive.is-hover { --c: #c04a3d; --b: #c04a3d; }
.dsbtn.is-focus { box-shadow: 0 0 0 3px #f8f7f5, 0 0 0 5px #c5603c; }
.dsbtn--destructive.is-focus { box-shadow: 0 0 0 3px #f8f7f5, 0 0 0 5px #a33529; }
.dsbtn.is-pressed { --c: #a35033; --b: #a35033; }
.dsbtn--secondary.is-pressed, .dsbtn--tertiary.is-pressed { --c: #dbc0b7; --b: #a35033; --t: #80412a; }
.dsbtn--secondary.is-pressed { --b: transparent; }
.dsbtn--destructive.is-pressed { --c: #872e24; --b: #872e24; }
.dsbtn.is-disabled { --c: #e2dcd5; --b: #e2dcd5; --t: #8f8478; }
.dsbtn--secondary.is-disabled { --c: transparent; --b: transparent; }

.atoms__text { display: grid; gap: 1.1rem; justify-items: start; align-content: start; }
.atoms__row { display: grid; grid-template-columns: 6rem 9rem minmax(0, 1fr); align-items: stretch; gap: clamp(.75rem, 2vw, 1.5rem); padding: clamp(1rem, 2.4vw, 2rem); background: #f8f7f5; color: #3b2a1a; border-radius: 6px; }
.atoms__row figure { display: grid; grid-template-rows: minmax(4.5rem, 1fr) auto; gap: .6rem; justify-items: center; align-items: center; text-align: center; min-width: 0; }
.atoms__row figcaption { font-size: .85em; color: #6b5a4a; }
.atoms__row svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atom { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 1.5px dashed #c5603c; border-radius: 6px; color: #c5603c; }
.atom svg { width: 2.4rem; height: 2.4rem; }
.molecule { display: flex; gap: .7rem; align-items: center; justify-content: center; }
.molecule__btn { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #c5603c; color: #faf9f8; }
.molecule__nav { display: grid; justify-items: center; font-size: .78em; font-weight: 600; color: #c5603c; }
.organism { display: flex; justify-content: space-around; align-items: center; width: 100%; padding: .5rem; border: 1px solid #d8cfc7; border-radius: 12px; background: #fff; }
.organism > span { display: grid; justify-items: center; font-size: .72em; color: #6b5a4a; }
.organism .organism__fab { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #c5603c; color: #faf9f8; }
.is-pulse .atoms__row svg { animation: popin .4s var(--ease); }

.prompt { display: grid; gap: 1rem; max-width: 46rem; }
.label.prompt__ex { font: italic 400 .85rem/1.3 var(--body); letter-spacing: 0; text-transform: none; text-align: center; }
.prompt > .prompt__ex { margin-top: 0; }
.scene .prompt > .prompt__ex { margin-bottom: .6rem; }
.fig__note .prompt__ex { margin-top: .7rem; }
.prompt blockquote { display: grid; gap: .6rem; padding: clamp(1rem, 2.4vw, 1.75rem); position: relative; border-radius: 16px; background: var(--ink); color: var(--bg); line-height: 1.35; transition: background-color .7s var(--ease), color .7s var(--ease); }
.prompt { --fw: clamp(40px, 3.6vw, 52px); --ty: clamp(1.6rem, 2.4vw, 2.1rem); }
.fig__note { --fw: clamp(34px, 1.7vw, 56px); --ty: calc(var(--fw) / 2 + .35rem); }
.ask { display: flex; align-items: flex-start; gap: clamp(.7rem, 1.4vw, 1rem); }
.ask > blockquote { flex: 1; min-width: 0; }
.ask__me { flex: none; display: grid; place-items: center; width: var(--fw); height: var(--fw); margin-top: calc(var(--ty) - var(--fw) / 2); border-radius: 50%; background: var(--gold); color: var(--indigo); font: 700 calc(var(--fw) * .34)/1 var(--display); letter-spacing: -.02em; }
.ask > blockquote::after { content: ""; position: absolute; left: -7px; top: calc(var(--ty) - 8px); width: 16px; height: 16px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.ask + .prompt__ex { padding-left: calc(var(--fw) + 1rem); }
.prompt ul { display: flex; flex-wrap: wrap; gap: .35rem; }
.prompt ul li { padding: .15em .7em; border: 1px solid currentColor; border-radius: 99px; font-size: .86em; }

/* Chapter 4 */
#screens { padding-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.evo { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 22rem); justify-content: start; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.evo__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; justify-items: center; position: sticky; top: 3vh; }
.evo__device { position: relative; width: min(100%, 17rem, 38svh); min-width: 170px; }
.js .evo__device img { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.js .evo__device img.is-on { opacity: 1; }
html:not(.js) .evo__device { aspect-ratio: auto; height: auto; }
html:not(.js) .evo__range, html:not(.js) .evo__ends { display: none; }
.evo__range { width: 100%; height: 44px; margin: 0; appearance: none; background: none; cursor: grab; }
.evo__range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, #1e6b4e, #c5603c); }
.evo__range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, #1e6b4e, #c5603c); }
.evo__range::-webkit-slider-thumb { appearance: none; width: 30px; height: 30px; margin-top: -12px; border: 3px solid var(--cream); border-radius: 50%; background: var(--ultramarine); }
.evo__range::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid var(--cream); border-radius: 50%; background: var(--ultramarine); }
.evo__text .bubble { min-height: 3.1em; display: flex; align-items: center; }
.evo__ends { display: flex; justify-content: space-between; width: 100%; margin-top: -.5rem; font-size: .85em; color: var(--muted); }

/* How I built with AI: one scene per step. On wide screens it stays pinned and the scroll plays it. */
.agent { display: grid; gap: 1.25rem; }
.agent__scenes { display: grid; gap: clamp(3.5rem, 9vh, 6rem); }
.scene { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center; }
.scene__text { display: grid; gap: 1rem; align-content: center; justify-items: start; }
.scene__text > p { max-width: 34em; }
.scene__num { font: 800 clamp(1rem, .9rem + .4vw, 1.4rem)/1 var(--display); color: var(--accent); }
.scene h3 { font: 700 clamp(1.35rem, 1.05rem + 1.5vw, 2.5rem)/1.25 var(--display); letter-spacing: -.03em; }
.scene mark { padding: 0 .2em; background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 0 / 100% 100%; color: var(--indigo); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.scene .prompt { max-width: 100%; }
.w { display: inline-block; }
.scene__art { container-type: inline-size; width: 100%; }
.stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--chalk) 18%, transparent); background: color-mix(in srgb, var(--chalk) 6%, transparent); color: var(--indigo); font-size: clamp(10.5px, 1.45cqi, 26px); line-height: 1.2; }
.agent.is-pinned { height: 100svh; grid-template-rows: auto auto; align-content: center; gap: clamp(1rem, 3vh, 2rem); padding-block: 1.5rem; }
.agent.is-pinned .agent__scenes { gap: 0; }
.agent.is-pinned .scene { grid-area: 1 / 1; }
.agent.is-pinned .scene__art { width: min(100%, calc((100svh - 8rem) * 1.6)); }
.road { display: none; }
.agent.is-pinned .road { display: flex; align-items: center; gap: 1.25rem; margin-left: calc(24rem + clamp(1.5rem, 3vw, 3.5rem)); width: min(100% - 24rem - clamp(1.5rem, 3vw, 3.5rem), (100svh - 8rem) * 1.6); color: var(--muted); font-weight: 600; }
.road__line { position: relative; flex: 1; height: 3px; margin-right: 8px; border-radius: 2px; background: color-mix(in srgb, var(--chalk) 22%, transparent); }
.road__fill { position: absolute; inset: 0; border-radius: 2px; background: var(--gold); }
.road__dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--gold); background: var(--indigo); }

/* What moves on the stage */
.o { position: absolute; }
.logo { display: inline-block; width: 1.15em; height: 1.15em; flex: none; fill: currentColor; vertical-align: -.2em; }
.pill > .logo { margin-right: .5em; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wires path { fill: none; stroke: var(--gold); stroke-width: .45; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tool { display: inline-flex; align-items: center; gap: .45em; padding: .4em .85em; border-radius: 99px; background: var(--chalk); color: var(--indigo); font-weight: 600; white-space: nowrap; }
.tool--gold { background: var(--gold); }
.doc { display: grid; gap: .5em; align-content: start; padding: .65em .75em .8em; border-radius: .3em 1.1em .3em .3em; background: var(--chalk); color: var(--indigo); font-size: .82em; font-weight: 600; line-height: 1.15; hyphens: manual; overflow-wrap: break-word; }
.doc::after { content: ""; height: 1.6em; background: repeating-linear-gradient(to bottom, #c9c9fb 0 .2em, transparent .2em .55em); }
.doc b { display: flex; align-items: center; gap: .4em; }
.doc em { justify-self: start; padding: .1em .5em; border-radius: 99px; background: var(--gold); font-style: normal; font-size: .85em; }
.doc--big { font-size: 1em; }
.doc--file::after { height: 2.4em; }
.doc--md { background: var(--gold); }
.doc--md::after { background: repeating-linear-gradient(to bottom, var(--indigo) 0 .2em, transparent .2em .55em); opacity: .35; }
.doc--code::after { display: none; }
.code { display: block; height: 3.4em; background: repeating-linear-gradient(to bottom, var(--ultramarine) 0 .22em, transparent .22em .6em); }
.q { height: 2.8em; padding: .75em .9em; border-radius: 1.2em 1.2em 1.2em .25em; background: repeating-linear-gradient(to bottom, #c9c9fb 0 .2em, transparent .2em .55em) content-box, var(--chalk); }
.box { display: grid; align-content: start; padding: .6em .8em; border: 2px dashed color-mix(in srgb, var(--chalk) 40%, transparent); border-radius: .8em; color: var(--chalk); }
.box > b { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; }
.role { display: flex; align-items: center; gap: .5em; padding: .75em 1em; border-radius: .8em; background: var(--gold); color: var(--indigo); font-weight: 700; line-height: 1.15; }
.rule { padding: .6em .8em; border-left: .4em solid var(--gold); border-radius: .4em; background: var(--chalk); font-weight: 600; }
.cap { color: var(--chalk); font-weight: 600; opacity: .8; }
.bar { height: 1.1em; border-radius: 99px; background: color-mix(in srgb, var(--chalk) 45%, transparent); }
.bar--md { background: var(--gold); }
.frame { display: grid; gap: .35em; padding: .35em; border-radius: .4em; background: var(--chalk); font-size: .82em; font-weight: 600; }
.frame img { display: block; width: 100%; border-radius: .2em; }
.frame span { display: flex; align-items: center; gap: .4em; padding: 0 .2em .1em; }
.sw { display: flex; height: 2.4em; border-radius: .3em; overflow: hidden; }
.sw span { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; border-radius: 99px; background: var(--ultramarine); color: var(--chalk); font-size: .85em; font-weight: 600; font-style: normal; white-space: nowrap; }
.chip--gold { background: var(--gold); color: var(--indigo); }
.chip--mcp { font-size: 1.05em; padding: .4em .9em; box-shadow: 0 0 0 .25em var(--indigo); }
.chip--bad { background: none; border: .15em solid #ff7a6b; color: #ff7a6b; }
/* The app's own button colour */
.appbtn { display: inline-grid; place-items: center; padding: .6em 1.7em; border-radius: 99px; background: #c5603c; color: #faf9f8; font-weight: 600; }
.tbl { display: flex; align-items: center; gap: .55em; padding: .45em .7em; border-radius: .35em; background: var(--chalk); font-size: .9em; font-weight: 600; }
.tbl::before { content: ""; flex: none; width: 1.1em; height: .85em; border: .12em solid var(--ultramarine); border-radius: .12em; background: linear-gradient(var(--ultramarine), var(--ultramarine)) 0 .22em / 100% .12em no-repeat, linear-gradient(var(--ultramarine), var(--ultramarine)) .35em 0 / .12em 100% no-repeat; }
.me { display: flex; align-items: flex-start; gap: .1em; }
.me svg { width: 1.4em; height: 1.4em; fill: var(--gold); stroke: var(--indigo); stroke-width: 1.2; }
.me span { margin-top: .9em; padding: .15em .55em; border-radius: 99px; background: var(--ultramarine); color: var(--chalk); font-size: .8em; font-weight: 700; }
.mini { aspect-ratio: 778 / 1600; overflow: hidden; border: .3em solid var(--chalk); border-radius: 1em; background: #faf9f8; }
.mini img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mock { display: grid; align-content: start; gap: .6em; padding: .8em .6em; }
.mock__img { height: 5em; border-radius: .4em; background: #e9ddd9; }
.mock__line { height: .55em; border-radius: 99px; background: #e2dcd5; }
.mock__line--short { width: 60%; }
.mock__verdict { display: grid; justify-items: start; margin-top: .4em; }
.mock__verdict > * { grid-area: 1 / 1; }
.gate { border: .15em solid var(--gold); border-radius: .3em; background: repeating-linear-gradient(to bottom, var(--gold) 0 1em, var(--indigo) 1em 2em); }
.ok { padding: .15em .55em; border: .2em solid var(--gold); border-radius: .35em; color: var(--gold); font: 800 1.5em/1.1 var(--display); rotate: -6deg; }
.row { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .45em .7em; border-radius: .4em; background: var(--chalk); font-size: .88em; font-weight: 600; }
.row__lines { flex: 1; height: .5em; border-radius: 99px; background: repeating-linear-gradient(90deg, #c9c9fb 0 4em, transparent 4em 4.6em); }
.tick { display: grid; place-items: center; width: 1.5em; height: 1.5em; flex: none; border-radius: 50%; background: var(--ultramarine); }
.tick svg { width: 1em; height: 1em; fill: none; stroke: var(--chalk); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.switch { display: grid; grid-template-columns: 1fr 1fr; padding: .2em; border-radius: 99px; background: color-mix(in srgb, var(--chalk) 18%, transparent); color: var(--chalk); font-weight: 700; }
.switch span { position: relative; padding: .45em 0; text-align: center; }
.switch__knob { position: absolute; top: .2em; bottom: .2em; left: 50%; width: calc(50% - .2em); border-radius: 99px; background: var(--ultramarine); }
.ring { aspect-ratio: 1; border: .2em dashed color-mix(in srgb, var(--chalk) 45%, transparent); border-radius: 50%; }
/* Without motion every scene shows how it ends */
html:not(.motion) .stage [data-leave] { display: none; }


.carry { display: grid; gap: 1.25rem; padding-top: clamp(1.5rem, 4vh, 2.5rem); border-top: 2px solid currentColor; }
.carry__row { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) minmax(0, 16rem); gap: 2.25rem; max-width: 92rem; }
.carry__row li { position: relative; display: grid; grid-template-rows: auto 1fr; gap: .5rem; }
.carry__row li:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 58%; width: 2.25rem; height: 2px; background: currentColor; }
.carry__box { display: grid; gap: .4rem; align-content: center; min-height: 11rem; padding: 1.1rem; border-radius: 6px; overflow: hidden; line-height: 1.3; }
.carry__box--fig { background: var(--indigo); color: var(--chalk); }
.carry__box--fig i { display: block; width: 3rem; height: 3rem; border-radius: 8px; background: #c5603c; }
.carry__box--fig span { color: #b6b4e6; }
.carry__box--code { background: var(--indigo); color: var(--chalk); gap: .8rem; }
.carry__box--code code { font: 500 clamp(.8rem, .72rem + .35vw, 1.05rem)/1.45 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.carry__box--phone { padding: 0; background: #faf9f8; }
.carry__box--phone img { display: block; width: 100%; height: 100%; max-height: 11rem; object-fit: cover; object-position: top; }
.carry__quote { font-weight: 600; max-width: 38em; }

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; align-content: start; }
.rules li { padding: .9rem 1rem; background: var(--indigo); color: var(--chalk); border-radius: 6px; font-weight: 600; line-height: 1.25; }

/* Full-size frame */
/* Frames open at their real size, never stretched past it */
.zoom { width: fit-content; max-width: 94vw; max-height: 92svh; margin: auto; padding: 0; border: 0; border-radius: 8px; background: #f8f7f5; overflow: auto; }
.zoom::backdrop { background: rgb(16 14 69 / .86); }
.zoom img { display: block; width: auto; max-width: 100%; height: auto; }
.zoom__close { position: fixed; top: 1rem; right: 1rem; z-index: 1; background: var(--indigo) !important; border-color: var(--indigo) !important; color: var(--chalk) !important; }

/* Chapter 6 */
.snake { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.snake__story { justify-items: start; }
.snake__rule { font-weight: 600; }
.snake__board { display: grid; gap: 1rem; padding: clamp(1.25rem, 2.4vw, 2rem); background: var(--indigo); color: var(--chalk); border-radius: 6px; --ink: var(--chalk); --bg: var(--indigo); --accent: var(--gold); }
.match { display: flex; align-items: center; gap: .7rem; font: 700 clamp(1.05rem, .9rem + 1vw, 1.9rem)/1.1 var(--display); letter-spacing: -.02em; }
.match__line { flex: 1; min-width: 1rem; height: 3px; background: var(--gold); transition: opacity .3s, transform .4s var(--ease); transform-origin: left; }
.match__guess { padding: .15em .55em; border-radius: 6px; background: #a33529; color: #fff; transition: background-color .3s, color .3s, opacity .3s; }
.stamp { justify-self: start; padding: .2em .6em; border: 4px solid #ff7a6b; border-radius: 8px; color: #ff7a6b; font: 900 clamp(1.5rem, 1rem + 2.6vw, 3.4rem)/1.1 var(--display); letter-spacing: -.03em; rotate: -3deg; transition: color .3s, border-color .3s; }
.is-ruled .match__line { transform: scaleX(.25); opacity: .5; }
.is-ruled .match__guess { background: none; color: #b6b4e6; text-decoration: line-through; }
.is-ruled .stamp { color: var(--gold); border-color: var(--gold); rotate: 0deg; font-size: clamp(1.15rem, .9rem + 1.5vw, 2.2rem); }

.deck { display: grid; gap: 1.1rem; }
.said { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
.said > div { display: grid; gap: .5rem; align-content: start; padding: clamp(1.1rem, 2.4vw, 2rem); min-height: 11rem; border-radius: 4px; background: color-mix(in srgb, var(--indigo) 10%, transparent); }
.said .label { color: inherit; }
.said__me { background: var(--ultramarine) !important; color: var(--chalk); }

/* Chapter 7 */
.months { display: grid; gap: .5rem; }
.months__axis { position: relative; height: 1.6em; color: var(--muted); font-size: .9rem; }
.months__axis span { position: absolute; left: calc(var(--at) * 100%); }
.months__rows { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.months__bar { position: relative; height: clamp(30px, 5vh, 46px); margin-left: calc(var(--from) * 100%); width: calc((var(--to) - var(--from)) * 100%); display: flex; align-items: center; white-space: nowrap; font-size: clamp(.8rem, .75rem + .35vw, 1.05rem); }
.months__bar i { position: absolute; inset: 0; background: var(--ultramarine); border-radius: 3px; transform-origin: left; }
.months__bar b { position: absolute; left: calc(100% + .7em); font-weight: 600; }
.months__bar--in b, .months__bar--live b { left: auto; right: calc(100% + .7em); }
.months__bar--live i { background: var(--indigo); }
/* Steps wait off to the side before they arrive */
#shipping { overflow-x: clip; }
.launch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.launch__step { position: relative; display: grid; gap: .75rem; align-content: start; padding: clamp(1.1rem, 2vw, 1.6rem); border: 2px solid var(--indigo); border-radius: 8px; }
.launch__step p { max-width: 30em; }
.launch__num { font: 800 clamp(1.3rem, 1rem + 1vw, 2rem)/1 var(--display); color: var(--accent); }
.launch h3 { font: 700 clamp(1.1rem, .95rem + .9vw, 1.8rem)/1.15 var(--display); letter-spacing: -.025em; }
.launch__link { position: absolute; left: 100%; top: 2.4rem; width: calc(2rem + 4px); height: 2px; background: var(--indigo); transform-origin: left; }
.launch__tags { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .25rem; }
.tag { display: inline-flex; align-items: center; gap: .45em; padding: .3em .8em; border-radius: 99px; background: var(--indigo); color: var(--chalk); font-size: .9em; font-weight: 600; line-height: 1.2; }
.tag svg { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }
.tag img { width: 1.35em; height: auto; border-radius: 2px; }
.tag--line { background: none; color: inherit; border: 1.5px solid currentColor; }
.tools { display: flex; flex-wrap: wrap; gap: .4rem; }
.tools li { display: inline-flex; align-items: center; gap: .4em; padding: .2em .75em; border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 99px; font-weight: 500; line-height: 1.3; }
.tools svg { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }

/* Chapter 8 */
.lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); max-width: 70rem; }
.lessons li { display: grid; gap: .4rem; align-content: start; padding-top: .9rem; border-top: 2px solid currentColor; }
.lessons b { font: 700 clamp(1.15rem, 1rem + 1vw, 2rem)/1.15 var(--display); letter-spacing: -.025em; color: var(--accent); }
.lessons span { color: var(--muted); max-width: 30em; }
.closing span, .section-title--big span { display: block; }
.closing { font: 900 clamp(2rem, 1rem + 5.4vw, 6.6rem)/1.02 var(--display); letter-spacing: -.05em; max-width: 12em; }

/* Laptops and up: the thread becomes a sidebar listing the chapters */
@media (min-width: 1200px) {
  .ch { --toc: 14rem; padding-left: calc(var(--thread-x) + var(--toc) + clamp(1.5rem, 3vw, 3.5rem)); }
  .thread { --toc: 14rem; top: 50%; bottom: auto; height: min(36rem, 78svh); width: var(--toc); transform: translateY(-50%); transition: opacity .4s var(--ease), visibility .4s; }
  body:not(.toc-on) .thread { opacity: 0; visibility: hidden; }
  html:not(.js) .thread { display: none; }
  .thread__stops { display: grid; grid-auto-rows: minmax(0, 1fr); }
  .thread__stops li { position: relative; top: auto; left: auto; margin-top: 0; }
  .thread .thread__stops a { display: flex; align-items: center; width: calc(var(--toc) + 14px); height: 100%; margin-left: -14px; border-radius: 0; color: inherit; }
  .thread .thread__stops a::before { inset: auto; left: 9px; top: calc(50% - 5px); width: 10px; height: 10px; }
  .thread .thread__stops span { position: static; margin-left: 2.4rem; padding: 0; background: none; color: inherit; font-size: .92rem; font-weight: 500; line-height: 1.2; white-space: normal; opacity: .72; transform: none; pointer-events: auto; transition: opacity .25s, color .25s; }
  .thread .thread__stops a:hover span, .thread .thread__stops a:focus-visible span { opacity: 1; transform: none; }
  .thread .thread__stops a.is-current span { opacity: 1; color: var(--accent); font-weight: 700; }
  .rider { width: 2.6rem; margin-left: -1.3rem; }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .fig__frame { grid-template-columns: minmax(0, 1fr); }
  .fig__body { grid-template-columns: 11.5rem minmax(0, 1fr); }
}
@media (max-width: 1600px) {
  .launch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launch__step:nth-child(2) .launch__link { display: none; }
}
@media (max-width: 1500px) {
  .atoms__row { grid-template-columns: 5rem minmax(0, 1fr); }
  .atoms__row figure:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1040px) {
  .decision--flow, .ch__split, .cs-facts, .snake, .evo, .play, .pair, .trace, .fig__body, .fig__frame, .scene { grid-template-columns: minmax(0, 1fr); }
  .fig__pages { display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--chalk) 18%, transparent); }
  .fig__group, .fig__more { display: none; }
  .fig__page, .fig__page--in { padding-inline: .8rem; }
  .carry__row { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .carry__row li:not(:last-child)::after { display: none; }
  .carry__box { min-height: 0; }
  .carry__box--phone { max-width: 16rem; }
  .evo__stage { position: static; }
  .fifth { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rider { display: none; }
  .thread__packet { opacity: 1; }
  .cs-hero { min-height: 0; }
  .cs-title { flex: none; padding-block: .6em; }
  .cs-title h1 { font-size: 10.6vw; }
  .layers, .chain, .said, .lessons { grid-template-columns: minmax(0, 1fr); }
  .chain li:not(:last-child)::after { display: none; }
  .verdicts__panels figure { grid-template-columns: minmax(0, 1fr); }
  .verdicts__panels .device { width: min(100%, 260px); }
  .atoms__row { grid-template-columns: 5rem minmax(0, 1fr); }
  .fig__canvas { height: auto; grid-auto-rows: auto; grid-template-rows: none !important; grid-template-columns: minmax(0, 1fr); }
  .fig__shot { aspect-ratio: 4 / 3; }
  .stage { font-size: clamp(8px, 2.3cqi, 26px); }
  .launch { grid-template-columns: minmax(0, 1fr); }
  .launch__link { display: none; }
  .rules { grid-template-columns: minmax(0, 1fr); }
  .trace__scale { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .atoms__row figure:last-child { grid-column: 1 / -1; }
  .tokens__bar { flex-wrap: wrap; }
  .tokens__bar li { flex: 1 1 28%; }
  .months__bar b { font-size: .8rem; }
  .months__bar--in b { right: calc(100% + .4em); }
}
@media (max-width: 420px) {
  .aisle { --pack: 5.5rem; }
  .aisle__stage { min-height: 11rem; }
  .pack { max-height: 11rem; }
  .verdict-word { letter-spacing: -.03em; }
  .gap th, .gap td { padding-inline: .3rem; font-size: .9em; }
}
@media (prefers-reduced-motion: reduce) {
  .face__eyes ellipse { animation: none; }
}