body {
   font-family: Arial, Helvetica, sans-serif;
   margin: 0;
   padding: 0;
   background-color: #050510;
   color: #e8e8ff;
   overflow-x: hidden;
}
.space-bg {
   position: fixed;
   inset: 0;
   z-index: -2;
   background: radial-gradient(ellipse at 30% 20%, #12142b 0%, #050510 60%, #020207 100%);
   overflow: hidden;
}
#spaceCanvas {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
}
.nebula {
   position: absolute;
   border-radius: 50%;
   filter: blur(60px);
   opacity: 0.5;
   animation: nebulaPulse 10s ease-in-out infinite;
}
.nebula-1 {
   width: 500px;
   height: 500px;
   top: -120px;
   right: -120px;
   background: radial-gradient(circle, rgba(88, 40, 140, 0.55) 0%, transparent 70%);
}
.nebula-2 {
   width: 600px;
   height: 600px;
   bottom: -180px;
   left: -160px;
   background: radial-gradient(circle, rgba(26, 120, 160, 0.45) 0%, transparent 70%);
   animation-delay: 3s;
}
@keyframes nebulaPulse {
   0%, 100% { opacity: 0.35; transform: scale(1); }
   50% { opacity: 0.6; transform: scale(1.15); }
}
.black-hole {
   position: fixed;
   width: 320px;
   height: 320px;
   right: -90px;
   bottom: -90px;
   z-index: -1;
   border-radius: 50%;
   background: conic-gradient(from 0deg,
       rgba(120, 80, 255, 0.9),
       rgba(20, 20, 60, 0.9),
       rgba(120, 80, 255, 0.9),
       rgba(60, 30, 140, 0.9),
       rgba(120, 80, 255, 0.9));
   filter: blur(8px);
   animation: holeSpin 16s linear infinite;
   box-shadow:
       0 0 60px rgba(120, 80, 255, 0.35),
       0 0 120px rgba(120, 80, 255, 0.2);
}
.black-hole-core {
   position: absolute;
   inset: 55px;
   border-radius: 50%;
   background: #000;
   box-shadow: inset 0 0 40px rgba(0, 0, 0, 1);
}
@keyframes holeSpin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}
header {
   position: relative;
   background: linear-gradient(180deg, rgba(10, 12, 30, 0.85), rgba(20, 15, 45, 0.7));
   color: white;
   padding: 70px 20px;
   text-align: center;
   border-bottom: 1px solid rgba(120, 80, 255, 0.4);
   box-shadow: 0 0 40px rgba(120, 80, 255, 0.15);
   backdrop-filter: blur(4px);
   overflow: hidden;
}
header h1 {
   margin: 0 0 8px 0;
   font-size: 42px;
   letter-spacing: 3px;
   background: linear-gradient(120deg, #e879f9 0%, #9f8cff 25%, #ffffff 50%, #9f8cff 75%, #e879f9 100%);
   background-size: 250% auto;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
   animation: titleShine 7s linear infinite;
   filter: drop-shadow(0 0 16px rgba(180, 130, 255, 0.55));
}
header p {
   margin: 0;
   color: #b9b3e6;
}
header::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background-image:
      radial-gradient(1px 1px at 20% 30%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 60% 20%, #fff, transparent),
      radial-gradient(1px 1px at 82% 62%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 40% 75%, #fff, transparent),
      radial-gradient(1px 1px at 10% 88%, #fff, transparent),
      radial-gradient(1px 1px at 72% 90%, #fff, transparent);
   opacity: 0.5;
   animation: dustTwinkle 5s ease-in-out infinite alternate;
}
@keyframes titleShine {
   0% { background-position: 0% center; }
   100% { background-position: -250% center; }
}
@keyframes dustTwinkle {
   from { opacity: 0.25; }
   to { opacity: 0.65; }
}
.profile-badge {
   position: absolute;
   left: 34px;
   top: 50%;
   transform: translateY(-50%);
   text-align: center;
   pointer-events: none;
   z-index: 2;
   perspective: 600px;
}
.profile-3d {
   position: relative;
   width: 92px;
   height: 92px;
   margin: 0 auto;
   transform-style: preserve-3d;
   animation: badgeFloat 6s ease-in-out infinite, badgeSway 10s ease-in-out infinite;
}
.profile-ring {
   position: relative;
   width: 92px;
   height: 92px;
   border-radius: 50%;
   padding: 3px;
   background: conic-gradient(from 0deg, #e879f9, #7c5cff, #1abc9c, #f59e0b, #e879f9);
   animation: ringSpin 6s linear infinite;
   box-shadow:
      0 0 18px rgba(180, 130, 255, 0.6),
      0 0 42px rgba(180, 130, 255, 0.22),
      0 14px 30px rgba(0, 0, 0, 0.5);
}
.profile-pic {
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover;
}
.profile-gloss {
   position: absolute;
   inset: 3px;
   border-radius: 50%;
   background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 42%);
   box-shadow:
      inset -8px -8px 18px rgba(0, 0, 0, 0.55),
      inset 6px 6px 14px rgba(255, 255, 255, 0.18);
}
.profile-orbit {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 150px;
   height: 150px;
   margin: -75px 0 0 -75px;
   border-radius: 50%;
   border: 1px solid rgba(160, 140, 255, 0.45);
   box-shadow: 0 0 12px rgba(140, 120, 255, 0.45);
   transform-style: preserve-3d;
   animation: orbitSpin3d 11s linear infinite;
}
.profile-moon {
   position: absolute;
   top: -4px;
   left: 50%;
   width: 8px;
   height: 8px;
   margin-left: -4px;
   border-radius: 50%;
   background: radial-gradient(circle at 30% 30%, #ffffff, #8ecbff 60%, #27406e);
   box-shadow: 0 0 10px rgba(140, 200, 255, 0.9);
}
.profile-title {
   display: block;
   margin-top: 8px;
   font-size: 10px;
   letter-spacing: 3px;
   color: #c9b8ff;
   text-shadow: 0 0 10px rgba(180, 130, 255, 0.65);
}
@keyframes ringSpin {
   from { filter: hue-rotate(0deg); }
   to { filter: hue-rotate(360deg); }
}
@keyframes badgeFloat {
   0%, 100% { margin-top: 0; }
   50% { margin-top: -7px; }
}
@keyframes badgeSway {
   0%, 100% { transform: rotateY(-18deg) rotateX(6deg); }
   50% { transform: rotateY(18deg) rotateX(-6deg); }
}
@keyframes orbitSpin3d {
   from { transform: rotateX(72deg) rotateZ(0deg); }
   to { transform: rotateX(72deg) rotateZ(360deg); }
}
.aurora {
   position: absolute;
   border-radius: 50%;
   filter: blur(70px);
   pointer-events: none;
}
.aurora-1 {
   width: 560px;
   height: 300px;
   left: 6%;
   top: -140px;
   background: radial-gradient(ellipse, rgba(120, 80, 255, 0.55), transparent 70%);
   animation: auroraDrift 12s ease-in-out infinite alternate;
}
.aurora-2 {
   width: 420px;
   height: 260px;
   right: 0;
   bottom: -110px;
   background: radial-gradient(ellipse, rgba(26, 188, 156, 0.4), transparent 70%);
   animation: auroraDrift 16s ease-in-out infinite alternate-reverse;
}
@keyframes auroraDrift {
   from { transform: translateX(-30px) scale(1); }
   to { transform: translateX(30px) scale(1.15); }
}
.hero-system {
   position: absolute;
   top: 50%;
   right: 9%;
   width: 200px;
   height: 200px;
   transform: translateY(-50%);
   pointer-events: none;
}
.hero-star {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 48px;
   height: 48px;
   margin: -24px 0 0 -24px;
   border-radius: 50%;
   background: radial-gradient(circle, #ffffff 0%, #ffdf9a 35%, rgba(255, 180, 90, 0.2) 60%, transparent 70%);
   box-shadow:
      0 0 26px rgba(255, 220, 150, 0.7),
      0 0 70px rgba(255, 190, 110, 0.35);
   animation: starPulse 3.5s ease-in-out infinite;
}
.hero-orbit {
   position: absolute;
   top: 50%;
   left: 50%;
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 50%;
}
.orbit-1 {
   width: 130px;
   height: 130px;
   margin: -65px 0 0 -65px;
   animation: orbitSpin 14s linear infinite;
}
.orbit-2 {
   width: 184px;
   height: 184px;
   margin: -92px 0 0 -92px;
   animation: orbitSpin 26s linear infinite reverse;
}
.hero-moon {
   position: absolute;
   top: 0;
   left: 50%;
   width: 15px;
   height: 15px;
   margin: -7px 0 0 -7px;
   border-radius: 50%;
}
.moon-1 {
   background: radial-gradient(circle at 30% 30%, #ffffff, #8ecbff 55%, #27406e);
   box-shadow: 0 0 10px rgba(140, 200, 255, 0.9);
}
.moon-2 {
   width: 12px;
   height: 12px;
   margin: -6px 0 0 -6px;
   background: radial-gradient(circle at 30% 30%, #ffe2c0, #e8893d 60%, #6b2f12);
   box-shadow: 0 0 10px rgba(255, 170, 90, 0.8);
}
@keyframes orbitSpin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}
@keyframes starPulse {
   0%, 100% { transform: scale(1); opacity: 1; }
   50% { transform: scale(1.14); opacity: 0.85; }
}
.hero-comet {
   position: absolute;
   top: 55%;
   left: 62%;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 0 12px #fff;
   opacity: 0;
   animation: cometShoot 9s ease-in infinite;
}
.hero-comet::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 100%;
   width: 90px;
   height: 2px;
   background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
   transform: translateY(-50%);
}
@keyframes cometShoot {
   0% { transform: translate(0, 0); opacity: 0; }
   4% { opacity: 1; }
   13% { transform: translate(-250px, 160px); opacity: 0; }
   100% { transform: translate(-250px, 160px); opacity: 0; }
}
.scroll-hint {
   position: absolute;
   bottom: 12px;
   left: 50%;
   transform: translateX(-50%);
   color: rgba(205, 199, 255, 0.75);
   text-decoration: none;
   animation: hintBob 2s ease-in-out infinite;
}
.scroll-hint svg {
   display: block;
   filter: drop-shadow(0 0 6px rgba(180, 130, 255, 0.6));
}
@keyframes hintBob {
   0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
   50% { transform: translate(-50%, 7px); opacity: 1; }
}
@media (max-width: 820px) {
   .hero-system { display: none; }
   header { padding: 46px 16px; }
}
@media (max-width: 700px) {
   .profile-badge { display: none; }
}
nav {
   background-color: rgba(10, 8, 25, 0.9);
   overflow: hidden;
   position: sticky;
   top: 0;
   z-index: 100;
   border-bottom: 1px solid rgba(120, 80, 255, 0.25);
   backdrop-filter: blur(6px);
}
nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}
nav ul li {
   padding: 14px 18px;
}
nav ul li a {
   color: #cdc7ff;
   text-decoration: none;
   display: block;
   transition: color 0.3s, text-shadow 0.3s;
}
nav ul li a:hover {
   background-color: rgba(120, 80, 255, 0.25);
   color: white;
   text-shadow: 0 0 12px rgba(180, 130, 255, 0.9);
}
main {
   padding: 20px;
   max-width: 900px;
   margin: 0 auto;
}
section {
   margin-bottom: 20px;
}
section h2 {
   color: #9f8cff;
   text-shadow: 0 0 15px rgba(120, 80, 255, 0.35);
}
section h2::after {
   content: "";
   display: block;
   width: 60px;
   height: 3px;
   margin-top: 6px;
   background: linear-gradient(90deg, #1abc9c, #7c5cff);
   border-radius: 2px;
}
footer {
   background-color: rgba(10, 8, 25, 0.9);
   text-align: center;
   padding: 20px;
   border-top: 1px solid rgba(120, 80, 255, 0.25);
   color: #b9b3e6;
}
#skills ul {
   list-style-type: disc;
   margin: 10px 0 0 20px;
   columns: 3;
}
#skills li {
   padding: 4px 0;
}
.form-group {
   margin-bottom: 15px;
}
.form-group label {
   display: block;
   margin-bottom: 5px;
   font-weight: bold;
   color: #cdc7ff;
}
.form-group input,
.form-group textarea {
   width: 100%;
   max-width: 500px;
   padding: 10px;
   border: 2px solid rgba(120, 80, 255, 0.4);
   border-radius: 4px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   box-sizing: border-box;
   background-color: rgba(10, 8, 30, 0.8);
   color: #e8e8ff;
   transition: border-color 0.3s, box-shadow 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
   border-color: #1abc9c;
   outline: none;
   box-shadow: 0 0 12px rgba(26, 188, 156, 0.4);
}
.error {
   color: #ff6b6b;
   font-size: 13px;
   margin-top: 4px;
   display: block;
   min-height: 16px;
}
#submitButton {
   background: linear-gradient(135deg, #1abc9c, #7c5cff);
   color: white;
   border: none;
   padding: 12px 30px;
   border-radius: 4px;
   font-size: 16px;
   cursor: pointer;
   transition: transform 0.3s, box-shadow 0.3s;
}
#submitButton:hover {
   transform: translateY(-2px);
   box-shadow: 0 0 20px rgba(124, 92, 255, 0.6);
}
.folder-btn {
   display: inline-block;
   background: linear-gradient(135deg, #1abc9c, #7c5cff);
   color: white;
   text-decoration: none;
   padding: 12px 24px;
   border-radius: 4px;
   font-size: 15px;
   margin-right: 10px;
   transition: transform 0.3s, box-shadow 0.3s;
}
.folder-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 0 20px rgba(124, 92, 255, 0.6);
}
.folder-btn.secondary {
   background: rgba(120, 80, 255, 0.2);
   border: 1px solid rgba(120, 80, 255, 0.5);
}
.folder-btn.secondary:hover {
   background: rgba(120, 80, 255, 0.35);
}
.preview-card {
   position: relative;
   width: 360px;
   max-width: 100%;
   margin: 15px 0;
   border: 3px solid #7c5cff;
   border-radius: 10px;
   overflow: hidden;
   cursor: pointer;
   box-shadow: 0 0 0 rgba(124, 92, 255, 0);
   transition: transform 0.3s, box-shadow 0.3s;
}
.preview-card:hover {
   transform: scale(1.03);
   box-shadow: 0 0 24px rgba(124, 92, 255, 0.55);
}
.preview-card canvas {
   display: block;
   width: 100%;
   height: auto;
}
.preview-card .preview-label {
   position: absolute;
   top: 8px;
   left: 8px;
   background: rgba(0, 0, 0, 0.7);
   color: #e879f9;
   font-family: monospace;
   font-size: 11px;
   letter-spacing: 1px;
   padding: 3px 8px;
   border-radius: 4px;
}
.preview-card .preview-play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: rgba(0, 0, 0, 0.65);
   color: #fff;
   border: 2px solid #1abc9c;
   padding: 10px 24px;
   border-radius: 50px;
   font-size: 18px;
   opacity: 0;
   transition: opacity 0.3s;
   pointer-events: none;
}
.preview-card:hover .preview-play {
   opacity: 1;
}
.project-item {
   background: rgba(12, 10, 30, 0.85);
   border-left: 4px solid #7c5cff;
   padding: 15px 20px;
   margin-bottom: 15px;
   border-radius: 4px;
   box-shadow: 0 0 20px rgba(120, 80, 255, 0.08);
}
.project-item h3 {
   margin: 0 0 5px 0;
   color: #1abc9c;
}
.project-item p {
   margin: 0 0 10px 0;
   color: #cdc7ff;
}
.preview-box {
   width: 340px;
   max-width: 100%;
   margin: 10px 0;
   border: 2px solid #7c5cff;
   border-radius: 8px;
   overflow: hidden;
   background: #000;
   transition: box-shadow 0.3s, transform 0.3s;
}
.preview-box:hover {
   box-shadow: 0 0 18px rgba(124, 92, 255, 0.5);
   transform: scale(1.02);
}
.preview-box img {
   display: block;
   width: 100%;
   height: auto;
}
.preview-caption {
   color: #fff;
   font-size: 12px;
   text-align: center;
   padding: 6px;
   background: linear-gradient(135deg, #1abc9c, #7c5cff);
}
body.fade-out {
   animation: fadeOut 0.6s forwards;
}
@keyframes fadeOut {
   from { opacity: 1; transform: translateY(0); }
   to { opacity: 0; transform: translateY(-20px); }
}
body.shake {
   animation: shake 0.5s;
}
@keyframes shake {
   0%, 100% { transform: translateX(0); }
   20%, 60% { transform: translateX(-8px); }
   40%, 80% { transform: translateX(8px); }
}
body.success-page {
   margin: 0;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: radial-gradient(ellipse at 30% 20%, #12142b 0%, #050510 60%, #020207 100%);
   animation: fadeIn 0.8s;
}
@keyframes fadeIn {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
}
.success-box {
   background: rgba(14, 12, 34, 0.9);
   padding: 40px;
   border-radius: 10px;
   box-shadow: 0 0 40px rgba(124, 92, 255, 0.35);
   text-align: center;
   max-width: 500px;
   border: 1px solid rgba(124, 92, 255, 0.4);
   color: #e8e8ff;
}
.success-icon {
   width: 70px;
   height: 70px;
   margin: 0 auto 15px;
   background: linear-gradient(135deg, #1abc9c, #7c5cff);
   color: white;
   font-size: 36px;
   line-height: 70px;
   border-radius: 50%;
   box-shadow: 0 0 20px rgba(26, 188, 156, 0.6);
}
.right-stack {
   position: fixed;
   top: 42%;
   right: 28px;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 210px;
   z-index: 5;
   pointer-events: none;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.35s ease, visibility 0.35s ease;
}
body.scrolled .right-stack {
   opacity: 1;
   visibility: visible;
}
.wx-card {
   font-family: Arial, Helvetica, sans-serif;
   background: rgba(10, 8, 30, 0.6);
   border: 1px solid rgba(140, 120, 255, 0.35);
   border-radius: 12px;
   padding: 14px 16px;
   color: #eae4ff;
   backdrop-filter: blur(6px);
   box-shadow:
      0 0 24px rgba(120, 80, 255, 0.18),
      inset 0 0 20px rgba(120, 80, 255, 0.08);
}
.wx-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 6px;
}
.wx-city {
   font-size: 11px;
   letter-spacing: 2px;
   color: #9fdcb0;
}
.wx-emoji {
   font-size: 22px;
   line-height: 1;
}
.wx-temp {
   font-size: 34px;
   font-weight: bold;
   line-height: 1.1;
   text-shadow: 0 0 14px rgba(180, 160, 255, 0.5);
}
.wx-desc {
   font-size: 12px;
   color: #cdc7ff;
   margin: 2px 0 10px;
}
.wx-meta {
   display: flex;
   justify-content: space-between;
   font-size: 11px;
   color: #8f86c9;
   margin-bottom: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid rgba(140, 120, 255, 0.2);
}
.wx-clock {
   font-family: Consolas, "Courier New", monospace;
   font-size: 20px;
   color: #eae4ff;
   text-shadow: 0 0 10px rgba(180, 160, 255, 0.5);
}
.wx-date {
   font-size: 11px;
   color: #cdc7ff;
   margin-top: 3px;
}
.hud {
   font-family: Consolas, "Courier New", monospace;
   background: rgba(10, 8, 30, 0.55);
   border: 1px solid rgba(140, 120, 255, 0.35);
   border-radius: 12px;
   padding: 12px 14px;
   color: #cdc7ff;
   backdrop-filter: blur(6px);
   box-shadow:
      0 0 24px rgba(120, 80, 255, 0.18),
      inset 0 0 20px rgba(120, 80, 255, 0.08);
}
.hud-head {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 11px;
   letter-spacing: 2px;
   color: #9fdcb0;
   margin-bottom: 10px;
   padding-bottom: 8px;
   border-bottom: 1px solid rgba(140, 120, 255, 0.2);
}
.hud-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #3ee68b;
   box-shadow: 0 0 8px #3ee68b;
   animation: hudBlink 1.6s ease-in-out infinite;
}
@keyframes hudBlink {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.45; }
}
.hud-row {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin: 7px 0;
   font-size: 12px;
}
.hud-label {
   color: #8f86c9;
   font-size: 10px;
   letter-spacing: 1px;
}
.hud-value {
   color: #eae4ff;
   text-shadow: 0 0 8px rgba(180, 160, 255, 0.5);
}
.hud-signal {
   display: flex;
   align-items: flex-end;
   gap: 3px;
   height: 26px;
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px solid rgba(140, 120, 255, 0.2);
}
.hud-signal span {
   width: 5px;
   border-radius: 1px;
   background: linear-gradient(180deg, #7c5cff, rgba(26, 188, 156, 0.4));
   animation: signalBar 1s ease-in-out infinite;
}
.hud-signal span:nth-child(1) { height: 6px; animation-delay: 0s; }
.hud-signal span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.hud-signal span:nth-child(3) { height: 9px; animation-delay: 0.3s; }
.hud-signal span:nth-child(4) { height: 17px; animation-delay: 0.45s; }
.hud-signal span:nth-child(5) { height: 22px; animation-delay: 0.6s; }
@keyframes signalBar {
   0%, 100% { transform: scaleY(0.6); opacity: 0.6; }
   50% { transform: scaleY(1.1); opacity: 1; }
}
@media (max-width: 900px) {
   .right-stack {
      position: static;
      transform: none;
      width: min(340px, 92%);
      margin: 14px auto 0;
      opacity: 1;
      visibility: visible;
   }
}