/* Home: a playable day with Yunka, then what Paka is for. Behavior in home.js. */

.home {
  --ink3: #a39ca8;
  --teal: #00b48e;
  --mid: #e48a14;
  --tint-easy: #e6f2e1;
  background: var(--floor);
  /* App colors from outside PakaInk (site_colors_test.dart pins each) */
  --room-floor: #ffecd3; /* the Free Spirit floor */
  --garden-green: #99d92b; /* Sunnyglade Gardens */
  --lights-off: rgba(0, 0, 0, 0.5); /* LightsOffShade */
  /* Not the app's: the phone drawn around the screen, and the crossed-out dashboard */
  --phone-body: #1f1b23;
  --phone-edge: #3b3540;
  --phone-island: #000;
  --sys-paper: #f3f1f4;
  --sys-text: #555;
  --sys-strong: #333;
  --sys-edge: #d9d4dc;
  --sys-track: #e4e0e7;
  --sys-fill: #9b8fb0;
  --sys-bars: #c7bfd2;
}
.home [hidden] { display: none !important; }
.home section { padding: clamp(52px, 7vw, 88px) 0; }
.home .wrap { width: min(1160px, 100% - 2 * var(--gutter)); margin: 0 auto; }
.home .band { background: var(--paper); border-block: 2px solid var(--ink); }
:where(.home) :is(h2, h3) { margin: 0; }
.home .title { margin-bottom: 14px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; }
.home .lead { max-width: 36em; font-size: 18px; }
.home .sec-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.home .sec-head .lead { margin: 0 auto; }
.home .kicker { margin: 0 0 10px; font: 700 13px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.home .muted { color: var(--ink2); }
.home .badges { gap: 10px; margin-top: 0; }
.home .badges img { height: 48px; }

/* Ink & Paper pieces */

.home .paper { background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; }
.home .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font: 700 13.5px var(--body);
  color: var(--ink);
  white-space: nowrap;
}
.home .pill.soon { min-height: 22px; padding: 0 8px; background: var(--yellow); color: var(--ink); font-size: 11.5px; }
.home .chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 6px; font: 700 12.5px var(--body); }
.home .chip.when { background: var(--tint-blue); color: var(--ink); }
.home .chip.easy { color: var(--leaf); }
.home .chip.mid { color: var(--mid); }
.home .chip.hard { color: var(--coral); }
.home .chip.plain { color: var(--ink2); }
.home .bubble {
  position: relative;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  font: 700 15px/1.35 var(--voice);
}
.home .bubble::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -9px;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  transform: rotate(45deg);
}
.home .btn-small { min-height: 42px; padding: 0 16px; font-size: 16px; }

/* Tasks, as in the app */

.home .task {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 10px 10px 14px;
  border: 1.5px solid var(--hairline);
  border-radius: 16px;
  background: var(--paper);
  transition: opacity 0.3s;
}
.home .task .t { flex: 1; min-width: 0; }
.home .task .t b { display: block; font: 600 15.5px/1.35 var(--body); }
.home .task .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.home .check {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 0 var(--ink);
  font-size: 20px;
  color: transparent;
  cursor: pointer;
}
.home span.check { cursor: default; }
.home button.check:hover { background: var(--tint-easy); }
.home .task.done { opacity: 0.55; }
.home .task.done b { text-decoration: line-through; }
.home .task.done .check, .home .who-check.done .check { background: var(--teal); color: #fff; box-shadow: none; transform: translateY(2px); }
.home .price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 2px 4px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--tint-yellow);
  font: 700 13.5px var(--body);
}
.home .price img { width: 18px; }
.home .notif {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 14px rgba(20, 14, 30, 0.12);
  font-size: 12.5px;
  line-height: 1.3;
}
.home .notif img { width: 28px; height: 28px; padding: 2px; border-radius: 8px; background: var(--yellow); }
.home .notif b { display: block; font-size: 12px; }

/* A Paka's room: back wall, the Paka, then the furniture in front */

.home .room { position: relative; aspect-ratio: 1080 / 1002; background: url("/lab/day/img/home/room-day.webp?v=67d8c30a") center / cover; }
.home .room .front { position: absolute; inset: 0; z-index: 2; background: url("/lab/day/img/home/room-front.webp?v=8d777db6") center / cover; pointer-events: none; }
.home .room .paka { position: absolute; left: 29%; bottom: 8.6%; z-index: 1; width: 42%; }
.home .paka, .home .mini-paka { aspect-ratio: 2 / 3; background-repeat: no-repeat; }
/* Before the script runs: the first idle frame */
.home .paka.yunka, .home .mini-paka.yunka { background-image: url("/lab/day/img/home/yunka-default.webp?v=a3efcbab"); background-size: 200% 100%; }
.home .paka.caraka, .home .mini-paka.caraka { background-image: url("/lab/day/img/home/caraka-default.webp?v=ccfb152b"); background-size: 200% 100%; }
/* The day's Yunka has no still: the page opens with her asleep in the dark, so she shows once that clip has loaded */
.home .day .paka.yunka { background-image: none; }
.home .mini-paka { width: 120px; }
.home .stuck { position: absolute; z-index: 1; width: 64px; transform: rotate(-8deg); filter: drop-shadow(0 2px 0 rgba(42, 34, 48, 0.25)); }

/* The day: the intro and the hours scroll by, the little screen stays */

.home .day { padding: 16px 0 40px; }
.home .day .wrap { display: grid; grid-template-columns: 1fr minmax(320px, 420px); gap: 56px; align-items: start; }
.home .intro { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--header-h) - 60px); }
.home .intro .display { margin-bottom: 18px; font-size: clamp(40px, 5vw, 64px); line-height: 1.06; }
.home .intro .lead { margin-bottom: 26px; font-size: 19px; }
.home .swash { position: relative; z-index: 0; white-space: nowrap; }
.home .swash::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.08em;
  right: -0.08em;
  bottom: 0.06em;
  height: 0.36em;
  border-radius: 0.2em;
  background: var(--yellow);
  transform: rotate(-1.5deg);
}
.home .proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.home .proof .star { color: var(--mid); }
.home .try { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font: 700 16px var(--voice); color: var(--ink2); }
/* Each hour's words pin near the top, and the next hour's push them away. The screen moves only while they're still. */
.home .hours { overflow: clip; }
.home .day { --cap-top: calc(var(--header-h) + 56px); --cap-h: 200px; --still: 60vh; }
.home .cap { position: sticky; top: var(--cap-top); max-width: 400px; margin-left: auto; }
.home .cap .time { margin: 0 0 8px; font: 700 15px var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); }
.home .cap h2 { margin-bottom: 12px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; }
.home .cap p { max-width: 30em; margin: 0; font-size: 18px; color: var(--ink2); }
/* Each hour's stretch: the words' trip up from the bottom of the screen, then --still of scroll for the screen to play */
.home .day .stretch { display: block; height: calc(var(--still) + 100vh - var(--cap-top) - var(--cap-h)); }
.home .hour.first { --still: 45vh; --cap-h: 90px; }
.home .hour.walk { --still: 110vh; }
.home .hour.long { --still: 100vh; }
/* After bedtime the words leave first, then the screen */
.home .day-end { display: block; height: calc(100vh - 300px); }
.home .pin { position: sticky; top: calc(var(--header-h) + 16px); }
.home .icons { position: absolute; width: 0; height: 0; }

/* The little app screen: Home as the app draws it. Sizes are the app's points, 390 across (--u). */

@font-face { font-family: "Chewy"; src: url("/lab/day/fonts/Chewy-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Gloria Hallelujah"; src: url("/lab/day/fonts/GloriaHallelujah-Regular.woff2") format("woff2"); font-display: swap; }

.home .phone {
  width: min(372px, calc((100vh - var(--header-h) - 44px) * 390 / 844 + 20px));
  margin: 0 auto;
  padding: 10px;
  border-radius: 58px;
  background: var(--phone-body);
  box-shadow: inset 0 0 0 2px var(--phone-edge), 0 24px 48px rgba(20, 14, 30, 0.28);
}
.home .screen {
  --u: calc(100cqw / 390);
  --ground: var(--room-floor); /* the floor's colour; Sunnyglade's green while away */
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  aspect-ratio: 390 / 844;
  border-radius: 48px;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  transition: background-color 0.5s;
}
.home .screen.away { --ground: var(--garden-green); }
.home .screen svg { fill: currentColor; }

.home .statusbar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; height: calc(54 * var(--u)); padding: 0 calc(30 * var(--u)) 0 calc(44 * var(--u)); pointer-events: none; }
.home .statusbar b { font: 600 calc(17 * var(--u)) var(--body); letter-spacing: -0.01em; }
.home .statusbar .island { position: absolute; top: calc(11 * var(--u)); left: 50%; width: calc(124 * var(--u)); height: calc(36 * var(--u)); border-radius: 99px; background: var(--phone-island); transform: translateX(-50%); }
.home .statusbar .sys { display: flex; gap: calc(6 * var(--u)); align-items: center; margin-left: auto; }
.home .statusbar .sys svg { height: calc(12 * var(--u)); width: auto; }
.home .screen.dark .statusbar, .home .screen.away .statusbar { color: var(--ink); }

