.surface {
  position: absolute;
  left: calc(var(--u) * var(--dx, 0));
  top: calc(var(--rise, 0px) * -1);
  --boost: 1;
  --grow: 1;
  --ink-950: #010f18;
  --ink-900: #011b29;
  --ink-800: #02283b;
  --ink-600: #0a4260;
  --ink-500: #14587b;
  --ink-400: #2d7395;
  --ink-300: #5b93ad;
  --ink-200: #94b8c9;
  --metal: conic-gradient(from 0deg, #1e6a8d 0deg, #0c4a6a 20deg, #03354e 40deg, #022b40 92deg, #07425f 124deg, #105274 150deg, #02283b 186deg, #011f2e 216deg, #063d58 262deg, #2f7798 320deg, #4489aa 335deg, #1e6a8d 360deg);
  --rim: inset 0 0 0 0.6px rgba(170, 208, 224, 0.55), inset 0 0 0 1.6px rgba(1, 27, 41, 0.28);
  --drop: 0 1px 2px rgba(1, 27, 41, 0.32), 0 8px 12px -5px rgba(1, 27, 41, 0.3), 0 22px 30px -12px rgba(2, 48, 71, 0.4), 0 40px 44px -22px rgba(2, 48, 71, 0.34);
  --glare: linear-gradient(118deg, rgba(255, 255, 255, 0.13) 0, rgba(255, 255, 255, 0.04) 17%, rgba(255, 255, 255, 0) 17.3%);
  color: var(--navy);
  transform: translate(-50%, -50%) scale(calc(var(--un, 2) / 3.6 * var(--boost)));
}

.surface--phone {
  width: 243.5px;
  height: 510px;
}

.surface--window,
.surface--tablet {
  width: 540px;
  height: 360px;
  --dx: -3;
}

.surface--till {
  width: 540px;
  height: 414px;
  --dx: -3;
}

.surface--monitor {
  width: 540px;
  height: 392px;
  --dx: -3;
}

.surface--laptop {
  width: 580px;
  height: 360px;
  --dx: -3;
}

.surface--handheld {
  width: 236px;
  height: 480px;
}

.surface--note {
  width: 348px;
  height: 458px;
  --dx: -4;
}

.surface--hub {
  width: 0;
  height: 0;
}

.seed {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  background: var(--navy);
  pointer-events: none;
}

.plate {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  width: 900px;
  height: 900px;
  background: var(--plate, var(--navy));
  box-shadow: inset 1.4px 1.4px 0 rgba(148, 184, 201, 0.22);
  transform-origin: 0 0;
  pointer-events: none;
}

.device {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  isolation: isolate;
}

.screen {
  position: relative;
  z-index: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}

.part {
  position: absolute;
  z-index: -2;
}

.surface {
  --i-status: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 11' fill='%23023047' stroke='%23023047' stroke-linejoin='round' stroke-width='.7'%3E%3Cpath d='M.4 7.4h1.8v3.2H.4zM3.7 5.4h1.8v5.2H3.7zM7 3h1.8v7.6H7zM10.3.5h1.8v10.1h-1.8zM22 10.4 16.5 4.2a8.3 8.3 0 0111 0z'/%3E%3Crect x='33.4' y='3.1' width='9.6' height='4.8' rx='1.1' stroke='none'/%3E%3Cg fill='none' opacity='.5' stroke-width='1'%3E%3Crect x='31.7' y='1.4' width='15' height='8.2' rx='2.5'/%3E%3Cpath stroke-linecap='round' d='M48.6 4.3v2.4'/%3E%3C/g%3E%3C/svg%3E");
  --i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V19a1 1 0 01-1 1h-4.5v-5.5h-5V20H5a1 1 0 01-1-1z'/%3E%3C/svg%3E");
  --i-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 20 8v8l-8 4.5L4 16V8zM4 8l8 4.5L20 8M12 12.5v8'/%3E%3C/svg%3E");
  --i-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5h13l1 11.5h-15zM9 8.5V7a3 3 0 016 0v1.5'/%3E%3C/svg%3E");
  --i-bag-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5h13l1 11.5h-15zM9 8.5V7a3 3 0 016 0v1.5'/%3E%3C/svg%3E");
  --i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11.5A3.75 3.75 0 1012 4a3.75 3.75 0 000 7.5zM4.5 20c.6-3.3 3.6-5 7.5-5s6.9 1.7 7.5 5'/%3E%3C/svg%3E");
  --i-call: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h3l1.5 4-2 1.5a10 10 0 005.5 5.5l1.5-2 4 1.5v3a2 2 0 01-2.2 2A16.5 16.5 0 014.5 6.2 2 2 0 016.5 4z'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6-6.5-11a6.5 6.5 0 0113 0c0 5-6.5 11-6.5 11zM12 12.3a2.3 2.3 0 100-4.6 2.3 2.3 0 000 4.6z'/%3E%3C/svg%3E");
  --i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3l2.4 2.4 4.6-5'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7.5 10.5V8a4.5 4.5 0 019 0v2.5'/%3E%3Crect x='5.5' y='10.5' width='13' height='10' rx='2.2' fill='%23023047' stroke='none'/%3E%3C/svg%3E");
  --i-find: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10.5 17a6.5 6.5 0 100-13 6.5 6.5 0 000 13zM20 20l-4.6-4.6'/%3E%3C/svg%3E");
  --i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11v10h-11zM13.5 10h4l3.5 3.5v3h-7.5zM7 19a2 2 0 100-4 2 2 0 000 4zM17 19a2 2 0 100-4 2 2 0 000 4z'/%3E%3C/svg%3E");
  --i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20S4.5 15.3 4.5 9.8A4 4 0 0112 7.6a4 4 0 017.5 2.2C19.5 15.3 12 20 12 20z'/%3E%3C/svg%3E");
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 1l2.7 5.8 6.3.7-4.7 4.3 1.3 6.2L10 14.9 4.4 18l1.3-6.2L1 7.5l6.3-.7z'/%3E%3C/svg%3E");
  --i-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='1.7'%3E%3Cpath d='M3 5v14M6 5v14M10 5v14M11.7 5v14M15 5v14M18.4 5v14M20 5v14M21.6 5v14'/%3E%3C/svg%3E");
  --i-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h18v11H3zM3 10.5h18M6.5 14.5h3'/%3E%3C/svg%3E");
  --i-cash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7h19v10h-19zM12 14.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM6 10.5v3M18 10.5v3'/%3E%3C/svg%3E");
  --i-nav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 12' fill='none' stroke='%23023047' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.5 1.5 6 6 10.5M1.5 6h10M54.54 2.46A5 5 0 1056 6M55.1.3v2.6h-2.6'/%3E%3Cpath stroke='%239fb4bf' d='M29 1.5 33.5 6 29 10.5M33.5 6h-10'/%3E%3C/svg%3E");
  --i-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Cpath d='M1.5 1.5v14.2l3.6-3.2 2.4 5.6 2.6-1.1-2.4-5.5h4.8z' fill='%23023047' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 212 78' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23c5e2ec' d='M150 0c6 12 28 22 62 24V0z'/%3E%3Cpath stroke='%23fff' stroke-width='5' d='M-4 61.7 216 23.9'/%3E%3Cpath stroke='%23fff' stroke-width='2.4' d='M-4 35.7 216-2.1M-4 87.7 216 49.9M17-4l20 86M61-4l20 86M105-4l20 86M149-4l20 86M193-4l20 86'/%3E%3Cpath stroke='%238fcbdb' stroke-width='3' d='M115.5 41.2l42.3-7.3 5.8 25'/%3E%3Cpath stroke='%23219ebc' stroke-width='3' d='M25.1 30.7l42.3-7.3 5.8 25 42.3-7.2'/%3E%3Ccircle cx='25.1' cy='30.7' r='3.2' fill='%23fff' stroke='%23023047' stroke-width='1.6'/%3E%3Cpath fill='%23023047' d='M163.6 59.4c-4.4-5.4-6.4-8.5-6.4-11.4a6.4 6.4 0 0112.8 0c0 2.9-2 6-6.4 11.4z'/%3E%3Ccircle cx='163.6' cy='48' r='2.3' fill='%23fff'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.2v9.6M3.2 8h9.6'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
  --i-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 13.2l.7-3L10.6 3a1.2 1.2 0 0 1 1.7 0l.7.7a1.2 1.2 0 0 1 0 1.7l-7.2 7.1z'/%3E%3C/svg%3E");
  --i-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6V2.6h7V6M4.5 11.4H3.2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h9.6a1 1 0 0 1 1 1v3.4a1 1 0 0 1-1 1h-1.3M4.5 9.6h7v3.8h-7z'/%3E%3C/svg%3E");
  --i-export: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.6v7.2M5.4 5.2L8 2.6l2.6 2.6M2.8 9.8v2.6a1 1 0 0 0 1 1h8.4a1 1 0 0 0 1-1V9.8'/%3E%3C/svg%3E");
  --i-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 4l4 4-4 4'/%3E%3C/svg%3E");
  --i-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.8 4l-4 4 4 4'/%3E%3C/svg%3E");
  --i-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8h.01M8 8h.01M12.4 8h.01'/%3E%3C/svg%3E");
  --i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2.6h5.2L12 5.4v8H4zM9.2 2.6v2.8H12M6 8.2h4M6 10.6h4'/%3E%3C/svg%3E");
  --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='2.4' width='6.8' height='11.2' rx='1.6'/%3E%3Cpath d='M7.2 11.6h1.6'/%3E%3C/svg%3E");
  --i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='2.8' width='10.4' height='10.4' rx='1.2'/%3E%3Cpath d='M2.8 6.4h10.4M2.8 9.8h10.4M6.4 2.8v10.4'/%3E%3C/svg%3E");
  --i-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13V8.6M6.4 13V5.4M9.8 13V7.2M13.2 13V3'/%3E%3C/svg%3E");
  --i-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='3' width='11.2' height='10' rx='1.4'/%3E%3Cpath d='M2.4 6h11.2M6 6v7'/%3E%3C/svg%3E");
  --i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.6v6.6h10V6.6M2.4 6.6l1.2-3.8h8.8l1.2 3.8zM6.4 13.2V9.6h3.2v3.6'/%3E%3C/svg%3E");
  --i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.4'/%3E%3Cpath d='M2.6 8h10.8M8 2.6a8.4 8.4 0 0 1 0 10.8M8 2.6a8.4 8.4 0 0 0 0 10.8'/%3E%3C/svg%3E");
  --i-stack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23023047' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.6l5.4 2.7L8 8 2.6 5.3zM2.6 8L8 10.7 13.4 8M2.6 10.7L8 13.4l5.4-2.7'/%3E%3C/svg%3E");
}

.glyph,
.tile::before,
.phone-top i,
.phone-tabs span::before,
.web-url::before,
.web-tab::after,
.shop-find::before,
.shop-photo::before,
.shop-ship::before,
.till-find::before {
  background: currentColor;
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
}

.glyph {
  display: inline-block;
  flex: none;
  width: 11px;
  height: 11px;
}

.tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--fog);
}

.tile::before {
  content: "";
  width: 13px;
  height: 13px;
}

.glyph--plus {
  --mask: var(--i-plus);
}

.glyph--edit {
  --mask: var(--i-edit);
}

