/* Working UI remains neutral; expressive color belongs to marketing content. */
.runner-page .tool-support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 24px;
  padding-top: 26px;
}
.runner-page .tool-support-panel,
.runner-page #tool-guide {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
}
.runner-page #tool-guide h2,
.runner-page .tool-support-panel:last-child h2 {
  font-size: 25px;
  margin: 8px 0 24px;
  max-width: none;
}
.runner-page #tool-guide-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}
.runner-page #tool-guide-steps li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 15px;
  align-items: center;
  line-height: 1.65;
  font-size: 13px;
}
.runner-page .guide-step-art {
  margin: 0;
  min-height: 58px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  background: var(--panel2);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 3px;
}
.runner-page .guide-step-art i {
  font-size: 20px;
}
.runner-page .guide-step-art span {
  font-size: 8px;
  letter-spacing: 0.6px;
}
#related-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.recommend-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--text);
  text-decoration: none;
  padding: 0;
  min-width: 0;
}
.recommend-card .xp-pixel {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: none;
  margin: 0 0 15px;
}
.recommend-card strong {
  font-size: 13px;
  line-height: 1.35;
}
.recommend-card p {
  font-size: 11px;
  line-height: 1.65;
  color: var(--muted);
  margin: 8px 0 12px;
}
.recommend-status {
  font-size: 10px;
  color: var(--muted);
  margin-top: auto;
}
.recommend-card[href]:hover .xp-pixel {
  transform: translateY(-2px);
}
.recommend-card[href]:hover .recommend-status {
  color: var(--text);
}
/* Welcome content flows below the hero. */
.visual-tour {
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  margin: 24px 0 45px;
}
.tour-tabs {
  border: 0;
  padding: 0 0 18px;
  max-width: 800px;
}
.tour-tabs button {
  padding: 12px 16px;
  border-radius: 9px;
}
.tour-tabs button[aria-selected="true"] {
  background: var(--panel2);
}
.tour-explainer {
  padding: 25px 32px 25px 0;
}
.tour-art {
  background: none !important;
}
.premium-welcome.rainbow-edge {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  padding: 54px 0 30px;
  overflow: visible;
}
.premium-welcome.rainbow-edge::before {
  height: 3px;
}
.premium-story .launch-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.welcome-intro {
  margin-top: 60px;
}
.sidebar-footer {
  min-height: 155px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 23px 18px 18px;
}
.mini-premium-art {
  height: 44px;
  display: flex;
  align-items: center;
  padding-left: 3px;
  gap: 9px;
  pointer-events: none;
}
.mini-premium-art .xp-pixel {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: none;
  transform: rotate(-8deg);
}
.mini-premium-art .xp-pixel:nth-child(2) {
  transform: rotate(7deg);
  width: 48px;
  height: 48px;
}
.mini-premium-art .xp-pixel:nth-child(3) {
  transform: rotate(-4deg);
}
.sidebar-footer > div {
  width: 100%;
  gap: 9px;
}
.sidebar-footer strong {
  font-size: 15px;
}
.sidebar-footer b {
  padding-top: 9px;
  font-size: 11px;
}
/* New light-mode artwork needs no white backing or glow. */
.tour-mascot,
.chat-avatar,
.drawer-hello img,
.account-art img,
.account-visual > img {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
[data-theme="dark"] .tour-mascot,
[data-theme="dark"] .chat-avatar,
[data-theme="dark"] .drawer-hello img,
[data-theme="dark"] .account-art img,
[data-theme="dark"] .account-visual > img {
  filter: invert(1) !important;
}
/* Compact conversation, full available container, latest message at bottom. */
.page.help-page {
  --bg: inherit;
  --panel: inherit;
  --panel2: inherit;
  --panel3: inherit;
  --text: inherit;
  --muted: inherit;
  --border: inherit;
  background: var(--bg);
  color: var(--text);
}
[data-theme="dark"] .page.help-page {
  --bg: #1f2023;
  --panel: #27282b;
  --panel2: #303135;
  --panel3: #38393e;
  --text: #f8f8f8;
  --muted: #999ba1;
  --border: #3b3d42;
}
[data-theme="light"] .page.help-page {
  --bg: #f7f6f3;
  --panel: #fffefa;
  --panel2: #f0efeb;
  --panel3: #e9e8e3;
  --text: #202124;
  --muted: #73767c;
  --border: #e2e1dc;
}
.help-layout,
.help-footnote {
  background: var(--bg);
  color: var(--muted);
}
.help-intro {
  border-color: var(--border);
  padding: 20px 30px 16px;
}
.help-intro h1 {
  font-size: 24px;
}
.help-intro .support-kicker {
  font-size: 9px;
}
.help-intro p {
  font-size: 12px;
}
#chat-messages {
  padding: 24px max(24px, calc((100% - 900px) / 2));
  gap: 20px;
}
#chat-messages::before {
  content: "";
  flex: 1 0 0;
  min-height: 0;
}
.chat-bubble {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.75;
}
.chat-bubble.bot {
  background: var(--panel);
  color: var(--text);
  margin-left: 86px;
  max-width: min(650px, calc(100% - 86px));
  padding: 16px 20px;
}
.chat-avatar {
  width: 70px;
  height: 88px;
  left: -86px;
  top: auto;
  bottom: 0;
  object-fit: contain;
}
.chat-bubble.user {
  background: var(--panel2);
  color: var(--text);
}
.chat-bubble a {
  color: var(--text);
}
.chat-bubble .xp-secondary {
  background: var(--panel2);
  color: var(--text);
  font-size: 11px;
}
#chat-form {
  width: calc(100% - 48px);
  max-width: 900px;
  margin: 0 auto 12px;
}
.chat-prompts {
  width: calc(100% - 48px);
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 0;
}
.chat-prompts button:hover {
  background: var(--panel2);
}
#chat-input {
  background: var(--panel);
  font-size: 13px;
}
.help-footnote {
  font-size: 9px;
}
.inline-support form {
  margin-top: 18px;
}
.inline-support label {
  display: block;
  font-size: 11px;
  margin: 12px 0;
}
.inline-support input,
.inline-support textarea {
  display: block;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px;
  font: inherit;
  margin-top: 6px;
  resize: vertical;
}
.inline-support small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}
.inline-support button {
  margin-top: 15px !important;
}
.inline-confirmation {
  font-size: 11px;
  margin-top: 12px !important;
}
/* Three paid tiers; free use is a concise invitation rather than a fourth plan. */
.billing-toggle {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 4px;
  background: var(--panel);
  margin: 12px 0 26px;
}
.billing-toggle button {
  background: transparent;
  color: var(--muted);
  padding: 11px 19px;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.billing-toggle button[aria-pressed="true"] {
  background: var(--text);
  color: var(--panel);
}
.billing-toggle small {
  font-size: 9px;
  margin-left: 7px;
}
.plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.plan-card {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
}
.plan-card .plan-symbol {
  font-size: 27px;
  color: #ab97c3;
  margin: 14px 0 22px;
}
.plan-card h3 {
  font-size: 26px;
}
.plan-card .support-kicker {
  font-size: 9px;
}
.plan-card .plan-price {
  font-size: 40px;
  margin: 16px 0 0;
}
.plan-card .billing-period {
  font-size: 10px;
  margin: 8px 0 15px;
}
.plan-card ul {
  font-size: 12px;
  line-height: 1.6;
  flex: 1;
  margin-top: 18px;
}
.plan-card .xp-primary,
.plan-card .xp-secondary {
  margin-top: auto;
}
.plan-recommended {
  position: absolute;
  top: 0;
  right: 18px;
  padding: 7px 10px;
  border-radius: 0 0 8px 8px;
  background: #bfa8d4;
  color: #382b43;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.free-invitation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  margin: 0 0 36px;
}
.free-invitation p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
.free-invitation strong {
  color: var(--text);
}
.free-invitation a {
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}
.agency-section {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 35px;
  align-items: center;
  margin: 55px 0;
  padding: 35px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.agency-section h2 {
  font-size: 32px;
  line-height: 1.15;
  margin: 13px 0;
  letter-spacing: -1px;
}
.agency-section p {
  max-width: 670px;
  line-height: 1.8;
  font-size: 14px;
  color: var(--muted);
}
.agency-symbols {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  color: #ad97c5;
}
.agency-symbols i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  font-size: 20px;
}
.faq-heading h2 {
  font-size: 29px;
  margin: 10px 0;
}
.faq-heading p {
  font-size: 13px;
  color: var(--muted);
}
.premium-faq {
  border: 0;
  margin-top: 24px;
}
.premium-faq details {
  padding: 0;
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}
.premium-faq summary {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  list-style: none;
  font-weight: 500;
}
.premium-faq summary::-webkit-details-marker {
  display: none;
}
.premium-faq summary:after {
  content: "+";
  margin-left: auto;
  color: var(--muted);
  font-size: 20px;
}
.premium-faq details[open] summary:after {
  content: "−";
}
.premium-faq summary i {
  font-size: 14px;
  color: var(--muted);
}
.premium-faq details p {
  padding: 0 20px 20px 47px;
  margin: 0;
}
@media (max-width: 1150px) {
  .runner-page .tool-support {
    grid-template-columns: 1fr;
  }
  #related-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .plan-grid {
    gap: 12px;
  }
  .plan-card {
    padding: 25px 18px;
  }
}
@media (max-width: 800px) {
  .plan-grid {
    grid-template-columns: 1fr;
  }
  .agency-section {
    grid-template-columns: 1fr;
  }
  .tour-explainer {
    padding: 20px 0;
  }
  .premium-welcome.rainbow-edge {
    padding: 35px 0;
  }
  .free-invitation {
    align-items: flex-start;
    flex-direction: column;
  }
  .chat-avatar {
    width: 58px;
    height: 74px;
    left: -70px;
  }
  .chat-bubble.bot {
    margin-left: 70px;
    max-width: calc(100% - 70px);
  }
  .help-intro {
    padding: 16px 20px;
  }
  .runner-page .tool-support-panel,
  .runner-page #tool-guide {
    padding: 22px;
  }
  .recommend-card .xp-pixel {
    width: 60px;
    height: 60px;
  }
  .recommend-card p {
    font-size: 10px;
  }
}
@media (max-width: 420px) {
  #related-tools {
    grid-template-columns: 1fr;
  }
  .recommend-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 2px 14px;
  }
  .recommend-card .xp-pixel {
    grid-row: 1/4;
    margin: 0;
  }
  .recommend-card p {
    margin: 5px 0;
  }
  .recommend-status {
    grid-column: 2;
  }
  .chat-bubble.bot {
    padding: 14px;
  }
  .help-intro .xp-secondary {
    max-width: 100px;
  }
}

