/* Echo row (Kairos Automations 01): film left, text right.
   Variant F "One take": one continuous camera, ringing phone → conversation → dashboard → week.
   Everything scoped under #echo, keyframes prefixed e-, film sized in cqw of #eframe (5:4 = 100 x 80 cqw).
   The camera never leaves a bitmap scaled up at rest: every rig is re-laid-out at its resting width
   (all its content is in its own cqw), and while it moves it is drawn at the larger of the two widths. */

/* ---------- text column (= live Echo row) ---------- */

/* ---------- text column (= live Echo row) ---------- */
#echo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);align-items:center}
@media (max-width:900px){#echo{grid-template-columns:1fr}}
#echo{--ink:#080808;--paper:#fcfcfc;--mute:#8d8d8d;--line:#262626;--red:#ff2d3f;--blue:#8496F4;
  --sans:'Host Grotesk','Helvetica Neue',Arial,sans-serif;--serif:'Gambetta','Times New Roman',serif;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.25,.64,1);--gut:clamp(16px,2.2vw,32px)}
#echo .txt{max-width:560px}
#echo .t-top{display:flex;align-items:center;justify-content:flex-start;gap:16px}
#echo .e-logo{display:flex;align-items:center;gap:12px}
#echo .e-logo img{height:22px;filter:invert(1)}
#echo .e-logo span{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
#echo .h{font-weight:500;text-transform:uppercase;font-size:clamp(34px,3.7vw,62px);line-height:.92;letter-spacing:-.035em;margin-top:28px}
#echo .h em{font-size:.62em;vertical-align:.22em;margin-right:.08em}
#echo .intro{font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:rgba(252,252,252,.78);margin-top:22px}
#echo .intro em{color:var(--paper)}
#echo .caps{list-style:none;margin-top:30px;border-top:1px solid var(--line);padding:0}
#echo .caps li{display:grid;grid-template-columns:1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
#echo .caps li>div{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .9s cubic-bezier(.65,0,.35,1)}
#echo .caps li:hover>div,#echo .caps li.on>div{grid-template-rows:auto 1fr}
#echo .caps b{font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;transition:color .6s ease}
#echo .caps p{font-size:13.5px;color:var(--mute);min-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .5s var(--ease)}
#echo .caps p::before{content:"";display:block;height:2px}
#echo .caps li:hover b,#echo .caps li.on b{color:var(--red)}
#echo .caps li:hover p,#echo .caps li.on p{opacity:1;transform:none;transition:opacity .6s ease .25s,transform .8s var(--ease) .2s}
#echo .txt .btn-line{margin-top:30px}
#echo .media{position:relative}
#echo .frame{position:relative;width:100%;aspect-ratio:5/4;container-type:inline-size;isolation:isolate}
/* the loop restart freezes the film's transitions for two frames; the captions keep theirs */
#echo.noanim .frame *,#echo.noanim .frame *::before,#echo.noanim .frame *::after{transition:none!important;animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){#echo *{transition:none!important;animation:none!important}}



/* ============================================================ the film */
#echo .frame{--acc:#8496F4;--blue:#3550D4;--ok:#30c25a;--miss:#ff453a;--amb:#C7A36C;
  --d-bg:#0E0F11;--d-sf:#16171A;--d-ink:#ECECE9;--d-ink2:#B3B5BA;--d-mu:#7E8188;--d-fa:#4C4F55;--d-ln:#25262A;--d-ln2:#1E1F23;
  --io:cubic-bezier(.65,0,.35,1);--out:cubic-bezier(.16,1,.3,1);--spr:cubic-bezier(.34,1.32,.64,1);
  font-family:var(--sans);color:#f2f2f2;-webkit-font-smoothing:antialiased;overflow:hidden;border-radius:2.4cqw;font-variant-numeric:tabular-nums}
