/* ═══════════════════════════════════════════════════════
   하둡 8교시 강의 덱 · 공통 스타일
   각 교시 HTML 은 이 파일과 deck.js · sim.js 만 부른다
   ═══════════════════════════════════════════════════════ */

:root {
  --ground: #f7f6fa;
  --surface: #ffffff;
  --surface-2: #f0eef6;
  --line: #e2dfec;
  --line-strong: #cbc6dc;
  --ink: #16151f;
  --ink-2: #3c3950;
  --muted: #78748e;

  /* 하둡 노랑을 주 강조색으로 */
  --brand: #f0b429;
  --brand-deep: #8a6100;
  --brand-wash: #fdf3d8;

  --deep: #262530;

  /* 역할별 색. 장식이 아니라 정보다 */
  --name: #6f4bd8;        /* 네임노드 · 관리자 */
  --name-wash: #ede8fc;
  --data: #1f7ab8;        /* 데이터노드 · 저장 */
  --data-wash: #e2f0fa;
  --map: #2c7f52;         /* Map 단계 */
  --map-wash: #e6f4ec;
  --shuf: #b06a1a;        /* Shuffle 단계 */
  --shuf-wash: #fbeedd;
  --red: #c4372c;         /* Reduce 단계 · 경고 */
  --red-wash: #fbe9e7;

  --display: 'Archivo', 'IBM Plex Sans KR', system-ui, sans-serif;
  --sans: 'IBM Plex Sans KR', 'Archivo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'IBM Plex Sans KR', ui-monospace, monospace;

  --pad: clamp(18px, 4vw, 60px);
  --r: 4px;
}