/* Home: the room runs up under the status bar */
.home .home-view { display: flex; flex-direction: column; height: 100%; }
/* The room's top is plain wall: tucked under the status bar so all three tasks fit, even with Start! showing */
.home .day .room { margin-top: calc(-64 * var(--u)); }
.home .screen .room { flex: none; overflow: hidden; background: none; }
.home .screen .room .front { background: none; }
.home .room .wall, .home .room .front { position: absolute; inset: 0; width: 100%; height: 100%; }
.home .room .front { z-index: 2; pointer-events: none; }
.home .room .night { opacity: 0; transition: opacity 0.6s; }
.home .screen.night .room .night { opacity: 1; }
.home .room .paka, .home .room .front { transition: opacity 0.4s; }
.home .room .paka { z-index: 1; }
/* Lights out dims the whole screen */
.home .shade { position: absolute; inset: 0; z-index: 9; background: var(--lights-off); opacity: 0; transition: opacity 1.2s; pointer-events: none; }
.home .screen.lights-off .shade { opacity: 1; }
/* Finishing an adventure fades to black and back, as the app does (FadeOverlay); the scroll sets --black */
.home .screen::after { content: ""; position: absolute; inset: 0; z-index: 12; background: #000; opacity: var(--black, 0); pointer-events: none; }
/* The day follows the scroll, so what it moves has no transitions of its own */
.home .day :is(.shade, .garden, .room .night, .room .paka, .room .front, .reminder, .reveal, .polaroid, .adv-bar .track i) { transition: none; }
.home .day .card { transition: background-color 0.2s, border-color 0.2s; }

.home .koin-pill {
  position: absolute;
  top: calc(124 * var(--u));
  right: calc(12 * var(--u));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(11 * var(--u)) 0 calc(2 * var(--u));
  border: 2px solid var(--ink);
  border-radius: calc(22 * var(--u));
  background: rgba(255, 253, 248, 0.92);
  font: 800 calc(18 * var(--u)) var(--body);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(calc(-8 * var(--u)));
  transition: 0.3s;
}
.home .koin-pill.on { opacity: 1; transform: none; }
.home .koin-pill img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.home .koin-pill .plus { position: absolute; top: calc(100% + 4 * var(--u)); right: calc(4 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--teal); color: #fff; font: 800 calc(12.5 * var(--u)) var(--body); opacity: 0; transition: opacity 0.2s; }
.home .koin-pill.gain .plus { opacity: 1; }

/* Away: Sunnyglade Gardens scrolls by behind Yunka and her buddy */
.home .garden { position: absolute; inset: 0; z-index: 1; background: var(--garden-green); opacity: 0; transition: opacity 0.6s; }
.home .screen.away .garden { opacity: 1; }
.home .screen.away .room .paka, .home .screen.away .room .front { opacity: 0; }
/* The walk follows the page's scroll: --w is how far they've come, each layer at the app's speed */
.home .garden i { position: absolute; inset: 0; background-repeat: repeat-x; background-size: auto 100%; }
.home .garden .far { background-position-x: calc(var(--w, 0) * -0.25cqw); opacity: 0.9; }
.home .garden .mid { background-position-x: calc(var(--w, 0) * -0.5cqw); }
.home .garden .near { background-position-x: calc(var(--w, 0) * -1.1cqw); }
.home .walker { position: absolute; bottom: 13.5%; left: 47%; width: 42%; aspect-ratio: 2 / 3; background-repeat: no-repeat; }
.home .walker.buddy { left: 11%; }

/* The row under the room: the hint bulb and the adventure card */
.home .panel { flex: 1; min-height: 0; }
.home .adv-row { display: flex; align-items: center; padding: calc(8 * var(--u)) calc(16 * var(--u)); }
.home .bulb { flex: none; width: calc(48 * var(--u)); height: calc(48 * var(--u)); margin-right: calc(8 * var(--u)); }
.home .screen.away .bulb { display: none; }
.home .adv-card { flex: 1; min-width: 0; padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); border: 1.5px solid var(--ink2); border-radius: calc(16 * var(--u)); background: var(--paper); }
.home .counting { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.home .counting .star { flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); fill: var(--yellow); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.home .adv-main { flex: 1; min-width: 0; }
.home .adv-title { display: block; margin-bottom: calc(7 * var(--u)); font: 700 calc(16 * var(--u)) var(--voice); }
.home .adv-bar { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.home .adv-bar .track { flex: 1; overflow: hidden; height: calc(12 * var(--u)); border: 1.5px solid var(--ink); border-radius: 99px; background: #efe8e0; }
.home .adv-bar .track i { display: block; width: 0; height: 100%; background: var(--wall); transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.home .adv-bar b { font: 700 calc(12.5 * var(--u)) var(--body); font-variant-numeric: tabular-nums; }
.home .ready-row, .home .trip, .home .finish { display: none; }
.home .adv-card.ready .ready-row { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
.home .faces { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.home .faces img, .home .trail .me { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); object-fit: cover; }
.home .faces em { font: 400 calc(18 * var(--u)) var(--body); color: var(--ink2); }
.home .start, .home .adv-card.arrived .finish {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border: 2px solid var(--ink);
  border-radius: calc(14 * var(--u));
  background: var(--yellow);
  box-shadow: 0 calc(3 * var(--u)) 0 var(--ink);
  font: 700 calc(16 * var(--u)) var(--body);
}
.home .start svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.home .adv-card.away .counting { display: none; }
.home .adv-card.away .trip { display: block; }
.home .away-top { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.home .away-top b { font: 700 calc(16 * var(--u)) var(--voice); }
.home .away-top span { font: 600 calc(12.5 * var(--u)) var(--body); color: var(--ink2); font-variant-numeric: tabular-nums; }
.home .trail { position: relative; display: flex; align-items: center; height: calc(38 * var(--u)); }
.home .trail .stop { flex: none; display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.home .trail .stop svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.home .trail .flag.here { background: var(--sunny); }
.home .dashes { position: relative; flex: 1; height: calc(3 * var(--u)); margin: 0 calc(4 * var(--u)); background: repeating-linear-gradient(90deg, var(--ink3) 0 calc(4 * var(--u)), transparent 0 calc(11 * var(--u))); }
.home .dashes i { position: absolute; inset: 0 auto 0 0; width: 0; background: repeating-linear-gradient(90deg, var(--ink) 0 calc(4 * var(--u)), transparent 0 calc(11 * var(--u))); }
.home .trail .me { position: absolute; top: calc(2 * var(--u)); left: calc(36 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.home .adv-card.arrived .finish { display: flex; margin-top: calc(10 * var(--u)); }
.home .adv-card.arrived .away-top span { display: none; }

/* Tasks */
.home .tasks-head { display: flex; align-items: center; gap: calc(4 * var(--u)); min-height: calc(44 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); }
.home .tasks-head > b { margin-right: auto; font: 700 calc(18 * var(--u)) var(--voice); }
.home .sort { display: flex; align-items: center; gap: calc(3 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border: 1.5px solid var(--ink); border-radius: 99px; background: var(--paper); box-shadow: 0 calc(2 * var(--u)) 0 var(--ink); font: 700 calc(13.5 * var(--u)) var(--body); }
.home .sort svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.home .add { display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 0 calc(2 * var(--u)) 0 var(--ink); }
.home .add svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.home .list { padding: 0 calc(16 * var(--u)); }
.home .card {
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: calc(8 * var(--u));
  border: 1.5px solid var(--ink2);
  border-radius: calc(16 * var(--u));
  background: var(--paper);
  transition: background-color 0.2s, border-color 0.2s, max-height 0.35s 0.45s, margin 0.35s 0.45s, opacity 0.3s 0.45s;
  max-height: calc(120 * var(--u));
}
.home .card .handle { flex: none; display: grid; place-items: center; width: calc(32 * var(--u)); color: var(--ink3); }
.home .card .handle svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.home .card .t { flex: 1; min-width: 0; padding: calc(16 * var(--u)) 0; }
.home .card .t b { display: block; font: 600 calc(16 * var(--u)) / 1.25 var(--body); }
.home .card .meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: calc(6 * var(--u)); font: 600 calc(12.5 * var(--u)) var(--body); color: var(--ink2); }
.home .card .meta > * + *::before { content: "•"; margin: 0 calc(6 * var(--u)); font-size: calc(12 * var(--u)); color: var(--ink3); }
.home .card .when { padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(11 * var(--u)); background: var(--tint-blue); color: var(--ink); font-size: calc(12 * var(--u)); font-weight: 800; }
.home .card .when.later { font-weight: 600; }
.home .card .meta > .when + *::before { margin-left: calc(6 * var(--u)); }
.home .card .easy { color: var(--leaf); font-weight: 700; } .home .card .mid { color: var(--mid); font-weight: 700; } .home .card .hard { color: var(--coral); font-weight: 700; }
.home .card .meta svg { display: inline-block; width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-right: calc(2 * var(--u)); vertical-align: calc(-2 * var(--u)); }
.home .card .tick {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  margin: 0 calc(14 * var(--u));
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 calc(2 * var(--u)) 0 var(--ink);
  color: #bdb6c2;
}
.home .card .tick svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.home .card.done { border-color: rgba(0, 180, 142, 0.65); background: color-mix(in srgb, var(--teal) 8%, var(--paper)); }
.home .card.done .t b { color: var(--ink2); text-decoration: line-through; }
.home .card.done .tick { border-color: var(--teal); background: var(--teal); box-shadow: none; color: #fff; transform: translateY(calc(2 * var(--u))); }

/* A reminder, as the app shows them */
.home .reminder {
  position: absolute;
  top: calc(56 * var(--u));
  left: calc(10 * var(--u));
  right: calc(10 * var(--u));
  z-index: 11;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border: 2px solid var(--ink);
  border-radius: calc(18 * var(--u));
  background: var(--paper);
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(20, 14, 30, 0.18);
  opacity: 0;
  transform: translateY(-130%);
  transition: 0.5s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.home .reminder.on { opacity: 1; transform: none; }
.home .reminder img { flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(10 * var(--u)); }
.home .reminder div { flex: 1; min-width: 0; }
.home .reminder b { display: block; font: 700 calc(16 * var(--u)) var(--body); }
.home .reminder span { font: 400 calc(15 * var(--u)) var(--body); color: var(--ink2); }
.home .reminder small { align-self: flex-start; font: 400 calc(12 * var(--u)) var(--body); color: var(--ink3); }

/* New photo! */
.home .reveal { position: absolute; inset: 0; z-index: 11; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u)); background: rgba(42, 34, 48, 0.6); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.home .reveal.on { opacity: 1; }
.home .reveal .new { font: 400 calc(34 * var(--u)) "Chewy", var(--voice); color: var(--paper); letter-spacing: 0.01em; }
.home .polaroid {
  width: 82%;
  margin: 0;
  padding: 5.5% 5.5% 0;
  border: 2px solid var(--ink);
  border-radius: calc(6 * var(--u));
  background: #fff;
  transform: rotate(-2deg) scale(0.86);
  transition: transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.home .reveal.on .polaroid { transform: rotate(-2deg); }
.home .polaroid img { width: 100%; height: auto; aspect-ratio: 1; border-radius: calc(4 * var(--u)); }
.home .polaroid figcaption { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: calc(8 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)); }
.home .polaroid small { grid-column: 1 / -1; font: 700 calc(9 * var(--u)) var(--body); letter-spacing: 0.14em; text-align: center; text-transform: uppercase; color: var(--ink2); }
.home .polaroid span { font: 400 calc(19 * var(--u)) "Gloria Hallelujah", var(--voice); text-align: center; }
.home .polaroid em { font: 400 calc(15 * var(--u)) "Gloria Hallelujah", var(--voice); font-style: normal; }

.home .home-bar { position: absolute; bottom: calc(8 * var(--u)); left: 50%; z-index: 10; width: calc(134 * var(--u)); height: calc(5 * var(--u)); border-radius: 99px; background: var(--ink); transform: translateX(-50%); }

@media (max-width: 860px) {
  /* Phones: headline and buttons, then the screen pinned at the top with the hour's words under it */
  .home .day .wrap { grid-template-columns: 1fr; gap: 0; }
  .home .story { display: contents; }
  .home .intro { order: 0; min-height: 0; padding: 26px 0 28px; }
  .home .pin { order: 1; z-index: 5; top: calc(var(--header-h) - 2px); justify-self: center; width: 100%; max-width: 250px; }
  .home .hours { order: 2; }
  .home .day { --cap-top: calc(var(--header-h) + 250px * 745 / 390 + 24px); --cap-h: 150px; --still: 50vh; }
  .home .cap { max-width: none; margin-left: 0; }
  .home .cap .time { margin-bottom: 4px; font-size: 13px; }
  .home .cap h2 { margin-bottom: 6px; font-size: 25px; }
  .home .cap p { font-size: 16px; }
  .home .hour.first { --still: 40vh; --cap-h: 60px; }
  .home .hour.walk, .home .hour.long { --still: 90vh; }
  .home .day-end { order: 2; height: 20vh; }
  /* A strip of floor behind the screen */
  .home .pin::before {
    content: "";
    position: absolute;
    top: -4px;
    bottom: -18px;
    left: 50%;
    z-index: -1;
    width: 100vw;
    background: linear-gradient(var(--floor) 88%, transparent);
    transform: translateX(-50%);
  }
  /* No phone around it here: just the screen, without the tab bar */
  .home .phone { width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .home .screen { aspect-ratio: 390 / 745; border: 2px solid var(--ink); border-radius: 26px; box-shadow: 0 12px 26px rgba(20, 14, 30, 0.18); }
  .home .statusbar .island, .home .statusbar .sys, .home .home-bar, .home .tasks-head { display: none; }
  .home .statusbar { height: calc(40 * var(--u)); padding-left: calc(22 * var(--u)); }
  .home .koin-pill { top: calc(104 * var(--u)); }
  .home .reminder { top: calc(36 * var(--u)); }
  .home .card .t { padding: calc(12 * var(--u)) 0; }
}

/* Made for real life: one picture per job */

.home .jobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.home .job { display: flex; flex-direction: column; padding: 18px 16px 20px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); }
.home .job h3 { margin-bottom: 6px; font-size: 22px; }
.home .job > p { min-height: 4.4em; margin: 0 0 16px; font-size: 14.5px; color: var(--ink2); }
.home .demo { display: flex; flex-direction: column; justify-content: center; min-height: 120px; margin-top: auto; padding: 16px 14px; border-radius: 14px; background: var(--floor); }
.home .demo .notif { padding: 12px; font-size: 14px; }
.home .demo .notif img { width: 34px; height: 34px; }
.home .demo .notif b { font-size: 13px; }
.home .demo .task { margin: 0; padding: 12px 12px 12px 14px; }
.home .demo .task.done { opacity: 1; }
.home .demo .task.done b { color: var(--ink2); }
.home .demo .task.done .check { width: 34px; height: 34px; font-size: 16px; }

/* A companion, not another system to manage */

.home .versus { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.home .vs-card { position: relative; padding: 20px; border: 2px solid var(--ink); border-radius: 22px; }
.home .vs-card h3 { margin-bottom: 14px; font-size: 22px; }
.home .system { background: var(--sys-paper); color: var(--sys-text); }
.home .dash { display: grid; gap: 10px; opacity: 0.85; filter: grayscale(0.4); }
.home .tile { padding: 12px 14px; border: 1.5px solid var(--sys-edge); border-radius: 12px; background: #fff; font-size: 14px; }
.home .tile b { font-size: 22px; color: var(--sys-strong); }
.home .tile small { font-size: 13px; }
.home .xp { overflow: hidden; height: 10px; margin-top: 6px; border-radius: 99px; background: var(--sys-track); }
.home .xp i { display: block; width: 78%; height: 100%; background: var(--sys-fill); }
.home .bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 8px; }
.home .bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--sys-bars); }
.home .nope { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.home .nope span {
  padding: 6px 16px;
  border: 3px solid var(--coral);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.85);
  font: 700 26px var(--voice);
  color: var(--coral);
  transform: rotate(-12deg);
}
.home .pal { background: var(--paper); }
.home .pal .room { overflow: hidden; border: 2px solid var(--ink); border-radius: 16px; }
.home .pal .room .night-wall { position: absolute; inset: 0; background: center / cover; opacity: 0; }
.home .pal .room.night .night-wall { opacity: 1; }
.home .pal .room.night .front { filter: brightness(0.55); }
.home .pal .room.night .paka { filter: brightness(0.75); }
.home .pal .bubble { position: absolute; top: 5%; left: 5%; right: 5%; z-index: 3; font-size: 14px; }
.home .moods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.home .moods button { cursor: pointer; }
.home .moods button.on { background: var(--sunny); }

/* Friends, coming soon */

.home .friends-top { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.home .points { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.home .points li { display: flex; align-items: flex-start; gap: 12px; font-size: 16.5px; }
.home .points .ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 11px; font-size: 18px; }
.home .visit { max-width: 380px; margin: 0 auto; }
.home .visit .phone { overflow: hidden; border-radius: 30px; background: var(--floor); }
.home .visit .who { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: 700 16px var(--voice); }
.home .visit .who img { width: 30px; }
.home .visit .room { background-image: url("/lab/day/img/home/room-simple.webp?v=5d63b5c1"); }
.home .visit .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.home .stickers { display: flex; gap: 8px; }
.home .stickers button {
  width: 46px;
  height: 46px;
  padding: 4px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 2px 0 var(--ink);
  cursor: pointer;
}
.home .hint { margin: 10px 0 0; font: 700 14px var(--voice); color: var(--ink2); text-align: center; }
.home .share-title { margin: 56px 0 0; font-size: 26px; text-align: center; }
.home .share-title .pill { margin-left: 6px; vertical-align: middle; }
.home .share { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.home .share-card { position: relative; overflow: hidden; padding: 22px; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); }
.home .share-card > .pill { position: absolute; top: 16px; right: 16px; }
.home .share-card h3 { margin-bottom: 4px; font-size: 22px; }
.home .share-card > p { margin: 0 0 16px; font-size: 15px; color: var(--ink2); }
.home .share-card .task.paper { border: 2px solid var(--ink); }
.home .pair { display: flex; justify-content: center; margin-top: 4px; }
.home .pair .mini-paka { width: 96px; }
.home .two-checks { display: flex; align-items: center; gap: 8px; }
.home .who-check { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 700 11px var(--body); color: var(--ink2); }
.home .who-check .check { width: 34px; height: 34px; font-size: 15px; }
.home .status { min-height: 22px; margin: 10px 0 0; font: 700 15px var(--voice); color: var(--ink2); text-align: center; }
.home .hand-off { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.home .list-col { display: flex; flex-direction: column; gap: 8px; min-height: 150px; padding: 10px; border-radius: 14px; background: var(--floor); }
.home .list-col .who { display: flex; align-items: center; gap: 6px; font: 700 13px var(--body); color: var(--ink2); }
.home .list-col .who img { width: 22px; }
.home .list-col .task { margin: 0; padding: 8px 8px 8px 10px; }
.home .list-col .task b { font-size: 13.5px; }
.home .from { font: 700 11px var(--body); color: var(--wall); }

/* Paka might be for you if… */

.home .fit { max-width: 640px; margin: 0 auto; }
.home .fit-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.home .fit-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 2px 0 var(--ink);
  font: 600 16.5px var(--body);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.home .fit-list .box { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 8px; font-weight: 700; color: transparent; }
.home .fit-list button[aria-pressed="true"] { background: var(--tint-yellow); }
.home .fit-list button[aria-pressed="true"] .box { border-color: var(--teal); background: var(--teal); color: #fff; }
.home .verdict { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 16px; margin-top: 22px; padding: 18px; animation: rise 0.4s; }
.home .verdict .mini-paka { width: 110px; }
.home .verdict h3 { margin-bottom: 10px; font-size: 24px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* Closing */

.home .closing { text-align: center; }
.home .closing .lead { margin: 0 auto; }
.home .closing .badges { justify-content: center; margin-top: 22px; }

@media (max-width: 900px) {
  .home .jobs { grid-template-columns: repeat(2, 1fr); }
  .home .versus, .home .share, .home .friends-top { grid-template-columns: 1fr; }
  .home .friends-top { gap: 28px; }
}
@media (max-width: 560px) {
  .home .jobs { grid-template-columns: 1fr; }
  .home .job > p { min-height: 0; }
  .home .hand-off { grid-template-columns: 1fr; }
  .home .verdict { grid-template-columns: 80px 1fr; }
  .home .verdict .mini-paka { width: 80px; }
  .home .badges img { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .home .mini .paka, .home .polaroid, .home .day-notif, .home .cap { transition: none; }
  .home .verdict { animation: none; }
}