:root {
  /* IBM Plex Sans Condensed** Condensed* Condense — use sparingly for compact keyboard labels */
  --porcelain: #F8F8F5;
  --graphite: #14161A;
  --espresso: #050607;
  --steam: #DADCD7;
  --shadow: #9EA29B;
  --mist: #EEF0EC;
  --line: 1.25px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--graphite);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(218, 220, 215, 0.54), transparent 34%),
    radial-gradient(circle at 84% 62%, rgba(238, 240, 236, 0.78), transparent 42%),
    linear-gradient(90deg, rgba(20, 22, 26, 0.026) 1px, transparent 1px),
    linear-gradient(0deg, rgba(20, 22, 26, 0.022) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    radial-gradient(circle, rgba(20, 22, 26, 0.18) 0.7px, transparent 0.9px),
    radial-gradient(circle, rgba(158, 162, 155, 0.18) 0.6px, transparent 0.8px);
  background-position: 0 0, 26px 34px;
  background-size: 96px 96px, 116px 116px;
  z-index: -1;
}

.tabletop { position: relative; }

.chapter {
  position: relative;
  min-height: 100vh;
  padding: clamp(24px, 5vw, 72px);
  display: grid;
  align-items: center;
}

.lesson-tabs {
  position: fixed;
  right: clamp(14px, 2.6vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  gap: 8px;
}

.lesson-tabs a {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  text-decoration: none;
  color: var(--graphite);
  background: rgba(248, 248, 245, 0.82);
  border: var(--line) solid var(--steam);
  box-shadow: 0 8px 24px rgba(5, 6, 7, 0.05);
  padding: 7px 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  writing-mode: vertical-rl;
  transition: transform 240ms ease, background 240ms ease;
}

.lesson-tabs a:hover,
.lesson-tabs a.active { transform: translateX(-4px); background: var(--mist); }

.tray-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(86px, auto);
  gap: clamp(14px, 2vw, 26px);
  width: min(1180px, calc(100vw - 96px));
  margin: 0 auto;
}

.hero-grid { align-items: stretch; }

.card {
  position: relative;
  background: rgba(248, 248, 245, 0.88);
  border: var(--line) solid var(--steam);
  border-radius: 22px;
  padding: clamp(18px, 2.4vw, 34px);
  box-shadow: 0 26px 70px rgba(5, 6, 7, 0.07), inset 0 1px rgba(255,255,255,0.7);
  overflow: hidden;
  transition: transform 320ms ease, box-shadow 320ms ease, background 320ms ease;
}

.card::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(158, 162, 155, 0.28);
  border-radius: 16px;
  pointer-events: none;
}

.card:hover,
.card.is-lifted { transform: translateY(-4px) rotate(var(--tilt, 0deg)); box-shadow: 0 34px 88px rgba(5, 6, 7, 0.1); }

.stamp {
  margin: 0 0 13px;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  color: var(--shadow);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 12px;
}

h1, h2, h3 {
  font-family: "Alegreya Sans", sans-serif;
  margin: 0;
  color: var(--espresso);
  letter-spacing: 0.025em;
  line-height: 0.95;
}

h1 { font-size: clamp(70px, 12vw, 168px); }
h2 { font-size: clamp(42px, 6.5vw, 86px); }
h3 { font-size: clamp(28px, 4vw, 46px); }

p { line-height: 1.62; font-size: clamp(15px, 1.35vw, 18px); }

.lede { max-width: 690px; font-size: clamp(18px, 2vw, 25px); color: var(--graphite); }

.title-card { grid-column: 3 / span 7; grid-row: span 3; min-height: 390px; }
.receipt-card { grid-column: 1 / span 3; grid-row: 2 / span 2; transform: rotate(-2.5deg); }
.mug-card { grid-column: 10 / span 3; grid-row: 1 / span 3; transform: rotate(1.2deg); }
.napkin-card { grid-column: 4 / span 4; grid-row: 4 / span 2; transform: rotate(-1deg); }
.coaster-card { grid-column: 8 / span 3; grid-row: 4 / span 2; }
.tiny-card { grid-column: 11 / span 2; grid-row: 4 / span 2; display: grid; align-content: center; min-height: 200px; background: var(--mist); }

