/* Compact, data-rich homepage mockup. Content remains navigable without visible scrollbar chrome. */
.eyebrow {
  display: none !important;
}

.app-window {
  --workspace-height: 820px;
  --tags-height: 96px;
}

.sound-column {
  grid-template-rows: 100px 170px 80px minmax(470px, 1fr);
}

.eq-panel {
  min-height: 470px;
}

.embed-mockup,
.embed-mockup body {
  overflow: hidden !important;
}

.app-window,
.app-window * {
  scrollbar-width: none !important;
}

.app-window::-webkit-scrollbar,
.app-window *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.library-tree-prototype,
.playlist-selector-list,
.playlist-track-list-prototype,
.sound-column,
.tags-panel > div {
  overscroll-behavior: contain;
}

.library-artist-group-prototype,
.library-artist-children,
.library-album-track-list {
  display: block;
}

.library-artist-group-prototype.is-collapsed > .library-artist-children,
.library-album-group-prototype.is-collapsed > .library-album-track-list {
  display: none;
}

.library-artist-prototype,
.library-album-prototype {
  position: relative;
  user-select: none;
}

.library-tree-chevron {
  display: grid;
  width: 11px;
  flex: 0 0 11px;
  place-items: center;
  color: #64748b;
  font-size: 14px;
  transform: rotate(90deg);
  transition: transform .15s ease, color .15s ease;
}

.is-collapsed > .library-artist-prototype .library-tree-chevron,
.is-collapsed > .library-album-prototype .library-tree-chevron {
  transform: rotate(0deg);
}

.library-artist-prototype:hover .library-tree-chevron,
.library-album-prototype:hover .library-tree-chevron {
  color: var(--accent);
}

.library-artist-prototype {
  padding-left: 7px;
}

.library-album-prototype {
  min-height: 43px;
  padding-left: 31px;
}

.library-album-prototype .library-art-prototype {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.library-track-prototype {
  padding-left: 54px;
}

.library-artist-prototype.is-selected,
.library-album-prototype.is-selected {
  background: #172b2d;
}

.playlist-selector-list {
  flex-basis: 210px;
  min-height: 82px;
}

.playlist-selector-item-prototype {
  cursor: pointer;
}

.playlist-selector-item-prototype:focus-visible,
.playlist-track-prototype:focus-visible,
.library-artist-prototype:focus-visible,
.library-album-prototype:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -2px;
}

.playlist-list-resizer-prototype {
  flex-basis: 7px;
  touch-action: none;
}

.playlist-list-resizer-prototype::before {
  position: absolute;
  inset: -4px 0;
  content: "";
}

.playlist-list-resizer-prototype:hover,
.playlist-list-resizer-prototype:focus-visible,
.playlist-list-resizer-prototype.dragging {
  background: #17342f;
  outline: none;
}

.playlist-list-resizer-prototype:hover::after,
.playlist-list-resizer-prototype:focus-visible::after,
.playlist-list-resizer-prototype.dragging::after {
  right: 37%;
  left: 37%;
  background: var(--accent);
}

.playlist-selector-list.is-collapsed,
.playlist-list-resizer-prototype.is-collapsed {
  display: none;
}

.playlist-track-prototype {
  cursor: pointer;
}

.playlist-track-prototype.is-playing {
  box-shadow: inset 3px 0 0 var(--accent);
}

.playlist-overflow-note {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 8px;
  letter-spacing: .04em;
}

.player-rating-bar-prototype {
  cursor: pointer;
}

.player-rating-bar-prototype:hover,
.player-rating-bar-prototype:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  filter: brightness(1.08);
}

.visualizer {
  gap: 2px;
  padding: 9px 10px 8px;
}

.visualizer i,
.visualizer i:nth-child(2n),
.visualizer i:nth-child(3n) {
  min-width: 1px;
  height: var(--bar-height, 35%) !important;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg, #72e1c2, #29bfa0);
  opacity: .92;
}

