.library-nav .library-link{display:inline-flex;align-items:center;justify-content:center;padding:9px 17px;border:0;border-radius:999px;font-size:14px;font-weight:550;line-height:20px;color:var(--muted);text-decoration:none;white-space:nowrap;transition:background 160ms ease,color 160ms ease,transform 140ms var(--ease)}
.library-nav .library-link:hover{color:var(--ink);background:var(--surface)}
.library-nav .library-link[aria-current="page"]{background:var(--ink);color:var(--on-ink)}
.library-nav.nav-motion-ready>.library-link{position:relative;z-index:1}
.library-nav.nav-motion-ready>.library-link[aria-current="page"]{background:transparent}
.library-nav .library-link:active:not(:focus-visible){transform:scale(.98);transition-duration:100ms}
.library-nav .library-link:focus-visible{transition:none}
.library-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(min-width:601px) and (max-width:1000px){.masthead-inner{gap:16px}.library-nav button,.masthead.is-scrolled .library-nav button,.library-nav .library-link{padding-inline:12px}.view-nav{gap:2px}.view-nav .nav-item{padding-inline:9px}}
@media(max-width:600px){.library-nav button,.masthead.is-scrolled .library-nav button,.library-nav .library-link{flex:1;padding:7px 10px;font-size:13px;line-height:20px}}
@media(prefers-reduced-motion:reduce){.library-nav .library-link{transition:none}.masthead .library-nav button:active:not(:focus-visible),.library-nav .library-link:active:not(:focus-visible){transform:none}}

/* A readable future section, without a link or an inert keyboard stop. */
.library-coming-soon{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;font-size:14px;font-weight:550;line-height:20px;color:var(--muted);white-space:nowrap;cursor:default}
/* Reuse the chromatic outline palette from payments-ui/login-preview/gate-metal-button.css.
   Static 1px base remains the reduced-motion and no-script fallback. */
.library-soon-badge{padding:2px 5px;border:1px solid transparent;border-radius:4px;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,#c7d7e7 5%,#f3b8bd 18%,#f5dfb8 24%,#fff 36%,#7d8396 54%,#c1b2e1 68%,#b9e5eb 80%,#d5dbe3 95%) border-box;font-size:10px;font-weight:400;line-height:14px}
/* The fixed mask exposes only the original 1px rim; the small inner layer moves. */
.library-soon-badge{position:relative}
.library-soon-reflection{display:none;position:absolute;inset:-1px;border-radius:inherit;padding:1px;overflow:hidden;pointer-events:none;user-select:none}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
  .library-soon-reflection{display:block;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
  .library-soon-reflection::before{content:"";position:absolute;inset:-1px -50%;background:linear-gradient(115deg,#7d8396 5%,#c1b2e1 18%,#b9e5eb 27%,#c7d7e7 35%,#fff 46%,#f5dfb8 55%,#f3b8bd 66%,#d5dbe3 78%,#7d8396 95%);opacity:.65;animation:library-metal-reflection 12s ease-in-out infinite alternate;animation-play-state:paused}
  .library-soon-badge[data-reflection="running"] .library-soon-reflection::before{animation-play-state:running;will-change:transform}
}
@keyframes library-metal-reflection{from{transform:translateX(-24%)}to{transform:translateX(24%)}}
@media(prefers-reduced-motion:reduce),(forced-colors:active){.library-soon-reflection{display:none}.library-soon-reflection::before{animation:none;will-change:auto}}
@media(forced-colors:active){.library-soon-badge{border-color:CanvasText;background:Canvas;color:CanvasText}}
@media(max-width:1000px){
  html{scroll-padding-top:132px}
  .masthead,.masthead.is-scrolled{height:auto;min-height:0;margin-bottom:0;padding:0}
  .masthead-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:8px 16px;padding-block:12px}
  .masthead-inner .brand{grid-area:1/1;justify-self:start}
  .masthead-inner>.account-nav{grid-area:1/2}
  .library-nav{grid-area:2/1/3/3;width:100%;min-width:0;flex-wrap:wrap;justify-content:flex-start;gap:4px}
  .library-nav button,.masthead.is-scrolled .library-nav button,.library-nav .library-link{flex:1;min-height:44px;padding:10px 12px}
  .library-coming-soon{padding:9px 8px}
}
@media(max-width:600px){
  html{scroll-padding-top:176px}
  .library-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .library-nav button,.masthead.is-scrolled .library-nav button,.library-nav .library-link{width:100%;min-height:44px;padding:10px 4px;font-size:12px}
  .library-coming-soon{grid-column:1/-1;padding:3px 4px;font-size:12px;min-height:28px}
}

@media(max-width:600px){.library-nav:has(a[href^="skills.html"]){grid-template-columns:repeat(3,minmax(0,1fr))}}