:root {
            --bg: #0a0a0b;
            --bg2: #0f0f12;
            --fg: #fafafa;
            --muted: rgba(250, 250, 250, .66);
            --muted2: rgba(250, 250, 250, .42);
            --border: rgba(250, 250, 250, .10);
            --border2: rgba(250, 250, 250, .14);
            --accent: #ff7a45;
            /* soft warm orange */
            --accent2: rgba(255, 122, 69, .18);
            --accent3: rgba(255, 122, 69, .08);
            --shadow: 0 18px 60px rgba(0, 0, 0, .55);
        }

        html,
        body {
            height: 100%;
            /* Hide scrollbar completely */
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
        ::-webkit-scrollbar {
            display: none;
        }

        body {
            font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            background: var(--bg);
            color: var(--fg);
            overflow-x: hidden;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        /* Subtle "light" without gradients-as-background: we use a very faint radial glow only on hover/interaction via CSS variables */
        .spotlight {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 5;
            opacity: .55;
            mix-blend-mode: screen;
            background:
                radial-gradient(220px 220px at var(--sx, -999px) var(--sy, -999px), rgba(255, 122, 69, .18), transparent 62%),
                radial-gradient(520px 520px at var(--sx2, -999px) var(--sy2, -999px), rgba(255, 122, 69, .08), transparent 60%);
            transition: opacity .25s ease;
        }

        /* Cursor ring (minimal, warm) */
        .cursor-ring {
            position: fixed;
            width: 22px;
            height: 22px;
            border-radius: 999px;
            border: 1px solid rgba(255, 122, 69, .45);
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 60;
            opacity: .9;
            transition: width .18s ease, height .18s ease, opacity .18s ease, border-color .18s ease;
            box-shadow: 0 0 0 6px rgba(255, 122, 69, .04);
        }

        .cursor-ring.is-down {
            width: 14px;
            height: 14px;
            opacity: .75;
            border-color: rgba(255, 122, 69, .65);
        }

        .cursor-ring.is-hidden {
            opacity: 0;
        }

        /* shadcn-like primitives */
        .card {
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, .02);
            border-radius: 16px;
            box-shadow: var(--shadow);
        }

        .card.flat {
            box-shadow: none;
        }

        .subtle-border {
            border: 1px solid var(--border);
        }

        .hairline {
            border-top: 1px solid var(--border);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .25rem;
            white-space: nowrap;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.95rem;
            line-height: 1;
            padding: .95rem 1.05rem;
            border: 1px solid var(--border2);
            background: rgba(255, 255, 255, .03);
            color: var(--fg);
            transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
            will-change: transform;
        }

        .btn:hover {
            border-color: rgba(255, 122, 69, .35);
            background: rgba(255, 122, 69, .08);
            transform: translateY(-1px);
            box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
        }

        .btn:active {
            transform: translateY(0px) scale(.99);
        }

        .btn.primary {
            border-color: rgba(255, 122, 69, .45);
            background: rgba(255, 122, 69, .12);
        }

        .btn.primary:hover {
            background: rgba(255, 122, 69, .16);
        }

        /* Form elements */
        .input-field {
            width: 100%;
            background: rgba(255, 255, 255, .03);
            border: 1px solid var(--border2);
            border-radius: 12px;
            padding: .85rem 1rem;
            color: var(--fg);
            font-family: inherit;
            font-size: 0.95rem;
            outline: none;
            transition: border-color .18s ease, background .18s ease;
        }

        .input-field:focus {
            border-color: rgba(255, 122, 69, .45);
            background: rgba(255, 122, 69, .04);
        }

        .input-field::placeholder {
            color: var(--muted2);
        }

        .kbd {
            border: 1px solid var(--border2);
            background: rgba(255, 255, 255, .03);
            padding: .2rem .45rem;
            border-radius: 8px;
            font-size: .8rem;
            color: var(--muted);
        }

        /* Standardized Icon Box */
        .icon-box {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 12px;
            border: 2px solid var(--border);
            background: rgba(255, 122, 69, .08);
            color: var(--fg);
            flex-shrink: 0;
        }

        .icon-box.ghost {
            background: rgba(255, 255, 255, .02);
            width: 2.25rem;
            height: 2.25rem;
        }

        .icon-box.sm {
            width: 2.25rem;
            height: 2.25rem;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            white-space: nowrap;
            padding: .25rem .35rem;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, .02);
            color: var(--muted);
            font-size: .75rem;
            letter-spacing: .2px;
        }

        /* Hero kinetic typography */
        .name {
            font-family: "Fraunces", serif;
            letter-spacing: -0.02em;
        }

        .split-letters span {
            display: inline-block;
            opacity: 0;
            transform: translateY(18px) rotate(1.5deg);
            filter: blur(6px);
            animation: riseIn 1.0s cubic-bezier(.2, .8, .2, 1) forwards;
            animation-delay: calc(var(--i) * 48ms + 120ms);
        }

        @keyframes riseIn {
            to {
                opacity: 1;
                transform: translateY(0) rotate(0deg);
                filter: blur(0);
            }
        }

        /* Underline path draw */
        .stroke-draw {
            stroke-dasharray: 520;
            stroke-dashoffset: 520;
            animation: draw 1.2s cubic-bezier(.2, .8, .2, 1) forwards;
            animation-delay: .55s;
        }

        @keyframes draw {
            to {
                stroke-dashoffset: 0;
            }
        }

        /* Reveal on scroll */
        .reveal {
            opacity: 0;
            transform: translateY(18px);
            filter: blur(6px);
            transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s cubic-bezier(.2, .8, .2, 1);
        }

        .reveal.in {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

        /* Projects: "expanding sheet" interaction */
        .sheet {
            position: relative;
            overflow: hidden;
            transition: transform .22s ease, border-color .22s ease, background .22s ease;
        }

        .sheet:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 122, 69, .32);
            background: rgba(255, 122, 69, .06);
        }

        .sheet .meta {
            color: var(--muted);
        }

        .sheet .detail {
            max-height: 0px;
            opacity: 0;
            overflow: hidden;
            transition: max-height .55s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
        }

        .sheet.is-open .detail {
            max-height: 800px;
            opacity: 1;
        }

        /* Marquee line */
        .marquee {
            display: flex;
            gap: 2.5rem;
            white-space: nowrap;
            will-change: transform;
            animation: marquee 18s linear infinite;
        }

        @keyframes marquee {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-50%);
            }
        }

        /* Command Deck (shadcn-like dialog) */
        .deck-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .62);
            backdrop-filter: blur(10px);
            z-index: 80;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease;
        }

        .deck-backdrop.open {
            opacity: 1;
            pointer-events: auto;
        }

        .deck {
            position: fixed;
            left: 50%;
            top: 18vh;
            transform: translateX(-50%) scale(.98);
            width: min(720px, calc(100vw - 2rem));
            z-index: 90;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease, transform .2s ease;
        }

        .deck.open {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(-50%) scale(1);
        }

        /* Not a "void" background: the hero uses a crisp line sculpture (SVG) */
        .line-sculpture path {
            stroke: rgba(255, 122, 69, .38);
            stroke-width: 1.2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            vector-effect: non-scaling-stroke;
        }

        .line-sculpture .ghost {
            stroke: rgba(250, 250, 250, .10);
        }

        /* Small "scroll cue" */
        .scroll-cue {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 26px;
            margin: 0 auto;
            width: max-content;
            opacity: .9;
        }

        .scroll-cue .line {
            height: 44px;
            width: 1px;
            background: linear-gradient(to bottom, rgba(255, 122, 69, 0), rgba(255, 122, 69, .7), rgba(255, 122, 69, 0));
            animation: drip 1.8s ease-in-out infinite;
        }

        @keyframes drip {
            0% {
                transform: translateY(-8px);
                opacity: .35;
            }

            50% {
                transform: translateY(8px);
                opacity: 1;
            }

            100% {
                transform: translateY(-8px);
                opacity: .35;
            }
        }

        /* Respect reduced motion */
        @media (prefers-reduced-motion: reduce) {

            .split-letters span,
            .stroke-draw,
            .marquee,
            .scroll-cue .line {
                animation: none !important;
            }

            .reveal {
                transition: none !important;
                opacity: 1;
                transform: none;
                filter: none;
            }

            .spotlight {
                display: none;
            }

            .cursor-ring {
                display: none;
            }
        }