/* lyraez Hub | canonical UI layer */

:root {
    --lavender-950:#100c18;
    --lavender-900:#171020;
    --lavender-800:#21162d;
    --accent-color:#a855f7;
    --accent-secondary:#c4b5fd;
    --royal-carmine:#9f1239;
    --royal-carmine-soft:rgba(159,18,57,.28);
    --glass-bg:rgba(20,16,30,.56);
    --glass-line:rgba(255,255,255,.12);
    --glass-highlight:rgba(255,255,255,.18);
    --primary-glow:rgba(168,85,247,.16);
    --primary-hover:rgba(168,85,247,.28);
    --orb-1:#a855f7;
    --orb-2:#4f46e5;
    --orb-3:#818cf8;
    --spring-x:0px;
    --spring-y:0px;
}

body[data-theme="dark-blood"] {
    --lavender-950:#12090b;
    --glass-bg:rgba(34,12,15,.58);
    --accent-color:#dc2626;
    --accent-secondary:#fca5a5;
    --royal-carmine:#991b1b;
    --royal-carmine-soft:rgba(220,38,38,.24);
    --primary-glow:rgba(220,38,38,.18);
    --primary-hover:rgba(220,38,38,.30);
    --orb-1:#7f1d1d;
    --orb-2:#450a0a;
    --orb-3:#991b1b;
}

html { scroll-behavior:smooth; }

body {
    min-height:100vh;
    overflow-x:hidden;
    color:#fff;
    background:
        radial-gradient(900px 520px at 15% -10%,rgba(168,85,247,.14),transparent 65%),
        radial-gradient(760px 520px at 92% 35%,rgba(159,18,57,.09),transparent 68%),
        var(--lavender-950);
    font-family:'Inter',sans-serif;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    cursor:none;
    transition:background-color 500ms ease;
}

body[data-theme="dark-blood"] {
    background:
        radial-gradient(900px 520px at 15% -10%,rgba(127,29,29,.18),transparent 65%),
        radial-gradient(760px 520px at 92% 35%,rgba(153,27,27,.12),transparent 68%),
        var(--lavender-950);
}

.skip-link {
    position:fixed;
    top:12px;
    left:12px;
    z-index:10000;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;
    background:rgba(16,12,24,.92);
    color:#fff;
    transform:translateY(-150%);
    transition:transform 180ms ease;
}
.skip-link:focus { transform:translateY(0); }

.fade-blur-top,
.fade-blur-bottom {
    position:fixed;
    left:0;
    width:100%;
    height:100px;
    z-index:50;
    pointer-events:none;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.fade-blur-top {
    top:0;
    background:linear-gradient(to bottom,rgba(16,12,24,.88),transparent);
    -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);
    mask-image:linear-gradient(to bottom,#000 30%,transparent);
}
.fade-blur-bottom {
    bottom:0;
    background:linear-gradient(to top,rgba(16,12,24,.88),transparent);
    -webkit-mask-image:linear-gradient(to top,#000 40%,transparent);
    mask-image:linear-gradient(to top,#000 40%,transparent);
}

#main-content {
    width:min(calc(100% - 2rem),48rem);
    padding-top:clamp(5rem,9vw,7rem);
    padding-bottom:clamp(4rem,8vw,6rem);
    gap:clamp(2.25rem,5vw,3.25rem);
}

#cursor-glow {
    position:fixed;
    top:0;
    left:0;
    width:400px;
    height:400px;
    z-index:9999;
    border-radius:50%;
    pointer-events:none;
    opacity:.20;
    filter:blur(24px);
    mix-blend-mode:screen;
    background:radial-gradient(circle,var(--accent-color),transparent 68%);
}

body:has(.interact:hover) #cursor-glow {
    width:200px;
    height:200px;
    background:radial-gradient(circle,var(--primary-hover),transparent 60%);
}

.bg-orb {
    position:fixed;
    z-index:-1;
    border-radius:50%;
    filter:blur(150px);
    opacity:.35;
    will-change:transform;
    transition:background-color 1s ease;
}

