@import"https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap";:root{--primary-pink: #ff9ad5;--primary-blue: #7ac7ff;--secondary-pink: #ff6eb5;--secondary-blue: #4da3ff;--yellow: #ffde59;--black: #000000;--white: #ffffff;--panel-bg: #ffffff;--bodybackground: #1c1439;--pastel-pink: rgba(255, 209, 220, .7)}.comic-font{font-family:Bangers,cursive;letter-spacing:1px}.comic-text{font-family:Comic Neue,cursive}.page-container{background:var(--bodybackground);min-height:100vh;padding:0}.roadmap-container{width:100%;max-width:1440px;margin:0 auto;padding:10px;position:relative}.roadmap-scroll-container{position:relative;background:#fff;scroll-snap-type:mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--primary-pink) var(--primary-blue);border-radius:15px;overflow:hidden;box-shadow:0 10px 30px #0003}.roadmap-scroll-container::-webkit-scrollbar{height:8px;width:8px}.roadmap-scroll-container::-webkit-scrollbar-track{background:var(--primary-blue);border-radius:4px}.roadmap-scroll-container::-webkit-scrollbar-thumb{background:var(--primary-pink);border-radius:4px}.desktop{display:flex;overflow-x:scroll;scroll-snap-type:x mandatory;width:100%;height:80vh}.mobile{display:block;overflow-y:scroll;scroll-snap-type:y mandatory;height:80vh}.epoch-container{scroll-snap-align:start;min-width:100%;box-sizing:border-box;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}.epoch-container:before{content:"";position:absolute;inset:0;background:#ffffff4d;z-index:1}.desktop .epoch-container{min-width:100%;height:100%}.mobile .epoch-container{min-height:100%;width:100%}.epoch-content{position:relative;z-index:2;padding:0 10px 15px;height:100%;display:flex;flex-direction:column}.epoch-header{text-align:center;margin:0 auto 10px;background:var(--primary-blue);border:3px solid var(--black);border-radius:0;padding:8px 16px;box-shadow:5px 5px #00000080;transition:transform .3s ease,opacity .5s ease,box-shadow .3s ease;transform:translateY(20px) skew(-8deg);position:relative;overflow:hidden;height:fit-content;width:fit-content}.epoch-title{font-size:2.5rem;margin:0 0 5px;color:#000;text-shadow:2px 2px 0px var(--primary-pink),3px 3px 0px rgba(0,0,0,.2)}.epoch-description{font-size:1.2rem;margin:0;color:var(--black);font-weight:700}.categories-grid{display:grid;gap:20px;flex:1;align-content:end}.categories-grid.past{grid-template-columns:repeat(3,1fr)}.categories-grid.present-future{grid-template-columns:repeat(2,1fr);justify-content:center;max-width:800px;margin:0 auto}.category-panel{background:var(--pastel-pink);border:3px solid var(--black);border-radius:0;padding:8px;box-shadow:5px 5px #00000080;transition:transform .3s ease,opacity .5s ease,box-shadow .3s ease;opacity:0;transform:translateY(20px) skew(-2deg);position:relative;overflow:hidden;height:fit-content}.category-panel.visible{opacity:1;transform:translateY(0) skew(-2deg)}.category-panel:hover{transform:translateY(-5px) skew(-2deg);box-shadow:8px 8px #00000080}.category-panel:before{display:none}.category-header{position:relative;z-index:1;margin-bottom:8px;border-bottom:2px dashed var(--black);padding-bottom:6px;transform:skew(2deg)}.category-header h3{margin:0;font-size:1.2rem;color:var(--black);text-shadow:1px 1px 0px var(--white)}.category-items{position:relative;z-index:1;margin:0;padding-left:20px;transform:skew(2deg)}.category-items li{margin-bottom:6px;font-size:.85rem;line-height:1.3;color:#333;position:relative}.category-items li:last-child{margin-bottom:0}.category-items li::marker{color:#000;font-size:1.2em;font-weight:700;content:"» "}.navigation-arrows-side{position:absolute;top:45%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0;pointer-events:none;z-index:10}.nav-arrow-side{pointer-events:all;background:var(--primary-blue);border:3px solid var(--black);border-radius:0;padding:12px 20px;font-family:Bangers,cursive;font-size:1.2rem;letter-spacing:1px;color:var(--black);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:10px;box-shadow:4px 4px #00000080;transform:skew(-5deg)}.nav-arrow-side:hover:not(:disabled){transform:skew(-5deg) translateY(-3px);box-shadow:6px 6px #00000080;background:var(--primary-pink)}.nav-arrow-side:active:not(:disabled){transform:skew(-5deg) translateY(1px);box-shadow:2px 2px #00000080}.nav-arrow-side:disabled{opacity:.4;cursor:not-allowed;transform:skew(-5deg)}.arrow-text{font-weight:700}.arrow-icon{font-size:1.4rem;font-weight:700}.nav-arrow-past{flex-direction:row}.nav-arrow-future{flex-direction:row-reverse}.navigation-dots{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.nav-dot{width:15px;height:15px;border-radius:50%;background-color:var(--primary-blue);border:2px solid var(--black);cursor:pointer;transition:transform .3s ease}.nav-dot.active{background-color:var(--primary-pink);transform:scale(1.2)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.float-animation{animation:float 3s ease-in-out infinite}.category-panel{cursor:pointer;transition:all .3s ease}.category-panel:active{transform:scale(.98) skew(-2deg)}.nav-dot:hover:not(.active){transform:scale(1.1);background-color:var(--secondary-blue)}.roadmap-scroll-container:focus{outline:2px solid var(--primary-pink);outline-offset:2px}@media(max-width:768px){.roadmap-title{font-size:1.8rem;margin-bottom:40px;margin-top:20px}.epoch-content{padding:20px}.epoch-header{margin-top:-20px;margin-bottom:45px}.epoch-title{font-size:2rem}.epoch-description{font-size:1.1rem}.categories-grid.past,.categories-grid.present-future{grid-template-columns:1fr;gap:15px;max-width:100%}.category-panel{padding:8px;min-width:auto;transform:skew(-1deg)}.category-header,.category-items{transform:skew(1deg)}.category-header h3{font-size:1.1rem}.category-items li{font-size:.8rem}.desktop,.mobile{height:85vh}.navigation-arrows-side{display:none}.navigation-dots{display:flex}}@media(min-width:769px){.navigation-dots{display:none}}@media(max-width:480px){.roadmap-container{padding:10px}.epoch-content{padding:15px}.epoch-title{font-size:1.8rem}.category-panel{padding:8px}}*{transition:color .2s ease,background-color .2s ease}