/* The Secret — secret.css (dev-0004). Dark, luxurious, fine metal lines. One reading face everywhere: Source Serif 4, the open
   stand-in for Claude's reply serif — no spaced capitals, no italics, readable first. © 2026 Verge Heights (aplusz.app). */
@property --m1 { syntax: "<color>"; inherits: true; initial-value: #6f5120; }
@property --m2 { syntax: "<color>"; inherits: true; initial-value: #f4e3ab; }
@property --m3 { syntax: "<color>"; inherits: true; initial-value: #c79b4a; }
@property --bg { syntax: "<color>"; inherits: true; initial-value: #040404; }
@property --s1 { syntax: "<color>"; inherits: true; initial-value: #1a140b; }
@property --s2 { syntax: "<color>"; inherits: true; initial-value: #0a0806; }
@property --s3 { syntax: "<color>"; inherits: true; initial-value: #050505; }
html { transition: --m1 2.4s ease, --m2 2.4s ease, --m3 2.4s ease, --bg 1.6s ease, --s1 1.6s ease, --s2 1.6s ease, --s3 1.6s ease; }
:root {
  --bg: #050403; --ink: #0a0a0b;
  --s1: #21170c; --s2: #0d0906; --s3: #060504; /* black with a warm brown depth (espresso, leather) */ /* the surfaces: glow, card, deep — each theme sets its own */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --caps: var(--serif); /* one face everywhere */
  --m1: #6f5120; --m2: #f4e3ab; --m3: #c79b4a; --wine: #a2475a;
  --gut: 56px; /* side margin of every text page */
  --sp: clamp(18px, 1.2vw + 1.6vh, 32px); /* auto-spacing: one rhythm for the whole page, sized by the screen */
}
/* a theme is the whole site: background, cards, surfaces, text and lines */
html[data-metal="rose"]      { --m1: #6e3f33; --m2: #f8d6c4; --m3: #cc8d73; --bg: #0a0406; --s1: #2c1219; --s2: #13070b; --s3: #070304; }
html[data-metal="platinum"]  { --m1: #50545a; --m2: #f1f3f6; --m3: #aab0b8; --bg: #040609; --s1: #152030; --s2: #0a0f17; --s3: #05070b; }
html[data-metal="champagne"] { --m1: #6f5d3e; --m2: #f7eedb; --m3: #d2bd92; --bg: #0b0805; --s1: #2e2416; --s2: #15100a; --s3: #090704; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input { -webkit-user-select: text; user-select: text; }
img, canvas, svg { -webkit-user-drag: none; }
html.veiled body > * { visibility: hidden !important; }
html.veiled body { background: #000; }
html, body { margin: 0; background: var(--bg); color: var(--m2); }
body { font-family: var(--serif); font-size: 17px; line-height: 1.6; font-optical-sizing: auto; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 52%, var(--s1) 0%, var(--s2) 42%, var(--s3) 72%, var(--bg) 100%); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 7; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: var(--m3); }
::selection { background: color-mix(in srgb, var(--m3) 32%, transparent); color: var(--m2); }
button { font: inherit; color: inherit; }
input { font-family: inherit; }
.gold { background: linear-gradient(100deg, var(--m1), var(--m2) 32%, var(--m3) 55%, var(--m2) 78%, var(--m1));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- the door page: one screen, edge to edge --- */
.door-page { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
#lines { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; }
.bloom { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--m2) 70%, #fff) 0%, color-mix(in srgb, var(--m3) 35%, transparent) 18%, transparent 55%); }
.frame { position: fixed; inset: 14px; z-index: 3; pointer-events: none; border-radius: 24px; opacity: .55; }
.frame::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 24px;
  background: linear-gradient(135deg, var(--m1), var(--m2) 25%, var(--m3) 50%, var(--m2) 75%, var(--m1));
  -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 exclude, linear-gradient(#000 0 0); }
.frame::before { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--m3) 22%, transparent); border-radius: 19px; }
.frame .c { position: absolute; width: 46px; height: 46px; }
.frame .c::before, .frame .c::after { content: ""; position: absolute; border: 0 solid var(--m2); }
.frame .c::before { inset: 0; border-width: 1px 0 0 1px; border-top-left-radius: 28px; }
.frame .c::after { inset: 9px auto auto 9px; width: 22px; height: 22px; border-width: 1px 0 0 1px; border-color: var(--m3); opacity: .8; border-top-left-radius: 14px; }
.frame .tl { top: -4px; left: -4px; }
.frame .tr { top: -4px; right: -4px; transform: scaleX(-1); }
.frame .bl { bottom: -4px; left: -4px; transform: scaleY(-1); }
.frame .br { bottom: -4px; right: -4px; transform: scale(-1); }

/* the name is the hook: large, lit, top centre — it settles back to a small crest once the door opens */
.crest { position: fixed; bottom: calc(50% + var(--door-half, 120px) + 26px); left: 0; right: 0; z-index: 5; text-align: center; pointer-events: none;
  transition: opacity .6s ease; }
.kick { display: block; margin-bottom: 8px; font-size: 16px; color: var(--m3); opacity: .9; }
.orn { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.orn i { width: min(130px, 24vw); height: 1px; background: linear-gradient(90deg, transparent, var(--m1) 20%, var(--m2)); }
.orn i:last-child { background: linear-gradient(270deg, transparent, var(--m1) 20%, var(--m2)); }
.orn b { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--m2); box-shadow: 0 0 10px color-mix(in srgb, var(--m3) 60%, transparent); }
.mark { display: inline-block; font-weight: 600; font-size: clamp(34px, min(4.8vw, 7.4vh), 60px); line-height: 1.15;
  background: linear-gradient(100deg, var(--m1) 0%, var(--m3) 16%, #fff6da 30%, var(--m2) 38%, var(--m3) 52%, var(--m1) 64%, var(--m3) 78%, var(--m2) 90%, var(--m1) 100%);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 22px color-mix(in srgb, var(--m3) 34%, transparent));
  animation: sheen 9s ease-in-out infinite; transition: font-size 1.1s cubic-bezier(.2,.7,.2,1); }
body.entered .crest { top: 30px; bottom: auto; }
body.entered .mark { font-size: clamp(28px, 4.4vw, 42px); filter: none; animation: none; } /* the name stays the largest words on the page */
body.entered :is(.kick, .orn) { display: none; }
body.crest-fade :is(.kick, .orn) { opacity: 0; transition: opacity .5s ease; }

.shut { position: fixed; z-index: 8; top: 22px; left: 24px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0;
  background: none; cursor: pointer; color: var(--m2); opacity: .7; transition: opacity .25s, transform .25s; }
.shut svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.shut:hover, .shut:focus-visible { opacity: 1; transform: rotate(90deg); outline: none; }
.card .ask { text-align: center; font-size: 19px; margin: 4px 0 0; }
.rail { position: fixed; top: 24px; right: max(28px, calc(50vw - 560px)); z-index: 6; display: flex; gap: 2px; }
.ic { width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--m3); opacity: .5; transition: opacity .25s; }
.ic:hover, .ic:focus-visible { opacity: 1; outline: none; }
.ic svg, .pill svg, .home svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }

.door, .room, .gate { position: fixed; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(600px, calc(100vw - 56px)); text-align: center; }
.door::before, .room::before, .gate::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 150%; height: 230%;
  transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 34%, transparent 68%); pointer-events: none; }
.label { margin: 0 0 20px; font-weight: 400; font-size: 19px; line-height: 1.5; color: var(--m2); }
@keyframes sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

.field { position: relative; width: min(460px, 100%); margin: 0 auto; padding: 14px 26px 16px; }
.field::before, .field::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
  border-radius: 18px; }
.field::before { inset: 0; background: linear-gradient(120deg, var(--m1), var(--m2) 30%, var(--m3) 50%, var(--m2) 70%, var(--m1)); opacity: .55; transition: opacity .4s, background .4s; }
.field::after { inset: 1px; background: radial-gradient(ellipse at 50% 0%, var(--s1) 0%, var(--s2) 60%, var(--s3) 100%);
  border-radius: 17px; }
.field:focus-within::before { opacity: 1; }
.field.wrong::before { background: linear-gradient(120deg, #4a1822, #e7a3ae 50%, #4a1822); opacity: 1; }
#code { display: block; width: 100%; border: 0; background: transparent; outline: none; text-align: center; color: var(--m2);
  font-size: 26px; letter-spacing: .06em; padding: 10px 0 12px .06em; font-variant-numeric: lining-nums tabular-nums; caret-color: var(--m3); border-radius: 0; }
#code::placeholder { color: color-mix(in srgb, var(--m2) 22%, transparent); letter-spacing: .06em; }
.rule { position: absolute; left: 40px; right: 40px; bottom: 9px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--m1) 12%, var(--m2) 50%, var(--m1) 88%, transparent); opacity: .6; transition: opacity .4s, filter .4s; }
.rule::after { content: ""; position: absolute; inset: -1px 30%; background: linear-gradient(90deg, transparent, var(--m2), transparent); opacity: 0; filter: blur(2px); transition: opacity .4s; }
.field:focus-within .rule { opacity: 1; }
.field:focus-within .rule::after { opacity: .9; animation: glide 3.2s ease-in-out infinite; }
@keyframes glide { 0%, 100% { transform: translateX(-60%); } 50% { transform: translateX(60%); } }
.field.wrong .rule { background: linear-gradient(90deg, transparent, var(--wine) 20%, #e7a3ae 50%, var(--wine) 80%, transparent); opacity: 1; }
.field.wrong { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45%, 55% { transform: translateX(-6px); } }
.field.busy .rule::after { opacity: 1; animation: glide 1.1s ease-in-out infinite; }

.status { min-height: 26px; margin: 16px 0 0; font-size: 16px; color: color-mix(in srgb, var(--m2) 82%, transparent); }
.hint { margin-top: 18px; background: none; border: 0; padding: 4px 6px; cursor: pointer; font-size: 17px;
  color: var(--m3); opacity: .9; text-decoration: underline color-mix(in srgb, var(--m3) 55%, transparent); text-underline-offset: 4px; transition: opacity .25s; }
.hint:hover, .hint:focus-visible { opacity: 1; outline: none; }

.foot { position: fixed; z-index: 6; left: max(28px, calc(50vw - 560px)); right: max(28px, calc(50vw - 560px)); bottom: 24px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.foot > * { pointer-events: auto; }
.links { display: flex; gap: 18px; }
.links a { font-size: 14.5px; text-decoration: none; color: var(--m3); opacity: .7; transition: opacity .25s; }
.links a:hover { opacity: 1; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px 7px 14px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--m3) 55%, transparent); background: color-mix(in srgb, var(--s3) 70%, transparent); color: var(--m2);
  font-size: 15px; transition: border-color .25s, background .25s; }
.pill:hover { border-color: var(--m2); background: color-mix(in srgb, var(--s1) 80%, transparent); }
.pill:focus { outline: none; }
.pill:focus-visible { border-color: var(--m2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--m2) 60%, transparent); }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
.pill svg { width: 14px; height: 14px; }
.pill.big { padding: 11px 26px; font-size: 16.5px; }
#install { position: absolute; left: 50%; transform: translateX(-50%); }
#install.call { animation: call 1.6s ease-in-out infinite; }
@keyframes call { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m3) 50%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }

/* nothing beyond the door without a key: the tools, links and install appear once inside */
.door-page .rail, .door-page .foot { opacity: 0; visibility: hidden; transition: opacity .9s ease .5s, visibility 0s linear 1.4s; }
body.door-page.entered .rail, body.door-page.entered .foot { opacity: 1; visibility: visible; transition: opacity .9s ease .5s, visibility 0s; }
/* the door: 🌐 language in the top right corner, opposite the X (changing language is no secret) */
body.door-page:not(.entered) .rail { opacity: 1; visibility: visible; transition: none; top: 22px; bottom: auto; right: 24px; }
body.door-page:not(.entered) .rail .ic:not([data-act="lang"]) { display: none; }
@media (max-width: 560px) { body.door-page:not(.entered) .rail { top: 14px; right: 14px; } }
html:not(.member) body.text-page:not(.nf) { visibility: hidden; }

/* the in-app gate: shown only inside Messenger, WhatsApp, Instagram, TikTok… */
.gate { display: none; }
html.inapp .gate { display: block; }
html.inapp .door, html.inapp #hint, html.inapp #install { display: none !important; }
.gate-text { margin: -8px 0 26px; font-size: 17.5px; }
.gate .hint { display: block; margin: 18px auto 0; }

/* the room */
.room .scroll { max-height: calc(100dvh - 150px); overflow-y: auto; scrollbar-width: none; padding: 6px 4px; }
.room .scroll::-webkit-scrollbar { display: none; }
.welcome { font-size: 15px; color: var(--m3); margin: 0; }
.num { margin: 6px 0 2px; font-weight: 600; line-height: 1.05; font-size: 64px; }
.num small { font-size: 18px; vertical-align: .9em; margin-right: .4em; }
.inside { margin: 0; font-size: 18px; }
.since { margin: 2px 0 0; font-size: 15px; opacity: .65; }
.sep { width: 120px; height: 1px; margin: 22px auto; background: linear-gradient(90deg, transparent, var(--m3), transparent); opacity: .7; }
.gifts-t { margin: 0; font-weight: 600; font-size: 17px; color: var(--m2); }
.gifts-s { margin: 4px 0 12px; font-size: 15px; opacity: .75; }
.gift { display: grid; grid-template-columns: 250px 64px 70px; align-items: center; justify-content: center; gap: 4px; padding: 7px 0; }
.gift .k { text-align: center; }
.gift.used { grid-template-columns: 250px 138px; }
.gift .k { font-size: 18px; letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; }
.gift.used .k { opacity: .35; text-decoration: line-through color-mix(in srgb, var(--m3) 50%, transparent); }
.act { background: none; border: 0; padding: 2px 4px; cursor: pointer; font-size: 14.5px; color: var(--m3); opacity: .85; }
.act:hover { opacity: 1; }
.opened { font-size: 15px; color: var(--m3); }
.meta-line { margin: 4px 0; font-size: 15px; opacity: .75; }
.owner { margin: 8px 0 0; font-size: 14px; color: var(--m3); opacity: .8; }
.quiet { margin-top: 14px; display: flex; justify-content: center; gap: 22px; }
.quiet .act { opacity: .45; }

/* opening */
.door, .room { transition: opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), filter .9s; }
/* dev-0004 · the opening: 3 seconds of motion (door.js draws the doors, the light and the gold dust) */
body.opening .door { opacity: 0; transform: translate(-50%, -50%) scale(.94); filter: blur(4px); pointer-events: none;
  transition: opacity .55s ease, transform .7s cubic-bezier(.4,0,.2,1), filter .55s ease; }
body.opening .bloom { animation: bloom 5.2s ease-out forwards; }
@keyframes bloom { 0%, 18% { opacity: 0; } 45% { opacity: .6; } 100% { opacity: 0; } }
body.opening:not(.entered) #lines { opacity: 0; transition: none; }
.room.enter { opacity: 0; transform: translate(-50%, -46%); }
body.entered .room { transition: opacity 1.5s ease, transform 1.7s cubic-bezier(.2,.7,.2,1); }
body.entered .room.enter { opacity: 0; transform: translateY(34px) scale(.985); }
#opener { position: fixed; inset: 0; z-index: 2; pointer-events: none; perspective: 1700px; overflow: hidden; }
#opener .op-light { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 34% 62% at 50% 50%, rgba(255,247,224,.95) 0%, color-mix(in srgb, var(--m2) 70%, transparent) 22%, color-mix(in srgb, var(--m3) 32%, transparent) 48%, transparent 76%); }
#opener .op-seam { position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--m2) 18%, #fffaf0 50%, var(--m2) 82%, transparent);
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--m2) 60%, transparent); }
#opener .op-leaf { position: absolute; top: 0; width: 50%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(ellipse 55% 45% at 50% 52%, var(--s1) 0%, var(--s2) 42%, var(--s3) 72%, var(--bg) 100%) 0 0 / 200% 100% no-repeat; }
#opener .op-leaf.r { background-position: 100% 0; }
#opener .op-leaf.l { left: 0; transform-origin: 0 50%; box-shadow: inset -1px 0 0 color-mix(in srgb, var(--m2) 55%, transparent); }
#opener .op-leaf.r { right: 0; transform-origin: 100% 50%; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--m2) 55%, transparent); }
#opener .op-leaf canvas { display: block; width: 100%; height: 100%; }
#opener .op-leaf i { position: absolute; inset: 0; opacity: 0; }
#opener .op-leaf.l i { background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.8)); }
#opener .op-leaf.r i { background: linear-gradient(270deg, rgba(0,0,0,.2), rgba(0,0,0,.8)); }
.op-dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }

/* inside: each part rises in as it comes into view; the map lights up, "Current City" shimmers once, the seal is stamped */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv .seal { opacity: 0; }
.rv.in .seal { animation: stamp 1s cubic-bezier(.25,.8,.25,1) .45s both; }
@keyframes stamp {
  0% { opacity: 0; transform: translateY(-48px) rotate(-26deg) scale(1.7); filter: drop-shadow(0 34px 22px rgba(0,0,0,.55)); }
  55% { opacity: 1; transform: translateY(0) rotate(-6deg) scale(.93); filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
  76% { transform: rotate(-10deg) scale(1.03); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); filter: none; } }
.rv.in .city .lbl { animation: shimmer 2.6s ease-in-out .6s 1 both; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* pop-ups */
.pop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.card { position: relative; border-radius: 20px; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; scrollbar-width: none;
  padding: 30px 28px 26px; background: linear-gradient(180deg, var(--s2), var(--s3)); border: 1px solid color-mix(in srgb, var(--m3) 40%, transparent);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 4px var(--s3), inset 0 0 0 5px color-mix(in srgb, var(--m3) 14%, transparent); }
.card::-webkit-scrollbar { display: none; }
.x { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--m3); opacity: .7; }
.x:hover { opacity: 1; }
.card h2 { margin: 0 0 14px; font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--m2); text-align: center; }
.card h3 { margin: 16px 0 2px; font-weight: 600; font-size: 17px; color: var(--m3); }
.card p { margin: 0 0 6px; font-size: 17px; }
.card .small { font-size: 15px; opacity: .72; }
.card .row { display: flex; justify-content: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.choices { display: grid; gap: 4px; }
.card.fit { width: auto; min-width: 230px; max-width: min(440px, 100%); }
.card.fit #lang-find { width: 100%; }
.choice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border-radius: 12px; background: none; border: 1px solid transparent; cursor: pointer; text-align: left;
  font-size: 17px; color: var(--m2); text-decoration: none; }
.choice:hover, .choice.on { border-color: color-mix(in srgb, var(--m3) 45%, transparent); }
.choice .sw { width: 44px; height: 2px; }

/* text pages: Terms, Privacy, 404 */
.text-page { min-height: 100vh; }
.text { position: relative; z-index: 4; width: min(680px, calc(100vw - 2 * var(--gut))); margin: 0 auto; padding: 110px 0 120px; }
.text.center { text-align: center; padding-top: 30vh; }
.kicker { margin: 0; font-size: 15px; color: var(--m3); }
.text h1 { margin: 8px 0 14px; font-weight: 600; font-size: 40px; line-height: 1.15; color: var(--m2); }
.lede { font-size: 19px; margin: 0 0 28px; }
.text h2 { margin: 30px 0 6px; font-weight: 600; font-size: 20px; color: var(--m2); }
.text p { margin: 0 0 10px; }
.meta { margin-top: 36px !important; font-size: 14px; opacity: .55; }
.home { position: fixed; z-index: 6; top: 26px; left: max(28px, calc(50vw - 560px)); display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 14.5px; color: var(--m3); opacity: .8; }
.home:hover { opacity: 1; }
.text-page::after { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 74px; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 58%, transparent); }
.text-page .foot { position: relative; left: auto; right: auto; bottom: auto; z-index: 4; width: min(680px, calc(100vw - 2 * var(--gut))); margin: 0 auto; padding: 0 0 44px; }
.text-page .text { padding-bottom: 56px; }
.text-page .frame { position: fixed; }
/* the gold frame lines belong to the door only: wherever text is read, they go */
body.entered .frame, .text-page .frame { display: none; }

/* phones */
@media (max-width: 560px) {
  :root { --gut: 24px; }
  .frame { inset: 9px; }
  .crest { bottom: calc(50% + var(--door-half, 110px) + 18px); }
  .mark { font-size: clamp(32px, 10vw, 44px); }
  body.entered .crest { top: 22px; }
  body.entered .mark { font-size: clamp(28px, 7.5vw, 34px); }
  .rail { top: 14px; right: 12px; }
  .ic { width: 32px; height: 32px; }
  .label { font-size: 17px; margin-bottom: 16px; }
  #code { font-size: 22px; letter-spacing: .05em; padding-left: .05em; }
  .foot { left: 20px; right: 20px; bottom: 22px; }
  .links { gap: 14px; }
  .door-page .rail { top: auto; bottom: 12px; right: 10px; }
  .shut { top: 14px; left: 14px; }
  .door-page #install { position: fixed; bottom: 62px; }
  .num { font-size: 52px; }
  .gift .k { font-size: 17px; }
  .gift { grid-template-columns: 196px 56px 62px; }
  .gift.used { grid-template-columns: 196px 118px; }
  .text { padding-top: 90px; }
  .text h1 { font-size: 32px; }
  .home { top: 18px; left: 18px; }
}
@media (max-height: 620px) { .mark { font-size: clamp(28px, 4.4vw, 44px); } .kick { display: none; } .orn { margin-top: 10px; } }
@media (max-height: 420px) { .crest { display: none; } }
/* scripts where wide spacing and capitals do not exist */
html:not([lang="en"]):not([lang="es"]):not([lang="fr"]):not([lang="de"]):not([lang="pt"]):not([lang="it"]):not([lang="nl"]):not([lang="pl"]):not([lang="tr"]):not([lang="id"]):not([lang="vi"])
  :is(.label, .welcome, .gifts-t, .card h2, .card h3, .text h2, .kicker, .links a, .num small) { letter-spacing: 0; text-transform: none; padding-left: 0; }
html:not([lang="en"]):not([lang="es"]):not([lang="fr"]):not([lang="de"]):not([lang="pt"]):not([lang="it"]):not([lang="nl"]):not([lang="pl"]):not([lang="tr"]):not([lang="id"]):not([lang="vi"])
  :is(.pill, .act, .home) { letter-spacing: 0; text-transform: none; } /* buttons keep their own padding, so the word stays centred */
html:is([lang="zh"], [lang="hi"]) .label { font-size: 19px; }
@media (max-width: 560px) { html:is([lang="zh"], [lang="hi"], [lang="ar"], [lang="fa"]) .label { font-size: 16.5px; } }
html[lang="zh"] { --serif: "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif; }
html[lang="ko"] { --serif: "Source Serif 4", "Noto Serif KR", "Nanum Myeongjo", "Batang", serif; }
html[lang="hi"] { --serif: "Source Serif 4", "Noto Serif Devanagari", "Nirmala UI", "Mangal", serif; }
html[lang="ar"], html[lang="fa"] { --serif: "Source Serif 4", "Noto Naskh Arabic", "Amiri", "Traditional Arabic", "Times New Roman", serif; }
html[lang="ar"] .label, html[lang="fa"] .label { font-size: 19px; }
[dir="rtl"] .home svg { transform: scaleX(-1); }
[dir="rtl"] .choice { text-align: right; }
[dir="rtl"] .num small { margin-right: 0; margin-left: .4em; }
[dir="rtl"] .x { right: auto; left: 12px; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } .rv .seal { opacity: 1; } .rv.in .seal, .rv.in .city .lbl { animation: none; } .label { animation: none; } .field:focus-within .rule::after { animation: none; } }

/* ===================================================== the main page inside (dev-0003) */
body.door-page.entered { height: auto; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; touch-action: auto; }
body.entered #lines { opacity: .42; transition: opacity 1.2s ease; }
/* inside: the name sits dead centre in the top bar — the same centre line as the × on the left and the icons on the right */
body.entered .crest { top: 0; bottom: auto; height: 84px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 84px, transparent 100%); }
body.entered .crest .mark { line-height: 1; }
body.entered .shut { top: 22px; }
body.entered .rail { top: 24px; }
@media (max-width: 560px) { body.entered .crest { height: 76px; } body.entered .shut { top: 18px; } body.entered .rail { top: 22px; } }
body.entered .room { position: relative; left: auto; top: auto; transform: none; width: min(760px, calc(100vw - 2 * var(--gut))); margin: 0 auto; padding: 96px 0 78px; text-align: center; }
body.entered .room::before { display: none; }
/* inside, the footer stays in view while scrolling: a slim bar on a soft fade, no dead space under the last line */
body.entered .foot { position: fixed; left: 0; right: 0; bottom: 0; width: auto; margin: 0;
  padding: 18px max(var(--gut), calc(50vw - 380px)) calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, var(--bg) 0%, var(--bg) 58%, transparent 100%); }
