@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-synthesis:none;color:#edf3e8;background:#0a201f;--bg:#102d2b;--muted:#9db9ad;--accent:#d7eea3;--line:#abc8b324;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{color:inherit;border:0;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}button:disabled{opacity:.4;cursor:not-allowed}button:active:not(:disabled){transform:translateY(2px)}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}a{color:inherit;text-decoration:none}i{display:inline-flex;font-style:normal}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}.preview-caption{margin:24px auto 14px;text-align:center;color:#78968a;font-size:11px;letter-spacing:.3px}.miniapp{width:100%;max-width:460px;min-height:100dvh;margin:auto;background:radial-gradient(ellipse at 100% 30%,#2c594030,transparent 70%),var(--bg);box-shadow:0 0 0 1px #abc8b314;isolation:isolate}.app-header{height:78px;padding:18px 23px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:800;letter-spacing:-1px}main{padding:0 18px 106px;min-height:calc(100dvh - 78px)}.stage-detail{background:#193b34;border:1px solid #96b59528;border-radius:25px;padding:18px 16px 13px;box-shadow:0 5px 0 #092522}.diagram-top{display:flex;justify-content:space-between;align-items:center;gap:7px}.stage-identity{display:flex;align-items:center;gap:10px}.stage-emblem{width:44px;height:44px;border-radius:15px;background:#294c3d;border:1px solid #89a66b33;color:var(--accent);display:grid;place-items:center;box-shadow:0 3px 0 #102d25}.stage-identity p{font-size:8px;font-weight:700;letter-spacing:1.5px;color:#a7bfa1;margin-bottom:3px}.stage-identity h1{font-size:23px;line-height:1.2;font-weight:800;letter-spacing:-.7px}.state-chip{font-size:9px;color:#b4c5ac;padding:6px 8px;border-radius:7px;background:#9fb79712;white-space:nowrap}.state-chip.joined{background:#d7eea31c;color:var(--accent)}.diagram-wrap{margin:10px -7px 3px}.diagram-svg{width:100%;height:auto;display:block;max-height:330px}.game-piece.is-filled{animation:piece-in .4s ease-out}.donor-progress{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:#a4bda9;margin:0 2px 16px}.donor-progress>div{display:flex;align-items:center;gap:4px}.donor-dot{height:7px;width:20px;background:#315447;border-radius:3px}.donor-dot.paid{background:var(--accent);box-shadow:0 1px 6px #d7eea320}.donor-progress strong{color:var(--accent);font-size:10px;margin-left:5px;font-variant-numeric:tabular-nums}.primary{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:49px;padding:13px 17px;background:var(--accent);color:#2c4630;border:1px solid #ecfac7;border-radius:14px;box-shadow:0 4px 0 #88a766;font-size:12px;font-weight:800}.primary:hover{background:#e3f5b9}.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #88a766}.primary>span:last-child{font-size:19px;line-height:1}.full{width:100%}.board-note{text-align:center;color:#829e8c;font-size:9px;margin-top:14px}.bottom-nav{position:fixed;z-index:20;bottom:0;width:100%;max-width:460px;display:grid;grid-template-columns:repeat(3,1fr);background:#102d2bf5;backdrop-filter:blur(16px);border-top:1px solid #71998124;padding:10px 17px max(12px,env(safe-area-inset-bottom));min-height:78px}.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;color:#799b8c;font-size:10px;font-weight:700;min-height:52px;border-radius:14px}.bottom-nav button.active{background:#d7eea310;color:var(--accent)}.bottom-nav button:hover{background:#d7eea30a}.bottom-nav .icon{width:22px;height:22px}.bottom-nav button.active .icon{stroke-width:2.2}.screen-heading{padding:18px 3px 28px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#a6c38f}.screen-heading h1{font-size:32px;line-height:1.17;letter-spacing:-1.2px;margin-top:12px;font-weight:800}.screen-heading p{font-size:12px;line-height:1.8;color:var(--muted);margin-top:13px;max-width:32ch}.journey-progress{margin:0 0 26px;padding:17px;background:#1e4037;border-radius:16px}.journey-progress>div:first-child{display:flex;justify-content:space-between;font-size:11px;color:#a8c093}.journey-progress strong{font-weight:700}.progress-track{height:8px;background:#0f2b25;border-radius:8px;overflow:hidden;margin-top:13px}.progress-track span{display:block;height:100%;background:var(--accent);border-radius:8px;transition:width .3s}.journey-stage{position:relative;width:calc(100% - 16px);display:flex;align-items:center;gap:12px;text-align:left;background:#1c3c34;border:1px solid #86a58524;border-radius:19px;padding:15px 13px;margin:0 0 15px 0;box-shadow:0 4px 0 #0b2623}.journey-stage:nth-child(even){margin-left:16px}.journey-stage:hover{background:#274b3e}.journey-stage.is-current{border-color:#bcd89477;background:#294c3a}.journey-icon{width:49px;height:49px;display:grid;place-items:center;flex-shrink:0;background:#30503e;color:var(--accent);border-radius:16px;border-bottom:3px solid #17362a}.journey-copy{display:flex;flex-direction:column;gap:5px;flex:1}.journey-copy>small{font-size:7px;letter-spacing:.6px;color:#94b28f}.journey-copy>strong{font-size:18px;letter-spacing:-.5px;font-weight:800}.journey-copy>span{font-size:10px;color:#9eb9a3}.journey-amount{font-size:16px;text-align:right;font-weight:700;display:flex;flex-direction:column;gap:3px;white-space:nowrap;font-variant-numeric:tabular-nums}.journey-amount>small{font-size:8px;color:#92ad98}.journey-amount>span{font-size:17px;color:var(--accent)}.rule-step{display:flex;gap:14px;margin-bottom:26px}.rule-step>span{height:32px;width:32px;display:grid;place-items:center;flex-shrink:0;background:#d7eea3;color:#2a4732;box-shadow:0 3px 0 #819e65;border-radius:11px;font-size:13px;font-weight:800}.rule-step strong{display:block;font-size:14px;margin-bottom:7px;font-weight:800}.rule-step p{font-size:12px;line-height:1.8;color:var(--muted)}.callout{margin:18px 0;padding:15px 16px;border-left:3px solid #9eb97d;background:#9ab0800b;border-radius:0 12px 12px 0;font-size:11px;line-height:1.8;color:#afc4a5}.about-demo{font-size:10px;line-height:1.8;color:#90ac9a;margin:22px 0}.secondary{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #8ba37e55;background:#a3bd7d0c;padding:14px 16px;min-height:46px;border-radius:13px;color:#d3dfbf;font-size:12px;font-weight:700}.text-button{background:none;color:var(--accent);font-size:11px;padding:7px 0}.icon-button{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#afc89e15;color:#becdb1;font-size:24px}dialog{margin:auto auto 0;width:100%;max-width:460px;max-height:90dvh;padding:12px 23px max(28px,env(safe-area-inset-bottom));background:#193b34;color:#edf3e8;border:1px solid #a7c59e33;border-bottom:0;border-radius:26px 26px 0 0;box-shadow:0 -20px 80px #061a1944;overflow:auto}dialog::backdrop{background:#061c1bd0;backdrop-filter:blur(6px)}.sheet-handle{height:4px;width:35px;background:#58745d;border-radius:4px;margin:0 auto 16px}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}dialog h2{font-size:26px;line-height:1.2;letter-spacing:-.8px;font-weight:800;margin-bottom:16px}dialog p{font-size:12px;line-height:1.8;color:#afc2a7;margin:10px 0}dialog .modal-amount{font-size:42px;font-weight:800;letter-spacing:-1.8px;margin:24px 0;font-variant-numeric:tabular-nums}dialog .modal-amount small{font-size:12px;letter-spacing:0;color:#afc2a7}dialog label{display:block;font-size:11px;color:#afc2a7;margin:20px 0 9px}dialog input{width:100%;background:#102d27;border:1px solid #a5bd7c55;border-radius:12px;padding:15px;font-size:18px;color:#f0f4e4}dialog .primary{width:100%;margin-top:16px}dialog .secondary{margin-top:13px}.financial-row{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#abc1a3;margin:15px 0}.financial-row strong{color:#dbe8c5;font-size:12px;white-space:nowrap}.financial-row.highlight{border-top:1px solid var(--line);padding-top:15px}.modal-alert{font-size:10px!important;color:#a3b994!important}.formula-table{width:100%;border-collapse:collapse;font-size:9px;margin:20px 0}.formula-table th,.formula-table td{text-align:left;padding:8px 3px;border-bottom:1px solid var(--line)}#toast{position:fixed;bottom:calc(96px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);width:max-content;max-width:min(90vw,410px);background:#dcebc8;color:#2b4835;padding:13px 17px;border-radius:13px;box-shadow:0 5px 25px #061c1b66;font-size:12px;font-weight:700;line-height:1.6;z-index:40;opacity:0;pointer-events:none;transition:transform .25s,opacity .25s}#toast.visible{transform:translate(-50%,0);opacity:1}.in-telegram .preview-caption{display:none}.in-telegram .miniapp{max-width:100%;min-height:var(--tg-height,100dvh)}.in-telegram .bottom-nav{max-width:100%}.in-telegram .app-header{padding-top:max(18px,var(--tg-content-safe-area-inset-top,0px));height:auto;min-height:78px}@keyframes piece-in{from{opacity:.4}to{opacity:1}}@media(max-width:370px){.app-header{padding:14px 18px;height:68px}main{padding-inline:13px}.stage-detail{padding-inline:12px}.state-chip{font-size:8px;padding:5px}.donor-dot{width:15px}.diagram-svg{max-height:285px}.screen-heading h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep the board action visible above navigation on compact screens. */
.diagram-svg{max-height:clamp(185px,calc(100dvh - 530px),310px)}
@media(min-width:481px){.diagram-svg{max-height:clamp(185px,calc(100dvh - 580px),310px)}}
@media(max-width:480px){.preview-caption{display:none}.app-header{height:68px}.stage-detail{padding-top:15px}.diagram-wrap{margin-top:7px}}
.api-busy button{pointer-events:none}.api-busy #modal .primary{opacity:.55}.api-busy #modal .primary:after{content:'…'}
.diagram-svg{max-height:clamp(220px,calc(100dvh - 470px),290px)}
@media(min-width:481px){.diagram-svg{max-height:clamp(220px,calc(100dvh - 520px),290px)}}


