/* ── Aether hero ───────────────────────────────────────────────────────────
   A live recreation of the plugin's ask sheet, played on a loop in place of a
   video: the note lays back, a progressive blur comes up from the bottom, the
   question types in, and the answer arrives last line first with the blur
   rising behind it.

   It is the plugin's own technique at a smaller size, so the same rules hold:
     1. No ancestor of a backdrop-filter may have opacity < 1, a filter or a
        mask - any of those makes it a backdrop root and the blurs go dead.
        The stage and the veil are never faded; their children are.
     2. The blur layers are siblings, never nested.
     3. backdrop-filter is never transitioned - the layers' opacity is.

   The pictured app is Obsidian's dark theme in both site themes, the way a
   screenshot would be. Only the frame follows the page.

   It is shot like a product film: the Obsidian window floats on Aether's
   lavender canvas, and a camera (.ah-camera) cuts in close, pulls back to the
   whole window, and pushes in on the moment that matters. The camera is a
   transform on an ancestor of the blurs, which is safe - transform, unlike
   opacity or filter, does not make a backdrop root. */

.aether-hero {
  /* the app */
  --ah-bg: #1e1e1e;
  --ah-bg-2: #262626;
  --ah-bg-3: #181818;
  --ah-border: #363636;
  --ah-text: #dadada;
  --ah-muted: #a3a3a3;
  --ah-faint: #6b6b6b;
  --ah-hover: rgba(255, 255, 255, 0.075);
  --ah-accent: hsl(254, 80%, 72%);
  --ah-code: #2a2a2a;

  /* the sheet */
  --ah-width: min(540px, 88%);
  --ah-bar: 40px;
  --ah-lift: 22px;
  --ah-spread: 118px;
  --ah-ramp: 110px;
  --ah-dim: rgba(0, 0, 0, 0.58);
  --ah-tilt: 4deg;
  /* scaled with the window: the same lean on a real-size screen */
  --ah-depth: 1300px;

  /* Timing. The plugin itself is quicker (200 in, 150 out, a 120 fade): at
     those speeds a film reads as snapping, since nobody watching is waiting
     on it the way someone using it is, so each is let run a little longer. */
  --ah-in: 280ms;
  --ah-hold: 200ms;
  --ah-bar-fade: 200ms;
  --ah-out: 220ms;
  --ah-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ah-wave: cubic-bezier(0.22, 1, 0.36, 1);

  /* the canvas the window floats on: the lavender Aether wears everywhere */
  --ah-canvas: #e3d5f0;
  --ah-canvas-ink: #2e2438;
  /* The window is built at a real desktop size, with Obsidian's own
     proportions and type sizes, and the camera scales it down to fit with
     room all round - a real screen, not a mock squeezed into the frame. */
  --ah-win-w: 1280px;
  --ah-win-h: 760px;

  --ah-cap-h: 46px;

  position: relative;
  /* the same wide proportions at every width, caption line included, so the
     window never floats in a tall block of empty sky */
  height: auto;
  aspect-ratio: 1054 / 586;
  min-height: 0;
  margin: 0 0 28px;
  padding: 0;
  border: 1px solid var(--border);
  font-family: Inter, Arial, sans-serif;
}

.ah-stage {
  position: absolute;
  inset: 0 0 var(--ah-cap-h) 0;
  overflow: hidden;
  background: var(--ah-canvas);
  container-type: inline-size;
  opacity: 1; /* rule 1 */
  /* it's a film, not a page: nothing in it can be selected, dragged or
     hovered, the same as a video. Clicks fall through to whatever holds it. */
  pointer-events: none;
}

.aether-hero,
.aether-hero * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Everything the camera films. Origin at the top left so a shot is just
   translate + scale, computed from the target's box. */
.ah-camera {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

/* The sky: a living mesh gradient behind the window. Soft blobs of violet,
   pink, peach and blue drift and breathe over the lavender on out-of-step
   loops, with a sheet of light sweeping across, so it never visibly
   repeats. Only transform and opacity animate, which the compositor handles
   on its own - the page does no work per frame for it.

   It sits behind the camera rather than in it, so when the camera pushes in
   on the window the sky stays put, like a backdrop a long way off. The dip
   between loops carries an identical copy, started in the same instant, so
   the title card sits on the same moving colour with no seam. */
.ah-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ah-canvas);
}

.ah-sky i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* Each blob drifts (transform) and breathes (opacity) on two different,
   out-of-step clocks, so the colour both moves and shifts and the pattern
   never visibly repeats. */
.ah-sky .b1 {
  width: 70%; height: 150%; left: -18%; top: -45%;
  background: radial-gradient(closest-side, rgba(160, 128, 242, 0.95), rgba(160, 128, 242, 0));
  animation: ah-drift-a 9s ease-in-out infinite alternate, ah-breathe 6s ease-in-out infinite alternate;
}

.ah-sky .b2 {
  width: 62%; height: 135%; right: -16%; top: -32%;
  background: radial-gradient(closest-side, rgba(246, 172, 214, 0.9), rgba(246, 172, 214, 0));
  animation: ah-drift-b 11s ease-in-out infinite alternate, ah-breathe 7.5s ease-in-out -3s infinite alternate;
}

.ah-sky .b3 {
  width: 60%; height: 130%; left: 20%; bottom: -62%;
  background: radial-gradient(closest-side, rgba(252, 206, 176, 0.9), rgba(252, 206, 176, 0));
  animation: ah-drift-c 13s ease-in-out infinite alternate, ah-breathe 8s ease-in-out -5s infinite alternate;
}

.ah-sky .b4 {
  width: 54%; height: 124%; right: -12%; bottom: -56%;
  background: radial-gradient(closest-side, rgba(166, 196, 252, 0.88), rgba(166, 196, 252, 0));
  animation: ah-drift-a 10s ease-in-out -4s infinite alternate-reverse, ah-breathe 6.5s ease-in-out -2s infinite alternate;
}

