/* ===== Design Score: the bookmarklet as the hero's object, the panel as its picture, then the method in the open =====
   Page-only styles for score.html. Shared pieces (nav, buttons, kbd, copy buttons, the closing card, the footer,
   reveals, the dot field) come from style.css, fx.css, blocks.css, sit.css, last.css and mobile.css.
   Spacing stays on the 4px tokens, radii on the four surface sizes (card 24, tile 14, nest 10, pill). */

:root {
  /* score bands, the same five the panel uses: ring, bars and grade chip */
  --ds-a: oklch(80% 0.09 165);   /* 85 and up */
  --ds-b: oklch(85% 0.12 125);   /* 75 to 84 */
  --ds-c: oklch(84% 0.13 85);    /* 65 to 74 */
  --ds-d: oklch(78% 0.12 55);    /* 50 to 64 */
  --ds-f: oklch(70% 0.17 25);    /* under 50 */
  --ds-violet: oklch(68% 0.155 293);
  --ds-violet-a: oklch(68% 0.155 293 / 0.18);
  --ds-violet-l: oklch(88% 0.064 295);
  --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ds-hero svg, .ds-how svg, .ds-point svg, .ds-rubric svg, .ds-style svg, .ds-fix svg, .ds-run svg, .ds-badge svg, .ds-faq svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* section heads: a title and a lead, side by side on wide screens */
.ds-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-lg); }
.ds-head h2 { max-width: 16ch; }
.ds-head .lead { max-width: 44ch; color: var(--color-muted); }
.ds-sec { padding-block: 0 var(--section-gap); }

/* ---------- hero ---------- */
.ds-hero { padding-block: var(--space-2xl) var(--section-gap-s); }
.ds-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.ds-hero h1 { font-size: clamp(2.75rem, 3.6vw + 1rem, 5rem); max-width: 15ch; }
.ds-hero .lead { max-width: 40ch; }
.ds-tag { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px; margin: 0 0 var(--space-lg); padding: 0 var(--space-sm) 0 var(--space-2xs); border: 1px solid var(--opal-2a); border-radius: var(--radius-pill); background: var(--opal-2a); color: var(--opal-2); font: 500 var(--text-xs)/1 var(--font-body); }
.ds-tag b { display: inline-grid; place-items: center; min-height: 24px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--opal-2); color: var(--opal-ink); font-weight: 600; }

/* the bookmarklet: an object to pick up */
.ds-get { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }
.ds-pill { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 64px; padding: 0 var(--space-lg) 0 var(--space-xs); border-radius: var(--radius-pill); background: linear-gradient(125deg, var(--opal-1), var(--opal-3) 50%, var(--opal-2)); color: var(--opal-ink); font: 600 var(--text-lg)/1 var(--font-body); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: grab; user-select: none; -webkit-user-select: none; box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.55), 0 16px 40px -12px var(--btn-glow); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
.ds-pill:hover { transform: translateY(-2px) rotate(-1.5deg); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.55), 0 24px 48px -12px var(--btn-glow); }
.ds-pill:active { cursor: grabbing; transform: translateY(0) rotate(-3deg) scale(0.98); }
.ds-pill:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.ds-pill-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--opal-ink); }
.ds-pill-ico svg { width: 32px; height: 32px; overflow: visible; }
.ds-pill .ds-pi-track { stroke: oklch(100% 0 0 / 0.16); stroke-width: 4; }
.ds-pill .ds-pi-arc { stroke: var(--opal-2); stroke-width: 4; stroke-dasharray: 82 100; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ds-grip { flex: none; width: 8px; height: 16px; margin-left: var(--space-2xs); opacity: 0.45; background: radial-gradient(circle, var(--opal-ink) 0 1px, transparent 1.5px) 0 0 / 4px 4px; }
.ds-try { min-height: 64px; padding-inline: var(--space-lg); }
.ds-try[aria-busy="true"], .ds-pill[data-state="loading"] { cursor: progress; }
.ds-try svg { width: 18px; height: 18px; }

.ds-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.ds-hint-main { display: inline-flex; align-items: center; gap: var(--space-xs); }
.ds-hint-main b { color: var(--color-ink); font-weight: 500; }
.ds-hint-main svg { width: 16px; height: 16px; color: var(--opal-2); }
.ds-hint-keys { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.ds-hint-keys .kbd { min-width: 24px; height: 24px; }
.ds-hint.is-dragging .ds-hint-main b { color: var(--opal-2); }
.ds-hint-touch { display: none; margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); max-width: 44ch; }
.ds-more { margin-top: var(--space-lg); font-size: var(--text-sm); }
.ds-more a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: var(--color-ink-2); font-weight: 500; text-decoration: none; }
.ds-more a:hover { color: var(--color-ink); }
.ds-more svg { width: 16px; height: 16px; transition: translate var(--dur-short) var(--ease-out); }
.ds-more a:hover svg { translate: 4px 0; }
@media (prefers-reduced-motion: no-preference) {
  .ds-hint-main svg { animation: ds-nudge 1000ms var(--ease-in-out) 3200ms 3 both; }
  .ds-get:hover + .ds-hint .ds-hint-main svg { animation: ds-nudge 1000ms var(--ease-in-out) 2 both; }
}
@keyframes ds-nudge { 0%, 100% { translate: 0 0; } 40% { translate: 0 -4px; } }

/* while the pill is dragged, a glow at the top of the window says where to drop it */
.ds-drop { position: fixed; inset: 0 0 auto; z-index: var(--z-toast); display: flex; justify-content: center; align-items: center; gap: var(--space-xs); height: 48px; padding-inline: var(--space-md); pointer-events: none; color: var(--opal-ink); font: 600 var(--text-sm)/1.2 var(--font-body); text-align: center; background: var(--opal-2); box-shadow: 0 8px 40px var(--opal-2a), 0 16px 64px var(--opal-1a); opacity: 0; translate: 0 -24px; transition: opacity var(--dur-short) var(--ease-out), translate var(--dur-long) var(--ease-out); }
.ds-drop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-drop.is-on { opacity: 1; translate: 0 0; }

