@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap");
:root {
    --bg:#020617;
    --bg2:#07101d;
    --card:#0b1424;
    --line:#1e2d43;
    --cyan:#38bdf8;
    --cyan2:#7dd3fc;
    --text:#e2e8f0;
    --muted:#7c8ca3;
    --green:#22c55e;
}

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html {
    scroll-behavior:smooth;
}

body {
    background:
        radial-gradient(circle at 25% 15%,rgba(56,189,248,.06),transparent 28%),
        radial-gradient(circle at 80% 65%,rgba(14,165,233,.04),transparent 30%),
        var(--bg);

    color:var(--text);

    font-family:
        Inter,
        "Noto Sans CJK SC",
        "Microsoft YaHei",
        "PingFang SC",
        system-ui,
        sans-serif;

    overflow-x:hidden;
}


a {
    color:inherit;
    text-decoration:none;
}


#background {
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-1;
    pointer-events:none;
}


nav {
    position:fixed;
    top:0;
    left:0;
    right:0;

    height:68px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 7%;

    background:rgba(2,6,23,.74);

    border-bottom:1px solid rgba(56,189,248,.12);

    backdrop-filter:blur(15px);

    z-index:100;
}


.logo {
    font-family:var(--font-ui);
    font-weight:bold;
    letter-spacing:3px;
}

.logo span {
    color:var(--cyan);
}


.nav-links {
    display:flex;
    gap:30px;
}

.nav-links a {
    font-family:var(--font-ui);
    font-size:12px;
    color:#8190a5;
}

.nav-links a:hover {
    color:var(--cyan);
}


header {
    min-height:100vh;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:110px 20px 60px;

    text-align:center;
}


.status {
    border:1px solid rgba(56,189,248,.3);

    padding:7px 13px;

    border-radius:50px;

    font-family:var(--font-ui);
    font-size:11px;
    letter-spacing:2px;

    color:var(--cyan2);

    background:rgba(56,189,248,.04);
}


.dot {
    display:inline-block;

    width:7px;
    height:7px;

    margin-right:8px;

    border-radius:50%;

    background:var(--green);

    box-shadow:0 0 12px var(--green);
}


header h1 {
    margin-top:30px;

    font-family:var(--font-ui);

    font-size:clamp(65px,12vw,145px);

    line-height:.9;

    letter-spacing:.04em;

    color:#f8fafc;
}

header h1 span {
    color:var(--cyan);
}


header h2 {
    margin-top:25px;

    font-size:16px;

    letter-spacing:.5em;

    color:#718096;

    font-weight:500;
}


.typing {
    margin-top:35px;

    height:28px;

    font-family:var(--font-ui);

    color:#aab8ca;
}

.prompt,
.cursor {
    color:var(--cyan);
}

.cursor {
    animation:blink .8s step-end infinite;
}


@keyframes blink {
    50% {
        opacity:0;
    }
}


.tags {
    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:9px;

    margin-top:28px;
}


.tags span,
.pipeline-tags span {
    border:1px solid #263750;

    color:#99a8bc;

    background:rgba(15,23,42,.6);

    padding:7px 12px;

    font-family:var(--font-ui);

    font-size:10px;
}


.buttons {
    display:flex;

    gap:13px;

    flex-wrap:wrap;

    justify-content:center;

    margin-top:38px;
}


.buttons a {
    padding:12px 20px;

    font-family:var(--font-ui);

    font-size:12px;

    border-radius:4px;

    transition:.25s;
}


.primary {
    background:var(--cyan);

    color:#00121b;

    border:1px solid var(--cyan);
}


.secondary {
    border:1px solid #314158;

    color:#b4c0d0;
}


.buttons a:hover {
    transform:translateY(-2px);
}


section {
    max-width:1230px;

    margin:auto;

    padding:105px 25px;
}


.section-title {
    display:flex;

    gap:18px;

    margin-bottom:42px;
}


.number {
    border:1px solid #264560;

    color:var(--cyan);

    font-family:var(--font-ui);

    font-size:11px;

    height:28px;

    padding:6px 8px;
}


.section-title small {
    font-family:var(--font-ui);

    color:#64758c;

    letter-spacing:2px;

    font-size:10px;
}


.section-title h3 {
    margin-top:6px;

    font-size:33px;

    font-weight:600;
}


.monitor-grid {
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;
}


