:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #1c120c; color: #f3e2bd; font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.6; overflow-wrap: break-word; }
a { color: #e8c991; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: #fff1cf; }
a:focus-visible { outline: 2px solid #e8c991; outline-offset: 2px; }
.seo-header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; max-width: 1040px; margin: 0 auto; padding: 8px 20px; border-bottom: 1px solid rgba(217, 164, 65, 0.35); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.seo-brand { display: inline-flex; align-items: center; min-height: 44px; color: #d9a441; font-size: 20px; font-weight: 800; text-decoration: none; letter-spacing: 0.02em; }
.seo-header nav, .seo-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.seo-header nav { margin-left: auto; }
.seo-header nav a, .seo-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; }
.seo-header nav a[aria-current="page"] { color: #fff1cf; text-decoration: none; }
.seo-nav-play, .seo-play { justify-content: center; padding: 0 22px; border-radius: 8px; background: #d76432; border: 2px solid #e8c991; color: #fff8e6; text-decoration: none; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 800; letter-spacing: 0.04em; }
.seo-nav-play { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 16px; }
.seo-nav-play:hover, .seo-play:hover, .seo-nav-play:focus-visible, .seo-play:focus-visible { background: #e57744; color: #fff; }
.seo-play-row { margin: 24px 0; }
.seo-play { display: inline-flex; align-items: center; min-height: 56px; font-size: 20px; text-transform: uppercase; }
main { max-width: 1040px; margin: 0 auto; padding: 8px 20px 48px; }
h1 { margin: 24px 0 12px; color: #d9a441; font-size: 40px; line-height: 1.15; }
h2 { margin: 40px 0 12px; color: #d9a441; font-size: 28px; line-height: 1.25; }
h3 { margin: 12px 0 6px; color: #e8c991; font-size: 20px; line-height: 1.3; }
p, ul, ol, dl { margin: 0 0 16px; }
ul, ol { padding-left: 24px; }
li { margin: 0 0 8px; }
strong { color: #e8c991; }
.seo-lead { font-size: 21px; max-width: 760px; }
p, ul:not(.seo-cards), ol, dl { max-width: 760px; }
.seo-hero { margin: 8px 0 24px; }
.seo-hero img { display: block; width: 100%; max-width: 880px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 52%; border-radius: 10px; border: 2px solid rgba(217, 164, 65, 0.5); }
figcaption { margin-top: 8px; font-size: 16px; color: #d8c49c; }
.seo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 0; list-style: none; }
.seo-cards li { margin: 0; padding: 12px; border: 1px solid rgba(217, 164, 65, 0.35); border-radius: 10px; background: rgba(255, 241, 207, 0.04); }
.seo-cards img { display: block; width: 100%; height: auto; border-radius: 6px; }
.seo-cards img[width="256"] { width: 96px; height: 96px; }
.seo-cards p { margin: 0; font-size: 16px; }
.seo-table { overflow-x: auto; max-width: 100%; margin: 0 0 16px; }
table { border-collapse: collapse; min-width: 320px; max-width: 900px; font-size: 16px; }
caption { text-align: left; padding: 0 0 8px; color: #d8c49c; }
th, td { padding: 8px 12px; border: 1px solid rgba(217, 164, 65, 0.35); text-align: left; vertical-align: top; }
thead th { color: #d9a441; }
tbody th { color: #e8c991; font-weight: 700; }
.seo-faq dt { margin: 20px 0 6px; color: #e8c991; font-weight: 700; font-size: 19px; }
.seo-faq dd { margin: 0; }
.seo-footer { max-width: 1040px; margin: 0 auto; padding: 16px 20px 40px; border-top: 1px solid rgba(217, 164, 65, 0.35); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; color: #d8c49c; }
@media (max-width: 480px) {
  body { font-size: 17px; }
  .seo-header { padding: 4px 16px; gap: 0 12px; }
  .seo-nav-play { margin-left: auto; order: 1; }
  .seo-header nav { order: 2; width: 100%; margin-left: 0; gap: 0 16px; }
  .seo-header nav a { font-size: 15px; }
  main { padding: 4px 16px 40px; }
  h1 { font-size: 28px; margin-top: 16px; }
  h2 { font-size: 23px; margin-top: 32px; }
  .seo-lead { font-size: 18px; }
  .seo-play { width: 100%; font-size: 17px; letter-spacing: 0.02em; padding: 0 12px; }
  .seo-cards { grid-template-columns: 1fr; }
  th, td { padding: 6px 8px; font-size: 15px; }
}