* { box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font:14px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,sans-serif; margin:0; padding:18px; }
  @media (min-width:1100px){ body{ padding:24px max(34px,calc((100vw - 1320px)/2)); } }
  a { text-decoration:none; color:inherit; }
  h1 { font-size:21px; margin:0; }
  h2 { font-size:15px; margin:26px 0 4px; }
  .muted { color:var(--muted); } .sm { font-size:12px; }
  .pos { color:var(--up); } .neg { color:var(--down); }
  .panel { background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:14px; margin-top:10px; }
  .tagline { color:var(--muted); font-size:12.5px; max-width:96ch; margin:4px 0 0; line-height:1.55; }
  .asof { font-size:12px; color:var(--muted); }
  .banner { border-radius:10px; padding:11px 14px; margin:12px 0; font-size:13px; background:var(--panel2); border:1px solid var(--line); display:flex; gap:9px; align-items:flex-start; }
  .banner b { color:var(--text); }
  .chip { display:inline-block; font-size:11px; padding:2px 8px; margin:0 5px 5px 0; border-radius:7px; background:var(--panel2); border:1px solid var(--line); color:var(--muted); }
  .chip.warn { background:rgba(250,204,21,.12); border-color:rgba(250,204,21,.4); color:var(--warn); }
  .chip.hot { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); color:var(--down); }
  .chip.ok  { background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.4); color:var(--up); }
  /* selector */
  .selwrap { margin:12px 0 2px; }
  .selgrp { margin:6px 0; }
  .selgrp .gl { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-right:8px; }
  .pick { display:inline-block; cursor:pointer; font-size:12.5px; font-weight:600; padding:4px 10px; margin:0 5px 6px 0; border-radius:8px; background:var(--panel); border:1px solid var(--line); color:var(--text); }
  .pick:hover { border-color:var(--link); color:var(--link); }
  .pick.on { background:var(--accent,#5aa7ff); border-color:var(--accent,#5aa7ff); color:#fff; }
  /* hero */
  .hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:14px; align-items:start; }
  @media (max-width:880px){ .hero{ grid-template-columns:1fr; } }
  .htitle { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .htitle .nm { font-size:24px; font-weight:700; }
  .htitle .grp { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  .idxbadge { font-size:11px; font-weight:700; padding:2px 9px; border-radius:7px; text-transform:uppercase; letter-spacing:.04em; }
  .b-calm{background:rgba(34,197,94,.14);color:var(--up);} .b-elevated{background:rgba(250,204,21,.16);color:var(--warn);}
  .b-high{background:rgba(249,115,22,.16);color:#f97316;} .b-extreme{background:rgba(239,68,68,.16);color:var(--down);}
  .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
  @media (max-width:560px){ .cards{ grid-template-columns:1fr; } }
  /* two-block horizon card: DIRECTION (top, colored) + RISK (bottom, neutral) */
  .hc { background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--line); border-radius:10px; padding:0; overflow:hidden; }
  .hc.up { border-left-color:var(--up); } .hc.down { border-left-color:var(--down); }
  .hc .hk { font-size:11px; color:var(--muted); padding:8px 11px 0; }
  .hc .dblock { padding:5px 11px 9px; }
  .hc .dlab, .hc .rlab { font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
  .hc .dirv { font-size:15px; font-weight:700; margin-top:1px; }
  .hc .pup { float:right; font-variant-numeric:tabular-nums; font-weight:700; }
  .hc .why { font-size:11px; color:var(--muted); margin-top:3px; line-height:1.4; }
  .hc .pill { display:inline-block; font-size:10px; padding:1px 6px; border-radius:6px; margin-top:5px; }
  .hc .pill.ok { background:rgba(34,197,94,.14); color:var(--up); }
  .hc .pill.flip { background:var(--panel); color:var(--muted); border:1px solid var(--line); }
  .hc .rblock { padding:7px 11px 9px; border-top:1px solid var(--line); background:var(--panel); }
  .hc .rv { font-size:14px; font-variant-numeric:tabular-nums; margin-top:1px; }
  .hc .rv2 { font-size:11.5px; color:var(--muted); margin-top:1px; }
  .hc.thin { opacity:.72; }
  .dir-up{color:var(--up);} .dir-down{color:var(--down);} .dir-flip{color:var(--muted);}
  .legend { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:9px 13px; margin:12px 0; font-size:12px; color:var(--muted); line-height:1.75; }
  .legend b{color:var(--text);font-weight:600;}
  .help{position:relative;cursor:help;border-bottom:1px dotted var(--muted);}
  .help .tip{visibility:hidden;position:absolute;left:0;top:135%;z-index:30;width:300px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:11.5px;color:var(--text);line-height:1.5;box-shadow:0 4px 16px rgba(0,0,0,.25);max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;}
  /* invisible hover pad across the icon→tip gap — keeps :hover alive mid-travel (on .help, not .tip: the tip is a scroll container and clips its pseudos) */
  .help:hover::before{content:'';position:absolute;top:100%;left:-30px;right:-30px;height:10px;}
  .help:hover .tip{visibility:visible;}
  .drv { display:flex; align-items:center; gap:8px; font-size:12.5px; margin:5px 0; }
  .drv .lab { flex:0 0 178px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .drv .bar { flex:1; position:relative; height:14px; }
  .drv .bar i { position:absolute; top:0; height:14px; border-radius:3px; }
  .drv .bar i.up { left:50%; background:rgba(34,197,94,.55); }
  .drv .bar i.dn { right:50%; background:rgba(239,68,68,.55); }
  .drv .bar i.dispo { background:transparent; border:1px dashed var(--line); }
  .drv .vv { flex:0 0 42px; text-align:right; font-variant-numeric:tabular-nums; }
  .drv .sc { flex:0 0 14px; text-align:center; font-size:10px; color:var(--up); }
  /* table */
  .ts { overflow-x:auto; margin-top:8px; }
  table { border-collapse:collapse; width:100%; font-size:13px; }
  th,td { padding:7px 9px; border-bottom:1px solid var(--line); white-space:nowrap; }
  th { color:var(--muted); font-weight:500; text-align:right; cursor:pointer; }
  th:first-child,td:first-child { text-align:left; }
  td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; }
  tbody tr { cursor:pointer; }
  tbody tr:hover { background:var(--panel2); }
  tbody tr.on { background:rgba(90,167,255,.10); }
  .tband { font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:6px; }
  footer { color:var(--muted); font-size:11.5px; margin-top:28px; border-top:1px solid var(--line); padding-top:12px; max-width:98ch; line-height:1.6; }
  .conebox svg { width:100%; height:auto; display:block; }