:root {
  --mobile-controls-height: 6.9rem;
  --controls-offset: var(--mobile-controls-height);
  --app-height: 100svh;
  --mobile-bottom-spacing: max(0.75rem, env(safe-area-inset-bottom));
  --mobile-canvas-height: calc(var(--app-height) - var(--controls-offset) - var(--mobile-bottom-spacing));
  --bg-gradient:
    radial-gradient(circle at top left, rgba(244, 185, 104, 0.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(212, 106, 122, 0.14), transparent 34%),
    linear-gradient(135deg, #100d12 0%, #17111a 44%, #091018 100%);
  --panel: rgba(22, 17, 23, 0.84);
  --panel-border: rgba(255, 229, 201, 0.12);
  --text: #f6eee4;
  --muted: #c3af9d;
  --accent: #f4b968;
  --accent-strong: #ffd8a6;
  --input-bg: rgba(15, 20, 29, 0.78);
  --input-border: rgba(255, 229, 201, 0.16);
  --canvas-bg: #100c11;
  --meta-bg: rgba(255, 255, 255, 0.05);
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.36);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: var(--app-height);
  overflow-x: hidden;
  overflow-y: auto;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  color: var(--text);
  background: var(--bg-gradient);
}

button,
input,
select,
output {
  font: inherit;
}

button,
select,
[role="button"] {
  cursor: pointer;
}

button:disabled,
button[aria-busy="true"],
select:disabled {
  cursor: not-allowed;
}

button[aria-busy="true"] {
  opacity: 0.65;
}

.shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: min(100%, 120rem);
  min-height: var(--app-height);
  margin: 0 auto;
  padding: 0;
}

.canvas-panel {
  display: flex;
  align-items: stretch;
  min-height: var(--app-height);
  grid-column: 1;
  grid-row: 1;
  padding-bottom: calc(var(--controls-offset) + var(--mobile-bottom-spacing));
}

.canvas-frame {
  position: relative;
  width: 100%;
  height: var(--mobile-canvas-height);
  min-height: var(--mobile-canvas-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 1.8vw, 1.2rem);
}

#artCanvas {
  display: block;
  width: min(100%, calc(var(--mobile-canvas-height) - 2rem));
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  max-height: calc(var(--mobile-canvas-height) - 2rem);
  background: var(--canvas-bg);
  border-radius: 24px;
}

.canvas-watermark {
  position: absolute;
  left: clamp(1rem, 2.8vw, 1.5rem);
  bottom: clamp(1rem, 2.8vw, 1.45rem);
  z-index: 6;
  color: rgba(246, 238, 228, 0.44);
  pointer-events: none;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.canvas-watermark__title {
  font-size: clamp(0.82rem, 2.4vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.canvas-action-button {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.1rem);
  right: calc(clamp(0.75rem, 2vw, 1.1rem) + 3.5rem);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 82%, rgba(255, 255, 255, 0.12));
  color: var(--text);
  box-shadow: 0 14px 30px rgba(20, 14, 8, 0.18);
  backdrop-filter: blur(16px);
  transition:
    transform 140ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    visibility 180ms ease;
}

.canvas-action-button:hover,
.canvas-action-button:focus-visible {
  background: color-mix(in srgb, var(--panel) 92%, rgba(255, 255, 255, 0.18));
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(255, 255, 255, 0.42));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26);
  transform: translateY(-1px);
  outline: none;
}

.canvas-action-button:active {
  transform: translateY(0) scale(0.96);
}

.canvas-action-button__icon,
.canvas-action-button__download-icon,
.canvas-action-button__dice-icon,
.menu-icon {
  position: relative;
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.canvas-action-button__icon::before,
.canvas-action-button__icon::after,
.canvas-action-button__download-icon::before,
.canvas-action-button__download-icon::after,
.canvas-action-button__dice-icon::before,
.canvas-action-button__dice-icon::after,
.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
}

.canvas-action-button__icon::before {
  inset: 0.08rem;
  border: 1.7px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  transform: rotate(28deg);
}

.canvas-action-button__icon::after {
  top: 0.02rem;
  right: 0.02rem;
  width: 0.38rem;
  height: 0.38rem;
  border-top: 1.7px solid currentColor;
  border-right: 1.7px solid currentColor;
  transform: rotate(16deg);
}

.canvas-action-button__download-icon::before {
  top: 0.02rem;
  left: 0.44rem;
  width: 0.16rem;
  height: 0.58rem;
  background: currentColor;
  border-radius: 999px;
}

