Spaces:
Sleeping
Sleeping
| """Public Studio visual system, independent of the legacy/private application CSS.""" | |
| import gradio as gr | |
| from ui_design import STUDIO_INTERACTION_HEAD_HTML | |
| def studio_theme() -> gr.Theme: | |
| """System fonts and restrained defaults, without remote font requests.""" | |
| return gr.themes.Base( | |
| primary_hue=gr.themes.colors.blue, | |
| neutral_hue=gr.themes.colors.slate, | |
| font=["system-ui", "sans-serif"], | |
| font_mono=["ui-monospace", "monospace"], | |
| ).set( | |
| body_background_fill="#f7f8fa", | |
| body_text_color="#18212f", | |
| block_label_text_color="#18212f", | |
| input_border_color="#e1e5eb", | |
| button_primary_background_fill="#315fd6", | |
| button_primary_background_fill_hover="#264dac", | |
| button_primary_text_color="#ffffff", | |
| shadow_drop="none", | |
| ) | |
| # Document-level rules belong in head: Gradio scopes launch CSS to its app root. | |
| STUDIO_HEAD_HTML = STUDIO_INTERACTION_HEAD_HTML + """ | |
| <style> | |
| html { color-scheme: light; background: #f7f8fa; } | |
| body { margin: 0; background: #f7f8fa; } | |
| gradio-app { display: block; min-height: 100vh; } | |
| /* Gradio scopes media selectors beneath .contain; the root is outside it. */ | |
| @media (max-width: 1100px) { html .gradio-container { padding: 0 24px 24px !important; } } | |
| @media (max-width: 800px) { html .gradio-container { padding: 0 20px 24px !important; } } | |
| @media (max-width: 480px) { html .gradio-container { padding: 0 16px 20px !important; } } | |
| </style> | |
| """ | |
| STUDIO_CSS = r""" | |
| .gradio-container { | |
| --studio-canvas: #f7f8fa; | |
| --studio-surface: #fff; | |
| --studio-text: #18212f; | |
| --studio-muted: #5c6778; | |
| --studio-line: #e1e5eb; | |
| --studio-action: #315fd6; | |
| --body-background-fill: var(--studio-canvas); | |
| --body-text-color: var(--studio-text); | |
| --body-text-color-subdued: var(--studio-muted); | |
| --block-background-fill: var(--studio-surface); | |
| --block-border-color: var(--studio-line); | |
| --block-radius: 8px; | |
| --input-background-fill: var(--studio-surface); | |
| --input-border-color: var(--studio-line); | |
| --input-radius: 6px; | |
| --button-primary-background-fill: var(--studio-action); | |
| --button-primary-background-fill-hover: #264dac; | |
| --button-primary-text-color: #fff; | |
| --button-primary-border-color: var(--studio-action); | |
| --button-secondary-background-fill: #fff; | |
| --button-secondary-background-fill-hover: #f0f3f8; | |
| --button-secondary-border-color: var(--studio-line); | |
| --button-secondary-text-color: var(--studio-text); | |
| width: 100% !important; | |
| max-width: 1440px !important; | |
| margin: 0 auto; | |
| padding: 0 40px 32px !important; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| font-size: 15px; | |
| line-height: 1.5; | |
| color: var(--studio-text); | |
| background: var(--studio-canvas); | |
| } | |
| footer { display: none !important; } | |
| .gradio-container .app { gap: 0; } | |
| .gradio-container .main.app { width: 100%; max-width: none; padding: 0; } | |
| .gradio-container .html-container { padding: 0 !important; } | |
| .gradio-container h1, .gradio-container h2, .gradio-container h3, | |
| .gradio-container h4 { color: var(--studio-text); font-family: inherit; letter-spacing: -.025em; } | |
| h1 { font-size: 22px; line-height: 1.2; font-weight: 650; } | |
| h2 { font-size: 28px; line-height: 1.25; font-weight: 650; } | |
| h3 { font-size: 22px; line-height: 1.3; font-weight: 650; } | |
| h4 { font-size: 14px; line-height: 1.5; font-weight: 650; } | |
| p { margin: 0; } | |
| p, li, dd { overflow-wrap: anywhere; } | |
| a { color: var(--studio-action); } | |
| button, input, textarea, select { font: inherit; } | |
| button { border-radius: 6px !important; box-shadow: none !important; } | |
| button:focus-visible, input:focus-visible, textarea:focus-visible, | |
| summary:focus-visible { outline: 2px solid var(--studio-action) !important; outline-offset: 3px; } | |
| button:disabled { cursor: not-allowed; opacity: .48; } | |
| .gradio-container .form { border: 0; box-shadow: none; background: transparent; gap: 16px; } | |
| .gradio-container .block { box-shadow: none; } | |
| /* Gradio 6 duplicates Group classes on its inner wrapper. Decorate once. */ | |
| .gr-group > .gr-group { flex: 0 0 auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; max-width: none; } | |
| .gr-group > .styler { --layout-gap: 16px !important; --form-gap-width: 16px !important; --block-radius: 6px !important; --button-border-width: 1px !important; --button-large-radius: 6px !important; --button-small-radius: 6px !important; background: transparent !important; } | |
| /* A hidden Gradio Group can retain nested visible children. Its step heading | |
| is the authoritative visibility signal set by the existing navigation event. */ | |
| .studio-primary > .guided-step-panel:not(:has(.guided-step-heading)) { display: none !important; } | |
| .account-card:not(:has(h2)) { display: none !important; } | |
| .gradio-container .block:has(> .html-container) { padding: 0 !important; } | |
| .gradio-container .block .wrap > label { border-radius: 6px; } | |
| .gradio-container .block .wrap:has(> .wrap-inner) { border: 1px solid var(--studio-line); border-radius: 6px; min-height: 42px; } | |
| .gradio-container textarea { border: 1px solid var(--studio-line) !important; border-radius: 6px; background: #fff; padding: 12px; } | |
| .gradio-container .html-container > .prose > :first-child { margin-top: 0; } | |
| .gradio-container .html-container > .prose > :last-child { margin-bottom: 0; } | |
| .guided-rail-note { border-top: 1px solid var(--studio-line); padding-top: 16px; font-size: 12px; color: var(--studio-muted); } | |
| .guided-rail-note strong { display: block; color: var(--studio-text); font-size: 12px; margin-bottom: 6px; } | |
| .guided-rail-note span { display: block; } | |
| .gradio-container .gap { gap: 16px; } | |
| .gradio-container .row { gap: 24px; } | |
| .gradio-container .prose { font-size: 15px; } | |
| .gradio-container .prose h3 { font-size: 20px; } | |
| .gradio-container .prose p { color: var(--studio-muted); } | |
| .gradio-container label > span, .gradio-container .block > .label-wrap { color: var(--studio-text); } | |
| .studio-product-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 20px; } | |
| .studio-product-identity { display: flex; align-items: center; gap: 12px; } | |
| .studio-product-identity h1 { margin: 0; font-size: 20px; } | |
| .studio-product-identity p { color: var(--studio-muted); font-size: 12px; margin-top: 3px; } | |
| .studio-product-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ccd6eb; border-radius: 9px; font-size: 12px; font-weight: 750; color: var(--studio-action); background: #edf2fc; } | |
| .studio-product-profile { display: flex; align-items: center; gap: 10px; color: var(--studio-muted); font-size: 12px; } | |
| .studio-profile-badge { display: none; } | |
| .research-notice { display: flex; gap: 12px; border-top: 1px solid var(--studio-line); padding: 10px 0; color: var(--studio-muted); font-size: 11px; } | |
| .notice-title { flex: 0 0 auto; font-weight: 650; } | |
| #workspace-tabs { border: 0; padding: 0; background: transparent; } | |
| #workspace-tabs > .tab-wrapper { border-bottom: 1px solid var(--studio-line); padding: 0; margin-bottom: 28px; } | |
| #workspace-tabs > .tab-wrapper > .tab-container { gap: 28px; } | |
| #workspace-tabs > .tab-wrapper button[role="tab"] { border-radius: 0 !important; border: 0; border-bottom: 2px solid transparent; padding: 14px 2px; background: transparent; font-size: 14px; color: var(--studio-muted); } | |
| #workspace-tabs > .tab-wrapper button[role="tab"][aria-selected="true"] { border-bottom-color: var(--studio-action); color: var(--studio-text); font-weight: 650; } | |
| #workspace-tabs > .tabitem { border: 0; padding: 0; background: transparent; } | |
| .studio-workbench { align-items: flex-start; gap: 40px !important; } | |
| .studio-workflow { flex: 0 0 180px !important; min-width: 0 !important; gap: 20px !important; padding: 4px 0; } | |
| .guided-rail-label, .section-kicker { font-size: 11px; font-weight: 650; color: var(--studio-muted); letter-spacing: .08em; text-transform: uppercase; } | |
| .guided-stepper { padding: 0 !important; background: transparent !important; border: 0 !important; } | |
| .guided-stepper .wrap { flex-direction: column; gap: 4px; counter-reset: step; } | |
| .guided-stepper label { display: flex; align-items: center; gap: 12px; border: 0 !important; border-radius: 6px !important; background: transparent !important; padding: 10px 12px !important; margin: 0 !important; min-height: 42px; color: var(--studio-muted); font-size: 14px; counter-increment: step; } | |
| .guided-stepper label::before { content: counter(step, decimal-leading-zero); font-size: 11px; color: #7b8595; font-variant-numeric: tabular-nums; } | |
| .guided-stepper label:has(input:checked) { background: #eaf0fc !important; color: var(--studio-action); font-weight: 650; } | |
| .guided-stepper label:has(input:checked)::before { color: var(--studio-action); } | |
| .guided-stepper input { position: absolute; opacity: 0; width: 1px; } | |
| .guided-stepper label:has(input:focus-visible) { outline: 2px solid var(--studio-action); outline-offset: 2px; } | |
| .studio-primary { flex: 1 1 0 !important; min-width: 0 !important; } | |
| .guided-step-panel { border: 1px solid var(--studio-line) !important; border-radius: 12px !important; background: var(--studio-surface) !important; padding: 28px !important; } | |
| .guided-step-panel > .styler { background: transparent !important; } | |
| .guided-step-heading { margin-bottom: 12px; } | |
| .guided-step-heading > span { display: block; color: var(--studio-muted); font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; } | |
| .guided-step-heading h3 { font-size: 28px; margin: 0 0 10px; } | |
| .guided-step-heading p { color: var(--studio-muted); max-width: 72ch; font-size: 14px; } | |
| .guided-research-status, .guided-approval-status, .guided-inline-error, .guided-inline-warning { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; } | |
| .guided-approval-status strong, .guided-approval-status span { display: block; } | |
| .guided-approval-status span { color: var(--studio-muted); margin-top: 4px; } | |
| .guided-inline-error { color: #ad3434; } | |
| .guided-inline-warning { color: #8a5a14; } | |
| .studio-assistant { border: 1px solid var(--studio-line) !important; border-radius: 8px !important; background: transparent !important; } | |
| .studio-assistant > .label-wrap { padding: 14px 16px; } | |
| .guided-dossier-header h2 { font-size: 22px; } | |
| .guided-dossier-block, .guided-inspector-contract, .guided-candidate-section { margin-top: 20px; } | |
| .guided-dossier-block h4, .guided-inspector-contract h4, .guided-candidate-section h4 { margin: 0 0 8px; } | |
| .guided-dossier-block p, .guided-dossier-block li { font-size: 14px; color: var(--studio-muted); } | |
| .guided-refinement-box { background: transparent !important; border: 0 !important; margin-top: 20px; } | |
| .guided-run-bar { margin-top: 28px; border: 0 !important; border-top: 1px solid var(--studio-line) !important; border-radius: 0 !important; padding: 20px 0 !important; background: transparent !important; } | |
| .guided-run-bar > .styler { background: transparent !important; } | |
| .guided-run-bar .row { align-items: center; } | |
| .guided-run-summary-output { flex: 3 1 540px !important; } | |
| .guided-run-bar button { flex: 1 1 160px !important; min-width: 160px !important; } | |
| .guided-run-summary { display: flex; align-items: flex-start; gap: 24px; font-size: 12px; } | |
| .guided-summary-status { min-width: 120px; } | |
| .guided-summary-status > span, .guided-summary-facts small { display: block; color: var(--studio-muted); font-size: 11px; margin-bottom: 5px; } | |
| .guided-summary-status strong { font-size: 13px; font-weight: 600; } | |
| .guided-summary-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; } | |
| .guided-summary-facts > span:first-child { max-width: 240px; } | |
| .guided-empty-state { padding: 24px 0; color: var(--studio-muted); } | |
| .guided-empty-state h3 { font-size: 16px; margin: 0 0 8px; } | |
| .guided-empty-copy { color: var(--studio-muted); font-size: 13px; } | |
| .guided-candidate-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; } | |
| .guided-plan-context { grid-column: 1 / -1; font-size: 13px; color: var(--studio-muted); } | |
| .guided-plan-context h4 { margin: 0; } | |
| .guided-plan-context ul { margin: 8px 0; padding-left: 20px; } | |
| .guided-candidate-card { padding: 20px; border: 1px solid var(--studio-line); border-radius: 10px; min-width: 0; background: #fff; } | |
| .guided-candidate-card.recommended { border-color: #9cb3ed; } | |
| .guided-candidate-card.selected { outline: 2px solid var(--studio-action); outline-offset: 2px; } | |
| .guided-candidate-index { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--studio-muted); margin-bottom: 12px; } | |
| .guided-candidate-card h3 { font-size: 20px; margin: 12px 0; } | |
| .guided-candidate-card p, .guided-candidate-card li { font-size: 13px; line-height: 1.6; } | |
| .guided-candidate-card ul { padding-left: 18px; } | |
| .guided-candidate-rationale { color: var(--studio-muted); } | |
| .guided-recommended-badge, .guided-verification-badge, .guided-source-badge, .guided-node-source, .guided-compatibility { display: inline-block; border: 1px solid var(--studio-line); border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600; margin: 0 4px 4px 0; } | |
| .guided-recommended-badge { color: var(--studio-action); background: #edf2fc; border-color: #d4dff8; } | |
| .guided-verification-badge.passed, .guided-compatibility.compatible { color: #267350; } | |
| .guided-verification-badge.rejected, .guided-compatibility.incompatible { color: #ad3434; } | |
| .guided-estimate-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } | |
| .guided-estimate-grid > div { padding: 8px; background: #f7f8fa; border-radius: 6px; font-size: 12px; } | |
| .guided-estimate-grid strong, .guided-estimate-grid small { display: block; } | |
| .guided-candidate-details { margin-top: 20px; border-top: 1px solid var(--studio-line); padding-top: 12px; } | |
| .guided-candidate-details summary { font-size: 13px; font-weight: 600; cursor: pointer; } | |
| .guided-selection-state { border-top: 1px solid var(--studio-line); margin-top: 16px; padding-top: 12px; color: var(--studio-muted); } | |
| .studio-pipeline { gap: 8px !important; } | |
| .guided-pipeline-card-shell { flex: 1 1 120px !important; min-width: 120px !important; border: 1px solid var(--studio-line) !important; border-radius: 8px !important; background: #fafbfc !important; } | |
| .guided-pipeline-card-shell > .styler { background: transparent !important; } | |
| .guided-pipeline-card-content { padding: 12px; min-height: 156px; } | |
| .guided-node-topline { display: flex; gap: 6px; font-size: 11px; color: var(--studio-muted); } | |
| .guided-node-icon { display: none; } | |
| .guided-pipeline-card-content h4 { margin: 12px 0 6px; font-size: 13px; overflow-wrap: anywhere; } | |
| .guided-node-parameter, .guided-node-shape { font-size: 11px; color: var(--studio-muted); margin: 4px 0; } | |
| .guided-node-shape { display: none; } | |
| .guided-node-selected { font-size: 10px; color: var(--studio-action); } | |
| .guided-node-footer { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 10px; } | |
| .guided-node-compatibility { font-size: 10px; } | |
| .guided-pipeline-node-hitarea { min-width: 0 !important; font-size: 11px !important; padding: 8px 4px !important; border: 0 !important; border-top: 1px solid var(--studio-line) !important; background: #fff !important; border-radius: 0 !important; } | |
| .guided-node-inspector { margin-top: 12px; } | |
| .guided-inspector-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--studio-line); } | |
| .guided-inspector-heading h3 { margin: 4px 0; font-size: 22px; } | |
| .guided-inspector-heading span { color: var(--studio-muted); font-size: 12px; } | |
| .guided-mapping-row, .guided-detail-row { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid #eef0f3; font-size: 13px; } | |
| .guided-workbench-heading { margin: 0 0 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } | |
| .guided-workbench-heading h2 { margin: 6px 0 0; } | |
| .guided-workbench-heading > p { color: var(--studio-muted); font-size: 13px; max-width: 50ch; } | |
| .results-shell { border: 0 !important; background: transparent !important; } | |
| .guided-result-tabs > .tabitem { border: 1px solid var(--studio-line); border-radius: 8px; padding: 24px; background: #fff; } | |
| .guided-result-tabs .tab-container { flex-wrap: wrap; } | |
| .guided-snapshot-heading { margin-bottom: 20px; } | |
| .guided-snapshot-heading span { font-size: 11px; color: var(--studio-muted); text-transform: uppercase; letter-spacing: .06em; } | |
| .guided-snapshot-heading h3 { margin: 6px 0; } | |
| .guided-snapshot { max-width: 100%; } | |
| .guided-snapshot pre, .guided-snapshot code { white-space: pre-wrap; overflow-wrap: anywhere; } | |
| .guided-reflection-metric-grid, .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 16px; margin: 16px 0; } | |
| .guided-reflection-metric, .metric-card { padding: 16px; border: 1px solid var(--studio-line); border-radius: 8px; } | |
| .candidate-comparison { overflow-x: auto; } | |
| .candidate-comparison table { width: 100%; border-collapse: collapse; font-size: 13px; } | |
| .candidate-comparison table th, .candidate-comparison table td { border: 0 !important; border-bottom: 1px solid var(--studio-line) !important; padding: 12px !important; text-align: left; } | |
| .candidate-comparison table th { color: var(--studio-muted); background: #f7f8fa; font-weight: 500; } | |
| .studio-model-actions { gap: 8px !important; } | |
| .studio-model-actions button { min-width: 100px !important; font-size: 12px !important; padding: 10px 8px !important; } | |
| .studio-models { gap: 32px !important; } | |
| .studio-model-controls { padding-right: 24px; border-right: 1px solid var(--studio-line); } | |
| .configuration-heading { margin-bottom: 12px; } | |
| .configuration-heading h2 { font-size: 28px; margin: 0 0 12px; } | |
| .configuration-heading p { font-size: 14px; color: var(--studio-muted); } | |
| .inference-output { min-width: 0; } | |
| .visual-prediction-gallery { background: #fff; border: 1px solid var(--studio-line); border-radius: 8px; } | |
| .panel-card, .account-card { border: 1px solid var(--studio-line) !important; border-radius: 12px !important; padding: 28px !important; background: #fff !important; } | |
| .account-card { max-width: 600px; margin: 40px auto; } | |
| .account-card h2 { margin: 0 0 12px; } | |
| .account-card p { color: var(--studio-muted); } | |
| .run-context-card { padding: 0; } | |
| .run-status-strip { display: flex; align-items: center; gap: 8px; font-size: 13px; padding-bottom: 20px; } | |
| .run-dot { width: 7px; height: 7px; border-radius: 50%; background: #8a94a3; } | |
| .state-complete .run-dot { background: #267350; } | |
| .state-failed .run-dot { background: #ad3434; } | |
| .run-alias-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--studio-line); padding-bottom: 16px; } | |
| .run-context-label { font-size: 12px; color: var(--studio-muted); } | |
| .run-alias { font-size: 14px; } | |
| .run-id-copy { padding: 4px 8px; font-size: 11px; border: 1px solid var(--studio-line); background: #fff; } | |
| .run-context-list, .run-technical-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin: 20px 0; } | |
| .run-context-item { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } | |
| .run-context-item strong { font-weight: 500; } | |
| .run-technical summary, .reported-metrics-detail summary { font-size: 13px; color: var(--studio-muted); cursor: pointer; } | |
| .workbench-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } | |
| .workbench-metric-card { border-bottom: 1px solid var(--studio-line); padding: 16px 0; } | |
| .metric-label { display: block; color: var(--studio-muted); font-size: 12px; margin-bottom: 8px; } | |
| .metric-value { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } | |
| .metric-value.metric-model { font-size: 18px; } | |
| .guided-review-grid, .guided-inspector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 24px 0; } | |
| .guided-review-grid small, .guided-review-grid strong { display: block; } | |
| .guided-review-grid small { color: var(--studio-muted); font-size: 12px; margin-bottom: 8px; } | |
| .guided-review-grid strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; } | |
| .guided-provider-badge, .guided-evidence-provenance { display: inline-block; font-size: 11px; color: var(--studio-muted); margin: 4px 0; } | |
| .guided-dossier-heading { margin-bottom: 20px; } | |
| .guided-dossier-heading h3 { margin: 8px 0; } | |
| .guided-research-insights, .guided-evidence-grid, .guided-next-experiment-grid { display: grid; gap: 16px; margin: 20px 0; } | |
| .guided-research-insight, .guided-evidence-card, .guided-next-experiment-card, .guided-trace-entry { padding: 16px 0; border-top: 1px solid var(--studio-line); } | |
| .guided-evidence-heading h4 { margin: 0 0 8px; } | |
| .guided-insight-label { color: var(--studio-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } | |
| .guided-research-icon { display: none; } | |
| .guided-dossier-empty h3 { font-size: 18px; margin: 0 0 6px; } | |
| .guided-empty-insight { padding: 20px 0; } | |
| .guided-provider-note, .guided-agent-intro { color: var(--studio-muted); font-size: 13px; } | |
| .guided-estimate > span { display: block; font-size: 11px; color: var(--studio-muted); } | |
| .guided-estimate strong { font-size: 16px; margin: 6px 0; } | |
| .guided-trace-list { padding: 0; list-style: none; } | |
| @media (max-width: 1100px) { | |
| .studio-workbench { gap: 24px !important; } | |
| .studio-workflow { flex-basis: 150px !important; } | |
| .guided-step-panel { padding: 24px !important; } | |
| .guided-summary-facts { gap: 12px 16px; } | |
| } | |
| @media (max-width: 800px) { | |
| .studio-workbench { flex-direction: column; } | |
| .studio-workflow, .studio-primary { width: 100%; flex: 1 1 auto !important; } | |
| .studio-workflow { gap: 8px !important; padding: 0; } | |
| .guided-rail-label { display: none; } | |
| .guided-stepper .wrap { flex-direction: row; flex-wrap: wrap; gap: 4px; } | |
| .guided-stepper label { flex: 0 0 auto; padding: 8px 10px !important; min-height: 40px; gap: 6px; font-size: 12px; } | |
| .guided-stepper label::before { font-size: 10px; } | |
| .studio-model-controls { padding-right: 0; border-right: 0; } | |
| .guided-workbench-heading { display: block; } | |
| .guided-workbench-heading > p { margin-top: 12px; } | |
| .guided-run-summary { flex-direction: column; gap: 12px; } | |
| .research-notice { font-size: 10px; } | |
| } | |
| @media (max-width: 480px) { | |
| .guided-stepper .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } | |
| .guided-stepper label { padding: 8px 4px !important; font-size: 11px; justify-content: center; } | |
| .guided-stepper label::before { display: none; } | |
| .studio-product-header { padding: 20px 0 16px; } | |
| .studio-product-profile { display: none; } | |
| .research-notice { display: block; } | |
| .notice-title { margin-bottom: 4px; } | |
| #workspace-tabs > .tab-wrapper { margin-bottom: 20px; } | |
| #workspace-tabs > .tab-wrapper > .tab-container { gap: 24px; } | |
| .guided-step-panel, .panel-card { padding: 20px !important; } | |
| .guided-step-heading h3, .configuration-heading h2 { font-size: 24px; } | |
| .guided-run-bar .row { gap: 12px; } | |
| .guided-result-tabs > .tabitem { padding: 16px; } | |
| .guided-mapping-row, .guided-detail-row { grid-template-columns: 1fr; gap: 4px; } | |
| .guided-inspector-heading { flex-direction: column; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } | |
| } | |
| """ | |