* { box-sizing:border-box; margin:0; padding:0; letter-spacing:0; }
body { font-family:'Segoe UI',Arial,sans-serif; color:#101827; background:#f5f7fa; line-height:1.5; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid #ff5a1f; outline-offset:4px; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px; padding:14px max(24px,calc((100% - 1280px)/2)); background:#fff; border-bottom:1px solid #e2e7ee; }
.gallery-brand { display:flex; align-items:center; font-size:24px; font-weight:800; gap:8px; }
.gallery-brand span { color:#ff6215; margin-left:-8px; }
.gallery-brand img { width:52px; height:36px; object-fit:contain; }
header > a:last-child { font-size:13px; font-weight:600; }
main { max-width:1328px; padding:30px 24px 40px; margin:0 auto; }
.gallery-title { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.gallery-title p { font-size:11px; color:#6a7585; font-weight:700; }
h1 { font-size:28px; line-height:1.3; }
.gallery-title > span { font-size:13px; color:#586779; white-space:nowrap; }
.gallery-title b { padding:0 8px; }
.demo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.demo-card { border:1px solid #e0e6ee; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 2px 8px #10182704; }
.demo-cover { display:block; position:relative; aspect-ratio:1.55; isolation:isolate; background:#181818; overflow:hidden; }
.demo-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#000d,transparent 80%); z-index:-1; }
.demo-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.demo-label { position:absolute; top:12px; left:12px; color:#fff; background:#0009; font-size:9px; font-weight:700; padding:4px 7px; border-radius:4px; }
.demo-cover > div { position:absolute; left:16px; right:16px; bottom:14px; color:#fff; }
.demo-cover h2 { font-size:20px; line-height:1.3; }
.demo-cover p { font-size:11px; margin-top:3px; }
.demo-card-body { padding:14px 16px 16px; }
.demo-card-body > p { color:#758092; font-size:11px; }
.demo-card-body > p span { padding:0 5px; }
.demo-thumbs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0 14px; }
.demo-thumbs img { width:100%; height:64px; object-fit:contain; border:1px solid #edf0f4; border-radius:5px; background:#fff; }
.demo-open { display:flex; align-items:center; justify-content:space-between; background:var(--accent); color:#fff; min-height:40px; padding:9px 12px; border-radius:5px; font-size:13px; font-weight:700; }
.demo-admin { display:flex; align-items:center; justify-content:space-between; font-size:11px; margin-top:11px; color:#627084; }
footer { max-width:1328px; margin:0 auto; padding:20px 24px 30px; color:#758092; display:flex; gap:20px; justify-content:space-between; font-size:11px; }
.photo-credits { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:24px; }
.photo-credits li { padding:14px; border-bottom:1px solid #dce3ed; font-size:12px; overflow-wrap:anywhere; }
.photo-credits a { color:#1166b3; text-decoration:underline; }
.photo-author { margin-top:5px; color:#667588; font-size:11px; }
@media(max-width:1100px) { .demo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .photo-credits { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { header { padding:14px 16px; } .gallery-brand { font-size:19px; } header > a:last-child { font-size:11px; } main { padding:24px 16px; } h1 { font-size:24px; } .gallery-title { align-items:flex-start; flex-direction:column; gap:8px; } .demo-grid,.photo-credits { grid-template-columns:1fr; } .demo-cover { aspect-ratio:1.8; } .demo-thumbs img { height:80px; } footer { padding:20px 16px; flex-wrap:wrap; } }