:root {
  --future-cyan: #00e5ff;
  --future-violet: #a86dff;
  --future-lime: #baff21;
  --future-ink: #071716;
}

.research-shortcut {
  display: grid;
  grid-template-columns: 22px auto;
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: center;
  min-height: 38px;
  padding: 4px 10px;
  border: 1px solid #18352f;
  border-radius: 2px;
  color: #18352f;
  background: rgba(255,255,255,.5);
  text-decoration: none;
  transition: .18s ease;
}

.research-shortcut:hover {
  color: #fff;
  background: #18352f;
  transform: translateY(-1px);
}

.research-shortcut > span {
  grid-row: 1 / 3;
  font-size: 18px;
}

.research-shortcut b {
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

.research-shortcut small {
  color: #71817b;
  font-size: 6px;
  line-height: 1;
  letter-spacing: .13em;
}

.research-shortcut:hover small {
  color: #c8f06a;
}

.future-context-card {
  width: min(680px, 100%);
  margin: 18px 0 12px;
  padding: 15px;
  border: 1px solid rgba(18,40,34,.22);
  border-left: 4px solid #2e7b4b;
  color: #122822;
  background: rgba(255,253,247,.86);
  box-shadow: 0 14px 36px rgba(17,37,31,.1);
}

.future-context-heading {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
}

.future-context-heading > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #c8f06a;
  background: #122822;
  font-weight: 900;
}

.future-context-heading small {
  display: block;
  color: #2e7b4b;
  font: 900 7px/1.2 "DM Sans", sans-serif;
  letter-spacing: .14em;
}

.future-context-heading h2 {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.35;
}

.future-context-heading > b {
  padding: 6px 8px;
  border: 1px solid rgba(18,40,34,.18);
  color: #2e7b4b;
  background: #eef2e9;
  font-size: 8px;
  white-space: nowrap;
}

.future-context-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.future-context-option {
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(18,40,34,.2);
  color: #304b43;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  text-align: left;
  transition: .18s ease;
}

.future-context-option:hover,
.future-context-option.is-selected {
  border-color: #2e7b4b;
  background: #e4f0db;
  box-shadow: inset 0 -3px #87d34f;
}

.future-context-option small,
.future-context-option b {
  display: block;
}

.future-context-option small {
  color: #71817b;
  font-size: 7px;
}

.future-context-option b {
  margin-top: 4px;
  font-size: 11px;
}

.future-context-card > p {
  margin: 10px 0 8px;
  color: #526861;
  font-size: 9px;
  line-height: 1.65;
}

.future-context-gates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 8px 0;
}

.future-context-gates span {
  padding: 7px 8px;
  border-left: 3px solid #e8923f;
  color: #40584f;
  background: rgba(232,146,63,.09);
  font-size: 8px;
  font-weight: 750;
  line-height: 1.45;
}

.future-context-card .future-observation-note {
  margin: 8px 0;
  padding: 7px 9px;
  border: 1px dashed rgba(18,40,34,.2);
  color: #526861;
  background: rgba(238,242,233,.72);
  font-size: 8px;
}

.future-observation-note strong {
  color: #2e7b4b;
}

.future-context-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.future-context-links a,
.future-context-links button,
.future-context-links span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid rgba(18,40,34,.16);
  color: #2e7b4b;
  background: rgba(255,255,255,.7);
  font-size: 8px;
  font-weight: 800;
  text-decoration: none;
}

.future-context-links span {
  border-color: #2e7b4b;
  color: #fff;
  background: #2e7b4b;
}

.future-context-links a:hover,
.future-context-links button:hover {
  border-color: #2e7b4b;
  background: #fff;
}

