:root{
    --silver: #c6c8cc;
    --muted: #9da3a8;
    --accent-from: #7fb2ff;
    --accent-to: #bfe8ff;
    --accent-speed: 6s;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial}
body{background:#02050a;color:var(--silver);overflow:auto}
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.overlay{position:fixed;inset:0;background:linear-gradient(180deg,rgba(2,3,6,0.2),rgba(2,3,6,0.5));z-index:1}
.card{position:relative;z-index:2;max-width:1100px;margin:40px auto;padding:22px;display:grid;grid-template-columns:420px 1fr;gap:18px}

/* люкьиииид глассс ыыыыыы ураааааа */
.block{
    position:relative;
    overflow:hidden;
    padding:18px;
    border-radius:34px;
    background:linear-gradient(135deg, rgba(255,255,255,0), rgba(255,255,255,0.1));
    border:0px solid rgba(255,255,255,0.01);
    box-shadow:0 8px 32px rgba(0,0,0,0.7);
    transition: box-shadow 420ms ease;
}
.liquid-glass {
    border-radius: 32px;
    backdrop-filter: url(#liquid-glass-filter);
    -webkit-backdrop-filter: url(#liquid-glass-filter);
    position: relative;
    isolation: isolate;
}
.liquid-glass-fallback {
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
            inset 0 0 5px 0 rgba(0, 0, 0, 1),
            0 8px 32px rgba(0, 0, 0, 0.1);
}
@supports (backdrop-filter: url(#liquid-glass-filter)) {
    .liquid-glass-auto {
        border-radius: 32px;
        backdrop-filter: url(#liquid-glass-filter);
        -webkit-backdrop-filter: url(#liquid-glass-filter);
    }
}

@supports not (backdrop-filter: url(#liquid-glass-filter)) {
    .liquid-glass-auto {
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow:
                inset 0 0 5px 0 rgba(0, 0, 0, 1),
                0 8px 32px rgba(0, 0, 0, 0.1);
    }
}
.liquid-glass > * {
    position: relative;
    z-index: 2;
}
.liquid-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 2px rgba(255,255,255,0.52);
    z-index: 3;
}
.interactive{
    transform: translateY(0);
    transition: transform 420ms ease, box-shadow 220ms ease;
}

.interactive:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 40px rgba(0,0,0,0.45);
}

.legendcraft{border-radius:12px;padding:12px;background:linear-gradient(135deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));display:flex;align-items:center;gap:12px}
.online-row{display:flex;align-items:center;justify-content:center;gap:12px}
.server-donut-wrapper{position:relative;width:90px;height:90px;display:flex;align-items:center;justify-content:center}
.server-center-controls{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.server-center-text{color:var(--silver);font-weight:800;font-size:14px;line-height:1}
.server-tools{display:flex;gap:6px}
.tool{background:rgba(255,255,255,0.03);border:none;padding:6px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--silver);transition:transform 150ms ease,background 150ms ease}
.tool:hover{transform:translateY(-3px);background:rgba(255,255,255,0.08)}
.donut{display:block;overflow:visible}
.donut-bg{stroke:rgba(255,255,255,0.08)}
.donut-progress{stroke:#9fc9ff;transition:stroke-dashoffset 600ms cubic-bezier(.2,.9,.2,1)}
.donut-text{font-size:14px;fill:var(--silver);font-weight:700}

.about{
    display:flex;
    gap:16px;
    align-items:center;
}
.avatar{width:96px;height:96px;border-radius:999px;object-fit:cover;border:1px solid rgba(255,255,255,0.08);transition:transform 220ms ease,box-shadow 220ms ease}
.about.interactive:hover .avatar {
    transform:translateY(-6px);
}
.about-text{min-width:0}
.greeting{font-size:28px;margin:0;line-height:1.05;font-weight:700}
.silver-text{color:var(--silver);font-weight:600;margin-right:8px}
.name{
    font-weight:900;
    background:linear-gradient(90deg,var(--accent-from),var(--accent-to));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    background-size:200% 100%;
    animation:gradShift var(--accent-speed) linear infinite;
}
.name-link{
    background:linear-gradient(90deg,var(--accent-from),var(--accent-to));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    background-size:200% 100%;
    animation:gradShift var(--accent-speed) linear infinite;
}
.sub{color:var(--muted);font-size:13px;margin-top:8px}
.accent-link{color:inherit;text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.accent-link:hover{border-bottom-color:rgba(255,255,255,0.08)}

.widgets{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.widget h3{margin:0 0 10px 0;font-size:13px;color:var(--silver);font-weight:700;display:flex;align-items:center;gap:8px}
.time #time{font-family:monospace;font-size:20px}
.tz{font-size:11px;color:var(--muted);margin-top:6px}
.weather-main{display:flex;gap:12px;align-items:center}
.weather-icon{font-size:36px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px}
.weather-temp{font-size:18px;font-weight:700}
.projects-list{display:flex;flex-direction:column;gap:12px}
.project.github {
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease, transform 520ms ease, box-shadow 520ms ease;
    border-radius: 12px;
    text-decoration: none;
    color: var(--silver);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 600;
    justify-content: flex-start;
}
.project.github i {
    margin-right: 8px;
    font-size: 16px;
}
.projects-inline {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.projects-inline .project {
    flex: 1;
    min-width: 120px;
    max-width: 180px;
    padding: 10px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    text-decoration: none;
    color: var(--silver);
    transition: background 0.3s ease, transform 520ms ease, box-shadow 520ms ease;
}

.projects-inline .project .project-info {
    width: 100%;
    text-align: center;
}

.projects-inline .project .project-name {
    font-weight: 700;
    font-size: 14px;
}

.projects-inline .server-donut-wrapper {
    width: 80px;
    height: 80px;
}

.projects-inline .donut {
    width: 80px;
    height: 80px;
}

.projects-inline .donut-bg {
    stroke-width: 14;
}

.projects-inline .donut-progress {
    stroke-width: 14;
}

.projects-inline .donut-text {
    font-size: 14px;
    fill: var(--silver);
    font-weight: 700;
}

.projects-inline .arrow-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--silver);
}

.stack-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lang {
    position: relative;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--silver);
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    text-align: center;
    overflow: hidden;
    transition: box-shadow 520ms ease;
}
.lang-name {
    z-index: 2;
    font-size: 14px;
}
.lang-below {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    z-index: 2;
}
.lang.active::after{
    content:'';
    position:absolute;
    z-index:-1;
    top:50%;
    left:50%;
    width:220%;
    height:220%;
    background: radial-gradient(circle,
    rgba(127,178,255,0.45) 0%,
    rgba(191,232,255,0.25) 15%,
    rgba(255,255,255,0) 40%);
    opacity:0;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin:center;
    animation:aurora-glow 10s linear infinite;
    transition:opacity 360ms ease-in-out;
}

.lang.active:hover::after{
    opacity:0.9;
}

@keyframes aurora-glow{0%{transform:translate(-50%,-50%) rotate(0deg);}100%{transform:translate(-50%,-50%) rotate(360deg);}}

.lang.active {
    transform: translateY(0);
    transition: transform 520ms ease, box-shadow 520ms ease;
}

.lang.active:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
.project.github:hover,
.projects-inline .project:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}

.lang.java {
    border: 2px solid rgba(201, 92, 255, 0.6);
    color: rgba(243, 224, 255, 0.8);
    background: rgba(171, 92, 255, 0.1);
}
.lang.java.static {
    cursor: default;
}
.lang.java.static:hover {
    transform: none !important;
    box-shadow: inherit !important;
    animation: shake 0.5s ease-in-out;
    color: #b84dff;
    border-color: #b84dff;
    background: rgba(184, 77, 255, 0.2);
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.lang.java::after{display:none}
.lang * {
    position: relative;
}

.footer{grid-column:1/-1;text-align:center;opacity:0.5;font-size:12px;color:var(--silver);margin-top:4px}

@media (max-width:920px){
    .card{grid-template-columns:1fr;max-width:920px;margin:20px}
    .widgets{grid-template-columns:1fr}
    .projects-inline{flex-direction:column}
}

@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}