/* Realistic images and readable HTML diagrams for the three connected domains. */
.bc-domain-real{--domain-line:#55ddec;--domain-ink:#e5f9ff;display:block;min-width:0;margin:14px -14px 0;padding:0;background:#031924;color:var(--domain-ink);border-block:1px solid #286375;overflow:hidden}
.bc-domain-real>figcaption{display:block;padding:20px 18px;font-size:clamp(20px,2.1vw,28px);font-weight:800;line-height:1.5;letter-spacing:.02em;text-align:left;color:#e6faff;background:linear-gradient(135deg,#092b38,#041b26)}
.bc-domain-real-photo{position:relative;isolation:isolate;overflow:hidden;background:#03151f;border-block:1px solid #286375}
.bc-panel-visual .bc-domain-real-photo>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin:0}
.bc-panel-visual .bc-domain-real--web .bc-domain-real-photo>img{aspect-ratio:1/1;object-position:center}
.bc-panel-visual .bc-domain-real--it .bc-domain-real-photo>img{aspect-ratio:1/1;object-position:center}
.bc-domain-real-pin{position:absolute;left:var(--pin-x);top:var(--pin-y);transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;border:1px solid #b4ffff;border-radius:50%;background:#05424de6;color:#fff;font-size:13px;line-height:1;font-weight:800;box-shadow:0 0 0 4px #2dd9ed24,0 0 20px #19dcf769}
.bc-domain-real-label{position:absolute;z-index:1;display:block;max-width:calc(100% - 24px);padding:7px 10px;border:1px solid #4ed9eb;background:#031b29ed;box-shadow:0 2px 18px #0007;color:#eaffff;font-size:13px;font-weight:700;line-height:1.5;white-space:nowrap}
.bc-domain-real-label::after{content:"";position:absolute;bottom:-19px;left:13px;width:1px;height:18px;background:#63e3f0;box-shadow:0 0 6px #4de0f0}
.bc-domain-real-label--site{left:5%;top:5%}
.bc-domain-real-label--contact{right:4%;bottom:10%}
.bc-domain-real-label--contact::after{top:-19px;bottom:auto;left:auto;right:17px}
.bc-domain-real-label--field{left:4%;top:4%}
.bc-domain-real-label--record{right:4%;bottom:12%}
.bc-domain-real-label--record::after{top:-19px;bottom:auto;left:auto;right:17px}
.bc-domain-real-key{display:grid;gap:0;list-style:none;margin:0;padding:5px 18px}
.bc-domain-real-key>li{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:10px;margin:0;padding:14px 0;border-bottom:1px solid #294b58}
.bc-domain-real-key>li:last-child{border-bottom:0}
.bc-domain-real-key>li>b{display:grid;place-items:center;width:28px;height:28px;border:1px solid #46a7b6;border-radius:50%;font-size:13px;line-height:1;color:#75e8ed;background:#0a3440}
.bc-domain-real-key strong{display:block;font-size:16px;line-height:1.5;color:#e6faff}
.bc-domain-real-key span{display:block;margin-top:3px;font-size:13px;line-height:1.75;color:#b6d7e1}
.bc-domain-real-flow{list-style:none;margin:0;padding:15px 18px 5px}
.bc-domain-real-flow--compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;padding-top:12px;padding-bottom:12px}
.bc-domain-real-flow--compact>li{position:relative;display:grid;place-items:center;min-height:51px;padding:5px 3px;border:1px solid #3d8192;background:#08303d;text-align:center}
.bc-domain-real-flow--compact>li+li::before{content:"→";position:absolute;right:calc(100% + 2px);width:12px;color:#62e4ee;font-size:18px;line-height:1}
.bc-domain-real-flow--compact strong{font-size:13px;line-height:1.6;color:#e7fcff;white-space:nowrap}
.bc-domain-real-flow--web{display:grid;gap:21px;padding-top:20px;padding-bottom:16px}
.bc-domain-real-flow--web>li{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;align-items:start;padding:13px 12px;border:1px solid #376e80;background:#072b39}
.bc-domain-real-flow--web>li+li::before{content:"↓";position:absolute;left:50%;top:-23px;transform:translateX(-50%);color:#64e1e9;font-size:20px;line-height:1}
.bc-domain-real-flow--web>li:last-child{background:#0a3a40;border-color:#54d8d1}
.bc-domain-real-flow--web>li>b{color:#6de8ed;font-size:13px;line-height:1.8}
.bc-domain-real-flow--web strong{display:block;font-size:17px;line-height:1.5;color:#e6faff}
.bc-domain-real-flow--web span{display:block;margin-top:3px;font-size:13px;line-height:1.7;color:#bddce5}
.bc-domain-real-organize{padding:20px 18px 14px;text-align:center}
.bc-domain-real-input,.bc-domain-real-output{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bc-domain-real-input>span{padding:10px 3px;border:1px solid #3c7e90;background:#082c3a;font-size:13px;line-height:1.6;color:#d9f6ff}
.bc-domain-real-down{display:block;padding:5px 0;color:#69e2e9;font-size:23px;line-height:1.1}
.bc-domain-real-folder{padding:16px 10px;border:1px solid #56d9d3;background:#0b3b42}
.bc-domain-real-folder>strong{display:block;color:#efffff;font-size:20px;line-height:1.5}
.bc-domain-real-folder>span{display:block;margin-top:5px;color:#c1e3e7;font-size:13px;line-height:1.7}
.bc-domain-real-output>div{padding:11px 3px;border:1px solid #3b7e90;background:#082b39}
.bc-domain-real-output strong{display:block;color:#e8faff;font-size:16px;line-height:1.5}
.bc-domain-real-output span{display:block;margin-top:3px;color:#b6d9e4;font-size:13px;line-height:1.5;white-space:nowrap}
.bc-domain-real-note{margin:0;padding:10px 18px 15px;color:#92b5c0;font-size:13px;line-height:1.7;text-align:left}
@media(max-width:767px){
 .bc-domain-real{margin-inline:0}
 .bc-domain-real>figcaption{padding:18px 15px;font-size:23px}
 .bc-domain-real-key{padding-inline:14px}
 .bc-domain-real-flow,.bc-domain-real-organize{padding-inline:14px}
 .bc-domain-real-flow--compact{gap:15px}
 .bc-domain-real-flow--compact>li+li::before{right:calc(100% + 1px)}
 .bc-domain-real-note{padding-inline:14px}
}
@media(max-width:360px){
 .bc-domain-real>figcaption{font-size:21px}
 .bc-domain-real-key,.bc-domain-real-flow,.bc-domain-real-organize{padding-inline:10px}
 .bc-domain-real-input,.bc-domain-real-output{gap:5px}
 .bc-domain-real-flow--compact{gap:13px}
 .bc-domain-real-flow--compact>li{padding-inline:1px}
 .bc-domain-real-flow--compact>li+li::before{right:100%;font-size:17px}
 .bc-domain-real-label{padding:5px 7px}
}