:root,:root[data-theme=dark]{--bg: #101418;--bg-raised: #171d24;--bg-input: #0c1014;--border: #2a333d;--text: #d7dee6;--text-dim: #8494a5;--accent: #4cc2ff;--ok: #62d196;--warn: #e2b93d;--err: #ff7a85;--shadow: 0 16px 48px rgb(0 0 0 / .45)}:root[data-theme=light]{--bg: #ffffff;--bg-raised: #f5f7fa;--bg-input: #f0f3f7;--border: #d6dde5;--text: #1b2530;--text-dim: #5c6b7a;--accent: #0969da;--ok: #1a7f37;--warn: #9a6700;--err: #cf222e;--shadow: 0 16px 48px rgb(20 30 45 / .16)}:root{--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;color-scheme:dark}:root[data-theme=light]{color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,sans-serif}#app{width:100%}header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 24px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:20}.page{padding:20px 24px 80px}.tagline{color:var(--text-dim);font-weight:400;font-size:13px}.head-left,.head-right{display:flex;align-items:center;gap:8px;min-width:0}.head-left{flex:1}.head-sep{color:var(--border);-webkit-user-select:none;user-select:none}.head-right .head-sep{width:1px;height:20px;background:var(--border);margin:0 2px}h1{display:flex;align-items:baseline;gap:10px;font-size:17px;font-weight:600;margin:0;min-width:0}.brand{color:var(--accent);font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;text-decoration:none;flex:none}#sheet-title{background:none;border:none;border:1px solid transparent;border-radius:6px;color:var(--text);font:inherit;font-size:15px;font-weight:500;padding:4px 8px;min-width:60px;flex:1;max-width:44ch}#sheet-title:hover:not([readonly]){background:var(--bg-input)}#sheet-title:focus{outline:none;background:var(--bg-input);border-color:var(--accent)}#sheet-title[readonly]{cursor:default}.sdk-chip{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--border))}.sdk-chip.sdk-error{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,var(--border))}.sdk-source{margin:0;max-height:50vh;overflow:auto;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.btn-primary{background:color-mix(in srgb,var(--accent) 16%,var(--bg-raised));border-color:color-mix(in srgb,var(--accent) 40%,var(--border));color:var(--accent);font-weight:500;white-space:nowrap}.btn-primary:hover{background:color-mix(in srgb,var(--accent) 26%,var(--bg-raised));border-color:var(--accent)}.icon-btn{width:32px;height:31px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--text-dim);flex:none}.icon-btn:hover{color:var(--text)}#mode-banner{background:color-mix(in srgb,var(--warn) 8%,var(--bg-raised));border:1px solid color-mix(in srgb,var(--warn) 35%,var(--border));border-radius:8px;padding:8px 14px;margin-bottom:20px;font-size:13px;color:var(--text-dim)}.menu{position:relative}.menu-items{position:absolute;top:calc(100% + 4px);right:0;z-index:10;display:flex;flex-direction:column;min-width:130px;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:4px}.menu-items button{border:none;background:none;text-align:left;border-radius:5px}.menu-items button:hover{background:var(--bg-input)}.sheet-row{display:flex;align-items:center;gap:2px}.sheet-item{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.sheet-item.active{color:var(--accent)}.sheet-item.active:before{content:"● ";font-size:9px}.sheet-new{color:var(--text-dim);border-top:1px solid var(--border)!important;border-radius:0 0 5px 5px!important;margin-top:2px}.sheet-del{flex:none;min-width:22px;color:var(--text-dim)}.sheet-del:hover{color:var(--err)}.layout{display:flex;align-items:stretch;min-height:calc(100vh - 57px)}.layout .content{flex:1;min-width:0}#sidebar{width:240px;flex:none;border-right:1px solid var(--border);padding:14px 10px;position:sticky;top:57px;align-self:flex-start;max-height:calc(100vh - 57px);overflow-y:auto;display:flex;flex-direction:column;gap:4px}#sidebar-toggle{padding:4px 10px;font-size:14px;color:var(--text-dim)}.sb-book{display:block;color:var(--text);font-weight:600;font-size:13px;text-decoration:none;padding:6px 10px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}.sb-book:hover{background:var(--bg-raised)}.sb-sheets{display:flex;flex-direction:column;gap:2px}.sb-sheet{position:relative;display:flex;align-items:baseline;gap:8px;color:var(--text-dim);text-decoration:none;font-size:13px;padding:5px 10px;border-radius:6px;white-space:nowrap;overflow:hidden}.sb-sheet:hover{background:var(--bg-raised);color:var(--text)}.sb-sheet.active{color:var(--accent);background:var(--bg-raised)}.sb-sheet.active:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:1px;background:var(--accent)}.sb-num{font-family:var(--mono);font-size:10px;flex:none}.sb-title{overflow:hidden;text-overflow:ellipsis}.sb-new{margin-top:6px;border-style:dashed;color:var(--text-dim);font-size:12px}.ro-badge{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--border))}.home-count{color:var(--text-dim);font-size:12px;white-space:nowrap}#toc{margin-top:12px}.toc-book{font-size:26px;margin:0 0 4px}.toc-sub{color:var(--text-dim);margin:0 0 24px}.toc-list{display:flex;flex-direction:column;gap:8px}.toc-item{display:flex;align-items:center;gap:14px;background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;padding:14px 18px;color:var(--text);text-decoration:none;transition:border-color .15s}.toc-item:hover{border-color:var(--accent)}.toc-num{font-family:var(--mono);font-size:12px;color:var(--text-dim);border:1px solid var(--border);border-radius:6px;width:26px;height:26px;display:grid;place-items:center;flex:none}.toc-empty{color:var(--text-dim)}.home-section{margin-bottom:36px}.home-section h2{font-size:18px;font-weight:600;margin:0 0 12px}.home-sheet{padding:0 12px;gap:8px}.home-sheet-link{flex:1;color:var(--text);text-decoration:none;padding:14px 4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-sheet .sheet-del{background:none;border:none;font-size:13px;padding:5px 7px;border-radius:5px}.home-sheet .sheet-del:hover{background:var(--bg-input)}.home-empty{color:var(--text-dim);font-size:14px;margin:0 0 4px}.home-new{border-style:dashed;color:var(--text-dim);cursor:pointer;font:inherit;font-size:14px;justify-content:center}.home-new:hover{color:var(--accent)}.banner-btn{margin-left:8px;font-size:12px;padding:2px 10px}.modal{background:var(--bg-raised);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:20px 22px;min-width:340px;max-width:480px;box-shadow:var(--shadow)}.modal::backdrop{background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal h3{margin:0 0 10px;font-size:16px;font-weight:600}.modal-body{color:var(--text-dim);font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.modal-input{width:100%;background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-family:var(--mono);font-size:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.modal-confirm{border-color:var(--accent);color:var(--accent)}.modal-confirm.modal-danger{border-color:var(--err);color:var(--err)}.controls{display:flex;align-items:center;gap:8px}button{background:var(--bg-raised);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}.ic{width:1.05em;height:1.05em;flex:none;vertical-align:-.15em}button:has(.ic):has(span),.btn-primary{display:inline-flex;align-items:center;gap:6px}.icon-btn .ic{width:18px;height:18px;vertical-align:middle}button:hover{border-color:var(--accent)}button:disabled{opacity:.4;cursor:default}.status,.ro-badge,.sdk-chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;line-height:1;padding:4px 10px;border-radius:99px;border:1px solid var(--border);color:var(--text-dim);white-space:nowrap}.status:before{content:"●";margin-right:6px;color:var(--text-dim)}.status[data-state=idle]:before{color:var(--ok)}.status[data-state=busy]:before{color:var(--warn)}.status[data-state=starting]:before,.status[data-state=dead]:before{color:var(--err)}#env-panel{position:fixed;top:54px;right:24px;z-index:30;width:min(560px,calc(100vw - 48px));max-height:calc(100vh - 80px);overflow-y:auto;background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow)}#env-panel p{margin:0 0 10px;font-size:13px;color:var(--text-dim)}.env-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}.env-key,.env-value{background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-family:var(--mono);font-size:12px}.env-key{width:240px}.env-value{flex:1}.env-key:focus,.env-value:focus{outline:none;border-color:var(--accent)}.env-actions{display:flex;gap:8px;margin-top:4px}code{font-family:var(--mono);font-size:.9em;background:var(--bg-input);padding:1px 5px;border-radius:4px}.cell{display:flex;gap:10px;margin-bottom:14px;position:relative}.editor-host{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;overflow:hidden;padding:0 8px}.editor-host .cm-editor{background-color:transparent!important}.cell:focus-within .editor-host{border-color:var(--accent)}.cell.tagged-sdk .editor-host{border-left:3px solid var(--ok)}.cell.tagged-sdk:after{content:"sdk";position:absolute;top:6px;right:8px;font:10px var(--mono);color:var(--ok);border:1px solid var(--ok);border-radius:4px;padding:0 5px;opacity:.8;pointer-events:none}.tool-sdk{color:var(--ok)}.cell[data-type=md] .run-btn{color:var(--text-dim)}.md-host{padding:2px 6px;cursor:default;border-radius:8px;border:1px solid transparent}.md-host:hover{border-color:var(--border)}.md-rendered{line-height:1.6}.md-rendered>:first-child{margin-top:0}.md-rendered>:last-child{margin-bottom:0}.md-rendered h1,.md-rendered h2,.md-rendered h3{font-weight:600;line-height:1.3}.md-rendered h1{font-size:24px;border-bottom:1px solid var(--border);padding-bottom:8px}.md-rendered h2{font-size:19px}.md-rendered h3{font-size:16px}.md-rendered a{color:var(--accent)}.md-rendered pre{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:10px 12px;overflow-x:auto}.md-rendered pre code{background:none;padding:0}.md-rendered blockquote{border-left:3px solid var(--border);margin-left:0;padding-left:14px;color:var(--text-dim)}.md-rendered table{border-collapse:collapse}.md-rendered th,.md-rendered td{border:1px solid var(--border);padding:4px 10px}.gutter{padding-top:2px}.run-btn{width:32px;height:32px;padding:0;border-radius:8px;color:var(--accent);font-size:12px;display:inline-flex;align-items:center;justify-content:center}.run-btn .ic{width:15px;height:15px}.trace-tool-icon .ic{width:14px;height:14px;vertical-align:-.2em}.body{flex:1;min-width:0}.tools{position:absolute;top:-13px;right:8px;z-index:5;display:flex;gap:2px;padding:2px 4px;background:var(--bg-raised);border:1px solid var(--border);border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}.cell:hover .tools,.cell:focus-within .tools{opacity:1;pointer-events:auto}.tool{min-width:24px;height:20px;padding:0 4px;font-size:11px;color:var(--text-dim);background:none;border:none;border-radius:4px}.tool:hover{background:var(--bg-input);color:var(--text)}textarea{display:block;width:100%;background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:13px;line-height:1.55;resize:vertical;tab-size:2}textarea:focus{outline:none;border-color:var(--accent)}.out:not(:empty){margin-top:6px;border-left:2px solid var(--border);padding:4px 0 4px 12px}.out.busy{border-left-color:var(--warn)}.line{font-family:var(--mono);font-size:13px;white-space:pre-wrap;word-break:break-word;padding:1px 0}.console-warn{color:var(--warn)}.console-error,.error{color:var(--err)}.console-debug,.console-info{color:var(--text-dim)}.result{color:var(--ok)}.result:before{content:"← ";color:var(--text-dim)}.display-json{color:var(--text)}.meta{color:var(--text-dim);font-size:11px}.display-html{border:1px solid var(--border);border-radius:6px;background:#fff;width:100%;height:80px;resize:vertical}.trace{display:flex;flex-direction:column;margin:4px 0}.trace-turn{display:flex;gap:12px;padding-bottom:14px;position:relative}.trace-turn:not(:last-child) .trace-gutter:after{content:"";position:absolute;left:5px;top:16px;bottom:0;width:1px;background:var(--border)}.trace-gutter{position:relative;flex:none;width:74px;display:flex;align-items:baseline;gap:6px}.trace-dot{width:11px;height:11px;border-radius:50%;flex:none;border:2px solid var(--bg);background:var(--text-dim)}.trace-user .trace-dot{background:var(--accent)}.trace-assistant .trace-dot{background:var(--ok)}.trace-tool .trace-dot,.trace-turn.trace-tool>.trace-gutter .trace-dot{background:var(--warn)}.trace-role{font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}.trace-bubble{flex:1;min-width:0;border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--bg-raised)}.trace-text{font-size:14px;line-height:1.5;white-space:pre-wrap}.trace-tool{margin-top:8px;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--bg-input)}.trace-bubble>.trace-tool:first-child{margin-top:0}.trace-tool-head{display:flex;align-items:center;gap:6px;padding:5px 10px;border-bottom:1px solid var(--border)}.trace-tool-icon{color:var(--warn)}.trace-tool-name{font-family:var(--mono);font-size:12px;color:var(--text)}.trace-tool-body{margin:0;padding:8px 10px;font-family:var(--mono);font-size:12px;color:var(--text-dim);white-space:pre-wrap;word-break:break-word;overflow-x:auto}.trace-usage{margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--text-dim)}.viz{margin:4px 0;border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--bg-raised)}.viz-empty{color:var(--text-dim);font-family:var(--mono);font-size:12px}.viz-role-system{--c: var(--text-dim)}.viz-role-user{--c: var(--accent)}.viz-role-assistant{--c: var(--ok)}.viz-role-tool{--c: var(--warn)}.viz-kind-agent,.viz-kind-subagent{--c: var(--accent)}.viz-kind-turn,.viz-kind-model{--c: var(--ok)}.viz-kind-tool{--c: var(--warn)}.viz-kind-hook{--c: #b58cff}.viz-files{font-family:var(--mono);font-size:12px}.viz-file-row{display:flex;align-items:center;gap:6px;padding:1px 0}.viz-file-name{color:var(--text)}.viz-file-size{margin-left:auto;color:var(--text-dim);font-size:11px}.viz-context-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.viz-context-title{font-weight:600;font-size:13px}.viz-context-total{font-family:var(--mono);font-size:11px;color:var(--text-dim)}.viz-context-bar{display:flex;height:14px;border-radius:4px;overflow:hidden;gap:1px;margin-bottom:10px}.viz-context-capacity{background:var(--bg-input);gap:0}.viz-seg{min-width:2px;background:var(--c, var(--text-dim));opacity:.85}.viz-seg-free{background:repeating-linear-gradient(45deg,transparent,transparent 4px,color-mix(in srgb,var(--text-dim) 22%,transparent) 4px,color-mix(in srgb,var(--text-dim) 22%,transparent) 5px);min-width:0;opacity:1}.viz-toggle{display:inline-flex;gap:0;margin-bottom:10px;border:1px solid var(--border);border-radius:6px;overflow:hidden}.viz-toggle-btn{border:none;border-radius:0;background:var(--bg-input);color:var(--text-dim);font-size:11px;padding:3px 10px}.viz-toggle-btn.active{background:var(--accent);color:var(--bg)}.viz-context-rows{display:flex;flex-direction:column;gap:3px}.viz-context-row{display:flex;align-items:baseline;gap:8px;font-size:12px}.viz-dot{width:8px;height:8px;border-radius:50%;background:var(--c, var(--text-dim));flex:none}.viz-context-role{font-family:var(--mono);color:var(--text);width:74px;flex:none}.viz-context-tok{font-family:var(--mono);font-size:11px;color:var(--text-dim);width:66px;flex:none}.viz-context-preview{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viz-timeline{font-size:12px}.viz-tl-row{display:flex;align-items:center;gap:8px;padding:2px 0}.viz-tl-label{font-family:var(--mono);color:var(--text);width:150px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viz-tl-track{position:relative;flex:1;height:16px;background:var(--bg-input);border-radius:4px}.viz-tl-bar{position:absolute;top:2px;bottom:2px;min-width:3px;background:var(--c, var(--ok));border-radius:3px;display:flex;align-items:center;padding:0 4px;opacity:.9}.viz-tl-dur{font-family:var(--mono);font-size:9px;color:var(--bg);white-space:nowrap}.viz-tl-foot{margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--text-dim)}footer{margin-top:6px}#add-cell{width:100%;padding:8px;color:var(--text-dim);border-style:dashed}@media(max-width:860px){#sheet-title{max-width:22ch}.viz-tl-label{width:110px}}@media(max-width:720px){header{padding:10px 14px;gap:8px}.head-left,.head-right{flex-wrap:wrap}.page{padding:14px 14px 64px}.layout{flex-direction:column;min-height:0}#sidebar{position:static;top:auto;width:auto;max-height:45vh;border-right:none;border-bottom:1px solid var(--border);padding:10px}.modal{min-width:0;width:calc(100vw - 24px);max-width:480px;padding:18px}#env-panel{inset:auto 12px 12px;width:auto;max-height:70vh}.env-row{flex-wrap:wrap}.env-key{width:100%}.cell{gap:8px}.trace-gutter{width:54px}.viz-context-role{width:60px}.viz-context-tok{width:52px}.md-rendered table{display:block;max-width:100%;overflow-x:auto}}@media(max-width:480px){header{padding:8px 12px}.page{padding:12px 12px 56px}.tagline{display:none}h1{font-size:15px}#sheet-title{font-size:14px;max-width:16ch}.md-rendered h1{font-size:21px}.md-rendered h2{font-size:17px}.controls,.head-right{flex-wrap:wrap;justify-content:flex-end}.viz-tl-label{width:88px}}