.liquid-glass {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:1px solid var(--glass-line);
    border-top-color:rgba(255,255,255,.20);
    border-radius:40px;
    background:
        linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 48%,rgba(159,18,57,.035)),
        var(--glass-bg);
    backdrop-filter:blur(28px) saturate(165%);
    -webkit-backdrop-filter:blur(28px) saturate(165%);
    box-shadow:
        0 28px 70px -34px rgba(0,0,0,.9),
        inset 0 1px 0 var(--glass-highlight),
        inset 0 0 0 1px rgba(255,255,255,.018);
    transform:translate3d(var(--spring-x),var(--spring-y),0);
    transition:
        transform 520ms cubic-bezier(.16,1,.3,1),
        border-color 320ms ease,
        box-shadow 420ms cubic-bezier(.16,1,.3,1);
}
.liquid-glass::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(120deg,rgba(255,255,255,.10),transparent 30%,transparent 70%,rgba(159,18,57,.07));
    opacity:.72;
}
.liquid-glass:hover {
    border-color:rgba(196,181,253,.28);
    transform:translate3d(var(--spring-x),calc(var(--spring-y) - 3px),0);
    box-shadow:
        0 34px 80px -36px rgba(0,0,0,.95),
        0 0 34px -18px rgba(168,85,247,.42),
        0 0 26px -20px var(--royal-carmine-soft),
        inset 0 1px 0 rgba(255,255,255,.20);
}
body[data-theme="dark-blood"] .liquid-glass:hover {
    border-color:rgba(252,165,165,.30);
    box-shadow:
        0 34px 80px -36px rgba(0,0,0,.95),
        0 0 34px -18px rgba(220,38,38,.34),
        inset 0 1px 0 rgba(255,255,255,.20);
}

.liquid-btn,
.social-btn,
.theme-toggle {
    min-height:44px;
    transform:translate3d(var(--spring-x),var(--spring-y),0);
    transition:
        transform 420ms cubic-bezier(.16,1,.3,1),
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 320ms ease;
}
.liquid-btn,
.social-btn,
.theme-toggle {
    border:1px solid rgba(255,255,255,.10);
    border-top-color:rgba(255,255,255,.20);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
}
.liquid-btn:hover,
.social-btn:hover,
.theme-toggle:hover {
    border-color:rgba(196,181,253,.30);
    background:var(--primary-glow);
    box-shadow:0 10px 30px -18px var(--primary-glow);
}
.liquid-btn:active,
.social-btn:active,
.theme-toggle:active {
    transform:translate3d(0,0,0) scale(.965);
}

.theme-toggle {
    position:fixed;
    top:20px;
    right:20px;
    z-index:100;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    cursor:pointer;
}

.back-to-top {
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:90;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    background:rgba(20,16,30,.72);
    color:#fff;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(14px);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    transition:opacity 220ms ease,transform 320ms cubic-bezier(.16,1,.3,1),visibility 220ms;
}
.back-to-top.is-visible {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

.scroll-progress {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:10001;
    height:2px;
    pointer-events:none;
    background:transparent;
}
.scroll-progress > span {
    display:block;
    width:100%;
    height:100%;
    transform:scaleX(0);
    transform-origin:left center;
    background:linear-gradient(90deg,var(--accent-secondary),var(--accent-color),var(--royal-carmine));
    box-shadow:0 0 14px var(--accent-color);
}

.progress-track {
    overflow:hidden;
    height:6px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:999px;
    background:rgba(0,0,0,.40);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.progress-fill {
    width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--accent-secondary),var(--accent-color));
    box-shadow:0 0 10px var(--primary-glow);
    transition:width 700ms linear;
}

.scroll-reveal {
    opacity:1;
    transform:none;
}
html.js .scroll-reveal {
    opacity:0;
    transform:translate3d(0,24px,0);
    transition:opacity 420ms ease,transform 520ms cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform;
}
html.js .scroll-reveal.visible {
    opacity:1;
    transform:translate3d(0,0,0);
}

.tech-icon {
    min-height:58px;
    justify-content:center;
    border-radius:18px;
    filter:grayscale(30%);
    transition:transform 260ms cubic-bezier(.22,1,.36,1),filter 220ms ease,text-shadow 220ms ease;
    will-change:transform;
}
.tech-icon:hover {
    transform:translate3d(0,-5px,0) scale(1.06);
    filter:drop-shadow(0 8px 18px rgba(168,85,247,.20));
}

.waka-stat,
.ctf-card {
    border:1px solid rgba(255,255,255,.05);
    border-radius:18px;
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(10px) saturate(130%);
    -webkit-backdrop-filter:blur(10px) saturate(130%);
    transition:background-color 240ms ease,border-color 240ms ease,transform 260ms cubic-bezier(.22,1,.36,1);
}
.waka-stat:hover,
.ctf-card:hover {
    border-color:var(--accent-color);
    background:var(--primary-glow);
}
.ctf-card:hover { transform:translate3d(5px,0,0); }

