:root {
  --examples-bg: #020d18;
  --examples-panel: #071a29;
  --examples-panel-2: #0b2232;
  --examples-ink: #f4fbff;
  --examples-muted: #a8bccb;
  --examples-cyan: #43d5e7;
  --examples-green: #28d69b;
  --examples-gold: #f3c44f;
  --examples-line: rgba(94, 219, 236, .22);
  --examples-line-strong: rgba(94, 219, 236, .5);
  --examples-shadow: rgba(0, 0, 0, .42);
  --examples-fast: 180ms;
  --examples-standard: 280ms;
  --examples-deliberate: 520ms;
}

html[data-theme="light"] {
  --examples-bg: #edf7fb;
  --examples-panel: #ffffff;
  --examples-panel-2: #dfeff5;
  --examples-ink: #07131f;
  --examples-muted: #4e6270;
  --examples-cyan: #087e96;
  --examples-green: #087b61;
  --examples-gold: #946500;
  --examples-line: rgba(15, 109, 133, .21);
  --examples-line-strong: rgba(15, 109, 133, .48);
  --examples-shadow: rgba(16, 81, 102, .15);
}

* { box-sizing: border-box; }

html { overflow-x: clip; }

body.atlas-examples-world {
  margin: 0;
  overflow-x: clip;
  background: var(--examples-bg);
  color: var(--examples-ink);
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.58;
}

body.atlas-examples-world::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background-image:
    linear-gradient(var(--examples-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--examples-line) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .11;
  pointer-events: none;
}

.examples-world {
  width: min(100%, 2320px);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 52px) clamp(16px, 4vw, 80px) calc(132px + env(safe-area-inset-bottom));
}

.examples-world h1,
.examples-world h2,
.examples-world h3,
.examples-world p { margin-top: 0; }

.examples-world h1,
.examples-world h2,
.examples-world h3,
.examples-world p,
.examples-world a,
.examples-world button,
.examples-world span,
.examples-world strong,
.examples-world small,
.examples-world dt,
.examples-world dd { letter-spacing: 0; }

.examples-world h1,
.examples-world h2,
.examples-world h3 { line-height: 1.04; }

.examples-kicker {
  margin-bottom: 14px;
  color: var(--examples-cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.35;
  text-transform: uppercase;
}

.examples-hero {
  min-height: min(820px, calc(100svh - 80px));
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, .98fr);
  align-items: center;
  gap: clamp(42px, 7vw, 150px);
  padding: clamp(32px, 6vw, 106px) 0 clamp(52px, 7vw, 118px);
  border-bottom: 1px solid var(--examples-line);
}

.examples-hero__copy { max-width: 1000px; }

.examples-hero h1 {
  max-width: 960px;
  margin-bottom: 24px;
  color: var(--examples-ink);
  font-size: clamp(3rem, 7.2vw, 8.2rem);
  font-weight: 950;
}

.examples-hero__lead {
  max-width: 810px;
  margin-bottom: 30px;
  color: var(--examples-muted);
  font-size: clamp(1.06rem, 1.8vw, 1.52rem);
  line-height: 1.55;
}

.examples-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.examples-action {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 1px solid var(--examples-line-strong);
  border-radius: 6px;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  transition: transform var(--examples-fast) ease, background-color var(--examples-fast) ease, border-color var(--examples-fast) ease;
}

