.header{padding:12px var(--mobile-padding);background-color:var(--overlay-color);width:100%;position:sticky;top:0;left:0;z-index:999;border-bottom:.5px solid rgba(var(--text-color-rgb),.1)}@media (min-width: 680px){.header{padding:14px var(--desktop-padding)}}.header .content{gap:24px;display:flex;margin:0 auto;max-width:var(--max-width);align-items:center;justify-content:space-between}.header .content .text-and-logo{gap:4px;display:flex;font-weight:var(--bold);-webkit-user-select:none;user-select:none;align-items:center}.header .content .end{display:flex;text-align:center;gap:24px}.animated-icon{width:24px;height:24px;position:relative}.animated-icon .fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.animated-icon .img{position:absolute;top:0;left:0}.animated-icon .img,.animated-icon .canvas{width:100%;height:100%}.animated-icon[data-is-loaded] .img{display:none}.animated-icon[data-is-book] .fallback,.animated-icon[data-is-book] canvas{transition-property:opacity;transition-duration:.2s}.animated-icon[data-is-book] .canvas{opacity:0}@media (hover: hover){.animated-icon[data-is-book][data-is-playing] .fallback{opacity:0}.animated-icon[data-is-book][data-is-playing] canvas{opacity:1}}.main{min-height:calc(100vh - 48px);padding:var(--mobile-padding)}@media (min-width: 680px){.main{padding:var(--desktop-padding)}}.main .content{width:100%;max-width:var(--max-width);margin:0 auto}