:root{
  --bg: #fff6fb;
  --bg-soft: #ffe9f5;
  --card: #ffffff;
  --border: #ffd3e8;
  --text: #3a244a;
  --muted: #7a5a77;
  --accent: #ff77c8;
  --accent-2: #b388ff;
  --danger: #ff4fa3;
  --shadow: 0 12px 28px rgba(255, 119, 200, .18), 0 2px 10px rgba(179,136,255,.12);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%;margin: 0;}
body{
  margin:0;
  display: flex;
  flex-direction: column;
  font-family: "Comic Sans MS", "Comic Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,183,234,.40), transparent 60%),
    radial-gradient(1000px 600px at 90% 10%, rgba(186,160,255,.35), transparent 60%),
    repeating-radial-gradient(circle at 20% 90%, rgba(255,170,210,.25), rgba(255,170,210,.25) 4px, transparent 8px, transparent 16px),
    linear-gradient(#fff6fb, #fff);
  background-color:var(--bg);
}

main {
  flex: 1;
}

.container{max-width:1100px;margin:0 auto;padding:0 24px}
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,119,200,.25);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:900;letter-spacing:.3px}
.brand-text{font-size:22px}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
.btn{
  display:inline-block;padding:12px 18px;border-radius:calc(var(--radius) - 6px);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#4a174a;text-decoration:none;font-weight:800;border:1px solid rgba(255,119,200,.35);
  box-shadow: var(--shadow);
}
.btn:hover{opacity:.95;transform:translateY(-1px)}
.btn-ghost{
  background:rgba(255,255,255,.7);color:var(--text);
  border:1px dashed var(--border);box-shadow:none;
}

.pulse-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--danger);display:inline-block;position:relative;
  box-shadow:0 0 0 0 rgba(255,79,163,.7);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,79,163,.6)}
  70%{box-shadow:0 0 0 16px rgba(255,79,163,0)}
  100%{box-shadow:0 0 0 0 rgba(255,79,163,0)}
}

.activity-banner{
  height:36px;border-top:1px solid rgba(255,119,200,.25);
  border-bottom:1px solid rgba(179,136,255,.25);
  overflow:hidden;display:flex;align-items:center
}
.ticker{display:flex;gap:40px;animation:ticker 20s linear infinite;white-space:nowrap;color:var(--muted);font-size:14px;padding-left:24px}
.ticker-small{animation-duration:14s;font-size:13px;opacity:.9}
.ticker span::before{content:"★ ";color:var(--accent);opacity:.9;margin-right:4px}
@keyframes ticker{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

.hero{padding:72px 0 28px}
.hero h1{font-size:42px;line-height:1.15;margin:0 0 10px}
.hero .sub{color:var(--muted);max-width:740px}
.hero .actions{margin-top:18px;display:flex;gap:10px}
.hero-compact{padding:40px 0}

.gallery-section{padding:20px 0 64px}
.controls{display:flex;gap:10px;align-items:center;margin:16px 0 22px;flex-wrap:wrap}
.pill{
  padding:10px 14px;border-radius:999px;border:2px dashed var(--border);
  color:var(--muted);cursor:pointer;user-select:none;background:#fff
}
#filter-all:checked ~ .controls .pill[for="filter-all"],
#filter-photos:checked ~ .controls .pill[for="filter-photos"],
#filter-videos:checked ~ .controls .pill[for="filter-videos"]{
  color:#4a174a;
  border-style:solid;
  border-color:transparent;
  background:linear-gradient(135deg, rgba(255,119,200,.35), rgba(179,136,255,.35));
}

.gallery-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px
}
.card{
  grid-column:span 4;background:var(--card);border:2px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative
}
@media (max-width:900px){.card{grid-column:span 6}}
@media (max-width:600px){.card{grid-column:span 12}}
.card .thumb{position:relative;background:var(--bg-soft);border-bottom:2px dashed var(--border);overflow:hidden}
.ratio-16x9{aspect-ratio:16/9}
.ratio-1x1{aspect-ratio:1/1}
.ratio-3x4{aspect-ratio:3/4}
.ratio-9x16{aspect-ratio:9/16}
.ratio-2x1{aspect-ratio:2/1}

