:root{--bg-canvas: #ffffff;--bg-sidebar: #fbfbfa;--bg-float: #ffffff;--text: #37352f;--text-soft: #787774;--text-faint: #9b9a97;--border: #ededec;--border-strong: #e3e3e1;--grid-dot: #c9c8c1;--hover: rgba(55, 53, 47, .055);--active: rgba(55, 53, 47, .09);--accent: #2383e2;--accent-soft: rgba(35, 131, 226, .14);--radius: 6px;--radius-lg: 10px;--shadow-sm: 0 1px 2px rgba(15, 15, 15, .06);--shadow: 0 1px 2px rgba(15, 15, 15, .05), 0 6px 16px rgba(15, 15, 15, .08);--sidebar-w: 264px;--font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}@font-face{font-family:Toony;src:url(/fonts/Toddler_Writing.ttf) format("truetype");font-display:swap}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--text);background:var(--bg-canvas);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior:none}button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;padding:0}input{font-family:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}:focus:not(:focus-visible){outline:none}.app{display:flex;height:100%;overflow:hidden}.workspace{position:relative;flex:1;min-width:0;height:100%;background:var(--bg-canvas)}.workspace-empty{display:grid;place-items:center;height:100%;color:var(--text-faint);font-size:14px}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}.sidebar{position:relative;flex-shrink:0;height:100%;background:var(--bg-sidebar);border-right:1px solid var(--border);-webkit-user-select:none;user-select:none;overflow:hidden;transition:width .22s cubic-bezier(.4,0,.2,1),border-color .22s ease}.sidebar.is-collapsed{border-right-color:transparent}.sidebar.is-resizing{transition:none}.sidebar-inner{height:100%;display:flex;flex-direction:column;overflow:hidden}.sidebar-resize{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;z-index:2}.sidebar-resize:after{content:"";position:absolute;top:0;right:0;width:2px;height:100%;background:transparent;transition:background .12s ease}.sidebar-resize:hover:after,.sidebar.is-resizing .sidebar-resize:after{background:var(--accent-soft)}.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 8px}.brand{font-size:18px;font-weight:600;letter-spacing:.02em;color:var(--text)}.sidebar-head-actions{display:flex;align-items:center;gap:1px}.new-btn{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--radius);color:var(--text-soft);transition:background .12s ease,color .12s ease}.new-btn:hover{background:var(--hover);color:var(--text)}.search{display:flex;align-items:center;gap:7px;margin:2px 10px 8px;padding:6px 9px;border-radius:var(--radius);background:var(--active);color:var(--text-faint)}.search input{flex:1;min-width:0;border:none;background:transparent;font-size:13px;color:var(--text)}.search input::placeholder{color:var(--text-faint)}.search input:focus{outline:none}.note-list{flex:1;overflow-y:auto;padding:2px 8px 12px}.empty-hint{margin:14px 8px;font-size:12.5px;line-height:1.5;color:var(--text-faint)}.note-item{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:var(--radius);cursor:pointer;transition:background .1s ease}.note-item:hover{background:var(--hover)}.note-item.is-active{background:var(--active)}.note-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}.note-title{font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-time{font-size:11px;color:var(--text-faint)}.rename-input{width:100%;border:1px solid var(--accent);border-radius:4px;padding:2px 5px;font-size:13.5px;background:var(--bg-float)}.rename-input:focus{outline:none}.note-delete{display:grid;place-items:center;width:24px;height:24px;border-radius:5px;color:var(--text-faint);opacity:0;transition:opacity .1s ease,background .1s ease,color .1s ease}.note-item:hover .note-delete{opacity:1}.note-delete:hover{background:var(--hover);color:#c0392b}.sidebar-reopen{position:absolute;top:12px;left:12px;z-index:6;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius);color:var(--text-soft);background:var(--bg-float);border:1px solid var(--border);box-shadow:var(--shadow-sm);animation:reopen-in .18s ease}.sidebar-reopen:hover{background:var(--hover);color:var(--text)}@keyframes reopen-in{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:none}}.canvas-area{position:relative;width:100%;height:100%;overflow:hidden}.canvas-viewport{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--bg-canvas);touch-action:none;-webkit-user-select:none;user-select:none;cursor:default}.canvas-viewport.is-pan{cursor:grab}.canvas-viewport.is-pan:active{cursor:grabbing}.canvas-viewport.is-draw{cursor:crosshair}.grid-bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:radial-gradient(circle,var(--grid-dot) 1px,transparent 1px);transition:opacity .15s ease}.world{position:absolute;top:0;left:0;width:0;height:0;transform-origin:0 0;will-change:transform}.world-svg{position:absolute;overflow:visible;pointer-events:none}.obj-text{position:absolute;padding:4px 6px;line-height:1.45;border-radius:4px}.obj-text-editable{outline:none;white-space:pre-wrap;word-break:break-word;min-height:1em;cursor:text}.obj-text-placeholder{position:absolute;top:4px;left:6px;color:var(--text-faint);pointer-events:none;-webkit-user-select:none;user-select:none}.obj-image{position:absolute;overflow:hidden;border-radius:4px}.obj-image img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.obj-image-missing{display:grid;place-items:center;width:100%;height:100%;font-size:12px;color:var(--text-faint);background:var(--active);border:1px dashed var(--border-strong);border-radius:4px}.topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;pointer-events:none}.topbar>*{pointer-events:auto}.title-input{max-width:46%;border:1px solid transparent;border-radius:var(--radius);padding:5px 9px;font-size:15px;font-weight:600;color:var(--text);background:transparent;transition:background .12s ease,border-color .12s ease}.title-input::placeholder{color:var(--text-faint)}.title-input:hover{background:var(--hover)}.title-input:focus{outline:none;background:var(--bg-float);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}.topbar-actions{display:flex;align-items:center;gap:8px}.btn-cluster,.zoom-cluster{display:flex;align-items:center;gap:2px;padding:3px;background:var(--bg-float);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.icon-btn{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius);color:var(--text-soft);transition:background .1s ease,color .1s ease}.icon-btn:hover{background:var(--hover);color:var(--text)}.zoom-btn{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius);font-size:17px;line-height:1;color:var(--text-soft);transition:background .1s ease,color .1s ease}.zoom-btn:hover{background:var(--hover);color:var(--text)}.zoom-label{min-width:48px;height:28px;padding:0 6px;border-radius:var(--radius);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--text-soft);transition:background .1s ease,color .1s ease}.zoom-label:hover{background:var(--hover);color:var(--text)}.toolbar{position:absolute;bottom:18px;left:50%;transform:translate(-50%);z-index:5;display:flex;align-items:center;gap:3px;padding:5px;background:var(--bg-float);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}.tool-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;color:var(--text-soft);transition:background .1s ease,color .1s ease}.tool-btn:hover{background:var(--hover);color:var(--text)}.tool-btn.is-active{background:var(--accent-soft);color:var(--accent)}.toolbar-sep{width:1px;height:22px;margin:0 3px;background:var(--border-strong)}.icon-btn:disabled{color:var(--text-faint);opacity:.45;cursor:default}.icon-btn:disabled:hover{background:none;color:var(--text-faint)}.canvas-area.is-sidebar-collapsed .topbar{padding-left:56px}.format-bar{position:absolute;z-index:7;display:flex;align-items:center;gap:3px;padding:4px;background:var(--bg-float);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);animation:fmt-in .12s ease}@keyframes fmt-in{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}.fmt-group{display:flex;align-items:center;gap:2px}.fmt-btn{display:grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:6px;font-size:13px;color:var(--text-soft);transition:background .1s ease,color .1s ease}.fmt-btn:hover{background:var(--hover);color:var(--text)}.fmt-btn.is-active{background:var(--accent-soft);color:var(--accent)}.fmt-font{font-size:12.5px}.fmt-minus,.fmt-plus{font-size:10px;margin-left:1px;vertical-align:super}.fmt-size{min-width:20px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-faint)}.fmt-sep{width:1px;height:18px;margin:0 2px;background:var(--border-strong)}.fmt-swatches{gap:4px;padding:0 3px}.fmt-swatch{width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(0,0,0,.08);transition:transform .1s ease}.fmt-swatch:hover{transform:scale(1.15)}.selection-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:4}.sel-box{position:absolute;border:1.5px solid var(--accent);border-radius:3px;box-sizing:border-box}.snap-highlight{position:absolute;border:2px solid var(--accent);border-radius:4px;background:var(--accent-soft);box-sizing:border-box}.resize-handle{position:absolute;width:9px;height:9px;margin:-5px 0 0 -5px;background:var(--bg-float);border:1.5px solid var(--accent);border-radius:2px;pointer-events:auto}.endpoint-handle{position:absolute;width:11px;height:11px;margin:-6px 0 0 -6px;background:var(--bg-float);border:1.5px solid var(--accent);border-radius:50%;pointer-events:auto}.sel-line{position:absolute;height:0;border-top:1px dashed var(--accent);opacity:.5}.marquee{position:absolute;border:1px solid var(--accent);background:var(--accent-soft);box-sizing:border-box}.draft-conn line{stroke:var(--accent);stroke-width:2;stroke-dasharray:6 5}.draft-conn polygon{fill:var(--accent)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#0f0f0e52;animation:modal-fade .16s ease}.modal-card{width:min(340px,calc(100vw - 48px));background:var(--bg-float);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:22px 22px 18px;box-shadow:0 18px 50px #0f0f0e38;animation:modal-pop .2s cubic-bezier(.34,1.56,.64,1)}.modal-title{margin:0 0 6px;font-size:16px;font-weight:600;color:var(--text)}.modal-message{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--text-soft)}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.modal-btn{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:500;border:1px solid var(--border-strong);background:var(--bg-float);color:var(--text);cursor:pointer;transition:background .12s,border-color .12s,transform .08s}.modal-btn:hover{background:var(--hover)}.modal-btn:active{transform:translateY(1px)}.modal-btn.is-danger{background:#e03e3e;border-color:#e03e3e;color:#fff}.modal-btn.is-danger:hover{background:#c5352f;border-color:#c5352f}.modal-btn.is-primary{background:var(--accent);border-color:var(--accent);color:#fff}.welcome-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#0f0f0e6b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:modal-fade .2s ease}.welcome-card{width:min(400px,calc(100vw - 40px));text-align:center;background:var(--bg-float);border:1px solid var(--border-strong);border-radius:18px;padding:34px 30px 30px;box-shadow:0 24px 70px #0f0f0e47;animation:welcome-pop .36s cubic-bezier(.34,1.4,.5,1)}.welcome-title{margin:0 0 10px;font-size:22px;font-weight:650;color:var(--text)}.welcome-sub{margin:0 0 24px;font-size:14px;line-height:1.6;color:var(--text-soft)}.welcome-btn{width:100%;padding:11px 16px;border:none;border-radius:10px;background:var(--accent);color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;transition:background .14s,transform .1s}.welcome-btn:hover{background:#1b73c9}.welcome-btn:active{transform:translateY(1px)}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-pop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes welcome-pop{0%{opacity:0;transform:scale(.88) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}