:root {
            --paper: #ffffff;
            --ink: #000000;
            --ink-soft: rgba(0, 0, 0, 0.55);
            --ink-faint: rgba(0, 0, 0, 0.30);
            --font: "LXGW WenKai", "LXGW WenKai Screen", "Kaiti SC", "STKaiti", "KaiTi", "SimKai", serif;
            --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Courier New", monospace;
        }

        html.dark {
            --paper: #242424;
            --ink: #ffffff;
            --ink-soft: rgba(255, 255, 255, 0.55);
            --ink-faint: rgba(255, 255, 255, 0.30);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            background: var(--paper);
            color: var(--ink);
            font-family: var(--font);
            font-weight: 400;
            line-height: 1.9;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
        }

        a { color: inherit; text-decoration: none; }

        img { display: block; max-width: 100%; }

        ::selection { background: var(--ink); color: var(--paper); }

        .nav {
            position: fixed; top: 0; left: 0; right: 0; height: 56px;
            background: var(--paper); border-bottom: 1px solid var(--ink); z-index: 100;
        }

        .nav-inner {
            max-width: 1080px; margin: 0 auto; padding: 0 28px; height: 100%;
            display: flex; align-items: center; justify-content: space-between;
        }

        .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; }

        .menu-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 34px; height: 34px; border: 1px solid var(--ink);
            background: transparent; cursor: pointer; color: var(--ink);
        }
        .menu-btn .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .menu-btn:hover { background: var(--ink); color: var(--paper); }

        .menu-overlay {
            position: fixed; inset: 0; z-index: 140;
            opacity: 0; visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }
        .menu-overlay.show { opacity: 1; visibility: visible; }
        .dropdown {
            position: fixed; top: 60px; right: 16px; z-index: 150;
            min-width: 190px;
            background: var(--paper); border: 1px solid var(--ink);
            padding: 6px 0;
            opacity: 0; visibility: hidden;
            transform: translateY(-10px);
            transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
        }
        .dropdown.open { opacity: 1; visibility: visible; transform: none; }
        .dropdown-link {
            display: block; padding: 11px 24px;
            font-size: 1.1rem; font-weight: 700; letter-spacing: 0.03em;
            color: var(--ink);
            opacity: 0; transform: translateY(-6px);
            transition: opacity 0.22s ease, transform 0.22s ease, background 0.15s ease, color 0.15s ease;
        }
        .dropdown.open .dropdown-link { opacity: 1; transform: none; }
        .dropdown.open .dropdown-link:nth-child(1) { transition-delay: 0.04s; }
        .dropdown.open .dropdown-link:nth-child(2) { transition-delay: 0.08s; }
        .dropdown.open .dropdown-link:nth-child(3) { transition-delay: 0.12s; }
        .dropdown.open .dropdown-link:nth-child(4) { transition-delay: 0.16s; }
        .dropdown.open .dropdown-link:nth-child(5) { transition-delay: 0.20s; }
        .dropdown-link:hover { background: var(--ink); color: var(--paper); }
        .dropdown-link.active { background: var(--ink); color: var(--paper); }

        .nav-right { display: flex; align-items: center; gap: 16px; }

        .theme-toggle {
            display: inline-flex; align-items: center; justify-content: center;
            width: 34px; height: 34px; border: 1px solid var(--ink);
            background: transparent; cursor: pointer; color: var(--ink);
        }

        .theme-toggle .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

        .theme-toggle:hover { background: var(--ink); color: var(--paper); }

        .footer { border-top: 1px solid var(--ink); padding: 52px 28px 64px; text-align: center; }

        .footer .row { font-size: 0.82rem; color: var(--ink-soft); }

        @keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

        @keyframes slideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

        @keyframes slideLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }

        @media (prefers-reduced-motion: no-preference) {
            .js .reveal {
                opacity: 0;
                transform: translateY(28px);
                transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
                transition-delay: var(--rd, 0s);
            }
            .js .reveal.in { opacity: 1; transform: none; }
            .anim-slide-right { animation: slideRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
            .anim-slide-left { animation: slideLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
        }