html,body{height:auto;min-height:100vh;overflow-x:hidden}body{scrollbar-width:thin;scrollbar-color:#ff8c00 #181818}select,input{width:220px;font-family:monospace;border-radius:5px;border:1px solid #ccc;margin:.5rem 0;padding:.4rem;background:#181818;color:#fff;box-sizing:border-box}ul{margin:.5rem 0 1rem;padding-left:1.2rem}h1{text-align:center}.app-container{display:flex;flex-direction:column;align-items:center;padding:2rem;position:relative;box-sizing:border-box;overflow-x:hidden;width:100%;max-width:100vw}.background{height:100vh;width:100%;min-width:100vw;object-fit:cover;position:fixed;top:0;left:0;right:0;z-index:-1}.content-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:2rem;border-radius:18px;outline:6px groove aqua;background-color:#0009;z-index:1;max-height:none;overflow:visible;box-sizing:border-box;margin:1rem 0}.app-title{width:100%;max-width:765px;object-fit:contain;margin-bottom:1rem;border-radius:10px;box-shadow:0 0 20px #00ffff4d}.app-title-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.main-card{position:relative;background-color:#000000b3;padding:2rem;border-radius:10px;color:#fff;font-family:monospace;width:100%;max-width:700px;box-shadow:0 0 20px #00ffff4d;text-shadow:1px 1px 3px black;scrollbar-width:thin;scrollbar-color:#ff8c00 #181818;opacity:0;transform:translateY(-60px);pointer-events:none;transition:opacity .5s cubic-bezier(.4,2,.6,1),transform .5s cubic-bezier(.4,2,.6,1)}.main-card.show{opacity:1;transform:translateY(0);pointer-events:auto}.main-card.hide{opacity:0;transform:translateY(-60px);pointer-events:none}label{display:block;margin-bottom:1.2rem}.equipment-summary{margin-top:2rem;padding:1.5rem;border-radius:10px;background-color:#ffffff0d;border:2px solid #ff8c00}.equipment-summary h3{margin-bottom:1rem;font-size:1.2rem;padding-bottom:.5rem;text-align:center}.equipment-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem;font-size:1rem}.equipment-grid p{margin:0;background-color:#ffffff12;padding:.5rem 1rem;border-radius:6px;box-shadow:inset 0 0 5px #00ffff1a;white-space:nowrap}.skill-input-group{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.skill-arrow{background:#0ff;color:#181818;border:none;border-radius:50%;width:2rem;height:2rem;font-size:1.5rem;font-weight:700;cursor:pointer;box-shadow:0 0 6px #0ff;transition:background .2s,color .2s}.skill-arrow:hover{background:#0ff;color:#000}input[type=number].skill-input::-webkit-inner-spin-button,input[type=number].skill-input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;display:none}input[type=number].skill-input{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.vocation-content{opacity:0;max-height:0;overflow:hidden;transform:translateY(-10px);transition:opacity .8s cubic-bezier(.4,2,.6,1),max-height .8s cubic-bezier(.4,2,.6,1),transform .8s cubic-bezier(.4,2,.6,1);will-change:opacity,max-height,transform}.vocation-content.show{opacity:1;max-height:2000px;transform:translateY(0);transition:opacity .8s cubic-bezier(.4,2,.6,1),max-height .8s cubic-bezier(.4,2,.6,1),transform .8s cubic-bezier(.4,2,.6,1)}.select-vocation-message{background:#00ffff14;border:1.5px solid aqua;color:#fff;border-radius:8px;padding:1.2rem 1rem;margin:1.5rem 0;text-align:center;font-size:1.1rem;font-family:monospace;box-shadow:0 0 10px #00ffff1f;max-width:400px;margin-left:auto;margin-right:auto}.collapsible-section{overflow:hidden;max-height:0;opacity:0;transition:max-height .6s cubic-bezier(.4,2,.6,1),opacity .5s cubic-bezier(.4,2,.6,1);will-change:max-height,opacity}.collapsible-section.open{max-height:none;opacity:1}.collapse-toggle{display:flex;align-items:center;background:linear-gradient(90deg,#0a2233 60%,#0ff);color:#fff;border:2px solid #0ff;border-radius:8px;padding:.5rem 1.2rem;margin:.5rem 0 1rem;font-family:monospace;font-size:1.1rem;font-weight:700;cursor:pointer;box-shadow:0 0 10px #ff8c001a;transition:background .3s,border .3s,color .3s,box-shadow .3s,transform .3s;outline:none;-webkit-user-select:none;user-select:none;gap:.7rem}.collapse-toggle:hover,.collapse-toggle:focus{background:linear-gradient(90deg,#0ff,#0a2233);color:#0ff;border-color:#fff;transform:translateY(-2px) scale(1.04);box-shadow:0 0 24px 4px #0ff}.collapse-toggle .arrow{display:inline-block;width:1.2em;height:1.2em;border-right:3px solid #0ff;border-bottom:3px solid #0ff;margin-right:.5em;transition:transform .4s cubic-bezier(.4,2,.6,1),border-color .2s;transform:rotate(-45deg)}.collapse-toggle .arrow.down{transform:rotate(45deg)}.collapse-toggle .arrow.up{transform:rotate(-135deg)}.toggle-label{letter-spacing:1px}.side-nav{position:fixed;top:0;left:0;width:210px;height:100vh;background:#ff8c002e;box-shadow:2px 0 16px #ff8c001a;z-index:100;display:flex;flex-direction:column;align-items:flex-start;padding:2rem 1rem 1rem 1.5rem;font-family:monospace;border-right:2px solid rgba(255,140,0,.25);transition:width .3s cubic-bezier(.4,2,.6,1),padding .3s cubic-bezier(.4,2,.6,1);overflow-x:hidden}.side-nav.collapsed{width:48px;padding-left:.5rem;padding-right:.5rem}.side-nav-image-top{width:50%;height:auto;margin-left:-2rem;margin-top:-2rem;border-radius:8px;transition:opacity .2s}.side-nav-image-bottom{width:50%;height:auto;margin-left:-2rem;margin-bottom:-2rem;border-radius:8px;transition:opacity .2s;box-shadow:0 0 10px #00ffff1f}.side-nav.collapsed .side-nav-title{opacity:0}.side-nav ul{list-style:none;padding:0;margin:1.5rem 0 0;width:100%;transition:opacity .2s}.side-nav.collapsed ul{opacity:0;pointer-events:none}.side-nav-collapse-btn{position:absolute;top:60px;right:8px;background:#ff8c002e;color:#ff8c00;border:2px solid #ff8c00;border-radius:6px;padding:.2rem .7rem;font-size:1.2rem;font-family:monospace;font-weight:700;cursor:pointer;z-index:101;transition:background .2s,color .2s,border .2s}.side-nav-collapse-btn:hover{background:#ff8c00;color:#fff;border-color:#fff}.side-nav-collapse-icon{color:#fff}.collapse-app-btn{position:fixed;top:18px;right:28px;z-index:1001;background:#ff8c002e;color:#fff;border:2px solid #ff8c00;border-radius:8px;padding:.5rem 1.2rem;font-family:monospace;font-weight:700;cursor:pointer;box-shadow:0 0 10px #ff8c001a;transition:background .2s,border .2s,color .2s}.collapse-app-btn:hover,.collapse-app-btn:focus{background:#ff8c00;color:#fff;border-color:#fff}.collapse-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100vw;background:#000000d9;position:fixed;top:0;left:0;z-index:9999}.begin-optimize-btn{background:linear-gradient(90deg,#ffb347,#ffcc80);color:#222;border:2px solid #ff8c00;border-radius:12px;padding:1.2rem 2.5rem;font-size:1.5rem;font-family:monospace;font-weight:700;letter-spacing:2px;cursor:pointer;box-shadow:0 0 24px 4px #ff8c002e;transition:background .2s,color .2s,border .2s}.begin-optimize-btn:hover,.begin-optimize-btn:focus{background:#ff8c00;color:#fff;border-color:#fff}.side-nav a{color:#fff;font-family:monospace;font-size:large;text-decoration:none;display:block;padding:.6rem 0rem;border-radius:6px;margin-bottom:.5rem;transition:background .2s,color .2s,border .2s,box-shadow .2s}.side-nav a:hover,.side-nav a:focus{background:#ff8c00;color:#fff;border-color:#fff;box-shadow:0 0 16px 2px #ff8c002e}.begin-shine-btn{display:block;margin:2rem auto 0;padding:1.1rem 3.5rem;font-size:2rem;font-family:monospace;font-weight:700;color:#fff;background:linear-gradient(90deg,#00faff,#00c3ff);border:3px solid #0ff;border-radius:16px;box-shadow:0 0 32px 8px #00ffff40,0 0 8px 2px #0ff,0 0 0 4px #00ffff1a inset;letter-spacing:2px;cursor:pointer;transition:background .2s,color .2s,border .2s,box-shadow .2s}.begin-shine-btn:hover,.begin-shine-btn:focus{background:linear-gradient(90deg,#0ff,#00c3ff);color:#111;border-color:#fff;box-shadow:0 0 48px 12px #0ff,0 0 16px 4px #0ff,0 0 0 6px #00ffff2e inset}.restart-btn{display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#0a2233 60%,#0ff);color:#fff;border:2px solid #0ff;border-radius:8px;padding:.5rem 1.5rem;font-family:monospace;font-size:1.2rem;font-weight:700;cursor:pointer;box-shadow:0 0 10px #00ffff1a;transition:background .3s,border .3s,color .3s,box-shadow .3s,transform .3s;outline:none;-webkit-user-select:none;user-select:none;gap:.7rem;margin-bottom:1.5rem}.restart-btn:hover,.restart-btn:focus{background:linear-gradient(90deg,#0ff,#0a2233);color:#0ff;border-color:#fff;transform:translateY(-2px) scale(1.04);box-shadow:0 0 24px 4px #0ff}.restart-icon{font-size:1.4em;margin-right:.5em;display:inline-block;vertical-align:middle}.scroll-top-btn{position:fixed;bottom:32px;right:300px;background:#ff8c002e;color:#fff;border:2px solid #ff8c00;border-radius:50%;width:48px;height:48px;font-size:2rem;font-family:monospace;font-weight:700;cursor:pointer;box-shadow:0 0 24px 4px #ff8c002e;z-index:2000;transition:background .2s,color .2s,border .2s,transform .2s;display:flex;align-items:center;justify-content:center;outline:none}.scroll-top-btn:hover,.scroll-top-btn:focus{background:#ff8c00;color:#fff;border-color:#fff;transform:scale(1.15)}.row{display:flex;gap:2rem;align-items:flex-start;width:100%}.col-main,.col-side{flex:1 1 0;min-width:0}.right-panel{position:fixed;top:0;right:0;width:210px;height:100vh;background:#ff8c002e;box-shadow:-2px 0 16px #ff8c001a;z-index:100;display:flex;flex-direction:column;align-items:flex-end;padding:2rem 1.5rem 1rem 1rem;font-family:monospace;border-left:2px solid rgba(255,140,0,.25);transition:width .3s cubic-bezier(.4,2,.6,1),padding .3s cubic-bezier(.4,2,.6,1);overflow-x:hidden}.right-panel.collapsed{width:48px;padding-right:.5rem;padding-left:.5rem}.right-panel-collapse-btn{position:absolute;top:60px;left:8px;background:#ff8c002e;color:#ff8c00;border:2px solid #ff8c00;border-radius:6px;padding:.2rem .7rem;font-size:1.2rem;font-family:monospace;font-weight:700;cursor:pointer;z-index:101;transition:background .2s,color .2s,border .2s}.right-panel-collapse-btn:hover{background:#ff8c00;color:#fff;border-color:#fff}.right-panel-collapse-icon{color:#fff}.right-panel-content{width:100%;margin-top:5rem}@keyframes shine{0%{box-shadow:0 0 32px 8px #0ff,0 0 8px 2px #0ff}50%{box-shadow:0 0 48px 16px #fff,0 0 16px 4px #0ff}to{box-shadow:0 0 32px 8px #0ff,0 0 8px 2px #0ff}}@keyframes smoke-move{0%{opacity:.18}50%{opacity:.32}to{opacity:.18}}