.canvas-action-button__download-icon::after {
  left: 0.22rem;
  bottom: 0.06rem;
  width: 0.62rem;
  height: 0.38rem;
  border: 1.7px solid currentColor;
  border-top: none;
  border-radius: 0 0 0.25rem 0.25rem;
  box-sizing: border-box;
}

.canvas-action-button__download-icon {
  transform: translateY(0.02rem);
}

.canvas-action-button__download-icon span {
  display: none;
}

.canvas-action-button__dice-icon {
  border: 1.7px solid currentColor;
  border-radius: 0.24rem;
  transform: rotate(12deg);
}

.canvas-action-button__dice-icon::before {
  top: 0.18rem;
  left: 0.18rem;
  width: 0.14rem;
  height: 0.14rem;
  background: currentColor;
  border-radius: 999px;
  box-shadow: 0.44rem 0.18rem 0 currentColor, 0.18rem 0.54rem 0 currentColor, 0.54rem 0.54rem 0 currentColor;
}

.menu-icon::before {
  left: 0.12rem;
  right: 0.12rem;
  top: 0.22rem;
  height: 1.7px;
  background: currentColor;
  border-radius: 999px;
  box-shadow: 0 0.26rem 0 currentColor, 0 0.52rem 0 currentColor;
  transform-origin: center;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    top 180ms ease,
    left 180ms ease,
    right 180ms ease;
}

.menu-icon::after {
  left: 0.12rem;
  right: 0.12rem;
  top: 0.48rem;
  height: 1.7px;
  background: currentColor;
  border-radius: 999px;
  opacity: 0;
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    left 180ms ease,
    right 180ms ease;
}

.close-icon {
  width: 1rem;
  height: 1rem;
  display: block;
  overflow: visible;
}

.close-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.canvas-action-button[aria-expanded="true"] .menu-icon::before,
.controls-toggle[aria-expanded="true"] .menu-icon::before {
  top: 0.48rem;
  left: 0.18rem;
  right: 0.18rem;
  box-shadow: none;
  transform: rotate(45deg);
}

.canvas-action-button[aria-expanded="true"] .menu-icon::after,
.controls-toggle[aria-expanded="true"] .menu-icon::after {
  opacity: 1;
  left: 0.18rem;
  right: 0.18rem;
  transform: rotate(-45deg);
}

.canvas-action-button--menu {
  right: clamp(0.75rem, 2vw, 1.1rem);
}

.canvas-action-button--download {
  right: calc(clamp(0.75rem, 2vw, 1.1rem) + 7rem);
}

.canvas-action-button--randomize {
  right: calc(clamp(0.75rem, 2vw, 1.1rem) + 10.5rem);
}

.canvas-action-button[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(244, 185, 104, 0.28), rgba(104, 171, 244, 0.2));
  border-color: rgba(255, 216, 166, 0.54);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 216, 166, 0.12) inset;
}

.site-logo {
  position: absolute;
  bottom: clamp(0.75rem, 2vw, 1.1rem);
  right: clamp(0.75rem, 2vw, 1.1rem);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  text-decoration: none;
  opacity: 0.85;
  transition:
    transform 140ms ease,
    opacity 180ms ease;
}

.site-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.32));
}

.site-logo:hover,
.site-logo:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}

.site-logo:active {
  transform: translateY(0) scale(0.96);
}

.render-loading {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 10, 16, 0.34);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.render-loading.is-visible {
  opacity: 1;
  visibility: visible;
}

.render-loading__card {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 229, 201, 0.16);
  border-radius: 999px;
  background: rgba(19, 15, 21, 0.82);
  color: var(--text);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.render-loading__spinner {
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: render-loading-spin 0.8s linear infinite;
}

@keyframes render-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.controls-toggle--panel {
  display: none;
}

.controls:not(.is-collapsed) .controls-toggle--panel {
  display: inline-flex;
}

.controls:not(.is-collapsed) + .canvas-panel .canvas-watermark {
  opacity: 0;
  visibility: hidden;
}

.controls {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: var(--mobile-bottom-spacing);
  z-index: 5;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  max-height: min(calc(var(--app-height) - 1.5rem), 44rem);
  overflow: hidden;
  transition:
    opacity 190ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 190ms ease,
    padding 220ms cubic-bezier(0.22, 1, 0.36, 1),
    max-height 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease,
    background 180ms ease;
}

.controls.is-collapsed {
  gap: 0;
  padding: 0;
  max-height: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.85rem) scale(0.985);
  pointer-events: none;
}

