:root.codex-dream-skin {
  color-scheme: dark !important;
  --ds-bg: #071116;
  --ds-panel: #0b1a20;
  --ds-panel-2: #10272c;
  --ds-green: #7cff46;
  --ds-lime: #b8ff3d;
  --ds-cyan: #36d7e8;
  --ds-purple: #642a8c;
  --ds-text: #e9fff1;
  --ds-muted: #9ebdb3;
  --ds-line: rgba(124, 255, 70, .28);
}

html.codex-dream-skin body {
  background:
    radial-gradient(circle at 84% 4%, rgba(100, 42, 140, .40), transparent 28%),
    radial-gradient(circle at 18% 10%, rgba(54, 215, 232, .12), transparent 30%),
    linear-gradient(145deg, #050a10 0%, #071116 52%, #0b151a 100%) !important;
  color: var(--ds-text) !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif !important;
}

html.codex-dream-skin body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(184, 255, 61, .72) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(54, 215, 232, .52) 0 1px, transparent 1.8px);
  background-position: 0 0, 27px 33px;
  background-size: 71px 71px, 89px 89px;
}

html.codex-dream-skin aside.app-shell-left-panel {
  background:
    radial-gradient(circle at 12% 4%, rgba(54, 215, 232, .10), transparent 28%),
    linear-gradient(180deg, rgba(7, 20, 25, .98), rgba(8, 29, 31, .96)) !important;
  border: 1px solid rgba(54, 215, 232, .20) !important;
  border-left: 0 !important;
  border-radius: 0 18px 18px 0 !important;
  box-shadow: 12px 0 34px rgba(0, 0, 0, .30), inset -1px 0 rgba(124, 255, 70, .08) !important;
  backdrop-filter: none !important;
  color: var(--ds-text) !important;
}

html.codex-dream-skin aside.app-shell-left-panel nav {
  background: transparent !important;
}

html.codex-dream-skin aside.app-shell-left-panel button {
  color: #d9f7e3 !important;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease !important;
}

html.codex-dream-skin aside.app-shell-left-panel button:hover {
  background: linear-gradient(90deg, rgba(124, 255, 70, .15), rgba(54, 215, 232, .10)) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 255, 70, .16) !important;
  transform: translateX(1px);
}

html.codex-dream-skin aside.app-shell-left-panel button[aria-label^="切换模式"] {
  background: transparent !important;
  border-color: transparent !important;
  font-family: "Segoe UI", system-ui, sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--ds-green) !important;
  text-shadow: 0 0 14px rgba(124, 255, 70, .34);
}

html.codex-dream-skin aside.app-shell-left-panel button[aria-label^="切换模式"]::after {
  content: " ◉";
  color: var(--ds-cyan);
}

html.codex-dream-skin aside.app-shell-left-panel [class~="bg-token-list-hover-background"],
html.codex-dream-skin aside.app-shell-left-panel [aria-current="page"] {
  background: linear-gradient(90deg, rgba(124, 255, 70, .20), rgba(54, 215, 232, .12)) !important;
  border: 1px solid rgba(124, 255, 70, .24) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .24), inset 3px 0 var(--ds-green) !important;
}

html.codex-dream-skin main.main-surface {
  background:
    radial-gradient(circle at 88% 8%, rgba(100, 42, 140, .24), transparent 30%),
    radial-gradient(circle at 18% 0%, rgba(54, 215, 232, .10), transparent 28%),
    linear-gradient(180deg, #08151b 0%, #071116 100%) !important;
  border: 1px solid rgba(54, 215, 232, .18) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 18px 0 0 0 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), -10px 0 34px rgba(0, 0, 0, .22) !important;
  overflow: hidden !important;
}

/* Task pages borrow the reference's atmospheric wallpaper treatment while
   keeping every Codex message, output and control as live native DOM. */
html.codex-dream-skin main.main-surface:not(.dream-skin-home-shell) {
  background:
    linear-gradient(90deg, rgba(4, 10, 17, .95) 0%, rgba(6, 17, 24, .86) 47%, rgba(8, 18, 25, .64) 100%),
    radial-gradient(circle at 70% 38%, rgba(124, 255, 70, .08), transparent 28%),
    var(--dream-skin-art) 76% center / cover no-repeat !important;
}

