/* Layout around Mobbin's navigation (topbar.js, 2026-09-27). The bars' own look is Mobbin's inline values
   (mobbin-chrome/styles.json); this file only places them, hides the old sidebar, runs Mobbin's scroll swap
   (0.2s out, then 0.2s in, 5px drop) and gives the dark theme its colours for the inline parts. */
:root{--tb-nav-h:72px;--tb-slot-h:64px;--tb-pad:32px}
:root.tb-stacked{--tb-nav-h:112px;--tb-slot-h:52px;--tb-pad:20px}

#gallery-sidebar,.sidebar-picker,.filter-rail,#filter-flyout,body.no-sidebar #gallery-sidebar,body.no-sidebar .sidebar-picker,body.no-sidebar .filter-rail,body.no-sidebar #filter-flyout,body.no-sidebar .toolbar,body.no-sidebar #filter-panel,body.no-sidebar .gallery-search,body.no-sidebar #standalone-dock{display:none!important}
body.no-sidebar main#content{margin-left:0!important;padding:24px var(--tb-pad) 120px!important;max-width:none!important}
body.no-sidebar{--sidebar-width:0px}
body.no-sidebar .page-heading .count{display:none}

.tb-nav{position:sticky!important;top:0;z-index:60;height:var(--tb-nav-h)}
.tb-slot{position:sticky;top:0;z-index:50;height:var(--tb-slot-h);background:#fff}
/* at the top the row keeps its own height (no jump in the page below); its background runs down to the nav bar's height */
.tb-slot[data-at-top="true"]:not(.tb-float)::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(var(--tb-nav-h) - var(--tb-slot-h));background:inherit;pointer-events:none}
.tb-slot[hidden]{display:none}
.tb-slot-content{display:flex!important;align-items:center;justify-content:space-between;gap:16px}
.tb-slot-left::-webkit-scrollbar{display:none}
.tb-slot-left{margin-right:0!important}
.tb-nav-right svg{width:20px;height:20px}
:root[data-theme=dark] img[data-logo-underlay]{filter:url(#tobira-logo-underlay)!important}
.tb-menu[hidden]{display:none!important}
.tb-palette::backdrop{background:rgba(255,255,255,.01);backdrop-filter:blur(4px)}
.tb-palette:not([open]){display:none!important}
.tb-palette a,.tb-slot a,.tb-nav a{text-decoration:none}
.tb-palette input::placeholder{color:rgb(173,173,173)}
.tb-palette [data-psec]:last-child{margin-bottom:0!important}
.tb-menu [data-value]:hover,.tb-menu [data-value]:focus-visible{background:rgba(64,64,64,.06);border-radius:12px;outline:none}
.tb-search-button:focus-visible,.tb-slot button:focus-visible,.tb-palette button:focus-visible,.tb-palette a:focus-visible{outline:2px solid rgb(20,20,20);outline-offset:2px}
.tb-palette button:focus-visible,.tb-palette a:focus-visible{outline-color:#fff}

/* Search uses the same white surface as the filter panel in light mode. */
:root:not([data-theme=dark]) .tb-palette [data-part="paletteGrid"]{background:rgba(255,255,255,.96)!important;color:#141414!important;box-shadow:0 16px 56px rgba(0,0,0,.14)!important}
:root:not([data-theme=dark]) .tb-palette :is([data-part="paletteInput"],[data-part="paletteNavLabel"],[data-part="trendingName"],.tb-card,.tb-chip,.tb-row,.tb-row-text b){color:#141414!important}
:root:not([data-theme=dark]) .tb-palette :is([data-part="sectionLabel"],.tb-rows-label,.tb-row-text small){color:#707070!important}
:root:not([data-theme=dark]) .tb-palette input::placeholder{color:#858585}
:root:not([data-theme=dark]) .tb-palette :is(.tb-card,.tb-chip,.tb-row-icon-muted){background:rgba(20,20,20,.05)!important}
:root:not([data-theme=dark]) .tb-palette :is([data-pnav],.tb-kind,.tb-row-icon-muted){color:#707070!important}
:root:not([data-theme=dark]) .tb-palette :is([data-pnav][aria-current],.tb-row.is-on,.tb-chip:hover,.tb-card:hover){background:rgba(20,20,20,.07)!important}
:root:not([data-theme=dark]) .tb-palette .tb-kind[aria-checked=true]{color:#141414!important}
:root:not([data-theme=dark]) .tb-palette :is(.tb-chip,.tb-card)[aria-pressed=true]{background:#e3e3e3!important;box-shadow:none!important}
:root:not([data-theme=dark]) .tb-palette :is(button,a,[role=button]):focus-visible{outline:2px solid #141414!important;outline-offset:2px}
.tb-palette [role=button]:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tb-palette [data-part="paletteGrid"]{grid-template-columns:minmax(0,1fr)!important}
@media(max-width:839px){
  .tb-palette [data-part="paletteGrid"]{display:flex!important;flex-direction:column!important;overflow:hidden}
  .tb-palette [data-part="paletteHead"]{flex-shrink:0!important}
  .tb-palette [data-part="paletteInputWrap"]{min-width:0;padding-left:20px!important}
  .tb-palette [data-part="paletteBody"]{flex:1 1 auto!important;flex-direction:column!important;padding-left:0!important;overflow:hidden}
  .tb-palette [data-part="paletteAside"]{width:100%!important;height:auto!important;padding:0 12px 8px!important;overflow-x:auto}
  .tb-palette [data-part="paletteNav"]{flex-direction:row!important;width:max-content}
  .tb-palette [data-pnav]{flex-shrink:0;white-space:nowrap}
  .tb-palette [data-part="paletteMain"]{width:100%!important;height:auto!important;min-height:0}
  .tb-palette [data-part="paletteScroll"]{height:100%!important}
  .tb-palette [data-part="cardGrid"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important}
}

/* Mobbin's list top: big Categories / Sections / Styles, 32px under the nav, 80px above the tabs row; cards 8px under it */
.tb-index{padding:32px var(--tb-pad) 0;margin-bottom:80px}
.tb-index[hidden]{display:none}
.tb-index a,.tb-index button{text-decoration:none;color:inherit}
.tb-index a:hover,.tb-index button:hover{color:rgb(112,112,112)!important}
.tb-index a:focus-visible,.tb-index button:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
body.no-sidebar[data-list=websites] #content .page-heading,body.no-sidebar[data-index=on] #content .page-heading{display:none}
body.no-sidebar[data-index=on] main#content,body.no-sidebar[data-list=websites] main#content:has(.gallery-grid){padding-top:8px!important}
@media(max-width:839px){.tb-index{margin-bottom:40px}.tb-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:24px}}

/* the swap (Mobbin): scrolling down past the row hands the top to the page's own row (filters, sort); scrolling up
   brings the global bar back over it. The one going out fades and drops 5px in 0.2s, then the other comes in 0.2s.
   !important: the bars carry Mobbin's inline values (z-index 10, opacity 1), which would otherwise win. */
.tb-nav{z-index:60!important;transition:background-color .2s linear}
.tb-slot{z-index:50!important}
.tb-nav-content,.tb-slot-content{transition:opacity .2s linear,transform .2s linear!important}
body[data-navbar-state="hidden"] .tb-nav{background-color:transparent!important;pointer-events:none}
body[data-navbar-state="hidden"] .tb-nav-content{opacity:0!important;transform:translateY(5px)!important}
body[data-navbar-state="visible"] .tb-nav-content{opacity:1!important;transform:none!important;transition-delay:.2s!important}
.tb-slot[data-at-top="true"] .tb-slot-content{opacity:0!important;transform:translateY(5px)!important;pointer-events:none}
body[data-navbar-state="hidden"] .tb-slot[data-at-top="true"] .tb-slot-content{opacity:1!important;transform:none!important;pointer-events:auto;transition-delay:.2s!important}
/* Scrolled down, the nav (and its search bar) gives way to this row; the row carries its own copy of the search bar
   so searching is one click away the whole time (2026-10-01). Only while the row holds the top.
   The search fills the remaining space between the filters and the count/sort controls. */
.tb-slot-search{display:none;flex:1 1 0;min-width:160px}
.tb-slot-search .tb-search-button{max-width:none!important}
body[data-navbar-state="hidden"] .tb-slot[data-at-top="true"] .tb-slot-search{display:block}
body[data-navbar-state="hidden"] .tb-slot[data-at-top="true"]:not([data-search-compact="true"]) .tb-slot-left{padding-right:0!important}
.tb-slot-right{flex-shrink:0!important}
/* The row's last button (ページ内の言葉で絞り込む) stays whole at the row's end: the pills slide under it when they need
   more room, and the fade sits just before it (2026-10-02). */
.tb-slot-left .tb-words{position:sticky;right:0;z-index:1;background:var(--tb-slot-bg,#fff)}
body[data-navbar-state="hidden"] .tb-slot[data-at-top="true"] .tb-slot-left:has([data-part="pillRow"]){-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--filter-fade-left,0px),#000 calc(100% - 36px - var(--filter-fade-right,0px)),transparent calc(100% - 36px),#000 calc(100% - 36px));mask-image:linear-gradient(90deg,transparent,#000 var(--filter-fade-left,0px),#000 calc(100% - 36px - var(--filter-fade-right,0px)),transparent calc(100% - 36px),#000 calc(100% - 36px))}
.tb-slot[data-search-compact="true"] .tb-slot-content{display:grid!important;grid-template-columns:minmax(0,1fr) 48px auto}
.tb-slot[data-search-compact="true"] .tb-slot-search{flex:none;min-width:0;width:48px;margin:0}
.tb-slot[data-search-compact="true"] .tb-slot-left{max-width:100%}
.tb-slot[data-search-compact="true"] .tb-slot-right{grid-column:3}
.tb-slot[data-search-compact="true"]:not([data-at-top="true"]) .tb-slot-content,body[data-navbar-state="visible"] .tb-slot[data-search-compact="true"] .tb-slot-content{grid-template-columns:minmax(0,1fr) auto}
.tb-slot[data-search-compact="true"]:not([data-at-top="true"]) .tb-slot-right,body[data-navbar-state="visible"] .tb-slot[data-search-compact="true"] .tb-slot-right{grid-column:2}
.tb-slot[data-search-compact="true"] .tb-slot-search .tb-search-text{display:none!important}
.tb-slot[data-search-compact="true"] .tb-slot-search .tb-search-button{width:48px!important;padding:0!important;justify-content:center!important;gap:0!important}
.tb-slot[data-search-compact="true"] .tb-slot-search .tb-search-button svg{margin:0!important}
@media(prefers-reduced-motion:reduce){.tb-nav-content,.tb-slot-content{transform:none!important}}

/* pages that used to sit beside the sidebar in a fixed panel now sit under the bars */
/* Settings and Tools are plain pages under the bars, like Mobbin's settings (no floating white panel) */
body.no-sidebar.account-mode .reference-workspace:not(:has(.reference-nav))>.reference-screen{left:0!important;right:0!important;top:calc(var(--tb-nav-h) + var(--tb-slot-h))!important;bottom:0!important;width:100vw!important;height:calc(100dvh - var(--tb-nav-h) - var(--tb-slot-h))!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
body.no-sidebar.account-mode iframe.reference-screen{background:#fff!important}
body.no-sidebar .tool-app{padding:8px var(--tb-pad) 32px!important}

/* Mobbin's three columns now that the list uses the full width */
body.no-sidebar #content .gallery-grid{--cell-min:360px}
@media(min-width:1344px){body.no-sidebar #content .gallery-grid{--cell-min:394px}}
@media(max-width:903px){body.no-sidebar #content .gallery-grid{--cell-min:300px}}
@media(max-width:783px){body.no-sidebar #content .gallery-grid{--cell-gap:12px;row-gap:20px}}
@media(min-width:784px){body.no-sidebar #content .gallery-grid{--cell-gap:16px;row-gap:48px}}

/* Leave room for either language: logo row, then search on its own row. */
/* Two-row top bar: set by topbar.js (layoutNav) when one row no longer fits, not by a fixed breakpoint. */
.tb-stacked .tb-nav{height:auto!important}
.tb-stacked .tb-nav-content{grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;row-gap:8px!important;padding:10px 20px!important;height:auto!important}
.tb-stacked .tb-nav-content>div:nth-child(1){grid-column:1;grid-row:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tb-stacked .tb-nav-content>div:nth-child(3){grid-column:2;grid-row:1}
.tb-stacked .tb-nav-content>div:nth-child(2){grid-column:1/-1;grid-row:2}
.tb-stacked .tb-slot-content{padding:0 20px!important}
.tb-stacked .tb-tabs-compact a{font-size:14px!important}
/* Phone: logo and tabs take the whole first row; the search and the icons share the second. */
.tb-stacked-wide .tb-nav-content>div:nth-child(1){grid-column:1/-1;grid-row:1}
.tb-stacked-wide .tb-nav-content>div:nth-child(2){grid-column:1;grid-row:2}
.tb-stacked-wide .tb-nav-content>div:nth-child(3){grid-column:2;grid-row:2}
/* Still too narrow: the tab row scrolls, and its cut edge fades so the hidden tabs read as there. */
.tb-stacked .tb-nav-content>div.tb-tabs-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}

/* dark theme: the inline Mobbin colours are light-theme values */
:root[data-theme=dark] .tb-nav,:root[data-theme=dark] .tb-slot,:root[data-theme=dark] [data-part="slot"]{background-color:#0b0b0b!important}
/* Scrolled down, the nav must go transparent in the dark theme too, or its opaque band hides the filter row that swaps in beneath it (z 60 over z 50). */
:root[data-theme=dark] body[data-navbar-state="hidden"] .tb-nav{background-color:transparent!important}
:root[data-theme=dark] .tb-logo,:root[data-theme=dark] .tb-nav-right>*:not(.tb-plan-badge){color:rgb(237,237,237)!important}
:root[data-theme=dark] .tb-tabs a[style*="20, 20, 20"],:root[data-theme=dark] .tb-slot a[style*="20, 20, 20"],:root[data-theme=dark] [data-part="filterButton"],:root[data-theme=dark] [data-part="pill"]{color:rgb(237,237,237)!important;border-color:rgba(237,237,237,.16)!important}
:root[data-theme=dark] .tb-slot a[style*="20, 20, 20"]{border-bottom-color:rgb(237,237,237)!important}
:root[data-theme=dark] [data-part="searchButton"]{background-color:rgba(237,237,237,.08)!important;color:rgb(237,237,237)!important}
:root[data-theme=dark] [data-part="searchText"]{color:rgb(150,150,150)!important}
:root[data-theme=dark] [data-part="pillOn"]{background-color:rgb(237,237,237)!important;color:rgb(20,20,20)!important}
:root[data-theme=dark] .tb-menu{background-color:rgb(28,28,28)!important;color:rgb(237,237,237)!important}
:root[data-theme=dark] .tb-menu [data-part="menuLabel"]{color:rgb(237,237,237)!important}
:root[data-theme=dark] [data-part="pill"]{background-color:transparent!important}
:root[data-theme=dark] [data-part="pill"],:root[data-theme=dark] [data-part="filterLabel"]{color:rgb(237,237,237)!important}
/* Mobbin's icons are drawn in black; in the dark theme they are inverted to white */
:root[data-theme=dark] [data-part="pill"] svg,:root[data-theme=dark] [data-part="filterButton"] svg,:root[data-theme=dark] .tb-search-button svg{filter:invert(1)}
.tb-kind svg [stroke]:not([stroke="none"]){stroke:currentColor!important}
.tb-kind svg [fill]:not([fill="none"]){fill:currentColor!important}
.tb-kind:hover{color:rgb(255,255,255)!important}
.tb-nav-right>*:not(.tb-plan-badge):not(.tb-guest-landing):not(.tb-open-gallery){width:36px!important;height:36px!important;min-height:36px!important;padding:4px!important}

/* Each navigation icon responds once per hover; the hit areas stay still. */
.tb-tabs a{transition:color .18s ease}
.tb-nav-right :is(.view-switch,.tb-bell,.saved-entry,.account-entry){transition:color .18s ease}
.tb-nav-right .tb-bell>svg{transform-origin:50% 15%}
.tb-nav-right .saved-entry>svg{overflow:visible}
.tb-nav-right .saved-entry path{transform-box:fill-box;transform-origin:50% 0}
.tb-nav-right .account-entry>svg{transform-origin:50% 85%}
.tb-nav-right .view-switch>svg{transition:filter .28s ease}
.tb-nav-right .view-switch rect{fill:currentColor;fill-opacity:0;transition:fill-opacity .24s ease}
.tb-nav-right .view-switch rect:nth-child(2){transition-delay:35ms}
.tb-nav-right .view-switch rect:nth-child(3){transition-delay:70ms}
.tb-nav-right .view-switch rect:nth-child(4){transition-delay:105ms}
@media(hover:hover) and (pointer:fine){
 .tb-tabs a:hover{color:#141414!important}
 :root[data-theme=dark] .tb-tabs a:hover{color:#fff!important}
 .tb-nav-right .view-switch:hover>svg{filter:drop-shadow(0 0 3px currentColor)}
 .tb-nav-right .view-switch:hover rect{fill-opacity:.75}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .tb-nav-right .tb-bell:hover>svg{animation:tb-nav-bell .7s cubic-bezier(.37,0,.63,1)}
 .tb-nav-right .saved-entry:hover path{animation:tb-nav-bookmark-unfold .7s cubic-bezier(.22,1,.36,1) both}
 .tb-nav-right .saved-entry:hover path:first-child{animation-delay:55ms}
 .tb-nav-right .account-entry:hover>svg{animation:tb-nav-profile .5s cubic-bezier(.22,1,.36,1)}
 .tb-nav-right .account-entry:hover circle{animation:tb-nav-profile-nod .5s cubic-bezier(.22,1,.36,1)}
}
@keyframes tb-nav-bell{
 0%,100%{transform:rotate(0)}
 18%{transform:rotate(18deg)}
 36%{transform:rotate(-14deg)}
 54%{transform:rotate(9deg)}
 72%{transform:rotate(-5deg)}
 88%{transform:rotate(2deg)}
}
/* The top edges stay attached: each sheet unfolds down and settles in depth. */
@keyframes tb-nav-bookmark-unfold{
 0%{transform:perspective(120px) rotateX(-82deg)}
 42%{transform:perspective(120px) rotateX(24deg)}
 64%{transform:perspective(120px) rotateX(-14deg)}
 82%{transform:perspective(120px) rotateX(7deg)}
 100%{transform:perspective(120px) rotateX(0)}
}
@keyframes tb-nav-profile{
 0%,100%{transform:translateY(0) scale(1)}
 35%{transform:translateY(-2px) scale(1.08)}
 65%{transform:translateY(1px) scale(.98)}
}
@keyframes tb-nav-profile-nod{
 0%,100%{transform:translateY(0)}
 40%{transform:translateY(1px)}
}
@media(prefers-reduced-motion:reduce){
 .tb-nav-right .view-switch>svg,.tb-nav-right .view-switch rect{transition:none}
}

:root[data-theme=dark] .tb-index,:root[data-theme=dark] [data-part="indexItem"],:root[data-theme=dark] [data-part="indexLi"]{color:rgb(237,237,237)!important}
:root[data-theme=dark] [data-part="indexLabel"]{color:rgb(150,150,150)!important}
:root[data-theme=dark] .mobbin-site .website-heading h1,:root[data-theme=dark] .mobbin-site .website-meta dd,:root[data-theme=dark] .site-version,:root[data-theme=dark] .site-tab-links a[aria-current],:root[data-theme=dark] .m-btn-line{color:rgb(237,237,237)}
:root[data-theme=dark] .site-tab-links a[aria-current]{border-bottom-color:rgb(237,237,237)}
:root[data-theme=dark] .m-btn-dark{background:rgb(237,237,237);color:rgb(20,20,20)}
:root[data-theme=dark] .m-btn-line{box-shadow:inset 0 0 0 1px rgba(237,237,237,.16)}
:root[data-theme=dark] .site-tabs-rule{background:rgba(237,237,237,.16)}
:root[data-theme=dark] .m-sheet-panel,:root[data-theme=dark] .m-sheet-head,:root[data-theme=dark] .m-sheet-foot{background:rgb(20,20,20);color:rgb(237,237,237)}
:root[data-theme=dark] .m-seg{background:rgba(237,237,237,.08)}
:root[data-theme=dark] .m-seg button[aria-pressed=true]{background:rgb(52,52,52);color:rgb(237,237,237)}
:root[data-theme=dark] .m-sheet-close,:root[data-theme=dark] .m-round,:root[data-theme=dark] .m-sheet-next,:root[data-theme=dark] .m-btn-grey,:root[data-theme=dark] .m-sheet-info button{color:rgb(237,237,237)}
:root[data-theme=dark] .m-sheet-close span,:root[data-theme=dark] .m-round,:root[data-theme=dark] .m-sheet-next,:root[data-theme=dark] .m-btn-grey,:root[data-theme=dark] .m-sheet-other-shot,:root[data-theme=dark] .m-sheet-icon{background:rgba(237,237,237,.08)}
:root[data-theme=dark] .m-similar{background:rgb(52,52,52);color:rgb(237,237,237)}

/* account menu: Mobbin's overlay-account-menu.html (240px, 20px round, 88% dark glass, 8px groups, 36px rows) */
.tb-account{position:fixed;z-index:90;width:240px;border-radius:20px;background:rgba(38,38,38,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:rgba(0,0,0,.16) 0 12px 80px 0;color:#fff;overflow:hidden;font-size:16px;line-height:22px}
.tb-account[hidden]{display:none}
.tb-account-head{display:flex;flex-direction:column;row-gap:10px;padding:16px 18px 8px}
.tb-account-name{font-weight:600}
/* The plan, at the top of the account menu (Mobbin's PRO pill, 2026-10-04): light on the dark menu, dark on the light one. */
.tb-account-plan{align-self:flex-start;padding:3px 10px;border-radius:9999px;background:#fff;color:#111;font-size:11.5px;font-weight:700;line-height:16px;letter-spacing:.04em}
:root:not([data-theme=dark]) .tb-account-plan{background:#111;color:#fff}
.tb-account-profile{display:block;margin-top:4px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.1);color:inherit;text-align:center;font-weight:600;font-size:13px;text-decoration:none;transition:background-color .15s}
.tb-account-profile:hover{background:rgba(255,255,255,.16)}
:root:not([data-theme=dark]) .tb-account-profile{background:rgba(0,0,0,.06)}
:root:not([data-theme=dark]) .tb-account-profile:hover{background:rgba(0,0,0,.1)}
/* Below ログアウト: the terms, the privacy policy and the copyright, small; then 管理者 for admins (2026-10-04). */
.tb-account-legal{display:flex;flex-wrap:wrap;gap:4px 12px;padding:4px 18px 12px;font-size:11px;line-height:16px;opacity:.55}
.tb-account-legal a{color:inherit;text-decoration:none}
.tb-account-legal a:hover{text-decoration:underline}
.tb-account-admin-title{padding:10px 18px 0;font-size:11px;font-weight:700;letter-spacing:.06em;opacity:.5}
/* With 管理者 at the bottom the menu can be taller than the window: it stops above the window's foot and scrolls. */
.tb-account{max-height:calc(100vh - 86px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.tb-account-setup{display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border-radius:9999px;background:rgba(237,237,237,.08);color:#fff;font-size:14px;line-height:20px;font-weight:600;text-decoration:none}
.tb-account-group{padding:8px}
.tb-account-row{display:flex;align-items:center;column-gap:8px;height:36px;padding:0 10px;border-radius:12px;color:#fff;font-weight:600;text-decoration:none}
.tb-account-row:hover,.tb-account-row:focus-visible,.tb-account-setup:hover,.tb-account-setup:focus-visible{background:rgba(237,237,237,.12);outline:none}
.tb-account-rule{height:1px;background:rgba(237,237,237,.08)}
.tb-account-legal a:hover,.tb-account-legal a:focus-visible{opacity:1!important;text-decoration:underline!important;text-underline-offset:3px}
.tb-account-theme{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 10px;font-weight:600}
.tb-theme-seg{display:flex;align-items:center;gap:2px;padding:4px;border-radius:9999px;background:rgba(237,237,237,.08)}
.tb-theme-seg button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:4px;border:0;border-radius:9999px;background:transparent;color:rgb(135,135,135);cursor:pointer}
.tb-theme-seg button[aria-checked=true]{background:rgba(38,38,38,.88);color:#fff}
.tb-theme-seg button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.tb-language-seg button{width:36px;font-family:inherit;font-size:11px;font-weight:600;line-height:1;letter-spacing:.04em}

/* count, rule and sort on the right of the list row (overlay-sort.html) */
.tb-slot-right{display:flex!important;flex-direction:row!important;align-items:center!important;column-gap:24px!important;width:auto!important;height:auto!important}
.tb-count{display:flex;flex-direction:column;font-size:12px;line-height:16px;font-weight:456;letter-spacing:.2px;color:rgb(112,112,112);text-align:end;white-space:nowrap}
.tb-rule{width:1px;height:28px;background:rgba(64,64,64,.06)}
.tb-sort{display:flex;align-items:center;column-gap:4px;height:22px;padding:0;border:0;background:none;font:inherit;font-size:16px;line-height:22px;font-weight:600;color:rgb(20,20,20);cursor:pointer;white-space:nowrap}
.tb-sort svg{width:20px;height:20px}
.tb-sort:focus-visible,.tb-filter-icon:focus-visible{outline:2px solid rgb(20,20,20);outline-offset:2px;border-radius:6px}
.tb-filter-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0 8px;border:0;border-radius:9999px;background:transparent;color:rgb(112,112,112);cursor:pointer}
.tb-filter-icon svg{width:20px;height:20px;flex:none}
.tb-sortmenu{position:fixed;z-index:85;width:180px;padding:8px;border-radius:20px;background:rgba(38,38,38,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:rgba(0,0,0,.16) 0 12px 80px 0;box-sizing:border-box}
.tb-sortmenu[hidden]{display:none}
.tb-sortmenu button{display:flex;align-items:center;justify-content:space-between;width:100%;height:36px;padding:0 10px;border:0;border-radius:12px;background:transparent;font:inherit;font-size:16px;line-height:22px;font-weight:600;color:#fff;cursor:pointer}
.tb-sortmenu button:hover,.tb-sortmenu button:focus-visible{background:rgba(237,237,237,.12);outline:none}
:root[data-theme=dark] .tb-sort{color:rgb(237,237,237)}
:root[data-theme=dark] .tb-rule{background:rgba(237,237,237,.12)}
:root[data-theme=dark] .tb-filter-icon svg{filter:invert(1)}
/* a filtered list (Mobbin's search page): the row sits 32px under the nav, the cards 8px under the row */
body.no-sidebar[data-index=list] .tb-slot{margin-top:24px}

/* Saved: Mobbin's saved.html on the plain page (no floating panel, no slot bar) */
body.no-sidebar.bookmarks-mode main#content{position:static!important;inset:auto!important;width:auto!important;height:auto!important;padding:32px var(--tb-pad) 120px!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
body.no-sidebar.bookmarks-mode .tb-slot{display:none!important}
.m-saved>header{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;row-gap:24px;padding:0!important;margin:0 0 32px}
.m-saved h1{margin:0;font-size:44px!important;line-height:48px!important;font-weight:652!important;letter-spacing:-.4px!important;color:rgb(20,20,20)}
.m-saved-bar{display:flex;align-items:center;column-gap:16px}
.m-saved-seg{display:flex;gap:2px;height:44px;padding:4px;border-radius:9999px;background:rgba(64,64,64,.08);box-sizing:border-box}
.m-saved-seg button{display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border:0;border-radius:9999px;background:transparent;font:inherit;font-size:16px;line-height:22px;font-weight:600;color:rgb(135,135,135);cursor:pointer;white-space:nowrap}
.m-saved-seg button[aria-pressed=true]{background:#fff;color:rgb(20,20,20);box-shadow:rgba(0,0,0,.04) 0 1px 2px 0}
.m-saved-seg button:focus-visible{outline:2px solid rgb(20,20,20);outline-offset:1px}
.m-saved-rule{width:1px;height:36px;background:rgba(64,64,64,.06)}
.m-saved-find{position:relative;display:flex;align-items:center;width:min(280px,100%);height:44px}
.m-saved-find svg{position:absolute;left:16px;width:18px;height:18px;color:rgb(112,112,112);pointer-events:none}
.m-saved-find input{width:100%;height:44px;padding:0 16px 0 42px;border:0;border-radius:9999px;background:transparent;box-shadow:inset 0 0 0 1px rgba(64,64,64,.16);font:inherit;font-size:16px;line-height:22px;color:rgb(20,20,20)}
.m-saved-find input:focus-visible{outline:2px solid rgb(20,20,20);outline-offset:1px}
.m-saved .saved-count{margin:0 0 0 auto;font-size:12px;line-height:16px;font-weight:456;color:rgb(112,112,112)}
.m-empty{grid-column:1/-1;display:grid!important;justify-items:center;row-gap:24px;padding:48px 0!important;text-align:center}
.m-empty-art{width:204px;height:100px;color:rgb(237,237,237)}
.m-empty-text{display:grid;row-gap:12px}
.m-empty-text p{margin:0;font-size:16px!important;line-height:22px;font-weight:456;color:rgb(112,112,112)!important}
.m-empty-text .m-empty-title{font-size:24px!important;line-height:30px;font-weight:652;color:rgb(20,20,20)!important}
@media(max-width:719px){.m-saved h1{font-size:32px!important;line-height:36px!important}.m-saved-bar{flex-wrap:wrap;row-gap:12px}.m-saved-rule{display:none}}
:root[data-theme=dark] .m-saved h1,:root[data-theme=dark] .m-empty-text .m-empty-title,:root[data-theme=dark] .m-saved-find input{color:rgb(237,237,237)!important}
:root[data-theme=dark] .m-saved-seg{background:rgba(237,237,237,.08)}
:root[data-theme=dark] .m-saved-seg button[aria-pressed=true]{background:rgb(52,52,52);color:rgb(237,237,237)}
/* Keep one moving surface; generated dark colours must not brighten its edge. */
:root[data-theme=dark] .m-saved-seg .m-saved-pill{background:rgb(52,52,52)!important}
:root[data-theme=dark] .m-saved-seg:has(.m-saved-pill) button[aria-pressed=true]{background:transparent}
:root[data-theme=dark] .m-saved-find input{box-shadow:inset 0 0 0 1px rgba(237,237,237,.16)}
:root[data-theme=dark] .m-empty-art{color:rgb(48,48,48)}
:root[data-theme=dark] .site-tab-links button[aria-selected=true]{color:rgb(237,237,237);border-bottom-color:rgb(237,237,237)}
:root[data-theme=dark] .te-code .pb-code-head .pb-seg{background:rgba(237,237,237,.08)}
:root[data-theme=dark] .te-code .pb-code-head .pb-seg button[aria-selected=true]{background:rgb(52,52,52);color:rgb(237,237,237)}

/* Scraper: its page sits under the nav bar instead of covering it, so the nav (and the way back) stays on screen */
body.no-sidebar.scraper-mode #scraper-view{position:fixed!important;top:var(--tb-nav-h)!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;inset:var(--tb-nav-h) 0 0 0!important;z-index:1!important}
body.no-sidebar.scraper-mode #scraper-view iframe{display:block;width:100%!important;height:100%!important;border:0}
#scraper-view{position:relative;overflow:hidden}
#scraper-view iframe{display:block;width:100%;height:100%;border:0;pointer-events:none;user-select:none}
#scraper-view .scraper-soon{position:absolute;inset:0;display:grid;place-items:center;padding:32px;pointer-events:none;isolation:isolate;opacity:0;transition:opacity 220ms ease}
#scraper-view .scraper-soon::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.24)}
#scraper-view.scraper-landed .scraper-soon{opacity:1;transition-duration:500ms}
/* Route filters live outside main; keep them hidden until the scraper rows have left. */
:is(body[data-scraper-transition="leaving"],body[data-article-transition="leaving"]) :is(.tb-slot,.tb-index){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
@media(prefers-reduced-motion:reduce){#scraper-view .scraper-soon{transition:none}}
#scraper-view .scraper-soon p{margin:0;padding:12px 24px;border-radius:999px;background:#fff;color:#111;box-shadow:0 4px 24px rgba(0,0,0,.16);font-size:15px;font-weight:600}
:root[data-theme=dark] #scraper-view .scraper-soon p{background:#202020;color:#f2f2f2;box-shadow:0 4px 24px rgba(0,0,0,.3)}
.tb-slot #workspace-nav .workspace-back{display:none!important}
.tb-palette input::-webkit-search-cancel-button,.tb-palette input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
:root[data-theme=dark] .tb-search-text[style*="20, 20, 20"],:root[data-theme=dark] .tb-search-text[style*="20,20,20"]{color:rgb(237,237,237)!important}
.tb-logo .tb-door-knob{fill:#fff}
:root[data-theme=dark] .tb-logo .tb-door-knob{fill:#0b0b0b}
.tb-logo:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.tb-tabs a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
/* All library controls share this rule, including dialog autofocus/restoration.
   Only keyboard navigation enables rings; Escape and typing preserve the input mode.
   Default to no ring before the input listener loads, and suppress native :focus rings. */
:root:not([data-focus-input="keyboard"]) :focus,
:root :focus:not(:focus-visible){outline:none!important}

/* Mobbin's typed palette: the left list goes, the results fill the panel (56px rows, 40px icon, 12px gap, 20px edges) */
.tb-palette.tb-typing [data-part="paletteAside"]{display:none!important}
.tb-palette.tb-typing [data-part="paletteMain"]{flex:1 1 auto!important;width:auto!important;max-width:none!important}
.tb-rows{display:flex;flex-direction:column;padding:8px 20px 20px 0}
.tb-row{display:flex;align-items:center;column-gap:12px;height:56px;padding:0 8px;border:0;border-radius:16px;background:transparent;color:#fff;font:inherit;text-align:left;text-decoration:none;cursor:pointer;flex:none}
.tb-row.is-on{background:rgba(255,255,255,.08)}
.tb-row:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.tb-row-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:#f4f4f4;color:#525252;font-size:18px;font-weight:600;line-height:1}
.tb-row-icon-muted{background:rgba(255,255,255,.08);color:rgb(173,173,173)}
.tb-row-text{display:flex;flex-direction:column;min-width:0}
.tb-row-text b{font-size:16px;line-height:22px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-row-text small{font-size:14px;line-height:20px;font-weight:456;color:rgb(173,173,173);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-rows-label{margin:22px 0 12px 8px;font-size:14px;line-height:20px;font-weight:456;color:rgb(173,173,173)}
.tb-row-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
body.no-sidebar[data-index=list] #content .page-heading{display:none}
body.no-sidebar[data-index=list] main#content{padding-top:8px!important}

/* tooltips (tooltip.js): the old in-button label is off; one label on top of the page, eased in */
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:none!important;display:none!important}
.tb-tip{position:fixed;z-index:2147483000;padding:6px 10px;border-radius:8px;background:#fff;color:rgb(20,20,20);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 6px 20px rgba(0,0,0,.12);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.2px;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px) scale(.97);transition:opacity .16s ease-out,transform .16s cubic-bezier(.22,1,.36,1)}
.tb-tip[data-side=bottom]{transform:translateY(-4px) scale(.97)}
.tb-tip.is-on{opacity:1;transform:none}
.tb-tip[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.tb-tip{transition:none;transform:none}}
:root[data-theme=dark] .tb-tip{background:rgb(38,38,38);color:rgb(237,237,237);box-shadow:0 0 0 .5px rgba(255,255,255,.1),0 6px 20px rgba(0,0,0,.4)}

/* detail pages: the page row floats in the bar's place only while it is at the top (see fillPageRow) */
.tb-slot.tb-float{position:fixed!important;left:0;right:0;top:0;height:var(--tb-nav-h)!important;background:transparent!important}
.tb-slot.tb-float[data-at-top="false"]{visibility:hidden}
body[data-navbar-state="hidden"] .tb-slot.tb-float[data-at-top="true"]{background:#fff!important}
:root[data-theme=dark] body[data-navbar-state="hidden"] .tb-slot.tb-float[data-at-top="true"]{background:#0b0b0b!important}
.tb-page-name{display:flex;align-items:center;column-gap:12px;margin-right:32px;font-size:16px;line-height:22px;font-weight:600;white-space:nowrap}
.tb-page-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:30%;background:#f4f4f4;color:#525252;font-size:14px;font-weight:600}
.tb-slot .tb-page-btn{height:36px;padding:0 14px;font-size:14px;line-height:20px}
.tb-slot-left:has(.tb-page-name){display:flex!important;align-items:center}
:root[data-theme=dark] .tb-page-icon{background:#202020;color:#aeaeae}
/* The page row that swaps into the bar on detail pages: its name and the active tab carry Mobbin's light-theme ink (20,20,20) inline, unreadable on the dark band. */
:root[data-theme=dark] .tb-page-name{color:#ededed}
:root[data-theme=dark] .tb-slot button[data-proxy][style*="20, 20, 20"]{color:#ededed!important;border-bottom-color:#ededed!important}
.tb-slot-right:has(.tb-page-btn){column-gap:8px!important}

/* the first swap goes like every other one: the row that slides up is hidden the moment it reaches the top, then eases in */
body[data-navbar-state] .tb-slot.tb-snap[data-at-top] .tb-slot-content.tb-slot-content{transition:none!important;opacity:0!important;transform:translateY(5px)!important}
.tb-slot[data-at-top="true"]:not(.tb-float) .tb-slot-content{height:var(--tb-nav-h)!important;padding-top:0!important}
:root[data-theme=dark] .home-ring .home-ring-fill{stroke:rgb(237,237,237)}:root[data-theme=dark] .home-ring circle{stroke:rgba(237,237,237,.16)}
:root[data-theme=dark] .home-arrow{background:rgb(38,38,38);color:rgb(237,237,237);box-shadow:0 0 0 .5px rgba(255,255,255,.1),0 4px 16px rgba(0,0,0,.4)}

/* dark theme: veils behind dialogs stay dark (the generated dark.css turned them light grey) */
:root[data-theme=dark] dialog::backdrop,:root[data-theme=dark] .m-sheet::backdrop{background:rgba(0,0,0,.6)!important}
:root[data-theme=dark] .tb-palette::backdrop{background:rgba(0,0,0,.35)!important;backdrop-filter:blur(4px)}
:root[data-theme=dark] #scraper-view,:root[data-theme=dark] #scraper-view iframe{background:#0b0b0b!important}
:root[data-theme=dark] .tb-tile [data-part="trendingImg"],:root[data-theme=dark] .tb-row-icon:not(.tb-row-icon-muted):not(:has(img)){background:rgb(52,52,52)!important;color:rgb(237,237,237)!important}
:root[data-theme=dark] .m-sheet-icon,:root[data-theme=dark] .tb-page-icon{background:#202020!important;color:#aeaeae!important}

/* dark theme: no white glow around the cursor on the dot ground */
:root[data-theme=dark] .dot-field svg circle{opacity:0!important}

/* filter panel (topbar.js openFilter): large dark glass like the palette, plain words, a preview column */
.tb-filter-panel{position:fixed;inset:0;width:min(1200px,calc(100vw - 48px));height:min(760px,calc(100dvh - 120px));max-width:none;max-height:none;margin:96px auto auto;padding:0;border:0;border-radius:24px;background:rgba(38,38,38,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:rgba(0,0,0,.16) 0 12px 80px 0;color:#fff;overflow:hidden}
.tb-filter-panel:not([open]){display:none}
.tb-filter-panel::backdrop{background:rgba(255,255,255,.01);backdrop-filter:blur(4px)}
:root[data-theme=dark] .tb-filter-panel::backdrop{background:rgba(0,0,0,.35)!important}
.tb-fp-inner{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%}
.tb-fp-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 12px 32px}
.tb-fp-head h2{margin:0;font-size:16px;line-height:22px;font-weight:600;color:rgb(173,173,173)}
.tb-fp-tools{display:flex;align-items:center;gap:8px}
.tb-fp-reset{height:36px;padding:0 14px;border:0;border-radius:9999px;background:rgba(237,237,237,.08);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.tb-fp-close{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:9999px;background:rgba(237,237,237,.08);color:#fff;cursor:pointer}
.tb-fp-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tb-fp-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0}
.tb-fp-groups{overflow-y:auto;padding:8px 32px 40px;scrollbar-width:thin}
.tb-fp-group{margin:0 0 32px}
.tb-fp-group>p{margin:0 0 10px;font-size:14px;line-height:20px;font-weight:456;color:rgb(173,173,173)}
.tb-fp-group ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));column-gap:24px;margin:0;padding:0;list-style:none}
.tb-fp-group a,.tb-fp-group button{display:inline-flex;align-items:baseline;gap:8px;padding:4px 0;border:0;background:none;font:inherit;font-size:22px;line-height:30px;font-weight:652;letter-spacing:-.1px;color:rgba(255,255,255,.62);text-decoration:none;cursor:pointer;text-align:left;transition:color .15s}
.tb-fp-group a:hover,.tb-fp-group a:focus-visible,.tb-fp-group button:hover,.tb-fp-group button:focus-visible,.tb-fp-group button[aria-pressed=true]{color:#fff;outline:none}
.tb-fp-group a:focus-visible,.tb-fp-group button:focus-visible{text-decoration:underline;text-underline-offset:4px}
.tb-fp-group small{font-size:13px;font-weight:456;color:rgb(140,140,140)}
.tb-fp-group button svg{align-self:center;width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.tb-fp-preview{min-height:0;overflow-y:auto;padding:8px 24px 32px;border-left:1px solid rgba(237,237,237,.08)}
.tb-fp-pv-title{margin:0;font-size:20px;line-height:26px;font-weight:652}
.tb-fp-pv-note{margin:4px 0 16px;font-size:14px;line-height:20px;color:rgb(173,173,173)}
.tb-fp-shots{display:grid;gap:14px}
.tb-fp-shots figure{margin:0}
.tb-fp-shots img{display:block;width:100%;aspect-ratio:1.6016;object-fit:cover;object-position:top;border-radius:10px;background:rgba(237,237,237,.06)}
.tb-fp-shots figcaption{margin-top:6px;font-size:13px;line-height:18px;color:rgb(173,173,173);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:899px){.tb-fp-body{grid-template-columns:1fr}.tb-fp-preview{display:none}.tb-filter-panel{margin-top:72px}}
/* the lists fade out where there is more to scroll to (bottom, and the top once scrolled) */
.tb-fp-groups,.tb-fp-preview{--fade-b:0px;--fade-t:0px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade-t),#000 calc(100% - var(--fade-b)),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade-t),#000 calc(100% - var(--fade-b)),transparent 100%)}
.tb-fp-groups[data-more=true],.tb-fp-preview[data-more=true]{--fade-b:96px}
.tb-fp-groups[data-scrolled=true],.tb-fp-preview[data-scrolled=true]{--fade-t:40px}
.tb-fp-shots video{display:block;width:100%;aspect-ratio:1.6016;object-fit:cover;border-radius:10px;background:rgba(237,237,237,.06)}
/* one text line across the row: the underline tabs sit 3px lower (their text had ridden above the pills'), Filter at Mobbin's 16/22 */
.tb-slot-left>[data-part="slotTabs"]:has(+[data-part="pillRow"]){position:relative;top:3px}
.tb-slot [data-part="filterLabel"]{font-size:16px!important;line-height:22px!important}
.tb-slot-left:has(.tb-page-name)>[data-part="slotTabs"]{position:relative;top:1px}

/* Light theme menus and panels: white glass with dark text (2026-09-26). The dark theme keeps the dark glass. */
:root:not([data-theme=dark]) .tb-menu,:root:not([data-theme=dark]) .tb-sortmenu,:root:not([data-theme=dark]) .tb-account,:root:not([data-theme=dark]) .tb-filter-panel,:root:not([data-theme=dark]) .m-glass-menu,:root:not([data-theme=dark]) .site-version-menu{background:rgba(255,255,255,.94)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:rgb(20,20,20)!important;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 16px 56px rgba(0,0,0,.14)!important}
/* check-list menu */
:root:not([data-theme=dark]) .tb-menu *{color:rgb(20,20,20)!important}
:root:not([data-theme=dark]) .tb-menu input::placeholder{color:rgb(150,150,150)!important}
:root:not([data-theme=dark]) .tb-menu [data-part="menuSearchRow"]{border-color:rgba(0,0,0,.08)!important}

:root:not([data-theme=dark]) .tb-menu section svg{filter:invert(1) opacity(.55)!important}
:root:not([data-theme=dark]) .tb-menu .tb-check:not(:has(svg)){background:rgba(0,0,0,.06)!important;border-color:rgba(0,0,0,.14)!important}
:root:not([data-theme=dark]) .tb-menu .tb-check:has(svg){background:rgb(20,20,20)!important}
:root:not([data-theme=dark]) .tb-menu .tb-check:has(svg) *{color:#fff!important;stroke:#fff!important}
:root:not([data-theme=dark]) .tb-menu [data-value]:hover,:root:not([data-theme=dark]) .tb-menu [data-value]:focus-visible{background:rgba(0,0,0,.05)!important}
:root:not([data-theme=dark]) .tb-menu small{color:rgb(112,112,112)!important;opacity:1!important}
/* sort, account, … and version menus */
:root:not([data-theme=dark]) .tb-sortmenu button,:root:not([data-theme=dark]) .tb-account-row,:root:not([data-theme=dark]) .tb-account-name,:root:not([data-theme=dark]) .tb-account-theme,:root:not([data-theme=dark]) .m-glass-menu a,:root:not([data-theme=dark]) .site-version-menu [role=menuitemradio]{color:rgb(20,20,20)!important}
:root:not([data-theme=dark]) .tb-sortmenu button:hover,:root:not([data-theme=dark]) .tb-sortmenu button:focus-visible,:root:not([data-theme=dark]) .tb-account-row:hover,:root:not([data-theme=dark]) .tb-account-row:focus-visible,:root:not([data-theme=dark]) .m-glass-menu a:hover,:root:not([data-theme=dark]) .m-glass-menu a:focus-visible{background:rgba(0,0,0,.05)!important}
:root:not([data-theme=dark]) .tb-sortmenu svg *{stroke:rgb(112,112,112)!important}
:root:not([data-theme=dark]) .tb-account-setup{background:rgba(0,0,0,.06)!important;color:rgb(20,20,20)!important}
:root:not([data-theme=dark]) .tb-account-rule{background:rgba(0,0,0,.08)!important}
:root:not([data-theme=dark]) .tb-account-row svg{color:rgb(112,112,112)!important}
:root:not([data-theme=dark]) .tb-theme-seg{background:rgba(0,0,0,.06)!important}
:root:not([data-theme=dark]) .tb-theme-seg button{color:rgb(135,135,135)!important}
:root:not([data-theme=dark]) .tb-theme-seg button[aria-checked=true]{background:#fff!important;color:rgb(20,20,20)!important;box-shadow:0 1px 2px rgba(0,0,0,.08)}
:root:not([data-theme=dark]) .tb-theme-seg button:focus-visible{outline-color:rgb(20,20,20)!important}
:root:not([data-theme=dark]) .site-version-menu [role=menuitemradio] span{color:rgb(112,112,112)!important}
/* filter panel */
:root:not([data-theme=dark]) .tb-fp-head h2,:root:not([data-theme=dark]) .tb-fp-group>p,:root:not([data-theme=dark]) .tb-fp-pv-note,:root:not([data-theme=dark]) .tb-fp-shots figcaption{color:rgb(112,112,112)!important}
:root:not([data-theme=dark]) .tb-fp-group a,:root:not([data-theme=dark]) .tb-fp-group button{color:rgba(20,20,20,.55)!important}
:root:not([data-theme=dark]) .tb-fp-group a:hover,:root:not([data-theme=dark]) .tb-fp-group a:focus-visible,:root:not([data-theme=dark]) .tb-fp-group button:hover,:root:not([data-theme=dark]) .tb-fp-group button:focus-visible,:root:not([data-theme=dark]) .tb-fp-group button[aria-pressed=true]{color:rgb(20,20,20)!important}
:root:not([data-theme=dark]) .tb-fp-group small{color:rgb(150,150,150)!important}
:root:not([data-theme=dark]) .tb-fp-pv-title{color:rgb(20,20,20)}
:root:not([data-theme=dark]) .tb-fp-preview{border-left-color:rgba(0,0,0,.08)!important}
:root:not([data-theme=dark]) .tb-fp-reset,:root:not([data-theme=dark]) .tb-fp-close{background:rgba(0,0,0,.06)!important;color:rgb(20,20,20)!important}
:root:not([data-theme=dark]) .tb-fp-shots img,:root:not([data-theme=dark]) .tb-fp-shots video{background:rgba(0,0,0,.04)!important;box-shadow:0 0 0 .5px rgba(0,0,0,.08)}
/* check-list menu: fade the list where there is more (same as the filter panel) */
.tb-menu [data-part="menuScroll"]{--fade-b:0px;--fade-t:0px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade-t),#000 calc(100% - var(--fade-b)),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade-t),#000 calc(100% - var(--fade-b)),transparent 100%)}
.tb-menu [data-part="menuScroll"][data-more=true]{--fade-b:72px}
.tb-menu [data-part="menuScroll"][data-scrolled=true]{--fade-t:24px}
:root[data-theme=dark] .scrape-status{background:rgba(38,38,38,.92);color:rgb(237,237,237)}
:root[data-theme=dark] .scrape-build .wf-line rect{stroke:rgba(237,237,237,.35)}
:root[data-theme=dark] .scrape-section.is-filled{background:#161616}
:root[data-theme=dark] .scrape-section .shot-wire{filter:url(#scrape-edges) invert(1)}
:root[data-theme=dark] .scrape-build .site-icon.wf.is-filled{background:#202020}

/* scraping queue pill (bottom-right) and list */
.tb-queue{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.tb-queue[hidden]{display:none}
.tb-q-pill{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 12px;border:0;border-radius:9999px;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 10px 32px rgba(0,0,0,.14);font:inherit;font-size:14px;line-height:20px;font-weight:600;color:rgb(20,20,20);cursor:pointer;max-width:min(360px,calc(100vw - 48px))}
.tb-q-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-q-pill em{font-style:normal;font-size:12px;color:rgb(112,112,112)}
.tb-q-ring{flex:none;width:20px;height:20px;transform:rotate(-90deg);fill:none;stroke-width:2.2}
.tb-q-ring circle{stroke:rgba(64,64,64,.14)}
.tb-q-ring .fill{stroke:rgb(20,20,20);stroke-dasharray:100;transition:stroke-dashoffset .6s ease}
.tb-q-list{width:min(360px,calc(100vw - 48px));padding:12px 8px 8px;border-radius:20px;background:rgba(255,255,255,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 16px 56px rgba(0,0,0,.14)}
.tb-q-list[hidden]{display:none}
.tb-q-list>p{margin:0 10px 6px;font-size:13px;line-height:18px;font-weight:456;color:rgb(112,112,112)}
.tb-q-list ul{margin:0;padding:0;list-style:none;max-height:320px;overflow-y:auto}
.tb-q-list li{position:relative}
.tb-q-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;color:rgb(20,20,20);text-decoration:none}
.tb-q-row:hover,.tb-q-row:focus-visible{background:rgba(0,0,0,.05);outline:none}
.tb-q-text{display:flex;flex-direction:column;min-width:0;padding-right:24px}
.tb-q-text b{font-size:14px;line-height:20px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-q-text small{font-size:12px;line-height:16px;color:rgb(112,112,112)}
.tb-q-x{position:absolute;right:8px;top:50%;width:28px;height:28px;padding:0;border:0;border-radius:9999px;background:none;color:rgb(112,112,112);font-size:18px;line-height:1;cursor:pointer;transform:translateY(-50%)}
.tb-q-x:hover{background:rgba(0,0,0,.05);color:rgb(20,20,20)}
/* bell + badge + notifications */
.tb-bell{position:relative;border:0;cursor:pointer}
.tb-bell-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:9999px;background:#e5484d;color:#fff;font-size:10px;line-height:16px;font-weight:700;text-align:center;box-shadow:0 0 0 2px #fff;pointer-events:none}
.tb-bell-badge[hidden]{display:none}
.tb-notes{position:fixed;z-index:90;width:min(360px,calc(100vw - 32px));max-height:min(480px,calc(100dvh - 120px));overflow-y:auto;padding:8px;border-radius:20px;background:rgba(255,255,255,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 16px 56px rgba(0,0,0,.14);color:rgb(20,20,20)}
.tb-notes[hidden]{display:none}
.tb-notes header{padding:8px 10px 6px}
.tb-notes h2{margin:0;font-size:16px;line-height:22px;font-weight:600}
.tb-notes ul{margin:0;padding:0;list-style:none}
.tb-notes a{display:flex;align-items:flex-start;gap:10px;padding:10px;border-radius:12px;color:inherit;text-decoration:none}
.tb-notes a:hover,.tb-notes a:focus-visible{background:rgba(0,0,0,.05);outline:none}
.tb-note-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:transparent}
.tb-notes a.is-new .tb-note-dot{background:#e5484d}
.tb-note-text{display:flex;flex-direction:column;min-width:0}
.tb-note-text b{font-size:14px;line-height:20px;font-weight:600}
.tb-note-text small{font-size:12px;line-height:16px;color:rgb(112,112,112)}
.tb-notes-empty{margin:0;padding:24px 10px 28px;font-size:14px;line-height:22px;color:rgb(112,112,112);text-align:center}
.scrape-build.no-anim *{transition:none!important}
:root[data-theme=dark] .tb-q-pill,:root[data-theme=dark] .tb-q-list,:root[data-theme=dark] .tb-notes{background:rgba(38,38,38,.92);color:rgb(237,237,237);box-shadow:0 0 0 .5px rgba(255,255,255,.08),0 16px 56px rgba(0,0,0,.4)}
:root[data-theme=dark] .tb-q-row{color:rgb(237,237,237)}
:root[data-theme=dark] .tb-q-row:hover,:root[data-theme=dark] .tb-notes a:hover{background:rgba(237,237,237,.08)}
:root[data-theme=dark] .tb-q-ring circle{stroke:rgba(237,237,237,.16)}
:root[data-theme=dark] .tb-q-ring .fill{stroke:rgb(237,237,237)}
:root[data-theme=dark] .tb-bell-badge{box-shadow:0 0 0 2px #0b0b0b}
:root[data-theme=dark] .scrape-back{background:rgba(237,237,237,.08);color:rgb(237,237,237)}

/* card -> detail page (page-morph.js): the page stays out of sight while the picture travels, then fades in */
.tb-morph-ghost{position:fixed;inset:0;z-index:64;pointer-events:none}
.tb-morph-ghost [data-morphing]{visibility:hidden}
body.tb-morphing .tb-morph-ghost > main#content,body.tb-morphing .tb-morph-ghost > .tb-slot{visibility:visible!important}
.tb-morph{position:fixed;z-index:65;overflow:hidden;background:#f4f4f4;pointer-events:none;box-shadow:0 20px 60px rgba(0,0,0,.12)}
.tb-morph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
body.tb-morphing main#content,body.tb-morphing .tb-slot{visibility:hidden!important}
body.tb-morphing main#content.tb-morph-content{position:relative;z-index:66;opacity:1!important;transform:none!important}
.tb-morph-parent{overflow:visible!important}
body.tb-morphing .tb-morph-live{visibility:visible!important;transform-origin:0 0;position:relative;z-index:1;pointer-events:none}
:root[data-theme=dark] .tb-morph{background:#202020}

/* Transparent edge fades preserve the page background in either theme. */
.tb-slot-left:has([data-part="pillRow"]){margin-right:0!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--filter-fade-left,0px),#000 calc(100% - var(--filter-fade-right,0px)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--filter-fade-left,0px),#000 calc(100% - var(--filter-fade-right,0px)),transparent)}

/* Long translated filters keep their own scrollable row on phones. */
@media(max-width:599px){
 :root,:root.tb-stacked{--tb-slot-h:104px}
 .tb-slot .tb-slot-content{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;grid-template-rows:48px 48px;gap:0 8px!important;align-content:center}
 .tb-slot .tb-slot-left{grid-column:1/-1;grid-row:1;max-width:100%;min-width:0;margin:0!important;padding:0!important}
 .tb-slot .tb-slot-search{grid-column:1;grid-row:2}
 .tb-slot .tb-slot-right{grid-column:1/-1!important;grid-row:2;min-width:0;min-height:48px;column-gap:8px!important;justify-content:flex-end}
 body[data-navbar-state="hidden"] .tb-slot[data-at-top="true"] .tb-slot-right{grid-column:2!important}
 .tb-slot-right .tb-rule{display:none}
 .tb-count{min-width:0;margin-right:auto;text-align:start;font-size:11px;letter-spacing:0}
 .tb-count-n{white-space:normal;overflow-wrap:anywhere}
 .tb-sort,.tb-slot-right [data-part="filterLabel"]{font-size:14px!important}
 .tb-slot-right [data-part="filterButton"]{padding:0!important}
 .tb-slot-right [data-part="filterInner"]{column-gap:4px!important}
}
/* Keep the full action group and an accessible search button on narrow phones. */
@media(max-width:520px){
 .tb-stacked-wide .tb-nav [data-part="searchWrap"]{min-width:0!important}
 .tb-stacked-wide .tb-nav .tb-search-button{min-width:0!important;padding:0!important;justify-content:center!important}
 .tb-stacked-wide .tb-nav .tb-search-text{display:none!important}
}
@media(max-width:359px){
 .tb-stacked .tb-nav-content{padding:10px 12px!important;column-gap:8px!important}
 .tb-stacked .tb-slot-content{padding-left:12px!important;padding-right:12px!important}
 .tb-count{font-size:10px;line-height:14px}
}
:root[data-theme=dark] .home-cat-peek{background:rgb(38,38,38);box-shadow:0 0 0 .5px rgba(255,255,255,.08),0 16px 48px rgba(0,0,0,.4)}:root[data-theme=dark] .home-cat-peek b{color:rgb(237,237,237)}
:root[data-theme=dark] .home-cat-peek-shot{background:#202020}

/* Settings: a shared underline follows both tab position and translated width. */
.tb-slot #workspace-nav[data-settings-underline]{position:relative}
.tb-slot #workspace-nav[data-settings-underline] a{border-bottom-color:transparent!important}
.tb-slot #workspace-nav[data-settings-underline]::after{content:"";position:absolute;left:0;top:var(--tb-settings-y);width:var(--tb-settings-width);height:2px;transform:translateX(var(--tb-settings-x));background:#141414;pointer-events:none}
.tb-slot #workspace-nav[data-underline-ready]::after{transition:transform 260ms cubic-bezier(.22,1,.36,1),width 260ms cubic-bezier(.22,1,.36,1)}
:root[data-theme=dark] .tb-slot #workspace-nav[data-settings-underline]::after{background:#ededed}
@media(prefers-reduced-motion:reduce){.tb-slot #workspace-nav[data-underline-ready]::after{transition:none}}
/* Site icons in the search palette are shown as the cut-out itself, like the site cards (no grey tile behind them). */
.tb-tile .tb-tile-icon{background:none!important}
.tb-tile .tb-tile-icon img{display:block;width:100%;height:100%;object-fit:contain}
.tb-row-icon.has-icon{background:none!important;border-radius:0}
.tb-row-icon.has-icon img{object-fit:contain;border-radius:0}
/* Trending tiles on hover: the icon lifts a little and the site's name comes up in a small label underneath
   (white with black text in light mode, black with white text in dark). The row keeps extra room above and below
   (topbar.js .tb-tiles) so neither is clipped by the sideways scroll. */
.tb-tile{overflow:visible!important}
.tb-tile [data-part="trendingImgBox"]{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.tb-tile [data-part="trendingName"]{position:absolute;top:62px;left:50%;max-width:120px;height:auto!important;padding:3px 8px;border-radius:7px;background:#fff!important;color:rgb(20,20,20)!important;box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.06);opacity:0!important;transform:translate(-50%,-6px);transition:opacity .16s ease-out,transform .2s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:1}
.tb-tile:is(:hover,:focus-visible) [data-part="trendingImgBox"]{transform:translateY(-6px)}
.tb-tile:is(:hover,:focus-visible) [data-part="trendingName"]{opacity:1!important;transform:translate(-50%,0)}
:root[data-theme=dark] .tb-tile [data-part="trendingName"]{background:rgb(20,20,20)!important;color:#fff!important;box-shadow:0 2px 10px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.tb-tile [data-part="trendingImgBox"],.tb-tile [data-part="trendingName"]{transition:none}}

/* Recent searches at the top of the palette: a clock, the words, and a remove button that shows on hover. */
.tb-recent-head{display:flex;align-items:baseline;justify-content:space-between;column-gap:12px}
.tb-recent-clear{padding:0;border:0;background:none;color:rgb(173,173,173);font:inherit;font-size:12px;cursor:pointer}
.tb-recent{display:flex;flex-direction:column;margin:0 -8px}
.tb-palette .tb-row-recent{height:44px;padding:0;column-gap:0}
.tb-row-recent:hover{background:rgba(255,255,255,.06)}
.tb-recent-use{display:flex;align-items:center;column-gap:12px;flex:1;min-width:0;height:100%;padding:0 8px;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.tb-recent-use span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-recent-use svg,.tb-recent-remove{color:rgb(173,173,173)}
.tb-recent-use svg{flex:none;width:18px!important;height:18px!important}
.tb-recent-remove{display:grid;place-items:center;flex:none;width:32px;height:32px;margin-right:6px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;opacity:0}
.tb-recent-remove svg{width:16px!important;height:16px!important}
.tb-row-recent:hover .tb-recent-remove,.tb-recent-remove:focus-visible{opacity:1}
@media (hover:none){.tb-recent-remove{opacity:1}}
:root:not([data-theme=dark]) .tb-palette .tb-row-recent:hover,:root:not([data-theme=dark]) .tb-palette .tb-recent-remove:hover{background:rgba(20,20,20,.05)!important}
:root:not([data-theme=dark]) .tb-palette :is(.tb-recent-clear,.tb-recent-use svg,.tb-recent-remove){color:#707070!important}

/* Words on the page: the button after the filter pills, and its small field (dark glass like the sort menu). */
.tb-words{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:9999px;background:transparent;color:inherit;cursor:pointer}
.tb-words:hover,.tb-words[aria-expanded=true]{background:rgba(20,20,20,.06)}
.tb-words-pop{position:fixed;z-index:60;display:flex;align-items:center;column-gap:8px;width:320px;padding:8px 8px 8px 18px;border-radius:18px;background:rgba(28,28,30,.94);color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.tb-words-pop[hidden]{display:none}
.tb-words-pop input{flex:1;min-width:0;height:36px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-size:15px;outline:none}
.tb-words-pop input::placeholder{color:rgba(255,255,255,.45)}
.tb-words-pop input::-webkit-search-cancel-button{display:none}
.tb-words-pop button{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.tb-words-pop button:hover{background:rgba(255,255,255,.2)}
.tb-words-pop input:focus,.tb-words-pop input:focus-visible{outline:none!important;box-shadow:none!important;border:0!important}
.tb-words-pop button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Filter bar interactions (2026-10-01): a picked group's pill grows to show its values, 配色 swatches, hover preview, facet counts, card motion. */
.tb-swatch{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.tb-menu [data-zero="true"]{opacity:.38}
.tb-menu [data-value]{transition:background-color .15s}
.tb-clear-all{flex:none;align-self:center;padding:0 6px;border:0;background:none;font:inherit;font-size:13px;color:rgb(120,120,120);white-space:nowrap;cursor:pointer;transition:color .15s}
.tb-clear-all:hover{color:rgb(20,20,20)}
:root[data-theme=dark] .tb-clear-all:hover{color:#fff}
.tb-count-to{font-weight:600;color:rgb(20,20,20)}
:root[data-theme=dark] .tb-count-to{color:#fff}
#gallery-results .site-card{transition:opacity .25s ease,filter .25s ease}
#gallery-results.tb-previewing .site-card.tb-preview-out{opacity:.16;filter:grayscale(1)}
.tb-slot-content::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px 100px at 110px 50%,color-mix(in srgb,var(--tb-accent,#fff) 30%,transparent),transparent 70%);opacity:0;transition:opacity .5s ease}
.tb-slot[data-accent] .tb-slot-content::before{opacity:1}
.tb-slot-content{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.tb-slot-content::before,#gallery-results .site-card{transition:none}}
/* Keep the separate clear action inside the selected pill's existing surface. */
.tb-slot [data-part="pillOnWrap"]:has(>.tb-picked-open){flex:none;max-width:min(360px,calc(100vw - 64px))}
.tb-slot .tb-picked-open{max-width:100%;padding-right:36px!important}
.tb-slot .tb-picked-clear{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0;padding:4px;border:0;border-radius:50%;background:transparent;color:rgb(20,20,20);cursor:pointer}
.tb-slot .tb-picked-clear svg{display:block;width:16px;height:16px;flex:none}
.tb-slot .tb-picked-clear:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.tb-pill-group{flex:none;font-size:16px;font-weight:700;line-height:24px}
.tb-pill-values{display:inline-flex;align-items:center;gap:4px;min-width:0;margin-left:6px;font-size:13px;font-weight:400;line-height:24px;opacity:.72}
.tb-pill-names{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-pill-values .tb-swatch{width:12px;height:12px}
.tb-pill-values .tb-swatch+.tb-pill-names{margin-left:2px}
/* The order moved from the bar into the Filter panel's header (2026-10-01). */
.tb-fp-order{display:flex;align-items:center;gap:2px;height:36px;padding:3px;border-radius:9999px;background:rgba(237,237,237,.08)}
.tb-fp-order button{height:30px;padding:0 12px;border:0;border-radius:9999px;background:none;color:rgba(255,255,255,.62);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.tb-fp-order button[aria-checked=true]{background:rgba(255,255,255,.16);color:#fff}
.tb-fp-order button:focus-visible{outline:2px solid currentColor;outline-offset:1px}
:root:not([data-theme=dark]) .tb-fp-order{background:rgba(0,0,0,.06)!important}
:root:not([data-theme=dark]) .tb-fp-order button{color:rgb(112,112,112)!important}
:root:not([data-theme=dark]) .tb-fp-order button[aria-checked=true]{background:#fff!important;color:rgb(20,20,20)!important;box-shadow:0 1px 3px rgba(0,0,0,.12)}




/* Cards far from the viewport are not laid out or painted until they come near (2026-10-01): the list grows by 24 cards
   per page as it scrolls, and every card stayed live. `auto 464px` keeps each card's real height once it has rendered. */
#gallery-results .site-card{content-visibility:auto;contain-intrinsic-size:auto 464px}

/* Plan badge left of the top bar icons (topbar.js): Standard / Premium / Premium Plus, or "Upgrade to Premium" on a free account. */
.tb-plan-badge{display:inline-flex;align-items:center;height:30px;padding:0 13px;margin-right:4px;border-radius:9999px;font-size:13px;font-weight:600;line-height:1;letter-spacing:.01em;white-space:nowrap;text-decoration:none;flex:none;transition:background-color .15s,opacity .15s}
.tb-plan-badge[hidden]{display:none}
.tb-plan-badge-more{margin-left:.3em}
.tb-plan-badge[data-plan=upgrade]{background:#141414;color:#fff}
.tb-plan-badge[data-plan=standard]{background:#ececee;color:#18181b}
:root[data-theme=dark] .tb-plan-badge[data-plan=standard]{background:#2a2a2d;color:#ededed}
/* Paid plans: a pill in the page's own colour (white in light, near-black in dark) with metal lettering and a faint
   glow of the same metal (けんせい 2026-10-02): Pro silver, Unlimited gold. Two background layers: the metal clipped
   to the text over the pill's colour. On white the metals are deeper so the lettering keeps its contrast. */
.tb-plan-badge:is([data-plan=pro],[data-plan=unlimited]){--pill:#fff;color:transparent;-webkit-background-clip:text,border-box;background-clip:text,border-box}
.tb-plan-badge[data-plan=pro]{--metal:linear-gradient(115deg,#3f3f46,#71717a 45%,#a1a1aa 55%,#3f3f46);background-image:var(--metal),linear-gradient(var(--pill),var(--pill));box-shadow:0 0 8px rgba(113,113,122,.3)}
.tb-plan-badge[data-plan=unlimited]{--metal:linear-gradient(115deg,#854d0e,#ca8a04 45%,#eab308 55%,#854d0e);background-image:var(--metal),linear-gradient(var(--pill),var(--pill));box-shadow:0 0 8px rgba(202,138,4,.35)}
:root[data-theme=dark] .tb-plan-badge:is([data-plan=pro],[data-plan=unlimited]){--pill:#1f1f1f}
:root[data-theme=dark] .tb-plan-badge[data-plan=pro]{--metal:linear-gradient(115deg,#a1a1aa,#f3f4f6 45%,#ffffff 55%,#a1a1aa);box-shadow:0 0 8px rgba(212,212,216,.3)}
:root[data-theme=dark] .tb-plan-badge[data-plan=unlimited]{--metal:linear-gradient(115deg,#a16207,#facc15 45%,#fde68a 55%,#ca8a04);box-shadow:0 0 8px rgba(234,179,8,.35)}
.tb-plan-badge:is([data-plan=pro],[data-plan=unlimited]):hover{filter:brightness(1.08)}
:root[data-theme=dark] .tb-plan-badge[data-plan=upgrade]{background:#f5f5f5;color:#141414}
.tb-plan-badge[data-plan=upgrade]:hover{opacity:.85}
.tb-plan-badge:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (max-width:520px){.tb-plan-badge-more{display:none}.tb-plan-badge{height:28px;padding:0 10px;margin-right:0;font-size:12px}.tb-stacked-wide .tb-nav-right{gap:2px!important}}
.tb-plan-seg button{width:auto;padding:4px 8px;font-size:11px;font-weight:600}
.tb-account-theme:has(.tb-plan-seg){height:auto;flex-direction:column;align-items:stretch;gap:8px;padding:8px 10px}
.tb-account-theme:has(.tb-plan-seg)>span{white-space:nowrap;flex:none}
.tb-plan-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;box-sizing:border-box;border-radius:14px}
.tb-plan-seg button{width:100%;min-width:0;height:32px;border-radius:10px}

/* Upgrade CTA: quiet surfaces and readable gold in both themes. */
.tb-plan-badge[data-plan=upgrade]{--upgrade-accent:#806022;background:#f0eee9;color:#302d27;height:32px;padding:0 14px;border-radius:10px;font-weight:550;letter-spacing:0;box-shadow:0 2px 6px rgb(35 29 18 / 5%);transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
.tb-plan-badge[data-plan=upgrade] .premium-label{background-image:none;color:var(--upgrade-accent)!important}
.tb-plan-badge[data-plan=upgrade]:hover{background:#e7e3db;opacity:1;box-shadow:0 3px 9px rgb(35 29 18 / 8%)}
:root[data-theme=dark] .tb-plan-badge[data-plan=upgrade]{--upgrade-accent:#e5c78c;background:#26231f;color:#ece6db;box-shadow:0 2px 8px rgb(0 0 0 / 12%)}
:root[data-theme=dark] .tb-plan-badge[data-plan=upgrade]:hover{background:#342f27;box-shadow:0 3px 10px rgb(0 0 0 / 18%)}
.tb-plan-badge[data-plan=upgrade]:focus-visible{outline:2px solid var(--upgrade-accent);outline-offset:3px}
@media(max-width:520px){.tb-plan-badge[data-plan=upgrade]{height:30px;padding:0 11px;border-radius:9px}}
@media(prefers-reduced-motion:reduce){.tb-plan-badge[data-plan=upgrade]{transition:none}}
@media(forced-colors:active){.tb-plan-badge[data-plan=upgrade] .premium-label{color:LinkText!important}.tb-plan-badge[data-plan=upgrade]:focus-visible{outline-color:Highlight}}

/* Saved and disclosed designs: large one-tap status filters, then category/search. */
.m-saved-status{display:flex;gap:12px;flex-wrap:wrap}
.m-saved-status button{display:flex;align-items:center;gap:12px;min-height:60px;padding:14px 22px;border:0;border-radius:14px;background:rgba(128,128,128,.12);color:inherit;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background 160ms ease,color 160ms ease}
.m-saved-status button svg{width:22px;height:22px;flex-shrink:0}
.m-saved-status button[aria-pressed=true]{background:#202020;color:#fff}
.m-saved-status button:hover{background:rgba(128,128,128,.23)}
.m-saved-status button[aria-pressed=true]:hover{background:#383838}
.m-saved-status button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.m-status-count{font-size:13px;opacity:.65;min-width:1ch;font-variant-numeric:tabular-nums}
:root[data-theme=dark] .m-saved-status button[aria-pressed=true]{background:#ededed;color:#171717}
:root[data-theme=dark] .m-saved-status button[aria-pressed=true]:hover{background:#fff}
.m-history-state{font-size:14px;color:var(--muted,#888)}
.m-history-state button{font:inherit;color:inherit;border:0;background:none;text-decoration:underline;cursor:pointer;padding:8px}
.m-disclosed-tag{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:12px;color:inherit;opacity:.7}
.m-disclosed-tag svg{width:15px;height:15px}
.m-saved .m-saved-bar{flex-wrap:wrap;row-gap:12px}
.m-saved .m-saved-seg{max-width:100%;overflow-x:auto;flex-shrink:0}
.m-saved .m-saved-seg button{flex-shrink:0}
@media(max-width:719px){
 .m-saved-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .m-saved-status button{position:relative;flex-direction:column;gap:8px;min-height:92px;padding:14px 6px;font-size:12px;white-space:nowrap}
 .m-status-count{position:absolute;top:10px;right:10px;font-size:11px}
 .m-saved .m-saved-find{flex:1;min-width:180px}
 .m-saved h1{font-size:28px!important;line-height:1.35!important}
}
@media(prefers-reduced-motion:reduce){.m-saved-status button{transition:none}}
.m-saved>header{flex-wrap:nowrap}
.m-saved-status,.m-saved-bar{width:100%;min-width:0;box-sizing:border-box}

.tb-account-motion{display:flex;flex-direction:column;gap:8px;padding:8px 10px;font-weight:600}
.tb-motion-seg{display:grid;grid-template-columns:1fr 1.4fr;width:100%;box-sizing:border-box}
.tb-motion-seg button{width:100%;height:32px;padding:4px;font:inherit;font-size:11px;white-space:nowrap}

/* Interactive free-plan CTA: calm at rest, gold light on interaction. */
.tb-plan-badge[data-plan=upgrade]{
 --upgrade-accent:#76531a;--upgrade-highlight:#a56f1e;--upgrade-glow:rgb(201 152 55 / 22%);
 position:relative;isolation:isolate;overflow:hidden;gap:0;height:32px;padding:0 13px;border-radius:10px;
 background:#f0eee9;color:#302d27;opacity:1;font-weight:550;letter-spacing:0;
 box-shadow:0 2px 6px rgb(35 29 18 / 5%);
 transition:transform 180ms cubic-bezier(.22,1,.36,1),background-color 180ms ease,box-shadow 180ms ease;
}
.tb-plan-badge[data-plan=upgrade]::before{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
 background:radial-gradient(85px circle at var(--upgrade-x,50%) var(--upgrade-y,50%),var(--upgrade-glow),transparent 100%);
 transition:opacity 180ms ease;
}
.tb-plan-badge[data-plan=upgrade] .tb-upgrade-arrow{
 display:inline-block;margin-left:9px;font-size:16px;font-weight:400;line-height:1;
 color:var(--upgrade-accent);opacity:.65;transition:transform 220ms cubic-bezier(.22,1,.36,1),opacity 180ms ease;
}
.tb-plan-badge[data-plan=upgrade] .premium-label{
 color:transparent!important;background-image:linear-gradient(110deg,var(--upgrade-accent) 35%,var(--upgrade-highlight) 48%,var(--upgrade-accent) 61%);
 background-size:250% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;
}
:root[data-theme=dark] .tb-plan-badge[data-plan=upgrade]{
 --upgrade-accent:#e5c78c;--upgrade-highlight:#fff5d9;--upgrade-glow:rgb(245 189 78 / 23%);
 background:#26231f;color:#ece6db;box-shadow:0 2px 8px rgb(0 0 0 / 12%);
}
@media(hover:hover) and (pointer:fine){
 .tb-plan-badge[data-plan=upgrade]:hover{background:#eae5db;opacity:1;transform:translateY(-1px);box-shadow:0 5px 14px rgb(113 78 21 / 13%)}
 :root[data-theme=dark] .tb-plan-badge[data-plan=upgrade]:hover{background:#302a21;box-shadow:0 5px 18px rgb(226 169 65 / 12%)}
 .tb-plan-badge[data-plan=upgrade]:hover::before{opacity:1}
 .tb-plan-badge[data-plan=upgrade]:hover .tb-upgrade-arrow{opacity:1;transform:translate(2px,-1px)}
 .tb-plan-badge[data-plan=upgrade]:hover .premium-label{animation:tb-upgrade-sheen 700ms ease-out both}
}
.tb-plan-badge[data-plan=upgrade]:focus-visible{outline:2px solid var(--upgrade-accent);outline-offset:3px}
.tb-plan-badge[data-plan=upgrade]:focus-visible::before{opacity:1}
.tb-plan-badge[data-plan=upgrade]:focus-visible .tb-upgrade-arrow{opacity:1;transform:translate(2px,-1px)}
.tb-plan-badge[data-plan=upgrade]:focus-visible .premium-label{animation:tb-upgrade-sheen 700ms ease-out both}
.tb-plan-badge[data-plan=upgrade]:active{transform:translateY(0) scale(.97);box-shadow:0 1px 3px rgb(35 29 18 / 12%);transition-duration:80ms}
.tb-plan-badge[data-plan=upgrade]:active::before{opacity:1}
@keyframes tb-upgrade-sheen{from{background-position:100% 0}to{background-position:0 0}}
@media(max-width:520px){.tb-plan-badge[data-plan=upgrade]{height:30px;padding:0 10px;border-radius:9px}.tb-plan-badge[data-plan=upgrade] .tb-upgrade-arrow{margin-left:6px;font-size:14px}}
@media(prefers-reduced-motion:reduce){
 .tb-plan-badge[data-plan=upgrade],.tb-plan-badge[data-plan=upgrade]::before,.tb-plan-badge[data-plan=upgrade] .tb-upgrade-arrow{transition:none!important;transform:none!important}
 .tb-plan-badge[data-plan=upgrade] .premium-label{animation:none!important}
}
@media(forced-colors:active){
 .tb-plan-badge[data-plan=upgrade] .premium-label{color:LinkText!important;background:none}
 .tb-plan-badge[data-plan=upgrade]::before{display:none}
 .tb-plan-badge[data-plan=upgrade] .tb-upgrade-arrow{color:LinkText}
 .tb-plan-badge[data-plan=upgrade]:focus-visible{outline-color:Highlight}
}

/* The mobile toolbar has a dedicated actions row; keep this CTA available there. */
@media(max-width:600px){.tb-nav .tb-nav-right>.tb-plan-badge[data-plan=upgrade]:not([hidden]){display:inline-flex!important}}

.tb-nav .tb-guest-landing{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:8px 14px;border-radius:999px;background:#eeeeea;color:#242424;text-decoration:none;font-size:13px;font-weight:600}
.tb-nav .tb-guest-landing[hidden]{display:none!important}
:root[data-theme=dark] .tb-nav .tb-guest-landing{background:#252525;color:#f3f3f3}
.tb-nav .tb-guest-landing:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.tb-nav .tb-open-gallery{display:inline-flex;align-items:center;justify-content:center;flex:none;white-space:nowrap;padding:8px 12px;color:inherit;text-decoration:none;font-size:13px;font-weight:700;border-radius:999px;transition:background-color .16s ease}
.tb-nav .tb-open-gallery .open-gallery-wordmark{display:block;width:120px;height:auto;flex:none}
.tb-nav .tb-open-gallery:hover{background:#8882}
.tb-nav .tb-open-gallery:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:600px){.tb-nav .tb-tabs .tb-open-gallery{padding:0;font-size:14px}}
/* Theme and language switches: one pill slides between the choices instead of jumping (2026-10-10). The choice is
   still the button with aria-checked; the pill only follows it. The plan and motion switches have unequal cells and
   keep the plain look. */
@supports selector(:has(*)){
:root .tb-theme-seg:not(.tb-plan-seg,.tb-motion-seg){--seg-cell:28px;position:relative;isolation:isolate}
:root .tb-theme-seg.tb-language-seg{--seg-cell:36px}
:root .tb-theme-seg:not(.tb-plan-seg,.tb-motion-seg):has(button:nth-child(2)[aria-checked=true]){--seg-at:1}
:root .tb-theme-seg:not(.tb-plan-seg,.tb-motion-seg):has(button:nth-child(3)[aria-checked=true]){--seg-at:2}
.tb-theme-seg:not(.tb-plan-seg,.tb-motion-seg)::before{content:"";position:absolute;z-index:-1;top:4px;left:4px;width:var(--seg-cell);height:28px;border-radius:9999px;background:rgba(38,38,38,.88);transform:translateX(calc(var(--seg-at,0)*(var(--seg-cell) + 2px)));transition:transform .42s cubic-bezier(.32,.72,0,1),background-color .24s ease,box-shadow .24s ease;will-change:transform}
:root:not([data-theme=dark]) .tb-theme-seg:not(.tb-plan-seg,.tb-motion-seg)::before{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
:root .tb-theme-seg:not(.tb-plan-seg,.tb-motion-seg) button{transition:color .24s ease}
:root .tb-theme-seg:not(.tb-plan-seg,.tb-motion-seg) button[aria-checked=true]{background:transparent!important;box-shadow:none!important}
@media(prefers-reduced-motion:reduce){
 .tb-theme-seg:not(.tb-plan-seg,.tb-motion-seg)::before,:root .tb-theme-seg:not(.tb-plan-seg,.tb-motion-seg) button{transition:none}
}
}

#scraper-view .scraper-scope-copy{display:grid;justify-items:center;gap:12px;text-align:center;max-width:100%}
#scraper-view .scraper-scope-copy p{max-width:100%;box-sizing:border-box}
#scraper-view .scraper-scope-copy p:not(:first-child){font-size:13px;font-weight:400;box-shadow:none}

body.statement-mode .dot-field{display:none}
body.statement-mode #content{margin-inline:auto!important;width:100%;max-width:100%;padding:0 24px;box-sizing:border-box}
.tobira-statement{--statement-ink:#181818;--statement-muted:#646464;max-width:880px;margin:56px auto 0;padding:0 32px 104px;color:var(--statement-ink);min-height:65vh}
.statement-back{display:inline-flex;align-items:center;gap:12px;font-size:13px;color:var(--statement-muted);text-decoration:none;line-height:1.6;transition:color 160ms ease}
.statement-back:hover{color:var(--statement-ink)}
.statement-back:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:2px}
.statement-header{margin-top:76px}
.statement-label{display:flex;align-items:center;gap:20px;margin:0 0 30px;color:var(--statement-muted);font-size:12px;font-weight:500;letter-spacing:.04em}
.statement-label>span:first-child{color:var(--statement-ink);font-size:11px;font-weight:700;letter-spacing:.18em}
.tobira-statement h1{margin:0;font-size:clamp(36px,5.1vw,64px);line-height:1.35;letter-spacing:-.045em;font-weight:650;text-wrap:balance;overflow-wrap:anywhere;color:var(--statement-ink)}
.statement-deck{margin:24px 0 0;font-size:14px;line-height:1.8;color:var(--statement-muted)}
.statement-body{margin-top:56px;font-size:16px;line-height:1.95;letter-spacing:.015em;overflow-wrap:anywhere}
.statement-body p{margin:0;color:var(--statement-muted)}
.statement-body .statement-lead{margin:0 0 54px;color:var(--statement-ink);font-size:clamp(18px,2vw,21px);line-height:1.95;letter-spacing:-.015em;font-weight:500}
.statement-section{display:grid;grid-template-columns:40px minmax(0,1fr);gap:18px;margin:0 0 34px}
.statement-number{padding-top:6px;color:var(--statement-muted);font-size:11px;line-height:1.8;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.statement-body h2{margin:0 0 10px;color:var(--statement-ink);font-size:20px;font-weight:600;line-height:1.6;letter-spacing:-.025em}
.statement-signature{margin:58px 0 0 58px;color:var(--statement-ink)}
.statement-signature>span{font-size:22px;font-weight:750;letter-spacing:-.06em}
.statement-signature p{margin:8px 0 0;color:var(--statement-muted);font-size:11px;line-height:1.7;letter-spacing:.04em}
html[data-theme="dark"] .tobira-statement{--statement-ink:#f3f3f3;--statement-muted:#b0b0b0}
@media(max-width:600px){.tobira-statement{margin-top:28px;padding:0 8px 72px}.statement-header{margin-top:48px}.statement-label{gap:14px;margin-bottom:24px;font-size:11px}.statement-deck{font-size:12px;margin-top:20px}.statement-body{margin-top:38px;font-size:15px;line-height:1.9}.statement-body .statement-lead{margin-bottom:40px;font-size:18px}.statement-desktop-break{display:none}.statement-section{grid-template-columns:24px minmax(0,1fr);gap:12px;margin-bottom:30px}.statement-body h2{font-size:18px}.statement-signature{margin:44px 0 0 36px}}

.statement-popup{position:fixed;right:24px;bottom:max(24px,env(safe-area-inset-bottom));z-index:1200;width:336px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:24px;border-radius:18px;background:#fff;color:#171717;box-shadow:0 12px 48px #0002}
.statement-popup[hidden]{display:none}
.statement-popup>p{font-size:12px;color:#737373;margin:0 28px 14px 0}
.statement-popup>a{display:block;text-decoration:none;color:inherit}
.statement-popup strong{display:block;font-size:19px;line-height:1.6;letter-spacing:-.025em;font-weight:600}
.statement-popup a>span{display:block;margin-top:18px;font-size:13px}
.statement-popup-close{position:absolute;right:10px;top:8px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:24px;cursor:pointer}
.statement-popup-close:hover{background:#8882}
.statement-popup a:focus-visible,.statement-popup-close:focus-visible{outline:2px solid currentColor;outline-offset:4px}
:root[data-theme=dark] .statement-popup{background:#242424;color:#f5f5f5;box-shadow:0 12px 48px #0008}
:root[data-theme=dark] .statement-popup>p{color:#aaa}
@media(max-width:600px){.statement-popup{right:16px;bottom:max(16px,env(safe-area-inset-bottom));padding:20px}}

@keyframes statement-enter{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes statement-leave{to{opacity:0;transform:scale(1.015)}}
html:has(body.statement-mode)::view-transition-new(root){animation:statement-enter .38s cubic-bezier(.22,1,.36,1) both;transform-origin:75% 75%}
html:has(body.statement-mode)::view-transition-old(root){animation:statement-leave .18s ease-out both}
@media(prefers-reduced-motion:reduce){html:has(body.statement-mode)::view-transition-new(root),html:has(body.statement-mode)::view-transition-old(root){animation:none}}

/* Search category words follow the filter panel; previews float beside the label. */
.tb-category-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px}
.tb-category-term{display:inline-flex;align-items:baseline;justify-self:start;gap:7px;max-width:100%;padding:5px 0;border:0;border-radius:0;background:none;color:#808080;font:inherit;font-size:16px;line-height:1.45;font-weight:600;text-decoration:none;text-align:left;cursor:pointer;transition:color 150ms ease-out}
.tb-category-term span{min-width:0;overflow-wrap:anywhere}
.tb-category-term small{flex:none;font-size:11px;font-weight:400;color:#929292}
.tb-category-term:is(:hover,:focus-visible,[aria-pressed=true]){color:#141414}
.tb-category-term:focus-visible{outline:2px solid #7b65dd;outline-offset:4px;border-radius:3px}
.tb-category-peek{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:min(260px,calc(100vw - 24px));padding:8px;border:0;border-radius:16px;background:#fff;color:#171717;box-shadow:0 16px 48px #0003;text-decoration:none;opacity:0;transform:translateY(4px);transition:opacity 150ms ease-out,transform 150ms ease-out,display 150ms allow-discrete,overlay 150ms allow-discrete}
.tb-category-peek:popover-open{opacity:1;transform:none}
@starting-style{.tb-category-peek:popover-open{opacity:0;transform:translateY(4px)}}
.tb-category-peek:not(:popover-open){pointer-events:none}
.tb-category-peek :is(img,video){display:block;width:100%;aspect-ratio:1.6;object-fit:cover;object-position:top;border-radius:10px}
.tb-category-peek>span{display:grid;gap:2px;margin:8px 4px 2px}
.tb-category-peek strong,.tb-category-peek small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-category-peek strong{font:600 14px/20px var(--tobira-font,system-ui)}
.tb-category-peek small{font:400 12px/16px var(--tobira-font,system-ui);color:#808080}
.tb-category-peek:focus-visible{outline:2px solid #7b65dd;outline-offset:3px}
:root[data-theme=dark] .tb-category-term{color:#aaa}
:root[data-theme=dark] .tb-category-term:is(:hover,:focus-visible,[aria-pressed=true]){color:#eee}
:root[data-theme=dark] .tb-category-peek{background:#262626;color:#eee;box-shadow:0 16px 48px #0006}
@media(max-width:600px){.tb-category-term{font-size:15px}.tb-category-terms{column-gap:16px}}
@media(prefers-reduced-motion:reduce){.tb-category-term,.tb-category-peek{transition:none}}