:root {
    --kynx-cursor-x: 50%;
    --kynx-cursor-y: 50%;
}

html,
body {
    min-height: 100%;
}

body {
    position: relative;
    isolation: isolate;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.72;
    background:
        radial-gradient(460px circle at var(--kynx-cursor-x) var(--kynx-cursor-y), rgba(0, 212, 255, 0.18), transparent 62%),
        radial-gradient(320px circle at calc(var(--kynx-cursor-x) - 14%) calc(var(--kynx-cursor-y) + 8%), rgba(0, 153, 255, 0.12), transparent 66%);
    transition: opacity 0.25s ease;
}

body.light::before {
    opacity: 0.46;
    background:
        radial-gradient(460px circle at var(--kynx-cursor-x) var(--kynx-cursor-y), rgba(56, 189, 248, 0.13), transparent 60%),
        radial-gradient(320px circle at calc(var(--kynx-cursor-x) - 14%) calc(var(--kynx-cursor-y) + 8%), rgba(59, 130, 246, 0.1), transparent 66%);
}

body > * {
    position: relative;
    z-index: 2;
}

.light {
    background:
        radial-gradient(1200px circle at 20% -10%, rgba(2, 132, 199, 0.2), transparent 42%),
        radial-gradient(1200px circle at 90% 20%, rgba(37, 99, 235, 0.16), transparent 48%),
        linear-gradient(180deg, #f7fbff 0%, #eef5ff 45%, #f8fbff 100%) !important;
    color: #0f172a !important;
}

.light .glass-panel,
.light .doc-card,
.light .terminal-window,
.light .code-block {
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(14, 116, 255, 0.2) !important;
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.09) !important;
}

.light [class*="bg-slate-900"],
.light [class*="bg-slate-800"] {
    background-color: rgba(226, 236, 252, 0.72) !important;
}

.light [class*="text-slate-200"] {
    color: #0f172a !important;
}

.light [class*="text-slate-300"] {
    color: #1e293b !important;
}

.light [class*="text-slate-400"] {
    color: #334155 !important;
}

.light [class*="text-slate-500"] {
    color: #475569 !important;
}

.light [class*="border-cyan-500"] {
    border-color: rgba(14, 116, 255, 0.26) !important;
}

.light .grid-bg {
    background-image:
        linear-gradient(rgba(56, 189, 248, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.13) 1px, transparent 1px) !important;
    background-size: 42px 42px !important;
}

.lang-transition {
    animation: kynxLangMorph 0.72s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    transform-origin: center center;
}

@keyframes kynxLangMorph {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: perspective(900px) rotateY(0) scale(1);
    }
    35% {
        opacity: 0.48;
        filter: blur(2px);
        transform: perspective(900px) rotateY(18deg) scale(0.982);
    }
    68% {
        opacity: 0.9;
        filter: blur(0.6px);
        transform: perspective(900px) rotateY(-7deg) scale(1.012);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: perspective(900px) rotateY(0) scale(1);
    }
}

