:root{--bg:#fff;--surface:#fff;--panel:#fafbf9;--text:#273d36;--muted:#829089;--border:#e4eae5;--accent:#426f56;--soft:#edf3eb;--shadow:0 6px 28px #263e3510;--canvas:#fff;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px;overflow:hidden}body.dark{--bg:#000;--canvas:#000;--surface:#171d19;--panel:#0c100d;--text:#e3ece4;--muted:#92a396;--border:#303c32;--accent:#a9cfaa;--soft:#27372a;--shadow:0 6px 28px #0005;color-scheme:dark}button,input,textarea,select{font:inherit}button{cursor:pointer;color:var(--text);border:1px solid transparent;background:transparent;border-radius:8px;padding:8px 11px;white-space:nowrap}button:hover{background:var(--soft)}button:disabled{opacity:.3;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.primary{background:var(--text);color:var(--bg);padding:10px 16px}.primary:hover{background:var(--accent);color:var(--bg)}input,textarea,select{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px;width:100%}textarea{resize:vertical;min-height:86px;line-height:1.6}.topbar{height:76px;display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0 25px;gap:24px;background:var(--surface);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:650;font-size:21px;min-width:187px;letter-spacing:2px}.brand small{display:block;font-size:8px;letter-spacing:2.1px;font-weight:500;margin-top:2px}.brand-icon{font-size:42px;font-weight:300;color:var(--accent)}.document{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.document input{width:min(100%,400px);padding:0;border:0;background:transparent;font-size:14px;font-weight:600}.document span{color:var(--muted);font-size:10px}.header-actions{display:flex;gap:8px;align-items:center}.header-actions .primary span{margin-left:16px}.workspace{display:flex;height:calc(100dvh - 76px)}#sidebar{width:236px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--panel);z-index:4;padding:24px 16px 12px}.side-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;letter-spacing:1px;margin-bottom:16px}.side-heading button{padding:0 7px;font-size:20px;color:var(--muted)}.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0 10px}.search span{font-size:23px;color:var(--muted)}.search input{border:0;background:transparent;font-size:12px;padding:10px 0}.side-intro{font-size:10px;color:var(--muted);margin:19px 0;line-height:1.7}#outline{flex:1;overflow:auto}.outline-row{display:flex;align-items:center;gap:3px;margin:3px 0;border-radius:6px;min-height:38px}.outline-row.selected{background:var(--soft)}.outline-row button{font-size:12px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outline-label{flex:1;padding:8px 4px!important}.outline-toggle{width:22px;padding:5px 0!important;color:var(--muted)}.outline-dot{font-size:8px;color:var(--accent);padding:0 5px}.sidebar-footer{display:flex;gap:7px;align-items:center;padding-top:15px;border-top:1px solid var(--border);font-size:10px;color:var(--muted)}.sidebar-footer button{margin-left:auto;border:1px solid var(--border);padding:2px 7px;border-radius:50%}.tiny-dot{width:5px;height:5px;background:#83a17b;border-radius:50%}#canvas{position:relative;overflow:hidden;flex:1;background:var(--canvas);touch-action:none;outline:none;min-width:0}#canvas.pan{cursor:grab}#canvas.pan:active{cursor:grabbing}.canvas-caption{position:absolute;left:32px;top:25px;display:flex;flex-direction:column;gap:8px;pointer-events:none;z-index:1}.canvas-caption span:first-child{font-size:10px;text-transform:uppercase;letter-spacing:3px;color:var(--muted)}.canvas-caption span:last-child{font-size:11px;color:var(--muted);opacity:.75}#world{transform-origin:0 0;position:absolute;left:0;top:0}#connections{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}.edge{fill:none;stroke:#b6c5b7;stroke-width:2}.relation{stroke:#b79970;stroke-dasharray:6 4}.edge-label{fill:var(--muted);font-size:12px}.node{position:absolute;width:190px;min-height:62px;border:1px solid var(--border);border-radius:12px;background:var(--node-color,var(--surface));color:var(--node-text,var(--text));box-shadow:0 2px 7px #213d2b05;padding:18px 20px;cursor:grab;user-select:none;touch-action:none;transition:box-shadow .15s}.node.root{border-radius:15px;box-shadow:var(--shadow);border-color:#afc2aa}.node.selected{outline:2px solid var(--accent);outline-offset:4px}.node.target{outline:3px dashed #b78b47;outline-offset:8px}.node-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-size:15px}.node.root .node-text{font-weight:600}.node img{display:block;width:100%;height:100%;object-fit:fill;border-radius:6px;pointer-events:none}.node.image-node{padding:8px;min-height:0}.image-caption{font-size:12px;line-height:1.4;padding:8px 4px 3px;white-space:pre-wrap;overflow-wrap:anywhere}.collapse-node{position:absolute;right:-13px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:1px solid var(--border);border-radius:50%;padding:0;background:var(--surface);font-size:12px}.node-note{display:block;font-size:10px;color:var(--muted);margin-top:8px}.resize-handle{position:absolute;width:20px;height:20px;bottom:-9px;right:-9px;border:2px solid var(--surface);border-radius:50%;background:var(--accent);cursor:nwse-resize;touch-action:none}.bottom-toolbar{position:absolute;bottom:48px;left:0;right:0;display:flex;justify-content:center;gap:14px;pointer-events:none;z-index:3}.tool-group,.zoom-group{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:5px;pointer-events:auto}.tool-group button,.zoom-group button{height:37px;min-width:37px;font-size:20px;padding:4px 9px}.tool-group button.active{background:var(--soft);color:var(--accent)}.separator{width:1px;height:20px;background:var(--border);margin:0 4px}.tool-label{font-size:11px;margin-left:7px;vertical-align:middle}.zoom-group #zoom-label{font-size:11px;min-width:49px}.canvas-footer{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:10px;color:var(--muted);pointer-events:none;letter-spacing:1px}#context-toolbar{position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:3;border:1px solid var(--border);background:var(--surface);border-radius:10px;box-shadow:var(--shadow);padding:4px;max-width:calc(100% - 20px);overflow:auto;white-space:nowrap}#context-toolbar button{font-size:12px;padding:7px 9px}#inspector{width:255px;border-left:1px solid var(--border);background:var(--panel);padding:24px 18px;overflow:auto;z-index:4;flex-shrink:0}#inspector label,.form-label{display:block;font-size:11px;color:var(--muted);margin:16px 0 7px}#inspector input,#inspector textarea,#inspector select{font-size:12px}#inspector .button-row{margin:12px 0}.button-row{display:flex;gap:7px;flex-wrap:wrap}.button-row button,.full-button{border:1px solid var(--border);font-size:12px}.full-button{width:100%;text-align:left;margin-top:8px;padding:10px}.danger{color:#bc625a}.muted{color:var(--muted);font-size:12px;line-height:1.7}#empty-state{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);text-align:center;width:90%;pointer-events:none}#empty-state>span{font-size:64px;color:#b1c4ae}#empty-state h1{font-size:28px;font-weight:500}#empty-state p{color:var(--muted);font-size:13px}#empty-state button{pointer-events:auto;margin-top:16px}#selection-box{position:absolute;background:#7ca38120;border:1px solid var(--accent);pointer-events:none}dialog{width:min(600px,calc(100vw - 28px));max-height:85dvh;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);padding:25px;box-shadow:0 25px 100px #0002}dialog::backdrop{background:#14291c55;backdrop-filter:blur(3px)}.modal-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.modal-heading h2{font-size:19px;margin:0;font-weight:550}.modal-heading button{font-size:24px;padding:0 8px}#modal-body p{line-height:1.8}#modal-body .button-row{margin-top:18px}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.export-grid button{border:1px solid var(--border);text-align:left;padding:15px}.export-grid small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.project-row{display:flex;align-items:center;border-bottom:1px solid var(--border);padding:10px 0;gap:8px}.project-row>button:first-child{flex:1;text-align:left}.project-row small{display:block;color:var(--muted);margin-top:6px}.crop-stage{position:relative;background:var(--panel);touch-action:none;user-select:none;margin:15px 0;max-height:45dvh;overflow:hidden}.crop-stage img{display:block;width:100%;max-height:45dvh;object-fit:contain;pointer-events:none}.crop-overlay{position:absolute;border:2px solid #fff;outline:1000px solid #0006;pointer-events:none}.crop-overlay:after{content:'';position:absolute;inset:33% 0;border-top:1px solid #fff8;border-bottom:1px solid #fff8}#toast{position:fixed;bottom:125px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:12px 20px;border-radius:10px;z-index:30;max-width:90vw;font-size:13px;box-shadow:var(--shadow)}[hidden]{display:none!important}body.sidebar-hidden #sidebar{display:none}.lock-banner{background:#fff2cf;color:#674d22;padding:12px}a{color:var(--accent)}
@media(max-width:1100px){#sidebar{width:205px}.brand{min-width:155px}.tool-label{display:none}.bottom-toolbar{gap:8px}#inspector{position:absolute;right:0;top:76px;bottom:0;box-shadow:var(--shadow)}}
@media(max-width:700px){.topbar{height:64px;padding:0 12px;gap:10px}.brand{min-width:0;font-size:17px;gap:5px}.brand-icon{font-size:31px}.brand small{display:none}.document input{font-size:12px}.document span{font-size:9px}.header-actions{gap:0}.header-actions button{font-size:11px;padding:8px}.header-actions .primary span{display:none}.workspace{height:calc(100dvh - 64px)}#sidebar{position:absolute;top:64px;bottom:0;left:0;width:245px;box-shadow:var(--shadow)}#inspector{top:64px;width:min(290px,90vw)}.canvas-caption{left:20px;top:20px}.canvas-caption span:last-child{font-size:10px}.bottom-toolbar{bottom:36px;flex-direction:column;align-items:center;gap:8px}.tool-group button{min-width:33px;padding:4px 8px}.tool-group{order:2}.zoom-group{align-self:flex-end;margin-right:12px}.zoom-group button{height:29px;min-width:29px;font-size:16px}.canvas-footer{bottom:12px;font-size:9px}#context-toolbar{top:70px}#context-toolbar button{padding:8px;font-size:11px}.separator{margin:0 2px}dialog{padding:20px}.node{border-radius:10px}.brand>span:last-child{display:none}}
@media print{body>*{display:none!important}body>#print-image{display:block!important;width:100%;height:auto}}
/* Keep keyboard focus from scrolling the overlay controls with offscreen nodes. */
#canvas{overflow:clip}
@media(min-width:701px) and (max-width:900px){.bottom-toolbar{flex-wrap:wrap;gap:8px}.tool-group{order:2}.zoom-group{order:1}.canvas-caption{max-width:calc(100% - 48px)}}

/* Mindspace / editorial workspace — monochrome surfaces, one signal colour. */
:root{--text:#202421;--muted:#747b75;--accent:#466344;--soft:#f0f2eb;--panel:#f8f9f5;--border:#e5e7df;--signal:#d7ef87;--relation:#907a54;--shadow:0 12px 40px #2024200a,0 2px 6px #20242005}
body.dark{--text:#eeeeea;--muted:#a4a89e;--accent:#d7ef87;--soft:#23261e;--panel:#10120e;--border:#2d3027;--signal:#d7ef87;--relation:#c6b18c;--surface:#171a14;--canvas:#000;--bg:#000}
button{transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}button:active:not(:disabled){transform:translateY(1px)}
.ui-icon{width:19px;height:19px;display:block;flex-shrink:0;pointer-events:none}
button[data-icon]{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.topbar{height:88px;padding:0 28px;gap:28px;border-bottom:1px solid var(--border)}
.brand{min-width:205px;font-size:23px;font-weight:650;gap:12px}.brand small{font-size:8px;letter-spacing:2.7px;margin-top:5px}
.brand-icon{display:grid;place-items:center;width:43px;height:43px;color:var(--text)}.brand-icon svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.6}.brand-icon circle{fill:var(--surface)}
.document{position:relative;gap:3px;padding-left:24px;border-left:1px solid var(--border)}
.document .document-eyebrow{font-size:8px;letter-spacing:2px;color:var(--muted);font-weight:600}
.document input{font-size:16px;font-weight:550;letter-spacing:.2px;width:min(100%,440px);margin:2px 0}
.document #save-status{font-size:10px;color:var(--muted)}
.header-actions{gap:8px}.header-actions button{height:42px;font-size:12px}.header-actions .tool-label{margin:0;font-size:12px}.header-actions .primary{border-radius:9px;padding:0 16px;background:var(--text);color:var(--bg)}
.workspace{height:calc(100dvh - 88px);position:relative}
#sidebar{width:252px;margin:18px 0 18px 18px;padding:22px 18px 15px;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:none}
.side-heading{font-size:12px;letter-spacing:.3px;margin-bottom:22px}.section-number{font:10px ui-monospace,monospace;color:var(--muted);margin-right:7px}
.side-heading button{width:28px;height:28px;border-radius:50%}.side-heading .ui-icon{width:15px;height:15px}
.search{border-radius:8px;background:var(--surface);padding:0 10px}.search input{font-size:12px;padding:11px 0}
.side-intro{margin:25px 0 20px}.outline-kicker{font-size:8px;letter-spacing:1.5px;font-weight:600;color:var(--muted)}.side-intro p{font-size:19px;letter-spacing:-.4px;line-height:1.55;color:var(--text);font-weight:400;margin:10px 0 0}
.outline-row{min-height:39px;border-radius:7px}.outline-row.selected{background:var(--signal);color:#26321d}.outline-row:hover{background:var(--soft)}.outline-row.selected:hover{background:var(--signal)}.outline-row button{color:inherit}.outline-row .outline-label{font-size:12px;padding:10px 5px!important}.outline-dot{color:var(--muted);font-size:6px}
.sidebar-footer{padding-top:17px;margin-top:15px;color:var(--muted);font-size:11px}.tiny-dot{width:6px;height:6px;background:#799651}.sidebar-footer button{width:24px;height:24px;color:var(--text)}
.canvas-caption{top:28px;left:32px;gap:10px}.canvas-caption span:first-child{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.5px;font-weight:500}.canvas-caption b{font-weight:400;color:var(--border);margin:0 2px}.canvas-caption span:last-child{font-size:11px;letter-spacing:.2px;color:var(--muted)}.live-dot{width:5px;height:5px;background:#829170;border-radius:50%;display:inline-block}
.node{border-radius:10px;border-color:#dfe4dc;box-shadow:0 2px 3px #141a1203,0 7px 20px #141a1204;transition:box-shadow .16s,outline-color .16s;background:var(--node-color,var(--surface))}.node.root{border-radius:12px;border-color:#c8d2be;box-shadow:0 3px 12px #20302008}.node:hover{box-shadow:0 4px 20px #24302012}.node.selected{outline:1.5px solid var(--accent);outline-offset:5px;box-shadow:0 8px 28px #26362012}.node .node-text{letter-spacing:.2px}.node.root .node-text{font-weight:550}.node-note{font-size:10px;letter-spacing:.4px;margin-top:10px}.collapse-node{width:22px;height:22px;right:-12px;color:var(--muted);background:var(--surface);box-shadow:0 2px 5px #00000005}.node.image-node{border-radius:13px;padding:8px}.node img{border-radius:7px}
body.dark .node{border-color:#3e4736}body.dark .node:not([style*="--node-color"]){box-shadow:none}
.node.dragging{opacity:.78;box-shadow:0 14px 30px #17241220;z-index:10;cursor:grabbing}.node.drop-target{outline:2px solid #87a441;outline-offset:7px;box-shadow:0 0 0 11px #b8d46d25;z-index:11}.node.drop-target:after{content:'＋ 接入';position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);font-size:11px;line-height:1;padding:8px 11px;background:var(--signal);color:#26321d;border-radius:6px;white-space:nowrap;pointer-events:none}
#connections{color:var(--relation)}.edge{stroke:#b8c4b2;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.relation{stroke:var(--relation);stroke-dasharray:5 5}.arrow-tail{stroke:var(--relation);stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round}.edge-label{font-size:11px;fill:var(--muted);paint-order:stroke;stroke:var(--canvas);stroke-width:5px;stroke-linejoin:round}
.bottom-toolbar{bottom:43px;gap:14px;align-items:center;padding:0 18px;flex-wrap:wrap}.tool-group{background:#23271f;color:#f2f4eb;border:1px solid #33382c;border-radius:13px;padding:6px;box-shadow:0 9px 28px #18200e22;gap:2px}.tool-group button{color:#d4d9cb;min-width:40px;height:40px;border-radius:8px;padding:7px 10px}.tool-group button:hover{background:#353c2d;color:#fff}.tool-group button.active{background:var(--signal);color:#27351a;box-shadow:inset 0 0 0 1px #e8f6c0}.tool-group .separator{background:#48503e;margin:0 5px;height:19px}.tool-group .tool-label{font-size:11px;margin:0}.tool-group button:disabled{opacity:.25}.tool-group #add-text,.tool-group #add-image{gap:8px}.zoom-group{background:var(--surface);padding:6px;border-radius:11px;box-shadow:0 3px 18px #111b1007}.zoom-group button{height:36px;min-width:31px;padding:6px}.zoom-group .ui-icon{width:17px;height:17px}.zoom-group #zoom-label{font:11px ui-monospace,monospace;min-width:45px}.zoom-group #fit{margin-left:6px;border-left:1px solid var(--border);border-radius:0;padding-left:12px;width:40px}
.canvas-footer{bottom:14px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:10px;letter-spacing:0;color:var(--muted)}.canvas-footer i{font-style:normal;color:var(--border)}kbd{font:9px ui-monospace,monospace;border:1px solid var(--border);border-radius:3px;padding:1px 4px;margin-right:3px}
#context-toolbar{top:86px;display:flex;align-items:center;padding:5px;border-radius:10px;box-shadow:0 5px 20px #1d291014;background:var(--surface);border:1px solid var(--border)}#context-toolbar button{font-size:12px;padding:9px 11px;border-radius:6px;min-height:36px}#context-toolbar .delete-action{color:#a45545;width:36px;padding:8px}#context-toolbar .separator{flex-shrink:0}
#drop-hint{position:absolute;left:50%;bottom:117px;transform:translateX(-50%);z-index:12;padding:10px 16px;border-radius:8px;background:var(--signal);color:#26321d;font-size:12px;pointer-events:none;box-shadow:0 5px 15px #34451a12;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#inspector{position:absolute;right:18px;top:18px;bottom:18px;width:276px;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:21px;background:var(--surface)}#inspector .side-heading{margin-bottom:12px}#inspector .full-button{border-radius:7px;padding:11px}#inspector input,#inspector textarea{background:var(--panel)}
dialog{padding:28px;border-radius:18px;border:1px solid var(--border);box-shadow:0 32px 110px #19251025}dialog::backdrop{background:#17201444;backdrop-filter:blur(5px)}.modal-heading{margin-bottom:22px}.modal-heading h2{font-size:23px;font-weight:500;letter-spacing:-.5px}.modal-heading button{width:30px;height:30px;background:var(--panel);border-radius:50%}#modal-body textarea{font-size:17px;line-height:1.7;padding:17px;background:var(--panel);border-radius:10px}#modal-body .primary{background:var(--text);color:var(--bg);border-radius:8px;padding:12px 22px}.dialog-eyebrow{font:9px ui-monospace,monospace;letter-spacing:1.7px;color:var(--muted)}.drop-description{font-size:15px;line-height:1.8}.connection-preview{display:flex;align-items:center;gap:16px;padding:24px 0;margin:8px 0 20px}.connection-preview span:not(.preview-line){padding:13px 16px;border:1px solid var(--border);border-radius:9px;background:var(--panel);font-size:13px;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-line{color:var(--accent);font-size:24px;flex:1;text-align:center}.dialog-actions{justify-content:flex-end;padding-top:16px;border-top:1px solid var(--border)}.secondary{background:var(--panel);padding:12px 18px;border:1px solid var(--border)}
#empty-state>span{color:var(--text)}#empty-state h1{font-size:38px;letter-spacing:-1.5px;font-weight:400}#empty-state p{font-size:13px;line-height:1.8}#toast{background:var(--text);color:var(--bg);border-radius:9px;box-shadow:var(--shadow);font-size:12px;bottom:120px}
@media(min-width:701px) and (max-width:1100px){#sidebar{width:210px;margin:14px 0 14px 14px;padding:18px 14px}.topbar{padding:0 20px;gap:18px}.brand{min-width:185px}.document{padding-left:18px}.bottom-toolbar{gap:9px}.tool-group{order:1}.zoom-group{order:2}.tool-group button{min-width:36px;padding:7px 8px}.tool-group .tool-label{display:none}.header-actions .tool-label{display:inline}.side-intro p{font-size:17px}}
@media(max-width:700px){.topbar{height:72px;padding:0 14px;gap:12px}.brand{min-width:0}.brand-icon{width:29px;height:29px}.brand-icon svg{width:29px;height:29px}.document{border:0;padding:0;gap:2px}.document input{font-size:13px;margin:0}.document .document-eyebrow{font-size:7px;letter-spacing:1px}.document #save-status{font-size:9px}.header-actions{gap:2px}.header-actions button{height:36px;width:34px;min-width:34px;padding:8px}.header-actions .tool-label{display:none}.header-actions .primary{padding:8px;width:36px}.header-actions .ui-icon{width:17px;height:17px}.workspace{height:calc(100dvh - 72px)}#sidebar{position:absolute;left:0;top:0;bottom:0;width:248px;margin:12px;padding:20px;box-shadow:0 12px 70px #16211020}#inspector{top:auto;bottom:0;right:0;width:100%;max-height:70dvh;border-radius:20px 20px 0 0;padding:21px 24px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -10px 45px #15201020}.canvas-caption{left:22px;top:24px}.canvas-caption span:first-child{font-size:8px}.canvas-caption span:last-child{font-size:10px;max-width:80vw}.bottom-toolbar{bottom:calc(36px + env(safe-area-inset-bottom));padding:0 12px;gap:10px;flex-direction:column}.tool-group{order:2;padding:6px;border-radius:12px;gap:1px;max-width:100%;justify-content:center}.tool-group button{min-width:34px;width:34px;height:40px;padding:8px}.tool-group .separator{margin:0 3px}.tool-group .ui-icon{width:18px;height:18px}.zoom-group{order:1;align-self:flex-end;margin:0;padding:3px}.zoom-group button{height:30px}.canvas-footer{bottom:calc(12px + env(safe-area-inset-bottom));font-size:9px;gap:9px}#context-toolbar{top:77px;padding:4px;max-width:calc(100% - 20px)}#context-toolbar button{font-size:11px;padding:8px 7px;min-height:36px}#context-toolbar .delete-action{width:30px;padding:6px}.node.drop-target:after{font-size:13px;padding:10px 13px}#drop-hint{bottom:calc(145px + env(safe-area-inset-bottom))}dialog{padding:23px;max-height:85dvh}.modal-heading h2{font-size:21px}#empty-state h1{font-size:29px}#toast{bottom:calc(150px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media(max-width:360px){.tool-group button{width:30px;min-width:30px;padding:6px}.tool-group .separator{margin:0 2px}.tool-group{gap:0}.header-actions{gap:0}.header-actions button{width:30px;min-width:30px}.header-actions .primary{width:32px}.topbar{gap:8px;padding:0 10px}}

/* Compact chrome; contextual actions appear only on demand. */
.topbar{height:56px;padding:0 18px;gap:20px}.brand{min-width:140px}.brand-icon,.brand-icon svg{width:28px;height:28px}.brand small,.document-eyebrow{display:none}.document{flex:1;flex-direction:row;align-items:center;gap:12px}.document input{font-size:14px;max-width:340px}.document #save-status{white-space:nowrap;font-size:10px}.workspace{height:calc(100dvh - 56px)}
#context-toolbar{position:fixed;transform:none;z-index:80;width:202px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;flex-direction:column;align-items:stretch;gap:2px}#context-toolbar button{text-align:left;justify-content:flex-start;min-height:36px}#context-toolbar .separator{width:100%;height:1px}#context-toolbar .delete-action{width:100%}
.edge-hit{fill:none;stroke:transparent;stroke-width:16px;pointer-events:stroke;cursor:pointer;vector-effect:non-scaling-stroke}.edge.selected-relation{stroke:#668449;stroke-width:3}.edge-hit:focus{outline:none;stroke:#a8c97155}.color-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 16px}.color-palette button{height:32px;border:1px solid #c4cbbd;border-radius:7px}.box-mode,.box-mode .node{cursor:crosshair}.pan .node{cursor:grab}.tool-group #select-tool .tool-label,.tool-group #pan-tool .tool-label,.tool-group #multiselect-tool .tool-label{display:inline;font-size:10px;margin-left:5px}
@media(max-width:700px){.topbar{height:52px;padding:0 10px;gap:8px}.workspace{height:calc(100dvh - 52px)}.brand{min-width:0}.document{display:flex;flex-direction:column;align-items:flex-start;gap:0}.document input{font-size:12px;min-width:0}.document #save-status{font-size:8px}.tool-group #select-tool,.tool-group #pan-tool,.tool-group #multiselect-tool{height:46px;display:flex;flex-direction:column;gap:2px}.tool-group #select-tool .tool-label,.tool-group #pan-tool .tool-label,.tool-group #multiselect-tool .tool-label{margin:0;font-size:8px}.canvas-caption{top:12px}.canvas-caption span:last-child{max-width:90vw}.brand>span:last-child{display:none}}

.node.editing{z-index:3;cursor:text;user-select:text}.node .inline-editor{display:block;width:100%;min-width:0;resize:none;overflow:hidden;border:0;border-radius:0;padding:0;background:transparent;color:var(--node-text,var(--text));font-family:inherit;line-height:1.5;outline:none;box-shadow:none;user-select:text;touch-action:auto}.inline-actions{display:flex;justify-content:flex-end;gap:4px;margin-top:8px}.inline-actions button{font-size:10px;min-height:28px;padding:4px 8px;color:var(--node-text,var(--text));background:#88987916;border-radius:5px}.inline-actions button:last-child{background:var(--accent);color:white}

.relation-halo{fill:none;stroke:var(--canvas);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

.node .inline-editor{min-height:24px;max-height:35dvh;overflow:auto}.node.editing{min-height:0}@media(max-width:700px){.inline-actions button{min-height:36px;min-width:44px}}

.color-palette{grid-template-columns:repeat(3,1fr)}.color-palette .custom-color{background:conic-gradient(#f4d5bd,#ddf1bf,#cfeafa,#e7d8fa,#f4d5bd);color:#273d36;font-size:11px;font-weight:700}#inspector .button-row button[aria-pressed="true"]{background:var(--signal);color:#273d36}

.content-details{border:1px solid var(--border);border-radius:8px;padding:10px;margin:12px 0}.content-details summary{font-size:12px;cursor:pointer;color:var(--muted)}
#inspector .button-row button[aria-pressed="mixed"]{border-style:dashed;color:var(--muted)}

.node.ink-node{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;min-height:0}.ink-node svg{display:block;overflow:visible}.ink-node:not(.selected){outline:none}.drawing-mode .node{pointer-events:none}.drawing-mode{cursor:crosshair}#ink-preview{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none;z-index:4}#ink-controls{position:absolute;top:65px;left:24px;z-index:6;display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:11px}#ink-controls label{display:flex;align-items:center;gap:5px}#ink-controls input[type=color]{width:30px;height:28px;padding:0}#ink-controls input[type=range]{width:70px}#ink-controls input[type=checkbox]{width:auto}
@media(max-width:700px){.tool-group{max-width:calc(100vw - 20px);overflow-x:auto;justify-content:flex-start}.tool-group button{flex-shrink:0}#ink-controls{left:10px;top:60px;max-width:calc(100% - 20px);gap:8px;flex-wrap:wrap}}

#print-pages{display:none}@media print{@page{size:A4 landscape;margin:10mm}body:has(#print-pages)>*:not(#print-pages){display:none!important}body #print-pages{display:block!important}.print-page{position:relative;width:277mm;height:190mm;overflow:hidden;break-after:page}.print-page:last-child{break-after:auto}.print-page small{position:absolute;right:0;bottom:0;background:#fff;color:#333;font-size:8pt}}

@media print{html,body{height:auto!important;overflow:visible!important}#print-pages{position:static!important}}

/* Keep controls within the available canvas and panel headers outside scrolling content. */
.bottom-toolbar{min-width:0;max-width:100%}.tool-group{min-width:0;max-width:100%;overflow-x:auto;justify-content:flex-start;overscroll-behavior-x:contain;touch-action:pan-x}.tool-group button,.tool-group .separator{flex-shrink:0}
#inspector{display:flex;flex-direction:column;overflow:hidden;padding:0;z-index:40}#inspector>.side-heading{flex-shrink:0;margin:0;padding:16px 18px;border-bottom:1px solid var(--border)}#close-inspector{width:44px;height:44px;flex-shrink:0}#inspector-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 18px 24px}
dialog[open]{display:flex;flex-direction:column;overflow:hidden}.modal-heading{flex-shrink:0}#modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:700px){.bottom-toolbar{position:fixed;left:0;right:0;z-index:25;padding:0 max(10px,env(safe-area-inset-left)) 0 max(10px,env(safe-area-inset-right));max-width:100vw}.tool-group{width:100%;max-width:100%;justify-content:flex-start}#sidebar{bottom:155px;max-width:calc(100vw - 24px)}#inspector{padding:0;max-height:70dvh}#inspector-content{padding-bottom:calc(24px + env(safe-area-inset-bottom))}}

/* Scroll tools independently from the persistent More action. */
.tool-group{overflow:hidden;touch-action:auto}.tool-scroll{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x;flex:1}.tool-group>#selection-settings{flex:0 0 44px;width:44px;min-width:44px;margin-left:4px;border-left:1px solid #48503e;border-radius:0 8px 8px 0;background:#23271f;height:46px}.tool-group>#selection-settings:hover{background:#353c2d}
#sidebar{overflow:hidden;min-height:0}#sidebar>.side-heading{flex-shrink:0;margin-bottom:12px}#close-sidebar{width:44px;height:44px;flex-shrink:0}.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;display:flex;flex-direction:column}#outline{flex:1 0 auto;overflow:visible}.sidebar-scroll>.search,.sidebar-scroll>.side-intro,.sidebar-scroll>.sidebar-footer{flex-shrink:0}

@media(max-width:700px){.tool-group button{height:46px;display:flex;align-items:center;justify-content:center}.tool-scroll{align-items:center}.tool-group .ui-icon{display:block;flex-shrink:0}}
@media(max-width:700px){.tool-group #select-tool .tool-label,.tool-group #pan-tool .tool-label,.tool-group #multiselect-tool .tool-label{display:none}}

.brand>span:last-child{font-size:15px;letter-spacing:1.5px}@media(max-width:700px){.brand>span:last-child{display:none}}

/* Approved themes: tokens come from appearance.js, shared with export. */
@font-face{font-display:swap;font-family:Inter;src:url('/assets/yohaku/Inter-variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif}
body[data-dark=true]{color-scheme:dark}body[data-dark=false]{color-scheme:light}
.brand,body.dark .brand{min-width:184px;flex-shrink:0;letter-spacing:0;padding:0;background:transparent;border-radius:0;gap:9px}
.brand-symbol{display:block;width:38px;height:26px;object-fit:contain}.brand>.brand-wordmark{font:450 17px Inter,sans-serif;letter-spacing:.025em;color:var(--text)}
#canvas{background:var(--paper-color,var(--canvas));isolation:isolate}
#canvas:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--paper-texture);background-size:240px 240px;opacity:var(--texture-opacity,.24)}
.node:not(.ink-node),body.dark .node:not(.ink-node){border-radius:var(--theme-radius);border-color:var(--border);box-shadow:0 3px 9px #00000004}
.node:not(.ink-node){z-index:2}.node.ink-node{z-index:0}.node.dragging{z-index:10}#connections{z-index:1}
body[data-theme=ink] .node:not(.ink-node){border-radius:3px 7px 2px 6px;box-shadow:1px 3px 0 #635e4610}
body[data-theme=ink] .node.root,body[data-theme=ink] .node[data-heading=true]{font-family:'Songti TC','Noto Serif TC','PMingLiU',serif}
body[data-theme=tech] .node:not(.ink-node){box-shadow:3px 3px 0 #377c9610}
body[data-theme=ink] :is(.tool-group,dialog,#sidebar,#inspector,button),body[data-theme=tech] :is(.tool-group,dialog,#sidebar,#inspector,button){border-radius:4px}
.node.selected{outline-color:var(--accent)}.node.drop-target{outline-color:var(--accent)}
.edge{stroke:var(--line);stroke-width:1.65}.relation,.arrow-tail{stroke:var(--relation);color:var(--relation)}#arrow path{stroke:var(--relation)}
.relation-halo,.edge-label{stroke:var(--paper-color,var(--canvas))}.edge.selected-relation{stroke:var(--accent)}
.tool-group,.tool-group>#selection-settings{background:#222624;border-color:#4C564A}.tool-group button{color:#DCE3D6}.tool-group button:hover,.tool-group>#selection-settings:hover{background:#3A4239}.tool-group button.active{background:var(--soft);color:var(--accent);box-shadow:none}.tool-group .separator{background:#51564D}
body[data-theme=tech] .tool-group,body[data-theme=tech] .tool-group>#selection-settings{background:#172C38}
.outline-row.selected,.outline-row.selected:hover{background:var(--soft);color:var(--accent)}.live-dot{background:var(--accent)}
#ink-controls select{width:auto;padding:5px;font-size:12px}#ink-controls{max-width:calc(100% - 32px);flex-wrap:wrap}#ink-controls label{white-space:nowrap}
#modal-body input[type=color]{min-height:40px}.paper-colors{display:flex;gap:12px;margin:12px 0}.paper-swatch{width:36px;height:36px;border:1px solid var(--border);border-radius:50%!important;padding:0}.paper-swatch[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:3px}
.appearance-preview{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--border);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:12px;align-items:center;color:var(--text)}.appearance-preview:before{content:'';position:absolute;inset:0;background-image:var(--preview-texture);background-size:240px;opacity:var(--texture-opacity);z-index:-1}.preview-node{padding:14px 18px;border:1px solid var(--border);outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--theme-radius);background:var(--surface);color:var(--text)}.appearance-preview[data-theme=ink] .preview-node{font-family:'Songti TC','Noto Serif TC',serif}.preview-note{font-size:11px;color:var(--muted)}.appearance-apply{margin-top:18px;width:100%}
@media(max-width:700px){.brand,body.dark .brand{min-width:0;padding:0}.brand>.brand-wordmark{display:none}.brand-symbol{width:32px}.topbar{gap:7px}.header-actions button{width:30px;min-width:30px;padding:6px}.header-actions{gap:0}.document{min-width:0}.document input{width:100%}#ink-controls{left:10px;max-width:calc(100% - 20px);gap:7px}.canvas-caption span:last-child{max-width:calc(100vw - 44px)}}
/* Keep the document name readable on mid-width screens and dark editing controls. */
.document{flex-direction:column;align-items:flex-start;gap:1px;min-width:0}.document input{min-width:0;width:100%;max-width:440px}.document #save-status{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.inline-actions button:last-child{background:var(--text);color:var(--surface)}#inspector .button-row button[aria-pressed=true]{background:var(--soft);color:var(--text)}
.node.editing{z-index:3}.node.ink-node.selected{z-index:0}#ink-preview.highlighter{z-index:0}
body[data-theme=ink] .collapse-node{border-radius:50%}
/* Collaboration stays outside the drawing surface's tool hit areas. */
#collab-status{position:absolute;top:48px;right:18px;max-width:min(340px,80%);padding:7px 12px;border:1px solid var(--border);border-radius:20px;background:var(--panel,#fff);color:var(--text);font-size:12px;pointer-events:none;z-index:4}
.remote-cursor{position:absolute;pointer-events:none;z-index:25;white-space:nowrap;color:#a74c57;font:600 12px Inter,sans-serif;transform:translate(0,-4px);background:var(--panel,#fff);padding:3px 7px;border-radius:6px}
.collab-member{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 0;border-bottom:1px solid var(--border)}
.collab-member span{flex:1;min-width:100px}.collab-check{display:flex;gap:8px;align-items:center;margin:16px 0}.collab-check input{width:auto}
#modal-body>input,#collab-live>input{width:100%;margin:6px 0;min-height:44px}
@media(max-width:700px){#collab-btn{min-width:44px;padding:8px;font-size:12px}#collab-status{top:42px;right:10px;font-size:11px;max-width:85%}.header-actions{gap:2px}.collab-member button{min-height:44px}}
@media(max-width:700px){.header-actions #collab-btn{width:auto;min-width:52px;white-space:nowrap;padding:6px}.document{flex:1 1 60px}.header-actions{flex-shrink:0}#collab-status{max-width:75%}}

/* Cards and ink share document order; selection does not silently raise content. */
.node:not(.ink-node),.node.ink-node,.node.ink-node.selected,.node.editing,.node.dragging{z-index:auto}#nodes{position:absolute;z-index:2}#connections{z-index:1}#ink-preview,#ink-preview.highlighter{z-index:3}
.crop-editor-stage{position:relative;width:100%;height:min(42dvh,360px);min-height:190px;margin:16px 0;overflow:hidden;background:#161917;touch-action:none;user-select:none;border-radius:10px;isolation:isolate}.crop-editor-stage>img{position:absolute;max-width:none;max-height:none;pointer-events:none}.crop-frame{position:absolute;border:2px solid white;box-shadow:0 0 0 1000px #0008;pointer-events:none}.crop-frame:before,.crop-frame:after{content:'';position:absolute;pointer-events:none}.crop-frame:before{inset:33.333% 0;border-block:1px solid #ffffff75}.crop-frame:after{inset:0 33.333%;border-inline:1px solid #ffffff75}.crop-frame .crop-corner{position:absolute;width:36px;height:36px;padding:0;pointer-events:auto;background:transparent;border:0;border-radius:0;touch-action:none}.crop-corner:after{content:'';position:absolute;inset:10px;border:3px solid white;background:#243a2a;border-radius:4px}.crop-corner.nw{left:-19px;top:-19px;cursor:nwse-resize}.crop-corner.ne{right:-19px;top:-19px;cursor:nesw-resize}.crop-corner.sw{left:-19px;bottom:-19px;cursor:nesw-resize}.crop-corner.se{right:-19px;bottom:-19px;cursor:nwse-resize}.crop-frame .crop-move{position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:10px;padding:4px 10px;color:white;background:#26382c;pointer-events:auto;cursor:move;touch-action:none}
/* Transparent ink bounds must not block cards underneath. */
.node.ink-node{pointer-events:none}.ink-node svg path{pointer-events:visiblePainted}.ink-node .resize-handle{pointer-events:auto}.drawing-mode .ink-node svg path{pointer-events:none}
.invite-qr{display:block;width:220px;height:220px;max-width:100%;margin:12px auto;background:white;border-radius:10px}.join-notice{position:fixed;top:80px;right:16px;z-index:35;background:var(--text);color:var(--bg);box-shadow:var(--shadow);min-height:44px}.join-gate #world,.join-gate .document,.join-gate .bottom-toolbar,.join-gate #sidebar{visibility:hidden}dialog{max-height:calc(var(--keyboard-height,100dvh) - 24px)}#modal-body{touch-action:pan-y}#modal-body input{scroll-margin-block:24px}.collab-check{gap:10px;align-items:center}.collab-check input{width:auto;flex:none}
@media(max-width:700px){.topbar{height:98px;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:42px 38px;gap:0 8px;padding:7px 12px}.brand{grid-column:1;grid-row:1}.document{grid-column:2;grid-row:1;min-width:0;width:100%;padding:0}.document input{max-width:100%;font-size:13px}.document #save-status{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{grid-column:1 / -1;grid-row:2;justify-content:flex-end;width:100%;min-width:0}.workspace{height:calc(100dvh - 98px)}.join-notice{top:106px;right:12px}dialog{margin-top:12px;margin-bottom:auto;top:0}#modal-body input{font-size:16px}}

#canvas.temporary-pan,#canvas.temporary-pan .node,#canvas.temporary-pan .edge-hit{cursor:grab!important}
#canvas.temporary-pan:active,#canvas.temporary-pan:active .node{cursor:grabbing!important}

/* Header rows size to their content, including iOS font scaling and safe areas. */
body{height:100dvh;display:flex;flex-direction:column}.topbar{flex:none}.workspace{flex:1;min-height:0;height:auto}
@media(max-width:700px){.topbar{height:auto;min-height:108px;grid-template-rows:minmax(54px,auto) 40px;align-items:center;padding:calc(6px + env(safe-area-inset-top)) 12px 8px}.document{align-self:center;min-height:0;overflow:hidden;gap:3px}.document input{height:25px;line-height:25px;margin:0;font-size:16px}.document #save-status{display:block;position:static;font-size:10px;line-height:15px;max-width:100%}.header-actions{align-self:stretch;overflow-x:auto;justify-content:flex-end;max-width:100%;gap:3px}.header-actions button{flex-shrink:0}.workspace{height:auto}.join-notice{top:calc(114px + env(safe-area-inset-top))}}
.qr-camera{display:block;width:100%;max-height:45dvh;aspect-ratio:1;object-fit:cover;background:#1e2924;border-radius:14px}.qr-file{display:block;margin-top:16px;font-size:14px}.qr-file input{display:block;margin-top:8px}
/* Compact workspace chrome. The title belongs to the canvas, never under header actions. */
.topbar{height:auto;min-height:58px;display:flex;flex-wrap:wrap;padding:8px 20px;gap:10px}.topbar .brand{min-width:0;margin-right:8px}.header-session{display:flex;align-items:center;gap:6px;min-width:0;flex:1}.header-session #collab-status{position:static;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 8px;font-size:11px}.header-actions{width:auto;flex:none;gap:3px}#language{width:105px;flex:none;padding:8px 5px;font-size:12px;min-height:36px}.canvas-caption{pointer-events:none;right:22px;max-width:calc(100% - 44px)}.canvas-caption .document{pointer-events:auto;width:min(420px,100%);padding:0;border:0;gap:3px}.project-title-row{display:flex;align-items:center;width:100%;gap:4px}.project-title-row #title{font-size:16px;line-height:24px;min-width:0;width:100%;max-width:none;text-overflow:ellipsis;background:var(--canvas)}#rename-project{flex:none;width:36px;height:36px;padding:8px}.canvas-caption #save-status{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;background:var(--canvas)}#mode-hint{display:none}.side-intro{margin:16px 0}.side-intro p{font-size:14px;line-height:1.6;margin-top:7px}.outline-kicker{font-size:9px;letter-spacing:1.2px}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.template-card{border:1px solid var(--border);padding:18px;text-align:left;white-space:normal;min-height:130px}.template-icon{display:block;font-size:25px;color:var(--accent);margin-bottom:12px}.template-card small{display:block;color:var(--muted);font-size:12px;margin-top:8px;line-height:1.5}.join-gate .canvas-caption{visibility:hidden}
@media(max-width:1050px){.brand>.brand-wordmark{display:none}.topbar .brand{margin-right:0}.header-session #collab-status{max-width:160px}.header-actions .tool-label{display:none}}
@media(max-width:700px){.topbar{display:grid;grid-template-columns:32px minmax(0,1fr) 100px;grid-template-rows:auto auto;min-height:0;padding:calc(5px + env(safe-area-inset-top)) 10px 5px;gap:3px 6px}.brand{grid-column:1;grid-row:1}.header-session{grid-column:2;grid-row:1;overflow:hidden;gap:2px}.header-session #collab-btn{padding:6px;font-size:12px;flex:none;min-width:0}.header-session #collab-status{font-size:10px;padding:3px 4px;max-width:100%;min-width:0;border:0}#language{grid-column:3;grid-row:1;width:100%;font-size:12px}.header-actions{grid-column:1/-1;grid-row:2;justify-content:flex-end;overflow:visible;width:100%;height:34px;gap:6px}.header-actions button{height:32px}.workspace{height:auto}.canvas-caption{top:10px;left:14px;right:14px;max-width:calc(100% - 28px)}.canvas-caption .document{width:100%;max-width:100%;overflow:visible}.project-title-row #title{font-size:16px}.canvas-caption .document #save-status{font-size:10px;line-height:15px}.bottom-toolbar{bottom:calc(8px + env(safe-area-inset-bottom));gap:4px}.bottom-toolbar .tool-group{order:1}.bottom-toolbar .zoom-group{order:2;align-self:flex-end;padding:0 3px;box-shadow:none;border-radius:8px}.zoom-group button{height:30px;min-width:30px;padding:4px}.zoom-group #fit{width:32px;padding-left:5px;margin-left:0}.zoom-group #zoom-label{min-width:39px}.canvas-footer{bottom:calc(16px + env(safe-area-inset-bottom));left:12px;right:auto;font-size:9px;gap:4px}.canvas-footer span:nth-of-type(n+2),.canvas-footer i{display:none}.join-notice{top:calc(88px + env(safe-area-inset-top))}.template-card{padding:13px}.template-grid{gap:8px}#ink-controls{top:76px}}