:root{--bg:#fbf6ee;--fg:#3a3128;--mut:#7b6f62;--card:#fff;--line:#e8ddcc;--ac:#3e6656;--ac2:#d9825b}
@media(prefers-color-scheme:dark){:root{--bg:#1f1b17;--fg:#f0e8dd;--mut:#a89c8e;--card:#2a2520;--line:#3b342d;--ac:#8cc4ab;--ac2:#e8a27f}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans CJK JP","Microsoft YaHei",sans-serif}
a{color:var(--ac)}a:focus-visible{outline:2px solid var(--ac2);outline-offset:3px;border-radius:4px}
header.top{display:flex;align-items:center;gap:10px;justify-content:space-between;max-width:960px;margin:0 auto;padding:14px 16px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;color:var(--fg)}.logo img{width:32px;height:32px;border-radius:8px}
.langs{font-size:14px;display:flex;gap:10px;flex-wrap:wrap}.langs a[aria-current]{color:var(--fg);font-weight:700;text-decoration:none}
main{max-width:960px;margin:0 auto;padding:0 16px 48px}
nav.crumb{font-size:14px;color:var(--mut);margin:4px 0 8px}nav.crumb a{color:var(--mut)}
h1{font-size:clamp(24px,5vw,34px);line-height:1.25;margin:0 0 6px}h2{font-size:22px;margin:36px 0 10px}.lead{color:var(--mut);margin:0 0 20px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}@media(max-width:720px){.hero{grid-template-columns:1fr}}
.prev{background:var(--card);border-radius:18px;padding:12px;box-shadow:0 2px 12px rgba(0,0,0,.07)}.prev img{width:100%;height:auto;display:block;border-radius:10px;image-rendering:auto}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 18px}dl.facts dt{color:var(--mut)}dl.facts dd{margin:0;font-weight:600}
.play{display:block;background:var(--ac);color:#fff;text-decoration:none;border-radius:14px;padding:14px 18px;font-weight:700;font-size:18px;text-align:center}
@media(prefers-color-scheme:dark){.play{color:#14201b}}.play small{display:block;font-weight:400;font-size:14px;opacity:.9}
.chart{background:#fff;border-radius:12px;padding:8px;overflow:auto;border:1px solid var(--line)}.chart img{max-width:100%;height:auto;display:block;margin:0 auto}
.note{color:var(--mut);font-size:14px}.dl{display:inline-block;margin-top:10px;font-weight:600}
table{border-collapse:collapse;width:100%;max-width:560px;font-size:15px}th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left}td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.sw{display:inline-block;width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.2);vertical-align:middle}
ol.steps{padding-left:22px}ol.steps li{margin:4px 0}.safety{background:var(--card);border-left:4px solid var(--ac2);padding:10px 14px;border-radius:8px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.grid a{display:block;background:var(--card);border-radius:14px;padding:10px;text-decoration:none;color:var(--fg);box-shadow:0 1px 8px rgba(0,0,0,.06);height:100%}
.grid img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block}.grid b{display:block;font-size:15px;line-height:1.3;margin-top:6px}.grid span{font-size:13px;color:var(--mut)}
footer{max-width:960px;margin:0 auto;padding:24px 16px 40px;color:var(--mut);font-size:14px;border-top:1px solid var(--line)}footer a{color:var(--mut)}