:root {
  --grid-gap: 8px;
  --radius-md: 6px;
  --tile-stroke: #1d1d1d;
  --sidebar-w: 200px;
  --sidebar-collapsed-w: 44px;
  --glass-border-gradient: linear-gradient(
    225deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  --font: "Segoe UI", "IBM Plex Sans", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  color-scheme: dark;
}

body {
  overflow: hidden;
  background: #050505;
  color: #e7e7e7;
  font-family: var(--font);
}

button {
  font: inherit;
}

/* ── Shell ── */
.viewer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050505;
}

.viewer--community-route {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.02), transparent 58%),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.01) 0,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 1px,
      transparent 18px
    ),
    #050505;
}

.viewer.is-sidebar-collapsed {
  --sidebar-w: var(--sidebar-collapsed-w);
}

/* ── Sidebar ── */
.viewer__community-sidebar {
  position: fixed;
  top: var(--grid-gap);
  left: var(--grid-gap);
  bottom: var(--grid-gap);
  width: var(--sidebar-w);
  z-index: 24;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  min-height: 0;
  pointer-events: auto;
  transition: width 0.22s ease;
}

.viewer.is-sidebar-collapsed .viewer__community-sidebar {
  align-items: center;
}

.viewer.is-sidebar-collapsed .viewer__library-sidebar-search,
.viewer.is-sidebar-collapsed .viewer__profile-sidebar-divider,
.viewer.is-sidebar-collapsed .viewer__community-sidebar-content {
  display: none;
}

.viewer__catalog-sidebar-header {
  display: grid;
  justify-items: flex-start;
  gap: 0.56rem;
  width: 100%;
}

.viewer.is-sidebar-collapsed .viewer__catalog-sidebar-header {
  justify-items: center;
}

.viewer__catalog-sidebar-topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.viewer.is-sidebar-collapsed .viewer__catalog-sidebar-topbar {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.viewer__catalog-sidebar-logo-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.viewer__catalog-sidebar-logo {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  transform-origin: center;
}

.viewer__catalog-sidebar-logo-button:hover .viewer__catalog-sidebar-logo {
  animation: logo-spin 3.6s linear infinite;
}

.viewer__catalog-sidebar-toggle-icon {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  pointer-events: none;
}

@keyframes logo-spin {
  to {
    transform: rotate(360deg);
  }
}

.viewer__floating-pill {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#14161ad1, #14161ad1) padding-box, var(--glass-border-gradient) border-box;
  color: #e6ebf2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}

.viewer__floating-pill:hover {
  background: linear-gradient(#1c2028e0, #1c2028e0) padding-box, var(--glass-border-gradient) border-box;
}

.viewer__catalog-sidebar-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.viewer__catalog-sidebar-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: #bccde794;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.16s ease;
}

.viewer__catalog-sidebar-tab:hover {
  color: #dde9f8db;
}

.viewer__catalog-sidebar-tab--active,
.viewer__catalog-sidebar-tab--active:hover {
  color: #dde9f8f5;
}

/* Search */
.viewer__library-sidebar-search {
  display: grid;
  width: 100%;
  min-width: 0;
}

.viewer__search-pill {
  box-sizing: border-box;
  width: 100%;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  background: #ffffff08;
  color: #deebfb;
}

.viewer__search-pill:focus-within,
.viewer__search-pill:hover {
  border-color: #ffffff0f;
  background: #ffffff0f;
}

.viewer__search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #edf4ff;
  font-size: 0.75rem;
  line-height: 1.2;
}

.viewer__search-input::placeholder {
  color: #ffffff80;
}

.viewer__search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.viewer__profile-sidebar-divider {
  width: 100%;
  height: 1px;
  background: #ffffff0d;
  flex-shrink: 0;
}

/* Sidebar scroll content */
.viewer__community-sidebar-content {
  /* 为左下角登录/账户坞预留空间，避免标签列表与其重叠 */
  --sidebar-account-dock-space: 52px;
  display: grid;
  align-content: start;
  flex: 1 1 auto;
  gap: 0.72rem;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  padding-bottom: var(--sidebar-account-dock-space);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--sidebar-account-dock-space)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--sidebar-account-dock-space)),
    transparent 100%
  );
}

