/* Real product renders, framed with CSS. No retouching or geometry changes. */
#nuclyo-mobile-opening .n116-switch {
  --n116-switch-blue: #2464e8;
  position: relative;
  overflow: clip;
  margin: 0;
  padding: 56px 0;
  background: #fff;
  color: #1d1d1f;
  isolation: isolate;
}
#nuclyo-mobile-opening .n116-switch * { box-sizing: border-box; }
#nuclyo-mobile-opening .n116-switch-inner { width: 100%; max-width: 1160px; margin: 0 auto; }
#nuclyo-mobile-opening .n116-switch-intro { position: relative; z-index: 2; padding: 0 24px; }
#nuclyo-mobile-opening .n116-switch-kicker { margin: 0 0 14px; color: #62666d; font-size: 14px; line-height: 1.4; font-weight: 500; letter-spacing: .01em; }
#nuclyo-mobile-opening .n116-switch h2 { margin: 0; font-size: 40px; line-height: 1.04; font-weight: 550; letter-spacing: -.05em; }
#nuclyo-mobile-opening .n116-switch h2 span { color: #62666d; }
#nuclyo-mobile-opening .n116-switch-line { margin: 18px 0 0; color: #62666d; font-size: 16px; line-height: 1.5; letter-spacing: -.015em; }
#nuclyo-mobile-opening .n116-switch-hero { position: relative; width: 100%; margin: 20px 0 0; padding: 20px 0 0; }
#nuclyo-mobile-opening .n116-switch-drawing { position: absolute; width: 50%; aspect-ratio: .9; top: -35px; right: 0; z-index: -1; background: var(--n116-switch-blue); opacity: .12; -webkit-mask: url("assets/switch-cad-showcase116.svg") center / contain no-repeat; mask: url("assets/switch-cad-showcase116.svg") center / contain no-repeat; transform: rotate(9deg); pointer-events: none; }
#nuclyo-mobile-opening .n116-switch-isometric { position: relative; width: 100%; aspect-ratio: 850 / 585; overflow: hidden; }
#nuclyo-mobile-opening .n116-switch-isometric img { position: absolute; display: block; width: 208.706%; max-width: none; height: auto; top: -37.607%; left: -54.118%; }
#nuclyo-mobile-opening .n116-switch-hero > figcaption { margin: 0 24px; text-align: right; font-size: 13px; line-height: 1.5; color: #62666d; }
#nuclyo-mobile-opening .n116-switch-finishes { margin-top: 44px; }
#nuclyo-mobile-opening .n116-switch-finish-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; padding: 0 24px; }
#nuclyo-mobile-opening .n116-switch-finish-heading h3 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -.04em; font-weight: 550; }
#nuclyo-mobile-opening .n116-switch-finish-heading h3 span { color: #62666d; }
#nuclyo-mobile-opening .n116-switch-swipe { margin: 0 0 2px; max-width: 86px; font-size: 12px; line-height: 1.4; color: #62666d; }
#nuclyo-mobile-opening .n116-switch-swipe span { display: block; font-size: 22px; line-height: 1; }
#nuclyo-mobile-opening .n116-switch-gallery { display: flex; gap: 28px; width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none; padding: 28px 24px 8px; }
#nuclyo-mobile-opening .n116-switch-gallery::-webkit-scrollbar { display: none; }
#nuclyo-mobile-opening .n116-switch-finish { flex: 0 0 68%; min-width: 0; margin: 0; scroll-snap-align: start; }
#nuclyo-mobile-opening .n116-switch-front { position: relative; overflow: hidden; width: 100%; aspect-ratio: 300 / 340; }
#nuclyo-mobile-opening .n116-switch-front img { position: absolute; display: block; width: 591.333%; max-width: none; height: auto; top: -81.471%; }
#nuclyo-mobile-opening .n116-switch-front-grey img { left: -144.333%; }
#nuclyo-mobile-opening .n116-switch-front-black img { left: -247%; }
#nuclyo-mobile-opening .n116-switch-front-champagne img { left: -349%; }
#nuclyo-mobile-opening .n116-switch-finish figcaption { display: flex; align-items: center; gap: 8px; margin: 14px 6px 0; padding-top: 12px; border-top: 1px solid #1d1d1f1a; color: #1d1d1f; font-size: 14px; line-height: 1.4; }
#nuclyo-mobile-opening .n116-switch-finish-number { margin-left: auto; color: #62666d; font-size: 12px; font-variant-numeric: tabular-nums; }
#nuclyo-mobile-opening .n116-switch-finish i, #nuclyo-mobile-opening .n116-switch-finish-nav i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #7a7d7e; box-shadow: inset 0 0 0 1px #0000000a; }
#nuclyo-mobile-opening [data-n116-finish="black"] i, #nuclyo-mobile-opening [data-n116-show-finish="black"] i { background: #292b2c; }
#nuclyo-mobile-opening [data-n116-finish="champagne"] i, #nuclyo-mobile-opening [data-n116-show-finish="champagne"] i { background: #cfc1ad; }
#nuclyo-mobile-opening .n116-switch-finish-nav { display: flex; justify-content: center; gap: 4px; margin: 22px 20px 0; }
#nuclyo-mobile-opening .n116-switch-finish-nav[hidden] { display: none; }
#nuclyo-mobile-opening .n116-switch-finish-nav button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 44px; padding: 10px 11px; border: 1px solid transparent; border-radius: 30px; color: #62666d; background: transparent; font: inherit; font-size: 13px; line-height: 1.2; }
#nuclyo-mobile-opening .n116-switch-finish-nav button[aria-current="true"] { color: #1d1d1f; background: #f5f5f7; }
#nuclyo-mobile-opening .n116-switch-gallery:focus-visible, #nuclyo-mobile-opening .n116-switch-finish-nav button:focus-visible { outline: 2px solid var(--n116-switch-blue); outline-offset: -3px; }
@media (min-width: 700px) {
  #nuclyo-mobile-opening .n116-switch { padding: 64px 32px; }
  #nuclyo-mobile-opening .n116-switch-inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); align-items: center; column-gap: 24px; }
  #nuclyo-mobile-opening .n116-switch-intro { padding: 0; }
  #nuclyo-mobile-opening .n116-switch h2 { font-size: clamp(36px, 4.5vw, 52px); }
  #nuclyo-mobile-opening .n116-switch-hero { margin: 0; padding: 24px 0 0; }
  #nuclyo-mobile-opening .n116-switch-drawing { top: -18px; width: 52%; right: 0; }
  #nuclyo-mobile-opening .n116-switch-hero > figcaption { margin-inline: 0 15px; }
  #nuclyo-mobile-opening .n116-switch-finishes { grid-column: 1 / -1; margin-top: 48px; }
  #nuclyo-mobile-opening .n116-switch-finish-heading { padding: 0; }
  #nuclyo-mobile-opening .n116-switch-finish-heading h3 { font-size: 30px; }
  #nuclyo-mobile-opening .n116-switch-finish-heading h3 br { display: none; }
  #nuclyo-mobile-opening .n116-switch-finish-heading h3 span::before { content: " "; }
  #nuclyo-mobile-opening .n116-switch-swipe { display: none; }
  #nuclyo-mobile-opening .n116-switch-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; padding: 32px 0 0; overflow: visible; }
  #nuclyo-mobile-opening .n116-switch-finish { width: 100%; max-width: 200px; justify-self: center; }
  #nuclyo-mobile-opening .n116-switch-finish-nav { display: none; }
}
@media (min-width: 1000px) {
  #nuclyo-mobile-opening .n116-switch { padding-inline: 40px; }
}
@media (min-width: 1100px) {
  #nuclyo-mobile-opening .n116-switch { padding: 72px 40px; }
  #nuclyo-mobile-opening .n116-switch-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 36px; }
  #nuclyo-mobile-opening .n116-switch h2 { font-size: 56px; }
  #nuclyo-mobile-opening .n116-switch-line { margin-top: 22px; font-size: 18px; }
  #nuclyo-mobile-opening .n116-switch-hero { max-width: 620px; justify-self: end; padding-top: 8px; }
  #nuclyo-mobile-opening .n116-switch-drawing { width: 48%; top: -40px; right: 1%; }
  #nuclyo-mobile-opening .n116-switch-finishes { margin-top: 44px; }
  #nuclyo-mobile-opening .n116-switch-gallery { gap: 60px; padding-top: 28px; }
  #nuclyo-mobile-opening .n116-switch-finish { max-width: 220px; }
  #nuclyo-mobile-opening .n116-switch-finish figcaption { font-size: 14px; }
}
@media (max-width: 359px) {
  #nuclyo-mobile-opening .n116-switch { padding-top: 56px; }
  #nuclyo-mobile-opening .n116-switch-intro, #nuclyo-mobile-opening .n116-switch-finish-heading { padding-inline: 20px; }
  #nuclyo-mobile-opening .n116-switch-gallery { padding-inline: 20px; scroll-padding-inline: 20px; gap: 22px; }
  #nuclyo-mobile-opening .n116-switch-finish { flex-basis: 78%; }
  #nuclyo-mobile-opening .n116-switch-finish-nav { margin-inline: 12px; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #nuclyo-mobile-opening .n116-switch-gallery { scroll-behavior: auto; }
}