/* Private AI demo. The company drawn as a floor plan: walls in ink, one doorway per step.
   Whatever crosses the wall is in the accent. */
.pv-brief {max-width:62rem}
.pv-q {min-height:1.05em;font:400 clamp(2.3rem,4.6vw,4.8rem)/1.02 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.pv-caret {display:inline-block;width:.06em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:var(--oxide);animation:pv-blink 1s steps(1) infinite}
.pv[data-state="done"] .pv-caret,.pv[data-phase]:not([data-phase="asking"]) .pv-caret,.pv:not([data-state]) .pv-caret {opacity:0;animation:none}
@keyframes pv-blink {50%{opacity:0}}
.pv-goal {max-width:48ch;margin-top:1.2rem;font:400 clamp(1.1rem,1.45vw,1.35rem)/1.5 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink-2)}

.pv-stage {display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,17.5rem);gap:clamp(2.5rem,5vw,5.5rem);margin-top:clamp(2.8rem,5vw,4.5rem);align-items:start}

/* The plan: four columns per row. Inside: the step and the local model. Then the wall. Then outside. */
.pv-plan {position:relative;padding:.4rem 0 .9rem}
.pv-draw {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pv-row {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 2px minmax(0,.95fr);column-gap:clamp(1.2rem,2.4vw,2.4rem);align-items:center}
.pv-steps {list-style:none;margin:0;padding:0}
.pv-row > :first-child {padding-left:clamp(1.1rem,2vw,1.8rem)}
.pv-wall {align-self:stretch}
.pv-heads {padding:1.1rem 0 1.3rem;align-items:start;font-size:.875rem;line-height:1.35;color:var(--ink-2)}
.pv-heads small {display:block;font-size:.8125rem;color:var(--ink-2);opacity:.8}
.pv-h-step {color:var(--ink-2)}
.pv-h-local,.pv-h-cloud {color:var(--ink)}
.pv-h-cloud {display:block}
.pv-h-cloud .brand-logo {width:16px;height:16px;margin-right:.45rem;vertical-align:-.18em}

.pv-step {min-height:4.6rem;padding:.55rem 0}
.pv-what {display:grid;gap:.25rem;justify-items:start}
.pv-what b {display:flex;gap:.6rem;font:400 1.0625rem/1.3 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;color:var(--ink);transition:color .35s,opacity .4s}
.pv-n {min-width:.7rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pv-tag {margin-left:1.3rem;padding:.1rem 0;font:inherit;font-size:.8125rem;line-height:1.4;color:var(--ink-2);background:none;border:0;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.3em;transition:color .25s,text-decoration-color .25s,opacity .4s}
.pv-tag span {margin-left:.45rem;color:var(--ink);white-space:nowrap}
.pv-tag span::before {content:'· ';color:var(--ink-2)}
.pv-step[data-route="cloud"] .pv-tag span {color:var(--oxide)}
.pv-tag:hover {color:var(--ink);text-decoration-color:var(--oxide)}
.pv-tag:focus-visible,.pv .demo-replay:focus-visible {outline:1px solid var(--oxide);outline-offset:3px}
.pv:not([data-phase="done"]):not(:not([data-state])) .pv-tag {cursor:default}
.pv-step.is-wait .pv-what b,.pv-step.is-wait .pv-tag {opacity:.32}
.pv-step.is-now .pv-n {color:var(--oxide)}

.pv-lane {position:relative;padding-left:1.15rem;font-size:.875rem;line-height:1.35;color:var(--ink)}
.pv-out {display:block;opacity:0;transform:translateY(4px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.pv-step.is-done .pv-out {opacity:1;transform:none}
.pv-l-cloud .pv-out {color:var(--oxide)}

/* Drawn by the script. */
.pv-walls {fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:square;transition:stroke-dashoffset 1.1s var(--ease)}
.pv-leaf {stroke:var(--ink);stroke-width:2;transform-box:view-box;transition:transform .55s var(--ease)}
.pv-swing {fill:none;stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 3;opacity:0;transition:opacity .4s}
.pv-g.is-open .pv-leaf {transform:rotate(-90deg)}
.pv-g.is-open .pv-swing {opacity:.7}
.pv-trail {stroke:var(--ink-2);stroke-width:1;opacity:0;transition:opacity .4s}
.pv-g.is-shown .pv-trail {opacity:.55}
.pv-g.is-cloud .pv-trail {stroke:var(--oxide);opacity:0}
.pv-g.is-cloud.is-shown .pv-trail {opacity:.85}
.pv-end {fill:var(--ink);opacity:0;transition:opacity .3s}
.pv-g.is-shown .pv-end {opacity:1}
.pv-g.is-cloud .pv-end {fill:var(--oxide)}
.pv-packet {fill:var(--ink);opacity:0}
.pv-packet.is-on {opacity:1}
.pv-g.is-cloud .pv-packet {fill:var(--oxide)}

/* Readout. */
.pv-read {padding-top:.4rem;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.pv-read.is-off {opacity:0;transform:translateY(8px)}
.pv-bytes {margin:0;display:grid;gap:1.1rem}
.pv-bytes dt {font-size:.875rem;color:var(--ink-2)}
.pv-bytes dd {margin:.2rem 0 0;font:400 clamp(2rem,2.8vw,2.6rem)/1 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.pv-b-out dd {color:var(--oxide)}
.pv-verdict {min-height:4.1em;margin-top:1.5rem;font:400 1.1875rem/1.45 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink)}
.pv.is-leak .pv-verdict {color:var(--oxide)}
.pv-evals {width:100%;margin-top:1.6rem;border-collapse:collapse;font-size:.875rem;font-variant-numeric:tabular-nums}
.pv-evals caption {caption-side:top;text-align:left;padding-bottom:.6rem;font-size:.8125rem;line-height:1.5;color:var(--ink-2)}
.pv-evals th,.pv-evals td {padding:.42rem 0;border-top:1px solid var(--rule);text-align:right;font-weight:400;color:var(--ink-2)}
.pv-evals th:first-child {text-align:left}
.pv-evals thead th {font-size:.8125rem}
.pv-evals tbody tr {opacity:.3;transition:opacity .4s}
.pv-evals tbody tr.is-on {opacity:1}
.pv-evals td.is-pick {color:var(--ink);font-weight:500}
.pv-evals td.is-low {color:var(--oxide)}
.pv[data-reset] *,.pv[data-reset] *::before,.pv[data-reset] *::after {transition:none!important}

/* Before the script runs: the finished plan as text, walls as plain rules. */
.pv:not([data-state]) .pv-steps {border-left:2px solid var(--ink)}

@media(max-width:1100px){
 .pv-stage {grid-template-columns:1fr}
 .pv-read {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3rem;align-items:start}
 .pv-bytes,.pv-verdict {grid-column:1}
 .pv-evals {grid-column:2;grid-row:1/3;margin-top:0}
}
@media(max-width:700px){
 .pv-row {grid-template-columns:minmax(0,1fr) 2.6rem 2px 2.6rem;column-gap:.8rem}
 .pv-row > :first-child {padding-left:.9rem}
 .pv-heads {font-size:.75rem}
 .pv-heads small,.pv-h-cloud .brand-logo {display:none}
 .pv-h-step {visibility:hidden}
 .pv-h-local,.pv-h-cloud {font-size:0}
 .pv-h-local::after {content:'Local';font-size:.75rem}
 .pv-h-cloud::after {content:'Claude';font-size:.75rem}
 .pv-out {display:none}
 .pv-what b {font-size:.9375rem}
 .pv-tag {margin-left:1.3rem;font-size:.75rem;white-space:nowrap}
 .pv-row {grid-template-columns:minmax(0,1fr) 2.2rem 2px 2.4rem}
 .pv-read {display:block}
 .pv-evals {margin-top:1.6rem}
}