.demo-shell{background:var(--surface,#f7f9fa);min-height:100vh}.demo-hero{padding:clamp(4rem,9vw,7rem) 0 3rem;background:linear-gradient(135deg,#08121c 0%,#102633 62%,#0e3a3b 100%);color:#eef5f6}.demo-hero .lede{color:#b8cbd0}.demo-notice{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #d8b15e;background:#fff9e9;border-radius:var(--r-md);padding:12px 16px;color:#5c481c;font-size:.84rem;margin-bottom:18px}.demo-notice strong{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}.demo-notice span{min-width:0}.demo-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px}.demo-sidebar,.demo-main{min-width:0;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden}.demo-sidebar{padding:16px;display:flex;flex-direction:column;gap:5px}.demo-side-label,.demo-kicker{font:600 .66rem var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:#5b747e}.demo-side-label{padding:4px 8px 12px}.demo-tab{font:inherit;text-align:left;display:flex;justify-content:space-between;border:1px solid transparent;background:transparent;padding:10px 8px;border-radius:var(--r-sm);cursor:pointer;color:var(--text)}.demo-tab:hover,.demo-tab.is-active{background:#eaf5f3;border-color:#afd7d0;color:#075d58}.demo-tab span{font: .65rem var(--font-mono);color:#73858e}.demo-count{background:#f8e6b6!important;color:#714e0b!important;padding:3px 5px;border-radius:4px}.demo-side-note{margin-top:auto;border-top:1px solid var(--border);padding:16px 8px 3px;font-size:.78rem;line-height:1.55;color:#64747c}.demo-main-head,.demo-panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:19px 20px;border-bottom:1px solid var(--border)}.demo-main-head{flex-wrap:wrap}.demo-main-head h2,.demo-panel-head h3{margin:4px 0 0;font-family:var(--font-display);font-size:1.25rem}.demo-live,.panel-status{font:.66rem var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:#52727c}.demo-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2ecc7a;margin-right:5px}.demo-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border)}.demo-metrics>div{min-width:0;background:#f7fafb;padding:15px 18px}.demo-metrics span,.demo-metrics small{display:block;color:#6b7b83;font-size:.72rem}.demo-metrics strong{display:block;font:600 1.45rem var(--font-mono);margin:5px 0;color:#203841}.demo-metrics .is-review{color:#a76f08}.demo-metrics .is-ok{color:#13714e}.demo-view{padding-bottom:18px}.demo-panel-head{border-bottom:0;padding-bottom:12px}.demo-filters{display:flex;gap:5px}.demo-filters button{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 10px;font: .68rem var(--font-mono);cursor:pointer;color:#5d7079}.demo-filters button.is-active{background:#e9f4f2;border-color:#86c5bc;color:#075d58}.decision-list{border-top:1px solid var(--border)}.decision-row{width:100%;display:grid;grid-template-columns:76px minmax(0,1fr) 70px 80px 16px;gap:8px;text-align:left;align-items:center;border:0;border-bottom:1px solid var(--border);background:var(--surface);padding:14px 16px;cursor:pointer;color:inherit}.decision-row:hover{background:#f4f8f8}.decision-id,.decision-time{font:.62rem var(--font-mono);color:#6d7e86}.decision-name{font-size:.84rem;font-weight:600;min-width:0}.state{font:600 .6rem var(--font-mono);letter-spacing:.04em;padding:4px 5px;border-radius:4px;white-space:nowrap;text-align:center}.state-review{color:#865a08;background:#fff3d2;border:1px solid #e5c878}.state-allowed{color:#116441;background:#e6f5ed;border:1px solid #9bd1b5}.state-blocked{color:#9d3434;background:#fff0f0;border:1px solid #e2aaaa}.row-arrow{font-size:1.1rem;color:#81939b}.decision-detail{margin:14px 16px 0;padding:12px 14px;border-left:3px solid #54a9a0;background:#eff7f6;color:#48656c;font-size:.82rem;line-height:1.5}.detail-mark{font:bold 1rem var(--font-mono);color:#0c8178;margin-right:7px}.review-card,.evidence-card,.impact-line{margin:0 20px 10px;border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;display:flex;align-items:center;gap:12px}.review-card>div,.evidence-card>div:nth-child(2),.impact-line>div{flex:1;min-width:0}.review-card p,.evidence-card p,.impact-line p{margin:4px 0;color:#6a7b83;font-size:.78rem}.demo-action{border:1px solid #78b9b0;background:#eff8f6;color:#08645d;border-radius:4px;padding:7px 9px;font: .68rem var(--font-mono);cursor:pointer}.review-feedback{margin-top:14px}.impact-number{font:600 2rem var(--font-mono);color:#0a8177}.impact-chain{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 20px;padding:13px;border:1px dashed #a8c4c4;color:#425c64;font-size:.78rem}.impact-chain i{color:#0b867c}.evidence-check{width:30px;height:30px;border-radius:50%;background:#e6f5ed;color:#13714e;display:grid;place-items:center;font-weight:bold}.evidence-card code{font:.66rem var(--font-mono);color:#67808a}.demo-next{background:#eef6f5}.demo-next .lede{max-width:60ch}@media(max-width:760px){.demo-grid{grid-template-columns:1fr}.demo-sidebar{display:grid;grid-template-columns:1fr 1fr}.demo-side-label,.demo-side-note{grid-column:1/-1}.demo-side-note{margin-top:8px}.demo-side-note{margin-top:8px}.demo-metrics{grid-template-columns:repeat(2,1fr)}.demo-notice{align-items:flex-start;flex-direction:column}.decision-row{grid-template-columns:1fr auto;gap:6px}.decision-id,.decision-time{grid-column:1}.decision-name{grid-column:1}.decision-row .state{grid-column:2;grid-row:1/3}.row-arrow{display:none}.review-card,.evidence-card,.impact-line{align-items:flex-start;flex-wrap:wrap}.review-card .state,.evidence-card .state{margin-left:auto}}
.lineage-graph{display:flex;align-items:center;gap:8px;padding:6px 20px 16px;overflow-x:auto}.graph-node{flex:1 1 10rem;min-width:9.5rem;text-align:left;border:1px solid #b8cbce;border-radius:8px;background:#f6faf9;padding:12px;cursor:pointer;color:#203b43;transition:border-color .15s,background .15s,box-shadow .15s}.graph-node:hover,.graph-node:focus-visible,.graph-node.is-selected{border-color:#159488;background:#eaf6f3;box-shadow:0 0 0 2px rgba(21,148,136,.12);outline:0}.graph-kind{display:block;font:600 .57rem var(--font-mono);letter-spacing:.08em;color:#5a7780;margin-bottom:6px}.graph-node strong{display:block;font-size:.8rem;line-height:1.3}.graph-node small{display:block;margin-top:6px;color:#617781;font-size:.7rem;line-height:1.3}.graph-connector{color:#5f8b8d;font:1rem var(--font-mono);flex:none}.graph-detail{display:flex;gap:8px;flex-direction:column;margin:0 20px 14px;padding:12px 14px;border-left:3px solid #159488;background:#f0f8f6;color:#355761;font-size:.78rem;line-height:1.45}.graph-detail strong{color:#0c716b}.graph-source{border-top:3px solid #8eabb0}.graph-control{border-top:3px solid #159488}.graph-decision{border-top:3px solid #d1a343}.graph-replay{border-top:3px solid #c97878}@media(max-width:760px){.lineage-graph{display:grid;grid-template-columns:1fr;padding:6px 20px 16px}.graph-connector{justify-self:center;transform:rotate(90deg)}.graph-node{width:100%}}