@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBM Plex Sans Var-Roman.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBM Plex Sans Var-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
}

:root {
  --spring-easing: linear(0, 0.0016 0.34%, 0.0084 0.79%, 0.0369, 0.0824 2.6%, 0.1504 3.62%, 0.302 5.43%, 0.7838 10.52%, 0.9039, 1.0063, 1.0889, 1.1509 16.39%, 1.1727 17.07%, 1.193 17.86%, 1.206 18.54%, 1.2166 19.33%, 1.2229 20.24%, 1.2234, 1.2178, 1.2072, 1.1924 24.31%, 1.1702 25.55%, 1.0554 30.98%, 1.0072 33.69%, 0.9855 35.28%, 0.9701 36.75%, 0.9587, 0.9521 39.91%, 0.9499 41.95%, 0.9536 44.1%, 0.9618 46.36%, 0.987 51.67%, 0.9976 54.27%, 1.006 57.21%, 1.0104 60.26%, 1.0104 64.9%, 1.0007 74.85%, 0.9978 80.28%, 1.0004 99.95%);
  --spring-duration: 1.33s;

  --bg: #f6f6f6;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #444444;
  --accent: #ffea00;
  --ink-surface: #111111;
  --ink-bg: #111111;
  --ink-accent: #111111;
  --ink-controls: #111111;
  --title-ink: #111111;
  --hint-ink: #111111;
  --ink-surface-rgb: 17 17 17;
  --ink-controls-rgb: 17 17 17;

  --outline: #000000;
  --panel-shadow: 8px 8px 0 var(--outline);
  --button-shadow: 4px 4px 0 var(--outline);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--ink-bg);
  background: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, rgb(0 0 0 / 0.15) 1px, transparent 0);
  background-size: 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.noscriptNotice {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: min(92vw, 620px);
  padding: 10px 14px;
  border: 3px solid var(--outline);
  box-shadow: var(--panel-shadow);
  background: var(--accent);
  color: var(--ink-accent);
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app {
  max-width: 1160px;
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 14px;
  display: grid;
  gap: 14px;
}

.topbar,
.panel,
.swatch {
  border: 3px solid var(--outline);
  box-shadow: var(--panel-shadow);
  background: var(--surface);
  color: var(--ink-surface);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  animation: panel-in 0.65s var(--spring-easing) both;
}

.topbar h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2.3vw, 1.85rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--outline);
  -webkit-text-stroke: 1px var(--outline);
}

.aboutLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 8px 12px;
  border: 2px solid var(--outline);
  background: var(--accent);
  box-shadow: var(--button-shadow);
  color: var(--ink-accent);
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.aboutLink:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--outline);
}

.aboutLink:focus-visible,
.primary:focus-visible,
.pinActions button:focus-visible,
.statusRefresh:focus-visible,
.pickerSourceBtn:focus-visible,
.pickerClose:focus-visible,
.pickerClear:focus-visible,
.copyHexBtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--outline);
}

.controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.panel {
  padding: 12px;
  position: relative;
  animation: panel-in 0.7s var(--spring-easing) both;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  /* font-style: italic; */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--title-ink);
}

.subTitle {
  margin-top: 30px;
  padding-top: 4px;
  margin-bottom: 12px;
}

.radioGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#modeGroup {
  margin-bottom: 10px;
}

.radioGrid label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  border: 2px solid var(--outline);
  box-shadow: 3px 3px 0 var(--outline);
  background: var(--bg);
  color: var(--ink-controls);
  padding: 5px 7px;
  cursor: pointer;
  user-select: none;
}

.radioGrid input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--outline);
  background: var(--bg);
  margin: 0;
  display: inline-block;
}

.radioGrid input[type="radio"]:checked {
  background: var(--ink-accent);
}

.radioGrid input[type="radio"]:focus-visible {
  outline: none;
}

