/* Style me: the sheet that dresses you for an occasion (Views/Outfits/StyleMeSheet.swift), opened with ✨ in Outfits.
   Inside the phone everything is in iOS points (var(--pt)), from the app on an iPhone 17. */

/* ---------- Layout: phone left, copy right; on narrow screens head, phone, then points ---------- */
.styleme-section .styleme-copy .section-head { margin-bottom: 0; }
.styleme-section .styleme-points { margin-top: 40px; gap: 22px; }
.styleme-section .styleme-demo { display: grid; justify-items: center; min-width: 0; }
@media (max-width: 899px) {
  .styleme-section .styleme-copy { display: contents; }
  .styleme-section .styleme-copy .section-head { order: 1; }
  .styleme-section .styleme-demo { order: 2; }
  .styleme-section .styleme-points { order: 3; margin-top: 0; max-width: 620px; }
}

/* ---------- Controls under the phone ---------- */
.styleme-section .styleme-controls { display: grid; gap: 18px; width: 100%; max-width: 480px; margin-top: 36px; }
.styleme-section .styleme-row { display: grid; justify-items: center; gap: 10px; }
.styleme-section .styleme-row__label {
  font-size: 12.5px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.styleme-section .styleme-chips { margin-top: 0; }
.styleme-section .styleme-chips .chip-btn[hidden] { display: none; }
.styleme-section .styleme-again svg { width: 16px; height: 16px; flex: none; margin-left: -3px; }
.styleme-section .styleme-note { max-width: 420px; }

/* ---------- The screen: the app, with the sheet over it ---------- */
.styleme-section .styleme-screen { background: #000; }
.styleme-section .styleme-screen .ios-status { transition: color 0.35s ease; }
.styleme-section .styleme-screen.is-presenting .ios-status { color: #fff; }

/* The app behind the sheet. While the sheet is up it shrinks back and dims, as iOS does. */
.styleme-section .styleme-page {
  position: absolute; z-index: 1; inset: 0; overflow: hidden;
  border-radius: calc(var(--pt) * 54);
  transform-origin: 50% 0;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.styleme-section .is-presenting .styleme-page {
  transform: translateY(calc(var(--pt) * 57)) scale(0.93); border-radius: calc(var(--pt) * 14);
}
.styleme-section .styleme-dim {
  position: absolute; z-index: 28; inset: 0; pointer-events: none;
  background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.5s ease;
}
.styleme-section .is-presenting .styleme-dim { opacity: 1; }
.styleme-section .styleme-view { position: absolute; inset: 0; visibility: hidden; }
.styleme-section .styleme-view.is-on { visibility: visible; }

/* ---------- Outfits: your saved looks, standing on the stage ---------- */
.styleme-section .styleme-outfits { background: var(--stage); }
.styleme-section .styleme-obar {
  position: absolute; z-index: 3; top: calc(var(--pt) * 62); left: calc(var(--pt) * 16); right: calc(var(--pt) * 16);
  display: flex; align-items: center; justify-content: space-between;
}
.styleme-section .styleme-pill {
  display: inline-flex; align-items: center; height: calc(var(--pt) * 44); border-radius: 999px;
  background: rgba(250, 250, 249, 0.9); color: #000;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 calc(var(--pt) * 4) calc(var(--pt) * 16) rgba(0, 0, 0, 0.07);
}
.styleme-section .styleme-filter {
  gap: calc(var(--pt) * 6); padding: 0 calc(var(--pt) * 13) 0 calc(var(--pt) * 11);
  font-size: calc(var(--pt) * 17); font-weight: 600; white-space: nowrap;
}
.styleme-section .styleme-filter svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }
.styleme-section .styleme-tools { width: calc(var(--pt) * 108); }
.styleme-section .styleme-tool { flex: 1; display: grid; place-items: center; height: 100%; border-radius: 999px; transition: opacity 0.15s; }
.styleme-section .styleme-tool svg { width: calc(var(--pt) * 24); height: calc(var(--pt) * 24); }

/* The looks: the one in the middle full height, its neighbours 43% of the screen away and smaller. */
.styleme-section .styleme-carousel { position: absolute; inset: 0; }
.styleme-section .styleme-ocard {
  position: absolute; left: calc(var(--pt) * 41); top: calc(var(--pt) * 81);
  width: calc(var(--pt) * 320); height: calc(var(--pt) * 573); max-width: none; object-fit: contain;
  transition: transform 0.5s var(--ease), opacity 0.3s ease;
}
.styleme-section .styleme-ocard.is-center { z-index: 1; }
.styleme-section .styleme-ocard.is-far { opacity: 0; }

.styleme-section .styleme-ocap {
  position: absolute; z-index: 2; left: calc(var(--pt) * 16); right: calc(var(--pt) * 16); top: calc(var(--pt) * 668);
  display: grid; justify-items: center; gap: calc(var(--pt) * 4); text-align: center;
}
.styleme-section .styleme-oname {
  display: flex; align-items: center; gap: calc(var(--pt) * 8); max-width: 100%;
  font-family: var(--font-serif); font-weight: 600; font-size: calc(var(--pt) * 22); line-height: 1.2; letter-spacing: -0.01em;
  transition: opacity 0.2s ease;
}
.styleme-section .styleme-oname span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.styleme-section .styleme-oname svg { flex: none; width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); color: var(--accent); }
.styleme-section .styleme-oname.is-out, .styleme-section .styleme-osum.is-out { opacity: 0; }
.styleme-section .styleme-osum { font-size: calc(var(--pt) * 15); line-height: 1.34; color: rgba(60, 60, 67, 0.6); transition: opacity 0.2s ease; }
.styleme-section .styleme-dots { display: flex; align-items: center; height: calc(var(--pt) * 30); }
.styleme-section .styleme-dot { display: grid; place-items: center; width: calc(var(--pt) * 22); height: 100%; }
.styleme-section .styleme-dot::before {
  content: ""; width: calc(var(--pt) * 7); height: calc(var(--pt) * 7); border-radius: 50%;
  background: rgba(60, 60, 67, 0.3); transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s;
}
.styleme-section .styleme-dot.is-on::before { width: calc(var(--pt) * 9); height: calc(var(--pt) * 9); background: var(--accent); }
.styleme-section .styleme-dot.is-small::before { width: calc(var(--pt) * 5.5); height: calc(var(--pt) * 5.5); }
.styleme-section .styleme-dot.is-tiny::before { width: calc(var(--pt) * 4); height: calc(var(--pt) * 4); }
.styleme-section .styleme-handle {
  display: grid; place-items: center; width: calc(var(--pt) * 80); height: calc(var(--pt) * 30);
  margin: calc(var(--pt) * -8) 0; color: rgba(60, 60, 67, 0.3);
}
.styleme-section .styleme-handle svg { width: calc(var(--pt) * 30); height: calc(var(--pt) * 12); }

/* ---------- The Studio, after Open in Studio (the shared Studio screen) ---------- */
.styleme-section .styleme-studio .studio-items { overflow: hidden; }

/* ---------- The sheet ---------- */
.styleme-section .styleme-sheet {
  position: absolute; z-index: 5; top: calc(var(--pt) * 67); left: 0; right: 0; bottom: 0; overflow: hidden;
  border-radius: calc(var(--pt) * 38) calc(var(--pt) * 38) 0 0; background: #fff;
  transform: translateY(105%); visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.5s;
}
.styleme-section .is-presenting .styleme-sheet {
  transform: none; visibility: visible;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}

/* Toolbar: Close, the title, and New occasion on a result. */
.styleme-section .styleme-nav {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: calc(var(--pt) * 62);
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--pt) * 16);
}
.styleme-section .styleme-nav .ios-navtitle { position: absolute; left: 50%; translate: -50% 0; }
.styleme-section .styleme-nav .ios-glassbtn {
  background: #f4f4f5; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 calc(var(--pt) * 3) calc(var(--pt) * 10) rgba(0, 0, 0, 0.06);
  transition: opacity 0.3s, scale 0.3s var(--ease);
}
.styleme-section .styleme-close { font-weight: 500; }
.styleme-section .styleme-new { padding: 0; width: calc(var(--pt) * 44); opacity: 0; scale: 0.8; }
/* It comes in with the result, after the last phase has gone. */
.styleme-section .styleme-new.is-on { opacity: 1; scale: 1; transition-delay: 0.18s; }

