/* evening — one Thursday on a clock: earn before four, spend at 6:52, done at seven. */

[data-scene="evening"] { --ev-green: #059669; }
[data-scene="evening"] .ev-track { height: 660vh; }
[data-scene="evening"] .ev-stage { padding: 52px var(--gutter) 0; }

.ev-night {
  position: absolute; inset: 0; background: #000; opacity: 0;
  pointer-events: none; will-change: opacity;
}
.ev-layout {
  position: relative; z-index: 1;
  width: 100%; max-width: 1180px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(40px, 7vw, 128px);
}

/* ---------------------------------------------------------------- copy */
.ev-copy { flex: none; width: clamp(330px, 36vw, 500px); }
.ev-clock {
  font-size: clamp(76px, 9vw, 132px);
  line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap; color: #000;
  transition: color .5s;
}
.ev-ap { font-size: 0.4em; letter-spacing: -0.01em; }
.ev-lines { display: grid; margin-top: clamp(20px, 3vh, 30px); }
.ev-line {
  grid-area: 1 / 1;
  font-size: clamp(22px, 2.1vw, 29px); line-height: 1.28; font-weight: 600;
  letter-spacing: -0.02em; max-width: 21ch; color: #000;
  will-change: opacity, transform;
  transition: color .5s;
}

/* the afternoon as a line: earned here (dot), spent there (bar), now (ring) */
.ev-rail {
  margin-top: clamp(30px, 5vh, 52px); max-width: 420px;
  padding: 14px 0 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ev-rline { position: relative; height: 2px; background: rgba(0, 0, 0, 0.12); border-radius: 1px; transition: background .5s; }
.ev-rdone { position: absolute; inset: 0; background: #000; transform-origin: 0 50%; transform: scaleX(0); border-radius: 1px; transition: background .5s; }
.ev-rearn, .ev-rnow { position: absolute; top: 50%; border-radius: 50%; }
.ev-rearn { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--gold); }
.ev-rspend { position: absolute; top: -2px; height: 6px; min-width: 6px; border-radius: 3px; background: var(--gold); }
.ev-rnow {
  left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  background: #000; box-shadow: 0 0 0 3px #fff;
  will-change: transform; transition: background .5s, box-shadow .5s;
}
.ev-rlabels { position: relative; height: 18px; margin-top: 12px; }
.ev-rlabels span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 13px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ev-rlabels span:first-child { transform: none; }

/* night: the page is black, the words are white */
.ev-dark .ev-clock, .ev-dark .ev-line { color: #fff; }
.ev-dark .ev-rline { background: rgba(255, 255, 255, 0.2); }
.ev-dark .ev-rdone { background: #fff; }
.ev-dark .ev-rnow { background: #fff; box-shadow: 0 0 0 3px #000; }
.ev-dark .ev-rlabels span { color: rgba(255, 255, 255, 0.6); }

.ev-area { flex: none; display: grid; place-items: center; }
.ev-phone { --phone-w: min(340px, calc((100svh - 110px) / 2.054)); }

.ev-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================ the phone */
.ev-phone .ev-i { display: block; width: 1em; height: 1em; flex: none; }
.ev-layer { position: absolute; inset: 0; overflow: hidden; }
.ev-status { z-index: 9; color: var(--app-ink); }
.ev-status.light { color: #fff; }

/* ---------------- home ---------------- */
.ev-home { z-index: 0; background: var(--parch); display: flex; flex-direction: column; }
.ev-hero {
  position: relative; flex: none; overflow: hidden;
  padding: calc(114 * var(--pt)) calc(20 * var(--pt)) calc(32 * var(--pt));
  color: #fff;
  background: linear-gradient(135deg, var(--ev-green), rgba(5, 150, 105, 0.85), rgba(5, 150, 105, 0.7));
  border-radius: 0 0 calc(32 * var(--pt)) calc(32 * var(--pt));
}
.ev-wm { position: absolute; right: calc(-30 * var(--pt)); bottom: calc(-30 * var(--pt)); font-size: calc(140 * var(--pt)); color: rgba(255, 255, 255, 0.06); }
.ev-wm .ev-i { stroke-width: 0.6; }
.ev-hhead { position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: calc(28 * var(--pt)); }
.ev-hi { display: flex; flex-direction: column; gap: calc(3 * var(--pt)); line-height: 1.15; }
.ev-hi span { font-size: calc(15 * var(--pt)); font-weight: 500; color: rgba(255, 255, 255, 0.65); }
.ev-hi b { font-size: calc(24 * var(--pt)); font-weight: 700; }
.ev-streak, .ev-badge, .ev-chip, .ev-go {
  display: inline-flex; align-items: center;
  background: rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.ev-streak { gap: calc(6 * var(--pt)); padding: calc(7 * var(--pt)) calc(12 * var(--pt)); font-size: calc(16 * var(--pt)); font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-streak .ev-i { font-size: calc(14 * var(--pt)); }
.ev-mission { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.ev-badge { gap: calc(6 * var(--pt)); padding: calc(6 * var(--pt)) calc(12 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: calc(20 * var(--pt)); }
.ev-badge .ev-i { font-size: calc(11 * var(--pt)); }
.ev-course { display: flex; align-items: center; font-size: calc(14 * var(--pt)); font-weight: 500; color: rgba(255, 255, 255, 0.6); margin-bottom: calc(8 * var(--pt)); white-space: nowrap; }
.ev-sep { margin: 0 calc(7 * var(--pt)); color: rgba(255, 255, 255, 0.3); }
.ev-new { display: inline-flex; align-items: center; gap: calc(4 * var(--pt)); color: rgba(255, 255, 255, 0.9); font-size: calc(13 * var(--pt)); font-weight: 600; }
.ev-new .ev-i { font-size: calc(10 * var(--pt)); }
.ev-ltitle { font-size: calc(32 * var(--pt)); font-weight: 700; line-height: 1.15; margin-bottom: calc(20 * var(--pt)); }
.ev-dots { align-self: stretch; display: flex; align-items: center; gap: calc(10 * var(--pt)); height: calc(22 * var(--pt)); margin-bottom: calc(24 * var(--pt)); }
.ev-dots i { position: relative; width: calc(9 * var(--pt)); height: calc(9 * var(--pt)); border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex: none; }
.ev-dots b { margin-left: auto; font-size: calc(13 * var(--pt)); font-weight: 600; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
/* lesson 1 is current in the morning; in the evening it is done and lesson 2 is current */
.m1 .ev-dots i[data-i="0"], .m2 .ev-dots i[data-i="1"] {
  width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); background: #fff;
  margin: 0 calc(4 * var(--pt));
  box-shadow: 0 0 0 calc(2 * var(--pt)) var(--ev-green), 0 0 0 calc(4 * var(--pt)) rgba(255, 255, 255, 0.4);
}
.m2 .ev-dots i[data-i="0"] { background: #fff; }
.m2 .ev-dots i[data-i="0"]::after {
  content: ""; position: absolute; inset: 22%; background: var(--ev-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6 10 17l9-10' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6 10 17l9-10' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ev-chips { display: flex; gap: calc(16 * var(--pt)); margin-bottom: calc(28 * var(--pt)); --ev-hole: rgba(4, 110, 78, 1); }
.ev-chip { gap: calc(5 * var(--pt)); padding: calc(5 * var(--pt)) calc(10 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 500; color: rgba(255, 255, 255, 0.9); white-space: nowrap; }
.ev-chip .ev-i { font-size: calc(11 * var(--pt)); }
.ev-go {
  align-self: stretch; justify-content: center; gap: calc(10 * var(--pt));
  height: calc(52 * var(--pt)); background: rgba(0, 0, 0, 0.2);
  font-size: calc(17 * var(--pt)); font-weight: 600;
}
.ev-go .ev-i { font-size: calc(14 * var(--pt)); }

.ev-pill {
  position: absolute; top: calc(60 * var(--pt)); right: calc(16 * var(--pt)); z-index: 2;
  height: calc(40 * var(--pt)); padding: 0 calc(15 * var(--pt)) 0 calc(9 * var(--pt));
  display: flex; align-items: center; gap: calc(7 * var(--pt));
  border-radius: 999px; color: #fff;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
  font-family: var(--sans); font-size: calc(17 * var(--pt)); font-weight: 500;
  --ev-hole: #57b897;
}
.ev-pill-ic { font-size: calc(23 * var(--pt)); }

/* Early Bird, under an hour left (TimeBonusCard, urgent tier) */
.ev-eb {
  flex: none; margin: calc(16 * var(--pt)) calc(20 * var(--pt)) 0;
  border-radius: calc(22 * var(--pt)); overflow: hidden;
  box-shadow: 0 calc(4 * var(--pt)) calc(12 * var(--pt)) rgba(199, 91, 57, 0.18), 0 0 0 0.5px rgba(199, 91, 57, 0.3);
}
.ev-eb-top { padding: calc(18 * var(--pt)) calc(22 * var(--pt)); color: #fff; background: linear-gradient(135deg, #c75b39, #a64830); }
.ev-eb-row { display: flex; align-items: center; gap: calc(8 * var(--pt)); }
.ev-eb-dot { width: calc(6 * var(--pt)); height: calc(6 * var(--pt)); border-radius: 50%; background: #fff; }
.ev-eb-row span { font-size: calc(11 * var(--pt)); font-weight: 700; letter-spacing: calc(1.5 * var(--pt)); color: rgba(255, 255, 255, 0.7); }
.ev-eb-row b { margin-left: auto; font-size: calc(14 * var(--pt)); padding: calc(3 * var(--pt)) calc(10 * var(--pt)); border-radius: 999px; background: rgba(255, 255, 255, 0.15); }
.ev-eb-mid { display: flex; align-items: center; gap: calc(20 * var(--pt)); margin-top: calc(16 * var(--pt)); }
.ev-eb-glass { position: relative; width: calc(56 * var(--pt)); height: calc(72 * var(--pt)); display: grid; place-items: center; color: rgba(255, 255, 255, 0.3); }
.ev-eb-glass .ev-i { font-size: calc(52 * var(--pt)); }
.ev-eb-sand {
  position: absolute; left: 50%; top: calc(17 * var(--pt)); width: calc(14 * var(--pt)); height: calc(15 * var(--pt));
  margin-left: calc(-7 * var(--pt)); background: rgba(255, 255, 255, 0.15);
  transform-origin: 50% 100%; clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
}
.ev-eb-count { display: flex; flex-direction: column; gap: calc(4 * var(--pt)); }
.ev-eb-cd { font-size: calc(44 * var(--pt)); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ev-eb-count span { font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.ev-eb-bar { position: relative; height: calc(8 * var(--pt)); border-radius: calc(4 * var(--pt)); background: rgba(255, 255, 255, 0.12); margin-top: calc(20 * var(--pt)); overflow: hidden; }
.ev-eb-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)); transform-origin: 0 50%; }
.ev-eb-marks { display: flex; justify-content: space-between; margin-top: calc(6 * var(--pt)); font-size: calc(10 * var(--pt)); font-weight: 500; color: rgba(255, 255, 255, 0.4); }
.ev-eb-cta {
  display: flex; align-items: center; gap: calc(10 * var(--pt));
  padding: calc(14 * var(--pt)) calc(22 * var(--pt)); background: var(--cream);
  font-size: calc(13 * var(--pt)); font-weight: 600; line-height: 1.25; color: var(--app-ink);
}
.ev-eb-cta .ev-i { font-size: calc(12 * var(--pt)); color: #c75b39; }
.ev-eb-cta .ev-eb-up { margin-left: auto; font-size: calc(11 * var(--pt)); color: rgba(199, 91, 57, 0.6); }

.ev-tabs {
  position: absolute; left: calc(63 * var(--pt)); right: calc(63 * var(--pt)); bottom: calc(19 * var(--pt));
  height: calc(62 * var(--pt)); padding: calc(5 * var(--pt));
  display: flex; border-radius: 999px;
  background: rgba(255, 249, 232, 0.95);
  box-shadow: 0 calc(6 * var(--pt)) calc(20 * var(--pt)) rgba(138, 106, 59, 0.16), inset 0 0 0 0.5px rgba(255, 255, 255, 0.9), 0 0 0 0.5px rgba(26, 26, 26, 0.06);
  font-family: var(--sans);
}
.ev-tabs span {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--pt));
  border-radius: 999px; font-size: calc(12 * var(--pt)); font-weight: 500; color: var(--app-ink);
}
.ev-tabs .ev-i { font-size: calc(25 * var(--pt)); }
.ev-tabs .on { color: #b8955a; background: rgba(201, 166, 107, 0.16); }

/* ---------------- Free time sheet ---------------- */
.ev-dim { z-index: 1; background: rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; }
.ev-sheet {
  z-index: 2; inset: auto calc(8 * var(--pt)) calc(8 * var(--pt));
  top: calc(267 * var(--pt));
  background: var(--parch); border-radius: calc(44 * var(--pt));
  transform: translate3d(0, 102%, 0); visibility: hidden; will-change: transform;
  box-shadow: 0 calc(-2 * var(--pt)) calc(20 * var(--pt)) rgba(0, 0, 0, 0.12);
}
.ev-grab { position: absolute; top: calc(6 * var(--pt)); left: 50%; width: calc(36 * var(--pt)); height: calc(5 * var(--pt)); margin-left: calc(-18 * var(--pt)); border-radius: 3px; background: rgba(60, 50, 30, 0.3); }
.ev-pick, .ev-run { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(36 * var(--pt)); }
.ev-run { opacity: 0; visibility: hidden; }
.ev-stitle { font-size: calc(28 * var(--pt)); font-weight: 700; line-height: 1.2; }
.ev-avail { display: flex; align-items: center; gap: calc(6 * var(--pt)); margin-top: calc(6 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); --ev-hole: var(--parch); }
.ev-avail .ev-i { font-size: calc(15 * var(--pt)); }
.ev-big { margin-top: calc(22 * var(--pt)); font-size: calc(64 * var(--pt)); font-weight: 700; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.ev-cap { margin-top: calc(4 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.ev-opts { display: flex; gap: calc(12 * var(--pt)); align-self: stretch; padding: 0 calc(18 * var(--pt)); margin-top: calc(24 * var(--pt)); }
.ev-opts span {
  flex: 1; height: calc(72 * var(--pt)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--pt));
  border-radius: calc(10 * var(--pt)); background: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.05), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.04);
  color: rgba(26, 26, 26, 0.28);
}
.ev-opts b { font-size: calc(24 * var(--pt)); line-height: 1; }
.ev-opts small { font-size: calc(12 * var(--pt)); font-weight: 500; }
.ev-step { display: flex; align-items: center; gap: calc(16 * var(--pt)); margin-top: calc(22 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.ev-round { width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: var(--cream); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.1); color: var(--app-ink); }
.ev-round .ev-i { font-size: calc(16 * var(--pt)); }
.ev-round.off { color: rgba(26, 26, 26, 0.17); }
.ev-hold {
  position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); bottom: calc(26 * var(--pt));
  height: calc(56 * var(--pt)); border-radius: calc(10 * var(--pt)); overflow: hidden;
  background: rgba(201, 166, 107, 0.12); color: var(--gold);
}
.ev-hold-fill { position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
.ev-hold-l { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--pt)); font-size: calc(16 * var(--pt)); font-weight: 600; white-space: nowrap; }
.ev-hold-l .ev-i { font-size: calc(17 * var(--pt)); }
.ev-hold-b { opacity: 0; visibility: hidden; }

.ev-ring { position: relative; width: calc(232 * var(--pt)); height: calc(232 * var(--pt)); margin-top: calc(24 * var(--pt)); }
.ev-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ev-ring circle { fill: none; stroke-width: 12; }
.ev-ring-bg { stroke: rgba(201, 166, 107, 0.14); }
.ev-ring-fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 0; }
.ev-ring-t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--pt)); }
.ev-ring-n { font-size: calc(62 * var(--pt)); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ev-ring-t span { font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.ev-more { position: absolute; bottom: calc(90 * var(--pt)); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.ev-more .ev-i { font-size: calc(13 * var(--pt)); }
.ev-stop {
  position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); bottom: calc(26 * var(--pt));
  height: calc(46 * var(--pt)); border-radius: calc(10 * var(--pt));
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--pt));
  background: var(--cream); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.1);
  font-size: calc(15 * var(--pt)); font-weight: 600; white-space: nowrap;
}
.ev-stop .ev-i { font-size: calc(13 * var(--pt)); }

/* ---------------- lesson + lesson complete (one full-screen cover) ---------------- */
.ev-cover { z-index: 3; background: var(--parch); transform: translate3d(0, 100%, 0); visibility: hidden; will-change: transform; }
.ev-lesson, .ev-done { position: absolute; inset: 0; }
.ev-done { opacity: 0; visibility: hidden; }
.ev-lbar {
  position: absolute; z-index: 2; top: calc(61 * var(--pt)); left: calc(16 * var(--pt)); right: calc(16 * var(--pt));
  display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--pt));
  font-family: var(--sans);
}
.ev-x, .ev-spill {
  flex: none; width: calc(43 * var(--pt)); height: calc(43 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; background: #fff6de;
  box-shadow: 0 calc(5 * var(--pt)) calc(14 * var(--pt)) rgba(138, 106, 59, 0.16), inset 0 0 0 0.5px rgba(255, 255, 255, 0.9);
}
.ev-x { color: var(--gold); }
.ev-x .ev-i { font-size: calc(19 * var(--pt)); }
.ev-spill { font-size: calc(15 * var(--pt)); color: rgba(26, 26, 26, 0.6); font-variant-numeric: tabular-nums; }
.ev-lname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(17 * var(--pt)); font-weight: 600; }
.ev-pager { position: absolute; top: calc(125 * var(--pt)); bottom: 0; left: 0; width: 500%; display: flex; will-change: transform; }
.ev-page { position: relative; width: 20%; height: 100%; overflow: hidden; padding: 0 calc(20 * var(--pt)); }
.ev-story { padding-top: calc(64 * var(--pt)); }
.ev-orn { display: flex; align-items: center; gap: calc(12 * var(--pt)); color: rgba(201, 166, 107, 0.7); }
.ev-orn i { width: calc(31 * var(--pt)); height: 1.5px; background: rgba(201, 166, 107, 0.45); }
.ev-orn .ev-i { font-size: calc(16 * var(--pt)); }
.ev-stitle2 { margin-top: calc(18 * var(--pt)); font-size: calc(30 * var(--pt)); font-weight: 700; line-height: 1.2; }
.ev-narr { display: flex; align-items: center; gap: calc(10 * var(--pt)); margin-top: calc(12 * var(--pt)); font-size: calc(15 * var(--pt)); color: rgba(26, 26, 26, 0.55); }
.ev-q { width: calc(25 * var(--pt)); height: calc(25 * var(--pt)); border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(201, 166, 107, 0.16); color: var(--gold); }
.ev-q .ev-i { font-size: calc(13 * var(--pt)); }
.ev-hr { display: flex; align-items: center; gap: calc(10 * var(--pt)); margin-top: calc(18 * var(--pt)); }
.ev-hr i { flex: 1; height: 1px; background: rgba(201, 166, 107, 0.3); }
.ev-hr b { width: calc(6 * var(--pt)); height: calc(6 * var(--pt)); background: rgba(201, 166, 107, 0.55); transform: rotate(45deg); }
.ev-illu {
  width: calc(85 * var(--pt)); height: calc(85 * var(--pt)); margin: calc(30 * var(--pt)) auto 0;
  border-radius: calc(20 * var(--pt)); display: grid; place-items: center;
  background: rgba(201, 166, 107, 0.14); box-shadow: inset 0 0 0 1px rgba(201, 166, 107, 0.22);
}
.ev-illu span { width: calc(58 * var(--pt)); height: calc(58 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: rgba(166, 123, 91, 0.1); color: #a67b5b; }
.ev-illu .ev-i { font-size: calc(32 * var(--pt)); }
.ev-para { display: flex; gap: calc(14 * var(--pt)); margin-top: calc(18 * var(--pt)); }
.ev-pn { flex: none; width: calc(27 * var(--pt)); height: calc(27 * var(--pt)); margin-top: calc(3 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: rgba(201, 166, 107, 0.18); color: #a67b5b; font-size: calc(12 * var(--pt)); font-weight: 600; }
.ev-para p { font-size: calc(18 * var(--pt)); line-height: 1.55; }
.ev-snext {
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--pt));
  height: calc(45 * var(--pt)); margin-top: calc(24 * var(--pt)); border-radius: calc(10 * var(--pt));
  background: rgba(201, 166, 107, 0.1); box-shadow: inset 0 0 0 1px rgba(201, 166, 107, 0.18);
  color: var(--gold); font-size: calc(16 * var(--pt)); font-weight: 600;
}
.ev-snext .ev-i { font-size: calc(14 * var(--pt)); }

/* quiz */
.ev-quiz { display: flex; flex-direction: column; gap: calc(11 * var(--pt)); padding-top: calc(55 * var(--pt)); }
.ev-sit { padding: calc(16 * var(--pt)) calc(18 * var(--pt)) calc(18 * var(--pt)); border-radius: calc(16 * var(--pt)); box-shadow: inset 0 0 0 0.5px rgba(201, 166, 107, 0.2), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.04); }
.ev-sit-h { display: flex; align-items: center; gap: calc(8 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 600; letter-spacing: calc(1 * var(--pt)); text-transform: uppercase; color: rgba(26, 26, 26, 0.5); }
.ev-sit-h .ev-i { font-size: calc(13 * var(--pt)); color: var(--gold); }
.ev-sit p:last-child { margin-top: calc(8 * var(--pt)); font-size: calc(17 * var(--pt)); line-height: 1.45; }
.ev-qq { display: flex; align-items: flex-start; gap: calc(14 * var(--pt)); margin: calc(14 * var(--pt)) 0 calc(6 * var(--pt)); }
.ev-qm { flex: none; width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: rgba(201, 166, 107, 0.12); color: var(--gold); font-weight: 700; font-size: calc(16 * var(--pt)); }
.ev-qq p { font-size: calc(19 * var(--pt)); font-weight: 700; line-height: 1.3; }
.ev-opt {
  display: flex; align-items: center; gap: calc(14 * var(--pt)); min-height: calc(62 * var(--pt));
  padding: calc(10 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(14 * var(--pt));
  background: var(--cream); box-shadow: inset 0 0 0 0.5px rgba(26, 26, 26, 0.1), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.04);
  transition: box-shadow .2s, background-color .2s;
}
.ev-let { flex: none; width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: calc(8 * var(--pt)); display: grid; place-items: center; background: rgba(26, 26, 26, 0.04); color: rgba(26, 26, 26, 0.55); font-weight: 600; font-size: calc(15 * var(--pt)); transition: background-color .2s, color .2s; }
.ev-opt p { font-size: calc(16 * var(--pt)); line-height: 1.35; }
.ev-opt.pick { box-shadow: inset 0 0 0 1.5px rgba(201, 166, 107, 0.4); }
.ev-opt.pick .ev-let { background: var(--gold); color: #fff; }
.ev-opt.ok { background: color-mix(in srgb, var(--success) 6%, var(--cream)); box-shadow: inset 0 0 0 1.5px rgba(91, 140, 90, 0.4), 0 0 calc(14 * var(--pt)) rgba(91, 140, 90, 0.2); }
.ev-opt.ok .ev-let { background: var(--success); color: #fff; }

/* grid */
.ev-gscroll { padding-top: calc(62 * var(--pt)); display: flex; flex-direction: column; align-items: center; text-align: center; will-change: transform; }
.ev-gico { color: rgba(201, 166, 107, 0.55); font-size: calc(32 * var(--pt)); }
.ev-gsit { margin-top: calc(12 * var(--pt)); font-size: calc(17 * var(--pt)); line-height: 1.45; }
.ev-gins { margin-top: calc(12 * var(--pt)); font-size: calc(11 * var(--pt)); font-weight: 500; letter-spacing: calc(0.8 * var(--pt)); line-height: 1.4; text-transform: uppercase; color: rgba(26, 26, 26, 0.5); text-align: left; }
.ev-gclues { align-self: stretch; display: flex; align-items: center; gap: calc(10 * var(--pt)); margin-top: calc(22 * var(--pt)); font-size: calc(16 * var(--pt)); font-weight: 600; }
.ev-gclues .ev-i { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); padding: calc(5 * var(--pt)); border-radius: 50%; background: rgba(201, 166, 107, 0.15); color: var(--gold); }
.ev-clues { align-self: stretch; margin-top: calc(10 * var(--pt)); padding: calc(12 * var(--pt)) calc(16 * var(--pt)); text-align: left; display: flex; flex-direction: column; gap: calc(8 * var(--pt)); }
.ev-clues p { display: flex; gap: calc(10 * var(--pt)); font-size: calc(16 * var(--pt)); line-height: 1.4; }
.ev-clues p span:first-child { flex: none; width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); margin-top: calc(2 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: rgba(201, 166, 107, 0.12); color: var(--gold); font-size: calc(11 * var(--pt)); font-weight: 600; }
.ev-table {
  align-self: stretch; margin-top: calc(22 * var(--pt)); display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr;
  border-radius: calc(14 * var(--pt)); overflow: hidden; background: var(--cream);
  box-shadow: inset 0 0 0 0.5px rgba(26, 26, 26, 0.1);
}
.ev-table > span { display: grid; place-items: center; min-height: calc(54 * var(--pt)); padding: 0 calc(4 * var(--pt)); border-top: 0.5px solid rgba(26, 26, 26, 0.08); border-left: 0.5px solid rgba(26, 26, 26, 0.08); line-height: 1.2; }
.ev-table .ev-th { min-height: calc(50 * var(--pt)); border-top: 0; background: rgba(201, 166, 107, 0.12); color: var(--gold); font-size: calc(14 * var(--pt)); font-weight: 600; }
.ev-table .ev-th:first-child, .ev-table .ev-rh { border-left: 0; }
.ev-table .ev-rh { background: rgba(201, 166, 107, 0.07); font-size: calc(15 * var(--pt)); font-weight: 700; }
.ev-td { color: var(--success); }
.ev-td .ev-i { font-size: calc(24 * var(--pt)); transform: scale(0); }

/* spot it */
.ev-spot { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--pt)); padding-top: calc(52 * var(--pt)); }
.ev-eye span { width: calc(50 * var(--pt)); height: calc(50 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: rgba(201, 166, 107, 0.08); color: rgba(201, 166, 107, 0.75); font-size: calc(26 * var(--pt)); --ev-hole: var(--parch); }
.ev-sins { text-align: center; font-size: calc(19 * var(--pt)); font-weight: 700; line-height: 1.32; }
.ev-ssit { align-self: stretch; padding: calc(14 * var(--pt)) calc(18 * var(--pt)); font-size: calc(16 * var(--pt)); line-height: 1.45; box-shadow: inset 0 0 0 0.5px rgba(201, 166, 107, 0.2); }
.ev-item { align-self: stretch; display: flex; align-items: center; gap: calc(14 * var(--pt)); padding: calc(12 * var(--pt)) calc(14 * var(--pt)); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.08); transition: box-shadow .2s; }
.ev-item p { font-size: calc(15 * var(--pt)); line-height: 1.4; }
.ev-inum { flex: none; width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: calc(8 * var(--pt)); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.12); font-size: calc(14 * var(--pt)); font-weight: 600; color: rgba(26, 26, 26, 0.55); transition: background-color .2s, color .2s; }
.ev-item.on { box-shadow: inset 0 0 0 2px var(--gold); }
.ev-item.on .ev-inum { background: var(--gold); color: #fff; box-shadow: none; }

/* the tutor */
.ev-chat { display: flex; flex-direction: column; gap: calc(14 * var(--pt)); padding-top: calc(60 * var(--pt)); }
.ev-msg { display: flex; align-items: flex-start; gap: calc(10 * var(--pt)); opacity: 0; visibility: hidden; will-change: transform, opacity; }
.ev-msg.ai { transform-origin: 0 0; }
.ev-msg.me { justify-content: flex-end; transform-origin: 100% 100%; }
.ev-av { flex: none; width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: rgba(201, 166, 107, 0.15); color: var(--gold); }
.ev-av .ev-i { font-size: calc(14 * var(--pt)); }
.ev-msg p {
  max-width: calc(262 * var(--pt)); padding: calc(11 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(16 * var(--pt)); font-size: calc(16 * var(--pt)); line-height: 1.5;
}
.ev-msg.ai p { background: var(--cream); box-shadow: 0 calc(2 * var(--pt)) calc(6 * var(--pt)) rgba(26, 26, 26, 0.05), inset 0 0 0 0.5px rgba(26, 26, 26, 0.04); }
.ev-msg.me p { background: var(--gold); color: #fff; max-width: calc(250 * var(--pt)); }
.ev-input {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(84 * var(--pt)); z-index: 1;
  display: flex; align-items: flex-start; gap: calc(12 * var(--pt));
  padding: calc(10 * var(--pt)) calc(20 * var(--pt)) 0;
  border-top: 0.5px solid rgba(26, 26, 26, 0.07); background: var(--parch);
}
.ev-field {
  position: relative; flex: 1; min-width: 0; height: calc(41 * var(--pt)); border-radius: calc(20 * var(--pt));
  display: flex; align-items: center; justify-content: flex-end; overflow: hidden;
  padding: 0 calc(16 * var(--pt)); background: var(--cream); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.06);
  font-size: calc(16 * var(--pt)); white-space: nowrap;
}
.ev-ph { position: absolute; left: calc(16 * var(--pt)); top: 50%; transform: translateY(-50%); color: rgba(26, 26, 26, 0.3); }
.ev-typed { flex: none; }
.ev-send {
  flex: none; width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); margin-top: calc(2 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; background: #fff6de; color: rgba(26, 26, 26, 0.3);
  box-shadow: 0 calc(4 * var(--pt)) calc(12 * var(--pt)) rgba(138, 106, 59, 0.16);
}
.ev-send .ev-i { font-size: calc(15 * var(--pt)); }

.ev-done { display: flex; flex-direction: column; align-items: center; padding: calc(120 * var(--pt)) calc(20 * var(--pt)) 0; text-align: center; }
.ev-seal { position: relative; width: calc(140 * var(--pt)); height: calc(140 * var(--pt)); flex: none; }
.ev-seal-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) rgba(201, 166, 107, 0.35); }
.ev-seal-b {
  position: absolute; inset: calc(15 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle, #d7b46e 0 50%, #c99d63 51% 64%, #a8775c 65% 100%);
  box-shadow: inset 0 0 0 calc(4 * var(--pt)) rgba(255, 255, 255, 0.07), 0 calc(6 * var(--pt)) calc(18 * var(--pt)) rgba(138, 106, 59, 0.22);
  will-change: transform;
}
.ev-seal-b::before { content: ""; position: absolute; inset: calc(7 * var(--pt)); border-radius: 50%; border: calc(2 * var(--pt)) dotted rgba(255, 255, 255, 0.28); }
.ev-seal-b .ev-i { font-size: calc(46 * var(--pt)); }
.ev-dtitle { margin-top: calc(30 * var(--pt)); font-size: calc(32 * var(--pt)); font-weight: 700; line-height: 1.2; }
.ev-dsub { margin-top: calc(6 * var(--pt)); font-size: calc(16 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.ev-dhr { align-self: stretch; margin: calc(26 * var(--pt)) calc(28 * var(--pt)) 0; }
.ev-rcards { align-self: stretch; display: flex; flex-direction: column; gap: calc(14 * var(--pt)); margin-top: calc(30 * var(--pt)); text-align: left; }
.ev-rcard { height: calc(83 * var(--pt)); display: flex; align-items: center; gap: calc(16 * var(--pt)); padding: 0 calc(18 * var(--pt)); box-shadow: 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.05), inset 0 0 0 0.5px rgba(26, 26, 26, 0.06); }
.ev-rico { flex: none; width: calc(50 * var(--pt)); height: calc(50 * var(--pt)); border-radius: calc(12 * var(--pt)); display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--cream)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 14%, transparent); --ev-hole: var(--cream); }
.ev-rico .ev-i { font-size: calc(22 * var(--pt)); }
.ev-rtext { display: flex; flex-direction: column; gap: calc(2 * var(--pt)); }
.ev-rtext > span { font-size: calc(14 * var(--pt)); color: rgba(26, 26, 26, 0.55); }
.ev-rtext b { font-size: calc(28 * var(--pt)); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ev-rtext small { font-size: calc(16 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.ev-dnext {
  align-self: stretch; height: calc(54 * var(--pt)); margin-top: calc(38 * var(--pt)); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--pt));
  background: #fff7e2; box-shadow: 0 calc(8 * var(--pt)) calc(22 * var(--pt)) rgba(138, 106, 59, 0.14), inset 0 0 0 0.5px rgba(255, 255, 255, 0.9);
  font-size: calc(18 * var(--pt)); font-weight: 600;
}
.ev-dnext .ev-i { font-size: calc(15 * var(--pt)); }

/* ---------------- 7:00 PM: the lock screen ---------------- */
.ev-lock { z-index: 5; background: #14120e; color: #fff; font-family: var(--sans); opacity: 0; visibility: hidden; --ev-hole: rgba(255, 255, 255, 0.0); }
.ev-date { position: absolute; top: calc(92 * var(--pt)); left: 0; right: 0; text-align: center; font-size: calc(20 * var(--pt)); font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.ev-lclock { position: absolute; top: calc(116 * var(--pt)); left: 0; right: 0; text-align: center; font-size: calc(104 * var(--pt)); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ev-note {
  position: absolute; left: calc(10 * var(--pt)); right: calc(10 * var(--pt)); top: calc(560 * var(--pt));
  display: flex; align-items: center; gap: calc(11 * var(--pt));
  padding: calc(13 * var(--pt)) calc(14 * var(--pt));
  border-radius: calc(24 * var(--pt)); background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
  opacity: 0; visibility: hidden; will-change: transform, opacity;
}
.ev-note img { width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: calc(9 * var(--pt)); flex: none; background: #fff; }
.ev-note-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--pt)); font-size: calc(15 * var(--pt)); line-height: 1.3; }
.ev-note-t > span:first-child { display: flex; justify-content: space-between; gap: calc(8 * var(--pt)); }
.ev-note-t b { font-weight: 600; }
.ev-note-t small { font-size: calc(14 * var(--pt)); color: rgba(255, 255, 255, 0.55); }
.ev-note-t > span:last-child { color: rgba(255, 255, 255, 0.92); }
.ev-lbtn { position: absolute; bottom: calc(46 * var(--pt)); width: calc(50 * var(--pt)); height: calc(50 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); --ev-hole: #3a3834; }
.ev-lbtn.l { left: calc(46 * var(--pt)); }
.ev-lbtn.r { right: calc(46 * var(--pt)); }
.ev-lbtn .ev-i { font-size: calc(22 * var(--pt)); }
.ev-home-ind { position: absolute; bottom: calc(8 * var(--pt)); left: 50%; width: calc(140 * var(--pt)); height: calc(5 * var(--pt)); margin-left: calc(-70 * var(--pt)); border-radius: 3px; background: #fff; }

/* ============================================================ phone width */
@media (max-width: 760px) {
  [data-scene="evening"] .ev-track { height: 620vh; }
  [data-scene="evening"] .ev-stage { padding: 58px 16px 0; align-items: flex-start; }
  .ev-layout { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; height: auto; }
  .ev-copy { width: 100%; }
  .ev-clock { font-size: clamp(52px, 15vw, 64px); }
  .ev-lines { margin-top: 10px; min-height: 2.6em; font-size: 19px; }
  .ev-line { font-size: 19px; max-width: 26ch; }
  .ev-rail { margin-top: 10px; max-width: none; padding-top: 10px; }
  .ev-rlabels { margin-top: 8px; }
  .ev-area { margin-top: 16px; }
  .ev-phone { --phone-w: min(300px, 76vw, calc((100svh - 292px) / 2.054)); }
}

/* ============================================================ reduced motion */
.ev-static .ev-film {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(80px, 12vh, 140px) var(--gutter);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 28px);
}
.ev-still { margin: 0; min-width: 0; }
.ev-slot .phone { --phone-w: 100%; }
.ev-still figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.ev-stime { font-size: clamp(24px, 2.3vw, 32px); }
.ev-sline { font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.ev-static .ev-msg, .ev-static .ev-note { will-change: auto; }
@media (max-width: 860px) {
  .ev-static .ev-film { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
}