:root{
  color-scheme:light;
  --page:#f4f7f6;
  --surface:#fff;
  --surface-soft:#f8faf9;
  --ink:#17242d;
  --text:#40515a;
  --muted:#6b7880;
  --line:#dce6e2;
  --brand:#155e75;
  --brand-dark:#104b5d;
  --brand-soft:#e8f3f5;
  --hard:#9a4336;
  --hard-soft:#fff0ec;
  --easy:#2f6f5e;
  --easy-soft:#eaf5f1;
  --stable:#526a8a;
  --stable-soft:#eef3fa;
  --warning:#956017;
  --warning-soft:#fff7e8;
  --shadow:0 12px 32px rgba(20,42,50,.07);
  --radius-xl:26px;
  --radius-lg:18px;
  --touch:44px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--page)}
body{margin:0;min-width:0;overflow-x:hidden;background:linear-gradient(180deg,#f7faf9 0%,#f4f7f6 55%,#f8f5f0 100%);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font:inherit}
a{color:inherit}
:where(button,a,summary):focus-visible{outline:3px solid rgba(21,94,117,.4);outline-offset:3px}
.page{width:min(1180px,calc(100vw - 32px));margin:0 auto;padding:24px 0 54px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:start;padding:32px;border:1px solid var(--line);border-radius:var(--radius-xl);background:linear-gradient(135deg,#fff 0%,#f6fbfa 62%,#fff8f1 100%);box-shadow:var(--shadow)}
.eyebrow{display:inline-flex;align-items:center;min-height:30px;padding:6px 11px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:13px;font-weight:900}
h1{margin:14px 0 0;font-size:clamp(30px,4vw,48px);line-height:1.12;letter-spacing:-.045em}
.lead{max-width:850px;margin:14px 0 0;color:var(--text);font-size:16px;line-height:1.75;font-weight:600}
.hero-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.status-pill,.hero-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 13px;border:1px solid rgba(21,94,117,.18);border-radius:999px;background:#fff;color:var(--brand);font-size:13px;font-weight:900;text-decoration:none;white-space:nowrap}
.status-pill.is-ready{background:var(--brand-soft)}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
.metric{padding:17px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.95);box-shadow:0 5px 16px rgba(20,42,50,.04)}
.metric b{display:block;font-size:27px;line-height:1.05;font-variant-numeric:tabular-nums}
.metric span{display:block;margin-top:7px;color:var(--muted);font-size:13px;line-height:1.5}
.panel{margin-top:16px;padding:24px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 7px 22px rgba(20,42,50,.045)}
.panel h2{margin:0;font-size:clamp(23px,2.5vw,31px);line-height:1.25;letter-spacing:-.03em}
.panel-intro{margin:8px 0 0;color:var(--text);font-size:14.5px;line-height:1.75}
.human-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:17px}
.human-guide article{padding:17px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft)}
.human-guide b{display:block;font-size:16px}
.human-guide p{margin:7px 0 0;color:var(--text);font-size:13.5px;line-height:1.65}
.human-guide .harder b{color:var(--hard)}
.human-guide .easier b{color:var(--easy)}
.human-guide .stable b{color:var(--stable)}
.view-tabs{position:sticky;top:8px;z-index:5;display:flex;gap:8px;margin-top:16px;padding:8px;border:1px solid var(--line);border-radius:16px;background:rgba(244,247,246,.92);backdrop-filter:blur(12px);box-shadow:0 5px 16px rgba(20,42,50,.05)}
.view-tab{min-height:var(--touch);padding:10px 15px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text);font-weight:900;cursor:pointer}
.view-tab.is-active{border-color:rgba(21,94,117,.22);background:#fff;color:var(--brand);box-shadow:0 3px 10px rgba(20,42,50,.05)}
.view-panel[hidden]{display:none}
.difficulty-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:17px}
.difficulty-card{min-width:0;padding:18px;border:1px solid var(--line);border-left-width:5px;border-radius:17px;background:#fff}
.difficulty-card.is-harder{border-left-color:var(--hard)}
.difficulty-card.is-easier{border-left-color:var(--easy)}
.difficulty-card.is-stable{border-left-color:var(--stable)}
.difficulty-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.difficulty-card h3{margin:0;min-width:0;font-size:19px;line-height:1.35;letter-spacing:-.02em}
.difficulty-status{flex:0 0 auto;display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border-radius:999px;font-size:12.5px;font-weight:900;white-space:nowrap}
.is-harder .difficulty-status{background:var(--hard-soft);color:var(--hard)}
.is-easier .difficulty-status{background:var(--easy-soft);color:var(--easy)}
.is-stable .difficulty-status{background:var(--stable-soft);color:var(--stable)}
.difficulty-conclusion{margin:14px 0 0;font-size:16px;line-height:1.55;font-weight:900}
.difficulty-explain,.difficulty-samples{margin:7px 0 0;color:var(--text);font-size:13.5px;line-height:1.65}
.difficulty-samples{color:var(--muted)}
.data-details{margin-top:13px;border-top:1px dashed var(--line);padding-top:11px}
.data-details summary{display:inline-flex;min-height:36px;align-items:center;color:var(--brand);font-size:13px;font-weight:900;cursor:pointer}
.data-details-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.data-details-grid span{display:block;padding:10px;border-radius:12px;background:var(--surface-soft)}
.data-details-grid b{display:block;font-size:15px;font-variant-numeric:tabular-nums}
.data-details-grid small{display:block;margin-top:4px;color:var(--muted);font-size:11.5px;line-height:1.45}
.data-details p{margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.65}
.score-band-buttons{display:flex;gap:8px;overflow-x:auto;margin-top:16px;padding-bottom:3px;scrollbar-width:none}
.score-band-buttons::-webkit-scrollbar{display:none}
.score-band-button{flex:0 0 auto;min-height:var(--touch);padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text);font-weight:900;cursor:pointer}
.score-band-button.is-active{border-color:rgba(21,94,117,.35);background:var(--brand-soft);color:var(--brand)}
.band-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;margin-top:16px;padding:18px;border-radius:17px;border:1px solid var(--line);background:var(--surface-soft)}
.band-summary.is-harder{background:linear-gradient(135deg,var(--hard-soft),#fff)}
.band-summary.is-easier{background:linear-gradient(135deg,var(--easy-soft),#fff)}
.band-summary.is-stable{background:linear-gradient(135deg,var(--stable-soft),#fff)}
.band-summary-kicker{display:block;color:var(--muted);font-size:12.5px;font-weight:900}
.band-summary h3{margin:5px 0 0;font-size:20px}
.band-summary p{margin:7px 0 0;color:var(--text);font-size:13.5px;line-height:1.65}
.band-summary-count{text-align:right}
.band-summary-count b{display:block;font-size:27px;font-variant-numeric:tabular-nums}
.band-summary-count span{display:block;margin-top:4px;color:var(--muted);font-size:12.5px}
.method-note{background:linear-gradient(135deg,#fffaf1,#fff)}
.method-note p{margin:9px 0 0;color:var(--text);font-size:14px;line-height:1.75}
.method-note strong{color:var(--warning)}
.footer{margin-top:22px;padding:18px 4px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;line-height:1.7;text-align:center}
.empty-state{grid-column:1/-1;padding:28px;border:1px dashed var(--line);border-radius:16px;background:var(--surface-soft);text-align:center;color:var(--text)}
.empty-state p{margin:7px 0 0;color:var(--muted)}
@media(max-width:900px){
  .page{width:min(calc(100vw - 24px),1180px);padding-top:12px}
  .hero{grid-template-columns:1fr;padding:24px}
  .hero-actions{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .human-guide{grid-template-columns:1fr}
  .difficulty-grid{grid-template-columns:1fr}
  .band-summary{grid-template-columns:1fr}
  .band-summary-count{text-align:left}
}
@media(max-width:520px){
  .page{width:min(calc(100vw - 16px),1180px);padding-top:8px}
  .hero,.panel{padding:18px 15px;border-radius:18px}
  h1{font-size:clamp(27px,9vw,35px)}
  .lead{font-size:14.5px}
  .metrics{grid-template-columns:1fr 1fr;gap:8px}
  .metric{padding:14px}
  .metric b{font-size:23px}
  .view-tabs{position:static;display:grid;grid-template-columns:1fr 1fr}
  .view-tab{padding-inline:8px}
  .difficulty-card{padding:15px 13px}
  .difficulty-card-head{display:block}
  .difficulty-status{margin-top:8px}
  .data-details-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}