.glyph--print {
  --mask: var(--i-print);
}

.glyph--export {
  --mask: var(--i-export);
}

.glyph--left {
  --mask: var(--i-left);
}

.glyph--right {
  --mask: var(--i-right);
}

.glyph--doc {
  --mask: var(--i-doc);
}

.glyph--phone {
  --mask: var(--i-phone);
}

.glyph--grid {
  --mask: var(--i-grid);
}

.glyph--chart {
  --mask: var(--i-chart);
}

.glyph--panel {
  --mask: var(--i-panel);
}

.glyph--store {
  --mask: var(--i-store);
}

.glyph--globe {
  --mask: var(--i-globe);
}

.glyph--stack {
  --mask: var(--i-stack);
}

.glyph--find {
  --mask: var(--i-find);
}

.glyph--tick {
  --mask: var(--i-tick);
}

.glyph--bag {
  --mask: var(--i-bag);
}

.glyph--box {
  --mask: var(--i-box);
}

.glyph--call {
  --mask: var(--i-call);
}

.glyph--more {
  --mask: var(--i-more);
}

.glyph--user {
  --mask: var(--i-user);
}

.ui {
  font-size: 11px;
  line-height: 1.35;
}

.ui i,
.ui em {
  font-style: normal;
}

.ui b {
  font-weight: 600;
}

.ui-num {
  letter-spacing: -0.02em;
}

.ui-kicker,
.ui-label {
  color: var(--slate);
  font-size: 9.5px;
  font-weight: 500;
}

.ui-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ui-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 14px;
  border-radius: var(--radius-chip);
  background: var(--navy);
  color: var(--paper);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}

.ui-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--navy);
  font-size: 9.5px;
  font-weight: 500;
  white-space: nowrap;
}

.crumb {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--slate);
  font-size: 9px;
  white-space: nowrap;
}

.crumb .glyph {
  width: 8px;
  height: 8px;
}

.crumb b {
  color: var(--navy);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  height: 18px;
  padding: 0 8px;
  border-radius: 99px;
  background: var(--fog);
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
}

.chip--now {
  background: var(--amber-tint);
}

.swap {
  display: inline-grid;
}

.swap > i {
  grid-area: 1 / 1;
}

.swap > i:not(:last-child) {
  opacity: 0;
}

.state {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 5px;
  height: 17px;
  padding: 0 8px 0 6px;
  border-radius: 99px;
  background: var(--fog);
  font-size: 8.5px;
  font-weight: 500;
  white-space: nowrap;
}

.state::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tick);
}

.state--done {
  background: var(--teal-tint);
}

.state--done::before {
  background: var(--teal);
}

.state--now {
  background: var(--amber-tint);
}

.state--now::before {
  background: var(--orange);
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-tint);
  font-size: 8px;
  font-weight: 600;
}

.avatar--amber {
  background: var(--amber-tint);
}

.avatar--orange {
  background: var(--orange-tint);
}

.pointer {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 12px;
  height: 17px;
  background: var(--i-cursor) center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}

.device--phone,
.device--slab,
.device--handheld {
  background: var(--metal);
  box-shadow: var(--rim), var(--drop);
  --plate: var(--ink-950);
}

.device--phone::before,
.device--slab::before,
.device--handheld::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px;
  background: radial-gradient(130% 50% at 18% 0, rgba(45, 115, 149, 0.34), rgba(45, 115, 149, 0) 62%), var(--ink-950);
  box-shadow: 0 0 0 0.7px rgba(1, 15, 24, 0.9), inset 0 0 0 0.6px rgba(148, 184, 201, 0.22);
}

.device--phone .screen::before,
.device--slab .screen::before,
.device--handheld .screen::before {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0;
  background: var(--glare);
  pointer-events: none;
}

.device--phone {
  padding: 8px;
  border-radius: 40px;
  background:
    linear-gradient(var(--ink-300), var(--ink-300)) 0 46px / 3px 1.2px no-repeat,
    linear-gradient(var(--ink-300), var(--ink-300)) 100% 46px / 3px 1.2px no-repeat,
    linear-gradient(var(--ink-400), var(--ink-400)) 0 467px / 3px 1.2px no-repeat,
    linear-gradient(var(--ink-400), var(--ink-400)) 100% 467px / 3px 1.2px no-repeat,
    linear-gradient(var(--ink-300), var(--ink-300)) 179px 0 / 1.2px 3px no-repeat,
    linear-gradient(var(--ink-400), var(--ink-400)) 64px 100% / 1.2px 3px no-repeat,
    var(--metal);
}

.device--phone::before {
  border-radius: 37px;
}

.device--phone::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 -2.4px;
  background:
    linear-gradient(var(--ink-400), var(--ink-600) 50%, var(--ink-900)) 0 95px / 3.4px 20px no-repeat,
    linear-gradient(var(--ink-400), var(--ink-600) 50%, var(--ink-900)) 0 135px / 3.4px 27.5px no-repeat,
    linear-gradient(var(--ink-400), var(--ink-600) 50%, var(--ink-900)) 0 174px / 3.4px 27.5px no-repeat,
    linear-gradient(var(--ink-400), var(--ink-600) 50%, var(--ink-900)) 100% 147px / 3.4px 57px no-repeat,
    linear-gradient(#a9cddd, #3f7f9d 16%, #0f3448 50%, #3f7f9d 84%, #a9cddd) calc(100% - 1px) 324px / 2.4px 57px no-repeat;
}

.device--slab {
  padding: 14px 14px 20px;
  border-radius: 13px;
}