.monitor-card {
    background:linear-gradient(
        145deg,
        rgba(15,23,42,.95),
        rgba(5,12,24,.95)
    );

    border:1px solid var(--line);

    padding:25px;

    transition:.25s;
}


.monitor-card:hover {
    transform:translateY(-3px);

    border-color:var(--cyan);
}


.monitor-header {
    display:flex;

    justify-content:space-between;

    font-family:var(--font-ui);

    font-size:12px;
}


.monitor-header strong {
    color:var(--cyan2);
}


.bar {
    height:6px;

    background:#26344b;

    margin-top:18px;

    overflow:hidden;
}


.bar div {
    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #0ea5e9,
        #67e8f9
    );

    box-shadow:0 0 12px rgba(56,189,248,.4);

    transition:width .7s;
}


.monitor-card p {
    margin-top:12px;

    color:#536178;

    font-family:var(--font-ui);

    font-size:9px;
}


.server-info {
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:1px;

    margin-top:18px;

    border:1px solid var(--line);
}


.server-info div {
    background:#081120;

    padding:22px;

    text-align:center;

    display:flex;

    flex-direction:column;

    gap:7px;
}


.server-info small {
    color:#64758c;

    font-family:var(--font-ui);

    font-size:9px;
}


.server-info strong {
    font-family:var(--font-ui);
}


.green {
    color:var(--green);
}


.pipeline {
    display:flex;

    align-items:center;

    justify-content:center;

    overflow-x:auto;

    padding:30px 0;
}


.stage {
    position:relative;

    min-width:95px;
    height:95px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:1px solid #31516a;

    background:#0b1525;

    font-family:var(--font-ui);

    animation:pulse 3.2s infinite;

    animation-delay:var(--delay);
}


.stage small {
    position:absolute;

    top:7px;
    left:8px;

    color:#496178;

    font-size:8px;
}


.stage strong {
    font-size:15px;
}


.arrow {
    padding:0 10px;

    color:#31536d;
}


@keyframes pulse {

    0%,65%,100% {
        border-color:#294055;
        box-shadow:none;
    }

    10%,25% {
        border-color:var(--cyan);

        color:var(--cyan2);

        box-shadow:
            0 0 20px rgba(56,189,248,.28);
    }

}


.pipeline-tags {
    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:8px;

    margin-top:10px;
}


#githubStatus {
    margin-bottom:20px;

    color:#718197;

    font-family:var(--font-ui);

    font-size:12px;
}


.repo-grid {
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;
}


.repo {
    min-height:200px;

    padding:22px;

    display:flex;

    flex-direction:column;

    background:#0a1423;

    border:1px solid var(--line);

    transition:.25s;
}


.repo:hover {
    transform:translateY(-4px);

    border-color:var(--cyan);
}


.repo h4 {
    color:var(--cyan2);

    font-family:var(--font-ui);

    word-break:break-word;
}


.repo p {
    flex:1;

    margin-top:15px;

    line-height:1.65;

    color:#8595aa;

    font-size:13px;
}


.repo-footer {
    display:flex;

    justify-content:space-between;

    margin-top:20px;

    color:#607088;

    font-family:var(--font-ui);

    font-size:10px;
}


.view-all {
    margin-top:22px;

    text-align:right;
}


.view-all a {
    color:var(--cyan);

    font-family:var(--font-ui);

    font-size:11px;
}


.projects {
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;
}


.projects article {
    min-height:270px;

    padding:29px;

    background:linear-gradient(
        145deg,
        #0c1627,
        #07101e
    );

    border:1px solid var(--line);

    transition:.25s;
}


.projects article:hover {
    transform:translateY(-4px);

    border-color:var(--cyan);
}


.projects article > small {
    font-family:var(--font-ui);

    color:#56718b;

    font-size:9px;
}


.projects h4 {
    margin-top:38px;

    font-family:var(--font-ui);

    font-size:19px;
}


.projects p {
    margin-top:16px;

    line-height:1.7;

    color:#8493a7;
}


.projects article div {
    margin-top:22px;

    display:flex;

    gap:6px;

    flex-wrap:wrap;
}


.projects article div span {
    font-family:var(--font-ui);

    font-size:8px;

    border:1px solid #294860;

    color:#73a5c3;

    padding:5px 6px;
}


.terminal {
    background:#00040a;

    border:1px solid var(--line);

    overflow:hidden;

    box-shadow:0 30px 80px rgba(0,0,0,.3);
}


