@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700&display=swap');

:root {
    --bg: #0c0b10;
    --card: rgba(20, 18, 25, .68);
    --card-solid: #17151c;
    --text: #f2eef6;
    --muted: #aaa3b2;
    --dim: #77717d;
    --line: rgba(255, 255, 255, .09);
    --violet: #b69ade;
    --violet-bright: #d8c3f4;
    --olive: #aeb58f;
    --pointer-x: 50vw;
    --pointer-y: 50vh;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    min-height: 100svh;
    overflow: hidden;
    color: var(--text);
    background: var(--bg);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.scene { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 40%, #211b2b 0, #100e14 45%, #09090b 100%); }
.scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,5,8,.1), rgba(6,5,8,.72)), radial-gradient(circle at center, transparent 10%, rgba(5,4,7,.48) 90%); }
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .36; filter: saturate(.65) contrast(1.1); transform: scale(1.03); }
.aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .18; animation: wander 15s ease-in-out infinite alternate; }
.aurora-one { width: 42vw; height: 42vw; min-width: 400px; min-height: 400px; left: -10%; top: -15%; background: #7a5cac; }
.aurora-two { width: 36vw; height: 36vw; min-width: 350px; min-height: 350px; right: -8%; bottom: -16%; background: #66764c; animation-delay: -5s; }
.aurora-three { width: 24vw; height: 24vw; right: 18%; top: 4%; background: #734b70; animation-delay: -9s; }
.soft-mood .scene { background: radial-gradient(circle at 50% 40%, #272c22 0, #11140f 48%, #090a08 100%); }
.soft-mood .aurora-one { background: #868f72; }
.soft-mood .aurora-two { background: #9c789b; }
.cursor-light { position: absolute; inset: 0; background: radial-gradient(360px circle at var(--pointer-x) var(--pointer-y), rgba(204,178,239,.08), transparent 70%); z-index: 2; }
.noise { position: absolute; inset: -50%; z-index: 3; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); animation: grain .25s steps(2) infinite; }
.dust { position: absolute; inset: 0; z-index: 2; }
.dust i { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: rgba(237,225,249,.7); box-shadow: 0 0 10px rgba(216,195,244,.7); animation: float var(--speed) var(--delay) ease-in-out infinite; }

.gate { display: none; }
.js .gate { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #0b0a0e; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.js .entered .gate { opacity: 0; transform: scale(1.06); pointer-events: none; }
.gate-symbol { width: 88px; height: 88px; margin-bottom: 15px; display: grid; place-items: center; border: 1px solid rgba(216,195,244,.25); border-radius: 50%; position: relative; box-shadow: 0 0 60px rgba(182,154,222,.09); }
.gate-symbol::before, .gate-symbol::after { content: ''; position: absolute; inset: -8px; border: 1px solid rgba(255,255,255,.05); border-radius: 43% 57% 54% 46%; animation: orbit 8s linear infinite; }
.gate-symbol::after { inset: -17px; animation-direction: reverse; animation-duration: 12s; }
.gate-symbol span { font: 600 35px 'Unbounded', sans-serif; color: var(--violet-bright); text-transform: lowercase; }
.gate > p { margin: 0 0 24px; color: var(--dim); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; }
.gate button { min-width: 210px; padding: 15px 17px 15px 24px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(216,195,244,.22); border-radius: 15px; color: #18131d; background: linear-gradient(135deg, #d9c7ed, #a99ac1); font-weight: 700; cursor: pointer; box-shadow: 0 14px 45px rgba(130,96,168,.17); transition: transform .25s, box-shadow .25s; }
.gate button:hover { transform: translateY(-3px); box-shadow: 0 18px 60px rgba(157,122,196,.3); }
.gate button i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(24,19,29,.12); font-style: normal; }
.gate > small { color: #59545f; font-size: 10px; }

.topbar { position: fixed; z-index: 10; inset: 0 0 auto; height: 82px; padding: 0 clamp(22px, 4vw, 58px); display: flex; justify-content: space-between; align-items: center; }
.mini-logo { font: 600 16px 'Unbounded', sans-serif; letter-spacing: -.06em; }
.mini-logo b { color: var(--violet); }
.top-actions { display: flex; align-items: center; gap: 15px; }
.online { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: rgba(15,14,18,.35); backdrop-filter: blur(8px); font-size: 10px; }
.online i { width: 6px; height: 6px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 4px rgba(174,181,143,.1), 0 0 12px rgba(174,181,143,.6); }
.mood-button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(15,14,18,.35); backdrop-filter: blur(8px); color: var(--violet-bright); cursor: pointer; }
.music-control { display:flex; align-items:center; position:relative; }
.music-button { width:36px; height:36px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--violet-bright); background:rgba(15,14,18,.35); backdrop-filter:blur(8px); cursor:pointer; }
.equalizer { height:14px; display:flex; align-items:center; gap:2px; }
.equalizer i { width:2px; height:5px; border-radius:2px; background:currentColor; transform-origin:center; }
.music-button.is-playing .equalizer i { animation:equalize .8s ease-in-out infinite alternate; }
.music-button.is-playing .equalizer i:nth-child(2) { animation-delay:-.35s; }
.music-button.is-playing .equalizer i:nth-child(3) { animation-delay:-.6s; }
.volume-panel { position:absolute; top:45px; right:0; width:190px; padding:12px 14px; display:grid; gap:9px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:rgba(15,14,18,.88); backdrop-filter:blur(16px); opacity:0; transform:translateY(-5px); pointer-events:none; transition:opacity .2s,transform .2s; }
.music-control:hover .volume-panel,.music-control:focus-within .volume-panel { opacity:1; transform:none; pointer-events:auto; }
.volume-panel span { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.volume-panel input { width:100%; accent-color:var(--violet); }

.profile-stage { position: relative; z-index: 5; min-height: 100svh; padding: 90px 20px 55px; display: grid; place-items: center; }
.profile-card { --card-x: 50%; --card-y: 50%; width: min(100%, 640px); padding: clamp(25px, 4vw, 42px); border: 1px solid rgba(255,255,255,.11); border-radius: 30px; background: var(--card); box-shadow: 0 40px 120px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(24px) saturate(1.15); -webkit-backdrop-filter: blur(24px) saturate(1.15); position: relative; overflow: hidden; }
.card-shine { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(300px circle at var(--card-x) var(--card-y), rgba(255,255,255,.07), transparent 70%); transition: opacity .3s; }
.profile-card:hover .card-shine { opacity: 1; }
.profile-main { display: flex; align-items: center; gap: 27px; position: relative; }
.avatar-wrap { width: 126px; height: 126px; flex: 0 0 126px; padding: 4px; border: 1px solid rgba(216,195,244,.35); border-radius: 38px; position: relative; transform: rotate(-2deg); background: rgba(255,255,255,.025); box-shadow: 0 16px 45px rgba(0,0,0,.28), 0 0 30px rgba(182,154,222,.06); }
.avatar-wrap img, .avatar-letter { width: 100%; height: 100%; border-radius: 33px; object-fit: cover; }
.avatar-letter { display: grid; place-items: center; overflow: hidden; position: relative; color: #e7dcf3; background: radial-gradient(circle at 30% 25%, #7e6a94, #30283a 47%, #16131a); font: 600 52px 'Unbounded', sans-serif; text-transform: lowercase; }
.avatar-letter::before { content: ''; position: absolute; width: 90px; height: 130px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; transform: rotate(38deg); }
.avatar-letter span { position: absolute; right: 13px; top: 10px; color: var(--olive); font: 15px 'Inter'; }
.avatar-status { position: absolute; right: -3px; bottom: 12px; width: 16px; height: 16px; border: 4px solid #1a171f; border-radius: 50%; background: #9ba77d; box-sizing: content-box; }
.identity { min-width: 0; }
.name-row { display: flex; align-items: center; gap: 10px; }
.identity h1 { margin: 0; font: 700 clamp(33px, 6vw, 54px)/1 'Unbounded', sans-serif; letter-spacing: -.08em; background: linear-gradient(125deg, #f4eff8 20%, #c9b3e4 82%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spark { color: var(--olive); font-size: 17px; animation: twinkle 2.5s ease-in-out infinite; }
.identity > p { margin: 13px 0 11px; color: #c5becb; font-size: clamp(12px, 2vw, 14px); line-height: 1.55; }
.tiny-location { color: var(--dim); font-size: 10px; text-transform: lowercase; }
.tiny-location span { color: var(--violet); font-size: 15px; }
.bio { margin: 29px 0 0; padding: 23px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.75; position: relative; }
.skill-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.skill-cloud span { padding: 7px 10px; border-radius: 9px; color: #958d9d; background: rgba(255,255,255,.035); font-size: 9px; transition: color .2s, background .2s; }
.skill-cloud span:hover { color: var(--violet-bright); background: rgba(182,154,222,.08); }
.actions { display: flex; gap: 10px; margin-top: 26px; position: relative; }
.write-button { min-height: 48px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 14px; color: #211928; background: linear-gradient(135deg, #d6c3eb, #a897c0); font-weight: 700; font-size: 12px; box-shadow: 0 10px 35px rgba(146,112,183,.17); transition: transform .25s, filter .25s; }
.write-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.write-button svg { width: 17px; fill: currentColor; }
.icon-button { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; color: #b8b0bf; background: rgba(255,255,255,.035); cursor: pointer; position: relative; transition: transform .25s, color .25s, background .25s, border-color .25s; }
.icon-button:hover { transform: translateY(-3px); color: var(--violet-bright); background: rgba(182,154,222,.09); border-color: rgba(182,154,222,.28); }
.icon-button svg { width: 19px; fill: currentColor; }
.icon-button::after { content: attr(data-tip); position: absolute; left: 50%; bottom: -28px; padding: 4px 7px; border-radius: 5px; color: #b8b0bf; background: #0c0b0e; font-size: 8px; opacity: 0; transform: translate(-50%, -3px); pointer-events: none; transition: opacity .2s, transform .2s; }
.icon-button:hover::after { opacity: 1; transform: translate(-50%, 0); }
.projects-button b { position: absolute; right: -4px; top: -5px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 20px; color: #17131b; background: var(--olive); font-size: 8px; }
.card-footer { margin-top: 30px; display: flex; align-items: center; gap: 11px; color: #625c68; font-size: 8px; letter-spacing: .12em; text-transform: lowercase; }
.decor-line { height: 1px; flex: 1; background: linear-gradient(90deg, var(--line), transparent); }
.page-note { position: fixed; z-index: 5; right: clamp(22px, 4vw, 58px); bottom: 25px; margin: 0; color: #4e4953; font-size: 8px; letter-spacing: .12em; }

.projects-dialog { width: min(92vw, 780px); max-height: min(82vh, 760px); padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 26px; color: var(--text); background: rgba(20,18,25,.92); box-shadow: 0 50px 160px rgba(0,0,0,.75); backdrop-filter: blur(28px); overflow: hidden; }
.projects-dialog::backdrop { background: rgba(5,4,7,.7); backdrop-filter: blur(8px); }
.projects-dialog[open] { animation: dialog-in .35s ease both; }
.dialog-head { padding: 28px 30px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.dialog-head span { color: var(--violet); font-size: 8px; text-transform: uppercase; letter-spacing: .18em; }
.dialog-head h2 { margin: 6px 0 0; font: 600 27px 'Unbounded', sans-serif; letter-spacing: -.06em; }
.dialog-head button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; font-size: 23px; cursor: pointer; }
.project-list { max-height: calc(82vh - 100px); padding: 12px; overflow-y: auto; }
.project-item { padding: 13px; display: grid; grid-template-columns: 125px 1fr auto; gap: 18px; align-items: center; border-radius: 16px; transition: background .2s; }
.project-item:hover { background: rgba(255,255,255,.04); }
.project-cover { width: 125px; aspect-ratio: 4/3; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg,#332a3d,#1b181e); }
.project-cover img { width: 100%; height: 100%; object-fit: cover; }
.project-cover span { color: rgba(255,255,255,.16); font: 500 30px 'Unbounded'; }
.project-info { min-width: 0; }
.project-info small { color: var(--violet); font-size: 8px; text-transform: uppercase; letter-spacing: .13em; }
.project-info h3 { margin: 5px 0; font-size: 16px; }
.project-info p { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-item > i { color: var(--violet); font-style: normal; }
.empty-projects { min-height: 350px; padding: 50px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-projects > span { color: var(--violet); font-size: 50px; opacity: .55; }
.empty-projects h3 { margin: 12px 0 8px; font: 600 24px 'Unbounded'; letter-spacing: -.06em; }
.empty-projects p { max-width: 420px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.empty-projects a { margin-top: 24px; color: var(--violet-bright); font-size: 11px; }

.js .topbar, .js .profile-card, .js .page-note { opacity: 0; }
.js .profile-card { transform: translateY(35px) scale(.96); }
.js .entered .topbar, .js .entered .page-note { opacity: 1; transition: opacity .8s .35s; }
.js .entered .profile-card { opacity: 1; transform: none; transition: opacity .8s .2s, transform .9s .2s cubic-bezier(.16,1,.3,1); }

@keyframes wander { to { transform: translate(8vw, 5vh) scale(1.12); } }
@keyframes grain { 0% { transform: translate(0); } 25% { transform: translate(2%,-3%); } 50% { transform: translate(-3%,2%); } 75% { transform: translate(3%,3%); } }
@keyframes float { 0%,100% { transform: translateY(0); opacity: .15; } 50% { transform: translateY(-25px); opacity: .65; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes twinkle { 50% { opacity: .35; transform: scale(.75) rotate(35deg); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(15px) scale(.97); } }
@keyframes equalize { from { height:4px; } to { height:14px; } }

@media (max-width: 620px) {
    .topbar { height: 68px; padding: 0 18px; }
    .online { max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .top-actions { gap:8px; }
    .volume-panel { right:-44px; }
    .profile-stage { padding: 76px 13px 42px; }
    .profile-card { padding: 23px 19px; border-radius: 24px; }
    .profile-main { gap: 17px; align-items: center; }
    .avatar-wrap { width: 88px; height: 88px; flex-basis: 88px; border-radius: 28px; }
    .avatar-wrap img, .avatar-letter { border-radius: 24px; }
    .avatar-letter { font-size: 36px; }
    .identity h1 { font-size: clamp(27px, 9vw, 39px); }
    .identity > p { font-size: 10px; margin: 8px 0; }
    .tiny-location { font-size: 8px; }
    .bio { margin-top: 22px; padding-top: 18px; font-size: 11px; }
    .skill-cloud { margin-top: 15px; }
    .skill-cloud span { font-size: 8px; }
    .actions { margin-top: 20px; }
    .write-button { flex: 1; padding: 0 15px; }
    .icon-button { flex: 0 0 45px; width: 45px; height: 45px; }
    .card-footer { margin-top: 24px; }
    .page-note { display: none; }
    .projects-dialog { width: calc(100vw - 20px); max-height: 88vh; border-radius: 22px; }
    .dialog-head { padding: 22px 20px 18px; }
    .project-list { max-height: calc(88vh - 90px); }
    .project-item { grid-template-columns: 85px 1fr auto; gap: 12px; padding: 10px; }
    .project-cover { width: 85px; }
    .project-info p { max-width: 46vw; }
}

@media (max-width: 390px) {
    .profile-card { padding: 20px 15px; }
    .profile-main { gap: 13px; }
    .avatar-wrap { width: 76px; height: 76px; flex-basis: 76px; }
    .identity h1 { font-size: 27px; }
    .actions { gap: 7px; }
    .icon-button { flex-basis: 42px; width: 42px; height: 44px; }
    .write-button { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .js .entered .profile-card, .js .entered .topbar, .js .entered .page-note { transition: none; }
}