.backdrop-page {
  min-height: 100svh;
  color: #faf5f0;
  background: #1c1b21 var(--backdrop) var(--backdrop-position) center / cover no-repeat;
}

.web-page {
  --backdrop: url("/assets/web-background.webp");
  --backdrop-position: 76%;
  --masthead-tint: linear-gradient(105deg, rgb(21 29 28 / 88%), rgb(65 24 27 / 84%));
  --nav-accent: #ffc9b4;
  --nav-line: rgb(255 175 155 / 32%);
  --nav-highlight: rgb(237 114 88 / 21%);
  --nav-button: #382625;
  background-image: linear-gradient(155deg, rgb(237 228 226 / 10%), rgb(178 160 165 / 13%)), var(--backdrop);
}

.toys-page {
  --backdrop: url("/assets/toys-background.webp");
  --backdrop-position: 53%;
  --masthead-tint: linear-gradient(105deg, rgb(24 31 52 / 88%), rgb(47 42 66 / 84%));
  --nav-accent: #e0daff;
  --nav-line: rgb(193 190 255 / 35%);
  --nav-highlight: rgb(150 146 234 / 22%);
  --nav-button: #292a43;
}

.backdrop-page .header-wrap { background: transparent; backdrop-filter: none; }
.backdrop-page .header-row {
  --reader-glass: var(--masthead-tint);
}
.backdrop-page .brand small { color: var(--nav-accent); }
.backdrop-page .brand-mark { background: var(--nav-button); color: var(--nav-accent); }
.backdrop-page .brand-mark { border-color: var(--nav-line); }
.backdrop-page .nav-item:is(.current, :hover) {
  border-color: var(--nav-line);
  background: var(--nav-highlight);
  color: var(--nav-accent);
}

