html[data-ouou-home-presentation] .topbar {
  gap: 18px;
  border-bottom-color: #f0f1f4;
  padding-inline: 20px;
  background: #fff;
}

html[data-ouou-home-presentation] .search {
  min-width: 180px;
  max-width: 780px;
  height: 42px;
  flex: 1 1 560px;
  gap: 10px;
  padding-inline: 15px;
  border: 1px solid transparent;
  border-radius: 24px;
  background: #f4f5f7;
  transition: background .16s ease, border-color .16s ease;
}

html[data-ouou-home-presentation] .search:focus-within { border-color: #d6e2fa; background: #fafcff; }
html[data-ouou-home-presentation] .search svg { color: #89909d; }
html[data-ouou-home-presentation] .search input { font-size: 14px; }
html[data-ouou-home-presentation] .search input::placeholder { color: #9a9faa; }
html[data-ouou-home-presentation] .top-actions { gap: 8px; flex: 0 0 auto; }

html[data-ouou-home-presentation] .top-action,
html[data-ouou-home-presentation] .benefit-part {
  height: 36px;
  gap: 6px;
  padding-inline: 12px;
  border: 0;
  border-radius: 20px;
  color: #4e5665;
  background: #f3f4f7;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  transform: none;
  box-shadow: none;
  transition: background .16s ease, color .16s ease;
}

html[data-ouou-home-presentation] .top-action svg,
html[data-ouou-home-presentation] .benefit-part svg { width: 16px; height: 16px; flex: 0 0 16px; }
html[data-ouou-home-presentation] .top-action.gift { color: #c87526; background: #fff0df; }
html[data-ouou-home-presentation] .top-action.gift:hover { background: #ffe7cd; }
html[data-ouou-home-presentation] .top-action.supply svg { color: #5482dc; }
html[data-ouou-home-presentation] .top-action.supply:hover { background: #e9edf5; }
html[data-ouou-home-presentation] .benefit-group { height: 36px; border-radius: 20px; background: #f3f4f7; transform: none; box-shadow: none; }
html[data-ouou-home-presentation] .benefit-part { background: transparent; }
html[data-ouou-home-presentation] .benefit-part:hover { background: #e9edf5; }
html[data-ouou-home-presentation] .benefit-part.credits-part { color: #4576cf; }
html[data-ouou-home-presentation] .benefit-part strong { font-size: 14px; font-weight: 650; }
html[data-ouou-home-presentation] .balance-status { font-size: 12px; }
html[data-ouou-home-presentation] .member-part svg { color: #c28c2d; }
html[data-ouou-home-presentation] .benefit-divider { display: block; width: 1px; height: 14px; background: #dfe3ea; }
html[data-ouou-home-presentation] .icon-action { width: 36px; height: 36px; flex: 0 0 36px; border: 0; color: #606879; background: #f3f4f7; text-decoration: none; }
html[data-ouou-home-presentation] .icon-action:hover { background: #e9edf5; }
html[data-ouou-home-presentation] .icon-action svg { width: 17px; height: 17px; }
html[data-ouou-home-presentation] #accountMenuTrigger[data-account-state="authenticated"] { width: 36px; height: 36px; min-width: 36px; border: 2px solid #fff; font-size: 14px; box-shadow: 0 0 0 1px #e5e8ef; }
html[data-ouou-home-presentation] .top-actions button:focus-visible,
html[data-ouou-home-presentation] .top-actions a:focus-visible { outline: 2px solid #467fd5; outline-offset: 3px; }

html[data-ouou-home-presentation] #homeAccountMenu { border-color: #e5e8ef; border-radius: 16px; box-shadow: 0 18px 55px rgba(29, 40, 60, .16); }
html[data-ouou-home-presentation] .account-menu-identity { padding: 18px; }
html[data-ouou-home-presentation] .account-menu-avatar { background: #232a39; }
html[data-ouou-home-presentation] .account-menu-membership { margin: 0 12px; padding-inline: 10px; border-radius: 10px; border-bottom: 0; background: #faf5ec; }
html[data-ouou-home-presentation] .account-menu-balance { padding: 18px; }
html[data-ouou-home-presentation] .account-menu-balance-head strong { font-size: 28px; line-height: 34px; }
html[data-ouou-home-presentation] .account-menu-links { padding-block: 6px; }
html[data-ouou-home-presentation] .account-menu-links button { padding-inline: 18px; }
html[data-ouou-home-presentation] .account-menu-status { margin-inline: 18px; }

html[data-ouou-home-presentation] .workspace .content { padding: 20px 20px 88px; background: #fff; }
.ouou-home-hero { display: grid; grid-template-columns: 1.75fr repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.ouou-hero-card { position: relative; min-width: 0; height: clamp(148px, 10.1vw, 174px); isolation: isolate; overflow: hidden; border: 1px solid #272a32; border-radius: 8px; color: #fff; background: #191b22; }
.ouou-hero-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.ouou-hero-media { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% center; transition: transform .3s ease; }
.ouou-hero-card::after { position: absolute; z-index: -1; inset: 0; pointer-events: none; content: ''; background: linear-gradient(90deg, #111217f5 0%, #111217cc 40%, transparent 72%); }
.ouou-hero-discover::after { background: linear-gradient(90deg, #111217f5 0%, #111217cc 40%, transparent 72%); }
.ouou-hero-image::after { background: linear-gradient(90deg, #1b1c21f5 0%, #1b1c21c9 40%, transparent 75%); }
.ouou-hero-story::after { background: linear-gradient(90deg, #181a20f5 0%, #181a20d4 40%, transparent 74%); }
.ouou-hero-tools::after { background: linear-gradient(90deg, #171b20fa 0%, #171b20d9 52%, transparent 82%); }
.ouou-hero-copy { position: relative; z-index: 1; display: flex; height: 100%; flex-direction: column; align-items: flex-start; padding: 20px 22px; }
.ouou-hero-eyebrow { margin-bottom: 6px; color: #bac3d1; font-size: 9px; line-height: 13px; font-weight: 500; letter-spacing: 1px; }
.ouou-hero-copy h2 { margin: 0; font-size: clamp(20px, 1.65vw, 28px); line-height: 1.22; font-weight: 650; letter-spacing: -.5px; }
.ouou-hero-discover h2 { font-size: clamp(26px, 2vw, 34px); }
.ouou-hero-tools h2 { font-size: clamp(19px, 1.45vw, 25px); }
.ouou-hero-copy p { margin: 8px 0 10px; color: #b6bac4; font-size: 12px; line-height: 18px; white-space: nowrap; }
.ouou-hero-action { display: inline-flex; align-items: center; gap: 9px; min-height: 26px; margin-top: auto; padding: 3px 11px; border: 1px solid #ffffff38; border-radius: 16px; color: #f3f5fa; background: #ffffff14; font-size: 11px; line-height: 18px; font-weight: 500; transition: background .16s ease, color .16s ease; }
.ouou-hero-discover .ouou-hero-action { border-color: #ffffff25; color: #fff; background: #315fff; }
.ouou-hero-action svg { width: 14px; height: 14px; }
.ouou-hero-copy nav.ouou-hero-tool-links { display: flex; gap: 5px; width: 100%; margin-top: auto; }
.ouou-hero-tool-links a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 26px; flex: 1 1 0; padding: 3px 2px; border: 1px solid #ffffff35; border-radius: 5px; color: #e0e4eb; background: #ffffff13; font-size: 10px; line-height: 18px; text-decoration: none; white-space: nowrap; }
.ouou-hero-link:focus-visible { outline: 3px solid #8daef3; outline-offset: -4px; border-radius: inherit; }
.ouou-hero-tool-links a:focus-visible { outline: 2px solid #8daef3; outline-offset: 2px; }

@media (hover: hover) {
  .ouou-hero-card:has(.ouou-hero-link:hover) .ouou-hero-media { transform: scale(1.04); }
  .ouou-hero-link:hover .ouou-hero-action { color: #276ef1; background: #fff; }
  .ouou-hero-discover .ouou-hero-link:hover .ouou-hero-action { color: #fff; background: #185fdf; }
  .ouou-hero-tool-links a:hover { color: #276ef1; background: #fff; }
}

@media (min-width: 721px) {
  html[data-ouou-home-presentation] .workspace { grid-template-rows: 66px minmax(0, 1fr); }
}

@media (min-width: 721px) and (max-width: 1179px) {
  html[data-ouou-home-presentation] .topbar { gap: 12px; padding-inline: 16px; }
  html[data-ouou-home-presentation] .top-actions { gap: 6px; }
  html[data-ouou-home-presentation] .top-action { padding-inline: 10px; }
  .ouou-home-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ouou-hero-card { height: 174px; }
}

@media (min-width: 721px) and (max-width: 959px) {
  html[data-ouou-home-presentation] .top-action.gift,
  html[data-ouou-home-presentation] .top-action.supply { display: none; }
  html[data-ouou-home-presentation] .search { min-width: 100px; }
}

@media (min-width: 721px) and (max-width: 1179px) {
  html[data-ouou-home-presentation] body:has(#accountMenuTrigger:not([data-account-state="authenticated"])) .benefit-group { display: none; }
}

@media (max-width: 720px) {
  html[data-ouou-home-presentation] .topbar { gap: 8px; padding-inline: 12px; }
  html[data-ouou-home-presentation] .top-actions { gap: 6px; }
  html[data-ouou-home-presentation] .top-action.gift,
  html[data-ouou-home-presentation] .top-action.supply { display: none; }
  html[data-ouou-home-presentation] .benefit-part { padding-inline: 8px; }
  html[data-ouou-home-presentation] .member-part > span { max-width: 110px; }
  html[data-ouou-home-presentation] .search { width: 100%; min-width: 0; max-width: none; height: 38px; }
  html[data-ouou-home-presentation] .workspace .content { padding: 14px 12px 76px; }
  .ouou-home-hero { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82vw, 310px); gap: 10px; margin-right: -12px; padding-right: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ouou-home-hero::-webkit-scrollbar { display: none; }
  .ouou-hero-card { height: 172px; scroll-snap-align: start; }
  .ouou-hero-copy { padding: 20px; }
  .ouou-hero-copy h2 { font-size: 25px; }
  .ouou-hero-discover h2 { font-size: 28px; }
  .ouou-hero-copy p { font-size: 12px; }
}

@media (max-width: 360px) {
  html[data-ouou-home-presentation] .topbar { gap: 6px; padding-inline: 10px; }
  html[data-ouou-home-presentation] .top-actions { gap: 5px; }
  html[data-ouou-home-presentation] .member-part > span { max-width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .ouou-hero-media,
  .ouou-hero-action,
  html[data-ouou-home-presentation] .top-actions button { transition: none; }
}