*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-height:100svh}@property --bg-from{syntax:"<color>";inherits:false;initial-value:#030611}@property --bg-via1{syntax:"<color>";inherits:false;initial-value:#081020}@property --bg-via2{syntax:"<color>";inherits:false;initial-value:#101a34}@property --bg-to{syntax:"<color>";inherits:false;initial-value:#162243}@property --bg-overlay{syntax:"<color>";inherits:false;initial-value:#ffffff09}@property --card-bg{syntax:"<color>";inherits:true;initial-value:#121830bf}@property --card-border{syntax:"<color>";inherits:true;initial-value:#9f7aea47}@property --star-color{syntax:"<color>";inherits:true;initial-value:#fff}.app-shell{--card-bg:#121830bf;--card-border:#9f7aea47;--star-color:white;background:linear-gradient(145deg, var(--bg-from) 0%, var(--bg-via1) 42%, var(--bg-via2) 78%, var(--bg-to) 100%), radial-gradient(circle at top, var(--bg-overlay), transparent 55%);justify-content:center;align-items:center;min-height:100svh;padding:24px;transition:--bg-from .8s,--bg-via1 .8s,--bg-via2 .8s,--bg-to .8s,--bg-overlay .8s,--card-bg .8s,--card-border .8s,--star-color .8s;display:flex;position:relative;overflow:hidden}.app-shell.light{--bg-from:#f9faff;--bg-via1:#eef3ff;--bg-via2:#e6edff;--bg-to:#dde7ff;--bg-overlay:#ffffff9e;--card-bg:#ffffffbf;--card-border:#5b3d9d3d;--star-color:#41198c}.app-shell:before,.app-shell:after{content:"";z-index:0;position:absolute;inset:-20%}.app-shell:before{filter:blur(48px);will-change:transform;background:radial-gradient(circle at 16% 24%,#9b6dff4d 0%,#9b6dff2e 22%,#9b6dff12 44%,#9b6dff00 70%),radial-gradient(circle at 78% 18%,#4c91ff42 0%,#4c91ff24 22%,#4c91ff0f 44%,#4c91ff00 72%),radial-gradient(circle at 54% 74%,#4ad6c433 0%,#4ad6c41a 26%,#4ad6c40a 46%,#4ad6c400 72%),radial-gradient(circle at 68% 56%,#d36cff2b 0%,#d36cff14 22%,#d36cff08 40%,#d36cff00 64%),radial-gradient(circle at 34% 60%,#765eff21 0%,#765eff0d 26%,#765eff00 58%);transition:opacity .8s;animation:18s ease-in-out infinite alternate drift}.app-shell.light:before{opacity:.3}.app-shell:after{background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--star-color) 28%, transparent) 0, transparent 1.5px), radial-gradient(circle at 87% 53%, color-mix(in srgb, var(--star-color) 39%, transparent) 0, transparent 1.1px), radial-gradient(circle at 27% 76%, color-mix(in srgb, var(--star-color) 50%, transparent) 0, transparent 1.8px), radial-gradient(circle at 64% 0%, color-mix(in srgb, var(--star-color) 61%, transparent) 0, transparent 1.4px), radial-gradient(circle at 4% 23%, color-mix(in srgb, var(--star-color) 23%, transparent) 0, transparent 1px), radial-gradient(circle at 41% 46%, color-mix(in srgb, var(--star-color) 34%, transparent) 0, transparent 1.7px), radial-gradient(circle at 78% 69%, color-mix(in srgb, var(--star-color) 45%, transparent) 0, transparent 1.3px), radial-gradient(circle at 18% 92%, color-mix(in srgb, var(--star-color) 56%, transparent) 0, transparent .9px), radial-gradient(circle at 55% 16%, color-mix(in srgb, var(--star-color) 18%, transparent) 0, transparent 1.6px), radial-gradient(circle at 92% 39%, color-mix(in srgb, var(--star-color) 29%, transparent) 0, transparent 1.2px), radial-gradient(circle at 32% 62%, color-mix(in srgb, var(--star-color) 40%, transparent) 0, transparent .8px), radial-gradient(circle at 69% 85%, color-mix(in srgb, var(--star-color) 51%, transparent) 0, transparent 1.5px), radial-gradient(circle at 9% 9%, color-mix(in srgb, var(--star-color) 62%, transparent) 0, transparent 1.1px), radial-gradient(circle at 46% 32%, color-mix(in srgb, var(--star-color) 24%, transparent) 0, transparent 1.8px), radial-gradient(circle at 83% 55%, color-mix(in srgb, var(--star-color) 35%, transparent) 0, transparent 1.4px), radial-gradient(circle at 23% 78%, color-mix(in srgb, var(--star-color) 46%, transparent) 0, transparent 1px), radial-gradient(circle at 60% 2%, color-mix(in srgb, var(--star-color) 57%, transparent) 0, transparent 1.7px), radial-gradient(circle at 0% 25%, color-mix(in srgb, var(--star-color) 19%, transparent) 0, transparent 1.3px), radial-gradient(circle at 37% 48%, color-mix(in srgb, var(--star-color) 30%, transparent) 0, transparent .9px), radial-gradient(circle at 74% 71%, color-mix(in srgb, var(--star-color) 41%, transparent) 0, transparent 1.6px), radial-gradient(circle at 14% 94%, color-mix(in srgb, var(--star-color) 52%, transparent) 0, transparent 1.2px), radial-gradient(circle at 51% 18%, color-mix(in srgb, var(--star-color) 14%, transparent) 0, transparent .8px), radial-gradient(circle at 88% 41%, color-mix(in srgb, var(--star-color) 25%, transparent) 0, transparent 1.5px), radial-gradient(circle at 28% 64%, color-mix(in srgb, var(--star-color) 36%, transparent) 0, transparent 1.1px), radial-gradient(circle at 65% 87%, color-mix(in srgb, var(--star-color) 47%, transparent) 0, transparent 1.8px), radial-gradient(circle at 5% 11%, color-mix(in srgb, var(--star-color) 58%, transparent) 0, transparent 1.4px), radial-gradient(circle at 42% 34%, color-mix(in srgb, var(--star-color) 20%, transparent) 0, transparent 1px), radial-gradient(circle at 79% 57%, color-mix(in srgb, var(--star-color) 31%, transparent) 0, transparent 1.7px), radial-gradient(circle at 19% 80%, color-mix(in srgb, var(--star-color) 42%, transparent) 0, transparent 1.3px), radial-gradient(circle at 56% 4%, color-mix(in srgb, var(--star-color) 53%, transparent) 0, transparent .9px), radial-gradient(circle at 93% 27%, color-mix(in srgb, var(--star-color) 15%, transparent) 0, transparent 1.6px), radial-gradient(circle at 33% 50%, color-mix(in srgb, var(--star-color) 26%, transparent) 0, transparent 1.2px), radial-gradient(circle at 70% 73%, color-mix(in srgb, var(--star-color) 37%, transparent) 0, transparent .8px), radial-gradient(circle at 10% 96%, color-mix(in srgb, var(--star-color) 48%, transparent) 0, transparent 1.5px), radial-gradient(circle at 47% 20%, color-mix(in srgb, var(--star-color) 59%, transparent) 0, transparent 1.1px), radial-gradient(circle at 84% 43%, color-mix(in srgb, var(--star-color) 21%, transparent) 0, transparent 1.8px), radial-gradient(circle at 24% 66%, color-mix(in srgb, var(--star-color) 32%, transparent) 0, transparent 1.4px), radial-gradient(circle at 61% 89%, color-mix(in srgb, var(--star-color) 43%, transparent) 0, transparent 1px), radial-gradient(circle at 1% 13%, color-mix(in srgb, var(--star-color) 54%, transparent) 0, transparent 1.7px), radial-gradient(circle at 38% 36%, color-mix(in srgb, var(--star-color) 16%, transparent) 0, transparent 1.3px), radial-gradient(circle at 75% 59%, color-mix(in srgb, var(--star-color) 27%, transparent) 0, transparent .9px), radial-gradient(circle at 15% 82%, color-mix(in srgb, var(--star-color) 38%, transparent) 0, transparent 1.6px), radial-gradient(circle at 52% 6%, color-mix(in srgb, var(--star-color) 49%, transparent) 0, transparent 1.2px), radial-gradient(circle at 89% 29%, color-mix(in srgb, var(--star-color) 60%, transparent) 0, transparent .8px), radial-gradient(circle at 29% 52%, color-mix(in srgb, var(--star-color) 22%, transparent) 0, transparent 1.5px), radial-gradient(circle at 66% 75%, color-mix(in srgb, var(--star-color) 33%, transparent) 0, transparent 1.1px), radial-gradient(circle at 6% 98%, color-mix(in srgb, var(--star-color) 44%, transparent) 0, transparent 1.8px), radial-gradient(circle at 43% 22%, color-mix(in srgb, var(--star-color) 55%, transparent) 0, transparent 1.4px), radial-gradient(circle at 80% 45%, color-mix(in srgb, var(--star-color) 17%, transparent) 0, transparent 1px), radial-gradient(circle at 20% 68%, color-mix(in srgb, var(--star-color) 28%, transparent) 0, transparent 1.7px), radial-gradient(circle at 57% 91%, color-mix(in srgb, var(--star-color) 39%, transparent) 0, transparent 1.3px), radial-gradient(circle at 94% 15%, color-mix(in srgb, var(--star-color) 50%, transparent) 0, transparent .9px), radial-gradient(circle at 34% 38%, color-mix(in srgb, var(--star-color) 61%, transparent) 0, transparent 1.6px), radial-gradient(circle at 71% 61%, color-mix(in srgb, var(--star-color) 23%, transparent) 0, transparent 1.2px), radial-gradient(circle at 11% 84%, color-mix(in srgb, var(--star-color) 34%, transparent) 0, transparent .8px), radial-gradient(circle at 48% 8%, color-mix(in srgb, var(--star-color) 45%, transparent) 0, transparent 1.5px), radial-gradient(circle at 85% 31%, color-mix(in srgb, var(--star-color) 56%, transparent) 0, transparent 1.1px), radial-gradient(circle at 25% 54%, color-mix(in srgb, var(--star-color) 18%, transparent) 0, transparent 1.8px), radial-gradient(circle at 62% 77%, color-mix(in srgb, var(--star-color) 29%, transparent) 0, transparent 1.4px), radial-gradient(circle at 2% 1%, color-mix(in srgb, var(--star-color) 40%, transparent) 0, transparent 1px), radial-gradient(circle at 39% 24%, color-mix(in srgb, var(--star-color) 51%, transparent) 0, transparent 1.7px), radial-gradient(circle at 76% 47%, color-mix(in srgb, var(--star-color) 62%, transparent) 0, transparent 1.3px), radial-gradient(circle at 16% 70%, color-mix(in srgb, var(--star-color) 24%, transparent) 0, transparent .9px), radial-gradient(circle at 53% 93%, color-mix(in srgb, var(--star-color) 35%, transparent) 0, transparent 1.6px), radial-gradient(circle at 90% 17%, color-mix(in srgb, var(--star-color) 46%, transparent) 0, transparent 1.2px), radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--star-color) 57%, transparent) 0, transparent .8px), radial-gradient(circle at 67% 63%, color-mix(in srgb, var(--star-color) 19%, transparent) 0, transparent 1.5px), radial-gradient(circle at 7% 86%, color-mix(in srgb, var(--star-color) 30%, transparent) 0, transparent 1.1px), radial-gradient(circle at 44% 10%, color-mix(in srgb, var(--star-color) 41%, transparent) 0, transparent 1.8px), radial-gradient(circle at 81% 33%, color-mix(in srgb, var(--star-color) 52%, transparent) 0, transparent 1.4px), radial-gradient(circle at 21% 56%, color-mix(in srgb, var(--star-color) 14%, transparent) 0, transparent 1px), radial-gradient(circle at 58% 79%, color-mix(in srgb, var(--star-color) 25%, transparent) 0, transparent 1.7px), radial-gradient(circle at 95% 3%, color-mix(in srgb, var(--star-color) 36%, transparent) 0, transparent 1.3px), radial-gradient(circle at 35% 26%, color-mix(in srgb, var(--star-color) 47%, transparent) 0, transparent .9px), radial-gradient(circle at 72% 49%, color-mix(in srgb, var(--star-color) 58%, transparent) 0, transparent 1.6px), radial-gradient(circle at 12% 72%, color-mix(in srgb, var(--star-color) 20%, transparent) 0, transparent 1.2px), radial-gradient(circle at 49% 95%, color-mix(in srgb, var(--star-color) 31%, transparent) 0, transparent .8px), radial-gradient(circle at 86% 19%, color-mix(in srgb, var(--star-color) 42%, transparent) 0, transparent 1.5px), radial-gradient(circle at 26% 42%, color-mix(in srgb, var(--star-color) 53%, transparent) 0, transparent 1.1px), radial-gradient(circle at 63% 65%, color-mix(in srgb, var(--star-color) 15%, transparent) 0, transparent 1.8px);will-change:opacity;animation:6s ease-in-out infinite alternate twinkle;inset:0}.content-wrap{z-index:1;width:100%;position:relative}.shooting-stars{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.shooting-star{opacity:0;will-change:transform, opacity;background:linear-gradient(90deg,#fff 0%,#ffffff8c 35%,#0000 100%);border-radius:9999px;height:1.5px;position:absolute}.shooting-star:first-child{width:130px;animation:9s linear .8s infinite shoot;top:10%;left:72%}.shooting-star:nth-child(2){width:105px;animation:14s linear 5.4s infinite shoot;top:22%;left:88%}.shooting-star:nth-child(3){width:155px;animation:11s linear 9.2s infinite shoot;top:6%;left:58%}.app-shell.light .shooting-star{background:linear-gradient(90deg,#643cc8cc 0%,#643cc859 35%,#0000 100%)}.easter-egg-layer{z-index:2;pointer-events:none;--egg-x:50%;position:absolute;inset:0;overflow:hidden}.easter-ship,.easter-invader,.easter-laser,.easter-burst,.easter-chunks{position:absolute}.easter-ship{left:var(--egg-x);background:linear-gradient(#8ac7ff 0%,#6fa7ff 55%,#4f7ce8 100%);border-radius:999px;width:68px;height:24px;animation:4.2s ease-in-out forwards eggShipPath;bottom:14%;transform:translate(-50%,120vh);box-shadow:0 0 14px #78b4ff80}.easter-ship:before{content:"";background:linear-gradient(#daf1ff 0%,#9dc7ff 100%);border-radius:16px 16px 10px 10px;width:30px;height:16px;position:absolute;top:-10px;left:19px}.easter-ship:after{content:"";filter:blur(2px);background:#86cdff99;border-radius:999px;width:24px;height:6px;position:absolute;bottom:-6px;left:22px}.easter-invader{left:var(--egg-x);background:#8cff7a;border-radius:8px;width:54px;height:40px;animation:4.2s ease-in-out forwards eggInvaderPath;top:14%;transform:translate(-50%,-120vh);box-shadow:inset 0 -8px #4dbf4a,0 0 12px #73ff736b}.easter-invader:before,.easter-invader:after{content:"";background:#0d1f1c;border-radius:2px;width:8px;height:8px;position:absolute;top:12px}.easter-invader:before{left:14px}.easter-invader:after{right:14px}.easter-laser{left:var(--egg-x);transform-origin:bottom;opacity:0;background:linear-gradient(#8cdcfff2 0%,#78beffc7 70%,#78beff00 100%);width:3px;animation:4.2s linear forwards eggLaserPath;top:19%;bottom:calc(14% + 18px);transform:translate(-50%)scaleY(0);box-shadow:0 0 8px #7ecaffa6}.easter-burst{left:var(--egg-x);opacity:0;background:radial-gradient(circle,#dcf8fff2 0%,#7cceffb8 55%,#7cceff00 100%);border-radius:50%;width:14px;height:14px;animation:4.2s ease-out forwards eggBurstPath;top:calc(14% + 20px);transform:translate(-50%,-50%)scale(0);box-shadow:0 0 14px #8cdcff99}.easter-chunks{left:var(--egg-x);width:0;height:0;top:calc(14% + 20px)}.easter-chunk{--dx:0px;--dy:0px;--rot:0deg;--size:8px;width:var(--size);height:var(--size);opacity:0;background:linear-gradient(#b8ff97 0%,#5ed85f 100%);border-radius:2px;animation:4.2s ease-out forwards eggChunkPath;position:absolute;transform:translate(-50%,-50%)scale(.35)rotate(0);box-shadow:0 0 8px #73ff738c}.easter-chunk:first-child{--dx:-34px;--dy:-30px;--rot:-120deg;--size:7px}.easter-chunk:nth-child(2){--dx:12px;--dy:-38px;--rot:85deg;--size:9px}.easter-chunk:nth-child(3){--dx:38px;--dy:-12px;--rot:140deg;--size:8px}.easter-chunk:nth-child(4){--dx:-40px;--dy:6px;--rot:-95deg;--size:9px}.easter-chunk:nth-child(5){--dx:44px;--dy:8px;--rot:65deg;--size:7px}.easter-chunk:nth-child(6){--dx:-24px;--dy:34px;--rot:-165deg;--size:8px}.easter-chunk:nth-child(7){--dx:6px;--dy:42px;--rot:110deg;--size:7px}.easter-chunk:nth-child(8){--dx:30px;--dy:30px;--rot:75deg;--size:8px}.app-shell.light .easter-ship{background:linear-gradient(#6d5ed8 0%,#5f4fcd 55%,#4e3ead 100%);box-shadow:0 0 12px #6757d56b}.app-shell.light .easter-ship:before{background:linear-gradient(#efe9ff 0%,#c7b9ff 100%)}.app-shell.light .easter-invader{background:#32b667;box-shadow:inset 0 -8px #25884d,0 0 10px #3caa6459}.app-shell.light .easter-laser{background:linear-gradient(#7e64e0f2 0%,#6f52cbb8 70%,#6f52cb00 100%);box-shadow:0 0 8px #6f52cb8c}.app-shell.light .easter-burst{background:radial-gradient(circle,#ece4fff2 0%,#9d7effb8 55%,#9d7eff00 100%);box-shadow:0 0 14px #8f70ff8c}.app-shell.light .easter-chunk{background:linear-gradient(#c9b6ff 0%,#8063ea 100%);box-shadow:0 0 8px #9276ff80}.theme-toggle{color:#f7d26a;transition:color .8s,background-color .8s!important}.theme-toggle-icon{width:24px;height:24px;position:relative}.theme-toggle-icon .sun,.theme-toggle-icon .moon{transition:opacity .8s,transform .8s,color .8s;position:absolute;inset:0}.app-shell.dark .theme-toggle{color:#f7d26a}.app-shell.dark .theme-toggle-icon .sun{opacity:1;color:#f7d26a;transform:scale(1)rotate(0)}.app-shell.dark .theme-toggle-icon .moon{opacity:0;color:#8fa3ff;transform:scale(.6)rotate(-35deg)}.app-shell.light .theme-toggle{color:#4e5fcf}.app-shell.light .theme-toggle-icon .sun{opacity:0;color:#f7b84f;transform:scale(.6)rotate(35deg)}.app-shell.light .theme-toggle-icon .moon{opacity:1;color:#4e5fcf;transform:scale(1)rotate(0)}.project-card{border:1px solid var(--card-border);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);height:100%;transition:transform .3s,box-shadow .3s,border-color .3s,background-color linear,color linear;background-color:var(--card-bg)!important}.project-card:hover{border-color:#9f7aea8c;transform:translateY(-8px);box-shadow:0 14px 35px #161d3c3d}.MuiTypography-root{transition:color .8s!important}.MuiSvgIcon-root{transition:color .8s,fill .8s!important}.MuiInputBase-root,.MuiOutlinedInput-root,.MuiSelect-select{transition:color .8s,background-color .8s!important}.MuiOutlinedInput-notchedOutline{transition:border-color .8s!important}.MuiPaper-root:not(.project-card){transition:background-color .8s,color .8s!important}.MuiMenuItem-root{transition:color .8s,background-color .8s!important}@keyframes drift{0%{transform:translate(-2%,1.5%)scale(1)}30%{transform:translate(1.25%,-1%)scale(1.03)}60%{transform:translate(-.75%,2.25%)scale(.99)}to{transform:translate(1.75%,-1.5%)scale(1.05)}}@keyframes twinkle{0%{opacity:.5}to{opacity:1}}@keyframes shoot{0%,72%{opacity:0;transform:rotate(-35deg)translate(0)}76%{opacity:.3;transform:rotate(-35deg)translate(-84px)}82%{opacity:.9;transform:rotate(-35deg)translate(-210px)}88%{opacity:.4;transform:rotate(-35deg)translate(-336px)}92%{opacity:0;transform:rotate(-35deg)translate(-420px)}93%,to{opacity:0;transform:rotate(-35deg)translate(-440px)}}@keyframes eggShipPath{0%{transform:translate(-50%,120vh)}24%{transform:translate(-50%)}58%{transform:translate(-50%)}to{transform:translate(-50%,130vh)}}@keyframes eggInvaderPath{0%{opacity:1;filter:brightness();transform:translate(-50%,-120vh)scale(1)}20%{opacity:1;filter:brightness();transform:translate(-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-5%)scale(1)}54%{filter:brightness(1.7);transform:translate(-50%)scale(1.05)}60%{opacity:0;filter:brightness(1.35)blur(1px);transform:translate(-50%)scale(1.25)}to{opacity:0;filter:brightness()blur();transform:translate(-50%)scale(1.25)}}@keyframes eggLaserPath{0%,44%{opacity:0;transform:translate(-50%)scaleY(0)}50%{opacity:1;transform:translate(-50%)scaleY(1)}56%{opacity:0;transform:translate(-50%)scaleY(1)}to{opacity:0;transform:translate(-50%)scaleY(0)}}@keyframes eggBurstPath{0%,49%{opacity:0;transform:translate(-50%,-50%)scale(0);box-shadow:0 0 #8cdcff00}52%{opacity:1;transform:translate(-50%,-50%)scale(.7);box-shadow:0 0 16px #8cdcffcc,-18px -6px 0 -6px #8cdcffe6,16px -8px 0 -6px #8cdcffdb,-12px 14px 0 -7px #8cdcffd1,13px 11px 0 -7px #8cdcffcc}58%{opacity:.85;transform:translate(-50%,-50%)scale(1.3);box-shadow:0 0 20px #8cdcffa6,-24px -10px 0 -8px #8cdcffb8,22px -11px 0 -8px #8cdcffb3,-18px 20px 0 -9px #8cdcffa8,19px 17px 0 -9px #8cdcffa3}68%,to{opacity:0;transform:translate(-50%,-50%)scale(1.7);box-shadow:0 0 #8cdcff00}}@keyframes eggChunkPath{0%,49%{opacity:0;transform:translate(-50%,-50%)scale(.35)rotate(0)}52%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(0)}66%{opacity:.9;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.9) rotate(var(--rot))}to{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.7) rotate(var(--rot))}}
