*{box-sizing:border-box}body{margin:0;background:#fcf8f4;color:#435766;font:15px/1.6 system-ui,sans-serif}main{max-width:1000px;padding:25px;margin:auto}header{text-align:center;padding:28px 15px 36px;background:url('../assets/sakura-branch.svg') left top/95px auto no-repeat,url('../assets/vietnam-japan-horizon.svg') center bottom/100% auto no-repeat}h1{font:400 clamp(38px,8vw,64px) Georgia,serif;margin:8px}h2{font:400 clamp(20px,4vw,29px) Georgia,serif}.flower{color:#d3a0b5;font-size:40px}.date{letter-spacing:.24em;color:#a39280;font-size:12px}.back{color:#708b9e;text-decoration:none}.toolbar{display:flex;gap:12px;margin:20px 0}.upload{display:block;flex:1;position:relative;overflow:hidden;text-align:center;padding:16px 18px;background:#7899b1;color:white;border-radius:16px;font-weight:600;cursor:pointer}.upload:has(input:disabled){opacity:.5;cursor:default}.upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:inherit}button{font:inherit;padding:11px 17px;border-radius:13px;border:1px solid #d5dce0;background:#fffdf9;color:#536d80;cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,.upload:focus-within{outline:3px solid #d8b2c2;outline-offset:3px}.note{font-size:12px;color:#89939a;text-align:center}.filters{display:flex;gap:8px;margin:24px 0}.selected{background:#e5eef4;border-color:#abc0cf}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tile{padding:0;background:white;border:1px solid #e5dfd7;border-radius:15px;overflow:hidden}.tile .open{display:block;padding:0;border:0;width:100%;border-radius:0;position:relative;background:#e9eef1;aspect-ratio:1}.tile img{width:100%;height:100%;object-fit:cover;display:block}.tile .badge{position:absolute;bottom:8px;left:8px;background:#fffdf9e8;padding:3px 8px;border-radius:8px;font-size:12px}.tile p{font-size:12px;padding:10px 12px;margin:0;overflow-wrap:anywhere}.tile .remove{margin:0 10px 10px;color:#a36578;font-size:12px}.empty{text-align:center;padding:50px;color:#9c8a8f}.empty span{font-size:45px}#status{white-space:pre-line;overflow-wrap:anywhere;color:#8c6074}progress{width:100%;accent-color:#7899b1}dialog{border:1px solid #ddd4cb;border-radius:18px;width:min(96%,920px);max-height:94svh;padding:40px 16px 18px;background:#fffdf9}dialog::backdrop{background:#1e2e40bc}.close{position:absolute;right:8px;top:5px;padding:2px 12px;font-size:26px}#viewerBody img,#viewerBody video{display:block;max-width:100%;max-height:72svh;margin:auto}#original{display:block;margin:12px auto;text-align:center;color:#64839b}[hidden]{display:none!important}@media(max-width:600px){main{padding:18px 12px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}header{background-size:62px auto,100% auto;padding-top:15px}.tile p{padding:8px;font-size:11px}.toolbar{gap:8px}button{padding:9px 12px}}

.access-form{max-width:540px;margin:20px auto;padding:20px;background:#fffdf9;border:1px solid #e7ddd4;border-radius:16px}.access-form label{display:block;margin-bottom:8px}.access-form input{width:100%;font:inherit;padding:12px;border:1px solid #d5dce0;border-radius:10px;margin-bottom:12px}

.tile img,#viewerBody img{image-orientation:from-image}
.tile .rotate{margin:10px 6px 10px 10px;font-size:12px}
#viewerBody{position:relative;margin:0 auto;max-width:100%}
#viewerBody img,#viewerBody video{position:absolute;left:50%;top:50%;max-width:none;max-height:none;margin:0;object-fit:contain}