/* /orbit: the iotspot screen, rebuilt from its parts (tools/build_orbit.py _evo_screen).
   One 393 x 852 canvas in Figma's own coordinates, scaled into the phone (--k, set by
   orbit.js). Each month is a data-s value; the same elements move, resize and recolour
   between them, so the app visibly evolves rather than swapping screenshots. */
.ev { --k: .69; --e: cubic-bezier(.7,0,.2,1); --g: #92c14b; --r: #e2483a;
  position: absolute; left: 0; top: 0; width: 393px; height: 852px; overflow: hidden;
  transform: scale(var(--k)); transform-origin: 0 0; background: #f2f2f2; color: #3c3c3c;
  font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
  transition: background-color .8s var(--e); }
.ev * { box-sizing: border-box; }
.ev > *, .ev-card, .ev-card > *, .ev-ch > *, .ev-row, .ev-row > *, .ev-day, .ev-day > *, .ev-chips > span, .ev-tab, .ev-pins > i {
  transition: top .95s var(--e), left .95s var(--e), width .95s var(--e), height .95s var(--e), opacity .7s var(--e),
    transform .95s var(--e), border-radius .95s var(--e), background-color .7s var(--e), color .7s var(--e),
    border-color .7s var(--e), box-shadow .7s var(--e), filter .95s var(--e); }
.ev > * { position: absolute; }
.ev [data-t] { transition: opacity .18s ease, filter .18s ease; }
.ev [data-t].sw { opacity: 0 !important; filter: blur(3px); }
.ev svg { display: block; flex: none; }

