/* ==========================================================================
   Prototype Embed — device enclosure for live prototype iframes
   Standalone stylesheet (loaded only by the enclosure page, not main.css).
   ========================================================================== */
/* ==========================================================================
   Core Variables
   ========================================================================== */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #eeedf5;
  --bg-tertiary: #f4eeff;
  --bg-inverse: #1a1823;
  --bg-accent: #6610f2;
  --bg-dark: #1a1823;
  --bg-light: #eeedf5;
  --text-primary: #1a1823;
  --text-secondary: #504d63;
  --text-muted: #706d82;
  --text-inverse: #f8f7fb;
  --text-accent: #6610f2;
  --text-dark: #1a1823;
  --text-light: #f8f7fb;
  --link-default: #6610f2;
  --link-hover: #540dc8;
  --link-visited: #420aa0;
  --border-default: #dddbe8;
  --border-strong: #a9a6b8;
  --border-inverse: #f8f7fb;
  --border-accent: #6610f2;
  --border-focus: #0891b2;
  --border-dark: #1a1823;
  --border-light: #eeedf5;
  --badge-solid: #f4eeff;
  --badge-solid-border: #e0d0ff;
  --badge-solid-text: #420aa0;
  --button-primary: #540dc8;
  --button-primary-text: #f4eeff;
  --button-primary-hover: #420aa0;
  --button-primary-text-hover: #f4eeff;
  --button-secondary-text: #200550;
  --button-secondary-text-hover: #540dc8;
  --button-secondary-underline: #540dc8;
  --success-bg: #d1fae5;
  --success-border: #34d399;
  --success-text: #047857;
  --warning-bg: #fef3c7;
  --warning-border: #fbbf24;
  --warning-text: #b45309;
  --danger-bg: #ffe4e6;
  --danger-border: #fb7185;
  --danger-text: #9f1239;
  --info-bg: #dbeafe;
  --info-border: #60a5fa;
  --info-text: #1d4ed8;
  --nav-bg: rgba(255, 255, 255, 0.75);
  --nav-border: var(--border-default);
  --font-weight-medium: 500;
}
[data-theme='dark'] {
  --bg-primary: #1a1823;
  --bg-secondary: #282636;
  --bg-tertiary: #200550;
  --bg-inverse: #f8f7fb;
  --bg-accent: #a465fd;
  --text-primary: #f8f7fb;
  --text-secondary: #a9a6b8;
  --text-muted: #706d82;
  --text-inverse: #1a1823;
  --text-accent: #a465fd;
  --link-default: #a465fd;
  --link-hover: #c4a1fe;
  --link-visited: #6610f2;
  --border-default: #3c394d;
  --border-strong: #706d82;
  --border-inverse: #1a1823;
  --border-accent: #a465fd;
  --border-focus: #0891b2;
  --badge-solid: #200550;
  --badge-solid-border: #540dc8;
  --badge-solid-text: #e0d0ff;
  --button-primary: #6610f2;
  --button-secondary-text: #f4eeff;
  --button-secondary-text-hover: #f4eeff;
  --button-secondary-underline: #a465fd;
  --success-bg: #047857;
  --success-border: #065f46;
  --success-text: #d1fae5;
  --warning-bg: #b45309;
  --warning-border: #92400e;
  --warning-text: #fef3c7;
  --danger-bg: #9f1239;
  --danger-border: #881337;
  --danger-text: #ffe4e6;
  --info-bg: #1d4ed8;
  --info-border: #1e40af;
  --info-text: #dbeafe;
  --nav-bg: rgba(26, 24, 35, 0.75);
  --nav-border: var(--border-default);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-primary: #1a1823;
    --bg-secondary: #282636;
    --bg-tertiary: #200550;
    --bg-inverse: #f8f7fb;
    --bg-accent: #a465fd;
    --text-primary: #f8f7fb;
    --text-secondary: #a9a6b8;
    --text-muted: #706d82;
    --text-inverse: #1a1823;
    --text-accent: #a465fd;
    --link-default: #a465fd;
    --link-hover: #c4a1fe;
    --link-visited: #6610f2;
    --border-default: #3c394d;
    --border-strong: #706d82;
    --border-inverse: #1a1823;
    --border-accent: #a465fd;
    --border-focus: #0891b2;
    --badge-solid: #200550;
    --badge-solid-border: #540dc8;
    --badge-solid-text: #e0d0ff;
    --button-primary: #6610f2;
    --button-secondary-text: #f4eeff;
    --button-secondary-text-hover: #f4eeff;
    --button-secondary-underline: #a465fd;
    --success-bg: #047857;
    --success-border: #065f46;
    --success-text: #d1fae5;
    --warning-bg: #b45309;
    --warning-border: #92400e;
    --warning-text: #fef3c7;
    --danger-bg: #9f1239;
    --danger-border: #881337;
    --danger-text: #ffe4e6;
    --info-bg: #1d4ed8;
    --info-border: #1e40af;
    --info-text: #dbeafe;
    --nav-bg: rgba(26, 24, 35, 0.75);
    --nav-border: var(--border-default);
  }
}
@media (max-width: 767.98px) {
  :root {
    --font-weight-medium: 600;
  }
}
/* ==========================================================================
   Motion Variables
   ========================================================================== */