.examples-action:active { transform: scale(.98); }
.examples-action:focus-visible,
.examples-world button:focus-visible { outline: 3px solid var(--examples-gold); outline-offset: 3px; }
.examples-action--primary { background: var(--examples-cyan); border-color: var(--examples-cyan); color: #03131b; }
.examples-action--secondary { background: var(--examples-panel); color: var(--examples-ink); }

.examples-signals {
  max-width: 780px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 38px 0 0;
  border-top: 1px solid var(--examples-line);
  border-bottom: 1px solid var(--examples-line);
}

.examples-signals > div { padding: 18px 14px 18px 0; }
.examples-signals > div + div { padding-left: 18px; border-left: 1px solid var(--examples-line); }
.examples-signals dt { color: var(--examples-cyan); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(1.35rem, 3vw, 2.5rem); font-weight: 950; line-height: 1; }
.examples-signals dd { margin: 7px 0 0; color: var(--examples-muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; }

.examples-hero__visual { min-width: 0; position: relative; display: grid; place-items: center; }
.examples-orbit { width: 92%; aspect-ratio: 1; position: absolute; border: 1px solid var(--examples-line-strong); border-radius: 50%; }
.examples-orbit::before,
.examples-orbit::after,
.examples-orbit i { position: absolute; inset: 10%; border: 1px solid var(--examples-line); border-radius: 50%; content: ""; }
.examples-orbit::after { inset: 25%; }
.examples-orbit i:nth-child(1) { transform: rotate(56deg) scaleY(.42); border-color: color-mix(in srgb, var(--examples-green) 62%, transparent); }
.examples-orbit i:nth-child(2) { transform: rotate(-44deg) scaleY(.56); }
.examples-orbit i:nth-child(3) { inset: 47%; background: var(--examples-green); border: 0; box-shadow: 0 0 34px color-mix(in srgb, var(--examples-green) 70%, transparent); }

.examples-file-stack { width: min(100%, 510px); position: relative; z-index: 1; padding: 40px 28px 20px; }
.examples-file-stack__back { position: absolute; top: 12%; bottom: 7%; width: 76%; display: flex; align-items: flex-end; gap: 8px; padding: 16px; background: var(--examples-panel-2); border: 1px solid var(--examples-line-strong); border-radius: 8px; box-shadow: 0 24px 70px var(--examples-shadow); color: var(--examples-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; }
.examples-file-stack__back--one { right: 0; transform: rotate(8deg) translateX(4%); }
.examples-file-stack__back--two { left: 0; transform: rotate(-7deg) translateX(-4%); }
.examples-file-stack__back span { color: var(--examples-cyan); }

.examples-file-card { width: 74%; margin: 0 auto; position: relative; z-index: 2; overflow: hidden; background: #020b14; border: 2px solid var(--examples-line-strong); border-radius: 18px; box-shadow: 0 40px 94px var(--examples-shadow); }
.examples-file-card__bar { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 13px; color: #bed0db; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .67rem; font-weight: 900; }
.examples-file-card__bar i { width: 8px; height: 8px; background: var(--examples-green); border-radius: 50%; }
.examples-file-card__bar b { margin-left: auto; color: var(--examples-green); }
.examples-file-card__viewport { aspect-ratio: .69; overflow: hidden; border-block: 1px solid rgba(94, 219, 236, .3); }
.examples-theme-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.examples-theme-image--day { display: none; }
.examples-file-card figcaption { display: grid; gap: 2px; padding: 14px; }
.examples-file-card figcaption strong { color: #f4fbff; font-size: .84rem; }
.examples-file-card figcaption span { color: #9fb4c3; font-size: .7rem; }
html[data-theme="light"] .examples-theme-image--night { display: none; }
html[data-theme="light"] .examples-theme-image--day { display: block; }

.examples-loop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--examples-line);
}
.examples-loop li { min-height: 90px; display: flex; align-items: center; gap: 14px; padding: 18px clamp(10px, 2vw, 28px); }
.examples-loop li + li { border-left: 1px solid var(--examples-line); }
.examples-loop span { color: var(--examples-cyan); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 900; }
.examples-loop b { color: var(--examples-muted); font-size: .92rem; }

.examples-lanes,
.examples-anatomy,
.examples-proof { padding: clamp(72px, 9vw, 168px) 0; }

.examples-section-heading { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); align-items: end; gap: clamp(24px, 5vw, 96px); margin-bottom: clamp(34px, 5vw, 70px); }
.examples-section-heading h2,
.examples-anatomy h2,
.examples-proof h2,
.examples-close h2 { max-width: 1200px; margin-bottom: 0; font-size: clamp(2.25rem, 5.3vw, 6rem); font-weight: 950; }
.examples-section-heading > p { margin-bottom: 0; color: var(--examples-muted); font-size: clamp(1rem, 1.45vw, 1.22rem); }

.examples-lane-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.examples-lane-tabs button { min-height: 86px; display: grid; align-content: center; gap: 4px; padding: 12px; color: var(--examples-muted); background: var(--examples-panel); border: 1px solid var(--examples-line); border-radius: 6px; cursor: pointer; text-align: left; transition: transform var(--examples-fast) ease, color var(--examples-fast) ease, border-color var(--examples-fast) ease, background-color var(--examples-fast) ease; }
.examples-lane-tabs button:active { transform: scale(.98); }
.examples-lane-tabs button[aria-selected="true"] { color: #03131b; background: var(--examples-cyan); border-color: var(--examples-cyan); }
.examples-lane-tabs span { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 900; }
.examples-lane-tabs b { font-size: .92rem; }

.examples-lane-panel { min-height: 430px; position: relative; display: grid; grid-template-columns: minmax(190px, .45fr) minmax(0, 1.1fr) minmax(150px, .35fr); gap: clamp(24px, 4vw, 74px); align-items: center; padding: clamp(28px, 5vw, 76px); overflow: hidden; background: var(--examples-panel); border: 1px solid var(--examples-line-strong); border-radius: 8px; box-shadow: 0 26px 64px var(--examples-shadow); }
.examples-lane-panel::before { position: absolute; inset: 0; content: ""; background: linear-gradient(105deg, color-mix(in srgb, var(--examples-cyan) 9%, transparent), transparent 48%); pointer-events: none; }
.examples-lane-panel[data-changing="true"] > * { animation: examples-panel-settle var(--examples-standard) ease both; }
.examples-lane-panel__identity,
.examples-lane-panel__story,
.examples-lane-panel__seal { position: relative; z-index: 1; }
.examples-lane-panel__identity { display: grid; gap: 5px; }
.examples-lane-panel__identity p { margin: 0; color: var(--examples-cyan); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; font-weight: 900; }
.examples-lane-panel__identity strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(2.8rem, 6vw, 6.6rem); line-height: .95; }
.examples-lane-panel__identity span { color: var(--examples-muted); font-size: .9rem; }
.examples-lane-panel__story h3 { margin-bottom: 18px; font-size: clamp(1.7rem, 3vw, 3.5rem); font-weight: 950; }
.examples-lane-panel__story > p { max-width: 920px; color: var(--examples-muted); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.examples-lane-panel__story dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0; border-block: 1px solid var(--examples-line); }
.examples-lane-panel__story dl div { padding: 16px 0; }
.examples-lane-panel__story dl div + div { padding-left: 18px; border-left: 1px solid var(--examples-line); }
.examples-lane-panel__story dt { color: var(--examples-cyan); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.examples-lane-panel__story dd { margin: 5px 0 0; color: var(--examples-muted); font-size: .86rem; }
.examples-lane-panel__seal { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--examples-line-strong); border-radius: 50%; }
.examples-lane-panel__seal::before,
.examples-lane-panel__seal::after { position: absolute; inset: 12%; border: 1px solid var(--examples-line); border-radius: 50%; content: ""; }
.examples-lane-panel__seal::after { inset: 27%; border-color: var(--examples-green); }
.examples-lane-panel__seal span { color: var(--examples-cyan); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 900; line-height: 1.3; text-align: center; }
.examples-lane-panel__seal i { width: 8px; height: 8px; position: absolute; top: 9%; background: var(--examples-green); border-radius: 50%; box-shadow: 0 0 24px var(--examples-green); }

.examples-anatomy { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr); gap: clamp(38px, 7vw, 130px); align-items: center; border-block: 1px solid var(--examples-line); }
.examples-anatomy__copy > p:not(.examples-kicker) { max-width: 680px; color: var(--examples-muted); font-size: clamp(1rem, 1.45vw, 1.2rem); }
.examples-anatomy__tabs { display: grid; gap: 8px; margin-top: 32px; }
.examples-anatomy__tabs button { min-height: 72px; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 12px 16px; color: var(--examples-muted); background: transparent; border: 1px solid var(--examples-line); border-radius: 6px; cursor: pointer; text-align: left; }
.examples-anatomy__tabs button[aria-selected="true"] { color: var(--examples-ink); background: var(--examples-panel); border-color: var(--examples-line-strong); }
.examples-anatomy__tabs span { grid-row: 1 / 3; color: var(--examples-cyan); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 900; }
.examples-anatomy__tabs b { font-size: .95rem; }
.examples-anatomy__tabs small { font-size: .76rem; }
.examples-anatomy__viewer { min-width: 0; margin: 0; padding: 16px; background: var(--examples-panel); border: 1px solid var(--examples-line-strong); border-radius: 10px; box-shadow: 0 30px 78px var(--examples-shadow); }
.examples-anatomy__status { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px; color: var(--examples-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 900; }
.examples-anatomy__status b { color: var(--examples-green); }
.examples-anatomy__screen { aspect-ratio: 1.58; overflow: hidden; background: #020b14; border: 1px solid var(--examples-line); border-radius: 6px; }
.examples-anatomy__image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.examples-anatomy__image--day { display: none; }
html[data-theme="light"] .examples-anatomy__image--night { display: none; }
html[data-theme="light"] .examples-anatomy__image--day { display: block; }
.examples-anatomy__viewer[data-changing="true"] .examples-anatomy__screen { animation: examples-screen-settle var(--examples-standard) ease both; }
.examples-anatomy__viewer figcaption { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; padding: 18px 8px 4px; }
.examples-anatomy__viewer figcaption strong { color: var(--examples-ink); }
.examples-anatomy__viewer figcaption span { color: var(--examples-muted); }

.examples-proof { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: clamp(36px, 7vw, 126px); align-items: start; }
.examples-proof__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--examples-line); border-left: 1px solid var(--examples-line); }
.examples-proof__facts a { min-height: 200px; display: grid; align-content: end; gap: 5px; padding: clamp(22px, 3vw, 42px); color: var(--examples-ink); text-decoration: none; background: color-mix(in srgb, var(--examples-panel) 86%, transparent); border-right: 1px solid var(--examples-line); border-bottom: 1px solid var(--examples-line); transition: background-color var(--examples-fast) ease, transform var(--examples-fast) ease; }
.examples-proof__facts a:active { transform: scale(.985); }
.examples-proof__facts strong { color: var(--examples-cyan); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(2rem, 4vw, 4.2rem); line-height: 1; }
.examples-proof__facts span { color: var(--examples-muted); }
.examples-proof__facts b { margin-top: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; text-transform: uppercase; }

.examples-close { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; padding: clamp(62px, 8vw, 132px) 0; border-block: 1px solid var(--examples-line); }
.examples-close h2 { max-width: 1100px; }
.examples-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 34px 0 12px; color: var(--examples-muted); font-size: .82rem; }
.examples-footer p { margin: 0; }
.examples-footer p:last-child { text-align: right; }
.examples-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.examples-footer a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--examples-ink); text-decoration: none; }

