.canvas-container{background:radial-gradient(circle,#fff 0%,#f7f7f4 58%,#eef2f0 100%);position:absolute;inset:0;overflow:hidden}.mandala-canvas{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:100%;display:block;position:absolute;inset:0}.mandala-render-layer{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.committed-layer{z-index:1}.draft-layer{z-index:2}.mandala-canvas{z-index:3}.canvas-grid{fill:url(#mandala-grid);opacity:.72}.canvas-hit-area{fill:#0000}.rendered-strokes,.remote-draft-strokes,.preview-strokes,.guides,.remote-cursors{pointer-events:none}.rendered-strokes path,.preview-strokes path{shape-rendering:geometricprecision}.preview-strokes path,.remote-draft-strokes path{opacity:.78}.remote-cursor{transition:transform 80ms linear}.remote-cursor-dot,.remote-cursor-ring,.remote-cursor-label,.brush-preview{pointer-events:none}.remote-cursor-dot{opacity:.94;filter:drop-shadow(0 1px 2px #ffffffb8)}.remote-cursor-ring{fill:none;stroke-width:1.4px;opacity:.28}.remote-cursor-label{paint-order:stroke;stroke:#ffffffd1;stroke-linejoin:round;stroke-width:3px;font-size:11px;font-weight:760}.brush-preview{opacity:.72;transition:opacity .12s}.brush-preview>circle:first-child{fill:#1827330e;stroke:#18273380;stroke-width:1.2px;vector-effect:non-scaling-stroke}.brush-preview-center{fill:#182733b3;stroke:#ffffffd9;stroke-width:1px}.selected-stroke-highlight{pointer-events:none}.selected-stroke-highlight path{fill:none;stroke:#e86336eb;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke;filter:drop-shadow(0 0 6px #e8633652)}.stroke-selection-dev-tools{left:max(18px, env(safe-area-inset-left));top:calc(max(18px, env(safe-area-inset-top)) + 144px);z-index:8;position:absolute}.stroke-selection-dev-tools button{appearance:none;color:#7f1d1d;-webkit-backdrop-filter:blur(14px)saturate(1.3);cursor:pointer;background:#fff7edd1;border:1px solid #991b1b33;border-radius:999px;padding:.42rem .62rem;font-size:.72rem;font-weight:760;box-shadow:0 12px 30px #1f29371f}.stroke-selection-dev-tools button:disabled{cursor:default;opacity:.58}.guide-ring{fill:none;stroke:#667085;stroke-width:.62px;opacity:.15}.guide-line{stroke:#667085;stroke-width:.55px;opacity:.13}.center-marker{fill:#d76553;opacity:.45;pointer-events:none}.zoom-indicator{right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));z-index:4;color:#17212b99;font-variant-numeric:tabular-nums;pointer-events:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffca3;border:1px solid #2e374217;border-radius:999px;padding:.34rem .52rem;font-size:.7rem;font-weight:700;position:absolute}.touch-loupe{z-index:6;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(16px)saturate(145%);background:#fffffc9e;border:1px solid #2e374224;border-radius:999px;transition:opacity .12s,scale .12s;position:absolute;top:0;left:0;overflow:hidden;scale:.94;box-shadow:0 18px 42px #1f293733,inset 0 1px #ffffffd1}.touch-loupe.visible{opacity:1;scale:1}.touch-loupe-svg{width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}.touch-loupe-canvas{clip-path:circle(50%);border-radius:999px;width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;inset:6px}.touch-loupe-fill{fill:#fffffc29}.touch-loupe-grid{fill:url(#touch-loupe-grid);opacity:.72}.touch-loupe-ring{fill:none;stroke:#2e37423d;stroke-width:1.8px}.touch-loupe-crosshair{filter:drop-shadow(0 1px 2px #fffc)}.touch-loupe-crosshair line{stroke:#17212bb3;stroke-linecap:round;stroke-width:1.35px}.touch-loupe-crosshair circle{fill:#d76553;stroke:#ffffffe6;stroke-width:1px}@media (width<=760px){.zoom-indicator{right:max(12px, env(safe-area-inset-right));bottom:calc(max(12px, env(safe-area-inset-bottom)) + 166px)}}.app-shell{color:#17212b;background:#f7f7f4;width:100%;height:100%;position:relative;overflow:hidden}.app-shell.fullscreen-active,.app-shell.fullscreen-fallback{z-index:1000;width:100vw;height:100dvh;position:fixed;inset:0}html.mandala-fullscreen-active,body.mandala-fullscreen-active{overscroll-behavior:none;width:100%;height:100%;overflow:hidden}body.mandala-fullscreen-active{position:fixed;inset:0}.app-brand{top:max(18px, env(safe-area-inset-top));left:max(18px, env(safe-area-inset-left));z-index:4;color:#17212bd6;pointer-events:none;align-items:baseline;gap:.65rem;padding:.58rem .78rem;display:flex;position:absolute}.app-brand span{font-size:.95rem;font-weight:760}.app-brand small{color:#17212b85;font-size:.72rem}.floating-panel{z-index:5;-webkit-backdrop-filter:blur(16px)saturate(1.4);background:#ffffffbd;border:1px solid #ffffff7a;border-radius:16px;align-items:center;gap:.48rem;padding:.46rem;animation:.18s ease-out both panel-in;display:flex;position:absolute;box-shadow:0 18px 42px #1f29371c,0 2px 10px #1f29370d}@keyframes panel-in{0%{opacity:0}to{opacity:1}}.floating-toolbar{left:50%;bottom:max(18px, env(safe-area-inset-bottom));align-items:center;transform:translate(-50%)}.floating-palette{left:max(18px, env(safe-area-inset-left));flex-direction:column;padding:.42rem;top:50%;transform:translateY(-50%)}.canvas-overlay-controls{right:max(18px, env(safe-area-inset-right));flex-direction:column;top:50%;transform:translateY(-50%)}.navigation-button-row{flex-direction:column;gap:.28rem;display:flex}.navigation-loupe-fov{display:none}.settings-popover{left:calc(max(18px, env(safe-area-inset-left)) + 58px);flex-direction:column;align-items:stretch;gap:.82rem;width:min(360px,100vw - 36px);padding:.85rem;top:50%;transform:translateY(-50%)}.floating-group{align-items:center;gap:.28rem;display:flex}.floating-separator{background:#17212b1a;width:1px;height:28px}.palette-separator{height:24px}.icon-button{color:#17212bb3;background:0 0;border:1px solid #0000;border-radius:12px;place-items:center;width:38px;height:38px;display:inline-grid}.icon-button:hover:not(:disabled){color:#111827;background:#17212b0f}.icon-button.active{color:#fff;background:#182733;box-shadow:0 8px 24px #1827332e}.icon-button.danger{color:#a34032}.icon-button.danger:hover:not(:disabled){color:#8e2f24;background:#a3403217}.icon-button:disabled{opacity:.32;cursor:not-allowed}.icon-button.loading{opacity:.58}.icon-button.loading svg{animation:.8s linear infinite icon-button-busy}@keyframes icon-button-busy{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.slider-control{gap:.35rem;min-width:150px;padding:0 .25rem;display:grid}.slider-control span{color:#17212b9e;justify-content:space-between;align-items:center;gap:.75rem;font-size:.72rem;font-weight:680;display:flex}.slider-control strong{color:#17212be6;font-variant-numeric:tabular-nums}.slider-control input{accent-color:#182733;width:100%}.color-swatch{border:2px solid #ffffffeb;border-radius:999px;width:34px;height:34px;box-shadow:inset 0 0 0 1px #17212b2e,0 5px 15px #17212b1f}.color-swatch.selected{box-shadow:inset 0 0 0 1px #17212b26,0 0 0 3px #182733e0,0 8px 20px #17212b29}.panel-heading{justify-content:space-between;align-items:center;gap:.75rem;width:100%;display:flex}.panel-heading span{color:#17212bd1;font-size:.82rem;font-weight:760}.control-stack{gap:.42rem;display:grid}.control-label{color:#17212b94;font-size:.72rem;font-weight:720}.segmented-control{background:#17212b0e;border-radius:12px;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:.28rem;padding:.25rem;display:grid}.segmented-control button{color:#17212b9e;background:0 0;border-radius:9px;min-height:32px;padding:0 .48rem;font-size:.72rem;font-weight:700}.segmented-control button.active{color:#17212b;background:#ffffffeb;box-shadow:0 4px 14px #17212b1a}.toggle-control{color:#17212bbd;align-items:center;gap:.62rem;font-size:.78rem;font-weight:700;display:flex}.toggle-control input{accent-color:#182733;width:18px;height:18px}.connection-status{right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));z-index:5;color:#17212bad;-webkit-backdrop-filter:blur(16px)saturate(1.4);pointer-events:auto;background:#ffffffb8;border:1px solid #ffffff7a;border-radius:999px;align-items:center;gap:.44rem;padding:.42rem .62rem;font-size:.7rem;font-weight:700;display:flex;position:absolute;box-shadow:0 12px 32px #1f293717}.connection-status strong{color:#17212b7a;font-style:normal;font-weight:700}.sync-error-message{color:#991b1b;text-overflow:ellipsis;white-space:nowrap;max-width:min(320px,42vw);font-size:.66rem;font-weight:760;overflow:hidden}.online-users-toggle{color:#17212b80;font:inherit;background:0 0;border:0;padding:0}.online-users-toggle:hover{color:#17212bc7}.online-users-list{color:#17212bb8;-webkit-backdrop-filter:blur(16px)saturate(1.4);background:#ffffffc7;border:1px solid #ffffff7a;border-radius:14px;gap:.34rem;min-width:156px;padding:.52rem;display:grid;position:absolute;bottom:calc(100% + 8px);right:0;box-shadow:0 16px 36px #1f29371f,0 2px 10px #1f29370d}.online-user{white-space:nowrap;align-items:center;gap:.42rem;min-height:24px;display:flex}.online-user-dot{border-radius:999px;flex:none;width:8px;height:8px;box-shadow:0 0 0 2px #ffffffdb}.status-dot{background:#9ca3af;border-radius:999px;width:7px;height:7px}.status-dot.connected,.status-dot.saved{background:#4f8f65}.status-dot.connecting,.status-dot.reconnecting,.status-dot.saving{background:#c3913a}.status-dot.error,.status-dot.offline{background:#b65345}.realtime-debug-overlay{left:max(18px, env(safe-area-inset-left));bottom:max(18px, env(safe-area-inset-bottom));z-index:7;color:#17212bd1;-webkit-backdrop-filter:blur(16px)saturate(1.35);pointer-events:none;background:#ffffffd6;border:1px solid #17212b1a;border-radius:8px;gap:.58rem;width:min(360px,100vw - 36px);padding:.72rem;font-size:.72rem;display:grid;position:absolute;box-shadow:0 18px 44px #1f293729,0 2px 10px #1f293712}.realtime-debug-heading{justify-content:space-between;align-items:center;gap:.6rem;display:flex}.realtime-debug-heading strong{font-size:.78rem;font-weight:780}.realtime-debug-heading span,.realtime-debug-counts span{font-variant-numeric:tabular-nums}.realtime-debug-grid{grid-template-columns:max-content minmax(0,1fr);gap:.24rem .58rem;margin:0;display:grid}.realtime-debug-grid dt{color:#17212b85;font-weight:720}.realtime-debug-grid dd{text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0;font-weight:740;overflow:hidden}.realtime-debug-counts{color:#17212b9e;grid-template-columns:repeat(2,minmax(0,1fr));gap:.24rem .52rem;line-height:1.35;display:grid}.performance-dev-tools{left:max(18px, env(safe-area-inset-left));bottom:calc(max(18px, env(safe-area-inset-bottom)) + 128px);z-index:7;-webkit-backdrop-filter:blur(14px)saturate(1.35);background:#ffffffbd;border:1px solid #ffffff7a;border-radius:12px;gap:.32rem;padding:.38rem;display:flex;position:absolute;box-shadow:0 12px 30px #1f29371a}.performance-dev-tools button{color:#17212bb8;background:#17212b0e;border-radius:8px;min-height:30px;padding:0 .48rem;font-size:.68rem;font-weight:760}.admin-diagnostics-panel{left:max(18px, env(safe-area-inset-left));top:max(18px, env(safe-area-inset-top));z-index:9;color:#17212bc7;-webkit-backdrop-filter:blur(16px)saturate(1.35);background:#ffffffc2;border:1px solid #ffffff8a;border-radius:12px;gap:.5rem;width:min(360px,100vw - 36px);padding:.72rem;font-size:.68rem;display:grid;position:absolute;box-shadow:0 16px 38px #1f29371f}.admin-diagnostics-heading{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.admin-diagnostics-heading strong{color:#17212be0;font-size:.72rem}.admin-diagnostics-heading span{font-weight:760}.admin-diagnostics-panel dl{gap:.36rem;margin:0;display:grid}.admin-diagnostics-panel dl>div{grid-template-columns:92px minmax(0,1fr);align-items:center;gap:.5rem;display:grid}.admin-diagnostics-panel dt{color:#17212b85;font-weight:720}.admin-diagnostics-panel dd{align-items:center;gap:.36rem;min-width:0;margin:0;display:flex;overflow:hidden}.admin-diagnostics-panel code{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.admin-diagnostics-panel button{appearance:none;color:#17212bc7;cursor:pointer;background:#ffffff9e;border:1px solid #17212b1f;border-radius:999px;flex:none;padding:.18rem .42rem;font-size:.64rem;font-weight:760}.mobile-bottom-toolbar,.mobile-sheet-backdrop,.mobile-only{display:none}@media (width<=760px){.floating-panel,.mobile-bottom-toolbar,.mobile-settings-sheet,.connection-status,.online-users-list,.realtime-debug-overlay{-webkit-backdrop-filter:blur(18px)saturate(1.45);background:#ffffffad;border:1px solid #ffffff8a;box-shadow:0 18px 46px #1f293724,0 2px 12px #1f29370f}.performance-dev-tools{left:max(10px, env(safe-area-inset-left));bottom:calc(max(10px, env(safe-area-inset-bottom)) + 132px)}.desktop-only{display:none!important}.mobile-only{display:flex}.canvas-overlay-controls{left:50%;right:auto;top:max(10px, env(safe-area-inset-top));border-radius:14px;flex-direction:column;gap:.18rem;padding:.28rem;transform:translate(-50%)}.navigation-button-row{flex-direction:row;gap:.18rem;display:flex}.navigation-loupe-fov{width:100%;padding-top:.18rem}.navigation-loupe-fov[aria-hidden=true]{display:none}.navigation-loupe-fov .segmented-control{background:#ffffff3d;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.navigation-loupe-fov .segmented-control button{min-height:30px;padding:0 .4rem;font-size:.68rem}.canvas-overlay-controls .icon-button{width:38px;height:38px}.mobile-bottom-toolbar .icon-button,.canvas-overlay-controls .icon-button,.mobile-settings-sheet .icon-button{color:#17212bbd;-webkit-backdrop-filter:blur(10px)saturate(1.25);background:#ffffff52;border:1px solid #ffffff80;box-shadow:0 6px 18px #1f293714}.mobile-bottom-toolbar .icon-button.active,.canvas-overlay-controls .icon-button.active,.mobile-settings-sheet .icon-button.active{color:#fff;background:#182733e6;border-color:#18273333}.mobile-bottom-toolbar{left:max(10px, env(safe-area-inset-left));right:max(10px, env(safe-area-inset-right));bottom:max(10px, env(safe-area-inset-bottom));z-index:6;-webkit-backdrop-filter:blur(18px)saturate(1.45);background:#ffffffad;border:1px solid #ffffff8a;border-radius:20px;align-items:center;gap:0;padding:.52rem;transition:padding .18s,border-radius .18s;display:grid;position:absolute;box-shadow:0 18px 46px #1f293724,0 2px 12px #1f29370f}.mobile-bottom-toolbar.expanded{border-radius:22px;gap:.58rem;padding:.68rem}.connection-status{right:max(12px, env(safe-area-inset-right));bottom:calc(max(12px, env(safe-area-inset-bottom)) + 74px)}.app-shell:has(.mobile-bottom-toolbar.expanded) .connection-status{bottom:calc(max(12px, env(safe-area-inset-bottom)) + 274px)}.realtime-debug-overlay{left:max(10px, env(safe-area-inset-left));right:max(10px, env(safe-area-inset-right));bottom:calc(max(10px, env(safe-area-inset-bottom)) + 132px);width:auto}.app-shell:has(.mobile-bottom-toolbar.expanded) .realtime-debug-overlay{bottom:calc(max(10px, env(safe-area-inset-bottom)) + 332px)}.realtime-debug-counts{grid-template-columns:minmax(0,1fr)}.mobile-tool-row,.mobile-palette-row{justify-content:space-between;align-items:center;gap:.28rem;display:flex}.mobile-bottom-toolbar.expanded .mobile-tool-row{gap:.42rem}.mobile-tool-row .icon-button{width:40px;height:40px}.mobile-bottom-toolbar.expanded .mobile-tool-row .icon-button{width:44px;height:44px}.mobile-style-chip{color:#17212bc2;-webkit-backdrop-filter:blur(10px)saturate(1.25);background:#ffffff52;border:1px solid #ffffff80;border-radius:14px;justify-content:center;align-items:center;gap:.38rem;min-width:54px;height:40px;padding:0 .58rem;display:inline-flex;box-shadow:0 6px 18px #1f293714}.mobile-style-swatch{border:2px solid #ffffffe6;border-radius:999px;width:21px;height:21px;box-shadow:inset 0 0 0 1px #17212b29,0 4px 12px #17212b1f}.mobile-brush-size{font-variant-numeric:tabular-nums;min-width:1.35rem;font-size:.72rem;font-weight:780}.mobile-bottom-toolbar.expanded .mobile-brush-size{display:none}.mobile-expanded-tools{opacity:0;pointer-events:none;gap:.58rem;width:100%;max-height:0;transition:max-height .22s,opacity .16s,transform .18s;display:grid;overflow:hidden;transform:translateY(6px)}.mobile-bottom-toolbar.expanded .mobile-expanded-tools{opacity:1;pointer-events:auto;max-height:320px;overflow:visible;transform:translateY(0)}.mobile-palette-row{flex-wrap:wrap;justify-content:center;gap:.42rem;padding:.2rem;overflow:visible}.mobile-palette-row .color-swatch{width:38px;height:38px}.mobile-bottom-toolbar .slider-control{justify-content:center;width:100%;min-width:0;min-height:58px;padding:.42rem .62rem}.mobile-sheet-backdrop{z-index:8;pointer-events:none;background:#17212b00;justify-content:center;align-items:flex-end;transition:background .18s;position:absolute;inset:0}.mobile-sheet-backdrop.open{pointer-events:auto;background:#17212b1f}.mobile-settings-sheet{width:100%;max-height:min(76vh,620px);padding:.95rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));-webkit-backdrop-filter:blur(20px)saturate(1.5);background:#ffffffad;border:1px solid #ffffff8a;border-radius:24px 24px 0 0;gap:.85rem;transition:transform .22s;display:grid;transform:translateY(102%);box-shadow:0 -18px 48px #1f293729,0 -2px 12px #1f29370f}.mobile-settings-sheet .segmented-control,.mobile-bottom-toolbar .slider-control{background:#ffffff3d;border-radius:12px}.mobile-bottom-toolbar .slider-control input{appearance:none;background:0 0;height:30px;margin:-.32rem 0}.mobile-bottom-toolbar .slider-control input::-webkit-slider-runnable-track{background:#17212b29;border-radius:999px;height:5px}.mobile-bottom-toolbar .slider-control input::-webkit-slider-thumb{appearance:none;background:#182733;border:3px solid #ffffffeb;border-radius:999px;width:28px;height:28px;margin-top:-11.5px;box-shadow:0 7px 18px #17212b38}.mobile-bottom-toolbar .slider-control input::-moz-range-track{background:#17212b29;border-radius:999px;height:5px}.mobile-bottom-toolbar .slider-control input::-moz-range-thumb{background:#182733;border:3px solid #ffffffeb;border-radius:999px;width:28px;height:28px;box-shadow:0 7px 18px #17212b38}.mobile-sheet-backdrop.open .mobile-settings-sheet{transform:translateY(0)}.segmented-control{grid-template-columns:repeat(3,minmax(0,1fr))}@media (width<=380px){.mobile-bottom-toolbar.expanded .mobile-tool-row .icon-button{width:42px;height:42px}.mobile-palette-row .color-swatch{width:36px;height:36px}}}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{overscroll-behavior:none;width:100%;height:100%;overflow:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#333;background-color:#fafafa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}button{cursor:pointer;border:none;outline:none;font-family:inherit;transition:all .2s}input[type=range]{cursor:pointer}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}