/* LYTARIA-HOA-WELCOME-COMPOSITION: the public Welcome page (front-page.php).
 * GENERATED by hub/tests/welcome_composition/studio_css.py -- do not edit by hand.
 * The first section is the approved Studio design: every rule of
 * studio/api/lytaria_studio/static/css/design-studio.css that styles Studio's
 * standalone Welcome preview, verbatim and in source order. The WordPress-only
 * additions come last and are the only intended differences. */

/* Studio Welcome preview rules */
:root { --ds-bg: #040d20; --ds-panel: #031024; --ds-text: #f7f7fb; --ds-muted: rgba(239, 243, 255, 0.72); --ds-soft: rgba(239, 243, 255, 0.55); --ds-accent: #7655f5; --ds-accent-2: #5535e7; --ds-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ds-header-height: 64px; --ds-hero-height: clamp(480px, 63vh, 600px); --ds-footer-height: 48px; --ds-hero-image-x: 25%; --ds-hero-image-y: 50%; --ds-skin-primary: #7a4a32; --ds-skin-secondary: #f2dfc2; --ds-skin-accent: #c87543; --ds-skin-background: #fbf5ec; --ds-skin-background-alt: #f5e8d6; --ds-skin-surface: #fffdfc; --ds-skin-surface-alt: #fcf1e3; --ds-skin-text: #3f3028; --ds-skin-text-soft: #7a675c; --ds-skin-text-inverse: #fff; --ds-skin-border: #e6d3bc; --ds-skin-gradient-start: #efbf88; --ds-skin-gradient-end: #c87543; --ds-skin-heading-font: Georgia, "Times New Roman", serif; --ds-skin-body-font: Arial, "Liberation Sans", sans-serif; --ds-skin-heading-weight: 650; --ds-skin-body-weight: 430; --ds-skin-heading-line-height: 1.2; --ds-skin-body-line-height: 1.56; --ds-skin-hero-overlay: linear-gradient( 90deg, rgba(84, 45, 29, 0.68), rgba(84, 45, 29, 0.1) ); --ds-skin-image-filter: saturate(1.05) contrast(1) brightness(0.99); --ds-skin-card-background: #fffdfc; --ds-skin-card-border: 1px solid #e7d1b7; --ds-skin-card-radius: 18px; --ds-skin-card-shadow: 0 10px 26px rgba(96, 60, 38, 0.1); --ds-skin-navigation-background: rgba(255, 253, 250, 0.97); --ds-skin-navigation-border: 1px solid rgba(122, 74, 50, 0.12); --ds-skin-navigation-shadow: 0 6px 18px rgba(89, 55, 35, 0.07); --ds-skin-navigation-text: #654b3d; --ds-skin-icon-foreground: #a25d38; --ds-skin-icon-background: #f7e3ca; --ds-skin-icon-border: 1px solid #e6c39e; --ds-skin-icon-radius: 50%; --ds-skin-region-background: #fffdfc; --ds-skin-region-background-alt: #fcf1e3; --ds-skin-region-border: 1px solid #e7d1b7; --ds-skin-region-radius: 18px; --ds-skin-region-shadow: 0 10px 26px rgba(96, 60, 38, 0.08); --ds-skin-region-heading: #4a352a; --ds-skin-region-body: #756055; }
.design-studio { position: fixed; inset: 0; z-index: 70000; display: grid; grid-template-columns: minmax(390px, 37.2vw) minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; color: var(--ds-text); background: var(--ds-bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.design-studio[data-skin-key="modern"] { --ds-skin-card-radius:7px;--ds-skin-region-radius:7px;--ds-skin-icon-radius:8px;--ds-skin-card-shadow:0 3px 12px rgba(20,49,65,.07); }
.design-studio[data-skin-key="warm"] { --ds-skin-card-radius:18px;--ds-skin-region-radius:18px;--ds-skin-icon-radius:50%;--ds-skin-card-shadow:0 10px 26px rgba(88,56,36,.12); }
.design-studio[data-skin-key="classic"] { --ds-skin-card-radius:2px;--ds-skin-region-radius:2px;--ds-skin-icon-radius:2px;--ds-skin-card-shadow:none; }
.design-studio[data-skin-key="vibrant"] { --ds-skin-card-radius:4px;--ds-skin-region-radius:4px;--ds-skin-icon-radius:50%;--ds-skin-card-shadow:0 8px 20px rgba(33,43,69,.13); }
.design-studio__canvas { position: relative; min-width: 0; min-height: 0; box-sizing: border-box; padding: 7px; overflow: hidden; background: #fff; }
.design-studio__welcome-frame { position: relative; width: 100%; height: auto; min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: var(--ds-header-height) var(--ds-hero-height) var(--ds-footer-height); background: #fff; border: 1px solid rgba(19, 43, 34, 0.13); border-radius: 10px; box-shadow: 0 12px 34px rgba(15, 31, 25, 0.12); }
.design-studio__site-header { position: relative; z-index: 4; min-width: 0; display: flex; align-items: center; padding: 0 clamp(30px, 3.2vw, 58px); background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid rgba(20, 44, 35, 0.13); color: #153f2c; pointer-events: none; }
.design-studio__site-header-name { overflow: hidden; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 1.8vw, 34px); font-weight: 700; line-height: 1; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateY(-6px); transition: opacity 0.22s ease, transform 0.22s ease; }
.design-studio__welcome-hero { position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; background: #cfd9dd; }
.design-studio__canvas-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--ds-hero-image-x) var(--ds-hero-image-y); transition: opacity 0.72s var(--ds-ease), transform 0.82s var(--ds-ease); }
.design-studio__canvas-image--base { opacity: 1; transform: scale(1); }
.design-studio__hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(1, 16, 14, 0.88) 0%, rgba(1, 16, 14, 0.74) 18%, rgba(1, 16, 14, 0.48) 38%, rgba(1, 16, 14, 0.22) 55%, rgba(1, 16, 14, 0.06) 66%, rgba(1, 16, 14, 0) 72% ); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
.design-studio__hero-content { position: absolute; top: 15%; left: clamp(42px, 4vw, 56px); z-index: 2; width: min(40%, 520px); margin: 0; padding: 0; border: 0; background: none; box-shadow: none; opacity: 0; transform: none; pointer-events: none; transition: opacity 0.22s ease; }
.design-studio__hero-name { position: static; width: 75%; max-width: none; margin: 0; color: #fff; font-family: Arial, "Liberation Sans", "Nimbus Sans L", Helvetica, sans-serif; font-size: clamp(22px, 2.2vw, 42px); font-weight: 700; line-height: 1.03; letter-spacing: -0.035em; text-shadow: 0 3px 20px rgba(0, 0, 0, 0.52); opacity: 1; transform: none; }
.design-studio__hero-intro { display: block; margin-bottom: 0.16em; font-size: 0.6em; line-height: 1.12; letter-spacing: -0.02em; }
.design-studio__hero-community { display: block; }
.design-studio__hero-message { display: none; }
.design-studio.is-scene-6 .design-studio__hero-message, .design-studio.is-scene-7 .design-studio__hero-message, .design-studio.is-standalone-preview .design-studio__hero-message { display: block; max-width: 365px; margin: 14px 0 0; color: rgba(255, 255, 255, 0.96); font-family: Arial, "Liberation Sans", "Nimbus Sans L", Helvetica, sans-serif; font-size: clamp(14px, 1.03vw, 18px); font-weight: 400; line-height: 1.5; letter-spacing: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); white-space: pre-line; }
.design-studio.is-skinned .design-studio__hero-name { font-family: var(--ds-skin-heading-font); }
.design-studio.is-skinned .design-studio__hero-message { font-family: var(--ds-skin-body-font); }
.design-studio.is-canvas-confirmed .design-studio__site-header-name, .design-studio.is-canvas-named .design-studio__site-header-name { opacity: 1; transform: none; transition: opacity 0.55s var(--ds-ease), transform 0.55s var(--ds-ease); }
.design-studio.is-canvas-confirmed .design-studio__hero-content, .design-studio.is-canvas-named .design-studio__hero-content { opacity: 1; transform: none; transition: opacity 0.55s var(--ds-ease); }
.design-studio.is-canvas-confirmed .design-studio__hero-shade, .design-studio.is-canvas-named .design-studio__hero-shade { opacity: 1; transition: opacity 0.55s var(--ds-ease); }
.design-studio__page-growth { display: none; min-height: 0; overflow: hidden; background: #f8f6f0; }
.design-studio:is(.is-scene-5, .is-scene-6) .design-studio__canvas { overflow: hidden; }
.design-studio.is-canvas-expanded .design-studio__welcome-frame { height: 100%; min-height: 0; grid-template-rows: var(--ds-header-height) var(--ds-hero-height) auto var(--ds-footer-height); }
.design-studio.is-canvas-expanded .design-studio__page-growth { box-sizing: border-box; padding: 9px 11px 8px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; background: #f8f6f0; }
.design-studio__welcome-card-strip { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.design-studio__welcome-card { appearance: none; position: relative; box-sizing: border-box; min-width: 0; min-height: 72px; padding: 8px 9px; display: grid; grid-template-columns: 31px minmax(0, 1fr) 12px; align-items: center; gap: 8px; border: 1px solid #ded9cd; border-radius: 9px; background: rgba(255, 254, 250, 0.96); color: #193328; text-align: left; box-shadow: 0 3px 10px rgba(32, 45, 38, 0.045); cursor: pointer; transition: border-color 0.2s var(--ds-ease), background 0.2s var(--ds-ease), box-shadow 0.2s var(--ds-ease), transform 0.2s var(--ds-ease); }
.design-studio__welcome-card[hidden] { display: none !important; }
.design-studio__welcome-card:hover { border-color: #b7c3b9; background: #fff; transform: translateY(-1px); }
.design-studio__welcome-card:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-accent) 52%, white); outline-offset: 2px; }
.design-studio__welcome-card.is-active { border-color: #5f806d; background: #fffef9; box-shadow: 0 0 0 1px rgba(45, 92, 66, 0.12), 0 5px 14px rgba(32, 55, 42, 0.07); }
.design-studio__welcome-card-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #d6e2d9; border-radius: 50%; background: #eaf2ec; color: #276647; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 800; }
.design-studio__welcome-card-copy, .design-studio__welcome-card-copy strong, .design-studio__welcome-card-copy small, .design-studio__welcome-card-copy em { min-width: 0; display: block; }
.design-studio__welcome-card-copy strong { overflow: hidden; color: #193c2c; font-family: Georgia, "Times New Roman", serif; font-size: clamp(12px, 0.82vw, 15px); line-height: 1.14; text-overflow: ellipsis; white-space: nowrap; }
.design-studio__welcome-card-copy small { margin-top: 3px; overflow: hidden; color: #6e786f; font-size: clamp(8px, 0.56vw, 10px); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.design-studio__welcome-card-copy em { width: max-content; max-width: 100%; margin-top: 4px; padding: 2px 5px; overflow: hidden; border-radius: 999px; background: #e9f4ec; color: #2c6a4b; font-size: 7px; font-style: normal; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.design-studio__welcome-card-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: #60736a; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ds-ease); }
.design-studio__welcome-card.is-active .design-studio__welcome-card-chevron { transform: translateY(2px) rotate(225deg); }
.design-studio__welcome-card-details { box-sizing: border-box; min-width: 0; min-height: 64px; padding: 8px 12px; border: 1px solid #e2ddd2; border-radius: 8px; background: rgba(255, 254, 250, 0.76); }
.design-studio__welcome-card-detail { min-width: 0; color: #354b40; }
.design-studio__welcome-card-detail[hidden] { display: none !important; }
.design-studio__welcome-card-detail.is-entering { animation: dsCardDetailEnter 0.28s var(--ds-ease) both; }
.design-studio__welcome-card-detail > p { margin: 0; color: #647269; font-size: clamp(8px, 0.58vw, 10px); line-height: 1.3; }
.design-studio__glance-grid { margin-top: 7px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.design-studio__glance-grid > span { min-width: 0; padding: 5px 7px; display: flex; align-items: center; gap: 6px; border-radius: 6px; background: #f0f4f1; }
.design-studio__glance-grid i { flex: 0 0 auto; color: #28704e; font-size: 10px; font-style: normal; }
.design-studio__glance-grid strong { min-width: 0; overflow: hidden; color: #365347; font-size: clamp(7px, 0.5vw, 9px); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.design-studio__preview-pills { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.design-studio__preview-pills span { padding: 4px 7px; border-radius: 999px; background: #edf3ee; color: #405b4e; font-size: 8px; font-weight: 700; }
.design-studio__preview-rows { margin-top: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.design-studio__preview-rows > span { min-width: 0; padding: 4px 7px; border-left: 2px solid #d7e2da; }
.design-studio__preview-rows strong, .design-studio__preview-rows small { display: block; }
.design-studio__preview-rows strong { overflow: hidden; color: #355044; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.design-studio__preview-rows small { margin-top: 1px; overflow: hidden; color: #7b867f; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.design-studio__community-line { min-width: 0; min-height: 55px; padding: 6px 11px 0; display: grid; grid-template-columns: 27px minmax(180px, 0.8fr) minmax(240px, 1.25fr); align-items: center; gap: 9px; border-top: 1px solid #ddd8ce; color: #233d31; }
.design-studio__community-line[hidden] { display: none !important; }
.design-studio__community-line-icon { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #d6e2d9; border-radius: 50%; background: #eaf2ec; color: #276647; font-family: Georgia, "Times New Roman", serif; font-size: 12px; font-weight: 800; }
.design-studio__community-line-copy { min-width: 0; }
.design-studio__community-line-copy h3, .design-studio__community-line-copy p { margin: 0; }
.design-studio__community-line-copy h3 { color: #183d2c; font-family: Georgia, "Times New Roman", serif; font-size: clamp(12px, 0.78vw, 14px); line-height: 1.16; }
.design-studio__community-line-copy p { margin-top: 2px; overflow: hidden; color: #69766f; font-size: clamp(7px, 0.5vw, 9px); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.design-studio__community-line-images { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.design-studio__community-line-images span { min-height: 32px; border-radius: 6px; background: linear-gradient(135deg, rgba(9, 66, 45, 0.1), rgba(118, 85, 245, 0.12)), linear-gradient(160deg, #c9dfcf, #edf4ef); }
.design-studio__hero-message { overflow: hidden; }
.design-studio.is-scene-6.is-skinned .design-studio__welcome-frame { background: var(--ds-skin-background); border-color: var(--ds-skin-border); }
.design-studio.is-scene-6.is-skinned .design-studio__site-header { background: var(--ds-skin-navigation-background); border-bottom: var(--ds-skin-navigation-border); color: var(--ds-skin-navigation-text); box-shadow: var(--ds-skin-navigation-shadow); }
.design-studio.is-scene-6.is-skinned .design-studio__site-header-name { color: var(--ds-skin-navigation-text); font-family: var(--ds-skin-heading-font); font-weight: var(--ds-skin-heading-weight); }
.design-studio.is-scene-6.is-skinned .design-studio__canvas-image { filter: var(--ds-skin-image-filter); }
.design-studio.is-scene-6.is-skinned .design-studio__hero-shade { background: var(--ds-skin-hero-overlay); }
.design-studio.is-scene-6.is-skinned .design-studio__page-growth { background: var(--ds-skin-background-alt); }
.design-studio.is-scene-6.is-skinned .design-studio__welcome-card { border: var(--ds-skin-card-border); border-radius: min(var(--ds-skin-card-radius), 12px); background: var(--ds-skin-card-background); color: var(--ds-skin-text); box-shadow: var(--ds-skin-card-shadow); font-family: var(--ds-skin-body-font); }
.design-studio.is-scene-6.is-skinned .design-studio__welcome-card.is-active { border-color: var(--ds-skin-primary); background: var(--ds-skin-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-skin-primary) 18%, transparent), var(--ds-skin-card-shadow); }
.design-studio.is-scene-6.is-skinned .design-studio__welcome-card-copy strong, .design-studio.is-scene-6.is-skinned .design-studio__community-line-copy h3, .design-studio.is-scene-6.is-skinned .design-studio__glance-grid strong, .design-studio.is-scene-6.is-skinned .design-studio__preview-rows strong { color: var(--ds-skin-region-heading); font-family: var(--ds-skin-heading-font); font-weight: var(--ds-skin-heading-weight); line-height: var(--ds-skin-heading-line-height); }
.design-studio.is-scene-6.is-skinned .design-studio__welcome-card-copy small, .design-studio.is-scene-6.is-skinned .design-studio__welcome-card-detail, .design-studio.is-scene-6.is-skinned .design-studio__welcome-card-detail p, .design-studio.is-scene-6.is-skinned .design-studio__community-line-copy p, .design-studio.is-scene-6.is-skinned .design-studio__preview-rows small { color: var(--ds-skin-region-body); font-family: var(--ds-skin-body-font); }
.design-studio.is-scene-6.is-skinned .design-studio__welcome-card-icon, .design-studio.is-scene-6.is-skinned .design-studio__community-line-icon { border: var(--ds-skin-icon-border); border-radius: var(--ds-skin-icon-radius); background: var(--ds-skin-icon-background); color: var(--ds-skin-icon-foreground); }
.design-studio.is-scene-6.is-skinned .design-studio__welcome-card-copy em { background: var(--ds-skin-surface-alt); color: var(--ds-skin-primary); }
.design-studio.is-scene-6.is-skinned .design-studio__welcome-card-details { border: var(--ds-skin-region-border); border-radius: min(var(--ds-skin-region-radius), 10px); background: var(--ds-skin-region-background); color: var(--ds-skin-text); box-shadow: var(--ds-skin-region-shadow); font-family: var(--ds-skin-body-font); }
.design-studio.is-scene-6.is-skinned .design-studio__glance-grid > span, .design-studio.is-scene-6.is-skinned .design-studio__preview-pills span { background: var(--ds-skin-region-background-alt); color: var(--ds-skin-region-body); }
.design-studio.is-scene-6.is-skinned .design-studio__glance-grid i { color: var(--ds-skin-icon-foreground); }
.design-studio.is-scene-6.is-skinned .design-studio__preview-rows > span { border-left-color: var(--ds-skin-border); }
.design-studio.is-scene-6.is-skinned .design-studio__community-line { border-top-color: var(--ds-skin-border); color: var(--ds-skin-text); font-family: var(--ds-skin-body-font); }
.design-studio.is-scene-6.is-skinned .design-studio__community-line-images span { border-radius: var(--ds-skin-card-radius); background: linear-gradient( 135deg, color-mix(in srgb, var(--ds-skin-primary) 62%, white), color-mix(in srgb, var(--ds-skin-accent) 46%, white) ); }
.design-studio.is-scene-6.is-skinned .design-studio__site-footer { background: linear-gradient( 110deg, var(--ds-skin-gradient-start), var(--ds-skin-gradient-end) ); color: var(--ds-skin-text-inverse); font-family: var(--ds-skin-body-font); }
.design-studio.is-scene-6 .design-studio__site-header, .design-studio.is-scene-6 .design-studio__site-header-name, .design-studio.is-scene-6 .design-studio__canvas-image, .design-studio.is-scene-6 .design-studio__hero-shade, .design-studio.is-scene-6 .design-studio__hero-name, .design-studio.is-scene-6 .design-studio__hero-message, .design-studio.is-scene-6 .design-studio__page-growth, .design-studio.is-scene-6 .design-studio__welcome-card, .design-studio.is-scene-6 .design-studio__welcome-card-icon, .design-studio.is-scene-6 .design-studio__welcome-card-details, .design-studio.is-scene-6 .design-studio__community-line, .design-studio.is-scene-6 .design-studio__community-line-icon, .design-studio.is-scene-6 .design-studio__glance-grid > span, .design-studio.is-scene-6 .design-studio__preview-pills span, .design-studio.is-scene-6 .design-studio__site-footer { transition: color 0.42s var(--ds-ease), background 0.42s var(--ds-ease), border-color 0.42s var(--ds-ease), box-shadow 0.42s var(--ds-ease), filter 0.42s var(--ds-ease); }
.design-studio__site-footer { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(24px, 2.8vw, 48px); background: linear-gradient(100deg, #063d27, #0d5134); color: #fff; font-size: clamp(11px, 0.85vw, 14px); white-space: nowrap; }
.design-studio__copyright { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.design-studio__footer-links { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.design-studio__footer-links i { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.65); }
@media (max-height: 860px) and (min-width: 1101px) {
  :root { --ds-hero-height: clamp(360px, 57vh, 490px); }
}
@media (max-width: 1280px) {
  .design-studio__hero-content { width: min(42%, 470px); }
  .design-studio__hero-name { font-size: clamp(36px, 3.05vw, 56px); }
}
@media (max-width: 1100px) {
  :root { --ds-header-height: 70px; --ds-hero-height: clamp(360px, 55vh, 520px); --ds-footer-height: 54px; }
  .design-studio { position: relative; min-height: 100vh; grid-template-columns: 1fr; grid-template-rows: auto minmax(620px, 72vh); }
  .design-studio__canvas { min-height: 620px; }
  .design-studio__site-header { padding: 0 28px; }
  .design-studio__hero-content { left: 28px; width: min(48%, 430px); }
  .design-studio__hero-name { font-size: clamp(34px, 5vw, 52px); }
  .design-studio__site-footer { padding: 0 20px; }
  .design-studio__footer-links { gap: 10px; }
  .design-studio__welcome-card-strip { grid-template-columns: 1fr; }
  .design-studio:is(.is-scene-5, .is-scene-6) .design-studio__canvas { overflow: visible; }
  .design-studio.is-canvas-expanded .design-studio__welcome-frame { height: auto; }
  .design-studio.is-canvas-expanded .design-studio__page-growth { overflow: visible; }
  .design-studio__welcome-card { min-height: 62px; }
  .design-studio__community-line { grid-template-columns: 27px minmax(0, 1fr); }
  .design-studio__community-line-images { grid-column: 1 / -1; margin-top: 4px; }
}
.design-studio.is-canvas-expanded .design-studio__welcome-frame { height: auto; min-height: 100%; }
.design-studio.is-canvas-expanded .design-studio__page-growth { min-height: max-content; overflow: visible; }
.design-studio__community-line:not(.is-feature-enabled), .design-studio__community-line[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .design-studio * { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}
.design-studio.is-standalone-preview { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); background: var(--ds-skin-background); }
.design-studio.is-standalone-preview .design-studio__canvas { grid-row: 2; min-height: 0; padding: 0; overflow: auto; background: var(--ds-skin-background); }
.design-studio.is-standalone-preview .design-studio__welcome-frame { width: 100%; height: auto; min-height: 100%; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
.design-studio.is-standalone-preview .design-studio__page-growth { overflow: visible; }
.design-studio.is-standalone-preview.is-canvas-expanded .design-studio__welcome-frame { grid-template-rows: var(--ds-header-height) minmax(var(--ds-hero-height), max-content) max-content var(--ds-footer-height); }
.design-studio.is-standalone-preview .design-studio__hero-content { top: calc(var(--ds-hero-height) * 0.15); left: clamp(20px, 4vw, 56px); width: min(40%, 520px); }
.design-studio.is-standalone-preview .design-studio__hero-name { width: 75%; font-size: clamp(22px, 2.2vw, 42px); }
@media (max-width: 1280px) {
  .design-studio.is-standalone-preview .design-studio__hero-content { width: clamp(min(300px, 100% - 40px), 36vw, 390px); }
  .design-studio.is-standalone-preview .design-studio__hero-name { width: 100%; font-size: clamp(24px, 2.2vw, 42px); }
}
@media (max-width: 700px) {
  .design-studio.is-standalone-preview { min-height: 100vh; grid-template-rows: auto minmax(0, 1fr); }
}
@media (max-height: 900px) and (min-width: 1101px) {
  .design-studio__canvas { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
}
@media (max-width: 1100px) {
  .design-studio { overflow: visible; }
  .design-studio__canvas { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; }
}
@media (forced-colors: active) {
  .design-studio, .design-studio__canvas { forced-color-adjust: auto; }
  .design-studio button { border: 2px solid ButtonText; }
}
.design-studio.is-canvas-expanded .design-studio__welcome-frame { grid-template-rows: var(--ds-header-height) var(--ds-hero-height) max-content var(--ds-footer-height); }
@keyframes dsCardDetailEnter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* WordPress-only additions */
/* Studio's preview applies `* { box-sizing: border-box }` (preview.css) to
   everything in the frame. WordPress's theme stylesheet happens to do the same
   globally; the Hub review page loads no such stylesheet. Carry the rule with
   the frame so it never depends on the page around it. */
.design-studio.lytaria-welcome, .design-studio.lytaria-welcome *, .design-studio.lytaria-welcome *::before, .design-studio.lytaria-welcome *::after { box-sizing: border-box; }
/* The page is a website, not Studio's full-screen preview: no "viewing as a
   visitor" bar row, the document scrolls, and the frame fills at least the
   window (in Studio it fills the preview area below the bar). */
body.lytaria-welcome-body { margin: 0; }
.design-studio.lytaria-welcome { position: relative; inset: auto; z-index: auto; display: block; min-height: 100vh; overflow: visible; }
.design-studio.lytaria-welcome .design-studio__canvas { overflow: visible; }
.design-studio.lytaria-welcome .design-studio__welcome-frame { min-height: 100vh; }
/* The site navigation and Member Login sit at the right of Studio's header,
   in the skin's navigation color and body font. Studio's header ignores
   pointer events because it is a preview; the links must work. */
.design-studio.lytaria-welcome .design-studio__site-header { justify-content: space-between; column-gap: 24px; }
.design-studio.lytaria-welcome .design-studio__site-header .lytaria-site-nav { pointer-events: auto; font-family: var(--ds-skin-body-font); }
.design-studio.lytaria-welcome .design-studio__site-header .lytaria-site-nav a { color: var(--ds-skin-navigation-text) !important; }
.design-studio.lytaria-welcome .design-studio__site-header .lytaria-site-nav a:hover,
.design-studio.lytaria-welcome .design-studio__site-header .lytaria-site-nav a[aria-current="page"] { color: var(--ds-skin-accent) !important; }
/* When the community name and the navigation do not fit on Studio's header
   row, the navigation moves to a second row and the header grows (a max-content
   row, which unlike auto never stretches into spare frame height), instead of
   cutting the name short. The header row keeps Studio's height as its
   minimum (64px, 70px at 1100px and below), so a header that fits is
   unchanged, and every row below it keeps Studio's size. */
.design-studio.lytaria-welcome { --lytaria-header-min: var(--ds-header-height); }
.design-studio.lytaria-welcome .design-studio__welcome-frame { --ds-header-height: max-content; }
.design-studio.lytaria-welcome .design-studio__site-header { min-height: var(--lytaria-header-min); flex-wrap: wrap; align-content: center; row-gap: 6px; padding-top: 10px; padding-bottom: 10px; }
.design-studio.lytaria-welcome .design-studio__site-header-name { max-width: 100%; }
.design-studio.lytaria-welcome .design-studio__canvas-image { object-fit: var(--lytaria-image-fit, cover); }