/* Try Paka: the parked homepage's phone (lab/day/home.css), played by taps. Layout and the bits that became buttons. */
.home .try .wrap { display: flex; justify-content: center; } /* just the phone, on its own */
@media (max-width: 860px) {
  /* home.css drops the phone frame here and lets the screen fill */
  .home .try .phone { width: 100%; max-width: 340px; margin: 0 auto; }
  .home .try .koin-pill { top: calc(46 * var(--u)); }
  .home .try .tasks-head { display: flex; } /* home.css hides it on phones */
}

/* Buttons inside the phone look like the app's, not like browser buttons */
.home .try .screen button { font: inherit; cursor: pointer; }
.home .try :is(.start, .finish) { color: var(--ink); }
.home .try .card { cursor: pointer; }
.home .try .card.done { cursor: default; }
.home .try .card .tick:disabled { color: #fff; opacity: 1; cursor: default; }
/* The date pill as the app has it now (task_card_shared.dart inkDateChip): periwinkle words and a 1pt edge, 2pt padding
   so it stays the same height; lab/day's frozen copy keeps the older ink pill */
.home .try .card .when { padding: calc(2 * var(--u)) calc(8 * var(--u)); border: calc(1 * var(--u)) solid var(--wall); color: var(--wall); }
.home .try .start, .home .try .finish { font: 700 calc(16 * var(--u)) var(--body); }
.home .try .finish { width: 100%; }
.home .try .start:active, .home .try .finish:active { transform: translateY(calc(2 * var(--u))); box-shadow: 0 calc(1 * var(--u)) 0 var(--ink); }
.home .try .screen button:focus-visible { outline: 3px solid var(--wall); outline-offset: 2px; }



/* The fade (FadeOverlay): black over the whole screen; what changes underneath changes at once */
.home .try .screen::after { transition: opacity var(--fade, 600ms) ease-in-out; }
.home .try .screen.swap, .home .try .screen.swap * { transition: none !important; }

/* The room sits below the status bar, so a jump doesn't reach the island; the screen never scrolls, even when a
   focused button sits near its edge */
.home .try .screen { overflow: clip; }

/* The Koin counter (koin_display.dart): 6 below the status bar (54, or 40 on phones) at the top right, only for a Koin
   moment */
.home .try .koin-pill {
  top: calc(60 * var(--u));
  right: calc(12 * var(--u));
  transition: opacity 0.22s cubic-bezier(0.33, 1, 0.68, 1), transform 0.22s cubic-bezier(0.33, 1, 0.68, 1);
}
.home .try .koin-pill:not(.on) { transition-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
.home .try .koin-pill .plus {
  top: calc(38 * var(--u));
  right: calc(9 * var(--u));
  display: flex;
  align-items: center;
  height: calc(22 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: 1.5px solid var(--ink);
  border-radius: calc(11 * var(--u));
  font: 800 calc(12.5 * var(--u)) var(--body);
  opacity: 0;
  transition: none;
}
.home .try .koin-pill.gain .plus { animation: plus-life 1.8s linear both; }
@keyframes plus-life { 0% { opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.home .try .koin-pill img.bump { animation: koin-bump 0.17s ease-out; }
@keyframes koin-bump { from { transform: scale(1.24); } to { transform: scale(1); } }
.home .try .koin-pill.pop { animation: koin-pop 0.26s ease-in-out; }
@keyframes koin-pop { 50% { transform: scale(1.07); } }
.home .try .coins { position: absolute; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; }
.home .try .coin { position: absolute; top: 0; left: 0; height: auto; will-change: transform; }

/* The adventure card, renamed from lab/day's adv-* because ad blockers hide anything called adv-bar or adv-title
   (EasyList ##.adv-bar): its home.css rules, copied under the new name */
.home .journey-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 .journey-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 .journey-main { flex: 1; min-width: 0; }
.home .journey-title { display: block; margin-bottom: calc(7 * var(--u)); font: 700 calc(16 * var(--u)) var(--voice); }
.home .journey-bar { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.home .journey-bar .track { flex: 1; overflow: hidden; height: calc(12 * var(--u)); border: 1.5px solid var(--ink); border-radius: 99px; background: #efe8e0; }
.home .journey-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 .journey-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 .journey-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 .journey-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 .journey-card.away .counting { display: none; }
.home .journey-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 .journey-card.arrived .finish { display: flex; margin-top: calc(10 * var(--u)); }
.home .journey-card.arrived .away-top span { display: none; }

/* The adventure card (adventure_progress_bar.dart): a 0.5 s fill */
.home .try .journey-bar .track i { transition: width 0.5s cubic-bezier(0.33, 1, 0.68, 1); }
.home .try .finish svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

/* The trail: the face starts over home and walks all the way onto the flag, landing as they arrive */
.home .try .trail .me { left: calc(var(--p, 0) * (100% - 34 * var(--u))); transition: left 0.3s cubic-bezier(0.33, 1, 0.68, 1); }
.home .try .journey-card.away:not(.arrived) .trail .me { transition: none; }
.home .try .journey-card.arrived .trail .me { left: calc(100% - 34 * var(--u)); }
.home .try .dashes i { width: calc(var(--p, 0) * 100%); }
.home .try .journey-card.arrived .dashes i { width: 100%; }
.home .try .journey-card.arrived .flag { background: var(--sunny); }

/* After the trip: one adventure a day, so the card rests until tomorrow */
.home .try .rest-note { display: none; align-items: center; gap: calc(12 * var(--u)); }
.home .try .journey-card.resting .counting { display: none; }
.home .try .journey-card.resting .rest-note { display: flex; }
.home .try .moon { flex: none; display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: var(--tint-blue); }
.home .try .moon svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.home .try .rest-note b { display: block; font: 700 calc(16 * var(--u)) var(--voice); }
.home .try .rest-note .sub { display: block; margin-top: calc(2 * var(--u)); font: 400 calc(13 * var(--u)) / 1.3 var(--body); color: var(--ink2); }

/* The photo (photo_reveal.dart): it lands, the title comes up, then the hint; a tap anywhere goes home */
.home .try .reveal { background: rgba(28, 22, 40, 0.7); cursor: pointer; transition: opacity 0.3s; }
.home .try .reveal.on { pointer-events: auto; } /* home.css lets taps through it; here a tap continues */
.home .try .reveal .new, .home .try .reveal .hint { opacity: 0; transition: opacity 0.4s; }
.home .try .reveal.titled .new, .home .try .reveal.hinted .hint { opacity: 1; }
.home .try .reveal .polaroid { opacity: 0; transform: rotate(-2deg) translateY(calc(40 * var(--u))) scale(0.86); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; }
.home .try .reveal.landed .polaroid { opacity: 1; transform: rotate(-2deg); }
.home .try .reveal .hint { font: 400 calc(14 * var(--u)) var(--body); color: rgba(255, 255, 255, 0.9); }
.home .try .reveal:focus-visible { outline: 3px solid var(--wall); outline-offset: -6px; }

/* Lights off once Yunka's asleep (LightsOffShade, black at 50%): over the room and Yunka, and over the floor behind the
   tasks; the task cards, the adventure card and the Koin counter stay bright on top */
.home .try .room .lights { position: absolute; inset: 0; z-index: 3; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.8s; pointer-events: none; }
.home .try .screen.lights-off .room .lights { opacity: 1; }
.home .try .screen { transition: background-color 0.8s; }
.home .try .screen.lights-off { background-color: color-mix(in srgb, var(--room-floor) 50%, #000); }
.home .try .screen.lights-off :is(.statusbar, .tasks-head > b) { color: var(--paper); transition: color 0.8s; }

/* Just the phone, one height throughout: try.js sets it to the tallest state's */
.home .try .screen { aspect-ratio: auto; transition: background-color 0.8s; }
/* The view scrolls, room and all, as the app's Home does, once added tasks run past the bottom. try.js measures it
   without them ("measuring"), so the phone keeps its height. */
.home .try .home-view { height: 100%; overflow-y: auto; scrollbar-width: none; }
.home .try .home-view::-webkit-scrollbar { display: none; }
.home .try .home-view.measuring { height: auto; overflow: visible; }
.home .try .home-view.measuring :is(.card.added, .new-task) { display: none; }
.home .try .panel { flex: none; }
.home .try .panel { padding-bottom: calc(30 * var(--u)); }
.home .try .ready-row { padding-bottom: calc(4 * var(--u)); }
.home .try .finish-row { display: none; padding: calc(10 * var(--u)) 0 calc(4 * var(--u)); }
.home .try .journey-card.arrived .finish-row { display: block; }
.home .try .journey-card.arrived .finish { margin-top: 0; }


/* Play again, at the end: top left of the room, across from the Koin counter */
.home .try .again {
  position: absolute;
  top: calc(60 * var(--u));
  left: calc(12 * var(--u));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  height: calc(36 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(9 * var(--u));
  border: 2px solid var(--ink);
  border-radius: calc(18 * var(--u));
  background: rgba(255, 253, 248, 0.92);
  color: var(--ink);
  font: 700 calc(14 * var(--u)) var(--body);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.home .try .again svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.home .try .again.show { opacity: 1; pointer-events: auto; }

/* The speaker: top left of the room, above the garden and the lights-off shade, so it's there all through; Play again sits
   beside it at the end */
.home .try .again { left: calc(56 * var(--u)); }
.home .try .sound {
  position: absolute;
  top: calc(60 * var(--u));
  left: calc(12 * var(--u));
  z-index: 6;
  display: grid;
  place-items: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.92);
  color: var(--ink);
}
.home .try .sound:focus-visible { outline: 3px solid var(--wall); outline-offset: 2px; }
.home .try .sound svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: currentColor; }
.home .try .sound .off, .home .try .sound.muted .on { display: none; }
.home .try .sound.muted .off { display: block; }
@media (max-width: 860px) { .home .try .sound { top: calc(46 * var(--u)); } }
@media (max-width: 860px) { .home .try .again { top: calc(46 * var(--u)); } }
.home .try .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Embedded (?embed, in a landing page's frame): the phone alone, filling the frame's width, with room under it for its
   shadow. The frame is narrow, so the phone rules below 860px are put back to the desktop phone's. */
.embed, .embed body { background: transparent; }
.embed body { display: block; min-height: 0; }
.embed :is(.site-header, .site-footer) { display: none; }
.embed main, .embed .home .try, .embed .home .try .wrap { margin: 0; padding: 0; }
.embed .home .try { display: block; padding: 6px 34px 54px; } /* the phone's shadow fits inside the frame */
.embed .home .try .wrap { margin: 0 auto; } /* centred in the frame (home.css's wrap is narrower than the frame's inside) */
.embed .home .try .phone { width: 100%; max-width: none; box-shadow: inset 0 0 0 2px var(--phone-edge), 0 14px 28px rgba(20, 14, 30, 0.24); }
@media (max-width: 860px) {
  .embed .home .phone { padding: 10px; border-radius: 58px; background: var(--phone-body); }
  .embed .home .screen { border: 0; border-radius: 48px; box-shadow: none; }
  .embed .home .statusbar { height: calc(54 * var(--u)); padding: 0 calc(30 * var(--u)) 0 calc(44 * var(--u)); }
  .embed .home .statusbar .island, .embed .home .home-bar { display: block; }
  .embed .home .statusbar .sys { display: flex; }
  .embed .home .try :is(.koin-pill, .again, .sound) { top: calc(60 * var(--u)); }
  .embed .home .reminder { top: calc(56 * var(--u)); }
  .embed .home .card .t { padding: calc(16 * var(--u)) 0; }
}

/* Adding a task. The yellow + (the list's one main action) and, under the list, the dashed "Add a task" slot
   (task_list_widget.dart NewTaskCard) */
.home .try .add { padding: 0; color: var(--ink); }
.home .try .add:active { transform: translateY(calc(1.5 * var(--u))); box-shadow: 0 calc(0.5 * var(--u)) 0 var(--ink); }
.home .try .screen .new-task {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  width: calc(100% - 32 * var(--u));
  height: calc(52 * var(--u));
  margin: 0 calc(16 * var(--u));
  padding: 0;
  border: 1.5px dashed color-mix(in srgb, var(--ink2) 55%, transparent);
  border-radius: calc(16 * var(--u));
  background: none;
  color: var(--ink);
  font: 600 calc(16 * var(--u)) var(--body);
}
.home .try .new-task:active { background: color-mix(in srgb, var(--ink2) 12%, transparent); }
.home .try .new-task svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.home .try .screen.lights-off .new-task { border-color: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--paper); }

/* The card (task_composer.dart), cut down to a name and a difficulty: centred over a scrim, 12 points from the sides */
.home .try .composer {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: grid;
  place-items: center;
  padding: 0 calc(12 * var(--u));
  background: rgba(28, 22, 40, 0.4);
  opacity: 0;
  transition: opacity 0.2s;
}
.home .try .composer[hidden] { display: none; }
.home .try .composer.on { opacity: 1; }
.home .try .composer-card {
  width: 100%;
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(15 * var(--u));
  border: 2px solid var(--ink);
  border-radius: calc(16 * var(--u));
  background: var(--paper);
  box-shadow: 0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(20, 14, 30, 0.22);
  transform: translateY(calc(8 * var(--u)));
  transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.home .try .composer.on .composer-card { transform: none; }
.home .try .composer-card input {
  display: block;
  width: 100%;
  margin: 0;
  padding: calc(2 * var(--u)) 0 calc(6 * var(--u));
  border: 0;
  outline: none;
  background: none;
  color: var(--ink);
  caret-color: var(--wall);
  font: 700 max(16px, calc(20 * var(--u))) / 1.3 var(--body); /* 16px at least: iOS zooms into smaller fields */
}
/* The hint scales with the phone (no 16px floor: only typed text makes iOS zoom), so it fits on one line at any width */
.home .try .composer-card input::placeholder { color: #bdb6c2; opacity: 1; font-size: calc(18 * var(--u)); }
/* Difficulty, made for the demo: three tiles, each with its bars, its name and what it earns; the picked one in its tint */
.home .try .diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); }
.home .try .screen .diff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(10 * var(--u)) calc(4 * var(--u)) calc(9 * var(--u));
  border: 1.5px solid var(--hairline);
  border-radius: calc(14 * var(--u));
  background: #fff;
  color: var(--ink);
  font: 700 calc(15 * var(--u)) var(--body);
}
.home .try .screen .diff[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 0.5px var(--ink); }
.home .try .diff.easy[aria-checked="true"] { background: #e6f2e1; }
.home .try .diff.mid[aria-checked="true"] { background: #fcebd3; }
.home .try .diff.hard[aria-checked="true"] { background: #fbe0df; }
.home .try .diff small { display: flex; align-items: center; gap: calc(3 * var(--u)); font: 700 calc(12.5 * var(--u)) var(--body); color: var(--ink2); }
.home .try .diff small img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
/* Its bars: one, two or three of three filled, in the difficulty's colour */
.home .try .bars { display: flex; align-items: flex-end; gap: calc(2 * var(--u)); height: calc(14 * var(--u)); }
.home .try .bars i { width: calc(4.5 * var(--u)); border-radius: calc(1.5 * var(--u)); background: rgba(42, 34, 48, 0.18); }
.home .try .bars i:nth-child(1) { height: calc(6.5 * var(--u)); }
.home .try .bars i:nth-child(2) { height: calc(10 * var(--u)); }
.home .try .bars i:nth-child(3) { height: calc(14 * var(--u)); }
.home .try .diff.easy .bars i:nth-child(1) { background: var(--leaf); }
.home .try .diff.mid .bars i:nth-child(-n + 2) { background: var(--mid); }
.home .try .diff.hard .bars i { background: var(--coral); }
/* Cancel and the yellow Create share the width, as in the kit's Ink dialogs */
.home .try .composer-btns { display: flex; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); }
.home .try .composer-btns button { flex: 1; min-height: calc(48 * var(--u)); padding: 0 calc(16 * var(--u)); font: 700 calc(16 * var(--u)) var(--body); }
.home .try .cancel { border: 0; background: none; color: var(--ink2); font-weight: 600 !important; }
.home .try .create { border: 2px solid var(--ink); border-radius: calc(14 * var(--u)); background: var(--yellow); box-shadow: 0 calc(3 * var(--u)) 0 var(--ink); color: var(--ink); }
.home .try .create:active:not(:disabled) { transform: translateY(calc(2 * var(--u))); box-shadow: 0 calc(1 * var(--u)) 0 var(--ink); }
.home .try .create:disabled { border-color: var(--hairline); background: #efeae4; box-shadow: none; color: #aba2aa; cursor: default; }

/* Clear N (PakaInkPill): a paper pill beside the +, once a task is done */
.home .try .screen .clear {
  margin-right: calc(4 * var(--u));
  padding: calc(6 * var(--u)) calc(14 * var(--u));
  border: 1.5px solid var(--ink);
  border-radius: 99px;
  background: var(--paper);
  box-shadow: 0 calc(2 * var(--u)) 0 var(--ink);
  color: var(--ink);
  font: 700 calc(14 * var(--u)) var(--body);
}
.home .try .clear[hidden] { display: none; }
.home .try .clear:active { transform: translateY(calc(1.5 * var(--u))); box-shadow: 0 calc(0.5 * var(--u)) 0 var(--ink); }

/* Yunka's speech bubble (speech_bubble.dart): paper with the ink edge, a tail down to him, his words typed out. It pops
   from its tail and shrinks back into it; try.js places it. */
.home .try .bubble {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7; /* over the speaker while he talks */
  width: max-content;
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border: 2px solid var(--ink);
  border-radius: calc(16 * var(--u));
  background: var(--paper);
  color: var(--ink);
  font: 700 calc(17 * var(--u)) / 1.3 var(--voice);
  white-space: pre-line;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.2);
  transform-origin: var(--tail, 50%) 100%;
  pointer-events: none;
  transition: transform 0.16s ease-in, opacity 0.16s ease-in;
}
.home .try .bubble.on { opacity: 1; transform: none; pointer-events: auto; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease-out; }
.home .try .bubble p { margin: 0; }
.home .try .bubble .rest { color: transparent; }
.home .try .bubble::after {
  content: "";
  position: absolute;
  left: var(--tail, 50%);
  bottom: calc(-7 * var(--u));
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin-left: calc(-6 * var(--u));
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  border-bottom-right-radius: calc(2 * var(--u));
  background: var(--paper);
  transform: rotate(45deg);
}

/* A clip's layer in its sprite's box (try.js sprite()): shown by opacity; the box's own still goes once one is up */
.home .try :is(.paka, .walker) > .clip { position: absolute; inset: 0; background-repeat: no-repeat; opacity: 0; will-change: opacity; pointer-events: none; }
.home .try :is(.paka, .walker).layered { background-image: none; }

/* ---- the tour (?tour): it plays itself and takes no taps ---- */
.tour .home .try .screen { pointer-events: none; }
.tour .home .try .again, .tour .home .try .reveal .hint { display: none; }
.tour .home .try .sound { pointer-events: auto; } /* the one thing on the tour that takes a tap */
.tour .home .try .screen.reloop::after { background: var(--paper); } /* round again: a fade to paper, not black */
/* a tap: a soft dot where the finger lands */
.tour .home .try .tap { position: absolute; z-index: 14; width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin: calc(-22 * var(--u)) 0 0 calc(-22 * var(--u)); border-radius: 50%; background: rgba(42, 34, 48, 0.3); pointer-events: none; animation: tour-tap 0.6s ease-out both; }
@keyframes tour-tap { 0% { opacity: 0; transform: scale(0.5); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } }
/* a new task slides into the list */
.tour .home .try .card.added:not(.in) { animation: tour-card-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes tour-card-in { from { opacity: 0; transform: translateY(calc(10 * var(--u))); } }
/* the reminder: iOS's banner (real-life/kit.css's .nt with its picture), dropping in under the island */
.home .try .notice { position: absolute; z-index: 13; left: calc(8 * var(--u)); right: calc(8 * var(--u)); top: calc(54 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(76 * var(--u)); padding: 0 calc(58 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(22 * var(--u)); background: rgba(250, 248, 252, 0.9); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 calc(6 * var(--u)) calc(22 * var(--u)) rgba(28, 22, 40, 0.22); color: #1c1a20; opacity: 0; transform: translateY(calc(-110 * var(--u))); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.08), opacity 0.3s; pointer-events: none; }
.home .try .notice.on { opacity: 1; transform: none; }
.home .try .notice > img:first-child { flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(9 * var(--u)); }
.home .try .notice > div { flex: 1; min-width: 0; text-align: left; }
.home .try .notice b, .home .try .notice span { display: block; font: 600 calc(15 * var(--u)) / 1.25 var(--body); }
.home .try .notice span { font-weight: 400; }
.home .try .notice small { position: absolute; top: calc(12 * var(--u)); right: calc(16 * var(--u)); font: 400 calc(13 * var(--u)) / 1.2 var(--body); color: #7a7480; }
.home .try .notice .face { position: absolute; right: calc(19 * var(--u)); bottom: calc(14 * var(--u)); width: calc(29 * var(--u)); height: calc(29 * var(--u)); border-radius: calc(6 * var(--u)); }

/* ---- the tour's create card: the app's (task_composer.dart, composer_widgets.dart), in its points ---- */
.home .try .make { position: absolute; inset: 0; z-index: 11; display: flex; align-items: center; justify-content: center; padding: 0 calc(12 * var(--u)); background: rgba(28, 22, 40, 0.4); opacity: 0; transition: opacity 0.15s ease-out; pointer-events: none; }
.home .try .make[hidden] { display: none; }
.home .try .make.on { opacity: 1; }
.home .try .make-card { position: relative; width: 100%; max-width: calc(400 * var(--u)); padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(15 * var(--u)); border: 1.5px solid var(--ink); border-radius: calc(16 * var(--u)); background: var(--paper); box-shadow: 0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(20, 14, 30, 0.22); font-family: var(--body); color: var(--ink); text-align: left; }
/* behind a picker: a paper wash over it, its edge faded */
.home .try .make-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 253, 248, 0.7); opacity: 0; transition: opacity 0.12s; }
.home .try .make-card.behind { border-color: rgba(42, 34, 48, 0.22); }
.home .try .make-card.behind::after { opacity: 1; }
.home .try .make-title { display: flex; align-items: center; min-height: calc(26 * var(--u)); margin: 0; padding: calc(2 * var(--u)) 0 calc(6 * var(--u)); font: 700 calc(20 * var(--u)) / 1.3 var(--body); white-space: nowrap; }
.home .try .make-title .hint { color: #bdb6c2; }
.home .try .make-title.typed .hint { display: none; }
.home .try .make-title .caret { flex: none; width: calc(2 * var(--u)); height: calc(23 * var(--u)); margin: 0 calc(1 * var(--u)); border-radius: 1px; background: var(--wall); animation: mk-caret 1s steps(1) infinite; }
.home .try .make-title:not(.typed) .caret { order: -1; margin-left: 0; }
.home .try .make-title.away .caret { display: none; }
@keyframes mk-caret { 50% { opacity: 0; } }
.home .try .make-title + .make-row { margin-top: calc(4 * var(--u)); }
.home .try .make-row { display: grid; grid-template-columns: calc(70 * var(--u)) minmax(0, 1fr); align-items: center; min-height: calc(40 * var(--u)); }
.home .try .make-row > b { font: 700 calc(10 * var(--u)) / 1 var(--body); letter-spacing: calc(0.3 * var(--u)); /* 0.6 in the app; browsers' fonts run wider */ text-transform: uppercase; color: var(--ink3, #a39ca8); }
.home .try .diffs-row { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); }
.home .try .mk-chip { display: inline-flex; align-items: center; justify-self: start; gap: calc(5 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(10 * var(--u)); border: 0.75px solid rgba(42, 34, 48, 0.15); border-radius: calc(16 * var(--u)); background: #fff; font: 500 calc(14 * var(--u)) / 1 var(--body); color: var(--ink); white-space: nowrap; transition: box-shadow 0.12s; }
.home .try .mk-chip svg { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: var(--ink); }
.home .try .mk-chip.more { padding-right: calc(6 * var(--u)); }
.home .try .mk-chip .chev { width: calc(17 * var(--u)); height: calc(17 * var(--u)); margin-left: calc(-2 * var(--u)); fill: #a39ca8; }
.home .try .mk-chip.dense { padding: 0 calc(7 * var(--u)); }
.home .try .mk-chip.due { padding-right: calc(6 * var(--u)); border-color: var(--ink); background: #e5eafb; }
.home .try .mk-chip .x { display: grid; place-items: center; width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-left: calc(1 * var(--u)); border-radius: 50%; background: rgba(42, 34, 48, 0.12); }
.home .try .mk-chip .x svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.home .try .mk-chip.set { border-color: var(--ink); background: #fff1c2; }
/* the chip whose picker is open: a ring outside it */
.home .try .mk-chip.active { box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--paper), 0 0 0 calc(3.5 * var(--u)) var(--wall); }
.home .try .mk-chip.on { border-color: var(--ink); }
.home .try .mk-chip.easy.on { background: #e6f2e1; }
.home .try .mk-chip.mid.on { background: #fcebd3; }
.home .try .mk-chip.hard.on { background: #fbe0df; }
.home .try .mk-bars { display: flex; align-items: flex-end; gap: calc(2 * var(--u)); height: calc(13 * var(--u)); }
.home .try .mk-bars i { width: calc(4 * var(--u)); border-radius: calc(1.5 * var(--u)); background: rgba(42, 34, 48, 0.18); }
.home .try .mk-bars i:nth-child(1) { height: calc(6 * var(--u)); }
.home .try .mk-bars i:nth-child(2) { height: calc(9.5 * var(--u)); }
.home .try .mk-bars i:nth-child(3) { height: calc(13 * var(--u)); }
.home .try .easy .mk-bars i:nth-child(1) { background: var(--leaf); }
.home .try .mid .mk-bars i:nth-child(-n + 2) { background: #e48a14; }
.home .try .hard .mk-bars i { background: var(--coral); }
.home .try .make-btns { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); }
/* a round sticker (PakaInkIconButton): 32 drawn in a 44 square */
.home .try .make .sticker { flex: none; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.home .try .make-btns .sticker { margin-right: calc(-4 * var(--u)); }
.home .try .make .sticker i { 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: #fff; box-shadow: 0 calc(2 * var(--u)) 0 var(--ink); }
.home .try .make .sticker svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); fill: var(--ink); }
.home .try .make-btns .quiet { flex: 1; text-align: center; font: 600 calc(16 * var(--u)) / calc(44 * var(--u)) var(--body); color: var(--ink2); }
.home .try .make-btns .go { flex: 1; display: grid; place-items: center; min-height: calc(48 * var(--u)); border: 1.5px solid rgba(42, 34, 48, 0.15); border-radius: calc(14 * var(--u)); background: #efeae4; font: 700 calc(16 * var(--u)) / 1 var(--body); color: #aba2aa; transition: transform 0.07s, box-shadow 0.07s; }
.home .try .make-btns .go.lit { border-color: var(--ink); background: var(--yellow); box-shadow: 0 calc(3 * var(--u)) 0 var(--ink); color: var(--ink); }
.home .try .make-btns .go.down { transform: translateY(calc(2 * var(--u))); box-shadow: 0 calc(1 * var(--u)) 0 var(--ink); }
/* the reminder picker (ComposerReminderPicker in its shell), over the card */
.home .try .make-pick { position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); top: 50%; max-width: calc(400 * var(--u)); margin: 0 auto; padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); border: 1.5px solid var(--ink); border-radius: calc(16 * var(--u)); background: var(--paper); box-shadow: 0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(20, 14, 30, 0.22); font-family: var(--body); color: var(--ink); text-align: left; transform: translateY(-50%); opacity: 0; transition: opacity 0.12s; }
.home .try .make-pick.on { opacity: 1; }
.home .try .pick-head { display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(44 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.home .try .pick-head b { font: 700 calc(17 * var(--u)) / 1.2 var(--voice); }
.home .try .make-pick .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(6 * var(--u)); margin-left: calc(4 * var(--u)); }
.home .try .make-pick .tiles span { display: grid; place-items: center; min-height: calc(44 * var(--u)); border: 1.5px solid rgba(42, 34, 48, 0.15); border-radius: calc(12 * var(--u)); background: #fff; font: 600 calc(13.5 * var(--u)) / 1.2 var(--body); }
.home .try .make-pick .tiles span.on { border: 2px solid var(--ink); background: var(--wall); box-shadow: 0 calc(2 * var(--u)) 0 var(--ink); color: #fff; }
.home .try .make-pick .other { display: flex; align-items: center; justify-content: space-between; height: calc(42 * var(--u)); margin: calc(8 * var(--u)) 0 0 calc(4 * var(--u)); padding: 0 calc(12 * var(--u)); border: 1.5px solid rgba(42, 34, 48, 0.15); border-radius: calc(12 * var(--u)); background: #fff; font: 500 calc(14 * var(--u)) / 1 var(--body); }
.home .try .make-pick :is(.other small, .note) { font: 400 calc(13 * var(--u)) / 1.35 var(--body); color: var(--ink2); }
.home .try .make-pick .note { margin: calc(10 * var(--u)) 0 0 calc(4 * var(--u)); }

/* The Koin fountain's tap ring and landing stars (koin_fountain.dart): the ring grows from 10 to 34 points and fades
   in 280 ms; a star pops at each landing, grows with a little overshoot, then shrinks, turns and fades in 300 ms */
.home .try .koin-ring { position: absolute; width: calc(68 * var(--u)); height: calc(68 * var(--u)); margin: calc(-34 * var(--u)) 0 0 calc(-34 * var(--u)); border: calc(2.5 * var(--u)) solid rgba(42, 34, 48, 0.8); border-radius: 50%; pointer-events: none; animation: koin-ring 0.28s cubic-bezier(0.33, 1, 0.68, 1) both; }
@keyframes koin-ring { from { transform: scale(0.29); opacity: 1; } to { transform: scale(1); opacity: 0; border-width: calc(1.25 * var(--u)); } }
.home .try .koin-star { position: absolute; width: calc(21.6 * var(--u)); height: calc(21.6 * var(--u)); margin: calc(-10.8 * var(--u)) 0 0 calc(-10.8 * var(--u)); overflow: visible; pointer-events: none; animation: koin-star 0.3s linear both; }
.home .try .koin-star polygon { fill: #fff6c8; stroke: var(--ink); stroke-width: 0.17; stroke-linejoin: round; }
@keyframes koin-star {
  0% { transform: scale(0) rotate(0); opacity: 1; }
  25% { transform: scale(1.08) rotate(0.09rad); opacity: 1; }
  35% { transform: scale(1) rotate(0.12rad); opacity: 1; }
  60% { transform: scale(0.78) rotate(0.21rad); opacity: 1; }
  100% { transform: scale(0.4) rotate(0.36rad); opacity: 0; }
}

/* The tour's phone: a whole one (390 by 844 points), so its tab bar (real-life/kit.css's .tabs) sits along the foot,
   the home view scrolling above it */
.home .try .appbar { display: none; }
.tour .home .try .appbar { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; display: flex; height: calc(88 * var(--u)); border-top: calc(1.5 * var(--u)) solid var(--ink); background: var(--paper); }
.tour .home .try .appbar span { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); padding-top: calc(9 * var(--u)); color: var(--ink2); font: 600 calc(11 * var(--u)) / 1.1 var(--body); }
.tour .home .try .appbar span.on { color: var(--ink); font-weight: 700; }
.tour .home .try .appbar span.on::before { content: ""; position: absolute; top: calc(-1.5 * var(--u)); width: calc(50 * var(--u)); height: calc(3.5 * var(--u)); border-radius: 0 0 2px 2px; background: var(--ink); }
.tour .home .try .appbar svg { width: calc(23 * var(--u)); height: calc(23 * var(--u)); fill: currentColor; }
.tour .home .try .home-view { padding-bottom: calc(88 * var(--u)); }
.tour .home .try .home-bar { z-index: 10; }

/* The iPhone keyboard on the tour (iOS 26, light; measured from the app's screenshot, in its points): a glassy panel
   along the foot, white keys, the blue Done. The card centres above it while it's up (the app's keyboard-safe area). */
.home .try .kb { position: absolute; z-index: 12; left: 0; right: 0; bottom: 0; height: calc(318 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0; background: rgba(226, 226, 232, 0.94); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255, 255, 255, 0.6) inset; transform: translateY(102%); transition: transform 0.36s cubic-bezier(0.2, 0.85, 0.25, 1); pointer-events: none; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: #000; }
.home .try .kb.up { transform: none; }
.home .try .kb.swap { transition: none; }
.home .try .kb-tips { display: flex; height: calc(44 * var(--u)); align-items: center; }
.home .try .kb-tips span { flex: 1; height: calc(22 * var(--u)); }
.home .try .kb-tips span + span { border-left: 1px solid rgba(0, 0, 0, 0.14); }
.home .try .kb-row { display: flex; justify-content: center; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }
.home .try .kb-tips + .kb-row { margin-top: calc(6 * var(--u)); }
.home .try .kb .key { display: grid; place-items: center; width: calc(32.4 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(8.5 * var(--u)); background: #fff; box-shadow: 0 calc(1 * var(--u)) 0 rgba(0, 0, 0, 0.18); font-size: calc(23 * var(--u)); font-weight: 400; line-height: 1; transition: background-color 0.14s; }
.home .try .kb.caps .key[data-k]:not(.space) { text-transform: uppercase; }
.home .try .kb .key.down { background: #b6b7bd; transition: none; }
.home .try .kb .key.fn { width: calc(42 * var(--u)); background: rgba(255, 255, 255, 0.55); }
.home .try .kb .third .key.fn:first-child { margin-right: calc(10 * var(--u)); }
.home .try .kb .third .key.fn:last-child { margin-left: calc(10 * var(--u)); }
.home .try .kb .key.num { font-size: calc(17 * var(--u)); }
.home .try .kb .key.space { flex: 1; max-width: calc(188 * var(--u)); }
.home .try .kb .key.go { width: calc(92 * var(--u)); background: #0a84ff; }
.home .try .kb .key.go svg { stroke: #fff; }
.home .try .kb svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.home .try .kb svg.line { fill: none; stroke: #000; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home .try .kb-foot { display: flex; justify-content: space-between; padding: calc(16 * var(--u)) calc(30 * var(--u)) 0; }
.home .try .kb-foot svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.home .try .make { transition: opacity 0.15s ease-out, padding-bottom 0.36s cubic-bezier(0.2, 0.85, 0.25, 1); }
.home .try .make.kb-up { padding-bottom: calc(318 * var(--u)); }