.dl-visual{color:var(--visual-ink);background:var(--visual-bg);border-block:1px solid var(--visual-line);padding:48px 0;margin-block:48px;min-width:0}
.dl-visual :is(h2,h3,p){color:inherit}
.iso-lead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:36px}
.dl-visual .iso-lead h2{font-size:clamp(28px,3vw,38px);line-height:1.4;letter-spacing:-.8px;text-wrap:balance}
.iso-lead>p{color:var(--visual-muted);font-size:17px;line-height:1.85;max-width:60ch}
.iso-stack-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center}
.how-section .iso-stack{padding:40px 32px;border-radius:12px}
.iso-stack-drawing{min-width:0;aspect-ratio:840/600}
.dl-visual svg{display:block;width:100%;height:auto;overflow:visible}
.iso-layers{border-top:1px solid var(--visual-line);min-width:0}
.iso-layer{display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;align-items:start;width:100%;padding:21px 14px;border:0;border-bottom:1px solid var(--visual-line);border-radius:0;background:transparent;color:var(--visual-ink);text-align:start;font:inherit;transition:background .2s}
.iso-layer:hover,.iso-layer.active{background:var(--visual-surface)}
.iso-layer.active{box-shadow:inset 2px 0 var(--accent)}
.iso-layer:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.iso-layer-key{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--visual-muted);padding-top:4px}
.iso-layer.active .iso-layer-key{color:var(--visual-accent-ink)}
.iso-layer-copy{display:block;min-width:0}
.iso-layer-title{display:block;font-size:19px;line-height:1.5;font-weight:600;margin-bottom:6px}
.iso-layer-description{display:block;font-size:16px;line-height:1.8;color:var(--visual-muted);word-break:keep-all;overflow-wrap:break-word}
.iso-layer-note{display:block;margin-top:9px;font-size:13px;line-height:1.75;color:var(--visual-muted);word-break:keep-all;overflow-wrap:break-word}
.iso-interface{position:relative;display:grid;gap:3px;padding:16px 14px 16px 72px;min-width:0}
.iso-interface::before{content:'';position:absolute;inset-block:0;inset-inline-start:35px;border-inline-start:1px solid var(--visual-edge)}
.iso-interface strong{font-size:15px;line-height:1.6;font-weight:600}
.iso-interface>span{font-size:13px;line-height:1.75;color:var(--visual-muted);overflow-wrap:break-word}
.iso-decision-scope{border-inline-start:2px solid var(--visual-edge);padding-inline-start:10px;margin-bottom:16px;min-width:0}
.iso-scope-title{padding:12px 14px 8px;font-size:16px;line-height:1.6;font-weight:600}
.iso-framework-terms{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px;padding-top:22px;border-top:1px solid var(--visual-line)}
.iso-framework-terms>span{font-size:15px;line-height:1.8;color:var(--visual-muted)}
.iso-framework-terms strong{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--visual-ink);margin-inline-start:6px}
.iso-stack-boundary{max-width:1000px;margin-top:14px;font-size:14px;line-height:1.85;color:var(--visual-muted)!important}
.iso-tag{display:inline-block;max-width:100%;margin-top:10px;padding:3px 9px;border:1px solid var(--visual-edge);border-radius:2px;font-family:var(--mono);font-size:12px;line-height:1.65;letter-spacing:.01em;color:var(--visual-muted)!important;overflow-wrap:break-word}
.dl-visual .box .top{fill:var(--f-top)}
.dl-visual .box .left{fill:var(--f-left)}
.dl-visual .box .right{fill:var(--f-right)}
.dl-visual .box polygon{stroke:var(--f-edge);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:opacity .2s,fill .2s,stroke .2s}
.dl-visual .box.acc .top{fill:var(--a-top)}
.dl-visual .box.acc .left{fill:var(--a-left)}
.dl-visual .box.acc .right{fill:var(--a-right)}
.dl-visual .box.acc polygon{stroke:var(--a-right)}
.dl-visual .box.dim{opacity:.35}
.dl-visual .slab.active .top{fill:var(--visual-surface)}
.dl-visual .slab.active polygon{stroke:var(--accent);stroke-width:1.5}
.dl-visual .lbl rect{fill:var(--visual-surface);stroke:var(--visual-edge);stroke-width:1}
.dl-visual .lbl text{font-family:var(--mono);font-size:14px;letter-spacing:0;fill:var(--visual-muted)}
.dl-visual .lbl.active rect{fill:var(--visual-ink);stroke:var(--visual-ink)}
.dl-visual .lbl.active text{fill:var(--visual-bg)}
.dl-visual .leader{stroke:var(--visual-edge);stroke-width:1;fill:none}
.dl-visual .leader.active{stroke:var(--visual-ink)}
.dl-visual .iso-scope-marker .leader{stroke:var(--visual-ink)}
.dl-visual .iso-scope-label rect{fill:none;stroke:none}
.dl-visual .iso-scope-label text{fill:var(--visual-ink)}
.dl-visual .iso-interface-label text{font-size:13px}
.dl-visual .iso-interface-label rect{stroke-dasharray:3 3}
.dl-visual .wire{stroke:var(--f-edge);stroke-width:1;fill:none}
.dl-visual .sheetline{stroke:var(--f-edge);stroke-width:1.2}
@media(max-width:1099px){
  .iso-lead{gap:28px}.iso-stack-layout{gap:24px}
  .iso-layer{padding-inline:10px;grid-template-columns:32px minmax(0,1fr);gap:12px}
  .iso-interface{padding-inline-start:54px}.iso-interface::before{inset-inline-start:26px}
}
@media(max-width:859px){
  .dl-visual{padding-block:32px;margin-block:32px}.iso-lead,.iso-stack-layout{grid-template-columns:1fr;gap:24px}
  .how-section .iso-stack{padding:28px 18px}
  .dl-visual .iso-lead h2{font-size:28px;line-height:1.45}.iso-lead{margin-bottom:26px}.iso-lead>p{font-size:17px;max-width:none}
  .iso-stack-drawing{max-width:640px;width:100%;margin-inline:auto}.iso-layer{padding:19px 12px;grid-template-columns:36px minmax(0,1fr)}
  .iso-interface{padding-inline-start:60px}.iso-interface::before{inset-inline-start:30px}
}
@media(max-width:479px){
  .iso-layer-title{font-size:18px}.iso-layer-description{font-size:16px}.iso-layer{grid-template-columns:28px minmax(0,1fr);gap:12px;padding-inline:10px}
  .iso-tag{font-size:11px}.iso-layer .iso-tag{font-size:10.5px}
  .iso-interface{padding-inline-start:50px}.iso-interface::before{inset-inline-start:24px}
  .iso-framework-terms{gap:10px 20px}.iso-framework-terms>span{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .dl-visual *{transition:none!important}
}