.lang-toggle-pulse {
    animation: langTogglePulse 0.62s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes langTogglePulse {
    0% {
        box-shadow: 0 0 0 rgba(0, 212, 255, 0);
        transform: translateY(0) scale(1);
    }
    55% {
        box-shadow: 0 0 24px rgba(0, 212, 255, 0.5);
        transform: translateY(-2px) scale(1.06);
    }
    100% {
        box-shadow: 0 0 0 rgba(0, 212, 255, 0);
        transform: translateY(0) scale(1);
    }
}

.kynx-tilt-card {
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.kynx-reveal {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    filter: blur(2px);
    transition: opacity 0.72s ease, transform 0.72s ease, filter 0.72s ease;
}

.kynx-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

#scrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 10000;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, #00d4ff 0%, #0099ff 45%, #7dd3fc 100%);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.6);
}

body.page-leave {
    animation: kynxPageLeave 0.28s ease forwards;
}

@keyframes kynxPageLeave {
    to {
        opacity: 0;
        filter: blur(4px);
        transform: scale(0.992);
    }
}

.waitlist-feedback {
    min-height: 1.5rem;
}

.waitlist-feedback.success {
    color: #22c55e;
}

.waitlist-feedback.error {
    color: #f87171;
}

.waitlist-feedback.info {
    color: #38bdf8;
}

@media (pointer: fine) {
    html.kynx-cursor-ready,
    html.kynx-cursor-ready body,
    html.kynx-cursor-ready a,
    html.kynx-cursor-ready button,
    html.kynx-cursor-ready [role="button"],
    html.kynx-cursor-ready [data-lucide],
    html.kynx-cursor-ready summary {
        cursor: none !important;
    }

    html.kynx-cursor-ready input,
    html.kynx-cursor-ready textarea {
        cursor: text !important;
    }
}

#kynxCursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    pointer-events: none;
    z-index: 11660;
    opacity: 0;
    transform: translate3d(-120px, -120px, 0);
    transition: opacity 0.2s ease;
}

#kynxCursor.active {
    opacity: 1;
}

.kynx-cursor-ring,
.kynx-cursor-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
}

.kynx-cursor-ring {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(0, 212, 255, 0.65);
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.35);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.kynx-cursor-dot {
    width: 9px;
    height: 9px;
    background: #67e8f9;
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.72);
}

#kynxCursor.hover .kynx-cursor-ring {
    transform: translate(-50%, -50%) scale(1.28);
    border-color: rgba(56, 189, 248, 0.9);
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.5);
}

#kynxCursor.left-click .kynx-cursor-ring {
    transform: translate(-50%, -50%) scale(0.84);
    border-color: rgba(0, 212, 255, 1);
}

#kynxCursor.right-click .kynx-cursor-ring {
    transform: translate(-50%, -50%) scale(0.84);
    border-color: rgba(251, 146, 60, 1);
    box-shadow: 0 0 26px rgba(251, 146, 60, 0.55);
}

#kynxCursor.left-click .kynx-cursor-dot {
    background: #22d3ee;
}

#kynxCursor.right-click .kynx-cursor-dot {
    background: #fb923c;
    box-shadow: 0 0 14px rgba(251, 146, 60, 0.72);
}

.kynx-click-burst {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 11659;
    transform: translate(-50%, -50%) scale(0.3);
}

.kynx-click-burst.left {
    border: 2px solid rgba(34, 211, 238, 0.9);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.45);
    animation: kynxBurstLeft 0.46s ease-out forwards;
}

.kynx-click-burst.right {
    border: 2px solid rgba(251, 146, 60, 0.9);
    box-shadow: 0 0 24px rgba(251, 146, 60, 0.45);
    animation: kynxBurstRight 0.46s ease-out forwards;
}

@keyframes kynxBurstLeft {
    to {
        transform: translate(-50%, -50%) scale(5.3);
        opacity: 0;
    }
}

@keyframes kynxBurstRight {
    to {
        transform: translate(-50%, -50%) scale(5.3);
        opacity: 0;
    }
}

#kynxSpiderCanvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0.95;
    mix-blend-mode: normal;
}

#kynxQuickMenuRoot {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 11520;
}

.kynx-menu-toggle {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(34, 211, 238, 0.42);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.45), 0 0 24px rgba(0, 212, 255, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    backdrop-filter: blur(10px);
}

.kynx-menu-toggle span {
    display: block;
    width: 22px;
    height: 2.5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #67e8f9 0%, #0ea5e9 100%);
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.kynx-menu-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(103, 232, 249, 0.86);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.58), 0 0 28px rgba(34, 211, 238, 0.35);
}

.kynx-menu-toggle:focus-visible {
    outline: 2px solid rgba(125, 211, 252, 0.9);
    outline-offset: 2px;
}

