:root {
            --ink-950: #060914;
            --ink-900: #0a1020;
            --ink-850: #0f172a;
            --ink-800: #172036;
            --blue-500: #4c8dff;
            --blue-400: #68a5ff;
            --violet-500: #8b5cf6;
            --cyan-400: #37d6e8;
            --amber-400: #fbbf24;
            --surface: #ffffff;
            --surface-muted: #f5f7fb;
            --surface-soft: #eef3fb;
            --text-strong: #101828;
            --text-body: #344054;
            --text-muted: #667085;
            --line: #e4e7ec;
            --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.04);
            --shadow-md: 0 18px 44px rgba(16, 24, 40, 0.10);
            --shadow-dark: 0 30px 90px rgba(0, 0, 0, 0.35);
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 30px;
            --content: 1240px;
            --ease: 220ms cubic-bezier(.2, .8, .2, 1);
            --focus: 0 0 0 3px rgba(104, 165, 255, .42);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            min-width: 320px;
            background: var(--surface-muted);
            color: var(--text-body);
            font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
        }
        body.modal-open { overflow: hidden; }
        button, input, a { font: inherit; }
        button { color: inherit; }
        img { max-width: 100%; }
        a { color: inherit; }
        button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
            outline: none;
            box-shadow: var(--focus);
        }
        .skip-link {
            position: fixed;
            left: 12px;
            top: 12px;
            z-index: 5000;
            transform: translateY(-180%);
            border-radius: 10px;
            padding: 10px 14px;
            background: white;
            color: var(--ink-950);
            text-decoration: none;
            font-weight: 800;
        }
        .skip-link:focus { transform: translateY(0); }
        .container { width: min(calc(100% - 40px), var(--content)); margin-inline: auto; }
        .section { padding: 88px 0; }
        .section-kicker {
            margin: 0 0 12px;
            color: #2f6ee9;
            font-size: .78rem;
            font-weight: 850;
            letter-spacing: .14em;
            text-transform: uppercase;
        }
        .section-heading {
            margin: 0;
            max-width: 780px;
            color: var(--text-strong);
            font-size: clamp(2rem, 4vw, 3.35rem);
            line-height: 1.1;
            letter-spacing: -.045em;
        }
        .section-copy {
            margin: 18px 0 0;
            max-width: 700px;
            color: var(--text-muted);
            font-size: clamp(1rem, 2vw, 1.16rem);
        }
        .section-heading-row {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 36px;
        }
        .text-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 44px;
            color: #245fc8;
            text-decoration: none;
            font-weight: 800;
            white-space: nowrap;
        }
        .text-link:hover { color: #164ba9; }
        .lang-secondary {
            display: block;
            margin-top: .26em;
            font-size: .78em;
            font-weight: 520;
            line-height: 1.42;
            opacity: .75;
        }
        .lang-secondary-inline {
            display: inline;
            margin: 0 0 0 .38em;
            font-size: .94em;
        }

        /* Header */
        .site-header {
            position: absolute;
            inset: 0 0 auto;
            z-index: 1000;
            padding: max(14px, env(safe-area-inset-top)) 0 10px;
        }
        .header-shell {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 22px;
            min-height: 58px;
            padding: 8px 10px 8px 12px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 18px;
            background: rgba(7, 11, 24, .68);
            box-shadow: 0 18px 50px rgba(0,0,0,.22);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .logo-area {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 44px;
            border-radius: 12px;
            color: white;
            text-decoration: none;
            font-weight: 900;
            letter-spacing: .04em;
        }
        .logo-img {
            width: 38px;
            height: 38px;
            border-radius: 11px;
            object-fit: cover;
            box-shadow: 0 6px 20px rgba(0,0,0,.24);
        }
        .site-title { white-space: nowrap; }
        .primary-nav { min-width: 0; overflow: auto hidden; scrollbar-width: none; }
        .primary-nav::-webkit-scrollbar { display: none; }
        .primary-nav ul {
            display: flex;
            justify-content: center;
            gap: 4px;
            min-width: max-content;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .primary-nav a {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            padding: 7px 11px;
            border-radius: 10px;
            color: rgba(255,255,255,.72);
            text-decoration: none;
            font-size: .88rem;
            font-weight: 720;
            transition: background var(--ease), color var(--ease);
        }
        .primary-nav a:hover { background: rgba(255,255,255,.08); color: white; }
        .header-actions { display: flex; align-items: center; gap: 7px; }
        .home-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 40px;
            padding: 7px 11px;
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 11px;
            background: rgba(255,255,255,.06);
            color: white;
            text-decoration: none;
            font-size: .86rem;
            font-weight: 760;
        }
        .language-switcher {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 3px;
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 11px;
            background: rgba(255,255,255,.06);
        }
        .language-switcher button {
            min-width: 36px;
            min-height: 34px;
            padding: 4px 8px;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: rgba(255,255,255,.65);
            cursor: pointer;
            font-size: .76rem;
            font-weight: 850;
        }
        .language-switcher button[aria-pressed="true"] { background: white; color: var(--ink-950); }

        /* Hero */
        .hero {
            position: relative;
            min-height: min(920px, 100svh);
            overflow: hidden;
            background:
                radial-gradient(circle at 12% 20%, rgba(76,141,255,.22), transparent 32%),
                radial-gradient(circle at 86% 22%, rgba(139,92,246,.20), transparent 31%),
                linear-gradient(145deg, #050814 0%, #0a1022 50%, #10182e 100%);
            color: white;
        }
        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .22;
            background-image:
                linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
            background-size: 58px 58px;
            mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
        }
        .hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 170px;
            background: linear-gradient(to bottom, transparent, var(--surface-muted));
            pointer-events: none;
        }
        .hero-inner {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr);
            align-items: center;
            gap: 54px;
            min-height: min(920px, 100svh);
            padding-top: 126px;
            padding-bottom: 120px;
        }
        .hero-copy { max-width: 720px; }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 22px;
            padding: 7px 12px;
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 999px;
            background: rgba(255,255,255,.06);
            color: rgba(255,255,255,.82);
            font-size: .82rem;
            font-weight: 760;
            letter-spacing: .04em;
        }
        .hero-badge-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--cyan-400);
            box-shadow: 0 0 18px rgba(55,214,232,.8);
        }
        .hero-title {
            margin: 0;
            color: white;
            font-size: clamp(3rem, 6.2vw, 6.2rem);
            font-weight: 900;
            line-height: .99;
            letter-spacing: -.065em;
            text-wrap: balance;
        }
        .hero-title .lang-secondary { color: rgba(255,255,255,.76); font-size: .52em; letter-spacing: -.035em; }
        .hero-description {
            max-width: 660px;
            margin: 28px 0 0;
            color: rgba(231,238,255,.72);
            font-size: clamp(1.05rem, 2vw, 1.24rem);
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 11px 18px;
            border: 1px solid transparent;
            border-radius: 13px;
            cursor: pointer;
            text-decoration: none;
            font-weight: 820;
            transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease);
        }
        .button:hover { transform: translateY(-2px); }
        .button-primary {
            background: white;
            color: var(--ink-950);
            box-shadow: 0 16px 40px rgba(255,255,255,.13);
        }
        .button-primary:hover { box-shadow: 0 20px 46px rgba(255,255,255,.19); }
        .button-ghost {
            border-color: rgba(255,255,255,.16);
            background: rgba(255,255,255,.06);
            color: white;
        }
        .button-ghost:hover { background: rgba(255,255,255,.11); }
        .hero-search {
            position: relative;
            max-width: 660px;
            margin-top: 32px;
        }
        .search-shell {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 58px;
            padding: 8px 9px 8px 17px;
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 16px;
            background: rgba(255,255,255,.09);
            box-shadow: inset 0 1px rgba(255,255,255,.06), 0 18px 55px rgba(0,0,0,.20);
            backdrop-filter: blur(16px);
        }
        .search-shell > i { color: rgba(255,255,255,.58); }
        .search-shell input {
            min-width: 0;
            flex: 1;
            border: 0;
            outline: 0;
            background: transparent;
            color: white;
            font-size: 1rem;
        }
        .search-shell input::placeholder { color: rgba(255,255,255,.48); }
        .search-submit {
            min-width: 44px;
            min-height: 42px;
            border: 0;
            border-radius: 11px;
            background: linear-gradient(135deg, var(--blue-500), var(--violet-500));
            color: white;
            cursor: pointer;
        }
        .hero-hints { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
        .hero-hint {
            min-height: 36px;
            padding: 6px 11px;
            border: 1px solid rgba(255,255,255,.11);
            border-radius: 999px;
            background: rgba(255,255,255,.04);
            color: rgba(255,255,255,.68);
            cursor: pointer;
            font-size: .82rem;
        }
        .hero-hint:hover { color: white; background: rgba(255,255,255,.08); }
        .hero-visual {
            position: relative;
            min-height: 500px;
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 34px;
            background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
            box-shadow: var(--shadow-dark), inset 0 1px rgba(255,255,255,.12);
            overflow: hidden;
            isolation: isolate;
        }
        .hero-visual::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background:
                radial-gradient(circle at 28% 22%, rgba(55,214,232,.18), transparent 25%),
                radial-gradient(circle at 75% 70%, rgba(139,92,246,.22), transparent 33%);
        }
        #math-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
        .visual-caption {
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: 22px;
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 18px;
            padding: 16px 18px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 18px;
            background: rgba(5,8,20,.64);
            backdrop-filter: blur(16px);
        }
        .visual-caption strong { display: block; color: white; font-size: 1rem; }
        .visual-caption span { color: rgba(255,255,255,.58); font-size: .84rem; }
        .visual-equation {
            color: rgba(255,255,255,.84);
            font-family: "Times New Roman", serif;
            font-size: clamp(1.05rem, 2vw, 1.35rem);
            white-space: nowrap;
        }