:root{--cyan:#3ee7ff;--lime:#b9ff46;--pink:#ff3f9c;--accent:var(--lime);--ink:#e8f4ff;--muted:#9cb1c5;--panel:#0b1627}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"Segoe UI","Arial Narrow",sans-serif;background:radial-gradient(circle at 12% 8%,#203b6b 0,transparent 30%),radial-gradient(circle at 88% 88%,color-mix(in srgb,var(--accent) 12%,transparent) 0,transparent 30%),#07101d;line-height:1.7}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(#3ee7ff08 1px,transparent 1px),linear-gradient(90deg,#3ee7ff08 1px,transparent 1px);background-size:38px 38px}
a{color:var(--cyan)}
.guide-shell{width:min(1040px,calc(100% - 32px));margin:0 auto;padding:28px 0 48px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px;color:var(--muted);font-size:13px}.breadcrumb a{text-decoration:none}.breadcrumb a:hover,.breadcrumb a:focus-visible{text-decoration:underline;outline:0}
.guide-hero,.guide-section,.guide-footer{border:1px solid #315473;background:linear-gradient(150deg,#111f34f5,#07101df5);box-shadow:0 0 24px #0008,inset 0 0 28px color-mix(in srgb,var(--accent) 5%,transparent)}
.guide-hero{padding:clamp(24px,5vw,52px);border-top:3px solid var(--accent)}
.guide-hero h1{margin:0;color:var(--accent);font:900 clamp(38px,7vw,72px)/1 "Arial Black",Impact,sans-serif;letter-spacing:-.06em;text-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent)}
.eyebrow{margin:10px 0 0;color:var(--cyan);font-weight:800;letter-spacing:.16em;text-transform:uppercase}.lead{max-width:780px;margin:22px 0 0;color:#d7e6f2;font-size:clamp(17px,2vw,21px)}
.guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.cta,.secondary-link{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:10px 20px;border:1px solid var(--accent);color:#07101d;background:var(--accent);font:900 13px "Arial Black",sans-serif;letter-spacing:.09em;text-decoration:none}.secondary-link{border-color:var(--cyan);color:var(--cyan);background:#07101d}.cta:hover,.cta:focus-visible,.secondary-link:hover,.secondary-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.guide-section{padding:24px}.guide-section.wide{grid-column:1/-1}.guide-section h2{margin:0 0 12px;color:var(--cyan);font:900 23px "Arial Black",sans-serif;letter-spacing:.02em}.guide-section h3{margin:20px 0 8px;color:var(--accent);font-size:17px}.guide-section p{margin:0 0 13px;color:#c8d7e5}.guide-section li{margin:7px 0;color:#c8d7e5}
.control-list{display:grid;grid-template-columns:minmax(120px,.5fr) 1fr;margin:0}.control-list dt,.control-list dd{margin:0;padding:9px 10px;border-top:1px solid #243d56}.control-list dt{color:var(--accent);font-weight:800}.control-list dd{color:#d7e5f0}
.fact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}.fact{padding:12px;border:1px solid #2d4b65;background:#07111e}.fact strong{display:block;color:var(--accent);font-size:13px}.fact span{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.faq details{border-top:1px solid #29445d;padding:13px 0}.faq summary{color:#edf7ff;font-weight:800;cursor:pointer}.faq details p{margin:9px 0 0}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.related a{min-height:70px;display:grid;place-items:center;border:1px solid #365671;background:#081522;color:var(--cyan);font-weight:900;text-decoration:none}.related a:hover,.related a:focus-visible{border-color:var(--accent);color:var(--accent);outline:0}
.guide-footer{margin-top:16px;padding:18px;text-align:center}.guide-footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px}.guide-footer a{font-size:12px;font-weight:800;letter-spacing:.08em}.guide-footer p{margin:12px 0 0;color:#728aa0;font-size:11px}
.comparison{width:100%;border-collapse:collapse}.comparison th,.comparison td{padding:10px;border-bottom:1px solid #29445d;text-align:left}.comparison th{color:var(--accent)}
@media(max-width:720px){.guide-shell{width:min(100% - 20px,1040px);padding-top:14px}.guide-grid{grid-template-columns:1fr}.guide-section.wide{grid-column:auto}.guide-hero,.guide-section{padding:20px}.fact-strip{grid-template-columns:1fr}.related{grid-template-columns:1fr}.control-list{grid-template-columns:110px 1fr}.guide-footer nav{gap:7px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Content examples remain readable without JavaScript. */
.guide-jumps{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}.guide-jumps a{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border:1px solid #365671;font-weight:700;font-size:13px;text-decoration:none}
.rule-figure,.play-figure{margin:20px 0}.rule-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:step}.rule-steps span{padding:18px 10px;border:1px solid var(--accent);background:#091827;color:var(--accent);text-align:center;font-weight:800}.rule-steps span::before{counter-increment:step;content:counter(step) " / ";color:#9cb1c5}.rule-figure figcaption,.play-figure figcaption,.content-review{font-size:13px;color:#abc0d2;line-height:1.65}.play-figure img{display:block;width:100%;height:auto;border:1px solid #365671}.content-review{border-top:1px solid #315473;padding-top:14px}.guide-section{scroll-margin-top:16px}.guide-section p{max-width:85ch}.comparison-wrap{overflow-x:auto}.guide-section a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:540px){.rule-steps{grid-template-columns:1fr;gap:8px}.rule-steps span{padding:12px}.guide-jumps{gap:8px}.guide-jumps a{flex:1;justify-content:center;font-size:11px}.comparison th,.comparison td{padding:8px;font-size:13px}}