/* The live demos (demo-*.html) and the small pages (credits.html, privacy.html): a result entering the panel
   (demo.js:present), the job progress in the status line, the frame viewer, the looped "How it works" animations
   (demo-how.js) and hover polish. The tokens come from main.css; nothing here moves under prefers-reduced-motion,
   and ?static never adds the classes that animate. */

:root {
  --how-surface: #0f1220;
  --how-a: #4dabf7;
  --how-b: #ff922b;
  --how-c: #be4bdb;
  --how-z: #34d399;
}
:root[data-theme="light"] {
  --how-surface: #ffffff;
  --how-a: #1c7ed6;
  --how-b: #e8590c;
  --how-c: #ae3ec9;
  --how-z: #0ca678;
}

/* a result entering: [data-enter] elements, staggered by --i */
.fig-media { position: relative; border-radius: 12px; overflow: hidden; }
.fig-media img { display: block; }
.enter { --enter-delay: calc(var(--i, 0) * 110ms); }
.enter-fade { animation: d-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: var(--enter-delay); }
.enter-pop { animation: d-pop 0.6s cubic-bezier(0.3, 1.4, 0.4, 1) backwards; animation-delay: var(--enter-delay); }
.enter-wipe, .enter-sweep, .enter-iris { animation: d-fade 0.3s ease backwards; animation-delay: var(--enter-delay); }
.enter-wipe .fig-media img { animation: d-wipe 1.05s cubic-bezier(0.55, 0, 0.25, 1) backwards; animation-delay: calc(var(--enter-delay) + 0.15s); }
.enter-sweep .fig-media img { animation: d-sweep 1.05s cubic-bezier(0.55, 0, 0.25, 1) backwards; animation-delay: calc(var(--enter-delay) + 0.15s); }
.enter-iris .fig-media img { animation: d-iris 1s cubic-bezier(0.4, 0, 0.2, 1) backwards; animation-delay: calc(var(--enter-delay) + 0.1s); }
/* the bright edge that writes a wiped field, left to right, or an error map, top to bottom */
.enter-wipe .fig-media::after, .enter-sweep .fig-media::after {
  content: ""; position: absolute; opacity: 0; pointer-events: none; background: rgb(var(--seam-rgb));
  box-shadow: 0 0 16px 2px rgba(var(--seam-rgb), 0.85);
}
.enter-wipe .fig-media::after { top: 0; bottom: 0; width: 2px; animation: d-edge-x 1.05s cubic-bezier(0.55, 0, 0.25, 1) backwards; animation-delay: calc(var(--enter-delay) + 0.15s); }
.enter-sweep .fig-media::after { left: 0; right: 0; height: 2px; animation: d-edge-y 1.05s cubic-bezier(0.55, 0, 0.25, 1) backwards; animation-delay: calc(var(--enter-delay) + 0.15s); }