/* ---------- the panel, drawn in the page's own type and tokens ---------- */
.ds-shot { position: relative; margin: 0; display: grid; justify-items: end; gap: var(--space-md); }
.ds-shot::before { content: ""; position: absolute; z-index: -1; inset: 8% 0 16%; border-radius: 50%; background: radial-gradient(closest-side, var(--opal-1a), var(--opal-2a) 60%, transparent); filter: blur(var(--space-xl)); pointer-events: none; }
.ds-shot figcaption { width: min(100%, 400px); font-size: var(--text-xs); color: var(--ink-quiet); text-align: center; }
.ds-panel { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; max-width: 400px; height: 744px; overflow: hidden; border: 1px solid var(--glass-edge); border-radius: var(--r-card); background: var(--color-paper); box-shadow: 0 40px 96px -24px oklch(0% 0 0 / 0.72), 0 12px 32px oklch(0% 0 0 / 0.4), inset 0 1px 0 oklch(100% 0 0 / 0.05); text-align: left; }
/* a narrow panel (a phone, or a mid-size window) tightens like the real one: smaller ring, icon-only side buttons */
.ds-panel { container: dspanel / inline-size; }
@container dspanel (max-width: 380px) {
  .ds-sum { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-sm); }
  .ds-ring { width: 96px; height: 96px; }
  .ds-cats li { grid-template-columns: minmax(0, 1fr) 32px 64px 32px; gap: var(--space-xs); }
  .ds-pfoot-row .ds-fb:not(.ds-fb--primary) { width: 44px; padding: 0; }
  .ds-pfoot-row .ds-fb:not(.ds-fb--primary) em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.ds-panel::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 264px; pointer-events: none; background: radial-gradient(110% 80% at 0% 0%, var(--opal-1a), transparent 62%), radial-gradient(80% 70% at 100% 0%, var(--opal-2a), transparent 60%); }
.ds-ph { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-md) var(--space-sm) var(--space-xs) var(--space-lg); }
.ds-ph-brand { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; font-weight: 600; letter-spacing: -0.01em; }
.ds-mark { width: 20px; height: 20px; flex: none; }
.ds-ver { padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); font: 500 12px/1 var(--font-outlier); color: var(--color-muted); }
.ds-ph-icons { display: flex; gap: var(--space-3xs); color: var(--color-ink-2); }
.ds-ph-icons span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-nest); }
.ds-ph-icons svg { width: 16px; height: 16px; }
.ds-tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); margin: var(--space-2xs) var(--space-md) var(--space-xs); padding: var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--r-tile); background: var(--color-paper-2); }
.ds-tabs span { display: grid; place-items: center; height: 36px; border-radius: var(--r-nest); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.ds-tabs .is-on { background: var(--color-paper-3); color: var(--color-ink); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.07), 0 1px 4px oklch(0% 0 0 / 0.45); }
.ds-pbody { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: var(--space-2xs) var(--space-md) var(--space-lg); scrollbar-width: thin; scrollbar-color: var(--color-rule-2) transparent; -webkit-mask-image: linear-gradient(to bottom, var(--color-ink) calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, var(--color-ink) calc(100% - 40px), transparent); }
.ds-pbody:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
:where(.ds-pbody) :where(p, ul, ol) { margin: 0; padding: 0; list-style: none; max-width: none; }

.ds-sum { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-sm) 0 var(--space-md); }
.ds-ring { position: relative; width: 112px; height: 112px; }
.ds-ring::before { content: ""; position: absolute; z-index: -1; inset: 16px; border-radius: 50%; background: var(--band, var(--ds-b)); opacity: 0.18; filter: blur(var(--space-md)); }
.ds-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ds-ring .ds-ring-track { stroke: var(--tint-2); stroke-width: 8; }
.ds-ring .ds-ring-val { stroke-width: 8; }
.ds-stop-a { stop-color: var(--opal-1); }
.ds-stop-b { stop-color: var(--band, var(--ds-b)); }
.ds-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ds-ring-num b { font: 500 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ds-ring-num small { margin-top: var(--space-2xs); font-size: 12px; color: var(--color-muted); }
.ds-grade { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--band, var(--ds-b)) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--band, var(--ds-b)) 42%, transparent); color: var(--band, var(--ds-b)); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ds-grade b { font-size: var(--text-lg); line-height: 1; letter-spacing: 0; }
.ds-host { margin-top: var(--space-sm); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-ptitle { font-size: var(--text-xs); color: var(--color-muted); }
.ds-meta { margin-top: var(--space-xs); font: 500 12px/1.5 var(--font-outlier); color: var(--color-muted); }
.ds-callout { display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); border-radius: var(--r-tile); background: linear-gradient(135deg, var(--opal-1a), var(--opal-2a)); box-shadow: inset 0 0 0 1px oklch(80% 0.055 300 / 0.22); font-size: var(--text-xs); line-height: 1.5; color: var(--color-ink-2); }
.ds-callout b { color: var(--color-ink); font-weight: 600; }
.ds-sl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin: var(--space-lg) var(--space-2xs) var(--space-xs); font-size: 12px; color: var(--color-muted); }
.ds-sl > :first-child { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2); }
.ds-cats { display: grid; gap: var(--space-3xs); }
.ds-cats li { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(64px, 104px) 32px; align-items: center; gap: var(--space-sm); min-height: 32px; padding: var(--space-2xs) var(--space-xs); border-radius: var(--r-nest); font-size: var(--text-sm); }
.ds-cats li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-w { font: 500 12px/1 var(--font-outlier); color: var(--color-muted); text-align: right; }
.ds-bar { position: relative; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--tint-2); }
.ds-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--c, var(--ds-b)); transform-origin: 0 50%; transform: scaleX(calc(var(--s, 0) / 100)); transition: transform 700ms var(--ease-out); }
.ds-cats b { font: 600 13px/1 var(--font-outlier); text-align: right; font-variant-numeric: tabular-nums; }
.ds-iss { display: grid; gap: var(--space-xs); }
.ds-is { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--r-tile); background: var(--color-paper-2); }
.ds-sev { width: 8px; height: 8px; margin-top: var(--space-xs); border-radius: 50%; background: var(--sev); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sev) 20%, transparent); }
.ds-sev--high { --sev: var(--ds-f); } .ds-sev--medium { --sev: var(--ds-c); } .ds-sev--low { --sev: var(--opal-1); }
.ds-is-main { min-width: 0; }
.ds-is-t { display: block; font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.ds-is-f { display: block; margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-is-m { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); margin-top: var(--space-xs); font-size: 12px; color: var(--color-muted); }
.ds-is-p { padding-top: var(--space-3xs); font: 600 12px/1.2 var(--font-outlier); color: var(--color-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-pfoot { flex: none; padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-rule); background: var(--color-paper); }
.ds-pfoot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-xs); }
.ds-fb { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-width: 0; height: 44px; padding: 0 var(--space-sm); overflow: hidden; border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.ds-fb svg { width: 16px; height: 16px; }
.ds-fb em { font-style: normal; }
.ds-fb--primary { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.ds-fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-sm); margin-top: var(--space-sm); font-size: 12px; color: var(--color-muted); }
.ds-fine span + span { color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 2px; }