.keys, .big-keys {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.keys span, .big-keys span {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  color: var(--porcelain);
  background: var(--espresso);
  border-radius: 10px;
  padding: 8px 16px;
  box-shadow: 0 10px 26px rgba(5, 6, 7, 0.18);
}

.big-keys span { font-size: clamp(48px, 8vw, 96px); padding: 18px 34px; }

.code-line, .state {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  letter-spacing: 0.025em;
  font-size: clamp(18px, 2.1vw, 26px);
  margin: 14px 0;
}

.crossed { text-decoration: line-through; text-decoration-thickness: 1.25px; text-decoration-color: var(--espresso); color: var(--shadow); }

.annotation { color: var(--shadow); font-size: 14px; }

.hero-steam {
  position: absolute;
  inset: 3% 5%;
  width: 90%;
  height: 90%;
  pointer-events: none;
  opacity: 0.9;
}

.steam-path, .arrow-loop, .napkin-lines path, .mug-diagram path, .mug-diagram circle {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.steam-path { stroke: rgba(20, 22, 26, 0.34); stroke-dasharray: 9 12; animation: driftDash 12s linear infinite; }
.path-b { animation-duration: 15s; }
.path-c { animation-duration: 18s; }
.arrow-loop { stroke: rgba(20, 22, 26, 0.42); }
.mug-diagram { width: 100%; min-height: 210px; }
.mini-steam { stroke-dasharray: 7 10; animation: driftDash 7s linear infinite; }
.napkin-lines { width: 100%; }
.faint { stroke: var(--steam) !important; stroke-dasharray: 5 9; }
.fresh-line { stroke-dasharray: 420; stroke-dashoffset: 420; }

.coasters { position: relative; height: 150px; margin: 16px auto; width: 190px; }
.coasters span {
  position: absolute;
  width: 116px;
  height: 116px;
  border: var(--line) solid var(--graphite);
  border-radius: 50%;
  background: rgba(238, 240, 236, 0.7);
  left: calc(18px * var(--i, 0));
  top: calc(10px * var(--i, 0));
  box-shadow: 0 14px 32px rgba(5, 6, 7, 0.06);
  transition: transform 350ms ease;
}
.coasters span:nth-child(1) { --i: 0; }
.coasters span:nth-child(2) { --i: 1; }
.coasters span:nth-child(3) { --i: 2; }
.coasters span:nth-child(4) { --i: 3; }
.coasters.interactive:hover span:nth-child(4), .coasters.interactive.is-open span:nth-child(4) { transform: translate(-24px, -34px) rotate(-10deg); }

.restored strong { font-family: "Alegreya Sans", sans-serif; font-size: 42px; }
.restored small { color: var(--shadow); margin-top: 12px; }

.chapter-label {
  position: absolute;
  left: clamp(24px, 5vw, 72px);
  top: clamp(20px, 4vw, 56px);
  font-family: "IBM Plex Sans Condensed", sans-serif;
  color: var(--shadow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.focus-grid {
  width: min(1120px, calc(100vw - 110px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
}

.lesson-card { grid-column: span 6; min-height: 360px; background: rgba(248, 248, 245, 0.94); }
.lesson-card.wide { grid-column: span 7; }
.broken-state, .correction-note, .receipt-stack, .command-card, .before-after { grid-column: span 3; min-height: 330px; }
.correction-note { grid-column: span 3; background: var(--mist); transform: rotate(1.5deg); }
.receipt-stack { grid-column: span 4; }
.large-coaster { grid-column: span 4; }
.command-card { grid-column: span 4; background: var(--mist); }
.before-after { grid-column: span 4; }
.redo-napkin { grid-column: span 4; min-height: 330px; }
.redo-stamp { grid-column: span 2; }

.smudge {
  width: 86%;
  height: 70px;
  margin-top: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(158, 162, 155, 0.32), transparent 70%);
  filter: blur(5px);
}

.receipt-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px dashed var(--steam);
  padding: 15px 0;
  font-family: "IBM Plex Sans Condensed", sans-serif;
}
.receipt-line span { color: var(--shadow); }
.restored-line { background: rgba(238, 240, 236, 0.76); padding-inline: 10px; }

.before-after .new {
  position: relative;
  margin-top: 26px;
  background: var(--mist);
  padding: 18px;
  border: var(--line) solid var(--steam);
  border-radius: 14px;
  transform: translateY(22px);
  opacity: 0;
}

.chapter.in-view .fresh-line { animation: drawLine 1500ms ease forwards 220ms; }
.chapter.in-view .before-after .new { animation: landReceipt 850ms cubic-bezier(.2,.7,.2,1) forwards 380ms; }
.chapter.in-view .command-card .big-keys span { animation: keyGlow 1400ms ease 260ms; }
.chapter.in-view .error-card { animation: shakeError 620ms ease both; }

.practice-card {
  grid-column: span 3;
  min-height: 210px;
  display: grid;
  align-content: center;
  gap: 18px;
  background: var(--mist);
}
.practice-card span { font-family: "IBM Plex Sans Condensed", sans-serif; color: var(--shadow); font-size: 34px; }
.practice-card b { font-family: "Alegreya Sans", sans-serif; font-size: 34px; line-height: 1; }
.closing-grid .title-card { grid-column: span 12; min-height: 330px; }

@keyframes shakeError {
  0%, 100% { transform: translateX(0) rotate(var(--base-rotate, 0deg)); }
  18% { transform: translateX(-5px) rotate(calc(var(--base-rotate, 0deg) - .6deg)); }
  36% { transform: translateX(4px) rotate(calc(var(--base-rotate, 0deg) + .5deg)); }
  54% { transform: translateX(-3px) rotate(calc(var(--base-rotate, 0deg) - .3deg)); }
  72% { transform: translateX(2px) rotate(calc(var(--base-rotate, 0deg) + .2deg)); }
}

@keyframes driftDash { to { stroke-dashoffset: -220; } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes landReceipt { to { opacity: 1; transform: translateY(0); } }
@keyframes keyGlow { 35% { box-shadow: 0 0 0 8px rgba(218, 220, 215, 0.8), 0 18px 42px rgba(5, 6, 7, 0.22); } }

@media (max-width: 900px) {
  .lesson-tabs { display: none; }
  .chapter { padding: 28px 18px; }
  .tray-grid, .focus-grid { width: 100%; grid-template-columns: repeat(6, 1fr); }
  .title-card, .receipt-card, .mug-card, .napkin-card, .coaster-card, .tiny-card,
  .lesson-card, .lesson-card.wide, .broken-state, .correction-note, .receipt-stack,
  .large-coaster, .command-card, .before-after, .redo-napkin, .redo-stamp,
  .practice-card, .closing-grid .title-card { grid-column: span 6; grid-row: auto; }
  .hero-steam { opacity: 0.38; }
  h1 { font-size: clamp(62px, 18vw, 120px); }
}
*** Add File: sites/undo.cafe-v1/script.js
const chapters = Array.from(document.querySelectorAll('.chapter'));
const tabs = Array.from(document.querySelectorAll('.lesson-tabs a'));
const tiltCards = Array.from(document.querySelectorAll('[data-tilt]'));
const coasterStack = document.querySelector('#coasterStack');
const undoCommand = document.querySelector('#undoCommand');
const rollbackCard = document.querySelector('#rollbackCard');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('in-view');
      const id = entry.target.id;
      tabs.forEach((tab) => tab.classList.toggle('active', tab.getAttribute('href') === `#${id}`));
    }
  });
}, { threshold: 0.48 });

