/* src/styles/base/reset.css */
*, *:before, *:after {
  box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[role="list"], ol[role="list"], ul.sidebar-list, ul.empty-bullets {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  line-height: 1.55;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

input, textarea, select {
  outline: none;
  background: none;
  border: none;
}

/* src/styles/base/tokens.css */
:root {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --bg-base: #0e1622;
  --bg-raised: #16202e;
  --bg-elev: #1b2635;
  --bg-elev-band: #22303f;
  --bg-glass: #16202e8c;
  --bg-glass-strong: #16202ec7;
  --bg-modal: #1b2635;
  --border-subtle: #ffffff14;
  --border-strong: #ffffff24;
  --ink-rgb: 255, 255, 255;
  --shade-rgb: 0, 0, 0;
  --shade-scale: 1;
  --bg-well: #0000004d;
  --on-brand: #0f1b2d;
  --text-primary: #f2f6fa;
  --text-secondary: #c9d3de;
  --text-muted: #8fa0b3;
  --text-faint: #6c7c91;
  --accent: #40a0d0;
  --accent-2: #8ccbea;
  --accent-grad: linear-gradient(135deg, #40a0d0 0%, #8ccbea 100%);
  --accent-glow: 0 0 32px #40a0d073;
  --brand-blue: #1f6fa3;
  --brand-violet: #2a86be;
  --brand-magenta: #5fb8e0;
  --brand-grad: linear-gradient(90deg, #2a86be 0%, #5fb8e0 34%, #8ccbea 66%, #c9e6f5 100%);
  --brand-grad-soft: linear-gradient(135deg, #1f6fa329 0%, #2a86be29 50%, #5fb8e029 100%);
  --brand-grad-faint: linear-gradient(135deg, #1f6fa30f 0%, #2a86be0f 50%, #5fb8e00f 100%);
  --brand-glow: 0 0 40px #2a86be59;
  --brand-glow-strong: 0 0 72px #2a86be8c;
  --bg-deepest: #0b1220;
  --bg-deep: #121b27;
  --bg-card: #16202e;
  --danger: #ff5e7a;
  --danger-soft: #ff5e7a24;
  --success: #3ddc97;
  --success-soft: #3ddc9724;
  --warning: #ffba6e;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 16px -8px #0006;
  --shadow-md: 0 8px 24px -12px #00000080;
  --shadow-glass: 0 10px 40px -10px #00000080, inset 0 1px 0 #ffffff0f;
  --shadow-elev: 0 24px 60px -20px #000000b3, inset 0 1px 0 #ffffff14;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-voice: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-snappy: cubic-bezier(.2, .7, .2, 1);
  --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .14s;
  --dur-med: .24s;
  --dur-slow: .32s;
  --dur-flip: .4s;
  --dur-lift: .9s;
  --dur-loop: 9s;
  --ease-sweep: cubic-bezier(.45, 0, .2, 1);
  --focus-ring: 0 0 0 3px #40a0d059;
}

:root[data-theme="light"], [data-theme="light"] {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
  --bg-base: #fff;
  --bg-raised: #f4f8fb;
  --bg-elev: #fff;
  --bg-elev-band: #eef4f9;
  --bg-glass: #ffffffb8;
  --bg-glass-strong: #ffffffe6;
  --bg-modal: #fff;
  --bg-well: #0f1b2d0d;
  --border-subtle: #0f1b2d1f;
  --border-strong: #0f1b2d38;
  --ink-rgb: 15, 27, 45;
  --shade-rgb: 15, 27, 45;
  --shade-scale: .3;
  --on-brand: #fff;
  --text-primary: #0f1b2d;
  --text-secondary: #3f5068;
  --text-muted: #6c7c91;
  --text-faint: #9aa8b8;
  --accent: #1f6fa3;
  --accent-2: #2a86be;
  --accent-grad: linear-gradient(135deg, #1f6fa3 0%, #2a86be 100%);
  --accent-glow: 0 0 32px #1f6fa338;
  --brand-grad: linear-gradient(90deg, #174a6e 0%, #2a86be 34%, #5fb8e0 66%, #a9d6ee 100%);
  --brand-grad-soft: linear-gradient(135deg, #1f6fa31a 0%, #2a86be1a 50%, #5fb8e01a 100%);
  --brand-grad-faint: linear-gradient(135deg, #1f6fa30d 0%, #2a86be0d 50%, #5fb8e00d 100%);
  --brand-glow: 0 0 40px #2a86be2e;
  --brand-glow-strong: 0 0 72px #2a86be47;
  --bg-deepest: #eef4f9;
  --bg-deep: #f4f8fb;
  --bg-card: #fff;
  --danger: #d7304d;
  --danger-soft: #d7304d1f;
  --success: #1e9e6a;
  --success-soft: #1e9e6a1f;
  --warning: #b8731a;
  --shadow-sm: 0 4px 16px -8px #0f1b2d2e;
  --shadow-md: 0 8px 24px -12px #0f1b2d38;
  --shadow-glass: 0 10px 40px -10px #0f1b2d29, inset 0 1px 0 #fffc;
  --shadow-elev: 0 24px 60px -20px #0f1b2d47, inset 0 1px 0 #ffffffe6;
}

/* src/styles/base/typography.css */
html {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-base);
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  letter-spacing: -.005em;
}

h1 {
  letter-spacing: -.025em;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
}

h2 {
  letter-spacing: -.02em;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
}

h3 {
  letter-spacing: -.01em;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

p {
  color: var(--text-secondary);
}

::selection {
  color: var(--text-primary);
  background: #40a0d066;
}

/* src/styles/base/animations.css */
@keyframes aurora {
  0% {
    transform: translate3d(-8%, -4%, 0)rotate(0)scale(1);
  }

  50% {
    transform: translate3d(8%, 4%, 0)rotate(180deg)scale(1.08);
  }

  100% {
    transform: translate3d(-8%, -4%, 0)rotate(360deg)scale(1);
  }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 #40a0d08c;
  }

  50% {
    box-shadow: 0 0 0 8px #40a0d000;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200%;
  }

  100% {
    background-position: 200%;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-up-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shake-x {
  0%, 100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-5px);
  }

  40% {
    transform: translateX(4px);
  }

  60% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(2px);
  }
}

@keyframes glow-flash {
  0% {
    box-shadow: 0 0 #3ddc9700;
  }

  40% {
    box-shadow: 0 0 12px 1px #3ddc978c;
  }

  100% {
    box-shadow: 0 0 #3ddc9700;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* src/styles/components/aurora.css */
.aurora-bg {
  position: fixed;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 20% 0%, #1f6fa324 0%, #0e162200 60%), radial-gradient(ellipse 70% 50% at 100% 30%, #5fb8e01a 0%, #0e162200 60%), radial-gradient(ellipse 70% 60% at 50% 100%, #2a86be1a 0%, #0e162200 60%), var(--bg-base);
  inset: 0;
}

.aurora-bg:before, .aurora-bg:after {
  content: "";
  position: absolute;
  filter: blur(80px);
  opacity: .55;
  mix-blend-mode: screen;
  will-change: transform;
  border-radius: 50%;
  width: 70vmax;
  height: 70vmax;
}

.aurora-bg:before {
  animation: aurora 22s var(--ease-soft) infinite;
  background: radial-gradient(closest-side, #1f6fa352, #2a86be2e 55%, #0000);
  top: -20%;
  left: -10%;
}

.aurora-bg:after {
  animation: aurora 28s var(--ease-soft) infinite reverse;
  background: radial-gradient(closest-side, #5fb8e047, #2a86be29 55%, #0000);
  bottom: -25%;
  right: -15%;
}

.auth-backdrop-scene {
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  transition: opacity .9s;
}

.auth-backdrop-scene[data-faded="true"] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .auth-backdrop-scene {
    transition: none;
  }
}

/* src/styles/components/glass.css */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-glass);
}

/* src/styles/components/button.css */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items:  center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  letter-spacing: -.005em;
  cursor: pointer;
  user-select: none;
  transition: transform .18s var(--ease-snappy), box-shadow .22s var(--ease-snappy), background .18s, border-color .18s, color .18s, opacity .18s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  padding: 10px 18px;
  font-size: .95rem;
  font-weight: 500;
}

.btn:active:not(:disabled) {
  transform: translateY(0)scale(.98);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .55;
  filter: grayscale(25%);
  box-shadow: none !important;
  transform: none !important;
}

.btn-primary {
  color: var(--on-brand);
  background: var(--brand-grad);
  transition: transform .22s var(--ease-snappy), box-shadow .26s var(--ease-snappy), background-position .6s ease, opacity .18s;
  background-position: 0%;
  background-size: 200% 200%;
  border: none;
  font-weight: 600;
  box-shadow: 0 8px 24px -8px #2a86be8c, inset 0 1px #ffffff40;
}

.btn-primary:hover:not(:disabled) {
  background-position: 100%;
  transform: translateY(-1px);
  box-shadow: 0 16px 48px -10px #2a86beb3, 0 0 36px #5fb8e059, inset 0 1px #ffffff59;
}

.btn-ghost {
  color: var(--text-primary);
  background: rgba(var(--ink-rgb), .04);
  border: 1px solid var(--border-subtle);
}

.btn-ghost:hover:not(:disabled) {
  background: rgba(var(--ink-rgb), .08);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.btn-sm {
  border-radius: 10px;
  padding: 7px 14px;
  font-size: .875rem;
}

.btn-lg {
  border-radius: 14px;
  padding: 14px 24px;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
}

.btn-glyph {
  opacity: .9;
  margin-right: 2px;
  font-size: 1.1em;
  line-height: 1;
}

.oauth-btn {
  display: flex;
  border-radius: var(--radius-md);
  background: rgba(var(--ink-rgb), .04);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: transform .18s var(--ease-snappy), box-shadow .22s, background .18s, border-color .18s;
  justify-content: center;
  align-items:  center;
  gap: 12px;
  padding: 12px 18px;
  font-size: .95rem;
  font-weight: 500;
}

.oauth-btn:hover {
  background: rgba(var(--ink-rgb), .07);
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px -12px rgba(var(--shade-rgb), calc(.45 * var(--shade-scale)));
  transform: translateY(-1px);
}

.oauth-btn:active {
  transform: translateY(0)scale(.98);
}

.oauth-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.oauth-icon {
  display: inline-flex;
  transition: transform var(--dur-med) var(--ease-out-back);
  justify-content: center;
  align-items:  center;
  width: 20px;
  height: 20px;
}

.oauth-btn:hover .oauth-icon {
  transform: scale(1.12)rotate(-4deg);
}

.oauth-github .oauth-icon {
  color: var(--text-primary);
}

/* src/styles/components/input.css */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  display: flex;
  color: var(--text-muted);
  letter-spacing: .01em;
  justify-content: space-between;
  align-items: baseline;
  font-size: .8125rem;
  font-weight: 500;
}

.field-link {
  color: var(--text-faint);
  transition: color .16s;
  font-size: .8125rem;
}

.field-link:hover {
  color: var(--accent-2);
}

.input {
  border-radius: var(--radius-md);
  background: rgba(var(--ink-rgb), .03);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  width: 100%;
  padding: 12px 14px;
  transition: border-color .16s, background .16s, box-shadow .2s;
  font-size: .95rem;
}

.input::placeholder {
  color: var(--text-faint);
}

.input:hover {
  border-color: var(--border-strong);
}

.input:focus {
  border-color: var(--accent);
  background: #40a0d00f;
  box-shadow: 0 0 0 4px #40a0d02e;
}

.input:focus-visible {
  border-color: var(--accent);
  background: #40a0d00f;
  box-shadow: 0 0 0 4px #40a0d02e;
}

.form-error {
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: #ffd7df;
  animation: fade-up var(--dur-med) var(--ease-soft);
  border: 1px solid #ff5e7a4d;
  padding: 10px 12px;
  font-size: .875rem;
}

.form-notice {
  border-radius: var(--radius-md);
  color: #c4f1ff;
  margin-bottom: var(--space-3);
  background: #8ccbea14;
  border: 1px solid #8ccbea38;
  padding: 10px 12px;
  font-size: .875rem;
}

.field-error {
  color: var(--danger);
  animation: fade-up var(--dur-fast) var(--ease-soft);
  font-size: .78rem;
  line-height: 1.4;
}

.field-hint {
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.4;
}

.field-hint code {
  color: var(--text-secondary);
  background: rgba(var(--ink-rgb), .06);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: .92em;
}

.field-hint-faint {
  color: var(--text-faint);
}

.input[aria-invalid="true"] {
  border-color: #ff5e7a8c;
}

.pw-meter {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  margin-top: 2px;
}

.pw-meter-bars {
  display: flex;
  flex: 1;
  gap: 4px;
}

.pw-meter-bar {
  border-radius: var(--radius-pill);
  background: rgba(var(--ink-rgb), .09);
  transition: background var(--dur-med) var(--ease-snappy);
  flex: 1;
  height: 4px;
}

.pw-meter-bar:nth-child(2) {
  transition-delay: 60ms;
}

.pw-meter-bar:nth-child(3) {
  transition-delay: .12s;
}

.pw-meter-bar:nth-child(4) {
  transition-delay: .18s;
}

.pw-meter-bar--danger {
  background: var(--danger);
}

.pw-meter-bar--warning {
  background: var(--warning);
}

.pw-meter-bar--success {
  background: var(--success);
}

.pw-meter--strong .pw-meter-bar--success {
  animation: glow-flash .7s var(--ease-soft);
}

.pw-meter-label {
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color var(--dur-med) var(--ease-soft);
  font-size: .72rem;
  font-weight: 600;
}

.pw-meter-label--danger {
  color: var(--danger);
}

.pw-meter-label--warning {
  color: var(--warning);
}

.pw-meter-label--success {
  color: var(--success);
}

/* src/styles/components/modal.css */
.modal-overlay {
  position: fixed;
  display: flex;
  z-index: 100;
  padding: var(--space-4);
  animation: fade-in var(--dur-med) var(--ease-soft);
  background: #060a10d1;
  justify-content: center;
  align-items:  center;
  inset: 0;
}

@keyframes modal-in {
  0% {
    opacity: 0;
    transform: translateY(10px)scale(.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.modal {
  position: relative;
  color: var(--text-primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: flex;
  max-height: calc(100dvh - 2 * var(--space-4));
  overflow: hidden;
  box-shadow: 0 32px 80px -24px rgba(var(--shade-rgb), calc(.75 * var(--shade-scale))), 0 0 80px #2a86be2e, inset 0 1px 0 rgba(var(--ink-rgb), .06);
  animation: modal-in var(--dur-slow) var(--ease-soft);
  overflow: hidden;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 520px;
  padding: 28px;
}

.modal-head {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 6px;
}

.modal-title {
  letter-spacing: -.015em;
  font-size: 1.375rem;
  font-weight: 600;
}

.modal-subtitle {
  color: var(--text-muted);
  font-size: .875rem;
}

.modal-body {
  display: flex;
  position: relative;
  overflow-y: auto;
  flex-direction: column;
  flex: auto;
  gap: 18px;
  min-height: 0;
}

.modal-actions {
  position: sticky;
  background: var(--bg-modal);
  display: flex;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  box-sizing: content-box;
  justify-content: flex-end;
  align-items:  center;
  gap: 10px;
  min-height: 44px;
  bottom: 0;
}

.modal-steps {
  position: relative;
  overflow: hidden;
  flex: none;
}

.modal-stepped {
  height: min(760px, calc(100dvh - 2 * var(--space-4)));
}

.modal-stepped .modal-steps {
  transition: height var(--dur-slow) var(--ease-soft);
  flex: auto;
  height: auto;
  min-height: 0;
}

.modal-steps-track {
  display: flex;
  transition: transform var(--dur-slow) var(--ease-soft);
  height: 100%;
}

.modal-step {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  display: flex;
  gap: var(--space-4);
  flex-direction: column;
  flex: 0 0 100%;
  justify-content: safe center;
  min-width: 0;
  height: 100%;
  padding-right: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .modal-steps-track, .modal-stepped .modal-steps {
    transition: none;
  }
}

.modal-close {
  position: absolute;
  display: inline-flex;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items:  center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1;
  top: 18px;
  right: 18px;
}

.modal-close:hover {
  color: var(--text-primary);
  background: rgba(var(--ink-rgb), .06);
}

.modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.modal-head {
  padding-right: 34px;
}

.modal-head-with-nav {
  padding-top: 30px;
  padding-right: 0;
}

.modal-head-with-nav .modal-back {
  top: 0;
  left: 0;
  right: auto;
}

.modal-head-with-nav .modal-close {
  top: -2px;
  right: 0;
}

.modal-step-stack {
  display: flex;
  gap: var(--space-4);
  flex-direction: column;
}

.modal-brief {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.modal-brief-label {
  margin-bottom: var(--space-2);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 600;
}

.modal-brief-text {
  color: var(--text-primary);
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
}

.modal-brief-note {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: .8rem;
}

.modal-back {
  position: absolute;
  display: inline-flex;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-items:  center;
  gap: 6px;
  padding: 4px 8px;
  font-size: .8125rem;
  top: -2px;
  right: 0;
}

.modal-back:hover {
  color: var(--text-primary);
  background: rgba(var(--ink-rgb), .04);
}

.modal-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
}

.choice-grid-hosts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  grid-auto-rows: minmax(0, 1fr);
  flex: auto;
  min-height: 0;
}

.choice-grid-hosts .choice-card {
  justify-content: center;
  gap: 2px;
  min-height: 0;
  padding: 12px 14px;
}

.choice-card {
  display: flex;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(var(--ink-rgb), .02);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
  flex-direction: column;
  align-items:  flex-start;
  gap: 6px;
  min-height: 132px;
}

.choice-card:hover {
  border-color: var(--border-strong);
  background: rgba(var(--ink-rgb), .045);
  transform: translateY(-1px);
}

.choice-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.choice-card-head {
  display: flex;
  align-items:  center;
  gap: 8px;
  min-width: 0;
}

.choice-card-mark {
  display: inline-flex;
  color: var(--text-secondary);
  flex: none;
  width: 1rem;
  height: 1rem;
}

.choice-card-mark svg {
  width: 100%;
  height: 100%;
}

.choice-card:hover .choice-card-mark {
  color: var(--text-primary);
}

.choice-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9375rem;
  font-weight: 600;
}

.choice-card-note {
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.45;
}

.publish-moment {
  padding: var(--space-7) var(--space-7) var(--space-6);
  text-align: left;
  max-width: 560px;
}

.publish-moment-eyebrow {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: .72rem;
}

.publish-moment-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-voice);
  letter-spacing: -.03em;
  background: var(--brand-grad);
  -webkit-text-fill-color: transparent;
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: .06em;
  font-size: clamp(3.4rem, 8vw, 5rem);
  font-style: normal;
  font-weight: 400;
  line-height: .9;
}

.publish-moment-title--plain {
  font-family: var(--font-sans);
  letter-spacing: -.02em;
  -webkit-text-fill-color: var(--text-primary);
  color: var(--text-primary);
  background: none;
  padding-bottom: 0;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
}

.publish-moment-sub {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.5;
}

.publish-moment-url {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: rgba(var(--shade-rgb), calc(.3 * var(--shade-scale)));
  font-family: var(--font-mono);
  padding: 6px 6px 6px 16px;
  font-size: .95rem;
}

.publish-moment-url a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.publish-moment-actions {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
}

.publish-moment-note {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: .82rem;
}

.confirm-dialog-choice {
  color: var(--text-secondary);
  display: flex;
  align-items:  flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  line-height: 1.45;
}

.confirm-dialog-choice input {
  flex: none;
  margin-top: 3px;
}

/* src/styles/components/spinner.css */
.spinner {
  display: inline-block;
  border: 2px solid rgba(var(--ink-rgb), .18);
  border-top-color: var(--accent, #40a0d0);
  animation: .8s linear infinite spin;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.spinner-lg {
  border-width: 3px;
  width: 44px;
  height: 44px;
}

.spinner-sm {
  border-width: 2px;
  border-color: rgba(var(--ink-rgb), .28);
  border-top-color: currentColor;
  width: 14px;
  height: 14px;
}

.loading-dialog {
  text-align: center;
  align-items:  center;
  gap: 18px;
  max-width: 380px;
  padding: 36px 32px;
}

.loading-dialog .modal-title {
  margin-top: 4px;
}

.loading-dialog .modal-subtitle {
  max-width: 28ch;
}

.loading-dialog-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.launch-steps {
  display: grid;
  text-align: left;
  gap: 12px;
  width: 100%;
}

.launch-steps-list {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.launch-step {
  display: flex;
  color: var(--text-muted);
  align-items:  center;
  gap: 10px;
  font-size: .9rem;
}

.launch-step--active {
  color: var(--text);
}

.launch-step-label {
  flex: 1;
}

.launch-step-time {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: .8rem;
}

.launch-step--done {
  color: var(--text-muted);
  text-decoration: line-through;
}

.launch-step-mark {
  background: var(--border);
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
}

.launch-step--active .launch-step-mark {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
  animation: 1.4s ease-in-out infinite launch-step-pulse;
}

@keyframes launch-step-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  }

  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 8%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .launch-step--active .launch-step-mark {
    animation: none;
  }
}

.launch-step--done .launch-step-mark {
  background: var(--success, var(--accent));
}

.launch-steps-hint {
  color: var(--text-muted);
  margin: 0;
  font-size: .8rem;
}

/* src/styles/components/legal.css */
.page-legal {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.legal-head {
  padding: 2rem clamp(1.25rem, 5vw, 3rem) 0;
}

.legal-home {
  display: inline-flex;
  text-decoration: none;
}

.legal-main {
  display: flex;
  flex: 1;
  justify-content: center;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 8vw, 6rem);
}

.legal-doc {
  width: 100%;
  max-width: 68ch;
}

.legal-eyebrow {
  color: var(--text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
  font-size: .8125rem;
}

.legal-doc h1 {
  background: var(--brand-grad);
  color: #0000;
  text-wrap: balance;
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0 0 1.25rem;
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  line-height: 1.1;
}

.legal-intro {
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  margin: 0 0 2.5rem;
  padding-bottom: 2rem;
  font-size: 1.125rem;
  line-height: 1.7;
}

.legal-section {
  margin-bottom: 2.5rem;
}

.legal-section h2 {
  color: var(--text-primary);
  letter-spacing: -.01em;
  margin: 0 0 .875rem;
  font-size: 1.25rem;
}

.legal-section p {
  color: var(--text-secondary);
  margin: 0 0 1rem;
  line-height: 1.75;
}

.legal-section ul {
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: .625rem;
  margin: 0 0 1rem;
  padding: 0;
}

.legal-section li {
  color: var(--text-secondary);
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.7;
}

.legal-section li:before {
  background: var(--brand-grad);
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  top: .7em;
  left: 0;
}

.legal-section p:last-child, .legal-section ul:last-child {
  margin-bottom: 0;
}

/* src/styles/components/public-navbar.css */
.brand {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-3);
  letter-spacing: -.02em;
  color: var(--text-primary);
  transition: opacity .18s var(--ease-snappy);
  font-weight: 700;
}

.brand:hover {
  opacity: .85;
}

.brand-mark {
  display: inline-flex;
  border-radius: var(--radius-sm);
  background: var(--brand-grad-soft);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  justify-content: center;
  align-items:  center;
  width: 32px;
  height: 32px;
  box-shadow: inset 0 1px #ffffff14;
}

.brand-mark img {
  object-fit: contain;
  width: 28px;
  height: 28px;
}

.brand-word {
  font-size: 1.05rem;
}

.lp-topbar {
  position: sticky;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  transition: background .28s var(--ease-soft), border-color .28s var(--ease-soft), box-shadow .28s var(--ease-soft), backdrop-filter .28s var(--ease-soft);
  border-bottom: 1px solid #0000;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  top: 0;
}

.lp-topbar.is-scrolled {
  background: var(--bg-glass-strong);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.lp-nav {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
}

.lp-theme-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  background: var(--bg-well);
  border-radius: 999px;
  flex: none;
  align-items:  center;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 3px;
}

.lp-theme-toggle button {
  display: grid;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items:  center;
  width: 28px;
  height: 28px;
  padding: 0;
  transition: background .18s, color .18s, box-shadow .18s;
}

.lp-theme-toggle button[aria-pressed="true"] {
  background: var(--bg-elev-band);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.lp-theme-toggle button:hover {
  color: var(--accent);
}

.lp-theme-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lp-theme-toggle svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 640px) {
  .lp-topbar {
    padding: var(--space-3) var(--space-4);
  }

  .lp-topbar .brand-word {
    display: none;
  }

  .lp-nav {
    gap: 2px;
  }
}

@media (max-width: 400px) {
  .lp-topbar {
    gap: 6px;
    padding-inline-start: 10px;
    padding-inline-end: 10px;
  }

  .lp-theme-toggle button {
    width: 23px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-theme-toggle button {
    transition: none;
  }
}

@media (max-width: 800px) {
  .lp-topbar .brand-word {
    display: none;
  }
}

@media (max-width: 360px) {
  .lp-theme-toggle {
    gap: 0;
    padding: 2px;
  }

  .lp-theme-toggle button {
    width: 21px;
  }
}

/* src/styles/indexes/Landing.css */
.page-landing {
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
}

.lp-bg {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 60% at 18% -5%, #1f6fa329 0%, #0e162200 55%), radial-gradient(ellipse 80% 55% at 100% 12%, #5fb8e01f 0%, #0e162200 55%), radial-gradient(ellipse 80% 60% at 50% 110%, #2a86be1f 0%, #0e162200 55%), var(--bg-base);
  inset: 0;
}

.lp-main {
  display: block;
  position: relative;
}

.lp-page {
  position: relative;
  color: var(--text-primary);
}

.lp-section {
  position: relative;
  padding: var(--space-9) var(--space-5);
}

.lp-section-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.lp-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}

.lp-section-head-wide {
  max-width: none;
}

.lp-section-head-wide .lp-h2 {
  text-wrap: balance;
}

.lp-section-head .lp-h2 {
  letter-spacing: -.035em;
  text-wrap: balance;
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3.6rem);
  line-height: 1.08;
}

.lp-section-head .lp-h2 em {
  font-family: var(--font-voice);
  color: var(--accent-2);
  font-style: normal;
  font-weight: 400;
}

.lp-section-head .lp-lede {
  text-align: center;
  text-wrap: pretty;
  max-width: 52ch;
  margin-inline-start: auto;
  margin-inline-end: auto;
  line-height: 1.65;
}

.lp-section-head > :last-child {
  margin-bottom: 0;
}

.lp-eyebrow {
  display: inline-block;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-violet);
  margin-bottom: var(--space-4);
  font-size: .78rem;
  font-weight: 600;
}

.lp-h2 {
  font-family: var(--font-sans);
  letter-spacing: -.025em;
  color: var(--text-primary);
  text-wrap: pretty;
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.65rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.12;
}

.lp-lede {
  font-family: var(--font-sans);
  text-align: left;
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0;
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem);
  font-weight: 400;
  line-height: 1.7;
}

.lp-grad {
  background: var(--brand-grad);
  -webkit-text-fill-color: transparent;
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}

.btn-brand {
  color: var(--on-brand);
  background: var(--brand-grad);
  transition: transform .22s var(--ease-snappy), box-shadow .26s var(--ease-snappy), background-position .6s ease, opacity .18s;
  background-position: 0%;
  background-size: 200% 200%;
  border: none;
  font-weight: 600;
  box-shadow: 0 8px 24px -8px #2a86be8c, inset 0 1px #ffffff40;
}

.btn-brand:hover:not(:disabled) {
  background-position: 100%;
  transform: translateY(-1px);
  box-shadow: 0 16px 48px -10px #2a86beb3, 0 0 36px #5fb8e059, inset 0 1px #ffffff59;
}

.lp-root.is-live [data-reveal] {
  opacity: 0;
  transition: opacity .38s var(--ease-soft), transform .38s var(--ease-soft);
  will-change: opacity, transform;
  transform: translateY(12px);
}

.lp-root.is-live [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .lp-root.is-live [data-reveal] {
    opacity: 1;
    transition: none;
    transform: none;
  }
}

.lp-nav-link {
  padding: var(--space-2) 10px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color .16s var(--ease-snappy), background .16s var(--ease-snappy);
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 500;
}

.lp-nav-link:hover {
  color: var(--text-primary);
  background: rgba(var(--ink-rgb), .05);
}

.lp-nav-signin {
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  margin-left: var(--space-2);
  margin-right: var(--space-1);
  transition: color .16s var(--ease-snappy);
  font-size: .92rem;
  font-weight: 550;
}

.lp-nav-signin:hover {
  color: var(--text-primary);
}

.lp-hero {
  position: relative;
  padding: clamp(var(--space-5), 4vw, 56px) var(--space-5) 0;
  overflow: hidden;
}

.lp-hero:after {
  content: "";
  position: absolute;
  z-index: 2;
  background: linear-gradient(to bottom, transparent, var(--bg-base));
  pointer-events: none;
  height: 80px;
  inset: auto 0 0;
}

.lp-hero-ambient {
  mask-image: linear-gradient(#000 60%, #0000 100%);
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transform-origin: 40% 40%;
  animation: 24s ease-in-out infinite alternate lp-breathe;
  background: radial-gradient(900px 600px at 18% -10%, #4f86ad42, #0000 60%), radial-gradient(760px 520px at 100% 105%, #2d5b7a5c, #0000 60%);
  inset: 0;
}

@keyframes lp-breathe {
  from {
    opacity: .82;
    transform: scale(1);
  }

  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

.lp-hero-top {
  position: relative;
  z-index: 1;
  transform: translate3d(0, calc(var(--lp-stage, 0) * 72px), 0);
  opacity: calc(1 - var(--lp-stage, 0) * .85);
  will-change: transform, opacity;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  max-width: 1280px;
  margin: 0 auto;
}

.lp-hero-lead {
  display: flex;
  gap: var(--space-4);
  flex-direction: column;
  min-width: 0;
}

.lp-hero-title {
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.25rem);
  font-weight: 700;
  line-height: .96;
}

.lp-hero-prefix {
  display: block;
  font-family: var(--font-voice);
  letter-spacing: -.025em;
  margin-bottom: .12em;
  font-size: .8em;
  font-weight: 400;
  line-height: 1.05;
}

.lp-way {
  margin: var(--space-4) 0 var(--space-2);
  border: 0;
  min-width: 0;
  padding: 0;
}

.lp-way-legend {
  margin-bottom: var(--space-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0;
  font-size: .78rem;
  font-weight: 600;
}

.lp-way-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 560px;
}

.lp-way-option {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: rgba(var(--ink-rgb), .04);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-snappy), background var(--dur-fast) var(--ease-snappy), color var(--dur-fast) var(--ease-snappy), transform var(--dur-fast) var(--ease-snappy);
  align-items:  center;
  row-gap: 2px;
}

.lp-way-option:hover {
  border-color: var(--border-strong);
  background: rgba(var(--ink-rgb), .07);
  transform: translateY(-1px);
}

.lp-way-option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--brand-grad-soft);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.lp-way-icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  border: 1px solid var(--border-subtle);
  color: var(--accent-2);
  background: rgba(var(--ink-rgb), .04);
  border-radius: 10px;
  justify-content: center;
  align-items:  center;
  width: 34px;
  height: 34px;
}

.lp-way-title {
  color: var(--text-primary);
  font-size: 1.05rem;
  line-height: 1.2;
}

.lp-way-say .lp-way-title {
  font-family: var(--font-voice);
  font-size: 1.15rem;
  font-weight: 500;
}

.lp-way-code .lp-way-title {
  font-family: var(--font-mono);
  letter-spacing: -.03em;
  font-size: .95rem;
  font-weight: 500;
}

.lp-way-sub {
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .lp-way-options {
    grid-template-columns: 1fr;
  }
}

.lp-hero-voice {
  position: relative;
  display: block;
}

.lp-voice {
  display: block;
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
}

.lp-voice-say {
  font-family: var(--font-voice);
  letter-spacing: -.02em;
  color: var(--text-primary);
  padding-right: .06em;
  font-size: 1.22em;
  font-style: normal;
  font-weight: 500;
  line-height: .95;
}

.lp-voice-code {
  position: absolute;
  font-family: var(--font-mono);
  letter-spacing: -.05em;
  color: var(--accent-2);
  font-size: .72em;
  font-weight: 500;
  line-height: 1.1;
  top: .08em;
  left: 0;
}

.lp-root[data-lens="describe"] .lp-voice-code, .lp-root[data-lens="code"] .lp-voice-say {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

.lp-root[data-lens="code"] .lp-voice-say {
  position: absolute;
  top: 0;
  left: 0;
}

.lp-root[data-lens="code"] .lp-voice-code {
  position: static;
}

.lp-hero-promise {
  color: var(--text-secondary);
  text-wrap: pretty;
  max-width: 58ch;
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
  line-height: 1.5;
}

.lp-hero-promise strong {
  color: var(--text-primary);
  font-weight: 600;
}

.lp-hero-caption {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: .82rem;
}

.lp-hero-caption-line {
  background: #eef7ff;
  flex: none;
  width: 24px;
  height: 2px;
  box-shadow: 0 0 10px 2px #a0d4ffcc;
}

.lp-root[data-lens="describe"] [data-lens-only="code"], .lp-root[data-lens="code"] [data-lens-only="describe"] {
  display: none !important;
}

.lp-hero-lead {
  position: relative;
}

.lp-root[data-switching] .lp-hero-lead > * {
  animation: lp-switch-in var(--dur-flip) var(--ease-sweep) both;
}

.lp-root[data-switching] .lp-hero-lead:after {
  content: "";
  position: absolute;
  z-index: 2;
  animation: lp-switch-line var(--dur-flip) var(--ease-sweep) both;
  pointer-events: none;
  background: #eef7ff;
  width: 2px;
  margin-left: -1px;
  top: -4%;
  bottom: -4%;
  left: 0;
  box-shadow: 0 0 18px 4px #a0d4ffd9, 0 0 70px 14px #3a84b4b3;
}

@keyframes lp-switch-in {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes lp-switch-line {
  from {
    left: 0;
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  to {
    left: 100%;
    opacity: 0;
  }
}

.lp-hero-action {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 920px;
}

.lp-hero-cards {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  perspective: 1400px;
  min-width: 0;
}

.lp-card {
  grid-area: 1 / 1;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--bg-glass-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 80px -30px rgba(var(--shade-rgb), calc(.8 * var(--shade-scale)));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform var(--dur-flip) var(--ease-soft);
  border-radius: 20px;
  flex-direction: column;
  min-width: 0;
}

.lp-card[aria-hidden="true"] {
  position: absolute;
  inset: 0;
}

.lp-card-terminal {
  transform: rotateY(180deg);
}

.lp-root[data-lens="code"] .lp-card-prompt {
  transform: rotateY(-180deg);
}

.lp-root[data-lens="code"] .lp-card-terminal {
  transform: rotateY(0);
}

.lp-card-title {
  letter-spacing: -.02em;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}

.lp-card-actions {
  display: flex;
  align-items:  center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.lp-link-btn {
  display: inline-flex;
  font: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-snappy);
  background: none;
  border: 0;
  align-items:  center;
  gap: 4px;
  padding: 0;
  font-size: .92rem;
}

.lp-link-btn:hover {
  color: var(--text-primary);
}

.lp-icon {
  flex: none;
  width: 1em;
  height: 1em;
}

.lp-card-prompt {
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: none;
  border: 0;
  gap: 20px;
  padding: 8px 0;
}

.lp-composer {
  container-type: inline-size;
  border: 1px solid var(--border-strong);
  background: linear-gradient(145deg, var(--bg-elev-band), var(--bg-raised));
  box-shadow: 0 18px 48px -24px rgba(var(--shade-rgb), .4);
  border-radius: 24px;
  min-width: 0;
  transition: border-color .18s, box-shadow .18s;
}

.lp-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #40a0d01f, var(--shadow-md);
}

.lp-prompt {
  position: relative;
  display: flex;
  align-items:  center;
  min-width: 0;
  height: 88px;
  padding: 0 24px;
}

.lp-composer-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, 152px);
  justify-content: end;
  align-items:  center;
  gap: 12px 8px;
  padding: 0 14px 14px;
}

.lp-composer-input-tools {
  display: flex;
  align-items:  center;
  gap: 8px;
  min-width: 0;
}

.lp-composer-hint {
  white-space: nowrap;
  color: var(--text-muted);
  font-size: .75rem;
}

.lp-composer .lp-prompt-watch {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  white-space: nowrap;
  color: var(--text-secondary);
  text-decoration: none;
  justify-content: center;
  justify-self: stretch;
  align-items:  center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  transition: background .18s, border-color .18s;
  font-size: .88rem;
  font-weight: 600;
}

.lp-composer .lp-prompt-watch:hover {
  background: var(--bg-elev-band);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.lp-composer-footer > button, .lp-composer-footer > a {
  box-sizing: border-box;
  white-space: nowrap;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-size: .88rem;
  line-height: 20px;
}

@container (width <= 500px) {
  .lp-composer-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-composer-input-tools {
    grid-column: 1 / -1;
  }
}

.lp-prompt-play {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.lp-prompt-input {
  color: var(--text-primary);
  font: inherit;
  outline: none;
  background: none;
  border: 0;
  flex: 1;
  min-width: 0;
  height: 100%;
  font-size: .98rem;
}

.lp-prompt-input::placeholder {
  color: var(--text-muted);
}

.lp-prompt-demo {
  position: absolute;
  display: flex;
  pointer-events: none;
  color: var(--text-primary);
  align-items:  center;
  font-size: .98rem;
  line-height: 1.5;
  inset: 0 24px;
}

.lp-prompt-placeholder {
  position: absolute;
  color: var(--text-muted);
  left: 0;
}

.lp-prompt-typing {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lp-prompt-typing:not(:empty):after {
  content: "";
  display: inline-block;
  vertical-align: -.12em;
  background: var(--accent-2);
  animation: 1s step-end infinite lp-prompt-caret;
  width: 2px;
  height: 1em;
  margin-left: 2px;
}

@keyframes lp-prompt-caret {
  50% {
    opacity: 0;
  }
}

.lp-mic {
  display: inline-flex;
  color: var(--accent-2);
  cursor: pointer;
  touch-action: none;
  transition: background var(--dur-fast) var(--ease-snappy), box-shadow var(--dur-fast) var(--ease-snappy);
  background: none;
  border: 1px solid #8ccbea80;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items:  center;
  width: 40px;
  height: 40px;
}

.lp-mic:hover {
  background: #8ccbea1f;
}

.lp-composer.is-listening .lp-mic {
  background: var(--accent-2);
  color: #0f1b2d;
  box-shadow: 0 0 0 6px #8ccbea2e;
}

.lp-wave {
  display: flex;
  margin-right: var(--space-2);
  align-items:  center;
  gap: 3px;
  height: 20px;
}

.lp-wave span {
  background: var(--accent-2);
  animation: .9s ease-in-out infinite lp-wave;
  border-radius: 2px;
  width: 3px;
  height: 6px;
}

.lp-wave span:nth-child(2) {
  animation-delay: .12s;
}

.lp-wave span:nth-child(3) {
  animation-delay: .24s;
}

.lp-wave span:nth-child(4) {
  animation-delay: .36s;
}

.lp-wave span:nth-child(5) {
  animation-delay: .48s;
}

@keyframes lp-wave {
  0%, 100% {
    height: 6px;
  }

  50% {
    height: 20px;
  }
}

.lp-start {
  position: relative;
  display: inline-flex;
  border-radius: var(--radius-pill);
  background: var(--accent-grad);
  color: var(--on-brand);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #0000;
  flex: none;
  justify-content: center;
  align-items:  center;
  gap: 12px;
  min-height: 44px;
  padding: 0 18px;
  transition: filter .18s;
  font-size: .88rem;
  font-weight: 600;
}

.lp-start svg {
  width: 18px;
  height: 18px;
}

.lp-start:hover {
  filter: brightness(1.08);
}

.lp-start:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.lp-prompt-watch:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

@media (max-width: 480px) {
  .lp-start {
    gap: 8px;
    padding: 0 12px;
  }

  .lp-prompt {
    padding: 0 18px;
  }

  .lp-prompt-demo {
    left: 18px;
    right: 18px;
  }
}

.lp-start:after {
  content: "";
  position: absolute;
  animation: lp-shimmer var(--dur-lift) var(--ease-soft) 2.8s 1 forwards;
  pointer-events: none;
  background: linear-gradient(110deg, #0000 30%, #ffffff73 50%, #0000 70%);
  inset: 0;
  transform: translateX(-120%);
}

@keyframes lp-shimmer {
  to {
    transform: translateX(120%);
  }
}

.lp-terminal {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  border: 1px solid rgba(var(--ink-rgb), .18);
  background: rgba(var(--shade-rgb), calc(.28 * var(--shade-scale)));
  font-family: var(--font-mono);
  color: var(--text-primary);
  border-radius: 14px;
  height: 56px;
  padding: 0 8px 0 18px;
  font-size: .9rem;
}

.lp-terminal-prompt {
  color: var(--text-faint);
}

.lp-terminal-cmd {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: inherit;
  min-width: 0;
}

.lp-terminal-caret {
  background: var(--accent-2);
  border-radius: 1px;
  flex: none;
  width: 8px;
  height: 18px;
}

.lp-terminal-copy {
  border-radius: var(--radius-pill);
  flex: none;
  height: 36px;
  margin-left: auto;
}

.lp-hero-trust {
  text-align: center;
  color: var(--text-muted);
  margin-top: 20px;
  padding: 0 4px;
  font-size: .82rem;
  line-height: 1.45;
}

.lp-hero-trust strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.lp-hero-trust a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--text-muted);
}

.lp-hero-trust a:hover {
  color: var(--accent-2);
}

.lp-hero-trust code {
  font-family: var(--font-mono);
}

.lp-hero-trust-mark {
  display: inline-block;
  vertical-align: middle;
  border-radius: 6px;
  width: 20px;
  height: 20px;
  margin: 0 6px 0 0;
}

.lp-film {
  position: relative;
  z-index: 1;
  margin: var(--space-6) auto 0;
  perspective: 1900px;
  perspective-origin: 58% 30%;
  max-width: 1280px;
  padding: 64px 0 96px;
}

.lp-root .lp-film {
  margin-top: 0;
  padding-top: 60px;
}

.lp-film-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  transform-style: preserve-3d;
  width: min(88%, 1120px);
  margin: 0 auto;
  transform: rotateY(-13deg)rotateX(5deg);
}

.lp-film-site, .lp-film-code {
  position: absolute;
  overflow: hidden;
  transition: inset var(--dur-flip) var(--ease-soft), transform var(--dur-flip) var(--ease-soft), opacity var(--dur-flip) var(--ease-soft);
  border-radius: 16px;
  inset: 0;
  transform: translateZ(0);
}

.lp-film-site {
  box-shadow: 0 70px 140px -40px rgba(var(--shade-rgb), calc(.85 * var(--shade-scale))), 0 0 0 1px rgba(var(--ink-rgb), .14), 0 0 120px -20px #3a84b480;
}

.lp-film-code {
  border: 1px solid rgba(var(--ink-rgb), .1);
  box-shadow: 0 40px 80px -30px rgba(var(--shade-rgb), calc(.7 * var(--shade-scale)));
}

.lp-root[data-lens="describe"] .lp-film-code, .lp-root[data-lens="code"] .lp-film-site {
  opacity: .55;
  transform: translateZ(-160px)translateX(-20%)translateY(6%);
}

.lp-root[data-lens="describe"] .lp-film-code .lp-reveal-line, .lp-root[data-lens="code"] .lp-film-site .lp-reveal-line {
  display: none;
}

.lp-reveal {
  overflow: hidden;
  container-type: inline-size;
  background: #0b1220;
}

.lp-reveal-blueprint, .lp-reveal-real {
  position: absolute;
  inset: 0;
}

.lp-reveal-blueprint {
  z-index: 0;
  background: #0b1220;
}

.lp-reveal-blueprint:before {
  content: "";
  position: absolute;
  background-image: linear-gradient(#8cc8ff14 1px, #0000 1px), linear-gradient(90deg, #8cc8ff14 1px, #0000 1px);
  background-size: 24px 24px;
  inset: 0;
}

.lp-reveal-blueprint > * {
  position: relative;
  z-index: 1;
}

.lp-reveal-blueprint * {
  -webkit-text-stroke: .55px #96cdffc7;
  color: #0000 !important;
  box-shadow: none !important;
  background: none !important;
  border-color: #96cdff6b !important;
}

.lp-reveal-blueprint .ds-pic, .lp-reveal-blueprint .ds-cta, .lp-reveal-blueprint .ds-book {
  border: 1px dashed #96cdff8c !important;
}

.lp-reveal-blueprint .ds-pic {
  background: repeating-linear-gradient(45deg, #0000 0 10px, #96cdff14 10px 11px) !important;
}

.lp-reveal-real {
  z-index: 1;
  clip-path: inset(0 calc((1 - var(--lp-resolve, 0)) * 100%) 0 0);
}

.lp-reveal-line {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: calc(var(--lp-resolve, 0) * 100%);
  z-index: 3;
  opacity: calc(1 - clamp(0, (var(--lp-resolve, 0)  - .96) * 25, 1));
  background: #eef7ff;
  width: 2px;
  margin-left: -1px;
  box-shadow: 0 0 18px 4px #a0d4ffd9, 0 0 70px 14px #3a84b4b3;
}

.lp-demo {
  --demo-bg: #171c24;
  --demo-nav: #202833;
  --demo-surface: #242e3b;
  --demo-text: #edf2f7;
  --demo-muted: #bcc7d4;
  --demo-faint: #9daebf;
  --demo-border: #3b4858;
  --demo-divider: #354252;
  --demo-accent: #83b9dc;
  --demo-on-accent: #102536;
  --demo-book-border: #49647a;
  --demo-book-bg: #283f52;
  --demo-disabled: #303a46;
  --demo-clay-start: #796452;
  --demo-clay-end: #4b3b31;
  --demo-glaze-start: #537487;
  --demo-glaze-end: #2d4659;
  --demo-sand-start: #877b61;
  --demo-sand-end: #514936;
  --editor-bg: #1e1e1e;
  --editor-tabs: #252526;
  --editor-text: #d4d4d4;
  --editor-muted: #a0a0a0;
  --editor-border: #3e3e42;
  --editor-accent: #007acc;
  --syntax-keyword: #c586c0;
  --syntax-declaration: #569cd6;
  --syntax-function: #dcdcaa;
  --syntax-string: #ce9178;
  --syntax-type: #4ec9b0;
  --syntax-variable: #9cdcfe;
  --syntax-number: #b5cea8;
  --syntax-tag: #569cd6;
}

.lp-demo[data-demo-theme="light"] {
  --demo-bg: #f3f1ec;
  --demo-nav: #f7f5f1;
  --demo-surface: #fff;
  --demo-text: #22201d;
  --demo-muted: #5b5750;
  --demo-faint: #706b62;
  --demo-border: #e6e2da;
  --demo-divider: #efece6;
  --demo-accent: #2d5b7a;
  --demo-on-accent: #fff;
  --demo-book-border: #c9d8e3;
  --demo-book-bg: #eef3f7;
  --demo-disabled: #f0eee9;
  --demo-clay-start: #e6dccd;
  --demo-clay-end: #d6c8b4;
  --demo-glaze-start: #dfe8ee;
  --demo-glaze-end: #c5d6e2;
  --demo-sand-start: #ece2d3;
  --demo-sand-end: #dbcdb8;
  --editor-bg: #fff;
  --editor-tabs: #f3f3f3;
  --editor-text: #000;
  --editor-muted: #6e6e6e;
  --editor-border: #e5e5e5;
  --editor-accent: #007acc;
  --syntax-keyword: #af00db;
  --syntax-declaration: #00f;
  --syntax-function: #795e26;
  --syntax-string: #a31515;
  --syntax-type: #267f99;
  --syntax-variable: #001080;
  --syntax-number: #098658;
  --syntax-tag: maroon;
}

.lp-root {
  background: var(--bg-base);
  color: var(--text-primary);
}

.lp-src .tk-key {
  color: var(--syntax-keyword);
}

.lp-src .tk-decl {
  color: var(--syntax-declaration);
}

.lp-src .tk-fn {
  color: var(--syntax-function);
}

.lp-src .tk-str {
  color: var(--syntax-string);
}

.lp-src .tk-comp, .lp-src .tk-typ {
  color: var(--syntax-type);
}

.lp-src .tk-id, .lp-src .tk-attr {
  color: var(--syntax-variable);
}

.lp-src .tk-num {
  color: var(--syntax-number);
}

.lp-src .tk-tag {
  color: var(--syntax-tag);
}

.ds {
  --studio-bg: #303136;
  --studio-text: #f5f1eb;
  --studio-muted: #c4c0bb;
  --studio-rule: #57565a;
  --studio-accent: #ddc8b0;
  --studio-on-accent: #302c29;
  position: absolute;
  display: flex;
  font-family: var(--font-sans);
  color: var(--studio-text);
  background: var(--studio-bg);
  flex-direction: column;
  font-size: 1.18cqw;
  inset: 0;
}

.lp-demo[data-demo-theme="light"] .ds {
  --studio-bg: #eee9e1;
  --studio-text: #353239;
  --studio-muted: #68616a;
  --studio-rule: #d2c9bf;
  --studio-accent: #66596c;
  --studio-on-accent: #fffaf5;
}

.ds[data-demo-variant="training"] {
  --studio-bg: #1b2a1f;
  --studio-text: #eef5ee;
  --studio-muted: #a9bbae;
  --studio-rule: #34493a;
  --studio-accent: #c8f26a;
  --studio-on-accent: #15210f;
}

.lp-demo[data-demo-theme="light"] .ds[data-demo-variant="training"] {
  --studio-bg: #eef3e9;
  --studio-text: #1f2b22;
  --studio-muted: #5b6b5f;
  --studio-rule: #cfdac8;
  --studio-accent: #3b7a3f;
  --studio-on-accent: #f6fff0;
}

.ds[data-demo-variant="jewelry"] {
  --studio-bg: #2b2420;
  --studio-text: #f6efe6;
  --studio-muted: #c9b9a9;
  --studio-rule: #4a3f37;
  --studio-accent: #e3b56e;
  --studio-on-accent: #2a1f12;
}

.lp-demo[data-demo-theme="light"] .ds[data-demo-variant="jewelry"] {
  --studio-bg: #f6efe6;
  --studio-text: #2b2420;
  --studio-muted: #7a6a5c;
  --studio-rule: #e2d4c6;
  --studio-accent: #9b6b3a;
  --studio-on-accent: #fff8ee;
}

.ds[data-demo-variant="photography"] {
  --studio-bg: #111214;
  --studio-text: #f2f2f0;
  --studio-muted: #b4b4b0;
  --studio-rule: #333336;
  --studio-accent: #ffb86b;
  --studio-on-accent: #1a1206;
}

.lp-demo[data-demo-theme="light"] .ds[data-demo-variant="photography"] {
  --studio-bg: #f4f3ef;
  --studio-text: #1a1a1a;
  --studio-muted: #66665f;
  --studio-rule: #d9d8d2;
  --studio-accent: #b25f1f;
  --studio-on-accent: #fff6ec;
}

.ds[data-demo-variant="training"] .ds-hero-photo {
  background-image: url("/images/landing/training-studio.jpg");
  background-position: 60%;
}

.ds[data-demo-variant="training"] .ds-workshop-photo {
  background-image: url("/images/landing/training-session.jpg");
}

.ds[data-demo-variant="training"] .ds-wheel-photo {
  background-image: url("/images/landing/training-group.jpg");
  background-position: center 30%;
}

.ds[data-demo-variant="jewelry"] .ds-hero-photo {
  background-image: url("/images/landing/jewelry-bench.jpg");
  background-position: center 40%;
}

.ds[data-demo-variant="jewelry"] .ds-workshop-photo {
  background-image: url("/images/landing/jewelry-ring.jpg");
}

.ds[data-demo-variant="jewelry"] .ds-wheel-photo {
  background-image: url("/images/landing/jewelry-chain.jpg");
}

.ds[data-demo-variant="photography"] .ds-hero-photo {
  background-image: url("/images/landing/photography-coast.jpg");
  background-position: center 55%;
}

.ds[data-demo-variant="photography"] .ds-workshop-photo {
  background-image: url("/images/landing/photography-wedding.jpg");
  background-position: center 40%;
}

.ds[data-demo-variant="photography"] .ds-wheel-photo {
  background-image: url("/images/landing/photography-family.jpg");
  background-position: center 35%;
}

.ds-nav {
  display: flex;
  border-bottom: 1px solid var(--studio-rule);
  flex-shrink: 0;
  align-items:  center;
  gap: 2em;
  min-height: 5.5em;
  padding: 0 3em;
}

.ds-brand {
  font-family: var(--font-voice);
  letter-spacing: -.05em;
  font-size: 2.4em;
  line-height: .85;
}

.ds-brand > span {
  display: block;
  font-family: var(--font-sans);
  letter-spacing: .24em;
  text-align: center;
  text-transform: uppercase;
  margin-top: .7em;
  font-size: .29em;
}

.ds-links {
  display: flex;
  color: var(--studio-muted);
  gap: 2.4em;
  margin-left: auto;
  font-size: .9em;
}

.ds-cta {
  display: inline-flex;
  background: var(--studio-accent);
  color: var(--studio-on-accent);
  white-space: nowrap;
  border-radius: 3em;
  justify-content: center;
  align-items:  center;
  min-height: 3.3em;
  padding: 0 1.7em;
  font-size: .95em;
  font-weight: 500;
}

.ds-hero {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  flex-shrink: 0;
  min-height: 30em;
}

.ds-lead {
  display: flex;
  flex-direction: column;
  align-items:  flex-start;
  padding: 2.7em 3em 2em;
}

.ds-eyebrow {
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--studio-muted);
  font-size: .72em;
}

.ds-title {
  font-family: var(--font-voice);
  letter-spacing: -.045em;
  margin: .2em 0 .22em;
  font-size: 5.7em;
  font-weight: 400;
  line-height: .91;
}

.ds-title em {
  font-weight: 400;
}

.ds-sub {
  color: var(--studio-muted);
  max-width: 25em;
  margin: 0;
  font-size: 1.05em;
  line-height: 1.65;
}

.ds-row {
  display: flex;
  align-items:  center;
  gap: 1.7em;
  margin-top: 1.7em;
}

.ds-next {
  color: var(--studio-muted);
  font-size: .77em;
  line-height: 1.5;
}

.ds-location {
  letter-spacing: .18em;
  color: var(--studio-muted);
  margin-top: auto;
  padding-top: 2em;
  font-size: .62em;
}

.ds-pic {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  margin: 0;
}

.ds-hero-photo {
  background-image: url("/images/landing/pottery-studio.jpg");
  background-position: 61%;
}

.ds-hero-photo:after {
  content: "";
  position: absolute;
  background: linear-gradient(#0000 45%, #221f24b3);
  inset: 0;
}

.ds-photo-label {
  position: absolute;
  color: #f2f7fc;
  background: #2d2a2fa6;
  border: 1px solid #ffffff80;
  border-radius: 2em;
  padding: .6em 1em;
  font-size: .75em;
  top: 1.7em;
  left: 1.7em;
}

.ds-photo-note {
  position: absolute;
  z-index: 1;
  color: #f2f7fc;
  font-family: var(--font-voice);
  font-size: 3em;
  line-height: 1.05;
  bottom: .75em;
  left: .8em;
}

.ds-studio-strip {
  display: flex;
  border-top: 1px solid var(--studio-rule);
  border-bottom: 1px solid var(--studio-rule);
  color: var(--studio-muted);
  letter-spacing: .04em;
  flex-shrink: 0;
  justify-content: space-between;
  align-items:  center;
  min-height: 3.7em;
  padding: 0 3em;
  font-size: .8em;
}

.ds-experiences {
  display: grid;
  grid-template-columns: .75fr 1fr 1fr;
  gap: 2em;
  padding: 1.7em 3em;
}

.ds-section-title {
  font-family: var(--font-voice);
  letter-spacing: -.025em;
  margin-top: .35em;
  font-size: 2.5em;
  line-height: 1.02;
}

.ds-experience-intro p {
  color: var(--studio-muted);
  margin: .9em 0;
  font-size: .8em;
  line-height: 1.6;
}

.ds-text-link {
  border-bottom: 1px solid var(--studio-muted);
  padding-bottom: .3em;
  font-size: .8em;
}

.ds-experience .ds-pic {
  border-radius: .2em;
  height: 9.6em;
}

.ds-workshop-photo {
  background-image: url("/images/landing/pottery-workshop.jpg");
}

.ds-wheel-photo {
  background-image: url("/images/landing/pottery-hands.jpg");
  background-position: center 39%;
}

.ds-photo-tag {
  position: absolute;
  background: var(--studio-bg);
  color: var(--studio-text);
  letter-spacing: .12em;
  padding: .6em .8em;
  font-size: .55em;
  bottom: 1em;
  left: 1em;
}

.ds-experience-title {
  display: flex;
  font-family: var(--font-voice);
  justify-content: space-between;
  margin-top: .6em;
  font-size: 1.65em;
}

.ds-experience-meta {
  display: flex;
  color: var(--studio-muted);
  justify-content: space-between;
  gap: 1em;
  margin-top: .55em;
  font-size: .62em;
}

.ds-experience-meta > span {
  white-space: nowrap;
}

.lp-src {
  position: absolute;
  display: flex;
  background: var(--editor-bg);
  color: var(--editor-text);
  font-family: var(--font-mono);
  flex-direction: column;
  font-size: 1.15cqw;
  inset: 0;
}

.lp-src-tabs {
  display: flex;
  border-bottom: 1px solid var(--editor-border);
  background: var(--editor-tabs);
  align-items: stretch;
  gap: .2em;
  height: 3.2em;
  padding: 0 1em;
}

.lp-src-tabs span {
  display: inline-flex;
  color: var(--editor-muted);
  border-bottom: 2px solid #0000;
  align-items:  center;
  padding: 0 1.1em;
}

.lp-src-tabs .is-on {
  background: var(--editor-bg);
  color: var(--editor-text);
  border-bottom-color: var(--editor-accent);
}

.lp-src-body {
  padding: 1em 0;
}

.lp-src-line {
  display: flex;
  white-space: pre;
  gap: 1.4em;
  padding: 0 1.4em;
  line-height: 1.75;
}

.lp-src-n {
  text-align: right;
  color: var(--editor-muted);
  flex: none;
  width: 2em;
}

.lp-src-t {
  color: var(--editor-text);
}

.lp-lens {
  display: inline-flex;
  margin: 0 var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: rgba(var(--ink-rgb), .05);
  align-items:  center;
  gap: 2px;
  min-width: 0;
  height: 36px;
  padding: 3px;
}

.lp-lens-legend {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
}

.lp-lens-btn {
  display: inline-flex;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-snappy), color var(--dur-fast) var(--ease-snappy);
  background: none;
  border: 0;
  align-items:  center;
  height: 28px;
  padding: 0 14px;
  font-size: .9rem;
}

.lp-lens-btn[aria-pressed="true"] {
  background: rgba(var(--ink-rgb), .12);
  color: var(--text-primary);
}

.lp-lens-say {
  font-family: var(--font-voice);
  font-size: 1.05rem;
  font-style: normal;
}

.lp-lens-code {
  font-family: var(--font-mono);
  letter-spacing: -.03em;
  font-size: .82rem;
}

@media (prefers-reduced-motion: reduce) {
  .lp-voice, .lp-card, .lp-film-site, .lp-film-code {
    transition: none;
  }

  .lp-reveal-real {
    clip-path: inset(0);
  }

  .lp-reveal-line, .lp-prompt-typing {
    display: none;
  }

  .lp-prompt-placeholder {
    animation: none;
    opacity: 1;
  }

  .lp-start:after, .lp-wave span {
    animation: none;
  }
}

@media (max-width: 1360px) {
  .lp-nav-link-extra {
    display: none;
  }
}

@media (max-width: 1240px) {
  .lp-nav-link-minor {
    display: none;
  }
}

@media (max-width: 1080px) {
  .lp-nav-link {
    display: none;
  }
}

@media (max-width: 640px) {
  .lp-topbar .brand-word, .lp-nav-cta {
    display: none;
  }

  .lp-lens {
    margin: 0;
  }

  .lp-lens-btn {
    padding: 0 10px;
  }

  .lp-lens-say {
    font-size: .95rem;
  }

  .lp-lens-code {
    font-size: .75rem;
  }

  .lp-card-terminal {
    padding: var(--space-4);
  }
}

.lp-stats {
  padding: var(--space-5) var(--space-5) var(--space-7);
}

.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.lp-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(145deg, var(--bg-elev-band), var(--bg-glass));
  text-align: left;
  border-radius: 22px;
  padding: 28px 24px 30px;
  transition: border-color .18s, box-shadow .18s;
}

.lp-stat:before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(at 12% 0%, #58afd81f, #0000 65%);
  inset: 0;
}

.lp-stat:hover {
  border-color: var(--border-strong);
  box-shadow: 0 12px 30px -20px #40a0d04d;
}

.lp-stat-icon {
  display: inline-flex;
  color: var(--accent-2);
  background: #54a5d01a;
  border: 1px solid #68b8e040;
  border-radius: 14px;
  justify-content: center;
  align-items:  center;
  width: 46px;
  height: 46px;
  margin-bottom: 24px;
}

.lp-stat-icon svg {
  stroke-width: 1.6;
  width: 22px;
  height: 22px;
}

.lp-stat-num {
  letter-spacing: -.035em;
  color: var(--text-primary);
  margin: 0 0 12px;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  font-weight: 600;
  line-height: 1.1;
}

.lp-stat-label {
  color: var(--text-secondary);
  margin: 0;
  font-size: .9rem;
  line-height: 1.65;
}

.lp-idea-head {
  display: flex;
  justify-content: space-between;
  align-items:  flex-end;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  max-width: none;
}

.lp-idea-head .lp-h2 {
  max-width: 22ch;
  margin-bottom: 0;
}

.lp-idea-aside {
  color: var(--text-faint);
  flex: none;
  font-size: .9rem;
}

.lp-idea-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.lp-idea-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.lp-tile {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  flex-direction: column;
}

.lp-tile-face {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-6);
  flex-direction: column;
}

.lp-tile-blueprint {
  position: absolute;
  background-color: #0b1220;
  background-image: linear-gradient(#8cc8ff14 1px, #0000 1px), linear-gradient(90deg, #8cc8ff14 1px, #0000 1px);
  background-size: 24px 24px;
  inset: 0;
}

.lp-tile-blueprint * {
  -webkit-text-stroke: .55px #96cdffc7;
  color: #0000 !important;
  background: none !important;
  border-color: #96cdff6b !important;
}

.lp-tile-blueprint .lp-tile-icon {
  border: 1px dashed #96cdff8c !important;
}

.lp-tile-real {
  position: relative;
  background: var(--bg-elev);
  clip-path: inset(0);
  transition: clip-path 1.8s var(--ease-sweep);
  flex: 1;
}

.lp-root.is-live .lp-idea-grid[data-resolve]:not(.is-resolved) .lp-tile-real {
  clip-path: inset(0 100% 0 0);
}

.lp-tile-line {
  position: absolute;
  z-index: 3;
  opacity: 0;
  background: #eef7ff;
  width: 2px;
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 18px 4px #a0d4ffd9;
}

.lp-idea-grid.is-resolved .lp-tile-line {
  animation: lp-tile-line 1.8s var(--ease-sweep) forwards;
}

.lp-idea-grid.is-resolved .lp-tile:nth-child(2) .lp-tile-real, .lp-idea-grid.is-resolved .lp-tile:nth-child(2) .lp-tile-line {
  animation-delay: .22s;
  transition-delay: .22s;
}

.lp-idea-grid.is-resolved .lp-tile:nth-child(3) .lp-tile-real, .lp-idea-grid.is-resolved .lp-tile:nth-child(3) .lp-tile-line {
  animation-delay: .44s;
  transition-delay: .44s;
}

.lp-idea-grid.is-resolved .lp-tile:nth-child(4) .lp-tile-real, .lp-idea-grid.is-resolved .lp-tile:nth-child(4) .lp-tile-line {
  animation-delay: .66s;
  transition-delay: .66s;
}

@keyframes lp-tile-line {
  0% {
    left: 0;
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

.lp-tile-icon {
  display: flex;
  color: var(--accent-2);
  background: #40a0d024;
  border: 1px solid #40a0d059;
  border-radius: 12px;
  justify-content: center;
  align-items:  center;
  width: 40px;
  height: 40px;
}

.lp-tile-icon .lp-icon {
  width: 18px;
  height: 18px;
}

.lp-tile-title {
  letter-spacing: -.015em;
  color: var(--text-primary);
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.25;
}

.lp-tile-body {
  color: var(--text-muted);
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
}

.lp-tile-lanes {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}

.lp-chip {
  display: inline-flex;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: rgba(var(--ink-rgb), .04);
  color: var(--text-secondary);
  align-items:  center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font-size: .8rem;
}

@media (prefers-reduced-motion: reduce) {
  .lp-tile-real {
    transition: none;
  }

  .lp-idea-grid.is-resolved .lp-tile-line {
    animation: none;
  }
}

@media (max-width: 960px) {
  .lp-idea-head {
    flex-direction: column;
    align-items:  flex-start;
  }

  .lp-idea-grid, .lp-idea-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .lp-idea-grid, .lp-idea-grid-4 {
    grid-template-columns: 1fr;
  }
}

.lp-why .lp-section-head {
  margin-bottom: var(--space-5);
}

.lp-why-copy {
  display: grid;
}

.lp-why-copy p {
  grid-area: 1 / 1;
  text-align: center;
  color: var(--text-secondary);
  text-wrap: pretty;
  max-width: 68ch;
  margin: 0 auto;
  font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem);
  line-height: 1.6;
}

.lp-why-builds {
  margin-top: var(--space-6);
  display: flex;
  align-items:  center;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}

.lp-why-builds-label {
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 0 0 100%;
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
}

.lp-build-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
}

.lp-build-card {
  display: flex;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elev);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-snappy), transform var(--dur-fast) var(--ease-snappy), box-shadow var(--dur-fast) var(--ease-snappy);
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 14px;
}

.lp-build-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.lp-build-card .uc-preview {
  box-shadow: none;
  margin: 0 0 10px;
}

.lp-build-card-title {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.lp-build-card-sub {
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.4;
}

.lp-why-links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-2) 0 0;
  flex-wrap: wrap;
  flex: 0 0 100%;
}

@media (max-width: 960px) {
  .lp-build-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .lp-build-grid {
    grid-template-columns: 1fr;
  }
}

.lp-why-link {
  color: var(--accent);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-snappy);
  border-bottom: 1px solid #0000;
  font-size: .92rem;
  font-weight: 600;
}

.lp-why-link:hover {
  border-bottom-color: currentColor;
}

.lp-pricing-page {
  min-height: 75vh;
  padding-top: 72px;
}

.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
}

.lp-tier {
  position: relative;
  display: flex;
  gap: var(--space-5);
  background: linear-gradient(135deg, var(--bg-elev-band), var(--bg-glass));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-glass);
  transition: transform .28s var(--ease-snappy), box-shadow .28s var(--ease-snappy);
  border-radius: 24px;
  flex-direction: column;
  padding: 32px;
}

