:root {
  color-scheme: light;
  --app-canvas: #f0f1f3;
  --app-surface: #ffffff;
  --app-surface-alt: #f6f6f7;
  --app-nav-current: #e4e5e7;
  --app-line: #e4e5e7;
  --app-ink: #17181a;
  --app-muted: #6d7178;
  --app-subtle: #898d94;
  --app-inverse: #17181a;
  --app-inverse-ink: #ffffff;
  --theme-primary: #b3b2ff;
  --theme-secondary: #e2f164;
  --theme-primary-soft: color-mix(in srgb, var(--theme-primary) 25%, var(--app-surface));
  --theme-secondary-soft: color-mix(in srgb, var(--theme-secondary) 32%, var(--app-surface));
  --radius-micro: 4px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --text-caption: 0.75rem;
  --text-label: 0.8125rem;
  --text-ui: 0.875rem;
  --text-body-sm: 0.9375rem;
  --text-body: 1rem;
  --text-title-sm: 1.125rem;
  --text-title: 1.25rem;
  --text-display: 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 100%;
  background: var(--app-canvas);
  color: var(--app-ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
strong, h1, h2, h3 { font-weight: 600; }
h1, h2, h3, p { margin-top: 0; }

.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: var(--space-8) var(--space-4) var(--space-6); background: var(--app-canvas); }
.brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--theme-primary); font-size: var(--text-ui); font-weight: 600; letter-spacing: -0.04em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: var(--text-body-sm); line-height: 1.25; }
.brand small { margin-top: var(--space-1); font-size: var(--text-caption); font-weight: 500; letter-spacing: 0.12em; color: var(--app-muted); }
.nav-label { margin: var(--space-16) var(--space-3) var(--space-3); font-size: var(--text-caption); font-weight: 500; color: var(--app-subtle); }
.side-nav { display: grid; gap: var(--space-1); }
.side-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-xs); font-size: var(--text-ui); font-weight: 500; }
.side-nav a:hover, .side-nav a:focus-visible, .side-nav a.active { background: var(--app-nav-current); }
.side-nav a span { color: var(--app-subtle); font-size: var(--text-caption); }
.sidebar-foot { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: auto; padding: var(--space-4) var(--space-2) 0; color: var(--app-muted); font-size: var(--text-label); line-height: 1.55; }
.sidebar-foot small { color: var(--app-subtle); font-size: var(--text-caption); }
.access-dot, .dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-top: var(--space-1); border-radius: var(--radius-full); background: var(--theme-secondary); }

.main { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 0 var(--space-12); background: var(--app-surface); border-bottom: 1px solid var(--app-line); }
.breadcrumbs { color: var(--app-muted); font-size: var(--text-ui); }
.breadcrumbs span { margin: 0 var(--space-2); color: var(--app-subtle); }
.private-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--app-surface-alt); color: var(--app-muted); font-size: var(--text-caption); font-weight: 500; }
.content { max-width: 1520px; margin: 0 auto; padding: var(--space-8) var(--space-12) var(--space-6); }

.hero { padding: var(--space-8); border-radius: var(--radius-xl); background: var(--app-surface); }
.eyebrow, .section-index, .panel-kicker, .note-index { font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.12em; }
.eyebrow { display: flex; align-items: center; gap: var(--space-3); color: var(--app-muted); }
.eyebrow-line { display: block; width: var(--space-6); height: 1px; background: var(--app-line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); gap: var(--space-8); align-items: end; margin-top: var(--space-6); }
.hero h1 { margin-bottom: var(--space-4); font-size: clamp(2.75rem, 4.2vw, 4rem); line-height: 1.05; letter-spacing: -0.05em; }
.hero-copy { max-width: 550px; margin-bottom: 0; color: var(--app-muted); font-size: var(--text-body); line-height: 1.7; }
.hero-note { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--theme-primary-soft); }
.hero-note strong { display: block; margin-top: var(--space-6); font-size: var(--text-display); line-height: 1.3; letter-spacing: -0.02em; }
.hero-note p { margin: var(--space-4) 0 0; color: var(--app-muted); font-size: var(--text-ui); line-height: 1.65; }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--app-line); color: var(--app-subtle); font-size: var(--text-caption); }

