#portal-showroom{width:min(1600px,96vw);max-width:none;height:92dvh;max-height:96dvh;margin:auto;padding:0;border:1px solid #d3d6c9;border-radius:12px;background:#efeee7;color:#283129;overflow:hidden;box-shadow:0 30px 100px #0004;font-family:Inter,Arial,sans-serif}#portal-showroom[open]{display:flex;flex-direction:column}#portal-showroom::backdrop{background:#17201bc4;backdrop-filter:blur(10px)}#portal-showroom .showroom-header{display:flex;align-items:center;gap:20px;padding:12px 20px;min-height:68px;border-bottom:1px solid #d8dbcf;flex-shrink:0}#showroom-title{font:400 18px/1.2 Inter,Arial,sans-serif;letter-spacing:-.03em;margin:0 auto 0 0;white-space:nowrap}#showroom-title:focus{outline:none}.showroom-controls,.showroom-window-actions,.showroom-group{display:flex;align-items:center;gap:4px}.showroom-controls{gap:12px}.showroom-group{padding:3px;border:1px solid #d9ddcf;border-radius:8px;background:#e5e7dd80}.showroom-window-actions{gap:5px}#portal-showroom .showroom-header button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:36px;margin:0;padding:0 12px;border:0;border-radius:5px;background:transparent;color:#55604c;font:400 12px/1 Inter,Arial,sans-serif;cursor:pointer;box-shadow:none;transition:background .15s,color .15s}#portal-showroom .showroom-header .showroom-icon{width:36px;height:36px;padding:0;flex:0 0 36px}#portal-showroom .showroom-header svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;margin:0}#portal-showroom .showroom-header button:hover{background:#d9dfd0;color:#283129}#portal-showroom .showroom-group button[aria-pressed=true]{background:#faf9f3;color:#2e3a28;box-shadow:0 1px 3px #24351a15}#portal-showroom .showroom-header button:active{background:#cfd8c4}#portal-showroom .showroom-header button:focus-visible{outline:1.5px solid #526744;outline-offset:3px}.showroom-divider{width:1px;height:22px;background:#d0d6c5;margin:0 2px}.showroom-header [data-tip]:after{content:attr(data-tip);position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);z-index:5;white-space:nowrap;background:#253027;color:#faf8ed;font-size:10px;line-height:1.4;padding:5px 8px;border-radius:4px;opacity:0;pointer-events:none}.showroom-header [data-tip]:hover:after,.showroom-header [data-tip]:focus-visible:after{opacity:1}.showroom-header #showroom-close:after{left:auto;right:0;transform:none}.showroom-body{flex:1;min-height:0;background:#1c241e}.showroom-body iframe{display:block;width:100%;height:100%;border:0}#portal-showroom.is-expanded{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.is-expanded .showroom-controls{display:none}.showroom-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.enter-portal{display:inline-flex;align-items:center;margin-top:16px;padding:8px 0;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font:inherit;font-size:14px;cursor:pointer}.enter-portal:focus-visible{outline:2px solid currentColor;outline-offset:4px}@media(max-width:700px){#portal-showroom .showroom-header{flex-wrap:wrap;gap:10px;padding:10px 12px}.showroom-controls{order:3;width:100%;justify-content:center;gap:10px}.showroom-window-actions{margin-left:auto}#showroom-title{font-size:16px}.is-expanded .showroom-header{flex-wrap:nowrap}}@media(max-width:560px){#portal-showroom{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}#portal-showroom .showroom-header button{min-width:34px;padding-inline:10px}#portal-showroom .showroom-header .showroom-icon{width:34px;flex-basis:34px}.showroom-controls{gap:8px}}@media(prefers-reduced-motion:reduce){#portal-showroom .showroom-header button{transition:none}}

/* A framed widescreen demo, with room to see the website around it. */
#portal-showroom{width:min(1180px,86vw,calc((100dvh - 180px)*16/9));height:auto;max-height:86dvh}#portal-showroom .showroom-header{min-height:60px;padding-block:8px}.showroom-body{flex:none;aspect-ratio:16/9;width:100%;height:auto}#portal-showroom::backdrop{background:#17201b73;backdrop-filter:blur(3px)}#portal-showroom.is-expanded{width:100vw;height:100dvh;max-height:100dvh}.is-expanded .showroom-body{aspect-ratio:auto;flex:1;min-height:0}#portal-showroom.pointer-mode .showroom-header button:focus{outline:none}@media(max-width:700px){#portal-showroom{width:94vw;height:84dvh;max-height:90dvh}.showroom-body{aspect-ratio:auto;flex:1;min-height:0}}@media(max-width:560px){#portal-showroom{width:96vw;height:90dvh;max-height:94dvh;border-radius:10px}#portal-showroom.is-expanded{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}}
#portal-showroom{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;height:fit-content}#portal-showroom.is-expanded{inset:0;transform:none;margin:0;width:100vw;height:100dvh}@media(max-width:700px){#portal-showroom{height:84dvh}}@media(max-width:560px){#portal-showroom{height:90dvh}}

/* Scale with the browser rather than stopping at a small fixed width. */
@media(min-width:701px){#portal-showroom{width:min(80vw,calc((100dvh - 150px)*16/9));max-height:90dvh}#portal-showroom.is-expanded{width:100vw;max-height:100dvh}}