*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:flex;flex-direction:column;font:14px system-ui,-apple-system,sans-serif;background:#e9e9eb;color:#252525}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px;background:#fff;border-bottom:1px solid #ddd;flex-shrink:0}
.group{display:flex;align-items:center;gap:5px}.actions{flex-wrap:wrap}button,a{font:inherit}button{padding:7px 10px;border:1px solid #ddd;border-radius:6px;background:#fff;color:#252525;cursor:pointer}button:hover:not(:disabled){background:#f6eeee;border-color:#b63b43}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #9b202b;outline-offset:2px}
.action{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border:1px solid #a51d27;border-radius:6px;background:#a51d27;color:#fff;line-height:normal;text-decoration:none;cursor:pointer}.action:hover:not(:disabled){background:#84131b;border-color:#84131b;color:#fff}input{font:inherit;width:54px;padding:7px 3px;text-align:center;border:1px solid #ccc;border-radius:5px}#zoom{min-width:49px;text-align:center}
#status{font-size:13px;margin:0;padding:6px 12px;background:#f8f8f8;min-height:29px;flex-shrink:0}#status.error{color:#9b1c1c}
#viewport{flex:1;overflow:auto;position:relative;padding:16px;text-align:center;min-height:0}canvas{display:block;margin:0 auto;background:white;box-shadow:0 3px 15px #0002;max-width:none}
.textLayer{position:absolute;text-align:initial;inset:0;overflow:hidden;line-height:1;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2}
.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%}.textLayer ::selection{background:#608cff66}.textLayer .endOfContent{display:none}
#sheet{position:relative;margin:0 auto}.textLayer{--min-font-size:1;--text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size));--min-font-size-inv:calc(1 / var(--min-font-size))}.textLayer > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){--font-height:0;--scale-x:1;--rotate:0deg;font-size:calc(var(--text-scale-factor) * var(--font-height));transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}.textLayer .markedContent{display:contents}
[hidden]{display:none!important}@media(max-width:500px){.toolbar{gap:6px;padding:7px}.toolbar button,.toolbar .action{padding:7px 8px;font-size:12px}.toolbar label{font-size:12px}#viewport{padding:10px}}