highlight.css

  :root {
    --bg: #101216; --panel: #1e2229; --panel-alt: #181b21; --border: #2a2f39;
    --text: #e8ecf1; --text-soft: #b7c0cc; --muted: #7b8494;
    --accent: #4fc3f7; --accent-soft: rgba(79,195,247,0.14);
    --green: #7dd3a0; --green-soft: rgba(125,211,160,0.14);
    --amber: #ffd166; --amber-soft: rgba(255,209,102,0.14);
    --red: #ff8080; --red-soft: rgba(255,128,128,0.14);
    --purple: #c9a6f0; --purple-soft: rgba(201,166,240,0.14);
    --radius: 14px;
  }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.6; }
  .wrap { max-width: 1600px; margin: 0 auto; padding: 48px clamp(20px, 3.5vw, 72px) 80px; }
  .eyebrow { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
  h1 { font-size: 34px; margin: 0 0 10px; letter-spacing: -0.02em; display:flex; align-items:center; gap:14px; flex-wrap: wrap; line-height: 1.15; }
  .status-pill {
    font-size: 11px; font-weight: 700; letter-spacing:.04em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber);
    border: 1px solid rgba(255,209,102,0.3);
  }
  .hidden-note {
    display:flex; gap: 10px; align-items:flex-start; background: var(--panel-alt); border: 1px dashed var(--border);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 32px; font-size: 13px; color: var(--muted);
  }
  .lede { color: var(--text-soft); font-size: 15.5px; margin: 0 0 36px; }
  .section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 40px 0 16px; display:flex; align-items:center; gap:10px; }
  .section-title::after { content:""; flex:1; height:1px; background: var(--border); }
  .cat-title { font-size: 15px; font-weight: 700; margin: 24px 0 10px; color: var(--text); }
  .entry { background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 12px; }
  .entry-head { display:flex; align-items:center; gap:10px; flex-wrap: wrap; margin-bottom: 6px; }
  .badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing:.03em; padding: 3px 9px; border-radius: 999px; }
  .badge.feature { background: var(--accent-soft); color: var(--accent); }
  .badge.improvement { background: var(--green-soft); color: var(--green); }
  .badge.fix { background: var(--red-soft); color: var(--red); }
  .badge.change { background: var(--purple-soft); color: var(--purple); }
  .entry-title { font-size: 15px; font-weight: 600; }
  .entry p { margin: 4px 0 0; color: var(--text-soft); font-size: 14px; }
  .entry a { color: var(--accent); text-underline-offset: 2px; }
  .entry code, .issue code { font-family: "SFMono-Regular", Consolas, monospace; font-size: .9em; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
  .issue { background: var(--panel); border:1px solid var(--border); border-left: 3px solid var(--amber); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px; }
  .issue.investigating { border-left-color: var(--red); }
  .issue-head { display:flex; align-items:center; gap:10px; margin-bottom: 4px; }
  .issue-title { font-size: 14.5px; font-weight: 600; }
  .issue-status { font-size: 10.5px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); }
  .issue-status.investigating { background: var(--red-soft); color: var(--red); }
  .issue p { margin: 4px 0 0; color: var(--text-soft); font-size: 13.5px; }
  .placeholder-note { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 4px; }
  
  @keyframes hlxFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .wrap > * { animation: hlxFadeUp .5s ease both; }
  .wrap > *:nth-child(1) { animation-delay: 0s; }
  .wrap > *:nth-child(2) { animation-delay: .04s; }
  .wrap > *:nth-child(3) { animation-delay: .08s; }
  .wrap > *:nth-child(4) { animation-delay: .12s; }
  .wrap > *:nth-child(5) { animation-delay: .16s; }
  .wrap > *:nth-child(n+6) { animation-delay: .2s; }
  @media (prefers-reduced-motion: reduce) {
    .wrap > * { animation: none; }
  }
  .card, .preset-card, .idea, .entry, .issue, .style-card, .link-chip, .preset {
    transition: border-color .15s ease, transform .15s ease, box-shadow .18s ease;
  }
  .card:hover, .idea:hover, .entry:hover, .issue:hover, .style-card:hover, .preset:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  }
  .link-chip:hover { transform: translateY(-1px); }
  details { transition: border-color .15s ease, background-color .15s ease; }
  details:hover { border-color: var(--accent); }
  summary { transition: color .12s ease; }

  
  .chapter-label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin: 6px 0 2px;
  }
  .release-name { font-size: 19px; font-weight: 600; color: var(--accent); margin: 0 0 10px; letter-spacing: -0.01em; font-style: italic; }
  .theme-line { color: var(--muted); font-size: 14px; margin: 0 0 26px; }

  .perm-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .perm-row {
    display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px; padding: 9px 12px;
    font-size: 13px; color: var(--text-soft); border-top: 1px solid var(--border);
  }
  .perm-row:first-child { border-top: none; }
  .perm-row-head {
    background: var(--panel-alt); font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted);
  }
  .perm-yes { color: var(--text-soft); }
  .perm-no { color: var(--green); font-weight: 600; }