/* ---------- how it works: three cards with a small scene each ---------- */
.ds-steps { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); }
.ds-step { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--pad-card); border: 1px solid var(--color-rule); border-radius: var(--r-card); background: linear-gradient(160deg, var(--tint-2), var(--tint-1) 60%), var(--color-paper-2); }
.ds-step-n { font: 500 12px/1 var(--font-outlier); color: var(--opal-2); }
.ds-step h3 { font-size: var(--text-lg); letter-spacing: -0.015em; }
.ds-step > p { color: var(--color-muted); font-size: var(--text-sm); max-width: 34ch; }
.ds-ill { position: relative; height: 168px; margin-bottom: var(--space-sm); overflow: hidden; border: 1px solid var(--glass-edge); border-radius: var(--r-tile); background: var(--color-paper); }
/* scene 1: a browser top with a bookmarks bar; the pill lands in it */
.ds-mc { display: flex; align-items: center; gap: var(--space-2xs); height: 40px; padding: 0 var(--space-sm); border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); }
.ds-mc i { width: 8px; height: 8px; border-radius: 50%; background: var(--tint-3); }
.ds-mc span { flex: 1; height: 24px; margin-left: var(--space-xs); padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper); font: 500 12px/24px var(--font-outlier); color: var(--color-muted); }
.ds-mb { display: flex; align-items: center; gap: var(--space-xs); height: 40px; padding: 0 var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.ds-mb span { display: inline-flex; align-items: center; gap: var(--space-2xs); height: 24px; padding: 0 var(--space-xs); border-radius: var(--r-nest); background: var(--tint-2); font-size: 12px; color: var(--color-muted); white-space: nowrap; }
.ds-mb span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--tint-3); }
.ds-mb .ds-mb-ds { background: linear-gradient(125deg, var(--opal-1), var(--opal-3) 50%, var(--opal-2)); color: var(--opal-ink); font-weight: 600; }
.ds-mb .ds-mb-ds::before { border-radius: 50%; background: var(--opal-ink); }
.ds-mp { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-sm); }
.ds-mp i { height: 8px; border-radius: var(--radius-pill); background: var(--tint-2); }
.ds-mp i:nth-child(1) { width: 56%; height: 12px; background: var(--tint-3); } .ds-mp i:nth-child(2) { width: 78%; } .ds-mp i:nth-child(3) { width: 64%; }
.ds-cur { position: absolute; width: 24px; height: 24px; left: 52%; top: 96px; }
.ds-cur path { fill: var(--color-ink); stroke: var(--color-paper); stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .js.fx .ds-step.is-in .ds-mb-ds { animation: ds-land 1000ms var(--ds-ease-spring) 300ms both; }
  .js.fx .ds-step.is-in .ds-cur { animation: ds-carry 1000ms var(--ease-out) 300ms both; }
}
@keyframes ds-land { 0% { opacity: 0; translate: 24px 72px; rotate: -6deg; } 60% { opacity: 1; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes ds-carry { 0% { translate: 24px 40px; } 100% { translate: 0 -32px; opacity: 0.85; } }
/* scene 2: a page with the panel docked on the right */
.ds-ill--page { display: grid; grid-template-columns: minmax(0, 1fr) 128px; }
.ds-ill--page .ds-mp { padding: var(--space-md); align-content: start; }
.ds-ill--page .ds-mp i:nth-child(4) { width: 40%; } .ds-ill--page .ds-mp i:nth-child(5) { width: 70%; height: 40px; border-radius: var(--r-nest); background: var(--tint-1); }
.ds-mpanel { display: grid; align-content: start; justify-items: center; gap: var(--space-xs); margin: var(--space-xs); padding: var(--space-sm) var(--space-xs); border: 1px solid var(--glass-edge); border-radius: var(--r-tile); background: var(--color-paper-2); }
.ds-mring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.ds-mring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ds-mring .ds-mt { stroke: var(--tint-2); stroke-width: 6; }
.ds-mring .ds-mv { stroke: var(--ds-b); stroke-width: 6; stroke-dasharray: 82 100; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ds-mring b { font: 500 var(--text-lg)/1 var(--font-display); }
.ds-mbars { display: grid; gap: var(--space-2xs); width: 100%; }
.ds-mbars i { height: 4px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--c) var(--s), var(--tint-2) var(--s)); }
.ds-mbox { position: absolute; left: var(--space-md); top: 68px; width: 44%; height: 20px; border-radius: 4px; outline: 2px solid var(--ds-violet); outline-offset: 2px; background: var(--ds-violet-a); }
.ds-mbox::after { content: "1"; position: absolute; left: -12px; top: -12px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ds-violet-l); color: var(--opal-ink); font: 600 12px/1 var(--font-outlier); }
@media (prefers-reduced-motion: no-preference) {
  .js.fx .ds-step.is-in .ds-mv { animation: ds-arc 1000ms var(--ease-out) 400ms both; }
  .js.fx .ds-step.is-in .ds-mbox { animation: ds-pop 600ms var(--ds-ease-spring) 1200ms both; }
}
@keyframes ds-arc { from { stroke-dasharray: 0 100; } }
@keyframes ds-pop { from { opacity: 0; scale: 1.12; } }
/* scene 3: the prompt goes to the agent, the score comes back higher */
.ds-ill--chat { display: grid; align-content: center; gap: var(--space-xs); padding: var(--space-md); }
.ds-bub { max-width: 88%; padding: var(--space-xs) var(--space-sm); border-radius: var(--r-tile); font-size: 12px; line-height: 1.45; }
.ds-bub--you { justify-self: end; border-bottom-right-radius: 4px; background: var(--color-paper-3); color: var(--color-ink-2); }
.ds-bub--you b { display: block; color: var(--color-ink); font-weight: 600; }
.ds-bub--agent { justify-self: start; border-bottom-left-radius: 4px; background: var(--tint-2); color: var(--color-ink-2); }
.ds-bub--agent code { font-size: 12px; color: var(--ds-a); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .js.fx .ds-step.is-in .ds-bub { animation: ds-rise 600ms var(--ease-out) both; }
  .js.fx .ds-step.is-in .ds-bub--agent { animation-delay: 700ms; }
}
@keyframes ds-rise { from { opacity: 0; translate: 0 8px; } }

