:root{--font:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;--bg:#f4f5f7;--panel:#fff;--panel-border:#0f172a17;--text:#1f2328;--muted:#5f6670;--hover:#0f172a0f;--active:#e3ecfd;--accent:#2f6fde;--accent-text:#fff;--danger:#c8321f;--shadow:0 1px 2px #0f172a0f, 0 6px 20px #0f172a1a;--radius:12px;--tool-body:#d6dae0;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#15171b;--panel:#23262c;--panel-border:#ffffff17;--text:#e8eaed;--muted:#a0a7b1;--hover:#ffffff12;--active:#4d8bff38;--accent:#5b95ff;--danger:#ff6b5a;--tool-body:#e3e5e9;--shadow:0 1px 2px #0000004d, 0 8px 24px #00000059;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased}#app{height:100%}button,input{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon{place-items:center;display:inline-grid}.icon svg{width:20px;height:20px;display:block}.board-view{position:fixed;inset:0;overflow:hidden}.canvas-host{position:absolute;inset:0}.wb-canvas{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.panel{z-index:10;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow);align-items:center;gap:2px;padding:4px;display:flex;position:absolute}.top-left{top:12px;left:12px}.top-right{top:12px;right:12px}.zoom-bar{bottom:12px;right:12px}.sel-bar{z-index:11}.sel-bar .swatches{grid-template-columns:repeat(8,24px);gap:4px;padding:0 4px}.sel-bar .swatch{width:24px;height:24px}.icon-btn{background:0 0;border:0;border-radius:8px;place-items:center;width:36px;height:36px;padding:0;display:inline-grid;position:relative}.icon-btn:hover{background:var(--hover)}.icon-btn.active{background:var(--active);color:var(--accent)}.icon-btn.loose{color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);background:0 0}.icon-btn.loose .icon{opacity:.55}.icon-btn:disabled{opacity:.35;cursor:default;background:0 0}.sep{background:var(--panel-border);flex:none;width:1px;height:24px;margin:0 4px}.board-name{text-overflow:ellipsis;background:0 0;border:1px solid #0000;border-radius:8px;width:190px;padding:6px 8px;font-weight:600}.board-name:hover{border-color:var(--panel-border)}.board-name:focus{border-color:var(--accent);outline:none}.dock{z-index:10;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.dock .panel{position:static}.dock-main{padding:6px}.dock-main .icon-btn{width:40px;height:40px}.ink-tray{align-items:flex-end;height:54px;padding:0 6px;overflow:hidden}.ink-tray .icon-btn{align-self:center}.beta-badge{background:var(--accent);color:#fff;letter-spacing:.04em;pointer-events:none;border-radius:6px;padding:0 4px;font-size:8px;font-weight:700;line-height:13px;position:absolute;top:-4px;right:-2px}.ink-tray .sep{align-self:center}.tray-tool{background:0 0;border:0;justify-content:center;align-items:flex-end;width:40px;height:52px;padding:0;transition:transform .15s;display:flex;transform:translateY(17px)}.tray-tool svg{width:26px;height:48px;display:block}.tray-tool:hover{transform:translateY(12px)}.tray-tool.active{transform:translateY(6px)}.art-body{fill:var(--tool-body)}.zoom-label{font-variant-numeric:tabular-nums;background:0 0;border:0;border-radius:8px;min-width:52px;height:36px;font-size:13px}.zoom-label:hover{background:var(--hover)}.wb-text-editor{z-index:5;resize:none;overflow-wrap:break-word;caret-color:currentColor;background:0 0;border:0;outline:none;margin:0;padding:0;position:absolute;overflow:hidden}.popover{z-index:50;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);max-width:calc(100vw - 16px);box-shadow:var(--shadow);padding:10px;position:fixed}.pop-section{flex-direction:column;gap:8px;min-width:200px;display:flex}.pop-label{color:var(--muted);font-size:12px;font-weight:600}.pop-section hr{border:0;border-top:1px solid var(--panel-border);width:100%;margin:4px 0}.swatches{grid-template-columns:repeat(5,28px);gap:8px;display:grid}.menu .swatches{grid-template-columns:repeat(7,28px)}.swatch{border:0;border-radius:50%;width:28px;height:28px;padding:0;box-shadow:inset 0 0 0 1px #0000002e}.swatch.active{outline:2px solid var(--accent);outline-offset:2px}.sizes{gap:6px;display:flex}.size-btn{border:1px solid var(--panel-border);background:0 0;border-radius:8px;place-items:center;width:36px;height:36px;padding:0;display:grid}.size-btn.active{border-color:var(--accent);background:var(--active)}.size-dot{background:currentColor;border-radius:50%;display:block}.ink-pop{gap:10px;width:248px}.eraser-note{margin:0;font-size:12px;line-height:1.4}.slider-row{align-items:center;gap:10px;display:flex}.slider{appearance:none;cursor:pointer;background:0 0;flex:1;min-width:0;height:22px;margin:0}.slider::-webkit-slider-runnable-track{background:#7f7f7f59;border-radius:3px;height:6px}.slider::-moz-range-track{background:#7f7f7f59;border-radius:3px;height:6px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:1px solid #0003;border-radius:50%;width:18px;height:18px;margin-top:-6px;box-shadow:0 1px 3px #0000004d}.slider::-moz-range-thumb{background:#fff;border:1px solid #0003;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 3px #0000004d}.slider:focus-visible{outline:none}.slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--accent);outline-offset:1px}.opacity-slider::-webkit-slider-runnable-track{background:linear-gradient(to right, transparent, var(--ink,#000)), repeating-conic-gradient(#c9c9c9 0 25%, #fff 0 50%) 0 0 / 8px 8px}.opacity-slider::-moz-range-track{background:linear-gradient(to right, transparent, var(--ink,#000)), repeating-conic-gradient(#c9c9c9 0 25%, #fff 0 50%) 0 0 / 8px 8px}.slider-value{text-align:center;font-variant-numeric:tabular-nums;width:46px;font-weight:600}.slider-num{border:1px solid var(--panel-border);background:var(--bg);text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;border-radius:6px;width:46px;padding:3px 4px}.slider-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.slider-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.color-grid{grid-template-columns:repeat(6,30px);justify-content:space-between;row-gap:10px;display:grid}.color-grid .swatch{width:30px;height:30px}.custom-slot{display:contents}.add-color{border:1.5px dashed var(--muted);box-shadow:none;color:var(--muted);background:0 0;place-items:center;display:grid}.add-color:hover{color:var(--text);border-color:var(--text)}.add-color .icon svg{width:16px;height:16px}.hidden-picker{opacity:0;pointer-events:none;border:0;width:1px;height:1px;padding:0;position:absolute;top:120px;left:16px}.ends-row{gap:6px;display:flex}.check{cursor:pointer;align-items:center;gap:8px;display:flex}.check input{width:16px;height:16px;accent-color:var(--accent)}.segmented{background:var(--hover);border-radius:8px;padding:2px;display:flex}.segmented button{white-space:nowrap;background:0 0;border:0;border-radius:6px;flex:1;padding:5px 8px}.segmented button.active{background:var(--panel);font-weight:600;box-shadow:0 1px 2px #0000001f}.menu-item{text-align:left;white-space:nowrap;background:0 0;border:0;border-radius:8px;align-items:center;gap:10px;width:100%;padding:8px 10px;display:flex}.menu-item:hover{background:var(--hover)}.menu-item.danger{color:var(--danger)}.menu-item.two-line{white-space:normal;flex-direction:column;align-items:flex-start;gap:0;max-width:280px}.menu-item.two-line span{color:var(--muted);font-size:12px}.shape-grid{grid-template-columns:repeat(3,40px);gap:4px;display:grid}.shape-grid .icon-btn{width:40px;height:40px}.more-pop .swatches{grid-template-columns:repeat(7,28px)}.emoji-grid{grid-template-columns:repeat(6,40px);gap:4px;display:grid}.emoji-btn{background:0 0;border:0;border-radius:8px;width:40px;height:40px;padding:0;font-size:22px}.emoji-btn:hover{background:var(--hover)}.modal-backdrop{z-index:100;background:#0a0c1066;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal-backdrop~.modal-backdrop{background:#0a0c1026}.modal{background:var(--panel);width:min(520px,100%);max-height:calc(100vh - 32px);box-shadow:var(--shadow);border-radius:14px;overflow:auto}.modal-head{justify-content:space-between;align-items:center;padding:14px 14px 0 20px;display:flex}.modal-head h2{margin:0;font-size:17px}.modal-body{padding:8px 20px 16px}.modal-body p{margin:8px 0}.modal-actions{justify-content:flex-end;gap:8px;padding:0 20px 18px;display:flex}.muted{color:var(--muted)}.settings h3{margin:18px 0 8px;font-size:14px}.settings h3:first-child{margin-top:4px}.settings .muted{margin:0 0 8px;font-size:13px}.setting-row{cursor:pointer;justify-content:space-between;align-items:center;gap:16px;display:flex}.setting-block small{color:var(--muted);margin:2px 0 8px;font-size:12.5px;display:block}.secret-details{border:1px solid var(--panel-border);border-radius:8px;padding:0 12px}.secret-details summary{cursor:pointer;padding:9px 0;font-size:13px;font-weight:600}.secret-body{padding-bottom:10px}.secret-body .dialog-buttons{flex-wrap:wrap;margin-top:12px}.setting-row small{color:var(--muted);margin-top:2px;font-size:12.5px;display:block}.switch{appearance:none;cursor:pointer;background:#7f7f7f73;border-radius:11px;flex:none;width:40px;height:22px;margin:0;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0000004d}.switch:checked{background:var(--accent)}.switch:checked:after{transform:translate(18px)}.keybinds{grid-template-columns:1fr 1fr;gap:2px 20px;margin-bottom:10px;display:grid}.keybind-row{justify-content:space-between;align-items:center;gap:8px;padding:3px 0;display:flex}.key-btn{background:0 0;border:1px solid #0000;border-radius:6px;min-width:44px;padding:3px 6px;font-size:12px}.key-btn:hover{border-color:var(--panel-border);background:var(--hover)}.key-btn.listening{border-color:var(--accent);color:var(--accent)}@media (width<=520px){.keybinds{grid-template-columns:1fr}}.shortcuts{grid-template-columns:auto 1fr;align-items:center;gap:8px 16px;margin:4px 0;display:grid}.shortcuts dt{white-space:nowrap;margin:0}.shortcuts dd{margin:0}kbd{border:1px solid var(--panel-border);background:var(--bg);font:12px var(--font);border-bottom-width:2px;border-radius:5px;padding:2px 6px}.btn{border:1px solid var(--panel-border);background:var(--panel);border-radius:8px;align-items:center;gap:6px;padding:7px 14px;display:inline-flex}.btn:hover{background:var(--hover)}.btn .icon svg{width:18px;height:18px}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.toasts{z-index:200;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}body:has(.board-view) .toasts{bottom:148px}.toast{color:#fff;max-width:min(480px,100vw - 32px);box-shadow:var(--shadow);background:#23262c;border-radius:10px;padding:10px 16px;animation:.18s ease-out toast-in}.toast.out{opacity:0;transition:opacity .25s}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}}.share-btn{background:var(--accent);height:36px;color:var(--accent-text);white-space:nowrap;border:0;border-radius:8px;align-items:center;gap:6px;padding:0 12px 0 10px;font-weight:600;display:inline-flex}.share-btn .icon svg{width:18px;height:18px}.share-btn:hover{filter:brightness(1.08)}.share-btn.warn{background:var(--hover);color:var(--text)}.share-banner{z-index:9;pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:64px;left:50%;transform:translate(-50%)}.banner-line{border:1px solid var(--panel-border);background:var(--panel);box-shadow:var(--shadow);white-space:nowrap;border-radius:999px;padding:6px 14px;font-size:13px}.share-dialog p{margin:4px 0 12px}.share-dialog h3{margin:18px 0 8px;font-size:14px}.share-facts{color:var(--muted);margin:0 0 16px;padding-left:18px;font-size:13px}.share-facts li+li{margin-top:4px}.field-label{margin-bottom:4px;font-size:13px;font-weight:600;display:block}.name-field{display:block}.text-input{border:1px solid var(--panel-border);background:var(--bg);border-radius:8px;width:100%;padding:8px 10px}.text-input:focus{border-color:var(--accent);outline:none}.chip{border:1px solid var(--panel-border);background:var(--panel);border-radius:999px;margin-top:8px;padding:4px 10px;font-size:13px}.chip:hover{background:var(--hover)}.dialog-buttons{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}.dialog-buttons.start{justify-content:flex-start;margin:4px 0 14px}a.btn{align-items:center;text-decoration:none;display:inline-flex}.text-link{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.server-message{min-height:20px;color:var(--muted);margin:6px 0 0;font-size:13px}.server-message.warn{color:var(--danger)}.btn:disabled{opacity:.5;cursor:default}.link-row+.link-row{margin-top:12px}.limit-row{margin-top:16px}.limit-line .field-label{margin:0}.limit-line{justify-content:space-between;align-items:center;gap:12px;display:flex}.stepper{align-items:center;gap:6px;display:flex}.stepper-btn{place-items:center;width:34px;height:34px;padding:0;display:inline-grid}.stepper-btn .icon svg{width:18px;height:18px}.stepper-value{text-align:center;min-width:24px;font-weight:600}.limit-note{margin:6px 0 0;font-size:13px}.link-line{gap:8px;display:flex}.link-input{min-width:0;color:var(--muted);flex:1;font-size:13px}.share-status{align-items:center;gap:8px;font-weight:600;display:flex}.status-dot{background:var(--muted);border-radius:50%;width:8px;height:8px}.share-status.ok .status-dot{background:#30a46c}.share-status.warn .status-dot{background:#f76b15}.people{margin:0;padding:0;list-style:none}.people .person{text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:8px;width:100%;padding:5px 6px;display:flex}.people button.person:hover{background:var(--hover)}.person-dot{border-radius:50%;flex:none;width:12px;height:12px}.person-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.role-tag{background:var(--hover);color:var(--muted);border-radius:999px;margin-left:auto;padding:1px 8px;font-size:12px}.home{min-height:100%}.home.dropping{outline:3px dashed var(--accent);outline-offset:-12px}.home-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;max-width:1200px;margin:0 auto;padding:28px 24px 8px;display:flex}.brand{align-items:center;gap:12px;display:flex}.logo svg{width:40px;height:40px;display:block}.brand h1{margin:0;font-size:22px}.home-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.search-wrap{border:1px solid var(--panel-border);background:var(--panel);color:var(--muted);border-radius:8px;align-items:center;gap:6px;padding:0 10px;display:flex}.search-wrap .icon svg{width:16px;height:16px}.search{width:170px;color:var(--text);background:0 0;border:0;outline:none;padding:7px 0}.home-main{max-width:1200px;margin:0 auto;padding:8px 24px 40px}.home-main h2{color:var(--muted);margin:16px 0 12px;font-size:15px;font-weight:600}.board-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;display:grid}.board-card{border:1px solid var(--panel-border);border-radius:var(--radius);background:var(--panel);flex-direction:column;transition:box-shadow .15s,transform .15s;display:flex;overflow:hidden;box-shadow:0 1px 2px #0f172a0d}.board-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}.thumb{aspect-ratio:16/10;border-bottom:1px solid var(--panel-border);background:#fff;display:block}.thumb img{object-fit:cover;width:100%;height:100%;display:block}.thumb-empty{background:radial-gradient(#0f172a26 1px,#0000 1.4px) 0 0/16px 16px,#fff;width:100%;height:100%}.card-meta{align-items:center;gap:4px;padding:8px 6px 8px 12px;display:flex}.card-text{flex-direction:column;flex:1;min-width:0;display:flex}.card-title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.card-date{color:var(--muted);font-size:12px}.shared-tag{background:var(--active);color:var(--accent);border-radius:999px;margin-right:6px;padding:0 6px;font-weight:600}.rename-input{border:1px solid var(--accent);background:var(--bg);border-radius:6px;width:100%;padding:2px 6px;font-weight:600}.new-board{border:2px dashed var(--panel-border);min-height:190px;box-shadow:none;color:var(--accent);background:0 0;justify-content:center;align-items:center;gap:10px;font-weight:600}.new-icon{background:var(--active);border-radius:50%;place-items:center;width:48px;height:48px;display:grid}.empty{color:var(--muted);grid-column:1/-1}.storage-line{color:var(--muted);max-width:420px;margin-top:28px;font-size:13px}.storage-line p{margin:6px 0 0}.usage{flex-direction:column;gap:6px;display:flex}.usage-bar{background:var(--hover);border-radius:3px;height:6px;overflow:hidden}.usage-bar span{background:var(--accent);border-radius:3px;min-width:2px;height:100%;transition:width .3s;display:block}.usage-bar.warn span{background:#e8a33d}.usage-bar.full span{background:var(--danger)}.usage-text{font-variant-numeric:tabular-nums}.limit-notice .usage{color:var(--muted);margin-top:14px;font-size:13px}.board-view.split{flex-direction:row;display:flex}.board-view.split[data-layout=stacked]{flex-direction:column}.pane{min-width:0;min-height:0;position:relative;overflow:hidden}.pane[hidden]{display:none}.pane-shared{flex:0 0 var(--split,50%)}.pane-notes{flex:1 1 0}.pane.active:after{content:"";z-index:12;pointer-events:none;border:2px solid var(--accent);opacity:.45;position:absolute;inset:0}.split-divider{z-index:13;background:var(--panel-border);cursor:col-resize;touch-action:none;flex:0 0 10px}.split-divider[hidden]{display:none}.board-view[data-layout=stacked] .split-divider{cursor:row-resize}.split-divider:hover,.split-divider:focus-visible,.board-view.resizing .split-divider{background:var(--accent);outline:none}.board-view.resizing{-webkit-user-select:none;user-select:none}.board-view.resizing .wb-canvas{pointer-events:none}.side-btn{align-items:center;gap:6px;height:36px;padding:0 12px;display:inline-flex}.side-btn[hidden]{display:none}.look-bar{white-space:nowrap;bottom:12px;left:50%;transform:translate(-50%)}.board-view.split .zoom-bar{flex-direction:column;display:flex;top:50%;bottom:auto;right:8px;transform:translateY(-50%)}.board-view.tabbed .zoom-bar{display:none}.board-view.split .zoom-bar .zoom-label{padding:2px 0}.look-bar .btn{align-items:center;gap:6px;display:inline-flex}.notes-head{top:12px;left:12px}.notes-head .board-name{flex:0 150px;width:150px;min-width:40px}.board-view.split>.top-right{z-index:14}.board-view.split:not(.tabbed)[data-layout=side] .notes-head{max-width:calc(100% - 232px)}.board-picker{flex-direction:column;gap:8px;min-width:min(420px,80vw);max-height:60vh;display:flex;overflow:auto}.board-picker p{margin:4px 0 0}.pane-tabs{display:none}.board-view.tabbed{flex-direction:column}.board-view.tabbed .pane-tabs{flex:none;margin:8px auto;display:flex;position:static}.board-view.tabbed .pane-shared,.board-view.tabbed .pane-notes{flex:1 1 0}.pane-tabs .tab{background:0 0;border:0;border-radius:8px;padding:6px 16px;font-weight:600}.pane-tabs .tab.active{background:var(--active);color:var(--accent)}@media (width<=900px){.zoom-bar{display:none}}@media (width<=760px){.board-name{width:110px}.share-btn span:last-child{display:none}.share-btn{padding:0 9px}.side-btn span:last-child{display:none}.side-btn{padding:0 9px}.top-right{top:12px}.toasts{top:68px;bottom:auto}body:has(.board-view) .toasts{top:68px;bottom:auto}}@media (width<=420px){.icon-btn,.dock-main .icon-btn{width:32px;height:32px}.ink-tray{height:46px}.dock .sep{margin:0 1px}.top-left .icon-btn+.icon-btn{display:none}.tray-tool{width:32px;height:44px}.board-name{width:80px}}