.egt-root {
  --egt-ink: #17171b;
  --egt-muted: #6b6972;
  --egt-line: rgba(23, 23, 27, 0.1);
  --egt-surface: #fff;
  --egt-canvas: #f4f1ed;
  --egt-hero-title-size: clamp(48px, 7vw, 88px);
  --egt-section-title-size: clamp(32px, 4.4vw, 52px);
  --egt-guide-title-size: clamp(32px, 4vw, 48px);
  position: relative;
  isolation: isolate;
  width: 100%;
  color: var(--egt-ink);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.egt-root,
.egt-root *,
.egt-root *::before,
.egt-root *::after {
  box-sizing: border-box;
}

.egt-root button,
.egt-root input,
.egt-root select {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.egt-root button,
.egt-root select {
  color: inherit;
}

.egt-root button,
.egt-root a,
.egt-root input,
.egt-root select {
  outline: none;
}

.egt-root :focus-visible {
  outline: 3px solid var(--egt-focus, #6f5cff);
  outline-offset: 3px;
}

.egt-shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.egt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  .egt-root {
    --egt-hero-title-size: clamp(35px, 10.8vw, 48px);
    --egt-section-title-size: 30px;
    --egt-guide-title-size: 31px;
  }

  .egt-shell {
    width: min(100% - 24px, 1180px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .egt-root *,
  .egt-root *::before,
  .egt-root *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.egm-root {
  --egm-ink: #17171b;
  --egm-muted: #6b6972;
  --egm-line: rgba(23, 23, 27, 0.1);
  --egm-surface: #fff;
  --egm-canvas: #f4f1ed;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--egm-accent) 9%, transparent), transparent 28%),
    var(--egm-canvas);
}

.egm-shell {
  padding: 112px 0 92px;
}

.egm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: end;
  gap: 46px;
  margin-bottom: 46px;
}

.egm-kicker,
.egm-step,
.egm-label {
  margin: 0;
  color: var(--egm-muted);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.egm-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 23px;
}

.egm-kicker::before {
  width: 11px;
  height: 11px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--egm-accent);
  box-shadow: 0 0 0 1px var(--egm-line);
  content: "";
}

.egm-title {
  max-width: 920px;
  margin: 0;
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 780;
  letter-spacing: -0.07em;
  line-height: 0.91;
}

.egm-title span {
  color: var(--egm-accent);
}

.egm-title span::after {
  display: block;
  width: min(340px, 72%);
  height: 7px;
  margin: 11px 0 0 0.06em;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5c8a, #705cff, #33d6b2);
  content: "";
}

.egm-lead {
  max-width: 720px;
  margin: 25px 0 0;
  color: var(--egm-muted);
  font-size: 19px;
  line-height: 1.55;
}

.egm-orbit {
  width: 188px;
  aspect-ratio: 1;
  margin-left: auto;
  border: 1px solid var(--egm-line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 25%, #ff5c8a, transparent 42%),
    radial-gradient(circle at 78% 28%, #705cff, transparent 44%),
    radial-gradient(circle at 55% 82%, #33d6b2, transparent 45%),
    #f4e8ff;
  box-shadow: 0 24px 52px rgba(38, 36, 31, 0.12);
}

.egm-studio {
  display: grid;
  grid-template-columns: minmax(350px, 0.78fr) minmax(470px, 1.22fr);
  overflow: hidden;
  border: 1px solid rgba(23, 23, 27, 0.08);
  border-radius: 32px;
  background: var(--egm-surface);
  box-shadow: 0 28px 80px rgba(38, 36, 31, 0.12);
}

.egm-panel {
  min-width: 0;
  padding: 40px;
}

.egm-result-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--egm-line);
  background: #fbfaf8;
}

.egm-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.egm-panel-head h2 {
  margin: 9px 0 0;
  font-size: 27px;
  font-weight: 760;
  letter-spacing: -0.05em;
  line-height: 1.05;
}

.egm-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--egm-line);
  border-radius: 999px;
  color: var(--egm-muted);
  background: #fff;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.egm-live::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42c98c;
  box-shadow: 0 0 0 5px rgba(66, 201, 140, 0.14);
  content: "";
}

.egm-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.egm-preset {
  min-height: 54px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 13px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(23, 23, 27, 0.08);
}

.egm-preset[aria-pressed="true"] {
  border-color: var(--egm-ink);
}

.egm-card {
  padding: 17px;
  border: 1px solid var(--egm-line);
  border-radius: 19px;
  background: #fff;
}

.egm-card + .egm-card {
  margin-top: 11px;
}

.egm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.egm-card-head strong {
  font-size: 15px;
  letter-spacing: -0.02em;
}

.egm-card-head span {
  color: var(--egm-muted);
  font-size: 11px;
}

.egm-color-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.egm-base-row {
  grid-template-columns: 58px minmax(0, 1fr);
}

.egm-color-chip {
  position: relative;
  display: block;
  width: 58px;
  height: 52px;
  overflow: hidden;
  border: 1px solid var(--egm-line);
  border-radius: 13px;
}

.egm-color-chip input {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  padding: 0;
  border: 0;
  cursor: pointer;
  opacity: 0;
}

.egm-hex {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--egm-line);
  border-radius: 13px;
  outline: 0;
  background: #f8f7f5;
  font-size: 14px;
  font-weight: 740;
  text-transform: uppercase;
}

.egm-hex:focus {
  border-color: var(--egm-ink);
  box-shadow: 0 0 0 3px rgba(23, 23, 27, 0.08);
}

.egm-icon-button {
  display: grid;
  width: 52px;
  height: 52px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--egm-line);
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  font-size: 20px;
}

.egm-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.egm-point-list {
  display: flex;
  gap: 8px;
  margin-top: 13px;
  overflow-x: auto;
  padding: 3px;
}

.egm-swatch {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--egm-line);
}

.egm-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--egm-ink);
}

.egm-settings {
  display: grid;
  gap: 15px;
}

.egm-range-field > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--egm-muted);
  font-size: 11px;
}

.egm-range-field input {
  width: 100%;
  height: 6px;
  margin: 0;
  appearance: none;
  border-radius: 999px;
  outline: 0;
  background: #e7e3df;
  cursor: pointer;
}

.egm-range-field input::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  appearance: none;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--egm-ink);
  box-shadow: 0 2px 8px rgba(23, 23, 27, 0.25);
}

.egm-actions,
.egm-output-actions {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}

.egm-actions {
  grid-template-columns: 1fr 1fr;
}

.egm-output-actions {
  grid-template-columns: 1.1fr 1fr 1fr;
}

.egm-actions button,
.egm-output-actions button {
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--egm-line);
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.egm-actions .egm-primary,
.egm-output-actions .egm-primary {
  border-color: var(--egm-ink);
  color: #fff;
  background: var(--egm-ink);
}

.egm-preview-stage-mobile {
  display: none;
}

.egm-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.egm-ratios {
  display: flex;
  gap: 6px;
}

.egm-ratio {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--egm-line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 9px;
  font-weight: 760;
  text-transform: uppercase;
}

.egm-ratio[aria-pressed="true"] {
  border-color: var(--egm-ink);
  color: #fff;
  background: var(--egm-ink);
}

.egm-preview {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1.38;
  border: 7px solid #fff;
  border-radius: 25px;
  box-shadow: 0 0 0 1px var(--egm-line), 0 22px 55px rgba(34, 31, 29, 0.13);
  touch-action: none;
}