/* ---------- every point, pointed at: issues on the left, the page on the right ---------- */
/* three grid items: the picker, the sample page and its example list. The list is its own item so that on a phone it
   sits under the picker: switching issues then changes the height below the tapped button, never above it. */
.ds-point-grid { margin-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "pick demo" "pick exs"; gap: var(--space-md) var(--gap-columns); align-items: start; }
.ds-point-pick { grid-area: pick; }
.ds-point-demo { grid-area: demo; }
.ds-point-exs { grid-area: exs; }
.ds-pick { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.ds-pick button { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--space-sm); width: 100%; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--r-tile); background: var(--color-paper-2); color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.ds-pick button:hover { background: var(--color-paper-3); border-color: var(--color-rule-2); }
.ds-pick button[aria-pressed="true"] { background: var(--color-paper-3); border-color: var(--ds-violet); box-shadow: 0 0 0 4px var(--ds-violet-a); }
.ds-pick button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ds-pick .ds-is-t { font-size: var(--text-md); }
.ds-pick .ds-is-f { white-space: normal; }
.ds-pick-note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--ink-quiet); max-width: 44ch; }
.ds-browser { overflow: hidden; border: 1px solid var(--glass-edge); border-radius: var(--r-card); background: var(--color-paper-2); box-shadow: 0 32px 80px -32px oklch(0% 0 0 / 0.7); }
.ds-browser-bar { display: flex; align-items: center; gap: var(--space-xs); height: 44px; padding: 0 var(--space-md); border-bottom: 1px solid var(--glass-edge); }
.ds-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--tint-3); }
.ds-browser-bar span { flex: 1; max-width: 320px; height: 28px; margin-inline: auto; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper); font: 500 12px/28px var(--font-outlier); color: var(--color-muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-exs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); min-height: 120px; }
.ds-exs li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); align-items: start; padding: var(--space-xs); border-radius: var(--r-nest); }
.ds-exs li > b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--ds-violet-l); color: var(--opal-ink); font: 600 12px/1 var(--font-outlier); }
.ds-exs code { display: block; font-size: 13px; color: var(--color-ink); overflow-wrap: anywhere; }
.ds-exs span { display: block; margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); }
.ds-exs .ds-exs-none { display: block; padding: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

/* the sample page: a light pricing page with a few honest flaws */
.ds-site { --fs-bg: oklch(100% 0 0); --fs-ink: oklch(21% 0.032 264.7); --fs-mut: oklch(55.1% 0.023 264.4); --fs-low: oklch(71.4% 0.019 261.3); --fs-legal: oklch(66.1% 0.023 261.7); --fs-foot: oklch(98.5% 0.002 247.8); --fs-line: oklch(92.8% 0.006 264.5); --fs-acc: oklch(51.1% 0.23 277); --fs-acc-a: oklch(96.2% 0.018 272.3);
  position: relative; display: grid; gap: var(--space-lg); padding: var(--space-lg) var(--space-lg) 0; overflow: hidden; background: var(--fs-bg); color: var(--fs-ink); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.4; }
.ds-site > * { min-width: 0; }
.fs-nav { display: flex; align-items: center; gap: var(--space-md); }
.fs-logo { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 600; }
.fs-logo::before { content: ""; width: 16px; height: 16px; border-radius: 4px; background: var(--fs-acc); }
.fs-links { display: flex; gap: var(--space-md); margin-left: var(--space-md); color: var(--fs-mut); }
.fs-icon { display: grid; place-items: center; width: 20px; height: 20px; margin-left: auto; border: 1px solid var(--fs-line); border-radius: 50%; color: var(--fs-mut); font-size: 12px; }
.fs-signin { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--fs-line); border-radius: 8px; font-weight: 600; }
.fs-hero { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: var(--space-lg); align-items: center; }
.fs-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-low); }
.fs-h { display: block; margin-top: var(--space-xs); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.fs-sub { display: block; margin-top: var(--space-sm); color: var(--fs-mut); }
.fs-art { position: relative; height: 96px; border-radius: 24px 48px 24px 48px; background: linear-gradient(135deg, var(--fs-acc), oklch(72% 0.14 300)); }
.fs-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.fs-card { position: relative; display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-md); border: 1px solid var(--fs-line); border-radius: 12px; background: var(--fs-bg); }
.fs-card--pop { border-color: var(--fs-acc); box-shadow: 0 8px 24px -12px oklch(51.1% 0.23 277 / 0.45); }
.fs-card b { font-weight: 600; }
.fs-price { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.fs-price small { font-size: 12px; font-weight: 500; color: var(--fs-mut); letter-spacing: 0; }
.fs-feat { height: 8px; border-radius: var(--radius-pill); background: var(--fs-line); }
.fs-feat:nth-of-type(2) { width: 82%; } .fs-feat:nth-of-type(3) { width: 64%; }
.fs-btn { display: grid; place-items: center; min-height: 32px; margin-top: var(--space-xs); border-radius: 8px; background: var(--fs-acc-a); color: var(--fs-acc); font-weight: 600; }
.fs-card--pop .fs-btn { background: var(--fs-acc); color: var(--fs-bg); }
.fs-fine { font-size: 12px; color: var(--fs-low); }
.fs-badge { position: absolute; right: var(--space-sm); top: calc(-1 * var(--space-sm)); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--fs-acc); color: var(--fs-bg); font-size: 12px; font-weight: 600; }
.fs-faq { display: grid; border-top: 1px solid var(--fs-line); }
.fs-q { position: relative; display: flex; justify-content: space-between; padding: var(--space-sm) 0; border-bottom: 1px solid var(--fs-line); font-weight: 500; }
.fs-q::after { content: "+"; color: var(--fs-mut); }
.fs-foot { display: flex; gap: var(--space-lg); margin-inline: calc(-1 * var(--space-lg)); padding: var(--space-md) var(--space-lg); background: var(--fs-foot); font-size: 12px; color: var(--fs-mut); } /* 24px: room for the number badge of a highlighted neighbour */
.fs-foot span:first-child { margin-right: auto; }
.fs-legal { color: var(--fs-legal); }
/* highlight boxes: an outline and a number, set by the issue you pick */
.ds-site [data-hl] { position: relative; }
.ds-site [data-hl]::before { content: ""; position: absolute; z-index: 2; inset: -6px; border-radius: 8px; border: 2px solid var(--ds-violet); background: var(--ds-violet-a); box-shadow: 0 0 0 4px var(--ds-violet-a), 0 0 24px var(--ds-violet-a); pointer-events: none; }
.ds-site [data-hl]::after { content: attr(data-hl); position: absolute; z-index: 3; left: -16px; top: -18px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ds-violet-l); color: var(--opal-ink); font: 600 12px/1 var(--font-outlier); box-shadow: 0 4px 12px oklch(0% 0 0 / 0.35); pointer-events: none; }
.ds-site .fs-foot [data-hl]::before { inset: -4px -6px; }
@media (prefers-reduced-motion: no-preference) {
  .ds-site [data-hl]::before, .ds-site [data-hl]::after { animation: ds-pop 420ms var(--ease-out) both; }
  .ds-site.is-moving .fs-art { animation: ds-float 1000ms var(--ease-in-out) 3 both; }
}
@keyframes ds-float { 50% { translate: 0 -8px; } }

