:root{
    --bg:#000; --hair:rgba(255,255,255,.08); --hair2:rgba(255,255,255,.14);
    --t1:#f2f4f8; --t2:#9aa3b5; --t3:#5c6474; --t4:#3c4250;
    --link:#8ea6ff;
  }
  *{box-sizing:border-box;margin:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--t1);font:13px/1.5 -apple-system,"Segoe UI",Roboto,Inter,sans-serif;-webkit-font-smoothing:antialiased}
  a{color:var(--link);text-decoration:none} a:hover{color:#fff}
  .num{font-variant-numeric:tabular-nums}
  .wrap{max-width:1280px;margin:0 auto;padding:0 28px 90px}
  .previewbar{color:var(--t3);font-size:10px;text-align:center;padding:7px 10px;border-bottom:1px solid var(--hair);letter-spacing:.14em;text-transform:uppercase}
  .top{display:flex;align-items:baseline;gap:16px 26px;padding:26px 0 0;flex-wrap:wrap}
  .scrollx{overflow-x:auto}
  .brand{font-weight:700;font-size:15px;letter-spacing:-.01em}
  .brand span{color:var(--t3);font-weight:400}
  .nav{margin-left:auto;display:flex;gap:22px;font-size:12px}
  .nav a{color:var(--t2)} .nav a:hover{color:#fff}
  .hero{padding:64px 0 8px}
  .hero h1{font-size:44px;font-weight:250;letter-spacing:-.02em;line-height:1.08;max-width:720px}
  .hero .sub{color:var(--t3);font-size:13px;margin-top:14px}
  section{margin-top:96px}
  .shead{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--hair);padding-bottom:14px}
  .shead h2{font-size:20px;font-weight:600;letter-spacing:-.01em}
  .shead .when{margin-left:auto;font-size:10px;color:var(--t3);letter-spacing:.12em;text-transform:uppercase}
  .h2sub{color:var(--t3);font-size:12px;margin:12px 0 30px;max-width:900px;line-height:1.6}
  .lbl{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
  [data-tip],[data-m]{cursor:default}
  th[data-tip]{text-decoration:underline dotted rgba(255,255,255,.25);text-underline-offset:3px}
  th.srt{cursor:pointer;user-select:none}
  th.srt:hover{color:var(--t1)}
  th.srt.on{color:var(--t1)}
  th .arr{font-size:8px;margin-left:4px;vertical-align:1px}
  [data-m]:hover{color:#fff}
  /* labs */
  .labs{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
  @media(max-width:980px){.labs{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:660px){.labs{grid-template-columns:1fr}}
  .lab{padding:20px 0 22px;border-top:1px solid var(--hair)}
  .lab .who{display:flex;align-items:center;gap:8px}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}
  .lab .who .n{margin-left:auto;font-size:10px;color:var(--t4)}
  .lead{margin-top:12px}
  .lead .nm{font-size:19px;font-weight:350;letter-spacing:-.01em;display:inline-block}
  .lead .meta{color:var(--t3);font-size:11.5px;margin-top:3px}
  .mrow{display:flex;align-items:baseline;gap:8px;margin-top:9px;font-size:12px}
  .mrow .nm{font-weight:550;color:var(--t2)}
  .mrow .st{color:var(--t4);font-size:10px}
  .mrow .p{margin-left:auto;color:var(--t3);font-size:11px}
  .lab .note{color:var(--t4);font-size:10.5px;margin-top:14px;line-height:1.55}
  .new{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#7fe0a8;border:1px solid rgba(127,224,168,.35);border-radius:99px;padding:0 6px;margin-left:8px;vertical-align:3px;line-height:1.6}
  .mrow .new{margin-left:0;vertical-align:0}
  .older{margin-top:9px;font-size:12px}
  .older summary{cursor:pointer;color:var(--t4);font-size:10.5px;list-style:none}
  .older summary::-webkit-details-marker{display:none}
  .older summary::before{content:"+ "} .older[open] summary::before{content:"− "}
  .older summary:hover{color:var(--t2)}
  .older summary:focus-visible{outline:1px solid var(--t2);outline-offset:3px}
  /* timeline */
  .axis{display:flex;margin:0 0 6px;padding-left:236px;padding-right:44px}
  .axis .seg{overflow:hidden;white-space:nowrap;flex:1;font-size:9.5px;color:var(--t4);letter-spacing:.1em;text-transform:uppercase;border-left:1px solid var(--hair);padding-left:6px}
  .trow{display:flex;align-items:center;border-top:1px solid var(--hair);min-height:108px}
  .trow:last-of-type{border-bottom:1px solid var(--hair)}
  .tinfo{width:236px;flex:none;padding:14px 18px 14px 0}
  .tinfo .who{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
  .tinfo .q{color:var(--t3);font-size:11px;margin-top:3px;line-height:1.4}
  .tmeta{display:flex;flex-direction:column;gap:1px;margin-top:7px;font-size:10px;color:var(--t4)}
  .tmeta b{color:var(--t2);font-weight:550}
  .tmeta .thin{color:#c9a15a}
  /* Plot geometry: a label band above (--pt), a date band below (--pb); a leg's height
     inside the band between them is its own market price. */
  .track{--pt:26px;--pb:18px;flex:1;position:relative;height:108px;overflow-x:clip;min-width:0}
  .track .grid{position:absolute;inset:0;display:flex}
  .track .grid i{flex:1;border-left:1px solid rgba(255,255,255,.045)}
  .plot{position:absolute;left:0;right:0;top:var(--pt);bottom:var(--pb);border-bottom:1px solid rgba(255,255,255,.07)}
  .plot .half{position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(255,255,255,.07)}
  .plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .plot polyline{fill:none;stroke:var(--acc);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.55}
  .plot polygon{fill:var(--acc);opacity:.07;stroke:none}
  .pt{position:absolute;top:0;bottom:0;width:0;z-index:2}
  .pt .c{position:absolute;left:0;display:block;width:var(--sz);height:var(--sz);transform:translate(-50%,50%);
         bottom:calc(var(--pb) + (100% - var(--pt) - var(--pb)) * var(--p) / 100);
         border-radius:50%;background:#000;border:1.5px solid var(--acc);box-shadow:0 0 0 2px rgba(0,0,0,.9)}
  .pt .c.hi{background:var(--acc)}
  /* Value rides just above its own dot; dates share one baseline so the axis reads cleanly. */
  .pt .v,.cl .v{position:absolute;left:0;transform:translateX(calc(-50% + var(--sh,0px)));font-size:11.5px;font-weight:650;white-space:nowrap;line-height:1.2}
  .pt .v{bottom:calc(var(--pb) + (100% - var(--pt) - var(--pb)) * var(--p) / 100 + var(--sz) / 2 + 4px)}
  .pt .d,.cl .d{position:absolute;left:0;bottom:1px;transform:translateX(calc(-50% + var(--sh,0px)));font-size:9px;color:var(--t4);white-space:nowrap;line-height:1.2}
  .pt.hid .v,.pt.hid .d{display:none}
  .pt.hid{z-index:3}
  /* Cluster summary — one label for a band of points too tight to label individually.
     Its data-tip enumerates every leg; each dot underneath still has its own. */
  .cl{position:absolute;top:0;bottom:0;width:0;z-index:4;pointer-events:auto}
  .cl .v{top:2px;color:var(--t2);background:rgba(0,0,0,.8);padding:0 3px;border-radius:3px}
  .cl .d{opacity:.9}
  .tlink{width:44px;flex:none;text-align:right;font-size:13px}
  .trel,.talt{padding:0 44px 0 236px;color:var(--t4);font-size:10.5px;line-height:1.5}
  .trel{display:flex;flex-direction:column;gap:3px;margin:2px 0 14px}
  .trel .lbl{font-size:8.5px;margin-bottom:1px}
  .trel .rrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
  .trel .rq a,.trel .rq{color:var(--t3)} .trel .rq a:hover{color:#fff}
  .trel .rl b{color:var(--t2);font-weight:600}
  .talt{margin:2px 0 14px}
  .nomkt{color:var(--t4);font-size:11px;margin-top:16px}
  @media(max-width:760px){
    .axis{padding-left:0;padding-right:0}
    .trow{flex-wrap:wrap;position:relative;padding-bottom:8px}
    .tinfo{width:100%;padding:12px 34px 2px 0}
    .tmeta{flex-direction:row;flex-wrap:wrap;gap:2px 12px}
    .track{flex:1 1 100%;height:100px}
    .tlink{position:absolute;top:12px;right:0;width:auto}
    .trel,.talt{padding-left:0;padding-right:0;margin-top:0}
    .hero h1{font-size:32px}
  }
  /* tables */
  .take{font-size:15px;font-weight:300;color:var(--t2);margin:-8px 0 26px;max-width:900px;line-height:1.6}
  .take b{color:var(--t1);font-weight:550}
  table{width:100%;border-collapse:collapse}
  th{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);font-weight:600;
     padding:0 14px 10px;text-align:right;border-bottom:1px solid var(--hair2);white-space:nowrap}
  th.l{text-align:left;padding-left:0}
  td{padding:12px 14px;border-bottom:1px solid var(--hair);text-align:right;font-size:14px;color:var(--t3)}
  td.l{text-align:left;padding-left:0}
  td .pm{font-size:10px;color:var(--t4);margin-left:2px}
  .mcell{display:flex;align-items:center;gap:10px}
  .mcell .rk{width:20px;font-size:11px;color:var(--t4)}
  .mcell .nm{font-size:15px;font-weight:550;color:var(--t1)}
  .mcell .star{font-size:10px;color:var(--t2);border:1px solid var(--hair2);border-radius:99px;padding:1px 8px;white-space:nowrap}
  td.win{color:#fff;font-weight:650}
  td.score{color:var(--t1);font-weight:600}
  td.score .sbar{display:inline-block;width:38px;height:2px;background:rgba(255,255,255,.1);vertical-align:3px;margin-right:9px;position:relative}
  td.score .sbar i{position:absolute;left:0;top:0;bottom:0;background:var(--t2)}
  tr.bestrow td.score .sbar i{background:#fff}
  /* price-corrected score: same weight as the coding score, with the size of the price
     adjustment shown next to it so the correction is never a black box */
  td.pscore{color:var(--t1);font-weight:600}
  td.pscore .pm{margin-left:6px;font-variant-numeric:tabular-nums}
  td.pscore .pm.up{color:#5ec98a}
  td.pscore .pm.dn{color:#d6796f}
  .notrun{font-size:10px;color:var(--t4);letter-spacing:.04em}
  tbody tr:hover td{background:rgba(255,255,255,.015)}
  .tfoot{color:var(--t4);font-size:10.5px;margin-top:16px;max-width:900px;line-height:1.6}
  /* tooltip */
  #tip{position:fixed;z-index:99;pointer-events:none;background:#0b0c12;border:1px solid var(--hair2);
       border-radius:10px;padding:12px 14px;max-width:330px;box-shadow:0 14px 44px rgba(0,0,0,.75);
       opacity:0;transition:opacity .08s;font-size:11.5px;line-height:1.5}
  #tip.on{opacity:1}
  #tip{max-height:calc(100vh - 16px);overflow:hidden;max-width:min(330px,calc(100vw - 44px))}
  #tip.pinned{pointer-events:auto;overflow-y:auto}
  .nm[role="button"]{cursor:pointer}
  .nm[role="button"]:focus-visible{outline:1px solid var(--t2);outline-offset:3px}
  #tip .tn{font-size:13.5px;font-weight:650;color:var(--t1)}
  #tip .tm{color:var(--t3);font-size:10.5px;margin:2px 0 8px}
  #tip .tg{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin:8px 0}
  #tip .tg div{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--t3)}
  #tip .tg b{color:var(--t1);font-weight:600;font-variant-numeric:tabular-nums}
  #tip .tw{color:var(--t2);font-size:10.5px;border-top:1px solid var(--hair);padding-top:7px;margin-top:2px}
  footer{margin-top:110px;border-top:1px solid var(--hair);padding-top:16px;color:var(--t4);font-size:10.5px;line-height:1.7;max-width:900px}
