:root {
  --ink: #11100f;
  --paper: #fffefb;
  --ground: #f1ece2;
  --muted: #6e685f;
  --rule: #c9c0b3;
  --accent: #ff4f8b;
  --shadow: 7px 7px 0 var(--ink);
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  min-width: 300px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 79, 139, .12), transparent 22rem),
    radial-gradient(circle at 90% 80%, rgba(0, 180, 170, .1), transparent 26rem),
    var(--ground);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

button, input { font: inherit; }
button { color: inherit; }

.site-header {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 22px clamp(14px, 3vw, 38px) 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 18px;
  border-bottom: 3px solid var(--ink);
}

.site-header > div { min-width: 0; text-align: center; }
.site-header .button { justify-self: end; }

.home-link,
.text-button {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.home-link { align-self: center; width: max-content; }

.kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .18em;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: .82;
  letter-spacing: -.075em;
}

h2 { margin: 0; font-size: .82rem; letter-spacing: .12em; }

.app-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 38px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  align-items: start;
  gap: clamp(20px, 3vw, 46px);
}

.canvas-panel { min-width: 0; }

.canvas-bar {
  max-width: 830px;
  margin: 0 auto 11px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
}

.canvas-bar div { display: grid; gap: 3px; }
.canvas-label { color: var(--muted); font-size: .63rem; letter-spacing: .16em; }
#patternName { font-size: .95rem; letter-spacing: .06em; }

.text-button {
  border: 0;
  padding: 8px 0;
  background: none;
  cursor: pointer;
  font-size: .72rem;
}

.canvas-wrap {
  position: relative;
  width: min(100%, 830px);
  margin: 0 auto;
  border: 4px solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow);
  touch-action: manipulation;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  cursor: crosshair;
}

.canvas-wrap:focus-within { outline: 4px solid var(--accent); outline-offset: 5px; }

.canvas-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 254, 251, .84);
  font-size: clamp(1.2rem, 4vw, 2rem);
  letter-spacing: .08em;
}

.canvas-loader[hidden] { display: none; }

.hint {
  margin: 16px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: .67rem;
  letter-spacing: .14em;
}

.tools {
  position: sticky;
  top: 18px;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.tool-section { padding: 18px; border-bottom: 2px solid var(--ink); }
.tool-section:last-child { border-bottom: 0; }

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

#colorValue { font: 700 .72rem/1 monospace; }
.saved-note { color: var(--muted); font-size: .59rem; letter-spacing: .1em; }

.color-picker-label {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: stretch;
  min-height: 58px;
  border: 3px solid var(--ink);
  cursor: pointer;
}

.color-picker-label input {
  width: 64px;
  height: 100%;
  min-height: 52px;
  border: 0;
  border-right: 3px solid var(--ink);
  padding: 0;
  background: var(--accent);
  cursor: pointer;
}

.color-picker-label input::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-label input::-webkit-color-swatch { border: 0; }
.color-picker-label input::-moz-color-swatch { border: 0; }
.color-picker-label span { display: grid; place-items: center; font-size: .72rem; letter-spacing: .05em; }

.palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  min-height: 40px;
  margin-bottom: 12px;
}

.swatch {
  aspect-ratio: 1;
  min-width: 0;
  border: 2px solid var(--ink);
  padding: 0;
  cursor: pointer;
}

.swatch[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.swatch:focus-visible, .button:focus-visible, .text-button:focus-visible, .close-button:focus-visible, .style-card:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }

.button-row, .download-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.button {
  min-height: 43px;
  border: 2px solid var(--ink);
  padding: 9px 12px;
  background: var(--paper);
  cursor: pointer;
  font-size: .7rem;
  letter-spacing: .04em;
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.button:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.button:active:not(:disabled) { transform: translate(0, 0); box-shadow: none; }
.button:disabled { cursor: not-allowed; opacity: .38; }
.button--dark { background: var(--ink); color: var(--paper); }

.actions h2 { margin-bottom: 12px; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.download-row { grid-template-columns: 1fr auto; }

.page-info {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .62rem;
  letter-spacing: .1em;
}

.style-dialog {
  width: min(680px, calc(100% - 24px));
  max-height: min(760px, calc(100dvh - 24px));
  border: 3px solid var(--ink);
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
}

.style-dialog::backdrop { background: rgba(17, 16, 15, .65); backdrop-filter: blur(3px); }

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 20px;
  border-bottom: 3px solid var(--ink);
}

.dialog-head h2 { font-size: clamp(1.3rem, 4vw, 2rem); letter-spacing: -.04em; }

.close-button {
  width: 44px;
  height: 44px;
  border: 2px solid var(--ink);
  background: transparent;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
}

.style-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }

.style-card {
  position: relative;
  min-height: 120px;
  overflow: hidden;
  border: 2px solid var(--ink);
  padding: 70px 13px 13px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.style-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 58px;
  border-bottom: 2px solid var(--ink);
  background-color: #fff;
}

.style-card[data-style="topographic"]::before { background: repeating-radial-gradient(ellipse at 30% 80%, #fff 0 8px, #111 9px 11px, #fff 12px 19px); }
.style-card[data-style="voronoi"]::before { background: linear-gradient(25deg, transparent 47%, #111 48% 52%, transparent 53%), linear-gradient(150deg, transparent 47%, #111 48% 52%, transparent 53%), linear-gradient(80deg, transparent 47%, #111 48% 52%, transparent 53%); background-size: 62px 52px; }
.style-card[data-style="radiant"]::before { background: repeating-radial-gradient(circle at 50% 120%, #fff 0 9px, #111 10px 13px, #fff 14px 21px); }
.style-card[data-style="warped-grid"]::before { background: repeating-linear-gradient(82deg, transparent 0 17px, #111 18px 21px), repeating-linear-gradient(6deg, transparent 0 17px, #111 18px 21px); }
.style-card[data-style="islamic-geometry"]::before {
  background:
    linear-gradient(45deg, transparent 43%, #111 44% 47%, transparent 48% 52%, #111 53% 56%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #111 44% 47%, transparent 48% 52%, #111 53% 56%, transparent 57%);
  background-size: 46px 46px;
}

.style-card strong { display: block; font-size: .83rem; letter-spacing: .06em; }
.style-card span { display: block; margin-top: 6px; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.style-card:hover { background: #f2eee7; }

@media (max-width: 800px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .site-header > div { text-align: left; }
  .site-header .kicker { display: none; }
  h1 { overflow: hidden; font-size: clamp(1.25rem, 6vw, 2rem); letter-spacing: -.055em; white-space: nowrap; }
  .app-shell { grid-template-columns: 1fr; padding-bottom: 32px; }
  .tools { position: static; width: min(100%, 830px); margin: 0 auto; }
  .palette { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 500px) {
  :root { --shadow: 4px 4px 0 var(--ink); }
  .site-header { padding: 14px 12px; gap: 10px; }
  .home-link { font-size: .7rem; }
  .site-header .button { min-height: 38px; padding: 7px 9px; }
  .app-shell { padding: 14px 10px 28px; gap: 18px; }
  .canvas-bar { padding: 0 2px; }
  .canvas-wrap { border-width: 3px; }
  .tool-section { padding: 15px; }
  .palette { grid-template-columns: repeat(6, 1fr); }
  .style-list { grid-template-columns: 1fr; }
  .style-card { min-height: 104px; }
  .style-dialog { box-shadow: 5px 5px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}