:root{--ink: #1a1c20;--ink-soft: #5a6170;--ink-faint: #9ca3af;--accent: #f59e0b;--accent-dark: #d98806;--accent-hover: #fbbf24;--accent-soft: #f59e0b1f;--select: #3b82f6;--select-soft: #3b82f626;--surface: #ffffff;--board-bg: #f5f4f0;--surface-hover: #ebe9e1;--surface-active: #e0ddd4;--canvas-bg: #fbfbfa;--line: #0000001f;--line-subtle: #0000000f;--shadow-sm: 0 1px 3px #0000001a;--shadow-md: 0 4px 16px #0000001f;--shadow-lg: 0 8px 32px #00000029;--shadow-accent: 0 4px 24px #f59e0b33;--radius: 10px;--radius-lg: 16px;--radius-pill: 999px;--font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display: "Sora", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--ink);background:var(--board-bg);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font-family:inherit;font-size:inherit;cursor:pointer}input{font-family:inherit;font-size:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 18px;border:1px solid var(--line);border-radius:var(--radius-pill);font-family:var(--font-display);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;transition:background .14s ease,border-color .14s ease,transform .06s ease}.btn:hover{background:var(--surface-hover)}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-lg{height:52px;padding:0 32px;font-size:16px;border-radius:var(--radius-pill);box-shadow:var(--shadow-accent)}.btn-icon{width:18px;height:18px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;border-radius:8px;background:transparent;color:var(--ink-soft);transition:background .14s ease,color .14s ease}.icon-btn:hover{background:var(--surface-hover);color:var(--ink)}.icon-btn svg{width:20px;height:20px}.chip{height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.chip:hover{border-color:var(--accent);color:var(--accent)}.landing{display:flex;align-items:center;justify-content:center;min-height:100%;padding:40px 20px;background:var(--board-bg);background-image:radial-gradient(farthest-corner at 12% 8%,#fbbf2433 0%,transparent 58%),radial-gradient(farthest-corner at 88% 92%,#14b8a629 0%,transparent 62%),radial-gradient(farthest-corner at 92% 10%,#3b82f61f 0%,transparent 55%)}.landing-card{width:100%;max-width:640px;padding:52px 46px 42px;border:1px solid var(--line-subtle);border-radius:28px;background:#ffffffd1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-lg);text-align:center}.landing-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:7px 15px;border:1px solid var(--line-subtle);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-soft);font-size:13px;font-weight:500;box-shadow:var(--shadow-sm)}.landing-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e}.landing-card h1{margin:0 0 16px;font-family:var(--font-display);font-size:42px;font-weight:800;line-height:1.14;letter-spacing:-.025em}.landing-card h1 em{color:var(--accent);font-style:normal}.landing-sub{margin:0 0 30px;color:var(--ink-soft);font-size:16.5px;line-height:1.65}.landing-points{margin:34px 0 0;padding:0;list-style:none;text-align:left;display:grid;gap:12px}.landing-points li{position:relative;padding-left:28px;color:var(--ink-soft);font-size:14.5px;line-height:1.55}.landing-points li:before{content:"";position:absolute;left:4px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.landing-join{margin-top:32px;padding-top:26px;border-top:1px solid var(--line-subtle);text-align:left}.landing-join label{display:block;margin-bottom:9px;color:var(--ink-faint);font-size:13px;font-weight:600}.landing-join-row{display:flex;gap:9px}.landing-join input{flex:1;height:42px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);outline:none;transition:border-color .14s ease,box-shadow .14s ease}.landing-join input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.landing-join .btn{height:42px}.landing-error{margin:10px 0 0;color:#ef4444;font-size:13px}.landing-recent{margin-top:24px;text-align:left}.landing-recent-label{display:block;margin-bottom:9px;color:var(--ink-faint);font-size:13px;font-weight:600}.landing-recent-list{display:flex;flex-wrap:wrap;gap:8px}.landing-footer{margin:28px 0 0;color:var(--ink-faint);font-size:12.5px}.board{position:relative;height:100%;overflow:hidden}.canvas-host{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--canvas-bg);touch-action:none;user-select:none;-webkit-user-select:none}.canvas-layer{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.cursor-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.remote-cursor{position:absolute;top:0;left:0;opacity:0;display:flex;align-items:flex-start;gap:2px;will-change:transform;transition:opacity .2s ease}.remote-cursor-name{margin-top:14px;padding:2px 7px;border-radius:6px;color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-sm)}.topbar{position:absolute;top:12px;left:12px;right:12px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}.topbar-left,.topbar-right{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm);pointer-events:auto}.board-identity{display:flex;flex-direction:column;line-height:1.2;padding-right:6px}.board-name{font-size:13.5px;font-weight:700}.board-id{color:var(--ink-faint);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.status{display:inline-flex;align-items:center;gap:6px;padding:0 8px;color:var(--ink-soft);font-size:12.5px;font-weight:600;white-space:nowrap}.status-dot{width:8px;height:8px;border-radius:50%;background:#b8b8c6}.status-online .status-dot{background:#22b573}.status-connecting .status-dot{background:#f0a92c}.status-offline .status-dot{background:#e0564f}.item-count{padding:0 8px;color:var(--ink-faint);font-size:12.5px;font-variant-numeric:tabular-nums}.avatars{display:flex;align-items:center;padding:0 4px}.avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:-7px;border:2px solid var(--surface);border-radius:50%;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em}.avatar:first-child{margin-left:0}.avatar-more{background:#c9c9d4;color:var(--ink)}.toolbar{position:absolute;top:50%;left:12px;z-index:20;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}.toolbar-group{display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm)}.tool-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;border-radius:8px;background:transparent;color:var(--ink-soft);transition:background .14s ease,color .14s ease}.tool-btn:hover:not(:disabled){background:var(--surface-hover);color:var(--ink)}.tool-btn.is-active{background:var(--accent-soft);color:var(--accent)}.tool-btn:disabled{opacity:.35;cursor:default}.tool-swatch{position:absolute;right:4px;bottom:4px;width:9px;height:9px;border:1.5px solid var(--surface);border-radius:50%}.flyout{position:absolute;left:calc(100% + 10px);top:0;width:184px;padding:12px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-md)}.flyout-label{display:block;margin-bottom:8px;color:var(--ink-faint);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.swatch{width:30px;height:30px;border:2px solid transparent;border-radius:8px;box-shadow:inset 0 0 0 1px #05003814;transition:transform .1s ease}.swatch:hover{transform:scale(1.08)}.swatch.is-active{border-color:var(--ink)}.size-row{display:flex;gap:6px}.size-btn{display:inline-flex;align-items:center;justify-content:center;width:37px;height:34px;border:1px solid transparent;border-radius:8px;background:transparent}.size-btn:hover{background:var(--surface-hover)}.size-btn.is-active{border-color:var(--accent);background:var(--accent-soft)}.size-dot{display:block;border-radius:50%}.zoombar{position:absolute;right:12px;bottom:12px;z-index:20;display:flex;align-items:center;gap:2px;padding:5px 6px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm)}.zoom-value{min-width:56px;height:32px;border:none;border-radius:8px;background:transparent;color:var(--ink);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.zoom-value:hover{background:var(--surface-hover)}.zoombar-divider{width:1px;height:20px;margin:0 4px;background:var(--line)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:#0500386b}.modal{position:relative;width:100%;max-width:480px;padding:34px 32px 28px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-md)}.modal h2{margin:0 0 8px;font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.01em}.modal-sub{margin:0 0 22px;color:var(--ink-soft);font-size:14.5px;line-height:1.55}.modal-close{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:8px;background:transparent;color:var(--ink-soft)}.modal-close:hover{background:var(--surface-hover)}.modal-close svg{width:18px;height:18px}.share-row{display:flex;gap:8px}.share-row input{flex:1;min-width:0;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fafafc;color:var(--ink-soft);outline:none}.name-field{display:block;margin-top:20px}.name-field span{display:block;margin-bottom:8px;color:var(--ink-faint);font-size:13px;font-weight:600}.name-field input{width:100%;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);outline:none}.name-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.modal-note{margin:20px 0 0;color:var(--ink-faint);font-size:12.5px;line-height:1.5}@media(max-width:760px){.landing-card{padding:34px 24px 28px}.landing-card h1{font-size:30px}.toolbar{top:auto;bottom:12px;left:50%;transform:translate(-50%);flex-direction:row}.toolbar-group{flex-direction:row;max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}.toolbar-group::-webkit-scrollbar{display:none}.flyout{left:50%;top:auto;bottom:calc(100% + 10px);transform:translate(-50%)}.zoombar{bottom:70px}.item-count,.status{display:none}}.eraser-ring{position:absolute;top:0;left:0;border:1.5px solid #8a8a95;border-radius:50%;background:#ffffff80;pointer-events:none;opacity:0;will-change:transform}.swatch-grid-2{grid-template-columns:repeat(2,1fr)}.swatch-none{position:relative;background:#fff}.swatch-none:after{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;background:linear-gradient(to top right,transparent calc(50% - 1px),#d8434e calc(50% - 1px),#d8434e calc(50% + 1px),transparent calc(50% + 1px))}.shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}.shape-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink-soft)}.shape-btn:hover{background:var(--surface-hover);color:var(--ink)}.shape-btn.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.shape-btn svg{width:20px;height:20px}.selection-bar{position:absolute;z-index:30;display:flex;align-items:center;gap:3px;height:44px;padding:0 8px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-md);transform:translate(-50%);white-space:nowrap}.selection-swatches{display:flex;align-items:center;gap:4px}.mini-swatch{width:22px;height:22px;border:1px solid rgba(5,0,56,.12);border-radius:6px;padding:0;transition:transform .1s ease}.mini-swatch:hover{transform:scale(1.12)}.selection-divider{width:1px;height:22px;margin:0 4px;background:var(--line)}.icon-btn-danger:hover{background:#fdecec;color:#cf4038}.text-editor{position:absolute;z-index:25;margin:0;border:none;outline:2px solid var(--select);outline-offset:0;background:transparent;resize:none;overflow:hidden;white-space:pre-wrap;word-break:break-word}.menu-anchor{position:relative;display:inline-flex}.menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;padding:6px;border-radius:10px;background:var(--surface);box-shadow:var(--shadow-md);z-index:40}.menu button{display:block;width:100%;padding:9px 12px;border:none;border-radius:7px;background:transparent;color:var(--ink);font-size:14px;text-align:left}.menu button:hover{background:var(--surface-hover)}.toast{position:absolute;left:50%;bottom:84px;z-index:50;max-width:min(460px,calc(100% - 40px));padding:11px 16px;border-radius:10px;background:#2a2a3c;color:#fff;font-size:13.5px;line-height:1.45;box-shadow:var(--shadow-md);transform:translate(-50%)}.flyout-action{display:block;width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;text-align:left}.flyout-action:hover{border-color:var(--accent);color:var(--accent)}.segmented{display:flex;gap:4px;margin-bottom:14px;padding:3px;border-radius:9px;background:var(--surface-hover)}.segmented button{flex:1;padding:6px 8px;border:none;border-radius:7px;background:transparent;color:var(--ink-soft);font-size:12.5px;font-weight:600}.segmented button.is-active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}.modal-wide{max-width:760px}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:8px;max-height:62vh;overflow-y:auto}.template-card{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:left;transition:border-color .14s ease,transform .08s ease}.template-card:hover{border-color:var(--accent);transform:translateY(-2px)}.template-card svg{margin-bottom:6px;border-radius:8px;background:#f7f7fa}.template-name{font-size:14px;font-weight:700}.template-desc{color:var(--ink-soft);font-size:12.5px;line-height:1.4}.toolbar-group:first-child{max-height:calc(100vh - 210px);overflow-y:auto;scrollbar-width:none}.toolbar-group:first-child::-webkit-scrollbar{display:none}.follow-frame{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;border:3px solid var(--accent);border-radius:4px;pointer-events:none}.follow-banner{position:absolute;left:50%;bottom:22px;z-index:30;display:flex;align-items:center;gap:10px;padding:7px 10px 7px 8px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-md);font-size:13.5px;white-space:nowrap;transform:translate(-50%)}.avatar-sm{width:24px;height:24px;margin:0;font-size:9.5px}.btn-sm{height:28px;padding:0 13px;font-size:12.5px;border-radius:var(--radius-pill)}.btn-sm.is-on{border-color:var(--accent);color:var(--accent)}button.avatar{position:relative;padding:0;cursor:pointer;transition:transform .12s ease}button.avatar:not(:disabled):hover{transform:translateY(-2px);z-index:2}button.avatar:disabled{cursor:default}.avatar.is-followed{box-shadow:0 0 0 2px var(--accent)}.avatar-badge{position:absolute;right:-4px;bottom:-4px;display:flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--accent);color:#fff}.avatar-badge svg{width:10px;height:10px}.comment-popover{position:absolute;z-index:26;padding:12px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-md)}.comment-popover header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.comment-author{font-size:13px;font-weight:700}.comment-time{color:var(--ink-faint);font-size:11.5px}.comment-close{width:26px;height:26px;margin-left:auto}.comment-close svg{width:15px;height:15px}.comment-body{margin:0 0 10px;color:var(--ink);font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.comment-body.is-resolved{color:var(--ink-faint);text-decoration:line-through}.comment-input{width:100%;margin-bottom:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:13.5px;line-height:1.5;resize:vertical;outline:none}.comment-input:focus{border-color:var(--accent)}.comment-popover footer{display:flex;align-items:center;gap:6px}.app-name{color:var(--ink-faint);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.board-title,.board-title-input{font-family:var(--font-display);display:block;max-width:220px;height:22px;margin:0;padding:0 4px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);font-family:inherit;font-size:14px;font-weight:700;line-height:20px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-title{margin-left:-4px}.board-title:hover{background:var(--surface-hover)}.board-title-input{margin-left:-4px;border-color:var(--accent);background:var(--surface);outline:none}.field-hint{display:block;margin-top:6px;color:var(--ink-faint);font-size:12px;line-height:1.4}.name-field+.field-hint{margin-bottom:16px}.modal-narrow{max-width:400px}.field-label{display:block;margin:18px 0 9px;color:var(--ink-faint);font-size:13px;font-weight:600}.color-row{display:flex;flex-wrap:wrap;gap:9px}.color-dot{width:30px;height:30px;border:2px solid transparent;border-radius:50%;padding:0;box-shadow:inset 0 0 0 1px #00000014;transition:transform .1s ease}.color-dot:hover{transform:scale(1.1)}.color-dot.is-active{border-color:var(--surface);box-shadow:0 0 0 2px var(--ink)}.profile-preview{display:flex;align-items:center;gap:9px;margin-top:20px;padding:12px;border-radius:var(--radius);background:var(--board-bg)}.profile-preview-name{padding:3px 9px;border-radius:6px;color:#fff;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-save{width:100%;margin-top:18px;height:42px}.chip-named{font-family:var(--font);font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}