:root {
  --ink: #070917;
  --ink-soft: #11142a;
  --paper: #f5f4ff;
  --muted: #abb2d2;
  --cyan: #61f7ef;
  --violet: #9b7bff;
  --coral: #ff9e80;
  --line: rgba(245, 244, 255, 0.18);
}

html, body, .reveal-viewport {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 24%, rgba(94, 82, 236, 0.18), transparent 26%),
    radial-gradient(circle at 20% 82%, rgba(34, 214, 205, 0.09), transparent 22%),
    var(--ink) !important;
}

.reveal, .reveal .backgrounds { background: transparent; }

.reveal {
  color: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 28px;
}

.reveal .slides { text-align: left; }
.reveal .slides > section { box-sizing: border-box; padding: 48px 72px; }
.reveal h1, .reveal h2, .reveal h3, .reveal p { margin: 0; }
.reveal h1, .reveal h2, .reveal h3 { color: var(--paper); font-weight: 730; letter-spacing: -0.055em; text-transform: none; }
.reveal h2 { font-size: 63px; line-height: 0.98; max-width: 900px; }
.reveal h3 { font-size: 27px; line-height: 1.05; }
.reveal p { line-height: 1.25; }
.reveal .progress { color: var(--cyan); height: 4px; }
.reveal .slide-number { color: var(--muted); font-size: 14px; background: transparent; right: 26px; bottom: 18px; }

.reveal .slides > section { background:
  radial-gradient(circle at 76% 24%, rgba(94, 82, 236, 0.18), transparent 26%),
  radial-gradient(circle at 20% 82%, rgba(34, 214, 205, 0.09), transparent 22%),
  var(--ink); }

.eyebrow { color: var(--cyan); font-size: 16px; font-weight: 760; letter-spacing: 0.16em; text-transform: uppercase; }
.slide-head { position: relative; z-index: 2; }
.slide-head h2 { margin-top: 14px; }
.scene-caption { position: absolute; left: 72px; bottom: 44px; color: var(--muted); font-size: 20px; max-width: 820px; }

