:root {
  color-scheme: light;
  --ink: #17201d;
  --muted: #65706b;
  --line: #dfe5e1;
  --soft: #f4f7f5;
  --paper: #fff;
  --accent: #116149;
  --accent-dark: #0b4937;
  --accent-soft: #e4f3ed;
  --warn: #9b5b12;
  --warn-soft: #fff5e6;
  --danger: #9d3232;
  --shadow: 0 24px 70px rgba(31,54,45,.09);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 20% 0%,rgba(202,233,220,.46),transparent 30rem),linear-gradient(180deg,#fbfcfb 0%,#f5f8f6 100%); }
button,select,input { font: inherit; }
button,select,.file-drop { transition: border-color 140ms ease,box-shadow 140ms ease,transform 140ms ease,background 140ms ease; }
button:focus-visible,select:focus-visible,.file-drop:focus-within,input:focus-visible { outline: 3px solid rgba(17,97,73,.22); outline-offset: 2px; }
a { color: var(--accent); }
.page-shell { width: min(1160px,calc(100% - 32px)); margin: 0 auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:15px; font-weight:760; text-decoration:none; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; color:#fff; background:var(--accent); }
.brand-mark svg { width:22px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.header-actions { display:flex; align-items:center; font-size:13px; font-weight:650; }
.privacy-badge { display:inline-flex; align-items:center; gap:8px; color:#425049; }
.privacy-dot { width:8px; height:8px; border-radius:99px; background:#28a778; box-shadow:0 0 0 4px rgba(40,167,120,.12); }
.hero { max-width:820px; padding:52px 0 34px; }
.eyebrow,.step-label { margin:0 0 9px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:760px; margin-bottom:22px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(44px,6.3vw,70px); font-weight:500; letter-spacing:-.05em; line-height:1; }
h2 { margin-bottom:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(26px,3vw,34px); font-weight:500; letter-spacing:-.025em; }
h3 { margin:0; font-size:18px; letter-spacing:-.015em; }
.hero-copy { max-width:700px; margin-bottom:22px; color:#4e5a55; font-size:18px; line-height:1.6; }
.trust-list { display:flex; flex-wrap:wrap; gap:10px 22px; margin:0; padding:0; color:#48564f; font-size:13px; font-weight:650; list-style:none; }
.trust-list li::before { content:"✓"; margin-right:7px; color:var(--accent); }
.workspace-card,.results,.explain-card { border:1px solid rgba(207,218,212,.92); border-radius:24px; background:rgba(255,255,255,.95); box-shadow:var(--shadow); }
.workspace-card,.results { padding:clamp(22px,4vw,42px); }
.section-heading,.results-heading,.options-heading,.final-action { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.small-actions,.download-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.text-button { border:0; color:var(--accent); background:transparent; cursor:pointer; font-weight:750; }
.text-button:hover:not(:disabled) { text-decoration:underline; text-underline-offset:4px; }
.text-button.danger { color:var(--danger); }
.text-button:disabled { color:#a1aaa5; cursor:not-allowed; }
.header-confirm-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:26px 0 0; }
.header-confirm-grid label { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--soft); cursor:pointer; }
.header-confirm-grid input { width:17px; height:17px; margin:2px 0 0; accent-color:var(--accent); }
.header-confirm-grid span { display:grid; gap:3px; font-size:12px; }
.header-confirm-grid small { color:var(--muted); font-size:11px; line-height:1.4; }
.file-grid { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; margin:30px 0 14px; }
.file-drop { display:flex; min-height:120px; align-items:center; gap:16px; padding:20px; border:1.5px dashed #b9c8c0; border-radius:16px; background:#fafcfb; cursor:pointer; }
.file-drop:hover,.file-drop.loaded { border-color:var(--accent); background:var(--accent-soft); }
.file-drop input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.file-icon { display:grid; flex:0 0 auto; width:42px; height:48px; place-items:center; border-radius:9px; color:#fff; background:#60746b; font-size:14px; font-weight:850; }
.file-icon.secondary { background:var(--accent); }
.file-copy { display:grid; min-width:0; gap:6px; }
.file-copy span { overflow:hidden; color:var(--muted); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.file-action { margin-left:auto; color:var(--accent); font-size:13px; font-weight:750; }
.merge-mark { color:#829088; font-size:24px; }
.configuration,.reconciliation { margin-top:14px; padding:22px; border:1px solid var(--line); border-radius:16px; background:#fbfcfb; }
.optional-panel > summary { list-style:none; cursor:pointer; }
.optional-panel > summary::-webkit-details-marker { display:none; }
.optional-panel > summary::after { content:"+"; display:grid; flex:0 0 auto; width:28px; height:28px; place-items:center; border-radius:99px; color:var(--accent); background:var(--accent-soft); font-size:19px; font-weight:500; }
.optional-panel[open] > summary::after { content:"−"; }
.optional-panel summary > span:first-child { display:grid; gap:4px; }
.optional-panel summary strong { font-size:16px; }
.optional-panel summary > span:nth-child(2) { margin-left:auto; color:var(--muted); font-size:12px; font-weight:500; text-align:right; }
.options-heading { align-items:flex-end; }
.options-heading > p { max-width:390px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; text-align:right; }
.key-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.key-grid label { display:grid; gap:7px; color:#4d5953; font-size:12px; font-weight:720; }
select { width:100%; height:48px; padding:0 38px 0 13px; border:1px solid #cbd5d0; border-radius:10px; color:var(--ink); background:#fff; }
select:disabled { color:#8b9691; background:#f1f3f2; }
.toggle-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.option-toggle { display:flex; align-items:flex-start; gap:11px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; }
.option-toggle input,.column-group input,.warning-card input { width:17px; height:17px; margin:1px 0 0; accent-color:var(--accent); }
.option-toggle span { display:grid; gap:4px; }
.option-toggle small { color:var(--muted); font-size:12px; line-height:1.45; }
.column-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.column-group { display:flex; flex-wrap:wrap; gap:8px; min-width:0; margin:0; padding:14px; border:1px solid var(--line); border-radius:12px; }
.column-group legend { padding:0 5px; color:#526059; font-size:12px; font-weight:800; }
.column-group label { display:inline-flex; max-width:100%; align-items:center; gap:7px; padding:7px 10px; border:1px solid #d5ddd9; border-radius:99px; background:#fff; cursor:pointer; font-size:12px; }
.column-group label:has(input:checked) { border-color:#9bc8b8; color:var(--accent-dark); background:var(--accent-soft); }
.column-group span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.placeholder { color:var(--muted); font-size:12px; line-height:1.5; }
.diagnostic-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:18px; }
.diagnostic-grid article { display:grid; gap:5px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.diagnostic-grid strong { font-family:Georgia,"Times New Roman",serif; font-size:28px; font-weight:500; }
.diagnostic-grid span { color:var(--muted); font-size:11px; font-weight:750; text-transform:uppercase; }
.warning-card { display:grid; gap:12px; margin-top:14px; padding:16px; border:1px solid #edc889; border-radius:12px; color:#71420e; background:var(--warn-soft); }
.warning-card p { margin:6px 0 0; color:#8b5b25; font-size:12px; line-height:1.5; }
.warning-card label { display:flex; align-items:flex-start; gap:9px; font-size:13px; font-weight:700; cursor:pointer; }
.final-action { align-items:flex-end; margin-top:18px; }
.status-message { max-width:720px; min-height:20px; color:var(--muted); font-size:13px; line-height:1.5; }
.status-message.error { color:var(--danger); }
.status-message.success { color:var(--accent); }
.primary-button,.secondary-button { min-height:48px; padding:0 18px; border-radius:10px; cursor:pointer; font-weight:780; }
.primary-button { border:1px solid var(--accent); color:#fff; background:var(--accent); }
.primary-button:hover:not(:disabled) { background:var(--accent-dark); transform:translateY(-1px); }
.primary-button:disabled { border-color:#9daba4; background:#9daba4; cursor:not-allowed; }
.secondary-button { border:1px solid #c7d1cc; color:var(--ink); background:#fff; }
.secondary-button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.secondary-button:disabled { color:#98a29d; background:#f0f3f1; cursor:not-allowed; }
.results { margin-top:28px; }
.results-heading { align-items:flex-end; margin-bottom:22px; }
.results-heading p { margin:7px 0 0; color:var(--muted); font-size:12px; }
.table-wrap { max-height:560px; overflow:auto; border:1px solid var(--line); border-radius:14px; }
table { width:100%; min-width:680px; border-collapse:collapse; }
th,td { max-width:280px; padding:13px 15px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; text-align:left; vertical-align:top; }
th { position:sticky; top:0; color:#5e6a64; background:#f7f9f8; font-size:11px; letter-spacing:.07em; text-transform:uppercase; }
td { font-size:13px; }
.explain-card { display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); gap:36px; margin-top:28px; padding:clamp(22px,4vw,42px); }
.join-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.join-guide article { padding:16px; border:1px solid var(--line); border-radius:12px; background:#fbfcfb; }
.join-guide p { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }
footer { display:flex; justify-content:space-between; gap:20px; padding:28px 0 40px; color:var(--muted); font-size:12px; }
footer p { margin:0; }
@media (max-width:900px) {
  .diagnostic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .explain-card { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .site-header { gap:12px; padding:18px 0; }
  .privacy-badge { font-size:11px; }
  .section-heading,.results-heading,.final-action,footer { align-items:flex-start; flex-direction:column; }
  .hero { padding:14px 0 26px; }
  h1 { margin-bottom:16px; font-size:clamp(39px,11.5vw,50px); line-height:.98; }
  .hero-copy { margin-bottom:18px; font-size:16px; line-height:1.55; }
  .trust-list { gap:8px 16px; }
  .small-actions { display:grid; width:100%; grid-template-columns:1fr 1fr; gap:8px; }
  .small-actions .text-button { min-height:38px; padding:0 12px; border:1px solid #d5ddd9; border-radius:9px; background:#fff; text-align:center; }
  .small-actions #sampleButton { grid-column:1 / -1; border-color:#a8cfbf; background:var(--accent-soft); }
  .header-confirm-grid,.file-grid,.key-grid,.toggle-grid,.column-options { grid-template-columns:1fr; }
  .merge-mark { display:none; }
  .options-heading { display:grid; }
  .options-heading > p { max-width:none; text-align:left; }
  .optional-panel > summary { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .optional-panel summary > span:nth-child(2) { grid-column:1 / -1; margin-left:0; text-align:left; }
  .optional-panel > summary::after { grid-column:2; grid-row:1; }
  .diagnostic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .download-actions { width:100%; }
  .download-actions button { width:100%; }
  .join-guide { grid-template-columns:1fr; }
}
@media (max-width:390px) {
  .page-shell { width:min(100% - 20px,1160px); }
  .workspace-card,.results,.explain-card { border-radius:18px; }
  .diagnostic-grid { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }