.framing-info-display{position:absolute;z-index:25;left:14px;right:14px;box-sizing:border-box;padding:10px 13px;border:1px solid rgba(255,255,255,.56);border-radius:16px;background:rgba(245,241,231,.50);backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%);box-shadow:0 7px 22px rgba(31,26,18,.12),inset 0 1px rgba(255,255,255,.4);color:rgba(51,47,40,.58);font:12px/1.55 system-ui;pointer-events:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
.framing-info-display[hidden]{display:none}.framing-info-material{font-size:13px;font-weight:550;overflow-wrap:anywhere}.framing-info-measure{font-size:11px;align-self:center;white-space:nowrap;color:rgba(85,77,64,.52)}.framing-info-action{grid-column:1/-1;margin:0;color:rgba(76,69,57,.5);font-size:11px}
.scene-navigation-hint{max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;padding:0;border:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;text-shadow:none;color:rgba(57,53,45,.38);font:13px/1.7 system-ui;text-align:center;pointer-events:none;animation:scene-guidance-breathe 20s ease-in-out infinite}
.scene-navigation-hint small{font-size:12px;opacity:.8}
@keyframes scene-guidance-breathe{0%,4%,35%,100%{opacity:0}10%,26%{opacity:1}}
@media(prefers-reduced-motion:reduce){.scene-navigation-hint{animation:none;opacity:.8}}

.scene-navigation-hint>span{white-space:pre-line}

.framing-info-display{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);height:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:10px 20px;background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.08) 48%,rgba(245,241,231,.15));border:1px solid rgba(255,255,255,.62);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 1px 0 rgba(255,255,255,.35),inset 0 -1px rgba(255,255,255,.2),0 5px 16px rgba(31,26,18,.08)}
.framing-info-material,.framing-info-measure,.framing-info-action{max-width:100%;text-align:center;overflow-wrap:anywhere}.framing-info-action{font-size:12px}

.framing-info-display{--info-ink:38,34,29;color:rgba(var(--info-ink),.78)}
.framing-info-display[data-contrast="light"]{--info-ink:255,251,241}
.framing-info-material{color:rgba(var(--info-ink),.8)}
.framing-info-measure{color:rgba(var(--info-ink),.72)}
.framing-info-action{color:rgba(var(--info-ink),.68)}

/* Reserve the enlarged footprint in the shared dock, then release it on lift. */
.framing-entry-page .framing-entry-dock .adjustment-magnified{margin-inline:var(--magnifier-room,20px)!important}
.framing-entry-page .framing-entry-dock.frame-menu-open{justify-content:center;gap:clamp(6px,2vw,12px);--dock-step:68px}
.framing-entry-page .frame-menu-open>[data-slot]:disabled,.framing-entry-page .frame-menu-open>.style-push-children{display:none!important}
.framing-entry-page .style-push-dock[data-style-open="true"]>.style-push-children:has(.adjustment-magnified){flex-basis:calc(var(--style-count,5) * var(--dock-step) + var(--dock-step) * .45 + 8px);width:calc(var(--style-count,5) * var(--dock-step) + var(--dock-step) * .45 + 8px);transition:none}


.preview-tools-hidden .framing-entry-dock,.preview-tools-hidden .framing-global-actions,.preview-tools-hidden .framing-info-display,.preview-tools-hidden .scene-navigation-hint,.preview-tools-hidden .framing-entry-status,.preview-tools-hidden .framing-save-feedback{visibility:hidden!important;pointer-events:none!important}

