/* The five assistant pages (Fable 3.4): the assistant's mark pressed once into a sheet, in its own colour, and five index
   flags down the sheet's right edge in the five logo colours, the set's links. page.js adds .is-in once (data-once). */
.en-head .dc-head__grid { align-items: center; }
.en-press { position: relative; justify-self: center; width: min(100%, calc(290 * var(--u))); margin-right: calc(96 * var(--u)); transform: rotate(var(--r, 0deg)); z-index: 3; }
.en-press__sheet { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; padding: calc(22 * var(--u)); background: #FBF8F1 var(--sheet-a); background-size: 640px;
  box-shadow: var(--edge), 0 2px 2px rgb(21 31 34 / .16), 0 22px 36px -18px rgb(13 22 25 / .5); }
/* the mark, cut from its own colour and pressed in: a deep inner shadow, an ink ring that bleeds in on the last frame */
.en-press__mark { position: relative; display: grid; place-items: center; width: calc(128 * var(--u)); aspect-ratio: 1; }
.en-press__mark .mark { width: 100%; height: 100%; filter: drop-shadow(0 1px 0 rgb(255 255 255 / .55)) drop-shadow(0 -1px 0 rgb(0 0 0 / .18)); }
.en-press__mark--chatgpt .mark { fill: #0D0D0D; }
.en-press__ring { position: absolute; inset: -14%; border-radius: 50%; border: 2px solid currentColor; opacity: 0; color: var(--ink-red); transform: rotate(-8deg) scale(.98); mix-blend-mode: multiply; }
.en-press__mark--chatgpt .en-press__ring { color: #3A3A3A; }
.en-press__mark--claude .en-press__ring { color: #D97757; }
.en-press__mark--gemini .en-press__ring { color: #6C8CF5; }
.en-press__mark--google-ai-overviews .en-press__ring { color: #4285F4; }
.en-press__mark--perplexity .en-press__ring { color: #20808D; }
.js .en-press:not(.is-in) .en-press__mark { transform: scale(1.08); opacity: 0; }
.en-press.is-in .en-press__mark { animation: en-press .6s steps(6, end) both; }
.en-press.is-in .en-press__ring { animation: en-ring .2s steps(1, end) .5s both; }
@keyframes en-press { 0% { transform: scale(1.08); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes en-ring { to { opacity: .55; } }
.no-js .en-press__ring, .en-press:not([data-once]) .en-press__ring { opacity: .55; }
.en-press__fig { position: absolute; left: calc(14 * var(--u)); bottom: calc(14 * var(--u)); font-size: calc(17 * var(--u)); }
/* ChatGPT's own question, as a search slip under its mark */
.en-ask { position: absolute; left: 10%; right: 10%; bottom: calc(-22 * var(--u)); display: flex; align-items: center; gap: 10px; padding: calc(10 * var(--u)) calc(16 * var(--u));
  border-radius: 999px; background: #FDFBF7 var(--sheet-a); background-size: 500px; box-shadow: var(--edge), 0 10px 18px -10px rgb(13 22 25 / .5);
  font: italic 400 calc(14 * var(--u)) / 1.2 var(--serif); color: var(--hd); transform: rotate(1.2deg); }
.en-ask svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* the five flags down the sheet's right edge, tucked behind it; hover or focus slides one out, this page's is pulled */
.en-flags { position: absolute; z-index: -1; top: 7%; left: calc(100% - 16px); display: grid; gap: 6px; justify-items: start; }
.en-flag { display: flex; align-items: center; gap: 9px; height: 44px; width: 66px; overflow: hidden; padding: 0 14px 0 26px; white-space: nowrap;
  font: 600 calc(11.5 * var(--u)) / 1 var(--read); color: var(--hd); text-decoration: none; background: var(--flag, #E9E3D6);
  box-shadow: 0 1px 1px rgb(21 31 34 / .18), 3px 6px 10px -6px rgb(13 22 25 / .45); transition: transform .24s steps(3, end), width .24s steps(3, end); }
.en-flag .mark { width: 22px; height: 22px; flex: none; }
.en-flag span { opacity: 0; transition: opacity .24s steps(3, end); }
.en-flag:hover span, .en-flag:focus-visible span, .en-flag[aria-current] span { opacity: 1; }
.en-flag:hover, .en-flag:focus-visible { transform: translateX(10px); width: calc(66px + 10.5em); }
.en-flag:focus-visible { outline: 2px solid var(--hd); outline-offset: 2px; }
.en-flag[aria-current] { transform: translateX(18px); width: calc(66px + 10.5em); box-shadow: 0 1px 1px rgb(21 31 34 / .22), 6px 10px 16px -8px rgb(13 22 25 / .5); }
.en-flag--chatgpt { --flag: #E4E1DA; }
.en-flag--claude { --flag: #F1D9CC; }
.en-flag--gemini { --flag: #DCE2F8; }
.en-flag--google-ai-overviews { --flag: #F3EBD0; }
.en-flag--perplexity { --flag: #CFE4E5; }

@media (max-width: 1100px) {
  .en-press { justify-self: start; margin-top: calc(28 * var(--u)); }
}
@media (max-width: 760px) {
  .en-press { width: calc(100% - 64px); margin: 26px 0 30px; }
  .en-press__mark { width: 110px; }
  .en-press__fig { font-size: 1.05rem; }
  .en-ask { font-size: 1rem; bottom: -20px; }
  .en-flag, .en-flag:hover, .en-flag:focus-visible { width: 60px; padding-left: 22px; transform: none; }
  .en-flag[aria-current] { width: 60px; transform: translateX(8px); }
  .en-flag span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .en-press:not(.is-in) .en-press__mark, .en-press.is-in .en-press__mark { animation: none; transform: none; opacity: 1; }
  .en-press .en-press__ring { animation: none; opacity: .55; }
  .en-flag, .en-flag span { transition: none; }
}