/* ── Homepage pillar artwork ────────────────────────────────────────────────
   One looping product demo per pillar tab (home/pillars/art/_<key>.html.erb).
   Loaded by home/index only — it is ~200KB of per-tab keyframes and nothing
   else on the site uses it, which is why it lives in lib/assets and not in
   app/assets (stylesheet_link_tag :app would put it on every page).

   THE STAGE IS A FIXED 726×548 SCENE, SCALED. That is the art column's size at
   1440 (panel 1118 wide, minus the 400px left column and its 32px gap, plus
   the 40px bleed on the right, top and bottom), and every position inside a
   scene is authored against it. pillar_stage_controller writes --stage-scale
   from the column's width, so a phone shows the same shot, smaller, instead of
   a reflowed one.

   SCENES ARE AUTHORED ON A BLANK PAGE, NOT ON TAILWIND'S PREFLIGHT. The reset
   below restores the defaults they were drawn against (content-box, normal
   line-height, inline images and SVGs) — without it every padded box and
   every icon beside text shifts.

   Everything under here is generated from the mock-up canvas by the same
   script; edit the scene there and regenerate rather than hand-patching one
   keyframe. */
.pillar-stage {
  position: relative;
  width: 100%;
  height: calc(548px * var(--stage-scale, 1));
  overflow: hidden;
}
@media (min-width: 1024px) {
  .pillar-stage { height: 100%; }
}
.pillar-stage__inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 726px;
  height: 548px;
  transform: scale(var(--stage-scale, 1));
  transform-origin: 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: normal;
  color: var(--s-text, #0a0a0a);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.pillar-stage__inner *,
.pillar-stage__inner *::before,
.pillar-stage__inner *::after { box-sizing: content-box; }
.pillar-stage__inner img,
.pillar-stage__inner svg { display: inline; vertical-align: baseline; max-width: none; }
.pillar-stage__inner img { height: auto; }
.pillar-stage__inner b { font-weight: 700; }
.pillar-stage__inner p { margin: 0; }

/* Off screen, or before the controller has connected, nothing moves: six
   cards looping out of view is compositing nobody is watching. */
.pillar-stage:not(.is-playing) .pillar-stage__inner * { animation-play-state: paused !important; }

/* The real calendar-sync hero keeps its own tiles; the scenes only size it. */
.pillar-stage__inner .calendar-sync { box-sizing: border-box; }
.pillar-stage__inner .calendar-sync-tile { box-sizing: border-box; }

/* ── Contrast ──────────────────────────────────────────────────────────────
   The scenes were drawn with pale greys (#a1a1aa, #9ca3af) for labels and
   placeholders, which read at 2.5:1 on white. Light mode pins the muted token
   to a grey that clears WCAG AA (4.5:1) on white and on the subtle wells; the
   tinted families below get the same treatment in dark. */
.pillar-stage__inner { --s-muted: #6b6b76; }

/* ── Dark ──────────────────────────────────────────────────────────────────
   The scenes' neutrals are custom properties whose fallback is the light
   value they were drawn with (the generator swaps them in by property), so
   dark mode is these tokens and nothing else. The values are the app's own
   dark UI: neutral-900 surfaces, neutral-800 wells, neutral-700 hairlines.
   The tints are OPAQUE, pre-mixed over the surface: a translucent one let the
   label a tinted overlay is meant to cover show through it. */
.dark .pillar-stage__inner {
  --s-surface: #171717;
  --s-subtle: #262626;
  --s-border: #404040;
  --s-border-strong: #737373;
  --s-text: #f5f5f5;
  --s-text2: #d4d4d4;
  --s-muted: #a3a3a3;
  --s-ok: #6ee7b7;
  --s-ok-bg: #163128;
  --s-bad: #fca5a5;
  --s-bad-bg: #3a1e1e;
  --s-brand-bg: #3d2022;
  --s-warn: #fcd34d;
  --s-warn-bg: #393015;
  --s-brand: #f7858f;
  --s-violet: #c4b5fd;
  --s-violet-bg: #2c233f;
  --s-teal: #5eead4;
  --s-teal-bg: #1a312f;
  --s-blue: #93c5fd;
  --s-blue-bg: #1e2a3f;
  --s-peach: #fdba8c;
  --s-peach-bg: #3d2315;
  --s-glass: rgb(38 38 38 / 0.94);
  --s-glass-soft: rgb(23 23 23 / 0.75);
  --s-wash: rgb(38 38 38 / 0.7);
}
/* A light screen's edge is its shadow; on a dark card that shadow vanishes,
   so the frame gets the hairline instead. */
.dark .pillar-stage__inner .screen,
.dark .pillar-stage__inner .frag,
.dark .pillar-stage__inner .sheet,
.dark .pillar-stage__inner .rc { box-shadow: 0 0 0 1px #404040, 0 40px 80px -24px rgb(0 0 0 / 0.7); }

/* The two maps have dark renders (mapbox/dark-v11, the funding hub's dark fills). */
.pillar-stage__inner .pillar-dark { display: none !important; }
.dark .pillar-stage__inner .pillar-dark { display: block !important; }
.dark .pillar-stage__inner .pillar-light { display: none !important; }

/* Main -> map_search */
.pillar-art--map_search .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(15 30 60/.35);overflow:hidden}
.pillar-art--map_search .hdr{position:absolute;left:0;right:0;top:0;height:84px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px;gap:22px}
.pillar-art--map_search .seg{display:flex;background:var(--s-subtle,#f4f4f5);border-radius:999px;padding:5px}
.pillar-art--map_search .seg span{padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--s-text2,#3f3f46)}
.pillar-art--map_search .seg .on{background:var(--s-surface,#fff);color:var(--s-text,#0a0a0a);box-shadow:0 1px 3px rgb(0 0 0/.12)}
.pillar-art--map_search .sp{display:flex;align-items:center;border:1px solid var(--s-border,#e4e4e7);border-radius:999px;height:58px;padding-left:8px;box-shadow:0 2px 10px rgb(0 0 0/.06)}
.pillar-art--map_search .sf{padding:0 22px;border-left:1px solid var(--s-border,#e4e4e7);line-height:1.25}
.pillar-art--map_search .sf:first-child{border-left:0}
.pillar-art--map_search .sf b{display:block;font-size:12.5px;font-weight:600}
.pillar-art--map_search .sf span{font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--map_search .sgo{width:46px;height:46px;border-radius:50%;background:#c5303e;margin:0 6px 0 8px;display:flex;align-items:center;justify-content:center}
.pillar-art--map_search .card{position:absolute;width:296px}
.pillar-art--map_search .ph{position:relative;width:296px;height:222px;border-radius:16px;overflow:hidden;margin-bottom:10px;background:var(--s-subtle,#eee)}
.pillar-art--map_search .ph img{width:100%;height:100%;object-fit:cover;display:block}
.pillar-art--map_search .heart{position:absolute;right:14px;top:14px;filter:drop-shadow(0 1px 2px rgb(0 0 0/.4))}
.pillar-art--map_search .ct{font-size:16.5px;font-weight:600;letter-spacing:-.2px}
.pillar-art--map_search .cm{font-size:14.5px;color:var(--s-muted,#71717a);line-height:1.4}
.pillar-art--map_search .cr{font-size:14px;color:var(--s-brand,#b8293a);font-weight:600;display:flex;align-items:center;gap:5px;margin-top:1px}
.pillar-art--map_search .cp{font-size:15px;font-weight:700;margin-top:3px}
.pillar-art--map_search .cp span{font-weight:400;color:var(--s-muted,#71717a)}
.pillar-art--map_search .mapc{position:absolute;left:692px;top:104px;width:560px;height:700px;border-radius:18px;overflow:hidden;background:var(--s-subtle,#e9eef2)}
.pillar-art--map_search .layer{position:absolute;left:0;top:0;width:1100px;height:1000px;animation-name:map_search--drag}
.pillar-art--map_search .layer img{width:1100px;height:1000px;display:block}
.pillar-art--map_search .pin{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#c5303e;border:2.5px solid #fff;box-sizing:border-box;box-shadow:0 2px 6px rgb(0 0 0/.3)}
.pillar-art--map_search .clu{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--s-surface,#fff);border:2px solid #e84855;box-sizing:border-box;color:var(--s-brand,#b8293a);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgb(0 0 0/.25)}
.pillar-art--map_search .ctl{position:absolute;right:16px;display:flex;flex-direction:column;background:var(--s-surface,#fff);border-radius:12px;box-shadow:0 2px 8px rgb(0 0 0/.18);overflow:hidden}
.pillar-art--map_search .ctl span{width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.pillar-art--map_search .sta{position:absolute;left:50%;top:18px;margin-left:-86px;width:172px;height:42px;border-radius:999px;background:var(--s-surface,#fff);box-shadow:0 8px 20px rgb(0 0 0/.18),0 0 0 1px rgb(0 0 0/.05);display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:500;animation-name:map_search--sta}
.pillar-art--map_search .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--map_search .pa{animation-duration:11s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--map_search .pa{animation-play-state:paused;animation-delay:-7s !important}}
.pillar-art--map_search .new{animation-name:map_search--pop}
.pillar-art--map_search .setA{animation-name:map_search--outA}
.pillar-art--map_search .setB{animation-name:map_search--inB}
.pillar-art--map_search .cntA{animation-name:map_search--cntA}
.pillar-art--map_search .cntB{animation-name:map_search--cntB}
.pillar-art--map_search .cur{animation-name:map_search--cur}
.pillar-art--map_search .press{animation-name:map_search--press}
@keyframes map_search--drag{0%,12%{transform:translate(-199px,-102px)}40%,88%{transform:translate(-419px,-240px)}98%,100%{transform:translate(-199px,-102px)}}
@keyframes map_search--sta{0%,41%{opacity:0;transform:translateY(-8px)}45%,54%{opacity:1;transform:none}57%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes map_search--press{0%,52%{scale:1}53.5%{scale:.94}55%,100%{scale:1}}
@keyframes map_search--pop{0%,56%{transform:scale(0);opacity:0}61%{transform:scale(1.25);opacity:1}65%,88%{transform:scale(1);opacity:1}93%,100%{transform:scale(0);opacity:0}}
@keyframes map_search--outA{0%,54%{opacity:1;transform:none}58%,93%{opacity:0;transform:translateY(8px)}99%,100%{opacity:1;transform:none}}
@keyframes map_search--inB{0%,57%{opacity:0;transform:translateY(14px)}64%,89%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(14px)}}
@keyframes map_search--cntA{0%,56%{opacity:1}57.5%,95%{opacity:0}97%,100%{opacity:1}}
@keyframes map_search--cntB{0%,56%{opacity:0}57.5%,95%{opacity:1}97%,100%{opacity:0}}
@keyframes map_search--cur{0%{opacity:0;transform:translate(1060px,560px)}6%{opacity:1;transform:translate(990px,470px) scale(1)}11%{transform:translate(990px,470px) scale(1)}12.5%{transform:translate(990px,470px) scale(.85)}40%{transform:translate(770px,332px) scale(.85)}42%{transform:translate(770px,332px) scale(1)}51%{transform:translate(968px,140px) scale(1)}53%{transform:translate(968px,140px) scale(.85)}55%{opacity:1;transform:translate(968px,140px) scale(1)}66%{opacity:1;transform:translate(1010px,300px)}71%,100%{opacity:0;transform:translate(1010px,300px)}}

/* Filters -> filters */
.pillar-art--filters .rc{position:absolute;width:300px;background:var(--s-surface,#fff);border-radius:22px;padding:12px 12px 16px;box-sizing:border-box;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -20px rgb(15 30 60/.3)}
.pillar-art--filters .rc .ph{position:relative;height:200px;border-radius:14px;overflow:hidden}
.pillar-art--filters .rc img{width:100%;height:100%;object-fit:cover;display:block}
.pillar-art--filters .badge{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:5px;background:var(--s-surface,#fff);color:var(--s-text,#0a0a0a);font-size:12.5px;font-weight:600;border-radius:999px;padding:5px 10px;box-shadow:0 2px 6px rgb(0 0 0/.18)}
.pillar-art--filters .rc .t{font-size:16.5px;font-weight:600;letter-spacing:-.2px;margin:12px 4px 2px}
.pillar-art--filters .rc .m{font-size:14px;color:var(--s-muted,#71717a);margin:0 4px}
.pillar-art--filters .tags{display:flex;gap:6px;margin:10px 4px 0;flex-wrap:wrap}
.pillar-art--filters .tags span{font-size:12px;font-weight:600;color:var(--s-text2,#3f3f46);background:var(--s-subtle,#f4f4f5);border-radius:999px;padding:4px 10px}
.pillar-art--filters .sheet{position:absolute;left:24px;top:30px;width:452px;background:var(--s-surface,#fff);border-radius:24px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 40px 80px -20px rgb(15 30 60/.4);overflow:hidden}
.pillar-art--filters .sh{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--s-border,#e5e7eb);font-size:16px;font-weight:600}
.pillar-art--filters .sb{padding:4px 20px 6px}
.pillar-art--filters .lg{font-size:14px;font-weight:600;margin:16px 0 10px}
.pillar-art--filters .row{display:flex;gap:8px;flex-wrap:wrap}
.pillar-art--filters .chip{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--s-text2,#374151);border:1px solid var(--s-border,#d1d5db);background:var(--s-surface,#fff);white-space:nowrap}
.pillar-art--filters .chip.m{padding-left:12px}
.pillar-art--filters .box{width:16px;height:16px;border-radius:4px;border:1px solid var(--s-border-strong,#9ca3af);box-sizing:border-box;flex:none}
.pillar-art--filters .chip.sel{background:#c5303e;border-color:transparent;color:#fff}
.pillar-art--filters .on{position:absolute;inset:-1px;border-radius:999px;background:#c5303e;color:#fff;display:flex;align-items:center;gap:8px;padding:0 16px;box-sizing:border-box;font-size:14px;font-weight:500}
.pillar-art--filters .chip.m .on{padding-left:12px}
.pillar-art--filters .onbox{width:16px;height:16px;border-radius:4px;border:1px solid rgb(255 255 255/.7);background:rgb(255 255 255/.2);box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none}
.pillar-art--filters .sf{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--s-border,#e5e7eb);margin-top:14px}
.pillar-art--filters .go{background:#c5303e;color:#fff;font-size:14px;font-weight:600;border-radius:999px;padding:10px 20px}
.pillar-art--filters .pa{animation-duration:9s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:ease}
@media (prefers-reduced-motion:reduce){.pillar-art--filters .pa{animation-play-state:paused;animation-delay:-5s !important}}
.pillar-art--filters .o1{animation-name:filters--o1}
.pillar-art--filters .o2{animation-name:filters--o2}
.pillar-art--filters .o3{animation-name:filters--o3}
.pillar-art--filters .o4{animation-name:filters--o4}
@keyframes filters--o1{0%,10%{opacity:0;transform:scale(.92)}13%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes filters--o2{0%,22%{opacity:0;transform:scale(.92)}25%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes filters--o3{0%,34%{opacity:0;transform:scale(.92)}37%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes filters--o4{0%,46%{opacity:0;transform:scale(.92)}49%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
.pillar-art--filters .pulse{animation-name:filters--pulse}
@keyframes filters--pulse{0%,56%{transform:none;box-shadow:0 0 0 0 rgb(197 48 62/0)}60%{transform:scale(.95);box-shadow:0 0 0 6px rgb(197 48 62/.18)}64%,100%{transform:none;box-shadow:0 0 0 0 rgb(197 48 62/0)}}
.pillar-art--filters .lift{animation-name:filters--lift}
@keyframes filters--lift{0%,60%{transform:translateY(0);opacity:.55;filter:saturate(.4)}68%,90%{transform:translateY(-6px);opacity:1;filter:none}97%,100%{transform:translateY(0);opacity:.55;filter:saturate(.4)}}

/* Directories -> directories */
.pillar-art--directories .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(15 30 60/.35);overflow:hidden}
.pillar-art--directories .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7);z-index:5}
.pillar-art--directories .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--directories .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7)}
.pillar-art--directories .url span{position:absolute;left:38px;top:7px;font-size:14.5px;color:var(--s-text2,#3f3f46);white-space:nowrap}
.pillar-art--directories .hdr{position:absolute;left:0;right:0;top:54px;height:84px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px;gap:22px;background:var(--s-surface,#fff)}
.pillar-art--directories .seg{display:flex;background:var(--s-subtle,#f4f4f5);border-radius:999px;padding:5px}
.pillar-art--directories .seg span{padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--s-text2,#3f3f46)}
.pillar-art--directories .seg .on{background:var(--s-surface,#fff);color:var(--s-text,#0a0a0a);box-shadow:0 1px 3px rgb(0 0 0/.12)}
.pillar-art--directories .sp{display:flex;align-items:center;border:1px solid var(--s-border,#e4e4e7);border-radius:999px;height:58px;padding-left:8px;box-shadow:0 2px 10px rgb(0 0 0/.06)}
.pillar-art--directories .sf{padding:0 22px;border-left:1px solid var(--s-border,#e4e4e7);line-height:1.25}
.pillar-art--directories .sf:first-child{border-left:0}
.pillar-art--directories .sf b{display:block;font-size:12.5px;font-weight:600}
.pillar-art--directories .sf span{font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--directories .sgo{width:46px;height:46px;border-radius:50%;background:#c5303e;margin:0 6px 0 8px;display:flex;align-items:center;justify-content:center}
.pillar-art--directories .box{position:absolute;left:150px;top:84px;width:680px;height:52px;border-radius:26px;box-shadow:0 1px 6px rgb(32 33 36/.2);display:flex;align-items:center;gap:14px;padding:0 22px;box-sizing:border-box;font-size:17px}
.pillar-art--directories .q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation-name:directories--type;animation-timing-function:steps(34,end)}
.pillar-art--directories .caret{display:inline-block;width:2px;height:20px;background:#0a0a0a;vertical-align:-3px;margin-left:1px;animation-name:directories--caret;animation-timing-function:linear}
.pillar-art--directories .res{position:absolute;left:150px;width:640px}
.pillar-art--directories .src{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pillar-art--directories .fav{width:30px;height:30px;border-radius:50%;background:var(--s-subtle,#f1f3f4);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.pillar-art--directories .sn{font-size:14.5px;line-height:1.3}
.pillar-art--directories .sn small{display:block;font-size:12.5px;color:var(--s-muted,#4d5156)}
.pillar-art--directories .tt{font-size:21px;color:var(--s-blue,#1a0dab);line-height:1.3;margin-bottom:4px}
.pillar-art--directories .dd{font-size:14.5px;color:var(--s-muted,#4d5156);line-height:1.55}
.pillar-art--directories .spn{font-weight:700;font-size:13.5px;color:var(--s-text,#202124)}
.pillar-art--directories .pg-card{position:absolute;top:338px;width:370px}
.pillar-art--directories .pg-card .ph{width:370px;height:270px;border-radius:16px;overflow:hidden;margin-bottom:12px}
.pillar-art--directories .pg-card img{width:100%;height:100%;object-fit:cover;display:block}
.pillar-art--directories .ct{font-size:17px;font-weight:600;letter-spacing:-.2px}
.pillar-art--directories .cm{font-size:15px;color:var(--s-muted,#71717a);line-height:1.45}
.pillar-art--directories .cp{font-size:15.5px;font-weight:700;margin-top:3px}
.pillar-art--directories .cp span{font-weight:400;color:var(--s-muted,#71717a)}
.pillar-art--directories .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--directories .pa{animation-duration:11s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--directories .pa{animation-play-state:paused;animation-delay:-7.5s !important}}
@keyframes directories--type{0%,2%{max-width:0}16%,96%{max-width:420px}99%,100%{max-width:0}}
@keyframes directories--caret{0%,17%{opacity:1}18%,100%{opacity:0}}
.pillar-art--directories .stA{animation-name:directories--stA}
@keyframes directories--stA{0%,40%{opacity:1}44%,96%{opacity:0}98%,100%{opacity:1}}
.pillar-art--directories .stB{animation-name:directories--stB}
@keyframes directories--stB{0%,42%{opacity:0;transform:translateY(16px)}48%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.pillar-art--directories .uA{animation-name:directories--uA}
.pillar-art--directories .uB{animation-name:directories--uB}
@keyframes directories--uA{0%,41%{opacity:1}42%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes directories--uB{0%,41%{opacity:0}42%,97%{opacity:1}99%,100%{opacity:0}}
.pillar-art--directories .r{animation-name:directories--r}
@keyframes directories--r{0%,17%{opacity:0;transform:translateY(8px)}22%,100%{opacity:1;transform:none}}
.pillar-art--directories .hl{animation-name:directories--hl}
@keyframes directories--hl{0%,34%{text-decoration-color:transparent}36%,100%{text-decoration-color:#1a0dab}}
.pillar-art--directories .cardin{animation-name:directories--cardin}
@keyframes directories--cardin{0%,47%{opacity:0;transform:translateY(18px)}55%,100%{opacity:1;transform:none}}
.pillar-art--directories .cur{animation-name:directories--cur}
@keyframes directories--cur{0%,22%{opacity:0;transform:translate(700px,700px)}26%{opacity:1;transform:translate(620px,600px) scale(1)}36%{transform:translate(296px,556px) scale(1)}37.5%{transform:translate(296px,556px) scale(.85)}39%{opacity:1;transform:translate(296px,556px) scale(1)}43%,100%{opacity:0;transform:translate(296px,556px)}}

/* GroupPage -> group_page */
.pillar-art--group_page .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(15 30 60/.35);overflow:hidden}
.pillar-art--group_page .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7);z-index:5}
.pillar-art--group_page .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--group_page .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7)}
.pillar-art--group_page .url>span{position:absolute;left:38px;top:7px;font-size:14.5px;color:var(--s-text,#18181b);white-space:nowrap}
.pillar-art--group_page .hdr{position:absolute;left:0;right:0;top:54px;height:84px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px;gap:22px;background:var(--s-surface,#fff)}
.pillar-art--group_page .seg{display:flex;background:var(--s-subtle,#f4f4f5);border-radius:999px;padding:5px}
.pillar-art--group_page .seg span{padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--s-text2,#3f3f46)}
.pillar-art--group_page .sp{display:flex;align-items:center;border:1px solid var(--s-border,#e4e4e7);border-radius:999px;height:58px;padding-left:8px;box-shadow:0 2px 10px rgb(0 0 0/.06)}
.pillar-art--group_page .sf{padding:0 22px;border-left:1px solid var(--s-border,#e4e4e7);line-height:1.25}
.pillar-art--group_page .sf:first-child{border-left:0}
.pillar-art--group_page .sf b{display:block;font-size:12.5px;font-weight:600}
.pillar-art--group_page .sf span{font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--group_page .sgo{width:46px;height:46px;border-radius:50%;background:#c5303e;margin:0 6px 0 8px;display:flex;align-items:center;justify-content:center}
.pillar-art--group_page .q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation-name:group_page--type;animation-timing-function:steps(19,end)}
.pillar-art--group_page .caret{display:inline-block;width:1.5px;height:17px;background:#0a0a0a;vertical-align:-3px;margin-left:1px;animation-name:group_page--caret;animation-timing-function:linear}
.pillar-art--group_page .tab{position:absolute;top:424px;height:36px;font-size:16px;font-weight:600;color:var(--s-muted,#71717a);display:flex;align-items:center}
.pillar-art--group_page .ul{position:absolute;top:462px;height:3px;border-radius:2px;background:#0a0a0a;animation-name:group_page--ul}
.pillar-art--group_page .row{position:absolute;left:60px;width:1080px;height:70px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--s-border,#f0f0f2)}
.pillar-art--group_page .row img{width:96px;height:64px;border-radius:12px;object-fit:cover;display:block}
.pillar-art--group_page .row b{display:block;font-size:17px;font-weight:600;letter-spacing:-.2px}
.pillar-art--group_page .row small{font-size:14.5px;color:var(--s-muted,#71717a)}
.pillar-art--group_page .row .pr{margin-left:auto;font-size:16px;font-weight:700}
.pillar-art--group_page .row .pr span{font-weight:400;color:var(--s-muted,#71717a);font-size:14.5px}
.pillar-art--group_page .staff{position:absolute;top:500px;width:250px;padding:22px;box-sizing:border-box;border:1px solid var(--s-border,#ececef);border-radius:18px}
.pillar-art--group_page .av{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;margin-bottom:14px}
.pillar-art--group_page .staff b{display:block;font-size:17px}
.pillar-art--group_page .staff small{display:block;font-size:14px;color:var(--s-muted,#71717a);margin-top:3px;line-height:1.4}
.pillar-art--group_page .gal{position:absolute;width:258px;height:176px;border-radius:14px;object-fit:cover;display:block}
.pillar-art--group_page .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--group_page .pa{animation-duration:14s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--group_page .pa{animation-play-state:paused;animation-delay:-11.5s !important}}
@keyframes group_page--type{0%,2%{max-width:0}12%,97%{max-width:200px}99%,100%{max-width:0}}
@keyframes group_page--caret{0%,13%{opacity:1}14%,100%{opacity:0}}
.pillar-art--group_page .page{animation-name:group_page--page}
@keyframes group_page--page{0%,14%{opacity:0;transform:translateY(14px)}19%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes group_page--ul{0%,29%{left:60px;width:74px}31%,46%{left:162px;width:46px}48%,62%{left:334px;width:58px}64%,100%{left:60px;width:74px}}
.pillar-art--group_page .tC{animation-name:group_page--tC}
.pillar-art--group_page .tS{animation-name:group_page--tS}
.pillar-art--group_page .tP{animation-name:group_page--tP}
@keyframes group_page--tC{0%,29%{color:var(--s-text,#0a0a0a)}30%,63%{color:var(--s-muted,#71717a)}64%,100%{color:var(--s-text,#0a0a0a)}}
@keyframes group_page--tS{0%,29%{color:var(--s-muted,#71717a)}30%,46%{color:var(--s-text,#0a0a0a)}47%,100%{color:var(--s-muted,#71717a)}}
@keyframes group_page--tP{0%,46%{color:var(--s-muted,#71717a)}47%,62%{color:var(--s-text,#0a0a0a)}63%,100%{color:var(--s-muted,#71717a)}}
.pillar-art--group_page .vC{animation-name:group_page--vC}
.pillar-art--group_page .vS{animation-name:group_page--vS}
.pillar-art--group_page .vP{animation-name:group_page--vP}
@keyframes group_page--vC{0%,29%{opacity:1}30%,63%{opacity:0}65%,100%{opacity:1}}
@keyframes group_page--vS{0%,29%{opacity:0;transform:translateY(10px)}32%,46%{opacity:1;transform:none}47%,100%{opacity:0}}
@keyframes group_page--vP{0%,46%{opacity:0;transform:translateY(10px)}49%,62%{opacity:1;transform:none}63%,100%{opacity:0}}
.pillar-art--group_page .scrim{animation-name:group_page--scrim}
@keyframes group_page--scrim{0%,73%{opacity:0}76%,93%{opacity:1}96%,100%{opacity:0}}
.pillar-art--group_page .modal{animation-name:group_page--modal}
@keyframes group_page--modal{0%,73%{opacity:0;transform:translateY(24px) scale(.97)}77%,93%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(24px) scale(.97)}}
.pillar-art--group_page .press{animation-name:group_page--press}
@keyframes group_page--press{0%,71%{scale:1}72%{scale:.95}73.5%,100%{scale:1}}
.pillar-art--group_page .cur{animation-name:group_page--cur}
@keyframes group_page--cur{0%,20%{opacity:0;transform:translate(560px,700px)}24%{opacity:1;transform:translate(420px,620px) scale(1)}29%{transform:translate(181px,438px) scale(1)}30%{transform:translate(181px,438px) scale(.85)}31.5%{transform:translate(181px,438px) scale(1)}46%{transform:translate(359px,438px) scale(1)}47%{transform:translate(359px,438px) scale(.85)}48.5%{transform:translate(359px,438px) scale(1)}62%{transform:translate(93px,438px) scale(1)}63%{transform:translate(93px,438px) scale(.85)}64.5%{transform:translate(93px,438px) scale(1)}71%{transform:translate(1082px,733px) scale(1)}72%{transform:translate(1082px,733px) scale(.85)}73.5%{opacity:1;transform:translate(1082px,733px) scale(1)}78%,100%{opacity:0;transform:translate(1082px,733px)}}
.pillar-art--group_page .csync{position:relative;display:flex;height:150px;align-items:center;justify-content:center;gap:104px;overflow:hidden;margin:-30px -30px 8px;border-radius:22px 22px 0 0}
.pillar-art--group_page .csync::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#d4d4d8 1px,transparent 1.2px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 20%,transparent 75%);opacity:.7}
.pillar-art--group_page .csync-in{position:relative;z-index:1;display:block;animation-name:group_page--csyncIn;animation-timing-function:cubic-bezier(.2,.9,.3,1.2)}
.pillar-art--group_page .csync-tile{display:grid;height:64px;width:64px;place-items:center;border-radius:18px;border:1px solid var(--s-border,#e4e4e7);background:var(--s-surface,#fff);box-sizing:border-box;box-shadow:0 0 0 8px rgba(232,72,85,.07),0 4px 14px -4px rgba(232,72,85,.25),inset 0 -2px 0 rgba(0,0,0,.04)}
.pillar-art--group_page .csync-cal{width:38px;overflow:hidden;border-radius:8px;background:var(--s-surface,#fff);text-align:center;font-weight:700;box-shadow:0 0 0 1px var(--s-border,#e4e4e7)}
.pillar-art--group_page .csync-cal span:first-child{display:block;background:#c5303e;color:#fff;font-size:9px;line-height:13px;letter-spacing:.08em}
.pillar-art--group_page .csync-cal span:last-child{display:block;font-size:19px;line-height:25px;color:var(--s-text,#18181b)}
@keyframes group_page--csyncIn{0%,74%{opacity:0;transform:translateY(6px) scale(.9)}77.6%,100%{opacity:1;transform:none}}
.pillar-art--group_page .frag{animation-name:group_page--frag}
@keyframes group_page--frag{0%,73%{opacity:0;transform:translateY(40px) scale(.97)}77%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(40px) scale(.97)}}
.pillar-art--group_page .wd{text-align:center;font-size:11.5px;color:var(--s-muted,#71717a)}
.pillar-art--group_page .wd b{display:block;font-size:16px;color:var(--s-text,#0a0a0a);font-weight:600}
.pillar-art--group_page .cell{height:54px;border-radius:10px;background:var(--s-subtle,#fafafa);padding:4px;box-sizing:border-box}
.pillar-art--group_page .blk{display:block;height:100%;border-radius:7px;background:var(--s-blue-bg,#e4eef7);border-left:3px solid #3f6b96;color:var(--s-blue,#1e3a5f);font-size:10.5px;font-weight:600;padding:4px 5px;box-sizing:border-box;line-height:1.2}
.pillar-art--group_page .newblk{animation-name:group_page--newblk}
@keyframes group_page--newblk{0%,79%{opacity:0;transform:translateY(-24px)}83%{opacity:1;transform:translateY(3px)}85%,94%{opacity:1;transform:none;box-shadow:0 0 0 3px rgb(63 107 150/.3)}98%,100%{opacity:0}}
.pillar-art--group_page .note{animation-name:group_page--note}
@keyframes group_page--note{0%,82%{opacity:0;transform:translateY(10px)}85%,94%{opacity:1;transform:none}97%,100%{opacity:0}}

/* Following -> following */
.pillar-art--following .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(15 30 60/.35);overflow:hidden}
.pillar-art--following .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--following .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--following .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--following .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--following .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--following .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--following .stt{position:absolute;left:0;right:0;top:0;bottom:0}
.pillar-art--following .h1{position:absolute;left:60px;top:176px;font-size:32px;font-weight:700;letter-spacing:-.6px}
.pillar-art--following .bc{position:absolute;left:60px;top:152px;font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--following .pub{position:absolute;left:1000px;top:166px;height:48px;width:150px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:600;box-sizing:border-box}
.pillar-art--following .photo{position:absolute;left:60px;top:250px;width:480px;height:300px;border-radius:18px;object-fit:cover;display:block}
.pillar-art--following .facts{position:absolute;left:580px;top:250px;width:570px}
.pillar-art--following .fact{display:flex;gap:14px;align-items:center;font-size:16px;padding:12px 0;border-bottom:1px solid var(--s-border,#f0f0f2)}
.pillar-art--following .fact span{width:70px;color:var(--s-muted,#71717a);font-size:14.5px}
.pillar-art--following .lg{position:absolute;left:580px;top:440px;font-size:15px;font-weight:600}
.pillar-art--following .opt{position:absolute;left:580px;width:570px;height:62px;border:1px solid var(--s-border,#e4e4e7);border-radius:14px;display:flex;align-items:center;gap:12px;padding:0 18px;box-sizing:border-box}
.pillar-art--following .opt b{display:block;font-size:15px;font-weight:600}
.pillar-art--following .opt small{font-size:13.5px;color:var(--s-muted,#71717a)}
.pillar-art--following .rad{position:absolute;right:18px;top:20px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--s-border-strong,#a1a1aa);box-sizing:border-box}
.pillar-art--following .radon{position:absolute;inset:-1.5px;border-radius:50%;border:6px solid #c5303e;box-sizing:border-box}
.pillar-art--following .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(15 30 60/.45)}
.pillar-art--following .cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:30;filter:drop-shadow(0 1px 2px rgb(0 0 0/.3))}
.pillar-art--following .pa{animation-duration:15s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--following .pa{animation-play-state:paused;animation-delay:-4s !important}}
.pillar-art--following .sA{animation-name:following--sA}
.pillar-art--following .sB{animation-name:following--sB}
@keyframes following--sA{0%,42%{opacity:1}46%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes following--sB{0%,43%{opacity:0}47%,96%{opacity:1}98%,100%{opacity:0}}
.pillar-art--following .pubA{animation-name:following--pubA}
.pillar-art--following .pdA{animation-name:following--pdA}
@keyframes following--pubA{0%,11.5%{opacity:1}12.5%,100%{opacity:0}}
@keyframes following--pdA{0%,11.5%{opacity:0}12.5%,100%{opacity:1}}
.pillar-art--following .pubB{animation-name:following--pubB}
.pillar-art--following .pdB{animation-name:following--pdB}
@keyframes following--pubB{0%,57.5%{opacity:1}58.5%,100%{opacity:0}}
@keyframes following--pdB{0%,57.5%{opacity:0}58.5%,100%{opacity:1}}
.pillar-art--following .rPub{animation-name:following--rPub}
.pillar-art--following .rMem{animation-name:following--rMem}
@keyframes following--rPub{0%,51.5%{opacity:1}52.5%,100%{opacity:0}}
@keyframes following--rMem{0%,51.5%{opacity:0}52.5%,100%{opacity:1}}
.pillar-art--following .mail{animation-name:following--mail}
@keyframes following--mail{0%,14%{opacity:0;transform:translateY(40px)}19%,40%{opacity:1;transform:none}44%,100%{opacity:0;transform:translateY(40px)}}
.pillar-art--following .note{animation-name:following--note}
@keyframes following--note{0%,60%{opacity:0;transform:translateY(12px)}64%,76%{opacity:1;transform:none}79%,100%{opacity:0;transform:translateY(12px)}}
.pillar-art--following .set{animation-name:following--set}
@keyframes following--set{0%,78%{opacity:0;transform:translateY(40px)}82%,94%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(40px)}}
.pillar-art--following .tgl{animation-name:following--tgl}
@keyframes following--tgl{0%,86.5%{background:#c5303e}87.5%,100%{background:var(--s-border,#d4d4d8)}}
.pillar-art--following .knob{animation-name:following--knob}
@keyframes following--knob{0%,86.5%{transform:translateX(20px)}87.5%,100%{transform:none}}
.pillar-art--following .mut{animation-name:following--mut}
@keyframes following--mut{0%,87%{opacity:0}89%,100%{opacity:1}}
.pillar-art--following .cur{animation-name:following--cur}
@keyframes following--cur{0%{opacity:0;transform:translate(560px,300px)}4%{opacity:1;transform:translate(600px,250px) scale(1)}11%{transform:translate(663px,162px) scale(1)}12%{transform:translate(663px,162px) scale(.85)}13.5%{transform:translate(663px,162px) scale(1)}24%{opacity:1;transform:translate(640px,300px)}28%,45%{opacity:0;transform:translate(640px,300px)}48%{opacity:1;transform:translate(640px,300px) scale(1)}51.5%{transform:translate(692px,399px) scale(1)}52.5%{transform:translate(692px,399px) scale(.85)}54%{transform:translate(692px,399px) scale(1)}57.5%{transform:translate(663px,162px) scale(1)}58.5%{transform:translate(663px,162px) scale(.85)}60%{transform:translate(663px,162px) scale(1)}70%{opacity:1;transform:translate(560px,260px)}74%,80%{opacity:0;transform:translate(560px,260px)}83%{opacity:1;transform:translate(470px,380px) scale(1)}86.5%{transform:translate(414px,310px) scale(1)}87.5%{transform:translate(414px,310px) scale(.85)}89%{opacity:1;transform:translate(414px,310px) scale(1)}95%,100%{opacity:0;transform:translate(430px,340px)}}

/* WatchArea -> watch_area */
.pillar-art--watch_area .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(15 30 60/.35);overflow:hidden}
.pillar-art--watch_area .hdr{position:absolute;left:0;right:0;top:0;height:84px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px;gap:22px}
.pillar-art--watch_area .seg{display:flex;background:var(--s-subtle,#f4f4f5);border-radius:999px;padding:5px}
.pillar-art--watch_area .seg span{padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--s-text2,#3f3f46)}
.pillar-art--watch_area .seg .on{background:var(--s-surface,#fff);color:var(--s-text,#0a0a0a);box-shadow:0 1px 3px rgb(0 0 0/.12)}
.pillar-art--watch_area .sp{display:flex;align-items:center;border:1px solid var(--s-border,#e4e4e7);border-radius:999px;height:58px;padding-left:8px;box-shadow:0 2px 10px rgb(0 0 0/.06)}
.pillar-art--watch_area .sf{padding:0 22px;border-left:1px solid var(--s-border,#e4e4e7);line-height:1.25}
.pillar-art--watch_area .sf:first-child{border-left:0}
.pillar-art--watch_area .sf b{display:block;font-size:12.5px;font-weight:600}
.pillar-art--watch_area .sf span{font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--watch_area .sgo{width:46px;height:46px;border-radius:50%;background:#c5303e;margin:0 6px 0 8px;display:flex;align-items:center;justify-content:center}
.pillar-art--watch_area .mapc{position:absolute;left:692px;top:104px;width:560px;height:700px;border-radius:18px;overflow:hidden;background:var(--s-subtle,#e9eef2)}
.pillar-art--watch_area .layer{position:absolute;left:-540px;top:0;width:1100px;height:1000px}
.pillar-art--watch_area .layer img{width:1100px;height:1000px;display:block}
.pillar-art--watch_area .ctl{position:absolute;right:16px;display:flex;flex-direction:column;background:var(--s-surface,#fff);border-radius:12px;box-shadow:0 2px 8px rgb(0 0 0/.18);overflow:hidden}
.pillar-art--watch_area .ctl span{width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.pillar-art--watch_area .card{position:absolute;left:36px;top:280px;width:616px;border:1px solid var(--s-border,#e5e7eb);border-radius:18px;padding:26px;box-sizing:border-box;background:var(--s-surface,#fff)}
.pillar-art--watch_area .inp{height:46px;border:1px solid var(--s-border,#d1d5db);border-radius:10px;padding:0 14px;display:flex;align-items:center;font-size:16px;box-sizing:border-box}
.pillar-art--watch_area .q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation-name:watch_area--type;animation-timing-function:steps(16,end)}
.pillar-art--watch_area .caret{display:inline-block;width:1.5px;height:19px;background:#0a0a0a;vertical-align:-3px;margin-left:1px;animation-name:watch_area--caret;animation-timing-function:linear}
.pillar-art--watch_area .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(15 30 60/.45)}
.pillar-art--watch_area .cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:30;filter:drop-shadow(0 1px 2px rgb(0 0 0/.3))}
.pillar-art--watch_area .pa{animation-duration:14s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--watch_area .pa{animation-play-state:paused;animation-delay:-10s !important}}
@keyframes watch_area--type{0%,7%{max-width:0}19%,97%{max-width:200px}99%,100%{max-width:0}}
@keyframes watch_area--caret{0%,5%{opacity:0}6%,21%{opacity:1}22%,100%{opacity:0}}
.pillar-art--watch_area .form{animation-name:watch_area--form}
@keyframes watch_area--form{0%,26%{opacity:1}28%,96%{opacity:0}99%,100%{opacity:1}}
.pillar-art--watch_area .done{animation-name:watch_area--done}
@keyframes watch_area--done{0%,27%{opacity:0;transform:translateY(8px)}30%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--watch_area .press{animation-name:watch_area--press}
@keyframes watch_area--press{0%,24.5%{scale:1}25.5%{scale:.97}27%,100%{scale:1}}
.pillar-art--watch_area .drop{animation-name:watch_area--drop}
@keyframes watch_area--drop{0%,42%{opacity:0;transform:translateY(-40px)}46%{opacity:1;transform:translateY(4px)}48%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.pillar-art--watch_area .ring{animation-name:watch_area--ring}
@keyframes watch_area--ring{0%,46%{opacity:0;transform:scale(.4)}47%{opacity:.7;transform:scale(.4)}56%,100%{opacity:0;transform:scale(2.4)}}
.pillar-art--watch_area .mail{animation-name:watch_area--mail}
@keyframes watch_area--mail{0%,52%{opacity:0;transform:translateY(50px)}58%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(50px)}}
.pillar-art--watch_area .uns{animation-name:watch_area--uns}
@keyframes watch_area--uns{0%,76%{background:transparent}79%,93%{background:var(--s-brand-bg,#fdecee)}}
.pillar-art--watch_area .cur{animation-name:watch_area--cur}
@keyframes watch_area--cur{0%{opacity:0;transform:translate(260px,380px)}3%{opacity:1;transform:translate(200px,320px) scale(1)}6%{transform:translate(130px,304px) scale(1)}7%{transform:translate(130px,304px) scale(.85)}8.5%{transform:translate(130px,304px) scale(1)}23.5%{transform:translate(209px,377px) scale(1)}25%{transform:translate(209px,377px) scale(.85)}26.5%{opacity:1;transform:translate(209px,377px) scale(1)}34%,70%{opacity:0;transform:translate(260px,400px)}73%{opacity:1;transform:translate(420px,520px) scale(1)}77%{transform:translate(247px,514px) scale(1)}90%{opacity:1;transform:translate(247px,514px)}94%,100%{opacity:0;transform:translate(247px,514px)}}

/* Claim -> claim */
.pillar-art--claim .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(15 30 60/.35);overflow:hidden}
.pillar-art--claim .hdr{position:absolute;left:0;right:0;top:0;height:84px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px;gap:22px;background:var(--s-surface,#fff)}
.pillar-art--claim .seg{display:flex;background:var(--s-subtle,#f4f4f5);border-radius:999px;padding:5px}
.pillar-art--claim .seg span{padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--s-text2,#3f3f46)}
.pillar-art--claim .sp{display:flex;align-items:center;border:1px solid var(--s-border,#e4e4e7);border-radius:999px;height:58px;padding-left:8px;box-shadow:0 2px 10px rgb(0 0 0/.06)}
.pillar-art--claim .sf{padding:0 22px;border-left:1px solid var(--s-border,#e4e4e7);line-height:1.25}
.pillar-art--claim .sf:first-child{border-left:0}
.pillar-art--claim .sf b{display:block;font-size:12.5px;font-weight:600}
.pillar-art--claim .sf span{font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--claim .sgo{width:46px;height:46px;border-radius:50%;background:#c5303e;margin:0 6px 0 8px;display:flex;align-items:center;justify-content:center}
.pillar-art--claim .banner{position:absolute;left:60px;top:392px;width:1090px;height:104px;border:1px solid #fde68a;background:var(--s-warn-bg,#fffbeb);border-radius:18px;box-sizing:border-box;animation-name:claim--banner}
.pillar-art--claim .bi{position:absolute;left:22px;top:26px;width:40px;height:40px;border-radius:12px;background:var(--s-warn-bg,#fef3c7);display:flex;align-items:center;justify-content:center}
.pillar-art--claim .bt{position:absolute;left:78px;top:26px;width:760px}
.pillar-art--claim .bt b{display:block;font-size:16.5px;font-weight:600;color:var(--s-warn,#78350f)}
.pillar-art--claim .bt span{display:block;font-size:15px;color:var(--s-warn,rgb(146 64 14/.85));margin-top:4px;line-height:1.45}
.pillar-art--claim .row{position:absolute;left:60px;width:1090px;height:72px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--s-border,#f0f0f2)}
.pillar-art--claim .row img{width:96px;height:64px;border-radius:12px;object-fit:cover;display:block}
.pillar-art--claim .row b{display:block;font-size:17px;font-weight:600}
.pillar-art--claim .row small{font-size:14.5px;color:var(--s-muted,#71717a)}
.pillar-art--claim .row .pr{margin-left:auto;font-size:16px;font-weight:700}
.pillar-art--claim .cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:30;filter:drop-shadow(0 1px 2px rgb(0 0 0/.3))}
.pillar-art--claim .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--claim .pa{animation-play-state:paused;animation-delay:-9s !important}}
@keyframes claim--banner{0%,56%{opacity:1;transform:none}61%,95%{opacity:0;transform:translateY(-10px) scale(.98)}99%,100%{opacity:1;transform:none}}
.pillar-art--claim .bA{animation-name:claim--bA}
.pillar-art--claim .bB{animation-name:claim--bB}
@keyframes claim--bA{0%,15.5%{opacity:1}17%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes claim--bB{0%,15.5%{opacity:0}17%,97%{opacity:1}99%,100%{opacity:0}}
.pillar-art--claim .press{animation-name:claim--press}
@keyframes claim--press{0%,13.5%{scale:1}14.5%{scale:.95}16%,100%{scale:1}}
.pillar-art--claim .below{animation-name:claim--below}
@keyframes claim--below{0%,58%{transform:none}64%,95%{transform:translateY(-124px)}99%,100%{transform:none}}
.pillar-art--claim .badge{animation-name:claim--badge}
@keyframes claim--badge{0%,61%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.15)}68%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--claim .join{animation-name:claim--join}
@keyframes claim--join{0%,65%{opacity:0;transform:translateX(12px)}70%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--claim .fol{animation-name:claim--fol}
@keyframes claim--fol{0%,65%{transform:translateX(0)}70%,95%{transform:translateX(-116px)}98%,100%{transform:translateX(0)}}
.pillar-art--claim .note{animation-name:claim--note}
@keyframes claim--note{0%,44%{opacity:0;transform:translateY(10px)}48%,58%{opacity:1;transform:none}61%,100%{opacity:0;transform:translateY(-6px)}}
.pillar-art--claim .cur{animation-name:claim--cur}
@keyframes claim--cur{0%{opacity:0;transform:translate(560px,470px)}4%{opacity:1;transform:translate(560px,420px) scale(1)}13.5%{transform:translate(625px,317px) scale(1)}14.5%{transform:translate(625px,317px) scale(.85)}16%{opacity:1;transform:translate(625px,317px) scale(1)}24%,100%{opacity:0;transform:translate(600px,380px)}}

/* ClassSetup -> activity_types */
.pillar-art--activity_types .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(20 40 20/.35);overflow:hidden}
.pillar-art--activity_types .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--activity_types .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--activity_types .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--activity_types .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--activity_types .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--activity_types .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--activity_types .lab{position:absolute;left:60px;font-size:14.5px;font-weight:600;color:var(--s-text2,#374151)}
.pillar-art--activity_types .inp{position:absolute;height:48px;border:1px solid var(--s-border,#d1d5db);border-radius:12px;display:flex;align-items:center;padding:0 16px;font-size:16px;box-sizing:border-box;background:var(--s-surface,#fff)}
.pillar-art--activity_types .seg3{position:absolute;left:60px;top:418px;display:flex;border:1px solid var(--s-border,#d1d5db);border-radius:12px;overflow:hidden}
.pillar-art--activity_types .seg3 span{width:130px;height:44px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:var(--s-text2,#374151);border-left:1px solid var(--s-border,#d1d5db)}
.pillar-art--activity_types .seg3 span:first-child{border-left:0}
.pillar-art--activity_types .vis{position:absolute;top:510px;height:46px;border:1px solid var(--s-border,#d1d5db);border-radius:999px;display:flex;align-items:center;gap:8px;padding:0 18px;font-size:15px;font-weight:500;color:var(--s-text2,#374151);box-sizing:border-box}
.pillar-art--activity_types .q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation-name:activity_types--type;animation-timing-function:steps(19,end)}
.pillar-art--activity_types .caret{display:inline-block;width:1.5px;height:19px;background:#0a0a0a;vertical-align:-3px;margin-left:1px;animation-name:activity_types--caret;animation-timing-function:linear}
.pillar-art--activity_types .cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:30;filter:drop-shadow(0 1px 2px rgb(0 0 0/.3))}
.pillar-art--activity_types .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--activity_types .pa{animation-play-state:paused;animation-delay:-8s !important}}
@keyframes activity_types--type{0%,3%{max-width:0}19%,96%{max-width:320px}99%,100%{max-width:0}}
@keyframes activity_types--caret{0%,20%{opacity:1}21%,100%{opacity:0}}
.pillar-art--activity_types .selIP{animation-name:activity_types--selIP}
.pillar-art--activity_types .selV{animation-name:activity_types--selV}
@keyframes activity_types--selIP{0%,27.5%{opacity:1}28.5%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes activity_types--selV{0%,27.5%{opacity:0}28.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--activity_types .badge{animation-name:activity_types--badge}
@keyframes activity_types--badge{0%,28.5%{opacity:0;transform:scale(.6)}31%{opacity:1;transform:scale(1.1)}33%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--activity_types .wA{animation-name:activity_types--selIP}
.pillar-art--activity_types .wB{animation-name:activity_types--selV}
.pillar-art--activity_types .vPub{animation-name:activity_types--vPub}
.pillar-art--activity_types .vMem{animation-name:activity_types--vMem}
@keyframes activity_types--vPub{0%,43.5%{opacity:1}44.5%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes activity_types--vMem{0%,43.5%{opacity:0}44.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--activity_types .press{animation-name:activity_types--press}
@keyframes activity_types--press{0%,58.5%{scale:1}59.5%{scale:.95}61%,100%{scale:1}}
.pillar-art--activity_types .saved{animation-name:activity_types--saved}
@keyframes activity_types--saved{0%,61%{opacity:0;transform:translateY(10px)}64%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
.pillar-art--activity_types .lift{animation-name:activity_types--lift}
@keyframes activity_types--lift{0%,60%{transform:none}64%,93%{transform:translateY(-6px) rotate(-1deg)}97%,100%{transform:none}}
.pillar-art--activity_types .cur{animation-name:activity_types--cur}
@keyframes activity_types--cur{0%,18%{opacity:0;transform:translate(260px,440px)}22%{opacity:1;transform:translate(220px,380px) scale(1)}27.5%{transform:translate(154px,315px) scale(1)}28.5%{transform:translate(154px,315px) scale(.85)}30%{transform:translate(154px,315px) scale(1)}43.5%{transform:translate(140px,372px) scale(1)}44.5%{transform:translate(140px,372px) scale(.85)}46%{transform:translate(140px,372px) scale(1)}58.5%{transform:translate(83px,423px) scale(1)}59.5%{transform:translate(83px,423px) scale(.85)}61%{opacity:1;transform:translate(83px,423px) scale(1)}68%,100%{opacity:0;transform:translate(120px,470px)}}

/* ClassRepeats -> repeats */
.pillar-art--repeats .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(20 40 20/.35);overflow:hidden}
.pillar-art--repeats .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--repeats .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--repeats .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--repeats .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--repeats .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--repeats .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--repeats .lab{position:absolute;left:60px;font-size:14.5px;font-weight:600;color:var(--s-text2,#374151)}
.pillar-art--repeats .inp{position:absolute;height:44px;border:1px solid var(--s-border,#d1d5db);border-radius:12px;display:flex;align-items:center;padding:0 16px;font-size:15.5px;box-sizing:border-box;background:var(--s-surface,#fff)}
.pillar-art--repeats .mo{position:absolute;left:760px;font-size:16px;font-weight:700}
.pillar-art--repeats .wd{position:absolute;width:44px;text-align:center;font-size:12px;font-weight:600;color:var(--s-muted,#9ca3af)}
.pillar-art--repeats .d{position:absolute;width:44px;height:36px;display:flex;align-items:center;justify-content:center;font-size:14.5px;color:var(--s-text2,#374151)}
.pillar-art--repeats .d.g{color:var(--s-muted,#6b6b76)}
.pillar-art--repeats .m{position:absolute;width:36px;height:36px;border-radius:50%;background:#2f6b33;color:#fff;font-size:14.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.pillar-art--repeats .cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:30;filter:drop-shadow(0 1px 2px rgb(0 0 0/.3))}
.pillar-art--repeats .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--repeats .pa{animation-play-state:paused;animation-delay:-8.5s !important}}
.pillar-art--repeats .tickon{animation-name:repeats--tickon}
@keyframes repeats--tickon{0%,9.5%{opacity:0}10.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--repeats .reveal{animation-name:repeats--reveal}
@keyframes repeats--reveal{0%,10.5%{opacity:0;transform:translateY(-6px)}14%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--repeats .keep{animation-name:repeats--keep}
@keyframes repeats--keep{0%,13%{opacity:0;transform:scale(.3)}17%{opacity:1;transform:scale(1.15)}19%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--repeats .drop{animation-name:repeats--drop}
@keyframes repeats--drop{0%,13%{opacity:0;transform:scale(.3)}17%{opacity:1;transform:scale(1.15)}19%,50%{opacity:1;transform:none}53%,100%{opacity:0;transform:scale(.5)}}
.pillar-art--repeats .s1{animation-name:repeats--s1}
.pillar-art--repeats .s2{animation-name:repeats--s2}
@keyframes repeats--s1{0%,15%{opacity:0}17%,49.5%{opacity:1}50.5%,100%{opacity:0}}
@keyframes repeats--s2{0%,49.5%{opacity:0}50.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--repeats .selA{animation-name:repeats--selA}
.pillar-art--repeats .selB{animation-name:repeats--selB}
@keyframes repeats--selA{0%,49.5%{opacity:1}50.5%,100%{opacity:0}}
@keyframes repeats--selB{0%,49.5%{opacity:0}50.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--repeats .menu{animation-name:repeats--menu}
@keyframes repeats--menu{0%,42.5%{opacity:0;transform:translateY(-6px)}44%,49.5%{opacity:1;transform:none}50.5%,100%{opacity:0}}
.pillar-art--repeats .note{animation-name:repeats--note}
@keyframes repeats--note{0%,62%{opacity:0;transform:translateY(12px)}66%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
.pillar-art--repeats .cur{animation-name:repeats--cur}
@keyframes repeats--cur{0%{opacity:0;transform:translate(140px,330px)}4%{opacity:1;transform:translate(110px,290px) scale(1)}9.5%{transform:translate(55px,247px) scale(1)}10.5%{transform:translate(55px,247px) scale(.85)}12%{transform:translate(55px,247px) scale(1)}42%{transform:translate(92px,279px) scale(1)}43%{transform:translate(92px,279px) scale(.85)}44%{transform:translate(92px,279px) scale(1)}49.5%{transform:translate(92px,332px) scale(1)}50.5%{transform:translate(92px,332px) scale(.85)}52%{opacity:1;transform:translate(92px,332px) scale(1)}60%,100%{opacity:0;transform:translate(130px,380px)}}

/* ClassPlan -> course_plan */
.pillar-art--course_plan .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(20 40 20/.35);overflow:hidden}
.pillar-art--course_plan .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--course_plan .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--course_plan .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--course_plan .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--course_plan .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--course_plan .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--course_plan .mode{position:absolute;top:284px;width:330px;height:104px;border:1px solid var(--s-border,#e4e4e7);border-radius:14px;padding:16px 46px 16px 18px;box-sizing:border-box}
.pillar-art--course_plan .mode b{display:block;font-size:15.5px;font-weight:600}
.pillar-art--course_plan .mode span{display:block;font-size:13.5px;color:var(--s-muted,#6b7280);line-height:1.4;margin-top:4px}
.pillar-art--course_plan .rad{position:absolute;right:16px;top:18px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--s-border-strong,#a1a1aa);box-sizing:border-box}
.pillar-art--course_plan .wk{position:absolute;left:60px;width:700px;height:56px;display:flex;align-items:center;gap:16px}
.pillar-art--course_plan .wk .n{width:120px;line-height:1.25}
.pillar-art--course_plan .wk .n b{display:block;font-size:15px}
.pillar-art--course_plan .wk .n small{font-size:13.5px;color:var(--s-muted,#6b7280)}
.pillar-art--course_plan .wk .f{flex:1;height:46px;border:1px solid var(--s-border,#d1d5db);border-radius:10px;display:flex;align-items:center;padding:0 14px;font-size:15px;box-sizing:border-box;overflow:hidden;white-space:nowrap}
.pillar-art--course_plan .t{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0;animation-name:course_plan--t;animation-timing-function:steps(28,end)}
.pillar-art--course_plan .frag{position:absolute;background:var(--s-surface,#fff);border-radius:20px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(20 40 20/.45)}
.pillar-art--course_plan .pw{display:flex;gap:12px;position:relative;padding-bottom:14px}
.pillar-art--course_plan .pw .ln{position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:var(--s-subtle,#e4e4e7)}
.pillar-art--course_plan .pw .dt{width:16px;height:16px;border-radius:50%;border:3px solid #2f6b33;background:var(--s-surface,#fff);box-sizing:border-box;flex:none;margin-top:2px;position:relative;z-index:1}
.pillar-art--course_plan .pw b{display:block;font-size:13.5px}
.pillar-art--course_plan .pw span{display:block;font-size:12.5px;color:var(--s-muted,#6b7280)}
.pillar-art--course_plan .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:ease-out}
@media (prefers-reduced-motion:reduce){.pillar-art--course_plan .pa{animation-play-state:paused;animation-delay:-8s !important}}
@keyframes course_plan--t{0%,6%{max-width:0}14%,96%{max-width:420px}99%,100%{max-width:0}}
.pillar-art--course_plan .cx{animation-name:course_plan--cx}
@keyframes course_plan--cx{0%,24%{opacity:0}26%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--course_plan .gray{animation-name:course_plan--gray}
@keyframes course_plan--gray{0%,25%{opacity:1}27%,96%{opacity:.45}99%,100%{opacity:1}}
.pillar-art--course_plan .par{animation-name:course_plan--par}
@keyframes course_plan--par{0%,46%{opacity:0;transform:translateX(60px)}53%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateX(60px)}}
.pillar-art--course_plan .nx{animation-name:course_plan--nx}
@keyframes course_plan--nx{0%,58%{opacity:0;transform:scale(.7)}62%,93%{opacity:1;transform:none}97%,100%{opacity:0}}

/* ClassTeachers -> instructors */
.pillar-art--instructors .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(20 40 20/.35);overflow:hidden}
.pillar-art--instructors .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--instructors .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--instructors .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--instructors .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--instructors .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--instructors .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--instructors .pr{position:absolute;left:24px;width:710px;height:56px;display:flex;align-items:center;gap:14px}
.pillar-art--instructors .av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.pillar-art--instructors .pr b{display:block;font-size:16px}
.pillar-art--instructors .pr small{font-size:14px;color:var(--s-muted,#6b7280)}
.pillar-art--instructors .sel{position:absolute;height:46px;border:1px solid var(--s-border,#d1d5db);border-radius:10px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:15px;box-sizing:border-box;background:var(--s-surface,#fff)}
.pillar-art--instructors .frag{position:absolute;background:var(--s-surface,#fff);border-radius:20px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(20 40 20/.45)}
.pillar-art--instructors .st{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--s-border,#f0f0f2)}
.pillar-art--instructors .cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:30;filter:drop-shadow(0 1px 2px rgb(0 0 0/.3))}
.pillar-art--instructors .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--instructors .pa{animation-play-state:paused;animation-delay:-8.5s !important}}
.pillar-art--instructors .menu{animation-name:instructors--menu}
@keyframes instructors--menu{0%,12.5%{opacity:0;transform:translateY(-6px)}14%,25.5%{opacity:1;transform:none}26.5%,100%{opacity:0}}
.pillar-art--instructors .chA{animation-name:instructors--chA}
.pillar-art--instructors .chB{animation-name:instructors--chB}
@keyframes instructors--chA{0%,25.5%{opacity:1}26.5%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes instructors--chB{0%,25.5%{opacity:0}26.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--instructors .press{animation-name:instructors--press}
@keyframes instructors--press{0%,35.5%{scale:1}36.5%{scale:.94}38%,100%{scale:1}}
.pillar-art--instructors .row2{animation-name:instructors--row2}
@keyframes instructors--row2{0%,37%{opacity:0;transform:translateY(-8px)}41%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--instructors .hl{animation-name:instructors--hl}
@keyframes instructors--hl{0%,38%{background:transparent}40%{background:var(--s-ok-bg,#e7f0e4)}56%,100%{background:transparent}}
.pillar-art--instructors .empty{animation-name:instructors--empty}
@keyframes instructors--empty{0%,37%{opacity:1}39%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--instructors .pub{animation-name:instructors--pub}
@keyframes instructors--pub{0%,52%{opacity:0;transform:translateX(60px)}59%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateX(60px)}}
.pillar-art--instructors .cur{animation-name:instructors--cur}
@keyframes instructors--cur{0%{opacity:0;transform:translate(200px,440px)}5%{opacity:1;transform:translate(180px,400px) scale(1)}12%{transform:translate(141px,345px) scale(1)}13%{transform:translate(141px,345px) scale(.85)}14%{transform:translate(141px,345px) scale(1)}25.5%{transform:translate(141px,403px) scale(1)}26.5%{transform:translate(141px,403px) scale(.85)}27.5%{transform:translate(141px,403px) scale(1)}35.5%{transform:translate(395px,345px) scale(1)}36.5%{transform:translate(395px,345px) scale(.85)}38%{opacity:1;transform:translate(395px,345px) scale(1)}46%,100%{opacity:0;transform:translate(420px,400px)}}

/* ClassWeek -> family_week */
.pillar-art--family_week .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(20 40 20/.35);overflow:hidden}
.pillar-art--family_week .hdr{position:absolute;left:0;right:0;top:0;height:84px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px;gap:22px}
.pillar-art--family_week .seg{display:flex;background:var(--s-subtle,#f4f4f5);border-radius:999px;padding:5px}
.pillar-art--family_week .seg span{padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--s-text2,#3f3f46)}
.pillar-art--family_week .sp{display:flex;align-items:center;border:1px solid var(--s-border,#e4e4e7);border-radius:999px;height:58px;padding-left:8px;box-shadow:0 2px 10px rgb(0 0 0/.06)}
.pillar-art--family_week .sf{padding:0 22px;border-left:1px solid var(--s-border,#e4e4e7);line-height:1.25}
.pillar-art--family_week .sf:first-child{border-left:0}
.pillar-art--family_week .sf b{display:block;font-size:12.5px;font-weight:600}
.pillar-art--family_week .sf span{font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--family_week .sgo{width:46px;height:46px;border-radius:50%;background:#c5303e;margin:0 6px 0 8px;display:flex;align-items:center;justify-content:center}
.pillar-art--family_week .side{position:absolute;left:0;top:84px;width:262px;bottom:0;border-right:1px solid var(--s-border,#ececef)}
.pillar-art--family_week .sh{position:absolute;left:28px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--s-muted,#a1a1aa)}
.pillar-art--family_week .fr{position:absolute;left:28px;width:210px;height:28px;display:flex;align-items:center;gap:10px;font-size:14.5px}
.pillar-art--family_week .fr .n{margin-left:auto;font-size:13px;color:var(--s-muted,#a1a1aa)}
.pillar-art--family_week .cb{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.pillar-art--family_week .mm{position:absolute;width:30px;height:26px;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--s-text2,#52525b)}
.pillar-art--family_week .dh{position:absolute;top:176px;width:118px;text-align:center;font-size:13px;color:var(--s-muted,#71717a)}
.pillar-art--family_week .dh b{display:block;font-size:22px;color:var(--s-text,#0a0a0a);font-weight:600}
.pillar-art--family_week .hr{position:absolute;left:330px;width:830px;height:1px;background:var(--s-subtle,#f0f0f2)}
.pillar-art--family_week .hl{position:absolute;left:282px;width:40px;text-align:right;font-size:12px;color:var(--s-muted,#a1a1aa)}
.pillar-art--family_week .ev{position:absolute;width:110px;border-radius:10px;padding:7px 9px;box-sizing:border-box;font-size:12.5px;line-height:1.3;overflow:hidden}
.pillar-art--family_week .ev b{display:block;font-size:13px}
.pillar-art--family_week .who{display:flex;gap:3px;margin-top:4px}
.pillar-art--family_week .who i{font-style:normal;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff}
.pillar-art--family_week .ia{background:#c5303e}
.pillar-art--family_week .id{background:#3f6b96}
.pillar-art--family_week .cB{background:var(--s-blue-bg,#e4eef7);border-left:4px solid #3f6b96;color:var(--s-blue,#1e3a5f)}
.pillar-art--family_week .cG{background:var(--s-ok-bg,#e7f0e4);border-left:4px solid #2f6b33;color:var(--s-ok,#1f4722)}
.pillar-art--family_week .cR{background:var(--s-brand-bg,#fdecee);border-left:4px solid #c5303e;color:var(--s-brand,#7a1d26)}
.pillar-art--family_week .cP{background:var(--s-violet-bg,#f3e8f5);border-left:4px solid #7c3a8a;color:var(--s-violet,#4a1f55)}
.pillar-art--family_week .lr{position:absolute;left:330px;width:800px;height:58px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--s-border,#f0f0f2);font-size:15px}
.pillar-art--family_week .lr .bar{width:5px;height:38px;border-radius:3px}
.pillar-art--family_week .lr .tm{width:130px;color:var(--s-text2,#52525b);font-size:14px}
.pillar-art--family_week .lr b{font-size:15.5px}
.pillar-art--family_week .lr small{display:block;font-size:13px;color:var(--s-muted,#71717a)}
.pillar-art--family_week .cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:30;filter:drop-shadow(0 1px 2px rgb(0 0 0/.3))}
.pillar-art--family_week .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--family_week .pa{animation-play-state:paused;animation-delay:-2.6s !important}}
.pillar-art--family_week .in{animation-name:family_week--in}
@keyframes family_week--in{0%,2%{opacity:0;transform:translateY(8px) scale(.96)}8%,57%{opacity:1;transform:none}60%,100%{opacity:0}}
.pillar-art--family_week .dk{animation-name:family_week--dk}
@keyframes family_week--dk{0%,2%{opacity:0;transform:translateY(8px) scale(.96)}8%,26%{opacity:1;transform:none}28%,42%{opacity:.12;transform:none}44%,57%{opacity:1}60%,100%{opacity:0}}
.pillar-art--family_week .dchk{animation-name:family_week--dchk}
@keyframes family_week--dchk{0%,26.5%{opacity:1}27.5%,42.5%{opacity:0}43.5%,100%{opacity:1}}
.pillar-art--family_week .grid{animation-name:family_week--grid}
@keyframes family_week--grid{0%,58%{opacity:1}61%,95%{opacity:0}98%,100%{opacity:1}}
.pillar-art--family_week .list{animation-name:family_week--list}
@keyframes family_week--list{0%,59%{opacity:0;transform:translateY(12px)}63%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
.pillar-art--family_week .wkOn{animation-name:family_week--wkOn}
.pillar-art--family_week .lsOn{animation-name:family_week--lsOn}
@keyframes family_week--wkOn{0%,58.5%{opacity:1}59.5%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes family_week--lsOn{0%,58.5%{opacity:0}59.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--family_week .cnt{animation-name:family_week--cnt}
@keyframes family_week--cnt{0%,26.5%{opacity:1}27.5%,42.5%{opacity:.35}43.5%,100%{opacity:1}}
.pillar-art--family_week .cur{animation-name:family_week--cur}
@keyframes family_week--cur{0%,14%{opacity:0;transform:translate(120px,380px)}18%{opacity:1;transform:translate(80px,340px) scale(1)}26.5%{transform:translate(20px,262px) scale(1)}27.5%{transform:translate(20px,262px) scale(.85)}29%{transform:translate(20px,262px) scale(1)}42.5%{transform:translate(20px,262px) scale(1)}43.5%{transform:translate(20px,262px) scale(.85)}45%{transform:translate(20px,262px) scale(1)}58.5%{transform:translate(597px,119px) scale(1)}59.5%{transform:translate(597px,119px) scale(.85)}61%{opacity:1;transform:translate(597px,119px) scale(1)}68%,100%{opacity:0;transform:translate(560px,200px)}}

/* ClassSync -> calendar_sync */
.pillar-art--calendar_sync .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(20 40 20/.35);overflow:hidden}
.pillar-art--calendar_sync .hdr{position:absolute;left:0;right:0;top:0;height:84px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px;gap:22px}
.pillar-art--calendar_sync .seg{display:flex;background:var(--s-subtle,#f4f4f5);border-radius:999px;padding:5px}
.pillar-art--calendar_sync .seg span{padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--s-text2,#3f3f46)}
.pillar-art--calendar_sync .sp{display:flex;align-items:center;border:1px solid var(--s-border,#e4e4e7);border-radius:999px;height:58px;padding-left:8px;box-shadow:0 2px 10px rgb(0 0 0/.06)}
.pillar-art--calendar_sync .sf{padding:0 22px;border-left:1px solid var(--s-border,#e4e4e7);line-height:1.25}
.pillar-art--calendar_sync .sf:first-child{border-left:0}
.pillar-art--calendar_sync .sf b{display:block;font-size:12.5px;font-weight:600}
.pillar-art--calendar_sync .sf span{font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--calendar_sync .sgo{width:46px;height:46px;border-radius:50%;background:#c5303e;margin:0 6px 0 8px;display:flex;align-items:center;justify-content:center}
.pillar-art--calendar_sync .dh{position:absolute;top:176px;width:118px;text-align:center;font-size:13px;color:var(--s-muted,#71717a)}
.pillar-art--calendar_sync .dh b{display:block;font-size:22px;color:var(--s-text,#0a0a0a);font-weight:600}
.pillar-art--calendar_sync .hr{position:absolute;left:60px;width:1100px;height:1px;background:var(--s-subtle,#f0f0f2)}
.pillar-art--calendar_sync .ev{position:absolute;width:110px;border-radius:10px;padding:7px 9px;box-sizing:border-box;font-size:12.5px;line-height:1.3}
.pillar-art--calendar_sync .ev b{display:block;font-size:13px}
.pillar-art--calendar_sync .cB{background:var(--s-blue-bg,#e4eef7);border-left:4px solid #3f6b96;color:var(--s-blue,#1e3a5f)}
.pillar-art--calendar_sync .cG{background:var(--s-ok-bg,#e7f0e4);border-left:4px solid #2f6b33;color:var(--s-ok,#1f4722)}
.pillar-art--calendar_sync .cR{background:var(--s-brand-bg,#fdecee);border-left:4px solid #c5303e;color:var(--s-brand,#7a1d26)}
.pillar-art--calendar_sync .cP{background:var(--s-violet-bg,#f3e8f5);border-left:4px solid #7c3a8a;color:var(--s-violet,#4a1f55)}
.pillar-art--calendar_sync .phone{position:absolute;left:432px;top:40px;width:262px;height:540px;border-radius:44px;background:#111;padding:10px;box-sizing:border-box;box-shadow:0 40px 70px -20px rgb(0 0 0/.55)}
.pillar-art--calendar_sync .scr{position:relative;width:100%;height:100%;border-radius:35px;background:var(--s-surface,#fff);overflow:hidden}
.pillar-art--calendar_sync .ph{position:absolute;left:44px;right:12px;height:1px;background:var(--s-subtle,#f0f0f2)}
.pillar-art--calendar_sync .pl{position:absolute;left:10px;width:30px;text-align:right;font-size:9.5px;color:var(--s-muted,#a1a1aa)}
.pillar-art--calendar_sync .pe{position:absolute;left:48px;right:12px;border-radius:7px;padding:5px 8px;box-sizing:border-box;font-size:10.5px;line-height:1.3}
.pillar-art--calendar_sync .pe b{display:block;font-size:11.5px}
.pillar-art--calendar_sync .cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:30;filter:drop-shadow(0 1px 2px rgb(0 0 0/.3))}
.pillar-art--calendar_sync .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--calendar_sync .pa{animation-play-state:paused;animation-delay:-10.5s !important}}
.pillar-art--calendar_sync .scrim{animation-name:calendar_sync--scrim}
@keyframes calendar_sync--scrim{0%,10.5%{opacity:0}13%,36%{opacity:1}39%,100%{opacity:0}}
.pillar-art--calendar_sync .modal{animation-name:calendar_sync--modal}
@keyframes calendar_sync--modal{0%,10.5%{opacity:0;transform:translateY(24px) scale(.97)}14%,36%{opacity:1;transform:none}39%,100%{opacity:0;transform:translateY(24px) scale(.97)}}
.pillar-art--calendar_sync .pressS{animation-name:calendar_sync--pressS}
@keyframes calendar_sync--pressS{0%,9.5%{scale:1}10.5%{scale:.94}12%,100%{scale:1}}
.pillar-art--calendar_sync .pressA{animation-name:calendar_sync--pressA}
@keyframes calendar_sync--pressA{0%,29.5%{scale:1}30.5%{scale:.94}32%,100%{scale:1}}
.pillar-art--calendar_sync .phone{animation-name:calendar_sync--phone}
@keyframes calendar_sync--phone{0%,38%{opacity:0;transform:translateX(90px) rotate(4deg)}46%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateX(90px) rotate(4deg)}}
.pillar-art--calendar_sync .pin{animation-name:calendar_sync--pin}
@keyframes calendar_sync--pin{0%,46%{opacity:0;transform:translateY(-10px)}51%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--calendar_sync .mv{animation-name:calendar_sync--mv}
@keyframes calendar_sync--mv{0%,63%{transform:none}68%,94%{transform:translateY(40px)}98%,100%{transform:none}}
.pillar-art--calendar_sync .tA{animation-name:calendar_sync--tA}
.pillar-art--calendar_sync .tB{animation-name:calendar_sync--tB}
@keyframes calendar_sync--tA{0%,65%{opacity:1}66%,100%{opacity:0}}
@keyframes calendar_sync--tB{0%,65%{opacity:0}66%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--calendar_sync .flash{animation-name:calendar_sync--flash}
@keyframes calendar_sync--flash{0%,65%{box-shadow:0 0 0 0 rgb(47 107 51/0)}68%{box-shadow:0 0 0 5px rgb(47 107 51/.35)}76%,100%{box-shadow:0 0 0 0 rgb(47 107 51/0)}}
.pillar-art--calendar_sync .note{animation-name:calendar_sync--note}
@keyframes calendar_sync--note{0%,66%{opacity:0;transform:translateY(12px)}70%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
.pillar-art--calendar_sync .oldt{animation-name:calendar_sync--oldt}
@keyframes calendar_sync--oldt{0%,63%{opacity:1}64%,100%{opacity:0}}
.pillar-art--calendar_sync .cur{animation-name:calendar_sync--cur}
@keyframes calendar_sync--cur{0%{opacity:0;transform:translate(600px,260px)}4%{opacity:1;transform:translate(640px,190px) scale(1)}9.5%{transform:translate(675px,120px) scale(1)}10.5%{transform:translate(675px,120px) scale(.85)}12%{transform:translate(675px,120px) scale(1)}29.5%{transform:translate(359px,370px) scale(1)}30.5%{transform:translate(359px,370px) scale(.85)}32%{opacity:1;transform:translate(359px,370px) scale(1)}38%,100%{opacity:0;transform:translate(380px,380px)}}
.pillar-art--calendar_sync .csync{position:relative;display:flex;height:150px;align-items:center;justify-content:center;gap:104px;overflow:hidden;margin:-30px -30px 8px;border-radius:22px 22px 0 0}
.pillar-art--calendar_sync .csync::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#d4d4d8 1px,transparent 1.2px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 20%,transparent 75%);opacity:.7}
.pillar-art--calendar_sync .csync-in{position:relative;z-index:1;display:block;animation-name:calendar_sync--csyncIn;animation-timing-function:cubic-bezier(.2,.9,.3,1.2)}
.pillar-art--calendar_sync .csync-tile{display:grid;height:64px;width:64px;place-items:center;border-radius:18px;border:1px solid var(--s-border,#e4e4e7);background:var(--s-surface,#fff);box-sizing:border-box;box-shadow:0 0 0 8px rgba(232,72,85,.07),0 4px 14px -4px rgba(232,72,85,.25),inset 0 -2px 0 rgba(0,0,0,.04)}
.pillar-art--calendar_sync .csync-cal{width:38px;overflow:hidden;border-radius:8px;background:var(--s-surface,#fff);text-align:center;font-weight:700;box-shadow:0 0 0 1px var(--s-border,#e4e4e7)}
.pillar-art--calendar_sync .csync-cal span:first-child{display:block;background:#c5303e;color:#fff;font-size:9px;line-height:13px;letter-spacing:.08em}
.pillar-art--calendar_sync .csync-cal span:last-child{display:block;font-size:19px;line-height:25px;color:var(--s-text,#18181b)}
@keyframes calendar_sync--csyncIn{0%,11%{opacity:0;transform:translateY(6px) scale(.9)}14.8%,100%{opacity:1;transform:none}}

/* PaySeats -> seats */
.pillar-art--seats .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 40 0/.35);overflow:hidden}
.pillar-art--seats .hdr{position:absolute;left:0;right:0;top:0;height:84px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px;gap:22px}
.pillar-art--seats .seg{display:flex;background:var(--s-subtle,#f4f4f5);border-radius:999px;padding:5px}
.pillar-art--seats .seg span{padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--s-text2,#3f3f46)}
.pillar-art--seats .sp{display:flex;align-items:center;border:1px solid var(--s-border,#e4e4e7);border-radius:999px;height:58px;padding-left:8px;box-shadow:0 2px 10px rgb(0 0 0/.06)}
.pillar-art--seats .sf{padding:0 22px;border-left:1px solid var(--s-border,#e4e4e7);line-height:1.25}
.pillar-art--seats .sf:first-child{border-left:0}
.pillar-art--seats .sf b{display:block;font-size:12.5px;font-weight:600}
.pillar-art--seats .sf span{font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--seats .sgo{width:46px;height:46px;border-radius:50%;background:#c5303e;margin:0 6px 0 8px;display:flex;align-items:center;justify-content:center}
.pillar-art--seats .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(60 40 0/.45)}
.pillar-art--seats .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--seats .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--seats .pa{animation-play-state:paused;animation-delay:-9s !important}}
.pillar-art--seats .x1{animation-name:seats--x1}
.pillar-art--seats .x2{animation-name:seats--x2}
.pillar-art--seats .x3{animation-name:seats--x3}
@keyframes seats--x1{0%,17%{opacity:1}18%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes seats--x2{0%,17%{opacity:0}18%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes seats--x3{0%,48%{opacity:0}49%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--seats .full{animation-name:seats--full}
@keyframes seats--full{0%,48%{opacity:1}49%,96%{opacity:0}99%,100%{opacity:1}}
.pillar-art--seats .left1{animation-name:seats--left1}
@keyframes seats--left1{0%,48%{opacity:0;transform:scale(.8)}51%{opacity:1;transform:scale(1.08)}53%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--seats .toast{animation-name:seats--toast}
@keyframes seats--toast{0%,18%{opacity:0;transform:translateY(16px)}21%,38%{opacity:1;transform:none}41%,100%{opacity:0;transform:translateY(16px)}}
.pillar-art--seats .mail{animation-name:seats--mail}
@keyframes seats--mail{0%,46%{opacity:0;transform:translateY(50px)}52%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(50px)}}
.pillar-art--seats .others{animation-name:seats--others}
@keyframes seats--others{0%,52%{opacity:0;transform:translate(0,0)}55%,93%{opacity:1}97%,100%{opacity:0}}
.pillar-art--seats .press{animation-name:seats--press}
@keyframes seats--press{0%,15.5%{scale:1}16.5%{scale:.95}18%,100%{scale:1}}
.pillar-art--seats .pressR{animation-name:seats--pressR}
@keyframes seats--pressR{0%,72.5%{scale:1}73.5%{scale:.94}75%,100%{scale:1}}
.pillar-art--seats .won{animation-name:seats--won}
@keyframes seats--won{0%,74%{opacity:0;transform:translateY(8px)}77%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
.pillar-art--seats .cur{animation-name:seats--cur}
@keyframes seats--cur{0%,6%{opacity:0;transform:translate(1000px,700px)}10%{opacity:1;transform:translate(1000px,560px) scale(1)}15.5%{transform:translate(1000px,478px) scale(1)}16.5%{transform:translate(1000px,478px) scale(.85)}18%{opacity:1;transform:translate(1000px,478px) scale(1)}26%,100%{opacity:0;transform:translate(1040px,560px)}}
.pillar-art--seats .cur2{animation-name:seats--cur2}
@keyframes seats--cur2{0%,62%{opacity:0;transform:translate(420px,520px)}66%{opacity:1;transform:translate(380px,500px) scale(1)}72.5%{transform:translate(300px,460px) scale(1)}73.5%{transform:translate(300px,460px) scale(.85)}75%{opacity:1;transform:translate(300px,460px) scale(1)}82%,100%{opacity:0;transform:translate(330px,500px)}}

/* PayQuestions -> questions */
.pillar-art--questions .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 40 0/.35);overflow:hidden}
.pillar-art--questions .mh{position:absolute;left:0;right:0;top:0;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--questions .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--questions .org i{width:26px;height:26px;border-radius:50%;background:#2f6b33;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--questions .card{position:absolute;left:60px;width:720px;border:1px solid var(--s-border,#e4e4e7);border-radius:18px;padding:22px 24px;box-sizing:border-box}
.pillar-art--questions .ct{font-size:18px;font-weight:600;margin-bottom:16px}
.pillar-art--questions .inp{height:46px;border:1px solid var(--s-border,#d1d5db);border-radius:10px;display:flex;align-items:center;padding:0 14px;font-size:15.5px;box-sizing:border-box;background:var(--s-surface,#fff);white-space:nowrap;overflow:hidden}
.pillar-art--questions .lab{font-size:14px;font-weight:600;color:var(--s-text2,#374151);margin:14px 0 6px}
.pillar-art--questions .q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0}
.pillar-art--questions .cb{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--s-border-strong,#9ca3af);box-sizing:border-box;position:relative;flex:none}
.pillar-art--questions .cbon{position:absolute;inset:-1.5px;border-radius:5px;background:#8a6a12;display:flex;align-items:center;justify-content:center}
.pillar-art--questions .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(60 40 0/.45)}
.pillar-art--questions .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--questions .pa{animation-play-state:paused;animation-delay:-11s !important}}
.pillar-art--questions .tq{animation-name:questions--tq;animation-timing-function:steps(44,end)}
@keyframes questions--tq{0%,2%{max-width:0}14%,96%{max-width:520px}99%,100%{max-width:0}}
.pillar-art--questions .ch{animation-name:questions--ch}
@keyframes questions--ch{0%,15%{opacity:0;transform:translateY(-4px)}18%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--questions .req{animation-name:questions--req}
@keyframes questions--req{0%,25%{opacity:0}26%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--questions .form{animation-name:questions--form}
@keyframes questions--form{0%,32%{opacity:0;transform:translateX(60px)}38%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateX(60px)}}
.pillar-art--questions .menu{animation-name:questions--menu}
@keyframes questions--menu{0%,42%{opacity:0;transform:translateY(-4px)}44%,48.5%{opacity:1;transform:none}49.5%,100%{opacity:0}}
.pillar-art--questions .selA{animation-name:questions--selA}
.pillar-art--questions .selB{animation-name:questions--selB}
@keyframes questions--selA{0%,48.5%{opacity:1}49.5%,100%{opacity:0}}
@keyframes questions--selB{0%,48.5%{opacity:0}49.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--questions .term{animation-name:questions--term}
@keyframes questions--term{0%,54%{opacity:0}55%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--questions .tn{animation-name:questions--tn;animation-timing-function:steps(11,end)}
@keyframes questions--tn{0%,58%{max-width:0}66%,96%{max-width:200px}99%,100%{max-width:0}}
.pillar-art--questions .ros{animation-name:questions--ros}
@keyframes questions--ros{0%,71%{opacity:0;transform:translateY(40px)}77%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(40px)}}
.pillar-art--questions .hi{animation-name:questions--hi}
@keyframes questions--hi{0%,78%{background:transparent}81%,90%{background:var(--s-warn-bg,#fbf1d6)}94%,100%{background:transparent}}

/* PayCheckout -> checkout */
.pillar-art--checkout .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-subtle,#fafafa);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 40 0/.35);overflow:hidden}
.pillar-art--checkout .mh{position:absolute;left:0;right:0;top:0;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--s-surface,#fff)}
.pillar-art--checkout .box{position:absolute;background:var(--s-surface,#fff);border:1px solid var(--s-border,#e4e4e7);border-radius:18px;box-sizing:border-box}
.pillar-art--checkout .kid{position:absolute;left:24px;right:24px;height:58px;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;display:flex;align-items:center;gap:14px;padding:0 16px;font-size:16px;box-sizing:border-box}
.pillar-art--checkout .cb{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--s-border-strong,#9ca3af);box-sizing:border-box;position:relative;flex:none}
.pillar-art--checkout .cbon{position:absolute;inset:-1.5px;border-radius:5px;background:#c5303e;display:flex;align-items:center;justify-content:center}
.pillar-art--checkout .av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.pillar-art--checkout .ln{display:flex;justify-content:space-between;font-size:15px;padding:7px 0}
.pillar-art--checkout .stack{position:relative;display:inline-block;width:80px;height:20px;text-align:right}
.pillar-art--checkout .stack span{position:absolute;right:0}
.pillar-art--checkout .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--checkout .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--checkout .pa{animation-play-state:paused;animation-delay:-9s !important}}
.pillar-art--checkout .k1{animation-name:checkout--k1}
.pillar-art--checkout .k2{animation-name:checkout--k2}
.pillar-art--checkout .k3{animation-name:checkout--k3}
@keyframes checkout--k1{0%,11.5%{opacity:0}12.5%,96%{opacity:1}99%,100%{opacity:0}}
@keyframes checkout--k2{0%,21.5%{opacity:0}22.5%,96%{opacity:1}99%,100%{opacity:0}}
@keyframes checkout--k3{0%,31.5%{opacity:0}32.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--checkout .l1{animation-name:checkout--l1}
.pillar-art--checkout .l2{animation-name:checkout--l2}
.pillar-art--checkout .l3{animation-name:checkout--l3}
@keyframes checkout--l1{0%,12%{opacity:0;transform:translateY(-6px)}14%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes checkout--l2{0%,22%{opacity:0;transform:translateY(-6px)}24%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes checkout--l3{0%,32%{opacity:0;transform:translateY(-6px)}34%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--checkout .t0{animation-name:checkout--t0}
.pillar-art--checkout .t1{animation-name:checkout--t1}
.pillar-art--checkout .t2{animation-name:checkout--t2}
.pillar-art--checkout .t3{animation-name:checkout--t3}
@keyframes checkout--t0{0%,12%{opacity:1}13%,98%{opacity:0}99%,100%{opacity:1}}
@keyframes checkout--t1{0%,12%{opacity:0}13%,22%{opacity:1}23%,100%{opacity:0}}
@keyframes checkout--t2{0%,22%{opacity:0}23%,32%{opacity:1}33%,100%{opacity:0}}
@keyframes checkout--t3{0%,32%{opacity:0}33%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--checkout .press{animation-name:checkout--press}
@keyframes checkout--press{0%,57.5%{scale:1}58.5%{scale:.96}60%,100%{scale:1}}
.pillar-art--checkout .done{animation-name:checkout--done}
@keyframes checkout--done{0%,60%{opacity:0;transform:scale(.96)}64%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--checkout .cur{animation-name:checkout--cur}
@keyframes checkout--cur{0%,4%{opacity:0;transform:translate(300px,600px)}8%{opacity:1;transform:translate(200px,400px) scale(1)}11.5%{transform:translate(104px,288px) scale(1)}12.5%{transform:translate(104px,288px) scale(.85)}14%{transform:translate(104px,288px) scale(1)}21.5%{transform:translate(104px,360px) scale(1)}22.5%{transform:translate(104px,360px) scale(.85)}24%{transform:translate(104px,360px) scale(1)}31.5%{transform:translate(104px,432px) scale(1)}32.5%{transform:translate(104px,432px) scale(.85)}34%{transform:translate(104px,432px) scale(1)}57.5%{transform:translate(944px,548px) scale(1)}58.5%{transform:translate(944px,548px) scale(.85)}60%{opacity:1;transform:translate(944px,548px) scale(1)}66%,100%{opacity:0;transform:translate(1000px,700px)}}

/* PayPricing -> pricing */
.pillar-art--pricing .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 40 0/.35);overflow:hidden}
.pillar-art--pricing .mh{position:absolute;left:0;right:0;top:0;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--pricing .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--pricing .org i{width:26px;height:26px;border-radius:50%;background:#2f6b33;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--pricing .lab{position:absolute;font-size:14.5px;font-weight:600;color:var(--s-text2,#374151)}
.pillar-art--pricing .inp{position:absolute;height:46px;border:1px solid var(--s-border,#d1d5db);border-radius:10px;display:flex;align-items:center;padding:0 14px;font-size:16px;box-sizing:border-box;background:var(--s-surface,#fff);white-space:nowrap}
.pillar-art--pricing .chip{position:absolute;top:200px;height:44px;border:1px solid var(--s-border,#d1d5db);border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:var(--s-text2,#374151);box-sizing:border-box}
.pillar-art--pricing .chip b{position:absolute;inset:-1px;border-radius:999px;background:#8a6a12;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.pillar-art--pricing .ph{position:absolute;left:0;top:0;width:1280px;height:820px}
.pillar-art--pricing .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--pricing .pa{animation-duration:14s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--pricing .pa{animation-play-state:paused;animation-delay:-5.6s !important}}
.pillar-art--pricing .p0{animation-name:pricing--p0}
.pillar-art--pricing .p1{animation-name:pricing--p1}
.pillar-art--pricing .p2{animation-name:pricing--p2}
.pillar-art--pricing .p3{animation-name:pricing--p3}
.pillar-art--pricing .p4{animation-name:pricing--p4}
@keyframes pricing--p0{0%,19.5%{opacity:1}20.5%,98%{opacity:0}99.5%,100%{opacity:1}}
@keyframes pricing--p1{0%,19.5%{opacity:0}20.5%,39.5%{opacity:1}40.5%,100%{opacity:0}}
@keyframes pricing--p2{0%,39.5%{opacity:0}40.5%,59.5%{opacity:1}60.5%,100%{opacity:0}}
@keyframes pricing--p3{0%,59.5%{opacity:0}60.5%,79.5%{opacity:1}80.5%,100%{opacity:0}}
@keyframes pricing--p4{0%,79.5%{opacity:0}80.5%,98%{opacity:1}99.5%,100%{opacity:0}}
.pillar-art--pricing .cur{animation-name:pricing--cur}
@keyframes pricing--cur{0%,6%{opacity:0;transform:translate(400px,520px)}10%{opacity:1;transform:translate(330px,300px) scale(1)}18.5%{transform:translate(331px,219px) scale(1)}19.5%{transform:translate(331px,219px) scale(.85)}21%{transform:translate(331px,219px) scale(1)}38.5%{transform:translate(544px,219px) scale(1)}39.5%{transform:translate(544px,219px) scale(.85)}41%{transform:translate(544px,219px) scale(1)}58.5%{transform:translate(747px,219px) scale(1)}59.5%{transform:translate(747px,219px) scale(.85)}61%{transform:translate(747px,219px) scale(1)}78.5%{transform:translate(925px,219px) scale(1)}79.5%{transform:translate(925px,219px) scale(.85)}81%{opacity:1;transform:translate(925px,219px) scale(1)}88%,100%{opacity:0;transform:translate(960px,300px)}}

/* PayDiscounts -> discounts */
.pillar-art--discounts .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-subtle,#fafafa);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 40 0/.35);overflow:hidden}
.pillar-art--discounts .mh{position:absolute;left:0;right:0;top:0;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--s-surface,#fff)}
.pillar-art--discounts .ln{position:absolute;left:684px;width:442px;display:flex;justify-content:space-between;font-size:15.5px}
.pillar-art--discounts .stk{position:relative;width:110px;height:22px}
.pillar-art--discounts .stk span{position:absolute;right:0}
.pillar-art--discounts .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(60 40 0/.45)}
.pillar-art--discounts .q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0}
.pillar-art--discounts .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--discounts .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--discounts .pa{animation-play-state:paused;animation-delay:-9s !important}}
.pillar-art--discounts .tp{animation-name:discounts--tp;animation-timing-function:steps(9,end)}
@keyframes discounts--tp{0%,5%{max-width:0}16%,96%{max-width:140px}99%,100%{max-width:0}}
.pillar-art--discounts .ph{animation-name:discounts--ph}
@keyframes discounts--ph{0%,5%{opacity:1}6%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--discounts .press{animation-name:discounts--press}
@keyframes discounts--press{0%,21.5%{scale:1}22.5%{scale:.94}24%,100%{scale:1}}
.pillar-art--discounts .pr{animation-name:discounts--pr}
@keyframes discounts--pr{0%,23%{opacity:0;transform:translateY(-6px)}26%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--discounts .a0{animation-name:discounts--a0}
.pillar-art--discounts .a1{animation-name:discounts--a1}
@keyframes discounts--a0{0%,23.5%{opacity:1}24.5%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes discounts--a1{0%,23.5%{opacity:0}24.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--discounts .cr{animation-name:discounts--cr}
@keyframes discounts--cr{0%,49%{opacity:0;transform:translateY(-6px)}52%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--discounts .d0{animation-name:discounts--d0}
.pillar-art--discounts .d1{animation-name:discounts--d1}
.pillar-art--discounts .d2{animation-name:discounts--d2}
@keyframes discounts--d0{0%,23.5%{opacity:1}24.5%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes discounts--d1{0%,23.5%{opacity:0}24.5%,50.5%{opacity:1}51.5%,100%{opacity:0}}
@keyframes discounts--d2{0%,50.5%{opacity:0}51.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--discounts .rail{animation-name:discounts--rail}
@keyframes discounts--rail{0%,44%{opacity:0;transform:translateX(-40px)}49%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateX(-40px)}}
.pillar-art--discounts .cur{animation-name:discounts--cur}
@keyframes discounts--cur{0%,12%{opacity:0;transform:translate(1000px,640px)}16%{opacity:1;transform:translate(1060px,560px) scale(1)}21.5%{transform:translate(1045px,460px) scale(1)}22.5%{transform:translate(1045px,460px) scale(.85)}24%{opacity:1;transform:translate(1045px,460px) scale(1)}32%,100%{opacity:0;transform:translate(1080px,520px)}}

/* PayOffline -> offline */
.pillar-art--offline .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 40 0/.35);overflow:hidden}
.pillar-art--offline .mh{position:absolute;left:0;right:0;top:0;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--offline .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--offline .org i{width:26px;height:26px;border-radius:50%;background:#2f6b33;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--offline .st{position:absolute;top:196px;width:255px;height:92px;border:1px solid var(--s-border,#e4e4e7);border-radius:16px;padding:16px 18px;box-sizing:border-box}
.pillar-art--offline .st small{display:block;font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--offline .st b{display:block;font-size:26px;font-weight:700;margin-top:4px;position:relative;height:32px}
.pillar-art--offline .st b span{position:absolute;left:0}
.pillar-art--offline .th{position:absolute;top:356px;font-size:12.5px;font-weight:700;color:var(--s-muted,#71717a);text-transform:uppercase;letter-spacing:.05em}
.pillar-art--offline .tr{position:absolute;left:60px;width:1100px;height:64px;border-top:1px solid var(--s-border,#f0f0f2)}
.pillar-art--offline .td{position:absolute;top:22px;font-size:15.5px}
.pillar-art--offline .bdg{position:absolute;top:18px;font-size:13.5px;font-weight:600;border-radius:999px;padding:5px 12px}
.pillar-art--offline .sel{position:absolute;top:10px;height:44px;border:1px solid var(--s-border,#d1d5db);border-radius:10px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:15px;box-sizing:border-box;background:var(--s-surface,#fff)}
.pillar-art--offline .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--offline .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--offline .pa{animation-play-state:paused;animation-delay:-8s !important}}
.pillar-art--offline .menu{animation-name:offline--menu}
@keyframes offline--menu{0%,15.5%{opacity:0;transform:translateY(-4px)}17%,27.5%{opacity:1;transform:none}28.5%,100%{opacity:0}}
.pillar-art--offline .sA{animation-name:offline--sA}
.pillar-art--offline .sB{animation-name:offline--sB}
@keyframes offline--sA{0%,27.5%{opacity:1}28.5%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes offline--sB{0%,27.5%{opacity:0}28.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--offline .form{animation-name:offline--form}
@keyframes offline--form{0%,40.5%{opacity:1}42%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--offline .paid{animation-name:offline--paid}
@keyframes offline--paid{0%,41%{opacity:0;transform:scale(.7)}44%{opacity:1;transform:scale(1.1)}46%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--offline .unp{animation-name:offline--unp}
@keyframes offline--unp{0%,41%{opacity:1}42%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--offline .n0{animation-name:offline--n0}
.pillar-art--offline .n1{animation-name:offline--n1}
@keyframes offline--n0{0%,42%{opacity:1}43%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes offline--n1{0%,42%{opacity:0}43%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--offline .flash{animation-name:offline--flash}
@keyframes offline--flash{0%,42%{background:var(--s-surface,#fff)}45%{background:var(--s-ok-bg,#ecfdf3)}60%,100%{background:var(--s-surface,#fff)}}
.pillar-art--offline .press{animation-name:offline--press}
@keyframes offline--press{0%,39.5%{scale:1}40.5%{scale:.95}42%,100%{scale:1}}
.pillar-art--offline .cur{animation-name:offline--cur}
@keyframes offline--cur{0%,6%{opacity:0;transform:translate(800px,760px)}10%{opacity:1;transform:translate(880px,650px) scale(1)}15.5%{transform:translate(924px,543px) scale(1)}16.5%{transform:translate(924px,543px) scale(.85)}18%{transform:translate(924px,543px) scale(1)}26.5%{transform:translate(924px,682px) scale(1)}27.5%{transform:translate(924px,682px) scale(.85)}29%{transform:translate(924px,682px) scale(1)}39.5%{transform:translate(1074px,543px) scale(1)}40.5%{transform:translate(1074px,543px) scale(.85)}42%{opacity:1;transform:translate(1074px,543px) scale(1)}52%,100%{opacity:0;transform:translate(1100px,650px)}}

/* PayScholarships -> scholarships */
.pillar-art--scholarships .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 40 0/.35);overflow:hidden}
.pillar-art--scholarships .mh{position:absolute;left:0;right:0;top:0;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--scholarships .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--scholarships .org i{width:26px;height:26px;border-radius:50%;background:#2f6b33;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--scholarships .row{position:absolute;left:60px;width:1080px;height:84px;border:1px solid var(--s-border,#e4e4e7);border-radius:14px;box-sizing:border-box}
.pillar-art--scholarships .row .nm{position:absolute;left:22px;top:16px;font-size:16.5px;font-weight:600}
.pillar-art--scholarships .row .mt{position:absolute;left:22px;top:44px;font-size:14px;color:var(--s-muted,#71717a);white-space:nowrap}
.pillar-art--scholarships .row .tot{position:absolute;right:22px;top:28px;font-size:18px;font-weight:700}
.pillar-art--scholarships .row .stw{position:absolute;right:140px;top:26px;width:110px;height:30px}
.pillar-art--scholarships .bd{position:absolute;right:0;top:0;font-size:13.5px;font-weight:600;border-radius:999px;padding:5px 12px;white-space:nowrap}
.pillar-art--scholarships .sub{position:absolute;left:400px;top:30px;font-size:14px;white-space:nowrap}
.pillar-art--scholarships .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(60 40 0/.45)}
.pillar-art--scholarships .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--scholarships .pa{animation-duration:14s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--scholarships .pa{animation-play-state:paused;animation-delay:-9s !important}}
.pillar-art--scholarships .empty{animation-name:scholarships--empty}
@keyframes scholarships--empty{0%,12%{opacity:1}13%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--scholarships .rin{animation-name:scholarships--rin}
@keyframes scholarships--rin{0%,12.5%{opacity:0;transform:translateY(-10px)}17%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--scholarships .dr{animation-name:scholarships--dr}
.pillar-art--scholarships .se{animation-name:scholarships--se}
.pillar-art--scholarships .pd{animation-name:scholarships--pd}
.pillar-art--scholarships .se2{animation-name:scholarships--se2}
@keyframes scholarships--dr{0%,29%{opacity:1}30%,100%{opacity:0}}
@keyframes scholarships--se{0%,29%{opacity:0}30%,73%{opacity:1}74%,100%{opacity:0}}
@keyframes scholarships--pd{0%,73%{opacity:0;transform:scale(.7)}76%{opacity:1;transform:scale(1.1)}78%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes scholarships--se2{0%,29%{opacity:0}30%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--scholarships .u0{animation-name:scholarships--u0}
.pillar-art--scholarships .u1{animation-name:scholarships--u1}
.pillar-art--scholarships .u2{animation-name:scholarships--u2}
@keyframes scholarships--u0{0%,47%{opacity:1}48%,100%{opacity:0}}
@keyframes scholarships--u1{0%,47%{opacity:0}48%,59%{opacity:1}60%,100%{opacity:0}}
@keyframes scholarships--u2{0%,59%{opacity:0}60%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--scholarships .press{animation-name:scholarships--press}
@keyframes scholarships--press{0%,9.5%{scale:1}10.5%{scale:.95}12%,100%{scale:1}}
.pillar-art--scholarships .mail{animation-name:scholarships--mail}
@keyframes scholarships--mail{0%,80%{opacity:0;transform:translateY(40px)}85%,95%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(40px)}}
.pillar-art--scholarships .cur{animation-name:scholarships--cur}
@keyframes scholarships--cur{0%{opacity:0;transform:translate(900px,300px)}4%{opacity:1;transform:translate(960px,220px) scale(1)}9.5%{transform:translate(1014px,120px) scale(1)}10.5%{transform:translate(1014px,120px) scale(.85)}12%{opacity:1;transform:translate(1014px,120px) scale(1)}20%,100%{opacity:0;transform:translate(1040px,200px)}}

/* PayDues -> dues */
.pillar-art--dues .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-subtle,#faf8f5);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 40 0/.35);overflow:hidden}
.pillar-art--dues .hdr{position:absolute;left:0;right:0;top:0;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px;gap:22px;background:var(--s-surface,#fff)}
.pillar-art--dues .card{position:absolute;background:var(--s-surface,#fff);border:1px solid #ece7df;border-radius:20px;box-sizing:border-box}
.pillar-art--dues .av{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff}
.pillar-art--dues .bd{position:absolute;font-size:13.5px;font-weight:600;border-radius:999px;padding:5px 12px;white-space:nowrap}
.pillar-art--dues .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(60 40 0/.45)}
.pillar-art--dues .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--dues .pa{animation-duration:14s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--dues .pa{animation-play-state:paused;animation-delay:-10.5s !important}}
.pillar-art--dues .set{animation-name:dues--set}
@keyframes dues--set{0%,2%{opacity:0;transform:translateY(30px)}6%,26%{opacity:1;transform:none}30%,100%{opacity:0;transform:translateY(30px)}}
.pillar-art--dues .mail{animation-name:dues--mail}
@keyframes dues--mail{0%,30%{opacity:0;transform:translateY(30px)}34%,47%{opacity:1;transform:none}51%,100%{opacity:0;transform:translateY(30px)}}
.pillar-art--dues .pm{animation-name:dues--pm}
@keyframes dues--pm{0%,44.5%{scale:1}45.5%{scale:.94}47%,100%{scale:1}}
.pillar-art--dues .iss{animation-name:dues--iss}
@keyframes dues--iss{0%,63%{opacity:1}64%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--dues .ok{animation-name:dues--ok}
@keyframes dues--ok{0%,63%{opacity:0;transform:translateY(8px)}66%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--dues .due{animation-name:dues--due}
@keyframes dues--due{0%,63%{opacity:1}64%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--dues .act{animation-name:dues--act}
@keyframes dues--act{0%,63%{opacity:0;transform:scale(.7)}66%{opacity:1;transform:scale(1.1)}68%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--dues .press{animation-name:dues--press}
@keyframes dues--press{0%,61.5%{scale:1}62.5%{scale:.95}64%,100%{scale:1}}
.pillar-art--dues .cur{animation-name:dues--cur}
@keyframes dues--cur{0%,50%{opacity:0;transform:translate(640px,600px)}54%{opacity:1;transform:translate(600px,520px) scale(1)}61.5%{transform:translate(494px,432px) scale(1)}62.5%{transform:translate(494px,432px) scale(.85)}64%{opacity:1;transform:translate(494px,432px) scale(1)}72%,100%{opacity:0;transform:translate(540px,500px)}}

/* PayPayouts -> payouts */
.pillar-art--payouts .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 40 0/.35);overflow:hidden}
.pillar-art--payouts .mh{position:absolute;left:0;right:0;top:0;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--payouts .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--payouts .org i{width:26px;height:26px;border-radius:50%;background:#2f6b33;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--payouts .card{position:absolute;border:1px solid var(--s-border,#e4e4e7);border-radius:18px;box-sizing:border-box;background:var(--s-surface,#fff)}
.pillar-art--payouts .bd{position:absolute;font-size:13.5px;font-weight:600;border-radius:999px;padding:5px 12px;white-space:nowrap}
.pillar-art--payouts .kv{position:absolute;left:24px;width:560px;display:flex;justify-content:space-between;font-size:15.5px;padding:10px 0;border-top:1px solid var(--s-border,#f0f0f2)}
.pillar-art--payouts .stk{position:relative;width:90px;height:20px}
.pillar-art--payouts .stk span{position:absolute;right:0;font-weight:600}
.pillar-art--payouts .opt{position:absolute;left:24px;width:362px;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:12px 44px 12px 14px;box-sizing:border-box}
.pillar-art--payouts .opt b{display:block;font-size:14.5px}
.pillar-art--payouts .opt small{display:block;font-size:12.5px;color:var(--s-muted,#71717a);line-height:1.4;margin-top:2px}
.pillar-art--payouts .rad{position:absolute;right:14px;top:14px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--s-border-strong,#a1a1aa);box-sizing:border-box}
.pillar-art--payouts .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(60 40 0/.45)}
.pillar-art--payouts .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--payouts .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--payouts .pa{animation-play-state:paused;animation-delay:-9.5s !important}}
.pillar-art--payouts .a{animation-name:payouts--a}
.pillar-art--payouts .b{animation-name:payouts--b}
@keyframes payouts--a{0%,13%{opacity:1}14%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes payouts--b{0%,13%{opacity:0}14%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--payouts .pop{animation-name:payouts--pop}
@keyframes payouts--pop{0%,13%{opacity:0;transform:scale(.7)}16%{opacity:1;transform:scale(1.1)}18%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--payouts .press{animation-name:payouts--press}
@keyframes payouts--press{0%,11.5%{scale:1}12.5%{scale:.95}14%,100%{scale:1}}
.pillar-art--payouts .sel{animation-name:payouts--sel}
@keyframes payouts--sel{0%,47.5%{opacity:0}48.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--payouts .selc{animation-name:payouts--selc}
@keyframes payouts--selc{0%,47.5%{border-color:var(--s-border,#e4e4e7);background:var(--s-surface,#fff)}48.5%,96%{border-color:#8a6a12;background:var(--s-warn-bg,#fffbeb)}99%,100%{border-color:var(--s-border,#e4e4e7);background:var(--s-surface,#fff)}}
.pillar-art--payouts .par{animation-name:payouts--par}
@keyframes payouts--par{0%,24%{opacity:0;transform:translateY(40px)}30%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(40px)}}
.pillar-art--payouts .r0{animation-name:payouts--r0}
.pillar-art--payouts .r1{animation-name:payouts--r1}
@keyframes payouts--r0{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes payouts--r1{0%,49%{opacity:0;transform:translateY(6px)}52%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--payouts .cur{animation-name:payouts--cur}
@keyframes payouts--cur{0%{opacity:0;transform:translate(360px,560px)}4%{opacity:1;transform:translate(300px,460px) scale(1)}11.5%{transform:translate(214px,420px) scale(1)}12.5%{transform:translate(214px,420px) scale(.85)}14%{transform:translate(214px,420px) scale(1)}40%{transform:translate(1080px,380px) scale(1)}47.5%{transform:translate(1097px,352px) scale(1)}48.5%{transform:translate(1097px,352px) scale(.85)}50%{opacity:1;transform:translate(1097px,352px) scale(1)}58%,100%{opacity:0;transform:translate(1060px,420px)}}

/* ChkHeadCounts -> attendance */
.pillar-art--attendance .phone{position:absolute;left:250px;top:30px;width:300px;height:620px;border-radius:46px;background:#111;padding:10px;box-sizing:border-box;box-shadow:0 40px 70px -20px rgb(60 20 10/.55)}
.pillar-art--attendance .scr{position:relative;width:100%;height:100%;border-radius:37px;background:var(--s-subtle,#fafafa);overflow:hidden}
.pillar-art--attendance .sb{position:absolute;left:0;right:0;top:0;height:36px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font-size:12px;font-weight:600}
.pillar-art--attendance .card{position:absolute;left:12px;right:12px;background:var(--s-surface,#fff);border:1px solid var(--s-border,#e4e4e7);border-radius:16px}
.pillar-art--attendance .nm{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:9px}
.pillar-art--attendance .av{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.pillar-art--attendance .nm b{display:block;font-size:13px}
.pillar-art--attendance .nm small{display:block;font-size:10.5px;color:var(--s-muted,#71717a)}
.pillar-art--attendance .st{position:absolute;left:10px;right:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.pillar-art--attendance .st span{position:relative;height:28px;border-radius:9px;background:var(--s-subtle,#f4f4f5);color:var(--s-text2,#52525b);font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pillar-art--attendance .st i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;color:#fff}
.pillar-art--attendance .here{position:absolute;right:10px;top:13px;display:flex;align-items:center;gap:3px;background:var(--s-ok-bg,#d1fae5);color:var(--s-ok,#065f46);font-size:10px;font-weight:600;border-radius:999px;padding:3px 8px}
.pillar-art--attendance .ring{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgb(24 24 27/.25);border:2px solid rgb(255 255 255/.8);box-sizing:border-box;z-index:30}
.pillar-art--attendance .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--attendance .pa{animation-play-state:paused;animation-delay:-8s !important}}
.pillar-art--attendance .ban{animation-name:attendance--ban}
@keyframes attendance--ban{0%,3%{opacity:0;transform:translateY(-70px)}8%,16%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-70px)}}
.pillar-art--attendance .on1{animation-name:attendance--on1}
.pillar-art--attendance .on2{animation-name:attendance--on2}
.pillar-art--attendance .on3{animation-name:attendance--on3}
@keyframes attendance--on1{0%,26%{opacity:0}27%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes attendance--on2{0%,37%{opacity:0}38%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes attendance--on3{0%,48%{opacity:0}49%,95%{opacity:1}98%,100%{opacity:0}}
.pillar-art--attendance .h1{animation-name:attendance--h1}
.pillar-art--attendance .h2{animation-name:attendance--h2}
.pillar-art--attendance .h3{animation-name:attendance--h3}
@keyframes attendance--h1{0%,26.5%{opacity:0;transform:scale(.6)}29%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes attendance--h2{0%,37.5%{opacity:0;transform:scale(.6)}40%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes attendance--h3{0%,48.5%{opacity:0;transform:scale(.6)}51%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--attendance .c0{animation-name:attendance--c0}
.pillar-art--attendance .c1{animation-name:attendance--c1}
.pillar-art--attendance .c2{animation-name:attendance--c2}
.pillar-art--attendance .c3{animation-name:attendance--c3}
@keyframes attendance--c0{0%,26.5%{opacity:1}27%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes attendance--c1{0%,26.5%{opacity:0}27%,37.5%{opacity:1}38%,100%{opacity:0}}
@keyframes attendance--c2{0%,37.5%{opacity:0}38%,48.5%{opacity:1}49%,100%{opacity:0}}
@keyframes attendance--c3{0%,48.5%{opacity:0}49%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--attendance .t0{animation-name:attendance--t0}
.pillar-art--attendance .t1{animation-name:attendance--t1}
.pillar-art--attendance .t2{animation-name:attendance--t2}
.pillar-art--attendance .t3{animation-name:attendance--t3}
@keyframes attendance--t0{0%,14%{opacity:0;transform:scale(.4)}16%{opacity:1;transform:scale(1)}19%,100%{opacity:0;transform:scale(1.5)}}
@keyframes attendance--t1{0%,25%{opacity:0;transform:scale(.4)}27%{opacity:1;transform:scale(1)}30%,100%{opacity:0;transform:scale(1.5)}}
@keyframes attendance--t2{0%,36%{opacity:0;transform:scale(.4)}38%{opacity:1;transform:scale(1)}41%,100%{opacity:0;transform:scale(1.5)}}
@keyframes attendance--t3{0%,47%{opacity:0;transform:scale(.4)}49%{opacity:1;transform:scale(1)}52%,100%{opacity:0;transform:scale(1.5)}}
.pillar-art--attendance .rec{animation-name:attendance--rec}
@keyframes attendance--rec{0%,62%{opacity:0;transform:translateX(-30px)}68%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateX(-30px)}}
.pillar-art--attendance .note{animation-name:attendance--note}
@keyframes attendance--note{0%,70%{opacity:0;transform:translateY(10px)}74%,93%{opacity:1;transform:none}97%,100%{opacity:0}}

/* ChkParentsCheckIn -> qr_checkin */
.pillar-art--qr_checkin .phone{position:absolute;left:330px;top:30px;width:300px;height:620px;border-radius:46px;background:#111;padding:10px;box-sizing:border-box;box-shadow:0 40px 70px -20px rgb(60 20 10/.55)}
.pillar-art--qr_checkin .scr{position:relative;width:100%;height:100%;border-radius:37px;background:var(--s-surface,#fff);overflow:hidden}
.pillar-art--qr_checkin .sb{position:absolute;left:0;right:0;top:0;height:36px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font-size:12px;font-weight:600;z-index:5}
.pillar-art--qr_checkin .row{position:absolute;left:12px;right:12px;height:100px;border:1px solid var(--s-border,#e4e4e7);border-radius:16px;box-sizing:border-box;background:var(--s-surface,#fff)}
.pillar-art--qr_checkin .row .gr{position:absolute;inset:-1px;border-radius:16px;border:1px solid #6ee7b7;background:var(--s-ok-bg,#ecfdf5)}
.pillar-art--qr_checkin .av{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.pillar-art--qr_checkin .btn{position:absolute;top:56px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600;box-sizing:border-box}
.pillar-art--qr_checkin .ring{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgb(24 24 27/.25);border:2px solid rgb(255 255 255/.8);box-sizing:border-box;z-index:30}
.pillar-art--qr_checkin .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--qr_checkin .pa{animation-play-state:paused;animation-delay:-8s !important}}
.pillar-art--qr_checkin .cam{animation-name:qr_checkin--cam}
/* The status bar sits over the black camera view and then the app: white by
   difference reads on both, in either theme (the island itself is left alone). */
.pillar-art--qr_checkin .sb>span:not([style]){color:#fff;mix-blend-mode:difference}
@keyframes qr_checkin--cam{0%,15%{opacity:1}18%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--qr_checkin .chip{animation-name:qr_checkin--chip}
@keyframes qr_checkin--chip{0%,6%{opacity:0;transform:translateY(8px)}9%,15%{opacity:1;transform:none}18%,100%{opacity:0}}
.pillar-art--qr_checkin .scan{animation-name:qr_checkin--scan;animation-timing-function:ease-in-out}
@keyframes qr_checkin--scan{0%{transform:translateY(0)}7%{transform:translateY(130px)}14%,100%{transform:translateY(0)}}
.pillar-art--qr_checkin .g1{animation-name:qr_checkin--g1}
.pillar-art--qr_checkin .g2{animation-name:qr_checkin--g2}
@keyframes qr_checkin--g1{0%,30%{opacity:0}31.5%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes qr_checkin--g2{0%,42%{opacity:0}43.5%,95%{opacity:1}98%,100%{opacity:0}}
.pillar-art--qr_checkin .n1{animation-name:qr_checkin--n1}
.pillar-art--qr_checkin .n2{animation-name:qr_checkin--n2}
@keyframes qr_checkin--n1{0%,30%{opacity:1}31.5%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes qr_checkin--n2{0%,42%{opacity:1}43.5%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--qr_checkin .t0{animation-name:qr_checkin--t0}
.pillar-art--qr_checkin .t1{animation-name:qr_checkin--t1}
.pillar-art--qr_checkin .t2{animation-name:qr_checkin--t2}
@keyframes qr_checkin--t0{0%,11%{opacity:0;transform:scale(.4)}13%{opacity:1;transform:scale(1)}16%,100%{opacity:0;transform:scale(1.5)}}
@keyframes qr_checkin--t1{0%,29%{opacity:0;transform:scale(.4)}31%{opacity:1;transform:scale(1)}34%,100%{opacity:0;transform:scale(1.5)}}
@keyframes qr_checkin--t2{0%,41%{opacity:0;transform:scale(.4)}43%{opacity:1;transform:scale(1)}46%,100%{opacity:0;transform:scale(1.5)}}
.pillar-art--qr_checkin .lead2{animation-name:qr_checkin--lead2}
@keyframes qr_checkin--lead2{0%,20%{opacity:0;transform:translateY(30px)}26%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(30px)}}
.pillar-art--qr_checkin .k0{animation-name:qr_checkin--k0}
.pillar-art--qr_checkin .k1{animation-name:qr_checkin--k1}
.pillar-art--qr_checkin .k2{animation-name:qr_checkin--k2}
@keyframes qr_checkin--k0{0%,32%{opacity:1}33%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes qr_checkin--k1{0%,32%{opacity:0}33%,44%{opacity:1}45%,100%{opacity:0}}
@keyframes qr_checkin--k2{0%,44%{opacity:0}45%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--qr_checkin .hA{animation-name:qr_checkin--hA}
.pillar-art--qr_checkin .hB{animation-name:qr_checkin--hB}
@keyframes qr_checkin--hA{0%,32.5%{opacity:0;transform:scale(.6)}35%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes qr_checkin--hB{0%,44.5%{opacity:0;transform:scale(.6)}47%,95%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ChkCustody -> custody */
.pillar-art--custody .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 26px 46px -16px rgb(60 20 10/.45);box-sizing:border-box}
.pillar-art--custody .phone{position:absolute;left:400px;top:30px;width:300px;height:620px;border-radius:46px;background:#111;padding:10px;box-sizing:border-box;box-shadow:0 40px 70px -20px rgb(60 20 10/.55)}
.pillar-art--custody .scr{position:relative;width:100%;height:100%;border-radius:37px;background:var(--s-surface,#fff);overflow:hidden}
.pillar-art--custody .sb{position:absolute;left:0;right:0;top:0;height:36px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font-size:12px;font-weight:600}
.pillar-art--custody .btn{position:absolute;top:56px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;box-sizing:border-box}
.pillar-art--custody .cell{position:relative;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;box-sizing:border-box;overflow:hidden}
.pillar-art--custody .cell i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;font-style:normal}
.pillar-art--custody .ring{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgb(24 24 27/.25);border:2px solid rgb(255 255 255/.8);box-sizing:border-box;z-index:30}
.pillar-art--custody .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--custody .pa{animation-play-state:paused;animation-delay:-8.5s !important}}
.pillar-art--custody .s0{animation-name:custody--s0}
.pillar-art--custody .s1{animation-name:custody--s1}
.pillar-art--custody .s2{animation-name:custody--s2}
@keyframes custody--s0{0%,13%{opacity:1}14%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes custody--s1{0%,13%{opacity:0}14%,53%{opacity:1}54%,100%{opacity:0}}
@keyframes custody--s2{0%,53%{opacity:0}54%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--custody .gIn{animation-name:custody--gIn}
@keyframes custody--gIn{0%,13%{opacity:0}14%,53%{opacity:1}54%,100%{opacity:0}}
.pillar-art--custody .gOut{animation-name:custody--gOut}
@keyframes custody--gOut{0%,53%{opacity:0}54%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--custody .cIn{animation-name:custody--cIn}
@keyframes custody--cIn{0%,14%{opacity:0}16%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--custody .cOut{animation-name:custody--cOut}
@keyframes custody--cOut{0%,54%{opacity:0}56%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--custody .t1{animation-name:custody--t1}
@keyframes custody--t1{0%,11%{opacity:0;transform:scale(.4)}13%{opacity:1;transform:scale(1)}16%,100%{opacity:0;transform:scale(1.5)}}
.pillar-art--custody .clkA{animation-name:custody--clkA}
.pillar-art--custody .clkB{animation-name:custody--clkB}
@keyframes custody--clkA{0%,38%{opacity:1}42%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes custody--clkB{0%,38%{opacity:0}42%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--custody .hl{animation-name:custody--hl}
@keyframes custody--hl{0%,55%{background:transparent}58%,90%{background:var(--s-brand-bg,#fdecee)}95%,100%{background:transparent}}
.pillar-art--custody .note{animation-name:custody--note}
@keyframes custody--note{0%,60%{opacity:0;transform:translateY(10px)}64%,93%{opacity:1;transform:none}97%,100%{opacity:0}}

/* ChkRoster -> roster */
.pillar-art--roster .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 20 10/.35);overflow:hidden}
.pillar-art--roster .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--roster .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--roster .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--roster .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--roster .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--roster .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--roster .tb{position:absolute;top:204px;font-size:15px;font-weight:600;color:var(--s-muted,#71717a);display:flex;align-items:center;gap:6px}
.pillar-art--roster .tb em{font-style:normal;font-size:12px;background:var(--s-subtle,#f4f4f5);color:var(--s-text2,#52525b);border-radius:999px;padding:1px 7px}
.pillar-art--roster .th{position:absolute;top:322px;font-size:12.5px;font-weight:600;color:var(--s-muted,#71717a);text-transform:uppercase;letter-spacing:.04em}
.pillar-art--roster .r{position:absolute;left:40px;width:1120px;height:56px;border-top:1px solid var(--s-border,#f0f0f2);font-size:15px}
.pillar-art--roster .r span{position:absolute;top:17px;white-space:nowrap}
.pillar-art--roster .pill{font-size:12.5px;font-weight:500;border-radius:999px;padding:2px 9px}
.pillar-art--roster .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--roster .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--roster .pa{animation-play-state:paused;animation-delay:-8.5s !important}}
.pillar-art--roster .open{animation-name:roster--open}
@keyframes roster--open{0%,21%{opacity:0;transform:translateY(-6px)}25%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--roster .push{animation-name:roster--push}
@keyframes roster--push{0%,21%{transform:none}25%,95%{transform:translateY(96px)}98%,100%{transform:none}}
.pillar-art--roster .press{animation-name:roster--press}
@keyframes roster--press{0%,55.5%{scale:1}56.5%{scale:.95}58%,100%{scale:1}}
.pillar-art--roster .dl{animation-name:roster--dl}
@keyframes roster--dl{0%,57%{opacity:0;transform:translateY(20px)}61%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.pillar-art--roster .note{animation-name:roster--note}
@keyframes roster--note{0%,63%{opacity:0;transform:translateY(10px)}67%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.pillar-art--roster .cur{animation-name:roster--cur}
@keyframes roster--cur{0%,6%{opacity:0;transform:translate(420px,640px)}10%{opacity:1;transform:translate(300px,520px) scale(1)}20%{transform:translate(160px,426px) scale(1)}21%{transform:translate(160px,426px) scale(.85)}22.5%{transform:translate(160px,426px) scale(1)}55.5%{transform:translate(1076px,274px) scale(1)}56.5%{transform:translate(1076px,274px) scale(.85)}58%{opacity:1;transform:translate(1076px,274px) scale(1)}66%,100%{opacity:0;transform:translate(1040px,340px)}}

/* ChkHealth -> health */
.pillar-art--health .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 20 10/.35);overflow:hidden}
.pillar-art--health .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--health .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--health .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--health .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--health .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--health .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--health .card{position:absolute;border:1px solid var(--s-border,#e4e4e7);border-radius:18px;background:var(--s-surface,#fff);box-sizing:border-box}
.pillar-art--health .kv{padding:14px 22px;border-top:1px solid var(--s-border,#f0f0f2)}
.pillar-art--health .kv small{display:block;font-size:13px;color:var(--s-muted,#71717a);margin-bottom:3px}
.pillar-art--health .kv b{font-size:16px;font-weight:500}
.pillar-art--health .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--health .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--health .pa{animation-play-state:paused;animation-delay:-5s !important}}
.pillar-art--health .lock{animation-name:health--lock}
@keyframes health--lock{0%,19%{opacity:1}21%,70%{opacity:0}73%,100%{opacity:1}}
.pillar-art--health .shown{animation-name:health--shown}
@keyframes health--shown{0%,19%{opacity:0;filter:blur(6px)}22%,69%{opacity:1;filter:none}72%,100%{opacity:0;filter:blur(6px)}}
.pillar-art--health .bar{animation-name:health--bar;animation-timing-function:linear}
@keyframes health--bar{0%,21%{width:100%}70%,100%{width:0%}}
.pillar-art--health .press{animation-name:health--press}
@keyframes health--press{0%,17.5%{scale:1}18.5%{scale:.95}20%,100%{scale:1}}
.pillar-art--health .note{animation-name:health--note}
@keyframes health--note{0%,26%{opacity:0;transform:translateY(10px)}30%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
.pillar-art--health .relock{animation-name:health--relock}
@keyframes health--relock{0%,71%{opacity:0;transform:translateY(10px)}75%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.pillar-art--health .cur{animation-name:health--cur}
@keyframes health--cur{0%,4%{opacity:0;transform:translate(420px,700px)}9%{opacity:1;transform:translate(300px,560px) scale(1)}17.5%{transform:translate(170px,527px) scale(1)}18.5%{transform:translate(170px,527px) scale(.85)}20%{opacity:1;transform:translate(170px,527px) scale(1)}28%,100%{opacity:0;transform:translate(260px,600px)}}

/* ChkPhotoConsent -> consent */
.pillar-art--consent .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 20 10/.35);overflow:hidden}
.pillar-art--consent .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--consent .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--consent .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--consent .hdr{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px}
.pillar-art--consent .kid{position:absolute;top:210px;width:540px;height:430px;border:1px solid var(--s-border,#e4e4e7);border-radius:20px;box-sizing:border-box;background:var(--s-surface,#fff)}
.pillar-art--consent .opt{position:absolute;top:338px;width:236px;height:52px;border:1px solid var(--s-border,#d4d4d8);border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 16px;box-sizing:border-box;font-size:15.5px;font-weight:500}
.pillar-art--consent .rad{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--s-border-strong,#a1a1aa);box-sizing:border-box;flex:none;position:relative}
.pillar-art--consent .on{position:absolute;inset:-1px;border-radius:14px;border:2px solid #b5553a;background:var(--s-peach-bg,#fdf1ec);display:flex;align-items:center;gap:10px;padding:0 15px;box-sizing:border-box}
.pillar-art--consent .on .rad{border:6px solid #b5553a}
.pillar-art--consent .stat{position:absolute;right:20px;top:22px;font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 10px}
.pillar-art--consent .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 26px 46px -16px rgb(60 20 10/.45);box-sizing:border-box}
.pillar-art--consent .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--consent .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--consent .pa{animation-play-state:paused;animation-delay:-8.5s !important}}
.pillar-art--consent .a1{animation-name:consent--a1}
.pillar-art--consent .a2{animation-name:consent--a2}
@keyframes consent--a1{0%,17.5%{opacity:0}18.5%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes consent--a2{0%,33.5%{opacity:0}34.5%,95%{opacity:1}98%,100%{opacity:0}}
.pillar-art--consent .na1{animation-name:consent--na1}
.pillar-art--consent .na2{animation-name:consent--na2}
@keyframes consent--na1{0%,17.5%{opacity:1}18.5%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes consent--na2{0%,33.5%{opacity:1}34.5%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--consent .staff{animation-name:consent--staff}
@keyframes consent--staff{0%,46%{opacity:0;transform:translateY(40px)}53%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(40px)}}
.pillar-art--consent .cam{animation-name:consent--cam}
@keyframes consent--cam{0%,60%{opacity:0;transform:scale(.8)}64%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.pillar-art--consent .cur{animation-name:consent--cur}
@keyframes consent--cur{0%,5%{opacity:0;transform:translate(400px,700px)}10%{opacity:1;transform:translate(260px,620px) scale(1)}17.5%{transform:translate(176px,534px) scale(1)}18.5%{transform:translate(176px,534px) scale(.85)}20%{transform:translate(176px,534px) scale(1)}33.5%{transform:translate(1004px,534px) scale(1)}34.5%{transform:translate(1004px,534px) scale(.85)}36%{opacity:1;transform:translate(1004px,534px) scale(1)}44%,100%{opacity:0;transform:translate(960px,660px)}}

/* ChkRetention -> retention */
.pillar-art--retention .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(60 20 10/.35);overflow:hidden}
.pillar-art--retention .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--retention .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--retention .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--retention .hdr{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px}
.pillar-art--retention .row{position:absolute;left:40px;width:1100px;height:74px;border-bottom:1px solid var(--s-border,#f0f0f2)}
.pillar-art--retention .row small{position:absolute;left:0;top:14px;font-size:15px;font-weight:600}
.pillar-art--retention .row span{position:absolute;left:0;top:40px;font-size:14.5px;color:var(--s-text2,#52525b)}
.pillar-art--retention .row em{position:absolute;right:0;top:24px;font-style:normal;font-size:14px;font-weight:600;text-decoration:underline}
.pillar-art--retention .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 26px 46px -16px rgb(60 20 10/.45);box-sizing:border-box}
.pillar-art--retention .f{position:relative;display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0}
.pillar-art--retention .f s{position:absolute;left:0;right:0;top:50%;height:1.5px;background:#b5553a;transform-origin:left;animation-name:retention--strike}
.pillar-art--retention .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--retention .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--retention .pa{animation-play-state:paused;animation-delay:-10.5s !important}}
.pillar-art--retention .pg1{animation-name:retention--pg1}
@keyframes retention--pg1{0%,32%{opacity:1}34%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--retention .pg2{animation-name:retention--pg2}
@keyframes retention--pg2{0%,32%{opacity:0}35%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--retention .scrim{animation-name:retention--scrim}
@keyframes retention--scrim{0%,15%{opacity:0}17%,32%{opacity:1}34%,100%{opacity:0}}
.pillar-art--retention .modal{animation-name:retention--modal}
@keyframes retention--modal{0%,15%{opacity:0;transform:translateY(16px) scale(.97)}18%,32%{opacity:1;transform:none}34%,100%{opacity:0}}
.pillar-art--retention .pressR{animation-name:retention--pressR}
@keyframes retention--pressR{0%,13.5%{scale:1}14.5%{scale:.93}16%,100%{scale:1}}
.pillar-art--retention .pressO{animation-name:retention--pressO}
@keyframes retention--pressO{0%,29.5%{scale:1}30.5%{scale:.93}32%,100%{scale:1}}
.pillar-art--retention .tl{animation-name:retention--tl}
@keyframes retention--tl{0%,42%{opacity:0;transform:translateX(40px)}48%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateX(40px)}}
.pillar-art--retention .prog{animation-name:retention--prog;animation-timing-function:linear}
@keyframes retention--prog{0%,48%{height:0}62%,100%{height:100%}}
@keyframes retention--strike{0%,63%{transform:scaleX(0)}67%,100%{transform:scaleX(1)}}
.pillar-art--retention .gone{animation-name:retention--gone}
@keyframes retention--gone{0%,67%{opacity:1}72%,95%{opacity:.35}99%,100%{opacity:1}}
.pillar-art--retention .kept{animation-name:retention--kept}
@keyframes retention--kept{0%,72%{opacity:0;transform:translateY(8px)}76%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.pillar-art--retention .cur{animation-name:retention--cur}
@keyframes retention--cur{0%,3%{opacity:0;transform:translate(900px,560px)}7%{opacity:1;transform:translate(1000px,300px) scale(1)}13.5%{transform:translate(1086px,166px) scale(1)}14.5%{transform:translate(1086px,166px) scale(.85)}16%{transform:translate(1086px,166px) scale(1)}29.5%{transform:translate(779px,432px) scale(1)}30.5%{transform:translate(779px,432px) scale(.85)}32%{opacity:1;transform:translate(779px,432px) scale(1)}38%,100%{opacity:0;transform:translate(760px,520px)}}

/* MemWhoBelongs -> directory */
.pillar-art--directory .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(40 20 80/.35);overflow:hidden}
.pillar-art--directory .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--directory .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--directory .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--directory .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--directory .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--directory .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--directory .mr{position:absolute;left:60px;width:1080px;height:68px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--s-border,#f0f0f2)}
.pillar-art--directory .av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.pillar-art--directory .mr .nm{flex:1;min-width:0}
.pillar-art--directory .mr .nm b{display:block;font-size:16px}
.pillar-art--directory .mr .nm small{font-size:13.5px;color:var(--s-muted,#71717a)}
.pillar-art--directory .role{border:1px solid var(--s-border,#d4d4d8);border-radius:10px;padding:8px 14px;font-size:14px;font-weight:500;width:150px;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}
.pillar-art--directory .lnk{font-size:14px;color:var(--s-text2,#52525b);text-decoration:underline;width:70px}
.pillar-art--directory .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--directory .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--directory .pa{animation-play-state:paused;animation-delay:-9s !important}}
.pillar-art--directory .q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation-name:directory--type;animation-timing-function:steps(38,end)}
@keyframes directory--type{0%,24%{max-width:0}44%,96%{max-width:420px}99%,100%{max-width:0}}
.pillar-art--directory .edit{animation-name:directory--edit}
@keyframes directory--edit{0%,19%{opacity:0;transform:translateY(-6px)}22%,53%{opacity:1;transform:none}55%,100%{opacity:0}}
.pillar-art--directory .bio{animation-name:directory--bio}
@keyframes directory--bio{0%,54%{opacity:0}57%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--directory .push{animation-name:directory--push}
@keyframes directory--push{0%,19%{transform:none}22%,53%{transform:translateY(120px)}56%,100%{transform:none}}
.pillar-art--directory .addb{animation-name:directory--addb}
@keyframes directory--addb{0%,19%{opacity:1}20%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--directory .press{animation-name:directory--press}
@keyframes directory--press{0%,51%{scale:1}52%{scale:.94}53.5%,100%{scale:1}}
.pillar-art--directory .note{animation-name:directory--note}
@keyframes directory--note{0%,62%{opacity:0;transform:translateY(12px)}66%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
.pillar-art--directory .cur{animation-name:directory--cur}
@keyframes directory--cur{0%,6%{opacity:0;transform:translate(1100px,760px)}11%{opacity:1;transform:translate(1080px,700px) scale(1)}18%{transform:translate(139px,604px) scale(1)}19%{transform:translate(139px,604px) scale(.85)}20.5%{transform:translate(139px,604px) scale(1)}46%{transform:translate(139px,604px) scale(1)}51%{transform:translate(1085px,734px) scale(1)}52%{transform:translate(1085px,734px) scale(.85)}53.5%{opacity:1;transform:translate(1085px,734px) scale(1)}60%,100%{opacity:0;transform:translate(1060px,780px)}}

/* MemRoles -> roles */
.pillar-art--roles .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(40 20 80/.35);overflow:hidden}
.pillar-art--roles .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--roles .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--roles .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--roles .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--roles .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--roles .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--roles .mr{position:absolute;left:60px;width:1080px;height:68px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--s-border,#f0f0f2)}
.pillar-art--roles .av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.pillar-art--roles .mr .nm{flex:1}
.pillar-art--roles .mr .nm b{display:block;font-size:16px}
.pillar-art--roles .mr .nm small{font-size:13.5px;color:var(--s-muted,#71717a)}
.pillar-art--roles .role{position:relative;border:1px solid var(--s-border,#d4d4d8);border-radius:10px;padding:8px 14px;font-size:14px;font-weight:500;width:170px;height:38px;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;background:var(--s-surface,#fff)}
.pillar-art--roles .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(40 20 80/.45)}
.pillar-art--roles .pt{width:100%;border-collapse:collapse;font-size:12.5px}
.pillar-art--roles .pt th{font-weight:600;color:var(--s-muted,#71717a);text-align:center;padding:6px 4px;font-size:11.5px}
.pillar-art--roles .pt th:first-child,.pillar-art--roles .pt td:first-child{text-align:left}
.pillar-art--roles .pt td{padding:7px 4px;border-top:1px solid var(--s-border,#f0f0f2);text-align:center}
.pillar-art--roles .y{color:var(--s-violet,#6b52a8);font-weight:700}
.pillar-art--roles .n{color:var(--s-muted,#6b6b76)}
.pillar-art--roles .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--roles .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--roles .pa{animation-play-state:paused;animation-delay:-9s !important}}
.pillar-art--roles .menu{animation-name:roles--menu}
@keyframes roles--menu{0%,15.5%{opacity:0;transform:translateY(-6px)}17%,31.5%{opacity:1;transform:none}32.5%,100%{opacity:0}}
.pillar-art--roles .rA{animation-name:roles--rA}
.pillar-art--roles .rB{animation-name:roles--rB}
@keyframes roles--rA{0%,31.5%{opacity:1}32.5%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes roles--rB{0%,31.5%{opacity:0}32.5%,97%{opacity:1}99%,100%{opacity:0}}
.pillar-art--roles .hl{animation-name:roles--hl}
@keyframes roles--hl{0%,32%{background:transparent}34%{background:var(--s-violet-bg,#f3effb)}55%,100%{background:transparent}}
.pillar-art--roles .tbl{animation-name:roles--tbl}
@keyframes roles--tbl{0%,40%{opacity:0;transform:translateX(60px)}47%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateX(60px)}}
.pillar-art--roles .rowhl{animation-name:roles--rowhl}
@keyframes roles--rowhl{0%,50%{background:transparent}54%,94%{background:var(--s-violet-bg,#f3effb)}98%,100%{background:transparent}}
.pillar-art--roles .cur{animation-name:roles--cur}
@keyframes roles--cur{0%,4%{opacity:0;transform:translate(1080px,760px)}9%{opacity:1;transform:translate(1060px,640px) scale(1)}15%{transform:translate(1040px,484px) scale(1)}16%{transform:translate(1040px,484px) scale(.85)}17.5%{transform:translate(1040px,484px) scale(1)}30.5%{transform:translate(1066px,676px) scale(1)}31.5%{transform:translate(1066px,676px) scale(.85)}33%{opacity:1;transform:translate(1066px,676px) scale(1)}40%,100%{opacity:0;transform:translate(1060px,790px)}}

/* MemRequests -> requests */
.pillar-art--requests .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(40 20 80/.35);overflow:hidden}
.pillar-art--requests .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--requests .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--requests .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--requests .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--s-surface,#fff)}
.pillar-art--requests .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--requests .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--requests .v{position:absolute;left:0;right:0;top:130px;bottom:0;background:var(--s-surface,#fff)}
.pillar-art--requests .qr{position:absolute;left:60px;width:1080px;height:72px;display:flex;align-items:center;gap:14px;border:1px solid var(--s-border,#ececef);border-radius:14px;padding:0 16px;box-sizing:border-box}
.pillar-art--requests .av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.pillar-art--requests .qr .nm{flex:1}
.pillar-art--requests .qr .nm b{display:block;font-size:16px}
.pillar-art--requests .qr .nm small{font-size:13.5px;color:var(--s-muted,#71717a)}
.pillar-art--requests .ap{background:#6b52a8;color:#fff;font-size:14px;font-weight:600;border-radius:10px;padding:9px 16px}
.pillar-art--requests .rv{border:1px solid var(--s-border,#d4d4d8);font-size:14px;font-weight:600;border-radius:10px;padding:8px 16px;background:var(--s-surface,#fff)}
.pillar-art--requests .qa{padding:12px 0;border-top:1px solid var(--s-border,#f0f0f2)}
.pillar-art--requests .qa b{display:block;font-size:14px;color:var(--s-text2,#52525b);font-weight:600}
.pillar-art--requests .qa span{display:block;font-size:15.5px;margin-top:3px}
.pillar-art--requests .opt{position:absolute;top:410px;height:48px;border:1px solid var(--s-border,#d4d4d8);border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:15px;font-weight:500;box-sizing:border-box;width:210px}
.pillar-art--requests .rad{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--s-border-strong,#a1a1aa);box-sizing:border-box;position:relative}
.pillar-art--requests .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--requests .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--requests .pa{animation-play-state:paused;animation-delay:-10s !important}}
.pillar-art--requests .vQ{animation-name:requests--vQ}
.pillar-art--requests .vD{animation-name:requests--vD}
@keyframes requests--vQ{0%,15%{opacity:1}16.5%,55%{opacity:0}57%,100%{opacity:1}}
@keyframes requests--vD{0%,15%{opacity:0;transform:translateX(24px)}17%,55%{opacity:1;transform:none}57%,100%{opacity:0}}
.pillar-art--requests .gone{animation-name:requests--gone}
@keyframes requests--gone{0%,55%{opacity:1;height:72px}57%,96%{opacity:0}99%,100%{opacity:1}}
.pillar-art--requests .shift{animation-name:requests--shift}
@keyframes requests--shift{0%,56%{transform:none}59%,96%{transform:translateY(-86px)}99%,100%{transform:none}}
.pillar-art--requests .done{animation-name:requests--done}
@keyframes requests--done{0%,57%{opacity:0;transform:translateY(10px)}61%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--requests .denyOn{animation-name:requests--denyOn}
@keyframes requests--denyOn{0%,27.5%{opacity:0}28.5%,100%{opacity:1}}
.pillar-art--requests .denyBox{animation-name:requests--denyBox}
@keyframes requests--denyBox{0%,27.5%{border-color:var(--s-border,#d4d4d8)}28.5%,100%{border-color:#c5303e}}
.pillar-art--requests .reason{animation-name:requests--reason}
@keyframes requests--reason{0%,28.5%{opacity:0;transform:translateY(-6px)}31%,100%{opacity:1;transform:none}}
.pillar-art--requests .menu{animation-name:requests--menu}
@keyframes requests--menu{0%,35.5%{opacity:0;transform:translateY(-6px)}37%,43.5%{opacity:1;transform:none}44.5%,100%{opacity:0}}
.pillar-art--requests .rsA{animation-name:requests--rsA}
.pillar-art--requests .rsB{animation-name:requests--rsB}
@keyframes requests--rsA{0%,43.5%{opacity:1}44.5%,100%{opacity:0}}
@keyframes requests--rsB{0%,43.5%{opacity:0}44.5%,100%{opacity:1}}
.pillar-art--requests .press{animation-name:requests--press}
@keyframes requests--press{0%,51.5%{scale:1}52.5%{scale:.94}54%,100%{scale:1}}
.pillar-art--requests .note{animation-name:requests--note}
@keyframes requests--note{0%,64%{opacity:0;transform:translateY(12px)}68%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
.pillar-art--requests .cur{animation-name:requests--cur}
@keyframes requests--cur{0%,3%{opacity:0;transform:translate(1100px,700px)}8%{opacity:1;transform:translate(1100px,520px) scale(1)}13.5%{transform:translate(1082px,370px) scale(1)}14.5%{transform:translate(1082px,370px) scale(.85)}16%{transform:translate(1082px,370px) scale(1)}27%{transform:translate(383px,562px) scale(1)}28%{transform:translate(383px,562px) scale(.85)}29.5%{transform:translate(383px,562px) scale(1)}35%{transform:translate(221px,657px) scale(1)}36%{transform:translate(221px,657px) scale(.85)}37.5%{transform:translate(221px,657px) scale(1)}43%{transform:translate(221px,780px) scale(1)}44%{transform:translate(221px,780px) scale(.85)}45.5%{transform:translate(221px,780px) scale(1)}51%{transform:translate(521px,657px) scale(1)}52%{transform:translate(521px,657px) scale(.85)}53.5%{opacity:1;transform:translate(521px,657px) scale(1)}60%,100%{opacity:0;transform:translate(600px,720px)}}

/* MemScreening -> screening */
.pillar-art--screening .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(40 20 80/.35);overflow:hidden}
.pillar-art--screening .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--screening .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--screening .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--screening .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--screening .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--screening .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--screening .lab{font-size:14.5px;font-weight:600;color:var(--s-text2,#374151);margin:16px 0 6px}
.pillar-art--screening .inp{height:46px;border:1px solid var(--s-border,#d1d5db);border-radius:10px;display:flex;align-items:center;padding:0 14px;font-size:15.5px;box-sizing:border-box;background:var(--s-surface,#fff)}
.pillar-art--screening .req{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--s-text2,#374151);margin-top:8px}
.pillar-art--screening .cb{width:18px;height:18px;border-radius:5px;background:#6b52a8;display:flex;align-items:center;justify-content:center}
.pillar-art--screening .q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0;animation-timing-function:steps(40,end)}
.pillar-art--screening .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(40 20 80/.45)}
.pillar-art--screening .fq{font-size:13.5px;font-weight:600;color:var(--s-text2,#374151);margin:12px 0 5px}
.pillar-art--screening .fa{height:38px;border:1px solid var(--s-border,#d1d5db);border-radius:9px;display:flex;align-items:center;padding:0 12px;font-size:13.5px;box-sizing:border-box}
.pillar-art--screening .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--screening .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--screening .pa{animation-play-state:paused;animation-delay:-10.5s !important}}
.pillar-art--screening .t3{animation-name:screening--t3}
@keyframes screening--t3{0%,8%{max-width:0}28%,96%{max-width:560px}99%,100%{max-width:0}}
.pillar-art--screening .press{animation-name:screening--press}
@keyframes screening--press{0%,33.5%{scale:1}34.5%{scale:.94}36%,100%{scale:1}}
.pillar-art--screening .saved{animation-name:screening--saved}
@keyframes screening--saved{0%,35%{opacity:0}37%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--screening .fam{animation-name:screening--fam}
@keyframes screening--fam{0%,40%{opacity:0;transform:translateX(70px)}47%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateX(70px)}}
.pillar-art--screening .a1{animation-name:screening--a1}
.pillar-art--screening .a2{animation-name:screening--a2}
.pillar-art--screening .a3{animation-name:screening--a3}
@keyframes screening--a1{0%,48%{max-width:0}56%,96%{max-width:300px}99%,100%{max-width:0}}
@keyframes screening--a2{0%,57%{max-width:0}66%,96%{max-width:300px}99%,100%{max-width:0}}
@keyframes screening--a3{0%,67%{max-width:0}74%,96%{max-width:300px}99%,100%{max-width:0}}
.pillar-art--screening .send{animation-name:screening--send}
@keyframes screening--send{0%,79%{scale:1}80%{scale:.95}81.5%,100%{scale:1}}
.pillar-art--screening .sent{animation-name:screening--sent}
@keyframes screening--sent{0%,81%{opacity:0;transform:translateY(8px)}84%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--screening .cur{animation-name:screening--cur}
@keyframes screening--cur{0%,26%{opacity:0;transform:translate(420px,720px)}30%{opacity:1;transform:translate(260px,700px) scale(1)}33.5%{transform:translate(120px,619px) scale(1)}34.5%{transform:translate(120px,619px) scale(.85)}36%{opacity:1;transform:translate(120px,619px) scale(1)}42%,100%{opacity:0;transform:translate(200px,720px)}}

/* MemInvites -> invites */
.pillar-art--invites .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(40 20 80/.35);overflow:hidden}
.pillar-art--invites .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--invites .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--invites .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--invites .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--invites .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--invites .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--invites .ln{display:block;overflow:hidden;white-space:nowrap;max-width:0;animation-timing-function:steps(34,end)}
.pillar-art--invites .stat{position:absolute;top:530px;width:170px;height:74px;border-radius:14px;background:var(--s-violet-bg,#faf8fe);border:1px solid #ece7f6;padding:12px 16px;box-sizing:border-box}
.pillar-art--invites .stat b{display:block;font-size:26px;font-weight:700}
.pillar-art--invites .stat span{font-size:13.5px;color:var(--s-muted,#71717a)}
.pillar-art--invites .tr{position:absolute;left:60px;width:1080px;height:50px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--s-border,#f0f0f2);font-size:15px}
.pillar-art--invites .tr .em{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.pillar-art--invites .pill{font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 10px}
.pillar-art--invites .lk{font-size:14px;color:var(--s-violet,#6b52a8);font-weight:600;width:60px}
.pillar-art--invites .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--invites .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--invites .pa{animation-play-state:paused;animation-delay:-10.5s !important}}
.pillar-art--invites .l1{animation-name:invites--l1}
.pillar-art--invites .l2{animation-name:invites--l2}
.pillar-art--invites .l3{animation-name:invites--l3}
.pillar-art--invites .l4{animation-name:invites--l4}
@keyframes invites--l1{0%,3%{max-width:0}7%,96%{max-width:600px}99%,100%{max-width:0}}
@keyframes invites--l2{0%,7%{max-width:0}12%,96%{max-width:600px}99%,100%{max-width:0}}
@keyframes invites--l3{0%,12%{max-width:0}17%,96%{max-width:600px}99%,100%{max-width:0}}
@keyframes invites--l4{0%,17%{max-width:0}22%,96%{max-width:600px}99%,100%{max-width:0}}
.pillar-art--invites .press{animation-name:invites--press}
@keyframes invites--press{0%,27.5%{scale:1}28.5%{scale:.95}30%,100%{scale:1}}
.pillar-art--invites .st{animation-name:invites--st}
@keyframes invites--st{0%,30%{opacity:0;transform:translateY(10px)}34%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--invites .rs{animation-name:invites--rs}
@keyframes invites--rs{0%,55.5%{opacity:0}56.5%,64%{opacity:1}66%,100%{opacity:0}}
.pillar-art--invites .rvk{animation-name:invites--rvk}
@keyframes invites--rvk{0%,72.5%{opacity:1}74%,96%{opacity:.35}99%,100%{opacity:1}}
.pillar-art--invites .rvl{animation-name:invites--rvl}
@keyframes invites--rvl{0%,72.5%{opacity:0}74%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--invites .rvi{animation-name:invites--rvi}
@keyframes invites--rvi{0%,72.5%{opacity:1}74%,96%{opacity:0}99%,100%{opacity:1}}
.pillar-art--invites .note{animation-name:invites--note}
@keyframes invites--note{0%,34%{opacity:0;transform:translateY(12px)}38%,52%{opacity:1;transform:none}55%,100%{opacity:0}}
.pillar-art--invites .cur{animation-name:invites--cur}
@keyframes invites--cur{0%,20%{opacity:0;transform:translate(300px,560px)}24%{opacity:1;transform:translate(200px,500px) scale(1)}27.5%{transform:translate(130px,448px) scale(1)}28.5%{transform:translate(130px,448px) scale(.85)}30%{transform:translate(130px,448px) scale(1)}50%{transform:translate(1040px,690px) scale(1)}55.5%{transform:translate(1030px,731px) scale(1)}56.5%{transform:translate(1030px,731px) scale(.85)}58%{transform:translate(1030px,731px) scale(1)}72.5%{transform:translate(1106px,781px) scale(1)}73.5%{transform:translate(1106px,781px) scale(.85)}75%{opacity:1;transform:translate(1106px,781px) scale(1)}82%,100%{opacity:0;transform:translate(1140px,800px)}}

/* MemInbox -> inbox */
.pillar-art--inbox .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(40 20 80/.35);overflow:hidden}
.pillar-art--inbox .hdr{position:absolute;left:0;right:0;top:0;height:84px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;padding:0 28px;gap:22px}
.pillar-art--inbox .seg{display:flex;background:var(--s-subtle,#f4f4f5);border-radius:999px;padding:5px}
.pillar-art--inbox .seg span{padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--s-text2,#3f3f46)}
.pillar-art--inbox .sp{display:flex;align-items:center;border:1px solid var(--s-border,#e4e4e7);border-radius:999px;height:58px;padding-left:8px;box-shadow:0 2px 10px rgb(0 0 0/.06)}
.pillar-art--inbox .sf{padding:0 22px;border-left:1px solid var(--s-border,#e4e4e7);line-height:1.25}
.pillar-art--inbox .sf:first-child{border-left:0}
.pillar-art--inbox .sf b{display:block;font-size:12.5px;font-weight:600}
.pillar-art--inbox .sf span{font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--inbox .sgo{width:46px;height:46px;border-radius:50%;background:#c5303e;margin:0 6px 0 8px;display:flex;align-items:center;justify-content:center}
.pillar-art--inbox .lens{position:absolute;top:158px;height:36px;border-radius:999px;border:1px solid var(--s-border,#e4e4e7);font-size:13.5px;font-weight:600;display:flex;align-items:center;justify-content:center;color:var(--s-text2,#3f3f46);box-sizing:border-box}
.pillar-art--inbox .lon{position:absolute;inset:-1px;border-radius:999px;background:#0a0a0a;color:#fff;display:flex;align-items:center;justify-content:center}
.pillar-art--inbox .ir{position:absolute;left:12px;width:396px;height:76px;border-radius:14px;display:flex;align-items:center;gap:12px;padding:0 14px;box-sizing:border-box}
.pillar-art--inbox .av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.pillar-art--inbox .ir .nm{flex:1;min-width:0}
.pillar-art--inbox .ir b{display:block;font-size:15px}
.pillar-art--inbox .ir small{display:block;font-size:13.5px;color:var(--s-muted,#71717a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pillar-art--inbox .ir .tm{font-size:12px;color:var(--s-muted,#a1a1aa);align-self:flex-start;margin-top:16px}
.pillar-art--inbox .ud{width:9px;height:9px;border-radius:50%;background:#c5303e}
.pillar-art--inbox .bub{position:absolute;max-width:520px;border-radius:18px;padding:12px 16px;font-size:15px;line-height:1.45}
.pillar-art--inbox .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(40 20 80/.45)}
.pillar-art--inbox .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--inbox .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--inbox .pa{animation-play-state:paused;animation-delay:-9.5s !important}}
.pillar-art--inbox .lA{animation-name:inbox--lA}
.pillar-art--inbox .lB{animation-name:inbox--lB}
@keyframes inbox--lA{0%,15.5%{opacity:1}16.5%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes inbox--lB{0%,15.5%{opacity:0}16.5%,97%{opacity:1}99%,100%{opacity:0}}
.pillar-art--inbox .listA{animation-name:inbox--listA}
.pillar-art--inbox .listB{animation-name:inbox--listB}
@keyframes inbox--listA{0%,15.5%{opacity:1}17%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes inbox--listB{0%,16%{opacity:0;transform:translateY(8px)}19%,97%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--inbox .sel{animation-name:inbox--sel}
@keyframes inbox--sel{0%,29.5%{background:transparent}30.5%,97%{background:var(--s-violet-bg,#f3effb)}99%,100%{background:transparent}}
.pillar-art--inbox .dotoff{animation-name:inbox--dotoff}
@keyframes inbox--dotoff{0%,30%{opacity:1}31%,97%{opacity:0}99%,100%{opacity:1}}
.pillar-art--inbox .pane0{animation-name:inbox--pane0}
.pillar-art--inbox .pane1{animation-name:inbox--pane1}
@keyframes inbox--pane0{0%,30%{opacity:1}32%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes inbox--pane1{0%,30%{opacity:0;transform:translateX(16px)}33%,97%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--inbox .mA{animation-name:inbox--mA}
.pillar-art--inbox .mB{animation-name:inbox--mB}
@keyframes inbox--mA{0%,49.5%{opacity:1}50.5%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes inbox--mB{0%,49.5%{opacity:0}50.5%,97%{opacity:1}99%,100%{opacity:0}}
.pillar-art--inbox .mail{animation-name:inbox--mail}
@keyframes inbox--mail{0%,60%{opacity:0;transform:translateY(50px)}66%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(50px)}}
.pillar-art--inbox .cur{animation-name:inbox--cur}
@keyframes inbox--cur{0%,4%{opacity:0;transform:translate(400px,400px)}9%{opacity:1;transform:translate(330px,260px) scale(1)}15.5%{transform:translate(267px,176px) scale(1)}16.5%{transform:translate(267px,176px) scale(.85)}18%{transform:translate(267px,176px) scale(1)}29.5%{transform:translate(196px,324px) scale(1)}30.5%{transform:translate(196px,324px) scale(.85)}32%{transform:translate(196px,324px) scale(1)}49.5%{transform:translate(1076px,120px) scale(1)}50.5%{transform:translate(1076px,120px) scale(.85)}52%{opacity:1;transform:translate(1076px,120px) scale(1)}58%,100%{opacity:0;transform:translate(1100px,200px)}}

/* MemAnnouncements -> announcements */
.pillar-art--announcements .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(40 20 80/.35);overflow:hidden}
.pillar-art--announcements .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--announcements .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--announcements .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--announcements .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--announcements .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--announcements .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--announcements .ar{position:absolute;left:60px;width:1080px;height:72px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--s-border,#f0f0f2)}
.pillar-art--announcements .ar img{width:92px;height:60px;border-radius:10px;object-fit:cover}
.pillar-art--announcements .ar b{display:block;font-size:16px}
.pillar-art--announcements .ar small{font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--announcements .dl{position:absolute;left:26px;font-size:14.5px;font-weight:600;color:var(--s-text2,#374151)}
.pillar-art--announcements .di{position:absolute;left:26px;width:508px;border:1px solid var(--s-border,#d1d5db);border-radius:10px;padding:0 14px;box-sizing:border-box;font-size:15px;display:flex;align-items:center}
.pillar-art--announcements .q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0;animation-timing-function:steps(36,end)}
.pillar-art--announcements .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(40 20 80/.45)}
.pillar-art--announcements .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--announcements .pa{animation-duration:14s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--announcements .pa{animation-play-state:paused;animation-delay:-11.5s !important}}
.pillar-art--announcements .dlg{animation-name:announcements--dlg}
@keyframes announcements--dlg{0%,9%{opacity:0;transform:translateY(20px) scale(.97)}12%,56%{opacity:1;transform:none}59%,100%{opacity:0;transform:translateY(20px) scale(.97)}}
.pillar-art--announcements .scrim{animation-name:announcements--scrim}
@keyframes announcements--scrim{0%,9%{opacity:0}12%,56%{opacity:1}59%,100%{opacity:0}}
.pillar-art--announcements .t1{animation-name:announcements--t1}
.pillar-art--announcements .t2{animation-name:announcements--t2}
@keyframes announcements--t1{0%,13%{max-width:0}23%,100%{max-width:480px}}
@keyframes announcements--t2{0%,23%{max-width:0}34%,100%{max-width:480px}}
.pillar-art--announcements .menu{animation-name:announcements--menu}
@keyframes announcements--menu{0%,39%{opacity:0;transform:translateY(-6px)}40.5%,46.5%{opacity:1;transform:none}47.5%,100%{opacity:0}}
.pillar-art--announcements .sA{animation-name:announcements--sA}
.pillar-art--announcements .sB{animation-name:announcements--sB}
@keyframes announcements--sA{0%,46.5%{opacity:1}47.5%,100%{opacity:0}}
@keyframes announcements--sB{0%,46.5%{opacity:0}47.5%,100%{opacity:1}}
.pillar-art--announcements .press{animation-name:announcements--press}
@keyframes announcements--press{0%,53%{scale:1}54%{scale:.95}55.5%,100%{scale:1}}
.pillar-art--announcements .pressA{animation-name:announcements--pressA}
@keyframes announcements--pressA{0%,8%{scale:1}9%{scale:.95}10.5%,100%{scale:1}}
.pillar-art--announcements .mail{animation-name:announcements--mail}
@keyframes announcements--mail{0%,58%{opacity:0;transform:translateY(50px)}64%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(50px)}}
.pillar-art--announcements .ntf{animation-name:announcements--ntf}
@keyframes announcements--ntf{0%,63%{opacity:0;transform:translateY(-30px)}69%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-30px)}}
.pillar-art--announcements .cur{animation-name:announcements--cur}
@keyframes announcements--cur{0%{opacity:0;transform:translate(1100px,400px)}4%{opacity:1;transform:translate(1080px,300px) scale(1)}8%{transform:translate(1031px,172px) scale(1)}9%{transform:translate(1031px,172px) scale(.85)}10.5%{transform:translate(1031px,172px) scale(1)}14%{transform:translate(620px,300px) scale(1)}38.5%{transform:translate(532px,515px) scale(1)}39.5%{transform:translate(532px,515px) scale(.85)}41%{transform:translate(532px,515px) scale(1)}46%{transform:translate(532px,643px) scale(1)}47%{transform:translate(532px,643px) scale(.85)}48.5%{transform:translate(532px,643px) scale(1)}53%{transform:translate(795px,586px) scale(1)}54%{transform:translate(795px,586px) scale(.85)}55.5%{opacity:1;transform:translate(795px,586px) scale(1)}60%,100%{opacity:0;transform:translate(840px,640px)}}

/* MemTemplates -> templates */
.pillar-art--templates .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(40 20 80/.35);overflow:hidden}
.pillar-art--templates .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--templates .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--templates .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--templates .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--templates .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--templates .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--templates .tp{position:absolute;left:60px;width:760px;height:62px;border:1px solid var(--s-border,#ececef);border-radius:14px;display:flex;align-items:center;gap:14px;padding:0 18px;box-sizing:border-box}
.pillar-art--templates .tp b{font-size:15.5px}
.pillar-art--templates .tp small{flex:1;font-size:13.5px;color:var(--s-muted,#71717a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pillar-art--templates .tp span{font-size:14px;color:var(--s-violet,#6b52a8);font-weight:600}
.pillar-art--templates .lab{position:absolute;left:24px;font-size:14.5px;font-weight:600;color:var(--s-text2,#374151)}
.pillar-art--templates .inp{position:absolute;left:24px;width:712px;border:1px solid var(--s-border,#d1d5db);border-radius:10px;padding:0 14px;box-sizing:border-box;font-size:15px;display:flex;align-items:center;background:var(--s-surface,#fff)}
.pillar-art--templates .q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0;animation-timing-function:steps(40,end)}
.pillar-art--templates .tok{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--s-violet-bg,#f3effb);color:var(--s-violet,#6b52a8);border-radius:6px;padding:3px 7px}
.pillar-art--templates .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(40 20 80/.45)}
.pillar-art--templates .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--templates .pa{animation-duration:14s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--templates .pa{animation-play-state:paused;animation-delay:-11s !important}}
.pillar-art--templates .t1{animation-name:templates--t1}
.pillar-art--templates .t2{animation-name:templates--t2}
.pillar-art--templates .t3{animation-name:templates--t3}
@keyframes templates--t1{0%,3%{max-width:0}12%,96%{max-width:500px}99%,100%{max-width:0}}
@keyframes templates--t2{0%,13%{max-width:0}26%,96%{max-width:700px}99%,100%{max-width:0}}
@keyframes templates--t3{0%,26%{max-width:0}36%,96%{max-width:700px}99%,100%{max-width:0}}
.pillar-art--templates .press{animation-name:templates--press}
@keyframes templates--press{0%,40.5%{scale:1}41.5%{scale:.95}43%,100%{scale:1}}
.pillar-art--templates .newrow{animation-name:templates--newrow}
@keyframes templates--newrow{0%,42%{opacity:0;transform:translateY(-8px)}46%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--templates .comp{animation-name:templates--comp}
@keyframes templates--comp{0%,52%{opacity:0;transform:translateX(60px)}58%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateX(60px)}}
.pillar-art--templates .ins{animation-name:templates--ins}
@keyframes templates--ins{0%,63%{opacity:0}66%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--templates .pick{animation-name:templates--pick}
@keyframes templates--pick{0%,59%{opacity:0;transform:translateY(6px)}61%,65%{opacity:1;transform:none}66.5%,100%{opacity:0}}
.pillar-art--templates .edit{animation-name:templates--edit}
@keyframes templates--edit{0%,73%{max-width:0}80%,96%{max-width:200px}99%,100%{max-width:0}}
.pillar-art--templates .cur{animation-name:templates--cur}
@keyframes templates--cur{0%,34%{opacity:0;transform:translate(300px,720px)}37%{opacity:1;transform:translate(220px,700px) scale(1)}40.5%{transform:translate(158px,699px) scale(1)}41.5%{transform:translate(158px,699px) scale(.85)}43%{opacity:1;transform:translate(158px,699px) scale(1)}49%,100%{opacity:0;transform:translate(220px,720px)}}

/* MemMailingList -> mailing_list */
.pillar-art--mailing_list .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(40 20 80/.35);overflow:hidden}
.pillar-art--mailing_list .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--mailing_list .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--mailing_list .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--mailing_list .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px}
.pillar-art--mailing_list .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--mailing_list .org i{width:26px;height:26px;border-radius:50%;background:#3f6b96;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--mailing_list .lr{position:absolute;left:60px;width:1080px;height:58px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--s-border,#f0f0f2);font-size:15px}
.pillar-art--mailing_list .lr .av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px}
.pillar-art--mailing_list .lr .nm{flex:1}
.pillar-art--mailing_list .lr .nm b{font-weight:600}
.pillar-art--mailing_list .lr .nm small{margin-left:10px;color:var(--s-muted,#71717a);font-size:14px}
.pillar-art--mailing_list .lr .j{font-size:14px;color:var(--s-muted,#71717a)}
.pillar-art--mailing_list .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(40 20 80/.45)}
.pillar-art--mailing_list .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--mailing_list .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--mailing_list .pa{animation-play-state:paused;animation-delay:-10.5s !important}}
.pillar-art--mailing_list .chk{animation-name:mailing_list--chk}
@keyframes mailing_list--chk{0%,12%{opacity:0;transform:translateX(-60px)}17%,33%{opacity:1;transform:none}37%,100%{opacity:0;transform:translateX(-60px)}}
.pillar-art--mailing_list .box{animation-name:mailing_list--box}
@keyframes mailing_list--box{0%,21.5%{opacity:0}22.5%,100%{opacity:1}}
.pillar-art--mailing_list .push{animation-name:mailing_list--push}
@keyframes mailing_list--push{0%,36%{transform:none}40%,96%{transform:translateY(58px)}99%,100%{transform:none}}
.pillar-art--mailing_list .nr{animation-name:mailing_list--nr}
@keyframes mailing_list--nr{0%,37%{opacity:0;transform:translateY(-10px)}41%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--mailing_list .nrbg{animation-name:mailing_list--nrbg}
@keyframes mailing_list--nrbg{0%,40%{background:var(--s-violet-bg,#f3effb)}60%,100%{background:transparent}}
.pillar-art--mailing_list .cA{animation-name:mailing_list--cA}
.pillar-art--mailing_list .cB{animation-name:mailing_list--cB}
@keyframes mailing_list--cA{0%,38.5%{opacity:1}39.5%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes mailing_list--cB{0%,38.5%{opacity:0}39.5%,97%{opacity:1}99%,100%{opacity:0}}
.pillar-art--mailing_list .spin{animation-name:mailing_list--spin}
@keyframes mailing_list--spin{0%,40%{transform:rotate(0)}48%,100%{transform:rotate(720deg)}}
.pillar-art--mailing_list .press{animation-name:mailing_list--press}
@keyframes mailing_list--press{0%,61.5%{scale:1}62.5%{scale:.95}64%,100%{scale:1}}
.pillar-art--mailing_list .dl{animation-name:mailing_list--dl}
@keyframes mailing_list--dl{0%,63%{opacity:0;transform:translateY(12px)}67%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
.pillar-art--mailing_list .note{animation-name:mailing_list--note}
@keyframes mailing_list--note{0%,70%{opacity:0;transform:translateY(12px)}74%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
.pillar-art--mailing_list .cur{animation-name:mailing_list--cur}
@keyframes mailing_list--cur{0%,48%{opacity:0;transform:translate(1060px,360px)}53%{opacity:1;transform:translate(1060px,260px) scale(1)}61.5%{transform:translate(1066px,172px) scale(1)}62.5%{transform:translate(1066px,172px) scale(.85)}64%{opacity:1;transform:translate(1066px,172px) scale(1)}70%,100%{opacity:0;transform:translate(1080px,240px)}}

/* RecTranscript -> transcript */
.pillar-art--transcript .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(10 50 40/.35);overflow:hidden}
.pillar-art--transcript .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--transcript .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--transcript .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--transcript .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--s-surface,#fff)}
.pillar-art--transcript .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--transcript .org i{width:26px;height:26px;border-radius:50%;background:#2f7a6a;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--transcript .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(10 50 40/.45)}
.pillar-art--transcript .note{position:absolute;display:flex;align-items:center;gap:9px;background:#18181b;color:#fff;border-radius:999px;padding:11px 18px 11px 14px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 16px 30px -10px rgb(0 0 0/.5);z-index:25}
.pillar-art--transcript .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--transcript .fam{background:var(--s-subtle,#faf8f5)}
.pillar-art--transcript .fcard{background:var(--s-surface,#fff);border:1px solid var(--s-border,#ece7e0);border-radius:20px}
.pillar-art--transcript .pa{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--transcript .pa{animation-play-state:paused;animation-delay:-8.5s !important}}
.pillar-art--transcript .row{position:absolute;left:60px;width:720px;height:62px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f0ece6;font-size:15px}
.pillar-art--transcript .row img{width:64px;height:44px;border-radius:9px;object-fit:cover}
.pillar-art--transcript .row b{display:block;font-size:15.5px}
.pillar-art--transcript .row small{font-size:13px;color:var(--s-muted,#78716c)}
.pillar-art--transcript .row .h{margin-left:auto;font-weight:700;font-size:15px}
.pillar-art--transcript .night{animation-name:transcript--night}
@keyframes transcript--night{0%,8%{opacity:0}11%,28%{opacity:1}31%,100%{opacity:0}}
.pillar-art--transcript .moon{animation-name:transcript--moon}
@keyframes transcript--moon{0%,8%{opacity:0;transform:translateY(10px)}12%,28%{opacity:1;transform:none}31%,100%{opacity:0}}
.pillar-art--transcript .r1{animation-name:transcript--r1}
@keyframes transcript--r1{0%,30%{opacity:0;transform:translateY(10px)}35%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--transcript .att{animation-name:transcript--att}
@keyframes transcript--att{0%,1%{opacity:0;transform:translateY(20px)}5%,24%{opacity:1;transform:none}28%,100%{opacity:0;transform:translateY(-10px)}}
.pillar-art--transcript .tr{animation-name:transcript--tr}
@keyframes transcript--tr{0%,58%{opacity:0;transform:translateX(70px)}65%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateX(70px)}}
.pillar-art--transcript .press{animation-name:transcript--press}
@keyframes transcript--press{0%,55%{scale:1}56%{scale:.94}57.5%,100%{scale:1}}
.pillar-art--transcript .cur{animation-name:transcript--cur}
@keyframes transcript--cur{0%,40%{opacity:0;transform:translate(560px,420px)}46%{opacity:1;transform:translate(480px,220px) scale(1)}55%{transform:translate(907px,187px) scale(1)}56%{transform:translate(907px,187px) scale(.85)}57.5%{opacity:1;transform:translate(907px,187px) scale(1)}64%,100%{opacity:0;transform:translate(560px,160px)}}

/* RecHours -> hours */
.pillar-art--hours .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(10 50 40/.35);overflow:hidden}
.pillar-art--hours .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--hours .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--hours .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--hours .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--s-surface,#fff)}
.pillar-art--hours .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--hours .org i{width:26px;height:26px;border-radius:50%;background:#2f7a6a;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--hours .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(10 50 40/.45)}
.pillar-art--hours .note{position:absolute;display:flex;align-items:center;gap:9px;background:#18181b;color:#fff;border-radius:999px;padding:11px 18px 11px 14px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 16px 30px -10px rgb(0 0 0/.5);z-index:25}
.pillar-art--hours .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--hours .fam{background:var(--s-subtle,#faf8f5)}
.pillar-art--hours .fcard{background:var(--s-surface,#fff);border:1px solid var(--s-border,#ece7e0);border-radius:20px}
.pillar-art--hours .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--hours .pa{animation-play-state:paused;animation-delay:-8s !important}}
.pillar-art--hours .grow{animation-name:hours--grow}
@keyframes hours--grow{0%,40%{width:26px}48%,95%{width:77px}99%,100%{width:26px}}
.pillar-art--hours .hA{animation-name:hours--hA}
.pillar-art--hours .hB{animation-name:hours--hB}
@keyframes hours--hA{0%,40%{opacity:1}41%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes hours--hB{0%,40%{opacity:0}41%,97%{opacity:1}99%,100%{opacity:0}}
.pillar-art--hours .form{animation-name:hours--form}
@keyframes hours--form{0%,12%{opacity:0;transform:translateY(40px)}17%,38%{opacity:1;transform:none}41%,100%{opacity:0;transform:translateY(40px)}}
.pillar-art--hours .q{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation-name:hours--type;animation-timing-function:steps(20,end)}
@keyframes hours--type{0%,18%{max-width:0}28%,100%{max-width:300px}}
.pillar-art--hours .press{animation-name:hours--press}
@keyframes hours--press{0%,9%{scale:1}10%{scale:.94}11.5%,100%{scale:1}}
.pillar-art--hours .pressS{animation-name:hours--pressS}
@keyframes hours--pressS{0%,35%{scale:1}36%{scale:.94}37.5%,100%{scale:1}}
.pillar-art--hours .sugg{animation-name:hours--sugg}
@keyframes hours--sugg{0%,58%{opacity:0;transform:translateY(10px)}62%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
.pillar-art--hours .hl{animation-name:hours--hl}
@keyframes hours--hl{0%,40%{background:transparent}44%{background:var(--s-teal-bg,#e2efec)}60%,100%{background:transparent}}
.pillar-art--hours .cur{animation-name:hours--cur}
@keyframes hours--cur{0%{opacity:0;transform:translate(700px,200px)}4%{opacity:1;transform:translate(680px,140px) scale(1)}9%{transform:translate(658px,159px) scale(1)}10%{transform:translate(658px,159px) scale(.85)}11.5%{transform:translate(658px,159px) scale(1)}35%{transform:translate(98px,283px) scale(1)}36%{transform:translate(98px,283px) scale(.85)}37.5%{opacity:1;transform:translate(98px,283px) scale(1)}44%,100%{opacity:0;transform:translate(520px,500px)}}

/* RecDocuments -> documents */
.pillar-art--documents .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(10 50 40/.35);overflow:hidden}
.pillar-art--documents .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--documents .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--documents .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--documents .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--s-surface,#fff)}
.pillar-art--documents .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--documents .org i{width:26px;height:26px;border-radius:50%;background:#2f7a6a;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--documents .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(10 50 40/.45)}
.pillar-art--documents .note{position:absolute;display:flex;align-items:center;gap:9px;background:#18181b;color:#fff;border-radius:999px;padding:11px 18px 11px 14px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 16px 30px -10px rgb(0 0 0/.5);z-index:25}
.pillar-art--documents .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--documents .fam{background:var(--s-subtle,#faf8f5)}
.pillar-art--documents .fcard{background:var(--s-surface,#fff);border:1px solid var(--s-border,#ece7e0);border-radius:20px}
.pillar-art--documents .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--documents .pa{animation-play-state:paused;animation-delay:-8s !important}}
.pillar-art--documents .pick{animation-name:documents--pick}
@keyframes documents--pick{0%,14%{box-shadow:none}16%,24%{box-shadow:0 0 0 3px #2f7a6a}28%,100%{box-shadow:none}}
.pillar-art--documents .dip{animation-name:documents--dip}
@keyframes documents--dip{0%,17%{opacity:0;transform:translateY(40px) rotate(-2deg)}24%,55%{opacity:1;transform:rotate(-2deg)}59%,100%{opacity:0;transform:translateY(-20px) rotate(-2deg)}}
.pillar-art--documents .let{animation-name:documents--let}
@keyframes documents--let{0%,56%{opacity:0;transform:translateY(40px) rotate(1.5deg)}63%,93%{opacity:1;transform:rotate(1.5deg)}97%,100%{opacity:0;transform:translateY(40px) rotate(1.5deg)}}
.pillar-art--documents .cur{animation-name:documents--cur}
@keyframes documents--cur{0%,4%{opacity:0;transform:translate(560px,420px)}9%{opacity:1;transform:translate(420px,380px) scale(1)}15%{transform:translate(738px,396px) scale(1)}16%{transform:translate(738px,396px) scale(.85)}17.5%{opacity:1;transform:translate(738px,396px) scale(1)}24%,100%{opacity:0;transform:translate(200px,360px)}}

/* RecStudentId -> student_id */
.pillar-art--student_id .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(10 50 40/.35);overflow:hidden}
.pillar-art--student_id .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--student_id .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--student_id .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--student_id .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--s-surface,#fff)}
.pillar-art--student_id .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--student_id .org i{width:26px;height:26px;border-radius:50%;background:#2f7a6a;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--student_id .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(10 50 40/.45)}
.pillar-art--student_id .note{position:absolute;display:flex;align-items:center;gap:9px;background:#18181b;color:#fff;border-radius:999px;padding:11px 18px 11px 14px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 16px 30px -10px rgb(0 0 0/.5);z-index:25}
.pillar-art--student_id .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--student_id .fam{background:var(--s-subtle,#faf8f5)}
.pillar-art--student_id .fcard{background:var(--s-surface,#fff);border:1px solid var(--s-border,#ece7e0);border-radius:20px}
.pillar-art--student_id .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--student_id .pa{animation-play-state:paused;animation-delay:-6s !important}}
.pillar-art--student_id .card{animation-name:student_id--card}
@keyframes student_id--card{0%,2%{opacity:0;transform:translateY(30px) rotate(-4deg)}8%,95%{opacity:1;transform:rotate(-4deg)}99%,100%{opacity:0}}
.pillar-art--student_id .scan{animation-name:student_id--scan}
@keyframes student_id--scan{0%,18%{opacity:0;top:0}20%{opacity:1;top:0}30%{opacity:1;top:69px}32%,100%{opacity:0}}
.pillar-art--student_id .phone{animation-name:student_id--phone}
@keyframes student_id--phone{0%,28%{opacity:0;transform:translateX(80px)}35%,95%{opacity:1;transform:none}99%,100%{opacity:0;transform:translateX(80px)}}
.pillar-art--student_id .okA{animation-name:student_id--okA}
.pillar-art--student_id .okB{animation-name:student_id--okB}
@keyframes student_id--okA{0%,70%{opacity:1}71%,97%{opacity:0}99%,100%{opacity:1}}
@keyframes student_id--okB{0%,70%{opacity:0}71%,97%{opacity:1}99%,100%{opacity:0}}
.pillar-art--student_id .rev{animation-name:student_id--rev}
@keyframes student_id--rev{0%,66%{scale:1}67%{scale:.94}68.5%,100%{scale:1}}
.pillar-art--student_id .menu{animation-name:student_id--menu}
@keyframes student_id--menu{0%,58%{opacity:0;transform:translateY(12px)}62%,72%{opacity:1;transform:none}75%,100%{opacity:0}}
.pillar-art--student_id .cur{animation-name:student_id--cur}
@keyframes student_id--cur{0%,56%{opacity:0;transform:translate(260px,470px)}60%{opacity:1;transform:translate(220px,440px) scale(1)}66%{transform:translate(104px,443px) scale(1)}67%{transform:translate(104px,443px) scale(.85)}68.5%{opacity:1;transform:translate(104px,443px) scale(1)}76%,100%{opacity:0;transform:translate(200px,450px)}}

/* RecConfirm -> confirm */
.pillar-art--confirm .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(10 50 40/.35);overflow:hidden}
.pillar-art--confirm .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--confirm .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--confirm .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--confirm .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--s-surface,#fff)}
.pillar-art--confirm .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--confirm .org i{width:26px;height:26px;border-radius:50%;background:#2f7a6a;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--confirm .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(10 50 40/.45)}
.pillar-art--confirm .note{position:absolute;display:flex;align-items:center;gap:9px;background:#18181b;color:#fff;border-radius:999px;padding:11px 18px 11px 14px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 16px 30px -10px rgb(0 0 0/.5);z-index:25}
.pillar-art--confirm .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--confirm .fam{background:var(--s-subtle,#faf8f5)}
.pillar-art--confirm .fcard{background:var(--s-surface,#fff);border:1px solid var(--s-border,#ece7e0);border-radius:20px}
.pillar-art--confirm .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--confirm .pa{animation-play-state:paused;animation-delay:-8s !important}}
.pillar-art--confirm .rA{animation-name:confirm--rA}
.pillar-art--confirm .rB{animation-name:confirm--rB}
@keyframes confirm--rA{0%,49%{opacity:1}51%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes confirm--rB{0%,49%{opacity:0;transform:scale(.8)}53%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.pillar-art--confirm .mA{animation-name:confirm--mA}
.pillar-art--confirm .mB{animation-name:confirm--mB}
@keyframes confirm--mA{0%,27%{opacity:1}28%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes confirm--mB{0%,27%{opacity:0}28%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--confirm .menu{animation-name:confirm--menu}
@keyframes confirm--menu{0%,14%{opacity:0;transform:translateY(-6px)}17%,26%{opacity:1;transform:none}28%,100%{opacity:0}}
.pillar-art--confirm .press{animation-name:confirm--press}
@keyframes confirm--press{0%,46%{scale:1}47%{scale:.94}48.5%,100%{scale:1}}
.pillar-art--confirm .note2{animation-name:confirm--note2}
@keyframes confirm--note2{0%,55%{opacity:0;transform:translateY(10px)}59%,92%{opacity:1;transform:none}95%,100%{opacity:0}}
.pillar-art--confirm .cur{animation-name:confirm--cur}
@keyframes confirm--cur{0%,6%{opacity:0;transform:translate(1000px,700px)}10%{opacity:1;transform:translate(980px,560px) scale(1)}14%{transform:translate(951px,381px) scale(1)}15%{transform:translate(951px,381px) scale(.85)}16%{transform:translate(951px,381px) scale(1)}25%{transform:translate(951px,426px) scale(1)}26%{transform:translate(951px,426px) scale(.85)}27.5%{transform:translate(951px,426px) scale(1)}46%{transform:translate(1071px,201px) scale(1)}47%{transform:translate(1071px,201px) scale(.85)}48.5%{opacity:1;transform:translate(1071px,201px) scale(1)}56%,100%{opacity:0;transform:translate(1060px,260px)}}

/* RecSpending -> spending */
.pillar-art--spending .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(10 50 40/.35);overflow:hidden}
.pillar-art--spending .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--spending .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--spending .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--spending .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--s-surface,#fff)}
.pillar-art--spending .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--spending .org i{width:26px;height:26px;border-radius:50%;background:#2f7a6a;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--spending .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(10 50 40/.45)}
.pillar-art--spending .note{position:absolute;display:flex;align-items:center;gap:9px;background:#18181b;color:#fff;border-radius:999px;padding:11px 18px 11px 14px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 16px 30px -10px rgb(0 0 0/.5);z-index:25}
.pillar-art--spending .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--spending .fam{background:var(--s-subtle,#faf8f5)}
.pillar-art--spending .fcard{background:var(--s-surface,#fff);border:1px solid var(--s-border,#ece7e0);border-radius:20px}
.pillar-art--spending .pa{animation-duration:11s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--spending .pa{animation-play-state:paused;animation-delay:-7.5s !important}}
.pillar-art--spending .ln{animation-name:spending--ln}
@keyframes spending--ln{0%,4%{opacity:0;transform:translateY(10px)}10%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.pillar-art--spending .tabA{animation-name:spending--tabA}
.pillar-art--spending .tabB{animation-name:spending--tabB}
@keyframes spending--tabA{0%,44%{opacity:1}45%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes spending--tabB{0%,44%{opacity:0}45%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--spending .bycat{animation-name:spending--bycat}
@keyframes spending--bycat{0%,46%{opacity:0;transform:translateX(60px)}53%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateX(60px)}}
.pillar-art--spending .cur{animation-name:spending--cur}
@keyframes spending--cur{0%,30%{opacity:0;transform:translate(420px,400px)}35%{opacity:1;transform:translate(300px,300px) scale(1)}43%{transform:translate(250px,204px) scale(1)}44%{transform:translate(250px,204px) scale(.85)}45.5%{opacity:1;transform:translate(250px,204px) scale(1)}52%,100%{opacity:0;transform:translate(280px,240px)}}

/* RecFundingMap -> funding_map */
.pillar-art--funding_map .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(10 50 40/.35);overflow:hidden}
.pillar-art--funding_map .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--funding_map .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--funding_map .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--funding_map .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--s-surface,#fff)}
.pillar-art--funding_map .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--funding_map .org i{width:26px;height:26px;border-radius:50%;background:#2f7a6a;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--funding_map .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(10 50 40/.45)}
.pillar-art--funding_map .note{position:absolute;display:flex;align-items:center;gap:9px;background:#18181b;color:#fff;border-radius:999px;padding:11px 18px 11px 14px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 16px 30px -10px rgb(0 0 0/.5);z-index:25}
.pillar-art--funding_map .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--funding_map .fam{background:var(--s-subtle,#faf8f5)}
.pillar-art--funding_map .fcard{background:var(--s-surface,#fff);border:1px solid var(--s-border,#ece7e0);border-radius:20px}
.pillar-art--funding_map .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--funding_map .pa{animation-play-state:paused;animation-delay:-6s !important}}
.pillar-art--funding_map .fl-st path{animation:funding_map--flhl 12s infinite both}
@keyframes funding_map--flhl{0%,27%{stroke:#4b5563;stroke-width:.5px}29%,93%{stroke:#0a0a0a;stroke-width:2.6px}97%,100%{stroke:#4b5563;stroke-width:.5px}}
@media (prefers-reduced-motion:reduce){.pillar-art--funding_map .fl-st path{animation-play-state:paused;animation-delay:-6s}}
.pillar-art--funding_map .sA{animation-name:funding_map--sA}
.pillar-art--funding_map .sB{animation-name:funding_map--sB}
@keyframes funding_map--sA{0%,25.5%{opacity:1}26.5%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes funding_map--sB{0%,25.5%{opacity:0}26.5%,96%{opacity:1}99%,100%{opacity:0}}
.pillar-art--funding_map .flc{animation-name:funding_map--flc}
@keyframes funding_map--flc{0%,30%{opacity:0;transform:translateY(30px)}36%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(30px)}}
.pillar-art--funding_map .cur{animation-name:funding_map--cur}
@keyframes funding_map--cur{0%,6%{opacity:0;transform:translate(640px,520px)}10%{opacity:1;transform:translate(630px,480px) scale(1)}25.5%{transform:translate(606px,458px) scale(1)}26.5%{transform:translate(606px,458px) scale(.85)}28%{opacity:1;transform:translate(606px,458px) scale(1)}36%,100%{opacity:0;transform:translate(620px,470px)}}

/* RecStateRules -> state_rules */
.pillar-art--state_rules .screen{position:absolute;left:0;top:44px;width:1280px;height:820px;transform:scale(.62);transform-origin:0 0;background:var(--s-surface,#fff);border-radius:26px;box-shadow:0 0 0 1.5px rgb(0 0 0/.06),0 40px 80px -20px rgb(10 50 40/.35);overflow:hidden}
.pillar-art--state_rules .chrome{position:absolute;left:0;right:0;top:0;height:54px;background:var(--s-subtle,#f4f4f5);border-bottom:1px solid var(--s-border,#e4e4e7)}
.pillar-art--state_rules .dot{position:absolute;top:21px;width:13px;height:13px;border-radius:50%}
.pillar-art--state_rules .url{position:absolute;left:112px;top:11px;width:720px;height:32px;background:var(--s-surface,#fff);border-radius:10px;box-shadow:inset 0 0 0 1px var(--s-border,#e4e4e7);font-size:14.5px;color:var(--s-text2,#3f3f46);line-height:32px;padding-left:38px;box-sizing:border-box}
.pillar-art--state_rules .mh{position:absolute;left:0;right:0;top:54px;height:76px;border-bottom:1px solid var(--s-border,#ececef);display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--s-surface,#fff)}
.pillar-art--state_rules .org{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;border:1px solid var(--s-border,#e4e4e7);border-radius:12px;padding:8px 14px}
.pillar-art--state_rules .org i{width:26px;height:26px;border-radius:50%;background:#2f7a6a;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.pillar-art--state_rules .frag{position:absolute;background:var(--s-surface,#fff);border-radius:18px;box-shadow:0 0 0 1px rgb(0 0 0/.05),0 30px 60px -16px rgb(10 50 40/.45)}
.pillar-art--state_rules .note{position:absolute;display:flex;align-items:center;gap:9px;background:#18181b;color:#fff;border-radius:999px;padding:11px 18px 11px 14px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 16px 30px -10px rgb(0 0 0/.5);z-index:25}
.pillar-art--state_rules .cursor{position:absolute;left:0;top:0;width:36px;height:36px;z-index:30;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3))}
.pillar-art--state_rules .fam{background:var(--s-subtle,#faf8f5)}
.pillar-art--state_rules .fcard{background:var(--s-surface,#fff);border:1px solid var(--s-border,#ece7e0);border-radius:20px}
.pillar-art--state_rules .pa{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.5,0,.2,1)}
@media (prefers-reduced-motion:reduce){.pillar-art--state_rules .pa{animation-play-state:paused;animation-delay:-9s !important}}
.pillar-art--state_rules .q1{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation-name:state_rules--t1;animation-timing-function:steps(12,end)}
@keyframes state_rules--t1{0%,4%{max-width:0}14%,96%{max-width:220px}99%,100%{max-width:0}}
.pillar-art--state_rules .q2{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation-name:state_rules--t2;animation-timing-function:steps(11,end)}
@keyframes state_rules--t2{0%,16%{max-width:0}25%,96%{max-width:220px}99%,100%{max-width:0}}
.pillar-art--state_rules .q3{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation-name:state_rules--t3;animation-timing-function:steps(10,end)}
@keyframes state_rules--t3{0%,27%{max-width:0}35%,96%{max-width:220px}99%,100%{max-width:0}}
.pillar-art--state_rules .q4{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation-name:state_rules--t4;animation-timing-function:steps(22,end)}
@keyframes state_rules--t4{0%,50%{max-width:0}62%,96%{max-width:300px}99%,100%{max-width:0}}
.pillar-art--state_rules .press{animation-name:state_rules--press}
@keyframes state_rules--press{0%,67%{scale:1}68%{scale:.95}69.5%,100%{scale:1}}
.pillar-art--state_rules .sent{animation-name:state_rules--sent}
@keyframes state_rules--sent{0%,69%{opacity:0;transform:translateY(10px)}72%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
.pillar-art--state_rules .mail{animation-name:state_rules--mail}
@keyframes state_rules--mail{0%,72%{opacity:0;transform:translateY(40px)}78%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(40px)}}
.pillar-art--state_rules .cur{animation-name:state_rules--cur}
@keyframes state_rules--cur{0%,40%{opacity:0;transform:translate(300px,700px)}44%{opacity:1;transform:translate(200px,650px) scale(1)}49%{transform:translate(180px,622px) scale(1)}50%{transform:translate(180px,622px) scale(.85)}51%{transform:translate(180px,622px) scale(1)}67%{transform:translate(430px,622px) scale(1)}68%{transform:translate(430px,622px) scale(.85)}69.5%{opacity:1;transform:translate(430px,622px) scale(1)}76%,100%{opacity:0;transform:translate(460px,660px)}}