/* The blocker story: the phone drawn live, the pinned scroll-driven stage, the glow behind the phone and
   the track under it. Used by the site (section #why, /story/story.js) and the working pages in /lab.
   Loads after /style.css. Sizes inside a phone are in cqw (hundredths of the phone's width), so one phone
   draws at any size. Class names are checked against style.css: do not reuse one it defines. */

/* The solid, slightly tilted pop-up (the style of the month's three tags on the site). */
:is(.lab, .story) .tag { --c: var(--veil); display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 8px; border-radius: 14px; font-size: 0.9rem; font-weight: 650; line-height: 1.2; white-space: nowrap;
  color: var(--ink); background: var(--c); box-shadow: 0 16px 24px -16px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.5); rotate: -2deg; }
:is(.lab, .story) .tag b { font-weight: 800; }

:is(.lab, .story) button.tag { margin: 0; border: 0; cursor: pointer; font-family: var(--sans); -webkit-tap-highlight-color: transparent; transition: transform 0.2s ease, box-shadow 0.25s ease; }
:is(.lab, .story) button.tag:hover { transform: scale(1.05); }
:is(.lab, .story) button.tag:active { transform: scale(0.96); }
:is(.lab, .story) button.tag[data-pick="ping"], :is(.lab, .story) button.tag[data-pick="hard"] { --c: var(--wired); }
:is(.lab, .story) button.tag[data-pick="bored"], :is(.lab, .story) button.tag[data-pick="tired"] { --c: var(--heavy); rotate: 2deg; }
:is(.lab, .story) button.tag[data-pick="hard"] { rotate: 1deg; }
:is(.lab, .story) button.tag[data-pick="tired"] { rotate: -1.5deg; }
:is(.lab, .story) button.tag[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ground-deep), 0 0 0 6px var(--veil), 0 16px 24px -16px rgb(0 0 0 / 0.8); }

