/*
 * The home page, one screen (D-316): a phone on the left with the board in it, built on the app's
 * own 360 × 776 grid and scaled to fit; the words on the right. Each object on the board opens its
 * own little scene, as in the app, and so do the buttons. On a phone, the board shows without a
 * phone around it. With no script, the board simply shows.
 */

body.one {
  min-height: 100vh;
  min-height: 100dvh;
}

.one .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 0;
}
.one .top nav {
  display: none;
  gap: 20px;
  font-size: 14px;
}
.one .top nav a {
  color: var(--muted);
}

.stage {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* --- The phone -------------------------------------------------------------------------------- */

.device {
  --screen-h: min(46vh, 420px);
  /* The screen itself is 360 × 776 in proportion; the rim goes around it. */
  box-sizing: content-box;
  position: relative;
  flex: none;
  height: var(--screen-h);
  aspect-ratio: 360 / 776;
  border-radius: 18px;
  overflow: hidden;
  background: #e9e3d9;
  box-shadow:
    0 2px 4px rgba(60, 40, 20, 0.12),
    0 26px 40px -22px rgba(60, 40, 20, 0.55);
}
.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* The app's own 360 × 776 grid, scaled to the screen (--k, set by the script). */
.canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 360px;
  height: 776px;
  transform: scale(var(--k, 0.57));
  transform-origin: 0 0;
}
.scene {
  position: absolute;
  inset: 0;
  background-color: #e9e3d9;
  background-image:
    repeating-linear-gradient(0deg, var(--weave) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--weave) 0 1px, transparent 1px 3px);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.45s,
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s 0.55s;
}
.scene.on {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.45s 0.1s,
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Leaving the board: it zooms into what was tapped (--ox, --oy). Coming back: the reverse. */
.scene.board:not(.on) {
  transform: scale(2.4);
  transform-origin: var(--ox, 50%) var(--oy, 50%);
}
.scene:not(.board):not(.on) {
  transform: scale(0.92);
}
.feature-screen {
  background-color: #f1ebe1;
  background-image: radial-gradient(rgba(60, 40, 20, 0.035) 1px, transparent 1.3px);
  background-size: 5px 5px;
}

.a {
  position: absolute;
}
.obj {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.obj:focus-visible,
.back:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.label {
  position: absolute;
  font: 500 11.5px/14px var(--ui);
  color: #5e554c;
  white-space: nowrap;
}
.label.acc {
  color: var(--pacc);
}

/* --- The board's objects ----------------------------------------------------------------------- */

.names {
  left: 24px;
  top: 56px;
  width: 316px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: italic 400 27px/1 var(--display);
  color: var(--ink);
}
.names svg {
  color: var(--accent);
}
.pol {
  position: absolute;
  padding: 8px 8px 0;
  background: #fffdf8;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.2),
    0 14px 22px -10px rgba(0, 0, 0, 0.45);
}
.pol .ph {
  height: 150px;
  background: linear-gradient(170deg, #cfd9e4, #8ea3be 60%, #5f7697);
}
.pol.mine .ph {
  height: 138px;
  background: linear-gradient(165deg, #f0d9bd, #d9a77f 55%, #a86d4f);
}
.pol .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 2px 0;
}
.pol .row b {
  font: italic 400 20px/1 var(--display);
  color: var(--ink);
}
.pol .row span {
  font: 500 10px/1 var(--ui);
  color: var(--muted);
}
.pol .say {
  padding: 5px 2px 10px;
  font: 400 17px/1.1 var(--hand);
  color: var(--ink);
}
.pol.theirs {
  left: 14px;
  top: 96px;
  width: 164px;
  transform: rotate(-2deg);
}
.pol.mine {
  left: 188px;
  top: 102px;
  width: 156px;
  transform: rotate(2.5deg);
}
.pin {
  position: absolute;
  padding: 5px 5px 18px;
  background: #fffdf8;
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.45);
}
.pin i {
  display: block;
}
.pin::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -6px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e57b64, #a8392a);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.cal {
  left: 252px;
  top: 380px;
  width: 92px;
  height: 118px;
  background: var(--paper);
  box-shadow: 0 10px 18px -10px rgba(60, 40, 20, 0.5);
  text-align: center;
  transform: rotate(2deg);
}
.cal::before {
  content: '';
  display: block;
  height: 22px;
  background: #5a4636;
}
.cal b {
  display: block;
  margin-top: 10px;
  font: 400 50px/1 var(--display);
  color: var(--ink);
}
.cal span {
  font: 500 11px/1 var(--ui);
  color: var(--muted);
}
.mailbox-mini {
  left: 242px;
  top: 528px;
  width: 112px;
  height: 104px;
}
.mailbox-mini .box {
  position: absolute;
  left: 18px;
  top: 6px;
  width: 74px;
  height: 50px;
  border-radius: 25px 25px 4px 4px;
  background: linear-gradient(180deg, #c4533f, #9e3a2a);
}
.mailbox-mini .flag {
  position: absolute;
  left: 86px;
  top: 2px;
  width: 4px;
  height: 30px;
  background: #e2c27a;
}
.mailbox-mini .flag::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  width: 14px;
  height: 9px;
  background: #e2c27a;
}
.mailbox-mini .post {
  position: absolute;
  left: 50px;
  top: 54px;
  width: 9px;
  height: 30px;
  background: #7a5f4b;
}
.doodle-mini {
  left: 16px;
  top: 606px;
  width: 128px;
  height: 150px;
}
.doodle-mini .sheet {
  position: absolute;
  left: 6px;
  top: 4px;
  width: 114px;
  height: 126px;
  background: var(--paper);
  transform: rotate(-3deg);
  box-shadow: 0 10px 16px -10px rgba(60, 40, 20, 0.5);
}
.book-mini {
  left: 150px;
  top: 606px;
  width: 84px;
  height: 146px;
}
.book-mini .cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 84px;
  height: 118px;
  border-radius: 3px 6px 6px 3px;
  background: linear-gradient(90deg, #4a392c, #5a4636 14%);
  box-shadow: 0 12px 18px -10px rgba(40, 20, 10, 0.6);
}
.book-mini .cover span {
  position: absolute;
  left: 16px;
  top: 20px;
  font: italic 400 15px/1.1 var(--display);
  color: #ebddbf;
}
.voice-mini {
  left: 250px;
  top: 636px;
  width: 96px;
  height: 52px;
}
.voice-mini .rec {
  position: absolute;
  left: 34px;
  top: 2px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #211e1b 0 2px, #2a2623 2px 4px);
}
.voice-mini .rec::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e9c9b9;
}
.voice-mini .slv {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  background: var(--paper2);
  box-shadow: 0 8px 12px -8px rgba(60, 40, 20, 0.5);
}
.q-mini {
  left: 266px;
  top: 700px;
  width: 56px;
  height: 60px;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 8px 14px -8px rgba(60, 40, 20, 0.5);
  display: grid;
  place-items: center;
  font: italic 400 30px/1 var(--display);
  color: var(--pacc);
}

