/* aether (#aether, dark band): "Two Aether products, built in." Reference: the dark case-studies band.
   Two bordered cards spanning the frame, each with a big word, a live mini demo, body copy and a link. */
.aether > .ae-head { padding-bottom: 48px; }
.aether > .ae-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 0; padding-bottom: var(--pad); }

.ae-card { display: flex; flex-direction: column; min-width: 0; padding: 32px; background: var(--surface); border: 1px solid var(--line); transition: background .3s var(--ease); }
.ae-card + .ae-card { border-left: 0; }
.ae-card:hover { background: var(--surface-raised); }
.ae-kicker { display: inline-flex; align-items: center; gap: 9px; }
.ae-kicker .ic { width: 14px; height: 14px; color: var(--accent-text); }
.ae-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-top: 22px; }
.ae-stat strong { font: 500 clamp(44px, 4.3vw, 60px)/1 var(--f-body); letter-spacing: -0.035em; color: var(--fg); }
.ae-stat em { font-style: normal; font-size: 16px; color: var(--fg-2); }
.ae-body { margin-top: 22px; max-width: 470px; }
.ae-card .link { margin-top: 14px; align-self: flex-start; }

/* demo shell */
.ae-demo { position: relative; margin-top: 26px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.ae-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.ae-bar .label { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-bar__r { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.ae-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(31, 138, 91, .6); animation: ae-pulse 2.2s infinite; }
@keyframes ae-pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 201, 143, .55); } 70% { box-shadow: 0 0 0 7px rgba(76, 201, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 201, 143, 0); } }
.ae-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--accent-line); animation: caret 1s steps(1) infinite; }
.ae-caret.off { visibility: hidden; animation: none; }

/* LoopLM ask demo */
.ae-ask { min-height: 318px; display: flex; flex-direction: column; }
.ae-q { display: flex; align-items: center; gap: 12px; margin: 14px 14px 0; padding: 10px 10px 10px 12px; border: 1px solid var(--line-strong); background: var(--surface); }
.ae-q > .ic { width: 16px; height: 16px; color: var(--mist); }
.ae-q__t { flex: 1; min-width: 0; font: 400 12.5px/1.45 var(--f-mono); color: var(--fg); }
.ae-send { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: transform .15s var(--ease), background .15s var(--ease); }
.ae-send:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
.ae-send:active, .ae-send.is-press { transform: scale(.92); }
.ae-send .ic { width: 14px; height: 14px; }
.ae-a { position: relative; flex: 1; padding: 16px 14px 6px; min-height: 104px; }
.ae-a p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.ae-a p b { color: var(--fg); font-weight: 600; }
.ae-a p span { opacity: 0; transition: opacity .25s var(--ease); }
.ae-a p span.on { opacity: 1; }
.ae-think { position: absolute; left: 14px; top: 20px; display: inline-flex; gap: 5px; opacity: 0; transition: opacity .2s var(--ease); }
.ae-think.on { opacity: 1; }
.ae-think i { width: 5px; height: 5px; background: var(--mist); animation: ae-think 1s infinite; }
.ae-think i:nth-child(2) { animation-delay: .15s; }
.ae-think i:nth-child(3) { animation-delay: .3s; }
@keyframes ae-think { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ae-src { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; max-width: calc(100% - 28px); margin: 6px 14px 16px; padding: 8px 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: 500 11.5px/1.3 var(--f-mono); text-align: left; cursor: pointer; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .35s var(--ease), transform .45s var(--ease-out), border-color .15s var(--ease), background .15s var(--ease); }
.ae-src.on { opacity: 1; transform: none; pointer-events: auto; }
.ae-src:hover { border-color: var(--accent-line); }
.ae-src .ic { width: 15px; height: 15px; flex: none; color: var(--accent-text); }
.ae-src span { min-width: 0; }
.ae-src .ae-src__go { width: 13px; height: 13px; color: var(--mist); transition: transform .2s var(--ease-out); }
.ae-src:hover .ae-src__go { transform: translate(2px, -2px); color: var(--fg); }
/* source viewer overlay */
.ae-view { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: var(--bg); transform: translateY(102%); transition: transform .55s var(--ease-out); }
.ae-view.on { transform: none; }
.ae-view__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--line); flex: none; }
.ae-view__bar .label { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-x { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--mist); cursor: pointer; }
.ae-x:hover { color: var(--fg); }
.ae-x .ic { width: 15px; height: 15px; }
.ae-view__vp { position: relative; flex: 1; overflow: hidden; background: #e9e7e1; }
.ae-view__page { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform .9s var(--ease-out); }
.ae-view__page img { width: 100%; height: auto; }
.ae-hl { position: absolute; display: block; background: rgba(242, 184, 75, 0.55); mix-blend-mode: multiply; transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease-out); }
.ae-view.lit .ae-hl { transform: scaleX(1); }
.ae-view.lit .ae-hl:nth-of-type(2) { transition-delay: .12s; }
.ae-view.lit .ae-hl:nth-of-type(3) { transition-delay: .24s; }
.ae-view.lit .ae-hl:nth-of-type(4) { transition-delay: .36s; }

