/* synthetic.ad: a picture framer's workbench. A green self-healing cutting mat with a gold grid,
   kraft paper and mat boards; framed store images rest on the mat. Light mode is the bench in
   daylight, dark mode the mat under a desk lamp. */

@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/dm-serif-display-regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/dm-serif-display-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --mat: #2f6b4f;
  --bench: #1d2a22;
  --gold: #f0d66e;
  --rust: #b0521d;
  --kraft: #d8b98a;
  --paper-c: #efe6d2;
  --board: #fdf8ec;

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --paper: #efe6d2;
  --ink: #1d2a22;
  --muted: #3e473f;
  --accent-text: #9c4716;
  --rule: rgba(29, 42, 34, 0.22);
  --focus: #9c4716;
  --field-bg: #fdf8ec;
  --demo-bg: #d8b98a;
  --demo-accent: #7a3410;
  --cast: 52, 36, 14;
  --lamp: 0;
  --fibre-opacity: 0.55;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1d2a22;
    --ink: #efe6d2;
    --muted: #c4cab9;
    --accent-text: #f0d66e;
    --rule: rgba(239, 230, 210, 0.2);
    --focus: #f0d66e;
    --field-bg: #24342a;
    --demo-bg: #16211a;
    --demo-accent: #f0d66e;
    --cast: 0, 0, 0;
    --lamp: 1;
    --fibre-opacity: 0.18;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1d2a22;
  --ink: #efe6d2;
  --muted: #c4cab9;
  --accent-text: #f0d66e;
  --rule: rgba(239, 230, 210, 0.2);
  --focus: #f0d66e;
  --field-bg: #24342a;
  --demo-bg: #16211a;
  --demo-accent: #f0d66e;
  --cast: 0, 0, 0;
  --lamp: 1;
  --fibre-opacity: 0.18;
  color-scheme: dark;
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}
body::before {
  /* paper fibres in daylight, the lamp's pool of warm light at night */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1400px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 46% at 78% 6%, rgba(255, 214, 140, calc(0.17 * var(--lamp))), transparent 72%),
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(255, 255, 255, calc(0.35 * (1 - var(--lamp)))), transparent 70%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--fibre-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
header,
main,
footer {
  position: relative;
  z-index: 1;
}
main {
  /* prints that overhang the mat, or slide in from off it, never widen the page */
  overflow-x: clip;
}
.wrap {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
h1,
h2,
h3,
p {
  margin: 0;
}

/* ---------- top bar ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 6px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font: 400 1.32rem/1 var(--serif);
  letter-spacing: 0.005em;
}
.mark {
  position: relative;
  width: 15px;
  height: 19px;
  border-radius: 2px;
  background: linear-gradient(135deg, #f6e391, #d9b84a 55%, #b8932c);
  box-shadow: 0 1px 2px rgba(var(--cast), 0.35);
  transform: rotate(-4deg);
}
.mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 1px;
  background: var(--mat);
  box-shadow: inset 0 0 0 1.5px var(--board);
}
.theme {
  display: flex;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  min-width: 0;
}
.theme label {
  position: relative;
  cursor: pointer;
}
.theme span {
  display: block;
  padding: 6px 9px;
  border-radius: 999px;
  font: 600 0.72rem/1 var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: background-color 0.15s, color 0.15s;
}
.theme input:checked + span {
  background: var(--ink);
  color: var(--paper);
}
.theme input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- headlines ---------- */

h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
}
h1 {
  font-size: clamp(2.45rem, 10.4vw, 5.9rem);
  line-height: 0.98;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2.1rem, 8.6vw, 3.6rem);
  line-height: 1;
}
.accent {
  font-style: italic;
  color: var(--accent-text);
}
.lede {
  margin-top: 12px;
  max-width: 34ch;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- the cutting mat ---------- */

.mat {
  --cm: 20px;
  --edge: 22px;
  position: relative;
  border-radius: 14px;
  padding: var(--edge) 10px 12px var(--edge);
  background-color: var(--mat);
  background-image:
    radial-gradient(ellipse 70% 55% at 72% 18%, rgba(255, 226, 160, calc(0.16 + 0.1 * var(--lamp))), transparent 75%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.12)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 3px 0 #1f4a36,
    0 4px 1px rgba(var(--cast), 0.25),
    0 30px 50px -24px rgba(var(--cast), calc(0.45 + 0.25 * var(--lamp)));
  color: var(--board);
  isolation: isolate;
}
/* cm and half-cm ticks along the top and left edges */
.mat::before,
.mat::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0.8;
}
.mat::before {
  left: var(--edge);
  right: 10px;
  top: calc(var(--edge) - 7px);
  height: 7px;
  background:
    linear-gradient(90deg, var(--gold) 1px, transparent 1px) 0 0 / var(--cm) 7px repeat-x,
    linear-gradient(90deg, var(--gold) 1px, transparent 1px) calc(var(--cm) / 2) 100% / var(--cm) 3px repeat-x;
}
.mat::after {
  top: var(--edge);
  bottom: 12px;
  left: calc(var(--edge) - 7px);
  width: 7px;
  background:
    linear-gradient(180deg, var(--gold) 1px, transparent 1px) 0 0 / 7px var(--cm) repeat-y,
    linear-gradient(180deg, var(--gold) 1px, transparent 1px) 100% calc(var(--cm) / 2) / 3px var(--cm) repeat-y;
}
.ruler {
  position: absolute;
  top: 2px;
  left: calc(var(--edge) + var(--cm) / 2);
  right: 10px;
  height: 11px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  font: 600 8px/11px var(--text);
  color: var(--gold);
  opacity: 0.85;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.ruler span {
  flex: 0 0 var(--cm);
  text-align: center;
}
.field {
  position: relative;
  border-radius: 2px;
  background-image:
    linear-gradient(90deg, rgba(240, 214, 110, 0.5) 1px, transparent 1px),
    linear-gradient(rgba(240, 214, 110, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 214, 110, 0.17) 1px, transparent 1px),
    linear-gradient(rgba(240, 214, 110, 0.17) 1px, transparent 1px);
  background-size:
    calc(var(--cm) * 5) calc(var(--cm) * 5),
    calc(var(--cm) * 5) calc(var(--cm) * 5),
    var(--cm) var(--cm),
    var(--cm) var(--cm);
}

/* ---------- a framed store image (the hero set) ---------- */

[data-bg="sunset"] {
  --g1: #ff9a62;
  --g2: #ec4d6f;
  --g3: #8b3fd1;
  --si-ink: #ffffff;
  --app: #e2466e;
  --app-2: #ff8a5c;
}
[data-bg="lagoon"] {
  --g1: #62c7b8;
  --g2: #1f7a8f;
  --g3: #173352;
  --si-ink: #ffffff;
  --app: #1f8f92;
  --app-2: #49b6a6;
}
[data-bg="marigold"] {
  --g1: #f9dd7c;
  --g2: #f3a64d;
  --g3: #d9662c;
  --si-ink: #2b1708;
  --app: #e07a2e;
  --app-2: #f3a64d;
}
[data-bg="bench"] {
  --g1: #44866a;
  --g2: #2f6b4f;
  --g3: #1b2a21;
  --si-ink: #fdf8ec;
  --app: #2f6b4f;
  --app-2: #5d9c7c;
}
[data-bg="board"] {
  --g1: #fffcf3;
  --g2: #f7efdc;
  --g3: #e9d7b2;
  --si-ink: #1d2a22;
  --app: #b0521d;
  --app-2: #d98a4e;
}

.set {
  position: relative;
  display: grid;
  place-items: center;
  padding: 22px 0 18px;
}
.si {
  --w: 158px;
  position: relative;
  width: var(--w);
  aspect-ratio: 1206 / 2622;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.03);
  background: linear-gradient(172deg, var(--g1), var(--g2) 52%, var(--g3));
  color: var(--si-ink);
  font-size: calc(var(--w) / 16);
  box-shadow:
    0 0 0 calc(var(--w) * 0.028) var(--board),
    0 0 0 calc(var(--w) * 0.028 + 1px) rgba(29, 42, 34, 0.2),
    0 2px 2px calc(var(--w) * 0.028) rgba(0, 0, 0, 0.18),
    0 calc(var(--w) * 0.1) calc(var(--w) * 0.16) calc(var(--w) * -0.02) rgba(0, 0, 0, 0.42),
    0 calc(var(--w) * 0.22) calc(var(--w) * 0.34) calc(var(--w) * -0.08) rgba(0, 0, 0, 0.32);
}
.si::after {
  /* a little light on the print's surface */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 38%);
}
.si--main {
  z-index: 2;
  transform: rotate(-2deg);
  transition: background 0.2s;
}
.si--side {
  --w: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
}
/* on a phone the other two prints lie stacked under the first, corners showing */
.si--b {
  transform: translate(calc(-50% - 30px), calc(-50% + 10px)) rotate(-10deg);
}
.si--c {
  transform: translate(calc(-50% + 30px), calc(-50% + 18px)) rotate(8deg);
}
@media (max-width: 719px) {
  .si--side .si-cap {
    visibility: hidden;
  }
}
.si-cap {
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 25%;
  display: grid;
  place-items: center;
  padding-top: 4%;
  text-align: center;
  font: 400 1.84em/1.02 var(--serif);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.phone {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 25%;
  aspect-ratio: 0.47;
  padding: 3.4%;
  border-radius: 15% / 7%;
  background: linear-gradient(160deg, #2a2d33, #0f1013 40%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 1.4em 2.4em -1em rgba(0, 0, 0, 0.55),
    0 0.3em 0.6em rgba(0, 0, 0, 0.18);
}
.screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 12% / 5.6%;
  font-size: calc(var(--w) * 0.033);
}
.screen::before {
  /* front camera */
  content: "";
  position: absolute;
  top: 1.1em;
  left: 50%;
  width: 0.85em;
  height: 0.85em;
  margin-left: -0.425em;
  border-radius: 50%;
  background: #0f1013;
  z-index: 2;
}

/* the imaginary habit app inside the phone */
.app {
  padding: 0 1.15em;
  background: #fbf8f2;
  color: #1c1d22;
  font-family: var(--text);
  line-height: 1.2;
}
.app p {
  margin: 0;
}
.app-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.1em;
  padding: 0.5em 0.7em 0;
  font-size: 0.86em;
  font-weight: 700;
}
.app-icons {
  display: flex;
  gap: 0.3em;
  align-items: center;
}
.app-icons i {
  display: block;
  width: 1em;
  height: 0.62em;
  border-radius: 0.12em;
  background: linear-gradient(90deg, #1c1d22 0 18%, transparent 18% 27%, #1c1d22 27% 45%, transparent 45% 54%, #1c1d22 54% 72%, transparent 72% 81%, #1c1d22 81%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.app-icons i:nth-child(2) {
  width: 0.95em;
  height: 0.7em;
  background: #1c1d22;
  clip-path: polygon(50% 100%, 0 30%, 15% 12%, 50% 0, 85% 12%, 100% 30%);
}
.app-icons i:nth-child(3) {
  width: 1.65em;
  height: 0.75em;
  border-radius: 0.22em;
  clip-path: none;
  background: linear-gradient(90deg, #1c1d22 70%, transparent 70%) 0.16em 0.16em / calc(100% - 0.32em) calc(100% - 0.32em) no-repeat;
  box-shadow: inset 0 0 0 0.08em rgba(28, 29, 34, 0.45);
}
.app-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 0.7em;
}
.app-sub {
  font-size: 0.82em;
  font-weight: 600;
  color: #8a8477;
}
.app-h {
  font-size: 2.15em;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.app-avatar {
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #f6c9a8 0 26%, transparent 27%), radial-gradient(ellipse 60% 44% at 50% 100%, #f6c9a8 0 99%, transparent 100%), linear-gradient(160deg, var(--app-2), var(--app));
}
.app-streak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1em;
  padding: 0.9em 1em;
  border-radius: 1.1em;
  background: linear-gradient(130deg, var(--app-2), var(--app));
  color: #fff;
  box-shadow: 0 0.5em 1em -0.5em var(--app);
}
.app-streak p {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  font-size: 0.9em;
  font-weight: 600;
}
.app-streak b {
  font-size: 2.1em;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.app-week {
  display: flex;
  gap: 0.3em;
}
.app-week i {
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.14em rgba(255, 255, 255, 0.65);
}
.app-week i.on {
  background: #fff;
  box-shadow: none;
}
.app-progress {
  margin: 1.2em 0 0.55em 0.2em;
  font-size: 0.74em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8477;
}
.app-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.app-list li {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.5em;
  padding: 0.7em 0.8em;
  border-radius: 0.95em;
  background: #fff;
  box-shadow: 0 0.08em 0 rgba(28, 29, 34, 0.06), 0 0.4em 0.9em -0.6em rgba(28, 29, 34, 0.25);
  font-size: 0.98em;
  font-weight: 650;
}
.app-ico {
  position: relative;
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  border-radius: 0.65em;
  background: #ffe3d6;
}
.app-ico::after {
  content: "";
  position: absolute;
  inset: 0.55em;
  border-radius: 50%;
  background: #ff7a50;
}
.app-ico[data-tone="2"] {
  background: #dbeeff;
}
.app-ico[data-tone="2"]::after {
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #3b8ee8;
}
.app-ico[data-tone="3"] {
  background: #efe3ff;
}
.app-ico[data-tone="3"]::after {
  border-radius: 0.12em;
  inset: 0.55em 0.5em;
  background: #8b5cf6;
}
.app-ico[data-tone="4"] {
  background: #ddf3e5;
}
.app-ico[data-tone="4"]::after {
  background: #2fa36b;
  inset: 0.6em;
}
.app-ico[data-tone="5"] {
  background: #fff1c7;
}
.app-ico[data-tone="5"]::after {
  inset: 0.6em 0.45em;
  border-radius: 0.3em;
  background: #e6a91a;
}
.app-check {
  position: relative;
  flex: 0 0 auto;
  width: 1.55em;
  height: 1.55em;
  margin-left: auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.14em #dcd6ca;
}
.done span {
  color: #8a8477;
}
.done .app-check {
  background: var(--app);
  box-shadow: none;
}
.done .app-check::after {
  content: "";
  position: absolute;
  left: 0.52em;
  top: 0.32em;
  width: 0.38em;
  height: 0.68em;
  border: solid #fff;
  border-width: 0 0.16em 0.16em 0;
  transform: rotate(45deg);
}

/* streak screen */
.app-ring {
  display: grid;
  place-items: center;
  width: 12em;
  height: 12em;
  margin: 1.6em auto 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #fbf8f2 80%, transparent 81%),
    conic-gradient(var(--app) 0 70%, #e7e1d5 70%);
}
.app-ring p {
  display: grid;
  text-align: center;
  font-size: 0.9em;
  font-weight: 600;
  color: #8a8477;
}
.app-ring b {
  font-size: 3.4em;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #1c1d22;
}
.app-ring + .app-sub {
  margin: 1.6em 0 0.6em 0.2em;
  font-weight: 800;
  color: #1c1d22;
  font-size: 1em;
}
.app-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.45em;
}
.app-cal i {
  aspect-ratio: 1;
  border-radius: 0.4em;
  background: #e7e1d5;
}
.app-cal i.on {
  background: var(--app);
}
.app-cal i.on:nth-child(3n) {
  opacity: 0.7;
}

/* first-run screen */
.app-h--pick {
  margin: 0.8em 0 0.8em;
  font-size: 1.7em;
}
.app-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.app-chips span {
  padding: 0.6em 1em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.12em #dcd6ca;
  font-weight: 700;
  font-size: 0.95em;
}
.app-chips span.on {
  background: #1c1d22;
  color: #fff;
  box-shadow: none;
}
.app-start {
  display: block;
  margin-top: 2em;
  padding: 0.95em;
  border-radius: 1em;
  background: var(--app);
  color: #fff;
  text-align: center;
  font-weight: 800;
}

.app-chart {
  margin-top: 0.9em;
  padding: 0.85em 1em 0.9em;
  border-radius: 0.95em;
  background: #fff;
  box-shadow: 0 0.08em 0 rgba(28, 29, 34, 0.06), 0 0.4em 0.9em -0.6em rgba(28, 29, 34, 0.25);
}
.app-chart p {
  font-size: 0.8em;
  font-weight: 800;
}
.app-chart span {
  display: flex;
  align-items: flex-end;
  gap: 0.55em;
  height: 3.6em;
  margin-top: 0.6em;
}
.app-chart i {
  flex: 1;
  height: 60%;
  border-radius: 0.3em;
  background: linear-gradient(var(--app-2), var(--app));
}
.app-chart i:nth-child(2) {
  height: 85%;
}
.app-chart i:nth-child(3) {
  height: 45%;
}
.app-chart i:nth-child(4) {
  height: 100%;
}
.app-chart i:nth-child(5) {
  height: 75%;
}
.app-chart i:nth-child(6),
.app-chart i:nth-child(7) {
  height: 22%;
  background: #ece6da;
}
.app-best {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 1.1em;
  padding: 0.8em 0.9em;
  border-radius: 0.95em;
  background: #fff;
  box-shadow: 0 0.08em 0 rgba(28, 29, 34, 0.06), 0 0.4em 0.9em -0.6em rgba(28, 29, 34, 0.25);
  font-size: 0.95em;
  font-weight: 650;
}
.app-best b {
  margin-left: auto;
  color: var(--app);
  font-weight: 800;
}
.app-medal {
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe7a3 0 35%, #f2c14e 36% 62%, #e0a42c 63%);
}
.app-art {
  position: relative;
  height: 8.5em;
  margin-top: 1em;
  border-radius: 1.2em;
  overflow: hidden;
  background: linear-gradient(180deg, #ffe9b8, #ffd38a);
}
.app-art i {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 3.6em;
  height: 3.6em;
  margin-left: -1.8em;
  border-radius: 50%;
  background: #f39a3b;
  box-shadow: 0 0 0 0.7em rgba(243, 154, 59, 0.25);
}
.app-art b {
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 70%;
  border-radius: 50% 50% 0 0;
  background: #e07a2e;
  box-shadow: -4em 1em 0 0 #c9632a;
}
.app-later {
  margin-top: 0.8em;
  text-align: center;
  font-size: 0.8em;
  color: #8a8477;
}

/* ---------- mat-board swatches ---------- */

.swatches {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 4px 0 6px;
  border: 0;
  min-width: 0;
}
.chip {
  position: relative;
  cursor: pointer;
}
.chip-face {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  background: linear-gradient(160deg, var(--g1), var(--g2) 55%, var(--g3));
  box-shadow:
    0 0 0 3px var(--board),
    0 0 0 4px rgba(29, 42, 34, 0.18),
    0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chip:hover .chip-face {
  transform: translateY(-2px);
}
.chip input:checked + .chip-face {
  box-shadow:
    0 0 0 3px var(--board),
    0 0 0 6px var(--gold),
    0 6px 12px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}
.chip input:focus-visible + .chip-face {
  outline: 3px solid var(--focus);
  outline-offset: 7px;
}
.mat .chip input:focus-visible + .chip-face {
  outline-color: var(--board);
}

/* ---------- hero layout ---------- */

.hero {
  padding-top: 18px;
}
.mat--hero {
  margin-top: 20px;
}

/* ---------- the demo ---------- */

.demo {
  position: relative;
  margin-top: 56px;
  padding: 52px 0 60px;
  background-color: var(--demo-bg);
  background-image:
    radial-gradient(ellipse 70% 60% at 85% 20%, rgba(255, 214, 140, calc(0.1 * var(--lamp))), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .5' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23k)'/%3E%3C/svg%3E");
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(0.35 * (1 - var(--lamp)))), inset 0 10px 14px -12px rgba(var(--cast), 0.35);
}
.demo .accent {
  color: var(--demo-accent);
}
.demo-in {
  display: grid;
  gap: 22px;
}
.demo-line {
  margin-top: 10px;
  max-width: 36ch;
  color: var(--ink);
}
.pick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font: 700 0.98rem/1 var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s;
}
.btn:active {
  transform: translateY(1px);
}
.btn--gold {
  background: var(--gold);
  color: var(--bench);
  box-shadow: inset 0 -2px 0 rgba(120, 90, 10, 0.35), 0 2px 0 rgba(var(--cast), 0.25), 0 6px 14px -6px rgba(var(--cast), 0.5);
}
.btn--gold:hover {
  background: #f4df85;
}
.btn--line {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--line:hover {
  background: rgba(127, 127, 127, 0.1);
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}
.hint {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--muted);
}
.error {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--board);
  color: #7a2a0a;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: inset 3px 0 0 #b0521d;
}

.mat--demo {
  justify-self: center;
  width: 100%;
  max-width: 420px;
}
.mat--demo.is-over .field {
  outline: 2px dashed var(--gold);
  outline-offset: -6px;
}
.mat--demo .field {
  display: grid;
  place-items: center;
  padding: 30px 0 34px;
}
.stage {
  --pw: 214px;
  position: relative;
  width: var(--pw);
  height: calc(var(--pw) * 2622 / 1206);
}
.stage[data-size="play"] {
  height: calc(var(--pw) * 1920 / 1080);
}
.motion .stage {
  transition: height 0.28s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 6px;
  transform: rotate(-1.4deg);
  box-shadow:
    0 0 0 6px var(--board),
    0 0 0 7px rgba(29, 42, 34, 0.2),
    0 2px 2px 6px rgba(0, 0, 0, 0.18),
    0 18px 26px -6px rgba(0, 0, 0, 0.45),
    0 38px 52px -16px rgba(0, 0, 0, 0.32);
  cursor: pointer;
}
.stage.has-image .frame {
  cursor: default;
}
.preview {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: var(--g2, #ec4d6f);
}
.drop-here {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 58%;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  font: 600 0.8rem/1.3 var(--text);
  color: #5c574c;
  pointer-events: none;
}
.drop-here svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stage.has-image .drop-here {
  display: none;
}
.print {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 1;
  display: block;
  visibility: hidden;
  border-radius: 6px;
  box-shadow: 0 10px 18px -6px rgba(0, 0, 0, 0.5);
}
.guides {
  position: absolute;
  inset: -14px;
  z-index: 3;
  pointer-events: none;
  display: none;
}
.js .guides {
  display: block;
}
.guides i {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 0 solid var(--gold);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.guides i:nth-child(1) {
  left: 0;
  top: 0;
  border-width: 2px 0 0 2px;
}
.guides i:nth-child(2) {
  right: 0;
  top: 0;
  border-width: 2px 2px 0 0;
}
.guides i:nth-child(3) {
  left: 0;
  bottom: 0;
  border-width: 0 0 2px 2px;
}
.guides i:nth-child(4) {
  right: 0;
  bottom: 0;
  border-width: 0 2px 2px 0;
}

.controls {
  display: grid;
  gap: 18px;
  align-content: start;
}
.control {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.control-label {
  padding: 0;
  font: 700 0.74rem/1 var(--text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.text {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--ink);
  font: 400 1.25rem/1 var(--serif);
}
.text:focus-visible {
  border-color: var(--focus);
  outline-offset: 1px;
}
.control legend {
  margin-bottom: 10px;
}
.swatches--demo {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  padding: 4px 0 4px 4px;
}
.sizes {
  grid-template-columns: 1fr;
}
.size {
  position: relative;
  cursor: pointer;
}
.size span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px var(--rule);
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.size span::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.size input:checked + span {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}
.size input:checked + span::before {
  box-shadow: inset 0 0 0 4px var(--gold);
}
.size input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.btn--save {
  width: 100%;
  min-height: 52px;
  font-size: 1.05rem;
}
.soon {
  font: italic 400 1.18rem/1.3 var(--serif);
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- steps ---------- */

.steps {
  padding: 56px 0 24px;
}
.kicker {
  font: 700 0.78rem/1 var(--text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.step-list {
  display: grid;
  gap: 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  padding: 14px 14px 20px;
  border-radius: 4px;
  background: var(--board);
  color: var(--bench);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 2px 3px rgba(var(--cast), 0.18),
    0 16px 26px -16px rgba(var(--cast), 0.55);
}
.step:nth-child(1) {
  transform: rotate(-0.6deg);
}
.step:nth-child(2) {
  transform: rotate(0.5deg);
}
.step:nth-child(3) {
  transform: rotate(-0.3deg);
}
.step-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 120 / 80;
  max-height: 150px;
  margin-bottom: 14px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(240, 214, 110, 0.32) 1px, transparent 1px) 0 0 / 20% 25%,
    linear-gradient(rgba(240, 214, 110, 0.32) 1px, transparent 1px) 0 0 / 20% 25%,
    var(--mat);
  /* the bevelled window cut in the mat board */
  box-shadow:
    0 0 0 3px #f3ead4,
    0 0 0 4px rgba(29, 42, 34, 0.14),
    inset 0 2px 6px rgba(0, 0, 0, 0.35);
}
.s-shot {
  fill: #fbf8f2;
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 0.6;
}
.s-shot--top {
  fill: #fff;
}
.s-card {
  fill: #ec4d6f;
}
.s-card--b {
  fill: #1f7a8f;
}
.s-card--c {
  fill: #f3a64d;
}
.s-line {
  fill: #fff;
}
.s-phone {
  fill: #15161a;
}
.s-screen {
  fill: #fbf8f2;
}
.s-guide,
.s-tick {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: square;
}
.step h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 700 1.1rem/1.25 var(--text);
}
.step-no {
  font: italic 400 1.5rem/1 var(--serif);
  color: var(--rust);
}
.step p {
  margin-top: 4px;
  color: #3e473f;
}

/* ---------- footer ---------- */

.foot {
  padding: 34px 0 40px;
  text-align: center;
}
.foot-line {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- 404 ---------- */

.nf {
  display: grid;
  gap: 22px;
  padding: 18px 0 20px;
}
.nf .mat .field {
  display: grid;
  place-items: center;
  padding: 34px 0 40px;
}
.stage--empty {
  --pw: 180px;
}
.empty {
  --w: var(--pw);
  position: absolute;
  inset: 0;
  border-radius: 6px;
  transform: rotate(-1.6deg);
  background: rgba(253, 248, 236, 0.06);
  box-shadow:
    0 0 0 8px var(--board),
    0 0 0 9px rgba(29, 42, 34, 0.2),
    inset 0 3px 10px rgba(0, 0, 0, 0.4),
    0 22px 30px -10px rgba(0, 0, 0, 0.5);
}
.empty .phone {
  background: none;
  box-shadow: none;
  border: 1.5px dashed rgba(240, 214, 110, 0.75);
}
.nf-copy {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.nf-back {
  font-weight: 700;
}

/* ---------- wider screens ---------- */

@media (min-width: 720px) {
  .mat {
    --cm: 24px;
    --edge: 26px;
  }
  .ruler {
    font-size: 9px;
    top: 4px;
  }
  .si {
    --w: 220px;
  }
  .si--side {
    --w: 180px;
  }
  .si--b {
    transform: translate(calc(-50% - 168px), calc(-50% + 16px)) rotate(-7deg);
  }
  .si--c {
    transform: translate(calc(-50% + 168px), calc(-50% + 24px)) rotate(6deg);
  }
  .set {
    padding: 40px 0 30px;
  }
  .step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .stage {
    --pw: 260px;
  }
  .mat--demo {
    max-width: 480px;
  }
  .demo-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy mat" "controls mat";
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    row-gap: 30px;
    align-items: start;
  }
  .demo-copy {
    grid-area: copy;
  }
  .mat--demo {
    grid-area: mat;
  }
  .controls {
    grid-area: controls;
    max-width: 440px;
  }
  .nf {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    min-height: 70vh;
  }
}

@media (min-width: 1040px) {
  .bar {
    padding-top: 22px;
  }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: 56px;
    padding-top: 24px;
  }
  .lede {
    margin-top: 22px;
    font-size: 1.2rem;
  }
  .mat--hero {
    margin-top: 0;
  }
  .si {
    --w: 236px;
  }
  .si--side {
    --w: 190px;
  }
  .si--b {
    transform: translate(calc(-50% - 172px), calc(-50% + 18px)) rotate(-7deg);
  }
  .si--c {
    transform: translate(calc(-50% + 172px), calc(-50% + 26px)) rotate(6deg);
  }
  .stage {
    --pw: 280px;
  }
  .demo {
    margin-top: 80px;
    padding: 76px 0 84px;
  }
  .demo-line {
    font-size: 1.12rem;
  }
}

/* ---------- calm mode ---------- */

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