*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#100e0c;color:#f3ebdd;font:16px/1.4 Arial,sans-serif}.reader{height:100vh;height:100dvh;display:grid;grid-template-rows:70px minmax(0,1fr) 70px;max-width:1800px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 26px;border-bottom:1px solid #4d3b28}a{color:#d4b47c;text-decoration:none}h1{font:normal 23px Georgia,serif;margin:0}h1 span{font:14px Arial,sans-serif;color:#c9bdac;margin-left:14px}header label{margin-left:auto;color:#d4b47c;font-size:14px}select,button{font:14px Arial,sans-serif;color:#f3e3c8;background:#261d14;border:1px solid #937346;padding:10px 14px}select{max-width:200px}main{display:flex;align-items:center;justify-content:center;min-height:0;padding:18px 24px}.stage{width:min(1400px,calc(100vw - 48px),calc((100vh - 176px)*1.5));width:min(1400px,calc(100vw - 48px),calc((100dvh - 176px)*1.5));aspect-ratio:3/2;flex-shrink:0}.stage img{display:block;width:100%;height:100%;object-fit:contain}footer{display:flex;align-items:center;justify-content:center;gap:30px;padding:12px 24px;border-top:1px solid #4d3b28}button{cursor:pointer;min-width:140px}button:disabled{opacity:.35;cursor:default}a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid #f3d29b;outline-offset:4px}#position{color:#d4b47c;text-align:center;min-width:230px}@media(max-width:700px){.reader{grid-template-rows:94px minmax(0,1fr) 90px}header{padding:10px 14px;gap:10px;flex-wrap:wrap}h1{font-size:19px}h1 span{display:none}header label{margin-left:0}.stage{width:min(calc(100vw - 24px),calc((100dvh - 208px)*1.5))}main{padding:12px}footer{padding:12px;gap:10px}button{min-width:0;padding:10px}#position{min-width:0;font-size:14px}}