.radioGrid label:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.radioGrid label:has(input[type="radio"]:checked) {
  background: var(--accent);
  color: var(--ink-accent);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--outline);
}

.themeGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}

.generationPanel {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  text-align: left;
}

.generationStack {
  width: min(100%, 320px);
  margin-inline: auto;
  align-self: center;
  display: grid;
  grid-template-rows: auto minmax(1.2rem, auto);
  gap: 14px;
  align-items: center;
}

.attemptRow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 1.2rem;
}

.generationPanel .primary {
  width: 100%;
  min-width: 0;
}

.temperatureBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 2px solid var(--outline);
  box-shadow: 3px 3px 0 var(--outline);
  background: var(--surface);
  color: var(--ink-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.temperatureBtn:hover {
  opacity: 1;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}

.temperatureBtn:focus-visible {
  outline: none;
  opacity: 1;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}

.primary,
.pinActions button {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 800;
  border: 2px solid var(--outline);
  background: var(--accent);
  color: var(--ink-accent);
  box-shadow: var(--button-shadow);
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.primary {
  margin-top: 10px;
  width: 100%;
  padding: 10px 12px;
}

.primary:hover,
.pinActions button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--outline);
}

.primary:active,
.pinActions button:active {
  transform: translate(0, 0) scale(0.96);
  box-shadow: 2px 2px 0 var(--outline);
}

.primary:disabled {
  opacity: 0.6;
  cursor: wait;
}

.primary.isBusy {
  opacity: 0.9;
}
.hint {
  margin: 0 0 8px 0;
}

.attemptInfo,
.hint {
  font-size: 0.83rem;
  color: var(--hint-ink);
  /*opacity: 0.0;*/
}


.generationStack .attemptInfo {
  margin: 0;
  line-height: 1.15;
  min-height: 1.2rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.generationStack .attemptInfo:hover {
  opacity: 0.3;
}

.generationStack .primary.isBusy + .attemptRow .attemptInfo {
  opacity: 1;
}

.attemptInfo.error {
  font-weight: 700;
  opacity: 1;
}

.statusRefresh {
  border: 2px solid var(--outline);
  box-shadow: 3px 3px 0 var(--outline);
  background: var(--surface);
  color: var(--ink-surface);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 800;
  font-size: 0.68rem;
  text-transform: uppercase;
  padding: 3px 7px;
  cursor: pointer;
}

.statusRefresh:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}

.lockPanel {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: stretch;
  align-content: start;
  text-align: left;
}

.lockGrid {
  display: grid;
  gap: 10px;
  width: min(100%, 440px);
  margin-inline: auto;
  align-self: center;
}

.lockInput label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-align: left;
}

.lockRow {
  display: flex;
  gap: 8px;
}

.lockRow input {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 2px solid var(--outline);
  background: var(--bg);
  color: var(--ink-controls);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  box-shadow: 3px 3px 0 var(--outline);
}

.lockRow input::placeholder {
  color: rgb(var(--ink-controls-rgb) / 0.56);
}

.lockRow input:focus {
  outline: none;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}

.preview {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  flex: 0 0 auto;
  border: 2px solid var(--outline);
  box-shadow: 3px 3px 0 var(--outline);
  background: var(--bg);
  color: var(--ink-controls);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  cursor: pointer;
}

.preview.isPickerIcon {
  background: #101319 url("./favicon.svg") center / 22px 22px no-repeat;
}

.preview:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}

.preview.hasColor {
  font-size: 0;
}

.preview.isLoading {
  opacity: 0.7;
  cursor: progress;
}

.preview:focus-visible {
  outline: none;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}

.pickerDialog {
  border: 3px solid var(--outline);
  box-shadow: var(--panel-shadow);
  background: var(--surface);
  color: var(--ink-surface);
  margin: 0;
  padding: 0;
  width: fit-content;
  min-width: 236px;
  max-width: calc(100vw - 20px);
  max-height: min(86vh, 620px);
  position: fixed;
}