.lp-tier:hover {
  transform: translateY(-4px);
}

.lp-tier-highlight {
  box-shadow: var(--shadow-elev), var(--brand-glow);
  border-color: #2a86be80;
}

.lp-tier-highlight:before {
  content: "";
  position: absolute;
  border-radius: inherit;
  background: var(--brand-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .6;
  padding: 1px;
  inset: -1px;
}

.lp-tier-top {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
}

.lp-tier-icon {
  display: grid;
  border: 1px solid var(--border-strong);
  background: var(--bg-glass);
  color: var(--accent-2);
  border-radius: 14px;
  place-items:  center;
  width: 46px;
  height: 46px;
}

.lp-tier-icon svg {
  width: 22px;
  height: 22px;
}

.lp-tier-badge {
  background: var(--brand-grad);
  color: #fff;
  white-space: nowrap;
  border-radius: 20px;
  padding: 7px 12px;
  font-size: .72rem;
  font-weight: 600;
}

.lp-tier-cta {
  box-sizing: border-box;
  gap: 12px;
  height: 54px;
  min-height: 54px;
  margin-top: auto;
}

.lp-tier-cta svg {
  flex-shrink: 0;
}

.lp-tier-cta:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.lp-tier-head {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
}

.lp-tier-name {
  color: var(--text-primary);
  font-size: 1.3rem;
  font-weight: 700;
}

.lp-tier-tagline {
  color: var(--text-muted);
  min-height: 2.6em;
  font-size: .88rem;
  line-height: 1.5;
}

.lp-tier-price {
  display: flex;
  margin-top: var(--space-3);
  letter-spacing: -.03em;
  color: var(--text-primary);
  align-items: baseline;
  gap: 4px;
  font-size: clamp(2.2rem, 1.8rem + 1.4vw, 2.8rem);
  font-weight: 700;
}

.lp-tier-period {
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
}

.lp-price {
  position: relative;
  display: inline-grid;
}

.lp-price > span {
  grid-area: 1 / 1;
}

.lp-price-blueprint {
  color: #0000;
  -webkit-text-stroke: .6px #1f6fa399;
}

.lp-root.is-live .lp-price-real {
  clip-path: inset(0 100% 0 0);
}

.lp-root.is-live .lp-tier.is-visible .lp-price-real {
  animation: lp-price-fill 1.3s var(--ease-sweep) .42s both;
}

.lp-root.is-live .lp-tier.is-visible .lp-price-blueprint {
  animation: .2s linear 1.72s both lp-price-fade;
}

@media (min-width: 961px) {
  .lp-root.is-live .lp-pricing-grid > .lp-tier.is-visible:nth-child(2) .lp-price-real {
    animation-delay: .62s;
  }

  .lp-root.is-live .lp-pricing-grid > .lp-tier.is-visible:nth-child(2) .lp-price-blueprint {
    animation-delay: 1.92s;
  }

  .lp-root.is-live .lp-pricing-grid > .lp-tier.is-visible:nth-child(3) .lp-price-real {
    animation-delay: .82s;
  }

  .lp-root.is-live .lp-pricing-grid > .lp-tier.is-visible:nth-child(3) .lp-price-blueprint {
    animation-delay: 2.12s;
  }
}

@keyframes lp-price-fill {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes lp-price-fade {
  to {
    opacity: 0;
  }
}

.lp-root.is-live .lp-tier[data-reveal] {
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft), border-color var(--dur-med) var(--ease-snappy), box-shadow var(--dur-med) var(--ease-snappy);
  transform: translateY(18px);
}

.lp-root.is-live .lp-tier[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.lp-root.is-live .lp-tier[data-reveal].is-visible:hover {
  transform: translateY(-4px);
}

@media (min-width: 961px) {
  .lp-root.is-live .lp-tier[data-reveal]:nth-child(2) {
    transition-delay: .16s;
  }

  .lp-root.is-live .lp-tier[data-reveal]:nth-child(3) {
    transition-delay: .32s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-root.is-live .lp-tier[data-reveal], .lp-root.is-live .lp-tier[data-reveal].is-visible:hover {
    opacity: 1;
    transition: none;
    transform: none;
  }

  .lp-root.is-live .lp-tier .lp-price-real, .lp-root.is-live .lp-tier.is-visible .lp-price-real {
    clip-path: none;
    animation: none;
  }

  .lp-root.is-live .lp-tier .lp-price-blueprint {
    display: none;
    animation: none;
  }
}

.lp-footer {
  position: relative;
  border-top: 1px solid var(--border-subtle);
  background: radial-gradient(ellipse at 12% 0, #53a6d11a, transparent 65%), var(--bg-base);
  padding: 56px var(--space-5) 24px;
}

.lp-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 44px;
}

.lp-footer-blurb {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  max-width: 46ch;
  font-size: .88rem;
  line-height: 1.55;
}

.lp-footer-promise {
  letter-spacing: -.025em;
  color: var(--text-primary);
  max-width: 20ch;
  margin: 22px 0 0;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.2;
}

.lp-footer-promise em {
  display: block;
  font-family: var(--font-voice);
  color: var(--accent-2);
  font-weight: 400;
}

.lp-footer-nav {
  display: flex;
  flex-direction: column;
  align-items:  flex-start;
  gap: 14px;
}

.lp-footer-nav h3 {
  color: var(--text-primary);
  margin: 4px 0 6px;
  font-size: .82rem;
  font-weight: 600;
}

.lp-footer a {
  text-decoration: none;
}

.lp-footer-nav a, .lp-footer-credit a, .lp-footer-legal a {
  display: inline-flex;
  color: var(--text-secondary);
  transition: color .16s var(--ease-snappy);
  align-items:  center;
  gap: 9px;
  font-size: .85rem;
  line-height: 1.5;
}

.lp-footer a:hover {
  color: var(--accent-2);
}

.lp-footer a:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 5px;
  border-radius: 4px;
}

.lp-footer svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.lp-footer-bottom {
  display: flex;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 16px 24px;
  padding-top: 22px;
  font-size: .78rem;
}

.lp-footer-bottom p {
  margin: 0;
}

.lp-footer-credit {
  display: flex;
  align-items:  center;
  gap: 6px;
}

.lp-footer-legal {
  display: flex;
  gap: 22px;
}

@media (max-width: 1100px) {
  .lp-footer .lp-section-inner {
    max-width: 760px;
  }
}

@media (max-width: 640px) {
  .lp-footer {
    padding: 36px 16px 24px;
  }

  .lp-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    padding-bottom: 30px;
  }

  .lp-footer-brand {
    grid-column: 1 / -1;
  }

  .lp-footer-bottom {
    flex-direction: column;
    align-items:  flex-start;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero-ambient {
    mask-image: linear-gradient(#000 60%, #0000 100%);
    animation: none;
  }

  .lp-hero-top {
    opacity: 1;
    transform: none;
  }

  .lp-root[data-switching] .lp-hero-lead > *, .lp-root[data-switching] .lp-hero-lead:after {
    animation: none;
  }

  .lp-root[data-switching] .lp-hero-lead:after {
    display: none;
  }
}

@media (max-width: 960px) {
  .lp-section {
    padding: var(--space-8) var(--space-5);
  }

  .lp-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .lp-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .lp-tier-highlight {
    transform: none;
  }
}

@media (max-width: 640px) {
  .lp-topbar {
    padding: var(--space-3) var(--space-4);
  }

  .lp-nav {
    gap: 2px;
  }

  .lp-nav-link, .lp-nav-signin {
    display: none;
  }

  .lp-stats-grid, .lp-pricing-grid {
    grid-template-columns: 1fr;
  }

  .lp-section, .lp-stats {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .lp-stats-grid {
    gap: 12px;
  }
}

.lp-stats-grid-phrase .lp-stat-num {
  letter-spacing: -.02em;
  -webkit-text-fill-color: var(--text-primary);
  color: var(--text-primary);
  background: none;
  font-size: 1.2rem;
  line-height: 1.15;
}

.lp-tier-rows {
  display: flex;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
  color: var(--text-secondary);
  flex-direction: column;
  gap: 14px;
  margin: 0 0 8px;
  padding: 24px 0 0;
  font-size: .9rem;
}

.lp-tier-rows li {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-2);
}

.lp-tier-rows .lp-icon {
  color: var(--success);
  flex-shrink: 0;
  margin-top: 2px;
}

.lp-benefits-heading {
  margin-bottom: 32px;
}

.lp-benefits-heading .lp-h2 {
  max-width: 760px;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}

.lp-benefits-heading em, .lp-compare {
  padding-top: 64px;
}

.lp-compare-sheet {
  --lp-compare-width: min(calc(100vw - 48px), 1880px);
  width: var(--lp-compare-width);
  margin: 0 0 0 calc((100% - var(--lp-compare-width)) / 2);
  border: 1px solid var(--border-strong);
  overflow: auto;
  background: var(--bg-base);
  scrollbar-color: var(--border-strong) var(--bg-base);
  border-radius: 20px;
}

.lp-compare-sheet:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.lp-compare-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: left;
  width: 100%;
}

.lp-compare-table th, .lp-compare-table td {
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  padding: 18px 14px;
}

.lp-compare-table thead th {
  vertical-align: middle;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: 1rem;
  font-weight: 600;
}

.lp-compare-table tr > :first-child {
  position: sticky;
  z-index: 1;
  background: var(--bg-base);
  box-shadow: 1px 0 0 var(--border-subtle);
  width: 17%;
  left: 0;
}

.lp-compare-table tr > :nth-child(2) {
  width: 19%;
}

.lp-compare-table thead th:first-child {
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 400;
}

.lp-compare-table thead span {
  display: block;
  color: var(--text-muted);
  margin-top: 8px;
  font-size: .9rem;
  font-weight: 400;
}

.lp-compare-table tbody th {
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.4;
}

.lp-compare-table tr > :nth-child(2) {
  background: #53a6d11a;
}

.lp-compare-table tbody tr:hover td {
  background-color: #53a6d10d;
}

.lp-compare-table tbody tr:hover > :nth-child(2) {
  background-color: #53a6d126;
}

.lp-compare-table tbody tr:last-child > * {
  border-bottom: 0;
}

.lp-compare-value {
  display: grid;
  grid-template-rows: 20px auto;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  justify-items: start;
  gap: 8px;
  font-size: .9rem;
  line-height: 1.45;
}

.lp-compare-value > span {
  grid-row: 2;
}

.lp-compare-value > svg {
  grid-row: 1;
  color: var(--text-muted);
  flex: none;
  width: 20px;
  height: 20px;
}

.lp-compare-value[data-status="yes"] > svg {
  color: var(--accent-2);
}

.lp-compare-note {
  color: var(--text-muted);
  text-align: center;
  max-width: 90ch;
  margin: 22px auto 0;
  font-size: .95rem;
  line-height: 1.7;
}

.lp-compare-pick {
  display: none;
  margin: 0 0 var(--space-4);
  border: 0;
  min-width: 0;
  padding: 0;
}

.lp-compare-pick-legend {
  margin-bottom: var(--space-2);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0;
  font-size: .78rem;
  font-weight: 600;
}

.lp-compare-pick-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.lp-compare-pick-chip {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: rgba(var(--ink-rgb), .04);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-snappy), background var(--dur-fast) var(--ease-snappy), color var(--dur-fast) var(--ease-snappy);
  padding: 8px 14px;
  font-size: .9rem;
  font-weight: 500;
}

.lp-compare-pick-chip:hover {
  border-color: var(--border-strong);
}

.lp-compare-pick-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--brand-grad-soft);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