.social-btn { border-radius:1rem; }

.text-blur { filter:none; text-shadow:0 0 1px currentColor; }
.blur-component {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

@keyframes float-slow {
    0%,100% { transform:translate(0,0) scale(1); }
    33% { transform:translate(5vw,-5vh) scale(1.1); }
    66% { transform:translate(-4vw,4vh) scale(.95); }
}
@keyframes spin-slow {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
.album-spin { animation:spin-slow 8s linear infinite; }
.album-spin.paused { animation-play-state:paused; }

@keyframes equalizer {
    0%,100% { height:4px; }
    50% { height:20px; }
}
.equalizer-bar {
    width:3px;
    border-radius:2px;
    background:linear-gradient(to top,var(--accent-color),var(--accent-secondary));
    animation:equalizer .8s ease-in-out infinite;
}
.equalizer-bar:nth-child(1){animation-delay:0s}
.equalizer-bar:nth-child(2){animation-delay:.1s}
.equalizer-bar:nth-child(3){animation-delay:.2s}
.equalizer-bar:nth-child(4){animation-delay:.3s}
.equalizer-bar:nth-child(5){animation-delay:.15s}

.social-btn:focus-visible,
.theme-toggle:focus-visible,
.liquid-btn:focus-visible,
.liquid-glass:focus-visible,
.back-to-top:focus-visible,
.skip-link:focus-visible {
    outline:2px solid var(--accent-secondary);
    outline-offset:3px;
}

@media (pointer:coarse),(max-width:700px) {
    body { cursor:auto; }
    #cursor-glow { display:none; }
    .bg-orb { filter:blur(65px); opacity:.14; }
    .bg-orb:nth-child(3) { display:none; }
    .fade-blur-top,.fade-blur-bottom {
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }
    .liquid-glass {
        backdrop-filter:blur(12px) saturate(130%);
        -webkit-backdrop-filter:blur(12px) saturate(130%);
    }
    .liquid-glass:hover,
    .liquid-btn:hover,
    .social-btn:hover,
    .theme-toggle:hover,
    .tech-icon:hover { transform:none; }
    #main-content {
        width:min(calc(100% - 1.25rem),42rem);
        padding-top:4.75rem;
        gap:2rem;
    }
}

@media (max-width:480px) {
    #main-content {
        width:calc(100% - 1rem);
        padding-top:4.5rem;
        padding-bottom:4rem;
        gap:1.75rem;
    }
    .liquid-glass { border-radius:28px; }
    .theme-toggle { top:14px; right:14px; width:44px; height:44px; }
    .back-to-top { right:14px; bottom:14px; }
    .tech-icon { min-height:54px; }
}

@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after {
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.001ms !important;
    }
    html.js .scroll-reveal {
        opacity:1;
        transform:none;
    }
    .bg-orb,.album-spin,.equalizer-bar {
        animation:none !important;
    }
    .liquid-glass,
    .liquid-btn,
    .social-btn,
    .theme-toggle,
    .tech-icon,
    .waka-stat {
        transform:none !important;
    }
}

html[data-performance="lite"] .bg-orb { animation:none !important; }
html[data-performance="lite"] .liquid-glass {
    backdrop-filter:blur(8px) saturate(120%);
    -webkit-backdrop-filter:blur(8px) saturate(120%);
}


/* Runtime utility safety net
   Keeps critical layout/state behavior intact if the generated Tailwind artifact
   is unavailable during a static deploy. The generated stylesheet remains the
   primary utility layer when present. */
