/* The explanatory panel owns every token and container breakpoint below. */
.system-preview.portfolio-diagram {
  --pd-green:var(--green2);--pd-ink:#f5f8fc;--pd-muted:#abc3d4;
  container-type:inline-size;align-self:center;width:100%;max-width:940px;
  color:var(--pd-ink);border:1px solid rgba(0,196,110,.72);border-radius:28px;
  background:radial-gradient(ellipse at 30% 0%,rgba(0,196,110,.12),transparent 42%),linear-gradient(135deg,#092333,#061b2a 68%,#082333);
  box-shadow:0 12px 40px rgba(0,0,0,.2),0 0 30px rgba(0,196,110,.035);
  overflow:visible;
}
.portfolio-diagram .pd-content { padding:clamp(16px,4.9cqi,48px); }
.portfolio-diagram .pd-defs { position:absolute;width:0;height:0;overflow:hidden; }
.portfolio-diagram .pd-header { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-bottom:clamp(16px,2.5cqi,24px);border-bottom:1px solid rgba(0,196,110,.18); }
.portfolio-diagram .pd-brand { display:flex;align-items:center;gap:clamp(7px,1.5cqi,15px);font-size:clamp(9px,2.1cqi,20px);font-weight:800;letter-spacing:.075em;color:#beddec;white-space:nowrap; }
.portfolio-diagram .pd-dot { flex:0 0 auto;width:clamp(7px,1.5cqi,14px);height:clamp(7px,1.5cqi,14px);border-radius:50%;background:var(--pd-green);box-shadow:0 0 12px rgba(0,196,110,.7); }
.portfolio-diagram .pd-tag { font-size:clamp(10px,2.1cqi,20px);font-weight:700;letter-spacing:.01em;padding:clamp(7px,1.6cqi,15px) clamp(10px,3.1cqi,30px);border:1px solid rgba(0,196,110,.38);border-left-color:var(--pd-green);border-radius:clamp(10px,1.8cqi,18px);background:rgba(5,20,35,.35);box-shadow:-5px 0 18px rgba(0,196,110,.08);white-space:nowrap; }
.portfolio-diagram .pd-markets { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(7px,1.9cqi,18px);list-style:none;margin:clamp(20px,2.8cqi,28px) 0 0;padding:0; }
.portfolio-diagram .pd-market { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1cqi,10px);min-width:0;padding:clamp(12px,2.5cqi,24px) 5px clamp(12px,1.7cqi,16px);border:1px solid rgba(0,196,110,.42);border-radius:clamp(13px,2.3cqi,22px);background:linear-gradient(140deg,rgba(9,30,44,.88),rgba(5,19,32,.85));transition:border-color .22s ease,box-shadow .22s ease; }
.portfolio-diagram .pd-market strong { font-size:clamp(13px,2.5cqi,24px);line-height:1.25;font-weight:700; }
.portfolio-diagram .pd-market-icon { width:clamp(36px,7cqi,66px);height:clamp(36px,7cqi,66px);overflow:visible;filter:drop-shadow(0 0 9px var(--pd-icon-glow)); }
.portfolio-diagram .pd-gold { --pd-icon-glow:rgba(0,196,110,.24); }
.portfolio-diagram .pd-indices { --pd-icon-glow:rgba(0,196,110,.24); }
.portfolio-diagram .pd-currencies { --pd-icon-glow:rgba(0,196,110,.24); }
.portfolio-diagram .pd-crypto { --pd-icon-glow:rgba(0,196,110,.24); }
.portfolio-diagram .pd-connect { display:block;width:100%;height:clamp(28px,7.6cqi,72px);overflow:visible;fill:none;stroke:var(--pd-green);stroke-width:1.25;pointer-events:none;filter:drop-shadow(0 0 4px rgba(0,196,110,.23)); }
.portfolio-diagram .pd-connect path { vector-effect:non-scaling-stroke; }
.portfolio-diagram .pd-connect-two { display:none; }
.portfolio-diagram .pd-node { fill:var(--pd-green);stroke:none; }
.portfolio-diagram .pd-card { position:relative;min-width:0;display:flex;align-items:center;gap:clamp(14px,3.8cqi,36px);border:1px solid rgba(0,196,110,.48);border-radius:clamp(16px,2.6cqi,25px);background:linear-gradient(120deg,rgba(8,35,47,.82),rgba(8,25,40,.96));padding:clamp(18px,3cqi,29px) clamp(16px,5.6cqi,54px); }
.portfolio-diagram .pd-card h3 { margin:0 0 clamp(5px,1cqi,9px);font-size:clamp(17px,3.5cqi,34px);line-height:1.2;font-weight:800;letter-spacing:-.015em; }
.portfolio-diagram .pd-card p { margin:0;color:var(--pd-muted);font-size:clamp(13px,2.7cqi,26px);line-height:1.38; }
.portfolio-diagram .pd-card-icon { flex:0 0 auto;width:clamp(40px,8cqi,76px);height:clamp(40px,8cqi,76px);overflow:visible;filter:drop-shadow(0 0 14px rgba(0,196,110,.18)); }
.portfolio-diagram .pd-core { padding:clamp(20px,3.8cqi,36px) clamp(16px,6.3cqi,60px);border:1.5px solid var(--pd-green);background:radial-gradient(ellipse at 80% 45%,rgba(0,196,110,.08),transparent 65%),linear-gradient(105deg,#07333b,#062936 74%);box-shadow:inset 0 0 30px rgba(0,196,110,.03),0 0 24px rgba(0,196,110,.055); }
.portfolio-diagram .pd-core h3 { font-size:clamp(22px,4.3cqi,42px); }
.portfolio-diagram .pd-core p { font-size:clamp(14px,2.9cqi,28px); }
.portfolio-diagram .pd-core .pd-card-icon { width:clamp(48px,11cqi,104px);height:clamp(48px,11cqi,104px); }
.portfolio-diagram .pd-vertical { height:clamp(22px,3.6cqi,34px); }
.portfolio-diagram .pd-results { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2.1cqi,20px); }
.portfolio-diagram .pd-result { padding:clamp(14px,2.8cqi,26px) clamp(12px,3.2cqi,30px);gap:clamp(10px,2.9cqi,28px); }
.portfolio-diagram .pd-result h3 { margin:0;font-size:clamp(14px,2.5cqi,24px); }
.portfolio-diagram .pd-result p { font-size:clamp(12px,2.1cqi,20px); }
.portfolio-diagram .pd-result .pd-card-icon { width:clamp(30px,6.8cqi,64px);height:clamp(30px,6.8cqi,64px); }
.portfolio-diagram .pd-result-link { display:none; }
@media (min-width:681px) and (max-width:900px) {
  .system-preview.portfolio-diagram { max-width:620px;justify-self:center; }
}
@media (hover:hover) and (pointer:fine) {
  .portfolio-diagram .pd-market:hover { border-color:rgba(0,196,110,.72);box-shadow:0 0 16px var(--pd-icon-glow); }
}
@container (max-width:379px) {
  .portfolio-diagram .pd-markets { grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(5px,1.5cqi,7px); }
  .portfolio-diagram .pd-market { padding:10px 3px;border-radius:12px; }
  .portfolio-diagram .pd-market-icon { width:clamp(28px,8.5cqi,38px);height:clamp(28px,8.5cqi,38px); }
  .portfolio-diagram .pd-market strong { font-size:clamp(12px,3.2cqi,14px);white-space:nowrap; }
  .portfolio-diagram .pd-branch.pd-connect-four { display:none; }
  .portfolio-diagram .pd-branch.pd-connect-two { display:block;height:26px; }
  .portfolio-diagram .pd-results { grid-template-columns:1fr;gap:0; }
  .portfolio-diagram .pd-result { padding:18px 16px;gap:16px; }
  .portfolio-diagram .pd-result h3 { font-size:16px; }
  .portfolio-diagram .pd-result p { font-size:13px; }
  .portfolio-diagram .pd-result .pd-card-icon { width:40px;height:40px; }
  .portfolio-diagram .pd-result-link { display:block;height:22px; }
  .portfolio-diagram .pd-branch { height:26px; }
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-diagram .pd-market { transition:none!important; }
}
/* Markets stay in one row on phones; only the output cards stack. */
@media(max-width:520px) {
  .portfolio-diagram .pd-markets { grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(5px,1.5cqi,7px); }
  .portfolio-diagram .pd-market { padding:10px 3px;border-radius:12px; }
  .portfolio-diagram .pd-market-icon { width:clamp(28px,8.5cqi,38px);height:clamp(28px,8.5cqi,38px); }
  .portfolio-diagram .pd-market strong { font-size:clamp(12px,3.2cqi,14px);white-space:nowrap; }
  .portfolio-diagram .pd-branch.pd-connect-four { display:none; }
  .portfolio-diagram .pd-branch.pd-connect-two { display:block;height:26px; }
  .portfolio-diagram .pd-results { grid-template-columns:1fr;gap:0; }
  .portfolio-diagram .pd-result { padding:18px 16px;gap:16px; }
  .portfolio-diagram .pd-result h3 { font-size:16px; }
  .portfolio-diagram .pd-result p { font-size:13px; }
  .portfolio-diagram .pd-result .pd-card-icon { width:40px;height:40px; }
  .portfolio-diagram .pd-result-link { display:block;height:22px; }
  .portfolio-diagram .pd-branch { height:26px; }
}
/* Slightly denser explanatory panel on phones, without scaling text as an image. */
@media(max-width:520px) {
 .portfolio-diagram .pd-content { padding:16px; }
 .portfolio-diagram .pd-header { padding-bottom:14px; }
 .portfolio-diagram .pd-markets { margin-top:16px; }
 .portfolio-diagram .pd-market { padding:8px 3px; }
 .portfolio-diagram .pd-market-icon { width:clamp(28px,8cqi,34px);height:clamp(28px,8cqi,34px); }
 .portfolio-diagram .pd-core { padding:16px;gap:14px; }
 .portfolio-diagram .pd-core .pd-card-icon { width:44px;height:44px; }
 .portfolio-diagram .pd-core h3 { font-size:clamp(21px,4.3cqi,24px); }
 .portfolio-diagram .pd-result { padding:14px;gap:14px; }
 .portfolio-diagram .pd-result .pd-card-icon { width:36px;height:36px; }
 .portfolio-diagram .pd-result h3 { font-size:15px; }
 .portfolio-diagram .pd-result-link { height:20px; }
}