@media (max-width: 960px) {
  .lp-compare-pick {
    display: block;
  }

  .lp-compare-table:not([data-pick="all"]) [data-builder][data-picked="false"] {
    display: none;
  }

  .lp-compare-table:not([data-pick="all"]) tr > :first-child {
    width: 30%;
  }

  .lp-compare-table:not([data-pick="all"]) tr > :nth-child(2) {
    width: 35%;
  }

  .lp-compare-table[data-pick="all"] {
    min-width: 1100px;
  }

  .lp-compare-table[data-pick="all"] tr > :first-child {
    width: 200px;
  }

  .lp-compare-table[data-pick="all"] tr > :nth-child(2) {
    width: auto;
  }
}

@media (max-width: 640px) {
  .lp-compare-sheet {
    --lp-compare-width: calc(100vw - 32px);
  }

  .lp-compare-table th, .lp-compare-table td {
    padding: 14px 10px;
  }

  .lp-compare-table tbody th {
    font-size: .92rem;
  }

  .lp-compare-value {
    font-size: .86rem;
  }
}

.lp-compare-value[data-status="no"] > svg {
  color: var(--text-muted);
}

.lp-compare-reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
  margin: 0;
}

.lp-compare-reason {
  position: relative;
  display: flex;
  border: 1px solid var(--border-strong);
  background: radial-gradient(ellipse at 100% 0, #53a6d11f, transparent 65%), var(--bg-glass);
  border-radius: 22px;
  flex-direction: column;
  align-items:  flex-start;
  gap: 18px;
  padding: 26px;
}

.lp-compare-reason[data-reason="mobile"] {
  background: radial-gradient(ellipse at 100% 0, #7d71cd21, transparent 65%), var(--bg-glass);
}

.lp-compare-reason-heading {
  display: flex;
  align-items:  center;
  gap: 14px;
}

.lp-compare-reason-icon {
  display: grid;
  border: 1px solid var(--border-strong);
  color: var(--accent-2);
  background: var(--bg-glass);
  border-radius: 13px;
  flex: 0 0 42px;
  place-items:  center;
  width: 42px;
  height: 42px;
}

.lp-compare-reason-icon svg {
  width: 21px;
  height: 21px;
}

.lp-compare-reason h3 {
  letter-spacing: -.03em;
  margin: 0;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.22;
}

.lp-compare-reason-text {
  color: var(--text-secondary);
  margin: 0;
  font-size: .9rem;
  line-height: 1.65;
}

.lp-compare-proof-tags {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 4px;
  padding: 0;
}

.lp-compare-proof-tags li {
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  color: var(--text-secondary);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: .72rem;
}

.lp-compare-reason-action {
  margin-top: auto;
}

.lp-compare-reason-cta {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  background: var(--bg-glass);
  color: var(--text-primary);
  text-align: center;
  border-radius: 10px;
  justify-content: center;
  align-items:  center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  font-size: .82rem;
  line-height: 1.4;
}

.lp-compare-reason-cta:hover {
  border-color: var(--accent-2);
  background: var(--bg-elev-band);
}

.lp-compare-reason-cta svg {
  flex-shrink: 0;
}

.lp-compare-evidence-heading {
  margin: 64px auto 36px;
}

.lp-compare-table td:nth-child(2) .lp-compare-value {
  color: var(--text-primary);
  font-weight: 500;
}

.lp-compare-reason-cta:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

@media (max-width: 1100px) {
  .lp-page .lp-section-inner {
    max-width: 760px;
  }

  .lp-pricing-grid {
    grid-template-columns: 1fr;
  }

  .lp-compare-reasons {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 760px;
  }

  .lp-compare-reason {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 12px 24px;
    padding: 22px;
  }

  .lp-compare-reason-heading, .lp-compare-reason-text, .lp-compare-reason-action {
    grid-column: 1;
  }

  .lp-compare-proof-tags {
    grid-column: 2;
    grid-row: 1 / span 3;
    border-left: 1px solid var(--border-subtle);
    align-content:  center;
    align-self: stretch;
    padding-left: 22px;
  }
}

@media (max-width: 600px) {
  .lp-compare-reasons {
    max-width: 440px;
  }

  .lp-compare-reason {
    display: flex;
    gap: 14px;
    padding: 22px;
  }

  .lp-compare-proof-tags {
    border: 0;
    padding: 0;
  }
}

.lp-footer-credit img {
  object-fit: contain;
  flex-shrink: 0;
}

.mp-main {
  overflow: clip;
  padding-top: 96px;
}

.mp-main h1, .mp-main h2, .mp-main h3, .mp-pricing-details h2 {
  color: var(--text-primary);
  letter-spacing: -.045em;
}

.mp-main h1 em, .mp-main h2 em, .mp-pricing-details h2 em {
  display: block;
  font-family: var(--font-voice);
  letter-spacing: -.025em;
  color: var(--accent-2);
  font-weight: 400;
}

.mp-intro {
  text-align: center;
  padding-block-start: 72px;
  padding-block-end: 64px;
}

.mp-kicker {
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

.mp-intro h1 {
  margin: 20px auto 24px;
  font-size: clamp(42px, 6vw, 78px);
  font-weight: 600;
  line-height: 1.04;
}

.mp-intro-copy {
  color: var(--text-secondary);
  text-wrap: pretty;
  max-width: 630px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.8;
}

.mp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:  center;
  gap: 24px;
  margin-top: 30px;
}

.mp-actions .btn {
  display: inline-flex;
  justify-content: center;
  align-items:  center;
  gap: 12px;
}

.mp-text-link {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 6px;
  font-size: 13px;
  font-weight: 500;
}

.mp-text-link:hover {
  color: var(--accent-2);
}

.mp-section {
  padding-block-start: 90px;
  padding-block-end: 40px;
}

.mp-section-heading {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 36px;
}

.mp-section-heading h2, .mp-note h2, .mp-closing h2, .mp-release h2 {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.15;
}

.mp-section-heading > p, .mp-note > p, .mp-closing > p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.8;
}

.mp-studio {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-band);
  border-radius: 20px;
  box-shadow: 0 24px 100px #0002;
}