.terminal-top {
    position:relative;

    height:42px;

    display:flex;

    align-items:center;

    gap:7px;

    padding:0 14px;

    background:#0e1624;

    border-bottom:1px solid #1c2a3e;
}


.terminal-top > span {
    width:9px;
    height:9px;

    background:#35455a;

    border-radius:50%;
}


.terminal-top p {
    position:absolute;

    left:50%;

    transform:translateX(-50%);

    font-family:var(--font-ui);

    color:#617087;

    font-size:10px;
}


.terminal-body {
    padding:28px;

    font-family:var(--font-ui);

    color:#aab7c9;

    font-size:12px;

    line-height:2;
}


.user {
    color:#22c55e;
}

.path {
    color:var(--cyan);
}

.output {
    color:#58677d;
}

.success {
    color:#4ade80;
}


.terminal-cursor {
    color:var(--cyan);

    animation:blink .8s infinite;
}


.external-links {
    max-width:1180px;

    margin:0 auto 100px;

    padding:0 25px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;
}


.external-links a {
    position:relative;

    padding:28px;

    display:flex;

    flex-direction:column;

    border:1px solid var(--line);

    background:#081120;

    transition:.25s;
}


.external-links a:hover {
    border-color:var(--cyan);

    transform:translateY(-3px);
}


.external-links small {
    color:#5e6f85;

    font-size:9px;
}


.external-links strong {
    margin-top:5px;

    font-family:var(--font-ui);

    font-size:20px;
}


.external-links span {
    position:absolute;

    right:25px;
    top:31px;

    color:var(--cyan);

    font-size:20px;
}


footer {
    min-height:80px;

    padding:0 7%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-top:1px solid #152236;

    color:#4d5d73;

    font-family:var(--font-ui);

    font-size:9px;
}


@media(max-width:900px) {

    .nav-links {
        display:none;
    }

    .monitor-grid,
    .repo-grid,
    .projects,
    .external-links,
    .server-info {
        grid-template-columns:1fr;
    }

    .pipeline {
        justify-content:flex-start;
    }

    footer {
        flex-direction:column;
        justify-content:center;
        gap:10px;
    }

}


/* ==================================================
   CeylanCLC Typography V2
   Unified rounded-tech typography
   ================================================== */

:root {
    --font-ui:
        "Sora",
        "Noto Sans SC",
        "Microsoft YaHei",
        "PingFang SC",
        system-ui,
        sans-serif;

    --font-code:
        "JetBrains Mono",
        "Cascadia Code",
        Consolas,
        monospace;
}


html,
body {
    font-family: var(--font-ui);
    font-optical-sizing: auto;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}


/* 所有主页 UI 统一成 Sora */

.logo,
.nav-links,
.status,
header h1,
header h2,
.typing,
.tags,
.buttons,
.section-title,
.number,
.monitor-card,
.server-info,
.pipeline,
.pipeline-tags,
#githubStatus,
.repo,
.repo h4,
.repo-footer,
.view-all,
.projects,
.projects h4,
.external-links,
footer {
    font-family: var(--font-ui) !important;
}


/* 标题做得圆滑一些 */

header h1 {
    font-weight: 700;
    letter-spacing: 0.015em;
}

header h2 {
    font-weight: 500;
    letter-spacing: 0.32em;
}

.section-title h3 {
    font-weight: 600;
    letter-spacing: -0.025em;
}

.logo {
    font-weight: 700;
    letter-spacing: 1.5px;
}

.nav-links a {
    font-weight: 500;
    letter-spacing: 0.5px;
}


.stage strong {
    font-family: var(--font-ui);
    font-weight: 600;
}


/* 卡片文字统一 */

.monitor-header,
.server-info strong,
.repo-footer,
.projects article > small,
.pipeline-tags span,
.tags span {
    font-family: var(--font-ui) !important;
}


/* 只有真正的 Terminal 保持等宽代码字体 */

.terminal,
.terminal *,
code,
pre {
    font-family: var(--font-code) !important;
}


/* 整体边角稍微圆滑 */

.monitor-card,
.repo,
.projects article,
.external-links a {
    border-radius: 12px;
}

.stage {
    border-radius: 10px;
}

.bar {
    border-radius: 100px;
}

.bar div {
    border-radius: 100px;
}

.buttons a {
    border-radius: 9px;
}


/* 字体和卡片过渡 */

a,
.monitor-card,
.repo,
.projects article,
.external-links a,
.stage {
    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}