.portfolio-observatory {
  --po-bg: #08121e;
  --po-panel: #0b1a2b;
  --po-line: #294765;
  --po-cyan: #65e6ff;
  --po-lime: #baf36a;
  --po-gold: #ffce66;
  --po-red: #ff8f82;
  --po-blue: #93c8ff;
  --po-ink: #f5f9ff;
  --po-muted: #a7b9ce;
  position: relative;
  overflow: hidden;
  margin: 2rem 0;
  border: 1px solid #355676;
  border-radius: 25px;
  color: var(--po-ink);
  background: radial-gradient(circle at 82% 5%, rgba(101, 230, 255, .12), transparent 25rem), linear-gradient(155deg, #07111d, #0b1a2d 52%, #120f1c);
  box-shadow: 0 40px 100px rgba(1, 7, 15, .42);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.portfolio-orbit { position: absolute; top: -175px; right: -120px; width: 520px; height: 520px; border: 1px solid rgba(101, 230, 255, .12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(101, 230, 255, .025), 0 0 0 140px rgba(186, 243, 106, .018); pointer-events: none; }
.portfolio-masthead { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: 2rem; align-items: center; padding: clamp(1.6rem, 5vw, 4rem); }
.portfolio-kicker, .portfolio-desk-head span, .portfolio-panel-head > span, .portfolio-ledger header span, .portfolio-contract-grid header span, .portfolio-overlap > div > span, .portfolio-local > div > span { color: var(--po-cyan); font-size: .59rem; font-weight: 900; letter-spacing: .12em; }
.portfolio-masthead h2 { margin: .8rem 0 0; font: 900 clamp(2.5rem, 5.5vw, 5.1rem)/.92 system-ui, -apple-system, sans-serif; letter-spacing: -.065em; }
.portfolio-masthead h2 em { color: var(--po-lime); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.portfolio-masthead p { max-width: 780px; margin: 1.2rem 0 0; color: var(--po-muted); font: 500 .82rem/1.7 system-ui, -apple-system, sans-serif; }
.portfolio-actions, .portfolio-footer > div { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.portfolio-primary { border-color: var(--po-lime) !important; color: #071009 !important; background: var(--po-lime) !important; }
.portfolio-secondary { border-color: #416889 !important; color: var(--po-cyan) !important; background: rgba(8, 25, 41, .68) !important; }
.portfolio-radar { position: relative; display: grid; width: min(260px, 78vw); aspect-ratio: 1; place-items: center; justify-self: center; border: 1px solid #356383; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 38px, rgba(101, 230, 255, .09) 39px 40px), conic-gradient(from 240deg, transparent, rgba(101, 230, 255, .18), transparent 34%); }
.portfolio-radar::before, .portfolio-radar::after { content: ""; position: absolute; background: rgba(101, 230, 255, .24); }
.portfolio-radar::before { width: 100%; height: 1px; }.portfolio-radar::after { width: 1px; height: 100%; }
.portfolio-radar span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--po-lime); box-shadow: -66px 38px 0 var(--po-gold), 58px -51px 0 var(--po-cyan), 0 0 22px var(--po-lime); }
.portfolio-radar i { position: absolute; width: 49%; height: 2px; transform: rotate(-33deg); transform-origin: left; background: linear-gradient(90deg, var(--po-cyan), transparent); animation: portfolio-scan 7s linear infinite; }
.portfolio-radar b { z-index: 2; text-align: center; font: 950 1rem/1.05 system-ui, sans-serif; }.portfolio-radar small { position: absolute; bottom: 36px; color: var(--po-gold); font-size: .49rem; text-align: center; }
@keyframes portfolio-scan { to { transform: rotate(327deg); } }
.portfolio-visual { display: block; overflow: hidden; margin: 0 clamp(1.2rem, 4vw, 3rem); border: 1px solid #355676; border-radius: 17px; background: #07111d; }.portfolio-visual img { display: block; width: 100%; height: auto; }
.portfolio-proof { display: grid; grid-template-columns: repeat(5, 1fr); margin: 1rem clamp(1.2rem, 4vw, 3rem) 0; border: 1px solid var(--po-line); background: rgba(4, 15, 27, .84); }
.portfolio-proof span { padding: 1rem; border-right: 1px solid var(--po-line); }.portfolio-proof span:last-child { border: 0; }.portfolio-proof b { display: block; color: var(--po-cyan); font-size: 1.65rem; }.portfolio-proof span:nth-child(2) b { color: var(--po-lime); }.portfolio-proof span:nth-child(3) b { color: var(--po-red); }.portfolio-proof span:nth-child(4) b { color: var(--po-gold); }.portfolio-proof small { color: var(--po-muted); font-size: .52rem; letter-spacing: .07em; text-transform: uppercase; }
.portfolio-boundary { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin: 1rem clamp(1.2rem, 4vw, 3rem) 0; border-left: 4px solid var(--po-gold); padding: .9rem 1rem; background: rgba(255, 206, 102, .07); }.portfolio-boundary b { color: var(--po-gold); font-size: .6rem; white-space: nowrap; }.portfolio-boundary p { margin: 0; color: #c5d1df; font: .65rem/1.55 system-ui, sans-serif; }
.portfolio-desk { margin-top: 1.4rem; padding: clamp(1.2rem, 4vw, 3rem); background: rgba(4, 13, 24, .55); }
.portfolio-desk-head, .portfolio-ledger > header { display: flex; justify-content: space-between; gap: 1.2rem; align-items: end; margin-bottom: .8rem; }.portfolio-desk-head h3, .portfolio-ledger h3, .portfolio-contract-grid h3, .portfolio-overlap h3, .portfolio-local h3 { margin: .4rem 0 0; font: 850 clamp(1.25rem, 2.6vw, 2rem)/1.05 system-ui, sans-serif; letter-spacing: -.035em; }.portfolio-desk-head label { display: flex; min-width: min(330px, 100%); flex-direction: column; gap: .4rem; }.portfolio-desk-head input { border: 1px solid #41688c; padding: .75rem; color: white; background: #071522; font: .7rem ui-monospace, monospace; }
.portfolio-workbench { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); border: 1px solid var(--po-line); background: rgba(7, 19, 32, .8); }.portfolio-workbench > section { min-width: 0; border-right: 1px solid var(--po-line); }
.portfolio-panel-head { display: flex; justify-content: space-between; gap: .7rem; align-items: center; border-bottom: 1px solid var(--po-line); padding: .8rem 1rem; background: rgba(21, 44, 68, .46); }.portfolio-panel-head small { color: var(--po-muted); font-size: .57rem; }
.portfolio-case-list { display: grid; max-height: 690px; overflow-y: auto; }.portfolio-case { display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: .8rem; width: 100%; border: 0; border-bottom: 1px solid var(--po-line); padding: .9rem 1rem; color: var(--po-ink); background: transparent; text-align: left; cursor: pointer; }.portfolio-case:hover, .portfolio-case.is-active { background: rgba(101, 230, 255, .075); box-shadow: inset 4px 0 var(--po-cyan); }.portfolio-case > span { align-self: start; border: 1px solid currentColor; padding: .3rem; color: var(--po-lime); font-size: .48rem; text-align: center; text-transform: uppercase; }.portfolio-case.needs-evidence > span { color: var(--po-red); }.portfolio-case b { display: block; font: 750 .77rem/1.35 system-ui, sans-serif; }.portfolio-case p { margin: .35rem 0; color: var(--po-muted); font-size: .57rem; line-height: 1.45; }.portfolio-case small { color: var(--po-blue); font-size: .49rem; }
.portfolio-detail { min-width: 0; padding: clamp(1.2rem, 3vw, 2rem); background: radial-gradient(circle at 100% 0, rgba(186, 243, 106, .07), transparent 22rem); }.portfolio-detail-top { display: flex; justify-content: space-between; gap: 1rem; }.portfolio-detail-top span { border: 1px solid currentColor; padding: .35rem .5rem; color: var(--po-lime); font-size: .52rem; text-transform: uppercase; }.portfolio-detail-top span[data-state="needs-evidence"] { color: var(--po-red); }.portfolio-detail-top small { color: var(--po-muted); font-size: .57rem; }.portfolio-detail > h3 { margin: 1rem 0 .6rem; font: 850 clamp(1.6rem, 3.5vw, 2.8rem)/.98 system-ui, sans-serif; letter-spacing: -.05em; }.portfolio-detail > p { color: #c4d1df; font: .75rem/1.65 system-ui, sans-serif; }
.portfolio-gap-block, .portfolio-match-block { margin-top: 1rem; }.portfolio-gap-block > span, .portfolio-match-block > span { color: var(--po-gold); font-size: .52rem; font-weight: 900; letter-spacing: .1em; }.portfolio-match-block > span { color: var(--po-blue); }.portfolio-issue { margin-top: .55rem; border-left: 3px solid var(--po-red); padding: .7rem .8rem; background: rgba(255, 143, 130, .06); }.portfolio-issue b, .portfolio-lab b { display: block; font-size: .65rem; text-transform: uppercase; }.portfolio-issue p, .portfolio-lab p { margin: .35rem 0 0; color: var(--po-muted); font: .62rem/1.48 system-ui, sans-serif; }.portfolio-no-issue { margin-top: .55rem; border-left: 3px solid var(--po-lime); padding: .7rem; color: var(--po-lime); background: rgba(186, 243, 106, .06); font-size: .64rem; }.portfolio-lab { display: flex; justify-content: space-between; gap: .6rem; align-items: center; margin-top: .5rem; border: 1px solid var(--po-line); padding: .65rem; }.portfolio-lab a { color: var(--po-blue); font-size: .56rem; text-decoration: none; }.portfolio-lab small { color: var(--po-gold); font-size: .49rem; white-space: nowrap; }
.portfolio-overlap, .portfolio-local, .portfolio-ledger, .portfolio-sources { margin-top: 1rem; border: 1px solid var(--po-line); padding: 1rem; background: rgba(8, 23, 38, .7); }.portfolio-overlap { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); gap: 1rem; align-items: center; }.portfolio-overlap-card { border: 1px solid rgba(255, 206, 102, .35); padding: .85rem; background: rgba(255, 206, 102, .055); }.portfolio-overlap-card b { color: var(--po-gold); font-size: .7rem; }.portfolio-overlap-card p { margin: .45rem 0; color: var(--po-muted); font: .62rem/1.5 system-ui, sans-serif; }.portfolio-overlap-card small { color: var(--po-cyan); font-size: .51rem; }
.portfolio-local { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); gap: .8rem; align-items: center; }.portfolio-local p { margin: .55rem 0 0; color: var(--po-muted); font: .65rem/1.5 system-ui, sans-serif; }.portfolio-drop { display: flex; min-width: 0; flex-direction: column; gap: .5rem; border: 1px dashed #4b7699; padding: .9rem; background: #071522; }.portfolio-drop > span { color: var(--po-cyan); font-size: .53rem; }.portfolio-drop input { max-width: 100%; color: var(--po-muted); font-size: .59rem; }.portfolio-local > p { grid-column: 1 / -1; border-top: 1px solid var(--po-line); padding-top: .7rem; }.portfolio-local > p.is-ready { color: var(--po-lime); }.portfolio-local > p.is-blocked { color: var(--po-red); }.portfolio-local > button { grid-column: 2; justify-self: end; }
.portfolio-ledger { padding: 0; }.portfolio-ledger > header { margin: 0; padding: 1rem; }.portfolio-ledger header small { color: var(--po-gold); font-size: .56rem; }.portfolio-value-records { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--po-line); }.portfolio-value-card { padding: 1rem; border-right: 1px solid var(--po-line); }.portfolio-value-card:last-child { border: 0; }.portfolio-value-card > span { color: var(--po-lime); font-size: .52rem; text-transform: uppercase; }.portfolio-value-card h5 { margin: .5rem 0; font: 800 1rem system-ui, sans-serif; }.portfolio-value-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }.portfolio-value-metrics div { border: 1px solid var(--po-line); padding: .6rem; }.portfolio-value-metrics b { display: block; color: var(--po-cyan); font-size: .83rem; }.portfolio-value-metrics small { color: var(--po-muted); font-size: .48rem; }.portfolio-value-card p { color: var(--po-muted); font: .57rem/1.5 system-ui, sans-serif; }
.portfolio-contract-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }.portfolio-contract-grid > section { border: 1px solid var(--po-line); background: rgba(8, 23, 38, .72); }.portfolio-contract-grid header { padding: 1rem; border-bottom: 1px solid var(--po-line); }.portfolio-layer, .portfolio-clause { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: .7rem; align-items: center; border-bottom: 1px solid var(--po-line); padding: .75rem; }.portfolio-layer:last-child, .portfolio-clause:last-child { border: 0; }.portfolio-layer > span, .portfolio-clause > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--po-cyan); border-radius: 50%; color: var(--po-cyan); font-size: .62rem; }.portfolio-clause > span { border-radius: 4px; border-color: var(--po-gold); color: var(--po-gold); }.portfolio-layer b, .portfolio-clause b { display: block; font: 750 .67rem system-ui, sans-serif; }.portfolio-layer small, .portfolio-clause small { display: block; margin-top: .25rem; color: var(--po-muted); font-size: .49rem; }.portfolio-layer > i, .portfolio-clause > i { color: var(--po-lime); font-size: .53rem; font-style: normal; }
.portfolio-sources { padding: 0; }.portfolio-source-list, #portfolio-source-list { display: grid; grid-template-columns: repeat(4, 1fr); }.portfolio-source { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid var(--po-line); border-bottom: 1px solid var(--po-line); padding: .8rem; }.portfolio-source:nth-child(4n) { border-right: 0; }.portfolio-source b { font: 750 .65rem/1.4 system-ui, sans-serif; }.portfolio-source p { flex: 1; color: var(--po-muted); font: .55rem/1.5 system-ui, sans-serif; }.portfolio-source a { color: var(--po-blue); font-size: .51rem; text-decoration: none; }.portfolio-source small { margin-top: .4rem; color: var(--po-gold); font-size: .47rem; }
.portfolio-footer { display: flex; justify-content: space-between; gap: 1.2rem; align-items: center; margin: 0 clamp(1.2rem, 4vw, 3rem) clamp(1.2rem, 4vw, 3rem); border-top: 3px solid var(--po-lime); padding: 1rem; background: rgba(186, 243, 106, .06); }.portfolio-footer p { max-width: 720px; margin: 0; color: var(--po-muted); font: .68rem/1.55 system-ui, sans-serif; }.portfolio-footer p b { color: var(--po-ink); }.portfolio-footer > div { margin: 0; }
.portfolio-case:focus-visible, .portfolio-desk-head input:focus-visible, .portfolio-drop:focus-within, .portfolio-observatory a:focus-visible, .portfolio-observatory button:focus-visible { outline: 3px solid var(--po-gold); outline-offset: 2px; }
@media (max-width: 950px) { .portfolio-masthead, .portfolio-workbench, .portfolio-overlap, .portfolio-contract-grid { grid-template-columns: 1fr; }.portfolio-radar { display: none; }.portfolio-workbench > section { border-right: 0; border-bottom: 1px solid var(--po-line); }.portfolio-proof { grid-template-columns: repeat(2, 1fr); }.portfolio-proof span { border-bottom: 1px solid var(--po-line); }.portfolio-source-list, #portfolio-source-list { grid-template-columns: repeat(2, 1fr); }.portfolio-source:nth-child(2n) { border-right: 0; }.portfolio-footer { align-items: start; flex-direction: column; } }
@media (max-width: 620px) { .portfolio-desk-head, .portfolio-ledger > header { align-items: stretch; flex-direction: column; }.portfolio-desk-head label { min-width: 0; }.portfolio-proof, .portfolio-value-records, .portfolio-source-list, #portfolio-source-list, .portfolio-local { grid-template-columns: 1fr; }.portfolio-boundary { grid-template-columns: 1fr; }.portfolio-boundary b { white-space: normal; }.portfolio-proof span, .portfolio-value-card, .portfolio-source { border-right: 0; border-bottom: 1px solid var(--po-line); }.portfolio-local > button { grid-column: 1; justify-self: start; }.portfolio-masthead { padding: 1.3rem; }.portfolio-masthead h2 { font-size: 2.45rem; } }
@media (prefers-reduced-motion: reduce) { .portfolio-observatory *, .portfolio-observatory *::before, .portfolio-observatory *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }