:root {
    --bg:#08090d;
    --panel:rgba(255,255,255,.045);
    --panel-border:rgba(255,255,255,.09);
    --text:#f1f3f8;
    --muted:#9aa3b8;
    --tint:120,120,120;
    --tint-strong:120,120,120;
    --mono:'JetBrains Mono', ui-monospace, monospace;
    --sans:'Inter', system-ui, sans-serif;
}
* {
    box-sizing:border-box;
}

::-webkit-scrollbar {
    display: none;
}

html {
    scroll-behavior:smooth;
}

@media (prefers-reduced-motion: reduce) {
    html{
        scroll-behavior:auto;
    }
    *{
        animation-duration:.001ms !important; 
        transition-duration:.001ms !important;
    }
}

body {
    margin:0; 
    background:var(--bg); 
    color:var(--text);
    font-family:var(--sans); 
    line-height:1.5; 
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
}

a {
    color:inherit;
}

:focus-visible {
    outline:2px solid rgb(var(--tint-strong)); 
    outline-offset:3px; 
    border-radius:4px;
}

img {
    max-width:100%; 
    display:block;
}

.wrap {
    max-width:980px; 
    margin:0 auto; 
    padding:0 24px;
}

.bg-layer {
    position:fixed; 
    inset:0; 
    z-index:-3; 
    overflow:hidden; 
    background:var(--bg);
}
.bg-code{
    position:absolute; inset:-6% -6%;
    margin:0; padding:24px;
    left: 20px;
    font-family:var(--mono); font-size:12.5px; line-height:1.55;
    white-space:pre-wrap; word-break:break-word;
    transform:scale(1.03);
    transition:color 1s ease, text-shadow 1s ease;
    color:rgba(var(--tint-strong),.65);
    text-shadow:
        0 0 6px rgba(var(--tint-strong),.85),
        0 0 22px rgba(var(--tint-strong),.55),
        0 0 60px rgba(var(--tint-strong),.35);
    filter:blur(1.6px);
}
.bg-tint {
    position:absolute; inset:0;
    background:radial-gradient(900px 620px at 50% 30%, rgba(var(--tint-strong),.16), transparent 68%);
    transition:background 1s ease;
}
.bg-scrim   {
    position:absolute; inset:0;
    background:
        linear-gradient(180deg, rgba(8,9,13,.62) 0%, rgba(8,9,13,.5) 30%, rgba(8,9,13,.82) 100%);
}

.topbar {
    position:sticky; 
    top:0; 
    z-index:40; 
    backdrop-filter:blur(10px); 
    border-bottom:1px solid var(--panel-border);
}
.topbar-inner {
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    padding:14px 0;
}

.brand-mini {
    display:flex; 
    align-items:center; 
    gap:9px; 
    font-family:var(--mono); 
    font-weight:700; 
    font-size:14px;
}
.brand-dot {
    width:9px; 
    height:9px; 
    border-radius:50%; 
    background:rgb(var(--tint-strong)); 
    box-shadow:0 0 10px rgba(var(--tint-strong),.8);
}

.btn {
    font-family:var(--mono); 
    font-size:13px; 
    text-decoration:none; 
    cursor:pointer;
    padding:10px 16px; 
    border-radius:9px; 
    border:1px solid var(--panel-border);
    color:var(--text); 
    background:var(--panel); 
    backdrop-filter:blur(8px);
    transition:border-color .15s ease, transform .15s ease, background .15s ease;
    display:inline-flex; 
    align-items:center; 
    gap:6px;
}
.btn:hover {
    border-color:rgba(var(--tint-strong),.7); 
    transform:translateY(-1px);
}
.btn.primary {
    background:rgb(var(--tint-strong)); 
    border-color:rgb(var(--tint-strong)); 
    color:#0a0a0a; 
    font-weight:700;
}
.btn.primary:hover {
    filter:brightness(1.1);
}
.btn.ghost {
    background:transparent;
}


.profile-view {
    padding-bottom:70px;
}
.profile-head {
    padding:56px 0 40px; 
    text-align:center; 
    display:flex; 
    flex-direction:column; 
    align-items:center;
}
.avatar{
    width:112px; 
    height:112px; 
    border-radius:26px; 
    object-fit:cover;
    border:2px solid rgba(var(--tint-strong),.6);
    box-shadow:0 20px 50px -20px rgba(var(--tint-strong),.5);
    background:var(--panel);
}
h1 {
    font-family:var(--mono); 
    font-size:clamp(24px,4vw,34px); 
    margin:18px 0 2px; 
    font-weight:700;
}
.handle {
    color:rgb(var(--tint-strong)); 
    font-family:var(--mono); 
    font-size:14px; 
    margin:0 0 14px;
}
.bio {
    color:var(--muted); 
    max-width:52ch; 
    margin:0 0 20px; 
    font-size:15px;
}
.stat-row {
    display:flex; 
    gap:22px; 
    font-family:var(--mono); 
    font-size:13px; 
    color:var(--muted); 
    margin-bottom:22px; 
    flex-wrap:wrap; 
    justify-content:center;
}
.stat-row b {
    color:var(--text);
}
.cta-row {
    display:flex; 
    gap:12px; 
    flex-wrap:wrap; 
    justify-content:center;
}