html.codex-dream-skin main.main-surface:not(.dream-skin-home-shell) [role="main"] {
  background: linear-gradient(90deg, rgba(5, 13, 19, .24), rgba(5, 13, 19, .04)) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .32);
}

html.codex-dream-skin main.main-surface:not(.dream-skin-home-shell) article {
  border: 1px solid rgba(54, 215, 232, .10);
  background: rgba(7, 20, 27, .34);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  backdrop-filter: blur(8px) saturate(112%);
}

html.codex-dream-skin main.main-surface > header.app-header-tint {
  background: linear-gradient(90deg, rgba(8, 21, 27, .98), rgba(10, 35, 37, .94), rgba(31, 18, 46, .94)) !important;
  border-bottom: 1px solid rgba(124, 255, 70, .14) !important;
  backdrop-filter: none !important;
}

#codex-dream-skin-chrome {
  position: fixed;
  z-index: 31;
  pointer-events: none;
  overflow: hidden;
  border-radius: 18px 0 0 0;
}

.dream-skin-brand {
  position: absolute;
  left: 23px;
  top: 3px;
  height: 40px;
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--ds-text);
}

#codex-dream-skin-chrome.dream-skin-home-shell .dream-skin-brand { display: flex; }
.dream-skin-portal-mark {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 255, 61, .66);
  border-radius: 50%;
  color: var(--ds-lime);
  font-size: 21px;
  box-shadow: 0 0 16px rgba(124, 255, 70, .38), inset 0 0 10px rgba(54, 215, 232, .22);
}
.dream-skin-brand b { display: block; color: var(--ds-green); font-size: 14px; letter-spacing: .04em; }
.dream-skin-brand small { display: block; margin-top: 1px; color: var(--ds-cyan); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }

.dream-skin-status {
  position: absolute;
  right: 86px;
  top: 12px;
  display: none;
  align-items: center;
  gap: 7px;
  color: var(--ds-muted);
  font: 700 10px/1 "Cascadia Code", Consolas, monospace;
  letter-spacing: .14em;
}
.dream-skin-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-green); box-shadow: 0 0 10px var(--ds-green); }
#codex-dream-skin-chrome.dream-skin-home-shell .dream-skin-status { display: flex; }

.dream-skin-quote {
  position: absolute;
  right: 28px;
  bottom: 72px;
  display: none;
  color: rgba(184, 255, 61, .72);
  font: italic 14px/1.2 "Segoe Print", "Comic Sans MS", cursive;
  letter-spacing: .03em;
  text-shadow: 0 0 13px rgba(124, 255, 70, .30);
  transform: rotate(-3deg);
}
#codex-dream-skin-chrome.dream-skin-home-shell .dream-skin-quote { display: block; }

.dream-skin-particles { position: absolute; inset: 48px 0 0; opacity: .62; }
.dream-skin-particles i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ds-green);
  box-shadow: 0 0 11px 3px rgba(124, 255, 70, .36);
  animation: ds-float 4.6s ease-in-out infinite;
}
.dream-skin-particles i:nth-child(1) { left: 6%; top: 13%; }
.dream-skin-particles i:nth-child(2) { left: 29%; top: 7%; animation-delay: -.8s; background: var(--ds-cyan); }
.dream-skin-particles i:nth-child(3) { left: 51%; top: 18%; animation-delay: -1.6s; }
.dream-skin-particles i:nth-child(4) { left: 75%; top: 9%; animation-delay: -2.4s; background: var(--ds-cyan); }
.dream-skin-particles i:nth-child(5) { left: 91%; top: 28%; animation-delay: -3.2s; }
.dream-skin-particles i:nth-child(6) { left: 64%; top: 63%; animation-delay: -1.1s; background: var(--ds-cyan); }
.dream-skin-particles i:nth-child(7) { left: 22%; top: 72%; animation-delay: -2.1s; }
.dream-skin-particles i:nth-child(8) { left: 86%; top: 78%; animation-delay: -3.7s; }