body.entered .bloom { display: none; }
.main { position: relative; }
.sec { margin: 0; }
.sec-t { margin: 0 0 calc(var(--sp) * .5); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--m2); }
.sub-t { margin: var(--sp) 0 calc(var(--sp) * .4); font-weight: 600; font-size: 17.5px; color: var(--m3); }
.sub-t.left { text-align: left; padding-left: 0; }
.div { display: flex; align-items: center; justify-content: center; gap: 12px; margin: calc(var(--sp) * 1.1) 0; }
.div i { width: min(110px, 22vw); height: 1px; background: linear-gradient(90deg, transparent, var(--m1) 25%, var(--m3)); opacity: .8; }
.div i:last-child { background: linear-gradient(270deg, transparent, var(--m1) 25%, var(--m3)); }
.div b { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--m3); }
.hello { padding-top: 6px; }
.hello-t { margin: 0; font-weight: 600; font-size: 17px; line-height: 1.2; color: var(--m2); }
.hello .inside { margin: 10px 0 0; font-size: 19px; color: var(--m2); }
.worldmap { display: block; width: 100%; height: auto; }
.meet { margin: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.meet .lbl { font-size: 15px; color: var(--m3); opacity: .9; }
.meet .val { font-size: 23px; color: var(--m2); }
.meet .val.soft { opacity: .7; font-size: 18px; }
.meet + .meet { margin-top: calc(var(--sp) * .7); }
/* the meet-up city: a lit plaque; a tap opens the map in the framed window */
.city { position: relative; isolation: isolate; display: block; width: fit-content; max-width: 100%; margin: 4px auto 0; padding: 14px 26px 16px;
  background: none; border: 0; cursor: pointer; text-align: center; color: var(--m2); }
/* gentle: rounded corners, a soft gold hairline, a warm glow — no hard cut corners */
.city { border-radius: 20px; border: 1px solid color-mix(in srgb, var(--m3) 34%, transparent);
  background: radial-gradient(ellipse 80% 120% at 50% 0%, color-mix(in srgb, var(--s1) 85%, transparent) 0%, color-mix(in srgb, var(--s2) 82%, transparent) 62%, color-mix(in srgb, var(--s3) 80%, transparent) 100%);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 34px color-mix(in srgb, var(--m3) 9%, transparent), inset 0 1px 0 rgba(255,238,200,.07);
  transition: border-color .4s ease, box-shadow .4s ease; }
.city:hover, .city:focus-visible { border-color: color-mix(in srgb, var(--m3) 58%, transparent);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 44px color-mix(in srgb, var(--m3) 16%, transparent), inset 0 1px 0 rgba(255,238,200,.09); }
.city:focus-visible { outline: none; }
/* the spotlight is on "Current city": it stays while the city changes */
.city .lbl { display: inline-block; font-size: 20px; font-weight: 600; color: transparent;
  background: linear-gradient(100deg, var(--m3) 0%, var(--m2) 20%, var(--m3) 40%, #fffaf0 50%, var(--m3) 60%, var(--m2) 80%, var(--m3) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--m3) 45%, transparent));
 }
/* a hair-thin dark green line under "Current City", always below the lowest letter (the leg of the "y") */
.city .lbl { text-decoration-line: underline; text-decoration-color: color-mix(in srgb, #2a7a4c 85%, transparent);
  text-decoration-thickness: 1px; text-underline-position: under; text-underline-offset: 5px; text-decoration-skip-ink: none; }
/* the city name always stays on one line: its size follows the screen width, up to 31px */
.city .v { display: block; margin: 2px 0 8px; font-size: clamp(16px, calc((100vw - 96px) / 14.6), 31px); white-space: nowrap; color: var(--m2); font-weight: 600; line-height: 1.25; }
.city .nw { white-space: nowrap; }
.city .v svg { width: .85em; height: .85em; margin-right: .25em; vertical-align: -.1em; fill: none; stroke: var(--m3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.city .go { font-size: 15px; color: var(--m3); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--m3) 50%, transparent); }
.city:hover .go { color: var(--m2); }
@media (max-width: 560px) { .city { padding: 12px 18px 14px; } }
.lede-c { margin: 0 auto; max-width: 560px; font-size: 17.5px; color: color-mix(in srgb, var(--m2) 90%, transparent); }
.wishbox { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 14px 10px 18px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--m3) 40%, transparent); background: color-mix(in srgb, var(--s2) 75%, transparent); }
.wishbox .lead { white-space: nowrap; color: var(--m3); font-size: 17px; }
.wishbox :is(input, textarea) { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--m2); font-family: var(--serif); font-size: 17px; padding: 6px 0; }
.wishbox :is(input, textarea)::placeholder { color: color-mix(in srgb, var(--m2) 30%, transparent); }
.wishbox:focus-within { border-color: var(--m2); }
.promise { margin: calc(var(--sp) * .45) auto 0; max-width: 560px; font-size: 15.5px; opacity: .8; }
.wishes { text-align: left; }
.wishrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 2px; border-bottom: 1px solid color-mix(in srgb, var(--m3) 16%, transparent); }
.wishrow p { margin: 0; font-size: 17px; }
.wishrow .lead { color: var(--m3); }
.wishrow .act { flex: 0 0 auto; opacity: .85; }
.secret-card { position: relative; padding: calc(var(--sp) * 1.1) 30px var(--sp); text-align: center; }
.secret-card::before, .secret-card::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
  border-radius: 22px; }
.secret-card::before { inset: 0; background: linear-gradient(120deg, var(--m1), var(--m2) 30%, var(--m3) 50%, var(--m2) 70%, var(--m1)); opacity: .6; }
.secret-card::after { inset: 1px; background: radial-gradient(ellipse at 50% 0%, var(--s1) 0%, var(--s2) 62%, var(--s3) 100%);
  border-radius: 21px; }
.secret-title { margin: 4px 0 calc(var(--sp) * .5); font-weight: 600; font-size: clamp(26px, 4vw, 36px); line-height: 1.2; color: var(--m2); }
.secret-intro { margin: 0 0 calc(var(--sp) * .7); text-align: left; font-size: 17.5px; }
/* sealed: a vintage red wax seal under the phrase */
.seal { display: block; width: 104px; height: 104px; margin: -4px auto calc(var(--sp) * .6); transform: rotate(-9deg); }
@media (max-width: 560px) { .seal { width: 92px; height: 92px; } }
/* the card is the envelope: fine lines behind the words, the flap closing on the seal */
.secret-card { isolation: isolate; }
.secret-card::before { z-index: -3; }
.secret-card::after { z-index: -2; }
.env-l { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; overflow: visible;
  stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.env-l .env-f { stroke: color-mix(in srgb, var(--m3) 30%, transparent); }
.env-l .env-s { stroke: color-mix(in srgb, var(--m3) 17%, transparent); }
/* the rolling lines: last week's Secret above this week's, next week's below */
.secret-card .roll { margin: 0 0 calc(var(--sp) * .35); font-size: 15px; color: var(--m3); opacity: .75; }
.secret-card .pill + .roll { margin: calc(var(--sp) * .6) 0 0; }
.secret-card .next { margin: 14px 0 0; font-size: 14.5px; opacity: .7; }
.keys { text-align: left; margin-top: 8px; }
.keyrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 2px; border-bottom: 1px solid color-mix(in srgb, var(--m3) 16%, transparent); }
.keyrow .k { font-size: 18px; letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; color: var(--m2); }
.keyrow .acts { display: flex; gap: 16px; }
.keyrow.used .k { opacity: .38; text-decoration: line-through color-mix(in srgb, var(--m3) 50%, transparent); }
.keyrow .opened { color: var(--m3); }
.card .center { text-align: center; }

/* This Week's Secret, full page */
.article { position: fixed; inset: 0; z-index: 9; overflow-y: auto; background: var(--bg); overscroll-behavior: contain; }
.article .in { width: min(680px, calc(100vw - 2 * var(--gut))); margin: 0 auto; padding: 96px 0 110px; text-align: left; }
.article .sec-t, .article .secret-title, .article .art-intro, .article .art-after { text-align: center; }
.article .secret-title { font-size: clamp(30px, 4.6vw, 42px); }
.art-intro { margin: 0 0 10px; font-size: 19px; }
.art-after { margin: 0 0 calc(var(--sp) * 1.2); font-size: 14.5px; opacity: .65; }
.punch { margin: 0 0 var(--sp); font-size: 22px; line-height: 1.4; color: var(--m2); font-weight: 600; }
.article h2 { margin: calc(var(--sp) * 1.1) 0 8px; font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--m2); }
.article p { font-size: 18px; line-height: 1.7; margin: 0 0 14px; }
.concl { margin-top: var(--sp) !important; }
.article .apply { color: var(--m2); }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--m3) 14%, transparent); font-size: 17.5px; line-height: 1.6; }
.steps .n { font-size: 15px; font-weight: 600; color: var(--m3); padding-top: 1px; }
.back { position: fixed; z-index: 10; top: 20px; left: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--m3) 50%, transparent); background: color-mix(in srgb, var(--s3) 85%, transparent); color: var(--m2);
  font-size: 14.5px; }
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; }
body.reading .shut, body.reading .rail { visibility: hidden; }
@media (max-width: 560px) {
  body.entered .room { padding-top: 84px; }
  body.entered .door-page .rail, body.door-page.entered .rail { top: 22px; bottom: auto; } /* same centre line as the name */
  .wishbox { flex-wrap: wrap; }
  .wishbox :is(input, textarea) { flex-basis: 100%; order: 2; }
  .wishbox .pill { order: 3; margin-left: auto; }
  .wishrow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wishrow .act { align-self: flex-end; }
  .keyrow .k { font-size: 16.5px; }
  .secret-card { padding: 30px 20px 24px; }
  .steps li { grid-template-columns: 1fr; gap: 2px; }
  .back { top: 14px; left: 14px; }
}
/* inside, the install pill sits in the footer line, never floating over the page */
body.entered #install, body.entered.door-page #install { position: static; transform: none; }