/* Reusable web-page figure */
.browser-shell { position: relative; border: 1px solid rgba(245, 244, 255, 0.35); border-radius: 18px; background: rgba(17, 20, 42, 0.76); overflow: hidden; box-shadow: 0 28px 66px rgba(0, 0, 0, 0.3); }
.browser-top { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.browser-top i { width: 8px; height: 8px; border-radius: 50%; background: rgba(245, 244, 255, 0.45); }
.browser-top b { width: 38%; height: 8px; margin-left: 10px; border-radius: 20px; background: rgba(245, 244, 255, 0.14); }
.browser-lines, .dense-layout, .guide-layout, .old-layout, .new-layout { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.browser-lines em, .dense-layout em, .guide-layout em, .old-layout em, .new-layout em { display: block; height: 10px; border-radius: 12px; background: rgba(245, 244, 255, 0.12); }
.browser-lines em:nth-child(2), .dense-layout em:nth-child(4), .guide-layout em:nth-child(3) { width: 68%; }
.browser-lines strong, .dense-layout strong, .guide-layout strong, .old-layout strong, .new-layout strong { display: block; height: 42px; border-radius: 10px; background: linear-gradient(115deg, rgba(97, 247, 239, 0.32), rgba(155, 123, 255, 0.34)); }
.dense-layout u, .guide-layout u, .old-layout u, .new-layout u { display: block; width: 42%; height: 28px; border-radius: 9px; background: rgba(97, 247, 239, 0.7); text-decoration: none; }

/* Slide 1 */
.cover { padding: 0 !important; }
.cover-grid { box-sizing: border-box; height: 100%; display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: center; padding: 54px 80px; }
.cover-copy { position: relative; z-index: 2; }
.cover-copy h1 { margin-top: 20px; font-size: 117px; line-height: 0.85; }
.cover-copy h1 span { color: var(--cyan); }
.tagline { max-width: 460px; margin-top: 32px !important; color: var(--paper); font-size: 31px; line-height: 1.08 !important; }
.cover-figure { position: relative; height: 520px; }
.cover-browser { width: 420px; height: 382px; position: absolute; right: 8px; top: 55px; transform: rotate(6deg); }
.cover-browser::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 42%, rgba(155, 123, 255, 0.16)); pointer-events: none; }
.eye-mark { width: 144px; height: 84px; position: absolute; border: 4px solid var(--cyan); border-radius: 100% 0; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 0 34px rgba(97, 247, 239, 0.26); }
.eye-mark span { width: 45px; height: 45px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 12px rgba(97, 247, 239, 0.18); }
.cover-browser .eye-mark { left: 130px; top: 125px; }
.wave { height: 50px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.wave i { display: block; width: 6px; height: 18px; border-radius: 20px; background: var(--cyan); box-shadow: 0 0 13px rgba(97, 247, 239, 0.5); animation: voice 1.35s ease-in-out infinite; }
.wave i:nth-child(2), .wave i:nth-child(6) { height: 33px; animation-delay: -0.22s; }
.wave i:nth-child(3), .wave i:nth-child(5) { height: 45px; animation-delay: -0.46s; }
.wave i:nth-child(4) { height: 58px; background: var(--violet); animation-delay: -0.7s; }
.wave-cover { position: absolute; right: 42px; bottom: 28px; }
.figure-label { position: absolute; right: 38px; bottom: 0; color: var(--muted); font-size: 18px; }

/* Slide 2 */
.intent-scene { position: relative; display: grid; grid-template-columns: 1fr 0.32fr 1fr; gap: 14px; align-items: center; margin-top: 38px; }
.voice-intent { padding: 36px 30px; }
.spoken { max-width: 350px; font-size: 32px; line-height: 1.06 !important; font-weight: 700; letter-spacing: -0.035em; }
.voice-intent .wave { justify-content: flex-start; margin: 17px 0 8px; }
.voice-intent > p:last-child { color: var(--muted); font-size: 18px; }
.intent-path { display: flex; gap: 10px; align-items: center; }
.intent-path::before, .intent-path::after { content: ""; width: 34px; height: 1px; background: rgba(97, 247, 239, 0.5); }
.intent-path span { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); animation: path-pulse 1.8s ease-in-out infinite; }
.intent-path span:nth-child(2) { animation-delay: -0.3s; }.intent-path span:nth-child(3) { animation-delay: -0.6s; }
.dense-page { width: 390px; height: 320px; justify-self: end; transform: rotate(2.5deg); }
.cursor-mark { position: absolute; display: grid; place-items: center; right: 72px; bottom: 70px; width: 58px; height: 58px; border-radius: 50%; background: var(--coral); color: var(--ink); font-size: 38px; font-weight: 800; box-shadow: 0 0 0 10px rgba(255, 158, 128, 0.18); }

/* Slide 3 */
.twin-scenes { display: grid; grid-template-columns: 1fr 1fr; gap: 86px; margin: 34px 42px 0; }
.scenario { position: relative; min-height: 340px; padding: 36px 0 0 176px; }
.scenario h3 { margin-top: 20px; }.scenario p { max-width: 300px; margin-top: 10px; color: var(--muted); font-size: 20px; }
.person-mark { position: absolute; left: 18px; top: 80px; width: 92px; height: 154px; }
.person-mark i { position: absolute; left: 30px; width: 39px; height: 39px; border: 3px solid var(--paper); border-radius: 50%; }
.person-mark b { position: absolute; left: 10px; top: 51px; width: 74px; height: 78px; border: 3px solid var(--paper); border-bottom: 0; border-radius: 48px 48px 0 0; }
.scenario-page { width: 245px; height: 172px; transform: rotate(-3deg); }
.hidden-control { position: absolute; right: 25px; bottom: 31px; width: 42px; height: 42px; display: grid; place-items: center; border: 2px dashed var(--coral); border-radius: 50%; color: var(--coral); font-weight: 800; }
.change { padding-left: 150px; }.mini-pages { position: absolute; left: 0; top: 58px; width: 115px; height: 164px; }
.mini-pages span { position: absolute; width: 92px; height: 126px; border: 2px solid rgba(245, 244, 255, 0.5); border-radius: 10px; background: linear-gradient(145deg, rgba(17, 20, 42, 0.98), rgba(155, 123, 255, 0.15)); }.mini-pages span:first-child { transform: rotate(-9deg); left: 3px; top: 16px; }.mini-pages span:last-child { transform: rotate(7deg); left: 23px; top: 0; border-color: var(--cyan); }
.re-read { position: absolute; left: 46px; top: 124px; z-index: 2; padding: 7px 11px; border-radius: 20px; background: var(--cyan); color: var(--ink); font-size: 14px; font-weight: 800; transform: rotate(-5deg); }

