/* ═══════════════════════════════════════════════════════════════════
   GRATUS.CC · the app. Grow · Gratus · Give. His scenes behind glass, every edge feathered,
   the star risen above the bar. One scene per screen; a different one each time the app opens.
   ═══════════════════════════════════════════════════════════════════ */
body.app { background: var(--ground); }
.stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .9; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--star); animation: twinkle var(--tw, 5s) ease-in-out infinite; animation-delay: var(--d, 0s); }
#view { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 0 0 calc(120px + var(--sab)); }

/* ── the art: a scene, feathered on every edge, arriving slowly ── */
.art { position: absolute; inset: 0; z-index: 0; background: center 28% / cover no-repeat; opacity: 0; animation: art-in 1.6s var(--ease) forwards;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, #000 10%, #000 56%, transparent 100%), radial-gradient(130% 100% at 50% 42%, #000 50%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, #000 10%, #000 56%, transparent 100%), radial-gradient(130% 100% at 50% 42%, #000 50%, transparent 100%); mask-composite: intersect; }
.art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.art.soft { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 50%, transparent 96%), radial-gradient(120% 90% at 50% 45%, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 50%, transparent 96%), radial-gradient(120% 90% at 50% 45%, #000 45%, transparent 100%); }
@keyframes art-in { to { opacity: 1; } }
html.landed .art { opacity: 1; animation: none; }

/* ── top bar: the mark, the name, you ── */
.top { position: absolute; left: 0; right: 0; top: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + var(--sat)) 20px 0; max-width: 560px; margin: 0 auto; }
.top .mark { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(180, 255, 120, .55)); }
.top .brandname { font-family: var(--display); font-size: 24px; line-height: 28px; color: var(--ink); text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.top .left { display: flex; align-items: center; gap: 10px; }
.top .you, .top .back { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center; color: var(--ink-2); background: rgba(5, 9, 18, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.top .you svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.top .back { font-size: 22px; line-height: 1; }

/* ── the hero: the scene fills the first screen; the words sit low, as in his mock ── */
.hero { position: relative; min-height: 78svh; display: grid; grid-template-rows: 1fr auto; padding: calc(70px + var(--sat)) 24px 26px; text-align: center; overflow: hidden; isolation: isolate; }
.hero > :not(.art) { position: relative; z-index: 1; }
.hero .art { position: absolute; inset: 0; z-index: 0; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, transparent, var(--ground)); z-index: 0; pointer-events: none; }
.hero .top-words { align-self: start; display: grid; justify-items: center; gap: 6px; }
.hero .low { align-self: end; display: grid; justify-items: center; gap: 14px; }
.hero h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, .7); }
.hero .kicker { text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
.hero .statement { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.12; text-shadow: 0 2px 28px rgba(0, 0, 0, .85); max-width: 14em; }
.hero.home { min-height: calc(100svh - 8px); }
.hero.room-hero { min-height: 62svh; }
.pillform { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px; min-height: 60px; padding: 6px 6px 6px 20px; border-radius: var(--pill); background: rgba(5, 9, 18, .55); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(110, 217, 192, .12), 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); }
.pillform input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); font-size: 16px; line-height: 24px; outline: none; }
.pillform input::placeholder { color: var(--ink-2); }
.pillform .go { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair-hue); background: radial-gradient(circle at 50% 40%, rgba(110, 217, 192, .35), rgba(27, 122, 99, .5)); color: var(--ink); font-size: 22px; box-shadow: var(--glow); flex: none; }
.brandrow { display: grid; justify-items: center; gap: 4px; }
.brandrow .mark { width: 64px; height: 64px; filter: drop-shadow(0 0 18px rgba(180, 255, 120, .55)) drop-shadow(0 0 40px rgba(242, 201, 125, .25)); animation: breathe 7s ease-in-out infinite; }
.brandrow .brandname { font-family: var(--display); font-size: 34px; line-height: 38px; color: var(--ink); text-shadow: 0 2px 20px rgba(0, 0, 0, .8); }