.device--slab::before {
  border-radius: 10.5px;
  background:
    radial-gradient(circle at 50% 5.5px, #2a6d8e 0 0.8px, #0b2f43 1.1px 1.9px, rgba(11, 47, 67, 0) 2.3px),
    radial-gradient(90% 60% at 14% 0, rgba(45, 115, 149, 0.3), rgba(45, 115, 149, 0) 60%),
    var(--ink-950);
}

.device--till {
  position: absolute;
  left: 0;
  top: 0;
  height: 320px;
}

.device--till::before {
  background:
    radial-gradient(circle at calc(100% - 22px) calc(100% - 8.5px), #ffd978 0 0.9px, var(--amber) 1.2px 1.7px, rgba(255, 183, 3, 0.28) 2.2px, rgba(255, 183, 3, 0) 6px),
    radial-gradient(90% 60% at 14% 0, rgba(45, 115, 149, 0.3), rgba(45, 115, 149, 0) 60%),
    var(--ink-950);
}

.device--monitor {
  position: absolute;
  left: 0;
  top: 0;
  height: 326px;
  padding: 10px 10px 16px;
  border-radius: 11px;
}

.device--monitor::before {
  border-radius: 8.5px;
  background:
    radial-gradient(circle at calc(100% - 18px) calc(100% - 6.5px), #9fe3f5 0 0.8px, var(--teal) 1.1px 1.5px, rgba(33, 158, 188, 0) 4px),
    radial-gradient(90% 60% at 14% 0, rgba(45, 115, 149, 0.3), rgba(45, 115, 149, 0) 60%),
    var(--ink-950);
}

.device--lid {
  position: absolute;
  left: 20px;
  top: 0;
  width: 540px;
  height: 344px;
  padding: 10px 10px 12px;
  border-radius: 13px 13px 4px 4px;
}

.device--lid::before {
  border-radius: 10.5px 10.5px 2px 2px;
  background:
    radial-gradient(circle at 50% 3.6px, #2a6d8e 0 0.7px, #0b2f43 1px 1.6px, rgba(11, 47, 67, 0) 2px),
    radial-gradient(90% 60% at 14% 0, rgba(45, 115, 149, 0.3), rgba(45, 115, 149, 0) 60%),
    var(--ink-950);
}

.device--tablet {
  padding: 13px;
  border-radius: 23px;
}

.device--tablet::before {
  border-radius: 20.5px;
  background:
    radial-gradient(circle at 50% 5px, #2a6d8e 0 0.8px, #0b2f43 1.1px 1.9px, rgba(11, 47, 67, 0) 2.3px),
    radial-gradient(90% 60% at 14% 0, rgba(45, 115, 149, 0.3), rgba(45, 115, 149, 0) 60%),
    var(--ink-950);
}

.device--till,
.device--monitor {
  box-shadow: var(--rim), 0 1px 2px rgba(1, 27, 41, 0.32), 0 5px 8px -5px rgba(1, 27, 41, 0.3);
}

.device--tablet .screen {
  border-radius: 9px;
}

.device--slab .screen {
  border-radius: 3px;
}

.mon-stand {
  left: 50%;
  top: 314px;
  width: 196px;
  height: 78px;
  margin-left: -98px;
  --fy: -52;
}

.mon-stand::before,
.mon-stand::after {
  content: "";
  position: absolute;
}

.mon-stand::before {
  left: 62px;
  right: 62px;
  top: 0;
  height: 66px;
  background:
    linear-gradient(rgba(1, 15, 24, 0.9) 18%, rgba(1, 15, 24, 0) 64%),
    linear-gradient(90deg, var(--ink-950), var(--ink-800) 8%, var(--ink-600) 28%, var(--ink-500) 42%, var(--navy) 68%, var(--ink-900) 94%, var(--ink-950));
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}

.mon-stand::after {
  left: 0;
  right: 0;
  bottom: 2px;
  height: 12px;
  border-radius: 7px 7px 3px 3px / 6px 6px 3px 3px;
  background: linear-gradient(var(--ink-400), var(--ink-600) 16%, var(--navy) 46%, var(--ink-900));
  box-shadow: inset 0 0.6px 0 rgba(170, 208, 224, 0.5), 0 0 0 0.5px rgba(1, 15, 24, 0.6), 0 2px 2px rgba(1, 15, 24, 0.5), 0 8px 10px -3px rgba(1, 27, 41, 0.42), 0 18px 22px -8px rgba(2, 48, 71, 0.32), 0 28px 32px -10px rgba(2, 48, 71, 0.26);
}

.lap-base {
  left: 0;
  top: 342px;
  width: 580px;
  height: 15px;
  border-radius: 2px 2px 12px 12px / 2px 2px 13px 13px;
  background:
    linear-gradient(var(--ink-950), var(--ink-900)) 50% 0 / 84px 4.5px no-repeat,
    linear-gradient(var(--ink-300), var(--ink-500) 9%, var(--ink-600) 22%, var(--navy) 55%, var(--ink-900));
  box-shadow: inset 0 0.6px 0 rgba(170, 208, 224, 0.6), 0 0 0 0.5px rgba(1, 15, 24, 0.55), 0 2px 3px rgba(1, 15, 24, 0.4), 0 10px 14px -4px rgba(1, 27, 41, 0.4), 0 22px 28px -10px rgba(2, 48, 71, 0.34);
  --fy: -12;
}

.till-stand,
.till-paper,
.till-reader {
  --fy: -100;
}

.till-stand {
  left: 35px;
  top: 306px;
  width: 470px;
  height: 108px;
  background:
    linear-gradient(var(--ink-950), var(--ink-950)) 34px 100% / 28px 3px no-repeat,
    linear-gradient(var(--ink-950), var(--ink-950)) calc(100% - 34px) 100% / 28px 3px no-repeat;
}

.till-stand::before,
.till-stand::after,
.till-paper::after {
  content: "";
  position: absolute;
}

.till-stand::before {
  inset: 0 155px 72px;
  background:
    linear-gradient(rgba(1, 15, 24, 0.95) 34%, rgba(1, 15, 24, 0) 88%),
    linear-gradient(90deg, var(--ink-950), var(--ink-800) 7%, var(--ink-600) 26%, var(--ink-500) 40%, var(--navy) 66%, var(--ink-900) 94%, var(--ink-950));
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
}

.till-stand::after {
  inset: auto 0 2px;
  height: 72px;
  border: solid rgba(1, 15, 24, 0);
  border-width: 4px 5px 5px;
  border-radius: 5px;
  background:
    linear-gradient(#ffc93c, var(--orange) 55%, #c96a01) 50% 17px / 4.6px 14px no-repeat padding-box,
    radial-gradient(circle at 50% 24px, #010a10 0 2.3px, var(--ink-300) 2.7px, var(--ink-200) 3.8px, var(--ink-500) 5.2px, rgba(1, 15, 24, 0.8) 5.6px 6.3px, rgba(1, 15, 24, 0) 6.8px) padding-box,
    linear-gradient(#010a10, #03141d) 50% 46px / 96px 2.6px no-repeat padding-box,
    linear-gradient(rgba(148, 184, 201, 0.32), rgba(148, 184, 201, 0.32)) 50% 48.8px / 96px 0.6px no-repeat padding-box,
    radial-gradient(70% 150% at 34% 0, rgba(45, 115, 149, 0.4), rgba(45, 115, 149, 0)) padding-box,
    linear-gradient(var(--ink-600), var(--navy) 34%, var(--ink-800)) padding-box,
    linear-gradient(var(--ink-400), var(--ink-600) 7%, var(--ink-800) 38%, var(--ink-950)) border-box;
  box-shadow: inset 0 0 0 0.8px rgba(1, 15, 24, 0.85), inset 0 2px 0 -0.9px rgba(148, 184, 201, 0.2), 0 1.5px 1.5px rgba(1, 15, 24, 0.6), 0 7px 8px -2px rgba(1, 27, 41, 0.5), 0 15px 17px -5px rgba(2, 48, 71, 0.42), 0 27px 30px -10px rgba(2, 48, 71, 0.3);
}

.till-paper {
  left: 112px;
  top: 344px;
  width: 52px;
  height: 36px;
  background:
    linear-gradient(var(--slate), var(--slate)) 50% 11px / 26px 1.6px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 50% 17px / 36px 1.6px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 50% 23px / 30px 1.6px no-repeat,
    linear-gradient(#cfdce3, var(--paper) 26%);
  clip-path: polygon(-6px -3px, 58px -3px, 58px 2.5px, 52px 2.5px, 52px 33.4px, 49.4px 36px, 46.8px 33.4px, 44.2px 36px, 41.6px 33.4px, 39px 36px, 36.4px 33.4px, 33.8px 36px, 31.2px 33.4px, 28.6px 36px, 26px 33.4px, 23.4px 36px, 20.8px 33.4px, 18.2px 36px, 15.6px 33.4px, 13px 36px, 10.4px 33.4px, 7.8px 36px, 5.2px 33.4px, 2.6px 36px, 0 33.4px, 0 2.5px, -6px 2.5px);
}

.till-paper::after {
  inset: -2.5px -6px auto;
  height: 4.5px;
  border-radius: 2px;
  background: linear-gradient(var(--ink-600), var(--ink-950) 45%);
}

.till-reader {
  left: 462px;
  top: 326px;
  display: grid;
  align-content: start;
  justify-items: center;
  width: 66px;
  height: 86px;
  padding-top: 12px;
  border-radius: 9px;
  background:
    linear-gradient(var(--ink-950), var(--ink-950)) 50% calc(100% - 6px) / 30px 1.6px no-repeat,
    linear-gradient(150deg, var(--ink-500), var(--ink-800) 55%, var(--ink-900));
  box-shadow: inset 0 0 0 0.6px rgba(170, 208, 224, 0.4), 0 0 0 0.5px rgba(1, 15, 24, 0.7), 0 1px 1.5px rgba(1, 15, 24, 0.6), 0 5px 6px -3px rgba(1, 27, 41, 0.45);
}

.till-reader::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background:
    radial-gradient(circle, var(--teal) 0 0.9px, rgba(33, 158, 188, 0) 1.1px) 0 0 / 5.5px 2px no-repeat,
    radial-gradient(circle, var(--ink-400) 0 0.9px, rgba(45, 115, 149, 0) 1.1px) 5.5px 0 / 5.5px 2px repeat-x;
}

.till-reader::after {
  content: "";
  width: 42px;
  height: 22.4px;
  margin-top: 7px;
  background:
    repeating-linear-gradient(90deg, rgba(2, 40, 59, 0) 0 11px, var(--ink-800) 11px 15.5px),
    repeating-linear-gradient(rgba(2, 40, 59, 0) 0 5.4px, var(--ink-800) 5.4px 8.5px),
    var(--ink-400);
}

.till-reader b {
  display: grid;
  place-items: center;
  width: 54px;
  height: 25px;
  border-radius: 3px;
  background: var(--teal-tint);
  box-shadow: inset 0 0 0 1px var(--ink-950);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.device--browser,
.device--window {
  padding: 0 1px 1px;
  border-radius: 9px;
  background: var(--navy);
  box-shadow: inset 0 0.6px 0 rgba(148, 184, 201, 0.5), 0 0 0 0.5px rgba(1, 15, 24, 0.5), 0 2px 4px rgba(1, 27, 41, 0.18), 0 12px 20px -8px rgba(1, 27, 41, 0.26), 0 30px 40px -18px rgba(2, 48, 71, 0.4);
}

.device--browser .screen,
.device--window .screen {
  border-radius: 0 0 8px 8px;
}

.web-tabs {
  display: flex;
  flex: none;
  align-items: flex-end;
  height: 26px;
  padding: 0 13px 0 8px;
  border-radius: 8px 8px 0 0;
  background:
    radial-gradient(circle at 0 0, rgba(2, 48, 71, 0) 5.6px, var(--navy) 6.1px) 2px 100% / 6px 6px no-repeat,
    radial-gradient(circle at 100% 0, rgba(2, 48, 71, 0) 5.6px, var(--navy) 6.1px) 186px 100% / 6px 6px no-repeat,
    linear-gradient(var(--ink-800), var(--ink-900));
  color: var(--on-navy);
}

.web-tab {
  display: flex;
  align-items: center;
  width: 178px;
  height: 21px;
  padding: 0 8px;
  border-radius: 7px 7px 0 0;
  background: var(--navy);
  box-shadow: inset 0 0.6px 0 rgba(148, 184, 201, 0.3);
  color: var(--paper);
  font-size: 9px;
  white-space: nowrap;
}

.web-tab::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  background: linear-gradient(160deg, var(--amber), var(--orange));
}

.web-tab::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  --mask: var(--i-close);
}

.web-tabs .glyph {
  width: 9px;
  height: 9px;
  margin: 0 0 6px 11px;
}

.win-keys {
  width: 64px;
  height: 8px;
  margin: 0 0 9px auto;
  background:
    linear-gradient(var(--on-navy), var(--on-navy)) 0 50% / 8px 1px no-repeat,
    linear-gradient(var(--on-navy), var(--on-navy)) 28px 0 / 8px 1px no-repeat,
    linear-gradient(var(--on-navy), var(--on-navy)) 28px 100% / 8px 1px no-repeat,
    linear-gradient(var(--on-navy), var(--on-navy)) 28px 0 / 1px 8px no-repeat,
    linear-gradient(var(--on-navy), var(--on-navy)) 35px 0 / 1px 8px no-repeat,
    linear-gradient(45deg, rgba(196, 219, 228, 0) calc(50% - 0.55px), var(--on-navy) calc(50% - 0.55px), var(--on-navy) calc(50% + 0.55px), rgba(196, 219, 228, 0) calc(50% + 0.55px)) 100% 0 / 8px 8px no-repeat,
    linear-gradient(-45deg, rgba(196, 219, 228, 0) calc(50% - 0.55px), var(--on-navy) calc(50% - 0.55px), var(--on-navy) calc(50% + 0.55px), rgba(196, 219, 228, 0) calc(50% + 0.55px)) 100% 0 / 8px 8px no-repeat;
}

.web-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 29px;
  padding: 0 11px 0 12px;
  color: var(--on-navy);
}

.web-nav {
  flex: none;
  width: 53px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--i-nav) center / contain no-repeat;
  mask: var(--i-nav) center / contain no-repeat;
}

.web-url {
  display: flex;
  flex: 1;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  color: rgba(196, 219, 228, 0.78);
  font-size: 9px;
  white-space: nowrap;
}

.web-url::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 6px;
  color: var(--on-navy);
  --mask: var(--i-lock);
}

.web-url b {
  color: var(--paper);
  font-weight: 500;
}

.web-bar .glyph {
  width: 12px;
  height: 12px;
  transform: rotate(90deg);
}

.win-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 10px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(var(--ink-800), var(--navy));
  color: var(--paper);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.win-bar::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(160deg, var(--amber), var(--orange));
}

.win-meta {
  color: var(--on-navy);
  font-size: 9px;
  font-weight: 400;
}

.win-bar .win-keys {
  margin: 0 0 0 auto;
}

.device--handheld {
  padding: 30px 12px 58px;
  border-radius: 30px 30px 38px 38px;
  background: linear-gradient(172deg, var(--ink-500), var(--navy) 16%, var(--ink-800) 62%, var(--ink-900));
  box-shadow: inset 0 0 0 0.6px rgba(170, 208, 224, 0.42), inset 0 0 0 3.4px rgba(1, 15, 24, 0.42), inset 0 0 0 4px rgba(148, 184, 201, 0.12), var(--drop);
}

.device--handheld::before {
  inset: 26px 8px 54px;
  border-radius: 9px;
}

.device--handheld::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: -3px;
  right: -3px;
  top: 150px;
  height: 64px;
  border-radius: 3px;
  background:
    linear-gradient(#ffc93c, var(--orange) 45%, #c96a01) 0 0 / 4px 100% no-repeat,
    linear-gradient(#ffc93c, var(--orange) 45%, #c96a01) 100% 0 / 4px 100% no-repeat;
}

.device--handheld .screen {
  border-radius: 6px;
}

.scanner {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 92px;
  height: 11px;
  margin-left: -46px;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(var(--ink-950), #03141d);
  box-shadow: inset 0 0 0 0.6px rgba(148, 184, 201, 0.25), 0 0.6px 0 rgba(148, 184, 201, 0.25);
}

.scanner i {
  position: absolute;
  inset: 3.5px 8px;
  border-radius: 2px;
  background: var(--amber);
  box-shadow: 0 0 6px 1px rgba(255, 183, 3, 0.7);
  transform: scaleX(0.3);
}

.keys {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 17px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.keys i {
  width: 42px;
  height: 24px;
  border-radius: 8px;
  background: linear-gradient(var(--ink-600), var(--ink-800));
  box-shadow: inset 0 0.6px 0 rgba(148, 184, 201, 0.35), 0 1px 1.5px rgba(1, 15, 24, 0.7);
}

.keys i:nth-child(2) {
  width: 58px;
  background: linear-gradient(#ffb23e, var(--orange) 60%, #d97200);
  box-shadow: inset 0 0.6px 0 rgba(255, 255, 255, 0.5), 0 1px 1.5px rgba(1, 15, 24, 0.7);
}

.device--sheet {
  padding: 16px 10px 10px;
  border-radius: 8px;
  background: linear-gradient(172deg, var(--ink-500), var(--navy) 18%, var(--ink-800) 70%, var(--ink-900));
  box-shadow: var(--rim), var(--drop);
}

.device--sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16px 10px 10px;
  border-radius: 1px;
  background: var(--mist);
  box-shadow: 0 1px 2px rgba(1, 15, 24, 0.5);
  transform: rotate(-1.5deg) translate(-2px, 2px);
}

.device--sheet::after {
  content: "";
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 4px;
  width: 76px;
  height: 22px;
  margin-left: -38px;
  border-radius: 5px 5px 3px 3px;
  background:
    radial-gradient(circle at 50% 7px, rgba(1, 15, 24, 0.85) 0 2.6px, var(--ink-200) 3px 3.9px, rgba(148, 184, 201, 0) 4.4px),
    linear-gradient(var(--ink-950), var(--ink-950)) 50% 100% / 64px 2px no-repeat,
    linear-gradient(var(--ink-300), var(--ink-500) 22%, var(--ink-600) 60%, var(--ink-800));
  box-shadow: inset 0 0.6px 0 rgba(200, 226, 236, 0.7), 0 0 0 0.5px rgba(1, 15, 24, 0.6), 0 2px 3px rgba(1, 15, 24, 0.5), 0 5px 7px -2px rgba(1, 27, 41, 0.4);
}

.device--sheet .screen {
  border-radius: 1px;
  background: linear-gradient(170deg, var(--paper) 60%, #f8fbfc);
  box-shadow: 0 1px 2px rgba(1, 15, 24, 0.5);
}

.phone {
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  border-radius: 32px;
  font-size: 10.5px;
}

.phone::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 6px auto auto 50%;
  width: 51px;
  height: 17px;
  margin-left: -25.5px;
  border-radius: 8.5px;
  background:
    radial-gradient(circle at calc(100% - 8.5px) 50%, #4a8aa8 0 0.45px, #154259 0.9px, #071d29 1.8px, #10334a 2.35px, #03121b 2.85px, rgba(3, 18, 27, 0) 3.25px),
    #020a10;
}

.phone > .phone-top {
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 1fr) 61px minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  height: 29px;
  margin: 0 -12px;
  padding: 0 8px;
  font-size: 9.5px;
  font-weight: 600;
}

.phone-top i {
  grid-column: 3;
  width: 50px;
  height: 11px;
  --mask: var(--i-status);
}

.phone > .phone-nav {
  position: relative;
  flex: none;
  height: 30px;
  font-size: 11px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
}

.phone-nav::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 11px;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 0 1.6px 1.6px;
  transform: rotate(45deg);
}

.phone-nav::after {
  content: "";
  position: absolute;
  right: 0;
  top: 13px;
  width: 15px;
  height: 4px;
  background: radial-gradient(circle, currentColor 1.2px, rgba(2, 48, 71, 0) 1.7px) 0 0 / 5.5px 4px;
}

.phone > .phone-card {
  flex: none;
  margin-top: 2px;
  padding: 9px 12px 9px;
  border-radius: 14px;
  background: var(--mist);
}

.phone-card .ui-row {
  color: var(--slate);
  font-size: 8.5px;
  font-weight: 500;
}

.phone-card .ui-title {
  margin: 2px 0 11px;
  font-size: 16.5px;
}

.phone .chip {
  gap: 4px;
  height: 16px;
  padding: 0 7px 0 6px;
  color: var(--navy);
  font-size: 8.5px;
  font-weight: 600;
}

.phone .chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
}

.track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 -11px;
  color: var(--slate);
  font-size: 8.5px;
  text-align: center;
}

.track li {
  position: relative;
  padding-top: 16px;
}

.track li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.track li::after {
  content: "";
  position: absolute;
  left: calc(50% + 9px);
  top: 4.5px;
  width: calc(100% - 18px);
  height: 2px;
  border-radius: 1px;
  background: var(--line);
}

.track li:last-child::after {
  content: none;
}

.track .is-done,
.track .is-now {
  color: var(--navy);
}

.track .is-now {
  font-weight: 600;
}

.track .is-done::before {
  background: var(--teal) var(--i-tick) center / 7px no-repeat;
  box-shadow: none;
}

.track .is-done::after {
  background: var(--teal);
}

.track .is-now::before {
  background: radial-gradient(circle, var(--paper) 1.8px, var(--navy) 2.3px);
  box-shadow: 0 0 0 3px var(--teal-tint);
}

.track .is-now::after {
  background: linear-gradient(90deg, var(--teal) 42%, var(--line) 42%);
}

.phone > .phone-map {
  position: relative;
  flex: none;
  height: 62px;
  margin-top: 7px;
  border-radius: 12px;
  background: var(--fog) var(--i-map) center / cover no-repeat;
}

.phone-map::before,
.phone-map::after {
  content: "";
  position: absolute;
  left: 54.5%;
  top: 53%;
  width: 9px;
  height: 9px;
  margin: -4.5px;
  border-radius: 50%;
  background: var(--teal);
}

.phone-map::before {
  opacity: 0.3;
  transform: scale(2.1);
}

.phone-map::after {
  box-shadow: 0 0 0 2px var(--paper);
}

.phone > .phone-courier {
  display: grid;
  flex: none;
  grid-template-columns: 30px minmax(0, 1fr) 28px;
  align-items: center;
  column-gap: 9px;
  margin-top: 8px;
}

.phone-courier::before {
  content: attr(data-initials);
  display: grid;
  grid-area: 1 / 1 / 3 / 2;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal-tint);
  font-size: 9.5px;
  font-weight: 600;
}

.phone-courier::after {
  content: "";
  grid-area: 1 / 3 / 3 / 4;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy) var(--i-call) center / 13px no-repeat;
}

.phone-courier b {
  grid-area: 1 / 2;
  align-self: end;
}

.phone-courier span {
  grid-area: 2 / 2;
  align-self: start;
  color: var(--slate);
  font-size: 8.5px;
}

.phone > .phone-head {
  flex: none;
  margin-top: 8px;
  padding-bottom: 4px;
}

.phone-head span {
  color: var(--slate);
  font-size: 8.5px;
}

.phone > .phone-item {
  display: grid;
  flex: none;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid var(--fog);
  font-weight: 600;
}

.phone-item img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
}

.phone-item div {
  display: grid;
}

.phone-item b {
  font-weight: 500;
}

.phone-item div span {
  color: var(--slate);
  font-size: 8.5px;
  font-weight: 400;
}

.phone > .phone-place {
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid var(--fog);
}

.phone-place::before {
  content: "";
  background: var(--mist) var(--i-pin) center / 15px no-repeat;
}

.phone-place::after {
  justify-self: center;
  width: 6px;
  height: 6px;
  border: solid var(--slate);
  border-width: 1.5px 1.5px 0 0;
  border-radius: 0;
  background: none;
  transform: rotate(45deg);
}

.phone > .phone-banner {
  position: absolute;
  z-index: 2;
  left: 7px;
  right: 7px;
  top: 28px;
  display: grid;
  gap: 1px;
  padding: 8px 11px 9px 44px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 0 0 0.5px rgba(2, 48, 71, 0.12), 0 12px 26px -10px rgba(2, 48, 71, 0.5);
  font-size: 9.5px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-34px);
}

.phone-banner::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 7px;
  background: var(--i-bag-light) center / 15px no-repeat, linear-gradient(140deg, #ffa13a, var(--orange));
}

.phone-banner b {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
}

.phone-banner b::after {
  content: attr(data-time);
  color: var(--slate);
  font-size: 8.5px;
  font-weight: 400;
}

.phone > .phone-tabs {
  position: relative;
  display: grid;
  flex: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: auto -4px 15px;
  padding: 4px;
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 0 0 0.6px rgba(2, 48, 71, 0.1), inset 0 0.6px 0 rgba(255, 255, 255, 0.95), 0 9px 18px -11px rgba(2, 48, 71, 0.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  color: var(--slate);
  font-size: 8.5px;
  font-weight: 500;
  text-align: center;
}

.phone-tabs span {
  padding: 4px 0 3px;
  border-radius: 17px;
}

.phone-tabs span::before {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  margin: 0 auto 1px;
  --mask: var(--i-home);
}

.phone-tabs span:nth-child(2)::before {
  --mask: var(--i-box);
}

.phone-tabs span:nth-child(3)::before {
  --mask: var(--i-bag);
}

.phone-tabs span:nth-child(4)::before {
  --mask: var(--i-user);
}

.phone-tabs span:nth-child(3) {
  background: radial-gradient(circle at calc(50% + 8px) 8px, var(--orange) 3px, var(--paper) 3.4px 4.8px, rgba(255, 255, 255, 0) 5.2px);
}

.phone-tabs .is-on {
  background: rgba(2, 48, 71, 0.075);
  color: var(--navy);
  font-weight: 600;
}

.phone-tabs::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 70px;
  height: 3px;
  margin-left: -35px;
  border-radius: 2px;
  background: var(--navy);
}

.js .is-on .phone-banner {
  animation: phone-banner 11s var(--ease-out) 3.6s infinite both;
}

@keyframes phone-banner {
  0%,
  44%,
  100% {
    opacity: 0;
    transform: translateY(-34px);
  }
  5%,
  38% {
    opacity: 1;
    transform: none;
  }
}

.js .is-on .phone-map::before {
  animation: map-pulse 2.6s ease-out infinite;
}

@keyframes map-pulse {
  from {
    opacity: 0.5;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

.shop {
  display: flex;
  flex-direction: column;
  font-size: 9px;
}

.shop::before {
  content: "";
  position: absolute;
  z-index: 3;
  right: 2.5px;
  top: 4px;
  width: 3px;
  height: 62px;
  border-radius: 2px;
  background: rgba(2, 48, 71, 0.2);
}

.shop::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 247px auto auto 470px;
  width: 12px;
  height: 17px;
  background: var(--i-cursor) center / contain no-repeat;
  opacity: 0;
}

.shop > .shop-nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 15px;
  height: 36px;
  padding: 0 18px 0 16px;
  border-bottom: 1px solid var(--fog);
  color: var(--slate);
  font-weight: 500;
}

.shop-nav > b {
  margin-right: 3px;
  color: var(--navy);
  font-size: 12.5px;
  letter-spacing: -0.02em;
}

.shop-nav .is-on {
  padding: 11px 0;
  background: linear-gradient(var(--navy), var(--navy)) 0 100% / 100% 1.5px no-repeat;
  color: var(--navy);
}

.shop-find {
  position: relative;
  width: 104px;
  height: 22px;
  margin-left: auto;
  padding-left: 26px;
  border-radius: 11px;
  background: var(--mist);
  font-size: 8.5px;
  font-weight: 400;
  line-height: 22px;
}

.shop-find::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 10px;
  height: 10px;
  --mask: var(--i-find);
}

.shop-cart {
  position: relative;
  width: 40px;
  height: 16px;
  background: var(--i-user) 0 50% / 15px no-repeat, var(--i-bag) 100% 50% / 15px no-repeat;
  color: var(--navy);
}

.shop-cart b {
  position: absolute;
  right: -6px;
  top: -5px;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--orange);
  font-size: 8.5px;
  line-height: 1;
}

.shop > .shop-body {
  display: grid;
  flex: 1;
  grid-template-columns: 246px minmax(0, 1fr);
  gap: 22px;
  min-height: 0;
  padding: 14px 18px 0 16px;
}

.shop-photo {
  position: relative;
  height: 246px;
  padding-left: 46px;
}

.shop-photo img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  object-position: 80% 50%;
}

.shop-photo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 150px;
  background:
    url(../images/photos/ecommerce-a.webp) -12px 0 / auto 46px no-repeat,
    url(../images/photos/ecommerce-a.webp) 0 52px / auto 46px no-repeat,
    url(../images/photos/ecommerce-a.webp) -32px 98px / auto 62px no-repeat;
  --mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='150'><rect width='38' height='46' rx='5'/><rect y='52' width='38' height='46' rx='5'/><rect y='104' width='38' height='46' rx='5'/></svg>");
}

.shop-photo::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 46px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px var(--navy);
}

.shop-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.shop-info .ui-kicker {
  font-size: 8.5px;
}

.shop-info .ui-title {
  margin-top: 3px;
  font-size: 20px;
}

.shop-rate {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--slate);
  font-size: 8.5px;
}

.shop-rate::before {
  content: "";
  width: 50px;
  height: 9.5px;
  background: linear-gradient(90deg, var(--amber) 96%, var(--line) 96%);
  -webkit-mask: var(--i-star) 0 50% / 10px 9.5px repeat-x;
  mask: var(--i-star) 0 50% / 10px 9.5px repeat-x;
}

.shop-rate b {
  color: var(--navy);
}

.shop-price {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 19px;
  font-weight: 600;
}

.shop-price s {
  color: var(--slate);
  font-size: 10px;
  font-weight: 400;
}

.shop-price .chip {
  height: 16px;
  padding: 0 7px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0;
}

.shop-opt {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 5px;
  margin-top: 10px;
  color: var(--slate);
  font-size: 8.5px;
}

.shop-opt b {
  color: var(--navy);
  font-weight: 500;
}

.shop-opt i {
  width: 52px;
  height: 16px;
  margin-left: auto;
  background:
    radial-gradient(circle at 8px 50%, var(--orange) 4.4px, var(--paper) 4.9px 6px, var(--navy) 6.4px 7.3px, rgba(2, 48, 71, 0) 7.8px),
    radial-gradient(circle at 27px 50%, #f6e6d0 5.6px, #dccdb8 6px, rgba(220, 205, 184, 0) 6.5px),
    radial-gradient(circle at 44px 50%, var(--navy) 5.8px, rgba(2, 48, 71, 0) 6.4px);
}

.shop-opt u {
  margin-left: auto;
  color: var(--teal-ink);
  text-underline-offset: 2px;
}

.sizes {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}

.sizes span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 25px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 9.5px;
  font-weight: 500;
}

.sizes .is-on {
  background: var(--navy);
  box-shadow: none;
  color: var(--paper);
}

.sizes .is-out {
  background: linear-gradient(to top right, rgba(207, 220, 227, 0) 47.5%, var(--line) 47.5% 52.5%, rgba(207, 220, 227, 0) 52.5%);
  color: var(--tick);
}

.shop-buy {
  display: flex;
  align-self: stretch;
  gap: 6px;
  margin-top: 12px;
}

.shop-buy::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--i-heart) center / 14px no-repeat;
  box-shadow: inset 0 0 0 1px var(--line);
}

.shop-qty {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  width: 60px;
  height: 32px;
  padding: 0 9px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 10px;
  font-weight: 500;
}

.shop-qty::before {
  content: "\2212";
  color: var(--tick);
}

.shop-qty::after {
  content: "+";
}

.shop-add {
  display: inline-grid;
  flex: 1;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
}

.shop-add i {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: 6px;
}

.shop-add i:first-child {
  opacity: 0;
}

.shop-add i:last-child::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--i-tick) center / contain no-repeat;
}

.shop-ship {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--slate);
  font-size: 8.5px;
}

.shop-ship::before {
  content: "";
  width: 14px;
  height: 14px;
  color: var(--teal-ink);
  --mask: var(--i-truck);
}

.shop-ship b {
  color: var(--navy);
  font-weight: 500;
}

.shop > .shop-toast {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--navy);
  box-shadow: 0 10px 20px -10px rgba(2, 48, 71, 0.7);
  color: var(--paper);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
}

.shop-toast b {
  color: var(--amber);
}

.js .is-on .shop::after {
  animation: shop-cursor 10s var(--ease-inout) 3.4s infinite both;
}

@keyframes shop-cursor {
  0%,
  4% {
    opacity: 0;
    transform: translate(-236px, -84px);
  }
  8% {
    opacity: 1;
    transform: translate(-220px, -78px);
  }
  20%,
  21% {
    opacity: 1;
    transform: none;
  }
  23% {
    opacity: 1;
    transform: scale(0.86);
  }
  25%,
  60% {
    opacity: 1;
    transform: none;
  }
  68%,
  100% {
    opacity: 0;
    transform: translate(18px, 26px);
  }
}

.js .is-on .shop-add {
  animation: shop-add 10s steps(1) 3.4s infinite both;
}

@keyframes shop-add {
  0% {
    background: var(--orange);
    color: var(--navy);
  }
  22% {
    background: #e07400;
    color: var(--navy);
  }
  24.5%,
  100% {
    background: var(--navy);
    color: var(--paper);
  }
}

.js .is-on .shop-add i:first-child,
.js .is-on .shop .swap > i:first-child {
  animation: shop-old 10s steps(1) 3.4s infinite both;
}

.js .is-on .shop-add i:last-child,
.js .is-on .shop .swap > i:last-child {
  animation: shop-new 10s steps(1) 3.4s infinite both;
}

@keyframes shop-old {
  0% {
    opacity: 1;
  }
  24.5%,
  100% {
    opacity: 0;
  }
}

@keyframes shop-new {
  0% {
    opacity: 0;
  }
  24.5%,
  100% {
    opacity: 1;
  }
}

.js .is-on .shop-cart b {
  animation: shop-pop 10s var(--ease-out) 3.4s infinite both;
}

@keyframes shop-pop {
  0%,
  24.5% {
    transform: none;
  }
  26% {
    transform: scale(1.4);
  }
  32%,
  100% {
    transform: none;
  }
}

.js .is-on .shop-toast {
  animation: shop-toast 10s var(--ease-out) 3.4s infinite both;
}

@keyframes shop-toast {
  0%,
  26% {
    opacity: 0;
    transform: translateY(10px);
  }
  31%,
  62% {
    opacity: 1;
    transform: none;
  }
  67%,
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

.till {
  display: grid;
  grid-template: 26px minmax(0, 1fr) / 216px minmax(0, 1fr);
  border-radius: 3px;
  font-size: 10px;
}

.till > .till-bar {
  position: relative;
  display: flex;
  grid-column: 1 / 3;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--navy);
  color: var(--on-navy);
  font-size: 9px;
}

.till-bar b {
  color: var(--paper);
  font-size: 10px;
}

.till-user {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.till-user::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 2px rgba(33, 158, 188, 0.32);
}

.till > .till-receipt {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 11px;
  box-shadow: 1px 0 0 var(--fog);
}

.till-receipt > .ui-row {
  padding-bottom: 7px;
  font-size: 11.5px;
}

.till-receipt > .ui-row span {
  color: var(--slate);
  font-size: 8.5px;
  font-weight: 500;
}

.till-line {
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 1fr) 30px 62px;
  align-items: center;
  height: 25px;
  border-top: 1px solid var(--fog);
  font-weight: 500;
}

.till-line span:nth-child(2) {
  text-align: center;
}

.till-line span:nth-child(3) {
  text-align: right;
}

.till-cols {
  height: 19px;
  border-top: 0;
  color: var(--slate);
  font-size: 8.5px;
  font-weight: 400;
}

.till-sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 3px;
  margin-top: auto;
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  color: var(--slate);
  font-size: 9px;
}

.till-sum .swap {
  justify-items: end;
}

.till-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1.5px solid var(--navy);
  font-size: 11.5px;
  font-weight: 600;
}

.till-total .ui-num {
  font-size: 21px;
  justify-items: end;
}

.till > .till-pad {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 11px;
  background: var(--mist);
}

.till-find {
  position: relative;
  flex: none;
  height: 26px;
  padding-left: 31px;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--fog);
  color: var(--slate);
  font-size: 9px;
  line-height: 26px;
}

.till-find::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 7px;
  width: 13px;
  height: 12px;
  color: var(--navy);
  --mask: var(--i-code);
}

.till-cats {
  display: flex;
  flex: none;
  gap: 5px;
  color: var(--slate);
  font-size: 9px;
  font-weight: 500;
}

.till-cats span {
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--paper);
}

.till-cats .is-on {
  background: var(--navy);
  color: var(--paper);
}

.till-keys {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.till-keys span {
  display: grid;
  align-content: space-between;
  height: 43px;
  padding: 6px 9px 7px 12px;
  border-radius: 7px;
  background: linear-gradient(var(--teal), var(--teal)) 0 0 / 3px 100% no-repeat, var(--paper);
  box-shadow: 0 1px 0 var(--line);
  font-weight: 500;
}

.till-keys span:nth-child(3n) {
  background-image: linear-gradient(var(--amber), var(--amber));
}

.till-keys i {
  color: var(--slate);
  font-size: 8.5px;
  font-weight: 400;
}

.till-more {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: auto;
  font-size: 9.5px;
  font-weight: 500;
}

.till-more span {
  display: grid;
  place-items: center;
  height: 26px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.till-pay {
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 6px;
  margin-top: -2px;
}

.till-pay span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  border-radius: 7px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12px;
  font-weight: 600;
}

.till-pay span::before {
  content: "";
  width: 17px;
  height: 17px;
  background: var(--i-cash) center / contain no-repeat;
}

.till-pay .is-on {
  background: var(--orange);
  box-shadow: none;
}

.till-pay .is-on::before {
  background-image: var(--i-card);
}

.till-note {
  position: absolute;
  left: 50%;
  top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  padding: 0 9px 0 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--paper);
  font-size: 8.5px;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
}

.till-note::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
}

.js .is-on .till-keys .is-hit {
  animation: till-hit 10s steps(1) 3.4s infinite both;
}

@keyframes till-hit {
  0%,
  24%,
  100% {
    background-color: var(--paper);
    transform: none;
  }
  20% {
    background-color: var(--teal-tint);
    transform: scale(0.96);
  }
}

.js .is-on .till-line--new {
  animation: till-new 10s var(--ease-out) 3.4s infinite both;
}

@keyframes till-new {
  0%,
  22% {
    background: var(--amber-tint);
    opacity: 0;
    transform: translateX(-8px);
  }
  26% {
    background: var(--amber-tint);
    opacity: 1;
    transform: none;
  }
  40%,
  94% {
    background: rgba(255, 241, 204, 0);
    opacity: 1;
    transform: none;
  }
  100% {
    background: rgba(255, 241, 204, 0);
    opacity: 0;
    transform: none;
  }
}

.js .is-on .till .swap > i:first-child,
.js .is-on .till-reader .swap > i:first-child {
  animation: till-old 10s steps(1) 3.4s infinite both;
}

.js .is-on .till .swap > i:last-child,
.js .is-on .till-reader .swap > i:last-child {
  animation: till-fresh 10s steps(1) 3.4s infinite both;
}

@keyframes till-old {
  0%,
  97%,
  100% {
    opacity: 1;
  }
  24% {
    opacity: 0;
  }
}

@keyframes till-fresh {
  0%,
  97%,
  100% {
    opacity: 0;
  }
  24% {
    opacity: 1;
  }
}

.js .is-on .till-note {
  animation: till-note 10s var(--ease-out) 3.4s infinite both;
}

@keyframes till-note {
  0%,
  28% {
    opacity: 0;
    transform: translate(-50%, -5px);
  }
  33%,
  78% {
    opacity: 1;
    transform: translateX(-50%);
  }
  84%,
  100% {
    opacity: 0;
    transform: translate(-50%, -5px);
  }
}

.surface--hub {
  --r: calc(153.4px / var(--boost));
}

.surface--hub::before {
  content: "";
  position: absolute;
  left: calc(-17px - var(--r));
  top: calc(-17px - var(--r));
  width: calc(2 * var(--r) + 34px);
  height: calc(2 * var(--r) + 34px);
  border: 1.5px dashed var(--tick);
  border-radius: 50%;
  opacity: var(--grow);
}

html:not(.js) .surface--hub::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(var(--r) * -1);
  top: calc(var(--r) * -1);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  background: var(--navy);
}

.wire {
  position: absolute;
  left: 0;
  top: -1px;
  width: var(--len);
  height: 2px;
  --len: calc(379.4px - var(--r));
  background: var(--navy);
  transform-origin: 0 50%;
}

.wire--site {
  transform: rotate(-120deg) translateX(var(--r)) scaleX(var(--grow));
}

.wire--store {
  transform: rotate(120deg) translateX(var(--r)) scaleX(var(--grow));
}

.wire--market {
  --len: calc(187.4px - var(--r));
  transform: translateX(var(--r)) scaleX(var(--grow));
}

.wire i {
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--navy);
  opacity: 0;
}

.port {
  position: absolute;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  width: 168px;
  height: 54px;
  margin: -27px 0 0 -84px;
  padding: 0 12px 0 10px;
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(2, 48, 71, 0.1), 0 2px 4px rgba(1, 27, 41, 0.12), 0 14px 24px -12px rgba(2, 48, 71, 0.45);
  font-size: 9px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: clamp(0, calc(var(--grow) * 3 - 2), 1);
  transform: scale(calc(0.9 + 0.1 * var(--grow)));
}

.port .tile {
  grid-row: 1 / 3;
  background: var(--teal-tint);
}

.port b {
  align-self: end;
  font-size: 11px;
  font-weight: 600;
}

.port span {
  align-self: start;
  color: var(--slate);
}

.port--site {
  left: -194px;
  top: -337px;
}

.port--store {
  left: -194px;
  top: 337px;
}

.port--store .tile {
  background: var(--orange-tint);
}

.port--market {
  left: 262px;
  top: 0;
  width: 150px;
  margin-left: -75px;
}

.port--market .tile {
  background: var(--amber-tint);
}

.hub-core {
  position: absolute;
  left: -120px;
  top: -40px;
  display: grid;
  place-content: center;
  gap: 5px;
  width: 240px;
  height: 80px;
  color: var(--paper);
  text-align: center;
  opacity: var(--grow);
}

.hub-core .ui-num {
  font-size: 17px;
  font-weight: 500;
}

.hub-status {
  color: var(--amber);
  font-size: 11px;
  font-weight: 500;
}

.js .is-on .surface--hub::before {
  animation: hub-ring 36s linear infinite;
}

.js .is-on .wire i {
  animation: hub-out 2.8s linear infinite;
}

.js .is-on .wire--site i {
  animation-name: hub-in;
}

.js .is-on .wire--market i {
  animation-name: hub-short;
  animation-delay: 0.9s;
}

.js .is-on .wire--store i {
  animation-delay: 1.6s;
}

@keyframes hub-ring {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hub-in {
  0% {
    opacity: 0;
    transform: translateX(var(--len));
  }
  10%,
  80% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}

@keyframes hub-out {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  10%,
  80% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translateX(var(--len));
  }
}

@keyframes hub-short {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  15%,
  70% {
    opacity: 1;
  }
  85%,
  100% {
    opacity: 0;
    transform: translateX(var(--len));
  }
}

.surface--duo .device {
  position: absolute;
}

.duo-site {
  right: 0;
  top: 0;
  width: 404px;
  height: 300px;
}

.duo-panel {
  left: 0;
  bottom: 0;
  width: 232px;
  height: 266px;
}

.ui-input {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--teal);
  border-radius: var(--radius-chip);
  box-shadow: 0 0 0 2px var(--teal-tint);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}

.caret {
  width: 1.5px;
  height: 14px;
  margin-left: 1px;
  background: var(--navy);
}

.panel-thumb {
  position: relative;
  height: 50px;
  overflow: hidden;
  border-radius: var(--radius-chip);
}

.panel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-thumb span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--paper);
  font-size: 9px;
  font-weight: 500;
}

.toggle {
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 99px;
  background: var(--teal);
}

.toggle::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
}

.home {
  display: flex;
  flex-direction: column;
  font-size: 10px;
}

.home-nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  height: 32px;
  padding: 0 14px;
  color: var(--slate);
  font-size: 9px;
}

.home-nav b {
  margin-right: auto;
  color: var(--navy);
  font-size: 11.5px;
}

.home-nav .glyph {
  width: 13px;
  height: 13px;
  color: var(--navy);
}

.home-hero {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 14px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--navy);
}

.home-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-title {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 190px;
  min-height: 80px;
  padding: 16px 14px 12px 30px;
  background: var(--navy);
  color: var(--paper);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  clip-path: polygon(24.2px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}

.home-tiles {
  display: grid;
  flex: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 9px 14px 10px 110px;
}

.home-tiles span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  line-height: 1.25;
  white-space: nowrap;
}

.home-tiles img {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  object-fit: cover;
}

.home-tiles span:first-child img {
  object-position: 18% 50%;
}

.home-tiles span:last-child img {
  object-position: 88% 50%;
}

.home-tiles b {
  align-self: end;
  font-size: 9px;
  font-weight: 500;
}

.home-tiles i {
  align-self: start;
  color: var(--slate);
  font-size: 8.5px;
}

.cms {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 12px 12px;
  font-size: 10px;
}

.cms .crumb {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--fog);
}

.cms .ui-label {
  margin-top: 3px;
}

.cms .ui-row {
  margin-top: 3px;
  font-weight: 500;
}

.cms-save {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
}

.cms-save .ui-button {
  height: 26px;
}

.cms-saved {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--slate);
  font-size: 9px;
}

.cms-saved .glyph {
  color: var(--teal);
}

.flow {
  display: grid;
  grid-template: "bar bar" 34px "rail canvas" minmax(0, 1fr) / 118px minmax(0, 1fr);
  font-size: 10px;
}

.flow-bar {
  display: flex;
  grid-area: bar;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--slate);
}

.flow-bar b {
  margin-right: 4px;
  color: var(--navy);
}

.flow-bar .glyph {
  width: 9px;
  height: 9px;
}

.flow-bar .ui-ghost {
  margin-left: auto;
}

.flow-bar .ui-button {
  height: 22px;
  padding: 0 11px;
  font-size: 9.5px;
}

.flow-rail {
  display: flex;
  grid-area: rail;
  flex-direction: column;
  gap: 4px;
  padding: 11px 9px;
  border-right: 1px solid var(--fog);
  font-weight: 500;
}

.flow-rail b {
  padding: 0 2px 4px;
  color: var(--slate);
  font-size: 8.5px;
  font-weight: 500;
}

.flow-rail span {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 25px;
  padding: 0 8px;
  border: 1px solid var(--fog);
  border-radius: 5px;
  background: var(--paper);
  font-size: 9.5px;
}

.flow-rail span::before {
  content: "";
  width: 5px;
  height: 9px;
  background: radial-gradient(circle, var(--tick) 1px, transparent 1.2px) 0 0 / 3px 3px;
}

.flow-rail .is-new {
  border-color: var(--teal);
  background: var(--teal-tint);
}

.flow-canvas {
  position: relative;
  grid-area: canvas;
  overflow: hidden;
  background: radial-gradient(circle, var(--line) 0.8px, transparent 1.1px) 5px 5px / 13px 13px var(--mist);
}

.flow-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
}

.flow-line-old {
  stroke: var(--tick);
  stroke-dasharray: 0.02 0.025;
  opacity: 0;
}

.flow-line-new {
  stroke: var(--teal);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.node {
  position: absolute;
  left: calc(16px + var(--col) * 132px);
  top: calc(40px + var(--row) * 126px);
  display: grid;
  align-content: center;
  width: 104px;
  height: 46px;
  padding: 0 10px 0 13px;
  border-radius: 7px;
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--navy), 0 0 0 1px rgba(2, 48, 71, 0.07), 0 3px 8px -3px rgba(2, 48, 71, 0.22);
  line-height: 1.3;
}

.node b {
  font-size: 10px;
}

.node i {
  color: var(--slate);
  font-size: 8.5px;
}

.node--new {
  z-index: 2;
  box-shadow: inset 3px 0 0 var(--teal), 0 0 0 1.5px var(--teal), 0 6px 14px -5px rgba(2, 48, 71, 0.3);
}

.flow-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 22px;
  padding: 0 10px;
  border-radius: 99px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(2, 48, 71, 0.07), 0 2px 6px -2px rgba(2, 48, 71, 0.2);
  font-size: 9px;
  font-weight: 500;
}

.flow-zoom::before,
.flow-zoom::after {
  content: "";
  width: 7px;
  height: 7px;
  background: linear-gradient(var(--navy), var(--navy)) center / 100% 1.4px no-repeat;
}

.flow-zoom::after {
  background: linear-gradient(var(--navy), var(--navy)) center / 100% 1.4px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 1.4px 100% no-repeat;
}

.flow-note {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 11px 0 8px;
  border-radius: 99px;
  background: var(--navy);
  color: var(--paper);
  font-size: 9px;
  font-weight: 500;
}

.flow-note .glyph {
  color: var(--amber);
}

.js .is-on .node--new {
  animation: node-new 8s var(--ease-out) 0.9s infinite both;
}

.js .is-on .pointer--flow {
  animation: pointer-flow 8s var(--ease-out) 0.9s infinite both;
}

.js .is-on .flow-line-new {
  animation: line-new 8s var(--ease-out) 0.9s infinite both;
}

.js .is-on .flow-line-old {
  animation: line-old 8s linear 0.9s infinite both;
}

.js .is-on .flow-note {
  animation: flow-note 8s var(--ease-out) 0.9s infinite both;
}

@keyframes node-new {
  0%,
  3% {
    opacity: 0;
    transform: translate(-389px, -58px) scale(0.86);
  }
  6% {
    opacity: 1;
    transform: translate(-389px, -58px) scale(0.86);
  }
  18% {
    opacity: 1;
    transform: translate(0, -6px) scale(1.03);
  }
  22%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes pointer-flow {
  0% {
    opacity: 0;
    transform: translate(60px, 190px);
  }
  3%,
  6% {
    opacity: 1;
    transform: translate(64px, 140px);
  }
  18%,
  22% {
    opacity: 1;
    transform: translate(452px, 226px);
  }
  32% {
    opacity: 1;
    transform: translate(476px, 268px);
  }
  38%,
  100% {
    opacity: 0;
    transform: translate(480px, 280px);
  }
}

@keyframes flow-note {
  0%,
  28% {
    opacity: 0;
    transform: translateY(8px);
  }
  34%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes line-new {
  0%,
  20% {
    stroke-dashoffset: 1;
  }
  30%,
  90% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes line-old {
  0%,
  18% {
    opacity: 1;
  }
  24%,
  94% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.pipe {
  display: flex;
  flex-direction: column;
  background: var(--mist);
  font-size: 10px;
}

.pipe-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--slate);
  font-weight: 500;
}

.pipe-bar > span {
  display: flex;
  align-items: center;
  height: 100%;
}

.pipe-bar .is-on {
  box-shadow: inset 0 -2px 0 var(--teal);
  color: var(--navy);
}

.pipe-bar .pipe-find {
  gap: 6px;
  width: 112px;
  height: 22px;
  margin-left: auto;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--mist);
  font-size: 9px;
  font-weight: 400;
}

.pipe-bar .ui-button {
  gap: 5px;
  height: 22px;
  margin-left: -6px;
  padding: 0 9px;
  font-size: 9.5px;
}

.pipe-board {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 11px 12px;
}

.pipe-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pipe-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 2px;
  border-bottom: 2px solid var(--navy);
}

.pipe-head b {
  font-size: 10.5px;
}

.pipe-head > span {
  padding: 0 6px;
  border-radius: 99px;
  background: var(--fog);
  font-size: 8.5px;
  font-weight: 500;
}

.pipe-head em {
  margin-left: auto;
  color: var(--slate);
  font-size: 9px;
}

.pipe-col--won .pipe-head {
  border-bottom-color: var(--orange);
}

.lead {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 7px;
  height: 44px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(2, 48, 71, 0.1), 0 0 0 1px rgba(2, 48, 71, 0.04);
  line-height: 1.25;
  white-space: nowrap;
}

.lead .avatar {
  grid-row: 1 / 3;
}

.lead b {
  align-self: end;
  font-size: 10px;
}

.lead span {
  grid-area: 2 / 2;
  align-self: start;
  overflow: hidden;
  color: var(--slate);
  font-size: 8.5px;
}

.lead em {
  grid-area: 1 / 3 / 3 / 4;
  font-size: 9.5px;
  font-weight: 500;
}

.lead--move {
  position: relative;
  z-index: 2;
  box-shadow: inset 3px 0 0 var(--orange), 0 1px 2px rgba(2, 48, 71, 0.1);
  transform: translate(166.67px, 50px);
}

.lead--rise {
  transform: translateY(-50px);
}

.js .is-on .lead--move {
  animation: lead-move 8s var(--ease-inout) 1s infinite both;
}

.js .is-on .lead--rise {
  animation: lead-rise 8s var(--ease-inout) 1s infinite both;
}

.pointer--lead {
  width: 16px;
  height: 16px;
  margin: -2px 0 0 -4px;
  border-radius: 50%;
  background: rgba(33, 158, 188, 0.26);
  box-shadow: inset 0 0 0 1px rgba(33, 158, 188, 0.7);
}

.js .is-on .pointer--lead {
  animation: pointer-lead 8s var(--ease-inout) 1s infinite both;
}

.js .is-on .pipe .swap > i:first-child {
  animation: swap-out 8s steps(1) 1.6s infinite both;
}

.js .is-on .pipe .swap > i:last-child {
  animation: swap-in 8s steps(1) 1.6s infinite both;
}

@keyframes lead-move {
  0%,
  14% {
    box-shadow: 0 1px 2px rgba(2, 48, 71, 0.1), 0 0 0 1px rgba(2, 48, 71, 0.04);
    transform: none;
  }
  20% {
    box-shadow: inset 3px 0 0 var(--orange), 0 14px 22px -10px rgba(2, 48, 71, 0.45);
    transform: translate(2px, -5px) rotate(1.5deg);
  }
  36% {
    box-shadow: inset 3px 0 0 var(--orange), 0 14px 22px -10px rgba(2, 48, 71, 0.45);
    transform: translate(166.67px, 44px) rotate(1.5deg);
  }
  41%,
  94% {
    box-shadow: inset 3px 0 0 var(--orange), 0 1px 2px rgba(2, 48, 71, 0.1);
    transform: translate(166.67px, 50px);
  }
  100% {
    box-shadow: 0 1px 2px rgba(2, 48, 71, 0.1), 0 0 0 1px rgba(2, 48, 71, 0.04);
    transform: none;
  }
}

@keyframes lead-rise {
  0%,
  28%,
  100% {
    transform: none;
  }
  40%,
  94% {
    transform: translateY(-50px);
  }
}

@keyframes pointer-lead {
  0%,
  11% {
    opacity: 0;
    transform: translate(292px, 101px) scale(1.7);
  }
  14% {
    opacity: 1;
    transform: translate(292px, 101px);
  }
  20% {
    opacity: 1;
    transform: translate(294px, 96px);
  }
  36%,
  41% {
    opacity: 1;
    transform: translate(459px, 145px);
  }
  46%,
  100% {
    opacity: 0;
    transform: translate(459px, 145px) scale(1.7);
  }
}

.pipe .swap {
  justify-items: end;
}

.pipe-goal {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 30px;
  margin: 0 12px;
  border-top: 1px solid var(--line);
  color: var(--slate);
  font-size: 9px;
}

.pipe-goal b {
  color: var(--navy);
  font-weight: 500;
}

.pipe-goal .bar {
  flex: 1;
}

.pipe-goal .bar i {
  background: var(--teal);
  transform: scaleX(0.42);
}

.js .is-on .pipe-goal .bar i {
  animation: pipe-goal 8s var(--ease-out) 1.6s infinite both;
}

@keyframes pipe-goal {
  0%,
  29% {
    transform: scaleX(0.18);
  }
  36%,
  100% {
    transform: scaleX(0.42);
  }
}

.bar {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--fog);
}

.bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform-origin: 0 50%;
}

.rack {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
}

.rack i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--fog);
}

.rack .is-target {
  background: var(--teal);
}

.rack .is-next {
  background: var(--orange);
}

.task {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 12px;
  border-radius: 8px;
  font-size: 10px;
}

.task-top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  margin: 0 -12px;
  padding: 0 12px;
  background: var(--navy);
  color: var(--paper);
  font-size: 9px;
  font-weight: 500;
}

.task-top span:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
}

.task-top span:last-child::after {
  content: "";
  width: 17px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--paper) 72%, transparent 72%);
  box-shadow: 0 0 0 1px var(--on-navy);
}

.task-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 5px 0 7px;
  border-bottom: 1px solid var(--fog);
}

.task-head b {
  font-size: 12.5px;
}

.task-head span {
  color: var(--slate);
  font-size: 9px;
}

.task-code {
  margin-top: -3px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--mist);
  line-height: 1.3;
}

.task-item b {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
}

.task-item span {
  color: var(--slate);
  font-size: 9px;
}

.task-item .tile {
  background: var(--paper);
}

.task-code-strip {
  position: relative;
  height: 34px;
  border: 1px solid var(--fog);
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, var(--navy) 0 2px, transparent 2px 4px, var(--navy) 4px 5px, transparent 5px 9px, var(--navy) 9px 12px, transparent 12px 14px, var(--navy) 14px 15px, transparent 15px 17px) center / 136px 20px no-repeat;
}

.task-code-strip::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--orange);
  box-shadow: 0 0 8px 1px rgba(251, 133, 1, 0.6);
}

.task-qty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.task .rack {
  margin-top: 2px;
}

.task-next {
  display: flex;
  justify-content: space-between;
  padding-top: 7px;
  border-top: 1px solid var(--fog);
  font-weight: 500;
}

.task .ui-button {
  height: 36px;
  margin-top: auto;
  font-size: 12px;
}

.js .is-on .task-code-strip::after {
  animation: task-scan 3s var(--ease-inout) infinite;
}

@keyframes task-scan {
  0%,
  100% {
    transform: translateY(-9px);
  }
  50% {
    transform: translateY(9px);
  }
}

.js .is-on .scanner i {
  animation: scanner 1.6s var(--ease-inout) infinite alternate;
}

@keyframes scanner {
  from {
    transform: translateX(-35%) scaleX(0.3);
  }
  to {
    transform: translateX(35%) scaleX(0.3);
  }
}

.js .is-on .task .bar i {
  animation: bar-fill 9s steps(1) 1s infinite both;
}

@keyframes bar-fill {
  0% {
    transform: scaleX(0.6);
  }
  30% {
    transform: scaleX(0.8);
  }
  60%,
  100% {
    transform: scaleX(1);
  }
}

.js .is-on .rack .is-target {
  animation: rack-target 9s steps(1) 1s infinite both;
}

.js .is-on .rack .is-next {
  animation: rack-next 9s steps(1) 1s infinite both;
}

@keyframes rack-target {
  0% {
    background: var(--orange);
  }
  60%,
  100% {
    background: var(--teal);
  }
}

@keyframes rack-next {
  0% {
    background: var(--fog);
  }
  60%,
  100% {
    background: var(--orange);
  }
}

.desk {
  display: grid;
  grid-template: "title title" 24px "menu menu" 18px "tools tools" 30px "side grid" minmax(0, 1fr) "status status" 18px / 112px minmax(0, 1fr);
  font-size: 10px;
}

.desk-menu {
  display: flex;
  grid-area: menu;
  align-items: center;
  gap: 14px;
  padding: 0 11px;
  border-bottom: 1px solid var(--fog);
  color: var(--slate);
  font-size: 9px;
}

.desk-tools {
  display: flex;
  grid-area: tools;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--mist);
}

.desk-tool {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 500;
}

.desk-tool--main {
  margin-right: 5px;
  background: var(--navy);
  color: var(--paper);
}

.desk-find {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 128px;
  height: 22px;
  margin-left: auto;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--slate);
  font-size: 9px;
}

.desk-side {
  display: flex;
  grid-area: side;
  flex-direction: column;
  gap: 1px;
  padding: 10px 7px;
  border-right: 1px solid var(--fog);
  background: var(--mist);
  font-weight: 500;
}

.desk-side b {
  padding: 0 7px 4px;
  color: var(--slate);
  font-size: 8.5px;
  font-weight: 500;
}

.desk-side b:not(:first-child) {
  margin-top: 10px;
}

.desk-side span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 21px;
  padding: 0 7px;
  border-radius: 4px;
  color: var(--slate);
}

.desk-side .is-on {
  background: var(--paper);
  box-shadow: inset 2px 0 0 var(--teal), 0 1px 2px rgba(2, 48, 71, 0.1);
  color: var(--navy);
}

.desk-side i {
  padding: 0 6px;
  border-radius: 99px;
  background: var(--teal-tint);
  font-size: 8.5px;
}

.desk-grid {
  position: relative;
  grid-area: grid;
  min-width: 0;
  padding: 5px 10px 0;
}

.desk-row {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(0, 0.8fr) 44px 86px;
  align-items: center;
  gap: 8px;
  height: 29px;
  padding: 0 7px;
  border-bottom: 1px solid var(--fog);
}

.desk-row--head {
  height: 24px;
  border-bottom-color: var(--line);
  color: var(--slate);
  font-size: 8.5px;
  font-weight: 500;
}

.desk-row--head span:first-child::after {
  content: "";
  display: inline-block;
  margin: 0 0 1px 5px;
  border: 3px solid transparent;
  border-top: 0;
  border-bottom: 4px solid var(--slate);
}

.desk-cursor {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 30px;
  height: 28px;
  border-radius: 4px;
  background: var(--teal-tint);
  box-shadow: inset 2px 0 0 var(--teal);
  transform: translateY(29px);
}

.desk-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 7px;
  color: var(--slate);
  font-size: 8.5px;
}

.desk-pager span:first-child {
  margin-right: auto;
}

.desk-pager .glyph {
  width: 10px;
  height: 10px;
  color: var(--navy);
}

.desk-status {
  display: flex;
  grid-area: status;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  border-top: 1px solid var(--line);
  background: var(--mist);
  color: var(--slate);
  font-size: 8.5px;
}

.desk-status span:first-child {
  margin-right: auto;
}

.desk-live {
  display: flex;
  align-items: center;
  gap: 5px;
}

.desk-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.js .is-on .desk-cursor {
  animation: desk-cursor 10s var(--ease-inout) 1.2s infinite;
}

@keyframes desk-cursor {
  0%,
  16% {
    transform: translateY(29px);
  }
  20%,
  36% {
    transform: translateY(58px);
  }
  40%,
  56% {
    transform: translateY(87px);
  }
  60%,
  76% {
    transform: translateY(116px);
  }
  80%,
  96% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(29px);
  }
}

.desk .win-bar {
  grid-area: title;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 0;
  font-size: 9.5px;
}

.memo {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 12px;
  font-size: 10px;
}

.memo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 11px;
  border-bottom: 1.5px solid var(--navy);
  color: var(--slate);
  font-size: 9px;
  font-weight: 500;
}

.memo-head img {
  width: 63px;
  height: 16px;
}

.memo .ui-title {
  margin-top: 15px;
  font-size: 18px;
}

.memo-meta {
  margin-top: 3px;
  color: var(--slate);
  font-size: 9px;
}

.memo-list {
  display: grid;
  margin-top: 11px;
  border-bottom: 1px solid var(--fog);
  counter-reset: memo;
}

.memo-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--fog);
  counter-increment: memo;
}

.memo-list li::before {
  content: counter(memo);
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--paper);
  font-size: 9px;
  font-weight: 500;
}

.memo-list li:first-child::before {
  background: var(--amber);
  color: var(--navy);
}

.memo-list b {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
}

.memo-chart {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 16px 2px 20px 18px;
  border-bottom: 1.5px solid var(--navy);
  border-left: 1.5px solid var(--navy);
  background: linear-gradient(var(--fog), var(--fog)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--fog), var(--fog)) 0 50% / 100% 1px no-repeat;
}

.memo-chart span {
  position: absolute;
  color: var(--slate);
  font-size: 8.5px;
  font-weight: 500;
}

.memo-chart .memo-y {
  left: -17px;
  top: 0;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

.memo-chart .memo-x {
  right: 0;
  bottom: -16px;
}

.memo-chart .memo-win {
  left: 8px;
  top: 6px;
  color: var(--teal-ink);
}

.memo-chart i {
  position: absolute;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 3px var(--paper);
  color: var(--paper);
  font-size: 9.5px;
  font-weight: 500;
}

.memo-chart i:nth-of-type(1) {
  left: 22%;
  top: 34%;
  background: var(--amber);
  color: var(--navy);
}

.memo-chart i:nth-of-type(2) {
  left: 60%;
  top: 40%;
}

.memo-chart i:nth-of-type(3) {
  left: 80%;
  top: 30%;
}

.memo-foot {
  display: flex;
  justify-content: space-between;
  color: var(--slate);
  font-size: 8.5px;
}

.js .is-on .memo-list li,
.js .is-on .memo-chart i {
  animation: note-in 9s var(--ease-out) 0.7s infinite both;
}

.js .is-on .memo-list li:nth-child(2),
.js .is-on .memo-chart i:nth-of-type(2) {
  animation-delay: 1.3s;
}

.js .is-on .memo-list li:nth-child(3),
.js .is-on .memo-chart i:nth-of-type(3) {
  animation-delay: 1.9s;
}

@keyframes note-in {
  0%,
  3% {
    opacity: 0;
  }
  10%,
  100% {
    opacity: 1;
  }
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 16px 12px;
  font-size: 10px;
}

.plan-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fog);
}

.plan-bar .crumb {
  font-size: 10px;
}

.plan-bar .ui-ghost {
  margin-left: auto;
}

.plan .tile {
  width: 24px;
  height: 24px;
}

.plan-head,
.plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: center;
}

.plan-head {
  color: var(--slate);
  font-size: 9px;
  font-weight: 500;
}

.plan-head span:last-child {
  grid-column: 3;
}

.plan-old,
.plan-new {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 500;
}

.plan-old {
  border: 1px dashed var(--line);
  background: var(--mist);
  color: var(--slate);
}

.plan-new {
  background: var(--navy);
  box-shadow: inset 3px 0 0 var(--amber), 0 6px 14px -8px rgba(2, 48, 71, 0.6);
  color: var(--paper);
}

.plan-new .tile {
  background: rgba(255, 255, 255, 0.12);
  color: var(--amber);
}

.plan-link {
  position: relative;
  height: 2px;
  margin: 0 9px 0 7px;
  background: var(--navy);
  transform-origin: 0 50%;
}

.plan-link::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  border: 4px solid transparent;
  border-right: 0;
  border-left: 6px solid var(--navy);
}

.plan-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: auto;
  counter-reset: step;
  font-size: 9px;
  font-weight: 500;
}

.plan-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 11px;
  counter-increment: step;
}

.plan-steps li::before,
.plan-steps li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border-radius: 99px;
  background: var(--fog);
}

.plan-steps li::after {
  background: var(--amber);
  transform-origin: 0 50%;
}

.plan-steps li:last-child::after {
  transform: scaleX(0.35);
}

.plan-steps span {
  color: var(--slate);
}

.plan-steps span::before {
  content: counter(step);
  margin-right: 5px;
  color: var(--navy);
  font-weight: 600;
}

.js .is-on .plan-row .plan-new {
  animation: shift-new 9s var(--ease-out) 0.8s infinite both;
}

.js .is-on .plan-row .plan-link {
  animation: shift-link 9s var(--ease-out) 0.8s infinite both;
}

.js .is-on .plan-row:nth-of-type(4) .plan-new,
.js .is-on .plan-row:nth-of-type(4) .plan-link {
  animation-delay: 1.7s;
}

.js .is-on .plan-row:nth-of-type(5) .plan-new,
.js .is-on .plan-row:nth-of-type(5) .plan-link {
  animation-delay: 2.6s;
}

.js .is-on .plan-row:nth-of-type(6) .plan-new,
.js .is-on .plan-row:nth-of-type(6) .plan-link {
  animation-delay: 3.5s;
}

@keyframes shift-new {
  0%,
  8% {
    opacity: 0.18;
  }
  16%,
  100% {
    opacity: 1;
  }
}

@keyframes shift-link {
  0%,
  4% {
    transform: scaleX(0);
  }
  12%,
  100% {
    transform: scaleX(1);
  }
}

.js .is-on .swap > i:first-child {
  animation: swap-out 7s steps(1) 1.2s infinite both;
}

.js .is-on .swap > i:last-child {
  animation: swap-in 7s steps(1) 1.2s infinite both;
}

@keyframes swap-out {
  0% {
    opacity: 1;
  }
  30%,
  100% {
    opacity: 0;
  }
}

@keyframes swap-in {
  0% {
    opacity: 0;
  }
  30%,
  100% {
    opacity: 1;
  }
}

.js .is-on .swap--three > i:nth-child(1) {
  animation: swap-first 9s steps(1) 1s infinite both;
}

.js .is-on .swap--three > i:nth-child(2) {
  animation: swap-second 9s steps(1) 1s infinite both;
}

.js .is-on .swap--three > i:nth-child(3) {
  animation: swap-third 9s steps(1) 1s infinite both;
}

@keyframes swap-first {
  0% {
    opacity: 1;
  }
  30%,
  100% {
    opacity: 0;
  }
}

@keyframes swap-second {
  0%,
  60%,
  100% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
}

@keyframes swap-third {
  0%,
  30% {
    opacity: 0;
  }
  60%,
  100% {
    opacity: 1;
  }
}

.js .is-on .caret {
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

@media (max-width: 899px) {
  .surface {
    --boost: 1.08;
  }

  .surface--phone,
  .surface--handheld {
    --boost: 1.06;
  }

  .stage[data-layout="stacked"] .surface--window,
  .stage[data-layout="stacked"] .surface--tablet,
  .stage[data-layout="stacked"] .surface--till,
  .stage[data-layout="stacked"] .surface--monitor,
  .stage[data-layout="stacked"] .surface--laptop,
  .stage[data-layout="stacked"] .surface--note {
    --dx: -8;
  }

  .stage[data-layout="stacked"] .surface--hub {
    --fit: calc(3.6 / (var(--un) * var(--boost)));
    --edge: min(250px, calc((var(--room) - 6px) * var(--fit)));
    --store: min(-128px, calc(var(--dock) * var(--fit) - 84px));
  }

  .stage[data-layout="stacked"] .port--market {
    left: calc(var(--edge) - 40px);
    grid-template-columns: minmax(0, 1fr);
    width: 80px;
    margin-left: -40px;
    padding: 0 6px;
  }

  .stage[data-layout="stacked"] .port--market .tile {
    display: none;
  }

  .stage[data-layout="stacked"] .port--store {
    left: var(--store);
    top: 222px;
  }

  .stage[data-layout="stacked"] .wire--store {
    --len: calc(233.4px - var(--r));
  }

  .stage[data-layout="stacked"] .wire--market {
    --len: max(0px, calc(var(--edge) - 78.6px - var(--r)));
  }

  @supports (width: hypot(1px, 1px)) {
    .stage[data-layout="stacked"] .wire--store {
      --len: calc(hypot(var(--store), 222px) - var(--r));
      transform: rotate(atan2(222px, var(--store))) translateX(var(--r)) scaleX(var(--grow));
    }
  }
}

.js .service:not(.is-active) .surface *,
.js .service:not(.is-active) .surface *::before,
.js .service:not(.is-active) .surface *::after {
  animation-play-state: paused;
}

.js .stage.is-past .service.is-on .surface,
.js .stage.is-past .service.is-on .surface::before,
.js .stage.is-past .service.is-on .surface::after,
.js .stage.is-past .service.is-on .surface *,
.js .stage.is-past .service.is-on .surface *::before,
.js .stage.is-past .service.is-on .surface *::after {
  animation-play-state: paused;
}