:root{--bg:#05070b;--panel:#090d14;--panel2:#0d121b;--line:#1a2130;--line2:#232c3f;--amber:#d49b45;--amber2:#f0cb72;--red:#c75242;--teal:#48a596;--text:#cbb28a;--muted:#8c795a;--muted2:#596274;--white:#f2eee8;--fontH:'JetBrains Mono', monospace;--fontB:'Inter', sans-serif;--fontM:'JetBrains Mono', monospace;}
*{box-sizing:border-box} html,body{margin:0;height:100%;background:#000;color:var(--text);font-family:var(--fontB);overflow:hidden}
.stage-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%, rgba(212,155,69,.04), transparent 38%), linear-gradient(180deg,#040507,#05070b)}
.stage{position:relative;width:1920px;height:1080px;background:var(--bg);overflow:hidden;border:1px solid #0c1118;box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;transform-origin:center center}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.46) 100%)}
.scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,155,69,.14),transparent);opacity:.3;pointer-events:none;z-index:200}
.header{display:none}
#bottomMeta{display:none}
.stageCtrls{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;z-index:271;display:flex;flex-direction:row;align-items:center;gap:6px;pointer-events:auto;white-space:nowrap}
.badge,.parCtl{font:8px var(--fontM);letter-spacing:.1em;color:var(--muted2);text-transform:uppercase;background:rgba(8,11,17,.82);padding:2px 6px;border-radius:2px;white-space:nowrap}
.parCtl{display:flex;align-items:center;gap:5px} .parCtl input{width:52px;accent-color:#f0cb72}
.playMenu{position:relative;z-index:272} .menuBtn{font:8px var(--fontM);letter-spacing:.1em;color:var(--muted2);text-transform:uppercase;background:rgba(8,11,17,.82);padding:2px 6px;border-radius:2px;cursor:pointer;border:none;white-space:nowrap} .playDrop{position:absolute;right:0;bottom:calc(100% + 6px);top:auto;min-width:200px;background:rgba(5,7,11,.98);border:1px solid var(--line2);padding:8px;display:none;flex-direction:column;gap:8px;box-shadow:0 -12px 28px rgba(0,0,0,.35)} .playMenu.open .playDrop{display:flex}
.pmLabel{font:9px var(--fontM);color:var(--muted2);letter-spacing:.12em;text-transform:uppercase} .pmRow{display:flex;gap:4px;flex-wrap:wrap} .pmRow button{background:none;border:1px solid var(--line2);padding:5px 8px;color:var(--muted);font:10px var(--fontM);cursor:pointer} .pmRow button.on{color:var(--amber2);border-color:rgba(240,203,114,.35);background:rgba(212,155,69,.08)}
.main{position:absolute;left:0;right:0;top:0;bottom:116px;display:grid;grid-template-columns: 423px 1fr 423px;grid-template-rows:1fr;gap:0;z-index:120}
.left,.right{position:relative;z-index:220;border-left:1px solid var(--line);display:flex;flex-direction:column;height:100%;overflow:hidden;background:transparent !important} .left{border-right:1px solid var(--line);background:transparent !important} .right{border-left:1px solid var(--line);display:flex;flex-direction:column;background:transparent !important}
.center{position:relative;z-index:20;overflow:visible;background:radial-gradient(circle at 50% 50%, rgba(212,155,69,.03), transparent 38%)}
.featured{padding:16px;border-bottom:1px solid var(--line)} .featuredFrame{display:grid;grid-template-columns:142px 1fr;gap:16px}
.portrait{position:relative;width:142px;height:184px;border:1px solid var(--line2);background:linear-gradient(160deg, var(--panel2), var(--bg));overflow:hidden} .portrait img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2} .fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .fallback .circle{width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px rgba(212,155,69,.12) inset}
.corner{position:absolute;width:10px;height:10px} .tl{top:6px;left:6px;border-top:1px solid var(--amber);border-left:1px solid var(--amber)} .tr{top:6px;right:6px;border-top:1px solid var(--amber);border-right:1px solid var(--amber)} .bl{bottom:6px;left:6px;border-bottom:1px solid var(--amber);border-left:1px solid var(--amber)} .br{bottom:6px;right:6px;border-bottom:1px solid var(--amber);border-right:1px solid var(--amber)}
.fName{font:700 22px/1.06 var(--fontH);color:var(--white)} .fOcc{font:7.6px/1.4 var(--fontM);letter-spacing:.05em;color:var(--muted);margin-top:7px} .metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin-top:12px} .metric{padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.04)} .mk{font:6.8px var(--fontM);letter-spacing:.16em;color:var(--muted2);text-transform:uppercase} .mv{font:9.2px/1.35 var(--fontH);margin-top:3px;color:var(--amber2)} .miniNote{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.05);font:7.2px/1.45 var(--fontM);color:var(--muted2)}
.caseStrip{padding:9px 12px;border-bottom:1px solid var(--line);font:7px var(--fontM);letter-spacing:.14em;color:var(--muted)} .caseList{flex:1;min-height:0;overflow-y:auto;padding:10px} .caseList::-webkit-scrollbar,.eventStack::-webkit-scrollbar{width:5px} .caseList::-webkit-scrollbar-track{background:rgba(255,255,255,.03)} .caseList::-webkit-scrollbar-thumb,.eventStack::-webkit-scrollbar-thumb{background:#2d3e54;border-radius:3px} .caseList::-webkit-scrollbar-thumb:hover{background:#3d5270}
.caseCard{position:relative;padding:10px 12px 10px 14px;margin-bottom:8px;border:1px solid rgba(255,255,255,.045);cursor:pointer;transition:.18s} .caseCard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent, var(--amber));opacity:.75} .caseCard:hover{background:rgba(212,155,69,.05);border-color:rgba(212,155,69,.16)} .caseCard.active{border-color:rgba(212,155,69,.28);background:transparent;box-shadow:0 0 0 1px rgba(212,155,69,.06) inset;transform:translateX(2px)} .caseTop{display:flex;justify-content:space-between;gap:8px} .cMono{font:7px var(--fontM);color:var(--muted2)} .caseNm{font:700 14px/1.12 var(--fontH);color:var(--white);margin-top:4px} .caseSub{font:8.8px var(--fontB);color:#b29363;margin-top:4px} .caseMeta{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font:8px var(--fontM);color:var(--muted)}
.centerTop{position:absolute;left:42px;right:42px;top:12px;display:flex;justify-content:space-between;pointer-events:none;z-index:90;opacity:.48} .ctBlock{font:5.6px var(--fontM);line-height:1.1;color:rgba(126,111,87,.58);letter-spacing:.06em;text-transform:uppercase}
.parallax{position:absolute;inset:0;overflow:visible} .layer{position:absolute;inset:-260px;will-change:transform} .gridSvg,.graphSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#leftLogoSpace{padding:10px 14px;min-height:58px;border-bottom:1px solid var(--line);flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px} #leftCol{flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column}
.rightHead{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center} .rightTitle{font:700 18px var(--fontH);letter-spacing:.12em;color:var(--amber2)} .rightMeta{font:6.3px var(--fontM);letter-spacing:.12em;color:var(--muted2)} .eventStack{padding:12px 12px 18px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.stackSentence{border:1px solid rgba(255,255,255,.055);padding:10px 12px} .stackSentence .sK{font:6.3px var(--fontM);color:var(--muted2);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px} .stackSentence .sV{font:700 16px/1.1 var(--fontH);margin-bottom:6px} .stackSentence .sD{font:8.4px/1.38 var(--fontB);color:#cfbf9f}
.eventCard{position:relative;padding:10px 14px 10px 16px;border:1px solid rgba(255,255,255,.065);cursor:pointer;transition:transform .18s ease,background .18s,border-color .18s} .eventCard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ec, var(--amber))} .eventCard:hover{background:rgba(212,155,69,.04);border-color:rgba(212,155,69,.15)} .eventCard.active{border-color:rgba(212,155,69,.24);background:transparent;box-shadow:0 0 0 1px rgba(212,155,69,.06) inset} .eTop{display:grid;grid-template-columns: 52px 1fr 43px;gap:10px;align-items:start} .eYear{font:9.2px var(--fontM);color:var(--amber2)} .eAge{font:7.6px var(--fontM);color:var(--muted2);margin-top:2px} .eText{font:10.9px/1.22 var(--fontB);color:var(--white)} .eWeight{text-align:right;font:10.1px var(--fontM)} .eMeta{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.035);font:6.7px var(--fontM);letter-spacing:.08em;color:rgba(126,111,87,.6);text-transform:uppercase}
.controls{position:absolute;left:0;right:0;bottom:0;height:136px;z-index:260;border-top:1px solid var(--line);background:rgba(8,11,17,.98);pointer-events:auto} .timeline{position:absolute;left:0;right:0;top:0;bottom:0;padding:10px 18px 16px} .years{display:flex;justify-content:space-between;font:9px var(--fontM);color:var(--muted2);padding:0 42px} .trackArea{position:absolute;left:42px;right:42px;top:34px;height:56px;touch-action:none;cursor:ew-resize} .trackSvg{position:absolute;inset:0;width:100%;height:56px;overflow:visible} .trackBase{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.2} .trackLine{fill:none;stroke:rgba(240,203,114,.96);stroke-width:2.3;filter:drop-shadow(0 0 6px rgba(240,203,114,.28))} .tEvent{position:absolute;top:0;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:var(--ec, var(--amber));box-shadow:0 0 8px rgba(255,255,255,.08);cursor:pointer} .sliderWrap{position:absolute;left:0;right:0;top:0;height:56px} .timelineRange{position:absolute;left:0;right:0;top:0;width:100%;height:56px;background:transparent;-webkit-appearance:none;appearance:none;pointer-events:auto} .timelineRange::-webkit-slider-runnable-track{height:56px;background:transparent} .timelineRange::-moz-range-track{height:56px;background:transparent} .timelineRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:0;width:1px;height:56px;border-radius:0;background:transparent;border:none;box-shadow:none;cursor:ew-resize} .timelineRange::-moz-range-thumb{width:1px;height:56px;border-radius:0;background:transparent;border:none;box-shadow:none;cursor:ew-resize} .scrubLine{position:absolute;top:0;bottom:0;left:var(--scrub,50%);width:2px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(240,203,114,.10),rgba(240,203,114,.95),rgba(240,203,114,.10));box-shadow:0 0 12px rgba(240,203,114,.55);pointer-events:none;z-index:4} .scrubLabel{position:absolute;top:58px;left:var(--scrub,50%);transform:translateX(-50%);font:10px var(--fontM);color:var(--amber2);white-space:nowrap;z-index:5;background:rgba(5,7,11,.72);padding:1px 5px;border-radius:2px} .tInfoL{position:absolute;left:18px;bottom:8px;font:8px var(--fontM);color:var(--muted2);pointer-events:none;z-index:270;background:rgba(8,11,17,.82);padding:2px 6px;border-radius:2px} .tInfoR{position:absolute;right:18px;bottom:8px;font:8px var(--fontM);color:var(--muted2);pointer-events:none;z-index:270;background:rgba(8,11,17,.82);padding:2px 6px;border-radius:2px}
.sinLabel{font:700 7px var(--fontM);letter-spacing:.12em;paint-order:stroke fill;stroke:rgba(5,7,11,.96);stroke-width:5px}
.tlPlayBtn{position:absolute;left:8px;top:47px;width:30px;height:30px;border:none;background:none;color:rgba(240,203,114,.65);font:14px/1 var(--fontM);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10;letter-spacing:0} .tlPlayBtn:hover{color:rgba(240,203,114,1)}

