:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; }
    *, *::before, *::after { box-sizing: border-box; }
    html { min-height: 100%; }
    body { min-height: 100vh; min-height: 100svh; margin: 0; color: #fff; background: #111820; }
    body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url('/images/background.jpg') center center / cover no-repeat; }
    main { width: min(100% - 2.5rem, 760px); min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: clamp(28px, 5vh, 60px) 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
    h1 { font-size: clamp(1.65rem, 5vw, 2.2rem); margin: 0 0 clamp(28px, 5vh, 58px); letter-spacing: -.025em; text-shadow: 0 2px 12px #0008; }
    p { font-size: clamp(.95rem, 1.5vw, 1.075rem); line-height: 1.85; margin: 0 0 1.1rem; text-shadow: 0 1px 6px #000a; }
    .intro { margin-bottom: 1.3rem; }
    .description { max-width: 640px; margin-inline: auto; line-height: 1.85; }
    .farewell { margin-top: clamp(24px, 4vh, 45px); }
    .farewell p { margin-bottom: .75rem; }
    .archive { margin-top: 1.65rem; }
    a { color: #fff; text-underline-offset: 3px; }
    a:hover, a:focus-visible { color: #e7edf8; }
    .youtube { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .7rem 1.15rem; border: 1px solid #ffffff65; border-radius: 6px; background: #161b22b8; font-weight: 600; text-decoration: none; transition: background .15s, transform .15s; }
    .youtube:hover { background: #222a35ec; transform: translateY(-1px); }
    .youtube svg { flex: none; }
    .social { margin-top: clamp(30px, 5vh, 55px); }
    .facebook { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #fff; transition: opacity .15s, transform .15s; }
    .facebook:hover, .facebook:focus-visible { opacity: .8; transform: translateY(-1px); }
    .facebook svg { display: block; }
    @media (max-width: 520px) {
      main { width: min(100% - 2rem, 760px); padding-block: 30px; }
      h1 { margin-bottom: 32px; }
      .description { line-height: 1.7; }
      .farewell { margin-top: 26px; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }