.examples-shell{background:#f2f6f7;color:#1c3140}.examples-header{background:linear-gradient(125deg,#132b3a,#285661);color:white;padding-block:4.2rem}.examples-header h1{font-size:clamp(2.2rem,5vw,4.3rem);font-family:Georgia,serif;max-width:19ch;color:#fff;font-weight:700;line-height:1.09}.examples-header p:not(.examples-overline){max-width:52rem;line-height:1.65;font-size:1.09rem;color:#e0e9eb}.examples-overline{letter-spacing:.13em;text-transform:uppercase;font-size:.72rem;font-weight:800;color:#418b8d;margin-bottom:.65rem}.examples-header .examples-overline{color:#b6d6d4}.examples-workspace{padding-block:3rem 5rem}.examples-toolbar{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.7rem}.examples-toolbar h2{font-size:.85rem;font-weight:800;margin-bottom:.7rem}.examples-tier-tabs,.examples-view-tabs{display:flex;gap:.4rem;flex-wrap:wrap}.examples-toolbar button{border:1px solid #cbd9df;border-radius:10px;background:white;color:#29424f;padding:.65rem .85rem;cursor:pointer;font:inherit;font-size:.9rem;font-weight:650}.examples-toolbar button[aria-pressed=true]{background:#153b4b;border-color:#153b4b;color:#fff}.examples-toolbar button:focus-visible,.examples-actions a:focus-visible{outline:3px solid #3894a7;outline-offset:3px}.examples-meta{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:1rem}.examples-meta h3{font-family:Georgia,serif;font-size:1.7rem;font-weight:700}.examples-meta p:last-child{color:#586975}.examples-meta>a{color:#175f6d;font-weight:800;text-decoration:underline}.examples-device-frame{min-width:0;margin:0 auto;border:1px solid #c9d7df;border-radius:17px;overflow:hidden;background:white;box-shadow:0 27px 70px rgba(24,49,62,.15);transition:width .2s ease;max-width:100%;width:100%}.examples-device-frame[data-frame-device=mobile]{width:390px;max-width:100%}.examples-browser-bar{display:flex;align-items:center;justify-content:space-between;min-width:0;overflow:hidden;padding:.68rem 1rem;background:#eaf0f3;font-size:.72rem;color:#506775;gap:.5rem}#browser-address{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.browser-dots{flex-shrink:0;color:#b79c99;letter-spacing:.15em}.browser-demo-badge{flex-shrink:0;font-weight:800;letter-spacing:.08em;color:#315b65}#example-frame{width:100%;height:660px;border:0;display:block;background:#fff}.examples-device-frame[data-frame-device=mobile] #example-frame{height:720px}.examples-note{margin-top:1.35rem;color:#5d6e77;font-size:.88rem;line-height:1.6;max-width:72rem}.examples-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}.examples-actions a{padding:.85rem 1.1rem;border-radius:10px;background:#143d4b;color:#fff;font-weight:700;text-decoration:none}.examples-actions a+ a{background:#e3edf0;color:#17414e}.examples-shell .site-footer{background:#142b3a;color:white}.examples-shell .site-footer a{color:white}@media(max-width:650px){.examples-header{padding-block:3rem}.examples-workspace{padding-block:2rem}.examples-toolbar{align-items:start}.examples-toolbar>div{width:100%}.examples-toolbar button{flex:1}.examples-meta h3{font-size:1.3rem}.examples-browser-bar{padding:.6rem}.examples-actions a{width:100%;text-align:center}}@media(prefers-reduced-motion:reduce){.examples-device-frame{transition:none}}
/* Preserve virtual desktop viewport even when the viewer is on a phone. */
.examples-preview-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.65rem;margin-bottom:.7rem}
.examples-preview-tools p{font-size:.86rem;color:#526c76;margin:0}
.examples-preview-tools button{padding:.55rem .8rem;border:1px solid #8dabb6;border-radius:9px;background:#fff;color:#153e4a;font-weight:750;cursor:pointer}
.examples-preview-tools button:focus-visible{outline:3px solid #3894a7;outline-offset:3px}
.examples-device-frame[data-frame-device=desktop]{max-width:1100px}
.examples-device-frame[data-frame-device=mobile]{max-width:390px}
.examples-preview-stage{position:relative;overflow:hidden;min-width:0;max-width:100%;width:100%;background:#fff}
#example-frame{position:absolute;top:0;left:0;display:block;width:1100px;height:1000px;max-width:none;border:0;transform-origin:top left;transform:scale(var(--preview-scale,1));background:#fff}
.examples-device-frame[data-frame-device=mobile] #example-frame{height:760px}
.examples-preview-stage[data-zoom=true]{overflow:auto}
.examples-preview-stage[data-zoom=true] #example-frame{transform:none}
@media(max-width:650px){.examples-preview-tools button{width:100%}}

/* In mobile mode the iframe must never exceed the visible sample viewport. */
.examples-device-frame[data-frame-device=mobile] #example-frame{max-width:100%}
.examples-device-frame[data-frame-device=mobile] .examples-preview-stage{overflow-x:hidden}

/* Portrait-safe device preview: do not let parent min-content sizing enlarge the frame. */
.examples-shell .examples-workspace,.examples-shell .examples-workspace .container{min-width:0;max-width:100%;box-sizing:border-box}
.examples-shell .examples-workspace .container{width:100%}
.examples-device-frame[data-frame-device="mobile"]{box-sizing:border-box;width:min(390px,100%,calc(100vw - 3rem));max-width:100%;min-width:0}
.examples-device-frame[data-frame-device="mobile"] .examples-preview-stage{box-sizing:border-box;max-width:100%;width:100%;overflow:hidden}
.examples-device-frame[data-frame-device="mobile"] #example-frame{max-width:none;width:100%}
.examples-shell .examples-workspace{overflow-x:clip}

.examples-scope{padding:1.3rem 1.5rem;border:1px solid #d0dee2;background:#fff;border-radius:16px;margin:1rem 0 1.5rem}
.examples-scope-head{display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:.65rem;margin-bottom:.9rem}
.examples-scope-head h3{font-size:1.15rem;font-weight:800;color:#173d4e}
.examples-scope-head a{font-size:.88rem;font-weight:750;text-decoration:underline;color:#185968}
.examples-scope-columns{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.examples-scope-columns h4{font-size:.94rem;font-weight:800;color:#234b54;margin-bottom:.55rem}
.examples-scope-columns ul{list-style:disc;padding-left:1.2rem;margin:0}
.examples-scope-columns li{margin:.3rem 0;line-height:1.45;font-size:.9rem}
.examples-scope-note{font-size:.84rem;color:#5b7078;line-height:1.55;margin-top:1rem}
@media(max-width:650px){.examples-scope{padding:1.15rem}.examples-scope-columns{grid-template-columns:1fr;gap:1rem}}