| |
| .sidebar { |
| background: var(--surface-0); |
| color: var(--fg-muted); |
| border-color: var(--line); |
| } |
| .sidebar .brand { |
| color: var(--fg); |
| } |
| .sidebar .brand-sub { |
| color: var(--fg-muted); |
| } |
| .sidebar nav { |
| margin-top: 30px; |
| } |
| .sidebar nav + nav { |
| margin-top: 12px; |
| } |
| .sidebar nav button.active { |
| background: var(--surface-2); |
| color: var(--fg); |
| box-shadow: none; |
| } |
| .sidebar nav button:hover, |
| .sidebar nav a:hover { |
| background: var(--surface-1); |
| color: var(--fg); |
| } |
| .sidebar .shortcut, |
| .sidebar .nav-count { |
| border-color: var(--line); |
| background: var(--surface-0); |
| color: var(--fg-faint); |
| } |
| .sidebar .source-link { |
| color: var(--fg-muted); |
| } |
| .wizard { |
| max-width: 760px; |
| margin: 0 auto; |
| } |
| .wizard .page-heading { |
| margin-bottom: 32px; |
| } |
| .wizard h1 { |
| font-size: 27px; |
| font-weight: 600; |
| } |
| .wizard .page-heading p { |
| margin-top: 6px; |
| color: var(--fg-muted); |
| } |
| .wizard-steps { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 12px; |
| margin-bottom: 40px; |
| } |
| .wizard-steps button { |
| display: flex; |
| align-items: center; |
| gap: 9px; |
| padding: 0 0 16px; |
| border-bottom: 2px solid var(--line); |
| text-align: left; |
| color: var(--fg-muted); |
| font-size: 13px; |
| font-weight: 500; |
| } |
| .wizard-steps button > span { |
| width: 23px; |
| height: 23px; |
| display: grid; |
| place-items: center; |
| border-radius: 50%; |
| border: 1px solid var(--line-strong); |
| font-size: 11px; |
| flex-shrink: 0; |
| } |
| .wizard-steps button.current { |
| color: var(--fg); |
| border-color: var(--primary); |
| } |
| .wizard-steps .current > span { |
| background: var(--primary); |
| color: var(--primary-fg); |
| border-color: var(--primary); |
| } |
| .wizard-steps .complete > span { |
| color: var(--green); |
| border-color: var(--line-strong); |
| } |
| .wizard-steps button:disabled { |
| opacity: 0.55; |
| } |
| .step-intro { |
| margin-bottom: 22px; |
| } |
| .step-intro > span { |
| color: var(--fg-faint); |
| font-size: 10px; |
| font-weight: 600; |
| letter-spacing: 1.3px; |
| } |
| .step-intro h2 { |
| margin-top: 9px; |
| font-size: 21px; |
| font-weight: 570; |
| letter-spacing: -0.5px; |
| outline: none; |
| } |
| .step-intro p { |
| font-size: 13px; |
| color: var(--fg-muted); |
| line-height: 1.6; |
| margin-top: 8px; |
| } |
| .wizard .step-card { |
| padding: 26px; |
| border-radius: 12px; |
| box-shadow: none; |
| } |
| .wizard .field-help { |
| line-height: 1.6; |
| } |
| .wizard .step-card > .field-help:last-child { |
| margin-bottom: 0; |
| } |
| .wizard-actions { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 16px; |
| margin: 24px 0 48px; |
| } |
| .wizard-actions .button { |
| min-height: 42px; |
| padding: 0 18px; |
| } |
| .quiet-note { |
| font-size: 12px; |
| color: var(--fg-muted); |
| line-height: 1.6; |
| } |
| .annotation-choices { |
| display: flex; |
| flex-direction: column; |
| gap: 0; |
| } |
| .annotation-choice { |
| display: flex; |
| gap: 14px; |
| align-items: center; |
| border-bottom: 1px solid var(--line-subtle); |
| padding: 17px 0; |
| } |
| .annotation-choice:first-child { |
| padding-top: 0; |
| } |
| .annotation-choice:last-child { |
| border: 0; |
| padding-bottom: 0; |
| } |
| .annotation-choice label { |
| display: flex; |
| align-items: flex-start; |
| gap: 14px; |
| flex: 1; |
| cursor: pointer; |
| min-width: 0; |
| } |
| .annotation-choice input { |
| margin: 2px 0 0; |
| } |
| .annotation-choice strong { |
| display: block; |
| font-size: 13px; |
| font-weight: 560; |
| } |
| .annotation-choice small { |
| display: block; |
| color: var(--fg-muted); |
| font-size: 12px; |
| line-height: 1.6; |
| margin-top: 3px; |
| } |
| .prompt-action { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 9px 0 9px 6px; |
| color: var(--fg-muted); |
| font-size: 11px; |
| white-space: nowrap; |
| } |
| .prompt-action:hover, |
| .text-action:hover { |
| color: var(--fg); |
| text-decoration: underline; |
| } |
| .dependency-hint { |
| margin-top: 20px; |
| } |
| .category-heading { |
| margin-bottom: 18px; |
| } |
| .category-heading h3 { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 14px; |
| font-weight: 600; |
| margin: 0 0 4px; |
| } |
| .category-heading .field-help { |
| margin: 0; |
| } |
| .video-category { |
| margin-top: 16px; |
| } |
| .video-category .annotation-choice { |
| padding: 0; |
| border: 0; |
| } |
| .video-settings { |
| margin-top: 16px; |
| } |
| .video-time-warning { |
| color: var(--warning, #b45309); |
| margin-top: 8px; |
| } |
| .text-action { |
| display: inline-block; |
| color: var(--fg-muted); |
| font-size: 12px; |
| padding: 0; |
| text-decoration: underline; |
| text-underline-offset: 3px; |
| } |
| .dependency-hint .text-action { |
| margin-left: 5px; |
| font-size: inherit; |
| } |
| .progressive-details { |
| border-top: 1px solid var(--line); |
| margin-top: 24px; |
| padding-top: 17px; |
| } |
| .progressive-details > summary { |
| list-style: none; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| cursor: pointer; |
| font-size: 12px; |
| font-weight: 500; |
| color: var(--fg-soft); |
| padding: 3px 0; |
| } |
| .progressive-details > summary::-webkit-details-marker { |
| display: none; |
| } |
| .progressive-details[open] > summary > svg { |
| transform: rotate(180deg); |
| } |
| .progressive-details[open] > summary { |
| margin-bottom: 19px; |
| } |
| .progressive-details > summary:focus-visible { |
| outline: 2px solid #66aafc; |
| outline-offset: 5px; |
| } |
| .examples-disclosure .annotation-examples { |
| border: 0; |
| padding-top: 0; |
| margin-top: 0; |
| } |
| .model-overview { |
| display: flex; |
| justify-content: space-between; |
| gap: 12px; |
| color: var(--fg-muted); |
| font-size: 12px; |
| line-height: 1.6; |
| margin-top: 20px; |
| } |
| .wizard .model-description { |
| color: var(--fg-muted); |
| } |
| .wizard .model-specs { |
| margin-top: 0; |
| } |
| .review-layout { |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| } |
| .run-recap { |
| display: flex; |
| flex-direction: column; |
| gap: 15px; |
| } |
| .run-recap > div { |
| display: grid; |
| grid-template-columns: 88px minmax(0, 1fr) auto; |
| gap: 12px; |
| font-size: 12px; |
| line-height: 1.6; |
| align-items: baseline; |
| } |
| .run-recap > div > span { |
| color: var(--fg-muted); |
| } |
| .run-recap strong { |
| font-weight: 500; |
| overflow-wrap: anywhere; |
| min-width: 0; |
| } |
| .wizard h3 { |
| font-size: 14px; |
| font-weight: 600; |
| margin: 0 0 19px; |
| } |
| .wizard .output-options { |
| margin-top: 0; |
| } |
| .wizard .output-options label { |
| padding: 14px; |
| } |
| .wizard .output-options label strong { |
| font-weight: 550; |
| } |
| .wizard .output-options label small { |
| font-size: 12px; |
| } |
| .estimate-heading { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
| .estimate-heading > span { |
| color: var(--fg-muted); |
| font-size: 11px; |
| } |
| .wizard .review-cost .price { |
| font-size: 32px; |
| margin-top: 0; |
| } |
| .wizard .review-cost .price-description { |
| margin-bottom: 0; |
| } |
| .wizard .cost-breakdown { |
| margin-top: 19px; |
| margin-bottom: 24px; |
| padding-top: 14px; |
| } |
| .wizard .cost-lines { |
| margin-top: 0; |
| } |
| .wizard .cost-lines > div { |
| justify-content: space-between; |
| } |
| .wizard .currency-input { |
| max-width: 180px; |
| } |
| .wizard .microcopy { |
| font-size: 12px; |
| line-height: 1.7; |
| } |
| .wizard .summary-fineprint { |
| font-size: 11px; |
| } |
| .wizard .launch-area .button { |
| margin-top: 20px; |
| font-size: 13px; |
| min-height: 43px; |
| } |
| .refresh-quote { |
| margin-bottom: 24px; |
| padding: 16px; |
| background: var(--surface-1); |
| border-radius: 8px; |
| } |
| .refresh-quote p { |
| font-size: 13px; |
| line-height: 1.6; |
| color: var(--fg-muted); |
| margin-bottom: 12px; |
| } |
| .visibility-control { |
| border: 0; |
| padding: 0; |
| margin: 24px 0 0; |
| } |
| .visibility-control legend { |
| font-size: 12px; |
| font-weight: 550; |
| padding: 0; |
| margin-bottom: 12px; |
| } |
| .visibility-options { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 12px; |
| } |
| .visibility-options label { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| font-size: 12px; |
| padding: 13px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| cursor: pointer; |
| } |
| .visibility-options label.chosen { |
| border-color: var(--fg-muted); |
| background: var(--surface-1); |
| } |
| .visibility-options input { |
| margin: 0; |
| } |
| .visibility-options strong { |
| display: block; |
| font-size: 12px; |
| font-weight: 550; |
| } |
| .visibility-options small { |
| display: block; |
| color: var(--fg-muted); |
| font-size: 11px; |
| margin-top: 3px; |
| } |
| .sr-only { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| white-space: nowrap; |
| border: 0; |
| } |
| @media (max-width: 600px) { |
| .wizard-steps { |
| gap: 7px; |
| margin-bottom: 30px; |
| } |
| .wizard-steps button { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 8px; |
| font-size: 11px; |
| padding-bottom: 12px; |
| } |
| .wizard .step-card { |
| padding: 19px; |
| } |
| .step-intro h2 { |
| font-size: 20px; |
| } |
| .wizard .page-heading { |
| margin-bottom: 26px; |
| } |
| .annotation-choice { |
| flex-wrap: wrap; |
| gap: 0; |
| } |
| .annotation-choice label { |
| flex-basis: 100%; |
| } |
| .prompt-action { |
| margin-left: 30px; |
| padding: 7px 0 0; |
| } |
| .model-overview { |
| flex-direction: column; |
| gap: 4px; |
| } |
| .run-recap > div { |
| grid-template-columns: 71px minmax(0, 1fr) auto; |
| gap: 7px; |
| font-size: 11px; |
| } |
| .wizard-actions { |
| gap: 12px; |
| } |
| .quiet-note { |
| max-width: 155px; |
| font-size: 11px; |
| } |
| .visibility-options { |
| gap: 8px; |
| } |
| .visibility-options label { |
| align-items: flex-start; |
| padding: 11px; |
| } |
| .visibility-options input { |
| margin-top: 2px; |
| } |
| } |
|
|