.meet-how { margin: calc(var(--sp) * .8) auto; max-width: 560px; }
.meet-how p { margin: 0 0 8px; font-size: 17px; line-height: 1.6; color: color-mix(in srgb, var(--m2) 88%, transparent); }
.meet-how .home-line { margin-top: 14px; font-weight: 600; font-size: 17.5px; color: var(--m2); }

.camp { margin: 26px 0 16px; position: relative; }
.camp img { display: block; width: 100%; height: auto; border: 1px solid color-mix(in srgb, var(--m3) 45%, transparent); }
.camp::after { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--m2) 22%, transparent); pointer-events: none; }
.hammock { margin: 0 auto calc(var(--sp) * .55); max-width: 560px; font-size: 17px; line-height: 1.6; }
.framewin { position: fixed; inset: 0; z-index: 11; display: flex; flex-direction: column; padding: 18px; background: rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fw-bar { position: relative; border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: center; height: 46px; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--s2), var(--s3)); border: 1px solid color-mix(in srgb, var(--m3) 45%, transparent); border-bottom: 0; }
.fw-t { font-size: 15.5px; color: var(--m2); }
.fw-bar .x { top: 6px; right: 12px; }
.framewin iframe { flex: 1 1 auto; border-radius: 0 0 16px 16px; width: 100%; border: 1px solid color-mix(in srgb, var(--m3) 45%, transparent); background: #fff; }
body.framing .shut, body.framing .rail { visibility: hidden; }
@media (max-width: 560px) { .framewin { padding: 8px; } }

/* the code, in 4 steps */
.how { list-style: none; margin: 4px 0 0; padding: 0; }
.how li { display: flex; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--m3) 14%, transparent); font-size: 17px; line-height: 1.5; }
.how .no { flex: 0 0 26px; height: 26px; display: inline-grid; place-items: center; border: 1px solid color-mix(in srgb, var(--m3) 60%, transparent); border-radius: 50%;
  font-size: 13px; color: var(--m2); transform: translateY(-1px); }
.how a { color: var(--m2); }
.eg { display: inline-block; margin: 6px 0 0 8px; padding: 2px 10px; border-radius: 8px; font-size: 15.5px; letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; color: var(--m2);
  border: 1px dashed color-mix(in srgb, var(--m3) 60%, transparent); white-space: nowrap; }
.how-or { margin: 16px 0 0 !important; font-size: 17px; }
.how-or.how-first { margin-top: 4px !important; }
.how-new { margin: 14px 0 0 !important; font-size: 15px !important; opacity: .78; }
.how-lede { margin: -6px 0 6px !important; text-align: center; opacity: .8; }
.how.big li { font-size: 18px; padding: 12px 0; }
.how.big li:last-child { border-bottom: 0; }
.card .row.tight { margin-top: 10px; }
.pill.gold-pill { color: #140f08; border-color: transparent; background: linear-gradient(120deg, var(--m1), var(--m2) 45%, var(--m3)); }
.pill.gold-pill:hover { color: #140f08; filter: brightness(1.08); background: linear-gradient(120deg, var(--m1), var(--m2) 45%, var(--m3)); }
/* Paste: inside the plaque, at its right end, while the field is empty */
.field .paste { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--m3); opacity: .5; transition: opacity .25s, color .25s; }
.field .paste:hover, .field .paste:focus-visible { opacity: 1; color: var(--m2); outline: none; }
.field .paste svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.field .paste[hidden] { display: none; }

/* dev-0005 · the main page as five full-screen cards, turned like the pages of a vintage wall calendar */
body.entered.stacked .room { position: static; width: auto; margin: 0; padding: 0; }
body.entered.stacked .room.enter { transform: none; }
.stack { position: fixed; inset: 0; z-index: 4; perspective: 1800px; perspective-origin: 50% 0; pointer-events: none; }
.cp { position: absolute; inset: 0; overflow: hidden; pointer-events: auto; transform-origin: 50% 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform;
  background: radial-gradient(ellipse 75% 60% at 50% 42%, color-mix(in srgb, var(--s1) 93%, transparent) 0%, color-mix(in srgb, var(--s2) 95%, transparent) 68%, color-mix(in srgb, var(--s3) 97%, transparent) 100%);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--m3) 22%, transparent) inset; }
.cp-in { box-sizing: border-box; width: min(760px, calc(100vw - 2 * var(--gut))); min-height: 100%; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; padding: 84px 0 36px; /* dead centre between the top bar and the letters of Home */ text-align: center; }
.cp-in > * { flex: 0 0 auto; }
.cp-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.9)); }
.stack-space { width: 1px; pointer-events: none; }
.cp .seal { opacity: 0; }
.cp.on .seal { animation: stamp 1s cubic-bezier(.25,.8,.25,1) .45s both; }
.cp.on .city .lbl { animation: shimmer 2.6s ease-in-out .6s 1 both; }
@media (max-width: 560px) { .cp-in { padding: 76px 0 34.5px; } } /* the phone footer is a little lower (icon-only Share and Install) */
/* the card's content is centred by its visible edges: no outer margin on the first and last lines */
.cp-in > :first-child { margin-top: 0 !important; }
.cp-in > :last-child { margin-bottom: 0 !important; }
@media (prefers-reduced-motion: reduce) { .cp .seal { opacity: 1; } .cp.on .seal, .cp.on .city .lbl { animation: none; } }

/* the article's second Back, at the end of the steps */
.article .back.end { position: static; display: inline-flex; margin: calc(var(--sp) * 1.4) 0 0; }

/* footer, inside: Terms · Privacy on the left, Home in the centre, Install on the right */
.foot .home-btn { position: absolute; left: 50%; transform: translateX(-50%); background: none; border: 0; padding: 6px 12px; cursor: pointer;
  font-size: 15px; color: var(--m2); opacity: .85; transition: opacity .25s; }
.foot .home-btn:hover, .foot .home-btn:focus-visible { opacity: 1; outline: none; text-decoration: underline; text-underline-offset: 4px; }
.foot .home-btn[hidden] { display: none; }

/* Lines picker: a small see-through panel under the icons; the page stays in full view behind it */
.tpick { position: fixed; z-index: 12; top: 72px; right: max(20px, calc(50vw - 568px)); padding: 12px 14px 10px; border-radius: 18px;
  background: color-mix(in srgb, var(--s2) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--m3) 35%, transparent); box-shadow: 0 12px 34px rgba(0,0,0,.45); animation: tpIn .25s ease-out; }
@keyframes tpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tpick .tp-t { margin: 0 0 8px; font-size: 14px; color: var(--m3); text-align: center; }
.tpick .tp-row { display: flex; gap: 6px; }
.tpick .tp-sw { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; padding: 8px 4px; border: 1px solid transparent;
  border-radius: 14px; background: none; cursor: pointer; color: var(--m2); }
.tpick .tp-sw:hover, .tpick .tp-sw:focus-visible { border-color: color-mix(in srgb, var(--m3) 40%, transparent); outline: none; }
.tpick .tp-sw .dot { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 4px 12px rgba(0,0,0,.5); }
.tpick .tp-sw.on .dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--m2), 0 4px 12px rgba(0,0,0,.5); }
.tpick .tp-sw .nm { font-size: 13px; line-height: 1.2; text-align: center; }
@media (max-width: 560px) { .tpick { right: 12px; left: 12px; top: 64px; } .tpick .tp-row { justify-content: space-between; } .tpick .tp-sw { width: auto; flex: 1; } }

/* card 1: "This week: …" sits under the map */
.cp .week-line { margin: calc(var(--sp) * .8) 0 0; font-size: 19px; color: var(--m2); }
.cp .hello + .sec { margin-top: calc(var(--sp) * .9); }

/* Meet-up: the Hammock Hotel button first, its line just under it */
.meet-how + .pill { margin-top: calc(var(--sp) * .2); }
.pill + .hammock { margin: calc(var(--sp) * .5) auto calc(var(--sp) * .6); }

/* A Global Family: title · State your wish + form · our goal · the promise */
.sec > .sec-t + .sub-t { margin-top: calc(var(--sp) * .4); }
.wishbox + .family-goal { margin-top: calc(var(--sp) * .9); }
.family-goal + .promise { margin-top: calc(var(--sp) * .5); }

