:root{--paper:#F7F3EA;--ink:#4E4C5F;--text:#3A3848;--muted:#6E6A80;--card:#fff;--mint:#A9DCC9;--butter:#FBE58A;--lavender:#DCD3F0;--sky:#B9D3EC;--pink:#F4B9C2}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);font-family:"Zen Maru Gothic",system-ui,sans-serif;font-weight:500;line-height:1.7}
.wrap{max-width:720px;margin:0 auto;padding:28px 16px 64px}
h1{font-size:34px;font-weight:900;line-height:1.3;margin:12px 0}
h2{font-size:22px;font-weight:900;margin:32px 0 10px}
h3{font-size:17px;font-weight:900;margin:22px 0 6px}
p,li{font-size:16px}
.muted{color:var(--muted);font-size:14px}
.card{background:var(--card);border:2.5px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);padding:18px;margin:14px 0}
.card.mint{background:var(--mint);color:#3A3848}.card.butter{background:var(--butter);color:#3A3848}.card.lav{background:var(--lavender);color:#3A3848}.card.sky{background:var(--sky);color:#3A3848}
.btn{display:inline-block;background:var(--butter);color:#3A3848;border:2.5px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);padding:10px 18px;font-weight:900;text-decoration:none;font-size:16px;cursor:pointer;font-family:inherit}
.btn.white{background:var(--card);color:var(--text)}
.btn[aria-disabled=true]{opacity:.55;cursor:default}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.icon{width:96px;height:96px;border-radius:22px;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.code{font-size:34px;font-weight:900;letter-spacing:6px;word-break:break-all}
ol{padding-left:22px}
a{color:inherit}
footer{margin-top:48px;font-size:13px;color:var(--muted)}
.lang a{margin-right:10px}
.shots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:26px -16px 6px;padding:4px 16px 16px;-webkit-overflow-scrolling:touch}
.shots img{flex:none;width:200px;height:auto;border-radius:18px;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);scroll-snap-align:start;background:var(--card)}
/* パソコンでは横長の画面を生かして、横に5枚ずつ並べる（本文より広く取る） */
@media (min-width:900px){.shots{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;overflow:visible;width:min(1120px,calc(100vw - 48px));margin:30px 0 10px;position:relative;left:50%;transform:translateX(-50%);padding:0}.shots img{width:100%}}