:root {
    --bg: #0a0f14;
    --ink: #d6f0ff;
    --muted: #7aa2b2;
    --accent: #6df;
    --panel: #0e162088;
    --grid: #101823;
    --fx: #00ffd0;
    --shadow: 0 0 .6rem rgba(0,255,208,.25), inset 0 0 .2rem #000;
    --radius: 16px;
    --gap: 14px;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font: 15px/1.6 var(--mono);
    letter-spacing: .2px;
    overflow: hidden;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    gap: var(--gap);
    height: 100%;
    padding: var(--gap);
    position: relative;
}

header {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: var(--gap);
    padding: 10px 12px;
    border: 1px solid var(--grid);
    border-radius: var(--radius);
    background: linear-gradient(180deg,rgba(20,28,38,.5),rgba(10,15,20,.5));
    box-shadow: var(--shadow);
    backdrop-filter: blur(3px);
    z-index: 1;
}

.mark {
    width: 46px;
    height: 46px;
    border-radius: 9px;
    border: 1px solid #233447;
    background: url("https://codeberg.org/avatars/3d4575e08e56234a149d8444c3ded0d3?size=24") round;
    filter: contrast(120%) saturate(120%);
    box-shadow: 0 0 10px rgba(0,255,255,.25);
}
h1 {
    margin: 0;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tag {
    color: var(--muted);
    font-size: 12px;
}

aside {
    z-index: 1;
    border: 1px solid var(--grid);
    border-radius: var(--radius);
    background: linear-gradient(180deg,#0d152088,#09101988);
    box-shadow: var(--shadow);
    padding: 12px;
    overflow: auto;
}

.aside-title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    color: #9ad;
    margin: 0 0 8px 0;
    letter-spacing: .8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.led {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--fx);
    box-shadow: 0 0 6px var(--fx), 0 0 12px var(--fx);
    animation: blink 1.6s infinite steps(2,end);
}

@keyframes blink{
    50%{opacity: .35}
}

.nav {
    display: grid; gap: 8px;
}

.nav a{
    display: block;padding: 8px 10px;border: 1px solid var(--grid);
    border-radius: 10px;background: var(--panel);
    transition: transform .05s linear, box-shadow .15s;
    box-shadow: inset 0 0 0 1px #0a121c;
}
.nav a:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(109,255,240,.2);
}

main {
    z-index: 1;
    border: 1px solid var(--grid);
    border-radius: var(--radius);
    background: linear-gradient(180deg,#0d152088,#0b131b88);
    box-shadow: var(--shadow);
    overflow: auto;
    padding: 16px;
}

.grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(12,minmax(0,1fr));
}

.card {
    grid-column: span 12;
    border: 1px solid var(--grid);
    border-radius: 12px;
    background: var(--panel);
    padding: 12px;
}

.card h2 {
    margin: .2rem 0 .6rem;font-size: 13px;text-transform: uppercase;letter-spacing: .8px;color: #9ad
}

.kv {
    display: grid;
    gap: 6px;
}

.kv div {
    display: flex;
    gap: 8px;
}

.k {
    color: var(--muted);
    min-width: 110px;
}

.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    border: 1px solid var(--grid);
    border-radius: 999px;
    padding: 5px 9px;
    background: #0a121c;
}

.timeline {
    display: grid;
    gap: 10px;
}

.row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
}

.row .when {
    color: var(--muted);
}

.links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.greentext2 {
    white-space: pre;
    background: #0f0f10;
    color: #e6e6e6;
    padding: 1rem;
    border-radius: 10px;
    line-height: 1.4;
}
.greentext2 .line::first-letter {
    color: #78b159;
}

@media (min-width: 900px) {
    .card.span-6 {
        grid-column: span 6;
    }
    .card.span-4 {
        grid-column: span 4;
    }
}