#topbar{
  position:sticky;top:0;z-index:10;
  background:var(--paper);
  border-bottom:2px solid var(--red);
  box-shadow:0 2px 6px rgba(51,48,42,.08);
  view-transition-name:site-header;
  animation:site-header-enter 260ms ease-out both;
}
#playerbar{view-transition-name:player-controls}

@view-transition{navigation:auto}
::view-transition-group(site-header),
::view-transition-group(player-controls){
  animation-duration:380ms;
  animation-timing-function:cubic-bezier(.22,.8,.25,1);
}
::view-transition-old(site-header),
::view-transition-new(site-header){
  transform-origin:top center;
}
::view-transition-old(site-header){animation:site-header-out 380ms cubic-bezier(.22,.8,.25,1) both}
::view-transition-new(site-header){animation:site-header-in 380ms cubic-bezier(.22,.8,.25,1) both}
::view-transition-new(player-controls){animation:player-controls-in 380ms cubic-bezier(.22,.8,.25,1) both}
::view-transition-old(player-controls){animation:player-controls-out 260ms ease-in both}

@keyframes site-header-enter{
  from{opacity:.78;transform:translateY(-8px) scaleY(1.04)}
  to{opacity:1;transform:translateY(0) scaleY(1)}
}
@keyframes site-header-out{
  from{opacity:1;transform:scaleY(1)}
  to{opacity:.2;transform:scaleY(.84)}
}
@keyframes site-header-in{
  from{opacity:.2;transform:scaleY(1.14)}
  to{opacity:1;transform:scaleY(1)}
}
@keyframes player-controls-in{
  from{opacity:0;transform:translateY(-16px) scaleY(.84)}
  to{opacity:1;transform:translateY(0) scaleY(1)}
}
@keyframes player-controls-out{
  from{opacity:1;transform:translateY(0) scaleY(1)}
  to{opacity:0;transform:translateY(-12px) scaleY(.84)}
}
#sitebar{
  display:flex;align-items:center;gap:12px;
  min-height:58px;padding:6px 22px;
  border-bottom:1px solid var(--line);
}
#sitebar .logo{
  font-family:'TauhuOo','Iansui',sans-serif;
  font-size:22px;letter-spacing:.1em;
  color:var(--red);text-decoration:none;flex:none;white-space:nowrap;
}
#sitebar .brand-divider{height:32px;border-left:1px solid var(--line);flex:none}
#sitebar .sp{flex:1 1 auto;min-width:18px}
.pages{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.pages a{
  font-size:15px;color:var(--ink);text-decoration:none;
  padding:4px 11px;border:1.5px solid var(--red);border-radius:20px;white-space:nowrap;
}
.pages a:hover,.pages a:focus-visible,.pages a.here{background:var(--red);color:var(--paper)}
#topbar:not(.player-header) #sitebar{
  min-height:64px;padding:10px 26px;gap:18px;
}
#topbar:not(.player-header) #sitebar .logo{font-size:22px;letter-spacing:.15em}
#topbar:not(.player-header) .pages{gap:10px}
#topbar:not(.player-header) .pages a{font-size:16px;padding:5px 14px}
#playerbar{width:100%;min-width:0;margin:0;padding:7px 22px 8px}
#track-row{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
#song-picker-group{position:relative;flex:0 1 340px;min-width:260px}
#song-picker{
  width:100%;height:46px;min-height:46px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 12px;background:#fffdf6;color:var(--ink);
  border:2px solid var(--red);border-radius:9px;
  font:inherit;font-size:21px;text-align:left;cursor:pointer;
}
#song-picker:hover,#song-picker:focus-visible{background:var(--paper-deep)}
#song-picker:disabled{opacity:.65;cursor:wait}
#song-picker .picker-title{
  font-family:'TauhuOo','Iansui',sans-serif;letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#song-picker .picker-caret{color:var(--red);font-size:22px;line-height:1}
