:root{--color-background:#fff;--color-surface:#f6f7f9;--color-board:#fff;--color-board-chrome:#eceef2;--color-border:#e2e5ea;--color-border-subtle:#eceef2;--color-card:#fff;--color-ink:#111827;--color-muted:#6b7280;--color-blue:#1268f3;--color-blue-soft:#eef4ff;--color-green-soft:#ddf7e8;--color-purple-soft:#f1e7ff;--color-amber-soft:#fff4d7;--shadow-soft:0 16px 48px #0f172a14;--radius-card:14px;--radius-control:10px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--color-background);color:var(--color-ink);margin:0}a{color:inherit;text-decoration:none}button{border:1px solid var(--color-border);background:var(--color-card);color:inherit;font:inherit;border-radius:10px}.app-route-tabs{z-index:10;border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#f6f7fbe0;justify-content:center;gap:8px;padding:10px;display:flex;position:sticky;top:0}.app-route-tabs a{border:1px solid var(--color-border);background:var(--color-card);color:var(--color-muted);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700}.desktop-shell{flex-direction:column;min-height:100vh;padding:12px;display:flex}.desktop-shell-fullscreen{background:var(--color-surface);height:100vh;min-height:100vh;padding:0;overflow:hidden}.desktop-shell-fullscreen .desktop-layout{align-items:stretch;gap:0;height:100%}.desktop-shell-fullscreen .canvas-frame{height:100%;min-height:0;box-shadow:none;background:var(--color-board-chrome);border:none;border-radius:0;padding:0}.desktop-shell-fullscreen .whiteboard-surface{border:none;border-radius:0}.desktop-shell-fullscreen .side-panel{border-left:1px solid var(--color-border-subtle);background:var(--color-surface);box-sizing:border-box;flex-direction:column;gap:14px;width:220px;min-width:0;height:100%;min-height:0;padding:12px;display:flex;overflow:hidden}.desktop-shell-fullscreen .side-panel-scroll{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;flex:1;min-height:0;overflow:hidden auto}.desktop-shell-fullscreen .control-card{border-color:var(--color-border-subtle);box-shadow:none}.desktop-shell-fullscreen .canvas-controls{border-color:var(--color-border-subtle);background:#ffffffeb}.canvas-onboarding-hint{z-index:6;border:1px solid var(--color-border-subtle);max-width:220px;color:var(--color-ink);pointer-events:none;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffeb;border-radius:14px;gap:4px;padding:12px 14px;font-size:13px;display:grid;position:absolute;top:18px;right:244px}.canvas-onboarding-hint span{color:var(--color-muted);font-size:12px;line-height:1.35}.participant-toasts{z-index:7;pointer-events:none;gap:8px;display:grid;position:absolute;bottom:24px;right:244px}.participant-toasts p{border:1px solid var(--color-border-subtle);color:var(--color-ink);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffeb;border-radius:999px;margin:0;padding:9px 12px;font-size:12px;font-weight:700}.top-bar,.desktop-layout,.row,.canvas-controls,.phone-top-bar{align-items:center;display:flex}.top-bar{gap:12px;max-width:1160px;margin:0 auto 18px}.top-bar h1,.top-bar p,.mobile-showcase h1,.mobile-showcase p{margin:0}.brand-mark{background:var(--color-blue);color:#fff;border-radius:10px;place-items:center;width:36px;height:36px;font-weight:800;display:grid}.eyebrow{color:var(--color-muted);letter-spacing:.04em;text-transform:uppercase;font-size:12px;font-weight:700}.connection-pill{border:1px solid var(--color-border);background:var(--color-card);color:var(--color-muted);border-radius:999px;align-items:center;gap:8px;margin-left:24px;padding:8px 12px;font-size:13px;display:inline-flex}.status-dot{background:#94a3b8;border-radius:999px;width:10px;height:10px}.status-dot-live{background:#22c55e}.top-bar-actions{gap:8px;margin-left:auto;display:flex}.top-bar-actions button,.canvas-controls button{min-width:34px;height:34px}.canvas-download-button{padding:0 12px;font-size:12px;font-weight:700;min-width:auto!important}.desktop-layout{flex:1;align-items:stretch;gap:12px;max-width:none;min-height:0;margin:0}.canvas-frame{border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-card);min-width:0;min-height:calc(100vh - 96px);box-shadow:var(--shadow-soft);flex-direction:column;flex:1;padding:8px;display:flex;position:relative}.whiteboard-surface{border:1px solid var(--color-border);border-radius:14px;flex:1;min-height:0;position:relative;overflow:hidden}.whiteboard-surface.canvas-stack{background:var(--color-board-chrome)}.board-canvas-layer{touch-action:none;width:100%;height:100%;position:absolute;inset:0}.board-canvas-layer:not(.board-canvas-input-layer){pointer-events:none}.board-canvas-input-layer,.mobile-canvas-layer .board-canvas-input-layer{cursor:grab}.pen-touch-pad-active .mobile-canvas-layer .board-canvas-input-layer{cursor:crosshair}.canvas-controls button[aria-pressed=true]{border-color:var(--color-blue);background:var(--color-blue);color:#fff}.spotlight-glow,.spotlight-target{background:radial-gradient(circle,#1268f359 0 10%,#1268f31f 28%,#0000 62%);border-radius:999px;position:absolute}.spotlight-glow{width:360px;height:360px;top:33%;left:36%;transform:translate(-50%,-10%)}.diagram-layer{margin:0;padding:0;list-style:none;position:absolute;inset:0}.diagram-node{text-align:center;background:#fff;border:2px solid;border-radius:12px;min-width:130px;padding:16px 18px;font-family:Bradley Hand,Comic Sans MS,cursive;position:absolute}.diagram-node-blue{color:#2563eb;background:#eff6ff}.diagram-node-green{color:#15803d;background:var(--color-green-soft)}.diagram-node-purple{color:#7c3aed;background:var(--color-purple-soft)}.diagram-node-amber{color:#b7791f;background:var(--color-amber-soft)}.connector-layer{fill:none;stroke:#111827;stroke-linecap:round;stroke-width:.45px;width:100%;height:100%;position:absolute;inset:0}.connector-dashed{stroke-dasharray:1.2 1.2}.board-notes,.handwritten-note,.temporary-highlight{font-family:Bradley Hand,Comic Sans MS,cursive;position:absolute}.board-notes{color:#111827;top:48%;left:6%}.board-notes h2,.board-notes p{margin:0 0 8px}.auth-note{top:10%;right:10%}.worker-note{top:43%;right:9%}.db-note{bottom:22%;right:10%}.temporary-highlight{color:#2563eb;background:#eff6ff;border:2px solid #60a5fa;border-radius:10px;padding:10px 14px;bottom:31%;right:4%}.canvas-controls{z-index:5;border:1px solid var(--color-border-subtle);color:var(--color-muted);background:#ffffffeb;border-radius:999px;gap:8px;padding:6px;font-size:12px;position:absolute;bottom:34px;left:34px}.side-panel{flex-direction:column;flex-shrink:0;gap:14px;width:220px;min-width:0;display:flex}.side-panel-home-button{border:1px solid var(--color-border-subtle);background:var(--color-card);width:100%;color:var(--color-muted);font:inherit;cursor:pointer;border-radius:10px;padding:10px 12px;font-size:13px;font-weight:700}.side-panel-home-button:hover{color:var(--color-ink);border-color:var(--color-border)}.control-card{border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-card);padding:16px}.card-title{margin:0 0 12px;font-weight:800}.qr-card{text-align:center}.qr-code-wrap{border:1px solid var(--color-border-subtle);background:var(--color-card);border-radius:8px;margin:0 auto 10px;padding:8px;display:inline-block}.qr-code-wrap svg{display:block}.qr-placeholder{border:1px solid var(--color-border);background:#fff;grid-template-columns:repeat(5,1fr);gap:3px;width:112px;height:112px;margin:0 auto 10px;padding:8px;display:grid}.qr-placeholder span:nth-child(odd),.qr-placeholder span:nth-child(4n){background:#111827}.join-url,.facilitator-card p{color:var(--color-muted);overflow-wrap:anywhere;word-break:break-word;margin:0 0 10px;font-size:12px}.side-panel .row-meta{overflow-wrap:anywhere;word-break:break-word}.side-panel .control-card{min-width:0}.qr-copy-button{border:1px solid var(--color-border-subtle);background:var(--color-card);width:100%;color:var(--color-blue);font:inherit;cursor:pointer;border-radius:10px;margin-bottom:10px;padding:10px 12px;font-size:13px;font-weight:700}.qr-copy-button:disabled{opacity:.6;cursor:wait}.qr-code-loading{background:linear-gradient(90deg, var(--color-surface) 25%, var(--color-board-chrome) 50%, var(--color-surface) 75%);background-size:200% 100%;border-radius:4px;width:112px;height:112px;animation:1.2s infinite qr-shimmer}@keyframes qr-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.stack{gap:10px;display:grid}.row{gap:8px;font-size:13px}.row-meta{color:var(--color-muted);margin-left:auto;font-size:11px}.participant-row{flex-wrap:wrap;align-items:flex-start}.participant-row .row-meta{flex:100%;margin-left:18px}.participant-name{overflow-wrap:anywhere;min-width:0}.pen-dot,.participant-dot{border-radius:999px;width:10px;height:10px}.pen-dot-blue,.participant-dot-blue{background:var(--color-blue)}.pen-dot-black{background:#111827}.participant-dot-green{background:#22c55e}.participant-dot-purple{background:#a855f7}.participant-dot-amber{background:#f59e0b}.primary-soft{background:var(--color-blue-soft);width:100%;color:var(--color-blue);border-color:#bfdbfe;margin-bottom:10px;padding:10px 12px;font-weight:800}.mobile-controller-page{background:#fff;width:100%;height:100dvh;padding:0;overflow:hidden}.mobile-controller{width:100%;height:100%;box-shadow:none;background:#fff;border:0;border-radius:0;position:relative;overflow:hidden}.mobile-controller:fullscreen{background:var(--color-card);width:100vw;height:100vh}.immersive-mode-modal{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffdb;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.immersive-mode-card{border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);background:var(--color-card);text-align:center;gap:12px;width:min(100%,360px);padding:24px;display:grid}.immersive-mode-card h1,.immersive-mode-card p{margin:0}.immersive-mode-card p:not(.eyebrow){color:var(--color-muted);line-height:1.45}.landscape-orientation-overlay{display:none}.mobile-controller-layout{padding:0;display:block;position:absolute;inset:0}.pen-action-rail{z-index:4;right:max(14px, env(safe-area-inset-right));bottom:max(14px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffc7;border:1px solid #e2e8f0cc;border-radius:999px;gap:10px;padding:8px;display:flex;position:absolute;box-shadow:0 16px 40px #0f172a1a}.tool-button{width:clamp(40px,11dvh,62px);height:clamp(40px,11dvh,62px);color:var(--color-ink);text-align:center;touch-action:manipulation;border-radius:999px;justify-content:center;align-items:center;padding:0;font-size:11px;font-weight:850;transition:transform .12s,background .12s,color .12s;display:grid}.tool-button-icon{background:#ffffff3d;border-radius:999px;place-items:center;width:100%;height:100%;display:grid}.tool-button-icon svg,.undo-button svg,.release-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;width:22px;height:22px}.tool-button-label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tool-button-active{border-color:var(--participant-color,var(--color-blue));background:var(--participant-color,var(--color-blue));color:#fff;transform:scale(1.08)}.tool-button-active .tool-button-icon{background:#ffffff2e}.pen-touch-pad{touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;border:0;border-radius:0;width:100%;height:100%;position:relative;overflow:hidden}.pen-touch-pad-active{box-shadow:inset 0 0 0 2px #1268f359}.pen-touch-pad-active:after{z-index:3;color:var(--color-blue);content:"Drawing";pointer-events:none;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffdb;border:1px solid #bfdbfecc;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;position:absolute;top:84px;left:50%;transform:translate(-50%)}.mobile-canvas-layer{z-index:1;touch-action:none;width:100%;height:100%;position:absolute;inset:0}.pen-touch-pad-active .mobile-canvas-layer{cursor:crosshair}.floating-tool-dock{z-index:4;bottom:max(14px, env(safe-area-inset-bottom));left:max(14px, env(safe-area-inset-left));max-height:calc(100dvh - max(14px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom)));overscroll-behavior:contain;scrollbar-width:none;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-overflow-scrolling:touch;background:#ffffffc7;border:1px solid #bfdbfeb3;border-radius:999px;gap:clamp(6px,1.6dvh,10px);padding:clamp(5px,1.2dvh,7px);display:grid;position:absolute;overflow-y:auto;box-shadow:0 16px 40px #0f172a1f}.floating-tool-dock::-webkit-scrollbar{display:none}.floating-tool-dock-overflow{gap:clamp(6px,1.6dvh,10px);display:grid}.tool-more-button .tool-button-icon svg{fill:currentColor;stroke:none}.tool-more-button:not(.tool-button-active){background:#f8fafce0;border:1px dashed #94a3b8b3}.tool-color-indicator{background:var(--participant-color,var(--color-blue));border:1px solid #ffffffd6;border-radius:999px;width:28px;height:8px;margin:0 auto 2px;display:block}.undo-button,.release-button{touch-action:manipulation;border-radius:999px;place-items:center;width:54px;height:54px;padding:0;font-size:11px;font-weight:850;display:grid}.undo-button span,.release-button span{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.undo-button{color:#334155}.release-button{color:#dc2626;background:#fff1f2;border-color:#fecaca}@media (orientation:landscape) and (height<=520px){.mobile-controller-page{padding:0}.floating-tool-dock{top:50%;bottom:auto;left:max(14px, env(safe-area-inset-left));max-height:calc(100dvh - 28px);transform:translateY(-50%)}.pen-action-rail{flex-direction:column;top:50%;bottom:auto;right:14px;transform:translateY(-50%)}}@media (orientation:portrait) and (width<=720px){.landscape-orientation-overlay{z-index:19;text-align:center;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffe0;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.landscape-orientation-overlay section{max-width:280px;color:var(--color-ink);gap:8px;display:grid}.landscape-orientation-overlay strong{font-size:20px}.landscape-orientation-overlay span{color:var(--color-muted);line-height:1.4}}@media (width<=720px),(orientation:landscape) and (height<=520px){.app-route-tabs{display:none}}.modal-shell{border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-card);padding:20px}.landing-shell{background:radial-gradient(ellipse 80% 50% at 50% -20%, var(--color-blue-soft), transparent), var(--color-surface);place-items:center;min-height:100vh;padding:32px 16px 48px;display:grid}.mobile-join-shell{min-height:100vh}.landing-layout{gap:28px;width:min(100%,640px);display:grid}.landing-hero{text-align:center}.landing-hero .product-brand{justify-content:center;margin-bottom:8px}.landing-card .product-brand{justify-content:center;margin-bottom:4px}.landing-card-eyebrow{margin-top:12px}.product-brand{align-items:center;gap:12px;display:inline-flex}.product-brand-link{color:inherit;text-decoration:none}.product-brand-link:hover .product-brand-name{color:var(--color-blue)}.product-brand-mark{border-radius:13px;width:44px;height:44px;font-size:1.15rem}.product-brand-copy{text-align:left;gap:2px;display:grid}.product-brand-name{letter-spacing:-.03em;font-size:1.35rem;font-weight:800}.product-brand-domain{color:var(--color-muted);font-size:13px;font-weight:600}.landing-hero h1{letter-spacing:-.02em;margin:8px 0 14px;font-size:clamp(1.75rem,5vw,2.35rem);line-height:1.15}.landing-card{border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-card);width:min(100%,480px);box-shadow:var(--shadow-soft);text-align:center;padding:32px 28px}.landing-card h1{margin:8px 0 12px;font-size:clamp(1.6rem,4vw,2rem)}.landing-cta-card{width:100%;margin:0 auto}.landing-cta-label{color:var(--color-muted);letter-spacing:.04em;text-transform:uppercase;margin:0 0 14px;font-size:13px;font-weight:700}.landing-brand{border-radius:14px;width:48px;height:48px;margin:0 auto 12px;font-size:1.25rem}.landing-lead{max-width:34rem;color:var(--color-muted);margin:0 auto;font-size:1.05rem;line-height:1.6}.landing-steps{gap:12px;margin:0;padding:0;list-style:none;display:grid}.landing-step{border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-card);box-shadow:var(--shadow-soft);text-align:left;gap:4px;padding:16px 18px 16px 56px;display:grid;position:relative}.landing-step strong{font-size:15px}.landing-step span:last-child{color:var(--color-muted);font-size:14px;line-height:1.45}.landing-step-number{background:var(--color-blue-soft);width:28px;height:28px;color:var(--color-blue);border-radius:999px;place-items:center;font-size:13px;font-weight:800;display:grid;position:absolute;top:16px;left:16px}@media (width>=560px){.landing-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.landing-step{text-align:center;padding:18px 16px 16px}.landing-step-number{margin:0 auto 8px;position:static}}.landing-primary-button{border-radius:var(--radius-control);background:var(--color-blue);color:#fff;width:100%;font:inherit;cursor:pointer;border:none;padding:14px 18px;font-size:15px;font-weight:700}.landing-primary-button:disabled{opacity:.7;cursor:wait}.landing-link-button{text-align:center;display:inline-block}.landing-error{color:#dc2626;margin:12px 0 0;font-size:13px}.landing-footnote{color:var(--color-muted);margin:20px 0 0;font-size:13px}.landing-site-footnote{color:var(--color-muted);letter-spacing:.02em;margin:14px 0 0;font-size:12px;font-weight:600}.landing-link{color:var(--color-blue);font-weight:700}.join-form{text-align:left;gap:12px;display:grid}.join-label{font-size:13px;font-weight:700}.join-input{border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);background:var(--color-card);width:100%;color:inherit;font:inherit;padding:12px 14px}.join-color-field{border:0;gap:10px;margin:0;padding:0;display:grid}.join-color-field legend{padding:0;font-size:13px;font-weight:700}.join-color-options{flex-wrap:wrap;gap:10px;display:flex}.join-color-option{background:var(--participant-color);cursor:pointer;border:2px solid #0000;border-radius:999px;width:36px;height:36px;padding:0}.join-color-option-selected{border-color:var(--color-ink);outline:3px solid color-mix(in srgb, var(--participant-color), white 72%)}