/* The public pages (terms, privacy, updates). The layout follows the legal and release-note pages of Anthropic (a wordmark and the language at the
   top, a large centred title, a thin rule, a reading column of 640px with a serif text, release notes grouped by month with an "On this page" list at
   the side), in black and white, light or dark with the system. */
:root { --bg: #ffffff; --text: #111111; --muted: #6b6b6b; --line: #e2e2e2; --soft: #f5f5f5; --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
@media (prefers-color-scheme: dark) { :root { --bg: #0b0b0b; --text: #f2f2f2; --muted: #9a9a9a; --line: #272727; --soft: #161616; } }
* { box-sizing: border-box; }
html { color-scheme: light dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sans); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
[hidden] { display: none !important; }

/* top: the wordmark at the left, the language and the way into the application at the right */
.pg-header { display: flex; min-height: 4.1rem; align-items: center; justify-content: space-between; gap: 0.75rem; max-width: 72rem; margin: 0 auto; padding: 1.25rem 1.5rem; }
.pg-brand { display: inline-flex; flex: none; align-items: center; gap: 0.5rem; font-size: 1.2rem; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; }
/* the mark of the application: its icon, in its own colour */
.pg-mark { display: block; width: 1.65rem; height: 1.65rem; }
.pg-tools { display: flex; flex: none; align-items: center; gap: 0.75rem; }
.pg-lang { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); }
.pg-lang:hover, .pg-lang:focus-within { color: var(--text); }
#pg-lang { appearance: none; -webkit-appearance: none; font: inherit; font-size: 0.9rem; color: inherit; background: transparent; border: 0; padding: 0.3rem 0.2rem; cursor: pointer; }
#pg-lang option { color: #111111; background: #ffffff; }
.pg-go { display: inline-block; padding: 0.5rem 1rem; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 0.9rem; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.pg-go:hover { opacity: 0.82; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
/* the language list is the one of the system, and iOS marks a list as focused after a choice: no frame round it (the colour of the label is the sign) */
#pg-lang:focus, #pg-lang:focus-visible { outline: none; }
a, select, label { -webkit-tap-highlight-color: transparent; }

/* the title */
.pg-main { padding: 0 1.5rem; }
.pg-hero { padding: 4rem 0 2.25rem; text-align: center; }
h1 { margin: 0; font-size: clamp(2rem, 5.2vw, 3.5rem); line-height: 1.12; font-weight: 650; letter-spacing: -0.02em; overflow-wrap: break-word; hyphens: auto; }
.pg-meta { margin: 1.1rem 0 0; font-size: 0.95rem; color: var(--muted); }
.pg-meta b { color: var(--text); font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* the terms and the privacy policy: a thin rule, then a reading column of 640px (serif for the Latin languages) */
.pg-col { max-width: 40rem; margin: 0 auto; padding: 1.75rem 0 6rem; border-top: 1px solid var(--text); }
.pg-text p { margin: 0 0 1.05rem; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: anywhere; }
.pg-text:lang(zh-TW) p { font-family: var(--sans); font-size: 1rem; line-height: 1.95; }

/* the update notes: months, versions with a link to themselves, and the list of months at the side */
.pg-split { display: grid; grid-template-columns: minmax(0, 46rem) 12rem; gap: 4rem; max-width: 62rem; margin: 0 auto; padding: 0 0 6rem; border-top: 1px solid var(--text); }
.pg-logs { min-width: 0; padding-top: 0.5rem; }
.pg-month { scroll-margin-top: 1rem; }
.pg-month h2 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 1.1rem 0 0.7rem; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pg-ver { padding: 1.9rem 0 0.6rem; scroll-margin-top: 3.5rem; }
.pg-ver + .pg-ver { border-top: 1px solid var(--line); margin-top: 1.3rem; }
.pg-ver h3 { display: flex; align-items: baseline; gap: 0.9rem; margin: 0 0 0.9rem; }
.pg-v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.pg-v:hover::after { content: " #"; color: var(--muted); font-weight: 400; }
.pg-d { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; color: var(--muted); }
.pg-body { font-size: 0.95rem; line-height: 1.7; overflow-wrap: anywhere; }
.pg-body p { margin: 0 0 0.7rem; }
.pg-body ul { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.pg-body li { margin: 0.35rem 0; }
.pg-body strong { font-weight: 600; }
.pg-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; background: var(--soft); padding: 0.05em 0.35em; border-radius: 0.3rem; }
.pg-sec { margin: 1.3rem 0 0.35rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; color: var(--muted); }
.pg-body > .pg-sec:first-child { margin-top: 0; }
.pg-ver:target .pg-v { text-decoration: underline; text-underline-offset: 6px; }
.pg-toc { position: sticky; top: 1.5rem; align-self: start; max-height: calc(100vh - 3rem); overflow-y: auto; padding-top: 1.1rem; font-size: 0.85rem; }
.pg-toc-title { margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 600; }

/* the index: years, the months of a year, the versions of a month. Each level folds open and shut with a short move; only the month in view is open. */
.pg-idx { font-size: 0.85rem; }
.pg-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.24s ease; }
.pg-fold-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.24s; }
.is-open > .pg-fold { grid-template-rows: 1fr; }
.is-open > .pg-fold > .pg-fold-in { visibility: visible; transition-delay: 0s; }
@media (scripting: none) { .pg-fold { grid-template-rows: 1fr; } .pg-fold-in { visibility: visible; } }
.pg-chev { display: block; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s ease; }
.is-open > .pg-iy-h .pg-chev, .is-open > .pg-im-row .pg-chev { transform: rotate(45deg); }
.pg-iy-h { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.55rem 0.2rem; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.pg-iy:first-child > .pg-iy-h { border-top: 0; }
.pg-im-row { display: flex; align-items: center; gap: 0.4rem; }
.pg-im-a { flex: 1; min-width: 0; padding: 0.28rem 0 0.28rem 0.9rem; border-left: 1px solid var(--line); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; }
.pg-im-a:hover { color: var(--text); }
.pg-im-a.is-active { color: var(--text); border-left-color: var(--text); }
.pg-im-n { font-size: 0.72rem; color: var(--muted); }
.pg-im-t { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 0; background: none; color: var(--muted); cursor: pointer; }
.pg-im-t:hover { color: var(--text); }
.pg-iv { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.15rem 0 0.7rem 0.9rem; }
.pg-iv a { padding: 0.18rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.pg-iv a:hover { color: var(--text); border-color: var(--text); }
.pg-iv a.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }

/* a narrow window: the bar of the index. It stands under the title and sticks to the top of the window when the page is scrolled (the month being read at the
   left, the button of the index at the right); the index opens as a sheet under it. */
.pg-stick { display: none; }

/* the foot: the other pages and the way to write to us */
.pg-footer { max-width: 72rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); }
.pg-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-bottom: 1rem; }
.pg-links a { text-decoration: none; color: var(--text); }
.pg-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pg-links a[aria-current="page"] { color: var(--muted); }
.pg-support { margin: 0; }

@media (max-width: 62rem) {
  .pg-split { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 0; }
  .pg-toc { display: none; }
  /* the month is told by the bar, not by a heading that sticks */
  .pg-month h2 { position: static; }
  .pg-month:first-child > h2 { display: none; }
  .pg-month, .pg-ver { scroll-margin-top: 4rem; }
  .pg-stick { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.2rem; margin: 0 -1.5rem; padding: env(safe-area-inset-top, 0px) 1.5rem 0; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: box-shadow 0.2s ease; }
  .pg-stick.is-stuck { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
  .pg-cur { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; letter-spacing: 0.1em; color: var(--muted); }
  .pg-cur.is-swap { animation: pg-swap 0.24s ease; }
  .pg-ix-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease; }
  .pg-ix-btn:hover { border-color: var(--text); }
  .pg-ix-btn::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; }
  .pg-ix-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
  .pg-sheet { position: absolute; top: calc(100% + 0.4rem); left: 0.75rem; right: 0.75rem; max-height: calc(100vh - 6rem); overflow-y: auto; padding: 0.3rem 1rem; background: var(--bg); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2); overscroll-behavior: contain; opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; }
  .pg-sheet.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
}
@keyframes pg-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 40rem) {
  h1 { font-size: clamp(1.75rem, 8.4vw, 2.4rem); }
  h1:lang(ru), h1:lang(fr), h1:lang(es) { font-size: clamp(1.5rem, 6.4vw, 2.2rem); }
  .pg-header { padding: 1rem; }
  .pg-go { padding: 0.45rem 0.8rem; font-size: 0.82rem; }
  .pg-tools { gap: 0.5rem; }
  #pg-lang { font-size: 0.82rem; }
  .pg-main { padding: 0 1rem; }
  .pg-stick { margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
  .pg-hero { padding: 2.75rem 0 1.75rem; }
  .pg-footer { padding: 1.75rem 1rem 2.5rem; }
  .pg-v { font-size: 1.3rem; }
}
@media (max-width: 26rem) { .pg-globe { display: none; } }
@media (max-width: 23rem) { .pg-name { display: none; } }
/* the button at the corner that goes back to the top (it comes in once the page has been scrolled) */
.pg-up { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px)); z-index: 25; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; background: var(--text); color: var(--bg); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); cursor: pointer; opacity: 0; transform: translateY(10px) scale(0.9); visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; }
.pg-up.is-on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.pg-up:hover { opacity: 0.85; }
.pg-up.is-on:hover { opacity: 0.85; }
.pg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .pg-fold, .pg-fold-in, .pg-chev, .pg-sheet, .pg-up, .pg-stick, .pg-ix-btn::after { transition: none; }
  .pg-cur.is-swap { animation: none; }
}