:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #26232b;
  --muted: #6b6672;
  --border: #bfbfbf;
  --soft: #f2f2f5;
  --scanline: rgba(0, 0, 0, 0.035);
  --accent: #ffa3c4;
  --accent-ink: #26232b;
  --pixel: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  padding-top: 98px; /* room for the fixed top menu */
}

/* The app's retro background: white with very faint CRT scanlines, a 1px
   line every 4px, laid over the whole screen (retroScanlines() in the app). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--scanline) 0,
    var(--scanline) 1px,
    transparent 1px,
    transparent 4px
  );
}

.wrap {
  max-width: 712px; /* 680px column + 16px gutters */
  margin: 0 auto;
  padding: 40px 16px 24px;
}

h1, h2 {
  font-family: var(--pixel);
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 14px;
}
h1 { font-size: 18px; }
h2 { font-size: 14px; }

p, ul { margin: 0 0 14px; }
ul { padding-left: 20px; }
li { margin-bottom: 6px; }
.panel > :last-child { margin-bottom: 0; }

a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
a:hover { background: var(--accent); color: var(--accent-ink); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.panel {
  background: var(--panel);
  border: 2px solid var(--border);
  padding: 20px 18px;
  margin-bottom: 36px;
}

.meta { color: var(--muted); font-size: 13px; }

/* Top menu: a floating bar, centred */
.nav {
  position: fixed;
  top: 32px;
  left: 0;
  right: 0;
  z-index: 5;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  /* Glides out of the way on scroll down and back on scroll up (nav.js) */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--panel);
  border: 2px solid var(--border);
  font-family: var(--pixel);
  font-size: 9px;
  line-height: 1.4;
}
.nav.away { transform: translateY(calc(-100% - 40px)); }
.nav:focus-within { transform: none; }
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  color: var(--ink);
  text-decoration: none;
}
.nav a:hover { background: none; color: var(--muted); }
/* Placeholder for the Download link until the app is live */
.nav .soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  color: var(--muted);
  cursor: default;
}
.nav a:focus-visible { outline-offset: -4px; }
.brand { letter-spacing: -0.06em; }
.apple { flex: none; width: 1.3em; height: 1.3em; margin: -0.3em 0 -0.1em; fill: currentColor; }

