:root { font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; color: #47382f; background: #fff5e9; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at 9% 12%, #dff5ff 0, transparent 29%), radial-gradient(circle at 91% 78%, #ffdbca 0, transparent 31%), #fff5e9; }
.page { width: min(780px, calc(100% - 24px)); margin: 0 auto; padding: clamp(18px, 4vw, 40px) 0 50px; }
.back { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 2px solid #e7caa8; border-radius: 14px; background: #fff; color: #754621; font-weight: 800; text-decoration: none; }
.back:hover { background: #fff2df; }
a:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
a { color: #854116; overflow-wrap: anywhere; }
.hero { padding: 28px 4px 16px; }
.eyebrow { margin: 0 0 7px; color: #bd683d; font-size: 13px; font-weight: 850; letter-spacing: .1em; }
h1 { margin: 0 0 12px; color: #763d25; font-size: clamp(29px, 6vw, 44px); line-height: 1.2; }
.hero > p:last-child { margin: 0; line-height: 1.7; }
section { margin: 16px 0; padding: clamp(18px, 4vw, 28px); border: 2px solid #fff; border-radius: 22px; background: #fffdf8; box-shadow: 0 5px 0 #edd6bc, 0 12px 30px #6e453015; }
h2 { margin: 0 0 14px; color: #82441d; font-size: clamp(19px, 4vw, 24px); }
p, li, dd { line-height: 1.8; }
p { margin: 10px 0; }
dl { margin: 0; }
dt { margin: 17px 0 4px; color: #6a442d; font-weight: 850; }
dt:first-child { margin-top: 0; }
dd { margin: 0; }
ul { margin: 10px 0; padding-left: 1.35em; }
li + li { margin-top: 10px; }
.copyright { font-weight: 800; }
.note { color: #74665d; font-size: 13px; }
details { margin: 14px 0; border: 1px solid #e5d3bc; border-radius: 12px; background: #fff8ec; }
summary { padding: 13px 15px; color: #754621; font-weight: 800; cursor: pointer; }
pre { overflow-x: auto; margin: 0; padding: 16px; border-top: 1px solid #e5d3bc; background: #fff; color: #3f3a35; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
footer { padding: 18px 0 0; }
@media (max-width: 480px) { .hero { padding-top: 22px; } section { border-radius: 17px; } }