/* shared light "product shot" pages (cassette, CD): white studio backdrop, tiny brand, pill controls */
:root{ --ink:#1b1922; --mute:#8d8a96; --line:#e7e5ec; --pill:#ffffff; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; background:#fbfbfc; color:var(--ink); font-family:'Rubik',system-ui,sans-serif; }
body::before{ content:''; position:fixed; inset:0; background:radial-gradient(60% 55% at 50% 45%,#ffffff 0%,#f5f5f8 70%,#eeedf2 100%); z-index:-1; }
a{ color:inherit; text-decoration:none; }
.lbrand{ position:fixed; left:22px; top:18px; z-index:5; line-height:1.15; }
.lbrand small{ display:block; font-size:9px; color:var(--mute); letter-spacing:.02em; }
.lbrand b{ display:flex; align-items:center; gap:7px; font-size:16px; font-weight:800; }
.lbrand b i{ width:16px; height:16px; border-radius:4px; background:linear-gradient(135deg,#ff4fa0,#7a5aff); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.lbrand b em{ font-style:normal; color:#ff4fa0; }
.lnav{ position:fixed; right:22px; top:18px; z-index:5; display:flex; gap:4px; }
.lnav a{ font-size:12px; color:var(--mute); padding:6px 11px; border-radius:999px; }
.lnav a:hover{ color:var(--ink); } .lnav a.on{ color:var(--ink); background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.lhint{ position:fixed; left:0; right:0; bottom:96px; text-align:center; font-size:11px; color:var(--mute); letter-spacing:.01em; pointer-events:none; }
.lnow{ position:fixed; left:0; right:0; top:62px; text-align:center; font-size:12px; color:var(--mute); pointer-events:none; }
.lnow b{ color:var(--ink); font-weight:700; }
.pill{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--pill); border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 30px rgba(30,20,60,.10); border:1px solid #f0eef4; }
.pill .sep{ width:1px; height:26px; background:var(--line); margin:0 4px; }
.pill button{ border:none; background:none; cursor:pointer; color:var(--ink); font-family:inherit; }
.pill .chip{ width:38px; height:38px; border-radius:50%; padding:0; background-size:cover; background-position:center; position:relative; transition:transform .2s; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.pill .chip::after{ content:''; position:absolute; inset:40%; border-radius:50%; background:#f4f4f7; box-shadow:0 0 0 1.5px rgba(255,255,255,.8); }
.pill .chip.on{ box-shadow:0 0 0 2px #fff,0 0 0 4px #1b1922; } .pill .chip:hover{ transform:translateY(-2px); }
.pill .dark{ width:42px; height:42px; border-radius:50%; background:#16141c; color:#fff; font-size:14px; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.pill .sm{ width:30px; height:30px; border-radius:50%; font-size:12px; color:#3a3744; }
.pill .sm:hover{ background:#f3f2f6; }
.pill .txt{ font-size:10px; font-weight:700; letter-spacing:.08em; padding:7px 12px; border-radius:999px; color:#3a3744; }
.pill .txt.on{ background:linear-gradient(90deg,#ff4fa0,#b05aff); color:#fff; }
.lfoot{ position:fixed; right:22px; bottom:12px; font-size:9px; color:#b4b1bc; }
@media (max-width:700px){ .lnav{ top:60px; right:50%; transform:translateX(50%); white-space:nowrap; } .lnow{ top:96px; } .pill{ gap:4px; padding:6px 8px; } .pill .chip{ width:30px; height:30px; } .lfoot{ display:none; } }
@media (max-width:560px){ .pill .txt{ padding:7px 8px; } .pill{ flex-wrap:wrap; justify-content:center; max-width:calc(100vw - 24px); width:max-content; border-radius:26px; row-gap:6px; } .pill .sep{ display:none; } .lhint{ bottom:150px; } }