| :root { |
| --bg: #f2f6f4; |
| --surface: #ffffff; |
| --surface-soft: #f7faf8; |
| --ink: #14231e; |
| --muted: #65736d; |
| --border: #d7e1dc; |
| --accent: #0d7a62; |
| --accent-dark: #075c49; |
| --accent-soft: #e3f3ed; |
| --blue: #2874b8; |
| --warning: #8b5a00; |
| --danger: #a33131; |
| --shadow: 0 18px 50px rgba(24, 56, 44, 0.09); |
| --radius-xl: 24px; |
| --radius-lg: 18px; |
| --radius-md: 13px; |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| html { color-scheme: light; } |
|
|
| body { |
| margin: 0; |
| min-height: 100vh; |
| color: var(--ink); |
| background: |
| radial-gradient(circle at 4% 2%, rgba(13, 122, 98, 0.09), transparent 28rem), |
| radial-gradient(circle at 95% 5%, rgba(40, 116, 184, 0.08), transparent 24rem), |
| var(--bg); |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| line-height: 1.5; |
| } |
|
|
| button, input { font: inherit; } |
| button { cursor: pointer; } |
|
|
| .site-header { |
| width: min(1240px, calc(100% - 32px)); |
| margin: 20px auto 0; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 20px; |
| } |
|
|
| .brand { display: flex; align-items: center; gap: 13px; } |
| .brand-mark { |
| display: grid; |
| place-items: center; |
| width: 48px; |
| height: 48px; |
| border-radius: 15px; |
| color: #fff; |
| background: linear-gradient(145deg, var(--accent), #15a379); |
| font-size: 26px; |
| box-shadow: 0 10px 25px rgba(13, 122, 98, 0.22); |
| } |
| .eyebrow, .kicker, .step-label { |
| margin: 0; |
| color: var(--accent); |
| font-size: 0.72rem; |
| font-weight: 800; |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| } |
| .brand h1 { margin: 1px 0 0; font-size: 1.18rem; letter-spacing: -0.02em; } |
|
|
| .runtime-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 9px; |
| padding: 9px 13px; |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| background: rgba(255,255,255,0.8); |
| color: var(--muted); |
| font-size: 0.84rem; |
| font-weight: 700; |
| backdrop-filter: blur(8px); |
| } |
| .status-dot { |
| width: 9px; |
| height: 9px; |
| border-radius: 50%; |
| background: #d19719; |
| box-shadow: 0 0 0 4px rgba(209, 151, 25, 0.13); |
| } |
| .runtime-pill.ready .status-dot { background: #15936f; box-shadow: 0 0 0 4px rgba(21,147,111,.13); } |
| .runtime-pill.error .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(163,49,49,.13); } |
|
|
| .page-shell { width: min(1240px, calc(100% - 32px)); margin: 24px auto 46px; } |
|
|
| .hero-card { |
| position: relative; |
| overflow: hidden; |
| display: grid; |
| grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr); |
| gap: 38px; |
| padding: 38px; |
| border: 1px solid rgba(13, 122, 98, 0.12); |
| border-radius: var(--radius-xl); |
| background: linear-gradient(135deg, #ffffff 0%, #f3fbf7 55%, #edf6fb 100%); |
| box-shadow: var(--shadow); |
| } |
| .hero-card::after { |
| content: ""; |
| position: absolute; |
| width: 300px; |
| height: 300px; |
| right: -140px; |
| top: -170px; |
| border: 48px solid rgba(13, 122, 98, 0.055); |
| border-radius: 50%; |
| } |
| .hero-copy { position: relative; z-index: 1; } |
| .hero-copy h2 { |
| max-width: 760px; |
| margin: 8px 0 12px; |
| font-size: clamp(2rem, 4.1vw, 3.35rem); |
| line-height: 1.04; |
| letter-spacing: -0.045em; |
| } |
| .hero-copy > p:not(.kicker) { max-width: 760px; margin: 0; color: var(--muted); font-size: 1.04rem; } |
| .privacy-note { |
| display: inline-flex; |
| align-items: center; |
| gap: 9px; |
| margin-top: 20px; |
| padding: 10px 13px; |
| border-radius: 12px; |
| color: var(--accent-dark); |
| background: var(--accent-soft); |
| font-size: .88rem; |
| font-weight: 700; |
| } |
| .model-facts { |
| position: relative; |
| z-index: 1; |
| align-self: center; |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 12px; |
| margin: 0; |
| } |
| .model-facts div { |
| padding: 18px; |
| border: 1px solid rgba(13,122,98,.13); |
| border-radius: 15px; |
| background: rgba(255,255,255,.82); |
| } |
| .model-facts dt { color: var(--muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; } |
| .model-facts dd { margin: 5px 0 0; font-size: 1.08rem; font-weight: 800; } |
|
|
| .workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; } |
| .panel, .status-card, .info-card { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| background: var(--surface); |
| box-shadow: 0 12px 32px rgba(28, 55, 45, .055); |
| } |
| .panel { min-height: 590px; padding: 24px; } |
| .panel-heading, .status-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } |
| .panel-heading h2, .status-title-row h2, .info-card h2 { margin: 3px 0 0; font-size: 1.15rem; letter-spacing: -.02em; } |
| .text-button { |
| border: 0; |
| padding: 7px 9px; |
| border-radius: 9px; |
| color: var(--accent); |
| background: transparent; |
| font-weight: 750; |
| } |
| .text-button:hover:not(:disabled) { background: var(--accent-soft); } |
| button:disabled { cursor: not-allowed; opacity: .52; } |
|
|
| .drop-zone { |
| min-height: 300px; |
| margin-top: 22px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: 7px; |
| border: 1.5px dashed #a9bdb4; |
| border-radius: 17px; |
| background: var(--surface-soft); |
| text-align: center; |
| transition: border-color .2s, background .2s, transform .2s; |
| } |
| .drop-zone:hover, .drop-zone:focus-visible, .drop-zone.dragging { |
| border-color: var(--accent); |
| background: #eef8f3; |
| transform: translateY(-1px); |
| outline: none; |
| } |
| .drop-zone strong { font-size: 1.08rem; } |
| .drop-zone span { color: var(--muted); } |
| .drop-zone small { margin-top: 8px; color: #87958f; } |
| .upload-icon { |
| display: grid; |
| place-items: center; |
| width: 62px; |
| height: 62px; |
| margin-bottom: 8px; |
| border-radius: 19px; |
| color: var(--accent); |
| background: var(--accent-soft); |
| } |
| .upload-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } |
|
|
| .preview-wrap { |
| margin-top: 22px; |
| overflow: hidden; |
| border: 1px solid var(--border); |
| border-radius: 17px; |
| background: #eef2f0; |
| } |
| .preview-wrap img { display: block; width: 100%; height: 330px; object-fit: contain; background: #eef2f0; } |
| .image-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #fff; } |
| .image-meta strong { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| .image-meta span { color: var(--muted); font-size: .82rem; } |
|
|
| .primary-button { |
| width: 100%; |
| min-height: 49px; |
| margin-top: 18px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| border: 0; |
| border-radius: 13px; |
| color: #fff; |
| background: linear-gradient(135deg, var(--accent), #0d906f); |
| font-weight: 800; |
| box-shadow: 0 10px 22px rgba(13,122,98,.18); |
| transition: transform .16s, box-shadow .16s; |
| } |
| .primary-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 13px 27px rgba(13,122,98,.23); } |
| .button-spinner { width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .75s linear infinite; } |
| @keyframes spin { to { transform: rotate(360deg); } } |
| .inline-message { min-height: 21px; margin: 9px 2px 0; color: var(--muted); font-size: .84rem; } |
| .inline-message.error { color: var(--danger); } |
|
|
| .provider-badge { |
| padding: 6px 9px; |
| border-radius: 999px; |
| color: var(--blue); |
| background: #e7f1fb; |
| font-size: .72rem; |
| font-weight: 850; |
| letter-spacing: .06em; |
| } |
| .empty-result { min-height: 470px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); } |
| .empty-result-icon { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; color: var(--accent); background: var(--accent-soft); font-size: 2rem; } |
| .empty-result h3 { margin: 17px 0 5px; color: var(--ink); } |
| .empty-result p { max-width: 330px; margin: 0; } |
|
|
| .results { margin-top: 20px; } |
| .primary-result { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 18px; |
| padding: 20px; |
| border-radius: 17px; |
| background: linear-gradient(135deg, #effaf5, #eef6fc); |
| } |
| .result-label { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; } |
| .primary-result h3 { margin: 5px 0 0; font-size: clamp(1.55rem, 4vw, 2.2rem); text-transform: capitalize; letter-spacing: -.035em; } |
| .confidence-ring { |
| --confidence: 0deg; |
| flex: 0 0 auto; |
| display: grid; |
| place-items: center; |
| width: 86px; |
| height: 86px; |
| border-radius: 50%; |
| background: conic-gradient(var(--accent) var(--confidence), #dbe8e2 0); |
| position: relative; |
| } |
| .confidence-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; } |
| .confidence-ring span { position: relative; z-index: 1; font-size: 1.03rem; font-weight: 850; } |
| .top-three-wrap { margin-top: 20px; } |
| .top-three-wrap h4, .all-probabilities summary { margin: 0 0 10px; font-size: .9rem; } |
| .top-three { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: rank; } |
| .top-three li { counter-increment: rank; display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; } |
| .top-three li::before { content: counter(rank); display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--accent-dark); background: var(--accent-soft); font-weight: 850; font-size: .78rem; } |
| .top-three .class-name { font-weight: 750; text-transform: capitalize; } |
| .top-three .class-prob { color: var(--muted); font-variant-numeric: tabular-nums; } |
| .all-probabilities { margin-top: 18px; } |
| .all-probabilities summary { cursor: pointer; font-weight: 800; } |
| .probability-list { display: grid; gap: 8px; margin-top: 11px; } |
| .probability-row { display: grid; grid-template-columns: 82px 1fr 54px; align-items: center; gap: 9px; font-size: .78rem; } |
| .probability-row .name { text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; } |
| .bar-track { height: 8px; overflow: hidden; border-radius: 999px; background: #e4ece8; } |
| .bar-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #34a8a0); transition: width .45s ease; } |
| .probability-row .value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } |
| .timing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 19px; } |
| .timing-grid div { padding: 11px; border-radius: 11px; background: var(--surface-soft); } |
| .timing-grid span { display: block; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; } |
| .timing-grid strong { display: block; margin-top: 3px; font-size: .9rem; font-variant-numeric: tabular-nums; } |
|
|
| .status-card { margin-top: 22px; padding: 20px 23px; } |
| .status-title-row strong { color: var(--accent); font-variant-numeric: tabular-nums; } |
| .progress-track { height: 9px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: #e2eae6; } |
| .progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #31a691); transition: width .25s ease; } |
| .status-card > p { margin: 10px 0 0; color: var(--muted); font-size: .87rem; } |
| .status-card.error { border-color: rgba(163,49,49,.3); } |
| .status-card.error .progress-bar { background: var(--danger); } |
|
|
| .information-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; margin-top: 22px; } |
| .info-card { padding: 21px; } |
| .info-card p { margin: 10px 0 0; color: var(--muted); font-size: .9rem; } |
| .class-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; } |
| .class-chip { padding: 6px 9px; border: 1px solid #cfe0d8; border-radius: 999px; color: var(--accent-dark); background: #f0f8f4; font-size: .76rem; font-weight: 750; text-transform: capitalize; } |
| .caution-card { background: #fffdf7; border-color: #eadfbd; } |
| .caution-card h2 { color: var(--warning); } |
|
|
| footer { padding: 22px 16px 34px; text-align: center; color: var(--muted); font-size: .82rem; } |
| .hidden { display: none !important; } |
| .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } |
|
|
| @media (max-width: 900px) { |
| .hero-card { grid-template-columns: 1fr; padding: 28px; } |
| .model-facts { grid-template-columns: repeat(4, 1fr); } |
| .workspace { grid-template-columns: 1fr; } |
| .panel { min-height: unset; } |
| .information-grid { grid-template-columns: 1fr; } |
| } |
|
|
| @media (max-width: 650px) { |
| .site-header { align-items: flex-start; } |
| .runtime-pill { max-width: 150px; } |
| .runtime-pill span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| .page-shell, .site-header { width: min(100% - 20px, 1240px); } |
| .hero-card { padding: 23px 20px; } |
| .hero-copy h2 { font-size: 2.05rem; } |
| .model-facts { grid-template-columns: 1fr 1fr; } |
| .panel { padding: 19px; } |
| .drop-zone { min-height: 245px; } |
| .preview-wrap img { height: 270px; } |
| .primary-result { align-items: flex-start; } |
| .confidence-ring { width: 75px; height: 75px; } |
| .probability-row { grid-template-columns: 70px 1fr 48px; } |
| .timing-grid { grid-template-columns: 1fr; } |
| } |
|
|
