Spaces:
Running
Running
| /* 首次引导（契约 7C）——Warm Paper 全屏向导：衬线大标题 + 圆点进度 + 大量留白 */ | |
| .ob-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 80; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 48px 24px; | |
| background: var(--bg); | |
| animation: ob-fade 200ms var(--ease); | |
| } | |
| @keyframes ob-fade { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes ob-rise { | |
| from { | |
| opacity: 0; | |
| transform: translateY(6px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| } | |
| @keyframes ob-rotate { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* 右上角「跳过引导」：文字按钮，安静但一直在 */ | |
| .ob-skip { | |
| position: absolute; | |
| top: 18px; | |
| right: 22px; | |
| height: 30px; | |
| padding: 0 12px; | |
| border: none; | |
| border-radius: var(--radius-chip); | |
| background: transparent; | |
| color: var(--text-tertiary); | |
| font-family: inherit; | |
| font-size: 12.5px; | |
| cursor: pointer; | |
| transition: | |
| background-color var(--dur) var(--ease), | |
| color var(--dur) var(--ease); | |
| } | |
| .ob-skip:hover { | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| } | |
| .ob-card { | |
| width: min(620px, 100%); | |
| max-height: 100%; | |
| overflow-y: auto; | |
| padding: 44px 48px 40px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-float); | |
| background: var(--bg); | |
| box-shadow: var(--shadow-float); | |
| animation: ob-rise 220ms var(--ease); | |
| } | |
| .ob-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 26px; | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| letter-spacing: 0.01em; | |
| } | |
| /* ── 圆点进度：做完的实心浅陶土，当前的深陶土，未到的描边 ───────── */ | |
| .ob-dots { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 24px; | |
| } | |
| .ob-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| transition: | |
| background-color var(--dur) var(--ease), | |
| border-color var(--dur) var(--ease); | |
| } | |
| .ob-dot.is-done { | |
| background: var(--accent-soft); | |
| border-color: var(--accent-soft); | |
| } | |
| .ob-dot.is-active { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| /* ── 标题与正文三级字阶 ───────────────────────────────────────── */ | |
| .ob-title { | |
| margin: 0 0 10px; | |
| font-family: var(--font-serif); | |
| font-size: 27px; | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| line-height: 1.35; | |
| } | |
| .ob-sub { | |
| margin: 0 0 28px; | |
| color: var(--text-secondary); | |
| font-size: 14.5px; | |
| line-height: 1.7; | |
| } | |
| .ob-lede { | |
| margin: 0 0 4px; | |
| color: var(--text); | |
| font-size: 14.5px; | |
| line-height: 1.75; | |
| } | |
| .ob-lede a { | |
| color: var(--accent); | |
| cursor: pointer; | |
| text-decoration: underline; | |
| text-underline-offset: 3px; | |
| } | |
| .ob-hint { | |
| margin: 10px 0 0; | |
| color: var(--text-tertiary); | |
| font-size: 12.5px; | |
| line-height: 1.65; | |
| } | |
| .ob-loading { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin: 0; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .ob-spin { | |
| color: var(--accent); | |
| animation: ob-rotate 900ms linear infinite; | |
| } | |
| /* ── 第一步：已就绪 + 模型清单 ────────────────────────────────── */ | |
| .ob-ready { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 0 0 16px; | |
| color: var(--success); | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .ob-models { | |
| list-style: none; | |
| margin: 0 0 8px; | |
| padding: 0; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| background: var(--bg-elevated); | |
| overflow: hidden; | |
| } | |
| .ob-models li { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 11px 18px; | |
| } | |
| .ob-models li + li { | |
| border-top: 1px solid var(--border); | |
| } | |
| .ob-model-name { | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| color: var(--text); | |
| } | |
| .ob-model-meta { | |
| color: var(--text-tertiary); | |
| font-size: 12.5px; | |
| font-variant-numeric: tabular-nums; | |
| white-space: nowrap; | |
| } | |
| /* ── 第二步：两个大选择 ───────────────────────────────────────── */ | |
| .ob-choices { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .ob-choice { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| width: 100%; | |
| padding: 18px 20px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| font-family: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: | |
| border-color var(--dur) var(--ease), | |
| background-color var(--dur) var(--ease), | |
| transform var(--dur) var(--ease); | |
| } | |
| .ob-choice:hover { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| transform: translateY(-1px); | |
| } | |
| .ob-choice-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .ob-choice-title { | |
| font-family: var(--font-serif); | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .ob-choice-desc { | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| line-height: 1.6; | |
| } | |
| .ob-choice svg { | |
| flex: none; | |
| color: var(--text-tertiary); | |
| } | |
| /* ── 第三步：模型下拉 + 输入 + 回显 ───────────────────────────── */ | |
| .ob-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| margin-bottom: 14px; | |
| } | |
| .ob-field > span { | |
| color: var(--text-tertiary); | |
| font-size: 12.5px; | |
| } | |
| .ob-select { | |
| height: 38px; | |
| padding: 0 12px; | |
| border: none; | |
| border-radius: var(--radius-control); | |
| background: var(--bg-sunken); | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 13.5px; | |
| cursor: pointer; | |
| transition: box-shadow var(--dur) var(--ease); | |
| } | |
| .ob-select:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 1px var(--accent); | |
| } | |
| .ob-textarea { | |
| width: 100%; | |
| padding: 12px 14px; | |
| border: none; | |
| border-radius: var(--radius-control); | |
| background: var(--bg-sunken); | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 14.5px; | |
| line-height: 1.7; | |
| resize: none; | |
| user-select: text; | |
| cursor: text; | |
| transition: box-shadow var(--dur) var(--ease); | |
| } | |
| .ob-textarea:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 1px var(--accent); | |
| } | |
| .ob-transcript { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .ob-bubble { | |
| margin: 0; | |
| padding: 12px 16px; | |
| border-radius: var(--radius-card); | |
| font-size: 14px; | |
| line-height: 1.7; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| user-select: text; | |
| animation: ob-rise 200ms var(--ease); | |
| } | |
| .ob-bubble.is-user { | |
| align-self: flex-end; | |
| max-width: 85%; | |
| background: var(--accent-soft); | |
| } | |
| .ob-bubble.is-assistant { | |
| align-self: flex-start; | |
| max-width: 92%; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| } | |
| /* ── 完成页与公共动作行 ───────────────────────────────────────── */ | |
| .ob-done { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 4px; | |
| color: var(--accent); | |
| } | |
| .ob-done .ob-title { | |
| margin-top: 14px; | |
| color: var(--text); | |
| } | |
| .ob-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-top: 28px; | |
| flex-wrap: wrap; | |
| } | |
| .ob-actions .btn-primary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .ob-actions .btn-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| } | |