@keyframes examples-panel-settle {
  from { transform: translateY(8px); opacity: .72; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes examples-screen-settle {
  from { transform: scale(.985); opacity: .7; }
  to { transform: scale(1); opacity: 1; }
}

@media (hover: hover) {
  .examples-action:hover { transform: translateY(-2px); }
  .examples-lane-tabs button:hover { border-color: var(--examples-line-strong); }
  .examples-proof__facts a:hover { background: var(--examples-panel-2); }
}

@media (max-width: 980px) {
  .examples-hero { grid-template-columns: 1fr; }
  .examples-hero__visual { width: min(100%, 620px); margin: 0 auto; }
  .examples-section-heading,
  .examples-anatomy,
  .examples-proof { grid-template-columns: 1fr; }
  .examples-lane-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .examples-lane-panel { grid-template-columns: minmax(150px, .36fr) minmax(0, 1fr); }
  .examples-lane-panel__seal { display: none; }
  .examples-close { grid-template-columns: 1fr; align-items: start; }
  .examples-footer { grid-template-columns: 1fr; }
  .examples-footer nav { justify-content: flex-start; }
  .examples-footer p:last-child { text-align: left; }
}

@media (max-width: 600px) {
  .examples-world { padding-inline: 16px; }
  .examples-hero { min-height: auto; grid-template-columns: minmax(0, 1fr) 138px; align-items: end; gap: 12px; padding: 28px 0 38px; overflow: clip; }
  .examples-hero__copy { min-width: 0; }
  .examples-hero h1 { margin-bottom: 16px; font-size: clamp(2.45rem, 11.5vw, 3.4rem); }
  .examples-hero__lead { margin-bottom: 18px; font-size: .96rem; line-height: 1.47; }
  .examples-hero .examples-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .examples-hero .examples-action { min-height: 52px; padding: 12px 10px; font-size: .72rem; text-align: center; }
  .examples-signals { grid-column: 1 / -1; margin-top: 20px; }
  .examples-signals > div { padding: 13px 8px 13px 0; }
  .examples-signals > div + div { padding-left: 10px; }
  .examples-signals dt { font-size: 1.35rem; }
  .examples-signals dd { font-size: .6rem; }
  .examples-hero__visual { width: 138px; align-self: center; }
  .examples-file-stack { width: 138px; padding: 14px 8px 8px; }
  .examples-file-stack__back { display: none; }
  .examples-file-card { width: 100%; border-radius: 10px; }
  .examples-file-card__bar { min-height: 28px; padding: 0 7px; font-size: .44rem; }
  .examples-file-card__viewport { aspect-ratio: .64; }
  .examples-file-card figcaption { padding: 7px; }
  .examples-file-card figcaption strong { font-size: .59rem; }
  .examples-file-card figcaption span { font-size: .48rem; }
  .examples-orbit { width: 140%; }
  .examples-loop { grid-template-columns: repeat(4, 128px); margin-inline: -16px; padding-inline: 16px; overflow-x: auto; scrollbar-width: none; }
  .examples-loop::-webkit-scrollbar { display: none; }
  .examples-loop li { min-height: 70px; gap: 8px; padding: 12px 10px; }
  .examples-loop b { font-size: .7rem; }
  .examples-lanes,
  .examples-anatomy,
  .examples-proof { padding: 72px 0; }
  .examples-section-heading { margin-bottom: 28px; }
  .examples-section-heading h2,
  .examples-anatomy h2,
  .examples-proof h2,
  .examples-close h2 { font-size: clamp(2.15rem, 10vw, 3rem); }
  .examples-lane-tabs { grid-template-columns: repeat(6, 118px); margin-inline: -16px; padding: 0 16px 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .examples-lane-tabs::-webkit-scrollbar { display: none; }
  .examples-lane-tabs button { min-height: 74px; scroll-snap-align: start; }
  .examples-lane-panel { min-height: 0; grid-template-columns: 1fr; gap: 28px; padding: 26px 20px; }
  .examples-lane-panel__identity { grid-template-columns: auto 1fr; align-items: end; column-gap: 12px; }
  .examples-lane-panel__identity p { grid-column: 1 / -1; }
  .examples-lane-panel__identity strong { font-size: 2.8rem; }
  .examples-lane-panel__identity span { padding-bottom: 4px; }
  .examples-lane-panel__story h3 { font-size: 1.75rem; }
  .examples-lane-panel__story dl { grid-template-columns: 1fr; }
  .examples-lane-panel__story dl div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--examples-line); }
  .examples-lane-panel__story .examples-actions { display: grid; }
  .examples-anatomy { gap: 34px; }
  .examples-anatomy__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .examples-anatomy__tabs button { min-height: 80px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 2px; padding: 10px; }
  .examples-anatomy__tabs span { grid-row: auto; }
  .examples-anatomy__tabs small { font-size: .62rem; }
  .examples-anatomy__viewer { padding: 10px; }
  .examples-anatomy__screen { aspect-ratio: .78; }
  .examples-anatomy__viewer figcaption { grid-template-columns: 1fr; gap: 4px; }
  .examples-proof__facts { grid-template-columns: 1fr 1fr; }
  .examples-proof__facts a { min-height: 154px; padding: 18px; }
  .examples-proof__facts strong { font-size: 2rem; }
  .examples-proof__facts span { font-size: .78rem; }
  .examples-close { padding: 70px 0; }
  .examples-close .examples-actions { display: grid; }
}

@media (max-width: 365px) {
  .examples-hero { grid-template-columns: minmax(0, 1fr) 112px; }
  .examples-hero__visual,
  .examples-file-stack { width: 112px; }
  .examples-hero h1 { font-size: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .examples-world *,
  .examples-world *::before,
  .examples-world *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}