/* Phases change in place, one after the other: the old one has faded out before the new one comes in, so their
   text never shows on top of each other. */
.styleme-section .styleme-phase {
  position: absolute; inset: calc(var(--pt) * 62) 0 0 0;
  opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.styleme-section .styleme-phase.is-on {
  opacity: 1; visibility: visible; transition: opacity 0.3s ease 0.18s, visibility 0s linear 0.18s;
}

/* Bottom bar (safeAreaInset with .bar material) and its large buttons. */
.styleme-section .styleme-bar {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex; gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 16) calc(var(--pt) * 16) calc(var(--pt) * 50);
  background: rgba(247, 247, 248, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
}
.styleme-section .styleme-btn {
  flex: 1 1 0; min-width: 0; height: calc(var(--pt) * 50); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--pt) * 7);
  font-size: calc(var(--pt) * 17); font-weight: 600; white-space: nowrap;
  transition: background 0.3s, color 0.3s, opacity 0.15s;
}
.styleme-section .styleme-btn svg { width: calc(var(--pt) * 19); height: calc(var(--pt) * 19); flex: none; }
.styleme-section .styleme-btn--prominent { background: var(--accent); color: #fff; }
.styleme-section .styleme-btn--bordered { background: rgba(90, 91, 216, 0.14); color: var(--accent-ink); }
.styleme-section .styleme-btn.is-disabled { background: rgba(120, 120, 128, 0.12); color: rgba(60, 60, 67, 0.3); }

/* A finger on the screen: a tap, or a swipe when it moves. */
.styleme-section .styleme-tap {
  position: absolute; z-index: 40; left: 50%; top: 50%;
  width: calc(var(--pt) * 46); height: calc(var(--pt) * 46); margin: calc(var(--pt) * -23) 0 0 calc(var(--pt) * -23);
  border-radius: 50%; background: rgba(27, 24, 21, 0.16); border: calc(var(--pt) * 2) solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22); opacity: 0; scale: 1.4; pointer-events: none;
  transition: opacity 0.22s, scale 0.3s var(--ease);
}
.styleme-section .styleme-tap.is-down { opacity: 1; scale: 0.85; }
.styleme-section .styleme-tap.is-moving {
  transition: opacity 0.22s, scale 0.3s var(--ease), left 0.5s var(--ease), top 0.5s var(--ease);
}
.styleme-section .is-pressed { opacity: 0.5; }

