/* Official hero styles isolated from the unchanged P3 lower room. */
#official-top,#official-top *{all:revert;box-sizing:border-box}
#official-top *::before,#official-top *::after{all:revert;box-sizing:border-box}
@font-face { font-family: Playfair; src: url("./assets/playfair-display-latin.woff2"); }
@font-face { font-family: Playfair; src: url("./assets/playfair-display-italic-latin.woff2"); font-style: italic; }
@font-face { font-family: DM; src: url("./assets/dm-sans-latin.woff2"); }
#official-top *{box-sizing: border-box;}

#official-top{font-family:Playfair, Georgia, serif;color:rgb(39, 36, 30)}
#official-top button,#official-top a{-webkit-tap-highlight-color: transparent;}
#official-top button{font: inherit; color: inherit; cursor: pointer;}
#official-top a{color: inherit; text-decoration: none;}
#official-top button{border: 0px; background: none;}
#official-top button:focus-visible,#official-top a:focus-visible{outline: rgb(132, 97, 40) solid 3px; outline-offset: 4px;}

#official-top h1,#official-top p{margin: 0px;}
#official-top h1{font-weight: 400;}

#official-top button,#official-top a{touch-action: manipulation;}





#official-top .header{position: absolute; z-index: 5; top: 3.5cqw; left: 4.6%; right: 4.6%; display: flex; justify-content: space-between; align-items: flex-start;}
#official-top .languages{display: flex; gap: 8px; font: 12px DM; align-items: center; padding-top: 1cqw;}
#official-top .languages button{padding: 8px 0px; min-width: 24px;}
#official-top .languages button[aria-pressed="true"]{border-bottom: 1px solid;}
#official-top .brand{display: flex; align-items: center; flex-direction: column; gap: 0.7cqw;}
#official-top .brand > span:not(.emblem){letter-spacing: 0.3em; font-size: clamp(17px, 3.3cqw, 36px);}
#official-top .brand .emblem{font-size: clamp(16px, 3cqw, 28px); line-height: 1;}
#official-top .brand small{font: 500 clamp(5px, 0.7cqw, 8px) DM; letter-spacing: 0.3em;}
#official-top .menu-toggle{width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 8px;}
#official-top .menu-toggle span{height: 2px; background: currentcolor; width: 100%;}
#official-top .menu{position: absolute; z-index: 10; right: 4%; top: 11cqw; padding: 25px; background: rgba(246, 240, 230, 0.96); box-shadow: rgba(56, 36, 15, 0.2) 0px 10px 40px; min-width: 210px; font: 16px DM;}
#official-top .menu a{display: block; padding: 12px;}
#official-top .hero-caption{position: absolute; top: 15cqw; left: 6%; width: 88%; text-align: center;}
#official-top .hero-caption h1{font-size: clamp(17px, 3cqw, 30px); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.5cqw;}
#official-top .hero-caption p{font-size: clamp(11px, 1.85cqw, 20px); line-height: 1.4;}
#official-top .hero-caption #hero-detail{font-style: italic; color: rgb(87, 71, 52); font-size: clamp(10px, 1.65cqw, 18px);}
#official-top .mirror{position: absolute; left: 19%; top: 35.95cqw; width: 60.5%; height: 38.8cqw; clip-path: ellipse(50% 49.3% at 50% 50%); isolation: isolate;}
#official-top .mirror img{position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 0.4s; mask-size: cover; mask-position: center center; filter: sepia(0.05) saturate(0.9);}
#official-top .mirror img.active{opacity: 1;}
#official-top .carousel-controls{position: absolute; top: 78cqw; left: 20%; width: 60%; display: flex; justify-content: center; align-items: center; gap: 1cqw;}
#official-top .carousel-controls button{min-width: 32px; height: 40px; font-family: DM; font-size: 20px;}
#official-top .dots{display: flex; align-items: center; gap: 0px;}
#official-top .dots button{min-width: 20px; width: 3cqw; padding: 0px; position: relative;}
#official-top .dots button::after{content: ""; display: block; width: 4px; height: 4px; background: rgba(88, 68, 45, 0.333); border-radius: 50%; margin: auto;}
#official-top .dots button[aria-current="true"]::after{background: rgb(72, 54, 33); box-shadow: rgba(72, 54, 33, 0.133) 0px 0px 0px 3px;}










































