.life-canvas{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.life-canvas.is-visible{opacity:1}
.page{transition:opacity 1.2s ease}
body.is-emerging .page{transition:none;opacity:var(--life-page-opacity,1);pointer-events:none}
body.is-emerging .quiet-links,body.is-emerging .language-switch{z-index:6}
body.is-emerging #constructionPicker{z-index:7}
#constructionPicker.life-tree{width:min(540px,calc(100vw - 30px));transition:opacity .6s ease}
.life-tree #constructionNumbers{display:block;width:100%;height:116px;max-width:none;overflow:visible}
.life-tree #constructionNumbers button{position:absolute;margin:0;transition:opacity .5s ease}
.life-tree #constructionNumbers button span{transition:background 2s ease,color 1s ease,border-color 2s ease}
.life-tree #constructionNumbers button[data-leaf="true"] span{background:var(--life-leaf-color,#fff);border-color:var(--life-leaf-border,#000)}
.life-tree #constructionContinuation,.life-tree #constructionLinks{display:none}
#lifeTreeLinks{position:absolute;inset:0;width:100%;height:116px;overflow:visible;pointer-events:none}
#lifeControls{position:fixed;top:22px;left:24px;z-index:8;display:flex;gap:5px;align-items:center;opacity:0;transition:opacity .8s ease}
#lifeControls.is-visible{opacity:1}
#lifeControls button,#lifeCreditsButton{border:1px solid #d7d9d1;border-radius:20px;background:rgba(255,255,255,.93);color:#384031;font:12px/1.2 Arial,sans-serif;padding:7px 11px;cursor:pointer}
#lifeControls button:hover,#lifeCreditsButton:hover{border-color:#717e65}
#lifeControls button:focus-visible,#lifeCreditsButton:focus-visible{outline:2px solid #405d30;outline-offset:3px}
#lifeControls > button:first-child{min-width:77px}
#lifeCreditsButton{position:fixed;bottom:17px;right:22px;z-index:8;opacity:0;visibility:hidden;transition:opacity 1.5s ease;pointer-events:none;font-size:10px;padding:4px 9px}
#lifeCreditsButton.is-visible{opacity:1;visibility:visible;pointer-events:auto}
#lifeCredits{max-width:min(520px,calc(100vw - 40px));max-height:calc(100svh - 50px);overflow:auto;border:1px solid #cdd3c5;padding:28px;color:#273220;background:#fffffc;font:14px/1.6 Arial,sans-serif}
#lifeCredits::backdrop{background:rgba(27,35,21,.16)}
#lifeCredits h2{font:400 21px/1.3 Georgia,serif;margin:0 0 16px}
#lifeCredits a{color:#365b2a}
#lifeCredits button{border:1px solid #adb8a5;border-radius:18px;padding:6px 16px;background:#fff;color:#273220;cursor:pointer}
#lifeMotionPrompt{position:fixed;left:50%;top:52%;transform:translate(-50%,-50%);z-index:9;max-width:calc(100vw - 44px);width:330px;padding:20px;border:1px solid #cfd7c7;background:rgba(255,255,255,.97);color:#33452a;font:14px/1.6 Arial,sans-serif;text-align:center;border-radius:4px}
#lifeMotionPrompt button{border:1px solid #728867;border-radius:20px;background:white;color:inherit;padding:7px 15px;cursor:pointer}
@media(max-width:520px){#lifeControls{left:12px;top:58px;gap:3px}#lifeControls button{font-size:10px;padding:6px 8px}#lifeControls > button:first-child{min-width:65px}#lifeCreditsButton{right:12px;bottom:12px}.life-tree #constructionNumbers{height:110px}}
@media(max-width:520px){body.is-emerging .quiet-links{max-width:calc(100vw - 165px);flex-wrap:wrap;gap:0 9px;font-size:9px;line-height:1.2}}
@media(prefers-reduced-motion:reduce){#lifeCanvas,#lifeControls{transition-duration:.3s}.life-tree #constructionNumbers button span{transition:none}}

.tagline,.contact-button{transition:opacity 1.2s ease}
body.is-emerging .tagline,body.is-emerging .contact-button{opacity:0}

.life-restore-pending .page{opacity:0;pointer-events:none}
#lifeSaveStatus{font:10px/1.2 Arial,sans-serif;color:#816044;background:rgba(255,255,255,.9)}
#lifeReset{max-width:min(330px,calc(100vw - 36px));border:1px solid #cdd3c5;border-radius:7px;background:#fffffc;color:#26341e;padding:18px;font:13px/1.5 Arial,sans-serif}
#lifeReset::backdrop{background:rgba(27,35,21,.12)}
#lifeReset p{margin:0 0 15px}
#lifeReset button{border:1px solid #a8b39f;border-radius:18px;padding:6px 12px;background:white;color:inherit;cursor:pointer;margin-right:5px}

.life-tree #constructionNumbers button span { width:3px; height:3px; border:0; background:rgba(0,0,0,.3); }
.life-tree #constructionNumbers button[data-padovan-number="true"] span { background:#17432d; }

#journeyReset{max-width:min(330px,calc(100vw - 36px));border:1px solid #cdd3c5;border-radius:7px;background:#fffffc;color:#26341e;padding:18px;font:13px/1.5 Arial,sans-serif}
#journeyReset::backdrop{background:rgba(27,35,21,.12)}
#journeyReset p{margin:0 0 15px}
#journeyReset button{border:1px solid #a8b39f;border-radius:18px;padding:6px 12px;background:white;color:inherit;cursor:pointer;margin-right:5px}

#lifeControls{flex-wrap:wrap;max-width:calc(100vw - 48px)}
.life-pace{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
#lifeControls .life-pace button{min-width:27px;padding:5px 7px;touch-action:none}
.life-pace output{display:block;width:4ch;overflow:hidden;text-overflow:ellipsis;text-align:center;font:12px/1.2 Arial,sans-serif;font-variant-numeric:tabular-nums;color:#384031;background:rgba(255,255,255,.93)}
.life-pace[data-limited="true"] output{color:#8b6633}
@media(max-width:520px){#lifeControls{max-width:calc(100vw - 24px)}#lifeControls .life-pace button{min-width:25px;padding:5px 6px}.life-pace output{font-size:10px}}

#lifeControls .life-pace [data-pace-reset]{margin-left:3px;min-width:36px;font-size:11px;letter-spacing:0}