/* ---------- what it measures ---------- */
.ds-weights { display: flex; gap: var(--space-2xs); margin-top: var(--space-2xl); }
.ds-weights span { display: grid; place-items: center; min-width: 0; height: 32px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--opal-1), var(--opal-2)); color: var(--opal-ink); font: 600 12px/1 var(--font-outlier); }
.ds-weights-cap { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--ink-quiet); }
.ds-cards { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); }
.ds-cat { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--pad-card); border: 1px solid var(--color-rule); border-radius: var(--r-card); background: var(--color-paper-2); scroll-margin-top: 120px; }
.ds-cat-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.ds-cat-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-nest); background: var(--tint-2); color: var(--opal-1); }
.ds-cat-ico svg { width: 20px; height: 20px; }
.ds-cat-w { font: 500 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ds-cat-w small { font-size: var(--text-lg); color: var(--color-muted); letter-spacing: 0; }
.ds-cat h3 { margin-top: var(--space-xs); font-size: var(--text-lg); letter-spacing: -0.015em; }
.ds-cat > p { color: var(--color-muted); font-size: var(--text-sm); }
.ds-cat ul { margin: var(--space-xs) 0 0; padding: 0; list-style: none; display: grid; }
.ds-cat li { display: grid; gap: var(--space-3xs); padding: var(--space-xs) 0; border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.ds-cat li span { font-size: var(--text-xs); color: var(--color-muted); }
.ds-cat--math { grid-column: span 2; background: radial-gradient(120% 80% at 100% 0%, var(--opal-1a), transparent 60%), radial-gradient(90% 70% at 0% 100%, var(--opal-2a), transparent 60%), var(--color-paper-2); border-color: var(--glass-edge); }
.ds-cat--math ol { margin: var(--space-xs) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); counter-reset: dsm; }
.ds-cat--math ol li { counter-increment: dsm; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); padding: 0; border: 0; color: var(--color-ink-2); }
.ds-cat--math ol li::before { content: counter(dsm); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint-2); font: 600 12px/1 var(--font-outlier); color: var(--opal-2); }
.ds-grades { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2xs); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.ds-grades li { display: grid; gap: var(--space-2xs); padding: var(--space-xs) var(--space-xs) var(--space-sm); border: 0; border-radius: var(--r-nest); background: var(--color-paper); border-top: 4px solid var(--g); }
.ds-grades b { font: 500 var(--text-lg)/1 var(--font-display); color: var(--g); }
.ds-grades span { font: 500 12px/1 var(--font-outlier); color: var(--color-muted); }
.ds-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; margin-top: auto; color: var(--color-ink); font-weight: 600; text-decoration: none; }
.ds-link svg { width: 16px; height: 16px; transition: translate var(--dur-short) var(--ease-out); }
.ds-link:hover svg { translate: 4px 0; }

