:root{--skeleton-base:#ededed;--skeleton-light:#ffffff99}
html[data-theme=dark]{--skeleton-base:#292929;--skeleton-light:#ffffff0b}
.list-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skeleton-surface{position:relative;overflow:hidden;background:var(--skeleton-base);border-radius:6px}
.skeleton-heading{display:block;width:4.5em;height:1.05em;font-size:var(--type-title,62px)}
.skeleton-search{height:48px;max-width:640px;margin-bottom:24px;border-radius:14px}
.skeleton-title{width:55%;height:16px;margin:0 0 10px}
.skeleton-caption{width:36%;height:12px;margin-bottom:6px}
.skeleton-surface::after,.thumbnail-pending::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,var(--skeleton-light) 50%,transparent 80%);transform:translateX(-100%);animation:list-shimmer 1.5s ease-in-out infinite;pointer-events:none}
body #content .list-loading .thumbnail{background:var(--skeleton-base)}
body #content :is(.thumbnail,.component-preview){position:relative}
body #content :is(.thumbnail,.component-preview)>:is(img,video){transition:opacity 180ms ease-out}
body #content .thumbnail-pending>:is(img,video){opacity:0}
body #content .thumbnail-failed>:is(img,video){opacity:0}
.thumbnail-unavailable{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:12px;color:var(--pb-muted,#777)}
@keyframes list-shimmer{to{transform:translateX(100%)}}
@media(max-width:760px){.skeleton-heading{font-size:32px}.skeleton-search{height:44px;margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){
  .skeleton-surface::after,.thumbnail-pending::after{animation:none;display:none}
  body #content :is(.thumbnail,.component-preview)>:is(img,video){transition:none}
}

/* Destination layouts: reuse the page/card grids and only replace their contents. */
.page-skeleton{min-width:0;pointer-events:none}
.page-skeleton .skeleton-surface{display:block}
.page-skeleton .sk-title{height:48px;width:min(520px,80%);margin-bottom:24px}
.page-skeleton .sk-line{height:14px;width:100%;margin:0 0 12px}
.page-skeleton .sk-line.short{width:66%}
.page-skeleton .sk-lines{max-width:760px;margin-bottom:24px}
.page-skeleton .sk-back{width:32px;height:24px;margin:10px 0 34px}
.page-skeleton .sk-icon{width:96px;height:96px;border-radius:30%;margin:0 0 24px}
.page-skeleton .sk-meta{display:flex;flex-wrap:wrap;gap:24px 32px;margin:28px 0}
.page-skeleton .sk-label{width:64px;height:12px;margin-bottom:10px}
.page-skeleton .sk-value{width:108px;height:18px}
.page-skeleton .sk-actions,.page-skeleton .sk-tabs{display:flex;gap:12px;flex-wrap:wrap}
.page-skeleton .sk-actions{margin-bottom:48px}
.page-skeleton .sk-button{height:40px;width:100px;border-radius:24px}
.page-skeleton .sk-tab{height:20px;width:112px}
.page-skeleton .sk-tabs{gap:24px;margin:24px 0 32px}
.page-skeleton .sk-preview{width:100%;min-height:380px;border-radius:16px}
.page-skeleton .sk-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.page-skeleton .sk-cards .sk-preview{min-height:0;aspect-ratio:4/3;margin-bottom:20px}
.page-skeleton[data-skeleton-kind=site-sections] .sk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-skeleton .sk-editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.page-skeleton .sk-editor>.sk-preview{min-height:560px}
.page-skeleton .sk-fields{display:grid;gap:24px;margin:24px 0 32px}
.page-skeleton .sk-field{height:40px;width:100%}
.page-skeleton .sk-code{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px}
.page-skeleton .sk-code>div{padding:24px;border-radius:16px;background:color-mix(in srgb,var(--skeleton-base) 25%,transparent)}
.page-skeleton .sk-code .sk-lines{margin-bottom:20px}
.page-skeleton .sk-home-hero{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;margin-bottom:64px}
.page-skeleton .sk-saved{max-width:1500px;margin:24px auto}
.page-skeleton .sk-search{height:44px;max-width:480px;margin-bottom:32px}
.page-skeleton .sk-workspace{max-width:1200px;margin:0 auto;padding:24px}
.page-skeleton .sk-workspace-body{max-width:760px;margin:40px auto}
.page-skeleton .sk-workspace .sk-title{height:32px;max-width:280px}
.page-skeleton .sk-avatar{width:72px;height:72px;border-radius:50%;margin:32px 0}
.page-skeleton .sk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0}
.page-skeleton .sk-stat{height:120px;border-radius:16px}
.page-skeleton .sk-table{margin-top:40px}
.page-skeleton .sk-table .sk-lines{display:flex;gap:48px;margin-bottom:32px}
.page-skeleton .sk-plan{padding:32px;background:color-mix(in srgb,var(--skeleton-base) 25%,transparent);border-radius:20px}
.page-skeleton .sk-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px}
.page-skeleton .sk-plans{max-width:1000px;margin:40px auto}
.page-skeleton .sk-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:96px 32px;max-width:1760px;margin:auto;padding:40px clamp(48px,6vw,120px)}
.page-skeleton .sk-book-stage{aspect-ratio:640/560;display:grid;place-items:center}
.page-skeleton .sk-book{width:50%;height:70%;border-radius:3px 8px 8px 3px}
.page-skeleton .sk-books .sk-lines{width:72%;margin:0 auto}
body.no-sidebar:has(.tb-nav) main#content:has(>.page-skeleton[data-skeleton-kind$="detail"]){padding-top:32px!important}
@media(max-width:1000px){.page-skeleton .sk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.page-skeleton .sk-editor{grid-template-columns:minmax(0,1fr) 240px}}
@media(max-width:760px){
 .page-skeleton .sk-title{height:32px;margin-bottom:20px}
 .page-skeleton .sk-icon{width:64px;height:64px;margin-bottom:16px}
 .page-skeleton .sk-meta{gap:20px}
 .page-skeleton .sk-home-hero,.page-skeleton .sk-editor,.page-skeleton .sk-code,.page-skeleton .sk-plan-grid{grid-template-columns:1fr;gap:24px}
 .page-skeleton .sk-cards,.page-skeleton[data-skeleton-kind=site-sections] .sk-cards{grid-template-columns:1fr}
 .page-skeleton .sk-preview,.page-skeleton .sk-editor>.sk-preview{min-height:300px}
 .page-skeleton .sk-workspace{padding:16px 4px}
 .page-skeleton .sk-workspace-body{margin:24px auto}
 .page-skeleton .sk-stats{grid-template-columns:1fr}
 .page-skeleton .sk-books{grid-template-columns:1fr;padding:32px 20px;gap:64px}
}
.page-skeleton .sk-customizer{max-width:1600px;margin:auto;padding:32px;box-sizing:border-box}
.page-skeleton .sk-customizer>.sk-preview{aspect-ratio:16/10;min-height:0}
.page-skeleton .sk-customizer>.sk-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
.page-skeleton .sk-source-preview{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:24px}
.page-skeleton .sk-source-preview .sk-preview{aspect-ratio:1;min-height:0}
.page-skeleton .sk-source-preview .sk-code{display:block}
.page-skeleton .sk-source-preview .sk-code>div:first-child{display:none}
@media(max-width:900px){.page-skeleton .sk-source-preview{grid-template-columns:1fr}.page-skeleton .sk-customizer{padding:24px}}
@media(max-width:600px){.page-skeleton .sk-customizer{padding:16px}.page-skeleton .sk-customizer>.sk-fields{grid-template-columns:1fr}}

/* Missing media stays a calm, recognizable card rather than an error message. */
body #content .card-media-fallback{position:relative;background:var(--skeleton-base,#ededed)!important;overflow:hidden}
body #content .card-media-fallback>:is(img,video,iframe){visibility:hidden}
.card-media-initial{position:absolute;inset:0;display:grid;place-items:center;color:var(--pb-muted,#777);font:500 clamp(48px,7vw,104px)/1 system-ui,sans-serif;letter-spacing:-.06em;pointer-events:none;user-select:none}
body #content .site-label-icon.card-icon-fallback{display:inline-grid;place-items:center;background:var(--skeleton-base,#ededed)!important;color:var(--pb-muted,#777);font:600 16px/1 system-ui,sans-serif;text-decoration:none}