| :root { color-scheme: dark; } |
| html, body, gradio-app, .gradio-container { background: #101217 !important; color: #f4f5f7 !important; } |
| .gradio-container { |
| --body-background-fill: #101217; --body-text-color: #f4f5f7; |
| --body-text-color-subdued: #b8bdc9; --block-background-fill: #171a21; |
| --block-border-color: #303644; --block-label-text-color: #c5cad5; |
| --block-title-text-color: #f4f5f7; --input-background-fill: #101217; |
| --input-border-color: #3c4354; --input-text-color: #f4f5f7; |
| --button-secondary-background-fill: #202737; --button-secondary-text-color: #f4f5f7; |
| --button-secondary-border-color: #576179; --border-color-primary: #303644; |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; |
| width: 100% !important; min-width: 0 !important; max-width: 1280px !important; padding: 32px 24px 24px !important; margin: 0 auto !important; |
| } |
| .gradio-container > .main { width: 100% !important; min-width: 0 !important; } |
| .hero { text-align: center; padding: 24px 0 40px; } |
| .eyebrow { color: #9cacd0; font-size: 10px; letter-spacing: .24em; margin-bottom: 12px; } |
| .hero h1 { font-size: clamp(3.5rem, 9vw, 5rem); font-weight: 300; letter-spacing: -.04em; margin: 0; line-height: 1.1; } |
| .hero p { color: #b8bdc9; font-size: 17px; margin: 14px 0 8px; } |
| .hero-note { color: #81899c; font-size: 13px; } |
| #workspace { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 5.5fr); gap: 24px; align-items: stretch; } |
| #workspace > .column { min-width: 0 !important; box-sizing: border-box; background: #171a21; border: 1px solid #303644; border-radius: 20px; padding: 24px !important; } |
| .section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } |
| .section-title span { color: #9cacd0; font-size: 11px; border: 1px solid #3c4354; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; } |
| .section-title h2 { font-size: 18px; font-weight: 450; margin: 0; } |
| .hint, .hint p { color: #9da5b6 !important; font-size: 12px !important; line-height: 1.6; } |
| button { border-radius: 999px !important; transition: background .15s, border-color .15s; } |
| #workspace button { font-size: 13px; } |
| #assess { background: #b8c9ff !important; color: #101217 !important; border: 1px solid #b8c9ff !important; font-weight: 600; } |
| #assess:hover { background: #d1dcff !important; } |
| button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #b8c9ff !important; outline-offset: 3px; } |
| .score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 2px 0 14px; } |
| .score-card { background: #101217; border: 1px solid #303644; border-radius: 14px; padding: 15px 10px; text-align: center; } |
| .score-card span { display: block; color: #b8bdc9; font-size: 11px; margin-bottom: 10px; } |
| .score-card strong { display: block; color: #d4dfff; font-size: 28px; font-weight: 350; font-variant-numeric: tabular-nums; } |
| .score-card small { color: #81899c; font-size: 10px; } |
| .transcript { padding: 14px 16px; border-left: 2px solid #9cacd0; background: #101217; border-radius: 0 10px 10px 0; margin-bottom: 10px; } |
| .transcript span { color: #9da5b6; font-size: 11px; } |
| .transcript p { color: #f4f5f7; font-size: 15px; line-height: 1.6; margin: 6px 0 0; } |
| .page-footer { padding: 26px 0 4px; color: #81899c; text-align: center; font-size: 11px; line-height: 1.8; } |
| .page-footer span { display: block; } |
| @media (max-width: 1000px) { |
| #workspace { grid-template-columns: minmax(0, 1fr); } |
| } |
| @media (max-width: 640px) { |
| .gradio-container { padding: 20px 12px !important; } |
| .hero { padding: 12px 0 28px; } |
| #workspace { flex-direction: column; } |
| #workspace > .column { padding: 18px !important; min-width: 0 !important; width: 100%; } |
| .score-grid { grid-template-columns: repeat(2, 1fr); } |
| } |
|
|
| .assessment-progress { margin-bottom: 14px; } |
| .step-caption { color: #b8bdc9; font-size: 12px; margin-bottom: 12px; } |
| .assessment-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } |
| .assessment-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 4px; row-gap: 8px; min-width: 0; padding: 10px 4px; border: 1px solid #303644; border-radius: 10px; color: #81899c; font-size: 12px; line-height: 1.4; } |
| .assessment-step > span:last-of-type { min-width: 0; white-space: nowrap; } |
| .assessment-steps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } |
| #assessment-stages { min-width: 0; max-width: 100%; container-type: inline-size; } |
| .assessment-progress, .assessment-steps { min-width: 0; width: 100%; box-sizing: border-box; } |
| .assessment-step { box-sizing: border-box; } |
| .step-number { display: inline-grid; place-items: center; font-size: inherit; line-height: inherit; } |
| .assessment-step.active { color: #d4dfff; border-color: #9cacd0; } |
| .assessment-step.done { color: #b8c9ff; } |
| .assessment-step.failed { color: #f0a5a5; } |
| .step-track { grid-column: 1 / -1; height: 3px; background: #303644; border-radius: 3px; overflow: hidden; margin-top: 6px; } |
| .step-track i { display: block; height: 100%; width: 0; background: #b8c9ff; } |
| .done .step-track i { width: 100%; } |
| .active .step-track i { width: 35%; animation: stage-motion 1.4s ease-in-out infinite; } |
| @keyframes stage-motion { from { transform: translateX(-110%); } to { transform: translateX(390%); } } |
| @media (prefers-reduced-motion: reduce) { .active .step-track i { animation: none; width: 100%; opacity: .6; } } |
|
|
| |
| #assessment-stages .assessment-step { font-size: min(12px, 2.05cqi); column-gap: min(4px, .6cqi); padding-inline: min(4px, .6cqi); } |
|
|
| |
| #word-scores, #status { |
| box-sizing: border-box; |
| width: calc(100% - 24px) !important; |
| min-width: 0 !important; |
| max-width: calc(100% - 24px); |
| margin-inline: 12px !important; |
| } |
|
|
