/* Aside scene engine: the desktop, the stack, and the hold-Control capture. Sizes come from --u. */
@property --as-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.as-kit { --u: 10px; }
.as-frame { container-type: inline-size; width: 100%; max-width: 100%; }
.as-scene, .as-page, .as-kit {
  --ease: cubic-bezier(.32, .72, 0, 1);
  --pop: cubic-bezier(.34, 1.4, .64, 1);
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--sf); color: #f5f5f7; -webkit-font-smoothing: antialiased; line-height: 1.3; text-align: left;
}
.as-scene { --u: 1cqw; position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden; border-radius: calc(var(--u) * 1.4); background: #0b0d1c; isolation: isolate; user-select: none; -webkit-user-select: none; }
@container (max-width: 640px) {
  .as-scene { --u: 2.15cqw; aspect-ratio: 4 / 5; }
  .as-scene .as-win { left: -34%; width: 84%; top: 8%; height: 86%; }
  .as-scene .as-stack { width: 66%; right: 3%; top: 6.5%; }
  .as-scene .as-mb .as-menus, .as-scene .as-mb .as-date { display: none; }
  .as-scene .as-thumb { aspect-ratio: 4 / 5; width: calc(var(--u) * 6); }
}

/* desktop */
.as-wall { position: absolute; inset: -2%; background:
  radial-gradient(52% 64% at 16% 22%, #2d47c9 0%, transparent 62%),
  radial-gradient(46% 60% at 86% 80%, #6a2fb8 0%, transparent 60%),
  radial-gradient(40% 50% at 70% 10%, #0f7d9c 0%, transparent 60%),
  radial-gradient(50% 56% at 30% 100%, #b24a7a 0%, transparent 65%), #0b0d1c; }
.as-mb { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 2.2); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 1.3);
  font-size: calc(var(--u) * .95); color: rgba(255,255,255,.92); background: rgba(16,16,26,.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 2; }
.as-mb > div { display: flex; align-items: center; gap: calc(var(--u) * 1.3); }
.as-mb b { font-weight: 600; }
.as-menus { display: flex; gap: calc(var(--u) * 1.3); }

.as-win { position: absolute; left: 3.5%; top: 9%; width: 61%; height: 84%; border-radius: calc(var(--u) * 1); overflow: hidden; display: flex; flex-direction: column; background: #1a1d21; color: #d1d2d3;
  box-shadow: 0 calc(var(--u) * 2.4) calc(var(--u) * 6) rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); z-index: 1; }
.as-tb { height: calc(var(--u) * 2.6); flex: none; display: flex; align-items: center; gap: calc(var(--u) * .55); padding: 0 calc(var(--u) * 1); background: #121016; }
.as-tb i { width: calc(var(--u) * .8); height: calc(var(--u) * .8); border-radius: 50%; display: block; }
.as-tb span { margin: 0 auto; width: 46%; height: calc(var(--u) * 1.5); border-radius: calc(var(--u) * .4); background: rgba(255,255,255,.1); font-size: calc(var(--u) * .8); color: rgba(255,255,255,.5); display: flex; align-items: center; padding: 0 calc(var(--u) * .7); }
.as-body { flex: 1; display: flex; min-height: 0; }
.as-side { width: 25%; background: #121016; padding: calc(var(--u) * 1) calc(var(--u) * .7); display: flex; flex-direction: column; gap: calc(var(--u) * .25); font-size: calc(var(--u) * 1); color: rgba(255,255,255,.6); }
.as-side b { color: #fff; font-size: calc(var(--u) * 1.15); padding: 0 calc(var(--u) * .6) calc(var(--u) * .7); }
.as-side span { padding: calc(var(--u) * .3) calc(var(--u) * .6); border-radius: calc(var(--u) * .4); }
.as-side span.on { background: #1164a3; color: #fff; }
.as-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.as-hdr { height: calc(var(--u) * 3.2); flex: none; display: flex; align-items: center; padding: 0 calc(var(--u) * 1.4); border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 700; color: #fff; font-size: calc(var(--u) * 1.15); }
.as-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4); overflow: hidden; }
.as-msg { display: flex; gap: calc(var(--u) * .85); }
.as-av { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: calc(var(--u) * .5); flex: none; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--u) * 1); color: #fff; }
.as-nm { font-size: calc(var(--u) * 1); font-weight: 700; color: #fff; }
.as-nm small { font-weight: 400; font-size: calc(var(--u) * .78); color: rgba(255,255,255,.45); margin-left: calc(var(--u) * .5); }
.as-txt { font-size: calc(var(--u) * 1.08); line-height: 1.4; }
.as-att { margin-top: calc(var(--u) * .6); width: calc(var(--u) * 22); border-radius: calc(var(--u) * .6); overflow: hidden; background: #f4f4f6; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.as-att .bar { height: calc(var(--u) * 1.4); background: #e2e2e7; }
.as-att .pg { padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); color: #222; }
.as-att .pg b { font-size: calc(var(--u) * 1.1); }
.as-att .in { width: 80%; height: calc(var(--u) * 1.5); border-radius: calc(var(--u) * .35); background: #fff; box-shadow: inset 0 0 0 1px #d6d6dc; }
.as-att .err { width: 80%; padding: calc(var(--u) * .45) calc(var(--u) * .6); border-radius: calc(var(--u) * .35); background: #fde8e8; color: #c62828; font-size: calc(var(--u) * .72); font-weight: 600; }
.as-reply { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(calc(var(--u) * 1)); transition: grid-template-rows .7s var(--ease), opacity .5s .15s, transform .7s var(--ease); }
.as-reply > div { overflow: hidden; min-height: 0; }
.as-react { display: inline-flex; gap: calc(var(--u) * .3); margin-top: calc(var(--u) * .4); padding: calc(var(--u) * .15) calc(var(--u) * .55); border-radius: 999px; background: rgba(29,155,209,.18); box-shadow: inset 0 0 0 1px rgba(29,155,209,.6); font-size: calc(var(--u) * .8); color: #fff; }
.as-cmp { margin: 0 calc(var(--u) * 1.4) calc(var(--u) * 1.2); height: calc(var(--u) * 4); flex: none; border-radius: calc(var(--u) * .6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); padding: calc(var(--u) * .8) calc(var(--u) * 1); font-size: calc(var(--u) * 1); color: rgba(255,255,255,.4); }

/* the stack */
.as-stack { position: absolute; right: 2%; top: 7%; width: 31%; display: flex; flex-direction: column; z-index: 3; }
.as-pw { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .75s var(--ease), opacity .45s; }
.as-pw > .as-pi { overflow: hidden; min-height: 0; padding-bottom: calc(var(--u) * .65); }
.as-pw.shut { grid-template-rows: 0fr; opacity: 0; }
.as-pill { padding: calc(var(--u) * .95) calc(var(--u) * 1.05); border-radius: calc(var(--u) * 1.8); background: rgba(34,34,40,.72);
  backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 2.8) rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.12); transition: box-shadow .5s var(--ease), transform .6s var(--pop); }
.as-pill.ask { box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 2.8) rgba(0,0,0,.28), inset 0 0 0 1.5px rgba(255,159,10,.8), 0 0 0 calc(var(--u) * .35) rgba(255,159,10,.14); }
.as-pill.you { box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 2.8) rgba(0,0,0,.28), inset 0 0 0 1.5px rgba(176,102,255,.85), 0 0 0 calc(var(--u) * .35) rgba(176,102,255,.16); }
.as-r1 { display: flex; align-items: center; gap: calc(var(--u) * .85); }
.as-ico { width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: calc(var(--u) * .6); flex: none; display: block; overflow: hidden; box-shadow: 0 0 0 .5px rgba(255,255,255,.15); }
.as-ico svg { display: block; width: 100%; height: 100%; }
.as-tx { flex: 1; min-width: 0; }
.as-t { font-size: calc(var(--u) * 1.12); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-s { font-size: calc(var(--u) * .92); color: rgba(255,255,255,.62); margin-top: calc(var(--u) * .1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-s.wait { color: #ff9f0a; font-weight: 600; }
.as-st { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); flex: none; display: grid; place-items: center; }
.as-ok { width: 100%; height: 100%; border-radius: 50%; background: #30d158; display: grid; place-items: center; animation: as-pop .5s var(--pop); }
.as-ok svg { width: 60%; height: 60%; }
.as-spin { width: 88%; height: 88%; border-radius: 50%; border: calc(var(--u) * .15) solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.88); animation: as-spin 1s linear infinite; }
.as-wd { width: 55%; height: 55%; border-radius: 50%; background: #ff9f0a; animation: as-ping 1.6s ease-out infinite; }
.as-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .35s; }
.as-more > div { overflow: hidden; min-height: 0; }
.as-pill.ask .as-more { grid-template-rows: 1fr; opacity: 1; }
.as-q { padding-top: calc(var(--u) * .8); font-size: calc(var(--u) * 1.02); line-height: 1.38; color: rgba(255,255,255,.92); }
.as-btns { display: flex; gap: calc(var(--u) * .5); padding-top: calc(var(--u) * .75); }
.as-btns button { flex: 1; padding: calc(var(--u) * .62) 0; border: 0; border-radius: calc(var(--u) * .95); font: 600 calc(var(--u) * 1) var(--sf); color: #f5f5f7; background: rgba(255,255,255,.1); cursor: pointer; transition: transform .2s, background .2s; }
.as-btns button:hover { background: rgba(255,255,255,.16); }
.as-btns button:active { transform: scale(.96); }
.as-btns .yes { background: #f5f5f7; color: #111; }
.as-btns .yes:hover { background: #fff; }

/* composer (what you say while holding Control) */
.as-comp .as-hd { display: flex; align-items: center; gap: calc(var(--u) * .6); font-size: calc(var(--u) * .86); color: rgba(255,255,255,.62); font-weight: 600; }
.as-wave { display: flex; gap: calc(var(--u) * .18); align-items: center; height: calc(var(--u) * 1.4); margin-left: auto; }
.as-wave i { width: calc(var(--u) * .22); border-radius: 9px; background: linear-gradient(#8fb0ff, #ff8fbf); display: block; height: 30%; animation: as-wave 1s ease-in-out infinite; }
.as-wave i:nth-child(2) { animation-delay: -.2s; } .as-wave i:nth-child(3) { animation-delay: -.45s; } .as-wave i:nth-child(4) { animation-delay: -.7s; } .as-wave i:nth-child(5) { animation-delay: -.35s; } .as-wave i:nth-child(6) { animation-delay: -.6s; }
.as-said { margin-top: calc(var(--u) * .6); font-size: calc(var(--u) * 1.06); line-height: 1.38; min-height: calc(var(--u) * 4.4); }
.as-said .dim { color: rgba(255,255,255,.35); }
.as-cap { display: flex; align-items: center; gap: calc(var(--u) * .7); margin-top: calc(var(--u) * .7); }
.as-thumb { width: calc(var(--u) * 8.4); aspect-ratio: 16 / 10; border-radius: calc(var(--u) * .45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); background: rgba(255,255,255,.05); flex: none; }
.as-chip { font-size: calc(var(--u) * .82); padding: calc(var(--u) * .3) calc(var(--u) * .6); border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); opacity: 0; transform: translateY(calc(var(--u) * .4)); transition: opacity .4s .5s, transform .5s .5s var(--ease); white-space: nowrap; }

/* capture overlays */
.as-shot { position: absolute; inset: 0; z-index: 6; transform-origin: 0 0; opacity: 0; pointer-events: none; overflow: hidden; border-radius: inherit;
  transition: transform .95s var(--ease), opacity .3s, border-radius .95s var(--ease), box-shadow .95s; }
.as-flash { position: absolute; inset: 0; z-index: 7; background: #fff; opacity: 0; pointer-events: none; }
.as-glow { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); border-radius: inherit; }
.as-glow .ring { position: absolute; inset: 0; padding: calc(var(--u) * .5); border-radius: inherit;
  background: conic-gradient(from var(--as-a), #5b8cff, #b066ff, #ff5f9e, #ff9f4a, #5bd0ff, #5b8cff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(calc(var(--u) * .25)); animation: as-turn 4s linear infinite; }
.as-glow .soft { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 calc(var(--u) * 9) rgba(176,102,255,.42), inset 0 0 calc(var(--u) * 18) rgba(91,140,255,.22); }
.as-keys { position: absolute; left: 50%; bottom: 9%; z-index: 9; display: flex; gap: calc(var(--u) * .8); transform: translate(-50%, calc(var(--u) * 2)) scale(.9); opacity: 0; transition: opacity .4s, transform .6s var(--pop); }
.as-keys span { min-width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); padding: 0 calc(var(--u) * 1.1); border-radius: calc(var(--u) * 1); display: grid; place-items: center;
  background: linear-gradient(#fbfbfd, #e4e4ea); color: #1d1d1f; font-size: calc(var(--u) * 2); font-weight: 500; box-shadow: 0 calc(var(--u) * .35) 0 #b9b9c2, 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) rgba(0,0,0,.35); }
.as-keys span.hold { font-size: calc(var(--u) * 1.1); font-weight: 600; letter-spacing: .02em; transform: translateY(calc(var(--u) * .3)); box-shadow: 0 calc(var(--u) * .05) 0 #b9b9c2, 0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgba(0,0,0,.35); }

/* states */
.as-scene.s1 .as-glow, .as-scene.s2 .as-glow { opacity: 1; }
.as-scene.s1 .as-keys { opacity: 1; transform: translate(-50%, 0) scale(1); }
.as-scene.s2 .as-shot { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(var(--sc)); border-radius: calc(var(--u) * 4); box-shadow: 0 0 0 calc(var(--u) * .5) rgba(255,255,255,.6); }
.as-scene.s3 .as-shot, .as-scene.s4 .as-shot, .as-scene.s5 .as-shot { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(var(--sc)); border-radius: calc(var(--u) * 4); }
.as-btns .yes.press { animation: as-press .45s var(--ease); }
.as-scene.s2 .as-flash { animation: as-flash .55s ease-out; }
.as-scene.s2 .as-chip { opacity: 1; transform: none; }
.as-scene.s5 .as-reply { grid-template-rows: 1fr; opacity: 1; transform: none; }

@keyframes as-spin { to { transform: rotate(360deg); } }
@keyframes as-turn { to { --as-a: 360deg; } }
@keyframes as-ping { 0% { box-shadow: 0 0 0 0 rgba(255,159,10,.55); } 80%, 100% { box-shadow: 0 0 0 calc(var(--u) * .7) rgba(255,159,10,0); } }
@keyframes as-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes as-wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@keyframes as-press { 40% { transform: scale(.92); background: #fff; } }
@keyframes as-flash { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } }
@keyframes as-in { from { opacity: 0; transform: translateY(calc(var(--u) * 1.6)) scale(.96); } }
.as-scene.intro .as-stack .as-pw:not(.shut) { animation: as-in .9s var(--ease) backwards; }
.as-scene.intro .as-stack .as-pw:nth-child(3) { animation-delay: .15s; }
.as-scene.intro .as-stack .as-pw:nth-child(4) { animation-delay: .3s; }
.as-scene.intro .as-stack .as-pw:nth-child(5) { animation-delay: .45s; }

/* on flat cards there is nothing to blur; a solid fill avoids the backdrop seam */
.as-kit .as-pill { backdrop-filter: none; -webkit-backdrop-filter: none; background: #26262c; }

/* hold Control anywhere on the page */
.as-page { --u: 11px; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.as-page .as-glow { position: fixed; border-radius: 0; }
.as-page .as-glow .ring { padding: 7px; border-radius: 0; filter: blur(3px); }
.as-page.on .as-glow { opacity: 1; }
.as-page .as-flash { position: fixed; }
.as-page .as-flash.go { animation: as-flash .55s ease-out; }
.as-page .as-dock { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); width: min(360px, calc(100vw - 28px)); pointer-events: auto; }
.as-page .as-pw > .as-pi { padding-bottom: 0; }
.as-page .as-shot { position: fixed; inset: auto; left: 0; top: 0; width: 100vw; height: 100vh; border-radius: 0; background: var(--as-bg, #000); }
.as-page .as-shot.fly { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(var(--sc)); border-radius: 60px; box-shadow: 0 0 0 4px rgba(255,255,255,.6); }
.as-page .as-shot.gone { opacity: 0; transition: opacity .25s; }
.as-page .as-chip.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .as-scene *, .as-page * { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* "Too noisy? Collapse them." A looping clip of the stack folding into one pill. */
.as-cdf { container-type: inline-size; --ease: cubic-bezier(.32,.72,0,1); --pop: cubic-bezier(.34,1.4,.64,1); --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 4 / 3; max-width: 100%; isolation: isolate; background:
  radial-gradient(60% 70% at 15% 15%, #2d47c9 0%, transparent 62%), radial-gradient(55% 65% at 90% 85%, #6a2fb8 0%, transparent 60%),
  radial-gradient(45% 50% at 70% 5%, #0f7d9c 0%, transparent 60%), radial-gradient(50% 50% at 25% 100%, #b24a7a 0%, transparent 65%), #0b0d1c; }
.as-cdf .cd-mb { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: rgba(16,16,26,.32); display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 16px; font: 500 12px var(--sf, -apple-system, sans-serif); color: rgba(255,255,255,.85); }
.as-cd { --u: 11px; position: absolute; right: 4%; top: 46px; width: min(400px, 74%); transition: opacity .35s; }
.as-cd.fade { opacity: 0; }
.cd-head { display: flex; gap: 6px; margin-bottom: 8px; transition: opacity .3s, transform .55s var(--ease); transform-origin: top left; }
.cd-chip { height: 24px; padding: 0 11px; border: 0; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--sf); color: rgba(255,255,255,.88);
  background: rgba(40,40,48,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); cursor: pointer; transition: transform .25s var(--pop), background .2s; }
.cd-chip.down { transform: scale(.9); background: rgba(80,80,92,.9); }
.as-cd .as-pill { backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); background: rgba(34,34,40,.72); }
.cd-list .as-pw { transform-origin: top center; transition: grid-template-rows .65s var(--ease), opacity .4s, transform .65s var(--ease); }
.as-cd.closed .cd-head { opacity: 0; transform: scale(.94); pointer-events: none; }
.as-cd.closed .cd-list .as-pw { grid-template-rows: 0fr; opacity: 0; transform: translateY(-14px) scale(.9); }
.as-cd.closed .cd-list .as-pw:nth-child(2) { transition-delay: .03s; } .as-cd.closed .cd-list .as-pw:nth-child(3) { transition-delay: .06s; } .as-cd.closed .cd-list .as-pw:nth-child(4) { transition-delay: .09s; }
.cd-cap { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 20px; cursor: pointer;
  background: rgba(34,34,40,.78); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.13);
  font: 500 14px var(--sf); color: #f5f5f7; white-space: nowrap; opacity: 0; transform: scale(.9); transform-origin: top left; pointer-events: none; transition: opacity .35s .15s, transform .6s .1s var(--pop); }
.as-cd.closed .cd-cap { opacity: 1; transform: none; pointer-events: auto; }
.cd-cap .icons { display: flex; gap: 5px; }
.cd-cap .icons > span { width: 16px; height: 16px; display: grid; place-items: center; }
.cd-cap .sum { font-variant-numeric: tabular-nums; }
.cd-cap .sum b { color: #30d158; font-weight: 600; }
.cd-cap.bump { animation: cd-bump .55s var(--pop); }
@keyframes cd-bump { 40% { transform: scale(1.07); } }
.cd-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 5; pointer-events: none; transition: transform .85s var(--ease), opacity .3s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.cd-say { position: absolute; left: 6%; bottom: 7%; right: 6%; font: 700 clamp(18px, 3.2cqw, 26px)/1.15 var(--sf); letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.4); transition: opacity .25s, transform .4s var(--ease); }
.cd-say.out { opacity: 0; transform: translateY(6px); }
.cd-say span { color: rgba(255,255,255,.55); }
@media (max-width: 520px) { .as-cdf { aspect-ratio: 4 / 5; } .as-cd { right: 5%; width: 90%; } }