/* ───────────────────────────── The phone ─────────────────────────────── */
.ph { position: relative; flex: none; width: var(--w, 220px); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease; }
.ph-screen { position: relative; aspect-ratio: 644 / 1400; overflow: hidden; container-type: inline-size; border-radius: calc(var(--w, 220px) * 0.15); background: #05080b; color: var(--veil); text-align: left;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--veil) 44%, transparent), 0 0 0 calc(var(--w, 220px) * 0.03) var(--ink), 0 0 0 calc(var(--w, 220px) * 0.03 + 1.5px) color-mix(in srgb, var(--veil) 24%, transparent), 0 40px 60px -36px rgb(0 0 0 / 0.95); }
.ph-screen::before, .ph-screen::after { content: ""; position: absolute; z-index: 9; left: 50%; border-radius: 999px; }
.ph-screen::before { top: 4cqw; width: 30cqw; height: 8.4cqw; margin-left: -15cqw; background: #05080b; }
.ph-screen::after { bottom: 3cqw; width: 36cqw; height: 1.6cqw; margin-left: -18cqw; background: var(--veil); opacity: 0.7; }
.ph p { margin: 0; }
.scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
.ph[data-screen="mail"] .scr-mail, .ph[data-screen="feed"] .scr-feed, .ph[data-screen="override"] .scr-feed,
.ph[data-screen="block"] .scr-block, .ph[data-screen="told"] .scr-block, .ph[data-screen="override"] .scr-block,
.ph[data-screen="delete"] .scr-delete, .ph[data-screen^="g-"] .scr-glimmer, .ph:is([data-screen="sleep"], [data-screen="away"]) .scr-sleep,
.ph[data-screen="reply"] .scr-reply, .ph[data-screen="night"] .scr-night { opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0s; }
.ph .g { display: block; flex: none; width: 7cqw; height: 7cqw; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ph .ico { flex: none; }

/* A photo feed, drawn. */
.scr-feed { z-index: 2; display: flex; flex-direction: column; background: #10151a; color: #f2f5f8; }
.fd-bar { display: flex; align-items: center; justify-content: space-between; padding: 15cqw 5cqw 3cqw; font-size: 6.2cqw; font-weight: 700; letter-spacing: -0.02em; }
.fd-bar span { display: flex; gap: 4cqw; }
.fd-stories { display: flex; gap: 3.6cqw; padding: 1cqw 5cqw 4cqw; box-shadow: 0 1px 0 rgb(255 255 255 / 0.08); }
.fd-stories i { flex: none; width: 14cqw; height: 14cqw; border-radius: 50%; background: var(--face, var(--bright)); box-shadow: 0 0 0 0.7cqw #10151a, 0 0 0 1.4cqw var(--face, var(--bright)); opacity: 0.85; }
.fd-stories i:nth-child(2) { --face: var(--settled); } .fd-stories i:nth-child(3) { --face: var(--heavy); } .fd-stories i:nth-child(4) { --face: var(--wired); } .fd-stories i:nth-child(5) { --face: #d8dde2; }
.fd-win { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.fd-posts { animation: fd-roll 18s linear infinite paused; }
.ph:is([data-screen="feed"], [data-screen="override"], [data-screen="g-open"]) .fd-posts { animation-play-state: running; }
@keyframes fd-roll { to { transform: translateY(-75%); } }
.fd-post { padding-bottom: 4cqw; }
.fd-hd { display: flex; align-items: center; gap: 2.4cqw; padding: 2.6cqw 4cqw; }
.fd-av { flex: none; width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--wired); }
.fd-post:nth-child(2) .fd-av { background: var(--settled); } .fd-post:nth-child(3) .fd-av { background: var(--bright); }
.fd-ln { display: block; width: 30cqw; height: 2.4cqw; border-radius: 99px; background: rgb(255 255 255 / 0.62); }
.fd-ln.w { width: 70cqw; margin: 0 4cqw; background: rgb(255 255 255 / 0.36); }
.fd-ln.s { width: 44cqw; margin: 2cqw 4cqw 0; background: rgb(255 255 255 / 0.22); }
.fd-pic { display: block; aspect-ratio: 1; background: #1c232b center / cover no-repeat; }
.fd-pic.p-beach { background-image: url("/assets/story/beach.svg"); }
.fd-pic.p-table { background-image: url("/assets/story/table.svg"); }
.fd-pic.p-park { background-image: url("/assets/story/dog.svg"); }
.fd-ac { display: flex; gap: 3.6cqw; padding: 3cqw 4cqw 2cqw; }
.fd-tabs { position: relative; z-index: 2; display: flex; justify-content: space-around; padding: 3cqw 3cqw 9cqw; background: #10151a; box-shadow: 0 -1px 0 rgb(255 255 255 / 0.08); }
.fd-toast { position: absolute; z-index: 3; left: 5cqw; right: 5cqw; top: 14.5cqw; padding: 2.8cqw 3.6cqw 3cqw; border-radius: 4cqw; font-size: 3.9cqw; font-weight: 700; line-height: 1.2; color: var(--ink); background: #e6e9ee; opacity: 0; transform: translateY(-6cqw); transition: opacity 0.3s ease, transform 0.4s ease; }
.ph[data-screen="override"] .scr-feed { transition-delay: 0.75s, 0s; }
.ph[data-screen="override"] .fd-toast { opacity: 1; transform: none; transition-delay: 1.3s; }

/* The lock screen, with the email that sets the story off. */
.scr-mail { display: grid; align-content: start; justify-items: center; padding-top: 30cqw; color: #f4f6f8; background: radial-gradient(120% 70% at 30% 20%, #3b5a6b 0%, #1c2440 55%, #141827 100%); }
.lk-time { font-size: 27cqw; font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.lk-day { margin-top: 1cqw; font-size: 5cqw; font-weight: 600; opacity: 0.85; }
.lk-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3cqw; width: 90cqw; margin-top: 16cqw; padding: 3.6cqw 4cqw; border-radius: 6cqw; color: var(--ink); background: rgb(240 243 246 / 0.94); box-shadow: 0 6cqw 10cqw -5cqw rgb(0 0 0 / 0.6); opacity: 0; transform: translateY(-5cqw) scale(0.94); transition: opacity 0.35s ease 0.25s, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.25s; }
.ph[data-screen="mail"] .lk-note { opacity: 1; transform: none; }
.lk-note > i { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 24%; color: #fff; background: #2f7fe6; }
.ph[data-note="pink"] .lk-note > i { background: #e0457b; }
.ph[data-note="none"] .lk-note { display: none; }
.lk-note .ico { width: 6cqw; height: 6cqw; stroke-width: 2; }
.lk-note b { display: block; font-size: 4.3cqw; line-height: 1.2; }
.lk-note span span { display: block; font-size: 4.1cqw; line-height: 1.25; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.lk-note em { align-self: start; font-style: normal; font-size: 3.2cqw; color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* A blocker's screen. Generic on purpose: no product's design. */
.scr-block { z-index: 1; display: grid; align-content: center; justify-items: center; gap: 3cqw; padding: 6cqw 8cqw 0; text-align: center; color: #eef1f4; background: linear-gradient(180deg, #2c3338 0%, #15181b 100%); }
.blk-ic { display: grid; place-items: center; width: 22cqw; height: 22cqw; border-radius: 50%; background: rgb(255 255 255 / 0.1); }
.blk-ic .ico { width: 11cqw; height: 11cqw; stroke-width: 1.7; }
.blk-t { font-size: 7.2cqw; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.blk-s { font-size: 4.4cqw; color: rgb(238 241 244 / 0.7); }
.blk-n { margin-top: 3cqw; padding: 2.4cqw 4.4cqw 2.6cqw; border-radius: 3.6cqw; font-size: 4.1cqw; background: rgb(255 255 255 / 0.08); transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1); }
.blk-told { font-size: 4.2cqw; font-weight: 650; color: #ffb4a8; opacity: 0; transform: translateY(2cqw); transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s; }
.ph:is([data-screen="told"], [data-screen="override"]) .blk-n { color: var(--ink); background: #ff9a8b; transform: scale(1.07); }
.ph:is([data-screen="told"], [data-screen="override"]) .blk-told { opacity: 1; transform: none; }
.blk-slide { position: relative; display: grid; place-items: center; width: 78cqw; height: 13cqw; margin-top: 7cqw; border-radius: 99px; font-size: 3.9cqw; color: rgb(238 241 244 / 0.75); background: rgb(255 255 255 / 0.1); }
.blk-slide i { position: absolute; left: 1.5cqw; top: 1.5cqw; width: 10cqw; height: 10cqw; border-radius: 50%; background: #eef1f4; transition: transform 0.65s cubic-bezier(0.3, 0.7, 0.2, 1); }
.blk-slide span { padding-left: 8cqw; transition: opacity 0.3s ease; }
.ph[data-screen="override"] .blk-slide i { transform: translateX(65cqw); }
.ph[data-screen="override"] .blk-slide span { opacity: 0; }

/* The home screen, with the blocker being deleted. */
.scr-delete { background: linear-gradient(160deg, #2b4650 0%, #1b2230 100%); }
.hm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6cqw 5.4cqw; padding: 22cqw 7.5cqw 0; }
.hm-grid i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 23%; background: rgb(255 255 255 / 0.16); }
.hm-grid i:nth-child(3n) { background: color-mix(in srgb, var(--heavy) 45%, transparent); }
.hm-grid i:nth-child(4n + 1) { background: color-mix(in srgb, var(--settled) 40%, transparent); }
.hm-grid i:nth-child(5n + 2) { background: color-mix(in srgb, var(--bright) 45%, transparent); }
.hm-grid i.hm-lock:nth-child(n) { color: var(--ink); background: #e6e9ee; }
.hm-grid .hm-lock .ico { width: 9cqw; height: 9cqw; stroke-width: 2; }
.ph[data-screen="delete"] .hm-lock { animation: hm-wiggle 0.22s ease-in-out infinite alternate; }
@keyframes hm-wiggle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.hm-ask { position: absolute; left: 9cqw; right: 9cqw; top: 92cqw; display: grid; gap: 1.4cqw; padding-top: 5cqw; overflow: hidden; border-radius: 6cqw; text-align: center; color: var(--ink); background: rgb(244 246 248 / 0.97); box-shadow: 0 8cqw 14cqw -6cqw rgb(0 0 0 / 0.7); opacity: 0; transform: scale(0.9); transition: opacity 0.3s ease 0.35s, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) 0.35s; }
.ph[data-screen="delete"] .hm-ask { opacity: 1; transform: none; }
.hm-ask b { padding: 0 4cqw; font-size: 5cqw; line-height: 1.2; }
.hm-ask span { padding: 0 5cqw; font-size: 3.5cqw; line-height: 1.3; color: color-mix(in srgb, var(--ink) 68%, transparent); }
.hm-ask p { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4cqw; box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.14); }
.hm-ask p i { padding: 3.2cqw 0 3.6cqw; font-style: normal; font-size: 4.6cqw; color: #2f6fe0; }
.hm-ask p .del { font-weight: 700; color: #e0352f; box-shadow: inset 1px 0 0 rgb(0 0 0 / 0.14); }

/* Glimmer's check-in (CHECK-IN-V2-2026-11-11.md in the app repo): the question, the word, what next, the breath. */
.scr-glimmer { --ground-lift: #2a3b40; --ground-deep: #10171a; --accent: #a6ebe6; color: var(--veil);
  background: radial-gradient(120% 56% at 50% 44%, var(--ground-lift) 0%, var(--ground-deep) 100%);
  transition: opacity 0.45s ease, visibility 0s linear 0.45s, --ground-lift 0.8s ease, --ground-deep 0.8s ease; }
.ph[data-screen^="g-"] .scr-glimmer { transition: opacity 0.45s ease, visibility 0s, --ground-lift 0.8s ease, --ground-deep 0.8s ease; }
.ph[data-screen="g-word"] .scr-glimmer { --ground-lift: #3d2a31; --ground-deep: #171113; }
.ph[data-screen="g-named"] .scr-glimmer { --ground-lift: #5c2542; --ground-deep: #1d1017; --accent: #ff8fb0; }
/* The "low" group (bored, tired): an indigo room. */
.ph[data-group="heavy"][data-screen="g-word"] .scr-glimmer { --ground-lift: #2c2d4a; --ground-deep: #121320; }
.ph[data-group="heavy"][data-screen="g-named"] .scr-glimmer { --ground-lift: #34357c; --ground-deep: #141534; --accent: #c8ccff; }
/* The choice made after the feeling has been felt. */
.ph.is-choosing .g-grid i:last-child { color: var(--ink); background: var(--veil); transform: scale(1.05); transition: transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1), background-color 0.3s ease; }
.g-eyebrow { position: absolute; left: 5cqw; top: 19.5cqw; font-size: 2.9cqw; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--veil-56); }
.g-title { position: absolute; left: 7cqw; right: 7cqw; top: 28cqw; height: 20cqw; font-family: var(--serif); font-size: 7.6cqw; line-height: 1.14; letter-spacing: -0.015em; text-align: center; text-wrap: balance; }
.g-title span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity 0.35s ease; }
.g-title .t-named { font-size: 9.6cqw; color: var(--accent); }
.ph:is([data-screen="g-ask"], [data-screen="g-open"]) .t-ask, .ph[data-screen="g-word"] .t-word, .ph[data-screen="g-named"] .t-named, .ph[data-screen="g-breathe"] .t-breathe { opacity: 1; transition-delay: 0.15s; }
.g-still, .g-crystal { position: absolute; z-index: 3; left: 19.5cqw; top: 58cqw; width: 61cqw; height: 61cqw; max-width: none; transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1); }
.g-crystal { opacity: 0; }
.ph.is-live .g-crystal { opacity: 1; }
.ph.is-live .g-still { opacity: 0; }
.g-floor { position: absolute; z-index: 1; left: -60cqw; top: 77.6cqw; width: 220cqw; height: 165cqw; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; }
.ph.has-floor .g-floor { opacity: 1; }
/* Rays drawn in CSS, for a phone that does not draw the live floor. */
.g-fan { position: absolute; z-index: 1; left: -30cqw; top: 103cqw; width: 160cqw; height: 74cqw; mix-blend-mode: screen; opacity: 0.85; transition: opacity 0.6s ease;
  background: conic-gradient(from 90deg at 50% 0%, color-mix(in srgb, var(--settled) 60%, transparent) 2deg, transparent 12deg, transparent 68deg, color-mix(in srgb, var(--wired) 75%, transparent) 90deg, transparent 112deg, transparent 168deg, color-mix(in srgb, var(--bright) 60%, transparent) 178deg, transparent 180deg);
  -webkit-mask-image: radial-gradient(ellipse 56% 92% at 50% 0%, #000 0%, rgb(0 0 0 / 0.45) 42%, transparent 76%); mask-image: radial-gradient(ellipse 56% 92% at 50% 0%, #000 0%, rgb(0 0 0 / 0.45) 42%, transparent 76%); }
.ph[data-screen="g-named"] .g-fan { background: conic-gradient(from 90deg at 50% 0%, transparent 62deg, color-mix(in srgb, var(--feel, var(--wired)) 85%, transparent) 90deg, transparent 118deg); }
.ph.has-floor .g-fan { opacity: 0; }
.g-beam { position: absolute; z-index: 2; left: calc(50cqw - 0.3cqw); top: 64cqw; width: 0.6cqw; height: 13cqw; border-radius: 1cqw; background: linear-gradient(180deg, transparent 0%, #fff 100%); box-shadow: 0 0 2cqw 0.3cqw rgb(255 255 255 / 0.35); transition: opacity 0.4s ease; }
.g-ray { position: absolute; z-index: 4; left: 0; top: 0; font-family: var(--serif); font-size: 5cqw; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; color: var(--veil-72); opacity: 0; }
.ph:not([data-screen="g-ask"], [data-screen="g-open"]) .g-ray { visibility: hidden; }
.g-focus { position: absolute; z-index: 4; left: 0; right: 0; top: 121cqw; display: grid; justify-items: center; gap: 1.2cqw; text-align: center; opacity: 0; transition: opacity 0.3s ease; }
.g-focus b { position: relative; padding-bottom: 2cqw; font-family: var(--serif); font-size: 8.2cqw; font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; }
.g-focus b::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 5cqw; height: 0.5cqw; margin-left: -2.5cqw; border-radius: 1cqw; background: var(--feel, var(--wired)); }
.g-focus span { font-size: 3.9cqw; color: var(--veil-72); }
.g-focus.is-word { top: 148cqw; }
.ph:is([data-screen="g-ask"], [data-screen="g-open"]) .g-focus.is-ask, .ph[data-screen="g-word"] .g-focus.is-word { opacity: 1; transition-delay: 0.25s; }
.g-hint { position: absolute; left: 0; right: 0; top: 190cqw; font-size: 3.3cqw; text-align: center; color: var(--veil-56); opacity: 0; transition: opacity 0.3s ease; }
.ph:is([data-screen="g-ask"], [data-screen="g-open"], [data-screen="g-word"]) .g-hint { opacity: 1; }
/* The word: the stone seen from above, eleven words round it, the twelfth in focus under it. */
.g-rays12 { position: absolute; z-index: 1; left: -25cqw; top: 25cqw; width: 150cqw; height: 150cqw; border-radius: 50%; opacity: 0; filter: blur(1.6cqw); transition: opacity 0.6s ease;
  background: repeating-conic-gradient(from -7deg, color-mix(in srgb, var(--feel, var(--wired)) 36%, transparent) 0deg 14deg, transparent 14deg 30deg);
  -webkit-mask-image: radial-gradient(circle, transparent 11%, #000 15%, rgb(0 0 0 / 0.5) 33%, transparent 60%); mask-image: radial-gradient(circle, transparent 11%, #000 15%, rgb(0 0 0 / 0.5) 33%, transparent 60%); }
.g-ring { position: absolute; z-index: 4; left: 50cqw; top: 100cqw; opacity: 0; transition: opacity 0.5s ease; }
.g-ring span { position: absolute; left: 0; top: 0; font-family: var(--serif); font-size: 4.5cqw; line-height: 1; white-space: nowrap; }
.ph[data-screen="g-word"] .g-rays12 { opacity: 0.9; }
.ph[data-screen="g-word"] .g-ring { opacity: 1; transition-delay: 0.2s; }
.ph[data-screen="g-word"] :is(.g-still, .g-crystal) { transform: translateY(11cqw) scale(0.74); }
.ph[data-screen="g-word"] :is(.g-beam, .g-fan, .g-floor) { opacity: 0; }
/* What next. */
.g-next { position: absolute; z-index: 4; left: 4cqw; right: 4cqw; top: 165cqw; opacity: 0; transform: translateY(4cqw); transition: opacity 0.3s ease, transform 0.5s ease; }
.ph[data-screen="g-named"] .g-next { opacity: 1; transform: none; transition-delay: 0.3s; }
.g-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2cqw; }
.g-grid i { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; height: 11.8cqw; border-radius: 99px; font-style: normal; font-size: 3.6cqw; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; background: rgb(255 255 255 / 0.13); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.16); }
.g-grid .ico { width: 4.6cqw; height: 4.6cqw; stroke-width: 1.8; }
.g-links { display: flex; justify-content: space-between; padding: 4.6cqw 6cqw 0; font-size: 3.5cqw; color: var(--veil-72); }
/* The breath: scattered light that moves out on the in-breath and back on the out-breath. */
.g-inout { position: absolute; left: 0; right: 0; top: 50cqw; height: 6cqw; font-size: 4.2cqw; text-align: center; color: var(--veil-72); opacity: 0; transition: opacity 0.4s ease; }
.g-inout span { position: absolute; left: 0; right: 0; top: 0; }
.g-inout span:first-child { animation: word-in 7s ease-in-out infinite; }
.g-inout span:last-child { animation: word-out 7s ease-in-out infinite; }
@keyframes word-in { 0%, 44% { opacity: 1; } 52%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes word-out { 0%, 44% { opacity: 0; } 52%, 94% { opacity: 1; } 100% { opacity: 0; } }
.g-dots { position: absolute; z-index: 3; left: 18cqw; top: 62cqw; width: 64cqw; height: 64cqw; opacity: 0; transition: opacity 0.6s ease; }
.g-dots, .breath-mini { animation: breathe 7s ease-in-out infinite; }
.g-dots i, .breath-mini i { position: absolute; border-radius: 50%; translate: -50% -50%; aspect-ratio: 1; background: radial-gradient(circle, var(--c) 0%, transparent 72%); }
.d-wired { --c: var(--wired); } .d-bright { --c: var(--bright); } .d-heavy { --c: var(--heavy); } .d-settled { --c: var(--settled); }
@keyframes breathe { 0%, 100% { transform: scale(0.72); } 48% { transform: scale(1.14); } }
.ph[data-screen="g-breathe"] :is(.g-dots, .g-inout) { opacity: 1; transition-delay: 0.3s; }
.ph[data-screen="g-breathe"] :is(.g-still, .g-crystal, .g-floor, .g-fan, .g-beam) { opacity: 0; }
.scr-sleep { z-index: 5; background: #05080b; }
@media (prefers-reduced-motion: reduce) {
  .fd-posts, .g-dots, .breath-mini, .g-inout span, .hm-lock { animation: none !important; }
  .g-inout span:last-child { opacity: 0; }
}

/* ───────────────────────────── Pinned stages (1 and 3) ───────────────── */
.pin { position: relative; z-index: 2; height: calc(var(--sh, 100svh) * (1 + var(--frames, 0) * var(--per, 0.55)));
  background: linear-gradient(180deg, transparent 0, var(--ground-deep) 170px, var(--ground-deep) calc(100% - 170px), transparent 100%);
  transition: --ground 1s ease, --ground-deep 1s ease, --ground-lift 1s ease, --glow 1s ease, --accent 1s ease; }
.pin[data-part="a"] { --ground: #1e2428; --ground-deep: #14181b; --ground-lift: #323b41; --glow: #48525a; --accent: #c8d0d6; --gc: #c3cbd1; }
.pin[data-part="turn"] { --ground: #3d1732; --ground-deep: #2c1226; --ground-lift: #642850; --glow: #c44a72; --accent: #ffb0c0; --gc: var(--wired); }
.pin[data-part="b"] { --ground: #10393e; --ground-deep: #0d2a2e; --ground-lift: #1a5c61; --glow: #39a0a3; --accent: #a6ebe6; --gc: var(--wired); }
.pin-snaps { position: absolute; inset: 0; pointer-events: none; }
.pin-stage { position: sticky; top: 0; display: grid; grid-template-rows: auto auto auto; align-content: center; justify-items: center; align-items: center; gap: clamp(14px, 2.6vh, 26px); height: var(--sh, 100svh); overflow: hidden; padding: 62px var(--gutter) 14px;
  background: radial-gradient(70% 46% at 50% 56%, var(--ground-lift) 0%, transparent 72%); }
.pin-head { display: grid; justify-items: center; gap: 9px; width: 100%; text-align: center; }
.pin-part { padding: 4px 13px 5px; border-radius: 99px; font-size: 0.84rem; font-weight: 700; color: var(--ink); background: var(--accent); transition: background-color 0.6s ease; }
.pin-titles { display: grid; width: 100%; font-family: var(--serif); font-size: clamp(1.6rem, 5.2vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; }
.pin-titles p { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); text-wrap: balance; transition: opacity 0.3s ease, transform 0.45s ease; }
.pin-titles p.is-on { opacity: 1; transform: none; transition-delay: 0.12s; }
.pin-titles em { font-style: normal; color: var(--accent); }
.pin-titles small { display: block; margin-top: 7px; font-family: var(--sans); font-size: 1rem; line-height: 1.3; letter-spacing: 0; color: var(--veil-72); }
.pin-dots { display: flex; gap: 6px; }
.pin-dots li { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / 0.2); transition: background-color 0.3s ease; }
.pin-dots li.is-on { background: var(--accent); }

/* ───────────────────────────── The stage ─────────────────────────────── */
.g3 { --feel: var(--wired); --fc: var(--feel); --told: #ff9a8b; }
.g3[data-part="a"], .g3[data-card="1"] { --fc: #c3cbd1; }   /* not named yet: grey */
.g3[data-feel="heavy"][data-part="turn"] { --ground: #212258; --ground-deep: #181940; --ground-lift: #393987; --glow: #666bd3; --accent: #c8ccff; }
.g3 .pin-dots { display: none; }
.g3 .pin-stage { gap: clamp(10px, 2vh, 20px); }
.g3-pic { --w: min(244px, 44vw, calc((var(--sh, 100svh) - 410px) * 0.46)); --a: 0.3; --t: 0; position: relative; display: grid; place-items: center; width: min(100%, 46rem); }
.g3 .ph { z-index: 2; }
.g3 .glow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.g3 .glow i { position: absolute; left: 0; top: 0; width: calc(var(--w) * 3.4); height: calc(var(--w) * 3.4); margin: calc(var(--w) * -1.7) 0 0 calc(var(--w) * -1.7); border-radius: 50%; transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.6s ease; }
.g3 .glow-a { background: radial-gradient(circle, var(--fc) 0%, color-mix(in srgb, var(--fc) 50%, transparent) 36%, transparent 68%); opacity: 0.9; transform: scale(calc(0.16 + var(--a) * 1.9)); }
.g3 .glow-t { background: radial-gradient(circle, var(--told) 0%, color-mix(in srgb, var(--told) 50%, transparent) 36%, transparent 68%); opacity: 0.85; transform: translate(calc(var(--w) * 0.62), calc(var(--w) * -0.78)) scale(calc(var(--t) * 2.1)); }
/* While the feeling is being felt, the glow breathes with the light on the phone. */
.is-felt .glow { animation: g3-breathe 7s ease-in-out infinite; }
@keyframes g3-breathe { 0%, 100% { transform: scale(0.9); } 48% { transform: scale(1.1); } }
.g3 .glow-chip { position: absolute; z-index: 3; display: grid; align-items: center; justify-items: center; padding: 5px 13px 7px; border-radius: 13px; white-space: nowrap; color: var(--ink); box-shadow: 0 14px 20px -14px rgb(0 0 0 / 0.8); transition: opacity 0.4s ease, background-color 0.6s ease, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.g3 .glow-chip b { grid-area: 1 / 1; font-size: 0.9rem; font-weight: 700; transition: opacity 0.35s ease; }
.g3 .gc-a { right: calc(50% + var(--w) / 2 + clamp(8px, 2.4vw, 26px)); top: 58%; background: var(--fc); rotate: -3deg; }
.g3 .gc-a .nm { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; line-height: 1.1; opacity: 0; }
.g3:not([data-part="a"], [data-card="1"]) .gc-a .un { opacity: 0; }
.g3:not([data-part="a"], [data-card="1"]) .gc-a .nm { opacity: 1; }
.g3 .low-a .gc-a { opacity: 0; transform: scale(0.6); }
.g3 .low-a .glow-a { opacity: 0; }
.g3 .gc-t { left: calc(50% + var(--w) / 2 + clamp(8px, 2.4vw, 26px)); top: 24%; background: var(--told); rotate: 3deg; opacity: 0; transform: scale(0.6); }
.g3 .has-t .gc-t { opacity: 1; transform: none; }
/* What set it off, pinned to the top of the phone when the story is at that moment. */
.g3 .g3-moment { position: absolute; z-index: 4; left: 50%; top: -13px; translate: -50% 0; opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 1.5, 0.4, 1); }
.g3 .has-tag .g3-moment { opacity: 1; transform: none; }
/* The two turns: the phone steps back and the line is the picture. */
.g3[data-card="1"] .ph { opacity: 0.22; transform: scale(0.9); }
.g3[data-card="1"] .pin-titles { font-size: clamp(2.1rem, 7.4vw, 3.5rem); }
.g3 .ph[data-screen="away"] { opacity: 0.32; transform: translateY(12%) rotate(-7deg) scale(0.86); }   /* put away: you look up */
.g3-foot { display: grid; justify-items: center; gap: 8px; width: min(100%, 44rem); }
.again3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; justify-content: center; min-height: 2.5rem; font-size: 0.9rem; font-weight: 650; color: var(--veil-72); visibility: hidden; opacity: 0; transition: opacity 0.4s ease; }
.at-end .again3 { visibility: visible; opacity: 1; }
.again3 .tag { padding: 6px 12px 7px; font-size: 0.86rem; }
.now-chip, .trk-now, .tape-now, .rim-now { width: max-content; padding: 3px 10px 4px; border-radius: 9px; font-size: 0.8rem; font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--ink); background: var(--accent); transition: background-color 0.6s ease, transform 0.4s cubic-bezier(0.3, 0.7, 0.2, 1); }
@media (max-width: 620px) {
  .again3 > span { display: none; }
  .again3 { gap: 6px; }
  .again3 .tag { padding: 5px 9px 6px; font-size: 0.78rem; }
}

/* ───────────────────────────── 1. Track ──────────────────────────────── */
.trk { position: relative; display: grid; gap: 5px; width: min(100%, 36rem); }
.trk-acts { display: flex; gap: 10px; font-size: 0.72rem; font-weight: 700; color: var(--veil-56); }
.trk-acts span { flex: 1 1 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color 0.4s ease; }
.g3[data-part="a"] .ta-a, .g3[data-part="turn"] .ta-turn, .g3[data-part="b"] .ta-b { color: var(--veil); }
.trk-dots { display: flex; align-items: center; justify-content: space-between; height: 18px; }
.trk-dots li { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 0.2); transition: transform 0.3s ease, background-color 0.3s ease; }
.trk-dots li.starts { margin-left: 10px; }
.trk-dots li.is-card { border-radius: 2px; rotate: 45deg; }
.trk-dots li.td-a:is(.is-past, .is-now) { background: #c3cbd1; }
.trk-dots li.td-turn:is(.is-past, .is-now) { background: var(--feel); }
.trk-dots li.td-b:is(.is-past, .is-now) { background: #a6ebe6; }
.trk-dots li.is-now { transform: scale(1.9); }
.trk-now { justify-self: start; }

/* The cut into Glimmer: big words across the dark phone. They arrive in a flash, once, when the scroll gets there. */
.g3-flash { position: absolute; z-index: 6; left: 50%; top: 50%; width: max-content; max-width: min(92vw, 40rem); margin: 0; translate: -50% -50%; font-family: var(--serif); font-size: clamp(2.8rem, 9vw, 5.4rem); line-height: 0.98; letter-spacing: -0.03em; text-align: center; text-wrap: balance;
  pointer-events: none; opacity: 0; visibility: hidden; text-shadow: 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent), 0 6px 30px rgb(0 0 0 / 0.6); }
.g3-flash em { font-style: normal; color: var(--accent); }
.g3-flash small { display: block; margin-top: 16px; font-family: var(--sans); font-size: 1.05rem; line-height: 1.3; letter-spacing: 0; color: var(--veil); text-shadow: 0 2px 14px rgb(0 0 0 / 0.8); }
.g3[data-card="flash"] .g3-flash { opacity: 1; visibility: visible; animation: g3-flash 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.g3[data-card="flash"] .pin-head { opacity: 0; }
.g3[data-card="flash"] .ph { opacity: 0.5; transform: scale(0.94); }
@keyframes g3-flash {
  0% { opacity: 0; transform: scale(1.35); filter: blur(10px); }
  16% { opacity: 1; filter: none; }
  26% { opacity: 0.25; }
  38% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; }
  62%, 100% { opacity: 1; transform: none; }
}
.pin-head { transition: opacity 0.3s ease; }
@keyframes g3-pop { from { opacity: 0; transform: scale(0.6) translateY(10px); } to { opacity: 1; transform: none; } }

/* Two lists, one line per step of each evening: the blocker's on the left, Glimmer's on the right. */
.lst-mid { position: relative; display: grid; place-items: center; }
.lst { display: grid; align-content: center; gap: 8px; }
.lst-h { justify-self: start; margin-bottom: 3px; padding: 3px 11px 4px; border-radius: 99px; font-size: 0.8rem; font-weight: 700; color: var(--ink); background: #c8d0d6; }
.lst-b .lst-h { background: #a6ebe6; }
.lst li:not(.lst-h) { display: grid; justify-items: start; gap: 3px; padding-left: 12px; border-left: 2px solid var(--hairline); font-size: 0.95rem; line-height: 1.25; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease; }
.lst li.is-on { opacity: 0.55; transform: none; }
.lst li.is-now, .lst li.has-note { opacity: 1; }
.lst li.is-now { border-left-color: var(--accent); }
.lst-t { font-weight: 650; }
.lst-n { display: none; padding: 1px 8px 2px; border-radius: 7px; font-style: normal; font-size: 0.82rem; font-weight: 700; color: var(--ink); background: var(--feel); }
.has-note .lst-n { display: inline-block; animation: g3-pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both; }

/* ───────────────────────────── On the site (#why) ──────────────────── */
.story { position: relative; padding-top: clamp(72px, 11vw, 132px); }
.story .section-head { justify-items: center; margin-inline: auto; margin-bottom: 26px; text-align: center; }
.story-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
.story-picks .tag { padding: 10px 17px 11px; font-size: 1.04rem; }
.story-hint { margin-top: 16px; font-size: 0.92rem; text-align: center; color: var(--veil-56); }
.story .pin { margin-top: clamp(20px, 4vw, 40px); }
.story .pin-titles small { max-width: 32rem; margin-inline: auto; text-wrap: balance; }
.story .pin-stage { padding-top: 76px; }
.story .lst-mid { position: relative; display: grid; place-items: center; }
.story .lst { display: none; }
@media (min-width: 900px) {
  .story .g3-pic { grid-template-columns: minmax(0, 13rem) auto minmax(0, 13rem); align-items: center; justify-items: stretch; gap: clamp(26px, 4vw, 56px); width: min(100%, 60rem); }
  .story .lst { display: grid; }
  .story .lst-mid { grid-column: 2; }
  .story .gc-a { right: calc(50% + var(--w) / 2 - 16px); top: auto; bottom: -12px; }
  .story .gc-t { left: calc(50% + var(--w) / 2 - 16px); top: 6%; }
}
@media (prefers-reduced-motion: reduce) { .g3-flash { animation: none !important; } }

/* ───────────────────────────── Instagram, then Glimmer ──────────────── */
/* You open Instagram: the feed comes up, then Glimmer rises over it, as the app does. */
.ph[data-screen="g-open"] .scr-feed { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }
.ph[data-screen="g-open"] .scr-glimmer { z-index: 4; animation: g-redirect 1.7s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
@keyframes g-redirect { 0%, 42% { transform: translateY(102%); } 100% { transform: none; } }

/* The word wheel: while it turns, only the word passing the bottom place shows; its line comes when it stops. */
.g-focus.is-word span { transition: opacity 0.4s ease; }
.ph.is-spinning .g-focus.is-word span { opacity: 0; transition: none; }

/* ───────────────────────────── The question mark ──────────────────── */
/* "Did you notice something was missing?": a big question mark in front of the dimmed phone. */
.g3[data-mark="1"] .g3-flash { opacity: 1; visibility: visible; animation: g3-mark 1s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.g3-flash .g3-q { display: block; font-size: clamp(9rem, 30vw, 17rem); line-height: 0.8; color: var(--accent); text-shadow: 0 0 60px color-mix(in srgb, var(--accent) 65%, transparent), 0 10px 40px rgb(0 0 0 / 0.5); }
@keyframes g3-mark { 0% { opacity: 0; transform: scale(0.4) rotate(-14deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(4deg); } }
.g3 .pin-titles small b { color: var(--veil); font-weight: 700; }

/* ───────────────────────────── The kinder thing ───────────────────── */
/* The glow comes back the colour of ease, and the phone shows what you did. */
.g3 .g3-pic.is-kind { --fc: var(--settled); }
.g3 .gc-a .ok { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; line-height: 1.1; opacity: 0; }
.g3 .g3-pic.is-kind .gc-a:has(.ok) :is(.un, .nm) { opacity: 0; }
.g3 .g3-pic.is-kind .gc-a .ok { opacity: 1; }
/* An email reply, written and sent. */
.scr-reply { padding-top: 15cqw; color: #1b2026; background: #f4f6f8; }
.rp-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3cqw; padding: 3cqw 5cqw 4cqw; font-size: 4cqw; box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.1); }
.rp-bar span, .rp-bar i { color: #2f6fe0; }
.rp-bar b { overflow: hidden; font-size: 4.3cqw; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.rp-bar i { font-style: normal; font-weight: 700; }
.rp-to { padding: 3cqw 5cqw; font-size: 4cqw; color: rgb(27 32 38 / 0.6); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.1); }
.rp-to b { font-weight: 600; color: #1b2026; }
.rp-body { padding: 5cqw; font-size: 5.6cqw; line-height: 1.35; }
.rp-text { opacity: 0; transition: opacity 0.6s ease 0.5s; }
.rp-sent { position: absolute; left: 50%; bottom: 20cqw; padding: 2.4cqw 5cqw 2.6cqw; border-radius: 99px; font-size: 4.2cqw; font-weight: 700; color: #fff; background: #2f9e6a; translate: -50% 0; opacity: 0; transform: translateY(4cqw); transition: opacity 0.3s ease 1.6s, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 1.6s; }
.ph[data-screen="reply"] :is(.rp-text, .rp-sent) { opacity: 1; transform: none; }
/* The lock screen at night: sleep on, an alarm set. */
.scr-night { display: grid; align-content: start; justify-items: center; padding-top: 24cqw; color: #c3c6f0; background: radial-gradient(120% 70% at 50% 10%, #1e2048 0%, #0b0c1c 72%); }
.nt-focus { display: inline-flex; align-items: center; gap: 2cqw; padding: 2cqw 4.4cqw 2.2cqw; border-radius: 99px; font-size: 4.2cqw; font-weight: 600; background: rgb(195 198 240 / 0.14); }
.nt-focus .ico { width: 5cqw; height: 5cqw; }
.nt-time { margin-top: 6cqw; font-size: 27cqw; font-weight: 600; line-height: 1; letter-spacing: -0.04em; opacity: 0.8; }
.nt-alarm { margin-top: 3cqw; font-size: 4.6cqw; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .ph[data-screen="g-open"] .scr-glimmer, .g3[data-mark="1"] .g3-flash { animation: none !important; }
  .rp-text, .rp-sent { transition: none; }
}

/* Stepped: a scroll too small to move a frame pulls the stage a little, and it springs back. */
.is-stepped :is(.pin-head, .g3-pic) { translate: 0 var(--nudge, 0px); transition: translate 0.35s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.3s ease; }

/* ───────────────────────────── How it works (#how) ───────────────── */
.how .section-head, .tryit .section-head { justify-items: center; margin-inline: auto; text-align: center; }
.how-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 34px); }
.how-step { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.how-phone { --w: min(190px, 100%); display: grid; justify-items: center; width: 100%; margin-bottom: 10px; }
.how-n { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: 0; border-radius: 50%; font-size: 0.85rem; font-weight: 800; color: var(--ink); background: var(--accent); }
.how-step h3 { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 400; line-height: 1.1; }
.how-step > p:last-child { max-width: 17rem; color: var(--veil-72); line-height: 1.45; text-wrap: balance; }
.how-note { margin-top: clamp(26px, 4vw, 40px); font-size: 0.9rem; text-align: center; color: var(--veil-56); }
/* Step 4: the choice falls on "Sit with it". */
.ph.is-sitting .g-grid i:first-child { color: var(--ink); background: var(--veil); }
@media (max-width: 899px) { .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 420px) { .how-phone { --w: min(150px, 100%); } }

/* ───────────────────────────── Try it now (#try) ─────────────────── */
/* The app's screen with no phone round it: a rounded panel the size of the screen. */
.try-app { --w: min(380px, 92vw, calc((100svh - 130px) * 0.46)); display: grid; justify-items: center; }
.ph.is-bare .ph-screen { border-radius: 34px; box-shadow: 0 0 0 1px var(--hairline), 0 40px 70px -40px rgb(0 0 0 / 0.9); }
.ph.is-bare .ph-screen::before, .ph.is-bare .ph-screen::after { display: none; }
.ph.is-try .ph-screen { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ph.is-try .g-hint { display: none; }
.ph.is-try .g-eyebrow { top: 9cqw; }
.ph.is-try :is(.g-grid i, .g-links span, .g-ray, .g-focus) { cursor: pointer; }
.ph.is-try .g-ray { pointer-events: auto; }
/* Only what is showing can be tapped: the parts of the other screens sit on top, invisible. */
.ph.is-try :is(.g-focus, .g-next) { pointer-events: none; }
.ph.is-try[data-screen="g-ask"] .g-focus.is-ask, .ph.is-try[data-screen="g-word"] .g-focus.is-word, .ph.is-try[data-screen="g-named"] .g-next { pointer-events: auto; }
.ph.is-try :is(.g-grid i, .g-links span):hover { background-color: rgb(255 255 255 / 0.22); }
.ph.is-try :is(.g-grid i, .g-links span):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ph.is-try .g-links span { padding: 1.4cqw 2cqw; border-radius: 99px; }
.try-layer { position: absolute; z-index: 8; left: 0; right: 0; top: 176cqw; display: grid; justify-items: center; gap: 2.4cqw; padding: 0 5cqw; text-align: center; pointer-events: none; }
.try-layer > * { pointer-events: auto; }
.try-layer.is-card { top: 0; bottom: 0; align-content: center; gap: 6cqw; padding: 0 9cqw; background: color-mix(in srgb, #0b1214 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: g3-pop 0.4s ease both; }
.try-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.4cqw; margin: 0; }
.try-b { min-height: 11cqw; padding: 2.4cqw 5cqw 2.6cqw; border: 0; border-radius: 99px; cursor: pointer; font-family: var(--sans); font-size: 3.9cqw; font-weight: 650; color: var(--ink); background: var(--veil); }
.try-b b { font-family: var(--serif); font-size: 4.6cqw; font-weight: 500; }
.try-b.is-quiet { min-width: 11cqw; padding-inline: 3.4cqw; color: var(--veil); background: rgb(255 255 255 / 0.13); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }
.try-b:hover { filter: brightness(1.08); }
.try-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.try-hint { margin: 0; font-size: 3.2cqw; color: var(--veil-56); }
.try-count { margin: 0; font-size: 4cqw; font-weight: 650; color: var(--veil-72); }
.try-big { margin: 0; font-family: var(--serif); font-size: 7.4cqw; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; color: var(--veil); }