*{box-sizing:border-box}
:root{--bg:#f5f5f2;--panel:#fff;--line:#d9d9d4;--text:#202124;--muted:#6b6b66;--soft:#ecece8}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,select{font:inherit}
.top{height:78px;padding:16px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#fff}
.top h1{font-size:24px;margin:0;letter-spacing:-.02em}.top p{margin:2px 0 0;color:var(--muted)}
.sampleLink{text-decoration:none;color:#333;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.tabs{height:48px;display:flex;gap:8px;align-items:center;padding:0 24px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:8}
.tabs button,.stepToolbar button{border:1px solid var(--line);background:#fff;padding:7px 12px;border-radius:999px;cursor:pointer}
.tabs button.active,.stepToolbar button.active{background:#222;color:#fff;border-color:#222}
.layout{display:grid;grid-template-columns:360px minmax(0,1fr);min-height:calc(100vh - 126px)}
.sidebar{border-right:1px solid var(--line);background:#fafaf8;padding:16px;position:sticky;top:48px;height:calc(100vh - 48px);overflow:auto}
.datasetMeta{padding:12px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
.datasetMeta b{display:block;font-size:16px}.datasetMeta p{margin:4px 0;color:var(--muted)}
.sidebar input,.sidebar select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;margin-bottom:8px}
.trajCount{font-size:12px;color:var(--muted);margin:6px 2px 10px}
.trajList{display:grid;gap:8px}
.trajItem{border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px;text-align:left;cursor:pointer}
.trajItem:hover,.trajItem.active{border-color:#777}.trajItem.active{box-shadow:0 0 0 1px #777 inset}
.trajItem .id{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trajItem .sub{font-size:12px;color:var(--muted);margin-top:3px}
.miniCounts{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}.miniCounts span{background:var(--soft);padding:2px 6px;border-radius:999px;font-size:11px}
.main{padding:24px;min-width:0}.empty{max-width:780px;margin:60px auto;color:var(--muted);text-align:center}
.trajTitle{font-size:24px;margin:0 0 4px;word-break:break-word}.trajSub{color:var(--muted);margin:0 0 12px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}.badge{background:#ecece8;border-radius:999px;padding:4px 8px;font-size:12px}
.summaryGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 18px}
.summaryBox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}.summaryBox b{display:block;font-size:18px}.summaryBox span{color:var(--muted);font-size:12px}
.taskText{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0 16px;white-space:pre-wrap}
.stepToolbar{display:flex;gap:6px;flex-wrap:wrap;position:sticky;top:56px;background:rgba(245,245,242,.94);backdrop-filter:blur(8px);padding:10px 0;z-index:6}
.stepCount{color:var(--muted);font-size:12px;margin:4px 0 10px}
.steps{display:grid;gap:12px}.stepCard{display:grid;grid-template-columns:360px minmax(0,1fr);gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.thumb{width:360px;height:225px;max-width:100%;background-repeat:no-repeat;background-color:#eee;border-radius:8px;cursor:zoom-in;border:1px solid #ddd}
.stepHead{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}.stepNo{font-weight:700}
.op{font-size:11px;padding:3px 7px;border-radius:999px;background:#e9e9e6}.op.inspect{background:#e8eef7}.op.commit{background:#e5f2e7}.op.leave{background:#f7e7e4}
.goal{font-weight:600;margin:4px 0 8px}.kv{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.kv span{background:#f0f0ec;padding:3px 7px;border-radius:7px;font-size:12px}
.actionText,.thought{white-space:pre-wrap;word-break:break-word;color:#444;margin:7px 0}
details{margin-top:8px}summary{cursor:pointer;color:#555}pre{white-space:pre-wrap;word-break:break-word;background:#f4f4f1;border-radius:8px;padding:10px;max-height:320px;overflow:auto;font-size:12px}
.source{font-size:11px;color:var(--muted);border-top:1px solid #eee;margin-top:9px;padding-top:8px}
dialog{border:0;padding:0;background:#111;border-radius:12px;max-width:96vw}dialog::backdrop{background:rgba(0,0,0,.78)}
.zoomCrop{background-repeat:no-repeat;background-color:#222;max-width:92vw}.zoomCaption{color:#fff;padding:9px 12px}
@media(max-width:1050px){.layout{grid-template-columns:300px minmax(0,1fr)}.stepCard{grid-template-columns:280px minmax(0,1fr)}.thumb{width:280px;height:175px}.summaryGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.top{height:auto;padding:12px 14px}.top h1{font-size:20px}.tabs{padding:0 14px}.layout{display:block}.sidebar{position:relative;top:auto;height:auto;border-right:0;border-bottom:1px solid var(--line);max-height:430px}.main{padding:14px}.stepCard{display:block}.thumb{width:100%;height:auto;aspect-ratio:16/10;background-size:500% auto!important}.stepBody{margin-top:10px}.summaryGrid{grid-template-columns:repeat(2,1fr)}}