.kynx-sheet-open .kynx-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.kynx-sheet-open .kynx-menu-toggle span:nth-child(2) {
    opacity: 0;
}

.kynx-sheet-open .kynx-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.kynx-quickmenu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11510;
    opacity: 0;
    backdrop-filter: blur(1px);
    background: rgba(2, 6, 23, 0.35);
    transition: opacity 0.24s ease;
}

.kynx-quickmenu-backdrop.open {
    opacity: 1;
}

.kynx-bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 11515;
    max-width: min(900px, calc(100vw - 1rem));
    margin-inline: auto;
    border-radius: 28px 28px 0 0;
    border: 1px solid rgba(34, 211, 238, 0.28);
    background:
        radial-gradient(circle at 20% -10%, rgba(34, 211, 238, 0.18), transparent 55%),
        linear-gradient(165deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.98));
    box-shadow: 0 -18px 50px rgba(2, 6, 23, 0.55);
    transform: translateY(105%);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
    padding: 0.9rem 1rem 1.35rem;
}

.kynx-bottom-sheet.open {
    transform: translateY(0);
}

.kynx-sheet-handle {
    width: 56px;
    height: 6px;
    border-radius: 999px;
    background: rgba(125, 211, 252, 0.55);
    margin: 0 auto 0.8rem;
}

.kynx-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}

.kynx-sheet-header h3 {
    margin: 0;
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.kynx-sheet-close {
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    border-radius: 999px;
    padding: 0.36rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.kynx-sheet-close:hover {
    border-color: rgba(125, 211, 252, 0.76);
    transform: translateY(-1px);
}

.kynx-sheet-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
}

.kynx-sheet-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(34, 211, 238, 0.2);
    background: rgba(15, 23, 42, 0.56);
    color: #dbeafe;
    text-decoration: none;
    padding: 0.62rem 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.kynx-sheet-link:hover {
    transform: translateY(-2px);
    border-color: rgba(103, 232, 249, 0.66);
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.25);
}

body.kynx-sheet-open {
    overflow: hidden;
}

.light .kynx-menu-toggle {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(235, 244, 255, 0.96));
    border-color: rgba(14, 116, 255, 0.26);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.16), 0 0 16px rgba(14, 116, 255, 0.18);
}

.light .kynx-menu-toggle span {
    background: linear-gradient(90deg, #0369a1 0%, #1d4ed8 100%);
}

.light .kynx-bottom-sheet {
    background:
        radial-gradient(circle at 20% -10%, rgba(2, 132, 199, 0.15), transparent 55%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(236, 245, 255, 0.98));
    border-color: rgba(14, 116, 255, 0.18);
    box-shadow: 0 -18px 45px rgba(15, 23, 42, 0.14);
}

.light .kynx-sheet-header h3 {
    color: #0f172a;
}

.light .kynx-sheet-link {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(14, 116, 255, 0.22);
    color: #0f172a;
}

.light .kynx-sheet-close {
    background: rgba(241, 245, 249, 0.9);
    color: #0f172a;
    border-color: rgba(148, 163, 184, 0.4);
}

@media (max-width: 720px) {
    #kynxQuickMenuRoot {
        top: 0.8rem;
        right: 0.8rem;
    }

    .kynx-menu-toggle {
        width: 44px;
        height: 44px;
    }

    .kynx-bottom-sheet {
        max-width: calc(100vw - 0.5rem);
        padding-bottom: max(1.2rem, env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        display: none;
    }

    .kynx-reveal,
    .lang-transition,
    .lang-toggle-pulse,
    body.page-leave,
    .kynx-tilt-card,
    #kynxSpiderCanvas {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    #kynxCursor,
    #kynxSpiderCanvas,
    .kynx-click-burst {
        display: none !important;
    }

    .kynx-bottom-sheet,
    .kynx-menu-toggle,
    .kynx-quickmenu-backdrop {
        transition: none !important;
    }
}