/*.pickerDialog::backdrop {
  backdrop-filter: blur(12px);
}*/

.pickerShell {
  padding: 0;
  display: grid;
  gap: 0;
}

.temperatureDialog {
  min-width: 260px;
  width: min(92vw, 320px);
}

.temperatureDialog[open] {
  display: block;
}

.temperatureShell {
  gap: 0;
}

.temperatureBody {
  padding: 10px;
  display: grid;
  gap: 8px;
}

.temperatureBody h3 {
  margin: 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--title-ink);
}

.temperatureHint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--hint-ink);
}

.temperatureOptions {
  display: grid;
  gap: 6px;
}

.temperatureOptions label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  border: 2px solid var(--outline);
  box-shadow: 3px 3px 0 var(--outline);
  background: var(--bg);
  color: var(--ink-controls);
  padding: 5px 7px;
  cursor: pointer;
  user-select: none;
}

.temperatureOptions input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--outline);
  background: var(--bg);
  margin: 0;
  display: inline-block;
}

.temperatureOptions input[type="radio"]:checked {
  background: var(--ink-accent);
}

.temperatureOptions input[type="radio"]:focus-visible {
  outline: none;
}

.temperatureOptions label:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.temperatureOptions label:has(input[type="radio"]:checked) {
  background: var(--accent);
  color: var(--ink-accent);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}

.pickerClose,
.pickerClear {
  border: 2px solid var(--outline);
  box-shadow: 3px 3px 0 var(--outline);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  padding: 5px 7px;
  cursor: pointer;
}

.pickerSourceBtn {
  border: 2px solid var(--outline);
  box-shadow: 3px 3px 0 var(--outline);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 900;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 6px;
  min-width: 34px;
  cursor: pointer;
  background: var(--bg);
  color: var(--ink-controls);
}

.pickerSourceBtn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}

.pickerSourceBtn.isActive {
  background: var(--accent);
  color: var(--ink-accent);
}

.pickerClose {
  background: var(--surface);
  color: var(--ink-surface);
}

.pickerClear {
  background: var(--accent);
  color: var(--ink-accent);
}

.pickerClose:hover,
.pickerClear:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}

.pickerClear:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pickerActions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-top: 2px solid var(--outline);
}

.pickerSources {
  display: flex;
  gap: 4px;
  margin-right: auto;
}

.pickerClear,
.pickerClose {
  min-width: 84px;
}

.pickerGrid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: start;
  position: relative;
  gap: 0;
  max-height: min(72vh, 560px);
  overflow-y: auto;
  overflow-x: auto;
  padding: 0;
  margin: 0;
}

.pickerCategoryCol {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.pickerLoading {
  margin: 0;
  font-size: 0.83rem;
  color: var(--hint-ink);
}

.pickerSwatch {
  width: 24px;
  height: 24px;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}

.pickerSwatch:hover,
.pickerSwatch:focus-visible {
  transform: none;
  outline: 2px solid var(--outline);
  outline-offset: -2px;
  z-index: 1;
}

.pickerSwatchPinned {
  position: absolute;
  right: 0;
  width: 72px;
  height: 48px;
}

.pickerSwatchPinnedWhite {
  bottom: 48px;
}

.pickerSwatchPinnedBlack {
  bottom: 0;
}

.lockInput small {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--hint-ink);
  min-height: 1.25em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.lockInput small.error {
  color: var(--ink-surface);
}

.palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.swatch {
  overflow: hidden;
  animation: pop-in 0.55s var(--spring-easing) both;
}

.swatchColor {
  height: 150px;
  border-bottom: 3px solid var(--outline);
}

.swatchMeta {
  padding: 10px;
  display: grid;
  gap: 8px;
}

.swatchMeta strong {
  font-size: 0.94rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hexRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}

.hexInput {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--outline);
  box-shadow: 3px 3px 0 var(--outline);
  background: var(--bg);
  color: var(--ink-controls);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 7px 8px;
}