#echo .frame svg{display:block}
#echo .e-bg{position:absolute;inset:0;background:radial-gradient(60cqw 50cqw at 50% 46%,#16171b,#08080a 72%);box-shadow:inset 0 0 0 .12cqw #1d1e22;border-radius:inherit}
#echo .e-blk{position:absolute;inset:0;z-index:60;background:#000;opacity:0;transition:opacity .9s ease;pointer-events:none}
#echo .e-blk.on{opacity:1}
/* rigs: positioned only by transform (JS camera); width set per resting state */
#echo .e-rig{position:absolute;left:0;top:0;transform-origin:0 0;container-type:inline-size}

/* ---------- the phone (units: cqw of the phone, 100 x 212) ---------- */
#echo #ePh{z-index:3;aspect-ratio:100/212;transition:opacity .9s var(--out)}
#echo #ePh.out{opacity:0}
#echo .e-body{position:absolute;inset:0;border-radius:15.6cqw;background:#0b0b0d;
  box-shadow:inset 0 0 0 .45cqw #4a4b51,inset 0 0 0 .9cqw #1a1b1e,inset 0 0 0 1.25cqw #050506,0 6cqw 16cqw rgba(0,0,0,.6)}
#echo .e-btn{position:absolute;width:.9cqw;border-radius:.45cqw;background:#2e2f34}
#echo .e-btn.a{left:-.55cqw;top:34cqw;height:7cqw}
#echo .e-btn.b{left:-.55cqw;top:47cqw;height:13cqw}
#echo .e-btn.c{left:-.55cqw;top:63cqw;height:13cqw}
#echo .e-btn.d{right:-.55cqw;top:51cqw;height:20cqw}
#echo .e-scr{position:absolute;inset:2.3cqw;border-radius:13.4cqw;overflow:hidden;background:#000;isolation:isolate}
#echo .e-isl{position:absolute;top:2.8cqw;left:50%;width:28cqw;height:8.2cqw;margin-left:-14cqw;border-radius:5cqw;background:#000;z-index:40}
#echo .e-sb{position:absolute;left:0;right:0;top:0;height:13.6cqw;display:flex;align-items:center;justify-content:space-between;padding:0 8.4cqw 0 11.4cqw;font-size:3.8cqw;font-weight:600;z-index:35;color:#fff}
#echo .e-sb .ri{display:flex;gap:1cqw;align-items:flex-end}
#echo .e-sb .ri i{display:block;width:.95cqw;background:currentColor;border-radius:.3cqw}
#echo .e-sb .bat{width:6.2cqw;height:3cqw;border-radius:1cqw;border:.3cqw solid rgba(255,255,255,.55);padding:.35cqw;margin-left:.9cqw;align-self:center}
#echo .e-sb .bat::before{content:"";display:block;height:100%;width:72%;background:#fff;border-radius:.35cqw}
#echo .e-home{position:absolute;bottom:2.4cqw;left:50%;width:36cqw;height:1.3cqw;margin-left:-18cqw;border-radius:1cqw;background:rgba(255,255,255,.82);z-index:36}
#echo .e-lay{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--out);pointer-events:none}
#echo .e-lay.on{opacity:1}

