/* Native scrolling for the dumped homepage. WebGL warp is layered on top. */
@media (min-width: 1051px) {
  section._rail_1l93a_1._homeMediaRail_1a9j7_218,
  section._rail_1l93a_1._mediaRail_n2eeo_114 {
    --media-end-space: 0px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
    position: relative;
    top: -55px;
    height: var(--app-viewport-height) !important;
    min-height: 0 !important;
    max-height: var(--app-viewport-height) !important;
    -webkit-overflow-scrolling: touch;
    isolation: isolate;
  }

  section._rail_1l93a_1._homeMediaRail_1a9j7_218::-webkit-scrollbar,
  section._rail_1l93a_1._mediaRail_n2eeo_114::-webkit-scrollbar {
    display: none;
  }

  ._homeMediaRail_1a9j7_218 [data-overflow-rail-track],
  ._mediaRail_n2eeo_114 [data-overflow-rail-track] {
    transform: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Keep the first homepage paint stable while media and WebGL initialize. */
._page_1a9j7_1 [data-text-appear],
._page_1a9j7_1 ._homeMediaRail_1a9j7_218 [data-overflow-rail-track],
._page_1a9j7_1 ._homeMediaRail_1a9j7_218 [data-webgl-edge-warp] {
  animation: none !important;
}

.site-warp-host {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  height: 0;
  pointer-events: none;
}

.site-warp-layer {
  position: absolute;
  top: -8px;
  left: -96px;
  z-index: 2;
  display: block;
  width: calc(100% + 192px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.site-warp-layer[data-ready="true"] {
  opacity: 1;
}

/* Small, tactile portrait: the source image remains visible when WebGL is unavailable. */
.portrait-warp {
  width: 76px;
  height: 94px;
  position: fixed;
  z-index: 12;
  left: 18px;
  bottom: 34px;
  margin: 0;
  overflow: hidden;
  background: var(--color-media);
  cursor: crosshair;
}

.portrait-warp img,
.portrait-warp canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.portrait-warp img {
  object-fit: cover;
  object-position: center 20%;
}

.portrait-warp canvas {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease;
}

.portrait-warp[data-ready="true"] canvas {
  opacity: 1;
}

.portrait-warp[data-ready="true"] img {
  opacity: 0;
}

@media (max-width: 1050px) {
  .portrait-warp {
    width: 48px;
    height: 60px;
    position: absolute;
    z-index: 5;
    top: 16px;
    left: 20px;
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-warp { cursor: default; }
  .portrait-warp canvas { display: none; }
  .portrait-warp[data-ready="true"] img { opacity: 1; }
}

@media (min-width: 1051px) {
  figure._placeholder_1nj2b_1[data-warp-ready] picture,
  figure._placeholder_1nj2b_1[data-warp-ready] img {
    opacity: 0;
  }

  ._homeMediaRail_1a9j7_218 figure._placeholder_1nj2b_1,
  ._mediaRail_n2eeo_114 figure._placeholder_1nj2b_1 {
    background: transparent !important;
    box-shadow: none !important;
  }

  ._homeMediaRail_1a9j7_218 figure._placeholder_1nj2b_1[data-warp-ready],
  ._mediaRail_n2eeo_114 figure._placeholder_1nj2b_1[data-warp-ready] {
    background: transparent !important;
  }
}

@media (max-width: 1050px), (prefers-reduced-motion: reduce) {
  .site-warp-host,
  .site-warp-layer {
    display: none;
  }
}

span._playgroundLink_1a9j7_128 {
  display: inline-block;
  cursor: default;
  pointer-events: none;
}

._themeToggle_yf4ib_40 {
  pointer-events: auto;
  cursor: pointer;
  z-index: 60;
}

._themeToggle_yf4ib_40::before {
  content: "";
  position: absolute;
  inset: -16px;
}

:root {
  --theme-wipe-radius: 400vmax;
}

:root[data-theme="light"] {
  --color-canvas: #f9f9f9;
  --color-ink: #050505;
  --color-muted: #727272;
  --color-media: #d9d9d9;
  --color-media-mobile: #cbcbcb;
  --color-media-ink: #777;
  --color-hairline: #0505051a;
  --color-focus: #315efb;
  --theme-toggle-color: #9f9fa9;
}

html,
body,
#root {
  background: var(--color-canvas);
  color: var(--color-ink);
}

/* JioFinance uses its product mark in place of the generic project folder. */
._projectList_1a9j7_301 ._folderAnchor_1a9j7_357 {
  --project-folder-size: 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
}

.case-study-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: -4px 0 8px 34px;
}

.case-study-sidebar a {
  color: var(--color-muted);
  width: fit-content;
  font-size: 13px;
  line-height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .case-study-sidebar a:hover {
    color: var(--color-ink);
  }
}
[data-project-folder="jiofinance"] ._scene_1bcyx_1 {
  display: none;
}
[data-project-folder="appsmith"] ._scene_1bcyx_1 {
  display: none;
}
[data-project-folder="outreach"] ._scene_1bcyx_1,
[data-project-folder="omnara"] ._scene_1bcyx_1 {
  display: none;
}
[data-project-folder="outreach"]::before,
[data-project-folder="omnara"]::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform .3s var(--ease-out-quint), filter .3s var(--ease-out-quint);
}
[data-project-folder="outreach"]::before { background-image: url("/images/outreach.svg"); }
[data-project-folder="omnara"]::before { background-image: url("/images/omnara.svg"); }
[data-project-folder="appsmith"]::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url("/images/appsmith.svg") center / contain no-repeat;
  transition: transform .3s var(--ease-out-quint), filter .3s var(--ease-out-quint);
}
[data-project-folder="jiofinance"]::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url("/images/jiofinance.svg") center / contain no-repeat;
  transition: transform .3s var(--ease-out-quint), filter .3s var(--ease-out-quint);
}
@media (hover: hover) and (pointer: fine) {
  ._projectRow_1a9j7_307:hover [data-project-folder="jiofinance"]::before {
    filter: saturate(1.08);
    transform: scale(1.08) rotate(-3deg);
  }
  ._projectRow_1a9j7_307:hover [data-project-folder="appsmith"]::before {
    filter: saturate(1.08);
    transform: scale(1.08) rotate(3deg);
  }
  ._projectRow_1a9j7_307:hover [data-project-folder="outreach"]::before,
  ._projectRow_1a9j7_307:hover [data-project-folder="omnara"]::before {
    filter: saturate(1.08);
    transform: scale(1.08) rotate(-3deg);
  }
}

