/* Manrope is bundled under the SIL Open Font License; see MANROPE-LICENSE. */
@font-face{font-family:Manrope;src:url('/static/manrope-variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:root{color-scheme:light;--ink:#18251e;--muted:#626c64;--paper:#f5f2e9;--line:#cecfc4;--lime:#d1f653}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1180px;margin:auto;padding:26px 28px 40px}header,.statusHeader{display:flex;align-items:center;justify-content:space-between;gap:16px}header{padding-bottom:24px;border-bottom:1px solid var(--line)}a{color:inherit;text-underline-offset:3px}.brand{font-weight:750;text-decoration:none}.tag{font-size:12px;padding:7px 12px;background:#e7eadf;border-radius:30px}.intro{padding:36px 0 28px;max-width:680px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}h1{font-size:clamp(44px,7vw,76px);letter-spacing:-.065em;line-height:1;margin:14px 0}p{line-height:1.55}.intro>p:last-child{font-size:17px;color:var(--muted)}.cameras{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#e4e6dc}figure img,figure canvas{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;color:var(--muted);font-size:13px}figcaption{display:flex;justify-content:space-between;padding:10px 12px;font-size:12px}figcaption span{color:var(--muted)}.layout{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}.panel{border:1px solid var(--line);border-radius:12px;background:#fffdf6;padding:26px}h2{font-size:20px;letter-spacing:-.025em;margin:0 0 22px}.statusHeader h2{margin:0}.statusHeader{margin-bottom:20px}label{display:block;font-size:13px;font-weight:650;margin:19px 0 8px}input,select,textarea{width:100%;background:#fff;border:1px solid #b9beb3;border-radius:6px;padding:12px;font:inherit;color:var(--ink)}textarea{resize:vertical;min-height:110px}.help,.disclosure{font-size:12px;color:var(--muted)}.disclosure{padding:12px;background:#f0f1e7;border-radius:6px}button{font:650 13px system-ui;border:1px solid #b9beb3;border-radius:6px;background:transparent;color:var(--ink);padding:11px 14px;cursor:pointer}button:hover:not(:disabled){background:#edf1e3}button:disabled{opacity:.45;cursor:default}.primary{width:100%;background:var(--lime);border-color:#a9c845;font-size:15px;padding:14px}.primary:hover:not(:disabled){background:#bfe83b}.danger{color:#a72c24;border-color:#d5a29c}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}#message{font-size:13px;min-height:22px}.error{color:#a72c24}dl{display:grid;grid-template-columns:120px 1fr;font-size:13px;gap:14px;margin:24px 0}dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere}#queue,#events{padding-left:22px;font-size:13px;line-height:1.6}#queue li{padding:5px 0}.history{margin-top:24px}.history select{max-width:330px;font-size:13px}#events{max-height:380px;overflow:auto}#events li{padding:10px 0;border-bottom:1px solid #ecece5}#events time{display:block;color:var(--muted);font-size:11px}video{width:100%;margin-top:14px;background:#111;border-radius:8px}footer{padding-top:24px;font-size:12px;color:var(--muted)}[hidden]{display:none!important}:focus-visible{outline:3px solid #6e9633;outline-offset:3px}@media(max-width:740px){main{padding:18px 16px}.layout{grid-template-columns:1fr}.panel{padding:20px}.intro{padding-top:22px}.cameras{gap:6px}figcaption{padding:7px;font-size:10px;display:block}figcaption span{display:block}.history .statusHeader{align-items:start;flex-direction:column}.history select{max-width:none}dl{grid-template-columns:95px 1fr}}
:root .unavailable{visibility:hidden}


main{max-width:1540px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.runnerContent{min-width:0}.visitorChat{position:sticky;top:20px;padding:20px}.visitorChat h2{margin-bottom:12px}#chatMessages{padding:0;list-style:none;height:340px;overflow:auto;overflow-wrap:anywhere;font-size:13px}#chatMessages li{padding:10px 0;border-bottom:1px solid var(--line);white-space:pre-wrap}#chatMessages strong{display:block}#chatSend{margin-top:12px;width:100%}@media(max-width:1050px){main{grid-template-columns:1fr}.visitorChat{position:static}#chatMessages{height:260px}}

#chatMessages time{font-weight:400;color:var(--muted);font-size:12px;white-space:nowrap}

figure video{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;margin:0;border-radius:0;background:#101714}

.coffeeSupport{text-align:center;margin-top:28px}.coffeeSupport a{display:inline-block;text-decoration:none;font-weight:650;border:1px solid;background:#ffdd00;border-color:#d4b800;color:#25220f;font-size:16px;padding:14px 24px;border-radius:10px}.coffeeSupport a:hover{background:#f1cf00}.coffeeSupport .help{margin:8px 0 0}

#conversation{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}:is(#conversationMessages,#sampleConversationMessages){list-style:none;padding:0;max-height:520px;overflow:auto}:is(#conversationMessages,#sampleConversationMessages) li{padding:16px;margin:10px 0;border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow-wrap:anywhere}:is(#conversationMessages,#sampleConversationMessages) p{white-space:pre-wrap;font-size:13px;margin:8px 0}:is(#conversationMessages,#sampleConversationMessages) strong{font-size:13px}:is(#conversationMessages,#sampleConversationMessages) pre{white-space:pre-wrap;font-size:12px}:is(#conversationMessages,#sampleConversationMessages) summary{cursor:pointer;font-size:12px}

.liveConversation{margin:20px 0}#currentPrompt{white-space:pre-wrap;overflow-wrap:anywhere}:is(#liveConversationMessages,#sideConversationMessages){list-style:none;padding:0;max-height:520px;overflow:auto}:is(#liveConversationMessages,#sideConversationMessages) li{padding:16px;margin:10px 0;border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow-wrap:anywhere}:is(#liveConversationMessages,#sideConversationMessages) p,:is(#liveConversationMessages,#sideConversationMessages) pre{white-space:pre-wrap;font-size:13px;margin:8px 0}:is(#liveConversationMessages,#sideConversationMessages) strong,:is(#liveConversationMessages,#sideConversationMessages) summary{font-size:13px}

/* Compact desktop cameras; retain readable feeds on phones. */
@media(min-width:741px){.cameras,.panel[aria-label="What’s running"],.liveConversation{width:66.6667%;margin-inline:auto}}

.liveDashboard{margin-bottom:24px}.liveDashboard .panel{width:100%;min-width:0}.liveMain{min-width:0}.liveMain .liveConversation{margin-bottom:0}.robotQueue{margin-top:20px}.robotQueue .statusHeader{flex-wrap:wrap}.robotQueue dl{grid-template-columns:minmax(0,1fr);gap:6px}.robotQueue dd{margin-bottom:10px}.layout{grid-template-columns:minmax(0,1fr)}
@media(min-width:741px){.cameras{margin-inline:auto}.liveDashboard{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:24px;align-items:start}.liveDashboard{grid-template-columns:66.6667% minmax(0,1fr)}.robotQueue{margin-top:0;padding:18px}}

.astraStream{margin-top:20px;border-left:3px solid #a9c845}.astraStream .statusHeader{flex-wrap:wrap;margin-bottom:10px}.astraStream .help{margin:0 0 16px}#astraStreamOutput{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.7;margin:0;max-height:360px;overflow:auto}#astraStreamTime{display:block;margin-top:14px;font-size:12px;color:var(--muted)}#astraStreamTime[hidden]{display:none}
.messageImages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.messageImages img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}

:is(#liveConversationMessages,#sideConversationMessages) .conversationHeading,:is(#conversationMessages,#sampleConversationMessages) .conversationHeading{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin-bottom:14px;font-size:14px}
.conversationHeading time{font:400 12px system-ui;color:var(--muted);white-space:nowrap}
.systemPromptReference{display:block;margin:0 0 18px;padding:7px 10px;font-size:12px;color:var(--muted);background:#edf0e7;text-align:left}
.requestContent section{margin:16px 0}.requestContent h4{font:650 12px system-ui;color:var(--muted);margin:0 0 6px}
:is(#liveConversationMessages,#sideConversationMessages) .requestContent pre,:is(#conversationMessages,#sampleConversationMessages) .requestContent pre{font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;padding:12px;background:#eaece4;border-radius:6px;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
:is(#liveConversationMessages,#sideConversationMessages) .requestContent p,:is(#conversationMessages,#sampleConversationMessages) .requestContent p{font:14px/1.65 system-ui;margin:6px 0}
:is(#liveConversationMessages,#sideConversationMessages) .astraResponse,:is(#conversationMessages,#sampleConversationMessages) .astraResponse{font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}
.conversationTurn>.messageImages{margin-top:18px}.conversationTurn>details{margin-top:18px}

/* Visitor chat opens on every page load. */
main.chatClosed{grid-template-columns:minmax(0,1fr)}.visitorChatHeading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.visitorChatHeading h2{margin:0}.visitorChatHeading button{padding:7px 10px}.openVisitorChat{position:fixed;right:20px;bottom:20px;z-index:20;background:var(--lime);box-shadow:0 3px 14px #0002}

/* One encoded frame contains all four synchronized camera tiles. */
.synchronizedCamera{grid-column:1/-1}.synchronizedCamera video{aspect-ratio:16/9}

/* Four visible camera panels share a single decoded stream. */
.cameras{position:relative}.syncSource{position:absolute!important;left:0;top:0;width:1px!important;height:1px!important;overflow:hidden;opacity:.001;pointer-events:none}.syncSource video{width:1px!important;height:1px!important}.syncTilePicture{position:relative;background:#101714}.syncTile canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}.expandCamera{position:absolute;right:6px;bottom:6px;background:#101714ad;color:white;border:0;border-radius:4px;padding:3px 7px;font-size:18px;line-height:1.2}.syncTile:fullscreen{display:flex;flex-direction:column;background:#101714;justify-content:center}.syncTile:fullscreen canvas{max-height:90vh;object-fit:contain}.syncTile:fullscreen figcaption{color:white}.syncTile:fullscreen .syncTilePicture{width:100%;height:90vh}.syncTile:fullscreen canvas{height:90vh}

/* Shared live and recorded conversation: outgoing right, Astra left. */
:is(#liveConversationMessages,#sideConversationMessages),:is(#conversationMessages,#sampleConversationMessages){padding:8px 2px;scrollbar-gutter:stable}
:is(#liveConversationMessages,#sideConversationMessages) li.conversationTurn,:is(#conversationMessages,#sampleConversationMessages) li.conversationTurn,.aspireActivityLog li.conversationTurn{box-sizing:border-box;width:88%;max-width:720px;margin-block:14px;padding:16px 18px;border:1px solid #dce0d4;border-radius:18px;box-shadow:0 2px 5px #17201405}
:is(#liveConversationMessages,#sideConversationMessages) li.conversationOutgoing,:is(#conversationMessages,#sampleConversationMessages) li.conversationOutgoing,.aspireActivityLog li.conversationOutgoing{margin-left:auto;margin-right:0;background:#eef3de;border-bottom-right-radius:5px}
:is(#liveConversationMessages,#sideConversationMessages) li.conversationIncoming,:is(#conversationMessages,#sampleConversationMessages) li.conversationIncoming,.aspireActivityLog li.conversationIncoming{margin-left:0;margin-right:auto;background:#fffef9;border-bottom-left-radius:5px}
:is(#liveConversationMessages,#sideConversationMessages) .astraResponse,:is(#conversationMessages,#sampleConversationMessages) .astraResponse,.aspireActivityLog .astraResponse{font:14px/1.7 system-ui,sans-serif}
:is(#liveConversationMessages,#sideConversationMessages) .conversationHeading,:is(#conversationMessages,#sampleConversationMessages) .conversationHeading,.aspireActivityLog .conversationHeading{margin-bottom:10px}
.conversationHeading time{font-size:10px;opacity:.75}
.conversationTurn .systemPromptReference{display:inline-block;margin-bottom:8px;padding:3px 0;background:transparent;font-size:11px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){:is(#liveConversationMessages,#sideConversationMessages) li.conversationTurn,:is(#conversationMessages,#sampleConversationMessages) li.conversationTurn,.aspireActivityLog li.conversationTurn{width:94%;padding:13px 14px}.conversationHeading time{font-size:10px}}
/* Shared public recording list beside the live conversation. */
.pastRuns { min-width: 0; align-self: start; }
@media(min-width: 741px) { .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
#pastRunsList { list-style: none; padding: 0; display: grid; gap: 14px; max-height: 700px; overflow-y: auto; }
.pastRunCard { display: block; box-sizing: border-box; width: 100%; padding: 0; overflow: hidden; text-align: left; border: 1px solid #b9beb3; border-radius: 6px; background: transparent; color: var(--ink); font: 650 13px system-ui; }
.pastRunCard video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #10171c; pointer-events: none; }
.pastRunLabel, .pastRunPrompt { display: block; padding: 8px 12px; }
.pastRunLabel { font-size: .8rem; opacity: .75; }
.pastRunPrompt { padding-top: 0; line-height: 1.45; overflow-wrap: anywhere; }
#pastRunDialog { box-sizing: border-box; width: min(1200px, 94vw); max-height: 94dvh; overflow: auto; padding: 24px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
#pastRunDialog::backdrop { background: #000c; }
.replayEmailActions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
#replayEmailDialog { box-sizing: border-box; width: min(440px, 94vw); padding: 24px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
#replayEmailDialog::backdrop { background: #0008; }
#replayEmailForm { display: grid; gap: 12px; }
#pastRunVideo { width: 100%; max-height: 68dvh; background: #000; }
#pastRunPrompt { white-space: pre-wrap; overflow-wrap: anywhere; }

.requestContent>details{margin-top:12px;color:var(--muted);font-size:12px}.requestContent>details>summary{cursor:pointer}.conversationTurn p{overflow-wrap:anywhere}

#sampleConversationDialog{box-sizing:border-box;width:min(850px,94vw);max-height:94dvh;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--paper);color:var(--ink)}#sampleConversationDialog::backdrop{background:#0008}#sampleConversationMessages{list-style:none;max-height:65vh;overflow:auto;line-height:1.6}#sampleConversationMessages li{overflow-wrap:anywhere}#sampleConversationMessages pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* Personal queue-to-viewer handoff. */
#yourQueue,#liveViewer{scroll-margin-block:24px;transition:box-shadow .25s,border-color .25s}
.queuePlace{border-top:1px solid var(--line);padding-top:20px;margin:20px 0}
.queuePlace h3{font-size:14px;margin:0 0 8px}.queuePlace>strong{display:block;font-size:42px;line-height:1.15;letter-spacing:-.04em}.queuePlace p{font-size:13px;margin:10px 0 0}
#yourQueue.yourTurnWaiting{border-color:#6e9633;box-shadow:0 0 0 4px #d1f65380}.yourTurnWaiting .queuePlace>strong{color:#42651c}
#liveViewer.yourRunLive{border-radius:12px;outline:3px solid #6e9633;outline-offset:8px;box-shadow:0 0 0 12px #d1f65340}
#liveConversationPanel.yourTaskReview{outline:3px solid #6e9633;outline-offset:4px;box-shadow:0 0 0 8px #d1f65340}
.viewerCue{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:14px 16px;background:var(--lime);border-radius:8px}.viewerCue strong{font-size:20px}.viewerCue span{font-size:13px}
@media(prefers-reduced-motion:reduce){#yourQueue,#liveViewer{transition:none}}

/* Robot status keeps its text label so color is not the only signal. */
#station{font-weight:650;color:var(--muted)}
#station::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:middle}
#station[data-tone="waiting"]{color:#8a5300}
#station[data-tone="ready"]{color:#28643b}
#station[data-tone="active"]{color:#245e9a}
#station[data-tone="error"]{color:#a72c24}

.publicRunError{color:#a72c24;background:#fff0ed;border-left:3px solid #a72c24;padding:10px 12px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.runOutcome{padding:16px;border:1px solid #bdd2bf;border-left:4px solid #28643b;border-radius:8px;background:#f0f7ef;color:var(--ink);overflow-wrap:anywhere}
.runOutcome[data-tone="warning"]{background:#fff8eb;border-color:#e0c795;border-left-color:#8a5300}
.runOutcomeHeading{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}.runOutcomeHeading strong{font-size:20px;color:#28643b}.runOutcome[data-tone="warning"] strong{color:#8a5300}
.runOutcomeHeading span{font-size:12px;color:var(--muted)}.runOutcome p{margin:8px 0 0;line-height:1.5;white-space:pre-wrap}.runOutcome .help{font-size:12px}
.streamHealth{display:inline-block;margin-left:8px;font-weight:650;color:#626c64}.streamHealth::before{content:'●';margin-right:5px}.streamHealth[data-state="live"]{color:#28643b}.streamHealth[data-state="stalled"]{color:#a72c24}.streamHealth[data-state="behind"],.streamHealth[data-state="delayed"]{color:#8a5300}#streamHealthDetail{margin-left:8px;font-variant-numeric:tabular-nums}
/* Small countdown at the top center of the cameras, visible to every viewer. */
#liveViewer{position:relative}
.liveStopwatch{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;padding:5px 8px;border:1px solid #ffffff38;border-radius:6px;background:#18251edb;color:#fff;pointer-events:none}
#runTimer{font-size:15px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* Watch the robot and read its conversation in one viewport. */
.watchLayout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;margin-bottom:24px;align-items:stretch}
.watchLayout.conversationClosed{grid-template-columns:minmax(0,1fr)}
.watchLayout .liveConversation[hidden]{display:none}
#openLiveConversation{margin:0;padding:4px 6px;border:0;font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap}
.watchVisuals{min-width:0;display:flex;flex-direction:column;gap:12px}
.watchLayout .panel,.watchLayout .cameras{width:100%;margin:0;min-width:0}
.watchLayout .panel{padding:18px}
.watchLayout .cameras{gap:8px;flex-shrink:0}
.watchLayout .panel[aria-label="What’s running"] h2{font-size:15px;margin-bottom:6px}
.watchLayout #whatsRunning{margin:0;font-size:13px;max-height:60px;overflow:auto;white-space:pre-wrap}
.watchLayout .astraStream{min-height:0;overflow:auto}
.watchLayout #astraStreamOutput{font-size:14px;max-height:none}
.watchLayout .liveConversation{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}
.watchLayout .liveConversation>h2{font-size:15px;margin-bottom:0}
.watchLayout #sideRunner{margin:6px 0}
.watchLayout #sidePrompt{font-size:13px;max-height:72px;overflow:auto;margin:0 0 16px;flex-shrink:0}
.watchLayout .statusHeader{gap:8px;flex-wrap:wrap}
.watchLayout .statusHeader h2{font-size:17px}
.watchLayout .liveConversation>button{align-self:flex-start;flex-shrink:0}
.watchLayout :is(#liveConversationMessages,#sideConversationMessages){flex:1;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}

@media(min-width:741px){
  .watchLayout{height:auto;scroll-margin-top:24px}
  .watchLayout .liveConversation{height:auto;contain:size}
  .watchLayout .syncTile:not(:fullscreen) canvas{max-height:none}
  .watchLayout.conversationClosed{height:auto;min-height:0}
}
.watchLayout .astraStream{flex:none;height:132px;max-height:132px;padding:12px 16px;border-left:1px solid var(--line);background:transparent;display:flex;flex-direction:column;overflow:hidden}
.watchLayout .astraStream .statusHeader{flex-wrap:nowrap;margin-bottom:6px;flex-shrink:0}
.watchLayout .astraStream .statusHeader h2{font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted);margin:0}
.watchLayout .astraStream>div[role="status"]{min-height:0;overflow:auto}
.watchLayout #astraStreamOutput{font-size:13px;line-height:1.5;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.watchLayout #astraStreamTime{font-size:10px;margin-top:6px}
@media(max-width:740px){
  .watchLayout{display:block}
  .watchVisuals{display:contents}
  .watchLayout #liveViewer{position:sticky;top:0;z-index:5;background:var(--paper);padding:8px 0;margin-bottom:12px}
  .watchLayout .syncTile:not(:fullscreen) canvas{max-height:none}
  .watchLayout figcaption{padding:5px 8px}
  .watchLayout .panel{margin-top:12px}
  .watchLayout .liveConversation{height:60dvh;min-height:320px}
  .watchLayout .viewerCue{padding:6px 10px}.watchLayout .viewerCue strong{font-size:14px}.watchLayout .viewerCue span{display:none}
}

/* Keep the camera grid compact without letterboxing the individual images. */
@media(min-width:741px){.watchLayout .cameras{max-width:calc(67.5556dvh + 12px);align-self:center;margin-inline:auto}}
@media(max-width:740px){.watchLayout .cameras{max-width:calc(49.7778dvh + 12px);margin-inline:auto}}

/* Episode archive and local API setup. */
.playgroundResources{margin-top:24px;min-width:0}
.playgroundResources li{line-height:1.65;margin:12px 0}
.playgroundResources pre{max-width:100%;overflow-x:auto;padding:18px;background:var(--paper);border:1px solid var(--line);font-size:14px;line-height:1.6;white-space:pre}
.playgroundResources a{overflow-wrap:anywhere}

.episodeViewer{margin:20px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.episodeViewer summary{padding:16px;cursor:pointer;font-size:16px}
.episodeViewer summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.episodeViewer iframe{display:block;width:100%;height:720px;height:min(80vh,900px);min-height:480px;border:0;background:#fff}

/* Final page row, below the content and visitor chat. */
main > .coffeeSupport{grid-column:1 / -1;margin-top:4px;width:100%}

/* Compact prompt-first entry. Setup opens from the primary action. */
.promptRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.runHeading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.runHeading h2{margin:0}
.runTimeControl{display:flex;align-items:center;gap:8px;margin-left:auto;white-space:nowrap}
.runTimeControl label{margin:0}
.runTimeControl #runDuration{width:64px;margin:0;padding:8px}
.runTimeControl span{font-size:14px;color:var(--muted)}
.promptRow #prompt{flex:1 1 280px;min-width:0;min-height:68px;margin:0}

#runSettings{margin-top:18px}
#runForm:not(.setupReady) #runSettings:not([open]){display:none}
.runSetup .actions,.runSetup #message{display:none}
.runSetup:has(#runSettings[open]) .actions,.runSetup:has(.runActive) .actions,.runSetup:has(.setupReady) .actions{display:flex}
.runSetup:has(#runSettings[open]) #message,.runSetup:has(.runActive) #message,.runSetup #message.error{display:block}
@media(max-width:540px){.promptRow{flex-wrap:wrap}.promptRow #prompt{flex-basis:100%}}

.runSetup #message:not(.error){display:none}

@media(min-width:741px){.watchLayout{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.watchLayout.conversationClosed{grid-template-columns:minmax(0,1fr)}}

.liveDashboard{grid-template-columns:minmax(0,1fr)}

.runSetup{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:16px;align-items:start}
.runSetup .robotQueue{margin:0;padding:18px}
.runSetup .queuePlace{margin-top:0}
.videoRobotStatus{align-self:start;font-size:12px}
.videoRobotStatus h2{font-size:14px}
.videoRobotStatus .statusHeader{display:block}
.videoRobotStatus .tag{display:inline-block;margin-top:8px;white-space:normal}
@media(min-width:741px){.watchLayout{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 140px}.watchLayout.conversationClosed{grid-template-columns:minmax(0,1fr) 140px}}
@media(max-width:740px){.runSetup{grid-template-columns:minmax(0,1fr)}.videoRobotStatus{margin-top:12px}}

.cameraStatusLine{text-align:right;align-self:stretch;font-size:12px;color:var(--muted)}
.cameraStatusLine #station{margin:0;padding:0;border:0;background:transparent;font-size:12px}
@media(min-width:741px){.watchLayout{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.watchLayout.conversationClosed{grid-template-columns:minmax(0,1fr)}}

@media(min-width:741px){.runSetup{align-items:stretch}.runSetup > .panel{align-self:stretch}.runSetup > .robotQueue{height:100%;box-sizing:border-box}}

.runSetup{display:block}
.runSetup > .robotQueue{height:auto;min-height:0;margin-top:10px;padding:0 4px;border:0;background:transparent;box-shadow:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:13px}
.runSetup .queuePlace{margin:0;padding:0;border:0;background:transparent;display:flex;align-items:center;gap:8px}
.runSetup .queuePlace h3,.runSetup .queuePlace #position{margin:0;font-size:13px;line-height:1.5}
.runSetup #leaveQueue{padding:5px 10px}

.robotNavigation{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}.robotNavigation label{margin:0}.robotNavigation select{width:auto;min-width:150px;max-width:100%}.robotNavigation .help:empty{display:none}

#liveViewer[data-layout=single]{grid-template-columns:1fr;max-width:760px;width:100%}
#liveViewer[data-layout=single] figure img{aspect-ratio:16/9}

/* RoboHouse: wrist views sit inside the bottom corners of the overhead feed. */
#liveViewer[data-layout="top-with-grippers"]{--camera-inset:12px;--top-caption-height:36px;grid-template-columns:minmax(0,1fr);grid-template-areas:"top";max-width:none;align-items:start}
#liveViewer[data-layout="top-with-grippers"]:has(>.viewerCue:not([hidden])){grid-template-areas:"cue" "top"}
#liveViewer[data-layout="top-with-grippers"]>.viewerCue{grid-area:cue}
#liveViewer[data-layout="top-with-grippers"]>figure[data-camera-role="top"]{grid-area:top}
#liveViewer[data-layout="top-with-grippers"]>figure[data-camera-role="top"]>figcaption{height:var(--top-caption-height);align-items:center}
#liveViewer[data-layout="top-with-grippers"]>figure[data-camera-role="top"] .expandCamera{top:7px;bottom:auto}
#liveViewer[data-layout="top-with-grippers"]>figure[data-camera-role="top"] .modelCameraBadge{top:7px;bottom:auto}
#liveViewer[data-layout="top-with-grippers"]>figure:is([data-camera-role="left"],[data-camera-role="right"]):not(:fullscreen){grid-area:top;align-self:end;width:16.8%;max-width:180px;margin:0 var(--camera-inset) calc(var(--top-caption-height) + var(--camera-inset));z-index:1;border:2px solid #fff;border-radius:8px;box-shadow:0 3px 16px #0005}
#liveViewer[data-layout="top-with-grippers"]>figure[data-camera-role="left"]:not(:fullscreen){justify-self:start}
#liveViewer[data-layout="top-with-grippers"]>figure[data-camera-role="right"]:not(:fullscreen){justify-self:end}
#liveViewer[data-layout="top-with-grippers"]>figure:is([data-camera-role="left"],[data-camera-role="right"]):not(:fullscreen)>figcaption{padding:5px 8px;font-size:11px}
#liveViewer[data-layout="top-with-grippers"]>figure:is([data-camera-role="left"],[data-camera-role="right"]):not(:fullscreen)>figcaption span{display:none}
@media(max-width:740px){
  #liveViewer[data-layout="top-with-grippers"]{--camera-inset:6px}
  #liveViewer[data-layout="top-with-grippers"]>figure:is([data-camera-role="left"],[data-camera-role="right"]):not(:fullscreen){width:18%}
  #liveViewer[data-layout="top-with-grippers"]>figure:is([data-camera-role="left"],[data-camera-role="right"]):not(:fullscreen)>figcaption{padding:3px;font-size:9px;white-space:nowrap}
  #liveViewer[data-layout="top-with-grippers"]>figure:is([data-camera-role="left"],[data-camera-role="right"]):not(:fullscreen) .modelCameraBadge{display:none}
}

/* One action group: consistent targets and a quiet secondary action. */
#runButtons{display:flex;align-items:stretch;gap:8px;max-width:100%;margin-left:auto}
#runButtons button{width:auto;min-height:52px;margin:0;padding:8px 14px;font-size:14px;line-height:1.25;align-self:stretch}
#openCodexInstructions{flex:0 1 164px}
#runButtons #run{flex:0 0 auto}
@media(max-width:600px){#runButtons{width:100%}#runButtons #run,#runButtons #openCodexInstructions{flex:1;min-width:0;padding:8px 10px}}
#setupRunActions{display:flex;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
#setupRunActions #runButtons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,344px);gap:12px}
@media(max-width:600px){#setupRunActions{margin-top:20px;padding-top:16px}#setupRunActions #runButtons{width:100%;gap:8px}}
.runnerContent > .robotNavigation{margin-bottom:16px;justify-content:flex-end}

footer #resetRuns{margin:0 0 0 8px;padding:5px 9px;font-size:12px;color:inherit}
footer #resetRunsStatus{margin-left:8px}

/* A copyable instruction, without a form-style action footer. */
#codexInstructions{width:min(560px,calc(100% - 32px));padding:24px;border:1px solid var(--line);border-radius:12px;background:#fffdf6;color:var(--ink);box-shadow:0 16px 64px #18251e20}
#codexInstructions::backdrop{background:#18251e66}
.codexDialogHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.codexDialogHeader h2{margin:0;font-size:22px;line-height:1.25}
.codexDialogHeader form{margin:0}
.codexDialogClose{display:grid;place-items:center;width:44px;height:44px;padding:0;margin:-10px -10px -10px 0;border:0;color:var(--muted)}
.codexPromptLabel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.codexPromptLabel p{margin:0;font-size:14px;line-height:1.4;color:var(--muted)}
#copyCodexPrompt{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;color:var(--muted);margin:-8px -8px 0 0}
#copyCodexPrompt .copiedIcon,#copyCodexPrompt[data-copied=true] .copyIcon{display:none}
#copyCodexPrompt[data-copied=true] .copiedIcon{display:block}
.codexPromptBox{display:flex;align-items:flex-start;gap:12px;padding:18px;background:#f0f1e7;border:1px solid #e3e5d9;border-radius:8px}
#codexInstructions .codexPrompt{flex:1;min-width:0;margin:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
#codexCopyStatus{margin:12px 0 0}
#codexCopyStatus:empty{display:none}
@media(max-width:480px){#codexInstructions{padding:20px}.codexDialogHeader h2{font-size:20px}.codexPromptBox{padding:16px}}

/* Keep the session owner’s stop control above the live camera feeds. */
#liveRunControls{display:flex;justify-content:flex-end;margin-left:auto}
#liveRunControls #stop{background:#b42318;border-color:#b42318;color:#fff;min-height:44px;padding:10px 22px;font-size:15px;font-weight:700}
#liveRunControls #stop:hover:not(:disabled){background:#912018;border-color:#912018}

#liveRunControls{align-items:center;gap:14px}
.viewerCue #ownRunTimer,.watchLayout .viewerCue #ownRunTimer{display:inline;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
/* Keep the camera countdown visible when the compact layout hides the owner banner. */

/* Badges use the backend's model camera selection, not viewer availability. */
.modelCameraPicture{position:relative}
.modelCameraBadge{position:absolute;left:7px;bottom:7px;display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:5px;background:#101714d9;color:#fff;font:600 10px/1.2 system-ui;pointer-events:auto;box-shadow:0 1px 3px #0003}
.modelCameraBadge svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}


/* Three-way display control remains reachable when the conversation is hidden. */
.conversationModes{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px;padding:4px;width:fit-content;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.conversationModes button{margin:0;padding:8px 14px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:13px}
.conversationModes button[aria-pressed="true"]{background:#e8efce;color:#25331c;box-shadow:0 1px 3px #17201416}
.conversationModes button:focus-visible{outline:2px solid #536b35;outline-offset:2px}
.runPrompt{flex-shrink:0;min-width:0;margin:0 0 8px;line-height:20px}.runPrompt summary{float:left;margin-right:8px;cursor:pointer;font-weight:600;font-size:12px}
.watchLayout .runPrompt #sidePrompt{max-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:20px;margin:0}
/* The conversation carries its own updates and outcome; leave the space for messages. */
#liveConversationPanel>.statusHeader:has(#sideConversationTitle){display:none}
#liveConversationPanel[data-mode="reasoning"] .conversationIncoming{width:100%;max-width:none;margin:10px 0;background:#fffef9;border-radius:10px}
#liveConversationPanel[data-mode="reasoning"] .astraResponse{font:14px/1.7 system-ui,sans-serif}

/* The mode toggle already labels the reasoning panel. */
#liveConversationPanel[data-mode="reasoning"] > .statusHeader:first-child,
#liveConversationPanel[data-mode="reasoning"] > #sideRunner{display:none}

/* Give the reasoning notes one third and the live video two thirds. */
@media(min-width:741px){
  .watchLayout:has(>#liveConversationPanel[data-mode="reasoning"]){grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .watchLayout:has(>#liveConversationPanel[data-mode="reasoning"]) .cameras{max-width:none}
}

#runButtons #runGroot{flex:0 0 auto}
#setupRunActions #runButtons{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,500px)}
@media(max-width:600px){#runButtons{flex-wrap:wrap}#runButtons #runGroot{flex:1;min-width:0}#setupRunActions #runButtons{display:flex;flex-wrap:wrap}}

#subscriptionHelp{box-sizing:border-box;width:min(600px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--paper);color:var(--ink);box-shadow:0 24px 80px #0003}
#subscriptionHelp::backdrop{background:#18251e80}
#subscriptionHelp .subscriptionHelpHeader{display:flex;align-items:center;justify-content:space-between;gap:20px}
#subscriptionHelp h3{margin:0;font-size:20px}
#subscriptionHelp textarea{box-sizing:border-box;width:100%;min-height:88px;resize:vertical}
#subscriptionHelp .actions{flex-wrap:wrap}

/* Expanded setup: primary Run, followed by the local subscription option. */
#setupRunActions #runButtons{display:flex;flex-direction:column;flex-wrap:nowrap;width:min(100%,280px);gap:8px}
#setupRunActions #runButtons button:not(#run):not(#openCodexInstructions){display:none}
#setupRunActions #runButtons #openCodexInstructions{flex:none;width:100%;min-height:0;margin:0;padding:4px 0;border:0;border-radius:0;background:transparent;text-align:center;color:var(--muted);text-decoration:underline;text-underline-offset:4px;white-space:normal}
#setupRunActions #runButtons #openCodexInstructions:hover{color:var(--ink)}
#setupRunActions #runButtons #run{flex:none;width:100%;min-height:48px;margin:0}
@media(max-width:600px){#setupRunActions #runButtons{width:100%}}

.conversationSharing{display:flex;align-items:center;gap:8px}.conversationSharing input{width:auto}

.runLaunchActions{display:flex;flex-direction:column;justify-content:center;gap:8px}
#openSubscriptionInstructions{margin:0;min-height:40px;padding:8px 14px;white-space:nowrap}
#openLocalRun{width:auto;margin:0;min-height:52px;white-space:nowrap}
#localRunDialog{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:24px;border:1px solid var(--line);border-radius:12px;background:#fffdf6;color:var(--ink)}
#localRunDialog::backdrop{background:rgb(0 0 0 / .4)}
.localRunHeader{display:flex;align-items:center;justify-content:space-between;gap:16px}.localRunHeader h3{margin:0;font-size:20px}
.runDialogMode #runSettings{border:0;padding:0;margin:0}.runDialogMode #runSettings>summary{display:none}
.runDialogMode #setupRunActions{padding:0;border:0;margin-top:20px}.runDialogMode #setupRunActions #runButtons{width:100%}
.localRunMode #runAstra,.localRunMode #runClaude,.localRunMode #runGroot{display:none}
@media(max-width:600px){.runLaunchActions,#openLocalRun{width:100%}}

#localRunMessage:empty{display:none}#localRunMessage{font-size:13px;margin-bottom:0}

.localRunMode #codexSetup,.localRunMode #claudeSetup,.localRunMode #policyHelp{display:none}

/* Video-first playground: compact header, prompt below, status over the feed. */
main{padding-top:14px}
.playgroundHeader{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.playgroundHeader .intro{padding:0;max-width:none;min-width:0}
.playgroundHeader h1{font-size:32px;line-height:1.1;letter-spacing:-.05em;margin:0}
.playgroundHeader .eyebrow{margin:6px 0 0}
.playgroundHeader .robotNavigation{margin:0;gap:8px}
.playgroundHeader .robotNavigation select{padding:8px 10px;font-size:13px}
.playgroundIntro{margin:8px 0 12px;font-size:12px;color:var(--muted)}
.watchToolbar{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:10px}
.watchLayout{row-gap:10px}
.watchLayout>.watchToolbar{grid-column:1/-1;margin-bottom:0}
.watchToolbar .conversationModes{margin:0}
.watchToolbar #videoDelayNotice{margin:0;font-size:11px}
.videoPanel{position:relative;min-width:0;isolation:isolate}
.watchLayout .videoPanel .cameras{max-width:none;margin:0}
.videoOverlays{position:absolute;left:12px;right:12px;bottom:48px;z-index:3;display:flex;flex-direction:column;gap:6px;max-height:calc(100% - 64px);pointer-events:none}
/* Keep the status stack between the two wrist views. */
.videoPanel:has(>[data-layout="top-with-grippers"]) .videoOverlays{left:calc(min(16.8%,180px) + 24px);right:calc(min(16.8%,180px) + 24px)}
.watchLayout .videoOverlays .astraStream{margin:0;padding:10px 12px;border:1px solid #ffffff38;border-radius:8px;background:rgb(15 28 23 / .72);color:#fff;box-shadow:0 2px 12px #0002;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:auto;min-height:0}
.watchLayout .videoOverlays .astraStream{height:auto;max-height:none;flex-shrink:1}
.videoOverlays .runOutcome{margin:0 0 8px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.videoOverlays .runOutcome[data-tone="warning"]{background:none}
.videoOverlays .runOutcomeHeading{gap:2px 10px}
.videoOverlays .runOutcomeHeading strong{font-size:15px;color:#d5ffb1}
.videoOverlays .runOutcome[data-tone="warning"] strong{color:#ffd28c}
.videoOverlays .runOutcomeHeading span{font-size:10px;color:#e0e9e2}
.watchLayout .videoOverlays #runOutcomeDetail{font-size:10px;line-height:1.4;color:#e0e9e2;margin:6px 0 0}
.watchLayout .videoOverlays .astraStream .statusHeader{margin-bottom:4px}
.watchLayout .videoOverlays .astraStream .statusHeader h2{font-size:10px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#dae6dc}
.watchLayout .videoOverlays #astraStreamOutput{font-size:13px;line-height:1.45;color:#fff;max-height:4.35em;overflow:auto}
.watchLayout .videoOverlays #astraStreamTime{color:#d2ddd5;margin-top:4px;font-size:10px}
.watchVisuals>.runSetup>.panel{padding:14px 16px}
.watchVisuals .runSetup #message:empty{display:none!important}
.watchVisuals .runHeading{margin-bottom:10px}
.watchVisuals .runHeading h2{font-size:18px}
.watchVisuals .cameraStatusLine{font-size:11px}
@media(max-width:740px){
  main{padding-top:12px}
  .playgroundHeader{gap:10px}
  .playgroundHeader h1{font-size:28px}
  .playgroundHeader .robotNavigation{justify-content:flex-start;flex-wrap:nowrap;width:100%}
  .playgroundHeader .robotNavigation select{flex:1;min-width:0;width:0}
  .playgroundIntro{margin:8px 0 10px;line-height:1.5}
  .watchToolbar{gap:8px;order:3}
  .watchToolbar #videoDelayNotice{order:-1;width:100%}
  .watchToolbar .conversationModes{padding:3px}
  .watchToolbar .conversationModes button{padding:7px 9px;font-size:12px}
  .watchLayout{display:flex;flex-direction:column;gap:14px}
  .watchVisuals{display:contents}
  .watchVisuals>.videoPanel{order:0}
  .watchVisuals>.cameraStatusLine{order:2}
  .watchLayout>#liveConversationPanel{order:4}
  .watchVisuals>.runSetup{order:1}
  .watchLayout .videoPanel #liveViewer{position:relative;top:auto;padding:0;margin:0;z-index:auto}
  .watchLayout .liveConversation{height:auto;min-height:0;max-height:60dvh;margin:0}
  .videoPanel:has(>[data-layout="top-with-grippers"]) .videoOverlays{left:calc(18% + 12px);right:calc(18% + 12px)}
  .videoOverlays{left:6px;right:6px;bottom:42px;gap:4px;max-height:calc(100% - 76px)}
  .watchLayout .videoOverlays .astraStream{padding:6px 8px;border-radius:6px}
  .videoOverlays .runOutcomeHeading strong{font-size:14px}
  .videoOverlays .runOutcomeHeading span,.watchLayout .videoOverlays #runOutcomeDetail{font-size:9px}
  .watchLayout .videoOverlays #astraStreamOutput{font-size:11px;line-height:1.35}
  .watchLayout .videoOverlays #astraStreamOutput{max-height:2.7em}
  .watchLayout .videoOverlays #astraStreamTime{font-size:9px}
  .watchLayout .videoOverlays .astraStream .statusHeader h2{font-size:9px}
  .watchVisuals>.runSetup>.panel{margin:0;padding:12px}
}

/* Full-window camera view works without the native Fullscreen API on phones. */
body.cameraExpanded{overflow:hidden}
.syncTile{cursor:zoom-in;touch-action:manipulation}
.syncTile:fullscreen{cursor:zoom-out}
.cameraDialog{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#101714;color:#fff;overflow:hidden;overscroll-behavior:contain}
.cameraDialog[open]{display:flex;flex-direction:column;justify-content:center}
.cameraDialog::backdrop{background:#101714}
.cameraDialog .closeCamera{position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));min-width:72px;min-height:44px;background:#263b30;color:#fff;border:1px solid #728477}
.cameraDialog>.syncTile{width:100%;max-width:none;margin:0;border:0;border-radius:0;background:#101714;cursor:zoom-out}
.cameraDialog .syncTilePicture{width:100%}
.cameraDialog .syncTile canvas{width:100%;height:auto;max-height:calc(100dvh - 120px);aspect-ratio:16/9;object-fit:contain}
.cameraDialog .syncTile>figcaption{display:flex;justify-content:space-between;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));font-size:14px;color:#fff}
.cameraDialog .syncTile>figcaption span{color:#c9d8ce}
.cameraDialog .expandCamera{display:none}

/* ASPIRE provenance disclosures share the playground's existing controls. */
.aspireDisclosure { margin: 12px 0; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; padding: 12px 14px; min-width: 0; }
.aspireDisclosure > summary { cursor: pointer; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.aspireDisclosure p { line-height: 1.55; margin: 10px 0; }
.aspireDisclosure pre { max-height: 380px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; padding: 12px; background: #f1f5f9; border-radius: 6px; }
.aspireDisclosure a { display: block; margin: 8px 0; overflow-wrap: anywhere; }
.aspireGroup { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.aspireGroup h4 { margin: 0 0 10px; font-size: 14px; }
.aspireSource { color: #475569; font-size: 12px; overflow-wrap: anywhere; }
.aspireCaveat { color: #7c4a12; }
.aspireFlow { color: #475569; font-size: 13px; }
.aspireBadge { display: inline-block; padding: 3px 8px; margin: 8px 6px 4px 0; border-radius: 5px; color: #334155; background: #e2e8f0; font-size: 12px; }
.aspireImages { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 10px; }
.aspireImages figure { margin: 0; }
.aspireImages img, .aspireDisclosure video { width: 100%; border-radius: 6px; }
.aspireImages figcaption { font-size: 12px; color: #475569; }
#aspirePromptLineage { margin-top: 16px; }
@media (prefers-color-scheme: dark) { .aspireDisclosure { background: #fff; color: #111827; } }
/* ASPIRE task progress lives beside its submitted prompt. */
.aspireTaskPanel { overflow-wrap: anywhere; }
.taskFailureNotice{margin:12px 0;padding:12px;border:1px solid #d5a29c;border-left:4px solid #a72c24;border-radius:6px;background:#fff0ed;color:#85251f;overflow-wrap:anywhere}
.taskFailureNotice>strong{font-size:16px}.taskFailureNotice p{margin:6px 0 0;font-size:13px;line-height:1.5;white-space:pre-wrap}.taskFailureNotice .help{color:inherit;font-size:12px}.taskFailureNotice .taskFailurePrompt{font-weight:600}.taskFailureNotice pre{max-height:220px;overflow:auto;white-space:pre-wrap;font-size:12px}
.aspireTaskPicker { display: grid; gap: 6px; margin: 12px 0; font-size: 12px; }
.aspireTaskPicker select { width: 100%; min-width: 0; font-size: 12px; }
.aspireAuthorship { font-size: 16px; line-height: 1.35; font-weight: 700; color: #173d59; margin: 10px 0; }
.aspireLogTitle { font-size: 13px; margin: 14px 0 0; }
.aspireTaskLog { list-style: none; padding: 0; margin: 12px 0; }
.aspireTaskLog li { padding: 10px 0 10px 12px; border-left: 2px solid #88acbd; margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
.aspireTaskLog p { margin: 4px 0 0; }
.aspireTaskLog strong { font-weight: 650; }
.aspireGroup h3 { font-size: 15px; margin: 0 0 8px; }
.aspireTaskPanel .aspireDisclosure { margin: 8px 0; padding: 10px; }
.aspireTaskPanel .aspireDisclosure pre { max-height: 320px; max-width: 100%; overflow: auto; font-size: 11px; white-space: pre; }
.aspireTaskPanel .aspireBadge { font-size: 11px; }
.aspireTaskPanel .aspireTaskLog { max-height: 270px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }

/* Allow prompt-side ASPIRE evidence to scroll inside the camera-height panel. */
.watchLayout .liveConversation:has(> .aspireTaskPanel:not([hidden])) { overflow-y: auto; scrollbar-gutter: stable; }
.aspireTaskPanel .aspireTaskLog { overscroll-behavior-y: auto; }

.publicRunError[data-tone="warning"]{color:#8a5300;background:#fff8eb;border-left-color:#8a5300}
.publicRunError[data-tone="neutral"],.taskFailureNotice[data-tone="neutral"]{color:#a34b00;background:#fff4e5;border-color:#d97706}
.aspireActivityEntry[data-tone="neutral"] .aspireActivityTitle,.pastRunLabel[data-result="Stopped"]{color:#a34b00}
.aspireRepairTrace p { white-space: pre-wrap; overflow-wrap: anywhere; }



/* ASPIRE chat: pinned phases, outgoing requests, incoming progress. */
.aspirePhaseCard{position:sticky;top:-18px;z-index:3;display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:12px;margin:0 0 16px;border:1px solid #d8ded4;border-radius:12px;background:#fffef9;box-shadow:0 3px 12px #1720140a}
.aspirePhaseLabel{grid-column:1/-1;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.aspirePhaseCard>strong{grid-column:1/-1;font-size:14px;line-height:1.4}
.aspireWorkState{font-size:11px;font-weight:650;color:#356331;display:flex;align-items:center;gap:6px}
.aspireWorkState::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.aspirePhaseCard:is([data-state="waiting"],[data-state="connection"],[data-state="action"]) .aspireWorkState{color:#8a590c}
.aspirePhaseCard:is([data-state="stopped"],[data-state="draft"]) .aspireWorkState{color:var(--muted)}
.aspirePhaseTimer{font-size:10px;color:var(--muted);align-self:center;text-align:right}
.aspirePhaseCard .aspirePhaseMeta,.aspirePhaseCard .aspirePhaseDetail{grid-column:1/-1;margin:2px 0 0;font-size:10px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.aspirePhasePath{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:3px;border-bottom:1px solid #e1e7da;padding:0 0 9px;margin:0 0 3px;font-size:11px}
.aspirePhaseStep{padding:5px 4px;border-radius:5px;color:#77816e}
.aspirePhaseStep[data-state="current"]{background:#e9efdf;color:#42643b;font-weight:700}
.aspirePhaseStep[data-state="hold"]{background:#fbf0dc;color:#8a590c;font-weight:700}
.aspirePhaseStep[data-state="stopped"]{color:#435a3c;font-weight:650}
.aspirePhaseArrow{color:#aab69f}
.aspirePhaseCard .aspireCurrentCode{grid-column:1/-1;margin:2px 0 0;color:#566d47;font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
#aspireTaskActivity,#aspireTaskWork{min-width:0}
.aspireActivityLog{list-style:none;padding:0 3px 8px;margin:0;max-height:54vh;min-height:150px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.aspireActivityEntry{display:flex;flex-direction:column;gap:0;font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.aspireActivityEntry>*{order:2}
.aspireActivityHeading{order:0;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:8px;color:#526447}
.aspireActivityHeading>strong{font-size:12px;font-weight:650}
.aspireActivityHeading time{font-size:10px;color:var(--muted);white-space:nowrap}
.aspireActivityEntry .aspireActivityContext{order:3;font-size:10px;color:var(--muted);margin:10px 0 0}
.aspireActivityTitle{order:1;font-size:13px;line-height:1.5;display:block}
.aspireActivityEntry p{white-space:pre-wrap;margin:6px 0 0}
.aspireActivityEntry[data-role="You"] .aspireActivityTitle{display:none}
.aspireActivityEntry[data-role="You"] p{font-size:14px;margin:0}
.aspireActivityEntry .aspireActivityNext{font-size:12px;color:#526047}
.aspireActivityEntry[data-tone="error"]{border-color:#d5a29c}
.aspireActivityEntry[data-tone="error"] .aspireActivityTitle{color:#a72c24}
.aspireActivityEntry[data-tone="warning"] .aspireActivityTitle{color:#8a590c}
.aspireActivityEntry[data-tone="success"] .aspireActivityTitle{color:#356331}
.aspireActivityEntry .aspireSource{font-size:10px;padding:7px;background:#f0f4e9;border-radius:5px;color:#566d47}
#aspireTaskWork>.aspireAuthorship{font-size:11px;font-weight:500;color:var(--muted);margin:8px 0}
#aspireTaskAnswer.notice{padding:12px 14px;margin:10px 0;border:1px solid #dce0d4;background:#fffef9;border-radius:16px 16px 16px 5px}
#aspireTaskAnswer>strong{font-size:13px}#aspireTaskAnswer p{font-size:12px;line-height:1.6;margin:5px 0}
.aspireChatEvidence{margin-top:20px;padding-top:8px;border-top:1px solid #e1e7da}
#aspireRecordedTasks{margin-top:16px}
@media(max-width:740px){.aspireActivityLog{max-height:48vh}.aspirePhaseCard{top:-18px}}

/* Video and the complete chat/composer share one desktop row. */
.watchInteraction{min-width:0;display:flex;flex-direction:column}
.watchInteraction>#liveConversationPanel{flex:1;min-height:0;height:auto;contain:none;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.watchInteraction>.runSetup{display:block;flex:none;margin:0;min-width:0}
.watchInteraction .runSetup>.panel{margin:0;padding:10px 14px 12px;border-top:1px solid #e4e6df;border-top-left-radius:0;border-top-right-radius:0;background:#fffdf8}
.watchInteraction .runHeading{margin-bottom:7px;align-items:center}
.watchInteraction .runHeading h2{font-size:12px;font-weight:650;letter-spacing:0}
.watchInteraction .runTimeControl{font-size:10px}
.watchInteraction .runTimeControl input{padding:5px 7px;width:46px;font-size:11px}
.watchInteraction .promptRow{flex-wrap:nowrap;align-items:stretch;padding:10px;border:1px solid #d4d8ce;border-radius:12px;background:#f5f6f0;gap:8px}
.watchInteraction #prompt{flex:1 1 auto;min-width:0;min-height:48px;padding:0;border:0;border-radius:0;background:transparent;font-size:12px;line-height:1.5}
.watchInteraction .runLaunchActions{width:auto;flex:0 0 auto;align-self:flex-end;justify-content:flex-end}
.watchInteraction #openLocalRun{width:auto;min-height:36px;padding:8px 12px;border-radius:9px;font-size:12px}
.watchInteraction .promptRow:focus-within{border-color:#8b9f7d;box-shadow:0 0 0 2px #8b9f7d18}
.watchBelow{min-width:0}
.watchVisuals>#yourQueue{margin:0;padding:6px 10px;font-size:12px;line-height:1.5;background:#f1f5e8;border-color:#d8e1cb;box-shadow:none}
.watchVisuals>#yourQueue .queuePlace,.watchVisuals>#yourQueue button{display:none}
#aspireVisionStatus,.viewerCue{display:none}
.aspireTaskDetails{padding:0 14px 10px}
.aspireTaskDetails .aspireChatEvidence{margin:0;padding:0;border:0}
.aspireTaskDetails #aspireRecordedTasks{margin-top:8px}
.aspireTaskDetails details{font-size:11px}
@media(min-width:961px), (min-width:568px) and (orientation:landscape){
  .watchLayout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);grid-template-areas:"toolbar toolbar" "video chat" "status details" "queue details";gap:10px 20px}
  .watchLayout>.watchToolbar{grid-area:toolbar}
  .watchLayout>.watchVisuals{display:contents}
  .watchVisuals>.videoPanel{grid-area:video}
  .watchVisuals>.cameraStatusLine{grid-area:status;align-self:start;min-width:0}
  .watchVisuals>#yourQueue{grid-area:queue;align-self:start}
  .watchInteraction{grid-area:chat;contain:size;height:100%}
  .watchBelow{grid-area:details}
  .watchLayout.conversationClosed{grid-template-columns:minmax(0,1fr);grid-template-areas:"toolbar" "video" "status" "queue" "chat" "details"}
  .watchLayout.conversationClosed .watchInteraction{contain:none;height:auto}
}
.watchLayout.conversationClosed .runSetup>.panel{border-top-color:var(--line);border-top-left-radius:12px;border-top-right-radius:12px}
@media(max-width:960px) and (orientation:portrait), (max-width:567px){
  .watchLayout{display:flex;flex-direction:column;gap:14px}
  .watchLayout>.watchVisuals{display:contents}
  .watchVisuals>.videoPanel{order:0}
  .watchVisuals>.cameraStatusLine{order:1}
  .watchVisuals>#yourQueue{order:2}
  .watchLayout>.watchToolbar{order:3}
  .watchInteraction{order:4}
  .watchInteraction>#liveConversationPanel{flex:none;min-height:260px;height:48dvh;max-height:480px}
  .watchBelow{order:5}
}

/* A quiet chat stream: small actor icons, plain updates, pinned phase status. */
.watchInteraction>#liveConversationPanel:has(.aspireTaskPanel:not([hidden])){padding:0 16px 14px;background:#fffdf8}
.aspirePhaseCard{top:0;gap:5px 10px;margin:0 -16px 12px;padding:12px 16px 10px;border:0;border-bottom:1px solid #e4e6df;border-radius:0;background:#fffdf8;box-shadow:none}
.aspirePhaseLabel{display:none}
.aspirePhaseCard>strong{font-size:13px;font-weight:600}
.aspirePhasePath{border:0;padding:0;margin:0 0 4px}
.aspirePhaseInfo{grid-column:1/-1;margin:0;padding:0}
.aspirePhaseInfo>summary{width:fit-content;cursor:pointer;font-size:10px;color:var(--muted);padding:3px 0}
.aspirePhaseInfo[open]>summary{margin-bottom:5px}
.aspirePhaseInfo>p{margin:5px 0!important}
.aspireActivityLog{padding:0 2px 12px;scrollbar-width:thin}
.aspireActivityLog li.conversationTurn{position:relative;width:100%;max-width:none;margin:0;padding:12px 0 12px 25px;border:0;border-radius:0;background:transparent;box-shadow:none}
.aspireActivityLog li.conversationTurn+li.conversationTurn{margin-top:5px}
.aspireActivityLog li.conversationOutgoing{margin:3px 0 15px;padding:12px 14px;background:#f1f3ea;border-radius:10px}
.aspireActivityLog .aspireActivityHeading{gap:5px 10px;margin-bottom:3px;min-height:18px;color:#758071}
.aspireActivityLog .aspireActivityHeading>strong{font-size:10px;font-weight:550}
.aspireActivityLog .aspireActivityHeading time{font-size:10px;margin-left:auto;color:#858b82}
.aspireActivityLog .conversationIncoming .aspireActivityHeading::before{content:'▣';position:absolute;left:0;top:15px;width:14px;height:14px;color:#758071;font:14px/14px system-ui,sans-serif;text-align:center}
.aspireActivityLog [data-role='Astra'] .aspireActivityHeading::before,.aspireActivityLog [data-role='Codex'] .aspireActivityHeading::before{content:'✧';font-size:18px}
.aspireActivityLog .aspireActivityTitle{font-size:13px;line-height:1.55;font-weight:600}
.aspireActivityLog .aspireActivityEntry p{font-size:13px;line-height:1.65;margin:4px 0 0}
.aspireActivityLog .aspireActivityEntry .aspireActivityContext{font-size:10px;color:#858b82;margin-top:6px}
.aspireActivityLog .aspireActivityEntry .aspireActivityNext{font-size:12px;color:#697364}
.aspireActivityLog .aspireActivityEntry .aspireSource{font-size:10px;padding:0;background:transparent;border-radius:0;color:#697364}
.aspireActivityLog .aspireActivityEntry[data-tone='error'] .aspireActivityHeading::before{color:#a72c24}
#aspireTaskAnswer.notice{padding:12px 0;margin:8px 0;border:0;border-top:1px solid #e4e6df;border-radius:0;background:transparent}
@media(max-width:600px){.aspireActivityLog li.conversationTurn{width:100%;padding:10px 0 10px 23px}.aspireActivityLog li.conversationOutgoing{padding:12px}.aspireActivityLog .conversationIncoming .aspireActivityHeading::before{top:13px}}

/* Smaller text and unframed updates, including the reasoning-mode overrides. */
#liveConversationPanel .aspireActivityLog li.conversationIncoming{width:100%;max-width:none;margin:0;border:0;border-radius:0;background:transparent}
#liveConversationPanel .aspireActivityLog .aspireActivityEntry p{font-size:12px;line-height:1.6}
#liveConversationPanel .aspireActivityLog .aspireActivityTitle{font-size:12px}
#liveConversationPanel .aspireActivityLog .aspireActivityContext,#liveConversationPanel .aspireActivityLog .aspireSource{font-size:9px}
#liveConversationPanel .aspireActivityLog .aspireActivityNext{font-size:11px}
.aspirePhaseCard{gap:3px 8px;padding-top:8px;padding-bottom:7px;margin-bottom:8px}
.aspirePhaseCard>strong{font-size:12px}
.aspirePhasePath{font-size:10px;margin-bottom:2px}
.aspireWorkState{font-size:10px}
.aspirePhaseTimer{font-size:9px}
.aspirePhaseInfo>summary{font-size:9px}

.watchInteraction>#liveConversationPanel{margin:0}
.watchInteraction .runSetup #message:empty{display:none!important}

/* Supplemental source, history and parked-scene evidence stay out of the chat layout. */
.watchBelow{display:none}

/* Duration is chosen in the existing Run popup. */
#localRunDialog .runDurationControl{margin:0 0 18px;padding:12px 14px;border:1px solid #e1e5da;border-radius:10px;background:#f5f6f0;font-size:13px}
#localRunDialog .runDurationControl label{margin-right:auto}
#localRunDialog .runDurationControl #runDuration{width:68px;padding:8px;font-size:14px}
#localRunDialog .runDurationControl span{font-size:13px}

/* Long messages reveal their full text on demand. */
.aspireActivityEntry>.aspireMessageContent{order:2;min-width:0;display:flex;flex-direction:column}
.aspireMessageContent>*{order:2}
.aspireMessageContent>.aspireActivityTitle{order:1}
.aspireMessageContent>.aspireActivityContext{order:3}
.aspireActivityEntry>.aspireMessageToggle{order:4;align-self:flex-start;margin:5px 0 0;padding:5px 0;border:0;border-radius:3px;background:transparent;font-size:11px;font-weight:550;color:#626f5b;text-decoration:underline;text-underline-offset:3px}
.aspireActivityEntry>.aspireLocalSetup{order:5;margin:6px 0 0;font-size:12px}
.aspireActivityEntry>.aspireMessageToggle:hover{background:transparent;color:var(--ink)}

/* Keep scrolling messages inside the space between phases and the composer. */
.watchInteraction #aspireTaskPanel{height:100%;min-height:0;display:flex;flex-direction:column}
.watchInteraction #aspireTaskWork{min-height:0;flex:1;display:flex;flex-direction:column}
.watchInteraction #aspireTaskWork>.aspirePhaseCard{position:relative;top:auto;flex:none}
.watchInteraction #aspireTaskActivity{min-height:0;flex:1}
.watchInteraction :is(#aspireTaskWork,#aspireTaskActivity)>.aspireActivityLog{flex:1;height:100%;min-height:0;max-height:none}

/* Keep cameras and conversation together when a phone turns sideways. */
@media(min-width:568px) and (max-width:960px) and (orientation:landscape){
  main{padding:8px 12px 20px}
  .playgroundHeader{flex-wrap:nowrap;gap:12px}
  .playgroundHeader h1{font-size:24px}
  .playgroundHeader .robotNavigation{width:auto;flex:0 1 45%;justify-content:flex-end}
  .playgroundIntro{margin:6px 0;font-size:11px;line-height:1.35}
  .watchToolbar{flex-wrap:nowrap;gap:8px}
  .watchToolbar #videoDelayNotice{width:auto;order:initial;font-size:10px}
  .watchToolbar .conversationModes{flex-shrink:0}
  .watchToolbar .conversationModes button{padding:6px 7px;font-size:11px}
  .watchLayout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px 12px}
  .watchInteraction{min-height:400px}
  .watchInteraction>#liveConversationPanel{padding:12px;min-height:0;max-height:none}
  .watchInteraction .runSetup>.panel{padding:8px}
  .watchInteraction .promptRow{flex-wrap:wrap;padding:8px}
  .watchInteraction #prompt{flex-basis:100%;min-height:32px}
  .watchInteraction .runLaunchActions{flex:1 1 100%;min-width:0;align-self:auto}
  .watchInteraction .runLaunchActions>*{max-width:100%}
  .watchInteraction #openLocalRun{min-height:32px;padding:6px 8px;font-size:11px}
  .watchInteraction #openSubscriptionInstructions{padding:6px 8px;font-size:11px}
}

/* The operating console fits the first screen; the archive continues below. */
.playgroundConsole{--paper:#f3f4ef;--line:#dce2d8;--muted:#59665f;--lime:#d8edb9;--ink:#203a30;--accent:#2d6048;--accent-soft:#eaf1e4;--surface:#fffefa;--font-ui:Manrope,"Avenir Next",sans-serif;font-family:var(--font-ui);font-size:14px;-webkit-font-smoothing:antialiased}
.playgroundConsole main,.playgroundConsole main.chatClosed{display:block;max-width:none;padding:16px 24px 40px}
.playgroundConsole .playgroundHeader{height:56px;flex-wrap:nowrap;gap:20px;margin-bottom:20px}
.playgroundConsole .playgroundHeader h1{display:flex;align-items:center;gap:18px;font-size:28px;font-weight:800;letter-spacing:-.06em;margin:0;white-space:nowrap}
.playgroundConsole .playgroundHeader .intro{flex:1}
.playgroundConsole .robotNavigation{width:auto;flex-wrap:nowrap}
.playgroundConsole .robotNavigation label{font-size:12px;font-weight:600;margin:0;color:var(--muted)}
.playgroundConsole .robotNavigation select{width:auto;max-width:240px;min-height:44px;padding:10px 32px 10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:600}
.playgroundConsole #robotSelectorStatus:empty{display:none}
.playgroundConsole .playgroundIntro{display:none}
.playgroundConsole .openVisitorChat{position:static;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none;box-shadow:none;background:var(--surface);border-color:var(--line);padding:10px 16px;min-height:44px;border-radius:10px;font-size:13px}
.playgroundConsole .watchLayout,.playgroundConsole .watchLayout.conversationClosed{display:grid;grid-template-columns:minmax(0,var(--console-camera-width,70%)) minmax(0,1fr);grid-template-areas:"video chat";gap:16px;height:calc(100dvh - 86px);min-height:0;margin-bottom:40px}
.playgroundConsole .watchLayout>.watchVisuals{grid-area:video;display:grid;grid-template-rows:auto auto;align-content:start;gap:8px;min-height:0}
.playgroundConsole .watchVisuals>.videoPanel{grid-area:auto;min-height:0;align-self:start;height:var(--console-camera-height,100%)}
.playgroundConsole .cameraDetails>.cameraStatusLine{grid-area:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;font-size:12px;min-height:28px;padding-top:4px;text-align:left}
.playgroundConsole .cameraStatusLine p{margin:0}
.playgroundConsole .cameraDetails>#yourQueue{grid-area:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;padding:0 0 8px;border:0;border-radius:0;background:none;font-size:12px;color:var(--muted)}
.playgroundConsole .queuePlace{display:flex;align-items:center;gap:8px;margin:0}
.playgroundConsole .queuePlace h3{font-size:11px;font-weight:500;margin:0}
.playgroundConsole .queuePlace #position{font-size:13px}
.playgroundConsole .queuePlace p{margin:0;font-size:11px}
.playgroundConsole #leaveQueue{padding:4px 8px;font-size:11px}
.playgroundConsole .watchLayout .videoPanel .cameras{display:grid;position:relative;top:auto;z-index:auto;width:100%;height:100%;max-width:none;margin:0;padding:0;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));border-radius:12px;overflow:hidden;background:#17221b}
.playgroundConsole #liveViewer[data-layout="observer-focus"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,3fr) minmax(0,1fr)}
.playgroundConsole #liveViewer[data-layout="observer-focus"] [data-camera-role="observer"]{grid-column:1/-1;grid-row:1}
.playgroundConsole #liveViewer[data-layout="observer-focus"] figure[data-camera-role="left"]{grid-column:1;grid-row:2}
.playgroundConsole #liveViewer[data-layout="observer-focus"] figure[data-camera-role="top"]{grid-column:2;grid-row:2}
.playgroundConsole #liveViewer[data-layout="observer-focus"] figure[data-camera-role="right"]{grid-column:3;grid-row:2}
.playgroundConsole #liveViewer[data-detail-layout="side"][data-layout="observer-focus"]{grid-template-columns:minmax(0,3fr) minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr))}
.playgroundConsole #liveViewer[data-detail-layout="side"] figure[data-camera-role="observer"]{grid-column:1;grid-row:1/-1}
.playgroundConsole #liveViewer[data-detail-layout="side"] figure[data-camera-role="left"]{grid-column:2;grid-row:1}
.playgroundConsole #liveViewer[data-detail-layout="side"] figure[data-camera-role="top"]{grid-column:2;grid-row:2}
.playgroundConsole #liveViewer[data-detail-layout="side"] figure[data-camera-role="right"]{grid-column:2;grid-row:3}
.playgroundConsole #liveViewer[data-layout="single"]{grid-template:1fr/1fr}
/* RoboHouse uses one full-height feed; the live notice must not reserve a camera row. */
.playgroundConsole #liveViewer[data-layout="top-with-grippers"]{--top-caption-height:0px;grid-template-rows:minmax(0,1fr)}
.playgroundConsole #liveViewer[data-layout="top-with-grippers"]:has(>.viewerCue:not([hidden])){grid-template-areas:"top"}
.playgroundConsole #liveViewer[data-layout="top-with-grippers"]>.viewerCue{position:absolute;grid-area:auto;inset:var(--camera-inset) 48px auto var(--camera-inset);z-index:2}
.playgroundConsole #liveViewer[data-layout="top-with-grippers"]>figure[data-camera-role="top"]:not(:fullscreen){height:100%}
.playgroundConsole #liveViewer[data-layout="top-with-grippers"]>figure:is([data-camera-role="left"],[data-camera-role="right"]):not(:fullscreen){aspect-ratio:16/9}
.playgroundConsole #liveViewer figure:not(.syncSource){min-width:0;min-height:0;border:0;border-radius:6px;background:#17221b}
.playgroundConsole #liveViewer #liveRunControls{display:none}
.playgroundConsole #liveViewer>.viewerCue{display:none}
.playgroundConsole #liveViewer .syncTilePicture,.playgroundConsole #liveViewer .modelCameraPicture{height:100%;overflow:hidden}
.playgroundConsole #liveViewer canvas,.playgroundConsole #liveViewer .modelCameraPicture img{width:100%;height:111.111%;max-height:none;aspect-ratio:auto;object-fit:fill;transform:translateY(-10%)}
.playgroundConsole #liveViewer .modelCameraBadge{display:none}
/* Float the shared task entry inside the main camera without resizing it. */
.playgroundConsole .quickTaskEntry{display:flex;align-items:center;gap:6px;min-width:0;min-height:0;height:56px;max-height:none;padding:5px;border:1px solid #ffffff4d;border-radius:14px;background:var(--surface);box-shadow:0 4px 20px #10201926;backdrop-filter:blur(3px)}
.playgroundConsole #quickPrompt{flex:1;min-width:0;width:0;height:100%;min-height:0;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:16px/22px var(--font-ui)}
.playgroundConsole #quickPrompt::placeholder{color:#405247;opacity:1}
.playgroundConsole #quickRun{flex:none;width:auto;height:100%;min-height:0;padding:0 18px;border:0;border-radius:9px;background:var(--accent);color:white;font-size:14px;font-weight:700}
.playgroundConsole #liveViewer>.quickTaskEntry{grid-column:1/-1;grid-row:1;align-self:end;justify-self:center;position:relative;z-index:3;width:min(640px,calc(100% - 24px));margin:0 12px 12px}
.playgroundConsole #liveViewer[data-detail-layout="side"][data-layout="observer-focus"]>.quickTaskEntry{grid-column:1;grid-row:1/-1}
.playgroundConsole #liveViewer[data-layout="top-with-grippers"]>.quickTaskEntry{grid-area:top}
/* Keep the main camera's expand control clear of the floating task entry. */
.playgroundConsole #liveViewer[data-layout="observer-focus"] figure[data-camera-role="observer"] .expandCamera,.playgroundConsole #liveViewer[data-layout="single"] .expandCamera{top:0;bottom:auto}
@media(max-width:740px){.playgroundConsole #liveViewer>.quickTaskEntry{width:calc(100% - 16px);margin:0 8px 8px}}
@media(max-width:480px){
  .playgroundConsole #liveViewer>.quickTaskEntry{width:calc(100% - 12px);height:44px;margin:0 6px 6px;padding:1px;gap:2px;border-radius:10px}
  .playgroundConsole #quickPrompt{padding:0 5px;border-radius:7px}
  .playgroundConsole #quickRun{position:relative;min-width:44px;padding:0 8px;border-radius:7px;font-size:13px}
  .playgroundConsole #quickRun::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(44px,100%);transform:translateY(-50%)}
}
.playgroundConsole .expandCamera{opacity:0;transition:opacity .15s;border-radius:6px}
.playgroundConsole .syncTile:hover .expandCamera,.playgroundConsole .syncTile:focus-within .expandCamera{opacity:1}
.playgroundConsole .watchInteraction{grid-area:chat;contain:none;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.playgroundConsole .taskChatHeading{flex:none;padding:20px 20px 12px}
.playgroundConsole .taskChatHeading h2{font-size:17px;line-height:24px;font-weight:750;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;margin:0}
.playgroundConsole #taskHeaderPrompt{font-weight:400}
.playgroundConsole .watchToolbar{flex:none;order:0;padding:0 16px 14px;margin:0;gap:6px;border-bottom:1px solid var(--line)}
.playgroundConsole .conversationModes{border:0;background:none;padding:0;gap:2px}
.playgroundConsole .conversationModes button{padding:8px 9px;min-height:36px;font-size:11px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playgroundConsole #videoDelayNotice{font-size:12px;margin:0;color:var(--muted)}
.playgroundConsole .watchInteraction>#liveConversationPanel,.playgroundConsole .watchInteraction>#liveConversationPanel:has(.aspireTaskPanel:not([hidden])){width:100%;flex:1;min-height:0;height:auto;max-height:none;margin:0;padding:12px 20px 16px;contain:none;border:0;border-radius:0;background:var(--surface);overflow-y:auto;overscroll-behavior:contain}
.playgroundConsole #liveConversationPanel>.statusHeader,.playgroundConsole #sideRunner,.playgroundConsole #liveConversationPanel>.runPrompt{display:none}
.playgroundConsole .watchLayout #sideConversationMessages{flex:none;overflow:visible;padding:0;max-height:none;font-size:12px}
.playgroundConsole #sideConversationMessages li.conversationTurn{width:100%;max-width:none;margin:8px 0;padding:10px 12px;border:0;border-radius:9px;box-shadow:none}
.playgroundConsole #sideConversationMessages .astraResponse{font:14px/1.7 var(--font-ui)}
.playgroundConsole #sideConversationMessages .conversationHeading{font-size:12px;margin-bottom:5px}
.playgroundConsole .videoOverlays{position:static;max-height:none;pointer-events:auto;margin:0 0 10px;gap:0}
.playgroundConsole .watchLayout .videoOverlays .astraStream{height:auto;max-height:none;margin:0;padding:8px 0;border:0;background:transparent;color:var(--ink);box-shadow:none;backdrop-filter:none}
.playgroundConsole .videoOverlays .astraStream .statusHeader{display:none}
.playgroundConsole .watchLayout .videoOverlays #astraStreamOutput,.playgroundConsole .watchLayout .videoOverlays #runOutcomeDetail{color:var(--muted);font-size:13px;max-height:4.5em;line-height:1.6}
.playgroundConsole .videoOverlays .runOutcomeHeading strong{color:var(--ink);font-size:12px}
.playgroundConsole .videoOverlays .runOutcomeHeading span{color:var(--muted)}
.playgroundConsole .watchInteraction .runSetup>.panel{padding:12px 16px 16px;border:0;background:var(--surface)}
.playgroundConsole .watchInteraction .promptRow{display:block;padding:14px;border:1px solid #bdcbbd;border-radius:12px;background:#f5f7f0}
.playgroundConsole .watchInteraction #prompt{display:block;width:100%;min-height:48px;max-height:144px;resize:none;overflow-y:auto;padding:0;font-size:16px;line-height:24px}
.playgroundConsole .composerToolbar{display:flex;align-items:center;gap:8px;margin-top:8px}
.playgroundConsole .composerToolbar button{width:44px;height:44px;padding:0;border:0;border-radius:50%;font-size:23px;font-weight:400}
.playgroundConsole #composerModel{flex:1;width:0;min-width:0;padding:5px 8px;border:0;background:transparent;font-size:11px}
.playgroundConsole #composerSend{flex:none;background:var(--accent);color:white;font-size:24px}
.playgroundConsole .composerToolbar #composerStop{width:auto;min-width:44px;padding:0 10px;border-radius:8px;font-size:13px;background:#fcebe9;color:#a72c24}
.playgroundConsole #composerSend[data-running="true"]{font-size:14px}
.playgroundConsole .promptRow>.runLaunchActions,.playgroundConsole .promptRow>#runButtons{display:none}
.playgroundConsole .watchInteraction #message{min-height:0;font-size:12px;line-height:1.45;margin:6px 2px 0}
.playgroundConsole .visitorChat{position:fixed;z-index:30;top:auto;right:18px;bottom:18px;width:min(320px,calc(100vw - 24px));height:min(440px,calc(100dvh - 96px));max-height:calc(100dvh - 96px);overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:14px;border-color:var(--line);border-radius:14px;background:white;box-shadow:0 12px 45px #18251e29}
.playgroundConsole .visitorChatHeading{flex:none;margin-bottom:8px}
.playgroundConsole .visitorChat>p,.playgroundConsole .visitorChat form{flex:none}
.playgroundConsole .visitorChat>.help{font-size:11px;line-height:1.4;margin:0 0 8px}
.playgroundConsole .visitorChat #chatStatus{margin:8px 0 0}
.playgroundConsole .visitorChatHeading h2{font-size:14px}
.playgroundConsole .visitorChatHeading button{font-size:11px;padding:5px 8px}
.playgroundConsole #chatMessages{flex:1;height:auto;min-height:0;margin:8px 0;overscroll-behavior:contain}
.playgroundConsole #chatMessages strong{display:inline;font-size:12px}
.playgroundConsole #chatMessages li{font-size:12px;padding:8px 0;border:0}
.playgroundConsole .visitorChat label{font-size:11px;margin:7px 0 4px}
.playgroundConsole .visitorChat input,.playgroundConsole .visitorChat textarea{padding:9px;font-size:12px}
.playgroundConsole #chatText{min-height:44px;max-height:72px;resize:none}
.playgroundConsole .visitorChat>.help:last-child{display:none}
.playgroundConsole .playgroundResources{max-width:1500px;margin:0 auto 24px;padding:24px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;scroll-margin-top:24px}
.playgroundConsole .playgroundResources h2{font-size:24px;margin-bottom:12px}
.playgroundConsole #pastRunsList{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px 18px;max-height:none;overflow:visible;margin:18px 0}
.playgroundConsole .pastRunCard{display:flex;flex-direction:column;border:0;border-radius:10px;background:transparent}
.playgroundConsole .pastRunCard>video,.playgroundConsole .pastRunCard>.pastRunComposite{order:-1;aspect-ratio:960/654;width:100%;margin:0 0 9px;border-radius:10px;background:#17221b}
.playgroundConsole .pastRunCard .pastRunPrompt{padding:0;font-size:15px;line-height:1.5;font-weight:600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.playgroundConsole .pastRunCard .pastRunLabel{padding:6px 0;font-size:12px;line-height:1.5;color:var(--muted)}
.playgroundConsole #pastRunsList>li>button{font-size:10px;padding:4px 7px;margin-top:5px}
.playgroundConsole #pastRunsList details{margin-top:5px}
.playgroundConsole .playgroundSteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;list-style:none;font-size:15px;line-height:1.7}
.playgroundConsole .playgroundSteps strong{display:block;color:var(--ink);margin-bottom:4px}
.playgroundConsole .resourceLinks{display:flex;flex-wrap:wrap;gap:24px;font-size:14px;margin-top:24px}
.pastRunCard>.recordingSource{position:absolute!important;width:1px!important;height:1px!important;opacity:.001;pointer-events:none}
.recordedPlayer{position:relative}
.recordedPlayer:has(>.pastRunComposite:not([hidden])){padding-bottom:44px;background:#17221b;border-radius:10px;overflow:hidden}
.recordedPlayer>.pastRunComposite{display:block;width:100%;height:auto}
.recordedPlayer>.recordingSource{position:absolute;inset:0;width:100%;height:100%;margin:0;clip-path:inset(calc(100% - 44px) 0 0 0);border-radius:0;object-fit:none;object-position:-10000px -10000px;background:#101612}
.recordedPlayer>.recordingSource:fullscreen{clip-path:none;object-fit:contain;object-position:center}
.playgroundConsole #liveViewer .syncTile:fullscreen canvas{height:100%;transform:none;object-fit:contain}
@media(max-width:740px){
  .playgroundConsole main,.playgroundConsole main.chatClosed{padding:10px 14px 28px}
  .playgroundConsole .playgroundHeader{height:auto;min-height:52px;gap:8px;margin-bottom:14px;flex-wrap:wrap}
  .playgroundConsole .playgroundHeader h1{font-size:24px;gap:10px}
  .playgroundConsole .robotNavigation label,.playgroundConsole #robotSelectorStatus{display:none}
  .playgroundConsole .robotNavigation select{max-width:140px;min-height:44px;padding:8px;font-size:13px}
  .playgroundConsole .openVisitorChat{font-size:12px;padding:8px 10px}
  .playgroundConsole .watchLayout,.playgroundConsole .watchLayout.conversationClosed{display:flex;flex-direction:column;height:auto;gap:12px;margin-bottom:28px}
  .playgroundConsole .watchLayout>.watchVisuals{display:grid;grid-template-rows:auto auto;gap:8px;order:0}
  .playgroundConsole .watchVisuals>.videoPanel{height:var(--console-camera-height,260px);order:0}
  .playgroundConsole .watchInteraction{order:1;height:min(560px,70dvh);min-height:400px}
  .playgroundConsole .expandCamera{opacity:1;font-size:14px}
  .playgroundConsole .playgroundSteps{grid-template-columns:1fr;gap:14px}
  .playgroundConsole #pastRunsList{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
  .playgroundConsole .visitorChat{top:auto;right:10px;bottom:10px;height:min(420px,55dvh)}
}
/* Discrete, model-specific reasoning levels. Native range preserves keyboard control. */
.reasoningBar{padding:12px;border:1px solid #e5e7eb;border-radius:16px;background:#fff}
.reasoningHeading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.reasoningHeading strong{display:block;color:var(--accent,#2d6048);font-size:14px}
.reasoningHeading span{display:block;color:#777;font-size:12px;margin-top:3px}
.reasoningHeading button{border:0;background:transparent;color:#777;font-size:21px;padding:4px 8px}
#reasoningLevel{width:100%;height:24px;padding:0;margin-top:12px;appearance:none;border:0;border-radius:999px;background:linear-gradient(to right,var(--accent,#2d6048) var(--reasoning-fill,0%),#ececec var(--reasoning-fill,0%));cursor:pointer}
#reasoningLevel::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border:1px solid #ddd;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002}
#reasoningLevel::-moz-range-thumb{width:22px;height:22px;border:1px solid #ddd;border-radius:50%;background:#fff}
#reasoningLevel:focus-visible{outline:2px solid var(--accent,#2d6048);outline-offset:3px}

/* Model and run options stay with the chat composer. */
.playgroundConsole #composerOptions{max-height:min(280px,35dvh);overflow-y:auto;overscroll-behavior:contain;padding:0 4px 12px;font-size:12px}
.playgroundConsole #composerOptions .help{font-size:11px}
.playgroundConsole #composerOptions .runDurationControl{margin:0 0 12px;font-size:12px}
#localRunDialog #runButtons>:not(#run){display:none!important}
#localRunDialog #runButtons,#localRunDialog #run{width:100%}

/* Compact model/effort popover, anchored above its chat pill. */
.playgroundConsole #composerSettings{position:relative;flex:1;width:auto;min-width:0;height:44px;padding:8px 24px 8px 10px;border-radius:8px;background:#e9efe3;color:var(--ink);font:600 12px var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playgroundConsole #composerSettings::after{content:'▾';position:absolute;right:9px;top:50%;transform:translateY(-50%)}
.playgroundConsole #composerSettings:hover{background:#e6e8e3}
.playgroundConsole #composerOptions{position:fixed;inset:auto;margin:0;width:min(280px,calc(100vw - 24px));max-height:70dvh;padding:14px 12px 10px;border:1px solid #e5e7eb;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 5px 18px #00000014;overflow-y:auto;font-size:12px}
#composerOptions::backdrop{background:transparent}
.modelPickerHeader{display:flex;align-items:flex-start;gap:10px;margin-bottom:4px}
.modelPickerTitle{min-width:0;flex:1}
.playgroundConsole #composerOptions #composerModel{display:block;width:100%;min-width:0;padding:0 16px 0 0;margin:0;border:0;background:transparent;color:#777;font-size:12px;line-height:20px;cursor:pointer}
#composerOptions #resetReasoning{flex:none;border:0;padding:0;width:24px;height:26px;background:transparent;color:#888;font:20px system-ui}
#composerOptions #effortField>.help,#composerOptions #reasoningModel{display:none}
#composerOptions .reasoningBar{padding:0;border:0;border-radius:0}
#composerOptions #reasoningLevel{margin:8px 0 4px;height:24px}
.playgroundConsole #composerOptions .runDurationControl{display:flex;align-items:center;gap:8px;margin:10px 0 4px;padding:8px 0 2px;border-top:1px solid #eee}
#composerOptions .runDurationControl label{margin:0 auto 0 0;font-size:12px;font-weight:500;color:#777}
#composerOptions .runDurationControl input{width:55px;padding:4px 6px;font-size:12px}
#advancedModelOptions{border:0;margin:8px 0 0;padding:0;font-size:11px;color:#777}
#advancedModelOptions>summary{cursor:pointer;list-style:none;text-align:center;font-size:11px}
.runExecutionInfo{flex:none;margin:8px 0;padding:10px 12px;border-radius:9px;background:#f1f4ef;color:#465044;font-size:11px}
.runExecutionInfo>strong{font-size:11px;font-weight:650}.runExecutionInfo>p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.6;margin:5px 0 0}

.mainChatSteering .help {margin:8px 0 0;}
.mainChatSteering p:empty {display:none;}

/* A compact prompt action sits beside the model picker, with its own editor. */
#systemPromptSettings {flex:none;margin:0}
.playgroundConsole #openSystemPrompt {display:flex;align-items:center;gap:4px;width:auto;height:28px;padding:4px 7px;border:1px solid #e0e4dc;border-radius:999px;background:transparent;color:#667060;font:500 11px system-ui;white-space:nowrap;cursor:pointer}
.playgroundConsole #openSystemPrompt:hover {background:#eeefed;color:#344032}
.playgroundConsole #composerSettings:focus-visible,.playgroundConsole #openSystemPrompt:focus-visible {outline:2px solid #3478f6;outline-offset:2px}
#systemPromptDialog {box-sizing:border-box;width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:24px;border:1px solid #dce1e8;border-radius:16px;background:#fff;color:#202631;box-shadow:0 20px 70px #18253c33;overflow:auto}
#systemPromptDialog::backdrop {background:#18253c66}
.systemPromptHeader {display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.systemPromptHeader h2 {margin:0;font-size:20px}
#systemPromptModel {margin:4px 0 0;color:#697386;font-size:13px}
#closeSystemPrompt {border:0;background:transparent;font-size:26px;line-height:1;color:#697386;cursor:pointer}
#systemPromptDialog label {display:block;margin:14px 0 6px;font-size:13px;font-weight:600}
#systemPromptName {font-weight:400;opacity:.7}
#systemPromptDialog select {box-sizing:border-box;width:100%;padding:9px;border:1px solid #dce1e8;border-radius:8px;background:#fff;color:inherit}
#systemPromptText {width:100%;min-height:220px;max-height:50dvh;padding:12px;border:1px solid #dce1e8;border-radius:8px;resize:vertical;font:13px/1.5 ui-monospace,monospace;white-space:pre-wrap;box-sizing:border-box}
#systemPromptDialog .help,#systemPromptSource {font-size:12px;line-height:1.5}
.systemPromptActions {display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px}
.systemPromptActions > div {display:flex;gap:8px;margin-left:auto}
.systemPromptActions button {padding:9px 12px;border:1px solid #dce1e8;border-radius:8px;background:#fff;color:inherit;cursor:pointer}
#saveSystemPrompt {background:#347df1;border-color:#347df1;color:#fff}
@media(max-width:480px) {#systemPromptDialog {padding:16px}}

/* Console identity and readable interaction states. */
/* The main model picker owns selection. Keep catalog state for its scripts,
   without showing a second model field, refresh button or catalog status. */
.playgroundConsole #modelSettings{display:none}
.playgroundConsole button,.playgroundConsole input,.playgroundConsole select,.playgroundConsole textarea{font-family:var(--font-ui)}
.consoleProduct{padding-left:18px;border-left:1px solid #cbd4c9;color:var(--muted);font-size:14px;font-weight:500;letter-spacing:0}
.playgroundConsole .intro{max-width:none;min-width:0}
.playgroundConsole button{transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease}
.playgroundConsole button:hover:not(:disabled){background:var(--accent-soft);border-color:#aabca8}
.playgroundConsole #composerSend:hover:not(:disabled){background:#1f4b37;color:white}
.playgroundConsole :focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.playgroundConsole .promptRow:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #2d604812}
.taskPromptLabel{margin:0 0 8px;font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.playgroundConsole #prompt::placeholder{color:#657268;opacity:1}
.playgroundConsole .conversationModes{display:flex;flex-wrap:wrap;gap:2px}
.playgroundConsole .conversationModes button[aria-pressed="true"]{background:var(--accent-soft);color:#254e37;box-shadow:none}
.playgroundConsole #liveViewer figure:not(.syncSource){position:relative}
.playgroundConsole #liveViewer figure:not(.syncSource)>figcaption{display:none}
.playgroundConsole #liveViewer figcaption span{display:none}
.playgroundConsole .expandCamera{width:44px;height:44px;display:grid;place-items:center;isolation:isolate;opacity:.8;background:transparent;color:white;font-size:16px;border:0}
.playgroundConsole .expandCamera::before{content:"";position:absolute;inset:9px;z-index:-1;border-radius:5px;background:#14271dd9}
.playgroundConsole .expandCamera:hover:not(:disabled){background:transparent}
.playgroundConsole .expandCamera:hover{opacity:1}
.playgroundConsole #sideConversationMessages>li:not(.conversationTurn){margin:16px 0;padding:20px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;color:var(--muted);font-size:14px;line-height:1.7}
.playgroundConsole #liveConversationPanel .aspireActivityLog .aspireActivityEntry p,.playgroundConsole #liveConversationPanel .aspireActivityLog .aspireActivityTitle{font-size:14px;line-height:1.7}
.playgroundConsole .aspireActivityLog .aspireActivityHeading>strong,.playgroundConsole .aspireActivityLog .aspireActivityHeading time,.playgroundConsole #liveConversationPanel .aspireActivityLog .aspireActivityContext,.playgroundConsole #liveConversationPanel .aspireActivityLog .aspireSource{font-size:12px;color:var(--muted)}
.playgroundConsole #composerOptions{border-color:var(--line);border-radius:12px;background:var(--surface);padding:18px;width:min(320px,calc(100vw - 24px))}
.playgroundConsole #composerOptions :is(#composerModel,.runDurationControl label,#advancedModelOptions){color:var(--muted);font-size:13px}
.playgroundConsole #composerOptions #resetReasoning{width:44px;height:44px;color:var(--muted)}
.playgroundConsole #composerOptions #composerModel{min-height:36px}
.playgroundConsole #composerOptions .runDurationControl input{min-height:44px;font-size:16px}
.playgroundConsole #advancedModelOptions>summary{padding:10px;font-size:12px}
.playgroundConsole .visitorChat input,.playgroundConsole .visitorChat textarea{font-size:16px}
.playgroundConsole .visitorChat label,.playgroundConsole .visitorChat>.help,.playgroundConsole #chatMessages li{font-size:13px;color:var(--muted)}
.playgroundConsole .visitorChatHeading button{min-height:44px}
.playgroundConsole .resourceLinks a:visited{color:#695751}
.playgroundConsole .pastRunCard:hover{background:transparent}
.playgroundConsole .playgroundSteps{counter-reset:guide}
.playgroundConsole .playgroundSteps li{counter-increment:guide}
.playgroundConsole .playgroundSteps strong:before{content:"0" counter(guide);display:block;margin-bottom:10px;font-size:12px;color:var(--muted);font-weight:600}
@media(max-width:740px){
  .playgroundConsole .consoleProduct{font-size:12px;padding-left:10px}
  .playgroundConsole .playgroundHeader .intro{flex:1 1 100%}
  .playgroundConsole .robotNavigation{flex:1;min-width:0;justify-content:flex-start}
  .playgroundConsole .robotNavigation select{min-width:0;max-width:100%;width:100%}
  .playgroundConsole .robotNavigation label{display:block}
  .playgroundConsole .conversationModes button{min-height:44px;padding:8px 10px;font-size:12px}
  .playgroundConsole #liveViewer figure>figcaption{left:6px;top:6px;padding:3px 6px;font-size:10px}
  .playgroundConsole .taskChatHeading{padding:18px 18px 10px}
  .playgroundConsole .watchToolbar{padding:0 12px 10px}
  .playgroundConsole .watchInteraction>#liveConversationPanel{padding:10px 18px}
  .playgroundConsole #videoDelayNotice{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.playgroundConsole button,.playgroundConsole .expandCamera{transition:none}}
/* Short landscape windows scroll the workspace instead of clipping its composer. */
@media(min-width:741px) and (max-height:600px){
  .playgroundConsole .watchLayout,.playgroundConsole .watchLayout.conversationClosed{min-height:400px}
  .playgroundConsole .taskChatHeading{padding:12px 16px 8px}
  .playgroundConsole .watchToolbar{padding-bottom:8px}
  .playgroundConsole .watchInteraction .runSetup>.panel{padding:8px 12px 12px}
}

/* Keep model choice separate from its effort control and bound expanded options. */
.playgroundConsole #composerOptions{overflow-x:hidden;scrollbar-gutter:stable;scroll-padding-block:12px}
#composerOptions .modelPickerHeader{align-items:flex-start;gap:8px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line)}
#composerOptions .modelPickerTitle>label,#composerOptions #effortField>label{display:block;margin:0 0 4px;font-size:12px;font-weight:600;color:var(--muted)}
.playgroundConsole #composerOptions #composerModel{color:var(--ink);font-size:14px;font-weight:600;min-height:36px;padding:0 20px 0 0}
/* Keep the browser's select behavior while giving the visitor-owned option a quiet cue. */
@supports (appearance:base-select) and selector(::picker(select)){
  .playgroundConsole #composerModel,.playgroundConsole #composerModel::picker(select){appearance:base-select}
  .playgroundConsole #composerOptions #composerModel{display:flex;align-items:center;justify-content:space-between}
  .playgroundConsole #composerModel::picker(select){min-width:anchor-size(width);max-width:calc(100vw - 24px);max-height:70dvh;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);box-shadow:0 5px 18px #00000014;font:400 14px/1.4 var(--font-ui)}
  .playgroundConsole #composerModel option{min-height:30px;padding:5px 8px;border-radius:5px;gap:8px;font-weight:400;cursor:pointer}
  .playgroundConsole #composerModel option[data-provider="custom_endpoint"]{background:color-mix(in srgb,var(--accent) 6%,var(--surface));color:var(--accent);font-weight:600}
  .playgroundConsole #composerModel option:is(:hover,:focus-visible,:checked){background:var(--accent-soft);color:var(--ink)}
  .playgroundConsole #composerModel option::checkmark{color:var(--accent)}
  @media(pointer:coarse){.playgroundConsole #composerModel option{min-height:44px}}
}
#composerOptions .reasoningHeading{display:flex;min-height:32px}
#composerOptions .reasoningHeading strong{font-size:15px;color:var(--accent,var(--ink))}
.playgroundConsole #composerOptions #resetReasoning,#composerOptions .closeModelOptions{flex:none;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:22px}
#composerOptions .closeModelOptions{margin-top:-6px;margin-right:-6px}
#composerOptions #reasoningLevel{display:block;margin:4px 0 10px}
.playgroundConsole #composerOptions :is(#systemPromptSettings,#advancedModelOptions)>summary{min-height:40px;padding:10px 0;list-style:revert;text-align:left;font-size:13px;color:var(--ink);cursor:pointer}
#composerOptions :is(input,select,textarea,button,summary){scroll-margin-block:12px}
#composerOptions #systemPromptText{min-height:140px;max-height:320px;max-height:min(320px,45dvh);font-size:13px;line-height:1.6}
@media(max-width:740px){
  .playgroundConsole #composerOptions #resetReasoning,#composerOptions .closeModelOptions{width:44px;height:44px;min-height:44px}
  .playgroundConsole #composerOptions :is(input:not([type=range]),select,textarea){font-size:16px}
  .playgroundConsole #composerOptions :is(#systemPromptSettings,#advancedModelOptions)>summary{min-height:44px}
}

/* A small visible camera control inside a generous transparent touch target. */
.playgroundConsole .expandCamera{width:44px;height:44px;min-height:44px;padding:0;right:0;bottom:0;isolation:isolate;background:transparent;font-size:16px;line-height:1;opacity:.9}
.playgroundConsole .expandCamera::before{content:"";position:absolute;inset:10px;border-radius:4px;background:#14271dc9;z-index:-1}
.playgroundConsole button.expandCamera:hover:not(:disabled){background:transparent}
.playgroundConsole .expandCamera:hover::before,.playgroundConsole .expandCamera:focus-visible::before{background:#14271df2}
.playgroundConsole #liveViewer[data-layout="top-with-grippers"]>figure[data-camera-role="top"] .expandCamera{top:0}
.playgroundConsole .cameraDialog .syncTile>figcaption{display:none}

.playgroundConsole .cameraDialog .expandCamera{display:none}

.playgroundConsole .cameraDialog .syncTile img{display:block;width:100%;height:auto;max-height:90dvh;object-fit:contain}
.playgroundConsole .cameraDialog .modelCameraBadge{display:none}
.playgroundConsole #liveViewer .syncTile:fullscreen img{height:100%;transform:none;object-fit:contain}
@media(max-width:740px){
  .playgroundConsole #liveViewer[data-layout="top-with-grippers"]>figure:is([data-camera-role="left"],[data-camera-role="right"]):not(:fullscreen){min-width:88px}
  .playgroundConsole #liveViewer[data-layout="top-with-grippers"]>figure:is([data-camera-role="left"],[data-camera-role="right"]) .expandCamera{font-size:12px}
  .playgroundConsole #liveViewer[data-layout="top-with-grippers"]>figure:is([data-camera-role="left"],[data-camera-role="right"]) .expandCamera::before{inset:13px}
}

/* Match the separately published prompt editor to the console palette. */
.playgroundConsole #openSystemPrompt{height:44px;padding:6px 8px;border-radius:8px;color:var(--muted);font:500 11px var(--font-ui)}
.playgroundConsole #composerSettings:focus-visible,.playgroundConsole #openSystemPrompt:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.playgroundConsole #systemPromptDialog{background:var(--surface);color:var(--ink);border-color:var(--line)}
.playgroundConsole #systemPromptModel,.playgroundConsole #closeSystemPrompt{color:var(--muted)}
.playgroundConsole #saveSystemPrompt{background:var(--accent);border-color:var(--accent);color:white}

.runVideoEmailSetting { margin-top: 14px; }
.runVideoEmailSetting label { display: flex; align-items: flex-start; gap: 10px; margin: 0; line-height: 1.45; cursor: pointer; }
#emailRunVideo { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; accent-color: var(--accent, #365c48); cursor: pointer; }
.runVideoEmailSetting .help { margin: 6px 0 0; font-size: 12px; line-height: 1.5; }

/* Keep the repository link beside the playground title. */
.playgroundTitle{display:flex;align-items:center;gap:16px}
.playgroundApiLink{font-size:13px;font-weight:600;letter-spacing:0;color:var(--muted);padding:12px 0;text-underline-offset:4px}

/* Shared reactions float just below the camera, aligned to its right edge. */
.cameraFooter{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;min-width:0}
.cameraDetails{min-width:0;overflow-wrap:anywhere}
.cameraSocialControls{position:relative;display:flex;align-items:center;gap:6px;justify-self:end}
.playgroundConsole .cameraSocialControls .openVisitorChat{height:34px;min-height:34px;padding:6px 10px;gap:6px;border-radius:10px;font-size:12px}
@media(max-width:620px){.cameraFooter{grid-template-columns:minmax(0,1fr);gap:8px}.cameraSocialControls{grid-row:1}.cameraDetails{grid-row:2}}
.expandedCameraFooter{flex:none;width:100%;padding:8px 12px;background:var(--paper);color:var(--ink)}
.playgroundConsole .syncTile:fullscreen{justify-content:flex-start}
.playgroundConsole .syncTile:fullscreen .syncTilePicture{flex:1;min-height:0;height:auto}
.playgroundConsole .syncTile:fullscreen :is(canvas,img){height:100%;max-height:100%;object-fit:contain}
.playgroundConsole .cameraDialog>.syncTile{flex:1;min-height:0;display:flex;flex-direction:column}
.playgroundConsole .cameraDialog .syncTilePicture{flex:1;min-height:0}
.playgroundConsole .cameraDialog .syncTile :is(canvas,img){height:100%;max-height:100%;object-fit:contain}
.reactionDock{position:relative;z-index:8;display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 4px 18px #203a3014}
.reactionDock button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:7px;font-size:12px;line-height:1;background:transparent}
.reactionDock button:hover:not(:disabled){background:var(--accent-soft)}
.reactionStage{position:absolute;right:0;bottom:calc(100% + 12px);width:208px;height:150px;display:flex;align-items:flex-end;justify-content:flex-end;gap:4px;pointer-events:none}
.reactionPopup{flex:none;font-size:40px;line-height:1.2;filter:drop-shadow(0 2px 3px #203a3020);animation:reaction-float 2.4s ease-out forwards}
.chatPopupStage{position:absolute;z-index:9;right:0;bottom:calc(100% + 12px);width:320px;max-width:calc(100vw - 48px);display:flex;flex-direction:column;gap:8px;pointer-events:none}
.chatPopup{min-width:0;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 4px 18px #203a3020;overflow-wrap:anywhere;animation:chat-popup 5s ease forwards}
.chatPopup strong{display:block;margin-bottom:3px;font-size:12px;line-height:1.3;color:var(--muted)}
.chatPopup span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;max-height:5.6em;overflow:hidden;font-size:14px;line-height:1.4;white-space:pre-wrap}
.reactionStatus:not(.reactionError){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.reactionStatus.reactionError{position:absolute;right:0;bottom:calc(100% + 8px);width:240px;max-width:calc(100vw - 36px);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:#a72c24;font-size:12px}
@keyframes reaction-float{0%{opacity:0;transform:translateY(8px) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translateY(-100px) scale(1)}}
@keyframes chat-popup{0%{opacity:0;transform:translateY(8px)}6%,90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.reactionPopup,.chatPopup{animation:none}}
@media(max-width:740px),(pointer:coarse){.reactionDock button{width:44px;height:44px}.playgroundConsole .cameraSocialControls .openVisitorChat{height:50px;min-height:50px}}

/* Human and model conversations share the same readable pane. */
.playgroundConsole .conversationModes{width:100%;flex-wrap:nowrap}
.playgroundConsole .conversationModes button{flex:none;padding:8px 6px}
.playgroundConsole .conversationModes [data-conversation-mode="reasoning"]{flex:1;min-width:0;max-width:none;white-space:normal;line-height:1.3;text-align:left}
.playgroundConsole .watchInteraction>.visitorChat{position:static;z-index:auto;flex:1;min-height:0;width:100%;height:auto;max-height:none;overflow:hidden;margin:0;padding:14px 20px 18px;border:0;border-radius:0;background:var(--surface);box-shadow:none}
.playgroundConsole .watchInteraction>.visitorChat .visitorChatHeading{display:none}
.playgroundConsole .visitorChatSelected>#liveConversationPanel,.playgroundConsole .visitorChatSelected>.runSetup,.playgroundConsole .visitorChatSelected #taskHeaderPrompt{display:none}
.playgroundConsole .visitorChat:focus-visible{outline-offset:-3px}
.playgroundConsole #chatMessages{flex:1;min-height:0;margin:8px 0 14px;padding:0;scrollbar-gutter:stable;overflow-y:auto}
.playgroundConsole #chatMessages li{padding:10px 0;color:var(--ink);line-height:1.5}
.playgroundConsole #chatMessages strong{font-size:12px;font-weight:650;color:var(--muted)}
.playgroundConsole #chatMessages time{font-weight:400}
.playgroundConsole #chatMessages p{margin:4px 0 0;font-size:14px;line-height:1.6;color:var(--ink)}
.playgroundConsole #chatForm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding-top:12px;border-top:1px solid var(--line)}
.playgroundConsole .visitorName{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-width:0}
.playgroundConsole .visitorName label{flex:none;margin:0}
.playgroundConsole .visitorName input{min-width:0;max-width:240px;height:38px;font-size:14px}
.playgroundConsole .visitorMessage{min-width:0}
.playgroundConsole .visitorMessage label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.playgroundConsole #chatText{display:block;width:100%;height:64px;max-height:96px;font-size:14px}
.playgroundConsole #chatSend{width:auto;min-height:44px;margin:0;padding:10px 14px;background:var(--accent);color:white}
.playgroundConsole .visitorChat.visitorChatExpanded{width:min(430px,calc(100vw - 24px));height:min(600px,calc(100dvh - 96px));max-height:calc(100dvh - 96px)}
@media(max-width:740px){
  .playgroundConsole .watchInteraction>.visitorChat{padding:12px 18px 14px}
  .playgroundConsole .conversationModes button{padding:8px 6px;font-size:11px}
  .playgroundConsole .visitorChat input,.playgroundConsole .visitorChat textarea{font-size:16px}
  .playgroundConsole .visitorChat.visitorChatExpanded{height:min(560px,72dvh)}
}


/* Replay receipt V0: visible actions and an honest indeterminate render state. */
.runHistorySearch{margin:20px 0}.runHistorySearch label{display:block;margin-bottom:8px}.runHistorySearch>div{display:flex;gap:10px;flex-wrap:wrap}.runHistorySearch input{flex:1;min-width:200px}.personalRunList{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:0;list-style:none}.personalRunCard{width:100%;height:100%;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px;border:1px solid currentColor;border-radius:14px;cursor:pointer}.pastRunWatch{display:inline-flex;align-items:center;gap:8px;background:#e9f8c6;color:#183510;padding:8px 12px;border-radius:999px;font-size:14px;font-weight:700}.pastRunCard:hover,.pastRunCard:focus-visible{outline:2px solid #567d26;outline-offset:3px}.replayProcessing{padding:40px 20px;text-align:center;background:#f3f5ef;border-radius:16px;color:#26351d}.replayProcessing[hidden]{display:none}.replayProcessing progress{width:min(360px,100%);accent-color:#567d26}#past-runs>h2{margin-top:30px}
/* BEGIN observer enhancement preview v1 */

    .observerEnhancement{cursor:default;padding:10px 12px;background:var(--paper,#f5f7f4);color:var(--ink,#203128);font-size:13px;line-height:1.5}
    .observerEnhancement .enhancementHeading{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
    .observerEnhancement button{min-height:44px;padding:5px 11px;font-size:13px;border-radius:6px}
    .observerEnhancement .enhancementChoices{display:flex;gap:5px;margin:7px 0}
    .observerEnhancement button[aria-pressed=true]{background:#245b42;color:#fff}
    .observerEnhancement label{display:flex;align-items:center;gap:10px;min-height:44px;margin:0}
    .observerEnhancement input[type=range]{flex:1;min-width:80px;margin:0;accent-color:#245b42;height:44px;touch-action:pan-y}
    .observerEnhancement .enhancementNote{margin:4px 0 0;font-size:11px;color:var(--muted,#52645a)}
    .observerEnhancedCanvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;pointer-events:none}
    .observerEnhancedCanvas[hidden],.observerCompareLine[hidden],.observerCompareLabel[hidden]{display:none!important}
    .observerCompareLine{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 3px #000;pointer-events:none}
    .observerCompareLabel{position:absolute;top:8px;padding:3px 7px;border-radius:4px;background:#102018bd;color:#fff;font:12px/1.5 system-ui;pointer-events:none}
    .observerCompareLabel.before{left:8px}.observerCompareLabel.after{right:8px}
    .syncTile:fullscreen .observerEnhancement,.cameraDialog .observerEnhancement{background:#15251d;color:white}
    .syncTile:fullscreen .observerEnhancement .enhancementNote,.cameraDialog .observerEnhancement .enhancementNote{color:#b9cec0}
    @media(max-width:740px){.observerEnhancement{padding:8px 10px}.observerEnhancement .enhancementChoices{margin:3px 0}.observerEnhancement button{flex:1}}

    .observerEnhancementPreview .watchLayout>.watchVisuals{grid-template-rows:minmax(0,1fr) auto auto auto}
    .playgroundConsole #liveViewer .observerEnhancedPanel canvas[data-sync-tile]{height:100%;object-fit:contain;transform:none}
    .playgroundConsole #liveViewer .observerEnhancedPanel .observerEnhancedCanvas{transform:none}
    .observerEnhancedPanel:fullscreen,.cameraDialog .observerEnhancedPanel{display:flex!important;flex-direction:column;height:100dvh!important;max-height:100dvh}
    .observerEnhancedPanel:fullscreen .syncTilePicture,.cameraDialog .observerEnhancedPanel .syncTilePicture{flex:1;min-height:0;height:auto!important}
    .observerEnhancedPanel:fullscreen canvas[data-sync-tile],.cameraDialog .observerEnhancedPanel canvas[data-sync-tile]{height:100%!important;object-fit:contain;transform:none}
    .observerEnhancedPanel:fullscreen .observerEnhancement,.cameraDialog .observerEnhancedPanel .observerEnhancement{flex:none}
    .cameraDialog>.observerEnhancedPanel{flex:1!important;height:auto!important;min-height:0}
    .cameraDialog .observerEnhancement button,.observerEnhancedPanel:fullscreen .observerEnhancement button{color:white;border-color:#829b8b}
    .cameraDialog .observerCompareLabel.after{right:90px}
    .observerEnhancedPanel .expandCamera{opacity:1!important}
    .observerEnhancement select{width:auto;max-width:100px;min-height:44px;padding:4px 8px;font-size:13px;margin:0}
    .observerEnhancement .enhancementHeading{flex-wrap:nowrap}
    .observerEnhancement .enhancementHeading strong{font-size:12px;flex:1}
    .observerEnhancement .enhancementHeading button{flex:none}
    @media(max-height:500px){.cameraDialog .observerEnhancement .enhancementChoices,.cameraDialog .observerEnhancement .enhancementNote{display:none}.cameraDialog .observerEnhancement{padding:4px 10px}}
/* END observer enhancement preview v1 */

.pastRunMatch { margin: 8px 0; overflow-wrap: anywhere; }

/* Past Runs extends the existing quiet green console, with one shared replay. */
.allRunsHeading{margin-top:36px;flex-wrap:wrap}.allRunsHeading h2{margin:0}.runViewSwitch,.cloudToolbar,.assessmentControls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.runViewSwitch button[aria-pressed="true"],.assessmentControls button[aria-pressed="true"]{background:#214e39;color:#fff;border-color:#214e39}
.runModelFilter{margin:18px 0;max-width:560px}.runModelFilter summary{cursor:pointer;overflow-wrap:anywhere}.runModelFilter label{display:block;margin:14px 0 8px}.runModelFilter select{width:100%;min-height:130px}
.runScores{border-block:1px solid var(--line);padding:10px 0;margin:20px 0 10px;font-variant-numeric:tabular-nums}.runScores:empty{display:none}.runScores p{margin:8px 0;font-size:14px;line-height:1.6}.runScores strong{font-weight:650}.scoreCaveat{max-width:76ch}
.cloudToolbar{margin:12px 0}.cloudLegend{font-size:13px;line-height:1.7;color:#43564a}.taskCloudCanvas{display:block;width:100%;height:540px;border:1px solid #cbd5ca;border-radius:12px;touch-action:none;cursor:grab;background:#f8faf5}.taskCloudCanvas:active{cursor:grabbing}#taskCloudVersion{overflow-wrap:anywhere;font-size:11px}#taskCloudFocus{min-height:3em;overflow-wrap:anywhere;font-size:14px;line-height:1.6}
.cloudLegend{display:flex;flex-wrap:wrap;gap:4px 14px}.cloudKey{display:inline-flex;align-items:center;gap:6px}.cloudDot{width:9px;height:9px;box-sizing:border-box;border-radius:50%;display:inline-block;border:1.75px solid #607064}.cloudDot.success{background:#246744;border-color:#246744}.cloudDot.failure{background:#b2352c;border-color:#b2352c}
.taskCloudStage{position:relative}.taskCloudPreview{position:absolute;width:260px;max-width:calc(100% - 16px);box-sizing:border-box;z-index:2;pointer-events:none;background:#f8faf5;border:1px solid #607064;border-radius:12px;overflow:hidden;color:#172c21}.taskCloudPreview[hidden]{display:none}.taskCloudPreviewMedia{aspect-ratio:1.6;background:#172c21}.taskCloudPreviewMedia :is(video,canvas){display:block;width:100%;height:100%;max-height:164px;object-fit:contain;margin:0;border-radius:0}.taskCloudPreviewTitle{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:600;line-height:1.5;margin:10px 12px 6px}.taskCloudPreviewState{font-size:12px;line-height:1.5;margin:0 12px 10px;color:#43564a}
.taskCloudPreviewMedia video.recordingSource{display:none}
.runnerAssessment{width:100%;padding:18px 0;margin:8px 0;border-block:1px solid var(--line)}.runnerAssessment h3{font-size:16px;margin:0 0 12px}.runnerAssessment .help{margin:10px 0 0}.runnerAssessment details{margin-top:14px}.runnerAssessment li{font-size:13px;line-height:1.7}.assessmentControls button{min-height:42px}.visuallyHidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:is(.taskCloudCanvas,.runViewSwitch button,.assessmentControls button,.runModelFilter summary):focus-visible{outline:3px solid #326c4e;outline-offset:3px}.runnerAssessment [hidden],#pastRunsTable[hidden],#pastRunsCloud[hidden],#liveAssessment[hidden]{display:none}
@media(max-width:700px){.taskCloudCanvas{height:370px}.cloudLegend{flex-basis:100%}.allRunsHeading{gap:12px}runScores p{font-size:13px}.assessmentControls button{padding:9px 10px}.runHistorySearch input{min-width:140px}.runnerAssessment{padding:14px 0}}

.playgroundConsole .runViewSwitch button[aria-pressed="true"],.playgroundConsole .assessmentControls button[aria-pressed="true"],.playgroundConsole .runViewSwitch button[aria-pressed="true"]:hover:not(:disabled),.playgroundConsole .assessmentControls button[aria-pressed="true"]:hover:not(:disabled){background:#214e39;color:#fff;border-color:#214e39}

#liveAssessment{grid-column:1/-1;grid-row:2;padding:12px 0;margin:0}#liveAssessment .assessmentControls{gap:8px}#liveAssessmentStatus{max-width:70ch}
@media(max-width:620px){#liveAssessment{grid-row:3}}

.pastRunAssessment{margin:8px 0;font-size:12px;line-height:1.6}.playgroundConsole #pastRunsList>li[data-selected="true"]>.pastRunCard{outline:2px solid #567d26;outline-offset:3px}