.ah-sky .b5 {
  width: 44%; height: 100%; left: 32%; top: -22%;
  background: radial-gradient(closest-side, rgba(214, 150, 236, 0.7), rgba(214, 150, 236, 0));
  animation: ah-drift-b 7s ease-in-out -2s infinite alternate-reverse, ah-breathe 5s ease-in-out -1s infinite alternate;
}

/* A soft sheet of light that sweeps across the whole canvas. */
.ah-sky .b6 {
  width: 55%; height: 170%; left: -55%; top: -35%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  animation: ah-sweep 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes ah-drift-a {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(32%, 16%) scale(1.3) rotate(24deg); }
  100% { transform: translate(-14%, 26%) scale(0.92) rotate(-14deg); }
}

@keyframes ah-drift-b {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-34%, 22%) scale(1.32) rotate(-22deg); }
  100% { transform: translate(-10%, -18%) scale(0.88) rotate(16deg); }
}

@keyframes ah-drift-c {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-34%, -26%) scale(1.28); }
  100% { transform: translate(26%, -12%) scale(1.06); }
}

@keyframes ah-breathe {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

@keyframes ah-sweep {
  0%   { transform: translateX(0) rotate(-12deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(380%) rotate(-12deg); opacity: 0; }
}

/* grain, so the colour reads as a surface rather than a fill */
.ah-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.55 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The Obsidian window, floating. overflow:hidden and a radius clip it, which
   is not one of the backdrop-root triggers. */
.ah-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ah-win-w);
  height: var(--ah-win-h);
  overflow: hidden;
  border-radius: 14px;
  background: #0c0c0c;
  box-shadow:
    0 0 0 1px rgba(46, 36, 56, 0.18),
    0 32px 80px -12px rgba(46, 36, 56, 0.55),
    0 10px 24px -8px rgba(46, 36, 56, 0.35);
}

/* The cut between loops: a fade to the sky and back - it holds its own copy
   of the sky. Above the camera as a sibling, never an ancestor of the blurs. */
.ah-dip {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--ah-canvas);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.is-dipped .ah-dip { opacity: 1; transition-duration: 380ms; }

/* Set up a shot's starting state without animating into it. */
.is-instant,
.is-instant * { transition: none !important; }

/* ------------------------------------------------------------- the app -- */
.ah-app {
  position: absolute;
  inset: 0;
  display: flex;
  background: var(--ah-bg);
  color: var(--ah-text);
  font-size: 14px;
  transform-origin: 50% 0;
  transform: perspective(var(--ah-depth)) rotateX(0deg);
  transition: transform var(--ah-in) var(--ah-ease);
}

.is-open .ah-app {
  transform: perspective(var(--ah-depth)) rotateX(calc(var(--ah-tilt) * -1));
}

.is-closing .ah-app {
  transform: perspective(var(--ah-depth)) rotateX(0deg);
  transition: transform var(--ah-in) var(--ah-ease) 60ms;
}

.ah-ribbon {
  flex: 0 0 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 52px;
  background: var(--ah-bg-3);
  border-right: 1px solid var(--ah-border);
}

.ah-ribbon i {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ah-faint);
  border-radius: 3px;
}

.ah-ribbon i:nth-child(2) { border-radius: 50%; }
.ah-ribbon i:nth-child(3) { transform: rotate(45deg) scale(0.85); }

.ah-sidebar {
  flex: 0 0 260px;
  padding: 52px 12px 16px;
  background: var(--ah-bg-2);
  border-right: 1px solid var(--ah-border);
  font-size: 13.5px;
  overflow: hidden;
}

.ah-vault {
  margin: 0 0 12px 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ah-muted);
}

.ah-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ah-tree li {
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--ah-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ah-tree .is-folder {
  color: var(--ah-text);
}

.ah-tree .is-folder::before {
  content: '›';
  display: inline-block;
  width: 12px;
  transform: rotate(90deg);
  color: var(--ah-faint);
}

.ah-tree .is-closed::before { transform: none; }
.ah-tree .is-file { padding-left: 30px; }

.ah-tree .is-active {
  background: var(--ah-hover);
  color: var(--ah-text);
}

.ah-editor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ah-tabbar {
  flex: 0 0 42px;
  display: flex;
  align-items: flex-end;
  padding: 0 14px;
  background: var(--ah-bg-2);
  border-bottom: 1px solid var(--ah-border);
}

.ah-tab {
  padding: 9px 18px;
  border-radius: 7px 7px 0 0;
  background: var(--ah-bg);
  font-size: 13px;
}

/* the window's own controls, top right, as on Windows */
.ah-winctl {
  display: flex;
  align-self: center;
  gap: 22px;
  margin-left: auto;
  padding-right: 4px;
  color: var(--ah-faint);
  font-size: 12px;
  line-height: 1;
}

/* Obsidian's status bar: a small tab sitting on the bottom right corner */
.ah-status {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 16px;
  padding: 5px 14px;
  border: 1px solid var(--ah-border);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 7px;
  background: var(--ah-bg-2);
  color: var(--ah-faint);
  font-size: 12px;
}

/* Obsidian's readable line length, centred, at its default 16px */
.ah-note {
  flex: 1;
  box-sizing: border-box;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 56px 30px 0;
  font-size: 16px;
  line-height: 1.65;
  overflow: hidden;
}

.ah-note h3 {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ah-text);
}

.ah-note h4 {
  margin: 30px 0 10px;
  font-size: 21px;
  font-weight: 650;
}

.ah-note p,
.ah-note ul {
  margin: 0 0 10px;
  color: var(--ah-text);
}

.ah-note ul { padding-left: 20px; }
.ah-note a { color: var(--ah-accent); text-decoration: none; }

.ah-note pre {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--ah-code);
  font: 14px/1.55 var(--mono-font, Consolas, 'SF Mono', monospace);
  color: #e0e0e0;
  overflow: hidden;
}

.ah-note code {
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--ah-code);
  font: 0.88em var(--mono-font, Consolas, 'SF Mono', monospace);
}

