:root{color-scheme:light;--bg: #faf9f7;--ink: #1d1d1b;--muted: #8c8a85;--line: #e9e6e1;--hover: #f0eeea;--surface: #ffffff;--shadow: 0 8px 30px rgba(30, 28, 24, .1);--root: #1d1d1b;--on-root: #faf9f7;--on: #ffffff;--b1: #6b6f78;--b1t: #f0f0f1;--b2: #3166c4;--b2t: #e9effa;--b3: #cc6a2c;--b3t: #fbeee4;--b4: #2e8160;--b4t: #e5f3ec;--b5: #7d50b8;--b5t: #f1eafa;--b6: #c23b33;--b6t: #fbe8e6;--b7: #c2477f;--b7t: #fbe8f1;--b8: #1f8a99;--b8t: #e2f3f5;--b9: #b38710;--b9t: #f8f0d9;--serif: Georgia, "Iowan Old Style", "Times New Roman", serif;--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg: #171716;--ink: #ebe9e4;--muted: #8b8984;--line: #2a2928;--hover: #222120;--surface: #1f1e1d;--shadow: 0 10px 34px rgba(0, 0, 0, .5);--root: #ebe9e4;--on-root: #171716;--on: #141413;--b1: #a3a7b0;--b1t: #242527;--b2: #7ea4ec;--b2t: #1b2436;--b3: #ec9a5f;--b3t: #33241a;--b4: #5fc296;--b4t: #172d24;--b5: #b996ee;--b5t: #2a2138;--b6: #ee8179;--b6t: #361e1c;--b7: #ee8db8;--b7t: #36202b;--b8: #5fc6d3;--b8t: #172d31;--b9: #e2c05a;--b9t: #322a14}}:root[data-theme=dark]{color-scheme:dark;--bg: #171716;--ink: #ebe9e4;--muted: #8b8984;--line: #2a2928;--hover: #222120;--surface: #1f1e1d;--shadow: 0 10px 34px rgba(0, 0, 0, .5);--root: #ebe9e4;--on-root: #171716;--on: #141413;--b1: #a3a7b0;--b1t: #242527;--b2: #7ea4ec;--b2t: #1b2436;--b3: #ec9a5f;--b3t: #33241a;--b4: #5fc296;--b4t: #172d24;--b5: #b996ee;--b5t: #2a2138;--b6: #ee8179;--b6t: #361e1c;--b7: #ee8db8;--b7t: #36202b;--b8: #5fc6d3;--b8t: #172d31;--b9: #e2c05a;--b9t: #322a14}*{box-sizing:border-box}html,body{height:100%}body{margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font:14px/1.4 var(--sans);-webkit-font-smoothing:antialiased}[hidden]{display:none!important}button,textarea{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--b2);outline-offset:2px;border-radius:6px}#app{display:flex;flex-direction:column;height:100dvh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px;padding:0 12px 0 20px;flex:none}.title{display:flex;align-items:baseline;gap:10px;min-width:0}.mark{font:400 22px/1 var(--serif);color:var(--muted);transform:translateY(2px)}.doc-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:550}.doc-state{flex:none;color:var(--muted);font-size:12.5px}.actions{display:flex;align-items:center;gap:2px;flex:none}.btn{height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:13.5px;transition:background-color .12s,color .12s}.btn:hover,.btn[aria-expanded=true],.btn[aria-pressed=true]{background:var(--hover);color:var(--ink)}.btn.icon{display:grid;place-items:center;width:32px;padding:0}.btn.icon svg{width:16px;height:16px}.btn.solid{background:var(--ink);color:var(--bg);padding:0 16px}.btn.solid:hover{opacity:.85;background:var(--ink);color:var(--bg)}.menu-wrap{position:relative}.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:220px;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}.menu-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 10px;border:0;border-radius:6px;background:transparent;text-align:left}.menu-item span{color:var(--muted);font-size:12px}.menu-item:hover{background:var(--hover)}.menu-sep{height:1px;margin:5px 6px;background:var(--line)}.workspace{--split: 38%;position:relative;display:flex;flex:1;min-height:0;border-top:1px solid var(--line)}.editor-pane{display:flex;flex:none;width:var(--split);min-width:240px}#editor{flex:1;width:100%;padding:24px 24px 40vh;border:0;outline:none;resize:none;background:transparent;font:13.5px/1.75 var(--mono);tab-size:2}#editor::placeholder{color:var(--muted)}.splitter{position:relative;flex:none;width:1px;background:var(--line);cursor:col-resize}.splitter:after{content:"";position:absolute;inset:0 -5px}.splitter:hover,.splitter.dragging{background:var(--muted)}.canvas{position:relative;flex:1;min-width:0;overflow:auto;padding:48px 56px 96px;cursor:grab}.canvas.panning{cursor:grabbing;user-select:none}#scheme{display:flex;justify-content:safe center;min-width:max-content}.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;cursor:default}.empty-title{margin:0;font:400 22px/1.3 var(--serif)}.empty-sub{margin:0 0 18px;color:var(--muted)}.link{margin-top:14px;padding:4px;border:0;background:none;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}.link:hover{color:var(--ink)}kbd{padding:1px 5px;border:1px solid var(--line);border-radius:4px;font:12px var(--sans)}.zoom{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:var(--shadow)}.zoom button{height:28px;min-width:28px;padding:0 6px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}.zoom #zoom-value{min-width:52px;font-size:12.5px}.zoom button:hover{background:var(--hover);color:var(--ink)}.btn#btn-help{font:500 14px var(--serif)}.help{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}.help::backdrop{background:#14121059}.help h2{margin:0 0 8px;font:400 21px/1.3 var(--serif)}.help p{margin:0 0 16px;color:var(--muted);line-height:1.55}.help code{font:12.5px var(--mono)}.help pre{max-height:46vh;overflow:auto;margin:0 0 18px;padding:14px 16px;border-radius:10px;background:var(--bg);font:12.5px/1.6 var(--mono);white-space:pre-wrap}.help-actions{display:flex;justify-content:flex-end;gap:8px}.toast{position:fixed;left:50%;bottom:24px;z-index:40;transform:translate(-50%);max-width:calc(100vw - 32px);padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:13px;box-shadow:var(--shadow);animation:toast-in .16s ease-out}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,6px)}}.drop{position:fixed;inset:10px;z-index:50;display:grid;place-items:center;border:2px dashed var(--muted);border-radius:16px;background:color-mix(in srgb,var(--bg) 88%,transparent);font:400 22px var(--serif);pointer-events:none}@media(max-width:720px){.topbar{padding:0 6px 0 14px}.btn{padding:0 9px}.mark{display:none}.canvas{padding:24px 20px 96px}.editor-pane{position:absolute;inset:0;z-index:10;width:auto;background:var(--bg)}.splitter{display:none}#editor{padding:18px 16px 40vh}}@media print{.topbar,.zoom,.editor-pane,.splitter{display:none!important}}.scheme{--hook-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M22 1Q11 1 11 12V16' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");--hook-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M11 0V4Q11 15 22 15' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");--mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 32'%3E%3Cpath d='M11 0V9Q11 16 1 16Q11 16 11 23V32' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");display:inline-block;min-width:max-content;padding:2px;color:var(--ink);font:14px/1.4 var(--sans)}.scheme .n{--c: var(--root);--t: var(--bg);display:flex;align-items:center}.scheme .n.b1{--c: var(--b1);--t: var(--b1t)}.scheme .n.b2{--c: var(--b2);--t: var(--b2t)}.scheme .n.b3{--c: var(--b3);--t: var(--b3t)}.scheme .n.b4{--c: var(--b4);--t: var(--b4t)}.scheme .n.b5{--c: var(--b5);--t: var(--b5t)}.scheme .n.b6{--c: var(--b6);--t: var(--b6t)}.scheme .n.b7{--c: var(--b7);--t: var(--b7t)}.scheme .n.b8{--c: var(--b8);--t: var(--b8t)}.scheme .n.b9{--c: var(--b9);--t: var(--b9t)}.scheme .t{position:relative;margin:0;overflow-wrap:anywhere;text-wrap:pretty}.scheme .t em{font-style:italic}.scheme .t strong{font-weight:700}.scheme .n.has-children>.t:after{content:"";position:absolute;left:100%;top:50%;width:12px;height:2px;margin-top:-1px;background:var(--c)}.scheme .k{position:relative;display:flex;flex-direction:column;gap:6px;margin-left:12px;padding-left:36px;min-height:64px;justify-content:center}.scheme .k:before{content:"";position:absolute;left:0;top:0;bottom:0;width:22px;background:var(--c);-webkit-mask:var(--hook-top) 0 0 / 22px 16px no-repeat,var(--hook-bot) 0 100% / 22px 16px no-repeat,var(--mid) 0 50% / 22px 32px no-repeat,linear-gradient(#000,#000) left 10px top 15px / 2px calc(50% - 30px) no-repeat,linear-gradient(#000,#000) left 10px bottom 15px / 2px calc(50% - 30px) no-repeat;mask:var(--hook-top) 0 0 / 22px 16px no-repeat,var(--hook-bot) 0 100% / 22px 16px no-repeat,var(--mid) 0 50% / 22px 32px no-repeat,linear-gradient(#000,#000) left 10px top 15px / 2px calc(50% - 30px) no-repeat,linear-gradient(#000,#000) left 10px bottom 15px / 2px calc(50% - 30px) no-repeat}.scheme .k.single{min-height:0;padding-left:20px}.scheme .k.single:before{width:16px;-webkit-mask:linear-gradient(#000,#000) 0 50% / 16px 2px no-repeat;mask:linear-gradient(#000,#000) 0 50% / 16px 2px no-repeat}.scheme .l0>.t{max-width:200px;padding:14px 18px;border-radius:6px;background:var(--root);color:var(--on-root);font:700 18px/1.2 var(--serif)}.scheme .l1>.t{max-width:210px;padding:10px 14px;border-radius:6px;background:var(--c);color:var(--on);font-weight:700;font-size:14.5px}.scheme .l2>.t{max-width:220px;padding:7px 11px;border-radius:6px;background:var(--t);border:1.5px solid var(--c);font-weight:600;font-size:13px}.scheme .leaf{min-height:34px}.scheme .leaf>.t{max-width:360px;padding:3px 0;font-size:13px}.scheme .leaf.parent-leaf>.t{font-weight:600}.scheme .leaf>.t:before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--c);vertical-align:1px}