:root {
   --bg: #0b0d13;
   --accent: #7c5cff;
   --card: rgba(255, 255, 255, 0.06);
   --card2: rgba(255, 255, 255, 0.045);
   --stroke: rgba(255, 255, 255, 0.10);
   --text: rgba(255, 255, 255, 0.92);
   --muted: rgba(255, 255, 255, 0.66);
   --muted2: rgba(255, 255, 255, 0.52);
   --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
   --radius: 18px;
   --radius2: 14px;
 }
 
 * { box-sizing: border-box; }
 html, body { height: 100%; }
 body {
   margin: 0;
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   background: var(--bg);
   color: var(--text);
   line-height: 1.55;
 }
 
 a { color: inherit; text-decoration: none; }
 a:hover { text-decoration: none; }
 
 .bg {
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background:
     radial-gradient(1200px 600px at 20% -10%, rgba(124, 92, 255, 0.25), transparent 55%),
     radial-gradient(900px 600px at 90% 10%, rgba(255, 122, 166, 0.16), transparent 60%),
     radial-gradient(1100px 700px at 70% 120%, rgba(122, 255, 195, 0.10), transparent 55%),
     radial-gradient(700px 300px at 25% 20%, rgba(124, 92, 255, 0.20), transparent 70%),
     radial-gradient(800px 320px at 75% 30%, rgba(255, 122, 166, 0.14), transparent 70%),
     radial-gradient(900px 360px at 50% 90%, rgba(122, 255, 195, 0.10), transparent 70%),
     var(--bg);
   filter: blur(0px);
   opacity: 1;
 }
 
 header, main {
   position: relative;
   z-index: 1;
 }
 
 .container {
   width: min(1120px, calc(100% - 40px));
   margin: 0 auto;
 }
 
 .topbar {
   position: sticky;
   top: 0;
   z-index: 50;
   backdrop-filter: blur(14px);
   background: linear-gradient(to bottom, rgba(11, 13, 19, 0.86), rgba(11, 13, 19, 0.35));
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .topbar__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 14px 0;
 }
 
 .brand {
   display: inline-flex;
   gap: 10px;
   align-items: center;
   font-weight: 800;
   letter-spacing: -0.02em;
 }
 
 .brand__dot {
   width: 12px;
   height: 12px;
   border-radius: 999px;
   background: radial-gradient(circle at 30% 30%, #fff, var(--accent));
   box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.16);
 }
 
 .brand__name { opacity: 0.95; }
 
 .nav {
   display: flex;
   gap: 14px;
   padding: 6px 10px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.03);
 }
 
 .nav a {
   color: var(--muted);
   font-weight: 600;
   font-size: 14px;
   padding: 6px 8px;
   border-radius: 12px;
 }
 
 .nav a:hover {
   color: var(--text);
   background: rgba(255, 255, 255, 0.05);
 }
 
 .topbar__cta {
   display: flex;
   gap: 10px;
   align-items: center;
 }
 
 .button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 14px;
   border-radius: 14px;
   background: linear-gradient(135deg, rgba(124, 92, 255, 0.95), rgba(124, 92, 255, 0.70));
   color: rgba(255, 255, 255, 0.95);
   border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow: 0 10px 28px rgba(124, 92, 255, 0.18);
   font-weight: 700;
   cursor: pointer;
   font-family: inherit;
 }
 
 .button:hover { filter: brightness(1.03); transform: translateY(-1px); }
 .button:active { transform: translateY(0px); }
 
 .button--ghost {
   background: rgba(255, 255, 255, 0.04);
   box-shadow: none;
   color: rgba(255, 255, 255, 0.88);
   border-color: rgba(255, 255, 255, 0.10);
 }
 
 .hero {
   padding: 48px 0 16px;
 }
 
 .hero__grid {
   display: grid;
   grid-template-columns: 1.2fr 0.8fr;
   gap: 18px;
   align-items: start;
 }
 
 @media (max-width: 980px) {
   .nav { display: none; }
   .hero__grid { grid-template-columns: 1fr; }
 }
 
 .pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.80);
   font-weight: 700;
   font-size: 13px;
 }
 
 .hero__title {
   margin: 14px 0 8px;
   font-size: clamp(36px, 4vw, 56px);
   line-height: 1.05;
   letter-spacing: -0.04em;
 }
 
 .hero__subtitle {
   margin: 0 0 16px;
   font-size: 16px;
   color: var(--muted);
 }
 
 .hero__meta {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin: 16px 0;
 }
 
 @media (max-width: 640px) {
   .hero__meta { grid-template-columns: 1fr; }
 }
 
 .meta {
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(255, 255, 255, 0.03);
   border-radius: var(--radius2);
   padding: 12px;
 }
 
 .meta__label { font-size: 12px; color: var(--muted2); font-weight: 700; }
 .meta__value { margin-top: 4px; font-weight: 700; }
 
 .hero__actions {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
 }
 
 .notice {
   margin-top: 16px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
   border-radius: var(--radius);
   padding: 14px;
 }
 
 .notice__title { font-weight: 800; letter-spacing: -0.02em; }
 .notice__body { color: var(--muted); margin-top: 4px; }
 
 .card {
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(255, 255, 255, 0.03);
   border-radius: var(--radius);
   padding: 16px;
 }
 
 .card--glass {
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
   backdrop-filter: blur(16px);
   box-shadow: var(--shadow);
 }
 
 .card__kicker {
   font-size: 12px;
   color: var(--muted2);
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.12em;
 }
 
 .card__title {
   font-weight: 900;
   letter-spacing: -0.02em;
   margin-bottom: 6px;
 }
 
 .card__body { color: var(--muted); }
 
 .divider {
   height: 1px;
   background: rgba(255, 255, 255, 0.10);
   margin: 14px 0;
 }
 
 .profile {
   display: flex;
   gap: 12px;
   align-items: center;
 }
 
 .profile__avatar {
   width: 52px;
   height: 52px;
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.06);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .profile__avatarFallback {
   font-weight: 900;
   letter-spacing: -0.04em;
   color: rgba(255, 255, 255, 0.90);
 }
 
 .profile__name { font-weight: 900; letter-spacing: -0.02em; }
 .profile__headline { color: var(--muted); font-weight: 600; font-size: 13px; }
 
 .company {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
 .company__logo {
   width: 44px;
   height: 44px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.2);
 }
 
 .company__name { font-weight: 900; }
 .company__role { color: var(--muted); font-weight: 600; font-size: 13px; }
 
 .affiliations {
   display: grid;
   gap: 10px;
 }
 
 .affiliation {
   display: flex;
   align-items: center;
   gap: 12px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(255, 255, 255, 0.03);
   border-radius: 16px;
   padding: 12px;
 }
 
 .affiliation__logo {
   width: 40px;
   height: 40px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.22);
 }
 
 .affiliation__name { font-weight: 900; }
 .affiliation__role { color: var(--muted); font-weight: 650; font-size: 13px; margin-top: 2px; }
 
 .miniGrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
 }
 
 .mini {
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(255, 255, 255, 0.03);
   border-radius: 16px;
   padding: 12px;
 }

 .mini__label { font-size: 12px; color: var(--muted2); font-weight: 800; }
 .mini__value { margin-top: 4px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }

 .statusDot {
   width: 12px;
   height: 12px;
   border-radius: 999px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
 }

 .statusDot--dnd {
   background: #ed4245;
   box-shadow: 0 0 0 3px rgba(237, 66, 69, 0.18);
 }

 .statusDot--online {
   background: #23a55a;
   box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.18);
 }

 .statusDot--idle {
   background: #f0b132;
   box-shadow: 0 0 0 3px rgba(240, 177, 50, 0.18);
 }

 .statusDot--offline {
   background: rgba(255, 255, 255, 0.20);
   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
 }

 .statusDot--dnd::after {
   content: "";
   width: 7px;
   height: 3px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.95);
 }

 .miniCover {
   width: 28px;
   height: 28px;
   border-radius: 9px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.22);
   object-fit: cover;
   display: none;
 }

 #nowMusicText {
   display: -webkit-box;
   line-clamp: 2;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 210px;
   line-height: 1.18;
 }

 .section {
   padding: 40px 0;
 }

 .section__head {
   margin-bottom: 14px;
 }
 
 .section__head h2 {
   margin: 0;
   font-size: 24px;
   letter-spacing: -0.03em;
 }
 
 .section__head p {
   margin: 6px 0 0;
   color: var(--muted);
 }
 
 .grid3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
 }
 
 @media (max-width: 980px) {
   .grid3 { grid-template-columns: 1fr; }
 }
 
 .grid2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
 
 @media (max-width: 980px) {
   .grid2 { grid-template-columns: 1fr; }
 }
 
 .stack {
   display: grid;
   gap: 12px;
 }
 
 .skills {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
 }
 
 @media (max-width: 980px) {
   .skills { grid-template-columns: 1fr; }
 }
 
 .skill {
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(255, 255, 255, 0.03);
   border-radius: var(--radius);
   padding: 14px;
 }
 
 .skill__top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
 }
 
 .skill__name { font-weight: 900; letter-spacing: -0.02em; }
 .skill__lvl { color: var(--muted2); font-weight: 900; font-size: 12px; letter-spacing: 0.08em; }
 
 .skill__bar {
   margin-top: 10px;
   height: 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .skill__fill {
   height: 100%;
   background: linear-gradient(90deg, rgba(124, 92, 255, 1), rgba(255, 122, 166, 0.85));
   width: 0%;
 }
 
 .xp {
   display: flex;
   gap: 12px;
   align-items: center;
 }
 
 .xp__logo {
   width: 44px;
   height: 44px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.2);
 }
 
 .xp__title { font-weight: 900; letter-spacing: -0.02em; }
 .xp__dates { color: var(--muted2); font-weight: 700; font-size: 13px; margin-top: 2px; }
 .xp__desc { margin-top: 10px; color: var(--muted); }
 
 .project {
   display: block;
   transition: transform 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
 }
 
 .project:hover {
   transform: translateY(-2px);
   border-color: rgba(124, 92, 255, 0.35);
   background: rgba(255, 255, 255, 0.04);
 }
 
 .project__name { font-weight: 900; letter-spacing: -0.02em; }
 .project__desc { margin-top: 6px; color: var(--muted); }
 
 .tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
 .tag {
   font-size: 12px;
   font-weight: 800;
   color: rgba(255, 255, 255, 0.80);
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(255, 255, 255, 0.03);
   padding: 6px 10px;
   border-radius: 999px;
 }
 
 .presence {
   margin-top: 10px;
   display: grid;
   gap: 10px;
 }
 
 .presence__row {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(255, 255, 255, 0.03);
   border-radius: 14px;
   padding: 10px 12px;
 }
 
 .presence__label { color: var(--muted2); font-weight: 800; font-size: 12px; }
 .presence__value { font-weight: 800; text-align: right; }
 
 .music { margin-top: 10px; }
 .music__row { display: flex; gap: 12px; align-items: center; }
 .music__text { min-width: 0; }
 .music__cover {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.22);
   object-fit: cover;
   flex: 0 0 auto;
   display: none;
 }
 .music__track { font-weight: 900; letter-spacing: -0.02em; }
 .music__meta { margin-top: 6px; color: var(--muted); }
 .music__bar {
   margin-top: 12px;
   height: 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
 .music__barFill {
   height: 100%;
   background: linear-gradient(90deg, rgba(124, 92, 255, 1), rgba(255, 122, 166, 0.85));
   width: 0%;
 }
 
 .hint {
   margin-top: 10px;
   color: var(--muted2);
   font-size: 13px;
 }
 
 .contact {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
 }
 
 @media (max-width: 980px) {
   .contact { grid-template-columns: 1fr; }
 }
 
 .contact__label { font-size: 12px; color: var(--muted2); font-weight: 800; }
 .contact__value { margin-top: 6px; font-weight: 800; word-break: break-word; }
 
 .footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   margin-top: 18px;
   padding-top: 16px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--muted);
 }
 
 .footer a { color: rgba(255, 255, 255, 0.80); font-weight: 700; }
 
 .input {
   width: 100%;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.18);
   color: var(--text);
   padding: 10px 12px;
   font-family: inherit;
   font-weight: 600;
 }
 
 .input:focus {
   outline: none;
   border-color: rgba(124, 92, 255, 0.55);
   box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15);
 }
 
 .input--area { resize: vertical; }
 
 code {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.95em;
   color: rgba(255, 255, 255, 0.88);
 }