:root{--add:2px;--bg:#f6f4ef;--surface:#fff;--text:#1d1b19;--muted:#6f6a63;--accent:#e0245e;--border:#e4e0d8;--shadow:0 6px 20px rgba(0,0,0,.08)}
:root[data-theme="dark"]{--bg:#151413;--surface:#211f1d;--text:#f2efe9;--muted:#a09a91;--border:#34312d;--shadow:0 6px 20px rgba(0,0,0,.5)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.6;font-size:calc(16px + var(--add))}button{font-family:inherit}
a{color:var(--accent)}header{max-width:1100px;margin:0 auto;padding:40px 20px 12px}
h1{margin:0 0 6px;font-size:calc(32px + var(--add));line-height:1.2;letter-spacing:-.02em}header p{margin:0;color:var(--muted)}
.grid{max-width:1100px;margin:0 auto;padding:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none}@media(max-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.grid{grid-template-columns:1fr}}
.card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;color:inherit;text-decoration:none;transition:transform .18s}
.card:hover,.card:focus-visible{transform:translateY(-4px);outline:2px solid var(--accent)}
.card img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px}.meta strong{font-size:calc(15.7px + var(--add))}
.note{font-size:calc(13.6px + var(--add));color:var(--muted)}main.pad,.w{max-width:1100px;margin:0 auto;padding:0 20px 30px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:16px;z-index:20}
.overlay.open{display:flex}.modal{background:var(--surface);border-radius:16px;max-width:520px;width:100%;max-height:100%;overflow:auto;position:relative}
.modal img{display:block;width:100%;max-height:70vh;object-fit:contain;background:#000}
.info{padding:16px 18px 20px}.info h2{margin:0 0 4px;font-size:calc(20.8px + var(--add))}.info p{margin:0 0 14px;color:var(--muted)}
.like{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:999px;padding:9px 18px;font:inherit;cursor:pointer}
.like[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:calc(20px + var(--add));cursor:pointer}
.more{margin-left:12px}nav.bc{max-width:1100px;margin:0 auto;padding:20px 20px 0;font-size:calc(14.4px + var(--add));color:var(--muted)}
.hero{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:28px;align-items:start;padding-top:14px}@media(max-width:700px){.hero{grid-template-columns:1fr}}
.hero img{width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow)}
.code{display:inline-block;font:700 calc(20.8px + var(--add)) "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface);border:2px dashed var(--accent);padding:6px 14px;border-radius:8px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 20px;border-radius:999px;text-decoration:none;font-weight:600;border:0;font-size:calc(16px + var(--add));cursor:pointer}
.btn.alt{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.topbar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.top{max-width:1100px;margin:0 auto;padding:10px 20px;display:flex;justify-content:space-between;align-items:center}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:calc(17.6px + var(--add));color:var(--text);text-decoration:none}.brand img{display:block;border-radius:7px}
.tt{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:50%;width:40px;height:40px;font-size:calc(18px + var(--add));line-height:1;cursor:pointer}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:5px 14px;font-size:calc(13.6px + var(--add));font-weight:600;margin-bottom:12px}
.badge i{width:9px;height:9px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
h1,h2{font-weight:800}.home-title{font-size:46px}
h2{font-size:calc(24px + var(--add))}.card small{font-size:calc(13.3px + var(--add))}
.legal{padding-top:30px}.legal h2{margin-top:1.4em}
.foot{max-width:1100px;margin:30px auto 0;padding:20px;border-top:1px solid var(--border);color:var(--muted);font-size:calc(13.6px + var(--add))}.foot a{color:inherit}
.bonus{display:inline-block;background:var(--surface);border:1px solid var(--border);border-left:4px solid #22c55e;border-radius:10px;padding:8px 14px}
@media(prefers-reduced-motion:reduce){.badge i{animation:none}}