/* incoming call */
#echo .e-call{background:linear-gradient(180deg,#25262e 0%,#141519 46%,#08080a 100%)}
#echo .e-cnum{position:absolute;top:30cqw;left:0;right:0;text-align:center;font-size:8.4cqw;font-weight:500;letter-spacing:-.03em;line-height:1.1;white-space:nowrap}
#echo .e-csub{position:absolute;top:41cqw;left:0;right:0;text-align:center;font-size:4cqw;color:rgba(255,255,255,.6)}
#echo .e-cst{position:absolute;top:48.5cqw;left:0;right:0;height:6cqw;text-align:center;font-size:3.8cqw;color:rgba(255,255,255,.6)}
#echo .e-cst span{position:absolute;left:0;right:0;transition:opacity .45s var(--out),transform .6s var(--out)}
#echo .e-cst .b{opacity:0;transform:translateY(2cqw);color:#ff6961}
#echo .e-call.miss .e-cst .a{opacity:0;transform:translateY(-2cqw)}
#echo .e-call.miss .e-cst .b{opacity:1;transform:none}
#echo .e-cbts{position:absolute;bottom:22cqw;left:0;right:0;display:flex;justify-content:space-between;padding:0 13cqw;transition:opacity .7s var(--out),transform .9s var(--out)}
#echo .e-call.miss .e-cbts{opacity:0;transform:translateY(4cqw)}
#echo .e-cb{display:flex;flex-direction:column;align-items:center;gap:2.2cqw;font-size:3.3cqw;color:rgba(255,255,255,.82)}
#echo .e-cb i{position:relative;width:18.5cqw;height:18.5cqw;border-radius:50%;display:grid;place-items:center}
#echo .e-cb i svg{width:7.6cqw;height:7.6cqw}
#echo .e-cb.no i{background:var(--miss)}
#echo .e-cb.no i svg{transform:rotate(135deg)}
#echo .e-cb.yes i{background:var(--ok)}
#echo .e-cb.yes i::before,#echo .e-cb.yes i::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 .45cqw rgba(48,194,90,.55);opacity:0}
#echo .e-call.ring .e-cb.yes i::before{animation:e-wave 1.6s var(--out) infinite}
#echo .e-call.ring .e-cb.yes i::after{animation:e-wave 1.6s var(--out) .8s infinite}
@keyframes e-wave{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
#echo .e-call.ring .e-cb.yes i svg{animation:e-jig 1.6s var(--io) infinite}
@keyframes e-jig{0%,40%,100%{transform:rotate(0)}8%,24%{transform:rotate(-14deg)}16%,32%{transform:rotate(14deg)}}
/* the Echo chip: flips on by itself */
#echo .e-chips{position:absolute;top:61cqw;left:0;right:0;height:10cqw;perspective:60cqw}
#echo .e-chip{position:absolute;left:50%;top:0;height:10cqw;display:flex;align-items:center;gap:2cqw;padding:0 4.2cqw 0 2.2cqw;border-radius:5cqw;
  background:#1c1f2e;box-shadow:inset 0 0 0 .3cqw rgba(132,150,244,.32);font-size:3.7cqw;color:#dfe3ff;white-space:nowrap;
  transform:translateX(-50%) rotateX(-90deg);opacity:0;transform-origin:50% 50%;backface-visibility:hidden;
  transition:transform .7s var(--spr),opacity .3s ease}
#echo .e-chip.on{transform:translateX(-50%) rotateX(0);opacity:1}
#echo .e-chip.off{transform:translateX(-50%) rotateX(90deg);opacity:0;transition:transform .45s var(--io),opacity .3s ease .1s}
#echo .e-chip .mk{width:6cqw;height:6cqw;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
#echo .e-chip .mk img{height:3.4cqw}
#echo .e-chip b{font-weight:600}
#echo .e-chip time{color:#9aa6f7}
#echo .e-chip .ck{width:4.4cqw;height:4.4cqw;border-radius:50%;background:var(--acc);display:grid;place-items:center;margin-left:.4cqw}
#echo .e-chip .ck svg{width:2.6cqw;height:2.6cqw}

/* messages */
#echo .e-msg{background:#000}
#echo .e-mh{position:absolute;left:0;right:0;top:0;height:33cqw;border-bottom:.25cqw solid #1c1c1e;background:#0d0d0f}
#echo .e-mh .bk{position:absolute;left:4.6cqw;top:17.6cqw;width:4cqw;height:6cqw;color:var(--acc)}
#echo .e-mh .av{position:absolute;left:50%;top:13.4cqw;width:11.6cqw;height:11.6cqw;margin-left:-5.8cqw;border-radius:50%;background:linear-gradient(180deg,#a3a6af,#7b7e87);display:grid;place-items:center}
#echo .e-mh .av svg{width:7cqw;height:7cqw;color:#f4f4f6}
#echo .e-mh .nm{position:absolute;left:0;right:0;top:26.6cqw;text-align:center;font-size:3.1cqw;color:#e8e8ea}
#echo .e-ml{position:absolute;left:4.2cqw;right:4.2cqw;top:34cqw;bottom:28.4cqw}
#echo .e-it{position:absolute;bottom:0;max-width:76%;transform:translateY(var(--y,0)) translateY(var(--dy,0)) scale(var(--s,1));
  transition:transform .8s var(--spr),opacity .45s var(--out);transition-delay:var(--d,0s)}
