/* The profile (profile-art.js): the hands as a full-bleed instrument view with a mono HUD, a row of
   KPI tiles, then dense panels. Gold is the member, blue the AI; everything else is the portal's palette. */
.pa{--g:232,194,122;--b:156,200,255}
.pa .mono{font-family:var(--mono)}

/* the scene */
.pa-scene{position:relative;margin:0 0 14px;height:clamp(440px,50vw,600px);border-radius:16px;overflow:hidden;background:#04070E;border:1px solid var(--p-line);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.pa-scene::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 62%,rgba(4,7,14,.75))}
.pa-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pa-scene figcaption{position:absolute;inset:0;pointer-events:none;z-index:1}
.pa-hud-top{position:absolute;inset:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 20px;
  background:linear-gradient(180deg,rgba(4,7,14,.85),rgba(4,7,14,0))}
.pa-hud-title{display:flex;flex-direction:column;gap:3px;min-width:0}
.pa-hud-title small{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--p-mut)}
.pa-hud-title b{font-size:18px;font-weight:700;letter-spacing:.06em;color:#fff}
.pa-hud-live{display:flex;align-items:center;gap:9px;min-width:0;max-width:52%;font:500 11.5px var(--mono);color:rgba(220,228,242,.8)}
.pa-hud-live .chip{flex:none;padding:1px 6px;border-radius:3px;font-size:9.5px;letter-spacing:.12em;color:#04060c;background:rgb(var(--g));box-shadow:0 0 10px rgba(var(--g),.55);animation:pa-blink 2s steps(2) infinite}
@keyframes pa-blink{50%{opacity:.45}}
.pa-rounds{position:absolute;inset:auto 0 0;height:40px;display:flex;padding:0 10px;pointer-events:auto;border-top:1px solid rgba(150,170,220,.09);background:linear-gradient(0deg,rgba(4,6,12,.92),rgba(4,6,12,.35))}
.pa-rounds button{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;letter-spacing:.04em;color:var(--p-faint);white-space:nowrap;overflow:hidden}
.pa-rounds button i{font:600 10px var(--mono);font-style:normal}
.pa-rounds button.done{color:var(--p-mut)} .pa-rounds button.done i{color:rgb(var(--g))}
.pa-rounds button.now{color:#fff;flex:2;background:linear-gradient(0deg,rgba(var(--g),.12),transparent)}
.pa-rounds button.now i{color:rgb(var(--g))}
.pa-rounds button.now b{position:absolute;left:0;bottom:0;height:2px;background:rgb(var(--g));box-shadow:0 0 10px rgb(var(--g))}

/* before the first conversation: the hands as dust, not joined */
.pa-hud-live .chip.off{color:rgba(220,228,242,.75);background:transparent;border:1px solid rgba(220,228,242,.35);box-shadow:none;animation:none}
.pa-empty{outline:none}
.pa-empty:focus-visible{box-shadow:0 0 0 2px rgba(156,200,255,.6)}

/* panels */
.pa-grid{display:grid;grid-template-columns:1.15fr 1fr 1.1fr;gap:14px;margin-bottom:14px}
.pa .pt-card{margin:0;padding:16px 18px}
.pa .pt-card h3{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px;font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--p-mut)}
.pa h3 .g{color:rgb(var(--g))} .pa h3 .b{color:rgb(var(--b))}
.pa-vs{display:grid;grid-template-columns:44px 1fr auto 1fr 44px;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--p-line)}
.pa-vs:last-of-type{border-bottom:0}
.pa-vs-a,.pa-vs-b{font:500 12.5px var(--mono);color:var(--p-ink)} .pa-vs-a{text-align:left} .pa-vs-b{text-align:right}
.pa-vs-k{font-size:12px;color:#C9D1DF;text-align:center;white-space:nowrap} .pa-vs-k em{display:block;font-style:normal;font-size:10px;color:var(--p-faint)}
.pa-vs-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;display:flex}
.pa-vs-bar.g{justify-content:flex-end} .pa-vs-bar i{display:block;height:100%;border-radius:2px;animation:pa-grow 1.2s cubic-bezier(.2,.8,.2,1) both}
.pa-vs-bar.g i{background:linear-gradient(270deg,rgb(var(--g)),rgba(var(--g),.35));box-shadow:0 0 8px rgba(var(--g),.5)}
.pa-vs-bar.b i{background:linear-gradient(90deg,rgb(var(--b)),rgba(var(--b),.35));box-shadow:0 0 8px rgba(var(--b),.5)}
@keyframes pa-grow{from{width:0}}
.pa-mine{display:grid;grid-template-columns:auto auto 1fr;gap:16px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--p-line);font-size:11.5px;color:var(--p-faint)}
.pa-mine span{display:flex;flex-direction:column;gap:2px}
.pa-mine b{font:600 18px var(--mono);color:rgb(var(--g))} .pa-mine b i{font-style:normal;font-size:11px;color:var(--p-faint);margin-left:3px}
.pa-mine em{font-style:normal;color:var(--p-mut)}
.pa-trace{width:100%;height:220px;display:block}
.pa-legend{display:flex;align-items:center;gap:6px;letter-spacing:.08em}
.pa-legend i{width:12px;height:2px;margin-left:8px} .pa-legend i.g{background:rgb(var(--g))} .pa-legend i.b{background:rgb(var(--b))}
.pa-log{list-style:none;margin:0;padding:0;max-height:212px;overflow:auto}
.pa-log li{display:grid;grid-template-columns:82px 46px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--p-line);font-size:12px;color:#C9D1DF}
.pa-log li .mono{font-size:10.5px;color:var(--p-faint);white-space:nowrap} .pa-log li b.mono{font-size:11px;color:var(--p-ink)}
.pa-log li em{font-style:normal;color:var(--p-mut)}
.pa-log i.t{font:600 9.5px var(--mono);font-style:normal;letter-spacing:.06em;text-align:center;padding:2px 0;border-radius:3px}
.pa-log i.g{color:rgb(var(--g));background:rgba(var(--g),.1);border:1px solid rgba(var(--g),.3)}
.pa-log i.b{color:rgb(var(--b));background:rgba(var(--b),.1);border:1px solid rgba(var(--b),.3)}
.pa-log i.m{color:var(--p-mut);background:rgba(255,255,255,.04);border:1px solid var(--p-line)}
.pa-log i.w{color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--p-line2)}

