:root {
        color-scheme: dark;
        --bg: #09121f;
        --panel: rgba(255, 255, 255, 0.05);
        --panel-strong: rgba(255, 255, 255, 0.08);
        --line: rgba(255, 255, 255, 0.12);
        --text: #f7f5ef;
        --muted: rgba(247, 245, 239, 0.72);
        --accent: #f1ad4d;
        --accent-soft: rgba(241, 173, 77, 0.16);
        --green: #7fd29b;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        background:
          radial-gradient(circle at top right, rgba(241, 173, 77, 0.18), transparent 32%),
          linear-gradient(180deg, #102238 0%, #09121f 60%, #07101b 100%);
        color: var(--text);
        font-family: "Noto Sans TC", sans-serif;
        line-height: 1.75;
      }
      a { color: inherit; }
      .shell { max-width: 1180px; margin: 0 auto; padding: 32px 20px 80px; }
      .topbar {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32px;
      }
      .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        font-weight: 800;
        letter-spacing: 0.02em;
      }
      .brand-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(241, 173, 77, 0.28), rgba(241, 173, 77, 0.08));
        border: 1px solid rgba(241, 173, 77, 0.28);
        color: var(--accent);
        font-family: "Outfit", sans-serif;
      }
      .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .nav-links a {
        text-decoration: none;
        color: var(--muted);
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.03);
      }
      .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin: -8px 0 22px;
        color: rgba(247,245,239,0.68);
        font-size: 0.9rem;
      }
      .breadcrumb a {
        color: rgba(247,245,239,0.8);
        text-decoration: none;
      }
      .breadcrumb a:hover {
        color: var(--text);
      }
      .breadcrumb-sep {
        color: rgba(247,245,239,0.28);
      }
      .hero {
        padding: 36px;
        border-radius: 28px;
        border: 1px solid var(--line);
        background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.28);
        position: relative;
        overflow: hidden;
      }
      .hero::after {
        content: "";
        position: absolute;
        inset: auto -5% -30% 45%;
        height: 240px;
        background: radial-gradient(circle, rgba(241, 173, 77, 0.2), transparent 65%);
        pointer-events: none;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        color: var(--accent);
        background: var(--accent-soft);
        border: 1px solid rgba(241, 173, 77, 0.24);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.06em;
      }
      h1, h2, h3 {
        font-family: "Outfit", "Noto Sans TC", sans-serif;
        line-height: 1.2;
        margin: 0;
      }
      h1 { font-size: clamp(2.3rem, 5vw, 4rem); margin-top: 18px; }
      h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 18px; }
      h3 { font-size: 1.1rem; }
      .lead {
        max-width: 820px;
        margin-top: 18px;
        color: var(--muted);
        font-size: 1.04rem;
      }
      .alias-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 22px;
      }
      .pill {
        display: inline-flex;
        padding: 6px 11px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--muted);
        font-size: 13px;
      }
      .grid {
        display: grid;
        gap: 20px;
        margin-top: 26px;
      }
      .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .hero-split {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
        gap: 28px;
        align-items: end;
      }
      .hero-copy {
        position: relative;
        z-index: 1;
      }
      .editorial-note {
        position: relative;
        z-index: 1;
        align-self: stretch;
        border-radius: 24px;
        border: 1px solid rgba(241, 173, 77, 0.18);
        background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
        padding: 22px;
      }
      .editorial-note h3 {
        margin-bottom: 12px;
      }
      .editorial-note ul {
        margin-top: 10px;
      }
      .hero-aside {
        min-height: 100%;
      }
      .visual-panel {
        position: relative;
        z-index: 1;
        align-self: stretch;
        border-radius: 24px;
        border: 1px solid rgba(241, 173, 77, 0.18);
        background:
          linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)),
          radial-gradient(circle at top right, rgba(241,173,77,0.1), transparent 38%);
        padding: 22px;
        display: grid;
        gap: 16px;
      }
      .visual-meta h3 {
        margin-bottom: 10px;
      }
      .visual-meta p {
        margin: 0;
        color: var(--muted);
      }
      .visual-canvas {
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,0.08);
        background: linear-gradient(180deg, rgba(9,18,31,0.94), rgba(15,28,44,0.88));
        padding: 16px;
        min-height: 290px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      }
      .visual-highlights {
        list-style: none;
        padding-left: 0;
        display: grid;
        gap: 10px;
        margin: 0;
      }
      .visual-highlights li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        color: rgba(247,245,239,0.86);
      }
      .visual-dot {
        width: 8px;
        height: 8px;
        flex: 0 0 8px;
        border-radius: 999px;
        background: var(--accent);
        margin-top: 10px;
        box-shadow: 0 0 12px rgba(241,173,77,0.48);
      }
      .mock-window {
        display: grid;
        gap: 14px;
      }
      .mock-window-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        color: rgba(247,245,239,0.72);
        font-size: 0.82rem;
      }
      .mock-window-bar span {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(255,255,255,0.22);
      }
      .mock-window-bar strong {
        margin-left: 4px;
        color: rgba(247,245,239,0.84);
      }
      .code-visual {
        margin: 0;
        padding: 16px;
        border-radius: 18px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        overflow-x: auto;
        display: grid;
        gap: 10px;
      }
      .code-visual code {
        display: block;
        color: #d9ecff;
        font-family: "SFMono-Regular", "Menlo", monospace;
        font-size: 0.82rem;
        white-space: pre-wrap;
        word-break: break-word;
      }
      .focus-chip {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        padding: 12px 14px;
        border-radius: 16px;
        background: rgba(241,173,77,0.1);
        border: 1px solid rgba(241,173,77,0.18);
      }
      .focus-chip span,
      .focus-chip strong {
        display: block;
      }
      .focus-chip span {
        color: rgba(247,245,239,0.72);
        font-size: 0.82rem;
      }
      .focus-chip strong {
        color: var(--text);
      }
      .query-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
        color: rgba(247,245,239,0.86);
        font-size: 0.82rem;
      }
      .serp-visual, .surface-visual, .architecture-visual, .analytics-visual, .pipeline-visual, .result-panel-visual {
        display: grid;
        gap: 14px;
        height: 100%;
      }
      .serp-card,
      .surface-card,
      .metric-card,
      .candidate-card,
      .output-panel {
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.04);
        padding: 14px;
      }
      .serp-source {
        display: flex;
        gap: 12px;
        align-items: center;
        margin-bottom: 12px;
      }
      .favicon-badge {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(241,173,77,0.14);
        border: 1px solid rgba(241,173,77,0.2);
        color: var(--accent);
      }
      .serp-source strong,
      .serp-card h4,
      .surface-card strong,
      .metric-card strong,
      .candidate-card strong,
      .output-panel strong,
      .pipeline-stage strong,
      .arch-node strong {
        display: block;
        color: var(--text);
      }
      .serp-source span,
      .surface-card span,
      .metric-card span,
      .candidate-card span,
      .output-panel span,
      .analytics-head span,
      .arch-title,
      .path-strip {
        color: rgba(247,245,239,0.68);
        font-size: 0.82rem;
      }
      .serp-card h4 {
        color: #9bc3ff;
        margin-bottom: 8px;
        font-size: 1rem;
      }
      .serp-card p {
        margin: 0;
        color: rgba(247,245,239,0.82);
      }
      .badge-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
      }
      .mini-badge {
        padding: 5px 9px;
        border-radius: 999px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
        color: rgba(247,245,239,0.72);
        font-size: 0.78rem;
      }
      .search-bar,
      .analytics-head {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
      }
      .search-label {
        color: var(--accent);
        font-size: 0.8rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .surface-stack,
      .candidate-list {
        display: grid;
        gap: 10px;
      }
      .arch-tree {
        display: grid;
        gap: 10px;
      }
      .arch-node {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 12px 14px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.04);
      }
      .arch-index {
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(241,173,77,0.14);
        color: var(--accent);
        font-size: 0.78rem;
      }
      .path-strip,
      .pipeline-footer {
        padding: 12px 14px;
        border-radius: 16px;
        background: rgba(241,173,77,0.08);
        border: 1px solid rgba(241,173,77,0.14);
      }
      .metric-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .pipeline-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }
      .pipeline-stage {
        flex: 1 1 120px;
        min-width: 110px;
        padding: 12px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.04);
      }
      .pipeline-arrow {
        color: rgba(241,173,77,0.86);
        font-weight: 700;
      }
      .card {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 24px;
        padding: 24px;
        backdrop-filter: blur(10px);
      }
      .card p:last-child, .card ul:last-child, .card ol:last-child { margin-bottom: 0; }
      section { margin-top: 28px; }
      ul, ol { padding-left: 1.2rem; margin: 0; }
      .vendor-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }
      .vendor-row {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }
      .vendor-card a, .source-list a, .topic-list a, .related-card {
        color: var(--accent);
      }
      .subtle-note {
        color: rgba(247,245,239,0.68);
        font-size: 0.95rem;
      }
      .section-kicker {
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(127, 210, 155, 0.9);
        font-size: 12px;
        font-weight: 700;
      }
      .source-list {
        list-style: none;
        padding-left: 0;
      }
      .source-list li {
        display: grid;
        gap: 6px;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
      }
      .source-list li:last-child { border-bottom: 0; }
      .related-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }
      .related-card {
        display: block;
        text-decoration: none;
        border-radius: 18px;
        border: 1px solid var(--line);
        background: rgba(255,255,255,0.03);
        padding: 18px;
      }
      .related-card strong {
        display: block;
        margin-bottom: 6px;
        color: var(--text);
      }
      .related-card span {
        color: var(--muted);
        font-size: 14px;
      }
      footer {
        margin-top: 40px;
        padding: 3rem 0;
        border-top: 1px solid rgba(255,255,255,0.08);
        text-align: center;
        color: var(--muted);
      }
      .footer-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
        opacity: 0.5;
      }
      .footer-logo span {
        font-family: "Outfit", "Noto Sans TC", sans-serif;
        font-size: 1.125rem;
        font-weight: 700;
      }
      .topic-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      .topic-card {
        display: block;
        text-decoration: none;
        border-radius: 22px;
        border: 1px solid var(--line);
        background: var(--panel);
        padding: 22px;
        transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
      }
      .topic-card:hover, .term-card:hover, .related-card:hover {
        transform: translateY(-4px);
        border-color: rgba(241, 173, 77, 0.38);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
      }
      .topic-card p {
        color: var(--muted);
        margin-top: 10px;
        margin-bottom: 0;
      }
      .lane-stack {
        display: grid;
        gap: 18px;
      }
      .lane-card {
        border-radius: 26px;
        border: 1px solid rgba(241, 173, 77, 0.14);
        background:
          linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)),
          radial-gradient(circle at top right, rgba(241,173,77,0.08), transparent 30%);
        padding: 26px;
      }
      .lane-card h3 {
        margin-bottom: 8px;
      }
      .lane-card > p {
        color: var(--muted);
        margin-bottom: 18px;
      }
      .topic-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      .card-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        color: var(--accent);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
      }
      .term-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      .term-card {
        display: block;
        text-decoration: none;
        padding: 18px;
        border-radius: 20px;
        border: 1px solid var(--line);
        background: rgba(255,255,255,0.03);
      }
      .term-card strong {
        display: block;
        color: var(--text);
        margin-bottom: 5px;
      }
      .term-card span {
        display: block;
        color: var(--muted);
        font-size: 14px;
        margin-top: 4px;
      }
      .editorial-section {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 20px;
      }
      .article-intro {
        display: grid;
        gap: 16px;
      }
      .article-lead {
        max-width: 760px;
        font-size: 1.08rem;
        color: rgba(247,245,239,0.84);
      }
      .article-summary {
        max-width: 840px;
        color: var(--muted);
      }
      .article-divider {
        width: 96px;
        height: 1px;
        background: linear-gradient(90deg, rgba(241,173,77,0.72), rgba(241,173,77,0));
      }
      .article-section {
        display: grid;
        gap: 14px;
      }
      .article-section p {
        margin: 0;
      }
      .article-section .subtle-note {
        margin-top: 4px;
      }
      .teaching-callout {
        border-left: 3px solid rgba(241, 173, 77, 0.58);
        padding-left: 18px;
      }
      .topic-hero-copy {
        display: grid;
        gap: 14px;
        max-width: 760px;
      }
      .stage {
        animation: riseIn 700ms ease both;
      }
      .stage.stage-2 { animation-delay: 90ms; }
      .stage.stage-3 { animation-delay: 180ms; }
      @keyframes riseIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @media (max-width: 920px) {
        .grid-2, .grid-4, .vendor-grid, .related-grid, .topic-list, .term-list, .hero-split, .editorial-section, .topic-grid { grid-template-columns: 1fr; }
        .hero { padding: 26px; }
        .metric-grid {
          grid-template-columns: 1fr;
        }
      }