:root{--canvas-bg:#f3f6fb;--bar-bg:#fff;--bar-border:#e2e8f0;--error:#c53030;--warning:#975a16;--accent:#3182ce;--accent-soft:#ebf4ff}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--canvas-bg);color:var(--text);font-family:var(--font)}.app{flex-direction:column;height:100%;display:flex}.app-bar{background:var(--bar-bg);border-bottom:1px solid var(--bar-border);align-items:baseline;gap:16px;padding:12px 20px;display:flex}.app-name{align-self:center;align-items:center;gap:8px;font-size:18px;font-weight:700;display:inline-flex}.project-name{font:inherit;color:var(--text-muted);cursor:text;background:0 0;border:1px solid #0000;border-radius:6px;padding:2px 6px}.project-name:hover{border-color:var(--bar-border);color:var(--text)}.project-name-input{font:inherit;border:1px solid var(--accent);color:var(--text);border-radius:6px;outline:none;padding:2px 6px}.back-link{color:var(--accent);font-size:14px;text-decoration:none}.back-link:hover{text-decoration:underline}.viewport{flex:1;position:relative;overflow:auto}.status{color:var(--text-muted);padding:24px}.status-error{color:var(--error)}.sitemap{-webkit-user-select:none;user-select:none;display:block}.section-label{dominant-baseline:central;font-weight:600}.section-label-band{cursor:pointer}.section-label-band rect{fill:#0000}.section-label-band:hover rect{fill:var(--accent-soft)}.section.is-selected .section-label-band{cursor:text}.section.is-selected .section-label-band rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2px}.empty-section-slot{cursor:pointer}.empty-section-slot rect{fill:#0000;stroke:var(--card-border);stroke-width:2px;stroke-dasharray:6 5}.empty-section-slot:hover rect{fill:var(--accent-soft);stroke:var(--accent)}.empty-section-slot text{fill:var(--text-muted);dominant-baseline:central;font-size:14px}.page-card-frame{filter:drop-shadow(0 2px 4px #1a202c14)}.page-card{cursor:pointer}.page-card.is-selected .page-card-frame:not(.is-colored){stroke:var(--accent);stroke-width:2px}.page-card.is-selected .page-card-frame.is-colored{stroke-width:3px}.page-card-title-band{fill:#0000}.page-card.is-selected .page-card-title-band{cursor:text}.page-card-title{pointer-events:none;dominant-baseline:central;font-weight:700}.tag-pill-label{pointer-events:none;dominant-baseline:central}.block-row-name{dominant-baseline:central}.plus-control{opacity:0;cursor:pointer;transition:opacity .12s}.page-card:hover .plus-control,.page-card.is-selected .plus-control{opacity:1}.plus-control circle{fill:var(--accent);stroke:var(--card-bg);stroke-width:2px}.plus-control path{stroke:#fff;stroke-width:2px;stroke-linecap:round}.page-editor{cursor:grab;touch-action:none;position:absolute;inset:0;overflow:hidden}.page-editor.is-panning,.page-editor.is-dragging,.page-editor.is-dragging *{cursor:grabbing}.drag-layer{pointer-events:none;font-family:var(--font);position:absolute;top:0;left:0;overflow:visible}.drag-ghost{opacity:.6}.page-card.is-drag-source,.block-row.is-drag-source{opacity:.35}.page-card.is-filtered-out,.connector.is-filtered-out{opacity:.2}.canvas-stage{position:relative}.placed-overlay{transform-origin:0 0;width:max-content;transform:scale(var(--view-inverse-scale,1));position:absolute}.placed-overlay[data-side=below]>*{flex-direction:column-reverse}.page-toolbar{cursor:default;background:var(--bar-bg);border:1px solid var(--bar-border);white-space:nowrap;border-radius:10px;flex-direction:column;gap:4px;padding:4px;display:flex;box-shadow:0 4px 12px #1a202c1f}.page-toolbar button,.block-toolbar button,.edit-bar button,.zoom-control button,.export-buttons button{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:5px 9px;font-size:13px}.page-toolbar button:hover:not(:disabled),.block-toolbar button:hover,.edit-bar button:hover:not(:disabled),.zoom-control button:hover:not(:disabled),.export-buttons button:hover:not(:disabled){background:var(--accent-soft)}.page-toolbar button:disabled,.edit-bar button:disabled,.zoom-control button:disabled,.export-buttons button:disabled{color:var(--text-muted);opacity:.5;cursor:default}.page-toolbar button.danger:not(:disabled),.block-toolbar button.danger{color:var(--error)}.title-input{border:2px solid var(--accent);border-radius:var(--card-radius) var(--card-radius) 6px 6px;background:var(--card-bg);font:inherit;font-size:var(--card-title-size);text-align:center;color:var(--text);outline:none;padding:0 10px;font-weight:700;position:absolute}.section-name-input{font-size:var(--section-label-size);text-align:center;border-radius:6px;padding:0 6px;font-weight:600}.move-to-section{font:inherit;border:1px solid var(--bar-border);color:var(--text);cursor:pointer;background:0 0;border-radius:6px;padding:4px 6px;font-size:13px}.block-row{cursor:pointer}.block-row.is-selected .block-row-frame{stroke:var(--accent);stroke-width:3px;paint-order:stroke}.block-row.is-selected{cursor:text}.block-toolbar{cursor:default;background:var(--bar-bg);border:1px solid var(--bar-border);white-space:nowrap;border-radius:10px;flex-direction:column;gap:4px;padding:4px;display:flex;box-shadow:0 4px 12px #1a202c1f}.block-toolbar-buttons,.page-toolbar-buttons{gap:2px;display:flex}.block-toolbar button.icon-button,.page-toolbar button.icon-button{width:32px;height:32px;color:var(--accent);justify-content:center;align-items:center;padding:0;display:inline-flex}.block-toolbar button.icon-button.danger,.page-toolbar button.icon-button.danger:not(:disabled){color:var(--error)}.page-toolbar button.icon-button:disabled{color:var(--text-muted)}.toolbar-icon{width:16px;height:16px;display:block}.toolbar-divider{background:var(--bar-border);align-self:stretch;width:1px;margin:0 4px}.page-toolbar .color-panel,.page-toolbar .frame-panel{width:0;min-width:100%}.block-toolbar button[aria-expanded=true],.page-toolbar button[aria-expanded=true],.color-panel button[aria-pressed=true],.frame-panel button[aria-pressed=true]{background:var(--accent-soft)}.color-panel,.frame-panel{border-bottom:1px solid var(--bar-border);flex-wrap:wrap;gap:2px;padding-bottom:4px;display:flex}.more-menu{border-bottom:1px solid var(--bar-border);flex-direction:column;align-self:flex-end;min-width:200px;padding-bottom:4px;display:flex}.page-toolbar .more-menu button,.block-toolbar .more-menu button{text-align:left;align-items:center;gap:8px;padding:6px 8px;display:flex}.more-menu .toolbar-icon{color:var(--accent);flex:none}.more-menu-label{flex:1}.more-menu kbd{font:inherit;color:var(--text-muted);font-size:12px}.frame-panel button{align-items:center;gap:6px;display:inline-flex}.color-dot{vertical-align:-1px;border-radius:50%;width:10px;height:10px;display:inline-block}.color-dot.toolbar-icon{width:16px;height:16px;box-shadow:inset 0 0 0 1px #1a202c1f}.color-dot.no-color{box-sizing:border-box;border:1.5px solid var(--text-muted)}.wireframe-picker{border-bottom:1px solid var(--bar-border);white-space:normal;flex-direction:column;gap:6px;width:372px;padding-bottom:4px;font-size:13px;display:flex}.wireframe-chips{flex-wrap:wrap;gap:4px;max-height:64px;display:flex;overflow-y:auto}.wireframe-chip{background:var(--accent-soft);border-radius:12px;align-items:center;gap:2px;padding:1px 2px 1px 8px;font-size:12px;display:inline-flex}.block-toolbar .wireframe-chip button{border-radius:10px;padding:0 6px;font-size:14px;line-height:18px}.block-toolbar .wireframe-chip button:hover{color:var(--error);background:#fff}.block-toolbar .wireframe-chip button.wireframe-chip-move{padding:0 3px;font-size:12px}.block-toolbar .wireframe-chip button.wireframe-chip-move:hover:not(:disabled){color:var(--accent)}.block-toolbar .wireframe-chip button.wireframe-chip-move:disabled{opacity:.3;cursor:default}.block-toolbar .wireframe-chips-clear{color:var(--text-muted);padding:1px 8px;font-size:12px}.wireframe-chips-empty,.wireframe-picker-empty{color:var(--text-muted);margin:0;padding:4px 2px;font-size:12px}.wireframe-picker-empty{text-align:center;padding:24px 0}.wireframe-picker-controls{align-items:center;gap:8px;display:flex}.wireframe-picker-controls input[type=search]{border:1px solid var(--card-border);min-width:0;font:inherit;outline-color:var(--accent);border-radius:6px;flex:1;padding:5px 8px;font-size:13px}.wireframe-picker-several{color:var(--text-muted);cursor:pointer;align-items:center;gap:4px;font-size:12px;display:inline-flex}.wireframe-picker-tabs{border-bottom:1px solid var(--bar-border);gap:2px;display:flex}.block-toolbar .wireframe-picker-tabs button{border-radius:6px 6px 0 0}.block-toolbar .wireframe-picker-tabs button[aria-selected=true]{background:var(--accent-soft);font-weight:600}.wireframe-picker-count{color:var(--text-muted);font-size:11px;font-weight:400}.wireframe-picker-grid{overscroll-behavior:contain;grid-template-columns:repeat(4,1fr);gap:4px;max-height:300px;display:grid;overflow-y:auto}.block-toolbar .wireframe-tile{border:1px solid var(--bar-border);color:var(--text);text-align:center;flex-direction:column;justify-content:flex-start;align-items:center;gap:4px;padding:6px 4px;font-size:11px;line-height:1.2;display:flex}.wireframe-tile-art{align-items:center;height:22px;display:flex}.wireframe-tile svg{color:#4a5568;flex:none}.block-toolbar .wireframe-tile:hover svg{color:var(--accent)}.note-panel textarea{border:1px solid var(--card-border);width:100%;min-width:260px;font:inherit;resize:vertical;outline-color:var(--accent);border-radius:6px;padding:6px 8px;font-size:13px;display:block}.block-name-input{box-sizing:content-box;margin:-4px 0 0 calc(0px - var(--row-text-inset));padding:2px calc(var(--row-text-inset) - 2px);border-radius:var(--row-radius);font-size:var(--row-font-size);font-weight:400;line-height:var(--row-line-height);text-align:left;overflow-wrap:break-word;resize:none}.legend-title{dominant-baseline:central;font-weight:600}.legend-entry text{dominant-baseline:central}.edit-bar,.zoom-control{cursor:default;background:var(--bar-bg);border:1px solid var(--bar-border);border-radius:10px;align-items:center;gap:4px;padding:4px;display:flex;position:fixed;bottom:16px;left:16px;box-shadow:0 4px 12px #1a202c1f}.edit-notice{color:var(--error);padding:0 8px;font-size:13px}.zoom-control{left:auto;right:16px}.zoom-control .zoom-level{text-align:center;font-variant-numeric:tabular-nums;min-width:56px}.zoom-control .zoom-level[aria-expanded=true]{background:var(--accent-soft)}.zoom-menu{background:var(--bar-bg);border:1px solid var(--bar-border);border-radius:10px;flex-direction:column;min-width:200px;padding:6px;display:flex;position:absolute;bottom:calc(100% + 10px);right:0;box-shadow:0 4px 12px #1a202c1f}.zoom-menu hr{border:0;border-top:1px solid var(--bar-border);width:100%;margin:6px 0}.zoom-control .zoom-menu button,.zoom-menu-toggle{text-align:left;white-space:nowrap;cursor:pointer;border-radius:6px;justify-content:space-between;align-items:center;gap:12px;padding:6px 8px;font-size:13px;display:flex}.zoom-menu-toggle:hover{background:var(--accent-soft)}.zoom-menu kbd{font:inherit;color:var(--text-muted);font-size:12px}.zoom-menu-toggle input{appearance:none;background:var(--card-border);cursor:pointer;border-radius:7px;flex:none;width:26px;height:14px;margin:0;transition:background .12s;position:relative}.zoom-menu-toggle input:after{content:"";background:#fff;border-radius:50%;width:10px;height:10px;transition:transform .12s;position:absolute;top:2px;left:2px}.zoom-menu-toggle input:checked{background:var(--accent)}.zoom-menu-toggle input:checked:after{transform:translate(12px)}.zoom-menu-toggle input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.viewport{--side-panel-width:280px}.page-editor.beside-side-panel{right:var(--side-panel-width)}.page-editor.beside-side-panel .zoom-control{right:calc(var(--side-panel-width) + 16px)}.side-panel{width:var(--side-panel-width);background:var(--bar-bg);border-left:1px solid var(--bar-border);flex-direction:column;display:flex;position:absolute;top:0;bottom:0;right:0}.side-panel-heading{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:0;padding:12px 12px 8px;font-size:13px;font-weight:700}.structure-filter{font:inherit;border:1px solid var(--bar-border);border-radius:6px;margin:0 12px 8px;padding:6px 8px;font-size:13px}.structure-filter:focus{outline:2px solid var(--accent);outline-offset:-1px}.structure-rows{flex:1;margin:0;padding:0 4px 16px;list-style:none;overflow-y:auto}.structure-row{width:100%;font:inherit;text-align:left;white-space:nowrap;text-overflow:ellipsis;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:4px 8px;font-size:13px;display:block;overflow:hidden}.structure-row:hover{background:var(--accent-soft)}.structure-row.is-section{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-top:8px;font-size:12px;font-weight:700}.structure-row.is-match{font-weight:700}.structure-row.is-hidden{color:var(--text-muted);font-style:italic}.structure-row.is-selected{background:var(--accent);color:#fff}.structure-empty{color:var(--text-muted);margin:0;padding:8px 12px;font-size:13px}.collapse-badge{cursor:pointer}.collapse-badge text{pointer-events:none;dominant-baseline:central}.collapse-badge:hover rect{fill:var(--accent-soft)}.save-status{color:var(--text-muted);margin-left:auto;font-size:13px}.save-status-error,.save-status-paused{color:var(--error)}.conflict-banner{background:#fffbea;border-bottom:1px solid #f6e05e;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 20px;font-size:14px;display:flex}.conflict-banner-error{color:var(--error)}.conflict-banner button{font:inherit;border:1px solid var(--card-border);background:var(--card-bg);cursor:pointer;border-radius:6px;padding:4px 12px}.project-list-screen{flex:1;width:100%;max-width:880px;margin:0 auto;padding:24px 20px 48px;overflow:auto}.project-list-screen h1{margin:8px 0 16px;font-size:22px}.project-list-screen .status{padding:8px 0}.refused-edit{align-items:baseline;gap:12px;display:flex}.primary-button,.secondary-button,.project-actions button,.refused-edit button,.dialog-buttons button{font:inherit;border:1px solid var(--card-border);background:var(--card-bg);color:var(--text);cursor:pointer;border-radius:6px;padding:6px 12px;font-size:14px}.primary-button{border-color:var(--accent);background:var(--accent);color:#fff}.app-bar-actions{gap:8px;margin-left:auto;display:flex}.primary-button:disabled,.secondary-button:disabled,.project-actions button:disabled,.dialog-buttons button:disabled{opacity:.5;cursor:default}.project-actions button.danger:not(:disabled){color:var(--error)}.project-table{border-collapse:collapse;background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;width:100%;overflow:hidden}.project-table th,.project-table td{text-align:left;border-bottom:1px solid var(--bar-border);padding:10px 14px}.project-table tr:last-child td{border-bottom:0}.project-table th{color:var(--text-muted);font-size:13px;font-weight:600}.project-table a{color:var(--text);font-weight:600;text-decoration:none}.project-table a:hover{color:var(--accent);text-decoration:underline}.project-table time{color:var(--text-muted);font-size:14px}.project-actions{justify-content:flex-end;gap:8px;display:flex}.deleted-projects{margin-top:24px}.deleted-projects .project-table{margin-top:12px}.unreadable-projects{margin-top:32px;font-size:14px}.unreadable-projects h2{color:var(--error);font-size:16px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.new-project-dialog{border:1px solid var(--bar-border);width:min(400px,100% - 32px);color:var(--text);border-radius:12px;padding:20px;box-shadow:0 12px 32px #1a202c33}.new-project-dialog::backdrop{background:#1a202c4d}.new-project-dialog h2{margin:0 0 16px;font-size:18px}.new-project-dialog label{color:var(--text-muted);flex-direction:column;gap:6px;font-size:14px;display:flex}.new-project-dialog input{font:inherit;border:1px solid var(--card-border);color:var(--text);border-radius:6px;padding:8px 10px}.new-project-dialog input:focus{outline:2px solid var(--accent);outline-offset:-1px}.dialog-buttons{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.edit-bar button[aria-pressed=true]{background:var(--accent-soft)}.palette-row{grid-template-columns:28px minmax(0,1fr) 44px 44px 26px;place-items:center;gap:4px;padding:2px 8px;display:grid}.palette-row>.panel-name{justify-self:stretch}.palette-columns{color:var(--text-muted);font-size:11px}.palette-columns>:nth-child(2){justify-self:start;padding-left:7px}.palette-entries,.tags-list{min-height:0;margin:0;padding:0 0 8px;list-style:none;overflow-y:auto}.panel-color{border:1px solid var(--card-border);cursor:pointer;background:0 0;border-radius:6px;width:28px;height:24px;padding:0}.panel-name{min-width:0;font:inherit;color:var(--text);background:0 0;border:1px solid #0000;border-radius:6px;padding:4px 6px;font-size:13px}.panel-name:hover{border-color:var(--card-border)}.panel-name:focus{border-color:var(--card-border);outline:2px solid var(--accent);outline-offset:-1px}.palette-panel button,.tags-panel button{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:4px 8px;font-size:13px}.palette-panel button:hover:not(:disabled),.tags-panel button:hover:not(:disabled){background:var(--accent-soft)}.palette-panel button.danger:not(:disabled),.tags-panel button.danger:not(:disabled){color:var(--error)}.palette-panel button:disabled,.tags-panel button:disabled{color:var(--text-muted);opacity:.5;cursor:default}.palette-add,.tags-add{align-self:flex-start;margin:0 8px 12px}.tags-row{grid-template-columns:28px minmax(0,1fr) 26px 26px 26px;place-items:center;gap:4px;padding:2px 8px;display:grid}.tags-row>.panel-name{justify-self:stretch}.side-panel-empty{color:var(--text-muted);margin:0 12px 8px;font-size:13px}.tag-checklist{border-bottom:1px solid var(--bar-border);flex-wrap:wrap;align-items:center;gap:2px 10px;width:0;min-width:100%;padding:2px 4px 6px;font-size:13px;display:flex}.tag-checklist label{cursor:pointer;align-items:center;gap:4px;display:inline-flex}.tag-new{font:inherit;border:1px solid var(--bar-border);border-radius:6px;flex:1 0 120px;padding:4px 6px;font-size:13px}.tag-filter{align-items:center;gap:4px;display:flex;position:relative}.edit-bar .tag-filter button.is-active{background:var(--accent-soft);color:var(--accent)}.tag-filter-menu{background:var(--bar-bg);border:1px solid var(--bar-border);border-radius:10px;flex-direction:column;min-width:200px;padding:6px;font-size:13px;display:flex;position:absolute;bottom:calc(100% + 10px);left:0;box-shadow:0 4px 12px #1a202c1f}.tag-filter-menu .side-panel-empty{margin:4px 6px}.tag-filter-menu label{cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;gap:6px;padding:4px 6px;display:flex}.tag-filter-menu label:hover{background:var(--accent-soft)}.tag-filter-name{flex:1}.tag-filter-count,.tag-filter-hint{color:var(--text-muted);font-variant-numeric:tabular-nums}.tag-filter-hint{white-space:nowrap;padding-left:4px;font-size:13px}.export-buttons{align-items:baseline;gap:4px;font-size:13px;display:flex}.export-label{color:var(--text-muted);margin-right:2px}.export-buttons button{border:1px solid var(--bar-border);padding:3px 8px}.export-error{color:var(--error)}.export-notice{color:var(--warning)}.shell-screen{display:contents}.shell-screen[hidden]{display:none}.shell-notice{background:var(--card-bg);border:1px solid var(--card-border);border-radius:6px;margin:0;padding:8px 14px;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.sign-in-screen{flex:1;justify-content:center;align-items:flex-start;padding:72px 16px;display:flex}.sign-in-form{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;flex-direction:column;gap:16px;width:min(360px,100%);padding:24px;display:flex}.sign-in-form h1{margin:0;font-size:20px}.sign-in-form label{color:var(--text-muted);flex-direction:column;gap:6px;font-size:14px;display:flex}.sign-in-form input{font:inherit;border:1px solid var(--card-border);color:var(--text);border-radius:6px;padding:8px 10px}.sign-in-form input:focus{outline:2px solid var(--accent);outline-offset:-1px}.sign-in-form .status-error{margin:0;font-size:14px}.sign-in-form .primary-button{align-self:flex-end}.editor-header-slot{display:contents}.shortcuts-control{align-self:center;position:relative}.shortcuts-control>button{font:inherit;border:1px solid var(--bar-border);width:28px;height:28px;color:var(--text);cursor:pointer;background:0 0;border-radius:50%;padding:0;font-size:13px;font-weight:700}.shortcuts-control>button:hover,.shortcuts-control>button[aria-expanded=true]{background:var(--accent-soft)}.shortcuts-panel{z-index:10;background:var(--bar-bg);border:1px solid var(--bar-border);border-radius:10px;width:360px;max-height:calc(100vh - 80px);padding:8px 14px 12px;font-size:13px;position:absolute;top:calc(100% + 8px);right:0;overflow:auto;box-shadow:0 4px 12px #1a202c1f}.shortcuts-panel h3{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin:10px 0 4px;font-size:12px;font-weight:700}.shortcuts-panel dl{margin:0}.shortcuts-panel dl>div{grid-template-columns:6em 1fr;gap:8px;padding:3px 0;display:grid}.shortcuts-panel dt,.shortcuts-panel dd{margin:0}.shortcuts-panel kbd{font:inherit;color:var(--text-muted);white-space:nowrap;font-size:12px}