/* Tech stack section: slides stack · arch · map · compare · enrich · share · try.
   Every rule is scoped under [data-section="stack"]; keyframes are prefixed stack-.
   Beats: js/stack.js sets .b0 … .bN on the slide, [data-beat="n"] rises in at .bn. */

[data-section="stack"] {
  --rise: .7s cubic-bezier(.16, 1, .3, 1);
  --success: #17763F;
  --c-front: #2A8BA8; --c-front-bg: #E3F3F7;
  --c-sec:   #C8281E; --c-sec-bg:   #FBE7E5;
  --c-back:  #17763F; --c-back-bg:  #E2F2E8;
  --c-db:    #6B4FC8; --c-db-bg:    #ECE7FA;
  --c-bus:   #C2571B; --c-bus-bg:   #FBEBDF;
  --c-cloud: #8F5600; --c-cloud-bg: #FBEFD9;
  --c-ext:   #5B656A; --c-ext-bg:   #ECEEF0;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

:root[data-theme="dark"] [data-section="stack"] {
  --c-front: #6CC3DB; --c-front-bg: #12313A;
  --c-sec:   #F07A70; --c-sec-bg:   #3A1714;
  --c-back:  #5FC88A; --c-back-bg:  #12301E;
  --c-db:    #A994F0; --c-db-bg:    #241B40;
  --c-bus:   #F0A066; --c-bus-bg:   #3A2212;
  --c-cloud: #F0B357; --c-cloud-bg: #3A2A10;
  --c-ext:   #A6AAAE; --c-ext-bg:   #2A2C2F;
}

/* ── Shared header ── */

[data-section="stack"] .stk-head {
  position: absolute;
  left: 100px;
  right: 100px;
  top: 92px;
}

[data-section="stack"] .stk-head-center { text-align: center; }

[data-section="stack"] .stk-title {
  margin-top: 14px;
  font-size: 58px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--label);
}

[data-section="stack"] .stk-foot {
  position: absolute;
  left: 100px;
  right: 100px;
  bottom: 86px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--secondary);
}

/* ── Beats ── */

[data-section="stack"] .stk-head {
  opacity: 0;
  translate: 0 -14px;
  transition: opacity .6s var(--ease-out), translate var(--rise);
}

[data-section="stack"].b0 .stk-head { opacity: 1; translate: none; }

[data-section="stack"] [data-beat] {
  opacity: 0;
  translate: 0 30px;
  transition: opacity .55s var(--ease-out), translate var(--rise);
}

[data-section="stack"] svg [data-beat] { translate: none; }

[data-section="stack"].b0 [data-beat="0"],
[data-section="stack"].b1 [data-beat="1"],
[data-section="stack"].b2 [data-beat="2"],
[data-section="stack"].b3 [data-beat="3"] {
  opacity: 1;
  translate: none;
  transition-delay: .1s;
}

[data-section="stack"].no-anim,
[data-section="stack"].no-anim * { transition: none !important; }

/* ═══ arch · archify-style total view ═══ */

[data-slide="arch"] .arch {
  position: absolute;
  left: 100px;
  top: 236px;
  width: 1720px;
  height: 760px;
  overflow: visible;
}

[data-slide="arch"] .z-compose { fill: color-mix(in srgb, var(--c-cloud-bg) 45%, transparent); stroke: var(--c-cloud); stroke-width: 1.5; stroke-dasharray: 8 6; }
[data-slide="arch"] .z-internal { fill: none; stroke: var(--c-sec); stroke-width: 1.5; stroke-dasharray: 8 6; }
[data-slide="arch"] .z-label { font: 600 15px var(--mono); fill: var(--c-cloud); }
[data-slide="arch"] .z-label-red { fill: var(--c-sec); }

[data-slide="arch"] .arch-links path {
  fill: none;
  stroke: var(--tertiary);
  stroke-width: 2;
}

[data-slide="arch"] .arch-links .dash path { stroke: var(--c-db); stroke-dasharray: 7 6; }
[data-slide="arch"] .arch-arrowhead { fill: var(--tertiary); }
[data-slide="arch"] .arch-links .l { font: 500 13px var(--mono); fill: var(--secondary); }

[data-slide="arch"] .n rect { stroke-width: 2; }
[data-slide="arch"] .n text { font: 700 17px var(--mono); fill: var(--label); text-anchor: middle; }
[data-slide="arch"] .n text.s { font: 400 12.5px var(--mono); fill: var(--secondary); }