/* ── content ── */
.page { display: grid; gap: 16px; padding: 0 20px; }
.card { padding: 18px; display: grid; gap: 12px; }
.card h3 { font-size: 22px; line-height: 28px; }
.eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.eyebrow h2 { font-size: 30px; line-height: 34px; }
.eyebrow .more { color: var(--violet-text); font-size: 14px; font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 8px; text-align: center; }
.stats div { display: grid; gap: 2px; border-right: 1px solid var(--hair); }
.stats div:last-child { border-right: 0; }
.stats b { font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 38px; color: var(--ink); }
.stats span { font-size: 13px; color: var(--ink-3); }
.opt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; width: 100%; text-align: left; color: var(--ink); }
.opt .ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair-hue); background: var(--wash); color: var(--violet-text); flex: none; box-shadow: var(--glow); font-family: var(--emoji); font-size: 22px; }
.opt .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.opt .ico.gold { color: var(--gold); border-color: rgba(242, 201, 125, .5); background: rgba(242, 201, 125, .08); box-shadow: var(--glow-gold); }
.opt .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.opt .grow b { font-weight: 500; font-size: 17px; }
.opt .grow span { font-size: 14px; line-height: 20px; color: var(--ink-3); }
.opt .arrow { color: var(--violet-text); font-size: 20px; }
.rows { display: grid; gap: 10px; }
.entry { padding: 14px 16px; display: grid; grid-template-columns: 56px 1fr; gap: 12px; text-align: left; color: var(--ink); width: 100%; }
.entry .thumb { width: 56px; height: 56px; border-radius: var(--r-14); display: grid; place-items: center; font-family: var(--emoji); font-size: 30px; background: var(--wash); border: 1px solid var(--hair); overflow: hidden; }
.entry .thumb img { width: 100%; height: 100%; object-fit: cover; }
.entry .text { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.entry .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.entry .tags span { font-size: 13px; line-height: 16px; padding: 3px 9px; border-radius: var(--pill); border: 1px solid var(--hair); color: var(--ink-3); }

/* ── the garden: emojis on the golden spiral, over a scene ── */
.garden { position: relative; height: 360px; overflow: hidden; }
.garden .art { opacity: .55; animation: none; -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(90% 90% at 50% 50%, #000 30%, transparent 100%); }
.garden .orb { position: absolute; transform: translate(-50%, -50%); z-index: 1; }
.garden .orb.p0 { width: 40px; height: 40px; font-size: 20px; }
.garden .orb.p1 { width: 48px; height: 48px; font-size: 24px; }
.garden .orb.p2 { width: 58px; height: 58px; font-size: 30px; }
.garden .orb.p3 { width: 68px; height: 68px; font-size: 36px; box-shadow: var(--glow); border-color: var(--hair-hue); }
.garden .orb.p4 { width: 78px; height: 78px; font-size: 42px; box-shadow: var(--glow-gold); border-color: rgba(242, 201, 125, .6); }
.garden .empty-note { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 12px; padding: 0 24px; }
.garden .empty-note .orb { position: static; transform: none; }
.pick { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.pick::-webkit-scrollbar { display: none; }
.tools { display: flex; gap: 8px; }
.tools .chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.photoprev { display: grid; justify-items: start; gap: 6px; }
.photoprev img { max-height: 140px; border-radius: var(--r-14); }

/* ── the growth book ── */
.seg { display: grid; grid-template-columns: repeat(3, minmax(max-content, 1fr)); padding: 4px; gap: 4px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { white-space: nowrap; padding: 0 12px; }
.seg button { min-height: 44px; border-radius: var(--pill); font-size: 14px; font-weight: 500; color: var(--ink-3); }
.seg button.on { background: var(--hue-16); color: var(--ink); border: 1px solid var(--hair-hue); }
.phase { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; }
.phase .ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--emoji); font-size: 24px; border: 1px solid var(--hair-hue); background: var(--wash); box-shadow: var(--glow); }
.phase .ico.gold { border-color: rgba(242, 201, 125, .55); background: rgba(242, 201, 125, .08); box-shadow: var(--glow-gold); }
.phase b { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 26px; }
.phase .cap { display: block; }
.phase .day { text-align: right; color: var(--violet-text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.recipe { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; text-align: left; width: 100%; color: var(--ink); }
.recipe .f { font-family: var(--emoji); font-size: 22px; line-height: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.recipe .f .op { font-family: var(--body); color: var(--violet-text); font-size: 15px; }
.recipe .name { grid-column: 1; font-weight: 500; }
.recipe .cat { grid-column: 2; grid-row: 1; color: var(--violet-text); font-size: 13px; font-weight: 500; }
.recipe .line { grid-column: 1 / -1; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.recipe.made { border-color: var(--hair-hue); box-shadow: var(--lit-rest), var(--glow); }
.arc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--emoji); font-size: 26px; }
.arc .arrow { font-family: var(--body); color: var(--violet-text); font-size: 16px; }
.arc .dim { opacity: .35; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.links { display: flex; gap: 20px; flex-wrap: wrap; }
.links button, .links a { color: var(--violet-text); font-size: 15px; font-weight: 500; text-decoration: none; }

/* ── give · projects · vault · earth ── */
.partner { display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none; }
.partner .logo { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #5B3BE0, #A66BFF); color: #fff; font-weight: 700; font-family: var(--display); font-size: 24px; flex: none; }
.partner .grow { flex: 1; display: grid; gap: 2px; }
.partner .grow b { font-size: 18px; font-weight: 500; }
.partner .verified { color: var(--violet-text); font-size: 13px; }
.partner .quote { color: var(--ink-2); font-size: 14px; line-height: 20px; font-style: italic; }
.projects { display: grid; gap: 12px; }
.project { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; align-items: center; text-align: left; width: 100%; color: var(--ink); text-decoration: none; }
.project .pic { width: 96px; height: 96px; border-radius: var(--r-14); background-size: cover; background-position: center; border: 1px solid var(--hair); }
.project .grow { display: grid; gap: 4px; }
.project .grow b { font-size: 17px; font-weight: 500; }
.project .tag { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-text); }
.project .n { font-size: 13px; color: var(--ink-3); }
.wish { padding: 14px 16px; display: grid; gap: 6px; }
.wish p { font-family: var(--display); font-size: 20px; line-height: 26px; }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.cats button { display: grid; justify-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.cats .ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair-hue); background: var(--wash); box-shadow: var(--glow); font-family: var(--emoji); font-size: 24px; }
.doorcard { position: relative; min-height: 240px; border-radius: var(--r-24); overflow: hidden; display: grid; align-content: end; gap: 4px; padding: 18px; text-align: left; color: var(--ink); width: 100%; border: 1px solid var(--hair-2); text-decoration: none; }
.doorcard .art { -webkit-mask-image: none; mask-image: none; opacity: 1; animation: none; }
.doorcard .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 9, 18, .05), rgba(5, 9, 18, .92) 78%); }
.doorcard > :not(.art) { position: relative; z-index: 1; }
.doorcard h3 { font-size: 26px; line-height: 30px; }

/* ── the galaxy ── */
.galaxy { position: relative; min-height: 440px; border-radius: var(--r-24); overflow: hidden; border: 1px solid var(--hair-2); }
.galaxy .art { -webkit-mask-image: none; mask-image: none; opacity: 1; animation: none; }
.galaxy .node { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; color: var(--ink); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; z-index: 1; text-shadow: 0 1px 8px #000; }
.galaxy .node .ico { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--hair-hue); background: rgba(5, 9, 18, .5); display: grid; place-items: center; font-family: var(--emoji); font-size: 22px; box-shadow: var(--glow); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.galaxy .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; z-index: 1; filter: drop-shadow(0 0 24px rgba(242, 201, 125, .5)); animation: breathe 6s ease-in-out infinite; }

/* ── THE BAR: Grow · the star, risen · Give ── */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(96px + var(--sab)); padding: 0 14px var(--sab); display: flex; justify-content: center; pointer-events: none; }
.tabs .bar { pointer-events: auto; position: relative; width: min(100%, 520px); height: 78px; margin-top: 12px; border-radius: 32px; background: linear-gradient(180deg, rgba(22, 27, 46, .92), rgba(6, 9, 18, .96)); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; box-shadow: 0 -10px 40px rgba(0, 0, 0, .55), 0 0 40px rgba(110, 217, 192, .08), inset 0 1px 0 rgba(255, 255, 255, .1); }
.tabs .bar::before { content: ""; position: absolute; left: 50%; top: -1px; width: 110px; height: 40px; transform: translateX(-50%); border-radius: 0 0 60px 60px; background: radial-gradient(60px 30px at 50% 0%, rgba(242, 201, 125, .22), transparent 70%); pointer-events: none; }
.tabs button { display: grid; justify-items: center; gap: 4px; color: var(--ink-3); font-size: 13px; font-weight: 500; letter-spacing: .02em; height: 78px; align-content: center; transition: color var(--t) var(--ease); }
.tabs button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: filter var(--t) var(--ease); }
.tabs button.on { color: var(--violet-text); }
.tabs button.on svg { filter: drop-shadow(0 0 8px rgba(110, 217, 192, .9)); }
.tabs button.give.on { color: var(--gold); }
.tabs button.give.on svg { filter: drop-shadow(0 0 8px rgba(242, 201, 125, .9)); }
.tabs .star { position: relative; align-content: end; padding-bottom: 12px; color: var(--ink); }
.tabs .star .core { position: relative; width: 64px; height: 64px; margin-bottom: 2px; transform: translateY(-16px); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #1c1a33 0%, #0a0c19 72%); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 0 0 7px var(--ground), 0 0 26px rgba(242, 201, 125, .28), 0 0 70px rgba(150, 120, 255, .22), inset 0 -10px 20px rgba(120, 90, 255, .18); transition: box-shadow var(--t) var(--ease); }
.tabs .star .core::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 3px; background: conic-gradient(from 215deg, transparent 0%, rgba(242, 201, 125, 0) 12%, rgba(242, 201, 125, .95) 30%, #FFF5D6 50%, rgba(242, 201, 125, .95) 70%, rgba(242, 201, 125, 0) 88%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .9; }
.tabs .star .core svg { width: 30px; height: 30px; fill: #FFF3C4; stroke: none; filter: drop-shadow(0 0 8px rgba(255, 230, 160, .95)) drop-shadow(0 0 22px rgba(242, 201, 125, .6)); }
.tabs .star.on .core { box-shadow: 0 0 0 7px var(--ground), 0 0 34px rgba(242, 201, 125, .5), 0 0 90px rgba(150, 120, 255, .35), inset 0 -10px 20px rgba(120, 90, 255, .25); }
.tabs .star span.lbl { transform: translateY(-10px); }
body.room .tabs { display: none; }

/* ── sheets ── */
.scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade var(--t-fast) var(--ease); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-height: calc(100dvh - 32px - var(--sat)); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 20px calc(24px + var(--sab)); border-radius: 28px 28px 0 0; background: var(--chrome); border-top: 1px solid var(--hair-2); display: grid; gap: 16px; align-content: start; animation: sheet-in var(--t) var(--ease); scrollbar-width: none; margin: 0 auto; max-width: 560px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.sheet::-webkit-scrollbar { display: none; }
.sheet .grabber { width: 36px; height: 4px; border-radius: 2px; background: var(--hair-2); margin: 0 auto 4px; }
.sheet h2 { font-size: 30px; line-height: 34px; }
.sheet.out { animation: sheet-out var(--t-fast) var(--ease) forwards; }
.sheet .hero-sm { display: grid; place-items: center; gap: 8px; text-align: center; }
.sheet .actions { display: grid; gap: 10px; }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes sheet-out { to { transform: translateY(24px); opacity: 0 } }

/* ── rooms: the splash, the gift journey, ceremonies, the laws ── */
#splash { position: fixed; inset: 0; z-index: 60; background: var(--ground); display: grid; place-items: center; overflow: hidden; transition: opacity 900ms var(--ease); }
#splash.out { opacity: 0; pointer-events: none; }
#splash .art { -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(90% 90% at 50% 50%, #000 40%, transparent 100%); }
#splash .brandrow { position: relative; z-index: 1; gap: 10px; }
#splash .brandrow .mark { width: 120px; height: 120px; }
.room-page { position: fixed; inset: 0; z-index: 40; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--ground); display: grid; grid-template-rows: auto 1fr auto; }
.room-page .rhead { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + var(--sat)) 20px 8px; position: relative; z-index: 2; }
.room-page .rhead .brand { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 22px; }
.room-page .rhead .brand img { width: 26px; height: 26px; }
.room-page .rhead button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center; color: var(--ink-2); background: rgba(5, 9, 18, .45); font-size: 20px; }
.room-page .rart { position: absolute; inset: 0; z-index: 0; background: center 22% / cover no-repeat; opacity: 0; animation: art-in 1.4s var(--ease) forwards; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%), radial-gradient(120% 100% at 50% 35%, #000 50%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%), radial-gradient(120% 100% at 50% 35%, #000 50%, transparent 100%); mask-composite: intersect; }
html.landed .room-page .rart { opacity: 1; animation: none; }
.room-page .rbody { position: relative; z-index: 1; display: grid; align-content: end; gap: 14px; padding: 300px 24px 20px; text-align: center; max-width: 560px; margin: 0 auto; width: 100%; }
.room-page .rfoot { position: relative; z-index: 1; padding: 0 24px calc(24px + var(--sab)); display: grid; gap: 10px; max-width: 560px; margin: 0 auto; width: 100%; }
.room-page .rfoot .kicker { text-align: center; }
.room-page h1 { font-size: clamp(40px, 12vw, 60px); line-height: 1.02; text-shadow: 0 2px 30px rgba(0, 0, 0, .8); }
.room-page .msg { padding: 18px 20px; text-align: left; font-family: var(--display); font-size: 20px; line-height: 28px; color: var(--ink); }
.room-page .msg .from { display: block; text-align: right; font-size: 17px; color: var(--ink-3); margin-top: 8px; }
.progress { height: 6px; border-radius: 3px; background: var(--raise-2); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hue), var(--star)); animation: fill 2.6s var(--ease) forwards; }
@keyframes fill { to { width: 100%; } }
.timeline { display: grid; text-align: left; }
.tl { display: grid; grid-template-columns: 56px 1fr; gap: 14px; position: relative; padding-bottom: 18px; }
.tl::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 1px; background: var(--hair-hue); }
.tl:last-child::before { display: none; }
.tl .ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--emoji); font-size: 24px; border: 1px solid var(--hair-hue); background: rgba(5, 9, 18, .5); box-shadow: var(--glow); }
.tl .ico.gold { border-color: rgba(242, 201, 125, .55); background: rgba(242, 201, 125, .08); box-shadow: var(--glow-gold); }
.tl b { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 26px; display: block; }
.tl .cap { display: block; }
.tl q { display: block; font-style: italic; color: var(--ink-2); margin-top: 2px; }
.graph { width: 100%; height: 180px; }
.graph .line { fill: none; stroke: var(--gold); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(242, 201, 125, .6)); }
.graph .pt { fill: var(--star); }
.graph .lbl { fill: var(--ink-3); font-size: 13px; font-family: var(--body); }
.choice { display: flex; align-items: center; gap: 14px; padding: 14px 16px; width: 100%; text-align: left; color: var(--ink); }
.choice .ico { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center; font-family: var(--emoji); font-size: 20px; flex: none; }
.choice .grow { flex: 1; display: grid; gap: 2px; }
.choice .grow b { font-weight: 500; }
.choice .grow span { font-size: 13px; color: var(--ink-3); }
.choice .radio { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--hair-2); }
.choice.on { border-color: var(--hair-hue); box-shadow: var(--glow); }
.choice.on .radio { background: var(--hue); border-color: var(--hue); box-shadow: 0 0 10px var(--hue); }
#ceremony { position: fixed; inset: 0; z-index: 45; background: var(--ground); display: grid; place-items: center; padding: 24px; animation: fade var(--t) var(--ease); overflow: hidden; }
#ceremony .art { opacity: .5; animation: none; -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(90% 90% at 50% 50%, #000 30%, transparent 100%); }
.cer { position: relative; z-index: 1; display: grid; place-items: center; gap: 14px; text-align: center; width: min(100%, 420px); }
.cer .big { font-family: var(--emoji); font-size: 112px; line-height: 1; padding: 16px; filter: drop-shadow(0 0 30px rgba(110, 217, 192, .55)); animation: rise var(--t) var(--ease) both; }
.cer h2 { font-size: 40px; line-height: 44px; animation: rise var(--t) var(--ease) 120ms both; text-shadow: 0 2px 24px rgba(0, 0, 0, .8); }
.cer p { color: var(--ink-2); animation: rise var(--t) var(--ease) 240ms both; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.cer .kicker { animation: rise var(--t) var(--ease) 360ms both; }
.laws { position: fixed; inset: 0; z-index: 44; background: var(--ground); overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.law { min-height: 100svh; scroll-snap-align: start; display: grid; align-content: center; justify-items: center; gap: 18px; text-align: center; padding: 24px; }
.law h1 { font-size: clamp(34px, 10vw, 60px); line-height: 1.1; max-width: 14em; }
.skip { position: fixed; right: 20px; top: calc(20px + var(--sat)); z-index: 2; }
#toast { position: fixed; left: 50%; bottom: calc(112px + var(--sab)); transform: translate(-50%, 12px); z-index: 50; padding: 10px 16px; border-radius: var(--pill); background: var(--chrome); border: 1px solid var(--hair-2); font-size: 15px; line-height: 20px; color: var(--ink); opacity: 0; transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease); pointer-events: none; max-width: 88vw; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.noscript { position: fixed; inset: 20px; z-index: 99; display: grid; place-content: center; text-align: center; padding: 24px; }
@media (min-width: 720px) { .hero { min-height: 560px; } .garden { height: 400px; } }

/* ── v9 · the Gate, the song, the goals, the journal ── */
.tabs .star .core { overflow: visible; }
.tabs .star .core img { width: 44px; height: 44px; position: relative; z-index: 1; filter: drop-shadow(0 0 10px rgba(180, 255, 120, .7)) drop-shadow(0 0 26px rgba(242, 201, 125, .45)); animation: breathe 6s ease-in-out infinite; }
.tabs .star .core::before { display: none; }
.tabs .star .core .ring { position: absolute; inset: -4px; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, transparent 0%, rgba(110, 217, 192, .0) 10%, rgba(110, 217, 192, .9) 28%, #FFF5D6 40%, rgba(242, 201, 125, .95) 52%, rgba(242, 201, 125, 0) 70%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: sway 9s ease-in-out infinite; opacity: .95; }
.tabs .star .core::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 201, 125, .22), transparent 70%); pointer-events: none; animation: breathe 6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-30deg); opacity: .75; } 50% { transform: rotate(30deg); opacity: 1; } }
.top .sound { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center; color: var(--ink-2); background: rgba(5, 9, 18, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.top .sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.top .sound.on { color: var(--violet-text); border-color: var(--hair-hue); box-shadow: var(--glow); }
.top .right { display: flex; gap: 8px; }
.goal { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; width: 100%; color: var(--ink); }
.goal .orb { width: 44px; height: 44px; font-size: 22px; }
.goal .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.goal .grow b { font-weight: 500; font-family: var(--display); font-size: 20px; line-height: 26px; }
.goal .grow span { font-size: 13px; color: var(--ink-3); }
.goal.mine { border-color: var(--hair-hue); }
.goal .x { color: var(--ink-3); font-size: 18px; padding: 6px; }
.stream { position: relative; overflow: hidden; padding: 18px; display: grid; gap: 12px; }
.stream .art { -webkit-mask-image: none; mask-image: none; opacity: .28; animation: none; }
.stream > :not(.art) { position: relative; z-index: 1; }
.band { display: flex; gap: 4px; height: 12px; }
.band i { flex: 1; border-radius: 3px; background: var(--raise-2); }
.band i.lit { background: var(--hue); box-shadow: 0 0 8px var(--hue-48); }
.band i.gold { background: var(--gold); box-shadow: 0 0 8px rgba(242, 201, 125, .6); }
.dayhead { display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px; }
.dayhead b { font-family: var(--display); font-weight: 500; font-size: 22px; }
.q { text-align: left; }
.q button { text-align: left; font: inherit; color: inherit; line-height: inherit; }
#ceremony video.explode { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
#ceremony .cer.hidden-until { opacity: 0; }
#ceremony .cer.reveal { animation: reveal 900ms var(--ease) forwards; }
@keyframes reveal { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
#ceremony .flash { position: absolute; inset: 0; background: #fff7d6; opacity: 0; pointer-events: none; z-index: 0; }
#ceremony .flash.on { animation: flashout 1.4s var(--ease) forwards; }
@keyframes flashout { from { opacity: .95; } to { opacity: 0; } }

/* ── v10 · the scene is the screen ── */
#scene { position: fixed; inset: 0; z-index: 0; background: var(--ground); overflow: hidden; }
#scene .layer { position: absolute; inset: 0; background: center 30% / cover no-repeat; opacity: 0; transition: opacity 1.4s ease; }
#scene .layer.in { opacity: 1; }
#scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
#scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 9, 18, .10) 0%, rgba(5, 9, 18, .04) 35%, rgba(5, 9, 18, .46) 100%); pointer-events: none; }
.stars { opacity: .5; z-index: 1; }
.hero .art { display: none; }
.hero::after { display: none; }
.hero { min-height: 82svh; }
.hero.home { min-height: calc(100svh - 8px); }
.glass { background: rgba(5, 9, 18, .46); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-color: rgba(255, 255, 255, .12); }
.kicker, .cap, .eyebrow h2, .page h2, .page h3 { text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.tabs .bar { background: linear-gradient(180deg, rgba(22, 27, 46, .78), rgba(6, 9, 18, .9)); }
/* the centre: a squircle, his logo, big */
.tabs .star .core { width: 82px; height: 82px; border-radius: 28%; transform: translateY(-30px); background: radial-gradient(circle at 50% 60%, #1c1a33 0%, #0a0c19 72%); box-shadow: 0 0 0 8px rgba(5, 9, 18, .82), 0 0 30px rgba(242, 201, 125, .32), 0 0 80px rgba(150, 120, 255, .25), inset 0 -10px 22px rgba(120, 90, 255, .18); }
.tabs .star.on .core { box-shadow: 0 0 0 8px rgba(5, 9, 18, .82), 0 0 40px rgba(242, 201, 125, .55), 0 0 100px rgba(150, 120, 255, .38), inset 0 -10px 22px rgba(120, 90, 255, .25); }
.tabs .star .core img { width: 70px; height: 70px; }
.tabs .star .core .ring { inset: -5px; border-radius: 30%; padding: 3px; }
.tabs .star .core::after { inset: -22px; border-radius: 40%; }
.tabs .star span.lbl { transform: translateY(-22px); }
.tabs { height: calc(104px + var(--sab)); }
#view { padding-bottom: calc(132px + var(--sab)); }
/* the ritual */
#splash { background: #05070f; }
#splash video.explode { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
#splash .white { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #fffdf2 0%, #fff3c4 45%, #ffe39a 100%); opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }
#splash .white.on { opacity: 1; }
#splash .brandrow.ritual { position: absolute; left: 0; right: 0; bottom: 14%; opacity: 0; transition: opacity 1.2s ease .3s; }
#splash .brandrow.ritual.lit { opacity: 1; }
#splash .brandrow.ritual .brandname { color: #2A1D04; text-shadow: 0 0 30px rgba(255, 255, 255, .8); }
#splash .brandrow.ritual .kicker { color: #6b4e0a; text-shadow: none; }
#splash .brandrow.ritual .mark { filter: drop-shadow(0 0 30px rgba(255, 255, 255, .9)); }
#splash .skiphint { position: absolute; left: 0; right: 0; bottom: calc(28px + var(--sab)); text-align: center; text-shadow: 0 1px 10px #000; }
#splash.out { transition: opacity 1.5s ease; }
@media (min-width: 900px) { #view { max-width: 640px; } .hero .statement { font-size: 44px; line-height: 1.1; } }
/* ── v10b · room for the risen core; a scrim where the words sit ── */
.hero.home { padding-bottom: calc(190px + var(--sab)); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 9, 18, .72) 0%, rgba(5, 9, 18, .46) 14%, rgba(5, 9, 18, 0) 36%, rgba(5, 9, 18, 0) 58%, rgba(5, 9, 18, .7) 100%); }
.hero.room-hero::before { background: linear-gradient(180deg, rgba(5, 9, 18, .72) 0%, rgba(5, 9, 18, .4) 20%, rgba(5, 9, 18, 0) 48%, rgba(5, 9, 18, .55) 100%); }

/* ── v11 · readable: bright ink, big type, nothing soft ── */
.top .brandname { font-size: 26px; line-height: 30px; }
.top .you, .top .back, .top .sound { color: var(--ink); }
.hero .kicker { font-size: 14px; line-height: 20px; }
.hero .statement { font-size: clamp(32px, 9vw, 42px); }
.pillform input { font-size: 18px; line-height: 26px; }
.pillform input::placeholder { color: var(--violet-text); }
.brandrow .brandname { font-size: 36px; line-height: 40px; }
.card h3 { font-size: 24px; line-height: 30px; }
.eyebrow h2 { font-size: 32px; line-height: 36px; }
.eyebrow .more { font-size: 16px; font-weight: 600; }
.stats b { font-size: 36px; line-height: 40px; }
.stats span { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.opt .grow b { font-size: 19px; font-weight: 600; }
.opt .grow span { font-size: 16px; line-height: 22px; color: var(--ink); }
.opt .arrow { font-weight: 600; }
.entry .text { font-size: 17px; line-height: 25px; }
.entry .tags span { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink); border-color: var(--hair-2); }
.seg button { font-size: 16px; font-weight: 600; color: var(--ink); }
.phase b { font-size: 24px; line-height: 28px; }
.phase .day { font-size: 15px; font-weight: 700; }
.recipe .f .op { font-size: 17px; font-weight: 600; }
.recipe .name { font-size: 18px; font-weight: 600; }
.recipe .cat { font-size: 15px; font-weight: 700; }
.recipe .line { font-size: 16px; line-height: 22px; color: var(--ink); }
.arc .arrow { font-size: 18px; font-weight: 600; }
.arc .dim { opacity: .45; }
.links button, .links a { font-size: 17px; font-weight: 600; }
.partner .grow b { font-size: 20px; font-weight: 600; }
.partner .verified { font-size: 15px; font-weight: 600; }
.partner .quote { font-size: 16px; line-height: 24px; color: var(--ink); }
.project .grow b { font-size: 19px; font-weight: 600; }
.project .tag { font-size: 14px; font-weight: 700; }
.project .n { font-size: 15px; font-weight: 600; color: var(--ink); }
.wish p { font-size: 22px; line-height: 28px; }
.cats button { font-size: 15px; font-weight: 600; color: var(--ink); }
.doorcard h3 { font-size: 28px; line-height: 32px; }
.doorcard .cap { font-size: 17px; line-height: 24px; }
.galaxy .node { font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.tabs button { font-size: 14px; font-weight: 700; color: var(--ink); }
.sheet h2 { font-size: 32px; line-height: 36px; }
.room-page .rhead .brand { font-size: 24px; }
.room-page .rhead button { color: var(--ink); }
.room-page .msg { font-size: 22px; line-height: 30px; }
.room-page .msg .from { font-size: 18px; color: var(--ink); }
.tl b { font-size: 24px; line-height: 28px; }
.tl q { font-size: 18px; line-height: 26px; color: var(--ink); }
.graph .lbl { fill: var(--ink); font-size: 13px; font-weight: 600; }
.choice .grow b { font-size: 18px; font-weight: 600; }
.choice .grow span { font-size: 15px; line-height: 20px; color: var(--ink); }
.cer h2 { font-size: 42px; line-height: 46px; }
.cer p { font-size: 18px; line-height: 26px; color: var(--ink); }
#toast { font-size: 16px; line-height: 22px; font-weight: 600; }
.goal .grow b { font-size: 22px; line-height: 28px; }
.goal .grow span { font-size: 15px; font-weight: 600; color: var(--ink); }
.goal .x { color: var(--ink); font-size: 20px; }
.dayhead b { font-size: 24px; }
.btn.quiet { font-weight: 600; }
#splash .skiphint { font-size: 14px; }
.kicker, .cap, .statement, .eyebrow .more, .stats, .links, .seg, .label { text-shadow: 0 1px 12px rgba(0, 0, 0, .75); }
/* labels stay small caps at 14; a kicker that is a sentence reads like a sentence */
.kicker { font-size: 14px; line-height: 20px; }
p.kicker, .kicker.skiphint { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.galaxy .node { font-size: 13px; }
/* a kicker that ends a sentence is a sentence; fields read on any scene */
.kicker.say { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.hero .low .kicker { font-size: 15px; }
.hero .pillform { width: calc(100% + 16px); max-width: 436px; margin-left: -8px; margin-right: -8px; padding-left: 16px; }
.pillform input { font-size: 17px; }
.eyebrow .more { white-space: nowrap; }
.field { background: rgba(5, 9, 18, .55); border-color: rgba(255, 255, 255, .26); }
.seg { background: rgba(5, 9, 18, .55); }
/* words that sit straight on a scene carry their own shadow */
.dayhead b, .dayhead span, .eyebrow h2, .page h2, .page h3, .hero .statement, .brandrow .kicker, .hero .kicker, .stats b, .stats span { text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 18px rgba(0, 0, 0, .85); }
/* buttons stand on dark glass so their words read over the brightest scene */
.btn { background: rgba(5, 9, 18, .62); border-color: rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn.mint { background: linear-gradient(180deg, rgba(24, 104, 82, .92), rgba(12, 66, 52, .96)); border-color: rgba(185, 255, 228, .6); color: #fff; }
.btn.gold { background: linear-gradient(180deg, rgba(122, 84, 18, .92), rgba(78, 52, 10, .96)); border-color: rgba(255, 217, 138, .7); color: #FFF3C4; }
.btn.quiet { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── v12 · the core sits in the bar: tight ring, two arcs, embers, a light that spills onto the bar ── */
.tabs { height: calc(98px + var(--sab)); }
.tabs .bar { height: 82px; margin-top: 16px; border-radius: 34px; overflow: visible; }
.tabs .bar::before { display: none; }
.tabs .star { padding-bottom: 6px; overflow: visible; }
.tabs .star::before { content: ""; position: absolute; left: 50%; top: 42%; width: 176px; height: 72px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(255, 217, 138, .32) 0%, rgba(185, 255, 228, .14) 42%, transparent 72%); pointer-events: none; animation: breathe 5s ease-in-out infinite; }
.tabs .star .core { width: 68px; height: 68px; border-radius: 26%; transform: translateY(-12px); margin-bottom: 0; background: radial-gradient(circle at 50% 38%, #26315a 0%, #0c1020 68%); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 0 0 4px rgba(5, 9, 18, .92), 0 0 18px rgba(255, 217, 138, .5), 0 0 46px rgba(185, 255, 228, .28), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -8px 16px rgba(120, 90, 255, .2); animation: corebreathe 5s ease-in-out infinite; }
.tabs .star.on .core { box-shadow: 0 0 0 4px rgba(5, 9, 18, .92), 0 0 26px rgba(255, 217, 138, .78), 0 0 64px rgba(185, 255, 228, .4), inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -8px 16px rgba(120, 90, 255, .28); }
@keyframes corebreathe { 0%, 100% { transform: translateY(-12px) scale(1); } 50% { transform: translateY(-13px) scale(1.03); } }
.tabs .star .core img { width: 60px; height: 60px; filter: drop-shadow(0 0 8px rgba(185, 255, 228, .75)) drop-shadow(0 0 20px rgba(255, 217, 138, .55)); }
.tabs .star .core .ring { inset: -3px; border-radius: 29%; padding: 2px; background: conic-gradient(from 0deg, transparent 0%, rgba(185, 255, 228, 0) 12%, rgba(185, 255, 228, .95) 30%, #FFF5D6 42%, rgba(255, 217, 138, 1) 54%, rgba(255, 217, 138, 0) 72%, transparent 100%); animation: sway 7s ease-in-out infinite; }
.tabs .star .core .ring::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from 180deg, transparent 0%, rgba(255, 217, 138, 0) 14%, rgba(255, 217, 138, .9) 32%, #FFF5D6 44%, rgba(185, 255, 228, .95) 56%, rgba(185, 255, 228, 0) 72%, transparent 100%); animation: sway 9s ease-in-out infinite reverse; }
.tabs .star .core::after { inset: -9px; border-radius: 34%; background: radial-gradient(circle, rgba(255, 217, 138, .34), transparent 68%); animation: breathe 5s ease-in-out infinite; }
.tabs .star .core .embers { position: absolute; inset: 0; pointer-events: none; }
.tabs .star .core .embers i { position: absolute; left: 50%; top: 58%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #FFF6D8; box-shadow: 0 0 6px #FFD98A, 0 0 12px rgba(185, 255, 228, .9); opacity: 0; animation: ember 3.8s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes ember { 0% { opacity: 0; transform: translate(var(--dx, 0px), 8px) scale(.5); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--dx, 0px) * 1.7), -54px) scale(1.05); } }
.tabs .star span.lbl { transform: translateY(-2px); }
#view { padding-bottom: calc(118px + var(--sab)); }
.hero.home { padding-bottom: calc(164px + var(--sab)); }

/* ── v12 · every word on a dark plate: the scene stays bright above, the words stand on deep glass below ── */
.hero { padding-bottom: 60px; }
.hero::before { background: linear-gradient(180deg, rgba(5, 9, 18, .84) 0%, rgba(5, 9, 18, .52) 16%, rgba(5, 9, 18, .14) 34%, rgba(5, 9, 18, .2) 46%, rgba(5, 9, 18, .66) 62%, rgba(5, 9, 18, .9) 100%); }
.hero.room-hero::before { background: linear-gradient(180deg, rgba(5, 9, 18, .84) 0%, rgba(5, 9, 18, .48) 22%, rgba(5, 9, 18, .16) 48%, rgba(5, 9, 18, .86) 100%); }
.page { position: relative; z-index: 2; background: linear-gradient(180deg, rgba(5, 9, 18, .76), rgba(5, 9, 18, .84) 120px, rgba(5, 9, 18, .84)); border-radius: 32px 32px 0 0; margin-top: -30px; padding-top: 28px; padding-bottom: 32px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.glass { background: rgba(12, 18, 34, .72); }
.stream { background: rgba(12, 18, 34, .72); }

/* the empty garden: the words stand on a dark pool, the scene stays around them */
.garden .empty-note::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 62% at 50% 55%, rgba(5, 9, 18, .84) 0%, rgba(5, 9, 18, .6) 55%, rgba(5, 9, 18, 0) 100%); }

/* ── v13 · the logo is the core: no plate, sitting in the bar; ring, aura, embers and the light around it, nothing cut ── */
.tabs { height: calc(100px + var(--sab)); }
.tabs .bar { height: 84px; margin-top: 16px; overflow: visible; }
.tabs .star { align-content: center; padding: 0; gap: 0; }
.tabs .star .core { width: 60px; height: 60px; margin: 0; border-radius: 27%; background: none; border: 0; box-shadow: none; overflow: visible; animation: corebreathe 5s ease-in-out infinite; }
@keyframes corebreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.tabs .star .core img { width: 60px; height: 60px; border-radius: 27%; filter: drop-shadow(0 0 10px rgba(185, 255, 228, .8)) drop-shadow(0 0 26px rgba(255, 217, 138, .6)); animation: none; }
.tabs .star.on .core img { filter: drop-shadow(0 0 12px rgba(185, 255, 228, .95)) drop-shadow(0 0 34px rgba(255, 217, 138, .78)); }
.tabs .star .core .ring { inset: -7px; border-radius: 36%; padding: 2px; }
.tabs .star .core .ring::after { border-radius: inherit; }
.tabs .star .core::after { inset: -16px; border-radius: 42%; background: radial-gradient(circle, rgba(255, 217, 138, .4) 0%, rgba(185, 255, 228, .14) 52%, transparent 72%); }
.tabs .star .core .aura { position: absolute; inset: -7px; border-radius: 36%; border: 1.5px solid rgba(255, 236, 190, .9); box-shadow: 0 0 14px rgba(255, 217, 138, .6), inset 0 0 14px rgba(255, 217, 138, .3); opacity: 0; pointer-events: none; animation: aura 4.6s ease-out infinite; }
@keyframes aura { 0% { transform: scale(.94); opacity: .8; } 70% { opacity: .2; } 100% { transform: scale(1.55); opacity: 0; } }
.tabs .star .core .embers i { top: 54%; }
.tabs .star::before { top: 50%; width: 190px; height: 76px; }
.tabs .star span.lbl { display: none; }
#view { padding-bottom: calc(122px + var(--sab)); }
.hero.home { padding-bottom: calc(150px + var(--sab)); }

/* ── v13 · the scene on a desktop: the painting at its own size, on a wall of its own blurred light ── */
#scene .layer { background: none; }
#scene .layer .back, #scene .layer .fore { position: absolute; inset: 0; }
#scene .layer .back { display: none; background: center 30% / cover no-repeat; }
#scene .layer .fore { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; max-width: none; }
@media (min-width: 1024px) {
  #scene .layer .back { display: block; filter: blur(36px) brightness(.6) saturate(1.15); transform: scale(1.14); }
  #scene .layer .fore { left: 50%; right: auto; width: auto; height: 100%; max-width: 100%; transform: translateX(-50%); object-fit: contain; object-position: center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); }
  #view { max-width: 760px; }
  .hero .statement { font-size: 52px; line-height: 1.08; }
  .hero .pillform { max-width: 560px; }
  .garden { height: 460px; }
  .tabs .bar { width: min(100%, 560px); }
}

/* ── v13 · the journal's rooms: threads, folders, milestones; the voice ── */
.thread { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; color: var(--ink); }
.thread .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.thread b { font-size: 19px; font-weight: 600; }
.thread .line { font-size: 16px; line-height: 22px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread .arrow { color: var(--violet-text); font-size: 20px; font-weight: 600; }
.miles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mile { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 14px 8px; text-align: center; font-size: 14px; font-weight: 600; line-height: 18px; color: var(--ink); }
.mile .orb { filter: grayscale(1) brightness(.75); }
.mile.lit .orb { filter: none; box-shadow: var(--glow-gold); border-color: rgba(255, 217, 138, .6); }
.mile .when { font-size: 14px; color: var(--violet-text); font-weight: 700; }
.voiceprev { display: grid; gap: 8px; padding: 12px 14px; }
.voiceprev audio { width: 100%; height: 40px; }
#voice.on { background: rgba(255, 120, 120, .28); border-color: rgba(255, 150, 150, .7); color: #fff; }
.actions { display: grid; gap: 10px; }
.two { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
/* ── v13.1 · the word comes back under the logo, close, the whole group sitting in the bar ── */
.tabs .bar { height: 88px; }
.tabs button { height: 100%; }
.tabs .star { align-content: center; gap: 3px; padding: 0; }
.tabs .star .core { width: 52px; height: 52px; }
.tabs .star .core img { width: 52px; height: 52px; }
.tabs .star .core .ring { inset: -6px; border-radius: 37%; }
.tabs .star .core .aura { inset: -6px; border-radius: 37%; }
.tabs .star .core::after { inset: -14px; }
.tabs .star span.lbl { display: block; transform: none; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--ink); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.tabs .star.on span.lbl { color: var(--violet-text); }
.tabs { height: calc(104px + var(--sab)); }
#view { padding-bottom: calc(126px + var(--sab)); }
.hero.home { padding-bottom: calc(154px + var(--sab)); }

/* ── v14 · his new look: the home text for text, the bar as drawn, pale gold pills, gold-mint glass ── */
.home14 { position: relative; z-index: 2; display: grid; gap: 14px; padding: 0 14px calc(150px + var(--sab)); }
.hh { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 8px; padding: calc(12px + var(--sat)) 2px 4px; }
.hbtn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 9, 18, .62); border: 1px solid rgba(242, 201, 125, .55); box-shadow: 0 0 14px rgba(242, 201, 125, .18); color: #F2C97D; }
.hbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hbrand { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.hlogo { width: 66px; height: 66px; flex: none; border-radius: 26%; filter: drop-shadow(0 0 12px rgba(185, 255, 228, .6)) drop-shadow(0 0 26px rgba(242, 201, 125, .45)); }
.hwords { display: grid; gap: 2px; min-width: 0; }
.hname { font-family: var(--display); font-size: 36px; line-height: 38px; font-weight: 600; color: #F2C97D; text-shadow: 0 0 18px rgba(242, 201, 125, .45), 0 2px 10px rgba(0, 0, 0, .8); white-space: nowrap; }
.hname em { font-style: normal; color: #7FE7C3; }
.htag { font-size: 14px; line-height: 18px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.hcard { position: relative; border-radius: 26px; background: linear-gradient(180deg, rgba(9, 18, 24, .84), rgba(5, 9, 18, .9)); box-shadow: 0 0 26px rgba(242, 201, 125, .12), 0 14px 34px rgba(0, 0, 0, .55); overflow: hidden; color: var(--ink); text-align: left; }
.hcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(242, 201, 125, .85), rgba(127, 231, 195, .5) 50%, rgba(242, 201, 125, .7)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; z-index: 2; }
.hero14 { display: grid; }
.hero14-top { position: relative; z-index: 1; text-align: center; padding: 22px 20px 6px; display: grid; gap: 4px; }
.hero14-top h2 { font-family: var(--display); font-size: 40px; line-height: 44px; font-weight: 500; color: #FFF7D6; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.hero14-top p { font-size: 18px; line-height: 24px; font-weight: 500; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.hero14-art { width: 100%; height: 168px; object-fit: cover; object-position: center 40%; display: block; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); margin-top: -10px; }
.hero14 .gpill { justify-self: center; margin: 4px 0 20px; width: min(100% - 40px, 320px); }
.gpill { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 26px; border-radius: 999px; background: linear-gradient(180deg, #F7F4BC 0%, #DCE697 100%); color: #1E2A10; font-family: var(--body); font-weight: 700; font-size: 20px; line-height: 24px; border: 1px solid rgba(255, 243, 190, .95); box-shadow: 0 0 24px rgba(242, 230, 140, .45), inset 0 1px 0 #fff; text-decoration: none; }
.gpill svg { width: 24px; height: 24px; fill: none; stroke: #1E2A10; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gpill .arr { font-size: 22px; line-height: 1; }
.gpill.sm { min-height: 46px; padding: 0 18px; font-size: 17px; gap: 10px; }
.gpill.sm svg { width: 20px; height: 20px; }
.door { display: grid; grid-template-columns: 118px 1fr 34px; align-items: center; gap: 12px; width: 100%; min-height: 108px; padding: 0 8px 0 0; }
.door .door-art { width: 118px; height: 100%; min-height: 108px; object-fit: cover; display: block; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, #000 70%, transparent 100%); }
.door .door-words { display: grid; gap: 4px; padding: 14px 0; min-width: 0; }
.door .door-words b { font-family: var(--display); font-size: 28px; line-height: 30px; font-weight: 500; color: #FFF7D6; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.door .door-words > span { font-size: 16px; line-height: 22px; font-weight: 500; color: #fff; }
.door .door-go { font-size: 30px; line-height: 1; color: #FFF7D6; text-align: center; font-weight: 500; }
.door.gifts { min-height: 150px; }
.door.gifts .door-art { min-height: 150px; }
.door.gifts .gpill.sm { justify-self: start; margin-top: 8px; }
.together { position: relative; z-index: 1; text-align: center; display: grid; gap: 4px; padding: 14px 0 4px; }
.together h2 { font-family: var(--display); font-size: 30px; line-height: 34px; font-weight: 500; color: #FFE9B0; text-shadow: 0 0 16px rgba(242, 201, 125, .4), 0 2px 10px rgba(0, 0, 0, .9); display: flex; align-items: center; justify-content: center; gap: 12px; }
.together h2 i { font-style: normal; color: #F2C97D; font-size: 18px; }
.together p { font-size: 18px; line-height: 24px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.home14 .stream { border-radius: 26px; background: linear-gradient(180deg, rgba(9, 18, 24, .84), rgba(5, 9, 18, .9)); border: 1px solid rgba(242, 201, 125, .45); }
/* the bar, as drawn: Give · Gratus · Grow, the logo in a gold ring rising from the bar, a gold line beneath */
.tabs { height: calc(112px + var(--sab)); }
.tabs .bar { height: 84px; margin-top: 28px; border-radius: 30px; background: linear-gradient(180deg, rgba(10, 20, 22, .92), rgba(5, 9, 18, .97)); border: 1px solid rgba(242, 201, 125, .5); overflow: visible; }
.tabs .bar::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #F2C97D 20%, #FFF3C4 50%, #F2C97D 80%, transparent); box-shadow: 0 0 12px rgba(242, 201, 125, .8), 0 0 28px rgba(242, 201, 125, .4); }
.tabs button { color: #FFF3C4; font-size: 15px; font-weight: 600; gap: 6px; align-content: center; height: 100%; }
.tabs button svg { width: 28px; height: 28px; stroke: #F2C97D; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(242, 201, 125, .6)); }
.tabs button.on { color: #F2C97D; }
.tabs button.give.on { color: #F2C97D; }
.tabs .star { align-content: start; gap: 0; padding-top: 0; }
.tabs .star .core { width: 76px; height: 76px; border-radius: 50%; transform: translateY(-26px); background: radial-gradient(circle at 50% 40%, #12211c 0%, #050912 72%); border: 2px solid rgba(242, 201, 125, .9); box-shadow: 0 0 0 6px rgba(5, 9, 18, .9), 0 0 24px rgba(242, 201, 125, .6), 0 0 60px rgba(242, 201, 125, .3); animation: none; }
.tabs .star .core img { width: 58px; height: 58px; border-radius: 26%; filter: drop-shadow(0 0 8px rgba(185, 255, 228, .7)) drop-shadow(0 0 18px rgba(242, 201, 125, .5)); }
.tabs .star .core .ring { inset: -7px; border-radius: 50%; padding: 2px; }
.tabs .star .core .ring::after { border-radius: 50%; }
.tabs .star .core .aura { inset: -6px; border-radius: 50%; }
.tabs .star .core::after { inset: -18px; border-radius: 50%; }
.tabs .star span.lbl { display: block; transform: translateY(-20px); font-size: 15px; font-weight: 700; color: #F2C97D; text-shadow: 0 0 10px rgba(242, 201, 125, .5), 0 1px 6px rgba(0, 0, 0, .9); }
.tabs .star::before { top: 42%; width: 200px; height: 90px; }
#view { padding-bottom: calc(136px + var(--sab)); }
.hero.home { padding-bottom: calc(160px + var(--sab)); }
/* pale gold pills carry every primary action now: dark words on light gold read on any scene */
.btn.mint, .btn.gold, .btn.solid { background: linear-gradient(180deg, #F7F4BC 0%, #DCE697 100%); color: #1E2A10; border-color: rgba(255, 243, 190, .95); box-shadow: 0 0 22px rgba(242, 230, 140, .4), inset 0 1px 0 #fff; font-weight: 700; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn.mint svg, .btn.gold svg { stroke: #1E2A10; }
.pillform .go { background: linear-gradient(180deg, #F7F4BC 0%, #DCE697 100%); color: #1E2A10; border-color: rgba(255, 243, 190, .95); }
.glass { border-color: rgba(242, 201, 125, .32); box-shadow: 0 0 18px rgba(242, 201, 125, .08), var(--lit-rest); }
/* the tab intro: the scene's own video, then the light, then the room */
#intro { position: fixed; inset: 0; z-index: 58; background: #05070f; overflow: hidden; }
#intro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
#intro .white { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #fffdf2 0%, #fff3c4 45%, #ffe39a 100%); opacity: 0; transition: opacity 1s ease; pointer-events: none; }
#intro .white.on { opacity: 1; }
#intro .skiphint { position: absolute; left: 0; right: 0; bottom: calc(28px + var(--sab)); text-align: center; text-shadow: 0 1px 10px #000; font-size: 14px; }
#intro.out { opacity: 0; transition: opacity 1.3s ease; pointer-events: none; }
@media (min-width: 1024px) { #intro video { object-fit: contain; background: #05070f; } .home14 { max-width: 640px; margin: 0 auto; } }

/* ── v14.1 · the header on a phone: brand row, then his two lines; doors on one breath; every block on a plate ── */
.hh { grid-template-columns: 46px 1fr 46px; grid-template-rows: auto auto; row-gap: 6px; padding: calc(12px + var(--sat)) 12px 12px; background: linear-gradient(180deg, rgba(5, 9, 18, .82), rgba(5, 9, 18, .62)); border-radius: 26px; border: 1px solid rgba(242, 201, 125, .28); margin-top: 6px; }
.hh .htag { grid-column: 1 / -1; text-align: center; margin: 0; }
.hlogo { width: 60px; height: 60px; }
.hname { font-size: 38px; line-height: 42px; }
.door { grid-template-columns: 104px 1fr 30px; gap: 12px; }
.door .door-art { width: 104px; }
.door .door-words b { font-size: 25px; line-height: 28px; }
.door .door-words > span { font-size: 16px; line-height: 21px; }
.door.gifts .gpill.sm { white-space: nowrap; font-size: 16px; padding: 0 14px; gap: 8px; min-height: 44px; }
.door.gifts .gpill.sm .arr { font-size: 18px; }
.together { background: linear-gradient(180deg, rgba(5, 9, 18, .78), rgba(5, 9, 18, .66)); border: 1px solid rgba(242, 201, 125, .28); border-radius: 26px; padding: 14px 16px; }
.home14 .stream .art { display: none; }
.tabs .star.on span.lbl { color: #F2C97D; }

/* ── v15 · the Emotional TRACE and the Giveth room ── */
.trace3 { display: grid; gap: 8px; padding-top: 4px; }
.trace3 span { display: grid; gap: 2px; padding: 10px 14px; border-radius: 18px; background: rgba(5, 9, 18, .55); border: 1px solid rgba(242, 201, 125, .3); font-size: 16px; line-height: 22px; color: var(--ink); }
.trace3 b { font-family: var(--display); font-size: 20px; font-weight: 500; color: #FFE9B0; }
.gvp { display: grid; grid-template-columns: 76px 1fr 22px; align-items: center; gap: 12px; padding: 10px 12px 10px 0; width: 100%; text-align: left; color: var(--ink); overflow: hidden; }
.gvp-art { width: 76px; height: 76px; object-fit: cover; border-radius: 0 18px 18px 0; display: block; }
.gvp-art.none { display: grid; place-items: center; font-family: var(--emoji); font-size: 30px; background: var(--wash); }
.gvp-words { display: grid; gap: 5px; min-width: 0; }
.gvp-words b { font-size: 18px; line-height: 23px; font-weight: 600; }
.gvp-words .cap { font-size: 15px; line-height: 20px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gvp-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.gvt { font-style: normal; font-size: 13px; line-height: 16px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--ink); white-space: nowrap; }
.gvt.gold { color: #FFD98A; border-color: rgba(255, 217, 138, .6); }
.gvt.mint { color: #B9FFE4; border-color: rgba(185, 255, 228, .6); }
.seedrow.bloomed .ico { box-shadow: var(--glow-gold); border-color: rgba(255, 217, 138, .6); }
.trace-garden { height: 300px; }
.conseed { grid-template-columns: 56px 1fr; }
.conseed .btn.sm { justify-self: start; }
.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
/* the landing uses the same cards and pills as links */
a.gpill, a.hcard, a.door { text-decoration: none; color: var(--ink); }
a.gpill { color: #1E2A10; }

/* ── v17 · nothing runs off the page: a flex or grid child must be allowed to shrink ── */
.stream > *, .page > *, .rows > *, .card > *, .actions > *, .home14 > * { min-width: 0; }
.opt .grow, .thread .grow, .goal .grow, .entry > span, .gvp-words, .door-words, .project .grow, .choice .grow, .partner .grow { min-width: 0; }
.goal .grow b, .goal .grow span, .opt .grow b, .opt .grow span, .thread b { overflow-wrap: anywhere; }
.stream { overflow: visible; }
.glass, .hcard, .stream, .card { max-width: 100%; }
.entry .text, .gvp-words b, .door-words b, .thread .line { overflow-wrap: anywhere; }
/* the palette wraps instead of running off the edge, with a second row and a gentle end */
.pick { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; max-height: 124px; overflow-y: hidden; transition: max-height var(--t) var(--ease); }
.pick.open { max-height: 460px; overflow-y: auto; }
.pick-more { justify-self: start; }
.chips.row { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, #000 88%, transparent 100%); padding-right: 22px; }
.chips.row:last-child, .chips.row.end { -webkit-mask-image: none; mask-image: none; }

/* ── v17 · the project, in depth ── */
.gv-hero { position: relative; margin: -12px -20px 0; }
.gv-hero img { width: 100%; height: 190px; object-fit: cover; display: block; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
.gv-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gv-fact { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 12px 6px; border-radius: 18px; background: rgba(5, 9, 18, .6); border: 1px solid rgba(242, 201, 125, .28); }
.gv-fact b { font-family: var(--display); font-size: 26px; line-height: 30px; font-weight: 500; color: #FFE9B0; }
.gv-fact span { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink); }
.gv-links { display: flex; flex-wrap: wrap; gap: 8px; }
.gv-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(5, 9, 18, .6); border: 1px solid var(--hair-2); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.gv-update { display: grid; gap: 4px; padding: 14px 16px; text-align: left; }
.gv-update b { font-size: 17px; line-height: 22px; font-weight: 600; }
.gv-update .cap { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gv-gift { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.gv-gift b { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; }
.gv-gift .amt { font-family: var(--display); font-size: 20px; color: #FFE9B0; white-space: nowrap; }

/* ── v17 · the journal's month ── */
.cal { display: grid; gap: 10px; padding: 14px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-head b { font-family: var(--display); font-size: 24px; font-weight: 500; color: #FFE9B0; }
.cal-nav { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; line-height: 1; color: #F2C97D; border: 1px solid var(--hair-2); background: rgba(5, 9, 18, .5); }
.cal-nav:disabled { opacity: .3; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow i { font-style: normal; text-align: center; font-size: 13px; font-weight: 700; color: var(--violet-text); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid .pad { display: block; }
.cal-d { position: relative; aspect-ratio: 1; border-radius: 30%; display: grid; place-content: center; gap: 1px; justify-items: center; font-size: 15px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .04); border: 1px solid transparent; }
.cal-d .dots { font-style: normal; font-size: 13px; line-height: 6px; color: var(--violet-text); letter-spacing: -1px; }
.cal-d.on { background: var(--hue-16); border-color: var(--hair-hue); }
.cal-d.today { border-color: rgba(242, 201, 125, .9); color: #FFE9B0; }
.cal-d.sel { background: linear-gradient(180deg, #F7F4BC, #DCE697); color: #1E2A10; border-color: #fff; }
.cal-d.sel .dots { color: #1E2A10; }
.cal-d.future { opacity: .3; }
.chip .emoji { font-family: var(--emoji); }

/* ── v17 · the garden as a field ── */
.garden.field { height: 400px; }
.garden.field .horizon { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 201, 125, .55), transparent); box-shadow: 0 0 18px rgba(242, 201, 125, .35); pointer-events: none; z-index: 0; }
.garden .orb.pledged::after { content: "◆"; position: absolute; right: -2px; top: -6px; font-size: 13px; color: #FFD98A; text-shadow: 0 0 6px rgba(255, 217, 138, .9); }
.garden .orb[style*="--pct"]::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; padding: 2px; background: conic-gradient(rgba(185, 255, 228, .95) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, .1) 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.phaseline { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.phaseline .ph { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); background: rgba(5, 9, 18, .55); border: 1px solid var(--hair); }
.phaseline .ph i { font-style: normal; font-family: var(--emoji); }
.phaseline .ph.on { border-color: var(--hair-hue); box-shadow: 0 0 14px rgba(110, 217, 192, .25); }
/* a grid or flex child must be allowed to shrink, everywhere, or it pushes the page wider than the phone */
.glass > *, .cal > *, .card > *, .page > *, .home14 > *, .sheet > *, .rows > *, .actions > *, .gv-facts > *, .trace3 > * { min-width: 0; }
.cal-grid, .cal-dow, .cal-d, .seg, .seg > * { min-width: 0; }
.cal-d { padding: 0; }

/* ── v18 · the Passage, and a project's own page ── */
.room-page.passage { grid-template-rows: auto 1fr; }
.room-page.passage .rbody { position: relative; z-index: 1; display: grid; gap: 14px; padding: 8px 20px calc(40px + var(--sab)); align-content: start; max-width: 620px; margin: 0 auto; width: 100%; }
.room-page.passage h1 { font-size: clamp(34px, 10vw, 52px); line-height: 1.04; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pcell { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 12px 6px; border-radius: 20px; background: rgba(5, 9, 18, .6); border: 1px solid rgba(242, 201, 125, .28); min-width: 0; }
.pcell b { font-family: var(--display); font-size: 20px; font-weight: 500; color: #FFE9B0; }
.pcell span:last-child { font-size: 13px; line-height: 17px; color: var(--ink); overflow-wrap: anywhere; }

/* ── v18 · the month at a glance, and the garden's own controls ── */
.monthsum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.monthsum span { display: grid; justify-items: center; gap: 1px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--ink); text-align: center; min-width: 0; }
.monthsum b { font-family: var(--display); font-size: 22px; line-height: 26px; font-weight: 500; color: #FFE9B0; }
.tended { padding: 14px 16px; display: grid; gap: 8px; }
.tended .btn { justify-self: start; }
/* the Passage reads: the scene stays bright at the top, the words stand on deep glass */
.room-page.passage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 9, 18, .72) 0%, rgba(5, 9, 18, .3) 14%, rgba(5, 9, 18, .1) 24%, rgba(5, 9, 18, .82) 44%, rgba(5, 9, 18, .94) 100%); }
.room-page.passage .rbody { background: linear-gradient(180deg, rgba(5, 9, 18, 0), rgba(5, 9, 18, .55) 10%, rgba(5, 9, 18, .72) 24%); border-radius: 32px 32px 0 0; padding-top: 22px; margin-top: 22svh; }
.room-page.passage .rbody > * { position: relative; z-index: 1; }
.room-page.passage .cap, .room-page.passage .statement { text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
/* ── v19 · the project card: a media banner, never a crop that loses the picture ── */
.gvp { display: grid; grid-template-columns: 1fr 22px; grid-template-areas: "art art" "words go"; align-items: start; gap: 12px; padding: 0 0 14px; overflow: hidden; }
.gvp .gvp-art { grid-area: art; position: relative; display: block; width: 100%; height: 148px; overflow: hidden; border-radius: 26px 26px 0 0; background: #0a1018; }
.gvp .gvp-art .gvp-wash { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: blur(22px) brightness(.55) saturate(1.2); }
.gvp .gvp-art img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.gvp .gvp-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 9, 18, .86) 100%); pointer-events: none; }
.gvp .gvp-none { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--emoji); font-size: 54px; background: radial-gradient(circle at 50% 45%, rgba(110, 217, 192, .18), transparent 70%); }
.gvp .gvp-words { grid-area: words; padding: 0 0 0 16px; gap: 7px; }
.gvp .gvp-words b { font-family: var(--display); font-size: 25px; line-height: 28px; font-weight: 500; color: #FFF7D6; }
.gvp .arrow { grid-area: go; align-self: center; padding-right: 12px; }
.gvp-tags { gap: 6px; }

/* ── v19 · Gratus Guides ── */
.creed { display: grid; gap: 8px; padding: 20px; text-align: center; }
.creed .statement { font-size: 30px; line-height: 34px; color: #FFE9B0; }
.creed .body { text-align: left; }
.loopline { display: grid; gap: 8px; }
.loopstep { display: grid; grid-template-columns: 52px 1fr; grid-template-areas: "ico name" "ico line"; align-items: center; gap: 2px 12px; padding: 12px 16px; border-radius: 22px; background: rgba(5, 9, 18, .6); border: 1px solid rgba(242, 201, 125, .28); }
.loopstep .ls-ico { grid-area: ico; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--emoji); font-size: 24px; background: var(--wash); border: 1px solid var(--hair-hue); box-shadow: var(--glow); }
.loopstep b { grid-area: name; font-family: var(--display); font-size: 24px; font-weight: 500; color: #FFE9B0; }
.loopstep > span:last-child { grid-area: line; font-size: 16px; line-height: 21px; color: var(--ink); }
.ls-join { display: block; width: 2px; height: 14px; margin-left: 42px; background: linear-gradient(180deg, rgba(242, 201, 125, .8), rgba(242, 201, 125, .15)); border-radius: 2px; }
.guide { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 16px; align-items: start; }
.guide .g-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--emoji); font-size: 22px; background: rgba(5, 9, 18, .6); border: 1px solid var(--hair-2); }
.guide div { display: grid; gap: 4px; min-width: 0; }
.guide b { font-size: 19px; line-height: 24px; font-weight: 600; color: #FFF7D6; }

/* ── v19 · Gratus Vibes ── */
.vibehead { display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: start; padding: 16px; }
.vibehead .v-ico { width: 62px; height: 62px; border-radius: 26%; display: grid; place-items: center; font-family: var(--emoji); font-size: 30px; background: radial-gradient(circle at 50% 40%, #1c2a33, #0a0f1c); border: 1px solid rgba(242, 201, 125, .6); box-shadow: 0 0 20px rgba(242, 201, 125, .28); }
.vibehead div { display: grid; gap: 4px; min-width: 0; }
.vibehead b { font-family: var(--display); font-size: 26px; line-height: 30px; font-weight: 500; color: #FFE9B0; }
.vibehead .actions { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: 8px; }
.vpost { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 14px 16px; }
.vpost .grow { display: grid; gap: 4px; min-width: 0; }
.vpost b { font-size: 18px; line-height: 25px; font-weight: 500; overflow-wrap: anywhere; }

/* ═══ v20 · the refining pass ══════════════════════════════════════════════ */

/* a row of chips scrolls sideways; the fade is an EDGE, 26px, never wide enough
   to grey out a word. .end used to drop the mask entirely, which hard-clipped
   "Newest" to "Newe" in the garden. */
.chips.row, .chips.row.end {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding-right: 26px; scroll-padding-right: 26px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
}
.chips.row::-webkit-scrollbar, .phaseline::-webkit-scrollbar { display: none; }
/* ⚠ A FLEX ITEM'S IMPLICIT min-width: auto IS THE ONLY THING STOPPING IT SHRINKING BELOW
   ITS OWN TEXT, and writing any min-width at all replaces it. This row is a nowrap flex
   scroller; when `min-width: 52px` went on to make the short chips wide enough to tap,
   every long one became free to shrink to fifty-two pixels, and "Environment",
   "Community", "Education" and "Health" spilled out of their pills and printed on top of
   each other. It shipped, and he photographed it on his phone.
   flex: 0 0 auto is the fix: a chip is exactly as wide as its word, and the row scrolls. */
.chips.row .chip { flex: 0 0 auto; font-size: 14px; padding: 0 15px; min-height: 44px; min-width: 52px; }

/* the phase legend was five chips wrapping 2 + 2 + 1, an orphan on its own line.
   One row, scrolled, on every width. */
.phaseline {
  flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
  padding-right: 26px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
}
.phaseline .ph { flex: none; }

/* a day that has not happened yet is quiet, not unreadable */
.cal-d.future { opacity: .45; }

/* a headline never leaves one word alone on the last line */
.hero h1, .hero .kicker, .hero .statement, .eyebrow h2, .page h2, .page h3,
.door .door-words b, .gvp .gvp-words b, .card .body, .vpost b { text-wrap: balance; }
.cap, .body { text-wrap: pretty; }

/* the project card: the money is a line of its own, so the chips stop wrapping */
.gvp .gvp-stat { display: block; font-size: 14px; line-height: 21px; font-weight: 600; color: #FFE9B0; }
.gvp .gvp-stat b { font-family: var(--display); font-size: 21px; line-height: 21px; font-weight: 600; color: #FFF7D6; }
.gvp .arrow { align-self: start; padding-top: 6px; }

/* an example room, shown before you are in one */
.sample { position: relative; }
.sample .vpost { border-style: dashed; border-color: rgba(185, 255, 228, .28); }

/* ═══ v21 · the landing's fourteen pixels, and a card that is never a black band ═══ */

/* The landing measured 389 wide inside a 375 viewport. The cause was not a card:
   it was the fixed star layer, which is inset: 0 and therefore one hundred
   viewport widths, and a viewport width INCLUDES the scrollbar gutter. Clipping
   the horizontal axis on the document is the remedy for that whole class.
   It is a net, not an excuse: the audit in scripts/audit/overflow.js measures
   elements against clientWidth directly, so a real runaway is still caught. */
html { overflow-x: clip; }

/* A project's picture arrives over IPFS. Until it does, the frame holds the
   project's own bloom on a soft ground, never an empty black rectangle. */
.gvp .gvp-art { background: radial-gradient(circle at 50% 42%, rgba(110, 217, 192, .16), rgba(10, 16, 24, 1) 72%); }
.gvp .gvp-art img { z-index: 2; }
.gvp .gvp-none { z-index: 1; background: none; }

/* a room holding words you have not read */
.chip .dot, .vibemark {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #B9FFE4; box-shadow: 0 0 10px rgba(185, 255, 228, .9); flex: none;
}
.vibeline { display: flex; align-items: center; gap: 9px; font-size: 15px; line-height: 21px; font-weight: 600; color: #B9FFE4; }

/* ═══ v23 · the frame, the standing, the crossing ═════════════════════════ */

/* THE FRAME. The band takes the picture's own shape (set per card in JS from the
   picture's natural size, clamped to what a card can hold) and then fills it.
   Between 1.2 and 3.2 that is an exact fit: nothing cropped and nothing empty.
   `contain` is gone; it was what left the black moat. */
.gvp .gvp-art { height: auto; aspect-ratio: var(--ar, 2.25); transition: aspect-ratio .3s var(--ease); }
.gvp .gvp-art img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; z-index: 2; }
/* the wash is now only seen THROUGH a transparent logo, so it has to read as light
   rather than as a dark smear: brighter, more saturated, spread wider */
.gvp .gvp-art .gvp-wash { inset: -18%; filter: blur(26px) saturate(1.9) brightness(.92); opacity: .9; }
/* the scrim only darkens the last third, where the words begin */
.gvp .gvp-art::after { background: linear-gradient(180deg, transparent 64%, rgba(5, 9, 18, .8) 100%); }

/* THE STANDING · what one word today would do */
.standing { display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: center; }
.stand-words { display: grid; gap: 5px; min-width: 0; }
.stand-words b { font-family: var(--display); font-size: 23px; line-height: 27px; font-weight: 500; color: #FFF7D6; text-wrap: balance; }
.stand-ring {
  position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#FFD98A calc(var(--pct) * 1%), rgba(255, 255, 255, .1) 0);
}
.stand-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgba(5, 9, 18, .92); }
.stand-face { position: relative; font-family: var(--emoji); font-size: 32px; line-height: 1; }

/* THE CROSSING · the one card in the app that is allowed to be loud */
.cer.cross .big { filter: drop-shadow(0 0 30px rgba(255, 217, 138, .55)); }
.cer.cross h2 { color: #FFE9B0; }

/* ═══ v24 · the sound made learnable, and a room with a face ══════════════ */

.notes { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; }
.chip.note { min-height: 46px; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 13px; line-height: 19px; }
.chip.note i { font-style: normal; font-size: 13px; line-height: 15px; font-weight: 600; color: #FFD98A; }

.roomfield { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 0; }
.rf { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(5, 9, 18, .55); border: 1px solid var(--hair); }
.rf b { font-family: var(--display); font-size: 19px; line-height: 20px; font-weight: 600; color: #FFE9B0; }

/* ═══ v25 · five is a list of five ════════════════════════════════════════ */

/* Wrapped as chips the five phases fell 2 + 2 + 1 and left Ready to Give alone
   on its own line. A grammar is read down, so it is written down: one row each,
   the phase on the left and the interval on the right. */
.notes { display: grid; grid-template-columns: 1fr; gap: 8px; }
.chip.note {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px;
  min-height: 50px; padding: 8px 16px; border-radius: 18px; font-size: 16px; line-height: 22px;
}
.chip.note i { margin-left: auto; font-size: 14px; line-height: 19px; text-align: right; }

/* ═══ v26 · depth, and three actions that fit ═════════════════════════════ */

/* The scene steps back once you are reading: it fades toward the ground colour
   and drifts very slightly wider, the way a background falls out of focus when
   you look at something nearer.

   Opacity and transform only, and on the LAYER rather than the scrim. Two things
   were wrong with reaching for the scrim: turning its opacity down at rest would
   have made the hero brighter and quietly cost the contrast the gate cannot see
   behind an image, and a blur across a full screen fixed layer is paid for on
   every frame it is composited, for the whole session. */
#scene .layer { transition: opacity 1.4s ease, transform 1.1s var(--ease); }
body.deep #scene .layer.in { opacity: .5; transform: scale(1.055); }


/* a room's three actions: the two that share sit together, and leaving sits
   apart and quiet, because it is a different kind of act */
.vibehead .actions { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 8px; }
.vibehead .actions .btn { white-space: nowrap; }
.vibehead .actions #vb-leave { grid-column: 1 / -1; }

/* ═══ v28 · the standing, before anything is standing ═════════════════════ */
.standing.empty .stand-ring { background: conic-gradient(rgba(255, 217, 138, .22) 0, rgba(255, 255, 255, .1) 0); }
.standing.empty .stand-face { opacity: .92; }

/* ═══ v34 · the act is on the screen ══════════════════════════════════════ */

/* Give and Grow are working screens, and on both of them the thing you came to
   do sat below the fold: the writing box 124 pixels under it, the first door
   under it too. The hero was 82svh, which is a page you look at rather than a
   page you use. At 52svh it is still half the screen and still a painting, and
   the box and the doors are now on it. Home and the rooms keep their own
   heights; this rule reaches only the two tabs where something is done. */
.hero { min-height: 52svh; }

/* Measured again on a phone with a garden in it, which is the state anyone is in after
   their second day: the standing card above the writing box pushes the Text, Photo and
   Voice row down to 696, the bar begins at 728, and the star that floats above the bar
   reaches higher still. The row you came to use was sitting under it. An empty garden
   cleared it by sixteen pixels, which is why it was never seen: the first run is fine
   and every run after it is not. Forty-six lifts it clear in both. */
.hero { min-height: 46svh; }

/* the standing carries one line, so it stands one line tall */
.standing { grid-template-columns: 58px 1fr; gap: 12px; padding: 14px 16px; }
.standing .stand-ring { width: 58px; height: 58px; }
.standing .stand-ring::before { inset: 4px; }
.standing .stand-face { font-size: 26px; }
.standing .stand-words b { font-size: 20px; line-height: 25px; }

/* ═══ THE HAND ══════════════════════════════════════════════════════════════════════
   Everything below is about a thumb on a phone.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* A control may look whatever size the design asks it to. What a thumb has to find is
   never smaller than 44, so the target grows underneath the mark instead of the mark
   growing. His small round buttons stay small and round; the reach around them opens. */
.top .you, .top .back, .top .sound, .chip, .btn.sm { position: relative; }
.top .you::after, .top .back::after, .top .sound::after, .chip::after, .btn.sm::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 46px); height: max(100%, 46px);
  transform: translate(-50%, -50%); border-radius: 999px;
}
/* Chips that wrap onto a second line need air between the lines. The reach drawn under
   a chip is forty-six tall and his chips are thirty-six, so two lines eight apart had
   their targets overlapping and each chip was stealing the top edge of the one below it.
   Twelve between the lines gives every chip its own reach, and the screen room to breathe,
   which it wanted anyway. */
.chips { row-gap: 12px; }

/* A row of chips scrolls sideways and clips whatever leaves it, which was cutting the
   reach off the top and bottom of every chip in it. The chips stay the height they are
   drawn; the row opens up around them. */
.chips.row { padding-top: 7px; padding-bottom: 7px; }

/* a link sitting inside a sentence is a line of text, and a line of text is 28 tall */
.body a, .cap a, .lead a { display: inline-block; padding: 8px 0; }

/* The writing field took the browser's focus ring away and put nothing back, so a
   keyboard had no way to say where it was. The pill answers now instead of the input,
   which is the shape the eye is looking for anyway. Glow, never a highlight. */
.pillform:focus-within { border-color: var(--hair-hue); box-shadow: var(--glow); }

/* a sheet keeps its scrolling to itself, and follows a thumb down */
.sheet { overscroll-behavior: contain; }
.sheet .grabber { width: 44px; height: 5px; margin: 2px auto 8px; }

/* The view takes across; the browser keeps down. Without this the phone claims the
   horizontal drag for its own scrolling and the gesture never arrives. */
#view { touch-action: pan-y; }

/* the door being swiped toward lights before the finger lets go, so the gesture says
   where it is going while there is still time to change your mind */
.tabs button.near { color: var(--ink); }
.tabs button.near svg { filter: drop-shadow(0 0 10px rgba(110, 217, 192, .55)); }
.tabs button.near .lbl { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  #view { transition: none !important; }
}

/* the glyph: his figure, drawn from days, given room and nothing else */
.glyphcard { display: grid; gap: 12px; justify-items: center; text-align: center; }
.glyphfig { width: min(240px, 68vw); color: var(--violet-text); filter: drop-shadow(0 0 18px rgba(110, 217, 192, .35)); }
.glyphfig svg { width: 100%; height: auto; display: block; }

/* Decorative layers clip their own contents. A star placed at ninety-nine per cent of the
   width has a right edge past the glass, and one pixel over is still over. */
.stars, .embers, .aura { overflow: clip; }

/* A control is at least forty-four across and forty-four down, on its own, without a
   target drawn under it to make up the difference. The reach underneath stays, because it
   still does the work for the chips, but nothing relies on it to be touchable. */
.top .you, .top .back, .top .sound { width: 44px; height: 44px; }
.pillform input, .pillform { min-height: 44px; }
.nav a, .foot a, .gpill { min-height: 44px; display: inline-flex; align-items: center; }
.foot a, .nav .brand { padding-top: 12px; padding-bottom: 12px; }

/* the segmented rows and the small pill get the same reach as everything else */
.seg button, .gpill.sm, .btn.sm, .more { position: relative; }
.seg button::after, .gpill.sm::after, .more::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 46px); height: max(100%, 46px);
  transform: translate(-50%, -50%); border-radius: inherit;
}

/* the pill on the landing was two short of the floor */
.gpill.sm { min-height: 44px; }

/* a chosen chip says so, and says it the same way everywhere */
.chip[aria-pressed="true"], .chip.on { border-color: var(--hair-hue); }

/* ═══ THE JOURNAL, AS A JOURNAL ════════════════════════════════════
   It read like a form: system type, flat panel, an input box. A journal is a warm surface
   you write on, so the surfaces you write on and read back are warm now. Still dark,
   because the whole app is, but ink and paper rather than glass and chrome: a deep warm
   ground, a faint rule to write along, a margin line down the left the way a notebook has
   one, and the serif for the words themselves. Nothing else on the screen changes. */
:root {
  --paper: linear-gradient(180deg, rgba(38, 29, 17, .86), rgba(26, 20, 12, .92));
  --paper-ink: #F6EBD8;
  --paper-rule: rgba(246, 235, 216, .07);
  --paper-margin: rgba(242, 201, 125, .34);
}
.pillform, .entry, .entrycard, .glass.entry, [data-e] {
  background: var(--paper);
  border-color: rgba(242, 201, 125, .16);
}
.entry, .entrycard, [data-e] {
  background-image:
    linear-gradient(180deg, rgba(38, 29, 17, .86), rgba(26, 20, 12, .92)),
    repeating-linear-gradient(180deg, transparent 0 27px, var(--paper-rule) 27px 28px);
  border-left: 2px solid var(--paper-margin);
  border-radius: 6px 20px 20px 6px;
}
[data-e] b, .entry b, .entrycard b,
[data-e] .grow > b { color: var(--paper-ink); }
[data-e] .line, .entry .line, .entrycard .line,
[data-e] .grow > span { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; line-height: 28px; color: var(--paper-ink); }
.pillform input, .pillform textarea, textarea.field {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px; line-height: 28px; color: var(--paper-ink);
}
textarea.field {
  background: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(38, 29, 17, .86), rgba(26, 20, 12, .92)),
    repeating-linear-gradient(180deg, transparent 0 27px, var(--paper-rule) 27px 28px);
  border-left: 2px solid var(--paper-margin);
  border-radius: 6px 18px 18px 6px;
  padding-left: 16px;
}
textarea.field::placeholder, .pillform input::placeholder { color: rgba(246, 235, 216, .55); }

/* the guided tour: one lit thing at a time, and a way out on every step */
.spot { position: fixed; border-radius: 20px; pointer-events: none; z-index: 1;
  box-shadow: 0 0 0 9999px rgba(3, 6, 14, .9), 0 0 0 2px var(--violet-text), var(--glow);
  transition: all .28s cubic-bezier(.22,1,.36,1); }
.tourcard.near { position: fixed; left: 50%; transform: translateX(-50%); z-index: 2;
  width: min(360px, calc(100vw - 32px)); text-align: left; padding: 18px 18px calc(16px + var(--sab)); }
.tourcard.near .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tourcard.mid { position: relative; z-index: 2; }
#tour { align-items: center; }

/* the first walk: one idea to a screen, a way out on every one */
#tour { position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; padding: 24px;
  background: transparent; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#tour[hidden] { display: none; }
.tourcard { width: min(440px, 100%); display: grid; gap: 14px; text-align: center;
  border: 1px solid var(--hair-2); border-radius: 28px; padding: 26px 22px calc(22px + var(--sab));
  background: linear-gradient(180deg, rgba(22, 27, 46, .92), rgba(6, 9, 18, .96)); }
.tourcard h2 { font-size: clamp(26px, 7vw, 34px); line-height: 1.16; margin: 0; }
.tourcard .body { margin: 0; }
.tourdots { display: flex; gap: 7px; justify-content: center; margin: 4px 0 2px; }
.tourdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair-2); }
.tourdots i.on { background: var(--violet-text); box-shadow: var(--glow); }
body.touring { overflow: hidden; }

/* the opening and closing cards carry their own dark; the lit steps get theirs from the spot */
#tour:has(.tourcard.mid) { background: rgba(3, 6, 14, .93); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* the four headings on Earth carry real Giveth category names now, which are longer than
   the words that used to be there, so the row wraps rather than running off a small screen */
.cats { flex-wrap: wrap; }
.cats button { min-width: 0; flex: 1 1 auto; }

/* a pathway, and the days inside it */
.glass.step { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.glass.step .ico { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--violet-text);
  letter-spacing: .04em; min-width: 54px; padding-top: 2px; }
.glass.step .line, .glass.opt.path .line { display: block; font-size: 15px; line-height: 22px; color: var(--ink-2); margin-top: 3px; }
.glass.opt.path { align-items: flex-start; }

/* ── the Giveth pitch: one number reigning, then the shape of five years ── */
/* The hero comes down so the figure and the three facts under it both land above the tab
   bar on a phone. Measured, not guessed: the bar owns the last 112px of an 812px screen. */
.hero.pitch-hero { min-height: 54svh; }
.gvbig { text-align: center; display: grid; justify-items: center; gap: 2px; }
.gvnum { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(40px, 12.4vw, 64px); line-height: 1.02;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .8);
  color: var(--ink); letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; margin: 6px 0 8px; }
.gvnum.small { font-size: clamp(30px, 8vw, 40px); color: var(--ink-3); }
.gvsub { display: block; font-size: 16px; line-height: 23px; color: var(--ink-3); text-shadow: 0 1px 12px rgba(0, 0, 0, .9); max-width: 18em; }
.gvfacts b { font-size: 26px; line-height: 30px; }
.gvline { padding: 18px 16px 14px; }
.gvbarline { display: flex; align-items: flex-end; gap: 2px; height: 96px; margin-bottom: 12px; }
.gvbarline i { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--hue-76), var(--hue-16)); }
.gvbars { display: grid; gap: 12px; padding: 18px 16px 14px; }
.gvbar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n v" "b b"; gap: 4px 10px; align-items: baseline; }
.gvbn { grid-area: n; font-size: 15px; color: var(--ink-3); }
.gvbv { grid-area: v; font-size: 15px; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.gvbar i { grid-area: b; height: 6px; border-radius: var(--pill); background: linear-gradient(90deg, var(--hue-76), var(--hue-16)); }
@media (min-width: 620px) { .gvbarline { height: 128px; } }

/* ── the menu, in groups ── */
.menu { display: grid; gap: 6px; margin: 4px 0 14px; }
.menu .mgroup { margin: 12px 0 2px; }
.menu .rows { gap: 8px; }
.mrow b { font-size: 17px; line-height: 24px; }
.mrow.on { border-color: var(--hair-hue); box-shadow: var(--lit-rest), inset 0 -7px 11px rgba(110, 217, 192, .14); }
.mrow .mhere { color: var(--hue); font-size: 22px; line-height: 22px; }

/* ── a thumb needs forty-four pixels ──
   Measured by the a11y gate at 375: the journal's four tabs were 40 tall, the project and
   vault chips 34 or 36. Under a thumb they are all the same size as each other and all
   slightly too small to hit, which is the kind of wrong that never looks wrong. The pill
   itself does not grow: the padding does, so nothing here becomes an oversized control. */
.chip { min-height: 44px; }
.tabs2 button { min-height: 44px; }

/* ── THE WRAPPED MARK, AND THE LAUNCH ──
   The mark does not swap, it turns: a quarter second of light across it and it is
   carrying something. The launch runs on transform and opacity alone, above everything,
   and cannot be tapped. Nothing rotates. Every ring is a glow, never a highlight. */

.mark-turn { animation: markTurn .62s cubic-bezier(.22, 1, .36, 1); }
/* the socket the gift left from: the light stays, the gift does not */
/* An animation that holds its last frame (fill-mode both or forwards) outranks every plain
   declaration in the cascade, so on the ceremony mark, which arrives with one, a plain
   opacity: 0 did nothing and the gift stood there while its copy flew away. Only
   !important outranks a held animation value. */
.lifted { opacity: 0 !important; animation: none !important; transition: opacity .18s ease-out .5s; }
@keyframes markTurn {
  0%   { transform: scale(1);    filter: brightness(1); }
  38%  { transform: scale(1.14); filter: brightness(1.5) drop-shadow(0 0 14px rgba(242, 201, 125, .8)); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* while something is wrapped, the core breathes gold rather than mint */
html.wrapped .tabs .star .core .aura { background: radial-gradient(circle, rgba(242, 201, 125, .5), transparent 68%); }
html.wrapped .tabs .star .core .ring { border-color: rgba(242, 201, 125, .7); box-shadow: var(--glow-gold); }
html.wrapped .tabs .star span.lbl { color: #FFD98A; }

.launch { position: fixed; inset: 0; z-index: 9000; pointer-events: none; contain: strict; }
.launch .flier, .launch .wv {
  position: absolute; left: var(--x); top: var(--y); will-change: transform, opacity;
}
.launch .flier { margin-left: calc(var(--d) / -2); margin-top: calc(var(--d) / -2); width: var(--d); height: var(--d); }
/* the waves are the gravity, not a hairline around the mark: they begin well outside it */
.launch .wv { --r: calc(var(--d) * 2.6); margin-left: calc(var(--r) / -2); margin-top: calc(var(--r) / -2); width: var(--r); height: var(--r); }
.launch .flier { filter: drop-shadow(0 0 16px rgba(242, 201, 125, .85)); }
.launch .wv {
  border-radius: 50%; border: 2px solid rgba(242, 201, 125, .65);
  box-shadow: 0 0 30px rgba(242, 201, 125, .5), inset 0 0 34px rgba(110, 217, 192, .38);
  opacity: 0; transform: scale(.2);
}

/* GATHER, then CHARGE, then GO. The waves come in before they go out, because a thing
   about to leave the ground presses down on it first. */
.launch.go .wv { animation: gravity 1.05s cubic-bezier(.34, .1, .2, 1) forwards; }
.launch.go .w2 { animation-delay: .13s; }
.launch.go .w3 { animation-delay: .26s; }
@keyframes gravity {
  0%   { opacity: 0;  transform: scale(2.4); }
  26%  { opacity: .9; transform: scale(1.5); }
  58%  { opacity: .7; transform: scale(.72); }
  100% { opacity: 0;  transform: scale(.34); }
}

.launch.go .flier { animation: liftOff 1.95s cubic-bezier(.5, 0, .82, .34) forwards; }
@keyframes liftOff {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  16%  { transform: translate3d(0, 6px, 0) scale(.9); opacity: 1; }
  34%  { transform: translate3d(0, 2px, 0) scale(1.28); opacity: 1; }
  44%  { transform: translate3d(0, -6px, 0) scale(1.2); opacity: 1; }
  100% { transform: translate3d(0, calc((var(--y) + 240px) * -1), 0) scale(.42); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mark-turn { animation: none; }
  .launch { display: none; }
}

/* ══ MOTUS · A VALUE IN MOTION ══════════════════════════════════════════════════════
   Four movements on the Giveth page, and every one of them is the thing itself arriving
   rather than an effect laid over it. The figures are correct in the markup before any
   of this runs, so a page with no script is a page with the right numbers on it.

   Transform and opacity only. Each runs once, when it is looked at. Under reduced motion
   every one of them is simply already there. ═══════════════════════════════════════ */

/* the months, drawing themselves in the order they happened */
.gvbarline.armed i { transform-origin: 50% 100%; transform: scaleY(0); }
.gvbarline.armed.drawn i {
  transform: scaleY(1);
  transition: transform .5s cubic-bezier(.18, .9, .3, 1);
  transition-delay: var(--wait, 0ms);
}

/* where it went, growing from nothing, largest first */
.gvbars.armed .gvbar i { transform-origin: 0 50%; transform: scaleX(0); }
.gvbars.armed.grown .gvbar i {
  transform: scaleX(1);
  transition: transform .72s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--wait, 0ms);
}
/* the figure beside a bar arrives with it, not before it */
.gvbars.armed .gvbar .gvbv { opacity: 0; }
.gvbars.armed.grown .gvbar .gvbv { opacity: 1; transition: opacity .4s ease-out; transition-delay: calc(var(--wait, 0ms) + 240ms); }

/* THE TRACE. Begin, Become, Bridge: one light travels down through all three, because a
   seed goes out, is read, and comes back. The thread is the path; the light is the seed. */
.trace3 { position: relative; }
.trace3::before {
  content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--hue-16), var(--hue-48), var(--gold));
  opacity: 0; transform: scaleY(0); transform-origin: 50% 0;
}
.trace3.flowing::before { opacity: .7; transform: scaleY(1); transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .4s ease-out; }
.trace3::after {
  content: ""; position: absolute; left: 9px; top: 8px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--star); box-shadow: 0 0 14px var(--gold), 0 0 30px rgba(242, 201, 125, .5);
  opacity: 0;
}
.trace3.flowing::after { animation: seedRuns 2.4s cubic-bezier(.4, 0, .5, 1) .5s forwards; }
@keyframes seedRuns {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  12%  { opacity: 1; transform: translateY(6%) scale(1); }
  82%  { opacity: 1; transform: translateY(calc(100% - 18px)) scale(1); }
  100% { opacity: 0; transform: translateY(calc(100% - 18px)) scale(1.8); }
}
.trace3 > span, .trace3 > div { position: relative; padding-left: 16px; }

/* the three words themselves land one after the other, in the order the seed passes them */
.trace3.armed > * { opacity: .35; }
.trace3.armed.flowing > * { opacity: 1; transition: opacity .5s ease-out; }
.trace3.armed.flowing > :nth-child(2) { transition-delay: .5s; }
.trace3.armed.flowing > :nth-child(3) { transition-delay: 1s; }

/* a number that is counting reads as one column of digits, never a jumping line */
.gvnum, .gvfacts b, .gvbv { font-variant-numeric: lining-nums tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .gvbarline i, .gvbar i { transform: none; }
  .gvbar .gvbv, .trace3 > * { opacity: 1; }
  .trace3::before { opacity: .7; transform: none; }
  .trace3.flowing::after { animation: none; }
}

/* the tallest month, named under the line it belongs to */
.gvpeak { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--ink-3); }
.gvpeak b { color: var(--gold); font-variant-numeric: lining-nums tabular-nums; font-weight: 500; }

/* ══ THE THREE HELD MOMENTS ══
   The first gift sent stands in the middle of the screen and leaves from there. The first
   gift kept opens: the wrap swells into light and dissolves, and the living thing inside
   it rises out of the place it was. Nothing rotates. Under reduced motion the gift is
   simply open, and the one that was sent is simply gone. */
.cer .cer-mark {
  width: min(46vw, 180px); height: auto; display: block;
  filter: drop-shadow(0 0 26px rgba(242, 201, 125, .7)) drop-shadow(0 0 60px rgba(110, 217, 192, .28));
  animation: rise var(--t) var(--ease) both;
}
.cer .opening { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.cer .opening .wrapped {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 0 22px rgba(242, 201, 125, .7));
  animation: unwrap 1.35s cubic-bezier(.22, 1, .36, 1) .45s forwards;
}
.cer .opening .inside {
  font-family: var(--emoji); font-size: 108px; line-height: 1; opacity: 0; transform: scale(.4);
  filter: drop-shadow(0 0 30px rgba(110, 217, 192, .55));
  animation: emerge .95s cubic-bezier(.16, 1, .3, 1) 1.05s forwards;
}
@keyframes unwrap {
  0%   { transform: scale(1);    opacity: 1; filter: brightness(1) drop-shadow(0 0 22px rgba(242, 201, 125, .7)); }
  38%  { transform: scale(1.14); opacity: 1; filter: brightness(1.7) drop-shadow(0 0 40px rgba(242, 201, 125, .95)); }
  100% { transform: scale(1.95); opacity: 0; filter: brightness(2.4) drop-shadow(0 0 60px rgba(255, 247, 214, .9)); }
}
@keyframes emerge { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cer .opening .wrapped { animation: none; opacity: 0; }
  .cer .opening .inside { animation: none; opacity: 1; transform: none; }
}

/* ── no glow cut square (G42) ──
   A container that hides its overflow cuts everything at its own straight edges, glows
   included, and a glow cut straight is a box.

   The palette hides overflow so it can fold to two rows. The chosen emoji's glow reached
   64px and the first emoji sits on the palette's corner, so choosing it lit a square behind
   it. The palette now keeps room inside its edge, a little more between rows so the fold
   still lands between them, and a chosen emoji glows close enough to stay inside. */
.pick { padding: 12px; margin: -8px -10px; row-gap: 12px; max-height: 148px; }
.pick .orb.on { box-shadow: 0 0 14px rgba(110, 217, 192, .45); }
/* The embers rise out of the core, which is what embers do. They were clipped to it along
   with the stars, which needed it to keep off the edge of the glass, so each one was sliced
   flat at the top of the core while it was still alight. They rise straight up the middle
   of the bar and cannot reach any edge. */
.tabs .star .core .embers { overflow: visible; }