@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-latin.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(fonts/nunito-latin.woff2) format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(fonts/newsreader-latin-opsz-normal.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Gaegu"; src: url(fonts/gaegu-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --u: 1;
  --ink: #0F151C;
  --coral: #F7685A;
  --coral-deep: #E4503F;
  --paper: #FEFEF9;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --hand: "Gaegu", "Segoe Print", "Bradley Hand", cursive;
}

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; background-color: var(--paper); color: var(--ink); overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
body { -webkit-user-select: none; user-select: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ---------- copy ---------- */
.copy {
  position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  top: calc(env(safe-area-inset-top, 0px) + 46px * var(--u));
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 calc(24px * var(--u));
}
.label { font: 400 calc(18px * var(--u)) / 1.1 var(--hand); letter-spacing: .16em; min-height: calc(20px * var(--u)); }
.dash {
  display: block; width: calc(36px * var(--u)); height: calc(4px * var(--u)); margin: calc(9px * var(--u)) 0 calc(22px * var(--u));
  border-radius: 4px; background: var(--coral); rotate: -1.2deg; transform-origin: left center; transform: scaleX(0);
}
.dash.on { transform: scaleX(1); transition: transform .6s cubic-bezier(.2, .9, .25, 1); }
h1 {
  font: 500 calc(46px * var(--u)) / 1.02 var(--serif); letter-spacing: -.022em; max-width: calc(330px * var(--u));
  text-wrap: balance; min-height: calc(94px * var(--u));
}
h1 .w, .sub .w { display: inline-block; white-space: pre; will-change: transform, opacity, filter; }
.sub { font: 400 calc(21px * var(--u)) / 1.25 var(--hand); letter-spacing: .02em; margin-top: calc(12px * var(--u)); max-width: calc(320px * var(--u)); text-wrap: balance; min-height: calc(26px * var(--u)); }

.hint, .cta {
  position: absolute; left: 0; right: 0; z-index: 2; text-align: center;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 40px * var(--u));
  font: 400 calc(20px * var(--u)) / 1.2 var(--hand); letter-spacing: .1em;
}
.hint { pointer-events: none; }
.cta { margin: 0 auto; width: max-content; padding: calc(10px * var(--u)) calc(18px * var(--u)); bottom: calc(env(safe-area-inset-bottom, 0px) + 30px * var(--u)); letter-spacing: .08em; }
.cta span { background: linear-gradient(var(--coral), var(--coral)) left bottom / 100% calc(3px * var(--u)) no-repeat; padding-bottom: calc(5px * var(--u)); transition: background-size .3s cubic-bezier(.2, .9, .25, 1); }
.cta:hover span { background-size: 100% calc(5px * var(--u)); }
.cta:active { transform: scale(.96); }

/* ---------- belly button hit area (the canvas draws it, this makes it real) ---------- */
#act { position: absolute; left: 0; top: 0; z-index: 3; border-radius: 50%; background: transparent; will-change: transform; touch-action: manipulation; }
#act { cursor: pointer; }
#act[aria-disabled="true"] { cursor: default; }
#act:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 12px; }

/* faint paper tooth over everything */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: multiply; opacity: .2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .5  0 0 0 0 .46  0 0 0 -2.1 1.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hint { transition: opacity .3s; }
.has-cta .hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px * var(--u)); }

@media (prefers-reduced-motion: reduce) {
  .dash.on { transition-duration: .01s; }
}

/* Little Good daily ritual: one character and one primary action. */
.brand { font: 500 calc(22px * var(--u))/1.2 var(--serif); margin-bottom: calc(55px * var(--u)); }
.copy { top: calc(env(safe-area-inset-top, 0px) + 32px * var(--u)); }
.label, .dash { display: none; }
h1 { font-size: calc(38px * var(--u)); min-height: 0; max-width: calc(350px * var(--u)); }
.sub { min-height: 0; font-size: calc(19px * var(--u)); }
.hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 94px * var(--u)); letter-spacing: .035em; }
.cta { bottom: calc(env(safe-area-inset-bottom, 0px) + 68px * var(--u)); letter-spacing: .035em; }
.has-cta .hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 142px * var(--u)); }
.primary { background: var(--coral); border-radius: 999px; width: min(280px, 78vw); min-height: 44px; padding: 12px 24px; font: 400 calc(22px * var(--u))/1.2 var(--hand); }
.primary span { background: none; padding: 0; }
.listen { position: absolute; z-index: 3; bottom: calc(env(safe-area-inset-bottom, 0px) + 110px * var(--u)); left: 50%; transform: translateX(-50%); padding: 8px 16px; min-height: 44px; white-space: nowrap; font: 400 calc(19px * var(--u))/1.2 var(--hand); }
body[data-phase='ready'] .hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 168px * var(--u)); }
.preview-note { position: fixed; z-index: 3; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); left: 0; right: 0; text-align: center; color: #8d817b; font: 400 12px/1.4 system-ui, sans-serif; padding: 0 12px; }
.preview-note button { font: 400 16px/1.2 var(--hand); text-decoration: underline; text-underline-offset: 3px; padding: 4px 12px; min-height: 32px; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
button:disabled { cursor: default; }
@media (max-height: 620px) {
  .brand { margin-bottom: calc(24px * var(--u)); }
  .copy { top: calc(env(safe-area-inset-top, 0px) + 20px * var(--u)); }
  h1 { font-size: calc(34px * var(--u)); }
  body[data-phase='ready'] .hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 164px * var(--u)); }
}