/* --- The scenes the board opens ---------------------------------------------------------------- */

.back[hidden] {
  display: none;
}
.back {
  position: absolute;
  left: 18px;
  top: 52px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--btn);
  color: var(--btn-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
}
.title {
  left: 0;
  right: 0;
  top: 60px;
  text-align: center;
  font: italic 400 24px/1 var(--display);
  color: var(--ink);
}

/* The book: a spread, and a page that turns again and again. */
.spread {
  left: 22px;
  top: 150px;
  width: 316px;
  height: 440px;
  perspective: 1400px;
}
.spread .lp,
.spread .rp,
.spread .leaf {
  position: absolute;
  top: 0;
  width: 158px;
  height: 440px;
  background: var(--paper);
  box-shadow: 0 16px 26px -14px rgba(0, 0, 0, 0.45);
}
.spread .lp {
  left: 0;
  background: linear-gradient(90deg, var(--paper2) 78%, #e3d8c4);
  border-radius: 4px 0 0 4px;
  padding: 40px 18px;
}
.spread .rp,
.spread .leaf {
  left: 158px;
  border-radius: 0 4px 4px 0;
  padding: 18px 14px;
  background: linear-gradient(90deg, #e9e0cf, var(--paper) 12%);
}
.spread .leaf {
  transform-origin: left center;
  backface-visibility: hidden;
}
.scene.on .spread .leaf {
  animation: turn 3.2s 0.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.spread .photo {
  height: 190px;
  background: linear-gradient(160deg, #e7cdb4, #c98f73);
}
.spread .photo.cool {
  background: linear-gradient(160deg, #c8d3e2, #8ea2c0);
}
.spread .cap {
  margin-top: 12px;
  font: 400 22px/1.1 var(--hand);
  color: var(--ink);
}
.spread .when {
  margin-top: 6px;
  font: 500 11px/1 var(--ui);
  color: var(--muted);
}
.spread .lp svg {
  display: block;
  margin: 26px auto 0;
}
.spread .lp p {
  margin: 0;
  font: 400 24px/1.15 var(--hand);
  color: var(--muted);
  transform: rotate(-3deg);
}

/* The letter: up out of its envelope, and open. */
.envelope {
  left: 70px;
  top: 128px;
  width: 220px;
  height: 120px;
  background: #e9dcc5;
  box-shadow: 0 10px 18px -10px rgba(60, 40, 20, 0.5);
}
.envelope::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, transparent 49.4%, rgba(60, 40, 20, 0.18) 50%, transparent 50.6%),
    linear-gradient(30deg, transparent 49.4%, rgba(60, 40, 20, 0.18) 50%, transparent 50.6%);
}
.letter-paper {
  left: 40px;
  top: 210px;
  width: 280px;
  height: 380px;
  padding: 26px 24px;
  background:
    repeating-linear-gradient(transparent 0 29px, rgba(70, 110, 160, 0.16) 29px 30px), #fbf6ec;
  /* Each line of writing sits on a ruled line. */
  background-position: 0 27px;
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.45);
  font: 400 23px/30px var(--hand);
  color: var(--ink);
  transform-origin: top center;
}
.letter-paper .first {
  display: block;
  padding-right: 52px;
}
.scene.on .letter-paper {
  animation: unfold 0.9s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.letter-paper .stamp {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 44px;
  height: 52px;
  background: #b9463a;
  outline: 3px dashed #fbf6ec;
  outline-offset: -5px;
  display: grid;
  place-items: center;
  color: #fbf6ec;
}
.letter-paper .sign {
  text-align: right;
  margin-top: 6px;
}

/* The record: spinning, with its arm down and the day running out around the star. */
.big-rec {
  left: 50px;
  top: 170px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #211e1b 0 2px, #2a2623 2px 4px);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.6);
}
.big-rec::after {
  content: '';
  position: absolute;
  left: 92px;
  top: 92px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, #2a2623 0 4px, #e9c9b9 5px);
}
.scene.on .big-rec {
  animation: spin 3.6s linear infinite;
}
.arm {
  left: 270px;
  top: 150px;
  width: 8px;
  height: 160px;
  background: linear-gradient(90deg, #b8b2a8, #e2ddd3);
  border-radius: 4px;
  transform-origin: 4px 6px;
  transform: rotate(24deg);
}
.arm::before {
  content: '';
  position: absolute;
  left: -9px;
  top: -9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #8c8a85;
}
.rec-words {
  left: 0;
  right: 0;
  top: 470px;
  text-align: center;
}
.rec-words .t {
  font: 500 15px/1 var(--ui);
  color: var(--muted);
}
.rec-words .f {
  margin-top: 14px;
  font: 500 13px/1 var(--ui);
  color: var(--muted);
}
.rec-words .bar {
  width: 220px;
  height: 3px;
  margin: 22px auto 0;
  background: rgba(43, 39, 35, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
.rec-words .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}
.scene.on .rec-words .bar i {
  animation: fill 12s linear infinite;
}

/* The doodle: drawing itself, then your person's turn. */
.big-doodle {
  left: 34px;
  top: 140px;
  width: 292px;
  height: 400px;
  background: var(--paper);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.45);
  transform: rotate(-1.5deg);
}
.big-doodle path {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.scene.on .big-doodle path {
  animation: draw 2.2s 0.4s ease-in-out forwards;
}
.scene.on .big-doodle path.second {
  animation-delay: 2.3s;
}
.turn {
  left: 0;
  right: 0;
  top: 580px;
  text-align: center;
}
.turn span {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font: 600 14px/1 var(--ui);
}
.scene.on .turn span {
  animation: rise-in 0.5s 4.4s both;
}

/* The question: your half, then theirs comes into focus. */
.q-card {
  left: 30px;
  top: 160px;
  width: 300px;
  padding: 26px 22px 24px;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.45);
}
.q-card .ask {
  font: italic 400 27px/1.15 var(--display);
  color: var(--ink);
}
.q-card .half {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--paper2);
  font: 400 22px/1.15 var(--hand);
  color: var(--ink);
}
.q-card .half small {
  display: block;
  margin-bottom: 6px;
  font: 600 10.5px/1 var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.q-card .theirs .w {
  display: inline-block;
}
.scene.on .q-card .theirs .w {
  animation: focus 1s 1.2s both;
}

/* --- The words beside it --------------------------------------------------------------------- */

.copy {
  width: 100%;
  max-width: 460px;
  text-align: center;
}
.copy h1 {
  font-size: 30px;
}
.feature {
  margin-top: 14px;
  min-height: 116px;
}
.feature .hand {
  margin: 0;
  color: var(--pacc);
  font-size: 20px;
}
.feature h2 {
  margin-top: 2px;
  font-size: 23px;
}
.feature p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15.5px;
}
.feature.fresh > * {
  animation: rise-in 0.45s both;
}
.feature.fresh > :nth-child(2) {
  animation-delay: 0.05s;
}
.feature.fresh > :nth-child(3) {
  animation-delay: 0.1s;
}

.tabs {
  display: flex;
  gap: 7px;
  margin: 14px -16px 0;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs button {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--line);
  background: transparent;
  color: var(--ink);
  font: 600 13.5px/1 var(--ui);
  cursor: pointer;
}
.tabs button[aria-selected='true'] {
  background: var(--btn);
  color: var(--btn-ink);
  box-shadow: none;
}
html:not(.js) .tabs {
  display: none;
}
.copy .soon {
  margin-top: 14px;
}
.free {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

.one .foot {
  padding: 8px 16px 14px;
  font-size: 12.5px;
}

/* --- A computer: the phone on the left, everything on one screen ----------------------------- */

@media (min-width: 820px) and (min-height: 560px) {
  body.one {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .one .top nav {
    display: flex;
  }
  .one .foot nav {
    display: none;
  }
  .stage {
    flex-direction: row;
    justify-content: center;
    gap: clamp(40px, 7vw, 110px);
    padding: 0 40px;
    min-height: 0;
  }
  /* A phone around the screen: dark rim, rounded like an iPhone. */
  .device {
    --screen-h: min(78dvh, 760px);
    border-radius: 46px;
    border: 11px solid #1d1b19;
    box-shadow:
      0 0 0 1.5px #3a3632,
      0 40px 70px -30px rgba(40, 25, 10, 0.6);
  }
  .device::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 10px;
    width: 30%;
    height: 22px;
    margin-left: -15%;
    border-radius: 12px;
    background: #1d1b19;
    z-index: 9;
  }
  .copy {
    text-align: left;
    max-width: 440px;
  }
  .copy h1 {
    font-size: clamp(36px, 4vw, 50px);
  }
  .feature {
    margin-top: 26px;
    min-height: 140px;
  }
  .feature h2 {
    font-size: 30px;
  }
  .feature p {
    font-size: 17px;
  }
  .tabs {
    flex-wrap: wrap;
    margin: 20px 0 0;
    padding: 0;
    overflow: visible;
  }
  .copy .soon {
    margin-top: 26px;
  }
  .one .foot {
    position: fixed;
    right: 24px;
    bottom: 12px;
    padding: 0;
  }
}

@keyframes turn {
  0%,
  20% {
    transform: rotateY(0deg);
  }
  55%,
  100% {
    transform: rotateY(-180deg);
  }
}
@keyframes unfold {
  from {
    transform: translateY(-70px) scaleY(0.2);
    opacity: 0;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fill {
  to {
    width: 100%;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes focus {
  from {
    filter: blur(7px);
    opacity: 0.45;
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene,
  .scene.on {
    transition: none;
  }
  .scene.board:not(.on),
  .scene:not(.board):not(.on) {
    transform: none;
  }
  .scene.on .spread .leaf,
  .scene.on .big-rec,
  .scene.on .rec-words .bar i,
  .feature.fresh > *,
  .scene.on .letter-paper,
  .scene.on .turn span,
  .scene.on .q-card .theirs .w {
    animation: none;
  }
  .big-doodle path {
    stroke-dashoffset: 0;
  }
  .scene.on .big-doodle path {
    animation: none;
  }
}