#echo .e-it:not(.v){--s:.5;--dy:4cqw;opacity:0;transition:transform .3s var(--out),opacity .2s}
#echo .e-it.r{right:0;transform-origin:100% 100%}
#echo .e-it.l{left:0;transform-origin:0 100%}
#echo .e-it.c{left:0;right:0;max-width:none;text-align:center;font-size:2.9cqw;color:#8e8e93}
#echo .e-it.c b{color:#c7c7cc;font-weight:600}
#echo .e-bb{padding:2.5cqw 3.8cqw 2.6cqw;border-radius:5.4cqw;font-size:4.35cqw;line-height:1.3;letter-spacing:-.005em}
#echo .e-bb.r{background:var(--blue);color:#fff;border-bottom-right-radius:1.6cqw}
#echo .e-bb.l{background:#262629;color:#f2f2f4;border-bottom-left-radius:1.6cqw}
#echo .e-meta{font-size:2.8cqw;color:#8e8e93;white-space:nowrap}
#echo .e-meta b{color:#c7ccf5;font-weight:500}
#echo .e-src{display:flex;align-items:center;gap:1.6cqw;font-size:2.9cqw;color:#cdd3ff;padding:1.3cqw 2.8cqw 1.3cqw 1.4cqw;border-radius:4cqw;background:rgba(132,150,244,.13);white-space:nowrap}
#echo .e-src .mk{width:4.4cqw;height:4.4cqw;border-radius:50%;background:#fff;display:grid;place-items:center}
#echo .e-src .mk img{height:2.5cqw}
#echo .e-ty{display:flex;gap:1.3cqw;padding:3.3cqw 3.8cqw;border-radius:5.4cqw;background:#262629}
#echo .e-ty.r{background:rgba(53,80,212,.6)}
#echo .e-ty i{width:2cqw;height:2cqw;border-radius:50%;background:rgba(255,255,255,.6);animation:e-dot 1.2s var(--io) infinite}
#echo .e-ty i:nth-child(2){animation-delay:.16s}
#echo .e-ty i:nth-child(3){animation-delay:.32s}
@keyframes e-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-.5cqw)}}
#echo .e-msg.gone .e-it.v{opacity:0;--s:.35;transition:transform .75s var(--io),opacity .32s ease;transition-delay:var(--d,0s)}
#echo .e-cmp{position:absolute;left:3.6cqw;right:3.6cqw;top:181.6cqw;height:9.6cqw;display:flex;gap:2.4cqw;align-items:center}
#echo .e-cmp .pl{width:9.6cqw;height:9.6cqw;border-radius:50%;background:#262629;display:grid;place-items:center;color:#9a9aa0;flex:none}
#echo .e-cmp .pl svg{width:4.4cqw;height:4.4cqw}
#echo .e-cmp .fd{flex:1;height:100%;border-radius:5cqw;box-shadow:inset 0 0 0 .3cqw #38383c;display:flex;align-items:center;padding:0 4cqw;font-size:3.7cqw;color:#6c6c72}

#echo .e-scrim{position:absolute;inset:0;z-index:2;background:#000;opacity:0;transition:opacity .8s ease;pointer-events:none}
#echo .e-scrim.on{opacity:.5}
/* ---------- the lead card (frame units) ---------- */
#echo .e-card{position:absolute;z-index:4;left:24cqw;top:14cqw;width:52cqw;border-radius:2.2cqw;background:var(--d-sf);
  box-shadow:inset 0 0 0 .12cqw var(--d-ln),0 3cqw 8cqw rgba(0,0,0,.55);padding:3cqw 3.2cqw 2.8cqw;
  opacity:0;transform:scale(.72);transform-origin:50% 50%;transition:opacity .45s var(--out),transform .9s var(--spr)}
