:root{color:#243652;font-synthesis:none;background:#f2f4f7;font-family:system-ui,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{margin:0}button,select,.upload{font:inherit;color:#243652;cursor:pointer;background:#fff;border:1px solid #cad3e0;border-radius:9px;min-height:44px;padding:10px 14px}button:hover,.upload:hover{background:#e8eef8}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,.upload:focus-within{outline-offset:2px;outline:3px solid #567cca}[hidden]{display:none!important}header{background:#fff;border-bottom:1px solid #dce2ec;align-items:center;gap:12px;padding:16px 24px;display:flex}.brand{flex:1;font-family:Georgia,serif;font-size:26px}main{max-width:1000px;margin:auto;padding:70px 26px}h1{font-size:clamp(28px,5vw,44px);font-weight:500}.eyebrow{color:#617795;letter-spacing:3px;font-size:13px}.intro{max-width:700px;margin-bottom:28px;line-height:1.8}.upload{color:#fff;background:#25456d;display:inline-block}.note{color:#64748b;margin-top:40px;font-size:13px;line-height:1.8}.score{border-bottom:1px solid #dce2ec;align-items:center;gap:10px;padding:16px 0;display:flex}.score .open{text-align:left;overflow-wrap:anywhere;flex:1}.score small{color:#617795;margin-top:6px;display:block}#reader{flex-direction:column;height:100dvh;display:flex}#reader header{flex-shrink:0;padding:10px 16px}#title{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}#settings{flex-wrap:wrap;flex-shrink:0;gap:14px;max-height:30dvh;padding:12px 20px;display:flex;overflow:auto}#settings label{align-items:center;gap:6px;display:flex}#settings small{color:#64748b;width:100%}#stage{overscroll-behavior:contain;text-align:center;background:#dfe4ec;flex:1;min-height:0;padding:16px;overflow:auto}canvas{touch-action:pan-x pan-y;background:#fff;margin:auto;display:block;box-shadow:0 4px 22px #24365225}footer{padding:10px 12px max(10px, env(safe-area-inset-bottom));background:#fff;border-top:1px solid #cad3e0;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:10px;display:flex}#status{color:#835515;padding:0 20px;font-size:13px}#status:not(:empty){padding:8px 20px}#repeat-status{color:#64748b;font-size:13px}.sr-only{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=600px){#reader header{flex-wrap:wrap}#title{flex-basis:100%;order:-1}header{padding:12px}main{padding:30px 18px}.score{flex-wrap:wrap}footer{gap:5px}button,select{padding:8px 10px}}