:root{--s:120px;--ink:#16202e;--mute:#6b7380;--red:#d6403a;--blue:#2f56c9;--win:#e6e8ed;--bar:#f3f4f7;--line:#16202e1f}*{box-sizing:border-box;margin:0}body{min-height:100vh;color:var(--ink);background:#4d6a96 url(/images/cover.jpg) 50%/cover no-repeat fixed;font:13px/1.3 -apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,system-ui,sans-serif}.sr{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.window{-webkit-backdrop-filter:blur(22px)saturate(1.3);backdrop-filter:blur(22px)saturate(1.3);background:#eceef3b8;flex-direction:column;min-height:100vh;display:flex}@media (min-width:900px){body{padding:40px}.window{border-radius:12px;max-width:1180px;min-height:calc(100vh - 80px);margin:0 auto;overflow:hidden;box-shadow:0 0 0 .5px #0000004d,0 24px 60px #16202e47}}.bar{border-bottom:1px solid var(--line);background:#f6f7fab3;align-items:center;gap:10px;padding:10px 16px;display:flex}.folder{flex:none;width:20px;height:17px}.count{color:var(--mute);margin-right:auto}.size{color:var(--mute);align-items:center;gap:6px;display:flex}.size svg{width:12px;height:10px}.size input{width:110px;accent-color:var(--blue)}.wall{grid-template-columns:repeat(auto-fill,minmax(calc(var(--s) + 28px),1fr));flex:1;align-content:start;gap:18px 6px;padding:22px 18px 40px;display:grid}.file{-webkit-user-select:none;user-select:none;border-radius:8px;outline:none;flex-direction:column;align-items:center;gap:8px;padding:10px 4px 8px;display:flex}.file.sel{background:#2f56c924}.card{width:var(--s);aspect-ratio:3/2;background:#fff;border-radius:3px;overflow:hidden;box-shadow:0 0 0 .5px #00000040,0 3px 8px #16202e33}.face{background:linear-gradient(#f6f7f9,#e7e9ee);width:100%;height:100%;position:relative;overflow:hidden}.face img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}figcaption{max-width:calc(var(--s) + 16px);text-align:center;word-break:break-word;border-radius:4px;padding:1px 6px}.file:focus-visible figcaption,.file.sel figcaption{background:var(--blue);color:#fff}.file:focus-visible .card{outline:2px solid var(--blue);outline-offset:3px}.tabs{background:#16202e12;border-radius:8px;gap:2px;padding:2px;display:flex}.tabs button{font:inherit;color:var(--mute);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:4px 14px;font-weight:500}.tabs button:hover{color:var(--ink)}.tabs button[aria-selected=true]{color:var(--ink);background:#fff;box-shadow:0 .5px 2px #16202e40}.tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}.none{color:var(--mute);text-align:center;grid-column:1/-1;padding:60px 0}.none p:first-child{color:var(--ink);margin-bottom:6px;font-size:15px;font-weight:600}.none code{background:#16202e12;border-radius:4px;padding:1px 5px}.viewer{z-index:10;flex-direction:column;justify-content:center;align-items:center;gap:22px;display:flex;position:fixed;inset:0}.viewer[hidden]{display:none}.scrim{background:#121a28d1;position:absolute;inset:0}.stage{align-items:center;gap:18px;max-width:100vw;padding:0 12px;display:flex;position:relative}.deck{--dh:75vh;--dw:min(calc(75vh * 1.7),calc(100vw - 160px));width:var(--dw);height:var(--dh);perspective:1600px;position:relative}.pcard{filter:drop-shadow(0 18px 30px #00000073);margin:auto;position:absolute;inset:0}.pcard.empty .face{background:linear-gradient(#f6f7f9,#e7e9ee)}.viewer .face{background:#fff;border-radius:3px}.nav{color:#fff;cursor:pointer;background:#ffffff24;border:0;border-radius:50%;flex:none;width:44px;height:44px;font-size:30px;line-height:1;transition:background .2s,opacity .3s}.nav:hover:not(:disabled){background:#ffffff47}.nav:disabled{opacity:.25;cursor:default}.nav[hidden]{display:none}.x{color:#fff;cursor:pointer;background:#ffffff24;border:0;border-radius:50%;width:40px;height:40px;font-size:26px;position:absolute;top:16px;right:20px}.x:hover{background:#ffffff47}.nav:focus-visible,.x:focus-visible{outline-offset:2px;outline:2px solid #fff}.meta{color:#fff;text-align:center;min-height:3.2em;position:relative}.meta strong{margin-right:10px;font-size:17px;font-weight:600}.meta span{color:#ffffffa6}.meta p{color:#ffffffb3;margin-top:6px}.nav,.x,.meta{opacity:0;transition:opacity .35s}.viewer.ui .nav,.viewer.ui .x,.viewer.ui .meta{opacity:1}.viewer.ui .nav:disabled{opacity:.25}@media (prefers-reduced-motion:reduce){.nav,.x,.meta{transition:none}}.pcard{width:min(var(--dw),calc(var(--dh) * var(--r)));height:min(var(--dh),calc(var(--dw) / var(--r)))}.pcard .face{width:100%;height:100%}.wall{position:relative}.wall.free{display:block}.wall.free .file{position:absolute}.file.dragging{z-index:5;opacity:.92;cursor:grabbing}.file.dragging .card{box-shadow:0 0 0 .5px #00000040,0 12px 24px #16202e4d}.tidy{font:inherit;color:var(--ink);cursor:pointer;background:#ffffffb3;border:0;border-radius:6px;padding:4px 12px;box-shadow:0 0 0 .5px #16202e40}.tidy:hover{background:#fff}.tidy:focus-visible{outline:2px solid var(--blue);outline-offset:1px}.file img{-webkit-user-drag:none;user-drag:none}.soon{text-align:center;font-size:calc(var(--s) * .1);color:var(--mute);place-items:center;padding:6px;font-style:italic;line-height:1.2;display:grid;position:absolute;inset:0}.wall.flat{grid-template-columns:repeat(auto-fill,minmax(calc(var(--s) * 1.1 + 28px),1fr));align-items:start}.wall.flat .card{--box:calc(var(--s) * 1.1);width:min(var(--box),calc(var(--box) * var(--r)));aspect-ratio:var(--r)}@media (pointer:coarse){.tidy{display:none}}@media (max-width:640px){body{-webkit-text-size-adjust:100%;font-size:14px}.window{min-height:100dvh}.bar{flex-wrap:wrap;gap:8px 10px;padding:10px 14px}.tabs{flex:1;order:1}.tabs button{flex:1;min-height:38px;padding:8px 10px}.count{order:2;margin-right:auto}.tidy{order:3;min-height:34px}.size{order:4}.size input{width:92px}.wall{grid-template-columns:repeat(auto-fill,minmax(calc(var(--s) + 12px),1fr));gap:12px 2px;padding:14px 8px 40px}.wall.flat{grid-template-columns:repeat(auto-fill,minmax(calc(var(--s) * 1.1 + 12px),1fr))}.file{padding:8px 2px 6px}figcaption{font-size:12px}.viewer{height:100dvh;padding-top:calc(56px + env(safe-area-inset-top,0px));padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));gap:12px}.stage{padding:0}.deck{--dw:94vw;--dh:calc(100dvh - 270px)}.nav{bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:3;width:48px;height:48px;position:fixed}.nav.prev{left:16px}.nav.next{right:16px}.x{top:calc(10px + env(safe-area-inset-top,0px));width:44px;height:44px;right:12px}.meta strong{font-size:16px}}
