:root{color-scheme:light; font-family:system-ui,sans-serif; color:#172b3c; background:#f3f6f5}
*{box-sizing:border-box} body{margin:0} main,header{max-width:1040px;margin:auto;padding:24px}
header a,a{color:#075e65} .hero{background:#102b40;color:#fff;border-radius:24px;padding:clamp(24px,5vw,48px)}
h1{font-size:clamp(1.8rem,5vw,3rem);line-height:1.3;margin:.4em 0}.tag{color:#85ead6;font-weight:700}
.intro{font-size:1.1rem;line-height:1.8;max-width:48rem}.notice{padding:16px 20px;background:#fff1cf;border-radius:12px;line-height:1.7;margin:24px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
details{background:#fff;border:1px solid #cddcda;border-radius:16px;overflow:hidden}
summary{cursor:pointer;padding:22px;font-weight:700;min-height:115px;line-height:1.6} summary:focus-visible,a:focus-visible,button:focus-visible,textarea:focus-visible{outline:3px solid #ee8433;outline-offset:3px}
summary strong{display:block;font-size:1.7rem;color:#076d71}.body{border-top:1px solid #dce7e4;padding:0 22px 20px;line-height:1.8}
section{margin:36px 0}.next{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-block;background:#086c6b;color:white;border-radius:10px;padding:14px 20px;text-decoration:none;font-weight:700}
footer{padding:24px 0;line-height:1.7;font-size:.95rem}
header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
button.button{border:0;font:inherit;font-weight:700;cursor:pointer} button:disabled{opacity:.6;cursor:wait}
[hidden]{display:none!important} .copy-controls{margin-top:12px} #copy-status{min-height:1.7em;line-height:1.7}