| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| scroll-padding-top: 88px; |
| } |
|
|
| :root { |
| --ink: #171717; |
| --muted: #5f5f5f; |
| --line: #d7d5ce; |
| --line-soft: #e8e6df; |
| --paper: #f7f5ef; |
| --paper-2: #f2efe7; |
| --card: #ffffff; |
| --accent: #121212; |
| --blue: #466db8; |
| --orange: #cb5a37; |
| --radius-lg: 18px; |
| --radius-md: 14px; |
| } |
|
|
| body { |
| margin: 0; |
| color: var(--ink); |
| background: |
| radial-gradient(circle at 10% -5%, #ece8df 0, transparent 42%), |
| radial-gradient(circle at 90% 0, #efe9de 0, transparent 38%), |
| var(--paper); |
| font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; |
| line-height: 1.65; |
| } |
|
|
| .top-nav { |
| position: sticky; |
| top: 0; |
| z-index: 120; |
| backdrop-filter: blur(8px); |
| background: rgb(247 245 239 / 88%); |
| border-bottom: 1px solid #e4dfd4; |
| } |
|
|
| .nav-shell { |
| min-height: 74px; |
| display: grid; |
| grid-template-columns: auto 1fr auto; |
| align-items: center; |
| gap: 20px; |
| } |
|
|
| .nav-brand { |
| font-family: "Noto Serif", Georgia, serif; |
| font-size: 2rem; |
| line-height: 1; |
| font-weight: 700; |
| letter-spacing: -0.01em; |
| } |
|
|
| .brand-dot { |
| color: #cc4b2c; |
| } |
|
|
| .nav-links { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| gap: 28px; |
| } |
|
|
| .nav-links a { |
| font-size: 1.02rem; |
| font-weight: 600; |
| color: #4c4c4c; |
| } |
|
|
| .nav-links a:hover { |
| color: #141414; |
| } |
|
|
| .nav-cta { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-width: 104px; |
| height: 42px; |
| border-radius: 999px; |
| border: 1px solid #101010; |
| background: #111111; |
| color: #ffffff; |
| font-size: 0.98rem; |
| font-weight: 600; |
| } |
|
|
| img, |
| video { |
| display: block; |
| width: 100%; |
| } |
|
|
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
|
|
| pre, |
| code { |
| font-family: "SFMono-Regular", Consolas, monospace; |
| } |
|
|
| .container { |
| width: min(100% - 34px, 1240px); |
| margin: 0 auto; |
| } |
|
|
| .container.medium { |
| max-width: 980px; |
| } |
|
|
| .container.wide { |
| max-width: 1280px; |
| } |
|
|
| .page-title, |
| .section-title, |
| .table-card h3, |
| .note-card h3 { |
| font-family: "Noto Serif", Georgia, serif; |
| } |
|
|
| .hero-block { |
| padding: 34px 0 20px; |
| } |
|
|
| .hero-shell { |
| padding: 22px; |
| border: 1px solid var(--line); |
| border-radius: 24px; |
| background: linear-gradient(160deg, #fcfbf8 0%, #f7f4ee 100%); |
| box-shadow: 0 10px 30px rgb(28 28 28 / 5%); |
| } |
|
|
| .hero-layout { |
| display: grid; |
| grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr); |
| gap: 20px; |
| align-items: start; |
| } |
|
|
| .hero-tag { |
| display: inline-flex; |
| margin: 0 0 8px; |
| padding: 4px 10px; |
| border-radius: 999px; |
| border: 1px solid #c9c3b5; |
| background: #f1ede4; |
| color: #4f4b3f; |
| font-size: 0.82rem; |
| font-weight: 600; |
| letter-spacing: 0.03em; |
| text-transform: uppercase; |
| } |
|
|
| .page-title { |
| margin: 0 0 10px; |
| font-size: clamp(1.24rem, 1.72vw, 1.86rem); |
| line-height: 1.2; |
| font-weight: 700; |
| max-width: 720px; |
| } |
|
|
| .hero-summary { |
| margin: 0 0 10px; |
| color: #363636; |
| font-size: 1.04rem; |
| text-align: justify; |
| text-justify: inter-word; |
| } |
|
|
| .author-line { |
| margin: 0; |
| color: var(--muted); |
| font-size: 0.98rem; |
| } |
|
|
| .link-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| margin-top: 16px; |
| } |
|
|
| .hero-metrics { |
| margin-top: 14px; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| align-items: center; |
| } |
|
|
| .link-button { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-width: 98px; |
| padding: 8px 14px; |
| border-radius: 999px; |
| border: 1px solid #1c1c1c; |
| font-size: 0.9rem; |
| font-weight: 600; |
| color: #ffffff; |
| background: #111111; |
| } |
|
|
| .kpi-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .kpi-pill { |
| padding: 6px 10px; |
| border: 1px solid #cfcabf; |
| border-radius: 999px; |
| background: #ffffff; |
| font-size: 0.85rem; |
| color: #4b4b4b; |
| } |
|
|
| .kpi-pill span { |
| font-weight: 700; |
| color: #111111; |
| } |
|
|
| .hero-figure { |
| margin: 0; |
| align-self: stretch; |
| } |
|
|
| .hero-figure img { |
| border-radius: var(--radius-lg); |
| border: 1px solid var(--line); |
| background: #ffffff; |
| } |
|
|
| .hero-figure figcaption { |
| margin-top: 9px; |
| color: #656565; |
| font-size: 0.92rem; |
| } |
|
|
| .section-block { |
| padding: 22px 0 30px; |
| } |
|
|
| .section-alt { |
| background: linear-gradient(180deg, #f5f2ea 0%, #f8f6f1 100%); |
| border-top: 1px solid #ebe7de; |
| border-bottom: 1px solid #ebe7de; |
| } |
|
|
| .section-head { |
| margin-bottom: 14px; |
| } |
|
|
| .section-title { |
| margin: 0; |
| font-size: 1.88rem; |
| line-height: 1.2; |
| text-align: left; |
| } |
|
|
| .section-subtitle { |
| margin: 8px 0 0; |
| color: var(--muted); |
| font-size: 1.02rem; |
| max-width: 940px; |
| } |
|
|
| .construction-layout { |
| display: grid; |
| grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr); |
| gap: 16px; |
| align-items: stretch; |
| } |
|
|
| .construction-layout > .paper-figure { |
| height: 100%; |
| } |
|
|
| .paper-figure { |
| margin: 0; |
| } |
|
|
| .paper-figure img { |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| background: #ffffff; |
| } |
|
|
| .paper-figure figcaption { |
| margin-top: 10px; |
| color: #666666; |
| font-size: 0.95rem; |
| } |
|
|
| .construction-notes { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 10px; |
| align-content: stretch; |
| align-items: stretch; |
| grid-auto-rows: 1fr; |
| height: 100%; |
| } |
|
|
| .note-card { |
| padding: 14px 14px 12px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-md); |
| background: #fffdfa; |
| height: 100%; |
| } |
|
|
| .note-card h3 { |
| margin: 0 0 6px; |
| font-size: 1rem; |
| } |
|
|
| .note-card p { |
| margin: 0; |
| color: #5f5f5f; |
| font-size: 0.95rem; |
| } |
|
|
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(5, minmax(0, 1fr)); |
| gap: 10px; |
| margin: 12px 0 14px; |
| } |
|
|
| .stat-card { |
| padding: 12px 10px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-md); |
| background: #ffffff; |
| text-align: center; |
| } |
|
|
| .stat-value { |
| display: block; |
| font-size: 1.55rem; |
| line-height: 1.05; |
| font-weight: 700; |
| } |
|
|
| .stat-label { |
| display: block; |
| margin-top: 5px; |
| color: var(--muted); |
| font-size: 0.88rem; |
| } |
|
|
| .statistics-layout { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); |
| gap: 14px; |
| align-items: stretch; |
| } |
|
|
| .stats-left-stack { |
| display: grid; |
| gap: 10px; |
| align-content: start; |
| height: 100%; |
| } |
|
|
| .distribution-figure { |
| border-radius: var(--radius-lg); |
| overflow: hidden; |
| background: #ffffff; |
| border: 1px solid var(--line); |
| padding: 10px; |
| } |
|
|
| .distribution-figure img { |
| border: none; |
| border-radius: 10px; |
| } |
|
|
| .table-stack { |
| display: grid; |
| gap: 10px; |
| height: 100%; |
| } |
|
|
| .dimension-grid { |
| display: grid; |
| grid-template-columns: repeat(5, minmax(0, 1fr)); |
| gap: 8px; |
| } |
|
|
| .dimension-card { |
| border: 1px solid var(--line); |
| border-radius: 12px; |
| background: #ffffff; |
| padding: 10px 6px; |
| text-align: center; |
| } |
|
|
| .dimension-card strong { |
| display: block; |
| font-size: 1.18rem; |
| line-height: 1.05; |
| } |
|
|
| .dimension-card span { |
| display: block; |
| margin-top: 4px; |
| color: var(--muted); |
| font-size: 0.8rem; |
| } |
|
|
| .table-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 10px; |
| height: 100%; |
| align-items: stretch; |
| } |
|
|
| .table-card { |
| border: 1px solid var(--line); |
| border-radius: 12px; |
| background: #ffffff; |
| padding: 12px 12px 8px; |
| height: 100%; |
| } |
|
|
| .table-card h3 { |
| margin: 0 0 6px; |
| font-size: 1rem; |
| text-align: center; |
| } |
|
|
| .stats-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 0.86rem; |
| } |
|
|
| .stats-table th, |
| .stats-table td { |
| padding: 5px 2px; |
| border-bottom: 1px solid var(--line-soft); |
| } |
|
|
| .stats-table th { |
| text-align: left; |
| font-weight: 700; |
| } |
|
|
| .stats-table th:nth-child(2), |
| .stats-table th:nth-child(3), |
| .stats-table td:nth-child(2), |
| .stats-table td:nth-child(3) { |
| text-align: right; |
| } |
|
|
| .stats-table tbody tr:last-child td { |
| border-bottom: none; |
| } |
|
|
| .analysis-grid { |
| display: grid; |
| grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); |
| gap: 16px; |
| align-items: start; |
| } |
|
|
| .analysis-main { |
| min-height: 100%; |
| } |
|
|
| .analysis-side { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .text-content { |
| font-size: 1.05rem; |
| } |
|
|
| .text-content p { |
| margin: 0 0 12px; |
| } |
|
|
| .result-copy { |
| margin-bottom: 12px; |
| } |
|
|
| .result-copy-wide { |
| margin-bottom: 14px; |
| } |
|
|
| .result-copy-wide p { |
| text-align: justify; |
| text-justify: inter-word; |
| max-width: none; |
| } |
|
|
| .cross-judge-card { |
| border: 1px solid var(--line); |
| border-radius: 14px; |
| background: linear-gradient(180deg, #fdfcf9 0%, #ffffff 100%); |
| padding: 12px 12px 10px; |
| height: 100%; |
| display: grid; |
| grid-template-rows: auto auto 1fr; |
| } |
|
|
| .cross-toolbar { |
| display: grid; |
| gap: 8px; |
| margin-bottom: 8px; |
| padding: 10px; |
| border: 1px solid #e2ddcf; |
| border-radius: 12px; |
| background: linear-gradient(180deg, #faf8f2 0%, #f5f2e9 100%); |
| } |
|
|
| .toolbar-row { |
| display: grid; |
| grid-template-columns: 52px 1fr; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .toolbar-label { |
| display: inline-flex; |
| align-items: center; |
| justify-content: flex-start; |
| color: #6f6a60; |
| font-size: 0.73rem; |
| font-weight: 700; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| } |
|
|
| .toggle-group.task .toggle-btn { |
| font-size: 0.82rem; |
| } |
|
|
| .toggle-group { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| align-items: center; |
| } |
|
|
| .toggle-btn { |
| border: 1px solid #c9c2b4; |
| border-radius: 999px; |
| padding: 6px 12px; |
| background: #f8f5ee; |
| color: #454038; |
| font: inherit; |
| font-size: 0.83rem; |
| font-weight: 600; |
| cursor: pointer; |
| min-height: 34px; |
| transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; |
| } |
|
|
| .toggle-btn:hover { |
| border-color: #b6ae9f; |
| background: #f1ede4; |
| } |
|
|
| .toggle-btn.active { |
| border-color: #171717; |
| background: #151515; |
| color: #ffffff; |
| box-shadow: 0 2px 8px rgb(17 17 17 / 16%); |
| } |
|
|
| .toggle-btn:disabled { |
| opacity: 1; |
| cursor: default; |
| } |
|
|
| .is-hidden { |
| display: none !important; |
| } |
|
|
| .results-caption { |
| margin: 0 0 8px; |
| font-size: 0.82rem; |
| color: #686357; |
| } |
|
|
| .results-panel { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .results-head { |
| display: grid; |
| align-items: center; |
| padding: 0 10px 2px; |
| color: #756f65; |
| font-size: 0.76rem; |
| font-weight: 700; |
| letter-spacing: 0.03em; |
| text-transform: uppercase; |
| } |
|
|
| .results-head-oe { |
| grid-template-columns: 54px minmax(0, 1fr) 94px 94px; |
| gap: 10px; |
| } |
|
|
| .results-head-mc { |
| grid-template-columns: 54px minmax(0, 1fr) 90px minmax(130px, 170px); |
| gap: 10px; |
| } |
|
|
| .results-head-cell-right { |
| text-align: right; |
| } |
|
|
| .result-row { |
| gap: 10px; |
| align-items: center; |
| padding: 8px 10px; |
| border: 1px solid #ddd8cc; |
| border-radius: 10px; |
| background: #fcfbf8; |
| } |
|
|
| .result-row-oe { |
| display: grid; |
| grid-template-columns: 54px minmax(0, 1fr) 94px 94px; |
| } |
|
|
| .result-row-mc { |
| display: grid; |
| grid-template-columns: 54px minmax(0, 1fr) 90px minmax(130px, 170px); |
| } |
|
|
| .result-row.ours { |
| border-color: #d89984; |
| background: linear-gradient(90deg, #fff7f3 0%, #fffdfa 100%); |
| } |
|
|
| .result-rank { |
| justify-self: start; |
| min-width: 44px; |
| padding: 3px 7px; |
| border-radius: 999px; |
| border: 1px solid #d8d2c8; |
| font-size: 0.78rem; |
| font-weight: 700; |
| color: #5a554c; |
| background: #ffffff; |
| } |
|
|
| .result-model-wrap { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .result-model { |
| min-width: 0; |
| font-size: 0.95rem; |
| font-weight: 700; |
| line-height: 1.2; |
| overflow-wrap: anywhere; |
| } |
|
|
| .result-tag { |
| border-radius: 999px; |
| border: 1px solid #cb7f66; |
| color: #9c3f22; |
| background: #fff1eb; |
| padding: 2px 7px; |
| font-size: 0.72rem; |
| font-weight: 700; |
| } |
|
|
| .result-score { |
| min-width: 0; |
| text-align: right; |
| font-size: 0.92rem; |
| color: #202020; |
| font-weight: 700; |
| } |
|
|
| .result-metric-col { |
| display: grid; |
| gap: 2px; |
| min-width: 0; |
| } |
|
|
| .result-delta { |
| min-width: 0; |
| text-align: right; |
| font-size: 0.75rem; |
| font-weight: 600; |
| color: #55514a; |
| } |
|
|
| .result-delta.positive { |
| color: #2f7c4f; |
| } |
|
|
| .result-delta.negative { |
| color: #9b4e39; |
| } |
|
|
| .compact { |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| background: #ffffff; |
| padding: 10px; |
| } |
|
|
| .compact img { |
| border: none; |
| border-radius: 10px; |
| } |
|
|
| .mc-figure { |
| background: #fdfcf9; |
| } |
|
|
| .mc-figure img { |
| max-height: 315px; |
| object-fit: contain; |
| } |
|
|
| .benchmark-figure figcaption { |
| margin-bottom: 3px; |
| } |
|
|
| .benchmark-footnote { |
| margin: 0; |
| color: #67625a; |
| font-size: 0.83rem; |
| } |
|
|
| .rank-footnote { |
| margin: 9px 2px 0; |
| color: #67625a; |
| font-size: 0.82rem; |
| } |
|
|
| .filter-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 9px; |
| margin: 10px 0 16px; |
| } |
|
|
| .filter-chip { |
| padding: 8px 14px; |
| border: 1px solid #c7c2b6; |
| border-radius: 999px; |
| background: #fefdf9; |
| font: inherit; |
| font-size: 0.92rem; |
| font-weight: 600; |
| color: #3f3f3f; |
| cursor: pointer; |
| } |
|
|
| .filter-chip.active { |
| border-color: #131313; |
| background: #141414; |
| color: #ffffff; |
| } |
|
|
| .sample-browser { |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| overflow: hidden; |
| background: #ffffff; |
| } |
|
|
| .sample-card { |
| display: grid; |
| grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr); |
| } |
|
|
| .sample-media { |
| display: grid; |
| grid-template-rows: auto 1fr; |
| min-height: 100%; |
| } |
|
|
| .sample-video-wrap { |
| background: #111111; |
| aspect-ratio: 16 / 9; |
| } |
|
|
| .sample-video { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| display: block; |
| } |
|
|
| .sample-video-note { |
| border-top: 1px solid var(--line); |
| background: linear-gradient(180deg, #fbf9f3 0%, #f6f3eb 100%); |
| padding: 12px 14px; |
| display: grid; |
| gap: 7px; |
| align-content: center; |
| } |
|
|
| .sample-video-note-title { |
| font-size: 0.9rem; |
| font-weight: 700; |
| color: #4a453b; |
| } |
|
|
| .sample-video-note-line { |
| display: grid; |
| grid-template-columns: 70px minmax(0, 1fr); |
| gap: 8px; |
| font-size: 0.82rem; |
| color: #5d5a52; |
| } |
|
|
| .sample-video-note-line span { |
| text-transform: uppercase; |
| letter-spacing: 0.03em; |
| font-weight: 700; |
| font-size: 0.72rem; |
| color: #6b675e; |
| } |
|
|
| .sample-video-note-line strong { |
| color: #2b2b2b; |
| word-break: break-word; |
| font-weight: 600; |
| } |
|
|
| .sample-content { |
| border-left: 1px solid var(--line); |
| padding: 14px 16px 16px; |
| } |
|
|
| .sample-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 10px; |
| margin-bottom: 9px; |
| } |
|
|
| .sample-counter { |
| color: var(--muted); |
| font-size: 0.93rem; |
| font-weight: 600; |
| } |
|
|
| .sample-nav { |
| display: flex; |
| gap: 6px; |
| } |
|
|
| .sample-nav button { |
| width: 34px; |
| height: 34px; |
| border-radius: 999px; |
| border: 1px solid #cecabf; |
| background: #ffffff; |
| font: inherit; |
| cursor: pointer; |
| } |
|
|
| .sample-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 7px; |
| margin-bottom: 9px; |
| } |
|
|
| .sample-chip { |
| display: inline-flex; |
| align-items: center; |
| padding: 3px 9px; |
| border-radius: 999px; |
| background: #f2efe7; |
| font-size: 0.84rem; |
| font-weight: 600; |
| color: #4a4a4a; |
| } |
|
|
| .sample-chip.gold { |
| background: #f0efe8; |
| color: #2f2f2f; |
| } |
|
|
| .sample-question { |
| margin: 0 0 8px; |
| font-size: 1.1rem; |
| line-height: 1.4; |
| } |
|
|
| .option-block { |
| margin: 0 0 10px; |
| padding: 10px 11px 8px; |
| border: 1px solid var(--line-soft); |
| border-radius: 10px; |
| background: #fbfaf6; |
| } |
|
|
| .option-block strong { |
| display: block; |
| margin-bottom: 6px; |
| font-size: 0.92rem; |
| letter-spacing: 0.01em; |
| } |
|
|
| .option-list { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .option-item { |
| display: grid; |
| grid-template-columns: 22px minmax(0, 1fr); |
| gap: 8px; |
| align-items: start; |
| padding: 6px 7px; |
| border: 1px solid #e3e0d7; |
| border-radius: 8px; |
| background: #ffffff; |
| } |
|
|
| .option-item.correct { |
| border-color: #8ab78f; |
| background: #f5fbf5; |
| } |
|
|
| .option-key { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 22px; |
| height: 22px; |
| border-radius: 999px; |
| border: 1px solid #d2cec2; |
| font-size: 0.8rem; |
| font-weight: 700; |
| color: #4a4a4a; |
| background: #fbfaf6; |
| } |
|
|
| .option-item.correct .option-key { |
| border-color: #81ab86; |
| color: #2d6738; |
| background: #ecf8ed; |
| } |
|
|
| .option-text { |
| font-size: 0.88rem; |
| line-height: 1.4; |
| color: #464646; |
| } |
|
|
| .sample-text { |
| margin: 0 0 8px; |
| color: #4f4f4f; |
| } |
|
|
| .oe-card { |
| margin-top: 10px; |
| padding: 10px 12px 11px; |
| border: 1px solid #cfd9e6; |
| border-radius: 11px; |
| background: linear-gradient(180deg, #f7fbff 0%, #f1f7fd 100%); |
| } |
|
|
| .oe-head { |
| margin: 0; |
| } |
|
|
| .oe-toggle { |
| width: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| padding: 0; |
| border: 0; |
| background: transparent; |
| cursor: pointer; |
| text-align: left; |
| } |
|
|
| .oe-caret { |
| color: #5a6f8c; |
| font-size: 0.8rem; |
| transition: transform 0.2s ease; |
| } |
|
|
| .oe-toggle[aria-expanded="true"] .oe-caret { |
| transform: rotate(180deg); |
| } |
|
|
| .oe-body { |
| margin-top: 8px; |
| } |
|
|
| .oe-badge { |
| display: inline-flex; |
| align-items: center; |
| padding: 3px 8px; |
| border-radius: 999px; |
| border: 1px solid #b8cbe3; |
| background: #ffffff; |
| color: #355684; |
| font-size: 0.76rem; |
| font-weight: 700; |
| letter-spacing: 0.02em; |
| text-transform: uppercase; |
| } |
|
|
| .oe-text { |
| margin: 0; |
| color: #3f4f64; |
| font-size: 0.9rem; |
| line-height: 1.45; |
| } |
|
|
| .answer-box { |
| margin-top: 8px; |
| padding: 10px 12px; |
| border-left: 3px solid #355fa6; |
| background: #f6f8fc; |
| } |
|
|
| .answer-box strong { |
| display: block; |
| margin-bottom: 3px; |
| } |
|
|
| .citation-block { |
| margin: 0; |
| padding: 14px 16px; |
| border-radius: 12px; |
| border: 1px solid var(--line); |
| background: #fcfbf8; |
| line-height: 1.6; |
| overflow-x: auto; |
| } |
|
|
| @media (max-width: 1120px) { |
| .hero-layout, |
| .construction-layout, |
| .statistics-layout, |
| .analysis-grid, |
| .sample-card { |
| grid-template-columns: 1fr; |
| } |
|
|
| .sample-content { |
| border-left: none; |
| border-top: 1px solid var(--line); |
| } |
|
|
| .analysis-side { |
| margin-top: 0; |
| } |
|
|
| .analysis-main { |
| grid-template-rows: auto auto; |
| } |
|
|
| .table-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .dimension-grid { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (max-width: 760px) { |
| .nav-shell { |
| grid-template-columns: 1fr; |
| gap: 10px; |
| padding: 10px 0 12px; |
| } |
|
|
| .nav-brand { |
| font-size: 1.55rem; |
| } |
|
|
| .nav-links { |
| width: 100%; |
| justify-content: flex-start; |
| gap: 16px; |
| overflow-x: auto; |
| white-space: nowrap; |
| padding-bottom: 4px; |
| } |
|
|
| .nav-links a { |
| font-size: 0.92rem; |
| } |
|
|
| .nav-cta { |
| justify-self: start; |
| height: 38px; |
| min-width: 94px; |
| font-size: 0.88rem; |
| } |
|
|
| .container { |
| width: min(100% - 18px, 1240px); |
| } |
|
|
| .stats-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .dimension-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .construction-notes { |
| grid-template-columns: 1fr; |
| } |
|
|
| .hero-metrics { |
| align-items: flex-start; |
| } |
|
|
| .sample-media { |
| grid-template-rows: auto; |
| } |
|
|
| .sample-video-note { |
| border-top: 1px solid var(--line); |
| border-left: none; |
| } |
|
|
| .toggle-btn { |
| padding: 5px 9px; |
| font-size: 0.78rem; |
| } |
|
|
| .toolbar-row { |
| grid-template-columns: 1fr; |
| gap: 5px; |
| } |
|
|
| .results-head { |
| display: none; |
| } |
|
|
| .result-row-mc { |
| grid-template-columns: 46px minmax(0, 1fr) auto; |
| gap: 6px 8px; |
| align-items: start; |
| padding: 8px; |
| } |
|
|
| .result-row-mc .result-model-wrap { |
| grid-column: 2; |
| grid-row: 1; |
| } |
|
|
| .result-row-mc .result-score { |
| grid-column: 3; |
| grid-row: 1; |
| } |
|
|
| .result-row-mc .result-delta { |
| grid-column: 2 / 4; |
| grid-row: 2; |
| text-align: left; |
| } |
|
|
| .result-row-oe { |
| grid-template-columns: 46px minmax(0, 1fr) minmax(72px, auto) minmax(72px, auto); |
| gap: 7px 8px; |
| align-items: start; |
| padding: 8px; |
| } |
|
|
| .result-row-oe .result-rank { |
| grid-column: 1; |
| grid-row: 1 / 3; |
| } |
|
|
| .result-row-oe .result-model-wrap { |
| grid-column: 2 / 5; |
| grid-row: 1; |
| } |
|
|
| .result-row-oe .result-metric-col { |
| display: grid; |
| gap: 1px; |
| justify-items: end; |
| } |
|
|
| .result-row-oe .result-metric-col.acc { |
| grid-column: 3; |
| grid-row: 2; |
| } |
|
|
| .result-row-oe .result-metric-col.scr { |
| grid-column: 4; |
| grid-row: 2; |
| } |
|
|
| .result-row-oe .result-metric-col::before { |
| content: attr(data-label); |
| font-size: 0.65rem; |
| font-weight: 700; |
| color: #7a7368; |
| letter-spacing: 0.03em; |
| } |
|
|
| } |
|
|