/* ==========================================================================
   Border Variables
   ========================================================================== */
/* ==========================================================================
   Focus Indicator Variables
   ========================================================================== */
/* ==========================================================================
   Opacity Variables
   ========================================================================== */
/* ==========================================================================
   Grid breakpoints
   ========================================================================== */
/* ==========================================================================
   Mixins
   ========================================================================== */
/* Transition Styles */
/* Button Styles */
.button-drop-shadow {
  box-shadow: 0px 10px 24px -10px rgba(26, 24, 35, 0.6);
}
/* Button hover glow */
.shadow-button-hover {
  box-shadow: 0px 18px 40px -12px rgba(102, 16, 242, 0.6);
}
/* Global Shadow Styles */
.drop-shadow {
  box-shadow: 0px 7px 14px 0px rgba(26, 24, 35, 0.25);
}
.shadow-raised {
  box-shadow: 0px 10px 25px 0px rgba(26, 24, 35, 0.25);
}
/* Fluid type scale — clamp-based responsive font-size */
/* Animated Backgrounds */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* ==========================================================================
   Gradient Mixins
   ========================================================================== */
/* Animated underline effect for links - thin hairline underline that animates on hover */
/* Three-color diagonal background gradient for hero sections and cards */
/* Two-color diagonal background gradient with offset start */
/* Radial gradient that fades a single color out to transparent */
/* Preset gradient mixins for common color combinations */
/* Brand gradient — solid purple-500 for half, transitions to purple-800 */
/* Brand radial — purple-500 spotlight fading to transparent */
/* Ocean radial — ocean-500 spotlight fading to transparent */
/* Dual brand→ocean gradient (purple-400 to ocean-400) */
/* ==========================================================================
   Glass Icon Button
   ========================================================================== */
/* ==========================================================================
   Browser Chrome
   ========================================================================== */
/* ==========================================================================
   Image Containers (Browser Window, Email Card, Phone Frame, MacBook Frame)
   ========================================================================== */