/* What a visitor can tap in the phone (styleme.js, actionFor): the app's own buttons, in the state they work in. */
.styleme-section .styleme-screen:not(.is-presenting) .styleme-outfits.is-on [data-sparkle],
.styleme-section .styleme-screen:not(.is-presenting) .ios-tab:is(:nth-child(2), :nth-child(3)):not(.is-active),
.styleme-section .styleme-close,
.styleme-section .styleme-new.is-on,
.styleme-section .styleme-idea,
.styleme-section .styleme-btn:not(.is-disabled),
.styleme-section .styleme-refine__btn { cursor: pointer; }
.styleme-section .styleme-screen:not(.is-presenting) .styleme-outfits.is-on [data-sparkle]:active,
.styleme-section .styleme-screen:not(.is-presenting) .ios-tab:is(:nth-child(2), :nth-child(3)):not(.is-active):active,
.styleme-section .styleme-close:active,
.styleme-section .styleme-new.is-on:active,
.styleme-section .styleme-idea:active,
.styleme-section .styleme-btn:not(.is-disabled):active,
.styleme-section .styleme-refine__btn:active { opacity: 0.5; }

/* iOS activity indicator. */
.styleme-section .styleme-spinner { color: rgba(60, 60, 67, 0.6); animation: styleme-spin 0.9s steps(8) infinite; }
@keyframes styleme-spin { to { rotate: 360deg; } }

/* ---------- Asking ---------- */
.styleme-section .styleme-ask__body { display: grid; gap: calc(var(--pt) * 20); padding: calc(var(--pt) * 6) calc(var(--pt) * 20) 0; }
.styleme-section .styleme-title {
  font-family: var(--font-serif); font-weight: 600; font-size: calc(var(--pt) * 26); line-height: 1.15; letter-spacing: -0.01em;
}
.styleme-section .styleme-sub { margin-top: calc(var(--pt) * 6); font-size: calc(var(--pt) * 15); line-height: 1.34; color: rgba(60, 60, 67, 0.62); }
.styleme-section .styleme-field {
  min-height: calc(var(--pt) * 94); padding: calc(var(--pt) * 14); border-radius: calc(var(--pt) * 14);
  background: #f2f2f7; font-size: calc(var(--pt) * 17); line-height: calc(var(--pt) * 22);
}
.styleme-section .styleme-field__ph { color: rgba(60, 60, 67, 0.3); }
.styleme-section :not(.is-empty) > .styleme-field__ph { display: none; }
.styleme-section .styleme-caret {
  display: none; width: calc(var(--pt) * 2); height: calc(var(--pt) * 21); margin: 0 calc(var(--pt) * 1) 0 calc(var(--pt) * 0.5);
  border-radius: 1px; background: var(--accent); vertical-align: calc(var(--pt) * -4);
  animation: styleme-blink 1.05s steps(1) infinite;
}
.styleme-section .is-focused > .styleme-caret { display: inline-block; }
@keyframes styleme-blink { 50% { opacity: 0; } }
.styleme-section .styleme-ideas__label { font-size: calc(var(--pt) * 13); font-weight: 600; color: rgba(60, 60, 67, 0.62); }
.styleme-section .styleme-ideas { display: flex; flex-wrap: wrap; gap: calc(var(--pt) * 8); margin-top: calc(var(--pt) * 8); }
.styleme-section .styleme-idea {
  padding: calc(var(--pt) * 7) calc(var(--pt) * 12); border-radius: 999px; background: #f2f2f7;
  font-size: calc(var(--pt) * 13); line-height: 1.25; transition: opacity 0.15s;
}

