.sidebar{
  position:absolute;top:0;left:0;bottom:0;width:230px;z-index:20;padding:34px 28px;
  pointer-events:none;
}
.sidebar-logo{display:flex;align-items:center;gap:12px;margin-bottom:46px;}
.sidebar-logo svg{width:30px;height:30px;flex-shrink:0;}
.sidebar-logo .name{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:1px;}
.sidebar-logo .role{font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--accent-pale);opacity:.8;}
.sidebar-nav{list-style:none;display:flex;flex-direction:column;gap:20px;}
.sidebar-nav li{
  display:flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,243,226,.55);transition:color .25s ease,padding-left .25s ease;
}
.sidebar-nav li:first-child{color:var(--ink);font-weight:700;}
.sidebar-nav li > i{color:var(--accent);opacity:1;flex-shrink:0;}
.sidebar-nav a{
  display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;text-transform:none;
  letter-spacing:.4px;pointer-events:auto;transition:color .25s ease,transform .25s ease;
}
.sidebar-nav a:hover{color:var(--accent-pale);transform:translateX(6px);}
.sidebar-nav a i{color:var(--accent);flex-shrink:0;}

.hero-copy{
  position:absolute;left:250px;top:26%;z-index:15;max-width:350px;padding:0 40px 0 0;
  pointer-events:none;
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.62rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(255,180,84,.45);border-radius:20px;padding:5px 14px;margin-bottom:16px;
  background:rgba(42,18,40,.45);backdrop-filter:blur(4px);
}
.hero-kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);animation:kickerPulse 2.4s ease-in-out infinite;}
@keyframes kickerPulse{0%,100%{opacity:.5;}50%{opacity:1;}}
.hero-copy h1{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:2.3rem;line-height:1.1;
  text-shadow:0 4px 22px rgba(42,16,30,.55);
}
.hero-copy p{margin-top:12px;font-size:.86rem;letter-spacing:.5px;color:var(--ink-dim);}
.hero-hint{
  margin-top:22px;display:flex;align-items:center;gap:8px;
  font-size:.7rem;letter-spacing:1px;color:rgba(255,243,226,.62);
}
.hero-hint i{animation:nudge 2s ease-in-out infinite;}
@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}

.preview-card{
  position:absolute;right:40px;bottom:36px;z-index:25;width:340px;
  background:rgba(30,14,28,.86);border:1px solid rgba(255,217,166,.18);border-radius:16px;
  padding:16px;display:flex;gap:14px;backdrop-filter:blur(6px);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.preview-card.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.preview-card{
  bottom:calc(900px - var(--vis-h,900px) + 36px);
}
.pc-icon{
  width:64px;height:64px;border-radius:12px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;
  overflow:hidden;
}
.pc-icon img{width:100%;height:100%;object-fit:cover;}
.pc-body{flex:1;min-width:0;}
.pc-title{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1rem;}
.pc-tags{display:flex;gap:6px;margin:6px 0;flex-wrap:wrap;}
.pc-tags span{
  font-size:.62rem;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-pale);
  border:1px solid rgba(255,217,166,.35);border-radius:20px;padding:2px 8px;
}
.pc-blurb{font-size:.74rem;line-height:1.4;color:rgba(255,243,226,.82);margin-bottom:8px;}
.pc-go{
  display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;
  color:var(--accent);letter-spacing:.5px;transition:color .25s ease;
}
.pc-go:hover{color:var(--accent-pale);}
.pc-go.is-locked{color:var(--locked);}

.audio-toggle{
  position:absolute;top:26px;right:32px;z-index:60;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,225,190,.25);
  background:rgba(30,14,28,.55);backdrop-filter:blur(6px);
  color:var(--accent-pale);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .25s ease,color .25s ease,transform .25s ease;
}
.audio-toggle:hover{border-color:var(--accent);color:var(--ink);transform:scale(1.06);}
.audio-toggle .on{display:none;}
.audio-toggle.is-on .on{display:block;}
.audio-toggle.is-on .off{display:none;}