/* Generated by scripts/build-css.py from styles.css. Do not edit. */
.mode-toggle{display:inline-flex;gap:5px;padding:5px;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(6,9,10,.42)}
.mode-toggle button{min-width:112px;padding:12px 20px;border:0;border-radius:10px;background:transparent;color:#8f9996;font:750 14px/1 Manrope,sans-serif;cursor:pointer;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.mode-toggle button[aria-selected="true"]{background:#eef3f1;color:#101416;box-shadow:0 4px 0 #aeb5b3}
.mode-stage{--mode-pad:14px;position:relative;width:min(1068px,100%);height:auto;min-height:0;aspect-ratio:16/10;margin:0 auto;overflow:visible;border:0;border-radius:0;background:transparent}
.mode-window{position:absolute;border:1px solid rgba(196,204,201,.48);border-radius:20px;background:transparent;box-shadow:none;will-change:top,right,bottom,left}
.mode-window::before{content:"";position:absolute;left:16px;top:15px;width:9px;height:9px;border-radius:50%;background:#929795;box-shadow:17px 0 #929795,34px 0 #929795}
.mode-window::after{display:none}
.mode-window.one{inset:var(--mode-pad) 51% var(--mode-pad) var(--mode-pad)}
.mode-window.two{inset:var(--mode-pad) var(--mode-pad) 52% 51%}
.mode-window.three{inset:51% var(--mode-pad) var(--mode-pad) 51%}
.mode-dot{position:absolute;z-index:4;left:51%;top:51%;width:78px;height:78px;border:16px solid #242729;border-radius:50%;background:#000;transform:translate(-50%,-50%);box-shadow:0 0 0 10px rgba(195,110,227,.12),0 0 40px rgba(195,110,227,.42),0 20px 42px rgba(0,0,0,.38)}
.mode-dot::before{content:"";position:absolute;inset:-40px;border-radius:50%;background:conic-gradient(from -35deg,transparent 0 66%,rgba(195,110,227,.18) 70%,#c36ee3 82%,#e8a3ff 90%,transparent 96% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));opacity:0;transform:scale(.72) rotate(-55deg);filter:drop-shadow(0 0 9px rgba(195,110,227,.75));pointer-events:none}
.mode-dot::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.swap-pill{position:absolute;z-index:5;left:75%;top:49.5%;width:78px;height:58px;opacity:0;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 0 rgba(195,110,227,0))}
.swap-pill span{position:absolute;top:calc(50% - 5px);width:30px;height:10px;border-radius:999px;background:#9aa29f;box-shadow:0 1px 0 rgba(255,255,255,.08);transition:none}
.swap-pill span:first-child{right:50%;transform-origin:right center}
.swap-pill span:nth-child(2){left:50%;transform-origin:left center}
.swap-pill i{position:absolute;left:50%;bottom:calc(50% - 3.5px);width:7px;height:7px;border-radius:999px;background:#c36ee3;opacity:0;transform:translateX(-50%) scaleY(1);transform-origin:center bottom;box-shadow:0 0 12px rgba(195,110,227,.72)}
.mode-stage[data-mode="rotate"] .mode-window.one{animation:mode-rotate-one 5.4s cubic-bezier(.65,0,.35,1) infinite}
.mode-stage[data-mode="rotate"] .mode-window.two{animation:mode-rotate-two 5.4s cubic-bezier(.65,0,.35,1) infinite}
.mode-stage[data-mode="rotate"] .mode-window.three{animation:mode-rotate-three 5.4s cubic-bezier(.65,0,.35,1) infinite}
.mode-stage[data-mode="rotate"] .mode-dot{animation:mode-dot-charge 5.4s cubic-bezier(.65,0,.35,1) infinite}
.mode-stage[data-mode="rotate"] .mode-dot::before{animation:mode-orbit-pull 5.4s cubic-bezier(.55,.05,.28,1) infinite}
.mode-stage[data-mode="swap"] .mode-dot{display:none}
.mode-stage[data-mode="swap"] .mode-window.one{animation:mode-swap-scene 5.4s linear infinite}
.mode-stage[data-mode="swap"] .mode-window.two{animation:mode-swap-two 5.4s cubic-bezier(.65,0,.35,1) infinite}
.mode-stage[data-mode="swap"] .mode-window.three{animation:mode-swap-three 5.4s cubic-bezier(.65,0,.35,1) infinite}
.mode-stage[data-mode="swap"] .swap-pill{animation:mode-swap-grip 5.4s cubic-bezier(.55,.05,.28,1) infinite}
.mode-stage[data-mode="swap"] .swap-pill span:first-child{animation:mode-swap-arm-a 5.4s cubic-bezier(.55,.05,.28,1) infinite}
.mode-stage[data-mode="swap"] .swap-pill span:nth-child(2){animation:mode-swap-arm-b 5.4s cubic-bezier(.55,.05,.28,1) infinite}
.mode-stage[data-mode="swap"] .swap-pill i{animation:mode-swap-heart 5.4s cubic-bezier(.55,.05,.28,1) infinite}
.mode-caption{margin-top:18px;color:#a4aeab;font-size:14px;line-height:1.5;text-align:center}
.mode-caption strong{color:#eef3f1}
@media(max-width:800px){.mode-stage{--mode-pad:10px;width:100%;height:470px;min-height:0;aspect-ratio:auto}.mode-window{border-radius:14px}.mode-dot{width:62px;height:62px;border-width:13px}.mode-caption{margin-top:14px;font-size:12px}}
.grid-snap-stage{--grid-corner:18px;--snap-left:7%;--snap-top:8%;--snap-width:calc(51.6% - 3px);--snap-height:84%;--source-left:calc(41.4% + 3.2px);--source-top:calc(29% + 2px);--source-width:calc(34.4% - 4.8px);--source-height:calc(42% - 4px);position:relative;width:min(1068px,100%);aspect-ratio:16/10;margin:0 auto;overflow:hidden}
.grid-plan{position:absolute;left:7%;top:8%;width:86%;height:84%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);gap:8px;opacity:0}
.grid-plan span{min-width:0;min-height:0;border:1px solid rgba(255,255,255,.13);border-radius:var(--grid-corner);background:rgba(255,255,255,.012)}
.grid-plan span:nth-child(-n+3),.grid-plan span:nth-child(n+6):nth-child(-n+8),.grid-plan span:nth-child(n+11):nth-child(-n+13),.grid-plan span:nth-child(n+16):nth-child(-n+18){border-color:rgba(195,110,227,.42);background:rgba(195,110,227,.07)}
.grid-selection{position:absolute;left:var(--snap-left);top:var(--snap-top);width:var(--snap-width);height:var(--snap-height);border:1px solid rgba(195,110,227,.88);border-radius:var(--grid-corner);background:rgba(195,110,227,.035);opacity:0;transform:scale(.04);transform-origin:top left;box-shadow:inset 0 0 32px rgba(195,110,227,.04)}
.grid-selection::after{content:"";position:absolute;right:-5px;bottom:-5px;width:10px;height:10px;border-radius:50%;background:#c36ee3;box-shadow:0 0 0 7px rgba(195,110,227,.1),0 0 20px rgba(195,110,227,.5)}
.grid-snap-window{position:absolute;z-index:3;left:var(--snap-left);top:var(--snap-top);width:var(--snap-width);height:var(--snap-height);border:1px solid rgba(238,244,242,.48);border-radius:var(--grid-corner);background:rgba(18,22,24,.22);box-shadow:0 28px 70px rgba(0,0,0,.24)}
.grid-snap-window::before{content:"";position:absolute;left:18px;top:17px;width:10px;height:10px;border-radius:50%;background:#8f9693;box-shadow:18px 0 #8f9693,36px 0 #8f9693}
.grid-snap-window::after{content:none;position:absolute;left:18px;bottom:16px;color:#a7b0ad;font-size:12px;font-weight:700;letter-spacing:.02em}
.grid-stage-note{position:absolute;left:50%;bottom:2%;color:#939d99;font-size:13px;font-weight:650;transform:translateX(-50%);white-space:nowrap}
@media(prefers-reduced-motion:no-preference){.grid-plan{animation:grid-plan-cycle 4.6s ease-in-out infinite}.grid-plan span:nth-child(-n+3),.grid-plan span:nth-child(n+6):nth-child(-n+8),.grid-plan span:nth-child(n+11):nth-child(-n+13),.grid-plan span:nth-child(n+16):nth-child(-n+18){animation:grid-active-cell-cycle 4.6s ease-in-out infinite}.grid-selection{animation:grid-selection-cycle 4.6s cubic-bezier(.22,1,.36,1) infinite}.grid-snap-window{animation:grid-window-cycle 4.6s cubic-bezier(.65,0,.35,1) infinite}}
@media(max-width:800px){.grid-snap-stage{--grid-corner:15px;--snap-left:3%;--snap-top:8%;--snap-width:calc(56.4% - 3px);--snap-height:82%;--source-left:calc(40.6% + 2px);--source-top:calc(28.5% + 1.25px);--source-width:calc(37.6% - 3px);--source-height:calc(41% - 2.5px);width:100%;aspect-ratio:4/5}.grid-plan{left:3%;top:8%;width:94%;height:82%;gap:5px}.grid-snap-window::after{font-size:10px}.grid-stage-note{bottom:2%;font-size:11px}}
@media(prefers-reduced-motion:reduce){.grid-plan,.grid-selection{opacity:1;transform:none}.grid-snap-window{transform:none}}
.saved-app{position:relative;width:min(1120px,100%);aspect-ratio:16/9;min-height:570px;margin:0 auto;overflow:hidden;background:transparent}
.saved-app-stage{position:absolute;inset:0 0 0 252px}
.saved-app-heading{position:absolute;left:28px;top:28px}
.saved-app-heading strong{display:block;color:#eef3f1;font-size:23px;font-weight:650;letter-spacing:-.03em}
.saved-app-heading span{display:block;margin-top:7px;color:#8f9996;font-size:12px}
.saved-map{position:absolute;left:7%;right:7%;top:25%;bottom:9%}
.saved-map-window{position:absolute;border:1px solid rgba(238,244,242,.42);border-radius:17px;background:rgba(18,22,24,.13);box-shadow:0 22px 48px rgba(0,0,0,.15)}
.saved-map-window::before{content:"";position:absolute;left:16px;top:15px;width:8px;height:8px;border-radius:50%;background:#858d8a;box-shadow:15px 0 #858d8a,30px 0 #858d8a}
.saved-map-window.one{left:0;top:0;width:51%;height:100%}
.saved-map-window.two{right:0;top:0;width:46%;height:47%}
.saved-map-window.three{right:0;bottom:0;width:46%;height:50%}
.saved-map-status{position:absolute;left:16px;bottom:14px;color:#87918e;font-size:11px;font-weight:650}
.saved-layout-sidebar{position:absolute;left:0;top:0;bottom:0;width:252px;padding:28px 16px;border-right:1px solid rgba(255,255,255,.075);background:rgba(10,14,16,.08)}
.saved-layout-sidebar h3{margin:0 9px 22px;color:#edf2f0;font-size:22px;letter-spacing:-.035em}
.saved-layout-list{display:grid;gap:7px}
.saved-layout-row{display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:center;min-height:62px;padding:9px;border:1px solid transparent;border-radius:13px;color:#a8b0ad}
.saved-layout-row.is-active{border-color:rgba(195,110,227,.28);background:rgba(195,110,227,.075);color:#eef3f1}
.saved-layout-thumb{position:relative;width:42px;height:31px;border:1px solid rgba(255,255,255,.16);border-radius:7px}
.saved-layout-thumb i{position:absolute;border:1px solid currentColor;border-radius:2px;opacity:.58}
.saved-layout-thumb i:first-child{left:3px;top:3px;width:20px;height:25px}
.saved-layout-thumb i:nth-child(2){right:3px;top:3px;width:13px;height:11px}
.saved-layout-thumb i:nth-child(3){right:3px;bottom:3px;width:13px;height:10px}
.saved-layout-row.layout-focus .saved-layout-thumb i:first-child{left:3px;right:3px;top:3px;width:auto;height:11px}
.saved-layout-row.layout-focus .saved-layout-thumb i:nth-child(2){left:3px;right:auto;top:auto;bottom:3px;width:15px;height:10px}
.saved-layout-row.layout-focus .saved-layout-thumb i:nth-child(3){right:3px;bottom:3px;width:15px;height:10px}
.saved-layout-row.layout-research .saved-layout-thumb i:first-child{left:3px;top:3px;width:11px;height:25px}
.saved-layout-row.layout-research .saved-layout-thumb i:nth-child(2){left:17px;right:auto;top:3px;width:21px;height:11px}
.saved-layout-row.layout-research .saved-layout-thumb i:nth-child(3){left:17px;right:auto;bottom:3px;width:21px;height:10px}
.saved-layout-row strong{display:block;font-size:12px;font-weight:700}
.saved-layout-row small{display:block;margin-top:4px;color:#7f8986;font-size:10px}
.saved-layout-new{display:grid;place-items:center;min-height:62px;margin-top:9px;border:1px dashed rgba(255,255,255,.13);border-radius:13px;color:#77817e;font-size:11px;font-weight:700;text-align:center;background:rgba(255,255,255,.012)}
@media(max-width:800px){.saved-app{min-height:760px;aspect-ratio:auto}.saved-layout-sidebar{right:0;bottom:auto;width:auto;height:220px;padding:18px;border-right:0;border-bottom:1px solid rgba(255,255,255,.075)}.saved-layout-sidebar h3{margin-bottom:14px}.saved-layout-list{grid-template-columns:repeat(3,1fr);gap:5px}.saved-layout-row{grid-template-columns:32px 1fr;min-height:54px;padding:7px}.saved-layout-thumb{width:32px;height:25px}.saved-layout-thumb i:first-child{width:14px;height:19px}.saved-layout-thumb i:nth-child(2),.saved-layout-thumb i:nth-child(3){width:10px}.saved-layout-new{display:none}.saved-app-stage{inset:220px 0 0}.saved-map{left:3%;right:3%;top:27%;bottom:7%}.saved-app-heading strong{font-size:20px}}
.mode-window,.grid-snap-stage,.saved-app{border-color:rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(52,54,57,.56),rgba(17,19,21,.48));box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 32px 90px rgba(0,0,0,.34);backdrop-filter:blur(24px) saturate(115%);-webkit-backdrop-filter:blur(24px) saturate(115%)}
.saved-layout-sidebar,.saved-app-stage{background:rgba(4,5,6,.38);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.saved-layout-row.is-active{border-color:rgba(195,110,227,.34);background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.075))}
.mode-toggle{background:rgba(8,9,10,.56);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.mode-toggle button[aria-selected="true"]{background:#e9edf0;color:#101214;box-shadow:0 4px 0 #92979b}
.grid-snap-stage{border:0!important;
      background:transparent!important;
      box-shadow:none!important;
      backdrop-filter:none!important;
      -webkit-backdrop-filter:none!important}
.mode-dot{left:50%;top:49.5%;width:200px;height:200px;border:0;background:transparent;box-shadow:none;filter:drop-shadow(0 0 24px rgba(195,110,227,.16))}
.mode-dot svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.mode-dot::before{inset:auto;left:50%;top:50%;width:64px;height:64px;border:16px solid #242729;border-radius:50%;background:#000;opacity:1;transform:translate(-50%,-50%);filter:none;-webkit-mask:none;mask:none;box-shadow:0 11px 32px rgba(0,0,0,.45)}
.mode-dot::after{z-index:2;width:11px;height:11px;box-shadow:0 0 8px rgba(255,255,255,.5)}
.mode-stage[data-mode="rotate"] .mode-dot::before{animation:none}
.mode-stage[data-mode="rotate"] .live-sweep{transform-origin:50px 50px;animation:mode-live-sweep 5.4s cubic-bezier(.65,0,.35,1) infinite}
.swap-pill{left:75.5%;top:49.5%;width:96px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(16,18,22,.72);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.swap-pill span{display:none}
.swap-pill i{position:static;width:40px;height:8px;border-radius:4px;background:#fff;opacity:1;transform:none;box-shadow:0 0 8px rgba(255,255,255,.5)}
.mode-stage[data-mode="swap"] .swap-pill i{animation:mode-live-pill-core 5.4s ease infinite}
.grid-snap-window,.saved-map-window{border:1px solid rgba(196,204,201,.48);
      border-radius:20px;
      background:linear-gradient(145deg,rgba(52,54,57,.56),rgba(17,19,21,.48));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 22px 55px rgba(0,0,0,.18);
      backdrop-filter:blur(24px) saturate(115%);
      -webkit-backdrop-filter:blur(24px) saturate(115%)}
.grid-snap-window,.saved-map-window,.mode-window{border:1px solid rgba(196,204,201,.15)!important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 22px 55px rgba(0,0,0,.18)!important}
.saved-layout-sidebar h3{font-size:0}
.saved-layout-sidebar h3::after{content:"Saved Layouts";font-size:inherit}
.saved-app{border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.saved-layout-sidebar,.saved-app-stage{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.saved-layout-row.layout-focus .saved-layout-thumb i:nth-child(2){left:3px;right:3px;width:auto;height:11px}
.saved-layout-row.layout-focus .saved-layout-thumb i:nth-child(3){display:none}
.saved-layout-row.layout-research .saved-layout-thumb i:nth-child(2){top:3px;height:6px}
.saved-layout-row.layout-research .saved-layout-thumb i:nth-child(3){top:12px;bottom:auto;height:6px}
.saved-layout-row.layout-research .saved-layout-thumb::after{content:"";position:absolute;left:17px;right:3px;bottom:3px;height:6px;border:1px solid currentColor;border-radius:2px;opacity:.58}
.saved-app-heading{left:7%;top:8%}
.saved-map{left:7%;right:auto;top:25%;bottom:auto;width:86%;height:auto;aspect-ratio:16/10;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr 1fr;gap:14px}
.saved-map-window{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;grid-column:auto;grid-row:auto}
.saved-map-window.one{grid-row:1 / span 2}
.saved-map-window.two{grid-column:2;grid-row:1}
.saved-map-window.three{grid-column:2;grid-row:2}
@media(max-width:800px){.saved-layout-row.layout-research .saved-layout-thumb i:nth-child(2){height:5px}.saved-layout-row.layout-research .saved-layout-thumb i:nth-child(3){top:10px;height:5px}.saved-layout-row.layout-research .saved-layout-thumb::after{left:14px;right:3px;bottom:3px;height:5px}.saved-layout-row.layout-focus .saved-layout-thumb i:nth-child(2){left:3px;right:3px;width:auto;height:9px}}
.saved-layout-thumb{display:grid;grid-template-columns:1fr .72fr;grid-template-rows:1fr 1fr;gap:3px;padding:3px}
.saved-layout-thumb i,.saved-layout-row.layout-research .saved-layout-thumb::after{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:auto!important;min-width:0;min-height:0;display:block;border:1px solid currentColor;border-radius:3px;opacity:.58}
.saved-layout-row:not(.layout-focus):not(.layout-research) .saved-layout-thumb i:first-child{grid-row:1 / span 2}
.saved-layout-row.layout-focus .saved-layout-thumb{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.saved-layout-row.layout-focus .saved-layout-thumb i:first-child{grid-row:1}
.saved-layout-row.layout-focus .saved-layout-thumb i:nth-child(2){grid-row:2}
.saved-layout-row.layout-focus .saved-layout-thumb i:nth-child(3){display:none!important}
.saved-layout-row.layout-research .saved-layout-thumb{grid-template-columns:.62fr 1fr;grid-template-rows:repeat(3,1fr)}
.saved-layout-row.layout-research .saved-layout-thumb i:first-child{grid-row:1 / span 3}
.saved-layout-row.layout-research .saved-layout-thumb i:nth-child(2){grid-column:2;grid-row:1}
.saved-layout-row.layout-research .saved-layout-thumb i:nth-child(3){grid-column:2;grid-row:2}
.saved-layout-row.layout-research .saved-layout-thumb::after{grid-column:2;grid-row:3}
.saved-layout-sidebar h3{display:none}
@media(min-width:801px){.saved-app{aspect-ratio:16/10;min-height:0}.saved-layout-sidebar{padding-left:28px;padding-right:28px}.saved-app-heading{left:28px;top:28px}.saved-map{left:28px;right:28px;width:auto}}
@media(max-width:800px){.saved-layout-thumb{gap:2px;padding:2px}.saved-layout-thumb i,.saved-layout-row.layout-research .saved-layout-thumb::after{border-radius:2px}}
@media(max-width:800px){.saved-app-heading{left:3%;top:5%}.saved-map{left:3%;width:94%;top:27%;gap:10px}}
.grid-snap-window::before,.saved-map-window::before{left:16px;top:15px;width:9px;height:9px;background:#929795;box-shadow:17px 0 #929795,34px 0 #929795}
@media(max-width:800px){.grid-snap-window,.saved-map-window{border-radius:15px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.grid-snap-window::before,.saved-map-window::before{left:12px;top:11px;width:7px;height:7px;box-shadow:13px 0 #929795,26px 0 #929795}}
@media(max-width:800px){.mode-dot{width:140px;height:140px}.mode-dot::before{width:49px;height:49px;border-width:13px}.mode-dot::after{width:10px;height:10px}.swap-pill{width:96px;height:32px}}
@media(max-width:800px){.mode-window,.grid-snap-stage,.saved-app{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}}
@media(max-width:800px){.grid-snap-stage{--snap-width:47%;aspect-ratio:4/4.6}.grid-plan{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}.grid-plan span:nth-child(n+13){display:none}.grid-plan span:nth-child(-n+12){border-color:rgba(255,255,255,.13)!important;background:rgba(255,255,255,.012)!important;animation:none!important}.grid-plan span:nth-child(4n+1),.grid-plan span:nth-child(4n+2){border-color:rgba(195,110,227,.42)!important;background:rgba(195,110,227,.07)!important;animation:grid-active-cell-cycle 4.6s ease-in-out infinite!important}}
html[dir="rtl"] .mode-stage,html[dir="rtl"] .saved-app,html[dir="rtl"] .grid-snap-stage{direction:ltr}
.mode-stage .mode-dot{width:64px;height:64px;padding:0;pointer-events:none;animation:none!important;filter:none}
.mode-stage .mode-dot svg{inset:auto;left:50%;top:50%;width:200px;height:200px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.32)}
.mode-stage[data-mode="rotate"] .mode-dot svg{animation:mode-orbit-demo 5.4s ease-in-out infinite}
.mode-stage[data-mode="rotate"] .mode-dot::after{animation:mode-hold-demo 5.4s ease-in-out infinite}
.mode-stage .swap-pill i{width:10px;height:10px;border-radius:50%;background:#fff;animation:none!important}
@media(prefers-reduced-motion:reduce){.mode-stage[data-mode="rotate"] .mode-dot svg,.mode-stage[data-mode="rotate"] .mode-dot::after,.mode-stage[data-mode="rotate"] .mode-window,.mode-stage[data-mode="rotate"] .live-sweep{animation:none}}
.mode-stage .mode-dot{width:58px;height:58px}
.mode-stage .mode-dot::before{width:58px;height:58px;border:0;background:rgba(0,0,0,.55);box-shadow:none;filter:none}
.mode-stage .mode-dot::after{width:14px;height:14px;background:#fff;box-shadow:none}
.flip-grip{position:absolute;z-index:7;left:33%;top:49.5%;width:96px;height:96px;display:none;pointer-events:none;transform:translate(-50%,-50%)}
.flip-grip i,.flip-grip b{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(16,18,22,.72);box-shadow:0 4px 14px rgba(0,0,0,.45);transform:translate(-50%,-50%)}
.flip-grip i::after,.flip-grip b::after{content:"";position:absolute;left:50%;top:50%;border-radius:999px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.5);transform:translate(-50%,-50%)}
.flip-grip i{width:96px;height:32px}
.flip-grip i::after{width:40px;height:8px}
.flip-grip b{width:32px;height:96px;opacity:0}
.flip-grip b::after{width:8px;height:40px}
.flip-grip span{position:absolute;left:50%;top:50%;width:16px;height:16px;border:2px solid rgba(222,162,239,.9);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.45);box-shadow:0 0 16px rgba(195,110,227,.34)}
.mode-stage[data-mode="flip"] .mode-dot,.mode-stage[data-mode="flip"] .swap-pill{display:none}
.mode-stage[data-mode="flip"] .flip-grip{display:block;animation:mode-flip-grip-position 5.4s cubic-bezier(.32,.72,0,1) infinite}
.mode-stage[data-mode="flip"] .flip-grip i{animation:mode-flip-old-seam 5.4s ease infinite}
.mode-stage[data-mode="flip"] .flip-grip b{animation:mode-flip-new-seam 5.4s ease infinite}
.mode-stage[data-mode="flip"] .flip-grip span:first-of-type{animation:mode-flip-tap-one 5.4s ease-out infinite}
.mode-stage[data-mode="flip"] .flip-grip span:last-of-type{animation:mode-flip-tap-two 5.4s ease-out infinite}
.mode-stage[data-mode="flip"] .mode-window.one{animation:mode-flip-one 5.4s cubic-bezier(.32,.72,0,1) infinite}
.mode-stage[data-mode="flip"] .mode-window.two{animation:mode-flip-two 5.4s cubic-bezier(.32,.72,0,1) infinite}
.mode-stage[data-mode="flip"] .mode-window.three{animation:mode-flip-neighbor 5.4s ease infinite}
@media(max-width:800px){.mode-toggle button{min-width:84px;padding-inline:14px}.flip-grip{width:78px;height:78px}.flip-grip i{width:78px;height:28px}.flip-grip i::after{width:34px}.flip-grip b{width:28px;height:78px}.flip-grip b::after{height:34px}}
@media(prefers-reduced-motion:reduce){.mode-stage[data-mode="flip"] .mode-window.one{inset:var(--mode-pad) 68% var(--mode-pad) var(--mode-pad)}.mode-stage[data-mode="flip"] .mode-window.two{inset:var(--mode-pad) 35% var(--mode-pad) 34%}.mode-stage[data-mode="flip"] .mode-window.three{inset:var(--mode-pad) var(--mode-pad) var(--mode-pad) 67%}.mode-stage[data-mode="flip"] .mode-window,.mode-stage[data-mode="flip"] .flip-grip,.mode-stage[data-mode="flip"] .flip-grip i,.mode-stage[data-mode="flip"] .flip-grip b,.mode-stage[data-mode="flip"] .flip-grip span{animation:none}.mode-stage[data-mode="flip"] .flip-grip{left:33%;top:49.5%;opacity:1}.mode-stage[data-mode="flip"] .flip-grip i{opacity:0}.mode-stage[data-mode="flip"] .flip-grip b{opacity:1}}
.mode-toggle button[data-mode="flip"]{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.mode-toggle .new-badge{display:inline-flex;
      align-items:center;
      min-height:18px;
      padding:3px 6px 2px;
      border:1px solid transparent;
      border-radius:999px;
      background:linear-gradient(145deg,#2b1633,#151329) padding-box,linear-gradient(115deg,#ff6da9,#d482f2 52%,#7698ff) border-box;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 9px rgba(209,110,229,.6),0 0 20px rgba(111,135,246,.22);
      color:#f8d9ff;
      font:800 7px/1 Manrope,sans-serif;
      letter-spacing:.12em;
      text-shadow:0 0 7px rgba(255,211,255,.72);
      text-transform:uppercase;
      animation:new-badge-glow 2.8s ease-in-out infinite;}
.mode-toggle button[aria-selected="true"] .new-badge{background:linear-gradient(145deg,#35183f,#1c1635) padding-box,linear-gradient(115deg,#ff5f9f,#c96bea 52%,#698cff) border-box;color:#ffe6ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 10px rgba(196,86,221,.58),0 0 20px rgba(89,119,236,.2)}
@media(max-width:800px){.mode-toggle button[data-mode="flip"]{gap:5px}.mode-toggle .new-badge{padding-inline:4px;font-size:6px}}
@media(prefers-reduced-motion:reduce){.mode-toggle .new-badge{animation:none}}
.mode-stage .mode-dot::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
        -9px 5px 20px rgba(241,111,157,.30),
        8px -4px 22px rgba(115,150,255,.34),
        0 3px 28px rgba(195,110,227,.24);}
.saved-app-stage{display:flex;flex-direction:column;gap:24px;padding:28px 0 0}
.saved-app-heading{position:static;flex:0 0 auto;margin-inline:7%}
.saved-map{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:86%;margin-inline:7%;flex:0 0 auto}
@media(max-width:800px){.saved-app-stage{gap:20px;padding:24px 0 0}.saved-app-heading{margin-inline:3%}.saved-map{width:94%;margin-inline:3%}}
@media(max-width:800px){.mode-toggle,.mode-window,.grid-snap-window,.saved-map-window{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@keyframes mode-rotate-one{0%,20%{inset:var(--mode-pad) 51% var(--mode-pad) var(--mode-pad)}34%,51%{inset:var(--mode-pad) var(--mode-pad) 52% 51%}65%,82%{inset:51% var(--mode-pad) var(--mode-pad) 51%}96%,100%{inset:var(--mode-pad) 51% var(--mode-pad) var(--mode-pad)}}
@keyframes mode-rotate-two{0%,20%{inset:var(--mode-pad) var(--mode-pad) 52% 51%}34%,51%{inset:51% var(--mode-pad) var(--mode-pad) 51%}65%,82%{inset:var(--mode-pad) 51% var(--mode-pad) var(--mode-pad)}96%,100%{inset:var(--mode-pad) var(--mode-pad) 52% 51%}}
@keyframes mode-rotate-three{0%,20%{inset:51% var(--mode-pad) var(--mode-pad) 51%}34%,51%{inset:var(--mode-pad) 51% var(--mode-pad) var(--mode-pad)}65%,82%{inset:var(--mode-pad) var(--mode-pad) 52% 51%}96%,100%{inset:51% var(--mode-pad) var(--mode-pad) 51%}}
@keyframes mode-swap-scene{0%,100%{opacity:1}}
@keyframes mode-swap-two{
  0%,20%{inset:var(--mode-pad) var(--mode-pad) 52% 51%;transform:translateX(0);opacity:1}
  36%,56%{inset:51% var(--mode-pad) var(--mode-pad) 51%;transform:translateX(0);opacity:1}
  72%,100%{inset:var(--mode-pad) var(--mode-pad) 52% 51%;transform:translateX(0);opacity:1}
}
@keyframes mode-swap-three{
  0%,20%{inset:51% var(--mode-pad) var(--mode-pad) 51%;transform:translateX(0);opacity:1}
  36%,56%{inset:var(--mode-pad) var(--mode-pad) 52% 51%;transform:translateX(0);opacity:1}
  72%,100%{inset:51% var(--mode-pad) var(--mode-pad) 51%;transform:translateX(0);opacity:1}
}
@keyframes mode-swap-grip{
      0%,20%,36%,56%,72%,100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 0 rgba(195,110,227,0))}
      28%,64%{opacity:1;transform:translate(-50%,-50%) scale(1.12);filter:drop-shadow(0 0 12px rgba(195,110,227,.62))}
    }
@keyframes mode-swap-arm-a{0%,27%{transform:rotate(0);background:#858d8a}50%,100%{transform:rotate(22deg);background:#c36ee3}}
@keyframes mode-swap-arm-b{0%,27%{transform:rotate(0);background:#858d8a}50%,100%{transform:rotate(-22deg);background:#c36ee3}}
@keyframes mode-swap-heart{0%,11%{opacity:0;transform:translateX(-50%) scaleY(.55)}12%,27%{opacity:1;transform:translateX(-50%) scaleY(1)}38%{opacity:1;transform:translateX(-50%) scaleY(2.25);box-shadow:0 0 15px rgba(195,110,227,.78)}50%,78%{opacity:1;transform:translateX(-50%) scaleY(4.2);box-shadow:0 0 20px rgba(195,110,227,.9)}88%,100%{opacity:0;transform:translateX(-50%) scaleY(4.2)}}
@keyframes mode-dot-charge{0%,4%,21%,36%,52%,67%,83%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 10px rgba(195,110,227,.12),0 0 40px rgba(195,110,227,.42),0 20px 42px rgba(0,0,0,.38)}8%,41%,72%{transform:translate(-50%,-50%) scale(1.09);box-shadow:0 0 0 17px rgba(195,110,227,.17),0 0 62px rgba(195,110,227,.62),0 20px 42px rgba(0,0,0,.38)}18%,49%,80%{transform:translate(-50%,-50%) scale(1.035);box-shadow:0 0 0 12px rgba(195,110,227,.14),0 0 48px rgba(195,110,227,.5),0 20px 42px rgba(0,0,0,.38)}}
@keyframes mode-orbit-pull{0%,4%{opacity:0;transform:scale(.7) rotate(-55deg)}8%{opacity:1;transform:scale(1.08) rotate(-35deg)}18%{opacity:1;transform:scale(1) rotate(105deg)}21%,36%{opacity:0;transform:scale(.94) rotate(115deg)}41%{opacity:1;transform:scale(1.08) rotate(115deg)}49%{opacity:1;transform:scale(1) rotate(255deg)}52%,67%{opacity:0;transform:scale(.94) rotate(265deg)}72%{opacity:1;transform:scale(1.08) rotate(265deg)}80%{opacity:1;transform:scale(1) rotate(405deg)}83%,100%{opacity:0;transform:scale(.94) rotate(415deg)}}
@keyframes grid-plan-cycle{0%,8%{opacity:0}14%,92%{opacity:1}100%{opacity:0}}
@keyframes grid-selection-cycle{
      0%,16%{opacity:0;transform:scale(.04)}
      19%{opacity:1;transform:scale(.04)}
      36%{opacity:1;transform:scale(1)}
      58%{opacity:.7;transform:scale(1)}
      76%{opacity:.22;transform:scale(1)}
      92%,100%{opacity:0;transform:scale(1)}
    }
@keyframes grid-active-cell-cycle{0%,19%{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.012)}36%,92%{border-color:rgba(195,110,227,.42);background:rgba(195,110,227,.07)}100%{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.012)}}
@keyframes grid-window-cycle{
      0%,36%{opacity:1;left:var(--source-left);top:var(--source-top);width:var(--source-width);height:var(--source-height);box-shadow:0 28px 70px rgba(0,0,0,.24)}
      58%{opacity:1;left:var(--snap-left);top:var(--snap-top);width:var(--snap-width);height:var(--snap-height);box-shadow:0 28px 70px rgba(0,0,0,.24),0 0 0 1px rgba(195,110,227,.12)}
      76%,92%{opacity:1;left:var(--snap-left);top:var(--snap-top);width:var(--snap-width);height:var(--snap-height);box-shadow:0 28px 70px rgba(0,0,0,.24)}
      100%{opacity:1;left:var(--snap-left);top:var(--snap-top);width:var(--snap-width);height:var(--snap-height);box-shadow:0 28px 70px rgba(0,0,0,.24)}
    }
@keyframes mode-live-sweep{0%,20%{transform:rotate(0)}34%,51%{transform:rotate(120deg)}65%,82%{transform:rotate(240deg)}96%,100%{transform:rotate(360deg)}}
@keyframes mode-live-pill-core{0%,20%,38%,56%,74%,100%{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.5)}26%,32%,62%,68%{background:var(--accent);box-shadow:0 0 12px rgba(195,110,227,.9)}}
@keyframes mode-orbit-demo{
      0%,8%,100%{opacity:0;transform:translate(-50%,-50%) scale(.32)}
      18%,90%{opacity:1;transform:translate(-50%,-50%) scale(1)}
      98%{opacity:0;transform:translate(-50%,-50%) scale(.32)}
    }
@keyframes mode-hold-demo{
      0%,8%,98%,100%{transform:translate(-50%,-50%) scale(1);background:#fff}
      14%,90%{transform:translate(-50%,-50%) scale(.8);background:#fff}
    }
@keyframes mode-flip-one{0%,30%{inset:var(--mode-pad) 35% 52% var(--mode-pad);opacity:1}48%,88%{inset:var(--mode-pad) 68% var(--mode-pad) var(--mode-pad);opacity:1}96%{inset:var(--mode-pad) 68% var(--mode-pad) var(--mode-pad);opacity:0}100%{inset:var(--mode-pad) 35% 52% var(--mode-pad);opacity:0}}
@keyframes mode-flip-two{0%,30%{inset:51% 35% var(--mode-pad) var(--mode-pad);opacity:1}48%,88%{inset:var(--mode-pad) 35% var(--mode-pad) 34%;opacity:1}96%{inset:var(--mode-pad) 35% var(--mode-pad) 34%;opacity:0}100%{inset:51% 35% var(--mode-pad) var(--mode-pad);opacity:0}}
@keyframes mode-flip-neighbor{0%,88%{inset:var(--mode-pad) var(--mode-pad) var(--mode-pad) 67%;opacity:1}96%,100%{inset:var(--mode-pad) var(--mode-pad) var(--mode-pad) 67%;opacity:0}}
@keyframes mode-flip-grip-position{0%,88%{left:33%;top:49.5%;opacity:1}96%,100%{left:33%;top:49.5%;opacity:0}}
@keyframes mode-flip-old-seam{0%,30%{opacity:1}38%,100%{opacity:0}}
@keyframes mode-flip-new-seam{0%,45%{opacity:0}54%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes mode-flip-tap-one{0%,10%{opacity:0;transform:translate(-50%,-50%) scale(.45)}16%{opacity:1}24%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
@keyframes mode-flip-tap-two{0%,21%{opacity:0;transform:translate(-50%,-50%) scale(.45)}27%{opacity:1}35%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
@keyframes new-badge-glow{0%,100%{filter:brightness(.96);transform:translateZ(0)}50%{filter:brightness(1.12);transform:translateZ(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 12px rgba(218,113,239,.74),0 0 24px rgba(111,135,246,.3)}}