/* ---------- steal the style ---------- */
.ds-style-grid { margin-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.ds-formats { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.ds-formats li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-md); align-items: start; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--r-tile); background: var(--color-paper-2); }
.ds-formats .ds-cat-ico { color: var(--opal-2); }
.ds-formats b { display: block; font-weight: 600; }
.ds-formats code { color: var(--opal-2); font-size: 12px; }
.ds-formats span { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.ds-swatches { margin: var(--space-lg) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); }
.ds-swatches button { display: grid; gap: var(--space-2xs); width: 100%; padding: var(--space-2xs) var(--space-2xs) var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--r-nest); background: var(--color-paper-2); color: var(--color-ink); font: inherit; text-align: left; cursor: copy; transition: border-color var(--dur-short) var(--ease-out); }
.ds-swatches button:hover { border-color: var(--color-ink-2); }
.ds-swatches button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ds-swatches button.is-done { border-color: var(--opal-2); }
.ds-swatches i { height: 40px; border-radius: 8px; background: var(--sw); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.14); }
.ds-swatches b { padding-inline: var(--space-2xs); font: 500 12px/1.2 var(--font-outlier); }
.ds-swatches span { padding-inline: var(--space-2xs); font-size: 12px; color: var(--color-muted); text-transform: capitalize; }
.ds-swatch-cap { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--ink-quiet); }

.ds-code { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--glass-edge); border-radius: var(--r-card); background: linear-gradient(160deg, var(--tint-2), var(--tint-1) 60%), var(--color-paper-2); }
.ds-code-bar { display: flex; align-items: center; gap: var(--space-xs); min-height: 52px; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border-bottom: 1px solid var(--glass-edge); }
.ds-code-bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--tint-3); }
.ds-code-name { margin-left: var(--space-xs); font: 500 12px/1 var(--font-outlier); color: var(--ink-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-code-bar .copy { margin-left: auto; min-height: 36px; }
.ds-tablist { display: flex; gap: var(--space-2xs); padding: var(--space-xs) var(--space-xs) 0; overflow-x: auto; scrollbar-width: none; }
.ds-tablist::-webkit-scrollbar { display: none; }
.ds-tablist button { flex: none; min-height: 36px; padding: 0 var(--space-sm); border: 1px solid transparent; border-radius: var(--r-nest); background: transparent; color: var(--color-muted); font: 500 var(--text-xs)/1 var(--font-body); cursor: pointer; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.ds-tablist button:hover { color: var(--color-ink); }
.ds-tablist button[aria-selected="true"] { background: var(--color-paper-3); border-color: var(--color-rule-2); color: var(--color-ink); }
.ds-tablist button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ds-pre { margin: 0; max-height: 480px; overflow: auto; padding: var(--space-md) var(--space-lg) var(--space-lg); font: 400 13px/1.6 var(--font-code); color: var(--color-ink-2); white-space: pre; tab-size: 2; scrollbar-width: thin; scrollbar-color: var(--color-rule-2) transparent; }
.ds-pre:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.ds-pre--wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.ds-pre code { font-size: inherit; }
.ds-code-cap { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--glass-edge); font-size: var(--text-xs); color: var(--ink-quiet); }
.t-h { color: var(--color-ink); font-weight: 500; } .t-p { color: var(--ink-quiet); } .t-m { color: var(--color-muted); } .t-q { color: var(--color-muted); }
.t-k { color: var(--opal-1); } .t-s { color: var(--opal-2); } .t-n { color: var(--opal-3); } .t-c { color: var(--opal-2); } .t-b { color: var(--color-ink); font-weight: 500; }

/* ---------- fix it with your agent ---------- */
.ds-loop { position: relative; margin: var(--space-2xl) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); }
.ds-loop::before { content: ""; position: absolute; left: 16%; right: 16%; top: 48px; height: 2px; background: linear-gradient(90deg, var(--opal-1), var(--opal-2) 50%, var(--opal-1)); opacity: 0.6; }
.ds-loop li { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--space-xs); text-align: center; }
.ds-node { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--glass-edge); background: var(--color-paper-2); box-shadow: 0 0 0 8px var(--color-paper); }
.ds-node svg { width: 28px; height: 28px; color: var(--opal-2); }
.ds-node svg.ds-node-ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.ds-node .ds-nt { stroke: var(--tint-2); stroke-width: 4; }
.ds-node .ds-nv { stroke: var(--c); stroke-width: 4; stroke-dasharray: var(--s) 100; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ds-node b { font: 500 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.04em; }
.ds-loop h3 { margin-top: var(--space-sm); font-size: var(--text-lg); }
.ds-loop p { max-width: 30ch; font-size: var(--text-sm); color: var(--color-muted); }
.ds-loop code { font-size: 12px; color: var(--opal-2); }
.ds-again { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border: 1px solid var(--glass-edge); border-radius: var(--radius-pill); background: var(--color-paper-2); font: 500 var(--text-sm)/1.4 var(--font-outlier); color: var(--color-ink-2); }
.ds-again b { font-weight: 600; color: var(--ds-a); }
.ds-again s { text-decoration: none; color: var(--color-ink); }
.ds-again-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-xl); }
.ds-again-row small { font-size: var(--text-xs); color: var(--ink-quiet); }
.ds-fix-grid { margin-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-cards); align-items: start; }
.ds-agent { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--pad-card); border: 1px solid var(--glass-edge); border-radius: var(--r-card); background: radial-gradient(120% 70% at 100% 0%, var(--opal-1a), transparent 62%), linear-gradient(160deg, var(--tint-2), var(--tint-1) 60%), var(--color-paper-2); }
.ds-agent h3 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.ds-agent > p { color: var(--color-muted); font-size: var(--text-sm); }
.ds-say { display: flex; align-items: center; gap: var(--space-xs); min-height: 52px; padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md); border: 1px solid var(--glass-edge); border-radius: var(--r-tile); background: var(--color-paper); }
.ds-say code { flex: 1; min-width: 0; padding-block: var(--space-xs); font: 500 13px/1.4 var(--font-code); color: var(--color-ink); overflow-wrap: anywhere; }
.ds-say .copy { min-height: 36px; }
.ds-flow { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); counter-reset: dsf; }
.ds-flow li { counter-increment: dsf; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.ds-flow li::before { content: counter(dsf); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint-2); font: 600 12px/1 var(--font-outlier); color: var(--opal-2); }
.ds-flow code { font-size: 12px; color: var(--opal-2); white-space: nowrap; }
.ds-judged { padding: var(--space-md); border-radius: var(--r-tile); background: var(--color-paper); border: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.ds-judged b { color: var(--color-ink); font-weight: 500; }
.ds-expand { display: flex; justify-content: center; padding: var(--space-xs); border-top: 1px solid var(--glass-edge); }
.ds-expand button { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.ds-expand button:hover { background: var(--tint-2); color: var(--color-ink); }
.ds-expand button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ds-expand svg { width: 16px; height: 16px; transition: rotate var(--dur-short) var(--ease-out); }
.ds-expand button[aria-expanded="true"] svg { rotate: 180deg; }
.ds-pre.is-clamped { max-height: 360px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, var(--color-ink) 70%, transparent); mask-image: linear-gradient(to bottom, var(--color-ink) 70%, transparent); }

/* ---------- other ways to run ---------- */
.ds-ways { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cards); }
.ds-way { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--pad-card); border: 1px solid var(--color-rule); border-radius: var(--r-card); background: var(--color-paper-2); }
.ds-way-top { display: flex; align-items: center; gap: var(--space-sm); }
.ds-way h3 { font-size: var(--text-lg); letter-spacing: -0.015em; }
.ds-way-for { margin-left: auto; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--tint-2); font: 500 12px/1.2 var(--font-outlier); color: var(--color-muted); white-space: nowrap; }
.ds-way > p { color: var(--color-muted); font-size: var(--text-sm); }
.ds-way ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); counter-reset: dsw; }
.ds-way ol li { counter-increment: dsw; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.ds-way ol li::before { content: counter(dsw); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint-2); font: 600 12px/1 var(--font-outlier); color: var(--opal-2); }
.ds-way-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-sm); }
.ds-way-actions .btn { min-height: 44px; }
.ds-way .ds-pill { min-height: 52px; font-size: var(--text-md); }
.ds-way .ds-pill-ico { width: 40px; height: 40px; }
.ds-way .ds-pill-ico svg { width: 24px; height: 24px; }
.ds-size { font: 500 12px/1.2 var(--font-outlier); color: var(--ink-quiet); }
.ds-cmd { display: flex; align-items: center; gap: var(--space-xs); min-height: 52px; padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md); border: 1px solid var(--glass-edge); border-radius: var(--r-tile); background: var(--color-paper); }
.ds-cmd code { flex: 1; min-width: 0; padding-block: var(--space-xs); font: 500 13px/1.4 var(--font-code); color: var(--color-ink); overflow-wrap: anywhere; }
.ds-cmd code::before { content: "$ "; color: var(--opal-2); }
.ds-cmd .copy { min-height: 36px; }
.ds-way small { font-size: var(--text-xs); color: var(--ink-quiet); }
/* touch screens can't drag a link to a bookmarks bar: the ways that work without a mouse come first */
@media (hover: none) and (pointer: coarse) {
  .ds-hint { display: none; }
  .ds-hint-touch { display: block; }
  .ds-pill { cursor: pointer; }
  .ds-grip { display: none; }
  .ds-way--phone { order: -2; }
  .ds-way--agent { order: -1; } /* the console needs desktop DevTools, so it stays after these two */
}
/* without scripts: hide the controls that need them and show the clamped prompt in full */
html:not(.js) .ds-try, html:not(.js) .ds-code-bar .copy, html:not(.js) .ds-say .copy, html:not(.js) .ds-cmd .copy, html:not(.js) [data-copy-href], html:not(.js) [data-copy-src], html:not(.js) .ds-expand, html:not(.js) .ds-range { display: none; }
html:not(.js) .ds-pre.is-clamped { max-height: 480px; overflow: auto; -webkit-mask-image: none; mask-image: none; }