.overview-section, .signals-section, .prompts-section, .samples-section, .method-section { margin-top: var(--space-16); scroll-margin-top: var(--space-6); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); }
.section-index { color: var(--app-muted); }
.section-heading h2 { margin: var(--space-2) 0 0; font-size: var(--text-display); letter-spacing: -0.025em; }
.section-heading p { margin: 0; color: var(--app-muted); font-size: var(--text-ui); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.metric-card { display: flex; flex-direction: column; min-height: 156px; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--app-surface); }
.metric-card > span { color: var(--app-muted); font-size: var(--text-ui); }
.metric-card strong { margin-top: auto; font-size: 2rem; line-height: 1.15; letter-spacing: -0.045em; }
.metric-card small { margin-top: var(--space-2); color: var(--app-subtle); font-size: var(--text-caption); }
.analysis-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
.panel { min-height: 344px; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--app-surface); }
.panel-head { display: flex; justify-content: space-between; gap: var(--space-4); }
.panel-kicker { color: var(--app-subtle); }
.panel h3, .comparison-panel h3 { margin: var(--space-2) 0 0; font-size: var(--text-title-sm); }
.panel-caption { color: var(--app-subtle); font-size: var(--text-caption); }
.bar-chart, .part-chart { display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.bar-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 56px; align-items: center; gap: var(--space-3); font-size: var(--text-ui); }
.bar-label { font-weight: 500; }
.bar-track { overflow: hidden; height: 12px; border-radius: var(--radius-xs); background: var(--app-surface-alt); }
.bar-fill { display: block; height: 100%; border-radius: var(--radius-xs); background: var(--theme-primary); }
.bar-row:nth-child(4) .bar-fill { background: var(--theme-secondary); }
.bar-value { text-align: right; color: var(--app-muted); font-size: var(--text-label); }
.part-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 78px; gap: var(--space-3); align-items: center; }
.part-name { font-weight: 500; font-size: var(--text-ui); }
.part-meta { display: block; margin-top: var(--space-1); color: var(--app-subtle); font-size: var(--text-caption); }
.part-score-track { height: 34px; border-radius: var(--radius-sm); background: var(--app-surface-alt); }
.part-score-fill { display: block; height: 100%; border-radius: var(--radius-sm); background: var(--theme-secondary-soft); }
.part-value { text-align: right; font-size: var(--text-title-sm); font-weight: 600; }
.chart-note { margin: var(--space-8) 0 0; color: var(--app-subtle); font-size: var(--text-caption); line-height: 1.6; }
.comparison-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-8); margin-top: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--app-surface); }
.comparison-panel p { max-width: 590px; margin: var(--space-3) 0 0; color: var(--app-muted); font-size: var(--text-ui); line-height: 1.65; }
.comparison-values { display: flex; align-items: center; gap: var(--space-6); }
.comparison-values div { display: flex; flex-direction: column; min-width: 98px; }
.comparison-values span, .comparison-values small { color: var(--app-muted); font-size: var(--text-caption); }
.comparison-values strong { margin: var(--space-1) 0; font-size: var(--text-display); }
.comparison-arrow { color: var(--app-subtle); font-size: var(--text-title); }

.signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.signal-card { display: flex; flex-direction: column; min-height: 314px; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--app-surface); }
.signal-primary { background: var(--theme-primary); }
.signal-number { color: var(--app-muted); font-size: var(--text-caption); font-weight: 600; }
.signal-tag { align-self: flex-start; margin-top: var(--space-6); padding: var(--space-1) var(--space-2); border-radius: var(--radius-micro); background: var(--app-surface-alt); font-size: var(--text-caption); font-weight: 500; }
.signal-primary .signal-tag { background: var(--theme-primary-soft); }
.signal-card h3 { margin: var(--space-4) 0 0; font-size: var(--text-display); line-height: 1.24; letter-spacing: -0.025em; }
.signal-card p { margin: var(--space-4) 0 var(--space-6); color: var(--app-muted); font-size: var(--text-ui); line-height: 1.6; }
.signal-card button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 40px; margin-top: auto; padding: 0; border: 0; border-top: 1px solid var(--app-line); background: none; color: var(--app-ink); text-align: left; font-size: var(--text-ui); font-weight: 600; }
.signal-primary button { border-color: var(--theme-primary-soft); }
.signal-card button:hover, .signal-card button:focus-visible { color: var(--app-muted); }
.signal-foot { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); color: var(--app-muted); font-size: var(--text-ui); }
.signal-foot .dot { margin: 0; }

.prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.prompt-card { min-width: 0; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--app-surface); }
.prompt-type { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-micro); background: var(--theme-primary-soft); font-size: var(--text-caption); font-weight: 600; }
.prompt-card:nth-child(2) .prompt-type { background: var(--theme-secondary-soft); }
.prompt-card h3 { margin: var(--space-4) 0 var(--space-3); font-size: var(--text-title); }
.prompt-context, .prompt-note, .prompt-caveat { color: var(--app-muted); font-size: var(--text-ui); line-height: 1.7; }
.prompt-context { min-height: 76px; margin-bottom: var(--space-6); }
.prompt-label { display: block; margin: var(--space-6) 0 var(--space-2); color: var(--app-muted); font-size: var(--text-label); font-weight: 600; }
.prompt-card pre { overflow-wrap: anywhere; margin: 0; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--app-surface-alt); font-family: inherit; font-size: var(--text-ui); line-height: 1.7; white-space: pre-wrap; }
.prompt-card code { font-family: inherit; }
.prompt-note { margin: var(--space-4) 0 0; }
.prompt-source { overflow-wrap: anywhere; margin: var(--space-6) 0 0; color: var(--app-subtle); font-size: var(--text-caption); line-height: 1.6; }
.prompt-caveat { margin: var(--space-3) 0 0; padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); background: var(--theme-secondary-soft); }

.sample-toolbar { display: flex; align-items: end; gap: var(--space-3); margin-bottom: var(--space-3); }
.sample-toolbar label { display: grid; gap: var(--space-2); color: var(--app-muted); font-size: var(--text-caption); font-weight: 500; }
.search-field { flex: 1; min-width: 160px; }
.filter-field { width: 140px; }
.sample-toolbar input, .sample-toolbar select, .review-controls select, .review-note { width: 100%; min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--app-surface); color: var(--app-ink); font-size: var(--text-ui); }
.sample-toolbar input:focus, .sample-toolbar select:focus, .review-controls select:focus, .review-note:focus { outline: 0; background: var(--theme-primary-soft); }
.export-button { min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: var(--app-inverse); color: var(--app-inverse-ink); font-size: var(--text-ui); font-weight: 500; white-space: nowrap; }
.export-button:hover, .export-button:focus-visible { background: var(--app-muted); }
.sample-workspace { display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr); gap: var(--space-3); align-items: start; }
.sample-list-panel, .sample-detail { border-radius: var(--radius-lg); background: var(--app-surface); }
.sample-list-panel { overflow: hidden; }
.list-head { display: flex; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--app-line); color: var(--app-muted); font-size: var(--text-label); font-weight: 500; }
.sample-list { max-height: 730px; overflow-y: auto; padding: var(--space-2); }
.sample-row { display: block; width: 100%; padding: var(--space-3); border: 0; border-radius: var(--radius-xs); background: var(--app-surface); color: var(--app-ink); text-align: left; }
.sample-row:hover, .sample-row:focus-visible { background: var(--app-nav-current); }
.sample-row[aria-selected="true"] { background: var(--app-nav-current); }
.sample-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sample-row-head strong { font-size: var(--text-label); }
.sample-row-head span { padding: var(--space-1) var(--space-2); border-radius: var(--radius-micro); background: var(--theme-primary-soft); font-size: var(--text-caption); font-weight: 600; }
.sample-row-question { display: block; margin-top: var(--space-2); overflow: hidden; color: var(--app-ink); font-size: var(--text-ui); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.sample-row-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); color: var(--app-subtle); font-size: var(--text-caption); }
.sample-row-flag { color: var(--app-ink); }
.sample-detail { position: sticky; top: var(--space-4); min-height: 480px; padding: var(--space-6); }
.detail-empty { display: grid; min-height: 360px; place-items: center; color: var(--app-subtle); font-size: var(--text-ui); text-align: center; }
.detail-top { display: flex; justify-content: space-between; gap: var(--space-4); align-items: start; }
.detail-label { color: var(--app-subtle); font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.1em; }
.detail-top h3 { margin: var(--space-2) 0 0; font-size: var(--text-title); line-height: 1.35; }
.detail-score { min-width: 80px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--theme-secondary-soft); text-align: center; }
.detail-score small, .detail-score strong { display: block; }
.detail-score small { color: var(--app-muted); font-size: var(--text-caption); }
.detail-score strong { margin-top: var(--space-1); font-size: var(--text-display); }
.detail-question { margin-top: var(--space-6); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--app-surface-alt); }
.detail-question small { color: var(--app-muted); font-size: var(--text-caption); }
.detail-question p { margin: var(--space-2) 0 0; font-size: var(--text-body); line-height: 1.55; white-space: pre-wrap; }
.audio-area { margin-top: var(--space-6); }
.detail-section-label { display: block; margin-bottom: var(--space-2); color: var(--app-muted); font-size: var(--text-label); font-weight: 500; }
.audio-area audio { display: block; width: 100%; height: 48px; }
.audio-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); color: var(--app-subtle); font-size: var(--text-caption); }
.detail-flags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.flag-chip { padding: var(--space-1) var(--space-2); border-radius: var(--radius-micro); background: var(--theme-primary-soft); font-size: var(--text-caption); }
.score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-6); }
.score-cell { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--app-surface-alt); }
.score-cell span, .score-cell strong { display: block; }
.score-cell span { color: var(--app-muted); font-size: var(--text-caption); }
.score-cell strong { margin-top: var(--space-1); font-size: var(--text-title-sm); }
.feedback-block { margin-top: var(--space-6); }
.feedback-block p { margin: 0; color: var(--app-ink); font-size: var(--text-ui); line-height: 1.7; white-space: pre-wrap; }
.feedback-block.upgrade p { color: var(--app-muted); }
.review-block { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--app-line); }
.review-controls { display: grid; gap: var(--space-2); }
.review-controls select { background: var(--app-surface-alt); }
.review-note { min-height: 84px; margin-top: var(--space-3); padding: var(--space-3); background: var(--app-surface-alt); line-height: 1.5; resize: vertical; }
.review-hint { margin: var(--space-2) 0 0; color: var(--app-subtle); font-size: var(--text-caption); }
.no-results { padding: var(--space-6); color: var(--app-muted); text-align: center; font-size: var(--text-ui); }

