:root {
  color-scheme: light;
  font: 16px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #263b4a;
  background: #f5f8fa;
  --navy: #183750;
  --navy-strong: #122b3b;
  --teal: #117f79;
  --teal-dark: #0d6864;
  --sky: #2c81b8;
  --sky-soft: #eaf4fa;
  --ink: #263b4a;
  --muted: #596d78;
  --line: #d8e3e9;
  --surface: #fff;
  --wash: #f5f8fa;
  --soft: #f0f5f7;
  --gold: #9a6b1e;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--wash); color: var(--ink); }
a { color: var(--teal-dark); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible { outline: 3px solid #62a9d2; outline-offset: 3px; }
button, input, select { font: inherit; }
[hidden] { display: none !important; }

header {
  max-width: 1240px;
  margin: 0 auto;
  min-height: 104px;
  padding: 15px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 5; padding: 9px 12px; transform: translateY(-150%); border-radius: 5px; background: var(--navy); color: #fff; }
.skip-link:focus { transform: translateY(0); color: #fff; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: min(250px, 42vw); height: auto; object-fit: contain; object-position: left center; }
.local { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.local::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px #e2f2ef; }
main { max-width: 1120px; margin: 0 auto; padding: 40px 28px 0; }
.eyebrow { color: var(--teal-dark); font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3 { color: var(--navy); }
h1 { max-width: 760px; margin: 13px 0 15px; font: 500 clamp(36px, 5vw, 58px)/1.08 Georgia, "Songti SC", serif; letter-spacing: -.035em; }
h2 { margin: 8px 0 16px; font-size: 26px; line-height: 1.25; letter-spacing: -.025em; }
h3 { margin: 16px 0 8px; font-size: 18px; line-height: 1.35; }
p { margin: 12px 0; }
.intro { max-width: 760px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 9px; margin: 25px 0 28px; }
.guide-nav :is(a, button) { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; border: 1px solid #c8d9e2; border-radius: 7px; background: white; color: var(--navy); font: 600 13px/1.4 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.guide-nav :is(a, button):hover { border-color: #8cb9cf; background: var(--sky-soft); color: var(--navy-strong); }
.steps { display: flex; gap: 24px; padding: 0; margin: 28px 0 22px; list-style: none; color: #687c86; font-size: 13px; }
.steps li { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 11px 0; border-top: 2px solid #cfdae0; }
.steps .active { border-color: var(--teal); color: var(--teal-dark); font-weight: 700; }
.steps li:first-child::first-letter { font-size: 18px; }
.card { margin: 20px 0; padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 26px #18375008; }
.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.pill { flex: none; padding: 6px 12px; border: 1px solid #d4e5eb; border-radius: 999px; background: var(--sky-soft); color: #285a74; font-size: 11px; white-space: nowrap; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 29px 22px; border: 1.5px dashed #8fb4c7; border-radius: 10px; background: #f8fbfd; color: var(--muted); font-size: 13px; text-align: center; cursor: pointer; }
.drop:hover, .drop:focus-within { border-color: var(--sky); background: #f0f8fc; }
.drop strong { color: var(--navy); font-size: 19px; }
.upload-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--sky-soft); color: var(--sky); font-size: 28px; line-height: 48px; }
.drop input { max-width: 100%; margin: 8px auto 0; font: inherit; }
.muted { color: var(--muted); font-size: 13px; }
.divider { margin: 26px 0 12px; color: #647984; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.sample-grid, .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sample { padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--navy); font: inherit; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sample:hover { border-color: #8cb9cf; background: #f5fafc; }
.sample strong, .sample small { display: block; }
.sample strong { font-size: 14px; }
.sample small { margin-top: 5px; color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.stats span { padding: 8px 12px; border: 1px solid #d9e6eb; border-radius: 7px; background: #f2f7f9; font-size: 13px; }
label { color: var(--navy); font-size: 13px; font-weight: 600; }
select, input[type=number], input[type=file] { color: var(--ink); }
select, input[type=number] { display: block; width: 100%; min-height: 42px; margin-top: 6px; padding: 9px 11px; border: 1px solid #bccdd6; border-radius: 6px; background: white; font: inherit; }
select:hover, input[type=number]:hover { border-color: #82a9bc; }
.form-grid { margin: 18px 0; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; color: var(--ink); font-weight: 450; line-height: 1.55; }
.check input, .marker-grid input { flex: 0 0 auto; accent-color: var(--teal); }
.check input { margin: 5px 0 0; }
.moment-master { font-weight: 600; }
.public-moment-contact-review { margin: 14px 0 18px 26px; padding: 12px 16px; border-left: 3px solid var(--teal); background: #f7fafb; }
.public-moment-contact-review h4 { margin: 0 0 8px; }
#public-moment-contacts p { margin: 6px 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.public-moment-contact-review .check { margin-bottom: 0; }
.moment-frequency-options { margin: 0 0 14px 26px; padding: 14px 18px 18px; border: 1px solid var(--line); border-radius: 8px; }
.moment-frequency-options legend { padding: 0 7px; font-weight: 600; }
.moment-mode-options { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 12px; }
.moment-mode-options .check { margin: 0; }
.moment-frequency-options:disabled { color: var(--muted); border-color: #dbe3e8; }
.moment-frequency-options:disabled .check { color: var(--muted); }
.moment-frequency-options input:disabled { background: #edf2f5; color: var(--muted); cursor: not-allowed; }
@media (max-width: 600px) { .moment-frequency-options { margin-left: 0; padding: 12px; } }
details { margin: 19px 0; padding-top: 14px; border-top: 1px solid #e2e9ed; }
summary { color: var(--navy); font-size: 14px; font-weight: 650; cursor: pointer; }
summary:hover { color: var(--teal-dark); }
.marker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; max-height: 210px; overflow: auto; padding: 10px; border: 1px solid #e0e8ec; border-radius: 7px; background: #fafcfd; }
.marker-grid label { display: flex; align-items: flex-start; gap: 7px; min-width: 0; color: var(--ink); font-size: 12px; font-weight: 450; overflow-wrap: anywhere; }
.marker-grid input { margin-top: 3px; }
.note { margin: 18px 0; padding: 15px 17px; border: 1px solid #d5e4eb; border-left: 4px solid var(--sky); border-radius: 7px; background: #f1f8fb; color: #294657; font-size: 14px; }
.note p { margin: 7px 0 0; }
.note b, .note strong { color: var(--navy); }
.primary { display: inline-block; padding: 12px 19px; border: 1px solid var(--teal-dark); border-radius: 6px; background: var(--teal); color: white; font: 650 14px system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.primary:hover { border-color: var(--navy); background: var(--navy); color: white; }
.primary span { margin-left: 22px; }
.secondary { color: var(--teal-dark); font-size: 13px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0; }
.actions .secondary { padding: 10px 13px; border: 1px solid #c8d9e2; border-radius: 6px; background: #fff; text-decoration: none; }
.actions .secondary:hover { background: var(--sky-soft); }
img { max-width: 100%; height: auto; }
.demo-figure { margin: 22px 0; }
.demo-figure img, #results > img, #force-results img, #moment-results img { display: block; width: 100%; border: 1px solid #dbe5e9; border-radius: 8px; background: #fff; }
.demo-figure figcaption { max-width: 900px; margin-top: 11px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.figure-guide { max-width: 820px; color: var(--muted); font-size: 13px; }
.force-values { margin: 20px 0 30px; overflow-x: auto; }
.force-values h4 { margin-bottom: 10px; }
#results .force-values table { display: table; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.force-values caption { text-align: left; color: var(--muted); font-size: 14px; margin-bottom: 10px; }
#results .force-values tbody th { text-align: left; font-weight: 600; }
#results .force-values td, #results .force-values thead th:not(:first-child) { text-align: right; }
#status { padding: 14px 17px; border: 1px solid #c9e2dc; border-radius: 8px; background: #edf7f4; color: #245e56; font-size: 14px; }
#status.error { border-color: #e6c6c0; background: #fff2ef; color: #883b31; }
button:disabled { opacity: .55; cursor: wait; }
#filename { overflow-wrap: anywhere; }
footer { display: flex; justify-content: space-between; gap: 18px; margin-top: 42px; padding: 22px 0 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.conclusion-card { border-top: 4px solid var(--teal); }
.conclusion-verdict { margin: 12px 0; color: #795815; font-size: clamp(22px, 3vw, 30px); font-weight: 750; line-height: 1.25; }
.conclusion-intro { margin: 0 0 18px; color: var(--muted); }
.conclusion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 12px; }
.conclusion-item { padding: 15px; border: 1px solid #dce6eb; border-radius: 9px; background: #f5f8fa; }
.conclusion-item.passed { border-color: #b8dacf; background: #eff8f5; }
.conclusion-item.tradeoff, .example-verdict { border-color: #e7d4a7; background: #fff8e9; }
.conclusion-item h3 { margin: 0 0 7px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.conclusion-value { margin: 0 0 7px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.conclusion-detail { margin: 0; color: var(--muted); font-size: 13px; }
.conclusion-next { margin: 18px 0; padding-left: 13px; border-left: 3px solid var(--teal); }
.conclusion-card table, #results table { width: 100%; border-collapse: collapse; font-size: 12px; }
.conclusion-card td, .conclusion-card th, #results td, #results th { padding: 8px; border-bottom: 1px solid #dce6eb; text-align: left; }
#results table { display: block; overflow-x: auto; }
.recommendation-scope { color: var(--muted); font-size: 13px; font-weight: 650; }
.guide-nav a { text-align: center; }
.learning-card { margin-top: 22px; scroll-margin-top: 18px; }
.learning-card p, .learning-card li { font-size: 14px; }
.theory-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.theory-flow > div { padding: 16px; border: 1px solid #dce6eb; border-radius: 8px; background: #f5f8fa; }
.theory-flow h3 { margin: 0 0 7px; font-size: 16px; }
.theory-flow p { margin: 0; color: var(--muted); }
.protocol-list { padding-left: 24px; }
.protocol-list li { padding: 5px 0 10px; }
.methods-link { display: inline-block; margin: 0 0 12px; padding: 8px 12px; border: 1px solid #c8d9e2; border-radius: 6px; background: var(--sky-soft); color: var(--navy); font-size: 13px; font-weight: 650; text-decoration: none; }
.demo-scope { margin-top: 25px; padding-left: 15px; border-left: 3px solid var(--teal); }
.demo-plot summary { font-size: 15px; }
.reporting-checklist { max-width: 860px; padding-left: 23px; }
.reporting-checklist li { padding: 4px 0 11px; }
.reporting-checklist strong { display: block; margin-bottom: 3px; }
#study-reporting > p { max-width: 800px; }
@media (max-width: 750px) {
  main { padding: 30px 20px 0; }
  .card { padding: 23px; }
  .theory-flow { grid-template-columns: 1fr; }
  .guide-nav :is(a, button) { flex: 1 1 42%; }
}
@media (max-width: 560px) {
  header { min-height: 0; padding: 13px 18px; gap: 6px; align-items: flex-start; flex-direction: column; }
  .brand img { width: min(225px, 75vw); height: auto; }
  .local { max-width: none; white-space: normal; font-size: 10px; line-height: 1.35; }
  main { padding: 25px 15px 0; }
  h1 { font-size: clamp(34px, 11vw, 46px); }
  .intro { font-size: 15px; }
  .card { padding: 19px 17px; border-radius: 10px; }
  .section-head { display: block; }
  .pill { display: inline-block; margin: 0 0 12px; }
  .sample-grid, .form-grid { grid-template-columns: 1fr; }
  .marker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { gap: 10px; font-size: 12px; }
  .steps li { gap: 7px; }
  .drop { padding: 21px 13px; }
  .guide-nav { gap: 7px; }
  .guide-nav :is(a, button) { flex-basis: 100%; }
  footer { display: block; margin-top: 30px; }
  footer span { display: block; margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Make the recording-specific settings the primary reading target. */
.recommended-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:22px 0; }
.recommended-settings > div { padding:24px; border:1px solid #b8dacf; border-radius:12px; background:#eff8f5; }
.recommended-settings span { display:block; font-size:15px; font-weight:650; color:var(--navy); }
.recommended-settings strong { display:block; font-size:clamp(28px,5vw,52px); line-height:1.2; margin-top:10px; color:var(--teal-dark); overflow-wrap:anywhere; }
.recommendation-evidence { font-weight:600; }
.recommendation-uncertainty { padding-left:14px; border-left:3px solid #b88a39; }
@media(max-width:560px) { .recommended-settings { grid-template-columns:1fr; } }

.analysis-scopes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0; }
.analysis-scopes > div { border:1px solid var(--line); border-radius:9px; padding:16px; background:white; }
.analysis-scopes strong { color:var(--navy); }
.analysis-scopes p { font-size:13px; margin:7px 0 0; color:var(--muted); }
.saved-result { border:2px dashed #b88a39; padding:20px; background:#fffaf0; margin-bottom:24px; }
.saved-scope-label { font-size:13px; font-weight:750; color:#795815; }
.force-failure { padding:14px; border:2px solid #b46638; border-radius:8px; background:#fff1e6; color:#733a20; }
@media(max-width:750px) { .analysis-scopes { grid-template-columns:1fr; } }

.live-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:start; }
.live-method { padding:20px; border:1px solid var(--line); border-radius:12px; background:#fff; min-width:0; }
.live-method > h3 { margin-top:0; }
.live-method .recommended-settings { gap:8px; }
.live-method .recommended-settings > div { padding:14px; }
.live-method .recommended-settings strong { font-size:clamp(24px,3vw,38px); }
.method-agreement { padding:18px; background:#edf6f4; border-left:4px solid var(--teal-dark); }
@media(max-width:900px) { .live-methods { grid-template-columns:1fr; } }

.method-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; }
.method-option { min-width:0; border:1px solid #b8dacf; background:#eff8f5; border-radius:10px; padding:16px; }
.method-option h3 { margin:0; font-size:17px; line-height:1.3; }
.method-status { color:var(--muted); font-size:13px; margin:8px 0; }
.method-values { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.method-values span { display:block; font-size:13px; }
.method-values strong { display:block; font-size:clamp(22px,3vw,30px); color:var(--teal-dark); overflow-wrap:anywhere; line-height:1.3; }
.method-scope,.method-force { font-size:13px; line-height:1.5; margin:8px 0 0; }
.method-force { font-weight:650; }
.method-details { display:grid; grid-template-columns:1fr; gap:10px; margin-top:16px; }
.method-details > details { margin:0; border:1px solid var(--line); border-radius:8px; padding:12px; }
.method-details .live-method { border:0; padding:10px 0; }
@media(max-width:599px) { .method-overview { grid-template-columns:1fr; } }
#method-moment-results table { display:table; width:100%; margin:20px 0; font-size:14px; }
#method-moment-results table th:last-child,
#method-moment-results table td:last-child { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
#method-moment-results .method-option h4 { margin:0 0 8px; }
#method-moment-results .method-option > strong { font-size:clamp(18px,2.5vw,24px); color:var(--teal-dark); }

/* Bilingual interface: explicit language selection, including narrow screens. */
.language-switch{display:flex;gap:4px;flex-shrink:0;padding:4px;border:1px solid #bdd2d1;border-radius:99px;background:#fff}
.language-switch button{font:inherit;font-size:14px;padding:7px 12px;border:0;border-radius:99px;background:transparent;color:#183750;cursor:pointer}
.language-switch button[aria-pressed="true"]{background:#0b7773;color:white;font-weight:700}
.language-switch button:focus-visible{outline:3px solid #dfaa45;outline-offset:2px}
.language-note{max-width:1180px;margin:10px auto;padding:0 24px;color:#536975;font-size:14px;line-height:1.7}
html[lang="zh-CN"] body{font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.8}
@media(max-width:700px){header{flex-wrap:wrap;gap:12px}.language-switch{margin-left:auto}}

/* Saved public evidence: two signal checks, then the complete moment assessment. */
.saved-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.saved-evidence-grid .saved-moment-evidence { grid-column: 1 / -1; }
.saved-evidence-grid .conclusion-value { font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1.35; font-variant-numeric: tabular-nums; }
.saved-evidence-grid .conclusion-detail { font-size: 14px; line-height: 1.65; }
@media (max-width: 599px) { .saved-evidence-grid { grid-template-columns: minmax(0, 1fr); } }

.participant-info{margin:0 0 22px;padding:18px;border:1px solid var(--line);border-radius:12px;background:#f6f9fb}.participant-info h3{margin:0 0 14px}.participant-info input[readonly]{background:#eaf0f4;color:#425466}.participant-info p{margin-bottom:0}


.marker-protocol-panel{margin:20px 0;padding:18px;border:1px solid var(--line);border-radius:12px;background:#f6f9fb}.marker-protocol-panel h3{margin-top:0}.marker-protocol-panel select{max-width:100%}.mapping-section{margin:18px 0}.mapping-section h4{margin-bottom:10px}.protocol-mappings select[multiple]{min-height:130px;padding:8px}.protocol-mappings select[multiple] option{padding:5px}.protocol-mappings .marker-role{font-family:ui-monospace,monospace;font-size:13px}#marker-protocol-details a{display:inline-block;margin:4px 12px 4px 0}
.cgm-settings{margin:20px 0;padding:18px;border:1px solid var(--line);border-radius:10px;background:#f6f9fb}.cgm-settings h4{margin:0 0 12px}.cgm-settings .form-grid{margin:14px 0}.cgm-settings textarea{display:block;box-sizing:border-box;width:100%;max-width:100%;font:13px/1.5 ui-monospace,monospace;padding:12px;border:1px solid var(--line);border-radius:8px;resize:vertical}.cgm-marker-support{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:6px}#cgm-ik-weights{grid-template-columns:repeat(auto-fit,minmax(115px,1fr))}.cgm-settings input:disabled,.cgm-settings select:disabled{background:#eaf0f4;color:#425466}
.data-scope-warning{padding:16px 18px;margin:16px 0;border:1px solid #d8aa48;border-left:4px solid #b47b12;border-radius:8px;background:#fff8e9;color:#553f18;line-height:1.6}.data-scope-warning h3{margin:0 0 8px;font-size:17px}.data-scope-warning p{margin:0}

.primary-moment-result{margin:24px 0;padding:20px;border-left:4px solid #137f76;background:#eff8f6;line-height:1.65}.primary-moment-result h3{margin:0 0 12px}.primary-moment-result p{margin:8px 0}.primary-moment-result strong{font-size:18px}

/* Recording history and temporary-result controls. */
.recording-job{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line)}.recording-job p{margin:4px 0}.recording-job strong{overflow-wrap:anywhere}.job-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
:is(#session-notice,#my-recordings,.recording-job) :is(button,a).secondary{display:inline-flex;align-items:center;justify-content:center;padding:10px 13px;border:1px solid #c8d9e2;border-radius:6px;background:var(--surface);color:var(--teal-dark);font-size:13px;font-weight:600;line-height:1.4;text-decoration:none;cursor:pointer}
:is(#session-notice,#my-recordings,.recording-job) :is(button,a).secondary:hover:not(:disabled){border-color:#8cb9cf;background:var(--sky-soft);color:var(--navy)}
:is(#session-notice,#my-recordings,.recording-job) button.secondary:disabled{opacity:.55;cursor:wait}
.job-expiry{margin:8px 0;font-size:13px;color:var(--navy);line-height:1.55}.retention-countdown{display:block;margin-top:3px;color:var(--muted);font-size:13px}[aria-disabled=true]{opacity:.55;cursor:not-allowed;text-decoration:none}
@media(max-width:650px){.recording-job{align-items:flex-start;flex-direction:column}}