.cat-title { position: relative; padding-left: 14px; }
.cat-title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px;
}

body.theme-chrome .status-pill { background: rgba(91,155,255,0.15); color: #5b9bff; border-color: rgba(91,155,255,0.38); }
body.theme-chrome .release-name { color: #5b9bff; }
body.theme-chrome .entry a, body.theme-chrome .callout a, body.theme-chrome .lede a, body.theme-chrome .theme-line a { color: #5b9bff; }
body.theme-chrome .badge.feature     { background: rgba(91,155,255,0.15); color: #5b9bff; }
body.theme-chrome .badge.improvement { background: rgba(77,208,127,0.15); color: #4dd07f; }
body.theme-chrome .badge.change      { background: rgba(251,188,4,0.15); color: #fbbc04; }
body.theme-chrome .badge.fix         { background: rgba(255,111,97,0.15); color: #ff6f61; }
body.theme-chrome .entry:hover { border-color: rgba(91,155,255,0.38); }
body.theme-chrome .callout { border-left-color: #5b9bff; }
body.theme-chrome .cat-title::before        { background: #5b9bff; }
body.theme-chrome .cat-title.ct2::before    { background: #ff6f61; }
body.theme-chrome .cat-title.ct3::before    { background: #fbbc04; }
body.theme-chrome .cat-title.ct4::before    { background: #4dd07f; }

body.theme-firefox .status-pill { background: rgba(255,144,87,0.15); color: #ff9057; border-color: rgba(255,144,87,0.38); }
body.theme-firefox .release-name { color: #ff9057; }
body.theme-firefox .entry a, body.theme-firefox .callout a, body.theme-firefox .lede a, body.theme-firefox .theme-line a { color: #ff9057; }
body.theme-firefox .badge.feature     { background: rgba(255,144,87,0.15); color: #ff9057; }
body.theme-firefox .badge.improvement { background: rgba(169,123,255,0.15); color: #a97bff; }
body.theme-firefox .badge.change      { background: rgba(255,207,92,0.15); color: #ffcf5c; }
body.theme-firefox .badge.fix         { background: rgba(255,107,107,0.15); color: #ff6b6b; }
body.theme-firefox .entry:hover { border-color: rgba(255,144,87,0.38); }
body.theme-firefox .callout { border-left-color: #ff9057; }
body.theme-firefox .cat-title::before        { background: #ff9057; }
body.theme-firefox .cat-title.ct2::before    { background: #a97bff; }
body.theme-firefox .cat-title.ct3::before    { background: #ffcf5c; }
body.theme-firefox .cat-title.ct4::before    { background: #ff6b6b; }

body.theme-edge .status-pill { background: rgba(63,201,138,0.15); color: #3fc98a; border-color: rgba(63,201,138,0.38); }
body.theme-edge .release-name { color: #3fc98a; }
body.theme-edge .entry a, body.theme-edge .callout a, body.theme-edge .lede a, body.theme-edge .theme-line a { color: #3fc98a; }
body.theme-edge .badge.feature     { background: rgba(63,201,138,0.15); color: #3fc98a; }
body.theme-edge .badge.improvement { background: rgba(72,169,248,0.15); color: #48a9f8; }
body.theme-edge .badge.change      { background: rgba(242,193,78,0.15); color: #f2c14e; }
body.theme-edge .badge.fix         { background: rgba(255,127,107,0.15); color: #ff7f6b; }
body.theme-edge .entry:hover { border-color: rgba(63,201,138,0.38); }
body.theme-edge .callout { border-left-color: #3fc98a; }
body.theme-edge .cat-title::before        { background: #3fc98a; }
body.theme-edge .cat-title.ct2::before    { background: #48a9f8; }
body.theme-edge .cat-title.ct3::before    { background: #f2c14e; }
body.theme-edge .cat-title.ct4::before    { background: #ff7f6b; }

:root { --sweep-color: rgba(79,195,247,0.34); }
body.theme-chrome  { --accent: #5b9bff; --sweep-color: rgba(91,155,255,0.36); }
body.theme-firefox { --accent: #ff9057; --sweep-color: rgba(255,144,87,0.34); }
body.theme-edge    { --accent: #3fc98a; --sweep-color: rgba(63,201,138,0.32); }

.wrap > .eyebrow {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px; letter-spacing: .26em; color: var(--accent);
  margin: 8px 0 22px; opacity: .95;
}
.wrap > h1 {
  font-size: clamp(44px, 7vw, 92px); font-weight: 800; letter-spacing: -0.045em;
  line-height: .95; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  margin: 0 0 20px; align-items: center; gap: 18px;
}
.wrap > h1 .status-pill { font-size: 11.5px; letter-spacing: .06em; padding: 6px 13px; align-self: center; }
.wrap > .chapter-label {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px; font-weight: 600; letter-spacing: .22em; color: var(--text-soft);
  margin: 0 0 10px; text-transform: uppercase;
}
.wrap > .release-name {
  display: inline-block; font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; font-style: normal;
  letter-spacing: -0.025em; line-height: 1.12; color: var(--text); margin: 0 0 26px;
  background: linear-gradient(var(--sweep-color), var(--sweep-color)) no-repeat;
  background-size: 100% 30%; background-position: 0 94%;
}
.wrap > .theme-line {
  font-size: clamp(17px, 1.55vw, 21px); line-height: 1.5; color: var(--text-soft);
  margin: 0 0 34px; padding-bottom: 34px; border-bottom: 1px solid var(--border);
}
.wrap > .lede { font-size: 16px; margin: 0 0 40px; }

@keyframes hlxTitleRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hlxSweepIn { from { background-size: 0% 30%; } to { background-size: 100% 30%; } }
@keyframes hlxRuleIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hlxReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.wrap > .eyebrow, .wrap > h1, .wrap > .chapter-label, .wrap > .release-name,
.wrap > .theme-line, .wrap > .lede {
  animation: hlxTitleRise .62s cubic-bezier(.22,.8,.28,1) both;
}
.wrap > .eyebrow { animation-delay: 0s; }
.wrap > h1 { animation-delay: .07s; }
.wrap > .chapter-label { animation-delay: .14s; }
.wrap > .release-name {
  animation: hlxTitleRise .62s cubic-bezier(.22,.8,.28,1) .21s both,
             hlxSweepIn .7s cubic-bezier(.3,.7,.2,1) .42s both;
}
.wrap > .theme-line { animation-delay: .29s; }
.wrap > .lede { animation-delay: .37s; }

.entry, .cat-title { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  .wrap > .entry, .wrap > .cat-title {
    animation: hlxReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wrap > *, .wrap > .eyebrow, .wrap > h1, .wrap > .chapter-label,
  .wrap > .release-name, .wrap > .theme-line, .wrap > .lede,
  .wrap > .entry, .wrap > .cat-title {
    animation: none !important;
  }
  .wrap > .release-name { background-size: 100% 30%; }
  .card:hover, .idea:hover, .entry:hover, .issue:hover, .style-card:hover, .preset:hover,
  .link-chip:hover { transform: none; }
}

body.theme-chrome .wrap > .release-name,
body.theme-firefox .wrap > .release-name,
body.theme-edge .wrap > .release-name { color: var(--text); }