:root{--cell:24px;--color-canvas:oklch(97.3% .011 95);--color-grid-minor:oklch(87% .028 235/.45);--color-grid-major:oklch(82% .038 235/.5);--color-card:oklch(99.4% .004 95);--color-ink:oklch(28% .022 270);--color-ink-soft:oklch(47% .018 270);--color-ink-faint:oklch(63% .012 270);--color-line:oklch(89% .012 270);--color-line-strong:oklch(80% .015 270);--color-accent:oklch(56% .19 27);--color-select:oklch(50% .155 255);--color-select-soft:oklch(50% .155 255/.1);--color-focus:var(--color-select);--color-danger:oklch(54% .2 25);--color-ok:oklch(56% .13 150);--bg-paper:var(--color-card);--bg-cream:oklch(96.5% .025 85);--bg-mist:oklch(95.5% .008 270);--bg-sky:oklch(95.5% .025 235);--bg-rose:oklch(95.5% .025 15);--bg-mint:oklch(95.5% .03 155);--bg-butter:oklch(96.5% .05 95);--bg-lilac:oklch(95.5% .025 300);--tag-red-bg:oklch(91% .05 20);--tag-red-fg:oklch(40% .15 20);--tag-orange-bg:oklch(92% .055 55);--tag-orange-fg:oklch(42% .13 55);--tag-yellow-bg:oklch(94% .07 95);--tag-yellow-fg:oklch(42% .1 90);--tag-green-bg:oklch(93% .05 150);--tag-green-fg:oklch(38% .11 150);--tag-teal-bg:oklch(93% .045 190);--tag-teal-fg:oklch(38% .09 190);--tag-blue-bg:oklch(92.5% .04 245);--tag-blue-fg:oklch(40% .13 250);--tag-purple-bg:oklch(93% .04 300);--tag-purple-fg:oklch(41% .13 300);--tag-pink-bg:oklch(93% .045 350);--tag-pink-fg:oklch(42% .14 350);--tag-grey-bg:oklch(93% .008 270);--tag-grey-fg:oklch(40% .02 270);--font-ui:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;--text-xs:12px;--text-sm:13px;--text-cell:14px;--text-md:15px;--text-lg:20px;--text-xl:28px;--text-2xl:38px;--space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:40px;--shadow-card:0 1px 2px oklch(30% .02 270/.07), 0 3px 10px oklch(30% .02 270/.05);--shadow-lift:0 2px 6px oklch(30% .02 270/.12), 0 10px 28px oklch(30% .02 270/.12);--shadow-pop:0 4px 10px oklch(30% .02 270/.1), 0 12px 32px oklch(30% .02 270/.16);--radius-ui:6px;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-fast:.12s;--dur-med:.2s}*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{font-family:var(--font-ui);font-size:var(--text-md);color:var(--color-ink);background:var(--color-canvas);-webkit-font-smoothing:antialiased}#root{min-height:100vh}button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:0}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}.topbar{z-index:1000;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--color-line);background:oklch(99.4% .004 95/.92);display:flex;position:sticky;top:0}.topbar-title{font-size:var(--text-md);padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-ui);background:0 0;border:none;width:240px;min-width:0;font-weight:700}.topbar-title:hover{background:var(--color-select-soft)}.topbar-spacer{flex:1}.topbar-note{font-size:var(--text-xs);color:var(--color-ink-faint)}.tool-btn{border-radius:var(--radius-ui);font-size:var(--text-sm);color:var(--color-ink-soft);border:1px solid var(--color-line);background:var(--color-card);transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);align-items:center;gap:6px;padding:6px 10px;font-weight:500;display:inline-flex}.tool-btn:hover{background:var(--bg-mist);border-color:var(--color-line-strong)}.tool-btn:active{transform:translateY(1px)}.tool-btn:disabled{opacity:.45;cursor:default;transform:none}.tool-btn.primary{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-card)}.tool-btn.primary:hover{background:oklch(36% .03 270)}.canvas-viewport{overflow-x:auto}.canvas{background-image:linear-gradient(to right, var(--color-grid-major) 1px, transparent 1px), linear-gradient(to bottom, var(--color-grid-major) 1px, transparent 1px), linear-gradient(to right, var(--color-grid-minor) 1px, transparent 1px), linear-gradient(to bottom, var(--color-grid-minor) 1px, transparent 1px);background-size:calc(var(--cell) * 4) calc(var(--cell) * 4), calc(var(--cell) * 4) calc(var(--cell) * 4), var(--cell) var(--cell), var(--cell) var(--cell);border-inline:1px solid var(--color-line);margin:0 auto;position:relative}.block{pointer-events:none;color:var(--color-ink);position:absolute}.block.ink-light{--color-ink:oklch(97% .005 95);--color-ink-soft:oklch(89% .008 95);--color-ink-faint:oklch(78% .008 95/.9);--color-line:oklch(96% .008 95/.28);--color-line-strong:oklch(96% .008 95/.5)}.block.ink-light input[type=date],.block.ink-light input[type=checkbox]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.block-fill{pointer-events:auto;background:var(--block-bg,var(--bg-paper));box-shadow:var(--shadow-card);position:absolute;inset:0}.block.dragging .block-fill{box-shadow:var(--shadow-lift)}.block-outline{pointer-events:none;position:absolute;inset:0;overflow:visible}.block-outline path{fill:none;stroke:var(--color-line-strong);stroke-width:1px}.block.selected .block-outline path{stroke:var(--color-select);stroke-width:2px}.block-content{flex-direction:column;display:flex;position:absolute;overflow:hidden}.drag-hint{background:var(--color-line-strong);opacity:0;width:34px;height:5px;transition:opacity var(--dur-fast) var(--ease-out);pointer-events:none;border-radius:3px;position:absolute;top:2px;left:50%;transform:translate(-50%)}.block:hover .drag-hint,.block.selected .drag-hint{opacity:.8}.handle{background:var(--color-card);border:2px solid var(--color-select);pointer-events:auto;z-index:3;border-radius:2px;width:10px;height:10px;position:absolute}.handle.n{cursor:ns-resize;margin-left:-5px;top:-5px;left:50%}.handle.s{cursor:ns-resize;margin-left:-5px;bottom:-5px;left:50%}.handle.w{cursor:ew-resize;margin-top:-5px;top:50%;left:-5px}.handle.e{cursor:ew-resize;margin-top:-5px;top:50%;right:-5px}.handle.nw{cursor:nwse-resize;top:-5px;left:-5px}.handle.se{cursor:nwse-resize;bottom:-5px;right:-5px}.handle.ne{cursor:nesw-resize;top:-5px;right:-5px}.handle.sw{cursor:nesw-resize;bottom:-5px;left:-5px}.block-toolbar{background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-ui);box-shadow:var(--shadow-pop);pointer-events:auto;z-index:5;white-space:nowrap;align-items:center;gap:2px;padding:4px;display:flex;position:absolute}.block-toolbar button{font-size:var(--text-xs);color:var(--color-ink-soft);border-radius:4px;padding:4px 8px}.block-toolbar button:hover{background:var(--bg-mist);color:var(--color-ink)}.block-toolbar button.danger:hover{color:var(--color-danger);background:oklch(95% .03 20)}.block-toolbar .sep{background:var(--color-line);align-self:stretch;width:1px;margin:2px 3px}.swatch{border:1px solid oklch(30% .02 270/.15);border-radius:4px;width:16px;height:16px;padding:0!important}.swatch.active{outline:2px solid var(--color-select);outline-offset:1px}.opacity-slider{appearance:none;background:linear-gradient(to right, transparent, var(--color-line-strong));border:1px solid var(--color-line);cursor:pointer;border-radius:2px;width:72px;height:4px;margin:0 2px}.opacity-slider::-webkit-slider-thumb{appearance:none;background:var(--color-card);border:2px solid var(--color-select);border-radius:50%;width:12px;height:12px}.opacity-slider::-moz-range-thumb{background:var(--color-card);border:2px solid var(--color-select);border-radius:50%;width:10px;height:10px}.opacity-value{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-faint);text-align:right;min-width:34px}.shape-overlay{z-index:900;pointer-events:auto;cursor:default;background:oklch(28% .02 270/.18);position:absolute;inset:0}.shape-tile{pointer-events:auto;border:1px solid oklch(50% .155 255/.45);position:absolute}.shape-tile.on{background:oklch(50% .155 255/.3)}.shape-tile.ghost{background:oklch(99% 0 0/.25);border-style:dashed}.shape-tile.illegal{cursor:not-allowed}.shape-tile.on.illegal{border-color:var(--color-danger);background:oklch(54% .2 25/.35)}.shape-actions{gap:var(--space-2xs);z-index:901;display:flex;position:absolute}.shape-actions button{border-radius:var(--radius-ui);font-size:var(--text-sm);background:var(--color-card);border:1px solid var(--color-line);box-shadow:var(--shadow-pop);padding:6px 14px;font-weight:500}.shape-actions button.confirm{background:var(--color-select);border-color:var(--color-select);color:var(--color-card)}.card-pad{padding:var(--space-sm);flex-direction:column;flex:1;min-height:0;display:flex}.card-title-input{font-weight:700;font-size:var(--text-md);padding:0 0 var(--space-2xs);background:0 0;border:none;width:100%}.card-title-input:focus-visible{outline:none}.card-title-input::placeholder,.ghost-placeholder{color:var(--color-ink-faint)}.text-card{min-height:0;padding:0 var(--space-sm);flex-direction:column;flex:1;display:flex}.text-body{white-space:pre-wrap;overflow-wrap:anywhere;min-height:0;line-height:var(--cell);font-size:var(--text-cell);flex:1;overflow:auto}.text-edit{resize:none;min-height:0;line-height:var(--cell);font-size:var(--text-cell);background:0 0;border:none;flex:1;padding:0}.text-edit:focus-visible{outline:none}.heading-input{background:0 0;border:none;width:100%;padding:0;font-weight:900;line-height:1.2}.heading-input.h1{font-size:var(--text-2xl)}.heading-input.h2{font-size:var(--text-xl)}.heading-input.h3{font-size:var(--text-lg)}.heading-input:focus-visible{outline:none}.heading-static{overflow-wrap:anywhere;font-weight:900;line-height:1.2}.heading-static.h1{font-size:var(--text-2xl)}.heading-static.h2{font-size:var(--text-xl)}.heading-static.h3{font-size:var(--text-lg)}.todo-card{flex-direction:column;flex:1;min-height:0;display:flex}.todo-list{min-height:0;padding:0 var(--space-sm);flex-direction:column;flex:1;gap:0;display:flex;overflow:auto}.todo-item{align-items:center;gap:var(--space-xs);height:var(--cell);flex-shrink:0;display:flex}.todo-item input[type=text]{min-width:0;font-size:var(--text-cell);height:var(--cell);line-height:var(--cell);background:0 0;border:none;flex:1;padding:0 2px}.todo-item input[type=text]:focus-visible{background:var(--color-select-soft);border-radius:3px;outline:none}.todo-item.done input[type=text],.todo-item.done .todo-text{color:var(--color-ink-faint);text-decoration:line-through}.todo-text{font-size:var(--text-cell);line-height:var(--cell);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.todo-del{opacity:0;color:var(--color-ink-faint);font-size:var(--text-xs);padding:2px 4px}.todo-item:hover .todo-del{opacity:1}.add-row-btn{font-size:var(--text-xs);color:var(--color-ink-faint);height:var(--cell);line-height:var(--cell);padding:0 var(--space-xs);border-radius:4px;align-self:flex-start}.add-row-btn:hover{color:var(--color-select)}input[type=checkbox]{appearance:none;border:1.5px solid var(--color-line-strong);background:var(--color-card);cursor:pointer;width:15px;height:15px;transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);border-radius:3px;flex-shrink:0;position:relative}input[type=checkbox]:checked{background:var(--color-select);border-color:var(--color-select)}input[type=checkbox]:checked:after{content:"";border:solid var(--color-card);border-width:0 2px 2px 0;width:4px;height:8px;position:absolute;top:1px;left:4px;transform:rotate(45deg)}input[type=checkbox]:disabled{cursor:default;opacity:.7}.image-fit{object-fit:cover;flex:1;width:100%;height:100%;min-height:0;display:block}.image-empty{gap:var(--space-xs);color:var(--color-ink-faint);font-size:var(--text-sm);padding:var(--space-sm);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.image-empty input{border:1px solid var(--color-line);border-radius:var(--radius-ui);width:90%;font-size:var(--text-xs);background:var(--color-card);padding:6px 8px}.table-card{flex-direction:column;flex:1;min-height:0;display:flex}.table-title,.card-title-row{height:calc(var(--cell) * 2);line-height:calc(var(--cell) * 2);padding:0 var(--space-sm);font-weight:700;font-size:var(--text-md);width:100%;color:inherit;background:0 0;border:none}.table-title:focus-visible,.card-title-row:focus-visible{outline:none}.table-title::placeholder,.card-title-row::placeholder{color:var(--color-ink-faint)}.table-scroll{flex:1;min-height:0;overflow:auto}.grid-table{border-collapse:collapse;table-layout:fixed;font-size:var(--text-cell)}.grid-table th,.grid-table td{text-align:left;vertical-align:top;box-shadow:inset 0 -1px 0 var(--color-line);padding:0}.grid-table th.gutter,.grid-table td.gutter{box-shadow:none;vertical-align:middle}.grid-table th{color:var(--color-ink-soft);font-weight:500;font-size:var(--text-xs);height:var(--cell);-webkit-user-select:none;user-select:none;box-shadow:inset 0 -1px 0 var(--color-line-strong);position:relative}.col-resizer{cursor:col-resize;z-index:2;touch-action:none;width:8px;height:100%;position:absolute;top:0;right:-4px}.col-resizer:after{content:"";background:var(--color-select);opacity:0;width:2px;transition:opacity var(--dur-fast) var(--ease-out);position:absolute;top:0;bottom:0;left:3px}.col-resizer:hover:after,.col-resizer.resizing:after{opacity:1}.col-head{height:var(--cell);padding:0 var(--space-xs);white-space:nowrap;align-items:center;gap:4px;width:100%;display:flex;overflow:hidden}th .col-head:hover{background:var(--bg-mist)}.add-col-btn{height:var(--cell);color:var(--color-ink-faint);padding:0 10px;font-weight:400}.add-col-btn:hover{color:var(--color-select)}.cell-input{width:100%;height:var(--cell);line-height:var(--cell);padding:0 var(--space-xs);font-size:var(--text-cell);background:0 0;border:none}.cell-input:focus-visible{background:var(--color-select-soft);outline:none}.cell-textarea{height:auto;min-height:var(--cell);resize:none;overflow-wrap:anywhere;display:block;overflow:hidden}input[type=date].cell-input{font-family:var(--font-mono);font-size:var(--text-xs)}.cell-static{line-height:var(--cell);min-height:var(--cell);padding:0 var(--space-xs);overflow-wrap:anywhere}.cell-static.mono{font-family:var(--font-mono);font-size:var(--text-xs)}.cell-center{height:var(--cell);padding:0 var(--space-xs);align-items:center;display:flex}tr.row-collapsed .cell-static{height:var(--cell);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}tr.row-collapsed .cell-textarea{white-space:nowrap;overflow:hidden}.grid-table.rows-clickable tbody tr{cursor:pointer}.grid-table.rows-clickable tbody tr:hover{background:var(--bg-mist)}.row-toggle{opacity:0;color:var(--color-ink-faint);transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);padding:0 4px;font-size:9px;line-height:1}tr.row-open .row-toggle{opacity:1;transform:rotate(90deg)}.row-del{opacity:0;color:var(--color-ink-faint);font-size:var(--text-xs);padding:2px 6px}tr:hover .row-del,tr:hover .row-toggle,.row-toggle:focus-visible{opacity:1}.tag-chip{height:18px;font-size:var(--text-xs);background:var(--tag-bg,var(--tag-grey-bg));color:var(--tag-fg,var(--tag-grey-fg));text-overflow:ellipsis;white-space:nowrap;border-radius:4px;align-items:center;max-width:160px;padding:0 8px;font-weight:500;line-height:1;display:inline-flex;overflow:hidden}.tag-cell-btn{height:var(--cell);padding:0 var(--space-xs);align-items:center;width:100%;display:flex}.tag-cell-btn:hover{background:var(--bg-mist)}.popover{z-index:1200;background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-ui);min-width:180px;box-shadow:var(--shadow-pop);padding:var(--space-2xs);flex-direction:column;gap:2px;display:flex;position:absolute}.popover-item{align-items:center;gap:var(--space-xs);font-size:var(--text-sm);text-align:left;border-radius:4px;width:100%;padding:6px 8px;display:flex}.popover-item:hover{background:var(--bg-mist)}.popover-item:disabled{opacity:.4;cursor:default}.popover-item:disabled:hover{background:0 0}.popover-item.danger{color:var(--color-danger)}.popover-item.active{background:var(--color-select-soft)}.popover input[type=text]{border:1px solid var(--color-line);font-size:var(--text-sm);border-radius:4px;margin:2px;padding:5px 8px}.popover-label{font-size:var(--text-xs);color:var(--color-ink-faint);padding:6px 8px 2px}.color-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px}.page-center{justify-content:center;align-items:center;gap:var(--space-md);min-height:100vh;padding:var(--space-lg);flex-direction:column;display:flex}.login-card{background:var(--color-card);border:1px solid var(--color-line);width:min(360px,92vw);box-shadow:var(--shadow-card);padding:var(--space-xl) var(--space-lg);gap:var(--space-sm);border-radius:10px;flex-direction:column;display:flex}.login-card h1{margin:0 0 var(--space-xs);font-size:var(--text-lg)}.login-card input{border:1px solid var(--color-line);border-radius:var(--radius-ui);font-size:var(--text-sm);background:var(--color-card);padding:10px 12px}.login-error{color:var(--color-danger);font-size:var(--text-xs)}.viewer-topbar{z-index:1000;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--color-line);background:oklch(99.4% .004 95/.92);font-weight:700;display:flex;position:sticky;top:0}.zoom-toggle{right:var(--space-md);bottom:var(--space-md);z-index:1100;background:var(--color-ink);color:var(--color-card);font-size:var(--text-xs);font-family:var(--font-mono);box-shadow:var(--shadow-pop);border-radius:999px;padding:8px 12px;position:fixed}