:root {
  color-scheme: light;
  --paper: #f5ecdc;
  --ink: #31261f;
  --muted: #716456;
  --orange: #cf5428;
  --space: clamp(24px, 5vw, 76px);
  font-family: "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 7px; border-radius: 2px; }
::selection { background: #e9ba95; color: var(--ink); }
[hidden] { display: none !important; }
.page {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  min-height: 650px;
  height: 100svh;
  padding: max(34px, env(safe-area-inset-top)) var(--space) calc(40px + env(safe-area-inset-bottom));
}
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 24px; position: relative; z-index: 2; }
.wordmark { display: inline-block; flex: none; position: relative; z-index: 1; font-family: Georgia, "Times New Roman", serif; font-size: 38px; font-weight: 700; letter-spacing: -2px; text-decoration: none; }
.wordmark-dot { color: var(--orange); }
.hero { align-self: center; position: relative; z-index: 1; max-width: 800px; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(58px, 6.35vw, 94px); line-height: .99; letter-spacing: -.058em; font-weight: 400; }
h1 > span { display: block; }
.headline-secondary { margin-top: .2em; }
.intro { margin: 24px 0 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: #65574b; }
.footer { display: flex; justify-content: space-between; align-items: end; gap: 30px; position: relative; z-index: 2; border-top: 1px solid #31261f2b; padding-top: 24px; }
.text-link { display: inline-flex; align-items: baseline; gap: 12px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(20px, 1.65vw, 26px); font-weight: 700; letter-spacing: -.035em; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: transparent; transition: color .2s, text-decoration-color .2s; }
.text-link:hover { color: var(--orange); text-decoration-color: currentColor; }
.link-arrow { width: .62em; height: .62em; flex: none; align-self: center; fill: none; stroke: var(--orange); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.footer p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.contact { text-align: right; }
.background-controls { display: flex; justify-content: flex-end; gap: 0; align-items: center; flex: none; position: relative; z-index: 0; border-radius: 999px; background: var(--paper); box-shadow: 0 0 20px 10px var(--paper); }
/* Reserve room for the longest family name so the buttons stay in place. */
.pattern-name { inline-size: 12ch; flex: none; font-size: 11px; color: var(--muted); text-align: left; white-space: nowrap; }
.background-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font: inherit; cursor: pointer; transition: color .2s, background-color .2s; }
/* Bring the icons together inside separate, non-overlapping tap areas. */
#motion-toggle { justify-content: flex-end; padding-inline-end: 4px; }
#new-pattern { justify-content: flex-start; padding-inline-start: 4px; }
.background-button:hover { color: var(--ink); background: #31261f0b; }
.background-button:focus-visible { outline-offset: 3px; border-radius: 50%; }
.background-button:disabled { opacity: .5; cursor: wait; }
.background-button svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fractal-stage { position: fixed; left: 38%; top: -10%; width: 78%; height: 115%; overflow: hidden; pointer-events: none; opacity: .91; -webkit-mask-image: linear-gradient(90deg, transparent, #000 19%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 19%, #000 88%, transparent); }
.fractal-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--paper), var(--paper) 18%, transparent 32%, transparent 87%, var(--paper)); }
.fractal-stage canvas { display: block; width: 100%; height: 100%; }
.fractal-stage.is-cpu canvas { animation: float-print 42s ease-in-out infinite alternate; transform-origin: 52% 50%; }
.fractal-stage.is-paused canvas { animation-play-state: paused; }
@keyframes float-print { from { transform: scale(1.02) rotate(-1deg) translate(-.5%, -.5%); } to { transform: scale(1.06) rotate(1.5deg) translate(.5%, .5%); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) {
  .page { gap: 16px; min-height: 660px; padding: max(23px, env(safe-area-inset-top)) 25px calc(32px + env(safe-area-inset-bottom)); }
  .masthead { gap: 12px; }
  .wordmark { font-size: 32px; letter-spacing: -1.6px; }
  .hero { align-self: end; padding-bottom: 18px; }
  h1 { font-size: clamp(43px, 11.8vw, 59px); line-height: 1.015; letter-spacing: -.05em; }
  .headline-secondary { margin-top: .12em; }
  .intro { margin-top: 15px; font-size: 14px; }
  .footer { flex-direction: column; align-items: start; gap: 15px; padding-top: 16px; }
  .text-link { font-size: 21px; gap: 8px; }
  .footer p { font-size: 11px; margin-top: 4px; }
  .contact { text-align: left; }
  .fractal-stage { left: 1%; top: -11%; width: 130%; height: 66%; opacity: .82; -webkit-mask-image: linear-gradient(0deg, transparent, #000 28%, #000 91%, transparent); mask-image: linear-gradient(0deg, transparent, #000 28%, #000 91%, transparent); }
  .fractal-stage::after { background: linear-gradient(90deg, var(--paper), var(--paper) 12%, transparent 40%); }
}
@media (max-width: 350px) {
  .masthead { gap: 8px; }
}
@media (max-width: 700px) and (max-height: 720px) {
  .page { min-height: 560px; gap: 10px; padding-top: 18px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .hero { padding-bottom: 9px; }
  h1 { font-size: clamp(38px, 10.2vw, 48px); }
  .intro { margin-top: 12px; }
  .footer { gap: 10px; padding-top: 12px; }
  .text-link { font-size: 19px; }
  .fractal-stage { height: 60%; }
}
@media (min-width: 701px) and (max-height: 750px) {
  .page { min-height: 560px; padding-top: 25px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); gap: 16px; }
  h1 { font-size: clamp(50px, 6vw, 70px); }
  .intro { margin-top: 18px; }
}