.mat-colour-track{left:5px;top:-44px;gap:5px}
.mat-colour-chip{flex:0 0 44px;width:44px;height:44px;border-radius:11px}
.mat-spectrum-pad>.fixed-slot-visual{overflow:hidden}
.mat-spectrum-track{width:100%;height:100%;border-radius:inherit;background:linear-gradient(to bottom,#fff,transparent 50%,#000),linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);box-shadow:none}
.mat-spectrum-track b{top:var(--mat-tone-position,20%);left:var(--mat-hue-position,10%);width:12px;height:12px;background:transparent;border:2px solid white;box-shadow:0 0 0 1px #3338}
.framing-entry-page .mat-spectrum-pad.adjustment-magnified{scale:1!important;flex:0 0 180px;width:180px;min-width:180px;height:180px;grid-template-rows:180px;gap:0;margin-inline:0!important;margin-top:-122px;transform-origin:bottom center}
.framing-entry-page .mat-spectrum-pad.adjustment-magnified>.fixed-slot-visual{width:180px;height:180px}
.framing-entry-page .framing-entry-dock.mat-colour-custom-open{--dock-step:58px}

.mat-colour-track{left:8px;top:-35px}
.mat-colour-chip{flex-basis:38px;width:38px;height:38px}
.framing-entry-page .mat-mode-wheel{width:54px;height:54px}
.framing-entry-page .mat-mode-wheel svg{width:38px!important;height:38px!important}

.framing-entry-page .mat-mode-wheel>strong,.framing-entry-page .mat-mode-wheel>span,.framing-entry-page .mat-mode-wheel>span:first-child,.framing-entry-page .mat-mode-wheel>span:last-child{left:calc(50% - 19px);top:calc(50% - 19px);bottom:auto;width:38px;height:38px}
.mat-colour-track{left:calc(50% - 19px);top:calc(50% - 62px)}


/* A submenu replaces its parent level; preview taps navigate back. */
.framing-entry-page .framing-entry-dock>[data-parent-hidden="true"],
.framing-entry-page .framing-entry-dock>[data-slot]:disabled{display:none!important}
.framing-entry-page .framing-entry-dock[data-style-open="true"]{justify-content:flex-start}
.framing-entry-page .framing-entry-dock[data-style-open="false"]:not([data-depth="0"]){justify-content:center;gap:12px}
.framing-entry-page[data-active-global] .framing-global-actions>[data-global-action],
.framing-entry-page:has(.light-tabs:not([hidden])) .framing-global-actions>[data-global-action]{visibility:hidden!important;pointer-events:none!important}
.framing-entry-page[data-active-global] .framing-global-panel[aria-hidden="false"]{left:12px;right:12px}

/* Shared centred thumbnail size; scene categories form one horizontal rail. */
.framing-entry-page .framing-entry-dock>[data-slot][hidden]{display:none!important}
.framing-entry-page .framing-entry-dock.scene-menu-open{justify-content:flex-start!important;--dock-step:68px;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;height:124px!important;align-items:center;box-sizing:border-box;padding:20px 8px!important}
.framing-entry-page .framing-entry-dock.scene-menu-open>[data-slot]{flex:0 0 68px!important;width:68px!important;min-width:68px!important}
.framing-entry-page .environment-wheel{position:absolute;left:calc(50% - 19px);top:calc(50% - 27px);width:38px;height:54px;gap:4px}
.framing-entry-page .environment-wheel>span{box-sizing:border-box;flex:0 0 38px;width:38px;height:38px;border-radius:4px;border:1px solid #fff9;box-shadow:inset 0 1px 1px #fffa,1px 2px 3px #0002;transform:translateY(calc(-34px + var(--environment-drag-offset,0px)))}

/* The final primary icon faces left, answering the four right-facing icons. */
.scene-emblem{position:relative;display:block;width:38px;height:42px;transform:perspective(140px) rotateY(-30deg);transform-style:preserve-3d;filter:drop-shadow(-2px 3px 2px #30251938)}
.scene-emblem-edge{position:absolute;inset:2px -4px -2px 4px;border-radius:3px;background:linear-gradient(90deg,#8a8173,#c4baaa);border:1px solid #eee4d2}
.scene-emblem-room{position:absolute;inset:0;border-radius:3px;overflow:hidden;background:linear-gradient(130deg,#f2ebdb,#c9c0ab);border:1px solid #fff5e4;box-shadow:inset 0 1px 2px #fff,inset -4px 0 5px #53432c28}
.scene-emblem-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.72}
.scene-emblem-frame{position:absolute;left:10px;top:9px;width:14px;height:18px;box-sizing:border-box;border:2px solid #8e734f;background:linear-gradient(145deg,#faf6eb,#e9deca);box-shadow:inset 0 0 0 2px #fff9,-1px 2px 2px #231a1640}
.scene-emblem-ledge{position:absolute;left:4px;right:4px;bottom:5px;height:3px;background:linear-gradient(#d9c7a5,#8a7758);box-shadow:0 2px 2px #33241335}

/* Keep the background wheel in the right-facing primary icon family. */
.framing-entry-page [data-entry-id="background"] .environment-wheel{transform:perspective(95px) rotateY(32deg);filter:drop-shadow(3px 3px 2px #38261730)}
.framing-entry-page [data-entry-id="background"] .environment-wheel>span{box-shadow:inset 0 1px 1px #fffa,2px 0 0 #a79d8b,3px 2px 2px #0002}

/* Owner preview: finer linework for the four primary top controls. */
.framing-entry-page.framing-entry-top-icons-outline .framing-global-actions .outline-glyph{stroke-width:.85}
.framing-entry-page.framing-entry-top-icons-outline .framing-global-actions .favorite-top-button svg{stroke-width:.85;stroke-linecap:round;stroke-linejoin:round}

/* Keep fine top icon strokes crisp; glass button depth is independent. */
.framing-entry-page.framing-entry-top-icons-outline .framing-global-actions svg,
.framing-entry-page.framing-entry-top-icons-outline .framing-global-actions .outline-glyph{filter:none}

/* Explicit local contrast avoids white strokes blending only with their glass layer. */
.framing-entry-page.framing-entry-top-icons-outline .framing-global-actions button{color:var(--top-icon-ink,#292b30)}
.framing-entry-page.framing-entry-top-icons-outline .framing-global-actions svg{color:inherit;mix-blend-mode:normal;filter:none}
.framing-entry-page.framing-entry-top-icons-outline .framing-global-actions .outline-glyph{stroke:currentColor;filter:none}

/* Bottom labels follow their own backdrop, independently of icon ink. */
.framing-entry-page .framing-entry-dock :is(.fixed-slot-label,.framing-entry-tab-label,.frame-material-name,.mat-adjust-tab>span:last-child){color:var(--top-icon-ink,#292b30);text-shadow:none;mix-blend-mode:normal}
.text-size-settings{border-top:1px solid #aaa6;padding-top:12px;margin-top:18px}
.text-size-settings h2{font-size:14px;margin:0 0 10px}.text-size-settings>div{display:flex;gap:10px}
.text-size-settings button{flex:1;min-height:44px;border:1px solid #787080;border-radius:12px;color:#34303b;background:#fff8;font:inherit}
.text-size-settings button[aria-pressed="true"]{background:#63516f;color:#fff;border-color:#63516f}
.home-account-panel{max-height:calc(100svh - 44px);overflow-y:auto}
html[data-text-size="large"] .framing-entry-page .framing-entry-dock :is(.fixed-slot-label,.framing-entry-tab-label,.frame-material-name){font-size:15px;line-height:21px;max-width:68px}
html[data-text-size="large"] .framing-entry-dock :is(.fixed-slot-button,.framing-tab-button,.mat-adjust-tab,.frame-width-tab){grid-template-rows:58px 22px;min-height:83px}
html[data-text-size="large"] :is(.framing-info-display,.scene-navigation-hint,.light-tab-row,.global-inline-options){font-size:16px}
html[data-text-size="large"] .scene-navigation-hint :is(span,small){font-size:15px;line-height:1.5}
html[data-text-size="large"] .framing-info-display :is(strong,span,p){font-size:16px;line-height:1.5}
html[data-text-size="large"] .home-account-panel{left:20px;right:20px;max-width:none;font-size:18px}
html[data-text-size="large"] .home-account-panel :is(label,p,small,input,button,h2){font-size:18px;line-height:1.5}
html[data-text-size="large"] .home-account-panel header{font-size:22px}
html[data-text-size="large"] .home-cta span{font-size:20px}
html[data-text-size="large"] .yaji-page :is(p,label,button){font-size:18px}

html[data-text-size="large"] .framing-entry-page .framing-entry-dock button:has(>.fixed-slot-label){grid-template-rows:58px 22px;min-height:83px}

html[data-text-size="large"] .home-account-panel .text-size-settings button{font-size:18px;line-height:1.5}

/* Both hints belong to fixed viewport gesture bands, outside inset photos too. */
.background-gesture-zone.upper .scene-navigation-hint{animation-delay:0s}
.background-gesture-zone.lower .scene-navigation-hint{animation-delay:2s}

/* The guide owns the lower instruction area while visible. */
.framing-entry-page:has(.framing-info-display:not([hidden])) .background-gesture-zone.lower .scene-navigation-hint{visibility:hidden;animation-play-state:paused}
.framing-info-display{max-height:calc(100svh - 180px);overflow-y:auto;pointer-events:auto}
.framing-info-details{margin:3px 0 0;white-space:pre-line;font-size:11px;line-height:1.65;color:rgba(var(--info-ink),.78);text-align:left;width:100%}
.framing-info-measure{white-space:normal;font-weight:600}
.framing-info-action{padding-bottom:5px;border-bottom:1px solid rgba(var(--info-ink),.15)}

/* The guide occupies the centre gap between the top control pairs. */
.framing-info-display{padding:10px 9px;max-width:calc(100vw - 28px);text-align:center}

.framing-entry-page:has(.framing-info-display:not([hidden])) .background-gesture-zone.upper .scene-navigation-hint{visibility:hidden;animation-play-state:paused}

/* All top control levels share crisp adaptive linework. Glass stays on containers. */
.framing-entry-page :is(.framing-global-panel [data-panel-item],.light-tabs [data-light-tab],.light-tabs .free-sun-pad){color:var(--top-icon-ink,#292b30)}
.framing-entry-page :is(.global-option-glyph,.light-tab-row button>span,.free-sun){color:inherit;mix-blend-mode:normal;filter:none;text-shadow:none}
.framing-entry-page :is(.global-option-glyph,.light-tab-row button>span,.free-sun) svg{display:block;width:25px;height:25px;color:inherit;fill:none;stroke:currentColor;stroke-width:.85;stroke-linecap:round;stroke-linejoin:round;filter:none;mix-blend-mode:normal}
.framing-entry-page :is(.global-option-glyph,.light-tab-row button>span,.free-sun) svg *{fill:none;stroke:currentColor;stroke-width:.85;filter:none}

/* One calm typography style for every line of the display. */
.framing-info-display{--display-type-size:13px}
html[data-text-size="large"] .framing-info-display{--display-type-size:16px}
.framing-entry-page .framing-info-display :is(strong,span,p){font:400 var(--display-type-size)/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;color:rgba(var(--info-ink),.8);text-align:center;margin:0;padding:0;border:0}

/* Learned or expired guidance must stay hidden despite hint animations. */
.scene-navigation-hint[hidden]{display:none!important}

/* hint125: one short result label after a mobile preview gesture. */
.gesture-switch-feedback{position:absolute;z-index:120;bottom:calc(142px + env(safe-area-inset-bottom));left:50%;max-width:calc(100% - 48px);margin:0;padding:7px 15px;transform:translate(-50%,-5px);border:1px solid rgba(255,255,255,.72);border-radius:16px;background:rgba(248,246,240,.68);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 6px 18px rgba(42,37,31,.12),inset 0 1px rgba(255,255,255,.7);color:#514a41;font:500 12px/1.35 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none}
.gesture-switch-feedback[hidden]{display:none!important}.gesture-switch-feedback.is-visible{animation:gesture-switch-feedback 1.2s ease both}
@keyframes gesture-switch-feedback{0%{opacity:0;transform:translate(-50%,-5px)}12%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-2px)}}
@media(prefers-reduced-motion:reduce){.gesture-switch-feedback.is-visible{animation:none;opacity:1}}

/* icon-64: inset the background wheel while keeping its swipe offset and perspective. */
.framing-entry-page [data-entry-id="background"] .environment-wheel{transform:scale(.74) perspective(95px) rotateY(32deg);transform-origin:center}

/* info-65: artwork hover stays a compact two-line gesture hint. */
.framing-info-display[data-info-mode="artwork"]{padding:5px 6px;max-width:138px}
.framing-info-display [hidden]{display:none!important}
/* unity172 production: persistent, quiet navigation cues. */
.scene-navigation-hint{font-size:14px;font-weight:500;letter-spacing:.04em;color:rgba(57,53,45,.58);animation:scene-guidance-breathe 11s ease-in-out infinite}@keyframes scene-guidance-breathe{0%,14%,42%,100%{opacity:.16}22%,34%{opacity:.94}}.background-gesture-zone .scene-navigation-hint{animation:scene-guidance-breathe 11s ease-in-out infinite!important;opacity:.16;visibility:visible!important}.background-gesture-zone.upper .scene-navigation-hint>span::before{content:'↔ ';color:#809792}.background-gesture-zone.lower .scene-navigation-hint>span::before{content:'↕ ';color:#809792}@media(prefers-reduced-motion:reduce){.scene-navigation-hint{animation:none;opacity:.82}}

/* unity178: keep gesture guidance monochrome; avoid iOS rendering the lower arrow as a blue emoji. */
.background-gesture-zone.upper .scene-navigation-hint>span::before{content:'↔︎ '!important;color:#39352d!important;font-variant-emoji:text!important}
.background-gesture-zone.lower .scene-navigation-hint>span::before{content:none!important;display:none!important}

/* unity179: both directions are stated in words; centre the lower guide near the dock. */
.background-gesture-zone.upper .scene-navigation-hint>span::before{content:none!important;display:none!important}
.background-gesture-zone.lower .scene-navigation-hint{align-self:end;margin-bottom:clamp(28px,8vh,68px)}

/* layout184: the two hints and their gesture hit bands have fixed page slots. */
.framing-entry-page .background-gesture-zone{position:absolute!important;left:8px!important;right:8px!important;width:auto!important;max-height:none!important;z-index:2}
.framing-entry-page .background-gesture-zone.upper{top:96px!important;bottom:auto!important;height:76px!important}
.framing-entry-page .background-gesture-zone.lower{top:auto!important;bottom:122px!important;height:128px!important}
.framing-entry-page .background-gesture-zone.lower .scene-navigation-hint{align-self:center;margin-bottom:0}
.framing-entry-page .framing-global-actions{top:44px!important}
.framing-entry-page .framing-global-panel{top:94px!important}
@media(max-height:700px){.framing-entry-page .background-gesture-zone.upper{top:96px!important;height:62px!important}.framing-entry-page .background-gesture-zone.lower{bottom:96px!important;height:104px!important}}
.framing-entry-page[data-wide-presentation="true"] .background-gesture-zone.upper{top:calc(96px - var(--panorama-scene-top,278.664px))!important}
.framing-entry-page[data-wide-presentation="true"] .background-gesture-zone.lower{bottom:calc(122px - var(--panorama-scene-bottom,318.672px))!important}