
:root{--paper:#eceee9;--plate:#f9faf7;--ink:#14171a;--hair:#cfd3cd;--soft:#737c7c;--on:#278777;--cut:#c86643;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;--display:Georgia,serif}
@media(prefers-color-scheme:dark){:root{--paper:#0f1113;--plate:#16191c;--ink:#e5e7e2;--hair:#2b3036;--soft:#a3aeac;--on:#55bba4;--cut:#ed966b}}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 var(--mono)}
body[data-piece="causal-grammar"][data-page="interactive"] .cg-header,body[data-piece="causal-grammar"][data-page="interactive"] .cg-main{max-width:1500px;margin:auto;padding:20px 34px}
body[data-piece="causal-grammar"][data-page="interactive"] .cg-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:16px}
body[data-piece="causal-grammar"][data-page="interactive"] h1{font:600 clamp(36px,5vw,68px)/1 var(--display);letter-spacing:-.045em;margin:5px 0 0}
body[data-piece="causal-grammar"][data-page="interactive"] h2{font:600 clamp(25px,3vw,36px)/1.12 var(--display);letter-spacing:-.025em;margin:0 0 16px}
body[data-piece="causal-grammar"][data-page="interactive"] h3{font:600 22px/1.2 var(--display);margin:0}
.cg-kicker,.cg-tiny{font:11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}.cg-intro{max-width:290px;font:16px/1.5 var(--display);color:var(--soft)}.cg-header>.lede{display:none}
body[data-piece="causal-grammar"][data-page="interactive"] .tabs{display:flex;width:100%;border:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);border-radius:0;gap:0;overflow:visible;background:transparent}
body[data-piece="causal-grammar"][data-page="interactive"] .tabs button{flex:1;padding:14px 12px;text-align:left;font:13px/1.3 var(--mono);letter-spacing:0;text-transform:none;border:0;border-right:1px solid var(--hair);border-radius:0;background:transparent;color:var(--soft)}
body[data-piece="causal-grammar"][data-page="interactive"] .tabs button:last-child{border-right:0}body[data-piece="causal-grammar"][data-page="interactive"] .tabs button[aria-selected="true"]{background:var(--plate);color:var(--ink);box-shadow:inset 0 -3px var(--on)}
.cg-tab-number{display:inline-block;margin-right:9px;color:var(--on)}body[data-piece="causal-grammar"][data-page="interactive"] .cg-room{display:none;padding:24px 0 0;min-width:0}body[data-piece="causal-grammar"][data-page="interactive"] .cg-room.active{display:block}
.cg-room-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.cg-room-head h2{margin:0!important}.cg-tools,.cg-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.cg-tools label{display:flex;align-items:center;gap:7px;font-size:12px}
body[data-piece="causal-grammar"][data-page="interactive"] button:where(:not(.help-trigger,.help-close)),body[data-piece="causal-grammar"][data-page="interactive"] select{font:12px/1.35 var(--mono);color:var(--ink);background:var(--plate);border:1px solid var(--hair);border-radius:3px;padding:8px 11px;min-height:35px;letter-spacing:0;text-transform:none;cursor:pointer}
body[data-piece="causal-grammar"][data-page="interactive"] button:hover{border-color:var(--on)}body[data-piece="causal-grammar"][data-page="interactive"] button:focus-visible,body[data-piece="causal-grammar"][data-page="interactive"] select:focus-visible,body[data-piece="causal-grammar"][data-page="interactive"] textarea:focus-visible{outline:2px solid var(--on);outline-offset:3px}
body[data-piece="causal-grammar"][data-page="interactive"] button.cg-primary{background:var(--ink);color:var(--plate);border-color:var(--ink)}
.cg-studio{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:18px;align-items:stretch}.cg-stage{background:var(--plate);border:1px solid var(--hair);border-radius:4px;overflow:hidden;min-width:0;position:relative}.cg-stage-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid var(--hair)}.cg-stage-top .cg-tiny{font-size:10px}.cg-state-badge{font:12px/1.3 var(--mono);color:var(--on)}
.cg-graph{display:block;width:100%;height:450px;overflow:visible}.cg-graph text{font-family:var(--mono);fill:var(--ink)}.cg-graph .edge{fill:none;stroke:var(--on);stroke-width:2.5;opacity:.65}.cg-graph .edge.off{stroke:var(--hair);opacity:1}.cg-graph .edge.prevent{stroke:var(--cut)}.cg-graph .edge.cut{stroke:var(--cut);stroke-dasharray:5 7;opacity:.42}.cg-graph .edge-flow{fill:none;stroke:var(--on);stroke-width:3;stroke-dasharray:2 21;animation:flow 2.2s linear infinite;opacity:.35}.cg-graph .cut-mark{stroke:var(--cut);stroke-width:2.5}.cg-graph .node-shell{fill:var(--plate);stroke:var(--hair);stroke-width:1.5}.cg-graph .node-disc{fill:var(--paper);stroke:var(--hair);stroke-width:1.2;transition:fill .2s}.cg-graph .node-on .node-disc{fill:color-mix(in srgb,var(--on) 17%,var(--plate));stroke:var(--on);stroke-width:2}.cg-graph .node-value{font-size:38px;font-weight:600;fill:var(--soft)}.cg-graph .node-on .node-value{fill:var(--on)}.cg-graph .node-name{font-size:13px;font-weight:600}.cg-graph .node-role{font-size:10px;letter-spacing:.06em;fill:var(--soft)}.cg-graph .node-do .node-shell{stroke:var(--cut);stroke-width:3}.cg-graph .node-do .node-role{fill:var(--cut)}.cg-graph .node-changed .node-shell{stroke:var(--on);stroke-dasharray:3 4}.cg-graph [role="button"]{cursor:pointer;outline:none}.cg-graph [role="button"]:hover .node-shell,.cg-graph [role="button"]:focus .node-shell{stroke:var(--ink);stroke-width:3}.cg-graph .edge-label{font-size:9px;fill:var(--soft);letter-spacing:.08em}.cg-graph .change-label{font-size:10px;fill:var(--on)}
@keyframes flow{to{stroke-dashoffset:-46}}@media(prefers-reduced-motion:reduce){.cg-graph .edge-flow{animation:none}}
.cg-stage-bottom{padding:13px 18px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:11px;color:var(--soft)}.cg-key{display:inline-flex;gap:7px;align-items:center}.cg-dot{width:8px;height:8px;border-radius:50%;background:var(--on)}.cg-dot.off{background:var(--hair)}.cg-dot.cut{background:var(--cut)}
.cg-drawer{border-top:1px solid var(--hair);padding-top:13px;min-width:0}.cg-drawer-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cg-root-tools{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 18px}body[data-piece="causal-grammar"][data-page="interactive"] .cg-root-tools button{display:flex;align-items:center;justify-content:space-between;gap:15px;flex:1;min-width:80px;background:transparent;text-align:left;font-size:11px}.cg-root-tools b{color:var(--on);font-size:17px}.cg-editor-label{font-size:11px;color:var(--soft);display:block;margin-bottom:7px}
body[data-piece="causal-grammar"][data-page="interactive"] textarea{display:block;width:100%;font:12px/1.65 var(--mono);color:var(--ink);background:var(--plate);border:1px solid var(--hair);border-radius:3px;padding:12px;resize:vertical;min-height:180px;tab-size:2;letter-spacing:0}.cg-editor-actions{display:flex;gap:7px;margin-top:8px}.cg-result{display:block;font:11px/1.6 var(--mono);padding:15px 0;color:var(--soft);overflow-wrap:anywhere;min-height:64px}.cg-result.error{color:var(--cut)}.cg-grammar{border-top:1px solid var(--hair);padding-top:10px;color:var(--soft);font:10px/1.8 var(--mono)}.cg-grammar code{display:block;background:none;color:inherit;padding:0}.cg-hint{font-size:11px;color:var(--soft)}
.cg-worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.cg-world{background:var(--plate);border:1px solid var(--hair);border-radius:4px;min-width:0;overflow:hidden}.cg-world-title{display:flex;justify-content:space-between;align-items:center;padding:16px 17px}.cg-world .cg-graph{height:300px}.cg-observation{padding:0 17px;font-size:11px;color:var(--soft)}.cg-pair{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 17px;border-top:1px solid var(--hair)}.cg-pair-values{font-size:30px;line-height:1;color:var(--on);letter-spacing:.12em}.cg-world.changed .cg-pair-values{color:var(--cut)}.cg-verdict{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--hair);margin-top:20px;padding:18px 0;color:var(--soft);font-size:12px}.cg-verdict strong{color:var(--ink);font-weight:500;font-size:16px}
.cg-log-studio{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(285px,.85fr);gap:20px}.cg-distribution{background:var(--plate);border:1px solid var(--hair);padding:20px;min-width:0}.cg-context-tools{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:16px}.cg-bars{min-height:245px;display:flex;flex-direction:column;justify-content:center;gap:12px}.cg-bar-row{display:grid;grid-template-columns:75px minmax(0,1fr) 55px;gap:12px;align-items:center;font-size:11px}.cg-bar-track{height:25px;background:var(--paper);overflow:hidden;position:relative}.cg-bar-fill{height:100%;background:var(--on);opacity:.6;min-width:2px;transition:width .25s}.cg-bar-value{font-variant-numeric:tabular-nums;text-align:right}.cg-bars-note{margin-top:18px;font-size:11px;color:var(--soft)}body[data-piece="causal-grammar"][data-page="interactive"] table{width:100%;border-collapse:collapse;font:11px/1.5 var(--mono);margin-top:16px}body[data-piece="causal-grammar"][data-page="interactive"] th,body[data-piece="causal-grammar"][data-page="interactive"] td{padding:8px 4px;text-align:left;border-bottom:1px solid var(--hair);overflow-wrap:anywhere}body[data-piece="causal-grammar"][data-page="interactive"] th{color:var(--soft);font-weight:400}
.cg-readers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.cg-reader{background:var(--plate);border:1px solid var(--hair);min-width:0}.cg-reader-name{padding:12px 13px;font-size:11px}.cg-reader .cg-graph{height:180px}.cg-reader output{display:block;text-align:center;padding:10px;border-top:1px solid var(--hair);font-size:12px;color:var(--on)}.cg-reader:last-child output{color:var(--cut)}.cg-dictionary{padding:0 13px 12px;font-size:10px;line-height:1.7;color:var(--soft)}.cg-corpus textarea{min-height:128px}.cg-signal{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:15px 0;font-size:12px}.cg-prob-delta{margin-top:16px;padding:14px 0;border-top:1px solid var(--hair);font-size:12px;color:var(--soft)}.cg-prob-delta b{color:var(--on);font-weight:400}
.cg-boundaries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.cg-boundary{padding:22px;background:var(--plate);border:1px solid var(--hair);min-width:0}.cg-boundary svg{display:block;width:100%;height:190px;margin-bottom:15px}.cg-boundary-title{font:23px/1.2 var(--display);margin:14px 0}.cg-evidence-line{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-top:1px solid var(--hair);padding:12px 0;font-size:11px;color:var(--soft)}.cg-evidence-line span:last-child{color:var(--on);text-align:right}.cg-evidence-line.open span:last-child{color:var(--cut)}.cg-boundary-foot{font-size:11px;color:var(--soft);margin-top:8px}.cg-boundary a{color:var(--soft)}
@media(max-width:1000px){.cg-worlds{grid-template-columns:1fr}.cg-studio{grid-template-columns:minmax(0,1fr) 250px}.cg-graph{height:400px}.cg-log-studio{grid-template-columns:1fr 1fr}.cg-room-head{align-items:flex-start;flex-direction:column}.cg-boundary{padding:16px}.cg-world h3{font-size:20px}}
@media(max-width:730px){body[data-piece="causal-grammar"][data-page="interactive"] .cg-header,body[data-piece="causal-grammar"][data-page="interactive"] .cg-main{padding:18px 16px}.cg-header{align-items:flex-start!important}.cg-intro{display:none}body[data-piece="causal-grammar"][data-page="interactive"] .tabs button{font-size:12px;padding:13px 6px}.cg-tab-number{display:block;margin:0 0 3px}.cg-studio,.cg-log-studio{grid-template-columns:1fr}.cg-stage>.cg-graph{height:600px}.cg-drawer{display:grid;grid-template-columns:1fr;gap:0}.cg-worlds,.cg-boundaries{grid-template-columns:1fr}.cg-world .cg-graph{height:240px}.cg-world-title{padding-bottom:5px}.cg-verdict{align-items:flex-start;flex-direction:column;gap:8px}.cg-boundary svg{height:150px}.cg-readers{grid-template-columns:1fr}.cg-readers .cg-graph{height:200px}.cg-room-head{gap:12px}.cg-stage-top{padding:12px}.cg-stage-bottom{padding:12px}.cg-root-tools button{min-height:44px!important}.cg-tools{gap:6px}body[data-piece="causal-grammar"][data-page="interactive"] .cg-tools button{font-size:11px;padding:8px}.cg-bar-row{grid-template-columns:65px minmax(0,1fr) 48px;gap:8px}.cg-distribution{padding:16px}}
body[data-piece="causal-grammar"][data-page="interactive"] .cg-root-tools button{color:var(--ink)}body[data-piece="causal-grammar"][data-page="interactive"] .cg-root-tools button[aria-pressed="true"]{border-color:var(--on);color:var(--ink)}