[data-slide="arch"] .n-front rect { fill: var(--c-front-bg); stroke: var(--c-front); }
[data-slide="arch"] .n-sec rect   { fill: var(--c-sec-bg);   stroke: var(--c-sec); }
[data-slide="arch"] .n-back rect  { fill: var(--c-back-bg);  stroke: var(--c-back); }
[data-slide="arch"] .n-db rect    { fill: var(--c-db-bg);    stroke: var(--c-db); }
[data-slide="arch"] .n-bus rect   { fill: var(--c-bus-bg);   stroke: var(--c-bus); }
[data-slide="arch"] .n-cloud rect { fill: var(--c-cloud-bg); stroke: var(--c-cloud); }
[data-slide="arch"] .n-ext rect   { fill: var(--c-ext-bg);   stroke: var(--c-ext); }

/* Fresh links flow for a moment, like archify's PATH mode. */
[data-slide="arch"].b0 .arch-links [data-beat="0"] path,
[data-slide="arch"].b1 .arch-links [data-beat="1"] path,
[data-slide="arch"].b2 .arch-links [data-beat="2"] path { animation: stack-flow 1.4s linear infinite; }

[data-slide="arch"] .arch-links [data-beat="0"] path { stroke-dasharray: 10 0; }

@keyframes stack-flow { to { stroke-dashoffset: -26; } }

[data-slide="arch"] .arch-legend {
  position: absolute;
  left: 100px;
  bottom: 40px;
  display: flex;
  gap: 26px;
  list-style: none;
  font: 500 16px var(--mono);
  color: var(--secondary);
}

[data-slide="arch"] .arch-legend li { display: flex; align-items: center; gap: 8px; }
[data-slide="arch"] .arch-legend li::before {
  content: "";
  width: 18px;
  height: 12px;
  border-radius: 3px;
  border: 2px solid var(--c);
  background: var(--bg-c);
}

[data-slide="arch"] .arch-legend .n-front { --c: var(--c-front); --bg-c: var(--c-front-bg); }
[data-slide="arch"] .arch-legend .n-sec   { --c: var(--c-sec);   --bg-c: var(--c-sec-bg); }
[data-slide="arch"] .arch-legend .n-back  { --c: var(--c-back);  --bg-c: var(--c-back-bg); }
[data-slide="arch"] .arch-legend .n-db    { --c: var(--c-db);    --bg-c: var(--c-db-bg); }
[data-slide="arch"] .arch-legend .n-bus   { --c: var(--c-bus);   --bg-c: var(--c-bus-bg); }
[data-slide="arch"] .arch-legend .n-cloud { --c: var(--c-cloud); --bg-c: var(--c-cloud-bg); }
[data-slide="arch"] .arch-legend .n-ext   { --c: var(--c-ext);   --bg-c: var(--c-ext-bg); }

/* ═══ map · the story of the blue dot, on real HG floor E (5 beats) ═══ */

[data-slide="map"] {
  --room: #E9EDEF; --room-line: #CDD5D9;
  --corr: #F8FAFB;
  --heat: #337691;
}

:root[data-theme="dark"] [data-slide="map"] {
  --room: #1F2326; --room-line: #33393D;
  --corr: #161819;
  --heat: #70A0B5;
}

[data-slide="map"] .mw-stage {
  position: absolute;
  left: 100px;
  top: 236px;
  width: 1100px;
  height: 720px;
  border-radius: 28px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(20, 28, 32, .05), 0 24px 50px -28px rgba(20, 40, 50, .35);
  overflow: hidden;
}

[data-slide="map"] .mw-map, [data-slide="map"] .hg { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-slide="map"] .mw-cap { position: absolute; left: 24px; bottom: 18px; font: 500 15px var(--mono); color: var(--tertiary); }

