html[data-preview-theme] :is(#iphone-guide, #iphone-builder, #iphone-library) {
  --ys-nav-background-image: radial-gradient(circle at 27% 29%,rgba(222,239,218,0.206) 0 0.15px,transparent 0.41px),radial-gradient(circle at 64% 62%,rgba(222,239,218,0.208) 0 0.16px,transparent 0.34px),radial-gradient(circle at 36% 60%,rgba(222,239,218,0.099) 0 0.16px,transparent 0.40px),radial-gradient(circle at 80% 28%,rgba(222,239,218,0.184) 0 0.22px,transparent 0.48px),radial-gradient(circle at 43% 69%,rgba(222,239,218,0.205) 0 0.25px,transparent 0.44px),radial-gradient(circle at 54% 50%,rgba(222,239,218,0.168) 0 0.16px,transparent 0.42px),radial-gradient(circle at 62% 48%,rgba(222,239,218,0.153) 0 0.31px,transparent 0.61px),radial-gradient(circle at 15% 83%,rgba(222,239,218,0.239) 0 0.19px,transparent 0.44px),radial-gradient(circle at 8% 56%,rgba(222,239,218,0.229) 0 0.18px,transparent 0.40px),radial-gradient(circle at 74% 39%,rgba(222,239,218,0.094) 0 0.23px,transparent 0.44px),radial-gradient(circle at 45% 37%,rgba(222,239,218,0.115) 0 0.26px,transparent 0.53px),radial-gradient(circle at 14% 48%,rgba(222,239,218,0.174) 0 0.15px,transparent 0.36px),radial-gradient(circle at 70% 74%,rgba(222,239,218,0.121) 0 0.29px,transparent 0.48px),radial-gradient(circle at 13% 68%,rgba(222,239,218,0.235) 0 0.14px,transparent 0.42px),radial-gradient(circle at 8% 53%,rgba(222,239,218,0.164) 0 0.22px,transparent 0.48px),radial-gradient(circle at 29% 18%,rgba(222,239,218,0.193) 0 0.15px,transparent 0.39px),radial-gradient(circle at 60% 32%,rgba(222,239,218,0.239) 0 0.14px,transparent 0.41px),radial-gradient(circle at 22% 11%,rgba(222,239,218,0.186) 0 0.18px,transparent 0.43px),radial-gradient(circle at 57% 50%,rgba(222,239,218,0.202) 0 0.30px,transparent 0.61px),radial-gradient(circle at 38% 24%,rgba(222,239,218,0.151) 0 0.19px,transparent 0.48px),radial-gradient(circle at 35% 75%,rgba(222,239,218,0.127) 0 0.17px,transparent 0.39px),radial-gradient(circle at 31% 37%,rgba(222,239,218,0.235) 0 0.15px,transparent 0.41px),radial-gradient(circle at 14% 70%,rgba(222,239,218,0.108) 0 0.30px,transparent 0.56px),radial-gradient(circle at 76% 9%,rgba(222,239,218,0.194) 0 0.30px,transparent 0.55px),radial-gradient(circle at 36% 67%,rgba(222,239,218,0.186) 0 0.30px,transparent 0.50px),radial-gradient(circle at 60% 60%,rgba(222,239,218,0.099) 0 0.14px,transparent 0.41px),radial-gradient(circle at 17% 11%,rgba(222,239,218,0.092) 0 0.22px,transparent 0.52px),radial-gradient(circle at 18% 82%,rgba(222,239,218,0.224) 0 0.20px,transparent 0.46px),radial-gradient(ellipse at 8% 104%,#52816b70,transparent 43%),radial-gradient(ellipse at 65% 98%,#41786575,transparent 47%),radial-gradient(ellipse at 30% -35%,#031f1b85,transparent 65%),linear-gradient(113deg,#1a4b3e,#103d32 50%,#123e32);
  --ys-nav-background-size: 11.1px 18.0px,26.9px 22.5px,13.6px 20.3px,16.8px 12.4px,26.5px 26.7px,11.4px 30.0px,12.6px 27.7px,25.5px 15.5px,24.4px 20.9px,22.3px 19.6px,13.4px 23.2px,23.5px 12.4px,16.6px 16.1px,12.3px 15.3px,10.4px 17.6px,17.0px 20.7px,16.8px 14.9px,22.2px 19.3px,18.1px 25.3px,19.4px 16.9px,11.8px 15.8px,16.3px 24.7px,25.1px 28.6px,22.1px 30.5px,11.4px 15.9px,27.1px 23.3px,23.1px 15.5px,16.9px 24.3px,100% 100%,100% 100%,100% 100%,100% 100%;
  --ys-nav-background-position: 13.4px 4.7px,12.4px 2.8px,14.5px 5.2px,7.9px 1.9px,9.3px 5.5px,14.5px 5.7px,14.1px 4.8px,10.3px 2.4px,5.3px 13.5px,10.9px 12.3px,11.3px 10.3px,12.0px 9.6px,11.9px 11.5px,10.6px 0.5px,1.6px 11.7px,4.9px 6.6px,2.1px 4.4px,10.5px 9.9px,2.8px 0.0px,13.5px 12.6px,12.0px 4.8px,10.9px 12.6px,10.4px 12.6px,13.1px 3.9px,7.3px 14.6px,13.4px 3.7px,0.9px 0.1px,2.6px 8.0px,center,center,center,center;
  --ys-nav-background-repeat: repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}
html[data-preview-theme] :is(#iphone-guide, #iphone-builder) :is(.iphone-screen, .ysb-screen) {
  bottom: calc(1.7% - 1px) !important;
  --pt-ink: #243c32;
  --pt-muted: #52635a;
  --pt-surface: #fff;
  --pt-raised: #f4f6f5;
  --pt-gradient: #fff;
  --pt-edge: #d4dbd7;
}
html[data-preview-theme] :is(#iphone-guide, #iphone-builder) :is(.iphone-screen, .ysb-screen) > .ysb-app-nav {
background-image:var(--ys-nav-background-image)!important;
background-size:var(--ys-nav-background-size)!important;
background-position:var(--ys-nav-background-position)!important;
background-repeat:var(--ys-nav-background-repeat)!important;
  background-color: #103e33 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  box-sizing: border-box;
  flex: none !important;
  min-height: 68px;
  padding: 8px 8px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  filter: none;
}
html[data-preview-theme] :is(#iphone-guide, #iphone-builder) :is(.iphone-screen, .ysb-screen) > .ysb-app-nav::before,
html[data-preview-theme] :is(#iphone-guide, #iphone-builder) :is(.iphone-screen, .ysb-screen) > .ysb-app-nav::after { display: none !important; }
html[data-preview-theme] :is(#iphone-guide, #iphone-builder) :is(.iphone-screen, .ysb-screen) > .ysb-app-nav button {
  color: #fff !important;
  opacity: 1 !important;
  background: transparent !important;
  padding: 7px 0 !important;
  min-width: 0;
  min-height: 44px !important;
  gap: 3px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}
html[data-preview-theme] :is(#iphone-guide, #iphone-builder) :is(.iphone-screen, .ysb-screen) > .ysb-app-nav button[aria-pressed=true] {
  background: #ffffff20 !important;
  border-radius: 14px;
  color: #fff !important;
}
html[data-preview-theme] :is(#iphone-guide, #iphone-builder) :is(.iphone-screen, .ysb-screen) > .ysb-app-nav button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
html[data-preview-theme] :is(#iphone-guide, #iphone-builder) :is(.iphone-screen, .ysb-screen) > .ysb-app-nav svg {
  width: 19px !important;
  height: 19px !important;
  stroke: currentColor !important;
}
html[data-preview-theme] #iphone-guide .iphone-screen > .ysb-app-nav {
  margin: 0 !important;
  width: 100%;
}
html[data-preview-theme] #iphone-builder .ysb-screen {
  padding-bottom: 0 !important;
  background: #fff !important;
  color: #243c32 !important;
}
html[data-preview-theme] #iphone-builder .ysb-screen > .ysb-app-nav {
  order: 2;
  margin-top: 0 !important;
}
html[data-preview-theme] #iphone-builder .ysb-screen > .ysb-feedback {
  order: 1;
}
html[data-preview-theme] #iphone-builder .ysb-screen :is(h2, h3, p, .ysb-rail-label, .ysb-hint, .ysb-iconbutton, .ysb-ios-status-bar) {
  color: #405349 !important;
}
html[data-preview-theme] :is(#iphone-guide .iphone-homebar, #iphone-builder .ysb-homebar) {
  display: none !important;
}
html[data-preview-theme] #iphone-guide[data-guide-demo]{--guide-ink:#243c32;--guide-muted:#52635a;--guide-paper:#fff;--guide-tile:#fff;--guide-selected:#f0f3f1;--guide-edge:#d4dbd7;--guide-green:#40564a}
html[data-preview-theme] #iphone-guide[data-guide-demo] .iphone-screen{background:#fff!important;color:#243c32!important}
html[data-preview-theme] #iphone-guide[data-guide-demo] .ysb-ios-status-bar{color:#243c32!important}
html[data-preview-theme] #iphone-guide[data-guide-demo] .ysb-ios-battery{box-shadow:inset 0 0 0 1px #243c32}
html[data-preview-theme] #iphone-guide[data-guide-demo] .iphone-screen .ypd-intro h3{color:#243c32!important}
html[data-preview-theme] #iphone-guide[data-guide-demo] .iphone-screen .ypd-sanskrit{color:#627069!important}
html[data-preview-theme] #iphone-guide[data-guide-demo] .iphone-screen .ypd-summary{color:#405349!important}
html[data-preview-theme] #iphone-guide[data-guide-demo] .ypd-facts span{background:#f4f6f5;color:#52635a;border-color:#e0e6e2}
html[data-preview-theme] #iphone-guide[data-guide-demo] .ypd-topics li{border-color:#e1e7e3!important}
html[data-preview-theme] #iphone-guide[data-guide-demo] .guide-demo-panel{border-top:1px solid #e3e8e5!important;border-radius:0!important}

/* Paint the rounded screen itself beneath the builder navigation. This removes
   white antialiasing seams without changing the screen or hardware geometry. */
html[data-preview-theme] #iphone-builder .ysb-screen {
  background-color: #103e33 !important;
  background-image: linear-gradient(to bottom, #fff 0, #fff calc(100% - 68px), transparent calc(100% - 68px)), var(--ys-nav-background-image) !important;
  background-size: 100% 100%, var(--ys-nav-background-size) !important;
  background-position: 0 0, var(--ys-nav-background-position) !important;
  background-repeat: no-repeat, var(--ys-nav-background-repeat) !important;
}

/* Extend the same paint one CSS pixel beneath each hardware edge. The frame
   stays on top, so its native rim and corner shape are preserved. */
html[data-preview-theme] #iphone-builder .ysb-phone::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: calc(4% - 1px);
  right: calc(4% - 1px);
  bottom: calc(1.7% - 1px);
  height: 68px;
  border-radius: 0 0 12.5% 12.5% / 0 0 12cqw 12cqw;
  background-color: #103e33;
  background-image: var(--ys-nav-background-image);
  background-size: var(--ys-nav-background-size);
  background-position: var(--ys-nav-background-position);
  background-repeat: var(--ys-nav-background-repeat);
}