YoVinchen
c3bad0f186
Some checks failed
verify / verify (push) Has been cancelled
Expose the verified synthetic retrieval path through a typed React client and a non-root Nginx edge while keeping database credentials and data-network reachability out of the browser tier. A fixed-origin gateway preserves request boundaries and now closes upstream streams even when downstream disconnects before body iteration. The deployment ADR and runbooks record the four-network topology and its accepted Web edge-egress risk. Constraint: The previously exposed Bailian key must be revoked and no live provider credential may enter Git, images, logs, or the browser. Rejected: Connect Web directly to the data network | expands lateral reach to PostgreSQL. Rejected: Publish the database-aware API on the edge network | gives a credential-bearing process a public default route. Rejected: Buffer streaming responses in either proxy | prevents incremental chat delivery in the future. Confidence: high Scope-risk: moderate Reversibility: clean Directive: Do not mark Stage 1 or Stage 2 complete until the rotated-key live smoke and remaining stage gates pass. Tested: make verify; 65 backend tests; 14 frontend tests; Docker image build; container health and isolation probes; real HTTP demo/status/search/docs/OpenAPI checks. Not-tested: Live Bailian models, real document ingestion, business chat SSE generation, and final browser screenshot automation because the browser skill runtime was unavailable.
1838 lines
30 KiB
CSS
1838 lines
30 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
color: #18312f;
|
|
background: #f3f5f0;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
--ink: #18312f;
|
|
--ink-muted: #647570;
|
|
--ink-soft: #87928e;
|
|
--forest-950: #082b28;
|
|
--forest-900: #0b3632;
|
|
--forest-800: #134b45;
|
|
--forest-700: #1c6359;
|
|
--forest-600: #28776a;
|
|
--sage-100: #dfece5;
|
|
--sage-50: #eef5f0;
|
|
--sand-500: #b9783b;
|
|
--sand-200: #e6c7a4;
|
|
--sand-100: #f4e8d8;
|
|
--paper: #fffefa;
|
|
--canvas: #f3f5f0;
|
|
--line: #dbe2dc;
|
|
--line-strong: #c8d2ca;
|
|
--danger: #a53c31;
|
|
--danger-soft: #fae9e6;
|
|
--warning: #9a681d;
|
|
--warning-soft: #fbf1dc;
|
|
--shadow-sm: 0 1px 2px rgb(22 49 45 / 5%);
|
|
--shadow-md: 0 18px 48px rgb(20 49 45 / 8%);
|
|
--font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace;
|
|
--radius-lg: 18px;
|
|
--radius-md: 12px;
|
|
--radius-sm: 8px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
min-width: 320px;
|
|
min-height: 100%;
|
|
background: var(--canvas);
|
|
}
|
|
|
|
body {
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
background:
|
|
radial-gradient(circle at 91% 8%, rgb(204 223 212 / 48%), transparent 27rem), var(--canvas);
|
|
}
|
|
|
|
button,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
button,
|
|
a,
|
|
select {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 3px solid #28776a;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
button:disabled,
|
|
select:disabled,
|
|
textarea:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.skip-link {
|
|
position: fixed;
|
|
z-index: 100;
|
|
top: 10px;
|
|
left: 10px;
|
|
padding: 10px 14px;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
background: var(--forest-800);
|
|
border-radius: 8px;
|
|
transform: translateY(-150%);
|
|
transition: transform 150ms ease;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.app-shell {
|
|
display: grid;
|
|
grid-template-columns: 248px minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
position: sticky;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
padding: 28px 20px 22px;
|
|
color: #eaf4ee;
|
|
background: linear-gradient(160deg, rgb(20 75 69 / 32%), transparent 40%), var(--forest-950);
|
|
border-right: 1px solid rgb(255 255 255 / 8%);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.brand__mark {
|
|
position: relative;
|
|
flex: 0 0 42px;
|
|
width: 42px;
|
|
height: 42px;
|
|
overflow: hidden;
|
|
background: #e6c190;
|
|
border: 1px solid rgb(255 255 255 / 24%);
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.brand__ridge {
|
|
position: absolute;
|
|
right: -7px;
|
|
bottom: -12px;
|
|
width: 50px;
|
|
height: 34px;
|
|
background: var(--forest-800);
|
|
transform: rotate(34deg);
|
|
}
|
|
|
|
.brand__ridge--back {
|
|
right: -22px;
|
|
bottom: 2px;
|
|
width: 45px;
|
|
height: 25px;
|
|
background: #c68a4d;
|
|
transform: rotate(43deg);
|
|
}
|
|
|
|
.brand strong {
|
|
display: block;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.brand > div:last-child span {
|
|
display: block;
|
|
margin-top: 2px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: #9bb7ad;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.nav-list {
|
|
display: grid;
|
|
gap: 7px;
|
|
margin-top: 44px;
|
|
}
|
|
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 48px;
|
|
gap: 12px;
|
|
padding: 0 14px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #a7c0b7;
|
|
text-decoration: none;
|
|
border: 1px solid transparent;
|
|
border-radius: 10px;
|
|
transition:
|
|
color 150ms ease,
|
|
background 150ms ease,
|
|
border-color 150ms ease;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: #fff;
|
|
background: rgb(255 255 255 / 5%);
|
|
}
|
|
|
|
.nav-link--active {
|
|
color: #fff;
|
|
background: rgb(230 193 144 / 11%);
|
|
border-color: rgb(230 193 144 / 18%);
|
|
}
|
|
|
|
.nav-link--active .icon {
|
|
color: #e8bd82;
|
|
}
|
|
|
|
.sidebar__note {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
margin-top: auto;
|
|
padding: 15px 13px;
|
|
color: #abc3ba;
|
|
background: rgb(255 255 255 / 4%);
|
|
border: 1px solid rgb(255 255 255 / 8%);
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.sidebar__note .icon {
|
|
flex: 0 0 auto;
|
|
margin-top: 2px;
|
|
color: #dfb981;
|
|
}
|
|
|
|
.sidebar__note strong,
|
|
.sidebar__note span {
|
|
display: block;
|
|
}
|
|
|
|
.sidebar__note strong {
|
|
font-size: 12px;
|
|
color: #e4efe9;
|
|
}
|
|
|
|
.sidebar__note span {
|
|
margin-top: 4px;
|
|
font-size: 11px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.app-main {
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mobile-header {
|
|
display: none;
|
|
}
|
|
|
|
.page {
|
|
width: 100%;
|
|
max-width: 1540px;
|
|
min-width: 0;
|
|
margin: 0 auto;
|
|
padding: 44px clamp(28px, 3.5vw, 58px) 56px;
|
|
}
|
|
|
|
.page-stack {
|
|
display: grid;
|
|
gap: 24px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 238px;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 36px;
|
|
overflow: hidden;
|
|
padding: 36px 40px;
|
|
color: #f5faf6;
|
|
background: linear-gradient(110deg, rgb(5 37 34 / 96%), rgb(15 72 65 / 92%)), var(--forest-900);
|
|
border: 1px solid rgb(8 43 40 / 60%);
|
|
border-radius: 22px;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.hero::before,
|
|
.hero::after {
|
|
position: absolute;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero::before {
|
|
inset: 0;
|
|
opacity: 0.13;
|
|
background-image:
|
|
linear-gradient(125deg, transparent 42%, #e7c18e 42.5%, transparent 43%),
|
|
linear-gradient(147deg, transparent 59%, #e7c18e 59.5%, transparent 60%);
|
|
}
|
|
|
|
.hero::after {
|
|
right: -82px;
|
|
bottom: -180px;
|
|
width: 520px;
|
|
height: 360px;
|
|
border: 1px solid rgb(226 194 150 / 20%);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 0 35px rgb(226 194 150 / 4%),
|
|
0 0 0 70px rgb(226 194 150 / 3%);
|
|
}
|
|
|
|
.hero__copy {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 790px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mode-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 34px;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #ffe3ba;
|
|
background: rgb(226 185 127 / 11%);
|
|
border: 1px solid rgb(234 195 141 / 30%);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.mode-badge__dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
background: #e8b976;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 4px rgb(232 185 118 / 12%);
|
|
}
|
|
|
|
.eyebrow {
|
|
display: block;
|
|
margin-bottom: 9px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: var(--sand-500);
|
|
letter-spacing: 0.14em;
|
|
}
|
|
|
|
.hero .eyebrow,
|
|
.system-hero .eyebrow {
|
|
color: #d9ab6e;
|
|
}
|
|
|
|
.hero h1,
|
|
.system-hero h1 {
|
|
margin-bottom: 14px;
|
|
font-size: clamp(30px, 3.2vw, 47px);
|
|
line-height: 1.16;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
.hero__lead {
|
|
max-width: 720px;
|
|
margin-bottom: 0;
|
|
font-size: 15px;
|
|
line-height: 1.85;
|
|
color: #c5d8d0;
|
|
}
|
|
|
|
.hero__seal {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
flex: 0 0 142px;
|
|
justify-items: center;
|
|
gap: 9px;
|
|
}
|
|
|
|
.hero__seal-ring {
|
|
display: grid;
|
|
width: 112px;
|
|
height: 112px;
|
|
place-content: center;
|
|
text-align: center;
|
|
border: 1px solid rgb(232 189 131 / 62%);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
inset 0 0 0 6px rgb(232 189 131 / 7%),
|
|
0 0 0 1px rgb(232 189 131 / 10%);
|
|
}
|
|
|
|
.hero__seal-ring span {
|
|
font-family: var(--font-mono);
|
|
font-size: 25px;
|
|
color: #f0ca95;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.hero__seal-ring small {
|
|
margin-top: 3px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: #98b7ab;
|
|
letter-spacing: 0.2em;
|
|
}
|
|
|
|
.hero__coordinates {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: #8ca99f;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.safety-notice {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
min-height: 52px;
|
|
padding: 10px 17px;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: #6c604d;
|
|
background: #f8f2e8;
|
|
border: 1px solid #e9dbc7;
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.safety-notice strong {
|
|
flex: 0 0 auto;
|
|
padding-right: 14px;
|
|
color: #895d2f;
|
|
border-right: 1px solid #ddcbb3;
|
|
}
|
|
|
|
.status-overview {
|
|
display: grid;
|
|
grid-template-columns: minmax(290px, 1.15fr) minmax(420px, 1fr);
|
|
gap: 16px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.status-callout {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 17px 19px;
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.status-callout__icon {
|
|
display: grid;
|
|
flex: 0 0 38px;
|
|
width: 38px;
|
|
height: 38px;
|
|
place-items: center;
|
|
color: var(--forest-700);
|
|
background: var(--sage-50);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.status-callout h2 {
|
|
margin-bottom: 3px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.status-callout p {
|
|
margin-bottom: 0;
|
|
font-size: 11px;
|
|
line-height: 1.55;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.status-retry {
|
|
min-height: 44px;
|
|
padding: 0 12px;
|
|
margin-top: 9px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--forest-700);
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 1px solid currentcolor;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.status-retry:disabled {
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.status-callout__title-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.status-callout--ready {
|
|
border-color: #c9ded2;
|
|
}
|
|
|
|
.status-callout--ready .status-callout__icon {
|
|
color: #19715f;
|
|
background: #e1f2e9;
|
|
}
|
|
|
|
.status-callout--warning {
|
|
border-color: #ead9ba;
|
|
}
|
|
|
|
.status-callout--warning .status-callout__icon {
|
|
color: var(--warning);
|
|
background: var(--warning-soft);
|
|
}
|
|
|
|
.status-callout--danger {
|
|
border-color: #edcbc5;
|
|
}
|
|
|
|
.status-callout--danger .status-callout__icon {
|
|
color: var(--danger);
|
|
background: var(--danger-soft);
|
|
}
|
|
|
|
.status-sync {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: var(--forest-600);
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.metric-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.metric-card {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 14px;
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.metric-card__icon {
|
|
display: grid;
|
|
flex: 0 0 34px;
|
|
width: 34px;
|
|
height: 34px;
|
|
place-items: center;
|
|
color: var(--forest-600);
|
|
background: #edf3ef;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.metric-card strong,
|
|
.metric-card span {
|
|
display: block;
|
|
}
|
|
|
|
.metric-card strong {
|
|
font-family: var(--font-mono);
|
|
font-size: 18px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.metric-card span {
|
|
margin-top: 1px;
|
|
font-size: 10px;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.workspace-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(340px, 0.82fr) minmax(430px, 1.18fr);
|
|
gap: 20px;
|
|
min-width: 0;
|
|
align-items: start;
|
|
}
|
|
|
|
.search-panel,
|
|
.results-panel,
|
|
.system-section {
|
|
min-width: 0;
|
|
padding: 25px;
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.section-heading {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.section-heading h2 {
|
|
margin-bottom: 0;
|
|
font-size: 19px;
|
|
line-height: 1.35;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
.section-heading__meta,
|
|
.results-count {
|
|
flex: 0 0 auto;
|
|
padding: 6px 9px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--ink-muted);
|
|
background: #f3f6f3;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.search-form {
|
|
min-width: 0;
|
|
}
|
|
|
|
.field-label {
|
|
display: inline-block;
|
|
margin-bottom: 8px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #415b56;
|
|
}
|
|
|
|
.query-box {
|
|
position: relative;
|
|
min-width: 0;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 11px;
|
|
transition:
|
|
border-color 150ms ease,
|
|
box-shadow 150ms ease;
|
|
}
|
|
|
|
.query-box:focus-within {
|
|
border-color: var(--forest-600);
|
|
box-shadow: 0 0 0 3px rgb(40 119 106 / 11%);
|
|
}
|
|
|
|
.query-box--error {
|
|
border-color: #c76054;
|
|
}
|
|
|
|
.query-box textarea {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 128px;
|
|
max-height: 260px;
|
|
padding: 14px 14px 35px;
|
|
color: var(--ink);
|
|
line-height: 1.75;
|
|
resize: vertical;
|
|
background: #fcfdfa;
|
|
border: 0;
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.query-box textarea::placeholder {
|
|
color: #9ba7a3;
|
|
}
|
|
|
|
.query-box textarea:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.query-box textarea:disabled {
|
|
color: #8c9894;
|
|
background: #f1f3f0;
|
|
}
|
|
|
|
.character-count {
|
|
position: absolute;
|
|
right: 11px;
|
|
bottom: 9px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--ink-soft);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.character-count--warning {
|
|
color: var(--warning);
|
|
}
|
|
|
|
.field-hint,
|
|
.field-error {
|
|
margin: 7px 1px 0;
|
|
font-size: 10px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.field-hint {
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.field-error {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.search-controls {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
margin-top: 17px;
|
|
}
|
|
|
|
.top-k-control {
|
|
display: grid;
|
|
min-width: 132px;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.top-k-control span {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.top-k-control small {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.top-k-control select {
|
|
min-width: 112px;
|
|
min-height: 44px;
|
|
padding: 0 34px 0 12px;
|
|
color: var(--ink);
|
|
cursor: pointer;
|
|
background: #fcfdfa;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.primary-button {
|
|
display: inline-flex;
|
|
min-height: 46px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 9px;
|
|
padding: 0 17px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
background: var(--forest-700);
|
|
border: 1px solid var(--forest-700);
|
|
border-radius: 9px;
|
|
box-shadow: 0 7px 18px rgb(16 83 74 / 16%);
|
|
transition:
|
|
background 150ms ease,
|
|
transform 150ms ease;
|
|
}
|
|
|
|
.primary-button:hover:not(:disabled) {
|
|
background: var(--forest-800);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.primary-button:disabled {
|
|
color: #aeb8b4;
|
|
background: #e4e8e4;
|
|
border-color: #e0e4e0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.button-spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid rgb(255 255 255 / 35%);
|
|
border-top-color: #fff;
|
|
border-radius: 50%;
|
|
animation: spin 700ms linear infinite;
|
|
}
|
|
|
|
.disabled-note {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 7px;
|
|
margin: 13px 0 0;
|
|
padding: 10px 11px;
|
|
font-size: 10px;
|
|
line-height: 1.55;
|
|
color: #735f45;
|
|
background: var(--warning-soft);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.disabled-note .icon {
|
|
flex: 0 0 auto;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.examples {
|
|
padding-top: 20px;
|
|
margin-top: 21px;
|
|
border-top: 1px solid #e7ebe7;
|
|
}
|
|
|
|
.examples > p {
|
|
margin-bottom: 10px;
|
|
font-size: 10px;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.example-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
}
|
|
|
|
.example-chip {
|
|
min-height: 44px;
|
|
padding: 8px 11px;
|
|
font-size: 10px;
|
|
line-height: 1.45;
|
|
color: #46625c;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
background: #f3f7f3;
|
|
border: 1px solid #dce6df;
|
|
border-radius: 8px;
|
|
transition:
|
|
color 150ms ease,
|
|
background 150ms ease,
|
|
border-color 150ms ease;
|
|
}
|
|
|
|
.example-chip:hover:not(:disabled) {
|
|
color: var(--forest-800);
|
|
background: #eaf3ed;
|
|
border-color: #bed5c8;
|
|
}
|
|
|
|
.example-chip:disabled {
|
|
color: #98a29e;
|
|
background: #f3f4f2;
|
|
}
|
|
|
|
.results-panel {
|
|
min-height: 570px;
|
|
}
|
|
|
|
.section-heading--results {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.result-state {
|
|
display: flex;
|
|
min-height: 430px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
padding: 34px;
|
|
text-align: center;
|
|
background: #f8faf7;
|
|
border: 1px dashed #d5ded7;
|
|
border-radius: 13px;
|
|
}
|
|
|
|
.result-state h3 {
|
|
margin: 19px 0 7px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.result-state p {
|
|
max-width: 460px;
|
|
margin-bottom: 0;
|
|
font-size: 11px;
|
|
line-height: 1.75;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.secondary-button {
|
|
min-height: 44px;
|
|
padding: 0 14px;
|
|
margin-top: 17px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--forest-700);
|
|
cursor: pointer;
|
|
background: #fff;
|
|
border: 1px solid #b9cdc2;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.result-state__illustration {
|
|
position: relative;
|
|
display: grid;
|
|
width: 116px;
|
|
height: 94px;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
color: var(--forest-700);
|
|
background: #e8f0eb;
|
|
border: 1px solid #d4e2d9;
|
|
border-radius: 48% 52% 44% 56% / 55% 43% 57% 45%;
|
|
}
|
|
|
|
.result-state__illustration .icon {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 5px;
|
|
background: rgb(238 245 240 / 74%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.strata {
|
|
position: absolute;
|
|
left: -10%;
|
|
width: 120%;
|
|
height: 1px;
|
|
background: #9ebcaf;
|
|
transform: rotate(-8deg);
|
|
}
|
|
|
|
.strata--one {
|
|
top: 29%;
|
|
}
|
|
|
|
.strata--two {
|
|
top: 50%;
|
|
}
|
|
|
|
.strata--three {
|
|
top: 70%;
|
|
}
|
|
|
|
.result-state__icon {
|
|
display: grid;
|
|
width: 48px;
|
|
height: 48px;
|
|
place-items: center;
|
|
color: var(--forest-700);
|
|
background: var(--sage-100);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.result-state--error {
|
|
color: var(--danger);
|
|
background: #fdf8f7;
|
|
border-color: #e9c5bf;
|
|
}
|
|
|
|
.result-state--error .result-state__icon {
|
|
color: var(--danger);
|
|
background: var(--danger-soft);
|
|
}
|
|
|
|
.result-state--empty {
|
|
color: var(--warning);
|
|
background: #fcfaf4;
|
|
border-color: #e8d6b8;
|
|
}
|
|
|
|
.result-skeleton {
|
|
display: grid;
|
|
gap: 11px;
|
|
}
|
|
|
|
.skeleton-card {
|
|
display: grid;
|
|
gap: 11px;
|
|
padding: 19px;
|
|
background: #fafbf8;
|
|
border: 1px solid #e4e8e3;
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.skeleton-line {
|
|
display: block;
|
|
width: 100%;
|
|
height: 9px;
|
|
overflow: hidden;
|
|
background: #e5eae5;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.skeleton-line::after {
|
|
display: block;
|
|
width: 45%;
|
|
height: 100%;
|
|
content: "";
|
|
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 76%), transparent);
|
|
transform: translateX(-100%);
|
|
animation: shimmer 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
.skeleton-line--short {
|
|
width: 22%;
|
|
height: 6px;
|
|
}
|
|
|
|
.skeleton-line--title {
|
|
width: 58%;
|
|
height: 14px;
|
|
}
|
|
|
|
.skeleton-line--medium {
|
|
width: 73%;
|
|
}
|
|
|
|
.source-list {
|
|
display: grid;
|
|
gap: 11px;
|
|
}
|
|
|
|
.query-summary {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
background: #f4f7f3;
|
|
border-left: 3px solid var(--sand-500);
|
|
border-radius: 4px 8px 8px 4px;
|
|
}
|
|
|
|
.query-summary span {
|
|
padding-top: 1px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.query-summary p {
|
|
min-width: 0;
|
|
margin-bottom: 0;
|
|
overflow-wrap: anywhere;
|
|
font-size: 11px;
|
|
line-height: 1.55;
|
|
color: #3b5550;
|
|
}
|
|
|
|
.source-card {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 42px minmax(0, 1fr);
|
|
min-width: 0;
|
|
gap: 12px;
|
|
padding: 17px;
|
|
background: #fff;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
transition:
|
|
border-color 150ms ease,
|
|
box-shadow 150ms ease,
|
|
transform 150ms ease;
|
|
}
|
|
|
|
.source-card:hover {
|
|
border-color: #becfc5;
|
|
box-shadow: 0 11px 28px rgb(25 69 62 / 8%);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.source-card__rank {
|
|
display: grid;
|
|
width: 36px;
|
|
height: 36px;
|
|
place-items: center;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--forest-700);
|
|
background: var(--sage-50);
|
|
border: 1px solid #d7e5dc;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.source-card__body {
|
|
min-width: 0;
|
|
}
|
|
|
|
.source-card__header {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
}
|
|
|
|
.source-card__header > div:first-child {
|
|
min-width: 0;
|
|
}
|
|
|
|
.source-card__type {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--sand-500);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.source-card h3 {
|
|
margin-bottom: 0;
|
|
overflow-wrap: anywhere;
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.score {
|
|
display: grid;
|
|
flex: 0 0 auto;
|
|
justify-items: end;
|
|
gap: 2px;
|
|
}
|
|
|
|
.score span {
|
|
font-size: 10px;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.score strong {
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--forest-700);
|
|
}
|
|
|
|
.source-card__snippet {
|
|
margin: 12px 0 13px;
|
|
overflow-wrap: anywhere;
|
|
font-size: 11px;
|
|
line-height: 1.75;
|
|
color: #526963;
|
|
}
|
|
|
|
.source-card__footer {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding-top: 11px;
|
|
border-top: 1px solid #ebeeeb;
|
|
}
|
|
|
|
.source-meta {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 10px;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.source-meta__divider {
|
|
flex: 0 0 1px;
|
|
width: 1px;
|
|
height: 11px;
|
|
background: var(--line);
|
|
}
|
|
|
|
.source-meta code {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.copy-button {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
min-height: 44px;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 10px;
|
|
font-size: 11px;
|
|
color: var(--forest-700);
|
|
cursor: pointer;
|
|
background: var(--sage-50);
|
|
border: 1px solid #d2e0d7;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.copy-button:hover {
|
|
background: #e4efe8;
|
|
}
|
|
|
|
.source-card__limitation {
|
|
margin: 8px 0 0;
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
color: #52645e;
|
|
}
|
|
|
|
.score-disclaimer {
|
|
margin: 2px 0 0;
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
color: #4f615b;
|
|
background: #f7f8f5;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.system-hero {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 28px;
|
|
padding: 34px 38px;
|
|
color: #f5faf6;
|
|
background:
|
|
radial-gradient(circle at 88% 25%, rgb(199 151 91 / 18%), transparent 16rem), var(--forest-950);
|
|
border-radius: 21px;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.system-hero > div:first-child {
|
|
max-width: 720px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.system-hero p {
|
|
margin-bottom: 0;
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
color: #bbd0c8;
|
|
}
|
|
|
|
.verification-stamp {
|
|
display: flex;
|
|
flex: 0 0 284px;
|
|
align-items: flex-start;
|
|
gap: 11px;
|
|
padding: 15px;
|
|
color: #f2cc98;
|
|
background: rgb(225 183 125 / 9%);
|
|
border: 1px solid rgb(225 183 125 / 25%);
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.verification-stamp .icon {
|
|
flex: 0 0 auto;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.verification-stamp strong,
|
|
.verification-stamp span {
|
|
display: block;
|
|
}
|
|
|
|
.verification-stamp strong {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.verification-stamp span {
|
|
margin-top: 4px;
|
|
font-size: 10px;
|
|
line-height: 1.5;
|
|
color: #b9c9c2;
|
|
}
|
|
|
|
.verified-label {
|
|
display: inline-flex;
|
|
min-height: 30px;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 4px 9px;
|
|
font-size: 10px;
|
|
color: #1b705f;
|
|
background: #e6f2eb;
|
|
border: 1px solid #cde3d6;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.pipeline-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.pipeline-list li {
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 108px;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 18px 15px;
|
|
}
|
|
|
|
.pipeline-list li + li {
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.pipeline-list__index {
|
|
flex: 0 0 auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--sand-500);
|
|
}
|
|
|
|
.pipeline-list strong {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pipeline-list p {
|
|
margin-bottom: 0;
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.model-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.model-card {
|
|
min-width: 0;
|
|
padding: 17px;
|
|
background: #fbfcf9;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.model-card__top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 9px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.model-card__icon {
|
|
display: grid;
|
|
flex: 0 0 36px;
|
|
width: 36px;
|
|
height: 36px;
|
|
place-items: center;
|
|
color: var(--forest-700);
|
|
background: var(--sage-50);
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.model-state {
|
|
padding: 4px 7px;
|
|
font-size: 10px;
|
|
line-height: 1.4;
|
|
text-align: center;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.model-state--verified {
|
|
color: #176b5b;
|
|
background: #e3f0e8;
|
|
}
|
|
|
|
.model-state--planned {
|
|
color: #8d5e22;
|
|
background: var(--warning-soft);
|
|
}
|
|
|
|
.model-card__role {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-size: 10px;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.model-card h3 {
|
|
margin-bottom: 9px;
|
|
overflow-wrap: anywhere;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: #294b46;
|
|
}
|
|
|
|
.model-card p {
|
|
margin-bottom: 0;
|
|
font-size: 11px;
|
|
line-height: 1.7;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.boundary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.boundary-card {
|
|
display: flex;
|
|
min-width: 0;
|
|
gap: 13px;
|
|
padding: 19px;
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.boundary-card > .icon {
|
|
flex: 0 0 auto;
|
|
color: var(--sand-500);
|
|
}
|
|
|
|
.boundary-card h2 {
|
|
margin-bottom: 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.boundary-card p {
|
|
margin-bottom: 0;
|
|
font-size: 11px;
|
|
line-height: 1.7;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.not-found {
|
|
display: flex;
|
|
min-height: 70vh;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.not-found > span {
|
|
font-family: var(--font-mono);
|
|
font-size: 66px;
|
|
color: #a9bbb3;
|
|
}
|
|
|
|
.not-found h1 {
|
|
margin: 12px 0 8px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.not-found p {
|
|
margin-bottom: 22px;
|
|
font-size: 12px;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 1540px;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 0 clamp(28px, 3.5vw, 58px) 25px;
|
|
margin: auto auto 0;
|
|
font-size: 10px;
|
|
color: #8a9692;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
to {
|
|
transform: translateX(260%);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.status-overview,
|
|
.workspace-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.metric-grid {
|
|
min-height: 74px;
|
|
}
|
|
|
|
.results-panel {
|
|
min-height: 480px;
|
|
}
|
|
|
|
.result-state {
|
|
min-height: 340px;
|
|
}
|
|
|
|
.model-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.app-shell {
|
|
display: block;
|
|
}
|
|
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-header {
|
|
position: sticky;
|
|
z-index: 20;
|
|
top: 0;
|
|
display: flex;
|
|
min-height: 68px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 9px 18px;
|
|
color: #f0f7f3;
|
|
background: rgb(8 43 40 / 96%);
|
|
border-bottom: 1px solid rgb(255 255 255 / 10%);
|
|
backdrop-filter: blur(13px);
|
|
}
|
|
|
|
.brand--mobile {
|
|
padding: 0;
|
|
}
|
|
|
|
.brand--mobile .brand__mark {
|
|
flex-basis: 38px;
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
.brand--mobile strong {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.mobile-nav {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.mobile-nav__link {
|
|
display: grid;
|
|
width: 44px;
|
|
height: 44px;
|
|
place-items: center;
|
|
color: #a5bdb4;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.mobile-nav__link--active {
|
|
color: #f0c78f;
|
|
background: rgb(255 255 255 / 8%);
|
|
}
|
|
|
|
.page {
|
|
padding: 24px 18px 38px;
|
|
}
|
|
|
|
.hero {
|
|
min-height: 0;
|
|
padding: 29px;
|
|
}
|
|
|
|
.hero__seal {
|
|
display: none;
|
|
}
|
|
|
|
.pipeline-list {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.pipeline-list li + li {
|
|
border-left: 0;
|
|
}
|
|
|
|
.pipeline-list li:nth-child(even) {
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.pipeline-list li:nth-child(n + 3) {
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.boundary-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.system-hero {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
padding: 29px;
|
|
}
|
|
|
|
.verification-stamp {
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.footer {
|
|
padding: 0 18px 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.page-stack {
|
|
gap: 16px;
|
|
}
|
|
|
|
.hero,
|
|
.system-hero {
|
|
padding: 24px 20px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.hero h1,
|
|
.system-hero h1 {
|
|
font-size: 29px;
|
|
}
|
|
|
|
.mode-badge {
|
|
align-items: flex-start;
|
|
line-height: 1.5;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.mode-badge__dot {
|
|
flex: 0 0 auto;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.safety-notice {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 13px 15px;
|
|
}
|
|
|
|
.safety-notice strong {
|
|
padding-right: 0;
|
|
border-right: 0;
|
|
}
|
|
|
|
.metric-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.metric-card {
|
|
min-height: 62px;
|
|
}
|
|
|
|
.search-panel,
|
|
.results-panel,
|
|
.system-section {
|
|
padding: 19px 16px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.section-heading {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: 9px;
|
|
}
|
|
|
|
.section-heading__meta {
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
}
|
|
|
|
.search-controls {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.top-k-control,
|
|
.top-k-control select {
|
|
width: 100%;
|
|
}
|
|
|
|
.primary-button {
|
|
width: 100%;
|
|
}
|
|
|
|
.results-panel {
|
|
min-height: 440px;
|
|
}
|
|
|
|
.result-state {
|
|
min-height: 320px;
|
|
padding: 24px 17px;
|
|
}
|
|
|
|
.query-summary {
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
}
|
|
|
|
.source-card {
|
|
grid-template-columns: 1fr;
|
|
padding: 15px;
|
|
}
|
|
|
|
.source-card__rank {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.source-card__header {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.score {
|
|
justify-items: start;
|
|
}
|
|
|
|
.source-card__footer {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.source-meta {
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.source-meta code {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.copy-button {
|
|
justify-content: center;
|
|
}
|
|
|
|
.model-grid,
|
|
.pipeline-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.pipeline-list li:nth-child(even) {
|
|
border-left: 0;
|
|
}
|
|
|
|
.pipeline-list li:nth-child(n + 2) {
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.footer {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 360px) {
|
|
.mobile-header {
|
|
padding-right: 10px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.page {
|
|
padding-right: 12px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.brand--mobile strong {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.hero h1,
|
|
.system-hero h1 {
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|