.viewer__community-sidebar-section,
.viewer__community-sidebar-tag-list {
  display: grid;
  gap: 0.32rem;
}

.viewer__community-sidebar-eyebrow {
  margin: 0;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #bccde7b8;
}

.viewer__library-sidebar-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  padding-top: 0.2rem;
}

.viewer__library-sidebar-group-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-width: 0;
}

.viewer__library-sidebar-group-label {
  margin: 0;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #bccde78f;
}

.viewer__library-sidebar-group-trigger {
  appearance: none;
  min-height: 20px;
  padding: 0 6px 0 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #bccde78f;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}

.viewer__library-sidebar-group-trigger:hover {
  color: #dde9f8db;
  background: #ffffff0a;
}

.viewer__library-sidebar-group-trigger-icon {
  display: inline-flex;
}

/* Options */
.viewer__project-option {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  background: #ffffff08;
  color: #deebfb;
  min-height: 28px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.viewer__project-option:hover:not(:disabled) {
  border-color: #ffffff0f;
  background: #ffffff0f;
}

.viewer__project-option--active,
.viewer__project-option--active:hover:not(:disabled) {
  border-color: #ffffff1a;
  background: #ffffff1a;
  color: #f4f8ff;
}

.viewer__library-sidebar-button-main {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}

.viewer__library-sidebar-button-main > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer__library-sidebar-button-icon {
  flex-shrink: 0;
  color: #e2edfcb8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.viewer__feed-icon {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
  pointer-events: none;
}

.viewer__community-sidebar-tag-list .viewer__feed-icon {
  width: 12px;
  height: 12px;
}

.viewer__project-option--active .viewer__library-sidebar-button-icon,
.viewer__project-option:hover .viewer__library-sidebar-button-icon {
  color: #f4f8ff;
}

.viewer__library-sidebar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 8px;
  background: #ffffff14;
  color: #e2edfcb8;
  font-size: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.viewer__library-sidebar-more {
  appearance: none;
  border: 0;
  background: transparent;
  color: #bccde78f;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 2px;
  text-align: left;
  cursor: pointer;
}

.viewer__library-sidebar-more:hover {
  color: #dde9f8db;
}

/* Creators */
.viewer__community-sidebar-list {
  display: grid;
  gap: 0.5rem;
}

.viewer__community-sidebar-card {
  appearance: none;
  width: 100%;
  position: relative;
  padding: 0.62rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 9px;
  background: #ffffff0d;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 0.58rem;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.viewer__community-sidebar-card:hover {
  border-color: #ffffff1a;
  background: #ffffff14;
  transform: translateY(-1px);
}

.viewer__community-sidebar-rank {
  position: absolute;
  top: 0.68rem;
  right: 0.7rem;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff4d;
  pointer-events: none;
}

.viewer__community-sidebar-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: #ffffff0a;
  color: #ffffff80;
  font-size: 9px;
  font-weight: 600;
}

.viewer__community-sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viewer__community-sidebar-card-copy {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
}

.viewer__community-sidebar-name {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.3;
  color: #fffffff0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2.4rem;
}

.viewer__community-sidebar-stats {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.48rem;
  flex-wrap: wrap;
  font-size: 0.64rem;
  line-height: 1.4;
  color: #ffffff80;
}

.viewer__community-sidebar-metric {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

/* Stagger */
.viewer__library-sidebar-stagger-item {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: sidebar-stagger 0.44s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--stagger, 0) * 46ms);
}

@keyframes sidebar-stagger {
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewer__library-sidebar-stagger-item {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ── Virtualizer / Grid ── */
.viewer__virtualizer {
  position: absolute;
  inset: var(--grid-gap);
  left: calc(var(--sidebar-w) + var(--grid-gap) * 2);
  right: var(--grid-gap);
  bottom: var(--grid-gap);
  top: var(--grid-gap);
  overflow: auto;
  overscroll-behavior: contain;
  transition: left 0.22s ease;
}

.viewer__grid {
  position: relative;
  width: 100%;
  min-height: 100%;
}

.viewer__grid-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 12px 0 4px;
  color: #ffffff66;
  font-size: 0.75rem;
}

.viewer__grid-loading,
.viewer__empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  color: #ffffff66;
  font-size: 0.8125rem;
}