.ah-note .k { color: #c792ea; }
.ah-note .s { color: #c3e88d; }
.ah-note .n { color: #f78c6c; }
.ah-note .c { color: #697098; }

/* The hold-space cue, sitting where the bar will arrive. Its fill runs for as
   long as the hold does, then it gives way to the sheet. */
.ah-hold {
  position: absolute;
  left: 50%;
  bottom: calc(var(--ah-lift) + 10px);
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--ah-muted);
  opacity: 1;
  transition: opacity 160ms ease;
}

.ah-hold kbd {
  position: relative;
  overflow: hidden;
  padding: 3px 26px;
  border: 1px solid var(--ah-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--ah-bg-2);
  font: 11px Inter, Arial, sans-serif;
  color: var(--ah-text);
}

.ah-hold kbd::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--ah-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.is-holding .ah-hold kbd::after {
  transform: scaleX(1);
  transition: transform var(--ah-hold-fill, 560ms) linear;
}

.is-holding .ah-hold kbd { transform: translateY(1px); border-bottom-width: 1px; }
.is-open .ah-hold,
.is-inserted .ah-hold { opacity: 0; transition-duration: 100ms; }

/* ----------------------------------------------------------- the veil --- */
.ah-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1; /* rule 1 */
}

.ah-blur,
.ah-dim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ah-spread);
  opacity: 0;
  transition: opacity var(--ah-in) ease;
}

.is-open .ah-blur,
.is-open .ah-dim { opacity: 1; }

.is-closing .ah-blur { opacity: 0; transition: opacity calc(var(--ah-out) * 0.85) ease; }
.is-closing .ah-dim { opacity: 0; transition: opacity var(--ah-out) ease; }

/* Each layer fades out only across a stretch where the next, weaker one is
   already fully opaque beneath it - so the visible result is a continuous
   crossfade from one strength into the next, and some layer is always solid,
   so the sharp note never leaks through. The windows above the answer are in
   px (the ramp), the ones behind it in fractions of the answer's height. */
.ah-blur.s1 {
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  mask-image: linear-gradient(to top, transparent calc(100% - var(--ah-ramp) * 0.75), #000 calc(100% - var(--ah-ramp) * 0.5), #000 calc(100% - var(--ah-ramp) * 0.25), transparent 100%);
  -webkit-mask-image: linear-gradient(to top, transparent calc(100% - var(--ah-ramp) * 0.75), #000 calc(100% - var(--ah-ramp) * 0.5), #000 calc(100% - var(--ah-ramp) * 0.25), transparent 100%);
}

.ah-blur.s2 {
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  mask-image: linear-gradient(to top, transparent calc(100% - var(--ah-ramp)), #000 calc(100% - var(--ah-ramp) * 0.75), #000 calc(100% - var(--ah-ramp) * 0.5), transparent calc(100% - var(--ah-ramp) * 0.25));
  -webkit-mask-image: linear-gradient(to top, transparent calc(100% - var(--ah-ramp)), #000 calc(100% - var(--ah-ramp) * 0.75), #000 calc(100% - var(--ah-ramp) * 0.5), transparent calc(100% - var(--ah-ramp) * 0.25));
}

.ah-blur.s3 {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  mask-image: linear-gradient(to top, transparent calc((100% - var(--ah-ramp)) * 0.72), #000 calc(100% - var(--ah-ramp)), #000 calc(100% - var(--ah-ramp) * 0.75), transparent calc(100% - var(--ah-ramp) * 0.5));
  -webkit-mask-image: linear-gradient(to top, transparent calc((100% - var(--ah-ramp)) * 0.72), #000 calc(100% - var(--ah-ramp)), #000 calc(100% - var(--ah-ramp) * 0.75), transparent calc(100% - var(--ah-ramp) * 0.5));
}

.ah-blur.s4 {
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(5.5px);
  mask-image: linear-gradient(to top, transparent calc((100% - var(--ah-ramp)) * 0.4), #000 calc((100% - var(--ah-ramp)) * 0.72), #000 calc(100% - var(--ah-ramp)), transparent calc(100% - var(--ah-ramp) * 0.75));
  -webkit-mask-image: linear-gradient(to top, transparent calc((100% - var(--ah-ramp)) * 0.4), #000 calc((100% - var(--ah-ramp)) * 0.72), #000 calc(100% - var(--ah-ramp)), transparent calc(100% - var(--ah-ramp) * 0.75));
}

.ah-blur.s5 {
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  mask-image: linear-gradient(to top, transparent 0%, #000 calc((100% - var(--ah-ramp)) * 0.4), #000 calc((100% - var(--ah-ramp)) * 0.72), transparent calc(100% - var(--ah-ramp)));
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 calc((100% - var(--ah-ramp)) * 0.4), #000 calc((100% - var(--ah-ramp)) * 0.72), transparent calc(100% - var(--ah-ramp)));
}

.ah-blur.s6 {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  mask-image: linear-gradient(to top, #000 0%, #000 calc((100% - var(--ah-ramp)) * 0.4), transparent calc((100% - var(--ah-ramp)) * 0.72));
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 calc((100% - var(--ah-ramp)) * 0.4), transparent calc((100% - var(--ah-ramp)) * 0.72));
}

.ah-dim {
  background: var(--ah-dim);
  mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.957) 8.75%, rgba(0, 0, 0, 0.844) 17.5%,
    rgba(0, 0, 0, 0.684) 26.25%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.316) 43.75%,
    rgba(0, 0, 0, 0.156) 52.5%, rgba(0, 0, 0, 0.043) 61.25%, rgba(0, 0, 0, 0) 70%);
  -webkit-mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.957) 8.75%, rgba(0, 0, 0, 0.844) 17.5%,
    rgba(0, 0, 0, 0.684) 26.25%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.316) 43.75%,
    rgba(0, 0, 0, 0.156) 52.5%, rgba(0, 0, 0, 0.043) 61.25%, rgba(0, 0, 0, 0) 70%);
}

/* ------------------------------------------------------------- the bar -- */
.ah-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--ah-lift);
  width: var(--ah-width);
  height: var(--ah-bar);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  box-sizing: border-box;
  background: var(--ah-bg);
  border: 1px solid var(--ah-border);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.18);
  color: var(--ah-text);
  font-size: 14px;
  transform: translateY(14px);
  opacity: 0;
  transition:
    transform var(--ah-out) ease-in,
    opacity var(--ah-out) ease-in;
}