#echo .e-card.on{opacity:1;transform:none}
#echo .e-card.fly{opacity:0;transform:translate(var(--fx),var(--fy)) scale(var(--fs));transform-origin:0 0;transition:transform .8s var(--io),opacity .3s ease .3s}
#echo .e-cd-h{display:flex;align-items:center;gap:1.8cqw}
#echo .e-cd-h .av{width:5.6cqw;height:5.6cqw;border-radius:50%;background:#26272c;display:grid;place-items:center;font-size:1.9cqw;font-weight:600;color:var(--d-ink2);flex:none}
#echo .e-cd-h b{display:block;font-size:2.9cqw;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--d-ink)}
#echo .e-cd-h small{display:block;font-size:1.55cqw;color:var(--d-mu);margin-top:.35cqw}
#echo .e-st{margin-left:auto;display:flex;align-items:center;gap:.8cqw;font-size:1.6cqw;color:#c9d0ff;padding:.75cqw 1.5cqw .75cqw 1.2cqw;border-radius:2cqw;background:rgba(132,150,244,.12);white-space:nowrap;
  opacity:0;transform:scale(.8);transition:opacity .4s ease,transform .6s var(--spr)}
#echo .e-st::before{content:"";width:.9cqw;height:.9cqw;border-radius:50%;background:var(--acc)}
#echo .e-st.on{opacity:1;transform:none}
#echo .e-fs{margin-top:2.2cqw;border-top:.12cqw solid var(--d-ln)}
#echo .e-f{display:grid;grid-template-columns:1fr auto;align-items:center;padding:1.25cqw 0;border-bottom:.12cqw solid var(--d-ln)}
#echo .e-f>div{display:grid;grid-template-columns:11cqw 1fr;align-items:baseline}
#echo .e-f small{display:block;font-size:1.45cqw;color:var(--d-mu)}
#echo .e-f span{display:block;font-size:1.9cqw;color:var(--d-ink);white-space:nowrap;opacity:0;transform:translateY(.8cqw);transition:opacity .45s ease,transform .7s var(--out)}
#echo .e-f i{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--acc);display:grid;place-items:center;transform:scale(0);transition:transform .5s var(--spr)}
#echo .e-f i svg{width:1.3cqw;height:1.3cqw}
#echo .e-f.on span{opacity:1;transform:none}
#echo .e-f.on i{transform:none}