:root.theme-wipe-active .site-warp-layer {
  visibility: hidden !important;
  opacity: 0 !important;
}

:root:not(.theme-wipe-active)::view-transition {
  display: none !important;
}

:root[data-theme="light"] ._scene_1bcyx_1[data-theme="auto"] {
  --folder-back-start: #eee;
  --folder-back-end: #646464;
  --folder-front-start: #fbfbfb;
  --folder-front-end: #c5c5c5;
  --folder-edge: #2a2a2e1f;
  --folder-card-shadow: #16161c17;
  --folder-focus-ring: #3867e8;
  --folder-adornment: #17171a;
}

@media (max-width: 1050px) {
  ._homeFooter_1a9j7_433 > button,
  ._projectFooter_n2eeo_242 > button {
    position: relative;
    grid-area: 2 / 1 / auto / -1;
    justify-self: end;
    transform: none;
  }
}

/* Keep the theme switch within reach, independent of footer position. */

._themeToggle_yf4ib_40 { position: fixed !important; inset: auto !important; top: 50px !important; right: 50px !important; bottom: auto !important; left: auto !important; z-index: 70; }

@media (max-width: 1050px) {
  ._themeToggle_yf4ib_40 {
    top: 43px;
    right: max(20px, calc(50% - min(42rem, calc(100% - 66px)) / 2));
  }
}

@media (max-width: 1050px) {
  html,
  body {
    overflow-x: clip;
    overflow-y: auto;
    height: auto;
  }

  #root,
  ._page_1a9j7_1,
  ._page_n2eeo_1 {
    overflow: visible !important;
    height: auto;
    min-height: var(--app-viewport-height);
  }
}