.egm-preview[data-ratio="square"] {
  aspect-ratio: 1;
}

.egm-preview[data-ratio="story"] {
  width: min(100%, 360px);
  margin-inline: auto;
  aspect-ratio: 9 / 16;
}

.egm-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 180 180%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27 opacity=%27.32%27/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.egm-handle {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 5px solid #fff;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 6px 18px rgba(23, 23, 27, 0.24);
  font-size: 9px;
  font-weight: 800;
  touch-action: none;
}

.egm-handle[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--egm-ink), 0 7px 22px rgba(23, 23, 27, 0.25);
}

.egm-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 15px;
  border-radius: 16px;
  color: #fff;
  background: #18171b;
}

.egm-code code {
  overflow: hidden;
  font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.egm-code button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  font-size: 8px;
  font-weight: 780;
  text-transform: uppercase;
}

.egm-section {
  margin-top: 86px;
}

.egm-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 25px;
}

.egm-section-head h2,
.egm-guide h2 {
  margin: 10px 0 0;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 780;
  letter-spacing: -0.065em;
  line-height: 0.96;
}

.egm-section-head > p {
  max-width: 430px;
  margin: 0;
  color: var(--egm-muted);
  font-size: 15px;
  line-height: 1.55;
}

.egm-use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.egm-use-card {
  position: relative;
  min-height: 305px;
  overflow: hidden;
  border: 1px solid var(--egm-line);
  border-radius: 24px;
  background: #fff;
}

.egm-mesh-fill {
  position: absolute;
  inset: 0 0 54px;
  background-color: var(--egm-base);
  background-image: var(--egm-mesh);
}

.egm-use-card footer {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 18px;
  background: #fff;
}

.egm-use-card footer b { font-size: 12px; }
.egm-use-card footer span { color: var(--egm-muted); font-size: 10px; }

.egm-poster > strong {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 25px;
  max-width: 80%;
  color: var(--egm-accent-text);
  font-size: 34px;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.egm-app-window,
.egm-browser {
  position: absolute;
  z-index: 2;
  inset: 32px 27px 81px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 16px;
  background: rgba(255,255,255,.38);
  box-shadow: 0 18px 40px rgba(23,23,27,.12);
  backdrop-filter: blur(14px);
}

.egm-app-window > i,
.egm-browser > div i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 12px 0 0 7px;
  border-radius: 50%;
  background: rgba(23,23,27,.32);
}