/* ---------- the dashboard (units: cqw of the dashboard, 100 x 80, = the Echo app, dark) ---------- */
#echo #eDash{z-index:1;aspect-ratio:5/4;opacity:0;transition:opacity .9s var(--out)}
#echo #eDash.on{opacity:1}
#echo .e-win{position:absolute;inset:0;border-radius:1.4cqw;background:var(--d-bg);box-shadow:inset 0 0 0 .12cqw var(--d-ln);overflow:hidden;color:var(--d-ink)}
#echo .e-sd{position:absolute;left:0;top:0;bottom:0;width:21cqw;border-right:.12cqw solid var(--d-ln);padding:3.2cqw 1.6cqw}
#echo .e-ka{display:flex;align-items:baseline;gap:.5cqw;padding-left:.8cqw;font-size:1.55cqw;white-space:nowrap}
#echo .e-ka b{font-weight:600;letter-spacing:-.02em}
#echo .e-ka span{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.7cqw}
#echo .e-prod{margin-top:1.6cqw;height:5cqw;border-radius:1cqw;background:var(--d-sf);box-shadow:inset 0 0 0 .12cqw var(--d-ln);display:grid;place-items:center}
#echo .e-prod img{height:2.1cqw;filter:invert(1) brightness(.93)}
#echo .e-sdv{height:.12cqw;background:var(--d-ln);margin:1.8cqw .4cqw}
#echo .e-pill{height:3.6cqw;border-radius:.9cqw;box-shadow:inset 0 0 0 .12cqw var(--d-ln);background:var(--d-sf);display:flex;align-items:center;gap:1cqw;padding:0 1.2cqw;font-size:1.35cqw;white-space:nowrap}
#echo .e-pill svg{width:1.3cqw;height:1.3cqw;color:var(--d-mu)}
#echo .e-pill .cv{margin-left:auto}
#echo .e-nav{position:relative;margin-top:2.2cqw}
#echo .e-nav .ind{position:absolute;left:0;right:0;top:0;height:3.4cqw;border-radius:.8cqw;background:var(--d-sf);box-shadow:inset 0 0 0 .12cqw var(--d-ln);transition:transform .7s var(--spr)}
#echo .e-nav .ind.l{transform:translateY(3.7cqw)}
#echo .e-nav div{position:relative;height:3.4cqw;margin-bottom:.3cqw;display:flex;align-items:center;gap:1.1cqw;padding:0 1cqw;font-size:1.35cqw;color:var(--d-ink2)}
#echo .e-nav svg{width:1.35cqw;height:1.35cqw;color:var(--d-mu)}
#echo .e-nav .n{margin-left:auto;font-size:1.15cqw;color:var(--d-mu)}
#echo .e-sf{position:absolute;left:1.6cqw;right:1.6cqw;bottom:2.2cqw;display:flex;align-items:center;gap:1cqw;padding-top:1.6cqw;border-top:.12cqw solid var(--d-ln)}
#echo .e-sf .av{width:2.8cqw;height:2.8cqw;border-radius:50%;background:var(--d-ln);display:grid;place-items:center;font-size:1cqw;font-weight:600;color:var(--d-ink2)}
#echo .e-sf b{display:block;font-size:1.25cqw;font-weight:500}
#echo .e-sf small{display:block;font-size:1.05cqw;color:var(--d-mu)}
#echo .e-mn{position:absolute;left:21cqw;right:0;top:0;bottom:0}
#echo .e-view{position:absolute;inset:0;transition:opacity .6s var(--out)}
#echo .e-view.hid{opacity:0}
/* leads view */
#echo .e-tb{height:6cqw;border-bottom:.12cqw solid var(--d-ln);display:flex;align-items:center;padding:0 2.6cqw;font-size:1.45cqw;font-weight:550}
#echo .e-lsum{position:absolute;left:3.4cqw;top:8.8cqw;font-size:1.45cqw;font-weight:500}
#echo .e-lsum span{color:var(--acc)}
#echo .e-ltabs{position:absolute;left:3cqw;top:11.8cqw;display:flex;gap:.4cqw;font-size:1.3cqw;color:var(--d-mu)}
#echo .e-ltabs span{padding:.5cqw .9cqw;border-radius:.6cqw}
#echo .e-ltabs span:first-child{color:var(--d-ink);box-shadow:inset 0 0 0 .12cqw var(--d-ln);background:var(--d-sf)}
#echo .e-grp{position:absolute;left:3.4cqw;font-size:1.2cqw;color:var(--d-mu)}
#echo .e-row{position:absolute;left:2.5cqw;right:2.5cqw;height:6cqw;border-radius:.9cqw;display:grid;grid-template-columns:3.4cqw 26cqw 1fr 9cqw 7cqw;gap:1.4cqw;align-items:center;padding:0 1.4cqw;
  transition:transform .8s var(--out),opacity .6s ease,background-color .8s ease}
