#root,body,html{background:#030712;height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%}canvas{touch-action:none}.htmlScreen iframe,canvas{transition:all .5s ease-in-out}.htmlScreen iframe{background:#000;border:none;border-radius:20px;box-shadow:0 0 20px rgba(0,0,0,.2);height:670px;opacity:0;-webkit-transform:scale(.98);transform:scale(.98);-webkit-user-select:none;user-select:none;width:1024px}.htmlScreen iframe.loaded{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.htmlScreen iframe:hover{box-shadow:0 0 30px rgba(0,0,0,.3);-webkit-transform:scale(1.02);transform:scale(1.02)}.spinner{align-items:center;background-color:initial;display:flex;height:300px;justify-content:center;width:300px}.spinner span{-webkit-animation:fade 1s linear 0s infinite;animation:fade 1s linear 0s infinite;font-size:2rem;padding-right:1rem}.half-spinner{-webkit-animation:spin .5s linear 0s infinite;animation:spin .5s linear 0s infinite;border:3px solid #03fc4e;border-radius:50%;border-top-color:transparent;height:50px;width:50px}.completed{-webkit-animation:bigger 1s linear;animation:bigger 1s linear;color:#03fc4e;font-size:2rem}@-webkit-keyframes bigger{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(2);transform:scale(2)}}@keyframes bigger{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(2);transform:scale(2)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes fade{0%{opacity:0}to{opacity:1}}.phoneres{-webkit-animation:fadeInScale .5s ease-in-out;animation:fadeInScale .5s ease-in-out;height:100%;transition:opacity .5s ease;width:100%}.iframe-loader{-webkit-animation:fadeIn .3s ease-in-out;animation:fadeIn .3s ease-in-out;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(0,0,0,.8);border:1px solid hsla(0,0%,100%,.1);border-radius:8px;box-shadow:0 0 20px rgba(0,0,0,.5);color:#fff;font-size:1.2em;left:50%;padding:1rem 2rem;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1000}canvas{cursor:grab}canvas:active{cursor:grabbing}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInScale{0%{opacity:0;-webkit-transform:scale(.9);transform:scale(.9)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes fadeInScale{0%{opacity:0;-webkit-transform:scale(.9);transform:scale(.9)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes float{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes float{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@media (max-width:768px){.phoneres{-webkit-animation:fadeInUp .8s ease forwards;animation:fadeInUp .8s ease forwards;opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}}.experience-container{background:transparent;height:100%;position:relative;width:100%}.view-mode-selector{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(10,25,47,.7);border:1px solid hsla(0,0%,100%,.1);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.3);display:flex;gap:10px;padding:8px;position:absolute;right:20px;top:20px;transition:all .3s ease;z-index:10}.view-mode-selector:hover{background:rgba(15,35,65,.8)}.view-mode-button{background:rgba(0,0,0,.3);border:1px solid hsla(0,0%,100%,.2);border-radius:4px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:all .2s ease}.view-mode-button:hover{background:rgba(255,77,77,.3);-webkit-transform:translateY(-2px);transform:translateY(-2px)}.view-mode-button.active{box-shadow:0 2px 8px rgba(255,77,77,.4)}.portfolio-container{background:linear-gradient(135deg,#0a192f,#1a365d);height:100%;overflow:auto;padding:20px;position:relative;width:100%}.portfolio-container:before{background:radial-gradient(circle at center,rgba(93,0,255,.1) 0,rgba(10,25,47,0) 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.full-portfolio{-webkit-animation:fadeInScale .5s ease-in-out;animation:fadeInScale .5s ease-in-out;border:none;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.4);height:100%;width:100%}.experience-container>*{transition:opacity .3s ease-in-out}.particle-hover{cursor:pointer}.view-mode-button.active{background:rgba(255,77,77,.8);border-color:hsla(0,0%,100%,.5);box-shadow:0 0 15px rgba(255,77,77,.6);text-shadow:0 0 5px hsla(0,0%,100%,.7);-webkit-transform:translateY(-1px);transform:translateY(-1px)}canvas{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/></svg>') 12 12,auto}canvas:active{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ff4d4d" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/></svg>') 12 12,auto}.experience-container>canvas{background:transparent!important}