.is-open .ah-bar {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 320ms var(--ah-ease) var(--ah-hold),
    opacity var(--ah-bar-fade) ease var(--ah-hold);
}

.is-closing .ah-bar {
  transform: translateY(14px);
  opacity: 0;
  transition:
    transform var(--ah-out) ease-in,
    opacity var(--ah-out) ease-in;
}

.ah-icon {
  /* The bar centres boxes, but type does not sit in the middle of its own
     line box: its letters hang about a pixel and a half below it. At the
     size of the type that shows, so the mark and the send button are set
     down onto the middle of the letters. */
  position: relative;
  top: 1px;
  display: flex;
  flex-shrink: 0;
  color: var(--ah-faint);
  transition: color 200ms ease;
}

/* the size of the type beside it, so the mark reads as part of the line */
.ah-icon svg { width: 1em; height: 1em; }

/* Send, at the right end of the bar. Dim until there is something to send,
   pressed on Enter, and while the vault is read it carries the wait - a ring
   running round it - so the icon on the left stays still. */
.ah-send {
  position: relative;
  top: 0.5px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  /* a little over the type size: the arrow inside is the height of a capital */
  width: 16px;
  height: 16px;
  margin-right: -2px;
  border-radius: 50%;
  background: #2c2c2c;
  color: var(--ah-faint);
  transition: background-color 180ms ease, color 180ms ease, transform 140ms ease;
}

/* an even 3px of circle on every side: an odd difference leaves the arrow
   half a pixel off centre, and the browser picks a side */
.ah-send svg {
  display: block;
  width: 10px;
  height: 10px;
  /* an up arrow carries its weight in its head: centred by its box it reads
     as sitting high, so it is set down by the difference */
  transform: translateY(0.6px);
}

.has-text .ah-send {
  background: var(--ah-text);
  color: #1b1b1b;
}

.is-sending .ah-send { transform: scale(0.84); }

.is-busy .ah-send {
  background: #3a3a3a;
  color: var(--ah-text);
}

.ah-send::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 1.5px solid transparent;
  border-top-color: var(--ah-text);
  border-right-color: rgba(218, 218, 218, 0.35);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 160ms ease;
}

.is-busy .ah-send::after {
  opacity: 1;
  animation: ah-spin 800ms linear infinite;
}

@keyframes ah-spin { to { transform: rotate(360deg); } }

.ah-input {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.ah-placeholder { color: var(--ah-faint); }
.has-text .ah-placeholder { display: none; }

.ah-caret {
  display: inline-block;
  width: 1px;
  height: 16px;
  margin-left: 1px;
  vertical-align: -3px;
  background: var(--ah-text);
  animation: ah-blink 1s steps(1) infinite;
}

.is-typing .ah-caret { animation: none; }
.is-busy .ah-caret { opacity: 0; animation: none; }

@keyframes ah-blink { 50% { opacity: 0; } }

/* Key hints, hung in the gap under the bar and centred in it. */
.ah-actions {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  height: var(--ah-lift);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 9.5px;
  line-height: 1;
  color: var(--ah-faint);
  white-space: nowrap;
  visibility: hidden;
}

.ah-actions span { display: flex; align-items: center; gap: 3px; }

.ah-actions kbd {
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--ah-border);
  color: var(--ah-muted);
  font: 0.9em var(--mono-font, Consolas, 'SF Mono', monospace);
}

/* -------------------------------------------------------- the response -- */
/* On the blur, no panel. Bottom-anchored to the bar so it grows upward. */
.ah-response {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--ah-lift) + var(--ah-bar) + 10px);
  width: var(--ah-width);
  margin: 0 auto;
  /* no side padding: the answer and its sources run edge to edge with the
     bar under them, so the two read as one column */
  padding: 0;
  box-sizing: border-box;
  color: var(--ah-text);
  visibility: hidden;
  transition:
    transform var(--ah-out) ease-in,
    opacity calc(var(--ah-out) * 0.7) ease-in;
}

.is-answered .ah-response,
.is-answered .ah-actions { visibility: visible; }

.is-closing .ah-response { transform: translateY(6px); opacity: 0; }

.ah-answer {
  font-size: 16px;
  line-height: 1.55;
}

.ah-word { display: inline-block; }

.ah-answer code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--ah-code);
  font: 0.86em var(--mono-font, Consolas, 'SF Mono', monospace);
}

.ah-cite {
  display: inline-block;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--ah-hover);
  color: var(--ah-accent);
  font-size: 10px;
  line-height: 1.5;
  vertical-align: super;
}

.ah-sources {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 9px;
  overflow: hidden;
}

.ah-source {
  flex-shrink: 0;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: #2c2c2c;
  color: var(--ah-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.ah-source.is-current { border-color: var(--ah-accent); }

/* The wave: every word on a visual line shares a delay, last line first. */
.is-waving .ah-word,
.is-waving .ah-sources,
.is-waving .ah-actions {
  animation: ah-word-in 520ms var(--ah-wave) both;
}

.is-waving .ah-sources,
.is-waving .ah-actions { animation-duration: 460ms; }

@keyframes ah-word-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------- replay ----- */
/* Stop / Play, in the film's corner. Always there (a film that loops needs a
   way to stop it that does not depend on finding it by hovering), quiet until
   it is pointed at, and 24px tall so it can be hit. */
.ah-control {
  position: absolute;
  bottom: calc(var(--ah-cap-h) + 10px);
  right: 12px;
  z-index: 6;
  min-width: 44px;
  min-height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: rgba(24, 24, 24, 0.82);
  color: #dadada;
  font: 10px Inter, Arial, sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 160ms ease;
}

.aether-hero:hover .ah-control,
.ah-control:hover,
.ah-control:focus-visible { opacity: 1; }

.ah-control:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }


@media (max-width: 640px) {
  /* A frame shaped to the window, so it isn't lost in empty sky; and the
     caption may wrap to two lines rather than being cut off. */
  .aether-hero { --ah-cap-h: 58px; aspect-ratio: auto; height: calc(64vw + var(--ah-cap-h)); }
  .aether-hero .ah-figcap { font-size: 12px; line-height: 1.35; }
  .aether-hero .ah-figcap-text { white-space: normal; }
}

/* Reduced motion: the answered state, held still. The script also skips the
   loop, so nothing moves at all. */
@media (prefers-reduced-motion: reduce) {
  .aether-hero *,
  .aether-hero *::after { transition: none !important; animation: none !important; }
}

/* ─────────────────────────────────────────────────────── the story ───── */

/* The draft: a date line, and the cursor waiting under "Retries". */
.ah-note .ah-meta {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ah-faint);
}