.controls.is-collapsed + .canvas-panel {
  padding-bottom: 0;
}

.controls.is-collapsed + .canvas-panel .canvas-frame {
  height: var(--app-height);
  min-height: var(--app-height);
}

.controls.is-collapsed + .canvas-panel #artCanvas {
  width: min(100%, calc(var(--app-height) - 2rem));
  max-height: calc(var(--app-height) - 2rem);
}

.controls__intro,
.controls__body {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.controls.is-collapsed .controls__intro,
.controls.is-collapsed .controls__body {
  opacity: 0;
  transform: translateY(0.5rem);
}

.controls__body {
  display: grid;
  gap: 0.8rem;
  min-height: 0;
  overflow: auto;
  max-height: min(65dvh, 38rem);
  padding-top: 0.1rem;
}

.controls__header,
.controls__header h1,
.controls__header p {
  margin: 0;
}

.controls__header {
  display: grid;
  gap: 0.35rem;
}

.controls__header-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.controls__header-top > div:first-child {
  min-width: 0;
}

.controls__header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}

.language-switcher__button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.72rem;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.language-switcher__button:hover,
.language-switcher__button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.language-switcher__button.is-active {
  background: linear-gradient(135deg, rgba(244, 185, 104, 0.22), rgba(212, 106, 122, 0.2));
  color: var(--accent-strong);
}

.controls-header-button,
.controls-toggle {
  position: static;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
}

.controls-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}

.controls-toggle:hover,
.controls-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(255, 255, 255, 0.42));
  outline: none;
}

.controls-header-button--generate {
  background: linear-gradient(135deg, rgba(244, 185, 104, 0.22), rgba(212, 106, 122, 0.2));
  border-color: rgba(244, 185, 104, 0.3);
}

.controls__copy {
  margin-top: 0.2rem;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.94rem;
}

.eyebrow {
  margin: 0 0 0.28rem;
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.controls__header h1 {
  font-size: clamp(1.45rem, 4vw, 1.9rem);
  line-height: 0.95;
}

.controls__fields {
  display: grid;
  gap: 0.75rem;
}

.field {
  display: grid;
  gap: 0.42rem;
  padding: 0.78rem 0.82rem;
  border-radius: 16px;
  background: var(--meta-bg);
}

.field span {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.field select,
.field input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 0.72rem 0.82rem;
  border: 1px solid var(--input-border);
  border-radius: 14px;
  background: var(--input-bg);
  color: var(--text);
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) calc(50% - 0.16rem),
    calc(100% - 0.95rem) calc(50% - 0.16rem);
  background-size: 0.42rem 0.42rem, 0.42rem 0.42rem;
  background-repeat: no-repeat;
}

.field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.field output {
  color: var(--accent-strong);
  font-size: 0.92rem;
}

.meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 0;
}

.meta div {
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 16px;
  background: var(--meta-bg);
}

.meta dt,
.meta dd {
  margin: 0;
}

.meta dt {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.meta dd {
  margin-top: 0.25rem;
  line-height: 1.35;
  font-size: 0.94rem;
}

@media (min-width: 640px) {
  .controls__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .shell {
    width: 100%;
    max-width: none;
  }

  .controls {
    top: 1rem;
    left: 1rem;
    right: auto;
    bottom: auto;
    width: min(24rem, calc(100vw - 2rem));
    z-index: 8;
    max-height: calc(var(--app-height) - 2rem);
  }

  .controls__body {
    max-height: none;
  }

  .controls__fields {
    grid-template-columns: 1fr;
  }

  .canvas-panel {
    min-height: var(--app-height);
    padding-bottom: 0;
    padding-left: calc(min(24rem, calc(100vw - 2rem)) + 2rem);
    transition: padding-left 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .controls.is-collapsed + .canvas-panel {
    padding-left: 0;
  }

  .canvas-frame {
    height: var(--app-height);
    min-height: var(--app-height);
    padding: 1rem;
  }

  #artCanvas {
    width: min(calc(100vw - min(24rem, calc(100vw - 2rem)) - 4rem), calc(var(--app-height) - 2rem));
    height: auto;
    max-width: calc(var(--app-height) - 2rem);
    max-height: calc(var(--app-height) - 2rem);
  }
}

@media (min-width: 1280px) {
  .controls__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  :root {
    --mobile-controls-height: 7.4rem;
  }

  .controls {
    left: 0.65rem;
    right: 0.65rem;
    border-radius: 18px;
  }

  .eyebrow {
    display: none;
  }
}