/* shell — top bar, player, footer, reveals: shared by every page with the full top bar */
html{scroll-behavior:smooth}
.icf{fill:currentColor;stroke:none}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px)}
.top{position:fixed;top:0;left:0;right:0;z-index:30;mix-blend-mode:difference;color:#fff;pointer-events:none}
.top-in{align-items:start;padding-top:20px}
.top a,.top button{pointer-events:auto}
.logo{grid-column:1 / 3;display:block;width:120px;height:44px;padding-top:2px}
.logo svg{width:116px;height:auto}
.logo svg path,.logo svg rect{fill:currentColor}
.meta{display:flex;flex-direction:column;gap:2px;padding-top:4px}
.meta .k{opacity:.55}
.m1{grid-column:4 / 7}
.m2{grid-column:7 / 9}
.nav{grid-column:9 / 12;display:flex;flex-wrap:wrap;gap:4px 22px;padding-top:4px}
.nav a{display:inline-flex;align-items:flex-start;gap:4px;min-height:24px}
.nav a .jp{font-size:9px;opacity:0;transform:translateY(3px);transition:opacity .35s var(--out),transform .35s var(--out)}
.theme-b{grid-column:12 / 13;justify-self:end;width:44px;height:44px;margin-top:-10px;margin-right:-12px;display:flex;align-items:center;justify-content:center}
.sc{position:relative;display:inline-block;white-space:nowrap}
.sc-s{visibility:hidden}
.sc-v{position:absolute;left:0;top:0;white-space:nowrap}
.lnk{display:inline-flex;align-items:center;gap:8px;min-height:32px;border-bottom:1px solid var(--line);align-self:flex-start;transition:border-color .3s}
.lnk:hover{border-color:var(--fg)}
.fcols{row-gap:28px}
.fcol{grid-column:span 3;display:flex;flex-direction:column;gap:4px;font-size:14px}
.fcol .mono{margin-bottom:8px;color:var(--mute)}
.player{position:fixed;right:clamp(16px,3vw,40px);bottom:12px;z-index:30;mix-blend-mode:difference;color:#fff;display:flex;align-items:center;height:44px}
.ib svg{width:12px;height:12px}
.ib.lk{width:26px}
.ib.lk svg{width:20px;height:20px}
.pp{position:relative;width:10px;height:12px;display:block}
.pp i{position:absolute;top:0;height:100%;width:50%;background:currentColor;transition:clip-path .32s var(--ease)}
.pp i:first-child{left:0;clip-path:polygon(0 0,100% 25%,100% 75%,0 100%)}
.pp i:last-child{left:50%;clip-path:polygon(0 25%,100% 50%,100% 50%,0 75%)}
.pp.is-pause i:first-child{clip-path:polygon(0 0,62% 0,62% 100%,0 100%)}
.pp.is-pause i:last-child{clip-path:polygon(38% 0,100% 0,100% 100%,38% 100%)}
.psep{width:1px;height:14px;background:currentColor;opacity:.4;margin:0 12px 0 8px}
.roll{height:16px;overflow:hidden;width:150px;font-size:12px;line-height:16px}
.roll-in{transition:transform .6s var(--ease)}
.roll-l{height:16px;display:flex;gap:8px;white-space:nowrap}
.roll-l .jp{opacity:.55;font-size:10px}
.ptime{width:40px;opacity:.55;font-size:10px}
.pfull{opacity:.55;font-size:10px;margin:0 6px 0 6px;white-space:nowrap}
.pbar{position:absolute;left:0;right:0;bottom:1px;height:14px;display:block;cursor:pointer}
.pbar::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:rgba(255,255,255,.22)}
.pfill{position:absolute;left:0;right:0;bottom:6px;height:1px;background:#fff;transform-origin:left;transition:transform .15s linear}
@media (max-width:1100px){
  .m2{display:none}
  .m1{grid-column:4 / 8}
  .nav{grid-column:8 / 12}
}
@media (max-width:820px){
  .m1,.m2,.nav{display:none}
  .fcol{grid-column:span 2}
  .player{left:16px;right:16px;bottom:8px;justify-content:space-between}
  .roll{flex:1;width:auto}
}