/* Animated illustration. Overlay tokens and chrome follow the shipped 4.1.2
   overlay.html + liquid-glass.css; the document and response are samples. */
.hero-device.answer-demo {
  position:relative; inset:auto; transform:none; width:100%; height:auto;
  margin:0; min-width:0; container-type:inline-size; text-align:left;
}
.answer-demo {
  --ad-accent:#c6ddff; --ad-text:#f4f6fa; --ad-muted:#bdc5d2;
  --ad-tint:rgba(26,32,43,.88); --ad-tint-2:rgba(34,41,54,.90);
  --ad-border:rgba(231,240,255,.19); --ad-rim:rgba(255,255,255,.38);
  --ad-fill:rgba(255,255,255,.055);
  --ad-shadow:0 20px 60px rgba(0,0,0,.25),inset 0 1px 0 var(--ad-rim),inset 0 -1px 0 rgba(255,255,255,.035);
  --ad-curve:cubic-bezier(.2,.8,.2,1);
}
.ad-scene {
  position:relative; isolation:isolate; width:100%; aspect-ratio:1.13;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;
}
.ad-scene:before {
  content:''; position:absolute; inset:4% -7% -4%; z-index:-1;
  background:radial-gradient(ellipse at 65% 45%,#d6e6fc 0,rgba(225,237,255,.63) 38%,transparent 69%);
  filter:blur(20px); pointer-events:none;
}
.ad-workspace {
  position:absolute; inset:0; transform-origin:55% 48%;
  transition:transform 1.4s var(--ad-curve);
}
.answer-demo[data-step='answer'] .ad-workspace { transform:scale(1.022); }
.ad-paper {
  position:absolute; top:7%; left:2.5%; width:91%; height:82%; overflow:hidden;
  border:1px solid #d9e3f0; border-radius:17px; background:#fff;
  box-shadow:0 26px 55px rgba(41,75,119,.12),0 4px 9px rgba(41,75,119,.055),inset 0 1px 0 #fff;
}
.ad-paper-content { padding:10% 7.3% 0; }
.ad-paper-content h3 {
  margin:13px 0 13px; color:#263851; font-size:clamp(27px,5.05cqw,39px);
  font-weight:600; line-height:1.09; letter-spacing:-1.5px;
}
.ad-question { width:48%; margin:16% 0 0; }
.ad-question p { color:#65758c; font-size:clamp(12px,2.1cqw,15px); line-height:1.5; margin:0 0 17px; }
.ad-equation { font:italic 500 clamp(29px,5.5cqw,42px) Georgia,'Times New Roman',serif; letter-spacing:-.6px; color:#263851; white-space:nowrap; padding-bottom:8px; }
.ad-shortcut {
  position:absolute; top:19%; right:5%; display:flex; align-items:center; gap:7px;
  padding:9px 10px 9px 13px; border-radius:14px; background:rgba(245,249,255,.97);
  border:1px solid #d8e4f6; box-shadow:0 5px 18px rgba(50,85,128,.08);
  color:#7690b1; font-size:clamp(9px,1.7cqw,12px);
  transition:transform .4s var(--ad-curve),box-shadow .4s,background .4s;
}
.ad-shortcut>span { margin-right:3px; }
.ad-shortcut kbd {
  min-width:28px; height:30px; display:grid; place-items:center; border-radius:6px;
  font:500 16px -apple-system,BlinkMacSystemFont,sans-serif; color:#475e7d;
  background:linear-gradient(#fff,#edf3fd); border:1px solid #d1dcee;
  box-shadow:0 3px 0 #dce6f4,0 4px 5px #6b8caf16; transition:transform .18s,box-shadow .18s;
}
.answer-demo[data-step='shortcut'] .ad-shortcut { transform:translateY(2px); background:#eaf2ff; box-shadow:0 0 0 5px #bad4ff26,0 6px 20px #5483c312; }
.answer-demo[data-step='shortcut'] .ad-shortcut kbd { transform:translateY(2px); box-shadow:0 1px 0 #dce6f4; }
.ad-selection {
  position:absolute; z-index:10; display:none; border:2px solid var(--ad-accent);
  background:rgba(250,204,21,.06); pointer-events:none;
  box-shadow:0 0 0 1px rgba(113,165,243,.12);
}
.ad-selection-size { position:absolute; bottom:-24px; right:0; padding:2px 6px;
  background:rgba(28,28,30,.92); color:#a4b1c4; border-radius:3px; font-size:9px; white-space:nowrap; }
.ad-native-mode,.ad-native-instructions {
  position:absolute; z-index:20; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--ad-tint-2); border:1px solid var(--ad-border);
  box-shadow:0 8px 28px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(36px) saturate(140%); -webkit-backdrop-filter:blur(36px) saturate(140%);
  opacity:0; transition:opacity .35s,transform .35s var(--ad-curve); white-space:nowrap;
}
.ad-native-mode { bottom:13%; padding:7px 18px; border-radius:20px; color:var(--ad-accent); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.ad-native-instructions { bottom:3%; padding:11px 16px; border-radius:999px; color:#bcc9dc; font-size:clamp(8px,1.45cqw,11px); }
.ad-native-instructions kbd { padding:2px 5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:5px; color:#ecf3fd; font:inherit; }
.answer-demo[data-step='shortcut'] .ad-native-mode,
.answer-demo[data-step='moving'] .ad-native-mode,
.answer-demo[data-step='dragging'] .ad-native-mode,
.answer-demo[data-step='captured'] .ad-native-mode,
.answer-demo[data-step='loading'] .ad-native-mode,
.answer-demo[data-step='answer'] .ad-native-mode,
.answer-demo[data-step='shortcut'] .ad-native-instructions,
.answer-demo[data-step='moving'] .ad-native-instructions { opacity:1; transform:translateX(-50%) translateY(0); }
.ad-native-response {
  position:absolute; top:40%; right:0; width:51%; z-index:30;
  background:var(--ad-tint); border:1px solid var(--ad-border); border-radius:24px;
  box-shadow:var(--ad-shadow); overflow:hidden;
  backdrop-filter:blur(36px) saturate(140%); -webkit-backdrop-filter:blur(36px) saturate(140%);
  color:var(--ad-text); opacity:0; visibility:hidden;
  transform:translateY(12px) scale(.97); transform-origin:50% 20%;
  transition:opacity .45s,transform .55s var(--ad-curve),visibility .45s;
}
.answer-demo[data-step='loading'] .ad-native-response,
.answer-demo[data-step='answer'] .ad-native-response { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.ad-native-header {
  display:flex; align-items:center; justify-content:space-between; gap:9px; padding:14px 15px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ad-native-header>span { color:var(--ad-accent); font-size:12px; font-weight:600; }
.ad-native-header>div { display:flex; gap:5px; }
.ad-native-header>div>span {
  padding:5px 7px; border-radius:999px; background:var(--ad-fill);
  border:1px solid var(--ad-border); color:var(--ad-muted); font-size:clamp(8px,1.5cqw,11px);
  box-shadow:0 2px 5px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.2);
}
.ad-native-loading { height:96px; display:flex; align-items:center; justify-content:center; }
.ad-spinner { display:inline-flex; gap:4px; align-items:center; }
.ad-spinner i { width:5px; height:5px; background:var(--ad-accent); border-radius:50%; animation:ad-bounce 1.2s infinite; }
.ad-spinner i:nth-child(2) { animation-delay:.15s; }
.ad-spinner i:nth-child(3) { animation-delay:.3s; }
@keyframes ad-bounce { 0%,80%,100%{transform:scale(.5);opacity:.3}40%{transform:scale(1);opacity:1} }
.ad-native-answer { display:none; padding:14px 18px 17px; line-height:1.75; font-size:clamp(12px,1.95cqw,14px); }
.ad-native-answer p { margin:6px 0; color:inherit; }
.ad-native-answer p.ad-result { font:italic 500 clamp(19px,3.4cqw,26px) Georgia,serif; margin:1px 0 14px; }
.ad-native-answer p+p { margin-top:11px; }
.ad-native-answer strong { color:#edf4ff; font-weight:600; }
.answer-demo[data-step='answer'] .ad-native-answer { display:block; animation:ad-answer-in .55s var(--ad-curve) both; }
.answer-demo[data-step='answer'] .ad-native-loading { display:none; }
@keyframes ad-answer-in { from {opacity:0;transform:translateY(5px)} to {opacity:1;transform:translateY(0)} }
.ad-cursor { position:absolute; z-index:40; width:29px; height:34px; overflow:visible; opacity:0; pointer-events:none; filter:drop-shadow(0 2px 3px #10244235); }
.ad-cursor-press { opacity:0; }
.ad-cursor-crosshair { display:none; }
.answer-demo[data-step='moving'] .ad-cursor-arrow,
.answer-demo[data-step='dragging'] .ad-cursor-arrow,
.answer-demo[data-step='captured'] .ad-cursor-arrow { display:none; }
.answer-demo[data-step='moving'] .ad-cursor-crosshair,
.answer-demo[data-step='dragging'] .ad-cursor-crosshair,
.answer-demo[data-step='captured'] .ad-cursor-crosshair { display:block; }
.answer-demo[data-step='dragging'] .ad-cursor-press { opacity:1; }
.answer-demo[data-playing='false'] .ad-spinner i { animation-play-state:paused; }
.ad-controls { position:absolute; right:0; top:0; z-index:50; }
.ad-step { min-width:0; line-height:1.5; }
.ad-controls>div { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.ad-controls button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; width:40px;
  border:1px solid #d8e3f1; background:rgba(255,255,255,.76); color:#375b8a;
  border-radius:999px; padding:0 13px; font:500 11px 'Outfit',sans-serif;
  box-shadow:0 2px 6px rgba(47,82,125,.035); cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
}
.ad-controls button:hover { background:#fff; border-color:#afc9ed; transform:translateY(-1px); }
.ad-controls button:focus-visible { outline:3px solid #82adee; outline-offset:3px; }
.ad-controls button svg { width:15px; height:15px; flex-shrink:0; }
.ad-controls button.ad-play { padding:0; }
.ad-pause-icon { display:none; }
.answer-demo[data-playing='true'] .ad-pause-icon { display:block; }
.answer-demo[data-playing='true'] .ad-play-icon { display:none; }
.answer-demo figcaption { margin:17px 5px 0; color:#587396; font-size:10px; line-height:1.7; letter-spacing:.1px; }
.answer-demo figcaption strong { display:block; font-weight:500; color:inherit; }
.answer-demo figcaption span { display:block; }
.ad-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@media(max-width:1100px) and (min-width:801px) {
  .ad-scene { aspect-ratio:.98; }
  .ad-question { width:52%; }
  .ad-native-response { width:58%; top:45%; }
  .ad-native-header { padding:12px 11px; gap:5px; }
  .ad-native-header>div { gap:3px; }
  .ad-native-header>div>span { padding:4px 5px; }
  .ad-native-answer { padding:11px 14px 14px; }
}
@media(max-width:540px) {
  .ad-scene { aspect-ratio:.80; min-height:430px; }
  .ad-paper { top:5%; left:2%; width:94%; height:83%; border-radius:14px; }
  .ad-paper-content { padding:7% 8% 0; }
  .ad-paper-content h3 { font-size:32px; line-height:1.08; }
  .ad-question { width:84%; margin-top:6%; }
  .ad-question p { font-size:14px; line-height:1.65; }
  .ad-equation { font-size:34px; }
  .ad-shortcut { top:13%; right:5%; padding:8px; gap:5px; }
  .ad-shortcut>span { display:none; }
  .ad-shortcut kbd { min-width:24px; height:27px; font-size:14px; }
  .ad-native-response { top:auto; bottom:3%; right:3%; width:89%; border-radius:21px; }
  .ad-native-header { padding:12px 16px; }
  .ad-native-header>div>span { font-size:9px; padding:5px 8px; }
  .ad-native-answer { font-size:11px; padding:9px 17px 12px; line-height:1.6; }
  .ad-native-answer p.ad-result { font-size:21px; margin-bottom:9px; }
  .ad-native-answer p+p { margin-top:8px; }
  .ad-native-mode { bottom:15%; font-size:9px; }
  .answer-demo[data-step='loading'] .ad-native-mode,
  .answer-demo[data-step='answer'] .ad-native-mode { opacity:0; }
  .ad-native-instructions { padding:10px 12px; font-size:9px; bottom:3%; }
  .ad-controls button { font-size:10px; min-height:40px; width:40px; padding:0 11px; }
  .ad-controls>div { gap:6px; }
  .answer-demo figcaption { font-size:9px; margin-top:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .ad-workspace,.ad-shortcut,.ad-shortcut kbd,.ad-native-mode,.ad-native-instructions,.ad-native-response,.ad-controls button { transition:none; }
  .ad-spinner i,.answer-demo[data-step='answer'] .ad-native-answer { animation:none; }
  .answer-demo[data-step='answer'] .ad-workspace { transform:none; }
}