.topbar{position:sticky;top:0;z-index:20;height:64px;padding:0 24px}
.header-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Lexend,system-ui;font-size:20px;font-weight:500}
.header-tools{display:flex;align-items:center;gap:5px;margin-right:48px}
.header-tools button{display:grid;place-items:center;width:42px;height:42px;padding:10px;border:0;background:transparent}
#editor-launch{top:11px;right:20px;bottom:auto;width:42px;height:42px;padding:10px;font-size:0;border:0;border-radius:50%;box-shadow:none;background:transparent;color:var(--text)}
#editor-launch:before{content:'';display:block;width:22px;height:22px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16 3 5 5-12 12-6 1 1-6L16 3Zm-1 4L6 16l-.5 2.5L8 18l9-9-2-2Z'/%3E%3C/svg%3E") center/contain no-repeat}
.editing-site #editor-launch{background:var(--accent-bg)}
.floating-dock{display:none}
.content:has(.room-groups){padding-top:22px}
@media(max-width:1100px){
 .shell{display:block}.shell>aside{display:none}.topbar{padding:0 16px}.content{padding:22px 16px 110px}
 .header-tools{gap:0;margin-right:42px}#editor-launch{right:12px}
 .floating-dock{position:fixed;display:flex;align-items:center;justify-content:center;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;width:300px;height:68px;padding:6px;border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:38px;background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 30px #0003,inset 0 1px 0 #ffffff20;transition:width .38s cubic-bezier(.22,1,.36,1),height .38s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1)}
 .floating-dock button{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-width:0;height:54px;border:0;border-radius:29px;background:transparent;padding:5px;color:var(--muted);font-size:11px;font-weight:500;transition:opacity .2s,color .2s}
 .floating-dock button svg{width:22px;height:22px}.floating-dock button[aria-current]{color:var(--text)}
 .dock-selection{position:absolute;left:6px;top:6px;width:calc((100% - 12px)/3);height:54px;border-radius:29px;background:color-mix(in srgb,var(--accent-bg) 85%,transparent);transform:translateX(calc(var(--tab)*100%));transition:transform .35s cubic-bezier(.22,1,.36,1)}
 .floating-dock.dock-collapsed{width:62px;height:62px;transform:translateX(-50%) translateY(4px)}
 .dock-collapsed button:not([aria-current]){display:none}.dock-collapsed button span{display:none}.dock-collapsed .dock-selection{inset:5px;width:auto;height:auto;transform:none}.dock-collapsed button{height:50px}
 .editing-site .floating-dock{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){.floating-dock,.floating-dock button,.dock-selection{transition:none}}
/* Theme icon reflects the current mode; its label describes the next action. */
.header-tools .theme-switch{position:relative;overflow:hidden}
.theme-switch>span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.theme-switch .theme-sun{opacity:0;transform:rotate(-90deg) scale(.4)}
.theme-switch .theme-moon{opacity:1;transform:rotate(0) scale(1)}
.light-theme .theme-switch .theme-sun{opacity:1;transform:rotate(0) scale(1)}
.light-theme .theme-switch .theme-moon{opacity:0;transform:rotate(90deg) scale(.4)}
body.theme-changing,body.theme-changing *{transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,fill .45s ease,stroke .45s ease}
body.theme-changing .theme-switch>span{transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s}
@media(prefers-reduced-motion:reduce){body.theme-changing,body.theme-changing *, .theme-switch>span{transition:none!important}}