body{background:#f1f6f3}body>main{max-width:420px;margin:6vh auto 24px;padding:28px;box-sizing:border-box;background:#fff;border:1px solid #d5e3db;border-radius:14px}#login{display:grid;gap:16px}#login>label{display:grid;gap:6px}#login input:not([type=range]){box-sizing:border-box;width:100%}#login-submit{width:100%}#puzzle{padding:12px;margin:0;border:1px solid #d5e3db;border-radius:8px;background:#f7faf8;min-width:0}#puzzle[hidden]{display:none}#puzzle-label{margin:0 0 10px;font-size:14px}#puzzle-frame{position:relative;max-width:300px;width:100%;margin:auto;overflow:hidden;border-radius:6px}#puzzle-background{width:100%;height:auto;display:block}#puzzle-piece{position:absolute;left:0;pointer-events:none;filter:drop-shadow(0 1px 2px #0008)}.puzzle-slider-label{display:grid;gap:6px;font-size:13px;margin-top:12px}#puzzle-offset{width:100%;margin:0;padding:0;border:0;background:transparent;height:40px;cursor:ew-resize;accent-color:#176449;touch-action:pan-y}.puzzle-footer{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-top:6px}#puzzle-status{font-size:12px;color:#476457;overflow-wrap:anywhere}#puzzle-refresh{flex-shrink:0;padding:6px;font-size:12px}#message{margin:0;color:#a13226;min-height:1.4em}body>footer{text-align:center;font-size:13px;padding:8px 16px 24px;color:#65796d}@media(max-width:460px){body>main{margin:16px 12px 12px;padding:20px}#puzzle{padding:10px}}