@media (max-width: 1300px) {
  .app-window {
    --workspace-height: 820px;
  }

  .playlist-selector-list {
    flex-basis: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-tree-chevron {
    transition: none;
  }
}
.embed-mockup,.embed-mockup body{min-height:0;background:transparent}.embed-mockup .skip-link,.embed-mockup .site-header,.embed-mockup .help-hero,.embed-mockup .interactive-reference-intro,.embed-mockup .guide-directory-tree,.embed-mockup .help-footer{display:none!important}.embed-mockup .help-app-home main{overflow:visible}.embed-mockup .help-app-home .mockup-section{width:100%;margin:0;padding:0}.embed-mockup .help-app-home .app-window{box-shadow:0 24px 70px rgba(0,0,0,.45)}
.help-app-home main{overflow:clip}.help-app-home .help-hero{padding-bottom:48px}.help-entry-routes{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:720px;margin:26px auto 0;text-align:left}.help-entry-routes a{display:grid;grid-template-columns:34px 1fr 18px;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(17,22,29,.76);color:var(--text);text-decoration:none}.help-entry-routes a:hover,.help-entry-routes a:focus-visible{border-color:rgba(242,184,75,.55);background:var(--surface-2);outline:none}.help-entry-routes a.primary-route{border-color:rgba(242,184,75,.35)}.help-entry-routes svg{width:19px;color:var(--gold)}.help-entry-routes span{display:grid;gap:3px}.help-entry-routes strong{font-size:.82rem}.help-entry-routes small{color:var(--muted-2);font-size:.69rem}.interactive-reference-intro{width:min(1500px,calc(100% - 48px));margin:24px auto 20px}.interactive-reference-intro h2{max-width:850px;margin-bottom:13px}.interactive-reference-intro>p:last-child{max-width:870px;color:var(--muted);line-height:1.7}.help-app-home .mockup-section{width:min(1500px,calc(100% - 32px));margin:0 auto 100px}.help-app-home .mockup-section>.section-heading{display:none}.help-app-home .app-window{font-size:clamp(8px,.72vw,12px)}.help-app-home .version-note{display:none}.guide-directory-tree{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:0 0 110px}.guide-tree-intro{max-width:790px;margin-bottom:30px}.guide-tree-intro>p:last-child{color:var(--muted);line-height:1.7}.guide-tree{position:relative;max-width:980px;margin:0 auto;padding:4px 0 0 34px}.guide-tree:before{content:"";position:absolute;left:15px;top:52px;bottom:22px;width:1px;background:linear-gradient(var(--gold),var(--line) 16%,var(--line) 86%,transparent)}.guide-tree-root{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 15px -34px;padding:13px 15px;border:1px solid rgba(242,184,75,.34);border-radius:10px;background:linear-gradient(100deg,rgba(242,184,75,.12),rgba(17,22,29,.75))}.guide-tree-root>svg{width:20px;color:var(--gold)}.guide-tree-root>span{display:grid;gap:3px}.guide-tree-root strong{font-size:.92rem}.guide-tree-root small{color:var(--muted-2);font-size:.68rem}.guide-branch{position:relative;margin:0 0 10px}.guide-branch:before{content:"";position:absolute;left:-19px;top:20px;width:19px;height:1px;background:var(--line)}.guide-branch>summary{display:grid;grid-template-columns:22px 1fr auto 18px;align-items:center;gap:9px;min-height:43px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(17,22,29,.78);cursor:pointer;list-style:none}.guide-branch>summary::-webkit-details-marker{display:none}.guide-branch>summary:hover{border-color:rgba(242,184,75,.35)}.guide-branch>summary svg{width:16px;color:var(--gold)}.guide-branch>summary small{color:var(--muted-2);font-size:.66rem}.guide-branch>summary svg:last-child{color:var(--muted-2);transition:transform .18s ease}.guide-branch[open]>summary svg:last-child{transform:rotate(180deg)}.guide-branch ul{position:relative;margin:0 0 5px 19px;padding:7px 0 3px 20px;border-left:1px solid var(--line);list-style:none}.guide-branch li{position:relative}.guide-branch li:before{content:"";position:absolute;left:-20px;top:21px;width:20px;height:1px;background:var(--line)}.guide-branch li:last-child:after{content:"";position:absolute;left:-21px;top:22px;bottom:0;width:2px;background:var(--bg)}.guide-branch li a{display:grid;grid-template-columns:8px 1fr 18px;align-items:center;gap:10px;padding:9px 10px;color:inherit;border-radius:7px;text-decoration:none}.guide-branch li a:hover,.guide-branch li a:focus-visible{background:var(--surface-2);outline:none}.tree-node{width:6px;height:6px;border:1px solid #526174;border-radius:50%;background:var(--bg);transition:.15s}.guide-branch li a:hover .tree-node{border-color:var(--gold);background:var(--gold);box-shadow:0 0 8px rgba(242,184,75,.5)}.guide-branch li a>span:nth-child(2){display:grid;gap:3px}.guide-branch li strong{font-size:.78rem}.guide-branch li small{color:var(--muted-2);font-size:.68rem;line-height:1.45}.guide-branch li a>svg{width:13px;color:#526174;opacity:0;transition:.15s}.guide-branch li a:hover>svg{opacity:1;color:var(--gold)}@media(max-width:800px){.help-entry-routes{grid-template-columns:1fr}.interactive-reference-intro{width:min(100% - 30px,1500px)}.help-app-home .mockup-section{width:calc(100% - 12px);overflow-x:auto}.guide-directory-tree{width:calc(100% - 30px)}.guide-tree{padding-left:25px}.guide-tree:before{left:10px}.guide-tree-root{margin-left:-25px}.guide-branch:before{left:-14px;width:14px}.guide-branch>summary{grid-template-columns:20px 1fr 16px}.guide-branch>summary small{display:none}.guide-branch ul{margin-left:14px;padding-left:14px}.guide-branch li:before{left:-14px;width:14px}.guide-branch li:last-child:after{left:-15px}.guide-branch li a{grid-template-columns:7px 1fr}.guide-branch li a>svg{display:none}.guide-branch li small{font-size:.64rem}}@media(prefers-reduced-motion:reduce){.guide-branch>summary svg:last-child{transition:none}}