/* wishes: "I can help" first, then the wish */
.wishrow.help-first { justify-content: flex-start; gap: 16px; }
.wishrow.help-first .act { flex: 0 0 auto; }
.wishrow.help-first p { flex: 1 1 auto; text-align: left; }

/* last week's Secret, above "This Week's Secret", fading away like a page already turned */
.secret-card .roll.past { margin: 0 0 calc(var(--sp) * .7); opacity: .85; font-size: 15px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.75), #000 75%); mask-image: linear-gradient(180deg, rgba(0,0,0,.75), #000 75%); }

/* inside: the conclusion of the last card, dead centre between its last line and "Home" (placed by door.js) */
.tagline { position: absolute; left: 0; right: 0; top: 0; margin: 0; text-align: center; pointer-events: none;
  font-weight: 700; font-style: italic; font-size: 16px; color: var(--m2); }
.tagline[hidden] { display: none; }
@media (max-width: 560px) { .tagline { font-size: 15px; } }

/* Global Meet-up card: a little tighter so it fits between the top bar and the tagline */
.cp .meet-how { margin: calc(var(--sp) * .6) auto; }
.cp .meet-how p { margin-bottom: 5px; }
.cp .pill + .hammock { margin: calc(var(--sp) * .4) auto calc(var(--sp) * .45); }

/* "Next city will be named here!": one line, no box; "Next city" keeps the look of "Current City" */
.next-city { margin: calc(var(--sp) * .5) auto 0; font-size: 20px; line-height: 1.5; color: var(--m2); text-align: center; }
.next-city .lbl { font-size: 20px; font-weight: 600; color: transparent;
  background: linear-gradient(100deg, var(--m3) 0%, var(--m2) 20%, var(--m3) 40%, #fffaf0 50%, var(--m3) 60%, var(--m2) 80%, var(--m3) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  text-decoration-line: underline; text-decoration-color: color-mix(in srgb, #2a7a4c 85%, transparent);
  text-decoration-thickness: 1px; text-underline-position: under; text-underline-offset: 5px; text-decoration-skip-ink: none; }
@media (max-width: 560px) { .next-city, .next-city .lbl { font-size: 18px; } }

/* the door: an email (the owner's Admin entry) is typed smaller, so it fits the field */
.field.mail #code { font-size: 19px; letter-spacing: .01em; padding-left: 0; }

/* "Current City", clickable for the owner only: it opens the Admin page */
.city .lbl[data-do="admin"] { cursor: pointer; }
.city .lbl[data-do="admin"]:focus-visible { outline: 1px solid color-mix(in srgb, var(--m3) 60%, transparent); outline-offset: 4px; border-radius: 6px; }

/* the Admin page, in the same framed window as the Hammock Hotel */
.adm { flex: 1 1 auto; overflow-y: auto; border-radius: 0 0 16px 16px; border: 1px solid color-mix(in srgb, var(--m3) 45%, transparent);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--s1) 0%, var(--s2) 70%, var(--s3) 100%); padding: 22px 18px 30px; text-align: center; }
.adm, .adm * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; cursor: auto; }
.adm button, .adm button * { -webkit-user-select: none; user-select: none; cursor: pointer; }
.adm-sec { max-width: 560px; margin: 0 auto 26px; }
.adm-sec h3 { margin: 0 0 12px; font-size: 19px; font-weight: 600; color: var(--m2); }
.coming { margin: 18px 0 0; text-align: center; }
.ai-line { margin: 10px auto 0 !important; max-width: 560px; font-size: 15px; line-height: 1.5; color: var(--m3); text-align: center; }
.ai-line .act { margin-left: 6px; }
.tw-acts { justify-content: center; gap: 6px 18px; flex-wrap: wrap; margin: 14px 0 0; }
.notify { margin: 10px auto 0; text-align: center; max-width: 560px; }
.notify .small { font-size: 15px; color: var(--m3); }
.notify p.small { margin: 4px 0 0 !important; }
.lt-form textarea { width: 100%; box-sizing: border-box; margin: 6px 0 10px; }
.lt-item { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--m3) 16%, transparent); text-align: left; }
.lt-text { white-space: pre-wrap; font-size: 17px; line-height: 1.6; color: var(--m2); margin: 8px 0 10px !important; }
.lt-sealed { margin: 6px 0 0 !important; text-align: left; }
.adm-suggest .act { margin-left: 6px; }
.adm-day { margin: 14px 0 2px; font-size: 14px; font-weight: 600; letter-spacing: .03em; color: var(--m2); text-align: left; }
.adm-wish .acts { display: flex; gap: 8px; flex: 0 0 auto; }
.tw-week { font-size: 15px; letter-spacing: .04em; color: var(--m3); }
.tw-go { margin: 22px 0 6px !important; }
.coming-n { margin: 0 0 6px !important; font-size: 17px; color: var(--m2); }
.coming-who { margin: 0 0 10px !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 15px; color: var(--m3); }
.coming-you { margin: 0 0 8px !important; font-size: 16px; color: var(--m2); }
.w-coming { display: block; margin-top: 3px; font-size: 13px; letter-spacing: .02em; color: var(--m3); }
.come-form { text-align: left; }
.come-form .small { margin: 6px 0 4px; }
.adm-f { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; text-align: left; }
.adm-f span { flex: 0 0 120px; font-size: 15px; color: var(--m3); }
.adm-f input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 17px; color: var(--m2); background: color-mix(in srgb, var(--s3) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--m3) 34%, transparent); border-radius: 12px; padding: 9px 12px; outline: none; }
.adm-f input:focus { border-color: color-mix(in srgb, var(--m3) 70%, transparent); }
.adm-st { min-height: 1.6em; margin: 8px 0 0; font-size: 15px; color: var(--m3); }
.adm-note, .adm-line { margin: 0 0 12px; font-size: 15.5px; color: color-mix(in srgb, var(--m2) 85%, transparent); }
.adm-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.adm-nums p { margin: 0; min-width: 96px; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--m3) 24%, transparent); }
.adm-nums b { display: block; font-size: 24px; color: var(--m2); font-variant-numeric: lining-nums tabular-nums; }
.adm-nums span { font-size: 13.5px; color: var(--m3); }
.adm .keys { margin-top: 12px; }
.adm .keyrow.fresh .k { color: var(--m1); text-shadow: 0 0 14px color-mix(in srgb, var(--m3) 55%, transparent); }
@media (max-width: 560px) { .adm { padding: 18px 12px 26px; } .adm-f { flex-direction: column; align-items: stretch; gap: 4px; } .adm-f span { flex: none; } }

/* buttons answer a click or a tap for real: a quick press-in the moment they are touched.
   Inside the turning cards the press is drawn with light and shadow only (a scale or filter there would take the
   button out from under the finger while the page is in 3D, and the click would land on the card instead) */
:is(button, a, [role="button"], [data-do], .city) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:is(.pill, .act, .back, .x, .home-btn, .paste, button[data-metal]) { transition: scale .14s ease, filter .14s ease, box-shadow .14s ease, color .14s ease; }
:is(.pill, .act, .back, .x, .home-btn, .paste, button[data-metal]):active { scale: .94; filter: brightness(1.18); }
.cp :is(.pill, .act, .back, .paste):active { scale: none; filter: none; color: var(--m1); box-shadow: inset 0 2px 9px rgba(0,0,0,.55), 0 0 14px color-mix(in srgb, var(--m3) 30%, transparent); }
.cp .city:active { border-color: color-mix(in srgb, var(--m3) 75%, transparent);
  box-shadow: inset 0 3px 14px rgba(0,0,0,.6), 0 0 30px color-mix(in srgb, var(--m3) 22%, transparent); }