/* Floor plan layers */
[data-slide="map"] .hg > * { transition: opacity .6s var(--ease-out); }
[data-slide="map"] .room { fill: var(--room); stroke: var(--room-line); stroke-width: .8; }
[data-slide="map"] .room-corridor, [data-slide="map"] .room-stairs, [data-slide="map"] .room-lift { fill: var(--corr); }
[data-slide="map"] .room-lecture, [data-slide="map"] .room-seminar { fill: color-mix(in srgb, var(--tint) 14%, var(--room)); }
[data-slide="map"] .graph { fill: none; stroke: var(--tint); stroke-width: 1.2; opacity: 0; }
[data-slide="map"] .halos circle { fill: color-mix(in srgb, var(--c-bus) 9%, transparent); stroke: color-mix(in srgb, var(--c-bus) 45%, transparent); stroke-width: 1; transition: r 1.2s var(--ease-out); }
[data-slide="map"] .halos, [data-slide="map"] .beacons { opacity: 0; }
[data-slide="map"] .beacons circle { fill: var(--c-bus); }
[data-slide="map"] .grid { fill: var(--tertiary); opacity: 0; }
[data-slide="map"] .belief circle { fill: var(--heat); }
[data-slide="map"] .belief, [data-slide="map"] .explored,
[data-slide="map"] .route, [data-slide="map"] .route-casing, [data-slide="map"] .dest { opacity: 0; }
[data-slide="map"] .you { opacity: 0; }
[data-slide="map"] .you .acc { fill: color-mix(in srgb, var(--tint) 18%, transparent); stroke: var(--tint); stroke-width: 1.5; }
[data-slide="map"] .you .dot { fill: var(--tint); stroke: #fff; stroke-width: 4; transform-box: fill-box; transform-origin: center; }

/* b0 the wish: plan + walk graph */
[data-slide="map"].b0 .graph { opacity: .45; }
/* b1 PolyMaps: beacons, but each only known to ±13 m */
[data-slide="map"].b1 .graph { opacity: .12; }
[data-slide="map"].b1 .halos, [data-slide="map"].b1 .beacons { opacity: 1; }
/* b2 our scanner: halos shrink to surveyed beacons, the phone walks a mission */
[data-slide="map"].b2 .halos circle { r: 0; }
[data-slide="map"].b2 .beacons circle { animation: stack-ping 1.6s ease-in-out infinite; }
[data-slide="map"] .beacons circle:nth-child(3n) { animation-delay: .5s; }
[data-slide="map"] .beacons circle:nth-child(3n+1) { animation-delay: 1s; }
/* b3 model + sparse filter: grid and a wide, two-headed belief */
[data-slide="map"].b3 .beacons { opacity: .35; }
[data-slide="map"].b3 .beacons circle { animation: none; }
[data-slide="map"].b3 .grid { opacity: .3; }
[data-slide="map"].b3 .belief-wide { opacity: .6; }
/* b4 you are here */
[data-slide="map"].b4 .belief-wide, [data-slide="map"].b4 .grid { opacity: 0; }
[data-slide="map"].b4 .belief-tight { opacity: .8; }
[data-slide="map"].b4 .beacons { opacity: .2; }
[data-slide="map"].b4 .you { opacity: 1; }

@keyframes stack-ping { 0%, 100% { r: 3.5; } 50% { r: 6.5; } }

/* Phone mock of HG Scan (beat 2 only) */
[data-slide="map"] .mw-phone {
  position: absolute;
  right: 40px;
  top: 34px;
  width: 300px;
  height: 640px;
  padding: 12px;
  border-radius: 48px;
  background: #1A1C1E;
  box-shadow: 0 0 0 2px #3A3D40 inset, 0 40px 80px -30px rgba(10, 20, 25, .7);
  opacity: 0;
  translate: 60px 0;
  transition: opacity .5s var(--ease-out), translate .7s var(--ease-out);
}
[data-slide="map"].b2 .mw-phone { opacity: 1; translate: none; }
[data-slide="map"].b3 .mw-phone { opacity: 0; translate: 60px 0; }
[data-slide="map"] .ph-island { position: absolute; left: 50%; top: 22px; translate: -50% 0; width: 90px; height: 26px; border-radius: 14px; background: #000; z-index: 2; }
[data-slide="map"] .ph-screen {
  position: relative;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: #F2F2F7;
  color: #111;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
}
[data-slide="map"] .ph-status { display: flex; justify-content: space-between; padding: 16px 26px 0; font-size: 13px; font-weight: 700; }
[data-slide="map"] .ph-status span:last-child { font-size: 10px; letter-spacing: .05em; }
[data-slide="map"] .ph-nav { padding: 18px 18px 8px; }
[data-slide="map"] .ph-nav b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
[data-slide="map"] .ph-nav span { font-size: 12px; color: #6B7075; }
[data-slide="map"] .ph-mapbox { position: relative; flex: 1; margin: 0 12px; border-radius: 14px; overflow: hidden; background: #fff; }
[data-slide="map"] .ph-map { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-slide="map"] .ph-map .room { fill: #ECEFF1; stroke: #CFD6DA; stroke-width: .6; }
[data-slide="map"] .ph-map .room-corridor, [data-slide="map"] .ph-map .room-stairs, [data-slide="map"] .ph-map .room-lift { fill: #FAFBFC; }
[data-slide="map"] .ph-mission { fill: none; stroke: #337691; stroke-width: 2.4; stroke-dasharray: 3 3; stroke-linecap: round; }
[data-slide="map"] .cp circle { fill: #9AA3A8; stroke: #fff; stroke-width: 1.2; }
[data-slide="map"] .cp text { font: 800 5px -apple-system, Inter, sans-serif; fill: #fff; text-anchor: middle; }
[data-slide="map"] .cp.done circle { fill: #17763F; }
[data-slide="map"] .cp.next circle { fill: #C8281E; }
[data-slide="map"].b2 .cp.next circle { animation: stack-cp 1.2s ease-in-out infinite; }
@keyframes stack-cp { 50% { r: 7.5; } }
[data-slide="map"] .ph-card { margin: 10px 12px 0; padding: 10px 12px; border-radius: 12px; background: #fff; }
[data-slide="map"] .ph-card b { display: block; font-size: 15px; }
[data-slide="map"] .ph-card span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: #5C6166; }
[data-slide="map"] .ph-btn { margin: 10px 12px 0; padding: 16px 0; border-radius: 14px; background: #17A34A; color: #fff; text-align: center; font-size: 19px; font-weight: 800; }
[data-slide="map"] .ph-bar { display: flex; justify-content: space-around; padding: 10px 12px 18px; font-size: 11px; font-weight: 600; color: #5C6166; }

/* Sparse matrix inset (beat 3) */
[data-slide="map"] .mw-spy {
  position: absolute;
  right: 22px;
  top: 22px;
  width: 210px;
  padding: 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 10px 30px -18px rgba(20, 40, 50, .5);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
[data-slide="map"].b3 .mw-spy { opacity: 1; transition-delay: .3s; }
[data-slide="map"].b4 .mw-spy { opacity: 0; }
[data-slide="map"] .mw-spy-plot { aspect-ratio: 1; border: 1.5px solid var(--separator); border-radius: 6px; overflow: hidden; }
[data-slide="map"] .spy { width: 100%; height: 100%; display: block; }
[data-slide="map"] .spy rect { fill: var(--tint); }
[data-slide="map"] .mw-spy p { margin-top: 10px; font: 500 14px/1.4 var(--mono); color: var(--secondary); }
[data-slide="map"] .mw-spy b { color: var(--label); }

/* The wow (beat 4) */
[data-slide="map"] .mw-wow {
  position: absolute;
  right: 22px;
  top: 22px;
  display: grid;
  gap: 14px;
  padding: 22px 26px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: 0 16px 40px -20px rgba(20, 40, 50, .5);
  opacity: 0;
  translate: 0 12px;
  transition: opacity .5s var(--ease-out), translate .7s var(--ease-out);
}
[data-slide="map"].b4 .mw-wow { opacity: 1; translate: none; transition-delay: .5s; }
[data-slide="map"] .mw-wow b { display: block; font-size: 58px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--tint); }
[data-slide="map"] .mw-wow span { font-size: 16px; color: var(--secondary); }
[data-slide="map"] .mw-wow .was { padding-top: 12px; border-top: 2px solid var(--separator); }
[data-slide="map"] .mw-wow .was b { font-size: 30px; color: var(--tertiary); text-decoration: line-through; text-decoration-thickness: 3px; }

/* Story steps on the right: current lit, earlier readable, later faint. */
[data-slide="map"] .mw-steps {
  position: absolute;
  left: 1236px;
  right: 100px;
  top: 236px;
  list-style: none;
  display: grid;
  gap: 8px;
}
[data-slide="map"] .mw-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 18px;
  opacity: .25;
  transition: opacity .5s var(--ease-out), background .5s var(--ease-out);
}
[data-slide="map"] .mw-step i {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--tint); color: #fff; font: 800 16px var(--font); font-style: normal;
}
[data-slide="map"] .mw-step b { display: block; font-size: 23px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
[data-slide="map"] .mw-step span { display: none; margin-top: 4px; font-size: 16.5px; line-height: 1.38; color: var(--secondary); }
[data-slide="map"] .mw-step em { display: block; margin-top: 4px; font: 600 13.5px var(--mono); font-style: normal; color: var(--tint-text); }

[data-slide="map"].b0 .mw-step[data-step="0"],
[data-slide="map"].b1 .mw-step[data-step="1"],
[data-slide="map"].b2 .mw-step[data-step="2"],
[data-slide="map"].b3 .mw-step[data-step="3"],
[data-slide="map"].b4 .mw-step[data-step="4"] { opacity: 1; background: var(--card); box-shadow: 0 16px 36px -24px rgba(20, 40, 50, .4); }

[data-slide="map"].b0:not(.b1) .mw-step[data-step="0"] span,
[data-slide="map"].b1:not(.b2) .mw-step[data-step="1"] span,
[data-slide="map"].b2:not(.b3) .mw-step[data-step="2"] span,
[data-slide="map"].b3:not(.b4) .mw-step[data-step="3"] span,
[data-slide="map"].b4 .mw-step[data-step="4"] span { display: block; }

[data-slide="map"].b1 .mw-step[data-step="0"],
[data-slide="map"].b2 .mw-step:is([data-step="0"], [data-step="1"]),
[data-slide="map"].b3 .mw-step:is([data-step="0"], [data-step="1"], [data-step="2"]),
[data-slide="map"].b4 .mw-step:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) { opacity: .55; }

[data-slide="map"] .mw-step[data-step="4"] b { font-size: 30px; color: var(--tint); }

/* ═══ compare · video + what changes ═══ */

[data-slide="compare"] .cmp {
  position: absolute;
  left: 100px;
  right: 100px;
  top: 270px;
  bottom: 90px;
  display: grid;
  grid-template-columns: 1180px 1fr;
  gap: 60px;
  align-items: center;
}

[data-slide="compare"] .cmp-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: var(--tint-fill);
  box-shadow: 0 24px 60px -30px rgba(20, 40, 50, .5);
}

[data-slide="compare"] video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-slide="compare"] .cmp-missing {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  text-align: center;
  gap: 10px;
  border: 3px dashed var(--tint);
  border-radius: 28px;
  color: var(--tint-text);
}

[data-slide="compare"] .cmp-video.is-missing .cmp-missing { display: grid; }
[data-slide="compare"] .cmp-missing b { font-size: 40px; font-weight: 800; }
[data-slide="compare"] .cmp-missing span { font: 500 20px var(--mono); }

[data-slide="compare"] .cmp-list {
  list-style: none;
  display: grid;
  gap: 30px;
}

[data-slide="compare"] .cmp-list li {
  padding-left: 26px;
  border-left: 4px solid var(--tint);
}

[data-slide="compare"] .cmp-list li:nth-child(2) { transition-delay: .25s; }
[data-slide="compare"] .cmp-list li:nth-child(3) { transition-delay: .4s; }
[data-slide="compare"] .cmp-list li:nth-child(4) { transition-delay: .55s; }

[data-slide="compare"] .cmp-list b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
[data-slide="compare"] .cmp-list span { display: block; margin-top: 4px; font-size: 19px; line-height: 1.35; color: var(--secondary); }

/* ═══ learn · continuous refit loop ═══ */

[data-slide="learn"] .lr-loop {
  position: absolute;
  left: 100px;
  top: 250px;
  width: 1000px;
  height: 720px;
}

[data-slide="learn"] .lr-ring {
  position: absolute;
  left: 180px;
  top: 40px;
  width: 640px;
  height: 640px;
}

[data-slide="learn"] .lr-track { fill: none; stroke: var(--separator); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
[data-slide="learn"] .lr-run {
  fill: none;
  stroke: var(--tint);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 14 86;
  transform: rotate(-90deg);
  transform-origin: 320px 320px;
}
[data-slide="learn"].b0 .lr-run { animation: stack-orbit 5s linear infinite; }
@keyframes stack-orbit { to { stroke-dashoffset: -100; } }

[data-slide="learn"] .lr-center {
  position: absolute;
  left: 500px;
  top: 360px;
  translate: -50% -50%;
  text-align: center;
}
[data-slide="learn"] .lr-center b { display: block; font-size: 92px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--tint); }
[data-slide="learn"] .lr-center span { display: block; margin-top: 8px; font-size: 20px; line-height: 1.35; color: var(--secondary); }

/* Nodes sit on the ring (radius 250 around the centre) via the --a angle. */
[data-slide="learn"] .lr-node {
  position: absolute;
  left: calc(500px + cos(var(--a)) * 250px);
  top: calc(360px + sin(var(--a)) * 250px);
  translate: -50% -50%;
  width: 250px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(20, 28, 32, .05), 0 16px 36px -22px rgba(20, 40, 50, .45);
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  align-items: start;
}
[data-slide="learn"] .lr-node i {
  grid-row: span 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tint); color: #fff;
  font: 800 16px var(--font); font-style: normal;
}
[data-slide="learn"] .lr-node b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
[data-slide="learn"] .lr-node span { font-size: 15px; line-height: 1.35; color: var(--secondary); }
[data-slide="learn"] .lr-node em { font-family: var(--mono); font-style: normal; color: var(--label); }

[data-slide="learn"] .lr-side {
  position: absolute;
  left: 1180px;
  right: 100px;
  top: 250px;
  display: grid;
  gap: 22px;
}

[data-slide="learn"] .lr-log {
  border-radius: 20px;
  background: #0F1416;
  color: #D7E3E8;
  padding: 18px 22px 20px;
  box-shadow: 0 24px 50px -28px rgba(10, 20, 25, .7);
}
[data-slide="learn"] .lr-log-head { font: 600 14px var(--mono); color: #7FA5B5; margin-bottom: 10px; }
[data-slide="learn"] .lr-log pre { font: 500 15.5px/1.6 var(--mono); white-space: pre; }
[data-slide="learn"] .lr-log .t { color: #5E7A86; }
[data-slide="learn"] .lr-log .ok { color: #5FC88A; font-weight: 700; }

[data-slide="learn"] .lr-gate { list-style: none; display: grid; gap: 12px; }
[data-slide="learn"] .lr-gate li { padding-left: 18px; border-left: 4px solid var(--tint); font-size: 18px; line-height: 1.4; color: var(--secondary); }
[data-slide="learn"] .lr-gate b { color: var(--label); }
[data-slide="learn"] .lr-delta { font-size: 19px; color: var(--secondary); }
[data-slide="learn"] .lr-delta b { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; color: var(--tint); margin-right: 8px; }

/* ═══ enrich · sources → processing → what you see ═══ */

[data-slide="enrich"] .ex {
  position: absolute;
  left: 100px;
  right: 100px;
  top: 250px;
  height: 720px;
}

/* Sources */
[data-slide="enrich"] .ex-src { position: absolute; left: 0; top: 0; width: 440px; display: grid; gap: 20px; }
[data-slide="enrich"] .ex-card {
  padding: 20px 24px 18px;
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(20, 28, 32, .05), 0 18px 40px -26px rgba(20, 40, 50, .4);
  transition-delay: calc(.1s + var(--k) * .12s) !important;
}
[data-slide="enrich"] .ex-tag { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tint-text); }
[data-slide="enrich"] .ex-card h3 { margin-top: 4px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
[data-slide="enrich"] .ex-note { margin-top: 10px; display: flex; justify-content: space-between; font: 500 14px var(--mono); color: var(--secondary); }

[data-slide="enrich"] .ex-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--tint); -webkit-mask: center / 18px no-repeat var(--m); mask: center / 18px no-repeat var(--m); }
[data-slide="enrich"] .ic-wifi { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 20h.01M2 8.82a15 15 0 0 1 20 0M5 12.86a10 10 0 0 1 14 0M8.5 16.43a5 5 0 0 1 7 0'/%3E%3C/svg%3E"); }
[data-slide="enrich"] .ic-cal { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3C/svg%3E"); }
[data-slide="enrich"] .ic-food { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 3v8M4 3v5a3 3 0 0 0 6 0V3M7 11v10M17 21V3c-2 1-3 4-3 8h3'/%3E%3C/svg%3E"); }

/* Live device bars */
[data-slide="enrich"] .ex-bars { margin-top: 12px; height: 56px; display: flex; align-items: flex-end; gap: 7px; }
[data-slide="enrich"] .ex-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--tint) 75%, transparent); transform-origin: bottom; }
[data-slide="enrich"].b0 .ex-bars i { animation: stack-bars 2.4s ease-in-out infinite alternate; }
[data-slide="enrich"] .ex-bars i:nth-child(2n) { animation-delay: -.8s; }
[data-slide="enrich"] .ex-bars i:nth-child(3n) { animation-delay: -1.6s; }
@keyframes stack-bars { 0% { scale: 1 .7; } 100% { scale: 1 1; } }

/* A day of bookings with a "now" line */
[data-slide="enrich"] .ex-day { position: relative; margin-top: 14px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--success) 16%, var(--card)); overflow: hidden; }
[data-slide="enrich"] .ex-day i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tertiary) 45%, transparent) 0 6px, color-mix(in srgb, var(--tertiary) 25%, transparent) 6px 12px); }
[data-slide="enrich"] .ex-day b { position: absolute; top: -2px; bottom: -2px; left: calc(var(--n) * 100%); width: 3px; border-radius: 2px; background: var(--tint); }

/* Dish */
[data-slide="enrich"] .ex-dish { margin-top: 12px; display: flex; gap: 14px; align-items: center; }
[data-slide="enrich"] .ex-dish-img { width: 64px; height: 64px; border-radius: 14px; background: radial-gradient(circle at 40% 40%, #F4C27A, #D9822B 55%, #8C4A1A); box-shadow: inset 0 0 0 5px #FFF7EC; flex: none; }
[data-slide="enrich"] .ex-dish b { display: block; font-size: 20px; font-weight: 700; }
[data-slide="enrich"] .ex-dish span { display: block; font-size: 15px; color: var(--secondary); }
[data-slide="enrich"] .ex-dish em { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); font-size: 13px; font-style: normal; font-weight: 700; }

/* Pipes */
[data-slide="enrich"] .ex-pipes { position: absolute; left: 440px; top: 0; width: 520px; height: 620px; overflow: visible; }
[data-slide="enrich"] .ex-pipes path { fill: none; stroke: var(--tint); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 3 11; opacity: .8; }
[data-slide="enrich"].b1 .ex-pipes path { animation: stack-flow 1s linear infinite; }
[data-slide="enrich"] .ex-pipes .out { stroke: var(--c-bus); stroke-width: 5; }

/* Processing labels + hub */
[data-slide="enrich"] .ex-mid { position: absolute; left: 440px; top: 0; width: 520px; height: 620px; }
[data-slide="enrich"] .ex-rule {
  position: absolute;
  left: 60px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 8px 20px -14px rgba(20, 40, 50, .5);
  font: 600 15px var(--mono);
  color: var(--label);
  white-space: nowrap;
}
[data-slide="enrich"] .ex-formula { left: 110px; background: var(--tint); color: #fff; }
[data-slide="enrich"] .ex-hub {
  position: absolute;
  left: 150px;
  top: 220px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 0 0 3px var(--tint), 0 20px 40px -24px rgba(20, 40, 50, .5);
}
[data-slide="enrich"] .ex-hub-head { font: 700 14px var(--mono); color: var(--tint-text); }
[data-slide="enrich"] .ex-prec { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
[data-slide="enrich"] .ex-prec span { padding: 5px 12px; border-radius: 999px; background: var(--tint-fill); color: var(--tint-text); font-size: 16px; font-weight: 700; }
[data-slide="enrich"] .ex-prec .p1 { background: var(--tint); color: #fff; }
[data-slide="enrich"] .ex-prec i { font-style: normal; color: var(--tertiary); font-size: 18px; }

/* Output: real floor E, rooms coloured by band */
[data-slide="enrich"] .ex-out { position: absolute; left: 960px; right: 0; top: 0; }
[data-slide="enrich"] .ex-map {
  position: relative;
  height: 470px;
  border-radius: 28px;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 28, 32, .05), 0 24px 50px -28px rgba(20, 40, 50, .4);
}
[data-slide="enrich"] .hg-occ { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-slide="enrich"] .hg-occ .room { fill: #EEF1F2; stroke: #D3D9DC; stroke-width: .8; }
:root[data-theme="dark"] [data-slide="enrich"] .hg-occ .room { fill: #1F2326; stroke: #33393D; }
[data-slide="enrich"] .hg-occ .occ { stroke: #fff; stroke-width: 1; opacity: 0; transition: opacity .5s var(--ease-out) var(--d); }
[data-slide="enrich"].b2 .hg-occ .occ { opacity: 1; }
[data-slide="enrich"] .occ-free { fill: #3E9C63; }
[data-slide="enrich"] .occ-busy { fill: #E8A33A; }
[data-slide="enrich"] .occ-full { fill: #D9534A; }

[data-slide="enrich"] .ex-legend { margin-top: 12px; display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; color: var(--secondary); }
[data-slide="enrich"] .ex-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 4px; background: var(--c); vertical-align: -1px; }
[data-slide="enrich"] .l-free { --c: #3E9C63; } [data-slide="enrich"] .l-busy { --c: #E8A33A; } [data-slide="enrich"] .l-full { --c: #D9534A; }
[data-slide="enrich"] .ex-legend em { margin-left: auto; font: 500 13px var(--mono); font-style: normal; color: var(--tertiary); }

[data-slide="enrich"] .ex-room {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 360px;
  padding: 14px 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: 0 16px 36px -18px rgba(20, 40, 50, .55);
  translate: 0 14px;
  opacity: 0;
  transition: opacity .5s var(--ease-out) 1.2s, translate .6s var(--ease-out) 1.2s;
}
[data-slide="enrich"].b2 .ex-room { opacity: 1; translate: none; }
[data-slide="enrich"] .ex-room b { font-size: 22px; font-weight: 800; }
[data-slide="enrich"] .ex-room p { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
[data-slide="enrich"] .ex-room span { padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; }
[data-slide="enrich"] .pill-green { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
[data-slide="enrich"] .pill-n { background: var(--tint-fill); color: var(--tint-text); }
[data-slide="enrich"] .ex-food {
  position: absolute;
  left: 0;
  right: 0;
  top: 528px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(20, 28, 32, .05), 0 18px 40px -26px rgba(20, 40, 50, .4);
}
[data-slide="enrich"] .ex-food .ex-ic { width: 40px; height: 40px; border-radius: 12px; -webkit-mask-size: 24px; mask-size: 24px; }
[data-slide="enrich"] .ex-food b { display: block; font-size: 21px; font-weight: 800; }
[data-slide="enrich"] .ex-food span { font-size: 16px; color: var(--secondary); }

/* ═══ share · E2E location ═══ */

[data-slide="share"] .shr {
  position: absolute;
  left: 100px;
  top: 340px;
  width: 1720px;
  height: 380px;
  display: grid;
  grid-template-columns: 400px 1fr 440px 1fr 400px;
  align-items: center;
}

[data-slide="share"] .shr-node { grid-row: 1; display: grid; gap: 14px; padding: 32px; border-radius: 28px; background: var(--card);
  box-shadow: 0 1px 2px rgba(20, 28, 32, .05), 0 18px 40px -24px rgba(20, 40, 50, .3); }
[data-slide="share"] .shr-node:nth-of-type(1) { grid-column: 1; }
[data-slide="share"] .shr-server { grid-column: 3; box-shadow: 0 0 0 3px var(--c-bus), 0 24px 50px -24px rgba(194, 87, 27, .45); }
[data-slide="share"] .shr-node:nth-of-type(3) { grid-column: 5; }

[data-slide="share"] .shr-who { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }

[data-slide="share"] code {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--tint-fill);
  color: var(--tint-text);
  font: 600 19px var(--mono);
}

[data-slide="share"] code.shr-cipher { background: var(--c-bus-bg); color: var(--c-bus); }

[data-slide="share"] .shr-step { font-size: 19px; color: var(--secondary); }

[data-slide="share"] .shr-chip {
  justify-self: start;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--c-ext-bg);
  font: 600 15px var(--mono);
  color: var(--secondary);
}

[data-slide="share"] .shr-lock { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }

[data-slide="share"] .shr-pipe {
  position: absolute;
  left: 0;
  top: 110px;
  width: 1720px;
  height: 160px;
  overflow: visible;
  pointer-events: none;
}

[data-slide="share"] .shr-pipe path {
  fill: none;
  stroke: var(--tint);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 3 12;
  animation: stack-flow 1s linear infinite;
}

[data-slide="share"] .shr-packet { fill: var(--c-bus); }
[data-slide="share"].b2 .shr-packet { animation: stack-packet 2.4s var(--ease-in-out) infinite; }

@keyframes stack-packet {
  0%   { cx: 400;  fill: var(--success); }
  30%  { cx: 640;  fill: var(--c-bus); }
  70%  { cx: 1080; fill: var(--c-bus); }
  100% { cx: 1320; fill: var(--success); }
}

[data-slide="share"] .shr-facts {
  position: absolute;
  left: 100px;
  right: 100px;
  top: 820px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  list-style: none;
}

[data-slide="share"] .shr-facts li { padding-top: 22px; border-top: 2px solid var(--separator); font-size: 24px; }

/* ═══ try · QR codes ═══ */

[data-slide="try"] .try {
  position: absolute;
  left: 0;
  right: 0;
  top: 300px;
  display: flex;
  justify-content: center;
  gap: 120px;
}

[data-slide="try"] .try-card {
  width: 520px;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 44px 40px 40px;
  border-radius: 32px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 28, 32, .05), 0 24px 50px -24px rgba(20, 40, 50, .35);
}

[data-slide="try"] .try-card + .try-card { transition-delay: .25s; }

[data-slide="try"] .qr {
  width: 380px;
  height: 380px;
  padding: 18px;
  margin-bottom: 18px;
  border-radius: 20px;
  background: #fff; /* QR stays dark-on-white in dark mode too */
}

[data-slide="try"] .qr svg { display: block; width: 100%; height: 100%; }

[data-slide="try"] .try-what { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
[data-slide="try"] .try-url { font: 600 24px var(--mono); color: var(--tint-text); }
[data-slide="try"] .try-note { font-size: 19px; color: var(--secondary); }