@keyframes d-fade { from { opacity: 0; } }
@keyframes d-rise { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes d-pop { from { opacity: 0; transform: scale(0.82); } }
@keyframes d-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes d-sweep { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes d-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes d-edge-x { 0% { left: 0; opacity: 1; } 90% { left: calc(100% - 2px); opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } }
@keyframes d-edge-y { 0% { top: 0; opacity: 1; } 90% { top: calc(100% - 2px); opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }

/* the result's numbers: a key and a value that counts up, badge by badge */
.numbers .k { font-style: normal; color: var(--muted); margin-right: 6px; }
.numbers b { color: var(--text); font-weight: 700; }
.numbers.arrive > span { animation: d-pop 0.5s cubic-bezier(0.3, 1.4, 0.4, 1) backwards; animation-delay: calc(0.35s + var(--i, 0) * 80ms); }
.numbers span { transition: border-color 0.2s, background 0.2s; }
.numbers span:hover { border-color: var(--border-strong); background: var(--surface-2); }

/* result figures: a lift on hover, and a click zooms them (lightbox.js) */
.trio figure, .quad figure, .perturb-grid figure { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.trio figure:hover, .quad figure:hover, .perturb-grid figure:hover { transform: translateY(-3px); }
.fig-media img.zoomable:hover { box-shadow: none; }
.fig-media:has(img.zoomable) { transition: box-shadow 0.2s; }
.fig-media:has(img.zoomable):hover { box-shadow: 0 0 0 2px var(--accent), 0 16px 34px -18px rgba(var(--accent-rgb), 0.8); }

/* the job in the status line: a bar that runs while queued and fills while the model runs */
.status { flex-wrap: wrap; }
.status .status-text { flex: 1 1 0; min-width: 0; }
.status .clock { flex: none; font-family: var(--mono); font-size: 0.82rem; color: var(--muted); }
.job-bar { flex: 1 0 100%; height: 5px; border-radius: 5px; background: var(--surface-2); overflow: hidden; position: relative; }
.job-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 5px; background: var(--grad); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6); }
.job-bar.queued i { width: 32%; animation: d-shuttle 1.6s ease-in-out infinite alternate; background: linear-gradient(90deg, transparent, rgba(var(--cyan-rgb), 0.9), transparent); box-shadow: none; }
@keyframes d-shuttle { from { left: -32%; } to { left: 100%; } }
.status.ok { animation: d-pop 0.45s cubic-bezier(0.3, 1.4, 0.4, 1); }
.status.ok::before { content: "\2713"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-deep); color: #fff; font-weight: 800; font-size: 0.8rem; flex: none; }

/* the result panel while a job is queued or running: a light sweeps across what it shows */
#result[data-phase]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 35%, rgba(var(--accent-rgb), 0.09) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; animation: d-sheen 2.2s linear infinite;
}
#result[data-phase="running"]::before { animation-duration: 1.2s; }
@keyframes d-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* the idle placeholder */
.result-stage .idle-canvas { animation: d-fade 0.9s ease backwards; }
.result-stage .idle-phase { display: block; margin-top: 6px; font-family: var(--mono); font-size: 0.8rem; color: var(--accent); min-height: 1.3em; }

/* the frame viewer: two stacked frames that cross-fade, a track of the frames under the slider */
.viewer .frame-box img { position: absolute; inset: 0; transition: opacity 0.16s linear; }
.viewer .frame-box { box-shadow: 0 30px 70px -36px rgba(var(--accent-rgb), 0.6); }
.viewer .coef { min-width: 7.5ch; text-align: right; transition: transform 0.15s; }
.viewer .coef.tick { transform: scale(1.06); }
.viewer .frame-ticks { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 4px; }
.viewer .frame-ticks button { flex: 0 1 10px; min-width: 0; height: 10px; padding: 0; border: none; background: none; cursor: pointer; display: grid; place-items: center; }
/* the ticks and the slider shrink with a narrow viewer (25 frames on a phone) */
.viewer .readout > div { min-width: 0; }
.viewer .frame-ticks { gap: 1px; }
.viewer .frame-ticks button::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); transition: transform 0.2s, background 0.2s; }
.viewer .frame-ticks button.on::before { background: var(--yellow); transform: scale(1.9); box-shadow: 0 0 8px rgba(var(--yellow-rgb), 0.8); }
.viewer .frame-ticks button:hover::before { background: var(--text); transform: scale(1.6); }
.viewer .readout input[type=range]::-webkit-slider-thumb { transition: transform 0.15s; }
.viewer .readout input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); }
.play { transition: transform 0.2s, box-shadow 0.2s; }
.play:hover { transform: scale(1.07); }

/* "How it works": the looped animation of the concept, above the steps */
.how-anim { margin-top: 24px; padding: 16px; border-radius: var(--radius); background: var(--how-surface); border: 1px solid var(--border); box-shadow: 0 20px 50px -30px var(--shadow); }
.how-canvas { display: block; width: 100%; aspect-ratio: 2.5 / 1; }
.how-anim-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 14px; font-size: 0.84rem; color: var(--muted); }
.how-anim-foot .segmented { width: auto; }
.how-anim-foot .segmented button { white-space: nowrap; padding: 6px 12px; font-size: 0.82rem; }
.how-anim-foot .tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
@media (max-width: 700px) { .how-canvas { aspect-ratio: 0.95 / 1; } .how-anim { padding: 12px; } }
/* the transition's and the directions' animations stack their fields and the sphere on a narrow screen, so their
   canvas is taller there */
@media (max-width: 700px) { .how-anim[data-how="interpolation"] .how-canvas, .how-anim[data-how="directions"] .how-canvas { aspect-ratio: 0.72 / 1; } }

