.room-beta { background: #080a0d; color: #f3f1e9; height: 100svh; overflow: hidden; }
.room-beta button { -webkit-tap-highlight-color: transparent; }
.room-header { position: fixed; z-index: 6; top: 0; inset-inline: 0; padding: 27px 36px; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: linear-gradient(#050609cc, transparent); font-size: 16px; font-weight: 750; }
.room-header span { display: block; font-size: 11px; font-weight: 500; color: #bfc2c8; margin-top: 3px; }
.room-header .room-classic { font-size: 12px; font-weight: 550; padding: 12px 16px; border: 1px solid #ffffff40; border-radius: 30px; background: #0b0c1180; }
.room-stage { position: fixed; inset: 0; isolation: isolate; touch-action: none; }
.room-poster, #room-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-poster { object-fit: contain; }
#room-canvas { opacity: 0; transition: opacity 500ms; touch-action: none; cursor: zoom-in; outline-offset: -6px; }
.room-ready #room-canvas { opacity: 1; }
.room-ready .room-poster { visibility: hidden; }
.room-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#05070c33, transparent 32%, transparent 55%, #05070cc9); }
.room-intro { position: absolute; left: 5vw; bottom: 15%; z-index: 2; transition: opacity 450ms, transform 450ms; }
.room-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: #d8c6a5; font-weight: 700; }
#enter-room { display: block; padding: 0; margin: 12px 0 14px; background: none; border: 0; color: #fff9ee; font-size: clamp(44px, 6.5vw, 98px); line-height: 1.03; letter-spacing: -.065em; font-weight: 650; text-shadow: 0 3px 24px #0007; }
#enter-room .touch-prompt { display: none; }
@media (pointer: coarse) {
 #enter-room .wheel-prompt { display: none; }
 #enter-room .touch-prompt { display: inline; }
}
.room-intro > p:last-child { font-size: 13px; color: #ddd9d2; }
.room-entered .room-intro { opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden; }
.room-hotspots { position: absolute; inset: 0; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity 400ms; }
.room-entered .room-hotspots { visibility: visible; opacity: 1; }
.room-hotspots button { position: absolute; transform: translate(-12px,-50%); display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; text-align: left; pointer-events: auto; color: #fff9ed; white-space: nowrap; }
.room-hotspots button[hidden] { visibility: hidden; pointer-events: none; } /* Keep their width measurable so the camera can bring labels back when the whole label fits. */
.hotspot-dot { flex: 0 0 14px; width: 14px; height: 14px; border: 3px solid #fff0d4; border-radius: 50%; box-shadow: 0 0 0 7px #e0c39528, 0 0 30px #ffefc488; }
.room-hotspots button > span:last-child { border: 1px solid #f5e8cd50; border-radius: 14px; background: #101116d9; backdrop-filter: blur(14px); padding: 11px 15px; font-size: 13px; box-shadow: 0 6px 30px #0004; }
.room-hotspots small { display: block; font-size: 10px; color: #bcb8af; margin-top: 3px; }
.room-hotspots button:hover > span:last-child { background: #302a23ed; border-color: #eed5aa; }
.room-zoom { position: absolute; right: 34px; bottom: 130px; display: flex; align-items: center; gap: 12px; padding: 5px; border-radius: 25px; background: #080a10aa; border: 1px solid #ffffff33; }
.room-zoom button { width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; font-size: 22px; }
.room-zoom span { font-size: 10px; color: #d3d0c8; min-width: 66px; text-align: center; }
.room-dock { position: absolute; inset-inline: 20px; bottom: 48px; width: max-content; max-width: calc(100% - 40px); margin: auto; display: flex; gap: 4px; align-items: center; padding: 8px; border: 1px solid #e0cfa83d; border-radius: 20px; background: #111419e8; backdrop-filter: blur(20px); box-shadow: 0 12px 60px #0006; opacity: 0; transform: translateY(25px); visibility: hidden; transition: opacity 450ms, transform 450ms; }
.room-entered .room-dock { opacity: 1; transform: none; visibility: visible; }
.room-dock > span { width: 1px; height: 20px; background: #ffffff2b; margin-inline: 8px; }
.room-dock button { border: 0; background: none; padding: 13px 16px; border-radius: 12px; font-size: 12px; white-space: nowrap; }
.room-dock button:hover, .room-dock button[aria-pressed="true"] { background: #ead8b6; color: #221c14; }
.room-caption { position: absolute; bottom: 16px; inset-inline: 20px; text-align: center; font-size: 10px; color: #aaa8a1; pointer-events: none; }
.room-loading { position: absolute; top: 112px; left: 36px; font-size: 12px; color: #ddd0b8; }
.room-detail { position: fixed; margin: 16px 16px 16px auto; inset: 0; width: min(700px, calc(100% - 32px)); height: calc(100svh - 32px); max-height: none; padding: 36px; border: 1px solid #ffffff25; border-radius: 26px; background: #11151def; color: #eff1f8; backdrop-filter: blur(28px); box-shadow: -20px 0 120px #0008; overflow: auto; overscroll-behavior: contain; }
.room-detail::backdrop { background: #02040a55; backdrop-filter: blur(3px); }
.detail-close { position: sticky; float: right; top: 0; z-index: 8; width: 38px; height: 38px; border-radius: 50%; background: #252c39; border: 1px solid #ffffff20; font-size: 26px; line-height: 1; }
.detail-heading { padding-right: 28px; }
.detail-heading h1 { margin: 14px 0; font-size: clamp(30px, 3vw, 43px); font-weight: 650; line-height: 1.12; letter-spacing: -.05em; }
.detail-heading > p:last-child { font-size: 13px; color: #b5bdce; }
.detail-hint, .detail-note, .beta-disclaimer { font-size: 11px; color: #a3adbf; line-height: 1.65; margin-top: 20px; }
.beta-disclaimer { border-top: 1px solid #ffffff18; padding-top: 18px; margin-top: 30px; }
.detail-link { display: inline-block; border: 0; padding: 0; background: none; font-size: 12px; text-decoration: underline; text-underline-offset: 5px; color: #e6d6b6; margin-top: 16px; }
.beta-mice { height: 290px; margin-top: 18px; }
.beta-mice .hero-product { width: 100%; height: 290px; margin: 0; transform: none; }
.beta-mice img { height: 100%; width: 100%; object-fit: contain; }
.beta-mice canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.beta-mice .speech-callout { left: 0; top: 0; }
.beta-mice .hero-reset { position: absolute; bottom: 0; right: 0; }
.beta-mice [hidden], .room-detail [hidden] { display: none !important; }
.beta-app { display: flex; align-items: center; justify-content: space-between; font-size: 12px; gap: 16px; margin: 24px 0 16px; }
.beta-app select { background: #242b38; color: #edf0f7; padding: 8px 12px; border: 1px solid #ffffff30; border-radius: 8px; max-width: 65%; }
#beta-feedback, #review-feedback { min-height: 42px; margin-top: 18px; font-size: 12px; color: #c2cbdc; line-height: 1.6; }
.beta-gestures { display: flex; flex-wrap: wrap; gap: 8px; }
.beta-gestures button { background: #242b38; border: 1px solid #ffffff2b; border-radius: 8px; padding: 9px 11px; font-size: 11px; }
.beta-gestures button:disabled { opacity: .4; cursor: default; }
.code-example { margin-top: 28px; border: 1px solid #ffffff25; border-radius: 13px; overflow: hidden; background: #0b0e14; }
.code-title { padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; background: #222834; font-size: 11px; }
.code-title span:last-child { color: #a5d8b1; }
.code-file { font: 12px ui-monospace, monospace; padding: 18px 20px 6px; color: #bdc6d8; }
.code-example pre { font: 12px/2 ui-monospace, monospace; padding: 12px 20px 24px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #b0d8b9; }
.review-demo-buttons { display: flex; gap: 12px; margin-top: 22px; }
.review-demo-buttons button { flex: 1; padding: 18px 14px; display: flex; align-items: center; gap: 14px; border: 1px solid #c4b49c55; border-bottom-width: 4px; border-radius: 12px; background: #25252d; color: #ebdec4; font-size: 13px; touch-action: none; user-select: none; }
.review-demo-buttons strong { font-size: 26px; }
.review-demo-buttons button.is-ready { background: #254b39; border-color: #8dc3a1; }
.video-example { margin-top: 28px; border: 1px solid #ffffff25; border-radius: 14px; overflow: hidden; }
.video-screen { aspect-ratio: 16/8; display: grid; place-content: center; gap: 10px; text-align: center; background: radial-gradient(ellipse at 30% 30%, #37384b, #121824 70%); }
.video-screen > span { font-size: 44px; color: #efebe2; }
.video-screen p { font-size: 12px; color: #bfc5d4; }
.video-controls { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; gap: 15px; font-size: 11px; }
.video-controls button { background: none; border: 0; padding: 4px 0; }
.video-controls > span { color: #bac4d6; }
.video-progress { height: 3px; background: #ffffff20; }
.video-progress i { display: block; width: 36%; height: 100%; background: #e16a60; }
.dictate-button { width: 100%; margin-top: 22px; border: 0; background: #e7d5b5; color: #241e15; padding: 16px; border-radius: 12px; font-size: 14px; font-weight: 700; }
.dictate-button[aria-pressed="true"] { background: #554666; color: #fff; }
.transcript { font-size: 13px; line-height: 1.7; color: #c4cddd; padding: 22px 0; min-height: 100px; }
.setup-detail-photo { width: 100%; max-height: 280px; object-fit: contain; margin: 28px 0; border-radius: 12px; }
.setup-detail-list { display: grid; grid-template-columns: 100px 1fr; gap: 16px; font-size: 13px; line-height: 1.5; margin-top: 26px; }
.setup-detail-list dt { color: #9faabd; }
.setup-detail-list dd { margin: 0; }
.beta-no-js { position: fixed; z-index: 20; bottom: 0; padding: 16px; background: #151923; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) { .room-hotspots button > span:last-child { animation: room-float 7s ease-in-out infinite alternate; } .room-hotspots button:nth-child(even) > span:last-child { animation-delay: -4s; } }
@keyframes room-float { to { transform: translateY(-6px); } }
@media (max-width: 760px), (max-height: 520px) {
 .room-header { padding: 20px; }
 .room-header > a:first-child { font-size: 14px; }
 .room-header .room-classic { font-size: 10px; padding: 10px; }
 .room-intro { left: 24px; right: 24px; bottom: 20%; }
 #enter-room { font-size: clamp(42px, 10vw, 70px); }
 .room-dock { bottom: 48px; width: calc(100% - 28px); max-width: none; inset-inline: 14px; overflow-x: auto; border-radius: 15px; }
 .room-dock button { padding: 12px; font-size: 11px; }
 .room-zoom { right: 18px; bottom: 124px; }
 .room-hotspots button > span:last-child { padding: 8px 10px; font-size: 11px; max-width: 150px; white-space: normal; }
 .room-hotspots small { display: none; }
 .room-detail { margin: 8px; width: calc(100% - 16px); height: calc(100svh - 16px); padding: 24px 18px; border-radius: 19px; }
 .detail-heading { padding-right: 24px; }
 .detail-heading h1 { font-size: 32px; }
 .beta-mice, .beta-mice .hero-product { height: 230px; }
 .room-caption { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .room-beta *, .room-beta *::before, .room-beta *::after { transition: none !important; animation: none !important; } }

@keyframes beta-video-progress { from { transform: scaleX(.36); } to { transform: scaleX(.96); } }
.video-progress i { width: 100%; transform-origin: left; transform: scaleX(.36); animation: beta-video-progress 24s linear infinite; animation-play-state: paused; }
.video-example.is-playing .video-progress i { animation-play-state: running; }

#room-canvas.at-zoom-limit { cursor: grab; }
#room-canvas.is-dragging { cursor: grabbing; }

/* Feature controls expand over their photographed object after the camera moves closer. */
.room-focused .room-intro, .room-focused .room-hotspots, .room-focused .room-dock, .room-focused .room-zoom { visibility: hidden; opacity: 0; pointer-events: none; }
.room-hotspots button > span:last-child, .room-dock { backdrop-filter: none; }
.room-detail { margin: auto; width: min(1080px, calc(100% - 72px)); height: fit-content; max-height: calc(100svh - 100px); padding: 0; overflow: visible; border-radius: 22px; background: #10141bf5; backdrop-filter: none; box-shadow: 0 30px 130px #0009; }
.detail-body { max-height: inherit; padding: 32px 38px; border-radius: inherit; overflow: auto; overscroll-behavior: contain; } /* Only the content scrolls; the modal shell keeps its floating arrows centred and unclipped. */
.room-detail > .detail-close { position: absolute; top: 24px; right: 24px; float: none; }
.detail-heading { padding-right: 40px; }
.detail-nav { position: absolute; z-index: 9; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff35; border-radius: 50%; background: #171f2a; color: #eff1f8; box-shadow: 0 4px 18px #0006; touch-action: manipulation; }
.detail-prev { left: 0; transform: translate(-50%, -50%); }
.detail-next { right: 0; transform: translate(50%, -50%); }
.detail-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.detail-nav:hover { background: #303a49; border-color: #ded0a9; }
.detail-nav:focus-visible { outline: 2px solid #ded0a9; outline-offset: 3px; }
.room-detail::backdrop { background: #02040a66; backdrop-filter: none; }
.room-detail[open] { animation: feature-expand 280ms 120ms both cubic-bezier(.2,.8,.2,1); }
@keyframes feature-expand { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.detail-heading h1 { max-width: 780px; font-size: clamp(28px, 3vw, 40px); }
.detail-heading > p:last-child { max-width: 720px; }
#code-detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 30px; align-items: start; }
#code-detail .code-example { grid-column: 1; grid-row: 1 / 6; margin-top: 22px; min-height: 280px; }
#code-detail > :not(.code-example) { grid-column: 2; }
#code-detail .review-demo-buttons { margin-top: 22px; }
#code-detail #review-feedback { margin-bottom: 0; }
#mouse-detail { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 32px; }
#mouse-detail > :not(.mouse-media):not(.detail-hint) { grid-column: 2; }
#mouse-detail .mouse-media { grid-column: 1; grid-row: 1 / 5; min-width: 0; align-self: center; }
#mouse-detail .beta-mice { height: 340px; }
#mouse-detail .hero-product { height: 340px; }
#mouse-detail .detail-hint { grid-column: 1; grid-row: 5 / 7; }
#mouse-detail .beta-app { grid-row: 1; }
#mouse-detail #beta-hud { grid-row: 2; }
#mouse-detail #beta-feedback { grid-row: 3; }
#mouse-detail .beta-gestures { grid-row: 4; }
.room-detail[data-topic="voice"], .room-detail[data-topic="chair"], .room-detail[data-topic="desk"] { width: min(760px, calc(100% - 72px)); }
.room-detail[data-topic="sausages"] { width: min(460px, calc(100% - 72px)); }
#sausages-detail .detail-link { margin-top: 0; }
@media (max-width: 760px), (max-height: 520px) {
 .room-detail, .room-detail[data-topic] { width: calc(100% - 24px); max-height: calc(100svh - 40px); padding: 0; border-radius: 18px; }
 #code-detail, #mouse-detail { display: block; }
 #mouse-detail .beta-mice, #mouse-detail .hero-product { height: 250px; }
 #code-detail .code-example { min-height: 0; }
}

/* The room photograph is the interface; keep navigation quiet and readable over it. */
.room-poster { object-fit: cover; object-position: center bottom; }
.room-header { padding: 22px 28px; align-items: start; pointer-events: none; }
.room-header a { pointer-events: auto; }
.setup-brand { font-size: 21px; letter-spacing: -.045em; color: #f5ebda; text-shadow: 0 2px 18px #000; }
.room-header .room-classic { font-size: 11px; padding: 10px 14px; background: #14171ee0; }
.project-rail { position: fixed; z-index: 5; top: 90px; left: 25px; display: flex; flex-direction: column; gap: 7px; }
.project-rail h2 { position: absolute; bottom: calc(100% + 8px); left: 5px; margin: 0; color: #bfc2c8; font-size: 11px; font-weight: 500; line-height: 1; text-shadow: 0 2px 8px #000; }
.project-rail a, .project-rail button { display: flex; align-items: center; gap: 9px; width: max-content; max-width: 185px; color: #eeeae2; border: 1px solid #ffffff1b; border-radius: 11px; background: #14171cde; padding: 7px 10px 7px 7px; font-size: 10px; text-align: left; box-shadow: 0 3px 14px #0003; }
.project-rail a:hover, .project-rail button:hover { border-color: #dfc599; background: #232a31; }
.project-rail img { flex-shrink: 0; object-fit: contain; border-radius: 6px; }
.rail-symbol { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #343a45; font: 21px ui-sans-serif, system-ui; }
.voice-symbol { background: #cf5b59; color: white; font-size: 15px; }
.room-intro { left: 28px; bottom: 104px; padding: 18px 22px; border: 1px solid #e1ceb133; border-radius: 16px; background: #11151bd9; }
#enter-room { font-size: clamp(25px, 2.5vw, 35px); letter-spacing: -.045em; margin: 0 0 7px; }
.room-intro > p:last-child { margin: 0; font-size: 11px; color: #bdc0c4; }
.room-shade { background: linear-gradient(#02040988, transparent 20%, transparent 70%, #03050985); }
.room-zoom { right: 26px; bottom: 50px; gap: 0; }
.room-zoom button { width: 35px; height: 35px; }
.room-caption { bottom: 12px; margin: 0; pointer-events: auto; }
.room-caption a { color: #d7c5a9; }
.room-dock { bottom: 50px; padding: 7px; border-radius: 16px; max-width: calc(100% - 170px); background: #10151dec; }
.room-dock button { padding: 10px 12px; font-size: 11px; }
.room-dock > span { margin-inline: 3px; }
.room-hotspots button { transform: translate(-7px,-50%); width: 14px; height: 28px; z-index: 1; }
.room-hotspots button:hover, .room-hotspots button:focus-visible { z-index: 8; }
.room-hotspots .hotspot-dot { width: 14px; height: 14px; border-width: 2px; background: #30251b; box-shadow: 0 0 0 5px #e0c39520, 0 2px 12px #0009; }
.room-hotspots button .hotspot-label { position: absolute; left: 23px; top: 50%; transform: translateY(-50%); margin: 0; padding: 7px 9px; border-radius: 8px; background: #0b111bec; font-size: 10px; font-weight: 550; white-space: nowrap; width: max-content; max-width: 165px; animation: none; }
.room-hotspots button.label-left .hotspot-label { left: auto; right: 23px; }
.room-hotspots button.compact .hotspot-label { opacity: 0; pointer-events: none; }
.room-hotspots button.compact:hover .hotspot-label, .room-hotspots button.compact:focus-visible .hotspot-label { opacity: 1; }
.room-hotspots button.offscreen { z-index: 3; }
.room-hotspots button.offscreen .hotspot-dot { border: 0; border-radius: 7px; height: 27px; width: 23px; flex-basis: 23px; background: #1b2734ed; box-shadow: 0 0 0 1px #f5e8cd50; }
.room-hotspots button.offscreen .hotspot-dot::after { content: '↑'; display: block; text-align: center; color: #eed2a4; font-size: 20px; line-height: 27px; transform: rotate(var(--arrow-angle)); }
.room-hotspots button.offscreen .hotspot-label { left: 30px; font-size: 9px; background: #1b2734ed; }
.room-hotspots button.offscreen.label-left .hotspot-label { left: auto; right: 17px; }
.room-hotspots button:focus-visible { outline: 2px solid #e8d4b1; outline-offset: 7px; border-radius: 12px; }
.room-detail { background: #111721f7; }
.room-detail[data-topic="desk"], .room-detail[data-topic="chair"] { width: min(1080px, calc(100% - 72px)); }
.room-detail .detail-heading h1 { font-size: clamp(25px, 2.6vw, 36px); margin: 8px 0; }
.room-detail .detail-heading > p:last-child { font-size: 12px; line-height: 1.6; margin: 0 0 20px; }
.detail-heading .room-kicker { margin: 0; }
#hardware-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(180px, .65fr); gap: 30px; align-items: center; }
.product-stage { position: relative; height: min(54vh, 430px); min-height: 250px; padding-bottom: 48px; background: radial-gradient(ellipse at 50% 65%, #2f3740, #121923 72%); border-radius: 16px; overflow: hidden; }
#product-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline-offset: -6px; }
#product-reset { position: absolute; right: 12px; bottom: 12px; font-size: 10px; border: 1px solid #ffffff30; border-radius: 8px; background: #161d27bd; padding: 7px 9px; }
#product-state { position: absolute; top: 45%; inset-inline: 24px; font-size: 12px; text-align: center; color: #bdc9d9; }
#product-specs { list-style: none; padding: 0; margin: 0; }
#product-specs li { padding: 13px 0; border-bottom: 1px solid #ffffff17; font-size: 13px; }
.product-info > a, .product-info > button { display: block; }
.product-info > #detail-description { margin: 0 0 24px; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: #f3efe8; }
.product-media { min-width: 0; }
.product-photo { position: relative; display: grid; place-items: center; height: min(54vh, 430px); min-height: 250px; margin: 0; padding: 20px 20px 42px; border-radius: 16px; background: #fff; overflow: hidden; }
.product-photo > img { width: 100%; height: 100%; min-height: 0; object-fit: scale-down; }
.product-photo > a { position: absolute; bottom: 12px; right: 16px; color: #505457; font-size: 10px; text-underline-offset: 3px; }
.product-photo > figcaption { position: absolute; bottom: 12px; left: 16px; color: #505457; font-size: 10px; }
.product-photo > p { color: #505457; font-size: 13px; }
.product-gallery { display: flex; align-items: center; gap: 8px; margin-top: 12px; min-width: 0; }
.gallery-strip { display: flex; flex: 1; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #ffffff40 transparent; padding: 3px 1px 7px; }
.gallery-strip > button { flex: 0 0 78px; height: 62px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #ffffff25; border-radius: 9px; background: #ffffff08; padding: 5px; overflow: hidden; }
.gallery-strip > button[aria-pressed="true"] { border-color: #ded0a9; box-shadow: inset 0 0 0 1px #ded0a9; }
.gallery-strip > button:has(img) { background: #fff; }
.gallery-strip img { width: 100%; height: 100%; object-fit: contain; }
.gallery-strip svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.gallery-strip span { font-size: 11px; }
.gallery-arrow { flex: 0 0 28px; height: 44px; border: 1px solid #ffffff20; border-radius: 9px; background: #ffffff08; font-size: 25px; }
.gallery-arrow:disabled { opacity: .25; cursor: default; }
.mouse-media .product-photo { height: 340px; margin-top: 18px; }
.mouse-media:has(.product-photo:not([hidden])) ~ .detail-hint { visibility: hidden; }
#hardware-detail:has(.product-photo:not([hidden])) .detail-note { visibility: hidden; }
.room-detail:has(#screen-detail:not([hidden])) { width: min(1600px, calc(100% - 48px)); height: calc(100svh - 32px); max-height: none; padding: 0; border-radius: 16px; overflow: visible; } /* Ethan removed the monitor headings and mode tags so the desktop gets the full dialog height. */
.room-detail:has(#screen-detail:not([hidden])) .detail-heading > :not(#detail-tools) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Keep the dialog's accessible name without a second visible title above the embedded app. */
.room-detail:has(#screen-detail:not([hidden])) .detail-close { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; font-size: 22px; box-shadow: 0 2px 12px #0008; }
.room-detail:has(#screen-detail:not([hidden])) .detail-body { height: 100%; padding: 6px; overflow: hidden; display: flex; flex-direction: column; }
#screen-detail { flex: 1; min-height: 0; }
#desktop-frame { width: 100%; height: 100%; display: block; border: 1px solid #ffffff25; border-radius: 10px; background: #111; }
.setup-directory { position: fixed; inset: 0; margin: auto; width: min(1100px, calc(100% - 60px)); max-height: calc(100svh - 70px); padding: 36px; background: #111821; color: #edf0f5; border: 1px solid #ffffff35; border-radius: 22px; overflow: auto; overscroll-behavior: contain; }
.setup-directory::backdrop { background: #01030ab3; }
.directory-close { position: sticky; float: right; top: 0; z-index: 3; width: 35px; height: 35px; border-radius: 50%; background: #2a3442; border: 1px solid #ffffff25; font-size: 24px; }
.setup-directory h1 { font-size: 34px; letter-spacing: -.045em; margin: 0 0 18px; }
.directory-order { color: #aeb9c9; font-size: 12px; margin: -7px 0 18px; }
.setup-directory h2 { font-size: 19px; margin: 35px 0 15px; }
.directory-sections { display: flex; gap: 18px; font-size: 12px; color: #d7c5a9; }
.directory-gear, .directory-skills { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.directory-gear button, .directory-skills a, .directory-skills article { text-align: left; border: 1px solid #ffffff1c; border-radius: 10px; padding: 15px; background: #1a2430; font: inherit; }
.directory-gear strong, .directory-skills strong { display: block; font-size: 12px; margin-bottom: 7px; }
.directory-gear span, .directory-skills span { display: block; font-size: 10px; color: #aeb9c9; line-height: 1.5; }
.directory-apps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.directory-apps a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; border: 1px solid #ffffff15; font-size: 11px; }
.directory-apps img { object-fit: contain; flex-shrink: 0; }
.directory-apps span { min-width: 0; overflow-wrap: anywhere; }
.directory-gear button:hover, .directory-skills a:hover, .directory-apps a:hover { border-color: #dec59d; background: #25323f; }
.setup-follow { margin-top: 40px; padding: 32px; border: 1px solid #87b5dc55; border-radius: 16px; display: flex; align-items: center; gap: 30px; background: #152b40; }
.setup-follow .linkedin-logo { width: 100px; height: 100px; display: grid; place-items: center; flex-shrink: 0; border-radius: 18px; background: #0a66c2; color: white; font: bold 78px Arial,sans-serif; letter-spacing: -5px; padding-right: 5px; }
.setup-follow h2 { margin: 0; font-size: 27px; letter-spacing: -.04em; }
.setup-follow p { font-size: 14px; color: #b7c9db; margin: 8px 0 15px; }
.setup-follow a { font-size: 12px; }
@media (max-width: 1100px) {
 .project-rail a span:not(.rail-symbol), .project-rail button span:not(.rail-symbol) { display: none; }
 .project-rail a, .project-rail button { padding: 7px; }
 .project-rail a:hover span:not(.rail-symbol), .project-rail button:hover span:not(.rail-symbol) { display: block; }
 .room-dock { max-width: calc(100% - 150px); overflow-x: auto; }
 .directory-apps { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px), (max-height: 520px) {
 .room-header { padding: 19px 18px; }
 .room-header .setup-brand { font-size: 20px; }
 .room-header .room-classic { font-size: 9px; padding: 8px 10px; }
 .project-rail { top: 66px; left: 16px; right: 16px; flex-direction: row; gap: 5px; }
 .project-rail a, .project-rail button { border-radius: 9px; padding: 5px; }
 .project-rail img, .project-rail .rail-symbol { width: 25px; height: 25px; }
 .project-rail a:hover span:not(.rail-symbol), .project-rail button:hover span:not(.rail-symbol) { display: none; }
 .room-intro { left: 18px; right: auto; bottom: 118px; padding: 14px 18px; }
 #enter-room { font-size: 27px; }
 .room-dock { bottom: 48px; max-width: calc(100% - 110px); width: max-content; right: 90px; left: 10px; margin: 0; }
 .room-zoom { right: 12px; bottom: 54px; }
 .room-zoom button { width: 30px; }
 .room-hotspots button .hotspot-label { font-size: 9px; padding: 6px 7px; max-width: 150px; }
 #hardware-detail { display: block; }
 .product-stage { height: 340px; padding-bottom: 84px; }
 .product-photo { height: 340px; }
 .mouse-media .product-photo { height: 250px; }
 .mouse-media:has(.product-photo:not([hidden])) ~ .detail-hint { display: none; }
 .product-info { margin-top: 12px; }
 #product-specs li { padding: 8px 0; font-size: 12px; }
 .room-detail:has(#screen-detail:not([hidden])) { padding: 0; width: calc(100% - 24px); height: calc(100svh - 28px); }
 .room-detail:has(#screen-detail:not([hidden])) .detail-body { padding: 4px; }
 .room-detail:has(#screen-detail:not([hidden])) .detail-close { top: -10px; right: -10px; }
 .room-detail[data-topic] { width: calc(100% - 24px); }
 .detail-body { padding: 24px 28px; }
 .room-detail > .detail-close { top: 14px; right: 14px; }
 .detail-prev { left: 10px; }
 .detail-next { right: 10px; }
 .setup-directory { width: calc(100% - 22px); max-height: calc(100svh - 36px); padding: 24px 18px; }
 .setup-directory h1 { font-size: 28px; }
 .directory-gear, .directory-skills, .directory-apps { grid-template-columns: repeat(2, minmax(0,1fr)); }
 .setup-follow { padding: 20px; gap: 18px; }
 .setup-follow .linkedin-logo { width: 62px; height: 62px; font-size: 48px; border-radius: 11px; letter-spacing: -3px; }
 .setup-follow h2 { font-size: 23px; }
 .setup-follow p { font-size: 12px; }
}

@media (min-width:760px) and (min-height:521px) {
 body:has(.room-entered) .project-rail a span:not(.rail-symbol), body:has(.room-entered) .project-rail button span:not(.rail-symbol) { display:none; }
 body:has(.room-entered) .project-rail a:hover span, body:has(.room-entered) .project-rail a:focus-visible span, body:has(.room-entered) .project-rail button:hover span { display:block; }
 body:has(.room-entered) .project-rail a, body:has(.room-entered) .project-rail button { padding:7px; }
}

@media(max-width:759px){.room-poster{object-position:67% bottom}}

#product-movement { position: absolute; left: 12px; bottom: 12px; right: 110px; display: flex; gap: 6px; align-items: center; }
#product-movement[hidden] { display: none; }
#product-movement select, #product-movement button { min-width: 0; border: 1px solid #ffffff30; border-radius: 8px; background: #161d27ed; color: inherit; font: inherit; font-size: 11px; padding: 7px 9px; }
#product-movement select { max-width: 220px; text-overflow: ellipsis; }
#product-movement button { flex-shrink: 0; }
@media (max-width: 600px) { #product-movement { right: 12px; bottom: 48px; } #product-movement select { flex: 1; } }

@font-face { font-family: Microgramma; src: url("./assets/fonts/microgramma-bold.otf?v=fdf4cf6271652b9f") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; }
#enter-room { max-width: 88vw; font-family: Microgramma, sans-serif; font-weight: 700; letter-spacing: .025em; line-height: 1.15; } /* Keep the earlier compact size rules; Ethan rejected the oversized prompt covering the photo (task 01a07944-b48e-7e43-8c2f-34b9cfe3df70). */
#enter-room span { font-size: 1em; }
.room-header .room-classic { display: flex; align-items: center; gap: 9px; }
.room-classic svg { width: 21px; height: 21px; }
.product-link { display: inline-flex; width: fit-content; align-items: center; font-size: 17px; font-weight: 650; color: #ecdab9; border-bottom: 1px solid #ecdab970; padding: 5px 0; margin: 0 0 20px; text-decoration: none; }
.product-link:hover { color: #fff; border-color: #fff; }
#product-retry { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); padding: 10px 16px; border: 1px solid #ffffff45; border-radius: 10px; background: #222e40; }
.mouse-state { position: absolute; z-index: 3; left: 50%; bottom: 32px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 12px; background: #10151bea; padding: 10px 14px; border-radius: 12px; white-space: nowrap; }
.mouse-state button, .image-retry { border: 1px solid #ffffff45; border-radius: 8px; padding: 8px 12px; background: #253043; }
.product-photo .image-retry { position: absolute; top: 58%; background: #263344; color: #fff; }
.directory-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.directory-projects a { border: 1px solid #ffffff1c; border-radius: 10px; padding: 15px; background: #1a2430; }
.directory-projects strong { display: block; font-size: 12px; margin-bottom: 7px; }
.directory-projects span { display: block; font-size: 10px; color: #aeb9c9; line-height: 1.5; }
.directory-projects a:hover { border-color: #ecdab970; }
@media (max-width: 760px), (max-height: 520px) { .product-link { font-size: 16px; } .directory-sections { flex-wrap: wrap; } }
@media (max-width: 420px) { .directory-projects { grid-template-columns: 1fr; } }


.brand-links { display: flex; align-items: baseline; gap: 15px; }
.room-header .portfolio-link { color: #aba9a5; font-size: 12px; font-weight: 400; }
.room-header .portfolio-link:hover { color: #fff; }
.portfolio-section iframe { display: block; width: 100%; height: 650px; border: 1px solid #ffffff25; border-radius: 14px; background: #15151a; }
@media (max-width: 760px), (max-height: 520px) { .brand-links { gap: 9px; } .room-header .portfolio-link { font-size: 10px; } .portfolio-section iframe { height: 540px; } }

#detail-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
#detail-tools[hidden] { display: none; }
#detail-tools a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; max-width: 100%; padding: 10px 14px; border: 1px solid #ecdab960; border-radius: 12px; background: #ecdab914; color: #fff2d9; font-size: 16px; font-weight: 650; text-decoration: none; line-height: 1.3; }
#detail-tools img { flex: 0 0 26px; object-fit: contain; border-radius: 5px; }
#detail-tools a:hover { background: #ecdab928; border-color: #ecdab9; }
#detail-tools a:focus-visible { outline: 2px solid #ecdab9; outline-offset: 3px; }
.room-detail:has(#screen-detail:not([hidden])) .detail-heading { padding: 0 24px 0 8px; }
.room-detail:has(#screen-detail:not([hidden])) #detail-tools { margin: 6px 0 10px; }
@media (max-width: 600px) { #detail-tools a { font-size: 14px; padding: 9px 11px; gap: 8px; } }

/* VS Code walkthrough: explicit slide tabs, distinct from the round arrows that switch desk items. */
.room-detail[data-topic="vscode"] { width: min(980px, calc(100% - 72px)); }
.slide-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.slide-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 8px; border: 1px solid #ffffff25; border-radius: 10px; background: #1a212c; color: #dfe4ee; font-size: 12px; font-weight: 600; }
.slide-tabs .slide-number { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #ffffff14; font-size: 11px; color: #c5ccd8; }
.slide-tabs [role="tab"]:hover { border-color: #ecdab9; background: #242c38; }
.slide-tabs [role="tab"][aria-selected="true"] { background: #ecdab9; border-color: #ecdab9; color: #221c14; }
.slide-tabs [role="tab"][aria-selected="true"] .slide-number { background: #22201c22; color: #221c14; }
.slide-tabs [role="tab"]:focus-visible { outline: 2px solid #ecdab9; outline-offset: 3px; }
.slide { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.slide-copy h2 { margin: 0 0 12px; font-size: 22px; font-weight: 650; letter-spacing: -.03em; line-height: 1.2; }
.slide-copy p { margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: #c2cbdc; }
.slide-copy code { font: 12px ui-monospace, monospace; color: #f3e9d4; background: #ffffff12; padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.slide-copy .detail-link { margin-top: 6px; }
.slide-copy-wide { grid-column: 1 / -1; }
.slide-copy-wide h2 { margin-bottom: 8px; }
.stack-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.stack-summary span { padding: 5px 9px; border: 1px solid #ecdab945; border-radius: 8px; font-size: 12px; color: #f3e9d4; }
.slide-steps { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #ffffff18; }
.slide-steps button { border: 1px solid #ffffff25; border-radius: 9px; background: #1a212c; padding: 9px 13px; font-size: 12px; color: #e7e2d6; }
.slide-steps button:hover:not(:disabled) { border-color: #ecdab9; background: #242c38; }
.slide-steps button:disabled { opacity: .35; cursor: default; }
.vscode-window { margin: 0; border: 1px solid #ffffff25; border-radius: 12px; overflow: hidden; background: #1f1f1f; color: #cccccc; font: 11px/1.5 ui-sans-serif, system-ui, sans-serif; }
.vscode-titlebar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #181818; border-bottom: 1px solid #2b2b2b; font-size: 10px; color: #9d9d9d; }
.vscode-titlebar .window-lights { letter-spacing: 2px; color: #5b5b5b; }
.vscode-titlebar em { margin-left: auto; font-style: normal; color: #d7c5a9; }
.vscode-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.vscode-sidebar { padding: 10px 0 12px; background: #181818; border-right: 1px solid #2b2b2b; min-width: 0; }
.vscode-sidebar h3 { margin: 0 14px 8px; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #bbbbbb; }
.tree-head { display: flex; gap: 8px; margin: 8px 14px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #a8a8a8; }
.tree-head::before { content: "▾"; color: #8a8a8a; }
.tree-head span { margin-left: auto; padding: 0 6px; border-radius: 9px; background: #3a3a3a; font-weight: 500; text-transform: none; color: #ddd; }
.repo-list, .change-list { list-style: none; margin: 0; padding: 0; }
.repo-list li, .change-list li { display: flex; align-items: baseline; gap: 8px; padding: 4px 14px 4px 24px; min-width: 0; }
.repo-list strong { font-weight: 600; color: #e6e6e6; overflow-wrap: anywhere; }
.repo-list span { color: #8f9ba8; font-size: 10px; overflow-wrap: anywhere; }
.repo-list em { margin-left: auto; flex-shrink: 0; font-style: normal; font-size: 9px; color: #7fb3e6; }
.repo-list .is-selected { background: #04395e; color: #fff; }
.change-list span { color: #e6e6e6; overflow-wrap: anywhere; }
.change-list small { color: #7f7f7f; font-size: 9px; overflow-wrap: anywhere; }
.change-list b { margin-left: auto; flex-shrink: 0; font-weight: 600; color: #e2c08d; }
.change-list .is-current { background: #37373d; outline: 1px solid #007fd4; outline-offset: -1px; }
.vscode-editor { margin: 0; padding: 0 14px 14px; font: 11px/1.9 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: #d4d4d4; }
.editor-tab { display: inline-block; margin: 0 0 6px -14px; padding: 6px 14px; background: #1f1f1f; border-bottom: 1px solid #007fd4; font: 10px ui-sans-serif, system-ui, sans-serif; color: #fff; }
.vscode-editor del, .vscode-editor ins, .review-strip del, .review-strip ins { display: inline-block; width: 100%; vertical-align: top; text-decoration: none; } /* Full-width inline boxes keep the preserved newlines as the only line breaks. */
.vscode-editor del, .review-strip del { background: #4b1818; color: #ffb3b3; }
.vscode-editor ins, .review-strip ins { background: #1d3b23; color: #b8f0c2; }
.vscode-statusbar { display: flex; justify-content: space-between; gap: 12px; padding: 4px 12px; background: #181818; border-top: 1px solid #2b2b2b; font-size: 10px; color: #9d9d9d; }
.vscode-statusbar span:first-child { color: #fff; background: #0078d4; margin: -4px 0 -4px -12px; padding: 4px 10px; }
.stack-diagram { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 6px 0 16px; }
.stack-diagram > section { padding: 14px; border: 1px solid #ffffff25; border-radius: 12px; background: #0b0e14; min-width: 0; }
.stack-diagram h3 { margin: 0 0 10px; font-size: 14px; font-weight: 650; }
.stack-diagram h3 span { margin-left: 8px; font-size: 11px; font-weight: 500; color: #a3adbf; }
.stack-diagram ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stack-diagram > section > ul > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 11px; border: 1px solid #ffffff20; border-radius: 8px; background: #1a212c; font-size: 12px; }
.stack-diagram li strong { font-weight: 600; }
.stack-diagram li span { font: 12px ui-monospace, monospace; color: #f3e9d4; }
.stack-diagram li small { margin-left: auto; font-size: 10px; color: #a3adbf; }
.stack-backend { margin-top: 6px; padding: 11px; border: 1px solid #ffffff20; border-radius: 8px; }
.stack-backend ul { gap: 4px; font-size: 12px; }
.stack-backend p { margin: 8px 0 0; font-size: 10px; color: #a3adbf; line-height: 1.5; }
.stack-backend.is-docker { border: 1px dashed #63a8e6; background: #0f1a2b; }
.stack-backend .docker-label { margin: 0 0 7px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8dc2f2; }
.review-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 14px; border: 1px solid #ffffff25; border-radius: 12px; background: #0b0e14; }
.review-strip pre { margin: 0; font: 11px/1.9 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: #d4d4d4; min-width: 0; }
.review-key { display: grid; justify-items: center; gap: 4px; text-align: center; }
.review-key b { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #c4b49c55; border-bottom-width: 4px; border-radius: 10px; background: #25252d; color: #ebdec4; font-size: 20px; }
.review-key span { font-size: 9px; color: #a3adbf; max-width: 60px; line-height: 1.3; }
.review-strip figcaption { grid-column: 1 / -1; font-size: 11px; color: #a5d8b1; text-align: center; }
.land-steps { list-style: none; counter-reset: land; margin: 0; padding: 0; display: grid; gap: 8px; }
.land-steps li { counter-increment: land; display: flex; align-items: baseline; gap: 12px; padding: 11px 13px; border: 1px solid #ffffff20; border-radius: 10px; background: #0b0e14; font-size: 13px; }
.land-steps li::before { content: counter(land); flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #ecdab9; color: #221c14; font-size: 12px; font-weight: 700; align-self: center; }
.land-steps strong { font-weight: 650; }
.land-steps span { color: #c2cbdc; }
@media (max-width: 760px), (max-height: 520px) {
 .room-detail[data-topic="vscode"] { width: calc(100% - 24px); }
 .slide, .stack-diagram { grid-template-columns: 1fr; }
 .slide { gap: 18px; }
 .slide-copy h2 { font-size: 19px; }
 .vscode-body { grid-template-columns: 1fr; }
 .vscode-editor { border-top: 1px solid #2b2b2b; }
 .review-strip { grid-template-columns: 1fr; }
 .review-key { grid-auto-flow: column; justify-content: start; align-items: center; text-align: left; }
 .review-key span { max-width: none; }
 .slide-tabs [role="tab"] { font-size: 11px; padding: 7px 10px 7px 7px; }
}
@media (max-width: 360px) {
 .slide-tabs [role="tab"] { padding: 6px 8px; gap: 6px; }
 .slide-tabs .slide-number { width: 18px; height: 18px; font-size: 10px; }
 .repo-list li, .change-list li { flex-wrap: wrap; }
}