:root {
      --paper: #fbfaf6;
      --ink: #171717;
      --muted: #666c72;
      --line: #cfd6da;
      --line-strong: #171717;
      --wash: #edf1f2;
      --aqua: #2f9d8f;
      --blue: #2e68a1;
      --red: #c64b40;
      --amber: #bd7a22;
      --lime: #6f8f2f;
      --violet: #725ca8;
      --shadow: 0 10px 28px rgba(17, 28, 36, .08);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 30% 0%, rgba(47, 157, 143, .12), transparent 28rem),
        linear-gradient(135deg, rgba(23, 23, 23, .035) 25%, transparent 25%) 0 0 / 18px 18px,
        var(--paper);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0;
    }

    button, input { font: inherit; }

    .page {
      width: min(1500px, 100%);
      margin: 0 auto;
      padding: 18px;
      display: grid;
      gap: 14px;
    }

    .masthead {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 14px;
      align-items: stretch;
    }

    .title-block,
    .search-panel,
    .calendar-strip,
    .matrix-wrap,
    .detail-panel,
    .watch-panel {
      border: 1px solid var(--line-strong);
      background: rgba(251, 250, 246, .94);
      box-shadow: var(--shadow);
    }

    .title-block {
      min-height: 144px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 210px;
      gap: 18px;
      padding: 20px;
      overflow: hidden;
      position: relative;
    }

    h1 {
      margin: 0;
      max-width: 720px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 54px;
      line-height: .94;
      font-weight: 700;
    }

    .title-block p {
      margin: 12px 0 0;
      max-width: 650px;
      color: var(--muted);
      line-height: 1.5;
      font-size: 14px;
    }

    .scorecard {
      align-self: stretch;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-left: 1px solid var(--line-strong);
      margin: -20px -20px -20px 0;
    }

    .score {
      padding: 16px;
      display: grid;
      align-content: end;
      min-height: 72px;
      border-bottom: 1px solid var(--line-strong);
    }

    .score:nth-child(odd) { border-right: 1px solid var(--line-strong); }
    .score:nth-child(3), .score:nth-child(4) { border-bottom: 0; }

    .score strong {
      font-size: 29px;
      line-height: 1;
    }

    .score span {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
    }

    .search-panel {
      padding: 16px;
      display: grid;
      gap: 12px;
    }

    .eyebrow {
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      text-transform: uppercase;
    }

    .search-panel input {
      width: 100%;
      height: 42px;
      border: 1px solid var(--line-strong);
      background: #fff;
      color: var(--ink);
      padding: 0 11px;
      outline: none;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .legend span,
    .pill,
    .ticker-chip {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      border: 1px solid var(--line);
      background: var(--wash);
      padding: 4px 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
    }

    .calendar-strip {
      display: grid;
      grid-template-columns: 140px minmax(0, 1fr);
      overflow: hidden;
    }

    .calendar-label {
      min-height: 88px;
      display: grid;
      align-content: center;
      padding: 14px;
      color: #fff;
      background: var(--ink);
    }

    .calendar-label strong {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 23px;
      line-height: 1;
    }

    .calendar-label span {
      margin-top: 8px;
      color: rgba(255, 255, 255, .72);
      font-size: 11px;
    }

    .events {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(190px, 1fr);
      overflow-x: auto;
    }

    .event {
      min-height: 88px;
      padding: 13px;
      border-left: 1px solid var(--line-strong);
      display: grid;
      gap: 8px;
      align-content: center;
      background: rgba(255, 255, 255, .55);
    }

    .event time {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .event b {
      font-size: 14px;
      line-height: 1.2;
    }

    .event small {
      color: var(--muted);
      font-size: 11px;
    }

    .event.macro { border-top: 5px solid var(--blue); }
    .event.earnings { border-top: 5px solid var(--aqua); }
    .event.special { border-top: 5px solid var(--amber); }

    .workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 14px;
      align-items: start;
    }

    .matrix-wrap {
      overflow: hidden;
    }

    .matrix-top {
      min-height: 58px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border-bottom: 1px solid var(--line-strong);
      background: #fff;
    }

    .matrix-top h2 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 30px;
      line-height: 1;
    }

    .matrix {
      display: grid;
      grid-template-columns: 150px repeat(6, minmax(130px, 1fr));
      overflow-x: auto;
    }

    .cell,
    .theme-head,
    .source-head,
    .corner {
      min-height: 108px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 10px;
      background: rgba(251, 250, 246, .88);
    }

    .corner,
    .source-head,
    .theme-head {
      background: var(--wash);
      font-weight: 850;
    }

    .corner {
      display: grid;
      align-content: end;
      color: var(--muted);
      font-size: 12px;
    }

    .source-head {
      display: grid;
      align-content: end;
      color: var(--ink);
      min-height: 72px;
    }

    .source-head small {
      margin-top: 5px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
    }

    .theme-head {
      display: grid;
      align-content: center;
      color: var(--ink);
    }

    .theme-head small {
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
    }

    .cell {
      display: flex;
      align-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 7px;
    }

    .cell.active {
      background: #fff;
      box-shadow: inset 0 0 0 2px var(--ink);
    }

    .ticker-chip {
      cursor: pointer;
      border-color: var(--line-strong);
      color: var(--ink);
      background: #fff;
    }

    .ticker-chip:hover,
    .ticker-chip.selected {
      background: var(--ink);
      color: #fff;
    }

    .ticker-chip[data-tone="red"] { border-color: var(--red); }
    .ticker-chip[data-tone="blue"] { border-color: var(--blue); }
    .ticker-chip[data-tone="green"] { border-color: var(--aqua); }
    .ticker-chip[data-tone="amber"] { border-color: var(--amber); }
    .ticker-chip[data-tone="violet"] { border-color: var(--violet); }

    .side-stack {
      display: grid;
      gap: 14px;
    }

    .detail-panel,
    .watch-panel {
      padding: 15px;
    }

    .detail-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 13px;
      border-bottom: 1px solid var(--line-strong);
    }

    .detail-head h3 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 40px;
      line-height: .9;
    }

    .quote {
      text-align: right;
      white-space: nowrap;
    }

    .quote strong {
      display: block;
      font-size: 22px;
    }

    .quote span {
      color: var(--aqua);
      font-size: 12px;
      font-weight: 850;
    }

    .quote span.down { color: var(--red); }

    .thesis {
      margin: 14px 0;
      padding: 13px;
      border: 1px solid var(--line);
      background: #fff;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 18px;
      line-height: 1.32;
    }

    .meta-grid {
      display: grid;
      gap: 12px;
    }

    .meta-block {
      padding-top: 11px;
      border-top: 1px solid var(--line);
    }

    .meta-block b {
      display: block;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 11px;
      text-transform: uppercase;
    }

    .meta-block p,
    .meta-block li {
      margin: 0;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.45;
    }

    .meta-block a {
      color: var(--blue);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .meta-block ul {
      margin: 0;
      padding-left: 18px;
    }

    .watch-panel h3 {
      margin: 0 0 12px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 24px;
    }

    .watch-row {
      display: grid;
      grid-template-columns: 62px 1fr auto;
      gap: 10px;
      align-items: center;
      min-height: 42px;
      border-top: 1px solid var(--line);
      font-size: 13px;
    }

    .watch-row:first-of-type { border-top: 0; }

    .watch-row b { font-size: 15px; }
    .watch-row span { color: var(--muted); }
    .watch-row strong { color: var(--aqua); }
    .watch-row strong.down { color: var(--red); }

    .disclaimer {
      margin-top: 12px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
    }

    @media (max-width: 1120px) {
      .masthead,
      .workspace {
        grid-template-columns: 1fr;
      }

      .title-block {
        grid-template-columns: 1fr;
      }

      .scorecard {
        border-left: 0;
        margin: 0;
      }
    }

    @media (max-width: 720px) {
      .page { padding: 10px; }

      h1 { font-size: 38px; }

      .calendar-strip {
        grid-template-columns: 1fr;
      }

      .events {
        grid-auto-columns: minmax(210px, 86vw);
      }

      .matrix-top {
        align-items: flex-start;
        flex-direction: column;
      }

      .matrix {
        grid-template-columns: 124px repeat(6, 136px);
      }

      .cell,
      .theme-head,
      .source-head,
      .corner {
        min-height: 96px;
      }
    }