:root { color-scheme: light; --ink:#172235; --paper:#f8f5f0; --sage:#839c8c; --violet:#7960b5; --line:#ded8cf; --soft:#eeeae2; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:#51408b; }
.shell { max-width:860px; padding:0 24px; margin:0 auto; }
header { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:750; letter-spacing:.02em; }
.mark { width:30px; height:30px; border:2px solid var(--sage); border-radius:50%; position:relative; box-shadow:inset 0 0 0 5px #edf1eb; }
.mark::after { content:""; position:absolute; width:5px; height:5px; right:4px; top:7px; border-radius:50%; background:var(--violet); }
nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:14px; font-size:13px; }
nav a { text-decoration:none; color:#58635d; }
.language-switch { padding:4px 8px; border:1px solid var(--line); border-radius:999px; color:var(--violet); font-weight:700; }
main { padding:58px 0 82px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--sage); font-size:12px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--sage); }
h1 { margin:16px 0 16px; font-size:clamp(35px,5vw,58px); line-height:1.02; letter-spacing:-.055em; font-weight:650; }
h2 { margin:40px 0 11px; font-size:22px; letter-spacing:-.03em; }
p,li { color:#555d58; font-size:16px; line-height:1.7; }
ul { padding-left:22px; }
table { width:100%; margin:22px 0 30px; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fffdf9; font-size:14px; }
th, td { padding:13px 14px; text-align:left; border-bottom:1px solid var(--line); color:#555d58; }
th { color:var(--ink); background:#f1eee8; font-weight:720; }
tr:last-child td { border-bottom:0; }
.lead { max-width:690px; font-size:18px; }
.home-play-button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; margin-top:24px; padding:0 24px; border-radius:16px; background:var(--ink); color:#fff; font-size:16px; font-weight:750; text-decoration:none; box-shadow:0 13px 30px rgba(23,34,53,.18); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.home-play-button:hover { transform:translateY(-2px); background:#202d42; box-shadow:0 17px 34px rgba(23,34,53,.23); }
.home-play-button:focus-visible { outline:3px solid rgba(121,96,181,.32); outline-offset:4px; }
.notice { margin:30px 0; padding:19px 20px; border:1px solid #cbd8ce; border-radius:18px; background:#f2f7f2; }
.notice p { margin:0; color:#405548; }
.card { margin-top:24px; padding:24px; border:1px solid var(--line); border-radius:22px; background:#fffdf9; }
.card h2 { margin-top:0; }
.meta { color:#76736d; font-size:13px; }
footer { padding:28px 0 42px; border-top:1px solid var(--line); color:#76736d; font-size:13px; }
footer .shell { display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; }
@media (max-width:640px) { header { padding:16px 0; align-items:flex-start; flex-direction:column; } nav { justify-content:flex-start; } main { padding-top:42px; } }