:root:not([data-theme="light"]) { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #131219;
    --surface: #1b1a23;
    --surface-2: #23222d;
    --line: #302e3d;
    --line-strong: #454256;
    --ink: #eae8f2;
    --ink-2: #c2bed3;
    --muted: #928da8;
    --brand: #f5c33b;
    --brand-deep: #f0b429;
    --brand-wash: #332708;
    --deep: #0e0d14;
    --name: #b09cf0;
    --name-wash: #272040;
    --data: #6bb6e2;
    --data-wash: #12283a;
    --map: #6cc793;
    --map-wash: #17301f;
    --shuf: #e0a25c;
    --shuf-wash: #34240f;
    --red: #f0857a;
    --red-wash: #3a1f1c;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #131219;
  --surface: #1b1a23;
  --surface-2: #23222d;
  --line: #302e3d;
  --line-strong: #454256;
  --ink: #eae8f2;
  --ink-2: #c2bed3;
  --muted: #928da8;
  --brand: #f5c33b;
  --brand-deep: #f0b429;
  --brand-wash: #332708;
  --deep: #0e0d14;
  --name: #b09cf0;
  --name-wash: #272040;
  --data: #6bb6e2;
  --data-wash: #12283a;
  --map: #6cc793;
  --map-wash: #17301f;
  --shuf: #e0a25c;
  --shuf-wash: #34240f;
  --red: #f0857a;
  --red-wash: #3a1f1c;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ── 껍데기 ────────────────────────────────────────── */
.deck { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 10px var(--pad);
  background: color-mix(in oklab, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.mark {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.mark span { color: var(--brand-deep); font-weight: 700; }

.crumb {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.btn {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .03em;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); cursor: pointer;
}
.btn:hover { border-color: var(--ink-2); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--name); outline-offset: 2px; }
.btn.pri { background: var(--brand); border-color: var(--brand); color: #241a00; }
.btn.pri:hover { filter: brightness(1.06); color: #241a00; }
.btn:disabled { opacity: .4; cursor: default; }

.counter {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 62px; text-align: right;
}

.rail { display: flex; gap: 2px; padding: 0 var(--pad); height: 3px; background: var(--ground); }
.rail i { flex: 1; background: var(--line); border-radius: 2px; }
.rail i.done { background: var(--line-strong); }
.rail i.here { background: var(--brand-deep); }

/* ── 슬라이드 ───────────────────────────────────────── */
.stage { flex: 1; display: flex; padding: clamp(16px, 3vh, 36px) var(--pad) 76px; }
.slide { width: 100%; max-width: 1120px; margin: 0 auto; min-width: 0; }

/* flex · grid 자식은 기본이 min-width:auto 라, 안에 든 코드 블록이
   가로 스크롤을 만드는 대신 바깥을 밀어낸다. 전부 0으로 눌러 둔다 */
.slide *, .cols > *, .type_row > *, .lane_row > *, .bar_row > * { min-width: 0; }

.eyebrow {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.eyebrow b { color: var(--brand-deep); font-weight: 700; }

h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(30px, 5.2vw, 54px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
h2 { font-size: clamp(23px, 3.4vw, 34px); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
h3 { font-size: 15px; font-weight: 600; letter-spacing: .01em; }

.lede { font-size: clamp(15px, 1.6vw, 18px); color: var(--ink-2); max-width: 64ch; margin-top: 14px; }
.note { font-size: 13.5px; color: var(--muted); max-width: 70ch; }

code, .mono { font-family: var(--mono); font-size: .92em; }
:not(pre) > code {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 5px; word-break: break-all;
}

b, strong { font-weight: 600; color: var(--ink); }

/* ── 조각들 ─────────────────────────────────────────── */
.cols { display: grid; gap: clamp(12px, 2vw, 22px); margin-top: 20px; }
.cols.two, .cols.three, .cols.four { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .cols.two { grid-template-columns: 1fr 1fr; }
  .cols.three { grid-template-columns: repeat(3, 1fr); }
  .cols.four { grid-template-columns: repeat(4, 1fr); }
}

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px 17px;
}
.panel h3 { margin-bottom: 7px; }
.panel p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.panel .cap {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .05em; text-transform: uppercase; display: block; margin-bottom: 4px;
}

/* 강조 상자 3종 */
.box { border-radius: 0 var(--r) var(--r) 0; padding: 12px 16px; border-left: 3px solid; }
.box h3 { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; }
.box p, .box li { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.box ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }

.box.key  { background: var(--brand-wash); border-color: var(--brand-deep); }
.box.key h3 { color: var(--brand-deep); }
.box.warn { background: var(--red-wash); border-color: var(--red); }
.box.warn h3 { color: var(--red); }
.box.tip  { background: var(--map-wash); border-color: var(--map); }
.box.tip h3 { color: var(--map); }

/* 역할 칩 */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.chip::before { content: ''; width: 7px; height: 7px; border-radius: 2px; }
.chip.name { background: var(--name-wash); color: var(--name); }
.chip.name::before { background: var(--name); }
.chip.data { background: var(--data-wash); color: var(--data); }
.chip.data::before { background: var(--data); }
.chip.map  { background: var(--map-wash); color: var(--map); }
.chip.map::before { background: var(--map); }
.chip.shuf { background: var(--shuf-wash); color: var(--shuf); }
.chip.shuf::before { background: var(--shuf); }
.chip.red  { background: var(--red-wash); color: var(--red); }
.chip.red::before { background: var(--red); }
.chip.plain { background: var(--surface-2); color: var(--ink-2); }
.chip.plain::before { background: var(--muted); }

/* 표 */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  font-weight: 500; padding: 0 10px 8px; border-bottom: 1px solid var(--line);
}
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.scroll { overflow-x: auto; }

/* 흐름 */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
        font-family: var(--mono); font-size: 12.5px; }
.flow span {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 5px 10px; color: var(--ink-2);
}
.flow span.on { background: var(--deep); border-color: var(--deep); color: #f2f0fa; }
.flow span.hot { background: var(--brand); border-color: var(--brand); color: #241a00; font-weight: 600; }
.flow i { color: var(--muted); font-style: normal; }

/* 코드 블록 */
pre {
  margin: 0; background: var(--deep); color: #e9e6f5;
  border-radius: var(--r); padding: 14px 16px;
  overflow-x: auto; white-space: pre;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
}
pre .c { color: #8f8aa8; }              /* 주석 */
pre .k { color: var(--brand); }          /* 강조 */
pre .s { color: #ffc9a8; }               /* 문자열 */
pre .o { color: #9fe0b8; }               /* 출력 */
pre .p { color: #7fd0ff; }               /* 프롬프트 */

/* 따라치기 블록 */
.type { display: grid; gap: 10px; margin-top: 18px; }
.type_row {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px;
}
.type_n {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: #241a00; background: var(--brand);
  width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center; margin-top: 2px;
}
.type_say { font-size: 14px; color: var(--ink); margin: 0 0 8px; }
.type_why { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }

/* 트리 */
.tree { font-family: var(--mono); font-size: 13px; line-height: 1.9; margin: 0;
        background: transparent; color: inherit; padding: 0; }
.tree .dim { color: var(--muted); }
.tree .hit { background: var(--brand-wash); color: var(--brand-deep);
             border-radius: 3px; padding: 0 5px; font-weight: 600; }

/* 목차 */
.toc { display: grid; gap: 6px; margin-top: 20px; }
.toc button {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 6px; color: var(--ink); font-family: var(--sans); font-size: 15px;
}
.toc button:hover { background: var(--surface); }
.toc .n { font-family: var(--mono); font-size: 12px; color: var(--brand-deep); font-weight: 700; }
.toc .p { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.big { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
       font-size: clamp(34px, 7vw, 76px); line-height: 1; letter-spacing: -.03em; }

/* 아래 이동 */
.pager {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px var(--pad);
  background: color-mix(in oklab, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--line);
}
.hint { font-family: var(--mono); font-size: 11px; color: var(--muted); }
@media (max-width: 700px) { .hint { display: none; } }

/* ═══ 하둡 전용 시각 부품 ═══════════════════════════════ */

/* 클러스터 다이어그램 */
.cluster { display: grid; gap: 14px; margin-top: 18px; }
.rack {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.nd {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 12px; min-height: 96px;
  display: flex; flex-direction: column; gap: 7px;
  transition: opacity .2s, border-color .2s;
}
.nd_hd {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--muted); display: flex; align-items: center; gap: 6px;
}
.nd_hd::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--data); }
.nd.master { border-color: var(--name); background: var(--name-wash); }
.nd.master .nd_hd { color: var(--name); font-weight: 600; }
.nd.master .nd_hd::before { background: var(--name); }
.nd.dead { opacity: .34; border-color: var(--red); border-style: dashed; }
.nd.dead .nd_hd { color: var(--red); }
.nd.dead .nd_hd::before { background: var(--red); }
.nd_body { display: flex; flex-wrap: wrap; gap: 5px; }
.nd_meta { margin-top: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* 블록 칩 */
.blk {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 3px;
  border: 1px solid transparent; white-space: nowrap;
}
.blk.b0 { background: #dff0d8; color: #2c6b3f; border-color: #b9dfc0; }
.blk.b1 { background: #d8e8f7; color: #1c5a86; border-color: #b3d2ee; }
.blk.b2 { background: #f7e3d8; color: #8b4a1c; border-color: #eec9b3; }
.blk.b3 { background: #e8dcf7; color: #573a8c; border-color: #d0bdee; }
.blk.b4 { background: #f7dce6; color: #8c3a5c; border-color: #eebdcf; }
.blk.b5 { background: #dcf3f7; color: #1c6b78; border-color: #b3e4ee; }
.blk.b6 { background: #f5f2d0; color: #6d6414; border-color: #e6dfa8; }
.blk.b7 { background: #e0e0e8; color: #46465c; border-color: #c8c8d6; }
.blk.gone { opacity: .3; text-decoration: line-through; }
.blk.fresh { outline: 2px solid var(--brand-deep); outline-offset: 1px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .blk { filter: brightness(.55) saturate(1.5); }
  :root:not([data-theme="light"]) .blk.fresh { filter: none; background: var(--brand); color: #241a00; }
}
:root[data-theme="dark"] .blk { filter: brightness(.55) saturate(1.5); }
:root[data-theme="dark"] .blk.fresh { filter: none; background: var(--brand); color: #241a00; }

/* 조작 막대 */
.ctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 13px; margin-top: 16px;
}
.ctl label { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ctl input[type=range] { accent-color: var(--brand-deep); width: min(240px, 46vw); }
.ctl input[type=text] {
  font-family: var(--mono); font-size: 13px; padding: 5px 9px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink); flex: 1; min-width: 180px;
}
.ctl .val {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--brand-deep); font-variant-numeric: tabular-nums;
}
.ctl .sep { flex: 1; }

/* 상태 표시줄 */
.status {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand-deep);
  border-radius: 0 var(--r) var(--r) 0; padding: 9px 13px; margin-top: 12px;
  min-height: 40px;
}
.status b { color: var(--brand-deep); }

/* 가짜 터미널 */
.term {
  background: var(--deep); border-radius: var(--r); overflow: hidden;
  margin-top: 18px; border: 1px solid var(--line);
}
.term_bar {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; background: rgba(255,255,255,.05);
  font-family: var(--mono); font-size: 11px; color: #9a95b5;
}
.term_bar i { width: 9px; height: 9px; border-radius: 999px; background: #4a465e; }
.term_out {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  color: #e9e6f5; padding: 12px 14px; height: 260px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-all;
}
.term_out .p { color: #7fd0ff; }
.term_out .o { color: #9fe0b8; }
.term_out .e { color: #ff9c92; }
.term_out .c { color: #8f8aa8; }
.term_in {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid rgba(255,255,255,.08); padding: 9px 14px;
}
.term_in span { font-family: var(--mono); font-size: 12.5px; color: #7fd0ff; }
.term_in input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font-family: var(--mono); font-size: 12.5px; color: #e9e6f5;
}

/* 명령어 힌트 버튼 */
.cmds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cmds button {
  font-family: var(--mono); font-size: 11.5px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--ink-2); border-radius: 999px; padding: 3px 10px;
}
.cmds button:hover { border-color: var(--brand-deep); color: var(--brand-deep); }

/* 막대 그래프 */
.bars { display: grid; gap: 9px; margin-top: 18px; }
.bar_row { display: grid; grid-template-columns: minmax(96px, 148px) 1fr auto; gap: 12px; align-items: center; }
.bar_lb { font-size: 13px; color: var(--ink-2); }
.bar_track { display: block; background: var(--surface-2); border-radius: 999px; height: 20px; overflow: hidden; border: 1px solid var(--line); }
.bar_fill { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .5s cubic-bezier(.16,1,.3,1); }
.bar_fill.alt { background: var(--data); }
.bar_fill.bad { background: var(--red); }
.bar_val { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 단계 진행 (MapReduce) */
.steps_nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.steps_nav button {
  font-family: var(--mono); font-size: 11.5px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); border-radius: 999px; padding: 4px 12px;
}
.steps_nav button.on { background: var(--deep); border-color: var(--deep); color: #f2f0fa; font-weight: 600; }
.steps_nav button.past { color: var(--ink-2); border-color: var(--line-strong); }

.lane { display: grid; gap: 10px; margin-top: 16px; }
.lane_row {
  display: grid; grid-template-columns: minmax(72px, 96px) 1fr; gap: 12px; align-items: start;
}
.lane_lb {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--muted); text-align: right; padding-top: 7px;
}
.lane_items { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 4px 9px; color: var(--ink-2);
}
.pill.k { background: var(--map-wash); border-color: var(--map); color: var(--map); }
.pill.s { background: var(--shuf-wash); border-color: var(--shuf); color: var(--shuf); }
.pill.r { background: var(--red-wash); border-color: var(--red); color: var(--red); }
.pill.n { background: var(--brand-wash); border-color: var(--brand-deep); color: var(--brand-deep); font-weight: 600; }

/* 퀴즈 */
.quiz { display: grid; gap: 8px; margin-top: 18px; }
.quiz button {
  text-align: left; cursor: pointer; font-family: var(--sans); font-size: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 15px; color: var(--ink);
}
.quiz button:hover { border-color: var(--line-strong); }
.quiz button.ok { background: var(--map-wash); border-color: var(--map); color: var(--map); font-weight: 600; }
.quiz button.no { background: var(--red-wash); border-color: var(--red); color: var(--red); text-decoration: line-through; }
.quiz_why { font-size: 13.5px; color: var(--ink-2); margin: 4px 0 0; }

/* 비교 (옛날 vs 하둡) */
.vs { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 760px) { .vs { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.vs_mid {
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--muted);
}
.vs_side { border-radius: var(--r); padding: 15px 17px; border: 1px solid var(--line); }
.vs_side.old { background: var(--surface-2); }
.vs_side.new { background: var(--brand-wash); border-color: var(--brand-deep); }
.vs_side h3 { margin-bottom: 9px; }
.vs_side.new h3 { color: var(--brand-deep); }
.vs_side ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; color: var(--ink-2); }

/* 용어 사전 */
.terms { display: grid; gap: 8px; margin-top: 18px; }
.terms dt {
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--brand-deep);
}
.terms dd { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }
.terms > div {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 11px 14px;
}

/* 자원 게이지 (YARN) */
.gauge { background: var(--surface-2); border-radius: 3px; height: 8px; overflow: hidden; border: 1px solid var(--line); }
.gauge i { display: block; height: 100%; background: var(--data); transition: width .35s ease; }
.gauge.full i { background: var(--red); }

@media (prefers-reduced-motion: no-preference) {
  .slide { animation: rise .22s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
}