/* Hallmark · macrostructure: Workbench · tone: utilitarian · anchor hue: cobalt */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
@import url('/tokens.css');
html,body{overflow-x:clip!important}body{overflow-y:hidden}button{white-space:nowrap}button:disabled{opacity:.55;cursor:not-allowed}
.context-menu{position:fixed;z-index:40;width:150px;padding:5px;background:var(--color-panel);border:1px solid var(--color-rule);border-radius:var(--radius-sm);box-shadow:0 12px 40px var(--color-shadow)}.context-menu button{width:100%;border:0;text-align:left}
.context-menu button.danger{color:oklch(50% .2 25)}.node.text{white-space:pre-wrap;overflow-wrap:anywhere;cursor:grab}.node.text[contenteditable=true]{cursor:text;user-select:text}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;overflow:hidden;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body)}button,input{font:inherit}button{border:1px solid var(--color-rule);background:var(--color-panel);color:var(--color-ink);border-radius:var(--radius-sm);height:34px;padding:0 12px;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}button:hover{background:var(--color-hover)}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.primary:hover{background:var(--color-accent-hover)}.topbar{height:52px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--space-md);border-bottom:1px solid var(--color-rule);background:var(--color-panel);position:relative;z-index:10}.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:28px;height:28px;background:var(--color-ink);color:var(--color-panel);font-weight:700;border-radius:8px}.brand input{border:0;background:transparent;font-weight:650;width:min(320px,42vw);padding:6px}.save-state{font-size:12px;color:var(--color-muted)}nav{display:flex;justify-content:flex-end;gap:8px}main{display:grid;grid-template-columns:232px 1fr;height:calc(100dvh - 52px)}.sidebar{border-right:1px solid var(--color-rule);background:var(--color-panel);padding:var(--space-sm);display:flex;flex-direction:column;min-width:0}.side-head{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;font-size:12px;font-weight:700;color:var(--color-muted)}.side-head button{border:0;width:30px;padding:0}.page-list{display:flex;flex-direction:column;gap:4px}.page-item{display:flex;align-items:center;gap:9px;width:100%;border:0;text-align:left;justify-content:flex-start;overflow:hidden}.page-item.active{background:var(--color-selected);color:var(--color-accent);font-weight:650}.page-no{font-variant-numeric:tabular-nums;color:var(--color-muted);font-size:11px}.page-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side-foot{margin-top:auto;padding:14px 6px;color:var(--color-muted);font-size:11px}.workspace{position:relative;overflow:hidden;background-color:var(--color-canvas);background-image:radial-gradient(var(--color-dot) 1px,transparent 1px);background-size:16px 16px;touch-action:none}.canvas{position:absolute;transform-origin:0 0;inset:0;will-change:transform}.node{position:absolute;user-select:none}.node.image{padding:5px;background:var(--color-panel);border:1px solid var(--color-node-rule);border-radius:var(--radius-md);box-shadow:0 8px 24px var(--color-shadow)}.node.image img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;border-radius:calc(var(--radius-md) - 5px)}.node.selected{outline:2px solid var(--color-accent);outline-offset:2px}.node.text{min-width:80px;padding:4px 6px;font-size:24px;font-weight:650;white-space:pre;cursor:text}.node.text[contenteditable=true]:focus{outline:2px solid var(--color-accent)}.resize-handle{display:none;position:absolute;width:12px;height:12px;right:-7px;bottom:-7px;border:2px solid var(--color-panel);background:var(--color-accent);border-radius:3px;cursor:nwse-resize}.selected .resize-handle{display:block}.empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;pointer-events:none}.empty>*{pointer-events:auto}.empty-icon{width:54px;height:54px;border:1px solid var(--color-rule);display:grid;place-items:center;border-radius:16px;background:var(--color-panel);font-size:28px;color:var(--color-accent);box-shadow:0 12px 30px var(--color-shadow)}.empty h1{font-size:21px;margin:18px 0 5px}.empty p{font-size:13px;color:var(--color-muted);margin:0 0 18px}.toolbox{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;background:var(--color-panel);border:1px solid var(--color-rule);border-radius:var(--radius-md);box-shadow:0 12px 40px var(--color-shadow)}.toolbox button{width:34px;padding:0;border:0}.toolbox button.active{background:var(--color-selected);color:var(--color-accent)}.toolbox span{height:20px;width:1px;background:var(--color-rule);margin:0 3px}.toolbox output{font-size:11px;width:42px;text-align:center}.toast{position:fixed;left:50%;top:66px;transform:translate(-50%,-20px);padding:9px 13px;border-radius:var(--radius-sm);background:var(--color-ink);color:var(--color-panel);font-size:12px;opacity:0;pointer-events:none;transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out);z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{width:min(420px,calc(100vw - 32px));border:1px solid var(--color-rule);border-radius:var(--radius-lg);padding:28px;background:var(--color-panel);color:var(--color-ink);box-shadow:0 24px 80px var(--color-shadow)}dialog::backdrop{background:var(--color-backdrop)}dialog h2{margin:0 0 8px;font-size:20px}dialog p{color:var(--color-muted);font-size:13px;line-height:1.6;margin:0 0 20px}dialog label{display:grid;gap:6px;font-size:12px;color:var(--color-muted)}dialog input{height:38px;border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:0 10px;color:var(--color-ink);background:var(--color-canvas)}.dialog-close{position:absolute;right:14px;top:14px;border:0;width:32px;padding:0}.wide{width:100%;margin-top:12px}.readonly .toolbox,.readonly #addPageBtn,.readonly .save-state{display:none}.readonly .brand input{pointer-events:none}.readonly .node{cursor:default}.readonly .resize-handle{display:none!important}@media(max-width:700px){main{grid-template-columns:1fr}.sidebar{position:absolute;z-index:9;top:52px;bottom:0;width:180px;transform:translateX(-100%)}.topbar{grid-template-columns:1fr auto}.save-state,#fitBtn{display:none}.brand input{width:130px}.topbar nav button{padding:0 8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0.01ms!important}}