/* the source site component detail.
   Page frame: Mobbin website detail (website-detail.css).
   Controls: the React Bits component page at pro.reactbits.dev/docs/components/*, light theme.
   Values below are the computed styles measured there on 2026-09-25 (oklch converted to hex):
   toolbar buttons 32px / radius 10.8px / 1px #e5e5e5 / white / shadow 0 1px 2px #0000000d / 14px lucide icons,
   Preview|Code segmented 36px track (radius 12.8px, 4px inset, #f2f2f2 66%) with 28px 13px/500 tabs (radius 8.8px),
   menu radius 10.8px / 4px inset / 32px items 14px, preview widths 768px and 320px on a dotted stage,
   locked code: 56px lock disc, 24px/700 title, 14px #737373 text, 36px dark button. */
.cd{
 --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;
}
.cd .website-heading{margin-bottom:32px}
.cd .website-heading h1{margin-bottom:16px}
.cd-description{font-size:18px;line-height:28px;margin:0 0 28px;max-width:760px;color:#141414}
.cd-author,.cd-author a{display:flex;align-items:center;gap:8px}
.cd-author img{width:24px;height:24px;border-radius:50%;object-fit:cover}

/* Toolbar */
.pb-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 16px}
.pb-left,.pb-right{display:flex;align-items:center;gap:8px;min-width:0}
.pb-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:8px 12px;border:1px solid var(--pb-border);border-radius:10.8px;background:#fff;box-shadow:var(--pb-shadow-xs);color:var(--pb-fg);font:inherit;font-size:12px;font-weight:500;line-height:16px;white-space:nowrap;cursor:pointer;transition:box-shadow .2s,transform .2s,opacity .2s,background-color .15s}
.pb-button:hover{background:var(--pb-accent)}
.pb-button:active{transform:scale(.97)}
.pb-button[aria-disabled=true]{cursor:default}
.pb-button svg,.pb-ghost svg{width:14px;height:14px;flex-shrink:0}
.pb-icon{width:32px;padding:0}
.pb-icon[data-cd-save][aria-pressed=true] svg{fill:currentColor!important}
.pb-ai svg{width:12px;height:12px}
.pb-group{display:flex}
.pb-group .pb-icon{border-radius:0;margin-left:-1px}
.pb-group .pb-icon:first-child{border-radius:10.8px 0 0 10.8px;margin-left:0}
.pb-group .pb-icon:last-child{border-radius:0 10.8px 10.8px 0}
.pb-group .pb-icon[aria-pressed=true]{background:var(--pb-accent)}
.pb-dark{height:36px;padding:8px 12px;border:0;background:var(--pb-primary);color:#fafafa;font-size:14px;line-height:20px;box-shadow:none}
.pb-dark:hover{background:#262626}
.pb-dark svg{width:16px;height:16px}

/* Segmented control (Preview / Code, demos, files) */
.pb-seg{display:inline-flex;gap:4px;padding:4px;border:1px solid #e5e5e580;border-radius:12.8px;background:#f2f2f266;max-width:100%;overflow-x:auto;scrollbar-width:none}
.pb-seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 10px;border:1px solid transparent;border-radius:8.8px;background:transparent;color:var(--pb-muted);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .15s,background-color .15s}
.pb-seg button svg{width:14px;height:14px}
.pb-seg button:hover{color:var(--pb-fg)}
.pb-seg button[aria-selected=true]{background:#fff;border-color:#e5e5e599;color:var(--pb-fg);box-shadow:var(--pb-shadow-xs)}

.pb-slug{display:flex;align-items:center;gap:8px;color:var(--pb-muted);font-size:13px;font-weight:500;min-width:0}
.pb-slug span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-ghost{width:28px;height:28px;display:inline-grid;place-items:center;flex-shrink:0;border:0;border-radius:10.8px;background:transparent;color:var(--pb-fg);cursor:pointer;transition:background-color .15s}
.pb-ghost:hover{background:var(--pb-accent)}
.pb-ghost[aria-disabled=true]{cursor:default}

/* Tooltip: dark pill above the control */
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 0;padding:6px 12px;border-radius:8px;background:var(--pb-primary);color:#fafafa;font-size:12px;font-weight:500;line-height:16px;white-space:nowrap;pointer-events:none;z-index:40}
@media(hover:none){[data-tip]:hover::after{content:none}}

/* Copy for AI menu */
.pb-menu-wrap{position:relative}
.pb-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;width:224px;padding:4px;border:1px solid var(--pb-border);border-radius:10.8px;background:#fff;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;transform-origin:top right;animation:pb-menu-in .15s ease-out}
.pb-menu hr{border:0;border-top:1px solid var(--pb-border);margin:4px -4px}
.pb-menu-item{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:6px 8px;border:0;border-radius:8.8px;background:none;color:var(--pb-fg);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.pb-menu-item svg{width:16px;height:16px;flex-shrink:0;color:var(--pb-dim)}
.pb-menu-item:hover{background:var(--pb-accent)}
.pb-menu-item[aria-disabled=true]{cursor:default}
@keyframes pb-menu-in{from{opacity:0;transform:scale(.95)}}

/* Preview: Mobbin panel, React Bits box and stage */
.cd-preview{display:flex;flex-direction:column;gap:16px;padding:24px}
.cd-demos{align-self:flex-start}
.pb-box{border:1px solid var(--pb-border);border-radius:12.8px;background:#fff;overflow:hidden}
.pb-stage{background-color:#fafafa;background-image:linear-gradient(#e5e5e5 1px,transparent 1px),linear-gradient(90deg,#e5e5e5 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px}
.pb-frame{position:relative;width:100%;max-width:100%;background:#fff;transition:width .3s cubic-bezier(.23,1,.32,1)}
.pb-frame.dragging{transition:none}
.pb-frame.dragging iframe{pointer-events:none}
.pb-frame:fullscreen{width:100%!important}
.pb-frame iframe{display:block;width:100%;height:min(72vh,720px);border:0;background:#fff}
.pb-frame:fullscreen iframe{height:100vh}
.pb-handle{position:absolute;top:50%;right:-14px;translate:0 -50%;display:none;place-items:center;width:12px;height:48px;border-radius:6px;background:#e5e5e5;color:var(--pb-dim);cursor:ew-resize;touch-action:none}
.pb-handle svg{width:12px;height:12px}
.pb-frame.narrow{border-right:1px solid var(--pb-border)}
.pb-frame.narrow .pb-handle{display:grid}

/* Code view and the locked panel */
.pb-code-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 0}
.pb-code pre{margin:0;padding:16px;font-size:12px;line-height:19.5px;color:var(--pb-fg);overflow:auto;max-height:560px}
.pb-locked{display:flex;flex-direction:column;align-items:center;gap:24px;padding:64px 32px;text-align:center}
.pb-lock-icon{position:relative;width:56px;height:56px}
.pb-lock-halo{position:absolute;inset:0;border-radius:50%;background:#73737380;filter:blur(40px);animation:pb-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.pb-lock-disc{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#ffffffcc;box-shadow:0 0 0 1px #17171733;backdrop-filter:blur(8px);color:var(--pb-primary)}
.pb-lock-disc svg{width:24px;height:24px}
.pb-lock-text{max-width:320px}
.pb-lock-text h3{margin:0 0 8px;font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.025em;color:var(--pb-fg)}
.pb-lock-text p{margin:0;font-size:14px;line-height:20px;letter-spacing:-.025em;color:var(--pb-dim)}
@keyframes pb-pulse{50%{opacity:.5}}

.cd-info dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px 32px;margin:0}
.cd-info dt{font-size:14px;line-height:20px;color:#737373;margin-bottom:8px}
.cd-info dd{margin:0;font-size:16px;line-height:24px;font-weight:500;overflow-wrap:anywhere}
.cd-similar img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;background:#fff}
.cd-explore nav{display:flex;flex-wrap:wrap;gap:8px}

@media(max-width:700px){
 .cd .website-heading h1{font-size:36px}
 .pb-left,.pb-right{flex-wrap:wrap}
 .pb-slug{display:none}
 .cd-preview{padding:12px}
 .pb-frame iframe{height:60vh}
 .pb-group,[data-preview="expand"]{display:none}
}
@media(prefers-reduced-motion:reduce){.pb-menu,.pb-lock-halo{animation:none}.pb-frame{transition:none}}

/* Sidebar hover preview: React Bits src/css/sidebar.css (light theme) and the motion values in Sidebar.jsx. */
.sidebar-hover-preview{position:fixed;top:0;left:0;z-index:40;width:304px;padding:5px;overflow:hidden;border:1px solid #e7e7e9;border-radius:15px;background:rgba(255,255,255,.96);box-shadow:0 16px 42px rgba(24,24,27,.13);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);pointer-events:none;transform-origin:left center;font-family:var(--tobira-font)}
.sidebar-hover-preview.open{animation:sidebar-preview-in .18s cubic-bezier(.22,1,.36,1)}
.sidebar-hover-preview-media{position:relative;aspect-ratio:772/470;overflow:hidden;border-radius:10px;background:#f4f4f5}
.sidebar-hover-preview-media::after{content:'';position:absolute;inset:0;z-index:3;border:1px solid rgba(24,24,27,.055);border-radius:inherit;pointer-events:none}
.sidebar-hover-preview-frame{position:absolute;inset:0;will-change:opacity,filter,transform;animation:sidebar-frame-in .48s cubic-bezier(.22,1,.36,1)}
.sidebar-hover-preview-frame.leaving{animation:sidebar-frame-out .48s cubic-bezier(.22,1,.36,1) forwards}
.sidebar-hover-preview-frame img{display:block;width:100%;height:100%;object-fit:cover}
.sidebar-hover-preview-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 10px 9px;min-height:34px}
.sidebar-hover-preview-title{color:#18181b;font-size:12px;font-weight:550;letter-spacing:-.12px;white-space:nowrap}
.sidebar-hover-preview-item{min-width:0;overflow:hidden;color:#71717a;font-size:11px;line-height:1;text-overflow:ellipsis;white-space:nowrap}
.sidebar-hover-preview-item.in{animation:sidebar-label-in .3s ease}
@keyframes sidebar-preview-in{from{opacity:0;scale:.97}}
@keyframes sidebar-frame-in{from{opacity:0;filter:blur(9px);scale:1.025}}
@keyframes sidebar-frame-out{to{opacity:0;filter:blur(7px);scale:.985}}
@keyframes sidebar-label-in{from{opacity:0;filter:blur(4px);translate:0 2px}}
@media(max-width:967px){.sidebar-hover-preview{display:none}}

/* Gallery sidebar rows (categories and the the source site workspace entries): Pro docs sidebar —
   32px rows, 14px foreground text, 8.8px radius, accent fill for hover and the current row, 14px/600 headings at 70%. */
#gallery-sidebar :is(#workspace-nav,#component-categories) h3{margin:16px 0 4px;padding:6px 8px;font-size:14px;line-height:20px;font-weight:600;color:#0a0a0ab3;letter-spacing:-.025em}
#gallery-sidebar :is(#workspace-nav,#component-categories) :is(a,button){display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:6px 8px;border:0;border-radius:8.8px;background:none;font:inherit;font-size:14px;line-height:20px;letter-spacing:-.025em;color:#0a0a0a;text-align:left;cursor:pointer;transition:background-color .15s}
#gallery-sidebar :is(#workspace-nav,#component-categories) svg{width:16px;height:16px;flex-shrink:0;color:#0a0a0a}
#gallery-sidebar :is(#workspace-nav,#component-categories) :is(a,button):hover,#gallery-sidebar :is(#workspace-nav,#component-categories) a[aria-current]{background:#f5f5f5;color:#171717}
#workspace-nav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
#workspace-nav>span{display:contents}
#workspace-nav .workspace-count{margin-left:auto;font-size:12px;line-height:16px;color:#737373}
#workspace-nav .workspace-badge{padding:2px 6px;border:1px solid #e5e5e599;border-radius:5px;background:#fffffff2;font-size:12px;line-height:16px;font-weight:500;color:#0a0a0a}
#gallery-sidebar #workspace-nav a.workspace-library{color:#525252}
#gallery-sidebar #workspace-nav .workspace-back{font-weight:600;margin-top:4px}

/* the source site screens: full-height white panel beside the sidebar, the same card as the sidebar. Tools keeps its old layout. */
body.account-mode #gallery-sidebar{display:block!important}
body.account-mode:has(.reference-workspace:not(:has(.reference-nav))) main#content{margin:0;padding:0;max-width:none}
body.account-mode .reference-workspace:not(:has(.reference-nav)){padding:0}
body.account-mode .reference-workspace:not(:has(.reference-nav))>.reference-screen{position:fixed;top:16px;bottom:16px;left:calc(var(--sidebar-width) + 32px);right:16px;width:calc(100vw - var(--sidebar-width) - 48px);height:calc(100dvh - 32px);min-height:0;border-radius:24px;box-shadow:0 8px 32px #1717170c;transition:left .22s ease}
@media(max-width:760px){body.account-mode .reference-workspace:not(:has(.reference-nav))>.reference-screen{left:calc(var(--sidebar-width) + 24px);right:8px;top:8px;bottom:8px;width:calc(100vw - var(--sidebar-width) - 32px);height:calc(100dvh - 16px);border-radius:20px}}
/* The website filter rail belongs to the Websites gallery, not to the the source site workspace. */
body.account-mode #gallery-sidebar .filter-rail{display:none!important}

/* Entries without an icon keep the icon column so every label starts on the same line. */
#workspace-nav .workspace-noicon{width:16px;height:16px;flex-shrink:0}

/* the source site author and library pages (component-collection-reference.js). */
.cc-title{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.cc-title h1{margin:0!important}
.cc-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cc-handle{margin:6px 0 0;font-size:16px;line-height:24px;color:#141414}
.cc-install span{font-size:13px}
.cc-note{margin:-4px 0 0;font-size:14px;line-height:20px;color:#141414}
.cc-count{margin:-12px 0 24px;font-size:14px;line-height:20px;color:#141414}
.cc-more{margin-top:32px}

/* the source site template, theme, ASCII art, gradient, shader and app pages (item-detail-reference.js). */
.ci .pb-left{flex-wrap:wrap}
.ci-appicon{width:64px;height:64px;border-radius:14px;object-fit:cover;flex-shrink:0}
.ci-frame>img,.ci-frame>video{display:block;width:100%;height:auto}
.ci-frame>iframe{display:block;width:100%;height:min(72vh,720px);border:0;background:#fff}
.ci-theme{background:#fff;padding:16px}
.ci-text{margin:0 0 16px;max-width:760px;font-size:16px;line-height:26px;color:#141414}
.ci-chips{display:flex;flex-wrap:wrap;gap:8px}
.ci-chips span{padding:2px 8px;border:1px solid #e5e5e599;border-radius:5px;background:#fffffff2;font-size:12px;line-height:20px;font-weight:500;color:#0a0a0a}
.ci-install{margin-top:8px}
.ci-install span{font-size:13px}
.cd-info dl .ci-wide{grid-column:1/-1}
.ci-group{margin:24px 0 12px;font-size:14px;line-height:20px;font-weight:600;color:#0a0a0ab3}
.ci-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:12px}
.ci-swatch{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:8px;border-radius:12.8px;background:#fff}
.ci-swatch span{grid-row:1/3;width:40px;height:40px;border-radius:8.8px;box-shadow:inset 0 0 0 1px #0000001a}
.ci-swatch b{font-size:14px;line-height:20px;font-weight:500;color:#0a0a0a}
.ci-swatch code{font-size:12px;line-height:16px;color:#525252}
.ci-locked{padding:40px 32px 48px}
/* A long title (templates run to 20 words) steps down one heading size instead of filling three lines at 48px. */
.ci .website-heading h1.ci-long{font-size:32px!important;line-height:40px!important;max-width:900px}
@media(max-width:700px){.ci .website-heading h1.ci-long{font-size:24px!important;line-height:32px!important}}
.cd-still{display:block;width:100%;height:auto}
.cd-preview-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;padding:16px 24px;font-size:14px;line-height:1.5;color:inherit}

/* The workspace panel fades in once the embedded screen has painted and reported its sidebar, instead of showing it half-built. */
body.account-mode .reference-workspace:not(:has(.reference-nav))>.reference-screen{opacity:0;transition:opacity .18s ease}
body.account-mode .reference-workspace:not(:has(.reference-nav))>.reference-screen.ready{opacity:1}
@media(prefers-reduced-motion:reduce){body.account-mode .reference-workspace>.reference-screen{transition:none}}