.mp-browser-bar {
  display: flex;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elev-band);
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
  height: 46px;
  padding: 0 22px;
  font-size: 11px;
}

.mp-window-dots {
  letter-spacing: .2em;
  opacity: .6;
  font-size: 10px;
}

.mp-demo-label {
  font-size: 10px;
}

.mp-workbench {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

.mp-prompt-panel {
  border-right: 1px solid var(--border-subtle);
  background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 75%);
  padding: 34px 26px;
}

.mp-prompt-panel h2 {
  margin-block-start: 14px;
  margin-block-end: 24px;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.15;
}

.mp-prompt-panel blockquote {
  border: 1px solid var(--border-subtle);
  background: var(--bg-base);
  color: var(--text-primary);
  border-radius: 12px 12px 12px 3px;
  margin: 0;
  padding: 16px;
  font-size: 13px;
  line-height: 1.8;
}

.mp-prompt-panel > p:last-child {
  color: var(--text-muted);
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.8;
}

.mp-preview-panel {
  min-width: 0;
}

.mp-preview-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  gap: 8px;
  padding: 12px 18px;
}

.mp-preview-tabs button, .mp-showcase-tabs button, .mp-platform-switch button {
  display: inline-flex;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 7px;
  justify-content: center;
  align-items:  center;
  gap: 8px;
  padding: 9px 15px;
  font-size: 12px;
}

.mp-preview-tabs button[aria-pressed="true"], .mp-showcase-tabs button[aria-pressed="true"], .mp-platform-switch button[aria-pressed="true"] {
  color: var(--text-primary);
  background: var(--bg-base);
  border-color: var(--border-strong);
  box-shadow: 0 2px 8px #0001;
}

.mp-preview-viewport, .mp-showcase-canvas {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  aspect-ratio: 1.58;
}

.mp-preview-viewport .lp-src {
  position: absolute;
  overflow: auto;
  margin: 0;
  padding: 24px;
  font-size: 1.5cqw;
  inset: 0;
}

.mp-main .ds {
  font-size: 1.18cqw;
}

.lp-root[data-theme="light"] .mp-main .ds {
  --studio-bg: #eee9e1;
  --studio-text: #353239;
  --studio-muted: #68616a;
  --studio-rule: #d2c9bf;
  --studio-accent: #66596c;
  --studio-on-accent: #fffaf5;
}

.mp-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mp-feature-grid-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mp-feature {
  border: 1px solid var(--border-subtle);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-2) 4%, transparent), transparent 70%);
  border-radius: 16px;
  padding: 28px;
}

.mp-feature-icon {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--accent-2) 24%, transparent);
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 7%, transparent);
  border-radius: 12px;
  justify-content: center;
  align-items:  center;
  width: 42px;
  height: 42px;
  font-size: 19px;
}

.mp-feature .mp-kicker {
  margin-top: 24px;
}

.mp-feature h3 {
  letter-spacing: -.025em;
  margin: 20px 0 12px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.mp-feature > p:last-child {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
}

.mp-note {
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-block-start: 60px;
  padding-block-end: 60px;
}

.mp-note > p {
  max-width: 720px;
  margin: 0 auto 25px;
}

.mp-closing {
  text-align: center;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 65%);
  padding-block-start: 88px;
  padding-block-end: 100px;
}

.mp-closing h2 {
  margin-top: 18px;
  font-size: clamp(40px, 5vw, 64px);
}

.mp-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.mp-use-case {
  display: flex;
  border: 1px solid var(--border-subtle);
  background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 70%);
  border-radius: 20px;
  flex-direction: column;
  align-items:  flex-start;
  padding: 34px;
  scroll-margin-top: 110px;
}

.mp-use-case:nth-child(2), .mp-use-case:nth-child(3) {
  background: radial-gradient(at 100% 0, #7296a212, #0000 70%);
}

.mp-use-case > header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  width: 100%;
  margin-bottom: 28px;
}

.mp-case-number {
  color: var(--text-muted);
  font: 12px JetBrains Mono, monospace;
}

.mp-use-case h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.1;
}

.mp-use-case > p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
}

.mp-tags {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 28px;
  padding: 0;
}

.mp-tags li {
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
}

.mp-card-cta {
  background: var(--bg-elev-band);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  gap: 18px;
  margin-top: auto;
  font-size: 12px;
}

.mp-device-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-subtle);
  background: radial-gradient(at 80%, #bb957624, #0000 65%);
  border-radius: 24px;
  align-items:  center;
  gap: 50px;
  padding: 54px 7%;
}

.mp-device-copy h2 {
  margin: 20px 0;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.12;
}

.mp-device-copy > p:not(.mp-kicker):not(.mp-fineprint) {
  color: var(--text-secondary);
  max-width: 380px;
  font-size: 15px;
  line-height: 1.85;
}

.mp-platform-path {
  display: flex;
  color: var(--text-secondary);
  flex-wrap: wrap;
  align-items:  center;
  gap: 12px;
  margin: 26px 0;
  font-size: 12px;
}

.mp-platform-path span {
  display: inline-flex;
  align-items:  center;
  gap: 8px;
}

.mp-platform-switch {
  border: 0;
  margin: 0;
  padding: 0;
}

.mp-platform-switch legend {
  color: var(--text-muted);
  margin-bottom: 10px;
  font-size: 11px;
}

.mp-phone {
  position: relative;
  color: #f8f1e7;
  overflow: hidden;
  background: #252529;
  border: 1px solid #79716b;
  border-radius: 44px;
  width: 270px;
  max-width: 100%;
  margin: 0 auto;
  padding: 7px;
  transition: border-radius .3s, transform .3s;
  transform: rotate(5deg);
  box-shadow: 15px 30px 70px #0004, inset 0 0 0 3px #454448;
}

.mp-phone[data-platform="Android"] {
  border-radius: 24px;
  transform: rotate(-3deg);
}

.mp-phone-status {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  top: 18px;
  left: 24px;
  right: 24px;
}

.mp-phone > img {
  object-fit: cover;
  filter: brightness(.8);
  border-radius: 36px 36px 0 0;
  width: 100%;
  height: 290px;
}

.mp-phone[data-platform="Android"] > img {
  border-radius: 18px 18px 0 0;
}

.mp-phone figcaption {
  padding: 24px 20px 40px;
}

.mp-phone figcaption > span:first-child {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 9px;
}

.mp-phone h3 {
  font-family: var(--font-voice);
  color: #f8f1e7;
  margin: 16px 0;
  font-size: 42px;
  font-weight: 400;
  line-height: .95;
}

.mp-phone figcaption > p {
  color: #c9c2b8;
  font-size: 11px;
}

.mp-phone-ticket {
  display: flex;
  border: 1px solid #6b6157;
  border-radius: 6px;
  align-items:  center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px;
  font-size: 10px;
}

.mp-phone-home {
  position: absolute;
  background: #eee8;
  border-radius: 2px;
  width: 80px;
  height: 4px;
  bottom: 14px;
  left: calc(50% - 40px);
}

.mp-release {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-block-start: 70px;
  padding-block-end: 30px;
}

.mp-release ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mp-release li {
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 22px;
  padding: 0 0 22px;
}

.mp-release strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 500;
}

.mp-release li span {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.8;
}

.mp-fineprint {
  color: var(--text-muted);
  margin-top: 20px;
  font-size: 11px;
  line-height: 1.8;
}

.mp-showcase-tabs {
  display: flex;
  border: 0;
  justify-content: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
}

.mp-showcase-frame {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: 0 25px 90px #0002;
}

.mp-showcase-caption {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto;
  border-bottom: 1px solid var(--border-subtle);
  align-items:  center;
  gap: 28px;
  padding-block-start: 24px;
  padding-block-end: 24px;
}

.mp-showcase-caption h2 {
  margin: 8px 0;
  font-size: 24px;
  font-weight: 500;
}

.mp-showcase-caption > p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.8;
}

.mp-shop {
  color: var(--sg-text);
  background: var(--sg-bg);
  height: 100%;
  padding: 3cqw 6cqw;
}

.mp-shop > header {
  display: flex;
  border-bottom: 1px solid var(--sg-rule);
  justify-content: space-between;
  align-items:  center;
  padding-bottom: 2cqw;
  font-size: 1cqw;
}

.mp-shop > header span:first-child {
  font: 3cqw Instrument Serif, Georgia, serif;
}

.mp-shop-lead {
  text-align: center;
  margin: 2cqw 0;
}

.mp-shop-lead > p {
  letter-spacing: .1em;
  font-size: 1cqw;
}

.mp-shop-lead h2 {
  color: var(--sg-text);
  margin: 1.5cqw 0;
  font: 6cqw / .9 Instrument Serif, Georgia, serif;
}

.mp-shop-lead h2 em {
  display: inline;
  color: var(--sg-muted);
  margin-left: 1cqw;
}

.mp-shop-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3cqw;
}

.mp-shop-products figure {
  margin: 0;
}

.mp-shop-products img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 25cqw;
}

.mp-shop-products figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 1cqw;
  font-size: 1.1cqw;
}

.mp-shop-products figcaption span {
  color: var(--sg-muted);
  font-size: .9cqw;
}

.mp-shop-note {
  text-align: center;
  margin: 2cqw 0;
  font: italic 2cqw Instrument Serif, Georgia, serif;
}

.mp-portal {
  background: var(--sg-bg);
  color: var(--sg-text);
  height: 100%;
  padding: 3cqw 5cqw;
}

.mp-portal > header {
  display: flex;
  border-bottom: 1px solid var(--sg-rule);
  align-items:  center;
  gap: 1cqw;
  padding-bottom: 2cqw;
  font-size: 1.3cqw;
}

.mp-portal > header > span:last-child {
  color: var(--sg-muted);
  margin-left: auto;
  font-size: 1cqw;
}

.mp-portal-mark {
  display: grid;
  background: var(--sg-text);
  color: #fff;
  border-radius: .8cqw;
  place-items:  center;
  width: 3cqw;
  height: 3cqw;
}

.mp-portal-welcome {
  margin: 4cqw 0;
}

.mp-portal-welcome p:first-child {
  letter-spacing: .16em;
  color: var(--sg-muted);
  font-size: .9cqw;
}

.mp-portal-welcome h2 {
  color: var(--sg-text);
  margin: 1cqw 0;
  font-size: 3.5cqw;
  font-weight: 500;
}

.mp-portal-welcome > p:last-child {
  color: var(--sg-muted);
  font-size: 1.2cqw;
}

.mp-portal-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2cqw;
}

.mp-project {
  color: #c1d1cc;
  background: #283a43;
  border-radius: 1.5cqw;
  padding: 3cqw;
}

.mp-project .mp-kicker {
  color: #c1d1cc;
  font-size: .9cqw;
}

.mp-project h3 {
  color: #f5f3e9;
  margin: 2cqw 0;
  font: 4cqw / 1 Instrument Serif, Georgia, serif;
}

.mp-project > p, .mp-project > span:last-child {
  font-size: 1cqw;
}

.mp-progress {
  display: block;
  background: linear-gradient(to right, #b4d4c2 70%, #ffffff20 70%);
  border-radius: 1cqw;
  height: .6cqw;
  margin: 2cqw 0;
}

.mp-portal-activity {
  background: var(--sg-surface);
  border: 1px solid var(--sg-rule);
  border-radius: 1.5cqw;
  padding: 3cqw;
}

.mp-portal-activity h3 {
  color: var(--sg-text);
  margin-bottom: 2.5cqw;
  font-size: 1.6cqw;
  font-weight: 500;
}

.mp-portal-activity > p {
  display: flex;
  border-bottom: 1px solid var(--sg-rule);
  align-items:  center;
  gap: 1cqw;
  padding-block-start: 1.4cqw;
  padding-block-end: 1.4cqw;
  font-size: 1cqw;
}

.mp-manifesto {
  border: 1px solid var(--border-subtle);
  background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 70%);
  border-radius: 24px;
  padding: 60px;
}

.mp-manifesto-lead {
  letter-spacing: -.04em;
  color: var(--text-primary);
  margin: 26px 0 40px;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.18;
}

.mp-manifesto-lead em {
  font-family: var(--font-voice);
  color: var(--accent-2);
  font-weight: 400;
}

.mp-manifesto > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-subtle);
  gap: 50px;
  max-width: 900px;
  padding-top: 25px;
}

.mp-manifesto > div > p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}

.mp-pricing-details {
  padding-bottom: 90px;
}

.mp-pricing-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 50px;
}

.mp-pricing-facts article {
  border-top: 1px solid var(--border-strong);
  padding-top: 24px;
}

.mp-pricing-facts article > span {
  color: var(--accent-2);
  letter-spacing: .1em;
  font-size: 11px;
}

.mp-pricing-facts h3 {
  color: var(--text-primary);
  margin: 16px 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
}