#echo .e-row.op{background:#1A1D29}
#echo .e-row .av{width:3.4cqw;height:3.4cqw;border-radius:50%;background:#24252b;display:grid;place-items:center;font-size:1.05cqw;font-weight:600;color:var(--d-ink2)}
#echo .e-row b{display:block;font-size:1.45cqw;font-weight:500;white-space:nowrap}
#echo .e-row small{display:flex;align-items:center;gap:.6cqw;font-size:1.15cqw;color:var(--d-mu);margin-top:.25cqw;white-space:nowrap}
#echo .e-row small::before{content:"";width:.7cqw;height:.7cqw;border-radius:50%;background:var(--c)}
#echo .e-row .nd{font-size:1.35cqw;color:var(--d-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#echo .e-row .ln{font-size:1.2cqw;color:var(--d-mu);white-space:nowrap}
#echo .e-row time{font-size:1.2cqw;color:var(--d-ink2);text-align:right;white-space:nowrap}
#echo .e-row.dim{opacity:.55}
#echo .e-row.nw{opacity:0;transform:translateY(-1.5cqw)}
#echo .e-row.nw.on{opacity:1;transform:none;background:#222842}
#echo .e-row.nw.on.set{background:#1A1D29}
#echo .e-rows:not(.ins) .e-row:not(.nw),#echo .e-rows:not(.ins) .e-grp.wk{transform:translateY(-6.6cqw)}
#echo .e-grp{transition:transform .8s var(--out)}
#echo .e-mn.morph .e-view.lv .e-tb,#echo .e-mn.morph .e-view.lv .e-lsum,#echo .e-mn.morph .e-view.lv .e-ltabs,#echo .e-mn.morph .e-view.lv .e-grp,#echo .e-mn.morph .e-view.lv .e-row:not(.nw){opacity:0;transition:opacity .45s ease}
#echo .e-mn.morph .e-row.nw > *{opacity:0;transition:opacity .3s ease}
/* row → week block */
#echo .e-ghost{position:absolute;z-index:5;border-radius:.9cqw;background:#1A1D29;opacity:0;transform-origin:0 0;transition:transform 1.25s var(--io),background-color 1s ease .2s,border-radius 1s ease}
#echo .e-ghost.on{opacity:1}
#echo .e-ghost.go{transform:translate(var(--gx),var(--gy)) scale(var(--gsx),var(--gsy));background:var(--acc);border-radius:8.2cqw/2.3cqw}
/* overview */
#echo .e-ov .e-hd{position:absolute;left:3.4cqw;top:3.4cqw;font-size:3.3cqw;font-weight:500;letter-spacing:-.03em;white-space:nowrap}
#echo .e-ov .e-hd b{font-weight:500;color:var(--acc)}
#echo .e-ov .e-hs{position:absolute;left:3.4cqw;top:7.9cqw;font-size:1.35cqw;color:var(--d-mu)}
#echo .e-ov .e-al{position:absolute;right:2.5cqw;top:3.8cqw;height:3.4cqw;padding:0 1.3cqw;border-radius:.9cqw;box-shadow:inset 0 0 0 .12cqw var(--d-ln);display:flex;align-items:center;gap:.8cqw;font-size:1.3cqw;white-space:nowrap}
#echo .e-ov .e-al svg{width:1.1cqw;height:1.1cqw}
#echo .e-cdw{position:absolute;left:2.5cqw;right:2.5cqw;border-radius:1.2cqw;background:var(--d-sf);box-shadow:inset 0 0 0 .12cqw var(--d-ln)}
#echo .e-cdw.wk{top:11cqw;height:31cqw}
#echo .e-cdw.td{top:44cqw;height:34cqw}
#echo .e-cdw h5{position:absolute;left:2.4cqw;top:2cqw;font-size:1.45cqw;font-weight:500}
#echo .e-cdw h5 small{position:absolute;left:auto;white-space:nowrap}
#echo .e-wn{position:absolute;left:2.4cqw;top:5.2cqw;display:flex;align-items:baseline;gap:1cqw}
#echo .e-wn b{font-size:3.6cqw;font-weight:500;letter-spacing:-.03em;line-height:1}
#echo .e-wn span{font-size:1.35cqw;color:var(--d-ink2)}
#echo .e-wbar{position:absolute;left:2.4cqw;right:2.4cqw;top:11.4cqw;height:1.3cqw}
#echo .e-wbar i{position:absolute;top:0;height:100%;border-radius:.5cqw;background:#24252a;overflow:hidden}
#echo .e-wbar i::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--out)}
#echo .e-wbar i.in::after{transform:none}
#echo .e-wbar i.me::after{transition:none}
#echo .e-wr{position:absolute;left:2.4cqw;right:2.4cqw;height:3.6cqw;display:grid;grid-template-columns:1.6cqw 3.4cqw 1fr auto;align-items:center;gap:.8cqw;font-size:1.4cqw;color:var(--d-ink2)}
#echo .e-wr i{width:1.1cqw;height:1.1cqw;border-radius:.3cqw;background:var(--c)}
#echo .e-wr b{font-weight:500;color:var(--d-ink)}
#echo .e-wr svg{width:1.1cqw;height:1.1cqw;color:var(--d-fa)}
#echo .e-cdw .op{position:absolute;right:2.4cqw;top:2.1cqw;font-size:1.25cqw;color:var(--d-mu)}
#echo .e-tdr{position:absolute;left:2.4cqw;right:2.4cqw;height:5.6cqw;display:grid;grid-template-columns:2.2cqw 1fr auto 2.8cqw;gap:1.3cqw;align-items:center;border-top:.12cqw solid var(--d-ln2)}
#echo .e-tdr .ck{width:2cqw;height:2cqw;border-radius:50%;box-shadow:inset 0 0 0 .14cqw var(--d-fa)}
#echo .e-tdr b{display:block;font-size:1.4cqw;font-weight:500;white-space:nowrap}
#echo .e-tdr small{display:block;font-size:1.15cqw;color:var(--d-mu);margin-top:.2cqw;white-space:nowrap}
#echo .e-tdr span{font-size:1.25cqw;color:var(--d-ink2);white-space:nowrap}
#echo .e-tdr span.hot{color:var(--acc)}
#echo .e-tdr .cl{width:2.8cqw;height:2.8cqw;border-radius:.7cqw;box-shadow:inset 0 0 0 .12cqw var(--d-ln);display:grid;place-items:center;color:var(--d-ink2)}
#echo .e-tdr .cl svg{width:1.2cqw;height:1.2cqw}
#echo .e-ov .e-in{opacity:0;transform:translateY(1.2cqw);transition:opacity .7s ease,transform .9s var(--out);transition-delay:var(--d,0s)}
#echo .e-ov.on .e-in{opacity:1;transform:none}