/* Sift-OCR scan demo */
.ae-scan { display: flex; flex-direction: column; min-height: 318px; }
.ae-bar__file { min-width: 0; }
.ae-tag { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 7px; border: 1px solid currentColor; color: var(--ok-text); font: 500 10px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.ae-tag .ic { width: 11px; height: 11px; stroke-width: 2; }
.ae-tag.on { opacity: 1; transform: none; }
.ae-scan__vp { position: relative; height: 200px; overflow: hidden; background: #e7e4dc; flex: none; }
.ae-scan__page { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 1s var(--ease-out); }
.ae-scan__page img { width: 100%; height: auto; filter: contrast(1.02); }
.ae-boxes { position: absolute; inset: 0; }
.ae-boxes i { position: absolute; display: block; border: 1px solid rgba(47, 111, 192, 0.7); background: rgba(47, 111, 192, 0.06); opacity: 0; transition: opacity .25s var(--ease); }
.ae-boxes i.on { opacity: 1; }
.ae-scan.found .ae-boxes i { opacity: .28; }
.ae-match { position: absolute; display: block; background: rgba(242, 184, 75, 0.55); outline: 1.5px solid #D9952A; mix-blend-mode: multiply; opacity: 0; transform: scale(1.4); transition: opacity .3s var(--ease), transform .5s var(--ease-out), left .4s var(--ease-out), top .4s var(--ease-out), width .4s var(--ease-out), height .4s var(--ease-out); }
.ae-match.on { opacity: 1; transform: none; }
.ae-sweep { position: absolute; left: 0; right: 0; top: 0; height: 64px; margin-top: -64px; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(234, 51, 35, 0) 0%, rgba(234, 51, 35, 0.12) 85%, rgba(234, 51, 35, 0.22) 100%); border-bottom: 2px solid var(--accent-line); box-shadow: 0 2px 10px rgba(234, 51, 35, 0.35); }
.ae-sweep.on { opacity: 1; }
.ae-find { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); }
.ae-find__in { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font: 400 12.5px/1 var(--f-mono); color: var(--fg); }
.ae-find__in .ic { width: 15px; height: 15px; color: var(--mist); flex: none; }
.ae-find__res { flex: none; font-size: 10.5px; color: var(--ok-text); opacity: 0; transition: opacity .3s var(--ease); }
.ae-find__res.on { opacity: 1; }
.ae-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.ae-chip { padding: 6px 9px; border: 1px solid var(--line-strong); background: transparent; color: var(--mist); font: 500 11px/1 var(--f-mono); cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.ae-chip:hover { color: var(--fg); border-color: var(--fg); }
.ae-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

@media (max-width: 900px) {
  .aether > .ae-grid { grid-template-columns: minmax(0, 1fr); }
  .ae-card + .ae-card { border-left: 1px solid var(--line); border-top: 0; }
}
@media (max-width: 520px) {
  .aether > .ae-head { padding-bottom: 32px; }
  .ae-card { padding: 22px 16px 26px; }
  .ae-demo { margin-left: -4px; margin-right: -4px; }
  .ae-bar__r { display: none; }
  .ae-bar__file { font-size: 9.5px !important; }
  .ae-scan__vp { height: 190px; }
}