/* Bottom menu: the app's colour squares, floating like the top menu */
.dock {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  padding: 10px;
  background: var(--panel);
  border: 2px solid var(--border);
  /* Glides away on scroll down and back on scroll up, like the top menu */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.dock.away { transform: translate(-50%, calc(100% + 40px)); }
.dock:focus-within { transform: translateX(-50%); }
.dock[hidden] { display: none; }
.dock button[data-c] {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0 solid var(--ink);
  cursor: pointer;
}
.dock button[data-c="#ffa3c4"] { background: #ffa3c4; }
.dock button[data-c="#a6ccfa"] { background: #a6ccfa; }
.dock button[data-c="#ade0b3"] { background: #ade0b3; }
.dock button[data-c="#ffbf8c"] { background: #ffbf8c; }
.dock button[data-c="#d1bff2"] { background: #d1bff2; }
.dock button[aria-pressed="true"] { border-width: 3px; }
.dock button[data-c]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* First arrival on the landing page: both menus slide in from off screen.
   "backwards" holds the starting position during the delay only, so the
   scroll hide-and-reveal still works once the slide has finished. */
.intro .nav { animation: nav-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards; }
.intro .dock { animation: dock-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s backwards; }
@keyframes nav-in { from { transform: translateY(calc(-100% - 40px)); } }
@keyframes dock-in { from { transform: translate(-50%, calc(100% + 40px)); } }

/* Hero: copy on the left, drawing area on the right */
.hero {
  max-width: 1080px;
  min-height: calc(100vh - 100px);
  min-height: calc(100svh - 100px);
  margin: 0 auto;
  padding: 48px 16px 64px;
  display: grid;
  gap: 48px;
  align-items: center;
  justify-items: center;
}
.hero-copy { width: 100%; max-width: 460px; text-align: center; }
.hero h1 { margin: 24px 0 0; font-size: 18px; line-height: 1.7; letter-spacing: -0.06em; word-spacing: -0.05em; text-wrap: balance; }
.lede {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--muted);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hearts { display: flex; gap: 8px; justify-content: center; align-items: flex-end; height: 36px; }
.hearts svg { width: 28px; height: 24px; fill: var(--accent); animation: hop 1.4s ease-in-out infinite; }
.hearts svg:nth-child(2) { animation-delay: 0.2s; }
.hearts svg:nth-child(3) { animation-delay: 0.4s; }
@keyframes hop {
  0%, 50%, 100% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
}

.cta { margin: 32px 0 0; }
.cta .btn { display: inline-flex; padding: 14px 20px; font-size: 10px; }

/* Pixel button: hard shadow, presses into it on :active */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
  border: 2px solid var(--border);
  box-shadow: 4px 4px 0 var(--border);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:hover { background: var(--accent); color: var(--accent-ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--border); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #ffffff; }
/* Not a link yet: no hover, no press */
.btn.soon, .btn.soon:hover { background: var(--muted); border-color: var(--muted); color: #ffffff; cursor: default; box-shadow: none; }
.btn.soon:active { transform: none; box-shadow: none; }
.btn.dark:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* iPhone mockup: a home screen screenshot with the drawing area laid
   exactly over the Softgrid widget's own drawing area */
.studio { width: 100%; max-width: 290px; }
.phone {
  padding: 9px;
  background: var(--ink);
  border-radius: 46px;
}
.screen {
  position: relative;
  aspect-ratio: 920 / 2000;
  overflow: hidden;
  border-radius: 37px;
  container-type: inline-size;
}
.screen img { display: block; width: 100%; height: 100%; }
/* Dynamic Island: a black pill centred in the status bar, at iPhone
   proportions (about 126 x 37pt on a 393pt-wide screen, 11pt from the top) */
.island {
  position: absolute;
  top: 1.3%;
  left: 50%;
  width: 32%;
  aspect-ratio: 126 / 37;
  transform: translateX(-50%);
  background: #000000;
  border-radius: 999px;
}
/* Live clock laid over the screenshot's own "11:17" (x 128-211, y 61-87):
   a patch of the wallpaper colour with the viewer's current time on it */
.clock {
  position: absolute;
  left: 10.87%;
  top: 2.5%;
  width: 15.22%;
  height: 2.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #b7a7b6;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 4.1cqw;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.clock[hidden] { display: none; }
/* Live date on the Calendar icon, over the screenshot's own "Fri 9"
   (day x 127-157, y 228-248; date x 119-164, y 263-328). The patch copies
   the icon's white-to-light-grey fade. */
.cal {
  position: absolute;
  left: 8.48%;
  top: 11.1%;
  width: 14.02%;
  height: 5.6%;
  overflow: hidden;
  background: linear-gradient(#fefefe, #ededed);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
  white-space: nowrap;
}
.cal[hidden] { display: none; }
.cal span { position: absolute; left: 50%; transform: translate(-50%, -50%); }
.cal-day { top: 14.3%; color: #ee4245; font-size: 2.95cqw; font-weight: 600; }
.cal-date { top: 67%; color: #2b2b2b; font-size: 9.6cqw; font-weight: 400; }

/* Drawing area, as in the app: dotted canvas, accent border, nickname tag.
   Placed on the widget's drawing area in the 920 x 2000 screenshot:
   x 99-821, y 704-1461. */
.board {
  position: absolute;
  left: 10.761%;
  top: 35.2%;
  width: 78.478%;
  height: 37.85%;
  container-type: inline-size;
  background-color: var(--panel);
  border: 2px solid var(--accent);
}
/* Dotted grid matching the widget's: 7 x 8 dots */
.board::before {
  content: "";
  position: absolute;
  inset: 1.7cqw 5.6cqw;
  background-image: radial-gradient(circle, var(--border) max(0.9px, 0.35cqw), transparent max(1.3px, 0.5cqw));
  background-size: 12.6cqw 12.6cqw;
  background-repeat: space;
  pointer-events: none;
}
.board canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: none;
  touch-action: none;
}
.tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 6px;
  background: var(--accent);
  color: #ffffff;
  font-family: var(--mono);
  font-size: clamp(8px, 3.6cqw, 12px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 1px;
  pointer-events: none;
}
/* Brush circle that follows the cursor over the drawing area */
.brush {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.brush.on { opacity: 1; }

/* Clear button, as in the app: grey fill, grey border, no shadow,
   pixel backspace icon after the label */
.clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 150px;
  height: 46px;
  padding: 0;
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
  background: #e6e6e6;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: transform 0.1s ease-out;
}
/* In the bottom menu it is sized to sit beside the 34px colour squares */
.dock .clear { width: auto; height: 34px; padding: 0 10px; font-size: 10px; }
.clear svg { width: 14.4px; height: 10.8px; fill: currentColor; }
.clear:active { transform: scale(0.93); }
.clear:disabled { opacity: 0.4; cursor: default; transform: none; }
.clear:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 404: fills the first screen with the hearts and message in the centre.
   The bottom padding matches the body's top padding (room for the fixed
   menu) so the group sits at the true middle; the footer is below the fold. */
.notfound {
  min-height: calc(100vh - 98px);
  min-height: calc(100svh - 98px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px 98px;
  text-align: center;
}
.notfound h1 { margin: 24px 0 12px; }
.notfound p { margin: 0; color: var(--muted); }
.notfound .cta { margin-top: 32px; }

/* Privacy policy: kept very plain. No rules, no underlines, no bold. */
article h2 {
  margin: 32px 0 8px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
article a { text-decoration: none; }

/* Footer: brand, support and legal links, with room for the bottom menu */
.site-footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 16px 130px;
  display: grid;
  gap: 32px;
  color: var(--muted);
  font-size: 14px;
}
.site-footer h2 { margin: 0 0 12px; font-size: 11px; color: var(--ink); }
.site-footer p { margin: 0 0 8px; }
.foot-name { font-family: var(--pixel); font-size: 14px; color: var(--ink); }
/* On phones the brand block goes last, under Support and Legal */
.foot-brand { order: 1; }

/* Narrow phones: shrink the bottom menu so squares and Clear fit on screen */
@media (max-width: 389px) {
  .dock { gap: 8px; padding: 8px; }
  .dock button[data-c] { width: 28px; height: 28px; }
  .dock .clear { height: 28px; padding: 0 8px; }
}

@media (min-width: 481px) {
  h1 { font-size: 22px; }
  .panel { padding: 28px 40px; }
  .nav { font-size: 11px; }
  .nav a, .nav .soon { gap: 8px; padding: 16px 18px; }
  .cta .btn { font-size: 11px; }
}

@media (min-width: 700px) {
  .site-footer { grid-template-columns: 1fr 2fr 1fr; gap: 48px; padding: 64px 32px 130px; }
  .foot-brand { order: 0; }
}

@media (min-width: 900px) {
  .hero { grid-template-columns: auto auto; justify-content: center; gap: 56px; padding: 48px 32px 64px; }
  .hero-copy { width: 420px; }
  .studio { width: 290px; }
  .hero h1 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hearts svg { animation: none; }
  .btn, .clear, .nav, .dock { transition: none; }
  .intro .nav, .intro .dock { animation: none; }
}