.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;
  }
}

.ip2-root {
  --ip-ink: #18181b;
  --ip-muted: #71717a;
  --ip-line: #e1e1e5;
  --ip-soft: #f4f4f5;
  background: #f7f5f2;
  color: var(--ip-ink);
  min-height: 100vh;
  margin-top: 80px;
  padding: clamp(44px, 4vw, 64px) 0 80px;
}

.ip2-shell { width: min(1240px, calc(100% - 40px)); margin: auto; }
.ip2-button { min-height: 40px; border: 1px solid var(--ip-line); border-radius: 10px; background: #fff; color: inherit; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ip2-button:hover { background: #f7f7f8; }
.ip2-demo-control { cursor: default; user-select: none; }
.ip2-button.is-active { border-color: var(--ip-ink); background: var(--ip-ink); color: #fff; }
.ip2-button svg { width: 16px; height: 16px; }
.ip2-badge { min-height: 26px; width: max-content; border: 1px solid var(--ip-line); border-radius: 999px; background: #fff; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.ip2-badge.is-pro { border: 0; background: #eeeaff; color: #6247d8; }
.ip2-badge.is-local { border: 0; background: #eaf9f2; color: #23845f; }
.ip2-badge.is-local i { width: 7px; height: 7px; border-radius: 50%; background: #35c88d; }

.ip2-hero { margin-bottom: 32px; }
.ip2-hero > small,
.ip2-section-head small,
.ip2-palette-card > header small,
.ip2-related > header small,
.ip2-seo article > small { display: block; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: .19em; color: var(--ip-muted); }
.ip2-hero h1 { margin: 16px 0 24px; max-width: 1020px; font-size: clamp(52px, 6.5vw, 84px); line-height: .96; letter-spacing: -.065em; }
.ip2-hero > i { display: block; width: 400px; max-width: 48%; height: 5px; border-radius: 99px; background: linear-gradient(90deg, #ef5d43, #a65bd5, #5f74ec, #45c8b7); }
.ip2-hero p { max-width: 920px; margin: 24px 0 0; color: var(--ip-muted); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.45; }

.ip2-nav { min-height: 78px; margin-bottom: 22px; padding: 10px 12px 10px 16px; border: 1px solid var(--ip-line); border-radius: 18px; background: #fff; box-shadow: 0 15px 40px rgba(25, 24, 22, .05); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ip2-summary { display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr 1fr; column-gap: 12px; justify-self: start; align-items: center; }
.ip2-summary > span { grid-row: 1/3; display: flex; }
.ip2-summary > span i { width: 24px; height: 40px; border: 2px solid #fff; margin-left: -6px; }
.ip2-summary > span i:first-child { margin-left: 0; border-radius: 9px 0 0 9px; }
.ip2-summary > span i:last-child { border-radius: 0 9px 9px 0; }
.ip2-summary b { align-self: end; font-size: 13px; }
.ip2-summary small { align-self: start; color: var(--ip-muted); font-size: 11px; text-transform: capitalize; }
.ip2-tabs { padding: 4px; border-radius: 13px; background: var(--ip-soft); display: flex; gap: 2px; }
.ip2-tabs .ip2-button { min-height: 48px; border: 0; background: transparent; color: #5f5e66; padding-inline: 22px; }
.ip2-tabs .ip2-button.is-active { background: var(--ip-ink); color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.16); }
.ip2-actions { justify-self: end; display: flex; gap: 8px; }
.ip2-actions .ip2-button { width: 46px; min-height: 46px; padding: 0; }

.ip2-studio { border: 1px solid var(--ip-line); border-radius: 26px; background: #fff; box-shadow: 0 22px 55px rgba(30, 28, 24, .05); overflow: hidden; }
.ip2-extract,
.ip2-apply,
.ip2-inspect { padding: clamp(26px, 3.2vw, 42px); }
.ip2-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 28px; }
.ip2-section-head h2 { margin: 10px 0 8px; font-size: clamp(30px, 3vw, 42px); line-height: 1; letter-spacing: -.055em; }
.ip2-section-head p { margin: 0; color: var(--ip-muted); font-size: 14px; }
.ip2-card { border: 1px solid var(--ip-line); border-radius: 18px; background: #fff; padding: 20px; }
.ip2-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.ip2-card > header > span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.ip2-card > header b { font-size: 15px; }
.ip2-card > header small { color: var(--ip-muted); font-size: 11px; }

.ip2-extract-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); gap: 18px; }
.ip2-image-card { min-width: 0; }
.ip2-canvas-wrap { position: relative; height: 330px; margin-top: 16px; border-radius: 13px; overflow: hidden; background: #eee; }
.ip2-canvas-wrap canvas { display: block; width: 100%; height: 100%; object-fit: cover; cursor: crosshair; }
.ip2-image-card > footer { margin-top: 14px; display: flex; justify-content: space-between; gap: 10px; }
.ip2-image-card > footer .ip2-button:first-child { flex: 1; border-style: dashed; }
.ip2-image-card > footer .ip2-button.is-dragging { border-color: #6b55df; background: #f1eeff; color: #5b42d1; }
.ip2-picker { position: absolute; width: 30px; min-height: 30px; padding: 0; border: 4px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #18181b, 0 8px 20px rgba(0,0,0,.2); }
.ip2-picker span { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); padding: 6px 8px; border-radius: 7px; background: #18181b; color: #fff; font-size: 10px; white-space: nowrap; }

.ip2-recipe-card { display: flex; flex-direction: column; }
.ip2-field { margin-top: 24px; }
.ip2-field > label { display: block; margin-bottom: 8px; color: var(--ip-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ip2-segment { padding: 4px; border-radius: 12px; background: var(--ip-soft); display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.ip2-segment .ip2-button { border: 0; background: transparent; min-width: 0; padding-inline: 8px; text-transform: capitalize; }
.ip2-segment .ip2-button.is-active { background: #fff; color: var(--ip-ink); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ip2-counts { display: grid; grid-template-columns: 44px 44px 44px 1fr; gap: 7px; }
.ip2-counts.is-pro { grid-template-columns: repeat(6, 1fr); }
.ip2-counts .ip2-button { padding: 0; }
.ip2-counts .ip2-button.is-active { border-color: var(--ip-ink); background: var(--ip-ink); color: #fff; }
.ip2-counts .ip2-more-colors { padding-inline: 10px; }
.ip2-guidance { margin-top: 24px; padding: 14px; border-radius: 13px; background: #f6f4ff; display: flex; gap: 12px; }
.ip2-randomize { width: 100%; min-height: 52px; margin-top: 16px; justify-content: flex-start; border-color: #d9d4ef; background: linear-gradient(135deg, #fff, #f4f1ff); color: #31265f; }
.ip2-randomize > svg { width: 19px; color: #7154e8; }
.ip2-randomize > span { display: flex; flex-direction: column; align-items: flex-start; }
.ip2-randomize b { font-size: 11px; }
.ip2-randomize small { margin-top: 2px; color: #756f86; font-size: 9px; font-weight: 500; }
.ip2-guidance > span { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: #fff; color: #6449d8; display: grid; place-items: center; }
.ip2-guidance b { font-size: 12px; }
.ip2-guidance p { margin: 4px 0 0; color: #6d687c; font-size: 10px; line-height: 1.4; }
.ip2-recipe-card ul { list-style: none; margin: auto 0 0; padding: 22px 0 0; display: grid; gap: 9px; }
.ip2-recipe-card li { display: flex; align-items: center; gap: 8px; color: var(--ip-muted); font-size: 11px; }
.ip2-recipe-card li svg { width: 14px; color: #27835f; }

.ip2-palette-card { margin-top: 18px; border: 1px solid var(--ip-line); border-radius: 18px; overflow: hidden; }
.ip2-palette-card > header { min-height: 72px; padding: 13px 16px; background: #fafafa; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.ip2-palette-card > header > div b { display: block; margin-top: 5px; font-size: 14px; }
.ip2-palette-card > header > span { display: flex; gap: 8px; }
.ip2-swatches { min-height: 284px; display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.ip2-swatches article { min-width: 0; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.ip2-swatches article > header { display: flex; align-items: center; justify-content: space-between; }
.ip2-swatches article > header small { font-size: 10px; font-weight: 800; letter-spacing: .12em; opacity: .72; }
.ip2-swatches article > header .ip2-button { width: 34px; min-height: 34px; padding: 0; border-color: currentColor; background: transparent; color: inherit; opacity: 0; transform: translateY(-3px); transition: opacity .16s ease, transform .16s ease; }
.ip2-swatches article:hover > header .ip2-button,
.ip2-swatches article:focus-within > header .ip2-button,
.ip2-swatches article > header .ip2-button.is-locked { opacity: 1; transform: none; }
.ip2-hex { align-items: flex-start; flex-direction: column; border: 0; background: transparent; color: inherit; padding: 0; }
.ip2-hex:hover { background: transparent; }
.ip2-hex b { font-size: 17px; }
.ip2-hex small { margin-top: 3px; opacity: .68; font-size: 9px; }
.ip2-role-field { display: grid; gap: 7px; }
.ip2-role-field > span { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.ip2-role-trigger { width: 100%; min-height: 42px; border: 1px solid currentColor; border-radius: 11px; background: color-mix(in srgb, currentColor 5%, transparent); color: inherit; padding: 0 11px; display: grid; grid-template-columns: 9px 1fr 14px; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.ip2-role-trigger > i { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; }
.ip2-role-trigger svg { width: 13px; transform: rotate(90deg); }
.ip2-role-menu { z-index: 1200; width: 276px; border: 1px solid #dedee3; border-radius: 18px; background: rgba(255,255,255,.98); color: #18181b; padding: 8px; box-shadow: 0 24px 70px rgba(24,24,27,.2); font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; backdrop-filter: blur(16px); }
.ip2-role-menu > header { margin-bottom: 5px; border-radius: 11px; background: #f5f5f7; padding: 12px; display: flex; flex-direction: column; }
.ip2-role-menu > header b { font-size: 13px; letter-spacing: -.01em; }
.ip2-role-menu > header small { margin-top: 3px; color: #73737d; font-size: 9px; }
.ip2-role-menu > div { display: grid; grid-template-columns: 1fr; gap: 2px; max-height: 330px; overflow-y: auto; }
.ip2-role-menu button { min-height: 41px; border: 0; border-radius: 10px; background: transparent; padding: 0 11px; display: grid; grid-template-columns: 22px 1fr 15px; align-items: center; gap: 9px; color: inherit; text-align: left; font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
.ip2-role-menu button:hover { background: #f5f5f7; }
.ip2-role-menu button.is-active { background: #18181b; color: #fff; }
.ip2-role-menu button > i { width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 7px; }
.ip2-role-menu button svg { width: 13px; justify-self: end; }

.ip2-apply-embedded { margin-top: 54px; padding: 48px 0 0; border-top: 1px solid var(--ip-line); scroll-margin-top: 24px; }
.ip2-preview-count { min-width: 110px; border-left: 1px solid var(--ip-line); padding-left: 18px; display: flex; flex-direction: column; }
.ip2-preview-count b { font-size: 13px; }
.ip2-preview-count small { margin-top: 3px; color: var(--ip-muted); font-size: 10px; }
.ip2-context-toolbar { margin: 28px 0 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ip2-context-tabs { min-width: 0; display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 7px; scrollbar-width: none; }
.ip2-context-tabs::-webkit-scrollbar { display: none; }
.ip2-context-tabs button { flex: 0 0 auto; min-height: 40px; border: 1px solid var(--ip-line); border-radius: 999px; background: #fff; color: var(--ip-muted); padding: 0 15px; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.ip2-context-tabs button:hover { border-color: var(--ip-ink); color: var(--ip-ink); }
.ip2-context-tabs button.is-active { border-color: var(--ip-ink); background: var(--ip-ink); color: #fff; }
.ip2-context-toolbar > .ip2-button { flex: 0 0 auto; min-height: 43px; }
.ip2-context-grid { columns: 2; column-gap: 18px; }
.ip2-context-grid.is-inspiration-page { columns: 3; column-gap: 16px; }
.ip2-context-grid.is-single { max-width: 760px; columns: 1; }
.ip2-context-card { position: relative; width: 100%; margin: 0 0 18px; break-inside: avoid; overflow: hidden; border: 1px solid var(--ip-line); border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(23,23,27,.07); }
.ip2-context-card > header { min-height: 66px; padding: 14px 17px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.ip2-context-card > header span { border-radius: 999px; background: var(--ip-soft); padding: 6px 8px; color: var(--ip-muted); font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.ip2-context-card > header b { font-size: 14px; letter-spacing: -.02em; }
.ip2-context-card > header i { color: #21825d; font-size: 8px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.ip2-context-art { height: 430px; overflow: hidden; border-top: 1px solid var(--ip-line); background: color-mix(in srgb, var(--pc-surface) 45%, white); color: var(--pc-text); }
.ip2-context-art button, .ip2-context-art input { font: inherit; }
.ip2-context-art button { cursor: default; }
.ip2-context-card.is-inspiration { border-radius: 18px; }
.ip2-context-card.is-inspiration .ip2-context-art { height: auto; min-height: 0; border-top: 0; }
.pc-inspire-story { min-height: 520px; overflow: hidden; background: color-mix(in srgb, var(--pc-surface) 42%, white); color: var(--pc-text); }
.pc-inspire-story > header { min-height: 58px; border-bottom: 1px solid color-mix(in srgb, var(--pc-text) 12%, transparent); padding: 0 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.pc-inspire-story > header > b { font-size: 15px; letter-spacing: -.04em; }
.pc-inspire-story > header nav { color: color-mix(in srgb, var(--pc-text) 58%, transparent); font-size: 7px; font-weight: 750; }
.pc-inspire-story > header > span { justify-self: end; width: 28px; height: 28px; border-radius: 50%; background: var(--pc-text); color: var(--pc-surface); display: grid; place-items: center; font-size: 7px; font-weight: 850; }
.pc-inspire-story > main { padding: 22px 20px; }
.pc-inspire-story > main > small { color: var(--pc-primary); font-size: 6px; font-weight: 900; letter-spacing: .13em; }
.pc-inspire-story > main > h3 { margin: 7px 0 18px; font-size: 27px; line-height: 1; letter-spacing: -.06em; }
.pc-story-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.pc-story-metrics article { position: relative; min-height: 84px; border: 1px solid color-mix(in srgb, var(--pc-text) 12%, transparent); border-radius: 12px; background: #fff; padding: 13px; display: grid; align-content: space-between; }
.pc-story-metrics article span { color: color-mix(in srgb, var(--pc-text) 58%, transparent); font-size: 7px; font-weight: 750; }
.pc-story-metrics article b { font-size: 22px; letter-spacing: -.05em; }
.pc-story-metrics article em { position: absolute; right: 11px; bottom: 14px; border-radius: 999px; background: color-mix(in srgb, var(--pc-secondary) 30%, white); color: var(--pc-text); padding: 4px 6px; font-size: 6px; font-style: normal; font-weight: 850; }
.pc-story-chart { margin-top: 10px; border-radius: 14px; background: var(--pc-primary); color: var(--pc-on-primary); padding: 15px; }
.pc-story-chart > header { display: flex; align-items: flex-start; justify-content: space-between; }
.pc-story-chart > header span { display: grid; gap: 3px; }
.pc-story-chart > header b { font-size: 10px; }
.pc-story-chart > header small { color: color-mix(in srgb, var(--pc-on-primary) 66%, transparent); font-size: 6px; }
.pc-story-chart > header em { border-radius: 999px; background: color-mix(in srgb, var(--pc-on-primary) 14%, transparent); padding: 5px 7px; font-size: 6px; font-style: normal; font-weight: 800; }
.pc-story-chart > div { height: 104px; margin-top: 18px; display: flex; align-items: flex-end; gap: 8px; }
.pc-story-chart > div i { flex: 1; min-height: 18px; border-radius: 5px 5px 2px 2px; background: var(--pc-accent); }
.pc-story-chart > div i:nth-child(2n) { background: var(--pc-secondary); }
.pc-inspire-story > main > footer { min-height: 50px; margin-top: 10px; border: 1px solid color-mix(in srgb, var(--pc-text) 12%, transparent); border-radius: 12px; background: #fff; padding: 0 12px; display: flex; align-items: center; gap: 11px; }
.pc-inspire-story > main > footer span { display: flex; align-items: center; gap: 5px; font-size: 6px; font-weight: 750; }
.pc-inspire-story > main > footer span i { width: 6px; height: 6px; border-radius: 50%; background: var(--pc-accent); }
.pc-inspire-story > main > footer span:nth-child(2) i { background: var(--pc-secondary); }
.pc-inspire-story > main > footer b { margin-left: auto; color: var(--pc-primary); font-size: 7px; }
.pc-inspire-donut { min-height: 350px; padding: 20px; background: #fff; }.pc-inspire-donut header { display: flex; align-items: flex-end; justify-content: space-between; }.pc-inspire-donut header small { display: block; color: var(--pc-primary); font-size: 6px; font-weight: 850; letter-spacing: .1em; }.pc-inspire-donut header b { font-size: 13px; }.pc-donut { position: relative; width: 150px; height: 150px; margin: 22px auto; border-radius: 50%; background: conic-gradient(var(--pc-primary) 0 32%, var(--pc-accent) 32% 56%, var(--pc-secondary) 56% 77%, var(--pc-surface) 77% 92%, var(--pc-text) 92%); display: grid; place-items: center; }.pc-donut:after { position: absolute; inset: 28px; border-radius: 50%; background: #fff; content: ""; }.pc-donut strong, .pc-donut span { position: absolute; z-index: 1; }.pc-donut strong { margin-top: -14px; font-size: 26px; }.pc-donut span { margin-top: 25px; color: color-mix(in srgb, var(--pc-text) 55%, transparent); font-size: 8px; }.pc-inspire-donut ul { margin: 0; padding: 0; display: grid; gap: 7px; list-style: none; }.pc-inspire-donut li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; font-size: 7px; }.pc-inspire-donut li > i { width: 7px; height: 7px; border-radius: 2px; background: var(--pc-primary); }.pc-inspire-donut li > i.is-1 { background: var(--pc-accent); }.pc-inspire-donut li > i.is-2 { background: var(--pc-secondary); }.pc-inspire-donut li > i.is-3 { background: var(--pc-surface); }.pc-inspire-donut li > i.is-4 { background: var(--pc-text); }
.pc-inspire-budget { min-height: 420px; background: color-mix(in srgb, var(--pc-surface) 48%, white); padding: 20px; }.pc-inspire-budget > header { display: flex; justify-content: space-between; align-items: flex-start; }.pc-inspire-budget header span { display: grid; gap: 5px; }.pc-inspire-budget header small { color: var(--pc-primary); font-size: 6px; font-weight: 850; }.pc-inspire-budget header b { font-size: 13px; }.pc-inspire-budget header em { border-radius: 999px; background: color-mix(in srgb, var(--pc-secondary) 35%, white); padding: 6px 8px; font-size: 7px; font-style: normal; font-weight: 800; }.pc-inspire-budget > main { margin-top: 25px; border-radius: 16px; background: var(--pc-primary); color: var(--pc-on-primary); padding: 19px; }.pc-inspire-budget main small { font-size: 6px; }.pc-inspire-budget main h3 { margin: 27px 0 3px; font-size: 28px; letter-spacing: -.06em; }.pc-inspire-budget main p { font-size: 7px; }.pc-inspire-budget main > div { height: 85px; margin-top: 18px; display: flex; align-items: flex-end; gap: 7px; }.pc-inspire-budget main i { flex: 1; height: 45%; border-radius: 5px 5px 1px 1px; background: var(--pc-accent); }.pc-inspire-budget main i:nth-child(2) { height: 76%; background: var(--pc-secondary); }.pc-inspire-budget main i:nth-child(3) { height: 58%; background: var(--pc-surface); }.pc-inspire-budget main i:nth-child(4) { height: 92%; background: var(--pc-accent); }.pc-inspire-budget > footer { margin-top: 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.pc-inspire-budget footer span { display: grid; gap: 4px; }.pc-inspire-budget footer b { font-size: 12px; }.pc-inspire-budget footer small { font-size: 6px; }
.pc-inspire-feed { min-height: 365px; padding: 18px; background: color-mix(in srgb, var(--pc-surface) 34%, white); }
.pc-inspire-feed > header { min-height: 52px; margin-bottom: 9px; display: flex; justify-content: space-between; align-items: center; }
.pc-inspire-feed > header span { display: grid; gap: 4px; }
.pc-inspire-feed > header small { color: var(--pc-primary); font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.pc-inspire-feed > header b { font-size: 16px; letter-spacing: -.035em; }
.pc-inspire-feed > header button { min-height: 28px; border: 1px solid color-mix(in srgb, var(--pc-text) 14%, transparent); border-radius: 8px; background: #fff; color: var(--pc-text); padding: 0 9px; font-size: 7px; font-weight: 800; }
.pc-inspire-feed article { min-height: 70px; margin-top: 7px; border: 1px solid color-mix(in srgb, var(--pc-text) 11%, transparent); border-radius: 12px; background: #fff; padding: 10px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.pc-inspire-feed article > i { width: 38px; height: 38px; border-radius: 11px; background: var(--pc-primary); color: var(--pc-on-primary); display: grid; place-items: center; font-size: 10px; font-style: normal; font-weight: 900; }
.pc-inspire-feed article > i.is-1 { background: var(--pc-accent); color: var(--pc-text); }
.pc-inspire-feed article > i.is-2 { background: var(--pc-secondary); color: var(--pc-text); }
.pc-inspire-feed article > span { min-width: 0; display: grid; gap: 5px; }
.pc-inspire-feed article b { overflow: hidden; font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.pc-inspire-feed article small { color: color-mix(in srgb, var(--pc-text) 55%, transparent); font-size: 6px; font-weight: 700; }
.pc-inspire-feed article em { align-self: start; color: color-mix(in srgb, var(--pc-text) 44%, transparent); font-size: 6px; font-style: normal; }
.pc-inspire-feed > footer { min-height: 45px; margin-top: 10px; border-top: 1px solid color-mix(in srgb, var(--pc-text) 11%, transparent); display: flex; align-items: flex-end; justify-content: space-between; }
.pc-inspire-feed > footer span { color: color-mix(in srgb, var(--pc-text) 55%, transparent); font-size: 7px; }
.pc-inspire-feed > footer button { min-height: 28px; border: 0; border-radius: 8px; background: var(--pc-text); color: var(--pc-surface); padding: 0 10px; font-size: 7px; font-weight: 800; }
.pc-inspire-product { position: relative; min-height: 470px; overflow: hidden; background: var(--pc-text); color: #fff; }
.pc-inspire-product > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; filter: saturate(.72) contrast(1.03); }
.pc-inspire-product:after { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--pc-text) 92%, transparent) 0%, color-mix(in srgb, var(--pc-text) 67%, transparent) 48%, transparent 82%), linear-gradient(0deg, rgba(0,0,0,.38), transparent 45%); content: ""; }
.pc-product-copy { position: relative; z-index: 2; width: 60%; padding: 27px 24px 72px; }
.pc-product-copy > span { font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.pc-product-copy > h3 { margin: 60px 0 14px; font-size: 43px; line-height: .84; letter-spacing: -.075em; }
.pc-product-copy > p { max-width: 175px; font-size: 8px; line-height: 1.5; }
.pc-product-copy > button { min-height: 34px; margin-top: 12px; border: 0; border-radius: 999px; background: var(--pc-accent); color: var(--pc-on-accent); padding: 0 13px; font-size: 7px; font-weight: 800; }
.pc-inspire-product > footer { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 45px; background: color-mix(in srgb, var(--pc-text) 88%, transparent); padding: 12px 20px; display: flex; gap: 6px; backdrop-filter: blur(12px); }
.pc-inspire-product footer i { width: 20%; border-radius: 4px; background: var(--pc-primary); }
.pc-inspire-product footer i:nth-child(2) { background: var(--pc-accent); }.pc-inspire-product footer i:nth-child(3) { background: var(--pc-secondary); }.pc-inspire-product footer i:nth-child(4) { background: var(--pc-surface); }.pc-inspire-product footer i:nth-child(5) { background: color-mix(in srgb, var(--pc-primary) 55%, var(--pc-accent)); }
.ip2-context-lock { position: absolute; inset: 0; z-index: 5; border: 0; border-radius: 22px; background: rgba(20,20,24,.54); color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; backdrop-filter: blur(3px); }
.ip2-context-lock span { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(20,20,24,.75); display: grid; place-items: center; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.ip2-context-lock strong { margin-top: 11px; font-size: 18px; }
.ip2-context-lock small { margin-top: 6px; color: rgba(255,255,255,.76); font-size: 9px; }

.pc-shell, .pc-analytics { height: 100%; display: grid; grid-template-columns: 86px 1fr; }
.pc-shell > aside, .pc-analytics > aside { padding: 20px 13px; background: var(--pc-text); color: color-mix(in srgb, var(--pc-surface) 90%, white); display: flex; flex-direction: column; gap: 10px; }
.pc-shell > aside > b, .pc-analytics > aside > b { margin-bottom: 22px; font-size: 18px; }
.pc-shell > aside > span { border-radius: 8px; padding: 8px; font-size: 8px; }
.pc-shell > aside > span.is-active { background: color-mix(in srgb, var(--pc-primary) 60%, transparent); color: var(--pc-on-primary); }
.pc-shell > main, .pc-analytics > main { padding: 22px; }
.pc-shell main > header, .pc-analytics main > header, .pc-product > header, .pc-admin > header { display: flex; align-items: center; justify-content: space-between; }
.pc-shell h3, .pc-analytics h3, .pc-product h3, .pc-admin h3 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.05em; }
.pc-shell header small, .pc-analytics header small, .pc-product header small, .pc-admin header small { font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.pc-shell main > header > i { border-radius: 999px; background: color-mix(in srgb, var(--pc-primary) 15%, white); color: var(--pc-primary); padding: 7px 9px; font-size: 8px; font-style: normal; font-weight: 800; }
.pc-settings { margin-top: 25px; display: grid; grid-template-columns: 1.5fr .8fr; gap: 12px; }
.pc-settings article { min-height: 240px; border: 1px solid color-mix(in srgb, var(--pc-text) 15%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--pc-surface) 72%, white); padding: 17px; }
.pc-settings article > b { display: block; font-size: 13px; }.pc-settings p { color: color-mix(in srgb, var(--pc-text) 66%, transparent); font-size: 9px; line-height: 1.5; }
.pc-settings label { margin-top: 22px; display: grid; gap: 6px; font-size: 8px; font-weight: 800; }.pc-settings input { height: 36px; border: 1px solid color-mix(in srgb, var(--pc-text) 18%, transparent); border-radius: 8px; background: #fff; padding: 0 10px; color: var(--pc-text); font-size: 9px; }
.pc-settings footer { margin-top: 14px; display: flex; justify-content: flex-end; gap: 7px; }.pc-settings button, .pc-product button, .pc-admin button { min-height: 34px; border: 1px solid color-mix(in srgb, var(--pc-text) 16%, transparent); border-radius: 8px; background: #fff; color: var(--pc-text); padding: 0 11px; font-size: 8px; font-weight: 800; }.pc-settings footer button:last-child, .pc-settings article:nth-child(2) button, .pc-product header button, .pc-admin header button { border-color: var(--pc-primary); background: var(--pc-primary); color: var(--pc-on-primary); }
.pc-settings article:nth-child(2) { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; }.pc-settings article:nth-child(2) > small { color: var(--pc-primary); font-size: 7px; font-weight: 900; }.pc-settings article:nth-child(2) button { margin-top: 17px; }

.pc-product, .pc-admin { height: 100%; padding: 24px; background: color-mix(in srgb, var(--pc-surface) 48%, white); }.pc-product nav, .pc-admin main nav { margin: 20px 0 14px; border-bottom: 1px solid color-mix(in srgb, var(--pc-text) 13%, transparent); display: flex; gap: 22px; }.pc-product nav span, .pc-product nav b, .pc-admin nav span, .pc-admin nav b { padding: 0 0 10px; font-size: 8px; }.pc-product nav b, .pc-admin nav b { border-bottom: 2px solid var(--pc-accent); }.pc-board { display: grid; gap: 9px; }.pc-board article { min-height: 67px; border: 1px solid color-mix(in srgb, var(--pc-text) 13%, transparent); border-radius: 12px; background: #fff; padding: 10px; display: grid; grid-template-columns: 28px 1fr auto 27px; align-items: center; gap: 10px; }.pc-board article > i { width: 24px; height: 24px; border: 1px solid color-mix(in srgb, var(--pc-text) 20%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--pc-accent) 14%, white); display: grid; place-items: center; color: var(--pc-text); font-style: normal; }.pc-board article span { display: grid; gap: 4px; }.pc-board article span b { font-size: 9px; }.pc-board article span small { color: color-mix(in srgb, var(--pc-text) 55%, transparent); font-size: 7px; }.pc-board article em { border-radius: 999px; background: color-mix(in srgb, var(--pc-secondary) 22%, white); padding: 5px 7px; font-size: 7px; font-style: normal; }.pc-board article strong { width: 27px; height: 27px; border-radius: 50%; background: var(--pc-text); color: var(--pc-surface); display: grid; place-items: center; font-size: 7px; }

.pc-checkout { height: 100%; background: color-mix(in srgb, var(--pc-surface) 35%, white); }.pc-checkout > header, .pc-store > header, .pc-landing > header { height: 55px; border-bottom: 1px solid color-mix(in srgb, var(--pc-text) 14%, transparent); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; font-size: 8px; }.pc-checkout > main { height: calc(100% - 55px); display: grid; grid-template-columns: 1.2fr .8fr; }.pc-checkout main > section { padding: 22px; }.pc-checkout main > section > small { display: block; margin: 0 0 9px; font-size: 7px; font-weight: 850; letter-spacing: .12em; }.pc-checkout label { display: grid; gap: 5px; margin-bottom: 14px; font-size: 8px; font-weight: 750; }.pc-checkout main > section > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.pc-checkout input { height: 36px; border: 1px solid color-mix(in srgb, var(--pc-text) 18%, transparent); border-radius: 8px; background: #fff; padding: 0 9px; color: var(--pc-text); font-size: 8px; }.pc-checkout section > button { width: 100%; min-height: 38px; border: 0; border-radius: 8px; background: var(--pc-primary); color: var(--pc-on-primary); font-size: 9px; font-weight: 800; }.pc-checkout aside { padding: 23px 18px; background: color-mix(in srgb, var(--pc-secondary) 24%, white); }.pc-checkout aside article { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; }.pc-checkout aside article > i { height: 64px; border-radius: 10px; background: var(--pc-accent); }.pc-checkout aside article span { display: grid; gap: 5px; }.pc-checkout aside article b, .pc-checkout aside article strong { font-size: 9px; }.pc-checkout aside article small { font-size: 7px; }.pc-checkout aside footer { margin-top: 28px; border-top: 1px solid color-mix(in srgb, var(--pc-text) 16%, transparent); padding-top: 14px; display: grid; gap: 10px; }.pc-checkout aside footer span, .pc-checkout aside footer > strong { display: flex; justify-content: space-between; font-size: 8px; }.pc-checkout aside footer > strong { font-size: 11px; }

.pc-store, .pc-landing, .pc-campaign, .pc-photo-campaign, .pc-editorial { position: relative; height: 100%; overflow: hidden; }
.pc-store-hero { position: relative; height: 190px; overflow: hidden; background: var(--pc-primary); color: #fff; }
.pc-store-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 63%; filter: saturate(.72) contrast(1.08); }
.pc-store-hero:after { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--pc-text) 78%, transparent), transparent 76%); content: ""; }
.pc-store-hero > div { position: relative; z-index: 1; padding: 27px 22px; }
.pc-store section small, .pc-landing main small, .pc-campaign main small, .pc-photo-campaign main small { font-size: 7px; font-weight: 850; letter-spacing: .13em; }.pc-store section h3, .pc-landing main h3, .pc-campaign main h3, .pc-photo-campaign main h3 { margin: 10px 0 16px; font-size: 34px; line-height: .9; letter-spacing: -.07em; }.pc-store button, .pc-landing button, .pc-campaign button, .pc-photo-campaign button { min-height: 34px; border: 0; border-radius: 999px; background: var(--pc-text); color: var(--pc-surface); padding: 0 12px; font-size: 8px; font-weight: 800; }.pc-store > main { height: 185px; padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.pc-store main article { display: grid; grid-template-columns: 1fr auto; align-content: end; gap: 5px; }.pc-store main article > i { grid-column: 1/3; height: 115px; border-radius: 10px; background: var(--pc-secondary); }.pc-store main article > i.is-1 { background: var(--pc-accent); }.pc-store main article > i.is-2 { background: var(--pc-primary); }.pc-store main article b, .pc-store main article span { font-size: 8px; }

.pc-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }.pc-metrics article { position: relative; min-width: 0; border: 1px solid color-mix(in srgb, var(--pc-text) 13%, transparent); border-radius: 11px; background: #fff; padding: 11px; }.pc-metrics small, .pc-metrics b { display: block; }.pc-metrics small { font-size: 7px; }.pc-metrics b { margin-top: 7px; font-size: 14px; }.pc-metrics em { position: absolute; right: 8px; bottom: 10px; color: var(--pc-primary); font-size: 6px; font-style: normal; font-weight: 850; }.pc-analytics > aside > i { width: 22px; height: 4px; border-radius: 9px; background: color-mix(in srgb, var(--pc-surface) 35%, transparent); }.pc-analytics > aside > i:first-of-type { background: var(--pc-accent); }.pc-analytics main > header button { min-height: 32px; border: 0; border-radius: 8px; background: var(--pc-primary); color: var(--pc-on-primary); padding: 0 11px; font-size: 8px; }.pc-chart { height: 190px; border-radius: 14px; background: #fff; padding: 14px; }.pc-chart header { display: flex; justify-content: space-between; font-size: 8px; }.pc-chart > div { height: 132px; display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; }.pc-chart > div i { width: 9%; border-radius: 5px 5px 1px 1px; background: var(--pc-primary); }.pc-chart > div i:nth-child(3n+2) { background: var(--pc-accent); }.pc-chart > div i:nth-child(3n) { background: var(--pc-secondary); }

.pc-finance { height: 100%; padding: 20px; background: color-mix(in srgb, var(--pc-surface) 38%, white); }.pc-finance > header { display: flex; align-items: center; justify-content: space-between; font-size: 8px; }.pc-finance > header i { width: 28px; height: 28px; border-radius: 50%; background: var(--pc-text); color: var(--pc-surface); display: grid; place-items: center; font-style: normal; }.pc-finance > main { margin-top: 18px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 10px; }.pc-finance main > section { min-height: 310px; border-radius: 17px; background: var(--pc-primary); color: var(--pc-on-primary); padding: 20px; }.pc-finance section small { font-size: 7px; }.pc-finance section h3 { margin: 40px 0 6px; font-size: 28px; letter-spacing: -.06em; }.pc-finance section em { font-size: 8px; font-style: normal; }.pc-finance section > div { margin-top: 65px; display: flex; gap: 6px; }.pc-finance section button { flex: 1; min-height: 34px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--pc-surface) 85%, transparent); color: var(--pc-text); font-size: 7px; }.pc-finance main > aside { border-radius: 17px; background: #fff; padding: 16px; }.pc-finance aside > b { font-size: 11px; }.pc-finance aside article { border-bottom: 1px solid color-mix(in srgb, var(--pc-text) 10%, transparent); padding: 13px 0; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; }.pc-finance aside article > i { width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--pc-accent) 26%, white); display: grid; place-items: center; font-style: normal; }.pc-finance aside article span { display: grid; gap: 3px; }.pc-finance aside article b, .pc-finance aside article strong { font-size: 8px; }.pc-finance aside article small { font-size: 6px; }

.pc-mobile { height: 100%; padding: 20px; display: flex; align-items: center; justify-content: space-around; gap: 20px; }.pc-phone { position: relative; width: 190px; height: 390px; border: 7px solid var(--pc-text); border-radius: 30px; background: #fff; padding: 15px; box-shadow: 0 20px 34px rgba(20,20,24,.16); }.pc-phone > header { display: flex; justify-content: space-between; }.pc-phone > header small { font-size: 7px; font-weight: 800; }.pc-phone > header i { width: 44px; height: 10px; margin-top: -9px; border-radius: 0 0 10px 10px; background: var(--pc-text); }.pc-phone main > small { display: block; margin-top: 24px; color: var(--pc-primary); font-size: 6px; font-weight: 850; }.pc-phone main h3 { margin: 6px 0 15px; font-size: 24px; letter-spacing: -.06em; }.pc-phone main section { position: relative; height: 145px; border-radius: 18px; background: var(--pc-primary); color: var(--pc-on-primary); padding: 14px; }.pc-phone main section small, .pc-phone main section b, .pc-phone main section span { display: block; }.pc-phone main section small { font-size: 6px; }.pc-phone main section b { margin-top: 28px; font-size: 18px; }.pc-phone main section span { font-size: 8px; }.pc-phone main section button { position: absolute; right: 11px; bottom: 11px; border: 0; border-radius: 999px; background: var(--pc-accent); color: var(--pc-on-accent); padding: 7px 10px; font-size: 7px; }.pc-phone main > b { display: block; margin-top: 14px; font-size: 9px; }.pc-phone main > div i { display: inline-block; width: 21px; height: 21px; margin: 7px 4px 0 0; border-radius: 7px; background: var(--pc-secondary); }.pc-phone main > div i:nth-child(-n+4) { background: var(--pc-accent); }.pc-phone > nav { position: absolute; right: 12px; bottom: 10px; left: 12px; border-radius: 12px; background: var(--pc-text); color: var(--pc-surface); padding: 9px; text-align: center; font-size: 9px; }.pc-mobile > aside { width: 190px; }.pc-mobile aside small { color: var(--pc-primary); font-size: 7px; font-weight: 850; }.pc-mobile aside h3 { margin: 10px 0; font-size: 28px; line-height: .93; letter-spacing: -.06em; }.pc-mobile aside p { color: color-mix(in srgb, var(--pc-text) 65%, transparent); font-size: 9px; line-height: 1.6; }

.pc-booking { height: 100%; padding: 22px; }.pc-booking > header { display: flex; align-items: center; justify-content: space-between; }.pc-booking header small { font-size: 7px; }.pc-booking header h3 { margin: 5px 0 0; font-size: 21px; }.pc-booking header span { border-radius: 999px; background: var(--pc-secondary); padding: 7px 9px; font-size: 7px; }.pc-booking > main { margin-top: 20px; display: grid; grid-template-columns: 1fr 135px; gap: 10px; }.pc-booking main > section, .pc-booking main > aside { min-height: 300px; border: 1px solid color-mix(in srgb, var(--pc-text) 13%, transparent); border-radius: 14px; background: #fff; padding: 14px; }.pc-booking section > b { font-size: 11px; }.pc-booking section > div { margin-top: 15px; display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }.pc-booking section small, .pc-booking section i { height: 26px; display: grid; place-items: center; font-size: 7px; font-style: normal; }.pc-booking section i { border-radius: 7px; }.pc-booking section i.is-active { background: var(--pc-primary); color: var(--pc-on-primary); }.pc-booking aside > small { font-size: 6px; font-weight: 850; }.pc-booking aside button { width: 100%; min-height: 35px; margin-top: 9px; border: 1px solid color-mix(in srgb, var(--pc-text) 15%, transparent); border-radius: 8px; background: #fff; font-size: 8px; }.pc-booking aside button.is-active { border-color: var(--pc-primary); color: var(--pc-primary); }.pc-booking aside button:last-child { margin-top: 26px; border-color: var(--pc-primary); background: var(--pc-primary); color: var(--pc-on-primary); }

.pc-landing { background: var(--pc-surface); }.pc-landing > main { position: relative; z-index: 2; width: 68%; padding: 54px 25px; }.pc-landing main h3 { font-size: 44px; }.pc-landing main p { max-width: 300px; font-size: 10px; line-height: 1.6; }.pc-landing main > div { margin-top: 20px; display: flex; gap: 7px; }.pc-landing main > div button:first-child, .pc-landing header button { background: var(--pc-primary); color: var(--pc-on-primary); }.pc-landing main > div button:last-child { border: 1px solid color-mix(in srgb, var(--pc-text) 20%, transparent); background: #fff; color: var(--pc-text); }.pc-landing > aside { position: absolute; right: -25px; top: 95px; width: 45%; height: 280px; border-radius: 24px 0 0 24px; background: var(--pc-secondary); padding: 25px; transform: rotate(-4deg); }.pc-landing aside article { border-radius: 14px; background: #fff; padding: 17px; }.pc-landing aside small { font-size: 6px; }.pc-landing aside b { display: block; margin: 8px 0 25px; font-size: 14px; }.pc-landing aside i { display: block; width: 90%; height: 12px; margin-top: 8px; border-radius: 4px; background: var(--pc-primary); }.pc-landing aside i:nth-of-type(2) { width: 64%; background: var(--pc-accent); }.pc-landing aside i:nth-of-type(3) { width: 76%; background: var(--pc-text); }
.pc-photo-campaign { background: var(--pc-text); color: #fff; }
.pc-photo-campaign > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: saturate(.84) contrast(1.05); }
.pc-photo-campaign:after { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--pc-primary) 84%, transparent) 0%, color-mix(in srgb, var(--pc-primary) 50%, transparent) 48%, transparent 78%), linear-gradient(0deg, rgba(0,0,0,.55), transparent 44%); content: ""; mix-blend-mode: multiply; }
.pc-photo-campaign > header, .pc-photo-campaign > footer, .pc-campaign > header, .pc-campaign > footer { position: relative; z-index: 2; padding: 17px 20px; display: flex; justify-content: space-between; font-size: 7px; font-weight: 800; }
.pc-photo-campaign > main, .pc-campaign > main { position: relative; z-index: 2; height: 335px; padding: 45px 24px; }
.pc-photo-campaign main h3, .pc-campaign main h3 { font-size: 48px; }
.pc-photo-campaign main h3 { text-shadow: 0 3px 22px rgba(0,0,0,.28); }
.pc-photo-campaign footer { border-top: 1px solid rgba(255,255,255,.38); background: rgba(0,0,0,.24); backdrop-filter: blur(10px); }
.pc-campaign { background: var(--pc-accent); color: var(--pc-on-accent); }
.pc-campaign main i { position: absolute; border-radius: 50%; background: var(--pc-primary); }.pc-campaign main i:first-of-type { right: 45px; top: 25px; width: 170px; height: 170px; }.pc-campaign main i:last-of-type { right: 130px; bottom: 10px; width: 105px; height: 105px; background: var(--pc-secondary); }.pc-campaign footer { border-top: 1px solid color-mix(in srgb, var(--pc-on-accent) 35%, transparent); }
.pc-editorial { background: var(--pc-surface); }.pc-editorial > header { height: 58px; border-bottom: 1px solid var(--pc-text); padding: 0 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 7px; }.pc-editorial > header b { font-size: 13px; }.pc-editorial > header span { justify-self: end; }.pc-editorial > main { height: 372px; display: grid; grid-template-columns: 1.2fr .8fr; }.pc-editorial main > article { padding: 26px 22px; }.pc-editorial article small { font-size: 7px; font-weight: 850; }.pc-editorial article h3 { margin: 18px 0; font: 700 37px/.9 Georgia,serif; letter-spacing: -.05em; }.pc-editorial article p { max-width: 290px; font-size: 9px; line-height: 1.6; }.pc-editorial article > b { display: block; margin-top: 30px; font-size: 7px; text-transform: uppercase; }.pc-editorial main > aside { position: relative; overflow: hidden; background: var(--pc-primary); color: var(--pc-on-primary); }.pc-editorial aside > i { position: absolute; left: -55px; top: 45px; width: 220px; height: 220px; border-radius: 50%; background: var(--pc-accent); }.pc-editorial aside > strong { position: absolute; right: 17px; bottom: 38px; font-size: 62px; }.pc-editorial aside > span { position: absolute; right: 17px; bottom: 20px; font-size: 7px; }

.pc-support { height: 100%; display: grid; grid-template-columns: 185px 1fr; background: #fff; }.pc-support > aside { border-right: 1px solid color-mix(in srgb, var(--pc-text) 13%, transparent); padding: 15px; }.pc-support aside > header, .pc-support main > header { display: flex; align-items: center; justify-content: space-between; }.pc-support aside header button, .pc-support main header button, .pc-support main footer button { border: 0; border-radius: 8px; background: var(--pc-primary); color: var(--pc-on-primary); padding: 7px 9px; font-size: 7px; }.pc-support aside article { margin-top: 10px; border-radius: 11px; padding: 10px 7px; display: grid; grid-template-columns: 27px 1fr auto; gap: 7px; align-items: center; }.pc-support aside article.is-active { background: color-mix(in srgb, var(--pc-secondary) 30%, white); }.pc-support aside article > i { width: 26px; height: 26px; border-radius: 8px; background: var(--pc-accent); color: var(--pc-on-accent); display: grid; place-items: center; font-size: 7px; font-style: normal; }.pc-support aside article span { display: grid; gap: 3px; }.pc-support aside article b { font-size: 8px; }.pc-support aside article small, .pc-support aside article em { font-size: 6px; font-style: normal; }.pc-support > main { display: grid; grid-template-rows: 58px 1fr 55px; }.pc-support main > header, .pc-support main > footer { padding: 0 15px; border-bottom: 1px solid color-mix(in srgb, var(--pc-text) 12%, transparent); }.pc-support main header > div { display: grid; gap: 3px; }.pc-support main header b { font-size: 10px; }.pc-support main header small { font-size: 7px; color: #26825e; }.pc-support main > section { padding: 25px 17px; }.pc-support main section p { width: 75%; border-radius: 12px 12px 12px 2px; background: color-mix(in srgb, var(--pc-secondary) 28%, white); padding: 11px; font-size: 8px; line-height: 1.5; }.pc-support main section p:last-child { margin-left: auto; border-radius: 12px 12px 2px 12px; background: var(--pc-primary); color: var(--pc-on-primary); }.pc-support main > footer { border-top: 1px solid color-mix(in srgb, var(--pc-text) 12%, transparent); border-bottom: 0; display: flex; align-items: center; justify-content: space-between; }.pc-support main footer span { color: color-mix(in srgb, var(--pc-text) 50%, transparent); font-size: 8px; }
.pc-admin .pc-metrics { margin-bottom: 12px; }.pc-admin main { border: 1px solid color-mix(in srgb, var(--pc-text) 13%, transparent); border-radius: 13px; background: #fff; overflow: hidden; }.pc-admin main nav { margin: 0; padding: 13px; align-items: center; }.pc-admin nav input { width: 95px; height: 28px; margin-left: auto; border: 1px solid color-mix(in srgb, var(--pc-text) 14%, transparent); border-radius: 7px; padding: 0 8px; font-size: 7px; }.pc-admin main > article { min-height: 48px; border-top: 1px solid color-mix(in srgb, var(--pc-text) 9%, transparent); padding: 8px 13px; display: grid; grid-template-columns: 27px 1fr 1fr auto 20px; align-items: center; gap: 8px; }.pc-admin main article > i { width: 26px; height: 26px; border-radius: 8px; background: var(--pc-accent); color: var(--pc-on-accent); display: grid; place-items: center; font-size: 7px; font-style: normal; }.pc-admin main article b, .pc-admin main article small, .pc-admin main article em, .pc-admin main article span { font-size: 7px; }.pc-admin main article em { border-radius: 999px; background: color-mix(in srgb, var(--pc-primary) 16%, white); color: var(--pc-primary); padding: 5px 7px; font-style: normal; font-weight: 800; }
.ip2-context-pagination { margin-top: 2px; border: 1px solid var(--ip-line); border-radius: 15px; background: #fff; padding: 9px; display: grid; grid-template-columns: 42px 1fr auto 42px; align-items: center; gap: 10px; }
.ip2-context-pagination > .ip2-button { width: 40px; min-height: 40px; padding: 0; }
.ip2-context-pagination > .ip2-button:disabled { cursor: not-allowed; opacity: .35; }
.ip2-context-pagination > span { color: var(--ip-muted); font-size: 10px; }
.ip2-context-pagination > span b { color: var(--ip-ink); }
.ip2-context-pagination > div { display: flex; gap: 4px; }
.ip2-context-pagination > div button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--ip-ink); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.ip2-context-pagination > div button.is-active { background: var(--ip-ink); color: #fff; }
.ip2-context-grid > .egt-preview-pro { min-height: 390px; margin-bottom: 18px; border-radius: 18px; }
.ip2-component-browser { margin-bottom: 14px; border: 1px solid var(--ip-line); border-radius: 16px; background: #fafafa; padding: 9px; display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr); gap: 12px; align-items: center; }
.ip2-component-current { padding: 3px 4px 3px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ip2-component-current > span { display: flex; flex-direction: column; }
.ip2-component-current small { color: var(--ip-muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.ip2-component-current b { margin-top: 3px; font-size: 15px; }
.ip2-component-current > div { display: flex; gap: 4px; }
.ip2-component-current .ip2-button { width: 34px; min-height: 34px; padding: 0; }
.ip2-component-current .ip2-button:first-child svg { transform: rotate(180deg); }
.ip2-free-components { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(125px, auto); gap: 4px; }
.ip2-free-components > .ip2-button { min-width: 0; border-color: transparent; background: transparent; padding-inline: 8px; }
.ip2-free-components > .ip2-button.is-active { background: #fff; color: var(--ip-ink); box-shadow: 0 2px 9px rgba(0,0,0,.08); }
.ip2-component-menu { z-index: 1200; width: min(620px, calc(100vw - 24px)); border: 1px solid var(--ip-line); border-radius: 18px; background: #fff; padding: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.2); }
.ip2-component-menu > header { padding: 10px 10px 14px; display: flex; align-items: center; justify-content: space-between; }
.ip2-component-menu > header > span { display: flex; flex-direction: column; }
.ip2-component-menu > header b { font-size: 14px; }
.ip2-component-menu > header small { margin-top: 3px; color: var(--ip-muted); font-size: 10px; }
.ip2-component-menu > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ip2-component-menu button { min-height: 43px; border: 0; border-radius: 10px; background: transparent; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; color: inherit; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.ip2-component-menu button:hover, .ip2-component-menu button.is-active { background: #f1f1f4; }
.ip2-component-menu button > span { display: flex; align-items: center; gap: 8px; }
.ip2-component-menu button i { color: #9898a2; font-size: 8px; font-style: normal; }
.ip2-component-menu button svg { width: 13px; color: #7162d9; }

.ip2-kit-canvas { height: 100%; background: #f7f7f8; color: var(--kit-ink); padding: 24px; }
.ip2-kit-canvas > header { height: 52px; padding: 0 4px; display: flex; align-items: flex-start; justify-content: space-between; }
.ip2-kit-canvas > header > span { display: flex; flex-direction: column; }
.ip2-kit-canvas > header small { font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.ip2-kit-canvas > header b { margin-top: 3px; font-size: 18px; letter-spacing: -.025em; }
.ip2-kit-canvas > section { height: calc(100% - 52px); border: 1px solid rgba(24,24,27,.12); border-radius: 16px; background: color-mix(in srgb, var(--kit-surface) 58%, white); display: grid; place-items: center; overflow: hidden; }
.ip2-kit-canvas .is-primary { border-color: var(--kit-primary); background: var(--kit-primary); color: var(--kit-on-primary); }
.kit-button-set { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.kit-button-set > span, .kit-card footer span, .kit-form > span, .kit-sheet footer span { min-height: 40px; border: 1px solid rgba(24,24,27,.16); border-radius: 9px; background: #fff; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 750; }
.kit-button-set .is-outline { border-color: var(--kit-primary); color: var(--kit-primary); }
.kit-button-set .is-ghost { border-color: transparent; background: transparent; }
.kit-button-set .is-icon { width: 40px; padding: 0; }
.kit-card, .kit-form, .kit-calendar, .kit-table, .kit-tabs, .kit-accordion, .kit-command, .kit-progress, .kit-chart { width: min(590px, calc(100% - 38px)); border: 1px solid rgba(24,24,27,.13); border-radius: 14px; background: #fff; padding: 19px; box-shadow: 0 12px 32px rgba(30,26,45,.08); }
.kit-card header { display: flex; align-items: center; gap: 10px; }
.kit-card header > i { width: 38px; height: 38px; border-radius: 9px; }
.kit-card header > span { display: flex; flex: 1; flex-direction: column; }
.kit-card header b, .kit-table header b { font-size: 13px; }
.kit-card header small, .kit-card p, .kit-form small { color: #71717a; font-size: 9px; }
.kit-card p { margin: 20px 0; font-size: 11px; line-height: 1.55; }
.kit-card footer { display: flex; justify-content: flex-end; gap: 8px; }
.kit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kit-form label { display: grid; gap: 6px; font-size: 9px; font-weight: 800; }
.kit-form input, .kit-form select, .kit-sheet input { height: 40px; border: 1px solid #d9d9df; border-radius: 9px; background: #fff; padding: 0 11px; color: #18181b; font: inherit; font-size: 11px; }
.kit-form .kit-check { grid-column: 1/3; display: flex; align-items: center; gap: 10px; }
.kit-check > i { width: 18px; height: 18px; border-radius: 5px; background: var(--kit-primary); color: var(--kit-on-primary); display: grid; place-items: center; font-size: 10px; font-style: normal; }
.kit-check > span { display: flex; flex-direction: column; }
.kit-form > span { grid-column: 2; }
.kit-alerts { width: min(560px, calc(100% - 38px)); display: grid; gap: 10px; }
.kit-alerts article { min-height: 70px; border: 1px solid color-mix(in srgb, var(--kit-primary) 35%, #d8d8de); border-radius: 12px; background: #fff; padding: 13px; display: flex; align-items: flex-start; gap: 11px; }
.kit-alerts article > svg { width: 17px; color: var(--kit-primary); }
.kit-alerts article > span { display: flex; flex-direction: column; }
.kit-alerts b { font-size: 11px; }.kit-alerts small { margin-top: 4px; color: #71717a; font-size: 9px; }
.kit-alerts .is-warning { border-color: var(--kit-accent); background: color-mix(in srgb, var(--kit-accent) 10%, white); }
.kit-table { padding: 0; overflow: hidden; }
.kit-table header { padding: 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e6e6ea; }
.kit-table header span { border: 1px solid #dddde2; border-radius: 7px; padding: 7px 10px; color: #85858e; font-size: 9px; }
.kit-table article { min-height: 55px; padding: 0 14px; display: grid; grid-template-columns: 28px 1.5fr 1fr 70px 20px; align-items: center; gap: 9px; border-bottom: 1px solid #eeeeF1; }
.kit-table article:last-child { border: 0; }.kit-table article > i { width: 24px; height: 24px; border-radius: 7px; }.kit-table article b { font-size: 10px; }.kit-table article small { color: #777780; font-size: 9px; }.kit-table article em { font-style: normal; }
.kit-calendar { width: 330px; }.kit-calendar header { display: flex; justify-content: space-between; align-items: center; }.kit-calendar header span { width: 28px; height: 28px; border: 1px solid #e1e1e5; border-radius: 7px; display: grid; place-items: center; }.kit-calendar header b { font-size: 12px; }.kit-calendar > div { margin-top: 14px; display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }.kit-calendar small,.kit-calendar i { height: 28px; display: grid; place-items: center; font-size: 8px; font-style: normal; }.kit-calendar i.is-selected { border-radius: 7px; background: var(--kit-primary); color: var(--kit-on-primary); }
.kit-dialog-scene, .kit-sheet { position: relative; width: 100%; height: 100%; }.kit-dialog-scene > div { position: absolute; inset: 0; background: rgba(20,20,24,.34); }.kit-dialog-scene article { position: absolute; left: 50%; top: 50%; width: min(390px, calc(100% - 38px)); transform: translate(-50%,-50%); border-radius: 14px; background: #fff; padding: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.2); }.kit-dialog-scene header,.kit-dialog-scene footer { display: flex; justify-content: space-between; align-items: center; }.kit-dialog-scene p { color: #71717a; font-size: 10px; }.kit-dialog-scene footer { justify-content: flex-end; gap: 8px; }.kit-dialog-scene footer span { padding: 9px 13px; border: 1px solid #dddde2; border-radius: 8px; font-size: 10px; }
.kit-dropdown, .kit-popover { position: relative; }.kit-dropdown > span,.kit-popover > span { min-width: 155px; min-height: 40px; border: 1px solid #d8d8dd; border-radius: 9px; background: #fff; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 750; }.kit-dropdown article,.kit-popover article { position: absolute; top: 48px; left: 0; width: 220px; border: 1px solid #dddde2; border-radius: 11px; background: #fff; padding: 6px; box-shadow: 0 18px 42px rgba(0,0,0,.15); }.kit-dropdown article div { min-height: 34px; border-radius: 7px; padding: 0 8px; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 7px; font-size: 9px; }.kit-dropdown article div:first-child { background: #f1f1f4; }.kit-dropdown svg { width: 13px; }.kit-dropdown .is-danger { color: #c53e3e; }.kit-dropdown small { color: #8a8a93; }
.kit-tabs nav { padding: 4px; border-radius: 10px; background: #f1f1f3; display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; }.kit-tabs nav span { min-height: 33px; border-radius: 7px; display: grid; place-items: center; font-size: 9px; }.kit-tabs nav .is-active { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); }.kit-tabs article { padding: 22px 4px 2px; }.kit-tabs article b { font-size: 13px; }.kit-tabs article p { color: #72727b; font-size: 10px; }.kit-tabs article div { display: grid; gap: 7px; }.kit-tabs article i { height: 7px; border-radius: 99px; background: var(--kit-primary); }
.kit-accordion { padding: 0 17px; }.kit-accordion article { border-bottom: 1px solid #e5e5e9; }.kit-accordion article:last-child { border: 0; }.kit-accordion header { min-height: 53px; display: flex; align-items: center; justify-content: space-between; }.kit-accordion header b { font-size: 11px; }.kit-accordion p { margin: -3px 34px 16px 0; color: #707079; font-size: 10px; line-height: 1.5; }
.kit-command { padding: 7px; }.kit-command header { min-height: 46px; border-bottom: 1px solid #e4e4e8; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 0 9px; color: #85858d; }.kit-command header svg { width: 15px; }.kit-command header span { font-size: 10px; }.kit-command > small { display: block; padding: 12px 9px 6px; color: #8c8c94; font-size: 8px; font-weight: 800; }.kit-command > div { min-height: 38px; border-radius: 8px; padding: 0 9px; display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 8px; font-size: 10px; }.kit-command > div.is-active { background: #f0f0f3; }.kit-command > div svg { width: 14px; }.kit-command > div small { color: #909098; }
.kit-toast-stack { position: relative; width: min(490px, calc(100% - 38px)); height: 175px; }.kit-toast-stack article { position: absolute; right: 0; width: 360px; min-height: 74px; border: 1px solid #dcdce1; border-radius: 12px; background: #fff; padding: 12px; display: grid; grid-template-columns: 28px 1fr 20px; align-items: start; gap: 9px; box-shadow: 0 15px 35px rgba(0,0,0,.12); }.kit-toast-stack article:first-child { top: 0; z-index: 2; }.kit-toast-stack article:last-child { top: 88px; right: 28px; }.kit-toast-stack article > i { width: 26px; height: 26px; border-radius: 8px; background: var(--kit-primary); color: var(--kit-on-primary); display: grid; place-items: center; font-style: normal; }.kit-toast-stack article > span { display: flex; flex-direction: column; }.kit-toast-stack b { font-size: 10px; }.kit-toast-stack small { margin-top: 4px; color: #74747d; font-size: 9px; }.kit-toast-stack em { color: #8a8a91; font-style: normal; }
.kit-badges { width: min(570px, calc(100% - 38px)); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }.kit-badges span { border: 1px solid #d8d8dd; border-radius: 99px; background: #fff; padding: 7px 11px; font-size: 9px; font-weight: 800; }.kit-badges .is-0,.kit-badges .is-6 { border-color: var(--kit-primary); background: var(--kit-primary); color: var(--kit-on-primary); }.kit-badges .is-3 { background: #e4f7ed; color: #20704b; }.kit-badges .is-4 { background: color-mix(in srgb,var(--kit-accent) 20%,white); }.kit-badges .is-5 { background: #feeaea; color: #a93030; }.kit-badges .is-7 { border-color: #d7ccff; background: #eee9ff; color: #6651ce; }
.kit-avatars { width: min(520px, calc(100% - 38px)); display: flex; align-items: center; justify-content: center; }.kit-avatars > span { width: 48px; height: 48px; margin-left: -8px; border: 3px solid #fff; border-radius: 50%; background: var(--kit-primary); color: var(--kit-on-primary); display: grid; place-items: center; font-size: 10px; font-weight: 800; }.kit-avatars > span:nth-child(2){background:var(--kit-accent);color:var(--kit-ink)}.kit-avatars > span:nth-child(3){background:var(--kit-muted)}.kit-avatars article { width: 100%; margin-left: 25px; border: 1px solid #dddde2; border-radius: 12px; background: #fff; padding: 12px; display: flex; justify-content: space-between; align-items: center; }.kit-avatars article > div { display: flex; align-items: center; gap: 9px; }.kit-avatars article > div > i { width: 35px; height: 35px; border-radius: 50%; background: var(--kit-primary); color: var(--kit-on-primary); display:grid;place-items:center;font-style:normal;font-size:9px}.kit-avatars article span { display:flex;flex-direction:column}.kit-avatars article b{font-size:10px}.kit-avatars article small{color:#74747d;font-size:8px}
.kit-settings,.kit-sliders { width: min(540px, calc(100% - 38px)); border: 1px solid #dddde2; border-radius: 14px; background: #fff; padding: 8px 17px; }.kit-settings article { min-height: 62px; border-bottom: 1px solid #ededf0; display: flex; align-items: center; justify-content: space-between; }.kit-settings article:last-child { border:0 }.kit-settings article > span { display:flex;flex-direction:column}.kit-settings b,.kit-sliders b{font-size:10px}.kit-settings small,.kit-sliders small{margin-top:3px;color:#777780;font-size:8px}.kit-settings article > i { width:34px;height:20px;border-radius:99px;background:#d8d8dd;padding:3px;display:flex;align-items:center}.kit-settings article > i em{width:14px;height:14px;border-radius:50%;background:#fff}.kit-settings article > i.is-on{background:var(--kit-primary);justify-content:flex-end}
.kit-sliders { display:grid;gap:22px;padding-block:22px}.kit-sliders label > span{display:flex;justify-content:space-between}.kit-sliders label > i{position:relative;height:5px;margin-top:10px;border-radius:99px;background:#e2e2e6;display:block}.kit-sliders label > i em{height:100%;border-radius:inherit;background:var(--kit-primary);display:block}.kit-sliders label > i b{position:absolute;top:50%;width:15px;height:15px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:var(--kit-primary);box-shadow:0 0 0 1px var(--kit-primary)}
.kit-progress header,.kit-chart header{display:flex;justify-content:space-between;align-items:center}.kit-progress header span{display:flex;flex-direction:column}.kit-progress header b{font-size:12px}.kit-progress header small{color:#777780;font-size:8px}.kit-progress header strong{font-size:18px}.kit-progress > i{height:8px;margin:16px 0;border-radius:99px;background:#e5e5e8;display:block}.kit-progress > i em{width:75%;height:100%;border-radius:inherit;background:var(--kit-primary);display:block}.kit-progress > span{min-height:34px;display:flex;align-items:center;gap:9px;font-size:9px}.kit-progress > span i{width:20px;height:20px;border:1px solid #dddde2;border-radius:50%;display:grid;place-items:center;font-style:normal}.kit-progress > span.is-done i{border-color:var(--kit-primary);background:var(--kit-primary);color:var(--kit-on-primary)}
.kit-skeleton{width:min(570px,calc(100% - 38px));display:grid;grid-template-columns:115px 1fr;gap:18px}.kit-skeleton aside,.kit-skeleton main>i,.kit-skeleton span{background:linear-gradient(90deg,#e6e6e9,#f4f4f5,#e6e6e9);border-radius:10px}.kit-skeleton aside{height:170px}.kit-skeleton main{display:grid;gap:12px}.kit-skeleton main>i{height:16px}.kit-skeleton main>i:nth-child(2){width:72%}.kit-skeleton main>i:nth-child(3){width:88%}.kit-skeleton main>div{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.kit-skeleton span{height:92px}
.kit-pagination{display:flex;align-items:center;gap:5px}.kit-pagination span,.kit-pagination i{min-width:38px;height:38px;border:1px solid #dddde2;border-radius:9px;background:#fff;padding:0 10px;display:grid;place-items:center;font-size:9px;font-style:normal}.kit-pagination i.is-active{border-color:var(--kit-primary);background:var(--kit-primary);color:var(--kit-on-primary)}
.kit-breadcrumb{width:min(570px,calc(100% - 38px))}.kit-breadcrumb nav{display:flex;align-items:center;gap:9px;color:#76767f;font-size:9px}.kit-breadcrumb nav i{font-style:normal}.kit-breadcrumb nav b{color:var(--kit-ink)}.kit-breadcrumb article{margin-top:20px;border:1px solid #dddde2;border-radius:14px;background:#fff;padding:22px}.kit-breadcrumb article small{font-size:8px;font-weight:800;letter-spacing:.12em}.kit-breadcrumb article b{display:block;margin-top:10px;font-size:22px}.kit-breadcrumb article p{color:#777780;font-size:9px}
.kit-tooltip-scene{text-align:center}.kit-tooltip-scene>span{width:42px;height:42px;margin:auto;border:1px solid #dddde2;border-radius:10px;background:#fff;display:grid;place-items:center}.kit-tooltip-scene>span svg{width:16px}.kit-tooltip-scene article{position:relative;margin:10px auto 22px;border-radius:7px;background:var(--kit-ink);color:#fff;padding:8px 11px;font-size:9px;font-weight:700}.kit-tooltip-scene article i{position:absolute;left:50%;top:-4px;width:8px;height:8px;transform:rotate(45deg);background:var(--kit-ink)}.kit-tooltip-scene>small{color:#777780;font-size:9px}
.kit-popover article{width:260px}.kit-popover article header{padding:9px;display:flex;flex-direction:column}.kit-popover article header b{font-size:10px}.kit-popover article header small{color:#777780;font-size:8px}.kit-popover article>div{min-height:44px;border-radius:8px;padding:0 8px;display:grid;grid-template-columns:24px 1fr 16px;align-items:center;gap:8px}.kit-popover article>div:hover{background:#f2f2f4}.kit-popover article>div>i{width:22px;height:22px;border-radius:6px}.kit-popover article>div span{display:flex;flex-direction:column}.kit-popover article>div b{font-size:9px}.kit-popover article>div small{color:#777780;font-size:8px}.kit-popover article>div em{font-style:normal}
.kit-sheet main{height:100%;padding:35px;background:color-mix(in srgb,var(--kit-surface) 55%,white)}.kit-sheet main b{font-size:20px}.kit-sheet main p{color:#777780;font-size:9px}.kit-sheet aside{position:absolute;right:0;top:0;width:min(340px,72%);height:100%;border-left:1px solid #dddde2;background:#fff;padding:20px;box-shadow:-18px 0 40px rgba(0,0,0,.1)}.kit-sheet aside header{display:flex;justify-content:space-between}.kit-sheet aside header>span{display:flex;flex-direction:column}.kit-sheet aside header b{font-size:13px}.kit-sheet aside header small{margin-top:3px;color:#777780;font-size:8px}.kit-sheet aside label{margin-top:25px;display:grid;gap:7px;font-size:9px;font-weight:800}.kit-sheet footer{position:absolute;left:20px;right:20px;bottom:20px}.kit-sheet footer span{width:100%}
.kit-sidebar{width:100%;height:100%;display:grid;grid-template-columns:190px 1fr}.kit-sidebar aside{padding:23px 16px;background:var(--kit-ink);color:#fff;display:flex;flex-direction:column;gap:5px}.kit-sidebar aside>b{margin:0 8px 24px;font-size:18px}.kit-sidebar aside>span{min-height:36px;border-radius:8px;padding:0 10px;display:flex;align-items:center;gap:9px;font-size:9px}.kit-sidebar aside>span.is-active{background:rgba(255,255,255,.15)}.kit-sidebar aside>span i{width:8px;height:8px;border:1px solid currentColor;border-radius:3px}.kit-sidebar footer{margin-top:auto;display:flex;align-items:center;gap:8px}.kit-sidebar footer i{width:26px;height:26px;border-radius:50%;background:var(--kit-primary);display:grid;place-items:center;font-size:8px;font-style:normal}.kit-sidebar footer small{font-size:8px}.kit-sidebar main{padding:28px;background:color-mix(in srgb,var(--kit-surface) 60%,white)}.kit-sidebar main>small{font-size:8px;font-weight:800;letter-spacing:.12em}.kit-sidebar main>b{display:block;margin-top:5px;font-size:21px}.kit-sidebar main>div{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.kit-sidebar main>div i{height:110px;border:1px solid rgba(0,0,0,.12);border-radius:11px;background:#fff}
.kit-chart header span{display:flex;flex-direction:column}.kit-chart header small{font-size:8px;font-weight:800;letter-spacing:.12em}.kit-chart header b{margin-top:4px;font-size:15px}.kit-chart>div{height:175px;margin-top:18px;display:flex;align-items:flex-end;gap:13px;border-bottom:1px solid #dddde2}.kit-chart>div>i{flex:1;border-radius:7px 7px 0 0;position:relative}.kit-chart>div small{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:8px}.kit-chart footer{margin-top:12px;display:flex;justify-content:space-between}.kit-chart footer span{display:flex;align-items:center;gap:5px;font-size:8px}.kit-chart footer i{width:7px;height:7px;border-radius:2px}

.ip2-example-tabs { margin-bottom: 18px; padding: 5px; border-radius: 14px; background: var(--ip-soft); display: grid; grid-template-columns: repeat(5, 1fr) minmax(170px, auto); gap: 4px; }
.ip2-example-tabs .ip2-button { border: 0; background: transparent; min-width: 0; }
.ip2-example-tabs .ip2-button.is-active { background: #fff; color: var(--ip-ink); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ip2-example-tabs .ip2-pro-examples { border-left: 1px solid #dddce2; border-radius: 0 10px 10px 0; }
.ip2-example-tabs.is-pro { grid-template-columns: repeat(4, 1fr); }
.ip2-preview-card { height: 420px; border: 1px solid var(--ip-line); border-radius: 18px; overflow: hidden; }
.ip2-preview-card > div { width: 100%; height: 100%; }
.ip2-preview-card.is-showing-states { box-shadow: inset 0 0 0 3px #6551dc; }
.ip2-preview-card.is-showing-states .ip2-button { box-shadow: 0 0 0 3px rgba(101,81,220,.2); }
.ip2-apply-controls { margin-top: 16px; padding: 16px; border: 1px solid var(--ip-line); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ip2-role-system { min-width: 0; flex: 1; }
.ip2-role-system > header { display: flex; justify-content: space-between; align-items: flex-end; }
.ip2-role-system > header > span { display: flex; flex-direction: column; }
.ip2-role-system > header small { color: var(--ip-muted); font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.ip2-role-system > header b { margin-top: 3px; font-size: 12px; }
.ip2-role-cards { margin-top: 11px; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 7px; }
.ip2-role-cards > span { position: relative; min-height: 66px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--token-color) 30%, #dedee3); border-radius: 11px; background: color-mix(in srgb, var(--token-color) 10%, white); padding: 10px 9px 8px 34px; display: flex; justify-content: center; flex-direction: column; }
.ip2-role-cards > span > i { position: absolute; left: 0; top: 0; bottom: 0; width: 25px; background: var(--token-color); color: color-mix(in srgb, var(--token-color) 10%, white); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; font-style: normal; }
.ip2-role-cards em { font-size: 7px; font-style: normal; font-weight: 850; }
.ip2-role-cards b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ip2-role-cards small { margin-top: 4px; color: var(--ip-muted); font-size: 8px; }
.ip2-preview-actions { display: flex; gap: 8px; }

.ip2-ui-example { display: grid; grid-template-columns: 185px 1fr; }
.ip2-ui-example > aside { padding: 30px 24px; display: flex; flex-direction: column; gap: 9px; }
.ip2-ui-example > aside b { margin-bottom: 32px; font-size: 24px; letter-spacing: -.04em; }
.ip2-ui-example > aside span { padding: 10px 12px; border-radius: 8px; font-size: 12px; }
.ip2-ui-example > aside span:first-of-type { background: rgba(255,255,255,.14); }
.ip2-ui-example > main { padding: 34px; }
.ip2-ui-example > main > header { display: flex; justify-content: space-between; align-items: center; }
.ip2-ui-example > main > header > span { display: flex; flex-direction: column; }
.ip2-ui-example > main > header small { font-size: 11px; opacity: .62; }
.ip2-ui-example > main > header b { font-size: 27px; letter-spacing: -.04em; }
.ip2-ui-grid { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); gap: 18px; }
.ip2-ui-grid > article,
.ip2-ui-grid > section { padding: 22px; border: 1px solid rgba(0,0,0,.12); border-radius: 14px; background: rgba(255,255,255,.42); }
.ip2-ui-grid article > header { display: flex; justify-content: space-between; }
.ip2-ui-grid article > header span { display: flex; flex-direction: column; }
.ip2-ui-grid article > header b { font-size: 14px; }
.ip2-ui-grid article > header small { margin-top: 4px; font-size: 10px; opacity: .62; }
.ip2-ui-grid article > header i { width: 34px; height: 19px; border-radius: 999px; }
.ip2-ui-grid label { display: grid; gap: 7px; margin-top: 22px; font-size: 10px; font-weight: 800; }
.ip2-ui-grid input { height: 42px; border: 1px solid rgba(0,0,0,.14); border-radius: 9px; background: rgba(255,255,255,.5); padding: 0 12px; color: inherit; font-size: 12px; }
.ip2-ui-grid article footer { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; }
.ip2-ui-grid > section { display: flex; align-items: flex-start; flex-direction: column; }
.ip2-ui-grid > section > b { margin-top: 32px; font-size: 20px; }
.ip2-ui-grid > section p { color: currentColor; opacity: .68; font-size: 11px; line-height: 1.5; }
.ip2-ui-grid > section .ip2-button { margin-top: auto; width: 100%; }

.ip2-brand-example,
.ip2-interior-example,
.ip2-editorial-example,
.ip2-data-example { position: relative; overflow: hidden; padding: 42px; }
.ip2-brand-example small { font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.ip2-brand-example strong { position: relative; z-index: 1; display: block; margin: 68px 0 40px; font-size: clamp(58px, 7vw, 96px); line-height: .82; letter-spacing: -.075em; }
.ip2-brand-example i { position: absolute; width: 330px; height: 330px; border-radius: 50%; right: 10%; top: -30px; mix-blend-mode: multiply; }
.ip2-brand-example em { position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -40px; bottom: -40px; mix-blend-mode: multiply; }
.ip2-interior-example:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: #d7c3a6; }
.ip2-interior-example .art { position: absolute; left: 13%; top: 13%; width: 28%; height: 36%; border: 14px solid #fff; box-shadow: 0 10px 28px rgba(0,0,0,.1); }
.ip2-interior-example .sofa { position: absolute; right: 10%; bottom: 18%; width: 48%; height: 28%; border-radius: 70px 70px 15px 15px; box-shadow: 0 14px 22px rgba(0,0,0,.12); }
.ip2-interior-example .rug { position: absolute; left: 19%; bottom: 4%; width: 61%; height: 17%; border-radius: 50%; }
.ip2-interior-example .table { position: absolute; left: 14%; bottom: 17%; width: 19%; height: 7%; border-radius: 50%; }
.ip2-interior-example > b { position: absolute; right: 28px; top: 28px; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 11px; }
.ip2-editorial-example small { font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.ip2-editorial-example strong { position: relative; z-index: 2; display: block; margin-top: 54px; font-size: clamp(52px, 6.5vw, 88px); line-height: .78; letter-spacing: -.075em; }
.ip2-editorial-example i { position: absolute; right: 10%; top: 12%; width: 29%; height: 60%; border-radius: 50% 50% 8px 8px; }
.ip2-editorial-example span { position: absolute; right: 10%; bottom: 8%; padding: 12px 16px; font-size: 11px; font-weight: 800; }
.ip2-data-example > header { display: flex; justify-content: space-between; align-items: flex-start; }
.ip2-data-example > header span { display: flex; flex-direction: column; gap: 6px; }
.ip2-data-example > header small { font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.ip2-data-example > header b { font-size: 27px; }
.ip2-data-example > header strong { font-size: 38px; }
.ip2-data-example > div { height: 280px; margin-top: 38px; display: flex; align-items: flex-end; gap: 17px; border-bottom: 1px solid rgba(0,0,0,.15); }
.ip2-data-example > div i { flex: 1; border-radius: 10px 10px 0 0; }
.ip2-data-example > footer { margin-top: 15px; display: flex; gap: 24px; }
.ip2-data-example > footer span { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; }
.ip2-data-example > footer i { width: 10px; height: 10px; border-radius: 3px; }

.ip2-packaging-example { display: flex; align-items: center; justify-content: center; gap: 58px; padding: 38px; }
.ip2-packaging-example article { position: relative; width: 230px; height: 330px; padding: 25px; border-radius: 10px 10px 25px 25px; box-shadow: 0 22px 35px rgba(0,0,0,.15); display: flex; flex-direction: column; overflow: hidden; }
.ip2-packaging-example article small { font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.ip2-packaging-example article strong { margin-top: auto; font-size: 27px; line-height: .95; }
.ip2-packaging-example article i { position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -35px; top: 60px; }
.ip2-social-example { position: relative; overflow: hidden; padding: 45px; }
.ip2-social-example small { font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.ip2-social-example strong { position: relative; z-index: 2; display: block; margin-top: 65px; font-size: clamp(62px, 7vw, 96px); line-height: .84; letter-spacing: -.07em; }
.ip2-social-example span { position: absolute; z-index: 2; left: 45px; bottom: 38px; padding: 11px 15px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.ip2-social-example i { position: absolute; right: -35px; top: -65px; width: 470px; height: 470px; border-radius: 50%; }
.ip2-presentation-example { padding: 44px; position: relative; overflow: hidden; }
.ip2-presentation-example > small { font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.ip2-presentation-example > strong { display: block; margin-top: 65px; font-size: clamp(54px, 6vw, 82px); line-height: .9; letter-spacing: -.065em; }
.ip2-presentation-example > div { position: absolute; right: 6%; top: 13%; width: 36%; height: 62%; display: flex; border-radius: 16px; overflow: hidden; }
.ip2-presentation-example > div i { flex: 1; }
.ip2-presentation-example > span { position: absolute; right: 6%; bottom: 8%; font-size: 11px; font-weight: 800; }

.ip2-inspect-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; }
.ip2-inspect-grid .ip2-card { min-height: 450px; }
.ip2-inspect-grid .ip2-card > header a { color: inherit; font-size: 11px; font-weight: 800; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.ip2-inspect-grid .ip2-segment { margin-top: 22px; grid-template-columns: repeat(3, 1fr); }
.ip2-vision-strip { height: 285px; margin-top: 18px; border-radius: 14px; overflow: hidden; display: flex; }
.ip2-vision-strip.is-mono { filter: grayscale(1); }
.ip2-vision-strip.is-protanopia { filter: sepia(.3) saturate(.7) hue-rotate(-22deg); }
.ip2-vision-strip span { flex: 1; min-width: 0; padding: 12px; display: flex; align-items: flex-end; }
.ip2-vision-strip b { font-size: 9px; writing-mode: vertical-rl; }
.ip2-pairs { margin-top: 18px; display: grid; gap: 8px; }
.ip2-pairs.is-full { max-height: 350px; overflow-y: auto; padding-right: 4px; }
.ip2-pairs article { min-height: 62px; padding: 10px 14px; border: 1px solid rgba(0,0,0,.1); border-radius: 11px; display: flex; align-items: center; justify-content: space-between; }
.ip2-pairs article > b { font-size: 25px; }
.ip2-pairs article > span { display: flex; align-items: flex-end; flex-direction: column; }
.ip2-pairs strong { font-size: 12px; }
.ip2-pairs small { font-size: 9px; }

.ip2-related { margin-top: 70px; }
.ip2-related h2 { margin: 10px 0 24px; font-size: clamp(36px, 4.7vw, 58px); line-height: 1; letter-spacing: -.06em; }
.ip2-related > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ip2-related a { overflow: hidden; border: 1px solid var(--ip-line); border-radius: 18px; background: #fff; color: inherit; text-decoration: none; padding-bottom: 18px; transition: transform .18s ease; }
.ip2-related a:hover { transform: translateY(-3px); }
.ip2-related a > span { height: 145px; margin-bottom: 16px; display: grid; place-items: center; font-size: 60px; font-weight: 800; }
.ip2-related a > b,
.ip2-related a > small { display: block; margin-inline: 18px; }
.ip2-related a > b { font-size: 17px; }
.ip2-related a > small { margin-top: 5px; color: var(--ip-muted); font-size: 12px; }

.ip2-seo { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--ip-line); display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.ip2-seo h2 { margin: 12px 0 22px; font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -.055em; }
.ip2-seo p { color: var(--ip-muted); font-size: 14px; line-height: 1.65; }
.ip2-seo details { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--ip-line); }
.ip2-seo summary { font-size: 14px; font-weight: 700; cursor: pointer; }
.ip2-seo details p { margin-bottom: 0; }

.ip2-root .mesh-overlay { position: fixed; z-index: 1001; inset: 0; background: rgba(22,22,26,.44); backdrop-filter: blur(5px); }
.ip2-dialog { position: fixed; z-index: 1002; left: 50%; top: 50%; width: min(560px, calc(100vw - 28px)); transform: translate(-50%, -50%); border: 1px solid var(--ip-line); border-radius: 21px; background: #fff; padding: 24px; box-shadow: 0 32px 90px rgba(0,0,0,.24); }
.ip2-dialog > header { display: flex; justify-content: space-between; gap: 20px; }
.ip2-dialog > header h2 { margin: 0; font-size: 26px; }
.ip2-dialog > header p { margin: 8px 0 0; color: var(--ip-muted); line-height: 1.5; }
.ip2-dialog > header .mesh-icon { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid var(--ip-line); border-radius: 11px; background: #fff; display: grid; place-items: center; }
.ip2-dialog-actions { margin-top: 22px; display: flex; gap: 9px; }
.ip2-dialog-actions a { min-height: 44px; padding: 0 17px; border-radius: 10px; background: var(--ip-ink); color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.ip2-pro-list { margin-top: 20px; display: grid; gap: 10px; }
.ip2-pro-list span { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.ip2-export-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ip2-export-grid .ip2-button { min-height: 94px; justify-content: flex-start; text-align: left; }
.ip2-export-grid .ip2-button > span { display: flex; flex-direction: column; }
.ip2-export-grid small { margin-top: 4px; color: var(--ip-muted); font-size: 10px; }
.ip2-toast { position: fixed; z-index: 1100; left: 50%; bottom: 24px; transform: translateX(-50%); border-radius: 999px; background: #18181b; color: #fff; padding: 12px 17px; box-shadow: 0 10px 28px rgba(0,0,0,.22); font-size: 12px; font-weight: 700; }

@media (max-width: 980px) {
  .ip2-summary { display: none; }
  .ip2-nav { grid-template-columns: 1fr auto; }
  .ip2-extract-top { grid-template-columns: 1fr; }
  .ip2-recipe-card ul { margin-top: 20px; grid-template-columns: repeat(3, 1fr); }
  .ip2-swatches { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
  .ip2-example-tabs { display: flex; overflow-x: auto; }
  .ip2-example-tabs .ip2-button { min-width: 120px; }
  .ip2-example-tabs .ip2-pro-examples { min-width: 170px; border-left: 0; }
  .ip2-component-browser { grid-template-columns: 1fr; }
  .ip2-context-toolbar { align-items: stretch; flex-direction: column; }
  .ip2-context-toolbar > .ip2-button { align-self: flex-end; }
  .ip2-context-grid { columns: 1; }
  .ip2-context-grid.is-inspiration-page { columns: 2; }
  .ip2-free-components { grid-template-columns: repeat(6, minmax(100px, 1fr)); overflow-x: auto; }
  .ip2-apply-controls { align-items: flex-start; flex-direction: column; }
  .ip2-preview-actions { align-self: flex-end; }
  .ip2-inspect-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ip2-root { overflow-x: hidden; padding-top: 30px; }
  .ip2-shell { width: min(1240px, calc(100% - 24px)); }
  .ip2-hero h1 { font-size: clamp(42px, 11vw, 62px); }
  .ip2-hero > i { max-width: 72%; }
  .ip2-nav { display: flex; align-items: stretch; flex-direction: column; gap: 8px; padding: 8px; }
  .ip2-tabs { width: 100%; min-width: 0; }
  .ip2-tabs .ip2-button { flex: 1; min-width: 0; padding-inline: 7px; }
  .ip2-actions { align-self: flex-end; }
  .ip2-extract,
  .ip2-apply,
  .ip2-inspect { padding: 22px 16px; }
  .ip2-section-head { align-items: center; }
  .ip2-section-head p { max-width: 270px; }
  .ip2-canvas-wrap { height: 280px; }
  .ip2-recipe-card ul { grid-template-columns: 1fr; }
  .ip2-palette-card > header { align-items: flex-start; flex-direction: column; }
  .ip2-swatches { display: flex; min-height: 270px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .ip2-swatches article { min-width: 165px; scroll-snap-align: start; }
  .ip2-swatches article > header .ip2-button { opacity: 1; transform: none; }
  .ip2-preview-card { height: 420px; }
  .ip2-context-toolbar { margin-top: 22px; }
  .ip2-context-grid.is-inspiration-page { columns: 1; }
  .ip2-context-tabs { margin-right: -16px; }
  .ip2-context-toolbar > .ip2-button { width: 100%; }
  .ip2-context-pagination { grid-template-columns: 42px 1fr 42px; }
  .ip2-context-pagination > div { display: none; }
  .ip2-context-pagination > span { text-align: center; }
  .ip2-context-card { border-radius: 18px; }
  .ip2-context-card > header { grid-template-columns: auto 1fr; }
  .ip2-context-card > header i { display: none; }
  .ip2-context-art { height: 390px; }
  .pc-shell, .pc-analytics { grid-template-columns: 56px 1fr; }
  .pc-shell > aside, .pc-analytics > aside { padding-inline: 8px; }
  .pc-shell > aside > span { padding-inline: 4px; font-size: 0; }
  .pc-shell > aside > span:after { font-size: 8px; content: "—"; }
  .pc-shell > main, .pc-analytics > main { padding: 14px; }
  .pc-settings { grid-template-columns: 1fr; }
  .pc-settings article:nth-child(2) { display: none; }
  .pc-mobile { padding: 14px; }
  .pc-mobile > aside { display: none; }
  .pc-checkout > main { grid-template-columns: 1fr; }
  .pc-checkout aside { display: none; }
  .pc-store > header nav, .pc-landing > header nav { display: none; }
  .pc-landing > main { width: 82%; padding-inline: 18px; }
  .pc-landing > aside { opacity: .42; }
  .pc-booking > main { grid-template-columns: 1fr; }
  .pc-booking main > aside { display: none; }
  .pc-editorial > header small, .pc-editorial > header span { display: none; }
  .pc-editorial > header { grid-template-columns: 1fr; }
  .pc-editorial > main { grid-template-columns: 1fr; }
  .pc-editorial main > aside { display: none; }
  .pc-support { grid-template-columns: 105px 1fr; }
  .pc-support aside article { grid-template-columns: 25px 1fr; }
  .pc-support aside article em { display: none; }
  .pc-admin .pc-metrics article:nth-child(3) { display: none; }
  .pc-admin .pc-metrics { grid-template-columns: 1fr 1fr; }
  .ip2-free-components { grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .ip2-component-current { border-bottom: 1px solid var(--ip-line); padding-bottom: 10px; }
  .ip2-component-menu > div { grid-template-columns: 1fr 1fr; }
  .ip2-kit-canvas { padding: 14px; }
  .kit-sidebar { grid-template-columns: 70px 1fr; }
  .kit-sidebar aside { padding-inline: 10px; }
  .kit-sidebar aside > b { font-size: 0; }
  .kit-sidebar aside > b:after { content: "G"; font-size: 18px; }
  .kit-sidebar aside > span { font-size: 0; justify-content: center; }
  .kit-sidebar footer small { display: none; }
  .ip2-ui-example { grid-template-columns: 64px 1fr; }
  .ip2-ui-example > aside { padding: 24px 12px; }
  .ip2-ui-example > aside b { font-size: 0; margin-bottom: 20px; }
  .ip2-ui-example > aside b:after { content: "A"; font-size: 23px; }
  .ip2-ui-example > aside span { width: 30px; height: 7px; padding: 0; font-size: 0; background: rgba(255,255,255,.22); }
  .ip2-ui-example > main { padding: 24px 16px; }
  .ip2-ui-grid { grid-template-columns: 1fr; margin-top: 22px; }
  .ip2-ui-grid > section { display: none; }
  .ip2-apply-controls > div:first-child > span { max-width: calc(100vw - 66px); overflow-x: auto; }
  .ip2-brand-example,
  .ip2-interior-example,
  .ip2-editorial-example,
  .ip2-data-example { padding: 25px; }
  .ip2-brand-example strong { margin-top: 80px; }
  .ip2-data-example > div { gap: 8px; }
  .ip2-related { margin-top: 54px; }
  .ip2-related > div { grid-template-columns: 1fr; }
  .ip2-related a { display: grid; grid-template-columns: 120px 1fr; grid-template-rows: 1fr 1fr; padding: 0; }
  .ip2-related a > span { grid-row: 1/3; height: 110px; margin: 0; }
  .ip2-related a > b,
  .ip2-related a > small { margin-left: 16px; }
  .ip2-related a > b { align-self: end; }
  .ip2-related a > small { align-self: start; }
  .ip2-seo { grid-template-columns: 1fr; gap: 30px; margin-top: 54px; padding-top: 44px; }
}

@media (max-width: 480px) {
  .ip2-root { padding-top: 22px; }
  .ip2-hero p { font-size: 16px; }
  .ip2-tabs svg { display: none; }
  .ip2-section-head h2 { font-size: 28px; }
  .ip2-section-head > .ip2-button { width: 42px; padding: 0; font-size: 0; }
  .ip2-image-card { padding: 14px; }
  .ip2-canvas-wrap { height: 230px; }
  .ip2-image-card > footer { flex-direction: column; }
  .ip2-counts { grid-template-columns: repeat(3, 1fr); }
  .ip2-counts .ip2-more-colors { grid-column: 1/4; }
  .ip2-palette-card > header > span { width: 100%; }
  .ip2-palette-card > header .ip2-button { flex: 1; }
  .ip2-preview-card { height: 390px; }
  .ip2-ui-example > main > header b { font-size: 21px; }
  .ip2-ui-grid > article { padding: 15px; }
  .ip2-preview-actions { width: 100%; flex-direction: column; }
  .ip2-preview-actions .ip2-button { width: 100%; }
  .ip2-free-components { grid-template-columns: 1fr 1fr; }
  .ip2-free-components > .ip2-button:last-child { grid-column: 1/3; }
  .ip2-component-menu > div { grid-template-columns: 1fr; max-height: 54vh; overflow-y: auto; }
  .ip2-preview-count { min-width: 78px; padding-left: 10px; }
  .kit-form { grid-template-columns: 1fr; }
  .kit-form .kit-check, .kit-form > span { grid-column: 1; }
  .kit-table article { grid-template-columns: 24px 1fr 62px 18px; }
  .kit-table article > small { display: none; }
  .kit-avatars article { margin-left: 10px; }
  .kit-avatars > span:nth-child(3), .kit-avatars > span:nth-child(4) { display: none; }
  .kit-pagination span { display: none; }
  .ip2-inspect-grid .ip2-card { min-height: 390px; padding: 15px; }
  .ip2-inspect-grid .ip2-segment { display: flex; overflow-x: auto; }
  .ip2-inspect-grid .ip2-segment .ip2-button { min-width: 110px; }
  .ip2-export-grid { grid-template-columns: 1fr; }
  .ip2-dialog-actions { flex-direction: column; }
  .ip2-dialog-actions a,
  .ip2-dialog-actions .ip2-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ip2-root * { transition: none !important; }
}

.egt-root .egt-preview-pro {display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:390px;margin:0 0 24px;padding:38px 28px;break-inside:avoid;border:1px solid #e4e4e7;border-radius:24px;background:#fff;color:#17171b;text-align:center;text-decoration:none;cursor:pointer;font-family:inherit}
.egt-preview-pro .egt-preview-pro-eyebrow {display:inline-flex;margin-bottom:18px;padding:7px 10px;border:1px solid #17171b1a;border-radius:999px;background:#f7f5f1;color:#67636e;font-size:9px;font-weight:800;letter-spacing:.14em}
.egt-root .egt-preview-pro>strong {font-size:clamp(34px,3.6vw,48px);font-weight:590;letter-spacing:-.065em;line-height:1}
.egt-root .egt-preview-pro>p {max-width:400px;margin:17px auto 24px;color:#67636e;font-size:14px;line-height:1.55}
.egt-root .egt-preview-pro>b {display:inline-flex;flex:none;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 22px;border-radius:999px;background:#17171b;color:#fff;font-size:14px;font-weight:750;white-space:nowrap;box-shadow:0 10px 24px #17171b2e}
.egt-root .egt-preview-pro>b>i,.egt-root .egt-preview-pro>b>span {position:static;display:inline-flex;flex:none;margin:0;line-height:1}
.egt-root .egt-preview-pro>b>i {font-size:22px;font-style:normal;color:#f7a928}
@media(max-width:560px){.egt-root .egt-preview-pro{min-height:340px;padding:32px 19px}.egt-root .egt-preview-pro>b{font-size:12px;padding:0 17px}}