@charset "UTF-8";:root{--bg-primary: #1a1d23;--bg-secondary: #242830;--bg-tertiary: #2d323c;--bg-elevated: #363c4a;--surface-glass: rgba(45, 50, 60, .85);--surface-overlay: rgba(0, 0, 0, .35);--accent-primary: #00d4aa;--accent-secondary: #00b894;--accent-hover: #00e6b8;--accent-glow: rgba(0, 212, 170, .3);--text-primary: #f0f2f5;--text-secondary: #a0a8b8;--text-muted: #6b7280;--border-subtle: rgba(255, 255, 255, .08);--border-active: rgba(0, 212, 170, .5);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--role-guest: #a0a8b8;--role-user: #f0f2f5;--role-trusted: #ffd54a;--role-helper: #75ff75;--role-mod: #00ffff;--role-admin: #287ac1;--role-noble: #ba95ff;--role-holy: #ffa0ae;--role-deity: #dd8d4d;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--transition-fast: .15s ease;--transition-normal: .25s ease;--space-unit: .25rem;--space-1: calc(var(--space-unit) * 1);--space-2: calc(var(--space-unit) * 2);--space-3: calc(var(--space-unit) * 3);--space-4: calc(var(--space-unit) * 4);--space-5: calc(var(--space-unit) * 5);--space-6: calc(var(--space-unit) * 6);--space-8: calc(var(--space-unit) * 8);--space-10: calc(var(--space-unit) * 10);--space-12: calc(var(--space-unit) * 12);--space-16: calc(var(--space-unit) * 16);--space-20: calc(var(--space-unit) * 20);--space-24: calc(var(--space-unit) * 24);--space-fluid-xs: clamp(.25rem, .5vw, .5rem);--space-fluid-sm: clamp(.5rem, 1vw, 1rem);--space-fluid-md: clamp(1rem, 2vw, 2rem);--space-fluid-lg: clamp(1.5rem, 3vw, 3rem);--space-fluid-xl: clamp(2rem, 4vw, 4rem);--text-xs: .6875rem;--text-sm: .75rem;--text-md: .8125rem;--text-base: .875rem;--text-lg: 1rem;--text-xl: 1.125rem;--text-fluid-xs: clamp(.625rem, .8vw, .75rem);--text-fluid-sm: clamp(.75rem, 1vw, .875rem);--text-fluid-md: clamp(.875rem, 1.2vw, 1rem);--text-fluid-lg: clamp(1rem, 1.5vw, 1.25rem);--tool-size: clamp(32px, 5vw, 48px);--swatch-size: clamp(20px, 3vw, 28px);--panel-width: clamp(160px, 20vw, 280px);--chat-width: clamp(280px, 35vw, 400px);--chat-height: clamp(320px, 50vh, 600px);--hud-btn-size: clamp(60px, 8vw, 80px);--hud-icon-size: clamp(28px, 4vw, 40px)}@media (max-width: 640px){:root{--space-unit: .2rem}}@media (min-width: 1536px){:root{--space-unit: .3rem}}*{box-sizing:border-box}body{margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;height:100vh;width:100vw;overflow:hidden;background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.text{font-family:Newsreader,serif}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}:root{--desktop-titlebar-height: 26px}#main{display:flex;width:100%;height:100%;background:linear-gradient(135deg,var(--bg-primary) 0%,#1e2228 100%)}body.desktop-window-chrome{box-sizing:border-box;height:100dvh;padding-top:var(--desktop-titlebar-height);overflow:hidden}body.desktop-window-chrome #desktopTitlebarMount{position:fixed;top:0;left:0;right:0;width:100%;height:var(--desktop-titlebar-height);z-index:12050}body.desktop-window-chrome #main{height:calc(100dvh - var(--desktop-titlebar-height));min-height:0}html[data-sidebar-side=left] #main{flex-direction:row-reverse}#boardContainer{display:flex;flex-direction:column;flex:1;position:relative;z-index:auto;cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;touch-action:none}#boardContainer.image-dragover:after{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;z-index:200;border:2px solid color-mix(in srgb,var(--accent-primary) 72%,white 12%);border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-primary) 24%,transparent),0 0 32px color-mix(in srgb,var(--accent-primary) 18%,transparent);pointer-events:none}#boards{position:absolute;top:0;left:0;box-shadow:var(--shadow-lg);border-radius:4px}#topBoard{z-index:2;pointer-events:none}#selectionOverlay{position:absolute;z-index:100;pointer-events:none}.userBoard{pointer-events:none;position:absolute;top:0;left:0;z-index:2}canvas{cursor:none;touch-action:none}.boardBtns{display:flex;align-items:center;gap:var(--space-2);padding:2px 6px;background:var(--surface-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);z-index:940;position:relative;flex-wrap:nowrap}.boardBtns .btn{height:28px;width:fit-content;padding:8px;line-height:1;display:inline-flex;align-items:center;justify-content:center}#flipCanvasBtn.iconBtn{width:28px;min-width:28px;padding:0}#flipCanvasBtn.iconBtn .btnText{display:none}#flipCanvasBtn.iconBtn .btnIcon{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}#flipCanvasBtn.iconBtn img{display:block;width:18px;height:18px;object-fit:contain;filter:brightness(0) invert(.7);transform:translate(4px);transition:filter var(--transition-fast)}#flipCanvasBtn.iconBtn:hover img{filter:brightness(0) invert(1)}#flipCanvasBtn.iconBtn.selected img{filter:brightness(0) invert(.1)}.btn.accent{background:linear-gradient(135deg,#7c3aed,#a855f7);border:1px solid #7c3aed;color:#fff}.btn.accent:hover{background:linear-gradient(135deg,#6d28d9,#9333ea);border-color:#6d28d9}.btn.menuBtn{display:none;font-size:18px;width:28px;min-width:28px;padding-left:0;padding-right:0;z-index:110;justify-content:center}.btn.menuBtn .menuIcon{line-height:1;display:flex;align-items:center;justify-content:center;margin-top:-2px}.collapsibleBtns{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.mirrorContainer,.devContainer{display:flex;align-items:center;gap:var(--space-1)}.zoomGroup{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.zoomBtns{display:flex;gap:4px}.zoomBtns .btn{width:28px;min-width:28px;padding:0}.zoomBtns .btn img{width:18px;height:18px;object-fit:contain;filter:brightness(0) invert(.7);transition:filter var(--transition-fast)}.zoomBtns .btn:hover img{filter:brightness(0) invert(1)}.zoomBtns .btn.selected img{filter:brightness(0) invert(.1)}#recordBtn{width:28px;min-width:28px;padding:0}.recordGlyph{width:12px;height:12px;border-radius:999px;background:#ef4444;box-shadow:0 0 0 1px #ffffff0f;transition:border-radius var(--transition-fast),transform var(--transition-fast),background var(--transition-fast)}#recordBtn:hover .recordGlyph{transform:scale(1.08)}#recordBtn.is-recording .recordGlyph{width:10px;height:10px;border-radius:2px;background:#f87171}#tapeRecBtn{display:inline-flex;align-items:center;justify-content:center;width:28px;min-width:28px;padding:0}#tapeRecBtn .tapeRecGlyph{width:10px;height:10px;border-radius:999px;background:#ef4444;box-shadow:0 0 0 1px #ffffff0f;transition:transform var(--transition-fast),background var(--transition-fast)}#tapeRecBtn.is-recording{background:#ef44442e;color:#fecaca}#tapeRecBtn.is-recording .tapeRecGlyph{animation:tape-rec-pulse 1.4s ease-in-out infinite}#tapeRecBtn .tapeRecElapsed{font-variant-numeric:tabular-nums;font-size:12px;opacity:.9}@keyframes tape-rec-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.55}}.saveUploadGroup{display:flex;gap:var(--space-2);flex-shrink:0}.mirrorOption,.devOption,.zoomPercent{padding:0 2px;font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap}.zoomPercent{min-width:42px;font-variant-numeric:tabular-nums}.devOption{color:var(--text-muted)}.devOption.active{color:var(--accent-primary)}.right{margin-left:auto;display:flex;gap:var(--space-2);align-items:center;flex:1 1 auto;min-width:0;justify-content:flex-end}.topbarScrollableActions{display:flex;align-items:center;gap:var(--space-2);min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent-primary) 58%,transparent) transparent}.topbarScrollableActions::-webkit-scrollbar{height:6px}.topbarScrollableActions::-webkit-scrollbar-track{background:transparent}.topbarScrollableActions::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent-primary) 58%,transparent);border-radius:999px}.topbarScrollableActions>*{flex-shrink:0}#disconnectBtn{flex-shrink:0}#chatBtn,#inboxBtn{position:relative}#chatBtn .chatBadge,#inboxBtn .chatBadge{position:absolute;top:-1px;right:-10px;display:none;min-width:16px;height:16px;align-items:center;justify-content:center;padding:0 5px;border-radius:999px;background:var(--accent-primary);color:var(--bg-primary);font-size:.68rem;font-weight:800;line-height:1;white-space:nowrap;box-shadow:0 0 0 2px color-mix(in srgb,var(--bg-elevated) 92%,black);pointer-events:none;z-index:1}.boardBtns.force-right-icon-collapse .saveUploadGroup .btn .btnText,.boardBtns.force-right-icon-collapse #inboxBtn .btnText,.boardBtns.force-right-icon-collapse #roomSettingsBtn .btnText,.boardBtns.force-right-icon-collapse #disconnectBtn .btnText{display:none}.boardBtns.force-right-icon-collapse .saveUploadGroup .btn .btnIcon,.boardBtns.force-right-icon-collapse #inboxBtn .btnIcon,.boardBtns.force-right-icon-collapse #roomSettingsBtn .btnIcon,.boardBtns.force-right-icon-collapse #disconnectBtn .btnIcon{display:inline-flex!important;align-items:center;justify-content:center;margin-right:0}.boardBtns.force-right-icon-collapse .saveUploadGroup .btn .btnIcon img,.boardBtns.force-right-icon-collapse #inboxBtn .btnIcon img,.boardBtns.force-right-icon-collapse #roomSettingsBtn .btnIcon img,.boardBtns.force-right-icon-collapse #disconnectBtn .btnIcon img{width:18px;height:18px;object-fit:contain;filter:brightness(0) invert(.7);transition:filter var(--transition-fast)}.boardBtns.force-right-icon-collapse .saveUploadGroup .btn .btnIcon svg,.boardBtns.force-right-icon-collapse #inboxBtn .btnIcon svg,.boardBtns.force-right-icon-collapse #roomSettingsBtn .btnIcon svg,.boardBtns.force-right-icon-collapse #disconnectBtn .btnIcon svg{display:block;width:18px;height:18px}.boardBtns.force-right-icon-collapse .saveUploadGroup .btn,.boardBtns.force-right-icon-collapse #inboxBtn,.boardBtns.force-right-icon-collapse #roomSettingsBtn,.boardBtns.force-right-icon-collapse #disconnectBtn{width:28px;min-width:28px;padding:0}.boardBtns.force-right-icon-collapse .saveUploadGroup .btn:hover .btnIcon img,.boardBtns.force-right-icon-collapse #inboxBtn:hover .btnIcon img,.boardBtns.force-right-icon-collapse #roomSettingsBtn:hover .btnIcon img,.boardBtns.force-right-icon-collapse #disconnectBtn:hover .btnIcon img{filter:brightness(0) invert(1)}.boardBtns.force-right-icon-collapse #chatBtn .btnIcon img{width:24px;height:24px}.boardBtns.force-right-icon-collapse #inboxBtn .btnIcon img{width:18px;height:18px}.boardBtns.force-right-icon-collapse #roomSettingsBtn .btnIcon svg,.boardBtns.force-right-icon-collapse #roomSettingsBtn .btnIcon path{fill:var(--accent-primary)}.boardBtns.force-left-icon-collapse #mirrorBtn .btnText,.boardBtns.force-left-icon-collapse #appSettingsBtn .btnText{display:none}.boardBtns.force-left-icon-collapse #mirrorBtn .btnIcon,.boardBtns.force-left-icon-collapse #appSettingsBtn .btnIcon{display:inline-flex!important;align-items:center;justify-content:center;margin-right:0}.boardBtns.force-left-icon-collapse #mirrorBtn .btnIcon img,.boardBtns.force-left-icon-collapse #appSettingsBtn .btnIcon img{width:18px;height:18px;object-fit:contain;filter:brightness(0) invert(.7);transition:filter var(--transition-fast)}.boardBtns.force-left-icon-collapse #mirrorBtn .btnIcon svg,.boardBtns.force-left-icon-collapse #appSettingsBtn .btnIcon svg{display:block;width:18px;height:18px}.boardBtns.force-left-icon-collapse #mirrorBtn,.boardBtns.force-left-icon-collapse #appSettingsBtn{width:28px;min-width:28px;padding:0}.boardBtns.force-left-icon-collapse #mirrorBtn:hover .btnIcon img,.boardBtns.force-left-icon-collapse #appSettingsBtn:hover .btnIcon img{filter:brightness(0) invert(1)}.boardBtns.force-menu-collapse .btn.menuBtn{display:inline-flex}.boardBtns.force-menu-collapse .collapsibleBtns{display:none;flex-direction:column;position:absolute;top:100%;left:8px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-3);box-shadow:var(--shadow-lg);z-index:1200;align-items:stretch;min-width:180px;gap:var(--space-3)}.boardBtns.force-menu-collapse .collapsibleBtns.show{display:flex!important;animation:menuFadeIn .2s ease}.boardBtns.force-menu-collapse .collapsibleBtns .btn{justify-content:flex-start;width:100%;min-width:0;height:36px;padding:8px}.boardBtns.force-menu-collapse .collapsibleBtns #mirrorBtn,.boardBtns.force-menu-collapse .collapsibleBtns #flipCanvasBtn,.boardBtns.force-menu-collapse .collapsibleBtns #appSettingsBtn{width:100%;min-width:0;padding:8px}.boardBtns.force-menu-collapse .collapsibleBtns .btnText,.boardBtns.force-menu-collapse .collapsibleBtns #mirrorBtn .btnText,.boardBtns.force-menu-collapse .collapsibleBtns #flipCanvasBtn .btnText,.boardBtns.force-menu-collapse .collapsibleBtns #appSettingsBtn .btnText{display:inline!important}.boardBtns.force-menu-collapse .collapsibleBtns .btnIcon,.boardBtns.force-menu-collapse .collapsibleBtns #mirrorBtn .btnIcon,.boardBtns.force-menu-collapse .collapsibleBtns #flipCanvasBtn .btnIcon,.boardBtns.force-menu-collapse .collapsibleBtns #appSettingsBtn .btnIcon{display:none!important;margin-right:8px}.boardBtns.force-menu-collapse .collapsibleBtns .mirrorContainer,.boardBtns.force-menu-collapse .collapsibleBtns .devContainer{justify-content:space-between;padding:0 var(--space-1)}@media (max-width: 1279px){.btn.menuBtn{display:inline-flex}.collapsibleBtns{display:none;flex-direction:column;position:absolute;top:100%;left:8px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-3);box-shadow:var(--shadow-lg);z-index:1200;align-items:stretch;min-width:180px;gap:var(--space-3)}.collapsibleBtns.show{display:flex!important;animation:menuFadeIn .2s ease}.collapsibleBtns .btn{justify-content:flex-start;width:100%;min-width:0;height:36px}.collapsibleBtns #mirrorBtn,.collapsibleBtns #flipCanvasBtn,.collapsibleBtns #appSettingsBtn{width:100%;min-width:0;padding:8px}.collapsibleBtns .btnText,.collapsibleBtns #mirrorBtn .btnText,.collapsibleBtns #flipCanvasBtn .btnText,.collapsibleBtns #appSettingsBtn .btnText{display:inline!important}.collapsibleBtns .btnIcon,.collapsibleBtns #mirrorBtn .btnIcon,.collapsibleBtns #flipCanvasBtn .btnIcon,.collapsibleBtns #appSettingsBtn .btnIcon{display:none!important;margin-right:8px}.collapsibleBtns .mirrorContainer,.collapsibleBtns .devContainer{justify-content:space-between;padding:0 var(--space-1)}.zoomPercent{padding:0 2px}}@media (max-width: 1023px){.saveUploadGroup .btn .btnText,#inboxBtn .btnText,#roomSettingsBtn .btnText,#disconnectBtn .btnText{display:none}.saveUploadGroup .btn .btnIcon,#inboxBtn .btnIcon,#roomSettingsBtn .btnIcon,#disconnectBtn .btnIcon{display:inline-flex!important;align-items:center;justify-content:center;margin-right:0}.saveUploadGroup .btn .btnIcon img,#inboxBtn .btnIcon img,#roomSettingsBtn .btnIcon img,#disconnectBtn .btnIcon img{width:18px;height:18px;object-fit:contain;filter:brightness(0) invert(.7);transition:filter var(--transition-fast)}.saveUploadGroup .btn .btnIcon svg,#inboxBtn .btnIcon svg,#roomSettingsBtn .btnIcon svg,#disconnectBtn .btnIcon svg{display:block;width:18px;height:18px}.saveUploadGroup .btn,#inboxBtn,#roomSettingsBtn,#disconnectBtn{width:28px;min-width:28px;padding:0}.saveUploadGroup .btn:hover .btnIcon img,#inboxBtn:hover .btnIcon img,#roomSettingsBtn:hover .btnIcon img,#disconnectBtn:hover .btnIcon img{filter:brightness(0) invert(1)}#chatBtn .btnIcon img{width:24px;height:24px}#inboxBtn .btnIcon img{width:18px;height:18px}#roomSettingsBtn .btnIcon svg,#roomSettingsBtn .btnIcon path{fill:var(--accent-primary)}}@media (max-width: 767px){.boardBtns{padding:6px 10px}}@media (max-width: 639px){.boardBtns{padding:6px 8px;gap:var(--space-1)}.zoomGroup{position:fixed;top:42px;left:92px;z-index:920;gap:var(--space-1);padding:2px;background:color-mix(in srgb,var(--bg-secondary) 94%,transparent);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}body.desktop-window-chrome .zoomGroup{top:calc(var(--desktop-titlebar-height) + 42px)}.right,.topbarScrollableActions,.saveUploadGroup{gap:var(--space-1)}}@keyframes menuFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}:root{--sidebar-width: 200px;--tools-width: 48px}#sideMenu{display:flex;flex-direction:row;height:100%;z-index:140;-webkit-user-select:none;user-select:none;flex-shrink:0;border-left:1px solid var(--border-subtle);background:var(--bg-secondary)}html[data-sidebar-side=left] #sideMenu{flex-direction:row-reverse;border-left:0;border-right:1px solid var(--border-subtle)}#toolOptions{display:flex;flex-direction:column;width:var(--sidebar-width);min-width:0;background:var(--bg-tertiary);border-left:1px solid var(--border-subtle);transition:width var(--transition-normal),opacity var(--transition-normal),transform var(--transition-normal);overflow:visible;position:relative;z-index:130}#toolOptions.collapsed{width:0;opacity:0;border-left-width:0;pointer-events:none;transform:translate(20px);overflow:hidden}#sidebarTop{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;touch-action:auto}#sidebarBottom{flex:0 0 auto;display:flex;flex-direction:column;border-top:1px solid var(--border-subtle);background:var(--bg-secondary);position:relative;z-index:131;overflow:visible}#sidebarResizeHandle{width:6px;margin-left:-3px;margin-right:-3px;cursor:col-resize;background:transparent;transition:background var(--transition-fast);z-index:120;flex-shrink:0;position:relative}#sidebarResizeHandle:hover,#sidebarResizeHandle.dragging{background:var(--accent-primary)}.resizing *{transition:none!important}.tools-resizer{position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;background:transparent;transition:background var(--transition-fast);z-index:10}.tools-resizer:hover,.tools-resizer.dragging{background:var(--accent-primary)}html[data-sidebar-side=left] #sidebarResizeHandle{order:-1}html[data-sidebar-side=left] .tools-resizer{right:auto;left:-2px}html[data-sidebar-side=left] #toolOptions{border-left:0;border-right:1px solid var(--border-subtle)}html[data-sidebar-side=left] #toolOptions.collapsed{border-right-width:0;transform:translate(-20px)}.tools{display:flex;flex-direction:column;gap:4px;padding:2px 0 0;background:var(--bg-secondary);width:var(--tools-width);flex-shrink:0;position:relative;z-index:1;align-items:center}#pickerContainer{width:100%;max-width:240px;margin:auto auto 0;transform-origin:bottom center;position:relative;z-index:132}@media (max-height: 750px){#pickerContainer{transform:scale(.9)}}@media (max-height: 650px){#pickerContainer{transform:scale(.8)}.paletteSection{margin-bottom:8px}}@media (max-height: 550px){#pickerContainer{transform:scale(.75)}.paletteSection,.paletteSection label{margin-bottom:4px}}.tool.btn.sidebarUtilityBtn,.tool.btn.sidebarToggleBtn{margin-bottom:0;border-radius:0;height:44px;width:100%;padding:0;display:flex;align-items:center;justify-content:center;font-size:20px;border:0;box-shadow:none}.tool.btn.sidebarUtilityBtn{margin-bottom:2px;background:color-mix(in srgb,var(--bg-elevated) 88%,var(--bg-secondary));color:var(--text-primary);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.tool.btn.sidebarUtilityBtn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.tool.btn.sidebarUtilityBtn img{width:18px;height:18px;display:block;filter:brightness(0) saturate(100%)}.tool.btn.sidebarToggleBtn{margin-bottom:10px;background:var(--accent-primary);color:var(--bg-primary);border-top:1px solid color-mix(in srgb,white 10%,transparent);border-bottom:1px solid color-mix(in srgb,black 16%,transparent)}.tool.btn.sidebarToggleBtn:hover,.tool.btn.sidebarToggleBtn.active{background:var(--accent-hover);color:var(--bg-primary)}.sidebarIcon{width:18px;height:18px;display:block;background-position:center;background-repeat:no-repeat;background-size:contain;color:transparent;font-size:0;line-height:0}html[data-sidebar-side=right] .sidebarToggleBtn .sidebarIcon{background-image:url(../images/collapse-right.svg)}html[data-sidebar-side=right] .sidebarToggleBtn.active .sidebarIcon{background-image:url(../images/collapse-left.svg)}html[data-sidebar-side=left] .sidebarToggleBtn .sidebarIcon{background-image:url(../images/collapse-left.svg)}html[data-sidebar-side=left] .sidebarToggleBtn.active .sidebarIcon{background-image:url(../images/collapse-right.svg)}.tool.btn{width:40px;height:40px;padding:2px;margin-inline:4px;border-radius:var(--radius-md);position:relative}.toolGroup{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;width:calc(100% - 8px)}.toolSubgroup{display:flex;flex-direction:column;gap:4px;width:100%;align-items:center}@media (max-height: 800px){#moveGroup .toolSubgroup{position:absolute;right:100%;top:-5px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:4px 12px 4px 4px;width:auto;display:none;box-shadow:var(--shadow-md);z-index:120;flex-direction:row}#moveGroup.is-open .toolSubgroup{display:flex}}@media (max-height: 800px) and (hover: hover) and (pointer: fine){#moveGroup:hover .toolSubgroup{display:flex}}@media (max-height: 800px){#moveGroup.is-suppressed .toolSubgroup{display:none}#moveGroup>.tool.btn:after{content:"◸";position:absolute;top:0;left:0;font-size:16px;line-height:1;color:var(--accent-primary);opacity:.8;pointer-events:none;transform:translate(-2px,-5px)}html[data-sidebar-side=left] #moveGroup .toolSubgroup{right:auto;left:100%;padding-right:4px;padding-left:12px}}@media (max-height: 700px){#shapesGroup .toolSubgroup{position:absolute;right:100%;top:-5px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:4px 12px 4px 4px;width:auto;display:none;box-shadow:var(--shadow-md);z-index:120;flex-direction:row}#shapesGroup.is-open .toolSubgroup{display:flex}}@media (max-height: 700px) and (hover: hover) and (pointer: fine){#shapesGroup:hover .toolSubgroup{display:flex}}@media (max-height: 700px){#shapesGroup.is-suppressed .toolSubgroup{display:none}#shapesGroup>.tool.btn:after{content:"◸";position:absolute;top:0;left:0;font-size:16px;line-height:1;color:var(--accent-primary);opacity:.8;pointer-events:none;transform:translate(-2px,-5px)}html[data-sidebar-side=left] #shapesGroup .toolSubgroup{right:auto;left:100%;padding-right:4px;padding-left:12px}}@media (max-height: 600px){#blurGroup .toolSubgroup{position:absolute;right:100%;top:-5px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:4px 12px 4px 4px;width:auto;display:none;box-shadow:var(--shadow-md);z-index:120;flex-direction:row}#blurGroup.is-open .toolSubgroup{display:flex}}@media (max-height: 600px) and (hover: hover) and (pointer: fine){#blurGroup:hover .toolSubgroup{display:flex}}@media (max-height: 600px){#blurGroup.is-suppressed .toolSubgroup{display:none}#blurGroup>.tool.btn:after{content:"◸";position:absolute;top:0;left:0;font-size:16px;line-height:1;color:var(--accent-primary);opacity:.8;pointer-events:none;transform:translate(-2px,-5px)}html[data-sidebar-side=left] #blurGroup .toolSubgroup{right:auto;left:100%;padding-right:4px;padding-left:12px}}.tool.btn.tool-disabled{opacity:.3;pointer-events:none}.tool.btn img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(.7);transition:filter var(--transition-fast)}.tool.btn:hover img,.tool.btn.selected img{filter:brightness(0) invert(1)}.tool.btn.selected img{filter:brightness(0) saturate(100%) invert(0) sepia(52%) saturate(1000%) hue-rotate(115deg) brightness(95%) contrast(101%)}#patternBtn img{width:85%;height:85%}#imageBrushBtn img{filter:none;opacity:.7}#imageBrushBtn:hover img,#imageBrushBtn.selected img{opacity:1}.selection-mode-container{display:flex;flex-direction:column;align-items:center;padding:8px 16px}.modeLabel{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}.radio-group{display:flex;flex-wrap:nowrap;gap:8px;width:100%}.pattern-control-row{display:grid;grid-template-columns:minmax(0,68px) minmax(0,1fr);align-items:center;gap:8px;width:100%;margin-top:8px}.pattern-control-row label{display:flex;align-items:center;justify-content:space-between;gap:4px;color:var(--text-secondary);font-size:11px;font-weight:600;min-width:0}.pattern-control-row select{width:100%;min-width:0;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:4px;padding:5px 7px;font:inherit}.pattern-control-row .sliderValue{color:var(--text-primary);font-variant-numeric:tabular-nums}.brush-mode-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}.radio-option{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:4px;cursor:pointer;transition:all .15s}.radio-option:hover{border-color:var(--accent-primary)}.radio-option input[type=radio],.radio-option input[type=checkbox]{display:none}.radio-option:has(input:checked){border-color:var(--accent-primary);background:var(--bg-elevated)}.radio-option:has(input:checked) span{color:var(--accent-primary);font-weight:600}.radio-option span{font-size:12px;color:var(--text-secondary)}.pattern-colour-mode{padding-left:10px;padding-right:10px}.selection-mode-container>.radio-group.pattern-colour-mode-group,.radio-group.pattern-colour-mode-group{width:auto;gap:6px;margin-bottom:6px;display:flex;flex-direction:row;flex-wrap:wrap}.radio-group.pattern-colour-mode-group>.radio-option{flex:1 1 calc(50% - 3px);min-width:0;padding:6px 10px;white-space:nowrap}.blendModeSelect{width:100%;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-primary);font-size:12px;cursor:pointer;outline:none;transition:all .15s;-webkit-user-select:none;user-select:none;touch-action:manipulation}.blendModeSelect:hover{border-color:var(--accent-primary)}.blendModeSelect:focus{border-color:var(--accent-primary);background:var(--bg-elevated)}#font-container .fontSelectWrap,#cursor-style-container .fontSelectWrap{position:relative}#font-container .fontSelectWrap:after,#cursor-style-container .fontSelectWrap:after{content:"";position:absolute;top:50%;right:12px;width:8px;height:8px;padding-top:10px;border-right:2px solid color-mix(in srgb,var(--accent-primary),white 18%);border-bottom:2px solid color-mix(in srgb,var(--accent-primary),white 18%);transform:translateY(-70%) rotate(45deg);pointer-events:none;opacity:.9}#font-container #cursor-style-container .fontSelectWrap:after,#cursor-style-container #cursor-style-container .fontSelectWrap:after{right:11px;width:4px;height:4px;padding-top:0;border-right-width:1px;border-bottom-width:1px;transform:translateY(-50%) rotate(45deg)}#font-container #font-select,#font-container #cursorStyleSelect,#cursor-style-container #font-select,#cursor-style-container #cursorStyleSelect{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:10px 38px 10px 12px;margin-top:9px;border:1px solid color-mix(in srgb,var(--accent-primary),transparent 72%);border-radius:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--bg-secondary),var(--accent-primary) 10%),color-mix(in srgb,var(--bg-elevated),var(--accent-primary) 18%));box-shadow:inset 0 1px color-mix(in srgb,white,transparent 90%),0 8px 18px color-mix(in srgb,black,transparent 85%);color:var(--text-primary);font-size:12px;font-weight:700;letter-spacing:.04em;cursor:pointer;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),background var(--transition-fast)}#font-container #cursorStyleSelect,#cursor-style-container #cursorStyleSelect{width:auto;min-width:132px;max-width:170px;padding:7px 22px 7px 10px;margin-top:7px;background:var(--bg-secondary);box-shadow:none;font-size:11px;letter-spacing:.02em}#font-container #cursorStyleSelect:hover,#cursor-style-container #cursorStyleSelect:hover{box-shadow:none;background:var(--bg-secondary)}#font-container #font-select:hover,#font-container #cursorStyleSelect:hover,#cursor-style-container #font-select:hover,#cursor-style-container #cursorStyleSelect:hover{border-color:color-mix(in srgb,var(--accent-primary),transparent 38%);box-shadow:inset 0 1px color-mix(in srgb,white,transparent 86%),0 10px 22px color-mix(in srgb,var(--accent-primary),transparent 82%)}#font-container #font-select:focus,#font-container #cursorStyleSelect:focus,#cursor-style-container #font-select:focus,#cursor-style-container #cursorStyleSelect:focus{border-color:var(--accent-primary);background:linear-gradient(135deg,color-mix(in srgb,var(--bg-elevated),var(--accent-primary) 18%),color-mix(in srgb,var(--bg-secondary),var(--accent-primary) 30%));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-primary),transparent 72%),0 12px 24px color-mix(in srgb,var(--accent-primary),transparent 80%)}#font-container #cursorStyleSelect:focus,#cursor-style-container #cursorStyleSelect:focus{background:var(--bg-secondary);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-primary),transparent 72%)}#font-container #cursor-style-container #cursorStyleSelect,#cursor-style-container #cursor-style-container #cursorStyleSelect{width:auto;min-width:132px;max-width:170px;padding:7px 22px 7px 10px;margin-top:7px;background:var(--bg-secondary);box-shadow:none;font-size:11px;letter-spacing:.02em}#font-container #cursor-style-container #cursorStyleSelect:hover,#cursor-style-container #cursor-style-container #cursorStyleSelect:hover{background:var(--bg-secondary);box-shadow:none}#font-container #cursor-style-container #cursorStyleSelect:focus,#cursor-style-container #cursor-style-container #cursorStyleSelect:focus{background:var(--bg-secondary);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-primary),transparent 72%)}#font-container #font-select option,#font-container #cursorStyleSelect option,#cursor-style-container #font-select option,#cursor-style-container #cursorStyleSelect option{background:var(--bg-secondary);color:var(--text-primary);font-weight:600}#layerPanel{padding:10px 16px;margin-bottom:12px}#layerPanel>label{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}#layerList{display:flex;flex-direction:column;gap:4px}.layerEntry{display:flex;align-items:center;gap:6px}.layerVisibility{width:24px;height:24px;padding:0;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:4px;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .15s;touch-action:manipulation}.layerVisibility:hover{border-color:var(--accent-primary)}.layerVisibility.is-hidden{opacity:.4}.layerButton{flex:1;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-secondary);font-size:12px;text-align:left;cursor:pointer;transition:all .15s;-webkit-user-select:none;user-select:none;touch-action:manipulation}.layerButton:hover{border-color:var(--accent-primary)}.layerButton.active{border-color:var(--accent-primary);background:var(--bg-elevated);color:var(--accent-primary);font-weight:600}#toolSliders,#toolExtras{padding:5px 10px 10px;overflow-y:auto;overflow-x:hidden;position:relative}#toolSliders .sliders.text-tool-order{display:flex;flex-direction:column}#toolSliders .sliders.text-tool-order #size-container{order:1}#toolSliders .sliders.text-tool-order #brush-opacity{order:2}#toolSliders .sliders.text-tool-order #font-container{order:3}#toolSliders .sliders.text-tool-order #text-render-mode-container{order:4}.resize-handle{height:6px;background:var(--bg-secondary);cursor:ns-resize;position:relative;flex-shrink:0;transition:background var(--transition-fast);display:flex;align-items:center;justify-content:center}.resize-handle:hover{background:var(--accent-primary)}.resize-handle:hover .resize-handle-line{background:var(--bg-primary)}.resize-handle:active{background:var(--accent-primary)}.resize-handle-line{width:40px;height:2px;background:var(--border-subtle);border-radius:1px;transition:background var(--transition-fast);pointer-events:none}#patternModeOptions .sliderContainer#pattern-scale{margin-top:8px}#patternModeOptions .dual-offset-container .sliderLabel{text-align:center;justify-content:center;margin-bottom:8px}#patternModeOptions .dual-offset-container .dual-offset-sliders{display:flex;gap:12px;align-items:center;justify-content:center}#patternModeOptions .dual-offset-container .offset-slider-group{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0}#patternModeOptions .dual-offset-container .offset-label{font-size:10px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}#patternModeOptions .dual-offset-container .slider{width:100%;max-width:80px}#patternModeOptions .dual-offset-container .offset-value{font-size:10px;min-width:28px;padding:1px 4px}.textRenderModeToggle{display:flex;gap:4px;border:1px solid var(--border-subtle);border-radius:6px;padding:2px;background:var(--bg-secondary, transparent)}.textRenderModeBtn{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--text-secondary);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:4px 6px;border-radius:4px;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.textRenderModeBtn:hover{color:var(--text-primary)}.textRenderModeBtn.active{background:var(--accent-primary);color:var(--text-on-accent, #fff)}#patternGallery{padding-top:16px;border-top:1px solid var(--border-subtle)}#patternGallery label{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}#patternBrushList{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}#fillPatternGallery{padding-top:16px;border-top:1px solid var(--border-subtle)}#fillPatternGallery label{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}#fillPatternBrushList{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}#fillPatternSettings .sliderContainer#fill-pattern-scale{margin-top:8px}#fillPatternSettings .dual-offset-container .sliderLabel{text-align:center;justify-content:center;margin-bottom:8px}#fillPatternSettings .dual-offset-container .dual-offset-sliders{display:flex;gap:12px;align-items:center;justify-content:center}#fillPatternSettings .dual-offset-container .offset-slider-group{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0}#fillPatternSettings .dual-offset-container .offset-label{font-size:10px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}#fillPatternSettings .dual-offset-container .slider{width:100%;max-width:80px}#fillPatternSettings .dual-offset-container .offset-value{font-size:10px;min-width:28px;padding:1px 4px}#selectionPatternSettings .sliderContainer#selection-pattern-scale{margin-top:8px}#selectionPatternSettings .dual-offset-container .sliderLabel{text-align:center;justify-content:center;margin-bottom:8px}#selectionPatternSettings .dual-offset-container .dual-offset-sliders{display:flex;gap:12px;align-items:center;justify-content:center}#selectionPatternSettings .dual-offset-container .offset-slider-group{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0}#selectionPatternSettings .dual-offset-container .offset-label{font-size:10px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}#selectionPatternSettings .dual-offset-container .slider{width:100%;max-width:80px}#selectionPatternSettings .dual-offset-container .offset-value{font-size:10px;min-width:28px;padding:1px 4px}#selectionPatternGallery{padding-top:16px;border-top:1px solid var(--border-subtle)}#selectionPatternGallery label{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}#selectionPatternBrushList{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}#userList{display:flex;flex-direction:column;gap:0px;padding:1px 2.5px 2.5px;background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);overflow-y:auto}.userListControls{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-bottom:2px}.userListSortLabel{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}.userListSort{min-width:102px;height:24px;padding:0 22px 0 8px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-tertiary);color:var(--text-primary);font-size:11px;line-height:1;cursor:pointer}.userListSort:hover{background:var(--bg-elevated)}.userEntry{display:flex;align-items:center;gap:2px;padding:1px 5px;background:var(--bg-tertiary);border-radius:var(--radius-sm);font-size:13px;transition:background-color .4s ease,box-shadow .4s ease}.userEntry.muted{border:1px dashed rgba(239,68,68,.45);background:#7f1d1d2e}.userEntry.recently-active{background:color-mix(in srgb,var(--accent-primary, #4ade80),var(--bg-tertiary) 82%);box-shadow:inset 2px 0 color-mix(in srgb,var(--accent-primary, #4ade80),transparent 25%)}.userEntry.recently-active :where(.listUser){color:#ffffffd9}.userGroup.recently-active>.groupHeader{background:color-mix(in srgb,var(--accent-primary, #4ade80),var(--bg-tertiary) 82%);box-shadow:inset 2px 0 color-mix(in srgb,var(--accent-primary, #4ade80),transparent 25%)}.userGroup.recently-active>.groupHeader :where(.listUser){color:#ffffffd9}.listColorTool{position:relative;width:22px;height:22px;flex-shrink:0}.listTool{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:5px;pointer-events:none}.listTool img,.toolIcon{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 2px rgba(0,0,0,.7))}.toolIcon{display:flex;align-items:center;justify-content:center;overflow:hidden}.toolIcon svg{width:100%;height:100%;display:block}.listColor{width:100%;height:100%;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);display:block}.userBadges{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;line-height:0}.userBadge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:0 0 15px;color:currentColor}.userBadge svg{width:100%;height:100%;display:block}.listUser{flex:1;color:#ffffff73;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.listUser.muted{color:#f87171e6;text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:#f87171bf}.listUser.self{color:#ffffff73;cursor:pointer}.listUser.self:hover{text-decoration:underline}.listUser.rank-guest{color:var(--role-guest)}.listUser.rank-user{color:var(--role-user)}.listUser.rank-trusted{color:var(--role-trusted)}.listUser.rank-helper{color:var(--role-helper)}.listUser.rank-mod{color:var(--role-mod)}.listUser.rank-admin{color:var(--role-admin)}.listUser.rank-noble{color:var(--role-noble);text-shadow:0 0 6px color-mix(in srgb,var(--role-noble),transparent 65%)}.listUser.rank-holy{color:var(--role-holy);text-shadow:0 0 6px color-mix(in srgb,var(--role-holy),transparent 60%)}.listUser.rank-deity{color:var(--role-deity);text-shadow:0 0 8px color-mix(in srgb,var(--role-deity),transparent 40%)}.userEntry.rank-noble{border:1px solid color-mix(in srgb,var(--role-noble),transparent 75%);box-shadow:0 0 6px color-mix(in srgb,var(--role-noble),transparent 85%),inset 0 0 6px color-mix(in srgb,var(--role-noble),transparent 94%)}.userEntry.rank-holy{border:1px solid color-mix(in srgb,var(--role-holy),transparent 70%);box-shadow:0 0 8px color-mix(in srgb,var(--role-holy),transparent 80%),inset 0 0 6px color-mix(in srgb,var(--role-holy),transparent 94%)}.userEntry.rank-deity{border:1px solid color-mix(in srgb,var(--role-deity),transparent 65%);box-shadow:0 0 10px color-mix(in srgb,var(--role-deity),transparent 75%),inset 0 0 8px color-mix(in srgb,var(--role-deity),transparent 92%)}.listSync{visibility:hidden;transition:opacity var(--transition-fast)}.userEntry:hover .listSync{visibility:visible;opacity:.6}.listSync:hover{opacity:1!important}.userGroup{position:relative;border-radius:var(--radius-sm);border:1.5px solid rgba(255,255,255,.18);margin-bottom:8px;background:var(--bg-secondary);transition:transform .2s ease,margin-bottom .3s ease;overflow:visible}.userGroup:before{content:"";position:absolute;z-index:-1;top:4px;left:4px;right:-4px;bottom:-4px;border:1.5px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);background:var(--bg-tertiary);pointer-events:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}.userGroup:after{content:"";position:absolute;z-index:-2;top:8px;left:8px;right:-8px;bottom:-8px;border:1.5px solid rgba(255,255,255,.06);border-radius:var(--radius-sm);background:var(--bg-secondary);pointer-events:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}.userGroup.expanded{margin-bottom:12px}.userGroup.expanded:before{transform:translate(2px,2px);opacity:.5}.userGroup.expanded:after{transform:translate(4px,4px);opacity:.2}.userGroup .groupHeader{cursor:pointer;border-radius:var(--radius-sm);position:relative;z-index:2;background:inherit}.userGroup .groupHeader:hover{background:var(--bg-elevated)}.groupCountBadge{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:500;color:#fff6;background:#ffffff12}.groupUsers{overflow:hidden;max-height:0;opacity:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease;border-top:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:1px;padding:0;background:#00000026;border-radius:0 0 var(--radius-sm) var(--radius-sm)}.groupUsers .userEntry{background:transparent;padding:6px 10px 6px 16px;border-radius:0;font-size:12px;opacity:.8}.groupUsers .userEntry:hover{background:#ffffff0a;opacity:1}.userGroup.expanded .groupUsers{max-height:1000px;opacity:1;padding:2px 0}.group-only{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;font-size:12px;font-weight:500;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation}.btn:focus,.btn:focus-visible{outline:none;box-shadow:none}.btn:hover{background:var(--bg-elevated);border-color:var(--accent-primary);color:var(--accent-primary)}.btn.selected{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--bg-primary)}.btn.selected:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--bg-primary)}.sliderLabel .lock-btn{background:none;border:none;cursor:pointer;font-size:14px;padding:0 2px;margin-left:auto;opacity:.5;transition:opacity var(--transition-fast),transform var(--transition-fast);-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:inherit}.sliderLabel .lock-btn img,.sliderLabel .lock-btn svg{width:14px;height:14px;filter:invert(1);display:block}.sliderLabel .lock-btn:hover{opacity:1;transform:scale(1.1)}.sliderLabel .lock-btn.locked{opacity:1}.sliderLabel .lock-btn:active{transform:scale(.95)}.sliderValue{cursor:ns-resize;-webkit-user-select:none;user-select:none;touch-action:none;padding:2px 6px;border-radius:var(--radius-sm);transition:all var(--transition-fast);position:relative;display:inline-block}.valueAdjuster{display:inline-flex;align-items:center;gap:2px;background:var(--bg-surface);border-radius:var(--radius-sm);padding:1px;border:1px solid var(--border-subtle)}.adjustBtn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--text-secondary);font-size:14px;font-weight:700;cursor:pointer;border-radius:3px;transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);-webkit-user-select:none;user-select:none}.adjustBtn:hover{background:var(--bg-elevated);color:var(--accent-primary)}.adjustBtn:active{background:var(--accent-primary);color:#fff;transform:scale(.9)}.sliderValue:hover{font-size:calc(1em + 2px);background:var(--bg-elevated);box-shadow:0 0 0 1px var(--accent-primary)}.sliderValue:hover:after{content:"⇕";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:1.2em;color:var(--accent-primary);opacity:.3;pointer-events:none;z-index:-1}.sliderValueInput{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield;display:inline-block;min-width:2ch;max-width:5ch;padding:0;margin:0;border:0;outline:0;background:transparent;color:inherit;font:inherit;line-height:inherit;text-align:center}.sliderValueInput::-webkit-outer-spin-button,.sliderValueInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.sliderValue:has(.sliderValueInput){cursor:text;background:var(--bg-elevated);box-shadow:0 0 0 1px var(--accent-primary)}.sliderValue:has(.sliderValueInput):after{display:none}#brush-file-input{padding:8px;font-size:12px;color:var(--text-secondary);background:var(--bg-elevated);border:1px dashed var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer}#brush-file-input:hover{border-color:var(--accent-primary)}#brushImage{width:100%;max-width:120px;height:auto;margin-top:12px;border-radius:var(--radius-sm);background:var(--bg-elevated);padding:8px;display:none!important}#brush-file-input{display:none!important}#brushGallery{padding-top:16px;border-top:1px solid var(--border-subtle)}#brushGallery label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}#brushList{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.brushItem{position:relative;aspect-ratio:1;background:var(--bg-elevated);border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;overflow:hidden;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;padding:4px}.brushItem:hover{border-color:var(--accent-primary);transform:scale(1.05)}.brushItem.selected{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-glow)}.brushGalleryHeader{display:flex;align-items:center;justify-content:space-between;gap:8px}.brushGalleryUnhideBtn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);border-radius:999px;background:var(--bg-elevated);color:var(--text-secondary);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;cursor:pointer}.brushGalleryUnhideBtn:hover{border-color:var(--accent-primary);color:var(--text-primary)}.brushItem img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.brushItem svg{width:100%;height:100%}.brushItemUpload{border:2px dashed var(--border-subtle);flex-direction:column;gap:4px;color:var(--text-secondary)}.brushItemUpload span{font-size:24px;line-height:1}.brushItemUpload small{font-size:10px;text-transform:uppercase;letter-spacing:.04em;max-width:100%;padding:0 2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brushFolder{margin-top:8px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden}.brushFolderHeader{display:flex;align-items:center;gap:6px;width:100%;padding:6px 10px;background:var(--bg-secondary);border:0;color:var(--text-secondary);cursor:pointer;font-size:11px;font-weight:600;text-align:left;text-transform:uppercase;letter-spacing:.04em}.brushFolderHeader:hover{color:var(--text-primary);background:var(--bg-elevated)}.brushFolderCaret{display:inline-block;width:10px;font-size:10px;transition:transform .15s}.brushFolder:not(.collapsed) .brushFolderCaret{transform:rotate(90deg)}.brushFolderLabel{flex:1;min-width:0}.brushFolderCount{font-size:10px;color:var(--text-secondary);background:var(--bg-elevated);padding:1px 7px;border-radius:999px;letter-spacing:0}.brushFolderContent{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px}.brushFolder.collapsed .brushFolderContent{display:none}.brushItem.pendingRemoval{border-color:#c96a2b;box-shadow:0 0 0 2px #c96a2b40}.brushConfirmAction{position:absolute;left:50%;bottom:6px;transform:translate(-50%);border:0;border-radius:999px;padding:5px 10px;font-size:10px;font-weight:700;background:#8c1d1d;color:#fff;cursor:pointer}.dual-slider{position:relative;height:6px;background:var(--bg-elevated);border-radius:3px;margin-top:10px}.dual-slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;top:0;left:0;width:100%;height:6px;background:transparent;pointer-events:none;margin:0;padding:0;outline:none;touch-action:none}.dual-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent-primary);border-radius:4px;cursor:pointer;pointer-events:auto;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.dual-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 0 4px var(--accent-glow)}.dual-slider input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--accent-primary);border:none;border-radius:4px;cursor:pointer;pointer-events:auto}.pressureToggle{display:inline-flex;align-items:center;gap:2px;cursor:pointer;margin:0;font-size:10px}.pressureToggle input[type=checkbox]{width:14px;height:14px;cursor:pointer;margin:0;accent-color:var(--accent-primary)}#colorPalette{padding:5px;border-top:2px solid var(--border-subtle)}.paletteSection{margin-bottom:12px}.paletteSection:last-child{margin-bottom:0}.paletteSection label{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.paletteHint{font-size:9px;font-weight:400;color:var(--text-muted);text-transform:none;letter-spacing:0}.swatchGrid{display:flex;flex-wrap:wrap;gap:2px}.swatch{width:22px;height:22px;border:2px solid transparent;border-radius:4px;cursor:pointer;transition:all var(--transition-fast);position:relative}.swatch:hover{transform:scale(1.15);border-color:var(--text-primary);z-index:1}.swatch.selected{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-glow)}.swatch.addSwatch{background:var(--bg-elevated);border:2px dashed var(--border-subtle);color:var(--text-muted);font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center}.swatch.addSwatch:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.1)}.swatch.empty{background:var(--bg-elevated);border:1px solid var(--border-subtle);cursor:default;opacity:.3}.swatch.empty:hover{transform:none;border-color:var(--border-subtle)}.colorInputBtn{position:absolute;bottom:8px;left:6px;right:auto;width:28px;height:28px;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;z-index:120}html[data-sidebar-side=left] .colorInputBtn{left:auto;right:6px}.colorInputBtn:hover{background:var(--bg-elevated);color:var(--accent-primary);border-color:var(--border-active);transform:scale(1.05)}.colorInputMenu{position:absolute;bottom:50px;left:-29px;right:auto;width:200px;height:200px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:220;overflow:hidden}html[data-sidebar-side=left] .colorInputMenu{left:auto;right:-24px}.colorInputHeader{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 0;background:var(--bg-tertiary);border-bottom:1px solid var(--border-subtle)}.colorInputTabs{display:flex;gap:4px}.colorInputTab{padding:6px 12px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:11px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.5px}.colorInputTab:hover{background:var(--bg-secondary);color:var(--text-primary)}.colorInputTab.active{background:var(--accent-primary);color:var(--bg-primary)}.colorInputClose{background:transparent;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer;padding:0 4px;line-height:1;transition:color var(--transition-fast)}.colorInputClose:hover{color:var(--text-primary)}.colorInputBody{padding:12px}.colorInputMode{display:flex;flex-direction:column;gap:10px}.colorInputField{display:flex;align-items:center;gap:8px}.colorInputField label{width:20px;font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase}.colorInputField input{flex:1;padding:6px 8px;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;font-family:Inter,monospace;transition:border-color var(--transition-fast)}.colorInputField input:focus{outline:none;border-color:var(--border-active)}.colorInputField .fieldUnit{width:20px;font-size:11px;color:var(--text-muted);text-align:left}.colorInputField input[type=number]::-webkit-inner-spin-button,.colorInputField input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.colorInputField input[type=number]{-moz-appearance:textfield}#pickerContainer{position:relative}.colorInputField.hexField input{flex:1;width:50%;font-family:Inter,monospace;letter-spacing:.5px}.colorInputField.hexField label{color:var(--text-primary)}#pickerContainer{border-top:1px solid var(--border-subtle);overflow:visible}#colorPicker,.boardColorPicker{display:flex;justify-content:center;align-items:center;overflow:visible;width:100%;max-width:100%;padding:36px 10px 14px;box-sizing:border-box;position:relative}#colorPicker .reinvented-color-wheel,.boardColorPicker .reinvented-color-wheel{display:inline-flex;max-width:100%}.boardColorPickerPanel{position:absolute;right:1px;bottom:1px;width:116px;min-width:96px;max-width:236px;z-index:75;background:color-mix(in srgb,var(--bg-secondary) 92%,transparent);border:1px solid color-mix(in srgb,var(--border-subtle) 78%,transparent);border-radius:8px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);container-type:inline-size;display:none;pointer-events:auto;touch-action:none}@media (max-width: 768px),(max-height: 650px){.boardColorPickerPanel{display:block}}.boardColorPicker{padding:2px}.boardColorPicker .reinvented-color-wheel{margin:auto}.boardColorPickerDragHandle{position:absolute;top:-11px;left:50%;width:34px;height:11px;padding:0;transform:translate(-50%);border:0;border-radius:9px 9px 3px 3px;background:linear-gradient(currentColor,currentColor) center 5px/18px 2px no-repeat,color-mix(in srgb,var(--bg-secondary) 95%,black);color:color-mix(in srgb,var(--text-secondary) 72%,transparent);cursor:grab;box-shadow:0 -1px 4px color-mix(in srgb,black 32%,transparent);z-index:4}.boardColorPickerDragHandle:active{cursor:grabbing}.boardColorPickerScaleHandle{position:absolute;top:1px;left:1px;width:18px;height:18px;padding:0;border:0;border-radius:4px;background:transparent;color:color-mix(in srgb,var(--text-secondary) 78%,transparent);cursor:nwse-resize;z-index:4}.boardColorPickerScaleHandle:before{content:"";position:absolute;top:2px;right:4px;bottom:4px;left:2px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L11 1 M1 7L7 1 M1 3L3 1' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L11 1 M1 7L7 1 M1 3L3 1' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}.colorSlotControls{position:absolute;top:8px;left:10px;width:42px;height:42px;z-index:2}.colorPickerHexField{position:absolute;top:8px;right:10px;display:flex;align-items:center;z-index:2}.colorPickerPopoutButton{position:absolute;right:8px;bottom:8px;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:color-mix(in srgb,var(--bg-secondary) 94%,black);color:color-mix(in srgb,var(--text-secondary) 82%,transparent);cursor:pointer;box-shadow:0 1px 4px color-mix(in srgb,black 28%,transparent);display:grid;place-items:center;transition:transform var(--transition-fast),color var(--transition-fast),background var(--transition-fast),opacity var(--transition-fast);z-index:3}.colorPickerPopoutButton:hover{transform:translateY(-1px);color:var(--text-primary);background:color-mix(in srgb,var(--bg-secondary) 88%,black)}.colorPickerPopoutButton:active{transform:translateY(0)}.colorPickerPopoutButton svg{display:block}.colorPickerHexField input{width:76px;padding:4px 6px;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;font-family:Inter,monospace;letter-spacing:.5px;text-transform:uppercase;transition:border-color var(--transition-fast)}.colorPickerHexField input:focus{outline:none;border-color:var(--border-active)}.colorSlotSwatch{border:1px solid color-mix(in srgb,var(--border-subtle) 85%,transparent);box-shadow:var(--shadow-sm)}.colorSlotSwatch{position:absolute;width:24px;height:24px;padding:0;border-radius:5px;cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}.colorSlotSwatch.primary{top:0;left:0;z-index:2}.colorSlotSwatch.secondary{right:4px;bottom:0;z-index:1}.colorSlotSwatch.active{border-color:var(--accent-primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-primary) 45%,transparent),var(--shadow-sm)}.colorSlotSwatch:hover{transform:translateY(-1px);border-color:var(--border-active)}.colorSlotSwap{position:absolute;top:0;right:0;width:14px;height:14px;padding:0;border:0;border-radius:4px;background-color:transparent;background-image:url(../images/swatch-switch.svg);background-position:center;background-repeat:no-repeat;background-size:12px 12px;box-shadow:none;filter:brightness(0) saturate(100%) invert(86%) sepia(7%) saturate(243%) hue-rotate(180deg) brightness(94%) contrast(88%);font-size:0;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(180deg);transition:transform var(--transition-fast),opacity var(--transition-fast);opacity:.82;z-index:3}.colorSlotSwap:hover{transform:rotate(180deg) scale(1.05);filter:brightness(0) saturate(100%) invert(96%) sepia(4%) saturate(180%) hue-rotate(180deg) brightness(102%) contrast(92%);opacity:1}#colorPicker .reinvented-color-wheel--hue-wheel,#colorPicker .reinvented-color-wheel--sv-space,#colorPicker .reinvented-color-wheel--hue-handle,#colorPicker .reinvented-color-wheel--sv-handle,.boardColorPicker .reinvented-color-wheel--hue-wheel,.boardColorPicker .reinvented-color-wheel--sv-space,.boardColorPicker .reinvented-color-wheel--hue-handle,.boardColorPicker .reinvented-color-wheel--sv-handle{cursor:crosshair!important}.boardColorPickerPanel .dockablePanelDragHandle{position:absolute;top:-11px;left:50%;width:34px;height:11px;padding:0;transform:translate(-50%);border:0;border-radius:9px 9px 3px 3px;background:linear-gradient(currentColor,currentColor) center 5px/18px 2px no-repeat,color-mix(in srgb,var(--bg-secondary) 95%,black);color:color-mix(in srgb,var(--text-secondary) 72%,transparent);cursor:grab;box-shadow:0 -1px 4px color-mix(in srgb,black 32%,transparent);z-index:4}.boardColorPickerPanel .dockablePanelDragHandle:active{cursor:grabbing}.boardColorPickerPanel .dockablePanelResizeHandle{position:absolute;top:1px;left:1px;width:18px;height:18px;padding:0;border:0;border-radius:4px;background:transparent;color:color-mix(in srgb,var(--text-secondary) 78%,transparent);cursor:nwse-resize;z-index:4}.boardColorPickerPanel .dockablePanelResizeHandle:before{content:"";position:absolute;top:2px;right:4px;bottom:4px;left:2px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L11 1 M1 7L7 1 M1 3L3 1' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L11 1 M1 7L7 1 M1 3L3 1' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}.sliders{display:flex;flex-direction:column;gap:0px}.sliderContainer{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.sliderContainer label,.sliderContainer .sliderLabel{display:flex;justify-content:flex-start;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.sliderLabel{margin-bottom:-3px}.sliderContainer .sliderLabel>.pressureToggle{flex:0 1 auto;min-width:0;white-space:nowrap}.sliderContainer .sliderLabel>.sliderValue,.sliderContainer .sliderLabel>.valueAdjuster{flex:0 0 auto}.sliderContainer .sliderLabel>.sliderValue{padding:2px 4px;min-width:32px}.sliderValue{font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;font-size:11px;font-weight:500;color:var(--accent-primary);background:var(--bg-elevated);padding:2px 6px;border-radius:4px;min-width:36px;text-align:center;touch-action:none}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--bg-elevated);border-radius:3px;outline:none;cursor:pointer;touch-action:none}.sliderContainer>.slider,.sliderContainer>#sizeSliderMount,.sliderContainer>#thinningSlider>.slider{margin-top:10px}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent-primary);border-radius:4px;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 0 4px var(--accent-glow)}.slider::-moz-range-thumb{width:16px;height:16px;background:var(--accent-primary);border:none;border-radius:4px;cursor:pointer}.cursors{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3;--cursor-label-scale: 1}#cursorsSvg{width:100%;height:100%;z-index:3}.cursor{position:absolute;pointer-events:none;height:204px;width:204px;left:0;top:0;will-change:transform}.self.square,.self.crosshair{display:none}.name{position:absolute;pointer-events:none;font-size:11px;font-weight:500;color:#2f374580;text-shadow:0 0 1px rgba(255,255,255,.45);top:80px;left:105px;white-space:nowrap;transform-origin:left top;transform:scale(var(--cursor-label-scale));text-rendering:geometricPrecision}.text{position:absolute;top:95px;left:105px;white-space:pre;display:inline-block;width:max-content;transform-origin:left top;transform:scale(var(--cursor-label-scale));text-rendering:geometricPrecision}.text.self{display:none}.textInput{overflow:hidden;font-family:Newsreader,serif}body.remote-users-hidden .cursors .cursor:not(.self),body.remote-users-hidden #cursorsSvg .circle:not(.self),body.remote-users-hidden #cursorsSvg .square:not(.self),body.remote-users-hidden #cursorsSvg .crosshair:not(.self),body.remote-users-hidden #userBoards .userBoard,body.remote-users-hidden #userList .userEntry:not(.self),body.remote-users-hidden #userList .userGroup{display:none!important}.toast{position:fixed;top:80px;left:50%;transform:translate(-50%) translateY(-20px);padding:10px 20px;background:var(--surface-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--accent-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-md),0 0 20px var(--accent-glow);color:var(--text-primary);font-size:13px;font-weight:500;z-index:10100;opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease;pointer-events:none}.toast.show{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.toast.error{border-color:#e74c3c;box-shadow:var(--shadow-md),0 0 20px #e74c3c4d;color:#e74c3c}.toast.global{padding:12px 22px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:260px;text-align:center;border-color:#ffb648;background:linear-gradient(135deg,#2d323ceb,#46321eeb 35%,#5f3c19eb,#46321eeb 65%,#2d323ceb);background-size:220% 220%;box-shadow:var(--shadow-md),0 0 0 1px #ffb64873,0 0 28px #ffb6488c;font-weight:600;animation:toastGlobalPulse 1.6s ease-in-out infinite,toastGlobalGradient 6s ease-in-out infinite}.toast__badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-sm, 4px);background:linear-gradient(135deg,#ffd166,#ffb84d,#ff8a3d,#ffb84d,#ffd166);background-size:220% 220%;color:#1b1208;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.25);box-shadow:0 0 12px #ffb64899;animation:toastGlobalGradient 4s ease-in-out infinite}.toast__text{color:#fff;font-size:14px;line-height:1.35;text-shadow:0 0 6px rgba(255,255,255,.85),0 0 14px rgba(255,220,150,.7),0 0 24px rgba(255,182,72,.5);animation:toastGlobalTextShine 2.4s ease-in-out infinite}@keyframes toastGlobalPulse{0%,to{box-shadow:var(--shadow-md),0 0 0 1px #ffb64873,0 0 22px #ffb64873}50%{box-shadow:var(--shadow-md),0 0 0 1px #ffb648bf,0 0 36px #ffb648cc}}@keyframes toastGlobalGradient{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes toastGlobalTextShine{0%,to{text-shadow:0 0 6px rgba(255,255,255,.85),0 0 14px rgba(255,220,150,.7),0 0 24px rgba(255,182,72,.5)}50%{text-shadow:0 0 10px rgb(255,255,255),0 0 22px rgba(255,230,170,.9),0 0 36px rgba(255,182,72,.75)}}.snapshotJoinToast{position:fixed;top:80px;left:50%;display:flex;align-items:stretch;gap:0;background:var(--surface-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--accent-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-md),0 0 20px var(--accent-glow);overflow:hidden;z-index:10100;max-width:380px;opacity:0;transform:translate(-50%) translateY(-12px);transition:opacity .25s ease,transform .25s ease;pointer-events:all}.snapshotJoinToast.show{opacity:1;transform:translate(-50%) translateY(0)}.snapshotJoinToast__thumb{width:90px;min-width:90px;object-fit:cover;display:block;border-right:1px solid var(--accent-primary)}.snapshotJoinToast__body{padding:10px 12px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.snapshotJoinToast__title{font-size:12px;font-weight:600;color:var(--text-primary)}.snapshotJoinToast__meta{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.snapshotJoinToast__actions{display:flex;gap:6px;margin-top:6px}.savingPopup{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#070b1459;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10200;opacity:0;visibility:hidden;transition:opacity .2s ease;pointer-events:all}.savingPopup.show{opacity:1;visibility:visible}.savingPopup__card{display:flex;align-items:center;gap:10px;min-width:170px;padding:12px 16px;border-radius:var(--radius-md);border:1px solid var(--accent-primary);background:var(--surface-glass);box-shadow:var(--shadow-md),0 0 20px var(--accent-glow);color:var(--text-primary)}.savingPopup__spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.22);border-top-color:var(--accent-primary);border-radius:50%;animation:savingPopupSpin .75s linear infinite}.savingPopup__text{font-size:13px;font-weight:600}@keyframes savingPopupSpin{to{transform:rotate(360deg)}}.disconnectionBanner{position:fixed;top:90px;left:50%;transform:translate(-50%) translateY(-100%);z-index:13000;opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease;pointer-events:none}.disconnectionBanner.show{opacity:1;visibility:visible;transform:translate(-50%) translateY(0);pointer-events:auto}.disconnectionContent{display:flex;align-items:center;gap:16px;padding:14px 20px;background:#282828f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,150,0,.5);border-radius:var(--radius-md);box-shadow:var(--shadow-lg),0 0 24px #ff960033;min-width:400px;max-width:90vw}.disconnectionIcon{font-size:20px;flex-shrink:0}.disconnectionText{color:var(--text-primary);font-size:14px;font-weight:500;flex:1;white-space:normal;min-width:0}.disconnectionActions{display:flex;gap:8px;flex-shrink:0}.disconnectionActions .btn{font-size:12px;padding:6px 14px;min-width:unset;white-space:nowrap}.disconnectionActions .btn.small{padding:6px 14px}.disconnectionActions .btn.loading,.disconnectionActions .btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px){.disconnectionContent{flex-direction:column;align-items:flex-start;gap:12px;min-width:unset;width:calc(100vw - 32px)}.disconnectionActions{width:100%;justify-content:stretch}.disconnectionActions .btn{flex:1}.disconnectionText{white-space:normal}}.viewHud{position:fixed;bottom:16px;left:16px;z-index:100;display:flex;flex-direction:row;gap:6px;-webkit-user-select:none;user-select:none;pointer-events:auto}@media (max-width: 639px){.viewHud{bottom:8px;left:8px;gap:4px;min-height:48px;min-width:52px}}html[data-sidebar-side=left] .viewHud{left:auto;right:16px}@media (max-width: 639px){html[data-sidebar-side=left] .viewHud{left:auto;right:8px}}.viewHudBtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:80px;height:80px;font-family:inherit;font-size:0;color:#787878b3;background:#50505040;border:1px solid rgba(120,120,120,.3);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);padding:0;pointer-events:auto}@media (max-width: 767px){.viewHudBtn{width:64px;height:64px;gap:2px}}@media (max-width: 639px){.viewHudBtn{width:48px;height:48px;gap:0;border-radius:4px}}.viewHudBtn:hover{color:var(--accent-primary);border-color:var(--accent-primary)}.viewHudBtn:active{transform:scale(.93)}.hudBtnIcon{font-size:40px;font-weight:400;line-height:1}@media (max-width: 767px){.hudBtnIcon{font-size:32px}}@media (max-width: 639px){.hudBtnIcon{font-size:24px}}.hudBtnIcon img{display:block;width:40px;height:40px}@media (max-width: 767px){.hudBtnIcon img{width:32px;height:32px}}@media (max-width: 639px){.hudBtnIcon img{width:20px;height:20px}}.hudBtnLabel{font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;line-height:1}@media (max-width: 639px){.hudBtnLabel{font-size:8px;letter-spacing:0}}.contextMenu{position:fixed;z-index:10000;background:var(--surface-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:6px;min-width:180px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:2px}.contextMenu .menuItem{display:block;width:100%;padding:6px 10px;background:transparent;color:var(--text-primary);border:none;border-radius:var(--radius-sm);text-align:left;font-size:14px;cursor:pointer;transition:all var(--transition-fast)}.contextMenu .menuItem:hover{background:var(--bg-elevated);color:var(--accent-primary)}.contextMenu .menuItem.danger{color:#ef4444}.contextMenu .menuItem.danger:hover{background:#ef44441a}.contextMenu .menuDivider{height:1px;background:var(--border-subtle);margin:4px 0}.contextMenu .menuInfo{display:none;flex-direction:column;gap:6px;padding:8px 10px 10px;border-bottom:1px solid var(--border-subtle);margin-bottom:4px}.contextMenu .menuInfoRow{display:flex;flex-direction:column;gap:2px}.contextMenu .menuInfoLabel{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.contextMenu .menuInfoValue{font-size:13px;color:var(--text-primary);word-break:break-word}.contextMenu .menuInfoName{font-size:14px;font-weight:700}.contextMenu .menuInfoName.rank-guest{color:var(--role-guest)}.contextMenu .menuInfoName.rank-user{color:var(--role-user)}.contextMenu .menuInfoName.rank-trusted{color:var(--role-trusted)}.contextMenu .menuInfoName.rank-helper{color:var(--role-helper)}.contextMenu .menuInfoName.rank-mod{color:var(--role-mod)}.contextMenu .menuInfoName.rank-admin{color:var(--role-admin)}.contextMenu .menuInfoName.rank-noble{color:var(--role-noble);text-shadow:0 0 6px color-mix(in srgb,var(--role-noble),transparent 65%)}.contextMenu .menuInfoName.rank-holy{color:var(--role-holy);text-shadow:0 0 6px color-mix(in srgb,var(--role-holy),transparent 60%)}.contextMenu .menuInfoName.rank-deity{color:var(--role-deity);text-shadow:0 0 8px color-mix(in srgb,var(--role-deity),transparent 40%)}.roleBadge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.roleBadge.mod{background:color-mix(in srgb,var(--role-mod),transparent 80%);color:var(--role-mod)}.roleBadge.admin{background:color-mix(in srgb,var(--role-admin),transparent 80%);color:var(--role-admin)}.selfRoleInfo{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px}.selfRoleLabel{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.5;color:var(--text-primary)}.selfRoleName{font-size:16px;font-weight:700;color:var(--text-primary)}.selfRoleName.rank-guest{color:var(--role-guest)}.selfRoleName.rank-user{color:var(--role-user)}.selfRoleName.rank-trusted{color:var(--role-trusted)}.selfRoleName.rank-helper{color:var(--role-helper)}.selfRoleName.rank-mod{color:var(--role-mod)}.selfRoleName.rank-admin{color:var(--role-admin)}.selfRoleName.rank-noble{color:var(--role-noble);text-shadow:0 0 8px color-mix(in srgb,var(--role-noble),transparent 60%)}.selfRoleName.rank-holy{color:var(--role-holy);text-shadow:0 0 8px color-mix(in srgb,var(--role-holy),transparent 50%)}.selfRoleName.rank-deity{color:var(--role-deity);text-shadow:0 0 10px color-mix(in srgb,var(--role-deity),transparent 30%)}#bottomBar,#timeline,.bottomBarBtns{display:none}#strokeHistoryPanel{padding:12px;background:var(--bg-secondary);border-radius:var(--radius-md);margin-top:12px;border:1px dashed var(--accent-primary)}#strokeHistoryPanel label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-primary);margin-bottom:8px}.strokeHistoryHint{font-weight:400;color:var(--text-muted);text-transform:none;letter-spacing:normal}#strokeHistoryContent{display:flex;flex-direction:column;gap:10px}.strokeHistorySection{display:flex;flex-direction:column;gap:6px}.strokeSectionLabel{font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px}.strokeThumbnail{width:80px;height:60px;background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.strokeThumbnail canvas{max-width:100%;max-height:100%;object-fit:contain}.strokeThumbnail.base{border-color:var(--accent-secondary)}.strokeThumbnail.active{border-color:#fc0;border-style:dashed}.strokeThumbnailGrid{display:flex;flex-wrap:wrap;gap:6px}.strokeThumbnail .blendLabel{position:absolute;bottom:2px;left:2px;right:2px;font-size:8px;color:#fff;background:#000000b3;padding:1px 3px;border-radius:2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strokeThumbnail .userLabel{position:absolute;top:2px;left:2px;right:2px;font-size:7px;color:var(--accent-primary);background:#000000b3;padding:1px 3px;border-radius:2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strokeThumbnail .indexLabel{position:absolute;top:2px;right:2px;font-size:9px;font-weight:700;color:#fff;background:#0009;padding:1px 4px;border-radius:3px}.strokeThumbnail:hover{border-color:var(--accent-primary);transform:scale(1.05);transition:transform .1s ease}.strokeThumbnail.empty{opacity:.5}.strokeThumbnail.empty:after{content:"empty";font-size:9px;color:var(--text-muted)}.strokeThumbnail.non-bakeable{border-color:#ff9800;border-width:2px;box-shadow:0 0 4px #ff98004d}.strokeThumbnail.sequence-start{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:2px}.strokeThumbnail.sequence-middle{border-radius:0;margin-left:0;margin-right:2px}.strokeThumbnail.sequence-end{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}.strokeThumbnail.non-bakeable.sequence-start:before,.strokeThumbnail.non-bakeable.sequence-middle:before,.strokeThumbnail.non-bakeable.sequence-end:before{content:"";position:absolute;top:-2px;bottom:-2px;left:-2px;right:-2px;border:2px dashed #ff9800;pointer-events:none;border-radius:inherit}.strokeThumbnail.compressed-group{border-color:#ff9800;border-width:2px;border-style:dashed;background:#ff98001a;box-shadow:0 0 6px #ff980066}.strokeThumbnail.compressed-group .blendLabel{background-color:#ff9800e6!important;font-weight:700}.strokeThumbnail.undo-buffer{border-color:var(--accent-primary)}.strokeThumbnail.undo-buffer.non-bakeable{border-color:#ff9800}.boardViewer{position:fixed;top:40px;left:16px;z-index:930;display:flex;flex-direction:column;width:420px;height:256px;min-width:240px;min-height:200px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:hidden;color:var(--text-primary);background:color-mix(in srgb,var(--bg-secondary) 94%,transparent);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.boardViewer[hidden]{display:none}.boardViewerHeader{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:18px;padding:0 2px 0 8px;border-bottom:1px solid var(--border-subtle);background:var(--bg-tertiary);cursor:move;touch-action:none}.boardViewer.is-moving{cursor:move}.boardViewerTitle{min-width:0;overflow:hidden;font-size:10px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.boardViewerActions,.boardViewerControls{display:flex;align-items:center;gap:4px}.boardViewer button{display:grid;place-items:center;min-width:24px;width:auto;height:24px;padding:0 7px;color:var(--text-primary);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);font-size:13px;line-height:1;cursor:pointer}.boardViewerHeader button{min-width:18px;height:18px;padding:0 5px;font-size:12px}.boardViewer button:hover{background:var(--bg-elevated);border-color:var(--border-subtle)}.boardViewerDisableBtn:hover{background:#c0392b!important;border-color:#e74c3c!important;color:#fff!important}.boardViewerStage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab;background:#121212}.boardViewerStage:active{cursor:grabbing}.boardViewerCanvas{display:block;width:100%;height:100%;cursor:grab}.boardViewerControls{position:absolute;left:0;bottom:0;z-index:1;padding:2px;border:1px solid var(--border-subtle);border-bottom:0;border-left:0;border-radius:0 var(--radius-sm) 0 0;background:color-mix(in srgb,var(--bg-secondary) 84%,transparent);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.boardViewerControls button{min-width:22px;height:22px;padding:0 5px}.boardViewerControls [data-action=reset]{width:42px;min-width:42px;font-size:11px;font-variant-numeric:tabular-nums}.boardViewerLaunch{position:fixed;top:42px;left:8px;z-index:920;height:32px;padding:0 12px;color:var(--text-primary);background:color-mix(in srgb,var(--bg-secondary) 94%,transparent);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);font-size:12px;font-weight:700;cursor:pointer}html[data-sidebar-side=left] .boardViewerLaunch{left:auto;right:8px}.boardViewerLaunch:hover{background:var(--bg-elevated);border-color:var(--accent-primary)}.boardViewerLaunch[hidden]{display:none}body.desktop-window-chrome .boardViewer{top:calc(var(--desktop-titlebar-height) + 40px);max-height:calc(100vh - var(--desktop-titlebar-height) - 32px)}body.desktop-window-chrome .boardViewerLaunch{top:calc(var(--desktop-titlebar-height) + 42px)}.boardViewerResize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize}.boardViewerResize:after{content:"";position:absolute;right:5px;bottom:5px;width:8px;height:8px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted)}@media (max-width: 640px){.boardViewer{top:40px;left:8px;width:calc(100vw - 16px);height:208px}.boardViewerLaunch{top:42px;left:8px}body.desktop-window-chrome .boardViewer{top:calc(var(--desktop-titlebar-height) + 40px)}body.desktop-window-chrome .boardViewerLaunch{top:calc(var(--desktop-titlebar-height) + 42px)}}#overlay{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;background:var(--surface-overlay);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:9999}body.desktop-window-chrome #overlay{top:var(--desktop-titlebar-height);bottom:0}.overlayWindow{padding:32px 40px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;min-width:300px}#login.overlayWindow{width:340px;min-height:340px}.overlayWindow label{display:flex;justify-content:center;font-size:14px;font-weight:500;color:var(--text-secondary);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}#connecting label{font-size:16px;color:var(--text-secondary)}.authTabs{display:flex;gap:4px;margin-bottom:16px}.authTab{flex:1;padding:10px 12px;font-size:13px;font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.authTab:hover{color:var(--text-primary);background:var(--bg-tertiary)}.authTab.active{color:var(--accent-primary);background:var(--bg-tertiary);border-color:var(--accent-primary)}.authInput{width:100%;padding:clamp(0px,1.5vh,12px) 16px;font-size:14px;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);outline:none;margin-bottom:clamp(0px,1.2vh,10px);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.authInput:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.authButtons{display:flex;gap:8px;margin-top:clamp(0px,1.2vh,10px);justify-content:center;width:100%}.authButtons .btn{flex:1 1 0;width:auto;min-width:0;min-height:32px;padding-inline:12px;white-space:nowrap}.authDiscordRow{display:flex;width:100%;margin-top:8px}.authDiscordRow .authDiscordBtn{width:100%;max-width:none;min-height:32px;margin-top:0;padding-inline:12px;font-size:13px}.authGuestJoinBtn{width:100%;max-width:220px;min-height:38px;margin-top:10px;background:color-mix(in srgb,var(--accent-primary) 82%,var(--bg-tertiary));border-color:var(--accent-primary);color:var(--bg-primary);font-weight:700;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-primary) 35%,transparent),0 8px 20px color-mix(in srgb,var(--accent-primary) 22%,transparent)}.authGuestJoinBtn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--bg-primary);transform:translateY(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-hover) 42%,transparent),0 10px 24px color-mix(in srgb,var(--accent-primary) 28%,transparent)}.authButtonsRow{display:flex;gap:8px;width:100%}.authButtonsRow .btn{flex:1}.authButtons .btn.disabled{opacity:.5;pointer-events:none}.authDiscordBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:220px;min-height:42px;margin-top:10px;background:#5865f2;border-color:#5865f2;color:#fff;font-weight:700;text-decoration:none;box-shadow:0 8px 20px #5865f23d}.authDiscordBtn:before{content:"";width:18px;height:18px;background:currentColor;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36' aria-hidden='true'%3E%3Cpath fill='currentColor' d='M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2.04a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2.04a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69c-6.27 0-11.44-5.73-11.44-12.77s5.06-12.78 11.44-12.78c6.43 0 11.55 5.78 11.44 12.78 0 7.04-5.06 12.77-11.44 12.77Zm42.24 0c-6.27 0-11.44-5.73-11.44-12.77s5.06-12.78 11.44-12.78c6.43 0 11.55 5.78 11.44 12.78 0 7.04-5.01 12.77-11.44 12.77Z'/%3E%3C/svg%3E") center/contain no-repeat}.authDiscordBtn:hover{background:#4752c4;border-color:#4752c4;color:#fff;transform:translateY(-1px);box-shadow:0 10px 24px #5865f252}.authButtons .authDiscordBtn{max-width:none;min-height:38px;margin-top:0;padding-inline:12px;font-size:12px;font-weight:700;background:#5865f2;border-color:#5865f2;color:#fff;box-shadow:none}.authButtons .authDiscordBtn:before{content:"";width:18px;height:18px;flex:0 0 18px;background:currentColor;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36' aria-hidden='true'%3E%3Cpath fill='currentColor' d='M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2.04a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2.04a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69c-6.27 0-11.44-5.73-11.44-12.77s5.06-12.78 11.44-12.78c6.43 0 11.55 5.78 11.44 12.78 0 7.04-5.06 12.77-11.44 12.77Zm42.24 0c-6.27 0-11.44-5.73-11.44-12.77s5.06-12.78 11.44-12.78c6.43 0 11.55 5.78 11.44 12.78 0 7.04-5.01 12.77-11.44 12.77Z'/%3E%3C/svg%3E") center/contain no-repeat}.authButtons .authDiscordBtn:hover{background:#4752c4;border-color:#4752c4;color:#fff}.authCheckbox{display:flex;align-items:center;gap:8px;margin:clamp(0px,1vh,10px) 0;cursor:pointer;font-size:13px;color:#ccc;-webkit-user-select:none;user-select:none}.authCheckbox input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0}.authCheckbox:hover{color:#fff}.authFormWrapper{width:100%;transition:height var(--transition-normal) ease;overflow:visible;position:relative;min-height:0;flex:0 0 auto}#loginForm{display:flex;flex-direction:column;width:100%}.authLoadingState{display:flex;align-items:center;justify-content:center;gap:10px;min-height:238px;width:100%;color:var(--text-muted);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.authLoadingPulse{width:10px;height:10px;border-radius:50%;background:var(--accent-primary);box-shadow:0 0 color-mix(in srgb,var(--accent-primary) 38%,transparent);animation:authLoadingPulse 1.4s ease-out infinite}.auth-is-pending #loginForm{display:none}.landingSecondaryActions,.landingDivider{opacity:0;pointer-events:none;transition:opacity var(--transition-normal)}.landingSecondaryActions.ready,.landingDivider.ready{opacity:1;pointer-events:auto}@keyframes authLoadingPulse{0%{transform:scale(.86);box-shadow:0 0 color-mix(in srgb,var(--accent-primary) 38%,transparent)}70%{transform:scale(1);box-shadow:0 0 0 9px color-mix(in srgb,var(--accent-primary) 0%,transparent)}to{transform:scale(.86);box-shadow:0 0 color-mix(in srgb,var(--accent-primary) 0%,transparent)}}#authLoggedIn,#authNotLoggedIn,#authRegisterPanel,#authPasswordResetPanel{display:flex;flex-direction:column;align-items:center;width:100%;transition:opacity var(--transition-normal),transform var(--transition-normal)}#authLoggedIn[style*="display: none"],#authNotLoggedIn[style*="display: none"],#authRegisterPanel[style*="display: none"],#authPasswordResetPanel[style*="display: none"]{display:none!important}.auth-fade-in{animation:authFadeIn var(--transition-normal) forwards}.auth-fade-out{animation:authFadeOut var(--transition-normal) forwards}@keyframes authFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes authFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.authLoggedInUser{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;min-width:0;flex:0 1 auto}.authLoggedInRow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 0;width:100%}.authLoggedInRow .authLoggedInJoinBtn{width:100%;max-width:220px;min-height:44px;background:color-mix(in srgb,var(--accent-primary) 86%,var(--bg-tertiary));border-color:var(--accent-primary);color:var(--bg-primary);font-weight:700;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-primary) 35%,transparent),0 10px 24px color-mix(in srgb,var(--accent-primary) 20%,transparent)}.authLoggedInRow .authLoggedInJoinBtn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--bg-primary);transform:translateY(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-hover) 42%,transparent),0 12px 28px color-mix(in srgb,var(--accent-primary) 26%,transparent)}.authLoggedInLabel{font-size:12px;color:var(--text-muted);white-space:nowrap}.authUsernameBtn{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:10px 12px;font-size:15px;font-weight:500;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.authUsernameBtn #authUsernameDisplay{overflow:hidden;text-overflow:ellipsis}.authUsernameBtn:hover{background:var(--bg-secondary);border-color:var(--accent-primary);transform:translateY(-1px)}.authUsernameBtn.auth-is-discord:before{content:"";width:16px;height:16px;flex:0 0 16px;background:#5865f2;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36' aria-hidden='true'%3E%3Cpath fill='currentColor' d='M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2.04a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2.04a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69c-6.27 0-11.44-5.73-11.44-12.77s5.06-12.78 11.44-12.78c6.43 0 11.55 5.78 11.44 12.78 0 7.04-5.06 12.77-11.44 12.77Zm42.24 0c-6.27 0-11.44-5.73-11.44-12.77s5.06-12.78 11.44-12.78c6.43 0 11.55 5.78 11.44 12.78 0 7.04-5.01 12.77-11.44 12.77Z'/%3E%3C/svg%3E") center/contain no-repeat}.authEditIcon{font-size:12px;opacity:.5;transition:opacity var(--transition-fast)}.authUsernameBtn:hover .authEditIcon{opacity:1}#authEditCredentials{width:100%}#authEditCredentials .authInput{margin-bottom:8px}.authEditHeader{display:flex;justify-content:center;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-subtle);position:relative;width:100%}.authEditHeader span{font-size:13px;font-weight:600;color:var(--text-secondary);text-align:center;text-transform:uppercase;letter-spacing:.5px}.authEditClose{position:absolute;right:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:300;line-height:1;color:var(--text-muted);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;padding:0;transition:background var(--transition-fast),color var(--transition-fast)}.authEditClose:hover{background:var(--bg-tertiary);color:var(--text-primary)}#authRegisterPanel{display:flex;flex-direction:column;align-items:center;width:100%}#authRegisterPanel .authInput{margin-bottom:8px}#authRegisterPanel .authInput[readonly]{opacity:.6;cursor:not-allowed}#authPasswordResetPanel{display:flex;flex-direction:column;align-items:center;width:100%;padding-bottom:8px}#authPasswordResetPanel .authInput{margin-bottom:8px}.authLinkButton{align-self:flex-end;margin:-2px 0 6px;padding:4px 0;font:inherit;font-size:12px;line-height:1.2;color:var(--text-muted);background:transparent;border:none;cursor:pointer;text-align:right;text-decoration:underline;text-underline-offset:3px;transition:color var(--transition-fast)}.authLinkButton:hover{color:var(--accent-primary)}.authSecretPrompt,#passwordResetRequestFields,#passwordResetCompleteFields{width:100%}.authSecretQuestion{width:100%;margin:0 0 8px;padding:10px 12px;font-size:13px;line-height:1.35;color:var(--text-secondary);background:color-mix(in srgb,var(--bg-tertiary) 80%,black 20%);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}.authResetMessage{width:100%;min-height:18px;margin:2px 0 0;font-size:12px;line-height:1.35;color:var(--text-muted);text-align:center}.authResetMessage[data-kind=success]{color:var(--accent-primary)}.authResetMessage[data-kind=error]{color:#ef4444}.authModalBackdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;background:#00000080}.authSetupModal{position:fixed;top:50%;left:50%;z-index:9999;width:calc(100vw - 32px);max-width:480px;padding:24px;transform:translate(-50%,-50%);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--text-primary)}.authSetupModal h3{margin:0 0 8px;font-size:18px;font-weight:600}.authSetupClose{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;color:var(--text-secondary);background:transparent;border:0;border-radius:var(--radius-sm);cursor:pointer;font-size:24px;line-height:1}.authSetupClose:hover{color:var(--text-primary);background:color-mix(in srgb,var(--bg-tertiary) 82%,white 18%)}.authSetupText{margin:0 0 16px;color:var(--text-secondary);font-size:14px}#ddrawLinkFields{display:flex;flex-direction:column;gap:10px}.authSetupActions{display:flex;flex-direction:column;gap:8px;margin-top:16px}.authError{margin-top:10px;padding:8px 12px;font-size:12px;color:#ef4444;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-sm);text-align:center}.landingError{margin-top:12px;padding:10px 12px;font-size:12px;color:#ef4444;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-sm);text-align:center}#offlineBtn,#loginOfflineBtn{margin-top:0;padding:clamp(0px,1.5vh,12px) 24px;font-size:13px;font-weight:500;background:transparent;border:1px dashed var(--text-muted);color:var(--text-muted);width:100%;text-align:center;transition:all var(--transition-fast)}#offlineBtn:hover,#loginOfflineBtn:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:#00d4aa0d;border-style:solid}#landingPage{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:20px;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000}body.desktop-window-chrome #landingPage{top:0;bottom:0;padding-top:30px}#landingPage.blurred{filter:blur(4px);pointer-events:none}.landingContainer{display:flex;position:relative;gap:0;max-width:1000px;width:100%;height:calc(100vh - 112px);height:calc(100dvh - 112px);min-height:560px;max-height:720px;margin-top:3.5rem;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.landingChangelogWindow{width:100%;max-width:1000px;margin:16px auto 0;align-self:center;padding:18px 24px;background:color-mix(in srgb,var(--bg-secondary) 88%,black 12%);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex:0 1 auto;min-height:0;display:flex;flex-direction:column}.landingChangelogWindow h3{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;flex:0 0 auto}.landingChangelogWindow ul{margin:0;padding-left:18px;columns:2;column-gap:32px;color:var(--text-muted);font-size:13px;line-height:1.5;flex:1 1 auto;min-height:0;max-height:clamp(60px,20vh,280px);overflow-y:auto}.landingChangelogWindow li{margin-bottom:8px;break-inside:avoid}.landingChangelogWindow li::marker{color:var(--accent-primary)}.landingPanel{padding:clamp(0px,5vh,15px) clamp(0px,4vw,40px);display:flex;flex-direction:column;position:relative;min-height:0}.landingAuth{width:400px;border-right:1px solid var(--border-subtle);background:var(--bg-secondary);overflow-y:auto;overflow-x:hidden;min-height:0}.landingAuth #downloadBtn,.landingAuth #loginOfflineBtn,.landingAuth #feedbackWidgetMount{transition:flex-grow var(--transition-normal) ease,flex-basis var(--transition-normal) ease,min-height var(--transition-normal) ease,transform var(--transition-normal) ease,opacity var(--transition-normal) ease,margin var(--transition-normal) ease,background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.landingAuth #downloadBtn,.landingAuth #loginOfflineBtn{width:100%}.landingAuth .landingSecondaryActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}.landingAuth .landingSecondaryActions>[style*="display: none"]{display:none!important}.landingAuth .landingSecondaryActions>.btn,.landingAuth .landingSecondaryActions #feedbackWidgetMount,.landingAuth .landingSecondaryActions #feedbackWidgetMount .feedback-widget,.landingAuth .landingSecondaryActions #feedbackWidgetMount .feedback-toggle,.landingAuth .landingSecondaryActions #feedbackWidgetMount .feedback-success{width:100%;min-width:0}.landingAuth .landingDiscordInviteBtn{max-width:none;min-height:42px;margin:0;padding-inline:10px;font-size:12px;font-weight:700;box-shadow:none}.landingAuth #feedbackWidgetMount{display:block;flex:0 0 auto;min-height:0;margin:0}.landingAuth #downloadBtn,.landingAuth #loginOfflineBtn,.landingAuth .landingDiscordInviteBtn,.landingAuth #feedbackWidgetMount .feedback-toggle,.landingAuth #feedbackWidgetMount .feedback-success{display:inline-flex;align-items:center;justify-content:center;min-height:46px;height:46px;padding:13px 12px;font-size:12px;font-weight:700;line-height:1.2;border-radius:var(--radius-sm)}.landingAuth #feedbackWidgetMount .feedback-toggle,.landingAuth #feedbackWidgetMount .feedback-success{background:color-mix(in srgb,var(--accent-primary) 10%,var(--bg-tertiary));border-color:color-mix(in srgb,var(--accent-primary) 28%,var(--border-subtle));color:var(--accent-primary)}.landingAuth #feedbackWidgetMount .feedback-toggle:hover{background:color-mix(in srgb,var(--accent-primary) 16%,var(--bg-tertiary));border-color:var(--accent-primary)}.landingAuth.auth-is-logged-in .landingDivider{margin:clamp(8px,2vh,16px) 0}.landingAuth.auth-is-logged-in #downloadBtn,.landingAuth.auth-is-logged-in #loginOfflineBtn,.landingAuth.auth-is-logged-in #feedbackWidgetMount{flex:0 0 auto;min-height:24px;max-height:60px;transform:translateY(0)}.landingAuth.auth-is-logged-in #downloadBtn,.landingAuth.auth-is-logged-in #loginOfflineBtn{padding-top:9px;padding-bottom:9px}.landingAuth.auth-is-logged-in #downloadBtn{background:color-mix(in srgb,var(--accent-primary) 10%,var(--bg-tertiary));border-color:color-mix(in srgb,var(--accent-primary) 28%,var(--border-subtle))}.landingAuth.auth-is-logged-in #feedbackWidgetMount{transform:translateY(0)}.landingAuth.auth-is-logged-in #feedbackWidgetMount,.landingAuth.auth-is-logged-in #feedbackWidgetMount .feedback-widget,.landingAuth.auth-is-logged-in #feedbackWidgetMount .feedback-toggle,.landingAuth.auth-is-logged-in #feedbackWidgetMount .feedback-success{display:flex;width:100%;min-height:24px;max-height:60px}.landingAuth.auth-is-logged-in #feedbackWidgetMount .feedback-widget,.landingAuth.auth-is-logged-in #feedbackWidgetMount .feedback-toggle,.landingAuth.auth-is-logged-in #feedbackWidgetMount .feedback-success{height:100%}.landingAuth.auth-is-logged-in #feedbackWidgetMount .feedback-toggle,.landingAuth.auth-is-logged-in #feedbackWidgetMount .feedback-success{align-items:center;justify-content:center}.landingAuth h2{margin:0 0 4px;font-size:32px;font-weight:600;color:var(--text-primary);text-align:center}.landingAuth .wordmark{display:block;margin:0 0 4px;font-size:51px;font-weight:700;color:#00d4aa;font-family:Fredoka,sans-serif;text-align:center;transform:rotate(-2deg);transition:all .2s}.landingAuth .wordmark:hover{color:#c800c8;transform:rotate(-2deg) scale(1.05)}.landingSubtitle{margin:0 0 clamp(0px,3vh,32px) 0;font-size:14px;color:var(--text-muted);text-align:center;font-weight:400}.landingVersion{margin:0 0 clamp(0px,2.2vh,20px);font-size:12px;color:var(--text-muted);text-align:center;letter-spacing:.08em;text-transform:uppercase}.landingDivider{margin:clamp(0px,2vh,20px) 0;text-align:center;color:var(--text-muted);font-size:12px;position:relative}.landingDivider:before,.landingDivider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--border-subtle)}.landingDivider:before{left:0}.landingDivider:after{right:0}.landingRooms{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg-primary);overflow-y:auto;overflow-x:hidden}.landingRooms h3{margin:0;font-size:24px;font-weight:600;color:var(--text-primary)}.landingRooms h4{margin:0;font-size:14px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.landingHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(0px,3vh,24px);gap:16px}.landingConnectionStatus{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:12px;color:var(--text-secondary);white-space:nowrap}.landingConnectionStatus .connectionDot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);animation:pulse 2s ease-in-out infinite}.landingConnectionStatus.connected .connectionDot{background:var(--accent-primary);animation:none}.landingConnectionStatus.disconnected .connectionDot{background:#ef4444;animation:none}.landingConnectionStatus.offline .connectionDot{background:#6b7280;animation:none}.landingConnectionStatus .connectionText{font-weight:500}.landingConnectionStatusMobile{display:none}.roomActions{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.roomDividerText{text-align:center;font-size:12px;color:var(--text-muted);padding:8px 0}.btn.large{padding:clamp(0px,2vh,16px) 24px;font-size:15px;font-weight:500}.btn .btnIcon{font-size:20px;margin-right:8px}.roomInputGroup{display:flex;gap:8px;align-items:center}.roomInputGroup .authInput{flex:1;margin-bottom:0}.roomInputGroup .btn{width:auto;padding:12px 20px;margin:0;flex-shrink:0}.roomListSection{flex:1;display:flex;flex-direction:column;min-height:0}.roomIdLandingInput{width:100%;max-width:180px;margin-bottom:0;flex:0 1 180px}.roomListHeader{display:flex;justify-content:flex-end;align-items:center;margin-bottom:12px}.roomJoinHeader{justify-content:flex-start;gap:8px;width:100%}.roomJoinHeader .landingJoinForGuest,.roomJoinHeader .landingJoinForUser,.roomJoinHeader #refreshRoomsBtn{flex:0 0 auto;min-height:40px}.roomJoinHeader .landingJoinForUser{display:none}.roomJoinHeader .landingJoinForGuest,.roomJoinHeader .landingJoinForUser{min-width:72px;background:color-mix(in srgb,var(--accent-primary) 82%,var(--bg-tertiary));border-color:var(--accent-primary);color:var(--bg-primary);font-weight:700;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-primary) 35%,transparent),0 8px 20px color-mix(in srgb,var(--accent-primary) 22%,transparent)}.roomJoinHeader .landingJoinForGuest:hover,.roomJoinHeader .landingJoinForUser:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--bg-primary);transform:translateY(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-hover) 42%,transparent),0 10px 24px color-mix(in srgb,var(--accent-primary) 28%,transparent)}.roomJoinHeader #refreshRoomsBtn{margin-left:auto}.landingContainer:has(.landingAuth.auth-is-logged-in) .landingJoinForGuest{display:none}.landingContainer:has(.landingAuth.auth-is-logged-in) .landingJoinForUser{display:inline-flex}.btn.small{padding:6px 12px;font-size:12px}.roomList{flex:1;overflow-y:auto;padding:12px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);min-height:clamp(80px,20vh,200px);max-height:clamp(150px,40vh,400px)}.roomListEmpty{padding:40px 20px;text-align:center;color:var(--text-muted);font-size:14px}.roomListItem{display:flex;align-items:center;gap:12px;height:80px;padding:12px 14px;margin-bottom:8px;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.roomListItem:hover{border-color:var(--accent-primary);background:var(--bg-elevated);transform:translate(2px)}.roomListItem.selected{height:120px;align-items:flex-start;border-color:var(--accent-primary);background:var(--bg-elevated);box-shadow:0 0 0 2px var(--accent-glow)}.roomListItem.selected .roomPreview,.roomListItem.selected .roomInfo{height:100%}.roomListItem.selected .roomHeading{flex:1;min-height:0;align-items:flex-start;overflow:hidden}.roomListItem.selected .roomDescription{height:100%;white-space:normal;overflow-y:auto;text-overflow:clip}.roomListItem:last-child{margin-bottom:0}.roomPreview{height:120%;aspect-ratio:16/9;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-primary);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center}.roomPreview img{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform var(--transition-fast)}.roomPreview.roomPreviewEmpty span{font-size:9px;color:var(--text-muted);text-align:center}.expandedRoomPreview{position:fixed;display:none;z-index:10000;padding:8px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);max-width:600px;max-height:400px}.expandedRoomPreview img{width:100%;height:auto;max-height:380px;object-fit:contain;border-radius:var(--radius-sm)}.roomInfo{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.roomHeading{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}.roomDescription{flex:1;min-width:0;line-height:1.35;font-size:12px;color:var(--text-secondary);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.roomId{flex:0 0 auto;font-family:inherit;font-size:16px;font-weight:700;line-height:1.2;color:var(--text-primary);letter-spacing:0}.roomMeta{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:8px;flex-shrink:0}.roomUserCount{display:inline-flex;align-items:center;gap:4px}.roomUserCount:before{content:"👤";font-size:11px}.roomBadge{display:inline-block;padding:3px 8px;font-size:10px;font-weight:600;background:var(--accent-glow);color:var(--accent-primary);border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.roomBadge.default{background:#64c8ff1a;color:#64c8ff}.roomBadge.locked{background:#ef44441a;color:#ef4444}@media (max-width: 520px){.roomJoinHeader{flex-wrap:wrap}.roomListItem,.roomListItem.selected{flex-direction:column;align-items:stretch;height:auto;min-height:0;padding:12px}.roomListItem .roomPreview,.roomListItem.selected .roomPreview{width:100%;height:auto;aspect-ratio:16/9}.roomListItem .roomInfo,.roomListItem.selected .roomInfo{width:100%;height:auto}.roomListItem .roomHeading,.roomListItem.selected .roomHeading{flex-direction:column;align-items:flex-start;gap:4px;overflow:visible}.roomListItem .roomDescription,.roomListItem.selected .roomDescription{width:100%;height:auto;white-space:normal;overflow:visible;text-overflow:clip}.roomListItem .roomMeta,.roomListItem.selected .roomMeta{flex-wrap:wrap}}.createRoomBtn{width:100%;margin-bottom:14px;padding:clamp(8px,1.5vh,12px) 20px;font-family:inherit;font-size:15px;font-weight:700;line-height:1.25;background:linear-gradient(135deg,var(--accent-primary),color-mix(in srgb,var(--accent-primary) 70%,#fff));color:#000;border:none;border-radius:var(--radius-md);cursor:pointer;letter-spacing:0;transition:opacity var(--transition-fast),transform var(--transition-fast)}.createRoomBtn:hover{opacity:.9;transform:translateY(-1px)}.createRoomBtn:active{transform:translateY(0)}.createRoomOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}.createRoomPanel{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(20px,4vh,32px) clamp(20px,3vw,32px);width:100%;max-width:460px;max-height:90vh;overflow-y:auto}.createRoomTitle{margin:0 0 16px;font-size:18px;font-weight:700;color:var(--text-primary)}.createRoomNotice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:20px;background:#ffc83c14;border:1px solid rgba(255,200,60,.25);border-radius:var(--radius-md);font-size:13px;color:var(--text-secondary);line-height:1.5}.createRoomNotice .noticeIcon{font-size:16px;flex-shrink:0;color:#ffc83c;margin-top:1px}.createRoomNotice strong{color:#ffc83c}.createRoomForm{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.createRoomField{display:flex;flex-direction:column;gap:5px}.createRoomField label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.createRoomField .authInput{margin-bottom:0}.createRoomFieldHint{font-size:11px;color:var(--text-muted)}.optionalTag{font-weight:400;text-transform:none;font-size:11px;color:var(--text-muted);letter-spacing:0}.createRoomRow{display:flex;gap:12px}.createRoomRow .half{flex:1}#createRoomDesc{height:5rem}.colorInput{padding:4px 6px;height:40px;cursor:pointer}.authSelect{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer}.authSelect option{background:var(--bg-tertiary);color:var(--text-primary)}.createRoomCheckRow{display:flex;align-items:center;gap:10px;padding:4px 0}.createRoomCheckRow label{font-size:13px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.createRoomCheck{width:16px;height:16px;cursor:pointer;accent-color:var(--accent-primary);flex-shrink:0}.createRoomModNote{padding:12px 14px;margin-bottom:20px;background:#00d4aa0f;border:1px solid rgba(0,212,170,.2);border-radius:var(--radius-md);font-size:12.5px;color:var(--text-secondary);line-height:1.55}.createRoomModNote strong{display:block;color:var(--accent-primary);margin-bottom:4px}.createRoomActions{display:flex;gap:10px;justify-content:flex-end}.createRoomActions .btn{min-width:100px}.createRoomError{margin-bottom:10px;font-size:13px}.btn.disabled,.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.authInput:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px){.landingContainer{flex-direction:column;min-height:0;max-height:calc(100dvh - 56px);overflow-y:auto;overflow-x:hidden}.landingChangelogWindow{padding:16px 18px}.landingChangelogWindow ul{columns:1}.landingAuth{flex:0 0 auto;width:100%;border-right:none;border-bottom:1px solid var(--border-subtle);overflow:visible}.landingPanel{padding:24px}.landingRooms{flex:0 0 auto;width:100%;overflow:visible}.landingHeader .landingConnectionStatus{display:none}.landingConnectionStatusMobile{display:flex;align-self:center;width:100%;max-width:260px;justify-content:center;margin:0 0 8px}.roomListSection{flex:0 0 auto}.roomList{max-height:none;overflow:visible}}@media (max-height: 820px){#landingPage{align-items:stretch}.landingContainer{margin:0 auto}.landingAuth{justify-content:flex-start;padding-bottom:24px;overflow-y:auto}.authFormWrapper{min-height:0;height:auto!important;transition:none}}.connectionStatus{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-sm);font-size:11px;color:var(--text-secondary)}@media (max-width: 1380px){.connectionStatus{padding:4px;gap:0}.connectionStatus .connectionText{display:none}.connectionStatus .connectionReconnect,.connectionStatus .connectionDisconnect{display:none!important}}.connectionDot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);flex-shrink:0}.connectionStatus.connected .connectionDot{background:#22c55e;box-shadow:0 0 6px #22c55e80}.connectionStatus.disconnected .connectionDot{background:#ef4444;box-shadow:0 0 6px #ef444480}.connectionStatus.connecting .connectionDot{background:#f59e0b;box-shadow:0 0 6px #f59e0b80;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.connectionRoom{color:var(--text-muted);font-style:italic;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.connectionRoom:before{content:"— "}@media (max-width: 1380px){.connectionRoom{display:none}}.connectionReconnect,.connectionDisconnect{padding:3px 8px!important;font-size:10px!important;margin-left:4px}.sync-overlay{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:#00000059;z-index:100;pointer-events:none;align-items:center;justify-content:center}.sync-overlay.active{display:flex;pointer-events:all}.sync-content{display:flex;flex-direction:column;align-items:center;gap:12px;width:calc(100% - 32px);max-width:420px;text-align:center}.sync-text{color:#fff;font-size:18px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.5)}.sync-progress-bar{width:300px;height:8px;background:#fff3;border-radius:4px;overflow:hidden;box-shadow:0 2px 6px #0000004d}.sync-progress-fill{width:0%;height:100%;background:linear-gradient(90deg,#4caf50,#66bb6a);border-radius:4px;animation:syncPulse 1.5s ease-in-out infinite}.sync-hint{color:#ffffffd1;font-size:13px;line-height:1.4;text-shadow:0 1px 4px rgba(0,0,0,.4)}@keyframes syncPulse{0%,to{opacity:.8}50%{opacity:1}}.modOnly{display:none}.modOnly.visible,.menuDivider.modOnly.visible{display:block}button.modOnly.visible,a.modOnly.visible{display:inline-flex}div.modOnly.visible{display:flex}.adminOnly{display:none!important}.adminOnly.admin-visible{display:block!important}div.adminOnly.admin-visible{display:flex!important}#debugOverlay{position:absolute;top:0;left:0;pointer-events:none;display:none;z-index:5}.clearConfirmWrap{position:relative;align-items:center;justify-content:center}.clearConfirmPrompt{position:fixed;min-width:176px;padding:10px;background:var(--bg-secondary);border:1px solid rgba(239,68,68,.32);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease;z-index:950;pointer-events:none}.clearConfirmPrompt-visible{opacity:1;transform:translateY(0);pointer-events:auto}.clearConfirmText{color:var(--text-primary);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap}.clearConfirmActions{display:flex;gap:6px;margin-top:8px}.clearConfirmBtn{flex:1;padding:6px 8px;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px;font-weight:500;font-family:inherit;cursor:pointer;transition:all var(--transition-fast)}.clearConfirmBtn:hover{background:var(--bg-elevated);border-color:var(--border-active)}.clearConfirmBtn-danger{background:#ef444424;border-color:#ef444461;color:#fca5a5}.clearConfirmBtn-danger:hover{background:#ef444433;border-color:#f87171;color:#fecaca}#modPanel{display:none;flex-direction:column;position:absolute;right:16px;top:60px;width:720px;max-width:calc(100vw - 32px);max-height:600px;background:var(--surface-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;z-index:50}#modPanelHeader{background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);padding:8px;display:flex;align-items:center;gap:8px;flex-shrink:0}.modPanelTitle{flex:1;font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:.02em}.modTabs{display:none}.modFilterChips{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px;background:var(--bg-tertiary);border-bottom:1px solid var(--border-subtle);flex-shrink:0}.modChip{padding:4px 10px;font-size:11px;font-weight:500;color:var(--text-secondary);background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:999px;cursor:pointer;transition:all var(--transition-fast);letter-spacing:.02em}.modChip:hover{color:var(--text-primary);border-color:var(--border-active)}.modChip.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#000}.chatCloseBtn{background:transparent;border:none;color:var(--text-muted);font-size:24px;line-height:1;cursor:pointer;padding:0 4px;border-radius:var(--radius-sm);transition:all var(--transition-fast);flex-shrink:0}.chatCloseBtn:hover{color:var(--text-primary);background:var(--bg-tertiary)}.modTab{flex:1;padding:8px 12px;font-size:12px;font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.modTab:hover{background:var(--bg-tertiary);color:var(--text-primary)}.modTab.active{background:var(--bg-elevated);border-color:var(--border-subtle);color:var(--text-primary)}.modPanelControls{display:flex;align-items:center;gap:6px;padding:8px;background:var(--bg-tertiary);border-bottom:1px solid var(--border-subtle);flex-shrink:0}.modSearchInput{flex:1;padding:6px 10px;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px;font-family:inherit;transition:border-color var(--transition-fast)}.modSearchInput::placeholder{color:var(--text-muted)}.modSearchInput:focus{outline:none;border-color:var(--border-active)}.modHistoryToggle{padding:6px 10px;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:11px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all var(--transition-fast)}.modHistoryToggle:hover{border-color:var(--border-active);color:var(--text-primary)}.modHistoryToggle.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#000}.modEntryList{flex:1;overflow-y:auto;padding:10px}.modNoEntries{padding:24px 16px;text-align:center;color:var(--text-muted);font-size:13px}.modTableWrap{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-primary)}.modTable{width:100%;border-collapse:collapse;font-size:12px}.modTable th,.modTable td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}.modTable th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);background:var(--bg-secondary);font-weight:600;position:sticky;top:0;z-index:1}.modTable tbody tr:last-child td{border-bottom:none}.modTableRow.revoked,.modTableRow.expired{opacity:.55}.modTableUser{display:flex;align-items:center;gap:6px;line-height:1.2}.modTableUser strong{color:var(--text-primary);font-weight:600;font-size:13px}.modTableSub{color:var(--text-muted);font-size:11px;margin-top:2px}.modTableMuted{color:var(--text-muted)}.modTableReason{color:var(--text-secondary);font-style:italic;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modTableActions{text-align:right;white-space:nowrap}.modTableEmpty{text-align:center;color:var(--text-muted);padding:24px 16px}.modEntry{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px 12px;display:flex;flex-direction:column;gap:4px;font-size:12px}.modEntry.revoked,.modEntry.expired{opacity:.55}.modEntryTop{display:flex;align-items:center;justify-content:space-between;gap:8px}.modEntryUser{flex:1;font-weight:600;font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modEntryPill{font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:var(--radius-sm);flex-shrink:0}.modEntryPill.modEntryPill-bans{background:#ef44442e;color:#fca5a5}.modEntryPill.modEntryPill-mutes{background:#eab3082e;color:#fde68a}.modEntryPill.modEntryPill-shadowbans{background:#8b5cf638;color:#c4b5fd}.modEntryScope{margin-left:6px;padding:1px 5px;border-radius:var(--radius-sm);background:var(--bg-tertiary);color:var(--text-muted);font-family:monospace;font-size:10px}.modEntryStatus{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:var(--radius-sm);flex-shrink:0}.modEntryStatus.active{background:#ef444426;color:#f87171}.modEntryStatus.expired,.modEntryStatus.revoked{background:#6b728026;color:var(--text-muted)}.modEntryReason{color:var(--text-secondary);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modEntryMeta{display:flex;justify-content:space-between;color:var(--text-muted);font-size:11px;gap:8px}.modEntryMeta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modEntryIp{font-family:monospace}.modEntryRemove{margin-top:4px;align-self:flex-end;padding:4px 10px;background:transparent;border:1px solid rgba(239,68,68,.4);border-radius:var(--radius-sm);color:#f87171;font-size:11px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.modEntryRemove:hover{background:#ef444426;border-color:#f87171}.modOverlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:200}.modOverlayBox{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:32px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:320px}.modOverlayBox h3{margin:0;font-size:20px;font-weight:600;color:#f87171}.modOverlayReason{margin:0;font-size:13px;color:var(--text-secondary)}.modDialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.modDialog{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:24px;width:320px;display:flex;flex-direction:column;gap:12px}.modDialog h3{margin:0;font-size:16px;font-weight:600;color:var(--text-primary);text-transform:capitalize}.modDialog h3.danger{color:#f87171}.modDialog label{font-size:12px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.modDialog input,.modDialog select{width:100%;padding:8px 10px;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;font-family:inherit;box-sizing:border-box;transition:border-color var(--transition-fast)}.modDialog input:focus,.modDialog select:focus{outline:none;border-color:var(--border-active)}.modDialog select option{background:var(--bg-secondary)}.modDialog-buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}.modDialog-buttons .btn.danger{background:#ef444426;border-color:#ef444466;color:#f87171}.modDialog-buttons .btn.danger:hover{background:#ef444440;border-color:#f87171}.modReasonCard{position:fixed;top:56px;left:50%;width:320px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1000;overflow:hidden;opacity:0;transform:translate(-50%) translateY(-10px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}.modReasonCard.modReasonCard-visible{opacity:1;transform:translate(-50%) translateY(0);pointer-events:auto}.modReasonCard.danger{border-color:#ef444459}.modReasonCard-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px;gap:8px}.modReasonCard-title{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modReasonCard-title strong{color:var(--text-primary);font-weight:600}.modReasonCard-close{flex-shrink:0;background:none;border:none;color:var(--text-muted);font-size:13px;cursor:pointer;padding:2px 4px;line-height:1;border-radius:var(--radius-sm);transition:color var(--transition-fast)}.modReasonCard-close:hover{color:var(--text-primary)}.modReasonCard-body{display:flex;gap:6px;padding:0 12px 10px;flex-wrap:wrap}.modReasonCard-scopeRow{flex:1 0 100%;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted)}.modReasonCard-scopeLabel{text-transform:uppercase;letter-spacing:.04em;font-weight:500}.modReasonCard-scope{flex:1;padding:5px 8px;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px;font-family:inherit;cursor:pointer}.modReasonCard-scope:focus{outline:none;border-color:var(--border-active)}.modReasonCard-input{flex:1;padding:6px 10px;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px;font-family:inherit;transition:border-color var(--transition-fast)}.modReasonCard-input::placeholder{color:var(--text-muted)}.modReasonCard-input:focus{outline:none;border-color:var(--border-active)}.modReasonCard-submit{flex-shrink:0;padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all var(--transition-fast)}.modReasonCard-submit:hover{background:var(--bg-elevated);border-color:var(--border-active)}.modReasonCard-timer{height:2px;width:100%;background:var(--accent-primary);opacity:.5}.modWipePrompt{position:fixed;width:280px;background:var(--bg-secondary);border:1px solid rgba(239,68,68,.28);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1001;overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}.modWipePrompt-visible{opacity:1;transform:translateY(0);pointer-events:auto}.modWipePrompt-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 6px}.modWipePrompt-title{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modWipePrompt-title strong{color:var(--text-primary);font-weight:600}.modWipePrompt-close{flex-shrink:0;background:none;border:none;color:var(--text-muted);font-size:13px;cursor:pointer;padding:2px 4px;line-height:1;border-radius:var(--radius-sm)}.modWipePrompt-close:hover{color:var(--text-primary)}.modWipePrompt-text{margin:0;padding:0 12px 10px;color:var(--text-primary);font-size:13px;line-height:1.35}.modWipePrompt-actions{display:flex;gap:8px;padding:0 12px 12px}.modWipePrompt-btn{flex:1;padding:7px 10px;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all var(--transition-fast)}.modWipePrompt-btn:hover{background:var(--bg-elevated);border-color:var(--border-active)}.modWipePrompt-btn-danger{background:#ef444424;border-color:#ef444461;color:#fca5a5}.modWipePrompt-btn-danger:hover{background:#ef444433;border-color:#f87171;color:#fecaca}.modWipePrompt-timer{height:2px;width:100%;background:#f87171;opacity:.55}.saveModeOverlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:200;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.saveModePanel{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:360px;max-width:90vw;display:flex;flex-direction:column;overflow:hidden}.saveModePanelHeader{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--bg-tertiary);border-bottom:1px solid var(--border-subtle)}.saveModePanelHeader span{font-size:15px;font-weight:600;color:var(--text-primary)}.saveModePanelBody{padding:18px;display:flex;flex-direction:column;gap:16px}.saveModeSection{display:flex;flex-direction:column;gap:8px}.saveModeSectionLabel{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.saveModeRadioGroup{display:flex;gap:10px}.saveModeRadio{flex:1;display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg-primary);border:2px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast);-webkit-user-select:none;user-select:none}.saveModeRadio input[type=radio]{accent-color:var(--accent-primary);width:15px;height:15px;flex-shrink:0;cursor:pointer}.saveModeRadio span{font-size:13px;font-weight:500;color:var(--text-primary)}.saveModeRadio:has(input:checked){border-color:var(--accent-primary);background:var(--bg-elevated)}.saveModeRadio:has(input:disabled){opacity:.4;cursor:not-allowed}.saveModeRadio:has(input:disabled) input{cursor:not-allowed}.saveModeCheckbox{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.saveModeCheckbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-primary);cursor:pointer;flex-shrink:0}.saveModeCheckbox span{font-size:13px;font-weight:500;color:var(--text-primary)}.saveModePanelFooter{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--bg-tertiary);border-top:1px solid var(--border-subtle);gap:10px}.saveModePanelFooter .saveModeGallery{flex:1}.saveModePanelFooter .saveModeActions{display:flex;gap:8px}.saveModePanelFooter .btn{padding:8px 16px;font-size:13px;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.saveModePanelFooter .btn.secondary{background:transparent;border:1px solid var(--border-subtle);color:var(--text-secondary)}.saveModePanelFooter .btn.secondary:hover{background:var(--bg-elevated);border-color:var(--border-active);color:var(--text-primary)}.saveModePanelFooter .btn.primary{background:var(--accent-primary);border:1px solid var(--accent-primary);color:#000}.saveModePanelFooter .btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.saveModeInteractive{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-primary);z-index:2100;display:flex;align-items:center;justify-content:center;overflow:hidden}.saveModeSnapshot,.saveModeSelection{position:absolute;top:0;left:0;transform-origin:0 0}.saveModeSnapshot{image-rendering:auto}.saveModeSelection{cursor:crosshair;pointer-events:auto;touch-action:none}.saveModeControls{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px}.saveModeModeToggle,.saveModeZoomControls{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:4px;box-shadow:var(--shadow-md)}.saveModeModeToggle,.saveModeZoomControls{display:flex;gap:4px}.saveModeToggleBtn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.saveModeToggleBtn:hover{background:var(--bg-elevated);color:var(--text-primary)}.saveModeToggleBtn.active{background:var(--accent-primary);color:#000}.saveModeToggleBtn svg{width:18px;height:18px}.saveModeZoomBtn,.saveModeZoomResetBtn{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);font-size:18px;font-weight:600}.saveModeZoomBtn:hover,.saveModeZoomResetBtn:hover{background:var(--bg-elevated);color:var(--text-primary)}.saveModeZoomResetBtn{min-width:68px;padding:0 12px;font-size:13px;font-weight:600}.saveModeCloseBtn{position:absolute;top:16px;right:16px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);font-size:24px;line-height:1;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}.saveModeCloseBtn:hover{background:var(--bg-elevated);border-color:var(--border-active);color:var(--text-primary)}.saveModeOptionsPanel{position:absolute;left:50%;bottom:16px;width:calc(100vw - 32px);max-width:900px;transform:translate(-50%);display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:10px 14px;background:color-mix(in srgb,var(--bg-secondary) 92%,transparent);border:1px solid var(--border-subtle);border-radius:999px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.saveModeOptionsPanelLead{display:flex;align-items:center;min-width:0;justify-content:flex-start}.saveModeOptionsHint{font-size:13px;font-weight:500;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saveModeOptionsPanelBody{display:flex;align-items:center;justify-content:flex-start;gap:14px;min-width:0}.saveModeOptionsCheckbox{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.saveModeOptionsCheckbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-primary);cursor:pointer;flex-shrink:0}.saveModeOptionsCheckbox span{font-size:12px;font-weight:500;color:var(--text-primary)}.saveModeCaptionPanel{position:absolute;top:50%;right:16px;width:calc(100vw - 32px);max-width:340px;max-height:calc(100vh - 120px);transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;padding:14px;background:color-mix(in srgb,var(--bg-secondary) 94%,transparent);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.saveModeOptionsField{display:flex;align-items:flex-start;gap:10px;min-width:0}.saveModeOptionsField span{font-size:12px;font-weight:500;color:var(--text-primary);line-height:34px;white-space:nowrap}.saveModeOptionsField textarea,.saveModeOptionsField input[type=text]{width:320px;max-width:36vw;min-height:36px;background:color-mix(in srgb,var(--bg-primary) 88%,transparent);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);padding:8px 10px;font:inherit}.saveModeOptionsField textarea::placeholder,.saveModeOptionsField input[type=text]::placeholder{color:var(--text-tertiary)}.saveModeOptionsField textarea:focus,.saveModeOptionsField input[type=text]:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-primary) 45%,transparent)}.saveModeOptionsField textarea{min-height:56px;resize:vertical}.saveModeCaptionField{flex-direction:column;gap:8px;min-width:0}.saveModeCaptionField span{line-height:1.2;white-space:normal}.saveModeCaptionField textarea{width:100%;max-width:none;min-height:148px;max-height:calc(100vh - 220px)}.saveModeCaptionField input[type=text]{width:100%;max-width:none}.saveModeDescriptionField textarea{min-height:72px}.saveModeOptionsPanelFooter{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}.saveModeOptionsPanelFooter .btn{padding:8px 14px;font-size:12px;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.saveModeOptionsPanelFooter .btn.secondary{background:transparent;border:1px solid var(--border-subtle);color:var(--text-secondary)}.saveModeOptionsPanelFooter .btn.secondary:hover{background:var(--bg-elevated);border-color:var(--border-active);color:var(--text-primary)}.saveModeOptionsPanelFooter .btn.primary{background:var(--accent-primary);border:1px solid var(--accent-primary);color:#000}.saveModeOptionsPanelFooter .btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}@media (max-width: 1200px){.saveModeCaptionPanel{max-width:300px;padding:12px}.saveModeCaptionField textarea{min-height:128px}}@media (max-width: 980px){.saveModeCaptionPanel{max-width:260px;padding:10px}.saveModeCaptionField{gap:6px}.saveModeCaptionField textarea{min-height:108px;padding:7px 9px}}@media (max-width: 768px){.saveModeControls{top:12px;gap:8px}.saveModeModeToggle,.saveModeZoomControls{gap:2px;padding:3px}.saveModeToggleBtn,.saveModeZoomBtn,.saveModeZoomResetBtn,.saveModeCloseBtn{min-width:40px;height:40px}.saveModeZoomResetBtn{min-width:72px}.saveModeOptionsPanel{left:50%;bottom:12px;width:calc(100vw - 24px);border-radius:var(--radius-lg);grid-template-columns:1fr}.saveModeOptionsPanelLead{grid-column:1;justify-content:center}.saveModeOptionsHint{white-space:normal;text-align:center}.saveModeOptionsPanelBody{grid-column:1;justify-content:center;flex-wrap:wrap}.saveModeCaptionPanel{top:auto;right:12px;left:12px;bottom:182px;width:auto;transform:none;padding:12px}.saveModeOptionsField{width:100%;flex-direction:column;gap:6px}.saveModeOptionsField span{line-height:1.2}.saveModeOptionsField textarea,.saveModeOptionsField input[type=text]{width:100%}.saveModeOptionsPanelFooter{grid-column:1;flex-wrap:wrap;justify-content:center}.saveModeOptionsPanelFooter .btn{flex:1 1 140px}}.perfSettingsOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:300}.perfSettingsOverlay.visible{display:flex}.perfSettingsDialog{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:380px;max-width:90vw;display:flex;flex-direction:column;overflow:hidden}.perfSettingsHeader{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--bg-tertiary);border-bottom:1px solid var(--border-subtle)}.perfSettingsHeader h2{margin:0;font-size:16px;font-weight:600;color:var(--text-primary)}.perfSettingsClose{background:transparent;border:none;color:var(--text-muted);font-size:24px;line-height:1;cursor:pointer;padding:0 4px;transition:color var(--transition-fast)}.perfSettingsClose:hover{color:var(--text-primary)}.perfSettingsBody{padding:20px}.perfSettingsSection{margin-bottom:20px}.perfSettingsSection:last-child{margin-bottom:0}.perfSettingsLabel{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.perfSettingsDesc{font-size:12px;color:var(--text-muted);margin:0 0 12px;line-height:1.5}.perfFpsOptions{display:flex;gap:8px;flex-wrap:wrap}.perfFpsBtn{padding:8px 14px;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13px;font-family:inherit;cursor:pointer;transition:all var(--transition-fast)}.perfFpsBtn:hover{background:var(--bg-elevated);border-color:var(--border-active);color:var(--text-primary)}.perfFpsBtn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#000;font-weight:600}.selectionMenu{position:absolute;z-index:20;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--surface-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.selectionMenu.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;min-width:160px}.selectionMenu .menuItem{padding:6px 10px;font-size:11px;font-weight:500;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.selectionMenu .menuItem:hover{background:var(--bg-elevated);border-color:var(--accent-primary);color:var(--accent-primary)}.selectionMenu .menuItem:active{transform:scale(.95)}.selectionMenu .menuItem.hidden{display:none}.selectionMenu .menuItem.toggled{background:var(--accent-primary);color:var(--bg-primary);border-color:var(--accent-primary)}.selectionMenu .menuItem.menuItemWide{grid-column:1/-1;justify-self:center;min-width:92px}.selectionMenu .menuItemDropdown{position:relative;padding:6px 10px;font-size:11px;font-weight:500;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;text-align:center;-webkit-user-select:none;user-select:none;outline:none}.selectionMenu .menuItemDropdown:hover,.selectionMenu .menuItemDropdown:focus-within{background:var(--bg-elevated);border-color:var(--accent-primary);color:var(--accent-primary)}.selectionMenu .menuItemDropdown:hover .menuDropdownPanel,.selectionMenu .menuItemDropdown:focus-within .menuDropdownPanel{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .12s ease,visibility 0s linear 0s}.selectionMenu .menuItemDropdown.hidden{display:none}.selectionMenu .menuItemDropdown .menuDropdownPanel{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 80ms ease,visibility 0s linear .25s;position:absolute;display:flex;top:0;left:0;right:auto;flex-direction:column;gap:4px;padding:0;background:transparent;border:none;box-shadow:none;z-index:21;min-width:100%;width:max-content}.obscureRegion{position:absolute;pointer-events:auto;z-index:5}.obscureRegionSurface{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;backdrop-filter:blur(34px);-webkit-backdrop-filter:blur(34px);background:#80808029;border:1px solid rgba(255,255,255,.78);box-shadow:inset 0 0 0 1px #00000073;pointer-events:none}.obscureRegion-revealed .obscureRegionSurface{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border:0;box-shadow:none}.obscureRegion-revealed{pointer-events:none!important}.obscureRegionVeil{position:absolute;top:0;right:0;bottom:0;left:0;background:#80808033;pointer-events:none}.obscureRegion-revealed .obscureRegionVeil{display:none}.obscureRegionOutline{position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible;pointer-events:none}.obscureRegionButton{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:7px 14px;min-width:58px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.7);background:#121212d1;color:#fff;font-size:12px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm)}.obscureRegionButton:hover{background:#222222eb}.obscureRegionClose{position:absolute;right:2px;top:2px;width:20px;height:20px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:#121212cc;color:#fff;font-size:12px;font-weight:700;line-height:18px;cursor:pointer}.obscureRegionHide{position:absolute;right:26px;top:2px;height:20px;padding:0 7px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.8);background:#121212cc;color:#fff;font-size:11px;font-weight:700;line-height:18px;cursor:pointer}.obscureRegion-revealed .obscureRegionClose,.obscureRegion-revealed .obscureRegionHide{pointer-events:auto!important}.obscureRegionClose:hover{background:#501414e6}.obscureRegionHide:hover{background:#222222eb}#timebarMount{position:fixed;bottom:0;left:0;width:100%;height:0;z-index:10000;pointer-events:none}#timebarMount>*{pointer-events:auto}.historyPanel{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-primary);z-index:200;display:flex;flex-direction:column;overflow:hidden}.historyPanelHeader{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);flex-shrink:0}.historyPanelTitle{font-size:14px;font-weight:600;color:var(--text-primary)}.historyPanelHeaderRight{display:flex;align-items:center;gap:10px}.historyPanelStatus{font-size:12px;color:var(--text-muted)}.historyPanelCloseBtn{width:30px;height:30px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}.historyPanelCloseBtn:hover{background:var(--bg-elevated);color:var(--text-primary)}.historyPanelPreviewWrap{flex:1;position:relative;overflow:hidden;background:var(--bg-canvas, #1a1a1a);display:flex;align-items:center;justify-content:center}.historyPanelPreview,.historyPanelSelection{position:absolute;top:0;left:0;transform-origin:0 0}.historyPanelPreview{image-rendering:auto}.historyPanelSelection{cursor:crosshair;pointer-events:auto;touch-action:none}.historyPanelEmptyPreview{position:absolute;color:var(--text-muted);font-size:13px;pointer-events:none;-webkit-user-select:none;user-select:none}.historyPanelToolControls{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:4px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:4px;box-shadow:var(--shadow-md);z-index:1}.historyToolBtn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.historyToolBtn:hover{background:var(--bg-elevated);color:var(--text-primary)}.historyToolBtn.active{background:var(--accent-primary);color:#000}.historyToolBtn svg{width:16px;height:16px}.historyToolBtn.historyZoomResetBtn{width:auto;min-width:48px;padding:0 8px;font-size:11px;font-weight:600}.historyPanelStripWrap{flex-shrink:0;background:var(--bg-secondary);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);overflow-x:auto;overflow-y:hidden;height:90px;scrollbar-width:thin;scrollbar-color:var(--border-subtle) transparent}.historyPanelStripWrap::-webkit-scrollbar{height:4px}.historyPanelStripWrap::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:2px}.historyPanelStrip{display:flex;align-items:center;gap:6px;padding:8px 12px;height:100%;min-width:max-content}.historyStripEmpty{font-size:12px;color:var(--text-muted);white-space:nowrap;padding:0 8px;align-self:center}.historyThumb{flex-shrink:0;width:64px;height:64px;border:2px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;position:relative;background:var(--bg-tertiary);transition:border-color var(--transition-fast)}.historyThumb:hover{border-color:var(--border-active)}.historyThumb.selected{border-color:var(--accent-primary);box-shadow:0 0 0 1px var(--accent-primary)}.historyThumb img{width:100%;height:100%;object-fit:cover;display:block}.historyThumbPlaceholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-muted)}.historyThumbLabel{position:absolute;bottom:0;left:0;right:0;font-size:9px;text-align:center;background:#0009;color:#fff;padding:2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.historyPanelFooter{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg-secondary);border-top:1px solid var(--border-subtle);flex-shrink:0;gap:12px}.historyPanelSelectionHint{font-size:12px;color:var(--text-muted);flex:1}.historyPanelFooterBtns{display:flex;gap:8px;flex-shrink:0}.m-0{margin:0}.m-1{margin:var(--space-1)}.m-2{margin:var(--space-2)}.m-3{margin:var(--space-3)}.m-4{margin:var(--space-4)}.p-0{padding:0}.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.hidden{display:none}.visible{display:block}@media (max-width: 767px){.hide-mobile{display:none}}@media (min-width: 1024px){.hide-desktop{display:none}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-tertiary)}::-webkit-scrollbar-thumb{background:#fff3;border-radius:5px;border:2px solid var(--bg-tertiary)}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.scroll-indicator{position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:48px;height:20px;background:var(--bg-secondary);border-radius:6px;border:1px solid transparent;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:100;box-shadow:0 2px 6px #0006}.scroll-indicator.visible{opacity:1;animation:borderPulse 3s ease-in-out infinite}.scroll-indicator:before,.scroll-indicator:after{content:"";position:absolute;left:50%;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid rgba(255,255,255,.7);transform:translate(-50%)}.scroll-indicator:before{top:3px}.scroll-indicator:after{top:8px;opacity:.5}@keyframes borderPulse{0%,to{border-color:#00d4aa33}50%{border-color:#00d4aa99}}.mirrorLine{stroke:var(--accent-primary);stroke-width:2;stroke-dasharray:8,4;opacity:.6}