/* v49: clear, full-width interactive tour and smooth icon scaling. */
.xp-pixel img,
.scene-tools img,
.nav-tool img,
.tool-icon img {
  image-rendering: auto !important;
  object-fit: contain;
}
.visual-tour {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  background: var(--panel) !important;
}
.tour-tabs {
  max-width: none;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 12px;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.tour-tabs button {
  font-size: 24px;
  font-weight: 700;
  padding: 20px 18px;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--panel);
  transition:
    background 0.18s,
    transform 0.18s,
    border-color 0.18s;
}
.tour-tabs button span {
  font-size: 13px;
  display: block;
  margin: 9px 0 0;
}
.tour-tabs button:hover {
  background: var(--panel2);
  transform: translateY(-2px);
}
.tour-tabs button[aria-selected="true"] {
  background: var(--text);
  color: var(--panel);
  border-color: var(--text);
  box-shadow: inset 0 -4px #78b9ac;
}
.tour-tabs button:focus-visible {
  outline: 3px solid #78b9ac;
  outline-offset: 2px;
}
.tour-explainer {
  padding: 32px;
}
[data-theme="dark"] .tour-art {
  background: #fff !important;
  color: #22252a;
  border-radius: 18px;
  margin: 16px;
  --panel2: #f4f4f4;
  --border: #dedede;
  --text: #22252a;
  --muted: #60656c;
}
[data-theme="dark"] .tour-art .tour-mascot {
  filter: none !important;
}
@media (max-width: 600px) {
  .tour-tabs {
    gap: 6px;
    padding: 8px;
  }
  .tour-tabs button {
    font-size: 22px;
    padding: 14px 8px;
  }
  .tour-tabs button span {
    font-size: 11px;
  }
  .tour-explainer {
    padding: 24px;
  }
}