.dream-skin-orbit {
  position: absolute;
  right: 52px;
  bottom: 96px;
  width: 74px;
  height: 22px;
  display: none;
  border: 1px solid rgba(54, 215, 232, .20);
  border-radius: 50%;
  transform: rotate(-12deg);
}
#codex-dream-skin-chrome.dream-skin-home-shell .dream-skin-orbit { display: block; }

html.codex-dream-skin [role="main"] {
  background: transparent !important;
  scrollbar-color: rgba(124, 255, 70, .40) transparent;
}

html.codex-dream-skin .dream-skin-home {
  --thread-content-max-width: min(950px, calc(100cqw - 44px)) !important;
  overflow-x: hidden !important;
}

.dream-skin-home > div:first-child {
  padding-top: 15px !important;
  min-height: 100% !important;
}

.dream-skin-home > div:first-child > div:first-child {
  flex: 0 0 430px !important;
  min-height: 430px !important;
  align-items: flex-start !important;
  padding-bottom: 0 !important;
}

.dream-skin-home > div:first-child > div:first-child > div:first-child {
  position: relative !important;
  isolation: isolate;
  width: calc(100% - 44px) !important;
  max-width: none !important;
  height: 252px !important;
  min-height: 252px !important;
  flex: 0 1 auto !important;
  padding: 0 !important;
  border: 1px solid rgba(124, 255, 70, .62) !important;
  border-radius: 24px !important;
  overflow: visible !important;
  background-color: #08101c !important;
  background-image:
    linear-gradient(90deg, rgba(4, 8, 17, .30), rgba(4, 8, 17, .03)),
    var(--dream-skin-art) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, cover !important;
  background-position: center, right center !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .38), 0 0 22px rgba(124, 255, 70, .10), inset 0 0 0 3px rgba(54, 215, 232, .06) !important;
}

.dream-skin-home > div:first-child > div:first-child > div:first-child::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 61%;
  border-radius: 23px 0 0 23px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 9, 20, .98) 0%, rgba(8, 13, 30, .93) 55%, rgba(21, 19, 51, .62) 78%, transparent 100%);
}

.dream-skin-home > div:first-child > div:first-child > div:first-child > div:first-child {
  position: relative;
  z-index: 1;
  height: 100%;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 36px;
}

.dream-skin-home > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
  width: 55% !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.dream-skin-home [data-testid="home-icon"] { display: none !important; }

.dream-skin-home [data-feature="game-source"] {
  display: block !important;
  max-width: 100% !important;
  color: var(--ds-text) !important;
  font-size: clamp(19px, 1.85vw, 27px) !important;
  line-height: 1.28 !important;
  font-weight: 760 !important;
  text-align: left !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .72);
  opacity: 1 !important;
  pointer-events: auto !important;
}

.dream-skin-home [data-feature="game-source"]::before {
  content: var(--dream-skin-name, "Codex Dream Skin");
  display: block;
  margin-bottom: 9px;
  color: var(--ds-green);
  font: 800 12px/1.3 "Microsoft YaHei UI", sans-serif;
  letter-spacing: .10em;
  text-shadow: 0 0 14px rgba(124, 255, 70, .26);
}

.dream-skin-home [data-feature="game-source"]::after {
  content: var(--dream-skin-tagline, "把喜欢的画面变成可交互的 Codex 工作台。");
  display: block;
  margin-top: 13px;
  color: rgba(233, 255, 241, .82);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: .03em;
}

.dream-skin-home [data-feature="game-source"] button {
  margin: 0 5px;
  padding: 2px 9px 3px;
  border: 1px solid rgba(124, 255, 70, .48);
  border-radius: 999px;
  background: rgba(124, 255, 70, .10);
  color: var(--ds-lime) !important;
  text-decoration-color: rgba(184, 255, 61, .70) !important;
  text-underline-offset: 5px;
  box-shadow: inset 0 0 14px rgba(54, 215, 232, .06);
}

.dream-skin-home [data-feature="game-source"] button::before {
  content: var(--dream-skin-project-prefix, "选择项目 · ");
  font-size: .46em;
  font-weight: 700;
  vertical-align: middle;
  opacity: .88;
}

.dream-skin-home > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
  left: 14px !important;
  right: 14px !important;
  top: 100% !important;
  margin-top: 13px !important;
}