/* hover polish of the cards and controls */
.how-step, .how-step.reveal { transition: opacity 0.7s ease var(--reveal-delay, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms), translate 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, box-shadow 0.3s, background 0.3s; }
.how-step:hover { translate: 0 -4px; border-color: rgba(var(--accent-rgb), 0.5); box-shadow: 0 18px 40px -26px rgba(var(--accent-rgb), 0.8); }
/* the step the animation above is telling (demo-how.js) */
.how-step.live { border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.07); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 18px 40px -28px rgba(var(--accent-rgb), 0.9); }
.how-step .num { transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.4, 1); }
.how-step:hover .num { transform: scale(1.15) rotate(-8deg); }
.how-links a { transition: border-color 0.2s, transform 0.2s, background 0.2s; }
.how-links a:hover { transform: translateY(-2px); background: rgba(var(--accent-rgb), 0.08); }
.segmented button { transition: background 0.25s, color 0.25s; }
.fi-thumb, .sample-set, .dir-option, .slot, .examples button, .chip { transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s; }
.fi-thumb:hover, .sample-set:hover, .dir-option:hover, .slot:hover { transform: translateY(-2px); }
.dir-option:hover { border-color: var(--border-strong); color: var(--text); }
.examples button:hover { transform: translateY(-1px); }
.match { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.2s, box-shadow 0.25s; }
.match:hover { box-shadow: 0 16px 30px -18px rgba(var(--accent-rgb), 0.9); }
.match canvas { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.match:hover canvas { transform: scale(1.05); }
.match .rank { position: absolute; top: 6px; left: 6px; z-index: 1; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: var(--tag-bg); color: var(--tag-text); }
button.match { position: relative; display: flex; flex-direction: column; justify-content: flex-start; }
.match .media { overflow: hidden; }
.search-query { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.search-query img { width: 96px; height: 96px; border-radius: 10px; flex: none; box-shadow: 0 0 0 2px var(--yellow); }

/* the small pages */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 10px; }
.facts > div { padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.facts > div:hover { translate: 0 -3px; border-color: rgba(var(--accent-rgb), 0.5); }
.facts b { display: block; font-size: 2rem; line-height: 1.1; font-weight: 800; }
.facts span { color: var(--muted); font-size: 0.88rem; line-height: 1.45; display: block; margin-top: 4px; }
@media (max-width: 680px) { .facts { grid-template-columns: 1fr; } }
.credits li { padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); list-style: none; }
.credits li:hover { translate: 4px 0; border-color: rgba(var(--accent-rgb), 0.5); }
/* the reveal's own transitions (motion.css) kept next to the hover's */
.facts > div, .credits li { transition: opacity 0.7s ease var(--reveal-delay, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms), translate 0.2s, border-color 0.2s; }
.credits { padding-left: 0; }
.credits .lic { display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: 0.72rem; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .enter, .enter img, .enter .fig-media::after, .numbers.arrive > span, .status.ok, .result-stage .idle-canvas, #result[data-phase]::before, .job-bar.queued i { animation: none !important; }
  .how-step:hover, .facts > div:hover, .credits li:hover { translate: none; }
  .how-links a:hover, .fi-thumb:hover, .sample-set:hover, .dir-option:hover, .slot:hover { transform: none; }
}

/* a result waiting to enter until it is in view (demo.js:present) */
.presenting [data-enter], .presenting .numbers > span { opacity: 0; }

/* the gap-filling demo's four fields: four across, two on a phone */
.quad.inpaint-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .quad.inpaint-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the reconstruction among the perturbations, ringed (the ring sits on its frame, which clips the image) */
.perturb-grid figure.original .fig-media { box-shadow: 0 0 0 2px var(--yellow); }
.perturb-grid .fig-media { border-radius: 12px; }
.match .info em { font-style: normal; }
.viewer .coef { white-space: nowrap; }
@media (max-width: 600px) { .viewer .coef { font-size: 1.15rem; min-width: 0; } }

/* the idle placeholder and the how-it-works canvas in boxes of their own, for the shared pause/play button */
.result-stage .idle-wrap { width: min(300px, 72%); margin: 0 auto 14px; }
.result-stage .idle-wrap .idle-canvas { width: 100%; margin: 0; }
.idle-wrap .stage-play { right: 0; bottom: 0; width: 30px; height: 30px; }
.idle-wrap .stage-play svg { width: 13px; height: 13px; }
.how-canvas-wrap .stage-play { right: 4px; bottom: 38px; width: 32px; height: 32px; }
.how-canvas-wrap .stage-play svg { width: 14px; height: 14px; }

/* the extrapolation window over its input (demo.js:windowPicker) */
.painter.window-picker { cursor: default; }
.window-picker .hint { place-items: end center; padding-bottom: 14px; color: var(--text); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

/* the key of the field colormap among a result's numbers (demo.js:fieldKey) */
.numbers .field-key { display: inline-flex; align-items: center; gap: 6px; }
.numbers .field-key .field-key-bar { display: inline-block; width: 80px; height: 9px; border-radius: 3px; border: 1px solid var(--border); }

/* the note at the top of a result computed from one partition (demo.js:singleNote) */
.single-note {
  margin: 0 auto 16px; max-width: 560px; padding: 10px 14px; border-radius: 12px; font-size: 0.86rem; line-height: 1.45;
  color: var(--text-soft); background: rgba(var(--cyan-rgb), 0.08); border: 1px solid rgba(var(--cyan-rgb), 0.35);
}

/* the direction a result was computed with, its two anchors A -> B under the output (demo-directions.js) */
.dir-anchors { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px auto 0; max-width: 560px; }
.dir-anchors figure { margin: 0; text-align: center; }
.dir-anchors img { width: 76px; height: 76px; border-radius: 10px; display: block; background: var(--well); }
.dir-anchors figcaption { font-size: 0.76rem; color: var(--muted); margin-top: 4px; }
.dir-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--accent); font-size: 1.6rem; line-height: 1; min-width: 0; }
.dir-arrow span { font-size: 0.78rem; font-weight: 600; color: var(--text-soft); text-align: center; }