chapters.forEach((chapter) => observer.observe(chapter));

tiltCards.forEach((card, index) => {
  const base = ((index % 5) - 2) * 0.42;
  card.style.setProperty('--tilt', `${base}deg`);
  card.addEventListener('pointerenter', () => card.classList.add('is-lifted'));
  card.addEventListener('pointerleave', () => card.classList.remove('is-lifted'));
});

document.querySelectorAll('[data-error]').forEach((card) => {
  card.addEventListener('pointerenter', () => {
    card.style.animation = 'none';
    requestAnimationFrame(() => {
      card.style.animation = '';
      card.classList.remove('in-view');
      card.classList.add('error-card');
    });
  });
});

if (coasterStack) {
  coasterStack.addEventListener('pointerenter', () => coasterStack.classList.add('is-open'));
  coasterStack.addEventListener('pointerleave', () => coasterStack.classList.remove('is-open'));
}

if (undoCommand && rollbackCard) {
  undoCommand.addEventListener('click', () => {
    rollbackCard.classList.remove('manual-undo');
    void rollbackCard.offsetWidth;
    rollbackCard.classList.add('manual-undo');
    undoCommand.classList.add('is-lifted');
    window.setTimeout(() => undoCommand.classList.remove('is-lifted'), 620);
  });
}

let latestScrollY = window.scrollY;
let ticking = false;

function animateSteam() {
  const progress = latestScrollY / Math.max(1, document.body.scrollHeight - window.innerHeight);
  document.documentElement.style.setProperty('--scroll-progress', progress.toFixed(3));
  document.querySelectorAll('.steam-map').forEach((map, index) => {
    map.style.transform = `translate3d(0, ${progress * (index + 1) * -18}px, 0)`;
  });
  ticking = false;
}

window.addEventListener('scroll', () => {
  latestScrollY = window.scrollY;
  if (!ticking) {
    requestAnimationFrame(animateSteam);
    ticking = true;
  }
});

tabs.forEach((tab) => {
  tab.addEventListener('click', () => {
    tabs.forEach((item) => item.classList.remove('active'));
    tab.classList.add('active');
  });
});

animateSteam();