/* months: each one opens its own summary, the current one its live state */
.pa-rounds button{border:0;background:none;font-family:inherit;cursor:pointer;transition:color .2s,background .2s}
.pa-rounds button:hover{color:#fff}
.pa-rounds button.sel{color:#fff;box-shadow:inset 0 -2px 0 rgba(255,255,255,.55)}
.pa-rounds button.sel.done{background:linear-gradient(0deg,rgba(255,255,255,.08),transparent)}
.pa-when{font:500 10.5px var(--mono)!important;letter-spacing:.12em!important;color:var(--p-mut)!important;background:none!important}
.pa-tabs{display:flex;gap:2px;padding:2px;border-radius:7px;background:rgba(255,255,255,.04)}
.pa-tabs button{border:0;background:none;padding:3px 9px;border-radius:5px;font-size:11px;color:var(--p-mut);cursor:pointer}
.pa-tabs button.on{background:rgba(255,255,255,.1);color:#fff}
.pa-range{display:flex;align-items:center;gap:6px} .pa-range i{font-style:normal;color:var(--p-faint)}
.pa .pa-range input{width:auto!important;min-width:0;height:28px;min-height:0;font:500 12px var(--mono)!important;color:var(--p-ink);background:rgba(255,255,255,.04);border:1px solid var(--p-line);border-radius:6px;padding:2px 8px!important;color-scheme:dark}
.pa-log-card h3{flex-wrap:wrap;gap:8px}

/* the strip on the task list */
.pa-strip{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:9px 14px;border-radius:10px;border:1px solid var(--p-line);background:var(--p-card);color:var(--p-ink)!important;font-size:13px}
.pa-strip .chip{font:600 10px var(--mono);padding:1px 6px;border-radius:3px;color:#04060c;background:#E8C27A}
.pa-strip b{font:600 14px var(--mono)} .pa-strip b.g{color:#E8C27A} .pa-strip b.b{color:#9CC8FF}
.pa-strip i{width:24px;height:1px;background:linear-gradient(90deg,#E8C27A,#9CC8FF)}
.pa-strip .go{margin-left:auto;color:var(--p-acc)}

@media (max-width:1100px){.pa-kpis{grid-template-columns:repeat(3,1fr)} .pa-grid{grid-template-columns:1fr 1fr} .pa-log-card{grid-column:1/-1}}
@media (max-width:760px){
  .pa-scene{height:clamp(420px,110vw,520px)}
  .pa-hud-live{display:none}
  .pa-rounds button.done{display:none} .pa-rounds button.now{flex:1}
  .pa-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.pa-vs-bar i,.pa-hud-live .chip{animation:none}}

@media (max-width:640px){
  .pa-res-body{align-items:start}
  .pa-own{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .pa-own>div{display:contents} .pa-own .b span{align-items:flex-start}
  .pa-log-card h3 .pa-range{width:100%} .pa .pa-range input{flex:1;font-size:16px!important}   /* 16px: phones do not zoom in on it */
}


/* ---- the console: the figures the width of the window; the two hands faint behind, or forward on their own */
.pt-main.full{max-width:none;padding:20px 28px 72px}
.pa-console{position:relative}
.pa-bgx{position:absolute;left:-28px;right:-28px;top:-20px;height:min(92vh,820px);opacity:.15;pointer-events:none;z-index:0;transition:opacity .45s;
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.pa-bgx .pa-canvas{position:absolute;inset:0;width:100%;height:100%}
.pa-body{position:relative;z-index:1;transition:opacity .45s}
.pa-console.hands .pa-bgx{position:fixed;inset:0;height:auto;opacity:1;z-index:40;background:#04070E;-webkit-mask-image:none;mask-image:none}
.pa-console.hands .pa-body{opacity:.04;pointer-events:none}
.pa-hands-back{position:fixed;right:24px;top:18px;z-index:41;padding:7px 14px;border-radius:999px;border:1px solid rgba(220,228,242,.3);background:rgba(4,7,14,.6);color:#E6EAF2;font-size:13px;cursor:pointer}
.pa-hands-back:hover{border-color:#fff}
.pa-console .pt-card{background:rgba(13,17,27,.66);margin:0}
.pa-console .pt-card h3{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 14px;font:500 12px var(--p-sans,inherit);letter-spacing:.06em;text-transform:none;color:#C9D1DF}
.pa-console .pt-card h3 em{font:500 10.5px var(--mono);font-style:normal;letter-spacing:.1em;color:var(--p-faint)}

/* header: the page's name, the months, the hands */
.pa-top{display:flex;align-items:center;gap:20px;margin:0 0 14px;flex-wrap:wrap}
.pa-title{display:flex;flex-direction:column;gap:2px;margin-right:auto}
.pa-title h1{margin:0;font-size:24px;font-weight:700;letter-spacing:.02em;color:#fff}
.pa-title span{font-size:12px;color:var(--p-mut)}
.pa-months{display:flex;gap:2px;padding:3px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--p-line)}
.pa-months button{position:relative;display:flex;align-items:baseline;gap:6px;padding:6px 12px;border:0;border-radius:7px;background:none;color:var(--p-mut);font:inherit;font-size:13px;cursor:pointer;overflow:hidden}
.pa-months button small{font-size:10.5px;color:var(--p-faint)}
.pa-months button:hover{color:#fff} .pa-months button.on{background:rgba(255,255,255,.1);color:#fff}
.pa-months button i{position:absolute;left:0;bottom:0;height:2px;background:rgb(var(--g))}
.pa-hands-btn{padding:7px 14px;border-radius:999px;border:1px solid rgba(220,228,242,.22);background:none;color:#DDE3EE;font-size:13px;cursor:pointer;transition:border-color .2s,background .2s}
.pa-hands-btn:hover{border-color:rgba(220,228,242,.6);background:rgba(255,255,255,.04)}

/* the headline and the ruler */
.pa-hero{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:36px;align-items:center;padding:22px 26px!important;margin-bottom:14px!important}
.pa-say{display:flex;flex-direction:column;gap:8px}
.pa-say small{font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--p-faint)}
.pa-say>b{font-size:26px;font-weight:700;line-height:1.25;color:#fff}
.pa-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pa-cta{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12.5px;text-decoration:none!important;white-space:nowrap}
.pa-cta i{font-style:normal}
.pa-cta.b{color:#04060c!important;background:rgb(var(--b));font-weight:600;transition:transform .2s}
.pa-cta.b:hover{transform:translateY(-1px)}
.pa-cta.g{color:rgb(var(--g));border:1px solid rgba(var(--g),.4);background:rgba(var(--g),.08)}
.pa-track{display:flex;flex-direction:column;gap:14px}
.pa-rail,.pa-scale{display:grid;grid-template-columns:76px 1fr 150px;align-items:center;gap:16px}
.pa-rail .who{font-size:13px;font-weight:600} .pa-rail.g .who{color:rgb(var(--g))} .pa-rail.b .who{color:rgb(var(--b))}
.pa-rail .pa-bar{position:relative;height:8px;border-radius:4px;background:rgba(255,255,255,.06)}
.pa-rail .pa-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;animation:pa-grow 1.1s cubic-bezier(.2,.8,.2,1) both}
.pa-rail.g .pa-bar i{background:linear-gradient(90deg,rgba(var(--g),.25),rgb(var(--g)))} .pa-rail.b .pa-bar i{background:linear-gradient(90deg,rgba(var(--b),.25),rgb(var(--b)))}
.pa-rail .pa-bar b{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(4,7,14,.9)}
.pa-rail.g .pa-bar b{box-shadow:0 0 0 3px rgba(4,7,14,.9),0 0 12px rgba(var(--g),.9)} .pa-rail.b .pa-bar b{box-shadow:0 0 0 3px rgba(4,7,14,.9),0 0 12px rgba(var(--b),.9)}
.pa-rail .val{display:flex;align-items:baseline;gap:10px}
.pa-rail .val b{font:500 28px/1 var(--mono);letter-spacing:-.03em;color:#F2F4F8}
.pa-rail .val em{font:500 11px var(--mono);font-style:normal;color:var(--p-faint);white-space:nowrap}
.pa-scale .pa-bar{position:relative;height:30px;margin-bottom:16px}
.pa-scale .pa-bar>i{position:absolute;top:0;bottom:0;width:1px;background:rgba(220,228,242,.18)}
.pa-scale .pa-bar>i span{position:absolute;top:100%;left:0;transform:translateX(-50%);margin-top:2px;font:500 10.5px var(--mono);color:var(--p-faint);white-space:nowrap}
.pa-scale .pa-bar>i:first-child span{transform:none} .pa-scale .pa-bar>i:last-child span{transform:translateX(-100%)}
.pa-scale .gap{position:absolute;top:2px;height:8px;border:1px solid rgba(235,240,250,.55);border-top:0}
.pa-scale .gap span{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:2px;padding:0 6px;font:600 11px var(--mono);color:#EEF2FA;background:rgba(13,17,27,.95);white-space:nowrap}

/* the grid of panels */
.pa-dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.pa-chart{grid-column:span 5} .pa-flow2{grid-column:span 7} .pa-heatc{grid-column:span 5} .pa-rings{grid-column:span 4} .pa-mine2{grid-column:span 3} .pa-next{grid-column:span 5} .pa-dash .pa-log-card{grid-column:span 7}
.pa-ring{width:62px;height:62px;flex:none}
.pa-ring circle{fill:none;stroke-width:5} .pa-ring .t{stroke:rgba(255,255,255,.08)} .pa-ring .v{stroke-linecap:round}
.pa-ring text{fill:#E6EAF2;font:600 12px var(--mono);text-anchor:middle}
.pa-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pa-pair-one{display:flex;align-items:center;gap:12px}
.pa-pair-one b{display:block;font:500 19px var(--mono);color:#EEF2FA} .pa-pair-one span{font-size:11.5px} .pa-pair-one.g span{color:rgb(var(--g))} .pa-pair-one.b span{color:rgb(var(--b))}
.pa-note{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--p-faint)}
.pa-foot{display:flex;gap:22px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(150,170,220,.08)}
.pa-foot span{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--p-faint)}
.pa-foot b{font:600 15px var(--mono);color:rgb(var(--g))} .pa-foot b.b{color:rgb(var(--b))}
.pa-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}
.pa-tile{display:flex;flex-direction:column;gap:4px}
.pa-tile span{font-size:11.5px;color:var(--p-faint)}
.pa-tile b{font:500 26px/1.1 var(--mono);color:#EEF2FA} .pa-tile b.g{color:rgb(var(--g))} .pa-tile b small{font-size:11px;color:var(--p-mut);margin-left:4px}
.pa-big1{display:flex;align-items:baseline;gap:8px} .pa-big1 b{font:500 40px/1 var(--mono);letter-spacing:-.03em} .pa-big1 b.b{color:rgb(var(--b))} .pa-big1 span{font-size:13px;color:var(--p-mut)}
.pa-next ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pa-next li a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(150,170,220,.08);color:inherit!important;text-decoration:none}
.pa-next li:first-child a{border-top:0}
.pa-next li a>i{font:600 15px var(--mono);font-style:normal;color:rgba(var(--g),.8)}
.pa-next li a div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pa-next small{font:500 10px var(--mono);letter-spacing:.12em;color:var(--p-acc)} .pa-next b{font-size:13.5px;color:var(--p-ink)} .pa-next span{font-size:12px;color:var(--p-mut)}
.pa-next li a>em{font-style:normal;color:var(--p-faint);transition:transform .2s} .pa-next li a:hover>em{transform:translateX(3px);color:#fff}
@media (max-width:1280px){.pa-chart{grid-column:span 12} .pa-flow2{grid-column:span 12} .pa-heatc{grid-column:span 6} .pa-rings{grid-column:span 6} .pa-mine2{grid-column:span 6} .pa-next,.pa-dash .pa-log-card{grid-column:span 12}}
@media (max-width:1000px){.pa-hero{grid-template-columns:1fr;gap:20px}}
@media (max-width:640px){.pt-main.full{padding:16px 14px 60px} .pa-card,.pa-flow2,.pa-heatc,.pa-rings,.pa-mine2{grid-column:span 12} .pa-top{gap:10px} .pa-months{order:3;width:100%;overflow-x:auto} .pa-months button{flex:none}
  .pa-hero{padding:18px 16px!important} .pa-say>b{font-size:21px} .pa-rail,.pa-scale{grid-template-columns:66px 1fr 72px;gap:10px} .pa-rail .who{white-space:nowrap;font-size:12px} .pa-rail .val{flex-direction:column;gap:2px;align-items:flex-start} .pa-rail .val b{font-size:20px}
  .pa-bgx{left:-14px;right:-14px}}

/* ---- console, second pass: a live status line, a strip of figures with their months as lines, a living
   exchange, the month as day cells; panels arrive one after another; the hands behind answer what is pointed at */
.pa-console .pa-bgx{transition:opacity .5s}
.pa-console.f-me .pa-bgx,.pa-console.f-ai .pa-bgx,.pa-console.f-flow .pa-bgx{opacity:.45}
.pa-status{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 12px;padding:12px 16px;border:1px solid var(--p-line);border-radius:12px;
  background:linear-gradient(90deg,rgba(var(--g),.07),rgba(13,17,27,.6) 40%,rgba(var(--b),.07));animation:pa-in .6s both}
.pa-status>b{font-size:19px;font-weight:700;color:#fff;letter-spacing:.01em}
.pa-status .when{font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--p-faint);margin-right:auto}
.pa-live{display:inline-flex;align-items:center;gap:8px;max-width:38%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 11.5px var(--mono);color:rgba(220,228,242,.75)}
.pa-live i{flex:none;font-style:normal;padding:1px 6px;border-radius:3px;font-size:9.5px;letter-spacing:.12em;color:#04060c;background:rgb(var(--g));box-shadow:0 0 10px rgba(var(--g),.55);animation:pa-blink 2s steps(2) infinite}
.pa-kpis2{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 0 14px;border:1px solid var(--p-line);border-radius:12px;background:rgba(13,17,27,.66);overflow:hidden}
.pa-kpi{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 16px 12px;border-left:1px solid rgba(150,170,220,.08);cursor:default;transition:background .25s;animation:pa-in .55s both;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
.pa-kpi:first-child{border-left:0}
.pa-kpi::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);opacity:0;transition:opacity .25s}
.pa-kpi:hover{background:rgba(255,255,255,.03)} .pa-kpi:hover::after{opacity:1}
.pa-kpi .k{font-size:11.5px;letter-spacing:.06em;color:var(--p-mut)}
.pa-kpi .v{display:flex;align-items:baseline;gap:5px}
.pa-kpi .v b{font:500 30px/1 var(--mono);letter-spacing:-.03em;color:#F2F4F8}
.pa-kpi .v small{font:500 11px var(--mono);color:var(--p-faint)}
.pa-kpi .f{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-height:30px}
.pa-kpi .f em{font:500 10.5px var(--mono);font-style:normal;color:var(--p-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-spark{width:46%;max-width:120px;height:30px;flex:none;overflow:visible}
.pa-spark .ln{fill:none;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;animation:pa-draw 1.2s .4s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes pa-draw{to{stroke-dashoffset:0}}
@keyframes pa-in{from{opacity:0;transform:translateY(8px)}}
.pa-dash>.pt-card{animation:pa-in .6s both;animation-delay:calc(var(--i,0) * 70ms + 100ms)}
.pa-ring .v{stroke-dashoffset:var(--c);animation:pa-ring 1.2s .5s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes pa-ring{to{stroke-dashoffset:0}}
.pa-trace-w{position:relative}
.pa-trace{height:300px;cursor:crosshair}
.pa-tip[hidden]{display:none!important}
.pa-tip{position:absolute;top:8px;display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:8px;background:rgba(6,9,18,.92);border:1px solid rgba(150,170,220,.18);font:500 11.5px var(--mono);color:#E6EAF2;pointer-events:none}
.pa-tip .g{color:rgb(var(--g))} .pa-tip .b{color:rgb(var(--b))}
.pa-ex{position:relative;height:250px}
.pa-ex canvas{position:absolute;inset:0;width:100%;height:100%}
.pa-ex .who{position:absolute;top:calc(52% + 18px);font-size:12px;font-weight:600;transform:translateX(-50%)} .pa-ex .who.g{left:17%;color:rgb(var(--g))} .pa-ex .who.b{left:83%;color:rgb(var(--b))}
.pa-ex .lab{position:absolute;left:0;right:0;text-align:center;font-size:11.5px;color:var(--p-mut)} .pa-ex .lab.up{top:0} .pa-ex .lab.dn{bottom:0}
.pa-ex .lab b{font:600 14px var(--mono);margin:0 2px} .pa-ex .lab b.g{color:rgb(var(--g))} .pa-ex .lab b.b{color:rgb(var(--b))}
.pa-heat-g{display:grid;grid-template-rows:repeat(7,24px);grid-auto-flow:column;grid-auto-columns:46px;grid-template-columns:22px;gap:5px;justify-content:start}
.pa-heat-g .wd{grid-column:1;font:500 10px var(--mono);color:var(--p-faint);align-self:center}
.pa-heat-g i{position:relative;border-radius:4px;background:rgba(255,255,255,.04);border:1px solid rgba(150,170,220,.06);animation:pa-pop .4s both;animation-delay:var(--d)}
.pa-heat-g i::before{content:'';position:absolute;inset:0;border-radius:3px;background:rgb(var(--g));opacity:calc(var(--a) * .9);box-shadow:0 0 calc(var(--a) * 12px) rgba(var(--g),.6)}
.pa-heat-g i b{position:absolute;right:4px;bottom:2px;font:500 9px var(--mono);color:rgba(220,228,242,.45)}
.pa-heat-g i.fut{opacity:.35} .pa-heat-g i.now{outline:1px solid rgba(255,255,255,.55);outline-offset:1px}
@keyframes pa-pop{from{opacity:0;transform:scale(.6)}}
.pa-heat-k{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:10.5px;color:var(--p-faint)}
.pa-heat-k i{width:12px;height:12px;border-radius:3px;background:rgba(var(--g),calc(var(--a) * .9))}
.pa-heat-k em{margin-left:auto;font:500 10.5px var(--mono);font-style:normal}
.pa-rings-g{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pa-rings-g>div>span{display:block;font-size:11.5px;color:var(--p-mut);margin-bottom:8px}
.pa-rings-g .pa-rpair{display:flex;gap:12px}
.pa-rings-g .pa-rpair>div{display:flex;flex-direction:column;align-items:center;gap:3px}
.pa-rings-g .pa-rpair b{font:500 14px var(--mono);color:#E6EAF2} .pa-rings-g .pa-rpair em{font-style:normal;font-size:11px} .pa-rings-g .g em{color:rgb(var(--g))} .pa-rings-g .b em{color:rgb(var(--b))}
.pa-rings-g .pa-ring{width:58px;height:58px}
@media (max-width:1280px){.pa-kpis2{grid-template-columns:repeat(3,minmax(0,1fr))} .pa-kpi:nth-child(4){border-left:0} .pa-kpi:nth-child(n+4){border-top:1px solid rgba(150,170,220,.08)}}
@media (max-width:640px){.pa-kpis2{grid-template-columns:repeat(2,minmax(0,1fr))} .pa-kpi{border-left:0!important;border-top:1px solid rgba(150,170,220,.08)} .pa-kpi:nth-child(-n+2){border-top:0} .pa-kpi:nth-child(even){border-left:1px solid rgba(150,170,220,.08)!important}
  .pa-kpi .v b{font-size:24px} .pa-spark{display:none} .pa-live{max-width:100%} .pa-status>b{font-size:17px} .pa-ex{height:210px} .pa-heat-g{grid-auto-columns:minmax(0,1fr);justify-content:stretch}}
@media (prefers-reduced-motion:reduce){.pa-kpi,.pa-dash>.pt-card,.pa-status,.pa-heat-g i{animation:none} .pa-spark .ln,.pa-ring .v{animation:none;stroke-dashoffset:0}}
.pa-heat-row{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap} .pa-heat{flex:1 1 300px;min-width:0}
.pa-heat-s{display:flex;flex-direction:column;gap:14px;margin:0;padding-left:22px;border-left:1px solid rgba(150,170,220,.08)}
.pa-heat-s dt{font-size:11px;color:var(--p-faint)} .pa-heat-s dd{margin:2px 0 0;font:500 24px/1.1 var(--mono);color:rgb(var(--g))} .pa-heat-s small{font-size:11px;color:var(--p-mut);margin-left:4px}
@media (max-width:640px){.pa-heat-s{flex-direction:row;padding:12px 0 0;border-left:0;border-top:1px solid rgba(150,170,220,.08);width:100%;justify-content:space-between}}

/* the exchange as wiring: three columns of nodes, the strands drawn behind them */
.pa-wire{position:relative;display:flex;flex-direction:column;gap:10px}
.pa-wire-k{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--p-mut)}
.pa-wire-k b{font:600 15px var(--mono);margin-left:4px;color:var(--p-ink)} .pa-wire-k .g b{color:rgb(var(--g))} .pa-wire-k .b b{color:rgb(var(--b))}
.pa-wire-b{position:relative;display:grid;grid-template-columns:minmax(96px,128px) minmax(0,250px) minmax(96px,128px);justify-content:space-between;column-gap:40px;min-height:270px}
.pa-wire-b canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pa-wire .col{position:relative;display:flex;flex-direction:column;justify-content:space-around;gap:8px}
.pa-wire .col>small{position:absolute;top:-2px;font:500 10px var(--mono);letter-spacing:.14em;color:var(--p-faint)} .pa-wire .col.r>small{right:0} .pa-wire .col.m>small{left:50%;transform:translateX(-50%)}
.pa-wire .col.l,.pa-wire .col.r{padding-top:18px}.pa-wire .col.m{padding:18px 0 0;justify-content:center}
.pa-wn{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;cursor:default;
  background:rgba(12,16,26,.82);border:1px solid rgba(var(--c),.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);transition:border-color .2s,box-shadow .2s,opacity .2s}
.pa-wn span{font-size:12px;color:#C9D1DF} .pa-wn b{font:600 16px var(--mono);color:rgb(var(--c))}
.pa-wn.l{border-left:2px solid rgba(var(--c),.8)} .pa-wn.r{border-right:2px solid rgba(var(--c),.8)}
.pa-wn.zero{opacity:.42} .pa-wn.zero b{color:var(--p-faint)}
.pa-wn.on{border-color:rgba(var(--c),.9);box-shadow:0 0 0 1px rgba(var(--c),.35),0 0 22px rgba(var(--c),.22)} .pa-wn.dim{opacity:.32}
.pa-wn:focus-visible{outline:2px solid rgba(var(--c),.8);outline-offset:2px}
.pa-wn.m{--c:220,228,242;padding:8px 12px;border-color:rgba(220,228,242,.16);min-width:0}
.pa-wn.m span{font-size:12.5px;color:var(--p-ink);min-width:0}
.pa-wn.m em{display:flex;gap:6px;font-style:normal;flex:none} .pa-wn.m em i{font:600 12px var(--mono);font-style:normal;padding:1px 6px;border-radius:10px}
.pa-wn.m em i.g{color:rgb(var(--g));background:rgba(var(--g),.12)} .pa-wn.m em i.b{color:rgb(var(--b));background:rgba(var(--b),.12)}

.pa-wire-tip{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:min(78%,420px);display:flex;flex-direction:column;gap:3px;padding:9px 12px;border-radius:8px;
  background:rgba(8,11,19,.94);border:1px solid var(--p-line2);font-size:11.5px;color:#C9D1DF;pointer-events:none;z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.pa-wire-tip.up{bottom:auto;top:20px} .pa-wire-tip[hidden]{display:none!important} .pa-wire-tip em{font-style:normal;color:var(--p-faint)}
@media (max-width:640px){.pa-wire-b{grid-template-columns:80px minmax(0,1fr) 80px;column-gap:42px;min-height:300px} .pa-wn{padding:6px 7px;gap:3px} .pa-wn span,.pa-wn b{white-space:nowrap} .pa-wn span{font-size:10.5px} .pa-wn b{font-size:13px} .pa-wn.m{padding:6px 8px} .pa-wn.m em i.b{display:none} .pa-wn.m span.ell{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px;line-height:1.3} .pa-wire-tip{width:92%}}
/* a past month in the status bar: its own figures and the way back */
.pa-cta.w{color:#C9D1DF;border:1px solid var(--p-line2);background:rgba(255,255,255,.04)}
button.pa-cta{border:0;font:inherit;font-size:12.5px;cursor:pointer}
.pa-rings-g>div>span small{margin-left:6px;font:500 10px var(--mono);color:var(--p-faint)}