.header,.search-open .header{background:#000}
.header .brand picture{display:contents}
.header .brand .user-wordmark{display:block}
body[data-page-kind=home] #main{position:relative;isolation:isolate}
html:has(body[data-page-kind=home]),body[data-page-kind=home],
body[data-page-kind=home] :is(.portal-layout,.catalog-column,#main,#catalog){background:#000}

/* Move the physical layers. The original link and drop rectangle stay in layout. */
.card:not(.is-dragging):is(:hover,:focus-within) .card-visual{transform:none;will-change:auto}
.sick-deck{--face-transform:perspective(540px) translate3d(var(--pull-x,0px),var(--lift,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--face-scale,1))}
.card-visual:has(.sick-deck){background:var(--card-underlay-bg,transparent);box-shadow:none}
.card-visual:has(.sick-deck)::after{content:none}
.image-link.sick-deck,.explorer-source.sick-deck{background:var(--card-underlay-bg,transparent);box-shadow:none;border-color:transparent}
.sick-deck > .sick-face{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 3px 9px var(--card-shadow-color,#0004)}
.sick-artwork{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.personal-link .sick-artwork{display:flex;flex-direction:column;justify-content:flex-end;padding:10px 12px}
.personal-card--generated-style .personal-link.sick-deck{background:transparent}
.personal-card--generated-style .sick-artwork{background:var(--personal-bg,#315d9f)}
.personal-card--with-image .personal-link.sick-deck::after{content:none}
.personal-card--with-image:not(.personal-card--catalog-art) .sick-artwork::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,#000c);pointer-events:none}
.personal-link .sick-artwork > .personal-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sick-face::before,.sick-face::after,.sick-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.sick-sheen{display:none}
.sick-deck:focus-visible .sick-face::after,.sick-card-field .sick-face::after{content:"";border:1px solid #edf3ff99}
.sick-deck:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 3px #0a0b0d;z-index:2}
.sick-deck:focus-visible > .sick-face::after{opacity:1;border-color:#fff9}
.explorer-card .explorer-source.sick-deck:hover:not(:focus-visible){outline:none}
.sick-flight{position:fixed;pointer-events:none;z-index:1350;object-fit:cover;border-radius:9px;box-shadow:0 13px 31px #000b}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .sick-deck{overflow:visible}
  .sick-card-field > .sick-face{transform:translateY(var(--lift,0px));will-change:transform}
  .sick-card-tilting > .sick-face{transform:var(--face-transform);transform-style:preserve-3d}
  .shelf .sick-card-tilting > .sick-face{transform-origin:50% 0}
  .sick-card-tilting .sick-face::before{content:"";inset:1px;background:var(--card-side-bg,#343942);
    transform:translateZ(-1px)}
  .sick-card-tilting > .sick-face{box-shadow:0 8px 19px var(--card-shadow-color,#0004)}
  .sick-card-field .sick-face::after{opacity:var(--shine,0)}
  .sick-card-tilting .sick-sheen{display:block;z-index:2;
    background:radial-gradient(ellipse 45% 35% at 50% 50%,#ebefff61,transparent 85%);
    transform:translate3d(calc(var(--light-x,24%) - 50%),calc(var(--light-y,12%) - 50%),0);
    opacity:calc(var(--shine,0) * .87)}
  .sick-deck:focus-visible:not(.sick-card-field) > .sick-face{transform:perspective(540px) translateY(-6px) rotateX(3deg) scale(1.026)}
  .rail-wrap:has(.sick-card-hot),.explorer-row:has(.sick-card-hot){position:relative;z-index:3}
  .shelf-heading,.explorer-row-heading{position:relative;z-index:4}
  .card:has(.sick-card-hot),.explorer-card:has(.sick-card-hot){z-index:4}
  .card-visual .card-actions,.card-visual .personal-edit,.card-visual .card-organize,.explorer-copy{z-index:6}
  /* Reserve paint room inside scrollports with no change to their normal footprint. */
  .rail{padding-top:calc(var(--rail-top) + 15px);padding-bottom:calc(var(--rail-bottom) + 13px);margin-block:-15px -13px}
  .explorer-track{padding-top:12px;margin-top:-12px}
  .is-dragging .sick-face,.catalog-dragging .sick-face{transform:none!important}
}