/* The preview contains the actual multipage site, including its own navigation. */
.sample-identity{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:0 0 20px}.sample-identity strong{font-size:22px;letter-spacing:-.035em}.sample-identity p{font-size:12px;line-height:1.7;color:#637182;margin-top:6px}.sample-identity>span{font-size:9px;letter-spacing:.1em;color:#6f7d90;white-space:nowrap}
#sample-viewport{width:100%;height:600px;position:relative;overflow:hidden;background:#fff;isolation:isolate}
#sample-frame{width:100%;height:100%;border:0;display:block;transform-origin:top left;background:#fff}
.device-frame{max-width:1120px}.device-frame.is-mobile{max-width:402px}.sample-scroll-note{font-size:11px;line-height:1.7;color:#6c7989;margin-top:17px}.sample-open{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:13px;font-weight:600;color:#315dfa;white-space:nowrap}.sample-open svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.design-stage{padding-inline:25px;min-height:0;overflow:auto}.design-dialog .device-frame:not(.is-mobile){max-width:1280px}.design-dialog .device-frame.is-mobile{max-width:402px}.design-dialog .design-stage{min-height:0}.design-dialog .sample-scroll-note{margin-top:10px}
@media(max-width:1100px){.playground-toolbar{display:block}.template-tabs{overflow:auto;justify-content:flex-start;scrollbar-width:none}.template-tabs button{flex-shrink:0}.device-switch{margin-top:15px;margin-left:auto;width:max-content}.playground-actions{gap:18px;flex-wrap:wrap}}
@media(max-width:600px){.sample-identity{display:block;margin-bottom:17px}.sample-identity strong{font-size:20px}.sample-identity p{font-size:11px}.sample-identity>span{display:block;font-size:8px;margin-top:10px}.design-stage{padding-inline:10px}.device-frame.is-mobile{max-width:390px}.device-frame:not(.is-mobile){width:760px;min-width:760px}.design-stage:has(.device-frame:not(.is-mobile)){justify-content:flex-start}.sample-scroll-note{font-size:10px}.playground-actions{justify-content:flex-start;gap:10px 20px}.playground-actions .sample-open{font-size:12px}.design-dialog .device-frame.is-mobile{max-width:390px}.design-dialog .device-frame:not(.is-mobile){width:1000px;max-width:none}.studio-label{font-size:7px}}

.template-tabs{scrollbar-width:none;-ms-overflow-style:none}.template-tabs::-webkit-scrollbar{display:none;width:0;height:0}

/* Keep the live iframe stable when its logical device viewport changes. */
.device-frame:has(#sample-frame){transition:none}

/* A single, continuous browser shell around the actual page viewport. */
.device-frame#device-frame{box-sizing:border-box;padding:0;border:1px solid #c8cdd5;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 24px 60px -18px #263e5c36,0 3px 9px #263e5c0b;transition:none}
#device-frame .device-chrome{height:44px;box-sizing:border-box;padding:0 16px;display:grid;grid-template-columns:80px minmax(0,1fr) 80px;align-items:center;gap:20px;background:linear-gradient(#f6f7f9,#edeff2);border-bottom:1px solid #dce0e5}
#device-frame .window-controls{display:flex;align-items:center;gap:8px;font-size:0;letter-spacing:0}
#device-frame .window-controls i{display:block;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px #00000012}
#device-frame .window-controls i:nth-child(1){background:#ff5f57}
#device-frame .window-controls i:nth-child(2){background:#febc2e}
#device-frame .window-controls i:nth-child(3){background:#28c840}
#device-frame .browser-address{display:flex;justify-content:center;align-items:center;gap:7px;width:min(420px,100%);justify-self:center;min-width:0;height:27px;padding:0 14px;border-radius:7px;background:#fff9;box-shadow:0 1px 2px #28354809;color:#73808b;font-size:9px;letter-spacing:.06em}
#device-frame .browser-address>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#device-frame .browser-address svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.1;flex-shrink:0}
#device-frame .browser-tools{justify-self:end;display:flex;color:#8c969f}
#device-frame .browser-tools svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.1}
#sample-viewport{height:auto;aspect-ratio:1280 / 820;position:relative;overflow:hidden}
#sample-frame{position:absolute;left:0;top:0;margin:0;display:block;max-width:none}
.device-frame#device-frame.is-mobile{border:7px solid #222831;border-radius:32px;box-shadow:0 24px 54px -18px #263e5c45,0 0 0 1px #ffffff90;max-width:402px}
#device-frame.is-mobile .device-chrome{display:flex;justify-content:center;position:relative;height:25px;padding:0;background:#fff;border:0}
#device-frame.is-mobile .device-chrome:after{content:"";width:65px;height:7px;background:#222831;border-radius:8px}
#device-frame.is-mobile .device-chrome>span{display:none}
#device-frame.is-mobile #sample-viewport{aspect-ratio:390 / 780}
@media(max-width:600px){
.device-frame#device-frame.is-mobile{max-width:390px;border-width:6px;border-radius:29px}
#device-frame .device-chrome{height:39px;padding-inline:13px}
#device-frame.is-mobile .device-chrome{height:23px}
}