/* Shared stylesheet for the famous-chart pages and their hub.
   Extracted from the Elon Musk template on 2026-08-05. It used to be an inline <style> in the
   page, which at 953 pages would be 953 copies of the same rules and 953 places to fix a bug.
   One file, cached across the whole set, and the hub generator can read it without reaching
   into a draft that git does not track.
   Everything here sits ON TOP of blog/omni-article.css, which supplies .om-btn and the tokens. */
body { background: var(--om-aurora-base); background-attachment: fixed; }
    .om-page-aurora { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
    .om-page-aurora span { position: absolute; display: block; border-radius: 50%; filter: var(--om-aurora-blur); }
    .om-pa-1 { width: 52rem; height: 34rem; left: -16rem; top: -10rem; background: var(--om-aurora-teal); opacity: .80; }
    .om-pa-2 { width: 40rem; height: 27rem; right: -13rem; top: 12%; background: var(--om-aurora-gold); opacity: .42; }
    .om-pa-3 { width: 48rem; height: 30rem; left: 12%; bottom: -14rem; background: var(--om-aurora-blue); opacity: .70; }
    .om-pa-4 { width: 44rem; height: 28rem; right: -10rem; bottom: -8rem; background: var(--om-aurora-teal); opacity: .55; }
    body > header, body > main, body > footer { position: relative; z-index: 1; }
    table.t-t { background: rgba(6,18,20,.42); border-radius: 10px; overflow: hidden; }
    table.t-t th { background: rgba(4,12,14,.55); }
    .g-bar { border-bottom: 1px solid var(--om-line); background: rgba(4,12,14,.5); backdrop-filter: blur(8px); }
    .g-bar-in { display:flex; align-items:center; justify-content:space-between; max-width:1100px; margin:0 auto; padding: var(--om-space-3) var(--om-space-4); }
    /* The header logo lockup lives in blog/omni-article.css, which owns both gold ramps and
   decides which one shows per theme. It is not duplicated here; a second copy would fight it
   and would not know about the light-theme ramp. */
    .g-wrap { max-width:1040px; margin:0 auto; padding: var(--om-space-6) var(--om-space-4) var(--om-space-7); }
    .g-head { text-align:center; margin-bottom: var(--om-space-2); }
    .g-h1 { display:inline-block; font-family: var(--om-font-display); font-weight:500; font-size: clamp(2.1rem, 5vw, 3.1rem); line-height:1.14; margin:0 0 18px; padding-bottom:.20em; position:relative; background: linear-gradient(180deg,#f0cd8e,#b88a3c); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .g-h1::after { content:""; position:absolute; left:0; right:0; bottom:.09em; height:1px; background:rgba(240,205,142,.55); }
    .g-portrait { width:248px; height:248px; margin:0 auto 22px; border-radius:50%; padding:3px; background:linear-gradient(160deg,#f0cd8e,#b88a3c); box-shadow:0 6px 22px rgba(0,0,0,.18); }
    .g-portrait img { width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 38%; display:block; background:#e9e3d6; }
    .t-keyfacts { max-width:46rem; margin:14px auto 0; font-size:1.06rem; line-height:1.65; color:var(--om-ink); }
    .t-keyfacts b { color:var(--om-gold-hi); font-weight:600; }
    .g-sub { color: var(--om-ink-soft); font-size:1.12rem; line-height:1.6; max-width:46rem; margin:0 auto; }
    .g-foot { text-align:center; color: var(--om-ink-faint); padding: var(--om-space-6) var(--om-space-4); border-top:1px solid var(--om-line); font-family: var(--om-font-display); }
    .g-foot a { color: var(--om-gold-hi); text-decoration:none; }
    .t-h2 { font-family: var(--om-font-display); font-weight:500; font-size:1.9rem; color: var(--om-gold-hi); margin: var(--om-space-6) 0 var(--om-space-2); line-height:1.2; padding-bottom:.14em; }
    .t-h3 { font-family: var(--om-font-display); font-weight:500; font-size:1.4rem; margin: var(--om-space-5) 0 var(--om-space-2); color: var(--om-ink); }
    .t-p { color: var(--om-ink-soft); line-height:1.68; margin: 0 0 var(--om-space-3); }
    .t-p-bright { color: var(--om-ink); }
    .t-lead { color: var(--om-ink); font-size:1.06rem; line-height:1.6; margin:0 0 var(--om-space-3); }
    table.t-t { width:100%; border-collapse:collapse; margin: var(--om-space-3) 0 var(--om-space-4); font-size:.95rem; }
    table.t-t th, table.t-t td { text-align:left; padding:10px 10px; border-bottom:1px solid var(--om-line); }
    table.t-t th { color: var(--om-gold-hi); font-weight:600; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; }
    table.t-t td.num { text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }
    .t-note { border-left:2px solid var(--om-gold-hi); padding: var(--om-space-2) var(--om-space-3); margin: var(--om-space-4) 0; color: var(--om-ink-soft); background: rgba(240,205,142,.045); border-radius:0 8px 8px 0; line-height:1.6; }
    .t-cta { text-align:center; margin: var(--om-space-6) 0 var(--om-space-4); }
    .t-hero-one { display:flex; justify-content:center; margin: var(--om-space-4) 0 var(--om-space-3); }
    .t-hero-one img { width:100%; max-width:420px; height:auto; display:block; }
    .t-hero-one.hero-bodygraph img { max-width:336px; }
    .t-hero-one.hero-wheel img { max-width:420px; }
    .t-hero-one.hero-gk img { max-width:546px; }
    .t-cap { text-align:center; color:var(--om-ink-faint); font-size:.92rem; margin-bottom: var(--om-space-5); }
    .t-facts { display:grid; grid-template-columns: repeat(2,1fr); gap:0; margin: var(--om-space-4) 0; }
    .t-facts div { padding:12px 14px; border-bottom:1px solid var(--om-line); }
    .t-facts dt { color:var(--om-gold-hi); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; margin:0 0 3px; }
    .t-facts dd { margin:0; color:var(--om-ink); font-size:1.05rem; }
    @media (max-width:520px) { .t-facts { grid-template-columns:1fr; } }
    .g-divider { width:64px; height:1px; background:var(--om-line); margin:2px auto 16px; }
    .om-jump { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:16px 0 0; }
    .om-jump a { font-size:.72rem; padding:calc(.5rem + 4px) 1.15rem .5rem; }
    html { scroll-behavior:smooth; }
    .om-rating-row { text-align:center; margin: 0 0 var(--om-space-4); }
    .om-rating-title { color:var(--om-gold-hi); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }
    .om-stars { font-size:1.15rem; letter-spacing:.1em; }
    .om-stars .on { color:#f0cd8e; text-shadow:0 0 8px rgba(240,205,142,.5); }
    .om-stars .off { color:rgba(240,205,142,.22); }
    .om-rating-note { color:var(--om-ink-soft); font-size:.78rem; max-width:34rem; margin:6px auto 0; line-height:1.5; }
    .om-signpost { position:relative; overflow:hidden; border:1px solid rgba(240,205,142,.46); border-radius:14px;
                   background: var(--om-aurora-base); padding: var(--om-space-4) var(--om-space-4);
                   margin: var(--om-space-5) 0; text-align:center; }
    .om-signpost::before { content:""; position:absolute; inset:-30% -10% auto -10%; height:70%;
                           background: var(--om-aurora-teal); filter: var(--om-aurora-blur); opacity:.55; pointer-events:none; }
    .om-signpost::after { content:""; position:absolute; inset:auto -12% -40% 30%; height:70%;
                          background: var(--om-aurora-gold); filter: var(--om-aurora-blur); opacity:.30; pointer-events:none; }
    .om-signpost > .om-signpost-wheel { position:absolute; inset:0; z-index:0; overflow:hidden;
                                        border-radius:inherit; pointer-events:none;
                                        display:grid; place-items:center; }
    .om-signpost-wheel img { width:min(126%, 44rem); height:auto; aspect-ratio:1;
                             opacity:.11; animation: omSignpostTurn 300s linear infinite; }
    @keyframes omSignpostTurn { to { rotate: 360deg } }
    .om-signpost-wheel::before { content:""; position:absolute; left:50%; top:50%;
                                 width:min(120%, 42rem); aspect-ratio:1; transform:translate(-50%,-50%);
                                 background: radial-gradient(closest-side,
                                   rgba(240,205,142,.20) 0, rgba(240,205,142,.07) 46%, transparent 72%);
                                 pointer-events:none; }
    @property --omSignpostBeam { syntax:'<angle>'; initial-value:0deg; inherits:false }
    .om-signpost-wheel::after { content:""; position:absolute; inset:0; border-radius:inherit;
      padding:1.4px; pointer-events:none;
      background:conic-gradient(from var(--omSignpostBeam,0deg),
        transparent 0 26%,
        rgba(240,205,142,.65) 37%,#ffe9c4 42%,rgba(240,205,142,.65) 46%,
        transparent 50% 76%,
        rgba(240,205,142,.65) 87%,#ffe9c4 92%,rgba(240,205,142,.65) 96%,
        transparent 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      mask-composite:exclude;
      animation: omSignpostBeamSpin 6s linear infinite; }
    @keyframes omSignpostBeamSpin { to { --omSignpostBeam: 360deg } }
    @media (prefers-reduced-motion:reduce) {
      .om-signpost-wheel img, .om-signpost-wheel::after { animation:none }
    }
    @media (max-width: 560px) { .om-signpost-wheel img { width:min(150%, 26rem); opacity:.13; }
                                .om-signpost-wheel::before { width:min(150%, 24rem); } }
    .om-signpost > * { position:relative; z-index:1; }
    .om-signpost h2 { font-family: var(--om-font-display); font-weight:500; margin:0 0 10px;
                      font-size: clamp(1.6rem, 4vw, 2.2rem); line-height:1.16; padding-bottom:.16em;
                      background: linear-gradient(180deg,#f0cd8e,#b88a3c); -webkit-background-clip:text;
                      background-clip:text; color:transparent; }
    .om-signpost h2 { text-shadow: 0 2px 10px rgba(0,0,0,.55); }
    .om-signpost p { color: var(--om-ink-soft); line-height:1.5; font-size:.86rem; max-width:28rem; margin:0 auto 12px; text-shadow: 0 1px 5px rgba(0,0,0,.8); }
    .om-signpost .om-btn-row { display:flex; flex-direction:column; gap:10px; justify-content:center; align-items:center; }
    .om-signpost .om-btn { margin-top:0; white-space: normal; max-width: 100%; padding:.7rem 1.2rem; font-size:.8rem;
                           background: linear-gradient(180deg,#f0cd8e,#b88a3c); color:#1a1610; text-shadow:none; }
    .om-signpost .om-btn-2nd { font-size:.82rem; color:var(--om-ink-soft); text-decoration:underline; }
    @media (max-width: 560px) {
      .om-signpost .om-btn { padding: 0.85rem 1.4rem; font-size: 0.82rem; letter-spacing: 0.10em; text-indent: 0.10em; line-height: 1.25; }
      .om-signpost { padding: var(--om-space-4) var(--om-space-3); margin: var(--om-space-4) 0; }
      .g-wrap { padding: var(--om-space-5) var(--om-space-3) var(--om-space-6); }
      .t-h2 { margin-top: var(--om-space-5); }
      .t-hero-one { margin: var(--om-space-3) 0 var(--om-space-2); }
      .t-cap { margin-bottom: var(--om-space-4); }
    }
    html, body { overflow-x: clip; max-width: 100%; }
    img, svg, table { max-width: 100%; }

/* The Gene Keys profile is an <img>, so no rule here can reach inside it, and renderGK writes the
   rows OUTSIDE the spheres in a flat colour: white, which vanishes on the light theme, or the dark
   ink of ?theme=light, which vanishes on the dark one. Two renders, and the theme picks. Same
   pattern as the header logo's two gold ramps, and for the same reason: the thing cannot be
   restyled after it is drawn. The bodygraph and the wheel need no equivalent; both read on either
   surface already. */
.hero-gk .om-gk-onLight { display: none; }
html.theme-pearl .hero-gk .om-gk-onDark { display: none; }
html.theme-pearl .hero-gk .om-gk-onLight { display: block; }


/* ===== Header bar: the logo, and the theme toggle =====
   The Get your chart free button is gone from the bar entirely (Luciano, 2026-08-05). It was the
   thing forcing a three-across layout, and at phone width its label overflowed the pill it sat in.
   What is left is the logo, centred at every size and linking to the app, with the toggle pinned
   to the right edge and vertically centred so it cannot pull the logo off centre. */
.g-bar-in { position: relative; display: flex; justify-content: center; align-items: center;
  min-height: 62px; padding: 10px 56px; }
.g-bar-in > .g-barlogo { display: block; }
.g-barlogo .omlogo { width: 210px; max-width: 100%; }

/* ===== Theme toggle: a two-sided track with a sliding knob ===== */
/* Both destinations are visible at once and the knob shows which one you are in, rather than a
   single icon that means "the other thing". Drawn here rather than in the script because
   blog/omni-analytics.js rewrites the button's innerHTML on every toggle, so anything inside it is
   temporary; the script keeps the click and the aria-label, and its <svg> is hidden. */
.g-bar-in button.om-theme-pill {
  width: 62px; height: 30px; border-radius: 999px; padding: 0;
  /* Pinned to the right edge of the bar and vertically centred, so it cannot pull the logo off
     centre. This lives in the toggle's OWN rule rather than a ".g-bar-in > ." one, because that
     is less specific than this and lost to the position:relative it used to set here. Absolute
     still establishes the containing block the knob positions against. */
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); margin: 0;
  overflow: hidden;
  background-color: rgba(0,0,0,.30);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22rgba%28240%2C205%2C142%2C.55%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.2%22%2F%3E%3Cpath%20d%3D%22M12%202.6v2.2M12%2019.2v2.2M2.6%2012h2.2M19.2%2012h2.2M5.3%205.3l1.6%201.6M17.1%2017.1l1.6%201.6M18.7%205.3l-1.6%201.6M6.9%2017.1l-1.6%201.6%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22rgba%28240%2C205%2C142%2C.55%29%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.5%2014.3A8.6%208.6%200%200%201%209.7%203.5a8.6%208.6%200%201%200%2010.8%2010.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat, no-repeat;
  background-size: 13px 13px, 13px 13px;
  background-position: 9px center, right 9px center;
  border: 1px solid rgba(240,205,142,.34);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.07);
  cursor: pointer; transition: background-color .3s ease, border-color .3s ease;
}
.g-bar-in button.om-theme-pill > svg { display: none; }
/* Three layers, because a knob that simply slides covers whichever icon it lands on, and then
   only one side is ever visible. The track holds both icons faint; ::before is the gold knob;
   ::after is the ACTIVE icon in dark ink, riding on top of the knob. So the side you are on reads
   off the knob and the side you are not on stays legible on the track. */
.g-bar-in button.om-theme-pill::before,
.g-bar-in button.om-theme-pill::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  transform: translateX(32px);
  transition: transform .3s cubic-bezier(.4,1.3,.5,1);
}
.g-bar-in button.om-theme-pill::before {
  border-radius: 50%;
  background: linear-gradient(180deg, #f7dca8, #b88a3c);
  box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.55);
}
.g-bar-in button.om-theme-pill::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233a2a0d%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.5%2014.3A8.6%208.6%200%200%201%209.7%203.5a8.6%208.6%200%201%200%2010.8%2010.8z%22%2F%3E%3C%2Fsvg%3E") center / 13px 13px no-repeat; pointer-events: none; }
html.theme-pearl .g-bar-in button.om-theme-pill::before,
html.theme-pearl .g-bar-in button.om-theme-pill::after { transform: translateX(0); }
html.theme-pearl .g-bar-in button.om-theme-pill::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233a2a0d%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.2%22%2F%3E%3Cpath%20d%3D%22M12%202.6v2.2M12%2019.2v2.2M2.6%2012h2.2M19.2%2012h2.2M5.3%205.3l1.6%201.6M17.1%2017.1l1.6%201.6M18.7%205.3l-1.6%201.6M6.9%2017.1l-1.6%201.6%22%2F%3E%3C%2Fsvg%3E"); }
.g-bar-in button.om-theme-pill:hover { border-color: rgba(240,205,142,.6); }
.g-bar-in button.om-theme-pill:focus-visible { outline: 2px solid var(--om-gold-hi); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .g-bar-in button.om-theme-pill::before { transition: none; } }
html.theme-pearl .g-bar-in button.om-theme-pill {
  background-color: rgba(35,48,58,.09) !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22rgba%28125%2C90%2C28%2C.55%29%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.2%22%2F%3E%3Cpath%20d%3D%22M12%202.6v2.2M12%2019.2v2.2M2.6%2012h2.2M19.2%2012h2.2M5.3%205.3l1.6%201.6M17.1%2017.1l1.6%201.6M18.7%205.3l-1.6%201.6M6.9%2017.1l-1.6%201.6%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22rgba%28125%2C90%2C28%2C.55%29%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.5%2014.3A8.6%208.6%200%200%201%209.7%203.5a8.6%208.6%200%201%200%2010.8%2010.8z%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 13px 13px, 13px 13px !important;
  background-position: 9px center, right 9px center !important;
  border-color: rgba(125,90,28,.45) !important;
  box-shadow: inset 0 2px 5px rgba(35,48,58,.22), inset 0 -1px 0 rgba(255,255,255,.9) !important;
}

/* ===== Mobile ===== */
@media (max-width: 560px) {
  .g-bar-in { min-height: 54px; padding: 8px 50px; }
  .g-barlogo .omlogo { width: 168px; }
  .g-bar-in button.om-theme-pill { right: 10px; }
}
@media (max-width: 400px) {
  .g-bar-in { padding: 8px 46px; }
  .g-barlogo .omlogo { width: 140px; }
}