.browser-window,
.email-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  width: 100%;
}
.browser-window__dots {
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.3125rem;
  grid-column: 1;
  justify-self: start;
}
.browser-window__dot {
  border-radius: 50%;
  display: block;
  height: 11px;
  width: 11px;
}
.browser-window__dot:nth-child(1) {
  background-color: #ff5f57;
}
.browser-window__dot:nth-child(2) {
  background-color: #febc2e;
}
.browser-window__dot:nth-child(3) {
  background-color: #28c840;
}
.browser-window__url {
  align-items: center;
  background-color: var(--bg-secondary);
  border-radius: 999px;
  display: flex;
  gap: 0.5rem;
  grid-column: 2;
  justify-content: center;
  min-width: 0;
  padding: 0.375rem 1rem;
}
.browser-window__url-icon {
  color: var(--text-secondary);
  flex-shrink: 0;
  font-size: 0.75rem;
}
.browser-window__url-text {
  color: var(--text-secondary);
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.75;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-window__header {
  align-items: center;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
  display: grid;
  gap: 0.625rem;
  grid-template-columns: minmax(0, 1fr) 60% minmax(0, 1fr);
  padding: 1rem;
}
.browser-window__media {
  background-color: #f8f7fb;
  display: block;
  overflow: hidden;
}
.browser-window__img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}
.browser-window__caption {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.75;
  padding: 1rem;
}
.email-card__header {
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
  gap: 0.75rem;
  padding: 1rem;
}
.email-card__sender {
  color: var(--text-secondary);
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.75;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-card__badge {
  flex-shrink: 0;
}
.email-card__media {
  background-color: #f8f7fb;
  display: block;
  overflow: hidden;
}
.email-card__img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}
.email-card__caption {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.75;
  padding: 1rem;
}
.phone-frame {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: clamp(30px, 10vw, 40px);
  display: block;
  overflow: hidden;
  padding: clamp(8px, 3vw, 12px);
  width: 100%;
}
.phone-frame__img {
  border-radius: clamp(22px, 7.5vw, 30px);
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}
.phone-frame__screen {
  background-color: #1a1823;
  border-radius: clamp(22px, 7.5vw, 30px);
  container-type: inline-size;
  overflow: hidden;
  position: relative;
}
.phone-frame__statusbar {
  align-items: center;
  color: #f8f7fb;
  display: flex;
  height: 14cqw;
}
.phone-frame__clock {
  flex: 1;
  font-family: 'Poppins', sans-serif;
  font-size: 3.8cqw;
  font-weight: var(--font-weight-medium);
  text-align: center;
}
.phone-frame__indicators {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 1.8cqw;
  justify-content: center;
}
.phone-frame__icon {
  display: block;
  height: 3cqw;
  width: auto;
}
.phone-frame__island {
  background-color: #111017;
  border-radius: 999px;
  flex: 0 0 30cqw;
  height: 7.5cqw;
}
.phone-frame__viewport {
  display: block;
}
.macbook-frame {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
}
.macbook-frame__lid {
  background-color: var(--bg-dark);
  border: clamp(3px, 0.5vw, 5px) solid #a9a6b8;
  border-radius: clamp(12px, 1.5vw, 20px);
  padding: clamp(6px, 0.9vw, 10px);
  width: 90%;
}
.macbook-frame__screen {
  aspect-ratio: 16 / 10;
  background-color: #1a1823;
  border-radius: clamp(4px, 0.8vw, 8px);
  display: block;
  overflow: hidden;
  width: 100%;
}
.macbook-frame__screen--interactive {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.macbook-frame__img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  width: 100%;
}
.macbook-frame__base {
  background-color: #a9a6b8;
  border-radius: 0 0 clamp(10px, 1.4vw, 16px) clamp(10px, 1.4vw, 16px);
  height: clamp(12px, 1.6vw, 18px);
  position: relative;
  width: 100%;
}
.macbook-frame__base::before {
  background-color: #706d82;
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.macbook-frame__base::after {
  background-color: #504d63;
  border-radius: 0 0 6px 6px;
  content: '';
  height: clamp(4px, 0.6vw, 7px);
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 18%;
}
.macbook-frame__caption {
  color: var(--text-secondary);
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.75;
  padding: 1rem 0 0;
}
.step-label {
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.step-label__number {
  color: var(--text-accent);
  margin-right: 0.5rem;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
.prototype-embed {
  background-color: var(--bg-dark);
  background-image: radial-gradient(circle, rgba(60, 57, 77, 0.5) 1px, transparent 1px);
  background-size: 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 3rem 1.5rem;
}
.prototype-embed__toggle {
  align-self: center;
  background-color: rgba(26, 24, 35, 0.6);
  border: 1px solid #3c394d;
  border-radius: 999px;
  display: inline-flex;
  gap: 0.25rem;
  padding: 4px;
}
.prototype-embed__toggle-btn {
  align-items: center;
  appearance: none;
  background-color: transparent;
  border: 0;
  border-radius: 999px;
  color: #a9a6b8;
  cursor: pointer;
  display: inline-flex;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  gap: 0.5rem;
  height: 40px;
  justify-content: center;
  padding: 0 1rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.prototype-embed__toggle-btn:hover {
  color: #f8f7fb;
}
.prototype-embed__toggle-btn.is-active {
  background-color: var(--button-primary);
  color: var(--button-primary-text);
}
.prototype-embed__stage {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: auto;
  width: 100%;
}
.prototype-embed__device {
  margin: auto;
  width: 100%;
}
.prototype-embed__device--desktop {
  max-width: 1920px;
}
.prototype-embed__device--mobile {
  max-width: 480px;
}
.prototype-embed[data-mode='desktop'] .prototype-embed__device--mobile {
  display: none;
}
.prototype-embed[data-mode='mobile'] .prototype-embed__device--desktop {
  display: none;
}
.prototype-embed__desktop-viewport {
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.prototype-embed__iframe {
  border: 0;
  display: block;
}
.prototype-embed__iframe--desktop {
  height: var(--proto-desktop-height, 1200px);
  transform: scale(var(--proto-scale, 1));
  transform-origin: top left;
  width: var(--proto-desktop-width, 1920px);
}
.prototype-embed .phone-frame {
  border-radius: var(--proto-mobile-radius, clamp(30px, 10vw, 40px));
}
.prototype-embed .phone-frame--device .phone-frame__screen {
  border-radius: var(--proto-mobile-radius-inner, clamp(22px, 7.5vw, 30px));
}
.prototype-embed__iframe--mobile {
  aspect-ratio: 390 / 800;
  border-radius: var(--proto-mobile-radius-inner, clamp(22px, 7.5vw, 30px));
  width: 100%;
}
.phone-frame--device .prototype-embed__iframe--mobile {
  border-radius: 0;
}
@media (max-width: 767.98px) {
  .prototype-embed {
    background: none;
    gap: 0;
    min-height: 0;
    padding: 0;
  }
  .prototype-embed__toggle {
    display: none;
  }
  .prototype-embed__device--desktop {
    display: none;
  }
  .prototype-embed__device--mobile {
    max-width: none;
  }
  .prototype-embed[data-mode='desktop'] .prototype-embed__device--mobile,
  .prototype-embed[data-mode='mobile'] .prototype-embed__device--mobile {
    display: block;
  }
}
@media (max-width: 767.98px) {
  .phone-frame.phone-frame--block {
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .phone-frame--device .phone-frame__statusbar,
  .phone-frame--device .phone-frame__island {
    display: none;
  }
  .prototype-embed .phone-frame--device .phone-frame__screen {
    border-radius: 0;
  }
  .prototype-embed__iframe--mobile {
    aspect-ratio: auto;
    border-radius: 0;
    height: 100vh;
    height: 100dvh;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .prototype-embed__toggle-btn {
    transition: none;
  }
}