:root { color-scheme: dark; --yellow:#ffd21f; --ink:#0b0b0b; --card:#1a1a1a; --muted:#aaa; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -10%,#34300f 0,#111 38%,#080808 100%); color:#fff; font-family:"Be Vietnam Pro",sans-serif; }
.brand-bar { height:72px; padding:0 20px; display:flex; align-items:center; gap:12px; border-bottom:3px solid #000; background:#111; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; border:3px solid #000; border-radius:50%; background:var(--yellow); color:#000; font:24px Bangers,cursive; transform:rotate(-8deg); }
.brand-bar strong,.brand-bar span { display:block; }.brand-bar strong { font:25px Bangers,cursive; letter-spacing:1px; color:var(--yellow); }.brand-bar span { font-size:9px; letter-spacing:4px; }
main { width:min(100% - 28px,960px); margin:auto; padding:38px 0 60px; }
.hero { text-align:center; margin-bottom:28px; }.eyebrow { display:inline-block; margin:0; padding:7px 13px; background:var(--yellow); color:#000; border:2px solid #000; border-radius:999px; font-size:10px; font-weight:800; }
h1 { margin:12px 0 5px; color:var(--yellow); font:clamp(38px,9vw,68px)/.95 Bangers,cursive; letter-spacing:1px; text-shadow:4px 4px #000; } .hero>p:last-child { color:#ccc; margin:8px 0; font-size:13px; }
.state-card { min-height:230px; display:grid; place-items:center; align-content:center; gap:12px; padding:28px; text-align:center; background:var(--card); border:3px solid #000; border-radius:22px; box-shadow:7px 7px #000; }
.spinner { width:46px; height:46px; border:5px solid #333; border-top-color:var(--yellow); border-radius:50%; animation:spin .8s linear infinite; }.state-icon { width:54px;height:54px;display:grid;place-items:center;background:#dc2626;border:3px solid #000;border-radius:50%;font-size:30px;font-weight:900; }
button,.download-button { border:3px solid #000; border-radius:999px; background:var(--yellow); color:#000; padding:12px 18px; font-weight:900; text-decoration:none; cursor:pointer; }
.photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.photo-card { margin:0; overflow:hidden; background:#fff; border:4px solid #000; border-radius:18px; box-shadow:6px 6px #000; }.photo-card.featured { grid-column:1/-1; }.photo-card img { width:100%; aspect-ratio:2/3; display:block; object-fit:cover; background:#222; cursor:zoom-in; }.photo-card.featured img { aspect-ratio:3/2; object-fit:contain; background:#111; }.photo-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; color:#000; font-size:11px; font-weight:800; }.photo-actions a { padding:7px 10px; border:2px solid #000; border-radius:999px; background:var(--yellow); color:#000; text-decoration:none; }
.tip { margin-top:26px; padding:14px; border:2px dashed #555; border-radius:14px; color:#bbb; font-size:12px; line-height:1.6; }.expiry { text-align:center; color:#777; font-size:10px; }
.viewer { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:60px 16px 24px; background:rgba(0,0,0,.94); }.viewer img { max-width:100%; max-height:calc(100vh - 150px); object-fit:contain; }.viewer-close { position:absolute; right:16px; top:14px; width:44px;height:44px;padding:0;font-size:28px; }.hidden { display:none!important; } footer { padding:22px; text-align:center; color:#666; font-size:10px; border-top:1px solid #222; }
@media(min-width:720px){.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.photo-card.featured{grid-column:span 2;grid-row:span 2;}.photo-card.featured img{height:calc(100% - 51px);aspect-ratio:auto;}}
@keyframes spin { to { transform:rotate(360deg); } }