:root{font-family:system-ui,sans-serif;color:#23251f;background:#f4ecd9;color-scheme:light}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:14px;padding:20px clamp(16px,5vw,70px);border-bottom:2px solid #23251f}header strong{font-size:26px}header span{font-weight:400}header small{font-size:10px;letter-spacing:2px}button,a{color:inherit;font:inherit}button{border:1px solid #77776b;border-radius:12px;background:#ffe45e;padding:12px 18px;font-weight:700;cursor:pointer}header button{margin-left:auto}main{max-width:940px;margin:auto;padding:28px 16px}.accent{width:64px;height:7px;background:#ffe45e;border:2px solid #23251f}h1{font-size:clamp(26px,5vw,40px);overflow-wrap:anywhere;margin:16px 0}#message{line-height:1.6;min-height:26px}#message.loading:before{content:"";display:inline-block;width:15px;height:15px;border:2px solid #c7c5b4;border-top-color:#398658;border-radius:50%;margin-right:10px;vertical-align:middle;animation:spin 1s linear infinite}article{background:#fffdf5;border:1px solid #d2cbb8;border-radius:18px;padding:14px;margin:20px 0;box-shadow:0 5px 20px #23251f0a}article h2{font-size:18px;margin:5px 0 14px}img,video{display:block;width:100%;max-height:75vh;object-fit:contain;background:#e9e5da;border-radius:10px}nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}nav a,nav button{display:inline-block;text-decoration:none;border:1px solid #77776b;border-radius:10px;padding:12px 16px;background:#ffe45e;font-weight:700}footer{margin:36px 0 15px;color:#737366;font-size:13px}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){#message.loading:before{animation:none}}@media(max-width:420px){header{gap:8px}header small{display:none}nav>*{flex:1;text-align:center}}

.media-pending{border-style:dashed;min-height:140px;display:grid;align-content:center;text-align:center;color:#686c60}.media-pending[aria-busy="true"] p:before{content:"";display:inline-block;width:18px;height:18px;margin-right:10px;vertical-align:middle;border:2px solid #ccc;border-top-color:#398658;border-radius:50%;animation:spin 1s linear infinite}@media(prefers-reduced-motion:reduce){.media-pending p:before{animation:none}}

/* Keep previews proportional and actions reachable on every screen size. */
main{width:100%;max-width:1100px;padding-inline:clamp(14px,3vw,32px)}
header{padding:14px clamp(14px,3vw,48px);flex-wrap:wrap}
header strong{font-size:clamp(20px,4vw,26px)}
#assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
#assets article{min-width:0;margin:0;padding:clamp(12px,2vw,20px)}
#assets article:first-child{grid-column:1 / -1}
#assets img,#assets video{width:auto;height:auto;max-width:100%;max-height:min(62vh,560px);max-height:min(62svh,560px);margin-inline:auto}
#assets article:first-child img,#assets article:first-child video{max-height:min(68vh,720px);max-height:min(68svh,720px)}
nav>*{min-height:48px;min-width:0;text-align:center;overflow-wrap:anywhere;flex:1 1 140px}
#refresh{margin-top:20px;min-height:48px}
@media(max-width:600px){header{gap:8px}header small{display:none}main{padding-top:18px}#assets{grid-template-columns:minmax(0,1fr);gap:16px}#assets img,#assets video,#assets article:first-child img,#assets article:first-child video{max-height:min(62vh,640px);max-height:min(62svh,640px)}nav{gap:8px}nav>*{padding:12px 10px}}