@media (min-width: 1200px){#official-top{font-family:Playfair, Georgia, serif;color:rgb(39, 36, 30)}
}
@media (max-width: 480px){#official-top .header{top: 3cqw;}
#official-top .languages{gap: 5px; font-size: 11px;}
#official-top .hero-caption{top: 16cqw;}
#official-top .hero-caption h1{font-size: 17px;}
#official-top .hero-caption p{font-size: 11px;}
#official-top .hero-caption #hero-detail{font-size: 10px;}
#official-top .carousel-controls{top: 77cqw; left: 12%; width: 76%;}
#official-top .carousel-controls button{height: 36px;}













}

#official-top .mirror img{left: -5%;}




@media (max-width: 480px){


#official-top .hero-caption{top: 16cqw;}
#official-top .hero-caption #hero-detail{font-size: 9.5px;}}


@media (max-width: 480px){

#official-top .hero-caption{top: 75px;}
#official-top .hero-caption h1{font-size: 18px;}
#official-top .hero-caption p{font-size: 12px; line-height: 1.35;}
#official-top .hero-caption #hero-detail{font-size: 11px;}
#official-top .mirror,#official-top .carousel-controls{transform: translateY(80px);}}
@media (prefers-reduced-motion: reduce){
#official-top .mirror img{transition: none;}}


#official-top .hero-caption{top: 17cqw; left: 12%; width: 76%; z-index: 4;}
#official-top .hero-caption summary{display: inline-flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; min-height: 36px; padding: 5px 15px; border-bottom: 1px solid rgba(115, 90, 56, 0.23);}
#official-top .hero-caption summary::-webkit-details-marker{display: none;}
#official-top .hero-caption summary::after{content: "+"; font: 13px DM; color: rgb(112, 86, 56);}

#official-top .hero-caption h1{font-size: clamp(13px, 2.1cqw, 23px); letter-spacing: 0.17em; margin: 0px;}
#official-top .intention-note{position: absolute; left: 50%; transform: translateX(-50%); width: min(92vw, 410px); margin-top: 8px; padding: 18px 22px; background: rgba(239, 229, 211, 0.96); box-shadow: rgba(57, 40, 20, 0.145) 0px 6px 22px; border: 1px solid rgba(188, 166, 129, 0.4);}
#official-top .hero-caption .intention-note p{font-size: 15px; line-height: 1.5;}
#official-top .hero-caption .intention-note #hero-detail{font-size: 13px; margin-top: 6px;}
#official-top .mirror img{width: 114%; height: 100%; left: -27%; object-fit: fill; object-position: 0px 0px; mask-size: 100% 100%; mask-position: 0px 0px; mask-repeat: no-repeat; filter: sepia(0.025) saturate(0.98);}
#official-top .carousel-controls{gap: 0.3cqw;}
#official-top .carousel-controls button{font-size: 16px; color: rgb(87, 67, 42);}
#official-top .dots button::after{width: 3px; height: 3px;}
#official-top .dots button[aria-current="true"]::after{box-shadow: rgba(72, 54, 33, 0.133) 0px 0px 0px 2px;}












































@media (max-width: 480px){

#official-top .mirror,#official-top .carousel-controls{transform: none;}
#official-top .hero-caption{top: 21cqw;}
#official-top .hero-caption h1{font-size: 13px;}
#official-top .hero-caption summary{min-height: 24px; padding: 2px 8px;}
#official-top .hero-caption .intention-note p{font-size: 14px;}
#official-top .hero-caption .intention-note #hero-detail{font-size: 12px;}














}
@media (max-width: 360px){



#official-top .header .brand small{font-size: 4.5px;}}


@media (prefers-reduced-motion: reduce){
}
#official-top{--brass-ink: #483922; --brass-edge: #9c8359; --brass-face: linear-gradient(112deg,#d2bd91,#e6d6b4 34%,#c6ad7c 77%,#d9c49b);}
#official-top .header{color: rgb(67, 53, 33); text-shadow: rgba(247, 229, 195, 0.467) 0px 1px 0px;}
#official-top .languages{gap: 4px; background: var(--brass-face); border: 1px solid rgba(146, 118, 77, 0.533); border-radius: 2px; padding: 1px 7px; box-shadow: rgba(237, 219, 184, 0.2) 0px 0px 0px 2px inset, rgba(53, 35, 14, 0.15) 1px 2px 3px;}
#official-top .languages button{font-size: 10px; min-width: 22px; padding: 7px 0px;}
#official-top .languages span{font-size: 9px; color: rgb(118, 99, 69);}
#official-top .menu-toggle{width: 34px; height: 34px; border: 1px solid rgba(145, 117, 76, 0.533); border-radius: 2px; background: var(--brass-face); box-shadow: rgba(237, 219, 184, 0.2) 0px 0px 0px 2px inset, rgba(53, 35, 14, 0.15) 1px 2px 3px; gap: 5px; padding: 8px;}
#official-top .menu-toggle span{height: 1px;}
#official-top .menu{background: rgb(238, 226, 201); border: 1px solid rgb(182, 154, 106); box-shadow: rgb(224, 206, 170) 0px 0px 0px 5px inset, rgba(57, 38, 16, 0.267) 3px 5px 15px; font: 15px Playfair; transform: rotate(0.5deg);}
#official-top .menu a{border-bottom: 1px solid rgba(187, 164, 126, 0.333);}
#official-top .menu a:last-child{border: 0px;}
#official-top .hero-caption{top: 20.5cqw; left: 15%; width: 70%;}
#official-top .hero-caption summary{position: relative; min-height: 29px; padding: 5px 24px; background: var(--brass-face); border: 1px solid rgb(153, 128, 90); border-radius: 50% / 18%; box-shadow: rgba(243, 227, 192, 0.2) 0px 0px 0px 2px inset, rgba(56, 40, 18, 0.19) 0px 2px 3px; gap: 8px; color: var(--brass-ink); text-shadow: rgb(242, 223, 185) 0px 1px;}
#official-top .hero-caption summary::before{content: ""; position: absolute; left: 8px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: rgb(110, 87, 54); box-shadow: rgb(245, 229, 198) 0px 1px;}
#official-top .hero-caption summary::after{font-size: 10px; color: rgb(119, 96, 61);}
#official-top .hero-caption h1{font-size: clamp(10px, 1.7cqw, 19px); letter-spacing: 0.12em;}
#official-top .intention-note{background: rgb(239, 228, 207); border: 1px solid rgb(187, 163, 123); box-shadow: rgba(57, 40, 20, 0.2) 2px 5px 12px; transform: translateX(-50%) rotate(-0.5deg); padding: 20px 25px;}
#official-top .intention-note::before{content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 4px; background: rgb(135, 105, 66); border-radius: 50%; box-shadow: rgb(255, 240, 202) 0px 1px;}
#official-top .carousel-controls{left: 22%; width: 56%; top: 78.6cqw; gap: 0px; min-height: 29px; border: 1px solid rgba(143, 116, 76, 0.533); border-radius: 30px; background: var(--brass-face); box-shadow: rgba(236, 219, 185, 0.267) 0px 0px 0px 2px inset, rgba(57, 39, 17, 0.133) 0px 2px 3px;}
#official-top .carousel-controls button{height: 30px; min-width: 28px; font-size: 13px; color: rgb(97, 73, 44); padding: 0px;}
#official-top .dots{flex: 1 1 0%; justify-content: space-evenly;}
#official-top .dots button{min-width: 11px; width: auto; flex: 1 1 0%;}
#official-top .dots button::after{width: 3px; height: 3px; background: rgb(153, 129, 93); box-shadow: rgb(245, 228, 195) 0px 1px;}
#official-top .dots button[aria-current="true"]::after{background: rgb(73, 53, 30); box-shadow: rgb(127, 100, 56) 0px 0px 0px 1px;}



















































@media (max-width: 480px){#official-top .hero-caption{top: 20.5cqw;}
#official-top .hero-caption summary{padding: 3px 19px; min-height: 25px;}
#official-top .hero-caption h1{font-size: 10px;}
#official-top .carousel-controls{left: 20%; width: 60%; top: 78.8cqw; min-height: 26px;}
#official-top .carousel-controls button{height: 26px; min-width: 23px; font-size: 12px;}
#official-top .dots button{min-width: 9px;}












}
@media (prefers-reduced-motion: reduce){}
@media (max-width: 480px){
}
#official-top{--brass-ink: #49463e; --brass-edge: #9b9487; --brass-face: linear-gradient(112deg,#d7d1c5,#e4dfd3 42%,#d0c9bc);}
#official-top .header{color: rgb(73, 70, 62); text-shadow: none;}
#official-top .languages,#official-top .menu-toggle{border-color: rgb(162, 154, 138); box-shadow: rgba(238, 233, 223, 0.267) 0px 0px 0px 2px inset, rgba(53, 46, 35, 0.15) 1px 2px 3px;}
#official-top .languages span{color: rgb(111, 106, 96);}
#official-top .hero-caption summary{border-color: rgb(166, 157, 141); text-shadow: none; box-shadow: rgba(238, 233, 223, 0.333) 0px 0px 0px 2px inset, rgba(56, 47, 37, 0.19) 0px 2px 3px;}
#official-top .hero-caption summary::before{background: rgb(107, 103, 95); box-shadow: rgb(232, 227, 217) 0px 1px;}
#official-top .hero-caption summary::after{color: rgb(109, 103, 91);}
#official-top .carousel-controls{border-color: rgb(158, 150, 134); box-shadow: rgba(238, 233, 223, 0.267) 0px 0px 0px 2px inset, rgba(57, 47, 34, 0.133) 0px 2px 3px;}
#official-top .carousel-controls button{color: rgb(87, 83, 73);}
#official-top .dots button::after{background: rgb(153, 145, 132); box-shadow: rgb(230, 224, 212) 0px 1px;}
#official-top .dots button[aria-current="true"]::after{background: rgb(86, 80, 68); box-shadow: rgb(119, 112, 97) 0px 0px 0px 1px;}










#official-top .menu,#official-top .intention-note{background: rgb(231, 225, 213); border-color: rgb(174, 164, 148); box-shadow: rgba(53, 44, 33, 0.2) 2px 5px 12px;}
#official-top .menu a{border-bottom-color: rgba(179, 170, 155, 0.333);}





















@media (prefers-reduced-motion: reduce){}







@media (prefers-reduced-motion: reduce){}
#official-top{--wood-face: url('./assets/ui-wood.webp'); --paper-face: url('./assets/ui-cotton.webp'); --wood-ink: #241d15; --brass-face: var(--wood-face);}
#official-top .languages,#official-top .menu-toggle,#official-top .hero-caption summary,#official-top .carousel-controls{background: var(--wood-face) center/100% 100% no-repeat; border: 0px; border-radius: 3px; box-shadow: none; filter: drop-shadow(rgba(51, 36, 23, 0.333) 1px 2px 2px); color: var(--wood-ink); text-shadow: rgba(197, 176, 146, 0.2) 0px 1px;}
#official-top .languages{padding: 2px 9px;}
#official-top .languages span,#official-top .hero-caption summary::after{color: rgb(70, 55, 41);}
#official-top .menu-toggle span{background: rgb(48, 37, 25);}
#official-top .hero-caption summary{border-radius: 3px; padding-left: 21px; padding-right: 17px;}
#official-top .hero-caption summary::after{color: rgb(55, 42, 29);}
#official-top .hero-caption summary::before{width: clamp(3px, 0.65cqw, 6px); height: clamp(3px, 0.65cqw, 6px); background: radial-gradient(circle at 32% 24%, rgb(141, 135, 122) 0px, rgb(73, 71, 62) 28%, rgb(41, 40, 31) 65%, rgb(21, 20, 15) 100%); border-radius: 50%; box-shadow: rgba(23, 20, 13, 0.733) 0.5px 1px 1px; transform: translateY(-50%);}


#official-top .carousel-controls button{color: rgb(48, 36, 25);}
#official-top .dots button::after{background: rgb(118, 96, 68); box-shadow: rgba(189, 161, 124, 0.333) 0px 1px;}
#official-top .dots button[aria-current="true"]::after{background: rgb(35, 25, 14); box-shadow: rgba(75, 56, 34, 0.533) 0px 0px 0px 1px;}
















@media (max-width: 480px){
#official-top .languages{padding: 1px 8px;}}
#official-top .languages,#official-top .menu-toggle,#official-top .hero-caption summary,#official-top .carousel-controls{background-size: 108% 135%; border-radius: 5px; box-shadow: rgba(193, 162, 122, 0.4) 0px 1px 1px inset, rgba(50, 38, 25, 0.6) 0px -1px 1px inset;}















@media (pointer: coarse){
}
@media (prefers-reduced-motion: reduce){}
#official-top{--mirror-metal: linear-gradient(110deg,#281c12,#56402a 24%,#37261a 53%,#21180f 88%,#493321); --frame-face: linear-gradient(112deg,#352316,#51351f 24%,#2c1c12 72%,#402b19); --aged-edge: #76563a; --fitting-ink: #e0cfaf;}
#official-top .languages,#official-top .menu-toggle,#official-top .hero-caption summary,#official-top .carousel-controls{background: var(--mirror-metal); color: var(--fitting-ink); border: 1px solid rgb(41, 26, 16); box-shadow: rgba(192, 154, 102, 0.5) 0px 1px 1px inset, rgb(116, 81, 54) 0px 0px 0px 2px inset, rgb(29, 20, 13) 0px 0px 0px 3px inset, rgba(143, 105, 64, 0.25) 0px 0px 0px 4px inset, rgba(16, 11, 8, 0.667) 0px -3px 3px inset, rgba(32, 20, 11, 0.333) 1px 3px 4px; filter: none; text-shadow: rgb(19, 12, 8) 0px 1px 1px; border-radius: 6px;}
#official-top .languages{padding: 3px 12px;}
#official-top .languages span{color: rgb(183, 158, 124);}
#official-top .languages button{color: rgb(223, 206, 177);}
#official-top .languages button[aria-pressed="true"]{border-bottom-color: rgb(189, 160, 120);}
#official-top .menu-toggle{padding: 9px;}
#official-top .menu-toggle span{background: rgb(207, 184, 149); box-shadow: rgb(20, 14, 8) 0px 1px;}
#official-top .hero-caption summary{border-radius: 50% / 18%; padding: 6px 25px; min-height: 32px;}
#official-top .hero-caption summary::before{left: 10px; width: 3px; height: 3px; background: rgb(172, 133, 84); box-shadow: rgb(14, 9, 6) 0px 1px; transform: translateY(-50%);}
#official-top .hero-caption summary::after{color: rgb(197, 172, 133);}
#official-top .hero-caption h1{color: rgb(225, 206, 176);}
#official-top .carousel-controls{position: absolute; left: 22%; width: 56%; padding: 3px 9px; border-radius: 22px; min-height: 32px;}
#official-top .carousel-controls::before,#official-top .carousel-controls::after{content: ""; position: absolute; left: 17px; right: 17px; height: 2px; background: radial-gradient(circle, rgb(150, 113, 74) 0px, rgb(150, 113, 74) 1px, transparent 1.2px) 0px 0px / 5px 2px; opacity: 0.65; pointer-events: none;}
#official-top .carousel-controls::before{top: 3px;}
#official-top .carousel-controls::after{bottom: 3px;}
#official-top .carousel-controls button{color: rgb(212, 189, 152);}
#official-top .dots button::after{background: rgb(145, 117, 84); box-shadow: rgb(18, 13, 9) 0px 1px;}
#official-top .dots button[aria-current="true"]::after{background: rgb(239, 218, 179); box-shadow: rgb(160, 128, 82) 0px 0px 0px 1px, rgba(233, 210, 168, 0.267) 0px 0px 4px;}
#official-top .carousel-controls button:hover{color: rgb(255, 240, 210);}
#official-top .menu{background: linear-gradient(110deg, rgb(238, 224, 199), rgb(221, 203, 176)); border: 4px double rgb(98, 69, 44); box-shadow: rgba(38, 23, 13, 0.333) 0px 3px 10px;}
#official-top .intention-note{border: 4px double rgb(113, 82, 52); background: rgb(232, 219, 197); box-shadow: rgba(41, 25, 14, 0.267) 1px 4px 12px;}























@media (max-width: 480px){#official-top .languages{padding: 2px 10px;}
#official-top .hero-caption summary{padding: 4px 22px; min-height: 27px;}
#official-top .carousel-controls{left: 20%; width: 60%; min-height: 29px; padding: 2px 7px;}






}
#official-top .languages,#official-top .menu-toggle,#official-top .hero-caption summary,#official-top .carousel-controls{isolation: isolate; background: none; border: 0px; box-shadow: none; border-radius: 4px; filter: drop-shadow(rgba(26, 16, 11, 0.4) 1px 2px 2px); color: rgb(226, 207, 173); text-shadow: rgb(17, 10, 5) 0px 1px 2px;}
#official-top .languages::before,#official-top .menu-toggle::before,#official-top .hero-caption summary::before,#official-top .carousel-controls::before{content: ""; display: block; position: absolute; inset: 0px; width: auto; height: auto; border-style: solid; border-color: transparent; border-width: 8px 18px; border-image: url("./assets/ui-mirror-bronze-v9.webp") 24% 14% fill / clamp(6px, 0.9cqw, 10px) clamp(12px, 2cqw, 22px) / 0 stretch; border-radius: 0px; background: none; box-shadow: none; transform: none; opacity: 1; pointer-events: none; z-index: -1;}
#official-top .languages{position: relative; padding: 5px 18px; gap: 5px;}
#official-top .languages span{color: rgb(171, 146, 107);}
#official-top .languages button{color: rgb(226, 207, 173);}
#official-top .menu-toggle{position: relative; width: 38px; height: 38px; padding: 12px; gap: 4px;}
#official-top .menu-toggle::before{border-image-width: 8px 10px;}
#official-top .menu-toggle span{background: rgb(212, 188, 148); box-shadow: rgb(20, 12, 7) 0px 1px;}
#official-top .hero-caption summary{padding: 9px 30px; min-height: 39px; border-radius: 0px;}
#official-top .hero-caption summary::after{color: rgb(204, 178, 138); font-size: 11px;}
#official-top .hero-caption h1{font-size: clamp(11px, 1.7cqw, 19px); color: rgb(228, 207, 170); letter-spacing: 0.12em;}
#official-top .carousel-controls{padding: 7px 23px; min-height: 42px; border-radius: 0px;}
#official-top .carousel-controls::after{display: none;}
#official-top .carousel-controls button{color: rgb(214, 188, 148); height: 28px; min-width: 25px;}
#official-top .dots button::after{background: rgb(146, 118, 80); box-shadow: rgb(27, 16, 8) 0px 1px;}
#official-top .dots button[aria-current="true"]::after{background: rgb(234, 210, 167); box-shadow: rgb(114, 84, 56) 0px 0px 0px 1px;}
#official-top .languages:hover,#official-top .menu-toggle:hover,#official-top .hero-caption summary:hover{filter: drop-shadow(rgba(26, 16, 11, 0.4) 1px 2px 2px) brightness(1.06);}
#official-top .carousel-controls button:hover{color: rgb(255, 241, 213);}
@media (max-width: 480px){#official-top .languages{padding: 3px 14px; gap: 3px;}
#official-top .languages button{font-size: 9px; min-width: 18px;}
#official-top .menu-toggle{width: 33px; height: 33px; padding: 10px;}
#official-top .hero-caption summary{padding: 7px 23px; min-height: 31px;}
#official-top .hero-caption h1{font-size: 10px;}
#official-top .hero-caption summary::after{font-size: 9px;}
#official-top .carousel-controls{padding: 4px 17px; min-height: 32px;}
#official-top .carousel-controls button{height: 24px; min-width: 20px; font-size: 12px;}
#official-top .dots button{min-width: 8px;}}
@media (max-width: 360px){#official-top .carousel-controls{top: 78.2cqw; min-height: 27px; padding-top: 3px; padding-bottom: 3px;}
#official-top .carousel-controls button{height: 20px;}}









@media (max-width: 480px){
}











@media (max-width: 480px){

}






@media (prefers-reduced-motion: reduce){}





@media (max-width: 480px){
}


#official-top{position:absolute;inset:0;pointer-events:none;z-index:5}
#official-top .header,#official-top .menu,#official-top .hero>*{pointer-events:auto}
#official-top [hidden]{display:none!important}
#official-top .hero-caption[open] summary::after{content:'−'}
#official-top .mirror img{transition:opacity .4s ease!important}
@media(prefers-reduced-motion:reduce){#official-top .mirror img{transition:none!important}}
/* Insert one wall strip for the official control bar; preserve all P3 lower
   section geometry and interactions as a single translated group. */
.room{aspect-ratio:100/232.5}
.room.drawer-open{aspect-ratio:100/276}
.hero-room-art{position:absolute;inset:0;pointer-events:none;clip-path:inset(0 0 calc(100% - 92.5cqw) 0)}
.hero-room-art img{display:block;width:100%;height:auto}
#p3-lower{position:absolute;top:11cqw;left:0;right:0;bottom:0;clip-path:inset(78.5cqw 0 0 0)}
#p3-lower .room-art{mask-image:linear-gradient(to bottom,transparent 78.5cqw,#000 81.5cqw);-webkit-mask-image:linear-gradient(to bottom,transparent 78.5cqw,#000 81.5cqw)}