/* ---------- the owner's phone (foreground; units: cqw of #eOwn) ---------- */
#echo #eOwn{position:absolute;z-index:5;left:66cqw;top:29cqw;width:29cqw;aspect-ratio:100/212;container-type:inline-size;
  transform:translateY(58cqw);transition:transform 1.15s var(--out)}
#echo #eOwn.on{transform:none}
#echo #eOwn.gone{transform:translateY(58cqw);transition:transform .9s cubic-bezier(.55,0,.75,.2)}
#echo .e-own .e-scr{background:linear-gradient(185deg,#2a3150 0%,#151826 38%,#0a0b10 100%)}
#echo .e-own .e-lkd{position:absolute;top:21cqw;left:0;right:0;text-align:center;font-size:4.6cqw;font-weight:500;color:rgba(255,255,255,.82)}
#echo .e-own .e-lkt{position:absolute;top:26.4cqw;left:0;right:0;text-align:center;font-size:23cqw;font-weight:600;letter-spacing:-.04em;line-height:1;color:rgba(255,255,255,.96)}
#echo .e-nt{position:absolute;left:3.6cqw;right:3.6cqw;top:58cqw;display:grid;grid-template-columns:9.4cqw 1fr;gap:3.2cqw;padding:3.8cqw 4.2cqw 4cqw 3.6cqw;border-radius:6.6cqw;background:rgba(58,60,72,.86);box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.06);
  opacity:0;transform:translateY(-8cqw) scale(.9);transition:opacity .45s var(--out),transform .9s var(--spr)}
#echo .e-nt.on{opacity:1;transform:none}
#echo .e-nt .ic{width:9.4cqw;height:9.4cqw;border-radius:2.3cqw;background:#fff;display:grid;place-items:center}
#echo .e-nt .ic img{height:5cqw}
#echo .e-nt .hd{display:flex;align-items:baseline;gap:2cqw}
#echo .e-nt .hd b{font-size:4.1cqw;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
#echo .e-nt .hd time{margin-left:auto;font-size:3.4cqw;color:rgba(255,255,255,.55)}
#echo .e-nt p{font-size:3.9cqw;line-height:1.3;color:rgba(255,255,255,.86);margin-top:.5cqw}