:root{--tb-preview-radius:28px}
/* Websites gallery: the Mobbin layout stays; small controls take the React Bits Pro shapes
   (pro.reactbits.dev, measured 2026-09-25; the .pb-* controls are defined in component-detail.css).
   Search fields: 36px, white, 1px #e5e5e5, radius 10.8px, 14px. Sidebar rows and headings: 32px, 14px.
   Filter options: Pro toggle buttons (28px, radius 8.8px, 13px/500), selected = Pro primary (#171717 / #fafafa). */
:root{--pb-fg:#0a0a0a;--pb-muted:#525252;--pb-dim:#737373;--pb-border:#e5e5e5;--pb-accent:#f5f5f5;--pb-primary:#171717;--pb-shadow-xs:0 1px 2px #0000000d}

/* Search fields in the sidebar */
#gallery-sidebar :is(#filters,.sidebar-search,.filter-search) input,#gallery-sidebar input[type=search]{height:36px;min-height:36px;padding:0 12px;border:1px solid var(--pb-border)!important;border-radius:10.8px!important;background-color:#fff!important;box-shadow:var(--pb-shadow-xs);font-size:14px;line-height:20px;color:var(--pb-fg)}
#gallery-sidebar input[type=search]::placeholder{color:var(--pb-dim)}
#gallery-sidebar #filters{padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
#gallery-sidebar #filters label{position:relative;display:block;width:100%;padding:0!important}
#gallery-sidebar #filters label svg{position:absolute;left:11px;top:50%;translate:0 -50%;width:16px;height:16px;color:var(--pb-dim)}
#gallery-sidebar #filters label input{width:100%;padding-left:34px}
/* Focus: the border darkens; no ring or shadow around the field. */
#gallery-sidebar :is(#search,#category-search,#component-search):is(:focus,:focus-visible){outline:none!important;border-color:#737373!important;box-shadow:none!important}

/* Filter panel heading and reset */
#filter-panel .panel-heading strong{font-size:14px;line-height:20px;font-weight:600;color:#0a0a0ab3;letter-spacing:-.025em}
#filter-panel #clear-filters{height:28px;padding:0 8px;border:0;border-radius:8.8px;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--pb-muted);cursor:pointer;transition:background-color .15s}
#filter-panel #clear-filters:hover{background:var(--pb-accent);color:var(--pb-fg)}
#filter-panel .filter-search{font-size:13px;font-weight:500;color:var(--pb-muted)}

/* Filter groups: Pro sidebar rows with a lucide chevron instead of the triangle */
#categories .category-group>summary{display:flex;align-items:center;gap:8px;min-height:32px;padding:6px 8px;border-radius:8.8px;list-style:none;font-size:14px;line-height:20px;letter-spacing:-.025em;color:var(--pb-fg);cursor:pointer;transition:background-color .15s}
#categories .category-group>summary::-webkit-details-marker{display:none}
#categories .category-group>summary::marker{content:''}
#categories .category-group>summary::before{content:'';order:9;margin-left:auto;width:16px;height:16px;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/16px no-repeat;color:var(--pb-dim);transition:rotate .2s cubic-bezier(.23,1,.32,1)}
#categories .category-group[open]>summary::before{rotate:90deg}
#categories .category-group>summary:hover{background:var(--pb-accent)}
#categories .category-group>summary svg{width:16px;height:16px;color:var(--pb-fg)}
#categories .category-subgroup h4{margin:12px 8px 6px;font-size:12px;line-height:16px;font-weight:500;color:var(--pb-dim)}

/* Filter options: Pro toggle buttons */
#categories .category-options{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px}
#categories [data-category]{display:inline-flex;align-items:center;gap:6px;min-height:28px;height:auto;padding:4px 10px;border:1px solid var(--pb-border);border-radius:8.8px;background:#fff;box-shadow:var(--pb-shadow-xs);font:inherit;font-size:13px;line-height:18px;font-weight:500;color:var(--pb-fg);text-align:left;cursor:pointer;transition:background-color .15s,transform .2s}
#categories [data-category]:hover{background:var(--pb-accent)}
#categories [data-category]:active{transform:scale(.97)}
#categories [data-category] small{font-size:12px;color:var(--pb-dim)}
#categories [data-category][aria-pressed=true]{background:var(--pb-primary);border-color:var(--pb-primary);color:#fafafa}
#categories [data-category][aria-pressed=true] small{color:#fafafab3}

/* Card save button: appears on hover or keyboard focus, top-right of the thumbnail (Mobbin placement, Pro button) */
.site-card{position:relative}
.site-card .site-save{position:absolute;top:10px;right:10px;z-index:2;opacity:0;transition:opacity .15s,background-color .15s}
.site-card:hover .site-save,.site-card:focus-within .site-save,.site-card .site-save[aria-pressed=true]{opacity:1}
.site-card .site-save[aria-pressed=true] svg,.site-bar [data-save][aria-pressed=true] svg{fill:currentColor!important}
@media(hover:none){.site-card .site-save{opacity:1}}

/* Detail toolbar: Pro segmented Preview / Sections (links) */
.pb-seg a{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 10px;border:1px solid transparent;border-radius:8.8px;color:var(--pb-muted);font-size:13px;font-weight:500;white-space:nowrap;transition:color .15s,background-color .15s}
.pb-seg a svg{width:14px;height:14px}
.pb-seg a:hover{color:var(--pb-fg)}
.pb-seg a[aria-current]{background:#fff;border-color:#e5e5e599;color:var(--pb-fg);box-shadow:var(--pb-shadow-xs)}
.site-bar{margin:0 0 16px}
.mobbin-site .website-heading{margin-bottom:32px}

/* Component search: the same Pro field as the site search, with the search icon painted inside. */
#gallery-sidebar #component-search{padding-left:34px!important;background-color:#fff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:11px 50%!important;background-size:16px 16px!important}
#gallery-sidebar .sidebar-search{display:block;padding:0!important}
#gallery-sidebar #component-search{width:100%}

/* On the white dotted ground, light thumbnails need an edge: a neutral hairline (Mobbin's card treatment), not a coloured frame. */
.gallery-grid .thumbnail,.website-related-grid .thumbnail,.website-related-grid>a>img,.cd-similar img,.website-section img,.website-section video{box-shadow:0 0 0 1px #0000000f}
.gallery-grid .thumbnail{background:#fafafa}
/* Long single-word names (e.g. "HeroSectionWithGradient") wrap inside the card instead of widening the page on phones. */
.site-card h2,.site-card p,.website-related-grid h3,.website-related-grid p{overflow-wrap:anywhere;min-width:0}

/* React Bits sidebar picker (css/sidebar.css .sidebar-picker, light theme values). */
.sidebar-picker{position:relative;display:grid;flex:0 0 auto;grid-template-columns:repeat(var(--sp-n,3),1fr);gap:2px;margin:0 14px 10px;padding:3px;border:1px solid rgba(24,24,27,.14);border-radius:10px;background:#fff}
.sidebar-picker__pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px - 2px * (var(--sp-n,3) - 1)) / var(--sp-n,3));border-radius:7px;background:rgba(24,24,27,.11);transform:translateX(calc(var(--sp-i,0) * (100% + 2px)));transition:transform 240ms cubic-bezier(.23,1,.32,1);pointer-events:none}
.sidebar-picker[data-none] .sidebar-picker__pill{opacity:0}
.sidebar-picker__item{position:relative;z-index:1;display:grid;place-items:center;height:32px;padding:0;border:0;border-radius:7px;background:transparent;color:#71717a;cursor:pointer;outline:none;transition:color 160ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.sidebar-picker__item svg{width:18px;height:18px}
.sidebar-picker__item:hover,.sidebar-picker__item[data-active]{color:#18181b}
.sidebar-picker__item:active{transform:scale(.94)}
.sidebar-picker__item:focus-visible{box-shadow:0 0 0 2px #a1a1a1}
.sidebar-picker-tip{position:fixed;z-index:1200;translate:0 -50%;padding:6px 10px;border:1px solid rgba(24,24,27,.14);border-radius:8px;background:#fff;color:#18181b;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;pointer-events:none}
@media(prefers-reduced-motion:reduce){.sidebar-picker__pill{transition:none}}
/* Collapsed sidebar: the three icons stack in the rail. */
.sidebar-collapsed .sidebar-picker{grid-template-columns:1fr;margin:0 8px 10px}
.sidebar-collapsed .sidebar-picker__pill{width:auto;right:3px;height:32px;bottom:auto;transform:translateY(calc(var(--sp-i,0) * (100% + 2px)))}
.sidebar-collapsed .filter-rail{top:calc(72px + 116px)!important}
/* The bottom switcher and the "all components" row are replaced by the picker. */
#gallery-switcher{display:none!important}
#component-categories>a[href="#catalog"]:first-child{display:none!important}
/* The scraper page keeps the sidebar, showing only its head and the picker. */
.scraper-mode #gallery-sidebar{display:block!important;height:auto!important}
.scraper-mode #sidebar-inner,.scraper-mode #gallery-sidebar .filter-rail{display:none!important}

/* First paint: the sidebar appears once its height is known, without animating from the default height. */
body:not(.sidebar-ready) #gallery-sidebar{opacity:0;transition:none!important}
#gallery-sidebar{transition-property:width,height,opacity}
body.sidebar-ready #gallery-sidebar{opacity:1}

/* Gallery / immersive switch: four squares here in the gallery, three lines in the immersive view (gallery-menu.js .tobira-switcher). */
#standalone-dock .view-switch{display:grid;place-items:center;width:var(--sidebar-width,64px);max-width:64px;height:56px;border-radius:999px;background:#fffffff2;color:#191919;box-shadow:0 4px 24px #17171712;transition:background-color .18s ease}
#standalone-dock .view-switch:hover{background:#fff}
#standalone-dock .view-switch svg{width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#standalone-dock .view-switch rect{transition:x .38s cubic-bezier(.22,1,.36,1),y .38s cubic-bezier(.22,1,.36,1),width .38s cubic-bezier(.22,1,.36,1),height .38s cubic-bezier(.22,1,.36,1),rx .38s cubic-bezier(.22,1,.36,1)}
#standalone-dock .view-switch[data-active="work"] rect:nth-child(1){x:4px;y:6px;width:16px;height:.01px;rx:0px}
#standalone-dock .view-switch[data-active="work"] rect:nth-child(2){x:4px;y:12px;width:8px;height:.01px;rx:0px}
#standalone-dock .view-switch[data-active="work"] rect:nth-child(3){x:12px;y:12px;width:8px;height:.01px;rx:0px}
#standalone-dock .view-switch[data-active="work"] rect:nth-child(4){x:4px;y:18px;width:16px;height:.01px;rx:0px}
@media(prefers-reduced-motion:reduce){#standalone-dock .view-switch rect{transition:none}}

/* Saved designs: the workspace layout (profile page) — filters in the sidebar, a white full-height panel for the page. */
body.bookmarks-mode main#content{position:fixed!important;top:16px;bottom:16px;left:calc(var(--sidebar-width) + 32px);right:16px;margin:0!important;max-width:none!important;padding:48px 48px 64px!important;background:#fff;border-radius:24px;box-shadow:0 8px 32px #1717170c;overflow:auto;transition:left .22s ease}
body.bookmarks-mode .tools-entry{display:none!important}
.saved-page>header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-right:104px}
.saved-page h1{margin:0;font-size:36px;line-height:40px;font-weight:600;letter-spacing:-.025em;color:#0a0a0a}
.saved-find{position:relative;display:block;width:min(320px,100%)}
.saved-find svg{position:absolute;left:11px;top:50%;translate:0 -50%;width:16px;height:16px;color:#737373}
.saved-find input{width:100%;height:36px;padding:0 12px 0 34px;border:1px solid #e5e5e5;border-radius:10.8px;background:#fff;box-shadow:0 1px 2px #0000000d;font:inherit;font-size:14px;color:#0a0a0a}
.saved-find input:focus{outline:none;border-color:#737373}
.saved-count{margin:24px 0 16px;font-size:13px;font-weight:500;color:#525252}
.saved-grid .thumbnail video{display:block;width:100%;height:100%;object-fit:cover}
.saved-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:96px 0;text-align:center}
.saved-empty p{margin:0;font-size:14px;color:#525252}
@media(max-width:760px){body.bookmarks-mode main#content{left:calc(var(--sidebar-width) + 24px);right:8px;top:8px;bottom:8px;padding:72px 20px 48px!important;border-radius:20px}.saved-page>header{padding-right:0}.saved-page h1{font-size:28px;line-height:34px}}
body.bookmarks-mode #gallery-sidebar .filter-rail{display:none!important}

/* Card lists in the Mobbin site-cell layout (MOBBIN/rebuild/discover-sites.html, SiteCell): a 1.22 box with 28px
   corners filled rgba(64,64,64,.06) (.08 on hover, 0.3s), written as the opaque greys those make on white (#f4f4f4 / #f0f0f0) so the dots stay behind the box, the screen centred at 62% of its height (1.6 wide,
   8px corners, 0.5px hairline), 16px under it the name (16px/600, 22px line) and a 14px grey line.
   Columns: auto-fill, at most 3, minimum 300px / 360px from an 840px-wide list / 394px from 1280px;
   gaps 48px x 16px (20px x 12px under a 720px-wide list). The list sits 352px narrower than the window
   beside the sidebar (108px under 760px), so those list widths are 1072 / 1192 / 1632px of window. */
body #content .gallery-grid{--cell-gap:16px;--cell-min:360px;gap:48px var(--cell-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,max(var(--cell-min),(100% - 2 * var(--cell-gap)) / 3)),1fr))}
@media(min-width:1632px){body #content .gallery-grid{--cell-min:394px}}
@media(max-width:1191px){body #content .gallery-grid{--cell-min:300px}}
@media(max-width:1071px){body #content .gallery-grid{--cell-gap:12px;row-gap:20px}}
body #content .gallery-grid .site-card{position:relative;min-width:0}
body #content .gallery-grid .site-card>a,body #content .gallery-grid .site-card>div{display:flex;flex-direction:column}
body #content .gallery-grid .site-card .thumbnail{display:flex;align-items:center;justify-content:center;aspect-ratio:1.22;height:auto;margin:0 0 16px;border-radius:var(--tb-preview-radius);overflow:hidden;background:#f4f4f4;box-shadow:none;transition:background-color .3s ease-out}
body #content .gallery-grid .site-card:hover .thumbnail,body #content .gallery-grid .site-card:focus-within .thumbnail{background:#f0f0f0}
body #content .gallery-grid .site-card .thumbnail>img,body #content .gallery-grid .site-card .thumbnail>video{display:block;width:auto;max-width:92%;height:62%;aspect-ratio:1.6016;object-fit:cover;object-position:top;border-radius:8px;box-shadow:0 0 0 .5px rgba(0,0,0,.1);background:rgba(64,64,64,.08);transform:none!important;transition:none}
body #content .gallery-grid .site-card h2{margin:0;font-size:16px;font-weight:600;line-height:22px;color:#141414;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body #content .gallery-grid .site-card p{margin:0;font-size:14px;line-height:20px;color:#707070}
body #content .gallery-grid .site-card .site-save{top:16px;right:16px}
/* Double-click a card: the picture rises and the site's tags by facet fill the space under it (gallery.js siteTraits). */
body #content .gallery-grid .site-card .thumbnail{position:relative}
body #content .gallery-grid .site-card .thumbnail>:is(img,video){translate:0 0;scale:1;transform-origin:50% 0;transition:translate .32s cubic-bezier(.2,.7,.2,1),scale .32s cubic-bezier(.2,.7,.2,1)}
body #content .gallery-grid .site-card.traits-open .thumbnail>:is(img,video){translate:0 -22%;scale:.82}
.site-traits{position:absolute;left:4%;right:4%;bottom:4%;height:38%;margin:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;opacity:0;visibility:hidden;translate:0 8px;transition:opacity .22s ease,translate .32s cubic-bezier(.2,.7,.2,1),visibility 0s .32s;pointer-events:none}
.site-card.traits-open .site-traits{opacity:1;visibility:visible;translate:0 0;transition:opacity .24s ease .06s,translate .32s cubic-bezier(.2,.7,.2,1),visibility 0s;pointer-events:auto}
.site-traits>div{display:flex;align-items:center;gap:10px;min-width:0}
.site-traits dt{flex:none;width:5.5em;font-size:11px;line-height:20px;color:#8a8a8a;white-space:nowrap}
.site-traits dd{display:flex;gap:4px;min-width:0;margin:0;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.site-traits [data-meta-pick]{display:inline-flex;align-items:center;gap:5px;flex:none;padding:0 9px;font-size:11px;line-height:20px;border-radius:999px;background:#fff;color:#333;cursor:pointer;transition:background-color .15s}
.site-traits [data-meta-pick]:hover{background:#141414;color:#fff}
.site-traits .color-label-dot{display:inline-block;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
html[data-theme=dark] .site-traits dt{color:#8f8f8f}
html[data-theme=dark] .site-traits [data-meta-pick]{background:#2a2a2a;color:#e0e0e0}
html[data-theme=dark] .site-traits [data-meta-pick]:hover{background:#e0e0e0;color:#141414}
@media (max-width:640px){body #content .gallery-grid .site-card.traits-open .thumbnail>:is(img,video){translate:0 -24%;scale:.74}.site-traits{height:42%;gap:2px}.site-traits dt,.site-traits [data-meta-pick]{line-height:18px}}
@media (prefers-reduced-motion:reduce){body #content .gallery-grid .site-card .thumbnail>:is(img,video),.site-traits{transition:none}}
/* The component list had its own !important column rule (4 columns of 230px); it follows the same cells now. */
body #content .gallery-grid.unified-components{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(var(--cell-min),(100% - 2 * var(--cell-gap)) / 3)),1fr))!important}
/* カテゴリー / スタイル are one flat list each (no sub-heading), so the options get the space the heading used to give. */
#categories .category-subgroup>.category-options:first-child{margin-top:8px}

/* Library home (#home, home.js). Content order from the source site home; layout from Mobbin (SiteCell shelves);
   buttons and icons are React Bits Pro. Categories are not repeated here: each list shows its own in the sidebar.
   Sections are 72px apart, their headings 20px/600. */
body.home-mode main#content{padding-top:88px}
.home{display:flex;flex-direction:column;gap:72px}
.home-featured{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
.home-featured h1{margin:0 0 16px;font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:#141414}
.home-featured-desc{margin:0 0 12px;font-size:16px;line-height:24px;color:#707070;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.home-featured-by{margin:0 0 24px;font-size:14px;line-height:20px;color:#707070}
.home-featured-actions{display:flex;align-items:center;gap:8px}
.home-featured .site-save{position:static;opacity:1}
.home-next{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:40px;font-size:14px;line-height:20px;color:#707070}
.home-featured-media{display:block;aspect-ratio:1.6;border-radius:28px;overflow:hidden;background:#f4f4f4}
.home-featured-media video{display:block;width:100%;height:100%;object-fit:cover}
.home-shelf>header,.home-spotlight>header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}
.home h2{margin:0;font-size:20px;font-weight:600;line-height:28px;color:#141414}
.home-more{display:inline-flex;align-items:center;gap:2px;padding:0;border:0;background:none;font:inherit;font-size:14px;line-height:20px;color:#707070;text-decoration:none;cursor:pointer;transition:color .2s}
.home-more svg{width:16px;height:16px}
.home-more:hover{color:#141414}
.home-spotlight{padding:24px;border-radius:28px;background:#f4f4f4}
.home-spotlight>header p{margin:4px 0 0;font-size:14px;line-height:20px;color:#707070}
body #content .home-spotlight .gallery-grid .site-card .thumbnail{background:#fff}
body #content .home-spotlight .gallery-grid .site-card:hover .thumbnail{background:#fafafa}
.home-libs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px 16px}
.home-lib{display:flex;align-items:center;gap:8px;min-width:0;color:inherit;text-decoration:none}
.home-lib img{flex:none;width:40px;height:40px;border-radius:30%;object-fit:cover;background:#f4f4f4}
.home-lib span{display:flex;flex-direction:column;min-width:0}
.home-lib b{font-size:16px;font-weight:600;line-height:22px;color:#141414;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-lib small{font-size:14px;line-height:20px;color:#707070}
@media(max-width:1100px){.home-featured{grid-template-columns:1fr}}
@media(max-width:760px){body.home-mode main#content{padding-top:72px}.home{gap:56px}.home-featured h1{font-size:32px}.home-spotlight{padding:16px;border-radius:20px}.home-spotlight>header{flex-direction:column;align-items:flex-start}}
.home-lib-initial{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:30%;background:#f4f4f4;font-size:16px;font-weight:600;color:#141414}
/* The home has no filters: the folded sidebar shows only the list switcher there. */
body.home-mode .filter-rail{display:none!important}
/* Section headings keep their "すべて見る" link on one line. */
.home-more{flex:none;white-space:nowrap}
.home h2{min-width:0}
.home-shelf>header{flex-wrap:wrap;row-gap:4px}
.home h2{white-space:nowrap}
/* Moving card thumbnails: the clip fills the card exactly like the still it replaces */
.gallery-grid .thumbnail video{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* Main-area search bar on the Websites list (2026-09-26). The sidebar #search stays in sync with it. */
.gallery-search{position:relative;display:flex;align-items:center;max-width:640px;margin:0 0 24px}
.gallery-search label{position:relative;display:block;flex:1}
.gallery-search label svg{position:absolute;left:16px;top:50%;translate:0 -50%;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;color:var(--pb-dim);pointer-events:none}
.gallery-search input{width:100%;height:48px;padding:0 44px 0 46px;border:1px solid var(--pb-border);border-radius:14px;background:#fff;box-shadow:var(--pb-shadow-xs);font:inherit;font-size:15px;color:var(--pb-fg);transition:border-color .15s,box-shadow .15s}
.gallery-search input::placeholder{color:var(--pb-dim)}
.gallery-search input::-webkit-search-cancel-button{display:none}
.gallery-search input:focus{outline:none;border-color:#737373;box-shadow:0 0 0 3px #0000000f}
.gallery-search input:focus-visible{outline:2px solid var(--pb-primary);outline-offset:2px}
.gallery-search .search-clear{position:absolute;right:8px;top:50%;translate:0 -50%;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:var(--pb-dim);font-size:20px;line-height:1;cursor:pointer}
.gallery-search .search-clear:hover{background:var(--pb-accent);color:var(--pb-fg)}
@media(max-width:760px){.gallery-search{margin-bottom:16px}.gallery-search input{height:44px;font-size:14px}}
.home-featured-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* Website Flows (#site/<id>/flows): Mobbin's Flows — each flow is its name with the screen count, then its screens in
   order left to right; screens keep the Mobbin web screen (1.6, 8px corners, hairline), numbered with the page name. */
.website-flows{display:flex;flex-direction:column;gap:48px}
.website-flow>header{display:flex;align-items:baseline;gap:12px;margin:0 0 16px}
.website-flow h2{margin:0;font-size:20px;font-weight:600;line-height:28px;color:#141414}
.website-flow>header span{font-size:14px;line-height:20px;color:#707070}
.website-flow-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:16px;margin:0;padding:0 0 8px;list-style:none;overflow-x:auto}
.website-flow-steps li{min-width:0}
.website-flow-steps img{display:block;width:100%;aspect-ratio:1.6;object-fit:cover;object-position:top;border-radius:8px;box-shadow:0 0 0 .5px rgba(0,0,0,.1);background:#f4f4f4}
.website-flow-steps p{display:flex;align-items:baseline;gap:8px;margin:12px 0 0;font-size:14px;line-height:20px;color:#141414}
.website-flow-steps b{font-weight:600;color:#707070}
/* Website Sections grid = Mobbin's (site-sections-tab.html): 2 columns 24px apart (12px under 720px), every section in
   the same 1.6 frame with 8px corners on the light grey, the whole section fitted inside, its name 16px under it. */
body #content .website-sections{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
body #content .website-section img,body #content .website-section video{width:100%;height:auto;aspect-ratio:1.6016;object-fit:contain;object-position:center;border-radius:8px;background:#f4f4f4;box-shadow:0 0 0 .5px rgba(0,0,0,.1)}
body #content .website-section h2{margin:16px 0 0;font-size:16px;font-weight:600;line-height:22px;color:#141414}
@media(max-width:1071px){body #content .website-sections{gap:12px}}
@media(max-width:600px){body #content .website-sections{grid-template-columns:1fr}}
body #content .website-section p{margin:4px 0 0;font-size:14px;line-height:20px;color:#707070}
/* Flows page with Mobbin's flow sidebar (from the Mobbin Flows screen, 2026-09-27): a sticky column with a pill search
   field (40px, #f0f0f0) and a tree — groups and items 16px/500 in #525252 on 38px rows, each level indented 24px,
   a chevron after an open group's name. Screens sit to the right. */
.website-flows-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;align-items:start}
.flow-tree{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto}
.flow-search{position:relative;display:block;margin:0 0 16px}
.flow-search svg{position:absolute;left:14px;top:50%;translate:0 -50%;width:16px;height:16px;color:#141414;pointer-events:none}
.flow-search input{width:100%;height:40px;padding:0 16px 0 40px;border:0;border-radius:999px;background:#f0f0f0;font:inherit;font-size:14px;color:#141414}
.flow-search input::placeholder{color:#8a8a8a}
.flow-search input:focus-visible{outline:2px solid #141414;outline-offset:2px}
.flow-tree ul{margin:0;padding:0;list-style:none}
.flow-tree ul ul{padding-left:24px}
.flow-tree-group,.flow-tree a{display:flex;align-items:center;gap:6px;width:100%;min-height:38px;padding:0;border:0;background:none;font:inherit;font-size:16px;font-weight:500;line-height:22px;color:#525252;text-align:left;text-decoration:none;cursor:pointer;transition:color .2s}
.flow-tree-group span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flow-tree-group svg{flex:none;width:16px;height:16px;transition:transform .2s}
.flow-tree-group[aria-expanded=true] svg{transform:rotate(180deg)}
.flow-tree-group:hover,.flow-tree a:hover,.flow-tree a[aria-current]{color:#141414}
@media(max-width:900px){.website-flows-layout{grid-template-columns:1fr}.flow-tree{position:static;max-height:none}}
.website-flows-layout .website-flow-steps{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));overflow:visible;row-gap:24px}

/* Section page, "この型を使うなら" (rights policy §10): each type the section uses is one row — the section's own use
   on the left as reference (captioned as such), the type name and a link to TOBIRA's components of that type on the right. */
.section-types>header{margin:0 0 8px}
.section-types-note{margin:0 0 24px;font-size:14px;line-height:20px;color:#707070}
.section-types-list{display:flex;flex-direction:column;gap:16px}
.section-type{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:center;padding:16px;border-radius:28px;background:#f4f4f4}
.section-type figure{margin:0;min-width:0}
.section-type img{display:block;max-width:100%;max-height:240px;margin:0 auto;border-radius:8px;box-shadow:0 0 0 .5px rgba(0,0,0,.1);background:#fff}
.section-type figcaption{margin:8px 0 0;font-size:12px;line-height:16px;color:#707070;text-align:center}
.section-type h3{margin:0 0 12px;font-size:20px;font-weight:600;line-height:28px;color:#141414}
@media(max-width:900px){.section-type{grid-template-columns:1fr}}

/* TOBIRA edition component page (#component-page/tobira/<folder>, tobira-edition.js): the live demo in the Pro preview
   box (the frame narrows to 768 / 390px with the width switch), the code panel, what was checked and the source notice. */
.te .te-frame{height:640px;margin:0 auto;transition:width .2s ease}
.te .te-frame iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.te-code .pb-code pre{margin:0;max-height:560px;overflow:auto;padding:16px;font-size:12px;line-height:18px}
.te-note{margin:12px 0 0;font-size:14px;line-height:20px;color:#525252}
.te-quality{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;font-size:14px;line-height:20px;color:#0a0a0a}
.te-quality li{display:flex;align-items:center;gap:8px}
.te-quality svg{width:16px;height:16px;flex:none;color:#0a0a0a}
.te-notice{margin:0;max-height:240px;overflow:auto;padding:16px;border-radius:12px;background:#f5f5f5;font-size:12px;line-height:18px;white-space:pre-wrap}
@media(max-width:760px){.te .te-frame{height:520px}}
/* Japanese headings break between phrases, not inside a word (e.g. 「ぼかしながら現れ／る」 at 390px). */
.te .website-heading h1{word-break:auto-phrase;text-wrap:balance}
.te .cd-description{word-break:auto-phrase;text-wrap:pretty}
/* Site icon above the website page title, as Mobbin's site page (site-page.html): 96px (64px under 720px), corners 30%,
   a 0.5px inset hairline, 24px (16px) above the title. A placeholder until site icons are captured: the grey cell
   colour with the site's first letter; site.icon replaces it with the image. */
.site-icon{position:relative;display:grid;place-items:center;width:96px;height:96px;margin:0 0 24px;border-radius:30%;overflow:hidden;background:#f4f4f4}
.site-icon::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1);pointer-events:none}
.site-icon img{display:block;width:100%;height:100%;object-fit:cover}
.site-icon span{font-size:40px;font-weight:600;line-height:1;color:#525252}
@media(max-width:719px){.site-icon{width:64px;height:64px;margin-bottom:16px}.site-icon span{font-size:28px}}

/* Mobbin's card label (discover-sites.html): 40px icon at 30% radius, 8px gap, name 16/22 600, one grey line 14/20 */
body #content .gallery-grid .site-card .site-label{display:flex;align-items:center;column-gap:8px;min-width:0}
body #content .gallery-grid .site-card .site-label>div{display:flex;flex-direction:column;min-width:0;flex:1}
body #content .gallery-grid .site-card .site-label-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:30%;background:#f4f4f4;color:#525252;font-size:18px;font-weight:600;line-height:1}
body #content .gallery-grid .site-card .site-label h2{letter-spacing:.2px}
body #content .gallery-grid .site-card .site-label p{font-weight:456;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Mobbin's site page head (site-page.html, measured 2026-09-26): 96px icon 32px under the nav, 24px, title 44/48,
   24px, Platform / Category / Style 32px apart, 24px, Save (black) + Visit site (hairline) 44px pills 8px apart,
   40px, a 64px row with the version select, a rule and the underline tabs, then the stage 8px below. */
body.no-sidebar main#content:has(>.mobbin-site){padding-top:32px!important}
.mobbin-site{padding-top:0!important}
.mobbin-site .website-heading{margin:0!important}
.mobbin-site .website-heading h1{margin:0 0 24px;font-size:44px;line-height:48px;font-weight:652;letter-spacing:-.4px;color:#141414}
.mobbin-site .website-meta{gap:16px 32px;margin:0 0 24px}
.mobbin-site .website-meta>div{display:flex;flex-direction:column;row-gap:2px}
.mobbin-site .website-meta dt{margin:0;font-size:14px;line-height:20px;font-weight:456;letter-spacing:.2px;color:#707070}
.mobbin-site .website-meta dd{font-size:16px;line-height:24px;font-weight:600;letter-spacing:.2px;color:#141414}
.site-actions{display:flex;column-gap:8px;margin:0 0 40px}
.m-btn{display:inline-flex;align-items:center;height:44px;padding:0 16px;border:0;border-radius:9999px;font:inherit;font-size:16px;line-height:22px;font-weight:600;letter-spacing:.2px;text-decoration:none;cursor:pointer;white-space:nowrap}
.m-btn-dark{background:#141414;color:#fff}
.m-btn-dark:hover{background:#2e2e2e}
.m-btn-line{background:transparent;color:#141414;box-shadow:inset 0 0 0 1px rgba(64,64,64,.16)}
.m-btn-line:hover{background:rgba(64,64,64,.06)}
.m-btn:focus-visible{outline:2px solid #141414;outline-offset:2px}
.site-tabs{display:flex;align-items:center;height:64px;margin:0 0 8px}
.site-version-wrap{position:relative;display:flex;align-items:center;column-gap:24px}
.site-version{display:flex;align-items:center;column-gap:6px;height:36px;padding:0;border:0;background:none;font:inherit;font-size:16px;line-height:22px;font-weight:600;letter-spacing:.2px;color:#141414;cursor:pointer}
.site-version svg{width:20px;height:20px}
.site-tabs-rule{width:1px;height:24px;background:rgba(64,64,64,.16)}
.site-version-menu{position:absolute;top:44px;left:0;z-index:20;min-width:240px;padding:8px;border-radius:24px;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}
.site-version-menu[hidden]{display:none}
.site-version-menu [role=menuitemradio]{display:flex;align-items:center;column-gap:8px;height:40px;padding:0 12px;border-radius:12px;font-size:16px;line-height:22px;font-weight:600}
.site-version-menu [role=menuitemradio] span{flex:1;color:rgba(255,255,255,.56);font-weight:456;font-size:14px}
.site-version-menu svg{width:16px;height:16px}
.site-tabs-main{display:flex;align-items:center;flex:1;min-width:0;padding-left:24px}
.site-tab-links{display:flex;column-gap:24px}
.site-tab-links a{display:block;padding:4px 0;border-bottom:2px solid transparent;font-size:16px;line-height:22px;font-weight:600;letter-spacing:.2px;color:#878787;text-decoration:none}
.site-tab-links a:hover{color:#141414}
.site-tab-links a[aria-current]{color:#141414;border-bottom-color:#141414}
.site-tabs-count{margin:0 0 0 auto;font-size:13px;line-height:16px;font-weight:456;letter-spacing:.2px;color:#707070;text-align:right}
.mobbin-site .site-bar{display:none}
@media(max-width:719px){.mobbin-site .website-heading h1{font-size:32px;line-height:36px}.site-tabs{height:auto;flex-wrap:wrap;row-gap:8px;padding:8px 0}}
/* Mobbin's section card (site-sections-tab.html): an 8px-round box at 1.6:1 on a 6% grey, the shot full width and centred */
body #content .website-section-frame{display:flex;flex-direction:column;justify-content:safe center;aspect-ratio:1.6016;overflow:hidden;border-radius:8px;background:rgba(64,64,64,.06)}
body #content .website-section-frame img{flex:none;width:100%;height:auto;aspect-ratio:auto;object-fit:initial;border-radius:0;background:none;box-shadow:none}

/* Mobbin's section sheet (section-modal.html, measured 2026-09-26) */
.m-sheet{--sheet-head-h:72px;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:32px;border:0;background:transparent;overflow:visible;box-sizing:border-box}
.m-sheet:not([open]){display:none}
.m-sheet::backdrop{background:rgba(0,0,0,.6)}
.m-sheet-panel{position:relative;width:100%;height:100%;border-radius:24px;background:#fff;overflow:hidden;color:#141414}
.m-sheet-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain}
.m-sheet-head{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px;height:var(--sheet-head-h);padding:0 16px 0 24px;background:#fff}
.m-sheet-site{display:flex;align-items:center;column-gap:12px;min-width:0;font-size:20px;line-height:26px;font-weight:600;color:inherit;text-decoration:none}
.m-sheet-site span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-sheet-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:30%;background:#f4f4f4;color:#525252;font-size:18px;font-weight:600;line-height:1}
.m-seg{display:flex;gap:2px;height:36px;padding:4px;border-radius:9999px;background:rgba(64,64,64,.08);box-sizing:border-box}
.m-seg button{display:flex;align-items:center;justify-content:center;height:28px;padding:0 8px;border:0;border-radius:9999px;background:transparent;font:inherit;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.2px;color:#878787;cursor:pointer}
.m-seg button[aria-pressed=true]{background:#fff;color:#141414}
.m-seg button:focus-visible,.m-sheet-close:focus-visible,.m-round:focus-visible,.m-sheet-next:focus-visible,.m-sheet-info button:focus-visible,.m-similar:focus-visible{outline:2px solid #141414;outline-offset:2px}
.m-sheet-tools{display:flex;align-items:center;justify-content:flex-end;column-gap:12px}
.m-sheet-rule{width:1px;height:36px;background:rgba(64,64,64,.06)}
.m-sheet-close{display:grid;place-items:center;width:36px;height:36px;margin:8px;padding:4px;border:0;border-radius:9999px;background:none;color:#141414;cursor:pointer}
.m-sheet-close span{display:grid;place-items:center;width:28px;height:28px;border-radius:9999px;background:rgba(64,64,64,.06)}
.m-sheet-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.m-sheet-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:calc(100% - var(--sheet-head-h))}
.m-sheet-shot{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:8px clamp(16px,8vw,108px) 0;box-sizing:border-box}
/* Intrinsic video sizes must not widen the grid or push its centered controls off-screen. */
.m-sheet-shot :is(img,video){display:block;min-width:0;min-height:0;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.m-sheet-shot>[hidden]{display:none}
.m-sheet-foot{position:sticky;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:8px;padding:32px;background:#fff}
.m-sheet-actions{position:relative;display:flex;column-gap:8px}
.m-btn-grey{background:rgba(64,64,64,.08);color:#141414}
.m-btn-grey:hover{background:rgba(64,64,64,.12)}
.m-round{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:9999px;background:rgba(64,64,64,.08);color:#141414;cursor:pointer}
.m-round svg{width:20px;height:20px;fill:currentColor}
.m-sheet-more-wrap{position:relative}
.m-glass-menu{position:absolute;bottom:52px;left:50%;z-index:5;min-width:200px;padding:8px;border-radius:24px;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;transform:translateX(-50%)}
.m-glass-menu[hidden]{display:none}
.m-glass-menu a{display:flex;align-items:center;height:40px;padding:0 12px;border-radius:12px;color:#fff;font-size:16px;line-height:22px;font-weight:600;text-decoration:none;white-space:nowrap}
.m-glass-menu a:hover,.m-glass-menu a:focus-visible{background:rgba(255,255,255,.08);outline:none}
.m-sheet-info{min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column;align-items:flex-end;row-gap:2px;font-size:14px;line-height:20px}
.m-sheet-info span{font-weight:456;letter-spacing:.2px;color:#707070}
.m-sheet-info button{padding:0;border:0;background:none;font:inherit;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.2px;color:#141414;cursor:pointer}
.m-sheet-next{position:absolute;top:50%;right:32px;z-index:4;display:grid;place-items:center;width:44px;height:44px;border-radius:9999px;background:rgba(64,64,64,.08);color:#141414;transform:translateY(-50%)}
.m-sheet-next svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-similar{position:absolute;left:50%;bottom:14px;z-index:5;display:flex;align-items:center;column-gap:8px;height:36px;padding:0 12px;border:0;border-radius:9999px;background:#fff;box-shadow:rgba(0,0,0,.24) 0 8px 24px 0;font:inherit;font-size:14px;line-height:20px;font-weight:600;color:#141414;transform:translateX(-50%);cursor:pointer}
.m-similar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-sheet-below{padding:32px;scroll-margin-top:var(--sheet-head-h)}
.m-sheet-types{margin:0 0 48px}
.m-sheet-types h2{margin:0 0 8px;font-size:20px;line-height:26px;font-weight:600}
.m-sheet-types>p{margin:0 0 24px;font-size:14px;line-height:20px;color:#707070}
.m-sheet-others{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px;margin:0;padding:0;list-style:none;scroll-margin-top:88px}
.m-sheet-others a{display:flex;flex-direction:column;row-gap:16px;color:inherit;text-decoration:none}
.m-sheet-other-shot{display:flex;flex-direction:column;justify-content:safe center;aspect-ratio:1.6016;overflow:hidden;border-radius:8px;background:rgba(64,64,64,.06)}
.m-sheet-other-shot img{display:block;width:100%;height:auto}
.m-sheet-other-name{display:flex;align-items:center;column-gap:8px;font-size:16px;line-height:22px;font-weight:600;letter-spacing:.2px}
.m-sheet-other-name .m-sheet-icon{width:28px;height:28px;font-size:13px}
@media(max-width:719px){.m-sheet{--sheet-head-h:112px;padding:8px}.m-sheet-head{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:64px 48px;padding:0 8px 0 16px}.m-sheet-head .m-seg{grid-column:1/-1;grid-row:2;justify-self:center}.m-sheet-tools{grid-column:2;grid-row:1}.m-sheet-shot{padding:8px 16px 0}.m-sheet-foot{grid-template-columns:1fr;row-gap:12px;padding:16px;justify-items:center}.m-sheet-info{align-items:center}.m-sheet:has(.m-similar) .m-sheet-foot{padding-bottom:52px}.m-sheet-next{right:12px}.m-sheet-others{grid-template-columns:1fr}}
/* the component page uses the site page head (tobira-edition.js): Preview / Code as Mobbin's underline tabs */
.mobbin-site.te .site-tabs{justify-content:space-between;margin:0 0 8px!important}
.site-tab-links button{display:block;padding:4px 0;border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:16px;line-height:22px;font-weight:600;letter-spacing:.2px;color:#878787;cursor:pointer}
.site-tab-links button:hover{color:#141414}
.site-tab-links button[aria-selected=true]{color:#141414;border-bottom-color:#141414}
.site-tab-links button:focus-visible{outline:2px solid #141414;outline-offset:2px}
.mobbin-site .cd-description{margin:-8px 0 24px;max-width:760px;font-size:16px;line-height:24px;font-weight:456;color:#525252}
.te-code .pb-code-head .pb-seg{display:flex;gap:2px;height:36px;padding:4px;border:0;border-radius:9999px;background:rgba(64,64,64,.08);box-shadow:none;box-sizing:border-box}
.te-code .pb-code-head .pb-seg button{height:28px;padding:0 10px;border:0;border-radius:9999px;background:transparent;box-shadow:none;font-size:14px;line-height:20px;font-weight:600;color:#878787}
.te-code .pb-code-head .pb-seg button[aria-selected=true]{background:#fff;color:#141414}

/* Home (home.js), the source site's home in TOBIRA's type: featured item, categories, shelves that scroll sideways */
.home21{display:flex;flex-direction:column;row-gap:64px;padding-bottom:40px}
.home-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding-top:8px}
.home-hero-text{display:flex;flex-direction:column;min-width:0;min-height:100%;justify-content:center}
.home-hero .home-hero-title{margin:0 0 16px;font-size:44px;line-height:48px;font-weight:652;letter-spacing:-.4px;color:#141414;overflow-wrap:anywhere}
.home-hero-line{margin:0 0 12px;font-size:16px;line-height:24px;font-weight:456;color:#525252;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-hero-by{margin:0 0 24px;font-size:14px;line-height:20px;font-weight:456;color:#707070}
.home-hero-actions{display:flex;flex-wrap:wrap;gap:8px}
.home-upnext{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:48px;font-size:14px;line-height:20px;color:#707070}
.home-upnext span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-upnext .home-next{height:36px;padding:0 14px;font-size:14px;line-height:20px}
.home-hero-media{display:block;aspect-ratio:1.6016;border-radius:16px;overflow:hidden;background:#f4f4f4;box-shadow:0 0 0 .5px rgba(0,0,0,.1)}
.home-hero-media img,.home-hero-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.home-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 20px}
.home-head h2{margin:0;font-size:24px;line-height:30px;font-weight:652;letter-spacing:-.2px;color:#141414}
.home-head p{margin:4px 0 0;font-size:14px;line-height:20px;font-weight:456;color:#707070}
.home-all{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:14px;line-height:20px;font-weight:600;color:#707070;text-decoration:none}
.home-all:hover{color:#141414}
.home-cat-groups{display:flex;gap:48px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.home-cat-group{flex:none}
.home-cat-group>p{margin:0 0 8px;font-size:14px;line-height:20px;font-weight:456;color:#707070}
.home-cat-group ul{display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:40px;margin:0;padding:0;list-style:none}
.home-cat-group li{min-width:180px}
.home-cat-group a,.home-cat-group button{display:flex;align-items:baseline;gap:8px;padding:6px 0;border:0;background:none;font:inherit;font-size:16px;line-height:24px;font-weight:600;color:#141414;text-decoration:none;cursor:pointer;white-space:nowrap}
.home-cat-group small{font-size:13px;font-weight:456;color:#8a8a8a}
.home-cat-group a:hover,.home-cat-group button:hover{color:#707070}
.home-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--tb-pad,32px);scrollbar-width:none;margin:0 calc(-1 * var(--tb-pad,32px));padding:0 var(--tb-pad,32px) 4px}
.home-row::-webkit-scrollbar{display:none}
.home-row:focus-visible{outline:2px solid #141414;outline-offset:2px}
body #content .home-row .home-card{flex:0 0 calc((100% - 3 * 16px) / 3.35);min-width:260px;scroll-snap-align:start}
body #content .home-row .home-card .thumbnail>video{display:block;width:auto;max-width:92%;height:62%;aspect-ratio:1.6016;object-fit:cover;border-radius:8px;box-shadow:0 0 0 .5px rgba(0,0,0,.1)}
body #content .home-row .home-card .site-label{display:flex;align-items:center;column-gap:8px;min-width:0}
body #content .home-row .home-card .site-label>div{display:flex;flex-direction:column;min-width:0}
body #content .home-row .home-card .site-label-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:30%;background:#f4f4f4;color:#525252;font-size:18px;font-weight:600}
body #content .home-row .home-card h2{margin:0;font-size:16px;line-height:22px;font-weight:600;letter-spacing:.2px;color:#141414;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body #content .home-row .home-card p{margin:0;font-size:14px;line-height:20px;font-weight:456;letter-spacing:.2px;color:#707070;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:899px){.home-hero{grid-template-columns:1fr}.home-hero-media{order:-1}.home-hero .home-hero-title{font-size:32px;line-height:36px}.home-tagline{font-size:40px!important;line-height:46px!important}}
body #content .home-row .site-card{position:relative}
body #content .home-row .site-card>a{display:flex;flex-direction:column;color:inherit;text-decoration:none}
body #content .home-row .site-card .thumbnail{display:flex;align-items:center;justify-content:center;aspect-ratio:1.22;margin:0 0 16px;border-radius:28px;overflow:hidden;background:#f4f4f4;transition:background-color .3s ease-out}
body #content .home-row .site-card:hover .thumbnail,body #content .home-row .site-card:focus-within .thumbnail{background:#f0f0f0}
body #content .home-row .site-card .thumbnail>img{display:block;width:auto;max-width:92%;height:62%;aspect-ratio:1.6016;object-fit:cover;object-position:top;border-radius:8px;box-shadow:0 0 0 .5px rgba(0,0,0,.1);background:rgba(64,64,64,.08)}
body #content .home-row .site-card .site-save{top:16px;right:16px}
/* Use the website thumbnail's motion for images, videos and live component previews, including related cards. */
/* Component previews have already been framed around the part: let them use the card's available space. */
body #content :is(.gallery-grid,.home-row) .site-card>a[href^="#component-page/"] .thumbnail>:is(img,video){width:min(92%,calc(92% * var(--component-preview-aspect,1.6) / 1.22));max-width:92%;height:auto;max-height:92%;aspect-ratio:var(--component-preview-aspect,auto);object-fit:contain;object-position:center;box-shadow:none;background:transparent}
body #content :is(.gallery-grid,.home-row) .site-card .thumbnail>:is(img,video,iframe){transform:none!important;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity 180ms ease-out}
@media(hover:hover) and (pointer:fine){
 body #content :is(.gallery-grid,.home-row) .site-card>a:hover .thumbnail>:is(img,video,iframe){transform:scale(1.025)!important}
}
body #content :is(.gallery-grid,.home-row) .site-card>a:focus-visible .thumbnail>:is(img,video,iframe){transform:scale(1.025)!important}
@media(prefers-reduced-motion:reduce){
 body #content :is(.gallery-grid,.home-row) .site-card .thumbnail>:is(img,video,iframe){transform:none!important;transition:none}
}
/* the line over the featured item (two lines, the second in grey, like the source site's accent line) */
.home21>.home-tagline{margin:8px 0 -24px;font-size:64px;line-height:72px;font-weight:652;letter-spacing:-.02em;color:#141414}
.home21>.home-tagline span{display:block;color:#a3a3a3}
/* featured item: auto-advance. The new item slides in from the left (text and picture), the ring fills over the wait */
/* no clipping box around the featured item: the text slides in from the left without being cut at an edge */
.home-hero{overflow:visible}
.home-hero.is-in>*{animation:home-in .6s cubic-bezier(.22,1,.36,1) both}
.home-hero.is-in>.home-hero-media{animation-delay:.06s}
@keyframes home-in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.home-upnext{justify-content:flex-start}
.home-upnext .home-next{margin-left:auto}
.home-ring{flex:none;width:20px;height:20px}
.home-ring svg{display:block;width:20px;height:20px;transform:rotate(-90deg);fill:none;stroke-width:2}
.home-ring circle{stroke:rgba(64,64,64,.16)}
.home-ring .home-ring-fill{stroke:#141414;stroke-dasharray:100;stroke-dashoffset:100;animation:home-ring var(--dwell,7000ms) linear forwards}
.home-hero.is-paused .home-ring-fill{animation-play-state:paused}
@keyframes home-ring{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.home-hero.is-in>*{animation:none}.home-ring{display:none}}
.home-upnext .home-next{margin-top:0!important;margin-bottom:0!important;align-self:center}
/* categories row: faded edges where there is more, and arrows */
.home-scroller{position:relative}
.home-scroller .home-cat-groups{scroll-behavior:smooth;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%)}
.home-scroller[data-at-end="false"] .home-cat-groups{--fade-r:120px}
.home-scroller[data-at-start="false"] .home-cat-groups{--fade-l:120px}
.home-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:9999px;background:#fff;color:#141414;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.12);cursor:pointer;transform:translateY(-50%);transition:opacity .2s,transform .2s}
.home-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-arrow:hover{transform:translateY(-50%) scale(1.06)}
.home-arrow:focus-visible{outline:2px solid #141414;outline-offset:2px}
.home-arrow-prev{left:0}.home-arrow-next{right:0}
.home-scroller[data-at-start="true"] .home-arrow-prev,.home-scroller[data-at-end="true"] .home-arrow-next{opacity:0;pointer-events:none}
/* shelves: the arrows sit on the middle of the thumbnails (the label under them is about 60px), over the row's edge gutter */
.home-shelf-scroller .home-row{scroll-behavior:smooth}
.home-shelf-scroller .home-arrow{top:calc(50% - 32px)}
.home-shelf-scroller .home-arrow-prev{left:calc(-1 * var(--tb-pad,32px) + 12px)}.home-shelf-scroller .home-arrow-next{right:calc(-1 * var(--tb-pad,32px) + 12px)}
@media(prefers-reduced-motion:reduce){.home-scroller :is(.home-cat-groups,.home-row){scroll-behavior:auto}}

/* scraping in progress (scrape-build.js): wireframe first, parts fill in top to bottom, sections draw then colour */
.scrape-build{padding-bottom:80px}
.scrape-status{position:sticky;top:calc(var(--tb-nav-h,72px) + 8px);z-index:5;display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:2px;width:max-content;max-width:100%;margin:0 0 24px;padding:8px 14px;border-radius:9999px;background:rgba(255,255,255,.92);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 6px 20px rgba(0,0,0,.08);backdrop-filter:blur(12px);font-size:14px;line-height:20px;font-weight:600;color:#141414}
.scrape-status small{flex-basis:100%;padding-left:18px;font-size:12px;font-weight:456;color:#707070}
.scrape-dot{width:8px;height:8px;border-radius:50%;background:#141414;animation:scrape-pulse 1s ease-in-out infinite}
.scrape-build[data-stage=done] .scrape-dot{animation:none;background:#2a9d5c}
@keyframes scrape-pulse{50%{opacity:.25}}
/* the wireframe: outlines trace themselves, the content waits */
.scrape-build .wf{position:relative}
.scrape-build .wf>:not(.wf-line){transition:opacity .5s ease,filter .5s ease}
.scrape-build .wf:not(.is-filled)>:not(.wf-line){opacity:0}
.scrape-build .wf-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.scrape-build .wf-line rect{width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke:rgba(20,20,20,.35);stroke-width:1.25;stroke-dasharray:100;stroke-dashoffset:100;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1),opacity .5s ease .2s}
.scrape-build.is-drawing .wf-line rect{stroke-dashoffset:0}
.scrape-build .wf.is-filled>.wf-line{opacity:0;transition:opacity .5s ease .2s}
.scrape-build .wf-text{display:block;width:max-content;max-width:100%;min-height:1em}

.scrape-build .site-icon.wf{background:transparent}
.scrape-build .site-icon.wf.is-filled{background:#f4f4f4;transition:background-color .5s}
.scrape-build .m-btn.wf{box-shadow:none}
.scrape-build .m-btn-dark.wf:not(.is-filled){background:transparent;color:transparent}
.scrape-build .m-btn-line.wf.is-filled{box-shadow:inset 0 0 0 1px rgba(64,64,64,.16)}
/* sections: a column of the page's parts, each a line drawing first, then the shot in colour */
.scrape-sections{display:flex;flex-direction:column;gap:0;margin-top:8px;border-radius:12px;overflow:hidden}
.scrape-section{position:relative;margin:0;min-height:240px;background:transparent;overflow:hidden}
.scrape-section img{display:block;width:100%;height:auto}
.scrape-section .shot-wire{position:absolute;inset:0;height:100%;object-fit:cover;object-position:top}
.scrape-section .shot-wire{filter:url(#scrape-edges);opacity:0;transition:opacity .6s ease}
.scrape-section .shot{opacity:0;transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1);transform:scale(1.015)}
.scrape-section.is-filled .shot-wire{opacity:1}
.scrape-section.is-color .shot{opacity:1;transform:none}
.scrape-section.is-color .shot-wire{opacity:0;transition-delay:.4s}
.scrape-section.is-filled{background:#fafafa}
.scrape-section figcaption{position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:9999px;background:rgba(255,255,255,.9);font-size:12px;line-height:16px;font-weight:600;color:#141414;opacity:0;transition:opacity .4s ease .6s}
.scrape-section.is-color figcaption{opacity:1}
.scrape-done{display:flex;align-items:center;gap:16px;margin-top:40px;font-size:16px;font-weight:600}
.scrape-done[hidden]{display:none}
.scrape-done p{margin:0}
@media(prefers-reduced-motion:reduce){.scrape-build *{transition:none!important;animation:none!important}}
.scrape-build .site-icon.wf.is-filled:has(img){background:transparent}.scrape-build .site-tab-links .wf-text{display:flex;gap:24px}.scrape-build .site-version-wrap.wf{display:flex}

/* scraping prototype, landing: the flying shots on top; the Sections page's own shots wait for them, the rest fades in */
.scrape-fly{position:fixed;z-index:40;overflow:hidden;border-radius:10px;background:#f4f4f4;pointer-events:none}
.scrape-fly img{display:block;width:100%;height:auto}
body.scrape-landing #content .website-section-frame :is(img,video){opacity:0}
#content .website-section-frame :is(img,video){transition:opacity .25s ease}
body.scrape-landing #content .website-section h2,body.scrape-landing #content .website-section p{animation:scrape-fade .6s ease .5s both}
@keyframes scrape-fade{from{opacity:0}}

/* Code tab: the site's live copy on the left (inspect or use it), the source behind the selection on the right */
.website-code{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-areas:"parts parts" "ui panel";gap:16px 24px;align-items:start}
.website-code.is-wide{grid-template-columns:minmax(0,1fr);grid-template-areas:"parts" "ui" "panel"}
.code-parts{grid-area:parts;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.code-parts button{flex:none;font:inherit;font-size:13px;line-height:18px;padding:7px 12px;border:0;border-radius:999px;background:var(--pb-accent,#f2f2f2);color:var(--pb-muted,#6b6b6b);cursor:pointer;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-parts button[aria-pressed=true]{background:var(--pb-fg,#111);color:var(--pb-accent,#fff)}
.code-ui{grid-area:ui;margin:0;min-width:0}
.code-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.code-toolbar svg{width:16px;height:16px;flex:none}
.code-seg{display:flex;padding:3px;gap:2px;border-radius:999px;background:var(--pb-accent,#f2f2f2)}
.code-seg button{display:flex;align-items:center;gap:6px;font:inherit;font-size:13px;line-height:18px;padding:6px 10px;border:0;border-radius:999px;background:transparent;color:var(--pb-muted,#6b6b6b);cursor:pointer}
.code-seg button span:empty{display:none}
.code-seg button[aria-pressed=true]{background:var(--pb-fg,#111);color:var(--pb-accent,#fff)}
.code-mode button[data-mode=inspect][aria-pressed=true]{background:#3b82f6;color:#fff}
.code-width{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--pb-muted,#6b6b6b)}
.code-width input{width:66px;font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--pb-border,#e5e5e5);border-radius:8px;background:transparent;color:var(--pb-fg,#111)}
.code-icon{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;font:inherit;font-size:12px;border:0;border-radius:999px;background:var(--pb-accent,#f2f2f2);color:var(--pb-muted,#6b6b6b);cursor:pointer;text-decoration:none}
.code-icon[aria-pressed=true]{background:var(--pb-fg,#111);color:var(--pb-accent,#fff)}
.code-toolbar a.code-icon{margin-left:auto}
.code-hint{margin:10px 0;font-size:13px;color:var(--pb-muted,#6b6b6b)}
.code-stage{overflow-x:auto;padding-bottom:6px}
.code-live{position:relative;border-radius:8px;overflow:hidden;background:#f4f4f4;box-shadow:0 0 0 .5px rgba(0,0,0,.1)}
.code-live iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
.code-live.is-resizing iframe{pointer-events:none}
.code-live img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.code-handle{position:absolute;right:0;top:0;bottom:0;width:16px;cursor:ew-resize;display:grid;place-items:center;touch-action:none}
.code-handle::before{content:"";width:4px;height:48px;border-radius:4px;background:rgba(0,0,0,.35);box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.code-handle b{position:absolute;right:20px;top:50%;transform:translateY(-50%);font:600 11px/1 ui-monospace,Menlo,Consolas,monospace;padding:5px 7px;border-radius:6px;background:#111;color:#fff;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.code-handle:hover b,.code-handle:focus-visible b,.code-live.is-resizing .code-handle b{opacity:1}
.code-panel{grid-area:panel;min-width:0;border-radius:12px;background:#0f1012;color:#e6e6e6;overflow:hidden;position:sticky;top:16px}
.website-code.is-wide .code-panel{position:static}
.code-context{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:14px 16px 4px;font-size:13px}
.code-context span{color:#9a9a9a;font-size:12px}
.code-context b{font-weight:600}
.code-context code{font:12px ui-monospace,Menlo,Consolas,monospace;color:#8ab4ff;overflow-wrap:anywhere}
.code-context button{margin-left:auto;font:inherit;font-size:12px;padding:5px 10px;border:0;border-radius:999px;background:#26272c;color:#e6e6e6;cursor:pointer}
.code-tabs{display:flex;gap:2px;padding:8px 8px 0}
.code-tabs button{font:inherit;font-size:13px;padding:7px 14px;border:0;border-radius:8px 8px 0 0;background:transparent;color:#9a9a9a;cursor:pointer}
.code-tabs button[aria-selected=true]{background:#1b1c20;color:#fff}
.code-tabs small{margin-left:6px;font-size:11px;color:#8a8a8a}
.code-body{background:#1b1c20;max-height:80vh;overflow:auto}
.code-block{margin:0;padding:16px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;tab-size:2}
.code-snippet{margin:0}
.code-snippet+.code-snippet{border-top:1px solid #2a2b30}
.code-snippet figcaption{display:flex;gap:8px;align-items:baseline;padding:10px 16px 0;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#9a9a9a}
.code-snippet figcaption b{color:#e6e6e6;font-weight:500}
.code-snippet figcaption span{margin-left:auto;color:#f3d95e}
.code-empty{margin:0;padding:24px 16px;font-size:13px;color:#9a9a9a}
@media(max-width:1000px){.website-code{grid-template-columns:minmax(0,1fr);grid-template-areas:"parts" "ui" "panel"}.code-panel{position:static}}
body.scrape-landing #content .website-section-frame{background:transparent!important;box-shadow:none!important}
/* back to the scraper, beside the icon (the head keeps the site page's exact layout) */
.scrape-build .website-heading{position:relative}
.scrape-back{position:absolute;left:120px;top:30px;display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 14px 0 10px;border-radius:9999px;background:rgba(64,64,64,.08);color:#141414;font-size:14px;line-height:20px;font-weight:600;text-decoration:none;z-index:2}
.scrape-back:hover{background:rgba(64,64,64,.12)}
.scrape-back:focus-visible{outline:2px solid #141414;outline-offset:2px}
.scrape-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* "More like" / similar sections use the library cards (grey cell, inset shot) but keep their own three columns */
body #content .website-related .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){body #content .website-related .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body #content .website-related .gallery-grid{grid-template-columns:minmax(0,1fr)}}

/* Keep the default tile transparent in light mode so rounded artwork has no dark fringe. */
:root[data-theme=dark]{--site-icon-default-surface:#171717}
/* Mobbin AppLogo reference: 40px, 30% corner radius, artwork fills the tile. */
/* :root + the repeated class outrank the dark-theme tile rules in topbar.css and dark.css */
:root:root body :is(.site-icon,.site-label-icon,.m-sheet-icon,.tb-page-icon){display:grid;place-items:center;background:var(--site-icon-surface,var(--site-icon-default-surface,transparent))!important;border-radius:30%!important;overflow:hidden!important;color:#f2f2ef}
.site-icon:has(img)::after{content:none}
:root body #content .site-label-icon.has-icon img,:root .site-icon img,:root .m-sheet-icon.has-icon img,:root .tb-page-icon.has-icon img{display:block;width:var(--site-icon-art-size,100%)!important;height:var(--site-icon-art-size,100%)!important;min-width:0;min-height:0;max-width:100%;max-height:100%;aspect-ratio:1;object-fit:contain;object-position:center;border-radius:0;padding:0}
/* Wordmarks keep their own proportions, with enough width to remain legible. */
:root:root body :is(.site-icon,.site-label-icon,.m-sheet-icon,.tb-page-icon)[data-wordmark]{background:transparent!important;border-radius:0!important;overflow:visible!important;flex-shrink:0;--logo-height:40px;width:clamp(40px,calc(var(--logo-ratio)*var(--logo-height)),104px)!important;height:var(--logo-height)!important}
:root:root body .site-icon[data-wordmark]{--logo-height:72px;width:min(280px,calc(var(--logo-ratio)*var(--logo-height)))!important;max-width:100%}
:root:root body .tb-page-icon[data-wordmark]{--logo-height:28px;width:min(88px,calc(var(--logo-ratio)*var(--logo-height)))!important}
:root:root body .m-sheet-other-name .m-sheet-icon[data-wordmark]{--logo-height:28px}
:root:root body :is(.site-icon,.site-label-icon,.m-sheet-icon,.tb-page-icon)[data-wordmark] img{width:100%!important;height:100%!important;aspect-ratio:auto;object-fit:contain}
@media(max-width:719px){:root:root body .site-icon[data-wordmark]{--logo-height:56px;width:min(240px,calc(var(--logo-ratio)*var(--logo-height)))!important}}
/* home: one random work from the category under the pointer */
.home-cat-peek{position:fixed;z-index:70;width:280px;padding:8px;border-radius:16px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 16px 48px rgba(0,0,0,.14);opacity:0;transform:translateY(4px) scale(.98);color:inherit;text-decoration:none;cursor:pointer;transition:opacity .1s ease,transform .16s cubic-bezier(.22,1,.36,1),left .24s cubic-bezier(.22,1,.36,1),top .24s cubic-bezier(.22,1,.36,1)}
.home-cat-peek.no-move{transition:none}
.home-cat-peek-shot{position:relative;aspect-ratio:1.6016;border-radius:10px;overflow:hidden;background:#f4f4f4}
.home-cat-peek-shot img.home-cat-peek-next{z-index:1}
.home-cat-peek-shot img{position:absolute;inset:0;width:100%;height:100%!important;aspect-ratio:auto!important;border-radius:0!important}
.home-cat-peek.is-on{opacity:1;transform:none}
.home-cat-peek[hidden]{display:none}
.home-cat-peek img{display:block;width:100%;aspect-ratio:1.6016;object-fit:cover;object-position:top;border-radius:10px;background:#f4f4f4}
.home-cat-peek p{display:flex;flex-direction:column;margin:8px 4px 2px;min-width:0}
.home-cat-peek b{font-size:14px;line-height:20px;font-weight:600;color:#141414;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-cat-peek small{font-size:12px;line-height:16px;color:#707070;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(prefers-reduced-motion:reduce){.home-cat-peek{transition:none}.home-cat-peek-next{animation:none}}
.home-cat-peek:not(.is-on){pointer-events:none}
.home-cat-peek:hover{box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 20px 56px rgba(0,0,0,.18)}
.home-cat-peek:focus-visible{outline:2px solid #141414;outline-offset:2px}

/* Saved: the white pill of the type switch slides between choices (bookmarks.js places it) */
.m-saved-seg{position:relative}
.m-saved-seg button{position:relative;z-index:1;transition:color .2s ease}
.m-saved-seg:has(.m-saved-pill) button[aria-pressed=true]{background:transparent;box-shadow:none}
.m-saved-pill{position:absolute;left:0;top:4px;height:36px;border-radius:9999px;background:#fff;box-shadow:rgba(0,0,0,.04) 0 1px 2px 0;pointer-events:none}
.m-saved-seg.is-ready .m-saved-pill{transition:transform .32s cubic-bezier(.32,.72,0,1),width .32s cubic-bezier(.32,.72,0,1)}
:root[data-theme=dark] .m-saved-pill{background:rgb(52,52,52)}
@media(prefers-reduced-motion:reduce){.m-saved-seg.is-ready .m-saved-pill{transition:none}}

/* Video badge (like Mobbin's): cards whose site has a recorded video show a play mark next to Save. */
.site-card .site-video-badge{position:absolute;top:10px;right:48px;z-index:2;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:rgba(20,20,20,.55);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.18);pointer-events:none}
.site-card .site-video-badge svg{width:13px;height:13px;fill:currentColor}
body #content .gallery-grid .site-card .site-video-badge,body #content .home-row .site-card .site-video-badge{top:16px;right:56px}

/* Dark artwork needs a quiet light surface; preserve its original colors. */
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/0b28859bb2cc0245ba9c.png"],[src="/assets/tobira-gallery/images/da5859b64b2f9878cce4.png"],[src="/assets/tobira-gallery/images/6023e813b8dd1192c7ac.png"],[src="/assets/tobira-gallery/images/799bbc3fcc48444cd6c2.png"],[src="/assets/tobira-gallery/images/aefcb79e1be72aa6e9bb.svg"],[src="/assets/tobira-gallery/images/95a141b26f552c4c68fe.png"],[src="/assets/tobira-gallery/images/cc18932f04e67c03816c.png"],[src="/assets/tobira-gallery/images/b7c38139ebcf73db3af2.svg"],[src="/assets/tobira-gallery/images/f350dd77911ec4c31150.png"],[src="/assets/tobira-gallery/images/573c63a93d92afe994bb.png"],[src="/assets/tobira-gallery/images/78ec0f371e9fe94aef64.png"],[src="/assets/tobira-gallery/images/556bcf9156be562f6391.png"],[src="/assets/tobira-gallery/images/a3869a071bc61fd071c3.png"],[src="/assets/tobira-gallery/images/31f5bfca802bcd153026.png"],[src="/assets/tobira-gallery/images/6d152f8ad8830cfa13f9.png"],[src="/assets/tobira-gallery/images/b95e46c34d45dea61f97.svg"],[src="/assets/tobira-gallery/images/112e217b886b5f69dd64.png"],[src="/assets/tobira-gallery/images/15e3f92a9e5a6626d28f.png"],[src="/assets/tobira-gallery/images/e63c740f5d488579b955.svg"],[src="/assets/tobira-gallery/images/a1c498ddc3216a4fb562.png"])){--site-icon-surface:#f2f2ef;--site-icon-art-size:80%}

/* Extend existing brand backgrounds to the shared app-icon silhouette. */
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/c145c0a8ba4efcc4961f.png"])){--site-icon-surface:#c9c0df}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/9c509b84d3a0350b2cb4.png"],[src="/assets/tobira-gallery/images/54e3d61e460358cdf40c.png"])){--site-icon-surface:#fffefe}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/907d7c59a764973b05a1.png"])){--site-icon-surface:#28e99f}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/e898672e15b07cbc9044.png"],[src="/assets/tobira-gallery/images/30f40d997aec18083691.png"])){--site-icon-surface:#1c1c1c}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/10c9b2f14b58b7ade4c1.png"],[src="/assets/tobira-gallery/images/eb24d5ecd25361c91a8c.png"],[src="/assets/tobira-gallery/images/0fd5789a05bc85127f37.png"],[src="/assets/tobira-gallery/images/c39db0b7ca8c032aed0a.png"],[src="/assets/tobira-gallery/images/938262dcc09f4c0586f3.png"],[src="/assets/tobira-gallery/images/803f78efbaf2db56d056.png"],[src="/assets/tobira-gallery/images/3648aa50f5e350107ec8.png"],[src="/assets/tobira-gallery/images/e42dc106dbad332c36f4.png"],[src="/assets/tobira-gallery/images/8f665a7063202e03edfb.png"],[src="/assets/tobira-gallery/images/ec0a029354249aa2f286.png"],[src="/assets/tobira-gallery/images/6302c293913b79277cc4.png"],[src="/assets/tobira-gallery/images/ef63f98056fd31102dba.png"],[src="/assets/tobira-gallery/images/550e1a245d14091b85ee.png"],[src="/assets/tobira-gallery/images/5ac27c2b4c6748419932.png"],[src="/assets/tobira-gallery/images/9399e947b2845e71e191.png"],[src="/assets/tobira-gallery/images/74ddf686ae57fe0d5a40.png"],[src="/assets/tobira-gallery/images/fec08830970f47f1d9fb.png"],[src="/assets/tobira-gallery/images/03858640b1ac2e816cae.png"],[src="/assets/tobira-gallery/images/f57c24dba1e85eccf2ef.png"],[src="/assets/tobira-gallery/images/9447e94e5431f0e511dc.png"])){--site-icon-surface:#ffffff}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/c4745455c5424e41bbbd.png"])){--site-icon-surface:#e4f222}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/a341bba0a94a5659821a.png"])){--site-icon-surface:#f3f2ee}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/cd889d328b244dcdfada.png"])){--site-icon-surface:#643aed}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/8871d09b02e4428d71f5.png"])){--site-icon-surface:#010101}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/42ac91e9823811ae74d9.png"])){--site-icon-surface:#38586f}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/7315f1df972a0a89d2a4.png"])){--site-icon-surface:#7f78c5}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/3bfaa47d887fb4528b49.png"])){--site-icon-surface:#fbfbfc}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/928963a027cb09fda36b.png"])){--site-icon-surface:#010001}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/b35211f7ac4db60918dc.png"])){--site-icon-surface:#8578e6}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/7cd794b57bdd4cd79c69.png"])){--site-icon-surface:#0000ff}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/092258cd8e8190560868.png"])){--site-icon-surface:#ffa8cd}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/b4992e8a6abcdfdfefd3.png"])){--site-icon-surface:#3d4a15}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/c4b80745e0bccd3e454b.png"],[src="/assets/tobira-gallery/images/79dfed9eee7a9dad593f.png"],[src="/assets/tobira-gallery/images/c3594c196369515ce07f.png"],[src="/assets/tobira-gallery/images/c32650715e85ed2b2d37.png"],[src="/assets/tobira-gallery/images/54fc486af9e602d225e0.png"],[src="/assets/tobira-gallery/images/75ee6c015dea21716a9e.png"],[src="/assets/tobira-gallery/images/a35e0ac163ef2c2170df.png"],[src="/assets/tobira-gallery/images/82c5aec149c1a7c3154c.png"])){--site-icon-surface:#000000}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/c739cfcd265464c28382.png"])){--site-icon-surface:#373737}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/e983efee48c21708c68b.png"])){--site-icon-surface:#fbfbfb}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/afd60c902def366e6e12.png"])){--site-icon-surface:#090b0c}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/e11a4bf9fc3f9090417b.png"])){--site-icon-surface:#1f00ff}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/ff00f46b31eb74c3eb23.png"])){--site-icon-surface:#171615}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/b4369a067b3c011645b7.png"])){--site-icon-surface:#fa3600}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/cedf5f7e58c03c4f7014.png"])){--site-icon-surface:#191919}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/c3f51a16a769ed0fb7e4.png"])){--site-icon-surface:#df6341}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/09a32c19ac97b27e6929.png"])){--site-icon-surface:#609aae}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/5bffdea6b3b06bbe51a0.png"])){--site-icon-surface:#096fc8}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/8033e9cd6af26376a690.png"])){--site-icon-surface:#fefefe}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/d2dd112fc59d5b9c09b1.png"])){--site-icon-surface:#0073bd}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/ece9a55d70e3ab1331c0.png"])){--site-icon-surface:#f5f5f1}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/de57e388d43b0b30078c.png"])){--site-icon-surface:#008803}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/b8ff9246da91bee0310f.png"])){--site-icon-surface:#f04e23}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/24ff2b9c9d9f8dd01a32.png"])){--site-icon-surface:#fa2424}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/7342aa6051b9e9da2343.png"])){--site-icon-surface:#070b20}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/8b44c327bc0e089ed3a8.png"])){--site-icon-surface:#fafafa}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/6859b247ba9a5624d067.png"])){--site-icon-surface:#1f1f1f}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/429c57d67219b425302e.png"])){--site-icon-surface:#fdfdfd}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/10409e1b738c7378c590.png"])){--site-icon-surface:#298dff}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/fede663bcf7e61a99097.png"])){--site-icon-surface:#003461}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/f27c75cf88b2795c8b18.png"])){--site-icon-surface:#003f73}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/9472ca7c4330671ccca6.png"])){--site-icon-surface:#d32755}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/4ad0795ed6d3cb3b4ab4.png"])){--site-icon-surface:#16151e}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/084de623d62dd99cbc4d.png"])){--site-icon-surface:#161616}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/86610b41eed1eb97e315.png"])){--site-icon-surface:#080807}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/7a84c8e63a4f9ad95345.png"])){--site-icon-surface:#3ab8d5}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/b64e91a5323a41e717b7.png"])){--site-icon-surface:#d93634}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/2a9df3a682baadba19b7.png"])){--site-icon-surface:#040000}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/47d04d97830287ca80cc.png"])){--site-icon-surface:#40403d}

/* Circular source canvases bleed under the shared mask, without a circular rim. */
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon) img:is([src="/assets/tobira-gallery/images/aad2e203aed894c080a2.png"],[src="/assets/tobira-gallery/images/c4745455c5424e41bbbd.png"],[src="/assets/tobira-gallery/images/3bfaa47d887fb4528b49.png"],[src="/assets/tobira-gallery/images/b35211f7ac4db60918dc.png"],[src="/assets/tobira-gallery/images/b4992e8a6abcdfdfefd3.png"],[src="/assets/tobira-gallery/images/938262dcc09f4c0586f3.png"],[src="/assets/tobira-gallery/images/e42dc106dbad332c36f4.png"],[src="/assets/tobira-gallery/images/8033e9cd6af26376a690.png"],[src="/assets/tobira-gallery/images/6302c293913b79277cc4.png"],[src="/assets/tobira-gallery/images/8b44c327bc0e089ed3a8.png"],[src="/assets/tobira-gallery/images/f27c75cf88b2795c8b18.png"]){transform:scale(1.25)}

/* Standalone symbols use optical inset within a full-bleed brand surface. */
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img:is([src="/assets/tobira-gallery/images/6805871de170cc046dd2.svg"],[src="/assets/tobira-gallery/images/7eecf2cb22aaafa1d750.svg"],[src="/assets/tobira-gallery/images/d026907403611d27c40e.svg"],[src="/assets/tobira-gallery/images/799bbc3fcc48444cd6c2.png"],[src="/assets/tobira-gallery/images/6ee276e9bff5a166c41b.svg"],[src="/assets/tobira-gallery/images/e31bcbd5aaa19cc80bf7.svg"],[src="/assets/tobira-gallery/images/ae65bf70cd2fec7eed42.svg"],[src="/assets/tobira-gallery/images/64567314b87eaad6307c.svg"],[src="/assets/tobira-gallery/images/552cf97180481322925a.svg"],[src="/assets/tobira-gallery/images/66d9f0720c6f8fcab2a8.svg"])){--site-icon-art-size:80%}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img[src="/assets/tobira-gallery/images/6805871de170cc046dd2.svg"]) {--site-icon-surface:#34272d}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon):has(img[src="/assets/tobira-gallery/images/7eecf2cb22aaafa1d750.svg"]) {--site-icon-surface:#ab9ff2;--site-icon-art-size:76%}
:root :is(.site-label-icon,.site-icon,.m-sheet-icon,.tb-page-icon) img[src="/assets/tobira-gallery/images/7eecf2cb22aaafa1d750.svg"]{filter:brightness(0) invert(1)}

/* Preserve contrast for the dark KÖPPEN mark and fill circular brand canvases. */
:root :is(.site-icon,.site-label-icon,.m-sheet-icon,.tb-page-icon):has(img[src$="72377beac19de9a4a80c.png"]){--site-icon-surface:#f2f2ef;--site-icon-art-size:80%}
:root :is(.site-icon,.site-label-icon,.m-sheet-icon,.tb-page-icon) img:is([src$="ce1391d8b8d9a4e84831.svg"],[src$="c39db0b7ca8c032aed0a.png"]){transform:scale(1.25)}

:root :is(.site-icon,.site-label-icon,.m-sheet-icon,.tb-page-icon) img:is([src$="c9ac0af53e701dcb018f.svg"],[src$="ea0a14d54fc25642a48d.svg"]){transform:scale(1.25)}
:root :is(.site-icon,.site-label-icon,.m-sheet-icon,.tb-page-icon):has(img[src$="9849165dbf5b119ae040.svg"]){--site-icon-surface:#8bd3d3;--site-icon-art-size:90%}

/* Peter Tarka keeps its original white wordmark on its original dark surface. */
:root:root body :is(.site-icon,.site-label-icon,.m-sheet-icon,.tb-page-icon)[data-wordmark]:has(img[src="/assets/tobira-gallery/peter/runtime/logo.svg"]){background:#232323!important}

/* Gallery cards: the pages captured for the site (LP / 採用 / お問い合わせ). */
.site-page-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.site-page-tags li{font-size:11px;line-height:1;padding:5px 8px;border-radius:999px;background:var(--pb-accent,#f0f0f0);color:var(--pb-muted,#555)}