.skip-link{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(32px,env(safe-area-inset-left));z-index:100;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;max-width:calc(100vw - 64px);padding:12px 20px;border:1px solid transparent;border-radius:12px;background:var(--action);color:var(--on-action);font-weight:600;text-decoration:none;box-shadow:0 4px 16px #0003;transform:translateY(calc(-100% - 24px))}
.skip-link:focus{transform:translateY(0);transition:transform .28s cubic-bezier(.22,1,.36,1);outline:3px solid var(--text);outline-offset:3px}
.skip-link svg{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:767px){.skip-link{left:max(16px,env(safe-area-inset-left));max-width:calc(100vw - 32px)}}
.site-header{width:min(100% - 64px,1440px);margin-inline:auto;min-height:64px;display:flex;align-items:center;gap:16px;padding-block:8px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;min-height:44px;flex:1 1 0}
.brand img{display:block;width:148px;height:auto}
.header-actions{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.preferences{display:flex;align-items:center;gap:4px;flex:none}
.preference{display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);cursor:pointer;transition:transform .18s ease,background-color .18s ease}
.preference[aria-checked=true]{border-color:var(--action);background:var(--soft);color:var(--action)}
.preference svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.preference[aria-checked=true] .sun,.preference[aria-checked=false] .moon,.preference[aria-checked=false] .motion-slash{display:none}
.preference[aria-checked=true] .moon{fill:currentColor}
.top-nav{min-width:0;display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px;border-radius:16px;background:var(--soft)}
.top-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:12px;color:var(--muted);text-decoration:none;font-weight:600}
.top-nav a[aria-current]{background:var(--surface);color:var(--text);box-shadow:0 2px 0 var(--line)}
.header-actions .play-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;padding:8px 18px;border-radius:12px;background:var(--action);color:var(--on-action);font-weight:700;text-decoration:none;transition:transform .18s ease,filter .18s ease}
.header-actions .play-link:hover{filter:brightness(.95)}
.header-actions .play-link:active,.preference:active{transform:scale(.98)}
.site-header :focus-visible{outline:1.5px solid var(--text);outline-offset:1px}
@media(max-width:680px){.site-header{width:min(100% - 32px,1440px);flex-wrap:wrap;gap:8px}.header-actions .play-link{padding-inline:14px}.top-nav{order:3;width:100%;justify-content:space-between}.top-nav a{flex:1;justify-content:center;padding:0 8px}}
@media(max-width:380px){.top-nav a{padding:0 4px;font-size:.9rem}}
:root[data-motion=reduced] :is(.preference,.header-actions .play-link,.skip-link){transition:none}
:root[data-motion=reduced] :is(.preference,.header-actions .play-link):active{transform:none}
@media(prefers-reduced-motion:reduce){:root:not([data-motion=full]) :is(.preference,.header-actions .play-link,.skip-link){transition:none}:root:not([data-motion=full]) :is(.preference,.header-actions .play-link):active{transform:none}}