/* Mobbin-inspired gallery refresh. Existing routes, data and interaction hooks stay intact. */
/* Shared selection plates move independently of text and button press feedback. */
.library-nav.nav-motion-ready,.view-nav.nav-motion-ready {position:relative;isolation:isolate}
.nav-indicator {position:absolute;pointer-events:none;z-index:0;border-radius:999px;background:var(--surface);opacity:0;transform-origin:0 0}
.library-nav>.nav-indicator {background:var(--ink)}
.nav-motion-ready>button {position:relative;z-index:1}
.library-nav.nav-motion-ready button.active,.masthead.is-scrolled .library-nav.nav-motion-ready button.active,.view-nav.nav-motion-ready .nav-item.active {background:transparent}
.view-nav.nav-motion-ready .inspiration-toggle.active {color:var(--ink)}
.masthead .library-nav button,.masthead .view-nav button {transition:background 160ms ease,color 160ms ease,transform 140ms var(--ease)}
.masthead .library-nav button:active:not(:focus-visible),.masthead .view-nav button:active:not(:focus-visible) {transform:scale(.98);transition-duration:100ms}
.masthead .library-nav button:focus-visible,.masthead .view-nav button:focus-visible {transition:none}
@media(prefers-reduced-motion:reduce) {
  .masthead .library-nav button:active,.masthead .view-nav button:active {transform:none}
}
:root {
  --paper:#fff;
  --filing-height:32px;
  --filing-offset:calc(var(--filing-height) + env(safe-area-inset-bottom, 0px));
  --ink:#181818;
  --muted:#737373;
  --line:#e9e9e9;
  --surface:#f5f5f5;
  --surface-hover:#ededed;
  --preview-mat:#f4f4f4;
  --preview-mat-hover:#efefef;
  --preview-border:#e8e8e8;
  --preview-skeleton:#f0f0f0;
  --nav-surface:rgb(255 255 255 / .88);
  --on-ink:#fff;
  color:var(--ink);
  color-scheme:light;
}
html {scroll-padding-top:88px;scroll-padding-bottom:calc(var(--filing-offset) + 16px)}
body {padding-bottom:var(--filing-offset)}
.app-shell,.masthead-inner {max-width:1680px;padding-inline:48px}
.masthead,.masthead.is-scrolled {
  height:72px;min-height:0;margin:0;padding:0;gap:40px;
  border-bottom:1px solid var(--line);
}
.masthead.is-scrolled {height:64px;margin-bottom:8px}
.masthead-inner {display:flex;gap:40px;flex-wrap:nowrap}
.masthead::before {
  opacity:1;visibility:visible;background:var(--paper);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.masthead.is-scrolled::before {
  background:var(--nav-surface);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.brand {gap:8px;flex:none}
.brand-wordmark {display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.brand-english {display:flex;align-self:stretch;justify-content:space-between;font-size:9px;line-height:1.1;font-weight:500;letter-spacing:0;text-transform:uppercase;color:var(--muted)}
.brand-avatar,.masthead.is-scrolled .brand-avatar {width:30px;height:30px;border-radius:8px}
.brand-name,.masthead.is-scrolled .brand-name {font-size:20px;line-height:1.2;font-weight:650;letter-spacing:-.5px}
.library-nav {gap:5px;margin:0}
.library-nav button,.masthead.is-scrolled .library-nav button {
  padding:9px 17px;border:0;border-radius:999px;font-size:14px;
  font-weight:550;line-height:20px;color:var(--muted);
  transition:background 160ms ease,color 160ms ease;
}
.library-nav button:hover {color:var(--ink);background:var(--surface)}
.library-nav button.active,.masthead.is-scrolled .library-nav button.active {background:var(--ink);color:var(--on-ink)}
.view-nav {gap:8px}
.nav-item {font-size:13px;font-weight:500;padding:9px 14px;min-height:38px}
.nav-item.active {background:var(--surface);color:var(--ink)}
.nav-item:not(.active):hover {background:var(--surface)}
.nav-item span {font-family:Geist,sans-serif;font-size:11px;opacity:1;color:var(--muted);letter-spacing:0}
.discovery-heading {text-align:center;padding:40px 0 24px}
.discovery-heading h1 {font-size:36px;line-height:1.3;font-weight:650;letter-spacing:-1.25px;margin:0}
.discovery-heading p {margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.discovery {padding:0 0 24px;border-bottom:1px solid var(--line)}
.toolbar {display:flex;justify-content:center}
.search-shell {position:relative;flex:0 1 720px;min-width:0}
.search {
  width:100%;gap:12px;height:56px;padding:0 16px 0 20px;border:1px solid var(--line);
  background:var(--surface);border-radius:16px;
  transition:background 160ms ease,border-color 160ms ease,box-shadow 160ms ease;
}
.search:hover {background:var(--surface-hover)}
.search:focus-within {background:var(--paper);border-color:var(--ink);box-shadow:none}
.search input:focus-visible {outline:none}
.search>svg {width:21px;height:21px;stroke-width:1.7;color:var(--muted)}
.search input,.search input::placeholder {font-size:15px;line-height:24px;letter-spacing:0}
.search input::placeholder {color:#6b6b6b}
.search input {caret-color:var(--ink)}
.search input::-webkit-search-cancel-button {display:none}
.search kbd {background:var(--paper);border:1px solid var(--line);color:var(--muted);font-size:11px;min-width:24px;text-align:center;border-radius:5px}
.search-clear {display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;color:var(--muted)}
.search-clear:hover {background:var(--surface-hover);color:var(--ink)}
.search-clear svg,.search-discovery svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.search-clear:not([hidden])+kbd {display:none}
.search-discovery {position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:45;display:grid;grid-template-columns:190px minmax(0,1fr);padding:12px;background:var(--paper);border-radius:16px;box-shadow:0 8px 36px #0000001f;animation:search-discovery-in 160ms ease-out}
.search-discovery h2 {font-size:12px;font-weight:500;color:var(--muted);line-height:20px;margin:4px 12px 10px}
.search-categories {padding:4px 12px 4px 0;border-right:1px solid var(--line)}
.search-categories button {display:flex;align-items:center;gap:10px;width:100%;padding:12px;border-radius:9px;text-align:left;font-size:13px;line-height:20px}
.search-discovery button:hover {background:var(--surface-hover)}
.search-discovery button:focus-visible {outline:2px solid var(--ink);outline-offset:-2px}
.search-ideas {padding:4px 4px 4px 16px;min-width:0}
.search-sites {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 8px 24px}
.search-sites button {padding:14px 5px;border-radius:9px;background:var(--surface);font-size:13px;font-weight:550;min-width:0}
.search-examples {display:flex;gap:8px;margin:0 8px}
.search-examples button {display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;min-height:44px;padding:10px 12px;border-radius:9px;background:var(--surface);font-size:12px}
.search-examples svg {width:15px;height:15px;color:var(--muted)}
.search-help {grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding:12px 12px 0;margin-top:10px;font-size:11px;color:var(--muted)}
.search-help kbd {font:inherit;border:1px solid var(--line);border-radius:4px;padding:2px 4px;margin-right:4px}
@keyframes search-discovery-in {from {opacity:0;transform:translateY(-4px)}to {opacity:1;transform:translateY(0)}}
.search-insights {max-width:720px;margin:16px auto 0;text-align:center}
.search-scope {position:relative;flex:none;border-right:1px solid var(--line);padding-right:12px;margin-left:-8px}
.search-scope summary {display:flex;align-items:center;gap:12px;min-height:44px;padding:0 8px;list-style:none;font-size:14px;font-weight:550;cursor:pointer;border-radius:8px}
.search-scope summary::-webkit-details-marker {display:none}
.search-scope summary:hover {background:transparent}
.search-scope summary:focus-visible,.search-scopes button:focus-visible {outline:2px solid var(--ink);outline-offset:-2px}
.search-scope summary svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform 160ms ease,opacity 160ms ease}
.search-scope summary:hover svg,.search-scope summary:focus-visible svg {opacity:1}
.search-scope[open] summary svg {transform:rotate(180deg)}
.search-scopes {position:absolute;z-index:50;top:calc(100% + 12px);left:-4px;width:184px;display:grid;gap:2px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px #00000012}
.search-scopes button {display:flex;align-items:center;gap:8px;width:100%;border:0;border-radius:7px;padding:0 12px;font-size:13px;min-height:44px;text-align:left}
.search-scopes button:hover {background:var(--surface)}
.search-scopes button[aria-pressed=true] {background:var(--surface);font-weight:600}
.search-scopes button::after {content:"";width:12px;height:12px;flex:none}
.search-scopes button[aria-pressed=true]::after {content:"✓";font-size:13px;line-height:12px}
.search-scopes span {margin-left:auto;font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--muted)}
.all-search-results .filter-line,.all-search-results .mobile-filters {display:none}
.all-search-results .brand-logo {display:none}
.search-result-kind {flex:none;font-size:10px;line-height:20px;padding:0 6px;border:1px solid var(--line);border-radius:4px;color:var(--muted)}
#searchMessage {font-size:12px;line-height:1.7;color:var(--muted);margin:10px 0 0;overflow-wrap:anywhere}
.search-retry {font-size:12px;color:var(--accent);padding:8px;text-decoration:underline;text-underline-offset:3px}
.search-suggestions {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:12px;color:var(--muted)}
.search-suggestions button {padding:6px 10px;background:var(--surface);color:var(--ink);border-radius:8px}
.filter-line {gap:24px;margin-top:28px;min-width:0}
.tag-options {
  --tag-fade-start:0px;--tag-fade-end:0px;
  flex:1;min-width:0;display:flex;flex-wrap:nowrap;gap:8px;
  overflow-x:auto;overscroll-behavior-x:contain;padding:4px 3px;margin-inline:-3px;
  scroll-padding-inline:36px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--tag-fade-start),#000 calc(100% - var(--tag-fade-end)),transparent);
  mask-image:linear-gradient(to right,transparent,#000 var(--tag-fade-start),#000 calc(100% - var(--tag-fade-end)),transparent);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.tag-options.can-scroll-start {--tag-fade-start:36px}
.tag-options.can-scroll-end {--tag-fade-end:48px}
.tag-options button {
  flex:none;padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  font-size:12px;line-height:18px;color:var(--ink);background:var(--paper);
}
.tag-options button:hover {background:var(--surface);border-color:#d4d4d4}
.tag-options button.active {background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.tag-options button:focus-visible {outline-offset:-3px}
.tag-count {font-size:10px;margin-left:4px;opacity:.6;font-variant-numeric:tabular-nums}
.theme-control {background:var(--surface);padding:4px;gap:2px}
.theme-control button {padding:8px 11px;font-size:11px;color:var(--muted)}
.theme-control button.selected {background:var(--paper);color:var(--ink);box-shadow:0 1px 4px #0000000c}
.component-filters {margin:0;flex:none;gap:8px;font-size:12px}
.component-select {position:relative;display:flex;flex:none}
.component-select>svg {position:absolute;right:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.component-filters select {appearance:none;-webkit-appearance:none;width:150px;min-height:38px;border:1px solid var(--line);border-radius:999px;padding:8px 38px 8px 14px;background:var(--paper);font-size:12px;cursor:pointer}
.gallery-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:26px 0 20px;min-height:26px}
.gallery-heading h2 {font-size:18px;line-height:26px;letter-spacing:-.3px;font-weight:600;margin:0}
.gallery-heading .results-line,.components-library .gallery-heading .results-line {min-height:0;margin:0;font-size:12px}
.results-line button {padding:5px 0;color:var(--muted)}
.results-line button:hover {color:var(--ink)}
.gallery-heading .results-line {margin-left:auto;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.gallery-heading .results-line:has(#gallerySort) {display:flex}
.gallery-sort {display:flex;align-items:center;gap:12px}
.gallery-sort button {min-height:34px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--paper);white-space:nowrap}
.gallery-sort button:hover {background:var(--surface)}
.gallery-sort button.is-active {background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.gallery-sort #defaultSort {padding-inline:0;border-color:transparent;background:transparent;color:var(--muted)}
@media(max-width:600px){.gallery-heading{flex-wrap:wrap;gap:8px}.gallery-sort button{min-height:44px}.gallery-heading .results-line{gap:8px}.gallery-sort{gap:8px}}
.motion-intro {margin:-8px 0 20px;font-size:12px;line-height:1.7;color:var(--muted)}
.grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;margin-top:0}
.card>.preview,.card:not(.motion-card):not(.component-card)>.preview,
.motion-card>.motion-card-preview,.component-card>.component-preview {padding:0;aspect-ratio:1.6;border-radius:12px;background:transparent}
.preview-frame {aspect-ratio:1.6;border-radius:12px;border:1px solid var(--preview-border)}
.card>.preview:hover,.card>.preview:focus-visible {background:transparent}
.preview .preview-label {background:rgb(255 255 255 / .96);color:#181818;font-weight:550;font-size:11px;padding:8px 12px;gap:8px}
.card-info {gap:10px;margin-top:12px;min-height:40px;align-items:center}
.brand-logo {width:36px;height:36px;flex-basis:36px;border-radius:9px;background:var(--surface);border-color:var(--line)}
.card-title {font-size:14px;line-height:1.45;letter-spacing:-.15px;font-weight:600}
.card-title button {display:block;white-space:nowrap;max-height:none;text-overflow:ellipsis;overflow:hidden}
.card-description,.card-domain {font-size:12px;line-height:1.5;margin:3px 0 0;color:var(--muted)}
.card-info>.favorite {color:#8b8b8b;width:34px;height:36px;border-radius:50%}
.favorite:hover {background:var(--surface);color:var(--ink);transform:none}
.favorite svg {width:16px;height:18px}
.component-placeholder {background:var(--surface)}
.component-placeholder-caption {color:var(--muted)}
.load-more p {font-family:Geist,sans-serif;color:var(--muted);font-size:12px}
.empty h2 {font-weight:600}
.empty p,.empty-symbol {color:var(--muted)}
.primary {border-radius:999px;background:var(--ink);color:var(--on-ink)}
.primary:hover {background:#363636}
.secondary {border-radius:999px;background:var(--surface);border-color:var(--line);color:var(--ink)}
.secondary:hover {background:var(--surface-hover)}
dialog {background:var(--paper);color:var(--ink);border-radius:20px;border:1px solid var(--line);box-shadow:0 24px 100px #0002}
/* Keep the modal scrim uniform over composited videos and 3D shelf layers. */
dialog::backdrop {background:#0008;backdrop-filter:none;-webkit-backdrop-filter:none}
.detail-content {background:var(--paper)}
.detail-content h2,.component-detail-heading h2 {font-weight:600;letter-spacing:-.8px}
.quiet,.detail-content #detailDesc,.spec-label,.component-access p,.component-code-feedback,
#motionDescription,.prompt-note,.motion-rights,.motion-sources {color:var(--muted)}
.close {background:var(--surface);color:var(--ink)}
.close:hover {background:var(--surface-hover)}
.detail-top .pill,.detail-tags .tag {background:var(--surface);color:var(--muted)}
.detail-specs,.detail-actions,.motion-prompt {border-color:var(--line)}
.detail-actions {background:var(--nav-surface)}
.detail-actions>button.secondary {color:var(--ink)}
.component-access {background:var(--surface);border-color:var(--line);border-radius:16px}
.component-code-toolbar select {background:var(--paper);border-color:var(--line);border-radius:10px;color:var(--ink)}
pre,.component-code-panel pre {background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:12px}
.back-to-top {position:fixed;right:max(24px,env(safe-area-inset-right));bottom:calc(var(--filing-offset) + 20px);z-index:35;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--on-ink);box-shadow:0 4px 16px #00000018;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity 180ms ease,transform 180ms ease,visibility 180ms ease}
.back-to-top.is-visible {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.back-to-top svg {width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform 160ms ease}
.back-to-top:focus-visible {outline:2px solid var(--ink);outline-offset:4px}
.back-to-top:active {transform:scale(.94)}
.dialog-open .back-to-top {visibility:hidden;opacity:0;pointer-events:none}
@media(hover:hover) {.back-to-top:hover svg {transform:translateY(-2px)}}

@media(min-width:1440px) {.grid {grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1180px) {
  .app-shell,.masthead-inner {padding-inline:32px}
  .masthead-inner {gap:28px}
  .grid {gap:30px 20px}
}
@media(max-width:900px) {
  .grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .masthead-inner {gap:18px}
  .library-nav button,.masthead.is-scrolled .library-nav button {padding-inline:14px}
  .filter-line {gap:14px}
}
@media(max-width:600px) {
  html {scroll-padding-top:112px}
  .app-shell,.masthead-inner {padding-inline:20px}
  .masthead,.masthead.is-scrolled {height:108px;padding:12px 0 9px;min-height:0;gap:0}
  .masthead.is-scrolled {height:100px;margin-bottom:8px;padding-top:8px;padding-bottom:5px}
  .masthead-inner {flex-wrap:wrap;align-content:space-between;gap:8px 16px}
  .brand {flex:1}
  .brand-avatar,.masthead.is-scrolled .brand-avatar {width:28px;height:28px}
  .brand-name,.masthead.is-scrolled .brand-name {font-size:18px}
  .view-nav {gap:3px}
  .nav-item {padding:7px 10px;min-height:34px;font-size:12px;gap:5px}
  .library-nav {order:3;width:100%;justify-content:center;gap:5px}
  .library-nav button,.masthead.is-scrolled .library-nav button {padding:7px 24px;font-size:13px;line-height:20px}
  .discovery-heading {padding:28px 0 20px}
  .discovery-heading h1 {font-size:28px;letter-spacing:-.8px}
  .discovery-heading p {font-size:12px;line-height:1.7;margin-top:9px;max-width:290px;margin-inline:auto}
  .search {height:50px;gap:10px;padding-inline:16px}
  .search input,.search input::placeholder {font-size:16px}
  .search kbd {display:none}
  .search>svg {display:none}
  .search-scope {padding-right:8px;margin-left:-10px}
  .search-scope summary {gap:8px}
  .search-clear {width:44px;height:44px;margin-right:-12px}
  .search-discovery {grid-template-columns:1fr;max-height:min(480px,calc(100dvh - 210px));overflow-y:auto;overscroll-behavior:contain;padding:12px}
  .search-categories {display:grid;grid-template-columns:1fr 1fr;border:0;border-bottom:1px solid var(--line);padding:0 0 10px}
  .search-categories h2 {grid-column:1/-1}
  .search-categories button {padding:10px 8px;font-size:12px;gap:8px}
  .search-ideas {padding:12px 0 0}
  .search-sites {gap:6px;margin:0 4px 18px}
  .search-sites button {font-size:12px;min-height:44px;padding-inline:2px}
  .search-examples {margin-inline:4px}
  .search-help {padding-inline:4px}
  .search-help>span:last-child {display:none}
  .back-to-top {right:max(16px,env(safe-area-inset-right));bottom:calc(var(--filing-offset) + 16px);width:44px;height:44px}
  .filter-line {flex-wrap:wrap;margin-top:20px;gap:12px}
  .tag-options {flex-basis:100%;gap:7px}
  .tag-options button {font-size:12px;padding:8px 13px}
  .theme-control {display:flex;width:max-content;margin-left:auto}
  .component-filters {margin:0;margin-left:auto}
  .component-filters select {width:150px}
  .discovery {padding-bottom:16px}
  .gallery-heading {margin:20px 0 16px}
  .gallery-heading h2 {font-size:17px}
  .grid {grid-template-columns:minmax(0,1fr);gap:26px}
  .card-info {margin-top:11px;gap:10px}
  .card-title {font-size:15px}
  .brand-logo {width:36px;height:36px;flex-basis:36px}
  .card-info>.favorite {width:38px;height:40px}
  .card-description,.card-domain {font-size:12px}
  .motion-intro {font-size:11px;margin-bottom:18px}
  dialog {border-radius:16px}
}
@media(prefers-color-scheme:dark) {
  :root:where(:not([data-site-theme])) {
    --paper:#151515;--ink:#f2f2f2;--muted:#a0a0a0;--line:#333;
    --surface:#232323;--surface-hover:#2c2c2c;--preview-mat:#202020;
    --preview-mat-hover:#252525;--preview-border:#333;--preview-skeleton:#292929;
    --nav-surface:rgb(21 21 21 / .88);--on-ink:#181818;color-scheme:dark;
  }
  :where(:root:not([data-site-theme])) .primary:hover {background:#d7d7d7}
  :where(:root:not([data-site-theme])) .search input::placeholder {color:#aaa}
  :where(:root:not([data-site-theme])) .tag-options button:hover {border-color:#666}
  :where(:root:not([data-site-theme])) .component-placeholder::after,:where(:root:not([data-site-theme])) .image-skeleton::after,:where(:root:not([data-site-theme])) .skeleton-line::after {background:linear-gradient(110deg,transparent 20%,#ffffff16 48%,transparent 75%)}
  :where(:root:not([data-site-theme])) .detail-stage {background:#202020}
  :where(:root:not([data-site-theme])) .detail-actions>button,:where(:root:not([data-site-theme])) .detail-actions>a:not(.primary):not(.secondary),:where(:root:not([data-site-theme])) #mdDetails>summary {color:var(--muted)}
  :where(:root:not([data-site-theme])) .md-type {background:var(--surface);color:var(--muted)}
}
:root:where([data-site-theme="dark"]) {
    --paper:#151515;--ink:#f2f2f2;--muted:#a0a0a0;--line:#333;
    --surface:#232323;--surface-hover:#2c2c2c;--preview-mat:#202020;
    --preview-mat-hover:#252525;--preview-border:#333;--preview-skeleton:#292929;
    --nav-surface:rgb(21 21 21 / .88);--on-ink:#181818;color-scheme:dark;
  }
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .masthead.is-scrolled::before {background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce) {
  .library-nav button,.search,.back-to-top,.back-to-top svg {transition:none}
  .search-discovery {animation:none}
}

/* Keep filing information accessible throughout the long, growing galleries. */
.site-footer {position:fixed;inset:auto 0 0;z-index:30;display:flex;align-items:center;justify-content:center;height:var(--filing-offset);padding:0 max(16px,env(safe-area-inset-right)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left));border-top:1px solid var(--line);background:var(--paper);color:var(--muted);font-size:11px;line-height:16px;text-align:center}
.site-footer a {display:inline-flex;align-items:center;justify-content:center;min-height:31px;padding-inline:8px;color:inherit;text-decoration:none;text-underline-offset:3px;white-space:nowrap}
.site-footer a:hover {color:var(--ink);text-decoration:underline}
.site-footer a:focus-visible {outline:2px solid var(--accent,#335cff);outline-offset:-3px;border-radius:3px}
#toast {bottom:calc(var(--filing-offset) + 16px)}

.masthead-inner > .account-nav { margin-left:auto; }
.library-nav { flex-shrink:0; }
.library-nav button, .library-nav .library-link { white-space:nowrap; }
.card-info>.favorite.has-count {display:inline-flex;align-items:center;justify-content:center;gap:4px;width:auto;min-width:44px;padding:6px;border-radius:9px;flex:none}
.favorite-count {font-size:11px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.favorite.has-count svg {flex:none}
@media(max-width:600px){
  .masthead,.masthead.is-scrolled {height:112px;min-height:112px}
  .masthead-inner {display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:8px 16px;padding:12px 20px}
  .brand {grid-area:1/1}.account-nav {grid-area:1/2}
  .library-nav {grid-area:2/1/3/3;justify-content:space-between}
}