.demo-ocado-way [data-ocado-way],.demo-ocado-way [data-ocado-way] *{box-sizing: border-box}
.demo-ocado-way [data-ocado-way]{background: transparent;
  color: #fff;
  width: 100%;
  max-width: 1920px;
  margin: auto;
  padding: 0 0 80px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  isolation: isolate;
  overflow: hidden}
.demo-ocado-way [data-ocado-way] .graph{min-width: 0;
  align-self: end;
  padding-bottom: 0}
.demo-ocado-way [data-ocado-way] .side-stats{container: ocado-stats / inline-size;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-content: center;
  padding: 32px 24px;
  color: #fff;
  min-width: 0}
.demo-ocado-way [data-ocado-way] .side-stat{min-width: 0;
  container-type: inline-size}
.demo-ocado-way [data-ocado-way] .pwr-stat__number,.demo-ocado-way [data-ocado-way] .pwr-stat__suffix{font-family: 'Ocado Inter', Inter, sans-serif;
  font-size: 70px;
  font-weight: 200;
  letter-spacing: -2px;
  line-height: 1.15}
@media(min-width:1152px){
.demo-ocado-way [data-ocado-way] .graph{margin-top: calc(80px - var(--conventional-corner-y, 0px))}
.demo-ocado-way [data-ocado-way] .side-stats{margin-left: -80px}
}
.demo-ocado-way [data-ocado-way] .side-stat h3{margin: 0 0 40px;
  overflow-wrap: break-word}
@media(max-width:700px){
@container ocado-stats (width < 472px){
.demo-ocado-way [data-ocado-way] .side-stat h3{margin-bottom: 20px}
}
}
.demo-ocado-way [data-ocado-way] .side-stat p{margin: 0}
.demo-ocado-way [data-ocado-way] .side-stat>p:first-of-type{min-height: 1.5em}
.demo-ocado-way [data-ocado-way] .side-stat .side-value{margin: 12px 0;
  white-space: nowrap}
.demo-ocado-way [data-ocado-way] .side-stat .pwr-stat__number{font-size: 70px;
  line-height: 1.15;
  letter-spacing: -2px}
@media(max-width:1151px){
.demo-ocado-way [data-ocado-way]{grid-template-columns: minmax(0, 1fr);
    padding-top: 80px}
.demo-ocado-way [data-ocado-way] .side-stats{grid-row: 1;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    padding: 0 24px;
    gap: 32px}
.demo-ocado-way [data-ocado-way] .side-stat,.demo-ocado-way [data-ocado-way] .side-stat h3,.demo-ocado-way [data-ocado-way] .side-stat p,.demo-ocado-way [data-ocado-way] .side-stat .side-value{text-align: center}
}
.demo-ocado-way [data-ocado-way] .stage{pointer-events: none;
  position: relative;
  width: 100%;
  aspect-ratio: 4356/2961;
  overflow: visible;
  z-index: auto}
.demo-ocado-way [data-ocado-way] .grid,.demo-ocado-way [data-ocado-way] .scene{position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none}
.demo-ocado-way [data-ocado-way] .grid{opacity: .65;
  object-fit: contain}
.demo-ocado-way [data-ocado-way] .scene{overflow: visible;
  z-index: 3}
.demo-ocado-way [data-ocado-way] .grid{z-index: 0}
.demo-ocado-way [data-ocado-way] .plinth-dots{opacity: 0;
  transition: opacity 400ms ease-in-out}
.demo-ocado-way [data-ocado-way][data-state="ocado"][data-layers="visible"] .plinth-dots{opacity: 1;
  transition-duration: 550ms}
.demo-ocado-way [data-ocado-way] .layer-float,.demo-ocado-way [data-ocado-way] .tile-float{animation: ocado-way-idle var(--idle-duration) cubic-bezier(.25, .8, .25, 1) infinite;
  animation-delay: var(--idle-delay);
  animation-play-state: paused}
.demo-ocado-way [data-ocado-way][data-running="true"] .layer-float,.demo-ocado-way [data-ocado-way][data-running="true"] .tile-float{animation-play-state: running}
.demo-ocado-way [data-ocado-way] .layers{position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2}
.demo-ocado-way [data-ocado-way] .layer-visibility{opacity: 0;
  transition: opacity 400ms ease-in-out}