#song-menu{
  position:absolute;left:0;right:0;top:50px;z-index:30;
  max-height:min(60vh,460px);overflow:auto;padding:8px;
  background:#fffdf6;border:1.5px solid var(--red);border-radius:10px;
  box-shadow:0 5px 16px rgba(51,48,42,.22);
}
#song-menu[hidden]{display:none}
.song-menu-title{padding:4px 10px 7px;color:var(--red);font-size:16px;border-bottom:1px solid var(--line)}
.song-option{
  width:100%;display:flex;align-items:center;gap:8px;padding:9px 10px;
  border:none;border-radius:6px;background:none;color:var(--ink);font:inherit;font-size:18px;text-align:left;cursor:pointer;
}
.song-option:hover,.song-option:focus-visible{background:var(--paper-deep)}
.song-option[aria-selected="true"]{background:var(--red);color:var(--paper)}
.song-option .marker{width:18px;flex:none;color:var(--red);text-align:center}
.song-option[aria-selected="true"] .marker{color:var(--paper)}
.song-option .option-summary{margin-left:auto;font-size:14px;color:var(--ink-faint);white-space:nowrap}
.song-option[aria-selected="true"] .option-summary{color:var(--paper)}
#part-group{min-width:0;flex:1 1 auto}
#part-nav{display:flex;gap:6px;flex-wrap:nowrap;min-width:0}
.part-button,#previous-button,#next-button{
  min-height:42px;padding:6px 12px;border:1.5px solid var(--red);border-radius:20px;
  background:none;color:var(--red);font:inherit;font-size:16px;line-height:1.2;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
}
.part-button:hover,.part-button:focus-visible,#previous-button:not(:disabled):hover,#previous-button:not(:disabled):focus-visible,#next-button:not(:disabled):hover,#next-button:not(:disabled):focus-visible{background:var(--red);color:var(--paper)}
.part-button[aria-current="page"]{background:var(--red);color:var(--paper);font-weight:bold}
#segment-nav{display:flex;gap:8px;align-items:center;flex:none;min-width:0}
#previous-button,#next-button{font-size:16px}
#previous-button:disabled,#next-button:disabled{border-color:var(--line);color:var(--ink-faint);background:none;cursor:not-allowed}
#transport-row{display:flex;align-items:center;gap:10px;min-width:0;min-height:46px}
#playbtn{
  width:46px;height:46px;border-radius:50%;border:2px solid var(--red);
  background:var(--red);color:var(--paper);font-size:19px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;
}
#playbtn.paused{background:var(--paper);color:var(--red)}
#playbtn:disabled{cursor:wait;opacity:.55}
#bar{flex:1;min-width:0;height:10px;background:var(--paper-deep);border-radius:5px;cursor:pointer;position:relative}
#fill{height:100%;width:0;background:var(--red);border-radius:5px}
#clock{font-variant-numeric:tabular-nums;font-size:16px;flex:none}
#zybtn{
  font-family:inherit;font-size:15px;cursor:pointer;flex:none;color:var(--ink);background:none;
  padding:4px 12px;border:1.5px solid var(--line);border-radius:20px;white-space:nowrap;
}
#zybtn.on{border-color:var(--red);background:var(--red);color:var(--paper)}
@media(max-width:860px){
  #sitebar{padding:6px 16px}
  #playerbar{padding:7px 16px 8px}
}
@media(max-width:1100px) and (min-width:601px){
  #topbar.player-header #sitebar{flex-wrap:wrap;gap:8px}
  #topbar.player-header #sitebar .brand-divider,#topbar.player-header #sitebar .sp{display:none}
  #topbar.player-header #sitebar .pages{margin-left:auto}
  #topbar.player-header #track-row{order:3;flex:1 0 100%;width:100%;padding-top:2px}
  #topbar.player-header #song-picker-group{flex-basis:300px}
  #topbar.player-header #part-nav{flex-wrap:wrap}
}
@media(max-width:600px){
  #sitebar{gap:8px;flex-wrap:wrap}
  #sitebar .brand-divider,#sitebar .sp{display:none}
  #sitebar .pages{flex-basis:100%;order:2;gap:5px}
  #sitebar .pages a{font-size:13.5px;padding:5px 8px}
  #topbar:not(.player-header) #sitebar{min-height:0;padding:8px 16px;gap:10px}
  #topbar:not(.player-header) #sitebar .logo{font-size:19px}
  #topbar.player-header #sitebar{padding:6px 12px}
  #topbar.player-header #track-row{order:3;flex:1 0 100%;width:100%;flex-direction:column;align-items:stretch;gap:8px;padding-top:2px}
  #topbar.player-header #song-picker-group,#topbar.player-header #part-group{width:100%;min-width:0;flex:none}
  #topbar.player-header #song-picker{font-size:20px}
  #topbar.player-header #song-menu{top:50px}
  #topbar.player-header #part-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  #topbar.player-header .part-button{width:100%;padding:7px 5px;font-size:16px}
  #topbar.player-header #playerbar{padding:8px 12px 10px}
  #topbar.player-header #transport-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;min-height:0}
  #topbar.player-header #segment-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-column:2;grid-row:1;width:100%}
  #topbar.player-header #previous-button,#topbar.player-header #next-button{width:100%;font-size:16px}
  #topbar.player-header #playbtn{width:42px;height:42px}
  #topbar.player-header #bar{grid-column:1 / -1;grid-row:2;width:100%;height:8px}
  #topbar.player-header #clock{grid-column:1;grid-row:3;font-size:14px;text-align:left}
  #topbar.player-header #zybtn{grid-column:2;grid-row:3;justify-self:end;font-size:14px;padding:4px 10px}
}
@media(min-resolution:1.5dppx) and (min-width:601px){
  #topbar.player-header #sitebar{min-height:39px;padding:0 22px}
  #topbar.player-header #sitebar .logo{font-size:20px}
  #topbar.player-header #sitebar .brand-divider{height:24px}
  #topbar.player-header #song-picker{height:38px;min-height:38px;padding:4px 10px;font-size:19px}
  #topbar.player-header #song-picker .picker-caret{font-size:20px}
  #topbar.player-header .part-button,#topbar.player-header #previous-button,#topbar.player-header #next-button{min-height:38px;padding:5px 10px;font-size:15px}
  #topbar.player-header #playerbar{padding:4px 22px 5px}
  #topbar.player-header #transport-row{min-height:38px;gap:8px}
  #topbar.player-header #playbtn{width:38px;height:38px;font-size:16px}
  #topbar.player-header #bar{height:8px}
  #topbar.player-header #clock{font-size:15px}
  #topbar.player-header #zybtn{font-size:14px;padding:3px 10px}
}
@media(prefers-reduced-motion:reduce){
  #topbar{animation:none}
  ::view-transition-group(site-header),
  ::view-transition-group(player-controls),
  ::view-transition-old(site-header),
  ::view-transition-new(site-header),
  ::view-transition-old(player-controls),
  ::view-transition-new(player-controls){animation-duration:1ms;animation-delay:0ms}
}