.about-section {
    padding:52px 0 20px;
}
.about-card {
    background:var(--panel); 
    border:1px solid var(--panel-border); 
    border-radius:16px;
    padding:24px 26px; 
    backdrop-filter:blur(10px); 
    text-align:left;
    font-size:14.5px;
}
.about-card h1,.about-card h2,.about-card h3 {
    font-family:var(--mono); 
    line-height:1.3; 
    margin:20px 0 8px;
}
.about-card h1:first-child,.about-card h2:first-child,.about-card h3:first-child {
    margin-top:0;
}
.about-card p {
    margin:0 0 12px; 
    color:#d7dbe6;
}
.about-card a {
    color:rgb(var(--tint-strong)); 
    text-decoration:underline;
}
.about-card code {
    font-family:var(--mono); 
    background:rgba(255,255,255,.08); 
    padding:1px 5px; 
    border-radius:4px; 
    font-size:.9em;
}
.about-card pre {
    background:rgba(255,255,255,.05); 
    border:1px solid var(--panel-border); 
    border-radius:8px; 
    padding:12px 14px; 
    overflow-x:auto; 
    margin:0 0 14px;
}
.about-card pre code {
    background:none; 
    padding:0;
}
.about-card ul,.about-card ol {
    margin:0 0 12px; 
    padding-left:22px; 
    color:#d7dbe6;
}
.about-card img {
    border-radius:8px; 
    margin:8px 0; 
    max-width:100%;
}
.about-card hr {
    border:none; 
    border-top:1px solid var(--panel-border); 
    margin:18px 0;
}

.section-head {
    display:flex; 
    align-items:baseline; 
    gap:10px; 
    margin-bottom:20px;
}
.section-head h2 {
    font-family:var(--mono); 
    font-size:20px; 
    margin:0;
}
.count {
    color:var(--muted); 
    font-family:var(--mono); 
    font-size:12.5px;
}

.repo-grid {
    display:grid; 
    grid-template-columns:repeat(2,1fr); 
    gap:16px;
}
@media (max-width:680px) {
    .repo-grid {
        grid-template-columns:1fr;
    }
}

.repo-card{
    background:var(--panel); 
    border:1px solid var(--panel-border); 
    border-radius:16px;
    overflow:hidden; 
    cursor:pointer; 
    text-align:left; 
    color:var(--text);
    display:flex; 
    flex-direction:column;
    transition:transform .18s ease, border-color .18s ease;
    backdrop-filter:blur(10px);
}
.repo-card:hover {
    transform:translateY(-3px); 
    border-color:rgba(var(--tint-strong),.6);
}
.repo-thumb{
    width:100%; 
    aspect-ratio:1200/630; 
    background:#0f1117 linear-gradient(135deg,#12141c,#0c0d12);
    position:relative; 
    overflow:hidden;
    margin-top: 6px;
    border-radius: 16px
}
.repo-thumb img {
    width:100%; 
    height:100%; 
    object-fit:cover; 
    opacity:0; 
    transition:opacity .35s ease;
}
.repo-thumb img.loaded {
    opacity:1;
}
.repo-thumb-fallback {
    position:absolute; 
    inset:0; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content:center; 
    gap:10px;
    color:rgba(var(--tint-strong),.9); 
    text-align:center; 
    padding:0 16px;
}
.repo-thumb-fallback svg {
    width:38px; 
    height:38px; 
    opacity:.85;
}
.repo-thumb-fallback span {
    font-family:var(--mono); 
    font-size:12.5px; 
    color:var(--muted); 
    max-width:90%; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap;
}
.repo-portfolio-badge {
    position:absolute; 
    top:8px; 
    left:8px; 
    z-index:2;
    font-family:var(--mono); 
    font-size:11px; 
    padding:4px 10px; 
    border-radius:999px; 
    background:rgba(0,0,0,.6); 
    backdrop-filter:blur(6px); 
    color:#fff; 
    white-space:nowrap;
}
.repo-body {
    padding:14px 16px 16px; 
    display:flex; 
    flex-direction:column; 
    gap:8px; 
    flex:1;
}
.repo-name {
    font-family:var(--mono); 
    font-weight:700; 
    font-size:15px;
}
.repo-desc {
    color:var(--muted); 
    font-size:13px; 
    margin:0; 
    flex:1;
}
.repo-meta {
    display:flex; 
    align-items:center; 
    gap:12px; 
    font-family:var(--mono); 
    font-size:11.5px; 
    color:var(--muted);
}
.lang-dot {
    width:9px; 
    height:9px; 
    border-radius:50%; 
    display:inline-block; 
    margin-right:5px;
}