.ah-note .ah-line { min-height: 1.6em; }

.ah-note-caret {
  display: inline-block;
  width: 2px;
  height: 20px;
  vertical-align: -3px;
  background: var(--ah-accent);
  animation: ah-blink 1s steps(1) infinite;
}

.is-open .ah-note-caret { opacity: 0; animation: none; }

/* The answer, inserted as a callout. Collapsed by default via a 0fr row, so
   it can open to its natural height without a magic number. */
.ah-callout {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(6px);
  transition:
    grid-template-rows 420ms var(--ah-ease),
    opacity 260ms ease,
    transform 420ms var(--ah-wave);
}

.is-inserted .ah-callout {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 60ms;
}

.ah-callout-inner {
  min-height: 0;
  overflow: hidden;
}

.ah-callout-inner > :first-child { margin-top: 2px; }

.ah-callout-inner {
  border-left: 2px solid var(--ah-accent);
  border-radius: 4px;
  background: hsla(254, 80%, 72%, 0.09);
  padding: 0 12px;
}

.ah-callout-inner { transition: padding 420ms var(--ah-ease); }
.is-inserted .ah-callout-inner { padding: 12px 18px 4px; }

.ah-note .ah-callout p {
  margin: 0 0 8px;
  font-size: 15.5px;
  line-height: 1.6;
}

.ah-note .ah-callout-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ah-accent);
}

.ah-callout-icon {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.ah-note .ah-callout-src { color: var(--ah-muted); }

/* Ctrl+Enter, pressed. */
.ah-actions kbd { transition: background-color 120ms ease, color 120ms ease, transform 120ms ease; }

.is-pressed .ah-insert { color: var(--ah-text); }

.is-pressed .ah-insert kbd {
  background: var(--ah-accent);
  color: #111;
  transform: translateY(1px);
}

/* Captions: a line under the film, in the page's own type - like the
   caption under a video, never on top of the product. A step count, one
   sentence, and a hairline along the top edge that fills as the story goes. */
.ah-figcap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ah-cap-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font: 13px/1.4 Inter, Arial, sans-serif;
}

.ah-figcap::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: calc(var(--ah-progress, 0) * 100%);
  background: var(--text);
  transition: width 600ms var(--ah-ease);
}

.ah-figcap-num {
  flex-shrink: 0;
  font: 11px/1 var(--mono-font, Consolas, 'SF Mono', monospace);
  letter-spacing: 1px;
  opacity: 0.5;
}

.ah-figcap-num,
.ah-figcap-text {
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 260ms ease, transform 360ms var(--ah-wave);
}

.ah-figcap-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ah-figcap.is-shown .ah-figcap-text { opacity: 1; transform: none; }
.ah-figcap.is-shown .ah-figcap-num { opacity: 0.5; transform: none; }

.ah-figcap.is-swapping .ah-figcap-text {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 150ms ease, transform 150ms ease;
}

/* ────────────────────────────────────────────────────── card variant ─── */
/* The home page swatch. Laid out at a fixed 800 x 600 and scaled by the
   script, so it keeps its composition at every card width. */
.aether-hero[data-variant="card"] {
  /* the swatch's own width and shape size it; inside, the whole window sits
     on the gradient with room around it */
  --ah-width: min(540px, 88%);
  aspect-ratio: 530 / 397;
  height: auto;
  min-height: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  background: var(--ah-canvas) !important;
}

.aether-hero[data-variant="card"] .ah-stage {
  inset: auto;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

/* ───────────────────────────────────────────────────────── title card ── */
/* The opening shot: the name on the canvas. The atom is the same mark as the
   ask bar's icon, and it flies down into it on the way out. */
.ah-title {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  color: var(--ah-canvas-ink);
  visibility: hidden;
}

.is-title .ah-title { visibility: visible; }

.ah-title-row {
  display: flex;
  align-items: center;
  gap: 0.2em;
  font: 650 clamp(52px, 10.5cqw, 118px)/1 Inter, Arial, sans-serif;
  letter-spacing: -0.05em;
}

.ah-title-mark {
  display: flex;
  width: 0.74em;
  height: 0.74em;
  /* the same ink as the wordmark */
  color: var(--ah-canvas-ink);
  opacity: 0;
  transform: scale(0.55) rotate(-120deg);
  transition: opacity 500ms ease, transform 1000ms var(--ah-wave);
}

.ah-title-mark svg { width: 100%; height: 100%; }
.is-title .ah-title-mark { opacity: 1; transform: none; }

.ah-title-word {
  display: inline-flex;
  padding-right: 0.05em;
}

.ah-title-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.32em);
  filter: blur(10px);
  transition:
    opacity 600ms ease,
    transform 900ms var(--ah-wave),
    filter 700ms ease;
  transition-delay: calc(160ms + var(--i) * 65ms);
}

.is-title .ah-title-letter { opacity: 1; transform: none; filter: blur(0); }


.is-title-out .ah-title-word {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 260ms ease, transform 460ms var(--ah-ease);
}

/* the mark stands in for the icon until it lands */
.is-title .ah-icon { opacity: 0; }

