:root{--purple:#5451e7;--ink:#1a1a2e;--muted:#626577;--line:#dfdfef;--paper:#f7f7fc;--lime:#c6efd3}
*{box-sizing:border-box}
body{margin:0;font:15px/1.6 Inter,system-ui,sans-serif;color:var(--ink);background:var(--paper)}
a{color:var(--purple);text-underline-offset:3px}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid #3480e0;outline-offset:4px}
nav{max-width:1200px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
nav>a:last-child{font-size:13px;font-weight:600;text-decoration:none}
.brand{font-family:'Space Grotesk',Inter,sans-serif;font-size:25px;font-weight:700;text-decoration:none;letter-spacing:-1px}
.brand span{display:block;font:11px Inter,sans-serif;letter-spacing:0;color:var(--muted)}
header{max-width:1136px;margin:8px auto 36px;padding:44px 48px;border-radius:24px;background:var(--purple);color:#fff}
.eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;margin:0 0 14px;color:var(--lime)}
h1{font-size:clamp(34px,4.8vw,58px);line-height:1.08;letter-spacing:-2px;margin:0 0 18px;font-weight:900}
.intro{max-width:640px;font-size:16px;color:#eeeeff;margin:0 0 22px}
.hero-bottom{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13px}
.hero-bottom a{color:var(--lime);font-weight:700}
main{max-width:1200px;margin:0 auto 60px;padding:0 32px}
.grid{columns:4 260px;column-gap:12px}
.grid button{display:block;width:100%;margin:0 0 12px;padding:0;border:0;border-radius:12px;overflow:hidden;background:#e6e5f3;break-inside:avoid}
.grid img{display:block;width:100%;height:auto;transition:transform .25s ease}
.grid button:hover img{transform:scale(1.03)}
.note{margin-top:28px;font-size:13px;color:var(--muted);max-width:760px}
dialog{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0d0c16;color:#fff}
dialog[open]{display:flex;align-items:center;justify-content:center}
dialog::backdrop{background:#0d0c16}
#photo{max-width:calc(100vw - 140px);max-height:calc(100vh - 90px);object-fit:contain;user-select:none}
.viewer-top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;font-size:14px;background:linear-gradient(#0d0c16cc,#0d0c1600)}
.viewer-actions{display:flex;gap:14px;align-items:center}
.viewer-actions a{color:#fff;font-weight:600;text-decoration:none;border:1px solid #ffffff55;padding:6px 14px;border-radius:8px}
.viewer-actions button{background:none;border:0;color:#fff;font-size:22px;line-height:1;padding:4px 8px}
.nav-btn{position:fixed;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:0;background:#ffffff1f;color:#fff;font-size:34px;line-height:1}
.nav-btn:hover{background:#ffffff38}
.prev{left:16px}.next{right:16px}
@media (max-width:700px){
 nav{padding:16px 18px}
 header{margin:4px 12px 24px;padding:30px 22px;border-radius:18px}
 main{padding:0 12px}
 .grid{columns:2 150px;column-gap:8px}
 .grid button{margin-bottom:8px;border-radius:8px}
 #photo{max-width:100vw;max-height:calc(100vh - 120px)}
 .nav-btn{top:auto;bottom:18px;transform:none;width:48px;height:48px}
 .prev{left:calc(50% - 64px)}.next{right:calc(50% - 64px)}
}