:root{--title-color: #8ce0ff;--nav-item-color: #598fa3;--background-color: #071022;--header-background-color: #071022;--font-size-title: 5em;--font-size-subtitle: 3em;--font-size-nav-item: 2em}body{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--background-color);font-family:Comic Sans MS,Comic Sans,sans-serif;min-height:90vh;margin:0;padding:0}.navbar{position:fixed;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 20px;background-color:var(--header-background-color);backdrop-filter:blur(10px);z-index:1000;border-bottom:1px solid rgba(255,255,255,.1)}.navbar--no-instructions{grid-template-columns:1fr 1fr}.nav-link-wrapper{display:flex}.nav-link-start{justify-content:flex-start}.nav-link-end{justify-content:flex-end}.nav-link{display:flex;align-items:center;text-decoration:none;color:var(--title-color);font-size:1.1em;font-weight:700;padding:8px 16px;border-radius:5px;transition:all .3s ease}.nav-link:hover{background-color:#ffffff1a;color:#fff}.nav-link svg{margin-right:8px;width:20px;height:20px}.nav-instructions{display:flex;align-items:center;text-decoration:none;color:var(--title-color);font-size:1.1em;font-weight:700}.github-link svg{margin-right:0;width:24px;height:24px}.title{display:flex;flex:auto;min-width:99vw;min-height:9vh;justify-content:center;align-items:center;font-size:var(--font-size-title);color:var(--title-color);background-color:var(--background-color);text-align:center}.subTitle{font-size:var(--font-size-subtitle);color:var(--title-color);padding-bottom:20px}.navItems{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.navItem{text-decoration:none;display:flex;justify-content:center;align-items:center;flex-direction:column}.navItem>img{max-width:200px;filter:brightness(60%);padding:5px}.navItem>img:hover{filter:brightness(100%)}.navItemSubTitle{font-size:var(--font-size-nav-item);color:var(--title-color);text-decoration:none}.showcase-link-container{display:flex;justify-content:center;margin-bottom:30px}.showcase-nav-link{display:inline-block;padding:12px 24px;background-color:#ffffff1a;border:1px solid var(--title-color);border-radius:8px;color:var(--title-color);text-decoration:none;font-size:1.2em;transition:all .3s ease}.showcase-nav-link:hover{background-color:#fff3;transform:translateY(-2px)}.title[contenteditable=true]:empty:before{content:attr(placeholder);color:var(--title-color)}.title[contenteditable=true]{outline:none}.title>input{font-family:Comic Sans MS,Comic Sans,sans-serif;background-color:var(--background-color);font-size:5em;color:var(--title-color);border:0;text-align:center}main>.colContainer{display:flex;flex:auto;min-height:60vh;min-width:99vw}.col{display:flex;flex-direction:column;flex:100%;justify-content:center;align-items:center}.relic{margin:10px 0;display:flex;flex-direction:column;align-items:center;cursor:pointer}.relicImg{height:150px;width:150px}.relicImg.rs3{width:116px;height:100px}.relicLabel{font-size:1.5em;margin-top:5px;color:var(--title-color);text-align:center}.detail-sidebar{position:fixed;top:60px;right:0;width:320px;max-width:90vw;height:calc(100vh - 60px);border-left:1px solid var(--title-color);box-shadow:-5px 0 20px #00000080;z-index:999;transform:translate(100%);transition:transform .3s ease;display:flex;flex-direction:column;color:var(--title-color);opacity:90%}.detail-sidebar.open{transform:translate(0)}.detail-sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(255,255,255,.1);background-color:color-mix(in oklab,var(--header-background-color),var(--background-color) 40%)}.detail-sidebar-title{font-size:1.3em;font-weight:700;margin:0}.detail-sidebar-close{background:none;border:none;color:var(--title-color);font-size:1.5em;cursor:pointer;padding:5px 10px;border-radius:5px;transition:background-color .2s}.detail-sidebar-close:hover{background-color:#ffffff1a}.detail-sidebar-content{flex:1;overflow-y:auto;padding:15px;background-color:var(--background-color)}.detail-sidebar-image{display:flex;justify-content:center;margin-bottom:15px}.detail-sidebar-image img{max-width:150px;max-height:150px}.detail-sidebar-description ul{margin:0;padding:0 0 0 20px;text-align:left}.detail-sidebar-description li{margin:8px 0;line-height:1.4}.relic,.mastery{position:relative}.picker-buttons{display:flex;gap:10px;justify-content:center;margin:10px 0}#exportBtn,#generateBtn,#addToShowcaseBtn,.showcase-btn{color:#000;border:none;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;cursor:pointer;border-radius:5px;width:auto;transition:background-color .2s}#exportBtn,#generateBtn,#addToShowcaseBtn{background-color:var(--title-color)}#exportBtn:hover,#generateBtn:hover,#addToShowcaseBtn:hover{background-color:var(--nav-item-color)}.showcase-btn-clear{background-color:#f44336}.showcase-btn-clear:hover{background-color:#b82929}main>.rowContainer{display:flex;flex-direction:column;flex:auto;min-height:60vh;min-width:99vw}.row{display:flex;flex-direction:row;flex:100%;justify-content:center;align-items:center}.mastery{margin:10px;display:flex;flex-direction:column;align-items:center;cursor:pointer}.masteryImg{height:150px;width:140px}.masteryLabel{font-size:1.5em;margin-top:5px;color:var(--title-color);text-align:center}.footer{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:flex-start;align-items:center;padding:15px 20px;background-color:var(--header-background-color);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);z-index:1000;height:60px}.footer-links{display:flex;gap:20px;align-items:center;flex:0 1 auto;position:absolute;left:50%;transform:translate(-50%)}.footer-link{display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--title-color);padding:10px;border-radius:50%;transition:all .3s ease;background-color:#ffffff1a;width:44px;height:44px}.footer-link:hover{background-color:#fff3;color:#fff;transform:translateY(-2px)}.footer-link.prami:hover{color:#ff69ad}.footer-link.discord:hover{color:#5865f2}.footer-link svg{width:24px;height:24px;fill:currentColor}.theme-selector{display:flex;align-items:center;gap:10px;flex:0 1 auto;margin-left:auto}.theme-selector label{color:var(--title-color);font-size:14px;font-weight:500}.theme-selector select{background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:var(--title-color);padding:8px 12px;font-size:14px;min-width:140px;cursor:pointer;transition:all .3s ease}.theme-selector select:hover{background-color:#ffffff26;border-color:#ffffff4d}.theme-selector select:focus{outline:none;background-color:#fff3;border-color:#fff6}.theme-selector optgroup,.theme-selector option{background-color:var(--background-color);color:var(--title-color)}body.has-footer{padding-bottom:80px}.homepage{padding:70px 20px 20px}.showcase-page{display:flex;flex-direction:column;align-items:center;padding:70px 20px 20px;min-height:auto}.showcase-page .title{min-width:auto;min-height:auto;font-size:2.5em;margin-bottom:15px;padding:0}.showcase-instructions{color:var(--title-color);text-align:center;margin-bottom:10px;opacity:.8;font-size:.95em}.showcase-input-section{width:100%;max-width:800px;margin-bottom:20px}.showcase-textarea{width:100%;padding:12px;border:1px solid var(--nav-item-color);border-radius:8px;background-color:#ffffff0d;color:var(--title-color);font-family:monospace;font-size:13px;resize:vertical;min-height:100px;box-sizing:border-box}.showcase-textarea::placeholder{color:var(--nav-item-color);opacity:.7}.showcase-textarea:focus{outline:none;border-color:var(--title-color)}.showcase-buttons{display:flex;gap:10px;margin-top:12px;justify-content:center}.showcase-container{width:100%;max-width:1000px;display:flex;flex-direction:column;gap:8px}.showcase-container.exporting{padding:15px;background-color:#000;border-radius:8px}main.exporting .colContainer{flex-direction:row;min-width:99vw;min-height:60vh}main.exporting .col{flex-direction:column;flex-wrap:nowrap;justify-content:center;overflow-x:visible;padding:0 10px}main.exporting .col>.relic:first-child,main.exporting .col>.mastery:first-child{margin-left:0}main.exporting .col>.relic:last-child,main.exporting .col>.mastery:last-child{margin-right:0}main.exporting .relicImg{height:150px;width:150px}main.exporting .relicImg.rs3{width:116px;height:100px}main.exporting .relicLabel,main.exporting .masteryLabel{font-size:1.5em;max-width:none}main.exporting .relic{margin:10px 0;flex-shrink:0}main.exporting .rowContainer{min-width:99vw;min-height:60vh}main.exporting .row{flex:100%;flex-wrap:nowrap;justify-content:center}main.exporting .masteryImg{height:150px;width:140px}main.exporting .mastery{margin:10px;flex-shrink:0}main.exporting .title{font-size:var(--font-size-title);min-width:99vw;min-height:9vh}.showcase-container.exporting .showcase-row-items{flex-wrap:nowrap}.showcase-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background-color:#ffffff08;border-radius:6px;border-left:4px solid var(--title-color)}.showcase-row-error{border-left-color:#ff6b6b;opacity:.7}.showcase-row-title{font-size:1.1em;font-weight:700;color:var(--title-color);min-width:140px;flex-shrink:0}.showcase-row-separator{color:var(--nav-item-color);font-size:1.3em;opacity:.5}.showcase-row-error-msg{color:#ff6b6b;font-style:italic}.showcase-row-items{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.showcase-item-img{width:45px;height:45px;object-fit:contain}.showcase-empty{color:var(--nav-item-color);text-align:center;padding:40px;font-style:italic}.nav-hamburger{display:none;background:none;border:none;color:var(--title-color);cursor:pointer;padding:8px;border-radius:5px;transition:background-color .2s}.nav-hamburger svg{width:24px;height:24px}.nav-hamburger:hover{background-color:#ffffff1a}.nav-mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background-color:var(--header-background-color);border-bottom:1px solid rgba(255,255,255,.1);flex-direction:column;padding:10px 0;box-shadow:0 5px 20px #0000004d}.nav-mobile-menu.open{display:flex}.nav-mobile-link{display:flex;align-items:center;gap:10px;padding:12px 20px;color:var(--title-color);text-decoration:none;transition:background-color .2s}.nav-mobile-link:hover{background-color:#ffffff1a}.nav-mobile-link svg{width:20px;height:20px}.nav-instructions--mobile{display:none}@media screen and (max-width:1024px)and (min-width:769px){.navbar{display:flex;justify-content:space-between;align-items:center}.nav-hamburger{display:flex;align-items:center;justify-content:center}.nav-desktop,.nav-instructions--desktop{display:none}.nav-instructions--mobile{display:flex;font-size:1em;flex:1;justify-content:center;text-align:center}.title{font-size:3em;min-width:auto}main>.colContainer{min-width:auto;max-width:100%}main>.rowContainer{min-width:auto;max-width:100%}.relicImg{height:85px;width:85px}.relicImg.rs3{width:70px;height:60px}.masteryImg{height:85px;width:80px}.relicLabel,.masteryLabel{font-size:1em}.relic{margin:3px 0}.mastery{margin:3px}.subTitle{font-size:2em}.navItem>img{max-width:150px}.navItemSubTitle{font-size:1.5em}}@media screen and (max-width:768px){body{justify-content:flex-start}.navbar{display:flex;justify-content:space-between;align-items:center;position:fixed;width:100%;box-sizing:border-box}.nav-hamburger{display:flex;align-items:center;justify-content:center}.nav-desktop,.nav-instructions--desktop{display:none}.nav-instructions--mobile{display:flex;font-size:.9em;flex:1;justify-content:center;text-align:center}main{padding-top:45px}.title{font-size:1.8em;min-width:auto;min-height:auto;padding:15px 10px;word-break:break-word}main>.colContainer{flex-direction:column;min-height:auto;min-width:auto;width:100%;overflow-x:auto}.col{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:5px 10px;box-sizing:border-box;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.col>.relic:first-child,.col>.mastery:first-child{margin-left:auto}.col>.relic:last-child,.col>.mastery:last-child{margin-right:auto}.relicImg{height:70px;width:70px}.relicImg.rs3{width:60px;height:50px}.masteryImg{height:60px;width:55px}.relicLabel,.masteryLabel{font-size:.65em;max-width:70px;text-align:center;word-wrap:break-word}.relic,.mastery{margin:3px;flex-shrink:0}main>.rowContainer{min-width:auto;min-height:auto;width:100%}.row{flex:none;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:5px 10px;box-sizing:border-box;-webkit-overflow-scrolling:touch}.row>:first-child{margin-left:auto}.row>:last-child{margin-right:auto}.detail-sidebar{inset:auto 0 0;width:100%;max-width:100%;height:auto;max-height:70vh;border-left:none;border-top:1px solid var(--title-color);border-radius:16px 16px 0 0;transform:translateY(100%);box-shadow:0 -5px 20px #00000080}.detail-sidebar.open{transform:translateY(0)}.detail-sidebar-header:before{content:"";display:block;width:40px;height:4px;background-color:#ffffff4d;border-radius:2px;margin:0 auto 10px}.subTitle{font-size:1.4em}.homepage{padding-top:45px}.homepage .col{flex-direction:column}.navItem>img{max-width:120px}.navItemSubTitle{font-size:1.2em}.footer{flex-direction:column;justify-content:center;height:auto;gap:10px;padding:10px 20px}.footer-links{position:static;transform:none}.theme-selector{margin-left:0}.footer-link{width:34px;height:34px;padding:7px}.footer-link svg{width:18px;height:18px}.picker-buttons{flex-wrap:wrap;padding:0 10px}#exportBtn,#addToShowcaseBtn{font-size:14px;padding:8px 16px}}