/* ── Tiles ── */
.tile {
  position: absolute;
  background: transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  contain: layout paint;
  cursor: zoom-in;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  box-shadow: inset 0 0 0 1px var(--tile-stroke);
}

.tile__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #0a0a0c;
}

/* preview.jpg 作背景；加载前盖 40% 黑遮罩，iframe 淡入后遮罩消失 */
.tile__stage.has-cover {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.tile__stage.has-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* 用 :has 同步遮罩，避免 React 重渲染不同步造成闪一下 */
.tile__stage.has-cover:has(.tile__frame.is-loaded)::before {
  opacity: 0;
}

.tile__frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 200%;
  height: 200%;
  border: 0;
  outline: none;
  /* 透明底：未绘出 HTML 前仍透出封面，避免黑/白闪屏 */
  background: transparent;
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  /* 避免 iframe 参与 content-visibility 跳过绘制导致进出视口闪烁 */
  content-visibility: visible;
  contain: none;
}

.tile__frame.is-loaded {
  opacity: 1;
}

.tile__frame-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    105deg,
    #bcc4d033,
    #ecf1f675 46%,
    #ffffffa3 50%,
    #e7ecf36b 55%,
    #b4bdca33
  );
  background-size: 220% 100%;
  animation: tile-skeleton 3.8s linear infinite;
  opacity: 0.35;
  pointer-events: none;
}

@keyframes tile-skeleton {
  to {
    background-position: 220% 50%;
  }
}

.tile__label {
  position: absolute;
  top: 6px;
  left: 6px;
  margin: 0;
  padding: 4px 6px;
  max-width: min(64ch, calc(100% - 140px));
  font-size: 11px;
  line-height: 1.3;
  color: #f3f3f3;
  background: #000000b3;
  border-radius: var(--radius-md);
  z-index: 2;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
}

.tile__label-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile__label-author {
  flex: 0 0 auto;
  white-space: nowrap;
  opacity: 0.85;
}