.future-context-links button {
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.future-context-note {
  display: block;
  margin-top: 8px;
  color: #71817b;
  font-size: 7px;
  line-height: 1.5;
}

.process-blueprint {
  position: relative;
  max-width: 1500px;
  margin: 22px auto 30px;
  border: 1px solid rgba(0,229,255,.38);
  background:
    linear-gradient(rgba(0,229,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.04) 1px, transparent 1px),
    linear-gradient(145deg, #091d1b, #06100f 72%);
  background-size: 30px 30px, 30px 30px, auto;
  color: #edfafa;
  box-shadow: 0 28px 80px rgba(0,0,0,.22), inset 0 0 70px rgba(0,229,255,.035);
  overflow: hidden;
}

.process-blueprint::after {
  content: "PROCESS  /  REAL FLOW";
  position: absolute; right: 18px; top: 12px;
  color: rgba(255,255,255,.035); font: 900 clamp(30px,5vw,76px)/1 sans-serif;
  letter-spacing: -.05em; pointer-events: none;
}

.process-blueprint-head { position: relative; z-index: 1; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:24px 26px; border-bottom:1px solid rgba(255,255,255,.12); }
.process-blueprint-head small,.future-lab-title>small { color:var(--future-cyan); font-weight:900; letter-spacing:.16em; }
.process-blueprint-head h3 { margin:5px 0 3px; font-size:clamp(22px,2.4vw,38px); }
.process-blueprint-head p { margin:0; color:#a9c4c1; }
.process-legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.process-legend span,.future-tech-status { border:1px solid currentColor; padding:5px 8px; font-size:10px; font-weight:900; letter-spacing:.08em; }
.is-commercial { color:var(--future-lime); }.is-demo { color:#ffc24b; }.is-scenario { color:#cf9bff; }

.process-scroll { overflow-x:auto; padding:22px 24px 8px; scrollbar-color:var(--future-cyan) #0a2926; }
.process-lanes { min-width:1180px; display:grid; gap:10px; }
.process-lane { display:flex; align-items:stretch; min-height:86px; gap:8px; padding:10px; border-left:4px solid var(--lane); background:linear-gradient(90deg, color-mix(in srgb, var(--lane) 9%, transparent), transparent 62%); }
.process-lane em { align-self:center; color:var(--lane); font:900 21px/1 sans-serif; font-style:normal; text-shadow:0 0 14px var(--lane); }
.lane-label { width:112px; flex:0 0 112px; align-self:center; color:var(--lane); font:900 11px/1.25 sans-serif; letter-spacing:.1em; }
.branch-from { align-self:center; border:1px dashed var(--lane); padding:6px; color:var(--lane); font-size:10px; font-weight:900; }
.waste-lane { --lane:#ff6a2c; }.energy-lane { --lane:#ffdc4e; padding-left:180px; }.flue-lane { --lane:#43d8ff; padding-left:180px; }.ash-lane { --lane:#b986ff; padding-left:255px; }
.process-node { position:relative; width:164px; flex:0 0 164px; min-height:64px; display:grid; grid-template-columns:28px 1fr; align-content:center; padding:9px 10px; border:1px solid color-mix(in srgb,var(--lane) 56%,#fff 10%); background:rgba(2,13,13,.88); box-shadow:inset 0 0 20px color-mix(in srgb,var(--lane) 8%,transparent); }
.process-node i { grid-row:1/3; color:var(--lane); font:900 12px/1 sans-serif; font-style:normal; }
.process-node span { font-weight:900; font-size:13px; }
.process-node small { margin-top:3px; color:#93aaa7; font-size:10px; }
.core-node { animation:corePulse 2.2s ease-in-out infinite; }
.future-node { border-style:dashed; opacity:.42; filter:saturate(.4); transition:.3s ease; }
.future-node.is-active { opacity:1; filter:none; box-shadow:0 0 25px color-mix(in srgb,var(--lane) 32%,transparent), inset 0 0 20px color-mix(in srgb,var(--lane) 12%,transparent); }
@keyframes corePulse { 50% { box-shadow:0 0 26px rgba(255,106,44,.27), inset 0 0 22px rgba(255,106,44,.14); } }

.future-lab { display:grid; grid-template-columns:minmax(240px,.55fr) 1.45fr; gap:22px; padding:24px 26px; border-top:1px solid rgba(0,229,255,.26); background:linear-gradient(90deg,rgba(0,229,255,.07),rgba(168,109,255,.05)); }
.future-lab-title h3 { margin:5px 0 7px; font-size:25px; }.future-lab-title h3 span { color:var(--future-cyan); font-size:1.5em; }.future-lab-title p { margin:0; color:#a9c4c1; }
.future-lab-context { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.future-lab-context span,.future-lab-context b { padding:5px 7px; border:1px solid rgba(255,255,255,.16); color:#c9ddda; background:rgba(255,255,255,.035); font-size:8px; }
.future-lab-context b { color:var(--future-cyan); }
.future-tech-list { display:grid; grid-template-columns:repeat(5,minmax(135px,1fr)); gap:8px; }
.future-tech-card { position:relative; min-height:128px; padding:12px; text-align:left; color:#eefafa; border:1px solid rgba(255,255,255,.18); background:#081918; cursor:pointer; transition:.2s ease; overflow:hidden; }
.future-tech-card::before { content:""; position:absolute; inset:auto -35% -55% 35%; height:100px; background:radial-gradient(circle,var(--future-violet),transparent 67%); opacity:.18; }
.future-tech-card:hover:not(:disabled),.future-tech-card.is-selected { transform:translateY(-3px); border-color:var(--future-cyan); box-shadow:0 0 24px rgba(0,229,255,.16); }
.future-tech-card.is-selected { background:linear-gradient(145deg,rgba(0,229,255,.15),#081918 60%); }
.future-tech-card:disabled { opacity:.27; cursor:not-allowed; filter:grayscale(1); }
.future-tech-card>span { display:flex; justify-content:space-between; color:var(--future-cyan); font:900 11px/1 sans-serif; }
.future-tech-card>b { display:block; margin:10px 0 5px; font-size:14px; }.future-tech-card small { display:block; color:#9bb2af; line-height:1.45; }.future-tech-status { display:inline-block!important; width:max-content; margin-top:8px; padding:3px 5px!important; font-size:8px!important; color:#ffc24b!important; }
.process-sources { display:flex; gap:14px; padding:12px 26px 16px; border-top:1px solid rgba(255,255,255,.08); color:#809a97; font-size:11px; }.process-sources b { color:#c5d9d7; white-space:nowrap; }.process-sources a { color:var(--future-cyan); }

.campaign-timeline { max-width:1500px; margin:0 auto 14px; display:grid; grid-template-columns:repeat(5,1fr); border:1px solid rgba(0,229,255,.25); background:rgba(3,15,16,.82); }
.campaign-year { position:relative; padding:11px 14px; border:0; border-right:1px solid rgba(255,255,255,.1); background:transparent; color:#718985; text-align:left; cursor:pointer; }
.campaign-year:last-child{border-right:0}.campaign-year b { display:block; font:900 22px/1 sans-serif; }.campaign-year small { font-size:9px; letter-spacing:.09em; }.campaign-year.is-unlocked { color:#c9dddd; }.campaign-year.is-current { color:var(--future-cyan); background:rgba(0,229,255,.1); box-shadow:inset 0 -3px var(--future-cyan); }.campaign-year:disabled { cursor:not-allowed; }.campaign-year.is-locked::after { content:"LOCK"; position:absolute; right:10px; top:10px; color:#794d91; font:900 8px/1 sans-serif; }

.future-operation-meter { max-width:1500px; margin:0 auto 18px; display:grid; grid-template-columns:1.5fr .55fr .55fr 1.6fr; align-items:center; gap:12px; padding:13px 16px; border:1px solid rgba(168,109,255,.45); background:linear-gradient(90deg,#0b1c1a,rgba(168,109,255,.12)); color:#eaf8f6; }
.future-operation-meter small { display:block; color:#b986ff; font-weight:900; letter-spacing:.1em; }.future-operation-meter b { font-size:17px; }.future-operation-meter>div:not(:first-child) { padding-left:14px; border-left:1px solid rgba(255,255,255,.12); }.future-operation-meter span { display:block; color:#90a8a5; font-size:10px; }.future-operation-meter strong { color:var(--future-cyan); font-size:20px; }.future-operation-meter p { margin:0; color:#9bb2af; font-size:11px; line-height:1.5; }

.future-result { max-width:1220px; margin:18px auto; display:grid; grid-template-columns:170px 1fr 300px; gap:22px; align-items:center; padding:20px; color:#eefafa; background:linear-gradient(120deg,#071716,#132339 62%,#2c1642); border:1px solid rgba(168,109,255,.58); box-shadow:0 18px 50px rgba(0,0,0,.18); }
.future-result-year { text-align:center; border-right:1px solid rgba(255,255,255,.16); }.future-result-year small,.future-result>div>small { display:block; color:#c99cff; font-weight:900; letter-spacing:.1em; }.future-result-year strong { display:block; color:var(--future-cyan); font:900 46px/1 sans-serif; }.future-result-year span { font-size:10px; letter-spacing:.3em; }.future-result h3 { margin:4px 0; font-size:22px; }.future-result p { margin:0; color:#a5b9b7; }.future-result-metrics { display:grid; gap:9px; }.future-result-metrics span { padding:9px; border:1px solid rgba(255,255,255,.12); font-size:11px; }.future-result-metrics b { display:block; margin-top:3px; color:var(--future-lime); font-size:16px; }

.result-research-link {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}

.result-feasibility-link {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
}

.result-actions {
  flex-wrap: wrap;
}

@media (max-width:1200px) {
  .research-shortcut {
    width: 38px;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
    border-radius: 50%;
  }
  .research-shortcut > span { grid-row:auto; }
  .research-shortcut b,.research-shortcut small { display:none; }
}

@media (max-width:950px) {
  .process-blueprint-head,.future-lab { grid-template-columns:1fr; display:grid; }.process-legend { justify-content:flex-start; }.future-tech-list { grid-template-columns:repeat(2,1fr); }.future-operation-meter { grid-template-columns:1fr 1fr; }.future-operation-meter p { grid-column:1/-1; }.future-result { grid-template-columns:130px 1fr; }.future-result-metrics { grid-column:1/-1; grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) {
  .research-shortcut { display:none; }
  .future-context-card { margin-top:14px; padding:12px; }
  .future-context-heading { grid-template-columns:30px 1fr; }
  .future-context-heading > b { grid-column:2; justify-self:start; white-space:normal; }
  .future-context-options { display:flex; overflow-x:auto; padding-bottom:3px; }
  .future-context-option { flex:0 0 142px; }
  .future-context-gates { grid-template-columns:1fr; }
  .future-context-links { display:grid; grid-template-columns:1fr; }
  .result-actions > * { width:90%; max-width:330px; }
  .process-blueprint { margin-inline:-6px; }.process-blueprint-head { padding:18px; }.process-scroll { padding:12px 8px 6px; }.future-lab { padding:18px; }.future-tech-list { grid-template-columns:1fr; }.process-sources { display:block; padding:12px 18px; }.process-sources b { display:block; margin-bottom:4px; }.campaign-timeline { overflow-x:auto; grid-template-columns:repeat(5,112px); }.future-operation-meter { grid-template-columns:1fr 1fr; }.future-operation-meter>div:first-child { grid-column:1/-1; }.future-result { grid-template-columns:1fr; }.future-result-year { border-right:0; border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:12px; }.future-result-metrics { grid-template-columns:1fr; }
}