:root { --paper:#f4f2ec; --white:#fffefa; --ink:#17231f; --muted:#65716d; --green:#17372f; --moss:#2f6b5a; --coral:#d7563f; --line:rgba(23,55,47,.16); --pale:#e7eeea; --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; --serif:"Noto Serif SC","Songti SC",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.shell { width:min(1080px,calc(100% - 48px)); margin:0 auto; }
header { position:sticky; z-index:20; top:0; border-bottom:1px solid var(--line); background:rgba(244,242,236,.95); backdrop-filter:blur(12px); }
nav { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.seal { width:38px; height:38px; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--coral); font:800 19px/1 var(--serif); }
.brand b { display:block; font:800 14px/1.25 var(--serif); }
.brand small { display:block; margin-top:3px; color:var(--coral); font-size:10px; font-weight:800; }
.back { color:var(--moss); font-size:13px; font-weight:850; text-decoration:none; }
.back:hover { color:var(--coral); }
.hero { padding:76px 0 64px; background:linear-gradient(135deg,#e7ece7 0%,#f4f2ec 60%,#ede3d7 100%); }
.eyebrow { margin:0; color:var(--coral); font-size:12px; font-weight:900; letter-spacing:.08em; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:840px; margin:17px 0 0; font:800 clamp(38px,5vw,62px)/1.22 var(--serif); }
.lead { max-width:760px; margin:22px 0 0; color:var(--muted); font-size:17px; line-height:1.9; }
.status { display:inline-flex; margin-top:23px; padding:7px 10px; border-radius:4px; color:var(--green); background:var(--pale); font-size:12px; font-weight:850; }
.status.testing { color:#8b3929; background:#f8ddd6; }
.section { padding:72px 0; }
.section.white { background:var(--white); }
.section.soft { background:#e9eeea; }
.title { margin:13px 0 0; font:800 clamp(29px,3.6vw,43px)/1.32 var(--serif); }
.intro { max-width:760px; margin:18px 0 0; color:var(--muted); font-size:16px; line-height:1.85; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-top:30px; }
.card { padding:24px; border:1px solid var(--line); border-radius:7px; background:var(--white); }
.card span { color:var(--coral); font-size:12px; font-weight:900; }
.card h3 { margin:11px 0 0; color:var(--green); font:800 23px/1.35 var(--serif); }
.card p { margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.8; }
.material-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:30px; }
.material { overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--white); text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }
.material:hover,.material:focus-visible { transform:translateY(-3px); box-shadow:0 14px 28px rgba(23,55,47,.1); outline:none; }
.material img { width:100%; display:block; aspect-ratio:9/16; object-fit:cover; }
.material-copy { padding:16px; }
.material small { color:var(--coral); font-size:11px; font-weight:900; }
.material h3 { margin:8px 0 0; color:var(--green); font:800 20px/1.35 var(--serif); }
.material p { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
.empty { min-height:255px; display:flex; flex-direction:column; justify-content:center; padding:24px; border:1px dashed rgba(23,55,47,.36); border-radius:7px; background:rgba(255,255,255,.48); }
.empty b { color:var(--green); font:800 20px/1.4 var(--serif); }
.empty p { margin:11px 0 0; color:var(--muted); font-size:14px; line-height:1.8; }
.notice { margin-top:26px; padding:17px 19px; border-left:3px solid var(--coral); color:var(--muted); background:#fff; font-size:13px; line-height:1.8; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:12px 19px; border:1px solid transparent; border-radius:6px; color:#fff; background:var(--coral); font:800 14px/1.3 var(--sans); text-decoration:none; }
.button.secondary { border-color:rgba(23,55,47,.35); color:var(--green); background:transparent; }
footer { padding:24px 0; color:#d5e2dc; background:#123028; font-size:12px; }
.footer-row { display:flex; justify-content:space-between; gap:20px; }
footer a { color:#fff; font-weight:800; text-decoration:none; }
@media (max-width:700px) { .shell { width:min(100% - 32px,640px); } nav { min-height:60px; } .back { font-size:12px; } .hero { padding:58px 0 52px; } h1 { font-size:37px; } .lead,.intro { font-size:15px; } .section { padding:58px 0; } .title { font-size:30px; } .grid,.material-grid { grid-template-columns:1fr; } .empty { min-height:170px; } .footer-row { flex-direction:column; } }