assets/original.css

/* Original Oxygen Spatial console, adapted to the standalone Gradio DOM.
   Visual authority: X-CG_demo/src/styles.css (.heroBoard / .controlPanel /
   .controlCard / .runButton / .lowerGrid), verified on 2026-09-11.
   paper.css retains coordinate, focus, zoom and accessible state primitives.
   The previous frosted.css is deliberately NOT loaded. */
:root {
  --ink:#222132; --muted:#657083; --line:#e4deed;
  --green:#5e7d24; --lime:#91c331; --paper:#f4f5f8;
  --surface:#fff; --canvas:#f5f3f9; --selection:#eee7f7;
  /* Paper palette: purple for perception, lime for the primary action. */
  --purple:#784ebc; --purple-deep:#5b358b; --lavender:#eee7f7;
  --ui:Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
.gradio-container {
  background:radial-gradient(circle at 18% 8%,rgba(120,78,188,.06),transparent 28%),linear-gradient(180deg,#fff 0%,#f4f5f8 56%,#fff 100%)!important;
  --block-radius:8px; --color-accent:var(--green);
}
* {scrollbar-color:#c2d2b6 transparent}
::selection {background:#e5d7f5;color:#172018}
input,textarea {caret-color:var(--green)}
.studio-header {justify-content:space-between;gap:18px;padding:0 2px 22px;align-items:center}
.header-description {margin:8px 0 0;color:var(--muted);font:500 14px/1.6 var(--ui)}
.header-scope {color:var(--muted);font:600 12px var(--ui);white-space:nowrap}
.chapter-mark {display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:8px;background:#32831b;color:#fff;font:900 13px var(--mono)}
.eyebrow {display:block;color:var(--green);font:850 11px/1.6 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.studio-header .eyebrow {margin:0 0 3px}
.studio-header h1 {margin:0;color:var(--ink);font:850 32px/1.12 var(--ui);letter-spacing:0}
.grounding-intro {display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:0 2px 18px}
.grounding-intro h2 {margin:5px 0 0;font:800 25px/1.18 var(--ui);letter-spacing:0;color:var(--ink)}
.grounding-intro p {max-width:350px;color:var(--muted);font:700 13px/1.55 var(--ui);text-align:right;margin:0}
#console {display:flex!important;flex-direction:column!important;gap:16px!important;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
#workspace-top {display:flex!important;flex-wrap:nowrap!important;align-items:stretch;gap:0!important;min-height:620px;border:1px solid #e4deed;border-radius:8px;overflow:visible;background:radial-gradient(circle at 75% 36%,rgba(145,195,49,.06),transparent 34%),linear-gradient(120deg,#fff 0%,#fcfbfe 46%,#f5f3f9 100%);box-shadow:0 30px 85px rgba(45,29,69,.06)}
#controls {position:relative!important;z-index:12;flex:0 0 28.5%!important;min-width:290px!important;padding:28px!important;margin:0!important;gap:20px!important;background:#ffffffed;border-right:1px solid #e4deed;border-radius:8px 0 0 8px;backdrop-filter:none;-webkit-backdrop-filter:none}
#controls>* {flex-grow:0!important}
.control-brand {display:grid;gap:13px;padding-bottom:0}
.xpeng-logo {width:200px;height:auto;margin:0!important;border-radius:3px;filter:drop-shadow(0 16px 28px rgba(47,125,36,.14))}
.control-brand .eyebrow {font-size:11px;line-height:1.45}
.control-brand h2 {margin:4px 0 0;font:850 clamp(32px,2.8vw,44px)/1.08 var(--ui);letter-spacing:0;color:var(--ink)}
.control-brand h2 span {color:#91c331}
.control-brand p {max-width:390px;margin:0;font:700 14px/1.6 var(--ui);color:#657083}
#control-settings {padding:14px!important;gap:14px!important;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:none;overflow:visible!important}
#control-fields {flex-wrap:nowrap!important;gap:12px!important;align-items:stretch}
#control-fields>.form {min-width:0!important;flex:1 1 0!important;width:0!important}
#control-settings .form {min-width:0!important;overflow:visible}
#media-type {flex:0 0 40%!important;min-width:0!important}
.media-field>span,#route-select [data-testid=block-info] {display:block;margin-bottom:8px!important;color:#657386!important;font:800 10px/1.4 var(--mono)!important;letter-spacing:.07em;text-transform:uppercase}
.media-field>div {display:flex;align-items:stretch;height:39px;padding:3px;border:1px solid #e4deed;border-radius:8px;background:#f2eff7}
.media-field>div>span {display:grid;place-items:center;min-width:64px;padding:0 12px;border-radius:6px;color:#0c1608;background:#91c331;font:800 13px var(--ui);box-shadow:0 7px 18px rgba(131,200,50,.18)}
#route-select {flex:1 1 0!important;min-width:0!important;background:transparent!important;border:0!important;padding:0!important;overflow:visible!important}
#route-select label {display:block!important;min-height:0!important;padding:0!important;margin:0!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important}
#route-select .wrap {display:flex!important;position:relative;flex-wrap:nowrap!important;gap:4px!important;min-height:39px!important;border:1px solid #e4deed!important;border-radius:8px!important;padding:6px 10px!important;background:#fff!important;box-shadow:none;overflow:visible!important;isolation:auto}
#route-select .container,#route-select .wrap-inner {min-width:0!important;width:100%!important}
#route-select .secondary-wrap {min-width:0!important;width:100%!important;display:flex!important;align-items:center;gap:6px}
#route-select input {position:static!important;flex:1 1 0!important;min-width:0!important;width:100%!important;height:auto!important;opacity:1!important;margin:0!important;padding:0!important;color:#172018!important;font:750 12px var(--ui)!important}
#route-select .icon-wrap {flex:0 0 14px!important;width:14px!important;height:14px!important}
#route-select svg,#advanced-options>.label-wrap svg {width:14px!important;height:14px!important;color:var(--muted)}
#console .wrap.hide {display:none!important}
#route-select .wrap:focus-within {border-color:var(--green)!important;outline:2px solid #ddd0ee}
#route-select ul {z-index:60!important;background:#fff!important;color:var(--ink)!important;border:1px solid var(--line);border-radius:8px!important;box-shadow:0 12px 28px rgba(25,49,31,.14)}
#route-select li {font:650 13px var(--ui)!important}
#route-select li:hover {background:var(--selection)!important}
#upload-button {width:100%!important;flex:0 0 auto!important;min-width:0!important;min-height:48px!important;border:1px dashed #c1dca6!important;border-radius:8px!important;padding:12px!important;background:#fcfbfe!important;color:#30263f!important;font:750 12px var(--ui)!important;box-shadow:none!important;text-align:left;justify-content:flex-start;gap:10px}
#upload-button:hover {background:#f3eef9!important;border-color:var(--green)!important}
#upload-button::before {content:"";display:block;width:18px;height:18px;flex-shrink:0;background:var(--green);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M11 3H4v14h13v-7M13 4h6M16 1v6M4 14l4-4 3 3 2-2 4 4'/%3E%3Ccircle cx='8' cy='7' r='1'/%3E%3C/svg%3E") center/contain no-repeat}
#advanced-options {border:0!important;border-top:1px solid #e9e5ef!important;border-bottom:1px solid #e9e5ef!important;border-radius:0!important;background:transparent!important;padding:0!important}
#advanced-options>.label-wrap {display:flex!important;align-items:center;justify-content:space-between;width:100%!important;padding:10px 0!important;font:750 10px var(--mono)!important;letter-spacing:.055em;text-transform:uppercase;min-height:39px!important;color:var(--muted)!important;gap:4px}
#advanced-options>.label-wrap>span,#prompt-console>.label-wrap>span,#output-console>.label-wrap>span,#source-details>.label-wrap>span {font:inherit!important;color:inherit!important;letter-spacing:inherit}
#advanced-options>.label-wrap>.icon {flex-shrink:0;font-size:10px!important}
#advanced-options>.label-wrap {overflow:hidden!important;font-family:var(--ui)!important;font-size:12px!important;letter-spacing:0!important}
#advanced-options>.label-wrap>span {min-width:0;overflow-wrap:anywhere}
.runtime-options {display:grid;grid-template-columns:auto 1fr;gap:10px;font:12px/1.6 var(--ui);color:var(--muted);padding:10px 0}
.runtime-options b {text-align:right;overflow-wrap:anywhere;color:var(--ink);font-weight:650}
.runtime-options small {grid-column:1/-1;font-size:11px;line-height:1.7}
#service-panel {padding-top:12px!important;border-top:1px solid var(--line);gap:7px!important}
.api-status {align-items:center;gap:7px}.api-status b {font-size:12px}.api-status small {flex-basis:100%;font:400 12px/1.65 var(--ui);color:var(--muted)}
.connection-detail {font:12px/1.6 var(--ui);color:var(--muted)}
.connection-detail summary {cursor:pointer;padding:4px 0}.connection-detail code {display:block;max-height:90px;overflow:auto;overflow-wrap:anywhere;font:11px/1.6 var(--mono)}
.api-status,.api-status span {font:12px/1.65 var(--ui);color:var(--muted)}
.api-status.online {color:#168a45}.api-status.offline {color:#a53246}
#health-button {font:12px var(--ui)!important;min-height:36px!important;text-decoration-color:#9dba89}
#run-button {display:flex!important;align-items:center;justify-content:center;gap:10px;margin-top:auto!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;min-height:54px!important;border-radius:999px!important;color:#0b1408!important;background:linear-gradient(180deg,#a3d749,#91c331)!important;font:850 16px var(--ui)!important;box-shadow:0 20px 40px rgba(118,184,38,.28),inset 0 1px 0 rgba(255,255,255,.5)!important}
#run-button::before {content:"";width:17px;height:17px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='m5 3 11 7-11 7Z'/%3E%3C/svg%3E") center/contain no-repeat}
#run-button:hover:not(:disabled) {background:linear-gradient(180deg,#ade153,#98ca39)!important}
#run-button:disabled {background:#edf4e7!important;color:#536947!important;box-shadow:none!important}
#run-button.is-waiting {color:transparent!important}#run-button.is-waiting::before {visibility:hidden}
#mobile-run-button {display:none!important}
#task-guide {padding:20px 24px 0!important}
.task-guide {display:grid;gap:5px}.task-guide strong {font:750 17px/1.4 var(--ui);color:var(--ink)}
.task-guide p {margin:0;color:#51495e;font:500 13px/1.6 var(--ui)}
.task-guide small {color:var(--muted);font:400 12px/1.6 var(--ui)}
#visual-stage {position:relative;isolation:isolate;flex:1 1 0!important;min-width:0!important;gap:0!important;padding:0!important;overflow:hidden;border-radius:0 8px 8px 0;background:transparent}
#stage-toolbar {position:relative!important;width:100%;z-index:8;display:flex;flex-wrap:nowrap!important;align-items:center;justify-content:space-between;gap:12px!important;min-height:64px;padding:18px 22px 8px!important;background:transparent!important}
#view-toggle {flex:0 0 auto!important;width:fit-content!important;min-width:0!important;pointer-events:auto}
#view-toggle .wrap {position:relative;isolation:isolate;padding:3px!important;gap:2px!important;background:#f2eff7!important;border:1px solid #e4deed;border-radius:8px!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
#view-toggle label {border-radius:6px!important;min-height:30px!important;padding:6px 10px!important;font:700 11px var(--ui)!important;color:#657083!important}
#view-toggle label:hover {background:#eee7f7!important}
#view-toggle label:has(input:checked) {color:#30263f!important}
#view-toggle .active-tab-indicator {border-radius:6px;background:#fff;box-shadow:0 2px 5px rgba(30,48,35,.08);transition-duration:200ms}
#stage-status {flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:0!important;max-width:47%;padding:0!important}
.stage-status {display:flex;gap:7px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font:600 12px/1.6 var(--ui);color:#30263f;box-shadow:none}
.stage-status span {color:inherit}.stage-status i {margin-top:5px}.stage-status.ready i {background:#784ebc}
.stage-status.reference {color:#5b358b}.stage-status.busy {color:#536947}.stage-status.error {color:#a53246}
.wait-clock {font:700 11px var(--mono);font-variant-numeric:tabular-nums}
#canvas-viewport {padding:16px 54px 48px!important;background:transparent!important;isolation:auto}
#stage-image {height:400px!important;transition-duration:300ms}
#stage-image img {border-radius:8px;box-shadow:0 26px 58px rgba(45,29,69,.09),0 0 0 1px #d9e3d9;filter:none}
.canvas-tools {min-height:48px;padding:8px 24px;font:10px var(--mono);color:var(--muted)}
.image-dimensions {padding:5px 8px;background:#fff;border:1px solid var(--line);border-radius:6px}
.zoom-tools {padding:2px 4px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:none}
.zoom-tools button {width:28px;height:28px;border-radius:5px;color:#657083}.zoom-tools button:hover {background:#eee7f7}
.zoom-value {font:700 10px var(--mono);color:#30263f}.tool-divider {background:var(--line)}
#query-row {position:relative;z-index:2;display:block!important;padding:10px 54px 28px!important;background:transparent!important;border:0!important}
#query-dock {max-width:600px;margin:0 auto!important;padding:12px 15px!important;border:1px solid #e4deed!important;border-radius:8px!important;background:#fff!important;box-shadow:0 18px 42px rgba(45,29,69,.06)!important}
#query-dock textarea {font:700 13px/1.65 var(--ui)!important;color:#30263f!important}
#query-dock:focus-within {outline:2px solid #9873c8;outline-offset:2px}
.query-hint {margin:9px 0 0;text-align:center;color:var(--muted);font:650 11px/1.6 var(--ui)}
#review-row {display:flex!important;flex-wrap:nowrap!important;gap:24px!important;align-items:stretch}
#sandbox-panel {flex:0 0 38%!important;min-width:0!important;padding:20px!important;gap:15px!important;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 40px rgba(45,29,69,.04)}
.film-heading {align-items:center;gap:12px}.film-heading h2 {font:800 11px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0!important}
.film-heading small {font:650 11px/1.5 var(--ui);color:var(--green);flex-shrink:0}
#case-gallery {height:166px!important}
#case-gallery .grid-container {gap:10px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
#case-gallery .thumbnail-item {min-width:0!important;height:150px!important;flex-direction:column!important;align-items:stretch;gap:6px;border-radius:8px!important;background:#fff!important;border-color:var(--line)!important;padding:6px!important;box-shadow:0 6px 16px rgba(28,52,34,.05)}
#case-gallery .thumbnail-item img {width:100%!important;height:106px!important;flex:1 1 0!important;min-height:0!important;border-radius:6px!important}
#case-gallery .caption-label {max-width:100%!important;text-align:center!important;font:800 11px/1.5 var(--ui)!important;color:#30263f!important;padding:3px!important}
#case-gallery .thumbnail-item:hover {border-color:#9873c8!important;background:#fcfbfe!important}
#case-gallery .thumbnail-item.selected {background:#f3eef9!important;border:2px solid #91c331!important;padding:5px!important}
#source-details {margin-top:auto;border:0!important;border-top:1px solid #e9e5ef!important;padding:8px 0 0!important}
#source-details .label-wrap {font:650 11px var(--ui)!important;min-height:30px!important;color:var(--muted)!important}
.source-meta {font:12px/1.7 var(--ui)}.source-meta>span,.source-meta small {font-size:11px}
#review-summary {flex:1 1 0!important;min-width:0!important;padding:18px!important;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 45px rgba(45,29,69,.04)}
#result-columns {display:flex!important;flex-wrap:nowrap!important;gap:16px!important;align-items:stretch}
#metrics-panel {flex:0 0 40%!important;min-width:0!important;padding:14px!important;border:0!important;border-radius:0;gap:14px!important;box-shadow:none;background:#fff}
.inspector-subheading,#sidebar .inspector-heading h2 {font:800 11px/1.5 var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--green)!important;margin:0!important}
.metrics-list {font:11px var(--mono)}.metrics-list>div {border-top:1px solid #e9e5ef;padding:9px 0;gap:14px}
.metrics-list dd {font:750 11px/1.6 var(--mono);color:#30263f}
#sidebar {flex:1 1 0!important;min-width:0!important;width:auto;padding:14px!important;border:0;border-left:1px solid var(--line);border-radius:0;background:#fff;gap:14px!important;box-shadow:none}
#sandbox-panel>*,#metrics-panel>*,#sidebar>* {flex-grow:0!important}
.inspector-heading {align-items:flex-start;flex-direction:column;gap:6px}.live-mark {font:11px/1.6 var(--ui);color:var(--muted)}
#targets-panel {flex:1 1 auto!important}
#targets-content {overflow-x:hidden!important}
#targets-content .target-chips {margin-left:0;margin-right:0;max-width:100%;box-sizing:border-box}
.empty-targets {min-height:172px;gap:10px}.empty-targets svg {width:26px;height:26px;color:#819275;margin:0}
.empty-targets>b {font:700 12px var(--mono);color:var(--muted)}.empty-targets>small {font:11px/1.8 var(--ui);color:var(--muted);max-width:28ch}
.targets-summary {font:12px var(--ui)}.targets-summary b {font:800 18px var(--ui)}.targets-summary>span {font-size:11px}
.target-chips {max-height:240px;display:flex;flex-direction:column;gap:4px}
.target-chip {min-height:36px!important;padding:7px 9px!important;border:1px solid #e4deed!important;border-radius:6px!important;background:#fcfbfe!important;font:600 12px var(--ui)!important;color:#30263f!important}
.target-chip:hover {background:#f3eef9!important}.target-chip[aria-pressed=true] {background:#eee7f7!important;color:#5b358b!important;border-color:#91c331!important}
.target-chip i {border-color:#9873c8}.target-chip b {font:700 11px var(--mono);color:var(--green)}
.focus-help,.targets-caption {font:11px/1.7 var(--ui)}.clear-focus {font:650 11px var(--ui)}
.detail-heading {font:700 12px var(--ui)}.detail-heading small {font:11px var(--ui)}.detail-image {height:150px;border-radius:6px}.detail-coordinates {font-size:11px;line-height:1.6}
.focus-dimmer {fill:#172018;opacity:.24;animation-duration:180ms}.focus-outline {stroke:#a3d749;animation-duration:220ms}
.focus-pixels {position:absolute!important;pointer-events:none;z-index:4;object-fit:fill!important;box-shadow:none!important}
.focus-source[hidden] {display:none!important}
.focus-caption {top:auto;bottom:60px;left:22px;right:auto!important;width:fit-content!important;max-width:calc(100% - 44px);padding:5px 6px 5px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#30263f;font:650 12px var(--ui);box-shadow:0 4px 14px rgba(25,49,31,.1)}
.focus-caption span {white-space:normal;overflow-wrap:anywhere;line-height:1.5;max-height:60px}
.focus-caption button:disabled {opacity:.35;cursor:default}
.focus-caption button {background:#eee7f7;color:#5b358b;border-radius:5px}
#prompt-console,#output-console {margin-top:4px!important;padding:18px!important;border:1px solid var(--line)!important;border-radius:8px!important;background:#fff!important;box-shadow:0 16px 40px rgba(45,29,69,.04)}
#prompt-console>.label-wrap,#output-console>.label-wrap {font:800 11px var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;min-height:30px;color:var(--green)!important}
#prompt-console .block {border-color:#e4deed!important;border-radius:7px!important;background:#fcfef9!important}
#prompt-console textarea,#output-console textarea {background:#fff!important;border-color:var(--line)!important;color:#30263f!important;font:12px/1.8 var(--mono)!important}
#prompt-console label>span,#output-console label>span {color:var(--green)!important;font:700 10px var(--mono)!important}
.console-note {font:11px/1.7 var(--ui);color:var(--muted)}
#output-console .cm-editor {max-height:360px;overflow:hidden}
#output-console .cm-scroller {max-height:330px;overflow:auto!important}
#output-console .cm-content {min-height:0!important}
#prompt-console textarea {max-height:220px!important;overflow-y:auto!important}
.studio-footer {padding:12px 2px;font:11px/1.7 var(--ui);color:var(--muted)}.studio-footer i {color:var(--muted)}
@keyframes focus-dim {from{opacity:0}to{opacity:.24}}
@media(min-width:1500px) {
  #controls {padding:42px 42px 34px!important}.xpeng-logo {width:220px}
  #stage-image {height:440px!important}#canvas-viewport {padding:16px 60px 48px!important}#query-row {padding:12px 60px 30px!important}
}
@media(max-width:1100px) {
  .studio-header h1 {font-size:28px}.studio-header .eyebrow {font-size:10px}.grounding-intro h2 {font-size:22px}.grounding-intro p {max-width:220px;font-size:12px}
  #controls {flex-basis:30%!important;min-width:260px!important;padding:26px 22px!important;gap:20px!important}
  .control-brand h2 {font-size:30px}.xpeng-logo {width:172px}.control-brand p {font-size:13px}
  #control-settings {padding:12px!important}#control-fields {gap:9px!important}
  #control-fields {flex-direction:column!important}#control-fields>.form {width:100%!important;flex-basis:auto!important}#media-type {flex-basis:auto!important}
  #stage-toolbar {padding:16px 18px 8px!important;gap:10px!important;flex-wrap:wrap!important}#stage-status {max-width:100%;flex-basis:100%!important}.stage-status {width:fit-content}
  #canvas-viewport {padding:12px 24px 48px!important}#stage-image {height:350px!important}#query-row {padding:12px 24px 24px!important}
  #sandbox-panel {padding:16px!important}.film-heading {align-items:flex-start;flex-direction:column;gap:4px}#review-row {gap:18px!important}
  #review-summary {padding:12px!important}#result-columns {gap:12px!important}#metrics-panel {flex-basis:43%!important;padding:12px!important}#sidebar {padding:12px!important}
  #case-gallery {height:150px!important}#case-gallery .thumbnail-item {height:136px!important}
  .metrics-list>div {gap:8px}.metrics-list,.metrics-list dd {font-size:10px}
}
@media(max-width:760px) {
  .header-scope {display:none}.header-description {font-size:12px;margin-top:5px}
  .studio-header {padding:4px 0 18px;gap:12px}.chapter-mark {width:36px;height:36px;flex-basis:36px}.studio-header h1 {font-size:25px}.studio-header .eyebrow {font-size:9px;line-height:1.6}
  .grounding-intro {display:block;padding:0 0 10px}.grounding-intro h2 {font-size:20px;line-height:1.35}.grounding-intro p {max-width:none;margin-top:8px;text-align:left;font-size:12px}.eyebrow {font-size:10px}
  #workspace-top {flex-direction:column!important;min-height:0;border-radius:8px}#console {gap:14px!important}
  #controls {flex:0 0 auto!important;min-width:0!important;padding:24px!important;border-right:0;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;gap:20px!important}
  .control-brand {gap:10px}.control-brand h2 {font-size:32px}.control-brand p {font-size:13px}.xpeng-logo {width:160px}
  #control-settings {padding:14px!important;gap:12px!important}#control-fields {gap:14px!important}#media-type {flex-basis:43%!important}
  #controls {padding:16px!important;gap:12px!important}
  .control-brand {display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .control-brand .xpeng-logo {width:104px;filter:none}.control-brand h2 {font-size:24px;margin:0}.control-brand p {display:none}
  #control-settings {padding:0!important;border:0;gap:8px!important}
  #control-fields {flex-direction:row!important;gap:12px!important}#control-fields>.form {width:0!important;flex:1 1 0!important}
  #media-type {flex:0 0 30%!important}
  #upload-button {min-height:40px!important;padding:8px 10px!important}
  #service-panel {padding-top:8px!important;gap:2px!important}.api-status small {font-size:11px}
  #service-panel #health-button {min-height:32px!important}
  #run-button {display:none!important}
  #task-guide {padding:14px 16px 0!important}.task-guide {gap:4px}.task-guide strong {font-size:15px}.task-guide small {font-size:11px}
  #mobile-run-button {display:flex!important;align-items:center;justify-content:center;width:100%;min-height:48px!important;margin-top:12px;border-radius:999px!important;border:0!important;background:linear-gradient(180deg,#a3d749,#91c331)!important;color:#0b1408!important;font:800 15px var(--ui)!important}
  #mobile-run-button:disabled {background:#edf4e7!important;color:#536947!important}
  #run-button {min-height:48px!important;font-size:15px!important;margin-top:4px!important}
  #visual-stage {flex:0 0 auto!important;min-width:0!important;border-radius:0 0 8px 8px}
  #stage-toolbar {padding:14px 14px 8px!important;gap:10px!important}#view-toggle label {padding:8px 12px!important;min-height:36px!important;font-size:11px!important}
  #stage-status {max-width:100%;width:100%;flex-basis:100%!important}.stage-status {font-size:10px;width:fit-content}
  #canvas-viewport {padding:12px 14px 52px!important}#stage-image {height:300px!important}
  .canvas-tools {padding:4px 12px}.zoom-tools button {width:44px;height:44px}
  .focus-caption {left:14px;max-width:calc(100% - 28px);gap:4px;bottom:62px;padding-left:8px}
  .focus-caption button {width:44px;height:44px}.focus-caption span {font-size:11px}
  #query-row {padding:12px 16px 22px!important}#query-dock {padding:12px!important}#query-dock textarea {font-size:12px!important}
  .query-hint {font-size:10px}
  #review-row {flex-direction:column!important;gap:14px!important}#sandbox-panel {flex:0 0 auto!important;padding:18px!important;gap:12px!important}.film-heading {flex-direction:row;align-items:center}.film-heading h2 {font-size:10px}.film-heading small {font-size:10px}
  #case-gallery {height:140px!important}#case-gallery .thumbnail-item {height:128px!important}#case-gallery .grid-container {gap:8px!important}#case-gallery .caption-label {font-size:10px!important}
  #review-summary {flex:0 0 auto!important;padding:14px!important}#result-columns {flex-direction:column!important;gap:14px!important}
  #metrics-panel {flex:0 0 auto!important;padding:16px!important}#sidebar {flex:0 0 auto!important;min-width:0!important;padding:16px!important;border:1px solid var(--line)}
  .metrics-list {grid-template-columns:1fr 1fr;gap:2px 18px}.metrics-list>div {gap:4px}.metrics-list,.metrics-list dd {font-size:11px}
  .empty-targets {min-height:150px}.target-chips {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.target-chip {min-height:44px!important}
  .inspector-heading {flex-direction:row;flex-wrap:wrap;align-items:baseline}.live-mark {font-size:10px}.detail-image {height:170px}
  #prompt-console,#output-console {padding:14px!important}#prompt-console>.label-wrap,#output-console>.label-wrap {font-size:10px!important}.studio-footer {font-size:10px}
}
@media(max-width:430px) {
  #controls {padding:14px!important}#stage-image {height:262px!important}.film-heading {gap:8px}.film-heading h2 {max-width:160px}.image-dimensions {font-size:9px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition-duration:0ms!important;scroll-behavior:auto!important}
}

/* Paper-demo r7: scoped refinements, same left-controls / right-canvas layout. */
.control-brand h2 {color:var(--purple-deep);letter-spacing:-.04em}
.control-brand h2 span {color:var(--lime)}
.control-brand p {font-weight:500;color:var(--muted)}
.studio-header h1 {color:var(--purple-deep);letter-spacing:-.035em}
.header-description {max-width:720px;font-weight:450}
.header-scope {font:650 10px/1.5 var(--mono);letter-spacing:.08em;color:var(--purple)}
.xpeng-logo {filter:none}
.task-guide strong {color:var(--purple-deep)}
#stage-toolbar {min-height:44px;padding-top:12px!important}
#stage-status {max-width:100%;flex:1!important}
.stage-status {background:#fff;color:#51495e;width:fit-content}
#stage-image .buttons {display:none!important}
#canvas-viewport {padding-bottom:64px!important}
#stage-image img {box-shadow:0 14px 34px rgba(45,29,69,.09);border-radius:4px}
#run-button {box-shadow:0 8px 22px rgba(114,153,34,.18)!important}
#query-dock textarea {font-weight:550!important}
.query-hint {font-weight:500}
.inspector-subheading,#sidebar .inspector-heading h2,#prompt-console>.label-wrap,#output-console>.label-wrap {color:var(--purple-deep)!important}
.film-heading h2 {color:var(--purple-deep)}
.target-chip i {background:var(--category-color)!important;border-color:var(--category-color)!important}
.focus-caption {position:relative;bottom:auto;left:auto;max-width:100%;margin:8px 0 0}
#canvas-viewport:has(.focus-caption) {padding-bottom:64px!important}
.detail-heading {flex-wrap:wrap;gap:4px}
.canvas-download {display:grid;place-items:center;width:28px;height:28px;border-radius:5px;color:var(--purple-deep);cursor:pointer}
.canvas-download:hover {background:var(--lavender)}
.canvas-download:focus-visible {outline:2px solid var(--purple);outline-offset:2px}
#console .translucent {opacity:1!important}
@media(max-width:760px) {
  .studio-header h1 {font-size:25px}
  .header-description {font-size:12px;line-height:1.6}
  .focus-caption {max-width:100%;left:auto;bottom:auto;margin-top:8px}
  .focus-caption span {font-size:11px}
  .film-heading {flex-wrap:wrap}
  .canvas-download {width:44px;height:44px}
}