.cp .city .lbl[data-do="admin"]:active { text-decoration-color: #4fd08a; }
@media (prefers-reduced-motion: reduce) { :is(.pill, .act, .back, .x, .home-btn, .paste, button[data-metal]):active { scale: none; } }

/* the plaque itself is not a link: only "See it on the map" is (and "Current City" for the owner) */
.city { cursor: default; }
.city:hover { border-color: color-mix(in srgb, var(--m3) 34%, transparent);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 34px color-mix(in srgb, var(--m3) 9%, transparent), inset 0 1px 0 rgba(255,238,200,.07); }
.city .go { display: inline-block; cursor: pointer; padding: 2px 4px; border-radius: 8px; }
.city .go:hover, .city .go:focus-visible { color: var(--m2); text-decoration-color: currentColor; outline: none; }
.cp .city:active { border-color: color-mix(in srgb, var(--m3) 34%, transparent); box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 34px color-mix(in srgb, var(--m3) 9%, transparent), inset 0 1px 0 rgba(255,238,200,.07); }
.cp .city .go:active { color: var(--m1); text-shadow: 0 0 12px color-mix(in srgb, var(--m3) 60%, transparent); }
.city:hover .go:not(:hover) { color: var(--m3); }

/* footer, inside: Terms · Privacy on the left, Home in the centre, Share and Install on the right */
.foot-r { display: flex; align-items: center; gap: 14px; }
.share-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 6px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--m2); opacity: .85; transition: opacity .25s, scale .14s ease, filter .14s ease; }
.share-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.share-btn:hover, .share-btn:focus-visible { opacity: 1; outline: none; }
.share-btn:active { scale: .94; filter: brightness(1.18); }
.share-btn[hidden] { display: none; }
@media (max-width: 560px) { .share-btn { font-size: 0; gap: 0; padding: 8px; } .share-btn svg { width: 20px; height: 20px; } }
/* the Share card */
.card .qr { width: 188px; margin: 6px auto 14px; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.card .qr svg { display: block; width: 100%; height: auto; }
.share-link { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0 0 16px; padding: 11px 14px; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 16px; color: var(--m2); background: color-mix(in srgb, var(--s3) 70%, transparent); border: 1px solid color-mix(in srgb, var(--m3) 34%, transparent); }
.share-link svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--m3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.share-link:active { scale: .97; filter: brightness(1.15); }
.share-apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.share-apps .pill { padding: 7px 14px; }
/* phone: Share and Install keep only their icons, so Home stays alone in the centre */
@media (max-width: 560px) { .foot-r { gap: 6px; } body.entered .foot #install { font-size: 0; gap: 0; padding: 8px 10px; } body.entered .foot #install svg { width: 19px; height: 19px; margin: 0; } }

/* top bar, inside: "Log me out" (this device only) */
.ic[hidden] { display: none; }
.ic:active { scale: .9; }

/* About sits on the left, next to the X; Language, Theme and Log me out stay on the right — The Secret keeps the centre to itself */
.rail .ic[data-act="about"] { position: fixed; top: inherit; bottom: inherit; left: 68px; }
.text-page .rail .ic[data-act="about"] { left: max(28px, calc(50vw - 560px)); }
@media (max-width: 560px) { .rail .ic[data-act="about"] { left: 56px; } .text-page .rail .ic[data-act="about"] { left: 12px; } }
/* narrow phones: slimmer icons hugging the edges, so The Secret keeps clear space on both sides */
@media (max-width: 400px) { body.entered .rail, body.door-page.entered .rail { top: 23px; right: 6px; gap: 0; } body.entered .ic { width: 30px; height: 30px; } body.entered .shut { left: 8px; width: 36px; } body.entered .rail .ic[data-act="about"] { left: 44px; } body.entered .mark { font-size: clamp(26px, 7.2vw, 34px); } }

/* a touch more expensive, nothing loud: card titles in gold foil, the name inside with a faint warm glow,
   and a soft pool of lamp light at the top of every card */
.cp .sec-t { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--m3) 0%, var(--m2) 38%, #fff6da 50%, var(--m2) 62%, var(--m3) 100%); }
body.entered .crest .mark { filter: drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 18px color-mix(in srgb, var(--m3) 24%, transparent)); }
.cp::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 58% 34% at 50% 0%, color-mix(in srgb, var(--m3) 8%, transparent) 0%, transparent 72%); }
/* layers inside a card: lamp light (0) · the content (1) · the conclusion line (1) · the shade of a turning page (2) */
.cp::before { z-index: 0; } .cp-in { position: relative; z-index: 1; } .cp .tagline { z-index: 1; } .cp-shade { z-index: 2; }

/* Enter: the arrow at the right end of the field (Paste's place once something is typed); gold when the code is complete */
.field .go-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--m3) 30%, transparent); border-radius: 50%; padding: 0; cursor: pointer; background: transparent;
  color: var(--m3); opacity: .55; transition: opacity .25s, color .25s, background .3s, border-color .3s, scale .14s; }
.field .go-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.field .go-btn.ready { opacity: 1; color: #140f08; border-color: transparent; background: linear-gradient(120deg, var(--m1), var(--m2) 45%, var(--m3));
  box-shadow: 0 0 18px color-mix(in srgb, var(--m3) 40%, transparent); }
.field .go-btn:active { scale: .92; }
.field .go-btn[hidden] { display: none; }
.field:has(.go-btn:not([hidden])) #code { padding-left: 40px; padding-right: 40px; } /* the typed text keeps clear of the arrow, still centred */

/* Admin: a tiny field on every key made there, for who it is for */
.adm-key { gap: 12px; }
.adm-key .adm-who { flex: 1 1 140px; min-width: 0; font: inherit; font-size: 14.5px; color: var(--m2); background: transparent;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--m3) 26%, transparent); border-radius: 0; padding: 4px 2px; outline: none; transition: border-color .25s; }
.adm-key .adm-who::placeholder { color: color-mix(in srgb, var(--m3) 55%, transparent); font-style: italic; }
.adm-key .adm-who:focus { border-bottom-color: color-mix(in srgb, var(--m3) 70%, transparent); }
.adm-key .adm-who.saved { border-bottom-color: #3f9c66; }
.adm-key.used .adm-who { opacity: .75; }
@media (max-width: 560px) { .adm-key { flex-wrap: wrap; row-gap: 6px; } .adm-key .adm-who { order: 3; flex-basis: 100%; } }
.adm-key .acts { align-items: center; }
.adm-key .act.del { color: color-mix(in srgb, #e7a3ae 80%, var(--m3)); }
.adm-key .act.del.sure { color: #f2b8c1; font-weight: 600; }
@media (max-width: 560px) { .adm-key { column-gap: 8px; } .adm-key .acts { gap: 12px; } .adm-key .k { font-size: 15.5px; } } /* key and its buttons on one line, the note below */

/* Global Meet-up: the note under the plaque (location details, warnings, special days, events) */
.meet-note { max-width: 520px; margin: calc(var(--sp) * .5) auto 0; font-size: 15.5px; line-height: 1.55; font-style: italic; color: color-mix(in srgb, var(--m2) 92%, transparent); }
.meet-note[hidden] { display: none; }

/* the members' wishes: a member's own wish carries "Your wish" where the others carry "I can help" */
.wishrow .act.yours { cursor: default; color: var(--m2); opacity: .8; }
.wishes-none { margin-top: 10px; }

/* "I can help" and Messages: the writing fields */
.msg-in { display: block; width: 100%; margin: 0 0 12px; font: inherit; font-size: 16px; line-height: 1.5; color: var(--m2); resize: vertical; min-height: 64px;
  background: color-mix(in srgb, var(--s3) 70%, transparent); border: 1px solid color-mix(in srgb, var(--m3) 34%, transparent); border-radius: 14px; padding: 10px 12px; outline: none;
  -webkit-user-select: text; user-select: text; }
.msg-in:focus { border-color: color-mix(in srgb, var(--m3) 70%, transparent); }
.msg-in::placeholder { color: color-mix(in srgb, var(--m3) 60%, transparent); }
.help-wish { text-align: left; }

/* Messages: one block per conversation, bubbles left (the other member) and right (you) */
.msgw { text-align: left; }
.talk { max-width: 600px; margin: 0 auto 22px; padding: 14px 14px 10px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--m3) 22%, transparent); }
.talk.fresh { border-color: color-mix(in srgb, var(--m3) 60%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--m3) 16%, transparent); }
.talk-w { margin: 0 0 10px; font-size: 15.5px; color: var(--m2); }
.talk-w .tag { font-size: 13px; color: var(--m3); margin-right: 4px; }
.talk-m { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.bub { max-width: 82%; align-self: flex-start; padding: 8px 12px; border-radius: 16px 16px 16px 6px; background: color-mix(in srgb, var(--s1) 85%, transparent); }
.bub.me { align-self: flex-end; border-radius: 16px 16px 6px 16px; background: color-mix(in srgb, var(--m1) 45%, var(--s2)); }
.bub p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--m2); -webkit-user-select: text; user-select: text; }
.bub small { display: block; margin-top: 3px; font-size: 12px; color: var(--m3); opacity: .85; }
.talk-r { display: flex; align-items: flex-end; gap: 10px; }
.talk-r .msg-in { margin: 0; min-height: 44px; }
.talk-r .pill { flex: 0 0 auto; }

/* Messages in the top bar: a gold dot when a member has written */
#msgs { position: relative; }
#msgs.fresh::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--m2); box-shadow: 0 0 8px var(--m3); }

/* Admin: the note field, the starting date, the wishes on the wall */
.adm-f textarea { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; line-height: 1.5; color: var(--m2); resize: vertical;
  background: color-mix(in srgb, var(--s3) 70%, transparent); border: 1px solid color-mix(in srgb, var(--m3) 34%, transparent); border-radius: 12px; padding: 9px 12px; outline: none; }
