:root {
    --bg: #0c0c0f;
    --panel: #121217;
    --panel2: #16161c;
    --text: #f4f4f5;
    --muted: #a4a4ad;
    --line: #24242c;
    --pink: #ff3ea5;
    --yellow: #ffe44d;
    --blue: #4aa3ff;
    --ease: cubic-bezier(.2,.8,.2,1)
}

* { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height: 1.5;
    overflow-x: hidden
}

a { color: inherit }

button { font: inherit }

.ambient {
    position: fixed;
    inset: -22vmax;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(ellipse at 52% 46%,rgba(255,255,255,.11),transparent 7%),radial-gradient(ellipse at 66% 38%,rgba(255,62,165,.20),transparent 28%),radial-gradient(ellipse at 28% 68%,rgba(74,163,255,.15),transparent 34%),radial-gradient(ellipse at 54% 60%,rgba(255,228,77,.075),transparent 33%),linear-gradient(135deg,#090910 0%,#0c0c0f 46%,#05060a 100%);
    background-size: 100% 100%,140% 140%,150% 150%,130% 130%,100% 100%;
    filter: saturate(1.25);
    animation: ambient-drift 24s var(--ease) infinite alternate;
    z-index: -1
}

.ambient::before {
    content: "";
    position: absolute;
    inset: 6vmax -4vmax;
    background: radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.28) 0 1.5%,rgba(255,228,77,.20) 2.5%,transparent 8%),repeating-conic-gradient(from 22deg at 50% 50%,transparent 0 18deg,rgba(255,62,165,.22) 22deg 35deg,transparent 42deg 63deg,rgba(74,163,255,.20) 69deg 83deg,transparent 92deg 118deg,rgba(255,228,77,.12) 128deg 139deg,transparent 148deg 180deg);
    border-radius: 50%;
    filter: blur(15px) saturate(1.45);
    mask-image: radial-gradient(ellipse at 50% 50%,black 0 54%,transparent 74%);
    opacity: .76;
    transform: rotate(-14deg) scale(1.12);
    transform-origin: center;
    animation: galaxy-spin 120s linear infinite
}

.ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 16% 24%,rgba(255,255,255,.92) 0 1px,transparent 1.8px),radial-gradient(circle at 78% 18%,rgba(210,232,255,.72) 0 1px,transparent 1.9px),radial-gradient(circle at 67% 66%,rgba(255,244,188,.62) 0 1px,transparent 1.7px),radial-gradient(circle at 31% 78%,rgba(255,255,255,.52) 0 1px,transparent 1.8px),radial-gradient(circle at 44% 37%,rgba(255,255,255,.72) 0 1.4px,transparent 2.5px),radial-gradient(circle at 88% 72%,rgba(196,221,255,.54) 0 1.2px,transparent 2.3px);
    background-size: 190px 190px,250px 250px,310px 310px,370px 370px,430px 430px,520px 520px;
    background-position: 0 0,40px 80px,120px 30px,30px 170px,260px 90px,90px 240px;
    mix-blend-mode: screen;
    opacity: .58;
    animation: star-drift 38s linear infinite
}

.star-canvas { position: absolute; inset: 22vmax; width: 100vw; height: 100vh; display: block; mix-blend-mode: screen; opacity: .95 }

@keyframes ambient-drift {
    0% { background-position: 0% 0%,100% 20%,0% 85%,40% 20%,0% 0% }
    50% { background-position: 45% 30%,60% 70%,35% 65%,70% 45%,0% 0% }
    100% { background-position: 95% 80%,10% 95%,80% 30%,25% 80%,0% 0% }
}

@keyframes galaxy-spin { from { transform: rotate(-14deg) scale(1.12) } to { transform: rotate(346deg) scale(1.12) } }

@keyframes star-drift {
    from { background-position: 0 0,40px 80px,120px 30px,30px 170px,260px 90px,90px 240px; transform: translate3d(0,0,0) }
    to { background-position: 190px 260px,290px 20px,430px 340px,400px 560px,690px 420px,610px 700px; transform: translate3d(-2%,1.5%,0) }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 76px;
    background: rgba(12,12,15,.78);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    padding: 0 max(24px,calc((100vw - 1180px)/2));
    gap: 40px
}

