/* The dock, bottom right. dock.js sets its states: "Explore sample room" (has-explore) from the 3D chapter to the end of
   the story, the back-to-top arrow (has-top) from Auto design on, and is-story while the story is pinned. Once the story
   has gone, the arrow carries its "Back to top" label; before that the label shows on hover. The dock rises above the footer. */
.story-sticky .story-bottom .explore-button{display:none!important}
.cx-finale-foot nav{display:none!important}

.cx-dock{position:fixed;right:3.5%;bottom:26px;z-index:56;display:flex;align-items:center;transform:translateY(calc(-1 * var(--cx-dock-lift,0px)));transition:opacity .9s var(--cx-ease)}
html.cx-opening .cx-dock{opacity:0;pointer-events:none}
.cx-dock-explore,.cx-dock-top{display:inline-flex;align-items:center;height:50px;margin:0;border-radius:999px;border:1px solid #302e2b1a;background:#fffffff2;color:var(--cx-ink);font:500 14px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;text-decoration:none;box-shadow:0 12px 30px #302e2b1f;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .3s var(--cx-ease),box-shadow .3s,background .6s,color .6s,border-color .6s,padding .45s var(--cx-ease),margin .45s var(--cx-ease),max-width .45s var(--cx-ease),border-width .45s,opacity .35s,visibility 0s}
.cx-dock-explore{gap:12px;padding:0 8px 0 20px}
.cx-dock-top{max-width:220px;margin-left:8px;padding:0 7px;overflow:hidden}
.cx-dock:not(.has-explore) .cx-dock-explore{opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .35s,transform .35s var(--cx-ease),visibility 0s .35s}
.cx-dock:not(.has-top) .cx-dock-top{max-width:0;margin-left:0;padding-left:0;padding-right:0;border-width:0;opacity:0;visibility:hidden;pointer-events:none;transition:max-width .45s var(--cx-ease),margin .45s var(--cx-ease),padding .45s var(--cx-ease),border-width .45s,opacity .3s,visibility 0s .45s}
.cx-dock-explore svg,.cx-dock-top svg{flex:none;box-sizing:content-box;width:16px;height:16px;padding:9px;border-radius:50%;background:var(--cx-brass);color:#fff;stroke:currentColor;fill:none;stroke-width:1.7;transition:transform .45s var(--cx-ease)}
.cx-dock-top svg{rotate:-90deg}
.cx-dock-explore:hover,.cx-dock-top:hover{transform:translateY(-2px);box-shadow:0 18px 40px #302e2b2e}
.cx-dock-explore:hover svg{transform:rotate(-18deg) scale(1.06)}
.cx-dock-explore:focus-visible,.cx-dock-top:focus-visible{outline:2px solid var(--cx-brass);outline-offset:3px}
.cx-dock-top span{max-width:0;overflow:hidden;opacity:0;transition:max-width .45s var(--cx-ease),margin .45s var(--cx-ease),opacity .3s}

/* After the story (and on hover before then) the arrow opens into "Back to top". */
.cx-dock.has-top:not(.is-story) .cx-dock-top,.cx-dock.has-top .cx-dock-top:focus-visible{padding-left:20px}
.cx-dock.has-top:not(.is-story) .cx-dock-top span,.cx-dock.has-top .cx-dock-top:focus-visible span{max-width:120px;margin-right:12px;opacity:1}
@media(hover:hover){
 .cx-dock.has-top .cx-dock-top:hover{padding-left:20px}
 .cx-dock.has-top .cx-dock-top:hover span{max-width:120px;margin-right:12px;opacity:1}
}

html[data-cx-act="2"] .cx-dock-explore,html[data-cx-act="2"] .cx-dock-top,html.cx-finale-dark .cx-dock-explore,html.cx-finale-dark .cx-dock-top{background:#1d1c1ae6;color:#f6f5f2;border-color:#f6f5f224}

/* "Scroll to discover" visibility is owned by cinema.js (hero only, hides on first scroll). */

/* The chapter footnote keeps clear of the dock's column (the dock is about 271px wide, 3.5% in from the right). */
@media(min-width:1000px){
 .story-sticky .scene-footnote{max-width:calc(93vw - 590px);white-space:normal!important;text-align:left;line-height:1.5;min-width:0}
}
@media(min-width:701px) and (max-width:999px){
 .story-sticky .scene-footnote{left:3.5%!important;right:auto!important;width:auto!important;max-width:calc(93vw - 295px);transform:none!important;text-align:left!important;line-height:1.5}
}

/* Phones: the dock owns the bottom right, and the footnote rests above it. */
@media(max-width:700px){
 .cx-dock{right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
 .cx-discover{left:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
 .story-sticky .scene-footnote{right:14px!important;bottom:74px!important}
 .cx-dock-explore,.cx-dock-top{height:46px;font-size:13.5px}
 .cx-dock-explore{gap:10px;padding:0 6px 0 16px}
 .cx-dock-top{padding:0 6px}
 .cx-dock-explore svg,.cx-dock-top svg{padding:8px}
 .cx-dock.has-top:not(.is-story) .cx-dock-top,.cx-dock.has-top .cx-dock-top:focus-visible{padding-left:16px}
 .cx-dock.has-top:not(.is-story) .cx-dock-top span,.cx-dock.has-top .cx-dock-top:focus-visible span{margin-right:10px}
 /* On the closing section the page already offers "Upload room photos"; the sample-room shortcut is
    redundant there, so drop it and let "Back to top" sit alone. */
 .cx-finale-cta .cx-dock .cx-dock-explore{display:none!important}
}
@media(prefers-reduced-motion:reduce){
 .cx-dock-explore,.cx-dock-top,.cx-dock-top span{transition:none!important}
}