.web-showroom { color: #f3eee1; }
.web-showroom [hidden] { display: none !important; }
.web-showroom button { font: inherit; cursor: pointer; }
.web-showroom button:disabled { cursor: not-allowed; opacity: .55; }
.web-showroom-heading { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; margin: 1.5rem 0; }
.web-showroom-heading .showroom-kicker { flex-basis: 100%; margin: 0; }
.web-showroom-heading h2 { font-size: clamp(2rem, 4vw, 3.6rem); margin: 0; }
.web-showroom-heading .web-showroom-type { color: #cfb888; margin: 0; }
.web-showroom-stage {
    position: relative;
    min-height: min(720px, 70vw);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(218, 183, 117, .45);
    border-radius: 20px;
    background: radial-gradient(circle at 50% 42%, #31534e 0, #102724 65%, #0a1717 100%);
}
.web-showroom-picture, #web-showroom-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#web-showroom-canvas { touch-action: none; }
.web-showroom-picture { display: grid; place-items: center; color: #d1bb87; font-size: 2rem; text-align: center; }
.web-showroom-picture img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.web-showroom-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5, 18, 17, .8), transparent 26%, transparent 74%, rgba(5, 18, 17, .8)); }
.web-showroom-arrow { position: absolute; z-index: 3; top: 18px; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid #d3b676; border-radius: 50%; background: rgba(11, 35, 31, .88); color: #f4e7c7; }
.web-showroom-arrow svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.web-showroom-arrow:hover, .web-showroom-arrow:focus-visible { background: #bd9555; color: #112925; }
.web-showroom-arrow.previous { left: 20px; }
.web-showroom-arrow.next { right: 20px; }
.web-showroom-info, .web-showroom-actions { position: absolute; z-index: 2; bottom: 26px; width: min(23%, 310px); max-height: 68%; overflow: auto; padding: 1.2rem; border: 1px solid rgba(210, 186, 139, .35); border-radius: 15px; background: rgba(8, 32, 30, .91); backdrop-filter: blur(9px); }
.web-showroom-info { left: 26px; }
.web-showroom-actions { top: 90px; right: 26px; bottom: 70px; max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.web-showroom-actions > .web-showroom-scroll-shell,
.web-showroom-actions .web-showroom-panel-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.web-showroom-scroll-track { display: none; }
.web-showroom-panel-content:focus-visible { outline: 2px solid #d5b77b; outline-offset: -2px; }
.web-showroom-action-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 12px; }
.web-showroom-actions [data-reset] { flex: none; }
.web-showroom-info.is-collapsed { max-height: none; overflow: hidden; }
.web-showroom-actions.is-collapsed { top: auto; height: auto; }
.web-showroom-info.is-collapsed .web-showroom-count { display: none; }
.web-showroom-info.is-collapsed h3, .web-showroom-actions.is-collapsed h3 { margin: .2rem 0; }
.web-showroom-info h3, .web-showroom-actions h3 { padding-right: 2rem; }
.web-showroom-panel-toggle, .web-showroom-fullscreen { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #b99c67; border-radius: 9px; background: #153d37; color: #f6edd9; }
.web-showroom-panel-toggle { position: absolute; top: 12px; right: 12px; z-index: 1; }
.web-showroom-panel-toggle svg, .web-showroom-fullscreen svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.web-showroom-panel-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
.web-showroom-actions button.web-showroom-panel-toggle { width: 36px; height: 36px; margin: 0; padding: 0; text-align: center; }
.web-showroom-panel-toggle:hover, .web-showroom-fullscreen:hover { background: #b59151; color: #102b26; }
.web-showroom-fullscreen { position: absolute; z-index: 5; right: 18px; bottom: 18px; width: 42px; height: 42px; background: rgba(11, 35, 31, .95); }
.web-showroom-info h3, .web-showroom-actions h3 { margin: .35rem 0 .7rem; color: #e6ca90; font-size: 1.35rem; }
.web-showroom-info p, .web-showroom-actions p, .web-showroom-info li { font-size: .92rem; line-height: 1.5; }
.web-showroom-info ul { padding-left: 1.2rem; margin: .5rem 0 0; }
.web-showroom-info strong, .web-showroom-count { color: #d9bd83; }
.web-showroom-actions button, .web-showroom-launch button, .web-showroom-categories button {
    border: 1px solid #b99c67; border-radius: 9px; padding: .72rem .9rem;
    background: #153d37; color: #f6edd9;
}
.web-showroom-actions button { display: block; width: 100%; text-align: left; margin-top: .6rem; }
.web-showroom-actions button:hover:not(:disabled), .web-showroom-categories button:hover, .web-showroom-categories button.active { background: #b59151; color: #102b26; }
.web-showroom-control { padding: .7rem 0; border-top: 1px solid rgba(210, 186, 139, .22); }
.web-showroom-control label { display: block; color: #f3eee1; font-size: .9rem; font-weight: 600; }
.web-showroom-control select, .web-showroom-control input[type="range"] { display: block; width: 100%; margin-top: .45rem; }
.web-showroom-control select { padding: .45rem; border: 1px solid #b99c67; border-radius: 7px; background: #153d37; color: #f6edd9; font: inherit; }
.web-showroom-control select:disabled, .web-showroom-control input:disabled { opacity: .55; }
.web-showroom-control output { color: #e6ca90; white-space: nowrap; }
.web-showroom-control input[type="range"] { accent-color: #d7b475; cursor: pointer; }
.web-showroom-control button { margin-top: .5rem; }
.web-showroom-launch { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(360px, 55%); text-align: center; }
.web-showroom-launch button { padding: .95rem 1.5rem; font-weight: 700; box-shadow: 0 12px 30px #061410; }
.web-showroom-launch p { border-radius: 12px; padding: 1rem; background: rgba(8, 30, 29, .94); }
.web-showroom-hint { min-height: 1.5rem; color: #bda977; margin: .6rem 0 1.7rem; text-align: center; }
.web-showroom-categories { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }
.web-showroom-categories > div { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem; border: 1px solid rgba(218, 183, 117, .3); border-radius: 12px; }
.web-showroom-categories span { color: #d4b77f; margin: 0 .4rem; }
.web-showroom-concepts { border-top: 1px solid rgba(218, 183, 117, .3); padding-top: 2rem; }
.web-showroom-concepts > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.web-showroom-concepts .showroom-kicker { flex-basis: 100%; margin: 0; }
.web-showroom-concepts h3 { font-size: 1.8rem; margin: .2rem 0; }
.web-showroom-concepts > div:first-child > p:not(.showroom-kicker) { flex: 1 1 280px; margin: .2rem 0; }
.web-showroom-concept-toggle { margin-left: auto; border: 1px solid #b99c67; border-radius: 9px; padding: .65rem .85rem; background: #153d37; color: #f6edd9; }
.web-showroom-concept-toggle:hover { background: #b59151; color: #102b26; }
.web-showroom-concept-empty { margin: 1.25rem 0; color: #cfb888; }
.web-showroom-concept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.web-showroom-concept-grid button { overflow: hidden; text-align: left; border: 1px solid rgba(218, 183, 117, .35); border-radius: 12px; padding: 0; background: #15322e; color: #f3eee1; }
.web-showroom-concept-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.web-showroom-concept-grid span { display: block; padding: .7rem; font-size: .85rem; }
.web-showroom-concept-grid button:hover { border-color: #d5b77b; transform: translateY(-2px); }
@media (max-width: 900px) {
    .web-showroom-page > header { position: relative; }
    .web-showroom-stage { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; padding-top: min(65vw, 440px); padding-bottom: 58px; overflow: visible; }
    .web-showroom-picture, #web-showroom-canvas { bottom: auto; height: min(65vw, 440px); border-radius: 20px 20px 0 0; }
    .web-showroom-stage::after { height: min(65vw, 440px); bottom: auto; }
    .web-showroom-arrow { top: 12px; }
    .web-showroom-info, .web-showroom-actions { position: relative; left: auto; right: auto; bottom: auto; width: auto; max-height: none; border-radius: 0; padding: 1rem; }
    .web-showroom-actions { top: auto; height: auto; }
    .web-showroom-actions > .web-showroom-scroll-shell,
    .web-showroom-actions .web-showroom-panel-content,
    .web-showroom-action-list { flex: none; overflow: visible; }
    .web-showroom-action-list { padding-right: 0; }
    .web-showroom-info { border-right: 0; border-bottom-left-radius: 20px; }
    .web-showroom-actions { border-bottom-right-radius: 20px; }
    .web-showroom-launch { top: min(32vw, 220px); width: 68%; }
}
@media (max-width: 600px) {
    .web-showroom-stage { display: block; padding-top: min(74vw, 360px); }
    .web-showroom-picture, #web-showroom-canvas, .web-showroom-stage::after { height: min(74vw, 360px); }
    .web-showroom-info, .web-showroom-actions { border: 0; border-top: 1px solid rgba(218, 183, 117, .25); border-radius: 0; }
    .web-showroom-actions { border-radius: 0 0 20px 20px; }
    .web-showroom-launch { top: min(37vw, 180px); width: 76%; }
    .web-showroom-arrow { width: 45px; height: 45px; }
    .web-showroom-action-list { max-height: min(60dvh, 500px); overflow-y: auto; padding-right: 12px; }
}
.web-showroom-stage:fullscreen, .web-showroom-stage.web-showroom-fullscreen-fallback {
    position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100dvh;
    min-height: 0; padding: 0; display: block; overflow: hidden; border: 0; border-radius: 0;
}
.web-showroom-stage:fullscreen .web-showroom-picture,
.web-showroom-stage:fullscreen #web-showroom-canvas,
.web-showroom-stage:fullscreen::after,
.web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-picture,
.web-showroom-stage.web-showroom-fullscreen-fallback #web-showroom-canvas,
.web-showroom-stage.web-showroom-fullscreen-fallback::after { inset: 0; width: 100%; height: 100%; border-radius: 0; }
.web-showroom-stage:fullscreen .web-showroom-info,
.web-showroom-stage:fullscreen .web-showroom-actions,
.web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-info,
.web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-actions { position: absolute; width: min(23%, 310px); border-radius: 15px; }
.web-showroom-stage:fullscreen .web-showroom-actions:not(.is-collapsed),
.web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-actions:not(.is-collapsed) { top: 90px; bottom: 70px; height: auto; }
.web-showroom-stage:fullscreen .web-showroom-info,
.web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-info { left: 26px; bottom: 26px; }
.web-showroom-stage:fullscreen .web-showroom-actions,
.web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-actions { right: 26px; bottom: 70px; }
html.web-showroom-fullscreen-open, html.web-showroom-fullscreen-open body { overflow: hidden; }
@media (max-width: 600px) {
    .web-showroom-stage:fullscreen,
    .web-showroom-stage.web-showroom-fullscreen-fallback {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding: calc(min(37vw, 180px) + 68px) 12px 72px;
    }
    .web-showroom-stage:fullscreen .web-showroom-info,
    .web-showroom-stage:fullscreen .web-showroom-actions,
    .web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-info,
    .web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-actions {
        position: relative;
        inset: auto;
        box-sizing: border-box;
        flex: 0 1 auto;
        min-height: 0;
        width: min(100%, 320px);
        height: auto;
        border-radius: 15px;
        overflow: auto;
    }
    .web-showroom-stage:fullscreen .web-showroom-info,
    .web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-info { max-height: 30dvh; }
    .web-showroom-stage:fullscreen .web-showroom-actions,
    .web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-actions { max-height: 42dvh; padding-right: calc(1rem + 12px); }
    .web-showroom-stage:fullscreen .web-showroom-action-list,
    .web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-action-list { max-height: none; overflow: visible; padding-right: 0; }
    .web-showroom-stage:fullscreen .web-showroom-actions:not(.is-collapsed),
    .web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-actions:not(.is-collapsed) {
        top: auto;
        bottom: auto;
    }
}
@media (max-width: 600px) and (max-height: 700px) {
    .web-showroom-info:not(.is-collapsed),
    .web-showroom-actions:not(.is-collapsed) {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .web-showroom-stage:not(:fullscreen):not(.web-showroom-fullscreen-fallback) .web-showroom-info:not(.is-collapsed) { max-height: 35dvh; }
    .web-showroom-stage:not(:fullscreen):not(.web-showroom-fullscreen-fallback) .web-showroom-actions:not(.is-collapsed) { max-height: 55dvh; }
    .web-showroom-info:not(.is-collapsed) .web-showroom-scroll-shell,
    .web-showroom-actions:not(.is-collapsed) .web-showroom-scroll-shell {
        display: flex;
        flex-direction: row;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    .web-showroom-info:not(.is-collapsed) .web-showroom-panel-content,
    .web-showroom-actions:not(.is-collapsed) .web-showroom-panel-content {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: none;
    }
    .web-showroom-info .web-showroom-panel-content::-webkit-scrollbar,
    .web-showroom-actions .web-showroom-panel-content::-webkit-scrollbar { display: none; }
    .web-showroom-actions .web-showroom-action-list { max-height: none; overflow: visible; padding-right: 0; }
    .web-showroom-scroll-track:not([hidden]) {
        display: block;
        position: relative;
        flex: 0 0 7px;
        align-self: stretch;
        margin-left: 7px;
        border-radius: 7px;
        background: #35514a;
    }
    .web-showroom-scroll-thumb {
        position: absolute;
        left: 0;
        width: 7px;
        border-radius: 7px;
        background: #d5b77b;
    }
    .web-showroom-stage:fullscreen .web-showroom-actions:not(.is-collapsed),
    .web-showroom-stage.web-showroom-fullscreen-fallback .web-showroom-actions:not(.is-collapsed) { padding-right: 1rem; }
}