:root { color-scheme: light; --ink:#243d35; --muted:#596960; --green:#315b50; --line:#d9e1d9; --paper:#fffef9; --wash:#f1f4ed; --danger:#963f32; font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-size:17px; line-height:1.75; } button,input,textarea,select { font:inherit; } button,a,input,textarea,select { touch-action:manipulation; } button,a { -webkit-tap-highlight-color:transparent; } a { color:var(--green); text-underline-offset:4px; } button { min-height:48px; padding:11px 19px; border-radius:12px; border:1px solid var(--green); color:var(--paper); background:var(--green); cursor:pointer; font-weight:600; } button.secondary { background:transparent; color:var(--green); } button.danger { color:var(--danger); background:transparent; border-color:var(--danger); } button:disabled { opacity:.48; cursor:not-allowed; } :focus-visible { outline:3px solid #ad6a17; outline-offset:4px; } h1 { font-size:clamp(1.65rem,5.4vw,2.4rem); line-height:1.4; font-weight:650; letter-spacing:-.03em; margin:12px 0 20px; } h2 { font-size:1.2rem; line-height:1.55; margin:0 0 12px; } p { margin:0 0 16px; } small,.muted { color:var(--muted); font-size:.88rem; } .site-header { max-width:900px; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:24px 24px 20px; gap:12px; } .brand { display:flex; gap:12px; align-items:center; font-weight:650; line-height:1.4; } .brand small { display:block; font-weight:400; margin-top:5px; font-size:.75rem; } .brand-mark { display:grid; place-items:center; width:44px; height:48px; border:1px solid #9ab0a0; border-radius:24px 24px 6px 6px; font-family:serif; font-size:24px; font-weight:400; } .status { white-space:nowrap; font-size:.74rem; border:1px solid var(--line); padding:4px 10px; border-radius:20px; } .demo-notice { border-block:1px solid #e4ddc4; background:#f6f1df; color:#695323; text-align:center; font-size:.76rem; padding:8px 18px; } main { width:min(100%,720px); margin:auto; padding:32px 24px 28px; min-height:65vh; } main:focus { outline:none; } footer { margin:12px auto 110px; text-align:center; padding:0 24px; font-size:.74rem; color:var(--muted); } .eyebrow { text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; color:var(--muted); font-weight:600; } .lead { color:var(--muted); font-size:1rem; max-width:34em; } .panel { background:var(--wash); border:1px solid var(--line); border-radius:18px; padding:22px; margin:24px 0; } .panel.light { background:transparent; } .story { white-space:pre-wrap; font-size:1.05rem; line-height:1.95; border-left:2px solid #98ad9c; padding:4px 0 4px 20px; margin:24px 0; overflow-wrap:anywhere; } .cards { display:grid; gap:10px; margin:24px 0; } .card { border:1px solid var(--line); border-radius:12px; padding:16px; background:#f6f7f1; } .card h2 { font-size:.93rem; margin:0 0 4px; } .card p { font-size:.92rem; margin:0; } .form-field { display:block; margin:28px 0; } .form-field .label { display:block; min-height:3.5em; font-size:1rem; font-weight:550; } .form-field .optional { display:block; font-size:.78rem; color:var(--muted); font-weight:400; } textarea,input[type=text],select { display:block; width:100%; color:var(--ink); background:white; border:1px solid #9aab9e; border-radius:10px; padding:13px; margin-top:8px; } textarea { resize:vertical; min-height:116px; line-height:1.65; } textarea:focus,input:focus,select:focus { border-color:var(--green); } .actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 12px; } .actions>* { flex:1 1 180px; text-align:center; } .checkbox { display:flex; align-items:flex-start; gap:12px; margin:20px 0; } .checkbox input { flex:none; width:22px; height:22px; margin:4px 0 0; } .save-state { font-size:.8rem; color:var(--muted); min-height:1.8em; } #navigation { position:fixed; bottom:0; left:0; right:0; background:#fffef9f5; border-top:1px solid var(--line); display:flex; justify-content:center; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); z-index:2; gap:8px; } #navigation[hidden] { display:none; } #navigation button { border:0; border-radius:10px; background:transparent; color:var(--muted); min-width:0; flex:1; max-width:175px; padding:8px 4px; font-size:.82rem; font-weight:500; } #navigation button[aria-current=page] { background:var(--wash); color:var(--green); font-weight:650; } .message { max-width:680px; margin:16px auto 0; padding:12px 20px; border:1px solid #c3d7c8; background:#edf5eb; border-radius:10px; font-size:.9rem; overflow-wrap:anywhere; } .message.error { border-color:#dfaea5; background:#fbedE7; color:#7e3328; } .message[hidden] { display:none; } .stat-row { display:flex; flex-wrap:wrap; gap:24px; padding:22px 0; border-block:1px solid var(--line); margin:26px 0; } .stat { flex:1; } .stat strong { display:block; font-family:Georgia,serif; font-size:2rem; font-weight:400; line-height:1.2; margin-bottom:5px; } .stat span { font-size:.78rem; color:var(--muted); } .entry { border-bottom:1px solid var(--line); padding:22px 0; } .entry p { overflow-wrap:anywhere; } .entry .actions button { font-size:.86rem; } .pill { font-size:.76rem; padding:3px 8px; border-radius:6px; background:var(--wash); } .two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .two-col label { margin:0; } details { margin:20px 0; } summary { cursor:pointer; min-height:48px; padding:10px 0; } pre { font-size:.75rem; background:#f1f4ed; padding:16px; border-radius:10px; white-space:pre-wrap; overflow-wrap:anywhere; max-height:340px; overflow:auto; } .scale { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; } .scale label { display:flex; align-items:center; justify-content:center; gap:5px; min-height:48px; min-width:48px; border:1px solid var(--line); border-radius:9px; font-size:.9rem; padding:6px; } .scale input { accent-color:var(--green); } fieldset { border:0; padding:0; margin:30px 0; } legend { font-weight:550; } .skip-link { position:absolute; left:12px; top:-100px; background:white; padding:10px; z-index:10; } .skip-link:focus { top:8px; } .divider { margin-top:32px; padding-top:24px; border-top:1px solid var(--line); } .empty-mark { font-family:serif; font-size:3rem; color:#99ad9a; } .review-field .label { font-size:.8rem; min-height:0; overflow-wrap:anywhere; } @media(max-width:440px) { main { padding:26px 20px; } .site-header { padding:20px; } .brand small { font-size:.65rem; } .two-col { grid-template-columns:1fr; } .panel { padding:18px; } .actions>* { flex-basis:100%; } } @media(prefers-reduced-motion:no-preference) { button { transition:background .12s; } } @media print { nav,.actions { display:none; } }
.consent-text,.literal { white-space:pre-wrap; overflow-wrap:anywhere; }
input[type=file] { display:block; max-width:100%; margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:10px; background:white; font-size:.85rem; }
.card+.card { margin-top:14px; }