:root{font-family:"Microsoft YaHei",sans-serif;color:#302d29;background:#f6f5f2;--accent:#786143}*{box-sizing:border-box}body{margin:0}header{padding:22px 4%;display:flex;justify-content:space-between;border-bottom:1px solid #dedad3;background:white}a{color:inherit;text-decoration:none;font-size:12px}.brand{font-size:22px;font-weight:600}.brand small{font-size:12px;font-weight:400;margin-left:15px;color:#898277}main{max-width:1420px;margin:auto;padding:26px 4%}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}h1{font-size:25px;font-weight:500;margin:0 0 8px}.intro p,.intro>span{font-size:12px;color:#8b8174;margin:0}#viewer{position:relative;aspect-ratio:1672/941;background:#29241e;overflow:hidden;border-radius:8px;touch-action:none;cursor:grab;outline-offset:4px}#viewer:active{cursor:grabbing}canvas{display:block;width:100%;height:100%}.top,.bottom{position:absolute;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;font-size:11px}.top{top:14px}.bottom{bottom:14px}.top span,.bottom span,.top button,.bottom button{background:#fffdf2e8;padding:8px 12px;border-radius:4px}.top button,.bottom button{pointer-events:auto}button{font:inherit;color:inherit;border:1px solid #d4cdc3;border-radius:5px;background:#fff;cursor:pointer;padding:10px 16px}button:focus-visible,input:focus-visible{outline:2px solid #ad8754;outline-offset:3px}#status{position:absolute;top:45%;width:100%;text-align:center;color:white}.controls{display:flex;align-items:center;gap:24px;padding:22px;background:white;border:1px solid #e1dcd4;border-radius:0 0 8px 8px}.read{display:grid;gap:5px;min-width:90px}.read small{font-size:11px;color:#90877c}.read strong{font-size:24px;font-weight:400;min-width:90px;color:var(--accent)}.slider{flex:1}input[type=range]{width:100%;accent-color:var(--accent)}.scale{display:flex;justify-content:space-between}.scale button{border:0;padding:2px 0;font-size:11px;color:#938878}.primary{background:var(--accent);color:white;border-color:var(--accent)}#original[aria-pressed=true]{background:#e9e1d3}.settings{display:flex;align-items:center;gap:25px;margin:18px 0;font-size:12px;color:#797064}.settings>div{display:flex;align-items:center;gap:12px}.settings input[type=range]{width:130px}.settings input[type=checkbox]{accent-color:var(--accent)}.settings output{min-width:30px}#viewNote{margin-left:auto;font-size:11px}.notes{display:grid;grid-template-columns:1fr 1fr;gap:50px;border-top:1px solid #ded8ce;margin-top:22px;padding-top:18px}h2{font-size:12px;font-weight:600;margin:0 0 8px}.notes p{font-size:11px;line-height:1.9;color:#91887d;margin:0}footer{text-align:center;color:#aaa093;padding:12px 20px 25px;font-size:10px}@media(max-width:760px){main{padding:20px 3%}h1{font-size:21px}.intro>span{display:none}.controls{padding:14px;gap:12px;flex-wrap:wrap}.read{min-width:65px}.read strong{font-size:20px;min-width:65px}.slider{min-width:150px}.controls>button{font-size:11px;padding:9px 12px}.settings{flex-wrap:wrap;gap:15px}#viewNote{margin:0}.notes{gap:20px}.top,.bottom{left:8px;right:8px;font-size:9px}.top{top:8px}.bottom{bottom:8px}.top span,.bottom span,.top button,.bottom button{padding:5px 7px}}

#viewer:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0}