/* Only the home-page notebook is affected. Native screenshots stay intact. */
:is(.hero-visual,.inner-device) .system-viewport{position:relative;aspect-ratio:var(--screen-ratio);background:#ecf2f6;overflow:hidden}
:is(.hero-visual,.inner-device) .system-slide{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .38s ease;pointer-events:none}
:is(.hero-visual,.inner-device) .system-slide.is-current{opacity:1;z-index:1}
:is(.hero-visual,.inner-device) .system-controls{display:flex;align-items:center;justify-content:center;gap:2px;margin:14px 0 0;width:max-content;max-width:100%;padding:0 4px;border:1px solid #d4e3ed;border-radius:30px;background:#ffffffed;box-shadow:0 4px 16px #0a29400b}
:is(.hero-visual,.inner-device) .system-controls[hidden]{display:none}
:is(.hero-visual,.inner-device) .system-controls button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:#153e5b;font-family:inherit;font-weight:600;font-size:24px;line-height:1;cursor:pointer}
:is(.hero-visual,.inner-device) .system-controls button[data-pause]{font-size:13px}
:is(.hero-visual,.inner-device) .system-controls button:hover{background:#eaf3fa}
:is(.hero-visual,.inner-device) .system-controls button span{width:7px;height:7px;border-radius:50%;background:#a3b6c4;transition:background .2s,transform .2s}
:is(.hero-visual,.inner-device) .system-controls button[aria-pressed="true"] span{background:#f67d19;transform:scale(1.35)}
:is(.hero-visual,.inner-device) .system-caption{font-size:.66rem;line-height:1.4;color:#49677b;margin:7px 0 0;max-width:300px;min-height:2.8em}
:is(.hero-visual,.inner-device):has(.system-device){padding-bottom:0}
:is(.hero-visual,.inner-device):has(.system-device) .float-ticket{bottom:30px}
@media(max-width:650px){:is(.hero-visual,.inner-device) .system-controls{margin-inline:auto}:is(.hero-visual,.inner-device) .system-caption{text-align:center;margin-inline:auto}:is(.hero-visual,.inner-device) .system-device{max-width:100%}}
@media(prefers-reduced-motion:reduce){:is(.hero-visual,.inner-device) .system-slide,:is(.hero-visual,.inner-device) .system-controls button span{transition:none}}

/* Keep real text on a flat pixel plane; perspective filtering blurred small labels. */
:is(.hero-visual,.inner-device) .system-device,:is(.hero-visual,.inner-device) .system-device.motion-depth{transform:none!important;filter:none;transition:none}
:is(.hero-visual,.inner-device) .system-device .device-screen{box-shadow:0 18px 23px #0a294038}
:is(.hero-visual,.inner-device) .system-enlarge{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
:is(.hero-visual,.inner-device) .system-enlarge:focus-visible{outline:3px solid #ff7a17;outline-offset:-4px}
:is(.hero-visual,.inner-device) .system-controls .system-expand-label{width:auto;padding:0 10px;font-size:12px;white-space:nowrap}
.system-zoom{width:min(1720px,96vw);max-width:96vw;max-height:94vh;padding:0;border:1px solid #d8e4ed;border-radius:12px;background:#edf3f7;color:#153e5b;box-shadow:0 20px 70px #0005}
.system-zoom::backdrop{background:#071d30cc}
.system-zoom-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;position:sticky;top:0;z-index:1}
.system-zoom-bar strong{margin-right:auto;font-size:14px}
.system-zoom-bar button{border:1px solid #d4e3ed;border-radius:6px;background:#fff;color:#153e5b;font:inherit;font-size:13px;padding:8px 12px;cursor:pointer}
.system-zoom-content{overflow:auto;max-height:calc(94vh - 70px)}
.system-zoom-content img{display:block;width:100%;height:auto;max-width:none}
.system-zoom.detail-view .system-zoom-content img{width:1600px;max-width:none}
@media(max-width:650px){.system-zoom-bar{flex-wrap:wrap;gap:8px}.system-zoom-bar strong{flex-basis:100%}.system-zoom-content{max-height:calc(94vh - 112px)}:is(.hero-visual,.inner-device) .system-controls{gap:0}:is(.hero-visual,.inner-device) .system-controls button{width:32px}}

.inner-device:has(.system-device){transform:none!important;height:auto;width:100%;min-width:0;max-width:700px;position:relative}
.inner-device .device.system-device{width:100%;max-width:100%}