.thumb-art{
  width:100%;height:100%;
  background:
    linear-gradient(120deg, rgba(255,255,255,.40), rgba(255,255,255,0) 40%),
    radial-gradient(240px 80px at 30% 20%, rgba(255,119,200,.25), transparent 60%),
    radial-gradient(200px 80px at 70% 80%, rgba(179,136,255,.25), transparent 60%),
    #ffe9f5;
  animation: shimmer 2.2s linear infinite;
}
.thumb-art.photo{mask: radial-gradient(circle at 30% 30%, #000 20%, transparent 21%) repeat}
.thumb-art.video{display:flex;align-items:center;justify-content:center}
.thumb-art .play{font-size:44px;opacity:.6}
@keyframes shimmer{
  0%{background-position: -200px 0, 0 0, 0 0, 0 0}
  100%{background-position: 200px 0, 0 0, 0 0, 0 0}
}

.lock-overlay{
  position:absolute;inset:0;display:flex;gap:8px;align-items:center;justify-content:center;
  background:linear-gradient( to bottom, rgba(255,255,255,.4), rgba(255,246,251,.85) );
  color:#4a174a;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
  backdrop-filter: blur(6px); border-bottom:2px dashed var(--border)
}
.lock-icon{filter: drop-shadow(0 6px 10px rgba(255,119,200,.35))}
.skeleton .card-body{
  position:relative;overflow:hidden
}
.skeleton .card-body::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, transparent, rgba(255,119,200,.18), transparent);
  animation:load 1.8s linear infinite
}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.card-body{padding:16px 16px 18px}
.card-body h3{margin:0 0 6px 0;font-size:18px}
.card-body p{margin:0;color:var(--muted);font-size:14px}

.spinner{
  width:26px;height:26px;border-radius:50%;
  border:3px solid rgba(255,119,200,.25);border-top-color:var(--accent);
  animation:spin 1s linear infinite;margin:0 auto 10px
}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-hint{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);margin:18px 0}

.cta-unlock{display:flex;justify-content:center;margin-top:14px}

.site-footer{
  margin-top:40px;border-top:1px solid rgba(255,119,200,.35);
  background:rgba(255,255,255,.7);backdrop-filter: blur(8px)
}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:center;min-height:74px}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr;gap:10px;padding:12px 0}}

.ticker-row{overflow:hidden}
.foot-actions{display:flex;justify-content:end}

.uname{font-weight:800}

#filter-photos:checked ~ .gallery-grid .card[data-type="video"]{display:none}
#filter-videos:checked ~ .gallery-grid .card[data-type="photo"]{display:none}

.unlock-section{padding:24px 0 64px}
.code-card{
  position:relative;overflow:hidden;border-radius:calc(var(--radius) + 10px);
  border:2px solid var(--border);background:#fff;
  padding:28px;box-shadow:var(--shadow)
}
.code-glow{
  position:absolute;inset:-30%;background:radial-gradient(400px 60px at 20% 0%, rgba(255,119,200,.25), transparent 60%),
    radial-gradient(400px 60px at 80% 0%, rgba(179,136,255,.25), transparent 60%);
  filter:blur(12px);pointer-events:none
}
.code-confetti{
  position:absolute;inset:0;
  background:
    radial-gradient(6px 6px at 10% 20%, #ffb3de 50%, transparent 51%),
    radial-gradient(5px 5px at 30% 60%, #cdb3ff 50%, transparent 51%),
    radial-gradient(4px 4px at 80% 30%, #ffd6ea 50%, transparent 51%),
    radial-gradient(5px 5px at 70% 80%, #ffc2e6 50%, transparent 51%);
  opacity:.6;pointer-events:none
}
.code-line{
  display:flex;align-items:center;justify-content:center;
  padding:22px;border-radius:18px;background:rgba(255,246,251,.9);
  border:2px dashed var(--border); margin-bottom:12px
}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.code{font-size:28px;letter-spacing:2px;background:linear-gradient(90deg, #7c2a7c, #b455ff, #ff77c8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hint{color:var(--muted);text-align:center; word-wrap:break-word;}
.btn-row{display:flex;gap:10px;justify-content:center;margin-top:12px}
.fineprint{color:var(--muted);text-align:center;font-size:12px;margin-top:10px}

code{padding:2px 6px;border-radius:8px;background:rgba(255,255,255,.8);border:1px dashed var(--border)}

@media (prefers-reduced-motion: reduce){
  .ticker, .pulse-dot, .spinner, .thumb-art, .skeleton .card-body::before {animation:none}
}