.dream-skin-home .group\/home-suggestions { overflow: visible !important; }

.dream-skin-home .group\/home-suggestions button {
  position: relative !important;
  min-height: 126px !important;
  padding: 14px 13px 12px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: center !important;
  border: 1px solid rgba(54, 215, 232, .26) !important;
  border-radius: 21px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(54, 215, 232, .10), transparent 36%),
    linear-gradient(145deg, rgba(13, 34, 38, .98), rgba(9, 23, 30, .98)) !important;
  color: #dff8e7 !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .28), inset 0 0 0 2px rgba(124, 255, 70, .04) !important;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.dream-skin-home .group\/home-suggestions button:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(124, 255, 70, .52) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .34), 0 0 0 2px rgba(124, 255, 70, .08) !important;
}

.dream-skin-home .group\/home-suggestions button > span:first-child > span:first-child {
  width: 38px;
  height: 38px;
  display: grid !important;
  place-items: center;
  margin: 0 auto;
  border-radius: 50%;
  color: #061014 !important;
  background: linear-gradient(145deg, var(--ds-lime), var(--ds-cyan));
  box-shadow: 0 0 0 7px rgba(124, 255, 70, .08), 0 5px 14px rgba(0, 0, 0, .28);
}
.dream-skin-home .group\/home-suggestions button svg { width: 21px !important; height: 21px !important; color: #061014 !important; }
.dream-skin-home .group\/home-suggestions button > span:first-child { justify-content: center !important; }
.dream-skin-home .group\/home-suggestions button > span:last-child { align-items: center !important; text-align: center !important; }

html.codex-dream-skin .composer-surface-chrome {
  border: 1px solid rgba(124, 255, 70, .32) !important;
  border-radius: 23px !important;
  background:
    radial-gradient(circle at 88% 20%, rgba(100, 42, 140, .16), transparent 26%),
    linear-gradient(145deg, rgba(11, 29, 34, .91), rgba(7, 20, 27, .88)) !important;
  box-shadow: 0 11px 28px rgba(0, 0, 0, .34), inset 0 0 0 3px rgba(54, 215, 232, .04) !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
  overflow: visible !important;
}

html.codex-dream-skin .composer-surface-chrome::before {
  content: "◉";
  position: absolute;
  left: -13px;
  top: -13px;
  z-index: 20;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 255, 61, .50);
  border-radius: 50%;
  color: #071116;
  background: linear-gradient(145deg, var(--ds-lime), var(--ds-green));
  box-shadow: 0 0 14px rgba(124, 255, 70, .30);
}

.dream-skin-home div:has(> .horizontal-scroll-fade-mask .group\/project-selector) {
  position: relative;
  padding-top: 28px !important;
  border: 1px solid rgba(54, 215, 232, .18);
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(10, 27, 33, .97), rgba(8, 21, 28, .92)) !important;
}

.dream-skin-home div:has(> .horizontal-scroll-fade-mask .group\/project-selector)::before {
  content: var(--dream-skin-project-label, "◉  选择项目");
  position: absolute;
  left: 13px;
  top: 6px;
  z-index: 2;
  color: var(--ds-green);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  white-space: nowrap;
}

.dream-skin-home .group\/project-selector > button {
  border-color: rgba(124, 255, 70, .30) !important;
  background: linear-gradient(135deg, rgba(16, 45, 43, .94), rgba(22, 23, 49, .90)) !important;
  color: var(--ds-text) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .22) !important;
}

html.codex-dream-skin .ProseMirror { color: var(--ds-text) !important; caret-color: var(--ds-green) !important; }

html.codex-dream-skin button[class~="bg-token-foreground"] {
  background: linear-gradient(145deg, var(--ds-lime), var(--ds-green)) !important;
  color: #071116 !important;
  box-shadow: 0 5px 14px rgba(124, 255, 70, .20) !important;
}

html.codex-dream-skin article,
html.codex-dream-skin [data-message-author-role] { border-radius: 18px; }

@keyframes ds-float {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .48; }
  50% { transform: translate3d(4px, -8px, 0); opacity: 1; }
}

