| |
| |
| :root { |
| font-family: |
| Inter, |
| -apple-system, |
| BlinkMacSystemFont, |
| "Segoe UI", |
| sans-serif; |
| color: var(--fg); |
| background: var(--bg); |
| font-synthesis: none; |
| text-rendering: optimizeLegibility; |
| -webkit-font-smoothing: antialiased; |
| --bg: #f8f9fb; |
| --surface-0: #fff; |
| --surface-1: #f9fafb; |
| --surface-2: #f3f4f6; |
| --fg: #111827; |
| --fg-soft: #374151; |
| --fg-muted: #6b7280; |
| --fg-faint: #788293; |
| --line: #e5e7eb; |
| --line-subtle: #f0f2f5; |
| --line-strong: #d1d5db; |
| --accent: #e6af13; |
| --accent-fill: #fffbeb; |
| --primary: #19212f; |
| --primary-fg: #fff; |
| --green: #15805e; |
| --shadow: 0 2px 3px #11182702, 0 1px 2px #11182703; |
| color-scheme: light; |
| } |
| :root.dark { |
| color-scheme: dark; |
| --bg: #0b0f19; |
| --surface-0: #101623; |
| --surface-1: #141c2e; |
| --surface-2: #1b2536; |
| --fg: #e5e7eb; |
| --fg-soft: #d1d5db; |
| --fg-muted: #9ca3af; |
| --fg-faint: #778399; |
| --line: #263143; |
| --line-subtle: #202a3a; |
| --line-strong: #3a485c; |
| --accent: #e7b433; |
| --accent-fill: #302813; |
| --primary: #ffd76f; |
| --primary-fg: #171b23; |
| --green: #64d7ac; |
| --shadow: none; |
| } |
| * { |
| box-sizing: border-box; |
| } |
| body { |
| margin: 0; |
| } |
| button, |
| input, |
| select { |
| font: inherit; |
| } |
| button, |
| a, |
| input, |
| select { |
| outline-offset: 4px; |
| } |
| button:focus-visible, |
| a:focus-visible, |
| input:focus-visible, |
| select:focus-visible { |
| outline: 2px solid #66aafc; |
| } |
| button, |
| a { |
| -webkit-tap-highlight-color: transparent; |
| } |
| button { |
| cursor: pointer; |
| } |
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
| button { |
| color: inherit; |
| } |
| button:disabled { |
| opacity: 0.48; |
| cursor: not-allowed; |
| } |
| svg { |
| flex-shrink: 0; |
| } |
| h1, |
| h2, |
| p { |
| margin: 0; |
| } |
| input, |
| select { |
| width: 100%; |
| height: 41px; |
| border: 1px solid var(--line-strong); |
| border-radius: 7px; |
| padding: 0 12px; |
| background: var(--surface-0); |
| color: var(--fg); |
| font-size: 13px; |
| transition: border-color 0.15s; |
| } |
| input:hover, |
| select:hover { |
| border-color: var(--fg-faint); |
| } |
| input:focus, |
| select:focus { |
| border-color: #b7a348; |
| box-shadow: 0 0 0 3px #e6af1313; |
| } |
| input::placeholder { |
| color: var(--fg-faint); |
| } |
| input[type="checkbox"], |
| input[type="radio"] { |
| accent-color: #ce9d11; |
| width: 16px; |
| height: 16px; |
| flex-shrink: 0; |
| padding: 0; |
| box-shadow: none; |
| } |
| button { |
| border: 0; |
| background: none; |
| } |
| code { |
| font-family: "SFMono-Regular", Consolas, monospace; |
| font-size: 0.9em; |
| } |
| small { |
| font-size: 13px; |
| } |
| .app-shell { |
| min-height: 100vh; |
| } |
| .sidebar { |
| width: 224px; |
| position: fixed; |
| inset: 0 auto 0 0; |
| background: #111722; |
| color: #b1b9c9; |
| border-right: 1px solid #27303f; |
| display: flex; |
| flex-direction: column; |
| padding: 27px 16px 17px; |
| z-index: 30; |
| } |
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 11px; |
| color: white; |
| padding: 0 8px; |
| font-weight: 680; |
| letter-spacing: -0.5px; |
| font-size: 23px; |
| } |
| .brand-mark { |
| width: 39px; |
| height: 39px; |
| display: grid; |
| place-items: center; |
| border-radius: 10px; |
| color: #151b24; |
| background: #ffd66b; |
| box-shadow: inset 0 0 0 1px #ffe9ab; |
| } |
| .brand-sub { |
| display: block; |
| font-size: 10px; |
| letter-spacing: 1.55px; |
| font-weight: 500; |
| color: #99a3b4; |
| margin-top: 5px; |
| } |
| .workspace-label { |
| display: flex; |
| gap: 9px; |
| align-items: center; |
| margin: 36px 0 25px; |
| border: 1px solid #2c3545; |
| border-radius: 7px; |
| padding: 11px 9px; |
| color: #e2e6ee; |
| font-size: 13px; |
| font-weight: 570; |
| } |
| .workspace-label small { |
| display: block; |
| font-size: 12px; |
| font-weight: 400; |
| color: #8491a6; |
| margin-top: 3px; |
| } |
| .workspace-label > svg { |
| margin-left: auto; |
| color: #8190a4; |
| } |
| .workspace-avatar { |
| background: #29364b; |
| border: 1px solid #3e4f68; |
| color: #c7d4e9; |
| border-radius: 5px; |
| width: 26px; |
| height: 26px; |
| display: grid; |
| place-items: center; |
| } |
| .nav-caption { |
| font-size: 11px; |
| letter-spacing: 1.2px; |
| color: #6e7b90; |
| font-weight: 600; |
| padding: 0 12px; |
| margin-bottom: 10px; |
| } |
| .nav-caption.second { |
| margin-top: 32px; |
| } |
| .sidebar nav { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
| .sidebar nav button, |
| .sidebar nav a { |
| display: flex; |
| width: 100%; |
| align-items: center; |
| gap: 10px; |
| padding: 11px 12px; |
| text-align: left; |
| font-size: 14px; |
| font-weight: 450; |
| border-radius: 6px; |
| transition: background 0.15s; |
| } |
| .sidebar nav button:hover, |
| .sidebar nav a:hover { |
| background: #1d2636; |
| color: #fff; |
| } |
| .sidebar nav .active { |
| background: #2e2a20; |
| color: #ffda7c; |
| box-shadow: inset 2px 0 #e9bd52; |
| } |
| .sidebar nav a > svg:last-child { |
| margin-left: auto; |
| opacity: 0.5; |
| } |
| .shortcut { |
| font-size: 11px; |
| margin-left: auto; |
| border: 1px solid #514734; |
| border-radius: 3px; |
| padding: 1px 4px; |
| } |
| .nav-count { |
| margin-left: auto; |
| background: #374256; |
| padding: 2px 5px; |
| border-radius: 3px; |
| font-size: 12px; |
| } |
| .sidebar-bottom { |
| margin-top: auto; |
| padding-top: 48px; |
| } |
| .powered { |
| border: 1px solid #2b3444; |
| border-radius: 9px; |
| background: linear-gradient(135deg, #1d2635, #171e2b); |
| padding: 15px; |
| } |
| .powered-symbol { |
| color: #e7c06a; |
| margin-bottom: 12px; |
| } |
| .powered strong { |
| display: block; |
| font-size: 13px; |
| color: #e9edf4; |
| margin-bottom: 7px; |
| } |
| .powered > span { |
| font-size: 12px; |
| color: #96a0b2; |
| } |
| .powered-tags { |
| display: flex; |
| gap: 5px; |
| margin-top: 14px; |
| } |
| .powered-tags span { |
| font-size: 10px; |
| border: 1px solid #3c4350; |
| border-radius: 3px; |
| padding: 4px 5px; |
| color: #b2bac9; |
| } |
| .source-link { |
| font-size: 13px; |
| display: flex; |
| gap: 8px; |
| align-items: center; |
| padding: 19px 10px 0; |
| color: #7f8a9d; |
| } |
| .source-link > svg:last-child { |
| margin-left: auto; |
| } |
| .workspace { |
| margin-left: 224px; |
| } |
| .topbar { |
| height: 65px; |
| padding: 0 36px; |
| border-bottom: 1px solid var(--line); |
| background: var(--surface-0); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 15px; |
| } |
| .breadcrumb, |
| .top-actions { |
| display: flex; |
| align-items: center; |
| gap: 13px; |
| font-size: 13px; |
| } |
| .breadcrumb { |
| color: var(--fg-faint); |
| } |
| .breadcrumb strong { |
| font-weight: 500; |
| color: var(--fg-soft); |
| } |
| .top-actions { |
| color: var(--fg-muted); |
| gap: 14px; |
| } |
| .beta-label { |
| font-size: 10px; |
| letter-spacing: 1px; |
| border: 1px solid var(--line); |
| border-radius: 4px; |
| padding: 4px 6px; |
| color: var(--fg-muted); |
| font-weight: 600; |
| } |
| .icon-button { |
| display: grid; |
| place-items: center; |
| width: 29px; |
| height: 29px; |
| border-radius: 5px; |
| color: var(--fg-muted); |
| } |
| .icon-button:hover { |
| background: var(--surface-2); |
| } |
| .top-divider { |
| width: 1px; |
| height: 20px; |
| background: var(--line); |
| } |
| .signin-top { |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| color: var(--fg-soft); |
| font-weight: 550; |
| } |
| .user-avatar { |
| width: 26px; |
| height: 26px; |
| display: grid; |
| place-items: center; |
| border: 1px solid #d8b64e; |
| border-radius: 50%; |
| background: #ffedb7; |
| color: #755823; |
| font-size: 12px; |
| } |
| .username { |
| font-size: 13px; |
| } |
| .mobile-menu { |
| display: none; |
| } |
| main { |
| max-width: 1520px; |
| margin: 0 auto; |
| padding: 38px 36px 0; |
| } |
| .page-heading { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 16px; |
| margin-bottom: 29px; |
| } |
| .overline { |
| font-size: 11px; |
| font-weight: 600; |
| letter-spacing: 1.7px; |
| color: var(--fg-faint); |
| margin-bottom: 10px; |
| } |
| h1 { |
| font-size: 29px; |
| letter-spacing: -0.85px; |
| line-height: 1.2; |
| font-weight: 620; |
| color: var(--fg); |
| } |
| .page-heading p { |
| font-size: 14px; |
| color: var(--fg-muted); |
| margin-top: 10px; |
| line-height: 1.6; |
| } |
| .status-pill { |
| display: flex; |
| align-items: center; |
| white-space: nowrap; |
| border: 1px solid var(--line); |
| background: var(--surface-0); |
| padding: 7px 10px; |
| font-size: 12px; |
| border-radius: 20px; |
| color: var(--fg-muted); |
| gap: 7px; |
| } |
| .status-pill > span { |
| width: 5px; |
| height: 5px; |
| background: var(--green); |
| border-radius: 50%; |
| } |
| .steps { |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| margin-bottom: 26px; |
| font-size: 12px; |
| color: var(--fg-faint); |
| } |
| .steps > span { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| white-space: nowrap; |
| } |
| .steps b { |
| display: grid; |
| place-items: center; |
| width: 20px; |
| height: 20px; |
| border: 1px solid var(--line-strong); |
| border-radius: 50%; |
| font-size: 11px; |
| font-weight: 500; |
| } |
| .steps > i { |
| width: 42px; |
| height: 1px; |
| background: var(--line-strong); |
| } |
| .steps .current { |
| color: var(--fg-soft); |
| font-weight: 550; |
| } |
| .steps .current b { |
| background: var(--primary); |
| color: var(--primary-fg); |
| border-color: var(--primary); |
| } |
| .builder-grid { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) 300px; |
| gap: 23px; |
| align-items: start; |
| } |
| .configuration { |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| min-width: 0; |
| } |
| .card { |
| background: var(--surface-0); |
| border: 1px solid var(--line); |
| border-radius: 10px; |
| box-shadow: var(--shadow); |
| padding: 23px; |
| } |
| .section-head { |
| display: flex; |
| align-items: center; |
| gap: 11px; |
| margin-bottom: 22px; |
| } |
| .section-icon { |
| width: 35px; |
| height: 35px; |
| border-radius: 8px; |
| background: var(--surface-1); |
| border: 1px solid var(--line); |
| display: grid; |
| place-items: center; |
| color: var(--fg-muted); |
| flex-shrink: 0; |
| } |
| h2 { |
| font-size: 14px; |
| line-height: 1.3; |
| font-weight: 620; |
| letter-spacing: -0.15px; |
| } |
| .section-head p { |
| font-size: 13px; |
| color: var(--fg-muted); |
| margin-top: 5px; |
| line-height: 1.5; |
| } |
| .quiet-badge { |
| margin-left: auto; |
| font-size: 11px; |
| white-space: nowrap; |
| padding: 4px 6px; |
| background: var(--surface-1); |
| border: 1px solid var(--line); |
| border-radius: 4px; |
| color: var(--fg-muted); |
| } |
| .field-label { |
| font-size: 13px; |
| color: var(--fg-soft); |
| font-weight: 550; |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 8px; |
| line-height: 1.4; |
| } |
| .field-label > span { |
| color: var(--fg-faint); |
| font-weight: 400; |
| font-size: 12px; |
| } |
| .dataset-input { |
| display: flex; |
| align-items: center; |
| border: 1px solid var(--line-strong); |
| border-radius: 7px; |
| height: 43px; |
| padding: 0 12px; |
| gap: 10px; |
| color: var(--fg-faint); |
| background: var(--surface-0); |
| } |
| .dataset-input:focus-within { |
| outline: 2px solid #e6af1330; |
| border-color: #c2a858; |
| } |
| .dataset-input input { |
| border: 0; |
| background: transparent; |
| padding: 0; |
| box-shadow: none; |
| font-family: ui-monospace, monospace; |
| font-size: 13px; |
| outline: none; |
| } |
| .field-help { |
| font-size: 12px; |
| color: var(--fg-faint); |
| margin-top: 7px; |
| line-height: 1.5; |
| } |
| .field-help code { |
| color: var(--fg-muted); |
| } |
| .fields-row { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 15px; |
| margin: 22px 0 18px; |
| } |
| .fields-row label { |
| font-size: 13px; |
| font-weight: 550; |
| color: var(--fg-soft); |
| } |
| .fields-row input, |
| .fields-row select { |
| margin-top: 8px; |
| } |
| .fields-row small { |
| display: block; |
| color: var(--fg-faint); |
| font-size: 11px; |
| line-height: 1.5; |
| margin-top: 7px; |
| font-weight: 400; |
| } |
| .select-wrap { |
| display: flex; |
| align-items: center; |
| position: relative; |
| color: var(--fg-muted); |
| } |
| .select-wrap > svg { |
| position: absolute; |
| left: 12px; |
| pointer-events: none; |
| } |
| .select-wrap > svg:last-child { |
| left: auto; |
| right: 12px; |
| } |
| .select-wrap select { |
| appearance: none; |
| padding-left: 38px; |
| padding-right: 32px; |
| font-size: 13px; |
| } |
| .metadata-note { |
| display: flex; |
| gap: 7px; |
| align-items: center; |
| margin-top: 18px; |
| font-size: 12px; |
| color: var(--fg-muted); |
| line-height: 1.5; |
| } |
| .metadata-note > svg { |
| color: #919eac; |
| } |
| .success-text { |
| color: var(--green); |
| } |
| .dataset-loaded { |
| margin-top: 20px; |
| border: 1px solid var(--line); |
| background: var(--surface-1); |
| border-radius: 7px; |
| padding: 15px; |
| } |
| .loaded-top { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 10px; |
| font-size: 11px; |
| color: var(--fg-muted); |
| } |
| .loaded-top > span, |
| .loaded-top a { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
| .live-dot { |
| width: 5px; |
| height: 5px; |
| border-radius: 50%; |
| background: #36ac81; |
| display: inline-block; |
| } |
| .loaded-top a { |
| color: var(--fg-soft); |
| } |
| .dataset-metrics { |
| display: grid; |
| grid-template-columns: 1.1fr 1fr 1fr; |
| gap: 8px; |
| margin: 17px 0; |
| } |
| .dataset-metrics strong { |
| font-size: 17px; |
| font-weight: 560; |
| letter-spacing: -0.4px; |
| display: block; |
| } |
| .dataset-metrics span { |
| font-size: 11px; |
| color: var(--fg-faint); |
| margin-top: 4px; |
| display: block; |
| } |
| .duration-chart { |
| height: 34px; |
| display: flex; |
| align-items: end; |
| gap: 2px; |
| } |
| .duration-chart i { |
| flex: 1; |
| min-width: 0; |
| background: #bbc8d9; |
| border-radius: 2px 2px 0 0; |
| opacity: 0.85; |
| } |
| .dark .duration-chart i { |
| background: #5d718d; |
| } |
| .chart-caption { |
| font-size: 10px; |
| color: var(--fg-faint); |
| display: flex; |
| justify-content: space-between; |
| margin-top: 6px; |
| } |
| .feature-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 11px; |
| } |
| .feature { |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| padding: 15px; |
| cursor: pointer; |
| transition: |
| background 0.15s, |
| border-color 0.15s; |
| min-height: 151px; |
| } |
| .feature:hover { |
| border-color: var(--line-strong); |
| background: var(--surface-1); |
| } |
| .feature.selected { |
| border-color: #dfbc5e; |
| background: var(--accent-fill); |
| box-shadow: 0 0 0 1px #dfbc5e0d; |
| } |
| .feature input { |
| position: absolute; |
| opacity: 0; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| cursor: pointer; |
| margin: 0; |
| } |
| .feature:focus-within { |
| outline: 2px solid #66aafc; |
| outline-offset: 2px; |
| } |
| .feature-icon { |
| display: grid; |
| place-items: center; |
| width: 31px; |
| height: 31px; |
| border-radius: 7px; |
| margin-bottom: 12px; |
| } |
| .amber { |
| background: #fdf0c8; |
| color: #b57a13; |
| } |
| .blue { |
| background: #e9efff; |
| color: #5b8cff; |
| } |
| .purple { |
| background: #f0eaff; |
| color: #9668d8; |
| } |
| .cyan { |
| background: #e5f7fb; |
| color: #279bbd; |
| } |
| .rose { |
| background: #ffebee; |
| color: #d86b7c; |
| } |
| .green { |
| background: #e5f5ee; |
| color: #259674; |
| } |
| .dark .feature-icon { |
| background: var(--surface-2); |
| } |
| .feature strong { |
| font-size: 13px; |
| font-weight: 600; |
| margin-bottom: 6px; |
| } |
| .feature > span:not(.feature-icon):not(.feature-check) { |
| font-size: 12px; |
| color: var(--fg-muted); |
| line-height: 1.5; |
| } |
| .feature small { |
| font-size: 10px; |
| color: var(--fg-faint); |
| margin-top: 9px; |
| line-height: 1.5; |
| } |
| .feature-check { |
| position: absolute; |
| top: 15px; |
| right: 14px; |
| width: 15px; |
| height: 15px; |
| border: 1px solid var(--line-strong); |
| background: var(--surface-0); |
| border-radius: 4px; |
| display: grid; |
| place-items: center; |
| } |
| .selected .feature-check { |
| background: #d5a52b; |
| border-color: #d5a52b; |
| color: #fff; |
| } |
| .dependency-note { |
| display: flex; |
| align-items: flex-start; |
| gap: 8px; |
| color: var(--fg-faint); |
| font-size: 12px; |
| line-height: 1.6; |
| margin-top: 17px; |
| } |
| .dependency-note > svg { |
| margin-top: 1px; |
| } |
| .output-options { |
| display: flex; |
| flex-direction: column; |
| gap: 9px; |
| } |
| .output-options label { |
| display: flex; |
| gap: 11px; |
| align-items: center; |
| border: 1px solid var(--line); |
| border-radius: 7px; |
| padding: 13px; |
| position: relative; |
| cursor: pointer; |
| } |
| .output-options label.chosen { |
| border-color: var(--line-strong); |
| background: var(--surface-1); |
| } |
| .output-options input { |
| position: absolute; |
| opacity: 0; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| cursor: pointer; |
| } |
| .output-options label:focus-within { |
| outline: 2px solid #66aafc; |
| } |
| .output-options svg { |
| color: var(--fg-muted); |
| } |
| .output-options strong { |
| font-size: 13px; |
| display: block; |
| font-weight: 550; |
| } |
| .output-options small { |
| font-size: 12px; |
| display: block; |
| margin-top: 5px; |
| color: var(--fg-faint); |
| } |
| .radio-indicator { |
| margin-left: auto; |
| border: 1px solid var(--line-strong); |
| width: 14px; |
| height: 14px; |
| border-radius: 50%; |
| flex-shrink: 0; |
| } |
| .chosen .radio-indicator { |
| border: 4px solid #788293; |
| background: var(--surface-0); |
| } |
| .model-presets { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 8px; |
| margin-bottom: 22px; |
| } |
| .model-presets button { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 8px; |
| padding: 12px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: var(--surface-0); |
| text-align: left; |
| font-size: 12px; |
| } |
| .model-presets button.selected { |
| background: var(--accent-fill); |
| border-color: var(--accent); |
| } |
| .model-presets button span { |
| font-weight: 600; |
| } |
| .model-presets small { |
| color: var(--fg-muted); |
| white-space: nowrap; |
| font-size: 10px; |
| } |
| .model-picker select { |
| width: 100%; |
| } |
| .model-description { |
| color: var(--fg-muted); |
| font-size: 12px; |
| line-height: 1.6; |
| margin: 12px 0 16px; |
| } |
| .model-specs { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: var(--surface-1); |
| } |
| .model-specs > div { |
| padding: 13px; |
| } |
| .model-specs > div + div { |
| border-left: 1px solid var(--line); |
| } |
| .model-specs span { |
| color: var(--fg-muted); |
| font-size: 10px; |
| display: block; |
| margin-bottom: 6px; |
| } |
| .model-specs strong { |
| font-size: 13px; |
| font-weight: 550; |
| } |
| .model-links, |
| .model-links span, |
| .model-links a { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
| .model-links { |
| justify-content: space-between; |
| margin: 16px 0; |
| font-size: 11px; |
| } |
| .model-links span { |
| color: var(--green); |
| } |
| .model-links a { |
| color: var(--fg-muted); |
| white-space: nowrap; |
| } |
| .model-unavailable { |
| border-top: 1px solid var(--line); |
| padding-top: 13px; |
| font-size: 11px; |
| color: var(--fg-muted); |
| margin-bottom: 12px; |
| } |
| .model-unavailable summary { |
| cursor: pointer; |
| } |
| .model-unavailable p { |
| line-height: 1.6; |
| } |
| @media (max-width: 700px) { |
| .model-presets button { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
| .model-specs > div { |
| padding: 9px; |
| } |
| .model-specs strong { |
| font-size: 11px; |
| } |
| .model-links { |
| align-items: flex-start; |
| gap: 12px; |
| } |
| } |
| .model-row { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| border-top: 1px solid var(--line-subtle); |
| margin-top: 19px; |
| padding-top: 18px; |
| } |
| .model-avatar { |
| display: grid; |
| place-items: center; |
| width: 35px; |
| height: 35px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| color: var(--fg-muted); |
| background: var(--surface-1); |
| } |
| .model-row strong { |
| font-size: 13px; |
| font-weight: 550; |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| flex-wrap: wrap; |
| } |
| .model-row small { |
| font-size: 11px; |
| color: var(--fg-faint); |
| display: block; |
| margin-top: 5px; |
| line-height: 1.5; |
| } |
| .model-row > svg { |
| margin-left: auto; |
| color: var(--fg-faint); |
| } |
| .tuned { |
| font-size: 7px; |
| letter-spacing: 0.5px; |
| font-weight: 600; |
| background: #eeeaf8; |
| border: 1px solid #e2daef; |
| color: #8865a5; |
| border-radius: 3px; |
| padding: 3px 4px; |
| } |
| .dark .tuned { |
| background: #302d44; |
| border-color: #48385e; |
| color: #c6a2f0; |
| } |
| .disclosure { |
| display: flex; |
| gap: 8px; |
| align-items: center; |
| font-size: 12px; |
| color: var(--fg-muted); |
| padding: 19px 0 0; |
| width: 100%; |
| text-align: left; |
| } |
| .disclosure > svg:last-child { |
| margin-left: auto; |
| transition: transform 0.2s; |
| } |
| .rotated { |
| transform: rotate(180deg); |
| } |
| .advanced { |
| margin-top: 10px; |
| } |
| .advanced p { |
| font-size: 12px; |
| color: var(--fg-muted); |
| line-height: 1.7; |
| } |
| .inline-warning { |
| font-size: 12px; |
| color: #b47917; |
| background: var(--accent-fill); |
| border: 1px solid #e6b95450; |
| padding: 10px; |
| border-radius: 5px; |
| margin-top: 12px; |
| line-height: 1.6; |
| } |
| .configure-footer { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| } |
| .configure-footer > span { |
| font-size: 12px; |
| color: var(--fg-muted); |
| display: flex; |
| gap: 7px; |
| align-items: center; |
| } |
| .button { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| min-height: 37px; |
| border-radius: 6px; |
| padding: 10px 13px; |
| font-size: 13px; |
| line-height: 1.3; |
| font-weight: 550; |
| transition: |
| filter 0.15s, |
| background 0.15s; |
| border: 1px solid transparent; |
| white-space: nowrap; |
| } |
| .button:hover { |
| filter: brightness(1.12); |
| } |
| .primary { |
| background: var(--primary); |
| color: var(--primary-fg); |
| box-shadow: 0 1px 2px #00000016; |
| } |
| .primary:disabled { |
| filter: none; |
| } |
| .secondary { |
| border-color: var(--line-strong); |
| background: var(--surface-0); |
| color: var(--fg-soft); |
| box-shadow: var(--shadow); |
| } |
| .secondary:hover { |
| background: var(--surface-1); |
| } |
| .danger { |
| background: #bd333a; |
| color: white; |
| } |
| .full { |
| width: 100%; |
| } |
| .summary-column { |
| position: sticky; |
| top: 22px; |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| min-width: 0; |
| } |
| .summary { |
| padding: 21px; |
| } |
| .summary-title { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 28px; |
| } |
| .summary-title h2 { |
| font-size: 14px; |
| } |
| .price-label { |
| font-size: 10px; |
| letter-spacing: 1.05px; |
| font-weight: 600; |
| color: var(--fg-faint); |
| } |
| .price { |
| font-size: 30px; |
| letter-spacing: -1.5px; |
| line-height: 1.35; |
| font-weight: 600; |
| margin-top: 9px; |
| font-variant-numeric: tabular-nums; |
| white-space: nowrap; |
| } |
| .price > span { |
| color: var(--fg-faint); |
| font-weight: 300; |
| display: inline-block; |
| margin: 0 6px; |
| font-size: 24px; |
| vertical-align: 2px; |
| } |
| .placeholder-price { |
| color: var(--fg-faint); |
| letter-spacing: 0; |
| font-weight: 300; |
| } |
| .price-description { |
| font-size: 12px; |
| line-height: 1.7; |
| color: var(--fg-muted); |
| margin-top: 8px; |
| } |
| .cost-lines { |
| display: flex; |
| flex-direction: column; |
| gap: 11px; |
| margin-top: 22px; |
| } |
| .cost-lines > div { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| font-size: 12px; |
| gap: 8px; |
| } |
| .cost-lines > div > span { |
| color: var(--fg-muted); |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| } |
| .cost-lines strong { |
| font-weight: 500; |
| font-size: 12px; |
| } |
| .cost-lines .muted { |
| color: var(--fg-faint); |
| font-size: 11px; |
| } |
| .info-tooltip { |
| display: inline-flex; |
| } |
| .summary-divider { |
| height: 1px; |
| background: var(--line-subtle); |
| margin: 20px 0; |
| } |
| .summary-facts { |
| display: flex; |
| flex-direction: column; |
| gap: 13px; |
| } |
| .summary-facts > div { |
| display: flex; |
| align-items: center; |
| font-size: 12px; |
| gap: 8px; |
| color: var(--fg-muted); |
| } |
| .summary-facts > div > svg { |
| color: var(--fg-faint); |
| } |
| .summary-facts strong { |
| margin-left: auto; |
| color: var(--fg-soft); |
| font-weight: 500; |
| } |
| .currency-input { |
| display: flex; |
| align-items: center; |
| border: 1px solid var(--line-strong); |
| border-radius: 7px; |
| padding: 0 11px; |
| gap: 5px; |
| height: 39px; |
| } |
| .currency-input span { |
| font-size: 14px; |
| color: var(--fg-muted); |
| } |
| .currency-input input { |
| border: 0; |
| box-shadow: none; |
| background: transparent; |
| padding: 0; |
| height: 34px; |
| font-size: 14px; |
| outline: none; |
| } |
| .currency-input:focus-within { |
| outline: 2px solid #e6af1350; |
| } |
| .microcopy { |
| font-size: 11px; |
| color: var(--fg-faint); |
| line-height: 1.7; |
| margin-top: 8px; |
| } |
| .budget-hint { |
| font-size: 11px; |
| line-height: 1.6; |
| padding: 9px; |
| color: #ac7b1e; |
| background: var(--accent-fill); |
| border-radius: 5px; |
| margin-top: 12px; |
| } |
| .launch-area { |
| margin-top: 20px; |
| } |
| .launch-area > .button { |
| width: 100%; |
| min-height: 41px; |
| font-size: 12px; |
| } |
| .launch-area input + .button { |
| margin-top: 12px; |
| } |
| .hf { |
| font-size: 16px; |
| } |
| .billed-to { |
| text-align: center; |
| font-size: 11px; |
| color: var(--fg-faint); |
| margin-top: 10px; |
| } |
| .billed-to strong { |
| font-weight: 500; |
| color: var(--fg-muted); |
| } |
| .summary-fineprint { |
| display: flex; |
| align-items: flex-start; |
| gap: 7px; |
| font-size: 11px; |
| line-height: 1.7; |
| color: var(--fg-faint); |
| border-top: 1px solid var(--line-subtle); |
| margin-top: 19px; |
| padding-top: 15px; |
| } |
| .summary-fineprint > svg { |
| margin-top: 2px; |
| } |
| .help-card { |
| display: flex; |
| align-items: flex-start; |
| gap: 10px; |
| padding: 2px 8px; |
| color: var(--fg-muted); |
| } |
| .help-card > svg { |
| color: var(--fg-faint); |
| margin-top: 2px; |
| } |
| .help-card strong { |
| font-size: 12px; |
| font-weight: 550; |
| color: var(--fg-soft); |
| } |
| .help-card p { |
| font-size: 12px; |
| line-height: 1.6; |
| margin-top: 7px; |
| color: var(--fg-faint); |
| } |
| .help-card button { |
| display: flex; |
| gap: 6px; |
| align-items: center; |
| font-size: 11px; |
| color: var(--fg-soft); |
| padding: 0; |
| margin-top: 10px; |
| } |
| .pricing-link { |
| font-size: 10px; |
| color: var(--fg-faint); |
| text-align: center; |
| line-height: 1.9; |
| margin-top: 1px; |
| } |
| .pricing-link a { |
| display: inline-flex; |
| align-items: center; |
| gap: 2px; |
| text-decoration: underline; |
| text-decoration-color: var(--line-strong); |
| text-underline-offset: 3px; |
| } |
| footer { |
| padding: 31px 0 20px; |
| font-size: 11px; |
| display: flex; |
| justify-content: space-between; |
| gap: 12px; |
| color: var(--fg-faint); |
| } |
| footer > span { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
| .footer-dot { |
| margin: 0 4px; |
| } |
| .message { |
| display: flex; |
| gap: 9px; |
| align-items: flex-start; |
| padding: 13px 16px; |
| border-radius: 7px; |
| margin-bottom: 22px; |
| font-size: 14px; |
| line-height: 1.6; |
| } |
| .message > svg { |
| margin-top: 2px; |
| } |
| .message > span { |
| flex: 1; |
| } |
| .message > button { |
| margin-left: auto; |
| display: flex; |
| padding: 3px; |
| align-items: center; |
| } |
| .error { |
| background: #fff1f0; |
| border: 1px solid #f3cccc; |
| color: #a43139; |
| } |
| .notice { |
| background: #eef8f3; |
| border: 1px solid #cce6d8; |
| color: #226b4f; |
| } |
| .dark .error { |
| background: #331e25; |
| border-color: #603440; |
| color: #ffadb2; |
| } |
| .dark .notice { |
| background: #183027; |
| border-color: #2c4e40; |
| color: #87d9b7; |
| } |
| .heading-actions { |
| display: flex; |
| align-items: center; |
| gap: 9px; |
| } |
| .empty-state { |
| min-height: 370px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-direction: column; |
| text-align: center; |
| padding: 50px 25px; |
| } |
| .empty-icon { |
| height: 70px; |
| width: 70px; |
| display: grid; |
| place-items: center; |
| border: 1px solid var(--line); |
| border-radius: 17px; |
| background: var(--surface-1); |
| color: var(--fg-faint); |
| margin-bottom: 24px; |
| box-shadow: 0 0 0 8px var(--surface-1); |
| } |
| .empty-state h2 { |
| font-size: 20px; |
| letter-spacing: -0.4px; |
| } |
| .empty-state p { |
| font-size: 14px; |
| color: var(--fg-muted); |
| line-height: 1.6; |
| max-width: 340px; |
| margin: 12px 0 23px; |
| } |
| .section-footnote { |
| font-size: 12px; |
| color: var(--fg-faint); |
| line-height: 1.7; |
| margin-top: 18px; |
| } |
| .jobs-list { |
| display: flex; |
| flex-direction: column; |
| gap: 15px; |
| } |
| .job-head { |
| display: flex; |
| gap: 12px; |
| align-items: center; |
| } |
| .job-head h2 { |
| font-size: 13px; |
| } |
| .job-head p { |
| font-size: 12px; |
| color: var(--fg-faint); |
| margin-top: 6px; |
| } |
| .job-status { |
| margin-left: auto; |
| font-size: 11px; |
| text-transform: capitalize; |
| border: 1px solid var(--line-strong); |
| border-radius: 20px; |
| padding: 5px 9px; |
| display: flex; |
| gap: 5px; |
| align-items: center; |
| color: var(--fg-muted); |
| } |
| .job-status.running, |
| .job-status.completed { |
| background: #edfbf3; |
| border-color: #bfe7ce; |
| color: #25875a; |
| } |
| .dark .job-status.running, |
| .dark .job-status.completed { |
| background: #1c362b; |
| border-color: #3f7557; |
| color: #89d1a7; |
| } |
| .job-status.error { |
| background: #fff1f0; |
| border-color: #f3cccc; |
| color: #a43139; |
| } |
| .job-actions { |
| display: flex; |
| gap: 8px; |
| align-items: center; |
| margin-top: 22px; |
| flex-wrap: wrap; |
| } |
| .job-actions .button { |
| font-size: 12px; |
| min-height: 32px; |
| padding: 7px 10px; |
| } |
| .text-danger { |
| margin-left: auto; |
| font-size: 12px; |
| color: #bd5960; |
| } |
| .job-progress { |
| margin-top: 23px; |
| font-size: 13px; |
| } |
| .job-progress > div { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 9px; |
| } |
| .job-progress strong { |
| font-weight: 500; |
| text-transform: capitalize; |
| } |
| .job-progress progress { |
| width: 100%; |
| height: 7px; |
| accent-color: #d0a745; |
| display: block; |
| margin-bottom: 8px; |
| } |
| .job-progress small { |
| color: var(--fg-faint); |
| font-size: 11px; |
| } |
| .guide-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 18px; |
| } |
| .guide-card { |
| padding: 27px; |
| } |
| .guide-card h2 { |
| margin-top: 22px; |
| margin-bottom: 10px; |
| } |
| .guide-card p, |
| .guide-note p { |
| font-size: 14px; |
| color: var(--fg-muted); |
| line-height: 1.9; |
| } |
| .guide-note { |
| margin-top: 20px; |
| padding: 28px; |
| } |
| .guide-note h2 { |
| margin: 0 0 12px; |
| } |
| .guide-note p { |
| margin-bottom: 17px; |
| } |
| .guide-note h2:not(:first-child) { |
| margin-top: 27px; |
| } |
| .review-dialog { |
| padding: 0; |
| border: 1px solid var(--line); |
| border-radius: 14px; |
| background: var(--surface-0); |
| color: var(--fg); |
| width: min(530px, calc(100% - 30px)); |
| max-height: calc(100vh - 30px); |
| box-shadow: 0 35px 100px #0005; |
| } |
| .review-dialog::backdrop { |
| background: #10172595; |
| backdrop-filter: blur(3px); |
| } |
| .modal-top { |
| padding: 20px 25px 0; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| .modal-body { |
| padding: 22px 28px 28px; |
| } |
| .modal-body h2 { |
| font-size: 23px; |
| letter-spacing: -0.5px; |
| margin-top: 5px; |
| } |
| .modal-body > p:not(.microcopy) { |
| font-size: 14px; |
| color: var(--fg-muted); |
| line-height: 1.6; |
| margin-top: 8px; |
| } |
| .modal-body dl { |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| border-top: 1px solid var(--line); |
| border-bottom: 1px solid var(--line); |
| padding: 20px 0; |
| margin: 22px 0; |
| } |
| .modal-body dl > div { |
| display: grid; |
| grid-template-columns: 120px 1fr; |
| gap: 12px; |
| font-size: 13px; |
| line-height: 1.6; |
| } |
| .modal-body dt { |
| color: var(--fg-muted); |
| } |
| .modal-body dd { |
| margin: 0; |
| overflow-wrap: anywhere; |
| color: var(--fg-soft); |
| } |
| .private-tag { |
| display: inline-flex; |
| align-items: center; |
| gap: 3px; |
| font-size: 10px; |
| color: var(--fg-faint); |
| border: 1px solid var(--line); |
| padding: 0 4px; |
| border-radius: 3px; |
| margin-left: 5px; |
| } |
| .consent { |
| display: flex; |
| gap: 10px; |
| align-items: flex-start; |
| font-size: 13px; |
| line-height: 1.7; |
| color: var(--fg-soft); |
| cursor: pointer; |
| } |
| .consent input { |
| margin-top: 3px; |
| } |
| .modal-body .full { |
| margin-top: 20px; |
| min-height: 43px; |
| } |
| .modal-backdrop { |
| position: fixed; |
| inset: 0; |
| z-index: 50; |
| background: #10172590; |
| display: grid; |
| place-items: center; |
| padding: 20px; |
| backdrop-filter: blur(3px); |
| } |
| .cancel-dialog { |
| width: min(420px, 100%); |
| } |
| .cancel-dialog h2 { |
| font-size: 18px; |
| } |
| .cancel-dialog p { |
| font-size: 14px; |
| color: var(--fg-muted); |
| line-height: 1.8; |
| margin: 13px 0 25px; |
| } |
| .spin { |
| animation: spin 1s linear infinite; |
| } |
| @keyframes spin { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
| @media (min-width: 1500px) { |
| main { |
| padding-left: 55px; |
| padding-right: 55px; |
| } |
| .builder-grid { |
| grid-template-columns: minmax(0, 1fr) 340px; |
| gap: 28px; |
| } |
| .summary { |
| padding: 25px; |
| } |
| .feature-grid { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| .price { |
| font-size: 34px; |
| } |
| } |
| @media (max-width: 1150px) { |
| .sidebar { |
| width: 195px; |
| padding-left: 12px; |
| padding-right: 12px; |
| } |
| .workspace { |
| margin-left: 195px; |
| } |
| .brand { |
| font-size: 20px; |
| } |
| .brand-sub { |
| font-size: 7px; |
| } |
| .brand-mark { |
| width: 34px; |
| height: 34px; |
| } |
| .topbar { |
| padding: 0 25px; |
| } |
| main { |
| padding: 29px 25px 0; |
| } |
| .builder-grid { |
| grid-template-columns: minmax(0, 1fr) 275px; |
| gap: 18px; |
| } |
| .card { |
| padding: 19px; |
| } |
| .summary { |
| padding: 18px; |
| } |
| .page-heading .status-pill { |
| display: none; |
| } |
| .price { |
| font-size: 28px; |
| } |
| .feature { |
| padding: 12px; |
| min-height: 155px; |
| } |
| .feature small { |
| font-size: 10px; |
| } |
| .configure-footer { |
| align-items: end; |
| } |
| .configure-footer > span { |
| max-width: 120px; |
| line-height: 1.5; |
| } |
| .section-head .quiet-badge { |
| display: none; |
| } |
| .powered { |
| padding: 12px; |
| } |
| .powered-tags { |
| flex-wrap: wrap; |
| } |
| } |
| @media (max-width: 960px) { |
| .sidebar { |
| width: 68px; |
| padding: 23px 9px 16px; |
| } |
| .brand { |
| padding: 0; |
| justify-content: center; |
| } |
| .brand > span:last-child, |
| .workspace-label, |
| .nav-caption, |
| .sidebar nav button > span, |
| .sidebar nav a > svg:last-child, |
| .sidebar-bottom { |
| display: none; |
| } |
| .sidebar nav button, |
| .sidebar nav a { |
| font-size: 0; |
| justify-content: center; |
| padding: 14px 0; |
| gap: 0; |
| } |
| .sidebar nav { |
| margin-top: 30px; |
| } |
| .sidebar nav button > svg, |
| .sidebar nav a > svg { |
| width: 20px; |
| height: 20px; |
| } |
| .workspace { |
| margin-left: 68px; |
| } |
| main { |
| padding: 27px 23px 0; |
| } |
| .topbar { |
| padding: 0 23px; |
| } |
| .builder-grid { |
| gap: 17px; |
| grid-template-columns: minmax(0, 1fr) 270px; |
| } |
| .brand-mark { |
| width: 34px; |
| height: 34px; |
| } |
| .feature { |
| min-height: 160px; |
| } |
| .feature small { |
| font-size: 10px; |
| } |
| .page-heading { |
| margin-bottom: 25px; |
| } |
| h1 { |
| font-size: 26px; |
| } |
| .dataset-metrics strong { |
| font-size: 15px; |
| } |
| .loaded-top { |
| flex-wrap: wrap; |
| } |
| } |
| @media (max-width: 780px) { |
| .builder-grid { |
| grid-template-columns: 1fr; |
| } |
| .summary-column { |
| position: static; |
| display: grid; |
| grid-template-columns: 1fr; |
| } |
| .summary { |
| padding: 24px; |
| } |
| .price { |
| font-size: 38px; |
| } |
| .summary-facts { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 16px; |
| } |
| .summary-facts > div { |
| font-size: 13px; |
| } |
| .summary-facts > div:nth-child(odd) { |
| padding-right: 16px; |
| } |
| .summary-divider { |
| margin: 21px 0; |
| } |
| .feature { |
| min-height: 145px; |
| padding: 17px; |
| } |
| .feature strong { |
| font-size: 14px; |
| } |
| .feature > span:not(.feature-icon):not(.feature-check) { |
| font-size: 13px; |
| } |
| .feature small { |
| font-size: 11px; |
| } |
| .card { |
| padding: 22px; |
| } |
| .summary-column .help-card, |
| .summary-column .pricing-link { |
| display: none; |
| } |
| .configure-footer > span { |
| max-width: none; |
| } |
| .page-heading { |
| align-items: start; |
| } |
| .page-heading p { |
| max-width: 400px; |
| } |
| .summary-fineprint { |
| font-size: 12px; |
| } |
| .microcopy { |
| font-size: 12px; |
| } |
| .cost-lines > div, |
| .cost-lines strong { |
| font-size: 13px; |
| } |
| .cost-lines .muted { |
| font-size: 12px; |
| } |
| .launch-area > .button { |
| font-size: 14px; |
| } |
| .price-description { |
| font-size: 13px; |
| } |
| .field-label { |
| font-size: 14px; |
| } |
| .guide-grid { |
| gap: 14px; |
| } |
| .heading-actions .button { |
| font-size: 12px; |
| padding: 9px; |
| } |
| .page-heading .heading-actions { |
| flex-direction: column; |
| align-items: stretch; |
| } |
| } |
| @media (max-width: 520px) { |
| .sidebar { |
| display: none; |
| } |
| .sidebar.open { |
| display: flex; |
| width: 224px; |
| top: 65px; |
| padding: 20px 16px; |
| box-shadow: 12px 0 30px #0004; |
| } |
| .sidebar.open .brand { |
| display: none; |
| } |
| .sidebar.open .workspace-label { |
| display: flex; |
| margin-top: 0; |
| } |
| .sidebar.open .nav-caption { |
| display: block; |
| } |
| .sidebar.open nav { |
| margin-top: 0; |
| } |
| .sidebar.open nav button, |
| .sidebar.open nav a { |
| font-size: 14px; |
| padding: 12px; |
| justify-content: start; |
| gap: 10px; |
| } |
| .sidebar.open nav button > span { |
| display: block; |
| } |
| .sidebar.open .sidebar-bottom { |
| display: block; |
| } |
| .workspace { |
| margin-left: 0; |
| } |
| .mobile-menu { |
| display: grid; |
| } |
| .topbar { |
| height: 61px; |
| padding: 0 17px; |
| } |
| .top-actions { |
| gap: 10px; |
| } |
| .breadcrumb { |
| gap: 7px; |
| font-size: 12px; |
| } |
| .top-actions .beta-label, |
| .top-divider, |
| .username { |
| display: none; |
| } |
| .signin-top { |
| font-size: 12px; |
| } |
| main { |
| padding: 26px 16px 0; |
| } |
| h1 { |
| font-size: 25px; |
| } |
| .overline { |
| font-size: 10px; |
| letter-spacing: 1.45px; |
| } |
| .page-heading p { |
| font-size: 13px; |
| line-height: 1.75; |
| } |
| .page-heading { |
| margin-bottom: 22px; |
| } |
| .steps { |
| gap: 8px; |
| font-size: 10px; |
| justify-content: space-between; |
| } |
| .steps > i { |
| width: 12px; |
| } |
| .steps > span { |
| gap: 5px; |
| } |
| .steps b { |
| width: 18px; |
| height: 18px; |
| font-size: 10px; |
| } |
| .configuration { |
| gap: 15px; |
| } |
| .card { |
| padding: 18px; |
| border-radius: 9px; |
| } |
| .section-head { |
| gap: 9px; |
| margin-bottom: 21px; |
| } |
| .section-head p { |
| font-size: 12px; |
| } |
| .section-icon { |
| height: 32px; |
| width: 32px; |
| } |
| .field-label { |
| font-size: 13px; |
| } |
| .dataset-input input { |
| font-size: 12px; |
| } |
| .fields-row { |
| gap: 12px; |
| } |
| .fields-row label { |
| font-size: 12px; |
| } |
| .fields-row small { |
| font-size: 10px; |
| } |
| .feature-grid { |
| gap: 9px; |
| } |
| .feature { |
| padding: 12px; |
| min-height: 159px; |
| } |
| .feature strong { |
| font-size: 13px; |
| } |
| .feature > span:not(.feature-icon):not(.feature-check) { |
| font-size: 12px; |
| } |
| .feature small { |
| font-size: 10px; |
| } |
| .feature-icon { |
| width: 29px; |
| height: 29px; |
| margin-bottom: 11px; |
| } |
| .feature-check { |
| top: 13px; |
| right: 12px; |
| } |
| .dependency-note { |
| font-size: 11px; |
| } |
| .model-row strong { |
| font-size: 12px; |
| } |
| .model-row small { |
| font-size: 10px; |
| } |
| .output-options small { |
| font-size: 11px; |
| line-height: 1.5; |
| } |
| .output-options strong { |
| font-size: 12px; |
| } |
| .output-options label { |
| gap: 9px; |
| padding: 12px; |
| } |
| .configure-footer { |
| flex-direction: column-reverse; |
| align-items: stretch; |
| gap: 12px; |
| } |
| .configure-footer > .button { |
| width: 100%; |
| min-height: 41px; |
| } |
| .configure-footer > span { |
| justify-content: center; |
| font-size: 11px; |
| } |
| .summary { |
| padding: 21px; |
| } |
| .builder-grid { |
| gap: 20px; |
| } |
| .summary-title { |
| margin-bottom: 25px; |
| } |
| .summary-facts { |
| gap: 13px; |
| } |
| .summary-facts > div { |
| font-size: 11px; |
| gap: 6px; |
| } |
| .summary-facts > div:nth-child(odd) { |
| padding-right: 0; |
| } |
| .summary-facts svg { |
| width: 13px; |
| } |
| .price { |
| font-size: 34px; |
| } |
| .price > span { |
| font-size: 26px; |
| } |
| .summary-fineprint { |
| font-size: 11px; |
| } |
| .summary-facts strong { |
| font-size: 11px; |
| } |
| .dataset-metrics strong { |
| font-size: 16px; |
| } |
| footer { |
| font-size: 10px; |
| flex-wrap: wrap; |
| justify-content: center; |
| line-height: 1.7; |
| text-align: center; |
| } |
| .guide-grid { |
| grid-template-columns: 1fr; |
| } |
| .guide-card h2 { |
| margin-top: 17px; |
| } |
| .guide-card p, |
| .guide-note p { |
| font-size: 13px; |
| } |
| .empty-state { |
| min-height: 330px; |
| padding: 35px 20px; |
| } |
| .empty-state h2 { |
| font-size: 18px; |
| } |
| .empty-state p { |
| font-size: 13px; |
| } |
| .job-head { |
| gap: 9px; |
| flex-wrap: wrap; |
| } |
| .job-head h2 { |
| font-size: 13px; |
| } |
| .job-head p { |
| font-size: 11px; |
| } |
| .job-status { |
| font-size: 10px; |
| } |
| .job-actions { |
| gap: 7px; |
| } |
| .job-actions .button { |
| font-size: 11px; |
| } |
| .text-danger { |
| margin-left: 0; |
| } |
| .modal-body { |
| padding: 20px; |
| } |
| .modal-body h2 { |
| font-size: 21px; |
| } |
| .modal-body dl > div { |
| grid-template-columns: 95px 1fr; |
| gap: 10px; |
| font-size: 12px; |
| } |
| .modal-top { |
| padding: 18px 20px 0; |
| } |
| .consent { |
| font-size: 12px; |
| } |
| .heading-actions .button { |
| font-size: 11px; |
| padding: 7px; |
| } |
| .page-heading .heading-actions { |
| gap: 6px; |
| } |
| .message { |
| font-size: 13px; |
| padding: 11px; |
| } |
| .section-footnote { |
| font-size: 11px; |
| } |
| } |
| @media (prefers-reduced-motion: reduce) { |
| * { |
| animation: none !important; |
| transition: none !important; |
| } |
| } |
|
|
| |
| .feature-shell { |
| min-width: 0; |
| display: flex; |
| flex-direction: column; |
| } |
| .feature-shell .feature { |
| flex: 1; |
| border-radius: 8px 8px 0 0; |
| } |
| .edit-prompt { |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| width: 100%; |
| padding: 10px 13px; |
| border: 1px solid var(--line); |
| border-top: 0; |
| border-radius: 0 0 8px 8px; |
| background: var(--surface-1); |
| font-size: 11px; |
| color: var(--fg-muted); |
| text-align: left; |
| } |
| .edit-prompt:hover { |
| background: var(--surface-2); |
| color: var(--fg); |
| } |
| .edit-prompt b, |
| .prompt-default { |
| margin-left: auto; |
| font-size: 10px; |
| } |
| .edit-prompt b { |
| color: var(--green); |
| font-weight: 600; |
| } |
| .prompt-default { |
| color: var(--fg-faint); |
| } |
| .annotation-examples { |
| border-top: 1px solid var(--line); |
| margin-top: 23px; |
| padding-top: 22px; |
| } |
| .examples-heading { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| color: var(--fg-soft); |
| } |
| .examples-heading h3 { |
| font-size: 13px; |
| margin: 0; |
| font-weight: 600; |
| } |
| .examples-heading > span { |
| font-size: 10px; |
| color: var(--fg-faint); |
| margin-left: auto; |
| } |
| .example-tabs { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 5px; |
| margin: 17px 0 13px; |
| } |
| .example-tabs button { |
| font-size: 10px; |
| padding: 6px 9px; |
| border-radius: 5px; |
| color: var(--fg-muted); |
| border: 1px solid transparent; |
| } |
| .example-tabs button:hover { |
| background: var(--surface-2); |
| } |
| .example-tabs button.active { |
| background: var(--surface-2); |
| color: var(--fg); |
| border-color: var(--line); |
| font-weight: 600; |
| } |
| .examples-explanation { |
| font-size: 12px; |
| color: var(--fg-muted); |
| line-height: 1.65; |
| margin-bottom: 16px; |
| } |
| .example-pair { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); |
| gap: 12px; |
| } |
| .example-card { |
| background: var(--surface-1); |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| padding: 15px; |
| min-width: 0; |
| } |
| .example-kicker { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| font-size: 9px; |
| letter-spacing: 1px; |
| font-weight: 600; |
| color: var(--fg-faint); |
| } |
| .example-kicker span { |
| display: flex; |
| gap: 4px; |
| align-items: center; |
| letter-spacing: 0; |
| font-variant-numeric: tabular-nums; |
| } |
| .example-card h4 { |
| font-size: 12px; |
| line-height: 1.5; |
| margin: 10px 0 14px; |
| font-weight: 600; |
| color: var(--fg-soft); |
| } |
| .example-timeline { |
| display: flex; |
| gap: 3px; |
| height: 8px; |
| margin-bottom: 17px; |
| border-radius: 3px; |
| overflow: hidden; |
| } |
| .example-timeline span { |
| min-width: 2px; |
| } |
| .phase-0 { |
| background: #82a8ee; |
| } |
| .phase-1 { |
| background: #b193df; |
| } |
| .phase-2 { |
| background: #e9b25e; |
| } |
| .phase-3 { |
| background: #62b99f; |
| } |
| .example-rows { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
| .example-rows > div { |
| display: grid; |
| grid-template-columns: 6px 1fr; |
| align-items: start; |
| column-gap: 7px; |
| row-gap: 3px; |
| } |
| .phase-dot { |
| width: 6px; |
| height: 6px; |
| border-radius: 2px; |
| margin-top: 4px; |
| } |
| .example-rows code { |
| color: var(--fg-muted); |
| font-size: 10px; |
| } |
| .example-rows > div > span:last-child { |
| grid-column: 2; |
| color: var(--fg-soft); |
| font-size: 11px; |
| line-height: 1.5; |
| } |
| .example-output { |
| white-space: pre-wrap; |
| overflow-wrap: anywhere; |
| color: var(--fg-soft); |
| font-size: 12px; |
| line-height: 1.8; |
| } |
| .example-footnote { |
| font-size: 10px; |
| color: var(--fg-faint); |
| margin-top: 13px; |
| line-height: 1.6; |
| } |
| .prompt-dialog { |
| width: min(790px, calc(100% - 30px)); |
| } |
| .prompt-notice { |
| font-size: 12px; |
| line-height: 1.65; |
| color: var(--fg-soft); |
| background: var(--accent-fill); |
| border: 1px solid var(--line); |
| padding: 12px 14px; |
| border-radius: 7px; |
| margin-top: 17px; |
| } |
| .prompt-field { |
| margin: 24px 0; |
| } |
| .prompt-field-heading { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 10px; |
| margin-bottom: 10px; |
| flex-wrap: wrap; |
| } |
| .prompt-field-heading label { |
| font-size: 13px; |
| font-weight: 600; |
| } |
| .prompt-field-heading button { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| font-size: 11px; |
| color: var(--fg-muted); |
| padding: 4px 0; |
| } |
| .prompt-field-heading button:hover { |
| color: var(--fg); |
| } |
| .prompt-field textarea { |
| width: 100%; |
| min-height: 300px; |
| resize: vertical; |
| padding: 15px; |
| border: 1px solid var(--line-strong); |
| border-radius: 8px; |
| background: var(--surface-1); |
| color: var(--fg-soft); |
| font: |
| 12px/1.75 "SFMono-Regular", |
| Consolas, |
| monospace; |
| tab-size: 2; |
| } |
| .prompt-field textarea:focus-visible { |
| outline: 2px solid #66aafc; |
| outline-offset: 2px; |
| } |
| .placeholder-list { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| gap: 6px; |
| margin-top: 9px; |
| color: var(--fg-muted); |
| font-size: 11px; |
| } |
| .placeholder-list code { |
| background: var(--surface-2); |
| padding: 3px 5px; |
| border-radius: 4px; |
| overflow-wrap: anywhere; |
| max-width: 100%; |
| } |
| .prompt-actions { |
| display: flex; |
| justify-content: flex-end; |
| gap: 9px; |
| margin-top: 22px; |
| } |
| @media (max-width: 1150px) and (min-width: 961px), (max-width: 520px) { |
| .example-pair { |
| grid-template-columns: minmax(0, 1fr); |
| } |
| } |
| @media (max-width: 520px) { |
| .examples-heading > span { |
| width: 100%; |
| margin-left: 24px; |
| } |
| .example-tabs button { |
| padding: 7px; |
| } |
| .prompt-dialog .modal-body { |
| padding: 18px; |
| } |
| .prompt-dialog h2 { |
| font-size: 21px; |
| } |
| .prompt-field textarea { |
| min-height: 260px; |
| font-size: 12px; |
| } |
| } |
|
|
| .camera-status { |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| font-size: 11px; |
| color: var(--green); |
| margin-top: 10px; |
| line-height: 1.6; |
| } |
| .camera-status:empty { |
| display: none; |
| } |
| .camera-error { |
| color: var(--fg-muted); |
| } |
| .camera-error button { |
| font-size: inherit; |
| text-decoration: underline; |
| color: var(--fg); |
| padding: 0 4px; |
| } |
| #camera-help { |
| line-height: 1.6; |
| margin-top: 6px; |
| } |
|
|
| .job-cost { |
| margin: 16px 0; |
| padding: 18px; |
| background: var(--surface-1); |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| } |
| .job-cost-total { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| } |
| .job-cost-total > div { |
| display: flex; |
| align-items: baseline; |
| gap: 12px; |
| } |
| .job-cost-total strong { |
| font-size: 23px; |
| font-variant-numeric: tabular-nums; |
| letter-spacing: -0.5px; |
| } |
| .job-cost-total span { |
| font-size: 12px; |
| color: var(--fg-muted); |
| } |
| .job-cost-breakdown { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px 28px; |
| margin-top: 16px; |
| font-size: 12px; |
| color: var(--fg-muted); |
| } |
| .job-cost-breakdown b { |
| font-weight: 550; |
| color: var(--fg-soft); |
| margin-left: 8px; |
| font-variant-numeric: tabular-nums; |
| } |
| .job-cost p { |
| font-size: 11px; |
| color: var(--fg-faint); |
| line-height: 1.6; |
| margin-top: 14px; |
| } |
| .job-cost p a { |
| text-decoration: underline; |
| white-space: nowrap; |
| } |
| .job-cost .cost-uncertain { |
| color: var(--fg-soft); |
| } |
| @media (max-width: 520px) { |
| .job-cost-total { |
| align-items: flex-start; |
| } |
| .job-cost-total > div { |
| flex-direction: column; |
| gap: 5px; |
| } |
| .job-cost-breakdown { |
| flex-direction: column; |
| gap: 8px; |
| } |
| } |
|
|
| .job-status.partial { |
| background: var(--accent-fill); |
| color: var(--fg-soft); |
| border-color: var(--line); |
| } |
|
|
