.applications { --layer: #e0a19a; --layer-rgb: 224, 161, 154; }
.models { --layer: #b6ace2; --layer-rgb: 182, 172, 226; }
.infrastructure { --layer: #a9c5a1; --layer-rgb: 169, 197, 161; }
.chips { --layer: #96b9da; --layer-rgb: 150, 185, 218; }
.energy { --layer: #deba7f; --layer-rgb: 222, 186, 127; }
.map-mode-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.map-mode-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 2px 13px; color: var(--muted); font-size:14px; min-height: 40px; }
.map-mode-tabs button[aria-selected="true"] { border-color: var(--gold); color: var(--gold); }
.map-mode-tabs button:hover { color: var(--text); }
.ai-map-hero { display: flex; justify-content: space-between; align-items: center; gap: 35px; padding: 30px 35px; border: 1px solid #3e4438; background: radial-gradient(ellipse at 90% 30%, #394a332b, transparent 65%), #1b221a; border-radius: var(--radius); overflow: hidden; }
.ai-map-hero .eyebrow { color: #b6b093; font-size:12px; letter-spacing: 1.7px; }
.ai-map-hero h2 { font-size:29px; font-weight: 550; line-height: 1.6; letter-spacing: .5px; margin: 10px 0 12px; }
.ai-map-hero h2>span { display: block; color: var(--gold); }
.ai-map-hero p:not(.eyebrow) { font-size:14px; line-height: 1.9; color: #a7b09f; }
.ai-stack-preview { display: grid; width: 240px; flex-shrink: 0; gap: 5px; transform: rotate(-6deg) skewY(2deg); padding: 8px 12px; }
.ai-stack-preview>span { display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(var(--layer-rgb), .3); border-radius: 7px; padding: 7px 15px; color: var(--layer); background: rgba(var(--layer-rgb), .065); font-size:13px; box-shadow: 5px 5px 0 rgba(var(--layer-rgb), .05); }
.ai-stack-preview>span:nth-child(1) { margin-right: 24px; margin-left: 0; }
.ai-stack-preview>span:nth-child(2) { margin-right: 18px; margin-left: 6px; }
.ai-stack-preview>span:nth-child(3) { margin-right: 12px; margin-left: 12px; }
.ai-stack-preview>span:nth-child(4) { margin-right: 6px; margin-left: 18px; }
.ai-stack-preview>span:nth-child(5) { margin-right: 0; margin-left: 24px; }
.ai-stack-preview>span>span { font-size:11px; opacity: .7; letter-spacing: .3px; }
.ai-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 25px 0 18px; }
.ai-market-controls { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.ai-market-controls button { border: 1px solid transparent; border-radius: 6px; background: none; font-size:13px; padding: 7px 13px; min-height: 34px; color: var(--muted); white-space: nowrap; }
.ai-market-controls button[aria-pressed="true"] { border-color: #58543d; color: var(--gold); background: #303123; }
.ai-market-controls button:hover { color: var(--text); }
.ai-search { width: 295px; padding: 11px 13px; }
.ai-search input { font-size:14px; }
.ai-layer-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-layer-filters button { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--line); padding: 7px 12px; border-radius: 7px; color: var(--muted); min-height: 35px; font-size:13px; }
.ai-layer-filters button>.icon { width: 12px; height: 12px; }
.ai-layer-filters button[aria-pressed="true"] { background: #293025; border-color: #667354; color: var(--text); }
.ai-layer-filters button:hover { border-color: #667354; }
.layer-filter-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--layer); flex-shrink: 0; }
.ai-map-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 18px 0 17px; font-size:12px; color: var(--muted); min-height: 20px; }
.ai-map-meta .text-button { font-size:12px; flex-shrink: 0; }
#ai-supply-map { display: grid; gap: 14px; }
.ai-layer { display: grid; grid-template-columns: 176px minmax(0, 1fr); background: var(--panel); border: 1px solid rgba(var(--layer-rgb), .2); border-radius: 13px; position: relative; }
.ai-layer::after { content: ""; position: absolute; width: 1px; height: 15px; bottom: -15px; left: 86px; background: rgba(var(--layer-rgb), .4); }
.ai-layer:last-child::after { display: none; }
.ai-layer-label { border-right: 1px solid rgba(var(--layer-rgb), .13); background: linear-gradient(125deg, rgba(var(--layer-rgb), .085), rgba(var(--layer-rgb), .02)); border-radius: 12px 0 0 12px; padding: 23px 20px; display: flex; flex-direction: column; }
.ai-layer-number { display: flex; justify-content: space-between; align-items: center; color: var(--layer); margin-bottom: 12px; }
.ai-layer-number>span { font-size:13px; font-weight: 500; border: 1px solid rgba(var(--layer-rgb), .3); padding: 3px 7px; border-radius: 5px; }
.ai-layer-number>.icon { width: 21px; height: 21px; opacity: .75; stroke-width: 1.5; }
.ai-layer-label h3 { color: var(--layer); font-size:20px; font-weight: 550; line-height: 1.5; }
.ai-layer-english { font-size:12px; color: var(--layer); opacity: .7; letter-spacing: .5px; margin-top: 2px; }
.ai-layer-summary { color: #a8b0a2; font-size:12px; line-height: 1.8; margin-top: 16px; }
.ai-layer-body { min-width: 0; padding: 19px 20px 12px; }
.ai-market-row { display: flex; align-items: flex-start; gap: 12px; }
.ai-market-row+.ai-market-row { margin-top: 10px; }
.ai-market-label { display: flex; flex-direction: column; align-items: center; width: 32px; min-width: 32px; font-size:12px; padding-top: 12px; line-height: 1.5; }
.ai-market-label small { font-size:11px; opacity: .55; margin-top: 2px; letter-spacing: .5px; }
.ai-market-label.tw, .ai-detail-market.tw { color: #ddaba1; }
.ai-market-label.us, .ai-detail-market.us { color: #a1bdd6; }
.ai-company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(103px, 1fr)); gap: 8px; flex: 1; min-width: 0; }
.ai-company-node { display: flex; flex-direction: column; align-items: stretch; text-align: left; min-width: 0; min-height: 83px; padding: 9px 10px; border: 1px solid #354034; background: #121913; border-radius: 8px; transition: border-color .15s, background .15s, transform .15s; }
.ai-company-node:hover { border-color: var(--layer); background: rgba(var(--layer-rgb), .055); transform: translateY(-2px); }
.ai-company-node[aria-pressed="true"] { border-color: var(--layer); background: rgba(var(--layer-rgb), .08); box-shadow: 0 0 0 1px rgba(var(--layer-rgb), .1); }
.ai-node-heading { display: flex; justify-content: space-between; gap: 4px; align-items: center; }
.ai-node-heading strong { font-size:15px; font-weight: 600; letter-spacing: .2px; font-variant-numeric: tabular-nums; }
.ai-company-node.tw strong { color: #e5bbb0; }
.ai-company-node.us strong { color: #b6cde0; }
.ai-node-heading>.icon { width: 10px; height: 10px; opacity: .3; }
.ai-company-node:hover .ai-node-heading>.icon { opacity: 1; }
.ai-node-name { font-size:13px; color: #d8dfd2; line-height: 1.5; margin-top: 3px; overflow-wrap: anywhere; }
.ai-company-node small { font-size:11px; line-height: 1.6; color: #939e89; margin-top: 4px; overflow-wrap: anywhere; }
.ai-market-empty { grid-column: 1/-1; font-size:12px; line-height: 1.8; color: #98a28f; padding: 12px 2px; }
.ai-layer-insight { margin: 13px 0 0 44px; border-top: 1px solid #313a2c; padding-top: 10px; }
.ai-layer-insight summary { display: flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; color: #a1ab97; font-size:12px; line-height: 1.8; }
.ai-layer-insight summary::-webkit-details-marker { display: none; }
.ai-layer-insight summary>.icon { width: 11px; height: 11px; color: var(--layer); }
.ai-insight-label { display: inline-flex; gap: 5px; align-items: center; margin-left: auto; color: var(--layer); white-space: nowrap; }
.ai-insight-label>.icon { width: 11px; height: 11px; transition: transform .15s; }
.ai-layer-insight[open] .ai-insight-label>.icon { transform: rotate(180deg); }
.ai-layer-insight p { font-size:13px; color: #bdc6b3; line-height: 1.8; margin: 10px 0 5px; }
.ai-map-footnote { margin: 22px 0 28px; font-size:12px; line-height: 1.9; color: #8f9a83; }
.ai-map-footnote p+p { margin-top: 7px; }
#ai-map-source { display: flex; flex-wrap: wrap; gap: 5px 7px; align-items: center; }
#ai-map-source>span { margin-left: auto; }
#ai-map-source a { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); }
#ai-map-source a>.icon { width: 10px; height: 10px; }
.ai-company-dialog { width: min(560px, calc(100% - 32px)); padding: 27px; }
.ai-detail-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ai-detail-market { font-size:13px; letter-spacing: .4px; }
.ai-company-dialog .eyebrow { color: var(--muted); font-size:12px; }
.ai-company-dialog h2 { font-size:27px; margin: 6px 0 9px; }
.ai-detail-intro { font-size:13px; color: var(--muted); line-height: 1.8; }
.ai-detail-roles { margin-top: 24px; display: grid; gap: 15px; }
.ai-detail-role { border: 1px solid rgba(var(--layer-rgb), .2); border-radius: 9px; background: rgba(var(--layer-rgb), .025); padding: 15px; }
.ai-detail-role h3 { display: flex; align-items: center; gap: 7px; color: var(--layer); font-size:14px; font-weight: 500; flex-wrap: wrap; }
.ai-detail-role h3>span:last-child { font-size:12px; color: var(--muted); margin-left: auto; }
.ai-detail-role p { color: #b2bca7; font-size:14px; line-height: 1.8; margin-top: 10px; }
.ai-detail-role a { display: inline-flex; gap: 6px; align-items: center; color: var(--layer); font-size:12px; margin-top: 12px; }
.ai-detail-role a:hover { text-decoration: underline; }
.ai-detail-role a>.icon { width: 11px; height: 11px; }
.ai-detail-related { border-top: 1px solid var(--line); margin-top: 23px; padding-top: 16px; }
.ai-detail-related>p { font-size:12px; color: var(--muted); margin-bottom: 12px; line-height: 1.8; }
.ai-detail-related>div { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-detail-related .secondary-button { font-size:13px; }
.ai-detail-note { color: var(--faint); font-size:12px; line-height: 1.8; margin-top: 20px; }
@media (max-width: 1100px) {
  .ai-map-hero { padding: 26px; }
  .ai-map-hero h2 { font-size:26px; }
  .ai-stack-preview { width: 200px; }
  .ai-layer { grid-template-columns: 150px minmax(0, 1fr); }
  .ai-layer-label { padding: 20px 17px; }
  .ai-layer-label h3 { font-size:18px; }
  .ai-layer::after { left: 74px; }
  .ai-layer-body { padding: 17px 15px 12px; }
  .ai-company-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
  .ai-map-hero p:not(.eyebrow) { font-size:13px; }
  #ai-map-source>span { width: 100%; margin-left: 0; }
}
@media (max-width: 760px) {
  .ai-map-hero { gap: 15px; padding: 24px; }
  .ai-stack-preview { width: 130px; padding: 4px 0; }
  .ai-stack-preview>span { font-size:12px; padding: 7px 10px; }
  .ai-stack-preview>span>span { display: none; }
  .ai-map-hero h2 { font-size:24px; }
  .ai-map-toolbar { gap: 12px; flex-wrap: wrap; }
  .ai-search { flex: 1; min-width: 200px; }
  .ai-layer { grid-template-columns: 1fr; }
  .ai-layer-label { display: grid; grid-template-columns: 42px auto; gap: 0 13px; padding: 17px 18px; border-right: 0; border-bottom: 1px solid rgba(var(--layer-rgb), .16); border-radius: 12px 12px 0 0; }
  .ai-layer-number { grid-row: 1/3; margin: 0; justify-content: flex-start; }
  .ai-layer-number>.icon { display: none; }
  .ai-layer-number>span { padding: 8px 9px; font-size:14px; }
  .ai-layer-label h3 { font-size:19px; }
  .ai-layer-english { margin: 0; font-size:12px; }
  .ai-layer-summary { grid-column: 2; margin-top: 7px; }
  .ai-layer::after { left: 39px; }
  .ai-layer-insight summary>span:nth-child(2) { flex: 1; }
}
@media (max-width: 640px) {
  .map-mode-tabs { gap: 23px; margin-bottom: 19px; }
  .map-mode-tabs button { font-size:13px; }
  .ai-map-hero { padding: 23px 20px; min-height: 223px; position: relative; }
  .ai-map-hero>div:first-child { position: relative; z-index: 1; }
  .ai-map-hero .eyebrow { font-size:11px; letter-spacing: 1.2px; }
  .ai-map-hero h2 { font-size:26px; line-height: 1.6; margin-bottom: 14px; }
  .ai-map-hero p:not(.eyebrow) { font-size:12px; }
  .ai-stack-preview { display: none; }
  .ai-map-toolbar { flex-direction: column; align-items: stretch; margin: 20px 0 16px; }
  .ai-market-controls { align-self: flex-start; }
  .ai-market-controls button { padding: 7px 16px; font-size:13px; }
  .ai-search { width: 100%; min-width: 0; padding: 11px 12px; }
  .ai-search input { font-size:13px; }
  .ai-layer-filters { gap: 6px; }
  .ai-layer-filters button { padding: 7px 10px; font-size:12px; gap: 6px; }
  .ai-map-meta { font-size:12px; line-height: 1.8; align-items: flex-start; margin: 16px 0; }
  .ai-map-meta .text-button { font-size:12px; }
  .ai-layer-body { padding: 16px 14px 12px; }
  .ai-market-row { gap: 9px; }
  .ai-market-label { width: 25px; min-width: 25px; font-size:12px; }
  .ai-company-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 7px; }
  .ai-company-node { padding: 10px 11px; min-height: 86px; }
  .ai-node-heading strong { font-size:15px; }
  .ai-node-name { font-size:13px; }
  .ai-company-node small { font-size:12px; }
  .ai-layer-insight { margin-left: 34px; }
  .ai-layer-insight summary { flex-wrap: wrap; font-size:12px; }
  .ai-insight-label { margin-left: 18px; }
  .ai-layer-insight p { font-size:12px; }
  .ai-market-empty { font-size:12px; }
  .ai-map-footnote { font-size:12px; }
  .ai-company-dialog { padding: 22px 18px; max-height: calc(100dvh - 32px); }
  .ai-company-dialog h2 { font-size:24px; }
  .ai-detail-role { padding: 14px; }
  .ai-detail-role h3>span:last-child { width: 100%; margin: 4px 0 0 13px; }
  .ai-detail-role p { font-size:13px; }
  .ai-detail-role a { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-company-node, .ai-insight-label>.icon { transition: none; }
}