/* The stand-in that flies from the title to the bar. Its box is animated, so
   it is always drawn at its real size; the title's own mark steps aside. */
.ah-flyer {
  position: absolute;
  z-index: 4;
  display: none;
  pointer-events: none;
}

.ah-flyer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.is-flying .ah-flyer { display: block; }
.is-flying .ah-title-mark { visibility: hidden; }

/* the crossfade at the end of the flight: the icon comes up as the mark goes */
.is-title.is-handover .ah-icon {
  opacity: 1;
  transition: opacity 200ms linear;
}

.ah-icon svg,
.ah-title-mark svg { overflow: visible; }

/* ─────────────────────────────────────────────── pulling the passages ── */
/* The retrieval step, shown in the app's own file tree rather than in a panel
   of its own: a light reads down every folder, the notes that answer the
   question stay lit, and a passage unfolds out of each. The cards are a
   visualisation of what the service does, never plugin UI. */
.ah-context {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ah-tree li {
  transition: background-color 260ms ease, color 260ms ease, opacity 300ms ease, box-shadow 260ms ease;
}

/* the reading light, passing over each row in turn */
.ah-tree li.is-read {
  background: hsla(254, 80%, 72%, 0.24);
  color: #fff;
  transition-duration: 70ms;
}

/* once found, the three sources stay lit and everything else steps back */
.is-found .ah-tree li:not(.is-source) { opacity: 0.4; }

.ah-tree li.is-source {
  background: hsla(254, 80%, 72%, 0.16);
  box-shadow: inset 2px 0 0 var(--ah-accent);
  color: #fff;
}

/* A passage, unfolded out of its file. Its content is laid out at the card's
   final width and the box opens around it, so nothing re-wraps. */
.ah-pass {
  position: absolute;
  z-index: 1;
  display: none;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(30, 28, 38, 0.97);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.8);
  transition: background-color 420ms ease, border-color 420ms ease;
}

.ah-pass.is-out { display: block; }

.ah-pass-in {
  box-sizing: border-box;
  padding: 10px 14px 11px;
}

.ah-pass-path {
  margin: 0 0 4px;
  font: 600 11px/1.3 Inter, Arial, sans-serif;
  letter-spacing: 0.3px;
  color: hsl(254, 80%, 80%);
  white-space: nowrap;
}

.ah-pass-text {
  margin: 0;
  font: 14px/1.45 Inter, Arial, sans-serif;
  color: var(--ah-text);
}

.ah-pass mark,
.ah-ghost mark {
  padding: 0 2px;
  border-radius: 3px;
  background: hsla(254, 80%, 72%, 0.3);
  color: #fff;
}

/* A match on its way to becoming a pill. Its box is animated, not scaled. */
.ah-ghost {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid transparent;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.ah-ghost.is-landed { opacity: 0; }

.ah-ghost-from {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
}

.ah-ghost-to {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 9px;
  color: var(--ah-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

/* When the sources arrive by morph they don't also animate in: the pills
   wait, hidden, and take over from the ghosts in one short crossfade. */
.ah-sources.is-direct {
  animation: none !important;
  opacity: 0;
}

/* hidden at once, shown with a short fade - never the other way round */
.ah-sources.is-direct.is-landed { opacity: 1; transition: opacity 160ms ease; }

/* The home card is too small for a caption line; the card's own text says
   what the project is. */
.aether-hero[data-variant="card"] { --ah-cap-h: 0px; }
.aether-hero[data-variant="card"] .ah-figcap { display: none; }

/* ───────────────────────────────────────────────────── the WebGL sky ─── */
/* When the shader is running it is the whole sky: the CSS blobs, their sweep
   and grain step aside (the shader carries its own grain), and the palette
   turns to Monopo's - black, with the title set light to read on it. */
.ah-sky-gl {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.has-gl .ah-sky-gl { display: block; }
.has-gl .ah-sky i,
.has-gl .ah-sky::after { display: none; }

.aether-hero.has-gl {
  --ah-canvas: #040406;
  --ah-canvas-ink: #f4f1ec;
}

/* on black, a lifted edge and a deeper shadow instead of the lavender one */
.has-gl .ah-frame {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 40px 90px -18px rgba(0, 0, 0, 0.85),
    0 12px 28px -10px rgba(0, 0, 0, 0.6);
}

/* a soft dark halo, so the light wordmark stays crisp even where it crosses
   the sky's pale icy rings (not on the mark: it hands over to the bar's icon,
   and a halo that vanished at take-off would be a pop).

   It is one shadow for the whole word, cast by an invisible copy of it that
   sits behind the letters. A text-shadow on the word itself is inherited by
   every letter, and since each letter is its own box, each one's shadow was
   painted over the letter before it - a grey smudge down the right-hand edge
   of every letter but the last. */
.has-gl .ah-title-word {
  position: relative;
  z-index: 0;
}

.has-gl .ah-title-word::before {
  content: attr(data-word);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: transparent;
  white-space: nowrap;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 700ms ease 260ms;
}

.has-gl.is-title .ah-title-word::before { opacity: 1; }

/* ─────────────────────────────────────────────────── insert as callout ── */
/* The answer on its way from the sheet into the note. Its box is animated,
   not scaled, so nothing in it is squashed; it is drawn in the answer's own
   type while its text is still showing. */
.ah-ins {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  color: var(--ah-text);
  transition: opacity 180ms ease;
}

.ah-ins.is-landed { opacity: 0; }

.ah-ins-from {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding: 0 14px;
}

.ah-ins-src {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 9px;
  overflow: hidden;
}

/* What the travelling answer turns into: the callout's content, set exactly
   as it sits in the note (same padding, type and colours), so that when it
   lands the real one can take over without anything shifting. The 20px on the
   left is the callout's 2px edge plus its 18px padding. */
.ah-ins-to {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding: 12px 18px 4px 20px;
}

.ah-ins-to p {
  margin: 0 0 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ah-text);
}

.ah-ins-to > :first-child { margin-top: 2px; }

.ah-ins-to .ah-callout-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ah-accent);
}

.ah-ins-to .ah-callout-src { color: var(--ah-muted); }
.ah-ins-to a { color: var(--ah-accent); }

/* The real callout makes room in the note beneath the travelling answer but
   stays unseen until it lands - two boxes on screen at once was the stutter.
   It then appears in one frame, under a stand-in that looks the same. */
.is-inserting .ah-callout { opacity: 0; }
.is-landed .ah-callout { transition: none; }

.is-landed .ah-callout-inner { animation: ah-land 900ms ease-out; }

@keyframes ah-land {
  from { box-shadow: 0 0 0 0 hsla(254, 80%, 72%, 0.45); }
  to   { box-shadow: 0 0 0 10px hsla(254, 80%, 72%, 0); }
}

/* ---------------------------------------------------------- scenes ----- */
/* One beat of the film on its own loop (data-scene, see aether-hero.js): no
   caption strip, and no margin of its own - the page places it. */
.aether-hero[data-scene] { --ah-cap-h: 0px; margin: 0; }
.aether-hero[data-scene] .ah-figcap { display: none; }

/* ------------------------------------------------------ the full window -- */
/* The case study's scenes draw Obsidian in full (.is-rich, see richApp() in
   aether-hero.js): icons in the ribbon, the file explorer's own header and a
   vault's worth of notes, a row of tabs, the view header, a long note, a
   second note, and Aether's chat panel. */
.is-rich .ah-ribbon {
  flex-basis: 44px;
  gap: 15px;
  padding: 12px 0 10px;
}

.is-rich .ah-ribbon svg { width: 17px; height: 17px; color: var(--ah-faint); }
.is-rich .ah-ribbon span { flex: 1; }

.is-rich .ah-sidebar {
  display: flex;
  flex-direction: column;
  padding: 0 8px 0;
  font-size: 13px;
}

.ah-side-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  height: 42px;
  align-items: center;
  margin: 0 -8px;
  border-bottom: 1px solid var(--ah-border);
}

