/* The AI Assistant hero's prompt box and scroll story (src/components/
   assistant/PromptStory.astro, assistant-story.js). The box as served: under
   the copy, the window below it with the page finished (a desktop without
   the script), or the box alone (under 1100px). With the script on a
   desktop (.is-on), the track is tall, its stage pins under the nav and
   --p (0 to 1) runs the story: --t the dock, the classes (is-layout ...
   is-live) what the page has. */

.axs { --p: 0; margin-top: 40px; }
.axs__frame { --t: 0; --e: 0; position: relative; display: flex; flex-direction: column; }

/* ---------- the box: the home page's composer (composer.css), in black ---------- */
.axs__chat { position: relative; z-index: 2; display: flex; flex-direction: column; max-width: 720px; margin-inline: auto; }
.axs__thread { display: none; }
/* over the note and the thread, so the box's menus open over them */
.axs__box { position: relative; z-index: 1; flex: none; margin: 0 calc(14px * var(--e)) calc(14px * var(--e)); }
.ax-body .ai-composer {
  --bg: #0c0c0e; --fg: #f4f4f6; --muted: #1b1b1f; --muted-fg: rgb(255 255 255 / .55);
  --accent: rgb(255 255 255 / .07); --border: rgb(255 255 255 / .12); --ring: rgb(142 160 255 / .3);
  --maxw: none;
}
.ax-body .ai-composer .composer { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05); }
.ax-body .ai-composer .composer:focus-within { box-shadow: 0 0 0 3px var(--ring); }
.ax-body .ai-composer .ghost b { color: rgb(255 255 255 / .86); border-bottom-color: rgb(255 255 255 / .3); }
.ax-body .ai-composer .type-btn .chev,
.ax-body .ai-composer .eends { color: rgb(255 255 255 / .4); }
.ax-body .ai-composer .logo.has-img { background: #18181b; }
.ax-body .ai-composer .more { color: rgb(255 255 255 / .7); }
.ax-body .ai-composer .chip { color: #e4e4e7; }
.ax-body .ai-composer .chip button:hover { background: rgb(255 255 255 / .1); }
.ax-body .ai-composer .chip--skill { color: #aab8ff; background: rgb(142 160 255 / .12); }
.ax-body .ai-composer :is(.menu, .type-menu, .add-menu, .add-sub) { box-shadow: 0 18px 40px -14px #000, 0 0 0 1px rgb(255 255 255 / .03); }
.ax-body .ai-composer .etrack { background: #18181b; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.ax-body .ai-composer .ecool { background: #26262b; }
.ax-body .ai-composer .eticks i { background: rgb(255 255 255 / .16); }
.ax-body .ai-composer .eticks i.on { background: rgb(255 255 255 / .42); }
.ax-body .ai-composer .ethumb { background: #f4f4f6; border-color: transparent; }
.ax-body .ai-composer .ethumb svg { fill: #09090b; }
.ax-body .ai-composer :is(.tile, .app-connect):hover { border-color: rgb(255 255 255 / .2); }
.ax-body .ai-composer .app-connect.on { color: #e4e4e7; }
.ax-body .ai-composer .dialog { box-shadow: 0 30px 70px -20px #000, 0 0 0 1px rgb(255 255 255 / .06); }
.ax-body .ai-composer .scrim { background: rgb(0 0 0 / .6); }

/* the conversation's prompts type into a ghost over the composer's field, once it's docked */
.axs__ghost {
  display: none;
  position: absolute; z-index: 1; top: 17px; left: 18px; right: 18px; margin: 0;
  font: 400 calc(16.5px - 2.5px * var(--e))/1.4 var(--font-ui); letter-spacing: -.006em;
  color: rgb(255 255 255 / .62); pointer-events: none; overflow-wrap: break-word;
}
.axs__ghost.is-ph { color: var(--ax-faint); }
@keyframes axs-caret { 50% { opacity: 0; } }
.axs__ghost.is-typing::after {
  content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -.2em;
  background: #8ea0ff; animation: axs-caret 1s steps(1) infinite;
}

.axs__note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px;
  margin: 18px 0 0;
  font: 400 13.5px/1.4 var(--font-ui); color: var(--ax-faint);
}
.axs__free { display: inline-flex; align-items: center; gap: 6px; }
.axs__free svg { width: 14px; height: 14px; fill: none; stroke: #86efac; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.axs__alt { display: inline-flex; align-items: center; gap: 5px; color: #fff; }
.axs__alt svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.axs__alt:hover svg { transform: translateX(3px); }
.axs__alt:focus-visible { outline: 2px solid var(--ax-sky); outline-offset: 3px; border-radius: 4px; }

/* ---------- the editor ---------- */
.axs__win { display: none; }
@media (min-width: 1100px) {
  .axs__win {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    height: 680px; margin-top: 56px;
    border: 1px solid transparent; border-radius: 16px;
    background:
      linear-gradient(#000, #000) padding-box,
      linear-gradient(155deg, rgb(142 160 255 / .5), rgb(255 255 255 / .08) 28%, rgb(255 255 255 / .05) 72%, rgb(192 132 252 / .4)) border-box;
    box-shadow: 0 60px 160px -60px rgb(91 75 255 / .55), 0 30px 70px -36px #000;
    overflow: hidden;
  }
  /* without the script: under the box, the page finished, no AI panel */
  .axs:not(.is-on) .axs__win { order: 1; }
  .axs:not(.is-on) .axs__body { grid-template-columns: minmax(0, 1fr); }
  .axs:not(.is-on) .axs__panel { display: none; }
}
.axs__bar {
  flex: none; display: flex; align-items: center; gap: 14px;
  height: 44px; padding: 0 8px 0 8px;
  border-bottom: 1px solid rgb(255 255 255 / .08);
  background: #08080a;
}
.axs__views { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: rgb(255 255 255 / .05); }
.axs__views > span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 6px; font: 500 12px/1 var(--font-ui); color: var(--ax-faint); }
.axs__views > span.is-on { background: rgb(255 255 255 / .09); color: #fff; }
.axs__views svg, .axs__d svg, .axs__head svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.axs__url {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  font: 400 12px/1 var(--ax-mono); color: var(--ax-soft); white-space: nowrap; overflow: hidden;
}
.axs__url > svg { flex: none; width: 11px; height: 11px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; transition: color .4s; }
.axs__url b { font-weight: 400; color: #fff; }
.axs__q { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ax-sky); border-radius: 3px; }
.axs.is-track .axs__q { display: inline; }
.axs.is-live .axs__url > svg { color: #4ade80; }
.axs__dev { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: rgb(255 255 255 / .05); }
.axs__d { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 6px; color: var(--ax-faint); transition: background-color .3s, color .3s; }
.axs:not(.is-mobile) .axs__d--desk,
.axs.is-mobile .axs__d--phone { background: rgb(255 255 255 / .09); color: #fff; }
.axs__pub {
  flex: none; display: inline-grid; place-items: center;
  height: 30px; min-width: 76px; padding: 0 14px; border-radius: 8px;
  background: #3d5bff; color: #fff; font: 600 12.5px/1 var(--font-ui);
  transition: background-color .4s, box-shadow .4s;
}
.axs__pub > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity .3s; }
.axs__pub-b { opacity: 0; }
.axs__pub-b i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
.axs.is-live .axs__pub { background: rgb(74 222 128 / .12); box-shadow: inset 0 0 0 1px rgb(74 222 128 / .45); color: #bbf7d0; }
.axs.is-live .axs__pub-a { opacity: 0; }
.axs.is-live .axs__pub-b { opacity: 1; }

.axs__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.axs__panel { border-right: 1px solid rgb(255 255 255 / .08); background: #000; }
.axs__head {
  display: flex; align-items: center; gap: 10px;
  height: 48px; margin: 0; padding: 0 14px 0 16px;
  border-bottom: 1px solid rgb(255 255 255 / .06);
  font: 500 13.5px/1 var(--font-ui); color: #fff;
}
.axs__head b { flex: 1; font-weight: 500; }
.axs__head svg { color: var(--ax-faint); }
.axs__canvas {
  position: relative; overflow: hidden;
  container-type: inline-size;
  background:
    radial-gradient(rgb(255 255 255 / .08) 1px, transparent 1.3px) 11px 11px / 22px 22px,
    #050506;
}
.axs__device {
  position: relative; width: 100%; height: 100%; margin-inline: auto; overflow: hidden;
  transition: width .8s cubic-bezier(.65, 0, .35, 1), height .8s cubic-bezier(.65, 0, .35, 1),
              translate .8s cubic-bezier(.65, 0, .35, 1), border-radius .8s, box-shadow .8s;
}
.axs.is-mobile .axs__device {
  width: 330px; height: calc(100% - 44px); translate: 0 22px;
  border-radius: 30px;
  box-shadow: 0 0 0 7px #16161a, 0 0 0 8px rgb(255 255 255 / .14), 0 30px 70px -24px #000;
}

/* ---------- the thread: the AI panel as LanderLab draws it (art/Assistant.astro) ---------- */
.axs-you, .axs-ai, .axs-done, .axs-live { display: none; }
.axs-you.is-in { display: block; }
.axs-ai.is-in { display: grid; gap: 10px; }
.axs-ai.is-in > .axs-done.is-in { display: grid; }
.axs-live.is-in { display: flex; }
.axs__thread .is-in { animation: axs-in .35s ease both; }
@keyframes axs-in { from { opacity: 0; transform: translateY(6px); } }
.axs__thread p { margin: 0; }
.axs__thread svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.axs-you {
  align-self: flex-end; max-width: 86%;
  padding: 9px 12px; border-radius: 12px;
  background: #1b1b1f;
  font: 400 13px/1.45 var(--font-ui); color: #f4f4f6;
}
.axs-pick {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 0 6px;
  padding: 3px 8px 3px 6px; border-radius: 6px;
  background: rgb(61 91 255 / .22); color: #c7d0ff;
  font: 500 11.5px/1.2 var(--font-ui);
}
.axs-pick svg { width: 12px; height: 12px; }
.axs-think { display: flex; align-items: center; gap: 6px; font: 400 12px/1.3 var(--font-ui); color: var(--ax-faint); }
.axs-think svg { width: 13px; height: 13px; }
.axs-say { font: 400 13px/1.45 var(--font-ui); color: rgb(255 255 255 / .82); }
.axs-plan { padding: 0 0 6px; border: 1px solid rgb(255 255 255 / .09); border-radius: 12px; background: #09090b; }
.axs-plan__head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 4px !important; padding: 9px 12px;
  border-bottom: 1px solid rgb(255 255 255 / .06);
  font: 500 12.5px/1 var(--font-ui); color: #f4f4f6;
}
.axs-plan__left { flex: 1; }
.axs-plan__left > span { display: none; }
.axs-plan__left > .is-on { display: inline; }
.axs-plan__head > svg:last-child { width: 14px; height: 14px; color: var(--ax-faint); }
.axs-task { display: flex; align-items: center; gap: 9px; padding: 5px 12px; font: 400 12.5px/1.35 var(--font-ui); color: rgb(255 255 255 / .4); }
.axs-ok { width: 14px; height: 14px; color: #8ea0ff; stroke-width: 2.4 !important; }
.axs-spin {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px dashed rgb(255 255 255 / .22);
}
.axs-task.is-now { color: #fff; }
.axs-task.is-now .axs-spin,
.axs-plan:not(.is-all) .axs-plan__head .axs-spin {
  border-style: solid; border-color: rgb(255 255 255 / .14); border-top-color: #8ea0ff;
  animation: ax-turn .8s linear infinite;
}
.axs-task.is-now > span:last-child {
  background: linear-gradient(90deg, rgb(255 255 255 / .55) 0 38%, #fff 46%, #c7d0ff 50%, #fff 54%, rgb(255 255 255 / .55) 62% 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ax-shimmer 1.8s linear infinite;
}
.axs-task.is-done { color: rgb(255 255 255 / .78); }
.axs-task:not(.is-done) .axs-ok,
.axs-task.is-done .axs-spin,
.axs-plan:not(.is-all) .axs-plan__head .axs-ok,
.axs-plan.is-all .axs-plan__head .axs-spin { display: none; }
.axs-done {
  gap: 9px; padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / .09); border-radius: 12px;
  font: 400 13px/1.45 var(--font-ui); color: #fff;
}
.axs-thumbs { display: flex; gap: 12px; color: var(--ax-faint); }
.axs-thumbs svg { width: 14px; height: 14px; }
.axs-flip { transform: scaleY(-1); }
.axs-live {
  align-self: flex-start; align-items: center; gap: 8px; margin: 0;
  padding: 7px 11px; border-radius: 10px;
  border: 1px solid rgb(74 222 128 / .35); background: rgb(74 222 128 / .07);
  font: 500 11.5px/1.3 var(--ax-mono); color: #bbf7d0;
}
.axs-live i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgb(74 222 128 / .8); }

/* ---------- the story (a desktop, with the script) ---------- */
@media (min-width: 1100px) {
  .axs.is-on { height: 780vh; }
  .axs.is-on .axs__stage { position: sticky; top: 65px; height: calc(100vh - 65px); min-height: 600px; }
  .axs.is-on .axs__frame {
    --t: clamp(0, var(--p) / .07, 1);
    --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
    height: 100%;
  }
  /* the composer, centred under the copy, docks into the AI panel below its
     head; --h0 is its height there, measured by the script */
  .axs.is-on .axs__chat {
    --w0: min(720px, 100%); --w1: 339px; --y1: 109px; --b1: 25px;
    position: absolute; max-width: none; margin: 0;
    left: calc((100% - var(--w0)) / 2 * (1 - var(--e)) + 1px * var(--e));
    width: calc(var(--w0) * (1 - var(--e)) + var(--w1) * var(--e));
    top: calc(var(--y1) * var(--e));
    bottom: calc((100% - var(--h0, 145px)) * (1 - var(--e)) + var(--b1) * var(--e));
  }
  .axs.is-on .axs__thread {
    flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
    padding: 14px 14px 16px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 56px);
            mask-image: linear-gradient(to bottom, transparent, #000 56px);
  }
  .axs.is-on .axs__note { position: absolute; left: 0; right: 0; top: calc(var(--h0, 145px) + 18px); opacity: calc(1 - var(--t) * 6); }
  .axs.is-on.is-docked .axs__note { visibility: hidden; }
  /* docking: its border's light goes, the text gets smaller, the extras
     (page type, apps, the build menu) fold away, the + stays, Build it
     turns into the send arrow */
  .axs.is-on .ai-composer .beam { opacity: calc(1 - var(--t)); }
  .axs.is-on .ai-composer :is(.ghost, #prompt) { font-size: calc(16.5px - 2.5px * var(--e)); }
  .axs.is-on .ai-composer #prompt { height: calc(74px - 16px * var(--e)) !important; min-height: 0; overflow-y: auto; }
  .axs.is-on .ai-composer .bar { flex-wrap: nowrap; }
  .axs.is-moving .ai-composer :is(.type-wrap, .stack) {
    overflow: hidden; max-width: calc(clamp(0, 1 - var(--t) * 3, 1) * 220px); opacity: calc(1 - var(--t) * 3);
  }
  .axs.is-moving .ai-composer .caret-btn { overflow: hidden; width: calc(clamp(0, 1 - var(--t) * 3, 1) * 29px); }
  .axs.is-docked .ai-composer :is(.type-wrap, .stack, .caret-btn) { display: none; }
  .axs.is-docked .ai-composer .ghost { visibility: hidden; }
  .axs.is-docked:not(.has-text) .axs__ghost { display: block; }
  .axs.is-docked .ai-composer .tools { margin-left: auto; }
  .axs.is-docked .ai-composer .build { border-radius: 50%; }
  .axs.is-docked .ai-composer .build .go {
    width: 35px; padding: 0; font-size: 0;
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12.5v-9M4 7.5l4-4 4 4'/%3E%3C/svg%3E") center / 15px no-repeat;
  }
  .axs.is-docked .ai-composer .build .go:hover { background-color: var(--primary-hi); }
  .axs .ai-composer .go.is-sent { transform: scale(.86); }
  /* the editor peeks under the note, faded, then rises round the box */
  .axs.is-on .axs__win {
    position: absolute; inset: 16px 0 24px; height: auto; margin: 0;
    translate: 0 calc((1 - var(--e)) * 210px);
    opacity: calc(.4 + .6 * var(--e));
    -webkit-mask-image: linear-gradient(to bottom, #000, rgb(0 0 0 / var(--e)) 250px);
            mask-image: linear-gradient(to bottom, #000, rgb(0 0 0 / var(--e)) 250px);
  }
  .axs.is-on.is-up .axs__win { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- the pre-lander ---------- */
.axs-page {
  --a: #b4234a; --paper: #fffaf6; --ink: #1d1a1c; --soft: #5c5458; --line: #efe4dd;
  position: relative;
  font: 400 clamp(7px, 1.3cqw, 12px)/1.5 var(--font-ui);
  color: var(--ink); background: var(--paper);
  translate: 0 var(--y, 0px);
  transition: translate .9s cubic-bezier(.65, 0, .35, 1), background-color .7s, font-size .8s cubic-bezier(.65, 0, .35, 1);
}
.axs-page p { margin: 0; }
.axs-page__top { position: relative; }
.axs-page__ad {
  display: grid; place-items: center; height: 2.4em;
  background: #f3ebe5; color: #8a7d76;
  font: 600 .72em/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
}
.axs-page__head { display: flex; align-items: center; justify-content: space-between; height: 5em; padding: 0 5em; border-bottom: 1px solid var(--line); }
.axs-page__logo { display: flex; align-items: center; gap: .7em; }
.axs-page__logo i { width: 1.9em; height: 1.9em; border-radius: .5em; background: var(--a); }
.axs-page__logo b { width: 7em; height: .7em; border-radius: 1em; background: rgb(0 0 0 / .16); }
.axs-page__nav { display: flex; gap: 2em; }
.axs-page__nav b { width: 4em; height: .55em; border-radius: 1em; background: rgb(0 0 0 / .1); }
.axs-page__art { max-width: 54em; margin: 0 auto; padding: 3.2em 2em 3em; }
.axs-page__intro { position: relative; }
.axs-page__kicker > span {
  display: inline-block; padding: .45em .8em; border-radius: 99em;
  background: rgb(180 35 74 / .1); color: var(--a);
  font: 700 .78em/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}
.axs-page__h { margin-top: .5em !important; font: 700 3.25em/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.012em; text-wrap: balance; }
.axs-v2 { display: none; }
.axs.is-head .axs-v1 { display: none; }
.axs.is-head .axs-v2 { display: inline; }
.axs-page__dek { margin-top: .8em !important; font-size: 1.32em; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.axs-page__by { display: flex; align-items: center; gap: .7em; margin-top: 1.4em !important; font-size: .95em; color: #7b7175; }
.axs-page__by i { width: 2.3em; height: 2.3em; border-radius: 50%; background: linear-gradient(135deg, #e9d6cc, #c9aea2); }
.axs-page__fig { position: relative; margin: 2.2em 0 0; }
.axs-page__img { display: block; height: 24em; border-radius: .7em; overflow: hidden; background: #efe6e0; }
.axs-page__img img, .axs-page__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.axs-page__img img { object-position: 50% 40%; }
.axs-page__fig figcaption { margin-top: .7em; font-size: .85em; font-style: italic; color: #8a7f83; text-align: center; }
.axs-page__list { position: relative; display: grid; gap: 2em; margin-top: 2.8em; }
.axs-page__item { position: relative; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 1.2em; align-items: start; }
.axs-page__item > b {
  display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%;
  background: var(--a); color: #fff; font: 700 1.1em/1 Georgia, serif;
}
.axs-page__item > span { display: grid; gap: .35em; padding-top: .2em; }
.axs-page__it { font: 700 1.5em/1.25 Georgia, "Times New Roman", serif; }
.axs-page__ix { font-size: 1.12em; line-height: 1.55; color: var(--soft); }
.axs-page__reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; border-radius: .6em; }
.axs-page__review { display: grid; align-content: start; gap: .6em; padding: 1.2em 1.2em 1.1em; border-radius: .8em; background: #fff; border: 1px solid var(--line); }
.axs-page__stars { display: flex; gap: .15em; }
.axs-page__stars svg { width: 1em; height: 1em; fill: #f2a20c; }
.axs-page__rq { font: 400 1.02em/1.45 Georgia, serif; }
.axs-page__rn { font-size: .85em; font-weight: 600; color: #7b7175; }
.axs-page__offer {
  position: relative;
  display: grid; grid-template-columns: 11em minmax(0, 1fr) auto; align-items: center; gap: 2em;
  margin-top: 3em; padding: 1.8em;
  border: 2px solid var(--a); border-radius: 1em; background: #fff;
}
.axs-page__pic { display: block; height: 11em; border-radius: .7em; overflow: hidden; background: #efe6e0; }
.axs-page__deal { display: grid; gap: .45em; min-width: 0; }
.axs-page__ok { font: 700 .78em/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--a); }
.axs-page__ot { font: 700 2em/1.15 Georgia, "Times New Roman", serif; }
.axs-page__ticks { display: flex; flex-wrap: wrap; gap: .3em 1.2em; margin-top: .3em; font-size: 1em; font-weight: 500; color: var(--soft); }
.axs-page__ticks > span::before { content: "✓ "; color: #15803d; font-weight: 700; }
.axs-page__go { position: relative; display: grid; justify-items: center; gap: .6em; }
.axs-page__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 3.6em; padding: 0 1.8em; border-radius: .6em;
  background: var(--a); color: #fff; font: 700 1.1em/1.15 var(--font-ui); white-space: nowrap;
}
.axs-page__btn svg { flex: none; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.axs-page__tag {
  display: none; align-items: center; height: 2.1em; padding: 0 .8em;
  border: 1px dashed #3d5bff; border-radius: .45em; background: rgb(61 91 255 / .06);
  font: 500 .8em/1 var(--ax-mono); color: #3d5bff; white-space: nowrap;
}
.axs-page__tag--ev::before { content: "● "; white-space: pre; }
.axs.is-link .axs-page__tag:not(.axs-page__tag--ev),
.axs.is-conv .axs-page__tag--ev { display: inline-flex; }
.axs-page__foot { display: grid; justify-items: center; gap: .6em; margin-top: 3em !important; padding-top: 1.6em; border-top: 1px solid var(--line); font-size: .85em; color: #8a7f83; text-align: center; }
.axs-page__links { display: flex; gap: 1.6em; font-weight: 600; color: #6b6266; }

/* the phone, after the device switch: one column, until it's fixed the
   offer box squeezed as it came */
.axs.is-mobile .axs-page { font-size: 9.4px; }
.axs.is-mobile .axs-page__head { padding: 0 1.8em; height: 4.4em; }
.axs.is-mobile .axs-page__nav { display: none; }
.axs.is-mobile .axs-page__art { padding: 2.2em 1.8em 2.6em; }
.axs.is-mobile .axs-page__h { font-size: 2.45em; }
.axs.is-mobile .axs-page__dek { font-size: 1.2em; }
.axs.is-mobile .axs-page__img { height: 17em; }
.axs.is-mobile .axs-page__reviews { grid-template-columns: minmax(0, 1fr); }
.axs.is-mobile .axs-page__offer { grid-template-columns: 9em minmax(0, 1fr) minmax(0, 8em); gap: 1em; padding: 1.2em; }
.axs.is-mobile .axs-page__pic { height: 9em; }
.axs.is-mobile .axs-page__ot { font-size: 1.6em; }
.axs.is-mobile .axs-page__btn { height: auto; min-height: 3.6em; padding: .6em .8em; white-space: normal; text-align: center; }
.axs.is-mobile .axs-page__go { justify-items: stretch; }
.axs.is-fixed .axs-page__offer { grid-template-columns: minmax(0, 1fr); gap: 1.3em; padding: 1.5em; }
.axs.is-fixed .axs-page__pic { height: 13em; }
.axs.is-fixed .axs-page__ot { font-size: 2em; }
.axs.is-fixed .axs-page__go { justify-items: start; }
.axs.is-fixed .axs-page__btn { white-space: nowrap; padding: 0 1.8em; height: 3.6em; }
.axs.is-fixed2 .axs-page__go { justify-items: stretch; }
.axs.is-fixed2 .axs-page__btn { height: 3.9em; }

/* the build: before its style the page is the AI's draft on the dark
   canvas, blue selection boxes, the copy raw in mono, no photos */
.axs.is-on:not(.is-layout) .axs-page { opacity: 0; }
.axs.is-on .axs-page { transition: translate .9s cubic-bezier(.65, 0, .35, 1), background-color .7s, font-size .8s cubic-bezier(.65, 0, .35, 1), opacity .4s; }
.axs.is-on:not(.is-style) .axs-page { background-color: transparent; }
.axs.is-on:not(.is-style) .axs-page :is([data-type], .axs-v2) {
  font-family: var(--ax-mono); font-weight: 400; font-style: normal; letter-spacing: 0;
  color: rgb(255 255 255 / .82); background: none; text-transform: none;
}
.axs.is-on:not(.is-style) .axs-page__ad,
.axs.is-on:not(.is-style) .axs-page__review,
.axs.is-on:not(.is-style) .axs-page__offer { background: transparent; }
.axs.is-on:not(.is-style) .axs-page :is(.axs-page__head, .axs-page__foot) { border-color: rgb(255 255 255 / .08); }
.axs.is-on:not(.is-style) .axs-page__offer { border-color: rgb(255 255 255 / .14); }
.axs.is-on:not(.is-style) .axs-page :is(.axs-page__logo i, .axs-page__logo b, .axs-page__nav b, .axs-page__by i, .axs-page__item > b, .axs-page__btn) { background: rgb(255 255 255 / .12); color: rgb(255 255 255 / .8); }
.axs.is-on:not(.is-style) .axs-page :is(.axs-page__img, .axs-page__pic) { background: rgb(255 255 255 / .04); }
.axs.is-on:not(.is-style) .axs-page__ticks > span::before { color: rgb(255 255 255 / .5); }
.axs.is-on .axs-page :is([data-type], .axs-page__logo i, .axs-page__logo b, .axs-page__by i, .axs-page__item > b, .axs-page__btn, .axs-page__ad, .axs-page__offer) {
  transition: color .6s, background-color .6s, border-color .6s;
}
.axs.is-on .axs-page img { opacity: 0; filter: blur(14px); scale: 1.08; transition: opacity .6s, filter 1s, scale 1s; }
.axs.is-on.is-media .axs-page img { opacity: 1; filter: none; scale: 1; }
.axs.is-on .axs-page [data-type].is-typing::after {
  content: ""; display: inline-block; width: .5em; height: 1em; margin-left: .1em; vertical-align: -.12em;
  background: #8ea0ff;
}
.axs.is-on .axs-page [data-b]::before,
.axs.is-on .axs-page [data-b]::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .4s;
}
.axs.is-on .axs-page [data-b]::after { inset: -.5em; border: 1px solid #3d5bff; border-radius: .3em; }
.axs.is-on .axs-page [data-b]::before {
  content: attr(data-b); left: -.5em; bottom: calc(100% + .5em);
  padding: .3em .5em; border-radius: .3em .3em 0 0;
  background: #3d5bff; color: #fff; font: 500 .72em/1 var(--ax-mono); white-space: nowrap;
}
.axs.is-on .axs-page__top[data-b]::after { inset: .4em .6em; }
.axs.is-on .axs-page__top[data-b]::before { left: .6em; bottom: auto; top: calc(100% - .4em); border-radius: 0 0 .3em .3em; }
.axs.is-on.is-layout:not(.is-style) .axs-page [data-b]:not(.axs-page__item)::before,
.axs.is-on.is-layout:not(.is-style) .axs-page [data-b]:not(.axs-page__item)::after,
.axs.is-on.is-pick-head .axs-page__intro::before,
.axs.is-on.is-pick-head .axs-page__intro::after,
.axs.is-on.is-pick-r3 .axs-page__item[data-b]::before,
.axs.is-on.is-pick-r3 .axs-page__item[data-b]::after { opacity: 1; }

/* the changes: a block arriving, the editor's dashed selection on what changed */
.axs.is-on:not(.is-reviews) .axs-page__reviews { display: none; }
.axs.is-on.is-reviews .axs-page__reviews { animation: axs-drop .6s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes axs-drop { from { opacity: 0; transform: translateY(-.8em); } }
.axs .is-edited { animation: axs-edit 2.2s ease both; border-radius: .3em; }
.axs .axs__q.is-edited { animation-name: axs-edit-dark; }
@keyframes axs-edit {
  0%, 55% { outline: 1.5px dashed #3d5bff; outline-offset: .3em; background-color: rgb(61 91 255 / .08); }
  100% { outline: 1.5px dashed transparent; outline-offset: .3em; background-color: transparent; }
}
@keyframes axs-edit-dark {
  0%, 55% { outline: 1px dashed #8ea0ff; outline-offset: 2px; }
  100% { outline: 1px dashed transparent; outline-offset: 2px; }
}
.axs-page__intro.is-edited, .axs-page__offer.is-edited, .axs-page__btn.is-edited { animation-name: axs-edit-box; }
@keyframes axs-edit-box {
  0%, 55% { outline: 1.5px dashed #3d5bff; outline-offset: .5em; }
  100% { outline: 1.5px dashed transparent; outline-offset: .5em; }
}

@media (prefers-reduced-motion: reduce) {
  .axs .is-edited, .axs.is-on.is-reviews .axs-page__reviews, .axs__thread .is-in { animation: none; }
  .axs-page, .axs__device, .axs.is-on .axs-page img { transition: none !important; }
}