.skeleton {
    background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.08), rgba(255,255,255,.03));
    background-size:200% 100%; 
    animation:shimmer 1.4s ease infinite;
}
@keyframes shimmer {
    0% {
        background-position:200% 0;
    }
    100% {
        background-position:-200% 0;
    }
}
.skeleton-card {
    height:230px; 
    border-radius:16px;
}
.empty-msg {
    color:var(--muted); 
    font-family:var(--mono); 
    font-size:13px; 
    grid-column:1/-1; 
    padding:30px 0; 
    text-align:center;
}

.detail-view {
    position:fixed; 
    inset:0; 
    z-index:60;
    display:flex; 
    align-items:flex-end; 
    justify-content:center;
    padding:0;
}
.detail-view[hidden] {
    display:none !important;
}
@media (min-width:760px) {
    .detail-view {
        align-items:center; 
        padding:40px;
    }
}
.detail-inner {
    width:100%; 
    max-width:640px; 
    display:flex; 
    flex-direction:column; 
    gap:14px;
}
.back-btn {
    align-self:flex-start;
}
.detail-card {
    background:rgba(10,11,16,.78); 
    border:1px solid var(--panel-border);
    border-radius:20px 20px 0 0; 
    backdrop-filter:blur(18px);
    padding:26px 24px 30px; 
    box-shadow:0 -20px 60px rgba(0,0,0,.5);
    max-height:82vh; 
    overflow-y: auto;
}
@media (min-width:760px) { 
    .detail-card {
        border-radius:20px;
    } 
}
.detail-top {
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:12px; 
    margin-bottom:8px;
}
.detail-top h2 {
    font-family:var(--mono); 
    font-size:22px; 
    margin:0; 
    word-break:break-word;
}
.lang-pill {
    font-family:var(--mono); 
    font-size:11px; 
    padding:4px 10px; 
    border-radius:999px; 
    background:rgba(var(--tint-strong),.18); 
    color:rgb(var(--tint-strong)); 
    white-space:nowrap;
}
.detail-desc {
    color:var(--muted); 
    margin:0 0 14px;
}
.detail-meta {
    display:flex; 
    gap:16px; 
    font-family:var(--mono); 
    font-size:12.5px; 
    color:var(--muted); 
    margin-bottom:16px; 
    flex-wrap:wrap;
}
.detail-actions {
    display:flex; 
    gap:10px; 
    flex-wrap:wrap; 
    margin-bottom:22px;
}
.detail-loading {
    color:var(--muted); 
    font-family:var(--mono); 
    font-size:12.5px;
}

.detail-readme {
    border-top:1px solid var(--panel-border); 
    padding-top:18px; 
    font-size:14.5px;
}
.detail-readme h1,.detail-readme h2,.detail-readme h3 {
    font-family:var(--mono); 
    line-height:1.3; 
    margin:20px 0 8px;
}
.detail-readme h1:first-child,.detail-readme h2:first-child,.detail-readme h3:first-child {
    margin-top:0;
}
.detail-readme p {
    margin:0 0 12px; 
    color:#d7dbe6;
}
.detail-readme a {
    color:rgb(var(--tint-strong)); 
    text-decoration:underline;
}
.detail-readme code {
    font-family:var(--mono); 
    background:rgba(255,255,255,.08); 
    padding:1px 5px; 
    border-radius:4px; 
    font-size:.9em;
}
.detail-readme pre {
    background:rgba(255,255,255,.05); 
    border:1px solid var(--panel-border); 
    border-radius:8px; 
    padding:12px 14px; 
    overflow-x:auto; 
    margin:0 0 14px;
}
.detail-readme pre code {
    background:none; 
    padding:0;
}
.detail-readme ul,.detail-readme ol {
    margin:0 0 12px; 
    padding-left:22px; 
    color:#d7dbe6;
}
.detail-readme img {
    border-radius:8px; 
    margin:8px 0;
}
.detail-readme hr {
    border:none; 
    border-top:1px solid var(--panel-border); 
    margin:18px 0;
}
.detail-readme blockquote {
    margin:0 0 12px; 
    padding:2px 14px; 
    border-left:3px solid rgba(var(--tint-strong),.6); 
    color:var(--muted);
}

footer {
    text-align:center; 
    padding:30px 0 50px; 
    color:var(--muted); 
    font-family:var(--mono); 
    font-size:12px;
}