/* Slide 4 */
.guide-scene { position: relative; display: grid; grid-template-columns: 0.58fr 1fr 0.52fr; align-items: center; gap: 24px; margin-top: 28px; }
.launch-points { position: relative; min-height: 280px; text-align: center; }.launch-points p { position: absolute; bottom: 35px; width: 100%; color: var(--muted); font-size: 17px; }
.widget-mark { position: absolute; top: 22px; left: 66px; width: 64px; height: 64px; display: grid; place-items: center; border: 2px solid var(--coral); border-radius: 50%; background: rgba(255, 158, 128, 0.1); }.widget-mark span { position: relative; width: 18px; height: 30px; border: 3px solid var(--coral); border-radius: 14px; }.widget-mark span::after { content: ""; position: absolute; left: 50%; bottom: -17px; width: 34px; height: 24px; border: 3px solid var(--coral); border-top: 0; border-radius: 0 0 19px 19px; transform: translateX(-50%); }.plugin-mark { position: absolute; top: 124px; left: 66px; width: 60px; height: 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px; border: 2px solid var(--cyan); border-radius: 15px; }.plugin-mark span { border-radius: 50%; background: var(--cyan); }.launch-line { position: absolute; left: 97px; top: 91px; height: 30px; border-left: 1px solid var(--line); }
.guide-browser { width: 535px; height: 312px; }.guide-orb { position: absolute; width: 120px; height: 120px; right: 38px; bottom: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(97, 247, 239, 0.1); border: 1px solid var(--cyan); box-shadow: 0 0 0 15px rgba(97, 247, 239, 0.06), 0 0 40px rgba(97, 247, 239, 0.2); }.guide-orb .wave { transform: scale(0.72); }
.action-burst { display: flex; flex-direction: column; gap: 18px; }.action-burst span { color: var(--paper); font-size: 22px; font-weight: 650; }.action-burst span::before { content: ""; display: inline-block; width: 42px; margin: 0 13px 7px 0; border-top: 1px solid var(--violet); }

/* Slide 5 */
.flow-map { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 360px; margin-top: 4px; }.flow-step { width: 164px; min-height: 166px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; border: 1px solid rgba(245, 244, 255, 0.26); border-radius: 16px; background: rgba(17, 20, 42, 0.72); }.flow-step b { color: var(--muted); font-size: 15px; letter-spacing: 0.08em; }.flow-step span { font-size: 22px; font-weight: 720; line-height: 1.04; }.flow-step.exa { border-color: rgba(155, 123, 255, 0.8); }.flow-step.live { border-color: rgba(97, 247, 239, 0.82); }.flow-step.luna { border-color: rgba(255, 158, 128, 0.82); }.flow-step.action { border-color: rgba(97, 247, 239, 0.6); background: linear-gradient(145deg, rgba(97, 247, 239, 0.11), rgba(17, 20, 42, 0.94)); }.flow-link { width: 28px; border-top: 1px solid rgba(245, 244, 255, 0.44); position: relative; }.flow-link::after { content: ""; position: absolute; right: -1px; top: -4px; border-width: 4px 0 4px 6px; border-style: solid; border-color: transparent transparent transparent rgba(245, 244, 255, 0.44); }.flow-caption { display: flex; justify-content: center; gap: 18px; align-items: center; color: var(--muted); font-size: 18px; }.flow-caption i { width: 28px; border-top: 1px solid var(--cyan); }