.tile__pro-badge {
  --size: 14px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  border: 1px solid rgba(118, 132, 255, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, #5865f2fa, #4d5ae2fa);
  color: #fff;
  box-shadow: 0 4px 10px #5865f257, inset 0 1px #ffffff3d;
}

.tile__pro-badge svg {
  width: 8px;
  height: 8px;
}

.tile:hover .tile__label,
.tile:focus-within .tile__label {
  opacity: 1;
  transform: translateY(0);
}

.tile__actions {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.tile:hover .tile__actions,
.tile:focus-within .tile__actions {
  opacity: 1;
  transform: translateY(0);
}

.tile__action {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#14161ad1, #14161ad1) padding-box, var(--glass-border-gradient) border-box;
  color: #e6ebf2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tile__action:hover {
  color: #f2f2f2;
  background: linear-gradient(145deg, #1a212fb8, #0d1119c7) padding-box, var(--glass-border-gradient) border-box;
  box-shadow: 0 8px 18px #00000057, inset 0 1px #ffffff1f;
}

.tile__action[data-action="favorite"] {
  color: #ffffff;
}

.tile__action[data-action="favorite"] svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tile__action.is-active {
  color: #ffffff;
}

.tile__action.is-active[data-action="favorite"] {
  color: #ffe7a8;
}

.tile.is-hidden {
  display: none;
}

/* ── Status HUD ── */
.viewer__status-hud {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 31;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.viewer__fps {
  min-width: 3.8rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: linear-gradient(#0b0e14b3, #0b0e14b3) padding-box, var(--glass-border-gradient) border-box;
  color: #d8e6f9;
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

/* ── Preview themes (CSS art) ── */
.preview {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.preview--bloom {
  background:
    radial-gradient(ellipse 80% 70% at 55% 45%, #c45a7a88, transparent 55%),
    radial-gradient(ellipse 60% 50% at 35% 60%, #6b204888, transparent 50%),
    linear-gradient(160deg, #1a0a12, #0a0608 60%, #120810);
  display: grid;
  place-items: center;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  color: #f2e6ea;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  letter-spacing: -0.02em;
  text-align: center;
  padding: 1.5rem;
}

.preview--bloom::before {
  content: "flooded, ripened, bloomed.";
}

.preview--bloom::after {
  content: "POND.87 // BLOOMING";
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #ffffff66;
}

.preview--abyssal {
  background:
    linear-gradient(rgba(20, 80, 90, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 80, 90, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 70% 40%, #0d3a4488, transparent 45%),
    #061014;
  background-size: 24px 24px, 24px 24px, auto, auto;
}

.preview--abyssal .panel {
  position: absolute;
  top: 14%;
  left: 10%;
  width: 58%;
  max-width: 340px;
  padding: 14px 16px;
  border: 1px solid rgba(80, 200, 210, 0.25);
  border-radius: 10px;
  background: #0a1a1ecc;
  backdrop-filter: blur(8px);
  color: #c8f0f4;
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: 1.55;
}

.preview--abyssal .panel strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  color: #e8ffff;
}

.preview--signal {
  background: repeating-linear-gradient(
    90deg,
    #c43c3c 0 12.5%,
    #c4c43c 12.5% 25%,
    #3cc43c 25% 37.5%,
    #3cc4c4 37.5% 50%,
    #3c3cc4 50% 62.5%,
    #c43cc4 62.5% 75%,
    #1a1a1a 75% 87.5%,
    #f0f0f0 87.5% 100%
  );
  filter: contrast(1.1) saturate(0.85);
}

.preview--signal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0, 0, 0, 0.18) 2px 3px
  );
  mix-blend-mode: multiply;
}

.preview--signal .signal-copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(1.1rem, 2.8vw, 2rem);
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 0 #000, 2px 0 0 #c00;
  padding: 1rem;
  z-index: 1;
}

.preview--signal .signal-copy em {
  color: #ff3030;
  font-style: normal;
}

.preview--signal .ch {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 1;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #fff;
  background: #0009;
  padding: 3px 7px;
  border-radius: 4px;
}

.preview--matrix {
  background: #f4f4f2;
  color: #1a1a1a;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  height: 100%;
}

.preview--matrix .meta {
  padding: 18px 16px;
  display: grid;
  align-content: start;
  gap: 6px;
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.preview--matrix .meta strong {
  font-size: 13px;
  letter-spacing: 0.14em;
}

.preview--matrix .cloud {
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, #9a9a9a88 0%, transparent 42%),
    radial-gradient(circle at 48% 52%, #6666 0%, transparent 55%),
    #ececea;
}

.preview--matrix .cloud::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, #777a 0%, #bbb4 40%, transparent 70%);
  filter: url(#noise) contrast(1.2);
  box-shadow: inset 0 0 40px #0001;
}

.preview--nexus {
  background:
    radial-gradient(circle at 30% 40%, #3b82f644, transparent 40%),
    radial-gradient(circle at 70% 60%, #22d3ee33, transparent 35%),
    #07090f;
  display: grid;
  place-items: center;
}

.preview--nexus .ring {
  width: min(46%, 180px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(125, 211, 252, 0.35);
  box-shadow:
    0 0 0 18px rgba(56, 189, 248, 0.06),
    0 0 60px #38bdf855,
    inset 0 0 30px #38bdf833;
  position: relative;
}

.preview--nexus .ring::before {
  content: "NEXUS CORE";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #bae6fd;
}

.preview--indigo {
  background:
    linear-gradient(135deg, #1e3a5f, #0c1a2e 45%, #152238),
    #0c1a2e;
  display: grid;
  place-items: end start;
  padding: 20px;
}

.preview--indigo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 70% 30%, #3b6ea855, transparent 60%),
    repeating-linear-gradient(
      -12deg,
      transparent 0 10px,
      rgba(255, 255, 255, 0.02) 10px 11px
    );
}

.preview--indigo .copy {
  position: relative;
  z-index: 1;
  font-family: "Iowan Old Style", Georgia, serif;
  color: #e8eef8;
}

.preview--indigo .copy strong {
  display: block;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  font-weight: 500;
  margin-bottom: 6px;
}

.preview--indigo .copy span {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #a8bdd880;
}

.preview--chroma {
  background: conic-gradient(from 210deg, #1a1030, #3d1a4a, #0e2a3a, #1a1030);
  display: grid;
  place-items: center;
}

.preview--chroma .badge {
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: #0006;
  color: #f5e9ff;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.preview--terminal {
  background: #0b0f0c;
  color: #7dffb3;
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 11px;
  padding: 16px 18px;
  line-height: 1.6;
}

.preview--terminal .cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  background: #7dffb3;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
  vertical-align: -1px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Empty / panel views */
.panel-view {
  position: absolute;
  inset: var(--grid-gap);
  left: calc(var(--sidebar-w) + var(--grid-gap) * 2);
  display: none;
  align-items: center;
  justify-content: center;
  color: #bccde7a0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: left 0.22s ease;
}

.panel-view.is-active {
  display: flex;
}

.viewer__virtualizer.is-hidden {
  display: none;
}


/* ── Account dock + user popover ── */
.viewer__floating-menu {
  position: fixed;
  z-index: 28;
  display: inline-flex;
  align-items: flex-end;
  gap: 0.42rem;
}

.viewer__floating-menu--bottom-left {
  left: calc(var(--grid-gap) + 4px);
  bottom: calc(var(--grid-gap) + 4px);
}

.viewer.is-sidebar-collapsed .viewer__floating-menu--bottom-left {
  left: calc(var(--grid-gap) + 1px);
}

.viewer__floating-controls {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42rem;
}

.viewer__floating-account-actions {
  position: relative;
}

.viewer__floating-pill--user {
  overflow: hidden;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#f97316, #ea580c) padding-box, var(--glass-border-gradient) border-box;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.viewer__user-avatar-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.viewer__user-avatar-fallback img,
.viewer__user-popover-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viewer__floating-upgrade-pill {
  appearance: none;
  position: absolute;
  top: 2px;
  left: calc(100% + 0.42rem);
  min-height: 24px;
  padding: 0 0.72rem;
  border: 1px solid rgba(118, 132, 255, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, #5865f2, #4d5ae2);
  color: #f7f9fff5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px #ffffff24, 0 10px 24px #5865f23d;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.viewer__floating-upgrade-pill:hover,
.viewer__floating-upgrade-pill:focus-visible {
  transform: translateY(-1px);
  border-color: #919cffe6;
  background: linear-gradient(180deg, #626fff, #5461ec);
  box-shadow: inset 0 1px #ffffff2e, 0 12px 28px #5865f24d;
  outline: none;
}

.viewer__surface-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  display: grid;
  gap: 0;
  padding: 8px;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(155deg, #14181fb3, #090b10b8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 14px 30px #00000047, inset 0 1px #ffffff08;
  transform-origin: bottom left;
  animation: viewerSurfacePopoverIn 0.26s cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.viewer__surface-popover[hidden] {
  display: none;
}

@keyframes viewerSurfacePopoverIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.viewer__user-popover {
  width: min(280px, calc(100vw - 5.2rem));
}

.viewer__user-popover--profile {
  width: min(300px, calc(100vw - 5.2rem));
}

.viewer__user-popover-inner {
  display: grid;
  gap: 0.32rem;
}

.viewer__user-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 1px 2px;
}

.viewer__user-popover-header-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewer__user-popover-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #1a1f18;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.viewer__user-popover-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.viewer__user-popover-name {
  margin: 0;
  color: #edf5ff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
}

.viewer__user-popover-username {
  margin: 0;
  color: #a3c4ffe0;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: normal;
}

.viewer__user-popover-usage {
  display: grid;
  gap: 2px;
  padding: 2px 1px 0;
}

.viewer__user-popover-usage-plan {
  margin: 0;
  color: #bccde78f;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.viewer__user-popover-usage-value {
  margin: 0;
  color: #deebfb;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
}

.viewer__user-popover-usage-actions {
  display: grid;
  gap: 0.32rem;
  margin-top: 2px;
}

.viewer__user-popover-upgrade {
  position: relative;
  width: 100%;
  height: 96px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0a0d08;
  box-shadow: inset 0 1px #ffffff10;
  display: grid;
  place-items: center;
}

.viewer__user-popover-upgrade-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.viewer__user-popover-upgrade-label {
  position: relative;
  z-index: 1;
  color: #e8efe2;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.viewer__user-popover-upgrade:hover,
.viewer__user-popover-upgrade:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.14);
}

.viewer__user-popover-upgrade-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.viewer__user-popover-upgrade-title {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
}

.viewer__user-popover-upgrade-subtitle {
  color: #e9edffc2;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.viewer__user-popover-upgrade-social {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e9edffe0;
  font-size: 10px;
  line-height: 1.2;
}

.viewer__user-popover-upgrade-avatars {
  display: inline-flex;
}

.viewer__user-popover-upgrade-avatars > span {
  width: 18px;
  height: 18px;
  margin-left: -6px;
  border-radius: 999px;
  border: 1.5px solid #5865f2;
  background: hsl(calc(200 + var(--i) * 40) 55% 55%);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.viewer__user-popover-upgrade-avatars > span:first-child {
  margin-left: 0;
}

.viewer__user-popover-upgrade-crown {
  flex-shrink: 0;
  color: #ffffffd9;
  opacity: 0.9;
}

.viewer__user-popover-link {
  /* inherits .viewer__project-option — do not set font:inherit (overrides 11px) */
  width: 100%;
}

.viewer__user-popover-divider {
  height: 1px;
  margin-block: 2px;
  opacity: 0.42;
  background: linear-gradient(90deg, #ffffff05, #ffffff1a, #ffffff05);
}

.viewer__user-popover-menu {
  display: grid;
  gap: 0.32rem;
}

/* Account menu rows reuse homepage sidebar option styles (.viewer__project-option). */
.viewer__user-popover .viewer__project-option {
  font-family: inherit;
}

.viewer__user-popover-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.45;
  color: #e2edfcb8;
}

.viewer__user-popover .viewer__project-option:hover .viewer__user-popover-chevron {
  opacity: 0.7;
  color: #f4f8ff;
}

.viewer__user-popover .viewer__library-sidebar-button-icon {
  color: #ffffff;
}

.viewer__user-popover .viewer__library-sidebar-button-icon svg,
.viewer__user-popover .viewer__library-sidebar-button-icon .viewer__feed-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 1;
}

.viewer__user-popover .viewer__project-option:hover .viewer__library-sidebar-button-icon {
  color: #ffffff;
}

.viewer__user-popover .viewer__project-option:hover .viewer__library-sidebar-button-icon .viewer__feed-icon {
  opacity: 1;
}

.viewer__user-popover-item--danger {
  color: #deebfb;
}

.viewer__user-popover-item--danger:hover {
  color: #f4f8ff;
}

.viewer__user-popover-upgrade-crown svg {
  width: 14px;
  height: 14px;
}



/* ── Expanded template viewer (preview + design kit) ── */
body.is-expanded {
  overflow: hidden;
}

body.is-expanded .viewer__floating-menu,
body.is-expanded .viewer__community-sidebar,
body.is-expanded .viewer__virtualizer,
body.is-expanded .viewer__status-hud {
  visibility: hidden;
  pointer-events: none;
}

.viewer__expanded {
  --kit-panel-w: 626px;
  position: fixed;
  inset: var(--grid-gap);
  z-index: 40;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.viewer__expanded[hidden] {
  display: none;
}

.viewer__expanded-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0 2px 8px;
  background: transparent;
  border-bottom: 0;
}

.viewer__expanded-title-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.viewer__expanded-back {
  appearance: none;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: #ffffff0a;
  color: #e6ebf2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.viewer__expanded-back:hover {
  background: #ffffff14;
  border-color: #ffffff1a;
  color: #fff;
}

.viewer__expanded-title {
  min-width: 0;
  color: #ffffffb3;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 10px;
  border-radius: 999px;
  background: #00000080;
}

.viewer__expanded-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.viewer__expanded-kit-tabs {
  --kit-tab-index: 0;
  --kit-tab-cols: 2;
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(var(--kit-tab-cols), minmax(0, 1fr));
  width: 168px;
  padding: 2px 3px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  background:
    linear-gradient(180deg, #12151be0, #090c11eb) padding-box,
    linear-gradient(180deg, #ffffff12, #ffffff04) border-box;
  box-shadow: 0 6px 14px #00000029, inset 0 1px #ffffff08;
  overflow: hidden;
}

.viewer__expanded-kit-tabs::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: calc((100% - 6px) / var(--kit-tab-cols));
  height: calc(100% - 4px);
  border-radius: 9px;
  background:
    linear-gradient(180deg, #363636f0, #1c1c1cfa) padding-box,
    linear-gradient(180deg, #ffffff1a, #ffffff08) border-box;
  box-shadow: inset 0 0 0 1px #ffffff14, inset 0 1px #ffffff0a;
  transform: translateX(calc(var(--kit-tab-index) * 100%));
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.viewer__expanded-kit-tabs[data-active-tab="preview"] {
  --kit-tab-index: 1;
}

.viewer__expanded-kit-tab {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #ffffff75;
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  min-height: 22px;
  padding: 0 6px;
  cursor: pointer;
}

.viewer__expanded-kit-tab.is-active,
.viewer__expanded-kit-tab:hover {
  color: #ffffffeb;
}

.viewer__expanded-link,
.viewer__expanded-favorite,
.viewer__expanded-share,
.viewer__expanded-close {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: #ffffff0a;
  color: #e6ebf2;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  min-height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
}

.viewer__expanded-favorite svg,
.viewer__expanded-share svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.viewer__expanded-favorite.is-active {
  color: #ffe7a8;
  border-color: rgba(255, 214, 120, 0.45);
  background: #ffffff12;
}

.viewer__expanded-share.is-copied {
  color: #d7ffe6;
  border-color: rgba(122, 154, 110, 0.45);
  background: rgba(122, 154, 110, 0.16);
}

.viewer__expanded-link:hover,
.viewer__expanded-favorite:hover,
.viewer__expanded-share:hover,
.viewer__expanded-close:hover {
  background: #ffffff14;
  border-color: #ffffff1a;
}

.viewer__expanded-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8px var(--kit-panel-w);
  gap: 0;
  min-height: 0;
  height: 100%;
}

.viewer__expanded.is-kit-hidden .viewer__expanded-body {
  grid-template-columns: minmax(0, 1fr);
}

.viewer__expanded.is-kit-hidden .viewer__expanded-kit,
.viewer__expanded.is-kit-hidden .viewer__expanded-splitter {
  display: none;
}

.viewer__expanded-preview {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #050505;
  box-shadow: 0 0 0 1px var(--tile-stroke);
}

.viewer__expanded-preview.has-cover {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.viewer__expanded-preview.has-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.viewer__expanded-preview.has-cover.is-preview-loaded::before {
  opacity: 0;
}

.viewer__expanded-preview.has-cover:not(.is-preview-loaded) .viewer__expanded-frame {
  opacity: 0;
}

.viewer__expanded-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050505;
  transition: opacity 0.35s ease;
}

.viewer__expanded-splitter {
  position: relative;
  z-index: 2;
  width: 8px;
  margin: 0 -2px;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  background: transparent;
}

.viewer__expanded-splitter::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #ffffff18;
  transition: background 0.15s ease, box-shadow 0.15s ease, width 0.15s ease;
}

.viewer__expanded-splitter:hover::before,
.viewer__expanded-splitter:focus-visible::before,
.viewer__expanded.is-resizing .viewer__expanded-splitter::before {
  width: 3px;
  background: #ffffff55;
  box-shadow: 0 0 0 1px #ffffff14;
}

.viewer__expanded-splitter:focus-visible {
  outline: none;
}

.viewer__expanded.is-resizing,
.viewer__expanded.is-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.viewer__expanded.is-resizing .viewer__expanded-frame,
.viewer__expanded.is-resizing .viewer__expanded-kit-frame {
  pointer-events: none;
}

.viewer__expanded-kit {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000000;
  box-shadow: 0 0 0 1px var(--tile-stroke);
}

.viewer__expanded-kit-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000000;
}

.viewer__expanded-kit-frame[hidden] {
  display: none;
}

.viewer__expanded-kit-empty {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

.viewer__expanded-kit-empty[hidden] {
  display: none;
}

.viewer__expanded-kit-stack {
  display: grid;
  gap: 8px;
}

.viewer__kit-skeleton {
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #14161a, #0c0d11);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.viewer__kit-skeleton--logo {
  min-height: 220px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.viewer__kit-skeleton-bar {
  height: 10px;
  width: 42%;
  border-radius: 999px;
  background: #ffffff10;
}

.viewer__kit-skeleton-stage {
  min-height: 160px;
  border-radius: 8px;
  background:
    linear-gradient(120deg, #ffffff08, transparent 40%),
    repeating-linear-gradient(
      -12deg,
      #ffffff06 0,
      #ffffff06 1px,
      transparent 1px,
      transparent 14px
    ),
    #08090c;
}

.viewer__kit-skeleton--color {
  min-height: 160px;
  padding: 12px;
}

.viewer__kit-skeleton-swatches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  height: 100%;
  min-height: 136px;
}

.viewer__kit-skeleton-swatches span {
  border-radius: 8px;
  background: #ffffff0c;
}

.viewer__kit-skeleton-swatches span:nth-child(1) {
  background: linear-gradient(160deg, #2a3140, #12151c);
}

.viewer__kit-skeleton-swatches span:nth-child(2) {
  background: linear-gradient(160deg, #1c2433, #0d1016);
}

.viewer__kit-skeleton-swatches span:nth-child(3) {
  background: linear-gradient(160deg, #3a2a1c, #14100c);
}

.viewer__kit-skeleton-swatches span:nth-child(4) {
  background: linear-gradient(160deg, #1a2e28, #0c1210);
}

.viewer__kit-skeleton--type {
  min-height: 140px;
  padding: 18px 14px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.viewer__kit-skeleton-line {
  height: 10px;
  border-radius: 999px;
  background: #ffffff12;
  width: 78%;
}

.viewer__kit-skeleton-line--lg {
  height: 22px;
  width: 58%;
  background: #ffffff18;
}

.viewer__kit-skeleton-line--sm {
  width: 46%;
  background: #ffffff0c;
}

.viewer__expanded-kit-empty-copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, transparent 20%, #0a0b0ecc 70%, #0a0b0ef2);
  pointer-events: none;
}

.viewer__expanded-kit-empty-title {
  margin: 0;
  color: #f2f6ff;
  font-size: 13px;
  font-weight: 600;
}

.viewer__expanded-kit-empty-text {
  margin: 0;
  max-width: 28ch;
  color: #ffffff7a;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .viewer__expanded {
    --kit-panel-w: min(313px, 33vw);
  }
}

@media (max-width: 820px) {
  .viewer__expanded-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 8px minmax(200px, var(--kit-panel-h, 42%));
  }

  .viewer__expanded.is-kit-hidden .viewer__expanded-body {
    grid-template-rows: minmax(0, 1fr);
  }

  .viewer__expanded-splitter {
    width: auto;
    height: 8px;
    margin: -2px 0;
    cursor: row-resize;
  }

  .viewer__expanded-splitter::before {
    top: 50%;
    bottom: auto;
    left: 18%;
    right: 18%;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
  }

  .viewer__expanded-splitter:hover::before,
  .viewer__expanded-splitter:focus-visible::before,
  .viewer__expanded.is-resizing .viewer__expanded-splitter::before {
    width: auto;
    height: 3px;
  }

  .viewer__expanded.is-resizing,
  .viewer__expanded.is-resizing * {
    cursor: row-resize !important;
  }

  .viewer__expanded-kit-tabs {
    width: 148px;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  .viewer__community-sidebar {
    display: none;
  }

  .viewer__virtualizer,
  .panel-view {
    left: var(--grid-gap);
  }

  .tile > .tile__label {
    display: none;
  }
}