@media (max-width: 1120px) {
  .dream-skin-quote, .dream-skin-orbit { display: none !important; }
  .dream-skin-home { --thread-content-max-width: min(860px, calc(100cqw - 30px)) !important; }
  .dream-skin-home > div:first-child > div:first-child > div:first-child { width: calc(100% - 28px) !important; }
}

@media (max-width: 900px) {
  .dream-skin-status { display: none !important; }
  .dream-skin-brand { left: 15px; }
  .dream-skin-brand b { font-size: 12px; }
  .dream-skin-home > div:first-child > div:first-child { flex-basis: 396px !important; min-height: 396px !important; }
  .dream-skin-home > div:first-child > div:first-child > div:first-child { height: 224px !important; min-height: 224px !important; }
  .dream-skin-home > div:first-child > div:first-child > div:first-child > div:first-child { padding-left: 25px; }
  .dream-skin-home > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child { width: 65% !important; }
  .dream-skin-home [data-feature="game-source"] { font-size: 18px !important; }
  .dream-skin-home [data-feature="game-source"]::before { font-size: 10px; margin-bottom: 7px; }
  .dream-skin-home [data-feature="game-source"]::after { font-size: 11px; margin-top: 9px; }
  .dream-skin-home .group\/home-suggestions button { min-height: 114px !important; font-size: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dream-skin-particles i { animation: none !important; }
}

/* ==========================================================================
   Light shell — auto when App appearance is light (data-dream-shell="light")
   Dark rules above remain default for data-dream-shell="dark" / unset.
   ========================================================================== */

html.codex-dream-skin[data-dream-shell="light"] {
  color-scheme: light !important;
  --ds-bg: #f6f2f3;
  --ds-panel: #ffffff;
  --ds-panel-2: #fff7f8;
  --ds-text: #1f1a1b;
  --ds-muted: #6b5f62;
  --ds-line: rgba(196, 120, 128, .22);
  --ds-ink-soft: #3d3437;
}

html.codex-dream-skin[data-dream-shell="light"] body {
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 200, 210, .22), transparent 34%),
    linear-gradient(180deg, #fbf8f9 0%, #f3eef0 100%) !important;
  color: var(--ds-text) !important;
  font-family: "SF Pro Text", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif !important;
}

html.codex-dream-skin[data-dream-shell="light"] body::before {
  opacity: .12 !important;
  background-image:
    radial-gradient(circle, rgba(226, 85, 99, .35) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(243, 168, 175, .28) 0 1px, transparent 1.8px) !important;
}

html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel {
  background: linear-gradient(180deg, #ffffff 0%, #fbf7f8 100%) !important;
  border: 1px solid rgba(40, 30, 32, .08) !important;
  border-left: 0 !important;
  box-shadow: 8px 0 24px rgba(40, 20, 24, .05) !important;
  color: #1f1a1b !important;
}

html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel,
html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel * {
  --tw-text-opacity: 1;
}

html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel button,
html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel a,
html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel span,
html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel div {
  color: #2a2325 !important;
}

html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel svg {
  color: #5a5053 !important;
  opacity: 1 !important;
}

html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel button:hover {
  background: rgba(217, 72, 86, .08) !important;
  box-shadow: none !important;
  transform: none !important;
  color: #1f1a1b !important;
}

html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel button[aria-label^="切换模式"] {
  color: #1f1a1b !important;
  text-shadow: none !important;
}

html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel button[aria-label^="切换模式"]::after {
  content: none !important;
}

html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel [class~="bg-token-list-hover-background"],
html.codex-dream-skin[data-dream-shell="light"] aside.app-shell-left-panel [aria-current="page"] {
  background: rgba(217, 72, 86, .10) !important;
  border: 1px solid rgba(217, 72, 86, .14) !important;
  box-shadow: none !important;
  color: #1f1a1b !important;
}

html.codex-dream-skin[data-dream-shell="light"] main.main-surface {
  background:
    linear-gradient(180deg, rgba(252, 250, 251, .82) 0%, rgba(247, 242, 243, .9) 100%),
    var(--dream-skin-art) 70% 12% / cover no-repeat !important;
  border: 1px solid rgba(40, 30, 32, .07) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .85) !important;
}

