:root { color-scheme:dark; --paper:#f8f4e8; --ink:#17231e; --green:#afe1ad; --red:#ff807f; --muted:#adbbb0; --line:#36473c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Arial, Helvetica, sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:var(--green); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid var(--red); outline-offset:5px; }
.wrap { width:min(960px, calc(100% - 48px)); margin-inline:auto; }
.skip { position:absolute; top:12px; left:12px; padding:12px; background:var(--ink); transform:translateY(-200%); z-index:2; }
.skip:focus { transform:none; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:28px 0; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--paper); text-decoration:none; font-size:19px; font-weight:800; letter-spacing:-.6px; line-height:1.3; }
.melon { flex:none; width:25px; height:17px; background:var(--red); border:4px solid var(--green); border-top:0; border-radius:0 0 30px 30px; transform:rotate(-15deg); }
.site-header nav { font-size:14px; }
.breadcrumbs { margin:24px 0; color:var(--muted); font-size:13px; }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.breadcrumbs li + li::before { content:"/"; margin-right:8px; }
.hero { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); align-items:center; gap:36px; padding:12px 0 36px; }
.eyebrow { color:var(--green); margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }
h1 { margin:0 0 18px; color:var(--paper); font-size:clamp(30px, 4.5vw, 44px); line-height:1.12; letter-spacing:-1.4px; overflow-wrap:break-word; }
.answer { font-size:18px; line-height:1.6; margin:0 0 22px; }
.hero-image { display:block; width:100%; height:auto; border:1px solid #536653; border-radius:12px; }
.play-link { display:inline-block; padding:11px 19px; border-radius:6px; background:var(--green); color:var(--ink); font-weight:700; text-decoration:none; line-height:1.4; }
.play-link:hover { background:var(--paper); }
.content { max-width:740px; }
.content section { padding:25px 0; border-top:1px solid var(--line); }
h2 { margin:0 0 12px; font-size:26px; line-height:1.25; letter-spacing:-.6px; }
h3 { margin:0 0 7px; font-size:18px; line-height:1.4; }
p { margin:0 0 14px; }
section > :last-child, .faq-item > :last-child { margin-bottom:0; }
ul, ol { padding-left:22px; }
li + li { margin-top:8px; }
.faq-item + .faq-item { margin-top:24px; }
.related-links { display:flex; flex-wrap:wrap; gap:12px 24px; list-style:none; padding:0; }
.related-links li + li { margin:0; }
.site-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:34px; padding:22px 0 28px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.site-footer a { overflow-wrap:anywhere; }
@media (max-width:700px) { .hero { grid-template-columns:1fr; gap:24px; } .hero-image { max-width:520px; } }
@media (max-width:480px) { .wrap { width:calc(100% - 36px); } .brand { font-size:17px; } .site-header { padding:24px 0; } .breadcrumbs { margin:20px 0; } .hero { padding-top:8px; } h1 { letter-spacing:-.8px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }