@font-face {
  font-family: "DocFormat Serif Web";
  src: url("./fonts/docformat-serif-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DocFormat Serif Web";
  src: url("./fonts/docformat-serif-semibold.woff") format("woff");
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f5f2eb;
  --surface: #fffefb;
  --ink: #25221f;
  --muted: #6d675f;
  --line: #d6cfc4;
  --soft-line: #e7e1d8;
  --accent: #983d2b;
  --accent-dark: #743022;
  --accent-soft: #f3e5df;
  --green: #55705a;
  --shadow: 0 14px 34px rgba(62, 52, 42, .055);
  font-family: "DocFormat Serif Web", "Source Han Serif CN", "Noto Serif CJK SC", "Songti SC", STSong, SimSun, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
}

button, input, select { font: inherit; }
button { color: inherit; }

.topbar {
  height: 76px;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: #fbf9f4;
}

.brand { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: block; flex: 0 0 auto; border-radius: 8px; object-fit: cover; box-shadow: 0 5px 14px rgba(20, 79, 184, .18); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; letter-spacing: .06em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.privacy-pill { padding: 8px 13px; display: flex; align-items: center; gap: 8px; border: 1px solid #cfd8cf; border-radius: 3px; color: var(--green); background: #fff; font-size: 13px; }
.privacy-pill span, .runtime-state span { width: 7px; height: 7px; border-radius: 50%; background: #6f9875; box-shadow: 0 0 0 4px rgba(111,152,117,.12); }

main { width: min(1080px, calc(100% - 36px)); margin: 0 auto; }
.protocol-notice { width: min(1080px, calc(100% - 36px)); margin: 22px auto 0; padding: 16px 18px; border: 1px solid #d5a89d; color: #713426; background: #fff6f2; }
.protocol-notice strong { display: block; font-size: 15px; }
.protocol-notice p { margin: 7px 0 0; font-size: 13px; line-height: 1.75; }
.protocol-notice code { padding: 2px 5px; color: #6f2e20; background: #f3e3dd; }
.hero { padding: 64px 0 42px; border-bottom: 1px solid var(--line); text-align: left; }
.eyebrow, .step-label { margin: 0 0 14px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.hero h1 { margin: 0; font-size: clamp(34px, 5vw, 50px); font-weight: 400; line-height: 1.28; letter-spacing: .02em; }
.hero-version { margin-left: .55em; display: inline-block; color: var(--muted); font-size: .4em; letter-spacing: .1em; vertical-align: .18em; }
.hero-copy { width: min(720px, 100%); margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.hero code { padding: 2px 6px; border-radius: 4px; color: var(--accent-dark); background: rgba(165,66,45,.08); }
.question-ticker { width: min(650px, 100%); height: 46px; margin-top: 25px; padding: 0 14px; display: flex; align-items: center; gap: 14px; border: 1px solid #d8d0c5; color: inherit; background: rgba(255,254,251,.58); text-decoration: none; transition: .16s ease; }
.question-ticker:hover, .question-ticker:focus-visible { border-color: #bd8a7b; background: #fffaf6; outline: 0; }
.ticker-label { flex: 0 0 auto; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.ticker-window { height: 28px; min-width: 0; overflow: hidden; flex: 1; border-left: 1px solid #d9d1c6; }
.ticker-track { display: block; animation: question-roll 12s infinite; }
.ticker-track > span { height: 28px; padding-left: 15px; display: flex; align-items: center; color: #4d4842; font-size: 13px; white-space: nowrap; }
.ticker-action { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.question-ticker:hover .ticker-track, .question-ticker:focus-visible .ticker-track { animation-play-state: paused; }

@keyframes question-roll {
  0%, 18% { transform: translateY(0); }
  25%, 43% { transform: translateY(-28px); }
  50%, 68% { transform: translateY(-56px); }
  75%, 93% { transform: translateY(-84px); }
  100% { transform: translateY(-112px); }
}

.workspace { margin-top: 38px; padding: clamp(24px, 4vw, 46px); border: 1px solid var(--line); border-radius: 4px; background: var(--surface); box-shadow: var(--shadow); }
.workspace-heading { margin-bottom: 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.workspace h2 { margin: 0; font-size: 28px; font-weight: 400; }
.runtime-state { margin: 0 0 4px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.runtime-state span { background: #aaa39a; box-shadow: 0 0 0 4px rgba(120,112,103,.1); }
.runtime-state.ready { color: var(--green); }
.runtime-state.ready span { background: #6f9875; box-shadow: 0 0 0 4px rgba(111,152,117,.12); }
.compat-notice { margin: -6px 0 22px; padding: 12px 14px; border: 1px solid; font-size: 12px; line-height: 1.7; }
.compat-warning { border-color: #d9bd87; color: #75561d; background: #fff9ec; }
.compat-info { border-color: #bfcfca; color: #465f57; background: #f3f8f6; }
.compat-error { border-color: #d8aaa0; color: #76392b; background: #fff4f1; }

.runtime-setup { margin: -6px 0 24px; padding: 16px 17px; border: 1px solid #dfd4c8; border-radius: 8px; background: #faf6f1; transition: border-color .2s ease, background .2s ease; }
.runtime-setup-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.runtime-setup-indicator { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: #f3e5df; }
.runtime-setup-indicator::after { width: 11px; height: 11px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; content: ""; animation: runtime-spin .9s linear infinite; }
.runtime-setup-copy strong { display: block; font-size: 13px; }
.runtime-setup-copy p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.runtime-setup-percent { color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.runtime-setup-track { height: 4px; margin-top: 13px; overflow: hidden; border-radius: 99px; background: #e7dfd6; }
.runtime-setup-track span { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.runtime-setup.ready { border-color: #cddbcf; background: #f4f8f3; }
.runtime-setup.ready .runtime-setup-indicator { color: #fff; background: var(--green); }
.runtime-setup.ready .runtime-setup-indicator::after { width: auto; height: auto; border: 0; border-radius: 0; content: "✓"; animation: none; font-size: 14px; }
.runtime-setup.ready .runtime-setup-percent { color: var(--green); }
.runtime-setup.ready .runtime-setup-track span { background: var(--green); }
.runtime-setup.error { border-color: #e2beb5; background: #fff5f2; }
.runtime-setup.error .runtime-setup-indicator { color: #fff; background: var(--accent); }
.runtime-setup.error .runtime-setup-indicator::after { width: auto; height: auto; border: 0; border-radius: 0; content: "!"; animation: none; font-weight: 700; }

@keyframes runtime-spin { to { transform: rotate(360deg); } }

.dropzone { width: 100%; min-height: 215px; border: 1.5px dashed #c8bfb2; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #fcfaf6; cursor: pointer; transition: .18s ease; }
.dropzone:hover, .dropzone.dragging { border-color: var(--accent); background: #fdf7f3; transform: translateY(-1px); }
.dropzone:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.drop-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.drop-icon svg { width: 25px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dropzone strong { margin-top: 3px; font-size: 16px; }
.dropzone > span:last-child { color: var(--muted); font-size: 12px; }

.selected-file { min-height: 88px; padding: 16px 18px; display: flex; align-items: center; gap: 15px; border: 1px solid var(--soft-line); border-radius: 8px; background: #fbf9f4; }
.file-badge { width: 48px; height: 56px; display: grid; place-items: center; border: 1px solid #d8b9ae; border-radius: 5px; color: var(--accent); background: #fff9f5; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.file-copy { min-width: 0; flex: 1; }
.file-copy strong, .file-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-copy strong { font-size: 14px; }
.file-copy span { margin-top: 7px; color: var(--muted); font-size: 12px; }
.text-button { border: 0; color: var(--accent); background: transparent; cursor: pointer; font-size: 13px; }

.mode-fieldset { margin: 34px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mode-fieldset legend { width: 100%; margin-bottom: 15px; color: #555049; font-size: 13px; font-weight: 700; }
.mode-fieldset legend span { margin-right: 10px; color: var(--accent); font-size: 11px; letter-spacing: .12em; }
.mode-card { min-height: 104px; padding: 18px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--soft-line); border-radius: 3px; background: #fffefa; cursor: pointer; transition: .16s ease; }
.mode-card:hover { border-color: #cdbdb1; }
.mode-card:has(input:checked) { border-color: #bd7867; background: #fdf7f3; box-shadow: inset 0 0 0 1px rgba(165,66,45,.08); }
.mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-dot { width: 16px; height: 16px; flex: 0 0 auto; border: 1px solid #aaa39b; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #fff; }
.mode-card input:checked + .radio-dot { border-color: var(--accent); background: var(--accent); }
.mode-card strong, .mode-card small { display: block; }
.mode-card strong { font-size: 14px; }
.mode-card small { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }

.custom-panel { margin-top: 24px; padding: 26px; border: 1px solid #dfd3c8; border-radius: 9px; background: #faf7f2; }
.custom-heading { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.custom-heading h3 { margin: 0; font-size: 22px; font-weight: 400; }
.preset-library { margin: -2px 0 20px; padding: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border: 1px solid #e1d7cc; border-radius: 7px; background: rgba(255,254,250,.82); }
.preset-picker { min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.preset-picker > span { color: #68625b; font-size: 11px; }
.preset-picker select { height: 36px; padding: 0 32px 0 10px; border: 1px solid #d8d0c5; border-radius: 5px; outline: 0; color: var(--ink); background: #fffefa; font: inherit; font-size: 12px; }
.preset-picker select:focus { border-color: #b96d5a; box-shadow: 0 0 0 3px rgba(165,66,45,.08); }
.preset-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.preset-button { min-height: 32px; padding: 0 10px; border: 1px solid #d6cec3; border-radius: 5px; color: #615b54; background: #fffefa; cursor: pointer; font-size: 11px; transition: .15s ease; }
.preset-button:hover:not(:disabled) { border-color: #b98677; color: var(--accent-dark); background: #fdf7f3; }
.preset-button:disabled { opacity: .4; cursor: not-allowed; }
.preset-button-primary { border-color: var(--accent); color: #fff; background: var(--accent); }
.preset-button-primary:hover:not(:disabled) { color: #fff; background: var(--accent-dark); }
.preset-divider { width: 1px; height: 22px; margin: 0 2px; background: #dfd7ce; }
.font-library-bar { margin: 0 0 18px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-left: 2px solid #c9a397; background: #f4efe8; }
.font-library-bar > div { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.font-library-bar strong { flex: 0 0 auto; font-size: 12px; }
.font-library-bar span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.custom-basic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.setting-wide { grid-column: span 2; }
.setting-field { display: flex; flex-direction: column; gap: 7px; }
.setting-field > span { color: #68625b; font-size: 11px; }
.setting-field input, .setting-field select, .role-table input, .role-table select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #d8d0c5; border-radius: 5px; outline: 0; color: var(--ink); background: #fffefa; font-size: 12px; }
.setting-field input:focus, .setting-field select:focus, .role-table input:focus, .role-table select:focus { border-color: #b96d5a; box-shadow: 0 0 0 3px rgba(165,66,45,.08); }
.custom-details { margin-top: 17px; border: 1px solid #e2dbd2; border-radius: 7px; background: rgba(255,254,250,.72); }
.custom-details summary { padding: 15px 17px; display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
.custom-details summary::-webkit-details-marker { display: none; }
.custom-details summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 18px; font-weight: 300; }
.custom-details[open] summary::after { content: "−"; }
.custom-details summary span { font-size: 13px; font-weight: 700; }
.custom-details summary small { color: var(--muted); font-size: 11px; }
.role-table-wrap { padding: 0 12px 14px; overflow-x: auto; }
.role-table { width: 100%; min-width: 940px; border-collapse: collapse; }
.role-table th, .role-table td { padding: 7px 5px; border-top: 1px solid #ece6de; text-align: left; }
.role-table thead th { color: var(--muted); font-size: 10px; font-weight: 500; }
.role-table tbody th { width: 66px; font-size: 11px; white-space: nowrap; }
.role-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.role-table td:nth-child(2) { min-width: 136px; }
.role-table td:nth-child(3) { min-width: 140px; }
.role-table td:nth-child(n+4):nth-child(-n+7) { width: 88px; }
.role-table td:last-child { width: 48px; text-align: center; }
.table-setting-grid { padding: 3px 17px 17px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.toggle-grid { padding: 4px 17px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.toggle-setting { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.toggle-setting input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-setting > span { width: 30px; height: 17px; position: relative; flex: 0 0 auto; border-radius: 99px; background: #c9c3bb; transition: .15s ease; }
.toggle-setting > span::after { content: ""; width: 13px; height: 13px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #fff; transition: .15s ease; }
.toggle-setting input:checked + span { background: var(--accent); }
.toggle-setting input:checked + span::after { transform: translateX(13px); }
.toggle-setting strong { font-size: 11px; font-weight: 500; }
.compact-toggle-grid { padding-bottom: 13px; }
.page-number-grid { padding: 0 17px 18px; }
.custom-footnote { margin-top: 17px; padding-top: 14px; border-top: 1px solid #e3dbd1; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }

.action-row { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--soft-line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.action-row p { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.action-row p svg { width: 17px; stroke: var(--green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.primary-button, .secondary-button { border: 0; border-radius: 6px; cursor: pointer; transition: .16s ease; }
.primary-button { min-width: 150px; padding: 13px 20px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; background: var(--accent); box-shadow: 0 9px 20px rgba(128,51,34,.16); }
.primary-button:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-1px); }
.primary-button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.primary-button svg { width: 17px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.progress-panel, .result-panel, .error-panel { margin-top: 22px; padding: 20px; border-radius: 8px; }
.progress-panel { border: 1px solid #e2d7cd; background: #faf6f1; }
.progress-copy { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; }
.progress-copy span { color: var(--accent); font-variant-numeric: tabular-nums; }
.progress-track { height: 5px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: #e7dfd6; }
.progress-track span { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.progress-panel p { margin: 11px 0 0; color: var(--muted); font-size: 12px; }
.result-panel { border: 1px solid #cfdbd0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; background: #f5f8f4; }
.result-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.result-panel p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.secondary-button { padding: 11px 16px; border: 1px solid #78917c; color: #405b45; background: #fff; }
.diagnosis-report { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.diagnosis-item { padding: 10px 12px; border: 1px solid #dfe7df; border-radius: 5px; background: rgba(255,255,255,.72); }
.diagnosis-item strong { display: block; font-size: 12px; }
.diagnosis-item span { margin-top: 4px; display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.error-panel { border: 1px solid #e2beb5; color: #793928; background: #fff5f2; }
.error-panel p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; }

.trust-grid { margin: 44px 0 78px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-grid article { padding: 28px 30px; }
.trust-grid article + article { border-left: 1px solid var(--line); }
.trust-grid span { color: var(--accent); font-family: Georgia, serif; font-size: 12px; }
.trust-grid h3 { margin: 11px 0 7px; font-size: 17px; font-weight: 400; }
.trust-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.usage-section, .faq-section { padding: 0 0 78px; }
.faq-section { scroll-margin-top: 24px; }
.section-intro { max-width: 680px; }
.section-intro h2 { margin: 0; font-size: 30px; font-weight: 400; letter-spacing: .02em; }
.section-intro > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.usage-steps { margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); list-style: none; background: var(--surface); }
.usage-steps li { min-height: 150px; padding: 25px; display: flex; align-items: flex-start; gap: 16px; }
.usage-steps li + li { border-left: 1px solid var(--line); }
.usage-steps > li > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #d7b4aa; color: var(--accent); background: #fbf3ef; font-size: 13px; }
.usage-steps strong { display: block; padding-top: 3px; font-size: 15px; font-weight: 600; }
.usage-steps p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }

.faq-list { margin-top: 30px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 20px 2px; display: flex; align-items: center; gap: 20px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; margin-left: auto; color: var(--accent); font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 880px; margin: -4px 48px 21px 2px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.faq-list .inline-link { margin: 0 3px; color: #356f9d; font-weight: 600; text-underline-offset: 3px; }

.download-section { margin-bottom: 74px; border: 1px solid #cfc6ba; background: var(--surface); }
.download-copy { padding: 34px 36px; }
.download-copy h2 { margin: 0; font-size: 30px; font-weight: 400; }
.download-copy > p:not(.eyebrow) { max-width: 620px; margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.download-button { width: fit-content; min-height: 42px; margin-top: 24px; padding: 0 16px; display: inline-flex; align-items: center; gap: 14px; color: #fff; background: var(--accent); text-decoration: none; font-size: 13px; }
.download-button:hover { background: var(--accent-dark); }
.download-button span, .project-support a span { font-family: Georgia, serif; }
.project-support { margin-top: 28px; padding-top: 20px; display: grid; gap: 9px; border-top: 1px solid var(--soft-line); }
.project-support p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.project-support strong { color: var(--ink); font-weight: 600; }
.project-support a { margin-left: 8px; color: #356f9d; font-weight: 600; text-underline-offset: 3px; }

footer { width: min(1080px, calc(100% - 36px)); margin: 0 auto; padding: 28px 0 36px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; color: #777168; font-size: 11px; }
footer strong { color: #4b4640; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
footer p { margin: 7px 0 0; }
footer > p { max-width: 480px; text-align: right; line-height: 1.7; }
footer a { color: var(--accent); text-underline-offset: 3px; }

[hidden] { display: none !important; }

@media (max-width: 760px) {
  .topbar { height: 68px; }
  .privacy-pill { display: none; }
  .hero { padding-top: 52px; }
  .hero h1 br { display: none; }
  .workspace-heading { align-items: flex-start; flex-direction: column; }
  .mode-fieldset { grid-template-columns: 1fr; }
  .custom-panel { padding: 20px 16px; }
  .custom-heading { align-items: flex-start; flex-direction: column; }
  .preset-library { align-items: stretch; flex-direction: column; }
  .preset-picker { min-width: 0; }
  .preset-actions { justify-content: flex-start; }
  .font-library-bar { align-items: stretch; flex-direction: column; }
  .font-library-bar > div { align-items: flex-start; flex-direction: column; gap: 5px; }
  .font-library-bar span { white-space: normal; }
  .custom-basic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setting-wide { grid-column: span 2; }
  .table-setting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toggle-grid { grid-template-columns: 1fr; }
  .role-table-wrap::before { content: "表格可左右滑动查看全部设置"; padding: 4px 5px 10px; display: block; color: var(--muted); font-size: 10px; }
  button, select, input { min-height: 44px; }
  .toggle-setting input { min-height: 0; }
  .custom-footnote { gap: 8px; flex-direction: column; }
  .action-row { align-items: stretch; flex-direction: column; }
  .primary-button { width: 100%; }
  .result-panel { grid-template-columns: auto 1fr; }
  .result-panel .secondary-button { grid-column: 1 / -1; }
  .diagnosis-report { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid article + article { border-top: 1px solid var(--line); border-left: 0; }
  .usage-steps { grid-template-columns: 1fr; }
  .usage-steps li + li { border-top: 1px solid var(--line); border-left: 0; }
  footer { align-items: flex-start; flex-direction: column; }
  footer > p { text-align: left; }
}

@media (max-width: 480px) {
  main, .protocol-notice, footer { width: min(100% - 20px, 1080px); }
  .topbar { padding: 0 14px; }
  .brand small { display: none; }
  .hero { padding: 44px 4px 32px; }
  .hero h1 { font-size: 36px; }
  .hero-copy { font-size: 14px; }
  .question-ticker { gap: 9px; padding: 0 10px; }
  .ticker-label { letter-spacing: 0; }
  .ticker-track > span { padding-left: 10px; font-size: 12px; }
  .ticker-action { display: none; }
  .workspace { margin-top: 22px; padding: 22px 14px; }
  .runtime-setup { padding: 14px; }
  .runtime-setup-head { align-items: start; }
  .mode-card { min-height: 88px; padding: 15px; }
  .custom-basic-grid, .table-setting-grid { grid-template-columns: 1fr; }
  .setting-wide { grid-column: span 1; }
  .custom-details summary { align-items: flex-start; flex-direction: column; gap: 5px; }
  .custom-details summary::after { position: absolute; right: 30px; }
  .preset-divider { display: none; }
  .preset-button { min-height: 40px; }
  .usage-section, .faq-section { padding-bottom: 58px; }
  .section-intro h2 { font-size: 26px; }
  .faq-list summary { font-size: 14px; line-height: 1.6; }
  .faq-list details p { margin-right: 8px; }
  .download-section { margin-bottom: 54px; }
  .download-copy { padding: 26px 22px; }
  .download-button { width: 100%; justify-content: space-between; }
  .project-support a { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .runtime-setup-indicator::after { animation-duration: 1.8s; }
}