/* status bar and home indicator */
.ev-status { left: 0; top: 0; width: 393px; height: 54px; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 34px 0 52px; font-family: -apple-system, "SF Pro Text", sans-serif; color: #000; }
.ev-status b { font-size: 17px; font-weight: 600; }
.ev-status i { width: 76px; height: 13px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 13'%3E%3Crect x='0' y='8' width='3.5' height='5' rx='1'/%3E%3Crect x='5.5' y='5.5' width='3.5' height='7.5' rx='1'/%3E%3Crect x='11' y='3' width='3.5' height='10' rx='1'/%3E%3Crect x='16.5' y='0' width='3.5' height='13' rx='1'/%3E%3Cpath d='M32 3.2a10 10 0 0 1 13 0l-1.6 1.7a7.6 7.6 0 0 0-9.8 0zM34.6 6a6.2 6.2 0 0 1 7.8 0l-1.7 1.8a3.8 3.8 0 0 0-4.4 0zM38.5 9.2l2 2-2 2-2-2z'/%3E%3Crect x='51' y='0.5' width='22' height='12' rx='3.5' fill='none' stroke='black' stroke-width='1'/%3E%3Crect x='53' y='2.5' width='18' height='8' rx='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 13'%3E%3Crect x='0' y='8' width='3.5' height='5' rx='1'/%3E%3Crect x='5.5' y='5.5' width='3.5' height='7.5' rx='1'/%3E%3Crect x='11' y='3' width='3.5' height='10' rx='1'/%3E%3Crect x='16.5' y='0' width='3.5' height='13' rx='1'/%3E%3Cpath d='M32 3.2a10 10 0 0 1 13 0l-1.6 1.7a7.6 7.6 0 0 0-9.8 0zM34.6 6a6.2 6.2 0 0 1 7.8 0l-1.7 1.8a3.8 3.8 0 0 0-4.4 0zM38.5 9.2l2 2-2 2-2-2z'/%3E%3Crect x='51' y='0.5' width='22' height='12' rx='3.5' fill='none' stroke='black' stroke-width='1'/%3E%3Crect x='53' y='2.5' width='18' height='8' rx='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.ev-home { left: 130px; top: 836px; width: 134px; height: 5px; border-radius: 3px; background: #000; z-index: 30; }

/* maps, floor plan, and the white header band of the early versions */
.ev-map { left: 0; object-fit: cover; opacity: 0; }
.ev-map-a { top: 190px; width: 393px; height: 682px; transform: scale(1.18); }
.ev-map-b { left: 0; top: 99px; width: 393px; height: 654px; transform: scale(1.25); }
.ev-plan { left: 0; top: 20px; width: 393px; height: 300px; object-fit: cover; opacity: 0; transform: scale(1.35) rotate(-5deg); }
.ev-band { left: 0; top: 0; width: 393px; height: 195px; background: #fff; z-index: 2; }
.ev-pins > i { position: absolute; opacity: 0; transform: translateY(-34px); }
.ev-pins .p0 { left: 67px; top: 248px; } .ev-pins .p1 { left: 301px; top: 316px; transition-delay: .08s; }
.ev-pins .p2 { left: 239px; top: 468px; transition-delay: .16s; } .ev-pins .p3 { left: 288px; top: 618px; transition-delay: .24s; }
.ev-badge { left: 343px; top: 208px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff;
  font-size: 19px; font-weight: 600; color: #222; opacity: 0; transform: scale(.6); z-index: 3; }
.ev-bubble { display: none; }

/* the panel everything sits on */
.ev-sheet { left: 0; top: 195px; width: 393px; height: 657px; background: #f2f2f2; border-radius: 0; z-index: 3; }
.ev-grip { position: absolute; left: 50%; top: 8px; width: 98px; height: 4px; margin-left: -49px; border-radius: 2px; background: #cfcfcf; opacity: 0; transition: opacity .6s; }

/* headers */
.ev-head0 { left: 26px; top: 58px; width: 341px; height: 34px; display: flex; align-items: center; justify-content: space-between; z-index: 5; }
.ev-head0 span { display: flex; align-items: center; gap: 24px; color: #555; }
.ev-ring { width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--g); border-right-color: #e8e8e8; display: grid; place-items: center; }
.ev-ring img { width: 12px; filter: brightness(0); }
.ev-fhead, .ev-search { left: 15px; top: 63px; width: 370px; height: 62px; border-radius: 18px; z-index: 6; display: flex; align-items: center;
  background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 6px 20px rgba(0,0,0,.08);
  opacity: 0; transform: translateY(-24px); }
.ev-fhead { justify-content: space-between; padding: 0 20px 0 22px; font-size: 19px; color: #333; }
.ev-fhead b { font-weight: 500; }
.ev-back { transform: rotate(180deg); color: #333; }
.ev-search { top: 60px; height: 64px; border-radius: 20px; justify-content: space-between; padding: 0 22px 0 26px; color: #333; background: rgba(255,255,255,.72); }
.ev-sbox { display: flex; align-items: center; gap: 9px; height: 40px; width: 143px; padding: 0 14px; border-radius: 10px; background: rgba(0,0,0,.06); font-size: 17px; }
.ev-sbox svg { width: 15px; height: 15px; }
.ev-sbox b { font-weight: 500; }
.ev-sic { display: grid; place-items: center; }

/* date strip: 36px days, 54px apart */
.ev-dates { left: 23px; top: 127px; width: 342px; height: 66px; z-index: 5; display: flex; justify-content: space-between; }
.ev-sep { position: absolute; left: 1px; top: -22px; font-size: 13px; color: #444; transition: opacity .5s; }
.ev-day { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 36px; }
.ev-day b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--g); color: #fff; font-size: 16px; font-weight: 500; }
.ev-day.off b { background: #a6a6a6; }
.ev-day small { font-size: 10.5px; color: #333; letter-spacing: .2px; }
.ev-ind { position: absolute; left: 1px; top: 61px; width: 34px; height: 4px; border-radius: 2px; background: #555; }
.ev-greet { display: none; }

/* filter chips */
.ev-chips { left: 16px; top: 220px; z-index: 5; display: flex; gap: 12px; }
.ev-chips span { height: 31px; padding: 0 14px; display: grid; place-items: center; border-radius: 16px; border: 1.5px solid #555; font-size: 14.5px; color: #444; white-space: nowrap; }
.ev-chips span.on { background: #4b4b4b; border-color: #4b4b4b; color: #fff; padding: 0 20px; }

/* location cards */
.ev-card { z-index: 5; overflow: hidden; background: #fff; border-radius: 4px; box-shadow: 0 1px 6px rgba(0,0,0,.09); color: #444; }
.ev-c1 { left: 16px; top: 364px; width: 361px; height: 194px; }
.ev-c2 { left: 16px; top: 274px; width: 361px; height: 74px; }
.ev-ch { position: relative; height: 74px; display: flex; align-items: center; gap: 12px; padding: 0 18px 0 32px; }
.ev-cht { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ev-cht b { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-cht small { font-size: 13.5px; color: #666; white-space: nowrap; }
.ev-logo, .ev-count { flex: none; width: 0; height: 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; opacity: 0; margin-right: -12px; }
.ev-logo { background: #000; } .ev-logo img { width: 26px; }
.ev-logo2 { background: #eceef0; }
.ev-count { height: 40px; background: var(--g); color: #fff; font-size: 18px; font-weight: 600; font-style: normal; }
.ev-cic { display: flex; gap: 12px; color: #333; width: 0; overflow: hidden; opacity: 0; }
.ev-chev-h { transform: rotate(90deg); color: #777; }
.ev-row { position: relative; height: 60px; display: flex; align-items: center; padding: 0 22px 0 32px; border-top: 1px solid #ececec; font-size: 16px; font-weight: 500; color: #444; }
.ev-row > span:first-of-type { flex: 1; }
.ev-row em { position: relative; font-style: normal; font-size: 16px; font-weight: 600; margin-right: 22px; color: var(--g); }
.ev-row em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; border-radius: 2px; background: var(--g); opacity: 0; transition: opacity .6s; }
.ev-row .ev-chev { color: #888; }
.ev-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: var(--g); }
.ev-row.bar-r .ev-bar { background: var(--r); }
.ev-card.red .ev-row em { color: var(--r); }
.ev-cfoot { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; color: #444; opacity: 0;
  transition: height .95s var(--e), opacity .6s var(--e); }

/* floor content */
.ev-floor { left: 0; top: 340px; width: 393px; z-index: 4; opacity: 0; transform: translateY(40px); }
.ev-ftabs { height: 50px; display: flex; justify-content: space-around; align-items: center; font-size: 16px; color: #555; }
.ev-ftabs span { position: relative; padding: 0 16px; }
.ev-ftabs span.on::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -14px; height: 3px; background: var(--g); }
.ev-fgap { display: block; height: 60px; }
.ev-frow { position: relative; height: 50px; display: flex; align-items: center; padding: 0 24px 0 32px; border-top: 1px solid #ececec; font-size: 17px; color: #555; background: #fff; }
.ev-up { margin-left: auto; transform: rotate(-90deg); color: #555; }
.ev-fz { padding-left: 48px; font-size: 15px; }
.ev-fz i { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: #f08a3a; }
.ev-fz em { margin-left: auto; margin-right: 88px; font-style: normal; color: var(--g); font-weight: 600; }
.ev-floor img { display: block; width: 393px; height: 240px; }
.ev-drum { left: 16px; top: 266px; width: 361px; height: 79px; border-radius: 12px; z-index: 5; opacity: 0; transform: translateY(20px) scale(.96); }

.ev-toggle { left: 136px; top: 692px; width: 120px; height: 42px; border-radius: 21px; background: #fff; z-index: 6; display: grid; place-items: center;
  font-size: 15px; color: #333; box-shadow: 0 4px 14px rgba(0,0,0,.12); opacity: 0; transform: translateY(20px); }
.ev-tabs { left: 0; top: 758px; width: 393px; height: 94px; z-index: 8; background: #fff; display: flex; justify-content: space-around; padding: 12px 18px 0;
  transform: translateY(100%); }
.ev-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #c9c9c9; }
.ev-tab.on { color: #222; }
.ev-tab small { font-size: 9px; letter-spacing: .3px; }
.ev-live { left: 16px; top: 755px; width: 56px; height: 56px; border-radius: 50%; z-index: 9; display: grid; place-items: center; background: #fff; color: #111;
  box-shadow: 0 4px 16px rgba(0,0,0,.18); }

/* ===== Month 1: the map behind, the list a panel ===== */
.ev[data-s="1"] .ev-map-a, .ev[data-s="2"] .ev-map-a { opacity: 1; transform: none; }
.ev[data-s="1"] .ev-sheet { left: 10px; top: 635px; width: 373px; height: 183px; background: #fff; border-radius: 26px; box-shadow: 0 -4px 20px rgba(0,0,0,.08); }
.ev[data-s="1"] .ev-badge { opacity: 1; transform: none; }
.ev[data-s="1"] .ev-chips { top: 666px; left: 26px; }
.ev[data-s="1"] .ev-c1 { left: 26px; top: 720px; width: 346px; height: 82px; border-radius: 14px; box-shadow: 0 0 0 1px #eee; }
.ev[data-s="1"] .ev-c1 .ev-ch { height: 82px; padding-left: 14px; }
.ev[data-s="1"] .ev-c1 .ev-logo { width: 46px; opacity: 1; margin-right: 0; background: #eceef0; }
.ev[data-s="1"] .ev-c1 .ev-logo img { opacity: 0; }
.ev[data-s="1"] .ev-c1 .ev-chev-h { transform: none; color: #222; }
.ev[data-s="1"] .ev-live { left: 10px; top: 562px; width: 60px; height: 60px; }

/* ===== Month 2: pins, and the list folded into one button ===== */
.ev[data-s="2"] .ev-pins > i { opacity: 1; transform: none; }
.ev[data-s="2"] .ev-sheet { left: 11px; top: 730px; width: 372px; height: 85px; background: #fff; border-radius: 26px; box-shadow: 0 6px 22px rgba(0,0,0,.14); }
.ev[data-s="2"] .ev-chips { top: 700px; opacity: 0; transform: translateY(30px); }
.ev[data-s="2"] .ev-c1 { left: 11px; top: 730px; width: 372px; height: 85px; border-radius: 26px; box-shadow: none; background: transparent; }
.ev[data-s="2"] .ev-c1 .ev-ch { height: 85px; padding-left: 21px; padding-right: 26px; }
.ev[data-s="2"] .ev-c1 .ev-count { width: 40px; opacity: 1; margin-right: 0; }
.ev[data-s="2"] .ev-c1 .ev-chev-h { transform: rotate(-90deg); }
.ev[data-s="2"] .ev-live { left: 10px; top: 657px; width: 60px; height: 60px; }

/* ===== Month 3: list or map, a tab bar, occupancy in red and green ===== */
.ev[data-s="3"] .ev-map-b { opacity: 1; transform: none; }
.ev[data-s="3"] .ev-band { height: 142px; background: rgba(255,255,255,.82); }
.ev[data-s="3"] .ev-sheet { top: 142px; height: 710px; background: #fff; box-shadow: 0 -1px 0 #e6e6e6; }
.ev[data-s="3"] .ev-dates { top: 69px; }
.ev[data-s="3"] .ev-chips { top: 200px; }
.ev[data-s="3"] .ev-c1, .ev[data-s="3"] .ev-c2 { left: 16px; width: 361px; height: 196px; border-radius: 4px; }
.ev[data-s="3"] .ev-c1 { top: 260px; } .ev[data-s="3"] .ev-c2 { top: 486px; }
.ev[data-s="3"] .ev-ch { height: 76px; }
.ev[data-s="3"] .ev-c1 .ev-ch { padding-left: 16px; }
.ev[data-s="3"] .ev-c1 .ev-logo { width: 46px; opacity: 1; margin-right: 0; }
.ev[data-s="3"] .ev-c1 .ev-cic { width: 60px; opacity: 1; }
.ev[data-s="3"] .ev-c1 .ev-chev-h { transform: none; color: #222; }
.ev[data-s="3"] .ev-toggle { opacity: 1; transform: none; }
.ev[data-s="3"] .ev-live { opacity: 0; transform: scale(.6); }
/* ... and one tap later, the map itself */
.ev[data-s="3"].m .ev-band { background: #fff; }
.ev[data-s="3"].m .ev-sheet { top: 852px; }
.ev[data-s="3"].m .ev-chips, .ev[data-s="3"].m .ev-c1, .ev[data-s="3"].m .ev-c2 { transform: translateY(640px); }

/* ===== Month 4: per floor ===== */
.ev[data-s="4"] .ev-plan { opacity: 1; transform: none; }
.ev[data-s="4"] .ev-fhead { opacity: 1; transform: none; }
.ev[data-s="4"] .ev-sheet { top: 154px; height: 698px; background: #fff; border-radius: 28px 28px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.08); }
.ev[data-s="4"] .ev-dates { top: 192px; }
.ev[data-s="4"] .ev-chips { top: 347px; }
.ev[data-s="4"] .ev-floor { top: 290px; opacity: 1; transform: none; }
.ev[data-s="4"] .ev-c1, .ev[data-s="4"] .ev-c2, .ev[data-s="5"] .ev-chips, .ev[data-s="6"] .ev-chips { opacity: 0; transform: translateY(80px); }
.ev[data-s="4"] .ev-live { left: 15px; top: 615px; opacity: 0; }   /* the floor crop carries its own */

/* ===== Months 5 and 6: search over the map, a suggested desk, then dark ===== */
.ev[data-s="5"] .ev-map-b, .ev[data-s="6"] .ev-map-b { opacity: 1; top: -40px; transform: none; }
.ev[data-s="5"] .ev-search, .ev[data-s="6"] .ev-search { opacity: 1; transform: none; }
.ev[data-s="5"] .ev-sheet, .ev[data-s="6"] .ev-sheet { top: 138px; height: 714px; background: #fff; border-radius: 30px 30px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.1); }
.ev[data-s="5"] .ev-dates, .ev[data-s="6"] .ev-dates { top: 174px; }
.ev[data-s="5"] .ev-drum, .ev[data-s="6"] .ev-drum { opacity: 1; transform: none; }
.ev[data-s="5"] .ev-c1, .ev[data-s="6"] .ev-c1 { left: 16px; top: 369px; width: 361px; height: 263px; border-radius: 10px; }
.ev[data-s="5"] .ev-c1 .ev-ch, .ev[data-s="6"] .ev-c1 .ev-ch { height: 78px; padding-left: 12px; }
.ev[data-s="5"] .ev-c1 .ev-logo, .ev[data-s="6"] .ev-c1 .ev-logo { width: 46px; opacity: 1; margin-right: 0; }
.ev[data-s="5"] .ev-c1 .ev-chev-h, .ev[data-s="6"] .ev-c1 .ev-chev-h { opacity: 0; }
.ev[data-s="5"] .ev-c1 .ev-cfoot, .ev[data-s="6"] .ev-c1 .ev-cfoot { height: 52px; opacity: 1; }
.ev[data-s="5"] .ev-c1 .ev-row, .ev[data-s="6"] .ev-c1 .ev-row { margin: 0 12px 7px 6px; border: 0; border-radius: 3px; background: #f5f5f6; padding-left: 28px; }
.ev[data-s="5"] .ev-row em::after, .ev[data-s="6"] .ev-row em::after { opacity: 1; }
.ev[data-s="5"] .ev-c2, .ev[data-s="6"] .ev-c2 { left: 16px; top: 662px; width: 361px; height: 120px; border-radius: 10px; }
.ev[data-s="5"] .ev-c2 .ev-ch, .ev[data-s="6"] .ev-c2 .ev-ch { padding-left: 12px; }
.ev[data-s="5"] .ev-c2 .ev-logo, .ev[data-s="6"] .ev-c2 .ev-logo { width: 46px; opacity: 1; margin-right: 0; background: #fff; box-shadow: inset 0 0 0 2.5px var(--g); }
.ev[data-s="5"] .ev-live, .ev[data-s="6"] .ev-live { left: 15px; top: 676px; width: 60px; height: 60px; }
.ev[data-s="3"] .ev-tabs, .ev[data-s="4"] .ev-tabs, .ev[data-s="5"] .ev-tabs, .ev[data-s="6"] .ev-tabs { transform: none; }
.ev[data-s="4"] .ev-band, .ev[data-s="5"] .ev-band, .ev[data-s="6"] .ev-band { opacity: 0; }
.ev[data-s="3"] .ev-head0, .ev[data-s="4"] .ev-head0, .ev[data-s="5"] .ev-head0, .ev[data-s="6"] .ev-head0 { opacity: 0; transform: translateY(-30px); }
.ev[data-s="3"] .ev-sep, .ev[data-s="4"] .ev-sep, .ev[data-s="5"] .ev-sep, .ev[data-s="6"] .ev-sep { opacity: 0; }
.ev[data-s="1"] .ev-grip, .ev[data-s="4"] .ev-grip, .ev[data-s="5"] .ev-grip, .ev[data-s="6"] .ev-grip { opacity: 1; }
.ev[data-s="1"] .ev-c2, .ev[data-s="2"] .ev-c2 { top: 900px; opacity: 0; }

/* Month 6: dark */
.ev[data-s="6"] { background: #000; color: #fff; --g: #c6ef3b; }
.ev[data-s="6"] .ev-map-b { filter: invert(.92) hue-rotate(180deg) brightness(.75) saturate(.7); }
.ev[data-s="6"] .ev-status, .ev[data-s="6"] .ev-search, .ev[data-s="6"] .ev-sbox { color: #fff; }
.ev[data-s="6"] .ev-home { background: #fff; }
.ev[data-s="6"] .ev-search { background: rgba(28,28,30,.75); }
.ev[data-s="6"] .ev-sbox { background: rgba(0,0,0,.35); }
.ev[data-s="6"] .ev-sheet { background: #000; }
.ev[data-s="6"] .ev-grip { background: #fff; }
.ev[data-s="6"] .ev-day b { color: #000; } .ev[data-s="6"] .ev-day.off b { background: #2c2c2e; color: #bbb; }
.ev[data-s="6"] .ev-day small { color: #ccc; } .ev[data-s="6"] .ev-ind { background: #fff; }
.ev[data-s="6"] .ev-card { background: #1c1c1e; color: #fff; box-shadow: none; }
.ev[data-s="6"] .ev-cht small { color: #aaa; }
.ev[data-s="6"] .ev-c1 .ev-row { background: #2a2a2c; color: #fff; }
.ev[data-s="6"] .ev-cfoot, .ev[data-s="6"] .ev-row .ev-chev { color: #888; }
.ev[data-s="6"] .ev-tabs { background: #000; } .ev[data-s="6"] .ev-tab { color: #555; } .ev[data-s="6"] .ev-tab.on { color: #fff; }
.ev[data-s="6"] .ev-live { background: #000; color: #fff; box-shadow: 0 0 0 1px #333; }
.ev[data-s="6"] .ev-drum { filter: saturate(1.4) brightness(1.08); }

/* choreography: shared pieces (panel, dates, chips, main card, maps) morph the whole way;
   pieces that only belong to some months leave first (fast fade, in place, then jump away
   unseen) and arrive late (jump into place unseen, then fade and settle in) */
.ev .ev-c2, .ev .ev-drum, .ev .ev-floor, .ev .ev-toggle, .ev .ev-pins > i, .ev .ev-badge, .ev .ev-fhead, .ev .ev-search, .ev .ev-head0, .ev .ev-plan {
  transition: opacity .24s ease, transform .3s ease, filter .3s ease, top 0s .3s, left 0s .3s, width 0s .3s, height 0s .3s, border-radius 0s .3s,
    background-color .6s ease, color .6s ease, box-shadow .6s ease; }
.ev[data-s="0"] .ev-c2, .ev[data-s="3"] .ev-c2, .ev[data-s="5"] .ev-c2, .ev[data-s="6"] .ev-c2, .ev[data-s="5"] .ev-drum, .ev[data-s="6"] .ev-drum,
.ev[data-s="4"] .ev-floor, .ev[data-s="3"] .ev-toggle, .ev[data-s="2"] .ev-pins > i, .ev[data-s="1"] .ev-badge, .ev[data-s="4"] .ev-fhead,
.ev[data-s="5"] .ev-search, .ev[data-s="6"] .ev-search, .ev[data-s="0"] .ev-head0, .ev[data-s="1"] .ev-head0, .ev[data-s="2"] .ev-head0, .ev[data-s="4"] .ev-plan {
  transition: opacity .55s var(--e) .4s, transform .8s var(--e) .4s, filter .6s ease .4s, top 0s, left 0s, width 0s, height 0s, border-radius 0s,
    background-color .6s ease, color .6s ease, box-shadow .6s ease; }
.ev[data-s="3"] .ev-chips { transition: opacity .5s var(--e) .4s, transform .7s var(--e) .4s, top 0s, left 0s; }
.ev[data-s="2"] .ev-pins .p1 { transition-delay: .5s; } .ev[data-s="2"] .ev-pins .p2 { transition-delay: .6s; } .ev[data-s="2"] .ev-pins .p3 { transition-delay: .7s; }
/* the main card waits beside the floor view where it will come back, so it never crosses it */
.ev[data-s="4"] .ev-c1 { top: 369px; transform: translateY(24px) scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .ev > *, .ev-card, .ev-card > *, .ev-ch > *, .ev-row, .ev-row > *, .ev-day, .ev-day > *, .ev-chips > span, .ev-tab, .ev-pins > i { transition-duration: .01s !important; }
}