/* PinkBro — fancy, frech, fun */
:root{
  --pink:#ff4da6;
  --pink-2:#ff7bbf;
  --ink:#1d0b16;
  --white:#fff;
}

*{box-sizing:border-box}
html,body{ height:100%; margin:0; color:var(--white); background:linear-gradient(120deg,#1a0010,#2b0035 40%,#4a005a 70%); overflow-x:hidden; font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial; }

.bg-blobs .blob{ position:fixed; filter:blur(40px); opacity:.55; pointer-events:none; will-change:transform,opacity; }
.blob.b1{ width:40vmax;height:40vmax;background:radial-gradient(circle at 30% 30%, var(--pink), transparent 60%); top:-10vmax; left:-10vmax; animation:float1 16s ease-in-out infinite;}
.blob.b2{ width:50vmax;height:50vmax;background:radial-gradient(circle at 70% 70%, #7a00ff, transparent 60%); bottom:-15vmax; right:-10vmax; animation:float2 18s ease-in-out infinite;}
.blob.b3{ width:30vmax;height:30vmax;background:radial-gradient(circle at 40% 60%, #00d4ff, transparent 60%); top:10vmax; right:30vmax; animation:float3 22s ease-in-out infinite;}
@keyframes float1{50%{transform:translate(6vmax,4vmax)}} @keyframes float2{50%{transform:translate(-5vmax,-3vmax)}} @keyframes float3{50%{transform:translate(3vmax,-6vmax)}}

.site-header{ text-align:center; padding:clamp(2rem,4vw,4rem) 1rem 0; }
.brand{ display:inline-flex; align-items:center; gap:12px; }
.logo{ width:64px; height:64px; image-rendering: pixelated; border-radius:10px; box-shadow:0 0 0 2px rgba(255,255,255,.2), 0 8px 20px rgba(255,77,166,.35); }
.site-header h1{ margin:0; font-size:clamp(2.5rem, 8vw, 6rem); letter-spacing:.02em; text-shadow:0 0 20px rgba(255,77,166,.5); }
.blink{ animation:blink 1.4s steps(2,end) infinite } @keyframes blink{50%{opacity:0}} .tagline{ margin:.5rem 0 0; opacity:.9; }

.tabs{ margin:1.25rem auto 0; display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.tab{ appearance:none; border:none; cursor:pointer; font-weight:700; padding:.6rem .9rem; border-radius:999px; background:rgba(255,255,255,.12); color:var(--white); box-shadow:inset 0 -1px 0 rgba(255,255,255,.25); }
.tab.active{ background:linear-gradient(90deg, var(--pink), var(--pink-2)); }

.shell{ max-width:1100px; margin:2rem auto; padding:0 1rem 4rem; }
.panel{ background: linear-gradient(to bottom right, rgba(255,255,255,.12), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.2); backdrop-filter: blur(14px); border-radius:18px; padding:1.5rem; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.tab-panel{ display:none } .tab-panel.active{ display:block }

.controls{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:1rem; }
.btn{ position:relative; appearance:none; cursor:pointer; border:none; border-radius:14px; padding:1rem 1.1rem; font-weight:700; color:var(--white);
  background: radial-gradient(120% 140% at 0% 0%, var(--pink), var(--pink-2) 70%);
  box-shadow: 0 12px 26px rgba(255,77,166,.35), inset 0 -2px 0 rgba(255,255,255,.25);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease; overflow:hidden; }
.btn:before{ content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.35), transparent 40%); opacity:.85; pointer-events:none; }
.btn:hover{ transform: translateY(-2px); filter:saturate(1.1) } .btn:active{ transform: translateY(1px) scale(.99) } .btn.small{ padding:.6rem .9rem; font-weight:600; font-size:.95rem }

.toggles{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin:1.25rem 0 .25rem }
.switch{ position:relative; display:inline-flex; align-items:center; gap:.7rem } .switch input{ display:none }
.switch .slider{ width:52px;height:28px;border-radius:999px;background:rgba(255,255,255,.2);position:relative;transition:background .2s ease; box-shadow: inset 0 0 0 2px rgba(255,255,255,.1) }
.switch .slider:after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition: transform .2s ease; box-shadow: 0 6px 16px rgba(0,0,0,.25) }
.switch input:checked + .slider{ background: linear-gradient(90deg, var(--pink), var(--pink-2)) } .switch input:checked + .slider:after{ transform: translateX(24px) }
.switch .label{ opacity:.9; font-weight:600 }

.range-wrap{ margin:.8rem 0 0 } .range-label{ display:block; margin-bottom:.25rem; opacity:.85; font-weight:600 } input[type=range]{ width:min(480px,100%) }
.hint{ margin-top:1rem; opacity:.8; font-size:.95rem }
.log-wrap{ margin-top:1.5rem } .log{ min-height:56px; background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.25); border-radius:12px; padding:.75rem 1rem; font-size:.95rem; line-height:1.25; max-height:240px; overflow:auto }

.site-footer{ text-align:center; opacity:.85; font-size:.95rem; padding:2rem 1rem } .heart{ display:inline-block; transform: translateY(2px) scale(1.1) }
.confetti{ position:fixed; inset:0; pointer-events:none }

/* Lightbox */
dialog{ background: rgba(34,0,28,.9); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:16px; padding:1.2rem 1.2rem 1rem; width:min(520px, 92vw); }
dialog::backdrop{ background: rgba(0,0,0,.5) }
.lightbox{ max-width:min(96vw, 1200px); width:96vw }
.lightbox .lightbox-close{ position:absolute; top:.4rem; right:.6rem; font-size:1.6rem; line-height:1; background:none; border:none; color:#fff; cursor:pointer }
.lightbox-inner{ max-height:76vh; overflow:auto; padding:.5rem }
.lightbox img, .lightbox video{ max-width:100%; height:auto; display:block; border-radius:12px }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:12px }
.card{ position:relative; overflow:hidden; border-radius:14px; cursor:pointer; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2) }
.card .thumb{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block }
.card .badge{ position:absolute; bottom:.4rem; right:.5rem; background:rgba(0,0,0,.5); padding:.25rem .5rem; border-radius:999px; font-size:.8rem }