@font-face{font-family:PlexWeb;src:url(fonts/PlexWeb.woff2) format('woff2');font-weight:400 700;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0 auto;max-width:760px;padding:16px 14px 48px;background:#F7F5F0;color:#20232A;font-family:PlexWeb,"Hiragino Sans","Noto Sans JP",sans-serif;font-size:17px;line-height:1.65}
.series{color:#1C64D9;font-weight:600;margin:0}
h1{font-size:30px;margin:2px 0 4px}h2{font-size:23px;margin:34px 0 6px}
.lead{margin:0 0 8px}
#langBtn{margin-top:6px}
#toc{position:sticky;top:0;background:#F7F5F0;display:flex;flex-wrap:wrap;gap:8px;padding:10px 0;z-index:5;border-bottom:1px solid #D6E4F5}
#toc a{color:#20232A;text-decoration:none;border:1.5px solid #20232A;border-radius:999px;padding:6px 14px;font-size:15px;background:#fff}
.warn{background:#fff;border-left:5px solid #E8590C;padding:10px 12px;font-size:15px}
canvas{width:100%;height:auto;display:block;background:#F7F5F0;border:1px solid #E3DFD3;border-radius:10px;touch-action:manipulation}
.row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
button,.nextbtn{font:inherit;font-size:16px;padding:12px 18px;border-radius:10px;border:1.5px solid #20232A;background:#fff;color:#20232A;cursor:pointer;text-decoration:none;display:inline-block}
button.big,.nextbtn{background:#20232A;color:#fff;font-size:18px;padding:14px 22px}
button:disabled{opacity:.45}
.controls{display:grid;gap:10px;margin:12px 0}
.controls label{display:flex;align-items:center;gap:12px;font-size:16px}
.controls label span{min-width:11em}
.controls input[type=range]{flex:1;height:36px}
.controls .check span{min-width:0}
.controls input:disabled{opacity:.35}
.fix{background:#fff;border-left:5px solid #1C64D9;padding:10px 12px}
.note{color:#5C6370;font-size:15px}
.result{font-size:18px;background:#fff;border-radius:10px;padding:12px 14px}
.measure{margin:14px 0}
.holdbtn{width:100%;min-height:120px;font-size:20px;border-radius:14px;border:2px solid #20232A;background:#fff;touch-action:none;user-select:none;-webkit-user-select:none}
.holdbtn.on{background:#E8590C;color:#fff;border-color:#E8590C}
.band{display:flex;height:26px;border:1px solid #20232A;border-radius:6px;overflow:hidden;margin:8px 0;background:#fff}
.band i{display:block;height:100%}
.band .off{background:#E8590C}
#noteList{padding-left:1.2em}
footer{color:#5C6370;font-size:14px;margin-top:40px}
@media (max-width:420px){.controls label span{min-width:8.5em;font-size:15px}h1{font-size:26px}}
body.capture header,body.capture #toc,body.capture .warn,body.capture footer,body.capture #note,body.capture .nextbtn{display:none}