:root { color-scheme: light; font-family: "Segoe UI", Arial, sans-serif; color: #17332e; background: #f5f7f3; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 6vw; border-bottom: 1px solid #dce4da; }
.brand a { font-size: 22px; font-weight: 800; letter-spacing: -.8px; text-decoration: none; }
.brand a span { font-weight: 400; margin-left: 5px; }
.label { font-size: 13px; color: #53695e; }
main { width: min(760px, 88vw); margin: 72px auto; flex: 1; }
.status { display: inline-block; padding: 7px 12px; border: 1px solid #bbcfb6; border-radius: 30px; font-size: 12px; font-weight: 600; color: #36563a; background: #eaf1e4; }
h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.08; letter-spacing: -2px; margin: 26px 0 18px; font-weight: 650; }
.intro { color: #53695e; font-size: 19px; line-height: 1.6; }
.card { display: flex; align-items: center; gap: 22px; padding: 28px; background: #fff; border: 1px solid #d7e1d3; border-radius: 16px; margin-top: 44px; text-decoration: none; transition: border-color .15s; }
.card:hover { border-color: #426b3b; }
a:focus-visible { outline: 3px solid #537e40; outline-offset: 5px; }
.icon { display: grid; place-items: center; width: 62px; height: 62px; flex-shrink: 0; border-radius: 14px; background: #edf3e8; color: #315b2c; font-size: 21px; font-weight: 700; }
h2 { margin: 0 0 7px; font-size: 24px; font-weight: 600; }
.card p { margin: 0; color: #53695e; line-height: 1.5; }
.tag { display: inline-block; margin-top: 12px; color: #687155; font-size: 12px; }
.arrow { margin-left: auto; font-size: 28px; }
.note { color: #53695e; line-height: 1.75; margin-top: 28px; max-width: 630px; }
.back { display: inline-block; margin-top: 28px; font-weight: 600; text-underline-offset: 5px; }
footer { padding: 24px 6vw; color: #53695e; font-size: 12px; border-top: 1px solid #dce4da; }
footer span { padding: 0 8px; }
@media (max-width: 520px) { .brand { padding: 22px 6vw; } .label { max-width: 80px; text-align: right; } main { margin: 48px auto; } .card { padding: 22px 18px; gap: 14px; } .icon { width: 48px; height: 48px; font-size: 17px; } h2 { font-size: 21px; } .arrow { font-size: 22px; } }