#centerLogo{display:flex;flex-direction:row;align-items:center;gap:9px;pointer-events:none}
.centerLogoText{font:700 13px var(--fontM);letter-spacing:.38em;color:rgba(240,203,114,.65)}
.centerLogoSub{font:700 13px var(--fontM);letter-spacing:.38em;color:rgba(255,255,255,.28);text-transform:uppercase}
#leftLogoMeta{font:7.5px var(--fontM);letter-spacing:.2em;color:var(--muted2);white-space:nowrap;text-transform:uppercase}

/* Foreground UI above graph */
.left, .right, .controls { isolation:isolate; }
.left > *, .right > *, .controls > * { position:relative; z-index:1; }

/* Glass content */
.featured{
  background:rgba(255,255,255,.05) !important;
  backdrop-filter:blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(125%) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.10), inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
.caseCard{
  background:rgba(255,255,255,.035) !important;
  backdrop-filter:blur(12px) saturate(118%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(118%) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.022) !important;
}
.rightHead{
  background:rgba(255,255,255,.04) !important;
  backdrop-filter:blur(14px) saturate(122%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(122%) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.022) !important;
}
.stackSentence{
  background:rgba(255,255,255,.04) !important;
  backdrop-filter:blur(14px) saturate(122%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(122%) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.022) !important;
}
.eventCard{
  background:rgba(255,255,255,.03) !important;
  backdrop-filter:blur(12px) saturate(118%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(118%) !important;
  box-shadow:0 5px 16px rgba(0,0,0,.07), inset 0 0 0 1px rgba(255,255,255,.02) !important;
}

/* Timeline foreground glass */
.timeline{
  background:rgba(255,255,255,.03) !important;
  backdrop-filter:blur(14px) saturate(122%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(122%) !important;
  box-shadow:0 -6px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.022) !important;
}


@keyframes fadeInSoft{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fadeNew{animation:fadeInSoft 1.1s cubic-bezier(0.22,1,0.36,1) both}
.labelFade.fadeNew{animation-duration:1.4s}
.labelFadeSlow.fadeNew{animation-duration:6s;animation-timing-function:cubic-bezier(0.4,0,0.2,1)}
.hlAxisLayer{position:absolute;inset:0;overflow:visible;will-change:transform}
.labelBox{position:absolute;background:rgba(255,255,255,.035);backdrop-filter:blur(4px) saturate(118%);-webkit-backdrop-filter:blur(4px) saturate(118%);box-shadow:0 6px 18px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.022);border-radius:2px;padding:5px 6px;box-sizing:border-box;overflow:hidden;transition:left .18s ease,top .18s ease}


.tInfoL,.tInfoR{white-space:nowrap}