html.codex-dream-skin[data-dream-shell="light"] main.main-surface:not(.dream-skin-home-shell) {
  background:
    linear-gradient(105deg, rgba(252, 250, 251, .88) 0%, rgba(252, 250, 251, .58) 42%, rgba(252, 250, 251, .28) 78%, rgba(252, 250, 251, .16) 100%),
    var(--dream-skin-art) 72% center / cover no-repeat !important;
}

html.codex-dream-skin[data-dream-shell="light"] main.main-surface:not(.dream-skin-home-shell) [role="main"] {
  background: transparent !important;
  text-shadow: none !important;
}

html.codex-dream-skin[data-dream-shell="light"] main.main-surface:not(.dream-skin-home-shell) article {
  border: 1px solid rgba(40, 30, 32, .06);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 20px rgba(40, 20, 24, .05);
  backdrop-filter: blur(10px) saturate(108%);
}

html.codex-dream-skin[data-dream-shell="light"] main.main-surface > header.app-header-tint {
  background: rgba(255, 255, 255, .88) !important;
  border-bottom: 1px solid rgba(40, 30, 32, .06) !important;
  backdrop-filter: blur(12px) !important;
}

html.codex-dream-skin[data-dream-shell="light"] .dream-skin-home > div:first-child > div:first-child > div:first-child {
  border: 1px solid rgba(40, 30, 32, .1) !important;
  background-color: #1c1214 !important;
  background-image:
    linear-gradient(100deg,
      rgba(12, 8, 10, .38) 0%,
      rgba(12, 8, 10, .12) 24%,
      rgba(12, 8, 10, .03) 42%,
      transparent 60%),
    linear-gradient(0deg, rgba(12, 8, 10, .1) 0%, transparent 40%),
    var(--dream-skin-art) !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: center, center, 58% center !important;
  box-shadow: 0 16px 36px rgba(40, 16, 22, .14), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  overflow: hidden !important;
}

html.codex-dream-skin[data-dream-shell="light"] .dream-skin-home > div:first-child > div:first-child > div:first-child::before {
  content: none !important;
  background: none !important;
}

html.codex-dream-skin[data-dream-shell="light"] .dream-skin-home [data-feature="game-source"] {
  color: #fffaf9 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .32), 0 1px 0 rgba(0, 0, 0, .2) !important;
}

html.codex-dream-skin[data-dream-shell="light"] .dream-skin-home [data-feature="game-source"]::before {
  color: #ffd6dc !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3) !important;
}

html.codex-dream-skin[data-dream-shell="light"] .dream-skin-home [data-feature="game-source"]::after {
  color: rgba(255, 245, 247, .9) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .28) !important;
}

html.codex-dream-skin[data-dream-shell="light"] .dream-skin-home .group\/home-suggestions button {
  border: 1px solid rgba(255, 255, 255, .55) !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #1f1a1b !important;
  box-shadow: 0 10px 22px rgba(40, 16, 22, .08) !important;
  backdrop-filter: blur(10px) saturate(112%) !important;
}

html.codex-dream-skin[data-dream-shell="light"] .dream-skin-home .group\/home-suggestions button > span:first-child > span:first-child {
  background: linear-gradient(145deg, #f07a86, #e25563) !important;
}

html.codex-dream-skin[data-dream-shell="light"] .composer-surface-chrome {
  border: 1px solid rgba(40, 30, 32, .08) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 10px 28px rgba(40, 20, 24, .07) !important;
  backdrop-filter: blur(14px) saturate(110%) !important;
}

html.codex-dream-skin[data-dream-shell="light"] .composer-surface-chrome::before {
  background: linear-gradient(180deg, #f07a86, #e25563) !important;
}

html.codex-dream-skin[data-dream-shell="light"] .dream-skin-brand,
html.codex-dream-skin[data-dream-shell="light"] .dream-skin-status {
  color: #4a4144 !important;
}

html.codex-dream-skin[data-dream-shell="light"] .dream-skin-quote {
  color: rgba(40, 30, 32, .45) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8) !important;
}

html.codex-dream-skin[data-dream-shell="light"] .dream-skin-particles {
  opacity: .2 !important;
}