.demo-ocado-way [data-ocado-way] .layer-slide{transform: translateY(0);
  transition: transform 0s 420ms}
.demo-ocado-way [data-ocado-way][data-layers="visible"] .layer-visibility{opacity: 1;
  transition-duration: 550ms;
  transition-delay: var(--layer-delay)}
.demo-ocado-way [data-ocado-way][data-layers="visible"] .layer-slide{transform: translateY(var(--layer-drop));
  transition: transform 1550ms var(--edge-spring, cubic-bezier(.22, 1.35, .36, 1));
  transition-delay: var(--layer-delay)}
.demo-ocado-way [data-ocado-way] .plinth-blue{opacity: 0;
  transition: opacity 950ms ease-in-out}
.demo-ocado-way [data-ocado-way][data-state="ocado"] .plinth-blue{opacity: 1}
@keyframes ocado-way-idle{0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(var(--idle-lift, -3px))
  }}
.demo-ocado-way [data-ocado-way] .tile-hover{transform: translateY(var(--hover-offset, 0px));
  transition: transform 800ms var(--edge-spring, cubic-bezier(.22, 1.35, .36, 1));
  transition-delay: var(--hover-delay, 0ms)}
@media(prefers-reduced-motion:reduce){
.demo-ocado-way [data-ocado-way] .tile-hover{transition: none !important;
    transform: none !important}
}
.demo-ocado-way [data-ocado-way] .incoming{opacity: 0}
.demo-ocado-way [data-ocado-way] .tile{transform: translate(0, 0);
  transition: transform 1500ms var(--tile-spring, cubic-bezier(.22, 1.08, .36, 1))}
.demo-ocado-way [data-ocado-way] .outgoing{transition-delay: calc(850ms + var(--stagger))}
.demo-ocado-way [data-ocado-way] .edge{transition-timing-function: var(--edge-spring, cubic-bezier(.22, 1.35, .36, 1));
  transition-delay: 500ms}
.demo-ocado-way [data-ocado-way] .incoming{transform: translateY(820px);
  transition-timing-function: var(--fall-anticipation, cubic-bezier(.35, -.08, .36, 1));
  transition-delay: var(--stagger)}
.demo-ocado-way [data-ocado-way][data-state="ocado"] .outgoing{transform: translateY(820px);
  transition-timing-function: var(--fall-anticipation, cubic-bezier(.35, -.08, .36, 1));
  transition-delay: var(--stagger)}
.demo-ocado-way [data-ocado-way][data-state="ocado"] .edge-first{transform: translate(114.58435031px, 63.26249207px)}
.demo-ocado-way [data-ocado-way][data-state="ocado"] .edge-last{transform: translate(-114.58435031px, -63.26249207px)}
.demo-ocado-way [data-ocado-way][data-state="ocado"] .incoming{transform: translateY(0);
  transition-timing-function: var(--tile-spring, cubic-bezier(.22, 1.08, .36, 1));
  transition-delay: calc(850ms + var(--stagger))}
@supports (transition-timing-function:linear(0, 1)){
.demo-ocado-way [data-ocado-way]{--fall-anticipation: linear(0 0%, -.003 5%, -.008 10%, -.010 14%, -.008 18%, 0 23%, .035 29%, .12 37%, .28 46%, .49 56%, .70 66%, .86 76%, .955 86%, .99 94%, 1 100%);
    --tile-spring: linear(0, .010505, .03893, .08109, .133363, .192654, .256347, .322266, .388628, .453999, .517256, .577543, .634237, .686916, .735321, .779332, .818945, .854242, .88538, .912564, .936042, .956085, .972979, .987016, .998488, 1.007679, 1.014862, 1.020298, 1.024227, 1.026874, 1.028443, 1.02912, 1.029072, 1.028444, 1.027366, 1.025952, 1.024297, 1.022484, 1.02058, 1.018644, 1.01672, 1.014845, 1.013047, 1.011347, 1.00976, 1.008295, 1.006957, 1.005748, 1.004666, 1.003708, 1.002868, 1.002139, 1.001513, 1.000983, 1.00054, 1.000175, .99988, .999647, .999468, .999336, .999244, .999186, .999156, .999149, .999161, .999187, .999225, .99927, .999322, .999376, .999432, .999489, .999544, .999598, .999649, .999696, .999741, .999781, .999818, .999851, 1);
    --edge-spring: linear(0, .010969, .04126, .087125, .145086, .211966, .284907, .361381, .43919, .516463, .591637, .663448, .730904, .793266, .850024, .900866, .94566, .98442, 1.01729, 1.044514, 1.066419, 1.083391, 1.095861, 1.104285, 1.109134, 1.110878, 1.109979, 1.10688, 1.101999, 1.095729, 1.088424, 1.080407, 1.071963, 1.063341, 1.054752, 1.046376, 1.038356, 1.030805, 1.02381, 1.017431, 1.011704, 1.006647, 1.00226, .99853, .995429, .992924, .990972, .989526, .988535, .987947, .987711, .987775, .988089, .988607, .989284, .990081, .990961, .991893, .992848, .993802, .994736, .995631, .996476, .99726, .997977, .998622, .999193, .999689, 1.000112, 1.000465, 1.000751, 1.000976, 1.001143, 1.00126, 1.00133, 1.001361, 1.001358, 1.001327, 1.001272, 1.001199, 1)}
}
.demo-ocado-way [data-ocado-way] .mode-menu{transform: translateY(calc(-1 * var(--controls-lift, 32.5px)));
  position: relative;
  z-index: 20;
  display: flex;
  gap: 5px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0 auto calc(-1 * var(--controls-lift, 32.5px));
  padding: 2px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 30px;
  isolation: isolate;
  background: transparent}
