:root{color-scheme:light;--ink: #1a1a1a;--faint: #666;--line: #ddd;--accent: #2f6fed;--selection: #2f6fed;--pane: #f8f8f9}*{box-sizing:border-box}body{margin:0;padding:2rem 0 6rem;font:16px/1.55 ui-sans-serif,system-ui,sans-serif;color:var(--ink)}header,.demo-title{padding:0 2rem}header p{max-width:760px;color:var(--faint)}h1{font-size:1.6rem}.demo{margin-top:3rem}.demo-title{font-size:1.15rem;margin:0 0 .5rem}pre{background:#f6f6f6;border:1px solid var(--line);border-radius:6px;padding:.6rem .8rem;overflow-x:auto;font-size:.8rem}.panels{display:grid;grid-template-columns:var(--columns, minmax(0, 1fr) 1px minmax(0, 2fr));grid-template-rows:minmax(0,1fr);margin-top:2rem;border-bottom:1px solid var(--line);resize:vertical;overflow:hidden;min-height:12rem}.panel.example{position:relative}.panels.solo{grid-template-columns:minmax(0,1fr);resize:none;overflow:visible}.panels.solo .panel.example .panel-body{position:static}.panels.placeholder{grid-template-columns:minmax(0,1fr);resize:none;overflow:visible;background:var(--pane)}.placeholder-note{display:flex;flex-direction:column;gap:.5rem;padding:1rem 2rem;font-size:.85rem;color:var(--faint)}.placeholder-slow{max-width:40rem;font-size:.8rem}.panels.placeholder pre{margin:0;max-width:60rem;white-space:pre-wrap;color:#c62828}.panel.example .panel-body{position:absolute;top:1.55rem;left:0;right:0;bottom:0}.panel{display:flex;flex-direction:column;min-width:0;min-height:0}.panel h3{display:flex;align-items:baseline;justify-content:space-between;margin:0;padding:0 1rem .4rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}.demo-title .reset{margin-left:.75rem;border:none;background:transparent;padding:0;font:inherit;font-size:.75rem;font-weight:500;color:var(--faint);cursor:pointer;vertical-align:middle}.demo-title .reset:hover{color:var(--accent)}.panel.example h3,.panel.example .panel-body{padding-left:2rem}.panel-body{flex:1;min-height:0;overflow:auto;border-top:1px solid var(--line);padding:1rem;background:var(--pane)}.divider{position:relative;z-index:1;margin-top:1.55rem;background:var(--line);cursor:col-resize}.divider:before{content:"";position:absolute;inset:0 -3px;cursor:col-resize}body.dragging{cursor:col-resize;user-select:none}.panel.context .panel-body{padding:0}.windows{max-width:48rem;padding:1rem;font-size:.8rem}.window-body{flex:1;min-height:0;overflow:hidden}.strip{display:flex;align-items:stretch;width:100%;height:100%;transform:translate(calc(var(--behind, 0) * -50%));transition:transform .25s ease}.strip>*{flex:none;width:50%;min-width:0;transition:width .25s ease}.strip.single>*{width:100%}.strip>.entries{overflow:auto;border-right:1px solid var(--line)}@media(prefers-reduced-motion:reduce){.strip,.strip>*{transition:none}}.tree-item.walked,.tree-item.walked:hover,.tree-item.inherited.walked{background:#e2e2e5}.tree-more{flex:none;color:var(--faint);font-size:.9rem;line-height:1}.tree-item.selected .tree-more{color:#fff}.window{position:relative;display:flex;flex-direction:column;height:var(--height, 250px);border:1px solid #d0d0d0;border-radius:10px;background:#fff;box-shadow:0 1px 2px #0000000f,0 8px 24px #00000014;overflow:hidden}.titlebar{display:flex;align-items:center;justify-content:space-between;gap:.4rem;height:2rem;padding:0 .5rem 0 .75rem;flex:none;background:linear-gradient(#f4f4f4,#e8e8e8);border-bottom:1px solid #d4d4d4;cursor:default;user-select:none}.window.folded{height:auto}.window-grip{position:absolute;left:0;right:0;bottom:-3px;height:7px;cursor:ns-resize;z-index:1}body.resizing{cursor:ns-resize;user-select:none}.window-row{display:flex;align-items:flex-start;min-width:0}.window-row>.window{flex:1;min-width:0}.procs{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;width:var(--gutter);padding-top:.35rem;flex:none}.proc{position:relative;display:flex;align-items:center;gap:.3rem;margin-left:1.1rem;padding:.15rem .55rem;font:inherit;font-size:.7rem;color:var(--ink);border:1px solid var(--line);border-radius:99px;background:#fff;cursor:pointer;white-space:nowrap}.proc:before{content:"";position:absolute;left:-1.1rem;top:50%;width:1.1rem;height:1px;background:#c8c8cc}.proc.focused{border-color:var(--accent);color:var(--accent)}.proc.linked:before{display:none}.proc-lines{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:40}.proc-lines path{stroke:#c8c8cc;stroke-width:1.2;fill:none;stroke-linecap:round}.proc-lines .focused path{stroke:var(--accent)}.window.folded .titlebar{border-bottom:none}.fold{flex:none;display:grid;place-items:center;width:1.4rem;height:1.4rem;padding:0;border:none;border-radius:4px;background:transparent;color:inherit;cursor:pointer}.fold:hover{background:#00000014}.fold-icon{--icon: currentColor;width:.85rem;height:.85rem;fill:none;stroke-width:1.6}.window-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;font-weight:600;color:#444}.crumbbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;height:1.6rem;padding:0 .5rem 0 .6rem;flex:none;background:#fafafa;border-bottom:1px solid var(--line);user-select:none}.crumbs{display:flex;align-items:center;gap:.3rem;min-width:0;overflow:hidden;font-size:.75rem;white-space:nowrap}.crumb-url{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;color:var(--faint)}.crumb{flex:none;padding:0 .15rem;border:none;border-radius:3px;background:none;font:inherit;font-weight:600;color:var(--faint);cursor:pointer}.crumb:hover{background:#0000000f;color:#444}.crumb.current{color:#444;cursor:default}.crumb-sep{flex:none;color:var(--faint)}.window-count{margin-left:auto;font-size:.65rem;color:var(--faint);white-space:nowrap}.folder-node{--tick: 1rem;--gutter: 6.5rem;min-width:0}.folder-node+.folder-node{margin-top:.9rem}.folder-children{position:relative;margin-left:1rem;padding-left:var(--tick);padding-top:.9rem}.folder-children:not(:has(>.folder-node)){display:none}.folder-children>.folder-node{position:relative}.folder-children>.folder-node:before{content:"";position:absolute;left:calc(-1 * var(--tick));top:-.9rem;bottom:0;border-left:1px solid #c8c8cc}.folder-children>.folder-node:last-child:before{bottom:auto;height:1.9rem}.folder-children>.folder-node:after{content:"";position:absolute;left:calc(-1 * var(--tick));top:1rem;width:calc(var(--tick) - 1px);border-top:1px solid #c8c8cc}.tree-item{display:flex;align-items:center;gap:.4rem;padding:.25rem .75rem;cursor:default;white-space:nowrap;user-select:none}.tree-item:hover{background:#f3f3f3}.tree-item.selected,.tree-item.selected:hover,.tree-item.inherited.selected,.tree-item.inherited.selected:hover{background:var(--selection);color:#fff}.tree-item.selected code,.tree-item.selected .url,.tree-item.selected .dom-tag,.tree-item.selected .dom-attr,.tree-item.selected .dom-value,.tree-item.selected i{color:#fff}.tree-item.selected .icon{--icon: white;--icon-fill: rgba(255, 255, 255, .25)}.tree-item.inherited{background:#f7f7f8}.tree-item.inherited:hover{background:#efeff1}.window:not(.focused) .tree-item.selected,.window:not(.focused) .tree-item.selected:hover{background:#e2e2e5;color:var(--ink)}.window:not(.focused) .tree-item.selected code,.window:not(.focused) .tree-item.selected .url,.window:not(.focused) .tree-item.selected i{color:var(--faint)}.window:not(.focused) .tree-item.selected .icon{--icon: #6b7280;--icon-fill: #f3f4f6}.window.focused .titlebar{background:linear-gradient(#eef3fd,#e0e9fb)}.tree-item.origin,.tree-item.twin,.window:not(.focused) .tree-item.selected.twin{background:#dbe7fd;color:var(--ink)}.tree-item.twin .url{color:var(--accent)}.tree-name{flex:none;max-width:70%;overflow:hidden;text-overflow:ellipsis}.tree-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right;color:var(--faint)}.tree-value code{font-size:.72rem}.folder-view{font-size:.78rem}.folder-row{display:flex;align-items:center;gap:.4rem;padding:.2rem .25rem .2rem calc(.25rem + var(--depth, 0) * .9rem);white-space:nowrap;user-select:none}.folder-row.foldable{cursor:default}.folder-row:hover{background:#f3f3f3}.icon{--icon: #6b7280;--icon-fill: #f3f4f6;flex:none;width:1rem;height:1rem;fill:var(--icon-fill);stroke:var(--icon);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}.file-icon .corner{fill:none}.preview{display:flex;flex-direction:column;overflow:hidden;background:#fafafa}.preview-head{flex:none;display:flex;align-items:center;gap:.4rem;padding:.5rem .75rem .4rem;border-bottom:1px solid var(--line)}.preview-body{flex:1;min-height:0;overflow:auto;padding:.4rem .75rem .5rem}.preview-path{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.preview-where{font-size:.7rem;color:var(--faint);white-space:nowrap}.preview-from{padding:0;border:none;background:none;font:inherit;font-weight:600;color:var(--selection);cursor:pointer}.preview-from:hover{text-decoration:underline}.preview-close{flex:none;display:grid;place-items:center;width:1.3rem;height:1.3rem;padding:0;border:none;border-radius:4px;background:transparent;color:var(--faint);cursor:pointer}.preview-close:hover{background:#00000014;color:var(--ink)}.preview-close .icon{--icon: currentColor;width:.8rem;height:.8rem;fill:none;stroke-width:1.6}.dom-tree{font:.72rem/1.5 ui-monospace,monospace;white-space:nowrap}.dom-line{padding-left:calc(var(--depth, 0) * 1rem);border-radius:3px}.dom-line:hover{background:#e8f0fe}.dom-text,.dom-more{color:#444}.dom-highlight{position:fixed;z-index:1000;pointer-events:none;background:#2f6fed2e;outline:1px solid var(--selection);border-radius:2px}.tree-item .url,.preview .url,.copy-url .url{color:var(--accent)}.dom-tag{color:#1f6feb}.dom-attr{color:#6f42c1}.dom-value{color:#2e7d32}.copy-url{display:block;width:100%;text-align:left;border:none;background:transparent;padding:0 0 .3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-url:hover{background:transparent;text-decoration:underline}.copy-url.copied .url{color:#2e7d32}.unresolved i{color:var(--faint)}.raw{font:.75rem/1.6 ui-monospace,monospace;overflow:auto}.raw-error{color:#c62828;font-style:italic}.raw-row{display:flex;align-items:center;white-space:nowrap;min-height:1.5rem}.raw-row:hover .raw-actions{opacity:1}.raw-toggle{width:1rem;flex:none;cursor:pointer;color:var(--faint);user-select:none}.raw-toggle-spacer{cursor:default}.raw-key{color:#5e81ac}.raw-key.index{color:var(--faint)}.raw-colon{color:var(--faint);margin-right:.25rem}.raw-bracket,.raw-count{color:var(--faint)}.raw-count{font-style:italic;margin:0 .25rem}.raw-value{overflow:hidden;text-overflow:ellipsis}.raw-value.string{color:#2e7d32}.raw-value.number{color:#6a1b9a}.raw-value.boolean{color:#0277bd}.raw-value.null{color:#c62828}.raw-value.url{color:var(--accent);text-decoration:underline;cursor:pointer}.raw-badge{font-size:.7rem;padding:0 .35rem;border-radius:.25rem;background:#eee}.raw-actions{display:inline-flex;gap:.1rem;margin-left:.4rem;opacity:0;transition:opacity .1s}.raw-actions button,.raw-inline button{border:none;background:transparent;padding:0 .3rem;font:inherit;color:var(--faint);line-height:1.2}.raw-actions button:hover,.raw-inline button:hover{background:#eee;color:var(--ink)}.raw-inline{display:inline-flex;align-items:center;gap:.25rem}.raw-input{font:inherit;padding:.05rem .3rem;border:1px solid var(--line);border-radius:3px;min-width:4rem;max-width:14rem}.raw-kind{min-width:0;color:var(--faint)}.raw-live{display:flex;align-items:center;gap:.4rem}.raw-live .raw-field{flex:1;min-width:0;max-width:none;padding:.25rem .45rem;font:inherit;line-height:1.4}.raw-live .raw-field.invalid{border-color:#c62828}.raw-live .raw-kind{flex:none;padding:.25rem .3rem;font:inherit;line-height:1.4}.tree-value .raw-live{gap:.25rem;justify-content:flex-end;user-select:text}.tree-value .raw-field{min-width:2.5rem;padding:.05rem .3rem;font:.72rem ui-monospace,monospace}.tree-value .raw-value.null{flex:1;text-align:right}.tree-value .raw-kind{padding:.05rem .15rem;font-size:.7rem}.raw-ok{color:#2e7d32!important}.raw-cancel{color:#c62828!important}.live{min-width:0}.row{display:flex;gap:1rem;margin-bottom:.75rem}.row>.tool{flex:1;min-width:0}.stack{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:.75rem}.stack>*{max-width:100%}.loading{color:var(--faint)}.todos{display:flex;flex-direction:column;gap:.6rem;width:480px;max-width:100%;padding:.75rem;border:1px solid var(--line);border-radius:8px;background:#fff}.todo-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}.todo-items label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.todo-items li.done span{text-decoration:line-through;color:var(--faint)}.todos form{display:flex;gap:.4rem}.todos form input{flex:1;min-width:0}.terminal{position:relative;margin:0;width:480px;max-width:100%;height:260px;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;background:#1b1e24;color:#d6dae2;font:13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;outline:none;user-select:none;cursor:text}.terminal.focused{border-color:var(--accent);box-shadow:0 0 0 2px #2f6fed40}.term-probe{position:absolute;visibility:hidden;pointer-events:none}.term-row{white-space:pre}.terminal .inverse{background:#d6dae2;color:#1b1e24}.terminal .bold{font-weight:600}.terminal .cursor{outline:1px solid #d6dae2;outline-offset:-1px}.terminal.focused .cursor{background:#d6dae2;color:#1b1e24;outline:none}.chat{border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;flex-direction:column;height:260px}.chat-header{padding:.4rem .7rem;border-bottom:1px solid var(--line);font-weight:600}.chat-messages{list-style:none;margin:0;padding:.5rem .7rem;flex:1;overflow-y:auto;font-size:.9rem}.chat-messages li{margin-bottom:.25rem}.chat form{display:flex;gap:.4rem;padding:.5rem;border-top:1px solid var(--line)}.chat input{flex:1;min-width:0}.board{outline:none;position:relative;height:420px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(90deg,#f0f0f0 1px,transparent 1px) 0 0 / 24px 24px,linear-gradient(#f0f0f0 1px,transparent 1px) 0 0 / 24px 24px,#fff;overflow:hidden;touch-action:none}.item{position:absolute;padding:5px;cursor:grab;user-select:none;z-index:1}.item.selected>*{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px}.card{display:flex;align-items:center;gap:.4rem;background:#fffdf5;border:1px solid #d8d0b8;border-radius:6px;padding:.4rem;width:160px;box-shadow:0 1px 3px #00000014}.card .dot{appearance:none;-webkit-appearance:none;flex:none;width:14px;height:14px;padding:0;border:1px solid rgba(0,0,0,.15);border-radius:50%;background:none;cursor:pointer}.card .dot::-webkit-color-swatch-wrapper{padding:0}.card .dot::-webkit-color-swatch{border:none;border-radius:50%}.card .title{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card .editor{flex:1;min-width:0;position:relative}.card input.title{width:100%;border:none;background:transparent;outline:none}.card .suggestions{position:absolute;top:100%;left:-.4rem;z-index:2;margin-top:.5rem;width:200px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 4px 12px #0000001f;overflow:hidden}.card .suggestions button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:.35rem .5rem;border:none;border-radius:0;background:transparent;text-align:left;font:inherit;cursor:pointer}.card .suggestions button:hover{background:#f3f4f6}.card .suggestions .detail{font-size:.7rem;color:var(--faint)}.map-frame{width:205px;height:340px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#eef6fb}.map{width:100%;height:100%}.map .pin{width:14px;height:14px;border-radius:50%;border:2px solid white;background:#e11d48;box-shadow:0 1px 3px #0000004d;cursor:pointer;padding:0}.map .pin.selected{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent);transform:scale(1.25)}.whiteboard{position:relative;height:420px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(90deg,#f0f0f0 1px,transparent 1px) 0 0 / 24px 24px,linear-gradient(#f0f0f0 1px,transparent 1px) 0 0 / 24px 24px,#fff;overflow:hidden;touch-action:none;cursor:crosshair;user-select:none}.shape{position:absolute;left:0;top:0;width:0;height:0}.map-surface{position:absolute;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#eef6fb;cursor:grab}.map-surface .map{position:absolute;inset:0}.map-surface .layer{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;pointer-events:none;z-index:2}.map-surface.drawing{cursor:crosshair}.stroke{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}.pen{position:absolute;padding:0;border:2px solid white;border-radius:50%;box-shadow:0 1px 3px #00000040;cursor:pointer;display:grid;place-items:center}.pen .tip{border-radius:50%;background:#fff9}.pen.eraser{background:#fff;border-color:#d1d5db}.pen.active{outline:3px solid var(--accent);outline-offset:1px}.feed{display:flex;flex-direction:column;width:420px;height:420px;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}.feed h3{flex:none;margin:0;padding:.6rem .75rem;font-size:1rem;border-bottom:1px solid var(--line)}.feed h3 a{color:inherit;text-decoration:none}.feed-items{flex:1;min-height:0;overflow:auto;list-style:none;margin:0;padding:.5rem .75rem;display:flex;flex-direction:column;gap:.35rem}.feed-items li{display:flex;align-items:baseline;gap:.6rem;line-height:1.3}.feed-items li a{flex:1;min-width:0;color:inherit}.feed-date{flex:none;width:5.5em;color:var(--faint);font-size:.8rem;white-space:nowrap;font-variant-numeric:tabular-nums}.like{padding:0 .35rem;border:none;background:none;color:var(--faint);font-size:1rem;line-height:1}.like:hover{background:none;color:#e11d48}.like.on{color:#e11d48}.like:disabled{visibility:hidden}.browser{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 1px 3px #0000000f}.browser-chrome{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;background:#f1f1f3;border-bottom:1px solid var(--line)}.browser-dots{display:flex;gap:5px;flex:none}.browser-dots i{width:9px;height:9px;border-radius:50%;background:#d5d5da}.browser-chrome .tool{flex:1;display:flex;min-width:0}.urlbar{flex:1;min-width:0;font:.85rem ui-monospace,monospace;padding:.3rem .75rem;border:1px solid transparent;border-radius:99px;background:#fff;color:var(--ink)}.urlbar:focus{outline:none;border-color:var(--accent)}.browser-page .tool{display:block}.editor{background:#fff}.editor .cm-editor{height:260px}.frame{display:flex;flex-direction:column;gap:.5rem}.frame-box{display:flex;height:480px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}.frame-side{flex:none;width:190px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--pane)}.frame-main{flex:1;min-width:0;position:relative;display:flex}.slot{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.frame-picker{display:flex;gap:.35rem;font-size:.8rem}.frame-picker button{font-size:.8rem;padding:.15rem .55rem}.frame-picker button.active{background:var(--accent);border-color:var(--accent);color:#fff}.sidebar{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.sidebar-list{list-style:none;margin:0;padding:.4rem;display:flex;flex-direction:column;gap:2px;overflow:auto}.sidebar-add{align-self:flex-start;margin:0 .4rem .4rem;padding:0 .5rem;line-height:1.4;color:var(--faint)}.menu{position:absolute;z-index:5;min-width:150px;padding:.25rem;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 6px 20px #00000024;font-size:.8rem}.menu-title,.menu-empty{padding:.25rem .5rem;color:var(--faint)}.menu-title{border-bottom:1px solid var(--line);margin-bottom:.25rem}.menu-item{display:flex;gap:.6rem;width:100%;padding:.25rem .5rem;border:none;border-radius:5px;background:transparent;text-align:left;white-space:nowrap}.menu-item:hover{background:var(--accent);color:#fff}.menu-doc{margin-left:auto;color:var(--faint);overflow:hidden;text-overflow:ellipsis;max-width:120px}.menu-item:hover .menu-doc{color:#fffc}.sidebar-list li{padding:.3rem .5rem;border-radius:6px;cursor:pointer;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-list li:hover{background:#ececee}.sidebar-list li.selected{background:var(--selection);color:#fff}.wm-title,.tab-title{overflow:hidden;text-overflow:ellipsis}.tabs{flex:1;min-width:0;display:flex;flex-direction:column}.tabs-strip{flex:none;display:flex;gap:2px;padding:.35rem .35rem 0;background:#f1f1f3;border-bottom:1px solid var(--line);overflow-x:auto}.tab{display:flex;align-items:center;gap:.3rem;max-width:180px;padding:.3rem .4rem .3rem .7rem;font-size:.85rem;white-space:nowrap;border:1px solid transparent;border-bottom:none;border-radius:6px 6px 0 0;color:var(--faint);cursor:pointer;user-select:none}.tab:hover{background:#e8e8ea}.tab.active{background:#fff;border-color:var(--line);color:var(--ink);margin-bottom:-1px}.tab-body{flex:1;min-height:0;display:none}.tab-body.active{display:flex}.spatial{flex:1;position:relative;overflow:hidden;background:linear-gradient(90deg,#f0f0f0 1px,transparent 1px) 0 0 / 24px 24px,linear-gradient(#f0f0f0 1px,transparent 1px) 0 0 / 24px 24px,#fafafa}.wm-window{position:absolute;width:380px;height:280px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 2px 8px #00000014;overflow:hidden}.wm-window.focused{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 6px 20px #00000024}.wm-titlebar{flex:none;display:flex;align-items:center;gap:.45rem;padding:.3rem .5rem;font-size:.85rem;background:#f1f1f3;border-bottom:1px solid var(--line);cursor:grab;user-select:none}.wm-window.focused .wm-titlebar{background:#e7eefc}.wm-close{margin-left:auto;padding:0 .4rem;line-height:1.2;border:none;background:transparent;color:var(--faint)}.wm-close:hover{background:#ddd;color:var(--ink)}.wm-body{flex:1;min-height:0;display:flex}.tiled{flex:1;min-width:0;display:flex}.tiled-split{flex:1;min-width:0;min-height:0;display:flex;gap:1px;background:var(--line)}.tiled-split.row{flex-direction:row}.tiled-split.column{flex-direction:column}.pane{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff}.pane-header{flex:none;display:flex;align-items:flex-end;gap:2px;padding:.35rem .35rem 0;background:#f1f1f3;border-bottom:1px solid var(--line);overflow-x:auto}.pane.focused .pane-header{background:#e7eefc}.pane-name{align-self:center;margin:0 .4rem .3rem .2rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);white-space:nowrap}.pane-body{flex:1;min-height:0;display:flex}.pane-empty{flex:1;display:grid;place-items:center;font-size:.85rem;color:var(--faint)}.wm-body .editor,.tab-body .editor{flex:1;min-width:0}.wm-body .editor .cm-editor,.tab-body .editor .cm-editor{height:100%}.cm-doclink{color:var(--accent);text-decoration:underline;cursor:pointer}@media(max-width:800px){header,.demo-title{padding:0 1rem}.panels{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;resize:none;overflow:visible}.divider{display:none}.panel.example .panel-body{position:static}.panel.example h3,.panel.example .panel-body{padding-left:1rem}.panel.context .panel-body{max-height:70vh}.row{flex-direction:column}.folder-node{--gutter: 5rem}}input,button{font:inherit}input{border:1px solid var(--line);border-radius:4px;padding:.25rem .45rem}button{border:1px solid var(--line);border-radius:6px;background:#fafafa;padding:.25rem .7rem;cursor:pointer}button:hover{background:#f0f0f0}.views{display:grid;grid-template-columns:minmax(340px,3fr) minmax(280px,2fr);gap:1rem 1.5rem;align-items:start;max-width:1100px}.views-pane h4,.views-reuse h4{margin:0 0 .4rem;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}.views-reuse{grid-column:1 / -1;margin-top:.5rem}.frame-main .wm{flex:1;height:auto;border:none;border-radius:0}.wm{position:relative;height:460px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(90deg,#f0f0f0 1px,transparent 1px) 0 0 / 24px 24px,linear-gradient(#f0f0f0 1px,transparent 1px) 0 0 / 24px 24px,#fff;overflow:auto;touch-action:none}.win{position:absolute;display:flex;flex-direction:column;background:#fff;border:1px solid #cfcfd4;border-radius:6px;box-shadow:0 1px 4px #00000014;overflow:hidden;z-index:1}.win.front{z-index:2;box-shadow:0 2px 10px #00000024}.win-title{display:flex;align-items:center;gap:.4rem;padding:.25rem .5rem;background:linear-gradient(#f4f4f6,#e9e9ec);border-bottom:1px solid var(--line);cursor:grab;user-select:none;font-size:.75rem}.win-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--faint)}.win-tool{font:inherit;font-size:.72rem;border:1px solid var(--line);border-radius:4px;background:#fff;padding:0 .2rem}.win-body{position:relative;flex:1;min-height:0;overflow:auto}.win-body>*{height:100%}.win-grip{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,#bbb 50%,#bbb 60%,transparent 60%,transparent 75%,#bbb 75%,#bbb 85%,transparent 85%)}.win-body .editor .cm-editor{height:100%;font-size:.85rem}.md-preview{padding:.5rem .75rem;font-size:.85rem;line-height:1.45}.md-preview h1{font-size:1.15rem;margin:.2rem 0 .5rem}.md-preview h2{font-size:1rem;margin:.5rem 0 .3rem}.md-preview p,.md-preview ol,.md-preview ul{margin:.4rem 0}.pdf{position:relative;background:#e4e4e8;overflow:auto;padding:.75rem}.pdf-clip{position:absolute;left:0;top:0;height:0;overflow:hidden;visibility:hidden}.pdf-sheets{display:flex;flex-direction:column;align-items:center;gap:.75rem}.pdf-page{position:relative;flex:none;background:#fff;box-shadow:0 1px 4px #00000026;overflow:hidden}.pdf-measure,.pdf-flow{display:flow-root;font-size:.6rem;line-height:1.4}.pdf-measure h1,.pdf-flow h1{font-size:1rem;margin:0 0 .4em}.pdf-measure h2,.pdf-flow h2{font-size:.8rem;margin:.6em 0 .3em}.pdf-measure p,.pdf-flow p,.pdf-measure ol,.pdf-flow ol,.pdf-measure ul,.pdf-flow ul{margin:.35em 0}.pdf-number{position:absolute;bottom:5px;right:8px;font-size:.5rem;color:var(--faint)}.count{display:flex;flex-direction:column;align-items:center;justify-content:center}.count-number{font-size:2.2rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}.count-label{font-size:.75rem;color:var(--faint)}.stats{width:100%;height:auto;font-size:.8rem;border-collapse:collapse}.stats th{text-align:left;font-weight:500;color:var(--faint);padding:.25rem .6rem}.stats td{text-align:right;padding:.25rem .6rem;font-variant-numeric:tabular-nums}.stats tr+tr{border-top:1px solid #f0f0f0}.workspace-folder{font-size:.8rem}.sticker-shelf{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;min-height:2rem;margin-bottom:.6rem}.shelf-hint{font-size:.7rem;color:var(--faint)}.tree-item.over,.tree-item.inherited.over{background:#dbe7fd;outline:1px dashed var(--accent);outline-offset:-1px}.tree-item.stuck .tree-value{display:flex;justify-content:flex-end}.sticker{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .55rem;border-radius:999px;background:#fde68a;color:#78350f;font-size:.72rem;font-weight:600;white-space:nowrap;box-shadow:0 1px 2px #00000026,inset 0 -1px #00000014;cursor:grab;user-select:none;transform:rotate(-2deg)}.sticker:active{cursor:grabbing}.sticker.stuck{max-width:100%;cursor:default;transform:rotate(-1.5deg)}.sticker-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.sticker-peel{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;border:none;border-radius:50%;background:#0000001a;color:inherit;font-size:.75rem;line-height:1;cursor:pointer}.sticker-peel:hover{background:#0003}