.mp-pricing-facts p, .mp-faq p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.85;
}

.mp-faq {
  max-width: 820px;
  margin: auto;
}

.mp-faq details {
  border-bottom: 1px solid var(--border-subtle);
  padding: 20px 0;
}

.mp-faq summary {
  cursor: pointer;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
}

.mp-faq details[open] summary {
  color: var(--accent-2);
}

.mp-main button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 5px;
}

.mp-main a:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 5px;
}

.mp-faq summary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 5px;
}

@media (max-width: 900px) {
  .mp-workbench {
    grid-template-columns: 1fr;
  }

  .mp-prompt-panel {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
    padding: 24px;
  }

  .mp-prompt-panel > .mp-feature-icon {
    display: none;
  }

  .mp-prompt-panel h2 em {
    display: inline;
    margin-left: 6px;
  }

  .mp-feature-grid {
    grid-template-columns: 1fr;
  }

  .mp-feature-grid-four {
    grid-template-columns: 1fr 1fr;
  }

  .mp-device-scene {
    gap: 26px;
    padding: 34px;
  }

  .mp-showcase-caption {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .mp-showcase-caption > a {
    grid-column: 1 / -1;
  }

  .mp-release {
    gap: 30px;
  }

  .mp-pricing-facts {
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .mp-main {
    padding-top: 70px;
  }

  .mp-intro {
    padding-block-start: 50px;
    padding-block-end: 40px;
  }

  .mp-intro-copy {
    font-size: 15px;
  }

  .mp-actions {
    gap: 20px;
  }

  .mp-browser-bar {
    gap: 8px;
    padding-inline-start: 12px;
    padding-inline-end: 12px;
  }

  .mp-demo-label {
    font-size: 8px;
  }

  .mp-feature-grid-four, .mp-case-grid, .mp-device-scene, .mp-release, .mp-manifesto > div, .mp-pricing-facts {
    grid-template-columns: 1fr;
  }

  .mp-section {
    padding-top: 60px;
  }

  .mp-feature, .mp-use-case {
    padding: 26px;
  }

  .mp-device-scene {
    gap: 40px;
    padding: 28px 24px 42px;
  }

  .mp-device-copy {
    text-align: center;
  }

  .mp-platform-path {
    justify-content: center;
  }

  .mp-phone {
    width: 245px;
  }

  .mp-phone > img {
    height: 250px;
  }

  .mp-manifesto {
    padding: 28px;
  }

  .mp-manifesto > div {
    gap: 20px;
  }

  .mp-showcase-tabs {
    gap: 2px;
  }

  .mp-showcase-tabs button {
    padding-inline-start: 11px;
    padding-inline-end: 11px;
  }

  .mp-showcase-caption {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .mp-showcase-caption > a {
    margin-top: 14px;
  }

  .mp-closing {
    padding-block-start: 65px;
    padding-block-end: 75px;
  }
}

.mp-main {
  --editor-bg: #1e1e1e;
  --editor-tabs: #252526;
  --editor-text: #d4d4d4;
  --editor-muted: #a0a0a0;
  --editor-border: #3e3e42;
  --editor-accent: #007acc;
  --syntax-keyword: #c586c0;
  --syntax-declaration: #569cd6;
  --syntax-function: #dcdcaa;
  --syntax-string: #ce9178;
  --syntax-type: #4ec9b0;
  --syntax-variable: #9cdcfe;
  --syntax-number: #b5cea8;
  --syntax-tag: #569cd6;
}

.lp-root[data-theme="light"] .mp-main {
  --editor-bg: #fff;
  --editor-tabs: #f3f3f3;
  --editor-text: #000;
  --editor-muted: #6e6e6e;
  --editor-border: #e5e5e5;
  --editor-accent: #007acc;
  --syntax-keyword: #af00db;
  --syntax-declaration: #00f;
  --syntax-function: #795e26;
  --syntax-string: #a31515;
  --syntax-type: #267f99;
  --syntax-variable: #001080;
  --syntax-number: #098658;
  --syntax-tag: maroon;
}

.mp-main > .lp-section-inner, .mp-pricing-details.lp-section-inner {
  width: calc(100% - 48px);
}

.mp-preview-viewport, .mp-showcase-canvas {
  aspect-ratio: 1.4;
}

.lp-lens, .lp-lens-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .lp-nav-signin {
    white-space: nowrap;
  }

  .lp-topbar .lp-nav {
    gap: 10px;
  }

  .lp-lens {
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .lp-lens-btn {
    padding-inline-start: 10px;
    padding-inline-end: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-phone {
    transition: none;
  }
}

.mp-shop-lead > p, .mp-shop-note {
  color: #666a5c;
}

.mp-portal-activity > p {
  color: #52637a;
}

.mp-project > p {
  color: #c1d1cc;
}

.mp-shop-products img {
  height: 32cqw;
}

.hw-opening {
  max-width: 690px;
  margin-bottom: 38px;
}

.hw-opening h2, .hw-handoff h2 {
  margin: 18px 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.08;
}

.hw-opening > p:last-child {
  color: var(--text-secondary);
  max-width: 600px;
  font-size: 15px;
  line-height: 1.85;
}

.hw-workspace {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.3fr);
  align-items:  start;
  gap: 48px;
}

.hw-chapters {
  list-style: none;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
  padding: 0;
}

.hw-chapters li {
  border-bottom: 1px solid var(--border-subtle);
}

.hw-chapter {
  display: flex;
  text-align: left;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items:  center;
  gap: 18px;
  width: 100%;
  padding: 25px 16px;
}

.hw-chapter[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  color: var(--text-primary);
}

.hw-chapter-number {
  color: var(--text-muted);
  align-self:  flex-start;
  padding-top: 4px;
  font: 12px JetBrains Mono, monospace;
}

.hw-chapter[aria-pressed="true"] .hw-chapter-number {
  color: var(--accent-2);
}

.hw-chapter strong {
  display: block;
  letter-spacing: -.025em;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}

.hw-chapter small {
  display: block;
  color: var(--text-muted);
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.6;
}

.hw-chapter > svg {
  opacity: .25;
  flex-shrink: 0;
  margin-left: auto;
}

.hw-chapter[aria-pressed="true"] > svg {
  opacity: 1;
  color: var(--accent-2);
}

.hw-example-note {
  color: var(--text-muted);
  margin: 22px 16px;
  font-size: 11px;
  line-height: 1.8;
}

.hw-panel {
  border: 1px solid var(--border-strong);
  overflow: hidden;
  background: var(--bg-elev-band);
  border-radius: 18px;
  min-width: 0;
  box-shadow: 0 24px 70px #0002;
}

.hw-panel-caption {
  border-top: 1px solid var(--border-subtle);
  padding: 26px 30px;
}

.hw-panel-caption h3 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 500;
}

.hw-panel-caption p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
}

.hw-brief, .hw-system, .hw-launch, .hw-growth {
  box-sizing: border-box;
  min-height: 440px;
  padding: 32px;
}

.hw-brief {
  color: #3b4035;
  background: #eee7d8 linear-gradient(#93877610 1px, #0000 1px) 0 0 / 100% 28px;
}

.hw-brief > header {
  display: flex;
  letter-spacing: .12em;
  color: #6c705e;
  justify-content: space-between;
  font: 9px JetBrains Mono, monospace;
}

.hw-brief .hw-handwritten {
  letter-spacing: -.02em;
  color: #394630;
  margin: 30px 0 22px;
  font: 38px / 1.1 Instrument Serif, Georgia, serif;
}

.hw-brief blockquote {
  color: #4d5146;
  margin: 0 0 25px;
  font-size: 14px;
  line-height: 1.9;
}

.hw-brief dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #85836a40;
  gap: 18px;
  margin: 0;
  padding-top: 18px;
}

.hw-brief dt {
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6c705e;
  font-size: 9px;
}

.hw-brief dd {
  margin: 8px 0 0;
  font-size: 12px;
}

.hw-brief footer {
  color: #6c705e;
  margin-top: 26px;
  font-size: 10px;
  line-height: 1.7;
}

.hw-system {
  display: flex;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 75%);
  flex-direction: column;
  justify-content: center;
  align-items:  center;
}

.hw-system-entry {
  display: flex;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-base);
  border-radius: 12px;
  align-items:  center;
  gap: 16px;
  width: 100%;
  padding: 22px;
  font-size: 20px;
}

.hw-system-entry > svg {
  color: var(--accent-2);
}

.hw-system-entry strong {
  display: block;
  color: var(--text-secondary);
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
}

.hw-connector {
  color: var(--text-muted);
  margin: 18px;
}

.hw-system-parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.hw-system-parts > div {
  display: flex;
  text-align: center;
  border: 1px solid var(--border-subtle);
  background: var(--bg-base);
  border-radius: 10px;
  flex-direction: column;
  align-items:  center;
  padding: 18px 8px;
}

.hw-system-parts svg {
  color: var(--accent-2);
  margin-bottom: 14px;
  font-size: 20px;
}

.hw-system-parts strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
}

.hw-system-parts span {
  color: var(--text-muted);
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.6;
}

.hw-system-result {
  text-align: center;
  color: var(--text-primary);
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.hw-system-result em {
  display: block;
  color: var(--accent-2);
  font: 26px Instrument Serif, Georgia, serif;
}

.hw-launch > header, .hw-growth-origin {
  letter-spacing: .1em;
  color: var(--text-muted);
  display: flex;
  align-items:  center;
  gap: 9px;
  font-size: 10px;
}

.hw-status-dot {
  display: inline-block;
  background: #79a78c;
  border-radius: 50%;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
}

.hw-launch ol {
  list-style: none;
  margin: 28px 0;
  padding: 0;
}

.hw-launch li {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  align-items:  center;
  gap: 14px;
  padding: 23px 0;
}

.hw-launch li > span {
  color: var(--text-muted);
  font: 11px JetBrains Mono, monospace;
}

.hw-launch li strong {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.hw-launch li p {
  color: var(--text-secondary);
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

.hw-launch li > svg {
  color: #79a78c;
  flex-shrink: 0;
  margin-left: auto;
}

.hw-launch footer, .hw-growth footer {
  display: flex;
  color: var(--text-secondary);
  align-items:  center;
  gap: 10px;
  font-size: 11px;
}

.hw-launch footer > svg {
  color: var(--accent-2);
  font-size: 17px;
}

.hw-growth {
  background: radial-gradient(at 100% 0, #8daa7720, #0000 70%);
}

.hw-growth h3 {
  margin: 30px 0;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.05;
}

.hw-growth h3 em {
  display: block;
  font-family: var(--font-voice);
  color: var(--accent-2);
  font-weight: 400;
}

.hw-growth ul {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.hw-growth li {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  align-items:  center;
  gap: 14px;
  padding: 14px 0;
  font-size: 13px;
  line-height: 1.7;
}

.hw-growth li svg {
  color: var(--accent-2);
  flex-shrink: 0;
}

.hw-handoff {
  border-bottom: 1px solid var(--border-subtle);
  padding-block-start: 90px;
  padding-block-end: 45px;
}

.hw-handoff > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  max-width: 920px;
  margin: 25px 0;
}

.hw-handoff > div p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .hw-workspace {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hw-chapters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 0;
    gap: 8px;
  }

  .hw-chapters li {
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
  }

  .hw-chapter {
    gap: 10px;
    height: 100%;
    padding: 18px 14px;
  }

  .hw-chapter strong {
    font-size: 15px;
  }

  .hw-chapter > svg {
    display: none;
  }

  .hw-example-note {
    margin: 14px 0;
  }

  .hw-opening {
    margin-bottom: 28px;
  }

  .hw-brief, .hw-system, .hw-launch, .hw-growth {
    min-height: 420px;
  }
}

@media (max-width: 480px) {
  .hw-chapter {
    align-items:  flex-start;
  }

  .hw-chapter-number {
    font-size: 10px;
  }

  .hw-chapter strong {
    font-size: 13px;
  }

  .hw-chapter small {
    font-size: 10px;
  }

  .hw-brief, .hw-system, .hw-launch, .hw-growth {
    min-height: 440px;
    padding: 24px;
  }

  .hw-brief .hw-handwritten {
    font-size: 34px;
  }

  .hw-panel-caption {
    padding: 24px;
  }

  .hw-handoff > div {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hw-system-parts {
    gap: 6px;
  }

  .hw-system-parts > div {
    padding-inline-start: 5px;
    padding-inline-end: 5px;
  }

  .hw-handoff {
    padding-top: 65px;
  }
}

.mp-main[data-page="how-it-works"] {
  padding-top: 40px;
}

.hw-opening h1 {
  margin: 14px 0 18px;
  font-size: clamp(36px, 3.8vw, 52px);
  font-weight: 500;
  line-height: 1.04;
}

.hw-workspace .hw-opening {
  margin-bottom: 24px;
}

.hw-workspace .hw-opening > p:last-child {
  font-size: 14px;
  line-height: 1.75;
}

.hw-workspace .hw-chapter {
  padding-block-start: 18px;
  padding-block-end: 18px;
}

.hw-workspace .hw-chapter strong {
  font-size: 15px;
}

.hw-workspace .hw-chapter small {
  margin-top: 5px;
}

.hw-workspace .hw-panel {
  margin-top: 3px;
}

@media (max-width: 900px) {
  .mp-main[data-page="how-it-works"] {
    padding-top: 32px;
  }

  .hw-opening h1 {
    font-size: clamp(36px, 6vw, 48px);
  }

  .hw-workspace .hw-opening {
    max-width: 600px;
  }
}

@media (max-width: 480px) {
  .mp-main[data-page="how-it-works"] {
    padding-top: 24px;
  }

  .hw-workspace .hw-chapter {
    padding-block-start: 14px;
    padding-block-end: 14px;
  }

  .hw-workspace .hw-chapter strong {
    font-size: 13px;
  }
}

.wx-scene {
  --wx-surface: #15222d;
  --wx-raised: #1d2c37;
  --wx-ink: #e5edf2;
  --wx-muted: #97aeba;
  --wx-line: #ffffff16;
  --wx-mint: #acd7be;
  background: var(--wx-surface);
  color: var(--wx-ink);
  container-type: inline-size;
  overflow: hidden;
  min-height: 490px;
}

.lp-root[data-theme="light"] .wx-scene {
  --wx-surface: #f3f7f8;
  --wx-raised: #fff;
  --wx-ink: #203844;
  --wx-muted: #59727d;
  --wx-line: #24445420;
  --wx-mint: #367c5c;
}

.wx-toolbar {
  display: flex;
  border-bottom: 1px solid var(--wx-line);
  background: var(--wx-raised);
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  font-size: 11px;
}

.wx-toolbar > span, .wx-pill {
  display: inline-flex;
  align-items:  center;
  gap: 9px;
}

.wx-toolbar i {
  color: var(--wx-muted);
  font-style: normal;
}

.wx-toolbar svg {
  color: var(--wx-mint);
}

.wx-pill {
  color: var(--wx-muted);
  font-size: 9px;
}

.wx-pill > span, .wx-pulse {
  background: var(--wx-mint);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 12px #88c6a655;
}

.wx-eyebrow {
  letter-spacing: .14em;
  color: var(--wx-muted);
  font-size: 9px;
  font-weight: 500;
}

.wx-brief-body {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  min-height: 450px;
}

.wx-conversation {
  border-right: 1px solid var(--wx-line);
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
}

.wx-request {
  background: var(--wx-raised);
  border: 1px solid var(--wx-line);
  color: var(--wx-ink);
  border-radius: 12px 12px 3px;
  margin: 18px 0 22px;
  padding: 15px;
  font-size: 12px;
  line-height: 1.8;
}

.wx-response {
  display: flex;
  align-items:  flex-start;
  gap: 10px;
}

.wx-ai-mark {
  display: grid;
  color: #183329;
  background: #b8d9c2;
  border-radius: 7px;
  flex-shrink: 0;
  place-items:  center;
  width: 24px;
  height: 24px;
  font-family: Instrument Serif, serif;
  font-size: 18px;
}

.wx-response p {
  color: var(--wx-ink);
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.wx-response em {
  color: var(--wx-mint);
  font-family: Instrument Serif, serif;
  font-size: 22px;
}

.wx-build-list {
  list-style: none;
  color: var(--wx-muted);
  margin: 24px 0;
  padding: 0;
  font-size: 10px;
  line-height: 1.6;
}

.wx-build-list li {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin-bottom: 10px;
}

.wx-build-list svg {
  color: var(--wx-mint);
  flex-shrink: 0;
}

.wx-composer {
  display: flex;
  border: 1px solid var(--wx-line);
  color: var(--wx-muted);
  background: var(--wx-raised);
  border-radius: 8px;
  align-items:  center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 9px;
  font-size: 9px;
}

.wx-composer > span {
  flex: 1;
}

.wx-composer > svg {
  flex-shrink: 0;
}

.wx-generated {
  display: flex;
  background: radial-gradient(at 60% 45%, #96b79a20, #0000 75%);
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 30px 18px;
}

.wx-preview-label {
  display: flex;
  color: var(--wx-muted);
  letter-spacing: .12em;
  align-items:  center;
  gap: 7px;
  margin-bottom: 16px;
  font-size: 8px;
}

.wx-generated .fw-preview {
  transition: transform .3s;
  transform: rotate(-2deg);
  box-shadow: 0 20px 35px #0004;
}

.wx-generated:hover .fw-preview {
  transform: rotate(0);
}

.wx-generated-note {
  text-align: center;
  color: var(--wx-mint);
  margin-top: 24px;
  font-family: Instrument Serif, serif;
  font-size: 20px;
  font-style: italic;
}

.fw-preview {
  container-type: inline-size;
  overflow: hidden;
  color: #26392e;
  background: #f1f0e6;
  border: 1px solid #9ba99340;
  border-radius: 9px;
}

.fw-preview > header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 6px;
  padding: 5cqw;
  font-size: 3cqw;
}

.fw-preview > header > span:first-child {
  display: flex;
  letter-spacing: -.04em;
  align-items:  center;
  gap: 1.5cqw;
  font-size: 5.5cqw;
  font-weight: 600;
}

.fw-preview > header > span:last-child {
  color: #596b5d;
  font-size: 2.2cqw;
}

.fw-landscape {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(170deg, #b3c8bc 0%, #d8d5b6 55%, #77927b 100%);
  min-height: 87cqw;
}

.fw-sun {
  position: absolute;
  background: #f5e8b6;
  border-radius: 50%;
  width: 22cqw;
  height: 22cqw;
  top: 10%;
  right: 10%;
  box-shadow: 0 0 50px #fff3;
}

.fw-mountain {
  position: absolute;
  background: linear-gradient(160deg, #6d927a, #334f41);
  border-radius: 35% 65% 0 0;
  width: 150%;
  height: 70%;
  bottom: -25%;
  left: -30%;
  transform: rotate(-23deg);
}

.fw-mountain-back {
  background: linear-gradient(150deg, #8ea68a, #587962);
  bottom: -9%;
  left: 5%;
  transform: rotate(22deg);
}

.fw-mountain-front {
  box-shadow: inset 0 3px #ffffff15;
}

.fw-landscape-copy {
  position: relative;
  z-index: 1;
  color: #163e30;
  padding: 8cqw 7cqw;
}

.fw-landscape-copy > span:first-child {
  letter-spacing: .12em;
  font-size: 2.2cqw;
  font-weight: 600;
}

.mp-main .fw-landscape h3 {
  color: #183b2b;
  letter-spacing: -.045em;
  margin: 6cqw 0 7cqw;
  font: 14cqw / .95 Instrument Serif, Georgia, serif;
}

.fw-landscape h3 em {
  font-weight: 400;
}

.fw-explore {
  display: inline-flex;
  color: #f4f0df;
  background: #254835;
  border-radius: 20px;
  align-items:  center;
  gap: 3cqw;
  padding: 3cqw 4cqw;
  font-size: 2.8cqw;
}

.fw-coordinate {
  position: absolute;
  letter-spacing: .12em;
  color: #e2e9d5;
  z-index: 2;
  font-size: 1.8cqw;
  bottom: 5cqw;
  left: 7cqw;
}

.fw-preview > footer {
  display: flex;
  align-items:  center;
  gap: 4cqw;
  padding: 5cqw;
}

.fw-date {
  display: flex;
  border: 1px solid #25483530;
  border-radius: 4px;
  flex-direction: column;
  align-items:  center;
  padding: 2cqw 3cqw;
  font-size: 2cqw;
}

.fw-date strong {
  font-size: 5cqw;
  font-weight: 500;
}

.fw-preview > footer > span:nth-child(2) > strong {
  display: block;
  font-size: 3cqw;
  font-weight: 600;
}

.fw-preview small {
  display: flex;
  color: #667662;
  align-items:  center;
  gap: 1cqw;
  margin-top: 2cqw;
  font-size: 2.3cqw;
}

.fw-people {
  display: flex;
  color: #f1f0e6;
  background: #6c816a;
  border-radius: 50%;
  align-items:  center;
  margin-left: auto;
  padding: 2cqw;
  font-size: 2cqw;
}

.fw-people > span {
  color: #254835;
  background: #bccab1;
  border: 1px solid #f1f0e6;
  border-radius: 50%;
  margin-left: -1cqw;
  padding: 2cqw;
}

.fw-people > span:last-child {
  background: #e3e8d7;
}

.wx-business-heading, .wx-growth-heading {
  padding: 28px 30px 22px;
}

.wx-business-heading h3, .wx-growth-heading h3 {
  color: var(--wx-ink);
  margin: 12px 0 0;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.1;
}

.wx-business-heading h3 em, .wx-growth-heading h3 em {
  display: block;
  color: var(--wx-mint);
  font-family: Instrument Serif, serif;
  font-size: 34px;
  font-weight: 400;
}

.wx-member {
  display: flex;
  border: 1px solid var(--wx-line);
  background: var(--wx-raised);
  border-radius: 10px;
  align-items:  center;
  gap: 13px;
  margin: 0 30px 18px;
  padding: 14px 16px;
}

.wx-avatar {
  display: grid;
  color: #29372f;
  background: linear-gradient(135deg, #dec5a1, #8d9784);
  border-radius: 50%;
  place-items:  center;
  width: 36px;
  height: 36px;
  font-family: Instrument Serif, serif;
  font-size: 18px;
}

.wx-member > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wx-member strong {
  font-size: 12px;
  font-weight: 500;
}

.wx-member > div > span {
  color: var(--wx-muted);
  font-size: 10px;
}

.wx-member-badge {
  display: flex;
  color: var(--wx-mint);
  align-items:  center;
  gap: 6px;
  margin-left: auto;
  font-size: 9px;
}

.wx-business-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 30px;
}

.wx-business-grid > section {
  border: 1px solid var(--wx-line);
  border-radius: 10px;
  min-width: 0;
  padding: 18px;
}

.wx-business-grid header {
  display: flex;
  letter-spacing: .1em;
  color: var(--wx-muted);
  align-items:  center;
  gap: 7px;
  font-size: 8px;
}

.wx-business-grid header > svg:last-child {
  color: var(--wx-mint);
  margin-left: auto;
}

.wx-membership {
  background: radial-gradient(at 100% 0, #9fb48126, #0000 80%);
}

.wx-membership > p {
  color: var(--wx-muted);
  margin: 18px 0 8px;
  font-size: 11px;
}

.wx-membership > strong {
  color: var(--wx-ink);
  font: 25px / 1.05 Instrument Serif, serif;
}

.wx-business-grid footer {
  display: flex;
  color: var(--wx-muted);
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
  margin-top: 22px;
  font-size: 8px;
}

.wx-mini-badge {
  color: var(--wx-mint);
  background: #81c49c15;
  border: 1px solid #81c49c30;
  border-radius: 20px;
  padding: 4px 7px;
}

.wx-mail {
  background: var(--wx-raised);
}

.wx-mail-subject {
  display: block;
  margin-top: 18px;
  font-family: Instrument Serif, serif;
  font-size: 28px;
}

.wx-mail > p {
  color: var(--wx-muted);
  margin: 10px 0;
  font-size: 10px;
  line-height: 1.8;
}

.wx-mail-ticket {
  display: block;
  border-block: 1px dashed var(--wx-line);
  letter-spacing: .08em;
  padding-block-start: 9px;
  padding-block-end: 9px;
  font-size: 8px;
}

.wx-connected-footer {
  display: flex;
  color: var(--wx-muted);
  align-items:  center;
  gap: 9px;
  padding: 22px 30px;
  font-size: 9px;
}

.wx-connected-footer > svg {
  color: var(--wx-mint);
}

.wx-connected-footer > span:last-child {
  color: var(--wx-mint);
  margin-left: auto;
}

.wx-device-stage {
  position: relative;
  background: radial-gradient(#aec3a621, #0000 70%);
  min-height: 360px;
  padding: 32px 80px 24px 28px;
}

.wx-desktop {
  border: 1px solid var(--wx-line);
  overflow: hidden;
  border-radius: 10px;
  transform: perspective(1000px)rotateY(7deg);
  box-shadow: 0 18px 30px #0003;
}

.wx-desktop > header {
  display: flex;
  background: var(--wx-raised);
  color: var(--wx-muted);
  justify-content: space-between;
  align-items:  center;
  height: 26px;
  padding: 0 12px;
  font-size: 8px;
}

.wx-desktop > header > span:nth-child(2) {
  display: flex;
  align-items:  center;
  gap: 5px;
}

.wx-desktop .fw-preview {
  border: 0;
  border-radius: 0;
}

.wx-desktop .fw-landscape {
  min-height: 45cqw;
}

.wx-desktop .fw-landscape-copy {
  padding: 4cqw 6cqw;
}

.mp-main .wx-desktop .fw-landscape h3 {
  margin: 3cqw 0;
  font-size: 10cqw;
}

.wx-desktop .fw-landscape-copy > span:first-child {
  font-size: 1.6cqw;
}

.wx-desktop .fw-explore {
  padding: 2cqw 3cqw;
  font-size: 2cqw;
}

.wx-desktop .fw-preview > header, .wx-desktop .fw-preview > footer {
  padding: 3cqw 5cqw;
}

.wx-pocket {
  position: absolute;
  background: #1d2c28;
  border: 1px solid #7c9186;
  border-radius: 22px;
  width: 24%;
  padding: 5px;
  bottom: 15px;
  right: 24px;
  transform: rotate(5deg);
  box-shadow: 0 20px 30px #0005;
}

.wx-pocket .fw-preview {
  border-radius: 17px;
  padding-top: 12px;
}

.wx-pocket-camera {
  position: absolute;
  z-index: 2;
  background: #1d2c28;
  border-radius: 10px;
  width: 16%;
  height: 4px;
  top: 8px;
  left: 42%;
}

.wx-pocket .fw-landscape {
  min-height: 125cqw;
}

.wx-pocket .fw-landscape-copy {
  padding-top: 25cqw;
}

.wx-pocket .fw-people, .wx-pocket .fw-preview > header > span:last-child {
  display: none;
}

.wx-release-checks {
  display: flex;
  color: var(--wx-muted);
  justify-content: center;
  gap: 25px;
  padding: 13px 20px 22px;
  font-size: 10px;
}

.wx-release-checks > span {
  display: flex;
  align-items:  center;
  gap: 7px;
}

.wx-release-checks svg {
  color: var(--wx-mint);
}

.wx-release-banner {
  display: flex;
  background: linear-gradient(110deg, #8dc5a518, #0000);
  border: 1px solid #8dc5a533;
  border-radius: 10px;
  align-items:  center;
  gap: 14px;
  margin: 0 24px 24px;
  padding: 17px;
}

.wx-release-symbol {
  display: grid;
  color: var(--wx-mint);
  background: #8dc5a518;
  border-radius: 10px;
  place-items:  center;
  width: 36px;
  height: 36px;
  font-size: 20px;
}

.wx-release-banner strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.wx-release-banner div > span {
  display: block;
  color: var(--wx-muted);
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.6;
}

.wx-release-banner > svg:last-child {
  color: var(--wx-mint);
  flex-shrink: 0;
  margin-left: auto;
}

.wx-editor {
  overflow: hidden;
  color: #d4dce5;
  background: #131d27;
  border: 1px solid #ffffff18;
  border-radius: 10px;
  margin: 0 26px;
}

.wx-editor > header {
  display: flex;
  color: #b4c7cf;
  background: #1b2935;
  border-bottom: 1px solid #ffffff12;
  justify-content: space-between;
  align-items:  center;
  padding: 12px 15px;
  font-size: 10px;
}

.wx-editor > header > span {
  display: flex;
  align-items:  center;
  gap: 8px;
}

.wx-editor-body {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
}

.wx-editor aside {
  color: #91a5b8;
  border-right: 1px solid #ffffff12;
  padding: 18px 12px;
  font-size: 9px;
  line-height: 1.8;
}

.wx-editor aside > span {
  display: block;
  margin: 8px 0 0 8px;
}

.wx-editor pre {
  overflow: auto;
  margin: 0;
  padding: 20px 14px;
  font: 9px / 2 JetBrains Mono, monospace;
}

.wx-code-purple {
  color: #cba2e9;
}

.wx-code-green {
  color: #afce94;
}

.wx-code-blue {
  color: #86c8eb;
}

.wx-next-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 20px 26px 28px;
}

.wx-next-grid > section {
  border: 1px solid var(--wx-line);
  background: var(--wx-raised);
  border-radius: 10px;
  padding: 18px;
}

.wx-next-grid strong {
  display: block;
  margin: 15px 0 6px;
  font-size: 12px;
  font-weight: 500;
}

.wx-next-grid p {
  color: var(--wx-muted);
  margin: 0;
  font-size: 10px;
  line-height: 1.7;
}

.wx-team-avatars {
  display: inline-flex;
  align-items:  center;
  gap: 5px;
}

.wx-team-avatars > span {
  display: grid;
  color: #2a3e32;
  background: #bfd1b1;
  border-radius: 50%;
  flex: 0 0 30px;
  place-items:  center;
  width: 30px;
  height: 30px;
  font-size: 9px;
}

.wx-team-avatars > span:nth-child(2) {
  background: #d7c5ac;
}

.wx-team-avatars > span:last-child {
  border: 1px dashed var(--wx-muted);
  color: var(--wx-muted);
  background: none;
  font-size: 16px;
}

.wx-next-icon {
  color: var(--wx-mint);
  border: 1px solid var(--wx-line);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  padding: 5px;
}

@media (max-width: 600px) {
  .wx-brief-body {
    grid-template-columns: 1fr;
  }

  .wx-conversation {
    border-right: 0;
    border-bottom: 1px solid var(--wx-line);
    padding: 22px;
  }

  .wx-request {
    margin: 12px 0 18px;
  }

  .wx-build-list {
    margin: 18px 0;
  }

  .wx-generated {
    padding: 24px 40px;
  }

  .wx-generated .fw-preview {
    width: 100%;
    max-width: 310px;
    margin: auto;
  }

  .wx-preview-label {
    justify-content: center;
  }

  .wx-toolbar {
    padding-inline-start: 14px;
    padding-inline-end: 14px;
    font-size: 10px;
  }

  .wx-toolbar .wx-pill {
    gap: 5px;
    font-size: 8px;
  }

  .wx-business-heading, .wx-growth-heading {
    padding: 24px 20px 20px;
  }

  .wx-member {
    margin-inline-start: 18px;
    margin-inline-end: 18px;
    padding: 12px;
  }

  .wx-member-badge {
    font-size: 8px;
  }

  .wx-business-grid {
    gap: 10px;
    margin-inline-start: 18px;
    margin-inline-end: 18px;
  }

  .wx-business-grid > section {
    padding: 13px;
  }

  .wx-membership > strong {
    font-size: 22px;
  }

  .wx-business-grid footer {
    flex-wrap: wrap;
  }

  .wx-connected-footer {
    flex-wrap: wrap;
    padding-inline-start: 18px;
    padding-inline-end: 18px;
    font-size: 8px;
  }

  .wx-connected-footer > span:last-child {
    display: none;
  }

  .wx-device-stage {
    min-height: 0;
    padding: 28px 40px 20px 16px;
  }

  .wx-pocket {
    border-radius: 15px;
    width: 27%;
    padding: 3px;
    bottom: 8px;
    right: 12px;
  }

  .wx-pocket .fw-preview {
    border-radius: 12px;
  }

  .wx-release-checks {
    gap: 14px;
    padding-block-start: 18px;
    padding-block-end: 18px;
    font-size: 8px;
  }

  .wx-release-banner {
    gap: 10px;
    margin-inline-start: 16px;
    margin-inline-end: 16px;
    padding: 14px;
  }

  .wx-release-banner div > span {
    font-size: 9px;
  }

  .wx-editor {
    margin-inline-start: 18px;
    margin-inline-end: 18px;
  }

  .wx-editor-body {
    grid-template-columns: 1fr;
  }

  .wx-editor aside {
    display: none;
  }

  .wx-editor pre {
    padding: 16px 12px;
    font-size: 8px;
  }

  .wx-next-grid {
    gap: 10px;
    padding: 18px;
  }

  .wx-next-grid > section {
    padding: 13px;
  }

  .wx-next-grid strong {
    font-size: 11px;
  }

  .wx-scene {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wx-generated .fw-preview {
    transition: none;
  }
}

.wx-desktop .fw-coordinate {
  display: none;
}

.hw-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
}

.hw-chapter-panel {
  display: grid;
  grid-area: 1 / 1 / 3 / 2;
  grid-template-rows: subgrid;
  visibility: hidden;
  min-width: 0;
}

.hw-chapter-panel[data-active="true"] {
  visibility: visible;
}

.mp-main[data-page="what-you-can-build"] {
  padding-top: 40px;
}

.mp-main[data-page="what-you-can-build"] > .mp-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
  align-items:  start;
  gap: 16px 56px;
  padding-block-start: 0;
  padding-block-end: 40px;
}

.mp-main[data-page="what-you-can-build"] .mp-intro > .mp-kicker {
  grid-column: 1 / -1;
  margin: 0;
}

.mp-main[data-page="what-you-can-build"] .mp-intro h1 {
  grid-column: 1;
  grid-row: 2 / 4;
  margin: 0;
  font-size: clamp(40px, 4.5vw, 60px);
}

.mp-main[data-page="what-you-can-build"] .mp-intro-copy {
  grid-column: 2;
  margin: 0;
  font-size: 15px;
}

.mp-main[data-page="what-you-can-build"] .mp-intro .mp-actions {
  grid-column: 2;
  justify-content: flex-start;
  gap: 20px;
  margin: 0;
}

.mp-main[data-page="what-you-can-build"] > .mp-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
  border-bottom: 0;
  align-items:  start;
  gap: 20px 56px;
  padding-block-start: 60px;
  padding-block-end: 72px;
}

.mp-main[data-page="what-you-can-build"] .mp-note h2 {
  grid-row: 1 / 3;
  margin: 0;
  font-size: clamp(30px, 3vw, 40px);
}

.mp-main[data-page="what-you-can-build"] .mp-note > p {
  margin: 0;
}

.mp-main[data-page="what-you-can-build"] .mp-note > a {
  grid-column: 2;
}

@media (max-width: 900px) {
  .mp-main[data-page="what-you-can-build"] {
    padding-top: 32px;
  }

  .mp-main[data-page="what-you-can-build"] > .mp-intro, .mp-main[data-page="what-you-can-build"] > .mp-note {
    column-gap: 28px;
  }

  .mp-main[data-page="what-you-can-build"] .mp-intro .mp-actions {
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .mp-main[data-page="what-you-can-build"] {
    padding-top: 24px;
  }

  .mp-main[data-page="what-you-can-build"] > .mp-intro, .mp-main[data-page="what-you-can-build"] > .mp-note {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .mp-main[data-page="what-you-can-build"] > .mp-intro {
    padding-bottom: 28px;
  }

  .mp-main[data-page="what-you-can-build"] .mp-intro h1 {
    font-size: 40px;
  }

  .mp-main[data-page="what-you-can-build"] .mp-intro-copy {
    font-size: 14px;
  }

  .mp-main[data-page="what-you-can-build"] > .mp-note {
    padding-block-start: 42px;
    padding-block-end: 48px;
  }
}

.mp-main[data-page="what-you-can-build"] .mp-use-case {
  padding: 24px;
}

.mp-main[data-page="what-you-can-build"] .mp-use-case > header {
  margin-bottom: 20px;
}

.mp-main[data-page="what-you-can-build"] .mp-use-case > h2 {
  font-size: clamp(26px, 2.3vw, 32px);
}

.uc-preview {
  aspect-ratio: 1.5;
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid var(--uc-rule);
  border-radius: 12px;
  width: 100%;
  margin: 0 0 28px;
  box-shadow: 0 12px 24px #0002;
}

.uc-preview p {
  margin: 0;
}

.uc-preview > header {
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  align-items:  center;
  height: 11cqw;
  padding: 3.5cqw 4cqw;
}

.uc-preview > header > span {
  display: flex;
  align-items:  center;
  gap: 2cqw;
}

.uc-micro {
  letter-spacing: .11em;
  display: inline-flex;
  align-items:  center;
  gap: 1.2cqw;
  font-size: 1.45cqw;
}

.uc-shop {
  --uc-surface: #282b25;
  --uc-text: #eeeade;
  --uc-rule: #65695166;
  --uc-muted: #b7b59e;
  --uc-heading: #f1edde;
  --uc-accent: #d0c390;
  --uc-link-rule: #b7b59e70;
  background: var(--uc-surface);
  color: var(--uc-text);
}

.uc-shop > header {
  letter-spacing: .1em;
  border-bottom: 1px solid var(--uc-rule);
  font-size: 1.5cqw;
}

.uc-shop > header > span:first-child {
  font-weight: 600;
}

.uc-shop > header svg {
  font-size: 2.5cqw;
}

.uc-shop-layout {
  display: grid;
  grid-template-columns: 1fr .9fr;
  height: 47cqw;
}

.uc-shop-layout > section {
  display: flex;
  flex-direction: column;
  align-items:  flex-start;
  padding: 5cqw 3cqw 4cqw 4cqw;
}

.uc-shop-layout .uc-micro {
  color: var(--uc-muted);
  font-size: 1.2cqw;
}

.mp-main .uc-shop h3 {
  letter-spacing: -.04em;
  color: var(--uc-heading);
  margin: 3cqw 0;
  font: 8cqw / .95 Instrument Serif, Georgia, serif;
}

.uc-shop h3 em {
  color: var(--uc-accent);
  font-weight: 400;
}

.uc-shop-layout p {
  color: var(--uc-muted);
  font-size: 1.8cqw;
  line-height: 1.8;
}

.uc-shop-layout img {
  object-fit: cover;
  object-position: 45% 50%;
  width: 100%;
  height: 100%;
}

.uc-shop-link {
  display: flex;
  border-bottom: 1px solid var(--uc-link-rule);
  align-items:  center;
  gap: 3cqw;
  margin-top: 3cqw;
  padding-bottom: 1cqw;
  font-size: 1.6cqw;
}

.uc-shop-edition {
  letter-spacing: .12em;
  color: var(--uc-muted);
  margin-top: auto;
  font-size: 1cqw;
}

.uc-shop > footer {
  display: flex;
  color: var(--uc-muted);
  border-top: 1px solid var(--uc-rule);
  justify-content: space-between;
  align-items:  center;
  height: 8cqw;
  padding-inline-start: 4cqw;
  padding-inline-end: 4cqw;
  font-size: 1.2cqw;
}

.uc-studio {
  --uc-surface: #2b2725;
  --uc-text: #f1e6d8;
  --uc-rule: #a38a7050;
  --uc-label: #c0a992;
  --uc-muted: #c4b6a4;
  --uc-slot-rule: #b79c7d50;
  --uc-accent: #d3b897;
  --uc-on-accent: #302820;
  background: var(--uc-surface);
  color: var(--uc-text);
}

.uc-studio > header {
  border-bottom: 1px solid var(--uc-rule);
}

.uc-studio > header > span:first-child {
  font: 4cqw Instrument Serif, Georgia, serif;
}

.uc-studio > header > span:first-child > span {
  font: 1.25cqw var(--font-sans);
}

.uc-studio > header > span:last-child {
  letter-spacing: .1em;
  font-size: 1.1cqw;
}

.uc-studio-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 55.5cqw;
}

.uc-studio-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4cqw;
}

.uc-studio-photo:after {
  content: "";
  position: absolute;
  z-index: -1;
  background: linear-gradient(#0000 20%, #29241be0);
  inset: 0;
}

.uc-studio-photo img {
  position: absolute;
  object-fit: cover;
  z-index: -2;
  width: 100%;
  height: 100%;
  inset: 0;
}

.mp-main .uc-studio-photo h3 {
  letter-spacing: -.02em;
  color: #f9f0e1;
  margin: 0 0 3cqw;
  font: 6.5cqw / 1 Instrument Serif, Georgia, serif;
}

.uc-studio-photo h3 em {
  font-weight: 400;
}

.uc-studio-photo > span {
  color: #e0d6c8;
  letter-spacing: .12em;
  font-size: 1.1cqw;
}

.uc-booking {
  display: flex;
  flex-direction: column;
  padding: 5cqw 3.5cqw;
}

.uc-booking .uc-micro {
  color: var(--uc-label);
  font-size: 1cqw;
}

.mp-main .uc-booking h3 {
  color: var(--uc-text);
  margin: 4cqw 0 2cqw;
  font: 5cqw / 1.05 Instrument Serif, Georgia, serif;
}

.uc-booking > p {
  color: var(--uc-muted);
  font-size: 1.6cqw;
  line-height: 1.8;
}

.uc-booking-date {
  display: block;
  margin-top: 4cqw;
  font-size: 1.8cqw;
  font-weight: 500;
}

.uc-times {
  display: flex;
  gap: 1.3cqw;
  margin-top: 2.5cqw;
}

.uc-times > span {
  display: inline-flex;
  border: 1px solid var(--uc-slot-rule);
  border-radius: 1cqw;
  align-items:  center;
  gap: 1cqw;
  padding: 1.8cqw;
  font-size: 1.5cqw;
}

.uc-times > span:nth-child(2) {
  background: var(--uc-accent);
  color: var(--uc-on-accent);
  border-color: var(--uc-accent);
}

.uc-booking-detail {
  color: var(--uc-muted);
  margin-top: 2.5cqw;
  font-size: 1.35cqw;
}

.uc-booking-action {
  display: flex;
  background: var(--uc-accent);
  color: var(--uc-on-accent);
  border-radius: 1cqw;
  justify-content: space-between;
  align-items:  center;
  gap: 2cqw;
  margin-top: 4cqw;
  padding: 2.3cqw;
  font-size: 1.5cqw;
}

.uc-booking-note {
  text-align: center;
  color: var(--uc-muted);
  margin-top: 2cqw;
  font-size: 1.2cqw;
}

.uc-workspace {
  --uc-surface: #282431;
  --uc-text: #f0eaf7;
  --uc-rule: #a493bd38;
  --uc-avatar: #514361;
  --uc-label: #b6a5c8;
  --uc-accent: #c6aad8;
  --uc-project: #44354f;
  --uc-project-text: #efe7f5;
  --uc-project-muted: #d2bfdc;
  --uc-project-heading: #fff7ff;
  --uc-badge: #ffffff16;
  --uc-progress: #d8c1e8;
  --uc-track: #fff2;
  --uc-file-rule: #a493bd25;
  --uc-raised: #342e3f;
  --uc-file-text: #d0c4dc;
  --uc-muted: #b4a5c2;
  --uc-success: #a2c3a8;
  background: var(--uc-surface);
  color: var(--uc-text);
}

.uc-workspace > header {
  border-bottom: 1px solid var(--uc-rule);
}

.uc-workspace-logo {
  font: italic 4.5cqw Instrument Serif, Georgia, serif;
}

.uc-workspace-logo > span {
  font: 1.8cqw var(--font-sans);
}

.uc-workspace-avatar {
  background: var(--uc-avatar);
  border-radius: 50%;
  place-items:  center;
  width: 5cqw;
  height: 5cqw;
  font-size: 1.4cqw;
  display: grid !important;
}

.uc-workspace-heading {
  padding: 4cqw 4cqw 3cqw;
}

.uc-workspace-heading .uc-micro {
  color: var(--uc-label);
  font-size: 1.2cqw;
}

.mp-main .uc-workspace-heading h3 {
  color: var(--uc-text);
  margin: 2cqw 0 0;
  font-size: 4cqw;
  font-weight: 500;
  line-height: 1.15;
}

.uc-workspace-heading h3 em {
  display: block;
  color: var(--uc-accent);
  font: italic 4.5cqw Instrument Serif, Georgia, serif;
}

.uc-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3cqw;
  padding: 0 4cqw 4cqw;
}

.uc-project-card {
  background: var(--uc-project);
  color: var(--uc-project-text);
  border-radius: 2cqw;
  padding: 3cqw;
}

.uc-project-card > span:first-child {
  letter-spacing: .12em;
  color: var(--uc-project-muted);
  font-size: 1.2cqw;
}

.mp-main .uc-project-card h3 {
  color: var(--uc-project-heading);
  margin: 3cqw 0;
  font: 5.5cqw / 1.05 Instrument Serif, Georgia, serif;
}

.uc-review-badge {
  display: inline-block;
  background: var(--uc-badge);
  border-radius: 4cqw;
  padding: 1cqw 1.5cqw;
  font-size: 1.3cqw;
}

.uc-project-progress {
  display: flex;
  gap: 1cqw;
  margin-block-start: 3cqw;
  margin-block-end: 2cqw;
}

.uc-project-progress > span {
  background: var(--uc-progress);
  border-radius: 1cqw;
  flex: 1;
  height: .7cqw;
}

.uc-project-progress > span:last-child {
  background: var(--uc-track);
}

.uc-project-card > footer {
  color: var(--uc-project-muted);
  font-size: 1.2cqw;
}

.uc-file-list {
  border: 1px solid var(--uc-file-rule);
  background: var(--uc-raised);
  border-radius: 2cqw;
  padding: 3cqw;
}

.mp-main .uc-file-list h3 {
  color: var(--uc-text);
  margin: 0 0 2cqw;
  font-size: 2.3cqw;
  font-weight: 500;
}

.uc-file-list > p {
  display: flex;
  color: var(--uc-file-text);
  border-bottom: 1px solid var(--uc-file-rule);
  align-items:  center;
  gap: 1.5cqw;
  padding-block-start: 2cqw;
  padding-block-end: 2cqw;
  font-size: 1.6cqw;
}

.uc-file-list > p > svg {
  flex-shrink: 0;
  font-size: 2cqw;
}

.uc-file-list small {
  display: block;
  color: var(--uc-muted);
  margin-top: 1cqw;
  font-size: 1.2cqw;
}

.uc-file-list > p > svg:last-child {
  color: var(--uc-success);
  margin-left: auto;
}

.uc-product {
  --uc-surface: #17252d;
  --uc-text: #e4edeb;
  --uc-rule: #ffffff12;
  --uc-muted: #8ba59f;
  --uc-avatar: #aecbbb;
  --uc-on-avatar: #264336;
  --uc-label: #89a79b;
  --uc-control-rule: #ffffff20;
  --uc-card-rule: #ffffff15;
  --uc-raised: #ffffff03;
  --uc-success: #9ac7a7;
  --uc-chart-tint: #9dcaae08;
  --uc-chart-label: #a4b9b0;
  --uc-chart-grid: #ffffff06;
  --uc-bar: #aacbb4;
  --uc-bar-base: #588f7960;
  --uc-axis: #7b968b;
  background: var(--uc-surface);
  color: var(--uc-text);
}

.uc-product > header {
  border-bottom: 1px solid var(--uc-rule);
  color: var(--uc-muted);
  font-size: 1.5cqw;
}

.uc-product > header > span:first-child {
  color: var(--uc-text);
  font-size: 3cqw;
  font-weight: 500;
}

.uc-product-avatar {
  background: var(--uc-avatar);
  color: var(--uc-on-avatar);
  border-radius: 50%;
  justify-content: center;
  width: 4.5cqw;
  height: 4.5cqw;
  font-size: 1.2cqw;
}

.uc-product-heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 3cqw;
  padding: 4cqw;
}

.uc-product-heading .uc-micro {
  color: var(--uc-label);
  font-size: 1.1cqw;
}

.mp-main .uc-product-heading h3 {
  color: var(--uc-text);
  margin: 1.8cqw 0 0;
  font-size: 3.2cqw;
  font-weight: 500;
}

.uc-product-heading > span {
  display: inline-flex;
  white-space: nowrap;
  border: 1px solid var(--uc-control-rule);
  border-radius: 1cqw;
  align-items:  center;
  gap: 1cqw;
  padding: 1.5cqw;
  font-size: 1.2cqw;
}

.uc-product-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2cqw;
  padding: 0 4cqw;
}

.uc-product-stats > section {
  border: 1px solid var(--uc-card-rule);
  background: var(--uc-raised);
  border-radius: 1.5cqw;
  padding: 2.5cqw;
}

.uc-product-stats > section > span {
  color: var(--uc-label);
  font-size: 1.4cqw;
}

.uc-product-stats strong {
  display: block;
  letter-spacing: -.04em;
  margin-top: 1cqw;
  font-size: 6cqw;
  font-weight: 500;
}

.uc-product-stats small {
  display: flex;
  color: var(--uc-success);
  letter-spacing: 0;
  align-items:  center;
  gap: .5cqw;
  margin-top: .5cqw;
  font-size: 1cqw;
  font-weight: 400;
}

.uc-chart {
  border: 1px solid var(--uc-card-rule);
  background: linear-gradient(var(--uc-chart-tint), transparent);
  border-radius: 1.5cqw;
  margin: 3cqw 4cqw 4cqw;
  padding: 2.5cqw;
}

.uc-chart > header {
  display: flex;
  color: var(--uc-chart-label);
  justify-content: space-between;
  font-size: 1.4cqw;
}

.uc-chart > header > span:first-child {
  display: flex;
  align-items:  center;
  gap: 1cqw;
}

.uc-chart-bars {
  display: flex;
  border-bottom: 1px solid var(--uc-card-rule);
  background: repeating-linear-gradient(to top, transparent 0 3.9cqw, var(--uc-chart-grid) 4cqw);
  align-items:  flex-end;
  gap: 2cqw;
  height: 13cqw;
  padding-top: 2cqw;
}

.uc-chart-bars > span {
  background: linear-gradient(var(--uc-bar), var(--uc-bar-base));
  border-radius: .5cqw .5cqw 0 0;
  flex: 1;
  height: 40%;
}

.uc-chart-bars > span:nth-child(3n) {
  height: 75%;
}

.uc-chart-bars > span:nth-child(3n+1) {
  height: 55%;
}

.uc-chart-bars > span:nth-child(4n) {
  height: 90%;
}

.uc-chart-bars > span:nth-child(5n) {
  height: 65%;
}

.uc-chart > footer {
  display: flex;
  letter-spacing: .08em;
  color: var(--uc-axis);
  justify-content: space-between;
  padding-top: 1.5cqw;
  font-size: 1cqw;
}

.uc-closing {
  border: 1px solid var(--border-strong);
  background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 65%);
  border-radius: 20px;
  margin-block-start: 36px;
  margin-block-end: 64px;
  padding: 42px;
}

.uc-closing > header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items:  center;
  column-gap: 56px;
}

.uc-closing .mp-kicker {
  grid-column: 1 / -1;
  margin: 0 0 16px;
}

.uc-closing h2 {
  margin: 0;
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.06;
}

.uc-closing > header > p:last-child {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
}

.uc-combinations {
  display: flex;
  border-block: 1px solid var(--border-subtle);
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  margin-block-start: 32px;
  margin-block-end: 32px;
  padding-block-start: 24px;
  padding-block-end: 24px;
}

.uc-combinations > span {
  display: inline-flex;
  color: var(--text-primary);
  align-items:  center;
  gap: 10px;
  font-size: 12px;
}

.uc-combinations svg {
  color: var(--accent-2);
  font-size: 18px;
}

.uc-combinations i {
  color: var(--text-muted);
  font-style: normal;
}

.uc-combinations .uc-your-idea {
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 12px 16px;
}

.uc-closing > footer {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 24px;
}

.uc-closing > footer > p {
  color: var(--text-muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.uc-closing > footer strong {
  color: var(--text-primary);
  font-weight: 500;
}

.uc-closing > footer .btn {
  gap: 14px;
}

@media (max-width: 900px) {
  .mp-main[data-page="what-you-can-build"] .mp-case-grid {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  .uc-closing {
    padding: 30px;
  }

  .uc-closing > header {
    gap: 16px 28px;
  }

  .uc-combinations {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .mp-main[data-page="what-you-can-build"] .mp-use-case {
    padding: 18px;
  }

  .uc-preview {
    border-radius: 8px;
    margin-bottom: 22px;
  }

  .uc-closing {
    margin-block-start: 24px;
    margin-block-end: 40px;
    padding: 24px;
  }

  .uc-closing > header {
    grid-template-columns: 1fr;
  }

  .uc-closing .mp-kicker {
    margin-bottom: 0;
  }

  .uc-closing > footer {
    flex-direction: column;
    align-items:  flex-start;
    gap: 20px;
  }

  .uc-combinations {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-items: start;
    gap: 16px 10px;
  }

  .uc-combinations > i:nth-child(4) {
    display: none;
  }

  .uc-combinations > span {
    gap: 6px;
    font-size: 10px;
  }

  .uc-combinations .uc-your-idea {
    padding: 10px 8px;
  }
}

.uc-preview {
  aspect-ratio: 1.3;
}

.uc-preview > * {
  font-size: 2cqw;
  line-height: 1.4;
}

.uc-shop-layout {
  grid-template-rows: minmax(0, 1fr);
  height: 57cqw;
}

.uc-shop-layout > section, .uc-shop-layout > img {
  min-height: 0;
}

.uc-studio-layout {
  grid-template-rows: minmax(0, 1fr);
  height: 65cqw;
}

.uc-booking, .uc-studio-photo {
  min-height: 0;
}

.lp-root[data-theme="light"] .uc-shop {
  --uc-surface: #f1ece2;
  --uc-text: #383a2c;
  --uc-rule: #68654630;
  --uc-muted: #77745f;
  --uc-heading: #373d2c;
  --uc-accent: #797452;
  --uc-link-rule: #77745f70;
}

.lp-root[data-theme="light"] .uc-studio {
  --uc-surface: #eae2d5;
  --uc-text: #443b35;
  --uc-rule: #5d473b20;
  --uc-label: #8a7463;
  --uc-muted: #80705e;
  --uc-slot-rule: #a98d7440;
  --uc-accent: #705e4e;
  --uc-on-accent: #fff5e7;
}

.lp-root[data-theme="light"] .uc-workspace {
  --uc-surface: #f0edf7;
  --uc-text: #3b3650;
  --uc-rule: #51497020;
  --uc-avatar: #dcd2ee;
  --uc-label: #8b7c9e;
  --uc-accent: #827090;
  --uc-project: #655373;
  --uc-project-text: #efe7f5;
  --uc-project-muted: #d2bfdc;
  --uc-project-heading: #fff7ff;
  --uc-badge: #ffffff16;
  --uc-progress: #d8c1e8;
  --uc-track: #fff2;
  --uc-file-rule: #51497015;
  --uc-raised: #ffffffb0;
  --uc-file-text: #5b526a;
  --uc-muted: #998da6;
  --uc-success: #72957b;
}

.lp-root[data-theme="light"] .uc-product {
  --uc-surface: #f0f6f2;
  --uc-text: #233e32;
  --uc-rule: #355a4626;
  --uc-muted: #526e61;
  --uc-avatar: #c2d8ca;
  --uc-on-avatar: #264336;
  --uc-label: #526e61;
  --uc-control-rule: #355a4638;
  --uc-card-rule: #355a4626;
  --uc-raised: #fff;
  --uc-success: #38714d;
  --uc-chart-tint: #518b6b0d;
  --uc-chart-label: #456554;
  --uc-chart-grid: #355a4612;
  --uc-bar: #548e69;
  --uc-bar-base: #b4d0bd;
  --uc-axis: #557360;
}

.mp-main[data-page="mobile-apps"] {
  padding-top: 40px;
}

.mp-main[data-page="mobile-apps"] .mp-device-scene {
  gap: 48px;
  padding: 28px 48px;
}

.mp-device-copy h1 {
  margin: 18px 0 24px;
  font-size: clamp(44px, 5.2vw, 68px);
  font-weight: 500;
  line-height: 1.04;
}

.mp-main[data-page="mobile-apps"] .mp-device-copy > .mp-kicker {
  margin-top: 0;
}

.mp-main[data-page="mobile-apps"] .mp-device-scene + .mp-section {
  padding-top: 64px;
}

@media (max-width: 900px) {
  .mp-main[data-page="mobile-apps"] {
    padding-top: 32px;
  }

  .mp-main[data-page="mobile-apps"] .mp-device-scene {
    gap: 28px;
    padding: 28px;
  }

  .mp-device-copy h1 {
    font-size: 48px;
  }
}

@media (max-width: 600px) {
  .mp-main[data-page="mobile-apps"] {
    padding-top: 24px;
  }

  .mp-main[data-page="mobile-apps"] .mp-device-scene {
    gap: 30px;
    padding: 26px 24px 36px;
  }

  .mp-device-copy h1 {
    margin-block-start: 14px;
    margin-block-end: 18px;
    font-size: 44px;
  }

  .mp-main[data-page="mobile-apps"] .mp-device-copy > p:not(.mp-kicker):not(.mp-fineprint) {
    font-size: 14px;
  }

  .mp-main[data-page="mobile-apps"] .mp-device-scene + .mp-section {
    padding-top: 48px;
  }
}

.md-stage {
  position: relative;
  display: flex;
  isolation: isolate;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  min-width: 0;
  margin: 0;
  padding: 14px 10px 0;
}

.md-device {
  --ma-bg: #1e2322;
  --ma-card: #292f2b;
  --ma-text: #f2eee4;
  --ma-muted: #b3baac;
  --ma-soft: #8f9b8a;
  --ma-rule: #d7ddc021;
  --ma-accent: #c8d6b1;
  --ma-on-accent: #2f3828;
  position: relative;
  aspect-ratio: .474;
  container-type: inline-size;
  background: linear-gradient(125deg, #bdbbb2 0%, #5a5952 10%, #c0bcb0 39%, #66665f 70%, #aaa89e 95%);
  border: 1px solid #c2bfb5;
  border-radius: 48px;
  width: 310px;
  max-width: 100%;
  margin: 0;
  padding: 7px;
  transition: border-radius .25s;
  box-shadow: 0 0 0 1px #171917, 0 2px 0 2px #bdb9ad40, 12px 28px 45px -15px #0008, 0 50px 55px -38px #0009;
}

.lp-root[data-theme="light"] .md-device {
  --ma-bg: #f6f4ee;
  --ma-card: #fffefa;
  --ma-text: #26362b;
  --ma-muted: #69745e;
  --ma-soft: #75806c;
  --ma-rule: #34462a20;
  --ma-accent: #4d6343;
  --ma-on-accent: #f6f7ee;
  box-shadow: 0 0 0 1px #55574f, 0 2px 0 2px #ffffff90, 12px 28px 45px -15px #373e3030, 0 50px 55px -38px #373e3055;
}

.md-device[data-platform="Android"] {
  border-radius: 34px;
}

.md-screen {
  position: absolute;
  overflow: hidden;
  background: var(--ma-bg);
  color: var(--ma-text);
  display: flex;
  border: 3px solid #101312;
  border-radius: 41px;
  flex-direction: column;
  inset: 6px;
}

.md-device[data-platform="Android"] .md-screen {
  border-radius: 27px;
}

.md-side-key {
  position: absolute;
  background: linear-gradient(#a4a398, #575b52, #a4a398);
  border: 1px solid #41453d;
  border-radius: 2px;
  width: 3px;
}

.md-side-key-volume {
  height: 48px;
  top: 105px;
  left: -4px;
}

.md-side-key-power {
  height: 64px;
  top: 145px;
  right: -4px;
}

.md-camera {
  position: absolute;
  z-index: 3;
  background: #0a0d0c;
  border-radius: 15px;
  width: 74px;
  height: 21px;
  top: 9px;
  left: calc(50% - 37px);
  box-shadow: inset 0 1px 2px #ffffff0c;
}

.md-camera:after {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 40% 40%, #233944, #0d171b 60%);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  top: 7px;
  right: 8px;
  box-shadow: 0 0 0 1px #ffffff08;
}

.md-device[data-platform="Android"] .md-camera {
  width: 10px;
  height: 10px;
  top: 15px;
  left: calc(50% - 5px);
}

.md-device[data-platform="Android"] .md-camera:after {
  width: 5px;
  height: 5px;
  top: 2px;
  right: 2px;
}

.md-status {
  display: flex;
  color: var(--ma-text);
  flex-shrink: 0;
  justify-content: space-between;
  align-items:  center;
  height: 42px;
  padding: 0 20px;
  font-size: 10px;
  font-weight: 600;
}

.md-status > span:last-child {
  display: flex;
  align-items:  center;
  gap: 4px;
}

.md-status svg {
  width: 12px;
  height: 12px;
}

.md-status svg:last-child {
  width: 17px;
}

.md-signal {
  clip-path: polygon(0 70%, 18% 70%, 18% 50%, 45% 50%, 45% 25%, 72% 25%, 72% 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(to right, currentColor 0 18%, #0000 18% 27%, currentColor 27% 45%, #0000 45% 54%, currentColor 54% 72%, #0000 72% 81%, currentColor 81%);
  width: 11px;
  height: 9px;
}

.md-home {
  position: absolute;
  background: var(--ma-text);
  opacity: .85;
  border-radius: 4px;
  width: 86px;
  height: 3px;
  bottom: 7px;
  left: calc(50% - 43px);
}

.ma-app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-bottom: 15px;
}

.ma-brand {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  align-items:  center;
  padding: 6px 17px 12px;
}

.ma-brand > span:first-child {
  letter-spacing: -.05em;
  color: var(--ma-text);
  font: 25px / .8 Instrument Serif, Georgia, serif;
}

.ma-brand > span:first-child > span {
  display: block;
  font: 6px var(--font-sans);
  letter-spacing: .21em;
  color: var(--ma-muted);
  margin-top: 7px;
}

.ma-member-avatar {
  display: grid;
  background: var(--ma-rule);
  border: 1px solid var(--ma-rule);
  color: var(--ma-text);
  border-radius: 50%;
  place-items:  center;
  width: 27px;
  height: 27px;
  font-size: 8px;
  font-weight: 500;
}

.ma-app-content {
  overflow: clip;
  flex: 1;
  min-height: 0;
}

.ma-app-content > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ma-app-content .ma-editorial, .ma-class-info, .ma-next-class, .ma-studio-note, .ma-small-note {
  flex-shrink: 0;
}

.ma-app-content .ma-class-card, .ma-app-content .ma-pass {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.ma-app-content .ma-class-card > img, .ma-app-content .ma-pass > img, .ma-app-content .ma-studio-image {
  flex: 1;
  height: 0;
  min-height: 0;
}

.ma-app-content .ma-pass > :not(img) {
  flex-shrink: 0;
}

.ma-app-content .ma-photo-tag {
  top: 10px;
}

.ma-editorial {
  padding: 9px 17px 16px;
}

.ma-editorial > span {
  letter-spacing: .14em;
  color: var(--ma-soft);
  font-size: 6px;
  font-weight: 500;
}

.mp-main .ma-editorial h3 {
  letter-spacing: -.035em;
  color: var(--ma-text);
  margin: 9px 0 0;
  font: 35px / .96 Instrument Serif, Georgia, serif;
}

.ma-editorial h3 em {
  color: var(--ma-muted);
  font-weight: 400;
}

.ma-class-card {
  position: relative;
  background: var(--ma-card);
  border: 1px solid var(--ma-rule);
  overflow: hidden;
  border-radius: 15px;
  margin: 0 13px;
}

.ma-class-card > img {
  display: block;
  object-fit: cover;
  object-position: center 46%;
  width: 100%;
  height: 150px;
}

.ma-save {
  position: absolute;
  display: grid;
  color: #38432f;
  cursor: pointer;
  backdrop-filter: blur(8px);
  background: #f8f5e5e8;
  border: 1px solid #ffffff50;
  border-radius: 50%;
  place-items:  center;
  width: 28px;
  height: 28px;
  top: 10px;
  right: 10px;
}

.ma-save[aria-pressed="true"] {
  color: #f7f4e9;
  background: #465b3e;
}

.ma-save[aria-pressed="true"] svg {
  fill: currentColor;
}

.ma-save svg {
  width: 12px;
  height: 12px;
}

.ma-photo-tag {
  position: absolute;
  color: #3e4936;
  letter-spacing: .12em;
  background: #f4f0e8eb;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 5px;
  font-weight: 600;
  top: 123px;
  left: 12px;
}

.ma-class-info {
  padding: 12px 13px;
}

.ma-class-info > span {
  letter-spacing: .12em;
  color: var(--ma-soft);
  font-size: 5.5px;
}

.mp-main .ma-class-info h4 {
  letter-spacing: -.025em;
  color: var(--ma-text);
  margin: 6px 0;
  font: 28px / 1 Instrument Serif, Georgia, serif;
}

.ma-class-info > p {
  color: var(--ma-muted);
  margin: 0;
  font-size: 8px;
  line-height: 1.6;
}

.ma-class-info > footer {
  display: flex;
  border-top: 1px solid var(--ma-rule);
  color: var(--ma-muted);
  align-items:  center;
  gap: 11px;
  margin-top: 10px;
  padding-top: 9px;
  font-size: 7px;
}

.ma-class-info > footer > span {
  display: flex;
  align-items:  center;
  gap: 4px;
}

.ma-class-info > footer > svg {
  color: var(--ma-accent);
  width: 13px;
  height: 13px;
  margin-left: auto;
}

.ma-next-class {
  display: flex;
  border-top: 1px solid var(--ma-rule);
  align-items:  center;
  gap: 9px;
  margin: 13px 15px 12px;
  padding: 11px 0;
}

.ma-calendar-date {
  display: flex;
  border: 1px solid var(--ma-rule);
  letter-spacing: .1em;
  color: var(--ma-muted);
  border-radius: 8px;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 31px;
  height: 36px;
  font-size: 5px;
}

.ma-calendar-date strong {
  color: var(--ma-text);
  letter-spacing: -.04em;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}

.ma-next-class > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ma-next-class > div > span {
  letter-spacing: .12em;
  color: var(--ma-soft);
  font-size: 5px;
}

.ma-next-class > div > strong {
  color: var(--ma-text);
  font-size: 8px;
  font-weight: 500;
}

.ma-next-class small {
  color: var(--ma-muted);
  font-size: 6px;
}

.ma-reserved {
  background: var(--ma-rule);
  color: var(--ma-accent);
  border-radius: 4px;
  margin-left: auto;
  padding: 4px 5px;
  font-size: 5px;
}

.ma-tabbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ma-rule);
  background: var(--ma-bg);
  flex-shrink: 0;
  padding: 10px 12px 3px;
}

.ma-tabbar button {
  display: flex;
  color: var(--ma-soft);
  font: 6px var(--font-sans);
  cursor: pointer;
  background: none;
  border: 0;
  flex-direction: column;
  align-items:  center;
  gap: 5px;
  padding: 0;
}

.ma-tabbar button > svg {
  stroke-width: 1.4;
  width: 16px;
  height: 16px;
}

.ma-tabbar button[aria-pressed="true"] {
  color: var(--ma-accent);
}

.ma-tabbar button[aria-pressed="true"] > svg {
  stroke-width: 2;
}

.ma-tabbar button:focus-visible {
  outline: 2px solid var(--ma-accent);
  outline-offset: 3px;
}

.ma-save:focus-visible {
  outline: 2px solid var(--ma-accent);
  outline-offset: 3px;
}

.ma-pass {
  background: var(--ma-card);
  border: 1px solid var(--ma-rule);
  overflow: hidden;
  border-radius: 14px;
  margin: 0 15px;
}

.ma-pass-kicker {
  display: block;
  letter-spacing: .14em;
  color: var(--ma-muted);
  padding: 12px 14px;
  font-size: 6px;
}

.ma-pass > img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 140px;
}

.mp-main .ma-pass h4 {
  color: var(--ma-text);
  margin: 14px 14px 8px;
  font: 26px / 1.1 Instrument Serif, Georgia, serif;
}

.ma-pass > p {
  display: flex;
  color: var(--ma-muted);
  align-items:  center;
  gap: 5px;
  margin: 0 14px;
  font-size: 8px;
}

.ma-pass dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px dashed var(--ma-rule);
  gap: 14px;
  margin: 16px 14px;
  padding-top: 14px;
}

.ma-pass dt {
  letter-spacing: .15em;
  color: var(--ma-soft);
  font-size: 5px;
}

.ma-pass dd {
  color: var(--ma-text);
  margin: 6px 0 0;
  font-size: 9px;
}

.ma-pass footer {
  display: flex;
  background: var(--ma-rule);
  color: var(--ma-accent);
  align-items:  center;
  gap: 6px;
  padding: 12px 14px;
  font-size: 8px;
}

.ma-pass footer > svg:last-child {
  margin-left: auto;
}

.ma-small-note {
  text-align: center;
  color: var(--ma-muted);
  font-family: var(--font-voice);
  margin: 16px;
  font-size: 14px;
  font-style: normal;
}

.ma-studio-image {
  display: block;
  object-fit: cover;
  border-radius: 13px;
  width: calc(100% - 30px);
  height: 170px;
  margin: 0 15px;
}

.ma-studio-note {
  padding: 17px;
}

.ma-studio-note > span {
  letter-spacing: .14em;
  color: var(--ma-soft);
  font-size: 6px;
}

.mp-main .ma-studio-note h4 {
  color: var(--ma-text);
  margin: 10px 0;
  font: 29px / 1 Instrument Serif, Georgia, serif;
}

.ma-studio-note > p {
  color: var(--ma-muted);
  margin: 0;
  font-size: 9px;
  line-height: 1.8;
}

.ma-studio-note footer {
  display: flex;
  color: var(--ma-muted);
  flex-direction: column;
  gap: 8px;
  margin-top: 15px;
  font-size: 8px;
}

.ma-studio-note footer > span {
  display: flex;
  align-items:  center;
  gap: 6px;
}

.mp-main[data-page="mobile-apps"] .mp-device-scene {
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  padding-block-start: 24px;
  padding-block-end: 24px;
}

@media (max-width: 900px) {
  .md-device {
    width: 280px;
  }

  .ma-class-card > img {
    height: 125px;
  }

  .ma-photo-tag {
    top: 98px;
  }

  .ma-editorial {
    padding-block-start: 7px;
    padding-block-end: 12px;
  }

  .mp-main .ma-editorial h3 {
    font-size: 32px;
  }

  .ma-next-class {
    margin-block-start: 10px;
    margin-block-end: 10px;
    padding-block-start: 8px;
    padding-block-end: 8px;
  }

  .ma-brand {
    padding-bottom: 8px;
  }

  .md-status {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
  }

  .md-stage {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}

@media (max-width: 600px) {
  .md-device {
    width: 300px;
  }

  .ma-class-card > img {
    height: 145px;
  }

  .ma-photo-tag {
    top: 118px;
  }

  .ma-editorial {
    padding-block-start: 9px;
    padding-block-end: 16px;
  }

  .mp-main .ma-editorial h3 {
    font-size: 35px;
  }

  .ma-brand {
    padding-bottom: 12px;
  }

  .md-stage {
    width: 100%;
    padding-top: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-device {
    transition: none;
  }
}

@media (max-width: 600px) {
  .mp-main[data-page="mobile-apps"] .mp-device-scene {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}

@media (max-width: 360px) {
  .mp-main .ma-editorial h3 {
    font-size: 28px;
  }

  .ma-editorial {
    padding-block-start: 4px;
    padding-block-end: 8px;
  }

  .ma-pass-kicker, .ma-pass footer {
    padding-block-start: 8px;
    padding-block-end: 8px;
  }

  .mp-main .ma-pass h4 {
    margin-block-start: 8px;
    margin-block-end: 8px;
    font-size: 22px;
  }

  .ma-pass dl {
    margin-block-start: 8px;
    margin-block-end: 8px;
    padding-top: 8px;
  }

  .ma-small-note {
    margin: 8px;
    font-size: 12px;
  }

  .ma-studio-note {
    padding-block-start: 10px;
    padding-block-end: 10px;
  }

  .mp-main .ma-studio-note h4 {
    font-size: 24px;
  }

  .ma-studio-note footer {
    gap: 5px;
    margin-top: 8px;
  }
}

.mp-showcase-tabs {
  border-bottom: 1px solid var(--border-subtle);
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 20px;
  padding-bottom: 16px;
}

.mp-showcase-tabs button {
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 13px;
}

.mp-showcase-tabs button svg {
  color: var(--accent-2);
  width: 16px;
  height: 16px;
}

.mp-showcase-tabs button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.mp-showcase-frame {
  box-shadow: 0 20px 55px -30px #0005;
}

.mp-showcase-canvas {
  aspect-ratio: 1.4;
}

.mp-showcase-caption {
  padding-block-start: 28px;
  padding-block-end: 28px;
}

.mp-showcase-caption h2 {
  font-family: var(--font-voice);
  font-size: 34px;
  font-weight: 400;
}

.mp-showcase-caption .mp-text-link {
  border: 1px solid var(--border-strong);
  text-decoration: none;
  background: var(--bg-surface);
  border-radius: 10px;
  padding: 13px 18px;
}

.mp-shop {
  --sg-bg: #272922;
  --sg-text: #efeddd;
  --sg-muted: #b9bfaa;
  --sg-rule: #d3dbc62b;
}

.mp-portal {
  --sg-bg: #202b35;
  --sg-text: #e4edf4;
  --sg-muted: #a8b9c8;
  --sg-rule: #a9c6d729;
  --sg-surface: #2b3945;
}

.lp-root[data-theme="light"] .mp-shop {
  --sg-bg: #f1eddf;
  --sg-text: #323729;
  --sg-muted: #666a5c;
  --sg-rule: #32372930;
}

.lp-root[data-theme="light"] .mp-portal {
  --sg-bg: #e9edf1;
  --sg-text: #253043;
  --sg-muted: #607086;
  --sg-rule: #25304320;
  --sg-surface: #fafbfc;
}

.mp-portal-mark {
  background: var(--sg-surface);
  color: var(--sg-text);
  border: 1px solid var(--sg-rule);
}

.sg-shop-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items:  center;
  gap: 4cqw;
  margin-block-start: 2.5cqw;
  margin-block-end: 2.5cqw;
}

.sg-shop-hero > img {
  object-fit: cover;
  object-position: center 60%;
  border-radius: 12cqw 12cqw .8cqw .8cqw;
  width: 100%;
  height: 25cqw;
}

.sg-shop-hero .mp-shop-lead {
  text-align: left;
  margin: 0;
}

.sg-shop-hero .mp-shop-lead h2 {
  margin-block-start: 2cqw;
  margin-block-end: 2cqw;
  font-size: 8cqw;
  line-height: .94;
}

.sg-shop-hero .mp-shop-lead h2 em {
  display: block;
  margin-left: 0;
}

.mp-shop-products {
  gap: 2cqw;
}

.mp-shop-products figure {
  display: grid;
  grid-template-columns: 10cqw 1fr;
  border-top: 1px solid var(--sg-rule);
  align-items:  center;
  gap: 1.5cqw;
  padding-top: 2cqw;
}

.mp-shop-products img {
  border-radius: .6cqw;
  height: 9cqw;
}

.mp-shop-products figcaption {
  flex-direction: column;
  gap: .8cqw;
  font-size: 1.3cqw;
}

.mp-project {
  background: linear-gradient(110deg, #1b3335ed, #1b3335a6), url("/images/landing/pottery-studio.jpg") center / cover;
}

.sg-review-status {
  display: flex;
  align-items:  center;
  gap: .6cqw;
}

.sg-workspace-footer {
  display: flex;
  color: var(--sg-muted);
  justify-content: space-between;
  align-items:  center;
  margin-top: 3cqw;
  font-size: 1cqw;
}

.sg-workspace-footer > span:first-child {
  display: flex;
  align-items:  center;
  gap: .7cqw;
}

.sg-workspace-footer strong {
  display: grid;
  border: 1px solid var(--sg-rule);
  background: var(--sg-surface);
  color: var(--sg-text);
  border-radius: 50%;
  place-items:  center;
  width: 2.8cqw;
  height: 2.8cqw;
  font-size: .8cqw;
  font-weight: 500;
}

@media (max-width: 900px) {
  .mp-showcase-caption {
    gap: 18px;
  }
}

@media (max-width: 600px) {
  .mp-showcase-tabs {
    justify-content: space-between;
    gap: 3px;
  }

  .mp-showcase-tabs button {
    gap: 5px;
    padding: 10px 7px;
    font-size: 11px;
  }

  .mp-showcase-tabs button svg {
    width: 13px;
    height: 13px;
  }

  .mp-showcase-frame {
    border-radius: 12px;
  }

  .mp-showcase-caption {
    gap: 8px;
    padding-block-start: 20px;
    padding-block-end: 20px;
  }

  .mp-showcase-caption h2 {
    font-size: 30px;
  }

  .mp-showcase-caption .mp-text-link {
    justify-self: start;
    margin-top: 8px;
  }
}

.mp-showcase-canvas .mp-portal p {
  margin-block-start: 1.2cqw;
  margin-block-end: 1.2cqw;
}

.mp-showcase-canvas .mp-portal-activity h3 {
  margin-top: 0;
}

.mp-showcase-canvas .mp-portal {
  font-size: 1.2cqw;
}

.lp-pricing-page {
  padding-top: 28px;
}

.lp-pricing-page .lp-pricing {
  padding-block-start: 28px;
  padding-block-end: 32px;
}

.lp-pricing-page .lp-section-head {
  margin-bottom: 32px;
}

.lp-pricing-page .lp-section-head > .mp-kicker {
  margin: 0 0 14px;
}

.lp-pricing-page h1.lp-h2 {
  margin-bottom: 20px;
  font-size: clamp(40px, 4.7vw, 64px);
  font-weight: 500;
  line-height: 1.05;
}

.lp-pricing-page .lp-lede {
  max-width: 650px;
  font-size: 15px;
  line-height: 1.8;
}

.lp-pricing-page .lp-tier {
  background: linear-gradient(155deg, var(--bg-elev-band), var(--bg-base));
  border-radius: 20px;
  gap: 24px;
  padding: 28px;
  box-shadow: 0 18px 40px -28px #0005;
}

.lp-pricing-page .lp-tier-highlight {
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent-2) 10%, var(--bg-base)), var(--bg-base));
  box-shadow: 0 18px 45px -28px color-mix(in srgb, var(--accent-2) 40%, transparent);
}

.lp-pricing-page .lp-tier-name {
  letter-spacing: -.035em;
  font-size: 23px;
  font-weight: 500;
}

.lp-pricing-page .lp-tier-price {
  font-size: 48px;
  font-weight: 500;
}

.lp-pricing-page .lp-tier-rows {
  border-top: 1px solid var(--border-subtle);
  padding-top: 22px;
}

.lp-pricing-page .mp-pricing-details {
  padding-block-start: 64px;
  padding-block-end: 72px;
}

.lp-pricing-page .mp-section-heading {
  margin-bottom: 30px;
}

.lp-pricing-page .mp-section-heading h2, .pr-questions-heading h2 {
  letter-spacing: -.045em;
  margin: 12px 0 18px;
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.08;
}

.lp-pricing-page .mp-section-heading h2 em {
  display: inline;
}

.lp-pricing-page .mp-pricing-facts {
  gap: 18px;
  margin-bottom: 64px;
}

.lp-pricing-page .mp-pricing-facts article {
  border: 1px solid var(--border-subtle);
  background: linear-gradient(145deg, var(--bg-glass), transparent);
  border-radius: 18px;
  padding: 26px;
}

.lp-pricing-page .mp-pricing-facts .pr-fact-icon {
  display: grid;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--accent-2) 7%, transparent);
  border-radius: 13px;
  place-items:  center;
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
}

.pr-fact-icon svg {
  width: 19px;
  height: 19px;
}

.lp-pricing-page .mp-pricing-facts h3 {
  letter-spacing: -.035em;
  margin-block-start: 12px;
  margin-block-end: 12px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
}

.lp-pricing-page .mp-pricing-facts p {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.8;
}

.pr-questions {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  border-top: 1px solid var(--border-subtle);
  align-items:  start;
  gap: 64px;
  padding-top: 48px;
}

.pr-questions-heading > p:not(.mp-kicker) {
  color: var(--text-secondary);
  max-width: 280px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.8;
}

.pr-questions .mp-faq {
  width: 100%;
  margin: 0;
}

.pr-question {
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 20px;
  transition: border-color .3s;
}

.pr-question[data-open="true"] {
  border-color: var(--border-strong);
}

.pr-question h3 {
  margin: 0;
}

.pr-question button {
  display: flex;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items:  center;
  gap: 20px;
  width: 100%;
  padding: 0;
  transition: color .3s;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.pr-question[data-open="true"] button {
  color: var(--accent-2);
}

.pr-question button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 5px;
  border-radius: 3px;
}

.pr-question button svg {
  color: var(--accent-2);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform .3s;
}

.pr-question[data-open="true"] button svg {
  transform: rotate(45deg);
}

.pr-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .32s cubic-bezier(.22,1,.36,1), opacity .24s;
}

.pr-question[data-open="true"] .pr-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.pr-answer-content {
  overflow: hidden;
  min-height: 0;
}

.pr-questions .mp-faq p {
  margin: 0;
  font-size: 13px;
}

.pr-answer-content > span {
  display: block;
  padding-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .pr-question, .pr-question button, .pr-question button svg, .pr-answer {
    transition: none;
  }
}

@media (max-width: 960px) {
  .lp-pricing-page .lp-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .lp-pricing-page .mp-pricing-facts {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lp-pricing-page .mp-pricing-facts article {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 20px;
    padding: 22px;
  }

  .lp-pricing-page .mp-pricing-facts .pr-fact-icon {
    grid-row: span 3;
    margin: 0;
  }

  .lp-pricing-page .mp-pricing-facts h3 {
    margin-block-start: 8px;
    margin-block-end: 8px;
  }

  .lp-pricing-page .mp-pricing-facts p {
    margin-top: 0;
  }

  .pr-questions {
    gap: 28px;
  }
}

@media (max-width: 600px) {
  .lp-pricing-page {
    padding-top: 16px;
  }

  .lp-pricing-page .lp-pricing {
    padding-block-start: 20px;
    padding-block-end: 16px;
  }

  .lp-pricing-page .lp-lede {
    font-size: 14px;
  }

  .lp-pricing-page .lp-pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .lp-pricing-page .lp-tier {
    padding: 24px;
  }

  .lp-pricing-page .mp-pricing-details {
    padding-block-start: 44px;
    padding-block-end: 44px;
  }

  .lp-pricing-page .mp-pricing-facts {
    margin-bottom: 40px;
  }

  .lp-pricing-page .mp-pricing-facts article {
    column-gap: 14px;
    padding: 20px;
  }

  .pr-questions {
    grid-template-columns: 1fr;
    padding-top: 32px;
  }

  .pr-questions-heading > p:not(.mp-kicker) {
    max-width: none;
  }
}

.mp-main[data-page="about"] {
  padding-top: 28px;
}

.mp-main[data-page="about"] .mp-intro {
  padding-block-start: 28px;
  padding-block-end: 40px;
}

.mp-main[data-page="about"] .mp-intro h1 {
  margin-block-start: 14px;
  margin-block-end: 20px;
  font-size: clamp(40px, 4.7vw, 64px);
  font-weight: 500;
}

.mp-main[data-page="about"] .mp-intro-copy {
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .mp-main[data-page="about"] {
    padding-top: 16px;
  }

  .mp-main[data-page="about"] .mp-intro {
    padding-block-start: 20px;
    padding-block-end: 32px;
  }

  .mp-main[data-page="about"] .mp-intro-copy {
    font-size: 14px;
  }
}

.ab-opening {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items:  center;
  gap: 64px;
  padding-block-start: 28px;
  padding-block-end: 56px;
}

.ab-opening h1 {
  margin: 16px 0 24px;
  font-size: clamp(40px, 4.7vw, 64px);
  font-weight: 500;
  line-height: 1.05;
}

.ab-opening-copy > p:not(.mp-kicker), .ab-story-copy p, .ab-quality-copy > p:not(.mp-kicker), .ab-invitation header > p:not(.mp-kicker) {
  color: var(--text-secondary);
  text-wrap: pretty;
  font-size: 15px;
  line-height: 1.85;
}

.ab-opening-copy > p:not(.mp-kicker) {
  max-width: 480px;
}

.ab-opening-copy .btn {
  display: inline-flex;
  align-items:  center;
  gap: 16px;
  margin-top: 12px;
}

.ab-foundation {
  border: 1px solid var(--border-strong);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-2) 9%, var(--bg-base)), var(--bg-base));
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 24px 60px -36px #0005;
}

.ab-foundation > header {
  display: flex;
  letter-spacing: .12em;
  color: var(--text-muted);
  align-items:  center;
  gap: 9px;
  font-size: 9px;
}

.ab-live-dot {
  background: var(--accent-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 12%, transparent);
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.ab-foundation h2 {
  margin: 24px 0;
  font-size: 29px;
  font-weight: 500;
  line-height: 1.1;
}

.ab-foundation ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.ab-foundation li {
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  border-radius: 12px;
  min-width: 0;
  padding: 18px 14px;
}

.ab-foundation li > svg {
  color: var(--accent-2);
  width: 20px;
  height: 20px;
  margin-bottom: 14px;
}

.ab-foundation strong, .ab-foundation small {
  display: block;
}

.ab-foundation strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
}

.ab-foundation small {
  color: var(--text-muted);
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.6;
}

.ab-foundation footer {
  display: flex;
  color: var(--text-secondary);
  align-items:  center;
  gap: 8px;
  margin-top: 22px;
  font-size: 11px;
}

.ab-foundation footer svg {
  color: var(--accent-2);
  flex-shrink: 0;
}

.ab-story, .ab-quality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-subtle);
  align-items:  center;
  gap: 72px;
  padding-block-start: 64px;
  padding-block-end: 64px;
}

.ab-story h2, .ab-quality h2, .ab-invitation h2 {
  margin: 14px 0 22px;
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.12;
}

.ab-story-copy p:first-child {
  margin-top: 0;
}

.ab-story-copy p:last-child {
  color: var(--text-primary);
  margin-bottom: 0;
}

.ab-ecosystem {
  padding-block-start: 48px;
  padding-block-end: 64px;
}

.ab-ecosystem .mp-section-heading {
  max-width: 760px;
  margin-bottom: 32px;
}

.ab-ecosystem .mp-feature {
  padding: 26px;
}

.ab-ecosystem .mp-feature h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}