.directory-discover {
  padding: 0 0 22px;
  background: none;
  border: 0;
  display: block;
}
.designer-filters {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}
.designer-filters label {
  display: grid;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.designer-filters select,
.designer-filters button {
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 9px;
  padding: 11px 14px;
  min-height: 42px;
}
.designer-filters button {
  cursor: pointer;
}
.designer-filters button:hover {
  background: var(--panel2);
}
.designer-filters select:focus-visible,
.designer-filters button:focus-visible {
  outline: 2px solid #78b9ac;
  outline-offset: 2px;
}

.task-picker {
  margin-bottom: 24px;
}
.task-picker h2 {
  font-size: 26px;
  margin: 0 0 8px;
}
.task-picker > p {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 20px;
}
.task-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.task-cards button {
  display: grid;
  text-align: left;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  padding: 20px;
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.18s,
    border-color 0.18s;
}
.task-cards i {
  color: #8baca5;
  font-size: 22px;
  margin-bottom: 5px;
}
.task-cards strong {
  font-size: 14px;
}
.task-cards span {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.task-cards button:hover {
  transform: translateY(-3px);
  border-color: #78b9ac;
}
.task-cards button[aria-pressed="true"] {
  border-color: #78b9ac;
  box-shadow: inset 0 0 0 1px #78b9ac;
}
.directory-discover {
  margin: 0 clamp(20px, 3vw, 44px);
}
.page.help-page {
  --bg: #fff;
  --panel: #fff;
  --panel2: #f3f4f6;
  --panel3: #e9ecf0;
  --text: #252a31;
  --muted: #69717b;
  --border: #e1e4e8;
  background: #fff;
  color: #252a31;
  margin-top: calc(var(--header) + 24px);
  margin-right: 24px;
  margin-bottom: 24px;
  border: 1px solid #e1e4e8;
  border-radius: 22px;
  overflow: hidden;
  height: min(760px, calc(100dvh - var(--header) - 48px));
  min-height: 480px;
}
.page.help-page .help-layout,
.page.help-page .help-footnote {
  background: #fff;
}
.page.help-page .chat-bubble.bot {
  background: #f3f4f6;
}
.page.help-page .chat-bubble.user {
  background: #eee9f7;
}
.page.help-page .chat-avatar {
  filter: none !important;
}
.tour-mascot,
.chat-avatar,
.drawer-hello img,
.account-art img,
.account-visual > img {
  width: 90px !important;
  height: 120px !important;
  object-fit: contain;
  transform: scaleX(1) !important;
}
.chat-avatar {
  left: -106px !important;
  top: auto !important;
  bottom: 0;
}
.chat-bubble.bot {
  margin-left: 106px;
  max-width: calc(100% - 106px);
}
@media (max-width: 700px) {
  .task-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page.help-page {
    margin-left: 12px;
    margin-right: 12px;
    margin-top: calc(var(--header) + 12px);
    height: calc(100dvh - var(--header) - 24px);
  }
  .chat-bubble.bot {
    margin-left: 100px;
    max-width: calc(100% - 100px);
    padding: 12px;
  }
  .chat-avatar {
    left: -100px !important;
  }
  .task-cards button {
    padding: 14px;
  }
}

.empty-state {
  margin: 24px clamp(20px, 3vw, 44px);
  padding: 40px 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel);
  text-align: center;
}
.empty-search-icon {
  font-size: 30px;
  color: #91bcb2;
  margin-bottom: 16px;
}
.empty-state h2 {
  font-size: 26px;
  color: var(--text);
  margin: 0 0 12px;
}
.empty-state > p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
.empty-shortcuts {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0 30px;
}
.empty-shortcuts button {
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--panel2);
  border-radius: 30px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.empty-suggestions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
}
.empty-suggestions a {
  display: grid;
  gap: 10px;
  text-decoration: none;
  padding: 20px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
}
.empty-suggestions i {
  font-size: 22px;
  color: #91bcb2;
}
.empty-suggestions strong {
  font-size: 13px;
}
.empty-suggestions span {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.empty-suggestions a:hover {
  border-color: #78b9ac;
}
.empty-state h3 {
  font-size: 14px;
  color: var(--text);
}
@media (max-width: 600px) {
  .empty-suggestions {
    grid-template-columns: 1fr;
  }
}

.section-title {
  font-size: 18px !important;
  gap: 12px !important;
  margin-top: 30px;
}
.section-title .section-category-icon {
  font-size: 22px !important;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.category-premium {
  min-height: 165px;
  padding: 30px !important;
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(120deg, #9ba8e319, #ab84ce19, #edb47319);
}
.category-premium strong {
  font-size: 22px !important;
  line-height: 1.3;
}
.category-premium small {
  font-size: 13px !important;
  margin-top: 10px;
}
.category-premium b {
  font-size: 12px !important;
  border-radius: 9px;
  background: var(--text);
  color: var(--panel);
  padding: 15px 18px !important;
  white-space: nowrap;
}
.sidebar-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 8px !important;
  min-height: 70px !important;
  padding: 18px 14px !important;
  background: linear-gradient(115deg, #6631a5, #b32773 45%, #bc452a 75%, #955c16) !important;
  border: 1px solid #ffffff30;
  border-radius: 14px;
  color: #fff !important;
}
.sidebar-footer strong {
  font-size: 12px !important;
  line-height: 1.4;
  letter-spacing: 0.4px;
}
.premium-spectrum-icon {
  font-size: 24px !important;
}
.sidebar-footer:hover {
  background: linear-gradient(115deg, #7940b9, #c53885 45%, #ca5539 75%, #a76a20) !important;
}
.nav-tool img,
.sidebar img,
.scene-tools img,
.xp-pixel img {
  image-rendering: auto !important;
  backface-visibility: hidden;
}
@media (max-width: 650px) {
  .category-premium {
    flex-wrap: wrap;
  }
  .category-premium strong {
    font-size: 19px !important;
  }
}
.account-tabs {
  display: flex;
  gap: 4px;
  width: min(320px, 100%);
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel2);
  margin: 24px 0;
}
.account-tabs button {
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: 13px;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.account-tabs button[aria-selected="true"] {
  background: var(--text);
  color: var(--panel);
  font-weight: 600;
}
.account-tabs button:focus-visible {
  outline: 3px solid #78b9ac;
  outline-offset: 2px;
}
.account-visual {
  background: #fff !important;
  color: #252a31 !important;
  border: 1px solid #e3e5e8 !important;
  border-radius: 22px;
}
.account-visual > img,
[data-theme="dark"] .account-visual > img {
  filter: none !important;
}
.account-visual > strong {
  color: #252a31 !important;
}
/* Mascots live on white sections, never on individual image tiles. */
.visual-tour,
.account-visual,
.account-art,
.page.help-page,
.support-drawer:has(.drawer-hello img) {
  --bg: #fff;
  --panel: #fff;
  --panel2: #f3f4f6;
  --panel3: #e9ecf0;
  --text: #252a31;
  --muted: #69717b;
  --border: #e1e4e8;
  background: #fff !important;
  color: #252a31 !important;
}
.visual-tour .tour-art,
[data-theme="dark"] .visual-tour .tour-art {
  background: transparent !important;
  border-radius: 0;
  margin: 0;
}
.tour-mascot,
.chat-avatar,
.drawer-hello img,
.account-art img,
.account-visual > img,
#chat-mascot,
[data-theme="dark"] .tour-mascot,
[data-theme="dark"] .chat-avatar,
[data-theme="dark"] .drawer-hello img,
[data-theme="dark"] .account-art img,
[data-theme="dark"] .account-visual > img {
  background: transparent !important;
  filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Sign-up artwork is composed as part of the white panel. */
.account-visual {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  grid-template-rows: auto 1fr;
  align-items: end;
  gap: 24px 16px;
  padding: 34px !important;
  min-height: 330px;
}
.account-visual > strong {
  grid-column: 1/-1;
  align-self: start;
  max-width: 300px;
  font-size: 32px;
}
.account-visual > img {
  position: static !important;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  margin: 0 !important;
}
.account-visual .account-sticker {
  position: static;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #58606b;
  font-size: 12px;
  line-height: 1.6;
  transform: none;
}
.account-visual .account-sticker.one {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
}
.account-visual .account-sticker.two {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  padding-bottom: 12px;
}
.account-visual[data-account-mode="login"] > img {
  display: none;
}
@media (max-width: 450px) {
  .account-visual {
    gap: 18px 10px;
    padding: 24px !important;
    grid-template-columns: 1fr 90px;
  }
  .account-visual > img {
    grid-column: 2;
    grid-row: 2/4;
  }
  .account-visual .account-sticker.one {
    grid-column: 1;
    grid-row: 2;
  }
  .account-visual .account-sticker.two {
    grid-column: 1;
    grid-row: 3;
  }
  .account-visual > strong {
    font-size: 28px;
  }
}

/*!
PXLS | https://pxls.tools
Copyright (c) 2026 Matt Cannon. All rights reserved.

To the extent protected by applicable law, PXLS original source code,
original written content, artwork, and other original creative elements
are proprietary to Matt Cannon, except where otherwise identified.

Access to this website permits use of its tools as provided under the
site's terms. Public availability of source code does not grant a license
to copy, redistribute, sell, sublicense, or republish protected PXLS
material, or use that material to create a competing copy, without prior
written permission, except as permitted by applicable law.

Third-party libraries, fonts, icons, and other licensed components remain
subject to their respective licenses and copyright notices. This notice
does not restrict rights granted by those licenses, claim ownership of
user-provided material, or claim exclusive rights in ideas, methods,
functionality, or other material not protected by copyright.

For permission requests, contact PXLS through https://pxls.tools/pages/help.html.
*/