.ah-side-tabs span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border-radius: 5px;
  color: var(--ah-faint);
}

.ah-side-tabs span.is-on { background: var(--ah-hover); color: var(--ah-text); }
.ah-side-tabs svg { width: 16px; height: 16px; }

.ah-side-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 11px 0 9px;
  color: var(--ah-faint);
}

.ah-side-actions svg { width: 15px; height: 15px; }

.is-rich .ah-tree { flex: 1; min-height: 0; overflow: hidden; }
.is-rich .ah-tree li { padding: 3px 8px; line-height: 1.5; }
.is-rich .ah-tree .is-file { padding-left: 26px; }
.is-rich .ah-tree .is-folder { font-weight: 500; }

.ah-vault-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -8px;
  padding: 9px 14px;
  border-top: 1px solid var(--ah-border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ah-muted);
}

.ah-vault-foot svg { width: 15px; height: 15px; color: var(--ah-faint); }

/* tabs */
.is-rich .ah-tabbar { gap: 2px; padding: 0 12px 0 8px; }

.is-rich .ah-tab {
  max-width: 190px;
  padding: 8px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ah-tab.is-idle { background: none; color: var(--ah-faint); }

.ah-tab-new {
  align-self: center;
  display: grid;
  place-items: center;
  width: 26px;
  color: var(--ah-faint);
}

.ah-tab-new svg { width: 15px; height: 15px; }
.ah-tab b { font-weight: 400; }

/* the two notes: only one is open at a time */
.ah-b { display: none; }
.is-note-b .ah-a { display: none; }
.is-note-b .ah-b { display: inline; }
.ah-note-b { display: none; }
.is-note-b .ah-note:not(.ah-note-b) { display: none; }
.is-note-b .ah-note-b { display: block; }

.ah-viewhead {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13px;
  color: var(--ah-faint);
}

.ah-viewhead svg { width: 16px; height: 16px; }
.ah-nav, .ah-viewicons { display: flex; gap: 12px; flex: 1; }
.ah-viewicons { justify-content: flex-end; }
.ah-crumb b { font-weight: 400; color: var(--ah-text); }

/* the note, at length */
.is-rich .ah-note { padding-top: 22px; line-height: 1.6; }
.is-rich .ah-note h3 { font-size: 29px; }
.is-rich .ah-note .ah-meta { margin-bottom: 14px; }
.is-rich .ah-note h4 { margin: 22px 0 8px; font-size: 20px; }
.is-rich .ah-note ul { padding-left: 24px; }
.is-rich .ah-note li { margin: 0 0 3px; }
.is-rich .ah-note li::marker { color: var(--ah-faint); }

.ah-tag {
  padding: 1px 8px;
  border-radius: 999px;
  background: hsla(254, 80%, 72%, 0.14);
  color: var(--ah-accent);
  font-size: 12.5px;
}

.ah-note ul.ah-tasks { list-style: none; padding-left: 4px; }

.ah-tasks li::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  vertical-align: -2px;
  border: 1.5px solid var(--ah-faint);
  border-radius: 4px;
  box-sizing: border-box;
}

.ah-tasks li.is-done { color: var(--ah-faint); text-decoration: line-through; }
.ah-tasks li.is-done::before { background: var(--ah-accent); border-color: var(--ah-accent); }

/* the passage the answer came from, picked out once its note opens */
.ah-note mark {
  padding: 1px 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  transition: background-color 700ms ease, box-shadow 700ms ease;
}

.is-lit .ah-note mark {
  background: hsla(254, 80%, 72%, 0.26);
  box-shadow: 0 0 0 3px hsla(254, 80%, 72%, 0.26);
}

/* the pointer */
.ah-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  margin: -3px 0 0 -5px;
  opacity: 0;
  z-index: 30;
  transition: transform 0ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.ah-cursor svg { display: block; width: 100%; height: 100%; transition: transform 120ms ease; }