/* ---------- badge ---------- */
.ds-badge-grid { margin-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-cards); align-items: stretch; }
.ds-badge-card { display: grid; align-content: center; justify-items: center; gap: var(--space-lg); padding: var(--pad-card); border: 1px solid var(--glass-edge); border-radius: var(--r-card); background: radial-gradient(90% 70% at 50% 0%, var(--opal-2a), transparent 70%), var(--color-paper-2); text-align: center; }
.ds-shield { display: inline-flex; overflow: hidden; border-radius: 6px; font: 600 var(--text-md)/1 var(--font-body); box-shadow: 0 12px 32px -12px oklch(0% 0 0 / 0.6); }
.ds-shield span { padding: var(--space-xs) var(--space-sm); background: oklch(45% 0 0); color: oklch(100% 0 0); }
.ds-shield b { padding: var(--space-xs) var(--space-sm); background: var(--sh, oklch(77.4% 0.197 125.8)); color: var(--opal-ink); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color var(--dur-short) var(--ease-out); }
.ds-range { display: grid; gap: var(--space-xs); width: 100%; max-width: 320px; }
.ds-range-head { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.ds-range output { font: 600 var(--text-sm)/1 var(--font-outlier); color: var(--color-ink); }
.ds-range input { width: 100%; height: 24px; margin: 0; accent-color: var(--opal-2); cursor: pointer; }
.ds-range input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }
.ds-badge-code .ds-pre { max-height: none; }
.ds-badge-code .ds-pre code { color: var(--color-ink-2); }