.toys-page {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background-image: linear-gradient(180deg, rgb(12 14 24 / 39%), rgb(12 14 24 / 70%)), var(--backdrop);
}
.toy-stardust { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.toy-stardust span {
  position: absolute;
  inset: var(--star-y) auto auto var(--star-x);
  width: var(--star-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e1deff;
  box-shadow: 0 0 7px #c7beffb3;
  animation: toy-starlight var(--star-duration) var(--star-delay) ease-in-out infinite;
}
.toy-stardust .toy-star-sparkle {
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 4px #bdb1ff);
}
.toy-stardust .toy-star-sparkle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f1eaff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
@keyframes toy-starlight {
  0% { opacity: 0; transform: translateY(12px) scale(.72); }
  42% { opacity: .82; transform: translate(calc(var(--star-drift) * -.35), calc(var(--star-rise) * -.25)) scale(1.05); }
  72% { opacity: .32; transform: translate(calc(var(--star-drift) * .65), calc(var(--star-rise) * -.56)) scale(.91); }
  100% { opacity: 0; transform: translate(var(--star-drift), calc(-1 * var(--star-rise))) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .toy-stardust { display: none; } }
.toys-page .header-wrap { position: relative; }
.toy-studio {
  display: grid;
  flex: 1;
  align-content: center;
  gap: clamp(22px, 4vw, 36px);
  width: min(760px, calc(100% - 40px));
  margin-inline: auto;
  padding-block: clamp(30px, 7svh, 78px);
  padding-block-end: calc(clamp(30px, 7svh, 78px) + clamp(0px, 100svh - 600px, 126px));
}
.toy-studio-heading { text-align: center; text-shadow: 0 2px 22px #101425; }
.toy-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #e0daff; font-size: 12px; letter-spacing: .14em; }
.toy-studio-heading h1 { margin: 10px 0 6px; font: 750 clamp(40px, 8vw, 76px)/1.14 var(--serif); }
.toy-studio-heading h1 span { color: #f0c9dd; }
.toy-form {
  padding: clamp(15px, 2.5vw, 19px);
  padding-block-end: 8px;
  border: 1px solid rgb(240 237 255 / 26%);
  border-radius: 23px;
  background: linear-gradient(135deg, rgb(35 34 51 / 83%), rgb(73 84 85 / 70%));
  box-shadow: 0 22px 64px rgb(10 12 24 / 49%);
  backdrop-filter: blur(14px);
  color-scheme: dark;
}
.toy-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.toy-form label { display: block; margin-bottom: 5px; color: #ddd9e5; font-size: 12px; }
.toy-form :is(textarea, select) {
  width: 100%;
  min-width: 0;
  color: #faf5f0;
  font: inherit;
}
.toy-form textarea {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 16px;
  line-height: 1.6;
  resize: none;
}
.toy-form textarea::placeholder { color: #ded9e5; }
.toy-form select, .toy-model-trigger {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid rgb(240 237 255 / 29%);
  border-radius: 12px;
  background: rgb(240 237 255 / 14%);
}
.toy-form select option { background: #303044; }
.toy-form textarea:focus { outline: none; }
.toy-form:has(textarea:focus-visible) { border-color: #9a88c0; }
.toy-form select:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }
.toy-form-controls { display: grid; grid-template-columns: minmax(0, 220px) minmax(72px, 112px) 1fr auto auto; align-items: end; gap: 8px; margin-top: 13px; }
.toy-model-picker { position: relative; min-width: 0; }
.toy-model-trigger {
  display: flex;
  width: min(100%, 220px);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.toy-model-trigger:disabled { cursor: default; }
#toy-model-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toy-model-chevron {
  width: 7px;
  height: 7px;
  flex: none;
  margin: 0 3px 3px 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
.toy-model-trigger[aria-expanded="true"] .toy-model-chevron { transform: translateY(3px) rotate(225deg); }
.toy-model-options {
  position: absolute;
  z-index: 2;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  width: min(300px, calc(100vw - 84px));
  max-height: min(330px, 48svh);
  overflow: auto;
  border: 1px solid rgb(240 237 255 / 28%);
  border-radius: 12px;
  background: #222a39;
  box-shadow: 0 16px 30px #111322a6;
}
.toy-model-option {
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 10px 13px;
  border: 0;
  background: transparent;
  color: #faf5f0;
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
}
.toy-model-option + .toy-model-option { border-top: 1px solid #ffffff12; }
.toy-model-option[aria-selected="true"] { background: #343f52; }
.toy-model-option:is(:hover, :focus-visible) { background: #3e4c61; }
.toy-model-option:focus-visible { outline-offset: -2px; }
.toy-model-option span { color: #c1cad9; font-size: 12px; }
.toy-model-option code { color: #a4b3cb; font-size: 11px; overflow-wrap: anywhere; }
.toy-history-button { grid-column: -3 / -2; }
.toy-generate { grid-column: -2 / -1; }
.toy-generate, .toy-history-button {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid rgb(224 218 255 / 42%);
  border-radius: 11px;
  background: linear-gradient(120deg, rgb(76 77 127 / 94%), rgb(94 62 97 / 90%));
  color: #fff3fa;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.toy-history-button[hidden] { display: none; }
:is(.toy-generate, .toy-history-button):hover:enabled { background: linear-gradient(120deg, #6566a0, #80557f); }
.toy-generate:disabled { opacity: .6; cursor: default; }
.toy-size-note, .toy-status { color: #dcd3ec; font-size: 13px; }
.toy-size-note:has(> :not(:empty, [hidden])) { margin-top: 12px; }
.toy-status:not(:empty) { margin-top: 12px; }
.toy-status.error { color: #ffbdc1; }
:is(.toy-history-header, .toy-history-actions) button {
  padding: 6px 10px;
  border: 1px solid rgb(224 218 255 / 30%);
  border-radius: 9px;
  background: rgb(34 30 51 / 82%);
  color: #f6edf9;
  font: inherit;
  cursor: pointer;
}
:is(.toy-history-header, .toy-history-actions) button:hover:enabled { background: #514665; }
.toy-history {
  width: min(690px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: clamp(14px, 3vw, 24px);
  overflow: auto;
  border: 1px solid rgb(240 237 255 / 29%);
  border-radius: 22px;
  background: linear-gradient(135deg, rgb(35 34 51 / 94%), rgb(62 72 75 / 87%));
  box-shadow: 0 24px 70px rgb(10 12 24 / 65%);
  backdrop-filter: blur(16px);
  color: #faf5f0;
  color-scheme: dark;
}
.toy-history::backdrop { background: rgb(12 14 24 / 57%); }
.toy-history-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.toy-history-header h2 { margin: 0; font: 750 24px/1.2 var(--serif); }
.toy-history-header p { margin-top: 6px; color: #dcd3ec; font-size: 13px; }
.toy-history-header button { min-width: 38px; min-height: 38px; font-size: 20px; line-height: 1; }
.toy-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 14px);
  padding: 0;
  list-style: none;
}
.toy-history-grid:not(:empty) { margin-top: 16px; }
.toy-history-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 114px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgb(240 237 255 / 24%);
  border-radius: 13px;
  background: rgb(21 21 34 / 66%);
}
.toy-history-preview-button {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}
.toy-history-preview-button:focus-visible { outline-offset: -3px; }
.toy-history-card img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.toy-history-actions {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  background: linear-gradient(transparent, rgb(17 14 26 / 84%));
  pointer-events: none;
}
.toy-history-actions button { min-height: 36px; font-size: 13px; pointer-events: auto; }
.toy-history-actions button:last-child { color: #ffd1d6; }
.toy-history button:disabled { opacity: .65; cursor: wait; }
.toy-image-preview { width: min(1100px, calc(100% - 28px)); padding: 12px; }
.toy-image-preview .toy-history-header { align-items: center; margin-bottom: 8px; }
.toy-image-preview .toy-history-header h2 { font-size: 16px; }
.toy-image-preview-content { background: #141620; border-radius: 12px; }
.toy-image-preview-content img {
  display: block;
  width: 100%;
  height: min(780px, calc(100dvh - 100px));
  object-fit: contain;
}
@media (hover: hover) and (pointer: fine) {
  .toy-history-card:not(:hover, :focus-within) .toy-history-actions { opacity: 0; }
}
@media (max-width: 560px) {
  .toy-form-controls { grid-template-columns: minmax(0, 1fr) clamp(52px, 16vw, 72px) auto auto; gap: 6px; }
  .toy-form-controls :is(select, .toy-model-trigger) { padding-inline: 6px; }
  .toy-model-trigger { gap: 4px; }
  .toy-generate, .toy-history-button { width: clamp(60px, 17vw, 84px); padding-inline: 3px; }
}