.copy .brand { display: block; letter-spacing: 0; }
.receive-actions .primary { width: min(200px, 52vw); }

.cta { bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
.has-cta .hint { bottom: calc(env(safe-area-inset-bottom, 0px) + max(124px, 142px * var(--u))); }
body[data-phase='ready'] .hint { display: none; }
.listen { bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); }

.sound-toggle { position: fixed; z-index: 6; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 8px; padding: 8px; min-height: 44px; font: 400 14px/1.2 var(--hand); color: #8d817b; }
.sound-toggle:disabled { opacity: .4; }

:root { --serif: "Bricolage", sans-serif; --hand: "Nunito", sans-serif; --accent-ink: #B74939; }

.copy .brand { color: var(--accent-ink); font-weight: 750; letter-spacing: -.045em; font-size: calc(27px * var(--u)); }
h1 { color: var(--accent-ink); font-weight: 650; font-variation-settings: "opsz" 36, "wdth" 100; letter-spacing: -.045em; line-height: 1.08; }
.sub { font-weight: 550; color: #62514B; line-height: 1.4; font-size: calc(17px * var(--u)); }
.hint, .cta, .listen { font-weight: 650; letter-spacing: -.01em; font-size: calc(17px * var(--u)); }
.primary { font-weight: 750; font-size: calc(19px * var(--u)); color: #48281F; }
.receive-actions #done { color: #222C61; }
.receive-actions #replay { font-family: var(--hand); font-size: calc(17px * var(--u)); font-weight: 650; }
.sound-toggle { font-family: var(--hand); font-size: 11px; font-weight: 650; }
.preview-note button { font-family: var(--hand); font-size: 13px; font-weight: 650; }

.sound-toggle { width: 44px; height: 44px; padding: 10px; color: var(--accent-ink); border-radius: 50%; }
.sound-toggle svg { width: 24px; height: 24px; display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .speaker-body { fill: currentColor; stroke-width: 1; }
.sound-toggle .sound-wave { transform-origin: 18px 16px; transition: opacity .18s, transform .22s; }
.sound-toggle .sound-slash { stroke: var(--paper); stroke-width: 4.8; stroke-dasharray: 34; stroke-dashoffset: 34; transition: stroke-dashoffset .22s; filter: drop-shadow(1.8px 0 0 var(--accent-ink)); }
.sound-toggle[data-sound='off'] .sound-wave { opacity: 0; transform: scaleX(.3); }
.sound-toggle[data-sound='off'] .sound-slash { stroke-dashoffset: 0; }
.sound-toggle:hover { background: color-mix(in srgb, var(--accent-ink) 6%, transparent); }
body[data-phase='asleep'] .sound-toggle { opacity: .65; }
@media (prefers-reduced-motion: reduce) { .sound-toggle path { transition: none; } }

/* Receiving lives in the same shell. Only the character and its actions are blue. */
#blue { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#hit { position: absolute; z-index: 3; min-width: 44px; min-height: 44px; border-radius: 50%; background: transparent; }
#hit:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.receive-actions { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); display: flex; justify-content: center; align-items: center; gap: 22px; }
.receive-actions button { min-height: 44px; }
.receive-actions #done { background: #7F8CE8; }
.receive-actions #replay { text-decoration: underline; text-underline-offset: 5px; padding: 8px; }
.receive-page .hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 94px * var(--u)); }
.receive-page.has-actions .hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 142px * var(--u)); }