:root{--top-gutter:36px;--side-gutter:16px;--binder-pad-x:40px;--binder-pad-y:40px;--binder-gap:40px;--page-numbers-height:48px;--chrome-y:calc(var(--top-gutter) + var(--side-gutter) + 2 * var(--binder-pad-y) + var(--page-numbers-height));--chrome-x:calc(2 * var(--side-gutter) + 2 * var(--binder-pad-x))}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{color:#fff;background:#2e2e2e;font-family:Arial,sans-serif}#root{width:100%;height:100%;padding:var(--top-gutter) var(--side-gutter) var(--side-gutter);justify-content:center;align-items:center;display:flex}.binder-container{flex-direction:column;align-items:center;max-width:100%;max-height:100%;display:flex}.binder{gap:var(--binder-gap);padding:var(--binder-pad-y) var(--binder-pad-x);background:#444;border-radius:20px;display:flex;position:relative;box-shadow:0 4px 24px #0000004d}.binder-edge{width:var(--binder-pad-x);cursor:pointer;z-index:2;position:absolute;top:0;bottom:0}.binder-edge.left{left:0}.binder-edge.right{right:0}.binder-edge:hover{background:#ffffff0d}.page{width:min(30vw, (100vw - var(--chrome-x) - var(--binder-gap)) / 2);height:min(80vh, 100dvh - var(--chrome-y));background:#222;border-radius:1vw;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:.5vw;padding:1vw;display:grid}.card-slot{box-sizing:border-box;background:#555;border:2px dashed #888;border-radius:8px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.card-back,.card-image{width:100%;height:100%;position:absolute;inset:0}.card-image{cursor:pointer;transition:opacity .2s}.page-numbers{width:100%;height:var(--page-numbers-height);letter-spacing:2px;justify-content:space-between;align-items:flex-end;font-size:1.2em;display:flex}.jump-to-page{align-items:center;display:flex}.jump-to-page label{margin-right:8px}.jump-to-page input{width:60px;margin-right:8px}@media (orientation:portrait){:root{--binder-pad-x:32px;--binder-pad-y:24px}.page{width:min(80vw, 56vh, 100vw - var(--chrome-x));height:min(80vh, 112vw, 100dvh - var(--chrome-y));border-radius:2vw;gap:1vw;padding:2vw}}@media (width<=480px),(height<=480px){:root{--top-gutter:32px;--side-gutter:8px;--binder-pad-x:20px;--binder-pad-y:12px;--binder-gap:16px;--page-numbers-height:40px}.page-numbers{letter-spacing:1px;font-size:1em}}