/* ---------- Styling ---------- */
.styleme-section .styleme-thinking {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--pt) * 18);
  padding-bottom: calc(var(--pt) * 70); text-align: center;
}
.styleme-section .styleme-thinking > .styleme-spinner { width: calc(var(--pt) * 36); height: calc(var(--pt) * 36); }
.styleme-section .styleme-step {
  display: flex; align-items: center; gap: calc(var(--pt) * 8);
  font-size: calc(var(--pt) * 17); font-weight: 600; transition: opacity 0.18s ease;
}
.styleme-section .styleme-step.is-out { opacity: 0; }
.styleme-section .styleme-step svg { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); flex: none; color: var(--accent); }
.styleme-section .styleme-quote {
  padding: 0 calc(var(--pt) * 40); font-size: calc(var(--pt) * 15); line-height: 1.34; color: rgba(60, 60, 67, 0.62);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* ---------- Result ---------- */
.styleme-section .styleme-scroll {
  position: absolute; inset: 0; overflow: hidden; overscroll-behavior: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--pt) * 10));
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--pt) * 10));
}
.styleme-section .styleme-scroll::-webkit-scrollbar { display: none; }
/* With a mouse or trackpad the sheet scrolls like the real one; on touch screens it doesn't trap the page. */
@media (hover: hover) and (pointer: fine) { .styleme-section .styleme-scroll { overflow-y: auto; } }
.styleme-section .styleme-scroll:focus-visible { outline-offset: -3px; border-radius: 0; }
.styleme-section .styleme-result__body {
  display: grid; gap: calc(var(--pt) * 22);
  padding: calc(var(--pt) * 4) calc(var(--pt) * 20) calc(var(--pt) * 136);
}

/* You wearing it; while it's being made, your photo, dimmed and soft, with "Dressing you…". */
.styleme-section .styleme-look { position: relative; height: calc(var(--pt) * 440); display: grid; place-items: center; overflow: hidden; }
.styleme-section .styleme-look > img {
  grid-area: 1 / 1; height: calc(var(--pt) * 440); width: auto; max-width: 100%; object-fit: contain;
  transition: opacity 0.4s ease;
}
.styleme-section .styleme-look__base { opacity: 0; border-radius: calc(var(--pt) * 18); filter: blur(calc(var(--pt) * 2)); }
.styleme-section .styleme-look.is-dressing .styleme-look__base { opacity: 0.5; }
.styleme-section .styleme-look.is-dressing .styleme-look__img { opacity: 0; }
.styleme-section .styleme-dressing {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 10); white-space: nowrap;
  padding: calc(var(--pt) * 11) calc(var(--pt) * 18); border-radius: 999px;
  background: rgba(246, 246, 247, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 calc(var(--pt) * 4) calc(var(--pt) * 18) rgba(0, 0, 0, 0.08);
  font-size: calc(var(--pt) * 15); font-weight: 500;
  opacity: 0; transition: opacity 0.3s;
}
.styleme-section .styleme-dressing .styleme-spinner { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); }
.styleme-section .styleme-look.is-dressing .styleme-dressing { opacity: 1; }

.styleme-section .styleme-kicker {
  font-size: calc(var(--pt) * 12); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: rgba(60, 60, 67, 0.62);
}
.styleme-section .styleme-name {
  margin-top: calc(var(--pt) * 6); font-family: var(--font-serif); font-weight: 600;
  font-size: calc(var(--pt) * 26); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance;
}
.styleme-section .styleme-why { margin-top: calc(var(--pt) * 6); font-size: calc(var(--pt) * 15); line-height: 1.36; }

