/* ChatGPT Then and Now (/chatgpt-then-and-now).
   One prompt forks into two answers. The 2022 side borrows ChatGPT's launch
   teal and the grey of its original answer rows; the 2026 side is violet on
   white. Prompts are set in Newsreader, everything else in Geist. */
html:has(.chatgpt-then-now){background:#eceef1;scrollbar-gutter:stable}

.chatgpt-then-now{
  --ink:#1b1e24;--muted:#5d6370;--faint:#878d99;--line:#dde0e5;--page:#eceef1;--card:#fff;
  --then:#10a37f;--then-surface:#f7f7f8;--then-soft:#d5ece5;
  --now:#5a4bd6;--now-soft:#e2dffa;
  --star:#e5a400;--focus:#5a4bd6;--gap:40px;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--page);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;min-height:100vh;width:100%
}
.chatgpt-then-now *{box-sizing:border-box}
.chatgpt-then-now :focus-visible{border-radius:6px;outline:2px solid var(--focus);outline-offset:3px}
.chatgpt-then-now a,.chatgpt-then-now button{-webkit-tap-highlight-color:transparent}
.chatgpt-then-now button{font-family:inherit}
.chatgpt-then-now [hidden]{display:none!important}
.ct-sr{clip:rect(0 0 0 0);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}

.ct-wrap{margin:0 auto;max-width:1180px;padding:26px 32px 56px}
.ct-topbar{align-items:center;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;min-height:34px}
.ct-topline{align-items:center;color:var(--faint);display:flex;flex-wrap:wrap;font-size:13.5px;gap:8px}
.ct-topline a{color:var(--muted);text-decoration:none}
.ct-topline a:hover{color:var(--ink)}

/* Stars: they need JavaScript, so they appear once the controller runs. */
.ct-star,.ct-filter,.ct-copy{display:none!important}
.ct-js .ct-star,.ct-js .ct-filter,.ct-js .ct-copy{display:inline-flex!important}
.ct-star{align-items:center;background:transparent;border:0;border-radius:999px;color:var(--faint);cursor:pointer;gap:6px;justify-content:center;padding:0}
/* One star drawn by CSS, so the 492 rows don't each carry an SVG. */
.ct-star-icon{background:currentColor;display:inline-block;flex:none;height:18px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.55 5.17 5.7.83-4.13 4.02.98 5.68L12 16.62l-5.1 2.68.98-5.68L3.75 9.6l5.7-.83z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.55 5.17 5.7.83-4.13 4.02.98 5.68L12 16.62l-5.1 2.68.98-5.68L3.75 9.6l5.7-.83z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .15s;width:18px}
.ct-star[aria-pressed="true"] .ct-star-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.55 5.17 5.7.83-4.13 4.02.98 5.68L12 16.62l-5.1 2.68.98-5.68L3.75 9.6l5.7-.83z' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.55 5.17 5.7.83-4.13 4.02.98 5.68L12 16.62l-5.1 2.68.98-5.68L3.75 9.6l5.7-.83z' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ct-star:hover{color:var(--ink)}
.ct-star:active .ct-star-icon{transform:scale(.88)}
.ct-star[aria-pressed="true"]{color:var(--star)}
.ct-star--labeled{background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:13.5px;font-weight:500;height:32px;padding:0 12px 0 10px}
.ct-star--labeled .ct-star-icon{height:16px;width:16px}
.ct-star--labeled[aria-pressed="true"]{border-color:#f0d58a;color:#8a6300}
.ct-star--labeled[aria-pressed="true"] .ct-star-icon{color:var(--star)}

.ct-copy{align-items:center;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--muted);cursor:pointer;font-size:13.5px;font-weight:500;gap:6px;height:32px;padding:0 12px 0 10px}
.ct-copy:hover{border-color:#c9cdd4;color:var(--ink)}
.ct-copy-icon{background:currentColor;display:inline-block;flex:none;height:15px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E") center/contain no-repeat;width:15px}
.ct-copy--done{border-color:#b9e2d5;color:#0b7d61}
.ct-copy--done .ct-copy-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}

/* ---------- Index ---------- */
.ct-intro{margin:44px 0 30px;max-width:760px}
.ct-intro h1{font-family:var(--serif);text-wrap:balance;font-size:64px;font-weight:500;letter-spacing:-.025em;line-height:1;margin:0}
.ct-lede{color:var(--muted);font-size:18px;line-height:1.55;margin:18px 0 0;max-width:640px}
.ct-legend{display:flex;flex-wrap:wrap;gap:10px 28px;margin:22px 0 0}
.ct-legend-item{align-items:baseline;display:flex;font-size:14px;gap:8px}
.ct-legend-item dt{align-items:center;display:flex;font-weight:500;gap:8px}
.ct-legend-item dd{color:var(--faint);margin:0}
.ct-legend-note dt{color:var(--faint);font-weight:400}
.ct-legend-note dd{color:var(--ink);font-weight:500}
.ct-download{align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--ink);display:inline-flex;font-size:14.5px;font-weight:600;gap:8px;margin-top:22px;padding:10px 14px;text-decoration:none;transition:border-color .15s}
.ct-download:hover{border-color:#c9cdd4}
.ct-download-icon{background:currentColor;display:inline-block;flex:none;height:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat;width:16px}
.ct-download-meta{color:var(--faint);font-weight:500}
.ct-swatch{border-radius:3px;display:inline-block;height:10px;width:10px}
.ct-then .ct-swatch{background:var(--then)}
.ct-now .ct-swatch{background:var(--now)}

.ct-toolbar{align-items:center;background:rgba(236,238,241,.9);backdrop-filter:blur(10px);display:flex;flex-wrap:wrap;gap:10px 12px;margin:0 -10px;padding:12px 10px;position:sticky;top:0;z-index:5}
.ct-search{align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--faint);display:flex;flex:1 1 280px;gap:8px;max-width:400px;padding:0 12px}
.ct-search:focus-within{border-color:var(--now);box-shadow:0 0 0 3px var(--now-soft)}
.ct-search input{background:transparent;border:0;color:var(--ink);flex:1;font:inherit;font-size:14.5px;min-width:0;outline:none;padding:9px 0}
.ct-search input::placeholder{color:#9aa0ab}
.chatgpt-then-now .ct-search input:focus-visible{outline:none}
.ct-sorts{background:#e1e4e9;border-radius:10px;display:flex;gap:2px;padding:3px}
.ct-sorts a{border-radius:7px;color:var(--muted);font-size:13.5px;font-weight:500;padding:6px 11px;text-decoration:none}
.ct-sorts a:hover{color:var(--ink)}
.ct-sorts a[aria-current="true"]{background:var(--card);box-shadow:0 1px 2px rgba(27,30,36,.12);color:var(--ink)}
.ct-toolbar-end{display:flex;gap:8px;margin-left:auto}
.ct-filter,.ct-random{align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--muted);cursor:pointer;display:inline-flex;font-size:13.5px;font-weight:500;gap:7px;line-height:1;padding:9px 12px;text-decoration:none}
.ct-filter:hover,.ct-random:hover{border-color:#c9cdd4;color:var(--ink)}
.ct-filter svg{fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:2}
.ct-filter-count{background:#eef0f3;border-radius:999px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;padding:2px 7px}
.ct-filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ct-filter[aria-pressed="true"] svg{fill:var(--star);stroke:var(--star)}
.ct-filter[aria-pressed="true"] .ct-filter-count{background:rgba(255,255,255,.16);color:#fff}

.ct-result-count{color:var(--muted);font-size:14px;margin:8px 0 6px}
.ct-result-count a{color:var(--ink)}
.ct-empty{color:var(--muted);font-size:15px;padding:48px 0;text-align:center}

.ct-list{list-style:none;margin:8px 0 0;padding:0}
.ct-row{align-items:center;border-top:1px solid var(--line);contain-intrinsic-block-size:auto 78px;content-visibility:auto;display:grid;gap:8px 28px;grid-template-columns:minmax(0,1fr) 220px 36px;padding:14px 0}
.ct-row:last-child{border-bottom:1px solid var(--line)}
.ct-row-link{color:inherit;display:grid;gap:4px;text-decoration:none}
.ct-row-title{font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:-.005em;line-height:1.25;overflow-wrap:anywhere}
.ct-row-link:hover .ct-row-title{text-decoration:underline;text-decoration-color:#b4b9c2;text-decoration-thickness:1px;text-underline-offset:4px}
.ct-row-meta{color:var(--faint);display:flex;flex-wrap:wrap;font-size:13px;gap:2px 14px}
.ct-bars{display:grid;gap:5px}
.ct-bar{align-items:center;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) 40px}
.ct-bar::before{background:#e1e4e9;border-radius:3px;content:"";grid-area:1/1;height:6px}
.ct-bar-fill{border-radius:3px;grid-area:1/1;height:6px;justify-self:start;min-width:3px}
.ct-then .ct-bar-fill{background:var(--then)}
.ct-now .ct-bar-fill{background:var(--now)}
.ct-bar-value{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
.ct-row .ct-star{height:36px;width:36px}

/* ---------- Example ---------- */
.ct-stepper{align-items:center;display:flex;gap:6px}
.ct-stepper a,.ct-stepper span[aria-hidden]{align-items:center;border:1px solid var(--line);border-radius:8px;color:var(--muted);display:inline-flex;height:32px;justify-content:center;text-decoration:none;width:32px}
.ct-stepper a{background:var(--card)}
.ct-stepper a:hover{border-color:#c9cdd4;color:var(--ink)}
.ct-stepper span[aria-hidden]{color:#c4c8cf}
.ct-stepper-position{color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums;padding:0 6px}
.ct-stepper .ct-stepper-random{font-size:13.5px;font-weight:500;margin-left:6px;padding:0 12px;width:auto}

.ct-prompt{margin:52px auto 0;max-width:840px;text-align:center}
.ct-prompt-text{font-family:var(--serif);text-wrap:balance;font-size:46px;font-weight:500;letter-spacing:-.02em;line-height:1.12;margin:0;overflow-wrap:anywhere;white-space:pre-line}
.ct-prompt-text::before{content:"\201C"}
.ct-prompt-text::after{content:"\201D"}
.ct-prompt-text--long{background:var(--card);text-wrap:pretty;border:1px solid var(--line);border-radius:16px;font-size:19px;font-weight:400;letter-spacing:0;line-height:1.6;padding:22px 26px;text-align:left}
.ct-prompt-text--long::before,.ct-prompt-text--long::after{content:none}
.ct-prompt-meta{align-items:center;color:var(--faint);display:flex;flex-wrap:wrap;font-size:13.5px;gap:10px 16px;justify-content:center;margin-top:18px}

/* The fork: a stem from the prompt that splits to the center of each column. */
.ct-fork{height:76px;margin-top:14px;position:relative}
.ct-fork::before{border-left:1.5px solid #c4c8cf;content:"";height:34px;left:50%;position:absolute;top:0}
.ct-fork-branch{border-top:1.5px solid;height:42px;position:absolute;top:34px}
.ct-fork-branch.ct-then{border-color:var(--then);border-left:1.5px solid var(--then);border-top-left-radius:18px;left:calc((100% - var(--gap)) / 4);right:50%}
.ct-fork-branch.ct-now{border-color:var(--now);border-right:1.5px solid var(--now);border-top-right-radius:18px;left:50%;right:calc((100% - var(--gap)) / 4)}
.ct-fork-gap{background:var(--page);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12.5px;font-weight:500;left:50%;padding:4px 12px;position:absolute;top:34px;transform:translate(-50%,-50%);white-space:nowrap}

.ct-compare{align-items:start;display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-answer-head{align-items:center;display:flex;flex-direction:column;margin-bottom:16px;text-align:center}
.ct-node{border:3px solid var(--page);border-radius:50%;box-shadow:0 0 0 1.5px currentColor;height:13px;margin:-7px 0 10px;width:13px}
.ct-then .ct-node{background:var(--then);color:var(--then)}
.ct-now .ct-node{background:var(--now);color:var(--now)}
.ct-answer-head h2{font-size:16px;font-weight:600;letter-spacing:-.005em;margin:0}
.ct-answer-head p{color:var(--faint);font-size:13.5px;margin:2px 0 0}

.ct-answer-card{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ct-then .ct-answer-card{background:var(--then-surface);border-color:#dfe2e6}
.ct-now .ct-answer-card{background:var(--card);box-shadow:0 1px 2px rgba(27,30,36,.05),0 8px 24px -16px rgba(27,30,36,.18)}
.ct-answer-body{font-size:15.5px;line-height:1.7;overflow-wrap:anywhere;padding:24px 28px 26px}
.ct-plain{white-space:pre-wrap}
.ct-answer-foot{align-items:center;border-top:1px solid var(--line);color:var(--faint);display:flex;flex-wrap:wrap;font-size:13px;font-variant-numeric:tabular-nums;gap:6px 16px;justify-content:space-between;padding:11px 28px}
.ct-then .ct-answer-foot{border-color:#e3e6ea}
.ct-answer-foot a{align-items:center;color:#0b7d61;display:inline-flex;font-weight:500;gap:4px;text-decoration:none}
.ct-answer-foot a:hover{text-decoration:underline;text-underline-offset:3px}

.ct-reasoning{font-size:14px}
.ct-reasoning summary{cursor:pointer;list-style:none}
.ct-reasoning summary::-webkit-details-marker{display:none}
.ct-reasoning-toggle{color:var(--now);font-weight:500}
.ct-reasoning-toggle::after{content:"";border-bottom:1.5px solid currentColor;border-right:1.5px solid currentColor;display:inline-block;height:6px;margin:0 0 3px 8px;transform:rotate(45deg);transition:transform .15s;width:6px}
.ct-reasoning[open] .ct-reasoning-toggle::after{margin-bottom:-1px;transform:rotate(-135deg)}
.ct-reasoning summary:hover .ct-reasoning-toggle{text-decoration:underline;text-underline-offset:3px}
.ct-reasoning-hide,.ct-reasoning[open] .ct-reasoning-show{display:none}
.ct-reasoning[open] .ct-reasoning-hide{display:inline}
.ct-reasoning>.ct-markdown{background:#f8f7fe;border-top:1px solid var(--now-soft);color:#3d4250;font-size:14px;line-height:1.65;padding:16px 28px 18px}

.ct-markdown>:first-child{margin-top:0}
.ct-markdown>:last-child{margin-bottom:0}
.ct-markdown p,.ct-markdown ul,.ct-markdown ol,.ct-markdown pre,.ct-markdown blockquote,.ct-markdown table{margin:0 0 .95em}
.ct-markdown h1,.ct-markdown h2,.ct-markdown h3,.ct-markdown h4{font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:1.4em 0 .5em}
.ct-markdown h1{font-size:1.4em}
.ct-markdown h2{font-size:1.25em}
.ct-markdown h3{font-size:1.1em}
.ct-markdown h4{font-size:1em}
.ct-markdown ul,.ct-markdown ol{padding-left:1.35em}
.ct-markdown ul{list-style:disc}
.ct-markdown ol{list-style:decimal}
.ct-markdown li{margin:.3em 0}
.ct-markdown li::marker{color:var(--faint)}
.ct-markdown li>p{margin:0 0 .4em}
.ct-markdown a{color:var(--now)}
.ct-markdown hr{border:0;border-top:1px solid var(--line);margin:1.5em 0}
.ct-markdown blockquote{border-left:3px solid var(--now-soft);color:var(--muted);padding-left:1em}
.ct-markdown code{background:#f0f1f4;border-radius:5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;padding:.14em .38em}
.ct-markdown pre{background:#1d2027;border-radius:10px;color:#eceef2;overflow-x:auto;padding:16px 18px}
.ct-markdown pre code{background:none;color:inherit;font-size:.84em;padding:0;white-space:pre}
.ct-markdown table{border-collapse:collapse;display:block;font-size:.92em;max-width:100%;overflow-x:auto}
.ct-markdown th,.ct-markdown td{border:1px solid var(--line);padding:7px 11px;text-align:left;vertical-align:top}
.ct-markdown th{background:#f5f6f8;font-weight:600}
.ct-math-display{margin:0 0 .95em;overflow-x:auto;overflow-y:hidden;padding:2px 0}
.ct-markdown .katex{font-size:1.06em}
.ct-markdown .math-fallback{white-space:pre-wrap}

/* Opus 5.5's comparison, read as a short essay under the two answers. */
.ct-analysis{margin:52px auto 0;max-width:700px}
.ct-analysis h2{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:-.015em;margin:0 0 14px;text-wrap:balance}
.ct-analysis-body{font-family:var(--serif);font-size:19px;line-height:1.65;text-wrap:pretty}
.ct-analysis-body strong{font-weight:600}
.ct-analysis-byline{border-top:1px solid var(--line);color:var(--faint);font-size:13.5px;margin:18px 0 0;padding-top:12px}

.ct-pager{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:44px}
.ct-pager-link{border-top:1.5px solid var(--line);color:inherit;display:grid;gap:4px;padding-top:14px;text-decoration:none}
.ct-pager-link:hover{border-color:var(--ink)}
.ct-pager-link--next{grid-column:2;text-align:right}
.ct-pager-dir{color:var(--faint);font-size:13px}
.ct-pager-title{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}

.ct-footer{border-top:1px solid var(--line);color:var(--faint);display:flex;flex-wrap:wrap;font-size:13.5px;gap:12px 40px;justify-content:space-between;line-height:1.6;margin-top:56px;padding-top:22px}
.ct-footer p{margin:0;max-width:700px}
.ct-footer a{color:var(--muted);font-weight:500;text-decoration:none;white-space:nowrap}
.ct-footer a:hover{color:var(--ink)}

@media (max-width:860px){
  .ct-wrap{padding:18px 16px 40px}
  .ct-intro{margin:30px 0 22px}
  .ct-intro h1{font-size:44px}
  .ct-lede{font-size:16.5px}
  .ct-toolbar-end{margin-left:0}
  .ct-row{gap:10px 12px;grid-template-columns:minmax(0,1fr) 36px}
  .ct-row-link{grid-column:1;grid-row:1}
  .ct-row .ct-star{grid-column:2;grid-row:1;align-self:start}
  .ct-bars{grid-column:1;grid-row:2;max-width:320px}
  .ct-row-title{font-size:19px}

  .ct-stepper-position{display:none}
  .ct-prompt{margin-top:32px}
  .ct-prompt-text{font-size:32px}
  .ct-prompt-text--long{font-size:17px;padding:18px 18px}

  /* Stacked columns: the fork becomes a single stem with the gap on it. */
  .ct-fork{height:52px}
  .ct-fork::before{height:52px}
  .ct-fork-branch{display:none}
  .ct-fork-gap{top:26px}
  .ct-compare{gap:36px;grid-template-columns:minmax(0,1fr)}
  .ct-then .ct-node{margin-top:0}
  .ct-answer-body{font-size:15px;padding:20px 18px 22px}
  .ct-answer-foot{padding-left:18px;padding-right:18px}
  .ct-reasoning>.ct-markdown{padding:14px 18px 16px}
  .ct-pager-title{font-size:17px}
  .ct-analysis{margin-top:40px}
  .ct-analysis h2{font-size:24px}
  .ct-analysis-body{font-size:17.5px}
}

@media (prefers-reduced-motion:reduce){
  .ct-star-icon,.ct-reasoning-toggle::after{transition:none}
}