html,body{margin:0;min-height:100%;background:var(--surface-canvas)}
.pg{color-scheme:dark;min-height:100dvh;padding:24px 32px 32px;color:var(--text-primary);background:var(--bg-dark-spot) no-repeat fixed;font:14px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
.pg,.pg *{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}
.pg>*{max-width:1440px;margin-left:auto;margin-right:auto}
.pg [hidden]{display:none!important}
.pg a{color:var(--text-accent);text-decoration:none}.pg a:hover{text-decoration:underline;text-underline-offset:4px}
.pg :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.demo-header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.demo-header a{font-size:13px}.sample-label,.demo-note{color:var(--text-secondary);font-size:12px}
.demo-heading{margin-top:18px;margin-bottom:14px}.eyebrow{font:11px var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin:0 0 8px}
.pg h1{font:700 clamp(23px,3vw,30px)/1.2 var(--font-rounded);letter-spacing:-.02em;margin:0}
.permissions{margin-bottom:10px;padding:10px 12px;background:var(--accent-soft);border:1px solid var(--border-subtle);border-radius:10px}
.permissions-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.permissions-heading>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.permissions-heading h2{margin:0;font-size:12px;font-weight:600;color:var(--text-accent)}.permissions-heading p{margin:0;font-size:12px;color:var(--text-secondary)}
.permission-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 12px;list-style:none;margin:8px 0 0;padding:0}.permission-rules li{border-left:2px solid var(--accent);padding-left:8px;font-size:11px}.permission-rules strong{display:block;font-weight:600}.permission-rules li>span{display:block;color:var(--text-secondary);margin-top:3px}.permission-rules .rule-blocked{border-color:var(--danger)}.permission-rules .rule-blocked>span{color:var(--danger)}
.controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:0;margin-bottom:10px}
.pg button{font:600 13px var(--font-body);color:var(--text-primary);background:transparent;border:1px solid var(--border-strong);padding:9px 13px;border-radius:7px;cursor:pointer;min-height:44px}
.pg button:hover:not(:disabled){background:var(--surface-card)}.pg button:disabled{opacity:.4;cursor:default}
.pg button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);min-width:112px}.pg button.primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.05)}
#position{color:var(--text-secondary);font-size:12px;margin-left:6px}#compare{margin-left:auto;color:var(--text-accent);border-color:var(--accent)}
.workspace{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1fr);min-height:360px;height:clamp(360px,calc(100dvh - 340px),720px);border:1px solid var(--border-strong);border-radius:12px;overflow:hidden;background:var(--surface-canvas);box-shadow:var(--shadow-card)}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0}.pane+.pane{border-left:1px solid var(--border-subtle)}
.pane-heading{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:14px 18px;border-bottom:1px solid var(--border-subtle);background:var(--surface-card);min-height:52px}
.pane-heading h2{font-size:14px;font-weight:600;margin:0}.pane-heading>span{font-size:11px;color:var(--text-secondary)}
.chat,.log{padding:18px;overflow:auto;flex:1}.chat{display:flex;flex-direction:column;gap:20px}.message{font-size:14px;line-height:1.65;overflow-wrap:anywhere}.message small{display:block;font-size:11px;color:var(--text-secondary);margin-bottom:5px}.message.user{background:var(--surface-card);padding:12px;border-radius:8px}.message.answer{border-top:1px solid var(--border-subtle);padding-top:16px;color:var(--text-accent)}
.empty{color:var(--text-secondary);font-size:13px;line-height:1.6;margin:0}
.code{overflow:auto;flex:1;padding:18px 0;font:12px/1.8 var(--font-mono)}.code-line{display:grid;grid-template-columns:36px max-content;min-width:100%;width:max-content;padding-right:18px}.line-number{color:var(--text-muted);text-align:right;padding-right:12px;user-select:none}.line-text{white-space:pre}.code-line.active{background:var(--accent-soft);box-shadow:inset 2px 0 var(--accent)}.code-line.blocked{background:color-mix(in srgb,var(--danger) 10%,transparent);box-shadow:inset 2px 0 var(--danger)}.kw{color:var(--text-accent)}.str{color:var(--blue-300)}
.log{display:flex;flex-direction:column;gap:12px}.event{padding-bottom:12px;border-bottom:1px solid var(--border-subtle);font-size:12px}.event:last-child{border-bottom:0}.event-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-weight:600}.event-title{overflow-wrap:anywhere}.status{margin-left:auto;font-size:11px;color:var(--text-secondary)}.event.allowed .status,.event.succeeded .status{color:var(--text-accent)}.event.denied .status,.event.failed .status{color:var(--danger)}.event.check{padding:12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--accent-soft)}.event.check.denied{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}.event p{margin:7px 0 0;color:var(--text-secondary);overflow-wrap:anywhere}.event code{font:11px/1.6 var(--font-mono);overflow-wrap:anywhere}.event.check.denied p{color:var(--text-primary)}
.run-value{margin:8px auto 0;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-card)}.run-value dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}.run-value dl>div{padding:7px 10px;min-width:0}.run-value dl>div+div{border-left:1px solid var(--border-subtle)}.run-value dt{display:inline;font-size:11px;color:var(--text-secondary)}.run-value dd{display:inline;font:700 13px/1.4 var(--font-rounded);color:var(--text-accent);margin:0 0 0 6px}.run-value p{font-size:10px;color:var(--text-secondary);margin:0;overflow-wrap:anywhere}
.demo-note{margin-top:14px;margin-bottom:0}
.execution-state{padding:12px 18px;border-top:1px solid var(--border-subtle);background:var(--accent-soft);font-size:12px}.execution-state strong{color:var(--text-accent)}.execution-state p{margin:5px 0 8px;color:var(--text-secondary)}.execution-state>div{display:flex;flex-wrap:wrap;gap:6px 16px}.execution-state code{font:11px/1.6 var(--font-mono);overflow-wrap:anywhere}
.event.call{border:0;padding:0}.event-children{margin:12px 0 0 3px;padding-left:12px;border-left:1px solid var(--border-strong);display:flex;flex-direction:column;gap:18px}.event-children .event-children{margin-left:0;padding-left:0;border-left:0}.call-result{margin-top:12px;padding-top:10px;border-top:1px solid var(--border-subtle)}.call-result small{color:var(--text-accent);font-size:11px}.call-result p{margin:0}.call-result small+p{margin-top:5px}
.pg .blueprint-button{font-size:12px;min-height:32px;padding:5px 9px;color:var(--text-accent);flex-shrink:0}
.blueprint-context{margin:18px 0;padding:14px;background:var(--surface-card);border-radius:8px}.blueprint-context h3{font:600 13px var(--font-body);margin:0}.blueprint-context p{font-size:12px;color:var(--text-secondary);margin:6px 0 0}#blueprint-binding{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin:12px 0}#blueprint-binding>div{display:grid;gap:3px;font-size:12px}#blueprint-binding dt{color:var(--text-secondary)}#blueprint-binding dd{margin:0}#blueprint-binding code{display:block;font:11px/1.6 var(--font-mono);color:var(--text-secondary);overflow-wrap:anywhere;margin-top:3px}.blueprint-line.edited{background:var(--accent-soft);color:var(--text-accent);outline:2px solid var(--accent-soft)}
#blueprint-dialog{width:min(640px,calc(100vw - 32px));max-height:85dvh;overflow:auto;margin:auto;padding:24px;color:var(--text-primary);background:var(--surface-canvas);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow-card)}#blueprint-dialog[open]{display:flex;flex-direction:column}.blueprint-body{overflow:auto;min-height:0;padding:0 3px}.blueprint-heading,.blueprint-actions{flex-shrink:0}#blueprint-dialog::backdrop{background:rgb(0 0 0/.7)}.blueprint-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.blueprint-heading h2{margin:0;font:700 22px var(--font-rounded)}.blueprint-heading button{font-size:22px;padding:0;min-width:44px}#blueprint-description{color:var(--text-secondary);font-size:13px;margin:12px 0 20px}.blueprint-control{display:grid;grid-template-columns:1fr;gap:10px;font-size:13px;border:0;padding:0;margin:0;min-width:0}.blueprint-control legend{padding:0;margin-bottom:10px;font-weight:600}.permission-choice{display:flex;align-items:flex-start;gap:9px;padding:12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-card);cursor:pointer;min-width:0}.permission-choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}.permission-choice input{accent-color:var(--accent);width:16px;height:16px;margin:2px 0 0;flex-shrink:0}.pg .permission-choice input:focus-visible{outline:none}.permission-choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}.permission-choice strong{display:block;font-size:13px;font-weight:600;color:var(--text-primary)}.permission-choice small{display:block;font-size:11px;line-height:1.5;color:var(--text-secondary);margin-top:5px}
#blueprint-source{max-height:28dvh;overflow:auto;margin:18px 0;padding:16px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:8px;font:11px/1.65 var(--font-mono)}.blueprint-actions{padding-top:14px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.blueprint-actions>span{font-size:11px;color:var(--text-secondary)}
@media(max-width:1000px) and (min-width:761px){.pg{padding:20px}.workspace{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr)}.pane-heading,.chat,.log{padding:12px}.code{font-size:11px}.pane-heading>span{font-size:10px}}
@media(max-width:760px){.pg{padding:16px}.demo-header{align-items:flex-start}.sample-label{max-width:145px;text-align:right;font-size:10px}.demo-heading{margin-top:24px}.permissions{padding:12px}.permissions-heading{align-items:flex-start;flex-wrap:wrap}.permission-rules{grid-template-columns:1fr 1fr;gap:8px}.blueprint-control{grid-template-columns:1fr}#blueprint-binding>div{grid-template-columns:1fr;gap:3px}.controls{gap:6px}#position{margin-left:0}#compare{margin-left:0;flex-basis:100%}.workspace{height:auto;min-height:0;grid-template-columns:1fr}.pane+.pane{border-left:0;border-top:1px solid var(--border-subtle)}.chat{min-height:180px;max-height:320px}.code{max-height:340px;min-height:200px}.log{min-height:180px;max-height:440px}.pane-heading{padding:12px 16px}.demo-note{font-size:11px}}
@media(max-width:760px){.run-value dl{grid-template-columns:1fr 1fr}.run-value dl>div:nth-child(3){border-left:0}.run-value dl>div:nth-child(n+3){border-top:1px solid var(--border-subtle)}}
@media(prefers-reduced-motion:reduce){.pg *{scroll-behavior:auto!important}}

.blueprint-outcome{margin:16px 0;border-left:2px solid var(--accent);padding-left:12px;font-size:13px}.blueprint-outcome strong{font-size:12px;color:var(--text-accent)}.blueprint-outcome p{margin:4px 0 0;color:var(--text-secondary)}

.controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px}.controls button.primary{min-width:92px}.control-icon{width:17px;height:17px;flex-shrink:0}#run .control-icon{display:none}#run[data-state="play"] .icon-play,#run[data-state="pause"] .icon-pause,#run[data-state="replay"] .icon-replay{display:block}#previous{padding:9px;border-color:transparent;color:var(--text-secondary)}

.permission-rules strong{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 6px}.permission-status{font-size:9px;font-weight:500;color:var(--text-accent);border:1px solid var(--border-subtle);border-radius:3px;padding:0 4px}.rule-blocked .permission-status{color:var(--danger)}

.app-context{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:7px 12px;margin-bottom:6px;border:1px solid var(--border-subtle);border-radius:7px;font-size:11px;background:var(--surface-card)}.app-context h2{font:600 12px var(--font-body);margin:0}.context-source{font-size:10px;color:var(--text-secondary)}.app-context dl{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0}.app-context dl>div{display:flex;gap:5px}.app-context dt{color:var(--text-secondary)}.app-context dt::after{content:":"}.app-context dd{margin:0;color:var(--text-primary)}