.adm-f input[type="date"] { color-scheme: dark; }
.adm-wish { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 2px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--m3) 16%, transparent); }
.adm-wish p { margin: 0; font-size: 15.5px; color: var(--m2); }
.adm-wish small { display: block; margin-top: 2px; font-size: 13px; color: var(--m3); }
.adm-wish .act.del { flex: 0 0 auto; color: color-mix(in srgb, #e7a3ae 80%, var(--m3)); }
.adm-wish .act.del.sure { color: #f2b8c1; font-weight: 600; }
.adm-f textarea, .adm-f input { -webkit-user-select: text; user-select: text; }

/* "I can help": bold green, an emerald that sits with the black and gold (the same family as the line under "Current City") */
.wishrow .act[data-do="help"] { font-weight: 700; color: #5fbf8a; opacity: 1; text-shadow: 0 0 12px rgba(63, 160, 105, .28); }
.wishrow .act[data-do="help"]:hover, .wishrow .act[data-do="help"]:focus-visible { color: #7fd6a4; }
.cp .wishrow .act[data-do="help"]:active { color: #9be6bb; }
/* the wish box: as long as the wish needs, growing line by line */
.wishbox { align-items: flex-end; }
.wishbox .lead, .wishbox .pill { align-self: center; }
.wishbox textarea { resize: none; overflow: hidden; line-height: 1.5; max-height: 40vh; overflow-y: auto; scrollbar-width: none; -webkit-user-select: text; user-select: text; }

/* Step B — helpers counted and named */
.namebox { display: flex; align-items: center; gap: 12px; max-width: 560px; margin: calc(var(--sp) * .6) auto 0; text-align: left; padding: 8px 12px 8px 18px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--m3) 26%, transparent); }
.namebox .lead { white-space: nowrap; color: var(--m3); font-size: 15.5px; }
.namebox input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--m2); font: inherit; font-size: 16.5px; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .25s; }
.namebox input::placeholder { color: color-mix(in srgb, var(--m2) 30%, transparent); }
.namebox input.saved { border-bottom-color: #3f9c66; }
.namebox:focus-within { border-color: var(--m2); }
@media (max-width: 560px) { .namebox { flex-wrap: wrap; } .namebox input { flex-basis: 100%; order: 2; } .namebox .pill { order: 3; margin-left: auto; } }
.my-helps { margin: 10px auto 0; font-size: 15.5px; font-weight: 600; color: #5fbf8a; }
.helpers-line { max-width: 620px; margin: 0 auto calc(var(--sp) * .6); font-size: 15.5px; line-height: 1.6; color: var(--m2); }
.helpers-line .lead { color: var(--m3); }
.helpers-line b { color: #5fbf8a; }
.came-true { margin-top: calc(var(--sp) * .8); }
.wishrow.true .act.ok { cursor: default; color: #5fbf8a; font-weight: 700; }
.wishrow.true .by { color: #5fbf8a; font-style: italic; }
.talk-done { margin: 10px 0 2px; font-size: 15px; font-weight: 600; color: #5fbf8a; }
.talk .row { margin-top: 10px; }
.adm-helper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--m3) 16%, transparent); }
.adm-helper p { margin: 0; font-size: 15.5px; color: var(--m2); }
.adm-helper small { display: block; font-size: 13px; color: var(--m3); }
.adm-helper .acts { display: flex; gap: 14px; flex: 0 0 auto; }

/* Maxime, the AI concierge (Emma's twin): the tab on the right edge, his chat sliding in from the same edge */
.maxime-tab { position: fixed; right: 0; bottom: 96px; z-index: 9; display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 9px; cursor: pointer; font: inherit;
  color: var(--m2); background: var(--s2); border: 1px solid color-mix(in srgb, var(--m3) 42%, transparent); border-right: 0; border-radius: 18px 0 0 18px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5); transition: transform .25s, opacity .4s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.maxime-tab[hidden], .maxime-box[hidden] { display: none; }
.maxime-tab svg { width: 36px; height: 36px; flex: none; }
.maxime-tab span { display: flex; flex-direction: column; line-height: 1.15; text-align: start; }
.maxime-tab b { font-size: 14.5px; font-weight: 600; }
.maxime-tab small { font-size: 12.5px; color: var(--m3); }
.maxime-tab.idle { opacity: .4; }
.maxime-tab.idle:hover, .maxime-tab.idle:focus-visible { opacity: 1; }
.maxime-tab:focus-visible { outline: 1px solid color-mix(in srgb, var(--m3) 60%, transparent); outline-offset: 3px; }
.maxime-tab.wave { opacity: 1; }
.maxime-tab.wave svg { transform-origin: 50% 90%; animation: maximeNod 1.2s ease-in-out 4; }
@keyframes maximeNod { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(9deg); } 50% { transform: rotate(-6deg); } 75% { transform: rotate(7deg); } }
.maxime-bub { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  background: var(--s2); color: var(--m2); border: 1px solid color-mix(in srgb, var(--m3) 42%, transparent); border-radius: 14px; padding: 8px 12px; font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); animation: maximeBub .35s ease-out; transition: opacity .4s; }
.maxime-bub.go { opacity: 0; }
@keyframes maximeBub { from { opacity: 0; transform: translate(8px, -50%); } to { opacity: 1; transform: translateY(-50%); } }
@media (max-width: 1139px) { .maxime-tab { transform: translateX(calc(100% - 56px)); } .maxime-tab span { visibility: hidden; } .maxime-tab.out { transform: none; } .maxime-tab.out span { visibility: visible; } }
@media (max-width: 560px) { .maxime-tab { bottom: 84px; } .maxime-bub { white-space: normal; width: 210px; } }
body.reading .maxime-tab, body.framing .maxime-tab { visibility: hidden; }
.maxime-box { position: fixed; right: 0; bottom: calc(6px + env(safe-area-inset-bottom)); z-index: 19; width: min(370px, calc(100vw - 16px)); max-height: min(72vh, 580px);
  display: flex; flex-direction: column; color: var(--m2); background: var(--s2); border: 1px solid color-mix(in srgb, var(--m3) 42%, transparent); border-right: 0;
  border-radius: 18px 0 0 18px; box-shadow: 0 14px 44px rgba(0,0,0,.6); animation: maximeIn .25s ease-out; }
@keyframes maximeIn { from { transform: translateX(100%); } to { transform: none; } }
.maxime-hd { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--m3) 22%, transparent); }
.maxime-hd svg { width: 36px; height: 36px; flex: none; }
.maxime-hd span { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.maxime-hd b { font-size: 15px; font-weight: 600; }
.maxime-hd small { font-size: 12.5px; color: var(--m3); }
.maxime-x { border: 0; background: none; color: var(--m2); font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: 10px; }
.maxime-x:active { scale: .9; }
.maxime-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.maxime-m { max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.maxime-m.e { align-self: flex-start; background: color-mix(in srgb, var(--s1) 90%, transparent); border-radius: 14px 14px 14px 5px; }
.maxime-m.u { align-self: flex-end; background: color-mix(in srgb, var(--m1) 50%, var(--s2)); border-radius: 14px 14px 5px 14px; }
.maxime-ch { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; }
.maxime-ch button { border: 1px solid color-mix(in srgb, var(--m3) 40%, transparent); background: transparent; color: var(--m2); border-radius: 12px; padding: 8px 12px;
  font: inherit; font-size: 14.5px; cursor: pointer; text-align: start; }
.maxime-ch button:active { scale: .97; }
.maxime-in { display: flex; gap: 6px; padding: 10px; border-top: 1px solid color-mix(in srgb, var(--m3) 22%, transparent); }
.maxime-in input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--m3) 34%, transparent); border-radius: 12px; outline: none;
  background: color-mix(in srgb, var(--s3) 70%, transparent); color: var(--m2); font: inherit; font-size: 16px; -webkit-user-select: text; user-select: text; }
.maxime-in input:focus { border-color: color-mix(in srgb, var(--m3) 70%, transparent); }
.maxime-in button { border: 0; border-radius: 12px; padding: 0 14px; cursor: pointer; font: inherit; font-weight: 600; color: #140f08;
  background: linear-gradient(120deg, var(--m1), var(--m2) 45%, var(--m3)); }
.maxime-in button:active { scale: .95; }
/* thinking: three gold dots, never "Typing…" */
.maxime-dots { display: inline-flex; gap: 5px; align-items: center; padding: 12px 14px; }
.maxime-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--m3); animation: maximeDot 1.2s ease-in-out infinite; }
.maxime-dots i:nth-child(2) { animation-delay: .15s; } .maxime-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes maximeDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }