html {scroll-behavior:auto}
.opening {border-bottom:1px solid var(--line)}
.scope-strip {display:grid;grid-template-columns:.65fr 1.25fr 1fr;gap:24px;margin:30px 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scope-strip strong {display:block;font-size:1.45rem;color:var(--brand-dark);line-height:1.3;margin-bottom:7px}
.scope-strip span,.sample-note {color:var(--muted);font-size:.9rem}
.sample-note {max-width:850px;line-height:1.65}
.worksheet-view {background:#fff;overflow-x:auto}
.worksheet-view img {width:100%;min-width:850px;max-width:none}
.migration-flow {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;list-style:none;padding:36px 28px;margin:0;counter-reset:none}
.migration-flow li {position:relative;border:1px solid var(--line);border-radius:8px;background:var(--soft);padding:24px 18px;min-width:0}
.migration-flow li::before {display:none}
.migration-flow li:not(:last-child)::after {content:'→';position:absolute;right:-25px;top:45%;font-size:24px;color:var(--brand)}
.flow-number {display:block;color:var(--accent);font-size:.78rem;font-weight:700;margin:16px 0 8px}
.migration-flow h3 {font-size:1.08rem;line-height:1.3;margin:0 0 12px}
.migration-flow p {font-size:.9rem;color:var(--muted);margin:0 0 16px}
.flow-tag {display:block;font-size:.72rem;color:var(--brand-dark);border-top:1px solid var(--line);padding-top:12px}
.flow-symbol {display:flex;align-items:center;height:48px;font-size:2.3rem;line-height:1;color:var(--brand);font-family:Arial,sans-serif}
.database-symbol {display:block;width:46px;height:48px;border:2px solid var(--brand);border-radius:50% / 16%;position:relative;background:#e7f0f2}
.database-symbol::before,.database-symbol::after {content:'';position:absolute;left:-2px;right:-2px;height:14px;border:2px solid var(--brand);border-radius:50%}
.database-symbol::before {top:-2px;background:#e7f0f2}.database-symbol::after {top:15px;border-top:0}
.representation-example {display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:48px}
.representation-example h3 {font-size:1.6rem;line-height:1.3;margin:0 0 20px}
.representation-example p+p {margin-top:18px}
.representation-example .visual-frame {margin:0}
.xml-window {position:relative;aspect-ratio:1.3;overflow:hidden;background:#111}
.xml-window img {position:absolute;max-width:none;width:195%;left:-1%;top:-25.2%;height:auto}
.charges-view {position:relative;aspect-ratio:1173/631;overflow:hidden;background:#fff}
.charges-view img {position:absolute;width:100%;max-width:none;top:-4%;height:auto}
.business-bridge {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;padding:28px;margin-top:28px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.business-bridge h3 {margin:0 0 12px;font-size:1.3rem}
.business-bridge>span {font-size:2rem;color:var(--brand)}
.business-bridge p {color:var(--muted)}
@media(max-width:900px){.migration-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.migration-flow li::after{display:none}.representation-example{grid-template-columns:1fr;gap:24px}.representation-example .visual-frame{max-width:600px}.scope-strip{grid-template-columns:1fr;gap:20px}.scope-strip strong{font-size:1.3rem}}
@media(max-width:560px){.migration-flow{grid-template-columns:1fr;padding:20px}.migration-flow li:not(:last-child)::after{display:block;content:'↓';top:auto;bottom:-24px;right:50%;font-size:20px}.migration-flow li{padding:20px}.business-bridge{grid-template-columns:1fr;gap:16px;padding:20px}.business-bridge>span{transform:rotate(90deg);width:24px}.charges-view{overflow-x:auto;aspect-ratio:auto;height:470px}.charges-view img{width:850px;top:-20px}.portfolio-hero h1{font-size:2.3rem}}

.migration-figure {scroll-margin-top:100px}

/* Public assets are permanently cropped; preserve their actual image bounds. */
.xml-window {aspect-ratio:850/765}
.xml-window img {position:static;width:100%;max-width:100%;height:auto}
.charges-view {position:static;aspect-ratio:auto;overflow-x:auto}
.charges-view img {position:static;width:100%;max-width:none;min-width:850px;height:auto}
@media(max-width:560px){.charges-view{height:auto}.charges-view img{width:850px}}

.case-context{margin-top:24px;max-width:720px;color:#d7e5e9}.case-context a{text-underline-offset:4px}