.styleme-section .styleme-items { display: flex; gap: calc(var(--pt) * 10); overflow: hidden; }
.styleme-section .styleme-tile { flex: none; width: calc(var(--pt) * 76); display: grid; gap: calc(var(--pt) * 4); }
.styleme-section .styleme-tile__photo {
  height: calc(var(--pt) * 96); padding: calc(var(--pt) * 6); border-radius: calc(var(--pt) * 12);
  background: var(--paper-2); display: grid; place-items: center; overflow: hidden;
}
.styleme-section .styleme-tile__photo img { width: 100%; height: 100%; object-fit: contain; }
.styleme-section .styleme-tile__name { font-size: calc(var(--pt) * 12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.styleme-section .styleme-card {
  display: grid; gap: calc(var(--pt) * 10); padding: calc(var(--pt) * 16);
  border-radius: calc(var(--pt) * 16); background: #f2f2f7;
}
.styleme-section .styleme-card__head { display: flex; align-items: center; gap: calc(var(--pt) * 8); font-size: calc(var(--pt) * 17); font-weight: 600; }
.styleme-section .styleme-card__head svg { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); flex: none; }
.styleme-section .styleme-card__text { font-size: calc(var(--pt) * 15); line-height: 1.36; }
.styleme-section .styleme-weather {
  display: flex; align-items: center; gap: calc(var(--pt) * 7);
  font-size: calc(var(--pt) * 15); color: rgba(60, 60, 67, 0.62);
}
.styleme-section .styleme-weather svg { width: calc(var(--pt) * 19); height: calc(var(--pt) * 19); flex: none; }
.styleme-section .styleme-sources { display: grid; gap: calc(var(--pt) * 5); padding-top: calc(var(--pt) * 2); }
.styleme-section .styleme-sources__label { font-size: calc(var(--pt) * 12); font-weight: 600; color: rgba(60, 60, 67, 0.62); }
.styleme-section .styleme-source {
  display: flex; align-items: center; gap: calc(var(--pt) * 5); min-width: 0;
  font-size: calc(var(--pt) * 12); color: var(--accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.styleme-section .styleme-source svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); flex: none; }

.styleme-section .styleme-miss { display: flex; align-items: center; gap: calc(var(--pt) * 12); }
.styleme-section .styleme-miss__icon {
  flex: none; display: grid; place-items: center; width: calc(var(--pt) * 36); height: calc(var(--pt) * 36);
  border-radius: calc(var(--pt) * 10); background: rgba(118, 118, 128, 0.12);
}
.styleme-section .styleme-miss__icon svg { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); }
.styleme-section .styleme-miss__text { flex: 1; min-width: 0; display: grid; gap: calc(var(--pt) * 2); }
.styleme-section .styleme-miss__label { font-size: calc(var(--pt) * 15); font-weight: 500; line-height: 1.25; }
.styleme-section .styleme-miss__why { font-size: calc(var(--pt) * 12); line-height: 1.3; color: rgba(60, 60, 67, 0.62); }
.styleme-section .styleme-miss__find { flex: none; font-size: calc(var(--pt) * 13); font-weight: 600; color: var(--accent-ink); }

.styleme-section .styleme-refine { display: grid; gap: calc(var(--pt) * 10); }
.styleme-section .styleme-refine__title { font-size: calc(var(--pt) * 17); font-weight: 600; }
.styleme-section .styleme-refine__row { display: flex; align-items: center; gap: calc(var(--pt) * 8); }
.styleme-section .styleme-refine__field {
  flex: 1; min-width: 0; padding: calc(var(--pt) * 10) calc(var(--pt) * 12); border-radius: 999px;
  background: rgba(118, 118, 128, 0.12); font-size: calc(var(--pt) * 17); line-height: calc(var(--pt) * 22);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.styleme-section .styleme-refine__btn {
  flex: none; display: grid; place-items: center; width: calc(var(--pt) * 40); height: calc(var(--pt) * 40);
  border-radius: 50%; background: rgba(90, 91, 216, 0.14); color: var(--accent); transition: opacity 0.15s;
}
.styleme-section .styleme-refine__btn svg { width: calc(var(--pt) * 19); height: calc(var(--pt) * 19); }

/* ---------- Set without animating (the first state, and what changes out of sight) ---------- */
.styleme-section .is-instant .styleme-page,
.styleme-section .is-instant .styleme-dim,
.styleme-section .is-instant .styleme-sheet,
.styleme-section .is-instant .styleme-phase,
.styleme-section .is-instant .styleme-new,
.styleme-section .is-instant .styleme-ocard,
.styleme-section .is-instant .styleme-dot::before,
.styleme-section .is-instant .ios-status { transition: none; }