:root{--play-border:#d9dfe7;--play-blue:#215b83}
.workspace-main.playground{padding-top:45px;max-width:1500px}
.playhead{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--play-border);padding-bottom:38px}
.playhead h1{font:400 clamp(48px,5.2vw,75px)/1.06 'Source Serif 4',Georgia,serif;letter-spacing:-.045em}
.playhead p{font-size:19px;margin-top:18px;color:#4b5565}
.playstate{font-size:16px;color:#215b83;border:1px solid #c7d6e2;padding:11px 15px;flex-shrink:0}
.connection{border-bottom:1px solid var(--play-border);padding:20px 0}.connection summary,.live-compute summary{cursor:pointer;font-size:17px;color:var(--play-blue)}
.connect-row{display:flex;gap:12px;align-items:center;margin-top:20px;flex-wrap:wrap}.connect-row input{width:min(500px,100%);border:1px solid var(--play-border);padding:13px;font:inherit}.connect-row span{font-size:16px;color:#4b5565}
.module-title{margin:60px 0 30px}.module-title h2{font:400 clamp(55px,5.5vw,88px)/1.04 'Source Serif 4',Georgia,serif;letter-spacing:-.055em}.module-title p{font-size:20px;line-height:1.5;margin-top:15px;color:#4b5565}
.play-form{display:flex;flex-wrap:wrap;gap:22px 28px;margin:35px 0}.play-form label{flex:1 1 185px;min-width:0;font-size:16px;font-weight:540;display:flex;flex-direction:column;gap:11px}.play-form label.wide{flex-basis:100%}
.play-form input,.play-form textarea,.play-form select{font:inherit;font-size:18px;color:#1c2230;border:1px solid var(--play-border);border-radius:2px;background:white;padding:13px 14px;min-height:50px;width:100%;resize:vertical}
.play-form input:focus,.play-form textarea:focus,.play-form select:focus{outline:2px solid var(--play-blue);outline-offset:0}
.action-line{width:100%;display:flex;gap:15px;align-items:center;flex-wrap:wrap}
.primary-action,.quiet-action,.connect-row button{border:1px solid #1c2230;background:#1c2230;color:white;font:inherit;font-size:17px;padding:15px 24px;cursor:pointer;border-radius:2px}
.quiet-action{background:transparent;color:#215b83;border-color:#b1c2d2}.primary-action:hover,.connect-row button:hover{background:#215b83;border-color:#215b83}.quiet-action:hover{border-color:#215b83}
.play-output{border-top:1px solid var(--play-border);margin-top:34px;padding-top:30px;min-height:80px;font-size:18px;line-height:1.5}
.play-output:empty{display:none}.play-output h3{font:400 clamp(26px,3vw,42px)/1.2 'Source Serif 4',serif;margin:8px 0 22px}
.play-output p{font-size:18px;max-width:760px;line-height:1.55;margin:12px 0}.play-output .play-summary{font-size:17px;color:#4b5565}
.measure-row{display:flex;flex-wrap:wrap;gap:20px;margin:15px 0;border-top:1px solid var(--play-border)}.measure{min-width:150px;flex:1;padding:20px 8px 10px 0}.measure .measure-name{display:block;font-size:15px;color:#4b5565;margin-bottom:12px}.measure strong{display:block;overflow-wrap:anywhere;font:400 clamp(34px,4.2vw,57px)/1.1 'Source Serif 4',Georgia,serif;letter-spacing:-.045em}
.play-tokens{display:flex;flex-wrap:wrap;gap:5px;margin:18px 0}.play-tokens button{background:#fff;border:1px solid var(--play-border);padding:11px 9px;font:inherit;font-size:17px;cursor:pointer}.play-tokens button.active{background:#215b83;border-color:#215b83;color:#fff}
.feature-list{border-top:1px solid var(--play-border)}.feature-list button{background:none;width:100%;border:0;border-bottom:1px solid var(--play-border);font-size:17px;padding:15px 0;color:#1c2230;display:flex;justify-content:space-between;text-align:left;cursor:pointer}.feature-list button:hover{color:#215b83}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#d9dfe7;border:1px solid var(--play-border);margin-top:22px}.comparison>div{background:#fdfdfc;padding:24px;min-width:0}.comparison h4{font-size:16px;font-weight:600;color:#4b5565;margin:0 0 18px}.comparison p{font:400 clamp(20px,2.1vw,28px)/1.45 'Source Serif 4',Georgia,serif;white-space:pre-wrap;overflow-wrap:anywhere}
.weight-label{font-size:20px;padding-top:41px;min-width:33px}
#play-circuit{display:block;width:100%;height:auto;max-height:520px;background:#f7f8f9;border-top:1px solid var(--play-border);border-bottom:1px solid var(--play-border)}
#play-circuit circle{cursor:pointer}#play-circuit circle:focus{outline:none;stroke:#1c2230;stroke-width:3}
.live-compute{border-top:1px solid var(--play-border);margin-top:40px;padding:24px 0}.live-compute summary{color:#1c2230}.live-compute[open] summary{color:#215b83}
.bar-track{height:10px;background:#e5e8ee;margin-top:23px;max-width:650px}.bar-fill{height:100%;background:#215b83;transition:width .25s}
.play-failure{color:#964939;font-size:18px}
.playground .workspace-panel{margin-top:0}.playground button:focus-visible,.playground summary:focus-visible{outline:2px solid #215b83;outline-offset:3px}
@media(max-width:900px){.playhead{display:block}.playstate{display:inline-block;margin-top:22px}.workspace-main.playground{padding-top:35px}.module-title{margin-top:40px}}
@media(max-width:700px){.workspace-main.playground{padding:25px 21px 55px}.playhead h1{font-size:44px}.playhead p{font-size:18px}.module-title h2{font-size:59px}.module-title p{font-size:17px}.play-form{gap:16px}.play-form label{flex-basis:100%}.play-form input,.play-form select,.play-form textarea{font-size:16px}.comparison{grid-template-columns:1fr}.comparison>div{padding:18px}.play-output{margin-top:20px}.primary-action,.quiet-action{font-size:16px}.measure{min-width:125px}.connection summary{font-size:16px}}
/* Let the primary example and its controls occupy the first viewport. */
.playhead{justify-content:flex-end;min-height:0;padding:0 0 10px;border:0}
.playstate{padding:8px 11px;font-size:15px}
.connection{padding:11px 0 18px}
.module-title{margin:30px 0 22px}
.module-title h2{font-size:clamp(48px,4.7vw,73px)}
.module-title p{margin-top:9px;font-size:18px}
.play-form{margin:24px 0;gap:16px 24px}
.play-form label{gap:8px}
.play-form textarea{min-height:70px}
.action-line{margin-top:0}
@media(max-width:700px){.module-title{margin:23px 0 20px}.module-title h2{font-size:52px}.playhead{padding-bottom:7px}}

.playground button:disabled{opacity:.52;cursor:default} .playground [hidden]{display:none!important}

/* Clear availability state for sample-first research controls. */
.api-soon{font-size:15px;line-height:1.5;color:#747982;margin:8px 0 15px}
.workspace-panel .primary-action:disabled,.workspace-panel .quiet-action:disabled{background:#edf0f2!important;border-color:#d8dce1!important;color:#838a92!important;box-shadow:none!important;opacity:1;cursor:not-allowed}
.api-soon[hidden]{display:none!important}

/* Preset examples remain usable while custom prompt entry awaits the API. */
.playground textarea[readonly]{background:#f0f1f3!important;border-color:#d9dce1!important;color:#828791!important;-webkit-text-fill-color:#828791;cursor:not-allowed;resize:none}
.playground .api-pending-note{margin:0 0 25px;font-size:17px;color:#535c68}
.playground .live-compute[hidden],#api-disclosure[hidden],#public-api-note[hidden]{display:none!important}

/* Keep API availability text aligned under the locked Prompt input. */
.playground .play-form .api-pending-note{flex:0 0 100%;width:100%;margin:-13px 0 0;padding:0;font-size:16px;line-height:1.45;color:#626b75}
@media(max-width:700px){.playground .play-form .api-pending-note{margin:-8px 0 0}}

/* Hide untouched response containers until the corresponding action is invoked. */
.playground .play-output:empty{display:none!important}
.playground #play-circuit:empty{display:none!important}

/* Retired legacy result footnotes. Keep factual result content visible. */
.playground .demo-status{display:none!important}

/* Evidence-first generation comparison, feature inspection and evaluation. */
.probability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.probability-card{background:#f5f7fa;border:1px solid #d7e0e9;padding:22px;min-width:0}
.probability-card h4{font-size:17px;margin:0 0 12px;color:#566576}
.probability-number{font:400 clamp(35px,4.2vw,59px)/1.1 'Source Serif 4',Georgia,serif;letter-spacing:-.04em}
.probability-track{height:11px;background:#dce6ee;margin-top:20px;overflow:hidden}
.probability-fill{display:block;height:100%;background:#809bb0}
.probability-edited .probability-fill{background:#215b83}
.probability-edited .probability-number{color:#215b83}
.generation-insight{display:flex;flex-direction:column;gap:7px;border-left:4px solid #215b83;padding:5px 0 5px 17px;margin:18px 0 24px}
.generation-insight strong{font-size:23px;font-weight:550}.generation-insight span{font-size:18px;color:#526479}
.eval-metric-row{display:grid;grid-template-columns:1.1fr .7fr 1.9fr;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid #d9dfe7}
.eval-metric-name{font-size:18px;font-weight:550}.eval-metric-row strong{font:400 36px/1.15 'Source Serif 4',serif}
.eval-metric-row p{margin:0!important;font-size:16px!important;color:#526479}
.eval-context{padding:22px 0}.eval-context strong{font-size:19px}.eval-context p{margin:4px 0!important}
.evidence-link{display:inline-block;font-size:17px;border-bottom:1px solid #215b83;margin:8px 24px 12px 0;color:#215b83}
.interpret-token-row{padding:26px 0;display:flex;flex-wrap:wrap;gap:3px;align-items:center;line-height:1.8}
.token-evidence{padding:4px 6px;font:400 23px/1.5 'Source Serif 4',Georgia,serif;white-space:pre-wrap}
.token-evidence.active{background:#d5e7f4;color:#194f75;border-radius:2px}
.activation-rows{max-width:630px;border-top:1px solid #d9dfe7}
.activation-row{display:flex;justify-content:space-between;gap:20px;padding:17px 10px;border-bottom:1px solid #d9dfe7}
@media(max-width:750px){.probability-grid{grid-template-columns:1fr}.eval-metric-row{grid-template-columns:1fr;gap:6px}}

/* Direct circuit inspection. */
.circuit-viewport{position:relative}
.circuit-tooltip{position:absolute;z-index:8;pointer-events:none;max-width:260px;display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid #aabfcf;box-shadow:0 5px 18px rgba(12,45,65,.13);padding:12px 14px;color:#203347;font-size:14px;line-height:1.4}
.circuit-tooltip strong{font-size:16px;font-weight:600}.circuit-tooltip span{color:#516276}
.circuit-tooltip[hidden]{display:none!important}

/* Responsive linked model, SAE, layer and metric selection. */
.evaluate-form label{flex:1 1 210px}.evaluate-form #benchmark-sae{font-size:16px}.evaluate-form #benchmark-model,.evaluate-form #benchmark-layer{font-size:17px}