.egm-app-window > i:first-child { margin-left: 13px; }
.egm-app-window > div { display: grid; height: calc(100% - 30px); place-items: center; }
.egm-app-window span { padding: 11px 16px; border-radius: 999px; color: #fff; background: #17171b; font-size: 10px; font-weight: 750; }

.egm-glass-card,
.egm-slide-copy,
.egm-story-copy {
  position: absolute;
  z-index: 2;
  right: 25px;
  bottom: 81px;
  left: 25px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 18px;
  color: var(--egm-accent-text);
  background: rgba(255,255,255,.24);
  backdrop-filter: blur(14px);
}

.egm-glass-card small,
.egm-slide-copy small { display: block; margin-bottom: 22px; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.egm-glass-card strong,
.egm-slide-copy strong { display: block; max-width: 240px; font-size: 22px; letter-spacing: -.045em; line-height: 1.02; }

.egm-browser > div { height: 30px; border-bottom: 1px solid rgba(23,23,27,.08); }
.egm-browser > div i:first-child { margin-left: 12px; }
.egm-browser > strong { display: block; max-width: 220px; margin: 40px 20px 22px; font-size: 23px; letter-spacing: -.05em; line-height: 1; }
.egm-browser > span { margin-left: 20px; padding: 9px 13px; border-radius: 9px; color: #fff; background: #17171b; font-size: 9px; font-weight: 750; }

.egm-slide-copy { top: 26px; bottom: auto; background: rgba(255,255,255,.72); }
.egm-story { grid-column: span 1; }
.egm-story-copy { top: 25px; bottom: 80px; display: flex; flex-direction: column; justify-content: space-between; }
.egm-story-copy strong { font-size: 29px; letter-spacing: -.055em; line-height: .95; }
.egm-story-copy span { align-self: start; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: 10px; font-weight: 730; }

.egm-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.egm-tool-card {
  overflow: hidden;
  border: 1px solid var(--egm-line);
  border-radius: 24px;
  color: inherit;
  background: #fff;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.egm-tool-card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(23,23,27,.09); }
.egm-tool-card > div:last-child { padding: 20px; }
.egm-tool-card strong { font-size: 17px; letter-spacing: -.035em; }
.egm-tool-card p { margin: 7px 0 0; color: var(--egm-muted); font-size: 12px; line-height: 1.5; }

.egm-tool-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  background: #f5f2ef;
}

.egm-tool-palette i { width: 64px; height: 88px; margin: -4px; border: 7px solid #fff; border-radius: 18px; transform: rotate(-8deg); background: var(--egm-accent); box-shadow: 0 12px 30px rgba(23,23,27,.12); }
.egm-tool-palette i:nth-child(2) { transform: rotate(4deg); background: var(--egm-base); }
.egm-tool-palette i:nth-child(3) { transform: rotate(13deg); background: #17171b; }
.egm-tool-invert i { width: 88px; height: 88px; border: 8px solid #fff; border-radius: 50%; background: var(--egm-accent); box-shadow: 0 10px 26px rgba(23,23,27,.12); }
.egm-tool-invert i + i { margin-left: -24px; filter: invert(1); }
.egm-tool-hex i { width: 92px; height: 92px; border: 8px solid #fff; border-radius: 24px; transform: rotate(-8deg); background: var(--egm-accent); box-shadow: 0 12px 30px rgba(23,23,27,.12); }
.egm-tool-hex i + i { position: absolute; transform: translate(32px, 14px) rotate(7deg); background: var(--egm-base); }

.egm-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 42px;
  border: 1px solid var(--egm-line);
  border-radius: 28px;
  background: #fff;
}

.egm-guide h3 { margin: 2px 0 22px; font-size: 27px; letter-spacing: -.045em; }
.egm-guide p,
.egm-guide li { color: var(--egm-muted); font-size: 14px; line-height: 1.68; }
.egm-guide p { margin: 16px 0 0; }
.egm-guide ol { margin: 0; padding-left: 20px; }
.egm-guide li + li { margin-top: 13px; }
.egm-guide strong { color: var(--egm-ink); }
.egm-guide a { color: #1769e0; text-underline-offset: 3px; }

.egm-toast {
  position: fixed;
  z-index: 9999;
  right: 22px;
  bottom: 22px;
  transform: translateY(16px);
  padding: 12px 16px;
  border-radius: 999px;
  color: #fff;
  background: #17171b;
  box-shadow: 0 12px 32px rgba(23, 23, 27, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: 160ms ease;
  font-size: 12px;
  font-weight: 750;
}

.egm-toast[data-visible="true"] {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 900px) {
  .egm-shell {
    width: min(100% - 28px, 760px);
    padding: 76px 0;
  }

  .egm-hero {
    grid-template-columns: 1fr;
  }

  .egm-orbit {
    display: none;
  }

  .egm-studio {
    grid-template-columns: 1fr;
  }

  .egm-result-panel {
    border-top: 1px solid var(--egm-line);
    border-left: 0;
  }

  .egm-use-grid,
  .egm-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .egm-guide { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 560px) {
  .egm-shell {
    width: min(100% - 20px, 520px);
    padding: 48px 0 58px;
  }

  .egm-hero {
    margin-bottom: 28px;
  }

  .egm-kicker {
    margin-bottom: 16px;
    font-size: 9px;
  }

  .egm-title {
    font-size: clamp(34px, 11vw, 46px);
    line-height: 0.94;
  }

  .egm-title span::after {
    height: 5px;
    margin-top: 8px;
  }

  .egm-lead {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.48;
  }

  .egm-studio {
    border-radius: 24px;
  }

  .egm-panel {
    padding: 22px 18px;
  }

  .egm-result-panel {
    padding-top: 24px;
  }

  .egm-panel-head {
    margin-bottom: 15px;
  }

  .egm-panel-head h2 {
    font-size: 22px;
  }

  .egm-live {
    padding: 8px 10px;
    font-size: 8px;
  }

  .egm-presets {
    margin-bottom: 14px;
  }

  .egm-preset {
    min-height: 42px;
    border-radius: 11px;
  }

  .egm-preview-stage-mobile {
    display: block;
    margin-bottom: 14px;
  }

  .egm-preview-stage-desktop {
    display: none;
  }

  .egm-preview-stage-mobile .egm-preview {
    max-height: 360px;
    border-width: 5px;
    border-radius: 19px;
  }

  .egm-preview-stage-mobile .egm-preview[data-ratio="story"] {
    width: min(62%, 220px);
    max-height: none;
  }

  .egm-label {
    font-size: 8px;
  }

  .egm-ratio {
    min-height: 29px;
    padding: 0 8px;
    font-size: 7px;
  }

  .egm-card {
    padding: 14px;
    border-radius: 16px;
  }

  .egm-color-row {
    grid-template-columns: 49px minmax(0, 1fr) auto;
  }

  .egm-base-row {
    grid-template-columns: 49px minmax(0, 1fr);
  }

  .egm-color-chip,
  .egm-icon-button {
    width: 49px;
    height: 47px;
  }

  .egm-hex {
    height: 47px;
    font-size: 13px;
  }

  .egm-swatch {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .egm-actions button,
  .egm-output-actions button {
    min-height: 44px;
    padding: 0 9px;
    font-size: 8px;
  }

  .egm-output-actions {
    grid-template-columns: 1fr 1fr;
  }

  .egm-output-actions button:first-child {
    grid-column: 1 / -1;
  }

  .egm-result-panel .egm-panel-head {
    margin-bottom: 0;
  }

  .egm-code {
    padding: 12px;
  }

  .egm-section { margin-top: 54px; }

  .egm-section-head { display: block; margin-bottom: 18px; }
  .egm-section-head h2,
  .egm-guide h2 { font-size: 32px; }
  .egm-section-head > p { margin-top: 13px; font-size: 13px; }

  .egm-use-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .egm-use-card { min-height: 225px; border-radius: 18px; }
  .egm-mesh-fill { bottom: 48px; }
  .egm-use-card footer { height: 48px; padding: 0 11px; }
  .egm-use-card footer b { font-size: 10px; }
  .egm-use-card footer span { font-size: 8px; }
  .egm-poster > strong { top: 21px; left: 17px; font-size: 24px; }
  .egm-app-window,
  .egm-browser { inset: 22px 16px 66px; }
  .egm-glass-card,
  .egm-slide-copy,
  .egm-story-copy { right: 15px; bottom: 65px; left: 15px; padding: 14px; }
  .egm-glass-card strong,
  .egm-slide-copy strong { font-size: 16px; }
  .egm-glass-card small,
  .egm-slide-copy small { margin-bottom: 13px; font-size: 7px; }
  .egm-browser > strong { margin: 25px 12px 15px; font-size: 16px; }
  .egm-browser > span { margin-left: 12px; padding: 7px 9px; font-size: 7px; }
  .egm-story-copy { top: 16px; }
  .egm-story-copy strong { font-size: 21px; }

  .egm-tool-grid { grid-template-columns: 1fr; }
  .egm-tool-card { display: grid; grid-template-columns: 116px 1fr; border-radius: 18px; }
  .egm-tool-art { height: 116px; }
  .egm-tool-card > div:last-child { padding: 16px; }
  .egm-tool-palette i { width: 35px; height: 55px; border-width: 4px; border-radius: 10px; }
  .egm-tool-invert i { width: 56px; height: 56px; border-width: 5px; }
  .egm-tool-hex i { width: 58px; height: 58px; border-width: 5px; border-radius: 15px; }

  .egm-guide { gap: 26px; padding: 24px 20px; border-radius: 22px; }
  .egm-guide h3 { font-size: 23px; }
  .egm-guide p,
  .egm-guide li { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .egm-root *,
  .egm-root *::before,
  .egm-root *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.mesh-root {overflow:visible;--mesh-border:#e4e4e7;--mesh-ink:#18181b;--mesh-muted:#71717a}
.mesh-root *, .mesh-root *::before,.mesh-root *::after{box-sizing:border-box}
.mesh-root .egm-shell{padding-top:112px;max-width:1400px;width:calc(100% - 80px)}
.mesh-root button,.mesh-root input,.mesh-root select{font-family:inherit}
.mesh-root button{cursor:pointer}
.mesh-root button:disabled{cursor:not-allowed;opacity:.45}
.mesh-root :focus-visible{outline:2px solid #715bde;outline-offset:3px}
.mesh-root .egm-title{font-size:clamp(42px,6.2vw,80px)}
.mesh-workspace{display:grid;grid-template-columns:minmax(320px,360px) minmax(0,1fr);background:#fff;border:1px solid var(--mesh-border);border-radius:28px;box-shadow:0 20px 65px #25201b0c}
.mesh-controls,.mesh-result{min-width:0;padding:30px}
.mesh-controls{border-right:1px solid var(--mesh-border)}
.mesh-result{display:flex;flex-direction:column;justify-content:center;background:#fcfbf9;border-radius:0 28px 28px 0}
.mesh-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.mesh-panel-head h2{margin:7px 0 0;font-size:23px;font-weight:700;letter-spacing:-.045em;line-height:1.15}
.mesh-live{color:#237c58;background:#edf9f2;border:1px solid #d3ebdd;border-radius:20px;padding:6px 10px;font-size:12px;white-space:nowrap}
.mesh-presets{display:flex;gap:8px;margin-bottom:20px;align-items:center}
.mesh-presets>button:not(.mesh-icon){height:46px;flex:1;min-width:0;background-size:100% 100%;border:3px solid white;box-shadow:0 0 0 1px var(--mesh-border);border-radius:10px}
.mesh-editor-fields{margin:0;padding:0;border:0;min-width:0}
.mesh-card{border:1px solid var(--mesh-border);border-radius:14px;padding:15px;margin-bottom:14px;background:white}
.mesh-card-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:13px}
.mesh-card-heading small{color:var(--mesh-muted);font-size:11px}
.mesh-color-field{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:start}
.mesh-color-chip{width:42px;height:42px;border:3px solid #fff;border-radius:9px;box-shadow:0 0 0 1px var(--mesh-border)}
.mesh-root .mesh-input{display:block;width:100%;height:42px;padding:8px 12px;border:1px solid #d4d4d8;border-radius:9px;background:#fff;color:var(--mesh-ink);font-size:14px;line-height:1.4;box-shadow:0 1px 2px #18181b05}
.mesh-color-field input{font-family:ui-monospace,monospace}
.mesh-input[aria-invalid=true]{border-color:#be123c}
.mesh-color-field small{display:block;margin-top:5px;color:#be123c;font-size:12px}
.mesh-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:14px}
.mesh-swatches>button:not(.mesh-icon){position:relative;width:28px;height:28px;border-radius:50%;border:3px solid white;box-shadow:0 0 0 1px #18181b22}
.mesh-swatches>button[aria-pressed=true]{box-shadow:0 0 0 2px #18181b}
.mesh-swatches>button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mesh-swatches>button>i{position:absolute;right:-3px;bottom:-3px;width:8px;height:8px;background:#18181b;border:2px solid #fff;border-radius:50%}
.mesh-point-actions{display:flex;gap:6px;align-items:center;border-top:1px solid #f0f0f2;margin-top:12px;padding-top:10px}
.mesh-root .mesh-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;width:34px;height:34px;border:1px solid var(--mesh-border);border-radius:9px;background:#fff;color:#52525b;padding:0}
.mesh-root .mesh-icon[aria-pressed=true]{background:#18181b;color:#fff;border-color:#18181b}
.mesh-root svg{display:inline-block;flex-shrink:0;vertical-align:middle}
.mesh-text-button{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:6px;background:none;border:0;font-size:12px;color:#52525b}
.mesh-text-button small,.mesh-button small{font-size:10px;color:#8a6620}
.mesh-slider-field{margin:0 0 18px}
.mesh-slider-field:last-child{margin-bottom:0}
.mesh-slider-field>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:8px}
.mesh-slider-field output{font-size:11px;color:#71717a;font-variant-numeric:tabular-nums}
.mesh-slider{position:relative;display:flex;align-items:center;width:100%;height:18px;touch-action:none;user-select:none}
.mesh-track{position:relative;flex-grow:1;height:4px;background:#e4e4e7;border-radius:99px;overflow:hidden}
.mesh-range{position:absolute;background:#27272a;height:100%}
.mesh-thumb{display:block;width:15px;height:15px;border:2px solid #fff;background:#27272a;box-shadow:0 0 0 1px #d4d4d8,0 2px 5px #0002;border-radius:50%}
.mesh-root .mesh-primary,.mesh-root .mesh-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid var(--mesh-border);border-radius:9px;background:#fff;color:#18181b;font-size:13px;font-weight:600;line-height:1.3;text-decoration:none;white-space:nowrap}
.mesh-root .mesh-primary{background:#18181b;color:#fff;border-color:#18181b}
.mesh-primary:hover{background:#303034}
.mesh-root .mesh-primary svg,.mesh-root .mesh-button svg{position:static;margin:0}
.mesh-editor-toolbar{display:flex;align-items:center;gap:6px}
.mesh-editor-toolbar .mesh-primary{flex:1;min-width:0;font-size:12px;padding:8px}
.mesh-preview-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.mesh-preview-toolbar>span{font-size:12px;color:#71717a;margin-right:auto}
.mesh-toggle-group{display:inline-flex;gap:2px;background:#f0efec;padding:3px;border-radius:9px;border:1px solid #e4e4e7}
.mesh-toggle-group button{border:0;border-radius:6px;background:none;padding:6px 9px;font-size:11px;color:#71717a;text-transform:capitalize}
.mesh-toggle-group button[aria-pressed=true]{color:white;background:#18181b}
.mesh-stage-wrap{display:flex;justify-content:center;min-height:300px;align-items:center;width:100%;background:#f3f1ed;border:1px solid #e7e4df;border-radius:20px;padding:7px}
.mesh-stage{position:relative;width:100%;background-size:100% 100%;border-radius:14px;touch-action:none;box-shadow:0 0 0 1px #00000008}
.mesh-stage[data-ratio=story]{max-width:310px}
.mesh-stage[data-ratio=square]{max-width:560px}
.mesh-handle{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border:3px solid #fff;border-radius:50%;padding:0;box-shadow:0 2px 6px #0004;touch-action:none}
.mesh-handle[aria-pressed=true]{outline:2px solid #18181b;outline-offset:2px}
.mesh-handle span{display:flex;align-items:center;justify-content:center;margin:auto;border-radius:50%;width:17px;height:17px;color:#18181b;background:white;font-size:10px;font-weight:700}
.mesh-handle svg{width:12px;height:12px}
.mesh-result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.mesh-result-actions>.mesh-primary{flex:1}
.mesh-code{margin-top:16px;font-size:12px;color:#71717a}
.mesh-code summary{cursor:pointer}
.mesh-code pre{max-width:100%;max-height:120px;overflow:auto;font-size:10px;padding:14px;background:#18181b;color:#e4e4e7;border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere}
.mesh-help{margin:12px 0 0;color:#71717a;font-size:12px;line-height:1.5}
.mesh-notice,.mesh-error{padding:12px;border:1px solid #e7c991;border-radius:10px;background:#fff9ed;color:#744813;font-size:13px;line-height:1.5;margin-bottom:12px}
.mesh-notice button,.mesh-error button{display:block;border:0;background:none;text-decoration:underline;margin-top:7px;font:inherit}
.mesh-overlay{position:fixed;inset:0;background:#18181b70;backdrop-filter:blur(4px);z-index:2147483600}
.mesh-dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2147483601;width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;background:#fff;color:#18181b;border:1px solid #e4e4e7;border-radius:20px;padding:28px;box-shadow:0 24px 80px #0003;font-family:inherit}
.mesh-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.mesh-dialog h2{font-size:24px;line-height:1.2;letter-spacing:-.04em;margin:0}
.mesh-dialog>header p{font-size:14px;color:#71717a;margin:9px 0 0;line-height:1.5}
.mesh-dialog h3{font-size:30px;line-height:1.1;letter-spacing:-.04em}
.mesh-dialog label{font-size:13px;font-weight:500}
.mesh-dialog label>.mesh-input{margin-top:8px}
.mesh-dialog p{font-size:14px;line-height:1.6;color:#71717a}
.mesh-save-form{display:grid;gap:16px}
.mesh-check{display:flex;align-items:center;gap:9px;min-height:32px}
.mesh-check input{width:16px;height:16px;accent-color:#18181b}
.mesh-upgrade{padding:30px 16px;text-align:center}
.mesh-upgrade h3{margin:20px 0 14px}
.mesh-upgrade p{max-width:490px;margin:0 auto 24px}
.mesh-upgrade .mesh-primary{border-radius:999px;padding:14px 22px;font-size:15px;max-width:100%;white-space:normal}
.mesh-upgrade .mesh-primary>svg:first-child{color:#f6ad32}
.mesh-upgrade>small{display:block;margin-top:15px;color:#71717a;font-size:12px}
.mesh-badge{display:inline-block;background:#f5f5f5;border:1px solid #e4e4e7;border-radius:99px;font-size:10px;letter-spacing:.12em;padding:6px 10px}
.mesh-export-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.mesh-dimensions{display:grid;grid-template-columns:1fr 1fr;gap:12px;grid-column:1/-1}
.mesh-export-preview{width:100%;max-height:270px;border:1px solid #e4e4e7;border-radius:12px;background-size:100% 100%}
.mesh-export>.mesh-button{margin-left:10px}
.mesh-downloads{display:grid;gap:10px;margin-top:18px}
.mesh-advanced>.mesh-slider-field{margin:22px 0}
.mesh-advanced>.mesh-button{margin-left:8px}
.mesh-variant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mesh-variant-grid button{background:#fff;border:1px solid #e4e4e7;border-radius:12px;padding:5px;text-align:left}
.mesh-variant-grid i{display:block;aspect-ratio:1.3;background-size:100% 100%;border-radius:8px}
.mesh-variant-grid b{display:block;padding:10px 7px;font-size:12px}
.mesh-tooltip{padding:7px 10px;border-radius:6px;background:#18181b;color:#fff;fill:#18181b;font-size:11px;z-index:2147483603;max-width:220px}
.mesh-color-popover{width:230px;background:#fff;border:1px solid #e4e4e7;border-radius:12px;box-shadow:0 10px 40px #0002;padding:16px;z-index:2147483603}
.mesh-color-popover strong{display:block;font-size:14px;margin-bottom:12px}
.mesh-color-popover label{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.mesh-color-popover input{width:50px;height:38px;background:none;border:0}
.mesh-color-popover>div{display:flex;gap:5px;margin-top:15px}
.mesh-color-popover>div>button{width:23px;height:23px;border:1px solid #0002;border-radius:6px}
.mesh-toast{position:fixed;z-index:2147483605;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 18px;background:#18181b;color:#fff;border:1px solid #ffffff20;border-radius:12px;box-shadow:0 6px 24px #0002;font-size:13px;line-height:1.4}
.mesh-categories{display:flex;gap:6px;flex-wrap:wrap;margin:24px 0}
.mesh-categories button{border:1px solid transparent;background:transparent;border-radius:8px;padding:9px 13px;color:#71717a;font-size:13px}
.mesh-categories button[aria-pressed=true]{background:#fff;border-color:#e4e4e7;color:#18181b;box-shadow:0 1px 3px #00000008}
.mesh-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.mesh-example{overflow:hidden;border-radius:18px;border:1px solid #e4e4e7;background:#fff;min-width:0}
.mesh-example-scene{height:330px;overflow:hidden;position:relative;background:#f7f6f4;color:#18181b;font-family:inherit}
.mesh-example>footer{padding:20px;border-top:1px solid #e4e4e7}
.mesh-example>footer small{color:#71717a;letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.mesh-example>footer h3{font-size:16px;line-height:1.25;letter-spacing:-.025em;margin:7px 0}
.mesh-example>footer p{font-size:12px;color:#71717a;line-height:1.55;margin:0}
.mesh-example-grid>.egt-preview-pro{margin:0;min-height:450px;border-radius:18px;padding:25px}
.mesh-example-grid>.egt-preview-pro>strong{font-size:35px}
.mesh-example-grid>.egt-preview-pro>b{font-size:12px;padding:0 15px;gap:8px}
.mesh-pagination{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:24px;font-size:13px}
.mesh-pagination button{padding:8px 14px;border:1px solid #dedee2;border-radius:8px;background:white}
.mesh-example-scene small{font-size:9px;letter-spacing:.07em}
.mesh-example-scene h3{margin:0;font-weight:700;letter-spacing:-.05em;line-height:1.04}
.mesh-example-scene p{font-size:11px;line-height:1.5}
.mesh-root .mesh-example-scene button{font-family:inherit;font-size:10px;line-height:1.35}
.mesh-root .mesh-example-scene .mx-demo-button{color:#fff;font-size:10px}
.mesh-root .mesh-example-scene .mx-event .mx-demo-button{color:#18181b}
.mesh-root .mesh-example-scene .mx-track button{color:#fff}
.mesh-root .mesh-example-scene .mx-tabs button{font-size:8px}
.mesh-root .mesh-example-scene .mx-upload button{font-size:11px}
.mx-demo-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #18181b;background:#18181b;color:#fff;min-height:32px;font-size:10px;font-weight:600;padding:8px 13px;border-radius:7px}
.mx-hero{height:100%;padding:22px;background-image:var(--mesh-art);background-size:100% 100%;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.mx-hero:before{content:'';position:absolute;inset:0;background:#ffffff65;pointer-events:none}
.mx-hero>*{position:relative}
.mx-hero nav,.mx-studio header,.mx-portfolio header{display:flex;justify-content:space-between;font-size:10px}
.mx-hero h3{font-size:38px;margin-top:10px}
.mx-hero p{max-width:220px}
.mx-hero footer{font-size:8px;letter-spacing:.1em}
.mx-music{margin:25px auto;padding:15px;width:82%;height:280px;border:1px solid #e4e4e7;background:white;border-radius:14px;box-shadow:0 10px 30px #00000009}
.mx-album{height:169px;position:relative;background-image:var(--mesh-art);background-size:100% 100%;border-radius:9px;padding:14px;color:white}
.mx-album:after{content:'';position:absolute;inset:0;border-radius:9px;background:#0002}
.mx-album span{position:relative;z-index:1;display:block;font-size:26px;line-height:.95;font-weight:800;letter-spacing:-.07em;text-shadow:0 1px 8px #0005}
.mx-album small{position:absolute;bottom:14px;z-index:1;background:#18181bcc;padding:4px}
.mx-track{display:flex;align-items:center;justify-content:space-between;margin:12px 0}
.mx-track b{font-size:11px;display:block}.mx-track small{display:block;margin-top:3px;color:#71717a;font-size:8px}
.mx-track button{width:30px;height:30px;background:#18181b;color:white;border:0;border-radius:50%}
.mx-progress{height:4px;border-radius:9px;overflow:hidden;background:#e4e4e7;margin:12px 0 8px}.mx-progress i{display:block;height:100%;background:#18181b;transition:width .2s}
.mx-right{float:right}
.mx-dashboard{margin:22px;background:white;border:1px solid #e4e4e7;border-radius:13px;padding:18px;min-height:282px;box-shadow:0 5px 20px #00000005}
.mx-dashboard header{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:20px;font-size:12px}
.mx-tabs{display:flex;background:#f4f4f5;border-radius:5px;padding:2px}.mx-tabs button{background:none;border:0;border-radius:4px;padding:4px 6px;font-size:8px}.mx-tabs button[aria-pressed=true]{background:white;box-shadow:0 1px 2px #0001}
.mx-dashboard h3{font-size:29px;margin:7px 0}.mx-dashboard h3 em{font-style:normal;font-size:9px;color:#237344;background:#eaf5ee;padding:4px 6px;border-radius:6px}
.mx-chart{height:95px;display:flex;align-items:flex-end;gap:8px;background-image:linear-gradient(#ffffff66,#ffffffdd),var(--mesh-art);background-size:100% 100%;padding:10px;border-radius:8px;margin:14px 0}
.mx-chart i{flex:1;background:#18181b;border-radius:3px 3px 0 0;opacity:.78}
.mx-dashboard footer,.mx-stats{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#71717a}.mx-dashboard footer b,.mx-stats b{display:block;color:#18181b;font-size:14px;margin:5px 0}
.mx-type{height:100%;position:relative;padding:20px;background:#f9f6ef;overflow:hidden}
.mx-type header{display:flex;justify-content:space-between;font-size:7px}.mx-type>strong{position:relative;z-index:1;display:block;font-size:65px;letter-spacing:-.09em;line-height:.88;margin-top:28px}
.mx-type-o{position:absolute;right:-12px;bottom:-40px;font-size:260px;font-weight:900;line-height:1;background-image:var(--mesh-art);background-size:100% 100%;background-clip:text;color:transparent}
.mx-type footer{position:absolute;bottom:20px;left:20px;font-size:15px;font-weight:700}.mx-type footer small{font-size:7px}
.mx-story{height:100%;background:#edeae6;display:flex;justify-content:center;padding:16px}.mx-phone{position:relative;width:175px;height:298px;padding:15px;border-radius:18px;border:5px solid #18181b;background-image:var(--mesh-art);background-size:100% 100%;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.mx-phone header{display:flex;justify-content:space-between;font-size:7px;background:#18181b;padding:5px;border-radius:4px}
.mx-phone>div{padding:12px;background:#fffffff2;color:#18181b;border-radius:9px}.mx-phone h3{font-size:28px;margin-top:10px}.mx-phone p{font-size:9px}.mx-phone footer{font-size:8px;text-align:center;background:#18181b;border-radius:10px;padding:3px}
.mx-studio{padding:24px;height:100%;background:#fff}.mx-studio h3{font-size:34px;margin:25px 0 18px}.mx-project{position:relative;height:120px;background-image:var(--mesh-art);background-size:100% 100%;padding:14px;border-radius:5px}.mx-project small,.mx-project b{display:table;background:#fffffff0;padding:4px;color:#18181b}.mx-project b{position:absolute;bottom:14px;font-size:16px}.mx-studio footer{margin-top:12px;font-size:9px;color:#71717a}
.mx-launch{height:100%;background:#f5f2ec;padding:24px;position:relative}.mx-orb{width:170px;height:170px;border-radius:50%;background-image:var(--mesh-art);background-size:100% 100%;box-shadow:inset -20px -20px 30px #0002,0 15px 30px #0001;position:absolute;right:-22px;top:72px}.mx-launch h3{position:relative;font-size:43px;margin:65px 0 25px;max-width:220px}.mx-launch button{position:relative}
.mx-event{padding:24px;background:#18181b;color:#fff;height:100%;position:relative}.mx-event:before{position:absolute;right:-60px;top:35px;content:'';width:240px;height:240px;background-image:var(--mesh-art);background-size:100% 100%;border-radius:50%;opacity:.65}.mx-event>*{position:relative}.mx-event header{font-size:9px}.mx-event h3{font-size:66px;margin:25px 0 12px;letter-spacing:-.075em}.mx-event p{max-width:220px;background:#18181bd9;padding:5px}.mx-event footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:9px}.mx-event button{background:white;color:#18181b}
.mx-portfolio{padding:24px;height:100%;background:#f7f5f1}.mx-portfolio header{font-size:8px}.mx-portfolio h3{font-size:39px;margin:25px 0}.mx-portfolio>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mx-portfolio article i{display:block;height:100px;background-image:var(--mesh-art);background-size:100% 100%;border-radius:4px}.mx-portfolio article:nth-child(2) i{border-radius:50%;transform:rotate(30deg);filter:saturate(.6)}.mx-portfolio article b,.mx-portfolio article small{display:block;margin-top:6px;font-size:9px}
.mx-centered{display:flex;align-items:center;justify-content:center;height:100%;background-image:linear-gradient(#ffffffaa,#ffffffcc),var(--mesh-art);background-size:100% 100%;padding:23px}
.mx-ui-card{width:100%;max-width:250px;border:1px solid #e4e4e7;background:#fff;border-radius:12px;text-align:center;padding:23px}.mx-ui-card h3{font-size:25px;margin:12px 0}.mx-ui-card p{color:#71717a}.mx-welcome-art{width:65px;height:65px;margin:0 auto 18px;border-radius:18px;background-image:var(--mesh-art);background-size:100% 100%;display:grid;place-items:center}.mx-welcome-art svg{width:32px;height:32px;stroke:#18181b;background:#ffffffdd;border-radius:50%;padding:4px}.mx-dots{display:flex;gap:5px;justify-content:center;margin-top:17px}.mx-dots i{width:5px;height:5px;border-radius:50%;background:#d4d4d8}.mx-dots .active{background:#18181b}
.mx-profile{padding:0 0 18px;overflow:hidden}.mx-cover{height:82px;background-image:var(--mesh-art);background-size:100% 100%}.mx-avatar{position:relative;margin:-22px auto 0;background:#18181b;color:white;border:4px solid #fff;border-radius:50%;width:50px;height:50px;display:grid;place-items:center;font-size:13px}.mx-profile h3{font-size:20px;margin:10px 0}.mx-profile .mx-stats{justify-content:center;margin:15px 0}
.mx-membership{height:100%;padding:50px 25px;background:#eeeae5}.mx-membership>div{height:198px;border-radius:14px;background-image:linear-gradient(#ffffff55,#ffffff55),var(--mesh-art);background-size:100% 100%;padding:20px;box-shadow:0 12px 35px #0002;color:#18181b}.mx-membership header{display:flex;justify-content:space-between;align-items:center;font-size:10px}.mx-membership h3{font-size:36px;margin:18px 0}.mx-membership footer{display:flex;justify-content:space-between;font-size:9px}.mx-membership footer small{font-size:6px}.mx-membership>p{text-align:center;font-size:10px;color:#71717a}
.mx-upload>svg{height:36px;width:36px;padding:8px;border:1px solid #e4e4e7;border-radius:9px}.mx-upload h3{font-size:22px}.mx-upload button{display:block;width:100%;border:1px dashed #a1a1aa;background:#fafafa;padding:25px 10px;margin:18px 0 10px;border-radius:8px;color:#52525b;font-size:11px}.mx-upload small{font-size:8px;color:#71717a}
.mx-summary{background-image:linear-gradient(#ffffffaa,#ffffffaa),var(--mesh-art);background-size:100% 100%;border-radius:8px;padding:18px;margin-bottom:16px}.mx-summary h3{font-size:24px}.mx-summary>b{font-size:35px}.mx-progress-board label{display:flex;align-items:center;gap:8px;font-size:10px;margin:12px 0}.mx-progress-board input{accent-color:#18181b;width:12px;height:12px}.mx-plan{padding:18px;background-image:linear-gradient(#ffffff99,#ffffff99),var(--mesh-art);background-size:100% 100%;border-radius:8px;margin-bottom:14px}.mx-plan h3{font-size:31px}.mx-plan p{font-size:17px;margin:6px 0}.mx-dashboard>.mx-demo-button{margin-top:12px}.mx-feed{display:flex;gap:9px;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f2;font-size:10px}.mx-feed i{font-style:normal;font-size:9px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#f4f4f5}.mx-feed small{display:block;margin-top:4px;color:#71717a;font-size:8px}
.mx-festival{height:100%;padding:22px;background-image:linear-gradient(#18181b88,#18181b88),var(--mesh-art);background-size:100% 100%;color:#fff}.mx-festival header{font-size:8px}.mx-festival h3{font-size:62px;line-height:.92;margin:25px 0;letter-spacing:-.07em}.mx-festival>div{font-size:10px;line-height:1.8}.mx-festival footer{display:flex;align-items:end;justify-content:space-between;margin-top:22px;font-size:9px}.mx-festival footer b{font-size:18px}
.mx-exhibition{height:100%;background:#fbf8ef;padding:22px;position:relative}.mx-exhibition header{font-size:8px}.mx-exhibit-art{width:162px;height:162px;border-radius:50%;background-image:var(--mesh-art);background-size:100% 100%;margin:15px auto}.mx-exhibition h3{font-size:29px}.mx-exhibition footer{font-size:8px;margin-top:12px}
.mx-editorial{height:100%;padding:18px;background:#fffdf6;position:relative}.mx-editorial header{font-size:7px;display:flex;justify-content:space-between}.mx-editorial h3{font-size:63px;margin:16px 0;position:relative;z-index:1;letter-spacing:-.08em}.mx-editorial-art{position:absolute;right:18px;bottom:18px;width:48%;height:200px;background-image:var(--mesh-art);background-size:100% 100%;border-radius:90px 90px 0 0}.mx-editorial footer{position:relative;margin-top:40px;max-width:46%;font-size:8px}.mx-editorial footer p{font-size:16px;line-height:1.1}
.mx-campaign{height:100%;position:relative;background:#f4f1e9;padding:22px;overflow:hidden}.mx-campaign header{font-size:8px}.mx-campaign h3{font-size:43px;margin-top:30px;position:relative;z-index:1;max-width:220px}.mx-bottle{position:absolute;right:37px;bottom:25px;width:91px;height:154px;border-radius:15px 15px 25px 25px;background-image:var(--mesh-art);background-size:100% 100%;box-shadow:inset -12px 0 15px #0002,12px 20px 22px #0002;transform:rotate(-12deg)}.mx-bottle:before{content:'';position:absolute;width:48px;height:25px;background:#18181b;top:-22px;left:21px;border-radius:5px}.mx-bottle span{display:block;margin:40px 12px 0;background:#fffffff0;padding:14px 7px;font-size:19px;font-weight:700}.mx-bottle small{font-size:6px}.mx-campaign footer{position:absolute;bottom:22px;font-size:7px}
.mx-social{height:100%;padding:20px;background:#fffaf2}.mx-social header{display:flex;justify-content:space-between;font-size:9px}.mx-social-art{height:230px;background-image:linear-gradient(#ffffff77,#ffffff77),var(--mesh-art);background-size:100% 100%;padding:24px;margin-top:17px;border-radius:3px}.mx-social-art strong{font-size:48px;line-height:.95;letter-spacing:-.065em}.mx-social footer{font-size:8px;margin-top:13px}
.mx-quote{height:100%;position:relative;padding:24px;background:#fffdf8;overflow:hidden}.mx-quote>span{font-size:85px;line-height:.6;position:relative;z-index:1}.mx-quote h3{font-size:32px;margin-top:5px;position:relative;z-index:1}.mx-quote footer{position:absolute;bottom:25px;font-size:8px;z-index:1}.mx-quote>i{position:absolute;right:-85px;bottom:-55px;width:240px;height:240px;background-image:var(--mesh-art);background-size:100% 100%;border-radius:50%;opacity:.65}
.mx-slide-cover{height:100%;position:relative;padding:27px;background:#faf8f2;overflow:hidden}.mx-slide-cover h3{font-size:45px;margin:60px 0 15px;position:relative;z-index:1}.mx-slide-cover p{max-width:190px;position:relative;z-index:1}.mx-slide-cover footer{position:absolute;bottom:25px;font-size:9px}.mx-slide-cover>i{position:absolute;right:-30px;top:0;height:100%;width:45%;background-image:var(--mesh-art);background-size:100% 100%;border-radius:100px 0 0 100px}.mx-slide-cover>small{position:relative;z-index:1}
.mx-divider{display:flex;align-items:center;position:relative;height:100%;padding:25px;background:#18181b;color:#fff;overflow:hidden}.mx-divider>strong{font-size:235px;font-weight:900;line-height:1;letter-spacing:-.12em;position:absolute;left:-20px;top:30px;background-image:var(--mesh-art);background-size:100% 100%;background-clip:text;color:transparent;opacity:.8}.mx-divider>div{position:relative;margin-left:auto;width:63%;background:#18181bed;padding:15px;border-radius:5px}.mx-divider h3{font-size:33px;margin:15px 0}.mx-divider p{font-size:10px}
.mx-slide-intro{height:100%;padding:27px;background:#fff}.mx-slide-intro h3{font-size:40px;margin:27px 0}.mx-slide-intro>div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mx-slide-intro article i{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background-image:linear-gradient(#ffffff66,#ffffff66),var(--mesh-art);background-size:100% 100%;border-radius:9px;font-style:normal;font-size:22px}.mx-slide-intro article b{display:block;font-size:9px;margin-top:10px}.mx-slide-intro footer{margin-top:25px;font-size:7px}
@media(min-width:1600px){.mesh-example-scene{height:370px}}
@media(max-width:1100px){.mesh-root .egm-shell{width:calc(100% - 48px)}.mesh-controls,.mesh-result{padding:22px}.mesh-workspace{grid-template-columns:minmax(285px,.9fr) minmax(0,1.1fr)}.mesh-panel-head h2{font-size:21px}.mesh-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mesh-example-scene{height:350px}.mesh-editor-toolbar{flex-wrap:wrap}.mesh-editor-toolbar .mesh-primary{min-width:100px}}
@media(max-width:760px){.mesh-root .egm-shell{width:calc(100% - 32px);padding-top:100px}.mesh-root .egm-hero{grid-template-columns:1fr;margin-bottom:28px}.mesh-root .egm-orbit{display:none}.mesh-root .egm-lead{font-size:15px;line-height:1.6}.mesh-workspace{grid-template-columns:1fr}.mesh-result{order:-1;border-radius:28px 28px 0 0;border-bottom:1px solid var(--mesh-border);padding:22px}.mesh-controls{border-right:0;padding:22px}.mesh-stage-wrap{min-height:200px}.mesh-stage[data-ratio=story]{max-width:220px}.mesh-preview-toolbar>span{display:none}.mesh-toggle-group{margin-right:auto}.mesh-code{display:none}.mesh-editor-toolbar{flex-wrap:nowrap}.mesh-root .egm-section-head{display:block}.mesh-root .egm-section-head>p{margin-top:14px;font-size:14px}.mesh-dialog{padding:20px}.mesh-result-actions{gap:6px}.mesh-root .mesh-result-actions button{font-size:12px;padding:8px 11px}.mesh-variant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.mesh-example-grid{grid-template-columns:1fr;gap:18px}.mesh-example-scene{height:350px}.mesh-example-grid>.egt-preview-pro{min-height:330px}.mesh-panel-head h2{font-size:22px}.mesh-root .mesh-panel-head>.mesh-button{font-size:12px;padding:8px 10px}.mesh-export-options{grid-template-columns:1fr}.mesh-categories{gap:4px}.mesh-categories button{padding:7px 10px;font-size:12px}.mesh-advanced>.mesh-button{margin:12px 0 0}.mesh-root .egm-title{font-size:45px}.mesh-root .egm-shell{padding-bottom:50px}}
.mesh-canvas-tools{display:flex;gap:8px;justify-content:flex-end;margin:12px 0}.mesh-text-overlay{position:absolute;inset:0;display:flex;align-items:center;padding:7%;pointer-events:none;color:#18181b;overflow:hidden}.mesh-text-overlay>div{max-width:65%;overflow-wrap:anywhere}.mesh-text-overlay.is-center{justify-content:center;text-align:center}.mesh-text-overlay.is-right{justify-content:flex-end;text-align:right}.mesh-text-overlay.is-light{color:#fff}.mesh-text-overlay strong{display:block;font-size:clamp(22px,4vw,var(--mesh-heading-size));line-height:1.1;letter-spacing:-.04em}.mesh-text-overlay p{font-size:15px;line-height:1.5;margin:16px 0}.mesh-preview-cta{display:inline-block;background:#18181b;color:#fff;padding:12px 18px;border-radius:8px;font-size:13px;font-weight:600}.is-light .mesh-preview-cta{background:#fff;color:#18181b}.mesh-text-overlay.has-panel>div{background:#fff;padding:24px;border-radius:12px}.mesh-text-overlay.has-panel.is-light>div{background:#18181b}.mesh-text-editor{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,1fr);gap:24px;align-items:start}.mesh-text-controls{display:grid;gap:14px}.mesh-text-controls label,.mesh-quiet-editor>label{display:grid;gap:6px;font-size:14px}.mesh-text-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mesh-text-controls textarea{resize:vertical}.mesh-root .mesh-text-controls .mesh-check{display:flex;align-items:center;gap:8px}.mesh-quiet-editor{display:grid;gap:16px}.mesh-quiet-editor>p,.mesh-comparison>p{font-size:14px;line-height:1.6}.mesh-fullscreen-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}.mesh-fullscreen-tools>.mesh-color-input{max-width:250px}.mesh-root .mesh-dialog.mesh-fullscreen{width:calc(100vw - 32px);max-width:none;max-height:calc(100dvh - 32px)}.mesh-fullscreen .mesh-stage-wrap{min-height:0}.mesh-fullscreen .mesh-stage{max-height:calc(100dvh - 270px);width:auto;max-width:100%;min-height:180px}.mesh-fullscreen .mesh-stage[data-ratio=story]{max-width:none}.mesh-comparison{display:grid;gap:16px}.mesh-compare-stage{position:relative;overflow:hidden;border-radius:16px;touch-action:none;max-height:60vh;max-width:100%;margin:auto;width:100%}.mesh-compare-layer{position:absolute;inset:0;background-size:100% 100%}.mesh-compare-label{position:absolute;top:14px;background:#18181b;color:white;padding:6px 10px;border-radius:6px;font-size:12px}.mesh-compare-label.before{left:14px}.mesh-compare-label.after{right:14px}.mesh-compare-divider{position:absolute;top:0;bottom:0;width:2px;background:white;box-shadow:0 0 0 1px #18181b44;pointer-events:none}.mesh-compare-divider i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;color:#18181b;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px #0003}.mesh-advanced>.mesh-stage-wrap{margin:16px 0}.mesh-advanced .mesh-stage{max-height:260px}.mesh-text-editor .mesh-stage-wrap{min-height:0}
@media(max-width:760px){.mesh-text-editor{grid-template-columns:1fr}.mesh-text-overlay>div{max-width:85%}.mesh-text-overlay strong{font-size:24px}.mesh-text-overlay p{font-size:12px;margin:10px 0}.mesh-preview-cta{padding:8px 12px;font-size:11px}.mesh-root .mesh-dialog.mesh-fullscreen{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.mesh-fullscreen .mesh-stage{width:100%;min-height:0}.mesh-fullscreen-tools{gap:6px}}
.mesh-stage,.mesh-compare-stage{container-type:inline-size}.mesh-root .mesh-text-overlay strong{font-size:clamp(12px,var(--mesh-heading-size),72px)}.mesh-root .mesh-text-overlay p{font-size:clamp(10px,1.9cqw,18px);margin:2cqw 0}.mesh-root .mesh-preview-cta{font-size:clamp(9px,1.65cqw,16px);padding:1.5cqw 2.2cqw}.mesh-text-overlay.has-panel>div{padding:3cqw}.mesh-text-overlay>div{max-width:72%}.mesh-root .mesh-dialog.mesh-text-modal{width:min(1040px,calc(100vw - 32px))}.mesh-root .mesh-text-controls textarea{height:auto;min-height:70px;font-family:inherit}.mesh-fullscreen .mesh-stage[data-ratio=wide]{width:min(100%,calc((100dvh - 290px)*1.6));min-height:0;max-height:none}.mesh-fullscreen .mesh-stage[data-ratio=square]{width:min(100%,calc(100dvh - 290px));min-height:0;max-height:none}.mesh-fullscreen .mesh-stage[data-ratio=story]{width:min(100%,calc((100dvh - 290px)*.5625));min-height:0;max-height:none}.mesh-fullscreen-tools>.mesh-color-field{width:250px}
.mesh-root .mesh-text-editor{grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:stretch}.mesh-text-preview-pane{min-width:0;background:#fafaf9;border:1px solid var(--mesh-border);border-radius:14px;padding:16px;display:flex;flex-direction:column;justify-content:center}.mesh-text-preview-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;color:#71717a;font-size:10px;letter-spacing:.08em;font-weight:600}.mesh-text-preview-heading small{font-size:11px;letter-spacing:0;font-weight:400;text-transform:capitalize}.mesh-text-preview-pane .mesh-stage-wrap{border:0;padding:0;background:none}.mesh-root .mesh-text-controls{display:flex;flex-direction:column;gap:18px}.mesh-text-tabs,.mesh-text-segments{display:flex;gap:4px;padding:4px;border-radius:9px;background:#f4f4f5;border:1px solid #e4e4e7}.mesh-root .mesh-text-tabs button,.mesh-root .mesh-text-segments button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;border:0;background:transparent;color:#71717a;border-radius:6px;padding:8px;font-size:12px;font-weight:500;text-transform:capitalize}.mesh-root .mesh-text-tabs button[aria-selected=true],.mesh-root .mesh-text-segments button[aria-pressed=true]{background:white;color:#18181b;box-shadow:0 1px 3px #00000015}.mesh-text-fields{display:grid;gap:16px;flex:1;align-content:start}.mesh-text-fields[hidden]{display:none}.mesh-root .mesh-text-fields label,.mesh-setting-label{font-size:12px;font-weight:500}.mesh-setting-label{display:block;margin-bottom:8px}.mesh-text-segments i{width:12px;height:12px;border-radius:50%;border:1px solid #d4d4d8}.mesh-tone-dark{background:#18181b}.mesh-tone-light{background:white}.mesh-text-fields .mesh-slider-field{margin:0}.mesh-surface-toggle small{display:block;font-weight:400;color:#71717a;font-size:11px;margin-top:4px}.mesh-preview-switch{border-top:1px solid #e4e4e7;padding-top:14px;font-size:12px!important}.mesh-text-controls input[type=checkbox]{accent-color:#18181b;width:15px;height:15px;flex-shrink:0}.mesh-text-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #e4e4e7;margin-top:22px;padding-top:16px}.mesh-root .mesh-text-footer p{font-size:12px;line-height:1.5;color:#71717a;margin:0}.mesh-root .mesh-text-fields .mesh-help{font-size:11px;margin:0}
@media(max-width:760px){.mesh-root .mesh-text-editor{grid-template-columns:1fr;gap:18px}.mesh-text-preview-pane{padding:12px}.mesh-text-footer{align-items:flex-start}.mesh-root .mesh-text-footer .mesh-button{flex-shrink:0}.mesh-text-preview-pane .mesh-stage[data-ratio=story]{max-width:140px}.mesh-text-preview-pane .mesh-stage[data-ratio=square]{max-width:240px}}