@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root { --bg:#071019; --panel:#0c1823; --panel-2:#0f1d29; --line:#203342; --text:#edf5f7; --muted:#8fa5af; --cyan:#43c4d7; --cyan-soft:#87dce7; --green:#50c892; }
* { box-sizing:border-box; }
html { height:100%; overflow:hidden; scroll-behavior:smooth; background:var(--bg); }
body { height:100%; overflow:hidden; margin:0; color:var(--text); background:var(--bg); font-family:"Noto Sans KR",sans-serif; }
.presentation-container { height:100vh; height:100dvh; overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; scroll-behavior:smooth; overscroll-behavior-y:contain; }
.presentation-slide { position:relative; width:100%; height:100vh; height:100dvh; min-height:100vh; min-height:100dvh; scroll-snap-align:start; scroll-snap-stop:always; }
.intro-slide { position:relative; min-height:100vh; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 78% 12%,rgba(33,105,124,.13),transparent 31%),linear-gradient(135deg,#071019 0%,#09131d 55%,#071018 100%); }
.intro-slide::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 74%); }
.ambient-grid { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,transparent 49.9%,rgba(67,196,215,.04) 50%,transparent 50.1%); }
.network-map { position:absolute; z-index:-1; width:min(58vw,950px); right:-5vw; top:27.33px; opacity:.34; filter:drop-shadow(0 0 14px rgba(67,196,215,.08)); }
.network-lines path { fill:none; stroke:url(#lineFade); stroke-width:1.4; }
.network-nodes rect { fill:#0d1b26; stroke:#3fb5c7; stroke-width:1; opacity:.55; }
.data-packet { fill:#82deea; filter:drop-shadow(0 0 8px #43c4d7); animation:packet 16s linear infinite; }
.slide-content { width:min(1780px,calc(100% - 8vw)); min-height:911px; margin:auto; padding:37.351px 0 47.372px; display:flex; flex-direction:column; gap:20.953px; }
.eyebrow,.section-label,.card-label,.card-number,.live-state,.future-state,.system-groups small,.response-flow small,.closing-index,.scroll-indicator { font-family:"IBM Plex Mono",monospace; letter-spacing:.12em; }
.eyebrow { color:var(--cyan-soft); font-size:clamp(11px,.7vw,14px); font-weight:600; display:flex; align-items:center; gap:10px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 9px rgba(80,200,146,.65); }
.section-label { margin:10.932px 0 0; color:#58707b; font-size:clamp(10px,.62vw,12px); font-weight:500; }
.hero-row { display:flex; align-items:flex-end; justify-content:space-between; gap:4vw; }
h1 { margin:3.644px 0 0; font-size:clamp(48px,4vw,76px); line-height:1.08; letter-spacing:-.055em; font-weight:800; }
.hero h2 { margin:7.288px 0 0; font-size:clamp(22px,1.62vw,31px); line-height:1.42; letter-spacing:-.035em; font-weight:500; color:#b8c7cc; }
.hero h2 strong { color:var(--text); font-weight:700; position:relative; }
.hero h2 strong::after { content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; background:linear-gradient(90deg,var(--cyan),transparent); }
.hero-description { margin:12.754px 0 0; color:var(--muted); font-size:clamp(13px,.8vw,16px); line-height:1.75; }
.stack-list { max-width:570px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; padding-bottom:5px; }
.stack-list span,.future-tags span { border:1px solid #213744; background:#0a1721; color:#94adb7; border-radius:4px; font-family:"IBM Plex Mono",monospace; }
.stack-list span { padding:6px 10px; font-size:clamp(9px,.58vw,12px); }
.cards { display:grid; grid-template-columns:1fr 1.12fr 1.08fr; gap:14px; flex:1; min-height:0; }
.card { position:relative; overflow:hidden; padding:clamp(18px,1.3vw,26px); border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,rgba(15,30,42,.98),rgba(10,22,32,.98)); box-shadow:0 12px 32px rgba(0,0,0,.15); display:flex; flex-direction:column; }
.card::before { content:""; position:absolute; left:0; top:0; width:36%; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); }
.card-top { min-height:24px; display:flex; align-items:center; gap:12px; }
.card-number { color:#4d6874; font-size:11px; }
.card-label { color:var(--cyan-soft); font-size:clamp(10px,.63vw,12px); font-weight:600; }
.workload-icon { margin-left:auto; display:flex; gap:4px; align-items:flex-end; height:18px; }
.workload-icon i { display:block; width:4px; background:#3a8290; border-radius:1px; }
.workload-icon i:nth-child(1){height:9px}.workload-icon i:nth-child(2){height:17px;background:var(--cyan)}.workload-icon i:nth-child(3){height:12px}
.live-state,.future-state { margin-left:auto; font-size:9px; color:#6f8b96; }
.live-state { color:#79cba6; display:flex; align-items:center; gap:6px; }
.live-state i { width:5px; height:5px; background:var(--green); border-radius:50%; }
.card h3 { margin:11.843px 0 9.11px; font-size:clamp(17px,1.08vw,22px); line-height:1.45; letter-spacing:-.025em; }
.card p { margin:0; color:#8fa3ac; font-size:clamp(11px,.67vw,14px); line-height:1.65; }
.formula { margin:auto 0; padding:10.932px 0; display:flex; justify-content:center; align-items:center; gap:12px; border-top:1px solid #1c303c; border-bottom:1px solid #1c303c; font-family:"IBM Plex Mono",monospace; font-size:clamp(13px,.9vw,18px); }
.formula span { color:#859ca6; }.formula b { color:#526c77; }.formula strong { color:var(--cyan-soft); }
.card-note { margin-top:auto!important; padding-top:9.11px; border-top:1px solid #1c303c; color:#b6c5ca!important; }
.card-note strong { color:var(--cyan-soft); }
.current-body { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; flex:1; min-height:0; }
.system-groups { display:flex; flex-direction:column; justify-content:center; gap:10.932px; }
.system-groups div { padding-left:11px; border-left:2px solid #254753; }
.system-groups small { display:block; color:#5db8c6; font-size:9px; margin-bottom:3px; }
.system-groups span { display:block; color:#b1c0c5; font-size:clamp(10px,.61vw,12px); }
.service-flow { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.service-flow span { width:76px; padding:4px 5px; text-align:center; border:1px solid #284451; background:#0a151e; border-radius:3px; color:#9eb3bb; font:500 9px "IBM Plex Mono",monospace; }
.service-flow i { display:block; height:10px; width:1px; background:#3d7884; position:relative; }
.service-flow i::after { content:""; position:absolute; bottom:0; left:-2px; border:3px solid transparent; border-top-color:#3d7884; }
.response-flow { display:flex; align-items:center; justify-content:space-between; margin:10.021px 0; padding:11.843px 8px; background:#09151e; border:1px solid #1b303b; border-radius:7px; }
.response-flow div { text-align:center; min-width:48px; }
.response-flow small { display:block; color:#54727d; font-size:7px; margin-bottom:4px; }
.response-flow b { font-size:clamp(10px,.6vw,12px); color:#b9c9ce; }
.response-flow i { flex:1; height:1px; background:linear-gradient(90deg,#2d6470,#397985); position:relative; margin:0 4px; }
.response-flow i::after { content:""; position:absolute; right:-1px; top:-2px; border:3px solid transparent; border-left-color:#397985; }
.final .response-flow + p {
  width:min(92%,440px);
  min-height:0;
  margin:0 auto;
  padding:10.932px 0;
  display:flex;
  flex:1;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.75;
}
.final .future-tags { margin-top:0; }
.future-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; padding-top:9.11px; }
.future-tags span { padding:3px 6px; font-size:8px; }
.closing { min-height:91.1px; border-top:1px solid #263844; display:flex; align-items:center; gap:28px; padding-top:15.487px; }
.closing-index { color:#4e6974; font-size:9px; line-height:1.55; }
.closing p { margin:0; color:#8fa2aa; font-size:clamp(15px,1vw,20px); line-height:1.55; }
.closing strong { color:#edf4f6; font-size:clamp(19px,1.34vw,27px); }.closing em { color:var(--cyan-soft); font-style:normal; }.closing strong span { margin:0 8px; color:#3a6873; font-weight:400; }
.scroll-indicator { position:absolute; left:50%; bottom:10.932px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; color:#49616c; font-size:8px; gap:5px; border:0; padding:0; background:none; cursor:pointer; }
.scroll-indicator i { width:1px; height:9px; background:#4c7b85; position:relative; }.scroll-indicator i::after { content:""; position:absolute; bottom:0; left:-2px; width:4px; height:4px; border-right:1px solid #4c7b85; border-bottom:1px solid #4c7b85; transform:rotate(45deg); }
.reveal { opacity:0; transform:translateY(12px); animation:reveal .65s cubic-bezier(.22,.75,.3,1) forwards; animation-delay:var(--delay,0s); }
@keyframes reveal { to { opacity:1; transform:none; } }
@keyframes packet { 0%{transform:translateX(0);opacity:0} 8%{opacity:1} 48%{opacity:1} 52%{transform:translateX(720px);opacity:0} 100%{transform:translateX(720px);opacity:0} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
@media (max-width:1100px),(max-height:760px){.slide-content{width:min(94%,1780px);padding-top:27.33px}.hero-description br{display:none}.cards{gap:9px}.card{padding:16px}.stack-list{max-width:430px}.closing{min-height:81.99px}}
@media (max-width:820px){.intro-slide{overflow:auto}.slide-content{height:auto;min-height:911px;padding:28px 0 55px}.hero-row{display:block}.stack-list{justify-content:flex-start;margin-top:20px;max-width:none}.cards{grid-template-columns:1fr}.card{min-height:360px}.closing{margin-top:10px}.network-map{width:900px;right:-500px}.scroll-indicator{position:absolute}}

/* 1920 × 1080 presentation hierarchy */
@media (min-width:1101px) and (min-height:761px) {
  .slide-content {
    height:911px;
    min-height:0;
    padding:28.241px 0 34.618px;
    display:grid;
    grid-template-rows:auto minmax(430px,491.94px) minmax(0,1fr);
    row-gap:clamp(18px,18.22px,22px);
  }

  .hero {
    height:auto;
    min-height:clamp(226px,204.975px,243px);
    padding-top:clamp(10px,10.932px,14px);
    overflow:visible;
  }
  .section-label { margin:5.011px 0 1.367px; }
  .hero-row {
    display:grid;
    grid-template-columns:minmax(0,45fr) minmax(400px,55fr);
    align-items:end;
    gap:3vw;
    margin-top:0;
  }
  .hero-copy { min-width:0; }
  h1 { margin:1.367px 0 0; font-size:clamp(50px,3.05vw,59px); }
  .hero h2 { margin:1.822px 0 0; font-size:clamp(21px,1.42vw,27px); line-height:1.32; }
  .hero-description {
    margin:5.011px 0 0;
    font-size:clamp(13px,.74vw,15px);
    line-height:1.52;
  }
  .stack-list { max-width:520px; align-self:center; justify-self:end; padding:16.398px 0 0; gap:5px; opacity:.9; }
  .stack-list span { padding:5px 9px; font-size:clamp(9px,.52vw,10px); }

  .cards { grid-template-columns:30fr 35fr 35fr; gap:clamp(14px,1vw,20px); }
  .card { min-height:430px; padding:clamp(24px,1.55vw,30px); }
  .card-top { min-height:27px; }
  .card-number { font-size:12px; }
  .card-label { font-size:clamp(11px,.69vw,13px); }
  .card h3 { margin:12.754px 0 9.566px; font-size:clamp(19px,1.18vw,23px); }
  .card p { font-size:clamp(13px,.78vw,15px); line-height:1.68; }

  .formula {
    min-height:122.985px;
    margin:12.299px 0;
    padding:14.576px 0;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:16px;
    font-size:clamp(18px,1.25vw,24px);
  }
  .formula span { justify-self:end; }
  .formula strong { justify-self:start; font-size:1.15em; letter-spacing:.035em; }
  .formula b { font-size:1.25em; }

  .current-body { grid-template-columns:55fr 45fr; gap:clamp(20px,1.5vw,30px); }
  .system-groups { gap:17.309px; }
  .system-groups div { padding:4px 0 4px 14px; }
  .system-groups small { font-size:10px; margin-bottom:6px; }
  .system-groups span { font-size:clamp(11px,.67vw,13px); line-height:1.45; }
  .service-flow { padding:9.11px 0; }
  .service-flow span {
    width:clamp(90px,5.4vw,104px);
    padding:7px 8px;
    font-size:clamp(10px,.6vw,12px);
    border-color:#315664;
    background:#091822;
  }
  .service-flow i { height:15px; background:#4590a0; }
  .service-flow i::after { left:-3px; border-width:4px; border-top-color:#4590a0; }

  .response-flow {
    min-height:113.875px;
    margin:14.576px 0 12.299px;
    padding:18.22px 14px;
    border-color:#24414e;
  }
  .response-flow div { min-width:58px; }
  .response-flow small { font-size:8px; margin-bottom:7px; }
  .response-flow b { font-size:clamp(12px,.74vw,14px); }
  .response-flow i { height:2px; margin:0 5px; }
  .response-flow i::after { top:-4px; border-width:5px; }
  .future-tags { gap:6px; padding-top:10.932px; }
  .future-tags span { padding:4px 7px; font-size:9px; }

  .card-note { padding-top:11.388px; }
  .closing { min-height:0; padding-top:10.932px; }
  .closing p { font-size:clamp(15px,.96vw,19px); line-height:1.48; }
  .closing strong { font-size:clamp(18px,1.18vw,23px); }
  .scroll-indicator { bottom:6.377px; }
}

/* Slide 02 — Server foundation */
.foundation-slide { isolation:isolate; overflow:hidden; background:radial-gradient(circle at 16% 32%,rgba(31,112,130,.12),transparent 31%),radial-gradient(circle at 86% 70%,rgba(27,76,91,.12),transparent 34%),linear-gradient(145deg,#071019,#09141e 58%,#071018); }
.foundation-grid { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 88%); }
.foundation-orbit { position:absolute; z-index:-1; width:520px; height:520px; right:-170px; top:50%; transform:translateY(-50%) rotate(45deg); border:1px solid rgba(67,196,215,.06); border-radius:50%; }
.foundation-orbit::before,.foundation-orbit::after { content:""; position:absolute; inset:80px; border:1px solid rgba(67,196,215,.055); border-radius:50%; }
.foundation-orbit::after { inset:170px; }
.foundation-orbit i { position:absolute; width:7px; height:7px; border-radius:50%; background:#43c4d7; opacity:.23; }
.foundation-orbit i:nth-child(1){left:48px;top:92px}.foundation-orbit i:nth-child(2){right:82px;top:56px}.foundation-orbit i:nth-child(3){left:120px;bottom:45px}.foundation-orbit i:nth-child(4){right:70px;bottom:104px}
.foundation-content { width:min(1780px,calc(100% - 8vw)); height:100%; margin:auto; padding:36.44px 0 40.084px; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:clamp(14px,13.665px,18px); }
.foundation-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:5vw; }
.section-kicker { margin:0 0 5.466px; color:var(--cyan-soft); font:600 clamp(11px,.67vw,13px) "IBM Plex Mono",monospace; letter-spacing:.12em; }
.section-kicker span { color:#4e6d78; margin-right:12px; }
.foundation-hero h2 { margin:0; font-size:clamp(34px,2.45vw,47px); line-height:1.18; letter-spacing:-.045em; }
.foundation-hero h2 strong { color:var(--cyan-soft); }
.foundation-hero > p { margin:0 0 3.189px; color:#9aafb7; font-size:clamp(15px,.96vw,18px); line-height:1.62; text-align:right; }
.foundation-hero > p strong { color:#d9e7eb; font-weight:600; }
.foundation-stack { min-height:48px; display:flex; align-items:center; justify-content:center; padding:9px 18px; border:1px solid #1c3340; border-radius:7px; background:rgba(8,21,30,.8); }
.foundation-stack span { color:#8ea7b0; font:500 clamp(9px,.59vw,11px) "IBM Plex Mono",monospace; letter-spacing:.06em; white-space:nowrap; }
.foundation-stack span:nth-of-type(2),.foundation-stack span:nth-of-type(3),.foundation-stack span:nth-of-type(4) { color:#7fd0dc; }
.foundation-stack i { flex:1; max-width:72px; height:1px; margin:0 12px; background:linear-gradient(90deg,#294b57,#438593); position:relative; }
.foundation-stack i::after { content:""; position:absolute; right:-2px; top:-3px; border:4px solid transparent; border-left-color:#438593; }
.foundation-panels { display:grid; grid-template-columns:30fr 34fr 36fr; gap:clamp(14px,1vw,20px); min-height:0; }
.foundation-panel { position:relative; min-width:0; padding:clamp(20px,1.35vw,27px); overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,rgba(15,30,42,.98),rgba(10,22,32,.98)); box-shadow:0 12px 32px rgba(0,0,0,.15); }
.foundation-panel::before { content:""; position:absolute; top:0; left:0; width:38%; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); }
.panel-heading { position:relative; padding-bottom:11.843px; border-bottom:1px solid #1d313c; }
.panel-heading div { display:flex; align-items:center; gap:10px; }
.panel-heading div span { color:#4c6975; font:500 11px "IBM Plex Mono",monospace; }
.panel-heading div small { color:var(--cyan-soft); font:600 clamp(9px,.57vw,11px) "IBM Plex Mono",monospace; letter-spacing:.12em; }
.panel-heading h3 { margin:5.011px 0 0; font-size:clamp(20px,1.3vw,25px); letter-spacing:-.025em; }
.panel-heading > b,.decision-copy > b { color:#486670; font:600 9px "IBM Plex Mono",monospace; letter-spacing:.15em; }
.panel-heading > b { position:absolute; right:0; bottom:13.665px; }
.tech-diagram { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10.932px 0; }
.tech-diagram > div { width:min(86%,290px); padding:9px 12px; text-align:center; border:1px solid #29434f; border-radius:5px; background:#091721; }
.tech-diagram small { display:block; margin-bottom:3px; color:#587681; font:500 8px "IBM Plex Mono",monospace; letter-spacing:.1em; }
.tech-diagram strong { color:#bacbd0; font-size:clamp(11px,.69vw,13px); }
.tech-diagram .accent-node { border-color:#337381; box-shadow:inset 0 0 20px rgba(67,196,215,.045); }
.tech-diagram .accent-node strong { color:var(--cyan-soft); }
.tech-diagram > i { width:1px; height:15px; background:#3c7c89; position:relative; }
.tech-diagram > i::after { content:""; position:absolute; left:-3px; bottom:-1px; border:4px solid transparent; border-top-color:#3c7c89; }
.decision-copy { padding-top:10.477px; border-top:1px solid #1d313c; }
.decision-copy p { margin:4.555px 0 0; color:#9aadb4; font-size:clamp(13px,.74vw,14px); line-height:1.66; }
.decision-copy.compact p { line-height:1.6; }
.panel-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10.477px; }
.panel-tags span { padding:4px 7px; border:1px solid #213946; border-radius:4px; color:#78949e; background:#091720; font:500 8px "IBM Plex Mono",monospace; }
.os-reasons { display:flex; flex-direction:column; justify-content:center; gap:13.21px; flex:1; padding:10.932px 0; }
.os-reasons > div { display:grid; grid-template-columns:34px 1fr; gap:12px; padding:13.21px 15px; border-left:2px solid #2b5662; background:#0a1822; }
.os-reasons em { color:#62838e; font:500 11px "IBM Plex Mono",monospace; font-style:normal; padding-top:2px; }
.os-reasons p { margin:0; color:#9aadb4; font-size:clamp(13px,.78vw,15px); line-height:1.65; }
.os-reasons strong { color:#c0d0d5; font-weight:600; }
.experience-flow { display:flex; align-items:center; justify-content:center; padding:10.932px 5px; border-top:1px solid #1d313c; border-bottom:1px solid #1d313c; }
.experience-flow span,.experience-flow strong { text-align:center; color:#67838d; font:500 8px "IBM Plex Mono",monospace; }
.experience-flow strong { color:var(--cyan-soft); }
.experience-flow i { flex:1; min-width:15px; height:1px; margin:0 7px; background:#356b77; position:relative; }
.experience-flow i::after { content:""; position:absolute; right:-2px; top:-2px; border:3px solid transparent; border-left-color:#356b77; }
.platform-compare { display:grid; grid-template-columns:1fr 22px 1.17fr; align-items:stretch; gap:7px; flex:1; min-height:0; padding:5.922px 0 7.744px; }
.platform-compare small { display:block; color:#60808b; font:600 9px "IBM Plex Mono",monospace; letter-spacing:.1em; text-align:center; }
.multi-vm,.docker-set { padding:clamp(12px,.83vw,16px); border:1px solid #26434f; border-radius:7px; background:#091720; display:flex; flex-direction:column; justify-content:center; }
.vm-set { display:flex; gap:5px; margin:14px 0; }
.vm-set span { flex:1; padding:8px 3px; border:1px solid #38545f; color:#8ba2aa; text-align:center; font:500 10px "IBM Plex Mono",monospace; }
.vm-set em,.vm-set b { display:block; margin-top:4px; padding-top:4px; border-top:1px solid #253b45; font-style:normal; font-weight:500; }
.multi-vm p,.docker-set p { margin:auto 0 0; color:#67838d; font:9px/1.5 "IBM Plex Mono",monospace; text-align:center; }
.compare-divider { display:flex; align-items:center; justify-content:center; color:#3f5d68; font:600 8px "IBM Plex Mono",monospace; }
.docker-layers > strong,.docker-layers > b { display:block; padding:8px 6px; border:1px solid #345864; color:#a8bbc1; font:500 10px "IBM Plex Mono",monospace; text-align:center; }
.docker-layers > b { color:var(--cyan-soft); border-color:#397886; }
.docker-layers > i { height:10px; width:1px; align-self:center; background:#397886; }
.docker-layers > .service-row { display:flex; gap:4px; margin-top:10px; }
.docker-layers > .service-row span { flex:1; padding:8px 2px; border:1px solid #31505c; color:#8aa1aa; font:9px "IBM Plex Mono",monospace; text-align:center; }
.container-platform { padding:clamp(15px,.94vw,18px); }
.container-platform .panel-heading { padding-bottom:6.833px; }
.container-platform .platform-compare {
  grid-template-columns:minmax(250px,1fr) 16px minmax(250px,1fr);
  gap:8px;
  flex:1 1 72%;
  margin:12px 4px;
  padding:1.822px 0;
}
.container-platform .compare-panel {
  min-width:0;
  padding:clamp(13px,.84vw,16px) clamp(11px,.72vw,14px);
  display:grid;
  grid-template-rows:44px minmax(0,1fr) 54px;
  align-items:stretch;
}
.container-platform .compare-panel > small {
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  font-size:11px;
  line-height:1;
}
.container-platform .diagram-stage {
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.container-platform .vm-set {
  width:100%;
  max-width:250px;
  height:116px;
  flex:0 0 116px;
  display:grid;
  grid-template-columns:repeat(3,minmax(68px,1fr));
  gap:8px;
  margin:0;
}
.container-platform .vm-set span {
  min-width:0;
  height:116px;
  padding:0;
  display:grid;
  grid-template-rows:repeat(3,1fr);
  align-items:stretch;
  font-size:10px;
}
.container-platform .vm-set strong,
.container-platform .vm-set em,
.container-platform .vm-set b {
  min-width:0;
  margin:0;
  padding:0 2px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  font:500 9.5px "IBM Plex Mono",monospace;
}
.container-platform .vm-set em,
.container-platform .vm-set b { border-top:1px solid #38545f; }
.container-platform .docker-layers {
  width:100%;
  height:100%;
  margin:0;
  display:flex;
  flex-direction:column;
}
.container-platform .docker-layers > strong,
.container-platform .docker-layers > b { padding:13px 8px; font-size:12px; }
.container-platform .docker-layers > i { height:15px; flex:0 0 15px; }
.container-platform .docker-layers > .service-row {
  min-height:0;
  flex:1;
  align-items:stretch;
  gap:5px;
  margin-top:12px;
}
.container-platform .docker-layers > .service-row span {
  padding:13px 2px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}
.container-platform .compare-footer {
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  font-size:10px;
  line-height:1.55;
  text-align:center;
}
.container-platform .decision-copy { padding-top:5.922px; }
.container-platform .decision-copy p { margin-top:2.733px; }
.container-platform .panel-tags { margin-top:5.922px; }
.foundation-statement { min-height:66px; display:flex; align-items:center; gap:28px; padding-top:11.843px; border-top:1px solid #263844; }
.foundation-statement div { color:#4e6974; font:500 9px/1.5 "IBM Plex Mono",monospace; letter-spacing:.1em; }
.foundation-statement p { margin:0; color:#a8b9bf; font-size:clamp(17px,1.1vw,21px); }
.foundation-statement strong { color:var(--cyan-soft); font-size:1.16em; }
.slide-counter { position:absolute; z-index:10; right:2.2vw; bottom:16.398px; color:#405c67; font:500 9px "IBM Plex Mono",monospace; letter-spacing:.15em; pointer-events:none; }
.slide-reveal { opacity:0; transform:translateY(12px); }
.foundation-slide.is-active .slide-reveal,
.operations-slide.is-active .slide-reveal,
.deployment-slide.is-active .slide-reveal,
.request-slide.is-active .slide-reveal,
.next-slide.is-active .slide-reveal { animation:slide-reveal .6s cubic-bezier(.22,.75,.3,1) forwards; animation-delay:var(--reveal-delay,0s); }
@keyframes slide-reveal { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){.slide-reveal{opacity:1;transform:none}.foundation-slide.is-active .slide-reveal,.operations-slide.is-active .slide-reveal,.deployment-slide.is-active .slide-reveal,.request-slide.is-active .slide-reveal,.next-slide.is-active .slide-reveal{animation:none}}
@media (max-width:1100px),(max-height:760px){.foundation-content{width:min(94%,1780px);padding:27.33px 0}.foundation-panel{padding:16px}.foundation-panels{gap:9px}.foundation-hero h2{font-size:32px}.decision-copy p,.os-reasons p{font-size:10px}.foundation-stack{min-height:40px}.foundation-statement{min-height:52px}}
@media (max-width:820px){html,body{overflow:hidden}.foundation-slide{overflow-y:auto}.foundation-content{height:auto;min-height:100%;padding:28px 0 55px}.foundation-hero{display:block}.foundation-hero>p{text-align:left;margin-top:16px}.foundation-stack{overflow-x:auto;justify-content:flex-start}.foundation-panels{grid-template-columns:1fr}.foundation-panel{min-height:480px}.foundation-statement{align-items:flex-start;flex-direction:column;gap:8px}.presentation-slide{height:100dvh;min-height:100dvh}}

/* Slide 03 — Storage and remote management */
.operations-slide { isolation:isolate; overflow:hidden; background:radial-gradient(circle at 20% 52%,rgba(31,112,130,.11),transparent 34%),radial-gradient(circle at 82% 22%,rgba(34,91,107,.1),transparent 30%),linear-gradient(145deg,#071019,#09141e 58%,#071018); }
.operations-grid { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 90%); }
.operations-content { width:min(1780px,calc(100% - 8vw)); height:100%; margin:auto; padding:32.796px 0 38.262px; display:grid; grid-template-rows:auto 48px minmax(0,1fr) 66px; gap:clamp(13px,12.299px,16px); }
.operations-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:5vw; }
.operations-hero h2 { margin:0; font-size:clamp(34px,2.35vw,45px); line-height:1.17; letter-spacing:-.045em; }
.operations-hero h2 strong { color:var(--cyan-soft); }
.operations-hero > p { margin:0 0 2.278px; color:#9aafb7; font-size:clamp(14px,.88vw,17px); line-height:1.62; text-align:right; }
.operations-hero > p strong { color:#d8e6ea; font-weight:600; }
.operations-progress { display:flex; align-items:center; justify-content:center; padding:8px 18px; border:1px solid #1c3340; border-radius:7px; background:rgba(8,21,30,.82); }
.operations-progress span,.operations-progress strong { color:#6d8791; font:500 clamp(9px,.58vw,11px) "IBM Plex Mono",monospace; letter-spacing:.07em; white-space:nowrap; }
.operations-progress strong { color:var(--cyan-soft); }
.operations-progress .upcoming { color:#415a64; }
.operations-progress i { flex:1; max-width:100px; height:1px; margin:0 14px; background:linear-gradient(90deg,#294b57,#438593); position:relative; }
.operations-progress i::after { content:""; position:absolute; right:-2px; top:-3px; border:4px solid transparent; border-left-color:#438593; }
.operations-panels { display:grid; grid-template-columns:54fr 46fr; gap:clamp(14px,1vw,20px); min-height:0; }
.operations-panel { position:relative; min-width:0; min-height:0; padding:clamp(20px,1.35vw,27px); overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,rgba(15,30,42,.98),rgba(10,22,32,.98)); box-shadow:0 12px 32px rgba(0,0,0,.15); }
.operations-panel::before { content:""; position:absolute; top:0; left:0; width:35%; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); }
.operations-heading { position:relative; padding-bottom:10.021px; border-bottom:1px solid #1d313c; }
.operations-heading > div { display:flex; align-items:center; gap:10px; }
.operations-heading > div span { color:#4c6975; font:500 11px "IBM Plex Mono",monospace; }
.operations-heading small { color:var(--cyan-soft); font:600 clamp(9px,.57vw,11px) "IBM Plex Mono",monospace; letter-spacing:.12em; }
.operations-heading h3 { margin:4.555px 0 0; font-size:clamp(20px,1.25vw,24px); letter-spacing:-.025em; }
.operations-heading > b { position:absolute; right:0; bottom:11.388px; color:#5b7b86; font:500 9px "IBM Plex Mono",monospace; letter-spacing:.1em; }
.storage-visual { display:grid; grid-template-columns:56fr 44fr; gap:16px; min-height:245px; padding:12.299px 0; border-bottom:1px solid #1d313c; }
.server-storage-map { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 25px 1fr; gap:0 10px; min-width:0; }
.server-root { grid-column:1/-1; width:70%; justify-self:center; padding:8px 10px; border:1px solid #31515d; border-radius:5px; background:#091822; text-align:center; }
.server-root small,.storage-column small { display:block; color:#64828c; font:500 8px "IBM Plex Mono",monospace; letter-spacing:.1em; }
.server-root strong { color:#b7c8cd; font-size:12px; }
.storage-branches { grid-column:1/-1; position:relative; }
.storage-branches::before { content:""; position:absolute; left:25%; right:25%; top:11px; border-top:1px solid #397480; }
.storage-branches i { position:absolute; top:11px; height:14px; width:1px; background:#397480; }
.storage-branches i:first-child{left:25%}.storage-branches i:last-child{right:25%}
.storage-column { padding:10px 9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1px solid #243e49; border-radius:6px; background:#091720; text-align:center; }
.storage-column strong { color:#b9cbd0; font-size:13px; }
.storage-column span { width:100%; padding-top:6px; border-top:1px solid #203640; color:#7f99a2; font:500 9px "IBM Plex Mono",monospace; }
.data-area { border-color:#32707d; box-shadow:inset 0 0 20px rgba(67,196,215,.04); }
.data-area strong { color:var(--cyan-soft); }
.raid-map { min-width:0; padding:11px 13px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #233e49; border-radius:6px; background:#091720; }
.raid-map > p { margin:0 0 9px; color:#66838d; font:500 8px "IBM Plex Mono",monospace; letter-spacing:.1em; }
.disk-pair { width:100%; display:flex; justify-content:center; gap:12px; }
.disk-pair span { width:82px; padding:8px 5px; border:1px solid #345560; border-radius:4px; color:#a1b5bc; font:500 10px "IBM Plex Mono",monospace; text-align:center; }
.mirror-line { width:70%; height:30px; position:relative; display:flex; align-items:end; justify-content:center; }
.mirror-line::before { content:""; position:absolute; left:15%; right:15%; top:8px; border-top:1px solid #3a7b87; }
.mirror-line i { position:absolute; top:0; height:9px; width:1px; background:#3a7b87; }.mirror-line i:first-child{left:15%}.mirror-line i:last-child{right:15%}
.mirror-line b { color:#6295a0; font:500 8px "IBM Plex Mono",monospace; }
.raid-map > strong,.raid-map > em { width:66%; padding:7px; border:1px solid #397886; border-radius:4px; color:var(--cyan-soft); font:600 11px "IBM Plex Mono",monospace; text-align:center; font-style:normal; }
.raid-map > em { border-color:#2d505c; color:#a7bbc1; }
.flow-line { width:1px; height:13px; background:#3a7b87; position:relative; }
.flow-line::after { content:""; position:absolute; left:-3px; bottom:-1px; border:4px solid transparent; border-top-color:#3a7b87; }
.storage-detail { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; flex:1; min-height:0; padding-top:10.932px; }
.why-block { min-width:0; display:flex; flex-direction:column; justify-content:center; }
.why-block > div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.why-block b { color:#6fc3d0; font:600 10px "IBM Plex Mono",monospace; letter-spacing:.1em; }
.why-block > div span { color:#536f79; font:500 8px "IBM Plex Mono",monospace; }
.why-block p { margin:5.922px 0; color:#a0b2b8; font-size:clamp(12px,.72vw,14px); line-height:1.62; }
.why-block small { color:#718992; font-size:clamp(10px,.6vw,12px); line-height:1.5; }
.data-use-flow { padding:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #203844; border-radius:6px; background:#091720; }
.data-use-flow span,.data-use-flow strong { color:#849da6; font:500 9px "IBM Plex Mono",monospace; }.data-use-flow strong{color:var(--cyan-soft)}
.data-use-flow i { width:1px; height:9px; background:#356b77; }
.data-use-flow code { margin-top:8px; color:#55727c; font:8px "IBM Plex Mono",monospace; }
.remote-main { min-height:235px; padding:12.299px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; border-bottom:1px solid #1d313c; }
.endpoint { width:min(78%,390px); padding:12px 16px; border:1px solid #31515d; border-radius:6px; background:#091822; text-align:center; }
.endpoint small { display:block; color:#6f8e98; font:500 10px "IBM Plex Mono",monospace; letter-spacing:.11em; }
.endpoint strong { color:#c0d0d5; font-size:15px; }
.linux-endpoint { border-color:#377682; }
.linux-endpoint strong { color:var(--cyan-soft); }
.secure-link { height:104px; display:grid; grid-template-columns:1fr 76px 1fr; grid-template-rows:1fr 1fr; align-items:center; width:min(82%,420px); position:relative; }
.secure-link > span,.secure-link > small { color:#64818b; font:500 9px "IBM Plex Mono",monospace; letter-spacing:.04em; }.secure-link>span{text-align:right}.secure-link>small{text-align:left}
.secure-link > strong { z-index:1; grid-row:1; grid-column:2; padding:3px 4px; border-radius:3px; background:#0b1a24; color:#87dce7; font:600 12px "IBM Plex Mono",monospace; text-align:center; }
.secure-link > em { z-index:1; grid-row:2; grid-column:2; padding:3px 4px; border-radius:3px; background:#0b1a24; color:#b3c8ce; font:600 11px "IBM Plex Mono",monospace; font-style:normal; text-align:center; }
.secure-link > i { grid-row:1/-1; grid-column:2; width:2px; height:100%; justify-self:center; background:#478e9b; position:relative; }
.secure-link > i::after { content:""; position:absolute; bottom:-2px; left:-4px; border:5px solid transparent; border-top-color:#478e9b; }
.secure-link > i b { position:absolute; width:7px; height:7px; left:-2.5px; top:0; border-radius:50%; background:#82dbe6; box-shadow:0 0 10px rgba(67,196,215,.55); animation:remote-packet 5s linear infinite; }
.remote-why { padding:10.477px 0; border-bottom:1px solid #1d313c; }
.remote-why > b { color:#6fc3d0; font:600 10px "IBM Plex Mono",monospace; letter-spacing:.1em; }
.remote-why p { margin:5.011px 0 6.833px; color:#9caeb5; font-size:clamp(12px,.71vw,14px); line-height:1.58; }
.remote-why > div { display:flex; flex-wrap:wrap; gap:5px; }.remote-why span { padding:4px 7px; border:1px solid #213946; border-radius:4px; color:#78949e; background:#091720; font:500 8px "IBM Plex Mono",monospace; }
.fallback-path { flex:1; min-height:0; padding-top:9.11px; display:flex; flex-direction:column; justify-content:center; }
.fallback-path header { display:flex; align-items:center; justify-content:space-between; }.fallback-path header b{color:#63838e;font:600 9px "IBM Plex Mono",monospace}.fallback-path header span{color:#405c66;font:500 8px "IBM Plex Mono",monospace}
.fallback-path > div { display:flex; align-items:center; margin:7.288px 0; }
.fallback-path > div span { flex:1; padding:7px 4px; border:1px solid #29434e; border-radius:4px; color:#8299a2; font:500 8px "IBM Plex Mono",monospace; text-align:center; }
.fallback-path > div i { width:15px; height:1px; background:#356b77; position:relative; }.fallback-path>div i::after{content:"";position:absolute;right:-2px;top:-2px;border:3px solid transparent;border-left-color:#356b77}
.fallback-path p { margin:0; color:#758c95; font-size:clamp(10px,.61vw,12px); line-height:1.5; }
.operations-statement { display:flex; align-items:center; gap:28px; padding-top:10.932px; border-top:1px solid #263844; }
.operations-statement div { color:#4e6974; font:500 9px "IBM Plex Mono",monospace; letter-spacing:.1em; }
.operations-statement p { margin:0; color:#a8b9bf; font-size:clamp(17px,1.08vw,21px); }.operations-statement strong{color:var(--cyan-soft)}
@keyframes remote-packet { 0%{transform:translateY(0);opacity:0} 12%{opacity:1} 75%{opacity:1} 100%{transform:translateY(97px);opacity:0} }
@media (prefers-reduced-motion:reduce){.secure-link > i b{animation:none}}
@media (max-width:1200px),(max-height:760px){.operations-content{width:min(94%,1780px);padding:24.597px 0}.operations-panel{padding:16px}.storage-visual{min-height:210px}.remote-main{min-height:200px}.why-block p,.remote-why p{font-size:11px}.operations-panels{gap:10px}}
@media (max-width:820px){.operations-slide{overflow-y:auto}.operations-content{height:auto;min-height:100%;padding:28px 0 55px}.operations-hero{display:block}.operations-hero>p{text-align:left;margin-top:15px}.operations-progress{overflow-x:auto;justify-content:flex-start}.operations-panels{grid-template-columns:1fr}.operations-panel{min-height:650px}.storage-visual,.storage-detail{grid-template-columns:1fr}.operations-statement{align-items:flex-start;flex-direction:column;gap:8px}}

/* Slide 04 — Service deployment */
.deployment-slide { isolation:isolate; overflow:hidden; background:radial-gradient(circle at 68% 34%,rgba(28,105,122,.1),transparent 34%),linear-gradient(145deg,#071019,#09141e 58%,#071018); }
.deployment-grid { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 91%); }
.deployment-content { width:min(1780px,calc(100% - 8vw)); height:100%; margin:auto; padding:27.33px 0 35.529px; display:grid; grid-template-rows:auto 44px minmax(0,1fr) 58px 62px; gap:clamp(10px,9.566px,13px); }
.deployment-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:5vw; }
.deployment-hero h2 { margin:0; font-size:clamp(32px,2.2vw,42px); line-height:1.16; letter-spacing:-.045em; }
.deployment-hero h2 strong { color:var(--cyan-soft); }
.deployment-hero > p { margin:0 0 1.822px; color:#9aafb7; font-size:clamp(14px,.86vw,16px); line-height:1.6; text-align:right; }
.deployment-hero > p strong { color:#d8e6ea; font-weight:600; }
.deployment-progress { display:flex; align-items:center; justify-content:center; padding:7px 18px; border:1px solid #1c3340; border-radius:7px; background:rgba(8,21,30,.82); }
.deployment-progress span,.deployment-progress strong { color:#6d8791; font:500 clamp(9px,.57vw,11px) "IBM Plex Mono",monospace; letter-spacing:.07em; white-space:nowrap; }
.deployment-progress strong { color:var(--cyan-soft); }.deployment-progress .upcoming{color:#415a64}
.deployment-progress i { flex:1; max-width:120px; height:1px; margin:0 14px; background:linear-gradient(90deg,#294b57,#438593); position:relative; }
.deployment-progress i::after { content:""; position:absolute; right:-2px; top:-3px; border:4px solid transparent; border-left-color:#438593; }
.server-host { position:relative; min-height:0; overflow:hidden; display:grid; grid-template-rows:46px minmax(0,1fr); border:1px solid #294754; border-radius:12px; background:linear-gradient(145deg,rgba(13,27,38,.99),rgba(8,20,29,.99)); box-shadow:0 14px 36px rgba(0,0,0,.18); }
.server-host::before { content:""; position:absolute; width:34%; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); }
.host-header { padding:0 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #27434f; background:#0a1822; }
.host-header > div { display:flex; align-items:center; gap:12px; }.host-header small{color:var(--cyan-soft);font:600 11px "IBM Plex Mono",monospace;letter-spacing:.11em}.host-header strong{color:#829ca5;font:500 10px "IBM Plex Mono",monospace;letter-spacing:.09em}
.host-status { display:flex;align-items:center;gap:6px;color:#71c89f;font:600 8px "IBM Plex Mono",monospace}.host-status i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(80,200,146,.55)}
.host-header p { margin:0;color:#4c6872;font:500 8px "IBM Plex Mono",monospace;letter-spacing:.1em}.host-header p b{margin-left:8px;color:#78949e}
.host-layout { min-height:0; padding:14px; display:grid; grid-template-columns:62fr 38fr; gap:14px; }
.container-zone,.host-service-zone { min-width:0; min-height:0; padding:15px; display:flex; flex-direction:column; border:1px solid #203a46; border-radius:8px; background:#091720; }
.container-zone { border-color:#28515e; }
.zone-heading { display:flex; align-items:center; justify-content:space-between; min-height:26px; padding-bottom:9px; border-bottom:1px solid #1d3540; }
.zone-heading > div { display:flex;align-items:center;gap:9px}.zone-heading span{color:#4e6d78;font:500 9px "IBM Plex Mono",monospace}.zone-heading small{color:#79cbd7;font:600 10px "IBM Plex Mono",monospace;letter-spacing:.1em}.zone-heading>b{color:#55727c;font:500 8px "IBM Plex Mono",monospace;letter-spacing:.08em}
.service-nodes { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; flex:1; min-height:0; padding:11px 0; }
.service-node { min-width:0; padding:13px; display:flex; flex-direction:column; border:1px solid #294550; border-radius:7px; background:#0b1a24; }
.service-node > header { display:flex;align-items:center;justify-content:space-between}.service-node>header span{color:#62818b;font:600 8px "IBM Plex Mono",monospace;letter-spacing:.08em}.service-node>header i{color:#405d67;font:500 7px "IBM Plex Mono",monospace;font-style:normal}
.service-node h3 { margin:9.11px 0 0; color:#e1ecef; font-size:clamp(19px,1.12vw,22px); line-height:1.1; }.service-node h4{margin:5px 0 0;color:#a9bcc2;font-size:clamp(13px,.78vw,15px);font-weight:600;line-height:1.3}
.service-node p { margin:10.477px 0;color:#9badb4;font-size:clamp(13px,.76vw,15px);line-height:1.58; }
.service-node footer { margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:7px;border-top:1px solid #203640}.service-node footer b,.service-node footer span{color:#6d8993;font:600 10px "IBM Plex Mono",monospace;white-space:nowrap}.service-node footer span{color:#79c5d1}
.web-node { border-color:#316876; }.database-node{border-color:#32606c}
.viewing-state { margin:auto 0 7px; display:flex;align-items:center;gap:7px;color:#78c6d2;font:600 10px "IBM Plex Mono",monospace;white-space:nowrap}.viewing-state i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 7px rgba(67,196,215,.35)}
.persistence-rule { margin:auto 0 7px;padding:8px 3px;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #2d515d;border-radius:4px;background:#09161f}.persistence-rule span{color:#a4b8be;font:600 11.5px "IBM Plex Mono",monospace;white-space:nowrap}.persistence-rule b{color:var(--cyan-soft);font-size:16px}
.persistence-path { min-height:88px; display:grid; grid-template-columns:1fr 245px; grid-template-rows:1fr auto; column-gap:14px; padding:10px 12px; border:1px solid #254651; border-radius:6px; background:#0a1923; }
.persistence-path > div { display:flex;align-items:center;grid-column:1}.persistence-path>div span,.persistence-path>div strong{padding:8px 11px;border:1px solid #294953;border-radius:4px;color:#b4c5ca;font:500 13px "IBM Plex Mono",monospace;white-space:nowrap}.persistence-path>div strong{color:#8ae2ec;border-color:#397e8b;font-size:14px;font-weight:600}.persistence-path>div i{flex:1;min-width:14px;height:1px;background:#397783;position:relative}.persistence-path>div i::after{content:"";position:absolute;right:-2px;top:-2px;border:3px solid transparent;border-left-color:#397783}
.persistence-path code { grid-column:1;color:#68858f;font:10px "IBM Plex Mono",monospace;align-self:end}.persistence-path aside{grid-column:2;grid-row:1/-1;display:flex;flex-direction:column;justify-content:center;padding-left:13px;border-left:1px solid #29434e}.persistence-path aside b{color:#83dab1;font:600 11px "IBM Plex Mono",monospace;margin-bottom:5px}.persistence-path aside span{color:#92a8af;font:11px/1.55 "IBM Plex Mono",monospace;white-space:nowrap}
.spring-node { margin:11px 0;padding:14px;border:1px solid #34717d;border-radius:7px;background:#0b1a24;box-shadow:inset 0 0 22px rgba(67,196,215,.035)}
.spring-node>header{display:flex;align-items:center;gap:7px}.spring-node>header span{margin-right:auto;color:#6c8b95;font:600 8px "IBM Plex Mono",monospace}.spring-node>header b{color:#69b993;font:600 8px "IBM Plex Mono",monospace}.running-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.spring-node h3{margin:9.11px 0 0;font-size:clamp(21px,1.3vw,25px)}.spring-node h4{margin:4px 0 11px;color:var(--cyan-soft);font:600 15px "IBM Plex Mono",monospace}
.service-state { display:grid;grid-template-columns:1.75fr .7fr .85fr;gap:6px}.service-state>span{min-width:0;padding:8px;border:1px solid #243e49;border-radius:4px;color:#b8c8cd;font:500 10px "IBM Plex Mono",monospace}.service-state>span:first-child{font-size:12px;white-space:nowrap}.service-state small{display:block;margin-bottom:4px;color:#4f6b75;font-size:7px}.service-state b{color:#7dd0a6;font-size:13px;font-weight:600;white-space:nowrap}
.systemd-actions { display:flex;gap:5px;margin-top:8px}.systemd-actions span{flex:1;padding:5px;border:1px solid #233d47;border-radius:3px;color:#607b84;font:500 7px "IBM Plex Mono",monospace;text-align:center}
.jar-reason { flex:1;min-height:0;padding:12px;display:flex;flex-direction:column;justify-content:center;border:1px solid #203a45;border-radius:6px;background:#0a1822}.jar-reason header{display:flex;align-items:center;justify-content:space-between}.jar-reason header b{color:#6fc3d0;font:600 10px "IBM Plex Mono",monospace}.jar-reason header span{color:#48636d;font:500 7px "IBM Plex Mono",monospace}.jar-reason p{margin:9px 0;color:#a0b2b8;font-size:clamp(13px,.76vw,15px);line-height:1.58}.jar-reason>div{display:flex;align-items:center;margin-bottom:8px}.jar-reason>div span{padding:7px 8px;color:#94aab1;border:1px solid #31505b;border-radius:3px;font:600 10px "IBM Plex Mono",monospace;white-space:nowrap}.jar-reason>div i{flex:1;min-width:7px;height:1px;background:#3c7783}.jar-reason>small{color:#68838c;font-size:10px;line-height:1.45}
.deployment-method { display:grid;grid-template-columns:150px 1fr 1px 1fr 1.35fr;align-items:center;gap:14px;padding:9px 16px;border:1px solid #1f3742;border-radius:7px;background:#091720}.deployment-method>b{color:#5e7b85;font:600 9px "IBM Plex Mono",monospace}.deployment-method>div strong{display:block;color:#7bd0dc;font:600 11px "IBM Plex Mono",monospace}.deployment-method>div span{color:#8299a2;font-size:12px}.deployment-method>i{height:28px;background:#29434e}.deployment-method>p{margin:0;color:#93a6ad;font-size:14px;line-height:1.48}.deployment-method>p strong{color:var(--cyan-soft)}
.deployment-statement { display:flex;align-items:center;gap:28px;padding-top:9.11px;border-top:1px solid #263844}.deployment-statement div{color:#4e6974;font:500 9px "IBM Plex Mono",monospace;letter-spacing:.1em}.deployment-statement p{margin:0;color:#a8b9bf;font-size:clamp(16px,1.03vw,20px)}.deployment-statement p strong{color:var(--cyan-soft)}
@media (max-width:1300px),(max-height:760px){.deployment-content{width:min(94%,1780px);padding:21.864px 0}.host-layout{padding:9px;gap:9px}.container-zone,.host-service-zone{padding:11px}.service-node{padding:9px}.service-node p,.jar-reason p{font-size:9px}.persistence-path{grid-template-columns:1fr 155px}.deployment-method{grid-template-columns:120px 1fr 1px 1fr 1.15fr;gap:9px}}
@media (max-width:820px){.deployment-slide{overflow-y:auto}.deployment-content{height:auto;min-height:100%;padding:28px 0 55px}.deployment-hero{display:block}.deployment-hero>p{text-align:left;margin-top:15px}.deployment-progress{overflow-x:auto;justify-content:flex-start}.server-host{min-height:1100px}.host-layout{grid-template-columns:1fr}.service-nodes{grid-template-columns:1fr}.service-node{min-height:220px}.deployment-method{grid-template-columns:1fr}.deployment-method>i{width:100%;height:1px}.deployment-statement{align-items:flex-start;flex-direction:column;gap:8px}}

/* Slide 05 — Request flow */
.request-slide { isolation:isolate; overflow:hidden; background:radial-gradient(circle at 50% 48%,rgba(27,105,123,.11),transparent 37%),linear-gradient(145deg,#071019,#09141e 58%,#071018); }
.request-grid { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 92%); }
.request-content { width:min(1780px,calc(100% - 8vw)); height:100%; margin:auto; padding:25.508px 0 34.618px; display:grid; grid-template-rows:auto 44px minmax(0,1fr) 62px 62px; gap:clamp(10px,9.11px,12px); }
.request-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:5vw; }
.request-hero h2 { margin:0; font-size:clamp(32px,2.18vw,42px); line-height:1.16; letter-spacing:-.045em; }.request-hero h2 strong{color:var(--cyan-soft)}
.request-hero>p { margin:0 0 1.822px;color:#9aafb7;font-size:clamp(14px,.86vw,16px);line-height:1.6;text-align:right}.request-hero>p strong{color:#d8e6ea;font-weight:600}
.request-progress { display:flex;align-items:center;justify-content:center;padding:7px 18px;border:1px solid #1c3340;border-radius:7px;background:rgba(8,21,30,.82)}
.request-progress span,.request-progress strong{color:#6d8791;font:500 clamp(9px,.57vw,11px) "IBM Plex Mono",monospace;letter-spacing:.07em;white-space:nowrap}.request-progress strong{color:var(--cyan-soft)}.request-progress .upcoming{color:#415a64}
.request-progress i{flex:1;max-width:130px;height:1px;margin:0 14px;background:linear-gradient(90deg,#294b57,#438593);position:relative}.request-progress i::after{content:"";position:absolute;right:-2px;top:-3px;border:4px solid transparent;border-left-color:#438593}
.request-diagram { min-height:0;padding:14px;display:grid;grid-template-rows:120px 24px minmax(0,1fr);border:1px solid #294754;border-radius:12px;background:linear-gradient(145deg,rgba(13,27,38,.99),rgba(8,20,29,.99));box-shadow:0 14px 36px rgba(0,0,0,.18)}
.ingress-flow { display:grid;grid-template-columns:1.05fr .55fr 1fr .55fr 1fr .55fr 1.3fr;align-items:center;gap:9px;min-width:0}
.flow-node { min-width:0;height:88px;padding:12px 14px;display:flex;flex-direction:column;justify-content:center;border:1px solid #294651;border-radius:7px;background:#0a1923;text-align:center}
.flow-node small{color:#5f7e88;font:600 8px "IBM Plex Mono",monospace;letter-spacing:.1em}.flow-node strong{margin-top:5px;color:#c2d2d6;font-size:clamp(13px,.8vw,15px);white-space:nowrap}.flow-node span{margin-top:5px;color:#506c76;font:500 8px "IBM Plex Mono",monospace}
.proxy-node{height:102px;border-color:#3c8290;box-shadow:inset 0 0 25px rgba(67,196,215,.05)}.proxy-node strong{color:var(--cyan-soft);font-size:clamp(15px,.92vw,18px)}.proxy-node p{margin:5px 0 0;color:#78919a;font-size:10px;line-height:1.35}
.flow-connector { min-width:0;display:grid;grid-template-rows:20px 12px 18px;align-items:center;text-align:center}.flow-connector b{color:#83d2dc;font:600 11px "IBM Plex Mono",monospace;white-space:nowrap}.flow-connector span{color:#506b75;font:500 7px "IBM Plex Mono",monospace}.flow-connector>i{width:100%;height:2px;background:#3d7e8a;position:relative}.flow-connector>i::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left-color:#3d7e8a}.flow-connector em{position:absolute;left:0;top:-2px;width:6px;height:6px;border-radius:50%;background:#77d3de;box-shadow:0 0 8px rgba(67,196,215,.45);animation:horizontal-packet 6s linear infinite}
.vmware-link em{animation-delay:1.2s}.proxy-link em{animation-delay:2.4s}
.route-split { position:relative;width:74%;height:24px;justify-self:end;margin-right:7%}.route-split::before{content:"";position:absolute;left:50%;top:0;width:1px;height:11px;background:#3e7e8a}.route-split>i{position:absolute;left:25%;right:25%;top:10px;height:1px;background:#3e7e8a}.route-split>span,.route-split>b{position:absolute;top:10px;width:1px;height:14px;background:#3e7e8a}.route-split>span{left:25%}.route-split>b{right:25%}
.request-routes { display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:0}
.request-route { min-width:0;min-height:0;padding:14px;display:grid;grid-template-rows:39px minmax(0,1fr) 27px;border:1px solid #254854;border-radius:8px;background:#091720}.api-route{border-color:#316370}
.request-route>header{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid #1e3742}.request-route>header div{display:flex;align-items:center;gap:9px}.request-route>header small{color:#587680;font:600 8px "IBM Plex Mono",monospace}.request-route>header strong{color:#79cbd7;font:600 11px "IBM Plex Mono",monospace}.request-route>header>span{color:#536f79;font-size:10px}
.route-body { min-height:0;padding:12px 0;display:grid;grid-template-columns:1fr .7fr 1fr;align-items:center;gap:10px}.api-body{grid-template-columns:1fr .58fr 1fr 1fr}
.route-node,.route-result { min-width:0;padding:13px 11px;border:1px solid #2d505b;border-radius:6px;background:#0b1a24;text-align:center}.route-node small,.route-result small{display:block;color:#5e7d87;font:600 8px "IBM Plex Mono",monospace}.route-node strong,.route-result strong{display:block;margin:6px 0 4px;color:#c0d1d5;font-size:clamp(13px,.8vw,15px)}.route-node b{color:#76cbd6;font:600 12px "IBM Plex Mono",monospace}.route-result span{color:#6c8790;font:500 8px "IBM Plex Mono",monospace}.web-route .route-result span{color:#6fc2ce}
.spring-flow-node{border-color:#33737f}.maria-flow-node{border-color:#315d69}.json-result{border-style:dashed}
.route-arrow { display:flex;flex-direction:column;align-items:center;gap:7px}.route-arrow span{color:#6daeba;font:600 9px "IBM Plex Mono",monospace;white-space:nowrap}.route-arrow i{width:100%;height:2px;background:#3d7e8a;position:relative}.route-arrow i::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left-color:#3d7e8a}.route-arrow em{position:absolute;left:0;top:-2px;width:6px;height:6px;border-radius:50%;background:#77d3de;animation:horizontal-packet 5s linear infinite}.db-link em{animation-delay:1.6s}
.request-route>footer{display:flex;align-items:center;justify-content:center;gap:11px;border-top:1px dashed #29434e;color:#617d86;font:500 8px "IBM Plex Mono",monospace}.request-route>footer i{width:35%;border-top:1px dashed #426b75}.request-route>footer b{color:#78cbd6}
.flow-summaries { display:grid;grid-template-columns:1fr 1fr;gap:14px}.flow-summaries section{min-width:0;padding:9px 13px;display:grid;grid-template-columns:100px 1fr auto;align-items:center;border:1px solid #1f3944;border-radius:7px;background:#091720}.flow-summaries b{color:#71c5d1;font:600 9px "IBM Plex Mono",monospace}.flow-summaries p{margin:0;color:#8ba0a7;font-size:11px;white-space:nowrap}.flow-summaries p i{color:#4a717b;font-style:normal}.flow-summaries span{color:#57737d;font:500 8px "IBM Plex Mono",monospace}
.request-statement { display:flex;align-items:center;gap:28px;padding-top:9.11px;border-top:1px solid #263844}.request-statement div{color:#4e6974;font:500 9px "IBM Plex Mono",monospace;letter-spacing:.1em}.request-statement p{margin:0;color:#a8b9bf;font-size:clamp(16px,1.03vw,20px)}.request-statement p strong{color:var(--cyan-soft)}

/* Slide 05 presentation readability */
.request-hero > p { color:#a3b6bd; font-size:clamp(15px,.94vw,18px); line-height:1.62; }
.request-progress span,.request-progress strong { color:#78929b; font-size:clamp(10px,.63vw,12px); }
.request-progress .upcoming { color:#4c6570; }
.flow-node small { color:#6c8993; font-size:9px; }
.flow-node strong { color:#cfdddf; font-size:clamp(15px,.94vw,18px); }
.flow-node span { color:#607b85; font-size:9px; }
.proxy-node strong { font-size:clamp(17px,1.04vw,20px); }
.proxy-node p { color:#8da3ab; font-size:12px; line-height:1.4; }
.flow-connector b { color:#8bdbe5; font-size:13px; }
.flow-connector span { color:#607b84; font-size:8px; }
.route-split { filter:drop-shadow(0 0 4px rgba(104,210,224,.2)); }
.route-split::before { width:2px; background:#68d2e0; }
.route-split::after { content:""; position:absolute; left:calc(50% - 3px); top:7px; width:7px; height:7px; border-radius:50%; background:#8be1eb; box-shadow:0 0 8px rgba(104,210,224,.4); }
.route-split > i { height:2px; background:#68d2e0; }
.route-split > span,.route-split > b { width:2px; background:#68d2e0; }
.request-route > header small { color:#67858f; font-size:9px; }
.request-route > header strong { color:#82d6e1; font-size:13px; }
.request-route > header > span { color:#647e87; font-size:12px; }
.route-node small,.route-result small { color:#6b8993; font-size:9px; }
.route-node strong,.route-result strong { color:#cfdddf; font-size:clamp(15px,.94vw,18px); }
.route-node b { color:#82d5df; font-size:14px; }
.route-result span { color:#7d969e; font-size:10px; }
.web-route .route-result span { color:#7bd0dc; }
.route-arrow span { color:#79c2ce; font-size:11px; }
.request-route > footer { color:#718b94; font-size:9px; }
.request-route > footer b { color:#83d3de; }
.flow-summaries b { color:#7dd0db; font-size:11px; }
.flow-summaries p { color:#98abb1; font-size:13px; }
.flow-summaries p i { color:#557d87; }
.flow-summaries span { color:#66838d; font-size:10px; }
.request-statement div { color:#58737d; font-size:10px; }
.request-statement p { color:#b2c1c6; font-size:clamp(18px,1.14vw,22px); }
@keyframes horizontal-packet{0%{transform:translateX(0);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translateX(90px);opacity:0}}
@media (prefers-reduced-motion:reduce){.flow-connector em,.route-arrow em{animation:none}}
@media (max-width:1300px),(max-height:760px){.request-content{width:min(94%,1780px);padding:20.042px 0}.request-diagram{padding:10px;grid-template-rows:105px 20px minmax(0,1fr)}.flow-node{padding:8px}.proxy-node p{font-size:8px}.request-route{padding:10px}.route-body{padding:8px 0}.route-node,.route-result{padding:9px 7px}.flow-summaries section{grid-template-columns:80px 1fr auto}.flow-summaries p{font-size:9px}}
@media (max-width:820px){.request-slide{overflow-y:auto}.request-content{height:auto;min-height:100%;padding:28px 0 55px}.request-hero{display:block}.request-hero>p{text-align:left;margin-top:15px}.request-progress{overflow-x:auto;justify-content:flex-start}.request-diagram{min-height:1100px}.ingress-flow{grid-template-columns:1fr}.flow-connector{height:55px}.request-routes{grid-template-columns:1fr}.flow-summaries{grid-template-columns:1fr}.flow-summaries section{grid-template-columns:1fr}.request-statement{align-items:flex-start;flex-direction:column;gap:8px}}

/* Slide 06 — Next phase */
.next-slide { isolation:isolate;overflow:hidden;background:radial-gradient(circle at 76% 48%,rgba(38,133,151,.14),transparent 32%),radial-gradient(circle at 28% 60%,rgba(26,80,95,.09),transparent 30%),linear-gradient(145deg,#071019,#09141e 58%,#071018)}
.next-grid { position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 92%)}
.next-content { width:min(1780px,calc(100% - 8vw));height:100%;margin:auto;padding:29.152px 0 36.44px;display:grid;grid-template-rows:auto 44px minmax(0,1fr) 104px 62px;gap:clamp(11px,10.477px,14px)}
.next-hero { display:flex;align-items:flex-end;justify-content:space-between;gap:5vw}.next-hero h2{margin:0;font-size:clamp(34px,2.35vw,45px);line-height:1.17;letter-spacing:-.045em}.next-hero h2 strong{color:var(--cyan-soft)}
.next-hero>p{margin:0 0 1.822px;color:#a3b6bd;font-size:clamp(15px,.92vw,18px);line-height:1.62;text-align:right}.next-hero>p strong{color:#d8e6ea;font-weight:600}
.next-progress { display:flex;align-items:center;justify-content:center;padding:7px 18px;border:1px solid #1c3340;border-radius:7px;background:rgba(8,21,30,.82)}
.next-progress span,.next-progress strong{color:#718b94;font:500 clamp(10px,.61vw,12px) "IBM Plex Mono",monospace;letter-spacing:.07em;white-space:nowrap}.next-progress strong{color:var(--cyan-soft)}.next-progress i{flex:1;max-width:130px;height:1px;margin:0 14px;background:linear-gradient(90deg,#294b57,#438593);position:relative}.next-progress i::after{content:"";position:absolute;right:-2px;top:-3px;border:4px solid transparent;border-left-color:#438593}
.next-main { min-height:0;display:grid;grid-template-columns:29fr 22fr 49fr;gap:16px}
.current-server,.flutter-next { min-width:0;min-height:0;padding:20px;display:flex;flex-direction:column;border:1px solid #294651;border-radius:11px;background:linear-gradient(145deg,rgba(14,29,41,.98),rgba(9,21,30,.98));box-shadow:0 12px 32px rgba(0,0,0,.14)}
.current-server>header,.flutter-next>header{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #1f3944}.current-server>header small,.flutter-next>header small{color:#5c7b85;font:600 9px "IBM Plex Mono",monospace;letter-spacing:.11em}.current-server h3,.flutter-next h3{margin:4px 0 0;font-size:clamp(21px,1.28vw,25px)}
.current-server>header>span{display:flex;align-items:center;gap:6px;color:#75c69f;font:600 9px "IBM Plex Mono",monospace}.current-server>header>span i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.server-chain { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0}.server-chain>div{width:min(88%,280px);padding:11px 13px;border:1px solid #2b4b56;border-radius:6px;background:#0a1923;text-align:center}.server-chain small{display:block;color:#587680;font:600 8px "IBM Plex Mono",monospace}.server-chain strong{display:block;margin:4px 0 2px;color:#c5d5d9;font-size:clamp(14px,.86vw,17px)}.server-chain span{color:#78929b;font-size:11px}.server-chain>i{height:16px;width:2px;background:#3a7a86;position:relative}.server-chain>i::after{content:"";position:absolute;left:-4px;bottom:-2px;border:5px solid transparent;border-top-color:#3a7a86}
.current-server>footer{display:flex;align-items:center;justify-content:center;gap:9px;padding-top:10px;border-top:1px solid #1f3944;color:#617e88;font:600 9px "IBM Plex Mono",monospace}.current-server>footer i{width:24px;height:1px;background:#376d78}.current-server>footer strong{color:#75c69f}
.api-bridge { min-width:0;min-height:0;padding:20px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-top:1px solid #29434e;border-bottom:1px solid #29434e;background:linear-gradient(90deg,transparent,rgba(11,29,40,.75),transparent)}
.api-bridge header{text-align:center}.api-bridge header small{display:block;color:#57737d;font:600 9px "IBM Plex Mono",monospace}.api-bridge header strong{display:block;margin-top:5px;color:#82d8e3;font:700 18px "IBM Plex Mono",monospace}
.api-line{width:100%;height:74px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.api-line>i{width:100%;height:2px;background:#4b93a0;position:relative}.api-line>i::after{content:"";position:absolute;right:-3px;top:-5px;border:6px solid transparent;border-left-color:#4b93a0}.api-line b{position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:#86dee8;box-shadow:0 0 10px rgba(67,196,215,.5);animation:api-to-flutter 6s linear infinite}.api-line span{position:absolute;top:7px;padding:3px 6px;background:#0a1923;color:#8cdce6;font:600 11px "IBM Plex Mono",monospace}.api-line em{position:absolute;bottom:5px;color:#78939c;font:600 10px "IBM Plex Mono",monospace;font-style:normal}
.api-bridge ul{width:100%;margin:8px 0 12px;padding:10px 12px;list-style:none;border:1px solid #213e49;border-radius:6px;background:#091720}.api-bridge li{padding:4px 0;color:#78929b;font:500 9px "IBM Plex Mono",monospace;white-space:nowrap}.api-bridge footer{color:#617d87;font:600 9px "IBM Plex Mono",monospace}.api-bridge footer i{color:#7bd2dd;font-style:normal}
.flutter-next { border-color:#377887;box-shadow:inset 0 0 30px rgba(67,196,215,.035),0 12px 32px rgba(0,0,0,.14)}.flutter-next>header>span{padding:6px 10px;border:1px solid #397886;border-radius:4px;color:#82d8e3;background:#0a1c26;font:600 10px "IBM Plex Mono",monospace;letter-spacing:.09em}
.mobile-concept { position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:13px 0 0}.phone{width:230px;height:340px;border:1px solid #345964;border-radius:22px;background:#091821;box-shadow:0 12px 24px rgba(0,0,0,.2)}.phone-back,.phone-mid{position:absolute;opacity:.28}.phone-back{transform:translate(-72px,8px) scale(.83)}.phone-mid{transform:translate(-38px,3px) scale(.92);opacity:.48}.phone-back>div,.phone-mid>div{margin:28px 16px;height:70%;border:1px solid #29444f;border-radius:9px;background:linear-gradient(#0d202b,#091720)}
.phone-front { position:relative;z-index:2;overflow:hidden;padding:18px 14px 14px}.phone-front::before{content:"";position:absolute;top:7px;left:50%;width:42px;height:4px;transform:translateX(-50%);border-radius:4px;background:#2c4751}.phone-bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #29434e}.phone-bar i{width:7px;height:7px;border-radius:50%;background:var(--cyan)}.phone-bar span{color:#c5d5d9;font-size:13px;font-weight:700}.phone-bar b{color:#58737d}.location-title{padding:12px 2px 9px}.location-title small{display:block;color:#52717b;font:600 8px "IBM Plex Mono",monospace}.location-title strong{font-size:15px;color:#e0eaed}
.ui-flow{display:flex;flex-direction:column}.ui-flow>span{padding:7px 9px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;border:1px solid #284651;border-radius:5px;background:#0b1c26}.ui-flow small{color:#55747e;font:600 8px "IBM Plex Mono",monospace}.ui-flow b{color:#aec1c7;font-size:11px}.ui-flow em{color:#5c7983;font:500 7px "IBM Plex Mono",monospace;font-style:normal}.ui-flow>i{height:7px;width:1px;align-self:center;background:#397986}.phone-front>footer{position:absolute;left:14px;right:14px;bottom:11px;padding-top:7px;border-top:1px solid #243e48;color:#526f79;font:500 7px "IBM Plex Mono",monospace;text-align:center}
.flutter-message{margin-left:34px;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center}.flutter-message span{color:#55727c;font:600 8px "IBM Plex Mono",monospace}.flutter-message strong{color:#a8bcc2;font-size:13px}.flutter-message i{grid-column:1/-1;width:1px;height:24px;margin:3px 0 3px 11px;background:#438893;position:relative}.flutter-message i::after{content:"";position:absolute;bottom:-2px;left:-4px;border:5px solid transparent;border-top-color:#438893}
.next-objective { min-height:0;padding:13px 16px;display:grid;grid-template-columns:1fr 1.35fr;gap:22px;border:1px solid #203a45;border-radius:8px;background:#091720}.objective-copy{display:flex;flex-direction:column;justify-content:center}.objective-copy>b{color:#75cad6;font:600 10px "IBM Plex Mono",monospace;letter-spacing:.09em}.objective-copy p{margin:6px 0 0;color:#9cafb6;font-size:14px;line-height:1.55}.objective-copy p strong{color:#cfdee1}
.next-tasks{display:grid;grid-template-columns:1fr 1fr;gap:7px}.next-tasks span{padding:8px 10px;display:flex;align-items:center;gap:9px;border:1px solid #29434e;border-radius:5px;color:#96aab1;font-size:12px}.next-tasks em{color:#62aeb9;font:600 9px "IBM Plex Mono",monospace;font-style:normal}
.next-statement { display:grid;grid-template-columns:250px 1fr auto;align-items:center;gap:28px;padding-top:9.11px;border-top:1px solid #263844}.next-statement>div{color:#58737d;font:500 9px "IBM Plex Mono",monospace;letter-spacing:.1em}.next-statement p{margin:0;color:#b2c1c6;font-size:clamp(18px,1.14vw,22px)}.next-statement p strong{color:var(--cyan-soft)}.next-statement>span{color:#48636d;font:600 8px "IBM Plex Mono",monospace;letter-spacing:.09em}
@keyframes api-to-flutter{0%{transform:translateX(0);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translateX(260px);opacity:0}}
@media (prefers-reduced-motion:reduce){.api-line b{animation:none}}
@media (max-width:1300px),(max-height:760px){.next-content{width:min(94%,1780px);padding:20.953px 0}.current-server,.flutter-next{padding:14px}.phone{width:190px;height:285px}.phone-front{padding:16px 11px 11px}.ui-flow>span{padding:5px 7px}.api-bridge{padding:14px 8px}.api-bridge li{font-size:7px}.objective-copy p{font-size:11px}.next-statement{grid-template-columns:200px 1fr auto;gap:15px}}
@media (max-width:820px){.next-slide{overflow-y:auto}.next-content{height:auto;min-height:100%;padding:28px 0 55px}.next-hero{display:block}.next-hero>p{text-align:left;margin-top:15px}.next-progress{overflow-x:auto;justify-content:flex-start}.next-main{grid-template-columns:1fr}.current-server,.flutter-next{min-height:520px}.api-bridge{min-height:350px}.next-objective{grid-template-columns:1fr}.next-statement{grid-template-columns:1fr;gap:8px}}

/* Slide 07 — Ending */
.ending-slide { isolation:isolate;overflow:hidden;background:radial-gradient(circle at 70% 44%,rgba(35,119,138,.1),transparent 34%),linear-gradient(145deg,#071019,#09141e 58%,#071018)}
.ending-grid { position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
.ending-network { position:absolute;z-index:-1;right:-4vw;top:50%;width:min(58vw,980px);transform:translateY(-50%);opacity:.24;filter:drop-shadow(0 0 12px rgba(67,196,215,.05))}
.ending-links path{fill:none;stroke:#347481;stroke-width:1.2}.ending-nodes rect{fill:#0b1923;stroke:#3b8290;stroke-width:1}.ending-nodes rect:nth-child(2n){animation:ending-node-pulse 6s ease-in-out infinite}.ending-packet{fill:#84dce7;filter:drop-shadow(0 0 7px rgba(67,196,215,.65));animation:ending-data 10s ease-in-out 1 forwards}
.ending-content { position:relative;width:min(1780px,calc(100% - 8vw));height:100%;margin:auto;padding:47.372px 0 40.995px;display:grid;grid-template-rows:auto 1fr auto}
.ending-label { display:flex;align-items:center;gap:12px;color:#78cbd7;font:600 12px "IBM Plex Mono",monospace;letter-spacing:.13em}.ending-label span{color:#4d6c77}.ending-label b{font-weight:600}
.ending-message { align-self:center;margin-left:8vw;transform:translateY(-18.22px)}.ending-message>p{margin:0 0 10.932px;color:#6ebeca;font:600 clamp(11px,.7vw,14px) "IBM Plex Mono",monospace;letter-spacing:.22em}.ending-message h2{margin:0;color:#edf5f7;font-size:clamp(76px,6.2vw,119px);line-height:1.08;letter-spacing:-.065em}.ending-message h2 span{color:var(--cyan)}
.ending-project { margin-top:20.042px;padding-left:4px;display:flex;align-items:center;gap:18px}.ending-project strong{color:#b9c9ce;font-size:clamp(18px,1.2vw,23px)}.ending-project small{padding-left:18px;border-left:1px solid #2a4651;color:#5e7c86;font:500 10px "IBM Plex Mono",monospace;letter-spacing:.1em}
.ending-footer { display:flex;align-items:center;justify-content:space-between;padding-top:13.665px;border-top:1px solid #223843}.ending-footer>div{display:flex;align-items:center;gap:9px}.ending-footer i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px rgba(80,200,146,.4)}.ending-footer span,.ending-footer strong,.ending-footer p{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em}.ending-footer span{color:#526f79}.ending-footer strong{color:#74c29b}.ending-footer p{margin:0 100px 0 0;color:#48636d}
.ending-reveal { opacity:0;transform:translateY(10px)}.ending-slide.is-active .ending-reveal{animation:ending-reveal .65s cubic-bezier(.22,.75,.3,1) forwards;animation-delay:var(--ending-delay,0s)}
@keyframes ending-reveal{to{opacity:1;transform:none}}
@keyframes ending-node-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ending-data{0%{transform:translate(0,0);opacity:0}10%{opacity:1}42%{transform:translate(225px,0)}67%{transform:translate(225px,135px)}92%{opacity:1}100%{transform:translate(420px,135px);opacity:0}}
@media (prefers-reduced-motion:reduce){.ending-reveal{opacity:1;transform:none}.ending-slide.is-active .ending-reveal,.ending-nodes rect,.ending-packet{animation:none}}
@media (max-width:820px){.ending-content{width:min(90%,1780px);padding:35px 0}.ending-message{margin-left:0}.ending-message h2{font-size:clamp(58px,15vw,90px)}.ending-project{align-items:flex-start;flex-direction:column;gap:8px}.ending-project small{padding-left:0;border-left:0}.ending-network{width:950px;right:-650px}.ending-footer p{margin-right:60px}}

/* The viewport-height slide owns navigation; these wrappers own the fixed design height. */
.slide-content,
.foundation-content,
.operations-content,
.deployment-content,
.request-content,
.next-content,
.ending-content {
  height:911px;
  min-height:911px;
  max-height:911px;
}

@media (min-width:821px) {
  .scroll-indicator { top:878px; bottom:auto; }
  .slide-counter { top:884px; bottom:auto; }
  .foundation-orbit,.ending-network { top:455.5px; }
}