:root{font-family:Segoe UI,Segoe WP,Tahoma,Geneva,Verdana,sans-serif;background:radial-gradient(circle at 50% 30%,#4a4a4a,#1a1a1a 80%);color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;height:100vh;width:100vw;overflow:hidden}#root{height:100%;display:flex;flex-direction:column;padding:40px 60px;box-sizing:border-box}.tile{position:relative;box-sizing:border-box;cursor:pointer;overflow:hidden;background-size:cover;background-position:center center;background-repeat:no-repeat;transition:transform .15s ease-out,box-shadow .15s ease-out,outline .15s ease-out;outline:3px solid transparent;display:flex;align-items:flex-end;width:100%;height:100%;padding:0}.tile:hover,.tile:focus{transform:scale(1.05);box-shadow:0 15px 25px #0009;outline:3px solid white;z-index:10}.tile-icon-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex}.tile-label-container{background:#000000bf;width:100%;padding:4px 8px;display:flex;flex-direction:column;margin:0}.tile-label-container.transparent-bg{background:transparent}.tile-label{font-size:1.05rem;font-weight:400;letter-spacing:.2px}.tile-subtext{font-size:.8rem;color:#ccc;font-weight:400;margin-top:2px}.tile:focus-visible{outline-offset:0}.tile-badge-top-right{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;opacity:.9;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000bf;z-index:1000;display:flex;justify-content:center;align-items:center;animation:quickFade .2s ease-out}.modal-wrapper{width:900px;height:550px;display:flex;flex-direction:column}.modal-header-text{font-size:2.5rem;font-weight:300;color:#fff;margin:0 0 15px;letter-spacing:1px}.modal-content-box{display:flex;flex-grow:1;background-color:#fff;box-shadow:0 10px 30px #00000080;overflow:hidden}.modal-left-pane{width:40%;background-color:#fff;display:flex;flex-direction:column}.list-item{padding:15px 20px;cursor:pointer;border-bottom:1px solid #ddd;display:flex;flex-direction:column;transition:background .1s}.list-title{font-size:1.2rem;font-weight:400;color:#333}.list-subtitle{font-size:.9rem;color:#666;margin-top:4px}.list-item.active{background-color:#107c10}.list-item.active .list-title,.list-item.active .list-subtitle{color:#fff}.modal-right-pane{width:60%;background-color:#e6eaea;padding:40px;color:#333}.detail-header{border-bottom:2px solid #ccc;padding-bottom:15px;margin-bottom:20px}.detail-header h2{margin:0;font-size:2rem;font-weight:300;color:#333}.detail-date{margin:5px 0 0;font-size:1rem;color:#666}.detail-body{font-size:1.2rem;line-height:1.5;color:#444}.modal-footer-controls{position:absolute;bottom:40px;left:50px;display:flex;gap:20px;font-size:1.2rem;color:#fff}.btn-b{background-color:red;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.8rem}@keyframes quickFade{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.dashboard-grid{display:grid;grid-template-columns:320px 320px 320px 320px;grid-template-rows:200px 200px 200px;gap:16px;animation:fadeIn .4s ease-in-out}.area-about{grid-column:1 / 2;grid-row:1 / 2}.area-skills{grid-column:1 / 2;grid-row:2 / 3}.area-exp{grid-column:1 / 2;grid-row:3 / 4}.area-feature{grid-column:2 / 5;grid-row:1 / 3}.area-feature .logo-center-feature{width:250px;height:250px;object-fit:contain;filter:drop-shadow(0 0 15px rgba(255,255,255,.4))}.area-cv{grid-column:2 / 4;grid-row:3 / 4}.area-learnmore{grid-column:4 / 5;grid-row:3 / 4}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.social-grid{display:grid;grid-template-columns:320px 320px 320px 320px;grid-template-rows:200px 200px 200px;gap:16px;animation:fadeIn .4s ease-in-out}.social-blog{grid-column:1 / 3;grid-row:1 / 4}.social-linkedin{grid-column:3 / 5;grid-row:1 / 3}.social-project{grid-column:3 / 3;grid-row:3 / 4}.social-github{grid-column:4 / 5;grid-row:3 / 4}.interests-grid{display:grid;grid-template-columns:320px 320px 320px 320px;grid-template-rows:200px 200px 200px;gap:16px;animation:fadeIn .4s ease-in-out}.int-rugby{grid-column:1 / 3;grid-row:1 / 3}.int-cadets{grid-column:3 / 4;grid-row:1 / 3}.int-padel{grid-column:4 / 5;grid-row:1 / 3}.int-halo{grid-column:1 / 2;grid-row:3 / 4}.int-mentor{grid-column:2 / 5;grid-row:3 / 4}.settings-grid{display:grid;grid-template-columns:320px 320px 320px 320px;grid-template-rows:200px 200px 200px;gap:16px;animation:fadeIn .4s ease-in-out}.set-system{grid-column:1 / 3;grid-row:1 / 3}.set-ad{grid-column:3 / 5;grid-row:1 / 3}.set-changelog{grid-column:1 / 2;grid-row:3 / 4}.set-privacy{grid-column:2 / 3;grid-row:3 / 4}.set-power{grid-column:3 / 5;grid-row:3 / 4}body,html{overflow-x:hidden}.app-container{width:fit-content;margin:0 auto;display:flex;flex-direction:column;height:100%;padding-top:60px;box-sizing:border-box}.top-nav{display:flex;gap:30px;margin-bottom:20px;align-items:baseline}.nav-item{background:none;border:none;color:#888;font-size:1.6rem;font-family:inherit;font-weight:300;cursor:pointer;padding:0;text-transform:lowercase;transition:all .2s ease}.nav-item:hover{color:#ccc}.nav-item.active{color:#fff;font-size:2.4rem;font-weight:300}.user-profile{position:absolute;top:30px;right:50px;width:48px;height:48px;background-color:#0072c6;border:2px solid #ccc;display:flex;align-items:center;justify-content:center;border-radius:4px;box-shadow:0 4px 8px #0000004d;cursor:pointer;transition:transform .2s}.user-profile:hover{transform:scale(1.1);border-color:#fff}.dashboard-container{flex-grow:1;display:flex;align-items:flex-start;width:1328px;overflow:visible}.slider-track{display:flex;gap:250px;transition:transform .4s cubic-bezier(.25,1,.5,1)}.dashboard-slide{flex:0 0 auto;width:1328px}.placeholder-dash{font-size:2rem;color:#666;width:100%;height:600px;display:flex;align-items:center;justify-content:center;border:2px dashed #444;box-sizing:border-box}.footer-controls{display:flex;gap:20px;margin-top:20px;padding-bottom:20px;font-size:1.1rem;color:#ccc}.control{display:flex;align-items:center;gap:8px}.btn-a,.btn-y{border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#000;font-weight:700;font-size:.8rem}.btn-a{background-color:#39ff14}.btn-y{background-color:gold}@media(max-height:815px){.user-profile{display:none}.app-container{padding-top:0}}