/* ---------- privacy and limits ---------- */
.ds-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.ds-faq-side { position: sticky; top: 120px; display: grid; gap: var(--space-lg); }
.ds-faq-side .lead { color: var(--color-muted); max-width: 36ch; }
.ds-proof { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.ds-proof li { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.ds-proof svg { width: 20px; height: 20px; flex: none; color: var(--ds-a); }
.ds-qa { display: grid; border-top: 1px solid var(--color-rule); }
.ds-qa details { border-bottom: 1px solid var(--color-rule); }
.ds-qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding: var(--space-md) 0; cursor: pointer; list-style: none; font: 500 var(--text-lg)/1.3 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.ds-qa summary::-webkit-details-marker { display: none; }
.ds-qa summary::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--tint-2) linear-gradient(var(--color-ink-2), var(--color-ink-2)) center / 10px 2px no-repeat; transition: rotate var(--dur-short) var(--ease-out); }
.ds-qa details:not([open]) summary::after { background-image: linear-gradient(var(--color-ink-2), var(--color-ink-2)), linear-gradient(var(--color-ink-2), var(--color-ink-2)); background-size: 10px 2px, 2px 10px; }
.ds-qa summary:hover::after { background-color: var(--tint-3); }
.ds-qa summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }
.ds-qa details > div { display: grid; gap: var(--space-sm); padding: 0 var(--space-2xl) var(--space-lg) 0; color: var(--color-muted); }
.ds-qa details > div p { max-width: 64ch; }
.ds-qa code { font-size: 0.86em; color: var(--color-ink-2); }
@media (prefers-reduced-motion: no-preference) { .ds-qa details[open] > div { animation: ds-rise 360ms var(--ease-out) both; } }

/* ---------- closing card art: the loop closed, a ring at 93 over a ghost of 82 ---------- */
.ds-close-art { display: grid; place-items: center; }
.ds-close-art svg { width: 100%; max-width: 360px; height: auto; overflow: visible; fill: none; }
.ds-close-art .ds-cr { stroke: var(--opal-ink); stroke-width: 1; opacity: 0.2; }
.ds-close-art .ds-ct { stroke: var(--opal-ink); stroke-width: 14; opacity: 0.1; }
.ds-close-art .ds-cg { stroke: var(--opal-ink); stroke-width: 14; stroke-dasharray: 82 100; opacity: 0.22; stroke-linecap: round; }
.ds-close-art .ds-cv { stroke: var(--opal-ink); stroke-width: 14; stroke-dasharray: 93 100; stroke-linecap: round; }
.ds-close-art text { fill: var(--opal-ink); font-family: var(--font-display); }
.ds-close-art .ds-cn { font-size: 72px; font-weight: 500; letter-spacing: -0.04em; }
.ds-close-art .ds-cs { font-family: var(--font-outlier); font-size: 13px; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) { .js.fx .close-card.is-in .ds-cv { animation: ds-close 1000ms var(--ease-out) 300ms both; } }
@keyframes ds-close { from { stroke-dasharray: 82 100; } }

/* ---------- page toast ---------- */
.ds-toast { position: fixed; left: 50%; bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast); max-width: min(480px, calc(100vw - 32px)); padding: var(--space-sm) var(--space-md); border-radius: var(--r-tile); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; text-align: center; box-shadow: 0 16px 40px oklch(0% 0 0 / 0.5); opacity: 0; translate: -50% 8px; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), translate var(--dur-long) var(--ease-out); }
.ds-toast.is-on { opacity: 1; translate: -50% 0; }

/* ---------- responsive ---------- */
@media (max-width: 75rem) {
  .ds-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-cat--math { grid-column: auto; }
}
@media (max-width: 60rem) {
  .ds-hero { padding-block: var(--space-xl) var(--section-gap-s); }
  .ds-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .ds-hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .ds-hero h1, .ds-hero .lead { margin-inline: auto; }
  .ds-get, .ds-hint { justify-content: center; }
  .ds-hint-touch { margin-inline: auto; }
  .ds-panel { height: 704px; }
  .ds-head { flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); }
  .ds-head h2, .ds-head .lead { margin-inline: auto; }
  .ds-steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .ds-point-grid, .ds-style-grid, .ds-fix-grid, .ds-badge-grid, .ds-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-point-grid { grid-template-areas: "demo" "pick" "exs"; row-gap: var(--gap-columns); }
  .ds-ways { grid-template-columns: minmax(0, 1fr); }
  .ds-faq-side { position: static; text-align: center; justify-items: center; }
  .ds-faq-side h2, .ds-faq-side .lead { margin-inline: auto; }
  .ds-loop::before { left: 22%; right: 22%; }
  .ds-again-row { flex-direction: column; text-align: center; }
  .ds-shot { justify-items: center; }
}
@media (max-width: 40rem) {
  .ds-tag { margin-bottom: var(--space-md); }
  .ds-get { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; }
  .ds-pill, .ds-try { justify-content: center; }
  .ds-pill { padding-right: var(--space-lg); }
  .ds-panel { height: 640px; }
  .ds-cards { grid-template-columns: minmax(0, 1fr); }
  .ds-loop { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  /* stacked steps: no line through the text, a short connector in each gap instead, from the text above to the next node */
  .ds-loop::before { display: none; }
  .ds-loop li + li::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--space-xl) + var(--space-xs)); width: 2px; height: calc(var(--space-xl) - var(--space-xs) * 2); translate: -1px 0; border-radius: 1px; background: linear-gradient(180deg, var(--opal-1), var(--opal-2)); opacity: 0.6; }
  .ds-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-pre { padding: var(--space-md); font-size: 12px; }
  .ds-tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .ds-site { gap: var(--space-md); padding: var(--space-md) var(--space-md) 0; }
  .fs-links, .fs-signin { display: none; }
  .fs-hero { grid-template-columns: minmax(0, 1fr) 72px; gap: var(--space-md); }
  .fs-art { height: 64px; }
  .fs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
  .fs-card:last-child { grid-column: 1 / -1; }
  .fs-foot { margin-inline: calc(-1 * var(--space-md)); padding-inline: var(--space-md); }
  .ds-qa summary { font-size: var(--text-md); }
  .ds-qa details > div { padding-right: 0; }
  .ds-grades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-way-top { display: grid; grid-template-columns: 40px minmax(0, 1fr); }
  .ds-way-for { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-pill, .ds-pill:hover, .ds-pill:active { transform: none; transition: none; }
  .ds-bar i { transition: none; }
  .ds-drop { transition: none; }
}
@media (forced-colors: active) {
  .ds-pill { border: 2px solid ButtonText; }
  .ds-bar i, .ds-weights span { background: Highlight; }
  .ds-site [data-hl]::before { border-color: Highlight; }
}