.method-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.method-grid > div { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--app-surface); }
.method-index { color: var(--app-subtle); font-size: var(--text-caption); font-weight: 600; }
.method-grid h3 { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-title-sm); }
.method-grid p { margin: 0; color: var(--app-muted); font-size: var(--text-ui); line-height: 1.65; }
.footer { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-16); padding: var(--space-6) 0 0; border-top: 1px solid var(--app-line); color: var(--app-subtle); font-size: var(--text-caption); }
.load-error { position: fixed; right: var(--space-6); bottom: var(--space-6); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--app-inverse); color: var(--app-inverse-ink); font-size: var(--text-ui); }

@media (max-width: 1100px) {
  .shell { grid-template-columns: 208px minmax(0, 1fr); }
  .content { padding-right: var(--space-6); padding-left: var(--space-6); }
  .topbar { padding: 0 var(--space-6); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-card:last-child { grid-column: 1 / -1; min-height: 210px; }
  .prompt-grid { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { font-size: 90%; --text-caption: max(0.6875rem, 11px); --text-label: max(0.75rem, 12px); --text-ui: max(0.8125rem, 13px); --text-body-sm: max(0.875rem, 14px); --text-body: max(0.9375rem, 15px); --text-title-sm: max(1rem, 16px); --text-title: max(1.125rem, 18px); --text-display: max(1.375rem, 22px); }
  .shell { display: block; }
  .sidebar { position: static; height: auto; padding: var(--space-3) var(--space-4); }
  .brand-mark { width: 36px; height: 36px; }
  .brand small, .nav-label, .sidebar-foot { display: none; }
  .side-nav { display: flex; gap: var(--space-1); margin-top: var(--space-3); overflow-x: auto; }
  .side-nav a { flex: 0 0 auto; min-height: 40px; padding: 0 var(--space-2); }
  .side-nav a span { display: none; }
  .topbar { min-height: 44px; padding: 0 var(--space-4); }
  .breadcrumbs { font-size: var(--text-caption); }
  .private-tag { display: none; }
  .content { padding: var(--space-4); }
  .hero { padding: var(--space-6); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero h1 { font-size: 2.75rem; }
  .hero-note { padding: var(--space-4); }
  .hero-note strong { margin-top: var(--space-3); }
  .overview-section, .signals-section, .prompts-section, .samples-section, .method-section { margin-top: var(--space-12); }
  .section-heading { align-items: start; flex-direction: column; gap: var(--space-2); }
  .metric-grid, .analysis-grid, .signal-grid, .method-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 120px; }
  .signal-card, .signal-card:last-child { grid-column: auto; min-height: 240px; }
  .prompt-card { padding: var(--space-4); }
  .prompt-context { min-height: 0; }
  .prompt-caveat { padding: var(--space-4); }
  .comparison-panel { grid-template-columns: 1fr; gap: var(--space-6); }
  .sample-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-field { grid-column: 1 / -1; }
  .filter-field { width: auto; }
  .export-button { grid-column: 1 / -1; }
  .sample-workspace { grid-template-columns: 1fr; }
  .sample-list { max-height: 320px; }
  .sample-detail { position: static; }
  .method-grid { grid-template-columns: 1fr; }
  .method-grid h3 { margin-top: var(--space-4); }
}