.ask-launch { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; margin-top: 24px; padding: 6px 16px 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--body); font-size: 14px; line-height: 1.25; opacity: 0; visibility: hidden; transition: opacity 180ms ease-out, border-color 180ms ease-out; }
.introduction.is-typed .ask-launch { opacity: 1; visibility: visible; }
.ask-launch:is(:hover, :focus-visible) {
  border-color: transparent;
  color: var(--ink);
  background: linear-gradient(#fff, #fff) padding-box, var(--accent-gradient) border-box;
  background-size: 100% 100%, 220% 100%;
  animation: ask-gradient-flow 4s ease-in-out infinite alternate;
}
@keyframes ask-gradient-flow { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
@media (min-width: 701px) { .ask-launch { transform: translateY(48px); } }
@media (max-width: 700px) { .ask-launch { margin-top: 48px; } }
.ask-avatar-stack { display: flex; align-items: center; padding-right: 1px; }
.ask-avatar-stack img { display: block; width: 29px; height: 29px; padding: 4px; border: 2px solid var(--paper); border-radius: 50%; background: #fff; object-fit: contain; }
.ask-avatar-stack img + img { margin-left: -8px; }
.ask-avatar-stack img:nth-last-child(-n+2) { padding: 0; object-fit: cover; }
dialog[data-section="ask"] { max-width: 760px; border-radius: 18px; }
dialog[data-section="ask"] .dialog-topline { position: absolute; top: 16px; right: 16px; z-index: 1; padding: 0; border: 0; }
dialog[data-section="ask"] .dialog-brand, dialog[data-section="ask"] .dialog-bottomline { display: none; }
dialog[data-section="ask"] .dialog-close { width: 44px; height: 44px; background: var(--paper); border: 1px solid var(--line); }
dialog[data-section="ask"] .dialog-close:is(:hover, :focus-visible) { background: var(--accent-wash); }
dialog[data-section="ask"] .dialog-scroll { padding: 28px 36px 16px; }
dialog[data-section="ask"] .section-ascii { display: none; }
dialog[data-section="ask"] .dialog-heading-row h2 { padding-right: 52px; margin-top: 0; }
.ask-picker { padding-bottom: 8px; }
.ask-providers { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ask-provider { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; flex: 0 0 calc((100% - 36px) / 4); min-height: 116px; padding: 16px 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: background 160ms ease-out, border-color 160ms ease-out; }
.ask-provider:is(:hover, :focus-visible) { background: var(--accent-wash); border-color: var(--green); }
.ask-provider-icon { display: block; width: 44px; height: 44px; object-fit: contain; border-radius: 9px; }
.ask-provider-icon.is-mascot { width: 50px; height: 50px; margin-block: -3px; border-radius: 50%; }
.ask-provider-name { color: var(--ink); font-size: 17px; line-height: 1.2; }
.ask-copy { width: 100%; min-height: 50px; margin-top: 20px; padding: 14px 20px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 17px; }
.ask-copy:is(:hover, :focus-visible) { background: var(--accent-text); }
.ask-status { min-height: 22px; margin: 10px 0 4px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--green); }
.ask-status:empty { display: none; }
.ask-open-link { display: inline-flex; min-height: 44px; align-items: center; padding-inline: 5px; }
.ask-copy-fallback { margin-top: 12px; }
.ask-prompt { display: block; width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 13px/1.6 ui-monospace, "SFMono-Regular", monospace; padding: 16px; }
.ask-prompt:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (max-width: 540px) {
  dialog[data-section="ask"] .dialog-scroll { padding: 28px 22px 16px; }
  dialog[data-section="ask"] .dialog-heading-row h2 { font-size: 32px; }
  .ask-providers { gap: 10px; }
  .ask-provider { flex-basis: calc((100% - 10px) / 2); min-height: 112px; padding: 16px 8px; gap: 12px; }
  .ask-provider-icon { width: 38px; height: 38px; }
  .ask-provider-icon.is-mascot { width: 44px; height: 44px; }
  .ask-provider-name { font-size: 16px; }
  .ask-prompt { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-launch, .ask-provider { transition: none; }
  .ask-launch:is(:hover, :focus-visible) { animation: none; }
}