.sld{
  --diagram-accent:#ffcf4a;
  --diagram-accent-soft:rgba(255,207,74,.18);
  --diagram-border:rgba(194,226,208,.2);
  --diagram-muted:#a9cbc0;
  --diagram-strong:#f7fbf8;
  position:relative;
  margin-top:84px;
  padding:36px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid var(--diagram-border);
  background:
    radial-gradient(circle at 14% 20%, rgba(255,207,74,.1), transparent 24%),
    radial-gradient(circle at 82% 24%, rgba(69,201,183,.12), transparent 28%),
    linear-gradient(135deg, rgba(9,90,90,.96), rgba(3,74,75,.97) 58%, rgba(2,56,60,.98));
  box-shadow:0 24px 70px rgba(0,25,25,.22), inset 0 1px 0 rgba(255,255,255,.05);
  isolation:isolate;
}
.sld::before,
.sld::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.sld::before{
  background:
    linear-gradient(rgba(180,220,205,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,220,205,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.55));
}
.sld::after{
  inset:14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.05);
}
.sld > *{position:relative; z-index:1}
.sld .sld-head{display:flex; align-items:flex-start; justify-content:space-between; gap:28px; margin-bottom:34px}
.sld-heading{max-width:700px}
.diagram-eyebrow{display:inline-flex; align-items:center; gap:12px; font:700 .7rem var(--font); letter-spacing:.24em; color:#f2cc51; margin-bottom:16px; text-transform:uppercase}
.diagram-eyebrow::before{content:""; width:34px; height:2px; background:var(--diagram-accent); border-radius:999px; box-shadow:0 0 18px rgba(255,207,74,.4)}
.sld-head strong{display:block; font:800 clamp(2rem,4vw,3.5rem)/.98 var(--display); letter-spacing:-.04em; color:#f3f9f7; max-width:12ch}
.sld-head p{margin-top:14px; max-width:42ch; font-size:1rem; color:#b6d4cb}
.diagram-controls{display:flex; flex-direction:column; align-items:flex-end; gap:12px; min-width:140px}
.diagram-auto-label{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#8eb7aa}
.diagram-pause{appearance:none; display:inline-flex; align-items:center; gap:10px; min-width:104px; justify-content:center; padding:10px 16px; border:1px solid rgba(194,226,208,.22); border-radius:999px; background:rgba(255,255,255,.05); backdrop-filter:blur(8px); color:#eff7f5; cursor:pointer; transition:transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease}
.diagram-pause:hover{transform:translateY(-2px); border-color:rgba(255,207,74,.6); background:rgba(255,255,255,.08); box-shadow:0 12px 28px rgba(0,0,0,.15)}
.diagram-pause:disabled{opacity:.55; cursor:default; transform:none; box-shadow:none}
.diagram-pause span[aria-hidden="true"]{font-size:1rem; line-height:1}
.diagram-pause-label{font-size:.82rem; font-weight:700}

.sld .chain{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; align-items:flex-start; margin:0; padding:8px 0 0; list-style:none}
.sld .chain li,
.sld .chain li:last-child{display:flex; position:relative; min-width:0; justify-content:center; align-items:flex-start}
.sld .node{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  min-height:180px;
  padding:0 12px;
  border:0;
  background:none;
  position:relative;
  z-index:1;
  color:#dcebe6;
}
.sld .node::before{
  content:"";
  position:absolute;
  top:34px;
  width:116px;
  height:116px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,207,74,.13), transparent 65%);
  opacity:0;
  transform:scale(.84);
  transition:opacity .35s ease, transform .35s ease;
}
.sld .station-number{font:700 .74rem var(--font); letter-spacing:.18em; color:#7ea999; margin-bottom:14px; transition:color .3s}
.sld .station-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:84px;
  height:84px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(14,91,90,.96), rgba(9,64,67,.96));
  border:1px solid rgba(164,208,183,.34);
  box-shadow:0 0 0 8px rgba(8,72,72,.46), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.sld .station-icon::before{
  content:"";
  position:absolute;
  inset:-11px;
  border:1px solid rgba(168,208,195,.16);
  border-radius:50%;
}
.sld .node svg{width:38px; height:38px; stroke:#eef6f3; stroke-width:1.45; transition:stroke .35s ease, transform .35s ease}
.sld .station-label{margin-top:18px; max-width:16ch; text-align:center; font-size:1rem; font-weight:700; line-height:1.32; color:#d7e9e2; transition:color .35s ease, transform .35s ease}
.sld .node:hover .station-icon{transform:translateY(-5px) scale(1.02); border-color:rgba(255,207,74,.55); box-shadow:0 0 0 8px rgba(8,72,72,.55), 0 16px 28px rgba(0,0,0,.12)}
.sld .node:hover svg{transform:scale(1.04)}
.sld .node:hover .station-label{transform:translateY(-2px)}
.sld .node[aria-pressed="true"]::before{opacity:1; transform:scale(1)}
.sld .node[aria-pressed="true"] .station-icon{background:linear-gradient(180deg, #ffd766, #ffc107); border-color:#ffcf4a; box-shadow:0 0 0 10px rgba(255,207,74,.11), 0 0 40px rgba(255,207,74,.22)}
.sld .node[aria-pressed="true"] svg{stroke:#12483d}
.sld .node[aria-pressed="true"] .station-label{color:#ffffff}
.sld .node[aria-pressed="true"] .station-number{color:#ffd860}
.sld .node:focus-visible{outline:2px solid #ffcf4a; outline-offset:4px; border-radius:18px}

.sld .wire{
  position:absolute;
  left:calc(50% + 48px);
  top:72px;
  width:calc(100% - 96px);
  height:2px;
  min-width:0;
  margin:0;
  background:linear-gradient(90deg, rgba(126,169,153,.18), rgba(126,169,153,.45), rgba(126,169,153,.18));
  overflow:hidden;
}
.sld .wire::before,
.sld .wire::after{content:""; position:absolute; inset:0}
.sld .wire::before{background:linear-gradient(90deg, transparent, rgba(255,207,74,.8), transparent); transform:translateX(-100%); opacity:0}
.sld .wire::after{content:"›"; inset:auto; left:calc(50% - 3px); top:-15px; color:#bdd5cb; font:18px var(--font)}
.sld .chain li.is-past .wire,
.sld .chain li.is-active .wire{background:linear-gradient(90deg, rgba(255,207,74,.38), rgba(255,207,74,.88), rgba(255,207,74,.3))}
.sld.diagram-running .chain li.is-past .wire::before,
.sld.diagram-running .chain li.is-active .wire::before{animation:diagram-current 2.1s linear infinite; opacity:1}

.sld .sld-detail{
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:0;
  margin-top:34px;
  border:1px solid rgba(216,226,219,.9);
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(250,252,249,.98), rgba(241,247,243,.97));
  color:#173f34;
  box-shadow:0 22px 46px rgba(0,28,22,.12);
}
.diagram-stamp{
  position:relative;
  padding:26px 22px 26px 24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:252px;
  background:
    linear-gradient(rgba(8,89,89,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,89,89,.05) 1px, transparent 1px),
    linear-gradient(180deg, #eef4eb, #e6eee5);
  background-size:20px 20px, 20px 20px, auto;
  border-right:1px solid rgba(202,217,205,.95);
  isolation:isolate;
}
.stamp-label{font:700 .64rem var(--font); letter-spacing:.22em; color:#64816c; text-transform:uppercase}
.stamp-number{font:900 5.2rem/.95 var(--display); letter-spacing:-.08em; color:#c8d6c5; margin-top:16px}
.stamp-icon{position:absolute; right:20px; bottom:22px; width:54px; height:54px; color:#0d6157}
.stamp-icon svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.35}
.stamp-route{position:absolute; left:0; bottom:28px; width:120px; height:44px; border-top:1px solid rgba(191,170,70,.66); border-right:1px solid rgba(191,170,70,.66); border-radius:0 16px 0 0; opacity:.65; z-index:-1}
.diagram-copy{padding:30px 32px 28px; display:flex; flex-direction:column; gap:24px; min-width:0}
.diagram-copy-top{display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:24px; align-items:start}
.diagram-main{min-width:0}
.diagram-badge{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:rgba(8,89,89,.08); color:#1a5e52; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase}
.diagram-badge::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--diagram-accent); box-shadow:0 0 0 6px rgba(255,207,74,.15)}
.sld .sld-detail h3{margin-top:16px; font:800 clamp(1.55rem,2vw,2.2rem)/1.04 var(--display); letter-spacing:-.04em; color:#114f42; max-width:18ch}
.sld .sld-detail p{margin-top:14px; font-size:1.03rem; line-height:1.72; color:#56705f; max-width:64ch}
.diagram-meter{padding:16px 16px 14px; border-radius:18px; background:linear-gradient(180deg, #f4f8f2, #edf4ef); border:1px solid rgba(181,201,188,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.diagram-meter-label{display:block; font-size:.74rem; font-weight:800; letter-spacing:.14em; color:#7d9789; text-transform:uppercase}
#sld-step{display:block; margin-top:12px; font:900 1.35rem/1 var(--display); color:#125145}
.diagram-meter-bar{display:block; margin-top:14px; height:10px; border-radius:999px; background:rgba(8,89,89,.08); overflow:hidden}
#sld-meter-fill{display:block; width:20%; height:100%; border-radius:inherit; background:linear-gradient(90deg, #ffd35f, #ffc107); box-shadow:0 0 16px rgba(255,193,7,.36); transition:width .38s ease}
.diagram-highlights{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none}
.diagram-highlights li{display:flex; align-items:center; gap:10px; min-height:58px; padding:14px 14px 14px 16px; border-radius:16px; background:#ffffff; border:1px solid rgba(188,209,197,.78); font-size:.92rem; font-weight:700; color:#214d43; box-shadow:0 12px 24px rgba(0,0,0,.03)}
.diagram-highlights li::before{content:""; width:9px; height:9px; flex:none; border-radius:50%; background:var(--diagram-accent); box-shadow:0 0 0 5px rgba(255,207,74,.15)}
.diagram-actions{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.sld #sld-a, .diagram-next{display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:0 18px; border-radius:999px; font-size:.92rem; font-weight:800; text-decoration:none; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease}
.sld #sld-a{background:#134f44; color:#f6fbf9; box-shadow:0 12px 20px rgba(8,89,89,.18)}
.sld #sld-a:hover{transform:translateY(-2px); box-shadow:0 16px 28px rgba(8,89,89,.22)}
.diagram-next{border:1px solid rgba(19,79,68,.18); background:transparent; color:#154e41; cursor:pointer}
.diagram-next:hover{transform:translateY(-2px); border-color:rgba(255,193,7,.66); box-shadow:0 12px 24px rgba(0,0,0,.05)}
.sld:not(.diagram-running) .chain li .wire::before{animation-play-state:paused!important}

@keyframes diagram-current{to{transform:translateX(100%)}}
@keyframes diagram-current-v{to{transform:translateY(100%)}}

@media (max-width:1100px){
  .sld{padding:30px; margin-top:70px}
  .diagram-copy-top{grid-template-columns:minmax(0,1fr) 156px}
  .diagram-highlights{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  .sld{margin-top:54px; padding:24px 22px 26px; border-radius:24px}
  .sld .sld-head{flex-direction:column; align-items:flex-start; gap:18px}
  .diagram-controls{align-items:flex-start}
  .sld-head strong{font-size:clamp(1.8rem,8vw,2.5rem); max-width:14ch}
  .sld-head p{font-size:.95rem}
  .sld .chain{grid-template-columns:1fr; gap:18px; padding-top:2px}
  .sld .chain li, .sld .chain li:last-child{display:block}
  .sld .node{display:grid; grid-template-columns:58px minmax(0,1fr) 36px; align-items:center; gap:16px; min-height:0; padding:0; text-align:left}
  .sld .node::before{top:50%; left:0; width:74px; height:74px; transform:translateY(-50%) scale(.84)}
  .sld .station-icon{grid-column:1; grid-row:1; width:58px; height:58px; box-shadow:0 0 0 7px rgba(8,72,72,.46)}
  .sld .station-number{grid-column:3; grid-row:1; margin:0; text-align:right; font-size:.72rem}
  .sld .station-label{grid-column:2; grid-row:1; margin:0; text-align:left; max-width:none; font-size:.98rem}
  .sld .node svg{width:30px; height:30px}
  .sld .wire{left:28px; top:62px; width:2px; height:14px; background:linear-gradient(180deg, rgba(126,169,153,.18), rgba(126,169,153,.5), rgba(126,169,153,.18))}
  .sld .wire::before{background:linear-gradient(180deg, transparent, rgba(255,207,74,.85), transparent); transform:translateY(-100%)}
  .sld .wire::after{display:none}
  .sld .sld-detail{grid-template-columns:1fr; margin-top:30px; border-radius:20px}
  .diagram-stamp{min-height:0; padding:16px 18px 14px; flex-direction:row; align-items:center; gap:16px; border-right:0; border-bottom:1px solid rgba(202,217,205,.95)}
  .stamp-number{font-size:2rem; margin:0}
  .stamp-icon{position:relative; right:auto; bottom:auto; margin-left:auto; width:38px; height:38px}
  .stamp-route{display:none}
  .diagram-copy{padding:22px 20px 20px}
  .diagram-copy-top{grid-template-columns:1fr; gap:18px}
  .diagram-highlights{grid-template-columns:1fr}
  .diagram-actions{flex-direction:column; align-items:stretch}
  .sld #sld-a, .diagram-next{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .sld *, .sld *::before, .sld *::after{animation:none!important; transition:none!important}
}