.flex{display:flex}
.grid{display:grid}
.hidden{display:none!important}
.absolute{position:absolute}
.relative{position:relative}
.fixed{position:fixed}
.inset-0{inset:0}
.top-0{top:0}
.top-1{top:.25rem}
.top-2{top:.5rem}
.top-6{top:1.5rem}
.right-1{right:.25rem}
.right-6{right:1.5rem}
.bottom-1{bottom:.25rem}
.bottom-2{bottom:.5rem}
.left-2{left:.5rem}
.left-1\/2{left:50%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.flex-1{flex:1 1 0%}
.shrink-0{flex-shrink:0}
.min-w-0{min-width:0}
.w-full{width:100%}
.w-px{width:1px}
.h-px{height:1px}
.w-0{width:0}
.h-0{height:0}
.w-1\.5,.h-1\.5{width:.375rem;height:.375rem}
.w-3,.h-3{width:.75rem;height:.75rem}
.w-4,.h-4{width:1rem;height:1rem}
.w-5,.h-5{width:1.25rem;height:1.25rem}
.w-6,.h-6{width:1.5rem;height:1.5rem}
.w-7,.h-7{width:1.75rem;height:1.75rem}
.w-8,.h-8{width:2rem;height:2rem}
.w-10,.h-10{width:2.5rem;height:2.5rem}
.w-12,.h-12{width:3rem;height:3rem}
.w-16,.h-16{width:4rem;height:4rem}
.w-20,.h-20{width:5rem;height:5rem}
.w-24{width:6rem}
.h-28,.w-28{width:7rem;height:7rem}
.w-\[30vw\]{width:30vw}
.w-\[50vw\]{width:50vw}
.w-\[60vw\]{width:60vw}
.h-\[30vw\]{height:30vw}
.h-\[50vw\]{height:50vw}
.h-\[60vw\]{height:60vw}
.max-w-2xl{max-width:42rem}
.mx-auto{margin-left:auto;margin-right:auto}
.p-1\.5{padding:.375rem}
.p-3\.5{padding:.875rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-10{padding:2.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.pl-2{padding-left:.5rem}
.pr-8{padding-right:2rem}
.pt-4{padding-top:1rem}
.mt-0\.5{margin-top:.125rem}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-8{margin-top:2rem}
.mb-1{margin-bottom:.25rem}
.mb-4{margin-bottom:1rem}
.mb-10{margin-bottom:2.5rem}
.gap-0\.5{gap:.125rem}
.gap-1\.5{gap:.375rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-10{gap:2.5rem}
.space-y-3>*+*{margin-top:.75rem}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.justify-between{justify-content:space-between}
.text-center{text-align:center}
.text-left{text-align:left}
.text-transparent{color:transparent}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.italic{font-style:italic}
.uppercase{text-transform:uppercase}
.leading-none{line-height:1}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tracking-tight{letter-spacing:-.025em}
.tracking-wide{letter-spacing:.025em}
.tracking-wider{letter-spacing:.05em}
.tracking-widest{letter-spacing:.1em}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-\[9px\]{font-size:9px}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-white{color:#fff}
.text-white\/20{color:rgba(255,255,255,.2)}
.text-white\/30{color:rgba(255,255,255,.3)}
.text-white\/40{color:rgba(255,255,255,.4)}
.text-white\/50{color:rgba(255,255,255,.5)}
.text-white\/60{color:rgba(255,255,255,.6)}
.text-white\/70{color:rgba(255,255,255,.7)}
.text-purple-400{color:#c084fc}
.text-purple-300{color:#d8b4fe}
.text-blue-300{color:#93c5fd}
.text-blue-400{color:#60a5fa}
.text-blue-500{color:#3b82f6}
.text-green-400{color:#4ade80}
.text-green-500{color:#22c55e}
.text-yellow-300{color:#fde047}
.text-yellow-400{color:#facc15}
.text-orange-500{color:#f97316}
.text-orange-600{color:#ea580c}
.text-red-400{color:#f87171}
.bg-white\/5{background:rgba(255,255,255,.05)}
.bg-white\/10{background:rgba(255,255,255,.10)}
.bg-black\/40{background:rgba(0,0,0,.40)}
.bg-gray-600{background:#4b5563}
.bg-purple-400{background:#c084fc}
.bg-green-500\/10{background:rgba(34,197,94,.10)}
.bg-purple-500\/10{background:rgba(168,85,247,.10)}
.bg-yellow-500\/10{background:rgba(234,179,8,.10)}
.border{border-width:1px}
.border-2{border-width:2px}
.border-t{border-top-width:1px}
.border-white\/5{border-color:rgba(255,255,255,.05)}
.border-white\/10{border-color:rgba(255,255,255,.10)}
.border-green-500\/20{border-color:rgba(34,197,94,.20)}
.border-yellow-500\/20{border-color:rgba(234,179,8,.20)}
.border-purple-500\/20{border-color:rgba(168,85,247,.20)}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}
.opacity-0{opacity:0}
.opacity-30{opacity:.3}
.opacity-50{opacity:.5}
.opacity-80{opacity:.8}
.pointer-events-none{pointer-events:none}
.cursor-pointer{cursor:pointer}
.cursor-default{cursor:default}
.overflow-hidden{overflow:hidden}
.object-cover{object-fit:cover}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.25)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.35)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.45)}
.shadow-inner{box-shadow:inset 0 2px 4px rgba(0,0,0,.20)}
.transition-all{transition:all 240ms ease}
.transition-colors{transition:background-color 240ms ease,border-color 240ms ease,color 240ms ease}
.transition-opacity{transition:opacity 240ms ease}
.transition-transform{transition:transform 320ms cubic-bezier(.16,1,.3,1)}
.duration-300{transition-duration:300ms}
.duration-500{transition-duration:500ms}
.duration-700{transition-duration:700ms}
.z-10{z-index:10}
.z-50{z-index:50}
.z-100{z-index:100}
.z-90{z-index:90}
.z-\[-1\]{z-index:-1}
.z-\[9999\]{z-index:9999}
.left-\[-10\%\]{left:-10%}
.right-\[-10\%\]{right:-10%}
.bottom-\[-20\%\]{bottom:-20%}
.top-\[-10\%\]{top:-10%}
.top-\[40\%\]{top:40%}
.left-\[40\%\]{left:40%}
.left-1\/2{left:50%;transform:translateX(-50%)}
.-translate-x-1\/2{transform:translateX(-50%)}
.-translate-x-2{transform:translateX(-.5rem)}
.-translate-y-1{transform:translateY(-.25rem)}
.translate-y-24{transform:translateY(6rem)}
.translate-x-1{transform:translateX(.25rem)}
.-rotate-6{transform:rotate(-6deg)}
.group-hover\:opacity-100:hover{opacity:1}
.group-hover\:opacity-80:hover{opacity:.8}
.group-hover\:rotate-0:hover{transform:rotate(0)}
.group-hover\:rotate-3:hover{transform:rotate(3deg)}
.group-hover\:scale-105:hover{transform:scale(1.05)}
.group-hover\:translate-x-0:hover{transform:translateX(0)}
.group-hover\:translate-x-1:hover{transform:translateX(.25rem)}
.group-hover\:text-purple-300:hover{color:#d8b4fe}
.group-hover\:text-purple-400:hover{color:#c084fc}
.group-hover\:text-blue-300:hover{color:#93c5fd}
.group-hover\:text-blue-400:hover{color:#60a5fa}
.group-hover\:bg-purple-500\/10:hover{background:rgba(168,85,247,.10)}
.group-hover\:bg-blue-500\/10:hover{background:rgba(59,130,246,.10)}
.group-hover\:border-purple-500\/30:hover{border-color:rgba(168,85,247,.30)}
.group-hover\:border-blue-500\/30:hover{border-color:rgba(59,130,246,.30)}
.hover\:text-purple-300:hover{color:#d8b4fe}
.hover\:text-blue-400:hover{color:#60a5fa}
.hover\:text-green-400:hover{color:#4ade80}
.hover\:text-red-400:hover{color:#f87171}
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sm\:flex-row{flex-direction:row}
.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.sm\:w-24{width:6rem}
.sm\:h-24{height:6rem}
.sm\:p-8{padding:2rem}
.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
.sm\:text-left{text-align:left}
.sm\:items-start{align-items:flex-start}

/* Explicit layouts for the sections that must never collapse into a
   browser-default vertical document. */
.tech-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.waka-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.project-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.project-card{display:flex;align-items:center;gap:1rem}
.discord-card{min-height:0;margin-bottom:0}
.discord-mark{width:32px!important;height:32px!important;display:block}
.discord-empty{display:flex;align-items:center;gap:1rem;min-height:76px}
.discord-active{display:flex;flex-direction:column;gap:1.25rem;width:100%}
.discord-media{width:5rem;height:5rem;flex:0 0 5rem;border-radius:1rem;overflow:hidden}
.discord-media img{display:block;width:100%;height:100%;object-fit:cover}
.discord-copy{min-width:0;display:flex;flex-direction:column;gap:.125rem}
.discord-copy h4,.discord-copy p{max-width:100%}
.discord-status{display:flex;align-items:center;gap:.375rem}
.discord-buttons{display:flex;gap:.75rem;width:100%}
.discord-buttons:empty{display:none}
.media-failed{visibility:hidden}
.waka-stat{min-width:0;min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tech-icon{min-width:0;padding:.65rem .35rem}
.tech-icon i{line-height:1}
.project-card p{line-height:1.45}
.project-card .project-copy{min-width:0;flex:1}
.project-card .project-arrow{flex:0 0 auto}

@media (max-width:639px){
    .sm\:flex-row{flex-direction:column}
    .sm\:items-start{align-items:center}
    .sm\:text-left{text-align:center}
    .sm\:p-8{padding:1.25rem}
    .tech-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
    .waka-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
    .project-card{align-items:flex-start;padding:1rem}
    .discord-empty{align-items:flex-start}
    .discord-media{width:4.5rem;height:4.5rem;flex-basis:4.5rem}
    .discord-buttons{flex-direction:column}
}
@media (min-width:640px){
    .sm\:flex-row{flex-direction:row}
    .sm\:items-start{align-items:flex-start}
    .sm\:text-left{text-align:left}
}


/* Premium mobile pass */
.liquid-glass {
    background:
        radial-gradient(120% 90% at 8% 0%,rgba(196,181,253,.13),transparent 42%),
        radial-gradient(90% 80% at 100% 100%,rgba(159,18,57,.10),transparent 55%),
        linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.018) 52%,rgba(159,18,57,.045)),
        var(--glass-bg);
}
.liquid-glass::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    pointer-events:none;
    background:
        linear-gradient(105deg,rgba(255,255,255,.10),transparent 18% 72%,rgba(196,181,253,.055)),
        radial-gradient(circle at 15% 5%,rgba(255,255,255,.10),transparent 24%);
    mix-blend-mode:screen;
    opacity:.7;
}
.theme-toggle{
    border-color:rgba(196,181,253,.22);
    background:
        radial-gradient(circle at 35% 25%,rgba(196,181,253,.18),transparent 48%),
        rgba(20,16,30,.78);
    box-shadow:0 10px 35px -18px rgba(168,85,247,.55),inset 0 1px 0 rgba(255,255,255,.16);
}
.discord-card{padding:1.5rem}
.discord-activity-row{min-width:0}
.discord-media{background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(159,18,57,.16))}
.discord-copy{flex:1}
.discord-copy .truncate{min-width:0}
.tech-icon{
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(168,85,247,.025));
    border:1px solid rgba(255,255,255,.055);
}
.tech-icon:hover{
    border-color:rgba(196,181,253,.22);
    background:rgba(168,85,247,.08);
}
.waka-stat{
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(168,85,247,.025));
}
.project-card{
    padding:1.25rem;
    min-height:82px;
}
.project-card:hover{
    border-color:rgba(196,181,253,.25);
}
@media (max-width:639px){
    .discord-card{padding:1.25rem}
    .discord-activity-row{align-items:flex-start;gap:1rem}
    .discord-copy{padding-right:0}
    .tech-icon{min-height:66px}
    .project-card{min-height:76px}
}


/* Small visual utilities kept local so the page remains legible even before
   any generated utility bundle is available. */
.bg-gradient-to-br{background-image:linear-gradient(135deg,var(--tw-gradient-from,#fff),var(--tw-gradient-to,rgba(255,255,255,.5)))}
.from-white{--tw-gradient-from:#fff}
.via-white{--tw-gradient-via:#fff}
.to-white\/50{--tw-gradient-to:rgba(255,255,255,.5)}
.bg-clip-text{-webkit-background-clip:text;background-clip:text}
.animate-pulse{animation:utility-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.animate-spin{animation:utility-spin 1s linear infinite}
@keyframes utility-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes utility-spin{to{transform:rotate(360deg)}}


/* ==========================================================================
   iOS 27 LIQUID GLASS - SEGMENTED CONTROL & TABS
   Deep Lavender + Aristocratic Carmine Accents + Spring Physics
   ========================================================================== */

.segmented-container {
    width: 100%;
    display: flex;
    justify-content: center;
    position: sticky;
    top: 1.5rem;
    z-index: 40;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
    perspective: 1000px;
}

.liquid-glass-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem;
    border-radius: 9999px;
    background: rgba(18, 12, 28, 0.65);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 
        0 20px 40px -15px rgba(0, 0, 0, 0.6),
        0 0 25px -5px rgba(155, 17, 30, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.liquid-glass-pill::-webkit-scrollbar {
    display: none;
}

.segmented-indicator {
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: 0;
    width: 0;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(155, 17, 30, 0.32) 100%);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 
        0 4px 18px rgba(155, 17, 30, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

.segmented-tab {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.segmented-tab:hover {
    color: rgba(255, 255, 255, 0.95);
}

.segmented-tab:active {
    transform: scale(0.94);
}

.segmented-tab.active {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

/* Tab Panels Animation */
.tab-panels-wrapper {
    position: relative;
    min-height: 400px;
}

.tab-panel {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    display: none;
}

.tab-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}