:root{color-scheme:light;--ink:#1a1a1a;--sub:#4d4d4d;--line:#d9d9d9;--accent:#0b57d0;--accent-ink:#0842a0;--code-bg:#f4f4f2;--note-bg:#f7f9fd}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.85;font-size:16px}
header.site{border-bottom:1px solid var(--line);padding:10px 16px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
header.site .brand{font-weight:700;font-size:15px;color:var(--ink);text-decoration:none}
header.site nav a{font-size:13px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;margin-right:14px}
header.site nav a:hover{color:var(--accent-ink);text-decoration:underline}
main{max-width:760px;margin:0 auto;padding:20px 16px 56px}
h1{font-size:24px;line-height:1.5;margin:8px 0 6px;text-wrap:balance}
h2{font-size:19px;line-height:1.5;margin:34px 0 8px;padding-top:18px;border-top:1px solid var(--line);text-wrap:balance}
h3{font-size:16px;margin:22px 0 6px;text-wrap:balance}
p,li{text-wrap:pretty}
.cat{font-size:12px;color:var(--accent-ink);font-weight:700;letter-spacing:.04em}
.meta{font-size:13px;color:var(--sub);margin:2px 0 14px}
.lead{font-size:16.5px}
a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
a:visited{color:#5b3a9e}
ul,ol{padding-left:1.4em}
li{margin:4px 0}
table{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0}
th,td{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}
th{background:#fafafa}
pre{background:var(--code-bg);padding:12px 76px 12px 14px;overflow-x:auto;font-size:13px;line-height:1.6;border-radius:4px;position:relative}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
p code,li code,td code{background:var(--code-bg);padding:1px 5px;border-radius:3px}
.note{background:var(--note-bg);border-left:3px solid var(--accent);padding:10px 14px;margin:14px 0;font-size:15px}
.num{font-size:22px;font-weight:700}
.stats{display:flex;flex-wrap:wrap;gap:8px 28px;margin:12px 0}
.stats div{min-width:120px}
.stats .lbl{font-size:12.5px;color:var(--sub)}
.src{margin-top:36px;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.src .short{color:var(--sub);font-size:13px;word-break:break-all}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:28px;font-size:14px}
button.demo, .btn{display:inline-block;background:var(--accent);color:#fff;border:0;padding:9px 18px;font-size:15px;border-radius:4px;cursor:pointer;text-decoration:none}
button.demo:active,.btn:active{transform:scale(.98)}
button.sub{background:#fff;color:var(--accent-ink);border:1px solid var(--accent)}
.demo-box{border:1px solid var(--line);padding:16px;margin:12px 0}
dialog{border:1px solid #999;border-radius:6px;padding:20px;max-width:min(420px,90vw)}
dialog::backdrop{background:rgba(0,0,0,.45)}
[popover]{border:1px solid #999;border-radius:6px;padding:14px 18px}
textarea.autogrow{field-sizing:content;min-block-size:3lh;max-block-size:12lh;width:100%;font-size:15px;padding:8px}
details{border-top:1px solid var(--line);padding:8px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;padding:4px 0}
.balance-demo{font-size:20px;font-weight:700;max-width:300px;line-height:1.5}
.wrap-balance{text-wrap:balance}.wrap-normal{text-wrap:normal}
.theme-demo{padding:14px;border:1px solid var(--line);margin:10px 0}
.theme-light{color-scheme:light;background:#fff;color:#1a1a1a}
.theme-dark{color-scheme:dark;background:#1f1f1f;color:#f0f0f0}
.theme-demo .swatch{background:light-dark(#e8f0fe,#3c4043);padding:8px 12px;margin-top:8px}
input.search{width:100%;font-size:16px;padding:10px;border:1px solid #999;border-radius:4px}
.search-out{font-size:14px;margin-top:10px}
.search-out div{padding:6px 0;border-top:1px solid var(--line)}
.cls-stage{border:1px solid var(--line);padding:10px}
.cls-player{background:#333;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;width:100%}
.cls-reserve{aspect-ratio:16/9}
footer.site{border-top:1px solid var(--line);padding:14px 16px calc(14px + env(safe-area-inset-bottom));font-size:12.5px;color:var(--sub);max-width:760px;margin:0 auto}
.toc-item{padding:12px 0;border-top:1px solid var(--line)}
.toc-item a.title{font-size:16.5px;font-weight:600;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.toc-item a.title:visited{color:#5b3a9e}
.toc-item a.title::before{content:"› ";font-weight:700}
.toc-item a.title:hover{color:var(--accent-ink);text-decoration:underline}
.toc-item p{margin:4px 0 0;font-size:14px;color:var(--sub)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}