.rotate-bar{display:grid;gap:var(--s-4);margin-top:var(--s-5);padding:var(--s-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.rotate-bar[hidden]{display:none}@media(min-width:48rem){.rotate-bar{grid-template-columns:minmax(0,1fr) minmax(12rem,18rem);align-items:start}}.rotate-controls{display:grid;gap:var(--s-3);align-content:start}.rotate-turns{display:flex;flex-wrap:wrap;gap:var(--s-2)}.rotate-range{min-width:0}.rotate-range .input{font-family:var(--mono);font-size:var(--fs-12)}.rotate-range .field-hint.is-bad{color:var(--danger)}.rotate-picks{display:flex;flex-wrap:wrap;gap:var(--s-1)}.rotate-turns .btn:nth-child(2) .i{transform:scaleX(-1)}.rotate-turns .btn:nth-child(3) .i{transform:rotate(180deg)}.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:var(--s-3);margin:var(--s-5) 0 0;padding:0;list-style:none}.page-grid:empty{display:none}.page-tile{position:relative}.page-pick{display:grid;gap:var(--s-2);width:100%;padding:var(--s-2);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--muted);cursor:pointer;transition:border-color var(--fast) var(--ease-out),background-color var(--fast) var(--ease-out)}.page-pick:hover{border-color:var(--border-strong)}.page-tile.is-picked .page-pick{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}.page-number{font:600 var(--fs-12)/1 var(--mono)}.page-tile.is-turned .page-number:after{content:" ↻";color:var(--accent)}.page-shot{position:relative;display:block;aspect-ratio:var(--far, .707);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--raised);overflow:hidden}.page-shot-inner{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) rotate(var(--turn, 0deg));transition:transform var(--base) var(--ease-out)}.page-shot.is-quarter .page-shot-inner{width:calc(100% * var(--ar));height:calc(100% / var(--ar))}.page-shot canvas{display:block;width:100%;height:100%;background:#fff}.page-shot.is-blank:after{content:"?";position:absolute;inset:0;display:grid;place-items:center;color:var(--faint)}.page-turn{position:absolute;top:var(--s-2);right:var(--s-2);width:2rem;height:2rem;border-radius:var(--r-sm);background:var(--surface);color:var(--muted);opacity:0;transition:opacity var(--fast) var(--ease-out)}.page-turn .i{transform:scaleX(-1)}.page-tile:hover .page-turn,.page-turn:focus-visible{opacity:1}@media(hover:none){.page-turn{opacity:1}}