:root {
            /* 質感深沉工業灰色盤 */
            --bg: oklch(98% 0.003 30);        /* 帶極微暖意的石灰白底色 */
            --surface: oklch(100% 0 0);
            --fg: oklch(15% 0.01 30);         /* 深石墨灰，避免純黑的生硬 */
            --muted: oklch(48% 0.01 30);       /* 啞光灰 */
            --border: oklch(92% 0.005 30);

            /* 專業化學/高分子象徵色：琥珀金 / 鐵鏽橙 */
            --accent: oklch(62% 0.16 48);      /* 溫潤高質感赤土橙 (Terracotta) */
            --accent-soft: oklch(96% 0.02 48); /* 淺色半透明底色 */

            --font-display: 'Inter', -apple-system, system-ui, sans-serif;
            --font-body: 'Inter', -apple-system, system-ui, sans-serif;
            --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 24px;

            --container-width: 1280px;
            --header-height: 88px;
            --header-shrunk: 64px;
            --section-gap: 160px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font-body); background-color: var(--bg); color: var(--fg); line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

        .reveal { opacity: 0; transform: translateY(40px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        .reveal-left { opacity: 0; transform: translateX(-40px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-right { opacity: 0; transform: translateX(40px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }

        h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.025em; font-weight: 600; }
        .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
        .container { max-width: var(--container-width); margin: 0 auto; padding: 0 60px; }

        header {
            height: var(--header-height);
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(32px);
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 1000;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        header.shrunk { height: var(--header-shrunk); background: rgba(255, 255, 255, 0.98); box-shadow: 0 15px 40px rgba(0,0,0,0.04); }

        nav { display: flex; justify-content: space-between; align-items: center; height: 100%; }
        .logo { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 16px; transition: all 0.4s ease; }
        .logo-img { height: 40px; width: auto; display: block; border-radius: 2px; }
        .brand-name { display: flex; flex-direction: column; }
        .brand-name span:last-child { font-size: 9px; color: var(--muted); letter-spacing: 0.05em; font-weight: 500; text-transform: uppercase; margin-top: 2px; }

        .nav-links { display: flex; gap: 8px; font-size: 15px; font-weight: 500; height: 100%; align-items: center; }
        .nav-link { color: var(--muted); cursor: pointer; transition: 0.3s; padding: 10px 18px; border-radius: var(--radius-sm); position: relative; }
        .nav-link:hover { color: var(--fg); background: var(--bg); }
        .nav-link.active { color: var(--accent); font-weight: 600; }
        .nav-link.active::after { content: ''; position: absolute; bottom: -8px; left: 18px; right: 18px; height: 3px; background: var(--accent); animation: slideIn 0.5s ease; }
        .nav-dropdown-wrap { position: relative; height: 100%; display: flex; align-items: center; }
        .nav-dropdown-wrap .nav-link { border: 0; background: transparent; font-family: inherit; font-size: inherit; font-weight: inherit; }
        .nav-product-menu, .nav-about-menu { display: none; position: absolute; top: calc(100% - 1px); left: 50%; transform: translateX(-50%); width: 340px; max-height: min(620px, calc(100vh - 120px)); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: 0 24px 60px rgba(0,0,0,0.14); padding: 8px 0; z-index: 1200; }
        .nav-about-menu { width: 300px; }
        .nav-product-menu.open, .nav-about-menu.open { display: block; }
        .nav-product-link { width: 100%; min-height: 54px; padding: 12px 22px; display: grid; align-content: center; gap: 2px; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--fg); font-family: inherit; text-align: left; cursor: pointer; transition: 0.2s; }
        .nav-product-link:hover { background: var(--accent-soft); color: var(--accent); }
        .nav-product-link:last-child { border-bottom: 0; }
        .nav-product-name { font-size: 15px; font-weight: 800; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .nav-product-en { font-size: 10px; color: var(--muted); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mobile-menu-toggle, .mobile-menu-panel { display: none; }
        .mobile-menu-toggle { align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; background: var(--fg); color: white; border: 0; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
        .mobile-menu-icon { display: grid; gap: 4px; width: 16px; }
        .mobile-menu-icon span { display: block; height: 2px; background: currentColor; border-radius: 999px; }
        .mobile-menu-panel { position: absolute; left: 20px; right: 20px; top: calc(100% + 10px); padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 20px 48px rgba(0,0,0,0.12); }
        .mobile-menu-link { width: 100%; min-height: 48px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--fg); font-family: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
        .mobile-menu-link.active { background: var(--accent-soft); color: var(--accent); }

        @keyframes slideIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

        main { padding: 60px 0 120px; }

        .badge { display: inline-block; padding: 6px 16px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); font-size: 12px; font-weight: 700; border-radius: 4px; text-transform: uppercase; margin-bottom: 32px; letter-spacing: 0.1em; }
        .button { display: inline-flex; align-items: center; padding: 14px 40px; background: var(--fg); color: white; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: 0.4s; }
        .button:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

        .card { background: var(--surface); border: 1px solid var(--border); padding: 40px; border-radius: var(--radius-md); transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; justify-content: space-between; }

        .swd-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px; }
        .col-4 { grid-column: span 4; }
        .col-6 { grid-column: span 6; }
        .col-7 { grid-column: span 7; }
        .col-5 { grid-column: span 5; }

        .phi-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; background: var(--surface); border: none; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 80px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03); }
        .phi-row.flipped { grid-template-columns: 1.2fr 1fr; }
        .phi-img-side { width: 100%; height: 400px; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 40px; }
        .phi-img-side img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .phi-text-side { padding: 60px; }
        .phi-text-side h3 { font-size: 32px; color: var(--accent); margin-bottom: 24px; border-bottom: 3px solid var(--accent-soft); padding-bottom: 8px; display: inline-block; }
        .phi-tagline { font-size: 20px; font-weight: 700; color: var(--fg); margin-bottom: 32px; line-height: 1.4; }
        .phi-list { list-style: none; }
        .phi-list li { margin-bottom: 16px; padding-left: 28px; position: relative; font-size: 15px; color: var(--muted); }
        .phi-list li::before { content: '•'; position: absolute; left: 0; color: var(--accent); font-size: 24px; top: -4px; }
        .phi-list b { color: var(--fg); font-weight: 600; }

        .lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; margin-top: 48px; }
        .lab-item { background: white; border: 1px solid var(--border); padding: 24px; text-align: center; border-radius: var(--radius-md); transition: 0.3s; }
        .lab-item:hover { transform: translateY(-5px); border-color: var(--accent); }
        .lab-img-box { width: 100%; aspect-ratio: 4/3; background: var(--bg); margin-bottom: 20px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; border-radius: 4px; }
        .lab-img-box img { width: 100%; height: 100%; object-fit: cover; }
        .lab-item.needs-crop .lab-img-box img { height: 120%; object-position: center top; }

        .factory-frame { position: relative; width: 100%; max-height: 380px; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
        .factory-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }

        footer { background: var(--surface); border-top: 1px solid var(--border); padding: 100px 0 60px; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 80px; }

        .tabs { display: flex; gap: 8px; margin-bottom: 48px; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
        .tab { padding: 10px 24px; background: var(--bg); border: 1px solid var(--border); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 4px; color: var(--muted); transition: 0.3s; touch-action: manipulation; appearance: none; }
        .tab.active { background: var(--accent); color: white; border-color: var(--accent); }

        .table-container { width: 100%; overflow-x: auto; background: white; border: 1px solid var(--border); }
        table { width: 100%; border-collapse: collapse; }
        th { background: var(--bg); text-align: left; padding: 16px 24px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--border); }
        td { padding: 16px 24px; border-bottom: 1px solid var(--border); font-size: 14px; }

        .product-browser { display: block; }
        .product-index-panel, .product-preview-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
        .product-index-panel { display: none; padding: 24px; position: sticky; top: calc(var(--header-shrunk) + 24px); max-height: calc(100vh - 120px); overflow: auto; }
        .product-search { width: 100%; height: 46px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 14px; font-size: 14px; background: var(--bg); color: var(--fg); outline: none; }
        .product-search:focus { border-color: var(--accent); background: var(--surface); }
        .product-group-title { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; margin: 28px 0 10px; text-transform: uppercase; }
        .product-list-button { width: 100%; text-align: left; border: 0; border-radius: var(--radius-sm); padding: 13px 12px; background: transparent; color: var(--fg); cursor: pointer; transition: 0.25s; display: grid; gap: 3px; }
        .product-list-button:hover { background: var(--bg); }
        .product-list-button.active { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
        .product-list-name { font-size: 15px; font-weight: 700; line-height: 1.35; }
        .product-list-en { font-size: 10px; color: var(--muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .product-mobile-results { display: none; }
        .product-mobile-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; background: var(--surface); display: grid; gap: 12px; }
        .product-mobile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
        .product-mobile-title { font-size: 18px; font-weight: 800; line-height: 1.35; color: var(--fg); }
        .product-mobile-en { font-size: 11px; color: var(--accent); font-weight: 700; letter-spacing: 0.04em; line-height: 1.35; margin-top: 4px; }
        .product-mobile-meta { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: 5px 8px; font-size: 11px; color: var(--muted); background: var(--bg); white-space: nowrap; }
        .product-mobile-desc { font-size: 14px; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere; word-break: break-word; }
        .product-mobile-action { justify-self: start; min-height: 40px; padding: 9px 14px; font-size: 13px; }
        .product-preview-panel { min-height: 620px; padding: 56px; display: grid; grid-template-columns: 1fr; gap: 32px; }
        .product-preview-kicker { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
        .product-preview-title { font-size: 42px; line-height: 1.18; margin: 12px 0 10px; }
        .product-preview-en { font-size: 13px; color: var(--accent); font-weight: 700; letter-spacing: 0.08em; }
        .product-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .product-summary-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; background: var(--bg); min-height: 120px; }
        .product-summary-label { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
        .product-summary-value { font-size: 14px; color: var(--fg); line-height: 1.65; }
        .product-empty { padding: 32px 0; color: var(--muted); font-size: 15px; }
        .detail-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; gap: 16px; }

        @media (max-width: 1024px) {
            .phi-row, .phi-row.flipped { grid-template-columns: 1fr; }
            .phi-img-side { height: 300px; }
            .product-browser { grid-template-columns: 1fr; }
            .product-index-panel { position: static; max-height: none; }
            .product-preview-panel { min-height: auto; }
            .product-summary-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .nav-product-menu { display: none !important; }
            header .button { display: none; }
            header { overflow: visible; }
            nav { position: relative; }
            .logo { min-width: 0; gap: 10px; }
            .logo-img { height: 34px; }
            .brand-name { min-width: 0; }
            .brand-name span:first-child { font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .brand-name span:last-child { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .mobile-menu-toggle { display: inline-flex; flex: 0 0 auto; }
            .mobile-menu-panel.open { display: grid; gap: 4px; }
            .container { padding: 0 20px; }
            .footer-grid { grid-template-columns: 1fr; gap: 60px; }
            .swd-grid { grid-template-columns: 1fr; gap: 24px; }
            .col-5, .col-7 { grid-column: 1 / -1; }
            .detail-topbar { display: grid; grid-template-columns: 1fr; margin-bottom: 28px; }
            .detail-topbar .button { justify-self: start; }
            .badge { max-width: 100%; white-space: normal; letter-spacing: 0.06em; line-height: 1.5; }
            .swd-grid, .col-5, .col-7, .product-detail-visual, .product-detail-content, .product-index-panel, .product-mobile-card { min-width: 0; max-width: 100%; }
            .product-detail-visual { width: min(350px, calc(100vw - 40px)); padding: 24px !important; overflow: hidden; }
            .product-detail-content { width: min(350px, calc(100vw - 40px)); padding: 24px !important; min-height: auto !important; overflow: hidden; }
            .product-detail-content p, .product-detail-visual p { overflow-wrap: anywhere; word-break: break-word; }
            .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 28px; border-bottom: 0; padding-bottom: 0; }
            .tab { width: 100%; min-height: 48px; padding: 12px 10px; text-align: center; line-height: 1.25; }
            .table-container { -webkit-overflow-scrolling: touch; }
            table { min-width: 680px; }
            th, td { padding: 12px 14px; font-size: 13px; }
            .product-browser { display: block; }
            .product-index-panel { display: block; padding: 18px; background: transparent; border: 0; }
            .product-list-groups, .product-preview-panel { display: none; }
            .product-mobile-results { display: grid; gap: 14px; margin-top: 18px; }
            .product-group-title { margin: 22px 0 10px; }
            .product-search { height: 48px; background: var(--surface); font-size: 15px; }
            .product-preview-title { font-size: 30px; }
        }
        @media (max-width: 520px) {
            section { padding: 72px 0; }
            h2, .product-preview-title { font-size: 32px !important; line-height: 1.2; }
            .product-mobile-head { display: grid; gap: 8px; }
            .product-mobile-meta { justify-self: start; }
        }