*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #ffffff;--text: #1a1a1a;--text-muted: #666;--accent: #000;--input-bg: transparent;--border: #ddd;--border-focus: #333;--orb-orange: #ff8c42;--orb-purple: #9b59b6;--orb-peach: #ffb4a2;--orb-mauve: #d4a5c9;--orb-amber: #ffbf00;--orb-espresso: #4a3728;--orb-golden-yellow: #ffd700;--orb-dark-olive: #556b2f;--orb-coral: #ff7f50;--orb-warm-gray: #8b7d6b;--orb-marigold: #ffa500;--orb-mocha: #967969}html,body{height:100%;width:100%}body{font-family:Funnel Display,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before,body:after{content:"";position:fixed;border-radius:50%;filter:blur(80px);opacity:.4;pointer-events:none;z-index:0;animation:pulsate 8s ease-in-out infinite}body:before{width:400px;height:400px;background:radial-gradient(circle,var(--orb-orange),rgba(255,140,66,.3));top:-100px;left:-100px;animation-delay:0s}body:after{width:350px;height:350px;background:radial-gradient(circle,var(--orb-purple),rgba(155,89,182,.3));bottom:-80px;right:-80px;animation-delay:-4s}@keyframes pulsate{0%,to{transform:translate(0) scale(1)}50%{transform:translate(20px,-20px) scale(1.3)}}#app{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:48px;position:relative;z-index:1}.pages-container{width:100vw;max-width:100vw;position:fixed;inset:0;min-height:100vh;min-height:100dvh;overflow:hidden;display:flex;justify-content:center;z-index:100;background:var(--bg)}.page-orange-purple{position:relative}.page-orange-purple:before,.page-orange-purple:after{content:"";position:fixed;border-radius:50%;filter:blur(80px);opacity:.4;pointer-events:none;z-index:0;animation:pulsate 8s ease-in-out infinite}.page-orange-purple:before{width:400px;height:400px;background:radial-gradient(circle,var(--orb-orange),rgba(255,140,66,.3));top:-100px;left:-100px;animation-delay:0s}.page-orange-purple:after{width:350px;height:350px;background:radial-gradient(circle,var(--orb-purple),rgba(155,89,182,.3));bottom:-80px;right:-80px;animation-delay:-4s}.page-peach-mauve{position:relative}.page-peach-mauve:before,.page-peach-mauve:after{content:"";position:fixed;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;z-index:0;animation:pulsate 8s ease-in-out infinite}.page-peach-mauve:before{width:400px;height:400px;background:radial-gradient(circle,var(--orb-peach),rgba(255,180,162,.3));top:-100px;left:-100px;animation-delay:0s}.page-peach-mauve:after{width:350px;height:350px;background:radial-gradient(circle,var(--orb-mauve),rgba(212,165,201,.3));bottom:-80px;right:-80px;animation-delay:-4s}.page-amber-espresso{position:relative}.page-amber-espresso:before,.page-amber-espresso:after{content:"";position:fixed;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;z-index:0;animation:pulsate 8s ease-in-out infinite}.page-amber-espresso:before{width:400px;height:400px;background:radial-gradient(circle,var(--orb-amber),rgba(255,191,0,.3));top:-100px;left:-100px;animation-delay:0s}.page-amber-espresso:after{width:350px;height:350px;background:radial-gradient(circle,var(--orb-espresso),rgba(74,55,40,.4));bottom:-80px;right:-80px;animation-delay:-4s}.page-golden-olive{position:relative}.page-golden-olive:before,.page-golden-olive:after{content:"";position:fixed;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;z-index:0;animation:pulsate 8s ease-in-out infinite}.page-golden-olive:before{width:400px;height:400px;background:radial-gradient(circle,var(--orb-golden-yellow),rgba(255,215,0,.3));top:-100px;left:-100px;animation-delay:0s}.page-golden-olive:after{width:350px;height:350px;background:radial-gradient(circle,var(--orb-dark-olive),rgba(85,107,47,.4));bottom:-80px;right:-80px;animation-delay:-4s}.page-coral-gray{position:relative}.page-coral-gray:before,.page-coral-gray:after{content:"";position:fixed;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;z-index:0;animation:pulsate 8s ease-in-out infinite}.page-coral-gray:before{width:400px;height:400px;background:radial-gradient(circle,var(--orb-coral),rgba(255,127,80,.3));top:-100px;left:-100px;animation-delay:0s}.page-coral-gray:after{width:350px;height:350px;background:radial-gradient(circle,var(--orb-warm-gray),rgba(139,125,107,.4));bottom:-80px;right:-80px;animation-delay:-4s}.page-marigold-mocha{position:relative}.page-marigold-mocha:before,.page-marigold-mocha:after{content:"";position:fixed;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;z-index:0;animation:pulsate 8s ease-in-out infinite}.page-marigold-mocha:before{width:400px;height:400px;background:radial-gradient(circle,var(--orb-marigold),rgba(255,165,0,.3));top:-100px;left:-100px;animation-delay:0s}.page-marigold-mocha:after{width:350px;height:350px;background:radial-gradient(circle,var(--orb-mocha),rgba(150,121,105,.4));bottom:-80px;right:-80px;animation-delay:-4s}.page-cinnamon-parchment{position:relative}.page-cinnamon-parchment:before,.page-cinnamon-parchment:after{content:"";position:fixed;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;z-index:0;animation:pulsate 8s ease-in-out infinite}.page-cinnamon-parchment:before{width:400px;height:400px;background:radial-gradient(circle,#d2691e,#d2691e4d);top:-100px;left:-100px;animation-delay:0s}.page-cinnamon-parchment:after{width:350px;height:350px;background:radial-gradient(circle,wheat,#f5deb366);bottom:-80px;right:-80px;animation-delay:-4s}.currently-content{display:flex;flex-direction:column;align-items:center;gap:40px;margin-top:16px;text-align:center}.currently-intro{font-size:1.5rem;font-weight:300;line-height:1.6;color:var(--text);max-width:280px}.currently-outro{font-size:1.1rem;font-weight:300;font-style:italic;line-height:1.6;color:var(--text-muted);max-width:280px}.currently-era-card{background:#ffffffb3;border-radius:20px;padding:32px 28px;width:100%;max-width:300px;box-shadow:0 4px 24px #00000014;display:flex;flex-direction:column;gap:24px}.currently-era-card .era-dates{margin-bottom:0}.currently-era-card .era-dates .stat-value{font-size:1.1rem;font-weight:400;letter-spacing:.02em;color:var(--text-muted);padding:16px 20px}.currently-era-card .scratch-wrapper{height:60px}.currently-era-card .era-stat .scratch-wrapper{height:80px}.currently-era-card .era-stat .stat-value{font-size:2.5rem}.era-stat{display:flex;flex-direction:column;align-items:center;gap:8px}.era-stat-label{font-size:.8rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}.conclusion-container{width:100%;max-width:320px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px 80px;position:relative;z-index:1}.conclusion-title{font-size:2.5rem;font-weight:300;letter-spacing:.05em;text-align:center;margin-bottom:60px;opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease}.conclusion-title.visible{opacity:1;transform:translateY(0)}.conclusion-content{width:100%;display:flex;flex-direction:column;gap:40px;align-items:center}.conclusion-text{font-size:1.125rem;font-weight:400;line-height:1.7;text-align:center;color:var(--text);opacity:0;transform:translateY(30px);transition:opacity 1.5s ease,transform 1.5s ease;max-width:300px}.conclusion-text.visible{opacity:1;transform:translateY(0)}.conclusion-signature{font-size:1.1rem;font-weight:300;font-style:italic;color:var(--text-muted);margin-top:20px;opacity:0;transform:translateY(20px);transition:opacity 1.2s ease,transform 1.2s ease}.conclusion-signature.visible{opacity:1;transform:translateY(0)}.conclusion-container .page-number{position:absolute;bottom:40px}.emoji-list{display:flex;flex-direction:column;gap:12px;margin-top:30px;margin-bottom:20px}.emoji-item{display:flex;align-items:center;gap:20px;padding:20px;background:#fff9;border-radius:16px;position:relative;overflow:hidden}.emoji-item.first{transform:scale(1.15);background:#fffc;box-shadow:0 4px 20px #0000001a}.emoji-rank{font-size:1.2rem;font-weight:600;color:var(--text-muted);min-width:30px}.emoji-item.first .emoji-rank{font-size:1.4rem}.emoji-display{font-size:3rem;line-height:1}.emoji-item.first .emoji-display{font-size:4rem}.emoji-count{margin-left:auto;font-size:1.2rem;font-weight:500;color:var(--text);position:relative;z-index:2}.emoji-count .stat-value{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.emoji-count .stat-value.scratch-ready{opacity:1;visibility:visible}.emoji-item.first .emoji-count{font-size:1.4rem;font-weight:600}.emoji-rank,.emoji-display{position:relative;z-index:2;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.emoji-item.scratch-ready .emoji-rank,.emoji-item.scratch-ready .emoji-display,.emoji-item.scratch-ready .emoji-count .stat-value{opacity:1;visibility:visible}.emoji-scratch-wrapper{position:absolute;inset:0;border-radius:12px;overflow:hidden;z-index:10;pointer-events:none}.emoji-scratch-wrapper canvas{pointer-events:auto}.emoji-scratch-canvas{width:100%;height:100%;display:block}.emoji-ellipses{text-align:center;font-size:1.5rem;color:var(--text-muted);padding:8px 0;font-weight:300}.page-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transform:translate(100%);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1);pointer-events:none;display:flex;justify-content:center;overflow-y:auto}.page-slide.page-active{position:relative;pointer-events:auto}.page-slide.page-visible{opacity:1;transform:translate(0)}.page-slide.slide-in-left{transform:translate(-100%);animation:slideInLeft .4s cubic-bezier(.4,0,.2,1) forwards}.page-slide.slide-in-right{transform:translate(100%);animation:slideInRight .4s cubic-bezier(.4,0,.2,1) forwards}.page-slide.slide-out-left{animation:slideOutLeft .4s cubic-bezier(.4,0,.2,1) forwards}.page-slide.slide-out-right{animation:slideOutRight .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutLeft{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.intro-container{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:60px 24px 80px;position:relative;z-index:1}.intro-hello{font-size:3rem;font-weight:300;letter-spacing:.05em;text-align:center;margin-bottom:80px;opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease}.intro-hello.visible{opacity:1;transform:translateY(0)}.intro-content{width:100%;display:flex;flex-direction:column;gap:40px;align-items:center}.intro-text{font-size:1.125rem;font-weight:400;line-height:1.6;text-align:center;color:var(--text);opacity:0;transform:translateY(30px);transition:opacity 1.5s ease,transform 1.5s ease;width:100%}.intro-text.visible{opacity:1;transform:translateY(0)}.intro-continue-btn{background:transparent;border:1px solid var(--border);border-radius:50px;color:var(--text);font-family:Funnel Display,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;padding:14px 40px;cursor:pointer;margin-top:20px;opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease,all .3s ease}.intro-continue-btn.visible{opacity:1;transform:translateY(0)}.intro-continue-btn:hover{background:var(--text);color:var(--bg);border-color:var(--text)}.intro-continue-btn:active{transform:translateY(0) scale(.98)}.password-container{width:100%;display:flex;flex-direction:column;gap:32px;text-align:center}.title{font-size:1.5rem;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.input-wrapper{position:relative;width:100%}.password-input{width:100%;background:var(--input-bg);border:none;border-bottom:1px solid var(--border);padding:16px 40px 16px 0;font-family:Funnel Display,sans-serif;font-size:1.25rem;font-weight:400;color:var(--text);text-align:center;letter-spacing:.3em;outline:none;transition:border-color .3s ease}.password-input::placeholder{color:var(--text-muted);letter-spacing:.2em}.password-input:focus{border-bottom-color:var(--border-focus)}.toggle-visibility{position:absolute;right:0;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#888;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;transition:color .3s ease;width:36px;height:36px;z-index:10}.toggle-visibility:hover{color:var(--text)}.toggle-visibility:active{transform:translateY(-50%) scale(.95)}.toggle-visibility svg{width:20px;height:20px;stroke-width:1.5;display:block;stroke:currentColor;fill:none}.submit-btn{background:transparent;border:1px solid var(--border);border-radius:50px;color:var(--text);font-family:Funnel Display,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;padding:14px 40px;cursor:pointer;transition:all .3s ease;margin-top:8px}.submit-btn:hover{background:var(--text);color:var(--bg);border-color:var(--text)}.submit-btn:focus{outline:none;border-color:var(--border-focus)}.submit-btn:active{transform:scale(.98)}.error-message{font-size:.75rem;color:#e74c3c;letter-spacing:.05em;min-height:20px;opacity:0;transition:opacity .3s ease}.error-message.visible{opacity:1}.stats-container{width:100%;max-width:320px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:32px 24px 40px;position:relative;z-index:1}.wrapped-header{width:100%;text-align:center;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--border)}.timeframe-text{font-size:.875rem;font-weight:300;letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase}.stats-title{font-size:2rem;font-weight:300;letter-spacing:.1em;text-transform:uppercase;text-align:center;margin-bottom:60px;color:var(--text)}.stats-grid{width:100%;display:flex;flex-direction:column;gap:24px;max-width:400px}.stat-card{width:100%;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;margin:0!important;padding:0!important}.stat-card:first-child,.stat-card:nth-child(2),.stat-card:last-child{margin:0!important}.stat-label{font-size:.875rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);text-align:center;min-height:22px;line-height:1.4}.scratch-wrapper{position:relative;display:flex;align-items:center;justify-content:center;height:100px;width:100%;overflow:hidden}.stat-value{font-size:2.5rem;font-weight:400;color:var(--text);text-align:center;position:relative;z-index:1;padding:20px 24px;transform:translateY(0);transition:transform .6s cubic-bezier(.34,1.56,.64,1);opacity:0;visibility:hidden}.stat-value.scratch-ready{opacity:1;visibility:visible}.stat-value.spring-complete{animation:springUp .8s cubic-bezier(.34,1.5,.68,1)}.stat-suffix{font-size:1.5rem;font-weight:400;color:var(--text-muted)}@keyframes springUp{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1.02)}70%{transform:translateY(-2px) scale(1)}to{transform:translateY(0) scale(1)}}.scratch-canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important;cursor:grab;touch-action:none;border-radius:8px;z-index:2}.scratch-canvas:active{cursor:grabbing}.page-number{font-size:.9rem;font-weight:500;color:var(--text-muted);padding:8px 16px;background:#ffffffe6;border-radius:20px;letter-spacing:.05em;margin-top:auto;margin-bottom:20px}.swipe-indicator{display:flex;align-items:center;gap:16px;padding:12px 24px;background:#ffffffe6;border:1px solid var(--border);border-radius:50px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);z-index:100;animation:blinkIndicator 2s ease-in-out infinite}.swipe-arrow-left,.swipe-arrow-right{font-size:1rem;color:var(--text)}.swipe-text{font-weight:300}@keyframes blinkIndicator{0%,to{opacity:.6}50%{opacity:1}}@media(max-width:380px){.title{font-size:1.25rem}.password-input{font-size:1.125rem}.intro-hello{font-size:2.5rem;margin-bottom:60px}.intro-text{font-size:1rem}.intro-content{gap:32px}.wrapped-header{margin-bottom:32px;padding-bottom:20px}.timeframe-text{font-size:.75rem}.stats-title{font-size:1.75rem;margin-bottom:40px}.stat-value{font-size:2rem}.stats-grid{gap:20px}.scratch-wrapper{height:90px}}@supports (-webkit-touch-callout: none){.password-input{font-size:16px}}