:root{--bg:#FBF7F2;--ink:#2a2622;--pin:#E60023;--glow:#7c3aed;--card:#fff;--line:#e8dfd3}
.night{--bg:#16131a;--ink:#efe8dd;--card:#221e27;--line:#3a3340}
body{margin:0;font-family:'Bricolage Grotesque',sans-serif;background:var(--bg);color:var(--ink)}
.app{min-height:100vh;background:radial-gradient(circle at 10% 0%,rgba(230,0,35,.07),transparent 40%),radial-gradient(circle at 90% 100%,rgba(124,58,237,.08),transparent 40%),var(--bg)}
.hand{font-family:'Caveat',cursive}
.mono{font-family:'JetBrains Mono',monospace}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.checker{background-color:#eee;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}
.masonry{columns:2;column-gap:8px}
.masonry>*{break-inside:avoid;margin-bottom:8px}
.pin{position:relative;border-radius:14px;overflow:hidden;animation:pop .4s both}
.pin .ov{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:.2s;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center}
.pin:hover .ov,.pin:focus-within .ov{opacity:1}
@media (hover:none){.pin .ov{opacity:1;background:linear-gradient(transparent 50%,rgba(0,0,0,.55));justify-content:flex-end;padding-bottom:6px}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
.chip{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;white-space:nowrap;background:var(--card)}
.chip.on{background:var(--pin);color:#fff;border-color:var(--pin)}
.real-btn{background:linear-gradient(90deg,#e11d48,#7c3aed);color:#fff;box-shadow:0 0 24px rgba(124,58,237,.5);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 40px rgba(225,29,72,.6)}}
.polaroid{background:#fff;padding:10px 10px 36px;box-shadow:0 10px 30px rgba(0,0,0,.25);transform:rotate(-2deg)}
.develop{animation:dev 3s infinite alternate}
@keyframes dev{from{filter:brightness(.2) sepia(1)}to{filter:brightness(1)}}
input[type=range]{accent-color:var(--glow)}
.btn{border:1px solid var(--line);border-radius:10px;padding:4px 10px;font-size:13px;background:var(--card)}
.btn:hover{border-color:var(--ink)}
.btn.on{background:var(--ink);color:var(--bg)}