:root{--bg:#eef1f5;--ink:#14202e;--mute:#5d6b7c;--line:#d5dbe3;--acc:#1f5eff;--card:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Segoe UI",system-ui,sans-serif}
main{max-width:760px;margin:0 auto;padding:32px 20px 64px}
h1{font-size:1.9rem;margin:0 0 4px;letter-spacing:-.02em}
h2{font-size:1.1rem;margin:36px 0 12px}
p.sub{color:var(--mute);margin:0 0 24px}
.box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px}
label{display:block;font-weight:600;margin:0 0 6px}
input[type=text],input[type=file]{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;font:inherit;background:#fff;margin-bottom:16px}
button,.btn{background:var(--acc);color:#fff;border:0;border-radius:6px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
button.ghost,.btn.ghost{background:transparent;color:var(--acc);border:1px solid var(--line)}
button:disabled{opacity:.5;cursor:wait}
:focus-visible{outline:3px solid #86a8ff;outline-offset:2px}
#msg{margin-top:12px;color:var(--mute);min-height:1.5em}
.bar{height:6px;background:var(--line);border-radius:3px;margin-top:12px;overflow:hidden;display:none}
.bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}
.item{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item img{width:48px;height:64px;object-fit:cover;border-radius:3px;background:var(--line)}
.item .t{flex:1;min-width:0}.item .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item small{color:var(--mute)}
.item button,.item .btn{padding:6px 10px;font-size:.85rem}
/* viewer */
body.v{background:#10151c;color:#e8edf3;height:100vh;height:100dvh;overflow:hidden}
#stage{position:absolute;inset:0 0 56px;display:flex;align-items:center;justify-content:center}
#bar{position:absolute;left:0;right:0;bottom:0;height:56px;display:flex;gap:10px;align-items:center;justify-content:center;background:#0a0e13}
#bar button{background:#1d2631;padding:8px 14px}
#ttl{position:absolute;top:10px;left:14px;font-weight:600;opacity:.8;z-index:2;max-width:70%}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* galeri publik */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.card{display:block;color:inherit;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--line)}
.card div{padding:12px}.card b{display:block;line-height:1.3}.card small{color:var(--mute)}
.card:hover{border-color:var(--acc)}
main.wide{max-width:1000px}
#bar a{background:#1d2631;color:#fff;padding:8px 14px;border-radius:6px;text-decoration:none;font-weight:600}
#cnt{min-width:56px;text-align:center}
#stage{touch-action:pan-y}
#book{position:relative;perspective:2000px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.5)}
#book img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
#b{transform-origin:left center;backface-visibility:hidden;opacity:0;pointer-events:none;transition:transform .6s ease,opacity .6s ease;background:#fff}