/* The complete library leads; compact controls support optional narrowing. */
:root{
  --paper:var(--pub-paper); --card:var(--pub-card); --ink:var(--pub-ink); --ink-soft:var(--pub-ink-soft);
  --ink-faint:var(--pub-ink-faint); --rule:var(--pub-rule); --navy:var(--pub-navy); --gold:var(--pub-brass-text);
  --display:var(--pub-font-display); --sans:var(--pub-font-serif); color-scheme:light;
}
:root.dark{color-scheme:dark}
*{box-sizing:border-box}
html{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
body{-webkit-font-smoothing:antialiased;margin:0;background:var(--pub-paper-grain-bg);color:var(--ink);font:16px/1.6 var(--sans)}
a{color:inherit}
img{max-width:100%}
.wrap{width:100%;max-width:var(--pub-page-edge);margin:0 auto;padding-inline:var(--pub-gutter)}
.logo{height:28px;width:auto;display:block}
header.site{border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;gap:4px 24px;padding-block:12px}
header.site nav{display:flex;align-items:center;gap:0 22px;flex:1;min-width:0}
header.site nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:500;font-size:15px;color:var(--ink-soft);padding-block:4px;border-bottom:2px solid transparent;white-space:nowrap}
header.site nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
header.site nav a.signin{margin-left:auto;color:var(--ink)}
header.site nav a:hover{color:var(--ink)}
.start{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1px solid var(--pub-ink);border-radius:var(--pub-radius-cta);background:var(--pub-ink);color:var(--pub-paper);font:500 15px/20px var(--sans);text-decoration:none;white-space:nowrap}
.start:hover{background:var(--pub-ink-soft);border-color:var(--pub-ink-soft)}
.start[hidden]{display:none}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 12px;border:1px solid var(--rule);border-radius:var(--pub-radius-input);background:var(--card);color:var(--ink);font:600 14px/1.2 var(--sans);white-space:nowrap;cursor:pointer}
.theme-toggle[hidden]{display:none}
.theme-toggle:hover{border-color:var(--ink-soft)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin:0}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
h1{font:var(--pub-font-display-weight) clamp(28px,1.6vw + 18px,32px)/1.15 var(--display);letter-spacing:-.015em;margin:14px 0 0}
/* Native controls keep this static, read-only library usable with a keyboard. */
.library{padding-block:28px 40px}
.library-heading h1{margin:0 0 20px;font-size:32px}
.library-controls{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.65fr);gap:12px;align-items:end}
.library-controls label{display:grid;gap:4px;min-width:0;font-size:13px;color:var(--ink-soft)}
.library-controls input,.library-controls select{width:100%;min-width:0;min-height:44px;border:1px solid var(--rule);border-radius:var(--pub-radius-input);background:var(--card);color:var(--ink);padding:10px 12px;font:400 16px/1.4 var(--sans)}
.library-controls input::placeholder{color:var(--ink-faint)}
.library-controls input:hover,.library-controls select:hover{border-color:var(--ink-soft)}
.library-status{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:14px;color:var(--ink-soft)}
.library-status p{margin:0;font-variant-numeric:tabular-nums}
.library-status button,.none button{min-height:44px;font:inherit;border:0;background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 0}
.library-status button:hover,.none button:hover{color:var(--gold)}
.guide-list{list-style:none;padding:0;margin:0;display:block}
.guide-list li{min-width:0;padding-block:16px;border-top:1px solid var(--rule)}
.guide-list h2{margin:0;font:var(--pub-font-display-weight) 21px/1.3 var(--display);overflow-wrap:anywhere}
.guide-list a{display:block;padding-block:4px;text-decoration:none}
.guide-list a:hover{text-decoration:underline;text-underline-offset:3px}
.guide-list p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);overflow-wrap:anywhere}
.none{border-top:1px solid var(--rule);padding-block:24px;color:var(--ink-soft)}
.none h2{font:var(--pub-font-display-weight) 24px/1.3 var(--display);color:var(--ink);margin:0}
.none p{margin:8px 0}
footer{padding-block:28px 40px;color:var(--ink-faint);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:0 18px}
footer nav a{display:inline-flex;align-items:center;min-height:44px}
:focus-visible{outline:2px solid var(--pub-blue);outline-offset:2px}
@media(max-width:720px){.library-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.library-controls .search{grid-column:1/-1}}
/* Phone, tablet and narrow desktop: logo and the button on row one; the links on a second row that scrolls
   sideways. With the theme button shown, one row needs about 1100px (measured), so the switch is at 1180. */
@media(max-width:1180px){
  header.site .wrap{flex-wrap:wrap;row-gap:0}
  header.site .brand{order:1}
  header.site .start{order:2;margin-left:auto}
  header.site nav{order:3;flex:0 0 100%;overflow-x:auto;gap:0 18px;padding-inline:2px;scrollbar-width:thin}
  header.site nav a.signin{order:-1;margin-left:0}
  header.site nav .theme-toggle{flex:none}
  header.site nav :focus-visible{outline-offset:-2px}
}
@media(max-width:520px){.logo{max-width:180px}.library{padding-top:20px}.start{padding-inline:16px}}

[hidden]{display:none!important}
.skip{position:absolute;inset-inline-start:16px;top:-100px;background:var(--card);padding:12px;z-index:10}.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.brand{display:inline-flex;align-items:center;min-height:44px;color:var(--navy)}
.method-page{padding-block:40px 64px}.method-page h1{margin-bottom:24px}.method-page h2{font:var(--pub-font-display-weight) 24px/1.3 var(--display);margin-top:32px}.method-page p{max-width:70ch}

h1,h2{font-variation-settings:var(--pub-font-display-settings)}

/* Same explicit public motion choice as the routed shell. */
.motion-control{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.motion-control[hidden]{display:none}