:root {
      --bg: #FAFBFC; --surface: #FFFFFF; --ink: #0F172A; --ink-soft: #64748B; --ink-faint: #94A3B8;
      --line: #E2E8F0; --green: #10B981; --green-ink: #047857; --green-soft: #ECFDF5;
      --font-display: 'Outfit', sans-serif; --font-body: 'DM Sans', sans-serif; --maxw: 760px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; }
    a { color: var(--green-ink); text-decoration: none; }
    a:hover { color: var(--green); }
    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
    header.site { border-bottom: 1.5px solid var(--line); padding: 24px 0; background: var(--surface); }
    header.site .wrap { display: flex; align-items: center; justify-content: space-between; }
    .logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; }
    .logo img { display: block; width: 36px; height: auto; }
    .back-link { font-size: 14px; color: var(--ink-soft); font-weight: 600; display: flex; align-items: center; gap: 6px; }
    .back-link:hover { color: var(--ink); }
    main { padding: 56px 0 80px; flex: 1; }
    h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; color: var(--ink); }
    .meta { font-size: 14px; color: var(--ink-faint); margin-bottom: 36px; font-weight: 500; }
    blockquote { margin: 0 0 40px; padding: 16px 24px; border-left: 4px solid var(--green); background: var(--green-soft); font-size: 16px; color: var(--green-ink); font-style: italic; line-height: 1.6; border-radius: 0 12px 12px 0; font-weight: 500; }
    h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 48px 0 16px; color: var(--ink); letter-spacing: -0.02em; }
    h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 32px 0 12px; color: var(--ink); }
    p { font-size: 16px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 16px; }
    ul { margin: 0 0 20px; padding-left: 24px; }
    li { font-size: 16px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 8px; }
    strong { font-weight: 600; color: var(--ink); }
    footer { padding: 40px 0 30px; border-top: 1.5px solid var(--line); background: var(--bg); }
    .footer-content { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 20px; }
    .footer-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink); font-weight: 500; }
    .footer-home-link { color: var(--ink); font-weight: 600; }
    .footer-home-link:hover { color: var(--green); }
    .footer-bottom { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
    .footer-bottom a { font-size: 13px; color: var(--ink-soft); }
    .footer-bottom a:hover { color: var(--ink); text-decoration: underline; }
    @media (max-width: 720px) { header.site .wrap { flex-direction: column; gap: 16px; } .footer-top { flex-direction: column; gap: 12px; text-align: center; } .footer-bottom { gap: 16px; } }