@import"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";:root{--bg: #fafafa;--surface: #fff;--surface-alt: #f3f4f6;--border: #e5e7eb;--text: #1a1a1a;--text-secondary: #6b7280;--green: rgba(147, 245, 138, .75);--green-solid: #34d399;--green-hover: rgba(120, 230, 110, .85);--red: rgba(231, 105, 98, .75);--red-solid: #f87171;--yellow: rgba(255, 233, 128, .75);--yellow-solid: #facc15;--blue: #60a5fa;--purple: #a78bfa;--orange: #fb923c;--overlay: rgba(0, 0, 0, .25);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .04);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .04);--radius: 12px;--radius-sm: 8px;--radius-xs: 6px}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,sans-serif;color:var(--text);-webkit-tap-highlight-color:transparent}body{background-color:var(--bg)}.heading{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.02em}.text-lg{font-size:clamp(1rem,1.4vw,1.25rem);font-weight:600;letter-spacing:-.01em}.text-med{font-size:clamp(.875rem,1.15vw,1.1rem);font-weight:500}.text-sm{font-size:clamp(.8rem,.9vw,1rem);font-weight:400;line-height:1.6;color:var(--text-secondary)}.flex-center{display:flex;align-items:center;justify-content:center}.flex-column{flex-direction:column;gap:.35rem;width:100%}.bold{font-weight:600;color:var(--text)}.gray{color:var(--text-secondary)}.max-cols{grid-column:-1 / 1;text-align:center}.m1{margin-bottom:1rem}.m2{margin-top:1rem}.m3{margin-bottom:.5rem}.m4{margin-top:.5rem}.m5{margin-left:.25rem}.green{background-color:var(--green)}.light-green{background-color:#00ff0026}.red{background-color:var(--red)}.light-red{background-color:#ff00001f}.yellow{background-color:var(--yellow)}.btn{border:none;background-color:var(--surface-alt);text-align:center;color:var(--text);text-decoration:none;outline:none;border-radius:var(--radius-sm);cursor:pointer}.effect{padding:.5rem 0}.border-bottom{border-bottom:1px solid var(--border)}.border-left{border-left:1px solid var(--border)}.main-container{flex-direction:column;min-height:100vh;padding-bottom:2rem}.navbar{display:flex;align-items:center;justify-content:space-between;width:clamp(280px,88%,420px);margin:0 auto;padding:.5rem 0}.navbar.main{position:fixed;top:0;left:50%;transform:translate(-50%);z-index:100;background:#fafafad9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:.5rem .85rem;border-radius:0 0 var(--radius-sm) var(--radius-sm)}.navbar .nav-container{display:flex;gap:clamp(.3rem,1.2vw,.55rem);list-style:none}.navbar .nav-container .btn{width:clamp(28px,2.5vw,32px);height:clamp(28px,2.5vw,32px);padding:.15rem;border-radius:var(--radius-sm);transition:background-color .25s ease,box-shadow .25s ease,transform .2s ease}.navbar .nav-container .contact-btn{padding:.1rem}.navbar .nav-container .btn .linkedin-icon{width:100%;height:100%;border-radius:calc(var(--radius-sm) - .1rem)}.navbar .nav-container .btn.active{background-color:var(--green)}.grid-container{display:grid;grid-template-columns:repeat(8,1fr);width:clamp(240px,80vw,360px);margin-top:max(2vw,1.25rem);gap:3px}.grid-item{position:relative;aspect-ratio:1;background-color:var(--surface);border-radius:var(--radius-xs);box-shadow:var(--shadow-sm);transition:background-color .45s cubic-bezier(.4,0,.2,1)}.grid-item.green{background-color:var(--green)}.grid-item.red{background-color:var(--red)}.grid-item.yellow{background-color:var(--yellow)}.grid-item img{width:90%;height:auto;object-fit:contain;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}.grid-item .icon{position:absolute;top:-3%;right:-3%;z-index:10}.keyboard-container{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;width:clamp(240px,80vw,360px);margin-top:max(1.5vw,1rem);-webkit-user-select:none;user-select:none}.keyboard-container .froot-key{background:var(--surface);border-radius:var(--radius-xs);box-shadow:var(--shadow-sm);touch-action:manipulation;transition:background-color .2s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .2s cubic-bezier(.4,0,.2,1);will-change:transform}.keyboard-container .froot-key.green{background-color:var(--green);box-shadow:none}.keyboard-container .froot-key.yellow{background-color:var(--yellow);box-shadow:none}.keyboard-container .froot-key.absent{background-color:var(--red);box-shadow:none;opacity:.6}.keyboard-container .froot-key.used{background-color:var(--surface-alt);box-shadow:none}.keyboard-container .froot-key.clickable{cursor:pointer}.keyboard-container .froot-key img{width:100%;height:auto;object-fit:contain;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}.progress-bar{width:min(85%,180px);height:8px;background-color:var(--surface-alt);border-radius:999px;overflow:hidden}.progress-container{display:flex;justify-content:center;width:min(100%,180px)}.daily-container{flex-direction:column;width:100%;padding:.75rem .5rem 0}.daily-container .days{display:grid;grid-template-columns:repeat(7,1fr);width:clamp(240px,65%,360px);gap:.2rem}.stats-container .stats-main{display:flex;flex-direction:column;min-height:75vh;padding-bottom:2rem}.stats-container .stats-main .distribution{flex-direction:column;padding-bottom:1.5rem}.stats-container .distribution .effect{width:100%;text-align:center}.stats-container .stats-main .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.4rem;width:clamp(280px,78vw,500px);padding-bottom:1rem}.stats-container .stats-main .stats-grid:first-child{margin-top:max(2.5vw,1.5rem)}.stats-container .stats-main .stats-grid:nth-child(2){grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.stats-container .stats-main .stats-item{flex-direction:column;width:100%;padding:.6rem .4rem;background-color:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}.stats-container .stats-grid.extra-padding .stats-item{padding:.7rem .4rem}.stats-text{gap:.25rem}.section-label{grid-column:-1 / 1;text-align:center;padding:.4rem 0;margin-bottom:.25rem;border-bottom:1px solid var(--border)}.inventory-container{flex-direction:column;min-height:75vh;padding-bottom:2.5rem}.inventory-container .inventory-layout{margin-top:max(2.5vw,1.5rem)}.inventory-container .inventory-note{width:clamp(280px,78vw,500px);margin-top:.5rem;text-align:left}.inventory-container .inventory-layout .collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:.35rem;width:clamp(260px,66vw,400px);margin:.5rem auto 0}.inventory-container .inventory-layout .collection-item{padding:.35rem;background:var(--surface);border-radius:var(--radius-xs);box-shadow:var(--shadow-sm)}.inventory-container .inventory-layout .collection-froot{width:clamp(20px,75%,34px)}.inventory-container .inventory-layout .stand-grid{display:grid;gap:.4rem;width:clamp(280px,78vw,500px);margin-top:.6rem}.inventory-container .inventory-layout .stand-wrapper{flex-direction:column;gap:.4rem;padding:.75rem;background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}.inventory-container .inventory-layout .stand-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;width:100%}.inventory-container .inventory-layout .stand-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.15rem}.inventory-container .inventory-layout .item-img{cursor:pointer;width:clamp(40px,36%,70px);transition:transform .2s cubic-bezier(.34,1.56,.64,1);will-change:transform}.inventory-container .inventory-layout .recipe-froots{border-radius:var(--radius-xs);padding:.15rem .25rem}.inventory-container .inventory-layout .recipe-froots img{width:clamp(28px,16%,36px)}.information-container{min-height:75vh}.information-container .information-layout{flex-direction:column;gap:.6rem;width:clamp(280px,78vw,500px);margin-top:max(2vw,1.25rem);padding-bottom:1.25rem}.information-container .information-layout .effect{width:100%;padding:.5rem;text-align:center;border-bottom:1px solid var(--border)}.information-container .information-layout .text-sm{width:100%;text-align:left}.information-container .information-layout .policy-text{font-size:clamp(.8rem,.9vw,.9rem)}.information-container .information-layout .example-image{display:flex;width:clamp(220px,100%,340px);margin:.4rem 0;gap:3px}.information-container .information-layout .example-image .grid-item{border-radius:var(--radius-xs)}.information-container .information-layout .effect.small{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-template-rows:1fr 1fr;gap:.6rem;width:clamp(280px,78vw,500px);border-bottom:none;padding:0}.information-container .information-layout .contact-btn{width:fit-content;margin:.25rem 0 .75rem;padding:.5rem 1rem;background-color:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow);transition:box-shadow .25s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.34,1.56,.64,1);will-change:transform}.information-container .information-layout .linkedin-icon{width:clamp(18px,20%,28px)}.information-container .information-layout .example-container{display:flex;align-items:center}.information-container .information-layout .example-froots{display:flex;flex-shrink:2.5;align-items:center}.information-container .information-layout .example-container .grid-item{width:clamp(26px,8vw,38px);margin:0 .15rem;border-radius:var(--radius-xs);box-shadow:var(--shadow-sm)}.modal-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--overlay);z-index:1002}.modal-container.no-shadow{background-color:transparent}.modal-container .modal{flex-direction:column;gap:.5rem;width:max(30vw,290px);padding:1.25rem 1rem;background-color:var(--surface);border-radius:var(--radius);z-index:1003;box-shadow:var(--shadow-lg)}.modal-container .no-gap{gap:0}.modal-container .modal.mini-modal{width:fit-content;padding:.75rem 2rem;border-radius:var(--radius-sm)}.modal-container .modal.mini-modal .mini-level-up{display:flex;width:fit-content;margin-top:.25rem}.modal-container .modal.copy-modal{width:fit-content;padding:.5rem 1.25rem;border-radius:var(--radius-sm)}.modal-container .modal.copy-modal .text-med{color:var(--text)}.modal-container .modal.intro{width:max(32vw,290px)}.modal-container .modal .text-sm{width:100%;text-align:left}.modal-container .modal .modal-flex{display:flex;align-items:center}.modal-container .modal .modal-apart{display:flex;align-items:center;justify-content:space-evenly;width:100%}.modal-container .modal .modal-btn{cursor:pointer;margin-top:.35rem;padding:.5rem 1.25rem;background:var(--text);color:#fff;border-radius:var(--radius-sm);font-weight:600;box-shadow:none;transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.34,1.56,.64,1);will-change:transform}.modal-container .modal .win-text{width:90%;margin-top:.75rem;text-align:center}.modal-container .modal .win-game-container{width:100%}.modal-container .modal .win-game-container>div{flex:1}.modal-container .win-game-container .flex-column{gap:0}.modal-container .welcome-container .text-sm,.modal-container .win-game-container .text-sm{text-align:center}.modal-container .modal .welcome-calendar>*{padding:.25rem 0}.modal-container .modal .stats-item{flex-direction:column}.modal-container .modal .modal-froots{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin-top:.25rem}.modal-container .modal .modal-froots img{width:100%;border-radius:var(--radius-xs);background:var(--surface-alt)}.modal-container .modal .social-text{text-align:center}.modal-container .modal .social-media{display:flex;gap:max(.75vw,.5rem)}.modal-container .modal .copy-icon{cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1);will-change:transform}.modal-container .modal .intro-example{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;width:100%;margin:.5rem 0}.modal-container .modal .intro-example .intro-container{display:flex;align-items:center;gap:.3rem}.modal-container .modal .intro-example .grid-item{flex-basis:34px;flex-shrink:0;width:clamp(26px,38%,34px);border-radius:var(--radius-xs);box-shadow:var(--shadow-sm)}@media (hover: hover) and (pointer: fine){.navbar .nav-container .btn:hover{background-color:var(--green);box-shadow:var(--shadow-sm);transform:scale(1.05)}.inventory-container .inventory-layout .item-img:hover,.modal-container .modal .copy-icon:hover{transform:scale(1.08)}.keyboard-container .froot-key.clickable:hover{background-color:var(--surface-alt);transform:scale(1.06);box-shadow:var(--shadow)}.keyboard-container .froot-key.green:hover{background-color:#64df59d9}.keyboard-container .froot-key.yellow:hover{background-color:#ffc400bf}.modal-container .modal .modal-btn:hover{opacity:.88;transform:scale(1.02)}.information-container .information-layout .contact-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}}.modal-container .modal .modal-btn:active{transform:scale(.96);opacity:.8}.information-container .information-layout .contact-btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.keyboard-container .froot-key.clickable:active{transform:scale(.94)}@keyframes flame{0%{filter:drop-shadow(0 0 3px rgba(255,154,0,.6));transform:scaleX(.98) scaleY(1.01) translateY(0)}25%{filter:drop-shadow(0 0 5px rgba(255,106,0,.7));transform:scaleX(.95) scaleY(1.08) translateY(-.5px)}50%{filter:drop-shadow(0 0 6px rgba(255,80,0,.75));transform:scaleX(.94) scaleY(1.1) translateY(-1px)}75%{filter:drop-shadow(0 0 4px rgba(255,130,0,.65));transform:scaleX(.96) scaleY(1.05) translateY(-.5px)}to{filter:drop-shadow(0 0 3px rgba(255,154,0,.6));transform:scaleX(.98) scaleY(1.01) translateY(0)}}.glow-icon{animation:flame 2s infinite cubic-bezier(.4,0,.6,1);will-change:transform,filter}