/* Slide 6 */
.architecture { position: relative; height: 390px; margin-top: 15px; }.arch-input, .arch-output { position: absolute; top: 154px; width: 122px; text-align: center; }.arch-input { left: 0; }.arch-output { right: 0; }.arch-input p, .arch-output p { margin-top: 12px; color: var(--muted); font-size: 17px; }.arch-node, .arch-context { position: absolute; padding: 20px 22px; border-radius: 18px; background: rgba(17, 20, 42, 0.92); border: 1px solid var(--line); }.live-node { left: 170px; top: 166px; width: 210px; border-color: var(--cyan); }.arch-context { left: 406px; top: 52px; width: 200px; border-color: var(--violet); }.luna-node { left: 650px; top: 166px; width: 232px; border-color: var(--coral); }.node-kicker { margin-bottom: 12px !important; color: var(--muted); font-size: 13px; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }.arch-node h3, .arch-context h3 { font-size: 29px; }.arch-node span, .arch-context span { display: block; margin-top: 8px; color: var(--muted); font-size: 17px; }.arch-line { position: absolute; border-top: 1px solid rgba(245, 244, 255, 0.38); transform-origin: left center; }.l1 { left: 125px; top: 184px; width: 45px; }.l2 { left: 380px; top: 216px; width: 122px; transform: rotate(-43deg); }.l3 { left: 606px; top: 151px; width: 86px; transform: rotate(43deg); }.l4 { left: 882px; top: 216px; width: 63px; }.dom-mark { width: 71px; height: 61px; margin: 0 auto; border: 1px solid var(--cyan); border-radius: 10px; padding: 13px 10px 0; }.dom-mark i { display: block; height: 7px; margin-bottom: 8px; border-radius: 10px; background: var(--cyan); }.dom-mark i:nth-child(2) { width: 74%; }.dom-mark i:nth-child(3) { width: 48%; }.arch-input .wave { transform: scale(0.72); }

/* Slide 7 */
.task-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 68px; margin: 44px 75px 0; }.task { min-height: 300px; text-align: center; }.task-icon { position: relative; height: 120px; margin: 0 auto 24px; }.task-ask { color: var(--cyan); font-size: 19px; font-weight: 680; }.task h3 { margin-top: 11px; }.form-icon { width: 100px; border: 2px solid var(--paper); border-radius: 12px; padding: 24px 17px 0; }.form-icon i { display: block; height: 9px; margin-bottom: 12px; border-radius: 10px; background: rgba(245, 244, 255, 0.36); }.form-icon b { position: absolute; right: -19px; bottom: -12px; width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan); color: var(--ink); font-size: 24px; }.find-icon { width: 112px; }.find-icon i { position: absolute; left: 16px; top: 9px; width: 72px; height: 72px; border: 5px solid var(--violet); border-radius: 50%; }.find-icon b { position: absolute; left: 78px; top: 78px; width: 55px; border-top: 5px solid var(--violet); transform: rotate(48deg); transform-origin: left; }.go-icon { width: 125px; }.go-icon i { position: absolute; top: 14px; width: 50px; height: 92px; border: 3px solid rgba(245, 244, 255, 0.7); border-radius: 10px; }.go-icon i:first-child { left: 12px; }.go-icon i:nth-child(2) { right: 12px; border-color: var(--coral); transform: translateY(13px); }.go-icon b { position: absolute; left: 52px; top: 47px; width: 42px; border-top: 3px solid var(--cyan); }.go-icon b::after { content: ""; position: absolute; right: -1px; top: -7px; border-width: 7px 0 7px 12px; border-style: solid; border-color: transparent transparent transparent var(--cyan); }