.ab-ecosystem .mp-feature > p:last-child {
  font-size: 14px;
  line-height: 1.8;
}

.ab-ecosystem-note {
  text-align: center;
  color: var(--text-muted);
  max-width: 650px;
  margin: 26px auto 0;
  font-size: 13px;
  line-height: 1.8;
}

.ab-quality-copy .mp-text-link {
  display: inline-block;
  margin-top: 10px;
}

.ab-type-path {
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  border-radius: 20px;
  margin: 0;
  padding: 30px;
}

.ab-type-path figcaption {
  letter-spacing: .13em;
  color: var(--accent-2);
  font-size: 10px;
}

.ab-type-path ol {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}

.ab-type-path li {
  display: grid;
  grid-template-columns: 38px 1fr;
  position: relative;
  column-gap: 16px;
  padding-bottom: 24px;
}

.ab-type-path li:not(:last-child):after {
  content: "";
  position: absolute;
  background: var(--border-strong);
  width: 1px;
  top: 38px;
  bottom: 0;
  left: 18px;
}

.ab-type-path li:last-child {
  padding-bottom: 0;
}

.ab-type-path li > span {
  grid-row: span 2;
  display: grid;
  border: 1px solid var(--border-strong);
  color: var(--accent-2);
  border-radius: 12px;
  place-items:  center;
  width: 38px;
  height: 38px;
  font-size: 11px;
}