/* Logo and balance share one compact header row. */
.app-header{height:auto;min-height:94px;padding:20px 18px;gap:14px}
.brand{flex-shrink:0;font-size:22px}
.header-balance{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.header-balance-copy{min-width:0;text-align:right}
.header-balance-label{display:block;color:var(--muted);font-size:9px;font-weight:600;margin-bottom:3px}
.header-balance-value{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.header-balance-value b{font-size:21px;line-height:1.15;letter-spacing:-.7px;color:var(--accent);overflow-wrap:anywhere;white-space:normal}
.header-balance-value>span{font-size:8px;color:#b9ccaa;font-weight:700}
.header-balance-actions{display:flex;gap:5px;flex-shrink:0}
.header-balance-action{display:grid;place-items:center;width:30px;height:34px;border-radius:10px;background:#294c3d;color:var(--accent);font-size:21px;font-weight:700;box-shadow:0 2px 0 #0a2421}
.header-balance-action:hover{background:#375e49}
.header-balance-action .icon{width:15px;height:15px}
@media(max-width:370px){.app-header{padding:18px 13px;gap:8px}.brand{font-size:19px;gap:6px}.header-balance{gap:6px}.header-balance-value b{font-size:18px}.header-balance-actions{gap:4px}.header-balance-action{width:27px}}

/* Approved mint scenery stays behind the independently interactive circle. */
:root{color:#17545b;background:#e5f5f1;--bg:#edfaf7;--muted:#62888b;--accent:#087f87;--line:#137e8626;color-scheme:light}
.miniapp{position:relative;background:#edfaf7;box-shadow:0 0 0 1px #cce8e3}
.miniapp::before{content:'';position:absolute;z-index:-1;inset:94px 0 0;background:linear-gradient(to bottom,transparent 350px,#edfaf7 650px),url('/design-layers/assets/background.png') center top/100% auto no-repeat;pointer-events:none}
.app-header{background:#edfaf7dc;backdrop-filter:blur(12px)}

.header-balance-value b{color:#12676b}.header-balance-value>span{color:#5c8989}
.header-balance-action{color:#087b83;background:#d4f2eb;box-shadow:0 2px 0 #abdcd3}
.header-balance-action:hover{background:#bcebe0}
main{padding:0 18px 106px}.stage-detail{margin:0 -18px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.circle-scene{position:relative;width:100%;aspect-ratio:1122/1120;container-type:inline-size;isolation:isolate}
.circle-title{position:absolute;top:3%;left:0;right:0;text-align:center;color:#14606c;font-size:7cqw;font-weight:800;letter-spacing:-.04em;text-shadow:0 2px 10px #fff}
.circle-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.circle-node{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);padding:0;background:none;border:0;border-radius:50%;isolation:isolate;transition:filter .18s}
.circle-node:active:not(:disabled){transform:translate(-50%,-50%) scale(.95)}
.circle-node:hover{filter:brightness(1.06)}.circle-node:focus-visible{outline:3px solid #009a98;outline-offset:1px}
.circle-node:disabled{opacity:1}
.circle-disk{position:absolute;inset:13.5%;border-radius:50%;background:linear-gradient(135deg,#f4ffff,#bcece9);display:grid;place-items:center;overflow:hidden}
.circle-avatar{width:100%;height:100%;object-fit:cover}
.circle-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.circle-plus{position:absolute;inset:34%;width:32%;height:32%;fill:none;stroke:#049eab;stroke-width:4;stroke-linecap:round;pointer-events:none}
.circle-initials{font-size:6cqw;font-weight:800;color:#168c92}
.circle-username{position:absolute;top:99%;left:-25%;width:150%;font-size:3.3cqw;line-height:1.2;font-weight:800;color:#176c78;text-shadow:0 1px 3px #fff,0 0 8px #fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.circle-node[data-slot=recipient] .circle-username{font-size:3.7cqw}
.circle-node.is-self::before{content:'';position:absolute;inset:3%;border-radius:50%;z-index:-1;background:#52ef8b44;box-shadow:0 0 18px 7px #37df7355,0 0 42px 14px #5af39b35}
.circle-node.is-self .circle-ring{filter:hue-rotate(-52deg) saturate(1.3) drop-shadow(0 0 8px #21d967aa)}
.circle-node.is-self .circle-disk{background:linear-gradient(135deg,#edfff2,#b3f6c7)}
.circle-node.is-self .circle-username,.circle-node.is-self .circle-initials{color:#12683b}
.circle-action{padding:22px 22px 10px}
.primary{background:#078f96;border-color:#099da1;color:#fff;box-shadow:0 4px 0 #066b76;font-size:13px}
.primary:hover{background:#0b9fa3}.primary:active:not(:disabled){box-shadow:0 1px 0 #066b76}
.bottom-nav{background:#f2fcf9ed;border-color:#b9e2da}.bottom-nav button{color:#6a9595}.bottom-nav button.active{color:#077f85;background:#ccefe6}.bottom-nav button:hover{background:#def4ee}
.screen-heading,.journey-progress,.journey-stage,.rule-step,.callout{position:relative}
.eyebrow{color:#21858a}.screen-heading p,.rule-step p{color:#557e80}
.journey-progress{background:#ffffffda}.journey-progress>div:first-child{color:#447f7e}.progress-track{background:#d6eee7}.progress-track span{background:#12b8a0}
.journey-stage{background:#f8fffded;border-color:#beded6;box-shadow:0 4px 0 #bfded5}.journey-stage:hover,.journey-stage.is-current{background:#e0f7ed;border-color:#5fc4a8}.journey-icon{background:#cbede0;color:#168a78;border-color:#a2d4c3}.journey-copy>small,.journey-copy>span,.journey-amount>small{color:#5b8784}
.rule-step>span{background:#bceada;color:#176853;box-shadow:0 3px 0 #8bceba}.callout{background:#f7fffcde;color:#477771;border-color:#48b69c}.secondary{color:#147d7d;border-color:#a3d9ce;background:#edfaf6}.icon-button{background:#e0f2ed;color:#367f7c}
dialog{background:#f4fcf9;color:#17545b;border-color:#b5dbd0;box-shadow:0 -20px 80px #154e4b33}dialog::backdrop{background:#174e5266}.sheet-handle{background:#adcec6}dialog p,dialog label,dialog .modal-amount small{color:#60867f}dialog input{background:#fff;color:#17545b;border-color:#b3d6ca}.financial-row{color:#5c857d}.financial-row strong{color:#185c57}.modal-alert{color:#60867f!important}#toast{background:#126e6c;color:#fff;box-shadow:0 5px 25px #154e4b33}
@media(max-width:370px){.stage-detail{margin-inline:-13px}.circle-action{padding-inline:18px}}

/* Edge-to-edge scenery with a compact, readable interactive layer. */
.miniapp{max-width:none;box-shadow:none}
.miniapp::before{background:url('/design-layers/assets/background.png') center top/cover no-repeat}
main{width:100%;max-width:540px;margin-inline:auto;padding-bottom:118px}
.app-header{min-height:94px}
.bottom-nav{left:0;max-width:none;background:#b9f2e5;border-top:1px solid #65d6c4;box-shadow:0 -5px 24px #139d9b20;padding-top:10px}
.bottom-nav button{color:#236f76;font-size:12px;font-weight:800;min-height:58px}
.bottom-nav button.active{color:#fff;background:#059da3;box-shadow:0 3px 0 #067b84}
.bottom-nav button:hover{background:#90e4d4}
.bottom-nav button.active:hover{background:#08acaf}
.bottom-nav .icon{width:25px;height:25px}
.circle-action{padding:24px 16px 16px}
#stage-action{min-height:66px;padding:18px 20px;font-size:17px;line-height:1.35;border-radius:18px;background:#00a7aa;border-color:#13c8c2;box-shadow:0 5px 0 #057b85}
#stage-action:hover{background:#04b6b6}
#stage-action>span:last-child{font-size:28px}
#stage-action:active:not(:disabled){box-shadow:0 2px 0 #057b85}
@media(max-width:370px){#stage-action{font-size:15px;min-height:62px}.circle-action{padding-inline:12px}}

/* Keep every dialog inside the viewport, including on short mobile screens. */
html:has(dialog[open]){overflow:hidden}
dialog{position:fixed;inset:0;margin:auto;width:calc(100% - 24px);max-width:460px;height:fit-content;max-height:calc(100dvh - 32px);max-height:calc(min(100dvh,var(--tg-height,100dvh)) - 32px);border:1px solid #b5dbd0;border-radius:24px;padding:16px 23px max(24px,env(safe-area-inset-bottom));overscroll-behavior:contain;overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere}

.journey-amount .gift-label{font-size:9px;line-height:1.3;max-width:94px;white-space:normal;color:#247b72}
.journey-amount>strong{font-size:19px;line-height:1.2}
/* First visit introduction. */

.welcome-modal .welcome-intro{font-size:15px;line-height:1.75}
.welcome-reward{margin:24px 0;padding:18px 19px;border-radius:18px;background:#159b9710;border:1px solid #159b9720}
.welcome-modal .welcome-reward p{margin:0;font-size:12px}
.welcome-amount{margin-top:10px;font-size:clamp(36px,10vw,47px);font-weight:800;letter-spacing:-1.7px;line-height:1.2;font-variant-numeric:tabular-nums;color:#16858c;white-space:nowrap}
.welcome-amount small{font-size:14px;letter-spacing:0}
.welcome-modal .welcome-gift{font-size:13px;line-height:1.7;margin:0 0 17px}
.welcome-modal h2{font-size:28px}
@media(max-height:700px){.welcome-modal .welcome-intro{font-size:13px}.welcome-reward{margin:16px 0;padding:14px 16px}}
#referral-link{font-size:13px;letter-spacing:0;padding:14px 12px;background:#fff;user-select:all;cursor:text}
.welcome-modal #welcome-start{padding:14px 18px;gap:12px}
.welcome-modal .welcome-cta-label{flex:1;font-size:12px;line-height:1.5;text-align:left}

/* Solid, high-contrast surfaces keep the path readable over the scenery. */
#stages .screen-heading{margin:0 -3px 18px;padding:22px 18px;background:#e2fbf3;border-radius:20px;border:1px solid #8edccd}
#stages .screen-heading h1{color:#104e57}
#stages .screen-heading p{color:#285f65;font-size:13px;font-weight:500}
#stages .eyebrow{color:#087b76}
.journey-progress{background:#087c81;border:1px solid #056b74;box-shadow:0 4px 0 #075e69;padding:19px}
.journey-progress>div:first-child{color:#fff;font-size:13px}
.progress-track{background:#065d67}.progress-track span{background:#63f2bb}

.journey-stage{background:#f1fff9;border:2px solid #36baa8;box-shadow:0 5px 0 #5ebaaa;padding:17px 13px;margin-bottom:19px}
.journey-stage:hover{background:#d5f9eb;border-color:#08a58d}
.journey-stage.is-current{background:#c8f6df;border-color:#069679;box-shadow:0 5px 0 #07836e}
.journey-icon{background:#0ba88e;color:#fff;border-bottom-color:#077d72}
.journey-copy>small{font-size:9px;line-height:1.5;letter-spacing:0;color:#285e60}
.journey-copy>strong{color:#104e57;font-size:20px}
.journey-copy>span{font-size:12px;color:#28685f;font-weight:600}
.journey-amount{color:#08555d;gap:5px}
.journey-amount>strong{font-size:21px;font-weight:800}
.journey-amount .gift-label{font-size:10px;color:#176459;font-weight:800}
.journey-amount>small{color:#28685f;font-size:10px}
.journey-amount>span{color:#008977;font-size:22px}
@media(max-width:370px){.journey-stage{gap:9px;padding-inline:10px}.journey-icon{width:42px;height:46px}.journey-copy>strong{font-size:18px}.journey-copy>small{font-size:8px}.journey-amount>strong{font-size:19px}}
.circle-waiting{margin:12px 18px;background:#e1f9ef;border-radius:12px}

/* Compact path heading with an entry action for users outside the queue. */
#stages .screen-heading{margin:0 -3px 14px;padding:15px 16px;border-radius:17px}
#stages .screen-heading h1{font-size:clamp(20px,5.5vw,25px);line-height:1.25;letter-spacing:-.7px;margin:0}
#journey-join{margin-top:13px;min-height:44px;padding:11px 15px;font-size:12px}

/* Give the project explanation the same readable surfaces as the stage map. */
#about .screen-heading{margin:0 0 20px;padding:22px 20px;background:#e2fbf3;border:1px solid #8edccd;border-radius:20px}
#about .screen-heading h1{color:#104e57;font-size:30px;line-height:1.2}
#about .screen-heading p{color:#285f65;font-size:14px;line-height:1.75;font-weight:500;max-width:none}
#about .eyebrow{color:#087b76}
#about .rule-step{background:#f1fff9;border:2px solid #36baa8;border-radius:20px;padding:20px 16px;margin-bottom:18px;gap:13px;box-shadow:0 4px 0 #5ebaaa}
#about .rule-step>span{background:#079a85;color:#fff;box-shadow:0 3px 0 #077464;width:36px;height:36px;font-size:16px}
#about .rule-step>div{min-width:0}
#about .rule-step strong{color:#104e57;font-size:17px;line-height:1.5;margin-bottom:8px}
#about .rule-step p{color:#285f65;font-size:14px;line-height:1.8;font-weight:500}
#about .callout{background:#c5f6e4;color:#174f49;border:1px solid #56cfae;border-left:4px solid #079a85;border-radius:14px;padding:18px;font-size:14px;line-height:1.8;font-weight:500}
#about #start-button{min-height:60px;font-size:16px;margin-top:6px}
@media(max-width:370px){#about .screen-heading h1{font-size:27px}#about .rule-step{padding:17px 12px;gap:10px}#about .rule-step strong{font-size:16px}}

.currency-unit{display:inline-flex;align-items:center;gap:.28em;white-space:nowrap;vertical-align:baseline;font:inherit;color:inherit;letter-spacing:inherit}
.currency-icon{display:inline-block;width:1.15em;height:1.15em;min-width:12px;min-height:12px;vertical-align:-.16em;flex-shrink:0}
.header-balance-value .currency-icon{width:14px;height:14px}
.journey-amount .currency-icon{width:15px;height:15px}
.modal-amount .currency-icon,.welcome-amount .currency-icon{width:20px;height:20px}
.primary>.currency-unit:last-child{font-size:inherit;line-height:inherit}

/* Currency remains part of the text flow, including inside flex buttons. */
.currency-amount,.currency-unit{display:inline-block;white-space:nowrap;font:inherit;color:inherit;letter-spacing:inherit;vertical-align:baseline}
.currency-unit .currency-icon{display:inline-block;width:1em;height:1em;min-width:0;min-height:0;margin:0 .22em 0 0;vertical-align:-.12em}
.primary>.button-label,.primary>.button-label:last-child,.secondary>.button-label{font-size:inherit;line-height:inherit;text-align:inherit}
.primary>.button-label{min-width:0}
.header-balance-value .currency-unit .currency-icon{width:12px;height:12px;vertical-align:-2px}
.journey-amount .currency-unit .currency-icon{width:12px;height:12px;vertical-align:-2px}
.modal-amount .currency-unit .currency-icon,.welcome-amount .currency-unit .currency-icon{width:1.05em;height:1.05em;vertical-align:-.14em}
#about .rule-step>div{flex:1}
.about-referral{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:14px 0 0}
.about-referral label{grid-column:1/-1;font-size:11px;color:#337b75;font-weight:700}
.about-referral input{min-width:0;width:100%;border:1px solid #9bd8c9;border-radius:10px;background:#fff;color:#1c686a;padding:10px;font:inherit;font-size:11px;user-select:all}
.about-referral .secondary{max-width:120px;justify-content:center;min-height:40px;padding:9px 11px;font-size:11px;line-height:1.4;background:#d7f5e9}
#about .about-referral+p{margin-top:14px}

/* Round names carry the dream theme; there are no participant ranks. */
.circle-title{font-size:clamp(18px,5.8cqw,29px);line-height:1.15;padding-inline:16px;top:2.5%;text-wrap:balance}
.journey-copy>strong{font-size:18px;line-height:1.3;overflow-wrap:normal;text-wrap:balance}

/* Align the balance label, amount and withdrawal control as one header block. */
.header-balance{align-items:center;gap:12px}
.header-balance-copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.header-balance-label{margin:0;font-size:11px;line-height:14px;font-weight:600;color:#517a7d}
.header-balance-value{justify-content:flex-start;align-items:center;gap:6px;min-height:28px;white-space:nowrap}
.header-balance-value b{font-size:24px;line-height:28px;letter-spacing:-.5px;white-space:nowrap}
.header-balance-value>span{font-size:10px;line-height:16px;color:#467c80;font-weight:700}
.header-balance-value .currency-unit{display:inline-flex;align-items:center;gap:3px;line-height:16px;vertical-align:middle}
.header-balance-value .currency-unit .currency-icon{width:15px;height:15px;margin:0;vertical-align:middle}
.header-balance-action{width:36px;height:44px;border-radius:12px;box-shadow:0 2px 0 #abdcd3}
.header-balance-action .icon{width:18px;height:18px}
@media(max-width:370px){.header-balance{gap:9px}.header-balance-value b{font-size:22px}.header-balance-action{width:33px}}

/* Approved flat mark: three people around a heart. */
.brand{gap:9px}
.brand-logo{display:block;width:46px;height:46px;object-fit:contain;flex-shrink:0;mix-blend-mode:multiply}
.brand-wordmark{font-size:22px;font-weight:800;letter-spacing:-.9px;color:#087f8a}
@media(max-width:370px){.brand{gap:6px}.brand-logo{width:40px;height:40px}.brand-wordmark{font-size:19px}}
.withdrawal-requests{margin-top:26px;border-top:1px solid #addbd0;padding-top:20px}.withdrawal-requests h3{font-size:16px;color:#17545b;margin-bottom:15px}.withdrawal-request{padding:16px 0;border-bottom:1px solid #b6dcd2}.withdrawal-request>div{display:flex;justify-content:space-between;gap:12px;font-size:12px}.withdrawal-request .withdrawal-status{font-size:11px;font-weight:700;margin:8px 0}.withdrawal-request small{display:block;font-size:10px;color:#60867f;margin:7px 0}.withdrawal-request code{display:block;font-family:ui-monospace,monospace;font-size:10px;overflow-wrap:anywhere;color:#386d68}.withdrawal-request p{font-size:11px}.withdrawal-request .status-rejected{color:#a03e3e}.withdrawal-request .status-paid{color:#247952}.withdrawal-request .status-pending{color:#176b9b}

.circle-node.is-closed .circle-ring{filter:saturate(.35);opacity:.55}
.circle-node.is-closed .circle-disk{background:#e2eee9}
.circle-node.is-closed .circle-closed-mark{stroke:#3d8670}
.circle-gift-mark{position:absolute;right:7%;bottom:9%;width:24%;aspect-ratio:1;display:grid;place-items:center;border:2px solid white;border-radius:50%;background:#0aaf78;box-shadow:0 2px 5px #087b6244;pointer-events:none}
.circle-gift-mark svg{width:80%;height:80%;fill:none;stroke:white;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.circle-restructured{margin:10px 18px 0;background:#c5f6df;color:#125a47;border:1px solid #64c89d;border-radius:12px;font-size:12px;font-weight:600;padding:12px 14px;line-height:1.6}

/* Round cards show information without navigating to another queue. */
article.journey-stage{cursor:default}
article.journey-stage:hover{background:#f1fff9;border-color:#36baa8}
article.journey-stage.is-current:hover{background:#c8f6df;border-color:#069679}

/* Device insets and Telegram controls occupy separate areas. */
.in-telegram{--app-top-inset:calc(var(--app-safe-top,var(--tg-safe-area-inset-top,env(safe-area-inset-top,0px))) + var(--app-content-safe-top,var(--tg-content-safe-area-inset-top,0px)));--app-bottom-inset:calc(var(--app-safe-bottom,var(--tg-safe-area-inset-bottom,env(safe-area-inset-bottom,0px))) + var(--app-content-safe-bottom,var(--tg-content-safe-area-inset-bottom,0px)))}
.in-telegram .app-header{height:auto;min-height:94px;padding-top:calc(20px + var(--app-top-inset));padding-left:calc(18px + var(--app-safe-left,0px) + var(--app-content-safe-left,0px));padding-right:calc(18px + var(--app-safe-right,0px) + var(--app-content-safe-right,0px))}
.in-telegram .bottom-nav{padding-bottom:calc(12px + var(--app-bottom-inset))}
.in-telegram main{padding-bottom:calc(106px + var(--app-bottom-inset))}
.in-telegram dialog{top:var(--app-top-inset);bottom:var(--app-bottom-inset);max-height:calc(min(100dvh,var(--tg-height,100dvh)) - var(--app-top-inset) - var(--app-bottom-inset) - 24px)}