.demo-ocado-way [data-ocado-way] .mode-hover,.demo-ocado-way [data-ocado-way] .mode-selection{position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 44px;
  border-radius: 30px;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
  transition: transform 900ms cubic-bezier(.22, 1, .36, 1)}
.demo-ocado-way [data-ocado-way] .mode-hover{z-index: 0;
  background: rgb(255 255 255 / 18%);
  transition: transform 650ms cubic-bezier(.22, 1, .36, 1)}
.demo-ocado-way [data-ocado-way] .mode-selection{z-index: 1;
  background: #0f68ab}
.demo-ocado-way [data-ocado-way] .mode-menu:not([data-ready]) .mode-selection,.demo-ocado-way [data-ocado-way] .mode-menu:not([data-ready]) .mode-hover{visibility: hidden}
.demo-ocado-way [data-ocado-way] .mode-option{position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 12px 24px;
  border: 0;
  border-radius: 30px;
  background: transparent;
  color: #fff;
  font: 400 16px/20px Inter, system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease}
.demo-ocado-way [data-ocado-way] .mode-option:focus-visible{outline: 2px solid #0f68ab;
  outline-offset: 3px}
.demo-ocado-way [data-ocado-way] .mode-menu:not([data-ready]) .mode-option[aria-pressed="true"]{background: #0f68ab}
@media(max-width:700px){
.demo-ocado-way [data-ocado-way]{padding-top: 60px;
    padding-bottom: 60px}
.demo-ocado-way [data-ocado-way] .graph{padding-top: 24px}
.demo-ocado-way [data-ocado-way] .mode-menu{margin: 29px 20px 0;
    width: calc(100% - 40px);
    max-width: none;
    justify-content: center}
.demo-ocado-way [data-ocado-way] .mode-option{padding: 12px 10px;
    font-size: 12px;
    line-height: 16px;
    white-space: normal}
}
@media(prefers-reduced-motion:reduce){
.demo-ocado-way [data-ocado-way] .tile-float,.demo-ocado-way [data-ocado-way] .layer-float{animation: none !important}
}
.demo-ocado-way [data-ocado-way] .hotspots{position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms, visibility 400ms}
.demo-ocado-way [data-ocado-way][data-state="ocado"][data-layers="visible"] .hotspots{opacity: 1;
  visibility: visible}
.demo-ocado-way [data-ocado-way] .hotspot{position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  border-radius: 50%}
.demo-ocado-way [data-ocado-way] .point-circle{width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #00A3E0;
  position: relative;
  isolation: isolate}
.demo-ocado-way [data-ocado-way] .point-circle:before{content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 2px solid white}
.demo-ocado-way [data-ocado-way] .point-circle:after{content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 2px solid #00A3E0;
  animation: ocado-way-pulse 2s infinite;
  z-index: -1}
.demo-ocado-way [data-ocado-way] .point-circle:after{animation-play-state: paused}
.demo-ocado-way [data-ocado-way][data-running="true"] .point-circle:after{animation-play-state: running}
@keyframes ocado-way-pulse{from {
    transform: scale(1);
    opacity: 1
  }

  to {
    transform: scale(2);
    opacity: 0
  }}
.demo-ocado-way [data-ocado-way] .hotspot:focus-visible{outline: 2px solid #8bd6ff;
  outline-offset: 2px}
.demo-ocado-way [data-ocado-way] .hotspot-card{position: absolute;
  z-index: 8;
  width: max-content;
  max-width: calc(100% - 24px);
  border-radius: 20px;
  background: #fff;
  color: #172b38;
  box-shadow: 0 12px 36px #0005;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 240ms ease, transform 300ms ease, visibility 240ms}
.demo-ocado-way [data-ocado-way] .hotspot-card[data-open="true"]{opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto}
.demo-ocado-way [data-ocado-way] .hotspot-copy{padding: 24px;
  text-align: left}
.demo-ocado-way [data-ocado-way] .hotspot-copy h3{margin: 0 0 8px}
.demo-ocado-way [data-ocado-way] .hotspot-copy .stat-value{display: block;
  white-space: nowrap;
  margin: 0 0 8px}
.demo-ocado-way [data-ocado-way] .hotspot-copy p{margin: 0;
  white-space: pre-line}
.demo-ocado-way [data-ocado-way] .hotspot-copy .pwr-stat__title{display: block;
  position: static;
  width: auto;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  line-height: 1.5}
.demo-ocado-way [data-ocado-way] .hotspot-copy .pwr-stat__number{display: inline-block;
  line-height: 1.15}
@media(prefers-reduced-motion:reduce){
.demo-ocado-way [data-ocado-way] .point-circle:after{animation: none}
}
.demo-ocado-way [data-ocado-way] .hotspot-mobile-close{display: none}
@media(max-width:700px){
.demo-ocado-way [data-ocado-way]{--controls-lift: 0px !important}
}
@media(max-width:1151px), (hover:none){
.demo-ocado-way [data-ocado-way] .hotspot-card{left: 50% !important;
    top: 50% !important;
    width: 320px !important;
    max-width: calc(100% - 32px);
    height: auto;
    min-height: 0;
    transform: translate(-50%, -50%) translateY(10px)}
.demo-ocado-way [data-ocado-way] .hotspot-card[data-open="true"]{transform: translate(-50%, -50%)}
.demo-ocado-way [data-ocado-way] .hotspot-copy{padding: 32px 24px}
.demo-ocado-way [data-ocado-way] .hotspot-mobile-close{position: absolute;
    right: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid #0003;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font: 400 22px/1 Arial;
    cursor: pointer;
    padding: 0;
    z-index: 2}
.demo-ocado-way [data-ocado-way] .hotspot-mobile-close:focus-visible{outline: 2px solid #0f68ab;
    outline-offset: 2px}
}
.demo-ocado-way [data-ocado-way] .hotspot{opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 0s 250ms}
.demo-ocado-way [data-ocado-way][data-state="ocado"][data-layers="visible"] .hotspot{opacity: 1;
  visibility: visible;
  transition: opacity 550ms ease var(--reveal-delay, 0ms), visibility 0s var(--reveal-delay, 0ms)}
@media(prefers-reduced-motion:reduce){
.demo-ocado-way [data-ocado-way] .hotspot{transition: none !important}
}
.demo-ocado-way .ocado-way .mode-option{font-family:var(--ff-btn,Inter,Arial,sans-serif);font-size:var(--fs-btn,14px);font-weight:var(--fw-btn,400);line-height:1.6;letter-spacing:var(--ls-btn,0px);text-transform:var(--tt-link,none);}
@media(max-width:767px){
.demo-ocado-way .ocado-way .mode-option{font-size:var(--fs-btn-tablet,var(--fs-btn,14px));letter-spacing:var(--ls-btn-tablet,var(--ls-btn,0px))}
}
@media(max-width:575px){
.demo-ocado-way .ocado-way .mode-option{font-size:var(--fs-btn-mobile,var(--fs-btn-tablet,var(--fs-btn,14px)));letter-spacing:var(--ls-btn-mobile,var(--ls-btn-tablet,var(--ls-btn,0px)))}
}
.demo-ocado-way .ocado-way .mode-option{font-family:var(--ff-btn,Inter,Arial,sans-serif);font-size:var(--fs-btn,14px);font-weight:var(--fw-btn,400);line-height:1.6;letter-spacing:var(--ls-btn,0px);padding:13px 19px;min-height:44px;box-sizing:border-box}
.demo-ocado-way .ocado-way .mode-menu{border-color:rgb(255 255 255 / 30%)}
.demo-ocado-way{box-sizing:border-box;padding-block:80px 60px}
.demo-ocado-way .demo-reference-container{box-sizing:border-box;width:calc(100% - 40px);max-width:1200px;margin-inline:auto}
.demo-ocado-way .demo-reference-container [data-osp-graph].osp-layout{padding-block:0!important}
.demo-ocado-way .demo-reference-container .ocado-way{padding-top:0;padding-bottom:0}
@media(max-width:767px){
.demo-ocado-way{padding-block:60px}
.demo-ocado-way .demo-reference-container{width:calc(100% - 60px)}
}
@media(max-width:575px){
.demo-ocado-way .demo-reference-container{width:calc(100% - 40px)}
}
.demo-ocado-way{box-sizing:border-box;padding-block:80px 60px}
@media(max-width:767px){.demo-ocado-way{padding-block:60px}}

.demo-ocado-way .ocado-way .mode-option{font-family:var(--ff-btn,Inter,Arial,sans-serif);font-size:var(--fs-btn,14px);font-weight:var(--fw-btn,400);line-height:1.6;letter-spacing:var(--ls-btn,0px);text-transform:var(--tt-link,none);padding:13px 19px;min-height:44px;box-sizing:border-box}

.demo-ocado-way .ocado-way{overflow:visible;clip-path:none}

.demo-ocado-way [data-ocado-way] .grid-v2{opacity:1;overflow:hidden}

@media(min-width:1152px){
 .demo-ocado-way [data-ocado-way]{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
 .demo-ocado-way [data-ocado-way] .side-stats{grid-column:1;grid-row:1;margin-left:0;margin-right:-80px}
 .demo-ocado-way [data-ocado-way] .graph{grid-column:2;grid-row:1}
}
.demo-ocado-way [data-ocado-way] .layers{z-index:0}
.demo-ocado-way [data-ocado-way] .dots-scene{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.demo-ocado-way [data-ocado-way] .grid-v2{z-index:2}
.demo-ocado-way [data-ocado-way] .scene{z-index:3}
.demo-ocado-way [data-ocado-way] .layer-float{animation:none!important;transform:none}
.demo-ocado-way [data-ocado-way] .tile-glow{opacity:0;transition:opacity 350ms ease;pointer-events:none}
.demo-ocado-way [data-ocado-way] .tile-hit{fill:transparent;pointer-events:none}
@media(min-width:1152px) and (hover:hover){
 .demo-ocado-way [data-ocado-way][data-state="ocado"] .scene .tile:is(.edge,.incoming) .tile-hit,
 .demo-ocado-way [data-ocado-way][data-state="ocado"] .scene .tile:is(.edge,.incoming) .tile-object{pointer-events:all;cursor:pointer}
 .demo-ocado-way [data-ocado-way][data-state="ocado"] .scene .tile[data-hovered="true"] .tile-glow{opacity:1}
}
.demo-ocado-way [data-ocado-way] .side-stats{grid-template-columns:minmax(0,1fr);gap:60px}
.demo-ocado-way [data-ocado-way] .side-stat{display:grid;grid-template-columns:max-content max-content minmax(0,1fr);align-items:center;gap:20px 10px;container-type:normal;text-align:left}
.demo-ocado-way [data-ocado-way] .side-stat h3{grid-column:1/-1;margin:0;text-align:left}
.demo-ocado-way [data-ocado-way] .side-stat p{text-align:left;min-height:0}
.demo-ocado-way [data-ocado-way] .side-stat .side-value{margin:0;text-align:left}
.demo-ocado-way [data-ocado-way] .side-stat .pwr-stat__number{font-size:71px;font-weight:200;letter-spacing:-2.13px;line-height:1.15}
@media(min-width:701px) and (max-width:1151px){
 .demo-ocado-way [data-ocado-way] .side-stats{width:100%;max-width:548px;justify-self:center;padding:0 24px}
}
@media(max-width:700px){
 .demo-ocado-way [data-ocado-way] .side-stats{gap:40px;padding:0 24px}
 .demo-ocado-way [data-ocado-way] .side-stat{grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px;text-align:center}
 .demo-ocado-way [data-ocado-way] .side-stat h3{margin:0 0 8px;text-align:center}
 .demo-ocado-way [data-ocado-way] .side-stat p,.demo-ocado-way [data-ocado-way] .side-stat .side-value{text-align:center}
}

@media(min-width:701px) and (max-width:1151px){
 .demo-ocado-way [data-ocado-way] .side-stats{justify-self:start}
 .demo-ocado-way [data-ocado-way] .side-stat,
 .demo-ocado-way [data-ocado-way] .side-stat h3,
 .demo-ocado-way [data-ocado-way] .side-stat p,
 .demo-ocado-way [data-ocado-way] .side-stat .side-value{text-align:left}
}

@media(min-width:701px) and (max-width:1151px){
 .demo-ocado-way [data-ocado-way] .side-stats{
  width:100%;max-width:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:40px;padding:0 24px
 }
}

.demo-ocado-way .ocado-way .grid.grid-v2{filter:none;-webkit-mask-image:none;mask-image:none}
.demo-ocado-way [data-ocado-way] .blue-grid-reveal{stroke:#00A3E0;stroke-width:2;opacity:0;transition:opacity 400ms ease-in-out}
.demo-ocado-way [data-ocado-way][data-state="ocado"][data-layers="visible"] .blue-grid-reveal{opacity:1;transition-duration:550ms}
.demo-ocado-way [data-ocado-way] .osp-grid-effect{opacity:0;transition:opacity 400ms ease-in-out;pointer-events:none}
.demo-ocado-way [data-ocado-way][data-state="ocado"][data-layers="visible"] .osp-grid-effect[data-active="true"]{opacity:1}
.demo-ocado-way [data-ocado-way] .osp-grid-glow-lift{transform:translateY(0);transition:transform 400ms ease}
.demo-ocado-way [data-ocado-way] .osp-grid-effect[data-active="true"] .osp-grid-glow-lift{transform:translateY(-9px)}
@media(prefers-reduced-motion:reduce){
 .demo-ocado-way [data-ocado-way] .blue-grid-reveal,.demo-ocado-way [data-ocado-way] .osp-grid-effect,.demo-ocado-way [data-ocado-way] .osp-grid-glow-lift{transition:none}
}

.demo-ocado-way [data-ocado-way][data-state="ocado"][data-layers="visible"] .osp-grid-effect{opacity:1;transition-duration:550ms}

.demo-ocado-way [data-ocado-way][data-state="ocado"] .scene .tile-glow{opacity:1}
@media(min-width:1152px) and (hover:hover){
 .demo-ocado-way [data-ocado-way][data-state="ocado"] .scene:has(.tile[data-hovered="true"]) .tile:not([data-hovered="true"]) .tile-glow{opacity:0}
}

.demo-ocado-way{overflow-x:clip}
@media(prefers-reduced-motion:reduce){.demo-ocado-way [data-ocado-way] .stage{transition:none}}

.demo-ocado-way [data-ocado-way] .graph-space{position:relative;height:var(--conventional-stage-height,0px)}

@media(max-width:1151px){
 .demo-ocado-way [data-ocado-way] .graph{padding-top:0}
 .demo-ocado-way [data-ocado-way] .graph-space{height:var(--compact-stage-height,var(--conventional-stage-height,0px))}
 .demo-ocado-way [data-ocado-way] .mode-menu{transform:none;margin:0 auto}
}

.demo-ocado-way .demo-reference-container{box-sizing:border-box;width:auto;max-width:var(--lo-content-width,1200px);margin-inline:auto;padding-inline:0}
.demo-ocado-way [data-ocado-way] .side-stats{padding-inline:0}
@media(max-width:1200px){.demo-ocado-way .demo-reference-container{margin-inline:var(--sp-p-hor-desktop,20px)}}
@media(max-width:575px){.demo-ocado-way .demo-reference-container{margin-inline:var(--sp-p-hor-mobile,10px)}}
@media(min-width:1201px) and (max-width:1240px){.demo-ocado-way .demo-reference-container{max-width:calc(100% - 40px)}}
@media(prefers-reduced-motion:reduce){.demo-ocado-way [data-ocado-way] .scene .outgoing .tile-object{transition:none}}

.demo-ocado-way [data-ocado-way] .scene .outgoing .tile-object,
.demo-ocado-way [data-ocado-way][data-state="ocado"] .scene .outgoing .tile-object{filter:none;transition:none}

.demo-ocado-way [data-ocado-way] button:focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 6px #003b56}
.demo-ocado-way [data-ocado-way] .hotspot-mobile-close:focus-visible{outline-color:#003b56;box-shadow:none}

@media(prefers-reduced-motion:reduce){
 .demo-ocado-way [data-ocado-way] .stage,.demo-ocado-way [data-ocado-way] .tile,.demo-ocado-way [data-ocado-way] .tile-hover,.demo-ocado-way [data-ocado-way] .tile-glow,.demo-ocado-way [data-ocado-way] .plinth-blue,.demo-ocado-way [data-ocado-way] .plinth-dots,.demo-ocado-way [data-ocado-way] .layer-visibility,.demo-ocado-way [data-ocado-way] .layer-slide{transition:none!important}
}

@media(max-width:700px){
 .demo-ocado-way [data-ocado-way] .mode-menu{
  width:var(--mobile-menu-width,calc(100vw - 40px));
  max-width:none;
  margin:0 0 0 var(--mobile-menu-left,0px);
 }
 .demo-ocado-way [data-ocado-way] .mode-option{flex:1 1 0;min-width:0;padding-inline:10px;white-space:normal}
}

.demo-ocado-way [data-ocado-way] .graph-space>.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--render-stage-width, 100%);
  margin-left: 0;
  transform: translate(var(--fitted-stage-left, 0px), var(--fitted-stage-top, 0px));
  transition: none;
}

.demo-ocado-way [data-ocado-way] .scene .tile,
.demo-ocado-way [data-ocado-way] .scene .tile-object{filter:none!important}
.demo-ocado-way [data-ocado-way][data-state="conventional"] .incoming .tile-float,
.demo-ocado-way [data-ocado-way][data-state="ocado"] .outgoing .tile-float{animation-play-state:paused}
@media(max-width:700px){
 .demo-ocado-way [data-ocado-way] .tile:is(.outgoing,.incoming){transition-property:transform,opacity;transition-duration:1500ms,1500ms}
 .demo-ocado-way [data-ocado-way] .outgoing{opacity:1}
 .demo-ocado-way [data-ocado-way] .incoming{opacity:0}
 .demo-ocado-way [data-ocado-way][data-state="ocado"] .outgoing{opacity:0}
 .demo-ocado-way [data-ocado-way][data-state="ocado"] .incoming{opacity:1}
}
@media(prefers-reduced-motion:reduce){.demo-ocado-way [data-ocado-way] .tile:is(.outgoing,.incoming){transition:none!important}}

/* Reserve scene space even before initialization and keep controls in normal flow. */
@media(max-width:1151px){
 .demo-ocado-way [data-ocado-way]{row-gap:0}
 .demo-ocado-way [data-ocado-way] .side-stats{grid-row:1;grid-column:1;align-self:start;padding-bottom:0}
 .demo-ocado-way [data-ocado-way] .graph{grid-row:2;grid-column:1;align-self:start;margin-top:0;padding-top:0}
 .demo-ocado-way [data-ocado-way] .graph-space{display:block;box-sizing:content-box;height:var(--compact-stage-height,calc((100vw - 60px) * .5579 + 100px));min-height:1px}
 .demo-ocado-way [data-ocado-way] .mode-menu{position:relative;top:auto;bottom:auto;transform:none}
}
@media(max-width:700px){
 .demo-ocado-way [data-ocado-way] .graph-space{height:var(--compact-stage-height,calc((100vw - 40px) * .5579 + 100px))}
}

.demo-ocado-way [data-ocado-way] .graph-space>.stage{
 transform-origin:0 0;
 transform:translate3d(var(--fitted-stage-left,0px),var(--fitted-stage-top,0px),0) scale(var(--scene-scale,1));
 transition:none;
}
.demo-ocado-way [data-ocado-way][data-zoom-ready="true"] .graph-space>.stage{transition:transform 1500ms cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.demo-ocado-way [data-ocado-way][data-zoom-ready="true"] .graph-space>.stage{transition:none!important}}

@media(max-width:700px){
 .demo-ocado-way [data-ocado-way] .mode-option{flex:1 1 auto}
}

.demo-ocado-way [data-ocado-way] .layers{opacity:.67}