/* a step card of "How it works" plays the animation from its stage when clicked (demo-how.js) */
.how-step.jumpable { cursor: pointer; }
.how-step.jumpable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* a setting fixed by the pre-computed sample on show (demo.js:lockSettings): greyed out, with a tooltip saying why */
select.sample-locked, input.sample-locked { opacity: 0.45; cursor: not-allowed; filter: grayscale(1); }
label.sample-locked, .field.sample-locked { color: var(--faint); }

/* the upsampling result's view toggle (Field / Error), centred above the figures; two figures share a row */
.view-toggle { justify-self: center; width: fit-content; display: inline-flex; }
.view-toggle button:disabled { opacity: 0.45; cursor: not-allowed; }
.trio.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin: 0 auto; }
@media (max-width: 760px) { .trio.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the derivatives demo: per component of the gradient, the truth | decoding slider and the absolute error, four
   squares in two rows; the function itself with the input, in the left panel */
.grad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; margin-top: 12px; }
.grad-grid figure { margin: 0; }
.grad-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; }
.grad-grid figcaption { font-size: 0.84rem; color: var(--muted); text-align: center; margin-top: 6px; }
.grad-slider { position: relative; }
.grad-zoom {
  position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--handle-bg); color: var(--text); cursor: zoom-in; font-size: 0.95rem; display: grid; place-items: center; padding: 0;
}
.grad-zoom:hover { background: var(--accent-deep); color: #fff; }
.fn-preview { margin: 12px auto 0; width: min(200px, 70%); }
.fn-preview img { width: 100%; aspect-ratio: 1; border-radius: 10px; }
.fn-preview figcaption { font-size: 0.8rem; color: var(--muted); text-align: center; margin-top: 4px; }
@media (max-width: 560px) { .grad-grid { gap: 10px; } }

/* the latent search: the query beside its single-partition reconstruction and error, a bar under every match for its
   chord distance over the whole range [0, 1], and the bank explorer in a panel below the result */
.search-query { flex-wrap: wrap; }
.sq-figs { display: flex; gap: 10px; flex: none; }
.sq-fig { margin: 0; text-align: center; }
.search-query .sq-fig img, .search-query .sq-fig canvas { width: 96px; height: 96px; border-radius: 10px; display: block; box-shadow: none; image-rendering: auto; }
.search-query .sq-fig.ring img, .search-query .sq-fig.ring canvas { box-shadow: 0 0 0 2px var(--yellow); }
.sq-fig figcaption { margin-top: 5px; font-size: 0.72rem; color: var(--muted); }
.sq-text { flex: 1 1 220px; min-width: 0; }
.match .info .chord { display: block; margin-top: 6px; }
.match .info .chord-track { display: block; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.match .info .chord-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.match .info .chord-ends { display: flex; justify-content: space-between; margin-top: 2px; font-size: 0.62rem; color: var(--faint); }
.bank-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.bank-head .setting { min-width: 240px; }
.bank-head select { width: 100%; }
.match-grid.bank-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 10px 0 8px; }
@media (max-width: 1200px) and (min-width: 981px), (max-width: 760px) { .match-grid.bank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .match-grid.bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bank-head .setting { min-width: 0; width: 100%; } }

/* the reconstruction demo's result: the reconstruction above its error, the function beside them with the input points
   below it, the partitions to the side (two columns on a phone, the partitions last) */
/* the reconstruction's small frames under its slider: the input points, the error and the partitions, in one row */
.quad.recon-quad { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; margin: 0 auto; }
@media (max-width: 760px) { .quad.recon-quad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
/* the reconstruction's slider: a field on the unit disk, transparent outside it, so the slider is the disk itself (no
   well behind it), its labels inside the disk */
.compare.round { border-radius: 50%; background: none; }
.compare.round .tag { top: auto; bottom: 22%; }
.compare.round .tag.l { left: 9%; } .compare.round .tag.r { right: 9%; bottom: 22%; }

/* outpainting: the observed window is dragged on a preview of the input in the settings bar (demo.js:windowPicker) */
.settings-bar .setting-window { flex: 0 0 auto; }
.settings-bar .setting-window .painter { width: 200px; max-width: 100%; }
@media (max-width: 560px) { .settings-bar .setting-window { flex-basis: 100%; align-items: center; } .settings-bar .setting-window .painter { width: min(260px, 100%); } }
/* the observed window framed on the outpainting's comparison: its outline in the accent, a soft veil over the rest */
.window-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.window-frame .veil { fill: var(--bg); fill-opacity: 0.28; fill-rule: evenodd; }
.window-frame .edge { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }

/* the inpainting demo's holes, on a transparent layer over the input's preview (demo-inpaint.js): it shows a preset's
   holes and, with "Paint your own" in the settings bar, takes the pointer as the paint surface */
.fi-stage .painter.mask-overlay { background: transparent; pointer-events: none; z-index: 1; cursor: default; }
.mask-overlay > canvas:first-child, .mask-overlay .hint { display: none; }
.fi-stage .painter.mask-overlay.active { pointer-events: auto; cursor: crosshair; box-shadow: inset 0 0 0 2px var(--accent); }
/* the outpainting bar: the window preview first, its controls centred beside it */
.settings-bar.window-bar { align-items: center; }
/* a demo with no settings (the latent search): no bar above the input and the result */
.demo-layout.no-bar { grid-template-areas: "input result"; }
@media (max-width: 980px) { .demo-layout.no-bar { grid-template-areas: "input" "result"; } }
/* the heading of the search's matches, with the switch that leaves the query's family out */
.matches-head { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 4px 0 12px; }
.switch-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.86rem; color: var(--text-soft); }
.switch-row input { width: 34px; height: 18px; appearance: none; -webkit-appearance: none; margin: 0; flex: none; border-radius: 999px; background: var(--border); position: relative; cursor: pointer; transition: background 0.2s; }
.switch-row input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text); transition: transform 0.2s; }
.switch-row input:checked { background: var(--accent); }
.switch-row input:checked::after { transform: translateX(16px); background: #fff; }
.switch-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-row small { display: block; color: var(--muted); font-size: 0.74rem; }

/* a demo whose "How it works" lives in an article: one card pointing to it (the Derivatives demo) */
.how-pointer { display: flex; align-items: center; gap: 18px; padding: 18px 22px; margin-top: 14px; color: var(--text); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.how-pointer:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); }
.how-pointer-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); font-size: 1.9rem; font-weight: 700; }
.how-pointer-text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.how-pointer-text b { font-size: 1.08rem; }
.how-pointer-text span { color: var(--muted); font-size: 0.92rem; }
.how-pointer .go { color: var(--cyan); font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) { .how-pointer { flex-wrap: wrap; } .how-pointer .go { width: 100%; } }