.brand { font-weight: 1000; font-size: 22px; letter-spacing: -1.5px; text-decoration: none; display: inline-flex; gap: 0; text-transform: uppercase; font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
.brand span { display: inline-block }
.brand-p { color: var(--pink)!important }
.brand-f { color: var(--yellow)!important }
.brand-b { color: var(--blue)!important }

.site-header nav { display: flex; gap: 8px }
.nav-link { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; text-decoration: none; color: var(--muted); transition: .22s var(--ease) }
.nav-link b { font-size: 15px }
.nav-link span { font-size: 14px }
.nav-link:hover,.nav-link.active { color: var(--text); background: #17171d; transform: translateY(-1px) }
.pink b { color: var(--pink) }
.yellow b { color: var(--yellow) }
.blue b { color: var(--blue) }

.menu { display: none; margin-left: auto; background: none; color: white; border: 0; font-size: 24px }

.hero,.page-intro,.section,.social-grid,.notice { max-width: 1180px; margin: auto }
.hero { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; padding: 70px 24px }

.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; color: #8e8e99; margin: 0 0 17px; display: flex; align-items: center; gap: 9px }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block }
.pink-bg { background: var(--pink); box-shadow: 0 0 18px rgba(255,62,165,.65) }
.yellow-bg { background: var(--yellow); box-shadow: 0 0 18px rgba(255,228,77,.65) }
.blue-bg { background: var(--blue); box-shadow: 0 0 18px rgba(74,163,255,.65) }

.timezone { display: flex; align-items: center; gap: 8px; margin: -8px 0 24px 14px; color: #6f6f79; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums }
.timezone span { white-space: nowrap }
.timezone-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: #9d6cff; box-shadow: 0 0 12px rgba(157,108,255,.7) }
#local-time { color: #a8a8b0 }
#timezone-name { color: #878791 }

h1 { font-size: clamp(52px,8vw,94px); line-height: .92; letter-spacing: -.065em; margin: 0 0 24px }
h1 em { font-style: normal; color: #777780 }
.lead { max-width: 640px; color: var(--muted); font-size: 17px }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px }
.chips span { border: 1px solid var(--line); background: #111116; border-radius: 999px; padding: 7px 12px; font-size: 12px; color: #c6c6ce }

.hero-mark { justify-self: end; font-size: clamp(110px,22vw,270px); font-weight: 1000; line-height: .7; letter-spacing: -.2em; transform: rotate(-8deg); user-select: none; opacity: .9 }
.hero-mark .p { color: var(--pink) }
.hero-mark .f { color: var(--yellow) }
.hero-mark .b { color: var(--blue) }

.section { padding: 90px 24px }
.section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 26px }
.section h2,.about h2 { margin: 0; font-size: clamp(32px,4vw,52px); letter-spacing: -.05em }
.section-no { font-size: 12px; color: #5f5f68 }

.work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px }

.card {
    background: rgba(18,18,23,.86);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    transition: transform .25s var(--ease),border-color .25s;
}

.work-card {
    appearance: none;
    width: 100%;
    color: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer
}

.card:hover { transform: translateY(-5px); border-color: #373741 }
.work-card:focus-visible,.project-tab:focus-visible,.back-button:focus-visible,.browser-close:focus-visible,.project-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px }

.thumb { height: 230px; padding: 22px; display: flex; flex-direction: column; justify-content: end; background: #101015; position: relative; overflow: hidden }
.thumb:after { content: ""; position: absolute; inset: auto -20% -55% -20%; height: 170px; background: currentColor; opacity: .13; filter: blur(20px); transform: rotate(-7deg) }
.thumb span,.thumb strong { position: relative; z-index: 1 }
.thumb span { font-size: 10px; letter-spacing: .16em; color: #9c9ca5 }
.thumb strong { font-size: 25px; letter-spacing: -.04em }
.minecraft { color: var(--pink); background: linear-gradient(135deg,#171218,#101015) }
.roblox { color: var(--yellow); background: linear-gradient(135deg,#171713,#101015) }
.misc { color: var(--blue); background: linear-gradient(135deg,#11151a,#101015) }

.card-body { padding: 20px }
.card-body h3 { margin: 0 0 8px; font-size: 19px }
.card-body p { margin: 0; color: var(--muted); font-size: 14px }
.pink-accent { --accent: var(--pink) }
.yellow-accent { --accent: var(--yellow) }
.blue-accent { --accent: var(--blue) }

/* Project browser */
.project-browser {
    margin-top: 22px;
    border: 1px solid var(--line);
    background: rgba(18,18,23,.84);
    border-radius: 24px;
    overflow: hidden
}

.project-browser-head {
    padding: 27px 28px 22px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    border-bottom: 1px solid var(--line)
}

.project-browser-head h2 { margin: -6px 0 0; font-size: clamp(32px,4vw,52px); letter-spacing: -.05em }
.browser-eyebrow { margin-bottom: 10px }

.back-button,.browser-close {
    border: 1px solid var(--line);
    background: #111116;
    color: #cfcfd6;
    cursor: pointer;
    transition: .22s var(--ease)
}

.back-button {
    border-radius: 999px;
    padding: 7px 11px;
    margin-bottom: 18px;
    font-size: 12px
}

.back-button:hover,.browser-close:hover { border-color: #3a3a44; color: var(--text); transform: translateY(-1px) }

.browser-close { width: 40px; height: 40px; border-radius: 13px; font-size: 28px; line-height: 1; flex: 0 0 auto }

.project-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(11,11,15,.45)
}

.project-tab {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: #83838d;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: .22s var(--ease);
    font-size: 13px
}

.project-tab:hover { color: var(--text); background: #17171d }
.project-tab.active { color: var(--text); border-color: var(--line); background: #17171d }

.project-list { display: grid; gap: 14px; padding: 18px }

.project-entry {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(12,12,16,.65);
    border-radius: 20px
}

.project-banner {
    height: 190px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,#22141e,#0d0e12 68%,#10141c)
}

.project-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    opacity: .84;
    filter: saturate(.9) contrast(1.08)
}

.project-banner:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.15) 45%,rgba(0,0,0,.66))
}

.project-content {
    position: relative;
    padding: 0 22px 22px;
}

.project-icon-wrap {
    margin-top: -40px;
    position: relative;
    z-index: 3;
}

.project-icon {
    width: 78px;
    height: 78px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: #16161c;
    overflow: hidden;
    position: relative;
    z-index: 3;
    box-shadow: 0 12px 30px rgba(0,0,0,.38)
}

.project-icon img { width: 100%; height: 100%; display: block; object-fit: cover }
.project-title {
    display: block;
    margin: 14px 0 0;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -.04em
}

.project-description {
    color: var(--muted);
    margin: 26px 0 44px;
    max-width: 850px;
    font-size: 14px
}

.project-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 17px }
.project-badge { border: 1px solid var(--line); background: #111116; border-radius: 999px; padding: 6px 10px; font-size: 11px; color: #bdbdc5 }

.project-details { display: grid; gap: 8px; margin-bottom: 17px }
.project-detail-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; font-size: 13px }
.project-detail-row strong { color: #8a8a95; font-weight: 700 }
.project-detail-row span,.project-detail-row a { color: #d6d6dc; text-decoration: none; overflow-wrap: anywhere }
.project-detail-row a:hover { text-decoration: underline }

.plugin-branch {
    margin-top: 16px;
    border: 1px solid var(--line);
    background: rgba(22,22,28,.72);
    border-radius: 17px;
    padding: 16px
}

.plugin-branch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px }
.plugin-branch-head strong { font-size: 14px }
.plugin-branch-head a { color: #c7c7cf; text-decoration: none; font-size: 12px }
.plugin-branch-head a:hover { text-decoration: underline }
.plugin-branch p { margin: 0; color: var(--muted); font-size: 13px }

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    background: #17171d;
    color: #e2e2e7;
    border-radius: 999px;
    padding: 8px 12px;
    text-decoration: none;
    font-size: 12px;
    transition: .22s var(--ease)
}
.project-link:hover { border-color: #42424b; transform: translateY(-1px) }
.discord-button { margin-top: 14px; }

.empty-projects { padding: 45px 22px 48px; text-align: center }
.empty-projects strong { font-size: 17px }
.empty-projects p { color: var(--muted); font-size: 13px; margin: 5px 0 0 }

.about { padding-top: 30px }
.about-box,.notice { border: 1px solid var(--line); background: rgba(18,18,23,.78); border-radius: 24px; padding: 28px }
.about-box { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end }
.about-box h2 span { color: var(--pink) }
.about-box>p { color: var(--muted); margin: 0 }
.page-intro { padding: 100px 24px 45px }
.art-section { max-width: 1180px; margin: auto; padding: 0 24px 80px }
.artist-group { margin-bottom: 45px }
.artist-head { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px }
.artist-head span { font-weight: 800 }
.artist-head small { color: #6f6f79 }
.artist-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px }
.art-card { padding: 0; border: 0; background: var(--panel); border-radius: 18px; overflow: hidden; aspect-ratio: 1/1.15; position: relative; cursor: pointer; border: 1px solid var(--line) }
.art-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease),filter .35s }
.art-card:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6)); opacity: 0; transition: .25s }
.art-card:hover img { transform: scale(1.035) }
.art-card:hover:after { opacity: 1 }
.zoom { position: absolute; right: 12px; bottom: 10px; color: #fff; font-size: 11px; z-index: 2; opacity: 0; transform: translateY(5px); transition: .25s }
.art-card:hover .zoom { opacity: 1; transform: none }
.notice { max-width: 1132px; margin: 0 auto 85px; color: #b5b5bd }
.notice strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 6px }
.notice p { margin: 0; font-size: 13px }
.notice small { display: block; color: #70707b; margin-top: 10px; font-size: 11px }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 24px 45px }
.social { min-height: 108px; padding: 23px; border: 1px solid var(--line); background: rgba(18,18,23,.82); border-radius: 20px; text-decoration: none; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 15px; transition: .24s var(--ease); position: relative; overflow: hidden }
.social:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .85 }
.social:hover { transform: translateY(-4px); border-color: #3a3a44 }
.social-icon { width: 45px; height: 45px; border-radius: 14px; display: grid; place-items: center; background: #191920; color: var(--accent); font-weight: 900 }
.social small { display: block; color: #74747e; font-size: 11px; text-transform: uppercase; letter-spacing: .1em }
.social strong { display: block; margin-top: 2px; font-size: 17px }
.arrow { color: #6d6d77 }
.email-card { grid-column: 1/-1 }
.ip { max-width: 1132px }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; opacity: 0; transition: .18s }
.lightbox.show { opacity: 1 }
.lightbox img { max-width: min(100%,900px); max-height: 80vh; border-radius: 14px; object-fit: contain }
.lightbox>div { margin-top: 11px; color: #bbb; font-size: 13px }
.light-close { position: absolute; right: 25px; top: 16px; border: 0; background: none; color: #fff; font-size: 38px; cursor: pointer }

footer { max-width: 1180px; margin: auto; padding: 20px 24px 45px; color: #5f5f67; font-size: 11px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.05) }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease),transform .7s var(--ease) }
.reveal.visible { opacity: 1; transform: none }

@media(max-width: 850px) {
    .site-header { padding:0 18px }
    .site-header nav { position: absolute; top: 76px; left: 0; right: 0; background: rgba(12,12,15,.96); padding: 10px 14px; display: none; border-bottom: 1px solid var(--line) }
    .site-header nav.open { display: flex }
    .menu { display: block }
    .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 90px }
    .hero-mark { justify-self: start; margin-top: 80px }
    .work-grid,.artist-grid { grid-template-columns: repeat(2,1fr) }
    .about-box { grid-template-columns: 1fr }
    .social-grid { grid-template-columns: 1fr }
    .email-card { grid-column: auto }
}

@media(max-width: 520px) {
    .hero { padding:75px 18px }
    .section,.page-intro,.art-section,.social-grid { padding-left: 18px; padding-right: 18px }
    .work-grid,.artist-grid { grid-template-columns: 1fr }
    .thumb { height: 205px }
    .site-header { height: 68px }
    .site-header nav { top: 68px }
    .page-intro { padding-top: 75px }
    .project-browser-head { padding: 22px 20px 19px }
    .project-tabs { overflow-x: auto }
    .project-list { padding: 13px }
    .project-banner { height: 150px }
    .project-content { padding-left: 17px; padding-right: 17px }
    .project-detail-row { grid-template-columns: 84px 1fr }
    footer { padding-left: 18px; padding-right: 18px; gap: 15px; flex-direction: column }
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior: auto!important; animation: none!important; transition: none!important }
}