@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap";:root{color:#292526;font-synthesis:none;text-rendering:optimizelegibility;--paper:#fbfaf8;--white:#fff;--ink:#292526;--muted:#7d7473;--soft:#a69c99;--line:#e5dfdc;--line-dark:#d8cfcb;--rose:#9b6674;--rose-light:#eee2e5;--rose-pale:#f5edef;--dark:#393234;background:#f7f4f1;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:#f7f4f1;min-width:320px;margin:0}button{font:inherit}button:focus-visible{outline:2px solid var(--rose);outline-offset:3px}.app-shell{min-height:100vh;position:relative;overflow:hidden}.nav-wrap{z-index:20;border-bottom:1px solid var(--line);background:#f7f4f1f5;padding:17px 24px;position:sticky;top:0}.nav{align-items:center;gap:32px;max-width:1180px;margin:auto;display:flex}.brand{letter-spacing:.12em;color:var(--ink);cursor:pointer;background:0 0;border:0;align-items:center;gap:9px;font-weight:700;display:flex}.brand-mark{color:var(--rose);font-size:25px;line-height:1}.nav-links{flex:1;gap:3px;display:flex}.nav-links button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:9px 12px;font-size:14px;transition:background .2s,color .2s}.nav-links button:hover{color:var(--ink);background:#ece7e4}.nav-links button.active{color:var(--ink);background:#e9e2df}.nav-status,.online{letter-spacing:.09em;color:var(--muted);align-items:center;gap:7px;font-size:11px;display:flex}.status-dot{background:#718d76;border-radius:50%;width:7px;height:7px}.page{max-width:1180px;margin:0 auto;padding:76px 24px 150px;animation:.45s both page-in;position:relative}.hero-grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:90px;min-height:500px;display:grid}.hero-copy{animation:.55s 40ms both content-in}.eyebrow{color:var(--rose);letter-spacing:.13em;text-transform:uppercase;align-items:center;gap:7px;font-size:11px;font-weight:700;display:inline-flex}.hero-copy h1{letter-spacing:-.055em;margin:20px 0 18px;font-family:Playfair Display,serif;font-size:clamp(72px,10vw,128px);font-weight:500;line-height:.9}.heart-accent{color:var(--rose);margin-left:7px}.hero-subtitle{margin:0;font-size:20px;font-weight:600}.hero-description{max-width:450px;color:var(--muted);margin:14px 0 28px;line-height:1.7}.primary-button{border:1px solid var(--dark);background:var(--dark);color:#fff;cursor:pointer;border-radius:10px;align-items:center;gap:10px;padding:13px 18px;transition:transform .22s,box-shadow .22s,background .22s;display:inline-flex;box-shadow:0 8px 20px #2d232614}.primary-button:hover{background:#30292b;transform:translateY(-2px);box-shadow:0 12px 26px #2d232621}.profile-card{background:var(--paper);border:1px solid var(--line);text-align:center;border-radius:22px;padding:25px;animation:.65s cubic-bezier(.22,1,.36,1) .12s both profile-in;box-shadow:0 18px 45px #3c2b2d0f}.profile-top,.level-row,.profile-foot{justify-content:space-between;align-items:center;display:flex}.tiny-label,.level-row,.profile-foot{letter-spacing:.11em;color:var(--soft);font-size:10px}.avatar{border:1px solid var(--line);background:#eee8e4;border-radius:50%;width:122px;height:122px;margin:35px auto 19px;overflow:hidden}.avatar img{object-fit:cover;object-position:center 28%;width:100%;height:100%;display:block}.profile-name{font-family:Playfair Display,serif;font-size:30px}.profile-role{color:var(--muted);margin-top:4px;font-size:13px}.level-row{margin-top:34px}.level-track,.small-progress,.stat-track,.modal-card-progress{background:#e8e2df;border-radius:999px;height:6px;overflow:hidden}.level-track{margin-top:10px}.level-track span,.small-progress span,.stat-track span,.final-track span,.modal-card-progress span{border-radius:inherit;background:var(--rose);height:100%;transition:width .5s;display:block}.profile-foot{justify-content:flex-end;margin-top:10px}.section-intro{justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px;display:flex}.section-intro h2{letter-spacing:-.035em;margin:9px 0 6px;font-family:Playfair Display,serif;font-size:52px;font-weight:500}.section-intro p{color:var(--muted);margin:0}.compact-intro{align-items:center;margin-top:55px}.duration-card{border:1px solid var(--line);background:var(--paper);border-radius:14px;align-items:center;gap:14px;padding:18px 22px;display:flex}.duration-card>div{text-align:center;min-width:48px}.duration-card strong{letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:25px;display:block}.duration-card span{color:var(--soft);letter-spacing:.08em;text-transform:uppercase;margin-top:3px;font-size:9px;display:block}.duration-card b{color:#bdb4b1}.mini-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;display:grid}.mini-card{background:var(--paper);border:1px solid var(--line);color:var(--muted);border-radius:13px;align-items:center;gap:12px;padding:17px 18px;transition:transform .22s,border-color .22s;display:flex}.mini-card:hover{border-color:var(--line-dark);transform:translateY(-2px)}.mini-card svg{color:var(--rose);width:19px}.mini-card strong{color:var(--ink)}.home-note{color:var(--soft);flex-wrap:wrap;justify-content:center;gap:9px 13px;margin-top:35px;font-size:11px;display:flex}.home-note strong{color:#5b4d50}.note-muted{opacity:.7}.achievement-grid{perspective:1400px;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;display:grid}.achievement-card-wrap{width:100%;height:170px;min-height:170px;color:var(--ink);cursor:pointer;text-align:left;perspective:1400px;z-index:1;background:0 0;border:0;border-radius:16px;margin:0;padding:0;animation:.45s both card-in;display:block;position:relative;overflow:visible}.achievement-card-wrap:nth-child(2){animation-delay:40ms}.achievement-card-wrap:nth-child(3){animation-delay:80ms}.achievement-card-wrap:nth-child(4){animation-delay:.12s}.achievement-card-wrap:nth-child(5){animation-delay:.16s}.achievement-card-wrap:nth-child(6){animation-delay:.2s}.achievement-card-wrap:nth-child(7){animation-delay:.24s}.achievement-card-wrap:nth-child(8){animation-delay:.28s}.achievement-card-wrap:nth-child(9){animation-delay:.32s}.achievement-card-wrap:nth-child(10){animation-delay:.36s}.achievement-card-wrap:nth-child(11){animation-delay:.4s}.achievement-card-wrap.is-flipped{z-index:3}.achievement-card-inner{width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform;transition:transform .62s cubic-bezier(.2,.75,.25,1);display:block;position:relative}.achievement-card-wrap.is-flipped .achievement-card-inner{transform:rotateY(180deg)}.achievement-face{backface-visibility:hidden;border:1px solid var(--line);background:var(--paper);border-radius:16px;width:100%;height:100%;min-height:170px;position:absolute;inset:0;overflow:hidden}.achievement-front{align-items:center;gap:17px;padding:20px;display:flex}.achievement-back{flex-direction:column;justify-content:center;padding:18px 20px;display:flex;transform:rotateY(180deg)}.achievement-card-wrap:hover .achievement-face{border-color:#d3c5c1;box-shadow:0 12px 30px #3c2b2d0f}.achievement-card-wrap.is-locked .achievement-face{color:#706968;background:#f2efed}.achievement-icon{background:var(--rose-pale);border:1px solid #eadbdd;border-radius:13px;flex:none;place-items:center;width:56px;height:56px;font-size:28px;display:grid}.is-locked .achievement-icon{background:#e9e5e2;border-color:#dfd9d6}.achievement-content{flex-direction:column;flex:1;min-width:0;display:flex}.achievement-status{color:var(--rose);letter-spacing:.1em;align-items:center;gap:5px;font-size:9px;font-weight:700;display:flex}.is-locked .achievement-status{color:var(--soft)}.achievement-content>strong{margin:7px 0 3px;font-size:17px}.achievement-content>span:not(.achievement-status):not(.small-progress){color:var(--soft);font-size:12px}.small-progress{height:4px;margin-top:13px;display:block}.card-arrow{color:#aaa09d;flex:none;transition:transform .2s}.achievement-card-wrap:hover .card-arrow{transform:translate(3px)}.back-top{justify-content:space-between;align-items:center;gap:15px;display:flex}.flip-hint{color:var(--soft);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;font-size:9px}.back-icon{margin:11px 0 7px;font-size:29px;line-height:1}.achievement-back>strong{font-size:18px}.back-date{color:var(--soft);margin-top:3px;font-size:11px}.back-description{color:var(--muted);max-width:92%;margin-top:9px;font-size:12px;line-height:1.5}.achievement-back .small-progress{margin-top:12px}.collection-count{text-align:right}.collection-count strong{font-size:32px;display:block}.collection-count span{color:var(--soft);font-size:11px}.stats-layout{grid-template-columns:1.4fr .6fr;gap:35px;display:grid}.stats-main{flex-direction:column;gap:24px;display:flex}.stat-heading{justify-content:space-between;margin-bottom:9px;display:flex}.stat-heading span{font-weight:600}.stat-heading strong{font-family:Playfair Display,serif;font-size:20px}.stat-row small{color:var(--soft);margin-top:8px;font-size:11px;display:block}.stat-side{background:var(--dark);color:#fff;border-radius:22px;flex-direction:column;align-items:flex-start;min-height:400px;padding:30px;display:flex}.stat-side .eyebrow{color:#d7b6bf}.side-icon{background:#ffffff14;border-radius:12px;place-items:center;width:48px;height:48px;margin-bottom:50px;display:grid}.side-icon svg{color:#e1c2ca}.stat-side>strong{margin-top:9px;font-family:Playfair Display,serif;font-size:65px;font-weight:500;line-height:1}.stat-side>p{color:#c7bfc0;font-size:13px;line-height:1.5}.side-divider{background:#ffffff1f;width:100%;height:1px;margin:28px 0}.status-copy{gap:8px;display:flex;color:#fff!important;align-items:center!important}.future-page .section-intro{margin-bottom:45px}.roadmap{max-width:900px;margin:0 auto;padding:5px 0 10px;position:relative}.roadmap-line{background:var(--line-dark);width:1px;position:absolute;top:18px;bottom:18px;left:20px}.roadmap-item{grid-template-columns:42px 1fr;gap:22px;margin-bottom:22px;animation:.45s both card-in;display:grid;position:relative}.roadmap-item:nth-child(3){animation-delay:60ms}.roadmap-item:nth-child(4){animation-delay:.12s}.roadmap-item:nth-child(5){animation-delay:.18s}.roadmap-item:nth-child(6){animation-delay:.24s}.roadmap-marker{z-index:2;border:1px solid var(--line-dark);background:var(--paper);width:42px;height:42px;color:var(--muted);border-radius:50%;place-items:center;font-size:12px;font-weight:700;display:grid;position:relative}.roadmap-next .roadmap-marker{border-color:var(--rose);color:var(--rose)}.roadmap-card{border:1px solid var(--line);background:var(--paper);border-radius:16px;align-items:flex-start;gap:20px;padding:22px 24px;transition:transform .22s,border-color .22s,box-shadow .22s;display:flex;box-shadow:0 8px 24px #3c2b2d09}.roadmap-card:hover{border-color:var(--line-dark);transform:translateY(-2px);box-shadow:0 12px 28px #3c2b2d0f}.roadmap-icon{background:var(--rose-pale);width:46px;height:46px;color:var(--rose);border-radius:12px;flex:none;place-items:center;display:grid}.roadmap-icon svg{width:20px}.roadmap-content{flex:1;min-width:0}.roadmap-top{letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:20px;font-size:10px;display:flex}.roadmap-top span{color:var(--rose);font-weight:700}.roadmap-top strong{color:var(--soft);font-weight:600}.roadmap-card h3{margin:8px 0 6px;font-size:19px}.roadmap-card p{color:var(--muted);margin:0;font-size:13px;line-height:1.65}.future-footer{border-top:1px solid var(--line);max-width:900px;color:var(--soft);text-align:center;margin:28px auto 0;padding-top:24px;font-size:12px;font-style:italic}.final-progress{z-index:30;border:1px solid var(--line);text-align:left;cursor:pointer;width:280px;color:var(--ink);background:#fffffff5;border-radius:14px;grid-template-columns:34px 1fr auto;gap:0 10px;padding:13px 14px 11px;transition:transform .2s,box-shadow .2s,border-color .2s;display:grid;position:fixed;bottom:22px;right:24px;box-shadow:0 12px 35px #3226281a}.final-progress:hover{transform:translateY(-2px);box-shadow:0 15px 40px #32262821}.final-icon{background:var(--rose-pale);width:34px;height:34px;color:var(--rose);border-radius:9px;grid-row:span 2;place-items:center;display:grid}.final-text{flex-direction:column;gap:3px;display:flex}.final-text>span{letter-spacing:.11em;color:var(--rose);font-size:9px;font-weight:700}.final-text strong{font-size:12px}.final-percent{color:var(--soft);align-self:center;font-size:11px}.final-track{background:#e8e2df;border-radius:999px;grid-column:2/4;height:4px;margin-top:9px;overflow:hidden}.final-progress.unlocked{border-color:#d8c0c7}.modal-backdrop{z-index:50;background:#261f216b;place-items:center;padding:20px;animation:.22s both fade-in;display:grid;position:fixed;inset:0}.modal{background:var(--paper);border:1px solid var(--line);border-radius:22px;width:min(520px,100%);padding:42px;animation:.35s cubic-bezier(.22,1,.36,1) both modal-in;position:relative;box-shadow:0 30px 80px #1e181a33}.modal-close{width:38px;height:38px;color:var(--muted);cursor:pointer;background:#eee9e6;border:0;border-radius:50%;place-items:center;display:grid;position:absolute;top:14px;right:14px}.modal-symbol{color:var(--rose);margin-bottom:16px;font-size:46px}.modal h2{margin:8px 0;font-family:Playfair Display,serif;font-size:40px;font-weight:500}.modal-body{color:var(--muted);font-size:14px;line-height:1.75}.final-signoff{color:var(--rose);margin-top:28px;font-family:Playfair Display,serif;font-size:17px}@keyframes page-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes content-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes profile-in{0%{opacity:0;transform:translateY(24px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes card-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translateY(15px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=800px){.nav{gap:10px}.nav-links{overflow-x:auto}.nav-links button{white-space:nowrap;padding:8px 9px}.nav-status{display:none}.hero-grid,.stats-layout{grid-template-columns:1fr;gap:35px}.hero-grid{min-height:auto}.hero-copy h1{font-size:clamp(68px,18vw,105px)}.section-intro{flex-direction:column;align-items:flex-start}.section-intro h2{font-size:44px}.duration-card{justify-content:center;align-self:stretch}.achievement-grid{grid-template-columns:1fr}.stat-side{min-height:320px}.roadmap{margin-left:0}}@media (width<=520px){.nav-wrap{padding:12px 14px}.brand{font-size:13px}.page{padding:48px 15px 130px}.mini-grid{grid-template-columns:1fr}.duration-card{gap:7px;padding:14px 8px}.duration-card>div{min-width:42px}.duration-card strong{font-size:21px}.achievement-card-wrap,.achievement-card-inner,.achievement-face{height:190px;min-height:190px}.achievement-front{gap:12px;padding:16px}.achievement-back{padding:16px}.achievement-icon{width:50px;height:50px;font-size:25px}.roadmap-item{grid-template-columns:32px 1fr;gap:13px}.roadmap-line{left:15px}.roadmap-marker{width:32px;height:32px;font-size:10px}.roadmap-card{gap:13px;padding:17px}.roadmap-icon{width:40px;height:40px}.roadmap-top{flex-direction:column;align-items:flex-start;gap:4px}.final-progress{width:auto;bottom:14px;left:15px;right:15px}.modal{padding:36px 24px 28px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.achievement-grid:before{content:"these animations piss me off. Fixing it for so long and it still doesnt work properly. I am not even gonna try anymore. I also didnt really have good images so I used emojis.";color:#766c69;text-align:center;background:#eee9e6;border:1px solid #dfd3cf;border-radius:10px;grid-column:1/-1;padding:12px 16px;font-size:11px;font-style:italic;line-height:1.5;animation:.45s both banner-in;display:block}@keyframes banner-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media (width<=520px){.achievement-grid:before{text-align:left;padding:11px 13px}}.home-page{padding-bottom:90px}.welcome-page{place-items:center;min-height:100dvh;padding:32px 20px;display:grid;position:relative;overflow:hidden}.welcome-glow{pointer-events:none;background:radial-gradient(circle,#ff78aa1f 0%,#ff78aa00 70%);border-radius:50%;width:520px;height:520px;position:absolute}.welcome-card{text-align:center;z-index:1;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffff06;border:1px solid #ffffff14;border-radius:28px;width:min(100%,500px);padding:48px 46px 34px;position:relative;box-shadow:0 30px 90px #00000040}.welcome-heart{margin-bottom:22px;font-size:46px;line-height:1}.welcome-card h1{letter-spacing:-.055em;margin:10px 0 14px;font-size:clamp(56px,12vw,84px);line-height:.95}.welcome-card h1 span{opacity:.45}.welcome-text{opacity:.72;max-width:340px;margin:0 auto 34px;line-height:1.7}.welcome-form{text-align:left}.welcome-form label{letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin:0 0 9px;font-size:12px;font-weight:700;display:block}.password-wrap{background:#00000029;border:1px solid #ffffff1c;border-radius:14px;align-items:center;gap:10px;min-height:52px;padding:0 16px;transition:border-color .16s,box-shadow .16s;display:flex}.password-wrap:focus-within{border-color:#ffffff47;box-shadow:0 0 0 4px #ffffff09}.password-wrap input{width:100%;min-width:0;color:inherit;font:inherit;background:0 0;border:0;outline:0}.password-wrap input::placeholder{opacity:.35}.password-wrap svg{opacity:.42;flex:none}.password-error{opacity:.72;margin:9px 2px 0;font-size:12px}.welcome-button{justify-content:center;width:100%;margin-top:16px}.welcome-button:disabled{cursor:default;opacity:.42;transform:none}.welcome-footer{letter-spacing:.06em;opacity:.35;margin-top:30px;font-size:11px}@media (width<=560px){.welcome-page{padding:20px 14px}.welcome-card{border-radius:22px;padding:38px 24px 28px}}
