:root { color-scheme: light dark; --bg:#F8F6F2; --card:#fff; --ink:#172238; --muted:#52627D; --line:#DFE5ED; --accent:#B51F3C; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main,nav,footer { max-width:880px; margin:auto; padding:24px; }
nav { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); font-size:14px; }
a { color:inherit; text-underline-offset:4px; overflow-wrap:anywhere; }
a:hover { color:var(--accent); }
a:focus-visible,summary:focus-visible { outline:3px solid #7295C4; outline-offset:4px; }
main { padding-top:56px; padding-bottom:64px; }
h1 { font-size:clamp(32px,6vw,48px); line-height:1.15; letter-spacing:-.025em; }
h2 { margin-top:36px; line-height:1.3; font-size:24px; }
p,li { max-width:76ch; }
li { margin-bottom:12px; }
.eyebrow { color:var(--accent); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.notice { padding:20px 24px; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--card); border-radius:8px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0; }
.button { display:inline-block; padding:10px 18px; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-weight:600; }
code { font-size:.9em; overflow-wrap:anywhere; }
footer { border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
footer a { margin-right:16px; }
details { margin:24px 0; }
summary { cursor:pointer; font-weight:600; }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; }
.gallery figure { margin:0; }
.gallery img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:14px; }
.gallery figcaption { font-size:13px; color:var(--muted); margin-top:8px; }
@media(prefers-color-scheme:dark) { :root { --bg:#0F1828; --card:#1F2D44; --ink:#F4F7FB; --muted:#B3C2D8; --line:#2D3F60; --accent:#FF91A5; } }
@media(max-width:540px) { main { padding-top:32px; } .notice { padding:16px; } .gallery { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; } .gallery figure { scroll-snap-align:start; } }