.ab-type-path strong {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.ab-type-path small {
  color: var(--text-muted);
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.6;
}

.ab-type-path > p {
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  margin: 0;
  padding-top: 20px;
  font-size: 12px;
  line-height: 1.7;
}

.ab-invitation {
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  padding-block-start: 56px;
  padding-block-end: 72px;
}

.ab-invitation header > p:not(.mp-kicker) {
  max-width: 480px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

@media (max-width: 960px) {
  .ab-opening {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .ab-foundation {
    padding: 22px;
  }

  .ab-foundation ul {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ab-foundation li {
    display: flex;
    align-items:  center;
    gap: 12px;
    padding: 12px;
  }

  .ab-foundation li > svg {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .ab-foundation h2 {
    font-size: 26px;
  }

  .ab-story, .ab-quality {
    gap: 32px;
    padding-block-start: 44px;
    padding-block-end: 44px;
  }

  .ab-ecosystem .mp-feature-grid {
    grid-template-columns: 1fr;
  }

  .ab-ecosystem .mp-feature {
    padding: 24px;
  }

  .ab-type-path {
    padding: 22px;
  }
}

@media (max-width: 600px) {
  .ab-opening, .ab-story, .ab-quality {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ab-opening {
    padding-block-start: 20px;
    padding-block-end: 36px;
  }

  .ab-opening-copy > p:not(.mp-kicker), .ab-story-copy p, .ab-quality-copy > p:not(.mp-kicker) {
    font-size: 14px;
  }

  .ab-story, .ab-quality {
    padding-block-start: 36px;
    padding-block-end: 36px;
  }

  .ab-story h2 {
    margin-bottom: 0;
  }

  .ab-ecosystem {
    padding-block-start: 28px;
    padding-block-end: 40px;
  }

  .ab-invitation {
    padding-block-start: 36px;
    padding-block-end: 48px;
  }
}

.lp-signin {
  position: relative;
}

.lp-signin > button {
  display: flex;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 8px;
  align-items:  center;
  gap: 6px;
}

.lp-signin > button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

.lp-signin-panel {
  position: absolute;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-strong);
  background: var(--bg-base);
  color: var(--text-primary);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: top right;
  border-radius: 20px;
  width: 350px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 100px);
  padding: 26px;
  transition: opacity .22s, transform .22s cubic-bezier(.22,1,.36,1), visibility 0s linear .22s;
  top: calc(100% + 16px);
  right: 0;
  transform: translateY(-8px)scale(.98);
  box-shadow: 0 24px 70px -20px #0006;
}

.lp-signin-panel .auth-form, .lp-signin-panel .field, .lp-signin-panel .oauth-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-signin-panel .field {
  gap: 8px;
}

.lp-signin-panel .field-label {
  display: flex;
  color: var(--text-secondary);
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
}

.lp-signin-panel .field-link, .lp-signin-panel footer a {
  color: var(--accent-2);
}

.lp-signin-panel .input {
  border: 1px solid var(--border-strong);
  background: var(--bg-glass);
  color: var(--text-primary);
  border-radius: 9px;
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  font-size: 14px;
}

.lp-signin-panel .input:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.lp-signin-panel .btn {
  background: var(--brand-grad);
  color: #000;
  min-height: 44px;
  margin-top: 4px;
}

.lp-signin-panel .form-error {
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.6;
}

.lp-signin-panel .auth-divider {
  display: flex;
  color: var(--text-muted);
  align-items:  center;
  gap: 12px;
  margin: 18px 0;
  font-size: 11px;
}

.lp-signin-panel .auth-divider:before, .lp-signin-panel .auth-divider:after {
  content: "";
  background: var(--border-subtle);
  flex: 1;
  height: 1px;
}

.lp-signin-panel .oauth-stack {
  gap: 8px;
}

.lp-signin-panel .oauth-btn {
  display: flex;
  border: 1px solid var(--border-strong);
  background: var(--bg-glass);
  color: var(--text-primary);
  border-radius: 9px;
  justify-content: center;
  align-items:  center;
  gap: 10px;
  min-height: 42px;
  transition: background .16s;
  font-size: 12px;
}

.lp-signin-panel .oauth-btn:hover {
  background: var(--bg-elev-band);
}

.lp-signin-panel .oauth-icon, .lp-signin-panel .oauth-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.lp-signin-panel footer {
  text-align: center;
  color: var(--text-muted);
  margin-top: 20px;
  font-size: 12px;
}

.lp-signin[data-open="true"] .lp-signin-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
  transform: translateY(0)scale(1);
}

@media (max-width: 640px) {
  .lp-signin {
    position: static;
  }

  .lp-signin > button {
    margin: 0;
    padding: 8px;
    font-size: 12px;
  }

  .lp-signin-panel {
    top: calc(100% + 8px);
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-signin-panel {
    transition: none;
  }
}

@media (max-width: 400px) {
  .lp-topbar {
    gap: 6px;
    padding-inline-start: 10px;
    padding-inline-end: 10px;
  }

  .lp-topbar .lp-nav {
    gap: 3px;
  }

  .lp-topbar .lp-lens-btn {
    padding-inline-start: 6px;
    padding-inline-end: 6px;
    font-size: 12px;
  }

  .lp-signin > button {
    padding-inline-start: 4px;
    padding-inline-end: 4px;
  }
}

.lp-topbar .lp-nav-cta, .lp-signin > button {
  box-sizing: border-box;
  color: var(--on-brand);
  border-radius: 999px;
  width: 112px;
  min-width: 112px;
  height: 36px;
  margin: 0;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

@media (max-width: 640px) {
  .lp-signin > button {
    width: auto;
    min-width: 0;
    padding-inline-start: 12px;
    padding-inline-end: 12px;
    font-size: 12px;
  }
}

.lp-signin > button {
  color: var(--text-primary);
  background: var(--bg-glass);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}

.lp-signin > button:hover, .lp-signin[data-open="true"] > button {
  background: var(--bg-elev-band);
}

.lp-hero-voice {
  display: grid;
}

.lp-hero-voice .lp-voice, .lp-root[data-lens="code"] .lp-hero-voice .lp-voice {
  position: static;
  grid-area: 1 / 1;
  align-self:  start;
}

.lp-hero-voice .lp-voice-code {
  font-size: .9em;
  line-height: 1.28;
}

.lp-hero-promises {
  display: grid;
}

.lp-root .lp-hero-promises .lp-hero-promise {
  grid-area: 1 / 1;
  margin: 0;
  transition: opacity .24s;
  display: block !important;
}

.lp-hero-promises .lp-hero-promise[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
}

.lp-hero-cards .lp-card[aria-hidden="true"] {
  position: static;
}

.lp-card-terminal {
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: none;
  border: 0;
  gap: 20px;
  padding: 8px 0;
}

.lp-hero-cards .lp-composer {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lp-hero-cards .lp-composer-footer {
  margin-top: auto;
}

.lp-code-composer .lp-terminal {
  background: none;
  border: 0;
  border-radius: 0;
  gap: 10px;
  height: 88px;
  padding: 0 24px;
  font-size: clamp(11px, 2.7cqw, 15px);
}

.lp-code-composer .lp-terminal-prompt {
  color: var(--accent-2);
}

.lp-code-composer .lp-terminal-cmd {
  white-space: normal;
  overflow: visible;
  color: var(--text-primary);
  letter-spacing: -.025em;
  line-height: 1.6;
}

.lp-code-composer .lp-terminal-copy {
  display: grid;
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 9px;
  place-items:  center;
  width: 32px;
  height: 32px;
  padding: 0;
}

.lp-terminal-copy:hover {
  color: var(--accent-2);
  border-color: var(--border-strong);
}

.lp-terminal-copy:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

.lp-terminal-status {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  padding: 0;
}

.lp-code-composer .lp-start:after {
  animation: none;
}

@media (max-width: 640px) {
  .lp-code-composer .lp-terminal {
    gap: 8px;
    padding-inline-start: 18px;
    padding-inline-end: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-root .lp-hero-promises .lp-hero-promise {
    transition: none;
  }
}

.lp-code-composer .lp-terminal {
  flex-shrink: 0;
  height: 58px;
}

.lp-terminal-chrome {
  position: relative;
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
  color: var(--text-muted);
  letter-spacing: .02em;
  border-radius: 23px 23px 0 0;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  height: 30px;
  font-size: 10px;
  font-weight: 500;
}

.lp-terminal-lights {
  position: absolute;
  background: #ff6058;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  left: 20px;
  box-shadow: 14px 0 #febc2e, 28px 0 #28c840;
}

.lp-terminal-executable {
  color: #86d9b0;
}

.lp-terminal-package {
  color: #9fc7ff;
}

.lp-root[data-theme="light"] .lp-terminal-executable {
  color: #176a4b;
}

.lp-root[data-theme="light"] .lp-terminal-package {
  color: #245bb1;
}

.lp-card-prompt .lp-composer-footer {
  grid-template-columns: minmax(0, 1fr) 152px;
}

@container (width <= 500px) {
  .lp-card-prompt .lp-composer-footer {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 360px) {
  .lp-topbar .lp-lens-btn {
    padding-inline-start: 3px;
    padding-inline-end: 3px;
  }

  .lp-topbar .lp-signin > button {
    padding-inline-start: 4px;
    padding-inline-end: 4px;
  }
}