/* A restrained gallery: room names, panorama and a single compact icon strip. */
html[data-spaces-module] #demo-shell .demo-guide,
html[data-spaces-module] #demo-shell .demo-preferences,
html[data-spaces-module] #demo-shell [data-tour-app]>.app-topline,
html[data-spaces-module] #demo-shell [data-tour-app]>.app-tabs,
html[data-spaces-module] #demo-shell .tour-map-panel{display:none!important}

/* Fill the iframe viewport instead of imposing a large fixed scene. */
html[data-spaces-module],html[data-spaces-module] body{
 width:100%;height:100%;min-height:0!important;overflow:hidden;
}
html[data-spaces-module] #demo-shell,
html[data-spaces-module] #demo-shell>#experience{height:100%;min-height:0;overflow:hidden}
html[data-spaces-module][data-demo-mode] #demo-shell>#experience,
html[data-spaces-module][data-demo-mode][data-demo-embedded] #demo-shell>#experience{
 padding:0!important;margin:0!important;max-width:none;
}
html[data-spaces-module] #demo-shell [data-tour-app]{
 display:grid;grid-template-rows:40px minmax(0,1fr) 28px;gap:8px;
 width:100%;height:100%;min-height:0;min-width:0;margin:0;
 border:0;border-radius:0;background:transparent;overflow:hidden;
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-layout{
 display:block;min-height:0;height:100%;min-width:0;overflow:hidden;
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-scene:not(:fullscreen){
 height:100%;min-height:0;border:0;border-radius:14px;overflow:hidden;
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-scene:fullscreen{
 height:100dvh;min-height:100dvh;border-radius:0;
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-scene::after{
 background:linear-gradient(180deg,#05090c65,transparent 26%,transparent 62%,#05090c8c);
}
/* The current room receives a fine underline, never a filled pill. */
html[data-spaces-module] #demo-shell [data-tour-app] .tour-journey{
 display:flex;align-items:stretch;gap:22px;min-width:0;height:40px;
 padding:0 2px;border:0;background:transparent;overflow-x:auto;overflow-y:hidden;
 overscroll-behavior-x:contain;scrollbar-width:none;
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-journey::-webkit-scrollbar{display:none}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-journey>button[data-tour-node]{
 --control-bg:transparent;--control-ink:#aeb9c1;--control-line:transparent;
 --control-hover:transparent;--control-hover-line:transparent;
 flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
 min-height:36px;height:40px;max-width:none;margin:0;padding:0 1px;
 border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;
 color:#aeb9c1;font-size:12px;font-weight:450;line-height:1.3;white-space:nowrap;
 box-shadow:none;transform:none;scale:none;
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-journey>button[data-tour-node]>span{display:none}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-journey>button[data-tour-node][aria-pressed="true"]{
 --control-ink:#f5f7f8;--control-hover-line:#c4cdd3;
 color:#f5f7f8;background:transparent;border-color:#c4cdd3;
}

/* The outer dialog identifies the tour; the image needs only its room name. */
html[data-spaces-module] #demo-shell [data-tour-app] .tour-scene-title{top:20px;left:22px;right:22px}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-scene-title>.app-eyebrow{display:none}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-scene-title>strong{
 margin:0;font:500 clamp(20px,2vw,24px)/1.2 Supreme,Arial,sans-serif;
 letter-spacing:-.025em;text-shadow:0 1px 12px #0009;
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-node-links{
 left:22px;right:auto;bottom:21px;display:flex;flex-wrap:wrap;align-items:center;
 gap:8px 22px;max-width:calc(100% - 265px);
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-node-links>button[data-tour-node]{
 --control-bg:transparent;--control-ink:#f2f5f7;--control-line:transparent;
 --control-hover:transparent;--control-hover-line:transparent;
 display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;
 min-height:36px;height:auto;max-width:100%;padding:0;border:0;border-radius:0;
 background:transparent;color:#f2f5f7;font-size:12px;font-weight:500;line-height:1.4;
 text-align:left;text-shadow:0 1px 10px #000b;box-shadow:none;transform:none;scale:none;
}
html[data-spaces-module] #demo-shell [data-tour-app] [data-spaces-link-arrow]{display:inline-flex;flex:none}
html[data-spaces-module] #demo-shell [data-tour-app] [data-spaces-link-arrow] svg{display:block;width:19px;height:19px}

/* Five concise actions share one translucent surface; labels stay accessible. */
html[data-spaces-module] #demo-shell [data-tour-app] .tour-tools{
 display:flex;flex-flow:row nowrap;align-items:center;left:auto;right:18px;bottom:18px;
 width:auto;max-width:calc(100% - 32px);gap:0;
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-tools>span{
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap;border:0;
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-tools>div{
 display:flex;flex-flow:row nowrap;align-items:center;gap:2px;padding:5px;
 border:0;border-radius:10px;background:rgba(8,12,15,.72);
 -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-tools>div>button[data-tour-action]{
 --control-bg:transparent;--control-ink:#eef2f5;--control-line:transparent;
 --control-hover:#ffffff14;--control-hover-line:transparent;
 display:grid;place-items:center;flex:0 0 36px;min-width:36px;width:36px;
 min-height:36px;height:36px;max-width:36px;padding:0;gap:0;border:0;border-radius:6px;
 background:transparent;color:#eef2f5;box-shadow:none;transform:none;scale:none;
}
html[data-spaces-module] #demo-shell [data-tour-app] .tour-tools>div>button[data-tour-action] svg{
 display:block;width:20px;height:20px;pointer-events:none;
}
html[data-spaces-module] #demo-shell [data-tour-app]>.flow-note{
 align-self:start;margin:0;padding:1px 2px 0;border:0;background:transparent;
 color:#aeb9c1;font-size:10px;line-height:1.3;text-align:left;
}
html[data-spaces-module] #demo-shell [data-tour-app] :is(.tour-journey>button[data-tour-node],.tour-node-links>button[data-tour-node],.tour-tools>div>button[data-tour-action]):focus-visible{
 outline:2px solid #c3d8f0;outline-offset:-2px;
}
@media(hover:hover) and (pointer:fine){
 html[data-spaces-module] #demo-shell [data-tour-app] .tour-journey>button[data-tour-node]:hover{color:#f5f7f8;background:transparent}
 html[data-spaces-module] #demo-shell [data-tour-app] .tour-node-links>button[data-tour-node]:hover{color:#fff;background:transparent;text-decoration:underline;text-underline-offset:4px}
 html[data-spaces-module] #demo-shell [data-tour-app] .tour-tools>div>button[data-tour-action]:hover{background:#ffffff14}
}
@media(max-width:640px){
 html[data-spaces-module] #demo-shell [data-tour-app]{grid-template-rows:36px minmax(0,1fr) 28px;gap:7px}
 html[data-spaces-module] #demo-shell [data-tour-app] .tour-journey{height:36px;gap:18px}
 html[data-spaces-module] #demo-shell [data-tour-app] .tour-journey>button[data-tour-node]{height:36px;font-size:11px}
 html[data-spaces-module] #demo-shell [data-tour-app] .tour-scene:not(:fullscreen){height:100%;min-height:0;border-radius:10px}
 html[data-spaces-module] #demo-shell [data-tour-app] .tour-scene-title{top:16px;left:16px;right:16px}
 html[data-spaces-module] #demo-shell [data-tour-app] .tour-scene-title>strong{font-size:20px}
 html[data-spaces-module] #demo-shell [data-tour-app] .tour-node-links{left:16px;right:16px;bottom:74px;gap:8px 18px;max-width:none}
 html[data-spaces-module] #demo-shell [data-tour-app] .tour-tools{right:12px;bottom:12px;max-width:calc(100% - 24px)}
}
