:root {
  color-scheme: light;
  background: #faf8f4;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top, rgba(215, 205, 186, 0.34), transparent 38%),
    linear-gradient(180deg, #faf8f4 0%, #f7f2ea 100%);
}

#app-boot-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background:
    radial-gradient(circle at top, rgba(215, 205, 186, 0.34), transparent 38%),
    linear-gradient(180deg, #faf8f4 0%, #f7f2ea 100%);
  transition: opacity 180ms ease;
}

html[data-app-mounted="true"] #app-boot-shell {
  opacity: 0;
  pointer-events: none;
}

.boot-shell-frame {
  width: min(1440px, 100%);
  padding: 20px 16px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.boot-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(229, 222, 210, 0.88);
}

.boot-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: bootShimmer 1.25s infinite;
}

.boot-announcement {
  height: 36px;
  border-radius: 999px;
}

.boot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border: 1px solid rgba(61, 52, 42, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
}

.boot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.boot-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 999px;
}

.boot-brand-lines,
.boot-nav,
.boot-actions,
.boot-hero-copy,
.boot-grid {
  display: flex;
  gap: 12px;
}

.boot-brand-lines {
  flex-direction: column;
}

.boot-line {
  height: 12px;
  border-radius: 999px;
}

.boot-line-w-42 {
  width: 42px;
}

.boot-line-w-62 {
  width: 62px;
}

.boot-line-w-72 {
  width: 72px;
}

.boot-line-w-88 {
  width: 88px;
}

.boot-line-w-96 {
  width: 96px;
}

.boot-line-w-120 {
  width: 120px;
}

.boot-line-w-122 {
  width: 122px;
}

.boot-line-w-128 {
  width: 128px;
}

.boot-line-w-156 {
  width: 156px;
}

.boot-line-w-full {
  width: 100%;
}

.boot-line-w-82p {
  width: 82%;
}

.boot-line-w-72p {
  width: 72%;
}

.boot-line-w-70p {
  width: 70%;
}

.boot-line-w-68p {
  width: 68%;
}

.boot-line-w-65p {
  width: 65%;
}

.boot-line-w-60p {
  width: 60%;
}

.boot-line-w-56p {
  width: 56%;
}

.boot-line-w-52p {
  width: 52%;
}

.boot-line-w-50p {
  width: 50%;
}

.boot-line-w-48p {
  width: 48%;
}

.boot-line-w-46p {
  width: 46%;
}

.boot-line-w-42p {
  width: 42%;
}

.boot-line-w-38p {
  width: 38%;
}

.boot-line-w-34p {
  width: 34%;
}

.boot-line-h-42 {
  height: 42px;
}

.boot-line-h-46 {
  height: 46px;
}

.boot-line-h-58 {
  height: 58px;
}

.boot-layout {
  display: grid;
  gap: 24px;
}

.boot-hero,
.boot-card {
  border: 1px solid rgba(61, 52, 42, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
}

.boot-hero {
  display: grid;
  gap: 24px;
  padding: 24px;
}

.boot-hero-copy {
  flex-direction: column;
}

.boot-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.boot-grid {
  flex-wrap: wrap;
}

.boot-card {
  flex: 1 1 220px;
  min-width: 220px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.boot-card-media {
  aspect-ratio: 4 / 5;
  border-radius: 22px;
}

.boot-panel {
  min-height: 300px;
  border-radius: 28px;
}

@media (min-width: 900px) {
  .boot-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  }

  .boot-nav {
    display: flex;
  }
}

@keyframes bootShimmer {
  100% {
    transform: translateX(100%);
  }
}