.hexInput::placeholder {
  color: rgb(var(--ink-controls-rgb) / 0.56);
}

.hexInput:focus {
  outline: none;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}

.copyHexBtn {
  min-width: 52px;
  border: 2px solid var(--outline);
  box-shadow: 3px 3px 0 var(--outline);
  background: var(--surface);
  color: var(--ink-surface);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  padding: 7px 8px;
  cursor: pointer;
}

.copyHexBtn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}

.aboutText {
  margin: 0 0 12px;
  color: var(--ink-surface);
  opacity: 1;
  line-height: 1.45;
}

.pinActions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.pinActions button {
  flex: 1;
  font-size: 0.74rem;
  padding: 7px 6px;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 980px) {
  .controls {
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 560px) {
  :root {
    --mobile-gap: 12px;
  }

  html,
  body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    min-height: 100dvh;
    align-items: stretch;
    justify-content: flex-start;
  }

  .app {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: auto;
    padding: var(--mobile-gap);
    gap: var(--mobile-gap);
    grid-template-rows: none;
  }

  .topbar {
    padding: 8px 10px;
    gap: 8px;
  }

  .topbar h1 {
    font-size: clamp(0.98rem, 5vw, 1.15rem);
    letter-spacing: 0.02em;
    -webkit-text-stroke: 0.8px var(--outline);
  }

  .aboutLink {
    min-width: 74px;
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  .controls {
    order: 3;
    min-height: auto;
    overflow: visible;
    align-content: normal;
    gap: var(--mobile-gap);
    padding-right: 0;
    padding-bottom: 0;
    overscroll-behavior: auto;
  }

  .generationPanel {
    order: 1;
  }

  .modePanel {
    order: 2;
  }

  .lockPanel {
    order: 3;
  }

  .panel {
    padding: 9px;
  }

  .panel h2 {
    font-size: 0.8rem;
    margin-bottom: 8px;
  }

  .subTitle {
    margin-top: 14px;
    margin-bottom: 8px;
  }

  .radioGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .radioGrid label {
    gap: 5px;
    font-size: 0.72rem;
    padding: 4px 6px;
  }

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

  .primary {
    margin-top: 4px;
    padding: 8px 10px;
    font-size: 0.78rem;
  }

  .attemptInfo,
  .hint {
    font-size: 0.72rem;
  }

  .lockGrid {
    width: 100%;
    gap: 8px;
  }

  .lockInput label {
    font-size: 0.74rem;
    margin-bottom: 4px;
  }

  .lockRow {
    gap: 6px;
  }

  .lockRow input {
    padding: 6px;
    font-size: 0.76rem;
  }

  .preview {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  .lockInput small {
    margin-top: 4px;
    font-size: 0.7rem;
  }

  .palette {
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mobile-gap);
    min-height: auto;
    overflow: visible;
    align-content: normal;
    padding-right: 0;
    padding-bottom: 0;
    overscroll-behavior: auto;
  }

  .swatchColor {
    height: 92px;
  }

  .swatchMeta {
    padding: 7px;
    gap: 6px;
  }

  .swatchMeta strong {
    font-size: 0.74rem;
  }

  .hexRow {
    gap: 4px;
  }

  .hexInput {
    font-size: 0.72rem;
    padding: 5px 6px;
  }

  .copyHexBtn {
    min-width: 46px;
    font-size: 0.62rem;
    padding: 5px 6px;
  }

  .pinActions button {
    font-size: 0.62rem;
    padding: 5px 4px;
  }

  .pinActions {
    margin-top: 2px;
    gap: 5px;
  }

  .pickerDialog {
    width: min(96vw, 420px);
    max-height: 84dvh;
  }

  .pickerGrid {
    max-height: min(66dvh, 460px);
  }
}

#btnGenerate {
  font-size: 1rem;
}