/* Slide 8 */
.refresh-scene { position: relative; display: grid; grid-template-columns: 1fr 0.5fr 1fr; gap: 34px; align-items: center; margin: 20px 62px 0; }.old-page, .new-page { width: 315px; height: 258px; }.old-page p, .new-page p { position: absolute; left: 17px; bottom: 11px; color: var(--muted); font-size: 14px; }.new-page { border-color: var(--cyan); transform: rotate(1.5deg); }.old-page { transform: rotate(-2deg); }.new-layout strong { order: 3; }.new-layout u { order: 1; }.context-refresh { text-align: center; }.refresh-ring { width: 130px; height: 130px; display: grid; place-items: center; margin: 0 auto; border: 1px dashed var(--cyan); border-radius: 50%; animation: spin 11s linear infinite; }.refresh-ring span { display: grid; place-items: center; width: 77px; height: 77px; border-radius: 50%; background: var(--violet); color: var(--paper); font-size: 19px; font-weight: 760; animation: spin-reverse 11s linear infinite; }.context-refresh p { margin-top: 17px; color: var(--muted); font-size: 16px; }.dom-route { position: absolute; right: 0; bottom: -45px; display: flex; align-items: center; gap: 8px; }.dom-route span { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); }.dom-route b { margin-left: 8px; color: var(--cyan); font-size: 17px; }

/* Slide 9 */
.closing { padding: 0 !important; }.closing-content { box-sizing: border-box; position: relative; height: 100%; padding: 82px 116px; overflow: hidden; }.closing-content h2 { margin-top: 25px; font-size: 85px; line-height: 0.94; }.closing-content h2 span { color: var(--cyan); }.closing-orbit { position: absolute; right: 134px; top: 121px; width: 340px; height: 340px; border: 1px solid rgba(155, 123, 255, 0.6); border-radius: 50%; animation: drift 7s ease-in-out infinite; }.closing-orbit::before, .closing-orbit::after { content: ""; position: absolute; border: 1px solid rgba(97, 247, 239, 0.26); border-radius: 50%; }.closing-orbit::before { inset: 31px; }.closing-orbit::after { inset: 67px; }.closing-orbit .eye-mark { top: 75px; left: 100px; transform: rotate(-45deg) scale(0.68); }.closing-orbit .wave-cover { right: 98px; bottom: 50px; transform: scale(0.75); }.closing-note { margin-top: 46px !important; color: var(--muted); font-size: 20px; }.tech-note { max-width: 680px; margin-top: 14px !important; color: rgba(245, 244, 255, 0.65); font-size: 15px; }

@keyframes voice { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1.06); } }
@keyframes path-pulse { 0%, 100% { opacity: 0.22; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1.24); } }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin-reverse { to { transform: rotate(-360deg); } } @keyframes drift { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-13px) rotate(2deg); } }

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

@media (max-width: 800px) { .reveal .slides > section { padding: 28px 36px; }.reveal h2 { font-size: 48px; }.cover-grid { padding: 44px; }.cover-copy h1 { font-size: 92px; }.cover-browser { transform: scale(0.72) rotate(6deg); transform-origin: right center; }.twin-scenes { gap: 30px; margin-left: 0; margin-right: 0; }.task-scenes { gap: 28px; margin-left: 20px; margin-right: 20px; }.flow-map { transform: scale(0.83); transform-origin: left center; width: 120%; }.architecture { transform: scale(0.82); transform-origin: left top; width: 122%; }.closing-content { padding-left: 62px; }.closing-content h2 { font-size: 65px; }.closing-orbit { right: 45px; transform: scale(0.76); transform-origin: right top; }.closing-note, .tech-note { left: 62px; } }

@media (max-width: 1100px) {
  .architecture { transform: scale(0.72); transform-origin: left top; width: 136%; height: 292px; }
  .architecture + .scene-caption { bottom: 30px; font-size: 18px; max-width: 700px; }
}