.is-cursor .ah-cursor { opacity: 1; }
.is-click .ah-cursor svg { transform: scale(0.82); }
.ah-source.is-hit { background: #3d3d3d; color: var(--ah-text); }

/* "open in chat" lighting up as it is pressed */
.is-opt .ah-opt { color: var(--ah-text); }
.is-opt .ah-opt kbd { background: var(--ah-accent); color: #16131f; }

/* The rewrite flow: a passage picked out in the note, then worked on.
   Selected the ordinary way it takes the editor's own selection colour; once
   the sheet is open over it, it becomes what the bar is about - the accent,
   and a star at its top-left corner. */
.ah-sel {
  padding: 2px 0;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color 260ms ease;
}

.is-selected .ah-sel { background: rgba(126, 150, 204, 0.3); }
.is-selected.is-open .ah-sel,
.is-selected.is-landing .ah-sel { background: hsla(254, 80%, 72%, 0.46); }

/* Zero-sized, so it takes no room in the line: its bottom edge sits on the
   text baseline and the star is hung from there. */
.ah-star {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
}

.ah-star svg {
  position: absolute;
  left: -0.9em;
  bottom: 0.5em;
  width: 1.15em;
  height: 1.15em;
  /* the page caps every svg at its container's width, and this one's
     container is zero wide on purpose */
  max-width: none;
  fill: var(--ah-accent);
  opacity: 0;
  transform: scale(0.3) rotate(-45deg);
  transition: opacity 160ms ease, transform 160ms ease;
  filter: drop-shadow(0 0 2px var(--ah-bg));
}

.is-selected.is-open .ah-star svg,
.is-selected.is-landing .ah-star svg {
  opacity: 1;
  transform: none;
  transition: opacity 220ms ease var(--ah-hold), transform 420ms var(--ah-ease) var(--ah-hold);
}

/* what the sheet is working from, at the end of the bar */
.ah-chip {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 11px;
  background: #2c2c2c;
  color: var(--ah-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

/* the rewrite, as it lands in the passage's place: lit, then settling */
.ah-rw-new {
  padding: 2px 0;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: ah-rw-in 2000ms ease both;
}

@keyframes ah-rw-in {
  0%, 35% { background-color: hsla(254, 80%, 72%, 0.32); }
  100% { background-color: hsla(254, 80%, 72%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ah-rw-new { animation: none; }
}

/* Aether's chat panel, in the right sidebar */
.ah-chat {
  flex: 0 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ah-bg-2);
  border-left: 0 solid var(--ah-border);
  font-size: 14px;
  transition: flex-basis 420ms var(--ah-ease);
}

.is-chat .ah-chat { flex-basis: 360px; border-left-width: 1px; }
.ah-chat > * { width: 360px; box-sizing: border-box; }

.ah-chat-head {
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ah-border);
  font-size: 13px;
}

.ah-chat-head .ah-mark { width: 15px; height: 15px; color: var(--ah-accent); }
.ah-chat-head span { display: flex; gap: 12px; margin-left: auto; color: var(--ah-faint); }
.ah-chat-head span svg { width: 15px; height: 15px; }

.ah-chat-body { flex: 1; min-height: 0; padding: 18px 16px 0; overflow: hidden; }

.ah-chat-q {
  width: fit-content;
  max-width: 86%;
  margin: 0 0 14px auto;
  padding: 8px 12px;
  border-radius: 12px 12px 3px 12px;
  background: #343434;
  line-height: 1.45;
}

.ah-chat-a { margin: 0 0 20px; line-height: 1.55; }
.ah-chat-a p { margin: 0 0 9px; }

.ah-chat-a sup {
  display: inline-block;
  min-width: 14px;
  margin-left: 2px;
  padding: 0 3px;
  border-radius: 4px;
  background: hsla(254, 80%, 72%, 0.2);
  color: var(--ah-accent);
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  vertical-align: 0.4em;
}

.ah-chat-src { display: flex; flex-wrap: wrap; gap: 5px; }

.ah-chat-src span {
  padding: 2px 9px;
  border-radius: 999px;
  background: #2f2f2f;
  color: var(--ah-muted);
  font-size: 12px;
}

/* the follow-up and its answer arrive in turn */
.ah-chat-q2,
.ah-chat-a2 {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 420ms var(--ah-wave);
}

.is-chat-q2 .ah-chat-q2,
.is-chat-a2 .ah-chat-a2 { opacity: 1; transform: none; }

.ah-chat-in {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0 14px 42px;
  width: 332px;
  padding: 0 7px 0 13px;
  border: 1px solid var(--ah-border);
  border-radius: 11px;
  background: var(--ah-bg);
}

.ah-chat-typed:empty::before { content: 'Ask a follow-up...'; color: var(--ah-faint); }

.ah-chat-in i {
  width: 1.5px;
  height: 17px;
  background: var(--ah-text);
  animation: ah-blink 1s steps(1) infinite;
}

.ah-chat-typed:empty + i { display: none; }

.ah-chat-send {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: 50%;
  background: #2c2c2c;
  color: var(--ah-faint);
}

.ah-chat-send svg { width: 12px; height: 12px; }

/* the film inside a page slot: the slot's own shape, not the film's */
.aether-hero.cs-film { aspect-ratio: 16 / 9; height: auto; }

/* A film holds its place before it is built (they are built one per frame,
   see mountAll), so nothing below it moves when it arrives. */
.cs-film[data-aether-hero] { display: block; aspect-ratio: 16 / 9; }

/* over a note full of text the hold cue would sit on top of the writing, so
   it stays away until space is actually down, and arrives as a small chip */
.is-rich .ah-hold {
  opacity: 0;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--ah-border);
  border-radius: 9px;
  background: rgba(30, 30, 30, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: opacity 140ms ease;
}

.is-rich.is-holding .ah-hold { opacity: 1; }

/* a still frame of the product (data-still), or a film the reader has
   stopped: nothing in it moves */
.aether-hero[data-still] *,
.aether-hero[data-still] *::before,
.aether-hero[data-still] *::after,
.aether-hero.is-halted *,
.aether-hero.is-halted *::before,
.aether-hero.is-halted *::after { animation: none !important; }